README.md

Zoa

UI components for the Data Portal team.

NB: Zoa is in alpha and is subject to frequent API changes with no prior notification or appropriate semantic version change.

Installation

Zoa is designed for use with Vue 3.

npm i @nhm-data/zoa

Usage

See the storybook for more details on specific components.

The components can either be registered globally:

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { Zoa } from '@nhm-data/zoa';
import '@nhm-data/zoa/theme';

const app = createApp(App);
app.use(Zoa);
app.mount('#app');

<!-- Component.vue -->
<template>
  <zoa-button label="Submit" />
</template>

Or imported manually into individual components:

<!-- Component.vue -->
<template>
  <zoa-button label="Submit" />
</template>

<script setup>
import { ZoaButton } from '@nhm-data/zoa';
import '@nhm-data/zoa/theme';
</script>

Inputs

Inputs (other than the button and toggle button) are used via the <zoa-input> (or <ZoaInput>) component:

<template>
  <zoa-input
    zoa-type="checkbox"
    label="Checkbox"
    :options="{ name: 'chkbox', delay: '200' }"
  />
  <zoa-input
    zoa-type="textbox"
    label="Textbox"
    :options="{ placeholder: 'this is a placeholder' }"
  />
</template>

<script setup>
import { ZoaInput } from '@nhm-data/zoa';
</script>