Form Group

表单组是一种使得标签和表单快速配对的组件, 并且提供文本、表单有效,表单无效,表单警告等来反映对应的表单控件的状态,还能控制对应表单颜色来反应其状态

<template>
  <nly-row>
    <nly-col>
      <nly-form-group
        id="fieldset-1"
        description="请输入姓名"
        label="姓名"
        label-for="input-1"
        :invalid-feedback="invalidFeedback"
        :valid-feedback="validFeedback"
        :warning-feedback="warningFeedback"
        :valid="state"
      >
        <nly-form-input
          id="input-1"
          v-model="name"
          :valid="state"
          trim
        ></nly-form-input>
      </nly-form-group>
    </nly-col>
  </nly-row>
</template>

<script>
  export default {
    computed: {
      state() {
        return this.name.length >= 8
          ? 'valid'
          : this.name.length < 4
          ? 'invalid'
          : 'warning'
      },
      invalidFeedback() {
        if (this.name.length > 4) {
          return ''
        } else if (this.name.length > 0) {
          return '请输入至少4个字符串'
        } else {
          return '内容不能为空'
        }
      },
      validFeedback() {
        return this.state === 'valid' ? 'ok,完美' : ''
      },
      warningFeedback() {
        return this.state === 'warning' ? '还是差一点点' : ''
      },
    },
    data() {
      return {
        name: '',
      }
    },
  }
</script>

<!-- form-group.name -->
<!-- nly-form-group.vue -->

标签

可以使用 prop label 或者使用 label 插槽来设置 label 元素, 同时可以设置 label-sr-only 来隐藏 label 元素,设置 label-sr-only 之后,仍旧可以在屏幕阅读器上显示该 label 元素。

label-class 可以用来设置 label 元素 的自定义 css 类

注意

  • 在设置 label-sr-only 之后,如果是水平模式,会在 label 元素上套一层 div 元素,此时关于一切 cols 的 prop 都会作用于这个 div 元素上, 而其他作用于 label 元素的 prop 会失效。如果不是水平模式,作用于 label 元素的 prop 会失效。 关于水平模式
<div>
  <nly-form-group
    id="fieldset-1"
    description="请输入姓名"
    label="姓名"
    label-for="input-1"
    label-sr-only
  >
    <nly-form-input id="input-1"></nly-form-input>
  </nly-form-group>

  <nly-form-group id="fieldset-2" description="请输入姓名" label-for="input-1">
    <nly-form-input id="input-2"></nly-form-input>
  </nly-form-group>

  <nly-form-group id="fieldset-3" description="请输入姓名" label-for="input-1">
    <nly-form-input id="input-3"></nly-form-input>
    <template slot="label">
      <label> 姓名</label>
    </template>
  </nly-form-group>
</div>

<!-- label.name -->
<!-- nly-form-group.vue -->

水平模式

在默认情况下,标签在表单控件上面,您可以通过设置一系列 cols 相关的 prop 来使得标签和表单控件呈水平布局模式

可以设置 label-cols-* 或者设置 label-cols 来设置 标签元素所占用的距离,表单控件将会自动沾满剩下的宽度。 也可以设置 label-cols-*true 来占据一半的宽度, 或者 为 auto 来占据自适应宽度

可以设置 label-cols-offset-* 来设置标签偏移

可以设置 label-cols-order-* 来设置标签顺序(多个标签的时候,慎用,这时候需要使用 插槽,且插槽需要设置 cols 一类的 css)

