ショップ

企業向け

v-expansion-panelコンポーネントは、大量の情報から垂直方向のスペースを低減するために有用です。コンポーネントのデフォルトの機能は、一度に1つのエクスパンションパネル本体を表示することです。しかし、 multipleプロパティで、明示的に開いたままにすることができます。

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

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

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

readonly prop はdisabledと同じことをしますが、外観はそのままでスタイルには触れません。

The expansion-panel also has popout design. With it, expansion-panel is enlargened when activated.

inset expansion-panel becomes smaller when activated.

accordion expansion-panel hasn't got margins around active panel.

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.

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!