リストグループ

リストグループは、一連のコンテンツを表示するための柔軟で強力なコンポーネントです。 ほぼすべてのコンテンツをサポートするように変更および拡張できます。

基本的な例

結果

読み込み中...

ライブエディター

import ListGroup from 'react-bootstrap/ListGroup'; function DefaultExample() { return ( <ListGroup> <ListGroup.Item>Cras justo odio</ListGroup.Item> <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item> <ListGroup.Item>Morbi leo risus</ListGroup.Item> <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item> <ListGroup.Item>Vestibulum at eros</ListGroup.Item> </ListGroup> ); } export default DefaultExample;

import ListGroup from 'react-bootstrap/ListGroup';

function DefaultExample() {
  return (
    <ListGroup>
      <ListGroup.Item>Cras justo odio</ListGroup.Item>
      <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
      <ListGroup.Item>Morbi leo risus</ListGroup.Item>
      <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
      <ListGroup.Item>Vestibulum at eros</ListGroup.Item>
    </ListGroup>
  );
}

export default DefaultExample;

アクティブなアイテム

リストグループの現在アクティブな選択を示すには、activeプロパティを設定します。

結果

読み込み中...

ライブエディター

import ListGroup from 'react-bootstrap/ListGroup'; function ActiveExample() { return ( <ListGroup as="ul"> <ListGroup.Item as="li" active> Cras justo odio </ListGroup.Item> <ListGroup.Item as="li">Dapibus ac facilisis in</ListGroup.Item> <ListGroup.Item as="li" disabled> Morbi leo risus </ListGroup.Item> <ListGroup.Item as="li">Porta ac consectetur ac</ListGroup.Item> </ListGroup> ); } export default ActiveExample;

import ListGroup from 'react-bootstrap/ListGroup';

function ActiveExample() {
  return (
    <ListGroup as="ul">
      <ListGroup.Item as="li" active>
        Cras justo odio
      </ListGroup.Item>
      <ListGroup.Item as="li">Dapibus ac facilisis in</ListGroup.Item>
      <ListGroup.Item as="li" disabled>
        Morbi leo risus
      </ListGroup.Item>
      <ListGroup.Item as="li">Porta ac consectetur ac</ListGroup.Item>
    </ListGroup>
  );
}

export default ActiveExample;

無効化されたアイテム

<ListGroup.Item>のアクションを禁止するには、disabledプロパティを設定します。 本来無効にできない要素（アンカーなど）の場合、無効化された動作を模倣するためにpreventDefaultを呼び出すonClickハンドラーが追加されます。

結果

読み込み中...

ライブエディター

import ListGroup from 'react-bootstrap/ListGroup'; function DisabledExample() { return ( <ListGroup> <ListGroup.Item disabled>Cras justo odio</ListGroup.Item> <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item> <ListGroup.Item>Morbi leo risus</ListGroup.Item> <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item> </ListGroup> ); } export default DisabledExample;

import ListGroup from 'react-bootstrap/ListGroup';

function DisabledExample() {
  return (
    <ListGroup>
      <ListGroup.Item disabled>Cras justo odio</ListGroup.Item>
      <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
      <ListGroup.Item>Morbi leo risus</ListGroup.Item>
      <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
    </ListGroup>
  );
}

export default DisabledExample;

アクション可能なアイテム

無効化、ホバー、アクティブスタイルを備えた*アクション可能な*リストグループアイテムを作成するには、actionプロパティを切り替えます。 リストアイテムアクションは、デフォルトで<button>または<a>（hrefの有無に応じて）をレンダリングしますが、通常どおりasプロパティを設定することでオーバーライドできます。

クリックまたはタップのアフォーダンスが非インタラクティブなアイテムに適用されないように、リストアイテムのactionはプレーンアイテムとは異なります。

結果

読み込み中...

ライブエディター

import ListGroup from 'react-bootstrap/ListGroup'; function LinkedExample() { const alertClicked = () => { alert('You clicked the third ListGroupItem'); }; return ( <ListGroup defaultActiveKey="#link1"> <ListGroup.Item action href="#link1"> Link 1 </ListGroup.Item> <ListGroup.Item action href="#link2" disabled> Link 2 </ListGroup.Item> <ListGroup.Item action onClick={alertClicked}> This one is a button </ListGroup.Item> </ListGroup> ); } export default LinkedExample;

import ListGroup from 'react-bootstrap/ListGroup';

