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-read-more';
  defineCustomElement();
</script>
<anchor-read-more>
  <span slot="show-more">Read More</span>

  <div slot="long-text">This text will be hidden until the link is clicked.</div>
</anchor-read-more>

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-read-more>
  <span slot="show-more">Read More</span>

  <div slot="long-text">This text will be hidden until the link is clicked.</div>
</anchor-read-more>

Show less slot

Expanded

You can customize the default behavior of the anchor-read-more component by setting the expanded prop to true, which will cause the component to be expanded by default.

Emphasized

You can customize the default behavior of the anchor-read-more component by setting the expanded prop to true, which will cause the component to be expanded by default.

API

anchor-read-more

Properties

Property	Attribute	Description	Type	Default
`emphasized`	`emphasized`	Set a visually emphasized state	`boolean`	`false`
`expanded`	`expanded`	Whether the read-more starts expanded	`boolean`	`false`
`uuid`	`uuid`	Give this instance of read-more a custom ID, or keep the default.	`string`	`uuidv4()`

Events

Event	Description	Type
`toggled`	Event dispatched when read-more expands or contracts	`CustomEvent<{ value: boolean; }>`

Methods

`toggleExpand() => Promise<void>`

Returns

Type: Promise<void>

CSS Custom Properties

Name	Description
`--read-more-border-width`	Set the width of the bottom border
`--read-more-font-family`	Set the font family of the read more text.
`--read-more-font-size`	Set the font size of the read more text.
`--read-more-font-weight`	Set the font weight of the read more text.
`--read-more-icon-color`	Set the color of the read more icon.
`--read-more-line-height`	Set the line height of the read more text.
`--read-more-link-text-color`	Set the text color of the read more link.
`--read-more-link-text-color-hover`	Set the text color of the read more link on hover.
`--read-more-text-color`	Set the text color of the read more content.

Read more3.0