Могу ли я указать разделитель или заголовок в массиве параметров Semantic UI React для раскрывающегося компонента?

Question

Я работаю с ReactJS и использую SemanticUI для ReactJS для стилизации внешнего интерфейса,

Можно ли указать заголовок или делитель из массива параметров объектов для раскрывающегося компонента?

Из документации складывается впечатление, что это еще не поддерживается.

Answer 1

Другой обходной путь - сделать это с помощью массива карты:

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>
);

Answer 2

Я решил эту проблему, изменив объект в массиве параметров, чтобы иметь больше свойств (которые позволяют настраивать содержимое):

        {
            text: "YouGov Filters",
            value: "yougov-header",
            content: <Header content="YouGov Filters" color="teal" size="small" />,
            disabled: true
        },

Вероятно, это не идеальный способ добиться того, чего я хочу, потому что я должен установить для параметра disabled значение true (я не хочу, чтобы это был выбираемый параметр), что означает использование серого стиля «отключен». Я попытался противостоять этому, указав цвет для заголовка, в результате чего к цвету бирюзы был применен неактивный стиль, но не идеально, но сейчас это подойдет.