@ant-design/icons#AppstoreOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#AppstoreOutlined.
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: Nav.jsx From node-project-manager with Apache License 2.0 | 6 votes |
|
Nav = ({ user }) => {
return (
<Menu mode="horizontal" className="navUsers">
<Menu.Item>
<HomeOutlined />
<Link to="/Home">Inicio</Link>
</Menu.Item>
<Menu.Item key="app">
<Link to="/Projects">
<AppstoreOutlined />
Proyectos
</Link>
</Menu.Item>
<Menu.Item>
<Link to="/Tecnologias">
<SettingOutlined />
Tecnologías
</Link>
</Menu.Item>
{user.admin ? (
<Menu.Item>
<UserOutlined />
<Link to="/AdminUser">Usuarios</Link>
</Menu.Item>
) : null}
{user.admin ? (
<Menu.Item>
<MailOutlined />
<Link to="/Informes">Informes</Link>
</Menu.Item>
) : null}
</Menu>
);
}
Example #2
| Source File: menu-full.jsx From virtuoso-design-system with MIT License | 6 votes |
|
menu = (
<Menu selectedKeys={['1']} openKeys={['sub1']}>
<Menu.ItemGroup key="group" title="Item Group">
<Menu.Item key="01">Option 0</Menu.Item>
<Menu.Item key="02">Option 0</Menu.Item>
</Menu.ItemGroup>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.ItemGroup key="g1" title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup key="g2" title="Item 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
)
Example #3
| Source File: horizontal.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
const { current } = this.state;
return (
<Menu onClick={this.handleClick} selectedKeys={[current]} mode="horizontal">
<Menu.Item key="mail" icon={<MailOutlined />}>
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
Navigation Two
</Menu.Item>
<SubMenu key="SubMenu" icon={<SettingOutlined />} title="Navigation Three - Submenu">
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</Menu.Item>
</Menu>
);
}
Example #4
| Source File: inline.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
return (
<Menu
onClick={this.handleClick}
style={{ width: 256 }}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode="inline"
>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.ItemGroup key="g1" title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup key="g2" title="Item 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
);
}
Example #5
| Source File: sider-current.jsx From virtuoso-design-system with MIT License | 6 votes |
|
Sider = () => {
const [openKeys, setOpenKeys] = React.useState(['sub1']);
const onOpenChange = keys => {
const latestOpenKey = keys.find(key => openKeys.indexOf(key) === -1);
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
setOpenKeys(keys);
} else {
setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
}
};
return (
<Menu mode="inline" openKeys={openKeys} onOpenChange={onOpenChange} style={{ width: 256 }}>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
);
}
Example #6
| Source File: style-debug.jsx From virtuoso-design-system with MIT License | 6 votes |
|
render() {
return (
<>
<Switch
checked={this.state.theme === 'dark'}
onChange={this.changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
theme={this.state.theme}
onClick={this.handleClick}
selectedKeys={[this.state.current]}
mode="horizontal"
>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One Long Long Long Long">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</Menu>
</>
);
}
Example #7
| Source File: vertical.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/menu', module).add('vertical', () =>
<Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.ItemGroup title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Iteom 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Submenus open as pop-ups.</p></>) } });
Example #8
| Source File: SideNav.js From Peppermint with GNU General Public License v3.0 | 5 votes |
|
SideNav = () => {
const handleClick = (e) => {};
const { Sider } = Layout;
return (
<div className="sideNav">
<Layout>
<Sider
breakpoint="lg"
collapsedWidth="0"
theme="light"
onBreakpoint={(broken) => {
console.log(broken);
}}
onCollapse={(collapsed, type) => {
console.log(collapsed, type);
}}
>
<Menu
onClick={handleClick}
style={{ height: "90vh" }}
className="Admin-Side-Nav"
defaultSelectedKeys={["1"]}
defaultOpenKeys={["sub1"]}
mode="inline"
>
<Menu.Item key="sub1" icon={<HomeTwoTone />}>
<Link to="/admin/dashboard">Dashboard</Link>
</Menu.Item>
<Menu.Item key="sub2" icon={<AppstoreOutlined />} disabled={true}>
<Link to="/admin/analytics">Analytics</Link>
</Menu.Item>
<SubMenu key="sub4" title="Newsletter" icon={<FileTextTwoTone />}>
<Menu.Item key="15">
<CreateNewsletter />
</Menu.Item>
<Menu.Item key="16">
<Link to="/admin/newsletters">All Newsletters</Link>
</Menu.Item>
</SubMenu>
<SubMenu key="sub3" title="Clients" icon={<SmileTwoTone />}>
<Menu.Item key="12">
<CreateClient />
</Menu.Item>
<Menu.Item key="13">
<Link to="/admin/clientView">Client List</Link>
</Menu.Item>
</SubMenu>
<SubMenu key="sub5" icon={<IdcardTwoTone />} title="Authentication">
<Menu.Item key="9">
<CreateUser />
</Menu.Item>
<Menu.Item key="10">
<Link to="/admin/viewUsers">View Users</Link>
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
</Layout>
</div>
);
}
Example #9
| Source File: index.jsx From erp-crm with MIT License | 5 votes |
|
export default function HeaderContent() {
const dispatch = useDispatch();
const { SubMenu } = Menu;
const profileDropdown = (
<div className="profileDropdown whiteBox shadow" style={{ minWidth: '200px' }}>
<div className="pad15">
<Avatar size="large" className="last" src={photo} style={{ float: 'left' }} />
<div className="info">
<p className="strong">Salah Eddine Lalami</p>
<p>[email protected]</p>
</div>
</div>
<div className="line"></div>
<div>
<Menu>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.ItemGroup key="g1" title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup key="g2" title="Item 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
</div>
<div className="line"></div>
<div>
<Menu>
<Menu.Item
icon={<LogoutOutlined />}
key={`${uniqueId()}`}
onClick={() => history.push('/logout')}
>
logout
</Menu.Item>
</Menu>
</div>
</div>
);
return (
<div className="headerIcon" style={{ position: 'absolute', right: 0, zIndex: '99' }}>
<Dropdown overlay={profileDropdown} trigger={['click']} placement="bottomRight">
{/* <Badge dot> */}
<Avatar className="last" src={photo} />
{/* </Badge> */}
</Dropdown>
<Avatar icon={<AppstoreOutlined />} />
<Avatar icon={<BellOutlined />} />
</div>
);
}
Example #10
| 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 #11
| Source File: switch-mode.jsx From virtuoso-design-system with MIT License | 5 votes |
|
Demo = () => {
const [mode, setMode] = React.useState('inline');
const [theme, setTheme] = React.useState('light');
const changeMode = value => {
setMode(value ? 'vertical' : 'inline');
};
const changeTheme = value => {
setTheme(value ? 'dark' : 'light');
};
return (
<>
<Switch onChange={changeMode} /> Change Mode
<Divider type="vertical" />
<Switch onChange={changeTheme} /> Change Style
<br />
<br />
<Menu
style={{ width: 256 }}
defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
mode={mode}
theme={theme}
>
<Menu.Item key="1" icon={<MailOutlined />}>
Navigation One
</Menu.Item>
<Menu.Item key="2" icon={<CalendarOutlined />}>
Navigation Two
</Menu.Item>
<SubMenu key="sub1" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
<SubMenu key="sub1-2" title="Submenu">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub2" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
</SubMenu>
<Menu.Item key="link" icon={<LinkOutlined />}>
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Ant Design
</a>
</Menu.Item>
</Menu>
</>
);
}
Example #12
| Source File: theme.jsx From virtuoso-design-system with MIT License | 5 votes |
|
render() {
return (
<>
<Switch
checked={this.state.theme === 'dark'}
onChange={this.changeTheme}
checkedChildren="Dark"
unCheckedChildren="Light"
/>
<br />
<br />
<Menu
theme={this.state.theme}
onClick={this.handleClick}
style={{ width: 256 }}
defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]}
mode="inline"
>
<SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</SubMenu>
<SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
</>
);
}
Example #13
| Source File: admin.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<Layout className="layout-style">
<Tabs activeKey={this.state.key} onTabClick={async (key) => {
await this.props.history.push("/Admin/" + key)
if (this.props.location.pathname === "/Admin/" + key) this.setState({ key: key })
}} style={{ overflowY: "auto", overflowX: "auto" }}>
<TabPane
tab={<span> Home </span>}
key=""
>
<h1>Welcome to Sieberrsec CTF Platform's admin panel.</h1>
<h1>Click on any of the tabs above to manage different parts of the portal.</h1>
<div className="settings-responsive2" style={{ display: "flex", justifyContent: "space-around" }}>
<Card className="settings-card">
<Button type='primary' onClick={this.downloadBackup} loading={this.state.backupLoading}><DownloadOutlined /> Download Backup</Button>
<p>Download all the data stored in the platform's database. Data can be uploaded onto a different platform/a later date to restore all the data</p>
</Card>
<Divider type="vertical" style={{ height: "inherit" }} />
<Card className="settings-card">
<div style={{width: "50%"}}>
<Dragger
fileList={this.state.fileList}
disabled={this.state.loadingUpload}
accept=".json"
maxCount={1}
onChange={(file) => {
if (file.fileList.length > 0) this.setState({ noFile: false })
else this.setState({ noFile: true })
this.setState({ fileList: file.fileList })
}}
beforeUpload={(file) => {
return false
}}>
<h4>Drag and drop backup .json file to upload.</h4><br/>
<p>Then, click the Upload button</p>
</Dragger>
<Button type="primary" icon={<UploadOutlined />} style={{ marginTop: "3ch" }} disabled={this.state.noFile} loading={this.state.loadingUpload} onClick={() => {
confirm({
confirmLoading: this.state.loadingUpload,
title: 'Are you sure you want to restore all platform data to this JSON file? This action is irreversible.',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.uploadBackup(close) },
onCancel: () => { },
});
this.uploadBackup
}}>Upload Backup</Button>
</div>
<p>Restore and upload data stored in a backup json file. <span style={{ color: "#d32029" }}><b>Warning: This <u>WILL OVERRIDE ALL EXISTING DATA</u> stored in this platform</b> (including the current account used to upload the backup). Please re-login after restoration is completed.</span></p>
</Card>
</div>
</TabPane>
<TabPane
tab={<span><NotificationOutlined />Announcements</span>}
key="Announcements"
>
<AdminManageAnnouncements />
</TabPane>
<TabPane
tab={<span><UserOutlined />Users</span>}
key="Users"
>
<AdminUsers></AdminUsers>
</TabPane>
<TabPane
tab={<span><AppstoreOutlined />Challenges</span>}
key="Challenges"
>
<AdminChallenges history={this.props.history} location={this.props.location}></AdminChallenges>
</TabPane>
<TabPane
tab={<span><BarsOutlined />Transactions</span>}
key="Submissions"
>
<AdminSubmissions></AdminSubmissions>
</TabPane>
<TabPane
tab={<span><MailOutlined />Email Settings</span>}
key="Emails"
>
<AdminEmails></AdminEmails>
</TabPane>
</Tabs>
</Layout>
);
}
Example #14
| Source File: componentDrag.js From react-drag with MIT License | 4 votes |
|
IndexView = props => {
const { dispatch, componentView, form, match } = props;
const { params } = match;
const { getFieldDecorator } = form;
const [comListHidden, setComListHidden] = useState(false);
/**
* @description 左边切换的事件，是否显示componentList
*/
const toggleComponentList = () => {
setComListHidden(!comListHidden);
};
const cls = classNames(styles.ComponentList, {
[styles.hidden]: comListHidden === true,
});
/**
* @description 生成预览代码
*/
const CodePreview = () => {
console.log('com', componentView);
dispatch(routerRedux.push('/codePreview'));
};
useEffect(() => {
// 首次执行
console.log('mount----');
// 发送setcurrentview
dispatch({
type: 'drag/getComponentCode',
payload: {
id: params.id,
},
});
}, []);
/**
* @description 发送到服务器
*/
const postToServer = () => {
if (componentValidator(componentView)) {
dispatch({
type: 'drag/putComponentCode',
payload: {
id: params.id,
code: componentView,
},
});
}
};
const basicObj = {
type: 'div',
nested: true,
props: {
style: {
height: '',
width: '',
marginTop: '',
},
},
needDiv: false,
children: [],
};
// 组件不能为空
const componentValidator = componentView => {
if (componentView.length === 0) {
// 提示不能为空
message.error('组件不能为空');
return false;
} else if (componentView.length === 1) {
return true;
} else {
confirm({
title: '组件必须在被包裹在一个根组件下,是否自动生成外层根组件包裹?',
content: '当你点击ok，自动生成包裹根组件',
okText: '确认',
cancelText: '取消',
onOk() {
return new Promise((resolve, reject) => {
// dispatch
const basic = basicObj;
basic.children = componentView;
dispatch({
type: 'drag/setCurrentView',
payload: [basic],
isPage: false,
});
setTimeout(resolve, 1000);
}).catch(() => console.log('Oops errors!'));
},
onCancel() {},
});
return false;
}
};
/**
* @description 跳转代码广场
*/
const comSquare = () => {
dispatch(routerRedux.push('/comsquare'));
};
return (
<div className={styles.container}>
<div className={styles.LeftContainer}>
<div className={styles.header}>
<div className={styles.btnList}>
<div className={styles.logo}>React-Drag</div>
<div className={styles.operation}>
<div className={styles.btn} style={{ color: '#1890FF' }}>
<HighlightOutlined style={{ fontSize: '22px' }} />
组件编辑
</div>
<div className={styles.btn} onClick={comSquare}>
<AppstoreOutlined style={{ fontSize: '22px' }} />
组件广场
</div>
<div className={styles.btn} onClick={postToServer}>
<CheckCircleOutlined style={{ fontSize: '22px' }} />
保存到服务器
</div>
</div>
<div className={styles.userCenter}>
<div className={styles.btn} onClick={CodePreview}>
<UserOutlined style={{ fontSize: '22px' }} />
用户中心
</div>
</div>
</div>
</div>
<div className={styles.content}>
<div className={styles.settings}>
<span onClick={toggleComponentList}>
<SmileTwoTone style={{ fontSize: '24px' }} />
</span>
</div>
<div className={styles.editRegion}>
<div className={cls}>
<Tabs>
<TabPane tab="公共组件" key="1">
<ComponentList />
</TabPane>
</Tabs>
</div>
<div className={styles.dragRegion}>
<DragCanvas isPage={false} />
</div>
</div>
<div className={styles.RightContainer}>
<div className={styles.title}>属性编辑区</div>
<ComponentConfig isPage={false} />
</div>
</div>
<div className={styles.footer}>
{' '}
MIT Licensed | Copyright © 2019.12.31-present Daisy
</div>
</div>
</div>
);
}
Example #15
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
return (
<div>
<h5 className="mb-3">
<strong>Horizontal</strong>
</h5>
<div className="mb-5">
<Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
<Menu.Item key="mail">
<MailOutlined />
Navigation One
</Menu.Item>
<Menu.Item key="app" disabled>
<AppstoreOutlined />
Navigation Two
</Menu.Item>
<SubMenu
title={
<span className="submenu-title-wrapper">
<SettingOutlined />
Navigation Three - Submenu
</span>
}
>
<Menu.ItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<Menu.Item key="alipay">
<a href="https://ant.design" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</Menu.Item>
</Menu>
</div>
<h5 className="mb-3">
<strong>Vertical</strong>
</h5>
<div className="mb-5">
<Menu onClick={this.handleClick} style={{ width: 256 }} mode="vertical">
<SubMenu
key="sub1"
title={
<span>
<MailOutlined />
<span>Navigation One</span>
</span>
}
>
<Menu.ItemGroup title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item>
<Menu.Item key="2">Option 2</Menu.Item>
</Menu.ItemGroup>
<Menu.ItemGroup title="Iteom 2">
<Menu.Item key="3">Option 3</Menu.Item>
<Menu.Item key="4">Option 4</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
<SubMenu
key="sub2"
title={
<span>
<AppstoreOutlined />
<span>Navigation Two</span>
</span>
}
>
<Menu.Item key="5">Option 5</Menu.Item>
<Menu.Item key="6">Option 6</Menu.Item>
<SubMenu key="sub3" title="Submenu">
<Menu.Item key="7">Option 7</Menu.Item>
<Menu.Item key="8">Option 8</Menu.Item>
</SubMenu>
</SubMenu>
<SubMenu
key="sub4"
title={
<span>
<SettingOutlined />
<span>Navigation Three</span>
</span>
}
>
<Menu.Item key="9">Option 9</Menu.Item>
<Menu.Item key="10">Option 10</Menu.Item>
<Menu.Item key="11">Option 11</Menu.Item>
<Menu.Item key="12">Option 12</Menu.Item>
</SubMenu>
</Menu>
</div>
</div>
)
}
Example #16
| 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></>) } });
