ptmind-ui v1.0.10

Datadeck ui 组件库

代码规范

Vue组件开发规范 Pt UI css 规范说明

如何使用

基于ES6语法.

    
    //所有组件全局使用
    import Vue from 'vue'
    import PtUi from 'pt-ui'

    Vue.use(PtUi)

    //或者单个组件全局使用
    import { PtButton } from 'pt-ui'

    Vue.component(PtButton.name, PtButton)

    //又或者单个组件局部使用
    <template>
        <div>
            <pt-button @click="click">click me</pt-button>
        </div>
    </template>
    <script>
        import { PtButton } from 'pt-ui'
    
        export default{
            //... 省略其他
            components: { PtButton }
        }
    </script>

demo展示

demo示例在examples目录下.

    npm install
    npm run dev

组件列表

Basic

• Layout 布局 暂时不知道在哪？可能要重写吧
• Color 色彩 √
• Font 字体 √
• Icon 图标 √
• Button 按钮 √

Form

• Radio 单选框 √
• Checkbox 多选框 √
• Input 输入框 √
• Textarea 多行输入框 √
• Tag Input 标签输入框 √
• Input Number 数字输入框 √
• Select 选择器 √
• Datepicker 日期选择器 √
• Switch 开关 √
• Palette 图标开关 √
• Slider 滑块 √
• Search 搜索框 √
• Form 表单

Data

• Table 表格 √
• Tag 标签
• Tree 树形控件 √
• Progress 进度条 √
• Pagination 分页

Notice

• Loading 加载 √
• Modal 弹框 √
• Toast 提示框 √
• Tooltip 文字提示 √

Navigation

• NavMenu 导航菜单
• Dorpdown 下拉菜单 √
• Steps 步骤条
• collapse 折叠 √
• Scrollbar 滚动条 √

Other

• Tooltip 文字提示 √
• Popup 弹出框 √
• tab √
• File Upload 文件上传 √
• Rich Text 富文本编辑器 √