VvListItem Component

The VvListItem Component provides palette and color control of list item text and their symbol/bullet characters separately.

Import

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

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

import { VvListItem } 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: color

Type: String
Default: "neutral"

The VvListItem Component color prop sets the component instance text color in combination with the palette prop.

Syntax

<ul class="list-disc text-left pl-4">
    <VvListItem color="default">default List Item</VvListItem>
    <VvListItem color="error">error List Item</VvListItem>
    <VvListItem color="primary">primary List Item</VvListItem>
    <VvListItem color="secondary">secondary List Item</VvListItem>
    <VvListItem color="success">success List Item</VvListItem>
    <VvListItem color="neutral">neutral List Item</VvListItem>
</ul>

Result

• default List Item
• error List Item
• primary List Item
• secondary List Item
• success List Item
• neutral List Item

Typing for Downstream Component Instances

Coming Soon!

Prop: debug

Type: Boolean
Default: false

The VvListItem 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-item- prefixed HTML attributes.

Syntax

<ul class="list-disc text-left pl-4">
    <VvListItem :debug="true">VvListItem debug</VvListItem>
</ul>

Result

• VvListItem debug

Prop: enableColoredSymbols

Type: Boolean
Default: true

The VvListItem Component enableColoredSymbols prop enables the component to be use with separate colors for symbols and list items using the color, palette, symbolColor, symbolPalette props.

Syntax

<ul class="list-disc text-left pl-4">
    <VvListItem :enable-colored-symbols="true" symbol-color="default">default List Item</VvListItem>
    <VvListItem :enable-colored-symbols="true" symbol-color="error">error List Item</VvListItem>
    <VvListItem :enable-colored-symbols="true" symbol-color="primary">primary List Item</VvListItem>
    <VvListItem :enable-colored-symbols="true" symbol-color="secondary">secondary List Item</VvListItem>
    <VvListItem :enable-colored-symbols="true" symbol-color="success">success List Item</VvListItem>
    <VvListItem :enable-colored-symbols="true" symbol-color="neutral">neutral List Item</VvListItem>
</ul>

Result

• default List Item
• error List Item
• primary List Item
• secondary List Item
• success List Item
• neutral List Item

Prop: palette

Type: String
Default: "default"

The VvListItem Component palette prop sets the component instance text color in combination with the color prop.

Syntax

<ul class="list-disc text-left pl-4">
    <VvListItem palette="default" color="default">default Palette List Item</VvListItem>
</ul>

Result

• default Palette List Item

Typing for Downstream Component Instances

Coming Soon!

Prop: symbolColor

Type: String
Default: "primary"

The VvListItem Component symbolColor prop sets the component instance symbol color in combination with the symbolPalette prop.

Syntax

<ul class="list-disc text-left pl-4">
    <VvListItem :enable-colored-symbols="true" symbol-color="default">default List Item</VvListItem>
    <VvListItem :enable-colored-symbols="true" symbol-color="error">error List Item</VvListItem>
    <VvListItem :enable-colored-symbols="true" symbol-color="primary">primary List Item</VvListItem>
    <VvListItem :enable-colored-symbols="true" symbol-color="secondary">secondary List Item</VvListItem>
    <VvListItem :enable-colored-symbols="true" symbol-color="success">success List Item</VvListItem>
    <VvListItem :enable-colored-symbols="true" symbol-color="neutral">neutral List Item</VvListItem>
</ul>

Result

• default List Item
• error List Item
• primary List Item
• secondary List Item
• success List Item
• neutral List Item

Typing for Downstream Component Instances

Coming Soon!

Prop: symbolPalette

Type: String
Default: "default"

The VvListItem Component symbolPalette prop sets the component instance symbol color in combination with the symbolColor prop.

Syntax

<ul class="list-disc text-left pl-4">
    <VvListItem :enable-colored-symbols="true" symbol-palette="default">default Palette List Item</VvListItem>
</ul>

Result

• default Palette List Item

Typing for Downstream Component Instances

Coming Soon!

Slot: #default

The VvListItem Component has a standard #default Vue slot to insert child elements/nodes into the component.

Syntax

<ul class="list-disc text-left pl-4">
    <VvListItem>
        Slot <span class="text-red-500 dark:text-red-300">Content</span>
    </VvListItem>
</ul>

Result

• Slot Content

Current Version:

v0.61.7