@alicloud/console-components-console-menu

为阿里云控制台提供标准的应用级别的导航菜单，也可以应用在其他的中后台产品中

$3

##### 组件模块

###### 基础导航菜单

在之前的版本中默认导出的组件包含了完整的路由行为，在 1.0 中，默认导出的组件 不再包含 路由行为，你可以根据自己项目中的路由环境来映射的展现和行为（如设置 activeKey 等）。

``javascript import ConsoleMenu from '@alicloud/console-components-console-menu' import { Route, Link } from 'react-router-dom'

const mapLocationToActiveKey = (location) => { if (!location || !location.pathname || location.pathname === '/') { return 'overview' }

return location.pathname.replace(/^\//, '') }

const App = () => ( { ({ location }) => ( header="Aliyun Console" activeKey={location.pathname} > 概览列表日常生产 ) } )`

你也可以用结构化的描述来定制 的内容。下面的示例作用和上面的作用完全相同：

`javascript import ConsoleMenu from '@alicloud/console-components-console-menu' import { Route, Link } from 'react-router-dom'

const mapLocationToActiveKey = (location) => { if (!location || !location.pathname || location.pathname === '/') { return 'overview' }

return location.pathname.replace(/^\//, '') }

const renderAsLink = ({ key, label }) => ( /${key}}>{label} )

const items = [ { key: 'overview', label: '概览', render: renderAsLink }, { key: 'list', label: '列表', render: renderAsLink }, { key: 'logs', label: '列表', items: [ { key: 'daily', label: '日常', render: renderAsLink }, { key: 'prod', label: '生产', render: renderAsLink, visible: false }, ] }, ]

const App = () => ( { ({ location }) => ( header="Aliyun Console" items={items} activeKey={location.pathname} /> ) } ) `

###### 带有路由功能的导航菜单

如果你的项目使用了 dva^2.0.0 ，我们也提供了组件来提供与之适配的路由功能。

_（截止目前为止，必须使用 items 进行结构化的传值，使用组件声明方式来编写子组件的方式可能会存在问题，我们计划在不久之后来修复这个问题）_

`javascript import RoutableMenu from '@alicloud/console-components-console-menu/RoutableMenu'

const items = [ { // 在当前路由路径为 /overview 时将该 Item 变为选中状态 key: '/overview', label: '概览', // 点击该 Item 会跳转至 /overview to: '/overview' }, { key: '/product/:region', label: '产品', to: '/product/cn-hangzhou' }, { // 在当前路由路径匹配 /instance/:region? 时将该 Item 变为选中状态 key: '/instance/:region?', label: '实例', to: (routeProps, item) => { // 该方法并不是我们推荐的做法，只是为了表示 to 可以用函数表达式来声明： // 第一个参数是当前的 route props ，第二个参数是当前的 item 的结构化信息 // 你可以利用这些信息来动态地返回需要进行跳转的 pathname 或 location // 下面的这个例子使用了当前路由的匹配信息（注意：并不是对于该 item 的匹配） // 来进行相应的跳转。如果当前的路由中包含 param: region ，（譬如从 // /product/cn-hangzhou 点击该 item 将会跳转到 /instance/cn-hangzhou // // 在实际项目中的最佳实践是直接派发父级 pathname ，然后在中通过上下文 // 或者其他方式进行路由重定向 // const { match: { params: { region } = {} } = {} } = routeProps return /instance/${region} }, // 除了使用 key 来匹配单个的路由路径之外，还可以使用 activePathPatterns 来 // 尝试匹配多个路由路径，内置的匹配算法将会在尝试将当前的路径匹配 // key 失败之后，按照 activePathPatterns 指定的顺序依次进行尝试匹配，一旦匹配 // 成功，则将该 Item 变为选中状态 activePathPatterns: [ '/instance/:regionId/:instanceId', ], }, { key: 'logs', label: '列表', items: [ { key: '/daily', label: '日常', // 使用 href 将使用超链接的方式打开指定的链接，区别于应用内的路由跳转 href: 'https://daily.project.com', }, { key: '/prod', label: '生产', to: '/prod', }, ] }, ]

const App = () => ( ) `

#### 可高度定制的组件

所有的展示组件（ Presentation Components ）都已经通过StyledComponents导出，这些组件可以作为样式自定义的切入点。如果你希望自定义的样式，可以使用 styled-components 的方式对样式进行修改，而不用担心对全局或其他模块产生冲突。如这个例子所示：

`javascript import styled from 'styled-components' import ConsoleMenu, { StyledComponents } from '@alicloud/console-components-console-menu'

const CustomizedConsoleMenu = styled(ConsoleMenu) ${StyledComponents.Item} { font-size: 14px; } / any css is ok here / // CustomizedConsoleMenu中的Item样式已经修改 // ConsoleMenu的样式没有变化 // 可以将CustomizedConsoleMenu理解为ConsoleMenu的“fork”

const App = () => ( ) `