代码之家 › 专栏 › 技术社区 › MarcoLe

角度6-引导单选按钮

bootstrap-4 html5 angular

0

MarcoLe · 技术社区 · 7 年前

我目前正在尝试在我的Angular6项目中应用引导单选按钮方法。您可以在按钮组中应用按钮上的活动状态,并且每次单击另一个按钮时,活动状态切换到单击的按钮。有点难以用文字描述,但这里是引导文件(最后一节): Bootstraps doc

我将此添加到组件视图:

  <div class="col-md-3 offset-2">

    <div class="btn-group btn-group-toggle" id="filterCategory" data-toggle="buttons">
      <label class="btn btn-lg btn-outline-success active">
        <input type="radio" name="options" autocomplete="off" checked>New
      </label>
      <label class="btn btn-lg btn-outline-success">
        <input type="radio" name="options" autocomplete="off">
        <img src="assets/fire.png" width="22" height="auto" alt="bookmarked">
      </label>
      <label class="btn btn-lg btn-outline-success" *ngIf="isVerified">
        <input type="radio" name="options" autocomplete="off">
        <img src="assets/bookmark.png" width="22" height="auto" alt="bookmarked">
      </label>
    </div>

  </div>

但是活动状态不能通过单击从按钮切换到按钮…也许有人能帮我解决这个问题。)

1 回复 | 直到 7 年前

1

Sunil Singh 7 年前

复选框的活动状态根据CSS类更改。在您的情况下,只要用户单击按钮,就需要更改活动。你可以通过一个变量来实现 currentButton .

<div class="col-md-3 offset-2">

    <div class="btn-group btn-group-toggle" id="filterCategory" data-toggle="buttons">
      <label class="btn btn-lg btn-outline-success" 
            [ngClass]="{active : currentButton == 'first'}"
            (click) = "currentButton='first'"
             >
        <input type="radio" name="options" autocomplete="off" checked>New
      </label>
      <label class="btn btn-lg btn-outline-success"
             [ngClass]="{active : currentButton == 'second'}"
            (click) = "currentButton='second'"
        >
        <input type="radio" name="options" autocomplete="off">
        <img src="assets/fire.png" width="22" height="auto" alt="bookmarked">
      </label>
      <label class="btn btn-lg btn-outline-success" *ngIf="isVerified"
            [ngClass]="{active : currentButton == 'third'}"
            (click) = "currentButton='third'"
        >
        <input type="radio" name="options" autocomplete="off">
        <img src="assets/bookmark.png" width="22" height="auto" alt="bookmarked">
      </label>
    </div>

  </div>

在TS中

public currentButton = "first"; //<-- you can change the default as per your requirement.