Disabled и loading состояния

В библиотеке Carbon Components Svelte элементы интерфейса предоставляют встроенные механизмы для управления состояниями disabled и loading, что позволяет создавать динамичные и отзывчивые компоненты без дополнительной ручной логики. Эти состояния критически важны для улучшения UX, предотвращения некорректных действий пользователя и визуального отображения процессов.

Свойство disabled

Состояние disabled блокирует взаимодействие с компонентом, делая его недоступным для кликов, ввода текста и других событий. В Svelte это реализуется через проп disabled, который передается в компонент:

<script>
  import { Button } from 'carbon-components-svelte';
  let isDisabled = true;
</script>

<Button disabled={isDisabled}>Нажми меня</Button>

Особенности поведения:

  • Компоненты Button, TextInput, Checkbox, RadioButton и другие корректно реагируют на disabled.
  • При disabled=true визуальная стилизация автоматически переключается на соответствующий стиль (затемнение, курсор «неактивен»).
  • В Svelte, в отличие от чистого HTML, disabled можно динамически менять через реактивные переменные. Это позволяет управлять доступностью компонентов на лету.
<script>
  import { Button } from 'carbon-components-svelte';
  let loading = false;
  let disabled = false;

  function toggleDisabled() {
    disabled = !disabled;
  }
</script>

<Button disabled={disabled} on:click={toggleDisabled}>
  {disabled ? 'Выключено' : 'Включено'}
</Button>

Свойство loading

Состояние loading используется для отображения процессов, требующих времени, например, отправки формы или загрузки данных. В Carbon Components Svelte оно чаще всего применяется в кнопках и индикаторах прогресса.

<script>
  import { Button } from 'carbon-components-svelte';
  let isLoading = false;

  function startProcess() {
    isLoading = true;
    setTimeout(() => isLoading = false, 3000); // имитация асинхронного запроса
  }
</script>

<Button loading={isLoading} on:click={startProcess}>
  {isLoading ? 'Загрузка...' : 'Отправить'}
</Button>

Ключевые моменты реализации:

  • При loading=true кнопка блокируется автоматически (disabled включается внутрь компонента).
  • Визуальное оформление кнопки меняется: появляется спиннер, текст может изменяться.
  • В Svelte можно комбинировать loading с disabled, используя реактивные выражения:
<Button disabled={isLoading || disabled} loading={isLoading}>
  {isLoading ? 'Пожалуйста, подождите...' : 'Подтвердить'}
</Button>

Динамическое управление состояниями

Использование реактивных переменных Svelte позволяет создавать сложные сценарии, где disabled и loading управляются одновременно, реагируя на состояние формы или сетевых запросов.

<script>
  import { TextInput, Button } from 'carbon-components-svelte';
  let inputValue = '';
  let submitting = false;

  $: isDisabled = inputValue.trim() === '' || submitting;

  async function handleSubmit() {
    submitting = true;
    await new Promise(resolve => setTimeout(resolve, 2000));
    submitting = false;
    inputValue = '';
  }
</script>

<TextInput bind:value={inputValue} placeholder="Введите текст..." disabled={submitting} />

<Button on:click={handleSubmit} disabled={isDisabled} loading={submitting}>
  Отправить
</Button>

Пояснение к примеру:

  • Кнопка становится неактивной, если поле пустое или идет отправка данных (isDisabled).
  • Состояние loading визуально сигнализирует пользователю о процессе отправки.
  • Комбинация реактивных переменных и встроенных свойств Carbon Components позволяет реализовать UX высокого качества без сложных условий.

Совместное использование с формами

Компоненты Carbon Components Svelte хорошо интегрируются с формами. Состояние disabled может распространяться на все поля формы, а loading – на кнопку отправки:

<script>
  import { Button, TextInput, Checkbox } from 'carbon-components-svelte';
  let formSubmitting = false;

  function submitForm() {
    formSubmitting = true;
    setTimeout(() => formSubmitting = false, 2500);
  }
</script>

<TextInput placeholder="Имя" disabled={formSubmitting} />
<Checkbox label="Согласен с условиями" disabled={formSubmitting} />

<Button loading={formSubmitting} on:click={submitForm}>
  Отправить форму
</Button>

Преимущества:

  • Все элементы формы блокируются автоматически при formSubmitting.
  • Пользователь получает визуальный и функциональный сигнал, что данные отправляются.
  • Исключается возможность повторной отправки до завершения процесса.

Поддержка кастомных компонентов

Состояния disabled и loading легко расширяются на собственные компоненты. В Svelte достаточно использовать реактивные пропсы и условный рендеринг спиннера:

<script>
  export let disabled = false;
  export let loading = false;
</script>

<button disabled={disabled || loading}>
  {#if loading}
    <span class="spinner"></span> Загрузка...
  {:else}
    Кликни меня
  {/if}
</button>

Выводы по практике:

  • Любой компонент может наследовать логику disabled и loading.
  • Динамическая реактивность Svelte делает код компактным и управляемым.
  • Carbon Components Svelte обеспечивает единый стиль и поведение для всех элементов интерфейса.

Хотите, я могу сразу подготовить отдельный блок с примерами комбинирования loading и disabled в сложных таблицах и модальных окнах, где такие состояния критически важны для UX? Это будет полноценное практическое руководство с кодом.

Оглавление