WIP

The document be work in progress...

Grids system

The simple grids system can help you to create a layout quickly for form. There has 10 column and each column's width is one-tenth of their parent node, you can use them as your needs.

* Note: Cannot support nested layout.

  <div class="form-row form-row-example">
    <div class="form-col-1">form-col-1</div>
    <div class="form-col-1">form-col-1</div>
    <div class="form-col-1">form-col-1</div>
    <div class="form-col-1">form-col-1</div>
    <div class="form-col-1">form-col-1</div>
    <div class="form-col-1">form-col-1</div>
    <div class="form-col-1">form-col-1</div>
    <div class="form-col-1">form-col-1</div>
    <div class="form-col-1">form-col-1</div>
    <div class="form-col-1">form-col-1</div>
  </div>
  <div class="form-row form-row-example">
    <div class="form-col-2">form-col-2</div>
    <div class="form-col-8">form-col-8</div>
  </div>
  <div class="form-row form-row-example">
    <div class="form-col-4">form-col-4</div>
    <div class="form-col-6">form-col-6</div>
  </div>
      

Input

This UI component will create exquisite styles for the following types of input by default: tel, url, text, date, week color, email, month, search, number, password, datetime-local. And they also has specific styles for some status such as focus, disabled and readonly.

  <div class="form-row">
    <div class="form-col-2">
      <label class="form-label" for="telphone">Telephone:</label>
    </div>
    <div class="form-col-3">
      <input type="tel" id="telphone" value="18686868686">
    </div>
    <div class="form-col-2">
      <label class="form-label" for="website">Website:</label>
    </div>
    <div class="form-col-3">
      <input type="url" id="website" value="http://www.google.com.hk/">
    </div>
  </div>
  <div class="form-row">
    <div class="form-col-2">
      <label class="form-label" for="text">Text:</label>
    </div>
    <div class="form-col-3">
      <input type="text" id="text" value="ui-vue-form">
    </div>
    <div class="form-col-2">
      <label class="form-label" for="search">Search:</label>
    </div>
    <div class="form-col-3">
      <input type="search" id="search" value="vue.js UI Component">
    </div>
  </div>
  <div class="form-row">
    <div class="form-col-2">
      <label class="form-label" for="date">Date:</label>
    </div>
    <div class="form-col-3">
      <input type="date" id="date" value="2016-03-18">
    </div>
    <div class="form-col-2">
      <label class="form-label" for="month">Month:</label>
    </div>
    <div class="form-col-3">
      <input type="month" id="month" value="2016-03">
    </div>
  </div>
  <div class="form-row">
    <div class="form-col-2">
      <label class="form-label" for="week">Week:</label>
    </div>
    <div class="form-col-3">
      <input type="week" id="week" value="2016-W11">
    </div>
    <div class="form-col-2">
      <label class="form-label" for="datetime-local">Datetime-local:</label>
    </div>
    <div class="form-col-3">
      <input type="datetime-local" id="datetime-local" value="2016-03-18T00:00">
    </div>
  </div>
  <div class="form-row">
    <div class="form-col-2">
      <label class="form-label" for="number">Number:</label>
    </div>
    <div class="form-col-3">
      <input type="number" id="number" value="999">
    </div>
    <div class="form-col-2">
      <label class="form-label" for="password">Password:</label>
    </div>
    <div class="form-col-3">
      <input type="password" id="password" value="nopassword">
    </div>
  </div>
  <div class="form-row">
    <div class="form-col-2">
      <label class="form-label" for="email">Email:</label>
    </div>
    <div class="form-col-3">
      <input type="email" id="email" value="scdzwyxst@gmail.com">
    </div>
    <div class="form-col-2">
      <label class="form-label" for="color">Color:</label>
    </div>
    <div class="form-col-3">
      <input type="color" id="color" value="#4fc08d">
    </div>
  </div>
  <div class="form-row">
    <div class="form-col-2">
      <label class="form-label" for="disabled">Disabled:</label>
    </div>
    <div class="form-col-3">
      <input type="text" id="disabled" disabled="disabled" value="Cannot use">
    </div>
    <div class="form-col-2">
      <label class="form-label" for="readonly">Readonly:</label>
    </div>
    <div class="form-col-3">
      <input type="text" id="readonly" readonly="readonly" value="Some text">
    </div>
  </div>
      

Select

The most default styles of select like as input above, and the difference is select support multiple attribute.

  <div class="form-row">
    <div class="form-col-4">
      <label for="constellation" class="form-label">Constellation:</label>
    </div>
    <div class="form-col-6">
      <select id="constellation">
        <option value="Libra">Libra</option>
        <option value="Leo" selected="selected">Leo</option>
        <option value="Aries">Aries</option>
      </select>
    </div>
  </div>
  <div class="form-row">
    <div class="form-col-4">
      <label for="interests" class="form-label">Interests:</label>
    </div>
    <div class="form-col-6">
      <select id="interests" multiple>
        <option value="football">football</option>
        <option value="pingpong ball">pingpong ball</option>
        <option value="running">running</option>
      </select>
    </div>
  </div>
      

Radio

  <div class="form-row">
    <div class="form-col-2">
      <label for="gender" class="form-label">Gender:</label>
    </div>
    <div class="form-col-3">
      <label class="radio">
        <input type="radio" name="gender" id="gender">
        <span class="radio-circle"></span>
        man
      </label>
      <label class="radio">
        <input type="radio" name="gender">
        <span class="radio-circle"></span>
        woman
      </label>
    </div>
    <div class="form-col-2">
      <label for="work" class="form-label">Disabled:</label>
    </div>
    <div class="form-col-3">
      <label class="radio">
        <input type="radio" name="work" id="not-work" disabled="disabled">
        <span class="radio-circle"></span>
        Not work
      </label>
      <label class="radio">
        <input type="radio" name="work">
        <span class="radio-circle"></span>
        Work
      </label>
    </div>
  </div>