https://vuetifyjs.com/assets/variants-3u8IQNOh.js

1import{M as f,u as p,v as l,I as n,bJ as o,bW as m,bU as v,aL as b,H as e,ca as y,cb as g,b_ as s}from"./index-DcDh_618.js";const V={id:"variants"},x={id:"sheet-components"},w={id:"field-components"},N={meta:{nav:"Variants",title:"Variants",description:"Understanding and utilizing the variant prop in Vuetify",keywords:"variant, Vuetify"},related:["/components/buttons/","/components/lists/"],toc:[{text:"Sheet components",to:"#sheet-components",level:2},{text:"Field components",to:"#field-components",level:2}]},A="",B=f({__name:"variants",setup(k,{expose:d}){return d({frontmatter:{meta:{nav:"Variants",title:"Variants",description:"Understanding and utilizing the variant prop in Vuetify",keywords:"variant, Vuetify"},related:["/components/buttons/","/components/lists/"],toc:[{text:"Sheet components",to:"#sheet-components",level:2},{text:"Field components",to:"#field-components",level:2}]},excerpt:void 0}),(S,t)=>{const i=m,r=y,a=g,u=v;return b(),p("div",null,[l("section",V,[n(i,{href:"#var\
2iants",level:"1"},{default:o(()=>[...t[0]||(t[0]=[e("Variants",-1)])]),_:1}),t[37]||(t[37]=l("p",null,"Variants are a powerful feature that allows you to customize the appearance and behavior of components.",-1)),n(r),n(a),l("section",x,[n(i,{href:"#sheet-components",level:"2"},{default:o(()=>[...t[1]||(t[1]=[e("Sheet components",-1)])]),_:1}),t[15]||(t[15]=l("p",null,"Sheet components in Vuetify offer different stylistic variants to make it easy to fit them into different design contexts. Below is a table summarizing the six available variants.",-1)),n(u,null,{default:o(()=>[t[14]||(t[14]=l("thead",null,[l("tr",null,[l("th",null,"Variant"),l("th",null,"Description")])],-1)),l("tbody",null,[l("tr",null,[l("td",null,[n(s,null,{default:o(()=>[...t[2]||(t[2]=[e("elevated",-1)])]),_:1})]),t[3]||(t[3]=l("td",null,"Provides a subtle box-shadow for a depth effect.",-1))]),l("tr",null,[l("td",null,[n(s,null,{default:o(()=>[...t[4]||(t[4]=[e("flat",-1)])]),_:1})]),t[5]||(t[5]=l("td",null,"No sh\
3adow or depth, lies flat against the content.",-1))]),l("tr",null,[l("td",null,[n(s,null,{default:o(()=>[...t[6]||(t[6]=[e("tonal",-1)])]),_:1})]),t[7]||(t[7]=l("td",null,"Adjusts the tone of the component’s background.",-1))]),l("tr",null,[l("td",null,[n(s,null,{default:o(()=>[...t[8]||(t[8]=[e("outlined",-1)])]),_:1})]),t[9]||(t[9]=l("td",null,"Adds a colored border around the component.",-1))]),l("tr",null,[l("td",null,[n(s,null,{default:o(()=>[...t[10]||(t[10]=[e("text",-1)])]),_:1})]),t[11]||(t[11]=l("td",null,"Removes the background color and elevation.",-1))]),l("tr",null,[l("td",null,[n(s,null,{default:o(()=>[...t[12]||(t[12]=[e("plain",-1)])]),_:1})]),t[13]||(t[13]=l("td",null,"No styles, offering a clean slate for customization.",-1))])])]),_:1})]),l("section",w,[n(i,{href:"#field-components",level:"2"},{default:o(()=>[...t[16]||(t[16]=[e("Field components",-1)])]),_:1}),t[36]||(t[36]=l("p",null,"Field components in Vuetify offer a comprehensive set of stylistic variants to\
4 elevate your forms and input fields. Whether you’re into Material Design or love to experiment, there’s a variant for every design challenge.",-1)),n(u,null,{default:o(()=>[t[35]||(t[35]=l("thead",null,[l("tr",null,[l("th",null,"Variant"),l("th",null,"Description")])],-1)),l("tbody",null,[l("tr",null,[l("td",null,[n(s,null,{default:o(()=>[...t[17]||(t[17]=[e("underlined",-1)])]),_:1})]),t[18]||(t[18]=l("td",null,"A Material Design 2 variant with a focus underline.",-1))]),l("tr",null,[l("td",null,[n(s,null,{default:o(()=>[...t[19]||(t[19]=[e("outlined",-1)])]),_:1})]),t[20]||(t[20]=l("td",null,"Adds a border that lifts the label when the field is focused.",-1))]),l("tr",null,[l("td",null,[n(s,null,{default:o(()=>[...t[21]||(t[21]=[e("filled",-1)])]),_:1})]),t[22]||(t[22]=l("td",null,"The input field features a filled background.",-1))]),l("tr",null,[l("td",null,[n(s,null,{default:o(()=>[...t[23]||(t[23]=[e("solo",-1)])]),_:1})]),t[24]||(t[24]=l("td",null,"Stands alone with subtle \
5elevation for a distinct look.",-1))]),l("tr",null,[l("td",null,[n(s,null,{default:o(()=>[...t[25]||(t[25]=[e("solo-inverted",-1)])]),_:1})]),l("td",null,[t[27]||(t[27]=e("Similar to ",-1)),n(s,null,{default:o(()=>[...t[26]||(t[26]=[e("solo",-1)])]),_:1}

5),t[28]||(t[28]=e(" but inverts input color when focused.",-1))])]),l("tr",null,[l("td",null,[n(s,null,{default:o(()=>[...t[29]||(t[29]=[e("solo-filled",-1)])]),_:1})]),l("td",null,[t[31]||(t[31]=e("Like ",-1)),n(s,null,{default:o(()=>[...t[30]||(t[30]=[e("solo",-1)])]),_:1}),t[32]||(t[32]=e(", but with a filled background.",-1))])]),l("tr",null,[l("td",null,[n(s,null,{default:o(()=>[...t[33]||(t[33]=[e("plain",-1)])]),_:1})]),t[34]||(t[34]=l("td",null,"Strips away most styles for an almost blank slate.",-1))])])]),_:1})])])])}}});export{B as default,A as excerpt,N as frontmatter};
6//# sourceMappingURL=variants-3u8IQNOh.js.map