test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-02 03:08:21 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

chore(docs): updating the implementation of the theme switch button (#14014)

Browse Source 
* chore(docs): updating the implementation of the theme switch button

* chore(docs): updating the implementation of the theme switch button

* chore(docs): updating the implementation of the theme switch button
This commit is contained in:
zepeng 2023-08-22 16:40:26 +08:00 committed by GitHub
parent 37f40dc9cc
commit bb2cf0bfe9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 37 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
docs/.vitepress/vitepress/components/common/vp-switch.vue
View File

@ -1,15 +0,0 @@
<script setup lang="ts">
// for now el-switch does not support customized icon in the dot
// we will implement a simple version of el-switch then update the switch
// component for this feature
</script>
<template>
<button class="switch" role="switch">
<div class="switch__action">
<div class="switch__icon">
<slot />
</div>
</div>
</button>
</template>

73
docs/.vitepress/vitepress/components/common/vp-theme-toggler.vue
View File

@ -1,50 +1,47 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import { isDark } from '../../composables/dark'
import DarkIcon from '../icons/dark.vue'
import LightIcon from '../icons/light.vue'
import VPSwitch from './vp-switch.vue'
const darkMode = ref(isDark.value)
watch(
() => isDark.value,
(val) => {
darkMode.value = val
}
)
</script>
<template>
<VPSwitch>
<ElIcon :size="13">
<DarkIcon class="dark-icon" />
<LightIcon class="light-icon" />
</ElIcon>
</VPSwitch>
<div>
<ClientOnly>
<el-switch
v-model="darkMode"
:active-action-icon="DarkIcon"
:inactive-action-icon="LightIcon"
/>
</ClientOnly>
</div>
</template>
<style lang="scss" scoped>
.el-icon {
cursor: pointer;
}
.dark-icon,
.light-icon {
transition: color var(--el-transition-duration),
opacity var(--el-transition-duration);
}
.light-icon {
opacity: 1;
position: absolute;
top: 0;
left: 0;
}
.dark-icon {
opacity: 0;
position: absolute;
top: 0;
left: 0;
}
@at-root .dark {
.dark-icon {
opacity: 1;
}
.light-icon {
opacity: 0;
:deep(.el-switch__core) {
--el-switch-on-color: var(--bg-color-mute);
--el-switch-off-color: var(--bg-color-mute);
--el-switch-border-color: var(--border-color);
.el-switch__action {
width: 14px;
height: 14px;
}
}
:deep(.dark-icon) {
border-radius: 50%;
color: #cfd3dc;
background-color: #141414;
}
:deep(.light-icon) {
color: #606266;
}
</style>

2
docs/.vitepress/vitepress/components/icons/dark.vue
View File

@ -1,5 +1,5 @@
<template>
<svg viewBox="0 0 24 24">
<svg viewBox="0 0 24 24" class="dark-icon">
<path
d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
fill="currentColor"

2
docs/.vitepress/vitepress/components/icons/light.vue
View File

@ -1,5 +1,5 @@
<template>
<svg viewBox="0 0 24 24">
<svg viewBox="0 0 24 24" class="light-icon">
<path
d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
fill="currentColor"

1
docs/components.d.ts vendored
View File

@ -103,7 +103,6 @@ declare module '@vue/runtime-core' {
VpSponsors: typeof import('./.vitepress/vitepress/components/vp-sponsors.vue')['default']
VpSponsorSmall: typeof import('./.vitepress/vitepress/components/vp-sponsor-small.vue')['default']
VpSubnav: typeof import('./.vitepress/vitepress/components/vp-subnav.vue')['default']
VpSwitch: typeof import('./.vitepress/vitepress/components/common/vp-switch.vue')['default']
VpTableOfContent: typeof import('./.vitepress/vitepress/components/doc-content/vp-table-of-content.vue')['default']
VpThemeToggler: typeof import('./.vitepress/vitepress/components/navbar/vp-theme-toggler.vue')['default']
VpTranslation: typeof import('./.vitepress/vitepress/components/navbar/vp-translation.vue')['default']