@ant-design/icons#MessageOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#MessageOutlined.
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: index.js From ant-simple-pro with MIT License | 5 votes |
|
Globalization = memo(function Globalization(props) {
const { t, i18n } = useTranslation();
let listData = [];
for (let i = 0; i < 3; i++) {
listData.push({
index: i,
title: `Ant Simple Pro`,
avatar: <SvgIcon iconClass='logon' fontSize='30px' />,
description: t('description'),
content: t('content')
});
}
const IconText = ({ icon, text }) => (
<Space>
{React.createElement(icon)}
{text}
</Space>
);
const change = (val) => {
const lang = val.target.value;
i18n.changeLanguage(lang);
}
return (
<div className='bgW padding-10px'>
<div>
<Radio.Group defaultValue="en" buttonStyle="solid" onChange={change}>
<Radio.Button value="en">英文</Radio.Button>
<Radio.Button value="zh">中文</Radio.Button>
<Radio.Button value="ja">日文</Radio.Button>
</Radio.Group>
<a href="https://react.i18next.com/" style={{ padding: '0 10px' }} target='_blank'>了解过多react-i18next信息</a>
</div>
<List
itemLayout="vertical"
size="large"
dataSource={listData}
renderItem={item => (
<List.Item
key={item.index}
actions={[
<IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
<IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
<IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
]}
extra={
<img
width={272}
alt="logo"
src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
/>
}
>
<List.Item.Meta
avatar={item.avatar}
title={<a href={item.href}>{item.title}</a>}
description={item.description}
/>
{item.content}
</List.Item>
)}
/>
</div>
)
})
Example #2
| Source File: styles.js From bank-client with MIT License | 5 votes |
|
StyledMessageOutlined = styled(MessageOutlined)`
font-size: 19px;
`
Example #3
| Source File: vertical.jsx From virtuoso-design-system with MIT License | 5 votes |
|
storiesOf('antd/list', module).add('vertical', () =>
<List
itemLayout="vertical"
size="large"
pagination={{
onChange: page => {
console.log(page);
},
pageSize: 3,
}}
dataSource={listData}
footer={
<div>
<b>ant design</b> footer part
</div>
}
renderItem={item => (
<List.Item
key={item.title}
actions={[
<IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
<IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
<IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
]}
extra={
<img
width={272}
alt="logo"
src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
/>
}
>
<List.Item.Meta
avatar={<Avatar src={item.avatar} />}
title={<a href={item.href}>{item.title}</a>}
description={item.description}
/>
{item.content}
</List.Item>
)}
/>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Set the <code>itemLayout</code> property to <code>vertical</code> to create a vertical list.</p></>) } });
Example #4
| Source File: list.jsx From virtuoso-design-system with MIT License | 5 votes |
|
render() {
const { loading } = this.state;
return (
<>
<Switch checked={!loading} onChange={this.onChange} />
<List
itemLayout="vertical"
size="large"
dataSource={listData}
renderItem={item => (
<List.Item
key={item.title}
actions={
!loading && [
<IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
<IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
<IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
]
}
extra={
!loading && (
<img
width={272}
alt="logo"
src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
/>
)
}
>
<Skeleton loading={loading} active avatar>
<List.Item.Meta
avatar={<Avatar src={item.avatar} />}
title={<a href={item.href}>{item.title}</a>}
description={item.description}
/>
{item.content}
</Skeleton>
</List.Item>
)}
/>
</>
);
}
Example #5
| Source File: index.jsx From prometheusPro with MIT License | 4 votes |
|
render() {
const {
form,
listAndsearchAndarticles: { list },
loading,
} = this.props;
const { getFieldDecorator } = form;
const owners = [
{
id: 'wzj',
name: '我自己',
},
{
id: 'wjh',
name: '吴家豪',
},
{
id: 'zxx',
name: '周星星',
},
{
id: 'zly',
name: '赵丽颖',
},
{
id: 'ym',
name: '姚明',
},
];
const IconText = ({ type, text }) => {
switch (type) {
case 'star-o':
return (
<span>
<StarOutlined
style={{
marginRight: 8,
}}
/>
{text}
</span>
);
case 'like-o':
return (
<span>
<LikeOutlined
style={{
marginRight: 8,
}}
/>
{text}
</span>
);
case 'message':
return (
<span>
<MessageOutlined
style={{
marginRight: 8,
}}
/>
{text}
</span>
);
default:
return null;
}
};
const formItemLayout = {
wrapperCol: {
xs: {
span: 24,
},
sm: {
span: 24,
},
md: {
span: 12,
},
},
};
const loadMore = list.length > 0 && (
<div
style={{
textAlign: 'center',
marginTop: 16,
}}
>
<Button
onClick={this.fetchMore}
style={{
paddingLeft: 48,
paddingRight: 48,
}}
>
{loading ? (
<span>
<LoadingOutlined /> 加载中...
</span>
) : (
'加载更多'
)}
</Button>
</div>
);
return (
<>
<Card bordered={false}>
<Form layout="inline">
<StandardFormRow
title="所属类目"
block
style={{
paddingBottom: 11,
}}
>
<FormItem>
{getFieldDecorator('category')(
<TagSelect expandable>
<TagSelect.Option value="cat1">类目一</TagSelect.Option>
<TagSelect.Option value="cat2">类目二</TagSelect.Option>
<TagSelect.Option value="cat3">类目三</TagSelect.Option>
<TagSelect.Option value="cat4">类目四</TagSelect.Option>
<TagSelect.Option value="cat5">类目五</TagSelect.Option>
<TagSelect.Option value="cat6">类目六</TagSelect.Option>
<TagSelect.Option value="cat7">类目七</TagSelect.Option>
<TagSelect.Option value="cat8">类目八</TagSelect.Option>
<TagSelect.Option value="cat9">类目九</TagSelect.Option>
<TagSelect.Option value="cat10">类目十</TagSelect.Option>
<TagSelect.Option value="cat11">类目十一</TagSelect.Option>
<TagSelect.Option value="cat12">类目十二</TagSelect.Option>
</TagSelect>,
)}
</FormItem>
</StandardFormRow>
<StandardFormRow title="owner" grid>
{getFieldDecorator('owner', {
initialValue: ['wjh', 'zxx'],
})(
<Select
mode="multiple"
style={{
maxWidth: 286,
width: '100%',
}}
placeholder="选择 owner"
>
{owners.map(owner => (
<Option key={owner.id} value={owner.id}>
{owner.name}
</Option>
))}
</Select>,
)}
<a className={styles.selfTrigger} onClick={this.setOwner}>
只看自己的
</a>
</StandardFormRow>
<StandardFormRow title="其它选项" grid last>
<Row gutter={16}>
<Col xl={8} lg={10} md={12} sm={24} xs={24}>
<FormItem {...formItemLayout} label="活跃用户">
{getFieldDecorator(
'user',
{},
)(
<Select
placeholder="不限"
style={{
maxWidth: 200,
width: '100%',
}}
>
<Option value="lisa">李三</Option>
</Select>,
)}
</FormItem>
</Col>
<Col xl={8} lg={10} md={12} sm={24} xs={24}>
<FormItem {...formItemLayout} label="好评度">
{getFieldDecorator(
'rate',
{},
)(
<Select
placeholder="不限"
style={{
maxWidth: 200,
width: '100%',
}}
>
<Option value="good">优秀</Option>
</Select>,
)}
</FormItem>
</Col>
</Row>
</StandardFormRow>
</Form>
</Card>
<Card
style={{
marginTop: 24,
}}
bordered={false}
bodyStyle={{
padding: '8px 32px 32px 32px',
}}
>
<List
size="large"
loading={list.length === 0 ? loading : false}
rowKey="id"
itemLayout="vertical"
loadMore={loadMore}
dataSource={list}
renderItem={item => (
<List.Item
key={item.id}
actions={[
<IconText key="star" type="star-o" text={item.star} />,
<IconText key="like" type="like-o" text={item.like} />,
<IconText key="message" type="message" text={item.message} />,
]}
extra={<div className={styles.listItemExtra} />}
>
<List.Item.Meta
title={
<a className={styles.listItemMetaTitle} href={item.href}>
{item.title}
</a>
}
description={
<span>
<Tag>Ant Design</Tag>
<Tag>设计语言</Tag>
<Tag>蚂蚁金服</Tag>
</span>
}
/>
<ArticleListContent data={item} />
</List.Item>
)}
/>
</Card>
</>
);
}
