test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-02 11:17:46 +08:00
Code Issues Actions 4 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> <template>
<div> <el-radio-group v-model="size" label="size control" size="small">
<el-radio-group v-model="size" label="size control"> <el-radio-button label="large">large</el-radio-button>
<el-radio-button label="large">large</el-radio-button> <el-radio-button label="default">default</el-radio-button>
<el-radio-button label="default">default</el-radio-button> <el-radio-button label="small">small</el-radio-button>
<el-radio-button label="small">small</el-radio-button> </el-radio-group>
</el-radio-group>
</div>
<div class="demo-date-picker"> <div class="demo-date-picker">
<div class="block"> <div class="block">
<span class="demonstration">Default</span> <span class="demonstration">Default</span>
@ -37,7 +35,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from 'vue' import { ref } from 'vue'
const size = ref<'' | 'large' | 'small'>('') const size = ref<'default' | 'large' | 'small'>('default')
const value1 = ref('') const value1 = ref('')
const value2 = ref('') const value2 = ref('')
@ -72,6 +70,7 @@ const shortcuts = [
}, },
] ]
</script> </script>
<style scoped> <style scoped>
.demo-date-picker { .demo-date-picker {
display: flex; display: flex;
@ -79,15 +78,18 @@ const shortcuts = [
padding: 0; padding: 0;
flex-wrap: wrap; flex-wrap: wrap;
} }
.demo-date-picker .block { .demo-date-picker .block {
padding: 30px 0; padding: 30px 0;
text-align: center; text-align: center;
border-right: solid 1px var(--el-border-color); border-right: solid 1px var(--el-border-color);
flex: 1; flex: 1;
} }
.demo-date-picker .block:last-child { .demo-date-picker .block:last-child {
border-right: none; border-right: none;
} }
.demo-date-picker .demonstration { .demo-date-picker .demonstration {
display: block; display: block;
color: var(--el-text-color-secondary); color: var(--el-text-color-secondary);

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

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