提交 issue修改本页

Input Group

<div>
  <nly-input-group prepend="@" append=".00">
    <nly-form-input> </nly-form-input>
  </nly-input-group>

  <nly-input-group class="mt-3">
    <template v-slot:append>
      <nly-input-group-text
        ><strong class="text-danger">!</strong></nly-input-group-text
      >
    </template>
    <nly-form-input></nly-form-input>
  </nly-input-group>

  <nly-input-group prepend="Username" class="mt-3">
    <nly-form-input></nly-form-input>
    <nly-input-group-append>
      <nly-button variant="outlineSuccess">Button</nly-button>
      <nly-button variant="info">Button</nly-button>
    </nly-input-group-append>
  </nly-input-group>
</div>

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

总览

nly-input-group 是输入框组的容器，支持以下几种使用方式

  • 可以使用 props prepend 和 append 来 添加 nly-input-group-prepend 和 nly-input-group-append，传入的值为这 2 个组件的文本内容

  • 可以使用插槽prepend 和 append，传入的元素会渲染到nly-input-group-prepend 和 nly-input-group-append 组件中

  • 可以使用嵌套子组件：nly-input-group-prepend ， nly-input-group-append，nly-input-group-text 和 nly-input-group-add

props prepend 和 append

使用 props prepend 和 append 会渲染出 nly-input-group-prepend 和 nly-input-group-append 2 个组件，且嵌套一个 nly0input-group-text 组件

<div>
  <nly-input-group prepend="@" append=".00">
    <nly-form-input></nly-form-input>
  </nly-input-group>

  <nly-input-group prepend="0" append="100" class="mt-3">
    <nly-form-input type="range" min="0" max="100"></nly-form-input>
  </nly-input-group>
</div>

<!-- prepend-append.name -->
<!-- nly-input-group.vue -->

插槽

如果您想自定义一些拓展，可以使用插槽 prepend 和 append，分别会渲染嵌套在nly-input-group-prepend 和 nly-input-group-append 中的元素

<div>
  <nly-input-group>
    <template v-slot:prepend>
      <nly-input-group-text>
        <nly-icon icon="fas fa-envelope" />
      </nly-input-group-text>
    </template>
    <nly-form-input></nly-form-input>

    <template v-slot:append>
      <nly-dropdown text="Dropdown" variant="success">
        <nly-dropdown-item>Action A</nly-dropdown-item>
        <nly-dropdown-item>Action B</nly-dropdown-item>
      </nly-dropdown>
    </template>
  </nly-input-group>
</div>

<!-- slot.name -->
<!-- nly-input-group.vue -->

使用子组件

可以使用组件嵌套在 nly-input-group 中

<nly-input-group>
  <nly-input-group-prepend>
    <nly-input-group-text>
      <nly-icon icon="fas fa-envelope" />
    </nly-input-group-text>
    <nly-input-group-text>
      <nly-icon icon="fas fa-dollar-sign" />
    </nly-input-group-text>
  </nly-input-group-prepend>

  <nly-form-input type="color" value="#ffc107"></nly-form-input>

  <nly-input-group-append>
    <nly-input-group-text>
      <nly-icon icon="fas fa-check" />
    </nly-input-group-text>
    <nly-button variant="outlineSecondary">Button</nly-button>
  </nly-input-group-append>
</nly-input-group>

<!-- component.name -->
<!-- nly-input-group.vue -->

多个输入框

nly-input-group 多个输入框支持放入 prepend 和 append

复选框和单选框

如果 prepend 和 append 中嵌套的组件不是 文本类型组件，请不要嵌套 nly-input-group-text, 比如嵌套 nly-button

<div>
  <nly-input-group class="mb-2">
    <nly-input-group-prepend is-text>
      <input type="checkbox" aria-label="Checkbox for following text input" />
    </nly-input-group-prepend>
    <nly-form-input aria-label="Text input with checkbox"></nly-form-input>
  </nly-input-group>

  <nly-input-group class="mb-2">
    <nly-input-group-prepend is-text>
      <input type="radio" aria-label="Radio for following text input" />
    </nly-input-group-prepend>
    <nly-form-input aria-label="Text input with radio input"></nly-form-input>
  </nly-input-group>

  <nly-input-group>
    <nly-input-group-prepend is-text>
      <nly-switch />
    </nly-input-group-prepend>
    <nly-form-input aria-label="Text input with switch input"></nly-form-input>
    <nly-input-group-append is-text>
      <nly-bootstrap-switch size="xs" />
    </nly-input-group-append>
  </nly-input-group>
