VsButton

Часто використовувана кнопка.

Підключення

vue

<vs-button type="primary">Click</vs-button>

hbs

{{{_vue "vs-button"}}}

Component API

Style

Name	Description	Type
size	Розмір кнопки (mini, small, large)	String
color	Колір кнопки. Доступні кольори	String
type	Тип кнопки (primary, text, plain, border, link, default)	String

State

Name	Description	Type
disabled	Визначає, чи кнопка вимкнена	Boolean
loading	Анімація індикатора загрузки поруч з текстом	Boolean

Content

Name	Description	Type
icon	Іконка поруч з текстом кнопки	String

Events

Name	Description
@click	Реалізує клік по компоненту

Slots

Name	Description	Default
default	Дефолтний слот, зазвичай у кнопку вставляється текст, іконка	<template>...</template>

Приклади

Базове використання (тип кнопки)

Використовуйте типи default, primary, plain border, text, link щоб визначити стиль кнопки.

  <VsButton type="default" color="rose">Default</VsButton>
  <VsButton type="primary">Primary</VsButton>
  <VsButton type="plain" color="green">Plain</VsButton>
  <VsButton type="border" color="purple">border</VsButton>
  <VsButton type="text" color="yellow">text</VsButton>
  <VsButton type="link" color="indigo">link</VsButton>
  

Розміри

Окрім розміру за замовчуванням (default), компонент надає два додаткові розміри для вибору з різних сценаріїв. Використовуйте розмір атрибута, щоб установити додаткові розміри (large, mini).

  <VsButton type="primary" size="mini">Primary</VsButton>
  <VsButton type="primary" size="default">Primary</VsButton>
  <VsButton type="primary" size="large">Primary</VsButton>
  

Вимкнення кнопки

Атрибут disabled визначає, чи кнопка вимкнена. Використовуйте атрибут disabled, щоб визначити, чи кнопка вимкнена. Він приймає логічне значення.

<VsButton type="default" color="rose" :disabled="true">Default</VsButton>
<VsButton type="primary" :disabled="true">Primary</VsButton>
<VsButton type="plain" color="green" :disabled="true">Plain</VsButton>
<VsButton type="border" color="purple" :disabled="true">Border</VsButton>
<VsButton type="text" color="yellow" :disabled="true">Text</VsButton>
<VsButton type="link" color="indigo" :disabled="true">Link</VsButton>

Завантаження

Відображає анімацію в кнопці під час завантаження даних.

  <div>
    <VsButton type="default" color="rose" :loading="true">Default</VsButton>
    <VsButton type="primary" :loading="true">Primary</VsButton>
    <VsButton type="plain" color="green" :loading="true">Plain</VsButton>
    <VsButton type="border" color="purple" :loading="true">Border</VsButton>
    <VsButton type="text" color="yellow" :loading="true">Text</VsButton>
    <VsButton type="link" color="indigo" :loading="true">Link</VsButton>
  </div>
  

Іконка

Використовуйте іконки, щоб додати більше значення кнопці. Ви можете використовувати лише значок, щоб заощадити місце, або використовувати його з текстом. Використовуйте атрибут icon у якості слота або пропса, щоб додати іконку. Ви можете знайти список значків на сайті Tabler.

<VsButton
 size="mini"
  type="primary"
 @click="handleStartEdit(row)"
>
 <i class="ti ti-search"></i>
  <span>Приклад</span>
</VsButton>
<VsButton
  type="primary"
  icon="ti ti-search"
/>