mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc: refine gradient-text & icon & popover & tag & typography

Browse Source
This commit is contained in:
07akioni 2020-03-08 20:24:38 +08:00
parent 92d299f30e
commit d5b5d3b971
21 changed files with 75 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
demo/documentation/components/gradientText/enUS/index.md
View File

@ -12,9 +12,10 @@ custom
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`||**required**|
|theme|`'light' \| 'dark'`|`null`||
|type|`'primary' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'primary'`||
|size|`number \| string`|`null`||
|gradient|`string \| object`|`null`||
|gradient|`string \| { from: string, to: string, deg: number \| string }`|`null`||
## Slots
|Name|Parameters|Description|

5
demo/documentation/components/gradientText/zhCN/index.md
View File

@ -11,9 +11,10 @@ custom
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|type|`'default' \| 'info' \| 'success' \| 'warning' \| 'error'`||**必需**|
|theme|`'light' \| 'dark'`|`null`||
|type|`'primary' \| 'info' \| 'success' \| 'warning' \| 'error'`|`'primary'`||
|size|`number \| string`|`null`||
|gradient|`string \| object`|`null`||
|gradient|`string \| { from: string, to: string, deg: number \| string }`|`null`||
## Slots
|名称|参数|说明|

3
demo/documentation/components/icon/enUS/index.md
View File

@ -16,7 +16,8 @@ depth
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|themed-style|`object`|`null`||
|theme|`'light' \| 'dark'`|`null`||
|themed-style|`{ [themeName: string]: object }`|`null`||
|size|`number \| string`|`null`||
|color|`string`|`null`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||

3
demo/documentation/components/icon/zhCN/index.md
View File

@ -15,7 +15,8 @@ depth
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|themed-style|`object`|`null`||
|theme|`'light' \| 'dark'`|`null`||
|themed-style|`{ [themeName: string]: object }`|`null`||
|size|`number \| string`|`null`||
|color|`string`|`null`||
|depth|`'primary' \| 'secondary' \| 'tertiary'`|`null`||

2
demo/documentation/components/popover/enUS/index.md
View File

@ -22,7 +22,9 @@ manual-position
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
|trigger|`'hover' \| 'trigger' \| 'manual'`|`'hover'`||
|show|`boolean`|`false`|Whether to show popover when trigger is `manual`|
|delay|`number`|`0`|Popover showing delay when trigger is `hover`|
|duration|`number`|`300`|Popover vanish delay when trigger is `hover`|
|placement|`'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| `|`'bottom'`||

2
demo/documentation/components/popover/zhCN/index.md
View File

@ -22,7 +22,9 @@ manual-position
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
|trigger|`'hover' \| 'trigger' \| 'manual'`|`'hover'`||
|show|`boolean`|`false`|在 `manual` 触发时控制弹出信息是否显示|
|delay|`number`|`0`|悬浮触发弹出信息的延迟|
|duration|`number`|`300`|悬浮关闭弹出信息的延迟|
|placement|`'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end' \| `|`'bottom'`||

4
demo/documentation/components/progress/enUS/multipleCircle.md
View File

