Skip to content
This repository has been archived by the owner on Nov 14, 2023. It is now read-only.

feat: Add nav. #57

Merged
merged 1 commit into from
Aug 19, 2019
Merged

feat: Add nav. #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
57 changes: 57 additions & 0 deletions docs/content/components/menu-item.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
---
title: MenuItem 菜单项
date: 2019-08-16
author: lijianxin1202
---

菜单条目

## 使用场景

- 通常在下拉框中作为不同的菜单选项

### 常规

```jsx
<div>
<ButtonToolbar>
<SplitButton title="Dropup" dropup id="split-button-dropup">
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
<MenuItem eventKey="3">Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey="4">Separated link</MenuItem>
</SplitButton>
</ButtonToolbar>

<ButtonToolbar>
<SplitButton
bsStyle="primary"
title="Right dropup"
dropup
pullRight
id="split-button-dropup-pull-right"
>
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
<MenuItem eventKey="3">Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey="4">Separated link</MenuItem>
</SplitButton>
</ButtonToolbar>
</div>
```

## API

| 参数 | 类型 | 默认值 | 说明 |
| ------- | ------------------------- | ------ | -------- |
| active | boolean | | 高亮显示菜单项，表示菜单项被选中。 |
| disabled | boolean | false | 禁用菜单项，使其不能被选中。 |
| divider | all | false | 将此菜单项显示为水平分隔线，用在一组菜单项之间的区块分隔。 |
| eventKey | any | 传送给 onSelect 处理函数的参数, 用于标记选中菜单项的关键字。 |
| header | boolean | false | 将菜单项的风格显示为标题头标签，用来描述一组菜单项 |
| href | string | | HTML href 与 a.href 相关的属性 |
| onClick | function | | 菜单被点击时调用的回调函数。 |
| onSelect | function | | 菜单被选中时调用的回调函数。 |
| bsClass | string | 'dropdown' | 定义组件基础 CSS 及前缀。通常改变 bsClass 目的是为组件提供新的、非 Bootstrap 自带样式。 |
34 changes: 34 additions & 0 deletions docs/content/components/nav-dropdown.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
---
title: NavDropdown 导航条
date: 2019-08-15
author: lijianxin1202
---

以下拉方式导航

## 使用场景

- 在子导航较多时，可以用下拉方式来节省空间

### 常规

```jsx
<Nav bsStyle="tabs" activeKey="1" onSelect={this.handleSelect}>
<NavDropdown eventKey="4" title="下拉" id="nav-dropdown">
<MenuItem eventKey="4.1">操作</MenuItem>
<MenuItem eventKey="4.2">另一个操作</MenuItem>
<MenuItem eventKey="4.3">其它内容</MenuItem>
<MenuItem divider />
<MenuItem eventKey="4.4">其它链接</MenuItem>
</NavDropdown>
</Nav>
```

## API

| 参数 | 类型 | 默认值 | 说明 |
| ------- | ------------------------- | ------ | -------- |
| active | boolean | false | 当前是否处于选中状态 |
| noCaret | boolean | false | 隐藏箭头图标 |
| eventKey | any | | 唯一标识符，用来和其他项进行区分 |
| title | React.ReactNode | | 下拉框标题 |
39 changes: 39 additions & 0 deletions docs/content/components/nav-item.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
---
title: NavItem 导航条目
date: 2019-08-16
author: lijianxin1202
---

导航中的条目

## 使用场景

- 当导航条目中内容比较复杂时，可使用 NavItem

### 常规

```jsx
<Nav bsStyle="pills" activeKey={1}>
<NavItem eventKey={1} href="/home">
NavItem 1 content
</NavItem>
<NavItem eventKey={2} title="Item">
NavItem 2 content
</NavItem>
<NavItem eventKey={3} disabled>
NavItem 3 content
</NavItem>
</Nav>
```

## API

