SegmentedButtonSzegmentált gomb

セグメントボタンコンポーネントは、一連のボタンをグループ化し、オプションの提供、ビューの切り替え、要素の並べ替えなどに使用されます。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/segmented-button-group.js';
import 'mdui/components/segmented-button.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js';
import type { SegmentedButton } from 'mdui/components/segmented-button.js';

使用例：

Day

Week

Month

<mdui-segmented-button-group>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button>Week</mdui-segmented-button>
  <mdui-segmented-button>Month</mdui-segmented-button>
</mdui-segmented-button-group>

例

全幅表示

<mdui-segmented-button-group> 要素に full-width 属性を追加すると、コンポーネントが全幅を占めるようになります。

Day

Week

Month

<mdui-segmented-button-group full-width>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button>Week</mdui-segmented-button>
  <mdui-segmented-button>Month</mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

単一選択モード

<mdui-segmented-button-group> 要素で selects 属性を single に指定すると、単一選択モードを実現できます。この場合、<mdui-segmented-button-group> の value 属性の値は、現在選択されている <mdui-segmented-button> の value 属性の値になります。

Day

Week

Month

Day

Week

Month

<mdui-segmented-button-group selects="single">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="single" value="week">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

複数選択モード

<mdui-segmented-button-group> 要素で selects 属性を multiple に指定すると、複数選択モードを実現できます。この場合、<mdui-segmented-button-group> の value 属性の値は、現在選択されている <mdui-segmented-button> の value 属性の値からなる配列になります。

注意：複数選択モードでは、<mdui-segmented-button-group> の value 属性の値は配列であり、JavaScript プロパティを通じてのみ読み取りと設定ができます。

Day

Week

Month

Day

Week

Month

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

<mdui-segmented-button-group selects="multiple" class="demo-multiple">
  <mdui-segmented-button value="day">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">Week</mdui-segmented-button>
  <mdui-segmented-button value="month">Month</mdui-segmented-button>
</mdui-segmented-button-group>

<script>
  // week と month をデフォルトで選択状態に設定
  const group = document.querySelector(".demo-multiple");
  group.value = ["week", "month"];
</script>

Forrás

アイコン

<mdui-segmented-button> 要素で icon と end-icon 属性を設定すると、ボタンの左側と右側に Material Icons アイコンを追加できます。また、icon と end-icon スロットを使用してボタンの左側と右側に要素を追加することもできます。

Day

Week

Month

<mdui-segmented-button-group>
  <mdui-segmented-button icon="search">Day</mdui-segmented-button>
  <mdui-segmented-button end-icon="arrow_forward">Week</mdui-segmented-button>
  <mdui-segmented-button>
    Month
    <mdui-icon slot="icon" name="downloading"></mdui-icon>
    <mdui-icon slot="end-icon" name="attach_file"></mdui-icon>
  </mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

<mdui-segmented-button> 要素に selected-icon 属性を追加することで、選択状態の Material Icons アイコンを設定できます。selected-icon スロットを使用して設定することもできます。

Day

Week

<mdui-segmented-button-group selects="multiple">
  <mdui-segmented-button value="day" selected-icon="cloud_done">Day</mdui-segmented-button>
  <mdui-segmented-button value="week">
    <mdui-icon slot="selected-icon" name="cloud_done"></mdui-icon>
    Week
  </mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

リンク

<mdui-segmented-button> 要素に href 属性を設定すると、ボタンをリンクに変換できます。この場合、リンク関連の属性 download、target、rel も使用できます。

Link

Week

Month

<mdui-segmented-button-group>
  <mdui-segmented-button href="https://www.mdui.org" target="_blank">Link</mdui-segmented-button>
  <mdui-segmented-button>Week</mdui-segmented-button>
  <mdui-segmented-button>Month</mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

無効およびローディング状態

<mdui-segmented-button-group> 要素に disabled 属性を追加すると、セグメントボタングループ全体を無効にできます。

Day

Week

Month

<mdui-segmented-button-group disabled>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button>Week</mdui-segmented-button>
  <mdui-segmented-button>Month</mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

<mdui-segmented-button> 要素に disabled 属性を追加すると、特定のボタンを無効にできます；loading 属性を追加すると、特定のボタンにローディング状態を追加できます。

Day

Week

Month

Year

<mdui-segmented-button-group>
  <mdui-segmented-button>Day</mdui-segmented-button>
  <mdui-segmented-button disabled>Week</mdui-segmented-button>
  <mdui-segmented-button loading>Month</mdui-segmented-button>
  <mdui-segmented-button disabled loading>Year</mdui-segmented-button>
</mdui-segmented-button-group>

Forrás

