@ant-design/icons#InboxOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#InboxOutlined.
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: Upload.jsx From React-Nest-Admin with MIT License | 6 votes |
|
function UploadEbook() {
return (
<div style={{ height: "240px" }}>
<Dragger {...props}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">点击或拖拽上传</p>
</Dragger>
</div>
);
}
Example #2
| Source File: index.js From gobench with Apache License 2.0 | 6 votes |
|
render() {
return (
<div>
<h5 className="mb-3">
<strong>Basic</strong>
</h5>
<div className="mb-5">
<Upload {...props}>
<Button>
<UploadOutlined /> Click to Upload
</Button>
</Upload>
</div>
<h5 className="mb-3">
<strong>Drag & Drop</strong>
</h5>
<div className="mb-5">
<Dragger {...props}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-hint">
Support for a single or bulk upload. Strictly prohibit from uploading company data or
other band files
</p>
</Dragger>
</div>
</div>
)
}
Example #3
| Source File: drag.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/upload', module).add('drag', () =>
<Dragger {...props}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-hint">
Support for a single or bulk upload. Strictly prohibit from uploading company data or other
band files
</p>
</Dragger>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>You can drag files to a specific area, to upload. Alternatively, you can also upload by selecting.</p>
<p>We can upload serveral files at once in modern browsers by giving the input the <code>multiple</code> attribute.</p></>) } });
Example #4
| 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 #5
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
AdvancedFormExamples = () => {
const [confirmDirty, setConfirmDirty] = useState(false)
const handleConfirmBlur = e => {
const { value } = e.target
setConfirmDirty(confirmDirty || !!value)
}
const opts = {
name: 'file',
multiple: true,
action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
onChange(info) {
const { status } = info.file
if (status !== 'uploading') {
console.log(info.file, info.fileList)
}
if (status === 'done') {
message.success(`${info.file.name} file uploaded successfully.`)
} else if (status === 'error') {
message.error(`${info.file.name} file upload failed.`)
}
},
}
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
},
}
const marks = {
0: '0',
10: '10',
20: '20',
30: '30',
40: '40',
50: '50',
60: '60',
70: '70',
80: '80',
90: '90',
100: '100',
}
const residences = [
{
value: 'zhejiang',
label: 'Zhejiang',
children: [
{
value: 'hangzhou',
label: 'Hangzhou',
children: [
{
value: 'xihu',
label: 'West Lake',
},
],
},
],
},
{
value: 'jiangsu',
label: 'Jiangsu',
children: [
{
value: 'nanjing',
label: 'Nanjing',
children: [
{
value: 'zhonghuamen',
label: 'Zhong Hua Men',
},
],
},
],
},
]
return (
<div>
<Helmet title="Advanced / Form Examples" />
<div className="kit__utils__heading">
<h5>Form Examples</h5>
</div>
<div className="card">
<div className="card-body">
<h5 className="mb-4">
<strong>Basic Form</strong>
</h5>
<Form {...formItemLayout} labelAlign="left">
<Form.Item name="fullname6" label="Fullname">
<Input placeholder="Your Fullname..." />
</Form.Item>
<Form.Item name="email6" label="Your Email...">
<Input placeholder="Your Email..." />
</Form.Item>
<Form.Item name="budget1" label="Budget" className="mb-3">
<Input placeholder="Your Budget..." addonBefore="$" />
</Form.Item>
<Form.Item name="amount" label="Amount">
<Slider marks={marks} />
</Form.Item>
<button type="submit" className="btn btn-success px-5">
Send Data
</button>
</Form>
</div>
</div>
<div className="card">
<div className="card-body">
<h5 className="mb-4">
<strong>Inline Form</strong>
</h5>
<Form layout="inline">
<Form.Item name="budget2" className="mb-1 mt-1">
<Input placeholder="Coins Amount" addonBefore="$" addonAfter=".00" />
</Form.Item>
<Form.Item name="budget3" className="mb-1 mt-1">
<Input placeholder="8 Digit Pin" addonBefore="$" />
</Form.Item>
<button type="button" className="btn btn-success mt-1 mb-1">
Confirm Transaction
</button>
</Form>
</div>
</div>
<div className="card">
<div className="card-body">
<h5 className="mb-4">
<strong>Two Columns</strong>
</h5>
<Form layout="vertical">
<div className="row">
<div className="col-md-6">
<Form.Item name="email3" label="E-mail">
<Input placeholder="Email" />
</Form.Item>
</div>
<div className="col-md-6">
<Form.Item name="pass3" label="Password">
<Input placeholder="Password" />
</Form.Item>
</div>
<div className="col-12">
<Form.Item name="address3-1" label="Adress">
<Input placeholder="1234 Main St." />
</Form.Item>
<Form.Item name="address3-2" label="Adress 2">
<Input placeholder="Apartment, studio, or floor" />
</Form.Item>
</div>
<div className="col-md-6">
<Form.Item name="city3" label="City">
<Input />
</Form.Item>
</div>
<div className="col-md-4">
<Form.Item name="state3" label="State">
<Cascader options={residences} />
</Form.Item>
</div>
<div className="col-md-2">
<Form.Item name="zip" label="Zip">
<Input />
</Form.Item>
</div>
<div className="col-12">
<Form.Item valuePropName="fileList" name="upload3" label="Upload Presentation">
<Dragger {...opts}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-hint">
Support for a single or bulk upload. Strictly prohibit from uploading company
data or other band files
</p>
</Dragger>
</Form.Item>
</div>
<div className="col-12">
<Form.Item valuePropName="checked" name="confirm3">
<Checkbox className="text-uppercase">
I CONSENT TO HAVING MDTK SOFT COLLECT MY PERSONAL DETAILS.
</Checkbox>
</Form.Item>
<Form.Item name="confirm4">
<button type="button" className="btn btn-light px-5">
Sign in
</button>
</Form.Item>
</div>
</div>
</Form>
</div>
</div>
<div className="card">
<div className="card-body">
<h5 className="mb-4">
<strong>Validation & Background</strong>
</h5>
<div className="bg-light rounded-lg p-5">
<div className="row">
<div className="col-lg-8 mx-auto">
<Form layout="vertical">
<Form.Item name="fullname" label="Username">
<Input />
</Form.Item>
<Form.Item name="gender" label="Gender">
<Select placeholder="Select a option and change input text above">
<Option value="male">male</Option>
<Option value="female">female</Option>
</Select>
</Form.Item>
<Form.Item name="email" label="E-mail">
<Input />
</Form.Item>
<Form.Item name="password" label="Password" hasFeedback>
<Input.Password />
</Form.Item>
<Form.Item name="confirm" label="Confirm Password" hasFeedback>
<Input.Password onBlur={handleConfirmBlur} />
</Form.Item>
<div className="border-top pt-4">
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</div>
</Form>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Example #6
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
ExtraAppsWordpressAdd = () => {
return (
<div>
<Helmet title="Wordpress Add" />
<div className="card">
<div className="card-body">
<Form layout="vertical">
<div className="row">
<div className="col-md-6">
<div className="form-group">
<Form.Item name="title" label="Title">
<Input placeholder="Post title" />
</Form.Item>
</div>
</div>
</div>
<div className="form-group">
<Form.Item name="type" label="Type">
<Checkbox.Group>
<div className="d-flex flex-wrap">
<div className="mr-3 mt-1 mb-1">
<Checkbox value="text">Text</Checkbox>
</div>
<div className="mr-3 mt-1 mb-1">
<Checkbox value="video">Video</Checkbox>
</div>
<div className="mr-3 mt-1 mb-1">
<Checkbox value="image">Image</Checkbox>
</div>
<div className="mr-3 mt-1 mb-1">
<Checkbox value="audio">Audio</Checkbox>
</div>
<div className="mr-3 mt-1 mb-1">
<Checkbox value="vimeo">Vimeo</Checkbox>
</div>
</div>
</Checkbox.Group>
</Form.Item>
</div>
<div className="form-group">
<Form.Item name="category" label="Category">
<Select
mode="tags"
size="default"
placeholder="Select post category"
style={{ width: '100%' }}
>
<Option key="travel">Travel</Option>
<Option key="lifestyle">Lifestyle</Option>
<Option key="nature">Nature</Option>
<Option key="Video">Video</Option>
</Select>
</Form.Item>
</div>
<div className="form-group">
<Form.Item name="content" label="Content">
<Editor
editorClassName="px-3 border border-gray-1"
editorStyle={{
height: 250,
overflow: 'auto',
}}
/>
</Form.Item>
</div>
<div className="form-group">
<Form.Item valuePropName="fileList" name="files">
<Dragger>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">Click or drag file to this area to upload</p>
<p className="ant-upload-hint">
Support for a single or bulk upload. Strictly prohibit from uploading company
data or other band files
</p>
</Dragger>
</Form.Item>
</div>
<Form.Item>
<button type="submit" className="btn btn-success btn-with-addon text-nowrap">
<span className="btn-addon">
<i className="btn-addon-icon fe fe-plus-circle" />
</span>
Add Post
</button>
</Form.Item>
</Form>
</div>
</div>
</div>
)
}
Example #7
| Source File: [id].js From zeroqueue with GNU General Public License v3.0 | 4 votes |
|
export default function Queue() {
const user = useUser({ redirectTo: '/' });
const router = useRouter();
const { id } = router.query;
const [queue, setQueue] = useState(null);
const [loadingQueue, setLoadingQueue] = useState(false);
useEffect(() => {
const fetchQueue = async () => {
try {
if (!user) return;
setLoadingQueue(true);
const res = await fetch(`/api/queue/${id}`);
const { data, error } = await res.json();
switch (res.status) {
case 200:
setQueue(data);
break;
default:
throw new Error(error);
}
} catch (error) {
message.error(error.message);
} finally {
setLoadingQueue(false);
}
};
fetchQueue();
}, [user]);
const [showNewJobsForm, setShowNewJobsForm] = useState(false);
const [jobs, setJobs] = useState(null);
const [loadingAddJobs, setLoadingAddJobs] = useState(false);
const onAddJob = async () => {
try {
if (!user) return;
setLoadingAddJobs(true);
const res = await fetch(`/api/queue/${id}`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: jobs,
});
const { error } = await res.json();
switch (res.status) {
case 200:
location.reload();
break;
default:
throw new Error(error);
}
} catch (error) {
message.error(error.message);
} finally {
setLoadingAddJobs(false);
}
};
const [showWorkerCodeSample, setShowWorkerCodeSample] = useState(false);
const onDropdownClick = ({ key }) => {
switch (key) {
case DROPDOWN_KEYS.CODE_SAMPLE:
return setShowWorkerCodeSample(true);
default:
break;
}
};
const queueName = () => (queue && queue.name) || '...';
const [redis, setRedis] = useState(null);
const [loadingSecret, setLoadingSecret] = useState(null);
const onShowSecret = async (checked) => {
if (!checked) return setRedis(null);
try {
if (!user) return;
setLoadingSecret(true);
const res = await fetch(`/api/config`);
const { data, error } = await res.json();
switch (res.status) {
case 200:
setRedis(data.REDIS_URL);
break;
default:
throw new Error(error);
}
} catch (error) {
message.error(error.message);
} finally {
setLoadingSecret(false);
}
};
return (
<div>
<Head>
<title>Zero Queue</title>
<link rel="icon" href="/favicon.ico" />
</Head>
{user && (
<Layout className="dashboard-layout">
<Sidebar />
<Layout className="dashboard-layout">
<Header className="dashboard-header">
<div className="dashboard-header__space" />
<Button type="link" href="/api/auth/logout">
Logout
</Button>
</Header>
<Content className="dashboard-content">
<Breadcrumb className="dashboard-content__breadcrumb">
<Breadcrumb.Item>ZeroQueue</Breadcrumb.Item>
<Breadcrumb.Item>
<Link href={`/dashboard`}>
<a>Queue</a>
</Link>
</Breadcrumb.Item>
<Breadcrumb.Item>{id}</Breadcrumb.Item>
</Breadcrumb>
<div className="dashboard-content__background">
<div className="dashboard-overview-header">
<Title className="dashboard-overview-header__title" level={3}>
{queueName()}
</Title>
<Button
type="primary"
icon={<PlusOutlined />}
onClick={() => setShowNewJobsForm(true)}
>
New Jobs
</Button>
<Dropdown
overlay={
<Menu onClick={onDropdownClick}>
<Menu.Item key={DROPDOWN_KEYS.CODE_SAMPLE}>
<ApiOutlined /> Code sample
</Menu.Item>
</Menu>
}
>
<Button className="dashboard-overview-header__last-button">
More <DownOutlined />
</Button>
</Dropdown>
</div>
<Table
rowKey="name"
loading={loadingQueue}
columns={columns(id)}
dataSource={(queue && queue.status) || []}
/>
</div>
</Content>
<Footer className="dashboard-footer">
<Button
type="link"
href="https://github.com/thezeroqueue/zeroqueue"
target="blank"
icon={<GithubFilled />}
/>
</Footer>
</Layout>
<Modal
title="Add new jobs"
visible={showNewJobsForm}
onCancel={() => setShowNewJobsForm(false)}
footer={null}
>
<Dragger {...uploadProps(setJobs)}>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">Click or drag JSON file to this area to upload</p>
<p className="ant-upload-hint">See docs to learn more...</p>
</Dragger>
<br />
<Button
loading={loadingAddJobs}
disabled={!jobs}
type="primary"
block
onClick={onAddJob}
>
Add Jobs
</Button>
</Modal>
<Modal
title="Worker code sample"
width="45%"
visible={showWorkerCodeSample}
onCancel={() => setShowWorkerCodeSample(false)}
footer={null}
>
<p>Install dependencies:</p>
<InstallDependencies />
<div className="modal-inline-text">
<p>Use the following template:</p>
<p>
<Switch
unCheckedChildren={<EyeInvisibleOutlined />}
loading={loadingSecret}
onChange={onShowSecret}
/>
</p>
</div>
<Worker queue={queueName()} redis={redis} />
</Modal>
</Layout>
)}
</div>
);
}
Example #8
| Source File: ImageDrawer.js From Codelabz with Apache License 2.0 | 4 votes |
|
ImageDrawer = ({ onClose, visible, owner, tutorial_id, imageURLs }) => {
const firebase = useFirebase();
const firestore = useFirestore();
const dispatch = useDispatch();
const uploading = useSelector(
({
tutorials: {
images: { uploading },
},
}) => uploading
);
const uploading_error = useSelector(
({
tutorials: {
images: { uploading_error },
},
}) => uploading_error
);
const deleting = useSelector(
({
tutorials: {
images: { deleting },
},
}) => deleting
);
const deleting_error = useSelector(
({
tutorials: {
images: { deleting_error },
},
}) => deleting_error
);
useEffect(() => {
if (uploading === false && uploading_error === false) {
<Snackbar
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
open={true}
autoHideDuration={6000}
message="Image Uploaded successfully...."
/>;
} else if (uploading === false && uploading_error) {
<Snackbar
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
open={true}
autoHideDuration={6000}
message={uploading_error}
/>;
}
}, [uploading, uploading_error]);
useEffect(() => {
if (deleting === false && deleting_error === false) {
<Snackbar
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
open={true}
autoHideDuration={6000}
message="Deleted Succefully...."
/>;
} else if (deleting === false && deleting_error) {
<Snackbar
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
open={true}
autoHideDuration={6000}
message={deleting_error}
/>;
}
}, [deleting, deleting_error]);
useEffect(() => {
clearTutorialImagesReducer()(dispatch);
return () => {
clearTutorialImagesReducer()(dispatch);
};
}, [dispatch]);
const props = {
name: "file",
multiple: true,
beforeUpload(file, files) {
uploadTutorialImages(owner, tutorial_id, files)(
firebase,
firestore,
dispatch
);
return false;
},
};
const deleteFile = (name, url) =>
remoteTutorialImages(
owner,
tutorial_id,
name,
url
)(firebase, firestore, dispatch);
return (
<Drawer
title="Images"
anchor="right"
closable={true}
onClose={onClose}
open={visible}
getContainer={true}
style={{ position: "absolute" }}
width="400px"
className="image-drawer"
destroyOnClose={true}
maskClosable={false}
>
<div className="col-pad-24" data-testId="tutorialImgUpload">
<Grid>
<input
id="file-upload"
fullWidth
accept="image/*"
type="file"
{...props}
/>
{uploading ? (
<>
<LoadingOutlined /> Please wait...
<p className="ant-upload-hint mt-8">Uploading image(s)...</p>
</>
) : (
<>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">
Click or drag images to here to upload
</p>
</>
)}
</Grid>
{imageURLs &&
imageURLs.length > 0 &&
imageURLs.map((image, i) => (
<Grid className="mb-24" key={i}>
<Grid xs={24} md={8}>
<img src={image.url} alt="" />
</Grid>
<Grid xs={24} md={16} className="pl-8" style={{}}>
<h4 className="pb-8">{image.name}</h4>
<CopyToClipboard
text={``}
onCopy={() => (
<Snackbar
anchorOrigin={{
vertical: "bottom",
horizontal: "left",
}}
open={true}
autoHideDuration={6000}
message="Copied...."
/>
)}
>
<Button type="primary">Copy URL</Button>
</CopyToClipboard>
<Button
loading={deleting}
onClick={() => deleteFile(image.name, image.url)}
type="ghost"
danger
>
Delete
</Button>
</Grid>
</Grid>
))}
</div>
</Drawer>
);
}
