mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-07 13:48:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(auto-complete, typography, upload): better en (#1437)

Browse Source 
* Docs - Auto-complete

* Docs - Typography

* Docs - Upload
This commit is contained in:
Keagan Chisnall 2021-10-27 03:37:49 +10:00 committed by GitHub
parent 85701df091
commit 230e719d73
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 137 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/auto-complete/demos/enUS/basic.demo.md
View File

@ -1,5 +1,7 @@
# Basic
Start typing to see how this works.
```html
<n-auto-complete :options="options" v-model:value="value" placeholder="Email" />
```

2
src/auto-complete/demos/enUS/custom-input.demo.md
View File

@ -1,6 +1,6 @@
# Custom input element
You can also replace the input element of the auto-complete component.
You can also replace the input element of the auto-complete component (e.g. using a textarea).
```html
<n-auto-complete

54
src/auto-complete/demos/enUS/index.demo-entry.md
View File

@ -1,6 +1,6 @@
# Auto Complete
# AutoComplete
Use as a search hint or something similar.
Offer a search hint or maybe guess some likely options?
## Demos
@ -17,23 +17,23 @@ show-options-by-value
### AutoComplete Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| blur-after-select | `boolean` | `false` | Whether to blur after selection. |
| clear-after-select | `boolean` | `false` | Whether to clear after selection. |
| clearable | `boolean` | `false` | Whether auto complete is clearable. |
| default-value | `string` | `null` | Default value of auto complete. |
| disabled | `boolean` | `false` | Whether the auto complete is disabled. |
| get-show | `(value: string) => boolean` | `undefined` | Based on value to determine whether to show menu when focusing. |
| loading | `boolean` | `false` | Whether to show a loading status. |
| options | `Array<string \| AutoCompleteOption \| AutoCompleteGroupOption>` | `[]` | Auto complete options. |
| placeholder | `string` | `'Please Input'` | Auto complete's placeholder. |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Auto complete size. |
| value | `string` | `undefined` | Value of auto complete if being manually set. |
| on-blur | `(event: FocusEvent) => void` | `undefined` | On blur callback function. |
| on-focus | `(event: FocusEvent) => void` | `undefined` | On focus callback function. |
| on-select | `(value: string) => void` | `undefined` | On select callback function. |
| on-update:value | `(value: string \| null) => void` | `undefined` | On update callback function. |
| Name | Type | Default | Description |
| ------------------ | --------------------------------- | ---------------- | ------------------------------------------------------------ |
| blur-after-select | `boolean` | `false` | Whether to blur after selection. |
| clear-after-select | `boolean` | `false` | Whether to clear after selection. |
| clearable | `boolean` | `false` | Whether autocomplete is clearable. |
| default-value | `string` | `null` | Default value of autocomplete. |
| disabled | `boolean` | `false` | Whether the autocomplete is disabled. |
| get-show | `(value: string) => boolean` | `undefined` | Use the input to determine whether to show options on focus. |
| loading | `boolean` | `false` | Whether to show a loading status. |
| options | `Array<string \| AutoCompleteOption \| AutoCompleteGroupOption>` | `[]` | Options to autocomplete from. |
| placeholder | `string` | `'Please Input'` | Autocomplete's placeholder. |
| size | `'small' \| 'medium' \| 'large'` | `'medium'` | Autocomplete size. |
| value | `string` | `undefined` | Input of autocomplete. |
| on-blur | `(event: FocusEvent) => void` | `undefined` | On blur callback function. |
| on-focus | `(event: FocusEvent) => void` | `undefined` | On focus callback function. |
| on-select | `(value: string) => void` | `undefined` | On select callback function. |
| on-update:value | `(value: string \| null) => void` | `undefined` | On update callback function. |
#### AutoCompleteOption Properties
@ -45,15 +45,15 @@ show-options-by-value
#### AutoCompleteGroupOption Properties
| Name | Type | Description |
| --- | --- | --- |
| children | `Array<string \| AutoCompleteOption>` | Children options of AutoCompleteGroupOption. |
| label | `string` | The name of the AutoCompleteGroupOption. |
| label | `key` | The key of the AutoCompleteGroupOption. |
| type | `'group'` | The type of the AutoCompleteGroupOption. |
| Name | Type | Description |
| -------- | ------------------------------------- | ----------------------- |
| children | `Array<string \| AutoCompleteOption>` | Group children options. |
| label | `string` | Group label. |
| key | `key` | Unique group key. |
| type | `'group'` | Required group type. |
### AutoComplete Slots
| Name | Parameters | Description |
| --- | --- | --- |
| Name | Parameters | Description |
| ------- | --------------------------------------------- | -------------------------------------------- |
| default | `(options: { handleInput: (value: string) => void, handleFocus: function, handleBlur: function, value: string, theme: string \| null })` | Custom input elements, supplied by the user. |

2
src/typography/demos/enUS/header.demo.md
View File

@ -1,6 +1,6 @@
# Header
More attractive headers. Users love to see a bar to the left of the header; it makes it less boring.
Make your headers pop with a little bar to the left. Much less boring.
```html
<div style="padding-left: 24px; position: relative;">

54
src/typography/demos/enUS/index.demo-entry.md
View File

@ -1,8 +1,8 @@
# Typography
Naive UI provides some basic styling for common HTML tags; including components to render text better.
Naive UI provides some HTML text styling.
Typography is a kind of art.
Typography is an art.
## Demos
@ -17,44 +17,44 @@ router-link
### Text Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| type | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | Typography type. |
| strong | `boolean` | `false` | Strong. |
| italic | `boolean` | `false` | Italic. |
| underline | `boolean` | `false` | Underline. |
| delete | `boolean` | `false` | Strikethrough. |
| code | `boolean` | `false` | Code. |
| depth | `1 \| 2 \| 3 \| '1' \| '2' \| '3'` | `undefined` | Text depth. |
| tag | `string` | `undefined` | What tag should be this component be rendered as. Won't work when `code` or `del` is also used. |
| Name | Type | Default | Description |
| --------- | ---------------------------------------------------------- | ----------- | ------------------------------------------------------------- |
| type | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | Typography type. |
| strong | `boolean` | `false` | Strong. |
| italic | `boolean` | `false` | Italic. |
| underline | `boolean` | `false` | Underline. |
| delete | `boolean` | `false` | Use the `del` tag and strikethrough style. |
| code | `boolean` | `false` | Use the `code` tag and style. |
| depth | `1 \| 2 \| 3 \| '1' \| '2' \| '3'` | `undefined` | Text depth (shade of text). |
| tag | `string` | `undefined` | Tag to use. `code` or `delete` properties will override this. |
### P Props
| Name | Type | Default | Description |
| ----- | ---------------------------------- | ----------- | ----------- |
| depth | `1 \| 2 \| 3 \| '1' \| '2' \| '3'` | `undefined` | Text depth. |
| Name | Type | Default | Description |
| ----- | ---------------------------------- | ----------- | --------------------------- |
| depth | `1 \| 2 \| 3 \| '1' \| '2' \| '3'` | `undefined` | Text depth (shade of text). |
### H1, H2, H3, H4, H5, H6 Props
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| align-text | `boolean` | `false` | Text align. |
| type | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | Text depth. |
| prefix | `'bar'` | `undefined` | Show a bar in front of the heading. |
| Name | Type | Default | Description |
| ---------- | ---------------------------------------------------------- | ----------- | ----------------------------------- |
| align-text | `boolean` | `false` | Text alignment. |
| type | `'default' \| 'success' \| 'info' \| 'warning' \| 'error'` | `'default'` | Text color style. |
| prefix | `'bar'` | `undefined` | Show a bar in front of the heading. |
### Ul, Ol Props
| Name | Type | Default | Description |
| ---------- | --------- | ------- | ----------- |
| align-text | `boolean` | `false` | Text align. |
| Name | Type | Default | Description |
| ---------- | --------- | ------- | --------------- |
| align-text | `boolean` | `false` | Text alignment. |
### Blockquote Props
| Name | Type | Default | Description |
| ---------- | --------- | ------- | ----------- |
| align-text | `boolean` | `false` | Text align. |
| Name | Type | Default | Description |
| ---------- | --------- | ------- | --------------- |
| align-text | `boolean` | `false` | Text alignment. |
### All Typography Components
### All Typography Components Slots
| Name | Parameters | Description |
| ------- | ---------- | -------------------------- |

4
src/typography/demos/enUS/router-link.demo.md
View File

@ -1,8 +1,8 @@
# Use NA with Router Link
You can also use `<n-a />` within a router-link.
You can use `<n-a />` for links and routes.
If you think the following method is verbose, you can just make it a new component.
If you think the following method is a little verbose for routes, you can always make it a new component.
```html
<router-link to="/" #="{ navigate, href }" custom>

2
src/typography/demos/enUS/text.demo.md
View File

@ -1,6 +1,6 @@
# Text
Use different types of text to display different kinds of info.
Use different `types` to add some variety to your styles.
```html
<n-text type="info">Info</n-text>&nbsp;

4
src/upload/demos/enUS/abstract.demo.md
View File

@ -1,8 +1,8 @@
# Split trigger and list
Set `abstract` on `n-upload`.
Set `abstract` on `n-upload` to split the upload button (trigger) and file list as child components (`<n-upload-trigger />` and `<n-upload-file-list />`).
`n-upload-trigger` and `n-upload-file-list` need to be called from within `n-upload`.
Note: `n-upload-trigger` and `n-upload-file-list` must be children of `<n-upload />`.
```html
<n-upload

2
src/upload/demos/enUS/before-upload.demo.md
View File

@ -1,6 +1,6 @@
# Before upload hook
Use `before-upload` to prevent uploading.
Use `before-upload` to perform a function before the upload starts (e.g. cancel the upload).
```html
<n-upload

4
src/upload/demos/enUS/controlled.demo.md
View File

@ -1,6 +1,6 @@
# Controlled file list
# Autogenerated file list
Example is only a joke.
This example is just a joke.
```html
<n-upload

14
src/upload/demos/enUS/drag.demo.md
View File

@ -8,14 +8,12 @@
<archive-icon />
</n-icon>
</div>
<n-text style="font-size: 16px;"
>Click or drag file to this area to upload</n-text
>
<n-p depth="3" style="margin: 8px 0 0 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-text style="font-size: 16px;">
Click or drag a file to this area to upload
</n-text>
<n-p depth="3" style="margin: 8px 0 0 0;">
Strictly prohibit from uploading sensitive information. For example, your bank card PIN or your credit card expiry date.
</n-p>
</n-upload-dragger>
</n-upload>
```

4
src/upload/demos/enUS/image-card-style.demo.md
View File

@ -1,8 +1,8 @@
# Pictures wall
`list-type = "image-card"`.
Uploaded files can be displayed as a wall of thumbnails using `list-type = "image-card"`.
The preview in the photo wall will call the internal preview component by default, you can also use `on-preview` to customize the method of showing uploaded files.
By default, this will use Naive UI's internal preview component. You can also use `on-preview` to customize what to do when previewing a file.
```html
<n-upload

4
src/upload/demos/enUS/image-style.demo.md
View File

@ -1,8 +1,8 @@
# Thumbnail file list
`list-type = "image"`.
Uploaded files can be listed with types, such as `list-type = "image"`.
You can use `preview-file` to customize the thumbnails of the file.
Thumbnails can be created using your own custom method via the `create-thumbnail-url` property.
```html
<n-upload

100
src/upload/demos/enUS/index.demo-entry.md
View File

@ -1,6 +1,6 @@
# Upload
If latency doesn't matter, I'd like to use trucks with many hard disks.
If latency didn't matter, I'd just fill trucks with hard disks.
## Demos
@ -23,60 +23,60 @@ abstract
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| abstract | `boolean` | `false` | Whether or not DOM wrapping does not exist. Not supported for `image-card` type. |
| accept | `string` | `undefined` | The accept type of upload. See <n-a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept" target="_blank">accept</n-a>. |
| action | `string` | `undefined` | The URL to submit data to. |
| create-thumbnail-url | `(file: File) => Promise<string>` | `undefined` | Customize file thumbnails. |
| data | `Object \| ({ file: UploadFileInfo }) => Object` | `undefined` | The additional fileds data of HTTP request's form data. |
| default-file-list | `Array<UploadFileInfo>` | `[]` | The default file list in uncontrolled manner. |
| default-upload | `boolean` | `false` | If file uploaded immediatelly after file is selected. |
| disabled | `boolean` | `false` | Whether to disable the upload. |
| file-list-style | `Object` | `undefined` | The style of file list area |
| file-list | `Array<UploadFileInfo>` | `undefined` | The file list of component. If set, the component will work in controlled manner. |
| headers | `Object \| ({ file: UploadFileInfo }) => Object` | `undefined` | The additional HTTP Headers of request. |
| abstract | `boolean` | `false` | Split the upload button (trigger) and file list as child components (`<n-upload-trigger />` and `<n-upload-file-list />`). Not supported for a `list-type` property of `image-card`. |
| accept | `string` | `undefined` | The upload accept attribute. See <n-a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept" target="_blank">accept</n-a>. |
| action | `string` | `undefined` | The URL to upload to. |
| create-thumbnail-url | `(file: File) => Promise<string>` | `undefined` | Thumbnail generation function. |
| data | `Object \| ({ file: UploadFileInfo }) => Object` | `undefined` | `data` field of the HTTP request's form data. |
| default-file-list | `Array<UploadFileInfo>` | `[]` | The default file list. |
| default-upload | `boolean` | `false` | Whether the file is uploaded immediately after it is selected. |
| disabled | `boolean` | `false` | Disabled state. |
| file-list-style | `Object` | `undefined` | File list area style. |
| file-list | `Array<UploadFileInfo>` | `undefined` | The uploaded file list. |
| headers | `Object \| ({ file: UploadFileInfo }) => Object` | `undefined` | The additional HTTP Headers for the request. |
| list-type | `string` | `'text'` | Built-in styles for file lists, `text`, `image` and `image-card`. |
| max | `number` | `undefined` | Limit the number of uploaded files. |
| method | `string` | `'POST'` | The method of HTTP request. |
| multiple | `boolean` | `false` | If multiple files selection supported. |
| name | `string` | `'file'` | The field name of file in form data. |
| show-cancel-button | `boolean` | `true` | Whether to show remove button (at file pending, uploadin, error status). Click on cancel button will fire `on-remove` callback. |
| show-remove-button | `boolean` | `true` | Whether to show remove button (at file finished status). Click on remove button will fire `on-remove` callback. |
| show-retry-button | `boolean` | `true` | Whether to show retry button (at file error status). |
| show-file-list | `boolean` | `true` | Whether to show file list. |
| show-preview-button | `boolean` | `true` | Whether it is available to show the preview button (when `list-type` is `image-card`). |
| with-credentials | `boolean` | `false` | If cookie attached. |
| on-change | `(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo>, event?: Event }) => void` | `() => {}` | The callback of status change of the component. Any file status change would fire the callback. |
| on-update:file-list | `(fileList: UploadFileInfo[]) => void` | `undefined` | Callback function triggered on fileList changes. |
| on-finish | `(options: { file: UploadFileInfo, event: Event }) => UploadFileInfo \| void` | `({ file }) => file` | The callback of file upload finish. You can modify the UploadFileInfo or retun a new UploadFileInfo. |
| on-remove | `(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo> }) => boolean \| Promise<boolean> \| any` | `() => true` | The callback of file removal. Return false, promise resolve false or promise reject will cancel this removal. |
| on-before-upload | `(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo> }) => (Promise<boolean \| void> \| boolean \| void)` | `true` | Callback before file is uploaded, return false or a Promise that resolve false or reject will cancel this upload. |
| on-preview | `(file: FileInfo) => void` | `undefined` | Callback functions for clicking on file links or preview buttons. |
| max | `number` | `undefined` | Uploaded files limit. |
| method | `string` | `'POST'` | The HTTP request method. |
| multiple | `boolean` | `false` | Allow multiple files to be selected. |
| name | `string` | `'file'` | The field name for the file(s) in the HTTP request's form data. |
| show-cancel-button | `boolean` | `true` | Show a cancel button (while uploading). Use the `on-remove` callback for this event. |
| show-remove-button | `boolean` | `true` | Show a remove button (after upload completed). Use the `on-remove` callback for this event. |
| show-retry-button | `boolean` | `true` | Show a retry button (for a failed upload). |
| show-file-list | `boolean` | `true` | Show a file list. |
| show-preview-button | `boolean` | `true` | Show a preview button (when `list-type` is `image-card`). Use the `on-preview` callback for this event. |
| with-credentials | `boolean` | `false` | Any credentials to be sent with the request (e.g. cookie). |
| on-change | `(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo>, event?: Event }) => void` | `() => {}` | Uploaded file(s) status change callback. |
| on-update:file-list | `(fileList: UploadFileInfo[]) => void` | `undefined` | Callback function triggered on file-list changes. |
| on-finish | `(options: { file: UploadFileInfo, event: Event }) => UploadFileInfo \| void` | `({ file }) => file` | Upload finished callback. You can intercept and even modify the uploaded `UploadFileInfo`. |
| on-remove | `(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo> }) => boolean \| Promise<boolean> \| any` | `() => true` | File removed callback. Returning `false`, a promise resolved with `false`, or a rejected promise will cancel this removal. |
| on-before-upload | `(options: { file: UploadFileInfo, fileList: Array<UploadFileInfo> }) => (Promise<boolean \| void> \| boolean \| void)` | `true` | Upload ready to start callback. Returning `false`, a promise resolved with `false`, or a rejected promise will cancel the upload. |
| on-preview | `(file: FileInfo) => void` | `undefined` | Callback for clicking file links or preview buttons. |
#### UploadFileInfo Type
| Property | Type | Description |
| --- | --- | --- |
| id | `string \| number` | The id of the file. Need to be unique. |
| name | `string` | Filename. |
| status | `'pending' \| 'uploading' \| 'error' \| 'finished' \| 'removed'` | The status of file. |
| percentage | `number` | The progress percentage of file upload. It works when the file is uploading. |
| file? | `File \| null` | The File object of the file in browser. |
| thumbnailUrl? | `string \| null` | Thumbnail URL. |
| type? | `string \| null` | MIME type. |
| url? | `string \| null` | File URL. |
| Property | Type | Description |
| ------------- | ---------------------------------------------------------------- | --------------------------------------------------- |
| id | `string \| number` | Unique file ID. |
| name | `string` | Filename. |
| status | `'pending' \| 'uploading' \| 'error' \| 'finished' \| 'removed'` | The status of file. |
| percentage | `number` | The progress percentage of the file being uploaded. |
| file? | `File \| null` | The object of the file stored in the browser. |
| thumbnailUrl? | `string \| null` | Thumbnail URL. |
| type? | `string \| null` | MIME type. |
| url? | `string \| null` | File URL. |
### UploadTrigger Props
| Name | Type | Default | Description |
| -------- | --------- | ------- | ------------------------------------------- |
| abstract | `boolean` | `false` | Whether or not DOM wrapping does not exist. |
| abstract | `boolean` | `false` | Whether or not to use the `abstract` mode. |
### Upload Methods
| Name | Type | Description |
| --- | --- | --- |
| submit | `(fileId?: string \| number)` | Submit all files in pending status. |
| openFileDialog | `() => void` | Open file dialog. |
| Name | Type | Description |
| -------------- | ----------------------------- | ------------------------------------- |
| submit | `(fileId?: string \| number)` | Submit all files with pending status. |
| openFileDialog | `() => void` | Open the file dialog window. |
### Upload Slots
@ -86,12 +86,14 @@ abstract
### UploadDragger Slots
| Name | Parameters | Description |
| --- | --- | --- |
| default | `()` | The content of the upload dragger, use can refer to <n-a href="#drag">Drag to Upload</n-a>. |
| Name | Parameters | Description |
| ------- | ---------- | ------------------------------------------------------------------------------------------------------ |
| default | `()` | The placeholder of the upload dragger; For an example see <n-a href="#drag">Drag to Upload Demo</n-a>. |
### UploadTrigger Slots
| 名称 | 参数 | 说明 |
| --- | --- | --- |
| default | `(options: { handleClick: () => void, handleDragOver: (e: DragEvent) => void, handleDragEnter: (e: DragEvent) => void, handleDragLeave: (e: DragEvent) => void, handleDrop: (e: DragEvent) => void})` | `handleClick` is the click upload function, `handleDrop` is the drag and drop upload function, `handleDragEnter`, `handleDragOver` and `handleDragLeave` are the drag and drop event functions. |
| Name | Parameters | Description |
| ------- | ---------- | ----------- |
| default | `(options: { handleClick: () => void, handleDragOver: (e: DragEvent) => void, handleDragEnter: (e: DragEvent) => void, handleDragLeave: (e: DragEvent) => void, handleDrop: (e: DragEvent) => void})` | `handleClick` is the click upload function, `handleDrop` is the drag and drop upload function, `handleDragEnter`, `handleDragOver` and `handleDragLeave` are the drag and drop event functions. |

4
src/upload/demos/enUS/on-finish.demo.md
View File

@ -1,6 +1,6 @@
# Change file on finish
You can change file's property when upload finishes.
You can change a file's properties after its upload has finished.
```html
<n-upload
@ -20,6 +20,8 @@ export default defineComponent({
const message = useMessage()
const handleFinish = ({ file, event }) => {
message.success(event.target.response)
const ext = file.name.split('.')[1]
file.name = `renamed.${ext}`
file.url = '__HTTP__://www.mocky.io/v2/5e4bafc63100007100d8b70f'
}
return {

2
src/upload/demos/enUS/submit-manually.demo.md
View File

@ -1,6 +1,6 @@
# Uncontrolled manually submit
You can use `submit` method to submit in uncontrolled manner. Also you can do it in controlled manner in another way.
You can use a `ref` to get a handle on files uploaded, and the `submit` method to submit them when you're ready.
```html
<n-button

6
src/upload/demos/zhCN/drag.demo.md
View File

@ -9,9 +9,9 @@
</n-icon>
</div>
<n-text style="font-size: 16px;">点击或者拖动文件到该区域来上传</n-text>
<n-p depth="3" style="margin: 8px 0 0 0;"
>请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码</n-p
>
<n-p depth="3" style="margin: 8px 0 0 0;">
请不要上传敏感数据，比如你的银行卡号和密码，信用卡号有效期和安全码
</n-p>
</n-upload-dragger>
</n-upload>
```

2
src/upload/demos/zhCN/image-style.demo.md
View File

@ -2,7 +2,7 @@
`list-type="image"`。
你可以使用 `preview-file`自定义文件的缩略图。
你可以使用 `create-thumbnail-url` 自定义文件的缩略图。
```html
<n-upload

2
src/upload/demos/zhCN/on-finish.demo.md
View File

@ -20,6 +20,8 @@ export default defineComponent({
const message = useMessage()
const handleFinish = ({ file, event }) => {
message.success(event.target.response)
const ext = file.name.split('.')[1]
file.name = `更名.${ext}`
file.url = '__HTTP__://www.mocky.io/v2/5e4bafc63100007100d8b70f'
}
return {