lionui-test

UI框架

Usage no npm install needed!

<script type="module">
  import lionuiTest from 'https://cdn.skypack.dev/lionui-test';
</script>

README

Build Status 这是我在学习 Vue 过程中做的一个 UI 框架，希望对您有用。

使用本框架前请在CSS中开启border-box

*,*::before,*::after{box-sizing: border-box;margin:0;padding:0;}

安装lionUI

npm i --save lionui-test

引入lionUI

import {Button, Icon} from  "lionui-test"
import "lionui-test/dist/index.css"

export default {
  name: 'App',
  components: {
    'g-button': Button,
    'g-icon': Icon
  }
}

添加 CSS 样式

使用本框架前，请在 CSS 中开启 border-box

*，*::before,*::after{ box-sizing: border-box }

仅支持IE 8 及以上浏览器。

引入组件

import { Button } from 'lion-ui'
import 'lion-ui/dist/index.css'

export default {
    name: 'app',
    components: {
        'g-button': Button
    }
}

使用

<template>
<div>
<g-button>默认按钮</g-button>
</div>
</template>

完整引入

import {Button, ButtonGroup, Icon,Col, Collapse, CollapseItem, Content, Footer, Header, Input, Layout, Popover
         , Row, Sider, Tabs, TabsHead, TabsBody, TabsItems, TabsPane, Toast,plugin
       } from 'lion-ui'
import 'lion-ui/dist/index.css'    
import Vue from 'vue'
Vue.use(plugin)

export default {
  name: 'app',
  components: {
        'g-button':Button,
        'g-icon':Icon,
        'g-button-group':ButtonGroup,
        'g-col':Col,
        'g-collapse':Collapse,
        'g-collapse-item':CollapseItem,
        'g-content': Content,
        'g-footer': Footer,
        'g-header': Header,
        'g-input': Input,
        'g-layout': Layout,
        'g-popover': Popover,
        'g-row': Row,
        'g-sider': Sider,
        'g-tabs': Tabs,
        'g-tabs-head': TabsHead,
        'g-tabs-body': TabsBody,
        'g-tabs-items': TabsItems,
        'g-tabs-pane': TabsPane,
        'g-toast': Toast,
 }
}