`mdui-segmented-button-group` API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`full-width`	`fullWidth`	`boolean`	`false`
親要素の幅いっぱいに広げるかどうかを指定します。
`selects`	`selects`	`'single' \| 'multiple'`	-
セグメントボタンの選択可能状態です。デフォルトは選択不可です。次の値を指定します： `single`：単一選択 `multiple`：複数選択
`disabled`	`disabled`	`boolean`	`false`
無効状態にするかどうかを指定します。
`required`	`required`	`boolean`	`false`
フォーム送信時に、選択を必須にするかどうかを指定します。
`form`	`form`	`string`	-
関連付ける `<form>` 要素です。この属性値には、同一ページ内の `<form>` 要素の `id` を指定する必要があります。この属性が指定されていない場合、この要素は `<form>` 要素の子要素である必要があります。この属性を使用すると、要素を `<form>` 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
`name`	`name`	`string`	`''`
フォーム送信時の名前です。フォームデータと共に送信されます。
`value`	`value`	`string \| string[]`	`''`
現在選択されている `<mdui-segmented-button>` の値です。注：この属性のHTML属性値は常に文字列として扱われ、`selects="single"` の場合にのみHTML属性で初期値を設定できます。この属性のJavaScriptプロパティ値は、`selects="single"` の場合は文字列、`selects="multiple"` の場合は文字列の配列になります。したがって、`selects="multiple"` の場合にこの値を変更するには、JavaScriptプロパティ値を変更する必要があります。
	`defaultValue`	`string \| string[]`	`''`
デフォルトで選択される値です。フォームをリセットすると、このデフォルト値にリセットされます。この属性はJavaScriptプロパティでのみ設定できます。
	`validity`	`ValidityState`	-
フォーム検証ステータスを表す `ValidityState` オブジェクトです。詳細は `ValidityState` を参照してください。
	`validationMessage`	`string`	-
フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。

Metódusok

Név	Paraméterek	Visszatérési érték
`checkValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。
`reportValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
`setCustomValidity`	`message: string`	`void`
カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。

Események

Név
`change`
選択された値が変更されたときに発生します。
`invalid`
フォームフィールドの検証に合格しなかったときに発生します。

Slots

Név
(alapértelmezett)
`<mdui-segmented-button>` コンポーネント

CSS egyéni tulajdonságok

Név
`--shape-corner`
コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。

`mdui-segmented-button` API

Tulajdonságok

