Documentation

Documentation Menu
Go Back

Clayバッジ

バッジは、通知や新しい未読メールなどの重要な情報を強調するのに役立ちます。 バッジには円形の枠線があり、数字を指定するためにのみ使用されます。 ここでは、アプリに追加できるさまざまな種類の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>

注意バッジには、対処する必要のある警告に関連する数字が表示されます。

これで、バッジを使用してアプリの値を追跡する方法がわかりました。