# 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
スロットでカスタマイズできます。