mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'docs'

Browse Source
This commit is contained in:
07akioni 2022-02-04 21:48:41 +08:00
commit 7ab17de75e
17 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/pages/docs/common-issues/enUS/index.md
View File

@ -24,4 +24,4 @@ That is because `v-model:value="xxx"` will be transformed to `:onUpdate:value="x
However if you are using `on-update:value="yyy"`, Vue would generate code like `:onUpdate:value="xxx" :on-update-value="yyy"` and the second one would override the first one in Vue runtime. The `v-model:value` would be broken.
If you have any problem, feel free to create a PR or issue on GitHub.
If you have any problems, feel free to create a PR or issue on GitHub.

2
demo/pages/docs/community/enUS/index.md
View File

@ -2,7 +2,7 @@
# Third-Party Libraries
Naive-ui is a high-quality Vue component library of unified design specifications, We prefer to provide only UI components with a unified specification and visual presentation. So we recommend the following great resources from the community that complement naive-ui.
Naive-ui is a high-quality Vue component library of unified design specifications. We prefer to provide only UI components with a unified specification and visual presentation. So we recommend the following great resources from the community that complement naive-ui.
If you want to contribute excellent resources, please contact 07akioni or amadeus711 in the community of `Discord` or `DingTalk`.

8
demo/pages/docs/customize-theme/enUS/index.md
View File

@ -2,11 +2,11 @@
# Customizing theme
Naive-ui provide `n-config-provider` to customize the theme.
Naive-ui provides `n-config-provider` to customize the theme.
By default all the component is light themed, without any configuration.
By default all of the components are light themed, without any configuration.
Learn more about `n-config-provider`, see [Config Provider](../components/config-provider).
To learn more about `n-config-provider`, see [Config Provider](../components/config-provider).
## Use dark theme
@ -255,7 +255,7 @@ You can use `n-global-style` to sync common global style to the body element. In
## Theme editor
Naive-ui provides theme editor to help you edit theme and export the corresponding configuration. It can be placed inside `n-config-provider`.
Naive-ui provides a theme editor to help you edit theme and export the corresponding configuration. It can be placed inside `n-config-provider`.
The theme editor is not included in global installation (`app.use(naive)`). You need to import it explicitly to use it.

4
demo/pages/docs/fonts/enUS/index.md
View File

@ -1,6 +1,6 @@
# Configuring Fonts
Naive UI works with [vfonts](https://github.com/07akioni/vfonts). You can use font from `vfonts` easily which includes general fonts and monospace fonts.
Naive UI works with [vfonts](https://github.com/07akioni/vfonts). You can use fonts from `vfonts` easily which includes general fonts and monospace fonts.
Just import fonts from in your app's entry file. Then it will work.
@ -17,7 +17,7 @@ import 'vfonts/FiraCode.css'
// ...
```
Note: Different fonts from vfonts has different font weight, if you want to use `Lato` or `OpenSans` you need to configure the global font weight of naive-ui.
Note: Different fonts from vfonts have different font weights. If you want to use `Lato` or `OpenSans` you need to configure the global font weight of naive-ui.
```html
<!-- configuring the global font weight -->

6
demo/pages/docs/i18n/enUS/index.md
View File

@ -2,9 +2,9 @@
# Internationalization
Naive-ui provide `n-config-provider` to customize the internationalization. By default, all components are in English.
Naive-ui provides `n-config-provider` to customize the internationalization. By default, all components are in English.
Learn more about `n-config-provider`, see [Config Provider](../components/config-provider).
To learn more about `n-config-provider`, see [Config Provider](../components/config-provider).
## Configure
@ -40,7 +40,7 @@ Set `n-config-provider`'s `date-locale` prop to `dateEnUS` imported from naive-u
## Supported languages
PR is welcomed for locales that is not supported yet!
PRs are welcomed for locales that are not supported yet!
| Language | Config | Date config | Version |
| ------------------------- | ------ | ----------- | ------- |

6
demo/pages/docs/import-on-demand/enUS/index.md
View File

@ -1,8 +1,8 @@
# Import on Demand (Tree Shaking)
Naive UI support tree shaking for components, locales and themes.
Naive UI supports tree shaking for components, locales and themes.
By default the component theme is light, locale is enUS, no extra imports is needed.
By default the component theme is light, locale is enUS, and no extra imports are needed.
For more info about theming, see [Customizing Theme](customize-theme).
@ -69,7 +69,7 @@ const app = createApp()
app.use(naive)
```
After the installation. You can use the components you installed in SFC like this.
After the installation, you can use the components you installed in SFC like this.
```html
<template>

2
demo/pages/docs/installation/enUS/index.md
View File

@ -2,7 +2,7 @@
# Installation
> Please note that naive-ui only support Vue3. If you are using Vue2, you may look at other libraries.
> Please note that naive-ui only supports Vue3. If you are using Vue2, you may look at other libraries.
Use npm to install.

6
demo/pages/docs/introduction/enUS/index.md
View File

@ -6,7 +6,7 @@ Naive UI is a Vue 3 component library.
To know how to install it, see [Installation](installation).
It is fairly complele, themeable, written in typescript, not too slow.
It is fairly complete, themeable, written in typescript, not too slow.
## Fairly Complete
@ -16,13 +16,13 @@ What's more, they are all treeshakable.
## Customizable Themes
We provide an advanced type safe theme system that built with typescript. All you need is to provide a theme overrides object in JS. Then all the stuffs will be done by us.
We provide an advanced type safe theme system that is built with typescript. All you need is to provide a theme overrides object in JS. Then all the stuffs will be done by us.
What's more, no less/sass/css variables, no webpack loaders are required. And you can try the theme editor on the bottom right of the page.
## Uses TypeScript
All the staff in Naive UI is written in TypeScript. It can work with your typescript project seamlessly.
All the stuff in Naive UI is written in TypeScript. It can work with your typescript project seamlessly.
What's more, you don't need to import any CSS to use the components.

6
demo/pages/docs/jsx/enUS/index.md
View File

@ -4,11 +4,11 @@
## Enable JSX & TSX
About how to enable JSX & TSX please look at your toolchain's docs.
For how to enable JSX & TSX, please look at your toolchain's docs.
## Use Component
We recommend importing component directly when using JSX.
We recommend importing components directly when using JSX.
```js
import { defineComponent } from 'vue'
@ -25,6 +25,6 @@ export default defineComponent({
In naive-ui, all props look like `on-update:*` has a corresponding `onUpdate*` prop (since in JSX `on-update:*` and `onUpdate:*` are not valid prop names).
If you find it doesn't exist, I must forget to make it. Please create an issue or PR.
If you find it doesn't exist, I must have forgotten to make it. Please create an issue or PR.
For example, `<n-select @update:value="..." />` in template can be written in `<NSelect onUpdateValue={...} />`.

4
demo/pages/docs/style-position/enUS/index.md
View File

@ -2,7 +2,7 @@
Sometimes you want to control where the style element should be inserted.
For example. If you have a tailwind reset style, you don't want it to be inserted after naive-ui's style. Since it may overrides button's style, etc.
For example. If you have a tailwind reset style, you don't want it to be inserted after naive-ui's style. Since it may override button's style, etc.
You can create a `<meta name="naive-ui-style" />` element inside `head` element, then naive-ui's style will be inserted right before it.
@ -21,7 +21,7 @@ Also, naive-ui uses [vueuc](https://github.com/07akioni/vueuc). If you need, its
## About tailwind's style override
You may find add meta tag to your static html files doesn't work (naive's style would still be overrided), since your toolchain may always insert tailwind style at the end of head tag. In this situation, you need to insert meta tag dynamically right before app is mounted.
You may find adding a meta tag to your static html files doesn't work (naive's style would still be overriden), since your toolchain may always insert tailwind's style at the end of the head tag. In this situation, you need to insert the meta tag dynamically right before the app is mounted.
```ts
const meta = document.createElement('meta')

6
demo/pages/docs/supported-platforms/enUS/index.md
View File

@ -6,9 +6,9 @@
IE is not supported.
Modern browsers such as `Edge`, `Firefox`, `Chrome`, `Safari` is tested on the latest 2 versions.
Modern browsers such as `Edge`, `Firefox`, `Chrome`, `Safari` are tested on the latest 2 versions.
No strict tests are be implemented on other versions due to the constraint of develop resources, but naive-ui is expected to work on those browsers which version is not too old (eg. in 2 years). If you find any problem please feel free to create an issue.
No strict tests are being implemented on other versions due to the constraint of development resources, but naive-ui is expected to work on those browsers whose version is not too old (eg. in 2 years). If you find any problems please feel free to create an issue.
## Vue
@ -16,4 +16,4 @@ Only Vue 3 (>3.0.5) is supported.
## TypeScript
Require version > 4.1.
Requires version > 4.1.

2
demo/pages/docs/theme/enUS/index.demo-entry.md vendored
View File

@ -2,7 +2,7 @@
You may not want to use only the provided components and want to write themed components.
Naive UI provide some tools for developers to create themed components easier.
Naive UI provides some tools for developers to create themed components easier.
## Demos

2
demo/pages/docs/theme/enUS/provide-theme.demo.md vendored
View File

@ -1,6 +1,6 @@
# Provide Theme
Use `n-config-provider` to set the theme of all its descedant components.
Use `n-config-provider` to set the theme of all its descendant components.
```html
<n-config-provider :theme="theme">

2
demo/pages/docs/theme/enUS/use-theme-vars.demo.md vendored
View File

@ -1,6 +1,6 @@
# useThemeVars
Naive UI provide `useThemeVars`. It contains common theme variables.
Naive UI provides `useThemeVars`. It contains common theme variables.
```html
<pre style="overflow: auto;">{{ themeVars }}</pre>

8
demo/pages/docs/usage-sfc/enUS/index.md
View File

@ -6,7 +6,7 @@ You can directly import components from Naive UI or install it globally to a Vue
## Import Directly (Recommended)
You can import component directly and use it. In this form, only components imported will be bundled.
You can import a component directly and use it. In this form, only components imported will be bundled.
If you want to know how to import themes and locales, please see [Import on Demand](import-on-demand).
@ -45,7 +45,7 @@ If you can use vue setup script, you can use it like this.
No tree-shaking. Bundle will have redundant codes.
If you want to install globally but not want all components, please see [Import on Demand](import-on-demand).
If you want to install globally but don't want all components, please see [Import on Demand](import-on-demand).
```js
import { createApp } from 'vue'
@ -55,7 +55,7 @@ const app = createApp(App)
app.use(naive)
```
After the installation. You can use all the components in you SFC like this.
After the installation, you can use all the components in your SFC like this.
```html
<template>
@ -65,7 +65,7 @@ After the installation. You can use all the components in you SFC like this.
### Volar support (2.24.2)
If you are using Volar, you can specify global component types by configure `compilerOptions.types` in `tsconfig.json`.
If you are using Volar, you can specify global component types by configuring `compilerOptions.types` in `tsconfig.json`.
```json
// tsconfig.json

2
src/select/demos/enUS/index.demo-entry.md
View File

@ -54,7 +54,7 @@ tag-input.vue
| remote | `boolean` | `false` | Allows options to be fetched asynchronously. Note that if `remote` is set, `filter` & `tag` won't work on `options`. | |
| render-label | `(option: SelectOption \| SelectGroupOption, selected: boolean) => VNodeChild` | `undefined` | Render function for each option label. | |
| render-option | `(info: { node: VNode, option: SelectOption \| SelectGroupOption, selected: boolean }) => VNodeChild` | `undefined` | Render function for each option. | |
| render-tag | `(option: SelectBaseOption, onClose: () => void) => VNodeChild` | `undefined` | Render function for each option tag. | |
| render-tag | `(props: { option: SelectBaseOption, onClose: () => void }) => VNodeChild` | `undefined` | Render function for each option tag. | |
| reset-menu-on-options-change | `boolean` | `true` | Whether to reset menu staus on options change, for example, scroll status. | 2.24.2 |
| show | `boolean` | `undefined` | Whether to show/open the option menu. | |
| show-arrow | `boolean` | `true` | Whether to show the dropdown arrow. | |

2
src/select/demos/zhCN/index.demo-entry.md
View File

@ -60,7 +60,7 @@ filterable-debug.vue
| remote | `boolean` | `false` | 是否要异步获取选项。注意如果设定了，那么 `filter` 和 `tag` 都不会对 `options` 生效。这个时候你在全权控制 `options` | |
| render-label | `(option: SelectOption \| SelectGroupOption, selected: boolean) => VNodeChild` | `undefined` | 选项标签渲染函数 | |
| render-option | `(info: { node: VNode, option: SelectOption \| SelectGroupOption, selected: boolean }) => VNodeChild` | `undefined` | 选项的渲染函数 | |
| render-tag | `(option: SelectBaseOption, onClose: () => void) => VNodeChild` | `undefined` | 控制标签的渲染 | |
| render-tag | `(props: { option: SelectBaseOption, onClose: () => void }) => VNodeChild` | `undefined` | 控制标签的渲染 | |
| reset-menu-on-options-change | `boolean` | `true` | 是否在选项变化时重置菜单状态，例如滚动状态 | 2.24.2 |
| show | `boolean` | `undefined` | 是否展示菜单 | |
| show-arrow | `boolean` | `true` | 是否展示箭头 | |