@ant-design/icons#ArrowUpOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#ArrowUpOutlined.
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: OverallIndicator.js From website with MIT License | 6 votes |
|
OverallIndicator = ({ className, metrics }) => {
return (
<div className={'overall-indicator ' + className}>
{metrics.map(
({ label, value, arrow = { direction: 'up', type: 'success ' } }) => (
<OverallItem
key={JSON.stringify({ label, value })}
arrow={arrow}
className='overall-indicator__item'
>
<p className='value'>
{format(value)}{' '}
{arrow.direction === 'up' ? (
<ArrowUpOutlined />
) : (
<ArrowDownOutlined />
)}
</p>
<h3 className='title'>{label}</h3>
</OverallItem>
)
)}
</div>
);
}
Example #2
| Source File: AiSample.js From network-rc with Apache License 2.0 | 6 votes |
|
aiAction = {
left: {
icon: <ArrowLeftOutlined />,
name: "左转弯",
action: { speed: 1, direction: 1 },
label: 0,
},
right: {
icon: <ArrowRightOutlined />,
name: "右转弯",
action: { speed: 1, direction: -1 },
label: 1,
},
forward: {
icon: <ArrowUpOutlined />,
name: "前进",
action: { speed: 1, direction: 0 },
label: 2,
},
back: {
icon: <ArrowDownOutlined />,
action: { speed: -1, direction: 0 },
name: "后退",
label: 3,
},
stop: {
icon: <PauseOutlined />,
action: { speed: 0, direction: 0 },
name: "停止",
label: 4,
},
}
Example #3
| Source File: card.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/statistic', module).add('card', () =>
<div className="site-statistic-demo-card">
<Row gutter={16}>
<Col span={12}>
<Card>
<Statistic
title="Active"
value={11.28}
precision={2}
valueStyle={{ color: '#3f8600' }}
prefix={<ArrowUpOutlined />}
suffix="%"
/>
</Card>
</Col>
<Col span={12}>
<Card>
<Statistic
title="Idle"
value={9.3}
precision={2}
valueStyle={{ color: '#cf1322' }}
prefix={<ArrowDownOutlined />}
suffix="%"
/>
</Card>
</Col>
</Row>
</div>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Display statistic data in Card.</p></>) } });
Example #4
| Source File: index.js From one_month_code with Apache License 2.0 | 5 votes |
|
render() {
return (
<div className={"overview"}>
<div className="top">
<Card className={"card"} title="用户概览" extra={<a href="#">More</a>}>
<Row>
<Col span={12}>
<Statistic
title="今日注册"
value={this.state.userInfo.today}
precision={0}
valueStyle={{color: '#3f8600'}}
prefix={<ArrowUpOutlined/>}
suffix="个"
/>
</Col>
<Col span={12}>
<Statistic
title="总人数"
value={this.state.userInfo.total}
precision={0}
valueStyle={{color: '#3f8600'}}
suffix="个"
/>
</Col>
</Row>
</Card>
<Card className={"card"} title="讲师概览" extra={<a href="#">More</a>}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
<Card className={"card"} title="课程概览" extra={<a href="#">More</a>}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
<Card className={"card"} title="文章概览" extra={<a href="#">More</a>}>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
</Card>
</div>
<div className="content">
<Tabs defaultActiveKey="5" onChange={this.callback}>
{[5,4,3,2,1].map(value=>{
return <TabPane tab={value+"分评价"} key={value}>
<List
itemLayout="horizontal"
dataSource={this.state.scoreInfo}
renderItem={item => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={"http://lxt.itlike.com/"+item.user_header} />}
title={<a href="https://ant.design">{item.user_name}</a>}
description={item.content}
/>
</List.Item>
)}
/>
</TabPane>
})}
</Tabs>
</div>
</div>
)
}
Example #5
| Source File: Dashboard.jsx From erp-crm with MIT License | 4 votes |
|
export default function Dashboard() {
const entity = 'invoice213';
const dataTableColumns = [
{
title: 'N#',
dataIndex: 'number',
},
{
title: 'Client',
dataIndex: ['client', 'company'],
},
{
title: 'Total',
dataIndex: 'total',
render: (total) => `$ ${total}`.replace(/\B(?=(\d{3})+(?!\d))/g, ' '),
},
{
title: 'Status',
dataIndex: 'status',
render: (status) => {
let color = status === 'Draft' ? 'volcano' : 'green';
return <Tag color={color}>{status.toUpperCase()}</Tag>;
},
},
];
const config = { entity, dataTableColumns };
return (
<DashboardLayout>
<Row gutter={[24, 24]}>
<TopCard
title={'Invoice'}
tagColor={'cyan'}
prefix={'This month'}
tagContent={'34 000 $'}
/>
<TopCard
title={'Quote'}
tagColor={'purple'}
prefix={'This month'}
tagContent={'34 000 $'}
/>
<TopCard
title={'Payment'}
tagColor={'green'}
prefix={'This month'}
tagContent={'34 000 $'}
/>
<TopCard
title={'Due Balance'}
tagColor={'red'}
prefix={'Not Paid'}
tagContent={'34 000 $'}
/>
</Row>
<div className="space30"></div>
<Row gutter={[24, 24]}>
<Col
className="gutter-row"
xs={{ span: 24 }}
sm={{ span: 24 }}
md={{ span: 24 }}
lg={{ span: 18 }}
>
<div className="whiteBox shadow" style={{ minHeight: '380px' }}>
<Row className="pad10" gutter={[0, 0]}>
<Col
className="gutter-row"
xs={{ span: 24 }}
sm={{ span: 24 }}
md={{ span: 8 }}
lg={{ span: 8 }}
>
<div className="pad15">
<h3
style={{
color: '#22075e',
marginBottom: 15,
}}
>
Invoice Preview
</h3>
<PreviewState tag={'Draft'} color={'grey'} value={3} />
<PreviewState tag={'Pending'} color={'bleu'} value={5} />
<PreviewState tag={'Not Paid'} color={'orange'} value={12} />
<PreviewState tag={'Overdue'} color={'red'} value={6} />
<PreviewState tag={'Partially Paid'} color={'cyan'} value={8} />
<PreviewState tag={'Paid'} color={'green'} value={55} />
</div>
</Col>
<Col
className="gutter-row"
xs={{ span: 24 }}
sm={{ span: 24 }}
md={{ span: 8 }}
lg={{ span: 8 }}
>
{' '}
<div className="pad15">
<h3
style={{
color: '#22075e',
marginBottom: 15,
}}
>
Quote Preview
</h3>
<PreviewState tag={'Draft'} color={'grey'} value={3} />
<PreviewState tag={'Pending'} color={'bleu'} value={5} />
<PreviewState tag={'Not Paid'} color={'orange'} value={12} />
<PreviewState tag={'Overdue'} color={'red'} value={6} />
<PreviewState tag={'Partially Paid'} color={'cyan'} value={8} />
<PreviewState tag={'Paid'} color={'green'} value={55} />
</div>
</Col>
<Col
className="gutter-row"
xs={{ span: 24 }}
sm={{ span: 24 }}
md={{ span: 8 }}
lg={{ span: 8 }}
>
{' '}
<div className="pad15">
<h3
style={{
color: '#22075e',
marginBottom: 15,
}}
>
Offer Preview
</h3>
<PreviewState tag={'Draft'} color={'grey'} value={3} />
<PreviewState tag={'Pending'} color={'bleu'} value={5} />
<PreviewState tag={'Not Paid'} color={'orange'} value={12} />
<PreviewState tag={'Overdue'} color={'red'} value={6} />
<PreviewState tag={'Partially Paid'} color={'cyan'} value={8} />
<PreviewState tag={'Paid'} color={'green'} value={55} />
</div>
</Col>
</Row>
</div>
</Col>
<Col
className="gutter-row"
xs={{ span: 0 }}
sm={{ span: 0 }}
md={{ span: 0 }}
lg={{ span: 6 }}
>
<div className="whiteBox shadow" style={{ height: '380px' }}>
<div
className="pad20"
style={{
textAlign: 'center',
justifyContent: 'center',
}}
>
<h3 style={{ color: '#22075e', marginBottom: 30 }}>Customer Preview</h3>
<Progress type="dashboard" percent={25} width={148} />
<p>New Customer this Month</p>
<Divider />
<Statistic
title="Active Customer"
value={11.28}
precision={2}
valueStyle={{ color: '#3f8600' }}
prefix={<ArrowUpOutlined />}
suffix="%"
/>
</div>
</div>
</Col>
</Row>
<div className="space30"></div>
<Row gutter={[24, 24]}>
<Col
className="gutter-row"
xs={{ span: 24 }}
sm={{ span: 24 }}
md={{ span: 12 }}
lg={{ span: 12 }}
>
<div className="whiteBox shadow">
<div className="pad20">
<h3 style={{ color: '#22075e', marginBottom: 5 }}>Recent Invoices</h3>
</div>
<RecentTable entity={'invoice'} dataTableColumns={dataTableColumns} />
</div>
</Col>
<Col
className="gutter-row"
xs={{ span: 24 }}
sm={{ span: 24 }}
md={{ span: 12 }}
lg={{ span: 12 }}
>
<div className="whiteBox shadow">
<div className="pad20">
<h3 style={{ color: '#22075e', marginBottom: 5 }}>Recent Quotes</h3>
</div>
<RecentTable entity={'quote'} dataTableColumns={dataTableColumns} />
</div>
</Col>
</Row>
</DashboardLayout>
);
}
Example #6
| Source File: Dashboard.jsx From starter-antd-admin-crud-auth-mern with MIT License | 4 votes |
|
export default function Dashboard() {
const leadColumns = [
{
title: "Client",
dataIndex: "client",
},
{
title: "phone",
dataIndex: "phone",
},
{
title: "Status",
dataIndex: "status",
render: (status) => {
let color = status === "pending" ? "volcano" : "green";
return <Tag color={color}>{status.toUpperCase()}</Tag>;
},
},
];
const productColumns = [
{
title: "Product Name",
dataIndex: "productName",
},
{
title: "Price",
dataIndex: "price",
},
{
title: "Status",
dataIndex: "status",
render: (status) => {
let color = status === "available" ? "green" : "volcano";
return <Tag color={color}>{status.toUpperCase()}</Tag>;
},
},
];
return (
<DashboardLayout>
<Row gutter={[24, 24]}>
<TopCard
title={"Leads"}
tagColor={"cyan"}
prefix={"This month"}
tagContent={"34 000 $"}
/>
<TopCard
title={"Order"}
tagColor={"purple"}
prefix={"This month"}
tagContent={"34 000 $"}
/>
<TopCard
title={"Payment"}
tagColor={"green"}
prefix={"This month"}
tagContent={"34 000 $"}
/>
<TopCard
title={"Due Balance"}
tagColor={"red"}
prefix={"Not Paid"}
tagContent={"34 000 $"}
/>
</Row>
<div className="space30"></div>
<Row gutter={[24, 24]}>
<Col className="gutter-row" span={18}>
<div className="whiteBox shadow" style={{ height: "380px" }}>
<Row className="pad10" gutter={[0, 0]}>
<Col className="gutter-row" span={8}>
<div className="pad15">
<h3 style={{ color: "#22075e", marginBottom: 15 }}>
Lead Preview
</h3>
<PreviewState tag={"Draft"} color={"grey"} value={3} />
<PreviewState tag={"Pending"} color={"bleu"} value={5} />
<PreviewState tag={"Not Paid"} color={"orange"} value={12} />
<PreviewState tag={"Overdue"} color={"red"} value={6} />
<PreviewState
tag={"Partially Paid"}
color={"cyan"}
value={8}
/>
<PreviewState tag={"Paid"} color={"green"} value={55} />
</div>
</Col>
<Col className="gutter-row" span={8}>
{" "}
<div className="pad15">
<h3 style={{ color: "#22075e", marginBottom: 15 }}>
Quote Preview
</h3>
<PreviewState tag={"Draft"} color={"grey"} value={3} />
<PreviewState tag={"Pending"} color={"bleu"} value={5} />
<PreviewState tag={"Not Paid"} color={"orange"} value={12} />
<PreviewState tag={"Overdue"} color={"red"} value={6} />
<PreviewState
tag={"Partially Paid"}
color={"cyan"}
value={8}
/>
<PreviewState tag={"Paid"} color={"green"} value={55} />
</div>
</Col>
<Col className="gutter-row" span={8}>
{" "}
<div className="pad15">
<h3 style={{ color: "#22075e", marginBottom: 15 }}>
Order Preview
</h3>
<PreviewState tag={"Draft"} color={"grey"} value={3} />
<PreviewState tag={"Pending"} color={"bleu"} value={5} />
<PreviewState tag={"Not Paid"} color={"orange"} value={12} />
<PreviewState tag={"Overdue"} color={"red"} value={6} />
<PreviewState
tag={"Partially Paid"}
color={"cyan"}
value={8}
/>
<PreviewState tag={"Paid"} color={"green"} value={55} />
</div>
</Col>
</Row>
</div>
</Col>
<Col className="gutter-row" span={6}>
<div className="whiteBox shadow" style={{ height: "380px" }}>
<div
className="pad20"
style={{ textAlign: "center", justifyContent: "center" }}
>
<h3 style={{ color: "#22075e", marginBottom: 30 }}>
Customer Preview
</h3>
<Progress type="dashboard" percent={25} width={148} />
<p>New Customer this Month</p>
<Divider />
<Statistic
title="Active Customer"
value={11.28}
precision={2}
valueStyle={{ color: "#3f8600" }}
prefix={<ArrowUpOutlined />}
suffix="%"
/>
</div>
</div>
</Col>
</Row>
<div className="space30"></div>
<Row gutter={[24, 24]}>
<Col className="gutter-row" span={12}>
<div className="whiteBox shadow">
<div className="pad20">
<h3 style={{ color: "#22075e", marginBottom: 5 }}>
Recent Leads
</h3>
</div>
<RecentTable entity={"lead"} dataTableColumns={leadColumns} />
</div>
</Col>
<Col className="gutter-row" span={12}>
<div className="whiteBox shadow">
<div className="pad20">
<h3 style={{ color: "#22075e", marginBottom: 5 }}>
Recent Products
</h3>
</div>
<RecentTable entity={"product"} dataTableColumns={productColumns} />
</div>
</Col>
</Row>
</DashboardLayout>
);
}
Example #7
| Source File: MainWindow.js From ikago-web with MIT License | 4 votes |
|
render() {
return (
<Layout>
<Header className="header">
<a className="header-a" href="https://github.com/zhxie/ikago">
<img className="header-icon" src={logo} alt="icon" />
</a>
<p className="header-title">{this.state.name}</p>
<p className="header-subtitle">{this.state.version}</p>
</Header>
<Content className="content">
<Row gutter={16}>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card className="content-card" hoverable>
<Statistic
prefix={(() => {
if (this.state.active) {
return <CheckOutlined />;
} else if (this.state.inactive) {
return <WarningOutlined />;
} else {
return <LoadingOutlined />;
}
})()}
title="Status"
value={(() => {
if (this.state.active) {
return 'Active';
} else if (this.state.inactive) {
return 'Inactive';
} else {
return 'Connecting';
}
})()}
valueStyle={{
color: (() => {
if (!this.state.inactive) {
return '#000';
} else {
return '#cf1322';
}
})()
}}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card className="content-card" hoverable>
<Statistic
precision={2}
prefix={<ClockCircleOutlined />}
title="Operation Time"
value={this.convertTime(this.state.time)}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card
hoverable
onClick={() => {
this.setState({
showTotal: !this.state.showTotal
});
}}
>
<Statistic
precision={1}
prefix={<ArrowUpOutlined />}
suffix={(() => {
if (this.state.showTotal) {
return this.mapSizeUnit(this.state.outboundSizeTotal);
} else {
return this.mapSizeUnit(this.state.outboundSize) + '/s';
}
})()}
title="Outbound"
value={(() => {
if (this.state.showTotal) {
return this.convertSize(this.state.outboundSizeTotal);
} else {
return this.convertSize(this.state.outboundSize);
}
})()}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card
hoverable
onClick={() => {
this.setState({
showTotal: !this.state.showTotal
});
}}
>
<Statistic
precision={1}
prefix={<ArrowDownOutlined />}
suffix={(() => {
if (this.state.showTotal) {
return this.mapSizeUnit(this.state.inboundSizeTotal);
} else {
return this.mapSizeUnit(this.state.inboundSize) + '/s';
}
})()}
title="Inbound"
value={(() => {
if (this.state.showTotal) {
return this.convertSize(this.state.inboundSizeTotal);
} else {
return this.convertSize(this.state.inboundSize);
}
})()}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card className="content-card" hoverable>
<Statistic
prefix={<HourglassOutlined />}
suffix={this.state.ping < 0 ? '' : 'ms'}
title="Delay"
value={(() => {
if (this.state.ping === -1) {
return 'N/A';
} else if (this.state.ping === -2) {
return 'Timeout';
} else {
return this.state.ping;
}
})()}
valueStyle={{
color: (() => {
if (this.state.ping === -2) {
return '#cf1322';
} else if (this.state.ping >= 100) {
return '#faad14';
} else {
return '#000';
}
})()
}}
/>
</Card>
</Col>
<Col className="content-col" xs={24} sm={12} md={12} lg={6} xl={4}>
<Card
hoverable
onClick={() => {
this.setState({
configure: true
});
}}
>
<Statistic prefix={<SettingOutlined />} title="Configure" value={this.convertPath(this.state.path)} />
</Card>
<ConfigurationForm
visible={this.state.configure}
onOk={(values) => {
localStorage.setItem('path', values.path);
localStorage.setItem('showTotal', values.showTotal ? 'true' : 'false');
this.setState({
configure: false,
path: values.path,
showTotal: values.showTotal,
active: this.state.path !== values.path ? false : this.state.active,
inactive: this.state.path !== values.path ? false : this.state.inactive
});
}}
onCancel={() => {
this.setState({
configure: false
});
}}
initialValues={{ path: this.state.path, showTotal: this.state.showTotal }}
/>
</Col>
</Row>
<Row gutter={16}>
<Col className="content-col-table" sm={24} md={24} lg={12}>
<Table dataSource={this.mapNodes(this.state.local)} pagination={false} size="middle">
<Column title="Source" key="source" align="left" render={this.showNode} />
<Column title="Outbound" key="outboundSize" align="center" render={this.showOutbound} width={200} />
<Column title="Inbound" key="inboundSize" align="center" render={this.showInbound} width={200} />
</Table>
</Col>
<Col className="content-col-table" sm={24} md={24} lg={12}>
<Table dataSource={this.mapNodes(this.state.remote)} pagination={false} size="middle">
<Column title="Destination" key="source" align="left" render={this.showNode} />
<Column title="Outbound" key="outboundSize" align="center" render={this.showOutbound} width={200} />
<Column title="Inbound" key="inboundSize" align="center" render={this.showInbound} width={200} />
</Table>
</Col>
</Row>
</Content>
</Layout>
);
}
