Я работаю над пользовательским компонентом в Svelte, и я хочу иметь возможность установить цвет с помощью соответствующих идентификаторов (я называю типы). Например, успех -> зеленый, ошибка -> красный и т. Д. c.
. Сейчас я экспортирую логическое значение для каждого из «типов», для которого можно установить значение «истина» или «ложь» и, следовательно, включить класс с тем же именем или нет.
let success = false;
let error = false;
let info = false;
let warning = false;
...
<div
class:success
class:error
class:info
class:warning >
</div>
Таким образом, пользователь должен будет отключить все, кроме одного из этих типов, каждый раз, когда он хочет изменить тип.
Есть ли способ, которым я мог бы сделать подобное, как этот, почти псевдокод: D
export let type = "";
...
<div
class:{type} >
</div>
Таким образом, пользователь мог бы просто использовать его следующим образом.
<custom-comp type={warning} />