Basic Usage
Banana
Orange
Apple
Grapes
Sizes
xs
sm
md
lg
xl
Banana
Orange
Apple
Grapes
With Divider
Banana
Orange
Apple
Grapes
Clickable & Active Status
Banana
Orange
Apple
Grapes
Customize Item Content
This is an example for using c-info-item
as item
Notification
Some notification description
Personal
Some personal description
Settings
Some settings description
Exit
Some exit description
CList API
Props
Slots
Events
items
Array<any>
Default
() => []
The items config.
itemKey
string
Default
'id'
The unique key of item.
clickable
boolean
Default
false
Determine whether the list items are clickable or not.
size
CSize
Default
'md'
The size of list.
activeFn
TSFunctionType
Default
() => false
The function to determine whether the item is in active or not.
divider
boolean
Default
false
Determine whether to show divider or not.
CItem API
Props
Slots
Events
label
string
| number
Default
''
The label text of item.
size
CSize
Default
'md'
The size of item.
clickable
boolean
Default
false
Determine whether the item is clickable or not.
active
boolean
Default
false
Determine whether the item is in active status or not.
CInfoItem API
Props
Slots
Events
icon
string
Default
''
The icon. imported from @quasar/extras
title
string
Default
''
The title.
subtitle
string
Default
''
The subtitle.
align
"start"
| "center"
| "end"
Default
'center'
The align direction.
iconAlign
"start"
| "center"
| "end"
Default
'start'
The align direction with icon and title.
size
CSize
Default
'md'
The Size of item.