@ chakra-ui/ accordion

手风琴是一个垂直堆放的交互式标题集,每个标题 包含一个标题或内容片段,代表部分内容.

标题作为控制功能,使用户能够披露或隐藏其 内容的相关章节.

安装

yarn add @chakra-ui/accordion

# or

npm i @chakra-ui/accordion

导入组件

import {
  Accordion,
  AccordionItem,
  AccordionButton,
  AccordionPanel,
} from "@chakra-ui/accordion"

组件 :

• Accordion: 管理所有打开的手风琴物品的全球状况 上下文.
• AccordionItem:管理单手风琴物品的状态.
• AccordionButton:打开/关闭手风琴物品的触发器.
• AccordionPanel:手风琴项目的主要内容区.

使用量

默认一次只可见一管风琴,不可能 切换.

说明:每个手风琴按钮必须用标题标签来包裹,即 适合页面信息架构.

<Accordion>
  <AccordionItem>
    <h2>
      <AccordionButton>Section 1 title</AccordionButton>
    </h2>
    <AccordionPanel>Panel 1</AccordionPanel>
  </AccordionItem>

  <AccordionItem>
    <h2>
      <AccordionButton>Section 2 title</AccordionButton>
    </h2>
    <AccordionPanel>Panel 2</AccordionPanel>
  </AccordionItem>
</Accordion>

要让每个手风琴切换( 扩展/ 缩放) 点击时, 通过 allowToggle 道具 (英语).

<Accordion allowToggle>
  <AccordionItem>
    <AccordionButton>
      <chakra.div flex="1" textAlign="left">
        Section 1 title
      </chakra.div>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel pb={4}>Panel 1</AccordionPanel>
  </AccordionItem>

  <AccordionItem>
    <AccordionButton>
      <chakra.div flex="1" textAlign="left">
        Section 2 title
      </chakra.div>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel pb={4}>Panel 2</AccordionPanel>
  </AccordionItem>
</Accordion>

为了让多个手风琴一次可见,通过 allowMultiple 道具 (英语).

<Accordion allowMultiple>
  <AccordionItem>
    <AccordionButton>
      <chakra.div flex="1" textAlign="left">
        Section 1 title
      </chakra.div>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel pb={4}>Panel 1</AccordionPanel>
  </AccordionItem>

  <AccordionItem>
    <AccordionButton>
      <chakra.div flex="1" textAlign="left">
        Section 2 title
      </chakra.div>
      <AccordionIcon />
    </AccordionButton>
    <AccordionPanel pb={4}>Panel 2</AccordionPanel>
  </AccordionItem>
</Accordion>

参考文献:

https://www.w3.org/TR/wai-aria-practices/examples/accordion/accordion.html 页面存档备份,存于互联网档案馆 https://兼容并蓄-组件.design/collapsible-sections/ https://github.com/stereobooster/react-access-access-accordion 互联网档案馆的存檔,存档日期2013-12-21 https://jqueryui.com/accordion/ (中文(中国大陆) )