Tomatoes UI

一个基于Semantic UI的Vue组件库

npm安装

npm i tomatoes-ui

在main.js中引入

import Vue from 'vue'
import TomatoesUI from 'tomatoes-ui/lib/tomatoes-ui.umd.js'
import 'tomatoes-ui/lib/tomatoes-ui.css'
Vue.use(TomatoesUI)

new Vue({
  el: '#app',
  render: h => h(App)
});

按钮

<template>
  <div>
    <h1>按钮</h1>
    <h2>基础用法</h2>
    <to-button>默认按钮</to-button>
    <to-button type="basic">基本按钮</to-button>
    <to-button type="primary">主要按钮</to-button>
    <to-button type="secondary">次要按钮</to-button>
    <br />
    <br />
    <to-button round>默认按钮</to-button>
    <to-button type="basic" round>基本按钮</to-button>
    <to-button type="primary" round>主要按钮</to-button>
    <to-button icon="user" type="secondary" round>次要按钮</to-button>
    <br />
    <br />
    <to-button icon="user" round></to-button>
    <to-button icon="user" type="basic" round></to-button>
    <to-button icon="user" type="primary" round></to-button>
    <to-button icon="user" type="secondary" round></to-button>
    <h2>禁用状态</h2>
    <to-button icon="user" round disabled></to-button>
    <to-button type="basic" round disabled>基本按钮</to-button>
    <to-button type="primary" disabled>主要按钮</to-button>
    <h2>按钮点击事件</h2>
    <to-button icon="user" round @click="buttonClick"></to-button>
    <h2>按钮加载中</h2>
    <to-button icon="user" loading>加载中</to-button>
    <h2>按钮尺寸</h2>
    <to-button size="mini">Mini</to-button>
    <to-button size="tiny">Tiny</to-button>
    <to-button size="small">Small</to-button>
    <to-button size="medium">Medium</to-button>
    <to-button size="large">Large</to-button>
    <to-button size="big">Big</to-button>
    <to-button size="huge">Huge</to-button>
    <to-button size="massive">Massive</to-button>
  </div>
</template>

export default {
  name: 'button-page',
  methods: {
    buttonClick () {
      console.log('触发按钮点击事件...')
    }
  }
}