ActiveList

COMPONENT

A component which wraps the ActiveList from @uiloos/core.

Since 1.0.0

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.

Note: If you plan on using the ActiveList component the vue configuration called "runtimeCompiler" must be set to "true' since it uses templates.

<template>
  <ActiveList 
    :config="{ 
      active: 'a', 
      contents: ['a', 'b', 'c'] 
    }"
  >
    <template v-slot="{ activeList }">
      <ul>
        <li 
           v-for="content in activeList.contents" 
           @click="content.activate()"
        >
          {{ content.value }} 
          {{ content.isActive ? "active" : "inactive" }}
        </li>
      </ul>
    </template>
  </ActiveList>
</template>