function LinkedExample() {
  const alertClicked = () => {
    alert('You clicked the third ListGroupItem');
  };

  return (
    <ListGroup defaultActiveKey="#link1">
      <ListGroup.Item action href="#link1">
        Link 1
      </ListGroup.Item>
      <ListGroup.Item action href="#link2" disabled>
        Link 2
      </ListGroup.Item>
      <ListGroup.Item action onClick={alertClicked}>
        This one is a button
      </ListGroup.Item>
    </ListGroup>
  );
}

export default LinkedExample;

フラッシュ

親コンテナ（Cardなど）でリストグループアイテムを端から端までレンダリングするために、外側の境界線と角丸を削除するには、flushバリアントを追加します。

結果

読み込み中...

ライブエディター

import ListGroup from 'react-bootstrap/ListGroup'; function FlushExample() { return ( <ListGroup variant="flush"> <ListGroup.Item>Cras justo odio</ListGroup.Item> <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item> <ListGroup.Item>Morbi leo risus</ListGroup.Item> <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item> </ListGroup> ); } export default FlushExample;

import ListGroup from 'react-bootstrap/ListGroup';

function FlushExample() {
  return (
    <ListGroup variant="flush">
      <ListGroup.Item>Cras justo odio</ListGroup.Item>
      <ListGroup.Item>Dapibus ac facilisis in</ListGroup.Item>
      <ListGroup.Item>Morbi leo risus</ListGroup.Item>
      <ListGroup.Item>Porta ac consectetur ac</ListGroup.Item>
    </ListGroup>
  );
}

export default FlushExample;

番号付き

番号付きリストグループアイテムを選択するには、numberedプロパティを追加します。 リストグループアイテム内での配置を改善し、カスタマイズを向上させるために、番号はCSS（<ol>のデフォルトのブラウザスタイリングとは対照的に）によって生成されます。

結果

読み込み中...

ライブエディター

import ListGroup from 'react-bootstrap/ListGroup'; function NumberedExample() { return ( <ListGroup as="ol" numbered> <ListGroup.Item as="li">Cras justo odio</ListGroup.Item> <ListGroup.Item as="li">Cras justo odio</ListGroup.Item> <ListGroup.Item as="li">Cras justo odio</ListGroup.Item> </ListGroup> ); } export default NumberedExample;

import ListGroup from 'react-bootstrap/ListGroup';

function NumberedExample() {
  return (
    <ListGroup as="ol" numbered>
      <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
      <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
      <ListGroup.Item as="li">Cras justo odio</ListGroup.Item>
    </ListGroup>
  );
}

export default NumberedExample;

これらはカスタムコンテンツでも отлично funktionieren.

結果

読み込み中...

ライブエディター

import Badge from 'react-bootstrap/Badge'; import ListGroup from 'react-bootstrap/ListGroup'; function DefaultExample() { return ( <ListGroup as="ol" numbered> <ListGroup.Item as="li" className="d-flex justify-content-between align-items-start" > <div className="ms-2 me-auto"> <div className="fw-bold">Subheading</div> Cras justo odio </div> <Badge bg="primary" pill> 14 </Badge> </ListGroup.Item> <ListGroup.Item as="li" className="d-flex justify-content-between align-items-start" > <div className="ms-2 me-auto"> <div className="fw-bold">Subheading</div> Cras justo odio </div> <Badge bg="primary" pill> 14 </Badge> </ListGroup.Item> <ListGroup.Item as="li" className="d-flex justify-content-between align-items-start" > <div className="ms-2 me-auto"> <div className="fw-bold">Subheading</div> Cras justo odio </div> <Badge bg="primary" pill> 14 </Badge> </ListGroup.Item> </ListGroup> ); } export default DefaultExample;

import Badge from 'react-bootstrap/Badge';
import ListGroup from 'react-bootstrap/ListGroup';

function DefaultExample() {
  return (
    <ListGroup as="ol" numbered>
      <ListGroup.Item
        as="li"
        className="d-flex justify-content-between align-items-start"
      >
        <div className="ms-2 me-auto">
          <div className="fw-bold">Subheading</div>
          Cras justo odio
        </div>
        <Badge bg="primary" pill>
          14
        </Badge>
      </ListGroup.Item>
      <ListGroup.Item
        as="li"
        className="d-flex justify-content-between align-items-start"
      >
        <div className="ms-2 me-auto">
          <div className="fw-bold">Subheading</div>
          Cras justo odio
        </div>
        <Badge bg="primary" pill>
          14
        </Badge>
      </ListGroup.Item>
      <ListGroup.Item
        as="li"
        className="d-flex justify-content-between align-items-start"
      >
        <div className="ms-2 me-auto">
          <div className="fw-bold">Subheading</div>
          Cras justo odio
        </div>
        <Badge bg="primary" pill>
          14
        </Badge>
      </ListGroup.Item>
    </ListGroup>
  );
}

