1.0.1 • Published 3 years ago

okxe-design-system v1.0.1

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years ago

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

KeyTypeDefaultDescription
labelString''Text of the button (ex: Mua hàng, Đăng nhập)
withString''Width of the button (ex: 50px, 50%, 100%...)
heightString''Height of the button (ex: 50px, 50%, 100%...)
backgroundColorString#00BCC3Background-color of the button
colorTextString''Color of label
disabledBooleanfalseRemoves the ability to click or target the component
outLinedColorStringnullMakes a thin border with this color.
borderRadiusStringnullApplies a border radius on the button (ex: 5px, 8px)
circleButtonBooleanfalseMake a circle button
@clickFunctionnullEvent 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

KeyTypeDefaultDescription
labelString''Text of the checkbox
valueBooleanfalseDefault value of checkbox
disabledBooleanfalseRemoves the ability to click or target the component.
@onChangeFunctionnullEvent that is emitted when the component is changed
0.1.30

3 years ago

1.0.1

3 years ago

0.1.10

3 years ago

0.1.11

3 years ago

0.1.12

3 years ago

0.1.13

3 years ago

0.1.14

3 years ago

0.1.15

3 years ago

0.1.27

3 years ago

0.1.28

3 years ago

0.1.29

3 years ago

0.1.20

3 years ago

0.1.21

3 years ago

0.1.22

3 years ago

0.1.23

3 years ago

0.1.24

3 years ago

0.1.25

3 years ago

0.1.26

3 years ago

0.1.16

3 years ago

0.1.8

3 years ago

0.1.17

3 years ago

0.1.7

3 years ago

0.1.18

3 years ago

0.1.19

3 years ago

0.1.9

3 years ago

0.1.6

3 years ago

0.1.5

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.2

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago