tayeh-ui

tayeh-ui

Goals

• stay lightweight

• keep it simple

• be extendable

• become theme compatible

Install and Usage

# installing package

npm install --save tayeh-ui

in your Vue main.js file

import  Vue  from  'vue';

import  App  from  './App'

import  TayehUi  from  'tayeh-ui'

  

Vue.use(TayehUi)

  

new  Vue({

el: '#app',

render: h  =>  h(App)

})

  

Examples

You can checkout examples by running

// running examples
npm run dev

Screenshots

Inputs

    <ty-input v-model="model" placeholder="لطفا نام را وارد کنید"></ty-input>
    <ty-input-number v-model="model" label="نام"></ty-input-number>
    <ty-currency-input v-model="model"></ty-currency-input>

Icons

    <i class="ty-icon ty-icon-heart"></i>
    <ty-button icon="heart"></ty-button>

Buttons

    <ty-button @click="clickHandler">Click Here</ty-button>
    <ty-button color="secondary">Click Here</ty-button>
    <ty-button size="small">Click Here</ty-button>

Card

    <ty-card>Card Content</ty-card>

Border

    <ty-border>Border Content</ty-border>

Border

    <p class="of-text-ellipsis">Very Long Text That should be truncated</p>

Border

    <div v-loading="stillLoading">Content That shoud wait for loading</div>

Color Picker

    <ty-color-picker v-model="color" @change="handleChange"></ty-color-picker>
    <ty-color-circle v-model="color" editable></ty-color-circle>

Container

    <ty-container>
        <ty-header>Header</ty-header>
        <ty-container>
            <ty-aside>Aside</ty-aside>
            <ty-main>Main</ty-main>
        </ty-container>
    </ty-container>

Tabs

    <ty-tabs>
        <ty-tab id="tab-1" name="Tab 1">Tab 1 Content</ty-tab>
        <ty-tab id="tab-2" name="Tab 2">Tab 2 Content</ty-tab>
        <ty-tab id="tab-3" name="Tab 3">Tab 3 Content</ty-tab>
    </ty-tabs>