@ant-design/icons#UnorderedListOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#UnorderedListOutlined.
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: Sider1.js From twitterSOS with GNU General Public License v3.0 | 5 votes |
|
render() {
const { collapsed } = this.state;
return (
<Sider
// width={220}
style={{
overflow: 'auto',
height: 'cover',
// position: 'fixed',
left: 0,
}}
collapsible
collapsed={collapsed}
onCollapse={this.onCollapse}>
<div className='logo' />
<Menu theme='dark' defaultSelectedKeys={['1']} mode='inline'>
<SubMenu
className='submenu'
style={{ minHeight: '70px', padding: 15, fontSize: 'x-large' }}
key='sub1'
icon={<UnorderedListOutlined style={{ fontSize: 'large' }} />}
title='Sort by'>
<Menu.Item key='1'>
<Checkbox onChange={onChange}></Checkbox> Oxygen
</Menu.Item>
<Menu.Item key='2'>
<Checkbox onChange={onChange}></Checkbox> Medicine
</Menu.Item>
<Menu.Item key='3'>
<Checkbox onChange={onChange}></Checkbox> Money
</Menu.Item>
<Menu.Item key='4'>
<Checkbox onChange={onChange}></Checkbox> Hospital beds
</Menu.Item>
<Menu.Item key='5'>
<Checkbox onChange={onChange}></Checkbox> Plasma donors
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
);
}
Example #2
| Source File: submission.js From deadviz with MIT License | 4 votes |
|
Submission = ({ onSubmit }) => {
const [form] = Form.useForm();
const onFinish = values => {
onSubmit(values);
form.resetFields();
};
return (
<StyledForm
requiredMark={false}
form={form}
onFinish={onFinish}>
<Form.Item name="name" label={
<span>
Name
<Tooltip title="What's your plan/goal?">
<QuestionCircleOutlined />
</Tooltip>
</span>
} hasFeedback rules={[{ required: true, message: 'Please input your plan/goal', whitespace: true }]}>
<Input placeholder="My ultimate goal" />
</Form.Item>
<Form.Item name="start" label={
<span>
Start
<Tooltip title="Goal's Start Date">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
initialValue={dayjs()}
hasFeedback
dependencies={['end']}
rules={[
{ type: 'object', required: true, message: 'Please select start time' },
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('end') > value) {
return Promise.resolve();
}
return Promise.reject('The start date should be before end date');
},
})]}>
<DatePicker initialValues={dayjs()} className="full-width" />
</Form.Item>
<Form.Item name="end" label={
<span>
End
<Tooltip title="Goal's End Date">
<QuestionCircleOutlined />
</Tooltip>
</span>
}
hasFeedback
initialValue={dayjs().add(1, 'y')}
dependencies={['start']}
rules={[
{ type: 'object', required: true, message: 'Please select end time' },
({ getFieldValue }) => ({
validator(rule, value) {
if (!value || getFieldValue('start') < value) {
return Promise.resolve();
}
return Promise.reject('The end date should be after start date');
},
})]}>
<DatePicker initialValues={dayjs().add(1, 'y')} className="full-width" />
</Form.Item>
<Form.Item name="priority" style={{ width: '100%' }} hasFeedback
label={
<span>
Priority
<Tooltip title="Goal's Priority">
<QuestionCircleOutlined />
</Tooltip>
</span>
}>
<Slider style={{ width: '85%' }} defaultValue={0.5} max={1.0} min={0.0} marks={false} step={0.01} />
</Form.Item>
<Form.Item>
<StyledButton size="large" icon={<UnorderedListOutlined />} shape="round" className="centered" type="primary"
htmlType="submit">
Add to List
</StyledButton>
</Form.Item>
</StyledForm>
);
}
Example #3
| Source File: App.js From hashcat.launcher with MIT License | 4 votes |
|
render() {
return (
<Layout>
<Sider
style={{
overflow: 'auto',
height: '100vh',
position: 'fixed',
left: 0
}}
collapsed
>
<Menu theme="dark" onSelect={this.onSelectMenu} defaultSelectedKeys={[this.state.currentView]} mode="inline">
<Menu.Item key="New Task" icon={<PlusOutlined />}>
New Task
</Menu.Item>
<Menu.Item key="Tasks" icon={<UnorderedListOutlined />}>
Tasks
</Menu.Item>
<Menu.Item key="Settings" icon={<SettingOutlined />}>
Settings
</Menu.Item>
<Menu.Divider />
<Menu.Item key="Tools" icon={<DeploymentUnitOutlined />}>
Tools
</Menu.Item>
<Menu.Divider />
<Menu.Item key="Help" icon={<QuestionCircleOutlined />}>
Help
</Menu.Item>
<Menu.Item key="About" icon={<InfoCircleOutlined />}>
About
</Menu.Item>
</Menu>
</Sider>
<div style={{ marginLeft: '80px'}}></div>
<Layout style={{ height: "100vh" }}>
<Header
style={{
display: 'flex',
alignItems: 'center',
position: 'fixed',
zIndex: 1,
width: '100%',
backgroundColor: '#000',
borderBottom: '1px #1d1d1d solid'
}}
>
<img style={{ height: '100%'}} src={require('./images/Icon.png').default} />
<Title level={3} style={{ margin: '0 10px', color: '#fff' }}>
hashcat.launcher
</Title>
<span>
{this.state.version ? (
this.state.version === "dev" ? (
"dev"
) : (
"v" + this.state.version
)
) : "dev"}
</span>
</Header>
<div style={{ marginTop: '64px'}}></div>
{this.state.isLoadedHashcat === false && (
<Alert
style={{ maxHeight: "38px" }}
type="warning"
message={
<Tooltip
title={
<>
hashcat is expected to be in the same directory as hashcat.launcher
inside a subfolder <Text code>/hashcat</Text>
</>
}
>
hashcat not found
</Tooltip>
}
banner
/>
)}
<div
style={{ display: this.state.currentView === "New Task" ? "block" : "none" }}
>
{this.newTaskView}
</div>
<div
style={{
display: this.state.currentView === "Tasks" ? "flex" : "none",
flexDirection: "column",
flex: "1 0 auto",
maxHeight: this.state.isLoadedHashcat === false ? "calc(100% - 64px - 38px)" : "calc(100% - 64px)"
}}
>
{this.tasksView}
</div>
<div
style={{ display: this.state.currentView === "Settings" ? "block" : "none" }}
>
{this.settingsView}
</div>
<div
style={{ display: this.state.currentView === "Tools" ? "block" : "none" }}
>
{this.toolsView}
</div>
<div
style={{ display: this.state.currentView === "Help" ? "block" : "none" }}
>
{this.helpView}
</div>
<div
style={{ display: this.state.currentView === "About" ? "block" : "none" }}
>
{this.aboutView}
</div>
</Layout>
</Layout>
)
}
