Типы тегов и их применение

Основные категории тегов

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

1. Контейнеры и структурные элементы Эти компоненты отвечают за построение общей структуры интерфейса:

   • — контейнер для основной области содержимого. Позволяет управлять отступами и адаптировать ширину к сетке.
   • и — используются для создания сеточной структуры. задает строку, — отдельные колонки. Поддерживаются параметры span и offset, позволяющие гибко управлять шириной и позиционированием.
   • — элемент для визуального разделения контента. Можно применять для карточек, панелей и блоков с интерактивными элементами.

2. Формы и элементы ввода Компоненты ввода данных включают текстовые поля, переключатели и селекты:

   • — основной тег для текстового ввода. Поддерживает label, placeholder, helperText и invalid для управления состоянием ошибки.
   • — расширение , скрывающее символы пароля и предоставляющее возможность показать/скрыть текст.
   • — для числовых значений с кнопками увеличения/уменьшения. Параметры min, max, step регулируют диапазон и шаг изменения.
   • — раскрывающийся список. Использует для определения опций. Позволяет устанавливать value, disabled и hidden для каждой опции.
     и — компоненты выбора с поддержкой состояния checked и визуальной индикации ошибок.

     Кнопки и интерактивные элементы В Svelte версии Carbon доступны несколько типов кнопок:

     • — стандартная кнопка с типами primary, secondary, tertiary и danger. Поддерживает иконки через слот icon.
     • — контейнер для группировки кнопок, позволяет управлять равномерным распределением и выравниванием.
     • — тег для навигационных ссылок. Поддерживает стилизацию в виде кнопки через as="button" и добавление иконок.

     Навигация и меню Компоненты для построения панелей и навигационных элементов:

     • и — элементы верхней панели.

       задает контейнер, — название приложения.
     • и — боковая навигация с поддержкой вложенных пунктов.
     • — хлебные крошки, реализованные через . Каждый элемент может быть интерактивным и содержать ссылку.

     Диалоги и уведомления

     • — диалоговое окно. Принимает параметры open, modalHeading и modalLabel. Содержимое задается через слоты, включая футер для кнопок.
     • и — уведомления, отображаемые поверх контента или встроенные в страницу. Поддерживают типы success, error, info, warning и позволяют добавлять действия через слот action.

     Особенности применения тегов

     • Слоты и кастомизация Большинство компонентов Carbon Svelte используют слоты для расширяемости. Например, имеет слот icon, что позволяет добавлять SVG-иконки внутрь кнопки без изменения структуры. использует основной слот для содержимого и отдельный слот для футера.

     • Реактивные свойства и двустороннее связывание Компоненты поддерживают реактивные привязки через Svelte. Например:

       Это обеспечивает автоматическую синхронизацию данных между компонентом и переменной в скрипте.

     • Стилизация и темы Carbon Svelte наследует систему тем IBM Carbon. Теги автоматически применяют стандартные классы CSS, но допускают переопределение через пропсы class и style. Для сложных случаев можно использовать слоты с кастомными элементами, сохраняя визуальное согласование.

     Рекомендации по использованию

     • Использовать структурные контейнеры (, , ) для создания гибкой адаптивной разметки.
     • Разделять формы на логические блоки с помощью
       и для улучшения читаемости и доступности.
     • Для интерактивных элементов выбирать типы кнопок исходя из важности действия (primary для главного действия, secondary для вспомогательного).
     • Навигацию строить с использованием и
       , чтобы обеспечить единый стиль и управление состоянием открытых пунктов.
     • Использовать уведомления и модальные окна через стандартные теги, обеспечивая доступность (aria-label, aria-describedby) и согласованное поведение в приложении.

     Пример комплексного использования тегов

     
       
         
           
             
             
             
               Сохранить
               Отмена
             
           
         
       
       
         
       
     

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

     « Tag для меток и категорий

     Оглавление

     Filter tags для фильтрации »
     Ваше имя
     Ваш email
     Ваше сообщение
     Отправить
     Ваше сообщение успешно отправлено!