BulmaRazor

表单元素(Form)

通过Field、Control等组件布局表单

Bulma 支持如下 HTML内建表单元素: <form> <button> <input> <textarea> and <label>.

支持一下 CSS 类:

Label
Input
Textarea
Select
Checkbox
Radio
Button
Help

为了保持设计均匀平衡，Bulma 提供了一个非常有用的Control容器，您可以在其中包装表单控件。
当在表单中组合多个控件时，请使用Field类作为容器，以保持间距一致。

完整表单示例

视图
代码

<form>
    <Field>
        <Label>Name</Label>
        <Control>
            <Input placeholder="Text input" TValue="string" />
        </Control>
    </Field>
    <Field>
        <Label>Username</Label>
        <Control HasIconsLeft HasIconsRight>
            <Input Color="Color.Success" TValue="string" placeholder="Text input" value="bulmarazor" />
            <Icon IsLeft IsSmall IconClass="fa fa-user"></Icon>
            <Icon IsRight IsSmall IconClass="fa fa-check"></Icon>
        </Control>
        <Help Color="Color.Success">This username is available</Help>
    </Field>
    <Field>
        <Label>Email</Label>
        <Control HasIconsLeft HasIconsRight>
            <Input Color="Color.Danger" type="email" TValue="string" placeholder="Email input" value="hello" />
            <Icon IsLeft IsSmall IconClass="fa fa-envelope"></Icon>
            <Icon IsRight IsSmall IconClass="fa fa-exclamation-triangle"></Icon>
        </Control>
        <Help Color="Color.Danger">This email is invalid</Help>
    </Field>
    <Field>
        <Label>Subject</Label>
        <Control>
            <Select Value="1">
                <Option  Value="1">Select dropdown</Option>
                <Option  Value="2">With options</Option>
            </Select>
        </Control>
    </Field>
    <Field>
        <Label>Message</Label>
        <Control>
            <Textarea placeholder="Textarea"></Textarea>
        </Control>
    </Field>
    <Field>
        <Label></Label>
        <Control>
            <CheckBox TValue="string"> I agree to the <a href="#">terms and conditions</a></CheckBox>
        </Control>
    </Field>
    <Field>
        <Control>
            <Radios TValue="int">
                <Radio Name="aa" Value="1" TValue="int">Yes</Radio>
                <Radio Name="aa" Value="0" TValue="int">No</Radio>
            </Radios>
        </Control>
    </Field>
    <Field IsGrouped>
        <Control>
            <Button Color="Color.Link">Submit</Button>
        </Control>
        <Control>
            <Button Color="Color.Link" IsLight>Cancel</Button>
        </Control>
    </Field>
</form>

为了使用Bulma获得最佳效果，建议尽可能多地使用Control组件

表单域(Form Field)

Field 容器是一个简单的容器:

文本标签 Label
表单控件 Control
可选文本 Help

视图
代码

Label

This is a help text

<Field>
    <Label>Label</Label>
    <Control>
        <Input placeholder="Text input" TValue="string" />
    </Control>
    <Help>This is a help text</Help>
</Field>

此容器允许表单字段有一致地间隔。

视图
代码

Name

<Field>
    <Label>Name</Label>
    <Control>
        <Input placeholder="e.g Alex Smith" TValue="string" />
    </Control>
</Field>
<Field>
    <Label>Email</Label>
    <Control>
        <Input Color="Color.Danger" type="email" TValue="string" placeholder="e.g. alexsmith@gmail.com" />
    </Control>
</Field>

表单控件(Form control)

Bulma Control 是一种通用的 块(block) 容器，用于增强表单功能. 因为它与控件元素具有相同的高度，所以它只能包含以下元素：:

Input
Select
Button
Icon

该容器具有以下功能:

保持间距一致
将表单控件组合到一个组中
将表单控件合并到列表中
将图标追加和添加到表单控件

视图
代码

<Control>
    <Input placeholder="Text input" TValue="string" />
</Control>

视图
代码

<Control>
   <Select TValue="string">
       <Option TValue="string">Select dropdown</Option>
       <Option TValue="string">With options</Option>
   </Select>
</Control>

视图
代码

<Control>
   <Button Color="Color.Primary">Submit</Button>
</Control>

使用图标(With icons)

您可以在控件上附加如下2个修饰符之一:

HasIconsLeft
和/或 HasIconsRight

您还需要在图标上添加修饰符:

如果使用 HasIconsLeft Icon需要添加IsLeft
如果使用has-icons-right Icon需要添加IsRight

图标容器的大小将由 Input 容器定义。

视图
代码

<Field>
   <Control HasIconsLeft HasIconsRight>
      <Input type="email" TValue="string" placeholder="Email" />
      <Icon IsLeft IsSmall IconClass="fa fa-envelope"></Icon>
      <Icon IsRight IsSmall IconClass="fa fa-check"></Icon>
   </Control>
</Field>
<Field>
   <Control HasIconsLeft>
      <Input type="password" TValue="string" placeholder="Password" />
      <Icon IsLeft IsSmall IconClass="fa fa-lock"></Icon>
   </Control>
</Field>
<Field>
   <Control>
      <Button Color="Color.Success">Login</Button>
   </Control>
</Field>

