私はAngular6を初めて使用します。私のウェブサイトには、次のように動的に形成された一連のボタンを表示するセクションがあります。
<button class="card-button" *ngFor="let env of product.env" name="button">{{env.name}}</button>
また、デフォルトで選択されているボタンの別の境界線を表示したい
button:focus {
border-bottom: 4px solid #CC292B;
color: #CC292B;
}
button{
border-bottom: 4px solid green;
color: green;
}
これで、ボタンが選択されている場合は表示されcolor: #CC292B;、それ以外の場合は緑色になります。上記のCSSを通じて、私はそのタスクを達成することができました。ここで、最初のボタンをデフォルトで選択する必要がありました。つまり、最初のボタンcolor: #CC292B;は緑色で表示され、残りは緑色で表示されます。これを実現するにはどうすればよいですか？前もって感謝します
それngClassを達成するために使用します：
<button class="card-button" *ngFor="let env of product.env; let i = index" [ngClass]="[i == 0 ? 'button-active' : 'button-standard']" name="button">{{env.name}}</button>
そしてあなたはこの種のCSSを持つことができます
.button-active{
color:red;
}
.button-standard{
color: green;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加