問題を報告するこのページを編集する

リストグループ

リストグループは、一連のコンテンツを表示するための柔軟で強力なコンポーネントです。リストグループの項目は、ほぼすべてのコンテンツをサポートするように変更できます。また、さまざまなプロパティを使用してナビゲーションとしても使用できます。

<b-list-group>
  <b-list-group-item>Cras justo odio</b-list-group-item>
  <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
  <b-list-group-item>Morbi leo risus</b-list-group-item>
  <b-list-group-item>Porta ac consectetur ac</b-list-group-item>
  <b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>

<!-- b-list-group.vue -->

アクティブな項目

<b-list-group-item> で active プロパティを設定して、現在アクティブな選択を示します。

<b-list-group>
  <b-list-group-item>Cras justo odio</b-list-group-item>
  <b-list-group-item active>Dapibus ac facilisis in</b-list-group-item>
  <b-list-group-item>Morbi leo risus</b-list-group-item>
  <b-list-group-item>Porta ac consectetur ac</b-list-group-item>
  <b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>

<!-- b-list-group-active.vue -->

無効化された項目

<b-list-group-item> で disabled プロパティを設定して、無効になっているように表示します（アクション可能な項目でも機能します。以下を参照）。

<b-list-group>
  <b-list-group-item disabled>Cras justo odio</b-list-group-item>
  <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
  <b-list-group-item>Morbi leo risus</b-list-group-item>
  <b-list-group-item disabled>Porta ac consectetur ac</b-list-group-item>
  <b-list-group-item>Vestibulum at eros</b-list-group-item>
</b-list-group>

<!-- b-list-group-disabled.vue -->

アクション可能なリストグループ項目

href プロパティまたは router-link to プロパティのいずれかを指定することにより、<b-list-group-item> をアクション可能な *リンク*（<a href="...">）にします。

<b-list-group>
  <b-list-group-item href="#some-link">Awesome link</b-list-group-item>
  <b-list-group-item href="#" active>Link with active state</b-list-group-item>
  <b-list-group-item href="#">Action links are easy</b-list-group-item>
  <b-list-group-item href="#foobar" disabled>Disabled link</b-list-group-item>
</b-list-group>

<!-- b-list-group-link.vue -->

または、リンクよりも <button> 要素の方が望ましい場合は、button プロパティを true に設定します。

<b-list-group>
  <b-list-group-item button>Button item</b-list-group-item>
  <b-list-group-item button>I am a button</b-list-group-item>
  <b-list-group-item button disabled>Disabled button</b-list-group-item>
  <b-list-group-item button>This is a button too</b-list-group-item>
</b-list-group>

<!-- b-list-group-button.vue -->

注意事項

  • プロパティ button が true の場合、リンク関連のプロパティ（active 以外）と tag プロパティは無効になります。
  • href または to が設定されている場合、tag プロパティは無効になります。

router-link 固有のプロパティについては、ルーターのサポートリファレンスページを参照してください。

コンテキストバリアント

variant プロパティを使用して、コンテキストバリアントを使用して、状態に応じた背景と色でリストアイテムのスタイルを設定します。

<b-list-group>
  <b-list-group-item>Default list group item</b-list-group-item>
  <b-list-group-item variant="primary">Primary list group item</b-list-group-item>
  <b-list-group-item variant="secondary">Secondary list group item</b-list-group-item>
  <b-list-group-item variant="success">Success list group item</b-list-group-item>
  <b-list-group-item variant="danger">Danger list group item</b-list-group-item>
  <b-list-group-item variant="warning">Warning list group item</b-list-group-item>
  <b-list-group-item variant="info">Info list group item</b-list-group-item>
  <b-list-group-item variant="light">Light list group item</b-list-group-item>
  <b-list-group-item variant="dark">Dark list group item</b-list-group-item>
</b-list-group>

<!-- b-list-group-variant.vue -->

コンテキストバリアントは、アクションアイテムでも機能します。前の例には存在しないホバースタイリングが追加されていることに注意してください。また、active 状態もサポートされています。コンテキストリストグループアイテムのアクティブな選択を示すように設定します。

<b-list-group>
  <b-list-group-item href="#">Default list group item</b-list-group-item>
  <b-list-group-item href="#" variant="primary">Primary list group item</b-list-group-item>
  <b-list-group-item href="#" variant="secondary">Secondary list group item</b-list-group-item>
  <b-list-group-item href="#" variant="success">Success list group item</b-list-group-item>
  <b-list-group-item href="#" variant="danger">Danger list group item</b-list-group-item>
  <b-list-group-item href="#" variant="warning">Warning list group item</b-list-group-item>
  <b-list-group-item href="#" variant="info">Info list group item</b-list-group-item>
  <b-list-group-item href="#" variant="light">Light list group item</b-list-group-item>
  <b-list-group-item href="#" variant="dark">Dark list group item</b-list-group-item>
</b-list-group>

<!-- b-list-group-variant-action.vue -->

支援技術に意味を伝える

