Okxe-design-system NPM

okxe-design-system

Installation

npm install okxe-design-system
Import css to global in ``Main.vue``

import Vue from 'vue'
import App from './App.vue'
import 'okxe-design-system/dist/okxe-design-system.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Usage

Okxe Button

<template>
    <OkxeButton
      label="Liên hệ ngay"
      borderRadius="5px"
      outLinedColor="rgb(0, 188, 195)"
      @click="onClickBtn"
      background-color="#fff"
      colorText="#00BCC3"
      height="45px"
      width="calc(50% - 8px)"
      style="margin-right: 16px"
    >
      <template #icon>
        <img
          src="/icons/icon-call-seller_green.svg"
          width="20"
          height="20"
          class="mr-2"
        />
      </template>
    </OkxeButton>
</template>

import OkxeButton from "okxe-design-system";
export default {
  components: {
    OkxeButton
  },
  methods: {
    onClickBtn() {
      // to do something
    },
  },
};

Constructor Options

Key	Type	Default	Description
`label`	`String`	''	Text of the button (ex: Mua hàng, Đăng nhập)
`with`	`String`	''	Width of the button (ex: 50px, 50%, 100%...)
`height`	`String`	''	Height of the button (ex: 50px, 50%, 100%...)
`backgroundColor`	`String`	#00BCC3	Background-color of the button
`colorText`	`String`	''	Color of label
`disabled`	`Boolean`	false	Removes the ability to click or target the component
`outLinedColor`	`String`	null	Makes a thin border with this color.
`borderRadius`	`String`	null	Applies a border radius on the button (ex: 5px, 8px)
`circleButton`	`Boolean`	false	Make a circle button
`@click`	`Function`	null	Event that is emitted when the component is clicked

---------------------------------------------------------------------

Okxe Checkbox

<OkxeCheckbox :value="checkBox" label="Tôi đồng ý với các điều khoản!" @onChange="onChangeCheckbox"/>

import { OkxeCheckbox } from "okxe-design-system";

export default {
    name: "App",
    components: {
        OkxeCheckbox
    },
    data() {
        return {
            checkBox: true
        }
    },
    methods: {
        onChangeCheckbox(e) {
            alert("Checkbox is " + e)
        }
    }
};

Constructor Options

Key	Type	Default	Description
`label`	`String`	''	Text of the checkbox
`value`	`Boolean`	`false`	Default value of checkbox
`disabled`	`Boolean`	`false`	Removes the ability to click or target the component.
`@onChange`	`Function`	null	Event that is emitted when the component is changed