# 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と同じことをしますが、外観のスタイルは変化しません。

# その他

# 高度な使い方

The expansion panel component provides a rich playground to build truly advanced implementations. Here we take advantage of slots in the v-expansion-panel-header component to react to the state of being open or closed by fading content in and out.

# カスタムアイコン

Expand action icon can be customized with expand-icon prop or the actions slot.

準備はできましたか?

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