@lbzg/vue-div v2.0.10
vue-div
Vue.js component for responsive and declarative css templating.
Partially based on uikit.
Introduction
Vue div component comes equipped with multiple properties for managing styles on a webpage. It can be used for applying a wide range of styles; from managing basics such as texts and backgrounds, to creating layouts and controlling styles through different states.
Example:
<vdiv text="xlarge hover:bold" actions="hover">Sample text</vdiv>
Installation
npm i @lbzg/vue-div
import vdiv from '@lbzg/vue-div'
Vue.component('vdiv', vdiv())
# vdiv accepts optional configuration parameter
Properties
property | style | values | default | description |
---|---|---|---|---|
bg | background-color | colors | - | - |
border | border-width | sizes | xsmall | - |
... | border-style | none, hidden, dotted, solid, dashed | solid | - |
... | border-color | colors | - | - |
color | color | colors | - | text color |
text | font-size | sizes , title-sizes | - | - |
... | line-height | sizes , title-sizes | - | - |
... | font-weight | thin, light, normal, bold, black | - | - |
... | font-style | italic, no-style | - | - |
... | text-transform | capitalize, uppercase, lowercase, no-transform | - | - |
fillet | border-radius | sizes | small | - |
inline | display | - | inline | display: inline |
line | text-decoration-line | none, under, over, through | under | - |
... | text-decoration-color | colors | - | - |
... | text-decoration-style | none, solid, double, dotted, dashed | solid | - |
overflow | overflow | visible, hidden, scroll, auto | - | - |
wrap | overflow-wrap | break-word, anywhere, normal | - | - |
transition | transition-property | css properties | bg | applies 0.2s ease-in-out |
container | (classes) | default, xsmall, small, large, expand | default | - |
flex | (classes) | default, inline | default | - |
... | - | stretch, top, mid, bot | stretch | vertical align |
... | - | left, center, right, between, around + @mods | left | horizontal align |
... | - | first, last + @mods | - | item position |
... | - | column, column-reverse, row, row-reverse | row | direction |
... | - | wrap, wrap-reverse, nowrap | nowrap | wrap behavior |
... | - | wrap-stretch/between/around/top/mid/bot | - | wrap modifiers |
... | - | none, auto, 1 | auto | item dimensions |
grid | (classes) | default, small, medium, large, collapse | default | gap size |
... | - | column-small/medium/large/collapse | - | column gap |
... | - | row-small/medium/large/collapse | - | row gap |
... | - | divide | - | add dividers |
... | - | match | - | match heights |
... | - | masonry | - | no gap if diff. heights |
height | (classes) | 1-1, viewport | - | - |
... | - | none, 0, 1px, 2px, 5px, small, medium, large | - | - |
... | - | max-small, max-medium, max-large | - | - |
width | (classes) | 1-1 to 1-6 and everything between + @mods | - | - |
... | - | auto, expand + @mods | - | - |
... | - | small, medium, large, xlarge, xxlarge + @mods | - | - |
childwidth | (classes) | same as width | - | affects child elements |
margin | (classes) | default, small, medium, large, xlarge | default | margin size |
... | - | top, bot, left, right | - | margin direction |
... | - | small/medium/large/xlarge-top/bot/left/right | - | margin size-direction |
... | - | remove(-top/bot/vertical/adjecent) | - | margin remove |
... | - | remove-left/right + @mods | - | - |
... | - | remove-first-child, remove-last-child | - | - |
... | - | auto, auto-left, auto-right + @mods | - | auto margin (/align) |
... | - | auto-top, auto-bot, auto-vertical | - | - |
padding | (classes) | default, small, medium, large, remove | default | padding size |
... | - | remove-top/bot/left/right/vertical/horizontal | - | remove direction |
visibility | (classes) | hide + @mods | - | removes el from document |
... | - | invisible | - | makes el invisible |
... | - | visible@mods | - | - |
... | - | hide-touch, hide-notouch | - | - |
... | - | toggle-hover (enables hide/invisible-hover) | - | apply to parent |
... | - | hide-hover, invisible-hover | - | apply to child |
sizes
: xsmall, small, medium, large, xlarge@mods
: @s, @m, @l, @xlcolors
: white, black, light, dark, muted, primary, secondary, tertiary, success, warning, danger
Props with default values can be applied without explicitly setting a value. Example:
<vdiv container margin padding inline flex grid>...</vdiv>
States
property | values | description |
---|---|---|
disabled | boolean | activates disabled modifiers |
pending | boolean | activates pending modifiers |
fail | boolean | activates fail modifiers |
success | boolean | activates success modifiers |
active | boolean | activates active modifiers |
actions | click, hover (string) | enables click and hover modifiers / required for @click to work |
Priorities: disabled > pending > fail > success > active > click > hover (> default)
Disabled
and pending
states do not allow any other states except default state to coexist.
Other states can coexist (when applied to different css styles of same property).
Single and multi value syntax: state:value or statevalue value2 value3
(Overblown) example:
<vdiv
actions="click hover" # enable click and hover mods
text="xlarge click:bold"
line="hover:under active:through"
width="1-1 1-2@l active[1-1 1-4@l]"
border="xsmall success:success fail:danger"
:active="var" # bind to variable
:success="var" # ...
:fail="var" # ...
@click="method"
>
Sample text
</vdiv>
Screen modifiers
Breakpoints:
@s - 640px and up
@m - 960px and up
@l - 1200px and up
@xl - 1600px and up
Configuration
Color palette is configurable. Accepts any valid css colors (hex, rgb/a, hsl/a, name...).
Example: add 'red' color and override 'primary' and 'secondary' color.
Vue.component('vdiv', vdiv({
red: 'red',
primary: '#af20d2',
secondary: 'rgba(255,0,0,0.3)',
}))
Default color palette:
light: '#f2f2f2',
dark: '#2f2f2f',
muted: '#e0e0e0',
primary: '#1e87f0',
secondary: '#dee5e5',
tertiary: '#9dc5bb',
success: '#32d296',
warning: '#faa05a',
danger: '#f0506e',
black: '#000',
white: '#fff',
gray: '#777',
grey: '#777',
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago