Передача props и работа с атрибутами

Props в Carbon Components Svelte представляют собой основной механизм настройки компонентов. Каждый компонент предоставляет набор свойств, которые позволяют управлять его поведением, внешним видом и внутренней логикой. В Svelte props передаются через атрибуты при использовании компонента в шаблоне.

<script>
  import { Button } from 'carbon-components-svelte';
</script>

<Button kind="primary" size="sm">Нажми меня</Button>

В этом примере kind и size — это props компонента Button. Важно понимать, что каждый prop имеет ожидаемый тип и набор допустимых значений. Например, kind может принимать значения primary, secondary, tertiary и т.д., а size — sm, md, lg.

Дефолтные значения и реактивность props

Многие компоненты Carbon Components Svelte имеют значения по умолчанию, которые используются, если конкретный prop не был передан. Например:

<script>
  import { TextInput } from 'carbon-components-svelte';
</script>

<TextInput labelText="Имя пользователя" placeholder="Введите имя" />

Здесь компонент TextInput автоматически использует стандартные стили и поведение для незаданных props. Если props изменяются во время работы приложения, Svelte обеспечивает реактивное обновление компонента, что позволяет динамически изменять атрибуты:

<script>
  import { Button } from 'carbon-components-svelte';
  let buttonKind = 'primary';
  
  function toggleKind() {
    buttonKind = buttonKind === 'primary' ? 'secondary' : 'primary';
  }
</script>

<Button {buttonKind} on:click={toggleKind}>Переключить стиль</Button>

Работа с атрибутами и spread-синтаксис

Кроме явной передачи props, Svelte позволяет использовать spread-оператор, что особенно удобно для динамического набора атрибутов:

<script>
  import { Button } from 'carbon-components-svelte';
  let buttonProps = {
    kind: 'primary',
    size: 'lg',
    disabled: false
  };
</script>

<Button {...buttonProps}>Кнопка</Button>

Spread-оператор передает все ключи объекта как props. Это упрощает работу с динамическими конфигурациями и уменьшает дублирование кода.

Пользовательские атрибуты и $$restProps

Компоненты Carbon Components Svelte поддерживают передачу дополнительных атрибутов через $$restProps. Любые атрибуты, которые не определены как props, автоматически попадают в $$restProps и применяются к корневому элементу компонента. Это позволяет добавлять такие свойства, как id, data-*, aria-* без изменения исходного компонента:

<script>
  import { TextInput } from 'carbon-components-svelte';
</script>

<TextInput labelText="Email" placeholder="Введите email" data-test-id="email-input" />

В этом примере data-test-id передастся в DOM-элемент <input> автоматически. Carbon Components Svelte аккуратно объединяет стандартные props и пользовательские атрибуты.

Обработка событий и связь с props

Передача props тесно связана с обработкой событий. Многие props, например value в TextInput или checked в Checkbox, имеют двоеточную связь с состоянием компонента через привязку:

<script>
  import { Checkbox } from 'carbon-components-svelte';
  let isChecked = false;
</script>

<Checkbox bind:checked={isChecked} labelText="Согласен с условиями" />
<p>Статус: {isChecked ? 'выбран' : 'не выбран'}</p>

Использование bind: позволяет props оставаться синхронизированными с локальными переменными. Любое изменение состояния внутри компонента автоматически обновляет переменную, и наоборот.

Комбинация props и слотов

Carbon Components Svelte поддерживает слоты, что позволяет комбинировать стандартные props с кастомным содержимым:

<script>
  import { Button } from 'carbon-components-svelte';
</script>

<Button kind="secondary">
  <span slot="icon">★</span>
  Нажми меня
</Button>

Пропсы задают общие стили и поведение, а слот позволяет вставлять индивидуальный контент или иконки, сохраняя при этом совместимость с системой Carbon.

Советы по организации props

  • Всегда указывать тип и значение props при передаче, чтобы избежать неожиданных багов.
  • Для динамических интерфейсов использовать bind: для двусторонней привязки состояния.
  • Spread-оператор помогает при работе с набором props, особенно если они хранятся в объекте конфигурации.
  • Пользовательские атрибуты через $$restProps позволяют улучшить доступность и поддержку тестирования без вмешательства в исходный компонент.

Эти подходы обеспечивают гибкость и масштабируемость интерфейсов, соответствующих стандартам Carbon Design System, и позволяют создавать сложные компоненты с минимальными усилиями.

Оглавление