# svelma-pro
添加功能和样式表单元素/输入

# Field

## 添加功能和样式表单元素/输入

Codesandbox
Name
Email

Email is invalid

Username

Username is available

    <script>
      import { Field, Input } from 'svelma-pro'
    </script>

    <Field label="Name">
      <Input value="Rich Harris" />
    </Field>

    <Field label="Email" type="is-danger" message="Email is invalid">
      <Input value="john@" />
    </Field>

    <Field label="Username" type="is-success" message="Username is available">
      <Input value="joey55" />
    </Field>

Addons

Multiple controls in a field get attached. Use `expanded` property on the control to fill up space on the line.
Codesandbox

    <script>
      import { Button, Field, Icon, Input } from 'svelma-pro'
    </script>

    <Field>
      <Input type="search" placeholder="Search" icon="search" />
      <p class="control">
        <Button type="is-primary">Search</Button>
      </p>
    </Field>

    <Field>
      <Input type="search" placeholder="This is expanded" expanded />
      <p class="control">
        <Button type="is-static">@gmail.com</Button>
      </p>
    </Field>

    <hr>

    <Field>
      <div class="control"><Button><Icon icon="bold"></Icon></Button></div>
      <div class="control"><Button><Icon icon="italic"></Icon></Button></div>
      <div class="control"><Button><Icon icon="underline"></Icon></Button></div>
      <div class="control"><Button><Icon icon="align-left"></Icon></Button></div>
      <div class="control"><Button><Icon icon="align-center"></Icon></Button></div>
      <div class="control"><Button><Icon icon="align-right"></Icon></Button></div>
      <Input expanded icon="comment" placeholder="Text here" />
    </Field>

    <Field>
      <div class="control"><Button type="is-primary">Button</Button></div>
      <div class="control"><Button type="is-primary"><Icon icon="search" /></Button></div>
    </Field>

Groups

Use the `grouped` property to group controls together. Use the `expanded` property to make a control take up remaining space.
Codesandbox

    <script>
      import { Button, Field, Input } from 'svelma-pro'
    </script>

    <Field grouped>
      <Input type="search" placeholder="Search" icon="search" />
      <p class="control">
        <Button type="is-primary">Search</Button>
      </p>
    </Field>

    <Field grouped>
      <Input type="search" placeholder="Search" icon="search" expanded />
      <p class="control">
        <Button type="is-primary">Search</Button>
      </p>
    </Field>

Nested Groups

You can nest fields inside fields. You have to use the `expanded` property on the Field to fill up the remaining space.
Codesandbox
Button
Name
Email

    <script>
      import { Button, Field, Input } from 'svelma-pro'
    </script>

    <Field grouped>
      <Field label="Button">
        <Button type="is-primary">Button</Button>
      </Field>

      <Field label="Name" expanded>
        <Input />
      </Field>

      <Field label="Email" expanded>
        <Input />
      </Field>
    </Field>

Responsive Groups

Add `groupMultiline` property to allow controls to fill up multiple lines.
Codesandbox

    <script>
      import { Button, Field, Input } from 'svelma-pro'
    </script>

    <Field grouped groupMultiline>
      <Input />
      {#each Array(30).fill().map((x, i) => i+1) as num}
        <div class="control">
          <Button>{num}</Button>
        </div>
      {/each}
    </Field>

Positions

Use `position` property to align Field horizontally.
Codesandbox

    <script>
      import { Button, Field, Input } from 'svelma-pro'
    </script>

    <Field position="is-centered">
      <Input />
      <div class="control"><Button type="is-primary">Button</Button></div>
    </Field>

    <Field grouped position="is-right">
      <Input />
      <div class="control"><Button type="is-primary">Button</Button></div>
    </Field>

## API

Name | Description | Type | Values | Default
--- | --- | --- | --- | ---
`type` | Type (color) of the field and help message. Also adds a matching icon., optional | String | `is-white`, `is-black`, `is-light`, `is-dark`, `is-primary`, `is-info`, `is-success`, `is-warning`, `is-danger` | —
`label` | Label for input, optional | String | — | —
`labelFor` | Same as native `for` on label, optional | String | — | —
`message` | Message to show beneath input, optional | String | — | —
`grouped` | Direct child components/elements of Field will be grouped horizontally | Boolean | — | `false`
`groupMultiline` | Allow grouped controls to cover multiple lines | Boolean | — | `false`
`position` | Alter the alignment of the field, optional | String | `is-centered`, `is-right` | —
`addons` | Automatically attach child controls together | Boolean | — | `true`