Skip to content
This repository has been archived by the owner before Nov 9, 2022. It is now read-only.

tailwindlabs/tailwindui-vue

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 

⚠️ Deprecated: use Headless UI instead ⚠️


@tailwindui/vue

This project is still in a pre-alpha state and could change dramatically at any time. Not for production.

A set of completely unstyled, fully accessible UI components for Vue.js, designed to integrate beautifully with Tailwind CSS.

You bring the styles and the markup, we handle all of the complex keyboard interactions and ARIA management.

Installation

# npm
npm install @tailwindui/vue

# Yarn
yarn add @tailwindui/vue

Usage

Listbox

Basic example:

<template>
  <Listbox v-model="selectedWrestler" v-slot="{ isOpen }">
    <ListboxLabel class="sr-only">
      Select a wrestler:
    </ListboxLabel>
    <ListboxButton class="rounded p-3 border">
      {{ selectedWrestler }}
    </ListboxButton>
    <ListboxList v-show="isOpen">
      <ListboxOption
        v-for="wrestler in wrestlers"
        :key="wrestler"
        :value="wrestler"
        v-slot="{ isActive, isSelected }"
      >
        <div
          class="p-3"
          :class="isActive ? 'bg-blue-600 text-white' : 'bg-white text-gray-900'"
        >
          {{ wrestler }}
          <img v-show="isSelected" src="/checkmark.svg" />
        </div>
      </ListboxOption>
    </ListboxList>
  </Listbox>
</template>

<script>
  import {
    Listbox,
    ListboxLabel,
    ListboxButton,
    ListboxList,
    ListboxOption,
  } from "@tailwindui/vue";

  export default {
    components: {
      Listbox,
      ListboxLabel,
      ListboxButton,
      ListboxList,
      ListboxOption,
    },
    data() {
      return {
        selectedWrestler: "The Ultimate Warrior",
        wrestlers: [
          "The Ultimate Warrior",
          "Randy Savage",
          "Hulk Hogan",
          "Bret Hart",
          "The Undertaker",
          "Mr. Perfect",
          "Ted DiBiase",
          "Bam Bam Bigelow",
          "Yokozuna",
        ],
      };
    },
  };
</script>

About

Deprecated, please use the Headless UI repo instead.

Resources

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •