@ant-design/icons#DashboardOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#DashboardOutlined.
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: index.jsx From erp-crm with MIT License | 5 votes |
|
export default function Navigation() {
const { state: stateApp, appContextAction } = useAppContext();
const { isNavMenuClose } = stateApp;
const { navMenu } = appContextAction;
const [showLogoApp, setLogoApp] = useState(isNavMenuClose);
useEffect(() => {
if (isNavMenuClose) {
setLogoApp(isNavMenuClose);
}
const timer = setTimeout(() => {
if (!isNavMenuClose) {
setLogoApp(isNavMenuClose);
}
}, 200);
return () => clearTimeout(timer);
}, [isNavMenuClose]);
const onCollapse = () => {
navMenu.collapse();
};
return (
<>
<Sider collapsible collapsed={isNavMenuClose} onCollapse={onCollapse} className="navigation">
<div className="logo">
<img
src={logoIcon}
alt="Logo"
// style={{ margin: "0 auto 40px", display: "block" }}
/>
{!showLogoApp && (
<img src={logoText} alt="Logo" style={{ marginTop: '3px', marginLeft: '10px' }} />
)}
</div>
<Menu mode="inline">
<Menu.Item key={'Dashboard'} icon={<DashboardOutlined />}>
<Link to={'/'} />
Dashboard
</Menu.Item>
<Menu.Item key={'Customer'} icon={<CustomerServiceOutlined />}>
<Link to={'/customer'} />
Customer
</Menu.Item>
<Menu.Item key={'Invoice'} icon={<FileTextOutlined />}>
<Link to={'/invoice'} />
Invoice
</Menu.Item>
<Menu.Item key={'Quote'} icon={<FileSyncOutlined />}>
<Link to={'/quote'} />
Quote
</Menu.Item>
<Menu.Item key={'PaymentInvoice'} icon={<CreditCardOutlined />}>
<Link to={'/payment/invoice'} />
Payment Invoice
</Menu.Item>
<Menu.Item key={'Employee'} icon={<UserOutlined />}>
<Link to={'/employee'} />
Employee
</Menu.Item>
<Menu.Item key={'Admin'} icon={<TeamOutlined />}>
<Link to={'/admin'} />
Admin
</Menu.Item>
<SubMenu key={'Settings'} icon={<SettingOutlined />} title={'Settings'}>
<Menu.Item key={'PaymentMode'}>
<Link to={'/payment/mode'} />
Payment Mode
</Menu.Item>
<Menu.Item key={'Role'}>
<Link to={'/role'} />
Role
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
</>
);
}
Example #2
| Source File: index.jsx From starter-antd-admin-crud-auth-mern with MIT License | 5 votes |
|
function Navigation() {
const [collapsed, setCollapsed] = useState(false);
const onCollapse = () => {
setCollapsed(!collapsed);
};
return (
<>
<Sider
collapsible
collapsed={collapsed}
onCollapse={onCollapse}
style={{
zIndex: 1000,
}}
>
<div className="logo" />
<Menu theme="dark" defaultSelectedKeys={["1"]} mode="inline">
<Menu.Item key="1" icon={<DashboardOutlined />}>
<Link to="/" />
Home Page
</Menu.Item>
<Menu.Item key="2" icon={<CustomerServiceOutlined />}>
<Link to="/customer">Customer</Link>
</Menu.Item>
<Menu.Item key="24" icon={<UserOutlined />}>
<Link to="/selectcustomer">Custom Select Customer</Link>
</Menu.Item>
<Menu.Item key="21" icon={<FileTextOutlined />}>
<Link to="/lead" />
Lead
</Menu.Item>
<Menu.Item key="3" icon={<FileSyncOutlined />}>
<Link to="/product" />
Product
</Menu.Item>
<Menu.Item key="31" icon={<TeamOutlined />}>
<Link to="/admin" />
Admins Management
</Menu.Item>
<Menu.Item key="32" icon={<SettingOutlined />}>
<Link to="/settings" />
Settings
</Menu.Item>
</Menu>
</Sider>
</>
);
}
Example #3
| 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 #4
| Source File: App.js From next-terminal with GNU Affero General Public License v3.0 | 4 votes |
|
render() {
const menu = (
<Menu>
<Menu.Item>
<Link to={'/info'}>
<SolutionOutlined/> 个人中心
</Link>
</Menu.Item>
<Menu.Divider/>
<Menu.Item>
<Popconfirm
key='login-btn-pop'
title="您确定要退出登录吗?"
onConfirm={this.confirm}
okText="确定"
cancelText="取消"
placement="left"
>
<LogoutOutlined/> 退出登录
</Popconfirm>
</Menu.Item>
</Menu>
);
return (
<Switch>
<Route path="/access" component={Access}/>
<Route path="/term" component={Term}/>
<Route path="/login"><Login updateUser={this.updateUser}/></Route>
<Route path="/">
<Layout className="layout" style={{minHeight: '100vh'}}>
{
isAdmin() ?
<>
<Sider collapsible collapsed={this.state.collapsed} trigger={null}>
<div className="logo">
<img src={this.state.logo} alt='logo' width={this.state.logoWidth}/>
</div>
<Menu
onClick={(e) => this.setCurrent(e.key)}
selectedKeys={[this.state.current]}
onOpenChange={this.subMenuChange}
defaultOpenKeys={this.state.openKeys}
theme="dark" mode="inline" defaultSelectedKeys={['dashboard']}
inlineCollapsed={this.state.collapsed}
style={{lineHeight: '64px'}}>
<Menu.Item key="dashboard" icon={<DashboardOutlined/>}>
<Link to={'/'}>
控制面板
</Link>
</Menu.Item>
<SubMenu key='resource' title='资源管理' icon={<CloudServerOutlined/>}>
<Menu.Item key="asset" icon={<DesktopOutlined/>}>
<Link to={'/asset'}>
资产列表
</Link>
</Menu.Item>
<Menu.Item key="credential" icon={<IdcardOutlined/>}>
<Link to={'/credential'}>
授权凭证
</Link>
</Menu.Item>
<Menu.Item key="dynamic-command" icon={<CodeOutlined/>}>
<Link to={'/dynamic-command'}>
动态指令
</Link>
</Menu.Item>
<Menu.Item key="access-gateway" icon={<ApiOutlined/>}>
<Link to={'/access-gateway'}>
接入网关
</Link>
</Menu.Item>
</SubMenu>
<SubMenu key='audit' title='会话审计' icon={<AuditOutlined/>}>
<Menu.Item key="online-session" icon={<LinkOutlined/>}>
<Link to={'/online-session'}>
在线会话
</Link>
</Menu.Item>
<Menu.Item key="offline-session" icon={<DisconnectOutlined/>}>
<Link to={'/offline-session'}>
历史会话
</Link>
</Menu.Item>
</SubMenu>
<SubMenu key='ops' title='系统运维' icon={<ControlOutlined/>}>
<Menu.Item key="login-log" icon={<LoginOutlined/>}>
<Link to={'/login-log'}>
登录日志
</Link>
</Menu.Item>
<Menu.Item key="job" icon={<BlockOutlined/>}>
<Link to={'/job'}>
计划任务
</Link>
</Menu.Item>
<Menu.Item key="access-security" icon={<SafetyCertificateOutlined/>}>
<Link to={'/access-security'}>
访问安全
</Link>
</Menu.Item>
<Menu.Item key="storage" icon={<HddOutlined/>}>
<Link to={'/storage'}>
磁盘空间
</Link>
</Menu.Item>
</SubMenu>
<SubMenu key='user-manage' title='用户管理' icon={<UserSwitchOutlined/>}>
<Menu.Item key="user" icon={<UserOutlined/>}>
<Link to={'/user'}>
用户管理
</Link>
</Menu.Item>
<Menu.Item key="user-group" icon={<TeamOutlined/>}>
<Link to={'/user-group'}>
用户组管理
</Link>
</Menu.Item>
<Menu.Item key="strategy" icon={<InsuranceOutlined/>}>
<Link to={'/strategy'}>
授权策略
</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key="my-file" icon={<FolderOutlined/>}>
<Link to={'/my-file'}>
我的文件
</Link>
</Menu.Item>
<Menu.Item key="info" icon={<SolutionOutlined/>}>
<Link to={'/info'}>
个人中心
</Link>
</Menu.Item>
<Menu.Item key="setting" icon={<SettingOutlined/>}>
<Link to={'/setting'}>
系统设置
</Link>
</Menu.Item>
</Menu>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background"
style={{padding: 0, height: headerHeight, zIndex: 20}}>
<div className='layout-header'>
<div className='layout-header-left'>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.onCollapse,
})}
</div>
<div className='layout-header-right'>
<div className={'layout-header-right-item'}>
<a style={{color: 'black'}} target='_blank'
href='https://github.com/dushixiang/next-terminal'
rel='noreferrer noopener'>
<GithubOutlined/>
</a>
</div>
</div>
<div className='layout-header-right'>
<Dropdown overlay={menu}>
<div className='nickname layout-header-right-item'>
{getCurrentUser()['nickname']} <DownOutlined/>
</div>
</Dropdown>
</div>
</div>
</Header>
<Route path="/" exact component={Dashboard}/>
<Route path="/user" component={User}/>
<Route path="/user-group" component={UserGroup}/>
<Route path="/asset" component={Asset}/>
<Route path="/credential" component={Credential}/>
<Route path="/dynamic-command" component={DynamicCommand}/>
<Route path="/batch-command" component={BatchCommand}/>
<Route path="/online-session" component={OnlineSession}/>
<Route path="/offline-session" component={OfflineSession}/>
<Route path="/login-log" component={LoginLog}/>
<Route path="/info" component={Info}/>
<Route path="/setting" component={Setting}/>
<Route path="/job" component={Job}/>
<Route path="/access-security" component={Security}/>
<Route path="/access-gateway" component={AccessGateway}/>
<Route path="/my-file" component={MyFile}/>
<Route path="/storage" component={Storage}/>
<Route path="/strategy" component={Strategy}/>
<Footer style={{textAlign: 'center'}}>
Copyright © 2020-2022 dushixiang, All Rights Reserved.
Version:{this.state.package['version']}
</Footer>
</Layout>
</> :
<>
<Header style={{padding: 0}}>
<div className='km-header'>
<div style={{flex: '1 1 0%'}}>
<Link to={'/'}>
<img src={this.state.logo} alt='logo' width={120}/>
</Link>
<Link to={'/my-file'}>
<Button type="text" style={{color: 'white'}}
icon={<FolderOutlined/>}>
文件
</Button>
</Link>
<Link to={'/dynamic-command'}>
<Button type="text" style={{color: 'white'}}
icon={<CodeOutlined/>}>
指令
</Button>
</Link>
</div>
<div className='km-header-right'>
<Dropdown overlay={menu}>
<span className={'km-header-right-item'}>
{getCurrentUser()['nickname']}
</span>
</Dropdown>
</div>
</div>
</Header>
<Content className='km-container'>
<Layout>
<Route path="/" exact component={MyAsset}/>
<Content className={'kd-content'}>
<Route path="/info" component={Info}/>
<Route path="/my-file" component={MyFile}/>
<Route path="/dynamic-command" component={DynamicCommand}/>
</Content>
</Layout>
</Content>
<Footer style={{textAlign: 'center'}}>
Copyright © 2020-2022 dushixiang, All Rights Reserved.
Version:{this.state.package['version']}
</Footer>
</>
}
</Layout>
</Route>
</Switch>
);
}
Example #5
| Source File: SiderMenu.js From react-admin-portal with MIT License | 4 votes |
|
function SiderMenu({ handleOnCollapse, collapsed }) {
const theme = 'light';
const history = useHistory();
const handleSiderMenuClick = action => {
console.log('menu:', action);
switch (action.key) {
case 'dashboard':
history.push('/');
break;
case 'showProducts':
history.push('/products');
break;
case 'addProduct':
history.push('/add-product');
break;
case 'showCustomers':
history.push('/customers');
break;
case 'addCustomer':
history.push('/add-customer');
break;
default:
history.push('/');
}
};
return (
<Sider
breakpoint="lg"
collapsedWidth="80"
onCollapse={handleOnCollapse}
collapsed={collapsed}
width="256"
theme={theme}
>
<a>
<div className="menu-logo" />
</a>
<Menu mode="inline" theme={theme} onClick={handleSiderMenuClick}>
<Menu.Item key="dashboard">
<DashboardOutlined />
<span className="nav-text">Dashboard</span>
</Menu.Item>
<SubMenu
key="products"
title={
<span>
<PartitionOutlined />
<span>Products</span>
</span>
}
>
<Menu.Item key="showProducts">
<span className="nav-text">Show Products</span>
</Menu.Item>
<Menu.Item key="addProduct">
<span className="nav-text">Add Product</span>
</Menu.Item>
</SubMenu>
<SubMenu
key="customers"
title={
<span>
<TeamOutlined />
<span>Customers</span>
</span>
}
>
<Menu.Item key="showCustomers">
<span className="nav-text">Show Customers</span>
</Menu.Item>
<Menu.Item key="addCustomer">
<span className="nav-text">Add Customer</span>
</Menu.Item>
</SubMenu>
<Menu.Item key="settings">
<SettingOutlined />
<span className="nav-text">Settings</span>
</Menu.Item>
<Menu.Item key="reports">
<FundProjectionScreenOutlined />
<span className="nav-text">Reports</span>
</Menu.Item>
</Menu>
</Sider>
);
}