</div>

<!-- inputs.name -->
<!-- nly-input-group.vue -->

多个输入框

<nly-input-group>
  <nly-input-group-prepend is-text>
    <nly-switch />
  </nly-input-group-prepend>
  <nly-form-input aria-label="Text input with switch input"></nly-form-input>
  <nly-form-input aria-label="Text input with switch input"></nly-form-input>
</nly-input-group>

<!-- inputs.name -->
<!-- nly-input-group.vue -->

多个拓展

多个拓展可以嵌套多个 nly-input-group-text 或者多个 ly-input-group-prepend，请注意刺猬差别 prop is-text

<nly-input-group>
  <nly-input-group-prepend>
    <nly-input-group-text>
      <nly-icon icon="fas fa-envelope" />
    </nly-input-group-text>
    <nly-input-group-text>
      <nly-icon icon="fas fa-dollar-sign" />
    </nly-input-group-text>
  </nly-input-group-prepend>

  <nly-form-input type="color" value="#ffc107"></nly-form-input>

  <nly-input-group-append>
    <nly-input-group-text>
      <nly-icon icon="fas fa-check" />
    </nly-input-group-text>
    <nly-button variant="outlineSecondary">Button</nly-button>
  </nly-input-group-append>
</nly-input-group>

<!-- 多个.name -->
<!-- nly-input-group.vue -->
<nly-input-group>
  <nly-input-group-prepend is-text>
    <nly-icon icon="fas fa-envelope" />
  </nly-input-group-prepend>
  <nly-input-group-prepend>
    <nly-input-group-text>
      <nly-icon icon="fas fa-dollar-sign" />
    </nly-input-group-text>
  </nly-input-group-prepend>

  <nly-input-group-prepend is-text>
    <nly-switch />
  </nly-input-group-prepend>

  <nly-form-input type="color" value="#ffc107"></nly-form-input>

  <nly-input-group-append>
    <nly-input-group-text>
      <nly-icon icon="fas fa-check" />
    </nly-input-group-text>
    <nly-button variant="outlineSecondary">Button</nly-button>
  </nly-input-group-append>
</nly-input-group>

<!-- 多个.name -->
<!-- nly-input-group.vue -->

嵌入下拉菜单

<div>
  <nly-input-group>
    <template v-slot:prepend>
      <nly-dropdown text="Dropdown" variant="info">
        <nly-dropdown-item>Action A</nly-dropdown-item>
        <nly-dropdown-item>Action B</nly-dropdown-item>
      </nly-dropdown>
    </template>

    <nly-form-input></nly-form-input>

    <template v-slot:append>
      <nly-dropdown
        text="Dropdown"
        variant="outlineSecondary"
        v-for="i in 2"
        :key="i"
      >
        <nly-dropdown-item>Action C</nly-dropdown-item>
        <nly-dropdown-item>Action D</nly-dropdown-item>
      </nly-dropdown>
    </template>
  </nly-input-group>
</div>

<!-- 下拉菜单.name -->
<!-- nly-input-group.vue -->

大小

可以设置 prop size 来控制大小

<div>
  <nly-input-group
    v-for="size in ['sm','','lg']"
    :key="size"
    :size="size"
    class="mb-3"
  >
    <nly-input-group-prepend is-text>
      <nly-icon icon="fas fa-envelope" />
    </nly-input-group-prepend>
    <nly-form-input></nly-form-input>
    <nly-input-group-append>
      <nly-button size="sm" text="Button" variant="success">Button</nly-button>
    </nly-input-group-append>
  </nly-input-group>
</div>
<!-- size.name -->
<!-- nly-input-group.vue -->

valid 和 description

nly-input-group 同样可以使用 feedback 来提供表单验证信息，使用 description 来提供表单简介描述信息，不过最外层会渲染一层 <div>

