1.0.1 • Published 3 years ago
okxe-design-system v1.0.1
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 |
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