mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(switch): light theme

Browse Source
This commit is contained in:
07akioni 2019-09-29 19:07:16 +08:00
parent 9ab97bc30c
commit 7f1917a894
17 changed files with 161 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
demo/documentation/components/switch/enUS/basic.md Normal file
View File

@ -0,0 +1,19 @@
# Basic
```html
<n-switch
v-model="active"
/>
<n-switch
v-model="active"
disabled
/>
```
```js
export default {
data () {
return {
active: false
}
}
}
```

21
demo/documentation/components/switch/enUS/event.md Normal file
View File

@ -0,0 +1,21 @@
# Event
```html
<n-switch
v-model="active"
@change="handleChange"
/>
```
```js
export default {
data () {
return {
active: false
}
},
methods: {
handleChange (value) {
this.$NMessage.info(`Change Event: ${value}`)
}
}
}
```

5
demo/documentation/components/switch/enUS/index.md Normal file
View File

@ -0,0 +1,5 @@
# Switch
```demo
basic
event
```

0
demo/documentation/components/switch/index.entry Normal file
View File

0
demo/documentation/components/switch/zhCN/index.md Normal file
View File

35
demo/documentation/components/switchDemo/basicUsage.demo.vue
View File

@ -1,35 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Basic Usage
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-switch
v-model="isActive"
/>
<n-switch
v-model="isActive"
disabled
/>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">active: {{ isActive }}</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
isActive: false
}
}
}
</script>

37
demo/documentation/components/switchDemo/changeEvent.demo.vue
View File

@ -1,37 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Change Event
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-switch
v-model="isActive"
@change="handleChange"
/>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">active: {{ isActive }}</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
isActive: false
}
},
methods: {
handleChange (value) {
this.$NMessage.info(value)
}
}
}
</script>

35
demo/documentation/components/switchDemo/index.vue
View File

@ -1,35 +0,0 @@
<template>
<div
ref="doc"
class="n-doc"
>
<div class="n-doc-header">
<n-gradient-text :font-size="20">
Switch / n-switch
</n-gradient-text>
</div>
<div class="n-doc-body">
<basic-usage />
<change-event />
</div>
</div>
</template>
<script>
import basicUsage from './basicUsage.demo.vue'
import changeEvent from './changeEvent.demo.vue'
export default {
components: {
basicUsage,
changeEvent
},
data () {
return {
}
},
methods: {
}
}
</script>

2
demo/init.js
View File

@ -15,7 +15,7 @@ import gradientTextDemo from './documentation/components/gradientTextDemo'
import iconDemo from './documentation/components/iconDemo'
import checkboxDemo from './documentation/components/checkboxDemo'
import buttonDemo from './documentation/components/buttonDemo'
import switchDemo from './documentation/components/switchDemo'
import switchDemo from './documentation/components/switch'
import tableDemo from './documentation/components/tableDemo'
import inputDemo from './documentation/components/inputDemo'
import selectDemo from './documentation/components/selectDemo'

9
demo/utils/ComponentDemo.vue
View File

