@ant-design/icons#LaptopOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#LaptopOutlined.
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: top-side-2.jsx From virtuoso-design-system with MIT License | 5 votes |
|
storiesOf('antd/layout', module).add('top-side-2', () =>
<Layout>
<Header className="header">
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
</Header>
<Layout>
<Sider width={200} className="site-layout-background">
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%', borderRight: 0 }}
>
<SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
<Menu.Item key="5">option5</Menu.Item>
<Menu.Item key="6">option6</Menu.Item>
<Menu.Item key="7">option7</Menu.Item>
<Menu.Item key="8">option8</Menu.Item>
</SubMenu>
<SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
<Menu.Item key="9">option9</Menu.Item>
<Menu.Item key="10">option10</Menu.Item>
<Menu.Item key="11">option11</Menu.Item>
<Menu.Item key="12">option12</Menu.Item>
</SubMenu>
</Menu>
</Sider>
<Layout style={{ padding: '0 24px 24px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<Content
className="site-layout-background"
style={{
padding: 24,
margin: 0,
minHeight: 280,
}}
>
Content
</Content>
</Layout>
</Layout>
</Layout>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Both the top navigation and the sidebar, commonly used in application site.</p></>) } });
Example #2
| Source File: top-side.jsx From virtuoso-design-system with MIT License | 5 votes |
|
storiesOf('antd/layout', module).add('top-side', () =>
<Layout>
<Header className="header">
<div className="logo" />
<Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']}>
<Menu.Item key="1">nav 1</Menu.Item>
<Menu.Item key="2">nav 2</Menu.Item>
<Menu.Item key="3">nav 3</Menu.Item>
</Menu>
</Header>
<Content style={{ padding: '0 50px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb>
<Layout className="site-layout-background" style={{ padding: '24px 0' }}>
<Sider className="site-layout-background" width={200}>
<Menu
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%' }}
>
<SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
<Menu.Item key="1">option1</Menu.Item>
<Menu.Item key="2">option2</Menu.Item>
<Menu.Item key="3">option3</Menu.Item>
<Menu.Item key="4">option4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
<Menu.Item key="5">option5</Menu.Item>
<Menu.Item key="6">option6</Menu.Item>
<Menu.Item key="7">option7</Menu.Item>
<Menu.Item key="8">option8</Menu.Item>
</SubMenu>
<SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
<Menu.Item key="9">option9</Menu.Item>
<Menu.Item key="10">option10</Menu.Item>
<Menu.Item key="11">option11</Menu.Item>
<Menu.Item key="12">option12</Menu.Item>
</SubMenu>
</Menu>
</Sider>
<Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content>
</Layout>
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Both the top navigation and the sidebar, commonly used in documentation site.</p></>) } });
Example #3
| Source File: Sidebar.js From acy-dex-interface with MIT License | 4 votes |
|
Sidebar = (props) => {
// state = {
// visible: true,
// };
const [selectedTab, setSelectedTab] = useState(1);
// static getDerivedStateFromProps(props, state) {
// if (!props.autoHideHeader && !state.visible) {
// return {
// visible: true,
// };
// }
// return null;
// }
// getHeadWidth = () => {
// const { isMobile, collapsed, setting } = this.props;
// const { fixedHeader, layout } = setting;
// if (isMobile || !fixedHeader || layout === 'topmenu') {
// return '100%';
// }
// return collapsed ? 'calc(100% - 80px)' : 'calc(100% - 256px)';
// };
// handleNoticeClear = type => {
// message.success(
// `${formatMessage({ id: 'component.noticeIcon.cleared' })} ${formatMessage({
// id: `component.globalHeader.${type}`,
// })}`
// );
// const { dispatch } = this.props;
// dispatch({
// type: 'global/clearNotices',
// payload: type,
// });
// };
const handleMenuClick = (e) => {
console.log(e.key);
// const { dispatch } = props;
if (e.key === 'launch') {
history.push('/launchpad');
}
if (e.key === 'exchange') {
history.push('/exchange')
}
// if (key === 'triggerError') {
// history.push('/exception/trigger');
// return;
// }
// if (key === 'userinfo') {
// history.push('/account/settings/base');
// // return;
// }
// // if (key === 'logout') {
// // dispatch({
// // type: 'login/logout',
// // });
// // }
};
// handScroll = () => {
// const { autoHideHeader } = this.props;
// const { visible } = this.state;
// if (!autoHideHeader) {
// return;
// }
// const scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
// if (!this.ticking) {
// this.ticking = true;
// requestAnimationFrame(() => {
// if (this.oldScrollTop > scrollTop) {
// this.setState({
// visible: true,
// });
// } else if (scrollTop > 300 && visible) {
// this.setState({
// visible: false,
// });
// } else if (scrollTop < 300 && !visible) {
// this.setState({
// visible: true,
// });
// }
// this.oldScrollTop = scrollTop;
// this.ticking = false;
// });
// }
// };
// const { isMobile, handleMenuCollapse, setting } = this.props;
// const { navTheme, layout, fixedHeader } = setting;
// const { visible } = this.state;
// const isTop = layout === 'topmenu';
// const width = this.getHeadWidth();
// const HeaderDom = visible ? (
// <Header style={{ padding: 0, width }} className={fixedHeader ? styles.fixedHeader : ''}>
// <TopNavHeader
// theme={navTheme}
// mode="horizontal"
// onCollapse={handleMenuCollapse}
// onNoticeClear={this.handleNoticeClear}
// onMenuClick={this.handleMenuClick}
// onNoticeVisibleChange={this.handleNoticeVisibleChange}
// {...this.props}
// />
// </Header>
// ) : null;
const tabMenu = selectedTab === 1 ?
(
<Menu
theme='dark'
onClick={handleMenuClick}
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%' }}
>
<SubMenu
key="sub1"
title={
<span>
<Icon type='mail' />
<span> subnav1</span>
</span>}
>
<Menu.Item key="1">Market</Menu.Item>
<Menu.Item key="2">Perpetual</Menu.Item>
<Menu.Item key="3">Stats</Menu.Item>
<Menu.Item key="exchange">
<Icon type='money-collect' />
Exchange
</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
<Icon type="LaptopOutlined" />
<Menu.Item key="5">
<Icon type="mail" />
Liquidity
</Menu.Item>
<Menu.Item key="6">Farm</Menu.Item>
<Menu.Item key="launch">
<Icon type="rocket" />
Launch
</Menu.Item>
</SubMenu>
<Menu.Item key="mail">
<Icon type="mail" />
navButton
</Menu.Item>
</Menu>
) :
(
<Menu
theme='dark'
onClick={handleMenuClick}
mode="inline"
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
style={{ height: '100%' }}
>
<SubMenu
key="sub1"
title={
<span>
<Icon type='mail' />
<span> subnav1</span>
</span>}
>
<Menu.Item key="1">Market</Menu.Item>
<Menu.Item key="exchange">
<Icon type='money-collect' />
Exchange
</Menu.Item>
</SubMenu>
</Menu>
);
return (
<Sider
theme='dark'
style={{
overflow: 'auto',
height: '100%',
position: 'fixed',
left: 0,
top: 0,
bottom: 0,
}}
>
<div className="ant-btn-group" style={{marginLeft: "10px", marginTop: "60px", marginBottom: "10px"}}>
<Button type="primary" icon="download" onClick={() => setSelectedTab(1)} ghost={selectedTab === 2}> Tab1 </Button>
<Button type="primary" icon="mail" onClick={() => setSelectedTab(2)} ghost={selectedTab === 1}> Tab2 </Button>
</div>
{tabMenu}
</Sider>
);
}
