Installation

npm i @tryg/ui-library

Usage

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.

Webcomponent

<script type="module">
  import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-help-box';
  defineCustomElement();
</script>
<anchor-help-box>
  <span slot="header">Header</span>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis tincidunt aliquam, nunc nibh aliquet nunc, quis aliquam nisl nunc vel nunc. Sed euismod, nisl quis tincidunt aliquam, nunc nibh aliquet nunc, quis aliquam nisl nunc vel nunc.
  <a href="http:://www.example.com" slot="link">Link to more info</a>
</anchor-help-box>

Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..

Webcomponent

<script type="module">
  import { defineCustomElements } from '@tryg/ui-library/dist/loader';
  defineCustomElements();
</script>
<anchor-help-box>
  <span slot="header">Header</span>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis tincidunt aliquam, nunc nibh aliquet nunc, quis aliquam nisl nunc vel nunc. Sed euismod, nisl quis tincidunt aliquam, nunc nibh aliquet nunc, quis aliquam nisl nunc vel nunc.
  <a href="http:://www.example.com" slot="link">Link to more info</a>
</anchor-help-box>

With icon

<anchor-help-box>
  <anchor-icon name="alert-circle" slot="icon"></anchor-icon>
  <span slot="header">Header</span>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis tincidunt aliquam, nunc nibh aliquet nunc, quis aliquam nisl nunc vel nunc. Sed euismod, nisl quis tincidunt aliquam, nunc nibh aliquet nunc, quis aliquam nisl nunc vel nunc.
  <a href="http:://www.example.com" slot="link">Link to more info</a>
</anchor-help-box>

API

anchor-help-box

Properties

Property	Attribute	Description	Type	Default
`canClose`	`can-close`	to close the help box if needed	`boolean`	`false`
`closeButtonAriaLabel`	`close-button-aria-label`	arialabel for close button icon in banner- used for accessibility	`string`	`undefined`
`closeButtonTitle`	`close-button-title`	title for close button icon	`string`	`undefined`
`uuid`	`uuid`	Give this instance of help-box a custom ID, or keep the default.	`string`	`uuidv4()`

Events

Event	Description	Type
`closed`	Event emitted when the close icon is clicked.	`CustomEvent<void>`

Methods

`close() => Promise<void>`

Handles the click event of the close icon.

Returns

Type: Promise<void>

Dependencies

Depends on

Graph

Built with StencilJS

Help box3.0