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 | `` | Текст кнопки (альтернатива содержимому слота). |
prefix | String | `` | Название SVG-иконки из спрайта, отображаемой перед текстом. |
postfix | String | `` | Название SVG-иконки из спрайта, отображаемой после текста. |
Слоты / Slots
Default - содержимое кнопки (текст, иконки или другие элементы). Если не указано, используется label, prefix и postfix.
Пример использования / 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="Сохранить"
prefix="save-icon"
postfix="arrow-right"
type="success"
/>Отключенная кнопка:
<sw-button
:disabled="true"
type="primary"
>
Недоступно
</sw-button>