mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-06 12:17:13 +08:00
docs(button): optimizate button rtl demo (#125)
This commit is contained in:
parent
0727cd9f74
commit
962c2cebbb
@ -5,19 +5,36 @@
|
|||||||
<n-space><n-switch v-model:value="rtlEnabled" />Rtl</n-space>
|
<n-space><n-switch v-model:value="rtlEnabled" />Rtl</n-space>
|
||||||
<n-config-provider :rtl="rtlEnabled ? rtlStyles : undefined">
|
<n-config-provider :rtl="rtlEnabled ? rtlStyles : undefined">
|
||||||
<n-space>
|
<n-space>
|
||||||
<n-button>Rtl Test</n-button>
|
<n-button>
|
||||||
<n-button>Rtl Test</n-button>
|
<template #icon>
|
||||||
<n-button>Rtl Test</n-button>
|
<n-icon>
|
||||||
|
<cash-icon />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
Rtl Test
|
||||||
|
</n-button>
|
||||||
|
<n-button icon-placement="right">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<cash-icon />
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
Rtl Test
|
||||||
|
</n-button>
|
||||||
</n-space>
|
</n-space>
|
||||||
</n-config-provider>
|
</n-config-provider>
|
||||||
</n-space>
|
</n-space>
|
||||||
```
|
```
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
import { CashOutline as CashIcon } from '@vicons/ionicons5'
|
||||||
import { defineComponent, ref } from 'vue'
|
import { defineComponent, ref } from 'vue'
|
||||||
import { unstableButtonRtl } from 'naive-ui'
|
import { unstableButtonRtl } from 'naive-ui'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
CashIcon
|
||||||
|
},
|
||||||
setup () {
|
setup () {
|
||||||
return {
|
return {
|
||||||
rtlEnabled: ref(false),
|
rtlEnabled: ref(false),
|
||||||
|
Loading…
Reference in New Issue
Block a user