v-expansion-panelコンポーネントは、大量の情報から垂直方向のスペースを低減するために有用です。コンポーネントのデフォルトの機能は、一度に1つのエクスパンションパネル本体を表示することです。しかし、 multipleプロパティで、明示的に開いたままにすることができます。
以下に、簡単な例から複雑な例まで示します。
エクスパンションパネルとそのコンテンツの両方は、 disabledpropを使用して無効にできます。
readonly prop はdisabledと同じことをしますが、外観はそのままでスタイルには触れません。
エクスパンションパネルにも popout デザインがあります。これを使用すると、アクティブ化されると v-expansion-panel が拡大表示されます。
inset を設定するとエクスパンションパネルは、アクティブ化時と小さく表示されます。
accordionのエクスパンションパネルには、アクティブなパネルの周囲にマージンがありません。
focusable propでフォーカス可能にすることができます。
エクスパンションパネルは、v-modelを変更することで外部から制御できます。その値は、現在開いているエクスパンションパネルのコンテンツの 0 から始まるインデックスに対応します。multiplepropが使用されている場合、それは開いている項目のインデックスを含む配列です。
展開アクションアイコンは、expand-icon prop またはactions slotでカスタマイズすることができます。
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.