Vuetify — Dividers

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

  • Dividers
    We can use dividers to divide content.

  • Vertical Dividers
    We can add vertical dividers with the vertical prop.

  • Vertical Inset Dividers
    We can use the inset prop to add margins with the divider.

#javascript

What is GEEK

Buddha Community

Vuetify — Dividers
Billy Chandler

Billy Chandler

1640313615

Vuetify 3: Titan

Vuetify 3: Titan

Learn about the newest features coming to the next version of the framework. See how the core team approached porting Vuetify from Vue 2 to the Vue 3 composition api. Preview updates to core features such as the new layout system, improved testing methodologies, expanded customization options, updates to css utility classes, and much much more.


Vuetify 3 Alpha

Vuetify 3 Alpha is here! Below is a collection of information to help you get started and answer some frequently asked questions regarding the alpha.

Before proceeding, it is important to note that this installation is intended primarily for testing purposes, and should not be considered for production applications.

Installation

Installation of the alpha is limited to new cli projects at this time and intended primarily for testing. If you have any questions or run into issues, please reach out to our Discord community.

vue-cli

In order for the installation to proceed correctly, vue-cli 4.0 is required. Further instructions are available at vue-cli.

Once installed, generate a project with the following command using the vue-cli 4.0:

vue create my-app

When prompted, choose Vue 3 (possibly Vue 3 Preview depending on the exact version of vue-cli):

? Please pick a preset: (Use arrow keys)
    Default ([Vue 2] babel, eslint)
  ❯ Default (Vue 3) ([Vue 3] babel, eslint)
    Manually select features

It is recommended to commit or stash your changes at this point, in case you need to rollback the changes.

Next, navigate to your project directory and add Vuetify to your project:

cd my-app
vue add vuetify

Once prompted, choose Vuetify 3 Preview:

? Choose a preset:
  Configure (advanced)
  Default (recommended)
  Vite Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
❯ Vuetify 3 Preview (Vuetify 3)

Vite

Installing Vuetify 3 using vite can be done using vue-cli. To start, use npm/yarn to set up your vite project outlined in the Vite documentation:

# npm 6.x
npm init @vitejs/app my-app --template vue

# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-app -- --template vue

# yarn
yarn create @vitejs/app my-app --template vue

Next, navigate to your project directory and add Vuetify to your project:

cd my-app
vue add vuetify

Once prompted, choose Preview (Vuetify 3 + Vite):

? Choose a preset:
  Configure (advanced)
  Default (recommended)
❯ Vite Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
  Vuetify 3 Preview (Vuetify 3)

Usage

With Vue 3.0, the initialization process for Vue apps (and by extension Vuetify) has changed. With the new createVuetify method, the options passed to it have also changed. Please see the pages in the Features section of the documentation for further details.

import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import App from './App.vue'

const app = createApp(App)
const vuetify = createVuetify(...) // Replaces new Vuetify(...)

app.use(vuetify)

app.mount('#app')

Frequently asked questions

What is included in the alpha?

Currently most base functionality of Vuetify is included in the alpha. This includes core services such as theme, configuration, and layout. A small subset of base components are also included such as grid system, sheets, and buttons. For full list of available components, visit the UI Component and API sections.

When will Vuetify 3 be released?

Version 3 is currently under development - Alpha is the first step toward this. Follow our progress via our project on Github or read an overview of what’s to come on our Roadmap.

Can I use it with Vite?

Yes. We recommend creating a new project using the vite installation instructions.

How to report an issue or bug

For bugs related to the Alpha, please create an issue via our Issue Generator using the following Reproduction Template. At this time we are only accepting bugs for the following:

  • Vuetify components and functions available in the Alpha
  • Documentation content

We ask that documentation issues remain related to content only. The next documentation is a work in progress and not fully updated to Vue 3. Some features may be missing or not functioning and will be constantly worked on as new components and functionality becomes available. We will begin fielding these bugs closer to Phase 3 as things become stable.

How to connect with Vuetify team

The Vuetify team can be reached via Discord Community. If you have questions or would like to discuss Vuetify 3, come visit the #v3-discussion channel.

#vue #vuetify 

How to Use Buttons in Vuetify

Buttons are one of those elements you find in just about every UI. They are the most usual way of adding interactivity to an application. Vuetify provides the v-btn component for creating buttons. Let's see the different ways in which we can use this component in a sample Vue.js application.

Regular Buttons

Here, we’ve created three evenly spaced buttons of different colours. One way of setting the colour of most components in Vuetify is with the color prop. For the green button, we add the dark property to make its text white.

<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 Buttons

We create block buttons by setting the block prop to true:

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

This makes the button extend to its full available width:

Depressed Buttons

Using the depressed prop to make a button depressed removes the box-shadow:

<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>
...

Icon Buttons

We are not limited to just text, we can also create icon buttons in Vuetify. The icon prop makes the button rounded, and applies the same styles that would be applied if we set the text prop (more on this prop later in this post).

<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 Buttons

We can create outlined buttons with the outlined prop. These type of buttons inherit their borders from the current colour applied:

<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 Buttons

Plain buttons are created with the plain prop. They have a low baseline opacity that increases when you hover or focus on them:

<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 Buttons

Using the rounded prop, we can create buttons that behave the same as regular buttons, but have rounded edges:

<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 Buttons