@ -26,6 +26,7 @@
:delay="300"
:placement="'top'"
:arrow="true"
:controller="controller"
>
<template v-slot:activator>
<n-button
@ -68,12 +69,18 @@ export default {
return {
showCode: false,
lightThemeCSSRef: null,
defaultThemeCSSRef: null
defaultThemeCSSRef: null,
controller: {}
}
},
watch: {
synthesizedTheme (value) {
},
showCode () {
this.$nextTick().then(() => {
this.controller.updatePosition()
})
}
},
mounted () {

7
packages/common/Switch/src/main.vue
View File

@ -1,6 +1,9 @@
<template>
<div
class="n-switch"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
}"
@click="handleClick"
>
<div
@ -12,10 +15,12 @@
<script>
import Emitter from '../../../mixins/emitter'
import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
export default {
name: 'NSwitch',
mixins: [ Emitter ],
mixins: [ withapp, themeable, Emitter ],
inject: {
formItem: {
default: null

4
packages/common/Tooltip/src/main.vue
View File

@ -55,6 +55,10 @@ export default {
maxWidth: {
type: Number,
default: null
},
controller: {
type: Object,
default: null
}
},
render (h, context) {

117
styles/Switch.scss
View File

@ -1,62 +1,79 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include b(switch) {
display: inline-block;
@include e(rail) {
cursor: pointer;
position: relative;
height: 14px;
width: 30px;
border-radius: 7px;
background-color: rgba(148,151,155,0.4);
margin: 3px;
transition: background-color .2s $default-cubic-bezier;
&::before, &::after {
cursor: inherit;
content: "";
position: absolute;
height: 20px;
width: 24px;
max-width: 20px;
border-radius: 10px;
top: -3px;
left: -3px;
box-shadow:0px 2px 4px 0px rgba(0,0,0,0.4);
transition: left .2s $default-cubic-bezier, opacity .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier;
@include themes-mixin{
@include b(switch) {
@include once {
display: inline-block;
}
@include not-m(disabled) {
&:active::before, &:active::after {
max-width: 24px;
}
@include m(active) {
&:active::before, &:active::after {
left: 9px;
@include e(rail) {
@include once {
cursor: pointer;
position: relative;
height: 14px;
width: 30px;
border-radius: 7px;
margin: 3px;
transition: background-color .2s $default-cubic-bezier;
&::before, &::after {
box-sizing: border-box;
cursor: inherit;
content: "";
position: absolute;
height: 20px;
width: 24px;
max-width: 20px;
border-radius: 10px;
top: -3px;
left: -3px;
// transition: left .2s $default-cubic-bezier, opacity .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier;
}
&::before {
opacity: 1;
}
&::after {
opacity: 0;
}
@include not-m(disabled) {
&:active::before, &:active::after {
max-width: 24px;
}
@include m(active) {
&:active::before, &:active::after {
left: 9px;
}
}
}
@include m(active) {
&::before {
left: 13px;
opacity: 1;
}
&::after {
left: 13px;
opacity: 1;
}
}
}
}
&::before {
background-image: linear-gradient(52deg,rgba(148,151,155,1) 0%,rgba(148,151,155,1) 100%);
opacity: 1;
}
&::after {
background-image: linear-gradient(52deg,rgba(120,205,104,1) 0%,rgba(20,166,165,1) 100%);
opacity: 0;
}
@include m(active) {
background-color: rgba(97, 196, 118, .27);
&::before, &::after {
box-shadow: $--switch-switcher-box-shadow;
transition: $--switch-switcher-transition;
// border: $--switch-switcher-border;
}
background-color: map-get($map: $--switch-rail-background-color, $key: 'inactive');
&::before {
left: 13px;
opacity: 0;
background-image: map-get($map: $--switch-switcher-color, $key: 'inactive');
}
&::after {
left: 13px;
opacity: 1;
background-image: map-get($map: $--switch-switcher-color, $key: 'active');
}
@include m(active) {
background-color: map-get($map: $--switch-rail-background-color, $key: 'active');
}
@include m(disabled) {
cursor: not-allowed;
opacity: .5;
}
}
@include m(disabled) {
cursor: not-allowed;
opacity: .5;
}
}
}
}

13
styles/themes/dark/components/Switch.scss Normal file
View File

@ -0,0 +1,13 @@
@mixin setup-dark-switch {
$--switch-rail-background-color: (
"inactive": rgba(148,151,155,0.4),
"active": change-color($--n-primary-color, $alpha: .25)
)!global;
$--switch-switcher-color: (
"inactive": linear-gradient(52deg,rgba(148,151,155,1) 0%,rgba(148,151,155,1) 100%),
"active": linear-gradient(52deg,rgba(120,205,104,1) 0%,rgba(20,166,165,1) 100%)
) !global;
$--switch-switcher-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.4) !global;
$--switch-switcher-border: 1px solid transparent !global;
$--switch-switcher-transition: (left .2s $default-cubic-bezier, opacity .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier) !global;
}

2
styles/themes/dark/index.scss
View File

@ -10,6 +10,7 @@
@import "components/Popover.scss";
@import "components/Tooltip.scss";
@import "components/Confirm.scss";
@import "components/Switch.scss";
@mixin setup-dark-theme () {
@include setup-dark-colors();
@ -47,4 +48,5 @@
@include setup-dark-popover;
@include setup-dark-tooltip;
@include setup-dark-confirm;
@include setup-dark-switch;
}

13
styles/themes/light/components/Switch.scss Normal file
View File

@ -0,0 +1,13 @@
@mixin setup-light-switch {
$--switch-rail-background-color:(
"inactive": $--n-divider-color,
"active": $--n-primary-color
) !global;
$--switch-switcher-color: (
"inactive": linear-gradient(52deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%),
"active": linear-gradient(52deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%),
) !global;
$--switch-switcher-box-shadow: (0px 1px 4px 0px rgba(0,0,0,0.35), inset 0px 0px 1px 0px rgba(0,0,0,0.05)) !global;
$--switch-switcher-border: 1px solid $--n-divider-color !global;
$--switch-switcher-transition: (left .2s $default-cubic-bezier, max-width .2s $default-cubic-bezier) !global;
}

2
styles/themes/light/index.scss
View File

@ -10,6 +10,7 @@
@import "components/Popover.scss";
@import "components/Tooltip.scss";
@import "components/Confirm.scss";
@import "components/Switch.scss";
@mixin setup-light-theme () {
@include setup-light-colors();
@ -43,4 +44,5 @@
@include setup-light-popover;
@include setup-light-tooltip;
@include setup-light-confirm;
@include setup-light-switch;
}