@ant-design/icons#MenuFoldOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#MenuFoldOutlined.
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: styles.js From bank-client with MIT License | 6 votes |
|
StyledMenuFoldOutlined = styled(MenuFoldOutlined)`
color: ${colors.black};
font-size: 19px;
display: none;
align-items: center;
width: 48px;
height: 48px;
justify-content: center;
border-radius: 25px;
transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
&:hover {
background-color: rgba(0, 0, 0, 0.08);
}
${media.tablet`
display: flex;
`}
`
Example #2
| Source File: custom-trigger.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
return (
<Layout>
<Sider trigger={null} collapsible collapsed={this.state.collapsed}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<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>
</Sider>
<Layout className="site-layout">
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.toggle,
})}
</Header>
<Content
className="site-layout-background"
style={{
margin: '24px 16px',
padding: 24,
minHeight: 280,
}}
>
Content
</Content>
</Layout>
</Layout>
);
}
Example #3
| Source File: index.js From one_month_code with Apache License 2.0 | 6 votes |
|
render() {
return (
<Header className="header_pane">
{
this.props.collapsed
?
<MenuUnfoldOutlined className={"trigger"} onClick={this.props.toggle}/>
:
<MenuFoldOutlined className={"trigger"} onClick={this.props.toggle}/>
}
<div className="info">
<div className="time">{this.state.time}</div>
<div className="welcome">欢迎您: {this.state.user_name}</div>
<Button type="primary" danger onClick={this.logout}>退出</Button>
</div>
</Header>
)
}
Example #4
| Source File: SiderMenu.js From the-eye-knows-the-garbage with MIT License | 5 votes |
|
defaultRenderCollapsedButton = function defaultRenderCollapsedButton(collapsed) {
return collapsed ? React.createElement(MenuUnfoldOutlined, null) : React.createElement(MenuFoldOutlined, null);
}
Example #5
| Source File: custom-trigger-debug.jsx From virtuoso-design-system with MIT License | 5 votes |
|
render() {
return (
<Layout>
<Sider trigger={null} collapsible collapsed={this.state.collapsed}>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['3']} defaultOpenKeys={['sub1']}>
<Menu.Item key="1" icon={<PieChartOutlined />}>
Option 1
</Menu.Item>
<Menu.Item key="2" icon={<DesktopOutlined />}>
Option 2
</Menu.Item>
<SubMenu key="sub1" icon={<UserOutlined />} title="User">
<Menu.Item key="3">Tom</Menu.Item>
<Menu.Item key="4">Bill</Menu.Item>
<Menu.Item key="5">Alex</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
<Menu.Item key="6">Team 1</Menu.Item>
<Menu.Item key="8">Team 2</Menu.Item>
</SubMenu>
<Menu.Item key="9" icon={<FileOutlined />} />
</Menu>
</Sider>
<Layout>
<Header className="site-layout-background" style={{ padding: 0 }}>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.toggle,
})}
</Header>
<Content
className="site-layout-background"
style={{
margin: '24px 16px',
padding: 24,
minHeight: 280,
}}
>
Content
</Content>
</Layout>
</Layout>
);
}
Example #6
| Source File: inline-collapsed.jsx From virtuoso-design-system with MIT License | 5 votes |
|
render() {
return (
<div style={{ width: 256 }}>
<Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
{React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined)}
</Button>
<Menu
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
theme="dark"
inlineCollapsed={this.state.collapsed}
>
<Menu.Item key="1" icon={<PieChartOutlined />}>
Option 1
</Menu.Item>
<Menu.Item key="2" icon={<DesktopOutlined />}>
Option 2
</Menu.Item>
<Menu.Item key="3" icon={<ContainerOutlined />}>
Option 3
</Menu.Item>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</SubMenu>
</Menu>
</div>
);
}
Example #7
| 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 #8
| Source File: head.js From ant-simple-pro with MIT License | 4 votes |
|
TopBar = memo(function TopBar({
collapsed,
onToggle,
width,
setIsMobileDrawer,
}) {
const moreList = [
{ title: 'ant-simple-pro(vue3.0)', url: 'https://lgf196.top/vue/' },
{
title: 'ant-simple-pro(afterEnd)',
url: 'https://github.com/lgf196/ant-simple-pro/tree/afterEnd',
},
{
title: 'ant-simple-draw(图形编辑器)',
url: 'https://github.com/lgf196/ant-simple-draw',
},
{
title: 'ant-simple-pro(angular)',
url: 'https://github.com/lgf196/ant-simple-pro/tree/angular/angular',
},
{
title: 'h5-Dooring(可视化)',
url: 'https://github.com/MrXujiang/h5-Dooring',
},
];
const history = useHistory();
const dispatch = useDispatch();
useEffect(() => {
dispatch({ type: SAGA_GET_USER_INFO });
}, [dispatch]);
const selectNumOfDoneTodos = createSelector(
[(state) => state.user.getUserInfo, (state) => state.user.loadingUserInfo],
(getUserInfo, loadingUserInfo) => [getUserInfo, loadingUserInfo],
);
const [getUserInfo, loadingUserInfo] = useSelector(selectNumOfDoneTodos);
const isMobileDevice = useMemo(
() => (width < responsiveConfig.mobileInnerWidth ? true : false),
[width],
);
const tagOption = ({ key }) => {
if (key === '2') {
confirm(() => {
localStorage.clear();
history.push(`/login?rp=${+new Date()}`);
}, '确定要退出登录吗？');
}
};
const dropdown = () => (
<Menu onClick={tagOption}>
<Menu.Item key="1">
<Link to="/userInfo">
<UserOutlined />
<span>个人信息</span>
</Link>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="2">
<LogoutOutlined />
<span>退出登录</span>
</Menu.Item>
</Menu>
);
const more = () => (
<Menu>
{moreList.map((item, index) => (
<Menu.Item key={index}>
<a href={item.url} target="_blank">
<span>{item.title}</span>
</a>
</Menu.Item>
))}
</Menu>
);
const options = () => {
setIsMobileDrawer(isMobileDevice);
onToggle(!collapsed);
};
return (
<div className={`${style.head} clearfix`}>
<div className={`${style.headLeft} fl`}>
<div className={`${style.menu}`} onClick={options}>
{collapsed ? (
<MenuUnfoldOutlined className={style.icon} />
) : (
<MenuFoldOutlined className="icon" />
)}
</div>
</div>
<div className={`${style.menuList} fr`}>
<a
href="http://blog.lgf196.top/ant-simple-pro-document/"
target="_blank"
>
<Tooltip title="文档">
<QuestionCircleOutlined className={style.icon} />
</Tooltip>
</a>
<News />
<FullScreeOut className={style.icon} />
<Dropdown overlay={dropdown} placement="bottomCenter">
<div className={`${style.propsUser}`}>
{loadingUserInfo ? (
<>
<HeadImage
url={
getUserInfo.iconUrl
? getUserInfo.iconUrl
: 'https://antd-simple-pro.oss-cn-beijing.aliyuncs.com/image/1605845717285.png'
}
/>
<span>
{getUserInfo.username ? getUserInfo.username : '珍珍'}
</span>
</>
) : (
<Spin size="small" />
)}
</div>
</Dropdown>
<Dropdown overlay={more} placement="bottomRight">
<Button
size="small"
style={{ marginLeft: '20px', color: 'rgba(105, 123, 140, 0.7)' }}
>
<span>更多</span>
<DownOutlined />
</Button>
</Dropdown>
</div>
</div>
);
})
Example #9
| Source File: App.js From art-dashboard-ui with Apache License 2.0 | 4 votes |
|
render() {
const { Header, Footer, Sider, Content } = Layout;
const release_number_whats_new_cookie = Cookies.get("release_number_whats_new_cookie");
const release_number_env = process.env.REACT_APP_RELEASE_NUMBER_WHATS_NEW;
if(release_number_whats_new_cookie === undefined || release_number_whats_new_cookie !== release_number_env){
this.openNotification();
Cookies.set("release_number_whats_new_cookie", release_number_env);
}
return (
<Router>
<div>
<Layout>
<Sider collapsed={this.state.collapsed_sider}>
<div>
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="release_status_menu_item" icon={<HistoryOutlined />}>
<Link to="/release/status/?type=all">
Release
</Link>
</Menu.Item>
<SubMenu
key="sub1"
title={
<span>
<SettingOutlined />
<span>Build</span>
</span>
}
>
<Menu.Item key="build_menu_item" icon={<HistoryOutlined />}>
<Link to="/build/history">
History
</Link>
</Menu.Item>
<Menu.Item key="build_health_item" icon={<SmileOutlined/>} >
<Link to="/health/daily/overview">
Health
</Link>
</Menu.Item>
</SubMenu>
<Menu.Item key={"incidents"} icon={<FireFilled/>}>
<Link to={"/incidents"}>
Incidents
</Link>
</Menu.Item>
<Menu.Item key={"whats_news"} icon={<ToolOutlined/>}>
<Link to={"/help"}>
Help
</Link>
</Menu.Item>
</Menu>
</div>
</Sider>
<Layout>
<Header style={{background: "white", height: "120px", float: "left"}}>
<div className="left">
{React.createElement(this.state.collapsed_sider ? MenuUnfoldOutlined : MenuFoldOutlined, {
className: 'trigger',
onClick: this.toggle_side,
})}
</div>
<div className="center">
<h1 style={{color: "#316DC1", margin: "20px"}}>OpenShift Release Portal</h1>
</div>
</Header>
<Content>
<Switch>
<Route component={Daily_overview_table} path="/health/daily/overview" exact/>
<Route path="/build/history" exact component={Build_history_home} name="build_history"/>
<Route path="/release/status/:branch" exact component={Release_home_page} name="release_status"/>
<Route component={Daily_overview_expand_home} path="/health/daily/detail/:date" exact/>
<Route path="/health/daily/build/:date" exact render={(props) => <Build_record_table {...props}/>} name="daily_build_by_date"/>
<Route path="/help" exact component={Whatsnew_carousel}/>
<Route path="/release/advisory/overview/:advisoryid" exact component={Advisory_Overview_Home} name="advisory_overview_home"/>
<Route path="/incidents" exact component={Incident_home}/>
<Redirect exact from="" to={"/release/status/"+process.env.REACT_APP_OPENSHIFT_VERSION_RELEASE_HOME_PAGE}/>
</Switch>
</Content>
<Footer style={{ textAlign: 'center' }}>
RedHat ©2020
</Footer>
</Layout>
</Layout>
</div>
</Router>
);
}
Example #10
| Source File: LayoutBanner.js From react-admin-portal with MIT License | 4 votes |
|
function LayoutBanner({ collapsed, handleOnCollapse }) {
const getCollapseIcon = () => {
if (collapsed) {
return (
<MenuUnfoldOutlined onClick={handleOnCollapse} className="trigger" />
);
}
return <MenuFoldOutlined onClick={handleOnCollapse} className="trigger" />;
};
const handleLanguageMenuClick = () => {};
const handleSettingMenuClick = () => {};
const handleLogout = () => {};
return (
<Header className="header" style={{ background: '#fff', padding: 0 }}>
<div
style={{
float: 'left',
width: '100%',
alignSelf: 'center',
display: 'flex',
}}
>
{window.innerWidth > 992 && getCollapseIcon()}
</div>
<Menu
// onClick={this.handleLanguageMenuClick}
mode="horizontal"
className="menu"
>
<SubMenu title={<QuestionCircleOutlined />} />
</Menu>
<Menu
// onClick={this.handleLanguageMenuClick}
mode="horizontal"
className="menu"
>
<SubMenu
title={
<Badge dot>
<BellOutlined />
</Badge>
}
/>
</Menu>
<Menu
onClick={handleLanguageMenuClick}
mode="horizontal"
className="menu"
>
<SubMenu title={<GlobalOutlined />}>
<Menu.Item key="en">
<span role="img" aria-label="English">
?? English
</span>
</Menu.Item>
<Menu.Item key="it">
<span role="img" aria-label="Italian">
?? Italian
</span>
</Menu.Item>
</SubMenu>
</Menu>
<Menu onClick={handleSettingMenuClick} mode="horizontal" className="menu">
<SubMenu title={getUsernameAvatar('Cemal')}>
<Menu.Item key="setting:1">
<span>
<UserOutlined />
Profile
</span>
</Menu.Item>
<Menu.Item key="setting:2">
<span>
<LogoutOutlined onClick={handleLogout} />
Logout
</span>
</Menu.Item>
</SubMenu>
</Menu>
</Header>
);
}
