Работа с кнопками Button в Ant Design Vue

Давайте подробнее остановимся на компоненте кнопки Button, которые мы с вами импортировали в предыдущем видео и посмотрим, какие базовые опции мы можем добавлять для этой кнопки, для того, чтобы ее каким-то образом настраивать. 

Первое, что мы можем сделать - это установить атрибут type.

В документации, в разделе API, мы можем посмотреть все возможные значения для этого атрибута.

https://antdv.com/components/button

Атрибуты элемента Button

Для атрибута type мы можем установить значения primary | ghost | dashed | link | text | default.

См. видео, чтобы посмотреть как эти значения будут видоизменять кнопочку.

По сути, type отвечает за внешний вид, оформление кнопки.

Атрибут target совместно с атрибутом href создает кнопку, которая будет представлять собой ссылку. С помощью target мы можем указать поведение этой ссылки. Будет ли открываться страница в текущем, либо новом окне.

Атрибут size отвечает за размер кнопки. Здесь есть несколько значений large | middle | small.

Shape - это форма кнопки. Либо она будет круглая, прямоугольная или закругленные края.

Параметр loading имитирует загрузку. Кнопка как бы находится в состоянии загрузки данных и не является активной. Это бывает полезной при разработке веб-форм, которые получают данные со стороннего API.

icon - добавляет иконку к кнопке. Для этого нужно использовать слоты.

htmlType - позволяет изменить атрибут type для кнопки и установить, например, для нее значение button.

ghost - делает фоновый цвет прозрачным и инвертирует текст.

disabled - делает кнопку не активной.

danger - выделяет кнопку красным цветом. Можно это использовать, чтобы указать, что нажатие на эту кнопку может быть опасным.

Вызов событий

Если нам нужно отработать события клика по этому элементу, здесь есть такое событие как click.

<button @click="вызов_метода">

Вот такие основы работы с кнопками в Ant Design Vue.