@forter/side-menu

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