vuetify_在5分钟内学习Vuetify

vuetify

Welcome to a whistle-stop tour of Vuetify - a popular component library for Vue.js. It allows you to create attractive, accessible apps with 80 elements ready to use from the get-go, plus it gives you the option to customize elements for a bespoke design.

欢迎来到Vuetify的全方位浏览-Vue.js的流行组件库。 它允许您从一开始就使用80个元素来创建有吸引力的，可访问的应用程序，此外，还可以选择为定制设计自定义元素。

In the next five minutes, I'll you show you the following hot Vuetify elements:

在接下来的五分钟中，我将向您展示以下热门Vuetify元素：

• Typography
  版式
• Spacing
  间距
• Buttons
  纽扣
• Navigation
  导航
• Grid
  格
• Card
  卡

And by the end of this article, you'll feel confident in making stunning apps with just a few lines of code.

到本文结尾，您仅需几行代码就可以制作出出色的应用程序，这会让您充满信心。

While reading, head over to Scrimba's 2-hour Vuetify course to find out more and explore the code in the platform's interactive playground. Plus you can test your new skills with some interactive coding challenges. Let's get started!

阅读时，前往Scrimba的2小时Vuetify课程 ，了解更多信息，并在平台的交互式游乐场中探索代码。 另外，您可以通过一些交互式编码挑战来测试您的新技能。 让我们开始吧！

创建一个Vuetify对象 (Creating a Vuetify object)

To use Vuetify, we first pull in Vue and Vuetify from their CDNS.

要使用Vuetify，我们首先从其CDNS中引入Vue和Vuetify。

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

This allows us to instantiate a Vue application with a Vuetify property and create a new Vuetify object:

这使我们可以使用Vuetify属性实例化Vue应用程序并创建一个新的Vuetify对象：

new Vue({ 
    el: '#app',
    vuetify: new Vuetify({}),
    data: {
        message: 'Using Single File Components'
    }
});

Click through to see this in detail.

单击以查看详细信息。

版式 (Typography)

Click the image to go to the cast.

点击图片转到演员表。

Vuetify provides plenty of options for creating stunning typography, from headings of various sizes, to titles, subtitles and body text:

Vuetify提供了许多用于创建令人惊叹的版式的选项，从各种大小的标题到标题，字幕和正文：

<h1 class="display-4">Heading 1</h1>
<h2 class="display-3">Heading 2</h2>
<h3 class="display-2">Heading 3</h3>
<h4 class="title">Title</h4>
<h5 class="subtitle-1">Subtitle</h5>
<p class="body-1">Body</p>

Changing text color and background color is easy with Vuetify, too. For the background color, simply add the name of the required color to the element's class. For text color, just add the color name followed by --text.

使用Vuetify更改文本颜色和背景颜色也很容易。 对于背景色，只需将所需颜色的名称添加到元素的类中即可。 对于文本颜色，只需添加颜色名称，后跟--text 。

This works for around 20 standard colors and can be customized using accompanying classes such as lighten and darken.

这适用于大约20种标准颜色，并且可以使用诸如lighten和darken类的伴随类进行自定义。

<h1 class="display-4 purple yellow--text text--darken-2">Heading 1</h1>

Vuetify also offers classes to change the font weight and style, as well as truncate and transform text. Head over to the cast to find out more.

Vuetify还提供用于更改字体粗细和样式以及截断和转换文本的类。 前往演员表了解更多信息。

间距 (Spacing)

Anyone who's ever used CSS knows that margins and padding can be tricky. Not with Vuetify! To add and adjust the spacing between elements, simply use classes with the following abbreviations:

任何曾经使用CSS的人都知道，边距和填充可能很棘手。 不支持Vuetify！ 要添加和调整元素之间的间距，只需使用带有以下缩写的类：

m = margin p = padding t = top r = right b = bottom l = left x = right + left y = top + bottom a = all

m =边距p =填充t =顶部r =右侧b =底部l =左侧x =右侧+左侧y =顶部+底部a =全部

Spacing size is adjusted using the numbers 1 to 12, which correspond to four-pixel increments. For example ml-5 denotes a left margin of 20 pixels.

使用数字1到12调整间距大小，该数字对应于四个像素的增量。 例如， ml-5表示20像素的左边距。

<h3 class="ml-5">Spacing</h3>

Centering elements is also easy with Vuetify. Simply wrap the element in a container that spans the page, then give it a right and left margin of auto:

使用Vuetify，居中元素也很容易。 只需将元素包装在横跨整个页面的容器中，然后为其赋予auto左右边距：

<v-row>
     <h3 class="mx-auto">Spacing</h3>
</v-row>

That's not the end of Vuetify's handy tips and tricks for element spacing. Click through to the cast to see more!

这还不是Vuetify方便的技巧和技巧来结束元素间距。 点击进入演员表，查看更多！

纽扣 (Buttons)

Vuetify offers dozens of options for styling buttons, including regular clickable buttons, outline buttons with ready-positioned icons, and icon-only buttons.

Vuetify提供了数十种样式按钮选项，包括常规的可单击按钮，带有预定位图标的轮廓按钮和仅图标按钮。

