mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-11-21 01:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): [date-picker] better presentation (#10781)

Browse Source
This commit is contained in:
RealityBoy 2022-11-26 13:52:35 +08:00 committed by GitHub
parent 31b5b92edd
commit 2e706e639d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/examples/date-picker/date-range.vue
View File

@ -1,11 +1,9 @@
<template>
<div>
<el-radio-group v-model="size" label="size control">
<el-radio-button label="large">large</el-radio-button>
<el-radio-button label="default">default</el-radio-button>
<el-radio-button label="small">small</el-radio-button>
</el-radio-group>
</div>
<el-radio-group v-model="size" label="size control" size="small">
<el-radio-button label="large">large</el-radio-button>
<el-radio-button label="default">default</el-radio-button>
<el-radio-button label="small">small</el-radio-button>
</el-radio-group>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">Default</span>
@ -37,7 +35,7 @@
<script lang="ts" setup>
import { ref } from 'vue'
const size = ref<'' | 'large' | 'small'>('')
const size = ref<'default' | 'large' | 'small'>('default')
const value1 = ref('')
const value2 = ref('')
@ -72,6 +70,7 @@ const shortcuts = [
},
]
</script>
<style scoped>
.demo-date-picker {
display: flex;
@ -79,15 +78,18 @@ const shortcuts = [
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);

18
docs/examples/date-picker/enter-date.vue
View File

@ -1,11 +1,9 @@
<template>
<div>
<el-radio-group v-model="size" label="size control">
<el-radio-button label="large">large</el-radio-button>
<el-radio-button label="default">default</el-radio-button>
<el-radio-button label="small">small</el-radio-button>
</el-radio-group>
</div>
<el-radio-group v-model="size" label="size control" size="small">
<el-radio-button label="large">large</el-radio-button>
<el-radio-button label="default">default</el-radio-button>
<el-radio-button label="small">small</el-radio-button>
</el-radio-group>
<div class="demo-date-picker">
<div class="block">
<span class="demonstration">Default</span>
@ -33,7 +31,7 @@
<script lang="ts" setup>
import { ref } from 'vue'
const size = ref<'' | 'large' | 'small'>('')
const size = ref<'default' | 'large' | 'small'>('default')
const value1 = ref('')
const value2 = ref('')
@ -65,6 +63,7 @@ const disabledDate = (time: Date) => {
return time.getTime() > Date.now()
}
</script>
<style scoped>
.demo-date-picker {
display: flex;
@ -72,15 +71,18 @@ const disabledDate = (time: Date) => {
padding: 0;
flex-wrap: wrap;
}
.demo-date-picker .block {
padding: 30px 0;
text-align: center;
border-right: solid 1px var(--el-border-color);
flex: 1;
}
.demo-date-picker .block:last-child {
border-right: none;
}
.demo-date-picker .demonstration {
display: block;
color: var(--el-text-color-secondary);