mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(service-layout): item background transition

Browse Source
This commit is contained in:
07akioni 2019-11-28 16:58:18 +08:00
parent 2a347269c0
commit 36e3a6784f
5 changed files with 34 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
demo/documentation/components/configConsumer/enUS/index.md
View File

@ -1,6 +1,7 @@
# Config Consumer
Config Consumer is built for get global config of Naive UI. It will help when you want to build a component which support themes or other mutable features.
Config Consumer is built for getting config (usually as global config) of Config Provider. It will be helpful when you want to build a component which supports themes or other mutable features.
## Demos
```demo
basic
theme-environment
```

25
demo/documentation/components/configConsumer/enUS/themeEnvironment.md Normal file
View File

@ -0,0 +1,25 @@
# Theme Environment
```html
<n-button @click="theme = 'dark'">Dark Theme</n-button>
<n-button @click="theme = 'light'">Light Theme</n-button>
<n-config-provider :theme="theme" :theme-environment="env">
<n-config-consumer>
<template v-slot="{ themeEnvironment }">
{{ themeEnvironment }}
</template>
</n-config-consumer>
</n-config-provider>
```
```js
export default {
data () {
return {
theme: 'light',
env: {
dark: 'Dark 666',
light: 'Light 666'
}
}
}
}
```

4
styles/NimbusServiceLayout.scss
View File

@ -136,14 +136,16 @@
}
&::before { // item background
content: "";
background-size: 300%;
background-image: $service-layout-item-background-image;
background-position: $--service-layout-item-background-position;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
transition: opacity 0.3s $default-cubic-bezier;
transition: opacity 0.3s $default-cubic-bezier, background-position .3s $default-cubic-bezier;
opacity: 0;
}
@include m(active) {

3
styles/themes/dark/components/NimbusServiceLayout.scss
View File

@ -5,6 +5,7 @@
$service-layout-color: $--n-secondary-text-color !global;
$service-layout-border-color: $--n-divider-color !global;
$service-layout-toggle-button-color: rgba(255, 255, 255, .3)!global;
$service-layout-item-background-image: linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%) !global;
$service-layout-item-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, .09) 60%, rgba(0, 0, 0, .09) 100%) !global;
$--service-kayout-item-active-color: $--primary-6 !global;
$--service-layout-item-background-position: 0% !global;
}

3
styles/themes/light/components/NimbusServiceLayout.scss
View File

@ -5,6 +5,7 @@
$service-layout-color: $--n-text-color !global ;
$service-layout-border-color: $--n-divider-color !global;
$service-layout-toggle-button-color: rgba(0, 0, 0, .15)!global;
$service-layout-item-background-image: linear-gradient(47deg, $--neutral-7, $--neutral-7) !global;
$service-layout-item-background-image: linear-gradient(90deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .03) 40%, rgba(0, 0, 0, .09) 60%, rgba(0, 0, 0, .09) 100%) !global;
$--service-kayout-item-active-color: $--primary-6 !global;
$--service-layout-item-background-position: 100% !global;
}