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

add theme to spin

Browse Source
This commit is contained in:
songwanli2025@163.com 2019-10-15 17:40:21 +08:00
parent f2dd5cd177
commit f58ff79872
17 changed files with 199 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/documentation/components/spinDemo/enUS/basic.md Normal file
View File

@ -0,0 +1,4 @@
# Basic
```html
<n-spin size="small" /> <n-spin size="medium" /> <n-spin size="large" />
```

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

@ -0,0 +1,5 @@
# Divider
```demo
basic
wrap
```

54
demo/documentation/components/spinDemo/enUS/wrap.md Normal file
View File

@ -0,0 +1,54 @@
# Wrap
```html
<div
>
<n-spin
style="display:inline-block"
size="in-small"
:spinning="spinning"
>
<n-button size="small">
Small Spin
</n-button>
</n-spin>
<n-spin
style="display:inline-block"
size="in-medium"
:spinning="spinning"
>
<n-button size="medium">
Medium Spin
</n-button>
</n-spin>
<n-spin
style="display:inline-block"
size="in-large"
:spinning="spinning"
>
<n-button size="large">
Large Spin
</n-button>
</n-spin>
<n-spin
style="display:inline-block"
:spinning="spinning"
>
<n-alert
title="Success Text"
type="success"
>
Leave it till tomorrow to unpack my case
</n-alert>
</n-spin>
</div>
<pre class="n-doc-section__inspect"><n-button @click="spinning = !spinning">spin</n-button></pre>
```
```js
export default {
data () {
return {
spinning: false
}
}
}
```

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

35
demo/documentation/components/spinDemo/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">
Spin / n-spin
</n-gradient-text>
</div>
<div class="n-doc-body">
<scaffold />
<wrap />
</div>
</div>
</template>
<script>
import scaffold from './scaffold.demo.vue'
import wrap from './wrap.demo.vue'
export default {
components: {
scaffold,
wrap
},
data () {
return {
}
},
methods: {
}
}
</script>

28
demo/documentation/components/spinDemo/scaffold.demo.vue
View File

@ -1,28 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
BasicUsage
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<n-spin size="small" /> <n-spin size="medium" /> <n-spin size="large" />
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">Inspect some value here</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

60
demo/documentation/components/spinDemo/wrap.demo.vue
View File

@ -1,60 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Wrap
</div>
<div
class="n-doc-section__view"
style="align-items: flex-start;"
>
<!--EXAMPLE_START-->
<n-spin
size="in-small"
:spinning="spinning"
>
<n-button size="small">
Small Spin
</n-button>
</n-spin>
<n-spin
size="in-medium"
:spinning="spinning"
>
<n-button size="medium">
Medium Spin
</n-button>
</n-spin>
<n-spin
size="in-large"
:spinning="spinning"
>
<n-button size="large">
Large Spin
</n-button>
</n-spin>
<n-spin :spinning="spinning">
<n-alert
title="Success Text"
type="success"
>
Leave it till tomorrow to unpack my case
</n-alert>
</n-spin>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect"><n-button @click="spinning = !spinning">spin</n-button></pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
spinning: false
}
}
}
</script>

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

86
packages/base/Loading/src/main.vue
View File

