Zoo web components documentation

Button Group

Button group renders group of <zoo-button> components and it works like a tabs, where only one button can be in active state.

Set data-active attribute on one of <zoo-button> components to mark it as initially active.


Example

<zoo-button-group active-type="primary" inactive-type="transparent" style="width: max-content">
    <zoo-button>
        <button type="button">Status Pending</button>
    </zoo-button>
    <zoo-button data-active>
        <button type="button">Fulfilled</button>
    </zoo-button>
    <zoo-button>
        <button type="button">Status Failure</button>
    </zoo-button>
</zoo-button-group>

The above will render to:

Attributes

Name Description Optional
active-type zoo-button type (primary, secondary, hollow, transparent)
inactive-type zoo-button type (primary, secondary, hollow, transparent)

Slots

Name Description Optional
<zoo-button> component with arbitrary content inside

Button

Button component which provides styles for <button></button>


Example

<zoo-button>
    <button type="button" disabled>Disabled :(</button>
</zoo-button>

The above will render to:

Attributes

Name Description Default Optional
type primary, secondary, hollow, transparent primary

CSS Variables

Name Description
--primary-light used as right end of gradient
--primary-mid used as left side of gradient, background on hover/focus and as text-color for type="hollow"
--primary-dark used for background when button is active
--secondary-light same as primary-light for type="secondary"
--secondary-mid same as primary-mid for type="secondary"
--secondary-dark same as primary-dark for type="secondary"

Slots

Name Description Optional
<button> element with arbitrary content inside

Checkbox

Checkbox component which provides styles for <input type="checkbox"/>


Example usage

<zoo-checkbox highlighted>
    <input id="checkbox-id" slot="checkbox" type="checkbox"/>
    <label for="checkbox-id" slot="label">An example checkbox</label>
</zoo-checkbox>

The above will render to:

Note: id and for attributes on native elements are optional when you do not care about accessibility.

Attributes

Name Description Optional
invalid flag which indicates whether the input is valid or not
highlighted flag indicating whether the border around the input is visible

invalid and highlighted attributes should be used as a boolean attribute.

CSS Variables

Name Description
--primary-mid used for all states
--warning-mid used for all states when invalid attribute is present

Slots

Name Description Optional
checkbox <input id="checkbox-id" slot="checkbox" type="checkbox/>
label <label for="checkbox-id" slot="label">An example checkbox</label>
info accepts any element, for example span
error accepts any element element that shows when invalid attribute is present

Dependencies

Collapsable List

Container component which provides styles for slotted content.


Example usage

<zoo-collapsable-list>
    <zoo-collapsable-list-item>
        <span slot="header">Header1</span>
        <div slot="content">content</div>
    </zoo-collapsable-list-item>
    <zoo-collapsable-list-item>
        <span slot="header">Header2</span>
        <div slot="content">content</div>
    </zoo-collapsable-list-item>
</zoo-collapsable-list>

Rendered

Header1
content
Header2
content

CSS Variables

Name Description
--primary-mid user for border and icon
--primary-dark user for header text when item is active

Slots

Name Description Optional
injected element must be zoo-collapsable-list-item, which accepts header and content slots
header arbitrary content
content arbitrary content

Dependencies

Date Range

Date range component which provides styles for slotted <input type="date"/>


Example usage

<zoo-date-range>
    <label slot="label">Input date range</label>
    <input slot="date-from" type="date"/>
    <input slot="date-to" type="date"/>
    <span slot="info">Additional helpful information for our users</span>
    <span slot="error">Date range is invalid!</span>
</zoo-date-range>

The above will render to:

Additional helpful information for our users Date range is invalid!

Attributes

Name Description Optional
invalid flag which indicates whether the input is valid or not

invalid attribute should be used as a boolean attribute.

CSS Variables

Name Description
--primary-light refer to zoo-link
--primary-mid refer to zoo-link
--primary-dark refer to zoo-link
--warning-mid color of error message

Slots

Name Description Optional
date-from name of the slot for input date-from
date-to name of the slot for input date-to
label name of the slot for label
info accepts any element, foe example span
error accepts any element element that shows when invalid attribute is present

Dependencies

Feedback

Container component which provides a styled container with preset icon.


Example usage

<div style="height: 50px; width: auto">
    <zoo-feedback>
        This is an info message.
    </zoo-feedback>
</div>

Rendered

This is an info message.

Attributes

Name Description Default Optional
type info, error, success info

CSS Variables

Name Description
--primary-ultralight background when type="success"
--primary-mid icon color when type="success"
--info-ultralight background when type="info"
--info-mid icon color when type="info"
--warning-ultralight background when type="error"
--warning-mid icon color when type="error"

Slots

Name Description Optional
arbitrary content

Dependencies

Footer

Container footer component.


Example usage

<zoo-footer>
    <zoo-link type="negative">
        <a slot="anchor" href="https://github.com/zooplus/zoo-web-components">Github</a>
    </zoo-link>
    <zoo-link type="negative">
        <a slot="anchor" href="https://www.npmjs.com/package/@zooplus/zoo-web-components">NPM</a>
    </zoo-link>
</zoo-footer>

The above will render to:

Github NPM

CSS Variables

Name Description
--primary-light right end of background gradient
--primary-mid left end of background gradient

Slots

Name Description Optional
arbitrary content

Grid Header

Grid header component.


Example usage

<zoo-grid-header slot="headercell" sortable="true" sortableproperty="createdDate">Created date</zoo-grid-header>

Attributes

sortable attribute should be used as a boolean attribute.

Name Description Optional
sortable flag, which indicates whether this column is sortable
sortableproperty string that will be emitted when user changes sorting ✓ - when sortable is not set
sort-title title for sort icon for a11y
swap-title title for swap icon for a11y

Slots

Name Description Optional
Arbitrary content

Dependencies

Grid Row

Grid row component.


Example usage

<zoo-grid-row slot="row">
    <div slot="row-details">
        <div>Valid</div>
        <div>2020-05-10</div>
        <div>Grid Row Expand</div>
        <div>
            <button type="button" class="expander">Expand</button>
        </div>
    </div>
    <div slot="row-content" expanded>
        <div>Content</div>
    </div>
</zoo-grid-row>

<zoo-grid-row slot="row">
    <div slot="row-details">
        <div>Valid</div>
        <div>2020-05-20</div>
        <div>Grid Row No Expand</div>
        <div></div>
    </div>
</zoo-grid-row>

zoo-grid-row is special component that allows to define row with additional expandable content. slot="row-content" can be omitted and then zoo-grid-row works just like a standard <div slot="row">...</div>

If slot="row-content" is defined, then expand action should be defined to be able to expand additional content. To expand row-content add expanded attribute to <div slot="row-content"></div>, like in example above. expanded attribute should be controlled by client code (button click, row click etc.)

Attributes

Name Description Optional
expanded slot="row-content" flag, that indicates if extra content will be visible

Slots

Name Description Optional
Arbitrary content

Dependencies

Grid

Grid component.


Example usage

<div style="margin: 30px;box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)">
    <zoo-grid currentpage="3" maxpages="20" reorderable stickyheader>
        <zoo-grid-header slot="headercell" sortable="true" sortableproperty="createdDate">Created date</zoo-grid-header>
        <zoo-grid-header slot="headercell" sortable="true" sortableproperty="minWeight">Min weight</zoo-grid-header>
        <zoo-grid-header slot="headercell">Price</zoo-grid-header>

        <div slot="row"><div>2020-05-05</div><div>30 kg</div><div>20 EUR</div></div>
        <div slot="row"><div>2020-05-10</div><div>23 kg</div><div>15 EUR</div></div>
        <div slot="row"><div>2020-05-15</div><div>10 kg</div><div>5 EUR</div></div>

        <zoo-select labelposition="left" slot="pagesizeselector">
            <label for="grid-page-size" slot="label">Page Size</label>
            <select id="grid-page-size" slot="select">
                <option selected>5</option>
                <option>10</option>
                <option>25</option>
            </select>
        </zoo-select>
    </zoo-grid>
</div>

The above will render to:

Created date Min weight Price
2020-05-05
30 kg
20 EUR
2020-05-10
23 kg
15 EUR
2020-05-15
10 kg
5 EUR

Attributes

Name Description Optional
loading flag which indicates whether to show loader inside grid
stickyheader flag which indicates whether grid's header should be sticky when scrolling
resizable flag which indicates whether grid columns should be resizable
reorderable flag which indicates whether grid's column should be reorderable
currentpage current page that the user is on, mandatory only when using paginator
maxpages maximum number of pages, mandatory only when using paginator
prev-page-title title for previous page button for a11y
next-page-title title for next page button for a11y

loading, stickyheader, resizable and reorderable attributes should be used as a boolean attribute.

CSS variables

Name Description
--warning-dark user for text color for norecords slot
--grid-column-sizes sizes of each column, for example: repeat(var(--grid-column-num), minmax(50px, 1fr))

By default, grid will calculate number of headers supplied via slot, and apply repeat(var(--grid-column-num), minmax(50px, 1fr)) css rule to header and each row; If you want to change some of widths of some columns you can set --grid-column-sizes css custom property on zoo-grid to change width of columns, for example: --grid-column-sizes: 150px repeat(9, minmax(50px, 1fr)) !important; to force first column to be 150px wide. However, when resizable attribute is supplied, grid will set column widths automatically on element level, so --grid-column-sizes will not work, to force width of any column use the following css:

 zoo-grid div[column="1"] {
    min-width: 150px;
 }

Slots

Name Description Optional
headercell <zoo-grid-header slot="headercell">Header</zoo-grid-header>
row arbitrary content or <zoo-grid-row />
pagesizeselector arbitrary content
norecords arbitrary content, whether to show it or not must be handled by the client
footer-content arbitrary content, shown on the same line as pagination

Events

Name Description Event Content
sortChange output event, on zoo-grid {detail: { property: $propertyName, direction: $direction }}

When direction becomes undefined, whole detail object emitted in the event is undefined.

Name Description Event Content
pageChange output event, whenever current page changes {detail: { pageNumber: $pageNumber }}

Dependencies

Header

Container header component.


Example usage

<zoo-header>
    <img slot="img" alt="Zooplus logo" src="https://zooplus.github.io/zoo-web-components/logo.png"/>
    <h1 slot="headertext">Zooplus web components</h1>
    <zoo-button style="margin-left: 50px">
        <button type="button">Zoo+ theme</button>
    </zoo-button>
</zoo-header>

The above will render to:

Zooplus logo

Zooplus web components

CSS Variables

Name Description
--primary-mid text color

Slots

Name Description Optional
img logo image
headertext slot for header text, replaces headertext attribute is defined
arbitrary content after first two slots

Input Tag Option

Component which provides styles for slotted <zoo-tag/> inside zoo-input-tag element.

Slots

Name Description Optional
tag slot for zoo-tag element
description arbitrary content

Input Tag

Component which provides styles for slotted <input/>. Selected values are stored in slotted <select>.

Example usage

<zoo-input-tag>
    <label for="input-tag" slot="label">Tag input</label>
    <input id="input-tag" slot="input" placeholder="Type a tag name"/>
    <span slot="info">Start typing to see available tags. Tag filtering should be done on client side by listening on 'input' event on slotted input.</span>
    <span slot="error">At least one tag should be selected!</span>
    <select slot="select" multiple required>
        <option value="Dog"></option>
        <option value="Cat"></option>
        <option value="Bird"></option>
        <option value="Aquatic"></option>
    </select>
    <zoo-input-tag-option slot="tag-option" id="dog-tag">
        <zoo-tag slot="tag" type="cloud" data-value="Dog" tabindex="0">
            <span slot="content">Dog</span>
        </zoo-tag>
        <span slot="description">The domestic dog (Canis familiaris or Canis lupus familiaris)[4] is a domesticated descendant of the wolf.</span>
    </zoo-input-tag-option>
    <zoo-input-tag-option slot="tag-option" id="cat-tag">
        <zoo-tag slot="tag" type="cloud" data-value="Cat" tabindex="0">
            <span slot="content">Cat</span>
        </zoo-tag>
        <span slot="description">The cat (Felis catus) is a domestic species of small carnivorous mammal.</span>
    </zoo-input-tag-option>
    <zoo-input-tag-option slot="tag-option" id="aquatic-tag">
        <zoo-tag slot="tag" type="cloud" data-value="Aquatic" tabindex="0">
            <span slot="content">Aquatic</span>
        </zoo-tag>
        <span slot="description">An aquatic animal is an animal, either vertebrate or invertebrate, which lives in the water for most or all of its lifetime.</span>
    </zoo-input-tag-option>
    <zoo-input-tag-option slot="tag-option" id="bird-tag">
        <zoo-tag slot="tag" type="cloud" data-value="Bird" tabindex="0">
            <span slot="content">Bird</span>
        </zoo-tag>
        <span slot="description">Birds are a group of warm-blooded vertebrates constituting the class Aves /ˈeɪviːz/, characterised by feathers, toothless beaked jaws, the laying of hard-shelled eggs, a high metabolic rate, a four-chambered heart, and a strong yet lightweight skeleton.</span>
    </zoo-input-tag-option>
    <span slot="no-results">no results</span>
</zoo-input-tag>

The above will render to:

Start typing to see available tags. Tag filtering should be done on client side by listening on 'input' event on slotted input. At least one tag should be selected! Dog The domestic dog (Canis familiaris or Canis lupus familiaris)[4] is a domesticated descendant of the wolf. Cat The cat (Felis catus) is a domestic species of small carnivorous mammal. Aquatic An aquatic animal is an animal, either vertebrate or invertebrate, which lives in the water for most or all of its lifetime. Bird Birds are a group of warm-blooded vertebrates constituting the class Aves /ˈeɪviːz/, characterised by feathers, toothless beaked jaws, the laying of hard-shelled eggs, a high metabolic rate, a four-chambered heart, and a strong yet lightweight skeleton. no results

Note: nested zoo-tag should have a data-value attribute matching one of the options value from slotted select. That's how the component holds the state of the form control.

Attributes

Name Description Optional
invalid flag which indicates whether the input is valid or not

invalid attribute should be used as a boolean attribute.

CSS Variables

Name Description
--primary-light refer to zoo-link
--primary-mid refer to zoo-link
--primary-dark refer to zoo-link
--warning-mid color of error message

Slots

Name Description Optional
input name of the slot for input
select slot for select which will hold state of selected options
tag-option slot for zoo-input-tag-option element.
no-results slot for arbitrary content when no options are matched element.
label name of the slot for label
info accepts any element, foe example span
error accepts any element element that shows when invalid attribute is present

Dependencies

Input

Input component which provides styles for slotted <input type="text"/>


Example usage

<zoo-input>
    <label for="input-type-text" slot="label">Input type text</label>
    <input id="input-type-text" slot="input" type="text" placeholder="input"/>
    <span slot="info">Additional helpful information for our users</span>
    <a slot="link" href="https://zooplus.github.io/zoo-web-components/" target="about:blank">Forgotten your password?</a>
</zoo-input>

The above will render to:

Additional helpful information for our users Forgotten your password?

Note: id and for attributes on native elements are optional when you do not care about accessibility.

Attributes

Name Description Optional
invalid flag which indicates whether the input is valid or not
labelposition top, left

invalid attribute should be used as a boolean attribute.

CSS Variables

Name Description
--primary-light refer to zoo-link
--primary-mid refer to zoo-link
--primary-dark refer to zoo-link
--warning-mid color of error message

Slots

Name Description Optional
input name of the slot for input
label name of the slot for label
info accepts any element, foe example span
error accepts any element element that shows when invalid attribute is present
link accepts a
additional slot for additional content, inserted right after slot="input"

Dependencies

Link

Link wrapper component which provides styles for <a></a>


Example usage

<div style="height: 10px; width: auto">
    <zoo-link>
        <a slot="anchor" href="https://zooplus.github.io/zoo-web-components/">Zoo web components</a>
    </zoo-link>
</div>

The above will render to:

Zoo web components

Attributes

Name Description Default Optional
type negative, primary, grey, warning negative
size regular, bold, large regular

CSS Variables

Name Description
--primary-mid link text color
--primary-dark link text color on hover, focus and active
--warning-dark link text when type="warning"

Slots

Name Description Optional
pre will be rendered before link text, for example: <svg slot="pre">...</svg>
anchor <a> element
post will be rendered after link text, for example: <svg slot="post">...</svg>

Modal

Container component which provides styles for modal and slotted content. Modal visibility must be controlled by the client.


Example usage

<zoo-modal>
    <span slot="header">Your basket contains licensed items</span>
    <div>
        <zoo-feedback>This is an info message. Only one coupon can be accepted with each order.</zoo-feedback>
        <br>
        <zoo-checkbox highlighted="true">
            <label for="chkbx" slot="label">I understand and confirm that ALL of the above statements are true</label>
            <input id="chkbx" slot="checkbox" type="checkbox"/>
        </zoo-checkbox>
        <br>
        <zoo-button style="margin: 0 auto" type="hollow">
            <span>Add to cart</span>
        </zoo-button>
    </div>
</zoo-modal>

CSS Variables

Name Description
--primary-mid close icon color

Functions

Name Description Example
openModal function to show the modal. document.querySelector('#zoo-modal').openModal();
closeModal function to hide the modal. document.querySelector('#zoo-modal').closeModal();

Slots

Name Description Optional
arbitrary content
header arbitrary content

Dependencies

Navigation

Container component which provides styles for slotted content.


Example usage

<zoo-navigation>
    <a href="https://github.com/zooplus/zoo-web-components">Github</a>
    <a href="https://www.npmjs.com/package/@zooplus/zoo-web-components">NPM</a>
</zoo-navigation>

The above will render to:

Github NPM

Attributes

Name Description Optional
direction vertical, horizontal

CSS Variables

Name Description
--primary-light right end of background gradient
--primary-mid left end of background gradient

Slots

Name Description Optional
arbitrary content

Paginator

Paginator component.


Example

<zoo-paginator currentpage="1" maxpages="10"></zoo-paginator>

The above will render to:

Attributes

Name Description Optional
currentpage current active page
maxpages number of the last page
prev-page-title title for prev page button for a11y
next-page-title title for next page button for a11y

CSS Variables

Name Description
--primary-ultralight used as background for active page
--primary-mid used as text color for page numbers

Slots

Name Description Optional
pagesizeselector element that should allow used to set page size, it is just presentational slot, it does not handle events

Events

Name Description Event Content
pageChange output event whenever page is changed {detail: { pageNumber: $pageNumber }}

Dependencies

Quantity Control

Input component which provides styles for slotted <input type="number"/>


Webkit based browsers (Chrome/Safari) do not support hiding native number scroll on input type="number", when supplying such input for this component remember to add:

input::-webkit-outer-spin-button, zoo-quantity-control input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Example usage

<zoo-quantity-control>
    <button type="button" slot="decrease" title="decrease">
        <svg height="18" width="18"><line y1="9" x1="0" x2="18" y2="9"></line></svg>
    </button>
    <label for="number-input" slot="label">Label</label>
    <input id="number-input" slot="input" readonly placeholder="0" type="number" step="50"/>
    <button type="button" slot="increase" title="increase">
        <svg height="18" width="18">
            <line y1="0" x1="9" x2="9" y2="18"></line>
            <line y1="9" x1="0" x2="18" y2="9"></line>
        </svg>
    </button>
</zoo-quantity-control>

The above will render to:

Note: id and for attributes on native elements are optional when you do not care about accessibility.

Attributes

Name Description Optional
invalid flag which indicates whether the input is valid or not
labelposition top, left

invalid attribute should be used as a boolean attribute.

CSS Variables

Name Description
--primary-mid background color of slotted button

Slots

Name Description Optional
input <input id="number-input" slot="input" readonly placeholder="0" type="number" step="50"/>
label <label for="input-id" slot="label">An example input</label>
info accepts any element, foe example span
error accepts any element that shows when invalid attribute is present
increase accepts any element that should act as a button for increase
decrease accepts any element that should act as a button for decrease

Dependencies

Radio

Radio component which provides styles for <input type="radio"/> and associated <label></label>


Example usage

<zoo-radio>
    <span slot="label">Radio group</span>

    <label for="contactChoice1">Email</label>
    <input type="radio" id="contactChoice1" name="contact" value="email">
    <label for="contactChoice2">Phone</label>
    <input type="radio" id="contactChoice2" name="contact" value="phone">
    <label for="contactChoice3">Mail</label>
    <input type="radio" id="contactChoice3" name="contact" value="mail">

    <span slot="info">Additional information</span>
</zoo-radio>

The above will render to:

Radio group Additional information

Note: id and for attributes on native elements are optional when you do not care about accessibility, selecting an option by clicking on a label will not be possible without these attributes.

Attributes

Name Description Optional
invalid flag which indicates whether the input is valid or not
labelposition top, left

invalid attribute should be used as a boolean attribute.

CSS Variables

Name Description
--primary-mid color of radio input
--warning-mid color of radio input when invalid attribute is present

Slots

Name Description Optional
arbitrary amount of input type="radio" and labels for them
label name of the slot for label
info accepts any element, foe example span
error accepts any element element that shows when invalid attribute is present

Dependencies

Searchable Select

Select component which provides styles for slotted <select>...</select>


Example usage

<zoo-searchable-select>
    <span slot="legend">Searchable select legend</span>

    <label slot="selectlabel" for="searchable-select">Searchable select</label>
    <select id="searchable-select" slot="select">
        <option value="" selected="" disabled="">Please choose an option</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="smallPet">Small Pet</option>
        <option value="aquatic">Aquatic</option>
    </select>

    <label for="inserted-input" slot="inputlabel">Searchable input</label>
    <input id="inserted-input" slot="input" type="text" placeholder="Select options"/>
</zoo-searchable-select>

The above will render to:

Searchable select legend

Note: id and for attributes on native elements are optional when you do not care about accessibility.
inputlabel and selectlabel slots are optional as well, since they are used only by screen readers.

Attributes

Name Description Optional
invalid flag which indicates whether the input is valid or not
loading flag which indicates whether to show loader inside slotted select element
labelposition top, left

invalid and loading attributes should be used as a boolean attribute.

Slots

Name Description Optional
legend name of the slot for legend
select <select slot="select">...</select>
input <input slot="input" type="text" placeholder="Select multiple options"/>
info accepts any element, foe example span
error accepts any element element that shows when invalid attribute is present
link accepts a
inputlabel name of the slot for select label
selectlabel name of the slot for input label

Dependencies

Select

Select component which provides styles for slotted <select>...</select>


Example usage

<zoo-select>
    <label for="zoo-select" slot="label">Label</label>
    <select id="zoo-select" slot="select">
        <option value="value1">Dog</option>
        <option value="value2">Cat</option>
        <option value="value3">Small Pet</option>
        <option value="value4">Aquatic</option>
    </select>
    <a slot="link" href="https://zooplus.github.io/zoo-web-components/" target="about:blank">Forgotten your password?</a>
</zoo-select>

The above will render to:

Forgotten your password?

Note: id and for attributes on native elements are optional when you do not care about accessibility.

Attributes

Name Description Default Optional
labelposition top, left top
invalid flag which indicates whether the input is valid or not null
loading flag which indicates whether to show loader null

invalid and loading attributes should be used as a boolean attribute.

CSS Variables

Name Description
--primary-light refer to zoo-link
--primary-mid refer to zoo-link
--primary-dark refer to zoo-link
--warning-mid color of error message

Slots

Name Description Optional
select <select id="zoo-select" slot="select">...</select>
label <label for="zoo-select">Label</label>
input <slot name="input"></slot> can be used for composition of select and input
info accepts any element, foe example span
error accepts any element element that shows when invalid attribute is present
link accepts a

Dependencies

Spinner

Spinner svg.


Spinner has position: absolute, you have to place it inside an element with position: relative.

Example usage

<div style="position: relative; height: 100px; width: auto">
    <zoo-spinner></zoo-spinner>
</div>

Rendered

CSS Variables

Name Description
--primary-mid color of spinner

Tag

Tag component.


Example usage

<zoo-tag type="info" style="--color: red">
    <span slot="content">Default info Default infoDefault infoDefault infoDefault infoDefault infoDefault</span>
</zoo-tag>

Rendered

Default info Default infoDefault infoDefault infoDefault infoDefault infoDefault

Attributes

Name Description Optional
type info, cloud

CSS Variables

Name Description
--color color of border and text of tag when type="info"

Slots

Name Description Optional
pre will be rendered before tag text, for example: <svg slot="pre">...</svg>
content content of the tag
post will be rendered after tag text, for example: <svg slot="post">...</svg>

Toast

Container component which has fly-in/out animations. It can be controlled via exported functions.


Example usage

<zoo-toast>
    <span slot="content">This is an info message.</span>
</zoo-toast>

Attributes

Name Description Default Optional
type info, error, success info
timeout how long the toast should be visible for (in seconds) 3

CSS Variables

Name Description
--info-ultralight background color of toast when type="info"
--info-mid icon color of toast when type="info"
--warning-ultralight background color of toast when type="error"
--warning-mid icon color of toast when type="error"
--primary-ultralight background color of toast when type="success"
--primary-mid icon color of toast when type="success"

Functions

Name Description Example
show function to show the toast. document.querySelector('#zoo-toast').show();
hide function to hide the toast. document.querySelector('#zoo-toast').hide();

Slots

Name Description Optional
content arbitrary content

Toggle Switch

Input component which provides styles for slotted <input type="checkbox"/>


Example usage

<zoo-toggle-switch>
    <input id="input-toggle" slot="input" type="checkbox"/>
    <label for="input-toggle" slot="label">Toggle switch</label>
</zoo-toggle-switch>

The above will render to:

Note: id and for attributes on native elements are optional when you do not care about accessibility.

Attributes

Name Description Optional
labelposition top, left

CSS Variables

Name Description
--primary-mid color of clickable toggle

Slots

Name Description Optional
input <input id="input-id" slot="input" type="checkbox"/>
label <label for="input-id" slot="label">An example input</label>
info accepts any element, foe example span
error accepts any element element that shows when invalid attribute is present

Dependencies

Tooltip

Tooltip component.


Example usage

<zoo-button>
    <button type="button">
        Button
        <zoo-tooltip position="bottom">Tooltip text</zoo-tooltip>
    </button>
</zoo-button>

The above will render to:

Attributes

Name Description Default Optional
position top, right, bottom, left top

Slots

Name Description Optional
arbitrary content

Theming

The following CSS Custom Properties should be provided and can be overriden by the user. You can provide them in your global css file.

CSS variables

:root {    
    --primary-ultralight: #EBF4E5;
    --primary-light: #66B100;
    --primary-mid: #3C9700;
    --primary-dark: #286400;

    --secondary-ultralight: #FFF0E7;
    --secondary-light: #FF8800;
    --secondary-mid: #FF6200;
    --secondary-dark: #CC4E00;

    --info-ultralight: #ECF5FA;
    --info-mid: #459FD0;

    --warning-ultralight: #FDE8E9;
    --warning-mid: #ED1C24;
    --warning-dark: #BD161C;
}

Validation

For validation you can use arbitrary tool. If you already use a framework you can use, for example, angular forms since the basic elements like <input/>, <select>...</select> are already exposed.

However, the preffered way would be to use HTML5 form validation, good articles are:

  1. https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation
  2. https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation

As a quick example you can refer to the following snippet:

<form novalidate>
    <zoo-input>
        <label for="input-validation" slot="label">Input type text</label>
        <input id="input-validation" slot="input" type="text" placeholder="input" required pattern="[A-Za-z ]+"/>
        <span slot="error">This input field should contain only letters and it is required!</span>
    </zoo-input>
    <zoo-button>
        <button type="submit">Submit</button>
    </zoo-button>
</form>

novalidate attribute is defined to prevent browser from showing native error bubbles, since we already have a way of providing error messages.

And the respective JavaScript handler:

document.querySelector('form').addEventListener('submit', async e => {
    e.preventDefault();
    const valid = e.target.checkValidity();
    const backendURL = '...';
    // your handling logic
    if (valid) {
        await fetch(backendURL);
    } else {
        // nothing, zoo-web-components library should show all errors provided via `slot='error'` on each element.
    }
});

The above JS is already loaded into this page, the rendered HTML for you to try it is here:

This input field should contain only letters and it is required!