Skip to content

Commit

Permalink
docs: 4.1.6
Browse files Browse the repository at this point in the history
  • Loading branch information
@eiinu
eiinu committed Sep 19, 2023
1 parent a6b5342 commit 2a02972
Show file tree
Hide file tree
Showing 11 changed files with 194 additions and 119 deletions.
16 changes: 8 additions & 8 deletions src/packages/__VUE/calendar/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -632,7 +632,7 @@ When set to week selection, the start and end dates of the week will be determin

:::

### Custom Footer
### Custom Footer v4.1.6

:::demo

Expand Down Expand Up @@ -775,13 +775,13 @@ When set to week selection, the start and end dates of the week will be determin

### Slots

| Name | Description |
| ----------- | ------------------------------------------------------------ |
| btn | Below the custom calendar header, you can add custom actions |
| day | Date information |
| top-info | Date top information |
| bottom-info | Date bottom information |
| footer-info | Custom calendar Footer, replace confirm btn |
| Name | Description |
| ------------------- | ------------------------------------------------------------ |
| btn | Below the custom calendar header, you can add custom actions |
| day | Date information |
| top-info | Date top information |
| bottom-info | Date bottom information |
| footer-info`v4.1.6` | Custom calendar Footer, replace confirm btn |

### Methods

Expand Down
16 changes: 8 additions & 8 deletions src/packages/__VUE/calendar/doc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -583,7 +583,7 @@ app.use(Calendar);

:::

### 自定义底部区域
### 自定义底部区域 v4.1.6

:::demo

Expand Down Expand Up @@ -785,13 +785,13 @@ app.use(Calendar);

### Slots

| 名称 | 说明 |
| ----------- | ---------------------------------------- |
| btn | 自定义日历标题下部，可用以添加自定义操作 |
| day | 日期信息 |
| top-info | 日期顶部信息 |
| bottom-info | 日期底部信息 |
| footer-info | 日历自定义底部，替代confirm按钮 |
| 名称 | 说明 |
| ------------------- | ---------------------------------------- |
| btn | 自定义日历标题下部，可用以添加自定义操作 |
| day | 日期信息 |
| top-info | 日期顶部信息 |
| bottom-info | 日期底部信息 |
| footer-info`v4.1.6` | 日历自定义底部，替代confirm按钮 |

### Methods

Expand Down
13 changes: 7 additions & 6 deletions src/packages/__VUE/calendar/doc.taro.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -712,12 +712,13 @@ app.use(Calendar);

### Slots

| 名称 | 说明 |
| ----------- | ---------------------------------------- |
| btn | 自定义日历标题下部，可用以添加自定义操作 |
| day | 日期信息 |
| top-info | 日期顶部信息 |
| bottom-info | 日期底部信息 |
| 名称 | 说明 |
| ------------------- | ---------------------------------------- |
| btn | 自定义日历标题下部，可用以添加自定义操作 |
| day | 日期信息 |
| top-info | 日期顶部信息 |
| bottom-info | 日期底部信息 |
| footer-info`v4.1.6` | 日历自定义底部，替代confirm按钮 |

### Methods

