fc-drawer

An element by Forter

Usage

<script>
   import '@forter/drawer';
</script>

<fc-drawer value="2">
   <item id="1" name="Decision Dashboard" icon="decision-dashboard">Investigation and feedback tools, performance KPIs and insights</item>
   <item id="2" name="Partner" icon="partner">Portfolio fraud management for PSPs and partners</item>
   <item id="3" name="Item Not Recieved" label-text="INR" style="--fc-drawer-item-background-color:#faf9ff;" icon="item-not-recieved">Protect from abuse, while supporting legitimate customers</item>
</fc-drawer>

Properties

| Property | Attribute | Type | Default | Description | |---------------|---------------|-----------|-----------|--------------------------------------------------| | active | active | boolean | false | An attribute that represents the requested state of the component | | color | | string | | | | currentItem | currentItem | string | "" | The label of the drawer button | | gap | gap | string | | The size of the gap of the grid | | value | value | string | | The current selected item. example: 3 | | variant | variant | string | "primary" | The color variant of the drawer toggle button. example: secondary | | visible | visible | boolean | false | Represents the state of the component, opened/closed. |

Events

| Event | |----------------| | item-changed |