feat: Add nav. (#57)

xsky-fe · Aug 19, 2019 · 51cef8a · 51cef8a
1 parent 7d11cb1
commit 51cef8a
Show file tree

Hide file tree

Showing 4 changed files with 251 additions and 0 deletions.
diff --git a/docs/content/components/menu-item.mdx b/docs/content/components/menu-item.mdx
@@ -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 自带样式。 |
diff --git a/docs/content/components/nav-dropdown.mdx b/docs/content/components/nav-dropdown.mdx
@@ -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 | | 下拉框标题 |
diff --git a/docs/content/components/nav-item.mdx b/docs/content/components/nav-item.mdx
@@ -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 | | 唯一标识符，用来和其他项进行区分 |
diff --git a/docs/content/components/nav.mdx b/docs/content/components/nav.mdx
@@ -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 自带样式。 |