Text buttons, created with the text prop, have no box-shadow and no background. The container for the button is only shown on hover, and the colour set for the button is applied to its text instead of its background:

<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 Buttons

Tile buttons act like regular buttons but have no border radius. You can create them with the 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>
...

Sizing Buttons

Apart from these variants, Vuetify also provides us with a range of button sizing options to fit a multitude of scenarios:

<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>
...

Summary

Buttons are everywhere. The v-btn component from Vuetify allows us to create them and enables various customization options, such as altering the variant or modifying the size.

Link: https://javascript.plainenglish.io/how-to-use-buttons-in-vuetify-37e4e28d2548

#vuetify 

Ferris  Overweg

Ferris Overweg

1592014222

Learning Vuetify in 5 Minutes

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.

In the next five minutes, I’ll you show you the following hot Vuetify elements. By the end of this article you’ll feel confident in making stunning apps with just a few lines of code.

  • Typography
  • Spacing
  • Buttons
  • Navigation
  • Grid
  • Card

#vue #vuejs #vuetify

Wissam Muneer

Wissam Muneer

1574890055

Vuetify vs. Vuesax: What's the Difference?

Vue.js has a lot of cool component libraries, but what is the difference between Vuesax and Vuetify! Let’s take a quick look at both!

#vuejs #javascript #Vuetify #Vuesax #webdev

How to Use the Hover Component in Vuetify

While we could use the CSS :hover pseudo-class to customize element styles on mouse hover, Vuetify provides a neat way of doing this, with the v-hover component. Let's see how we can use it in this article.

Using v-hover

<template>
  <v-app>
    <v-hover v-slot="{ hover }">
      <v-card
        class="ma-4 pa-4"
        width="200"
        height="200"
        :elevation="hover ? 12 : 2"
      >
        Hover over me!
      </v-card>
    </v-hover>
  </v-app>
</template><script>
export default {
  name: 'App',
};
</script>

The v-hover default slot provides a hover prop, whose value changes depending on the current hover state of the child of the hover component; when the mouse has not hovered over it, hover remains false. For our case, that will set the elevation of the card to 2:

And when we hover over it, hover becomes true and the card elevation becomes 12:

Hover Open Delays

We can delay the hover prop change from false to true with the open-delay prop. In the code below, we use open-delay to set a delay of 200ms for the hover prop to become true from mouse hover:

<template>
  <v-app>
    <v-hover v-slot="{ hover }" open-delay="200">
      <v-card
        :elevation="hover ? 16 : 2"
        :class="{ 'on-hover': hover }"
        class="ma-4"
        height="100"
        max-width="250"
      >
        <v-card-text> Open Delay (Mouse enter) </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template><script>
export default {
  name: 'App',
};
</script>

The card in its default state.

The card becomes elevated when you hover over it

Hover Close Delays

Similarly, we can delay the hover prop from true to false after the mouse leaves it, with the close-delay prop. So after the mouse leaves the card, it would take 200ms for its elevation to be reduced:

<template>
  <v-app>
    <v-hover v-slot="{ hover }" close-delay="200">
      <v-card
        :elevation="hover ? 16 : 2"
        :class="{ 'on-hover': hover }"
        class="ma-4"
        height="100"
        max-width="250"
      >
        <v-card-text> Open Delay (Mouse enter) </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

The disabled Prop

We can disable the hover functionality with the disabled prop:

<template>
  <v-app>
    <v-hover v-slot="{ hover }" disabled>
      <v-card
        :elevation="hover ? 12 : 2"
        class="mx-auto"
        height="100"
        max-width="250"
      >
        <v-card-text class="my-4 text-center text-h6">
          Hover disabled
        </v-card-text>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

Nothing will happen when you hover over the card.

Hover Lists

We can combine v-hover and v-for to make a single item stand out when the user interacts with the list:

<template>
  <v-app>
    <v-container>
      <v-row class="fill-height" align="center" justify="center">
        <v-col v-for="(letter, index) in letters" :key="index">
          <v-hover v-slot="{ hover }">
            <v-card
              height="200"
              elevation="hover ? 12 : 2"
              :class="{ 'on-hover': hover }"
            >
              <div
                class="text-h1 d-flex justify-center align-center fill-height"
              >
                {{ letter }}
              </div>
            </v-card>
          </v-hover>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</template><script>
export default {
  name: 'App',
  data() {
    return {
      letters: ['A', 'B', 'C'],
    };
  },
};
</script>

When we hover over one of the cards, say B, it stands out:

Hover Transitions

With the hover component, we can create components that respond in highly customized ways to user interaction. For example:

<template>
  <v-app>
    <v-hover v-slot="{ hover }">
      <v-card class="ma-4 pa-4" width="300">
        <p class="mb-4">Free music for everyone!</p>
        <v-expand-transition>
          <div v-if="hover"><v-btn color="primary" dark>Sign up</v-btn></div>
        </v-expand-transition>
      </v-card>
    </v-hover>
  </v-app>
</template>
...

When you hover over the card, the extra portion containing the “Sign Up” button slides out (thanks to the v-expand-transition component):

Summary

Vuetify provides the v-hover component for handling toggling component styles based on their current hover state. It provides customization options, such as delaying the time it takes for hover events to be detected.  

Link: https://javascript.plainenglish.io/how-to-use-the-hover-component-in-vuetify-7059cf8724d2

#hover #vuetify