Xtian-ui NPM | npm.io

xiat-ui

简介

一个支持拟态风格的 Vue UI 组件

使用

安装

npm i xtian-ui

全局注册

import XtUI from 'xtian-ui'
Vue.use(XtUI)

按需导入

import XtUI, { Button, Form } from 'xtian-ui'
Vue.use(XtUI, {
  components: [Button, Form]
})

导入样式

import 'xtian-ui/dist/xtian-ui.css'

导入 font字体图标

import './assets/font/iconfont.css'

<xiat-button icon='xt-icon-edit1'>按钮</xiat-button>

组件

按钮(Button)

 <xt-button></xt-button>

属性	值	描述
type	String	按钮类型：primary,info,success,warning,danger
plain	Boolean	是否为朴素按钮，默认为 false
name	String	name名称，默认为空
disabled	Boolean	是否禁用按钮，默认为 false
round	Boolean	是否为圆角按钮，默认为 false
circle	Boolean	是否为圆形按钮，默认为 false
icon	Array 或 Boolean	font-awesome 字体数组，默认为 false

事件	值	描述
click	Function	点击事件

对话框(Dialog )

<xt-dialog
        :visible.sync='visible'
        width='30%'
        top="20vh"
      >
        <template v-slot:footer>
          <xt-button @click="visible = false">取消</xt-button>
          <xt-button
            type='primary'
            @click="visible = false"
          >确认</xt-button>
        </template>
      </xt-dialog>

属性	值	描述
title	String	对话框头部提示，默认为"提示"
visible	Boolean	对话框可见状态，默认为 false
top	String	对话框距离顶部位置，默认为 15vh
width	String	对话框宽度，默认为 60%

插槽	描述
title	Dialog 标题区的内容
footer	Dialog 按钮操作区的内容

输入框(Input )

<xt-input></xt-input>

属性	值	描述
placeholder	String	占位符，默认为空字符串
type	String	表单类型，默认为'texiat'
disabled	Boolean	是否禁用，默认为 false
name	String	表单命名，默认为空
value	String	表单值，默认为空字符串
showPassword	Boolean	是否显示密码可见，默认为 false
clearable	Boolean	是否可清空，默认为 false

切换(Switch )

<xt-switch></xt-switch>

属性	值	描述
name	String	表单命名，默认为空
value	String	表单值，默认为空字符串
disabled	Boolean	是否禁用，默认为 false
activeColor	String	激活状态颜色，默认为#dcdfe6
inactiveColor	String	未激化状态颜色，默认为#dcdfe6
activeTexiat	String	激活状态文字，默认为 ''
inactiveTexiat	String	未激活状态文字，默认为 ''

事件	值	描述
change	Function	状态修改触发事件，返回修改后的状态

单选框(Radio )

<xt-radio></xt-radio>

属性	值	描述
label	String, Number, Boolean	单选框 label 值，默认为空字符串
name	String	表单命名，默认为空
value	String	表单值，默认为空字符串
color	String	单选框选择时的颜色，默认为#409eff

单选框组(RadioGroup )

用于包裹 radio，通过 v-model 指定组内所有的 radio 的 v-model

<xt-radio-group></xt-radio-group>

复选框(Checkbox )

<xt-checkbox></xt-checkbox>

属性	值	描述
label	String, Number, Boolean	单选框 label 值，默认为空字符串
disabled	Boolean	禁用，默认值false
name	String	表单命名，默认为空
value	String	表单值，默认为空字符串
color	String	单选框选择时的颜色，默认为#409eff

复选框组(CheckboxGroup )

用于包裹多个 checkbox，通过 v-model 指定组内所有的 checkout 的 v-model

<xt-checkbox-group></xt-checkbox-group>

表单项(Form-item )

<xt-form-item></xt-form-item>

属性	值	描述
label	String	单选框 label 值，默认为空字符串

表单(Form )

<xt-form></xt-form>

属性	值	描述
model	Object	表单对象，必填
label-width	String	标签宽度，默认"80px"
name	String	名称
inline	Boolean	是否再一行显示，默认值false

core-js vue

@infinitebrahmanuniverse/nolb-xt @everything-registry/sub-chunk-3190

0.1.1

5 years ago

0.1.0

5 years ago