<Cartouche />

base/cartouche.svelte

"Open up', they said. So we stackedG."
G. Brahms, 1964

Component Cartouche examples :
Using slots
component Cartouche demo using slots
A simple cartouche
This is a cartouche
Some
Cartouche
content
isOpen boolean
bordered boolean
showTitleDivider boolean
Some stacked cartouches
This is a cartouche title
Cartouche content
This is another cartouche
And another one
isOpen boolean
bordered boolean
showTitleDivider boolean
Some nested cartouches
Can contain some others cartouches
Inner cartouche
Cartouche content
Inner cartouche
Cartouche content
isOpen boolean
bordered boolean
showTitleDivider boolean
code

	<Cartouche isOpen={true} class="marg-tb-1">
		<Icon slot="cartoucheIcon" fontSize="small" icon="circle" />
		<span slot="primarySlot">This is a cartouche</span> 
		<Button size="medium" slot="cartoucheButtons">a button</Button>
		<div class="pad-2 border-t">Some <br />Cartouche <br />content</div>
	</Cartouche> 
Using props
component Cartouche demo using props
A simple cartouche
A title
Some subtitle
icon icon
primary string
secondary string
isOpen boolean
bordered boolean
showTitleDivider boolean
code

	<Cartouche 
		class="marg-tb-1" />
Api preview :
__propDef: {
    props: {
        /** @restProps {button | a} */ class?: string | undefined;
        style?: string | undefined;
        element?: HTMLDivElement | null | undefined;
        /** displayed title of the cartouche */ primary?: string | undefined;
        /** displayed sub title of the cartouche */ secondary?: string | undefined;
        icon?: string | undefined;
        /** can be set as a prop or as a className */ stacked?: boolean | undefined;
        component?: SvelteComponent | undefined;
        componentProps?: Record<string, any> | undefined;
        /** show the title divider line */ showTitleDivider?: boolean | undefined;
        /** show the default border style */ bordered?: boolean | undefined;
        isOpen?: boolean | undefined;
        /** use to control cartouche */ actions?: {
            open: () => void;
            toggle: () => void;
        } | undefined;
    };
    events: {
        [evt: string]: CustomEvent<any>;
    };
    slots: {
        cartoucheIcon: {};
        primarySlot: {};
        secondarySlot: {};
        cartoucheButtons: {};
        default: {};
    };
};