List - fvListItem

To create full featured list and list-item elements use these components.

Code:

  
    HTML
    
  
  <fvList parent>
    <fvListItem> Item One </fvListItem>
    <fvListItem> Item Two </fvListItem>
    <fvListItem disabled> Item Three </fvListItem>
    <fvListItem>
        Item Four with childs
        <fvList slot="sub-list">
            <fvListItem> Item Four / One </fvListItem>
            <fvListItem> Item Four / Two </fvListItem>
        </fvList>
    </fvListItem>
</fvList>

Examples:

View Source

Normal List

Item One
Item Two

With sub-list and disabled item

Item One
Item Two (with .selected class
Item Three
Item Four with childs
- Item Four / One
- Item Four / Two

Without setting parent prop

Item One
Item Two

Sizes

XSmall Size
Small Size
Medium Size
Large Size
XLarge Size

Notes:

Do not set parent prop for sub-list slot.

fvList API:

Name	Type	Default	Description
parent	Boolean	false	If you want to handle focus and highlight items by arrow key, set it true.

Name	Description
default	---

Name	Description
.fv-size-xs	XSmall size
.fv-size-sm	Small size
.fv-size-md	Medium size (actived by default)
.fv-size-lg	Large size
.fv-size-xl	XLarge size

fvListItem API:

Name	Type	Default	Description
disabled	Boolean	false	Disabled state of item.
expanded	Boolean	true	Should sub-list slot expanded by default?

Name	Params	Description
expand	---	Fired when sub-list slot has been expanded.
collapse	---	Fired when sub-list slot has been collapsed.
click	event	Fired when user clicked on this.
hover	---	Fired user highlighted this, even with mouse event or by arrow key.

Name	Description
default	---
sub-list	Use this to create fvList component inside fvListItem as sub list.

Name	Description
.selected	Selected style
.fv-size-xs	XSmall size
.fv-size-sm	Small size
.fv-size-md	Medium size (actived by default)
.fv-size-lg	Large size
.fv-size-xl	XLarge size