Använd ett expanderbart stycke för att dölja innehållet under en rubrik och minska mängden information som presenteras för användaren vid en första anblick.
<template >
<f-expandable-paragraph :expanded ="expanded" header-tag ="span" @toggle ="onToggle" >
<template #title > Titel (span) </template >
<template #default >
<span > Innehåll </span >
<p >
<a class ="anchor" href ="" target ="_blank" > Länk till annan sida </a >
</p >
</template >
</f-expandable-paragraph >
</template >
<script >
import { defineComponent } from "vue" ;
import { FExpandableParagraph } from "@fkui/vue" ;
export default defineComponent ({
name : "FExpandableParagraphExample" ,
components : { FExpandableParagraph },
data (return {
expanded : false ,
type : Boolean ,
};
},
methods : {
onToggle (this .expanded = !this .expanded ;
},
},
});
</script >
Använd en rubrik på rätt nivå (H1 till H6) för att strukturen på sidan ska bli rätt.
Flera expanderbara stycken kan vara öppna samtidigt. Ett stycke ska inte stängas när ett annat öppnas.
Nästla inte expanderbara stycken.
Till varje rubrik går det att koppla relaterad information (används typiskt i kombination med att flera expanderbara stycken presenteras i en lista).
Expanderbara stycken kan användas för att presentera en lista med rubriker. När expanderbara stycken presenteras i en lista visas en avskiljare mellan styckena. Listan kan kombineras med att visa relaterad information.
<template >
<div >
<f-expandable-paragraph :expanded ="expanded1" header-tag ="h2" @toggle ="onToggle1" >
<template #title > Titel (h2) </template >
<template #default >
<span > Innehåll </span >
</template >
</f-expandable-paragraph >
<f-expandable-paragraph :expanded ="expanded2" header-tag ="h3" @toggle ="onToggle2" >
<template #title > Titel (h3) </template >
<template #default >
<span > Innehåll </span >
</template >
</f-expandable-paragraph >
<f-expandable-paragraph :expanded ="expanded3" header-tag ="h4" @toggle ="onToggle3" >
<template #title > Titel (h4) </template >
<template #related > 2020-06-25 </template >
<template #default >
<span > Innehåll </span >
</template >
</f-expandable-paragraph >
</div >
</template >
<script >
import { defineComponent } from "vue" ;
import { FExpandableParagraph } from "@fkui/vue" ;
export default defineComponent ({
name : "FExpandableParagraphMultipleExample" ,
components : { FExpandableParagraph },
data (return {
expanded1 : false ,
expanded2 : false ,
expanded3 : false ,
};
},
methods : {
onToggle1 (this .expanded1 = !this .expanded1 ;
},
onToggle2 (this .expanded2 = !this .expanded2 ;
},
onToggle3 (this .expanded3 = !this .expanded3 ;
},
},
});
</script >
<template >
<div >
<f-expandable-paragraph
:expanded ="expanded1"
header-tag ="h2"
:list ="true"
@toggle ="onToggle1"
>
<template #title > Titel (h2) </template >
<template #related > 2020-06-25 </template >
<template #default >
<span > Innehåll </span >
</template >
</f-expandable-paragraph >
<f-expandable-paragraph
:expanded ="expanded2"
header-tag ="h3"
header-visual-tag ="h6"
:list ="true"
@toggle ="onToggle2"
>
<template #title > Titel (h3) (visuell h6) </template >
<template #related > 2020-06-25 </template >
<template #default >
<span > Innehåll </span >
</template >
</f-expandable-paragraph >
<f-expandable-paragraph
:expanded ="expanded3"
header-tag ="h6"
header-visual-tag ="h2"
:list ="true"
@toggle ="onToggle3"
>
<template #title > Titel (h6) (visuell h2) </template >
<template #related > 2020-06-25 </template >
<template #default >
<span > Innehåll </span >
</template >
</f-expandable-paragraph >
</div >
</template >
<script >
import { defineComponent } from "vue" ;
import { FExpandableParagraph } from "@fkui/vue" ;
export default defineComponent ({
name : "FExpandableParagraphMultipleExample" ,
components : { FExpandableParagraph },
data (return {
expanded1 : false ,
expanded2 : false ,
expanded3 : false ,
};
},
methods : {
onToggle1 (this .expanded1 = !this .expanded1 ;
},
onToggle2 (this .expanded2 = !this .expanded2 ;
},
onToggle3 (this .expanded3 = !this .expanded3 ;
},
},
});
</script >
Props Name Description Type Required Default expanded
Toggle expanded/collapsed state
boolean
false
false
headerTag
Element to render for the button elmement
string
false
"span"
headerVisualTag
Visual header size for the button element.
string
false
""
list
Toggle list style of component
boolean
false
false
id
The id for the content id attribute.
string
false
() => ElementIdService.generateElementId()
Events Name Description Properties toggle
Emitted when heading is clicked.
<anonymous>: MouseEvent
Slots Name Description Bindings title
Slot used for title content
‐
related
Slot used for related information besides the header element
‐
default
Slot used for content shown when expanded
‐