Documentation

Documentation Menu
Go Back

Clayボタン

ボタンにはいくつかの種類とバリエーションがあります。 このチュートリアルでは、Clay taglibで作成できるボタンのさまざまなスタイルとバリエーションについて説明します。

種類

プライマリボタン :最も重要なアクションに使用されます。 2つのプライマリボタンを一緒にしたり、互いに近くに配置することはできません。

ラベル付きのプライマリボタン:

<clay:button label="Primary" />

プライマリボタンは明るい青色で、ユーザーの注意を引きます。

セカンダリボタン :セカンダリアクションに使用されます。 複数のセカンダリボタンを一緒に、または互いに近くに配置できます。

<div class="col">
    <clay:button label="Secondary" style="secondary" />
</div>
<div class="col">
    <clay:button ariaLabel="Wiki" icon="wiki" style="secondary" />
</div>

セカンダリボタンは、プライマリボタンよりも注意を引くものではなく、セカンダリアクションを目的としています。

ボーダレスボタン :ツールバーなど、セカンダリボタンがデザインに対して重すぎる場合に使用されます。 これにより、デザインがクリーンになります。

<div class="col">
    <clay:button label="Borderless" style="borderless" />
</div>
<div class="col">
    <clay:button ariaLabel="Page Template" icon="page-template" style="borderless" />
</div>

ボーダーレスボタンは、ボタンから暗いアウトラインを削除します。

リンクボタン: キャンセル操作に使用します。

<div class="col">
    <clay:button label="Link" style="link" />
</div>
<div class="col">
    <clay:button ariaLabel="Add Role" icon="add-role" style="link" />
</div>

ボタンをリンクに変えることもできます。

ボタンにラベルまたはアイコンを使用できます。 以下はアイコン付きのプライマリボタンの例です。

<clay:button ariaLabel="Workflow" icon="workflow" />

ボタンにはアイコンも表示できます。

disabled属性を追加して、ボタンを無効にできます。

<div class="col">
    <clay:button disabled="<%= true %>" label="Primary" />
</div>
<div class="col">
    <clay:button ariaLabel="Workflow" disabled="<%= true %>" icon="workflow" />
</div>

ユーザーにボタンを操作させたくない場合は、ボタンを無効にすることができます。

バリエーション

アイコンとテキストの付いたボタン:

<clay:button icon="share" label="Share" />

ボタンはアイコンとテキストの両方を表示できます。

等幅テキストのボタン:

<clay:button icon="indent-less" monospaced="<%= true %>" style="secondary" />

ボタンは等幅テキストを表示できます。

ブロックレベルボタン:

<clay:button block="<%= true %>" label="Button" />

ブロックレベルのボタンは、コンテナの幅全体に広がります。

プラスボタン:

<clay:button icon="plus" monospaced="<%= true %>" style="secondary" />

アプリでアクションを追加するには、プラスボタンを使用します。

アクションボタン:

<clay:button icon="ellipsis-v" monospaced="<%= true %>" style="borderless" />

アクションボタンは、アクションメニューを表示するために使用されます。

関連トピック