prop 描述
label-cols-xs 在 XS 及以上断点的宽度,可选 1,2,3,4,5,6,7,8,9,10,11,12, true, false, auto
label-cols-sm 在 SM 及以上断点的宽度,可选 1,2,3,4,5,6,7,8,9,10,11,12, true, false, auto
label-cols-md 在 MD 及以上断点的宽度,可选 1,2,3,4,5,6,7,8,9,10,11,12, true, false, auto
label-cols-lg 在 LG 及以上断点的宽度,可选 1,2,3,4,5,6,7,8,9,10,11,12, true, false, auto
label-cols-xl 在 XL 及以上断点的宽度,可选 1,2,3,4,5,6,7,8,9,10,11,12, true, false, auto
label-cols-offset-xs 在 XS 及以上断点的偏移量,可选 0,1,2,3,4,5,6,7,8,9,10,11
label-cols-offset-sm 在 SM 及以上断点的偏移量,可选 0,1,2,3,4,5,6,7,8,9,10,11
label-cols-offset-md 在 MD 及以上断点的偏移量,可选 0,1,2,3,4,5,6,7,8,9,10,11
label-cols-offset-lg 在 LG 及以上断点的偏移量,可选 0,1,2,3,4,5,6,7,8,9,10,11
label-cols-offset-xl 在 XL 及以上断点的偏移量,可选 0,1,2,3,4,5,6,7,8,9,10,11
label-cols-order-xs 在 XS 及以上断点的偏移量,可选 0,1,2,3,4,5,6,7,8,9,10,11
label-cols-order-sm 在 SM 及以上断点的偏移量,可选 0,1,2,3,4,5,6,7,8,9,10,11
label-cols-order-md 在 MD 及以上断点的偏移量,可选 0,1,2,3,4,5,6,7,8,9,10,11
label-cols-order-lg 在 LG 及以上断点的偏移量,可选 0,1,2,3,4,5,6,7,8,9,10,11
label-cols-order-xl 在 XL 及以上断点的偏移量,可选 0,1,2,3,4,5,6,7,8,9,10,11
<div>
  <nly-form-group
    label-cols-xs="12"
    label-cols-sm="6"
    label-cols-md="4"
    label-cols-lg="3"
    label-cols-xl="2"
    label-for="wwww"
    label="cols"
  >
    <nly-form-input id="www" />
  </nly-form-group>

  <nly-form-group label-cols-xs="auto" label-for="wwww" label="cols-auto">
    <nly-form-input id="www" />
  </nly-form-group>

  <nly-form-group :label-cols-xs="true" label-for="wwww" label="cols-true">
    <nly-form-input id="www" />
  </nly-form-group>
</div>

<!-- cols.name -->
<!-- nly-form-group.vue -->

标签大小

label-size 可以用来控制 label 大小, 可选 sm, lg

<div>
  <nly-form-group
    label-cols-xs="4"
    label-cols-lg="2"
    label-size="sm"
    label="Small"
    label-for="input-sm"
  >
    <nly-form-input id="input-sm" size="sm"></nly-form-input>
  </nly-form-group>

  <nly-form-group
    label-cols-xs="4"
    label-cols-lg="2"
    label="Default"
    label-for="input-default"
  >
    <nly-form-input id="input-default"></nly-form-input>
  </nly-form-group>

  <nly-form-group
    label-cols-xs="4"
    label-cols-lg="2"
    label-size="lg"
    label="Large"
    label-for="input-lg"
  >
    <nly-form-input id="input-lg" size="lg"></nly-form-input>
  </nly-form-group>
</div>

<!-- label-size.name -->
<!-- nly-form-group.vue -->

标签对齐

设置 label-align-* 来控制标签位置, 可选 left, center, right

使用 label-sr-only 会使得 label-align-* 失效

prop 描述
label-align-xs 在 XS 及以上断点 label 位置
label-align-sm 在 SM 及以上断点 label 位置
label-align-md 在 MD 及以上断点 label 位置
label-align-lg 在 LG 及以上断点 label 位置
label-align-xl 在 XL 及以上断点 label 位置
<nly-form-group
  label-align-xs="right"
  label-align-sm="center"
  label-align-md="right"
  label-align-lg="center"
  label-align-xl="left"
  label-cols-xs="3"
  label-for="wwww"
  label="label-align"
>
  <nly-form-input xs="3" id="www" />
</nly-form-group>

<!-- label-align.name -->
<!-- nly-form-group.vue -->

嵌套表单组

nly-form-group 可以随意嵌套

<div>
  <nly-card bg-variant="light">
    <nly-card-body>
      <nly-form-group
        label-cols-lg="3"
        label="Shipping Address"
        label-size="lg"
        label-class="font-weight-bold pt-0"
        class="mb-0"
      >
        <nly-form-group
          label-cols-sm="3"
          label="Street:"
          label-align-sm="right"
          label-for="nested-street"
        >
          <nly-form-input id="nested-street"></nly-form-input>
        </nly-form-group>

        <nly-form-group
          label-cols-sm="3"
          label="City:"
          label-align-sm="right"
          label-for="nested-city"
        >
          <nly-form-input id="nested-city"></nly-form-input>
        </nly-form-group>

        <nly-form-group
          label-cols-sm="3"
          label="State:"
          label-align-sm="right"
          label-for="nested-state"
        >
          <nly-form-input id="nested-state"></nly-form-input>
        </nly-form-group>

        <nly-form-group
          label-cols-sm="3"
          label="Country:"
          label-align-sm="right"
          label-for="nested-country"
        >
          <nly-form-input id="nested-country"></nly-form-input>
        </nly-form-group>
      </nly-form-group>
    </nly-card-body>
  </nly-card>
</div>

