ページネーション

基本構成

• アクセシビリティ用外枠 nav 属性
  • アクセシビリティ属性 aria-label="Pagination example"
  • ページネーション ul.pagination
    • アイテム(複数) li.page-item
      • リンク a 属性
        • 属性 href="..."
        • テキスト Previous , 1 , 2 , ... , Next

アイコン(シンボル)の利用

例: 前後ボタンにシンボル文字を用いる場合

• 先頭アイテム li.page-item
  • テキスト «
  • アクセシビリティ用 span 属性
    • 属性 area-hidden="true"
    • テキスト 前/Previous
• 最終アイテム li.page-item
  • テキスト »
  • アクセシビリティ用 span 属性
    • 属性 area-hidden="true"
    • テキスト 次/Next

アイコンを用いる場合も同様: 次は Open Iconic の使用例(詳しくはソース参照)

アイテムの状態設定(無効化/アクティブ)

各アイテムには状況に応じて無効化/アクティブの状態を設定する。次は最も一般的な条件の例。

• 現在のページのアイテムはアクティブ表示、しかしリンクは無効化する
• 先頭ページの場合 Previous (前)は表示/リンクとも無効化
• 最終ページの場合 Next (次)は表示/リンクとも無効化

無効化状態の設定

li に .page-item を追加すれば内側のリンク a は自動的に無効化される。

• li.page-item
  • 無効化するアイテムに .disabled を追加
  • リンク a
    • 属性 tabindex="-1" を設定(タブストップを受けないようにする)
    • テキスト(例) Previous (自動的に灰色表示)
    • アクセシビリティ対応: 現在のページに span.sr-only を設定
      • テキスト (current)

例(1ページ目を表示している場合): Previous と 1 が無効化アイテム

アクティブ状態の設定

li.list-item に .active を設定すればアイテムはアクティブ表示になる(Primary/青の背景)。しかし内部リンクは無効化されない。さらに.disabled と一緒に設定しても効果がない(無効化の設定が優先してアクティブ表示しない)。

そこで構造を変更し、無効化アイテムにはリンク a ではなく span を用いれば根本的に解決できる。

• アクティブまたは無効化設定するアイテム li.page-item.(active|disabled)
  • span.page-link ( a.page-link から変更)

例(1ページ目の場合): Previous は無効化、1 はアクティブ、どちらもリンクがないのでアクションは受けない

サイズ設定

リストの親 li.pagenation に .pagination-(lg|sm) を追加する。

.ul.pagination.pagination-lg

.ul.pagination (デフォルト)

.ul.pagination.pagination-sm

配置

Flexboxユーティリティの .justify-content-* を用いる(⇒ .justify-content-* を用いた配置設定 )。

ul-pagination.justify-content-start

ul-pagination.justify-content-center

ul-pagination.justify-content-end

ポップオーバー

ポップオーバーは(iOSの同名機能と同様の)ポップアップ表示コンポーネント。実装に Popper.js を利用している。

初期化方法

ポップオーバーは初期状態はOFFになっており、有効にするためにはJavaScriptを用いた処理が必要。最も簡単なコード例を示す。

$('[data-toggle="popover"]').popover();

設定方法

• 任意の要素に設定可: 次の属性を設定
• data-toggle="popover"
• title="{タイトルテキスト}"
• data-content="{本文テキスト}"
• (注) title , data-content は片方だけでもOK(どちらも値が空の場合は表示しない)

設定例(クリックで表示、再クリックで表示終了)

Click to toggle popover

表示方向の設定

• 次の属性を追加(デフォルトは "right" )
  • data-placement=("top"|"right"|"bottom"|"left")

設定例

クリックに対する動作の変更

(デフォルトは)要素のクリックで表示したポップオーバーは同じ要素の再クリックで表示終了する。これにより複数同時表示が可能だが、逆に不自然(または不便)な場合もある。そのような場合は別の要素をクリックした時に表示終了(より正確にはフォーカスで表示ON/OFF)するように動作変更できる。

• 属性 data-trigger="focus" を設定(ブラウザ側が完全対応すれば将来的にはこれだけでOK)
• (クロスプラットフォーム対応)要素は a に限定( button ではまだ動作保証できない)
• (クロスプラットフォーム対応)属性 tabindex="0" を必ず設定

設定例

Dismissible popover

無効化した要素への設定

要素に属性 disabled が設定されている場合ポップオーバーは効かなくなる。次の例は button に下記の通り設定しているがポップオーバーは表示されない。

• button.btn.btn-primary 属性
  • 属性 type="button"
  • 属性 data-toggle="popover" (設定している)
  • 属性 title="Disabled popover" (これも設定、しかし...)
  • 属性 disabled (これを設定するとポップオーバーも無効化される)
  • テキスト Disabled button

Disabled button

しかし disabled は設定するが、ポップオーバーは効くようにしたいケースもある。その場合は親要素を作ってそこにポップオーバーを設定し、その中に disabled を設定した要素を入れればよい。対応例は次の通り。

• ポップオーバー動作用親要素 span 属性
  • 設定.d-inline-block ( button と同じ display にする)
  • 属性 data-toggle="popover"
  • 属性 title="Disabled popover"
  • 子要素 button.btn.btn-primary 属性
    • 属性 type="button"
    • 属性 style="pointer-events: none;" (ポインタイベントを受けないようにする)
    • 属性 disabled
    • テキスト Disabled button

設定例: ボタンは disabled だがポップオーバーは動作する(実際は親要素が処理している)。

Disabled button

プログレスバー

progress 要素の代替を目的としたコンポーネントで、バーの積み重ねやアニメーション付きストライプバーなど progress にはない追加機能を持つ。

基本設定

• ベース部 div.progress
  • カラーバー div.progress-bar (複数積み重ね可) 属性
    • 幅(必須) (例) style="width: 50%"
    • アクセシビリティ属性 role="progressbar"
    • アクセシビリティ属性 aria-valuenow="50"
    • アクセシビリティ属性 aria-valuemin="0"
    • アクセシビリティ属性 aria-valuemax="100"

幅の設定

(1) カスタムスタイル style="width: {width}%”

style="width: 0%;"

style="width: 25%;"

style="width: 50%;"

style="width: 75%;"

style="width: 100%;"

(2) 幅設定ユーティリティ .w-(25|75|100) (⇒ サイズユーティリティ 、25%ステップ)

.w-25

.w-50

.w-75

.w-100

ラベル文字の追加

バー div.progress-bar の内部テキストを記述する。

高さの設定

ベースの div.progress に設定する。

style="height: 5px;"

style="height: 10px;"

style="height: 15px;"

style="height: 20px;"

バーの色

div.progress-bar に背景色 .bg-{context} を追加(⇒ 色 - 背景色 )

.bg-success

.bg-info

.bg-warning

.bg-danger

バーの積み重ね

div.progress-bar を複数用いれば左から右に積み重なる。

ストライプ表示

バーに .progress-bar-striped を追加する。

ストライプのアニメーション

さらに .progress-bar-animated を追加する。