mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-15 04:42:23 +08:00
Merge branch 'master' of https://github.com/07akioni/naive-design into 07akioni
This commit is contained in:
07akioni
commit
d4d735bd9b
@ -1,251 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Button / n-button
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-button size="small">
|
||||
small size
|
||||
</n-button>
|
||||
<n-button>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button size="large">
|
||||
large size
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea><n-button size="small">
|
||||
small size
|
||||
</n-button>
|
||||
<n-button>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button size="large">
|
||||
large size
|
||||
</n-button></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Disabled
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-button
|
||||
size="small"
|
||||
disabled
|
||||
>
|
||||
small size
|
||||
</n-button>
|
||||
<n-button disabled>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button
|
||||
size="large"
|
||||
disabled
|
||||
>
|
||||
large size
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea><n-button size="small" disabled>
|
||||
small size
|
||||
</n-button>
|
||||
<n-button disabled>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button size="large" disabled>
|
||||
large size
|
||||
</n-button></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Button Type
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-button
|
||||
size="small"
|
||||
type="primary"
|
||||
auto-text-color
|
||||
>
|
||||
small size
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
auto-text-color
|
||||
>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button
|
||||
size="large"
|
||||
type="primary"
|
||||
auto-text-color
|
||||
>
|
||||
large size
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea>
|
||||
/**
|
||||
* Note: auto-text-color will set button of type="primary"'s color as its first
|
||||
* background-colored parent's background-color
|
||||
* If auto-text-color is not set, its color will be black
|
||||
*/
|
||||
<n-button
|
||||
size="small"
|
||||
type="primary"
|
||||
auto-text-color
|
||||
>
|
||||
small size
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
auto-text-color
|
||||
>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button
|
||||
size="large"
|
||||
type="primary"
|
||||
auto-text-color
|
||||
>
|
||||
large size
|
||||
</n-button></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Icon Button
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-button
|
||||
round
|
||||
size="small"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
icon="md-save"
|
||||
icon-on-right
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
size="large"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea><n-button
|
||||
round
|
||||
size="small"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
size="large"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Simulate Transparent Text
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<div style="padding: 14px; background: white; margin-right: 14px; border-radius: 8px;">
|
||||
<div>
|
||||
<n-button
|
||||
type="primary"
|
||||
auto-text-color
|
||||
>
|
||||
with-auto-text-color
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding: 14px; background: white; border-radius: 8px;">
|
||||
<n-button type="primary">
|
||||
without-auto-text-color
|
||||
</n-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea><div style="padding: 14px; background: white; margin-right: 14px; border-radius: 8px;">
|
||||
<n-button
|
||||
type="primary"
|
||||
auto-text-color
|
||||
>
|
||||
with-auto-text-color
|
||||
</n-button>
|
||||
</div>
|
||||
<div style="padding: 14px; background: white; border-radius: 8px;">
|
||||
<n-button type="primary">
|
||||
without-auto-text-color
|
||||
</n-button>
|
||||
</div></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Handle Click
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-button @click="handleClick">
|
||||
Click Me
|
||||
</n-button>
|
||||
</div>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea>
|
||||
<n-button @click="handleClick">Click Me</n-button><script>
|
||||
export default {
|
||||
methods: {
|
||||
handleClick () {
|
||||
alert('handleClick')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import docCodeEditorMixin from './docCodeEditorMixin'
|
||||
export default {
|
||||
mixins: [docCodeEditorMixin],
|
||||
methods: {
|
||||
handleClick () {
|
||||
alert('handleClick')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
51
demo/components/buttonDemo/basicUsage.demo.vue
Normal file
51
demo/components/buttonDemo/basicUsage.demo.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<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-button size="small">
|
||||
small size
|
||||
</n-button>
|
||||
<n-button>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button size="large">
|
||||
large size
|
||||
</n-button>
|
||||
<n-button
|
||||
size="small"
|
||||
round
|
||||
>
|
||||
small size
|
||||
</n-button>
|
||||
<n-button round>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button
|
||||
size="large"
|
||||
round
|
||||
>
|
||||
large size
|
||||
</n-button>
|
||||
<!--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>
|
||||
62
demo/components/buttonDemo/disabled.demo.vue
Normal file
62
demo/components/buttonDemo/disabled.demo.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Disabled
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-button
|
||||
size="small"
|
||||
disabled
|
||||
>
|
||||
small size
|
||||
</n-button>
|
||||
<n-button disabled>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button
|
||||
size="large"
|
||||
disabled
|
||||
>
|
||||
large size
|
||||
</n-button>
|
||||
<n-button
|
||||
size="small"
|
||||
disabled
|
||||
type="primary"
|
||||
>
|
||||
small size
|
||||
</n-button>
|
||||
<n-button
|
||||
disabled
|
||||
type="primary"
|
||||
>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button
|
||||
size="large"
|
||||
disabled
|
||||
type="primary"
|
||||
>
|
||||
large size
|
||||
</n-button>
|
||||
<!--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>
|
||||
35
demo/components/buttonDemo/events.demo.vue
Normal file
35
demo/components/buttonDemo/events.demo.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Events
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-button @click="handleClick">
|
||||
Click Me
|
||||
</n-button>
|
||||
<!--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 {
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
this.$NMessage.info('Button Clicked')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
65
demo/components/buttonDemo/icon.demo.vue
Normal file
65
demo/components/buttonDemo/icon.demo.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Icon
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-button
|
||||
round
|
||||
size="small"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
round
|
||||
icon="md-save"
|
||||
icon-position="right"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
size="large"
|
||||
icon="md-save"
|
||||
round
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
size="small"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
icon="md-save"
|
||||
icon-position="right"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<n-button
|
||||
size="large"
|
||||
icon="md-save"
|
||||
>
|
||||
Save as Template
|
||||
</n-button>
|
||||
<!--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>
|
||||
47
demo/components/buttonDemo/index.vue
Normal file
47
demo/components/buttonDemo/index.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Button / n-button
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<basic-usage />
|
||||
<disabled />
|
||||
<type />
|
||||
<icon />
|
||||
<events />
|
||||
<loading />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import loading from './loading.demo.vue'
|
||||
import basicUsage from './basicUsage.demo.vue'
|
||||
import disabled from './disabled.demo.vue'
|
||||
import type from './type.demo.vue'
|
||||
import icon from './icon.demo.vue'
|
||||
import events from './events.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
loading,
|
||||
basicUsage,
|
||||
disabled,
|
||||
type,
|
||||
icon,
|
||||
events
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
53
demo/components/buttonDemo/loading.demo.vue
Normal file
53
demo/components/buttonDemo/loading.demo.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Loading
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-button
|
||||
:loading="loading"
|
||||
@click="loading = !loading"
|
||||
>
|
||||
Loading
|
||||
</n-button>
|
||||
<n-button
|
||||
:loading="loading"
|
||||
icon-position="right"
|
||||
@click="loading = !loading"
|
||||
>
|
||||
Loading
|
||||
</n-button>
|
||||
<n-button
|
||||
:loading="loading"
|
||||
size="small"
|
||||
@click="loading = !loading"
|
||||
>
|
||||
Loading
|
||||
</n-button>
|
||||
<n-button
|
||||
:loading="loading"
|
||||
size="large"
|
||||
@click="loading = !loading"
|
||||
>
|
||||
Loading
|
||||
</n-button>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
loading: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
44
demo/components/buttonDemo/type.demo.vue
Normal file
44
demo/components/buttonDemo/type.demo.vue
Normal file
@ -0,0 +1,44 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Type
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-button
|
||||
size="small"
|
||||
type="primary"
|
||||
>
|
||||
small size
|
||||
</n-button>
|
||||
<n-button
|
||||
type="primary"
|
||||
>
|
||||
regular size
|
||||
</n-button>
|
||||
<n-button
|
||||
size="large"
|
||||
type="primary"
|
||||
>
|
||||
large size
|
||||
</n-button>
|
||||
<!--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>
|
||||
@ -8,6 +8,9 @@
|
||||
cy="50"
|
||||
r="20"
|
||||
fill="none"
|
||||
:style="{
|
||||
strokeWidth
|
||||
}"
|
||||
class="n-base-loading-circular-path"
|
||||
/></svg>
|
||||
</div>
|
||||
@ -17,6 +20,13 @@
|
||||
export default {
|
||||
name: 'NBaseLoading',
|
||||
props: {
|
||||
strokeWidth: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log(this.strokeWidth)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -2,31 +2,42 @@
|
||||
<div
|
||||
class="n-button"
|
||||
:class="{
|
||||
'is-round': round,
|
||||
[`is-${type}`]: true,
|
||||
'n-button--round': round,
|
||||
[`n-button--${type}-type`]: true,
|
||||
[`n-button--${size}-size`]: true,
|
||||
'n-button--disabled': disabled
|
||||
'n-button--disabled': disabled,
|
||||
'n-button--loading': loading
|
||||
}"
|
||||
@click="handleClick"
|
||||
>
|
||||
<div
|
||||
v-if="hasIcon && !iconOnRight"
|
||||
class="n-button__icon"
|
||||
:class="{'n-button__icon--slot': $slots.icon }"
|
||||
<transition
|
||||
name="n-fade-in-width-expand"
|
||||
appear
|
||||
>
|
||||
<n-icon
|
||||
v-if="icon"
|
||||
:type="icon"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="n-icon-slot"
|
||||
v-if="(hasIcon || loading) && !iconOnRight"
|
||||
class="n-button__icon"
|
||||
:class="{'n-button__icon--slot': $slots.icon }"
|
||||
>
|
||||
<slot
|
||||
name="icon"
|
||||
<n-spin
|
||||
v-if="loading"
|
||||
:size="null"
|
||||
:stroke-width="4"
|
||||
/>
|
||||
<n-icon
|
||||
v-else-if="icon"
|
||||
:type="icon"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="n-icon-slot"
|
||||
>
|
||||
<slot
|
||||
name="icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
<div
|
||||
class="n-button__content"
|
||||
:class="{
|
||||
@ -36,47 +47,63 @@
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
<div
|
||||
v-if="hasIcon && iconOnRight"
|
||||
class="n-button__icon n-button__icon--right"
|
||||
:class="{'n-button__icon--slot': $slots.icon }"
|
||||
<transition
|
||||
name="n-fade-in-width-expand"
|
||||
appear
|
||||
>
|
||||
<n-icon
|
||||
v-if="icon"
|
||||
:type="icon"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="n-icon-slot"
|
||||
v-if="(loading || hasIcon) && iconOnRight"
|
||||
class="n-button__icon n-button__icon--right"
|
||||
:class="{'n-button__icon--slot': $slots.icon }"
|
||||
>
|
||||
<slot
|
||||
name="icon"
|
||||
<n-spin
|
||||
v-if="loading"
|
||||
:size="null"
|
||||
:stroke-width="4"
|
||||
/>
|
||||
<n-icon
|
||||
v-else-if="icon"
|
||||
:type="icon"
|
||||
/>
|
||||
<div
|
||||
v-else
|
||||
class="n-icon-slot"
|
||||
>
|
||||
<slot
|
||||
name="icon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NIcon from '../../Icon/index'
|
||||
import NIcon from '../../Icon'
|
||||
import NSpin from '../../Spin'
|
||||
import texttransparentable from '../../../mixins/texttransparentable'
|
||||
|
||||
export default {
|
||||
name: 'NButton',
|
||||
components: {
|
||||
NIcon
|
||||
NIcon,
|
||||
NSpin
|
||||
},
|
||||
mixins: [
|
||||
texttransparentable
|
||||
],
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
default: 'medium'
|
||||
},
|
||||
round: {
|
||||
type: Boolean,
|
||||
@ -94,9 +121,11 @@ export default {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
iconOnRight: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
iconPosition: {
|
||||
default: null,
|
||||
validator (iconPosition) {
|
||||
return ['left', 'right'].includes(iconPosition)
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -107,6 +136,9 @@ export default {
|
||||
computed: {
|
||||
hasIcon () {
|
||||
return this.icon || this.$slots.icon
|
||||
},
|
||||
iconOnRight () {
|
||||
return this.iconPosition === 'right'
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
<n-base-loading
|
||||
v-if="spinning"
|
||||
class="n-spin"
|
||||
:stroke-width="strokeWidth"
|
||||
:class="{
|
||||
[`n-spin--${size}-size`]: true
|
||||
}"
|
||||
@ -24,8 +25,9 @@
|
||||
<n-base-loading
|
||||
v-else
|
||||
class="n-spin"
|
||||
:stroke-width="strokeWidth"
|
||||
:class="{
|
||||
[`n-spin--${size}-size`]: true
|
||||
[`n-spin--${size}-size`]: size
|
||||
}"
|
||||
/>
|
||||
</template>
|
||||
@ -46,6 +48,10 @@ export default {
|
||||
spinning: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
strokeWidth: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
@ -6,160 +6,181 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: inset 0 0 0 1.2px $button-default-border-color;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
.n-button__icon {
|
||||
margin-right: 2px;
|
||||
&.n-button__icon--right {
|
||||
vertical-align: baseline;
|
||||
border-radius: $button-border-radius;
|
||||
cursor: pointer;
|
||||
transition: background-color .15s $default-cubic-bezier, opacity .3s $default-cubic-bezier;
|
||||
@include e(icon) {
|
||||
@include fade-in-width-expand-transition();
|
||||
margin-right: 6px;
|
||||
@include m(right) {
|
||||
margin-right: 0px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
.n-button__content {
|
||||
@include b(content) {
|
||||
white-space: nowrap;
|
||||
}
|
||||
border-radius: $button-border-radius;
|
||||
&.n-button--disabled {
|
||||
@include m(disabled) {
|
||||
cursor: not-allowed;
|
||||
opacity: .43;
|
||||
opacity: .4;
|
||||
}
|
||||
&.n-button--tiny-size {
|
||||
@include m(loading) {
|
||||
cursor: default;
|
||||
opacity: .6;
|
||||
}
|
||||
@include m(tiny-size) {
|
||||
font-size: $button-tiny-font-size;
|
||||
height: $tiny-height;
|
||||
padding: 0 14px;
|
||||
&.is-round {
|
||||
padding: 0 6px;
|
||||
@include m(round) {
|
||||
padding: 0 14px;
|
||||
border-radius: $tiny-height / 2;
|
||||
}
|
||||
.n-button__content {
|
||||
@include e(content) {
|
||||
line-height: $tiny-height;
|
||||
}
|
||||
.n-button__icon {
|
||||
@include e(icon) {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
max-width: 16px;
|
||||
.n-icon {
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.n-button__icon--slot {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
line-height: 14px;
|
||||
.n-icon-slot {
|
||||
@include m(slot) {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
.n-icon-slot {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-button--small-size {
|
||||
@include m(small-size) {
|
||||
font-size: $button-small-font-size;
|
||||
height: $small-height;
|
||||
padding: 0 18px;
|
||||
&.is-round {
|
||||
padding: 0 10px;
|
||||
@include m(round) {
|
||||
border-radius: $small-height / 2;
|
||||
padding: 0 18px;
|
||||
}
|
||||
.n-button__content {
|
||||
@include e(content) {
|
||||
line-height: $small-height;
|
||||
}
|
||||
.n-button__icon {
|
||||
@include e(icon) {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
max-width: 16px;
|
||||
.n-icon {
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
}
|
||||
@include m(slot) {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
line-height: 16px;
|
||||
.n-icon-slot {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(medium-size) {
|
||||
font-size: $button-default-font-size;
|
||||
height: $default-height;
|
||||
padding: 0 14px;
|
||||
@include m(round) {
|
||||
padding: 0 22px;
|
||||
border-radius: $default-height / 2;
|
||||
}
|
||||
@include e(content) {
|
||||
line-height: $default-height;
|
||||
}
|
||||
@include e(icon) {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
max-width: 18px;
|
||||
.n-icon {
|
||||
font-size: 18px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.n-button__icon--slot {
|
||||
height: 16px;
|
||||
line-height: 16px;
|
||||
width: 16px;
|
||||
.n-icon-slot {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-button--default-size, &.n-button--medium-size {
|
||||
font-size: $button-default-font-size;
|
||||
height: $default-height;
|
||||
padding: 0 24px;
|
||||
&.is-round {
|
||||
border-radius: $default-height / 2;
|
||||
}
|
||||
.n-button__content {
|
||||
line-height: $default-height;
|
||||
}
|
||||
.n-button__icon {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
.n-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
.n-button__icon--slot {
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
width: 18px;
|
||||
.n-icon-slot {
|
||||
@include m(slot) {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
font-size: 18px;
|
||||
line-height: 18px;
|
||||
.n-icon-slot {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-button--large-size {
|
||||
@include m(large-size) {
|
||||
font-size: $button-large-font-size;
|
||||
height: $large-height;
|
||||
padding: 0 24px;
|
||||
&.is-round {
|
||||
padding: 0 18px;
|
||||
@include m(round) {
|
||||
padding: 0 26px;
|
||||
border-radius: $large-height / 2;
|
||||
}
|
||||
.n-button__content {
|
||||
@include e(content) {
|
||||
line-height: $large-height;
|
||||
}
|
||||
.n-button__icon {
|
||||
@include e(icon) {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
max-width: 20px;
|
||||
.n-icon {
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.n-button__icon--slot {
|
||||
line-height: 18px;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
.n-icon-slot {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
font-size: 18px;
|
||||
@include m(slot) {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
line-height: 20px;
|
||||
.n-icon-slot {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&.is-default {
|
||||
@include m(default-type) {
|
||||
color: $button-default-text-color;
|
||||
background-color: $button-default-background-color;
|
||||
&:hover {
|
||||
background-color: $button-default-background-color--hover;
|
||||
}
|
||||
&:active {
|
||||
background-color: $button-default-background-color--active;
|
||||
&:not(.n-button--disabled) {
|
||||
&:hover {
|
||||
background-color: $button-default-background-color--hover;
|
||||
}
|
||||
&:active {
|
||||
background-color: $button-default-background-color--active;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-primary {
|
||||
|
||||
@include m(primary-type) {
|
||||
color: #1F263EFF;
|
||||
background-color: $button-primary-background-color;
|
||||
box-shadow: none;
|
||||
&:hover {
|
||||
background-color: $button-primary-background-color--hover;
|
||||
}
|
||||
&:active {
|
||||
background-color: $button-primary-background-color--active;
|
||||
&:not(.n-button--disabled) {
|
||||
&:hover {
|
||||
background-color: $button-primary-background-color--hover;
|
||||
}
|
||||
&:active {
|
||||
background-color: $button-primary-background-color--active;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -35,11 +35,10 @@ $input-icon-color: rgba(255,255,255,0.2);
|
||||
/**
|
||||
* n-button
|
||||
*/
|
||||
$button-margin: 0 12px 8px 0;
|
||||
$button-border-radius: 6px;
|
||||
$button-tiny-font-size: 12px;
|
||||
$button-small-font-size: 14px;
|
||||
$button-default-font-size: 16px;
|
||||
$button-default-font-size: 14px;
|
||||
$button-large-font-size: 16px;
|
||||
$button-default-text-color: $main-color;
|
||||
$button-default-border-color: $main-color;
|
||||
@ -285,4 +284,27 @@ $scrollbar-color--hover: rgba(255,255,255,0.3);
|
||||
transform: translateX(-120%);
|
||||
max-height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fade-in-width-expand-transition($block: "fade-in-width-expand", $duration: .2s, $delay: .1s) {
|
||||
&.#{$namespace}-#{$block}-leave-active {
|
||||
transition: opacity $duration $default-cubic-bezier, max-width $duration $default-cubic-bezier $delay;
|
||||
}
|
||||
&.#{$namespace}-#{$block}-enter-active {
|
||||
transition: opacity $duration $default-cubic-bezier $delay, max-width $duration $default-cubic-bezier;
|
||||
}
|
||||
&.#{$namespace}-#{$block}-enter-to {
|
||||
opacity: 1;
|
||||
}
|
||||
&.#{$namespace}-#{$block}-enter {
|
||||
max-width: 0!important;
|
||||
opacity: 0;
|
||||
}
|
||||
&.#{$namespace}-#{$block}-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
&.#{$namespace}-#{$block}-leave-to {
|
||||
max-width: 0!important;
|
||||
opacity: 0!important;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user