Keeping reading to see some of the options available straight out the box, or click through to see how to customize buttons.

继续阅读以了解一些可用的直接选项，或者单击以查看如何自定义按钮。

Large outline button:

大轮廓按钮：

<v-btn large outlined>Submit</v-btn>

Button with icon:

带有图标的按钮：

<v-btn tile outlined color="success">
     <v-icon left>mdi-pencil</v-icon> Edit
</v-btn>

Floating action icon button:

浮动动作图标按钮：

<v-btn class="mx-2" fab dark color="indigo">
     <v-icon dark>mdi-plus</v-icon>
</v-btn>

导航 (Navigation)

Click the image to go the cast.

单击图像进行投射。

The two main navigation options available in Vuetify are <v-app-bar> and <v-toolbar>.

Vuetify中可用的两个主要导航选项是<v-app-bar>和<v-toolbar> 。

<v-app-bar
     color="deep-purple accent-4"
     dense
     dark
>

Although the two elements are interchangeable to some extent, <v-app-bar> is designed for use as a site's main navigation and includes features such as scroll animations and a range of props and options.

尽管这两个元素在某种程度上是可以互换的，但<v-app-bar>旨在用作站点的主要导航，并包括诸如滚动动画以及一系列道具和选项之类的功能。

<v-toolbar> is a smaller, more versatile component which is designed to provide functionality to other areas of an app. For instance, it could be used for the basic edit features on a small text editor.

<v-toolbar>是一个较小的，用途更多的组件，旨在为应用程序的其他区域提供功能。 例如，它可以用于小型文本编辑器上的基本编辑功能。

Both navigation elements handle list drop-downs and automatically size navigation icons and buttons.

这两个导航元素都处理列表下拉菜单，并自动调整导航图标和按钮的大小。

格 (Grid)

Vuetify has a built-in grid system which makes sizing and positioning elements in an app simpler than ever. The grid is split into 12 columns and has five media breakpoints for handling a variety of screen sizes.

Vuetify具有内置的网格系统，该系统使应用程序中元素的大小和定位比以往更加简单。 网格分为12列，并具有五个媒体断点，用于处理各种屏幕尺寸。

While the default width of an element is 12 columns, it's easy to adjust this by changing the column value. For example, an item with a column value of 6 takes up half the page width. Items can be positioned using the offset property.

虽然元素的默认宽度为12列，但通过更改列值可以轻松调整此宽度。 例如，列值为6的项目占用页面宽度的一半。 可以使用offset属性定位项目。

<v-col sm="6" offset-sm="3">
    <v-card
    class="pa-2"
    outlined
    tile
    >
    Column
    </v-card>
</v-col>

Columns in Vuetify come with pre-set spacing. Click through to the scrim to see how this affects the element and how to customize it.

Vuetify中的列具有预设的间距。 单击以查看稀松布，以了解它如何影响元素以及如何对其进行自定义。

卡 (Card)

Click the card to access the scrim.

单击卡以访问稀松布。

Adding cards to your app is simple with Vuetify's <v-card> element, which is easily customisable with its four optional nested elements: <v-card-title>, <v-card-text>, <v-card-actions> and <v-list-item-content>.

使用Vuetify的<v-card>元素可以很容易地将卡片添加到您的应用中，该元素很容易通过其四个可选的嵌套元素进行自定义： <v-card-title> ， <v-card-text> ， <v-card-actions>和<v-list-item-content> 。

I've played around with the card provided in the cast to make my own Coffee Card. Why not head over and see where your imagination takes you, too?

我已经尝试使用演员表中提供的卡制作自己的咖啡卡。 为什么不去看看您的想象力也将您带到了哪里？

<v-card class="mx-auto" color="brown" dark >
    <v-card-title>
    <v-icon large left> mdi-coffee</v-icon>
    <span class="title font-weight-light">Coffee Card</span>
    </v-card-title>

    <v-card-text class="headline font-weight-bold">"Coffee Rocks!"</v-card-text>

    <v-card-actions>
    <v-list-item class="grow">
        <v-list-item-content>
        <v-list-item-title>Miss C Bean</v-list-item-title>
        </v-list-item-content>

        </v-row>
    </v-list-item>
    </v-card-actions>
</v-card>

That's all for our hyper-speed tour of Vuetify's basic functions. To explore further, head over to the course and check out the Playground.vue file, where you can test out the code and see more of what it can do.

这就是我们对Vuetify基本功能的超速浏览。 要进行进一步的探索，请转到本课程并签出Playground.vue文件，您可以在其中测试代码并查看其更多功能。

The course also includes a bunch of interactive challenges to put your newfound knowledge to the test and get you well on your way to becoming a Vuetify pro. When you're done there, why not check out Scrimba's huge range of other topics to continue your learning journey?

该课程还包括一系列互动挑战，以将您的新发现知识进行测试，并帮助您顺利成为Vuetify专业人士。 当您完成之后，为什么不查看Scrimba的其他主题来继续您的学习旅程呢？

Whatever you choose to do next, happy coding :)

接下来，无论您做什么选择，都祝您编程愉快：)

翻译自: https://www.freecodecamp.org/news/learn-vuetify-in-5-minutes/

vuetify