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. См. SwIcon. |
after | String | `` | Иконка после текста: имя из спрайта или URL. См. SwIcon. |
prefix | String | `` | Deprecated (удалю в major) — используйте before. |
postfix | String | `` | Deprecated (удалю в major) — используйте after. |
Слоты / Slots
Default - содержимое кнопки (текст, иконки или другие элементы). Если не указано, используется label, before и after.
Пример использования / Example Usage
<script setup>
const TABLER = 'https://cdn.jsdelivr.net/npm/@tabler/icons@3.19.0/icons/outline'
const icons = {
floppy: `${TABLER}/device-floppy.svg`,
arrow: `${TABLER}/arrow-right.svg`,
star: `${TABLER}/star.svg`,
chevron: `${TABLER}/chevron-down.svg`,
search: `${TABLER}/search.svg`
}
</script>
<sw-button type="primary" label="Primary" />
<sw-button type="success" label="Success" />
<sw-button size="small" type="primary" label="Small" />
<sw-button type="primary" round label="Round" />
<sw-button type="primary" text label="Text" />
<sw-button type="primary" link label="Link" />
<sw-button type="primary" disabled label="Disabled" />
<sw-button
type="success"
label="Сохранить"
:before="icons.floppy"
:after="icons.arrow"
/>
<sw-button type="warning" :before="icons.search">Слот</sw-button>