リストグループ

Basic examples

最も基本的なリストグループは、リスト項目と適切なクラスを持つ順不同のリストです。以下のオプションを参考にしてください。必要に応じて独自のCSSを使ってそれを構築してください。

An item
A second item
A third item
A fourth item
And a fifth one

vue

<template>
 <ListGroupList>
  <ListGroupItem toggle="list">
   An item
  </ListGroupItem>
  <ListGroupItem toggle="list">
   A second item
  </ListGroupItem>
  <ListGroupItem toggle="list">
   A third item
  </ListGroupItem>
  <ListGroupItem toggle="list">
   A fourth item
  </ListGroupItem>
  <ListGroupItem toggle="list">
   And a fifth one
  </ListGroupItem>
 </ListGroupList>
</template>

Active items

現在アクティブな選択範囲を示すためにはListGroupItemにactiveを追加します。

An active item
A second item
A third item
A fourth item
And a fifth one

vue

<template>
 <ListGroupList>
  <ListGroupItem active>
   An active item
  </ListGroupItem>
  <ListGroupItem>A second item</ListGroupItem>
  <ListGroupItem>A third item</ListGroupItem>
  <ListGroupItem>A fourth item</ListGroupItem>
  <ListGroupItem>And a fifth one</ListGroupItem>
 </ListGroupList>
</template>

Disabled items

ListGroupItemにdisabledを追加すると、ListGroupItemが無効化されているように見えます。

A disabled item
A second item
A third item
A fourth item
And a fifth one

vue

<template>
 <ListGroupList>
  <ListGroupItem disabled>
   A disabled item
  </ListGroupItem>
  <ListGroupItem>A second item</ListGroupItem>
  <ListGroupItem>A third item</ListGroupItem>
  <ListGroupItem>A fourth item</ListGroupItem>
  <ListGroupItem>And a fifth one</ListGroupItem>
 </ListGroupList>
</template>

Links and buttons

リストグループにListGroupItemActionを追加して、ホバー、無効、アクティブの状態を持つ_actionable_リストグループ項目を作成するには。

The current link item A second link item A third link item A fourth link item A disabled link item

vue

<template>
 <ListGroup>
  <ListGroupItemAction
   toggle="list"
   active
  >
   The current link item
  </ListGroupItemAction>
  <ListGroupItemAction toggle="list">
   A second link item
  </ListGroupItemAction>
  <ListGroupItemAction toggle="list">
   A third link item
  </ListGroupItemAction>
  <ListGroupItemAction toggle="list">
   A fourth link item
  </ListGroupItemAction>
  <ListGroupItemAction disabled>
   A disabled link item
  </ListGroupItemAction>
 </ListGroup>
</template>

A disabled button item

vue

<template>
 <ListGroupList>
  <ListGroupItemAction
   to="/lang-en/components/list-group"
   dynamic-route
  >
   The current button
  </ListGroupItemAction>
  <ListGroupItemAction to="/">
   A second item
  </ListGroupItemAction>
  <ListGroupItemAction to="/">
   A third item
  </ListGroupItemAction>
  <ListGroupItemAction to="/">
   A fourth item
  </ListGroupItemAction>
  <ListGroupItemAction
   to="/"
   disabled
  >
   A disabled button item
  </ListGroupItemAction>
 </ListGroupList>
</template>

Flush

ListGroupFlushを追加して、親コンテナ(カードなど)のリストグループ項目を端から端までレンダリングするために、いくつかの境界線と角の丸みを取り除きます。

An item
A second item
A third item
A fourth item
And a fifth one

vue

<template>
 <ListGroupList flush>
  <ListGroupItem>An item</ListGroupItem>
  <ListGroupItem>A second item</ListGroupItem>
  <ListGroupItem>A third item</ListGroupItem>
  <ListGroupItem>A fourth item</ListGroupItem>
  <ListGroupItem>And a fifth one</ListGroupItem>
 </ListGroupList>
</template>

Numbered

A list item
A list item
A list item

vue