色を使用して意味を追加すると、視覚的な indikasi のみが提供されます。これは、スクリーンリーダーなどの支援技術のユーザーには伝わりません。色で示される情報が、コンテンツ自体（たとえば、表示されるテキスト）から明らかであるか、.sr-only クラスを使用して非表示にされた追加のテキストなどの代替手段によって含まれていることを確認してください。

バッジ付き

バッジをリストグループアイテムに追加して、フレックスユーティリティクラスを使用して、未読カウント、アクティビティなどを表示します。

<b-list-group>
  <b-list-group-item class="d-flex justify-content-between align-items-center">
    Cras justo odio
    <b-badge variant="primary" pill>14</b-badge>
  </b-list-group-item>

  <b-list-group-item class="d-flex justify-content-between align-items-center">
    Dapibus ac facilisis in
    <b-badge variant="primary" pill>2</b-badge>
  </b-list-group-item>

  <b-list-group-item class="d-flex justify-content-between align-items-center">
    Morbi leo risus
    <b-badge variant="primary" pill>1</b-badge>
  </b-list-group-item>
</b-list-group>

<!-- b-list-group-badges.vue -->

カード内のリストグループ

リストグループをカードに組み込みます。no-body を使用したカードを使用する場合、リストグループの側面をカードと同一平面にするには、<b-list-group> プロパティ flush プロパティを使用します。

<b-card-group deck>
  <b-card header="Card with list group">
    <b-list-group>
      <b-list-group-item href="#">Cras justo odio</b-list-group-item>
      <b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
      <b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
    </b-list-group>

    <p class="card-text mt-2">
      Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
      consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur
      mollit voluptate est in duis laboris ad sit ipsum anim Lorem.
    </p>
  </b-card>

  <b-card no-body header="Card with flush list group">
    <b-list-group flush>
      <b-list-group-item href="#">Cras justo odio</b-list-group-item>
      <b-list-group-item href="#">Dapibus ac facilisis in</b-list-group-item>
      <b-list-group-item href="#">Vestibulum at eros</b-list-group-item>
    </b-list-group>

    <b-card-body>
      Quis magna Lorem anim amet ipsum do mollit sit cillum voluptate ex nulla tempor. Laborum
      consequat non elit enim exercitation cillum aliqua consequat id aliqua. Esse ex consectetur
      mollit voluptate est in duis laboris ad sit ipsum anim Lorem.
    </b-card-body>
  </b-card>
</b-card-group>

<!-- b-list-group-card.vue -->

横方向のリストグループ

プロパティ horizontal を true に設定して、リストグループアイテムのレイアウトをすべてのブレークポイントで垂直から水平に変更します。または、horizontal をレスポンシブブレークポイント（sm、md、lg、または xl）に設定して、そのブレークポイントの最小幅からリストグループを水平にします。現在、水平リストグループと flush リストグループを組み合わせることはできません。

ヒント：水平方向に等幅のリストグループアイテムが必要ですか？クラス flex-fill を各リストグループアイテムに追加します。

常に水平方向

<div>
  <b-list-group horizontal>
    <b-list-group-item>Cras justo odio</b-list-group-item>
    <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
    <b-list-group-item>Morbi leo risus</b-list-group-item>
  </b-list-group>
</div>

<!-- b-list-group-horizontal.vue -->

ブレークポイント md 以上で水平方向

<div>
  <b-list-group horizontal="md">
    <b-list-group-item>Cras justo odio</b-list-group-item>
    <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
    <b-list-group-item>Morbi leo risus</b-list-group-item>
  </b-list-group>
</div>

<!-- b-list-group-horizontal-md.vue -->

カスタムコンテンツ

フレックスボックスユーティリティクラスを使用して、以下のリンクされたリストグループのように、ほぼすべてのHTMLまたはコンポーネントを内部に追加します。

<b-list-group>
  <b-list-group-item href="#" active class="flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List Group item heading</h5>
      <small>3 days ago</small>
    </div>

    <p class="mb-1">
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </p>

    <small>Donec id elit non mi porta.</small>
  </b-list-group-item>

  <b-list-group-item href="#" class="flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List Group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>

    <p class="mb-1">
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </p>

    <small class="text-muted">Donec id elit non mi porta.</small>
  </b-list-group-item>

  <b-list-group-item href="#" disabled class="flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Disabled List Group item</h5>
      <small class="text-muted">3 days ago</small>
    </div>

    <p class="mb-1">
      Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
    </p>

    <small class="text-muted">Donec id elit non mi porta.</small>
  </b-list-group-item>
</b-list-group>

<!-- b-list-group-content.vue -->

コンポーネントリファレンス

<b-list-group>

関数型コンポーネント
ソースを表示

プロパティ

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ
タイプ
デフォルト
説明
flush
ブール値false設定すると、左右の境界線のない同一平面のリストグループがレンダリングされます
horizontal
Boolean または Stringfalse設定すると、デフォルトの垂直ではなく、リストグループが水平にレンダリングされます
tag
文字列'div'デフォルトタグの代わりにレンダリングするHTMLタグを指定します

スロット

名前
説明
デフォルト リストグループに配置するコンテンツ（アイテム）

