reactjs 如何在shadcn ui accordion中将一个项目设置为默认打开?

px9o7tmv  于 12个月前  发布在  React
关注(0)|答案(3)|浏览(147)

我在shadcn ui中使用accordion,默认情况下所有accordion项目都是折叠的。我希望第一个项目默认情况下不折叠。如何实现?
我试着给Accordion组件传递一个defaultValue属性,但是没有成功。

w6lpcovy

w6lpcovy1#

<Accordion
          type="multiple"
          className="w-full"
          defaultValue={["tools", "style", "status", "region"]}
        ></Accordion>

//type must be "multiple", and than you can give string array as defaultValue

字符串

sirbozc5

sirbozc52#

我将type设置为"single",并添加了collapsible以使该项目可以打开和关闭,即使它最初默认为打开。

<Accordion
  type="single"
  collapsible
  defaultValue="item-1"
  className=""
></Accordion>

字符串

4ktjp1zp

4ktjp1zp3#

这里是完整的示例。您只需为AccordionItem分配一个值,然后在defaultValue中添加相同的值。它将默认打开。

<Accordion type="single" defaultValue="colors" className="w-full">
          <AccordionItem value="colors">
            <AccordionTrigger className="flex items-center justify-between pr-4">
              <span className="text-base font-[550]">Colors</span>
              {isAccordionActive ? <ChevronDownIcon /> : <ChevronUpIcon />}
            </AccordionTrigger>
            <AccordionContent>
              <div className="grid grid-cols-3 gap-4">
                {sidebarData.colors.map((color, index) => (
                  <div
                    key={index}
                    className="flex flex-col gap-1 items-center justify-center"
                  >
                    <div
                      className={`!w-[1.8rem] !h-[1.8rem] rounded-full bg-[${color.code}]`}
                    ></div>
                    <span>{color.colorName}</span>
                  </div>
                ))}
              </div>
            </AccordionContent>
          </AccordionItem>
        </Accordion>

字符串
我在这里找到了解决办法

相关问题