fc-side-menu

An element by Forter

Usage

<script>
   import '@forter/side-menu';
</script>

<fc-side-menu renderers={} items=[{"label":"Probabilistic Linking","chips":[{"title":"Approve","active":true,"amount":13},{"title":"Decline","amount":11}]},{"label":"Identity","chips":[{"title":"Hidden","amount":5},{"title":"Shown","active":true,"amount":4},{"title":"Unknown","amount":7},{"title":"Shown","active":true,"amount":2},{"title":"Unknown","active":true,"amount":6}]},{"label":"Decision","chips":[{"title":"Approve","active":true,"amount":13},{"title":"Decline","amount":11}]},{"label":"Identity","chips":[{"title":"Hidden","amount":5},{"title":"Shown","active":true,"amount":4},{"title":"Unknown","amount":7},{"title":"Shown","active":true,"amount":2},{"title":"Unknown","active":true,"amount":6}]},{"label":"Decision","chips":[{"title":"Approve","active":true,"amount":13},{"title":"Decline","amount":11}]},{"label":"Identity","chips":[{"title":"Hidden","amount":5},{"title":"Shown","active":true,"amount":4},{"title":"Unknown","amount":7},{"title":"Shown","active":true,"amount":2},{"title":"Unknown","active":true,"amount":6}]},{"label":"Decision","chips":[{"title":"Approve","active":true,"amount":13},{"title":"Decline","amount":11}]},{"label":"Identity","chips":[{"title":"Hidden","amount":5},{"title":"Shown","active":true,"amount":4},{"title":"Unknown","amount":7},{"title":"Shown","active":true,"amount":2},{"title":"Unknown","active":true,"amount":6}]}]>
</fc-side-menu>

Properties

| Property | Attribute | Type | Default | Description | |-------------|-------------|--------------|---------|--------------------------------------------------| | fetching | fetching | "" \| "-1" | | | | items | items | any[] | | Side menu items | | loading | loading | any | | | | renderers | renderers | any | {} | Object of functions that let users draw different things inside the chips | | search | search | string | "" | |

Events

| Event | |----------| | change |

CSS Custom Properties

| Property | Description | |-------------------------------------------------|-----------------------------| | --fc-side-menu-category-chip-background-color | chip color. example: pink | | --fc-side-menu-width | width. example: 400px |