Je travaille avec ReactJS et j'utilise SemanticUI pour ReactJS pour styliser le front-end,

Est-il possible de spécifier un header ou divider à partir du tableau d'objets d'options pour un composant déroulant ?

J'ai l'impression d'après la documentation que ce n'est pas encore pris en charge.

1
Mr B 11 mars 2019 à 17:28

2 réponses

Meilleure réponse

J'ai résolu ce problème en changeant d'objet dans le tableau d'options pour avoir plus de propriétés (qui vous permettent de personnaliser le contenu):

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

Ce n'est probablement pas le moyen idéal pour obtenir ce que je veux car je dois définir disable sur true (je ne veux pas que ce soit une option sélectionnable), ce qui signifie qu'il adopte le style "désactivé" grisé. J'ai essayé de contrer cela en spécifiant une couleur pour l'en-tête, ce qui a entraîné l'application du style désactivé sur la couleur sarcelle, pas parfait mais ça ira pour le moment.

2
Mr B 12 mars 2019 à 12:55

Une autre solution de contournement consiste à le faire par tableau de cartes :

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>
);
1
Marcin Kalinowski 18 juin 2019 à 13:20