export default DefaultExample;

水平方向

ListGroupを水平方向にレンダリングするには、horizontalプロパティを使用します。 現在、**水平リストグループはフラッシュリストグループと組み合わせることはできません。**

結果

読み込み中...

ライブエディター

import ListGroup from 'react-bootstrap/ListGroup'; function HorizontalExample() { return ( <ListGroup horizontal> <ListGroup.Item>This</ListGroup.Item> <ListGroup.Item>ListGroup</ListGroup.Item> <ListGroup.Item>renders</ListGroup.Item> <ListGroup.Item>horizontally!</ListGroup.Item> </ListGroup> ); } export default HorizontalExample;

import ListGroup from 'react-bootstrap/ListGroup';

function HorizontalExample() {
  return (
    <ListGroup horizontal>
      <ListGroup.Item>This</ListGroup.Item>
      <ListGroup.Item>ListGroup</ListGroup.Item>
      <ListGroup.Item>renders</ListGroup.Item>
      <ListGroup.Item>horizontally!</ListGroup.Item>
    </ListGroup>
  );
}

export default HorizontalExample;

horizontalにはレスポンシブバリアントがあります。{sm|md|lg|xl|xxl}に設定すると、リストグループはそのブレークポイントのmin-widthから水平方向になります。

結果

読み込み中...

ライブエディター

import ListGroup from 'react-bootstrap/ListGroup'; function HorizontalResponsiveExample() { return ( <> {['sm', 'md', 'lg', 'xl', 'xxl'].map((breakpoint) => ( <ListGroup key={breakpoint} horizontal={breakpoint} className="my-2"> <ListGroup.Item>This ListGroup</ListGroup.Item> <ListGroup.Item>renders horizontally</ListGroup.Item> <ListGroup.Item>on {breakpoint}</ListGroup.Item> <ListGroup.Item>and above!</ListGroup.Item> </ListGroup> ))} </> ); } export default HorizontalResponsiveExample;

import ListGroup from 'react-bootstrap/ListGroup';

function HorizontalResponsiveExample() {
  return (
    <>
      {['sm', 'md', 'lg', 'xl', 'xxl'].map((breakpoint) => (
        <ListGroup key={breakpoint} horizontal={breakpoint} className="my-2">
          <ListGroup.Item>This ListGroup</ListGroup.Item>
          <ListGroup.Item>renders horizontally</ListGroup.Item>
          <ListGroup.Item>on {breakpoint}</ListGroup.Item>
          <ListGroup.Item>and above!</ListGroup.Item>
        </ListGroup>
      ))}
    </>
  );
}

export default HorizontalResponsiveExample;

コンテキストクラス

<ListGroup.Item>でコンテキストバリアントを使用して、状態に応じた背景と色でスタイルを設定します。

結果

読み込み中...

ライブエディター

import ListGroup from 'react-bootstrap/ListGroup'; function StyleExample() { return ( <ListGroup> <ListGroup.Item>No style</ListGroup.Item> <ListGroup.Item variant="primary">Primary</ListGroup.Item> <ListGroup.Item variant="secondary">Secondary</ListGroup.Item> <ListGroup.Item variant="success">Success</ListGroup.Item> <ListGroup.Item variant="danger">Danger</ListGroup.Item> <ListGroup.Item variant="warning">Warning</ListGroup.Item> <ListGroup.Item variant="info">Info</ListGroup.Item> <ListGroup.Item variant="light">Light</ListGroup.Item> <ListGroup.Item variant="dark">Dark</ListGroup.Item> </ListGroup> ); } export default StyleExample;

import ListGroup from 'react-bootstrap/ListGroup';

function StyleExample() {
  return (
    <ListGroup>
      <ListGroup.Item>No style</ListGroup.Item>
      <ListGroup.Item variant="primary">Primary</ListGroup.Item>
      <ListGroup.Item variant="secondary">Secondary</ListGroup.Item>
      <ListGroup.Item variant="success">Success</ListGroup.Item>
      <ListGroup.Item variant="danger">Danger</ListGroup.Item>
      <ListGroup.Item variant="warning">Warning</ListGroup.Item>
      <ListGroup.Item variant="info">Info</ListGroup.Item>
      <ListGroup.Item variant="light">Light</ListGroup.Item>
      <ListGroup.Item variant="dark">Dark</ListGroup.Item>
    </ListGroup>
  );
}

