"Open up', they said. So we stackedG."
G. Brahms, 1964
isOpen | boolean | |
bordered | boolean | |
showTitleDivider | boolean |
isOpen | boolean | |
bordered | boolean | |
showTitleDivider | boolean |
isOpen | boolean | |
bordered | boolean | |
showTitleDivider | boolean |
<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>
icon | icon | |
primary | string | |
secondary | string | |
isOpen | boolean | |
bordered | boolean | |
showTitleDivider | boolean |
<Cartouche
class="marg-tb-1" />
__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: {};
};
};