UI Components

Resuable UI components, built with Vue. Each component contains one or more properties, with v-bind support.

Buttons

Buttons are essential part of any mobile/desktop experiences. Create buttons with .v-button class.

<button class="v-button">Default Button</button>
<a class="v-button" role="button">A Tag Button</a>
<button class="v-button v-button--primary">Primary Button</button>
<button class="v-button" disabled>Disabled Button</button>
A Tag Button

Block Button

Block button is applied a display: block style. It will cover 100% of the parent block. Create block buttons by adding a .v-button--block class.

<button class="v-button v-button--block">Block Button</button>

A button is designed for menu icon. You can toggle the status with a click. The menu button has only one property checked.

<vui-menu-button></vui-menu-button>
<vui-menu-button checked></vui-menu-button>

You can explain the menu with an inner text content.

<vui-menu-button>Site Menu</vui-menu-button>

Progress Button

A progress button shows the current progress, it is useful for async form submition. Create them with <vui-progress-button>.

<vui-progress-button progress="60%">
  Text Content
</vui-progress-button>
Text Content Text Content

You can still add modifier classes for progress buttons, e.g. .v-button--white, .v-button--block.

<vui-progress-button class="v-button--primary" progress="60%">
  Text Content
</vui-progress-button>

Avatar

A smart avatar component. When image is not available, it will create a colorful text based avatar.

Circle Avatar

Default avatars are circled, size of 48px.

<vui-avatar alt="name" src="image.png"></vui-avatar>

The color is calculated by the username (aka alt property). If alt is not provided, it will render a pure black avatar.

Squared Avatar

Add a class .v-avatar--squared to make <vui-avatar> a squared avatar. It is not real squared, it has a 2px border radius.

<vui-avatar class="v-avatar--squared"></vui-avatar>

Toggle

A customized toggle checkbox. It will render a standard <input type="checkbox"> which can be used in a form directly, so that you can give it a name property.

<vui-toggle name="wifi"></vui-toggle>
<vui-toggle name="wifi" checked></vui-toggle>

Toggle for iOS

Toggle has a special style for iOS, which looks like the iOS toggle. Wrap the toggle under a .ios class.

<div class="ios">
  <vui-toggle name="wifi"></vui-toggle>
  <vui-toggle name="wifi" checked></vui-toggle>
</div>

Toggle for Android

Toggle has a special style for Android, which looks like the material toggle. Wrap the toggle under a .android class.

<div class="android">
  <vui-toggle name="wifi"></vui-toggle>
  <vui-toggle name="wifi" checked></vui-toggle>
</div>

Range Slider

A customized range input. It will render a standard <input type="range"> which can be used in a form directly, so that you can give it a name property.

Pure Range

A pure range is a <input type="range"> wrapped in a div.

<vui-range-slider name="power"></vui-range-slider>

Range with Labels

Range can contains two labels, one left one right, which can be specified with slot property.

<vui-range-slider name="power">
  <span slot="left">L</span>
  <span slot="right">H</span>
</vui-range-slider>
L H

Range for iOS

Range has a special style for iOS, which looks like the one in iOS.

<div class="ios">
  <vui-range-slider name="power"></vui-range-slider>
</div>

Range for Android

Range has a special style for Android, which looks like the one in Material Design.

<div class="android">
  <vui-range-slider name="power"></vui-range-slider>
</div>

Radio

Radio is designed with native <input type="radio">, applies a .v-radio class to change the default browser style.

<label class="v-radio">
  <input name="vpn" type="radio">
  Turn on VPN
</label>

Radio as Group

Radio is usually used as a group, apply .v-radio on <ul> to create the radio group.

<ul class="v-radio">
  <li>
    <label>
      <input name="vpn" type="radio">
      VPN Japan
    </label>
  </li>
   <li>
    <label>
      <input name="vpn" type="radio">
      VPN Taiwan
    </label>
  </li>
</ul>

Default

iOS class="ios"

Android class="android"

Nav Title

Tabs