2022-09-09 20:41:18 +00:00
< template >
2023-03-16 13:18:12 +00:00
< DocComponent title = "Vue Speed Dial Component" header = "Speed Dial" description = "When pressed, a floating action button can display multiple primary actions that can be performed on a page." :componentDocs ="docs" :apiDocs ="['SpeedDial']" / >
2022-09-09 20:41:18 +00:00
< / template >
< script >
2023-02-28 08:29:30 +00:00
import AccessibilityDoc from '@/doc/speeddial/AccessibilityDoc.vue' ;
import CircleDoc from '@/doc/speeddial/CircleDoc.vue' ;
import CustomDoc from '@/doc/speeddial/CustomDoc.vue' ;
import ImportDoc from '@/doc/speeddial/ImportDoc.vue' ;
import LinearDoc from '@/doc/speeddial/LinearDoc.vue' ;
import MaskDoc from '@/doc/speeddial/MaskDoc.vue' ;
import QuarterCircleDoc from '@/doc/speeddial/QuarterCircleDoc.vue' ;
import SemiCircleDoc from '@/doc/speeddial/SemiCircleDoc.vue' ;
import TooltipDoc from '@/doc/speeddial/TooltipDoc.vue' ;
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 : 'linear' , label : 'Linear' , component : LinearDoc } ,
{ id : 'circle' , label : 'Circle' , component : CircleDoc } ,
{ id : 'semi-circle' , label : 'Semi Circle' , component : SemiCircleDoc } ,
{ id : 'quarter-circle' , label : 'Quarter Circle' , component : QuarterCircleDoc } ,
{ id : 'tooltip' , label : 'Tooltip' , component : TooltipDoc } ,
{ id : 'mask' , label : 'Mask' , component : MaskDoc } ,
{ id : 'custom' , label : 'Custom' , component : CustomDoc } ,
{ id : 'accessibility' , label : 'Accessibility' , component : AccessibilityDoc }
2022-09-09 20:41:18 +00:00
]
} ;
}
} ;
< / script >