VueVentus DocsVvEl Component
The VvEl Component provides a variety of props and config module based settings to make a variety of element configurations for any element itself or as a parent, child, or sibling element with color contextual relations with other contextual elements.
Import
To import a VvEl Component installed by the vueventus CLI or vv-update CLI:
// ./src/components/SomeComponent.vue
import VvEl from './vv/elements/VvEl.vue'TIP
CLI installed components pass through VueVentus defaults via component props. Each prop default value can be customized globally by overriding VvConfig defaults in your app ./src/app.vv.ts file or singularly in a component instance.
Alternatively, you can install the raw library VvEl Component with:
import { VvEl } from '@obewds/vueventus'TIP
Importing raw VueVentus library components will still apply your ./src/app.vv.ts settings automatically through the Vue provide() and inject() pattern. All raw VueVentus library components automatically check for a provided "vv" keyed object with a ConfigVv type interface.
CLI or Raw?
The main difference between raw library components and CLI installed components, is that you have no control over component defaults with raw library components. This is less flexible than using CLI installed components, because control of component defaults can greatly reduce the number of props a dev has to type for component instances, which reduces app code.
Meanwhile, the control CLI installed components provide through customizable defaults, opens up to a global level (styling management system) control for default component state characteristic values (particularly powerful with color and proportional size characteristics).
Prop: borderPalette
Type: String
Default: "default"
The VvEl Component borderPalette prop sets the component instance border color based both on the borderColor prop and the borderPalette prop value together.
Syntax
<VvEl border-palette="default" class="border p-2">
VvEl
</VvEl>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: borderColor
Type: String
Default: ""
The VvEl Component borderColor prop sets the component instance border color based both on the borderPalette prop and the borderColor prop value together.
Syntax
<VvEl border-color="error" class="border p-2">
VvEl
</VvEl>Result
borderColor prop defaults examples
Typing for Downstream Component Instances
Coming Soon!
Prop: debug
Type: Boolean
Default: false
The VvEl Component debug prop toggles the debugging state of a component instance. When in debugging mode, each component instance prop value can be viewed through data-vv-el- prefixed HTML attributes.
Syntax
<VvEl :debug="true">
VvEl debug
</VvEl>Result
Prop: groundPalette
Type: String
Default: "default"
The VvEl Component groundPalette prop sets the component instance border color based both on the groundColor prop and the groundPalette prop value together.
Syntax
<VvEl ground-palette="default" ground-color="primary" class="p-2">
VvEl
</VvEl>Result
groundPalette "default" palette examples
groundPalette "console" palette examples
groundPalette "monochromatic" palette examples
groundPalette "pastel" palette examples
Typing for Downstream Component Instances
Coming Soon!
Prop: groundColor
Type: String
Default: "default"
The VvEl Component groundColor prop sets the component instance border color based both on the groundPalette prop and the groundColor prop value together.
Syntax
<VvEl ground-color="secondary" class="p-2">
VvEl
</VvEl>Result
groundColor prop defaults examples
Typing for Downstream Component Instances
Coming Soon!
Prop: size
Type: String
Default: "md"
The VvEl Component size prop sets the component instance size-based classes which in the context of elements typically involves font size atomic classes.
Syntax
<VvEl size="lg">
Large VvEl Text
</VvEl>Result
size prop VvEl size examples
Typing for Downstream Component Instances
Coming Soon!
Prop: tag
Type: String
Valid Values: ValidElementTags Module
Default: "div"
The VvEl Component tag prop sets the HTML tag attribute to a value that should be present in the ValidElementTags Module to be a valid value for this component.
Syntax
<VvEl tag="span" class="border-b-2">
VvEl
</VvEl>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: textPalette
Type: String
Default: "default"
The VvEl Component textPalette prop sets the component instance border color based both on the textColor prop and the textPalette prop value together.
Syntax
<VvEl text-palette="default" text-color="primary">
VvEl
</VvEl>Result
Typing for Downstream Component Instances
Coming Soon!
Prop: textColor
Type: String
Default: "default"
The VvEl Component textColor prop sets the component instance border color based both on the textPalette prop and the textColor prop value together.
Syntax
<VvEl text-color="secondary">
VvEl
</VvEl>Result
textColor prop defaults examples
Typing for Downstream Component Instances
Coming Soon!
Slot: #default
The VvEl Component has a standard #default Vue slot to insert child elements/nodes into the component.
Syntax
<VvEl>
Slot <span class="text-red-500 dark:text-red-300">Content</span>
</VvEl>