@ -1,7 +1,7 @@
# Multiple Circle
Maybe your PM will need this.
You can show multiple circle in a single progress. Note that `circle-gap` and `stroke-width` is relative to 100(the svg's viewbox size is 100).
Maybe your product manager will need it.
```html
<n-config-consumer>
<template v-slot="{ styleScheme }">

2
demo/documentation/components/spin/enUS/index.md
View File

@ -1,5 +1,5 @@
# Spin
It can be called loading, but why it's called loading? Because there is another private component will less props called loading.
It can be called loading, but why it's called loading? Because there is another internal component with less props called loading.
## Demos
```demo
basic

5
demo/documentation/components/tag/enUS/index.md
View File

@ -17,8 +17,9 @@ shape
## Props
|Name|Type|Default|Description|
|-|-|-|-|
|type|`'default' \| 'info' \| 'succcess' \| 'warning' \| 'error'`|`'default`||
|size|`'small' \| 'medium' \| 'large'`|`'medium`||
|theme|`'light' \| 'dark'`|`null`||
|type|`'default' \| 'info' \| 'succcess' \| 'warning' \| 'error'`|`'default'`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|disabled|`boolean`|`false`||
|round|`boolean`|`false`||
|checkable|`boolean`|`false`||

5
demo/documentation/components/tag/zhCN/index.md
View File

@ -19,8 +19,9 @@ shape
## Props
|名称|类型|默认值|说明|
|-|-|-|-|
|type|`'default' \| 'info' \| 'succcess' \| 'warning' \| 'error'`|`'default`||
|size|`'small' \| 'medium' \| 'large'`|`'medium`||
|theme|`'light' \| 'dark'`|`null`||
|type|`'default' \| 'info' \| 'succcess' \| 'warning' \| 'error'`|`'default'`||
|size|`'small' \| 'medium' \| 'large'`|`'medium'`||
|disabled|`boolean`|`false`||
|round|`boolean`|`false`||
|checkable|`boolean`|`false`||

11
demo/documentation/components/typography/enUS/index.md
View File

@ -2,7 +2,7 @@
Naive UI provides some basic styling for common HTML tags. It also provides some components to render text better.
Layout is a kind of art.
Typography is a kind of art.
## Demos
```demo
@ -13,6 +13,13 @@ text
## Props
## Props
### All Typography Components Props
|Name|Type|Default|Description|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
### Text Props
|Name|Type|Default|Description|
|-|-|-|-|
@ -41,7 +48,7 @@ text
### A Props
|Name|Type|Default|Description|
|-|-|-|-|
|to|`string`|`null`|If the prop is set, it will be rendered as a Vue Router router-link component. Make sure you don't want to use href.|
|to|`string`|`null`|If the prop is set, it will be rendered as a Vue Router `router-link`s component. Make sure you don't want to use `href` attr.|
### Ul, Ol Props
|Name|Type|Default|Description|

12
demo/documentation/components/typography/zhCN/index.md
View File

@ -1,8 +1,8 @@
# 排版 Typography
# 排印 Typography
Naive UI 提供了常用 HTML 标签的一些基本样式，以及对文本渲染提供帮助的组件。
排版是一门艺术。
排印是一门艺术。
## 演示
```demo
@ -12,6 +12,12 @@ text
```
## Props
### 全部排版组件
|名称|类型|默认值|说明|
|-|-|-|-|
|theme|`'light' \| 'dark'`|`null`||
### Text Props
|名称|类型|默认值|说明|
|-|-|-|-|
@ -39,7 +45,7 @@ text
### A Props
|名称|类型|默认值|说明|
|-|-|-|-|
|to|`string`|`null`|如果设定了 to prop，a 会被渲染为一个 Vue Router 的 router-link 标签。确保你想用的不是 href|
|to|`string`|`null`|如果设定了 to prop，a 会被渲染为一个 Vue Router 的 `router-link` 标签。确保你想用的不是 href 属性|
### Ul, Ol Props
|名称|类型|默认值|说明|

2
demo/menuOptions.js
View File

@ -167,7 +167,7 @@ export default function (locale, instance) {
},
{
name: 'Typography',
title: '排版',
title: '排印',
titleExtra: 'Typography',
path: `/${instance.lang}/${instance.theme}/doc` + '/n-typography'
}

9
src/Dropdown/src/Dropdown.vue
View File

@ -32,6 +32,12 @@ export default {
controller: {
type: Object,
default: () => ({})
},
theme: {
validator (value) {
return ['light', 'dark'].includes(value)
},
default: null
}
},
render (h, context) {
@ -54,7 +60,8 @@ export default {
submenuWidth: props.submenuWidth,
submenuMinWidth: props.submenuMinWidth,
options: props.options,
keyboard: props.keyboard
keyboard: props.keyboard,
theme: props.theme
},
on: {
select: context.listeners.select || (() => {})

9
src/Dropdown/src/DropdownMenu.vue
View File

@ -63,6 +63,13 @@ export default {
selectOptions () {
return createSelectOptions(this.options)
},
inheritedTheme () {
if (this.NDropdownMenu) {
return this.NDropdownMenu.inheritedTheme
} else {
return this.syntheticTheme
}
},
inheritedSubmenuWidth () {
if (this.NDropdownMenu) {
return this.NDropdownMenu.inheritedSubmenuWidth
@ -199,7 +206,7 @@ export default {
options: this.selectOptions,
size: this.size,
isOptionSelected: () => false,
theme: this.syntheticTheme
theme: this.inheritedTheme
},
style: {
overflow: 'visible'

8
src/Dropdown/src/DropdownSubmenu.vue
View File

@ -1,6 +1,5 @@
<script>
import NDropdownMenu from './DropdownMenu'
import themeable from '../../_mixins/themeable'
import NIcon from '../../Icon'
import iosArrowForward from '../../_icons/ios-arrow-forward'
import placeable from '../../_mixins/placeable'
@ -12,7 +11,7 @@ export default {
NIcon,
iosArrowForward
},
mixins: [ themeable, placeable ],
mixins: [ placeable ],
provide () {
return {
NDropdownSubmenu: this
@ -77,6 +76,9 @@ export default {
active () {
return this.menuActivated && this.menuPendingToBeActivated
},
inheritedTheme () {
return this.NDropdownMenu.inheritedTheme
},
syntheticStyleWidth () {
if (this.NDropdownMenu.inheritedSubmenuWidth) {
return this.NDropdownMenu.inheritedSubmenuWidth + 'px'
@ -209,7 +211,7 @@ export default {
style: this.style,
props: {
options: this.options,
theme: this.syntheticTheme,
theme: this.inheritedTheme,
size: this.size
}
}) : null

3
src/GradientText/src/main.vue
View File

@ -6,7 +6,6 @@
[`n-${syntheticTheme}-theme`]: syntheticTheme
}"
:style="{
...syntheticStyle,
fontSize: styleFontSize,
backgroundImage: styleBackgroundImage
}"
@ -34,7 +33,7 @@ export default {
},
type: {
type: String,
default: 'default'
default: 'primary'
},
color: {
type: [Object, String],

6
src/Popover/src/main.js
View File

@ -113,6 +113,12 @@ export default {
zIndex: {
type: String,
default: undefined
},
theme: {
validator (value) {
return ['light', 'dark'].includes(value)
},
default: null
}
},
render (h, context) {

3
src/Tag/src/main.vue
View File

@ -28,7 +28,6 @@
<script>
import withapp from '../../_mixins/withapp'
import themeable from '../../_mixins/themeable'
import asthemecontext from '../../_mixins/asthemecontext'
import mdClose from '../../_icons/md-close.vue'
export default {
@ -36,7 +35,7 @@ export default {
components: {
mdClose
},
mixins: [withapp, themeable, asthemecontext],
mixins: [withapp, themeable],
model: {
prop: 'checked',
event: 'checked-change'

4
styles/themes/dark/components/GradientText.scss
View File

@ -1,9 +1,9 @@
@mixin setup-dark-gradient-text {
$--gradient-text-background-image: (
"default": linear-gradient(252deg, $--n-primary-color 0%, $--n-primary-hs-color 100%),
"primary": linear-gradient(252deg, $--n-primary-color 0%, $--n-primary-hs-color 100%),
"success": linear-gradient(252deg, $--n-success-color 0%, $--n-success-hs-color 100%),
"warning": linear-gradient(252deg, $--n-warning-color 0%, $--n-warning-hs-color 100%),
"error": linear-gradient(252deg, $--n-error-color 0%, $--n-error-hs-color 100%),
"info": linear-gradient(252deg, $--n-info-color 0%, $--n-info-hs-color 100%),
"info": linear-gradient(252deg, $--n-info-color 0%, $--n-info-hs-color 100%)
) !global;
}

4
styles/themes/light/components/GradientText.scss
View File

@ -1,9 +1,9 @@
@mixin setup-light-gradient-text {
$--gradient-text-background-image: (
"default": linear-gradient(252deg, change-color($--n-primary-color, $alpha: .6) 0%, $--n-primary-color 100%),
"primary": linear-gradient(252deg, change-color($--n-primary-color, $alpha: .6) 0%, $--n-primary-color 100%),
"success": linear-gradient(252deg, change-color($--n-success-color, $alpha: .6) 0%, $--n-success-color 100%),
"warning": linear-gradient(252deg, change-color($--n-warning-color, $alpha: .6) 0%, $--n-warning-color 100%),
"error": linear-gradient(252deg, change-color($--n-error-color, $alpha: .6) 0%, $--n-error-color 100%),
"info": linear-gradient(252deg, change-color($--n-info-color, $alpha: .6) 0%, $--n-info-color 100%),
"info": linear-gradient(252deg, change-color($--n-info-color, $alpha: .6) 0%, $--n-info-color 100%)
) !global;
}