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|