<template>
  <div>
    <nly-input-group
      invalid-feedback="我是invalid"
      valid-feedback="我是valid"
      warning-feedback="我是warning"
      :valid='valid'
      description='请输入对应的信息'
      text-variant='pink'
      inline
      text-tag='small'
    >
      <nly-input-group-prepend is-text>
        <nly-icon icon="fas fa-envelope" />
      </nly-input-group-prepend>
      <nly-form-input :valid='valid'></nly-form-input>
      <nly-input-group-append>
        <nly-button size="sm" text="Button" variant="success"
          >Button</nly-button
        >
      </nly-input-group-append>
    </nly-input-group>
    <nly-form-group label="valid 表单状态" label-cols-xs="auto" class="mt-2">
      <nly-form-select v-model="valid" :options="validOptinos" />
    </nly-form-group>
  </div>
</template>

<script>
export default {
  data(){
    return {
      valid:'novalid',
      validOptinos: [
          { value: null, text: 'Please select an option', disabled: true },
          { value: 'novalid', text: '不显示 feedback' },
          { value: 'invalid', text: '显示invalid feedback' },
          { value: 'valid', text: '显示 valid feedback' },
          { value: 'warning', text: '显示 warning feedback' },
        ],
    }
  }
}

</script>
<!-- size.name -->
<!-- nly-input-group.vue -->

组件参数

查看源码

<nly-input-group>

函数式组件（Functional component）

props 参数

props (Click to sort Ascending)类型默认值描述
id
String设置id
size
Stringnull大小,可选sm ,lg
prepend
Stringnly-input-group-prepend 文本内容
prepend-html
谨慎使用 		String渲染到 nly-input-group-prepend 的 html文本
append
Stringnly-input-group-append 文本内容
append-html
谨慎使用 		String渲染到 nly-input-group-append 的 html文本
tag
String'div'标签
description
String描述提示文字
invalid-feedback
String验证错误消息
valid-feedback
String验证通过消息
warning-feedback
String验证警告消息
valid
String验证状态，可选包valid, invalid, warning, novalid，设置不同的值可以出发表单验证 feedback
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 元素

注意: 支持 (*-html) html 字符串的 prop 可能会引起 脚本攻击 (XSS)， 当用户使用这类 prop 的时候，您应该谨慎 处理 这类值

Slots

Slot NameDescription
prepend 此插槽是用来代替 nly-input-group-prepend 的
append 此插槽是用来代替 nly-input-group-append 的
查看源码

<nly-input-group-text>

函数式组件（Functional component）

props 参数

props类型默认值描述
tag
String'span'标签
text-class
Stringnull自定义css
查看源码

<nly-input-group-prepend>

函数式组件（Functional component）

props 参数

props类型默认值描述
tag
String'div'标签
id
Stringnull设置id
is-text
Booleanfalse设置true会渲染一个nly-input-group-text
prepend-class
Stringnull自定义css
text-tag
String'span'isText设置true时nly-input-group-text的标签
text-class
StringnullisText设置true时nly-input-group-text的自定义css
查看源码

<nly-input-group-append>

函数式组件（Functional component）

props 参数

props类型默认值描述
tag
String'div'标签
id
Stringnull设置id
is-text
Booleanfalse设置true会渲染一个nly-input-group-text
append-class
Stringnull自定义css
text-tag
String'span'isText设置true时nly-input-group-text的标签
text-class
StringnullisText设置true时nly-input-group-text的自定义css
查看源码

<nly-input-group-add>

函数式组件（Functional component）

props 参数

props类型默认值描述
tag
String'div'标签
id
Stringnull设置id
is-text
Booleanfalse设置true会渲染一个nly-input-group-text
add-class
Stringnull自定义css
text-tag
String'span'isText设置true时nly-input-group-text的标签
text-class
StringnullisText设置true时nly-input-group-text的自定义css
append
Booleanfalse设置true 渲染为 nlyinput-group-append ，默认渲染为nly-input-group-preppend

单个组件导入

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

组件导出名称导出路径
<nly-input-group>NlyInputGroupnly-adminlte-vue
<nly-input-group-text>NlyInputGroupTextnly-adminlte-vue
<nly-input-group-prepend>NlyInputGroupPrependnly-adminlte-vue
<nly-input-group-append>NlyInputGroupAppendnly-adminlte-vue
<nly-input-group-add>NlyInputGroupAddnly-adminlte-vue

例子

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

导出作为插件

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

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

例子

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