<template>
 <ListGroupList numbered>
  <ListGroupItem>A list item</ListGroupItem>
  <ListGroupItem>A list item</ListGroupItem>
  <ListGroupItem>A list item</ListGroupItem>
 </ListGroupList>
</template>

これらはカスタムコンテンツとも相性が良いです。

Subheading
Content for list item
14
Subheading
Content for list item
14
Subheading
Content for list item
14

vue

<template>
 <ListGroupList numbered>
  <ListGroupItem
   flex
   justify-content="between"
   align-items="start"
  >
   <b-div margin="s-2 e-auto">
    <b-div font-weight="bold">
     Subheading
    </b-div>
    Content for list item
   </b-div>
   <Badge
    color="primary"
    pill
   >
    14
   </Badge>
  </ListGroupItem>
  <ListGroupItem
   flex
   justify-content="between"
   align-items="start"
  >
   <b-div margin="s-2 e-auto">
    <b-div font-weight="bold">
     Subheading
    </b-div>
    Content for list item
   </b-div>
   <Badge
    color="primary"
    pill
   >
    14
   </Badge>
  </ListGroupItem>
  <ListGroupItem
   flex
   justify-content="between"
   align-items="start"
  >
   <b-div margin="s-2 e-auto">
    <b-div font-weight="bold">
     Subheading
    </b-div>
    Content for list item
   </b-div>
   <Badge
    color="primary"
    pill
   >
    14
   </Badge>
  </ListGroupItem>
 </ListGroupList>
</template>

Horizontal

リストグループのアイテムのレイアウトをすべてのブレークポイントで垂直から水平に変更するには、horizontal属性を追加します。あるいは、レスポンシブバリアントのhorizontal={sm|md|lg|xl|xxl}を選択して、ブレークポイントのmin-widthから始まるリストグループを水平にします。現在、水平リストグループをflushリストグループと組み合わせることはできません。

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

An item
A second item
A third item

vue

<template>
 <ListGroupList horizontal>
  <ListGroupItem>An item</ListGroupItem>
  <ListGroupItem>A second item</ListGroupItem>
  <ListGroupItem>A third item</ListGroupItem>
 </ListGroupList>
 <ListGroupList horizontal="sm">
  <ListGroupItem>An item</ListGroupItem>
  <ListGroupItem>A second item</ListGroupItem>
  <ListGroupItem>A third item</ListGroupItem>
 </ListGroupList>
 <ListGroupList horizontal="md">
  <ListGroupItem>An item</ListGroupItem>
  <ListGroupItem>A second item</ListGroupItem>
  <ListGroupItem>A third item</ListGroupItem>
 </ListGroupList>
 <ListGroupList horizontal="lg">
  <ListGroupItem>An item</ListGroupItem>
  <ListGroupItem>A second item</ListGroupItem>
  <ListGroupItem>A third item</ListGroupItem>
 </ListGroupList>
 <ListGroupList horizontal="xl">
  <ListGroupItem>An item</ListGroupItem>
  <ListGroupItem>A second item</ListGroupItem>
  <ListGroupItem>A third item</ListGroupItem>
 </ListGroupList>
 <ListGroupList horizontal="xxl">
  <ListGroupItem>An item</ListGroupItem>
  <ListGroupItem>A second item</ListGroupItem>
  <ListGroupItem>A third item</ListGroupItem>
 </ListGroupList>
</template>

Theme Color

A simple default list group item
A simple primary list group item
A simple secondary list group item
A simple success list group item
A simple danger list group item
A simple warning list group item
A simple info list group item
A simple light list group item
A simple dark list group item

vue

<template>
 <ListGroupList>
  <ListGroupItem>
   A simple default list group item
  </ListGroupItem>
  <ListGroupItem color="primary">
   A simple primary list group item
  </ListGroupItem>
  <ListGroupItem color="secondary">
   A simple secondary list group item
  </ListGroupItem>
  <ListGroupItem color="success">
   A simple success list group item
  </ListGroupItem>
  <ListGroupItem color="danger">
   A simple danger list group item
  </ListGroupItem>
  <ListGroupItem color="warning">
   A simple warning list group item
  </ListGroupItem>
  <ListGroupItem color="info">
   A simple info list group item
  </ListGroupItem>
  <ListGroupItem color="light">
   A simple light list group item
  </ListGroupItem>
  <ListGroupItem color="dark">
   A simple dark list group item
  </ListGroupItem>
 </ListGroupList>
