Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Badge #265

Merged
merged 2 commits into from
Sep 2, 2022
Merged

Badge #265

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
520d29d
docs: actionsheet 文档支持多语言版本。
xiaoyatong Sep 2, 2022
0cc8add
docs: badge 支持多语言
xiaoyatong Sep 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/packages/actionsheet/demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const ActionSheetDemo = () => {
},
'en-US': {
'0f87770f': 'Option One',
e23e5e80: 'Option two',
e23e5e80: 'Option Two',
b6102b61: 'Option Three',
acc5939e: 'Description Information',
'85dae65b': 'Shading Options',
Expand Down
88 changes: 43 additions & 45 deletions src/packages/actionsheet/doc.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
# ActionSheet 动作面板
# ActionSheet


### 介绍
从底部弹出的动作菜单面板。
### Intro
Action menu panel that pops up from the bottom.

### 安装
### Install

```ts
import { ActionSheet } from '@nutui/nutui-react';
```
## 代码示例
## Demo

### 基本用法

默认
### Basic usage

:::demo
```tsx
Expand All @@ -30,13 +28,13 @@ const App = () => {
const [isVisible1, setIsVisible1] = useState(false)
const menuItemsOne: ItemType<string>[] = [
{
name: '选项一',
name: 'Option One',
},
{
name: '选项二',
name: 'Option Two',
},
{
name: '选项三',
name: 'Option Three',
},
]
const chooseItem = (itemParams: any) => {
Expand All @@ -49,7 +47,7 @@ const App = () => {
<>
<Cell isLink onClick={() => setIsVisible1(!isVisible1)}>
<span>
<label>基础用法</label>
<label>Basic Usage</label>
</span>
<div className="selected-option">{val1}</div>
</Cell>
Expand All @@ -67,7 +65,7 @@ export default App;

```
:::
### 展示取消按钮
### Show Cancel Button

:::demo
```tsx
Expand All @@ -79,13 +77,13 @@ const App = () => {
const [val2, setVal2] = useState('')
const menuItemsOne: ItemType<string>[] = [
{
name: '选项一',
name: 'Option One',
},
{
name: '选项二',
name: 'Option Two',
},
{
name: '选项三',
name: 'Option Three',
},
]
const chooseItemTwo = (itemParams: Item) => {
Expand All @@ -96,14 +94,14 @@ const App = () => {
<>
<Cell isLink onClick={() => setIsVisible2(!isVisible2)}>
<span>
<label>展示取消按钮</label>
<label>Show Cancel Button</label>
</span>
<div className="selected-option">{val2}</div>
</Cell>

<ActionSheet
visible={isVisible2}
cancelTxt="取消"
cancelTxt="Cancel"
menuItems={menuItemsOne}
choose={chooseItemTwo}
cancel={() => setIsVisible2(false)}
Expand All @@ -115,7 +113,7 @@ export default App;

```
:::
### 展示描述信息
### Display Description Information

:::demo
```tsx
Expand All @@ -127,14 +125,14 @@ const App = () => {
const [val3, setVal3] = useState('')
const menuItemsTwo: ItemType<string>[] = [
{
name: '选项一',
name: 'Option One',
},
{
name: '选项二',
name: 'Option Two',
},
{
name: '选项三',
subname: '描述信息',
name: 'Option Three',
subname: 'Description Information',
},
]
const chooseItemThree = (itemParams: Item) => {
Expand All @@ -145,16 +143,16 @@ const App = () => {
<>
<Cell isLink onClick={() => setIsVisible3(!isVisible3)}>
<span>
<label>展示描述信息</label>
<label>Display Description Information</label>
</span>
<div className="selected-option">{val3}</div>
</Cell>
<ActionSheet
visible={isVisible3}
description="这是一段描述信息"
description="This is a descriptive message"
menuItems={menuItemsTwo}
choose={chooseItemThree}
cancelTxt="取消"
cancelTxt="Cancel"
cancel={() => setIsVisible3(false)}
/>
</>
Expand All @@ -164,7 +162,7 @@ export default App;

```
:::
### 选项状态
### Option Status

:::demo
```tsx
Expand All @@ -175,26 +173,26 @@ const App = () => {
const [isVisible4, setIsVisible4] = useState(false)
const menuItemsThree: ItemType<string | boolean>[] = [
{
name: '着色选项',
name: 'Shading Options',
},
{
name: '禁用选项',
name: 'Disable Option',
disable: true,
},
]
return (
<>
<Cell isLink onClick={() => setIsVisible4(!isVisible4)}>
<span>
<label>选项状态</label>
<label>Option Status</label>
</span>
</Cell>
<ActionSheet
visible={isVisible4}
cancelTxt="取消"
cancelTxt="Cancel"
cancel={() => setIsVisible4(false)}
menuItems={menuItemsThree}
chooseTagValue="着色选项"
chooseTagValue="Shading Options"
choose={() => {
setIsVisible4(false)
}}
Expand All @@ -209,22 +207,22 @@ export default App;

## Prop

| 字段 | 说明 | 类型 | 默认值 |
| Attribute | Description | Type | Default |
|------------------|----------------------------------------|---------|-----------|
| cancelTxt | 取消文案 | String | '取消' |
| menuItems | 列表项 | Array | [ ] |
| optionTag | 设置列表项展示使用参数 | String | 'name' |
| visible | 遮罩层可见 | Boolean | false |
| optionSubTag | 设置列表项描述展示使用参数 | String | 'subname' |
| chooseTagValue | 设置选中项的值，和'option-tag'的值对应 | String | '' |
| title | 设置列表项标题 | String | '' |
| description | 设置列表项副标题/描述 | String | '' |
| color | 高亮颜色 | String | '#ee0a24' |
| cancelTxt | Cancel Text | String | 'Cancel' |
| menuItems | Menu Item | Array | [ ] |
| optionTag | Set menu item display usage parameters | String | 'name' |
| visible | Mask layer visible | Boolean | false |
| optionSubTag | Set menu item description display usage parameters | String | 'subname' |
| chooseTagValue | Set selected item'value, corresponds to the value of 'option-tag' | String | '' |
| title | Set menu item title | String | '' |
| description | Set menu item subtitle/description | String | '' |
| color | highlight color | String | '#ee0a24' |


## Event

| 字段 | 说明 | 回调参数 |
| Attribute | Description | Arguments |
|--------|--------------------|-----------------------------------|
| choose | 选择之后触发 | 选中列表项item, 选中的索引值index |
| cancel | 点击取消文案时触发 | 无 |
| choose | Triggered after selection | Selected list item item, selected index value index |
| cancel | Triggered when cancel copy is clicked | none |
2 changes: 0 additions & 2 deletions src/packages/actionsheet/doc.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,6 @@ import { ActionSheet } from '@nutui/nutui-react';

### 基本用法

默认

:::demo
```tsx
import React, { useState } from "react";
Expand Down
Loading