export default StyleExample;

actionと組み合わせると、追加のホバーとアクティブスタイルが適用されます。

結果

読み込み中...

ライブエディター

import ListGroup from 'react-bootstrap/ListGroup'; function StyleActionsExample() { return ( <ListGroup> <ListGroup.Item>No style</ListGroup.Item> <ListGroup.Item variant="primary">Primary</ListGroup.Item> <ListGroup.Item action variant="secondary"> Secondary </ListGroup.Item> <ListGroup.Item action variant="success"> Success </ListGroup.Item> <ListGroup.Item action variant="danger"> Danger </ListGroup.Item> <ListGroup.Item action variant="warning"> Warning </ListGroup.Item> <ListGroup.Item action variant="info"> Info </ListGroup.Item> <ListGroup.Item action variant="light"> Light </ListGroup.Item> <ListGroup.Item action variant="dark"> Dark </ListGroup.Item> </ListGroup> ); } export default StyleActionsExample;

import ListGroup from 'react-bootstrap/ListGroup';

function StyleActionsExample() {
  return (
    <ListGroup>
      <ListGroup.Item>No style</ListGroup.Item>
      <ListGroup.Item variant="primary">Primary</ListGroup.Item>
      <ListGroup.Item action variant="secondary">
        Secondary
      </ListGroup.Item>
      <ListGroup.Item action variant="success">
        Success
      </ListGroup.Item>
      <ListGroup.Item action variant="danger">
        Danger
      </ListGroup.Item>
      <ListGroup.Item action variant="warning">
        Warning
      </ListGroup.Item>
      <ListGroup.Item action variant="info">
        Info
      </ListGroup.Item>
      <ListGroup.Item action variant="light">
        Light
      </ListGroup.Item>
      <ListGroup.Item action variant="dark">
        Dark
      </ListGroup.Item>
    </ListGroup>
  );
}

export default StyleActionsExample;

支援技術への意味の伝達

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

タブ付きインターフェース

<ListGroup>コンポーネントを使用して、ARIA準拠のタブ付きインターフェースを作成するために、[タブ] [tabs]コンポーネントを使用することもできます。 <Nav>コンポーネントをリストグループに交換すれば、準備完了です。

結果

読み込み中...

ライブエディター

import Col from 'react-bootstrap/Col'; import ListGroup from 'react-bootstrap/ListGroup'; import Row from 'react-bootstrap/Row'; import Tab from 'react-bootstrap/Tab'; function TabsExample() { return ( <Tab.Container id="list-group-tabs-example" defaultActiveKey="#link1"> <Row> <Col sm={4}> <ListGroup> <ListGroup.Item action href="#link1"> Link 1 </ListGroup.Item> <ListGroup.Item action href="#link2"> Link 2 </ListGroup.Item> </ListGroup> </Col> <Col sm={8}> <Tab.Content> <Tab.Pane eventKey="#link1">Tab pane content 1</Tab.Pane> <Tab.Pane eventKey="#link2">Tab pane content 2</Tab.Pane> </Tab.Content> </Col> </Row> </Tab.Container> ); } export default TabsExample;

import Col from 'react-bootstrap/Col';
import ListGroup from 'react-bootstrap/ListGroup';
import Row from 'react-bootstrap/Row';
import Tab from 'react-bootstrap/Tab';

function TabsExample() {
  return (
    <Tab.Container id="list-group-tabs-example" defaultActiveKey="#link1">
      <Row>
        <Col sm={4}>
          <ListGroup>
            <ListGroup.Item action href="#link1">
              Link 1
            </ListGroup.Item>
            <ListGroup.Item action href="#link2">
              Link 2
            </ListGroup.Item>
          </ListGroup>
        </Col>
        <Col sm={8}>
          <Tab.Content>
            <Tab.Pane eventKey="#link1">Tab pane content 1</Tab.Pane>
            <Tab.Pane eventKey="#link2">Tab pane content 2</Tab.Pane>
          </Tab.Content>
        </Col>
      </Row>
    </Tab.Container>
  );
}

export default TabsExample;

API

ListGroup

ListGroupItem