ページ分割ウィジェットは、<devsite-pagination> カスタム要素を使用して、ページ分けされたコンテンツの表示や、表示されるコンテンツの量の切り替えを行います。
一般的な使用方法
次の例では、<devsite-pagination> カスタム要素を使用して、1 つのページに 4 つの <div> 要素をページ指定する container 要素を指定しています。
Div 1
Div 2
div 3
div 4
div 5
div 6
div 7
div 8
div 9
div 10
div 11
div 12
div 13
div 14
div 15
複数の HTML 要素
次の例では、<devsite-pagination> カスタム要素を使用して、同じコンテナ内の <p> 要素と <div> 要素の両方にページを設定する container 要素を指定しています。
段落 1 です。
段落 2 です。
段落 3 です。
段落 4 です。
段落 5 になります。
段落 6 です。
これは div 1 です。
これは div 2 です。
これは div 3 です。
これは div 4 です。
これは div 5 です。
これは div 6 です。
ボタン UI
次の例では、<devsite-pagination> カスタム要素を使用して、最初の 8 つの <div> 要素を読み込み、More に切り替える container 要素を指定します。
Div 1
Div 2
div 3
div 4
div 5
div 6
div 7
div 8
div 9
div 10
div 11
div 12
div 13
div 14
div 15
開始と展開
次の例では、<devsite-pagination>カスタム要素でcontainer要素とstart-expandedすべてを読み込む属性<div>要素を表示し、切り替えて表示することもできます折りたたむ。
Div 1
Div 2
div 3
div 4
div 5
div 6
div 7
div 8
div 9
div 10
div 11
div 12
div 13
div 14
div 15