Expand Down
16 changes: 8 additions & 8 deletions src/packages/__VUE/cell/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const click = () => {

:::

### Use Slots desc
### Use Slots desc v4.1.6

:::demo

Expand Down Expand Up @@ -231,13 +231,13 @@ You can center the left and right contents of the cell vertically through the 'c

### Cell Slots

| Name | Description |
| ------- | ------------------- |
| icon | Custom Left `icon` |
| default | Default slot |
| link | Custom Right `link` |
| title | Custom `title` slot |
| desc | Custom `desc` slot |
| Name | Description |
| ------------ | ------------------- |
| icon | Custom Left `icon` |
| default | Default slot |
| link | Custom Right `link` |
| title | Custom `title` slot |
| desc`v4.1.6` | Custom `desc` slot |

### CellGroup Slots

Expand Down
16 changes: 8 additions & 8 deletions src/packages/__VUE/cell/doc.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const click = () => {

:::

### 直接使用插槽（slot desc）
### 直接使用插槽（slot desc）v4.1.6

:::demo

Expand Down Expand Up @@ -231,13 +231,13 @@ import { My } from '@nutui/icons-vue';

### Cell Slots

| 名称 | 说明 |
| ------- | ----------------------- |
| icon | 自定义左侧 `icon` 区域 |
| default | 自定义内容 |
| link | 自定义右侧 `link` 区域 |
| title | 自定义 `title` 标题区域 |
| desc | 自定义 `desc` 描述区域 |
| 名称 | 说明 |
| ------------ | ----------------------- |
| icon | 自定义左侧 `icon` 区域 |
| default | 自定义内容 |
| link | 自定义右侧 `link` 区域 |
| title | 自定义 `title` 标题区域 |
| desc`v4.1.6` | 自定义 `desc` 描述区域 |

### CellGroup Slots

Expand Down
16 changes: 8 additions & 8 deletions src/packages/__VUE/cell/doc.taro.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const click = () => {

:::

### 直接使用插槽（slot desc）
### 直接使用插槽（slot desc）v4.1.6

:::demo

Expand Down Expand Up @@ -228,13 +228,13 @@ import { My } from '@nutui/icons-vue-taro';

### Cell Slots

| 名称 | 说明 |
| ------- | ----------------------- |
| icon | 自定义左侧 `icon` 区域 |
| default | 自定义内容 |
| link | 自定义右侧 `link` 区域 |
| title | 自定义 `title` 标题区域 |
| desc | 自定义 `desc` 描述区域 |
| 名称 | 说明 |
| ------------ | ----------------------- |
| icon | 自定义左侧 `icon` 区域 |
| default | 自定义内容 |
| link | 自定义右侧 `link` 区域 |
| title | 自定义 `title` 标题区域 |
| desc`v4.1.6` | 自定义 `desc` 描述区域 |

### CellGroup Slots

Expand Down
138 changes: 106 additions & 32 deletions src/packages/__VUE/searchbar/doc.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ app.use(Searchbar);

:::demo

````html
```html
<template>
<nut-searchbar v-model="searchValue">
<template #leftin>
Expand All @@ -113,7 +113,15 @@ app.use(Searchbar);
}
};
</script>
``` ::: ### Add search text to the right :::demo ```html
```

:::

### Add search text to the right

:::demo

```html
<template>
<nut-searchbar v-model="searchValue">
<template #rightout> Search </template>
Expand All @@ -133,7 +141,15 @@ app.use(Searchbar);
}
};
</script>
``` ::: ### Change the background style inside and outside the input box :::demo ```html
```

:::

### Change the background style inside and outside the input box

:::demo

```html
<template>
<nut-searchbar v-model="searchValue" background="linear-gradient(to right, #9866F0, #EB4D50)" input-background="#fff">
</nut-searchbar>
Expand All @@ -152,7 +168,15 @@ app.use(Searchbar);
}
};
</script>
``` ::: ### Custom Clear Button icon :::demo ```html
```

:::

### Custom Clear Button icon

:::demo

```html
<template>
<nut-searchbar v-model="searchValue">
<template #clear-icon>
Expand All @@ -177,7 +201,15 @@ app.use(Searchbar);
}
};
</script>
``` ::: ### Show all icons :::demo ```html
```

:::

### Show all icons

:::demo

```html
<template>
<nut-searchbar v-model="searchValue">
<template #leftout>
Expand Down Expand Up @@ -210,31 +242,73 @@ app.use(Searchbar);
}
};
</script>
``` ::: ## API ### Props | Parameter | Description | Type | Default | |--------------|----------------------------------
|-------|------------------| | v-model | current input value | number /| string | `''` | | label| left text of search
box | string | `''` | | shape | search box shape, optional value is `square` `round` | string | `round` | | max-length |
maximum input length | number \| string | `9999` | | input-type | input box type | string | `text` | | placeholder | The
default dark pattern of the input box | string | `Please enter` | | clearable | whether to show clear button | boolean |
`true` | | clear-icon | custom clear button icon (default use `@nutui/nutui-icons`) | Object | `CircleClose` | |
background | external background of the input box | string | `#fff` | | input-background | background of input box |
string | `#f7f7f7` | | autofocus | Whether to automatically focus | boolean | `false` | | focus-style | search box style
when focused | Object | `-` | | disabled | Whether to disable the input box | boolean | `false` | | readonly| input
field is read only | boolean | `false` | | input-align| alignment, optional `left` `center` `right` | string | `left` |
| safe-area-inset-bottom | Whether to enable the security zone at the bottom of the full screen of iphone series |
boolean | `false` | ### Events | Event Name | Description | Callback Parameters |
|--------|----------------|--------------| | change | fires when something is entered | `val, event` | | focus | fires
on focus | `val, event` | | blur | Triggered when out of focus | `val, event` | | clear | Triggered when click clear |
`val` | | search | fires when the ENTER key is pressed | `val, event` | | click-input| Fired when the input field is
clicked | `event` | | click-left-icon| Fires when the left icon is clicked | `val, event` | | click-right-icon| Fires
when the right icon is clicked | `val, event` | ### Slots | Name | Description |
|---------------|----------------------| |leftIn | left icon in the input box| |leftout | left Icon outside the input
box| |rightin | right icon in the input box| |rightout | right icon outside the input box| ## Theming ### CSS Variables
```

:::

## API

### Props

| Parameter | Description | Type | Default |
| ------------------------------ | ------------------------------------------------------------------------------------- | ---------------- | -------------- | ---- |
| v-model | current input value | number / | string | `''` |
| label | left text of search box | string | `''` |
| shape | search box shape, optional value is `square` `round` | string | `round` |
| max-length | maximum input length | number \| string | `9999` |
| input-type | input box type | string | `text` |
| placeholder | The default dark pattern of the input box | string | `Please enter` |
| clearable | whether to show clear button | boolean | `true` |
| clear-icon | custom clear button icon (default use `@nutui/nutui-icons`) | Object | `CircleClose` |
| background | external background of the input box | string | `#fff` |
| input-background | background of input box | string | `#f7f7f7` |
| autofocus | Whether to automatically focus | boolean | `false` |
| focus-style | search box style when focused | Object | `-` |
| disabled | Whether to disable the input box | boolean | `false` |
| readonly | input field is read only | boolean | `false` |
| input-align | alignment, optional `left` `center` `right` | string | `left` |
| safe-area-inset-bottom`v4.1.6` | Whether to enable the security zone at the bottom of the full screen of iphone series | boolean | `false` |

