开发文档地址 :

https://zhanggenyuan.gitee.io/zgy-ui-docs/

环境支持

由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE11 浏览器。

版本

zgyUI 目前还在开发中

安装

使用包管理器

建议您使用包管理器 (NPM, Yarn, pnpm) 安装 zgyUI, 然后您就可以使用打包工具，例如 Vite 和 webpack

# 选择一个你喜欢的包管理器

# NPM
$ npm install zgy-ui --save

# Yarn
$ yarn add zgy-ui

# pnpm
$ pnpm install zgy-ui

Button按钮

基础用法

<template>
 <div> 
   <Row :gutter="[10,20]">
     <Button>Default</Button>
     <Button type="primary">Primary</Button>
     <Button type="success">Success</Button>
     <Button type="info">Info</Button>
     <Button type="warning">Warning</Button>
     <Button type="danger">Danger</Button>
   </Row>

   <Row :gutter="[10,20]">
     <Button plain>Plain</Button>
     <Button type="primary" plain>Primary</Button>
     <Button type="success" plain>Success</Button>
     <Button type="info" plain>Info</Button>
     <Button type="warning" plain>Warning</Button>
     <Button type="danger" plain>Danger</Button>
   </Row>

   <Row :gutter="[10,20]">
     <Button round>Round</Button>
     <Button type="primary" round>Primary</Button>
     <Button type="success" round>Success</Button>
     <Button type="info" round>Info</Button>
     <Button type="warning" round>Warning</Button>
     <Button type="danger" round>Danger</Button>
   </Row>

   <Row :gutter="[10,20]">
     <Button :icon="Search" circle />
     <Button type="primary" :icon="Edit" circle />
     <Button type="success" :icon="Check" circle />
     <Button type="info" :icon="Message" circle />
     <Button type="warning" :icon="Star" circle />
     <Button type="danger" :icon="Delete" circle />
   </Row>
 </div>
</template>

<script lang="ts" setup>

import { Button,Row } from "zgy-ui";

</script>

Attributes

| 参数| 说明 |可选值|类型|默认值| |-----| ----|-----|---|-------| | type| 类型 | 'primary', 'success', 'info', 'warning', 'danger', 'text'|string|- | | plain|朴素按钮| - |boolean| false | |round|是否圆角| - |boolean| false | |circle|是否圆形| - |boolean| false | |disabled|是否禁用| - |boolean| false |