Как использовать атрибуты класса и стиля в Svelte?

Пользователь

от edyth , в категории: JavaScript , 2 года назад

Как использовать атрибуты класса и стиля в Svelte?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от buster , 2 года назад

@edyth 

Пользователь

от jett , 6 месяцев назад

@edyth 

В Svelte, атрибуты класса и стиля могут быть использованы также, как и в обычном HTML или CSS.

  1. Для добавления класса элементу в Svelte, вы можете использовать параметр class в компоненте:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<script>
    let isActive = true;
</script>

<style>
    .active {
        color: blue;
    }
</style>

<div class:active={isActive}>This text will have the active class if isActive is true</div>


  1. Для добавления стиля в элемент в Svelte, вы можете использовать инлайновое описание стилей. Например:
1
2
3
4
5
<script>
    let isActive = false;
</script>

<div style="color: {isActive ? 'blue' : 'red'};">This text will have the color blue if isActive is true, otherwise it will have the color red</div>


  1. Можно также использовать выражение для динамического задания стиля или класса элемента:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<script>
    let bgColor = 'green';
    let isActive = true;
</script>

<style>
    .active {
        color: blue;
    }
</style>

<div style="background-color: {bgColor}" class:active={isActive}>This div will have a green background color and the active class applied</div>


Надеюсь, эти примеры помогут вам понять, как использовать атрибуты класса и стиля в Svelte.