您也可以在下拉框中添加图标。

视图
代码

<Field>
   <Control HasIconsLeft>
      <Select TValue="string">
         <Option TValue="string">Country</Option>
         <Option TValue="string">Select dropdown</Option>
         <Option TValue="string">With options</Option>
      </Select>
      <Icon IsLeft IsSmall IconClass="fa fa-globe"></Icon>
   </Control>
</Field>

如果控件中包含图标，Bulma 将会确保图标保持居中，不用担心 input 或图标的大小。

视图
代码

Small input

<Field>
   <Label IsSmall>Small input</Label>
   <Control HasIconsLeft HasIconsRight>
       <Input type="email" IsSmall TValue="string" placeholder="Small" />
      <Icon IsLeft IsSmall IconClass="fa fa-envelope"></Icon>
      <Icon IsRight IsSmall IconClass="fa fa-check"></Icon>
   </Control>
</Field>

视图
代码

Normal input

<Field>
   <Label>Normal input</Label>
   <Control HasIconsLeft HasIconsRight>
       <Input type="email" TValue="string" placeholder="Small Icon" />
      <Icon IsLeft IsSmall IconClass="fa fa-envelope"></Icon>
      <Icon IsRight IsSmall IconClass="fa fa-check"></Icon>
   </Control>
</Field>
<Field>
   <Control HasIconsLeft HasIconsRight>
       <Input type="email" IsLarge TValue="string" placeholder="Small Icon" />
      <Icon IsLeft IsSmall IconClass="fa fa-envelope fa-xs"></Icon>
      <Icon IsRight IsSmall IconClass="fa fa-check fa-xs"></Icon>
   </Control>
</Field>

表单插件(Form addons)

如果您要同时使用附件控件,请在 Field 容器上添加 HasAddons 修饰符:

视图
代码

<Field HasAddons>
   <Control>
       <Input TValue="string" placeholder="Find a repository" />
   </Control>
   <Control>
      <Button Color="Color.Info">Search</Button>
   </Control>
</Field>

您只能在 inputs, buttons, and dropdowns 中使用追加

追加一个静态按钮将会很有用。

视图
代码

<Field HasAddons>
   <Control>
       <Input TValue="string" placeholder="Your email" />
   </Control>
   <Control>
      <Button IsStatic>@@gmail.com</Button>
   </Control>
</Field>

使用 IsExpanded 修饰符填充剩余的空间 (本例中, 是 input 元素):

视图
代码

<Field HasAddons>
   <Control>
      <span class="select">
         <select>
            <option>$</option>
            <option>£</option>
            <option>€</option>
         </select>
      </span>
   </Control>
   <Control>
      <Input placeholder="Amount of money" TValue="string" />
   </Control>
   <Control>
      <Button>Transfer</Button>
   </Control>
</Field>
<Field HasAddons>
   <Control>
      <span class="select">
         <select>
            <option>$</option>
            <option>£</option>
            <option>€</option>
         </select>
      </span>
   </Control>
   <Control IsExpanded>
      <Input placeholder="Amount of money" TValue="string" />
   </Control>
   <Control>
      <Button>Transfer</Button>
   </Control>
</Field>

水平表单(Horizontal form)

如果你想要一个水平的的表单控件，请在 field 容器上添加 is-horizontal 修饰符:

FieldLabel for the side label
FieldBody for the input/select/textarea container

您可以在子元素上使用 IsGrouped 和 HasAddons

视图
代码

From

Do not enter the first zero

Question

<Field IsHorizontal>
   <FieldLabel class="is-normal">
      <Label>From</Label>
   </FieldLabel>
   <FieldBody>
      <Field>
         <Control IsExpanded HasIconsLeft>
            <Input placeholder="Name" TValue="string" />
            <Icon IconClass="fa fa-user" IsSmall IsLeft></Icon>
         </Control>
      </Field>
      <Field>
         <Control IsExpanded HasIconsLeft HasIconsRight>
            <Input type="email" placeholder="Email" value="alex@smith.com" TValue="string" />
            <Icon IsLeft IsSmall IconClass="fa fa-envelope"></Icon>
            <Icon IsRight IsSmall IconClass="fa fa-check"></Icon>
         </Control>
      </Field>
   </FieldBody>
</Field>
<Field IsHorizontal>
   <FieldLabel>
      <Label></Label>
   </FieldLabel>
   <FieldBody>
      <Field IsExpanded>
         <Field HasAddons>
            <Control>
               <Button IsStatic>+44</Button>
            </Control>
            <Control IsExpanded>
               <Input type="tel" placeholder="Your phone number" TValue="string" />
            </Control>
         </Field>
         <Help>Do not enter the first zero</Help>
      </Field>
   </FieldBody>
</Field>
<Field IsHorizontal>
   <FieldLabel>Question</FieldLabel>
   <FieldBody>
      <Field>
         <Control>
            <Textarea placeholder="Explain how we can help you"></Textarea>
         </Control>
      </Field>
   </FieldBody>
</Field>
<Field IsHorizontal>
   <FieldLabel></FieldLabel>
   <FieldBody>
      <Field>
         <Control>
            <Button Color="Color.Primary">Send message</Button>
         </Control>
      </Field>
   </FieldBody>
</Field>

文档