feat: implement alignCenter option for Accordion component

master
Katja Lutz 2 years ago
parent c6314c6338
commit 9f43bd7081

@ -4,18 +4,24 @@ import Collapsible from "./Collapsible";
const createAccordion = (defaultItem: number | null = 0) => { const createAccordion = (defaultItem: number | null = 0) => {
const [item, setItem] = createSignal(defaultItem); const [item, setItem] = createSignal(defaultItem);
const AccordionItem: FlowComponent<{ const AccordionItem: FlowComponent<{
alignCenter?: boolean;
label?: JSX.Element; label?: JSX.Element;
item?: number; item?: number;
activeTitleColor?: string; activeTitleColor?: string;
}> = (p) => { }> = (p) => {
const props = mergeProps({ item: Math.random() }, p); const props = mergeProps({ alignCenter: true, item: Math.random() }, p);
return ( return (
<Collapsible <Collapsible
class="border-b-0 last:border-b first:rounded-t last:rounded-b" class="border-b-0 last:border-b first:rounded-t last:rounded-b"
value={item() === props.item} value={item() === props.item}
label={ label={
<div class="flex justify-center items-center gap-2"> <div
classList={{
"flex items-center gap-2": true,
"justify-center": props.alignCenter,
}}
>
{props.label} {props.label}
</div> </div>
} }

Loading…
Cancel
Save