mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-11 13:10:26 +08:00
feat(card): disable inline theme
This commit is contained in:
07akioni
parent
ef86ee297c
commit
ca8a8f577c
@ -29,7 +29,7 @@
|
||||
"release-changelog": "node scripts/release-changelog",
|
||||
"build:site:ts": "./scripts/pre-build-site/pre-build-site.sh && cross-env TUSIMPLE=true NODE_ENV=production NODE_OPTIONS=--max-old-space-size=4096 vite build && ./scripts/post-build-site/post-build-site.sh",
|
||||
"prepare": "husky install",
|
||||
"transpile-docs": "node scripts/md-to-vue button",
|
||||
"transpile-docs": "node scripts/md-to-vue card",
|
||||
"typecheck": "vue-tsc --noEmit src/**/*.vue"
|
||||
},
|
||||
"author": "07akioni",
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
# Basic
|
||||
|
||||
A basic card.
|
||||
|
||||
```html
|
||||
<n-card title="Card"> Card Content </n-card>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
```
|
||||
17
src/card/demos/enUS/basic.demo.vue
Normal file
17
src/card/demos/enUS/basic.demo.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<markdown>
|
||||
# Basic
|
||||
|
||||
A basic card.
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card title="Card">
|
||||
Card Content
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +0,0 @@
|
||||
# Border
|
||||
|
||||
Card can be used without border.
|
||||
|
||||
```html
|
||||
<n-card :bordered="false" title="Borderless Card"> Card Content </n-card>
|
||||
```
|
||||
11
src/card/demos/enUS/border.demo.vue
Normal file
11
src/card/demos/enUS/border.demo.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<markdown>
|
||||
# Border
|
||||
|
||||
Card can be used without border.
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card :bordered="false" title="Borderless Card">
|
||||
Card Content
|
||||
</n-card>
|
||||
</template>
|
||||
@ -1,12 +1,16 @@
|
||||
<markdown>
|
||||
# Closable
|
||||
|
||||
You may need this when using it in a modal.
|
||||
</markdown>
|
||||
|
||||
```html
|
||||
<n-card title="Card" closable @close="handleClose">Card Content</n-card>
|
||||
```
|
||||
<template>
|
||||
<n-card title="Card" closable @close="handleClose">
|
||||
Card Content
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
```js
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
|
||||
@ -20,10 +24,10 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
</script>
|
||||
|
||||
```css
|
||||
<style>
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
@ -1,17 +0,0 @@
|
||||
# Custom
|
||||
|
||||
Card provides `content-style`, `header-style`, `footer-style` to help you customize style. For example you want an card with no padding to put whatever you want.
|
||||
|
||||
```html
|
||||
<n-card content-style="padding: 0;">
|
||||
<n-tabs
|
||||
type="line"
|
||||
size="large"
|
||||
:tabs-padding="20"
|
||||
pane-style="padding: 20px;"
|
||||
>
|
||||
<n-tab-pane name="PARKLIFE">PARKLIFE</n-tab-pane>
|
||||
<n-tab-pane name="ROCKLIFE">ROCKLIFE</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
```
|
||||
23
src/card/demos/enUS/custom-style.demo.vue
Normal file
23
src/card/demos/enUS/custom-style.demo.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<markdown>
|
||||
# Custom
|
||||
|
||||
Card provides `content-style`, `header-style`, `footer-style` to help you customize style. For example you want an card with no padding to put whatever you want.
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card content-style="padding: 0;">
|
||||
<n-tabs
|
||||
type="line"
|
||||
size="large"
|
||||
:tabs-padding="20"
|
||||
pane-style="padding: 20px;"
|
||||
>
|
||||
<n-tab-pane name="PARKLIFE">
|
||||
PARKLIFE
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="ROCKLIFE">
|
||||
ROCKLIFE
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
</template>
|
||||
@ -1,11 +0,0 @@
|
||||
# Hoverable
|
||||
|
||||
```html
|
||||
<n-card title="Card" hoverable> Card Content </n-card>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
```
|
||||
15
src/card/demos/enUS/hoverable.demo.vue
Normal file
15
src/card/demos/enUS/hoverable.demo.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<markdown>
|
||||
# Hoverable
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card title="Card" hoverable>
|
||||
Card Content
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
@ -5,17 +5,17 @@ Just put something in it.
|
||||
## Demos
|
||||
|
||||
```demo
|
||||
basic
|
||||
size
|
||||
basic.vue
|
||||
size.vue
|
||||
cover.vue
|
||||
hoverable
|
||||
slots
|
||||
border
|
||||
hoverable.vue
|
||||
slots.vue
|
||||
border.vue
|
||||
segment.vue
|
||||
closable
|
||||
no-title
|
||||
loading
|
||||
custom-style
|
||||
closable.vue
|
||||
no-title.vue
|
||||
loading.vue
|
||||
custom-style.vue
|
||||
embedded.vue
|
||||
```
|
||||
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
# Loading
|
||||
|
||||
Use `n-skeleton` to simulate loading effect.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-switch v-model:value="loading" />
|
||||
<n-card>
|
||||
<template #header>
|
||||
<n-skeleton text v-if="loading" width="60%" />
|
||||
<template v-else>Lorem Ipsum</template>
|
||||
</template>
|
||||
<n-skeleton text v-if="loading" :repeat="6" />
|
||||
<template v-else>
|
||||
Lorem ipsum dolor sit amet,<br />
|
||||
consectetur adipiscing elit,<br />
|
||||
sed do eiusmod tempor incididunt<br />
|
||||
ut labore et dolore magna aliqua.<br />
|
||||
Ut enim ad minim veniam,<br />
|
||||
quis nostrud exercitation ullamco
|
||||
</template>
|
||||
</n-card>
|
||||
</n-space>
|
||||
```
|
||||
|
||||
```js
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
loading: ref(true)
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
40
src/card/demos/enUS/loading.demo.vue
Normal file
40
src/card/demos/enUS/loading.demo.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<markdown>
|
||||
# Loading
|
||||
|
||||
Use `n-skeleton` to simulate loading effect.
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-space vertical>
|
||||
<n-switch v-model:value="loading" />
|
||||
<n-card>
|
||||
<template #header>
|
||||
<n-skeleton v-if="loading" text width="60%" />
|
||||
<template v-else>
|
||||
Lorem Ipsum
|
||||
</template>
|
||||
</template>
|
||||
<n-skeleton v-if="loading" text :repeat="6" />
|
||||
<template v-else>
|
||||
Lorem ipsum dolor sit amet,<br>
|
||||
consectetur adipiscing elit,<br>
|
||||
sed do eiusmod tempor incididunt<br>
|
||||
ut labore et dolore magna aliqua.<br>
|
||||
Ut enim ad minim veniam,<br>
|
||||
quis nostrud exercitation ullamco
|
||||
</template>
|
||||
</n-card>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
loading: ref(true)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,7 +0,0 @@
|
||||
# No title
|
||||
|
||||
Nobody said a card must have a title.
|
||||
|
||||
```html
|
||||
<n-card>No title</n-card>
|
||||
```
|
||||
9
src/card/demos/enUS/no-title.demo.vue
Normal file
9
src/card/demos/enUS/no-title.demo.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<markdown>
|
||||
# No title
|
||||
|
||||
Nobody said a card must have a title.
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card>No title</n-card>
|
||||
</template>
|
||||
@ -1,12 +0,0 @@
|
||||
# Size
|
||||
|
||||
Card has `small`, `medium`, `large`, `huge` sizes.
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-card title="Small Card" size="small"> Card Content </n-card>
|
||||
<n-card title="Medium Card" size="medium"> Card Content </n-card>
|
||||
<n-card title="Large Card" size="large"> Card Content </n-card>
|
||||
<n-card title="Huge Card" size="huge"> Card Content </n-card>
|
||||
</n-space>
|
||||
```
|
||||
22
src/card/demos/enUS/size.demo.vue
Normal file
22
src/card/demos/enUS/size.demo.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<markdown>
|
||||
# Size
|
||||
|
||||
Card has `small`, `medium`, `large`, `huge` sizes.
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-space vertical>
|
||||
<n-card title="Small Card" size="small">
|
||||
Card Content
|
||||
</n-card>
|
||||
<n-card title="Medium Card" size="medium">
|
||||
Card Content
|
||||
</n-card>
|
||||
<n-card title="Large Card" size="large">
|
||||
Card Content
|
||||
</n-card>
|
||||
<n-card title="Huge Card" size="huge">
|
||||
Card Content
|
||||
</n-card>
|
||||
</n-space>
|
||||
</template>
|
||||
@ -1,12 +0,0 @@
|
||||
# Slots
|
||||
|
||||
Card has many slots to help you write less code.
|
||||
|
||||
```html
|
||||
<n-card title="Card Slots Demo">
|
||||
<template #header-extra> #header-extra </template>
|
||||
Card Content
|
||||
<template #footer> #footer </template>
|
||||
<template #action> #action </template>
|
||||
</n-card>
|
||||
```
|
||||
20
src/card/demos/enUS/slots.demo.vue
Normal file
20
src/card/demos/enUS/slots.demo.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<markdown>
|
||||
# Slots
|
||||
|
||||
Card has many slots to help you write less code.
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card title="Card Slots Demo">
|
||||
<template #header-extra>
|
||||
#header-extra
|
||||
</template>
|
||||
Card Content
|
||||
<template #footer>
|
||||
#footer
|
||||
</template>
|
||||
<template #action>
|
||||
#action
|
||||
</template>
|
||||
</n-card>
|
||||
</template>
|
||||
@ -1,13 +0,0 @@
|
||||
# 基础用法
|
||||
|
||||
基础卡片
|
||||
|
||||
```html
|
||||
<n-card title="卡片"> 卡片内容 </n-card>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
```
|
||||
17
src/card/demos/zhCN/basic.demo.vue
Normal file
17
src/card/demos/zhCN/basic.demo.vue
Normal file
@ -0,0 +1,17 @@
|
||||
<markdown>
|
||||
# 基础用法
|
||||
|
||||
基础卡片
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card title="卡片">
|
||||
卡片内容
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
@ -1,7 +0,0 @@
|
||||
# 边框
|
||||
|
||||
卡片可以没有边框。
|
||||
|
||||
```html
|
||||
<n-card :bordered="false" title="无边框的卡片"> 卡片内容 </n-card>
|
||||
```
|
||||
11
src/card/demos/zhCN/border.demo.vue
Normal file
11
src/card/demos/zhCN/border.demo.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<markdown>
|
||||
# 边框
|
||||
|
||||
卡片可以没有边框。
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card :bordered="false" title="无边框的卡片">
|
||||
卡片内容
|
||||
</n-card>
|
||||
</template>
|
||||
@ -1,12 +1,16 @@
|
||||
<markdown>
|
||||
# 可关闭
|
||||
|
||||
用于 Modal 的时候，你可能需要这个属性。
|
||||
</markdown>
|
||||
|
||||
```html
|
||||
<n-card title="卡片" closable @close="handleClose">卡片内容</n-card>
|
||||
```
|
||||
<template>
|
||||
<n-card title="卡片" closable @close="handleClose">
|
||||
卡片内容
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
```js
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { useMessage } from 'naive-ui'
|
||||
|
||||
@ -20,10 +24,10 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
</script>
|
||||
|
||||
```css
|
||||
<style>
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
```
|
||||
</style>
|
||||
@ -1,17 +0,0 @@
|
||||
# 自定义样式
|
||||
|
||||
卡片提供 `content-style`、`header-style`、`footer-style` 来帮助你自定义样式，比如你想要一个没有 padding 的卡片来往里面放一些乱七八糟的东西。
|
||||
|
||||
```html
|
||||
<n-card content-style="padding: 0;">
|
||||
<n-tabs
|
||||
type="line"
|
||||
size="large"
|
||||
:tabs-padding="20"
|
||||
pane-style="padding: 20px;"
|
||||
>
|
||||
<n-tab-pane name="PARKLIFE">PARKLIFE</n-tab-pane>
|
||||
<n-tab-pane name="ROCKLIFE">ROCKLIFE</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
```
|
||||
23
src/card/demos/zhCN/custom-style.demo.vue
Normal file
23
src/card/demos/zhCN/custom-style.demo.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<markdown>
|
||||
# 自定义样式
|
||||
|
||||
卡片提供 `content-style`、`header-style`、`footer-style` 来帮助你自定义样式，比如你想要一个没有 padding 的卡片来往里面放一些乱七八糟的东西。
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card content-style="padding: 0;">
|
||||
<n-tabs
|
||||
type="line"
|
||||
size="large"
|
||||
:tabs-padding="20"
|
||||
pane-style="padding: 20px;"
|
||||
>
|
||||
<n-tab-pane name="PARKLIFE">
|
||||
PARKLIFE
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="ROCKLIFE">
|
||||
ROCKLIFE
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
</template>
|
||||
@ -1,16 +0,0 @@
|
||||
# 嵌入效果
|
||||
|
||||
在亮色模式下，有的时候你希望背景色暗一点，来和纯色背景分割。
|
||||
|
||||
```html
|
||||
<n-card title="📖 如何成功" embedded :bordered="false"
|
||||
>如果你年轻的时候不 996，你什么时候可以 996？你一辈子没有
|
||||
996，你觉得你就很骄傲了？这个世界上，我们每一个人都希望成功，都希望美好生活，都希望被尊重，我请问大家，你不付出超越别人的努力和时间，你怎么能够实现你想要的成功？</n-card
|
||||
>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
```
|
||||
@ -3,14 +3,16 @@
|
||||
|
||||
在亮色模式下，有的时候你希望背景色暗一点，来和纯色背景分割。
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card title="📖 如何成功" embedded :bordered="false">
|
||||
<n-card
|
||||
title="📖 如何成功"
|
||||
embedded
|
||||
:bordered="false"
|
||||
>
|
||||
如果你年轻的时候不 996，你什么时候可以 996？你一辈子没有
|
||||
996，你觉得你就很骄傲了？这个世界上，我们每一个人都希望成功，都希望美好生活，都希望被尊重，我请问大家，你不付出超越别人的努力和时间，你怎么能够实现你想要的成功？
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
# 可悬浮
|
||||
|
||||
```html
|
||||
<n-card title="卡片" hoverable> 卡片内容 </n-card>
|
||||
```
|
||||
|
||||
```css
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
```
|
||||
15
src/card/demos/zhCN/hoverable.demo.vue
Normal file
15
src/card/demos/zhCN/hoverable.demo.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<markdown>
|
||||
# 可悬浮
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card title="卡片" hoverable>
|
||||
卡片内容
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.n-card {
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
@ -5,19 +5,19 @@
|
||||
## 演示
|
||||
|
||||
```demo
|
||||
basic
|
||||
size
|
||||
basic.vue
|
||||
size.vue
|
||||
cover.vue
|
||||
hoverable
|
||||
slots
|
||||
border
|
||||
hoverable.vue
|
||||
slots.vue
|
||||
border.vue
|
||||
segment.vue
|
||||
closable
|
||||
no-title
|
||||
loading
|
||||
custom-style
|
||||
closable.vue
|
||||
no-title.vue
|
||||
loading.vue
|
||||
custom-style.vue
|
||||
embedded.vue
|
||||
rtl-debug
|
||||
rtl-debug.vue
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
# 加载中
|
||||
|
||||
使用 `n-skeleton` 模拟加载效果。
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-switch v-model:value="loading" />
|
||||
<n-card>
|
||||
<template #header>
|
||||
<n-skeleton text v-if="loading" width="60%" />
|
||||
<template v-else>I'm OK</template>
|
||||
</template>
|
||||
<n-skeleton text v-if="loading" :repeat="6" />
|
||||
<template v-else>
|
||||
不要忘了留姓名<br />
|
||||
电话和其他事情<br />
|
||||
不要说的太快免得我没写下你大名<br />
|
||||
或许你不再打来<br />
|
||||
我却等到头发白<br />
|
||||
希望有一天你会打来
|
||||
</template>
|
||||
</n-card>
|
||||
</n-space>
|
||||
```
|
||||
|
||||
```js
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
loading: ref(true)
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
40
src/card/demos/zhCN/loading.demo.vue
Normal file
40
src/card/demos/zhCN/loading.demo.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<markdown>
|
||||
# 加载中
|
||||
|
||||
使用 `n-skeleton` 模拟加载效果。
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-space vertical>
|
||||
<n-switch v-model:value="loading" />
|
||||
<n-card>
|
||||
<template #header>
|
||||
<n-skeleton v-if="loading" text width="60%" />
|
||||
<template v-else>
|
||||
I'm OK
|
||||
</template>
|
||||
</template>
|
||||
<n-skeleton v-if="loading" text :repeat="6" />
|
||||
<template v-else>
|
||||
不要忘了留姓名<br>
|
||||
电话和其他事情<br>
|
||||
不要说的太快免得我没写下你大名<br>
|
||||
或许你不再打来<br>
|
||||
我却等到头发白<br>
|
||||
希望有一天你会打来
|
||||
</template>
|
||||
</n-card>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
loading: ref(true)
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,7 +0,0 @@
|
||||
# 没有标题
|
||||
|
||||
谁说卡片一定要有标题呢。
|
||||
|
||||
```html
|
||||
<n-card>没有标题</n-card>
|
||||
```
|
||||
9
src/card/demos/zhCN/no-title.demo.vue
Normal file
9
src/card/demos/zhCN/no-title.demo.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<markdown>
|
||||
# 没有标题
|
||||
|
||||
谁说卡片一定要有标题呢。
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card>没有标题</n-card>
|
||||
</template>
|
||||
@ -1,30 +0,0 @@
|
||||
# Rtl Debug
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-space><n-switch v-model:value="rtlEnabled" />Rtl</n-space>
|
||||
<n-config-provider :rtl="rtlEnabled ? rtlStyles : undefined">
|
||||
<n-card closable>
|
||||
<template #header>Rtl Header Test</template>
|
||||
<template #header-extra>Rtl Header Extra Test</template>
|
||||
Rtl Content Test
|
||||
<template #footer>Rtl Header Test</template>
|
||||
<template #action>Rtl Action Test</template>
|
||||
</n-card>
|
||||
</n-config-provider>
|
||||
</n-space>
|
||||
```
|
||||
|
||||
```js
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { unstableCardRtl } from 'naive-ui'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
rtlEnabled: ref(false),
|
||||
rtlStyles: [unstableCardRtl]
|
||||
}
|
||||
}
|
||||
})
|
||||
```
|
||||
41
src/card/demos/zhCN/rtl-debug.demo.vue
Normal file
41
src/card/demos/zhCN/rtl-debug.demo.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<markdown>
|
||||
# Rtl Debug
|
||||
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-space vertical>
|
||||
<n-space><n-switch v-model:value="rtlEnabled" />Rtl</n-space>
|
||||
<n-config-provider :rtl="rtlEnabled ? rtlStyles : undefined">
|
||||
<n-card closable>
|
||||
<template #header>
|
||||
Rtl Header Test
|
||||
</template>
|
||||
<template #header-extra>
|
||||
Rtl Header Extra Test
|
||||
</template>
|
||||
Rtl Content Test
|
||||
<template #footer>
|
||||
Rtl Header Test
|
||||
</template>
|
||||
<template #action>
|
||||
Rtl Action Test
|
||||
</template>
|
||||
</n-card>
|
||||
</n-config-provider>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
import { unstableCardRtl } from 'naive-ui'
|
||||
|
||||
export default defineComponent({
|
||||
setup () {
|
||||
return {
|
||||
rtlEnabled: ref(false),
|
||||
rtlStyles: [unstableCardRtl]
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
@ -1,12 +0,0 @@
|
||||
# 尺寸
|
||||
|
||||
卡片有 `small`、`medium`、`large`、`huge` 尺寸。
|
||||
|
||||
```html
|
||||
<n-space vertical>
|
||||
<n-card title="小卡片" size="small"> 卡片内容 </n-card>
|
||||
<n-card title="中卡片" size="medium"> 卡片内容 </n-card>
|
||||
<n-card title="大卡片" size="large"> 卡片内容 </n-card>
|
||||
<n-card title="超大卡片" size="huge"> 卡片内容 </n-card>
|
||||
</n-space>
|
||||
```
|
||||
22
src/card/demos/zhCN/size.demo.vue
Normal file
22
src/card/demos/zhCN/size.demo.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<markdown>
|
||||
# 尺寸
|
||||
|
||||
卡片有 `small`、`medium`、`large`、`huge` 尺寸。
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-space vertical>
|
||||
<n-card title="小卡片" size="small">
|
||||
卡片内容
|
||||
</n-card>
|
||||
<n-card title="中卡片" size="medium">
|
||||
卡片内容
|
||||
</n-card>
|
||||
<n-card title="大卡片" size="large">
|
||||
卡片内容
|
||||
</n-card>
|
||||
<n-card title="超大卡片" size="huge">
|
||||
卡片内容
|
||||
</n-card>
|
||||
</n-space>
|
||||
</template>
|
||||
@ -1,12 +0,0 @@
|
||||
# 插槽
|
||||
|
||||
卡片有很多插槽，希望能帮你少写点代码。
|
||||
|
||||
```html
|
||||
<n-card title="卡片插槽示例">
|
||||
<template #header-extra> #header-extra </template>
|
||||
卡片内容
|
||||
<template #footer> #footer </template>
|
||||
<template #action> #action </template>
|
||||
</n-card>
|
||||
```
|
||||
20
src/card/demos/zhCN/slots.demo.vue
Normal file
20
src/card/demos/zhCN/slots.demo.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<markdown>
|
||||
# 插槽
|
||||
|
||||
卡片有很多插槽，希望能帮你少写点代码。
|
||||
</markdown>
|
||||
|
||||
<template>
|
||||
<n-card title="卡片插槽示例">
|
||||
<template #header-extra>
|
||||
#header-extra
|
||||
</template>
|
||||
卡片内容
|
||||
<template #footer>
|
||||
#footer
|
||||
</template>
|
||||
<template #action>
|
||||
#action
|
||||
</template>
|
||||
</n-card>
|
||||
</template>
|
||||
@ -1,6 +1,6 @@
|
||||
import { h, defineComponent, computed, PropType, CSSProperties } from 'vue'
|
||||
import { getPadding } from 'seemly'
|
||||
import { useConfig, useTheme } from '../../_mixins'
|
||||
import { useConfig, useTheme, useCssVarsClass } from '../../_mixins'
|
||||
import type { ThemeProps } from '../../_mixins'
|
||||
import { call, createKey, keysOf } from '../../_utils'
|
||||
import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils'
|
||||
@ -62,6 +62,7 @@ export default defineComponent({
|
||||
if (onClose) call(onClose)
|
||||
}
|
||||
const { mergedClsPrefixRef, NConfigProvider } = useConfig(props)
|
||||
const disableInlineTheme = NConfigProvider?.disableInlineTheme
|
||||
const themeRef = useTheme(
|
||||
'Card',
|
||||
'-card',
|
||||
@ -75,69 +76,81 @@ export default defineComponent({
|
||||
NConfigProvider?.mergedRtlRef,
|
||||
mergedClsPrefixRef
|
||||
)
|
||||
const cssVarsRef = computed(() => {
|
||||
const { size } = props
|
||||
const {
|
||||
self: {
|
||||
color,
|
||||
colorModal,
|
||||
colorTarget,
|
||||
textColor,
|
||||
titleTextColor,
|
||||
titleFontWeight,
|
||||
borderColor,
|
||||
actionColor,
|
||||
borderRadius,
|
||||
closeColor,
|
||||
closeColorHover,
|
||||
closeColorPressed,
|
||||
lineHeight,
|
||||
closeSize,
|
||||
boxShadow,
|
||||
colorPopover,
|
||||
colorEmbedded,
|
||||
[createKey('padding', size)]: padding,
|
||||
[createKey('fontSize', size)]: fontSize,
|
||||
[createKey('titleFontSize', size)]: titleFontSize
|
||||
},
|
||||
common: { cubicBezierEaseInOut }
|
||||
} = themeRef.value
|
||||
const {
|
||||
top: paddingTop,
|
||||
left: paddingLeft,
|
||||
bottom: paddingBottom
|
||||
} = getPadding(padding)
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-border-radius': borderRadius,
|
||||
'--n-color': props.embedded ? colorEmbedded : color,
|
||||
'--n-color-modal': colorModal,
|
||||
'--n-color-popover': colorPopover,
|
||||
'--n-color-target': colorTarget,
|
||||
'--n-text-color': textColor,
|
||||
'--n-line-height': lineHeight,
|
||||
'--n-action-color': actionColor,
|
||||
'--n-title-text-color': titleTextColor,
|
||||
'--n-title-font-weight': titleFontWeight,
|
||||
'--n-close-color': closeColor,
|
||||
'--n-close-color-hover': closeColorHover,
|
||||
'--n-close-color-pressed': closeColorPressed,
|
||||
'--n-border-color': borderColor,
|
||||
'--n-box-shadow': boxShadow,
|
||||
// size
|
||||
'--n-padding-top': paddingTop,
|
||||
'--n-padding-bottom': paddingBottom,
|
||||
'--n-padding-left': paddingLeft,
|
||||
'--n-font-size': fontSize,
|
||||
'--n-title-font-size': titleFontSize,
|
||||
'--n-close-size': closeSize
|
||||
}
|
||||
})
|
||||
const themeClassRef = disableInlineTheme
|
||||
? useCssVarsClass(
|
||||
'card',
|
||||
computed(() => {
|
||||
return props.size[0]
|
||||
}),
|
||||
cssVarsRef,
|
||||
props
|
||||
)
|
||||
: undefined
|
||||
return {
|
||||
rtlEnabled: rtlEnabledRef,
|
||||
mergedClsPrefix: mergedClsPrefixRef,
|
||||
mergedTheme: themeRef,
|
||||
handleCloseClick,
|
||||
cssVars: computed(() => {
|
||||
const { size } = props
|
||||
const {
|
||||
self: {
|
||||
color,
|
||||
colorModal,
|
||||
colorTarget,
|
||||
textColor,
|
||||
titleTextColor,
|
||||
titleFontWeight,
|
||||
borderColor,
|
||||
actionColor,
|
||||
borderRadius,
|
||||
closeColor,
|
||||
closeColorHover,
|
||||
closeColorPressed,
|
||||
lineHeight,
|
||||
closeSize,
|
||||
boxShadow,
|
||||
colorPopover,
|
||||
colorEmbedded,
|
||||
[createKey('padding', size)]: padding,
|
||||
[createKey('fontSize', size)]: fontSize,
|
||||
[createKey('titleFontSize', size)]: titleFontSize
|
||||
},
|
||||
common: { cubicBezierEaseInOut }
|
||||
} = themeRef.value
|
||||
const {
|
||||
top: paddingTop,
|
||||
left: paddingLeft,
|
||||
bottom: paddingBottom
|
||||
} = getPadding(padding)
|
||||
return {
|
||||
'--n-bezier': cubicBezierEaseInOut,
|
||||
'--n-border-radius': borderRadius,
|
||||
'--n-color': props.embedded ? colorEmbedded : color,
|
||||
'--n-color-modal': colorModal,
|
||||
'--n-color-popover': colorPopover,
|
||||
'--n-color-target': colorTarget,
|
||||
'--n-text-color': textColor,
|
||||
'--n-line-height': lineHeight,
|
||||
'--n-action-color': actionColor,
|
||||
'--n-title-text-color': titleTextColor,
|
||||
'--n-title-font-weight': titleFontWeight,
|
||||
'--n-close-color': closeColor,
|
||||
'--n-close-color-hover': closeColorHover,
|
||||
'--n-close-color-pressed': closeColorPressed,
|
||||
'--n-border-color': borderColor,
|
||||
'--n-box-shadow': boxShadow,
|
||||
// size
|
||||
'--n-padding-top': paddingTop,
|
||||
'--n-padding-bottom': paddingBottom,
|
||||
'--n-padding-left': paddingLeft,
|
||||
'--n-font-size': fontSize,
|
||||
'--n-title-font-size': titleFontSize,
|
||||
'--n-close-size': closeSize
|
||||
}
|
||||
})
|
||||
cssVars: disableInlineTheme ? undefined : cssVarsRef,
|
||||
themeClass: themeClassRef
|
||||
}
|
||||
},
|
||||
render () {
|
||||
@ -153,6 +166,7 @@ export default defineComponent({
|
||||
<div
|
||||
class={[
|
||||
`${mergedClsPrefix}-card`,
|
||||
this.themeClass,
|
||||
{
|
||||
[`${mergedClsPrefix}-card--rtl`]: rtlEnabled,
|
||||
[`${mergedClsPrefix}-card--content${
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
export { default as cardDark } from './dark'
|
||||
export { default as cardLight } from './light'
|
||||
export { default as cardRtl } from './rtl'
|
||||
export { cardRtl } from './rtl'
|
||||
export type { CardTheme, CardThemeVars } from './light'
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { RtlItem } from '../../config-provider/src/internal-interface'
|
||||
import rtlStyle from '../src/styles/rtl.cssr'
|
||||
|
||||
export default {
|
||||
export const cardRtl: RtlItem = {
|
||||
name: 'Card',
|
||||
style: rtlStyle
|
||||
}
|
||||
|
||||
@ -190,24 +190,26 @@ export default defineComponent({
|
||||
'--n-text-color-pressed-checkable': textColorPressedCheckable
|
||||
}
|
||||
})
|
||||
const themeClassRef = useCssVarsClass(
|
||||
'tag',
|
||||
computed(() => {
|
||||
let hash = ''
|
||||
const { type, size, color: { color, textColor } = {} } = props
|
||||
hash += type[0]
|
||||
hash += size[0]
|
||||
if (color) {
|
||||
hash += `a${color2Class(color)}`
|
||||
}
|
||||
if (textColor) {
|
||||
hash += `b${color2Class(textColor)}`
|
||||
}
|
||||
return hash
|
||||
}),
|
||||
cssVarsRef,
|
||||
props
|
||||
)
|
||||
const themeClassRef = disableInlineTheme
|
||||
? useCssVarsClass(
|
||||
'tag',
|
||||
computed(() => {
|
||||
let hash = ''
|
||||
const { type, size, color: { color, textColor } = {} } = props
|
||||
hash += type[0]
|
||||
hash += size[0]
|
||||
if (color) {
|
||||
hash += `a${color2Class(color)}`
|
||||
}
|
||||
if (textColor) {
|
||||
hash += `b${color2Class(textColor)}`
|
||||
}
|
||||
return hash
|
||||
}),
|
||||
cssVarsRef,
|
||||
props
|
||||
)
|
||||
: undefined
|
||||
return {
|
||||
...tagPublicMethods,
|
||||
rtlEnabled: rtlEnabledRef,
|
||||
@ -217,7 +219,7 @@ export default defineComponent({
|
||||
handleClick,
|
||||
handleCloseClick,
|
||||
cssVars: disableInlineTheme ? undefined : cssVarsRef,
|
||||
themeClass: disableInlineTheme ? themeClassRef : undefined
|
||||
themeClass: themeClassRef
|
||||
}
|
||||
},
|
||||
render () {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user