Button Group (ボタン グループ)

    Button Group コンポーネントを使用して、いくつかの関連機能のトリガーを 1 つのインターフェイス要素に結合します。Button Group は、Ignite UI for Angular Button Group コンポーネントと視覚的に同じものです。

    Button Group のデモ

    レイアウト

    Button Group は、2 方向レイアウトをサポートし、左から右の水平方向、上から下の垂直に配置できます。

    ボタン数

    Figma では、ボタン グループは自動レイアウトを使用しているため、必要なボタンの正確な数を選択し、レイヤー パネルでネストされた余分なボタンを非表示にすると、それに応じて調整されます。Sketch では、ボタン グループは Figma に似たスマート レイアウトを使用しているため、オーバーライド パネルから ~No Symbol に設定することで不要なボタンを非表示にすることができます。Adobe XD では、ボタンを使用して不要なレイヤーを削除するとレイアウトが自動的に調整されます。

    ボタン レイアウト テンプレート

    Button Group の各ボタンは Flat Button であり、同様のテンプレートを作成できます。

    スタイル設定

    Button Group は、さまざまなオプションを通じて境界線と背景色、各ボタンのアウトライン、背景、テキスト、アイコンの色を柔軟にスタイル設定できます。

    使用方法

    Button のスタイルは統一させます。同じ Button グループ内でテキスト Button とアイコン Button を組合さないようにします。Button Group のサイズはコンテンツに基づいて変更することにより、Button に空スペースが多く残らないようにします。Button Group は、シンプルで関連のある操作のみの表示に使用します。簡単なナビゲーションにも適していないため、Tabs の使用をお勧めします。

    良い例 悪い例

    その他のリソース

    関連トピック:

    コミュニティに参加して新しいアイデアをご提案ください。