Tactile UI

Tactile[ˈtæktaɪl] UI, A tactile UI components based on Vue3 and Typescript.

~~FBI~~ Warning: The original intention of this project is to learn Vue3. At present, there are too few components and no unit testing. It is not recommended to be used in a production environment, but it can be used as a learning project or used in a small project. I will add this part as soon as possible~😄

English | 简体中文

Features

Mobile PC compatible
Simple and easy-to-use component API
Lightweight, try not to rely on third-party libraries
High-quality Vue components out of the box.

Documentation

Install

$ yarn add tactile-ui-vue3

or

$ npm install tactile-ui-vue3 --save

If you are in a bad network environment，you can try other registries and tools like cnpm .

Import

// main.js

// Import the library
import { Button, Switch, Dialog, Tabs, Tab } from 'tactile-ui-vue3'
import 'tactile-ui-vue3/dist/lib/tactile-ui.css'

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// Register components that you need 
app.component(Button.name, Button)
app.component(Switch.name, Switch)
app.component(Dialog.name, Dialog)
app.component(Tabs.name, Tabs)
app.component(Tab.name, Tab)

app.mount('#app')

Usage

Now, let's use components

<t-button theme="primary">primary</t-button>
<t-button theme="success">success</t-button>
<t-button theme="danger">danger</t-button>

<t-switch>
  <template #checked>Vue3</template>
  <template #unchecked>Vue2</template>
</t-switch>

If you wanna explore more usages, here's a playground on CodeSandBox.io.

Note

This UI library will reset some styles as followed. I strongly recommend you to add these styles to all of your projects for saving time to find CSS bugs :)

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

License

MIT

yxmg/tactile-ui-vue3