ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

Clayボタン

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

種類

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

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

<clay:button label="Primary" />

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

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

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

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

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

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

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

リンクボタン: キャンセルアクションに使用されます。

<div class="col">
    <clay:button displayType="link" label="Link" />
</div>
<div class="col">
    <clay:button ariaLabel="Add Role" displayType="link" icon="add-role" />
</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 displayType="secondary" icon="indent-less" monospaced="<%= true %>" />

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

ブロックレベルボタン：

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

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

プラスボタン：

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

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

アクションボタン：

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

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

Capability:

Development and Tooling

Resource Type:

Official Documentation

Feature:

Java Development

Deployment Approach:

Liferay PaaS

Liferay Self-Hosted

Clayボタン

種類

バリエーション

関連トピック