Как да използвате бутони във Vuetify

Бутоните са един от онези елементи, които намирате в почти всеки потребителски интерфейс. Те са най-обичайният начин за добавяне на интерактивност към приложение. Vuetify предоставя компонента v-btn за създаване на бутони. Нека да видим различните начини, по които можем да използваме този компонент в примерно приложение Vue.js.

Редовни бутони

Тук създадохме три равномерно разположени бутона с различни цветове. Един от начините за „задаване на цвета“ на повечето компоненти във Vuetify е с color prop. За зеления бутон добавяме свойството dark, за да направим текста му бял.

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn>Button</v-btn>
      <v-btn color="red">Button</v-btn>
      <v-btn color="green" dark>Button</v-btn>
    </v-row>
  </v-app>
</template>
<script>
export default {
  name: 'App',
};
</script>

Блокиране на бутони

Създаваме блокови бутони, като задаваме block prop на true:

<template>
  <v-app>
    <v-row class="ma-4">
      <v-btn block>Block Button</v-btn>
    </v-row>
  </v-app>
</template>
...

Това кара бутона да се простира до пълната му налична ширина:

Натиснати бутони

Използването на подложката depressed за натискане на бутон премахва сянката на полето:

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn depressed>Depressed Button</v-btn>
      <v-btn depressed color="yellow">Depressed Button</v-btn>
      <v-btn depressed color="red">Depressed Button</v-btn>
    </v-row>
  </v-app>
</template>
...

Разкрасете с Vuetify

Пълното ръководство за създаване на елегантни уеб приложения с рамката на Vuetify Material Design.

Изтеглете безплатно копие тук!

Бутони с икони

Не се ограничаваме само до текст, можем също така да създаваме бутони с икони във Vuetify. icon prop прави бутона заоблен и прилага същите стилове, които биха били приложени, ако зададем text prop (повече за този prop по-късно в тази публикация).

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn color="blue" icon><v-icon>mdi-thumb-up</v-icon></v-btn>
      <v-btn color="red" icon><v-icon>mdi-heart</v-icon></v-btn>
      <v-btn color="yellow" icon><v-icon>mdi-star</v-icon></v-btn>
    </v-row>
  </v-app>
</template>
...

Очертани бутони

Можем да създадем очертани бутони с опората outlined. Този тип бутони наследяват границите си от текущия приложен цвят:

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn outlined>Outlined Button</v-btn>
      <v-btn color="green" outlined>Outlined Button</v-btn>
      <v-btn color="orange" outlined>Outlined Button</v-btn>
    </v-row>
  </v-app>
</template>
...

Обикновени бутони

Обикновените бутони се създават с plain prop. Те имат ниска непрозрачност на базовата линия, която се увеличава, когато задържите курсора на мишката или фокусирате върху тях:

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn plain>Plain Button</v-btn>
      <v-btn color="red" plain>Plain Button</v-btn>
      <v-btn color="blue" plain>Plain Button</v-btn>
    </v-row>
  </v-app>
</template>
...

Заоблени копчета

С помощта на подложката rounded можем да създадем бутони, които се държат по същия начин като обикновените бутони, но имат заоблени ръбове:

<template>
  <v-app>
    <v-row class="ma-4 justify-space-around">
      <v-btn rounded>Rounded Button</v-btn>
      <v-btn rounded color="blue">Rounded Button</v-btn>
      <v-btn rounded color="green">Rounded Button</v-btn>
    </v-row>
  </v-app>
</template>
...

Текстови бутони

Текстовите бутони, създадени с проп text, нямат сянка на полето и фон. Контейнерът за бутона се показва само при задържане на курсора и цветът, зададен за бутона, се прилага към текста му вместо към фона му:

<template>
  <v-app>
    <v-row class="ma-4" justify="space-around">
      <v-btn text> Normal </v-btn>
      <v-btn text color="primary"> Primary </v-btn>
      <v-btn text color="error"> Error </v-btn>
      <v-btn text disabled> Disabled </v-btn>
    </v-row>
  </v-app>
</template>
...

Бутони за плочки

Бутоните за плочки действат като обикновени бутони, но нямат радиус на границата. Можете да ги създадете с tile prop:

<template>
  <v-app>
    <v-row class="ma-4" justify="space-around">
      <v-btn tile> Tile Button </v-btn>
      <v-btn tile color="yellow"> Tile Button </v-btn>
      <v-btn tile color="blue"> Tile Button</v-btn>
    </v-row>
  </v-app>
</template>
...

Бутони за оразмеряване

Освен тези варианти, Vuetify ни предоставя и набор от опции за оразмеряване на бутони, за да пасне на множество сценарии:

<template>
  <v-app>
    <div class="ma-2">
      <v-btn x-small color="secondary" dark> Extra small Button </v-btn>
    </div>
    <div class="ma-2">
      <v-btn small color="primary" dark> Small Button </v-btn>
    </div>
    <div class="ma-2">
      <v-btn color="warning" dark> Normal Button </v-btn>
    </div>
    <div class="ma-2">
      <v-btn color="error" dark large> Large Button </v-btn>
    </div>
    <div class="ma-2">
      <v-btn x-large color="success" dark> Extra large Button </v-btn>
    </div>
  </v-app>
</template>
...

Резюме

Бутоните са навсякъде. Компонентът v-btn от Vuetify ни позволява да ги създаваме и позволява различни опции за персонализиране, като например промяна на варианта или промяна на размера.

Регистрирайте се за нашия седмичен бюлетин, за да сте в крак с още страхотно съдържание от нас!

Вземете актуализираната статия от codingbeautydev.com.