# 概要 mdui の CDN と最もシンプルなページテンプレートを使って、mdui を使い始めましょう。 > あなたは mdui 2 のドキュメントを読んでいます！ > > mdui 1 のドキュメントを読むには、[www.mdui.org/docs/](https://www.mdui.org/docs/) にアクセスしてください。 ## クイックスタート {#getting-started} mdui を使用する最も簡単な方法は、CDN から CSS と JS ファイルを直接読み込むことです。 npm で mdui をインストールする方法については、[インストール](/ja/docs/2/getting-started/installation) の章を参照してください。 **ファイルの読み込み** 以下のコードをページの `` タグ内に追加します： ```html ``` コンポーネントのアイコン属性（例：`` の `icon` 属性）を使用する必要がある場合は、アイコンの CSS ファイルも追加で読み込む必要があります。詳細は [Material Icons アイコンの使用](/ja/docs/2/components/icon#usage-material-icons) を参照してください。 mdui はサードパーティのライブラリに依存しません。上記のファイルを読み込めば、正常に動作します。 ## 最もシンプルなページテンプレート {#template} 以下は最もシンプルなページテンプレートです。ここにさらにコンポーネントやコンテンツを追加して、ウェブサイトを構築できます。 ```html Hello, world! Hello, world! ``` # インストール mdui は npm でインストールするか、CDN から読み込むかを選択できます。npm でのインストールを推奨します。 ## npm インストール {#npm} ```bash npm install mdui --save ``` ### フルインポート {#full-import} プロジェクトのエントリーファイルで以下の 2 つのファイルをインポートすると、すべての mdui コンポーネントを使用できます： ```js import 'mdui/mdui.css'; import 'mdui'; ``` mdui から必要な関数を直接インポートすることもできます。例えば、[`snackbar`](/ja/docs/2/functions/snackbar) 関数をインポートするには、次のようにします： ```js import { snackbar } from 'mdui'; ``` mdui からインポート可能なすべての関数を表示 
import {
  $,
  dialog,
  alert,
  confirm,
  prompt,
  snackbar,
  getTheme,
  setTheme,
  getColorFromImage,
  setColorScheme,
  removeColorScheme,
  loadLocale,
  setLocale,
  getLocale,
  throttle,
  observeResize,
  breakpoint
} from 'mdui';
 ### 必要なものだけをインポート（Cherry-Picking） {#cherry-picking} プロジェクトのサイズを最適化するために、必要なコンポーネントと関数のみをインポートできます。例えば、[``](/ja/docs/2/components/button) コンポーネントと [`snackbar`](/ja/docs/2/functions/snackbar) 関数のみを使用する場合は、次のようにインポートします： ```js // CSS ファイルは常にインポートする必要があります import 'mdui/mdui.css'; // コンポーネントをインポート import 'mdui/components/button.js'; // snackbar 関数をインポート import { snackbar } from 'mdui/functions/snackbar.js'; ``` 各コンポーネントや関数のドキュメントページで、必要なものだけをインポートする方法が詳しく説明されています。 必要なものだけをインポート可能なすべてのコンポーネントと関数を表示 
import 'mdui/components/avatar.js';
import 'mdui/components/badge.js';
import 'mdui/components/bottom-app-bar.js';
import 'mdui/components/button.js';
import 'mdui/components/button-icon.js';
import 'mdui/components/card.js';
import 'mdui/components/checkbox.js';
import 'mdui/components/chip.js';
import 'mdui/components/circular-progress.js';
import 'mdui/components/collapse.js';
import 'mdui/components/collapse-item.js';
import 'mdui/components/dialog.js';
import 'mdui/components/divider.js';
import 'mdui/components/dropdown.js';
import 'mdui/components/fab.js';
import 'mdui/components/icon.js';
import 'mdui/components/layout.js';
import 'mdui/components/layout-item.js';
import 'mdui/components/layout-main.js';
import 'mdui/components/linear-progress.js';
import 'mdui/components/list.js';
import 'mdui/components/list-item.js';
import 'mdui/components/list-subheader.js';
import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';
import 'mdui/components/navigation-bar.js';
import 'mdui/components/navigation-bar-item.js';
import 'mdui/components/navigation-drawer.js';
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
import 'mdui/components/radio.js';
import 'mdui/components/radio-group.js';
import 'mdui/components/range-slider.js';
import 'mdui/components/ripple.js';
import 'mdui/components/segmented-button.js';
import 'mdui/components/segmented-button-group.js';
import 'mdui/components/select.js';
import 'mdui/components/slider.js';
import 'mdui/components/snackbar.js';
import 'mdui/components/switch.js';
import 'mdui/components/tab.js';
import 'mdui/components/tab-panel.js';
import 'mdui/components/tabs.js';
import 'mdui/components/text-field.js';
import 'mdui/components/tooltip.js';
import 'mdui/components/top-app-bar.js';
import 'mdui/components/top-app-bar-title.js';
import { $ } from 'mdui/jq.js';
import { alert } from 'mdui/functions/alert.js';
import { breakpoint } from 'mdui/functions/breakpoint.js';
import { confirm } from 'mdui/functions/confirm.js';
import { dialog } from 'mdui/functions/dialog.js';
import { getColorFromImage } from 'mdui/functions/getColorFromImage.js';
import { getLocale } from 'mdui/functions/getLocale.js';
import { getTheme } from 'mdui/functions/getTheme.js';
import { loadLocale } from 'mdui/functions/loadLocale.js';
import { observeResize } from 'mdui/functions/observeResize.js';
import { prompt } from 'mdui/functions/prompt.js';
import { removeColorScheme } from 'mdui/functions/removeColorScheme.js';
import { setColorScheme } from 'mdui/functions/setColorScheme.js';
import { setLocale } from 'mdui/functions/setLocale.js';
import { setTheme } from 'mdui/functions/setTheme.js';
import { snackbar } from 'mdui/functions/snackbar.js';
import { throttle } from 'mdui/functions/throttle.js';
 ## CDN {#cdn} `` と ` クリック ``` ### ES モジュールビルド版の使用 {#es-module} 以下の例は、ES モジュールビルド版の mdui の使用方法を示しています。このバージョンでは、CDN から mdui を ES モジュール構文でインポートできます： ```html クリック ``` # クイックスタート mdui のコンポーネントはすべて標準の Web Components です。`
