VvList Component

The VvList Component provides marker color control (think bulleted and numbered lists) for child list item <li> elements.

Import

To import a VvList Component installed by the vueventus CLI or vv-update CLI:

// ./src/components/SomeComponent.vue
import VvList from './vv/lists/VvList.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 VvList Component with:

import { VvList } 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: debug

Type: Boolean
Default: false

The VvList 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-list- prefixed HTML attributes.

Syntax

<VvList :debug="true">
    <li>Item</li>
</VvList>

Result

• Item

Prop: listStyleTypeClass

Type: String
Default: "list-disc"

The VvList Component listStyleTypeClass prop sets the Tailwind list style type class for the component instance.

Syntax

<VvList list-style-type-class="list-disc">
    <li>.list-disc Item One</li>
    <li>.list-disc Item Two</li>
</VvList>

<VvList list-style-type-class="list-circle">
    <li>.list-circle Item One</li>
    <li>.list-circle Item Two</li>
</VvList>

<VvList list-style-type-class="list-decimal">
    <li>.list-decimal Item One</li>
    <li>.list-decimal Item Two</li>
</VvList>

<VvList list-style-type-class="list-square">
    <li>.list-square Item One</li>
    <li>.list-square Item Two</li>
</VvList>

Result

• .list-disc Item One
• .list-disc Item Two

• .list-circle Item One
• .list-circle Item Two

• .list-decimal Item One
• .list-decimal Item Two

• .list-square Item One
• .list-square Item Two

Prop: markerColor

Type: String
Default: "primary"

The VvList Component markerColor prop sets the component instance marker color in combination with the markerPalette prop.

Syntax

<VvList marker-color="default">
    <li>Default Item One</li>
    <li>Default Item Two</li>
</VvList>

<VvList marker-color="error">
    <li>Error Item One</li>
    <li>Error Item Two</li>
</VvList>

<VvList marker-color="primary">
    <li>Primary Item One</li>
    <li>Primary Item Two</li>
</VvList>

<VvList marker-color="secondary">
    <li>Secondary Item One</li>
    <li>Secondary Item Two</li>
</VvList>

<VvList marker-color="success">
    <li>Success Item One</li>
    <li>Success Item Two</li>
</VvList>

Result

• Default Item One
• Default Item Two

• Error Item One
• Error Item Two

• Primary Item One
• Primary Item Two

• Secondary Item One
• Secondary Item Two

• Success Item One
• Success Item Two

Typing for Downstream Component Instances

Coming Soon!

Prop: markerPalette

Type: String
Default: "default"

The VvList Component markerPalette prop sets the component instance marker color in combination with the markerColor prop.

Syntax

<VvList marker-palette="default" marker-color="primary">
    <li>Default Item One</li>
    <li>Default Item Two</li>
</VvList>

Result

• Default Palette Primary Color Item One
• Default Palette Primary Color Item Two

Typing for Downstream Component Instances

Coming Soon!

Prop: size

Type: String
Default: "md"

The VvList Component size prop sets the component instance size-based classes which in the context of list elements typically involves font size atomic classes.

Syntax

<VvList size="lg">
    <li>Large Item One</li>
    <li>Large Item Two</li>
</VvList>

Result

• Large Item One
• Large Item Two

size prop VvList size examples

• size="5xs" One
• size="5xs" Two

• size="4xs" One
• size="4xs" Two

• size="3xs" One
• size="3xs" Two

• size="2xs" One
• size="2xs" Two

• size="xs" One
• size="xs" Two

• size="sm" One
• size="sm" Two

• size="md" One
• size="md" Two

• size="lg" One
• size="lg" Two

• size="xl" One
• size="xl" Two

• size="2xl" One
• size="2xl" Two

• size="3xl" One
• size="3xl" Two

• size="4xl" One
• size="4xl" Two

• size="5xl" One
• size="5xl" Two

• size="6xl" One
• size="6xl" Two

• size="7xl" One
• size="7xl" Two

• size="8xl" One
• size="8xl" Two

• size="9xl" One
• size="9xl" Two

• size="10xl" One
• size="10xl" Two

• size="11xl" One
• size="11xl" Two

• size="12xl" One
• size="12xl" Two

Typing for Downstream Component Instances

Coming Soon!

Prop: tag

Type: String
Valid Values: ValidListTypes Module
Default: "ul"

The VvList Component tag prop sets the component's output HTML tag name.

Syntax

<VvList tag="ul">
    <li>Unordered List Item One</li>
    <li>Unordered List Item Two</li>
</VvList>

<VvList tag="ol">
    <li>Ordered List Item One</li>
    <li>Ordered List Item Two</li>
</VvList>

Result

• Unordered List Item One
• Unordered List Item Two

1. Ordered List Item One
2. Ordered List Item Two

Typing for Downstream Component Instances

Coming Soon!

Slot: #default

Coming Soon!

Current Version:

v0.61.7