Компонент v-btn заменяет кнопку стандартного html темой material design и множеством опций. Для изменения цвета фона или текста можно использовать любой класс цвета.
Кнопки в их стандартной форме содержат текст верхнего регистра, небольшую elevation, hover эффект и ripple эффект при нажатии.
Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.
Applies position: absolute to the component.
Configure the active CSS class applied when the link is active. You can find more information about the active-class prop on the vue-router documentation.
Setting append prop always appends the relative path to the current path. You can find more information about the append prop on the vue-router documentation.
Expands the button to 100% of available space.
Aligns the component towards the bottom.
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Применить в компоненте тёмную тему. Вы можете найти больше информации в документации Material Design для [тёмных тем оформления] (https://material.io/design/color/dark-theme.html).
Removes the button box shadow.
Removes the ability to click or target the component.
Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page.
Exactly match the link. Without this, '/' will match every route. You can find more information about the exact prop on the vue-router documentation.
Configure the active CSS class applied when the link is active with exact match. You can find more information about the exact-active-class prop on the vue-router documentation.
Designates the button as a floating-action-button - round.
Applies position: fixed to the component.
Sets the height for the component.
Designates the component as anchor and applies the href attribute.
Designates the button as icon - round and flat
Controls the button's active state.
Makes the component large.
Aligns the component towards the left. This should be used with the absolute or fixed props.
Applies the light theme variant to the component.
Designates that the component is a link. This is automatic when using the href or to prop.
Добавляет анимацию иконок загрузки
Sets the maximum height for the component.
Sets the maximum width for the component.
Sets the minimum height for the component.
Sets the minimum width for the component.
Specifies the link is a nuxt-link. For use with the nuxt framework.
Makes the background transparent and applies a thin border.
Setting replace prop will call router.replace() instead of router.push() when clicked, so the navigation will not leave a history record. You can find more information about the replace prop on the vue-router documentation.
Don't blur on click.
Aligns the component towards the right. This should be used with the absolute or fixed props.
Applies a large border radius on the button.
Applies a large border radius on the top left and bottom right of the card.
Makes the component small.
Specify a custom tag used on the root element.
Designates the target attribute. This should only be applied when using the href prop.
Makes the background transparent.
Removes the component's border-radius.
Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation.
Aligns the content towards the top.
Set the button's type attribute
The value used when the component is selected in a group. If not provided, the index will be used.
Sets the width for the component.
Makes the component extra large.
Makes the component extra small.
Слот Vue по умолчанию.
Custom loader
Событие, которое генерируется при нажатии на компонент
Event0.18 !default;$border-radius-root !default;0.24 !default;map-deep-merge(
(
'x-small': .625rem,
'small': .75rem,
'default': .875rem,
'large': .875rem,
'x-large': 1rem
),
$btn-font-sizes
);500 !default;0.08 !default;18px !default;12px !default;.0892857143em !default;thin !default;28px !default;map-deep-merge(
(
'x-small': 20,
'small': 28,
'default': 36,
'large': 44,
'x-large': 52
),
$btn-sizes
);uppercase !default;opacity 0.2s map-get($transition, 'ease-in-out') !default;0.28s !default;map-get($transition, 'fast-out-slow-in') !default;map-deep-merge(
(
'x-small': 18,
'small': 24,
'default': 24,
'large': 28,
'x-large': 32
),
$fab-icon-sizes
);map-deep-merge(
(
'x-small': 32,
'small': 40,
'default': 56,
'large': 64,
'x-large': 72
),
$fab-sizes
);v-btn является единственным компонентом, который ведет себя по-разному при использовании dark prop. Обычно компоненты используют dark prop для обозначения того, что у них темный цветной фон, и их текст должен быть белым. Хоть это и будет работать на v-btn, рекомендуется использовать prop только когда кнопка IS ON на цветном фоне из-за отключенного состояния, смешанного с белым фоном. Если вам нужен белый текст, просто добавьте класс white--text.
Ниже приведена коллекция простых и сложных примеров.
Text buttons have no box shadow and no background. Only on hover is the container for the button shown.
Обычные кнопки имеют тень, которая увеличивается при нажатии. Это стиль по умолчанию.
Нажатые кнопки по-прежнему сохраняют свой цвет фона, но не имеют тени.
Выпадающие кнопки являются стандартным выбором с дополнительным стилем.
Иконки могут использоваться для основного содержимого кнопки.
Плавающие кнопки закруглены и, как правило, содержат иконку.
Кнопкам можно задавать различные размеры.
Контурные кнопки наследуют свои границы от текущего примененного цвета.
Скругленные кнопки ведут себя так же, как и обычные кнопки, но имеют закругленные края.
Tile buttons behave the same as regular buttons but have no border radius.
Кнопки данного типа используют всю доступную ширину.
Используя загрузку, вы можете уведомить пользователя о том, что происходит обработка. По умолчанию используется компонент v-progress-circle, но это можно настроить.
Готовы к большему? Продолжить чтение с: