Quick start

Diving into a new plugin or library can be difficult. There's a lot of information to consume to decide if you're willing to use, and potentially contribute to, a project.

In this quick start I'll strive to grab your attention as quick (ha!) as possible, so you can proceed doing the awesome stuff you're working on. For that reason, I won't include the installation instructions, use the default bootstrap framework and quit being so wordy.

Ready? Let's go.

Components

Let's start by creating some simple components.

Entity-form

Generate an entire form with validation:

<entity-form entity.bind="user" behavior="horizontal" valid.delegate="register()">
</entity-form>

Note: (requires an entity from aurelia-orm, and form validation)

Button

So ehm, code:

<form-button label="horizontal" click.delegate="foo()"></form-button>

Other button, color, stuff, options:

<form-button label="horizontal" options="danger,xs,block" click.delegate="foo()"></form-button>

Ooooh, aaaah.. Moving on.

Input

Text, password, email, whatever:

<form-input type="password"></form-input>

Some more.. stuff:

<form-input options="lg" disabled.bind="noTouchy" value.bind="lies"></form-input>

Help

Info help thingy:

<form-help message="I'll never leave you"></form-help>

Label

I don't like putting labels on people.

<form-label label="Hello world"></form-label>

Because flexible:

<form-label label="Hello">
  <strong slot="after">World</strong>
</form-label>

Form-group

Made for the lazy (and sane). Combines all the things when provided (label, element, error, help):

<form-group label="Username" value.bind="user.username"></form-group>

More attributes, slots, and stuff:

<form-group element="checkbox" value.bind="rememberMe" behavior="horizontal">
  <form-label label="Hello" slot="label">
    <strong slot="after">World</strong>
  </form-label>
</form-group>

Conclusion

Aurelia-form is awesome. The flexibility offered goes way beyond this quick start. That's why it's a quick start...

Pick another chapter and continue reading about specific features aurelia-form offers.

results matching ""

    No results matching ""