@ant-design/icons#BarChartOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#BarChartOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Protected.jsx From reactjs-functions with MIT License | 5 votes |
|
Protected =({ component: Component, Logout, auth, ...rest }) => {
let history = useHistory()
const logout = errorInfo => {
Logout().then(message => {
history.replace('/')
auth.loggedIn = false;
})
};
return(
<Route {...rest}
render={props =>
auth.loggedIn ? (
<div>
<Header>
<Menu theme="dark" mode="horizontal" >
<Menu.Item key="1" icon={<UserOutlined />}>
<Link to="/list">Entry List</Link>
</Menu.Item>
<Menu.Item key="2" icon={<BarChartOutlined />}>
<Link to="/statistics">Statistics</Link>
</Menu.Item>
<Menu.Item key="3" icon={<SettingOutlined />}>
<Link to="/settings">Change Password</Link>
</Menu.Item>
<Menu.Item key="4" icon={<LogoutOutlined />} onClick={logout}>
Logout
</Menu.Item>
</Menu>
</Header>
<Content style={{ marginTop: "100px", marginBottom: "100px" }}>
<Row justify="space-around">
<Col span={20} style={{ textAlign: "center" }}>
<Component {...props} />
</Col>
</Row>
</Content>
</div>
) : (
<Redirect to={{ pathname: "/", state: { from: props.location } }} />
)
}
/>
);
}
Example #2
| Source File: AppRouter.jsx From React-Nest-Admin with MIT License | 4 votes |
|
sidebar = () => {
return (
<Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
<Menu.Item key="1">
<Link to={{ pathname: "/" }}>
<HomeOutlined />
<span>首页</span>
</Link>
</Menu.Item>
<Menu.Item key="5">
<Link to={{ pathname: "/user-management" }}>
<UserOutlined />
<span>用户管理</span>
</Link>
</Menu.Item>
<SubMenu
key="sub1"
title={
<span>
<FileOutlined />
<span>文件管理</span>
</span>
}
>
<Menu.Item key="sub1-1">
<Link to={{ pathname: "/file/list" }}>
<OrderedListOutlined />
<span>文件列表</span>
</Link>
</Menu.Item>
<Menu.Item key="sub1-2">
<Link to={{ pathname: "/file/add" }}>
<UploadOutlined />
<span>文件上传</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub2"
title={
<span>
<DashboardOutlined />
<span>可视化图表</span>
</span>
}
>
<Menu.Item key="sub2-1">
<Link to={{ pathname: "/charts/line-chart" }}>
<LineChartOutlined />
<span>折线图</span>
</Link>
</Menu.Item>
<Menu.Item key="sub2-2">
<Link to={{ pathname: "/charts/bar-chart" }}>
<BarChartOutlined />
<span>柱状图</span>
</Link>
</Menu.Item>
<Menu.Item key="sub2-3">
<Link to={{ pathname: "/charts/pie-chart" }}>
<PieChartOutlined />
<span>饼状图</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub5"
title={
<span>
<FileExcelOutlined />
<span>Excel表格</span>
</span>
}
>
<Menu.Item key="sub5-1">
<Link to={{ pathname: "/excel/export-csv" }}>
<ExportOutlined />
<span>Export csv</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub4"
title={
<span>
<EditOutlined />
<span>文本编辑器</span>
</span>
}
>
<Menu.Item key="sub4-1">
<Link to={{ pathname: "/rich-text-editor" }}>
<Html5Outlined />
<span>富文本编辑器</span>
</Link>
</Menu.Item>
<Menu.Item key="sub4-2">
<Link to={{ pathname: "/md-editor" }}>
<FileMarkdownOutlined />
<span>Markdown编辑器</span>
</Link>
</Menu.Item>
</SubMenu>
<SubMenu
key="sub3"
title={
<span>
<BugOutlined />
<span>错误页面</span>
</span>
}
>
<Menu.Item key="sub3-1">
<Link to={{ pathname: "/not-found" }}>
<InboxOutlined />
<span>404</span>
</Link>
</Menu.Item>
<Menu.Item key="sub3-2">
<Link to={{ pathname: "/not-allow" }}>
<StopOutlined />
<span>403</span>
</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="6">
<a
href="https://github.com/cnscorpions/React-Nest-Admin"
target="_blank"
rel="noopener noreferrer"
>
<GithubOutlined />
<span>Github</span>
</a>
</Menu.Item>
</Menu>
);
}
Example #3
| Source File: fixed-sider.jsx From virtuoso-design-system with MIT License | 4 votes |
|
storiesOf('antd/layout', module).add('fixed-sider', () =>
<Layout>
<Sider
style={{
overflow: 'auto',
height: '100vh',
position: 'fixed',
left: 0,
}}
>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
<Menu.Item key="1" icon={<UserOutlined />}>
nav 1
</Menu.Item>
<Menu.Item key="2" icon={<VideoCameraOutlined />}>
nav 2
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
<Menu.Item key="4" icon={<BarChartOutlined />}>
nav 4
</Menu.Item>
<Menu.Item key="5" icon={<CloudOutlined />}>
nav 5
</Menu.Item>
<Menu.Item key="6" icon={<AppstoreOutlined />}>
nav 6
</Menu.Item>
<Menu.Item key="7" icon={<TeamOutlined />}>
nav 7
</Menu.Item>
<Menu.Item key="8" icon={<ShopOutlined />}>
nav 8
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout" style={{ marginLeft: 200 }}>
<Header className="site-layout-background" style={{ padding: 0 }} />
<Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
<div className="site-layout-background" style={{ padding: 24, textAlign: 'center' }}>
...
<br />
Really
<br />
...
<br />
...
<br />
...
<br />
long
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
...
<br />
content
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>When dealing with long content, a fixed sider can provide a better user experience.</p></>) } });
