[英]Can I specify a Divider or Header in Semantic UI React's options array for the dropdown component?
I am working with ReactJS and using SemanticUI for ReactJS to style the front end,我正在使用 ReactJS 并使用 SemanticUI for ReactJS 来设计前端,
Is it possible to specify a header ordivider from within the options array of objects for a dropdown component?是否可以从下拉组件的对象选项数组中指定 标题或分隔符?
I get the impression from the documentation that this is not supported yet.我从文档中得到的印象是这还不支持。
I solved this by changing to object in the options array to have more properties (which allow you to customise the content):我通过将选项数组中的对象更改为具有更多属性(允许您自定义内容)来解决此问题:
{
text: "YouGov Filters",
value: "yougov-header",
content: <Header content="YouGov Filters" color="teal" size="small" />,
disabled: true
},
It's probably not the ideal way to achieve what I want because I have to set disabled to true (I don't want it to be a selectable option) which means it adopts the greyed out 'disabled' style.这可能不是实现我想要的理想方式,因为我必须将 disabled 设置为 true(我不希望它成为可选选项),这意味着它采用灰色的“禁用”样式。 I tried to counter this by specifying a color for the header which resulted in the disabled style being applied over the teal colour, not perfect but it will do for now.
我试图通过为标题指定一种颜色来解决这个问题,这导致禁用样式应用于青色,虽然不完美,但现在可以了。
Another workaround is to do it by map array:另一种解决方法是通过映射数组来完成:
const options = [
{
text: "note",
icon: 'sticky note outline',
description: 'test',
},
{
divider: true
},
{
text: "task",
icon: 'calendar check outline',
description: 'test',
},
];
return (
<Dropdown className='multicontent__button' text='add new' button>
<Dropdown.Menu>
<Dropdown.Header icon='tags' content='Tag Label' />
{options.map((option, i) => {
if (option.divider === true) return (<Dropdown.Divider key={i}/>);
return (
<Dropdown.Item
key={i}
text={option.text}
icon={option.icon}
description={option.description}
action={option.action}
onClick={this.handleOption}
/>
);
})}
</Dropdown.Menu>
</Dropdown>
);
Mr B's solution is genius. B先生的解决方案是天才。 And it can be cleaner with a little modification of his:
对他的稍作修改,它可以更干净:
function FragmentWithoutWarning({key, children}) {
// to get rid of the warning:
// "React.Fragment can only have `key` and `children` props."
return <React.Fragment key={key}>{children}</React.Fragment>;
}
// then just:
{
as: FragmentWithoutWarning,
content: <Header content="YouGov Filters" color="teal" size="small" />
}
Since <React.Fragment />
is not able to capture any event, you even don't have to disable the item.由于
<React.Fragment />
无法捕获任何事件,因此您甚至不必禁用该项目。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.