Använd en expanderbar panel för att gruppera information och formulärskomponenter. Med en expanderbar panel kan mängden information som visas vid en första anblick minskas.
<template >
<f-expandable-panel :expanded ="expanded" @toggle ="onToggle" >
<template #title > Titel </template >
<template #default >
Innehåll
<p >
<a class ="anchor" href ="" target ="_blank" > Länk till annan sida </a >
</p >
</template >
</f-expandable-panel >
</template >
<script >
import { defineComponent } from "vue" ;
import { FExpandablePanel } from "@fkui/vue" ;
export default defineComponent ({
name : "FExpandablePanelExample" ,
components : { FExpandablePanel },
data (return {
expanded : false ,
type : Boolean ,
};
},
methods : {
onToggle (this .expanded = !this .expanded ;
},
},
});
</script >
En expanderbar panel består av 3 ytor (slots):
Title: panelens rubrik.
Default: innehåll som ska visas när panelen är öppen.
Outside: relaterat innehåll som visas under den öppna panelen.
En expanderbar panel ger möjlighet att uppmärksamma användare på förändringar eller händelser.
<template >
<div >
<f-expandable-panel :expanded ="expanded1" :notifications ="1" @toggle ="onToggle1" >
<template #title > Titel med en notifiering </template >
<template #default > Innehåll </template >
</f-expandable-panel >
<f-expandable-panel :expanded ="expanded2" :notifications ="2" @toggle ="onToggle2" >
<template #title > Titel med två notifieringar </template >
<template #default > Innehåll </template >
</f-expandable-panel >
</div >
</template >
<script >
import { defineComponent } from "vue" ;
import { FExpandablePanel } from "@fkui/vue" ;
export default defineComponent ({
name : "FExpandablePanelExample" ,
components : { FExpandablePanel },
data (return {
expanded1 : false ,
expanded2 : false ,
};
},
methods : {
onToggle1 (this .expanded1 = !this .expanded1 ;
},
onToggle2 (this .expanded2 = !this .expanded2 ;
},
},
});
</script >
En expanderbar panel kan visa relaterat innehåll under den panelen när den är öppen.
<template >
<f-expandable-panel :expanded ="expanded" @toggle ="onToggle" >
<template #title > Titel </template >
<template #default > Innehåll </template >
<template #outside >
Relaterat innehåll som visas när panelen är expanderad men utanför body
</template >
</f-expandable-panel >
</template >
<script >
import { defineComponent } from "vue" ;
import { FExpandablePanel } from "@fkui/vue" ;
export default defineComponent ({
name : "FExpandablePanelExample" ,
components : { FExpandablePanel },
data (return {
expanded : false ,
type : Boolean ,
};
},
methods : {
onToggle (this .expanded = !this .expanded ;
},
},
});
</script >
Props Name Description Type Required Default expanded
Toggle expanded/collapsed state
boolean
false
false
headerTag
Element to render for the header element inside the expandable panel.
string
false
"h2"
id
The id for the content id attribute.
string
false
() => ElementIdService.generateElementId()
notifications
Number of notifications present in panel.
If set to zero (default) no notification badge will be displayed.
number
false
0
screenReaderNotificationTemplate
‐
string
false
"Du har %VALUE% notifieringar."
Events Name Description Properties toggle
Emitted when panel heading is clicked.
<anonymous>: MouseEvent
Slots Name Description Bindings title
Slot used for title content
‐
default
Slot used for content shown when panel is expanded
‐
outside
Slot used for optional content rendered below panel when expanded
‐