<!-- nly-form-group-nested.vue -->

feedback

feedback 对应三种类型 invalid-feedback, valid-feedback, warning-feedback。在 prop validinvalid, valid, warning 下触发显示。 prop validnovalid的时候不会显示。

组件参数

<nly-form-group>

props 参数

props (Click to sort Ascending)类型默认值描述
valid
String表单验证提示状态,可选valid, invalid, warning, loading, novalid
id
Stringnull设置id
label-cols-xs
String or Number or Booleanfalse在XS及以上断点的宽度,可选1,2,3,4,5,6,7,8,9,10,11,12, true, false, auto
label-cols-sm
String or Number or Booleanfalse在SM及以上断点的宽度,可选1,2,3,4,5,6,7,8,9,10,11,12, true, false, auto
label-cols-md
String or Number or Booleanfalse在MD及以上断点的宽度,可选1,2,3,4,5,6,7,8,9,10,11,12, true, false, auto
label-cols-lg
String or Number or Booleanfalse在LG及以上断点的宽度,可选1,2,3,4,5,6,7,8,9,10,11,12, true, false, auto
label-cols-xl
String or Number or Booleanfalse在XL及以上断点的宽度,可选1,2,3,4,5,6,7,8,9,10,11,12, true, false, auto
label-cols-offset-xs
String or Number在XS及以上断点的偏移量,可选0,1,2,3,4,5,6,7,8,9,10,11
label-cols-offset-sm
String or Number在SM及以上断点的偏移量,可选0,1,2,3,4,5,6,7,8,9,10,11
label-cols-offset-md
String or Number在MD及以上断点的偏移量,可选0,1,2,3,4,5,6,7,8,9,10,11
label-cols-offset-lg
String or Number在LG及以上断点的偏移量,可选0,1,2,3,4,5,6,7,8,9,10,11
label-cols-offset-xl
String or Number在XL及以上断点的偏移量,可选0,1,2,3,4,5,6,7,8,9,10,11
label-cols-order-xs
String or Number在XS及以上断点的排序,可选0,1,2,3,4,5,6,7,8,9,10,11,12
label-cols-order-sm
String or Number在SM及以上断点的排序,可选0,1,2,3,4,5,6,7,8,9,10,11, 12
label-cols-order-md
String or Number在MD及以上断点的排序,可选0,2,3,4,5,6,7,8,9,10,11, 12
label-cols-order-lg
String or Number在LG及以上断点的排序,可选0,2,3,4,5,6,7,8,9,10,11, 12
label-cols-order-xl
String or Number在XL及以上断点的排序,可选0,2,3,4,5,6,7,8,9,10,11, 12
label-align-xs
String在XS及以上断点label位置
label-align-sm
String在SM及以上断点label位置
label-align-md
String在MD及以上断点label位置
label-align-lg
String在LG及以上断点label位置
label-align-xl
String在XL及以上断点label位置
label-class
Stringlabel 自定义css
text-tag
String'small'文本内容的标签
text-variant
String'muted'文字颜色,可选 primary, secondary, success, info, warning, danger, light, dark, lightblue, navy, olive, lime, fuchsia, maroon, blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan, white, gray, graydark
text-inline
Booleanfalsedescription 的渲染形式,设置 true 为 inline 元素,设置 false 为 block 元素
label-size
Stringnull大小,可选 sm, lg
label
String标签
label-for
String指定为 对应id的 标签
label-sr-only
Booleanfalse使得标签只有在屏幕阅读器上才可见
description
Stringlabel 描述
invalid-feedback
String错误提示,渲染一个 nly-form-feedback
valid-feedback
String正确提示,渲染一个 nly-form-feedback
warning-feedback
String警告提示,渲染一个 nly-form-feedback
tooltip
Booleanfalse把nly-form-feedback组件渲染成tooltip
feedback-aria-live
String'assertive'给nly-form-feedback组件渲染aria-live
validated
Booleanfalse给form group 添加 was-validated class
disabled
Booleanfalse禁用 form group的 fieldset 和label-for

Slots

Slot NameDescription
label label 元素插槽
description description 元素插槽
invalid-feedback invalid-feedback 元素插槽
valid-feedback valid-feedback 元素插槽
warning-feedback warning-feedback 元素插槽

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-form-group>NlyFormGroupnly-adminlte-vue

例子

import { NlyFormGroup } from 'nly-adminlte-vue'
Vue.component('nly-form-group', NlyFormGroup)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
FormGroupPluginnly-adminlte-vue

例子

import { FormGroupPlugin } from 'nly-adminlte-vue'
Vue.use(FormGroupPlugin)