| 参数 | 类型 | 默认值 | 说明 |
| ------- | ------------------------- | ------ | -------- |
| active | boolean | false | 当前是否处于选中状态 |
| disabled | boolean | false | 隐藏箭头图标 |
| role | string | | |
| href | string | | 跳转链接 |
| onClick | function | | 点击事件 |
| onSelect | function | 选中事件 |
| eventKey | any | | 唯一标识符，用来和其他项进行区分 |
121 changes: 121 additions & 0 deletions docs/content/components/nav.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
---
title: Nav 导航
date: 2019-08-16
author: lijianxin1202
---

导航

## 使用场景

- 用于在页面顶部、底部或侧边提供各种跳转

### 常规

```jsx
<Nav bsStyle="pills" activeKey={1}>
<NavItem eventKey={1} href="/home">
NavItem 1 content
</NavItem>
<NavItem eventKey={2} title="Item">
NavItem 2 content
</NavItem>
<NavItem eventKey={3} disabled>
NavItem 3 content
</NavItem>
</Nav>
```

### 下拉方式

```jsx
<Nav bsStyle="tabs" activeKey="1">
<NavItem eventKey="1" href="/home">
NavItem 1 content
</NavItem>
<NavItem eventKey="2" title="Item">
NavItem 2 content
</NavItem>
<NavItem eventKey="3" disabled>
NavItem 3 content
</NavItem>
<NavDropdown eventKey="4" title="Dropdown" active id="nav-dropdown">
<MenuItem eventKey="4.1">Action</MenuItem>
<MenuItem eventKey="4.2">Another action</MenuItem>
<MenuItem eventKey="4.3">Something else here</MenuItem>
<MenuItem divider />
<MenuItem eventKey="4.4">Separated link</MenuItem>
</NavDropdown>
</Nav>
```
### 堆叠方式
使用 stacked 让按钮垂直排列。

```jsx
<Nav bsStyle="pills" stacked activeKey={1}>
<NavItem eventKey={1} href="/home">
NavItem 1 content
</NavItem>
<NavItem eventKey={2} title="Item">
NavItem 2 content
</NavItem>
<NavItem eventKey={3} disabled>
NavItem 3 content
</NavItem>
</Nav>
```

### 两边对齐
使用 justified 让导航条充满父容器的宽度。

```jsx
<div>
<Nav
bsStyle="tabs"
justified
activeKey={1}
>
<NavItem eventKey={1} href="/home">
NavItem 1 content
</NavItem>
<NavItem eventKey={2} title="Item">
NavItem 2 content
</NavItem>
<NavItem eventKey={3} disabled>
NavItem 3 content
</NavItem>
</Nav>
<br />
<Nav
bsStyle="pills"
justified
activeKey={1}
>
<NavItem eventKey={1} href="/home">
NavItem 1 content
</NavItem>
<NavItem eventKey={2} title="Item">
NavItem 2 content
</NavItem>
<NavItem eventKey={3} disabled>
NavItem 3 content
</NavItem>
</Nav>
</div>
```

## API

| 参数 | 类型 | 默认值 | 说明 |
| ------- | ------------------------- | ------ | -------- |
| activeKey | any | | 导航条目的 eventKey 与此属性匹配的激活，优行级高于 activeHref 匹配 |
| activeHref | string | | 导航条目的 href 与此属性值一致的显示为激活 |
| stacked | boolean | false | 垂直排列 |
| justified | all | false | 充满父容器的宽度 |
| onSelect | function | | 选中事件 |
| role | string | | 导航 ARIA 角色, 在 TabContainer 上下文中, 缺省值设为 "tablist", 可以被 Nav 重新设置 |
| navbar | boolean | | 在 Navbar 中使用时应用对齐风格，这个属性使用在 Navbar 中会自动设置上。 |
| pullRight | boolean | false | 浮动 Nav 至右侧. 当 navbar 为 true 时，必要上下文样式会被添加。 |
| pullLeft | boolean | false | 浮动 Nav 至左侧. 当 navbar 为 true 时，必要上下文样式会被添加。 |
| bsStyle | one of: "tabs", "pills" | | 定义组件可视的或上下文相关的样式属性。 |
| bsClass | string | 'nav' | 定义组件基础 CSS 及前缀。通常改变 bsClass 目的是为组件提供新的、非 Bootstrap 自带样式。 |