### Events

| Event Name | Description | Callback Parameters |
| ---------------- | ------------------------------------- | ------------------- |
| change | fires when something is entered | `val, event` |
| focus | fires on focus | `val, event` |
| blur | Triggered when out of focus | `val, event` |
| clear | Triggered when click clear | `val` |
| search | fires when the ENTER key is pressed | `val, event` |
| click-input | Fired when the input field is clicked | `event` |
| click-left-icon | Fires when the left icon is clicked | `val, event` |
| click-right-icon | Fires when the right icon is clicked | `val, event` |

### Slots

| Name | Description |
| -------- | -------------------------------- |
| leftin | left icon in the input box |
| leftout | left Icon outside the input box |
| rightin | right icon in the input box |
| rightout | right icon outside the input box |

## Theming

### CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to
[ConfigProvider component](#/en-US/component/configprovider). | Name | Default Value | |
--------------------------------------- | -------------------------- | | --nut-searchbar-background| _var(--nut-white)_
| | --nut-searchbar-right-out-color| _var(--nut-black)_ | | --nut-searchbar-padding| _9px 16px_ | |
--nut-searchbar-width| _100%_ | | --nut-searchbar-input-background| _#f7f7f7_ | | --nut-searchbar-input-padding| _0 0 0
13px_ | | --nut-searchbar-input-height| _32px_ | | --nut-searchbar-input-width| _100%_ | |
--nut-searchbar-input-border-radius| _16px_ | | --nut-searchbar-input-box-shadow| _0 0 8px 0 rgba(0, 0, 0, 0.04)_ | |
--nut-searchbar-input-bar-color| _inherit_ | | --nut-searchbar-input-bar-placeholder-color| _inherit_ |
````
[ConfigProvider component](#/en-US/component/configprovider).

| Name | Default Value |
| ------------------------------------------- | ------------------------------- |
| --nut-searchbar-background | _var(--nut-white)_ |
| --nut-searchbar-right-out-color | _var(--nut-black)_ |
| --nut-searchbar-padding | _9px 16px_ |
| --nut-searchbar-width | _100%_ |
| --nut-searchbar-input-background | _#f7f7f7_ |
| --nut-searchbar-input-padding | _0 0 0 13px_ |
| --nut-searchbar-input-height | _32px_ |
| --nut-searchbar-input-width | _100%_ |
| --nut-searchbar-input-border-radius | _16px_ |
| --nut-searchbar-input-box-shadow | _0 0 8px 0 rgba(0, 0, 0, 0.04)_ |
| --nut-searchbar-input-bar-color | _inherit_ |
| --nut-searchbar-input-bar-placeholder-color | _inherit_ |
Loading

0 comments on commit 2a02972

Please sign in to comment.