mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
chore(progress): get off work checkpoint, for line, circle progress
This commit is contained in:
07akioni
parent
5114908c6d
commit
77385c63df
63
demo/components/progressDemo/circle.demo.vue
Normal file
63
demo/components/progressDemo/circle.demo.vue
Normal file
@ -0,0 +1,63 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Circle
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-progress
|
||||
type="circle"
|
||||
:percentage="percentage"
|
||||
/>
|
||||
<n-progress
|
||||
type="circle"
|
||||
status="success"
|
||||
:percentage="percentage"
|
||||
/>
|
||||
<n-progress
|
||||
type="circle"
|
||||
status="warning"
|
||||
:percentage="percentage"
|
||||
/>
|
||||
<n-progress
|
||||
type="circle"
|
||||
status="error"
|
||||
:percentage="percentage"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<div class="n-doc-section__inspect">
|
||||
<n-button @click="minus">
|
||||
minus
|
||||
</n-button><n-button @click="add">
|
||||
add
|
||||
</n-button>
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
percentage: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.percentage += 10
|
||||
if (this.percentage > 100) this.percentage = 0
|
||||
},
|
||||
minus () {
|
||||
this.percentage -= 10
|
||||
if (this.percentage < 0) this.percentage = 100
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -5,21 +5,24 @@
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
scaffold
|
||||
Progress / n-progress
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<scaffold />
|
||||
<circle-demo />
|
||||
<line-demo />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scaffold from './scaffold.demo.vue'
|
||||
import circleDemo from './circle.demo.vue'
|
||||
import lineDemo from './line.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
scaffold
|
||||
circleDemo,
|
||||
lineDemo
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
132
demo/components/progressDemo/line.demo.vue
Normal file
132
demo/components/progressDemo/line.demo.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Line
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: wrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-progress
|
||||
type="line"
|
||||
:percentage="percentage"
|
||||
:show-indicator="false"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
:percentage="percentage"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
:percentage="percentage"
|
||||
:indicator-position="'inside'"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
:percentage="percentage"
|
||||
:indicator-position="'inside-label'"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
status="success"
|
||||
:percentage="percentage"
|
||||
:show-indicator="false"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
status="success"
|
||||
:percentage="percentage"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
status="success"
|
||||
:percentage="percentage"
|
||||
:indicator-position="'inside'"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
status="success"
|
||||
:percentage="percentage"
|
||||
:indicator-position="'inside-label'"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
status="warning"
|
||||
:percentage="percentage"
|
||||
:show-indicator="false"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
status="warning"
|
||||
:percentage="percentage"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
status="warning"
|
||||
:percentage="percentage"
|
||||
:indicator-position="'inside'"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
status="warning"
|
||||
:percentage="percentage"
|
||||
:indicator-position="'inside-label'"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
status="error"
|
||||
:percentage="percentage"
|
||||
:show-indicator="false"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
status="error"
|
||||
:percentage="percentage"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
status="error"
|
||||
:percentage="percentage"
|
||||
:indicator-position="'inside'"
|
||||
/>
|
||||
<n-progress
|
||||
type="line"
|
||||
status="error"
|
||||
:percentage="percentage"
|
||||
:indicator-position="'inside-label'"
|
||||
/>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<div class="n-doc-section__inspect">
|
||||
<n-button @click="minus">
|
||||
minus
|
||||
</n-button><n-button @click="add">
|
||||
add
|
||||
</n-button>
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
percentage: 50
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.percentage += 10
|
||||
if (this.percentage > 100) this.percentage = 0
|
||||
},
|
||||
minus () {
|
||||
this.percentage -= 10
|
||||
if (this.percentage < 0) this.percentage = 100
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,31 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Scaffold
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-progress
|
||||
type="circle"
|
||||
:percentage="60"
|
||||
/>
|
||||
<!--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>
|
||||
@ -1,49 +1,224 @@
|
||||
<template>
|
||||
<div
|
||||
:style="{
|
||||
width: width + 'px',
|
||||
height: width + 'px'
|
||||
class="n-progress"
|
||||
:class="{
|
||||
[`n-progress--${status}`]: status,
|
||||
[`n-progress--${type}`]: type
|
||||
}"
|
||||
>
|
||||
<svg viewBox="0 0 100 100">
|
||||
<g>
|
||||
<path
|
||||
d="
|
||||
m 50 3
|
||||
a 47 47 0 1 1 0 94
|
||||
a 47 47 0 1 1 0 -94
|
||||
"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke="white"
|
||||
fill="none"
|
||||
style="stroke-dasharray: 157, 1000; stroke-dashoffset: 0;"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
d="
|
||||
m 50 6
|
||||
a 44 44 0 1 1 0 88
|
||||
a 44 44 0 1 1 0 -88
|
||||
"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke="red"
|
||||
fill="none"
|
||||
style="stroke-dasharray: 120, 1000; stroke-dashoffset: 0;"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div
|
||||
v-if="type === 'circle'"
|
||||
class="n-progress-content"
|
||||
>
|
||||
<div
|
||||
class="n-progress-graph"
|
||||
>
|
||||
<div
|
||||
class="n-progress-graph__circle"
|
||||
>
|
||||
<svg viewBox="0 0 110 110">
|
||||
<g>
|
||||
<path
|
||||
class="n-progress-graph__circle-rail"
|
||||
d="m 55 5 a 50 50 0 1 1 0 100 a 50 50 0 1 1 0 -100"
|
||||
stroke-width="10"
|
||||
stroke-linecap="round"
|
||||
fill="none"
|
||||
style="stroke-dashoffset: 0;"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
class="n-progress-graph__circle-fill"
|
||||
d="m 55 5 a 50 50 0 1 1 0 100 a 50 50 0 1 1 0 -100"
|
||||
stroke-width="10"
|
||||
stroke-linecap="round"
|
||||
fill="none"
|
||||
:style="`stroke-dasharray: ${strokeDasharray}; stroke-dashoffset: 0;`"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showIndicator && indicatorPosition === 'outside'">
|
||||
<div
|
||||
v-if="status"
|
||||
class="n-progress-icon"
|
||||
>
|
||||
<n-icon :type="iconType" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="n-progress-text"
|
||||
>
|
||||
<span class="n-progress-text__percentage">{{ percentage }}</span>
|
||||
<span class="n-progress-text__unit">{{ unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-else-if="type === 'line'"
|
||||
class="n-progress-content"
|
||||
>
|
||||
<div class="n-progress-graph">
|
||||
<div
|
||||
ref="line"
|
||||
class="n-progress-graph__line"
|
||||
:class="{
|
||||
[`n-progress-graph__line--indicator-${indicatorPosition}`]: true
|
||||
}"
|
||||
>
|
||||
<div class="n-progress-graph__line-rail">
|
||||
<div
|
||||
class="n-progress-graph__line-fill"
|
||||
:style="{
|
||||
maxWidth: percentage + '%'
|
||||
}"
|
||||
>
|
||||
<div
|
||||
v-if="indicatorPosition === 'inside'"
|
||||
class="n-progress-graph__line-indicator"
|
||||
>
|
||||
{{ percentage + unit }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="indicatorPosition === 'inside-label'"
|
||||
ref="indicator"
|
||||
class="n-progress-graph__line-indicator"
|
||||
:style="indicatorPercentageIsCaculated ? {
|
||||
right: `${indicatorPercentage}%`
|
||||
} : {
|
||||
transition: 'none',
|
||||
right: `${indicatorPercentage}%`
|
||||
}"
|
||||
>
|
||||
{{ percentage + unit }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="showIndicator && indicatorPosition === 'outside'">
|
||||
<div
|
||||
v-if="status"
|
||||
class="n-progress-icon"
|
||||
>
|
||||
<n-icon :type="iconType" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="n-progress-text"
|
||||
>
|
||||
<span class="n-progress-text__percentage">{{ percentage }}</span>
|
||||
<span class="n-progress-text__unit">{{ unit }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NIcon from '../../Icon'
|
||||
|
||||
export default {
|
||||
name: 'NProgress',
|
||||
components: {
|
||||
NIcon
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
validator (type) {
|
||||
return ['line', 'circle', 'double-circle'].includes(type)
|
||||
},
|
||||
default: 'line'
|
||||
},
|
||||
status: {
|
||||
validator (status) {
|
||||
return ['success', 'error', 'warning'].includes(status)
|
||||
},
|
||||
default: null
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
percentage: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: '%'
|
||||
},
|
||||
showIndicator: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
indicatorPosition: {
|
||||
validator (indicatorPosition) {
|
||||
return ['inside', 'inside-label', 'outside'].includes(indicatorPosition)
|
||||
},
|
||||
default: 'outside'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
width: 126
|
||||
indicatorPercentage: 50,
|
||||
indicatorPercentageIsCaculated: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
strokeDasharray () {
|
||||
return `${Math.PI * this.percentage}, 500`
|
||||
},
|
||||
iconType () {
|
||||
if (this.type === 'circle') {
|
||||
if (this.status === 'success') {
|
||||
return 'md-checkmark'
|
||||
} else if (this.status === 'error') {
|
||||
return 'md-close'
|
||||
} else if (this.status === 'warning') {
|
||||
return 'md-alert'
|
||||
}
|
||||
} else if (this.type === 'line') {
|
||||
if (this.status === 'success') {
|
||||
return 'md-checkmark-circle'
|
||||
} else if (this.status === 'error') {
|
||||
return 'md-close-circle'
|
||||
} else if (this.status === 'warning') {
|
||||
return 'md-alert'
|
||||
}
|
||||
} return ''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
percentage (newPercentage) {
|
||||
if (this.indicatorPosition === 'inside-label') {
|
||||
this.$nextTick().then(() => {
|
||||
this.indicatorPercentage = this.calcIndicatorPercentage()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
if (this.indicatorPosition === 'inside-label') {
|
||||
this.$nextTick().then(() => {
|
||||
this.indicatorPercentage = this.calcIndicatorPercentage()
|
||||
this.$nextTick().then(() => {
|
||||
this.indicatorPercentageIsCaculated = true
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calcIndicatorPercentage () {
|
||||
const lineRect = this.$refs.line.getBoundingClientRect()
|
||||
const indicator = this.$refs.indicator.getBoundingClientRect()
|
||||
const quotient = indicator.width / lineRect.width
|
||||
let indicatorPercentage = 100 - this.percentage - quotient / 2 * 100
|
||||
indicatorPercentage = Math.min(indicatorPercentage, 100 - quotient * 100)
|
||||
indicatorPercentage = Math.max(indicatorPercentage, 0)
|
||||
return indicatorPercentage
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
183
styles/Progress.scss
Normal file
183
styles/Progress.scss
Normal file
@ -0,0 +1,183 @@
|
||||
@import "./mixins/mixins.scss";
|
||||
@import "./theme/default.scss";
|
||||
|
||||
.n-progress {
|
||||
color: rgba(98, 187, 252, 1);
|
||||
&.n-progress--line {
|
||||
width: 350px;
|
||||
.n-progress-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.n-progress-graph {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.n-progress-icon {
|
||||
width: 46px;
|
||||
padding-left: 14px;
|
||||
height: 24px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.n-progress-text {
|
||||
color: inherit;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
width: 60px;
|
||||
.n-progress-text__percentage {
|
||||
font-size: 18px;
|
||||
margin-left: 14px;
|
||||
}
|
||||
.n-progress-text__unit {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-progress--circle {
|
||||
width: 120px;
|
||||
.n-progress-text, .n-progress-icon {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
font-size: 36px;
|
||||
}
|
||||
.n-progress-text {
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
.n-progress-text__percentage {
|
||||
font-size: 28px;
|
||||
}
|
||||
.n-progress-text__unit {
|
||||
font-size: 24px;
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-progress--success{
|
||||
color: rgba(99, 226, 183, 1);
|
||||
.n-progress-graph {
|
||||
.n-progress-graph__circle {
|
||||
.n-progress-graph__circle-fill {
|
||||
stroke: rgba(99, 226, 183, 1);
|
||||
}
|
||||
}
|
||||
.n-progress-graph__line {
|
||||
.n-progress-graph__line-fill, .n-progress-graph__line-indicator {
|
||||
background-color: rgba(99, 226, 183, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-progress--error{
|
||||
color: rgba(255, 146, 164, 1);
|
||||
.n-progress-graph {
|
||||
.n-progress-graph__circle {
|
||||
.n-progress-graph__circle-fill {
|
||||
stroke: rgba(255, 146, 164, 1);
|
||||
}
|
||||
}
|
||||
.n-progress-graph__line {
|
||||
.n-progress-graph__line-fill, .n-progress-graph__line-indicator {
|
||||
background-color: rgba(255, 146, 164, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-progress--warning{
|
||||
color: rgba(255, 138, 0, 1);
|
||||
.n-progress-graph {
|
||||
.n-progress-graph__circle {
|
||||
.n-progress-graph__circle-fill {
|
||||
stroke: rgba(255, 138, 0, 1);
|
||||
}
|
||||
}
|
||||
.n-progress-graph__line {
|
||||
.n-progress-graph__line-fill, .n-progress-graph__line-indicator {
|
||||
background-color: rgba(255, 138, 0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.n-progress-content {
|
||||
position: relative;
|
||||
}
|
||||
.n-progress-graph {
|
||||
position: relative;
|
||||
.n-progress-graph__circle {
|
||||
vertical-align: bottom;
|
||||
.n-progress-graph__circle-rail {
|
||||
stroke: rgba(255, 255, 255, .3);
|
||||
}
|
||||
.n-progress-graph__circle-fill {
|
||||
transition: stroke-dasharray .3s $default-cubic-bezier;
|
||||
stroke: rgba(98, 187, 252, 1);
|
||||
}
|
||||
}
|
||||
.n-progress-graph__line {
|
||||
&.n-progress-graph__line--indicator-inside {
|
||||
.n-progress-graph__line-rail {
|
||||
height: 33px;
|
||||
border-radius: 16.5px;
|
||||
}
|
||||
.n-progress-graph__line-fill {
|
||||
height: 33px;
|
||||
border-radius: 16.5px;
|
||||
}
|
||||
.n-progress-graph__line-indicator {
|
||||
background-color: none;
|
||||
color: rgba(23, 29, 51, 1);
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
margin-left: 14px;
|
||||
margin-right: 14px;
|
||||
height: 33px;
|
||||
font-size: 18px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
&.n-progress-graph__line--indicator-inside-label {
|
||||
height: 33px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.n-progress-graph__line-rail {
|
||||
flex: 1;
|
||||
}
|
||||
.n-progress-graph__line-indicator {
|
||||
transition: right .2s $default-cubic-bezier;
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
padding: 0 10px;
|
||||
border-radius: 16.5px;
|
||||
position: absolute;
|
||||
color: rgba(23, 29, 51, 1);
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
.n-progress-graph__line-rail {
|
||||
overflow: hidden;
|
||||
height: 15px;
|
||||
background-color: rgba(255, 255, 255, .3);
|
||||
border-radius: 7.5px;
|
||||
}
|
||||
.n-progress-graph__line-fill {
|
||||
background-color: rgba(98, 187, 252, 1);
|
||||
border-radius: 7.5px;
|
||||
height: 15px;
|
||||
width: 100%;
|
||||
max-width: 0%;
|
||||
transition: max-width .2s $default-cubic-bezier;
|
||||
}
|
||||
.n-progress-graph__line-indicator {
|
||||
background-color: rgba(98, 187, 252, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -26,6 +26,7 @@
|
||||
@import './TimePicker.scss';
|
||||
@import './Scrollbar.scss';
|
||||
@import './Steps.scss';
|
||||
@import './Progress.scss';
|
||||
|
||||
@import "./NimbusServiceLayout.scss";
|
||||
@import "./Popover.scss";
|
||||
|
||||
Loading…
Reference in New Issue
Block a user