Buttons Config Flavors
The VueVentus Buttons Config maps to the .buttons property of your app VvConfig object. Global values should be set in your app.vv file, to be both provided and/or imported for use at the component level as a single source of truth for button element styling in your app.
Buttons Config Default Values
Contributor:@oberocks
// ./src/app.vv.ts
import { Transitions, VvConfig } from '@obewds/vueventus'
import type { ConfigVv } from '@obewds/vueventus'
let appVv: ConfigVv = VvConfig
appVv.buttons.blockDisplay = 'block w-full flex flex-col items-center justify-center'
appVv.buttons.blockSizes = {
'4xs': 'px-1 py-1 text-2xs',
'3xs': 'px-2.5 py-1.5 text-2xs',
'2xs': 'px-2.5 py-1.5 text-xs',
'xs': 'px-4 py-2 text-sm',
'sm': 'px-4 py-2 text-base',
'md': 'px-6 py-3 text-base',
'lg': 'px-6 py-3 text-lg',
'xl': 'px-7 py-3.5 text-lg',
'2xl': 'px-8 py-5 text-xl',
'3xl': 'px-9 py-5 text-2xl',
'4xl': 'px-10 py-6 text-2xl',
}
appVv.buttons.border = 'border'
appVv.buttons.cursor = 'cursor-pointer'
appVv.buttons.disabled = 'disabled:opacity-25'
appVv.buttons.display = 'inline-flex items-center'
appVv.buttons.fabDisplay = 'inline-flex items-center items-center justify-center'
appVv.buttons.fabSizes = {
'4xs': 'w-6 h-6 text-xxs',
'3xs': 'w-7 h-7 text-xxs',
'2xs': 'w-8 h-8 text-xs',
'xs': 'w-9 h-9 text-xs',
'sm': 'w-10 h-10 text-sm',
'md': 'w-11 h-11 text-sm',
'lg': 'w-12 h-12 text-base',
'xl': 'w-14 h-14 text-base',
'2xl': 'w-16 h-16 text-lg',
'3xl': 'w-20 h-20 text-xl',
'4xl': 'w-24 h-24 text-xl',
}
appVv.buttons.focus = 'focus:outline-none focus:ring focus:ring-opacity-50'
appVv.buttons.rounding = ''
appVv.buttons.shadow = ''
appVv.buttons.sizes = {
'4xs': 'px-1 py-px text-xxs',
'3xs': 'px-1.5 py-0.5 text-xxs',
'2xs': 'px-2 py-1 text-xs',
'xs': 'px-2.5 py-1.5 text-xs',
'sm': 'px-2.5 py-1.5 text-sm',
'md': 'px-4 py-2 text-sm',
'lg': 'px-4 py-2 text-base',
'xl': 'px-6 py-3 text-base',
'2xl': 'px-7 py-4 text-lg',
'3xl': 'px-8 py-4 text-xl',
'4xl': 'px-8 py-5 text-xl',
}
appVv.buttons.text = 'font-semibold uppercase tracking-widest'
appVv.buttons.transition = appVv.transitions.classes('colors', 'inOut', '300')
export default appVv
Scaling Rounded Corner Buttons
Contributor:@oberocks
// ./src/app.vv.ts
import { VvConfig } from '@obewds/vueventus'
import type { ConfigVv } from '@obewds/vueventus'
let appVv: ConfigVv = VvConfig
appVv.buttons.blockSizes = {
'4xs': appVv.buttons.blockSizes['4xs'] + ' rounded-sm',
'3xs': appVv.buttons.blockSizes['3xs'] + ' rounded-sm',
'2xs': appVv.buttons.blockSizes['2xs'] + ' rounded',
'xs': appVv.buttons.blockSizes['xs'] + ' rounded',
'sm': appVv.buttons.blockSizes['sm'] + ' rounded-md',
'md': appVv.buttons.blockSizes['md'] + ' rounded-md',
'lg': appVv.buttons.blockSizes['lg'] + ' rounded-lg',
'xl': appVv.buttons.blockSizes['xl'] + ' rounded-lg',
'2xl': appVv.buttons.blockSizes['2xl'] + ' rounded-xl',
'3xl': appVv.buttons.blockSizes['3xl'] + ' rounded-xl',
'4xl': appVv.buttons.blockSizes['4xl'] + ' rounded-xl',
}
appVv.buttons.sizes = {
'4xs': appVv.buttons.sizes['4xs'] + ' rounded-sm',
'3xs': appVv.buttons.sizes['3xs'] + ' rounded-sm',
'2xs': appVv.buttons.sizes['2xs'] + ' rounded',
'xs': appVv.buttons.sizes['xs'] + ' rounded',
'sm': appVv.buttons.sizes['sm'] + ' rounded-md',
'md': appVv.buttons.sizes['md'] + ' rounded-md',
'lg': appVv.buttons.sizes['lg'] + ' rounded-lg',
'xl': appVv.buttons.sizes['xl'] + ' rounded-lg',
'2xl': appVv.buttons.sizes['2xl'] + ' rounded-xl',
'3xl': appVv.buttons.sizes['3xl'] + ' rounded-xl',
'4xl': appVv.buttons.sizes['4xl'] + ' rounded-xl',
}
export default appVv
Circular Fab Buttons
Contributor:@oberocks
// ./src/app.vv.ts
import { VvConfig } from '@obewds/vueventus'
import type { ConfigVv } from '@obewds/vueventus'
let appVv: ConfigVv = VvConfig
const addFabRounding = (string: string): string => {
return string + ' rounded-full'
}
appVv.buttons.fabSizes = {
'4xs': addFabRounding(appVv.buttons.fabSizes['4xs']),
'3xs': addFabRounding(appVv.buttons.fabSizes['3xs']),
'2xs': addFabRounding(appVv.buttons.fabSizes['2xs']),
'xs': addFabRounding(appVv.buttons.fabSizes['xs']),
'sm': addFabRounding(appVv.buttons.fabSizes['sm']),
'md': addFabRounding(appVv.buttons.fabSizes['md']),
'lg': addFabRounding(appVv.buttons.fabSizes['lg']),
'xl': addFabRounding(appVv.buttons.fabSizes['xl']),
'2xl': addFabRounding(appVv.buttons.fabSizes['2xl']),
'3xl': addFabRounding(appVv.buttons.fabSizes['3xl']),
'4xl': addFabRounding(appVv.buttons.fabSizes['4xl']),
}
export default appVv