如何在@strapi/design-system的AccordionToggle中添加多个操作图标

要在Strapi UI的AccordionToggle里添加多个操作图标很简单，只需要把多个IconButton用Strapi自带的布局组件（比如Flex）包裹起来，传给AccordionToggle的action属性即可。

修改后的完整代码示例 #

import { Accordion, AccordionToggle, AccordionContent, Box, Flex, TextInput, SingleSelect, SingleSelectOption, IconButton } from '@strapi/design-system';
// 按需导入需要的图标组件，比如拖拽、删除、复制图标
import { Drag, Trash, Copy } from '@strapi/icons';

// 组件内部状态管理
const [expanded, setExpanded] = useState(false);

return (
  <Accordion expanded={expanded} onToggle={() => setExpanded(s => !s)} id="acc-4">
    <AccordionToggle 
      togglePosition="left" 
      title="添加新阶段" 
      action={
        <Flex gap={2}>
          <IconButton onClick={() => console.log('执行编辑操作')} label="编辑" icon={<Drag />} />
          <IconButton onClick={() => console.log('执行删除操作')} label="删除" icon={<Trash />} />
          <IconButton onClick={() => console.log('执行复制操作')} label="复制" icon={<Copy />} />
        </Flex>
      } 
    />
    <AccordionContent>
      <Box paddingLeft={6} padding={5} background="white">
        <Flex gap="10%">
          <TextInput placeholder="阶段名称" required label="阶段名称" name="阶段名称" style={{ width: '500px'}}/>
          <SingleSelect label="颜色" required  placeholder="选择颜色">
            <SingleSelectOption value="apple">苹果绿</SingleSelectOption>
            <SingleSelectOption value="avocado">牛油果绿</SingleSelectOption>
            <SingleSelectOption value="banana">香蕉黄</SingleSelectOption>
            <SingleSelectOption value="kiwi">奇异果绿</SingleSelectOption>
            <SingleSelectOption value="mango">芒果黄</SingleSelectOption>
            <SingleSelectOption value="orange">橙子橙</SingleSelectOption>
            <SingleSelectOption value="strawberry">草莓红</SingleSelectOption>
          </SingleSelect>
        </Flex>
      </Box>
    </AccordionContent>
  </Accordion>
);

关键说明 #

• AccordionToggle的action属性支持传入任意React节点，并非只能放置单个IconButton。
• 使用Flex组件可以快速实现多个图标的横向排列，通过gap属性可灵活控制图标间的间距。
• 每个IconButton可独立配置点击事件、提示标签（label）和图标组件，满足不同操作需求。

内容的提问来源于stack exchange，提问作者roy joy