SwButton
Компонент SwButton представляет собой кнопку с различными настраиваемыми параметрами.
Свойства / Properties
| Имя | Тип | по умолчанию | Значения/Описание |
|---|---|---|---|
class | String | sw-button | Добавляет пользовательский CSS-класс к компоненту. |
size | String | `` | Размер кнопки: 'large', 'small'. |
type | String | info | Тип кнопки: 'primary', 'success', 'info', 'warning', 'danger'. |
round | Boolean | false | Делает кнопку визуально закругленной. |
text | Boolean | false | Делает кнопку визуально похожей на текст (без фона только граница). |
link | Boolean | false | Преобразует кнопку в ссылку(без фона и границ). |
href | String | `` | URL, на который будет перенаправлен пользователь при клике (если link=true). |
disabled | Boolean | false | Блокирует кнопку, делая её неактивной. |
label | String | `` | Текст кнопки (альтернатива содержимому слота). |
before | String | `` | Иконка перед текстом: имя из SVG-спрайта или URL (https://…). См. SwIcon. |
after | String | `` | Иконка после текста: имя из спрайта или URL. См. SwIcon. |
prefix | String | `` | Deprecated (удалить в major) — используйте before. |
postfix | String | `` | Deprecated (удалить в major) — используйте after. |
Слоты / Slots
Default - содержимое кнопки (текст, иконки или другие элементы). Если не указано, используется label, before и after.
Пример использования / Example Usage
Базовый пример:
<sw-button
class="custom-class"
size="large"
type="primary"
round
text
link
href="https://example.com"
>
Нажми меня / Click Me
</sw-button>С иконками и label:
<sw-button
label="Сохранить"
before="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/device-floppy.svg"
after="https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline/arrow-right.svg"
type="success"
/>Отключенная кнопка:
<sw-button
disabled="true"
type="primary"
>
Недоступно
</sw-button>