activeList<T>

COMPONENT

A function which you can use to register a data to Alpine.js to create ActiveList instances from within HTML.

Since 1.4.0

Signature

Parameters

Returns

An Alpine.js data component

Examples

A. A Simple example

The example below creates a list with three items: a, b and c of which only one item can be active. Clicking an item makes it active.

First register activeList to alpine:

import Alpine from 'alpinejs';
import { activeList } from '@uiloos/alpine';

Alpine.data('activeList', activeList);

Alpine.start();

Now you can use the activeList in your HTML like this:

<ul
  x-data="activeList({
    alpine: {
      name: 'tabs'
    },
    active: 'a',
    contents: ['a', 'b', 'c']
  })"
>
  <template x-for="content in tabs().contents">
    <li @click="content.activate()">
      <span x-text="`${content.value} ${content.isActive 'active' : 'inactive'}`"></span>
    </li>
  </template>
</ul>