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 の使用をお勧めします。

良い例	悪い例

Button Group (ボタン グループ)