我在shadcn ui中使用accordion,默认情况下所有accordion项目都是折叠的。我希望第一个项目默认情况下不折叠。如何实现?我试着给Accordion组件传递一个defaultValue属性,但是没有成功。
Accordion
defaultValue
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
字符串
sirbozc52#
我将type设置为"single",并添加了collapsible以使该项目可以打开和关闭,即使它最初默认为打开。
type
"single"
collapsible
<Accordion type="single" collapsible defaultValue="item-1" className="" ></Accordion>
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>
字符串我在这里找到了解决办法
3条答案
按热度按时间w6lpcovy1#
字符串
sirbozc52#
我将
type
设置为"single"
,并添加了collapsible
以使该项目可以打开和关闭,即使它最初默认为打开。字符串
4ktjp1zp3#
这里是完整的示例。您只需为AccordionItem分配一个值,然后在defaultValue中添加相同的值。它将默认打开。
字符串
我在这里找到了解决办法