mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-27 05:00:48 +08:00
8.8 KiB
8.8 KiB
debug
List all buttons here for debug usage.
<n-config-consumer abstract>
<template v-slot="{ theme }">
<div
class="debug-zone"
:class="{
[`n-${theme}-theme`]: true
}"
>
<n-button
type="default"
round
>
<template v-slot:icon>
<md-save />
</template>
Default
</n-button>
<n-button
type="primary"
disabled
>
<template v-slot:icon>
<md-save />
</template>
Primary
</n-button>
<n-button
type="info"
icon-placement="right"
>
<template v-slot:icon>
<md-save />
</template>
Info
</n-button>
<n-button
type="warning"
>
<template v-slot:icon>
<md-save />
</template>
Warning
</n-button>
<n-button
type="success"
>
<template v-slot:icon>
<md-save />
</template>
Success
</n-button>
<n-button
type="error"
>
<template v-slot:icon>
<md-save />
</template>
Error
</n-button>
<n-button
type="default"
ghost
>
<template v-slot:icon>
<md-save />
</template>
Default
</n-button>
<n-button
type="primary"
ghost
round
>
<template v-slot:icon>
<md-save />
</template>
Primary
</n-button>
<n-button
type="info"
ghost
disabled
>
<template v-slot:icon>
<md-save />
</template>
Info
</n-button>
<n-button
type="warning"
ghost
icon-placement="right"
>
<template v-slot:icon>
<md-save />
</template>
Warning
</n-button>
<n-button
type="success"
ghost
>
<template v-slot:icon>
<md-save />
</template>
Success
</n-button>
<n-button
type="error"
ghost
>
<template v-slot:icon>
<md-save />
</template>
Error
</n-button>
<n-button
type="default"
loading
>
<template v-slot:icon>
<md-save />
</template>
Default
</n-button>
<n-button
type="primary"
loading
>
<template v-slot:icon>
<md-save />
</template>
Primary
</n-button>
<n-button
type="info"
loading
round
>
<template v-slot:icon>
<md-save />
</template>
Info
</n-button>
<n-button
type="warning"
loading
disabled
>
<template v-slot:icon>
<md-save />
</template>
Warning
</n-button>
<n-button
type="success"
loading
icon-placement="right"
>
<template v-slot:icon>
<md-save />
</template>
Success
</n-button>
<n-button
type="error"
loading
>
<template v-slot:icon>
<md-save />
</template>
Error
</n-button>
<n-button
type="default"
ghost
loading
>
<template v-slot:icon>
<md-save />
</template>
Default
</n-button>
<n-button
type="primary"
ghost
loading
>
<template v-slot:icon>
<md-save />
</template>
Primary
</n-button>
<n-button
type="info"
ghost
loading
>
<template v-slot:icon>
<md-save />
</template>
Info
</n-button>
<n-button
type="warning"
ghost
loading
round
>
<template v-slot:icon>
<md-save />
</template>
Warning
</n-button>
<n-button
type="success"
ghost
loading
disabled
>
<template v-slot:icon>
<md-save />
</template>
Success
</n-button>
<n-button
type="error"
ghost
loading
icon-placement="right"
>
<template v-slot:icon>
<md-save />
</template>
Error
</n-button>
<n-button
type="default"
round
block
>
<template v-slot:icon>
<md-save />
</template>
Default
</n-button>
<n-button
type="primary"
disabled
block
size="small"
>
<template v-slot:icon>
<md-save />
</template>
Primary
</n-button>
<n-button
type="info"
icon-placement="right"
block
size="large"
>
<template v-slot:icon>
<md-save />
</template>
Info
</n-button>
<n-button
type="warning"
block
ghost
>
<template v-slot:icon>
<md-save />
</template>
Warning
</n-button>
<n-button
type="success"
block
loading
>
<template v-slot:icon>
<md-save />
</template>
Success
</n-button>
<n-button
type="error"
block
>
<template v-slot:icon>
<md-save />
</template>
Error
</n-button>
<n-button
type="primary"
disabled
circle
size="small"
>
<template v-slot:icon>
<md-save />
</template>
Primary
</n-button>
<n-button
type="info"
icon-placement="right"
circle
size="large"
>
<template v-slot:icon>
<md-save />
</template>
Info
</n-button>
<n-button
type="warning"
circle
ghost
>
<template v-slot:icon>
<md-save />
</template>
Warning
</n-button>
<n-button
type="success"
circle
loading
>
<template v-slot:icon>
<md-save />
</template>
Success
</n-button>
<n-button
type="error"
circle
>
<template v-slot:icon>
<md-save />
</template>
Error
</n-button>
<n-button
type="error"
>
<template v-slot:icon>
<md-save />
</template>
Error
</n-button>
<n-button
type="error"
size="large"
>
<template v-slot:icon>
<md-save />
</template>
</n-button>
<n-button
type="error"
round
size="large"
>
<template v-slot:icon>
<md-save />
</template>
</n-button>
<n-button-group>
<n-button
type="default"
round
>
<template v-slot:icon>
<md-save />
</template>
Default
</n-button>
<n-button
type="primary"
disabled
>
<template v-slot:icon>
<md-save />
</template>
Primary
</n-button>
<n-button
type="info"
icon-placement="right"
>
<template v-slot:icon>
<md-save />
</template>
Info
</n-button>
<n-button
type="warning"
>
<template v-slot:icon>
<md-save />
</template>
Warning
</n-button>
</n-button-group>
<n-button-group vertical>
<n-button
type="default"
round
>
<template v-slot:icon>
<md-save />
</template>
Default
</n-button>
<n-button
type="primary"
disabled
>
<template v-slot:icon>
<md-save />
</template>
Primary
</n-button>
<n-button
type="info"
icon-placement="right"
>
<template v-slot:icon>
<md-save />
</template>
Info
</n-button>
<n-button
type="warning"
>
<template v-slot:icon>
<md-save />
</template>
Warning
</n-button>
</n-button-group>
</div>
</template>
</n-config-consumer>
import mdSave from 'naive-ui/lib/icons/md-save'
export default {
components: {
mdSave
}
}
.n-button {
margin-right: 12px;
margin-bottom: 8px;
}
.debug-zone {
border-radius: 4px;
background-color: rgb(48, 48, 48);
transition: all .3s ease-in-out;
}
.debug-zone.n-light-theme {
border-radius: 4px;
background-color: #ececec;
}