Help us understand the problem. What is going on with this article?

Gutenberg IconButton コンポーネント和訳

More than 1 year has passed since last update.

このページは Gutenberg の IconButton コンポーネントのリファレンス 2019年1月15日版を和訳したものです。

IconButton

アイコンボタンは、ユーザーが実行できるアクションを表し、インターフェイスとの対話方法を提供します。特に以下のような場所でよく出てきます:

  • ボタングループ
  • ツールバー

1.png
2.png

目次

  1. デザインガイドライン
  2. 開発ガイドライン
  3. 関連コンポーネント

デザインガイドライン

ベストプラクティス

アイコンボタンは以下のようにすること:

  • アクションを示す明瞭で正確なアイコンを選ぶこと。
  • クリックやタップによるアクションの始動を明確に伝えること。
  • 枯れた色を適切に用いること。 例えば、赤ボタンはアンドゥが困難、もしくは不可能である場合のみに使うこと。
  • インタフェースにおいて一貫した配置を行うこと。

解説

アイコンボタンはそれほど強調されません。ページ上ではあまり目立たないため、重要度の低いアクションに使用します。重要の度合いはコンテキストによって異なるでしょうが、通常は、誰かに実行してもらいたいメインのアクションに対する補足的な位置付けです。アイコンボタンは、コンテンツから注意をそらしたくない場合にも役立ちます。

開発ガイドライン

使い方

import { IconButton } from '@wordpress/components';

const MyIconButton = () => (
    <IconButton
        icon="ellipsis"
        label="More"
    />
);

関連コンポーネント

  • Toolbar コンポーネントは IconButton コンポーネントで構成されています。
Fujix
フリーのフロントエンドエンジニアです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away