Menu item3.0
Ads by Tryg Careers
Installation
npm i @tryg/ui-libraryUsage
Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.
<script type="module">
import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-link-item';
defineCustomElement();
</script>
<anchor-menu-item url="/dashboard">
<span slot="text">Dashboard</span>
</anchor-menu-item>Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<anchor-menu-item url="/dashboard">
<span slot="text">Dashboard</span>
</anchor-menu-item>Icon slot
Here's an example of how to use the Menu-Item component with an icon on the left
<anchor-menu-item url="/dashboard">
<anchor-icon slot="icon" name="alert-circle" size="medium"></anchor-icon>
<span slot="text">Dashboard</span>
</anchor-menu-item>Compact
If using the "compact" version of Menu-Item, you should use a "small" size on icon component
<anchor-menu-item compact="true">
<anchor-icon slot="icon" size="small"></anchor-icon>
<span slot="text">Compact size</span>
</anchor-menu-item>API
anchor-menu-item
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
box | box | Whether to display the link with a border. | boolean | false |
compact | compact | Whether to display the link in compact mode. | boolean | false |
tabi | tab-index | tabindex is a reserved name so we use tabi which will apply the tabindex attribute Default value should work fine so don't change this unless you have a really good reason to. Set to -1 to disable tabbing. | number | 0 |
url | url | Where should the user go, when clicking on the menu-item. | any | undefined |
uuid | uuid | Give this instance of menu-item a custom ID, or keep the default. | string | uuidv4() |
Events
| Event | Description | Type |
|---|---|---|
clicked | Event dispatched when link-item is clicked {querySelecter}.addEventListener('clicked', ({event}) => {console.log('clicked:', event)}) | CustomEvent<{ url: string; }> |
CSS Custom Properties
| Name | Description |
|---|---|
--background-color | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--border | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--border-color | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--border-size | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--border-style | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--font-size | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--gap | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--menu-item-background-color | Set the background color of the menu item. |
--menu-item-border | Set the shorthand for the menu item border. |
--menu-item-border-color | Set the color of the menu item border. |
--menu-item-border-size | Set the size of the menu item border. |
--menu-item-border-style | Set the style of the menu item border. |
--menu-item-font-size | Set the font size of the menu item. |
--menu-item-gap | Set the gap property of the menu item. |
--menu-item-line-height | Set the line height of the menu item. |
--menu-item-padding | Set the padding of the menu item. |
--menu-item-radius-bottom-left | Set the bottom-left border radius of the menu item. |
--menu-item-radius-bottom-right | Set the bottom-right border radius of the menu item. |
--menu-item-radius-top-left | Set the top-left border radius of the menu item. |
--menu-item-radius-top-right | Set the top-right border radius of the menu item. |
--menu-item-text-color | Set the text color of the menu item. |
--menu-item-width | Set the width of the menu item. |
--padding | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--radius-bottom-left | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--radius-bottom-right | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--radius-top-left | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--radius-top-right | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--text-color | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--width | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
Dependencies
Depends on
Graph
Built with StencilJS