Раздел в storybook
Для сборки кнопки нужно импортировать её себе в компонент, расширив при необходимости её возмжности и внедрив свои стили. Базовый шаблон внедрения представлен ниже.
<script type='ts' setup>
import { Button, type ButtonProps } from 'blanc-ui/vue'
import { myButtonStyle, myButtonVariants } from './styles.css'
const props = defineProps<ButtonProps>()
const emit = defineEmits<ButtonEmitters>()
</script>
<template>
<Button
:style="myButtonStyle"
:variants="myButtonVariants"
v-bind="props"
@click="(e) => emit('click', e)"
><slot /></Button>
</template>
| Свойство | Типы | default | Описание |
|---|
ref | HTMLButtonElement | null | Референс на DOM элемент |
variant | primary, secondary, outlined, clean | primary | Вариант отображения дизайна |
size | small, medium, large | medium | Размер |
active | boolean | false | Состояние кнопки в прожатом действующем состоянии |
disabled | boolean | false | Состояние кнопки в отключённом, недоступном для нажатия состоянии |
groupKey | string, number, undefined | undefined | Ключ кнопки, нужен при применении в группе, для автоматической установки активного состояния, если у группы есть свойство value |
| Слот | Scope | Описание |
|---|
default | no | Базовый центральный слот |
| Название | Аргументы | Описание |
|---|
onClick | MouseEvent | Клик по кнопке, не исполнится если установлен disabled |