Attribútum	Tulajdonság	Típus	Alapértelmezett
`icon`	`icon`	`string`	-
左側に表示するMaterial Iconsのアイコン名です。`slot="icon"` で設定することもできます。
`end-icon`	`endIcon`	`string`	-
右側に表示するMaterial Iconsのアイコン名です。`slot="end-icon"` で設定することもできます。
`selected-icon`	`selectedIcon`	`string`	-
選択状態のMaterial Iconsアイコン名です。`slot="selected-icon"` で設定することもできます。
`href`	`href`	`string`	-
リンク先のURLです。この属性を設定すると、コンポーネント内部は `<a>` 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
`download`	`download`	`string`	-
ダウンロードリンクの対象ファイル名です。注：`href` 属性が設定されている場合にのみ有効です。
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
リンクの開き方です。次の値を指定します： `_blank`：新しいウィンドウで開く `_parent`：親フレームで開く `_self`：デフォルト。現在のフレームで開く `_top`：最上位のウィンドウで開く注：`href` 属性が設定されている場合にのみ有効です。
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
現在のドキュメントとリンク先ドキュメントの関係です。次の値を指定します： `alternate`：現在のドキュメントの代替バージョン `author`：現在のドキュメントまたは記事の作成者 `bookmark`：直近の祖先セクションへのパーマリンク `external`：参照先ドキュメントが現在のサイトとは異なるサイトにあることを示します `help`：関連するヘルプドキュメントへのリンク `license`：現在のドキュメントのメインコンテンツが、参照先ファイルの著作権ライセンスの対象であることを示します `me`：現在のドキュメントがリンク先コンテンツの所有者を表します `next`：現在のドキュメントがシリーズの一部であり、参照先ドキュメントがシリーズの次のドキュメントです `nofollow`：現在のドキュメントの作成者または発行者が、参照先ファイルを推奨していないことを示します `noreferrer`：`Referer` ヘッダーを含めません。`noopener` と同様の効果です `opener`：ハイパーリンクが最上位のブラウジングコンテキストを作成する場合（つまり `target` 属性値が `_blank`）、補助ブラウジングコンテキストを作成します `prev`：現在のドキュメントがシリーズの一部であり、参照先ドキュメントがシリーズの前のドキュメントです `search`：現在のファイルとその関連ページを検索するために使用できるリソースへのリンクを提供します `tag`：現在のドキュメントに適用されるタグ（指定されたアドレスで識別される）を提供します注：`href` 属性が指定されている場合にのみ使用できます。
`autofocus`	`autofocus`	`boolean`	`false`
ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
`tabindex`	`tabIndex`	`number`	-
Tab キーによるフォーカス移動時の、要素の順序を指定します。
`disabled`	`disabled`	`boolean`	`false`
無効状態にするかどうかを指定します。
`loading`	`loading`	`boolean`	`false`
読み込み中状態にするかどうかを指定します。
`name`	`name`	`string`	`''`
ボタンの名前です。フォームデータと共に送信されます。注：`href` 属性が設定されていない場合にのみ有効です。
`value`	`value`	`string`	`''`
ボタンの初期値です。フォームデータと共に送信されます。注：`href` 属性が設定されていない場合にのみ有効です。
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
ボタンのタイプです。デフォルトのタイプは `button` です。次のタイプを指定します： `submit`：ボタンをクリックするとフォームデータがサーバーに送信されます `reset`：ボタンをクリックするとフォーム内のすべてのフィールドが初期値にリセットされます `button`：このタイプのボタンにはデフォルトの動作はありません注：`href` 属性が指定されていない場合にのみ有効です。
`form`	`form`	`string`	-
関連付ける `<form>` 要素です。この属性値には、同一ページ内の `<form>` 要素の `id` を指定する必要があります。この属性が指定されていない場合、この要素は `<form>` 要素の子要素である必要があります。この属性を使用すると、要素を `<form>` 要素の子要素だけでなく、ページ上の任意の場所に配置できます。注：`href` 属性が指定されていない場合にのみ有効です。
`formaction`	`formAction`	`string`	-
フォーム送信先のURLを指定します。この属性が指定されている場合、`<form>` 要素の `action` 属性は上書きされます。注：`href` 属性が指定されておらず、かつ `type="submit"` の場合にのみ有効です。
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
サーバーにフォームを送信する際のコンテンツタイプを指定します。次の値を指定します： `application/x-www-form-urlencoded`：この属性が指定されていない場合のデフォルト値 `multipart/form-data`：フォームに `<input type="file">` 要素が含まれる場合に使用します `text/plain`：HTML5で追加された、デバッグ用この属性が指定されている場合、`<form>` 要素の `enctype` 属性は上書きされます。注：`href` 属性が指定されておらず、かつ `type="submit"` の場合にのみ有効です。
`formmethod`	`formMethod`	`'post' \| 'get'`	-
フォーム送信時に使用するHTTPメソッドを指定します。次の値を指定します： `post`：フォームデータはフォームコンテンツに含まれてサーバーに送信されます `get`：フォームデータは `?` 区切りでフォームのURI属性に追加され、生成されたURIがサーバーに送信されます。フォームに副作用がなく、ASCII文字のみを含む場合にこのメソッドを使用しますこの属性が設定されている場合、`<form>` 要素の `method` 属性は上書きされます。注：`href` 属性が設定されておらず、かつ `type="submit"` の場合にのみ有効です。
`formnovalidate`	`formNoValidate`	`boolean`	`false`
この属性が設定されている場合、フォーム送信時にフォーム検証は実行されません。この属性が設定されている場合、`<form>` 要素の `novalidate` 属性は上書きされます。注：`href` 属性が設定されておらず、かつ `type="submit"` の場合にのみ有効です。
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
フォーム送信後に受信したレスポンスを表示する場所を指定します。次の値を指定します： `_self`：デフォルトのオプション。現在のフレームで開きます `_blank`：新しいウィンドウで開きます `_parent`：親フレームで開きます `_top`：最上位のウィンドウで開きますこの属性が設定されている場合、`<form>` 要素の `target` 属性は上書きされます。注：`href` 属性が設定されておらず、かつ `type="submit"` の場合にのみ有効です。
	`validity`	`ValidityState`	-
フォーム検証ステータスを表す `ValidityState` オブジェクトです。詳細は `ValidityState` を参照してください。
	`validationMessage`	`string`	-
フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。

Metódusok

Név	Paraméterek	Visszatérési érték
`click`		`void`
要素のマウスクリックをシミュレートします。
`focus`	`options: FocusOptions` (Opcionális)	`void`
現在の要素にフォーカスを設定します。オプションとして、以下のプロパティを持つオブジェクトを渡すことができます： `preventScroll`：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを `true` に設定します。
`blur`		`void`
現在の要素からフォーカスを外します。
`checkValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。
`reportValidity`		`boolean`
フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は `false` を返し、`invalid` イベントをトリガーします。合格した場合は `true` を返します。検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
`setCustomValidity`	`message: string`	`void`
カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。

Események

Név
`focus`
フォーカスを取得したときに発生します。
`blur`
フォーカスを失ったときに発生します。
`invalid`
フォームフィールドの検証に合格しなかったときに発生します。

Slots

Név
(alapértelmezett)
セグメントボタンアイテムのテキストコンテンツ
`icon`
セグメントボタンアイテムの左側のアイコン
`selected-icon`
選択状態の左側のアイコン
`end-icon`
セグメントボタンアイテムの右側のアイコン

CSS Parts

Név
`button`
内部の `<button>` または `<a>` 要素
`icon`
左側のアイコン
`selected-icon`
選択状態の左側のアイコン
`end-icon`
右側のアイコン
`label`
テキストコンテンツ
`loading`
読み込み中状態の `<mdui-circular-progress>` 要素

Előző fejezet

Select Választómező

Következő fejezet

Slider Csúszka