@ -1,5 +1,8 @@
<template>
<div class="n-base-loading">
<div
class="n-base-loading"
:class="{[`n-${theme}-theme`]: theme}"
>
<svg
viewBox="25 25 50 50"
class="n-base-loading-circular"
@ -17,9 +20,20 @@
</template>
<script>
import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
export default {
name: 'NBaseLoading',
mixins: [
withapp,
themeable
],
props: {
theme: {
type: String,
default: ''
},
strokeWidth: {
type: Number,
default: null
@ -32,42 +46,42 @@ export default {
</script>
<style lang="scss" scoped>
.n-base-loading {
line-height: 1;
}
// .n-base-loading {
// line-height: 1;
// }
.n-base-loading-circular {
height: 100%;
width: 100%;
animation: loading-rotate 2s linear infinite;
.n-base-loading-circular-path {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90,150;
stroke-dashoffset: 0;
stroke-width: 8;
stroke: #63E2B7;
stroke-linecap: round;
}
}
// .n-base-loading-circular {
// height: 100%;
// width: 100%;
// animation: loading-rotate 2s linear infinite;
// .n-base-loading-circular-path {
// animation: loading-dash 1.5s ease-in-out infinite;
// stroke-dasharray: 90,150;
// stroke-dashoffset: 0;
// stroke-width: 8;
// stroke: #63E2B7;
// stroke-linecap: round;
// }
// }
@keyframes loading-rotate {
to {
transform: rotate(1turn)
}
}
// @keyframes loading-rotate {
// to {
// transform: rotate(1turn)
// }
// }
@keyframes loading-dash {
0% {
stroke-dasharray: 1,200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 90,150;
stroke-dashoffset: -40px
}
to {
stroke-dasharray: 90,150;
stroke-dashoffset: -120px
}
}
// @keyframes loading-dash {
// 0% {
// stroke-dasharray: 1,200;
// stroke-dashoffset: 0
// }
// 50% {
// stroke-dasharray: 90,150;
// stroke-dashoffset: -40px
// }
// to {
// stroke-dasharray: 90,150;
// stroke-dashoffset: -120px
// }
// }
</style>

8
packages/common/Spin/src/main.vue
View File

@ -11,6 +11,7 @@
:class="{
[`n-spin--${size}-size`]: true
}"
:theme="synthesizedTheme"
/>
</transition>
<div
@ -29,17 +30,24 @@
:class="{
[`n-spin--${size}-size`]: size
}"
:theme="synthesizedTheme"
/>
</template>
<script>
import NBaseLoading from '../../../base/Loading'
import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
export default {
name: 'NSpin',
components: {
NBaseLoading
},
mixins: [
withapp,
themeable
],
props: {
size: {
type: [String, Number],

65
styles/Loading.scss Normal file
View File

@ -0,0 +1,65 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@keyframes loading-rotate {
to {
transform: rotate(1turn)
}
}
@keyframes loading-dash {
0% {
stroke-dasharray: 1,200;
stroke-dashoffset: 0
}
50% {
stroke-dasharray: 90,150;
stroke-dashoffset: -40px
}
to {
stroke-dasharray: 90,150;
stroke-dashoffset: -120px
}
}
@include themes-mixin {
@include b(base-loading) {
@include once {
line-height: 1;
}
@include b(base-loading-circular) {
@include once {
height: 100%;
width: 100%;
animation: loading-rotate 2s linear infinite;
}
@include b(base-loading-circular-path) {
stroke: $--loading-border-color;
@include once {
animation: loading-dash 1.5s ease-in-out infinite;
stroke-dasharray: 90,150;
stroke-dashoffset: 0;
stroke-width: 8;
stroke-linecap: round;
}
}
}
}
}
// .n-base-loading {
// line-height: 1;
// }
// .n-base-loading-circular {
// height: 100%;
// width: 100%;
// animation: loading-rotate 2s linear infinite;
// .n-base-loading-circular-path {
// animation: loading-dash 1.5s ease-in-out infinite;
// stroke-dasharray: 90,150;
// stroke-dashoffset: 0;
// stroke-width: 8;
// stroke: #63E2B7;
// stroke-linecap: round;
// }
// }

1
styles/index.scss
View File

@ -56,3 +56,4 @@
@import "./AdvancedTable.scss";
@import "./NimbusIcon.scss";
@import "./Confirm.scss";
@import "./Loading.scss"

3
styles/themes/dark/components/Loading.scss Normal file
View File

@ -0,0 +1,3 @@
@mixin setup-dark-loading {
$--loading-border-color: $--n-primary-color !global;
}

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

@ -3,6 +3,7 @@
@import "components/Divider.scss";
@import "components/NimbusServiceLayout.scss";
@import "components/Scrollbar.scss";
@import "components/Loading.scss";
@import "components/BaseSelectMenu.scss";
@import "components/BasePicker.scss";
@import "components/BaseCancelMark.scss";
@ -50,6 +51,7 @@
@include setup-dark-nimbus-service-layout;
@include setup-dark-divider;
@include setup-dark-scrollbar;
@include setup-dark-loading;
@include setup-dark-button;
@include setup-dark-base-select-menu;
@include setup-dark-base-picker;

3
styles/themes/light/components/Loading.scss Normal file
View File

@ -0,0 +1,3 @@
@mixin setup-light-loading {
$--loading-border-color: $--n-primary-color !global;
}

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

@ -3,6 +3,7 @@
@import "components/Divider.scss";
@import "components/NimbusServiceLayout.scss";
@import "components/Scrollbar.scss";
@import "components/Loading.scss";
@import "components/BaseSelectMenu.scss";
@import "components/BasePicker.scss";
@import "components/BaseCancelMark.scss";
@ -46,6 +47,7 @@
@include setup-light-nimbus-service-layout;
@include setup-light-divider;
@include setup-light-scrollbar;
@include setup-light-loading;
@include setup-light-button;
@include setup-light-base-select-menu;
@include setup-light-base-picker;