List - fvListItem

GITHUB

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:

  • Item One
  • Item Two

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

  • Item One
  • Item Two

  • XSmall Size
  • Small Size
  • Medium Size
  • Large Size
  • XLarge Size

Notes:

  • Do not set parent prop for sub-list slot.

fvList API:

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

fvListItem API:

NameTypeDefaultDescription
disabled
Boolean
false
Disabled state of item.
expanded
Boolean
true
Should sub-list slot expanded by default?