CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Otto
Otto

Reputation: 693

Vuetify customizing v-btn props in css

Currently I'm setting props of my buttons in the html like below. However if I add a bunch of props it gets cluttered, and I can't really reuse the exact button unless I copy all the html. Is there a way to put faband flat inside a css class? Without the use of a theme?

<v-btn :flat="selectedUser !== user.id" :key="user.id" depressed fab flat round>
      <h4> {{user.name}} </h4> 
</v-btn>

Upvotes: 1

Views: 4079

Answers (2)

Ankit Kumar Ojha
Ankit Kumar Ojha

Reputation: 2384

Obviously you can breakdown the vuetify.css and get the work done in your own style(pun intended). But there are some better ways you must consider before you touch the CSS file.

Number 1, Look for the similarities in the btns and create some more components which will have designated props by default. Like Component(Flab.vue)

<template>
<v-btn
 flat
 fab>
    {{btnName}}
</v-btn>
</template>

I don't personally recommend this way as in case of bigger apps you might end up with lot of components having only btns

Number 2, Use directives (I highly recommend). Vue and some other well known frameworks provides directives for components and dom elements which can used to customise them however you want. If you are new to vue (new2vue), let me explain you in the most simplest terms possible.

Basically you set an attribute(directive) to any element (Dom or Vuetify or Components), and then just before that element is inserted in dom, vue will call a function for you to manipulate that element as you want. Let's see some code now.

//global directive 
Vue.directive('flab',{
  inserted:function(el){
    el.setAttribute('fab');
    el.setAttribute('flat')
  }
})
//while using v-btn anywhere (as you have global directive now)
<v-btn 
 v-flab> //using directive flab with v- prefix
  {{btnName}}
</v-btn>

It might look complicated, but believe me it will make your life easier. Directives have modifier and values, with many other hooks, (basically a swiss army knife for vue devs). You can read more about it here.

Number 3, If you are afraid to write more code, (as E= mc2 or Error = more code2), and your problem is only the cluttered props, then just try making your code more readable. As @Mathias_R mentioned break the lines, make sure you and your team can read it easily.

Well I hope this helps.

Upvotes: 4

Mattias R&#229;demar
Mattias R&#229;demar

Reputation: 72

You could always break it up on new lines to make it more readable like below.

`<v-btn 
  :flat="selectedUser 
  !== user.id" 
  :key="user.id" 
  depressed 
  fab 
  flat 
  round>
  <h4> {{user.name}} </h4> 
</v-btn>`

Upvotes: 1

Related Questions