From 6f6ac667d10daaf29427e372ba490c0bf66a8aa0 Mon Sep 17 00:00:00 2001 From: xsky Date: Fri, 16 Aug 2019 10:11:30 +0800 Subject: [PATCH] feat: Add nav. --- docs/content/components/menu-item.mdx | 57 +++++++++++ docs/content/components/nav-dropdown.mdx | 34 +++++++ docs/content/components/nav-item.mdx | 39 ++++++++ docs/content/components/nav.mdx | 121 +++++++++++++++++++++++ 4 files changed, 251 insertions(+) create mode 100644 docs/content/components/menu-item.mdx create mode 100644 docs/content/components/nav-dropdown.mdx create mode 100644 docs/content/components/nav-item.mdx create mode 100644 docs/content/components/nav.mdx diff --git a/docs/content/components/menu-item.mdx b/docs/content/components/menu-item.mdx new file mode 100644 index 00000000..6d5405fd --- /dev/null +++ b/docs/content/components/menu-item.mdx @@ -0,0 +1,57 @@ +--- +title: MenuItem 菜单项 +date: 2019-08-16 +author: lijianxin1202 +--- + +菜单条目 + +## 使用场景 + +- 通常在下拉框中作为不同的菜单选项 + +### 常规 + +```jsx +
+ + + Action + Another action + Something else here + + Separated link + + + + + + Action + Another action + Something else here + + Separated link + + +
+``` + +## 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 new file mode 100644 index 00000000..401279fb --- /dev/null +++ b/docs/content/components/nav-dropdown.mdx @@ -0,0 +1,34 @@ +--- +title: NavDropdown 导航条 +date: 2019-08-15 +author: lijianxin1202 +--- + +以下拉方式导航 + +## 使用场景 + +- 在子导航较多时，可以用下拉方式来节省空间 + +### 常规 + +```jsx + +``` + +## 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 new file mode 100644 index 00000000..f72e0956 --- /dev/null +++ b/docs/content/components/nav-item.mdx @@ -0,0 +1,39 @@ +--- +title: NavItem 导航条目 +date: 2019-08-16 +author: lijianxin1202 +--- + +导航中的条目 + +## 使用场景 + +- 当导航条目中内容比较复杂时，可使用 NavItem + +### 常规 + +```jsx + +``` + +## 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 new file mode 100644 index 00000000..b925d43d --- /dev/null +++ b/docs/content/components/nav.mdx @@ -0,0 +1,121 @@ +--- +title: Nav 导航 +date: 2019-08-16 +author: lijianxin1202 +--- + +导航 + +## 使用场景 + +- 用于在页面顶部、底部或侧边提供各种跳转 + +### 常规 + +```jsx + +``` + +### 下拉方式 + +```jsx + +``` +### 堆叠方式 +使用 stacked 让按钮垂直排列。 + +```jsx + +``` + +### 两边对齐 +使用 justified 让导航条充满父容器的宽度。 + +```jsx +
+ +
+ +
+``` + +## 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 自带样式。 |