Hides list elements after a certain list element amount and creates a button after the last visible element which toggles the visibility of the hidden elements.

Adds the class "hylo-list-more-visible" when the full list is visible.

Used slots:

  • default: the list
  • button: the "more" button content

Properties

buttonClass: string = ''

Classes added to the inner button.

hyloButtonClass: string = ''

Classes added to the "more" button.

hyloListMoreToggled: EventEmitter<"closed" | "open">

Emitted when the "more" button is clicked. Contains the new state.

listItem: string = 'li'

The list items. A css query, starting at this element, which defines the list elements.

listItemMaxHeight: string = ''

The max height of the list item.

Can also be set as --hylo-list-more-height.

toggleButton: boolean

If set, the "read more" button functions as a toggle button. By default the button disappears after click.

visibleCount: number = 10

The amount of list items which are always visible and after which the button will be placed.

Methods

  • Show list only until the "visibleCount" "listItem".

    Returns Promise<void>

  • Show full list.

    Returns Promise<void>

  • Toggle between "open" and "close".

    Returns Promise<void>

Generated using TypeDoc