element-plus/docs/examples/checkbox/with-border.vue
云游君 4560adfdf8
refactor(style): adjust component size to large/default/small (#4491)
* refactor(style): adjust component size to large/default/small

* refactor(components): avatar size & use flex instead of block

* refactor(components): adjust check button size

* refactor(components): adjust tag size

* refactor(components): adjust size doc

* fix(components): datetime-picker demo style width

* refactor(components): color-picker size & block to flex

* refactor(components): adjust slider input size

* refactor(components): adjust radio input size for demo

* refactor(components): adjust select size & docs

* refactor(components): adjust form radio size & docs

* refactor(components): add windicss for docs

* refactor(components): adjust skeleton avatar size to css var

* refactor(components): simplify typography size demo

* refactor(components): adjust dropdown size & demo

* refactor(components): adjust descriptions size

* fix(components): datetime-picker showcase class pollute global button

* chore(ci): upgrade docs dependencies to fix ci

* fix(ci): add highlight because vitepress not export it

* fix(ci): disable line for no-console

* fix(ci): remove mini to fix test

* fix(style): code font size

* fix(style): button span flex style

* fix(style): button padding horizontal default 15px

* refactor(components): adjust tag padding size & demo

* refactor(components): adjust form line-height for input

* refactor(components): adjust dropdown menu size & button padding

* fix(style): picker separator block to flex center

* fix: dropdown button span items-center

* style: adjust input-with-icon & size demo & fix input vitepress load

* chore: upgrade dependencies

* chore: upgrade dependencies

* ci: fix website build

* ci: regenerate pnpm-lock.yaml

* ci: use dev pnpm-lock

* ci: update pnpm-lock.yaml
2021-12-12 17:54:21 +08:00

51 lines
1.1 KiB
Vue

<template>
<div>
<el-checkbox
v-model="checked1"
label="Option1"
size="large"
border
></el-checkbox>
<el-checkbox
v-model="checked2"
label="Option2"
size="large"
border
></el-checkbox>
</div>
<div class="demo-with-border">
<el-checkbox v-model="checked3" label="Option1" border></el-checkbox>
<el-checkbox v-model="checked4" label="Option2" border></el-checkbox>
</div>
<div class="demo-with-border">
<el-checkbox-group v-model="checkboxGroup1" size="small">
<el-checkbox label="Option1" border></el-checkbox>
<el-checkbox label="Option2" border disabled></el-checkbox>
</el-checkbox-group>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
export default defineComponent({
setup() {
const state = reactive({
checked1: true,
checked2: false,
checked3: false,
checked4: true,
checkboxGroup1: [],
})
return toRefs(state)
},
})
</script>
<style scoped>
.demo-with-border {
margin-top: 24px;
}
</style>