2022-09-09 20:41:18 +00:00
< template >
2023-02-28 08:29:30 +00:00
< DocComponent title = "Vue Chips Component" header = "Chips" description = "Chips is used to enter multiple values on an input field." :componentDocs ="docs" :apiDocs ="['Chips']" / >
2022-09-09 20:41:18 +00:00
< / template >
< script >
2023-02-28 08:29:30 +00:00
import AccessibilityDoc from '@/doc/chips/AccessibilityDoc' ;
import BasicDoc from '@/doc/chips/BasicDoc' ;
import DisabledDoc from '@/doc/chips/DisabledDoc' ;
import FloatLabelDoc from '@/doc/chips/FloatLabelDoc' ;
import ImportDoc from '@/doc/chips/ImportDoc' ;
import InvalidDoc from '@/doc/chips/InvalidDoc' ;
import SeparatorDoc from '@/doc/chips/SeparatorDoc' ;
import StyleDoc from '@/doc/chips/StyleDoc' ;
import TemplateDoc from '@/doc/chips/TemplateDoc' ;
2022-09-09 20:41:18 +00:00
export default {
data ( ) {
return {
2023-02-28 08:29:30 +00:00
docs : [
{
id : 'import' ,
label : 'Import' ,
component : ImportDoc
} ,
{
id : 'basic' ,
label : 'Basic' ,
component : BasicDoc
} ,
{
id : 'separator' ,
label : 'Separator' ,
component : SeparatorDoc
} ,
{
id : 'template' ,
label : 'Template' ,
component : TemplateDoc
} ,
{
id : 'floatlabel' ,
label : 'Float Label' ,
component : FloatLabelDoc
} ,
{
id : 'invalid' ,
label : 'Invalid' ,
component : InvalidDoc
} ,
{
id : 'disabled' ,
label : 'Disabled' ,
component : DisabledDoc
} ,
{
id : 'style' ,
label : 'Style' ,
component : StyleDoc
} ,
{
id : 'accessibility' ,
label : 'Accessibility' ,
component : AccessibilityDoc
}
]
2022-09-09 20:41:18 +00:00
} ;
}
} ;
< / script >