<b-list-group-item>

関数型コンポーネント
ソースを表示

プロパティ

すべてのプロパティのデフォルト値は、グローバルに設定可能です。

プロパティ
（クリックして昇順にソート）
タイプ
（クリックして昇順にソート）
デフォルト
説明
action
ブール値false設定すると、アイテムにアクションがあるかのような外観が与えられます。プロパティ 'to'、 'href'、または 'button' が使用されている場合は不要です
active
ブール値false`true`に設定すると、コンポーネントはアクティブなスタイリングでアクティブ状態になります
active-class
文字列<router-link> プロパティ：リンクがアクティブなときに適用されるアクティブなCSSクラスを設定します。通常は、これをクラス名 'active' に設定します
append
ブール値false<router-link> プロパティ： appendプロパティを設定すると、常に相対パスが現在のパスに追加されます
button
ブール値falsetrueの場合、list-group-itemをボタン要素としてレンダリングします
disabled
ブール値false`true`に設定すると、コンポーネントの機能が無効になり、無効状態になります
exact
ブール値false<router-link> プロパティ：デフォルトのアクティブクラスマッチング動作は包括的マッチです。このプロパティを設定すると、モードはルートと完全に一致するように強制されます
exact-active-class
文字列<router-link> プロパティ：リンクが完全に一致してアクティブなときに適用されるアクティブなCSSクラスを設定します。通常は、これをクラス名 'active' に設定します
exact-path
ブール値false<router-link> プロパティ：URLのパスセクションのみを使用して一致させることができ、クエリセクションとハッシュセクションは事実上無視されます
exact-path-active-class
文字列<router-link> プロパティ：リンクが正確なパス一致でアクティブなときに適用されるアクティブなCSSクラスを設定します。通常は、これをクラス名 'active' に設定します
href
文字列<b-link> プロパティ：標準のaリンクのリンクのターゲットURLを示します
no-prefetch
ブール値false<nuxt-link> プロパティ： Nuxt.jsアプリケーションの応答性を向上させるために、リンクがビューポート内に表示されると、Nuxt.jsはコード分割されたページを自動的にプリフェッチします。 `no-prefetch`を設定すると、特定のリンクのこの機能が無効になります
prefetch
v2.15.0以降 		ブール値null<nuxt-link> プロパティ： Nuxt.jsアプリケーションの応答性を向上させるために、リンクがビューポート内に表示されると、Nuxt.jsはコード分割されたページを自動的にプリフェッチします。 `prefetch`を` true`または` false`に設定すると、` router.prefetchLinks`のデフォルト値が上書きされます
rel
文字列null<b-link> プロパティ：レンダリングされたリンクに` rel`属性を設定します
replace
ブール値false<router-link> プロパティ： replaceプロパティを設定すると、クリックされたときに` router.push（）`の代わりに` router.replace（）`が呼び出されるため、ナビゲーションは履歴レコードを残しません
router-component-name
v2.15.0以降 		文字列<b-link> プロパティ： BootstrapVueは、`<router-link>`と`<nuxt-link>`を自動的に検出します。 `<router-link>`に基づくサードパーティのリンクコンポーネントを使用する場合は、このプロパティをコンポーネント名に設定します。たとえば、Gridsomeを使用している場合は 'g-link' に設定します（`<router-link>` 固有のプロパティのみがコンポーネントに渡されることに注意してください）
tag
文字列'div'デフォルトタグの代わりにレンダリングするHTMLタグを指定します
target
文字列'_self'<b-link> プロパティ：レンダリングされたリンクに` target`属性を設定します
to
Object または String<router-link> プロパティ：リンクのターゲットルートを示します。クリックされると、toプロパティの値が内部で` router.push（）`に渡されるため、値は文字列またはLocation記述子オブジェクトのいずれかになります
variant
文字列Bootstrapテーマカラーバリアントのいずれかをコンポーネントに適用します

<b-list-group-item> は、<router-link> または <nuxt-link> コンポーネント (Nuxt.js を使用している場合) の生成をサポートしています。ルーターリンク (または nuxt リンク) 固有のプロパティの詳細については、ルーターサポート のリファレンスセクションを参照してください。

スロット

名前
説明
デフォルト リストグループアイテムに配置するコンテンツ

個々のコンポーネントのインポート

以下の名前付きエクスポートを使用して、個々のコンポーネントをプロジェクトにインポートできます。

コンポーネント
名前付きエクスポート
インポートパス
<b-list-group>BListGroupbootstrap-vue
<b-list-group-item>BListGroupItembootstrap-vue

例

import { BListGroup } from 'bootstrap-vue'
Vue.component('b-list-group', BListGroup)

Vue.js プラグインとしてのインポート

このプラグインには、上記にリストされているすべての個々のコンポーネントが含まれています。プラグインには、コンポーネントのエイリアスも含まれています。

名前付きエクスポート
インポートパス
ListGroupPluginbootstrap-vue

例

import { ListGroupPlugin } from 'bootstrap-vue'
Vue.use(ListGroupPlugin)