# Expansion panels

v-expansion-panelコンポーネントは、大量の情報がある垂直方向のスペースを減らすのに役立ちます。 コンポーネントのデフォルトの機能は、一度に 1 つのexpansion-panel本体のみを表示することです。 ただし、 multiple プロパティを使用すると、明示的に閉じるまでexpansion-panelを開いたままにすることができます。

# 使い方

最も単純な形式なエクスパンションパネルでは、項目のリストが表示されます。

# API

# サンプル

# Props

# アコーディオン

accordion expansion-panelはアクティブなパネルの周りに余白がありません。

# 無効化

エクスパンションパネルとそのコンテンツの両方は、 disabled propを使用して無効にできます。

# Focusable

focusable propでフォーカス可能にすることができます。

# Inset

insetエクスパンションパネルは、アクティブ化すると小さくなります。

# Model

v-model を変更することで、エクスパンションパネルを外部から制御することができます。 値は、現在開いているエクスパンションパネルのコンテンツのゼロベースのインデックスに対応します。 multiple prop が使用されている場合は開いているアイテムのインデックスを含む配列となります。

# ポップアウト

エクスパンションパネルには popout デザインもあります。 これにより、アクティベート時にエクスパンションパネルが拡大されます。

# Readonly

readonly prop は disabledと同じことをしますが、外観のスタイルは変化しません。

# その他

# 高度な使い方

エクスパンションパネルコンポーネントは、高度な実装をするための豊富なプレイグラウンドを提供しています。 ここでは v-expansion-panel-headerコンポーネントのスロットを使って、開閉時にコンテンツをフェードイン/アウトさせています。

# カスタムアイコン

展開アクションアイコンはexpand-icon propまたはactionsスロットでカスタマイズできます。

準備はできましたか?

Vuetifyのチームが選ぶ関連コンテンツで他の学習トピックに進むか、下のナビゲーション リンクでページ間を移動できます。
GitHub でこのページを編集する
最終更新日:11/12/2024, 6:59:50 AM