</template>

For links and button

A simple default list group item A simple primary list group item A simple secondary list group item A simple success list group item A simple danger list group item A simple warning list group item A simple info list group item A simple light list group item A simple dark list group item

vue

<template>
 <ListGroup>
  <ListGroupItemAction>
   A simple default list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="primary">
   A simple primary list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="secondary">
   A simple secondary list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="success">
   A simple success list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="danger">
   A simple danger list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="warning">
   A simple warning list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="info">
   A simple info list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="light">
   A simple light list group item
  </ListGroupItemAction>
  <ListGroupItemAction color="dark">
   A simple dark list group item
  </ListGroupItemAction>
 </ListGroup>
</template>

With badges

A list item 14
A second list item 2
A third list item 1

vue

<template>
 <ListGroupList>
  <ListGroupItem
   flex
   justify-content="between"
   align-items="center"
  >
   A list item
   <Badge
    color="primary"
    pill
   >
    14
   </Badge>
  </ListGroupItem>
  <ListGroupItem
   flex
   justify-content="between"
   align-items="center"
  >
   A second list item
   <Badge
    color="primary"
    pill
   >
    2
   </Badge>
  </ListGroupItem>
  <ListGroupItem
   flex
   justify-content="between"
   align-items="center"
  >
   A third list item
   <Badge
    color="primary"
    pill
   >
    1
   </Badge>
  </ListGroupItem>
 </ListGroupList>
</template>

Custom content

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

List group item heading

3 days ago

Some placeholder content in a paragraph.

And some small print.

vue

<template>
 <ListGroupList>
  <ListGroupItem
   flex
   justify-content="between"
   align-items="center"
  >
   A list item
   <Badge
    color="primary"
    pill
   >
    14
   </Badge>
  </ListGroupItem>
  <ListGroupItem
   flex
   justify-content="between"
   align-items="center"
  >
   A second list item
   <Badge
    color="primary"
    pill
   >
    2
   </Badge>
  </ListGroupItem>
  <ListGroupItem
   flex
   justify-content="between"
   align-items="center"
  >
   A third list item
   <Badge
    color="primary"
    pill
   >
    1
   </Badge>
  </ListGroupItem>
 </ListGroupList>
</template>

Checkboxes and radios

リストグループの項目内にチェックボックスとラジオを配置し、必要に応じてカスタマイズできます。<BFormCheckLabel>なしでも使用できますが、アクセシビリティのためにaria-label属性と値を含めることを忘れないでください。

First checkbox
Second checkbox
Third checkbox

vue

<template>
 <ListGroupList>
  <ListGroupItem>
   <BFormCheckInput
    id="firstCheckBox"
    type="checkbox"
    margin="e-2"
    value=""
   />
   <BFormCheckLabel for="firstCheckBox">
    First checkbox
   </BFormCheckLabel>
  </ListGroupItem>
  <ListGroupItem>
   <BFormCheckInput
    id="secondCheckBox"
    type="checkbox"
    margin="e-2"
    value=""
   />
   <BFormCheckLabel for="secondCheckBox">
    Second checkbox
   </BFormCheckLabel>
  </ListGroupItem>
  <ListGroupItem>
   <BFormCheckInput
    id="thirdCheckBox"
    type="checkbox"
    margin="e-2"
    value=""
   />
   <BFormCheckLabel for="thirdCheckBox">
    Third checkbox
   </BFormCheckLabel>
  </ListGroupItem>
 </ListGroupList>
</template>

First RadioBox
Second RadioBox
Third RadioBox

vue