` タグと同じように mdui コンポーネントを使用できます。各コンポーネントのドキュメントには、属性、メソッド、イベント、スロット、CSS Part、CSS カスタムプロパティなど、完全な API が詳しく記載されています。 この章では、Web Components の使用方法を紹介します。 ## 属性 {#attribute} 属性には HTML 属性と JavaScript プロパティがあり、通常は一対一に対応し、同期されます。つまり、HTML 属性の値を更新すると JavaScript プロパティの値も更新され、その逆も同様です。 HTML 属性はコンポーネントの HTML 文字列で直接設定でき、`getAttribute` メソッドと `setAttribute` メソッドで読み書きできます： ```html クリック ``` JavaScript プロパティは、コンポーネントインスタンスのプロパティ値を直接読み書きできます： ```html クリック ``` 一部のプロパティの値は boolean 型です。これらのプロパティの HTML 属性が存在する場合は JavaScript プロパティが `true` になり、存在しない場合は `false` になります。ただし、一部のフレームワークとの互換性のため、mdui は文字列の `false` 値も boolean 値の `false` と判定します。 ```html ``` 属性値が配列、オブジェクト、または関数の場合、対応する HTML 属性はなく、JavaScript プロパティのみが存在します。例えば、[``](/ja/docs/2/components/slider) コンポーネントの [`labelFormatter`](/ja/docs/2/components/slider#attributes-labelFormatter) プロパティは関数であり、このプロパティは JavaScript でのみ設定できます： ```html ``` 以下、[``](/ja/docs/2/components/slider) コンポーネントの属性ドキュメントの一部を例に説明します： | HTML 属性 | JavaScript プロパティ | reflect | | --------- | --------------------- | -------------------------------------------------------------------------------------- | | `name` | `name` | | | `value` | `value` | | | | `labelFormatter` | | このコンポーネントの `name` 属性には HTML 属性と JavaScript プロパティがあり、reflect 欄は JavaScript プロパティを更新すると HTML 属性も同期更新されることを示しています。`value` プロパティは JavaScript プロパティを更新しても HTML 属性は更新されません。`labelFormatter` プロパティは JavaScript プロパティのみです。 ## メソッド {#method} 一部のコンポーネントはパブリックメソッドを提供しており、これらのメソッドを呼び出すことでさまざまな機能を実現できます。例えば、[``](/ja/docs/2/components/text-field) コンポーネントの [`focus()`](/ja/docs/2/components/text-field#methods-focus) メソッドは、テキストフィールドにフォーカスを当てることができます。 ```html ``` 各コンポーネントのドキュメントページで、使用可能なすべてのメソッドとそのパラメーターを確認できます。 ## イベント {#event} 一部のコンポーネントは、特定の操作を実行したときにイベントを発火させます。例えば、[``](/ja/docs/2/components/dialog) コンポーネントは開くときに [`open`](/ja/docs/2/components/dialog#events-open) イベントを発火させます。このイベントをリッスンしてカスタム操作を実行できます。 ```html Dialog ``` 各コンポーネントのドキュメントページで、使用可能なすべてのイベントとそのパラメーターを確認できます。 Vue、React、Angular などの他のフレームワークで mdui を使用する場合、そのフレームワークが提供する構文を使用してイベントをバインドできます。ただし、React などの一部のフレームワークのイベントバインディング構文は標準イベント（`click` イベントなど）のバインディングにしか使用できず、カスタムイベント（`open` イベントなど）のバインディングには使用できません。したがって、React でカスタムイベントをバインドするには、まず要素の参照を取得し、`addEventListener` メソッドを使用してイベントをバインドする必要があります。 React で mdui を使用する詳細については、[フレームワーク連携 - React](/ja/docs/2/frameworks/react) を参照してください。 ## スロット {#slot} 多くのコンポーネントはスロットを提供しており、カスタムの HTML コンテンツをコンポーネント内部に挿入できます。 最も一般的なのはデフォルトスロットで、コンポーネント内部の通常の HTML またはプレーンテキストです。例えば、[``](/ja/docs/2/components/button) コンポーネントのデフォルトスロットはボタンのテキストを設定します。例の「クリック」がデフォルトスロットの内容です： ```html クリック ``` 一部のコンポーネントは名前付きスロットも提供しています。名前付きスロットを使用するには、HTML の `slot` 属性でスロット名を指定する必要があります。次の例では、[``](/ja/docs/2/components/icon) コンポーネントが `slot="start"` を指定しています。これは [`start`](/ja/docs/2/components/button#slots-icon) という名前の名前付きスロットであり、このアイコンがコンポーネント内部の左側に挿入されることを意味します： ```html 設定 ``` コンポーネントが複数の名前付きスロットを使用する場合、各名前付きスロットの順序は重要ではありません。それらがコンポーネント内部にあれば、ブラウザは自動的にそれらを正しい位置に配置します。 各コンポーネントのドキュメントページで、サポートされているすべてのスロットを確認できます。 ## CSS カスタムプロパティ {#css-custom-properties} CSS カスタムプロパティは CSS 内の変数です。mdui は一連の[グローバル CSS カスタムプロパティ](/ja/docs/2/styles/design-tokens)を定義しており、これらのプロパティは各コンポーネント内部で使用されています。したがって、これらの CSS カスタムプロパティを変更することで、mdui コンポーネントのスタイルをグローバルに変更できます。 例えば、以下のコードはすべてのコンポーネントの角丸のサイズを小さくします： ```css :root { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` また、ローカルスコープで CSS カスタムプロパティを変更することもできます。例えば、以下のコードは `class="sharp"` を含む要素とその子要素内でのみ角丸のサイズを小さくします： ```css .sharp { --mdui-shape-corner-extra-small: 0.125rem; --mdui-shape-corner-small: 0.25rem; --mdui-shape-corner-medium: 0.375rem; --mdui-shape-corner-large: 0.5rem; --mdui-shape-corner-extra-large: 0.875rem; } ``` 一部のコンポーネントは、そのコンポーネント固有の CSS カスタムプロパティも提供しています。これらのプロパティのスコープは特定のコンポーネントであるため、`--mdui` プレフィックスは含まれません。例えば、以下のコードは [``](/ja/docs/2/components/dialog) コンポーネントの `--z-index` プロパティを変更することで、`z-index` スタイルを変更します： ```css mdui-dialog { --z-index: 3000; } ``` 各コンポーネントのドキュメントページで、コンポーネントがサポートする CSS カスタムプロパティを確認できます。 ## CSS Part {#css-part} mdui コンポーネントは Shadow DOM を使用してスタイルと動作をカプセル化していますが、通常の CSS セレクターでは Shadow DOM 内部の要素を選択できません。そのため、一部のコンポーネントは Shadow DOM 要素に `part` 属性を追加しており、`::part` CSS セレクターを使用して対応する要素を選択し、スタイルの一部を上書きできます。 例えば、以下のコードは [`button`](/ja/docs/2/components/button#cssParts-button) part を使用してボタンの内側のパディングを変更し、[`label`](/ja/docs/2/components/button#cssParts-label)、[`icon`](/ja/docs/2/components/button#cssParts-icon)、[`end-icon`](/ja/docs/2/components/button#cssParts-end-icon) part を使用してテキストと左右のアイコンの色をそれぞれ変更しています： ```html Button ``` コンポーネントの Shadow DOM 要素の構造とデフォルトのスタイルについては、ブラウザの開発者ツールを開いて確認できます。 CSS Part を使用する前に、まずグローバル CSS カスタムプロパティやコンポーネント固有の CSS カスタムプロパティを使用することでニーズを満たせるかどうかを判断してください。満たせる場合は、CSS カスタムプロパティを優先してスタイルをカスタマイズすることをお勧めします。 各コンポーネントのドキュメントページで、コンポーネントが公開するすべての `part` 属性を確認できます。 ## コンポーネントの更新メカニズム {#update-mechanism} mdui コンポーネントは [Lit](https://lit.dev/) をベースに開発されています。Lit は軽量なライブラリで、Web Components の開発をより簡単にします。mdui コンポーネントを使用する際には、そのレンダリングと更新のメカニズムを理解しておく必要があるかもしれません。 mdui コンポーネントのプロパティを変更すると、コンポーネントは再レンダリングされます。ただし、この再レンダリングプロセスは同期的に実行されるわけではありません。複数のプロパティ値を同時に変更した場合、Lit はこれらの変更をキャッシュし、次の更新サイクルまで保持します。これにより、プロパティ値を何回変更しても、各コンポーネントは一度だけ再レンダリングされます。また、Shadow DOM 内で実際に変更された部分のみが再レンダリングされます。 以下の例では、ボタンの `disabled` JavaScript プロパティの値を `true` に設定し、すぐにその HTML 属性をクエリしています。しかし、この時点ではコンポーネントがまだ再レンダリングされていないため、クエリされる HTML 属性は依然として `false` です： ```js const button = document.querySelector('mdui-button'); button.disabled = true; console.log(button.hasAttribute('disabled')); // false ``` プロパティ値の変更後の再レンダリングが完了するのを待つには、コンポーネントの `updateComplete` プロパティを使用できます。このプロパティは Promise を返し、Promise が resolve された時点でコンポーネントの再レンダリングが完了したことを示します： ```js const button = document.querySelector('mdui-button'); button.disabled = true; button.updateComplete.then(() => { console.log(button.hasAttribute('disabled')); // true }); ``` # TypeScript サポート mdui は TypeScript で開発されているため、TypeScript に対して優れたサポートを提供しています。すべての mdui 公式ライブラリには型定義ファイルが付属しており、そのまま使用できます。 ## コンポーネントのインスタンス型 {#instance} 場合によっては、JavaScript 変数を mdui のコンポーネントインスタンスとして型アサーションする必要があります。その場合は、mdui から対応するコンポーネントの型を直接インポートできます。 例えば、コンポーネントファイルからツールチップコンポーネントの型をインポートするには： ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` または、mdui から直接ツールチップコンポーネントの型をインポートするには： ```ts import type { Tooltip } from 'mdui'; ``` そして、JavaScript 変数をツールチップ型に型アサーションできます： ```ts const tooltip = document.querySelector('mdui-tooltip') as Tooltip; ``` これにより、IDE は `tooltip` 変数のプロパティとメソッドを自動的に提案します。 `tooltip` 変数にイベントリスナーを追加すると、イベント名、イベントタイプ、およびコールバック関数内の `this` の参照先も自動的に提案されます： ```ts tooltip.addEventListener('open', function (event) {}); ``` ## イベント型 {#event} 各コンポーネントは、コンポーネントのイベント名とそれに対応するイベントオブジェクトの型をマッピングするインターフェースをエクスポートします。インターフェース名は `${コンポーネント名}EventMap` です。 例えば、ツールチップコンポーネントは `TooltipEventMap` というインターフェースをエクスポートします： ```ts export interface TooltipEventMap { open: CustomEvent; opened: CustomEvent; close: CustomEvent; closed: CustomEvent; } ``` このインターフェースはコンポーネントファイルからインポートできます： ```ts import type { TooltipEventMap } from 'mdui/components/tooltip.js'; ``` または、mdui から直接インポートすることもできます： ```ts import type { TooltipEventMap } from 'mdui'; ``` このインターフェースはコンポーネント固有のイベントのみを含むことに注意してください。ただし、mdui コンポーネントは `HTMLElement` を継承しているため、`HTMLElement` のイベントもサポートしています。交差型（intersection type）を使用して、コンポーネントのすべてのイベント型を取得できます： ```ts type TooltipAndHTMLElementEventMap = TooltipEventMap & HTMLElementEventMap; ``` # IDE サポート mdui は VS Code と WebStorm 向けに特別に最適化されており、これらの IDE ではコード補完、ホバー表示などの機能を利用できます。 ## VS Code {#vscode} ### npm でインストールした mdui の場合 {#vscode-npm} npm で mdui をインストールした場合、以下の手順で現在のプロジェクトで VS Code の IDE サポートを有効にできます： 1. プロジェクトのルートディレクトリに `.vscode` ディレクトリを作成します。 2. `.vscode` ディレクトリ内に `settings.json` ファイルを作成します。 3. `settings.json` ファイルに以下のコードを追加します： ```json { "html.customData": ["./node_modules/mdui/html-data.en.json"], "css.customData": ["./node_modules/mdui/css-data.en.json"] } ``` `settings.json` ファイルが既に存在する場合は、上記の 2 行を JSON ドキュメントのルートノードに追加するだけです。変更後、VS Code を再起動します。 ### CDN で使用する mdui の場合 {#vscode-cdn} CDN で mdui を導入している場合は、mdui の VS Code 拡張機能をインストールすることで IDE サポートを利用できます。 VS Code の拡張機能マーケットプレイスで `mdui` を検索し、最初の検索結果をインストールするか、[ここをクリックしてインストール](vscode:extension/zdhxiong.mdui) します。インストール後、すべてのプロジェクトで mdui の IDE サポートが有効になります。 VS Code 拡張機能をインストールするよりも、まず npm でインストールして `settings.json` ファイルを設定することをお勧めします。これにより、IDE サポートを使用している mdui のバージョンと一致させることができます。 ## WebStorm {#webstorm} ### npm でインストールした mdui の場合 {#webstorm-npm} npm で mdui をインストールした場合、以下の手順で現在のプロジェクトで WebStorm の IDE サポートを有効にできます： 1. プロジェクトルートの `package.json` ファイルのルートノードに以下のコードを追加します： ```json { "web-types": ["./node_modules/mdui/web-types.en.json"] } ``` `package.json` ファイルのルートノードに既に `web-types` プロパティが存在する場合は、`./node_modules/mdui/web-types.en.json` を `web-types` 配列に追加するだけです。変更後、WebStorm を再起動します。 ### CDN で使用する mdui の場合 {#webstorm-cdn} CDN で mdui を導入している場合は、mdui の WebStorm プラグインをインストールすることで IDE サポートを利用できます。 WebStorm のプラグインマーケットプレイスで `mdui` を検索し、最初の検索結果をインストールします。インストール後、すべてのプロジェクトで mdui の IDE サポートが有効になります。 WebStorm プラグインをインストールするよりも、まず npm でインストールして IDE サポートを利用することをお勧めします。これにより、IDE サポートを使用している mdui のバージョンと一致させることができます。 ## VS Code と WebStorm のサポートの違い {#difference} mdui の VS Code と WebStorm のサポートにはいくつかの違いがあります。以下の表に詳細な違いを示します： | コード補完およびホバー表示が可能な箇所 | VS Code | WebStorm | | --------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | HTML タグ名 | | | | HTML タグ内の属性名 | | | | HTML タグ内の属性値の列挙値 | | （列挙値のコメント表示は非対応） | | HTML タグ内のイベント名 | | | | HTML 内のスロットの `name` 属性値 | | | | CSS 内の `::part()` セレクターの `part` 属性名 | | | | CSS 内のコンポーネント内の CSS カスタムプロパティ名 | | | | CSS 内のグローバル CSS カスタムプロパティ名 | | | | CSS 内のグローバルクラス名 | | | # ローカライズ mdui はデフォルトで英語を使用します。他の言語を使用する場合は、ローカライズ設定を行う必要があります。 ## 使用方法 {#usage} mdui はローカライズ機能を実現するために 3 つの関数を提供しています： - [`loadLocale`](/ja/docs/2/functions/loadLocale)：言語パックをロードします。パラメーターは関数で、言語コードを受け取り、Promise を返します。言語パックのロードが完了すると、Promise は対応する言語パックで解決されます。プロジェクトのエントリーファイルでこの関数を呼び出してください。 - [`setLocale`](/ja/docs/2/functions/setLocale)：指定された言語に切り替えます。パラメーターは新しい言語コードで、Promise を返します。新しい言語パックのロードが完了すると resolve されます。 - [`getLocale`](/ja/docs/2/functions/getLocale)：現在の言語コードを取得します。 使用例は次のとおりです： ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import { setLocale } from 'mdui/functions/setLocale.js'; import { getLocale } from 'mdui/functions/getLocale.js'; // プロジェクトのエントリーポイントで loadLocale を呼び出し言語パックをロード loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); // 言語を切り替える必要があるときにこの関数を呼び出します。Promise が resolve された後、言語の切り替えが成功します setLocale('zh-cn').then(() => { // getLocale を呼び出すと現在の言語コードを取得できます console.log(getLocale()); // zh-cn }); ``` ## 状態イベント {#event} 言語切り替えの開始時、終了時、失敗時に、`window` オブジェクトで `mdui-localize-status` イベントが発火します。このイベントをリッスンして、例えば言語切り替え成功後に言語コードを Cookie に書き込むなどのカスタム操作を実行できます。 イベントの `detail.status` プロパティは、どのような状態の変更が発生したかを表します。取り得る値は `loading`、`ready`、`error` です：
detail.status 説明
loading

新しい言語パックのロードを開始します。

detail オブジェクトには以下が含まれます：

  • loadingLocale：新しくロードする言語の言語コード。
ready

新しい言語パックのロードが成功しました。

detail オブジェクトには以下が含まれます：

  • readyLocale：新しくロードされた言語の言語コード。
error

新しい言語パックのロードが失敗しました。

detail オブジェクトには以下が含まれます：

  • errorLocale：ロードに失敗した言語の言語コード。
  • errorMessage：ロード失敗のエラーメッセージ。
使用例は次のとおりです： ```js window.addEventListener('mdui-localize-status', (event) => { if (event.detail.status === 'loading') { console.log( `新しい言語パックのロードを開始：${event.detail.loadingLocale}`, ); } else if (event.detail.status === 'ready') { console.log(`新しい言語パック ${event.detail.readyLocale} のロードに成功`); } else if (event.detail.status === 'error') { console.error( `新しい言語パック ${event.detail.errorLocale} のロードに失敗：${event.detail.errorMessage}`, ); } }); ``` ## 言語パックのロード方法 {#load-locale} ### 遅延ロード（Lazy Load） {#lazy-load} [動的インポート](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/import) を使用すると、対応する言語に切り替えたときにのみ、対応する言語パックがダウンロードされます。これが最も推奨される方法です。 ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; loadLocale((locale) => import(`../node_modules/mdui/locales/${locale}.js`)); ``` ### プリロード {#pre-load} ページ読み込み時に、必要なすべての言語パックを事前にダウンロードします。これにより、言語切り替え時に再度ダウンロードする必要がなくなり、言語切り替えがより速くなります。 ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; const localizedTemplates = new Map([ ['zh-cn', import(`../node_modules/mdui/locales/zh-cn.js`)], ['zh-tw', import(`../node_modules/mdui/locales/zh-tw.js`)], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ### 静的インポート {#static-imports} この方法を使用すると、必要なすべての言語パックをプロジェクトのコードと同じファイルにバンドルでき、言語パックを個別にダウンロードする必要がなくなります。 ```js import { loadLocale } from 'mdui/functions/loadLocale.js'; import * as locale_zh_cn from 'mdui/locales/zh-cn.js'; import * as locale_zh_tw from 'mdui/locales/zh-tw.js'; const localizedTemplates = new Map([ ['zh-cn', locale_zh_cn], ['zh-tw', locale_zh_tw], ]); loadLocale(async (locale) => localizedTemplates.get(locale)); ``` ## CDN からの言語パックのロード {#cdn} CDN で mdui を使用している場合は、CDN から直接言語パックをロードできます。使用例は次のとおりです： ```html ``` ## サポートされている言語 {#languages} 現在、mdui は以下の言語をサポートしています： | 言語 | 言語コード | | ---------------------------- | ---------- | | アラビア語 | ar-eg | | アゼルバイジャン語 | az-az | | ブルガリア語 | bg-bg | | ベンガル語（バングラデシュ） | bn-bd | | ベラルーシ語 | be-by | | カタルーニャ語 | ca-es | | チェコ語 | cs-cz | | デンマーク語 | da-dk | | ドイツ語 | de-de | | ギリシャ語 | el-gr | | 英語 | en-gb | | 英語（アメリカ） | en-us | | スペイン語 | es-es | | エストニア語 | et-ee | | ペルシア語 | fa-ir | | フィンランド語 | fi-fi | | フランス語（ベルギー） | fr-be | | フランス語（カナダ） | fr-ca | | フランス語（フランス） | fr-fr | | アイルランド語 | ga-ie | | ガリシア語（スペイン） | gl-es | | ヘブライ語 | he-il | | ヒンディー語 | hi-in | | クロアチア語 | hr-hr | | ハンガリー語 | hu-hu | | アルメニア語 | hy-am | | インドネシア語 | id-id | | イタリア語 | it-it | | アイスランド語 | is-is | | 日本語 | ja-jp | | グルジア語 | ka-ge | | クメール語 | km-kh | | クルド語（北） | kmr-iq | | カンナダ語 | kn-in | | カザフ語 | kk-kz | | 韓国語 | ko-kr | | リトアニア語 | lt-lt | | ラトビア語 | lv-lv | | マケドニア語 | mk-mk | | マラヤーラム語 | ml-in | | モンゴル語 | mn-mn | | マレー語（マレーシア） | ms-my | | ノルウェー語 | nb-no | | ネパール語 | ne-np | | オランダ語（ベルギー） | nl-be | | オランダ語 | nl-nl | | ポーランド語 | pl-pl | | ポルトガル語（ブラジル） | pt-br | | ポルトガル語 | pt-pt | | ルーマニア語 | ro-ro | | ロシア語 | ru-ru | | スロバキア語 | sk-sk | | セルビア語 | sr-rs | | スロベニア語 | sl-si | | スウェーデン語 | sv-se | | タミル語 | ta-in | | タイ語 | th-th | | トルコ語 | tr-tr | | ウルドゥー語（パキスタン） | ur-pk | | ウクライナ語 | uk-ua | | ベトナム語 | vi-vn | | 簡体字中国語 | zh-cn | | 繁体字中国語（香港） | zh-hk | | 繁体字中国語（台湾） | zh-tw | ## 新しい翻訳の提供 {#contribute} 新しい翻訳を提供したり、既存の翻訳を改善したりするには、Github で Pull Request を作成してください。言語パックは [`packages/mdui/src/xliff`](https://github.com/zdhxiong/mdui/tree/v2/packages/mdui/src/xliff) にあります。Github 上で直接編集できます。 # よくある質問 以下に mdui コミュニティでよくある質問と公式の回答をまとめました。質問する前に類似の質問がないか探すことをお勧めします。 ## 自己終了タグを使用するとコンポーネントが表示されないのはなぜですか？ {#no-self-closing} mdui は Web Components をベースに開発されたコンポーネントライブラリです。Web Components 仕様は自己終了タグをサポートしていないため、mdui コンポーネントには必ず終了タグを追加してください。 ```html ``` ## コンポーネントの読み込みが完了する前にコンポーネントを非表示にするには？ {#waiting-load} mdui コンポーネントは JavaScript によって登録されるため、js ファイルが読み込まれてコンポーネントが登録される前に、コンポーネントは一時的にスタイルが適用されていない状態で表示されることがあります。以下の 2 つの方法でこの問題を解決できます。 1 つ目の方法は、CSS の [`:defined`](https://developer.mozilla.org/ja/docs/Web/CSS/Reference/Selectors/:defined) 擬似クラスを使用して、未登録の mdui コンポーネントを非表示にすることです。以下の CSS コードは、未登録のすべての mdui コンポーネントを非表示にし、コンポーネントの登録が完了するとすぐに表示します： ```css :not(:defined) { visibility: hidden; } ``` もう 1 つの方法は、JavaScript の [`customElements.whenDefined()`](https://developer.mozilla.org/ja/docs/Web/API/CustomElementRegistry/whenDefined) メソッドを使用することです。このメソッドは promise を返し、指定されたコンポーネントの登録が完了するとその promise が resolve されます。何らかの理由でコンポーネントが読み込めない場合に対処するために、[`Promise.allSettled()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled) メソッドを併用することができます。 以下の例では、まず `opacity: 0` で `` を非表示にし、コンポーネントの登録が完了した後にページをフェードイン表示します。また、`Promise.allSettled()` を使用してすべての promise の完了を待つことで、特定のコンポーネントが読み込めない場合でもページが正常に表示されるようにします： ```html ``` # LLMs.txt mdui は、LLM（大規模言語モデル）に正確で引用可能なコンテキストを提供する `llms.txt` と `llms-full.txt` を用意しています。これにより、AI は mdui 関連の質問に対してより正確に答えられるようになります。 ## llms.txt を使用して LLM にコンテキストを提供する {#context} 2 つのエントリポイントがあります： - `llms.txt`: https://www.mdui.org/ja/docs/2/llms.txt - `llms-full.txt`: https://www.mdui.org/ja/docs/2/llms-full.txt `llms.txt` は簡潔なインデックスで、ネットワークにアクセス可能なモデルがリンクを辿って必要な Markdown ページを取得したり、プロジェクトの概要を事前に把握するのに適しています。 `llms-full.txt` には `llms.txt` 内のすべてのページ内容を含む完全なコンテキストが含まれています。モデルがネットワークにアクセスできない場合や、完全なコンテキストを一度に提供する必要がある場合に適しています。 ## ドキュメントの Markdown バージョン {#md-mirror} 各ドキュメントページには対応する Markdown バージョンがあります。ページの URL の末尾に `.md` を追加するだけです（トップページは `index.md` を追加）。 例： https://www.mdui.org/ja/docs/2/components/button → https://www.mdui.org/ja/docs/2/components/button.md https://www.mdui.org/ja/docs/2/ → https://www.mdui.org/ja/docs/2/index.md この Markdown リンクまたはそのプレーンテキストを直接コンテキストとして使用することで、より焦点を絞った正確な回答を得ることができます。 ## ChatGPT、Claude などの LLM での使用方法 {#how-to-use} モデルがネットワークアクセス/ファイルアップロードをサポートしているかどうかに応じて、以下のいずれか、または組み合わせて使用します： 1. 直接貼り付け：`llms-full.txt` の内容をシステムプロンプトまたは最初のメッセージとして貼り付けます。 例：「以下は mdui のコンテキストです。これに厳密に従って後続の質問に回答してください。矛盾がある場合は、このコンテキストを優先してください：\n\n[llms-full.txt の内容を貼り付け]」。 2. ファイルをアップロード：`llms-full.txt`（または `llms.txt`）をアップロードし、最初のメッセージで「添付ファイルを主なコンテキストとしてください」と指示します。 例：「添付された mdui ドキュメントに基づいて、`` の使用方法とよくある落とし穴を教えてください」。 3. オンラインで読み込む：ダイアログで `llms.txt` または `llms-full.txt` のリンクを指定します。 例：「https://www.mdui.org/ja/docs/2/llms-full.txt を読み込み、それをコンテキストとして mdui に関する私の質問に答えてください」。 4. 特定のページを指定：特定のコンポーネント/関数のみを扱う場合は、そのページの Markdown URL を直接指定します。 例：「https://www.mdui.org/ja/docs/2/components/button.md を読み込み、そのドキュメントに基づいてベストプラクティスを 3 つ挙げてください」。 **ヒント**：ページ右上の アイコンをクリックすると、上記のリンクをコピー、現在のページの Markdown バージョンを開く、または現在のページや `llms-full.txt` をコンテキストとして ChatGPT で開くことができます。 # MCP サーバー mdui は専用の [MCP（Model Context Protocol）](https://modelcontextprotocol.io/) サーバー `@mdui/mcp` を提供しています。これは、ローカルで AI エージェントにコンポーネント、アイコン、CSS カスタムプロパティ、ドキュメントのクエリ機能を提供します。 Claude Code、Cursor、GitHub Copilot などの開発ツールと連携して、コード生成を支援し、mdui のコンポーネントとスタイルをより効果的に使用できるようにします。 ## ツール {#tools} mdui の MCP サーバーは、AI エージェントに以下のツールを公開します： - `list_components`：すべての mdui コンポーネントを一覧表示します。 - `get_component_metadata`：単一コンポーネントの詳細な API メタデータを取得します。 - `list_css_classes`：グローバル CSS クラス名を一覧表示します。 - `list_css_variables`：グローバル CSS カスタムプロパティを一覧表示します。 - `list_documents`：すべてのドキュメントを一覧表示します。 - `get_document`：単一ドキュメントの完全な内容を取得します。 - `list_icon_codes`：属性や API で使用できるアイコンコードを一覧表示します。 - `list_icon_components`：独立したアイコンコンポーネントとその ESM インポート文を一覧表示します。 ## 使用方法 {#usage} MCP サーバーは [stdio トランスポート](https://modelcontextprotocol.io/specification/2025-06-18/basic/transports#stdio) のみをサポートしており、VS Code、Cursor、Claude Code、Windsurf、Zed などのクライアントや、stdio プロトコルをサポートする AI エージェントで直接使用できます。 ### VS Code {#vscode} > [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) と [GitHub Copilot Chat](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat) 拡張機能がインストールされていることを確認してください。 1. プロジェクトのルートディレクトリに `.vscode/mcp.json` を作成し、以下の設定を追加します： ```json { "servers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. `mcp.json` ファイル内の「起動」ボタンをクリックします。 3. GitHub Copilot Chat で会話を開始します。 ### Cursor {#cursor} 1. プロジェクトのルートディレクトリに `.cursor/mcp.json` を作成または編集し、以下の設定を追加します： ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. Settings > Cursor Settings > MCP & Integrations に移動し、mdui サーバーを有効にします。 3. Cursor Chat で会話を開始します。 ### Claude Code {#claude-code} 1. ターミナルで以下のコマンドを実行して mdui MCP サーバーを追加します： ```bash claude mcp add mdui -- npx -y @mdui/mcp ``` 2. その後、`claude` を実行してセッションを開始します。 3. プロンプトを入力して使用を開始します。 ### Windsurf {#windsurf} 1. Settings > Windsurf Settings > Cascade に移動します 2. Manage MCPs をクリックし、「View raw config」をクリックして、設定ファイルに以下を追加します： ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` > MCP サーバーが自動的に表示されない場合は、Refresh をクリックしてリストを更新してください。 3. プロンプトを入力して会話を開始します。 ### Zed {#zed} 1. Settings > Open Settings を開き、`settings.json` ファイルに以下の設定を追加します： ```json { "context_servers": { "mdui": { "source": "custom", "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` 2. プロンプトを入力して使用を開始します。 ### カスタム MCP クライアント {#custom} ローカルまたは開発環境でカスタム MCP クライアントを使用する場合、そのサーバーをクライアントの設定ファイルに追加します。例： ```json { "mcpServers": { "mdui": { "command": "npx", "args": ["-y", "@mdui/mcp"] } } } ``` # ダークモード mdui のすべてのコンポーネントはダークモードをサポートしており、オペレーティングシステムの設定に応じてテーマを自動的に切り替えることができます。 ドキュメントページの右上にある アイコンをクリックしていつでもテーマを切り替え、各コンポーネントが異なるテーマでどのように表示されるかを確認できます。 ダークモードを使用するには、`` タグに `mdui-theme-dark` クラスを追加するだけです： ```html ``` テーマをオペレーティングシステムの設定に基づいて自動的に切り替えるようにするには、`` タグに `mdui-theme-auto` クラスを追加します： ```html ``` ページの異なる部分で異なるテーマを使用することもできます。例えば、以下の例では `` にダークモードを設定し、ページ内の `
` に `mdui-theme-light` クラスを追加しています。これにより、その div 内の要素はライトモードで表示され、ページのその他の部分はダークモードになります： ```html
``` CSS クラスを直接追加する以外に、mdui はテーマをより便利に操作するための 2 つの関数を提供しています： - [`getTheme`](/ja/docs/2/functions/getTheme)：現在のページ、または指定された要素のテーマを取得します。 - [`setTheme`](/ja/docs/2/functions/setTheme)：現在のページ、または指定された要素のテーマを設定します。 --- ただし、mdui は `:root` および `.mdui-theme-light`、`.mdui-theme-dark`、`.mdui-theme-auto` セレクターに `color` と `background-color` のスタイルを設定していることに注意してください。これらのデフォルトスタイルが気に入らない場合は、自分で上書きできます。 以下の例では、ライトモードのページ背景を白、テキストを黒に設定し、ダークモードのページ背景を黒、テキストを白に設定しています： ```css :root, .mdui-theme-light { color: #000; background-color: #fff; } .mdui-theme-dark { color: #fff; background-color: #000; } @media (prefers-color-scheme: dark) { .mdui-theme-auto { color: #fff; background-color: #000; } } ``` # ダイナミックカラー mdui はダイナミックカラー機能を提供しています。色の値を 1 つ指定するだけで、mdui は自動的に一連のカラースキームを生成します。また、mdui は指定された壁紙から主色を抽出し、それに基づいてカラースキームを生成することもサポートしています。 ドキュメントページの右上にある アイコンをクリックしていつでもカラースキームを切り替え、各コンポーネントが異なるカラースキームでどのように表示されるかを確認できます。 カラースキームは実際には一連の CSS カスタムプロパティです。mdui コンポーネント内の色の値はすべてこの一連の CSS カスタムプロパティを参照しているため、すべてのコンポーネントのカラースキームを一度に更新できます。完全な CSS カスタムプロパティのリストは [デザイントークン - 色](/ja/docs/2/styles/design-tokens#color) を参照してください。 ## カラースキームの生成 {#color-scheme} [`setColorScheme`](/ja/docs/2/functions/setColorScheme) 関数を使用してカラースキームを生成できます。この関数は 16 進数のカラーコードをパラメーターとして受け取り、一連のカラースキームを生成し、ページの `` 要素にそのカラースキームを設定します。例えば： ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // #0061a4 からカラースキームを生成し、 にそのカラースキームを設定 setColorScheme('#0061a4'); ``` 2 番目のパラメーターで `target` プロパティを指定すると、どの要素にカラースキームを設定するかを指定できます。例えば： ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // #0061a4 からカラースキームを生成し、.foo 要素にそのカラースキームを設定 setColorScheme('#0061a4', { target: document.querySelector('.foo'), }); ``` デフォルトで生成されるカラースキームには、[デザイントークン - 色](/ja/docs/2/styles/design-tokens#color) に記載されている色のみが含まれます。2 番目のパラメーターで `customColors` プロパティを指定すると、指定されたカスタムカラー名とカラー値に基づいて、mdui は一連のカスタムカラーグループを生成します。例えば： ```js import { setColorScheme } from 'mdui/functions/setColorScheme.js'; // #0061a4 からカラースキームを生成し、既存の error カラーグループの値を変更し、新しい music カラーグループを追加 setColorScheme('#0061a4', { customColors: [ { name: 'error', value: '#69F0AE', }, { name: 'music', value: '#FFC107', }, ], }); ``` カスタムカラーグループには、以下の 4 つの CSS カスタムプロパティが含まれます： - `--mdui-color-{name}` - `--mdui-color-on-{name}` - `--mdui-color-{name}-container` - `--mdui-color-on-{name}-container` ここでの `{name}` は、`customColors` で指定した `name` フィールドの値、つまりカスタムカラー名です。 カスタムカラー名は、デフォルトのカラースキームに既に存在する色名（`primary`、`secondary`、`tertiary`、`error` など）でも構いません。これらの値をカスタムカラー名として指定すると、生成されるカラースキーム内の対応する 4 つの CSS カスタムプロパティは、指定されたカラー値で生成されます。例えば、上記の例では `error` というカスタムカラー名を指定しています。`error` はデフォルトのカラースキームに既に存在する色名であり、対応する CSS カスタムプロパティは mdui コンポーネントでエラー状態を表すために使用されています。ここでカラー値が緑色の値に設定されているため、mdui コンポーネントのエラー状態も緑色になります。 カスタムカラー名は新規追加も可能です。例えば、上記の例の `music` はデフォルトのカラースキームには存在しないため、生成されるカラースキームには追加で 4 つの CSS カスタムプロパティが含まれます。これらの CSS カスタムプロパティは、独自のスタイルで参照できます： ```html
Music
Music Container
``` また、[`removeColorScheme`](/ja/docs/2/functions/removeColorScheme) 関数を使用して、上記の方法で生成されたカラースキームを削除できます。パラメーターを指定して削除する要素を指定できます。デフォルトでは、`` 上のカラースキームを削除します。 ## 壁紙からの色の抽出 {#from-wallpaper} mdui は [`getColorFromImage`](/ja/docs/2/functions/getColorFromImage) 関数を提供しており、指定された `Image` インスタンスから主色を抽出します。この関数は Promise を返し、解決された値が抽出された 16 進数のカラーコードです。 この関数で得られたカラーコードを使用し、上記のドキュメントで紹介した [`setColorScheme`](/ja/docs/2/functions/setColorScheme) 関数を呼び出してカラースキームを設定できます。例えば： ```js import { getColorFromImage } from 'mdui/functions/getColorFromImage.js'; import { setColorScheme } from 'mdui/functions/setColorScheme.js'; const image = new Image(); image.src = 'image1.png'; getColorFromImage(image).then((color) => setColorScheme(color)); ``` # 文章のタイポグラフィ mdui は `mdui-prose` と `mdui-table` という CSS クラスを提供しており、文章やテーブルのスタイルを最適化します。 ## 文章のスタイリング {#prose} 文章の親要素に `mdui-prose` クラスを追加すると、文章全体の表示スタイルを最適化できます。これには文章内の `` テーブルのスタイルも含まれます。例えば： ```html

見出し

本文

``` ## テーブルのスタイリング {#table} `` 要素に `mdui-table` クラスを追加すると、テーブルの表示スタイルを最適化できます。例えば： ```html
``` テーブルを親要素内で横方向にスクロール可能にしたい場合は、`` 要素の親要素に `mdui-table` クラスを追加します。例えば： ```html
``` # デザイントークン デザイントークンは、デザインシステムを管理するための戦略です。 デザインシステム内のすべての再利用可能な要素（色、フォント、間隔など）を独立した変数として抽象化し、デザインシステム全体で統一された管理と適用を可能にします。 mdui はグローバル CSS カスタムプロパティを使用してデザイントークンを実装しています。つまり、CSS カスタムプロパティを変更するだけで、すべての mdui コンポーネントのスタイルをグローバルに変更できます。同時に、自分で開発したスタイルについても、まず CSS カスタムプロパティを参照することをお勧めします。そうすることで、あなたのスタイルが mdui コンポーネントのスタイルと統一され、さらにダイナミックカラーを変更した際に、あなた自身のスタイルもカラースキームを同期更新できます。 ## 色 {#color} mdui はライトモードとダークモードそれぞれに一連の CSS カスタムプロパティを提供しています。ライトモードでは CSS カスタムプロパティ名は `--mdui-color-{name}-light` です。ここで `{name}` は色名です。ダークモードでは `--mdui-color-{name}-dark` です。 さらに、mdui は `--mdui-color-{name}` という名前の CSS カスタムプロパティも提供しています。このプロパティはライトモードでは `--mdui-color-{name}-light` を参照し、ダークモードでは `--mdui-color-{name}-dark` を参照するため、現在のライトモードとダークモードに応じて自動的に色が切り替わります。 一部の色の CSS カスタムプロパティを変更する必要がある場合は、`--mdui-color-{name}-light` と `--mdui-color-{name}-dark` の両方のプロパティを同時に変更する必要があります。CSS カスタムプロパティを読み取る場合は、`--mdui-color-{name}` プロパティを直接使用してください。 CSS カスタムプロパティの値は、RGB の 3 つの色の値をカンマ `,` で区切ったものです。以下の例は色の CSS カスタムプロパティの使用方法を示しています： ```css /* primary の色の値を変更 */ :root { --mdui-color-primary-light: 103, 80, 164; --mdui-color-primary-dark: 208, 188, 255; } /* foo 要素の背景色を primary に設定 */ .foo { background-color: rgb(var(--mdui-color-primary)); } /* bar 要素の背景色を透明度 0.8 の primary に設定 */ .bar { background-color: rgba(var(--mdui-color-primary), 0.8); } ``` まったく新しいカラースキームを作成する必要がある場合は、[`setColorScheme`](/ja/docs/2/functions/setColorScheme) 関数の使用をお勧めします。この関数は、指定された 1 つの色の値から一連のカラースキームを生成します。
色名 CSS カスタムプロパティ デフォルト値 例
Primary --mdui-color-primary-light 103, 80, 164
--mdui-color-primary-dark 208, 188, 255
--mdui-color-primary
Primary container --mdui-color-primary-container-light 234, 221, 255
--mdui-color-primary-container-dark 79, 55, 139
--mdui-color-primary-container
On primary --mdui-color-on-primary-light 255, 255, 255
--mdui-color-on-primary-dark 55, 30, 115
--mdui-color-on-primary
On primary container --mdui-color-on-primary-container-light 33, 0, 94
--mdui-color-on-primary-container-dark 234, 221, 255
--mdui-color-on-primary-container
Inverse primary --mdui-color-inverse-primary-light 208, 188, 255
--mdui-color-inverse-primary-dark 103, 80, 164
--mdui-color-inverse-primary
Secondary --mdui-color-secondary-light 98, 91, 113
--mdui-color-secondary-dark 204, 194, 220
--mdui-color-secondary
Secondary container --mdui-color-secondary-container-light 232, 222, 248
--mdui-color-secondary-container-dark 74, 68, 88
--mdui-color-secondary-container
On secondary --mdui-color-on-secondary-light 255, 255, 255
--mdui-color-on-secondary-dark 51, 45, 65
--mdui-color-on-secondary
On secondary container --mdui-color-on-secondary-container-light 30, 25, 43
--mdui-color-on-secondary-container-dark 232, 222, 248
--mdui-color-on-secondary-container
Tertiary --mdui-color-tertiary-light 125, 82, 96
--mdui-color-tertiary-dark 239, 184, 200
--mdui-color-tertiary
Tertiary container --mdui-color-tertiary-container-light 255, 216, 228
--mdui-color-tertiary-container-dark 99, 59, 72
--mdui-color-tertiary-container
On tertiary --mdui-color-on-tertiary-light 255, 255, 255
--mdui-color-on-tertiary-dark 73, 37, 50
--mdui-color-on-tertiary
On tertiary container --mdui-color-on-tertiary-container-light 55, 11, 30
--mdui-color-on-tertiary-container-dark 255, 216, 228
--mdui-color-on-tertiary-container
Surface --mdui-color-surface-light 254, 247, 255
--mdui-color-surface-dark 20, 18, 24
--mdui-color-surface
Surface dim --mdui-color-surface-dim-light 222, 216, 225
--mdui-color-surface-dim-dark 20, 18, 24
--mdui-color-surface-dim
Surface bright --mdui-color-surface-bright-light 254, 247, 255
--mdui-color-surface-bright-dark 59, 56, 62
--mdui-color-surface-bright
Surface container lowest --mdui-color-surface-container-lowest-light 255, 255, 255
--mdui-color-surface-container-lowest-dark 15, 13, 19
--mdui-color-surface-container-lowest
Surface container low --mdui-color-surface-container-low-light 247, 242, 250
--mdui-color-surface-container-low-dark 29, 27, 32
--mdui-color-surface-container-low
Surface container --mdui-color-surface-container-light 243, 237, 247
--mdui-color-surface-container-dark 33, 31, 38
--mdui-color-surface-container
Surface container high --mdui-color-surface-container-high-light 236, 230, 240
--mdui-color-surface-container-high-dark 43, 41, 48
--mdui-color-surface-container-high
Surface container highest --mdui-color-surface-container-highest-light 230, 224, 233
--mdui-color-surface-container-highest-dark 54, 52, 59
--mdui-color-surface-container-highest
Surface variant --mdui-color-surface-variant-light 231, 224, 236
--mdui-color-surface-variant-dark 73, 69, 79
--mdui-color-surface-variant
On surface --mdui-color-on-surface-light 28, 27, 31
--mdui-color-on-surface-dark 230, 225, 229
--mdui-color-on-surface
On surface variant --mdui-color-on-surface-variant-light 73, 69, 78
--mdui-color-on-surface-variant-dark 202, 196, 208
--mdui-color-on-surface-variant
Inverse surface --mdui-color-inverse-surface-light 49, 48, 51
--mdui-color-inverse-surface-dark 230, 225, 229
--mdui-color-inverse-surface
Inverse on surface --mdui-color-inverse-on-surface-light 244, 239, 244
--mdui-color-inverse-on-surface-dark 49, 48, 51
--mdui-color-inverse-on-surface
Background --mdui-color-background-light 254, 247, 255
--mdui-color-background-dark 20, 18, 24
--mdui-color-background
On background --mdui-color-on-background-light 28, 27, 31
--mdui-color-on-background-dark 230, 225, 229
--mdui-color-on-background
Error --mdui-color-error-light 179, 38, 30
--mdui-color-error-dark 242, 184, 181
--mdui-color-error
Error container --mdui-color-error-container-light 249, 222, 220
--mdui-color-error-container-dark 140, 29, 24
--mdui-color-error-container
On error --mdui-color-on-error-light 255, 255, 255
--mdui-color-on-error-dark 96, 20, 16
--mdui-color-on-error
On error container --mdui-color-on-error-container-light 65, 14, 11
--mdui-color-on-error-container-dark 249, 222, 220
--mdui-color-on-error-container
Outline --mdui-color-outline-light 121, 116, 126
--mdui-color-outline-dark 147, 143, 153
--mdui-color-outline
Outline variant --mdui-color-outline-variant-light 196, 199, 197
--mdui-color-outline-variant-dark 68, 71, 70
--mdui-color-outline-variant
Shadow --mdui-color-shadow-light 0, 0, 0
--mdui-color-shadow-dark 0, 0, 0
--mdui-color-shadow
Surface tint --mdui-color-surface-tint-color-light 103, 80, 164
--mdui-color-surface-tint-color-dark 208, 188, 255
--mdui-color-surface-tint-color
Scrim --mdui-color-scrim-light 0, 0, 0
--mdui-color-scrim-dark 0, 0, 0
--mdui-color-scrim
## 角丸 {#shape-corner} mdui は 7 種類の異なるサイズの角丸を提供しています。以下はこれらの角丸の CSS カスタムプロパティの使用例です： ```css /* extra-small の角丸のサイズを変更 */ :root { --mdui-shape-corner-extra-small: 0.3rem; } /* foo 要素の角丸を extra-small に設定 */ .foo { border-radius: var(--mdui-shape-corner-extra-small); } ``` | CSS カスタムプロパティ | デフォルト値 | 例 | | --------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------- | | `--mdui-shape-corner-none` | `0` |
| | `--mdui-shape-corner-extra-small` | `0.25rem` |
| | `--mdui-shape-corner-small` | `0.5rem` |
| | `--mdui-shape-corner-medium` | `0.75rem` |
| | `--mdui-shape-corner-large` | `1rem` |
| | `--mdui-shape-corner-extra-large` | `1.75rem` |
| | `--mdui-shape-corner-full` | `1000rem` |
| ## タイポグラフィ {#typescale} mdui は 15 種類の異なる文字スタイルを提供しています：Display large、Display medium、Display small、Headline large、Headline medium、Headline small、Title large、Title medium、Title small、Label large、Label medium、Label small、Body large、Body medium、Body small。 以下は使用例です： ```css /* Body large の文字スタイルを変更 */ :root { --mdui-typescale-body-large-line-height: 1.6rem; --mdui-typescale-body-large-size: 1.2rem; --mdui-typescale-body-large-tracking: 0.01rem; --mdui-typescale-body-large-weight: 400; } /* foo 要素の文字スタイルを Body large に設定 */ .foo { line-height: var(--mdui-typescale-body-large-line-height); font-size: var(--mdui-typescale-body-large-size); letter-spacing: var(--mdui-typescale-body-large-tracking); font-weight: var(--mdui-typescale-body-large-weight); } ```
CSS カスタムプロパティ デフォルト値 例
--mdui-typescale-display-large-line-height 4rem
Display large
--mdui-typescale-display-large-size 3.5625rem
--mdui-typescale-display-large-tracking 0
--mdui-typescale-display-large-weight 400
--mdui-typescale-display-medium-line-height 3.25rem
Display medium
--mdui-typescale-display-medium-size 2.8125rem
--mdui-typescale-display-medium-tracking 0
--mdui-typescale-display-medium-weight 400
--mdui-typescale-display-small-line-height 2.75rem
Display small
--mdui-typescale-display-small-size 2.25rem
--mdui-typescale-display-small-tracking 0
--mdui-typescale-display-small-weight 400
--mdui-typescale-headline-large-line-height 2.5rem
Headline large
--mdui-typescale-headline-large-size 2rem
--mdui-typescale-headline-large-tracking 0
--mdui-typescale-headline-large-weight 400
--mdui-typescale-headline-medium-line-height 2.25rem
Headline medium
--mdui-typescale-headline-medium-size 1.75rem
--mdui-typescale-headline-medium-tracking 0
--mdui-typescale-headline-medium-weight 400
--mdui-typescale-headline-small-line-height 2rem
Headline small
--mdui-typescale-headline-small-size 1.5rem
--mdui-typescale-headline-small-tracking 0
--mdui-typescale-headline-small-weight 400
--mdui-typescale-title-large-line-height 1.75rem
Title large
--mdui-typescale-title-large-size 1.375rem
--mdui-typescale-title-large-tracking 0
--mdui-typescale-title-large-weight 400
--mdui-typescale-title-medium-line-height 1.5rem
Title medium
--mdui-typescale-title-medium-size 1rem
--mdui-typescale-title-medium-tracking 0.009375rem
--mdui-typescale-title-medium-weight 500
--mdui-typescale-title-small-line-height 1.25rem
Title small
--mdui-typescale-title-small-size 0.875rem
--mdui-typescale-title-small-tracking 0.00625rem
--mdui-typescale-title-small-weight 500
--mdui-typescale-label-large-line-height 1.25rem
Label large
--mdui-typescale-label-large-size 0.875rem
--mdui-typescale-label-large-tracking 0.00625rem
--mdui-typescale-label-large-weight 500
--mdui-typescale-label-medium-line-height 1rem
Label medium
--mdui-typescale-label-medium-size 0.75rem
--mdui-typescale-label-medium-tracking 0.03125rem
--mdui-typescale-label-medium-weight 500
--mdui-typescale-label-small-line-height 0.375rem
Label small
--mdui-typescale-label-small-size 0.6875rem
--mdui-typescale-label-small-tracking 0.03125rem
--mdui-typescale-label-small-weight 500
--mdui-typescale-body-large-line-height 1.5rem
Body large
--mdui-typescale-body-large-size 1rem
--mdui-typescale-body-large-tracking 0.009375rem
--mdui-typescale-body-large-weight 400
--mdui-typescale-body-medium-line-height 1.25rem
Body medium
--mdui-typescale-body-medium-size 0.875rem
--mdui-typescale-body-medium-tracking 0.015625rem
--mdui-typescale-body-medium-weight 400
--mdui-typescale-body-small-line-height 1rem
Body small
--mdui-typescale-body-small-size 0.75rem
--mdui-typescale-body-small-tracking 0.025rem
--mdui-typescale-body-small-weight 400
## 状態レイヤーの不透明度 {#state-layer} 一部の mdui コンポーネントは、インタラクション時にその上に半透明のオーバーレイを追加します。例えば、[``](/ja/docs/2/components/button) コンポーネントは、マウスホバー、フォーカス、プレス、ドラッグ時に半透明のオーバーレイが表示されます。これらのオーバーレイの不透明度は、CSS カスタムプロパティを変更することで調整できます。 以下は使用例です： ```css /* 状態レイヤーの不透明度を変更 */ :root { --mdui-state-layer-hover: 0.08; --mdui-state-layer-focus: 0.12; --mdui-state-layer-pressed: 0.12; --mdui-state-layer-dragged: 0.16; } ``` | CSS カスタムプロパティ | デフォルト値 | 例 | | ---------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------ | | `--mdui-state-layer-hover` | `0.08` |
| | `--mdui-state-layer-focus` | `0.12` |
| | `--mdui-state-layer-pressed` | `0.12` |
| | `--mdui-state-layer-dragged` | `0.16` |
| ## エレベーション（影） {#elevation} 一部の mdui コンポーネントは、ページ上での浮き上がり感を表現するために影の効果を持っています。CSS カスタムプロパティを変更することで、コンポーネントの影の効果を調整できます。 以下は使用例です： ```css /* level1 の影を変更 */ :root { --mdui-elevation-level1: 0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%); } /* foo 要素の影を level1 に設定 */ .foo { box-shadow: var(--mdui-elevation-level1); } ``` | CSS カスタムプロパティ | デフォルト値 | 例 | | ------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- | | `--mdui-elevation-level0` | `none` |
| | `--mdui-elevation-level1` | `0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level2` | `0 0.85px 3px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 1px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level3` | `0 1.25px 5px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.3333px 1.5px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level4` | `0 1.85px 6.25px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.5px 1.75px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| | `--mdui-elevation-level5` | `0 2.75px 9px 0 rgba(var(--mdui-color-shadow), 19%), 0 0.25px 3px 0 rgba(var(--mdui-color-shadow), 3.9%)` |
| ## アニメーション {#motion} mdui コンポーネントのアニメーションのイージングカーブと継続時間は、CSS カスタムプロパティで設定できます。 以下は使用例です： ```css /* standard のイージングカーブと short1 の継続時間を変更 */ :root { --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --mdui-motion-duration-short1: 40ms; } /* foo 要素のトランジション効果を standard のイージングカーブと short1 の継続時間に設定 */ .foo { transition: all var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard); } ```
種類 CSS カスタムプロパティ デフォルト値
イージングカーブ --mdui-motion-easing-linear cubic-bezier(0, 0, 1, 1)
--mdui-motion-easing-standard cubic-bezier(0.2, 0, 0, 1)
--mdui-motion-easing-standard-accelerate cubic-bezier(0.3, 0, 1, 1)
--mdui-motion-easing-standard-decelerate cubic-bezier(0, 0, 0, 1)
--mdui-motion-easing-emphasized var(--mdui-motion-easing-standard)
--mdui-motion-easing-emphasized-accelerate cubic-bezier(0.3, 0, 0.8, 0.15)
--mdui-motion-easing-emphasized-decelerate cubic-bezier(0.05, 0.7, 0.1, 1)
継続時間 --mdui-motion-duration-short1 50ms
--mdui-motion-duration-short2 100ms
--mdui-motion-duration-short3 150ms
--mdui-motion-duration-short4 200ms
--mdui-motion-duration-medium1 250ms
--mdui-motion-duration-medium2 300ms
--mdui-motion-duration-medium3 350ms
--mdui-motion-duration-medium4 400ms
--mdui-motion-duration-long1 450ms
--mdui-motion-duration-long2 500ms
--mdui-motion-duration-long3 550ms
--mdui-motion-duration-long4 600ms
--mdui-motion-duration-extra-long1 700ms
--mdui-motion-duration-extra-long2 800ms
--mdui-motion-duration-extra-long3 900ms
--mdui-motion-duration-extra-long4 1000ms
## レスポンシブブレークポイント {#breakpoint} mdui は一連のレスポンシブブレークポイントを提供しており、これらのブレークポイントは CSS カスタムプロパティで設定できます。以下は使用例です： ```css /* sm のブレークポイント値を変更 */ :root { --mdui-breakpoint-sm: 560px; } ``` これらの CSS カスタムプロパティは CSS メディアクエリ内では使用できないことに注意してください。以下は誤った例です： ```css /* 誤った使用方法。メディアクエリ内では CSS カスタムプロパティは使用できません */ @media (min-width: var(--mdui-breakpoint-sm)) { } ``` JavaScript でブレークポイントを判定する必要がある場合は、[`breakpoint`](/ja/docs/2/functions/breakpoint) 関数を使用できます。 | CSS カスタムプロパティ | デフォルト値 | | ----------------------- | ------------ | | `--mdui-breakpoint-xs` | `0px` | | `--mdui-breakpoint-sm` | `600px` | | `--mdui-breakpoint-md` | `840px` | | `--mdui-breakpoint-lg` | `1080px` | | `--mdui-breakpoint-xl` | `1440px` | | `--mdui-breakpoint-xxl` | `1920px` | # React との統合 React で mdui を使用する場合、[インストール](/ja/docs/2/getting-started/installation#npm) ページの手順に従ってインストールを完了するだけで済みます。 ## 注意事項 {#notes} React で mdui を使用する場合、いくつかの制限があります。これらの制限は、React で Web Components を使用する際の一般的な制限であり、mdui コンポーネントライブラリ自体の制限ではありません。 ### イベントバインディング {#event-binding} React はカスタムイベントをサポートしていないため、mdui コンポーネントが提供するイベントを使用する際は、まず `ref` 属性を使用してコンポーネントの参照を取得する必要があります。 以下は、React で mdui コンポーネントのイベントを使用する例です： ```js import { useEffect, useRef } from 'react'; import 'mdui/mdui.css'; import 'mdui/components/switch.js'; function App() { const switchRef = useRef(null); useEffect(() => { const handleToggle = () => { console.log('switch is toggled'); }; switchRef.current.addEventListener('change', handleToggle); return () => { switchRef.current.removeEventListener('change', handleToggle); }; }, []); return ; } export default App; ``` ### JSX TypeScript 型宣言 {#jsx-typescript} TypeScript ファイル（.tsx）で mdui を使用する場合、TypeScript の型宣言を追加する必要があります。プロジェクトの .d.ts ファイル内で手動で mdui の型宣言ファイルを参照する必要があります： ```ts /// ``` # Vue との統合 Vue で mdui を使用する際は、まず [インストール](/ja/docs/2/getting-started/installation#npm) ページの手順に従ってインストールを完了し、次に必要な設定を行います。 ## 設定 {#configuration} Vue が mdui コンポーネントを Vue コンポーネントとして解析しないように設定する必要があります。`vite.config` ファイルで `compilerOptions.isCustomElement` オプションを設定します： ```js // vite.config.js import vue from '@vitejs/plugin-vue'; export default { plugins: [ vue({ template: { compilerOptions: { // mdui- で始まるすべてのタグ名は mdui コンポーネントです isCustomElement: (tag) => tag.startsWith('mdui-'), }, }, }), ], }; ``` この設定の詳細については、[Vue 公式ドキュメント](https://ja.vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue) を参照してください。 ## 注意事項 {#notes} ### 双方向データバインディング {#data-binding} mdui コンポーネントでは、`v-model` を使用して双方向データバインディングを行うことはできません。データのバインディングと更新を自分で処理する必要があります。例えば： ```html ``` ### eslint 設定 {#eslint} [`eslint-plugin-vue`](https://www.npmjs.com/package/eslint-plugin-vue) を使用している場合、`.eslintrc.js` に以下のルールを追加する必要があります： ```js rules: { 'vue/no-deprecated-slot-attribute': 'off' } ``` # Angular との統合 Angular で mdui を使用する際は、まず [インストール](/ja/docs/2/getting-started/installation#npm) ページの手順に従ってインストールを完了し、次に必要な設定を行います。 ## 設定 {#configuration} まず、Angular で Web Components のサポートを有効にする必要があります。例は以下の通りです： ```js import { BrowserModule } from '@angular/platform-browser'; import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent], schemas: [CUSTOM_ELEMENTS_SCHEMA], }) export class AppModule {} ``` 設定が完了すると、Angular コンポーネントコードで mdui コンポーネントをインポートして使用できるようになります： ```js import { Dialog } from 'mdui/components/dialog.js'; @Component({ selector: 'app-dialog-example', template: `
Dialog Content
` }) export class DialogExampleComponent implements OnInit { // @ViewChild を使用して #dialog 要素の参照を取得 @ViewChild('dialog') dialog?: ElementRef; ... constructor(...) { } ngOnInit() { } ... openDialog() { // nativeElement を使用して mdui コンポーネントにアクセス this.dialog?.nativeElement.open = true; } } ``` # 他のフレームワークとの統合 mdui はブラウザがネイティブにサポートする Web Components を使用して開発されているため、すべての Web フレームワークで使用できます。以下に、一般的なフレームワークで mdui を使用する方法を列挙します。 ## Aurelia {#Aurelia} [インストール](/ja/docs/2/getting-started/installation#npm) ページの手順に従ってインストールを完了した後、追加のパッケージをインストールして設定する必要があります（Aurelia 2 のみ）： ```bash npm install aurelia-mdui --save ``` 次に、それをアプリケーションに登録します： ```typescript import { MduiWebTask } from 'aurelia-mdui'; Aurelia.register(MduiWebTask).app(MyApp).start(); ``` **注意** バグレポートは [https://github.com/mreiche/aurelia-mdui](https://github.com/mreiche/aurelia-mdui) に送信してください。 ## WebCell {#WebCell} [WebCell](https://web-cell.dev/) で mdui を使用する場合、[インストール](/ja/docs/2/getting-started/installation#npm) ページの手順に従ってインストールを完了するだけで済みます。Web Components、TypeScript、JSX のサポートは第一級の機能であり、すぐに使用できます。 または、[公式 GitHub テンプレートリポジトリ](https://github.com/EasyWebApp/WebCell-mobile) を使用して [ワンクリックで新規プロジェクトを作成](https://github.com/new?template_name=WebCell-mobile&template_owner=EasyWebApp) することもできます。 # アバターコンポーネント Avatar アバターはユーザーや物事を表現するために使用され、画像、アイコン、文字など、さまざまな形式をサポートしています。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/avatar.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Avatar } from 'mdui/components/avatar.js'; ``` 使用例： ```html ``` ## 例 {#examples} ### 画像アバター {#example-src} `src` 属性を使用して画像リンクをアバターとして指定するか、デフォルトスロットに `` 要素を提供してアバターにすることができます。 ```html 画像アバターの例 ``` `fit` 属性を使用して、ネイティブの [`object-fit`](https://developer.mozilla.org/ja/docs/Web/CSS/object-fit) と同様に、画像をコンテナボックスにどのように適合させるかを定義できます。 ### アイコンアバター {#example-icon} `icon` 属性を使用して Material Icons アイコンをアバターとして指定するか、デフォルトスロットにアイコン要素を提供してアバターにすることができます。 ```html ``` ### 文字アバター {#example-char} デフォルトスロットに任意のテキストを使用してアバターにすることができます。 ```html A ``` ## mdui-avatar API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
src src true string

アバター画像のURLアドレスです。
fit fit true 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'

画像をコンテナボックスにどのように収めるかを指定します。ネイティブの object-fit 属性と同じです。次の値を指定します：

  • contain：画像の元のアスペクト比を維持し、コンテンツは縦横比を保ったまま拡大縮小されます
  • cover：画像の元のアスペクト比を維持しますが、コンテンツの一部が切り取られる場合があります
  • fill：デフォルト値。画像の元のアスペクト比を維持せず、コンテナ全体を埋めるようにコンテンツが引き伸ばされます
  • none：画像の元のサイズを保持し、コンテンツは拡大縮小または引き伸ばされません
  • scale-down：画像の元のアスペクト比を維持し、コンテンツのサイズは none または contain のうち小さい方と同じになります
icon icon true string

アバターに使用するMaterial Iconsのアイコン名です。
label label true string

アバターの代替テキストによる説明です。
### Slots
名前 説明
デフォルト

カスタムアバターコンテンツ。文字、漢字、<img> 要素、アイコンなどを指定できます。
### CSS Parts
名前 説明
image

画像をアバターとして使用する場合の、コンポーネント内部の <img> 要素
icon

アイコンをアバターとして使用する場合の、コンポーネント内部の <mdui-icon> 要素
### CSS カスタムプロパティ
名前 説明
--shape-corner

コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
# バッジコンポーネント Badge バッジは、カウントや状態表示などの動的な情報を表示するために使用されます。テキストや数字を含めることができます。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/badge.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Badge } from 'mdui/components/badge.js'; ``` 使用例： ```html 12 ``` ## 例 {#examples} ### 形状 {#example-variant} `variant` 属性を使用してバッジの形状を設定します。`variant` が `large` の場合、大きなバッジが表示されます。表示するテキストはデフォルトスロットで指定できます。 ```html 99+ ``` ## mdui-badge API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
variant variant true 'small' | 'large' 'large'

バッジの形状です。次の値を指定します：

  • small：小型バッジ。テキストは表示されません。
  • large：大型バッジ。テキストが表示されます。
### Slots
名前 説明
デフォルト

バッジに表示されるテキスト
### CSS カスタムプロパティ
名前 説明
--shape-corner

コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
# ボトムアプリバーコンポーネント BottomAppBar ボトムアプリバーは、主にモバイル端末のページ下部にナビゲーション項目やその他の重要な操作を表示するために使用されます。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/bottom-app-bar.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { BottomAppBar } from 'mdui/components/bottom-app-bar.js'; ``` 使用例：（例中の `style="position: relative"` はデモンストレーションの必要性によるもので、実際の使用時はこのスタイルを削除してください。） ```html
``` **注意事項：** このコンポーネントはデフォルトで `position: fixed` を使用し、ページコンテンツがこのコンポーネントの下に隠れないように、自動的に `body` に `padding-bottom` スタイルを追加します。 ただし、次の 2 つのケースではデフォルトで `position: absolute` を使用します： 1. `scroll-target` 属性が指定されている場合。この場合、`scroll-target` の要素に `padding-bottom` スタイルを追加します。 2. [``](/ja/docs/2/components/layout) コンポーネント内にある場合。この場合、`padding-bottom` スタイルは追加されません。 ## 例 {#examples} ### 指定されたコンテナ内に配置 {#example-scroll-target} デフォルトでは、ボトムアプリバーは現在のウィンドウを基準にしてページの下部に表示されます。 ボトムアプリバーを指定されたコンテナ内に配置したい場合は、`scroll-target` 属性を指定します。その値は、スクロール可能なコンテンツのコンテナの CSS セレクタまたは DOM 要素とします。この場合、ボトムアプリバーは親要素を基準にして表示されます（親要素に `position: relative; overflow: hidden` スタイルを自分で追加する必要があります）。 ```html
Content
``` ### スクロール時に非表示 {#example-scroll-behavior} `scroll-behavior` 属性を `hide` に設定すると、ページを下にスクロールした時にボトムアプリバーを非表示にし、上にスクロールした時に表示します。 `scroll-threshold` 属性を使用して、スクロールが何ピクセル進んだらボトムアプリバーを非表示にし始めるかを設定できます。 ```html
Content
``` ### フローティングアクションボタンを固定 {#example-fab-detach} ボトムアプリバーに[フローティングアクションボタン](/ja/docs/2/components/fab)が含まれている場合、`fab-detach` 属性を追加すると、ページスクロールでボトムアプリバーが非表示になった時でも、フローティングアクションボタンはページの右下に留まります。 ```html
``` ## mdui-bottom-app-bar API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
hide hide true boolean false

非表示にするかどうかを指定します。
fab-detach fabDetach true boolean false

ボトムアプリバー内の <mdui-fab> コンポーネントをアプリバーから切り離すかどうかを指定します。true の場合、アプリバーが非表示になった後も、<mdui-fab> はページ上に留まります。
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

スクロール時の動作です。次の値を指定します：

  • hide：スクロール時に非表示
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

スクロールイベントを監視する対象の要素です。値にはCSSセレクター、DOM要素、またはJQオブジェクトを指定します。デフォルトでは window のスクロールイベントを監視します。
scroll-threshold scrollThreshold true number

スクロール動作を開始させるために必要なスクロール距離（px単位）です。
order order true number

<mdui-layout>内における、このコンポーネントのレイアウト順序です。値が小さい順に並びます。デフォルトは 0 です。
### イベント
名前 説明
show

表示が開始される直前に発生するイベントです。event.preventDefault() を呼び出すことで表示をキャンセルできます。
shown

表示アニメーションが完了したときに発生するイベントです。
hide

非表示が開始される直前に発生するイベントです。event.preventDefault() を呼び出すことで非表示をキャンセルできます。
hidden

非表示アニメーションが完了したときに発生するイベントです。
### Slots
名前 説明
デフォルト

ボトムアプリバー内部の要素
### CSS カスタムプロパティ
名前 説明
--shape-corner

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

コンポーネントのCSS z-index 値
# ボタンコンポーネント Button ボタンは主に、メールの送信、ドキュメントの共有、コメントの「いいね！」など、いくつかの操作を実行するために使用されます。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/button.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Button } from 'mdui/components/button.js'; ``` 使用例： ```html Button ``` ## 例 {#examples} ### 形状 {#example-variant} `variant` 属性を使用してボタンの形状を設定します。 ```html Elevated Filled Tonal Outlined Text ``` ### 全幅 {#example-full-width} `full-width` 属性を追加すると、ボタンが親要素の全幅を占めるようにできます。 ```html Button ``` ### アイコン {#example-icon} `icon`、`end-icon` 属性を設定すると、ボタンの左側、右側にそれぞれ Material Icons アイコンを追加できます。`icon`、`end-icon` スロットを通じてボタンの左側、右側に要素を追加することもできます。 ```html Icon Slot ``` ### リンク {#example-link} `href` 属性を設定すると、ボタンをリンクにできます。この場合、リンク関連の属性 `download`、`target`、`rel` も使用できます。 ```html Link ``` ### 無効およびローディング状態 {#example-disabled} `disabled` 属性を追加するとボタンを無効にできます；`loading` 属性を追加するとボタンにローディング状態を追加できます。 ```html Disabled Loading Loading & Disabled ``` ## mdui-button API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
variant variant true 'elevated' | 'filled' | 'tonal' | 'outlined' | 'text' 'filled'

ボタンの形状です。次の値を指定します：

  • elevated：影付きボタン。ボタンを背景から視覚的に分離したい場合に適しています。
  • filled：視覚的な強調度が高く、「保存」や「確認」など、重要なフローの最終操作に適しています。
  • tonal：filled と outlined の中間の視覚的強調度です。フロー中の「次へ」など、中～高優先度の操作に適しています。
  • outlined：枠線付きボタン。「戻る」など、中優先度で二次的な操作に適しています。
  • text：テキストボタン。最も低い優先度の操作に適しています。
full-width fullWidth true boolean false

親要素の幅いっぱいに広げるかどうかを指定します。
icon icon true string

左側に表示するMaterial Iconsのアイコン名です。slot="icon" で設定することもできます。
end-icon endIcon true string

右側に表示するMaterial Iconsのアイコン名です。slot="end-icon" で設定することもできます。
href href true string

リンク先のURLです。

この属性を設定すると、コンポーネント内部は <a> 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
download download true string

ダウンロードリンクの対象ファイル名です。

注：href 属性が設定されている場合にのみ有効です。
target target true '_blank' | '_parent' | '_self' | '_top'

リンクの開き方です。次の値を指定します：

  • _blank：新しいウィンドウで開く
  • _parent：親フレームで開く
  • _self：デフォルト。現在のフレームで開く
  • _top：最上位のウィンドウで開く

注：href 属性が設定されている場合にのみ有効です。
rel rel true '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 true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
disabled disabled true boolean false

無効状態にするかどうかを指定します。
loading loading true boolean false

読み込み中状態にするかどうかを指定します。
name name true string ''

ボタンの名前です。フォームデータと共に送信されます。

注：href 属性が設定されていない場合にのみ有効です。
value value true string ''

ボタンの初期値です。フォームデータと共に送信されます。

注：href 属性が設定されていない場合にのみ有効です。
type type true 'submit' | 'reset' | 'button' 'button'

ボタンのタイプです。デフォルトのタイプは button です。次のタイプを指定します：

  • submit：ボタンをクリックするとフォームデータがサーバーに送信されます
  • reset：ボタンをクリックするとフォーム内のすべてのフィールドが初期値にリセットされます
  • button：このタイプのボタンにはデフォルトの動作はありません

注：href 属性が指定されていない場合にのみ有効です。
form form true string

関連付ける <form> 要素です。この属性値には、同一ページ内の <form> 要素の id を指定する必要があります。

この属性が指定されていない場合、この要素は <form> 要素の子要素である必要があります。この属性を使用すると、要素を <form> 要素の子要素だけでなく、ページ上の任意の場所に配置できます。

注：href 属性が指定されていない場合にのみ有効です。
formaction formAction true string

フォーム送信先のURLを指定します。

この属性が指定されている場合、<form> 要素の action 属性は上書きされます。

注：href 属性が指定されておらず、かつ type="submit" の場合にのみ有効です。
formenctype formEnctype true '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 true 'post' | 'get'

フォーム送信時に使用するHTTPメソッドを指定します。次の値を指定します：

  • post：フォームデータはフォームコンテンツに含まれてサーバーに送信されます
  • get：フォームデータは ? 区切りでフォームのURI属性に追加され、生成されたURIがサーバーに送信されます。フォームに副作用がなく、ASCII文字のみを含む場合にこのメソッドを使用します

この属性が設定されている場合、<form> 要素の method 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
formnovalidate formNoValidate true boolean false

この属性が設定されている場合、フォーム送信時にフォーム検証は実行されません。

この属性が設定されている場合、<form> 要素の novalidate 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

フォーム送信後に受信したレスポンスを表示する場所を指定します。次の値を指定します：

  • _self：デフォルトのオプション。現在のフレームで開きます
  • _blank：新しいウィンドウで開きます
  • _parent：親フレームで開きます
  • _top：最上位のウィンドウで開きます

この属性が設定されている場合、<form> 要素の target 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
undefined validity false ValidityState

フォーム検証ステータスを表す ValidityState オブジェクトです。詳細は ValidityState を参照してください。
undefined validationMessage false string

フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
checkValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。
reportValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。

検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
setCustomValidity(message: string): void

カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
invalid

フォームフィールドの検証に合格しなかったときに発生します。
### Slots
名前 説明
デフォルト

ボタンのテキスト
icon

ボタン左側の要素
end-icon

ボタン右側の要素
### CSS Parts
名前 説明
button

内部の <button> または <a> 要素
label

ボタンのテキスト
icon

ボタン左側のアイコン
end-icon

ボタン右側のアイコン
loading

読み込み中状態の <mdui-circular-progress> 要素
### CSS カスタムプロパティ
名前 説明
--shape-corner

コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
# アイコンボタンコンポーネント ButtonIcon アイコンボタンは、主に二次的な操作を実行するために使用されます。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/button-icon.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { ButtonIcon } from 'mdui/components/button-icon.js'; ``` 使用例： ```html ``` ## 例 {#examples} ### アイコン {#example-icon} `icon` 属性で Material Icons アイコン名を指定します。デフォルトスロットでアイコン要素を指定することもできます。 ```html ``` ### 形状 {#example-variant} `variant` 属性を使用してアイコンボタンの形状を設定します。 ```html ``` ### 選択可能 {#example-selectable} `selectable` 属性を追加すると、アイコンボタンを選択可能にできます。 ```html ``` `selected-icon` 属性で選択状態の Material Icons アイコン名を指定します。`selected-icon` スロットを通じて選択状態のアイコン要素を指定することもできます。 ```html ``` アイコンボタンが選択されると、`selected` 属性が `true` になります。また、`selected` 属性を追加することで、アイコンボタンをデフォルトで選択状態にできます。 ```html ``` ### リンク {#example-link} `href` 属性を追加すると、アイコンボタンをリンクにできます。この場合、リンク関連の属性 `download`、`target`、`rel` も使用できます。 ```html ``` ### 無効およびローディング状態 {#example-disabled} `disabled` 属性を追加するとアイコンボタンを無効にできます；`loading` 属性を追加するとアイコンボタンにローディング状態を追加できます。 ```html ``` ## mdui-button-icon API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
variant variant true 'standard' | 'filled' | 'tonal' | 'outlined' 'standard'

アイコンボタンの形状です。次の値を指定します：

  • standard：最も低い優先度の操作に適しています。
  • filled：視覚的な強調度が高く、高優先度の操作に適しています。
  • tonal：filled と outlined の中間の視覚的強調度です。中～高優先度の操作に適しています。
  • outlined：中優先度の操作に適しています。
icon icon true string

Material Iconsのアイコン名です。デフォルトスロットで設定することもできます。
selected-icon selectedIcon true string

選択状態のMaterial Iconsアイコン名です。slot="selected-icon" で設定することもできます。
selectable selectable true boolean false

選択可能かどうかを指定します。
selected selected true boolean false

選択されているかどうかを指定します。
href href true string

リンク先のURLです。

この属性を設定すると、コンポーネント内部は <a> 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
download download true string

ダウンロードリンクの対象ファイル名です。

注：href 属性が設定されている場合にのみ有効です。
target target true '_blank' | '_parent' | '_self' | '_top'

リンクの開き方です。次の値を指定します：

  • _blank：新しいウィンドウで開く
  • _parent：親フレームで開く
  • _self：デフォルト。現在のフレームで開く
  • _top：最上位のウィンドウで開く

注：href 属性が設定されている場合にのみ有効です。
rel rel true '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 true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
disabled disabled true boolean false

無効状態にするかどうかを指定します。
loading loading true boolean false

読み込み中状態にするかどうかを指定します。
name name true string ''

ボタンの名前です。フォームデータと共に送信されます。

注：href 属性が設定されていない場合にのみ有効です。
value value true string ''

ボタンの初期値です。フォームデータと共に送信されます。

注：href 属性が設定されていない場合にのみ有効です。
type type true 'submit' | 'reset' | 'button' 'button'

ボタンのタイプです。デフォルトのタイプは button です。次のタイプを指定します：

  • submit：ボタンをクリックするとフォームデータがサーバーに送信されます
  • reset：ボタンをクリックするとフォーム内のすべてのフィールドが初期値にリセットされます
  • button：このタイプのボタンにはデフォルトの動作はありません

注：href 属性が指定されていない場合にのみ有効です。
form form true string

関連付ける <form> 要素です。この属性値には、同一ページ内の <form> 要素の id を指定する必要があります。

この属性が指定されていない場合、この要素は <form> 要素の子要素である必要があります。この属性を使用すると、要素を <form> 要素の子要素だけでなく、ページ上の任意の場所に配置できます。

注：href 属性が指定されていない場合にのみ有効です。
formaction formAction true string

フォーム送信先のURLを指定します。

この属性が指定されている場合、<form> 要素の action 属性は上書きされます。

注：href 属性が指定されておらず、かつ type="submit" の場合にのみ有効です。
formenctype formEnctype true '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 true 'post' | 'get'

フォーム送信時に使用するHTTPメソッドを指定します。次の値を指定します：

  • post：フォームデータはフォームコンテンツに含まれてサーバーに送信されます
  • get：フォームデータは ? 区切りでフォームのURI属性に追加され、生成されたURIがサーバーに送信されます。フォームに副作用がなく、ASCII文字のみを含む場合にこのメソッドを使用します

この属性が設定されている場合、<form> 要素の method 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
formnovalidate formNoValidate true boolean false

この属性が設定されている場合、フォーム送信時にフォーム検証は実行されません。

この属性が設定されている場合、<form> 要素の novalidate 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

フォーム送信後に受信したレスポンスを表示する場所を指定します。次の値を指定します：

  • _self：デフォルトのオプション。現在のフレームで開きます
  • _blank：新しいウィンドウで開きます
  • _parent：親フレームで開きます
  • _top：最上位のウィンドウで開きます

この属性が設定されている場合、<form> 要素の target 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
undefined validity false ValidityState

フォーム検証ステータスを表す ValidityState オブジェクトです。詳細は ValidityState を参照してください。
undefined validationMessage false string

フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
checkValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。
reportValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。

検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
setCustomValidity(message: string): void

カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
change

選択状態が変更されたときに発生します。
invalid

フォームフィールドの検証に合格しなかったときに発生します。
### Slots
名前 説明
デフォルト

アイコンコンポーネント
selected-icon

選択状態で表示されるアイコン要素
### CSS Parts
名前 説明
button

内部の <button> または <a> 要素
icon

非選択状態のアイコン
selected-icon

選択状態のアイコン
loading

読み込み中状態の <mdui-circular-progress> 要素
### CSS カスタムプロパティ
名前 説明
--shape-corner

コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
# カードコンポーネント Card カードは、単一のテーマに関連するコンテンツと操作を掲載するための多機能コンポーネントです。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/card.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Card } from 'mdui/components/card.js'; ``` 使用例： ```html Card ``` ## 例 {#examples} ### 形状 {#example-variant} `variant` 属性を使用してカードの形状を設定します。 ```html ``` ### クリック可能 {#example-clickable} `clickable` 属性を追加するとカードをクリック可能にできます。この場合、マウスホバー効果とクリックリップル効果が追加されます。 ```html ``` ### リンク {#example-link} `href` 属性を追加すると、カードをリンクにできます。この場合、リンク関連の属性 `download`、`target`、`rel` も使用できます。 ```html ``` ### 無効状態 {#example-disabled} `disabled` 属性を追加するとカードを無効にできます。 ```html ``` ## mdui-card API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
variant variant true 'elevated' | 'filled' | 'outlined' 'elevated'

カードの形状です。次の値を指定します：

  • elevated：影付きカード。背景との視覚的な分離度が高いです。
  • filled：背景色付きカード。背景との視覚的な分離度が低いです。
  • outlined：枠線付きカード。背景との視覚的な分離度が最も高いです。
clickable clickable true boolean false

クリック可能かどうかを指定します。true の場合、カードにマウスホバー効果とクリックリップル効果が追加されます。
disabled disabled true boolean false

無効状態にするかどうかを指定します。
href href true string

リンク先のURLです。

この属性を設定すると、コンポーネント内部は <a> 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
download download true string

ダウンロードリンクの対象ファイル名です。

注：href 属性が設定されている場合にのみ有効です。
target target true '_blank' | '_parent' | '_self' | '_top'

リンクの開き方です。次の値を指定します：

  • _blank：新しいウィンドウで開く
  • _parent：親フレームで開く
  • _self：デフォルト。現在のフレームで開く
  • _top：最上位のウィンドウで開く

注：href 属性が設定されている場合にのみ有効です。
rel rel true '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 true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
### Slots
名前 説明
デフォルト

カードの内容
### CSS カスタムプロパティ
名前 説明
--shape-corner

コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
# チェックボックスコンポーネント Checkbox チェックボックスは、ユーザーがオプションのセットから 1 つまたは複数のオプションを選択したり、単一オプションのオン/オフ状態を切り替えたりできるようにします。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/checkbox.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Checkbox } from 'mdui/components/checkbox.js'; ``` 使用例： ```html Checkbox ``` ## 例 {#examples} ### 選択状態 {#example-checked} チェックボックスが選択されると、`checked` 属性の値は `true` になります。`checked` 属性を追加すると、チェックボックスをデフォルトで選択状態にできます。 ```html Checkbox ``` ### 無効状態 {#example-disabled} `disabled` 属性を追加するとチェックボックスを無効にできます。 ```html Checkbox Checkbox ``` ### 不確定状態 {#example-indeterminate} `indeterminate` 属性を追加すると、チェックボックスが不確定状態であることを示します。 ```html Checkbox ``` ### アイコン {#example-icon} `unchecked-icon`、`checked-icon`、`indeterminate-icon` 属性を設定することで、それぞれ未選択、選択、不確定状態のチェックボックスの Material Icons アイコンを設定できます。`unchecked-icon`、`checked-icon`、`indeterminate-icon` スロットを使用して設定することもできます。 ```html Checkbox Checkbox
Checkbox Checkbox ``` ## mdui-checkbox API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
disabled disabled true boolean false

無効状態にするかどうかを指定します。
checked checked true boolean false

選択状態にするかどうかを指定します。
undefined defaultChecked false boolean false

デフォルトの選択状態です。フォームをリセットすると、この状態に戻ります。この属性はJavaScriptプロパティでのみ設定できます。
indeterminate indeterminate true boolean false

不確定状態にするかどうかを指定します。
required required true boolean false

フォーム送信時に、このチェックボックスを必須にするかどうかを指定します。
form form true string

関連付ける <form> 要素です。この属性値には、同一ページ内の <form> 要素の id を指定する必要があります。

この属性が指定されていない場合、この要素は <form> 要素の子要素である必要があります。この属性を使用すると、要素を <form> 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
name name true string ''

チェックボックスの名前です。フォームデータと共に送信されます。
value value true string 'on'

チェックボックスの値です。フォームデータと共に送信されます。
unchecked-icon uncheckedIcon true string

非選択状態のMaterial Iconsアイコン名です。slot="unchecked-icon" で設定することもできます。
checked-icon checkedIcon true string

選択状態のMaterial Iconsアイコン名です。slot="checked-icon" で設定することもできます。
indeterminate-icon indeterminateIcon true string

不確定状態のMaterial Iconsアイコン名です。slot="indeterminate-icon" で設定することもできます。
undefined validity false ValidityState

フォーム検証ステータスを表す ValidityState オブジェクトです。詳細は ValidityState を参照してください。
undefined validationMessage false string

フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
autofocus autofocus true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
### メソッド
名前 説明
checkValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。
reportValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。

検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
setCustomValidity(message: string): void

カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
change

選択状態が変更されたときに発生します。
input

選択状態が変更されたときに発生します。
invalid

フォームフィールドの検証に合格しなかったときに発生します。
### Slots
名前 説明
デフォルト

チェックボックスのテキスト
unchecked-icon

非選択状態のアイコン
checked-icon

選択状態のアイコン
indeterminate-icon

不確定状態のアイコン
### CSS Parts
名前 説明
control

左側のアイコンコンテナ
unchecked-icon

非選択状態のアイコン
checked-icon

選択状態のアイコン
indeterminate-icon

不確定状態のアイコン
label

チェックボックスのテキスト
# チップコンポーネント Chip チップコンポーネントは、ユーザーの情報入力を補助し、選択、コンテンツのフィルタリング、関連操作の実行などに使用します。 ## 使用方法 {#usage} 必要に応じてコンポーネントをインポートします： ```js import 'mdui/components/chip.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Chip } from 'mdui/components/chip.js'; ``` 使用例： ```html Chip ``` ## 例 {#examples} ### 形状 {#example-variant} `variant` 属性を使用してチップの形状を設定します。チップには以下の4種類の形状があり、用途に応じて選択できます： - `assist`：現在のコンテキストに関連する補助操作を表示するために使用されます。例えば、注文ページで共有やお気に入りなどの機能を提供します。 - `filter`：コンテンツをフィルタリングするために使用されます。例えば、検索結果ページで検索結果をフィルタリングします。 - `input`：ユーザーが入力した情報の断片を表すために使用されます。例えば、Gmail の「宛先」フィールドの連絡先などです。 - `suggestion`：動的に生成されたレコメンデーション情報を提供し、ユーザーの操作を簡素化するために使用されます。例えば、チャットアプリケーションでユーザーが送信したいと思う可能性のある情報を推測し、選択できるようにします。 ```html Assist Filter Input Suggestion ``` ### 影 {#example-elevated} `elevated` 属性を追加すると、チップに影が付きます。 ```html Chip ``` ### アイコン {#example-icon} `icon` または `end-icon` 属性を指定すると、チップの左側または右側に Material Icons アイコンをそれぞれ表示できます。また、`icon` スロットや `end-icon` スロットを使用して、チップの左側や右側に要素を追加することもできます。 ```html Icon End Icon Slot ``` ### リンク {#example-link} `href` 属性を追加すると、チップをリンクにできます。この場合、リンク関連の `download`、`target`、`rel` 属性も使用できます。 ```html Link ``` ### 無効および読み込み中状態 {#example-disabled} `disabled` 属性を追加するとチップを無効にできます。`loading` 属性を追加するとチップを読み込み中状態にできます。 ```html Disabled Loading Loading & Disabled ``` ### 選択可能 {#example-selectable} `selectable` 属性を追加すると、チップを選択可能にできます。 ```html Chip ``` `selected-icon` 属性を使用して選択状態の Material Icons アイコン名を指定できます。`selected-icon` スロットを使用して選択状態のアイコン要素を指定することもできます。 ```html Chip Chip ``` チップが選択されると、`selected` 属性が `true` になります。また、`selected` 属性を追加することで、チップをデフォルトで選択状態にできます。 ```html Chip ``` ### 削除可能 {#example-deletable} `deletable` 属性を追加すると、チップの右側に削除アイコンが表示されます。このアイコンをクリックすると `delete` イベントがトリガーされます。`delete-icon` 属性で削除アイコンの Material Icons アイコン名を指定するか、`delete-icon` スロットで削除アイコンの要素を指定できます。 ```html Chip Chip Chip ``` ## mdui-chip API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
variant variant true 'assist' | 'filter' | 'input' | 'suggestion' 'assist'

チップの形状です。次の値を指定します：

  • assist：注文ページでの共有やお気に入りなど、現在のコンテキストに関連する補助操作を表示するために使用します。
  • filter：検索結果ページでの検索結果の絞り込みなど、コンテンツをフィルタリングするために使用します。
  • input：Gmailの「To」フィールドの連絡先など、ユーザーが入力した情報の断片を表すために使用します。
  • suggestion：チャットアプリでユーザーが送信しそうなメッセージを予測するなど、ユーザー操作を簡素化するために動的生成された推奨情報を提供するために使用します。
elevated elevated true boolean false

影を表示するかどうかを指定します。
selectable selectable true boolean false

選択可能かどうかを指定します。
selected selected true boolean false

選択されているかどうかを指定します。
deletable deletable true boolean false

削除可能かどうかを指定します。true の場合、チップの右側に削除アイコンが表示されます。
icon icon true string

左側に表示するMaterial Iconsのアイコン名です。slot="icon" で設定することもできます。
selected-icon selectedIcon true string

選択状態の左側に表示するMaterial Iconsのアイコン名です。slot="selected-icon" で設定することもできます。
end-icon endIcon true string

右側に表示するMaterial Iconsのアイコン名です。slot="end-icon" で設定することもできます。
delete-icon deleteIcon true string

削除可能な場合に、右側の削除アイコンとして使用するMaterial Iconsのアイコン名です。slot="delete-icon" で設定することもできます。
href href true string

リンク先のURLです。

この属性を設定すると、コンポーネント内部は <a> 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
download download true string

ダウンロードリンクの対象ファイル名です。

注：href 属性が設定されている場合にのみ有効です。
target target true '_blank' | '_parent' | '_self' | '_top'

リンクの開き方です。次の値を指定します：

  • _blank：新しいウィンドウで開く
  • _parent：親フレームで開く
  • _self：デフォルト。現在のフレームで開く
  • _top：最上位のウィンドウで開く

注：href 属性が設定されている場合にのみ有効です。
rel rel true '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 true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
disabled disabled true boolean false

無効状態にするかどうかを指定します。
loading loading true boolean false

読み込み中状態にするかどうかを指定します。
name name true string ''

ボタンの名前です。フォームデータと共に送信されます。

注：href 属性が設定されていない場合にのみ有効です。
value value true string ''

ボタンの初期値です。フォームデータと共に送信されます。

注：href 属性が設定されていない場合にのみ有効です。
type type true 'submit' | 'reset' | 'button' 'button'

ボタンのタイプです。デフォルトのタイプは button です。次のタイプを指定します：

  • submit：ボタンをクリックするとフォームデータがサーバーに送信されます
  • reset：ボタンをクリックするとフォーム内のすべてのフィールドが初期値にリセットされます
  • button：このタイプのボタンにはデフォルトの動作はありません

注：href 属性が指定されていない場合にのみ有効です。
form form true string

関連付ける <form> 要素です。この属性値には、同一ページ内の <form> 要素の id を指定する必要があります。

この属性が指定されていない場合、この要素は <form> 要素の子要素である必要があります。この属性を使用すると、要素を <form> 要素の子要素だけでなく、ページ上の任意の場所に配置できます。

注：href 属性が指定されていない場合にのみ有効です。
formaction formAction true string

フォーム送信先のURLを指定します。

この属性が指定されている場合、<form> 要素の action 属性は上書きされます。

注：href 属性が指定されておらず、かつ type="submit" の場合にのみ有効です。
formenctype formEnctype true '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 true 'post' | 'get'

フォーム送信時に使用するHTTPメソッドを指定します。次の値を指定します：

  • post：フォームデータはフォームコンテンツに含まれてサーバーに送信されます
  • get：フォームデータは ? 区切りでフォームのURI属性に追加され、生成されたURIがサーバーに送信されます。フォームに副作用がなく、ASCII文字のみを含む場合にこのメソッドを使用します

この属性が設定されている場合、<form> 要素の method 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
formnovalidate formNoValidate true boolean false

この属性が設定されている場合、フォーム送信時にフォーム検証は実行されません。

この属性が設定されている場合、<form> 要素の novalidate 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

フォーム送信後に受信したレスポンスを表示する場所を指定します。次の値を指定します：

  • _self：デフォルトのオプション。現在のフレームで開きます
  • _blank：新しいウィンドウで開きます
  • _parent：親フレームで開きます
  • _top：最上位のウィンドウで開きます

この属性が設定されている場合、<form> 要素の target 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
undefined validity false ValidityState

フォーム検証ステータスを表す ValidityState オブジェクトです。詳細は ValidityState を参照してください。
undefined validationMessage false string

フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
checkValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。
reportValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。

検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
setCustomValidity(message: string): void

カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
invalid

フォームフィールドの検証に合格しなかったときに発生します。
change

選択状態が変更されたときに発生します。
delete

削除アイコンがクリックされたときに発生します。
### Slots
名前 説明
デフォルト

チップのテキスト
icon

左側の要素
end-icon

右側の要素
selected-icon

選択状態の左側の要素
delete-icon

削除可能な場合の右側の削除要素
### CSS Parts
名前 説明
button

内部の <button> または <a> 要素
label

チップのテキスト
icon

左側のアイコン
end-icon

右側のアイコン
selected-icon

選択状態の左側のアイコン
delete-icon

削除可能な場合の右側の削除アイコン
loading

読み込み中状態の <mdui-circular-progress> 要素
### CSS カスタムプロパティ
名前 説明
--shape-corner

コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
# 円形プログレスコンポーネント CircularProgress 円形プログレスは、データの読み込みやフォームの送信など、タスクの進捗状況を表示する円形のインジケーターです。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/circular-progress.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { CircularProgress } from 'mdui/components/circular-progress.js'; ``` 使用例： ```html ``` ## 例 {#examples} ### 固定進捗 {#example-value} 円形プログレスはデフォルトでは不確定な進捗を表示します。`value` 属性を使用して現在の進捗を設定できます。デフォルトの進捗最大値は `1` です。 ```html ``` `max` 属性を使用して進捗の最大値を設定できます。 ```html ``` ## mdui-circular-progress API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
max max true number 1

プログレスインジケーターの最大値です。デフォルトは 1 です。
value value false number

プログレスインジケーターの現在の値です。この値が指定されていない場合は、不確定状態として表示されます。
# 折りたたみコンポーネント Collapse 折りたたみコンポーネントは、複雑なコンテンツ領域をグループ化して非表示にし、ページを整理するために使用します。 この折りたたみコンポーネント自体にはスタイルが含まれていないことに注意してください。スタイルは自分で追加するか、他のコンポーネントと組み合わせて使用する必要があります。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/collapse.js'; import 'mdui/components/collapse-item.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Collapse } from 'mdui/components/collapse.js'; import type { CollapseItem } from 'mdui/components/collapse-item.js'; ``` 使用例： ```html first content second content ``` ## 例 {#examples} ### パネルのタイトルとコンテンツ {#example-header} `` コンポーネントの `header` 属性を使用してパネルヘッダーのテキストを設定できます。また、`header` スロットを使用してパネルヘッダー要素を指定することもできます。コンポーネントのデフォルトスロットはパネルコンテンツ用です。 ```html Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
``` ### アコーディオンモード {#example-accordion} `` コンポーネントに `accordion` 属性を追加すると、アコーディオンモードを有効にできます。これにより、一度に1つのパネルのみが開いた状態になります。 ```html Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
``` ### アクティブなパネルを設定 {#example-value} `` コンポーネントの `value` 属性を使用して、現在開いているパネルを取得したり、開くパネルを設定したりできます。 アコーディオンモードでは、`value` 属性の値は文字列です。HTML 属性または JavaScript プロパティを使用してこの属性を操作できます。非アコーディオンモードでは、`value` 属性の値は配列で、JavaScript プロパティを通じてのみ操作できます。 ```html アコーディオンモード Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
非アコーディオンモード Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
``` ### 無効状態 {#example-disabled} `` コンポーネントに `disabled` 属性を追加すると、折りたたみコンポーネントグループ全体を無効にできます。同様に、`` コンポーネントに `disabled` 属性を追加すると、特定の折りたたみパネルを無効にできます。 ```html すべて無効 Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
最初のパネルを無効化 Item 1
Item 1 - subitem
Item 2
Item 2 - subitem
``` ### 折りたたみを切り替える要素 {#example-trigger} デフォルトでは、パネルヘッダー領域全体をクリックすると折りたたみの開閉が切り替わります。`` コンポーネントの `trigger` 属性を設定することで、折りたたみをトリガーする要素を指定できます。`trigger` 属性は CSS セレクタまたは DOM 要素です。 ```html Item 1
Item 1 - subitem
``` ## mdui-collapse-item API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
value value true string

この折りたたみパネルアイテムの値です。
header header true string

この折りたたみパネルアイテムのヘッダーテキストです。
disabled disabled true boolean false

この折りたたみパネルアイテムを無効にするかどうかを指定します。
trigger trigger false string | HTMLElement | JQ<HTMLElement>

この要素をクリックすると折りたたみがトリガーされます。値にはCSSセレクター、DOM要素、またはJQオブジェクトを指定できます。デフォルトでは、ヘッダー領域全体をクリックするとトリガーされます。
### イベント
名前 説明
open

開き始めたときに発生するイベントです。
opened

開くアニメーションが完了したときに発生するイベントです。
close

閉じ始めたときに発生するイベントです。
closed

閉じるアニメーションが完了したときに発生するイベントです。
### Slots
名前 説明
デフォルト

折りたたみパネルアイテムの本文コンテンツ
header

折りたたみパネルアイテムのヘッダーコンテンツ
### CSS Parts
名前 説明
header

折りたたみパネルのヘッダーコンテンツ
body

折りたたみパネルの本文コンテンツ
## mdui-collapse API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
accordion accordion true boolean false

アコーディオンモードを有効にするかどうかを指定します。
value value false string | string[]

現在展開されている <mdui-collapse-item> の値です。

注：この属性のHTML属性値は常に文字列として扱われ、accordion が true の場合にのみ初期値を設定できます。この属性のJavaScriptプロパティ値は、accordion が true の場合は文字列、accordion が false の場合は文字列の配列になります。したがって、accordion が false の場合、この値を変更するにはJavaScriptプロパティ値を変更する必要があります。
disabled disabled true boolean false

この折りたたみパネルを無効にするかどうかを指定します。
### イベント
名前 説明
change

現在展開されている折りたたみパネルアイテムが変更されたときに発生します。
### Slots
名前 説明
デフォルト

<mdui-collapse-item> コンポーネント
# ダイアログコンポーネント Dialog ダイアログは、ユーザーの操作フローにおいて重要な通知を提供するために使用されます。 このコンポーネントを直接使用する以外に、mdui は4つの関数 [`mdui.dialog`](/ja/docs/2/functions/dialog)、[`mdui.alert`](/ja/docs/2/functions/alert)、[`mdui.confirm`](/ja/docs/2/functions/confirm)、[`mdui.prompt`](/ja/docs/2/functions/prompt) も提供しています。これらの関数は Dialog コンポーネントの使用を簡素化できます。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/dialog.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Dialog } from 'mdui/components/dialog.js'; ``` 使用例： ```html Dialog 閉じる ダイアログを開く ``` ## 例 {#examples} ### オーバーレイをクリックして閉じる {#example-close-on-overlay-click} `close-on-overlay-click` 属性を追加すると、オーバーレイをクリックしたときにダイアログが閉じます。 ```html Dialog ダイアログを開く ``` ### ESCキーで閉じる {#example-close-on-esc} `close-on-esc` 属性を追加すると、ESC キーを押した時にダイアログが閉じます。 ```html Dialog ダイアログを開く ``` ### 全画面表示 {#example-fullscreen} `fullscreen` 属性を追加すると、ダイアログが全画面表示されます。 ```html Dialog 閉じる ダイアログを開く ``` ### アイコン {#example-icon} `icon` 属性を設定すると、ダイアログの上部に Material Icons アイコンが追加されます。 ```html Dialog ダイアログを開く ``` `icon` スロットを使用して、ダイアログの上部にアイコン要素を追加することもできます。 ```html Dialog ダイアログを開く ``` ### タイトルと説明 {#example-headline} `headline` と `description` 属性を使用してダイアログのタイトルと説明を設定します。 ```html ダイアログを開く ``` `headline` と `description` スロットを使用してダイアログのタイトル要素と説明要素を設定することもできます。 ```html Delete selected images? Images will be permanently removed from your account and all synced devices. ダイアログを開く ``` ### 下部のアクションボタン {#example-action} `action` スロットを使用して下部のアクションボタンを追加できます。 ```html キャンセル 削除 ダイアログを開く ``` `stacked-actions` 属性を追加すると、下部のアクションボタンが垂直に並びます。 ```html Turn on speed boost No thanks ダイアログを開く ``` ### 上部コンテンツ {#example-header} `header` スロットを使用してダイアログの上部コンテンツを設定できます。 ```html Title Save
ダイアログを開く ``` ## mdui-dialog API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
icon icon true string

上部に表示するMaterial Iconsのアイコン名です。slot="icon" で設定することもできます。
headline headline true string

タイトルです。slot="headline" で設定することもできます。
description description true string

タイトルの下に表示されるテキストです。slot="description" で設定することもできます。
open open true boolean false

ダイアログを開くかどうかを指定します。
fullscreen fullscreen true boolean false

ダイアログを全画面表示するかどうかを指定します。
close-on-esc closeOnEsc true boolean false

ESCキーを押してダイアログを閉じることを許可するかどうかを指定します。
close-on-overlay-click closeOnOverlayClick true boolean false

オーバーレイをクリックしてダイアログを閉じることを許可するかどうかを指定します。
stacked-actions stackedActions true boolean false

下部の操作ボタンを縦に並べるかどうかを指定します。
### イベント
名前 説明
open

ダイアログが開き始めたときに発生します。event.preventDefault() を呼び出すことで、ダイアログが開くのを防ぐことができます。
opened

ダイアログのオープンアニメーションが完了した後に発生します。
close

ダイアログが閉じ始めたときに発生します。event.preventDefault() を呼び出すことで、ダイアログが閉じるのを防ぐことができます。
closed

ダイアログのクローズアニメーションが完了した後に発生します。
overlay-click

オーバーレイがクリックされたときに発生します。
### Slots
名前 説明
header

上部の要素。デフォルトで icon slot と headline slot を含みます。
icon

上部のアイコン
headline

上部のタイトル
description

タイトルの下のテキスト
デフォルト

ダイアログの本文コンテンツ
action

下部の操作バー内の要素
### CSS Parts
名前 説明
overlay

オーバーレイ
panel

ダイアログコンテナ
header

ダイアログのヘッダー部分。icon と headline を含みます。
icon

上部のアイコン。header内にあります。
headline

上部のタイトル。header内にあります。
body

ダイアログのボディ部分
description

補助テキスト部分。body内にあります。
action

下部の操作ボタン
### CSS カスタムプロパティ
名前 説明
--shape-corner

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

コンポーネントのCSS z-index 値
# 区切り線コンポーネント Divider 区切り線は、リストやコンテナ内でコンテンツをグループ化するための細い線です。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/divider.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Divider } from 'mdui/components/divider.js'; ``` 使用例： ```html ``` ## 例 {#examples} ### 垂直区切り線 {#example-vertical} `vertical` 属性を追加すると、区切り線を垂直に表示できます。 ```html
``` ### 左インデント {#example-inset} `inset` 属性を追加すると、区切り線の左側にインデントを付けることができます。これは通常、リスト内で区切り線を左側のテキストに揃えるために使用されます。 ```html Item 1 Item 2 ``` ### 両側インデント {#example-middle} `middle` 属性を追加すると、区切り線の両側にインデントを付けることができます。 ```html Item 1 Item 2 ``` ## mdui-divider API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
vertical vertical true boolean false

垂直な区切り線にするかどうかを指定します。
inset inset true boolean false

左側にインデントを入れるかどうかを指定します。
middle middle true boolean false

左右両側にインデントを入れるかどうかを指定します。
# ドロップダウンコンポーネント Dropdown ドロップダウンコンポーネントは、特定のコンテンツをポップアップコントロール内に表示するために使用され、通常はメニューコンポーネントと一緒に使用されます。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/dropdown.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Dropdown } from 'mdui/components/dropdown.js'; ``` 使用例： ```html open dropdown Item 1 Item 2 ``` ## 例 {#examples} ### 無効状態 {#example-disabled} `disabled` 属性を追加すると、ドロップダウンコンポーネントを無効にできます。 ```html open dropdown Item 1 Item 2 ``` ### 開く位置 {#example-placement} `placement` 属性を使用してドロップダウンコンポーネントの開く位置を設定できます。 ```html open dropdown Item 1 Item 2 ``` ### トリガー方法 {#example-trigger} `trigger` 属性を使用してドロップダウンコンポーネントのトリガー方法を設定できます。 ```html open dropdown Item 1 Item 2 ``` ### カーソル位置で開く {#example-open-on-pointer} `open-on-pointer` 属性を追加すると、カーソル位置でドロップダウンコンポーネントを開くことができます。通常、`trigger="contextmenu"` と組み合わせて、マウスの右クリックでメニューを開くために使用します。 ```html この領域でマウスの右クリックでメニューを開く Item 1 Item 2 ``` ### メニューを開いたままにする {#example-stay-open-on-click} ドロップダウンコンポーネントでメニューを使用する場合、デフォルトではメニュー項目をクリックするとドロップダウンコンポーネントが自動的に閉じます。`stay-open-on-click` 属性を追加すると、メニュー項目をクリックしてもドロップダウンコンポーネントを開いたままにできます。 ```html open dropdown Item 1 Item 2 ``` ### 開く/閉じるの遅延 {#example-delay} `trigger="hover"` を設定した場合、`open-delay` と `close-delay` 属性を使用して、開くときと閉じるときの遅延を設定できます。 ```html open dropdown Item 1 Item 2 ``` ## mdui-dropdown API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
open open true boolean false

ドロップダウンコンポーネントを開くかどうかを指定します。
disabled disabled true boolean false

ドロップダウンコンポーネントを無効にするかどうかを指定します。
trigger trigger true 'click' | 'hover' | 'focus' | 'contextmenu' | 'manual' | string 'click'

ドロップダウンのトリガー方法です。スペース区切りで複数の値を指定できます。次の値があります：

  • click：クリックでトリガー
  • hover：マウスホバーでトリガー
  • focus：フォーカスでトリガー
  • contextmenu：マウス右クリック、またはタッチ長押しでトリガー
  • manual：プログラムからのみドロップダウンの開閉が可能です。他のトリガー方法と併用できません。
placement placement true 'auto' | 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

ドロップダウンコンテンツの配置位置です。次の値を指定します：

  • auto：位置を自動判断
  • top-start：上、左揃え
  • top：上、中央揃え
  • top-end：上、右揃え
  • bottom-start：下、左揃え
  • bottom：下、中央揃え
  • bottom-end：下、右揃え
  • left-start：左、上揃え
  • left：左、中央揃え
  • left-end：左、下揃え
  • right-start：右、上揃え
  • right：右、中央揃え
  • right-end：右、下揃え
stay-open-on-click stayOpenOnClick true boolean false

<mdui-menu-item> をクリックした後も、ドロップダウンを開いたままにするかどうかを指定します。
open-delay openDelay true number 150

マウスホバーでドロップダウンが開くまでの遅延時間（ミリ秒単位）です。
close-delay closeDelay true number 150

マウスホバーでドロップダウンが閉じるまでの遅延時間（ミリ秒単位）です。
open-on-pointer openOnPointer true boolean false

ドロップダウンをトリガーしたポインターの位置にドロップダウンを開くかどうかを指定します。マウス右クリックメニューを開く場合によく使用されます。
### イベント
名前 説明
open

ドロップダウンが開き始めたときに発生するイベントです。event.preventDefault() を呼び出すことで、ドロップダウンが開くのを防ぐことができます。
opened

ドロップダウンのオープンアニメーションが完了したときに発生するイベントです。
close

ドロップダウンが閉じ始めたときに発生するイベントです。event.preventDefault() を呼び出すことで、ドロップダウンが閉じるのを防ぐことができます。
closed

ドロップダウンのクローズアニメーションが完了したときに発生するイベントです。
### Slots
名前 説明
デフォルト

ドロップダウンのコンテンツ
trigger

ドロップダウンをトリガーする要素。例：<mdui-button> 要素など。
### CSS Parts
名前 説明
trigger

ドロップダウンをトリガーする要素のコンテナ、つまり trigger slot のコンテナ
panel

ドロップダウンのコンテンツのコンテナ
### CSS カスタムプロパティ
名前 説明
--z-index

コンポーネントのCSS z-index 値
# フローティングアクションボタンコンポーネント Fab フローティングアクションボタン (FAB) は、ページ上の主要な操作を強調表示するために使用され、重要な操作をアクセスしやすい場所に配置します。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/fab.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Fab } from 'mdui/components/fab.js'; ``` 使用例： ```html ``` ## 例 {#examples} ### アイコン {#example-icon} `icon` 属性で Material Icons アイコン名を指定します。`icon` スロットでアイコン要素を指定することもできます。 ```html ``` ### 拡張状態 {#example-extended} `extended` 属性を追加すると、FAB を拡張状態に設定できます。この時、デフォルトスロット内のテキストが表示されます。 ```html Compose ``` ### 形状 {#example-variant} `variant` 属性を使用して FAB の形状を設定できます。 ```html ``` ### サイズ {#example-size} `size` 属性を使用して FAB のサイズを設定できます。 ```html ``` ### リンク {#example-link} `href` 属性を追加すると、FAB をリンクにできます。この場合、リンク関連の `download`、`target`、`rel` 属性も使用できます。 ```html ``` ### 無効および読み込み中状態 {#example-disabled} `disabled` 属性を追加すると FAB を無効にできます。`loading` 属性を追加すると FAB を読み込み中状態にできます。 ```html ``` ## mdui-fab API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
variant variant true 'primary' | 'surface' | 'secondary' | 'tertiary' 'primary'

FABの形状です。このコンポーネントの異なる形状間では、色のみが異なります。次の値を指定します：

  • primary：Primary container の背景色を使用
  • surface：Surface container high の背景色を使用
  • secondary：Secondary container の背景色を使用
  • tertiary：Tertiary container の背景色を使用
size size true 'normal' | 'small' | 'large' 'normal'

FABのサイズです。次の値を指定します：

  • normal：標準サイズのFAB
  • small：小型FAB
  • large：大型FAB
icon icon true string

Material Iconsのアイコン名です。slot="icon" で設定することもできます。
extended extended true boolean false

展開状態にするかどうかを指定します。
href href true string

リンク先のURLです。

この属性を設定すると、コンポーネント内部は <a> 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
download download true string

ダウンロードリンクの対象ファイル名です。

注：href 属性が設定されている場合にのみ有効です。
target target true '_blank' | '_parent' | '_self' | '_top'

リンクの開き方です。次の値を指定します：

  • _blank：新しいウィンドウで開く
  • _parent：親フレームで開く
  • _self：デフォルト。現在のフレームで開く
  • _top：最上位のウィンドウで開く

注：href 属性が設定されている場合にのみ有効です。
rel rel true '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 true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
disabled disabled true boolean false

無効状態にするかどうかを指定します。
loading loading true boolean false

読み込み中状態にするかどうかを指定します。
name name true string ''

ボタンの名前です。フォームデータと共に送信されます。

注：href 属性が設定されていない場合にのみ有効です。
value value true string ''

ボタンの初期値です。フォームデータと共に送信されます。

注：href 属性が設定されていない場合にのみ有効です。
type type true 'submit' | 'reset' | 'button' 'button'

ボタンのタイプです。デフォルトのタイプは button です。次のタイプを指定します：

  • submit：ボタンをクリックするとフォームデータがサーバーに送信されます
  • reset：ボタンをクリックするとフォーム内のすべてのフィールドが初期値にリセットされます
  • button：このタイプのボタンにはデフォルトの動作はありません

注：href 属性が指定されていない場合にのみ有効です。
form form true string

関連付ける <form> 要素です。この属性値には、同一ページ内の <form> 要素の id を指定する必要があります。

この属性が指定されていない場合、この要素は <form> 要素の子要素である必要があります。この属性を使用すると、要素を <form> 要素の子要素だけでなく、ページ上の任意の場所に配置できます。

注：href 属性が指定されていない場合にのみ有効です。
formaction formAction true string

フォーム送信先のURLを指定します。

この属性が指定されている場合、<form> 要素の action 属性は上書きされます。

注：href 属性が指定されておらず、かつ type="submit" の場合にのみ有効です。
formenctype formEnctype true '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 true 'post' | 'get'

フォーム送信時に使用するHTTPメソッドを指定します。次の値を指定します：

  • post：フォームデータはフォームコンテンツに含まれてサーバーに送信されます
  • get：フォームデータは ? 区切りでフォームのURI属性に追加され、生成されたURIがサーバーに送信されます。フォームに副作用がなく、ASCII文字のみを含む場合にこのメソッドを使用します

この属性が設定されている場合、<form> 要素の method 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
formnovalidate formNoValidate true boolean false

この属性が設定されている場合、フォーム送信時にフォーム検証は実行されません。

この属性が設定されている場合、<form> 要素の novalidate 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

フォーム送信後に受信したレスポンスを表示する場所を指定します。次の値を指定します：

  • _self：デフォルトのオプション。現在のフレームで開きます
  • _blank：新しいウィンドウで開きます
  • _parent：親フレームで開きます
  • _top：最上位のウィンドウで開きます

この属性が設定されている場合、<form> 要素の target 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
undefined validity false ValidityState

フォーム検証ステータスを表す ValidityState オブジェクトです。詳細は ValidityState を参照してください。
undefined validationMessage false string

フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
checkValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。
reportValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。

検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
setCustomValidity(message: string): void

カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
invalid

フォームフィールドの検証に合格しなかったときに発生します。
### Slots
名前 説明
デフォルト

テキスト
icon

アイコン
### CSS Parts
名前 説明
button

内部の <button> または <a> 要素
label

右側のテキスト
icon

左側のアイコン
loading

読み込み中状態の <mdui-circular-progress> 要素
### CSS カスタムプロパティ
名前 説明
--shape-corner-small

size="small" の場合のコンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
--shape-corner-normal

size="normal" の場合のコンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
--shape-corner-large

size="large" の場合のコンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
# アイコンコンポーネント Icon アイコンは一般的な操作を表現するために使用されます。Material Icons アイコンと SVG アイコンの使用をサポートしています。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/icon.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Icon } from 'mdui/components/icon.js'; ``` 使用例： ```html ``` ### Material Icons アイコンの使用 {#usage-material-icons} このコンポーネントで Material Icons アイコンを使用するには、Material Icons の CSS ファイルを別途インポートする必要があります。Material Icons には Filled、Outlined、Rounded、Sharp、Two Tone の5つのバリエーションがあります。使用するアイコンのバリエーションに応じて、対応する CSS ファイルをインポートしてください： ```html ``` コンポーネントを使用する際は、`name` 属性にアイコン名を指定し、アイコンのバリエーション名を接尾辞として付けます（Filled バリエーションは接尾辞不要）。以下は `delete` アイコンの5つのバリエーションの使用例です： ```html ``` ページ下部の [Material Icons アイコン検索](/ja/docs/2/components/icon#search) ツールでアイコンを直接検索し、使用したいアイコンをクリックすると、アイコンコードが自動的にクリップボードにコピーされます。 また、mdui は独立したパッケージ [`@mdui/icons`](/ja/docs/2/libraries/icons) も提供しています。このパッケージ内の各アイコンコンポーネントは独立したファイルであり、アイコンライブラリ全体をインポートせずに必要なアイコンコンポーネントを必要に応じてインポートできます。 ### SVG アイコンの使用 {#usage-svg} このコンポーネントは SVG アイコンをアイコンコンテンツとして使用することもサポートしています。コンポーネントの `src` 属性で SVG アイコンのリンクを指定できます。例： ```html ``` コンポーネントのデフォルトスロットに SVG の内容を入れることもできます。例： ```html ``` ## 例 {#examples} ### 色の設定 {#example-color} `` 要素または親要素の `color` CSS スタイルを設定して、アイコンの色を変更します。 ```html ``` ### サイズの設定 {#example-size} `` 要素または親要素の `font-size` CSS スタイルを設定して、アイコンのサイズを変更します。 ```html ``` ## mdui-icon API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
name name true string

Material Iconsのアイコン名です。
src src true string

SVGアイコンのパスです。
### Slots
名前 説明
デフォルト

svg アイコンのコンテンツ
# レイアウトコンポーネント Layout レイアウトコンポーネントは、複雑なページレイアウトを作成するための柔軟なレイアウトシステムを提供します。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/layout.js'; import 'mdui/components/layout-item.js'; import 'mdui/components/layout-main.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Layout } from 'mdui/components/layout.js'; import type { LayoutItem } from 'mdui/components/layout-item.js'; import type { LayoutMain } from 'mdui/components/layout-main.js'; ``` **紹介：** レイアウトシステムは、外側から内側へ順に配置する原則に基づいています。各レイアウトコンポーネント（`` コンポーネント）は、上下左右のいずれかの位置に領域を確保し、後続のレイアウトコンポーネントは残りの領域に配置されます。 以下のコンポーネントは `` コンポーネントを直接継承しているため、レイアウトコンポーネントとしても使用できます： - [``](/ja/docs/2/components/navigation-bar) - [``](/ja/docs/2/components/navigation-drawer) - [``](/ja/docs/2/components/navigation-rail) - [``](/ja/docs/2/components/bottom-app-bar) - [``](/ja/docs/2/components/top-app-bar) レイアウトシステムの最後の部分は `` コンポーネントで、残りの領域を占めます。このコンポーネント内にページコンテンツを配置できます。 ## 例 {#examples} ### レイアウトコンポーネントの順序 {#layout-default-order} デフォルトでは、レイアウトコンポーネントはコードに出現する順番で領域を占めます。以下の2つの例でこの概念を理解できます。これらの例では、[``](/ja/docs/2/components/top-app-bar) と [``](/ja/docs/2/components/navigation-drawer) のコード上の出現順序が異なります。

この例は大画面ディスプレイでご覧ください。

```html Top App Bar Navigation drawer Main ``` ```html Navigation drawer Top App Bar Main ``` [``](/ja/docs/2/components/top-app-bar) を [``](/ja/docs/2/components/navigation-drawer) の前に置くと、[``](/ja/docs/2/components/top-app-bar) が最初に画面の幅を占め、[``](/ja/docs/2/components/navigation-drawer) は残りの領域で高さを占めることがわかります。両者の順序を入れ替えると、[``](/ja/docs/2/components/navigation-drawer) が最初に画面の高さを占め、[``](/ja/docs/2/components/top-app-bar) は残りの領域で幅を占めます。 ### レイアウトコンポーネントの位置 {#example-placement} `` コンポーネントでは、`placement` 属性を使用してレイアウト内の上下左右の位置を指定できます。[``](/ja/docs/2/components/navigation-drawer) と [``](/ja/docs/2/components/navigation-rail) コンポーネントでも、`placement` 属性を使用してレイアウト内の左右の位置を指定できます。 以下の例では、2つの `` コンポーネントをアプリケーションの両側に配置しています。 ```html Top App Bar Layout Item Layout Item Main ``` ### レイアウトコンポーネントの順序をカスタマイズ {#example-order} ほとんどの場合、レイアウトコンポーネントを順番に配置するだけで目的のレイアウトを実現できます。 `order` 属性を使用してレイアウトの順序を指定することもできます。システムは `order` の値が小さい順にコンポーネントを配置し、`order` が同じ場合はコードの出現順に配置します。すべてのレイアウトコンポーネントのデフォルトの `order` は `0` です。 ```html Layout Item Top App Bar
order="-1" Main ``` ## mdui-layout-item API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
placement placement true 'top' | 'bottom' | 'left' | 'right' 'top'

コンポーネントの配置位置です。次の値を指定します：

  • top：上
  • bottom：下
  • left：左
  • right：右
order order true number

<mdui-layout>内における、このコンポーネントのレイアウト順序です。値が小さい順に並びます。デフォルトは 0 です。
### Slots
名前 説明
デフォルト

任意のコンテンツを含めることができます。
## mdui-layout-main API ### Slots
名前 説明
デフォルト

任意のコンテンツを含めることができます。
## mdui-layout API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
full-height fullHeight true boolean false

現在のレイアウトの高さを100%に設定します。
### Slots
名前 説明
デフォルト

<mdui-top-app-bar>、<mdui-bottom-app-bar>、<mdui-navigation-bar>、<mdui-navigation-drawer>、<mdui-navigation-rail>、<mdui-layout-item>、<mdui-layout-main> 要素を含めることができます。
# 線形プログレスコンポーネント LinearProgress 線形プログレスは、データ読み込みやフォーム送信など、タスクの実行進捗をユーザーに表示するための横長のインジケーターです。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/linear-progress.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { LinearProgress } from 'mdui/components/linear-progress.js'; ``` 使用例： ```html ``` ## 例 {#examples} ### 進捗の設定 {#example-value} 線形プログレスはデフォルトで不確定な進捗です。`value` 属性を使用して現在の進捗を設定できます。デフォルトの進捗最大値は `1` です。 ```html ``` `max` 属性を使用して進捗の最大値を設定することもできます。 ```html ``` ## mdui-linear-progress API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
max max true number 1

プログレスインジケーターの最大値です。デフォルトは 1 です。
value value false number

プログレスインジケーターの現在の値です。この値が指定されていない場合は、不確定状態になります。
### CSS Parts
名前 説明
indicator

インジケーター部分
### CSS カスタムプロパティ
名前 説明
--shape-corner

コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
# リストコンポーネント List リストは、テキストや画像を表示するための縦方向に並んだ項目のリストで、ユーザーが関連情報をすばやく参照したり、それにアクセスしたりできるようにします。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/list.js'; import 'mdui/components/list-item.js'; import 'mdui/components/list-subheader.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { List } from 'mdui/components/list.js'; import type { ListItem } from 'mdui/components/list-item.js'; import type { ListSubheader } from 'mdui/components/list-subheader.js'; ``` 使用例： ```html Subheader Item 1 Item 2 ``` ## 例 {#examples} ### テキストコンテンツ {#example-text} `` コンポーネントに `headline` 属性を設定すると、リスト項目のメインテキストを設定できます。`description` 属性を設定すると、サブテキストを設定できます。 ```html ``` デフォルトスロットでメインテキストを設定し、`description` スロットでサブテキストを設定することもできます。 ```html Headline Headline Supporting text ``` デフォルトでは、メインテキストとサブテキストは長さに関係なくそのまま表示されます。`headline-line` と `description-line` 属性を設定することで、メインテキストとサブテキストに行数制限を追加でき、最大 3 行まで制限できます。 ```html Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Headline Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text Supporting text ``` ### 両側のコンテンツ {#example-side} `` コンポーネントに `icon` と `end-icon` 属性を設定すると、リスト項目の左側と右側に Material Icons アイコンを追加できます。 ```html Headline ``` `icon` と `end-icon` スロットを使用して、リスト項目の左側と右側に要素を追加することもできます。 ```html Headline ``` ### リンク {#example-link} `href` 属性を設定すると、リスト項目をリンクに変換できます。この場合、リンク関連の属性 `download`、`target`、`rel` も使用できます。 ```html Headline ``` ### 無効状態 {#example-disabled} `` コンポーネントに `disabled` 属性を追加すると、そのリスト項目を無効にできます。この場合、リスト項目内の checkbox、radio、switch などのコンポーネントも無効になります。 ```html Headline Headline ``` ### アクティブ状態 {#example-active} `` コンポーネントに `active` 属性を追加すると、そのリスト項目をアクティブ状態にできます。 ```html Headline Headline ``` ### クリック不可状態 {#example-nonclickable} `` コンポーネントに `nonclickable` 属性を追加すると、リスト項目からマウスホバーとクリックリップルを削除できます。 ```html Headline Headline ``` ### 角丸形状 {#example-rounded} `` コンポーネントに `rounded` 属性を追加すると、そのリスト項目を角丸形状にできます。 ```html Headline Headline ``` ### 垂直方向の配置 {#example-alignment} `` コンポーネントに `alignment` 属性を設定すると、リスト項目の左右の要素とリスト項目自体の配置を調整できます。値は以下の通りです： - `start`：上揃え - `center`：中央揃え - `end`：下揃え ```html Headline Headline Headline ``` ### カスタムコンテンツ {#example-custom} `` コンポーネントで `custom` スロットを使用すると、リスト項目のコンテンツを完全にカスタマイズできます。 ```html
test
 ``` ## mdui-list-item API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
headline headline true string

メインテキストです。デフォルトスロットで設定することもできます。
headline-line headlineLine true 1 | 2 | 3

メインテキストの行数です。制限を超えると切り捨てて表示されます。デフォルトでは行数制限はありません。次の値を指定します：

  • 1：1行で表示し、超えた場合は切り捨て
  • 2：2行で表示し、超えた場合は切り捨て
  • 3：3行で表示し、超えた場合は切り捨て
description description true string

サブテキストです。slot="description" で設定することもできます。
description-line descriptionLine true 1 | 2 | 3

サブテキストの行数です。制限を超えると切り捨てて表示されます。デフォルトでは行数制限はありません。次の値を指定します：

  • 1：1行で表示し、超えた場合は切り捨て
  • 2：2行で表示し、超えた場合は切り捨て
  • 3：3行で表示し、超えた場合は切り捨て
icon icon true string

左側に表示するMaterial Iconsのアイコン名です。slot="icon" で設定することもできます。
end-icon endIcon true string

右側に表示するMaterial Iconsのアイコン名です。slot="end-icon" で設定することもできます。
disabled disabled true boolean false

このリストアイテムを無効にするかどうかを指定します。無効にすると、リストアイテムがグレー表示になり、その中の <mdui-checkbox>、<mdui-radio>、<mdui-switch> なども無効になります。
active active true boolean false

このリストアイテムをアクティブにするかどうかを指定します。
nonclickable nonclickable true boolean false

リストアイテムをクリック不可にするかどうかを指定します。設定後も、リストアイテム内の <mdui-checkbox>、<mdui-radio>、<mdui-switch> などは引き続き操作可能です。
rounded rounded true boolean false

角丸形状のリストアイテムを使用するかどうかを指定します。
alignment alignment true 'start' | 'center' | 'end' 'center'

リストアイテムの垂直方向の配置です。次の値を指定します：

  • start：上揃え
  • center：中央揃え
  • end：下揃え
href href true string

リンク先のURLです。

この属性を設定すると、コンポーネント内部は <a> 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
download download true string

ダウンロードリンクの対象ファイル名です。

注：href 属性が設定されている場合にのみ有効です。
target target true '_blank' | '_parent' | '_self' | '_top'

リンクの開き方です。次の値を指定します：

  • _blank：新しいウィンドウで開く
  • _parent：親フレームで開く
  • _self：デフォルト。現在のフレームで開く
  • _top：最上位のウィンドウで開く

注：href 属性が設定されている場合にのみ有効です。
rel rel true '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 true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
### Slots
名前 説明
デフォルト

メインテキスト
description

サブテキスト
icon

リストアイテム左側の要素
end-icon

リストアイテム右側の要素
custom

任意のカスタムコンテンツ
### CSS Parts
名前 説明
container

リストアイテムコンテナ
icon

左側のアイコン
end-icon

右側のアイコン
body

中央部分
headline

メインタイトル
description

サブタイトル
### CSS カスタムプロパティ
名前 説明
--shape-corner

リストアイテムの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
--shape-corner-rounded

rounded 属性が指定されている場合のリストアイテムの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
## mdui-list-subheader API ### Slots
名前 説明
デフォルト

リストサブヘッダーテキスト
## mdui-list API ### Slots
名前 説明
デフォルト

<mdui-list-item> 要素
# メニューコンポーネント Menu メニューコンポーネントは、縦方向に並んだ一連のオプションを提供します。ユーザーがボタンやその他のコントロールを操作すると、メニューが表示されます。 ドロップダウンメニューを実装する必要がある場合は、[``](/ja/docs/2/components/dropdown) コンポーネントと組み合わせることができます。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/menu.js'; import 'mdui/components/menu-item.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Menu } from 'mdui/components/menu.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` 使用例： ```html Item 1 Item 2 ``` ## 例 {#examples} ### ドロップダウンメニュー {#example-dropdown} [``](/ja/docs/2/components/dropdown) コンポーネントと組み合わせてドロップダウンメニューを実装します。 ```html open dropdown Item 1 Item 2 ``` ### コンパクトレイアウト {#example-dense} `` コンポーネントに `dense` 属性を追加すると、コンパクトレイアウトにできます。 ```html Item 1 Item 2 Item 3 ``` ### メニュー項目の無効化 {#example-disabled} `` コンポーネントに `disabled` 属性を追加すると、メニュー項目を無効にできます。 ```html Item 1 Item 2 Item 3 ``` ### 単一選択をサポート {#example-selects-single} `` コンポーネントで `selects` 属性を `single` に指定すると、単一選択が可能になります。この場合、`` の `value` 値は、現在選択されている `` の `value` 値になります。 ```html Item 1 Item 2 ``` ### 複数選択をサポート {#example-selects-multiple} `` コンポーネントで `selects` 属性を `multiple` に指定すると、複数選択が可能になります。この場合、`` の `value` 値は、現在選択されている `` の `value` 値からなる配列になります。 注意：複数選択モードでは、`` の `value` 値は配列であり、JavaScript プロパティを通じてのみ読み取りと設定ができます。 ```html Item 1 Item 2 Item 3 ``` ### アイコン {#example-icon} `` コンポーネントで `icon` と `end-icon` 属性を設定すると、メニュー項目の左側と右側に Material Icons アイコンを追加できます。`end-text` 属性を設定すると、右側にテキストを追加できます。また、`icon`、`end-icon`、`end-text` スロットを使用して、メニュー項目の左側と右側にアイコンとテキストを追加することもできます。 メニュー項目の左側に他の項目と揃えるためのスペースを確保したい場合は、`icon` 属性を空文字列に設定します。 ```html Item 1 Item 2 Ctrl+X Item 3 ``` 単一選択または複数選択モードでは、`selected-icon` 属性または `selected-icon` スロットを使用して選択状態のアイコンを設定できます。 ```html Item 1 Item 2 ``` ### リンク {#example-link} `` コンポーネントに `href` 属性を設定すると、メニュー項目をリンクに変換できます。この場合、リンク関連の属性 `download`、`target`、`rel` も使用できます。 ```html Item 1 Item 2 ``` ### サブメニュー {#example-submenu} `` コンポーネントで `submenu` スロットを使用して、サブメニュー項目の要素を指定できます。 ```html Line spacing Single 1.5 Double Custom: 1.2 Paragraph style ``` `` コンポーネントで、`submenu-trigger` 属性を使用してサブメニューのトリガー方法を設定できます。 ```html Line spacing Single 1.5 Double Custom: 1.2 Paragraph style ``` `submenu-trigger` 属性が `hover` に設定されている場合、`` コンポーネントで `submenu-open-delay` と `submenu-close-delay` 属性を使用してサブメニューの開く遅延と閉じる遅延を設定できます。 ```html Line spacing Single 1.5 Double Custom: 1.2 Paragraph style ``` ### カスタムコンテンツ {#example-custom} `` コンポーネントで `custom` スロットを使用すると、メニュー項目のコンテンツを完全にカスタマイズできます。 ```html
ABS
数値の絶対値を取る
ACOS
数値のアークコサイン（ラジアン）を返す
ACOSH
数値の双曲線アークコサインを返す
 ``` ## mdui-menu-item API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
value value true string

メニューアイテムの値です。
disabled disabled true boolean false

メニューアイテムを無効にするかどうかを指定します。
icon icon true string

左側に表示するMaterial Iconsのアイコン名です。slot="icon" で設定することもできます。

左側にアイコンを表示する必要はないが、アイコン用のスペースを確保したい場合は、空の文字列を渡してプレースホルダーとすることができます。
end-icon endIcon true string

右側に表示するMaterial Iconsのアイコン名です。slot="end-icon" で設定することもできます。
end-text endText true string

右側に表示するテキストです。slot="end-text" で設定することもできます。
selected-icon selectedIcon true string

選択状態のMaterial Iconsアイコン名です。slot="selected-icon" で設定することもできます。
submenu-open submenuOpen true boolean false

サブメニューを開くかどうかを指定します。
href href true string

リンク先のURLです。

この属性を設定すると、コンポーネント内部は <a> 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
download download true string

ダウンロードリンクの対象ファイル名です。

注：href 属性が設定されている場合にのみ有効です。
target target true '_blank' | '_parent' | '_self' | '_top'

リンクの開き方です。次の値を指定します：

  • _blank：新しいウィンドウで開く
  • _parent：親フレームで開く
  • _self：デフォルト。現在のフレームで開く
  • _top：最上位のウィンドウで開く

注：href 属性が設定されている場合にのみ有効です。
rel rel true '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 true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
submenu-open

サブメニューが開き始めたときに発生するイベントです。event.preventDefault() を呼び出すことで、サブメニューが開くのを防ぐことができます。
submenu-opened

サブメニューのオープンアニメーションが完了したときに発生するイベントです。
submenu-close

サブメニューが閉じ始めたときに発生するイベントです。event.preventDefault() を呼び出すことで、サブメニューが閉じるのを防ぐことができます。
submenu-closed

サブメニューのクローズアニメーションが完了したときに発生するイベントです。
### Slots
名前 説明
デフォルト

メニューアイテムのテキスト
icon

メニューアイテムの左側のアイコン
end-icon

メニューアイテムの右側のアイコン
end-text

メニュー右側のテキスト
selected-icon

選択状態のアイコン
submenu

サブメニュー
custom

任意のカスタムコンテンツ
### CSS Parts
名前 説明
container

メニューアイテムのコンテナ
icon

左側のアイコン
label

テキストコンテンツ
end-icon

右側のアイコン
end-text

右側のテキスト
selected-icon

選択状態のアイコン
submenu

サブメニュー要素
## mdui-menu API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
selects selects true 'single' | 'multiple'

メニューアイテムの選択可能状態です。デフォルトは選択不可です。次の値を指定します：

  • single：単一選択
  • multiple：複数選択
value value false string | string[]

現在選択されている <mdui-menu-item> の値です。

注：この属性のHTML属性値は常に文字列として扱われ、selects="single" の場合にのみHTML属性で初期値を設定できます。この属性のJavaScriptプロパティ値は、selects="single" の場合は文字列、selects="multiple" の場合は文字列の配列になります。したがって、selects="multiple" の場合にこの値を変更するには、JavaScriptプロパティ値を変更する必要があります。
dense dense true boolean false

メニューアイテムにコンパクトなレイアウトを使用するかどうかを指定します。
submenu-trigger submenuTrigger true 'click' | 'hover' | 'focus' | 'manual' | string 'click hover'

サブメニューのトリガー方法です。スペース区切りで複数の値を指定できます。次の値があります：

  • click：メニューアイテムをクリックしたときにサブメニューを開く
  • hover：メニューアイテムにマウスをホバーしたときにサブメニューを開く
  • focus：メニューアイテムにフォーカスしたときにサブメニューを開く
  • manual：プログラムからのみサブメニューの開閉が可能です。他のトリガー方法と併用できません。
submenu-open-delay submenuOpenDelay true number 200

マウスホバーでサブメニューが開くまでの遅延時間（ミリ秒単位）です。
submenu-close-delay submenuCloseDelay true number 200

マウスホバーでサブメニューが閉じるまでの遅延時間（ミリ秒単位）です。
### メソッド
名前 説明
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。
blur(): void

現在の要素からフォーカスを外します。
### イベント
名前 説明
change

メニューアイテムの選択状態が変化したときに発生します。
### Slots
名前 説明
デフォルト

サブメニューアイテム（<mdui-menu-item>）、区切り線（<mdui-divider>）などの要素
### CSS カスタムプロパティ
名前 説明
--shape-corner

コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
# ナビゲーションバーコンポーネント NavigationBar ナビゲーションバーは、モバイル端末の画面上でいくつかの主要なページ間を簡単に切り替えるために使用されます。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/navigation-bar.js'; import 'mdui/components/navigation-bar-item.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { NavigationBar } from 'mdui/components/navigation-bar.js'; import type { NavigationBarItem } from 'mdui/components/navigation-bar-item.js'; ``` 使用例：（例中の `style="position: relative"` はデモンストレーションのためだけのもので、実際の使用時はこのスタイルを削除してください。） ```html Item 1 Item 2 Item 3 ``` **注意事項：** このコンポーネントはデフォルトで `position: fixed` を使用し、自動的に `body` に `padding-bottom` スタイルを追加して、ページコンテンツがコンポーネントに隠れないようにします。ただし、以下の 2 つの場合はデフォルトで `position: absolute` を使用します： 1. `scroll-target` 属性が指定されている場合。この場合、`scroll-target` の要素に `padding-bottom` スタイルを追加します。 2. コンポーネントが [``](/ja/docs/2/components/layout) 内にある場合。この場合、`padding-bottom` スタイルは追加されません。 ## 例 {#examples} ### テキストラベルの表示状態 {#example-label-visibility} ナビゲーションバーのテキストラベルは、デフォルトではナビゲーション項目が 3 つ以下の場合に常に表示されます。ナビゲーション項目が 3 つより多い場合、選択状態のテキストのみが表示されます。 ```html Item 1 Item 2 Item 3
Item 1 Item 2 Item 3 Item 4 ``` `` コンポーネントに `label-visibility` 属性を設定することで、テキストラベルの表示状態を調整できます。使用可能な値は以下の通りです： - `selected`：選択状態のテキストのみ表示 - `labeled`：常にテキストを表示 - `unlabeled`：常にテキストを表示しない ```html Item 1 Item 2 Item 3 selected labeled unlabeled ``` ### 指定されたコンテナ内に配置 {#example-scroll-target} デフォルトでは、ナビゲーションバーは現在のウィンドウを基準にしてページの下部に表示されます。 ナビゲーションバーを指定されたコンテナ内に配置したい場合は、`` コンポーネントに `scroll-target` 属性を指定します。この属性の値は、スクロール可能なコンテンツのコンテナの CSS セレクタまたは DOM 要素とします。この場合、ナビゲーションバーは親要素を基準にして表示されます（親要素に `position: relative; overflow: hidden` スタイルを自分で追加する必要があります）。 ```html
Item 1 Item 2 Item 3
ページコンテンツ
``` ### スクロール時に非表示 {#example-scroll-behavior} `` コンポーネントに `scroll-behavior` 属性を `hide` に設定することで、ページを下にスクロールした時にナビゲーションバーを非表示にし、上にスクロールした時に表示するようにできます。 `scroll-threshold` 属性を使用して、スクロールが何ピクセル進んだらナビゲーションバーを非表示にし始めるかを設定できます。 ```html
Item 1 Item 2 Item 3
ページコンテンツ
``` ### アイコン {#example-icon} `` コンポーネントでは、`icon` 属性は未アクティブ状態のナビゲーション項目アイコンを設定し、`active-icon` 属性はアクティブ状態のナビゲーション項目アイコンを設定します。`icon` と `active-icon` スロットを使用して未アクティブ状態とアクティブ状態のアイコン要素を設定することもできます。 ```html Item 1 Item 2 ``` ### リンク {#example-link} `` コンポーネントに `href` 属性を設定すると、ナビゲーション項目をリンクにできます。この場合、リンク関連の属性 `download`、`target`、`rel` も使用できます。 ```html Item 1 Item 2 ``` ### バッジ {#example-badge} `` コンポーネントでは、`badge` スロットを使用してバッジを追加できます。 ```html Item 1 99+ Item 2 ``` ## mdui-navigation-bar-item API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
icon icon true string

非アクティブ状態のMaterial Iconsアイコン名です。slot="icon" で設定することもできます。
active-icon activeIcon true string

アクティブ状態のMaterial Iconsアイコン名です。slot="active-icon" で設定することもできます。
value value true string

ナビゲーションアイテムの値です。
href href true string

リンク先のURLです。

この属性を設定すると、コンポーネント内部は <a> 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
download download true string

ダウンロードリンクの対象ファイル名です。

注：href 属性が設定されている場合にのみ有効です。
target target true '_blank' | '_parent' | '_self' | '_top'

リンクの開き方です。次の値を指定します：

  • _blank：新しいウィンドウで開く
  • _parent：親フレームで開く
  • _self：デフォルト。現在のフレームで開く
  • _top：最上位のウィンドウで開く

注：href 属性が設定されている場合にのみ有効です。
rel rel true '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 true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
### Slots
名前 説明
デフォルト

ナビゲーションアイテムのテキスト
icon

アイコン
active-icon

アクティブ状態のアイコン要素
badge

バッジ
### CSS Parts
名前 説明
container

ナビゲーションアイテムコンテナ
indicator

インジケーター
badge

バッジ
icon

アイコン
active-icon

アクティブ状態のアイコン
label

ナビゲーションアイテムのテキスト
### CSS カスタムプロパティ
名前 説明
--shape-corner-indicator

インジケーターの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
## mdui-navigation-bar API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
hide hide true boolean false

非表示にするかどうかを指定します。
label-visibility labelVisibility true 'auto' | 'selected' | 'labeled' | 'unlabeled' 'auto'

テキストラベルの表示状態です。次の値を指定します：

  • auto：オプションが3個以下の場合は常にテキストラベルを表示、オプションが3個より多い場合は選択状態のテキストラベルのみ表示
  • selected：選択状態でのみテキストラベルを表示
  • labeled：常にテキストラベルを表示
  • unlabeled：常にテキストラベルを非表示
value value true string

現在選択されている <mdui-navigation-bar-item> の値です。
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

スクロール時の動作です。次の値を指定します：

  • hide：スクロール時に非表示
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

スクロールイベントを監視する対象の要素です。値にはCSSセレクター、DOM要素、またはJQオブジェクトを指定します。デフォルトでは window のスクロールイベントを監視します。
scroll-threshold scrollThreshold true number

スクロール動作を開始させるために必要なスクロール距離（px単位）です。
order order true number

<mdui-layout>内における、このコンポーネントのレイアウト順序です。値が小さい順に並びます。デフォルトは 0 です。
### イベント
名前 説明
change

値が変化したときに発生します。
show

表示が開始される直前に発生するイベントです。event.preventDefault() を呼び出すことで表示をキャンセルできます。
shown

表示アニメーションが完了したときに発生するイベントです。
hide

非表示が開始される直前に発生するイベントです。event.preventDefault() を呼び出すことで非表示をキャンセルできます。
hidden

非表示アニメーションが完了したときに発生するイベントです。
### Slots
名前 説明
デフォルト

<mdui-navigation-bar-item> コンポーネント
### CSS カスタムプロパティ
名前 説明
--shape-corner

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

コンポーネントのCSS z-index 値
# ナビゲーションドロワーコンポーネント NavigationDrawer ナビゲーションドロワーは、ページのサイドにナビゲーション機能を提供し、ユーザーがさまざまなページやコンテンツにすばやくアクセスできるようにします。 通常、ナビゲーションドロワー内で [``](/ja/docs/2/components/list) コンポーネントを使用してナビゲーション項目を追加できます。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/navigation-drawer.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { NavigationDrawer } from 'mdui/components/navigation-drawer.js'; ``` 使用例： ```html ナビゲーションドロワーを閉じる ナビゲーションドロワーを開く ``` **注意事項：** このコンポーネントはデフォルトで `position: fixed` を使用します。 `modal` 属性が `false` で、かつブレークポイントが [`--mdui-breakpoint-md`](/ja/docs/2/styles/design-tokens#breakpoint) 以上の場合、自動的に `body` に `padding-left` または `padding-right` スタイルを追加して、ページコンテンツがこのコンポーネントに隠れないようにします。 ただし、以下の 2 つの場合はデフォルトで `position: absolute` を使用します： 1. `contained` 属性が `true` の場合。 2. コンポーネントが [``](/ja/docs/2/components/layout) 内にある場合。この場合、`padding-left` または `padding-right` スタイルは追加されません。 ## 例 {#examples} ### 指定されたコンテナ内に配置 {#example-contained} デフォルトでは、ナビゲーションドロワーは現在のウィンドウを基準にしてページの左側または右側に表示されます。ナビゲーションドロワーを指定されたコンテナ内に配置したい場合は、`contained` 属性を追加します。この場合、ナビゲーションドロワーは親要素を基準にして表示されます（親要素にスタイル `position: relative; overflow: hidden;` を自分で追加する必要があります）。 ```html
ナビゲーションドロワーを閉じる
ナビゲーションドロワーを開く
``` ### モーダル化 {#example-modal} `modal` 属性を追加すると、ナビゲーションドロワーを開いた時にオーバーレイレイヤーを表示できます。ウィンドウまたは親要素の幅が [`--mdui-breakpoint-md`](/ja/docs/2/styles/design-tokens#breakpoint) 未満の場合は、このパラメータに関係なく、常にオーバーレイレイヤーが表示されることに注意してください。 `close-on-esc` 属性を追加すると、ESC キーを押した時にナビゲーションドロワーを閉じることができます。 `close-on-overlay-click` 属性を追加すると、オーバーレイレイヤーをクリックした時にナビゲーションドロワーを閉じることができます。 ```html
ナビゲーションドロワーを閉じる
ナビゲーションドロワーを開く
``` ### 右側に配置 {#example-placement} `placement` 属性を `right` に設定すると、ナビゲーションドロワーをページの右側に表示できます。 ```html
ナビゲーションドロワーを閉じる
ナビゲーションドロワーを開く
``` ## mdui-navigation-drawer API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
open open true boolean false

ナビゲーションドロワーを開くかどうかを指定します。
modal modal true boolean false

ナビゲーションドロワーを開くときにオーバーレイを表示するかどうかを指定します。

画面幅が狭いデバイス（画面幅が --mdui-breakpoint-md 未満）では、このパラメータに関係なく常にオーバーレイが表示されます。
close-on-esc closeOnEsc true boolean false

オーバーレイがある場合、ESCキーを押してナビゲーションドロワーを閉じるかどうかを指定します。
close-on-overlay-click closeOnOverlayClick true boolean false

オーバーレイをクリックしたときに、ナビゲーションドロワーを閉じるかどうかを指定します。
placement placement true 'left' | 'right' 'left'

ナビゲーションドロワーの配置位置です。次の値を指定します：

  • left：左側
  • right：右側
contained contained true boolean false

デフォルトでは、ナビゲーションドロワーは body 要素に対して表示されます。この属性を true に設定すると、ナビゲーションドロワーはその親要素に対して表示されます。

注：この属性を設定する場合、親要素に手動でスタイル position: relative; overflow: hidden; を設定する必要があります。
order order true number

<mdui-layout>内における、このコンポーネントのレイアウト順序です。値が小さい順に並びます。デフォルトは 0 です。
### イベント
名前 説明
open

ナビゲーションドロワーが開く前に発生します。event.preventDefault() を呼び出すことで、ナビゲーションドロワーが開くのを防ぐことができます。
opened

ナビゲーションドロワーのオープンアニメーションが完了した後に発生します。
close

ナビゲーションドロワーが閉じる前に発生します。event.preventDefault() を呼び出すことで、ナビゲーションドロワーが閉じるのを防ぐことができます。
closed

ナビゲーションドロワーのクローズアニメーションが完了した後に発生します。
overlay-click

オーバーレイがクリックされたときに発生します。
### Slots
名前 説明
デフォルト

ナビゲーションドロワー内のコンテンツ
### CSS Parts
名前 説明
overlay

オーバーレイ
panel

ナビゲーションドロワーコンテナ
### CSS カスタムプロパティ
名前 説明
--shape-corner

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

コンポーネントのCSS z-index 値
# ナビゲーションレールコンポーネント NavigationRail ナビゲーションレールは、タブレットやデスクトップコンピューターで異なるメインページにアクセスする方法を提供します。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/navigation-rail.js'; import 'mdui/components/navigation-rail-item.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { NavigationRail } from 'mdui/components/navigation-rail.js'; import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js'; ``` 使用例：（例中の `style="position: relative"` はデモンストレーションの必要性によるもので、実際の使用時はこのスタイルを削除してください。） ```html Recent Images Library ``` **注意事項：** このコンポーネントはデフォルトで `position: fixed` を使用し、自動的に `body` に `padding-left` または `padding-right` スタイルを追加して、ページコンテンツがこのコンポーネントに隠れないようにします。 ただし、以下の 2 つの場合はデフォルトで `position: absolute` を使用します： 1. `` コンポーネントの `contained` 属性が `true` の場合。この場合、親要素に `padding-left` または `padding-right` スタイルを追加します。 2. [``](/ja/docs/2/components/layout) コンポーネント内にある場合。この場合、`padding-left` または `padding-right` スタイルは追加されません。 ## 例 {#examples} ### 指定されたコンテナ内に配置 {#example-contained} デフォルトでは、ナビゲーションレールは現在のウィンドウを基準にしてページの左側または右側に表示されます。ナビゲーションレールを指定されたコンテナ内に配置したい場合は、`` コンポーネントに `contained` 属性を追加します。この場合、ナビゲーションレールはその親要素を基準にして表示されます（親要素に `position: relative` スタイルを自分で追加する必要があります）。 ```html
Recent Images Library
ページコンテンツ
``` ### 右側に配置 {#example-placement} `` コンポーネントに `placement` 属性を `right` に設定すると、ナビゲーションレールを右側に表示できます。 ```html
Recent Images Library
ページコンテンツ
``` ### 区切り線の表示 {#example-divider} `` コンポーネントに `divider` 属性を追加すると、ナビゲーションレールに区切り線を追加して、ページコンテンツと区別できます。 ```html
Recent Images Library
ページコンテンツ
``` ### 上部/下部に要素を追加 {#example-top-bottom} `` コンポーネント内で `top`、`bottom` スロットを使用して、上部と下部に要素を追加できます。 ```html
Recent Images Library
ページコンテンツ
``` ### ナビゲーション項目の垂直方向の配置 {#example-alignment} `` コンポーネントの `alignment` 属性を設定することで、ナビゲーション項目の垂直方向の配置を変更できます。 ```html
Recent Images Library
start center end
``` ### アイコン {#example-icon} `` コンポーネントでは、`icon` 属性を使用して未アクティブ状態のナビゲーション項目アイコンを設定し、`active-icon` 属性を使用してアクティブ状態のナビゲーション項目アイコンを設定できます。また、`icon` と `active-icon` スロットを使用して未アクティブ状態とアクティブ状態のアイコン要素を設定することもできます。 ```html
Recent Images Library
ページコンテンツ
``` ### アイコンのみ使用 {#example-no-label} `` コンポーネントはテキストを追加せず、アイコンのみで使用できます。 ```html
ページコンテンツ
``` ### リンク {#example-link} `` コンポーネントに `href` 属性を設定すると、ナビゲーション項目をリンクにできます。この場合、リンク関連の属性 `download`、`target`、`rel` も使用できます。 ```html
Recent Images Library
ページコンテンツ
``` ### バッジ {#example-badge} `` コンポーネントでは、`badge` スロットを使用してバッジを追加できます。 ```html
Recent 99+ Images Library
ページコンテンツ
``` ## mdui-navigation-rail-item API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
icon icon true string

非アクティブ状態のMaterial Iconsアイコン名です。slot="icon" で設定することもできます。
active-icon activeIcon true string

アクティブ状態のMaterial Iconsアイコン名です。slot="active-icon" で設定することもできます。
value value true string

ナビゲーションアイテムの値です。
href href true string

リンク先のURLです。

この属性を設定すると、コンポーネント内部は <a> 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
download download true string

ダウンロードリンクの対象ファイル名です。

注：href 属性が設定されている場合にのみ有効です。
target target true '_blank' | '_parent' | '_self' | '_top'

リンクの開き方です。次の値を指定します：

  • _blank：新しいウィンドウで開く
  • _parent：親フレームで開く
  • _self：デフォルト。現在のフレームで開く
  • _top：最上位のウィンドウで開く

注：href 属性が設定されている場合にのみ有効です。
rel rel true '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 true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
### Slots
名前 説明
デフォルト

テキストコンテンツ
icon

アイコン
active-icon

アクティブ状態のアイコン
badge

バッジ
### CSS Parts
名前 説明
container

ナビゲーションアイテムコンテナ
indicator

インジケーター
badge

バッジ
icon

アイコン
active-icon

アクティブ状態のアイコン
label

テキストコンテンツ
### CSS カスタムプロパティ
名前 説明
--shape-corner-indicator

インジケーターの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
## mdui-navigation-rail API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
value value true string

現在選択されている <mdui-navigation-rail-item> の値です。
placement placement true 'left' | 'right' 'left'

ナビゲーションレールの配置位置です。次の値を指定します：

  • left：左側
  • right：右側
alignment alignment true 'start' | 'center' | 'end' 'start'

<mdui-navigation-rail-item> 要素の配置方法です。次の値を指定します：

  • start：上揃え
  • center：中央揃え
  • end：下揃え
contained contained true boolean false

デフォルトでは、ナビゲーションレールは body 要素に対して表示されます。この属性を true に設定すると、ナビゲーションレールはその親要素に対して表示されます。

注：この属性を設定する場合、親要素に手動でスタイル position: relative; を設定する必要があります。
divider divider true boolean false

ナビゲーションレールとページコンテンツの間に区切り線を追加するかどうかを指定します。
order order true number

<mdui-layout>内における、このコンポーネントのレイアウト順序です。値が小さい順に並びます。デフォルトは 0 です。
### イベント
名前 説明
change

値が変化したときに発生します。
### Slots
名前 説明
デフォルト

<mdui-navigation-rail-item> コンポーネント
top

上部の要素
bottom

下部の要素
### CSS Parts
名前 説明
top

上部要素のコンテナ
bottom

下部要素のコンテナ
items

<mdui-navigation-rail-item> コンポーネントのコンテナ
### CSS カスタムプロパティ
名前 説明
--shape-corner

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

コンポーネントのCSS z-index 値
# ラジオボタンコンポーネント Radio ラジオボタンは、ユーザーがオプションのセットから 1 つを選択できるようにし、一度に 1 つのオプションのみが選択されることを保証します。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/radio-group.js'; import 'mdui/components/radio.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { RadioGroup } from 'mdui/components/radio-group.js'; import type { Radio } from 'mdui/components/radio.js'; ``` 使用例： ```html Chinese English ``` ## 例 {#examples} ### 選択状態 {#example-checked} `` コンポーネントの `value` 属性の値は、現在選択されている `` コンポーネントの `value` 属性の値です。`` コンポーネントの `value` 属性の値を更新することで、現在選択されているラジオボタンを切り替えることもできます。 ```html Chinese English ``` `` コンポーネントを単独で使用することもできます。この場合、`checked` 属性を使用して選択状態を読み取りおよび変更できます。 ```html Radio ``` ### 無効状態 {#example-disabled} `` コンポーネントに `disabled` 属性を追加すると、ラジオボタングループ全体を無効にできます。 ```html Chinese English ``` 特定のラジオボタンを無効にする必要がある場合は、`` コンポーネントに `disabled` 属性を追加します。 ```html Chinese English ``` ### アイコン {#example-icon} `unchecked-icon` と `checked-icon` 属性を設定することで、それぞれ未選択状態と選択状態のラジオボタンの Material Icons アイコンを定義できます。`unchecked-icon` と `checked-icon` スロットを使用して設定することもできます。 ```html Chinese English ``` ## mdui-radio-group API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
disabled disabled true boolean false

このコンポーネントを無効にするかどうかを指定します。
form form true string

関連付ける <form> 要素です。この属性値には、同一ページ内の <form> 要素の id を指定する必要があります。

この属性が指定されていない場合、この要素は <form> 要素の子要素である必要があります。この属性を使用すると、要素を <form> 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
name name true string ''

ラジオボタングループの名前です。フォームデータと共に送信されます。
value value true string ''

ラジオボタングループで現在選択されている値です。フォームデータと共に送信されます。
undefined defaultValue false string ''

デフォルトで選択される値です。フォームをリセットすると、このデフォルト値にリセットされます。この属性はJavaScriptプロパティでのみ設定できます。
required required true boolean false

フォーム送信時に、いずれかのラジオボタンを選択する必要があるかどうかを指定します。
undefined validity false ValidityState

フォーム検証ステータスを表す ValidityState オブジェクトです。詳細は ValidityState を参照してください。
undefined validationMessage false string

フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
### メソッド
名前 説明
checkValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。
reportValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。

検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
setCustomValidity(message: string): void

カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
### イベント
名前 説明
change

選択された値が変化したときに発生します。
input

選択された値が変化したときに発生します。
invalid

フォームフィールドの検証に合格しなかったときに発生します。
### Slots
名前 説明
デフォルト

<mdui-radio> 要素
## mdui-radio API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
value value true string ''

現在のラジオオプションの値です。
disabled disabled true boolean false

現在のラジオオプションを無効にするかどうかを指定します。
checked checked true boolean false

現在のラジオオプションが選択されているかどうかを指定します。
unchecked-icon uncheckedIcon true string

非選択状態のMaterial Iconsアイコン名です。slot="unchecked-icon" で設定することもできます。
checked-icon checkedIcon true string

選択状態のMaterial Iconsアイコン名です。slot="checked-icon" で設定することもできます。
autofocus autofocus true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
change

このラジオオプションが選択されたときに発生します。
### Slots
名前 説明
デフォルト

テキストコンテンツ
unchecked-icon

非選択状態のアイコン
checked-icon

選択状態のアイコン
### CSS Parts
名前 説明
control

左側のアイコンコンテナ
unchecked-icon

非選択状態のアイコン
checked-icon

選択状態のアイコン
label

テキストコンテンツ
# レンジスライダーコンポーネント RangeSlider レンジスライダーコンポーネントは、ユーザーが一連の値から範囲を選択できるようにするために使用されます。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/range-slider.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { RangeSlider } from 'mdui/components/range-slider.js'; ``` 使用例： ```html ``` ## 例 {#examples} ### デフォルト値 {#example-value} `value` 属性を使用して、レンジスライダーの現在の値を読み取りまたは設定できます。この属性の値は配列であり、JavaScript プロパティを通じてのみ読み取りと設定ができます。 ```html ``` ### 無効状態 {#example-disabled} `disabled` 属性を追加すると、レンジスライダーを無効にできます。 ```html ``` ### 範囲 {#example-min-max} `min` と `max` 属性を使用して、レンジスライダーの最小値と最大値を設定します。 ```html ``` ### ステップ間隔 {#example-step} `step` 属性を使用して、レンジスライダーのステップ間隔を設定します。 ```html ``` ### 目盛りマーク {#example-tickmarks} `tickmarks` 属性を追加すると、レンジスライダーに目盛りマークを追加できます。 ```html ``` ### テキストヒントを非表示 {#example-nolabel} `nolabel` 属性を追加すると、レンジスライダー上のテキストヒントを非表示にできます。 ```html ``` ### テキストヒントを変更 {#example-labelFormatter} `labelFormatter` JavaScript プロパティを使用して、テキストヒントの表示形式を変更できます。このプロパティの値は関数で、関数のパラメータはレンジスライダーの現在の値で、戻り値は表示したいテキストです。 ```html ``` ## mdui-range-slider API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
undefined defaultValue false number[] []

デフォルト値です。フォームをリセットすると、このデフォルト値にリセットされます。この属性はJavaScriptプロパティでのみ設定できます。
undefined value false number[]

スライダーの値です。配列形式で、フォームデータと共に送信されます。

注：この属性はHTML属性で初期値を設定することはできません。この値を変更するには、JavaScriptプロパティ値を変更する必要があります。
autofocus autofocus true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
min min true number 0

スライダーの最小値です。デフォルトは 0 です。
max max true number 100

スライダーの最大値です。デフォルトは 100 です。
step step true number 1

ステップ間隔です。デフォルトは 1 です。
tickmarks tickmarks true boolean false

目盛りを表示するかどうかを指定します。
nolabel nolabel true boolean false

テキストヒントを非表示にするかどうかを指定します。
disabled disabled true boolean false

無効状態にするかどうかを指定します。
form form true string

関連付ける <form> 要素です。この属性値には、同一ページ内の <form> 要素の id を指定する必要があります。

この属性が指定されていない場合、この要素は <form> 要素の子要素である必要があります。この属性を使用すると、要素を <form> 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
name name true string ''

スライダーの名前です。フォームデータと共に送信されます。
undefined validity false ValidityState

フォーム検証ステータスを表す ValidityState オブジェクトです。詳細は ValidityState を参照してください。
undefined validationMessage false string

フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
undefined labelFormatter false (value: number) => string

ラベルの表示形式をカスタマイズするための関数です。関数の引数はスライダーの現在の値で、戻り値は表示するテキストです。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
checkValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。
reportValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。

検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
setCustomValidity(message: string): void

カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
change

値が変更され、フォーカスを失ったときに、このイベントが発生します。
input

値が変更されたときに発生します。
invalid

フォームフィールドの検証に合格しなかったときに発生します。
### CSS Parts
名前 説明
track-inactive

非アクティブ状態のトラック
track-active

アクティブ状態のトラック
handle

操作レバー
label

ヒントテキスト
tickmark

目盛り
# セレクトコンポーネント Select ドロップダウンセレクトコンポーネントは、ドロップダウンメニューで複数のオプションを提供し、ユーザーが必要なコンテンツを素早く選択できるようにします。 このページでは主に `` コンポーネントの使用方法について説明します。ドロップダウンメニュー項目の使用方法については、[``](/ja/docs/2/components/menu#menu-item-api) を参照してください。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/select.js'; import 'mdui/components/menu-item.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Select } from 'mdui/components/select.js'; import type { MenuItem } from 'mdui/components/menu-item.js'; ``` 使用例： ```html Item 1 Item 2 ``` ## 例 {#examples} ### 形状 {#example-variant} `variant` 属性を使用してドロップダウンセレクトの形状を設定します。 ```html Item 1 Item 2 Item 1 Item 2 ``` ### 複数選択のサポート {#example-multiple} ドロップダウンセレクトはデフォルトで単一選択です。`` コンポーネントの `value` 値は、現在選択されている [``](/ja/docs/2/components/menu#menu-item-api) の `value` 値です。 `multiple` 属性を追加すると、ドロップダウンセレクトで複数選択をサポートできます。この場合、`` の `value` 値は、現在選択されている [``](/ja/docs/2/components/menu#menu-item-api) の `value` 値からなる配列になります。 注意：複数選択をサポートする場合、`` の `value` 値は配列であり、JavaScript プロパティを通じてのみ読み取りと設定ができます。 ```html Item 1 Item 2 Item 3 ``` ### 補助テキスト {#example-helper-text} `label` 属性を使用してドロップダウンセレクトの上にラベルテキストを設定します。 ```html Item 1 Item 2 ``` `placeholder` 属性を使用して、値が選択されていない時のプレースホルダーテキストを設定します。 ```html Item 1 Item 2 ``` `helper` 属性を使用してドロップダウンセレクトの下部にヘルプテキストを設定します。`helper` スロットを使用してヘルプテキストを設定することもできます。 ```html Item 1 Item 2 Item 1 Item 2 Supporting text ``` ### 読み取り専用モード {#example-readonly} `readonly` 属性を追加することで、ドロップダウンセレクトを読み取り専用モードに設定できます。 ```html Item 1 Item 2 ``` ### 無効モード {#example-disabled} `disabled` 属性を追加することで、ドロップダウンセレクトを無効にできます。 ```html Item 1 Item 2 ``` ### クリア可能 {#example-clearable} `clearable` 属性を追加すると、ドロップダウンセレクトに値がある場合、右側にクリアボタンが表示されます。 ```html Item 1 Item 2 ``` `clear` スロットを使用してクリアボタンをカスタマイズすることもできます。 ```html Item 1 Item 2 ``` ### ドロップダウンメニューの位置 {#example-placement} `placement` 属性を使用して、ドロップダウンメニューの位置を設定できます。 ```html Item 1 Item 2 ``` ### テキスト右揃え {#example-end-aligned} `end-aligned` 属性を追加すると、テキストが右揃えになります。 ```html Item 1 Item 2 ``` ### 前後のテキストとアイコン {#example-prefix-suffix} `icon` と `end-icon` 属性を設定することで、ドロップダウンセレクトの左側と右側に Material Icons アイコンを追加できます。`icon` と `end-icon` スロットを使用してドロップダウンセレクトの左側と右側に要素を追加することもできます。 ```html Item 1 Item 2

Item 1 Item 2 ``` `prefix` と `suffix` 属性を設定することで、ドロップダウンセレクトの左側と右側にテキストを追加できます。`prefix` と `suffix` スロットを使用してドロップダウンセレクトの左側と右側にテキスト要素を追加することもできます。これらのテキストは、ドロップダウンセレクトがフォーカスされているか値がある場合にのみ表示されます。 ```html Item 1 Item 2

Item 1 Item 2 $ /100 ``` ## mdui-select API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
variant variant true 'filled' | 'outlined' 'filled'

セレクトボックスのスタイルです。次の値を指定します：

  • filled：背景色付きセレクトボックス。視覚的な強調度が高いです。
  • outlined：枠線付きセレクトボックス。視覚的な強調度が低いです。
multiple multiple true boolean false

複数選択をサポートするかどうかを指定します。
name name true string ''

セレクトボックスの名前です。フォームデータと共に送信されます。
value value false string | string[] ''

セレクトボックスの値です。フォームデータと共に送信されます。

multiple 属性が指定されていない場合、この値は文字列です。multiple 属性が指定されている場合、この値は文字列の配列です。HTML属性では文字列値のみ設定できます。配列値を設定する必要がある場合は、JavaScriptプロパティで設定してください。
undefined defaultValue false string | string[] ''

デフォルトで選択される値です。フォームをリセットすると、このデフォルト値にリセットされます。この属性はJavaScriptプロパティでのみ設定できます。
label label true string

ラベルテキストです。
placeholder placeholder true string

プレースホルダーテキストです。
helper helper true string

セレクトボックス下部のヘルプテキストです。slot="helper" で設定することもできます。
clearable clearable true boolean false

セレクトボックスをクリア可能にするかどうかを指定します。
clear-icon clearIcon true string

セレクトボックスがクリア可能な場合に、右側に表示されるクリアボタンのMaterial Iconsアイコン名です。slot="clear-icon" で設定することもできます。
placement placement true 'auto' | 'bottom' | 'top' 'auto'

セレクトボックスの配置位置です。次の値を指定します：

  • auto：位置を自動判断
  • bottom：下に配置
  • top：上に配置
end-aligned endAligned true boolean false

テキストを右揃えにするかどうかを指定します。
prefix prefix true string

セレクトボックスの接頭辞テキストです。フォーカス時、または値がある場合にのみ表示されます。slot="prefix" で設定することもできます。
suffix suffix true string

セレクトボックスの接尾辞テキストです。フォーカス時、または値がある場合にのみ表示されます。slot="suffix" で設定することもできます。
icon icon true string

セレクトボックスの接頭辞アイコンのMaterial Iconsアイコン名です。slot="icon" で設定することもできます。
end-icon endIcon true string

セレクトボックスの接尾辞アイコンのMaterial Iconsアイコン名です。slot="end-icon" で設定することもできます。
error-icon errorIcon true string

フォームフィールドの検証に失敗した場合に、セレクトボックスの右側に表示されるMaterial Iconsアイコン名です。slot="error-icon" で設定することもできます。
form form true string

関連付ける <form> 要素です。この属性値には、同一ページ内の <form> 要素の id を指定する必要があります。

この属性が指定されていない場合、この要素は <form> 要素の子要素である必要があります。この属性を使用すると、要素を <form> 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
readonly readonly true boolean false

読み取り専用状態にするかどうかを指定します。
disabled disabled true boolean false

無効状態にするかどうかを指定します。
required required true boolean false

フォーム送信時に、このフィールドを必須にするかどうかを指定します。
undefined validity false ValidityState

フォーム検証ステータスを表す ValidityState オブジェクトです。詳細は ValidityState を参照してください。
undefined validationMessage false string

フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
autofocus autofocus true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
### メソッド
名前 説明
checkValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。
reportValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。

検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
setCustomValidity(message: string): void

カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
change

選択された値が変更されたときに発生します。
invalid

フォームフィールドの検証に合格しなかったときに発生します。
clear

clearable 属性によって生成されたクリアボタンがクリックされたときに発生します。event.preventDefault() を呼び出すことで、セレクトボックスがクリアされるのを防ぐことができます。
### Slots
名前 説明
デフォルト

<mdui-menu-item> 要素
icon

左側のアイコン
end-icon

右側のアイコン
error-icon

検証失敗状態の右側のアイコン
prefix

左側のテキスト
suffix

右側のテキスト
clear-button

クリアボタン
clear-icon

クリアボタン内のアイコン
helper

下部のヘルプテキスト
### CSS Parts
名前 説明
chips

複数選択時に、選択された値に対応するチップを配置するコンテナ
chip

複数選択時に、選択された各値に対応するチップ
chip__button

チップ内部の <button> 要素
chip__label

チップ内部のテキスト
chip__delete-icon

チップ内部の削除アイコン
text-field

テキストフィールド。つまり <mdui-text-field> 要素
text-field__container

text-field 内部のテキストフィールドコンテナ
text-field__icon

text-field 内部の左側のアイコン
text-field__end-icon

text-field 内部の右側のアイコン
text-field__error-icon

text-field 内部の検証失敗状態の右側のアイコン
text-field__prefix

text-field 内部の左側のテキスト
text-field__suffix

text-field 内部の右側のテキスト
text-field__label

text-field 内部のラベルテキスト
text-field__input

text-field 内部の <input> 要素
text-field__clear-button

text-field 内部のクリアボタン
text-field__clear-icon

text-field 内部のクリアボタン内のアイコン
text-field__supporting

text-field 内部の下部補助情報コンテナ（helper と error を含む）
text-field__helper

text-field 内部の下部ヘルプテキスト
text-field__error

text-field 内部の下部エラー説明テキスト
menu

ドロップダウンメニュー。つまり <mdui-menu> 要素
# セグメントボタンコンポーネント SegmentedButton セグメントボタンコンポーネントは、一連のボタンをグループ化し、オプションの提供、ビューの切り替え、要素の並べ替えなどに使用されます。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/segmented-button-group.js'; import 'mdui/components/segmented-button.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { SegmentedButtonGroup } from 'mdui/components/segmented-button-group.js'; import type { SegmentedButton } from 'mdui/components/segmented-button.js'; ``` 使用例： ```html Day Week Month ``` ## 例 {#examples} ### 全幅表示 {#example-full-width} `` 要素に `full-width` 属性を追加すると、コンポーネントが全幅を占めるようになります。 ```html Day Week Month ``` ### 単一選択モード {#example-selects-single} `` 要素で `selects` 属性を `single` に指定すると、単一選択モードを実現できます。この場合、`` の `value` 属性の値は、現在選択されている `` の `value` 属性の値になります。 ```html Day Week Month Day Week Month ``` ### 複数選択モード {#example-selects-multiple} `` 要素で `selects` 属性を `multiple` に指定すると、複数選択モードを実現できます。この場合、`` の `value` 属性の値は、現在選択されている `` の `value` 属性の値からなる配列になります。 注意：複数選択モードでは、`` の `value` 属性の値は配列であり、JavaScript プロパティを通じてのみ読み取りと設定ができます。 ```html Day Week Month Day Week Month ``` ### アイコン {#example-icon} `` 要素で `icon` と `end-icon` 属性を設定すると、ボタンの左側と右側に Material Icons アイコンを追加できます。また、`icon` と `end-icon` スロットを使用してボタンの左側と右側に要素を追加することもできます。 ```html Day Week Month ``` `` 要素に `selected-icon` 属性を追加することで、選択状態の Material Icons アイコンを設定できます。`selected-icon` スロットを使用して設定することもできます。 ```html Day Week ``` ### リンク {#example-link} `` 要素に `href` 属性を設定すると、ボタンをリンクに変換できます。この場合、リンク関連の属性 `download`、`target`、`rel` も使用できます。 ```html Link Week Month ``` ### 無効およびローディング状態 {#example-disabled} `` 要素に `disabled` 属性を追加すると、セグメントボタングループ全体を無効にできます。 ```html Day Week Month ``` `` 要素に `disabled` 属性を追加すると、特定のボタンを無効にできます；`loading` 属性を追加すると、特定のボタンにローディング状態を追加できます。 ```html Day Week Month Year ``` ## mdui-segmented-button-group API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
full-width fullWidth true boolean false

親要素の幅いっぱいに広げるかどうかを指定します。
selects selects true 'single' | 'multiple'

セグメントボタンの選択可能状態です。デフォルトは選択不可です。次の値を指定します：

  • single：単一選択
  • multiple：複数選択
disabled disabled true boolean false

無効状態にするかどうかを指定します。
required required true boolean false

フォーム送信時に、選択を必須にするかどうかを指定します。
form form true string

関連付ける <form> 要素です。この属性値には、同一ページ内の <form> 要素の id を指定する必要があります。

この属性が指定されていない場合、この要素は <form> 要素の子要素である必要があります。この属性を使用すると、要素を <form> 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
name name true string ''

フォーム送信時の名前です。フォームデータと共に送信されます。
value value false string | string[] ''

現在選択されている <mdui-segmented-button> の値です。

注：この属性のHTML属性値は常に文字列として扱われ、selects="single" の場合にのみHTML属性で初期値を設定できます。この属性のJavaScriptプロパティ値は、selects="single" の場合は文字列、selects="multiple" の場合は文字列の配列になります。したがって、selects="multiple" の場合にこの値を変更するには、JavaScriptプロパティ値を変更する必要があります。
undefined defaultValue false string | string[] ''

デフォルトで選択される値です。フォームをリセットすると、このデフォルト値にリセットされます。この属性はJavaScriptプロパティでのみ設定できます。
undefined validity false ValidityState

フォーム検証ステータスを表す ValidityState オブジェクトです。詳細は ValidityState を参照してください。
undefined validationMessage false string

フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
### メソッド
名前 説明
checkValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。
reportValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。

検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
setCustomValidity(message: string): void

カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
### イベント
名前 説明
change

選択された値が変更されたときに発生します。
invalid

フォームフィールドの検証に合格しなかったときに発生します。
### Slots
名前 説明
デフォルト

<mdui-segmented-button> コンポーネント
### CSS カスタムプロパティ
名前 説明
--shape-corner

コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
## mdui-segmented-button API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
icon icon true string

左側に表示するMaterial Iconsのアイコン名です。slot="icon" で設定することもできます。
end-icon endIcon true string

右側に表示するMaterial Iconsのアイコン名です。slot="end-icon" で設定することもできます。
selected-icon selectedIcon true string

選択状態のMaterial Iconsアイコン名です。slot="selected-icon" で設定することもできます。
href href true string

リンク先のURLです。

この属性を設定すると、コンポーネント内部は <a> 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
download download true string

ダウンロードリンクの対象ファイル名です。

注：href 属性が設定されている場合にのみ有効です。
target target true '_blank' | '_parent' | '_self' | '_top'

リンクの開き方です。次の値を指定します：

  • _blank：新しいウィンドウで開く
  • _parent：親フレームで開く
  • _self：デフォルト。現在のフレームで開く
  • _top：最上位のウィンドウで開く

注：href 属性が設定されている場合にのみ有効です。
rel rel true '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 true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
disabled disabled true boolean false

無効状態にするかどうかを指定します。
loading loading true boolean false

読み込み中状態にするかどうかを指定します。
name name true string ''

ボタンの名前です。フォームデータと共に送信されます。

注：href 属性が設定されていない場合にのみ有効です。
value value true string ''

ボタンの初期値です。フォームデータと共に送信されます。

注：href 属性が設定されていない場合にのみ有効です。
type type true 'submit' | 'reset' | 'button' 'button'

ボタンのタイプです。デフォルトのタイプは button です。次のタイプを指定します：

  • submit：ボタンをクリックするとフォームデータがサーバーに送信されます
  • reset：ボタンをクリックするとフォーム内のすべてのフィールドが初期値にリセットされます
  • button：このタイプのボタンにはデフォルトの動作はありません

注：href 属性が指定されていない場合にのみ有効です。
form form true string

関連付ける <form> 要素です。この属性値には、同一ページ内の <form> 要素の id を指定する必要があります。

この属性が指定されていない場合、この要素は <form> 要素の子要素である必要があります。この属性を使用すると、要素を <form> 要素の子要素だけでなく、ページ上の任意の場所に配置できます。

注：href 属性が指定されていない場合にのみ有効です。
formaction formAction true string

フォーム送信先のURLを指定します。

この属性が指定されている場合、<form> 要素の action 属性は上書きされます。

注：href 属性が指定されておらず、かつ type="submit" の場合にのみ有効です。
formenctype formEnctype true '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 true 'post' | 'get'

フォーム送信時に使用するHTTPメソッドを指定します。次の値を指定します：

  • post：フォームデータはフォームコンテンツに含まれてサーバーに送信されます
  • get：フォームデータは ? 区切りでフォームのURI属性に追加され、生成されたURIがサーバーに送信されます。フォームに副作用がなく、ASCII文字のみを含む場合にこのメソッドを使用します

この属性が設定されている場合、<form> 要素の method 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
formnovalidate formNoValidate true boolean false

この属性が設定されている場合、フォーム送信時にフォーム検証は実行されません。

この属性が設定されている場合、<form> 要素の novalidate 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
formtarget formTarget true '_self' | '_blank' | '_parent' | '_top'

フォーム送信後に受信したレスポンスを表示する場所を指定します。次の値を指定します：

  • _self：デフォルトのオプション。現在のフレームで開きます
  • _blank：新しいウィンドウで開きます
  • _parent：親フレームで開きます
  • _top：最上位のウィンドウで開きます

この属性が設定されている場合、<form> 要素の target 属性は上書きされます。

注：href 属性が設定されておらず、かつ type="submit" の場合にのみ有効です。
undefined validity false ValidityState

フォーム検証ステータスを表す ValidityState オブジェクトです。詳細は ValidityState を参照してください。
undefined validationMessage false string

フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
checkValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。
reportValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。

検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
setCustomValidity(message: string): void

カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
invalid

フォームフィールドの検証に合格しなかったときに発生します。
### Slots
名前 説明
デフォルト

セグメントボタンアイテムのテキストコンテンツ
icon

セグメントボタンアイテムの左側のアイコン
selected-icon

選択状態の左側のアイコン
end-icon

セグメントボタンアイテムの右側のアイコン
### CSS Parts
名前 説明
button

内部の <button> または <a> 要素
icon

左側のアイコン
selected-icon

選択状態の左側のアイコン
end-icon

右側のアイコン
label

テキストコンテンツ
loading

読み込み中状態の <mdui-circular-progress> 要素
# スライダーコンポーネント Slider スライダーコンポーネントは、ユーザーがスライダーをスライドさせて一連の値から選択できるようにします。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/slider.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Slider } from 'mdui/components/slider.js'; ``` 使用例： ```html ``` ## 例 {#examples} ### デフォルト値 {#example-value} `value` 属性を使用して、スライダーの現在の値を読み取りまたは設定できます。 ```html ``` ### 無効状態 {#example-disabled} `disabled` 属性を追加すると、スライダーを無効にできます。 ```html ``` ### 範囲 {#example-min-max} `min` と `max` 属性を使用して、スライダーの最小値と最大値を設定します。 ```html ``` ### ステップ間隔 {#example-step} `step` 属性を使用して、スライダーのステップ間隔を設定できます。 ```html ``` ### 目盛りマーク {#example-tickmarks} `tickmarks` 属性を追加すると、スライダーに目盛りマークを表示できます。 ```html ``` ### テキストヒントを非表示 {#example-nolabel} スライダー上のテキストヒントを非表示にしたい場合は、`nolabel` 属性を追加します。 ```html ``` ### テキストヒントを変更 {#example-labelFormatter} `labelFormatter` JavaScript プロパティを使用して、テキストヒントの表示形式を変更できます。このプロパティの値は関数で、その関数は現在のスライダーの値を受け取り、表示したいテキストを返します。 ```html ``` ## mdui-slider API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
value value false number 0

スライダーの値です。フォームデータと共に送信されます。
undefined defaultValue false number 0

デフォルト値です。フォームをリセットすると、このデフォルト値にリセットされます。この属性はJavaScriptプロパティでのみ設定できます。
autofocus autofocus true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
min min true number 0

スライダーの最小値です。デフォルトは 0 です。
max max true number 100

スライダーの最大値です。デフォルトは 100 です。
step step true number 1

ステップ間隔です。デフォルトは 1 です。
tickmarks tickmarks true boolean false

目盛りを表示するかどうかを指定します。
nolabel nolabel true boolean false

テキストヒントを非表示にするかどうかを指定します。
disabled disabled true boolean false

無効状態にするかどうかを指定します。
form form true string

関連付ける <form> 要素です。この属性値には、同一ページ内の <form> 要素の id を指定する必要があります。

この属性が指定されていない場合、この要素は <form> 要素の子要素である必要があります。この属性を使用すると、要素を <form> 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
name name true string ''

スライダーの名前です。フォームデータと共に送信されます。
undefined validity false ValidityState

フォーム検証ステータスを表す ValidityState オブジェクトです。詳細は ValidityState を参照してください。
undefined validationMessage false string

フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
undefined labelFormatter false (value: number) => string

ラベルの表示形式をカスタマイズするための関数です。関数の引数はスライダーの現在の値で、戻り値は表示するテキストです。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
checkValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。
reportValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。

検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
setCustomValidity(message: string): void

カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
change

値が変更され、フォーカスを失ったときに、このイベントが発生します。
input

値が変更されたときに発生します。
invalid

フォームフィールドの検証に合格しなかったときに発生します。
### CSS Parts
名前 説明
track-inactive

非アクティブ状態のトラック
track-active

アクティブ状態のトラック
handle

操作レバー
label

ヒントテキスト
tickmark

目盛り
# Snackbar コンポーネント スナックバーコンポーネントは、ページ上で簡潔なアプリケーションプロセスの情報を表示するために使用します。 このコンポーネントを直接使用する以外に、mdui は [`mdui.snackbar`](/ja/docs/2/functions/snackbar) 関数も提供しており、Snackbar コンポーネントの使用を簡単にできます。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/snackbar.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Snackbar } from 'mdui/components/snackbar.js'; ``` 使用例： ```html Photo archived Snackbar を開く ``` ## 例 {#examples} ### 位置 {#example-placement} `placement` 属性を使用して、Snackbar の表示位置を設定できます。 ```html
Photo archived top-start Photo archived top Photo archived top-end
Photo archived bottom-start Photo archived bottom Photo archived bottom-end
``` ### アクションボタン {#example-action} `action` 属性を使用すると、Snackbar の右側にアクションボタンを追加できます。この属性でボタンのテキストを指定します。アクションボタンをクリックすると `action-click` イベントが発生します。アクションボタンをローディング状態で表示したい場合は、`action-loading` 属性を追加します。 ```html Photo archived Snackbar を開く ``` `action` スロットを使用して、Snackbar の右側にカスタム要素を追加することもできます。 ```html Photo archived Undo Snackbar を開く ``` ### クローズ可能 {#example-closeable} `closeable` 属性を追加すると、Snackbar の右側に閉じるボタンが表示されます。このボタンをクリックすると Snackbar が閉じ、`close` イベントが発生します。 ```html Photo archived Snackbar を開く ``` `close-button` スロットを使用して、閉じるボタンの要素をカスタマイズできます。 ```html Photo archived Snackbar を開く ``` `close-icon` 属性を設定することで、デフォルトの閉じるボタン内の Material Icons アイコンを変更できます。`close-icon` スロットを使用して閉じるボタン内のアイコン要素をカスタマイズすることもできます。 ```html Photo archived Snackbar を開く ``` ### テキスト行数 {#example-message-line} デフォルトでは、メッセージテキストに行数制限はありません。`message-line` 属性を使用してテキスト行数を制限できます。最大 2 行まで設定できます。 ```html The item already has the label "travel". You can add a new label. You can add a new label. Snackbar を開く ``` ### 自動クローズ遅延 {#example-auto-close-delay} `auto-close-delay` 属性を使用して、自動的に閉じるまでの遅延時間をミリ秒単位で設定できます。デフォルト値は 5000 ミリ秒です。 ```html Photo archived Snackbar を開く ``` ### 外部領域クリックで閉じる {#example-close-on-outside-click} `close-on-outside-click` 属性を追加すると、Snackbar の外部領域をクリックした時に Snackbar を閉じるように設定できます。 ```html Photo archived Snackbar を開く ``` ## mdui-snackbar API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
open open true boolean false

スナックバーを表示するかどうかを指定します。
placement placement true 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' 'bottom'

スナックバーの表示位置です。既定値は bottom です。次の値を指定します：

  • top：上部中央
  • top-start：上部左揃え
  • top-end：上部右揃え
  • bottom：下部中央
  • bottom-start：下部左揃え
  • bottom-end：下部右揃え
action action true string

操作ボタンのテキストです。slot="action" で操作ボタンを設定することもできます。
action-loading actionLoading true boolean false

操作ボタンを読み込み中状態にするかどうかを指定します。
closeable closeable true boolean false

右側に閉じるボタンを表示するかどうかを指定します。
close-icon closeIcon true string

閉じるボタンのMaterial Iconsアイコン名です。slot="close-icon" で設定することもできます。
message-line messageLine true 1 | 2

メッセージテキストの最大表示行数です。既定値は制限なしです。次の値を指定します：

  • 1：最大1行表示
  • 2：最大2行表示
auto-close-delay autoCloseDelay true number 5000

自動で閉じるまでの遅延時間（ミリ秒単位）です。0 に設定すると自動では閉じません。既定値は5000ミリ秒です。
close-on-outside-click closeOnOutsideClick true boolean false

スナックバー以外の領域をクリックまたはタッチしたときに、スナックバーを閉じるかどうかを指定します。
### イベント
名前 説明
open

スナックバーが表示を開始したときに発生するイベントです。event.preventDefault() を呼び出すことで、スナックバーの表示を防ぐことができます。
opened

スナックバーの表示アニメーションが完了したときに発生するイベントです。
close

スナックバーが非表示を開始したときに発生するイベントです。event.preventDefault() を呼び出すことで、スナックバーが閉じるのを防ぐことができます。
closed

スナックバーの非表示アニメーションが完了したときに発生するイベントです。
action-click

操作ボタンがクリックされたときに発生します。
### Slots
名前 説明
デフォルト

スナックバーのメッセージテキストコンテンツ
action

右側の操作ボタン
close-button

右側の閉じるボタン。closeable 属性が true の場合にのみ表示されます。
close-icon

閉じるボタン内のアイコン
### CSS Parts
名前 説明
message

メッセージテキスト
action

操作ボタン
close-button

閉じるボタン
close-icon

閉じるボタン内のアイコン
### CSS カスタムプロパティ
名前 説明
--shape-corner

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

コンポーネントのCSS z-index 値
# Switch コンポーネント スイッチコンポーネントは、単一オプションのオンまたはオフ状態を切り替えるために使用され、直感的なインタラクションデザインで、ユーザーが簡単に設定を調整できるようにします。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/switch.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Switch } from 'mdui/components/switch.js'; ``` 使用例： ```html ``` ## 例 {#examples} ### オン状態 {#example-checked} スイッチがオンになると、`checked` 属性の値は `true` になります。`checked` 属性を追加することで、スイッチをデフォルトでオン状態にすることもできます。 ```html ``` ### 無効状態 {#example-disabled} `disabled` 属性を追加することで、スイッチコンポーネントを無効にできます。 ```html ``` ### アイコン {#example-icon} `unchecked-icon` 属性を使用してオフ状態の Material Icons アイコンを設定し、`checked-icon` 属性を使用してオン状態の Material Icons アイコンを設定できます。`unchecked-icon` と `checked-icon` スロットを使用してオフ状態とオン状態のアイコン要素をカスタマイズすることもできます。 ```html ``` ## mdui-switch API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
disabled disabled true boolean false

無効状態にするかどうかを指定します。
checked checked true boolean false

選択状態にするかどうかを指定します。
undefined defaultChecked false boolean false

デフォルトの選択状態です。フォームをリセットすると、この状態に戻ります。この属性はJavaScriptプロパティでのみ設定できます。
unchecked-icon uncheckedIcon true string

非選択状態のMaterial Iconsアイコン名です。slot="unchecked-icon" で設定することもできます。
checked-icon checkedIcon true string

選択状態のMaterial Iconsアイコン名です。slot="checked-icon" で設定することもできます。

既定値は check アイコンです。空の文字列を渡すと既定のアイコンを削除できます。
required required true boolean false

フォーム送信時に、このスイッチの選択を必須にするかどうかを指定します。
form form true string

関連付ける <form> 要素です。この属性値には、同一ページ内の <form> 要素の id を指定する必要があります。

この属性が指定されていない場合、この要素は <form> 要素の子要素である必要があります。この属性を使用すると、要素を <form> 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
name name true string ''

スイッチの名前です。フォームデータと共に送信されます。
value value true string 'on'

スイッチの値です。フォームデータと共に送信されます。
undefined validity false ValidityState

フォーム検証ステータスを表す ValidityState オブジェクトです。詳細は ValidityState を参照してください。
undefined validationMessage false string

フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
autofocus autofocus true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
### メソッド
名前 説明
checkValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。
reportValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。

検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
setCustomValidity(message: string): void

カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
change

選択状態が変更されたときに発生します。
input

選択状態が変更されたときに発生します。
invalid

フォームフィールドの検証に合格しなかったときに発生します。
### Slots
名前 説明
unchecked-icon

非選択状態の要素
checked-icon

選択状態の要素
### CSS Parts
名前 説明
track

トラック
thumb

アイコンコンテナ
unchecked-icon

非選択状態のアイコン
checked-icon

選択状態のアイコン
### CSS カスタムプロパティ
名前 説明
--shape-corner

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

コンポーネントのアイコンコンテナの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
# Tabs コンポーネント タブコンポーネントは、コンテンツやデータセットをグループ化して表示するために使用され、ユーザーが異なるカテゴリ間で素早く切り替えられるようにします。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/tabs.js'; import 'mdui/components/tab.js'; import 'mdui/components/tab-panel.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Tabs } from 'mdui/components/tabs.js'; import type { Tab } from 'mdui/components/tab.js'; import type { TabPanel } from 'mdui/components/tab-panel.js'; ``` 使用例： ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ## 例 {#examples} ### タブスタイル {#example-variant} `` コンポーネントで `variant` 属性を使用することで、タブのスタイルを設定できます。 ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### タブの位置 {#example-placement} `` コンポーネントで `placement` 属性を使用することで、タブの位置を設定できます。 ```html top-start top top-end bottom-start bottom bottom-end left-start left left-end right-start right right-end Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### 全幅表示 {#example-full-width} `` コンポーネントに `full-width` 属性を追加すると、タブが全幅を占めるようになり、各タブは幅を均等に配分します。 ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### アイコン {#example-icon} `` コンポーネントに `icon` 属性を設定すると、タブに Material Icons アイコンを追加できます。`icon` スロットを使用してアイコン要素を追加することもできます。 `inline` 属性を追加すると、アイコンとテキストを水平に配置できます。 ```html Tab 1 Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### バッジ {#example-badge} `` コンポーネントでは、`badge` スロットを使用してバッジを追加できます。 ```html Tab 1 99+ Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ### カスタムコンテンツ {#example-custom} `` コンポーネントで `custom` スロットを使用すると、タブのコンテンツを完全にカスタマイズできます。 ```html Tab 1 Icon Tab 2 Tab 3 Panel 1 Panel 2 Panel 3 ``` ## mdui-tab-panel API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
value value true string

タブパネルアイテムの値です。
### Slots
名前 説明
デフォルト

タブパネルアイテムの内容
## mdui-tab API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
value value true string

タブナビゲーションアイテムの値です。
icon icon true string

Material Iconsのアイコン名です。slot="icon" で設定することもできます。
inline inline true boolean false

アイコンとテキストを水平に並べるかどうかを指定します。
autofocus autofocus true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
### メソッド
名前 説明
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
### Slots
名前 説明
デフォルト

タブナビゲーションアイテムのテキストコンテンツ
icon

タブナビゲーションアイテム内のアイコン
badge

バッジ
custom

タブナビゲーションアイテム全体の内容をカスタマイズします。
### CSS Parts
名前 説明
container

タブナビゲーションアイテムコンテナ
icon

タブナビゲーションアイテム内のアイコン
label

タブナビゲーションアイテムのテキスト
## mdui-tabs API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
variant variant true 'primary' | 'secondary' 'primary'

タブの形状です。次の値を指定します：

  • primary：<mdui-top-app-bar> の下に配置され、アプリのメインページを切り替える場合に適しています。
  • secondary：ページ内に配置され、関連するコンテンツのセットを切り替える場合に適しています。
value value true string

現在アクティブな <mdui-tab> の値です。
placement placement true 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'top-start'

タブの配置位置です。既定値は top-start です。次の値を指定します：

  • top-start：上部、左揃え
  • top：上部、中央揃え
  • top-end：上部、右揃え
  • bottom-start：下部、左揃え
  • bottom：下部、中央揃え
  • bottom-end：下部、右揃え
  • left-start：左側、上揃え
  • left：左側、中央揃え
  • left-end：左側、下揃え
  • right-start：右側、上揃え
  • right：右側、中央揃え
  • right-end：右側、下揃え
full-width fullWidth true boolean false

親要素の幅いっぱいに広げるかどうかを指定します。
### イベント
名前 説明
change

選択された値が変化したときに発生します。
### Slots
名前 説明
デフォルト

<mdui-tab> 要素
panel

<mdui-tab-panel> 要素
### CSS Parts
名前 説明
container

<mdui-tab> 要素のコンテナ
indicator

アクティブ状態インジケーター
# TextField コンポーネント テキストフィールドコンポーネントは、ユーザーがページ上でテキストを入力できるようにし、通常はフォームやダイアログで使用されます。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/text-field.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { TextField } from 'mdui/components/text-field.js'; ``` 使用例： ```html ``` ## 例 {#examples} ### 形状 {#example-variant} `variant` 属性を使用してテキストフィールドの形状を設定します。 ```html

``` ### 補助テキスト {#example-helper-text} `label` 属性を使用してテキストフィールドの上にラベルテキストを設定します。 ```html ``` `placeholder` 属性を使用して、値がない場合のプレースホルダーテキストを設定します。 ```html ``` `helper` 属性を使用してテキストフィールドの下部にヘルプテキストを設定します。`helper` スロットを使用してヘルプテキストを設定することもできます。`helper-on-focus` 属性を追加すると、入力フィールドにフォーカスされている時のみヘルプテキストが表示されます。 ```html Supporting text ``` ### クリア可能 {#example-clearable} `clearable` 属性を追加すると、テキストフィールドに値がある場合、右側にクリアボタンが追加されます。 ```html ``` ### テキスト右揃え {#example-end-aligned} `end-aligned` 属性を追加すると、テキストを右揃えにできます。 ```html ``` ### プレフィックスとサフィックスのテキストおよびアイコン {#example-prefix-suffix} `icon` と `end-icon` 属性を設定することで、テキストフィールドの左側と右側に Material Icons アイコンを追加できます。`icon` と `end-icon` スロットを使用してテキストフィールドの左側と右側に要素を追加することもできます。 ```html

``` `prefix` と `suffix` 属性を設定することで、テキストフィールドの左側と右側にテキストを追加できます。`prefix` と `suffix` スロットを使用してテキストフィールドの左側と右側にテキスト要素を追加することもできます。これらのテキストは、テキストフィールドにフォーカスされているか値がある場合にのみ表示されます。 ```html

$ /100 ``` ### 読み取り専用モード {#example-readonly} `readonly` 属性を追加することで、テキストフィールドを読み取り専用モードに設定できます。 ```html ``` ### 無効状態 {#example-disabled} `disabled` 属性を追加することで、テキストフィールドを無効にできます。 ```html ``` ### 複数行テキストフィールド {#example-rows} `rows` 属性を使用して、複数行テキストフィールドの行数を設定できます。 ```html ``` `autosize` 属性を追加すると、入力内容の長さに応じてテキストフィールドの高さを自動調整できます。`min-rows` と `max-rows` 属性を使用して、自動調整時の最小行数と最大行数を指定できます。 ```html

``` ### 文字数カウンター {#example-counter} `maxlength` 属性で最大文字数を設定した場合、`counter` 属性を追加するとテキストフィールドの下に文字数カウンターが表示されます。 ```html ``` ### パスワードフィールド {#example-password} `type="password"` の場合、`toggle-password` 属性を追加するとテキストフィールドの右側にパスワードの可視性を切り替えるボタンが追加されます。 ```html ``` ## mdui-text-field API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
variant variant true 'filled' | 'outlined' 'filled'

テキストフィールドの形状です。既定値は filled です。次の値を指定します：

  • filled：背景色付きテキストフィールド。視覚的な強調度が高いです。
  • outlined：枠線付きテキストフィールド。視覚的な強調度が低いです。
type type true 'text' | 'number' | 'password' | 'url' | 'email' | 'search' | 'tel' | 'hidden' | 'date' | 'datetime-local' | 'month' | 'time' | 'week' 'text'

テキストフィールドの入力タイプです。既定値は text です。次の値を指定します：

  • text：既定値。テキストフィールド
  • number：数値のみ入力可能。動的キーボードを持つデバイスでは数字キーボードが表示されます
  • password：パスワード入力用。値はマスクされます
  • url：URL入力用。URL形式を検証します。動的キーボードをサポートするデバイスでは対応するキーボードが表示されます
  • email：メールアドレス入力用。メール形式を検証します。動的キーボードをサポートするデバイスでは対応するキーボードが表示されます
  • search：検索ボックス用。動的キーボードを持つデバイスでは、Enterキーのアイコンが検索アイコンに変わります
  • tel：電話番号入力用。動的キーボードを持つデバイスでは電話番号キーボードが表示されます
  • hidden：コントロールを非表示にしますが、その値はサーバーに送信されます
  • date：日付入力コントロール（年、月、日。時間は含みません）。サポートされているブラウザでは、アクティブ時に日付ピッカーまたは年月日の数字ホイールが開きます
  • datetime-local：日付と時刻の入力コントロール。タイムゾーンは含みません。サポートされているブラウザでは、アクティブ時に日付ピッカーまたは年月日の数字ホイールが開きます
  • month：年と月の入力コントロール。タイムゾーンなし
  • time：時刻入力用コントロール。タイムゾーンは含みません
  • week：年と週番号で構成される日付を入力するためのコントロール。タイムゾーンなし
name name true string ''

テキストフィールドの名前です。フォームデータと共に送信されます。
value value false string ''

テキストフィールドの値です。フォームデータと共に送信されます。
undefined defaultValue false string ''

デフォルト値です。フォームをリセットすると、このデフォルト値にリセットされます。この属性はJavaScriptプロパティでのみ設定できます。
label label true string

ラベルテキストです。
placeholder placeholder true string

プレースホルダーテキストです。
helper helper true string

テキストフィールド下部のヘルプテキストです。slot="helper" で設定することもできます。
helper-on-focus helperOnFocus true boolean false

フォーカスを取得したときのみ、下部のヘルプテキストを表示するかどうかを指定します。
clearable clearable true boolean false

テキストフィールドの内容をクリア可能にするかどうかを指定します。
clear-icon clearIcon true string

テキストフィールドがクリア可能な場合に、右側に表示されるクリアボタンのMaterial Iconsアイコン名です。slot="clear-icon" で設定することもできます。
end-aligned endAligned true boolean false

テキストを右揃えにするかどうかを指定します。
prefix prefix true string

テキストフィールドの接頭辞テキストです。テキストフィールドにフォーカスがあるか、値がある場合にのみ表示されます。slot="prefix" で設定することもできます。
suffix suffix true string

テキストフィールドの接尾辞テキストです。テキストフィールドにフォーカスがあるか、値がある場合にのみ表示されます。slot="suffix" で設定することもできます。
icon icon true string

テキストフィールドの接頭辞アイコンのMaterial Iconsアイコン名です。slot="icon" で設定することもできます。
end-icon endIcon true string

テキストフィールドの接尾辞アイコンのMaterial Iconsアイコン名です。slot="end-icon" で設定することもできます。
error-icon errorIcon true string

フォームフィールドの検証に失敗した場合に、テキストフィールドの右側に表示されるMaterial Iconsアイコン名です。slot="error-icon" で設定することもできます。
form form true string

関連付ける <form> 要素です。この属性値には、同一ページ内の <form> 要素の id を指定する必要があります。

この属性が指定されていない場合、この要素は <form> 要素の子要素である必要があります。この属性を使用すると、要素を <form> 要素の子要素だけでなく、ページ上の任意の場所に配置できます。
readonly readonly true boolean false

読み取り専用モードにするかどうかを指定します。
disabled disabled true boolean false

入力フィールドを無効にするかどうかを指定します。
required required true boolean false

フォーム送信時に、このフィールドを必須にするかどうかを指定します。
rows rows true number

テキストフィールドの固定表示行数です。
autosize autosize true boolean false

入力内容に応じてテキストフィールドの高さを自動調整するかどうかを指定します。
min-rows minRows true number

autosize が true の場合の、テキストフィールドの最小行数です。
max-rows maxRows true number

autosize が true の場合の、テキストフィールドの最大行数です。
minlength minlength true number

入力可能な最小文字数です。
maxlength maxlength true number

入力可能な最大文字数です。
counter counter true boolean false

文字数カウンターを表示するかどうかを指定します。maxlength が指定されている場合のみ有効です。
min min true number

type が number の場合に、入力可能な最小値です。
max max true number

type が number の場合に、入力可能な最大値です。
step step true number

type が number の場合の、数値の増減ステップです。
pattern pattern true string

フォーム検証に使用する正規表現です。
toggle-password togglePassword true boolean false

type が password の場合、この属性を設定すると、平文と暗号文を切り替えるための切替ボタンが追加されます。
show-password-icon showPasswordIcon true string

パスワード切替ボタンのMaterial Iconsアイコンです。パスワードが平文の場合に表示されます。slot="show-password-icon" で設定することもできます。
hide-password-icon hidePasswordIcon true string

パスワード切替ボタンのMaterial Iconsアイコンです。パスワードが暗号文の場合に表示されます。slot="hide-password-icon" で設定することもできます。
autocapitalize autocapitalize true 'none' | 'sentences' | 'words' | 'characters'

iOSの非標準属性です。テキストの最初の文字を自動的に大文字にするかどうかを制御します。iOS5以降で有効です。次の値を指定します：

  • none：先頭文字の大文字化を無効
  • sentences：文の先頭を大文字にする
  • words：単語の先頭を大文字にする
  • characters：すべての文字を大文字にする
autocorrect autocorrect true string

input 要素の autocorrect 属性です。
autocomplete autocomplete true string

input 要素の autocomplete 属性です。
enterkeyhint enterkeyhint true 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send'

input 要素の enterkeyhint 属性です。仮想キーボードのEnterキーに表示されるテキストまたはアイコンをカスタマイズするために使用します。具体的な表示は、ユーザーのデバイスと言語によって異なります。次の値を指定します：

  • enter：新しい行を挿入
  • done：入力を完了し、仮想キーボードを閉じる
  • go：入力テキストのターゲットに移動
  • next：次の入力項目に移動
  • previous：前の入力項目に移動
  • search：検索結果に移動
  • send：テキスト情報を送信
spellcheck spellcheck true boolean false

スペルチェックを有効にするかどうかを指定します。
inputmode inputmode true 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'

input 要素の inputmode 属性です。仮想キーボードのタイプをカスタマイズするために使用します。次の値を指定します：

  • none：仮想キーボードを表示しない。独自のキーボード入力コントロールを実装する場合に便利です。
  • text：標準テキスト入力キーボード
  • decimal：小数入力キーボード。数字の他に小数点 . や桁区切りのカンマ , がある場合があります
  • numeric：0-9の数字キーボードを表示
  • tel：電話番号キーボード。0-9の数字、アスタリスク *、シャープ # キーを含みます
  • search：検索入力用に最適化された仮想キーボード。送信ボタンには通常 search または「検索」と表示されます
  • email：メールアドレス入力用に最適化された仮想キーボード。通常、@ や . などのキーがあります
  • url：URL入力用に最適化された仮想キーボード。通常、.、/、# などのキーがあります
undefined validity false ValidityState

フォーム検証ステータスを表す ValidityState オブジェクトです。詳細は ValidityState を参照してください。
undefined validationMessage false string

フォーム検証に合格しなかった場合、このプロパティにはエラーメッセージが設定されます。検証に合格した場合は空の文字列になります。
undefined valueAsNumber false number

現在の値を number 型で取得するか、number 型の値を設定します。 値を number 型に変換できない場合は、NaN を返します。
autofocus autofocus true boolean false

ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
tabindex tabIndex false number

Tab キーによるフォーカス移動時の、要素の順序を指定します。
### メソッド
名前 説明
select(): void

テキストフィールド内のテキストを選択します。
setSelectionRange(start: number, end: number, direction: 'forward' | 'backward' | 'none'): void

テキストフィールド内の特定の範囲の内容を選択します。
setRangeText(replacement: string, start: number, end: number, selectMode: 'select' | 'start' | 'end' | 'preserve'): void

テキストフィールド内の特定の範囲のテキストを新しいテキストに置き換えます。
checkValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。
reportValidity(): boolean

フォームフィールドが検証に合格するかどうかをチェックします。合格しない場合は false を返し、invalid イベントをトリガーします。合格した場合は true を返します。

検証に合格しなかった場合は、コンポーネントに検証失敗のエラーメッセージも表示されます。
setCustomValidity(message: string): void

カスタムのエラーメッセージを設定します。このテキストが空でない限り、フィールドが検証に合格していないと見なされます。
click(): void

要素のマウスクリックをシミュレートします。
focus(options?: FocusOptions): void

現在の要素にフォーカスを設定します。

オプションとして、以下のプロパティを持つオブジェクトを渡すことができます：

  • preventScroll：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを true に設定します。
blur(): void

現在の要素からフォーカスを外します。
### イベント
名前 説明
focus

フォーカスを取得したときに発生します。
blur

フォーカスを失ったときに発生します。
change

テキストフィールドの値が変更され、フォーカスを失ったときに発生します。
input

テキストフィールドの値が変更されたときに発生します。
invalid

フォームフィールドの検証に合格しなかったときに発生します。
clear

clearable 属性によって生成されたクリアボタンがクリックされたときに発生します。event.preventDefault() を呼び出すことで、テキストフィールドがクリアされるのを防ぐことができます。
### Slots
名前 説明
icon

左側のアイコン
end-icon

右側のアイコン
error-icon

検証失敗状態の右側のアイコン
prefix

左側のテキスト
suffix

右側のテキスト
clear-button

クリアボタン
clear-icon

クリアボタン内のアイコン
toggle-password-button

パスワード表示状態切替ボタン
show-password-icon

パスワード表示状態で、パスワード表示状態切替ボタン内に表示されるアイコン
hide-password-icon

パスワード非表示状態で、パスワード表示状態切替ボタン内に表示されるアイコン
helper

下部のヘルプテキスト
### CSS Parts
名前 説明
container

テキストフィールドコンテナ
icon

左側のアイコン
end-icon

右側のアイコン
error-icon

検証失敗状態の右側のアイコン
prefix

左側のテキスト
suffix

右側のテキスト
label

上部のラベルテキスト
input

内部の <input> または <textarea> 要素
clear-button

クリアボタン
clear-icon

クリアボタン内のアイコン
toggle-password-button

パスワード表示状態切替ボタン
show-password-icon

パスワード表示状態で、パスワード表示状態切替ボタン内のアイコン
hide-password-icon

パスワード非表示状態で、パスワード表示状態切替ボタン内のアイコン
supporting

下部補助情報コンテナ（helper、error、counter を含む）
helper

下部のヘルプテキスト
error

下部のエラー説明テキスト
counter

下部右側の文字数カウンター
# Tooltip コンポーネント ツールチップは、特定の要素に補足的なテキストヒントやコンテキスト情報を提供し、ユーザーがその要素の機能や目的をよりよく理解できるようにするために使用します。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/tooltip.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { Tooltip } from 'mdui/components/tooltip.js'; ``` 使用例： ```html button ``` ## 例 {#examples} ### プレーンテキストツールチップ {#example-plain} デフォルトはプレーンテキストツールチップです。`content` 属性を使用してツールチップの内容を設定できます。 ```html button ``` `content` スロットを使用してツールチップの内容を設定することもできます。 ```html button
title
content
 ``` ### リッチテキストツールチップ {#example-rich} `variant` 属性を `rich` に設定すると、リッチテキストツールチップを作成できます。`headline` 属性を使用してツールチップのタイトルを設定し、`content` 属性を使用してツールチップの内容を設定できます。 ```html button ``` `headline`、`content` スロットを使用してツールチップのタイトルと内容を設定することもできます。`action` スロットを使用してツールチップのアクションボタンを設定します。 ```html button
Rich tooltip
Rich tooltips bring attention to a particular element of feature that warrants the user's focus. It supports multiple lines of informational text.
Action ``` ### 位置 {#example-placement} `placement` 属性を使用してツールチップの位置を設定できます。 ```html
``` ### トリガー方法 {#example-trigger} `trigger` 属性を使用して、ツールチップのトリガー方法を設定できます。 ```html button ``` ### 開く/閉じる遅延 {#example-delay} トリガー方法が `hover` の場合、`open-delay` と `close-delay` 属性を使用して、それぞれツールチップを開くときと閉じるときの遅延時間をミリ秒単位で設定できます。 ```html button ``` ### 無効状態 {#example-disabled} `disabled` 属性を追加することで、ツールチップを無効にできます。 ```html button ``` ## mdui-tooltip API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
variant variant true 'plain' | 'rich' 'plain'

ツールチップの形状です。既定値は plain です。次の値を指定します：

  • plain：プレーンテキスト。シンプルな単一行テキストに適しています。
  • rich：リッチテキスト。タイトル、本文、操作ボタンを含めることができます。
placement placement true 'auto' | 'top-left' | 'top-start' | 'top' | 'top-end' | 'top-right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-right' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' 'auto'

ツールチップの配置位置です。既定値は auto です。次の値を指定します：

  • auto：位置を自動判断。variant="plain" の場合は top を優先、variant="rich" の場合は bottom-right を優先
  • top-left：左上に配置
  • top-start：上、左揃え
  • top：上、中央揃え
  • top-end：上、右揃え
  • top-right：右上に配置
  • bottom-left：左下に配置
  • bottom-start：下、左揃え
  • bottom：下、中央揃え
  • bottom-end：下、右揃え
  • bottom-right：右下に配置
  • left-start：左、上揃え
  • left：左、中央揃え
  • left-end：左、下揃え
  • right-start：右、上揃え
  • right：右、中央揃え
  • right-end：右、下揃え
open-delay openDelay true number 150

マウスホバーで表示されるまでの遅延時間（ミリ秒単位）です。
close-delay closeDelay true number 150

マウスホバーで非表示になるまでの遅延時間（ミリ秒単位）です。
headline headline true string

ツールチップのタイトルです。variant="rich" の場合のみ使用できます。slot="headline" で設定することもできます。
content content true string

ツールチップのコンテンツです。slot="content" で設定することもできます。
trigger trigger true 'click' | 'hover' | 'focus' | 'manual' | string 'hover focus'

トリガー方法です。スペース区切りで複数の値を指定できます。次の値があります：

  • click：クリック時にトリガー
  • hover：マウスホバー時にトリガー
  • focus：フォーカス時にトリガー
  • manual：プログラムからのみツールチップの開閉が可能です。他のトリガー方法と併用できません。
disabled disabled true boolean false

ツールチップを無効にするかどうかを指定します。
open open true boolean false

ツールチップを表示するかどうかを指定します。
### イベント
名前 説明
open

ツールチップが表示を開始したときに発生するイベントです。event.preventDefault() を呼び出すことで、ツールチップが開くのを防ぐことができます。
opened

ツールチップの表示アニメーションが完了したときに発生するイベントです。
close

ツールチップが非表示を開始したときに発生するイベントです。event.preventDefault() を呼び出すことで、ツールチップが閉じるのを防ぐことができます。
closed

ツールチップの非表示アニメーションが完了したときに発生するイベントです。
### Slots
名前 説明
デフォルト

ツールチップのトリガーとなるターゲット要素です。default slot内の最初の要素のみがターゲット要素として扱われます。
headline

ツールチップのタイトルです。variant="rich" の場合のみ、このslotは有効です。
content

ツールチップのコンテンツです。HTMLを含めることができます。プレーンテキストのみの場合は、代わりに content 属性を使用できます。
action

ツールチップ下部のボタンです。variant="rich" の場合のみ、このslotは有効です。
### CSS Parts
名前 説明
popup

ツールチップのコンテナ
headline

タイトル
content

本文
action

操作ボタン
### CSS カスタムプロパティ
名前 説明
--shape-corner-plain

variant="plain" の場合のコンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
--shape-corner-rich

variant="rich" の場合のコンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。
--z-index

コンポーネントのCSS z-index 値
# TopAppBar コンポーネント トップアプリバーは、ページの上部に重要な情報と関連操作を表示し、ユーザーに明確なナビゲーションと便利な機能アクセスを提供します。 ## 使用方法 {#usage} コンポーネントを必要に応じてインポートします： ```js import 'mdui/components/top-app-bar.js'; import 'mdui/components/top-app-bar-title.js'; ``` コンポーネントの TypeScript 型を必要に応じてインポートします： ```ts import type { TopAppBar } from 'mdui/components/top-app-bar.js'; import type { TopAppBarTitle } from 'mdui/components/top-app-bar-title.js'; ``` 使用例：（例中の `style="position: relative"` はデモンストレーションのためだけのもので、実際の使用時はこのスタイルを削除してください。） ```html Title
``` **注意事項：** このコンポーネントはデフォルトで `position: fixed` を使用し、自動的に `body` に `padding-top` スタイルを追加して、ページコンテンツがこのコンポーネントに隠れないようにします。 ただし、以下の 2 つの場合はデフォルトで `position: absolute` を使用します： 1. `scroll-target` 属性が指定されている場合。この場合、`scroll-target` の要素に `padding-top` スタイルを追加します。 2. [``](/ja/docs/2/components/layout) コンポーネント内にある場合。この場合、`padding-top` スタイルは追加されません。 ## 例 {#examples} ### 指定されたコンテナ内に配置 {#example-scroll-target} デフォルトでは、トップアプリバーは現在のウィンドウを基準にしてページの上部に表示されます。 トップアプリバーを指定されたコンテナ内に配置したい場合は、`` コンポーネントに `scroll-target` 属性を指定します。その値は、スクロール可能なコンテンツのコンテナの CSS セレクタまたは DOM 要素とします。この場合、トップアプリバーは親要素を基準にして表示されます（親要素にスタイル `position: relative; overflow: hidden` を自分で追加する必要があります）。 ```html
Title
``` ### 形状 {#example-variant} `` コンポーネントで `variant` 属性を使用することで、トップアプリバーの形状を設定できます。 ```html
Title
center-aligned small medium large
``` ### ページスクロール時の動作 {#example-scroll-behavior} `` コンポーネントに `scroll-behavior` 属性を設定することで、ページスクロール時のトップアプリバーの動作を定義できます。複数の動作を同時に設定する場合は、スペースで区切ります。 スクロール動作には以下のものがあります： - `hide`：ページを下にスクロールするとトップアプリバーを非表示にし、上にスクロールすると表示します。 - `shrink`：`variant` 属性が `medium` または `large` の場合のみ有効です。ページを下にスクロールするとトップアプリバーを展開し、上にスクロールすると縮小します。 - `elevate`：ページを下にスクロールするとトップアプリバーに影を追加し、ページがトップに戻ると影を削除します。 `scroll-threshold` 属性を使用して、スクロールが何ピクセル進んだらトップアプリバーのスクロール動作をトリガーし始めるかを設定できます。（注意、応答性を高めるため、`elevate` スクロール動作を使用する場合は、`scroll-threshold` 属性を設定しないでください。） **例：スクロール時に非表示** ```html
Title
``` **例：スクロール時に影を追加** ```html
Title
``` **例：スクロール時に縮小** ```html
Title
``` **例：スクロール時に縮小および影を追加** ```html
Title
``` ### 展開状態のテキスト {#label-large} `variant` 属性が `medium` または `large` で、かつ `scroll-behavior` 属性が `shrink` のトップアプリバーでは、`` コンポーネントに `label-large` スロットを追加して、展開状態のテキストを設定できます。 ```html
これが縮小状態のタイトルです これが展開状態のタイトルです
``` ## mdui-top-app-bar-title API ### Slots
名前 説明
デフォルト

トップアプリバーのタイトルテキスト
label-large

展開状態のタイトルテキスト
### CSS Parts
名前 説明
label

タイトルテキスト
label-large

展開状態のタイトルテキスト
## mdui-top-app-bar API ### プロパティ
HTML 属性 JavaScript プロパティ Reflect 型 デフォルト値 説明
variant variant true 'center-aligned' | 'small' | 'medium' | 'large' 'small'

トップアプリバーの形状です。既定値は small です。次の値を指定します：

  • center-aligned：小型アプリバー。タイトルが中央揃え
  • small：小型アプリバー
  • medium：中型アプリバー
  • large：大型アプリバー
hide hide true boolean false

非表示にするかどうかを指定します。
shrink shrink true boolean false

variant="medium" または variant="large" の場合にのみ有効です。variant="small" のスタイルに縮小するかどうかを指定します。
scroll-behavior scrollBehavior true 'hide' | 'shrink' | 'elevate'

スクロール時の動作です。スペース区切りで複数の値を同時に使用できます。次の値があります：

  • hide：スクロール時に非表示
  • shrink：中型・大型アプリバーで使用可能。スクロール時に小型アプリバーのスタイルに縮小
  • elevate：スクロール時に影を追加
scroll-target scrollTarget false string | HTMLElement | JQ<HTMLElement>

スクロールイベントを監視する対象の要素です。値にはCSSセレクター、DOM要素、またはJQオブジェクトを指定します。デフォルトでは window のスクロールイベントを監視します。
scroll-threshold scrollThreshold true number

スクロール動作を開始させるために必要なスクロール距離（px単位）です。
order order true number

<mdui-layout>内における、このコンポーネントのレイアウト順序です。値が小さい順に並びます。デフォルトは 0 です。
### イベント
名前 説明
show

表示が開始される直前に発生するイベントです。event.preventDefault() を呼び出すことで表示をキャンセルできます。
shown

表示アニメーションが完了したときに発生するイベントです。
hide

非表示が開始される直前に発生するイベントです。event.preventDefault() を呼び出すことで非表示をキャンセルできます。
hidden

非表示アニメーションが完了したときに発生するイベントです。
### Slots
名前 説明
デフォルト

トップアプリバー内部の要素
### CSS カスタムプロパティ
名前 説明
--shape-corner

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

コンポーネントのCSS z-index 値
# jq ツールライブラリ mdui には軽量な JavaScript ツールライブラリが組み込まれており、jQuery のような API とチェーン呼び出しを提供しますが、サイズは jQuery の 6 分の 1 です。 このツール関数は必要に応じてインポートできます： ```js import { $ } from 'mdui/jq.js'; ``` ## コア {#api-core} ### `$()` {#dollar} この関数には複数の使用方法があります： CSS セレクターをパラメーターとして渡すと、一致する要素を含む JQ オブジェクトを返します。 ```js $('.box'); ``` DOM 要素、任意の配列、NodeList、または JQ オブジェクトを渡すと、指定された要素を含む JQ オブジェクトを返します。 ```js $(document); ``` HTML 文字列を渡すと、HTML から作成された DOM を含む JQ オブジェクトを返します。 ```js $(`
`); ``` 関数を渡すと、DOM の読み込みが完了したときにその関数が呼び出されます。 ```js $(function () { console.log('DOM Loaded'); }); ``` ## 拡張 {#api-extend} ### `$.extend()` {#d-extend} オブジェクトが 1 つだけ渡された場合、そのオブジェクトのプロパティは `$` オブジェクトにマージされます。つまり、`$` の名前空間に新しい機能が追加されます。 ```js $.extend({ customFunc: function () {}, }); // その後、このようにカスタムメソッドを呼び出せます $.customFunc(); ``` 2 つ以上のオブジェクトが渡された場合、すべてのオブジェクトのプロパティが最初のオブジェクトに追加され、マージされたオブジェクトが返されます。ただし、値が `undefined` のプロパティはマージされません。 ```js const object = $.extend({ key1: val1 }, { key2: val2 }, { key3: val3 }); // このとき、最初のオブジェクトと戻り値はどちらも { key1: val1, key2: val2, key3: val3 } になります ``` ### `$.fn.extend()` {#fn-extend} `$` のプロトタイプチェーンにメソッドを拡張します。 ```js $.fn.extend({ customFunc: function () {}, }); // その後、このように拡張したメソッドを使用できます $(document).customFunc(); ``` ## URL {#api-url} ### `$.param()` {#d-param} 配列またはオブジェクトを URL クエリ文字列にシリアライズします。 ```js $.param({ width: 1680, height: 1050 }); // width=1680&height=1050 $.param({ foo: { one: 1, two: 2 } }); // foo[one]=1&foo[two]=2 $.param({ ids: [1, 2, 3] }); // ids[]=1&ids[]=2&ids[]=3 ``` 渡されたパラメーターが配列の場合、その配列の形式は [`.serializeArray()`](#serializeArray) が返す形式と一致している必要があります。 ```js $.param([ { name: 'name', value: 'mdui' }, { name: 'password', value: '123456' }, ]); // name=mdui&password=123456 ``` ## 配列とオブジェクトの操作 {#api-array} ### `$.each()` {#d-each} 配列またはオブジェクトを反復処理します。戻り値は最初のパラメーター、つまり反復処理された配列またはオブジェクトです。 コールバック関数の最初のパラメーターは配列のインデックスまたはオブジェクトのキー、2番目のパラメーターは配列またはオブジェクトの対応する位置の値です。 コールバック関数内では、`this` は配列またはオブジェクトの対応する位置の値を指します。コールバック関数が `false` を返すと、反復処理は停止します。 ```js // 配列を反復処理 $.each(['a', 'b', 'c'], function (index, value) { console.log(index + ':' + value); }); // 結果： // 0:a // 1:b // 2:c ``` ```js // オブジェクトを反復処理 $.each({ name: 'mdui', lang: 'zh' }, function (key, value) { console.log(key + ':' + value); }); // 結果 // name:mdui // lang:zh ``` ### `$.merge()` {#d-merge} 2 番目の配列の要素を最初の配列に追加し、マージされた配列を返します。 ```js const first = ['a', 'b', 'c']; const second = ['c', 'd', 'e']; const result = $.merge(first, second); console.log(first); // ['a', 'b', 'c', 'c', 'd', 'e'] console.log(result); // ['a', 'b', 'c', 'c', 'd', 'e'] ``` ### `$.unique()` {#d-unique} 配列内の重複する要素を削除します。 ```js const result = $.unique([1, 2, 12, 3, 2, 1, 2, 1, 1, 1, 1]); console.log(result); // [1, 2, 12, 3] ``` ### `$.map()` {#d-map} 配列またはオブジェクトを反復処理し、コールバック関数の戻り値で構成される新しい配列を返します。 コールバック関数の最初のパラメーターは配列またはオブジェクトの対応する位置の値、2番目のパラメーターは配列のインデックスまたはオブジェクトのキーです。 コールバック関数は任意の値を返せます。返り値が配列の場合、その配列は展開されます。`null` または `undefined` を返した場合、その値は無視されます。コールバック関数内では、`this` は `window` オブジェクトを指します。 ```js // 配列を反復処理 const result = $.map(['a', 'b', 'c'], function (value, index) { return index + value; }); console.log(result); // ['0a', '1b', '2c'] ``` ```js // コールバック関数が配列を返す場合、その配列は展開される const result = $.map([1, 2, 3], function (value, index) { return [value, value + 1]; }); console.log(result); // [1, 2, 2, 3, 3, 4] ``` ```js // オブジェクトを反復処理 const result = $.map( { name: 'mdui', password: '123456' }, function (value, key) { return key + ':' + value; }, ); console.log(result); // ['name:mdui', 'password:123456'] ``` ### `$.contains()` {#d-contains} あるノードが別のノードを含むかどうかを判定します。親ノードが子ノードを含む場合は `true`、そうでない場合は `false` を返します。 ```js $.contains(document, document.body); // true $.contains(document.body, document); // false ``` ## データ型の判定 {#api-type} ### `.is()` {#is} コレクション内の少なくとも 1 つの要素がパラメーターと一致するかどうかを判定します。一致する場合は `true`、そうでない場合は `false` を返します。 パラメーターには、CSS セレクター、DOM 要素、DOM 要素の配列、JQ オブジェクト、またはコールバック関数を指定できます。 パラメーターがコールバック関数の場合、関数の最初のパラメーターはインデックス、2番目のパラメーターは現在の要素です。関数内では、`this` は現在の要素を指します。関数が `true` を返すと、現在の要素はパラメーターと一致すると見なされます。`false` を返すと、一致しないと見なされます。 ```js $('.box').is('.box'); // true $('.box').is('.boxss'); // false $('.box').is($('.box')[0]); // true ``` ```js // コールバック関数の戻り値で判定 $(document).is(function (index, element) { return element === document; }); // true ``` ## オブジェクトアクセス {#api-object} ### `.length` {#length} 現在のコレクション内の要素の数を返します。 ```js $('body').length; // 1 ``` ### `.each()` {#each} 現在のコレクションを反復処理し、コレクション内の各要素に対して関数を実行します。関数が `false` を返すと、反復処理は停止します。 関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは現在の要素です。関数内では、`this` は現在の要素を指します。 ```js $('img').each(function (index, element) { this.src = 'test' + index + '.jpg'; }); ``` ### `.map()` {#map} 現在のコレクションを反復処理し、コレクション内の各要素に対して関数を実行し、関数の戻り値で構成される新しいコレクションを返します。 関数は単一のデータまたはデータの配列を返せます。配列を返すと、配列内の要素が新しいコレクションに順次追加されます。関数が `null` または `undefined` を返した場合、その値は新しいコレクションに追加されません。 関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは現在の要素です。関数内では、`this` は現在の要素を指します。 ```js const result = $('input.checked').map(function (i, element) { return element.value; }); // result は、一致する要素の値で構成される JQ オブジェクトです ``` ### `.eq()` {#eq} 指定されたインデックス位置の要素のみを含む新しいコレクションを返します。 ```js $('div').eq(0); // 最初の要素のみを含むコレクションを返す $('div').eq(-1); // 最後の要素のみを含むコレクションを返す $('div').eq(-2); // 最後から2番目の要素のみを含むコレクションを返す ``` ### `.first()` {#first} 現在のコレクションの最初の要素のみを含む新しいコレクションを返します。 ```js $('div').first(); // 最初の div のみを含むコレクションを返す ``` ### `.last()` {#last} 現在のコレクションの最後の要素のみを含む新しいコレクションを返します。 ```js $('div').last(); // 最後の div のみを含むコレクションを返す ``` ### `.get()` {#get} 指定されたインデックス位置の要素を返します。パラメーターを省略した場合は、コレクション内のすべての要素で構成される配列を返します。 ```js $('div').get(); // すべての div 要素で構成される配列を返す $('div').get(0); // 最初の div 要素を返す $('div').get(-1); // 最後の div 要素を返す ``` ### `.index()` {#index} パラメーターを省略すると、現在のコレクション内の最初の要素の、同階層の要素に対するインデックス値を返します。 CSS セレクターを渡すと、現在のコレクション内の最初の要素の、CSS セレクターに一致する要素に対するインデックス値を返します。 DOM 要素を渡すと、その要素の現在のコレクション内でのインデックス値を返します。 JQ オブジェクトを渡すと、そのオブジェクトの最初の要素の現在のコレクション内でのインデックス値を返します。 ```html
``` ```js $('#child3').index(); // 2 $('#child3').index('#child div'); // 2 $('#child div').index($('#child3').get(0)); // 2 ``` ### `.slice()` {#slice} 現在のコレクションのサブセットを返します。 2 つのパラメーターを渡してサブセットの開始位置と終了位置（終了位置の要素は含まない）を指定できます。2 番目のパラメーターを省略すると、開始位置からコレクションの末尾までのすべての要素を返します。 ```js // コレクションの 3 番目（3 番目を含む）以降のすべての要素を返す $('div').slice(3); // コレクションの 3 番目から 5 番目（3 番目を含み、5 番目は含まない）までの要素を返す $('div').slice(3, 5); ``` ### `.filter()` {#filter} 現在のコレクションから指定された式に一致する要素を抽出します。パラメーターには CSS セレクター、DOM 要素、DOM 要素の配列、またはコールバック関数を指定できます。 パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは現在の要素です。関数内では、`this` は現在の要素を指します。関数が `true` を返すと現在の要素は保持され、`false` を返すと削除されます。 ```js // .box クラスを持つ div 要素を抽出 $('div').filter('.box'); // 選択されたオプションを抽出 $('#select option').filter(function (index, element) { return element.selected; }); ``` ### `.not()` {#not} 現在のコレクションから指定された式に一致しない要素を抽出します。 パラメーターには CSS セレクター、DOM 要素、DOM 要素の配列、JQ オブジェクト、または `boolean` 値を返すコールバック関数を指定できます。 パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターは現在の要素です。関数内では、`this` は現在の要素を指します。関数が `true` を返すと現在の要素は削除され、`false` を返すと保持されます。 ```js // .box クラスを持たない div 要素を抽出 $('div').not('.box'); // 選択されていないオプションを抽出 $('#select option').not(function (index, element) { return element.selected; }); ``` ## CSS クラス {#api-css} ### `.hasClass()` {#hasClass} コレクション内の最初の要素が指定された CSS クラスを持っているかどうかを判定します。 ```js // 最初の div 要素が .item クラスを持っているか判定 $('div').hasClass('item'); ``` ### `.addClass()` {#addClass} コレクション内の各要素に CSS クラスを追加します。複数のクラス名はスペースで区切ります。 パラメーターには、文字列または CSS クラス名を返すコールバック関数を指定できます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターはその要素に既にある CSS クラス名です。関数内では、`this` は現在の要素を指します。 ```js // すべての div 要素に .item クラスを追加 $('div').addClass('item'); // すべての div 要素に .item1 と .item2 クラスを追加 $('div').addClass('item1 item2'); // すべての div 要素に、コールバック関数が返す CSS クラスを追加 $('div').addClass(function (index, currentClassName) { return currentClassName + '-' + index; }); ``` ### `.removeClass()` {#removeClass} コレクション内の各要素から指定された CSS クラスを削除します。複数のクラス名はスペースで区切ります。 パラメーターには、文字列または CSS クラス名を返すコールバック関数を指定できます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターはその要素に既にある CSS クラス名です。関数内では、`this` は現在の要素を指します。 パラメーターを省略すると、このメソッドは要素から `class` 属性を直接削除します。 ```js // すべての div 要素から .item クラスを削除 $('div').removeClass('item'); // すべての div 要素から .item1 と .item2 クラスを削除 $('div').removeClass('item1 item2'); // すべての div 要素から、コールバック関数が返す CSS クラスを削除 $('div').removeClass(function (index, currentClassName) { return 'item'; }); ``` ### `.toggleClass()` {#toggleClass} 要素に指定された CSS クラスがあれば削除し、なければ追加します。複数のクラス名はスペースで区切ります。 パラメーターには、文字列または CSS クラス名を返すコールバック関数を指定できます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターはその要素に既にある CSS クラス名です。関数内では、`this` は現在の要素を指します。 ```js // すべての div 要素の .item クラスを切り替え $('div').toggleClass('item'); // すべての div 要素の .item1 と .item2 クラスを切り替え $('div').toggleClass('item1 item2'); // すべての div 要素で、コールバック関数が返す CSS クラスを切り替え $('div').toggleClass(function (index, currentClassName) { return 'item'; }); ``` ## ノード属性 {#api-attr} ### `.prop()` {#prop} コレクション内の最初の要素の JavaScript プロパティの値を取得します。 ```js // 最初の要素の checked プロパティの値を取得 $('input').prop('checked'); ``` 2 つのパラメーターを渡すと、コレクション内のすべての要素の指定された JavaScript プロパティの値を設定します。 プロパティの値は任意の型の値、またはコールバック関数の戻り値にできます。コールバック関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターはその要素に既にあるプロパティの値で、関数内の `this` は現在の要素を指します。 プロパティの値またはコールバック関数の戻り値が `undefined` の場合、このメソッドは要素の既存のプロパティを変更しません。 ```js // すべての一致する要素の checked プロパティの値を true に設定 $('input').prop('checked', true); // コールバック関数の戻り値でプロパティ値を設定 $('input').prop('checked', function (index, oldPropValue) { return true; }); ``` オブジェクトを渡すことで、複数のプロパティを同時に設定することもできます。 ```js // 要素の複数のプロパティ値を同時に設定 $('input').prop({ checked: false, disabled: function (index, oldPropValue) { return true; }, }); ``` ### `.removeProp()` {#removeProp} コレクション内のすべての要素から指定された JavaScript プロパティを削除します。 ```js $('input').removeProp('disabled'); ``` ### `.attr()` {#attr} コレクション内の最初の要素の HTML 属性の値を取得します。 ```js // 最初の要素の属性値を取得 $('div').attr('username'); ``` 2 つのパラメーターを渡すと、コレクション内のすべての要素の指定された HTML 属性の値を設定します。 属性の値は文字列または数値、または属性値を返すコールバック関数にできます。パラメーターがコールバック関数の場合、その関数の最初のパラメーターは要素のインデックス位置、2番目のパラメーターはその要素に既にある属性の値です。関数内では、`this` は現在の要素を指します。 属性の値またはコールバック関数の戻り値が `null` の場合、このメソッドは指定された属性を削除します。`undefined` の場合は、要素の既存の属性を変更しません。 ```js // すべての一致する要素の属性値を設定 $('div').attr('username', 'mdui'); // コールバック関数の戻り値で属性値を設定 $('div').attr('username', function (index, oldAttrValue) { return 'mdui'; }); ``` オブジェクトを渡すことで、複数の属性を同時に設定することもできます。 ```js // 要素の複数の属性値を同時に設定 $('div').attr({ username: 'mdui', lastname: function (index, oldAttrValue) { return 'test'; }, }); ``` ### `.removeAttr()` {#removeAttr} コレクション内のすべての要素から指定された HTML 属性を削除します。複数の属性名はスペースで区切ります。 ```js // コレクション内のすべての要素から 1 つの属性を削除 $('div').removeAttr('username'); // コレクション内のすべての要素から複数の属性を削除 $('div').removeAttr('username lastname'); ``` ### `.val()` {#val} コレクション内の最初の要素の値を返します。 要素が ``、``、`