mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
refactor(typography): depth
This commit is contained in:
07akioni
parent
473470680a
commit
f36f787668
@ -27,13 +27,13 @@ text
|
||||
|underline|`boolean`|`false`||
|
||||
|delete|`boolean`|`false`||
|
||||
|code|`boolean`|`false`||
|
||||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`undefined`||
|
||||
|depth|`1 \| 2 \| 3 \| '1' \| '2' \| '3'`|`undefined`||
|
||||
|tag|`string`|`undefined`|What tag should be this component be rendered as. Won't work when `code` or `del` is set.|
|
||||
|
||||
### P Props
|
||||
|Name|Type|Default|Description|
|
||||
|-|-|-|-|
|
||||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`undefined`||
|
||||
|depth|`1 \| 2 \| 3 \| '1' \| '2' \| '3'`|`undefined`||
|
||||
|
||||
|
||||
### H1, H2, H3, H4, H5, H6 Props
|
||||
|
||||
@ -11,8 +11,8 @@ Use different type of text to display different kind of info.
|
||||
<n-text delete>Delete</n-text>
|
||||
<n-text code>Code</n-text>
|
||||
<n-text code delete>Code</n-text>
|
||||
<n-text depth="primary">Primary Depth</n-text>
|
||||
<n-text depth="secondary">Secondary Depth</n-text>
|
||||
<n-text depth="tertiary">Tertiary Depth</n-text>
|
||||
<n-text depth="1">Primary Depth</n-text>
|
||||
<n-text depth="2">Secondary Depth</n-text>
|
||||
<n-text depth="3">Tertiary Depth</n-text>
|
||||
<n-text tag="div">As Div</n-text>
|
||||
```
|
||||
@ -27,13 +27,13 @@ text
|
||||
|underline|`boolean`|`false`||
|
||||
|delete|`boolean`|`false`||
|
||||
|code|`boolean`|`false`||
|
||||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`undefined`||
|
||||
|depth|`1 \| 2 \| 3 \| '1' \| '2' \| '3'`|`undefined`||
|
||||
|tag|`string`|`undefined`|需要被渲染为什么标签，在 `code` 和 `del` 设定的情况下不生效|
|
||||
|
||||
### P Props
|
||||
|名称|类型|默认值|说明|
|
||||
|-|-|-|-|
|
||||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`undefined`||
|
||||
|depth|`1 \| 2 \| 3 \| '1' \| '2' \| '3'`|`undefined`||
|
||||
|
||||
### H1, H2, H3, H4, H5, H6 Props
|
||||
|名称|类型|默认值|说明|
|
||||
|
||||
@ -11,8 +11,8 @@
|
||||
<n-text delete>Delete</n-text>
|
||||
<n-text code>Code</n-text>
|
||||
<n-text code delete>Code</n-text>
|
||||
<n-text depth="primary">Primary Depth</n-text>
|
||||
<n-text depth="secondary">Secondary Depth</n-text>
|
||||
<n-text depth="tertiary">Tertiary Depth</n-text>
|
||||
<n-text depth="1">Primary Depth</n-text>
|
||||
<n-text depth="2">Secondary Depth</n-text>
|
||||
<n-text depth="3">Tertiary Depth</n-text>
|
||||
<n-text tag="div">作为 Div</n-text>
|
||||
```
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</n-icon>
|
||||
</div>
|
||||
<n-text style="font-size: 16px;">Click or drag file to this area to upload</n-text>
|
||||
<n-p depth="tertiary" style="margin-bottom: 0;">Strictly prohibit from uploading sensitive information. For example, your deposit card's password or your credit card's expiration date and security code.</n-p>
|
||||
<n-p depth="3" style="margin-bottom: 0;">Strictly prohibit from uploading sensitive information. For example, your deposit card's password or your credit card's expiration date and security code.</n-p>
|
||||
</n-upload-dragger>
|
||||
</n-upload>
|
||||
```
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</n-icon>
|
||||
</div>
|
||||
<n-text style="font-size: 16px;">点击或者拖动文件到该区域来上传</n-text>
|
||||
<n-p depth="tertiary" style="margin-bottom: 0;">请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码</n-p>
|
||||
<n-p depth="3" style="margin-bottom: 0;">请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码</n-p>
|
||||
</n-upload-dragger>
|
||||
</n-upload>
|
||||
```
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="footer">
|
||||
<n-divider v-if="showDivider" style="margin: 0 0 16px 0;" />
|
||||
<n-text depth="tertiary">
|
||||
<n-text depth="3">
|
||||
Made by Tusimple
|
||||
</n-text>
|
||||
</div>
|
||||
|
||||
@ -37,7 +37,6 @@
|
||||
style="padding: 0;"
|
||||
size="tiny"
|
||||
text
|
||||
icon-depth="tertiary"
|
||||
@click="toggleCodeDisplay"
|
||||
>
|
||||
<template #icon>
|
||||
|
||||
@ -2,7 +2,6 @@
|
||||
<n-button
|
||||
class="edit-button"
|
||||
text
|
||||
icon-depth="tertiary"
|
||||
:size="size"
|
||||
@click="handleEditOnGithubClick"
|
||||
>
|
||||
|
||||
@ -178,12 +178,6 @@ export default {
|
||||
return ['left', 'right'].includes(value)
|
||||
}
|
||||
},
|
||||
iconDepth: {
|
||||
default: 'secondary',
|
||||
validator (value) {
|
||||
return ['secondary', 'tertiary'].includes(value)
|
||||
}
|
||||
},
|
||||
attrType: {
|
||||
default: 'button',
|
||||
validator (value) {
|
||||
|
||||
@ -30,9 +30,9 @@ export default {
|
||||
props: {
|
||||
depth: {
|
||||
validator (value) {
|
||||
return ['primary', 'secondary', 'tertiary'].includes(value)
|
||||
return [1, 2, 3, '1', '2', '3'].includes(value)
|
||||
},
|
||||
default: null
|
||||
default: undefined
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -24,13 +24,13 @@ export default c([
|
||||
c('&:first-child', {
|
||||
marginTop: 0
|
||||
}),
|
||||
cM('primary-depth', {
|
||||
cM('1-depth', {
|
||||
color: pTextColorPrimaryDepth
|
||||
}),
|
||||
cM('secondary-depth', {
|
||||
cM('2-depth', {
|
||||
color: pTextColorSecondaryDepth
|
||||
}),
|
||||
cM('tertiary-depth', {
|
||||
cM('3-depth', {
|
||||
color: pTextColorTertiaryDepth
|
||||
})
|
||||
])
|
||||
|
||||
@ -57,24 +57,24 @@ export default c([
|
||||
border: `1px solid ${codeBorderColor}`
|
||||
}),
|
||||
cM('default-type', [
|
||||
cM('primary-depth', {
|
||||
cM('1-depth', {
|
||||
color: textColor1Depth
|
||||
}),
|
||||
cM('secondary-depth', {
|
||||
cM('2-depth', {
|
||||
color: textColor2Depth
|
||||
}),
|
||||
cM('tertiary-depth', {
|
||||
cM('3-depth', {
|
||||
color: textColor3Depth
|
||||
})
|
||||
]),
|
||||
cNotM('default-type', [
|
||||
cM('primary-depth', {
|
||||
cM('1-depth', {
|
||||
color: textOpacityPrimaryDepth
|
||||
}),
|
||||
cM('secondary-depth', {
|
||||
cM('2-depth', {
|
||||
color: textOpacitySecondaryDepth
|
||||
}),
|
||||
cM('tertiary-depth', {
|
||||
cM('3-depth', {
|
||||
color: textOpacityTertiaryDepth
|
||||
})
|
||||
]),
|
||||
|
||||
@ -106,7 +106,7 @@ export default {
|
||||
},
|
||||
depth: {
|
||||
validator (value) {
|
||||
return ['primary', 'secondary', 'tertiary'].includes(value)
|
||||
return [1, 2, 3, '1', '2', '3'].includes(value)
|
||||
},
|
||||
default: undefined
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user