<template>
 <ListGroupList>
  <ListGroupItem>
   <BFormCheckInput
    id="firstRadioBox"
    type="radio"
    name="listGroupRadio"
    margin="e-2"
    value=""
   />
   <BFormCheckLabel for="firstRadioBox">
    First RadioBox
   </BFormCheckLabel>
  </ListGroupItem>
  <ListGroupItem>
   <BFormCheckInput
    id="secondRadioBox"
    type="radio"
    name="listGroupRadio"
    margin="e-2"
    value=""
   />
   <BFormCheckLabel for="secondRadioBox">
    Second RadioBox
   </BFormCheckLabel>
  </ListGroupItem>
  <ListGroupItem>
   <BFormCheckInput
    id="thirdRadioBox"
    type="radio"
    name="listGroupRadio"
    margin="e-2"
    value=""
   />
   <BFormCheckLabel for="thirdRadioBox">
    Third RadioBox
   </BFormCheckLabel>
  </ListGroupItem>
 </ListGroupList>
</template>

また、大きなヒット領域のために<BFormCheckLabel>をstretchedとして使用したい場合は、下記の例を参考にしてください。

First checkbox
Second checkbox
Third checkbox

vue

<template>
 <ListGroupList>
  <ListGroupItem>
   <BFormCheckInput
    id="firstCheckBoxStretched"
    type="checkbox"
    margin="e-2"
    value=""
   />
   <BFormCheckLabel
    stretched
    for="firstCheckBoxStretched"
   >
    First checkbox
   </BFormCheckLabel>
  </ListGroupItem>
  <ListGroupItem>
   <BFormCheckInput
    id="secondCheckBoxStretched"
    type="checkbox"
    margin="e-2"
    value=""
   />
   <BFormCheckLabel
    stretched
    for="secondCheckBoxStretched"
   >
    Second checkbox
   </BFormCheckLabel>
  </ListGroupItem>
  <ListGroupItem>
   <BFormCheckInput
    id="thirdCheckBoxStretched"
    type="checkbox"
    margin="e-2"
    value=""
   />
   <BFormCheckLabel
    stretched
    for="thirdCheckBoxStretched"
   >
    Third checkbox
   </BFormCheckLabel>
  </ListGroupItem>
 </ListGroupList>
</template>

Extend

Theme colors

primary
secondary
success
danger
warning
info
light
dark
primary-subtle
secondary-subtle
success-subtle
danger-subtle
warning-subtle
info-subtle
light-subtle
dark-subtle

All colors

blue

blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900

indigo

indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900

purple

purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900

pink

pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900

red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900

orange

orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900

yellow

yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900

green

green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900

teal

teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900

cyan

cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900

Integration

Sortable

An item

A second item

A third item

A fourth item

And a fifth one

[
 {
  "id": 1,
  "name": "An item"
 },
 {
  "id": 2,
  "name": "A second item"
 },
 {
  "id": 3,
  "name": "A third item"
 },
 {
  "id": 4,
  "name": "A fourth item"
 },
 {
  "id": 5,
  "name": "And a fifth one"
 }
]

vue

<template>
 <ViewState
  v-slot="example"
  src="state://sortable/"
  :data="[
   { id: 1, name: 'An item' },
   { id: 2, name: 'A second item' },
   { id: 3, name: 'A third item' },
   { id: 4, name: 'A fourth item' },
   { id: 5, name: 'And a fifth one' },
  ]"
 >
  <ListGroupList>
   <Sortable
    :state-src="example"
   >
    <ListGroupItem
     v-for="item in example.data"
     :id="`${item.id}`"
     :key="item.id"
     toggle="list"
    >
     {{ item.name }}
    </ListGroupItem>
   </Sortable>
  </ListGroupList>
  <JsonView :data="example.data" />
 </ViewState>
</template>

Bootstrap

リストグループ

Basic examples

Active items

Disabled items

Links and buttons

Flush

Numbered

Horizontal

Theme Color

For links and button

With badges

Custom content

List group item heading

List group item heading

List group item heading

Checkboxes and radios

Extend

Theme colors

All colors

Integration

Sortable