ng-ovh-form-flat

Form Design for v6 manager.

Install

$ yarn add @ovh-ux/ng-ovh-form-flat

Usage

import angular from 'angular';
import ngOvhFormFlat from '@ovh-ux/ng-ovh-form-flat';

angular.module('myModule', [ngOvhFormFlat]);

Example

OVH form flat is a overload template for angular-bootstrap.

OVH form flat can design thoses elements:

• Text input
• Textarea
• Select
• Checkbox
• Radio input
• Switch button

:warning: Note :warning:

• In OVH form flat, labels aren't display until the placeholder is visible.
• div tags are optionals. If you use it, you will have a first structure with a label at top, and input below. If you already have a style which position your label where you want, you can keep it and evade adding div row / col-xx-xx.

Before using specials tags, you have to add a ovh-form-flat class on your form:

<form
    name="myFormName"
    data-ng-submit="..."
    class="form-horizontal ovh-form-flat">
    ...
</form>

Text inputs

To create a text input, you have to frame your input tag with a <div data-flat-input-container>.

<div data-flat-input-container>
    <label
        class="control-label"
        for="myInputId">
        My Input Label Example
    </label>
    <input
        id="myInputId"
        name="myInputName"
        class="form-control"
        placeholder="My Input Label Example">
</div>

Checkboxes

To display a checkbox, wrap your checkbox input with a tag <flat-checkbox>.

<flat-checkbox>
    <input
        type="checkbox"
        name="myInputName"
        id="myInputId"
        data-ng-model="myCheckbox">
</flat-checkbox>

Select

To display a custom select, wrap your select with a tag <flat-select>.

<select
    name="mySelect"
    class="form-control"
    data-flat-select
    data-ng-model="myModel">
    <option value="opt1">Option 1</option>
    <option value="opt2">Option 2</option>
</select>

Radios

To display a radio, wrap your radio input with a tag <flat-radio>.

<flat-radio>
    <input
        type="radio"
        name="myInputName"
        id="myInputId"
        data-ng-model="myCheckbox">
</flat-radio>

If you want, you can wrap your flat-radio in a label tag, like below:

<label>
    <flat-radio>
        <input
            type="radio"
            name="myInputName"
            id="myInputId"
            data-ng-model="myCheckbox">
    </flat-radio>
    My label
</label>

Textarea

To create a textarea, you have to frame your textarea tag with a <div data-flat-input-container>.

<div data-flat-input-container>
    <label
        class="control-label"
        for="myInputId">
        My Input Label Example
    </label>
    <textarea
        id="myInputId"
        name="myInputName"
        class="form-control"
        placeholder="My Input Label Example">
    </textarea>
</div>

Combine input & select (example: email)

To combine an input and a select, you have to frame your input and select tags with a <div data-flat-input-container>.

<div class="col-xs-12 input-select">
    <div data-flat-input-container>
        <label class="control-label">Email</label>
        <div class="input-select-container">
            <div class="input-group col-xs-8">
                <input
                    name="accountName"
                    class="form-control"
                    required
                    placeholder="{{ 'account_name' | translate }}">
                 <span class="input-group-addon">@</span>
            </div>
            <div class="col-xs-4 no-margin">
                <select
                    name="accountDomain"
                    class="form-control"
                    required
                    data-flat-select>
                    <option value="@ovh.fr" selected>ovh.fr</option>
                </select>
            </div>
        </div>
    </div>
</div>

Test

$ yarn test

Contributing

Always feel free to help out! Whether it's filing bugs and feature requests or working on some of the open issues, our contributing guide will help get you started.

License

BSD-3-Clause © OVH SAS