Перейти к основному содержимому

Стилизация

Вы можете настроить внешний вид компонентов редактора, применяя определённые стили.

Назначение CSS-класса для контейнера редактора​

<script>
   import { Editor } from "@svar-ui/svelte-editor";
</script>

<Editor css="myBox" />

Эта функция позволяет назначить CSS-класс главному контейнерному элементу редактора. Атрибут css используется для применения пользовательских стилей к блоку редактора, что даёт разработчикам возможность изменять его визуальное оформление в соответствии с темой или макетом приложения.

В этом примере CSS-класс myBox должен быть заранее определён в таблице стилей. Это удобно, когда редактор должен соответствовать окружающим элементам интерфейса или иметь особые визуальные характеристики — например, определённые отступы, границы или цвет фона.

Отключение шрифтов​

Если вам нужно отключить шрифты, используемые в теме, задайте свойству fonts темы значение false:

<script>
  import { Willow } from "@svar-ui/svelte-core";
  import { Editor } from "@svar-ui/svelte-editor";
</script>

<div style="width:300px">
  <Willow fonts={false}>
    <Editor />
  </Willow>
</div>
Обратите внимание

Если вы отключаете шрифты по умолчанию, вам потребуется самостоятельно подключить нужные шрифты.

Связанные статьи: Визуальные темы