Button

Компонент Button в библиотеке Element Plus является базовым элементом управления интерфейсом. Он используется для вызова действий пользователя и может быть представлен в различных стилях и состояниях. Основная структура кнопки выглядит следующим образом:

<template>
  <el-button>Default Button</el-button>
</template>

<script>
import { ElButton } from 'element-plus'

export default {
  components: { ElButton }
}
</script>

Типы кнопок

Element Plus предоставляет несколько предопределённых типов кнопок, которые влияют на визуальное оформление и восприятие действия:

  • primary — основной акцентный цвет, используется для ключевых действий.

    <el-button type="primary">Primary Button</el-button>

  • success — кнопка для подтверждения успешных действий.

  • warning — обозначает предупреждение или потенциально рискованное действие.

  • danger — для действий, которые могут удалить данные или вызвать ошибку.

  • info — нейтральный информационный вариант.

    <el-button type="danger">Danger Button</el-button>

Размеры и формы

Размер кнопки можно настроить с помощью свойства size:

  • medium (по умолчанию)
  • small
  • mini
<el-button type="primary" size="small">Small Button</el-button>
<el-button type="primary" size="mini">Mini Button</el-button>

Кнопки могут иметь круглую форму, используя свойство round, или кнопки с иконкой, без текста, через icon:

<el-button type="primary" icon="el-icon-search" circle></el-button>

Состояния кнопки

Состояние кнопки управляется через несколько свойств:

  • disabled — отключает взаимодействие.
  • loading — отображает анимацию загрузки и блокирует действие.
  • plain — делает кнопку более лёгкой визуально, с обводкой вместо заливки.
<el-button type="primary" :loading="true">Loading</el-button>
<el-button type="success" plain>Plain Button</el-button>
<el-button type="info" disabled>Disabled Button</el-button>

Группировка кнопок

Для организации нескольких кнопок в один блок используется компонент ElButtonGroup, который обеспечивает равномерное распределение и согласованное оформление:

<el-button-group>
  <el-button type="primary">Left</el-button>
  <el-button type="primary">Center</el-button>
  <el-button type="primary">Right</el-button>
</el-button-group>

События

Кнопки поддерживают стандартные события click, которые позволяют выполнять любые функции при нажатии:

<el-button type="primary" @click="handleClick">Click Me</el-button>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Button clicked')
    }
  }
}
</script>

Стилизация и кастомизация

С помощью CSS-переменных и классов можно тонко настраивать внешний вид кнопок:

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}

.el-button--primary:hover {
  background-color: #66b1ff;
}

Кроме того, можно использовать слот default для добавления произвольного контента внутрь кнопки:

<el-button type="primary">
  <i class="el-icon-edit"></i>
  Edit
</el-button>

Кнопки с переходом и ссылками

Кнопка может вести на внешние или внутренние ссылки с помощью атрибута href или быть компонентом маршрутизации:

<el-button type="primary" href="https://example.com" target="_blank">Visit Site</el-button>

Для интеграции с Vue Router используется компонент <router-link> вместе с кнопкой, чтобы сохранить стиль Element Plus:

<el-button type="primary">
  <router-link to="/dashboard">Go to Dashboard</router-link>
</el-button>

Практические советы

  • Для ключевых действий интерфейса использовать primary или success.
  • Для предупреждений и удаления данных — warning и danger соответственно.
  • Использовать loading при асинхронных операциях, чтобы избежать повторных кликов.
  • Группировать связанные кнопки для согласованного UX с ElButtonGroup.
  • Для иконок без текста применять circle и icon для компактного оформления.

Эти приёмы позволяют строить гибкий и визуально согласованный интерфейс с помощью Element Plus Button, обеспечивая при этом высокий уровень интерактивности и удобства пользователя.

Оглавление