エキスパンド ウィジェットでは、カスタム要素 <devsite-expandable> を使用して、
ユーザーは、展開可能なセクションでコンテンツの一部の表示と非表示を切り替えられます。Markdown ファイルで、カスタム要素を <section> や <div> などの標準 HTML 要素でラップします。
セクションの切り替え
次の例では、デフォルトで非表示の位置に設定される <devsite-expandable> カスタム要素でラップされています。見出しに class 属性があります。
showalways。
この見出しは常に表示されます
この段落はデフォルトで非表示になります。
This code block within the custom element also defaults to a hidden
position.
カスタム コントロール
次の例では、expand-control クラスをbutton
セクションを展開 / 折りたたむための <devsite-expandable> カスタム要素
簡単に操作できます。
1 回開く
次の例では、<devsite-expandable> カスタム要素内のリンクに expand-control once クラスを追加します。このリンクをクリックすると追加のコンテンツが表示され、その後ページから消えます。
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam、quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea Commodo consequat.
その他Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
リンク時に自動拡張
次の例では、<devsite-expandable> カスタム要素に #sample1 ID を追加し、リンク先のページが読み込まれるとセクションが自動的に展開されるようにします。
リンク時に自動的に展開する方法
この展開可能なセクションを閉じて、上記の #sample1 リンクをクリックし、ページを再読み込みすると、この展開可能なセクションが自動的に展開されます。
Code block within the 'Auto-expand on linking' demo.
デフォルトで開く
次の例では、<devsite-expandable> カスタム要素に expanded 属性を追加して、デフォルトで展開可能にします。
デフォルトで展開
[デフォルトで開く] は、 最新のものは開いたままにしておく必要があります。