バッジは、通知や新しい未読メッセージなどの重要な情報を強調するのに役立ちます。バッジには円形の境界線があり、番号を指定するためにのみ使用されます。このチュートリアルでは、アプリに追加できるさまざまな種類のClayバッジについて説明します。
バッジの種類
次のバッジスタイルを使用できます。
プライマリバッジ:
<div class="col-md-1">
<clay:badge label="8" />
<div>Primary</div>
</div>
セカンダリバッジ:
<div class="col-md-1">
<clay:badge label="87" style="secondary" />
<div>Secondary</div>
</div>
情報バッジ:
<div class="col-md-1">
<clay:badge label="91" style="info" />
<div>Info</div>
</div>
エラーバッジ:
<div class="col-md-1">
<clay:badge label="130" style="danger" />
<div>Error</div>
</div>
成功バッジ:
<div class="col-md-1">
<clay:badge label="1111" style="success" />
<div>Success</div>
</div>
警告バッジ:
<div class="col-md-1">
<clay:badge label="21" style="warning" />
<div>Warning</div>
</div>
これで、バッジを使用してアプリの値を追跡する方法がわかりました。