@ant-design/icons#LikeOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#LikeOutlined.
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: _config.jsx From documentation with MIT License | 6 votes |
|
concepts = [
{
title: translate({ id: "pages.home.concepts.public.title" }),
Icon: ApiOutlined,
description: translate({ id: "pages.home.concepts.public.description" }),
},
{
title: translate({ id: "pages.home.concepts.isolation.title" }),
Icon: BlockOutlined,
description: translate({ id: "pages.home.concepts.isolation.description" }),
},
{
title: translate({ id: "pages.home.concepts.needs.title" }),
Icon: LikeOutlined,
description: translate({ id: "pages.home.concepts.needs.description" }),
},
]
Example #2
| Source File: unit.jsx From virtuoso-design-system with MIT License | 6 votes |
|
storiesOf('antd/statistic', module).add('unit', () =>
<Row gutter={16}>
<Col span={12}>
<Statistic title="Feedback" value={1128} prefix={<LikeOutlined />} />
</Col>
<Col span={12}>
<Statistic title="Unmerged" value={93} suffix="/ 100" />
</Col>
</Row>,
{ docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Add unit through <code>prefix</code> and <code>suffix</code>.</p></>) } });
Example #3
| 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 #4
| Source File: basic.jsx From virtuoso-design-system with MIT License | 5 votes |
|
Demo = () => {
const [likes, setLikes] = useState(0);
const [dislikes, setDislikes] = useState(0);
const [action, setAction] = useState(null);
const like = () => {
setLikes(1);
setDislikes(0);
setAction('liked');
};
const dislike = () => {
setLikes(0);
setDislikes(1);
setAction('disliked');
};
const actions = [
<Tooltip key="comment-basic-like" title="Like">
<span onClick={like}>
{createElement(action === 'liked' ? LikeFilled : LikeOutlined)}
<span className="comment-action">{likes}</span>
</span>
</Tooltip>,
<Tooltip key="comment-basic-dislike" title="Dislike">
<span onClick={dislike}>
{React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined)}
<span className="comment-action">{dislikes}</span>
</span>
</Tooltip>,
<span key="comment-basic-reply-to">Reply to</span>,
];
return (
<Comment
actions={actions}
author={<a>Han Solo</a>}
avatar={
<Avatar
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
}
content={
<p>
We supply a series of design principles, practical patterns and high quality design
resources (Sketch and Axure), to help people create their product prototypes beautifully
and efficiently.
</p>
}
datetime={
<Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
<span>{moment().fromNow()}</span>
</Tooltip>
}
/>
);
}
Example #5
| 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 #6
| 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 #7
| Source File: index.jsx From prometheusPro with MIT License | 5 votes |
|
Articles = props => {
const { list } = props;
const IconText = ({ icon, text }) => (
<span>
{icon} {text}
</span>
);
return (
<List
size="large"
className={styles.articleList}
rowKey="id"
itemLayout="vertical"
dataSource={list}
renderItem={item => (
<List.Item
key={item.id}
actions={[
<IconText key="star" icon={<StarTwoTone />} text={item.star} />,
<IconText key="like" icon={<LikeOutlined />} text={item.like} />,
<IconText key="message" icon={<MessageFilled />} text={item.message} />,
]}
>
<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>
)}
/>
);
}
Example #8
| Source File: index.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 4 votes |
|
export function Footer() {
const [typingText, setTypingText] = useState('')
const handleEmojiMart = (emoji) => {
setTypingText((prevState) => prevState + emoji.native)
}
const onChange = (e) => {
setTypingText(e.target.value)
}
const handleSendMessage = (e) => {
if (e.keyCode === 13) {
console.log(typingText)
setTypingText('')
}
}
const handleUploadFile = async (file) => {
try {
console.log(file)
message.success('File updated successfully.')
} catch (error) {
message.error(error)
}
}
const handleLike = () => {
setTypingText((prevState) => prevState + '?')
}
return (
<Row
style={{
height: 60,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<Col
style={{
padding: 12,
width: 'calc(100% - 120px)',
}}
>
<Input
placeholder="Type a message..."
value={typingText}
onChange={onChange}
onKeyDown={handleSendMessage}
// onFocus={() => channel?.startTyping()}
// onBlur={() => channel?.endTyping()}
/>
</Col>
<Col
style={{
float: 'right',
display: 'flex',
}}
>
<Upload beforeUpload={handleUploadFile} showUploadList={false}>
<Button
style={{
border: 0,
display: 'inline-block',
cursor: 'pointer',
}}
type="ghost"
icon={<PictureOutlined />}
size="large"
/>
</Upload>
<PickerButton
style={{
position: 'absolute',
bottom: 42,
right: 42,
}}
handleEmojiMart={handleEmojiMart}
/>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<LikeOutlined
style={{
color: PRIMARY_COLOR,
}}
/>
}
size="large"
onClick={handleLike}
/>
</Col>
</Row>
)
}
Example #9
| Source File: index.jsx From react-sendbird-messenger with GNU General Public License v3.0 | 4 votes |
|
export function ChatInput() {
const [typingText, setTypingText] = useState('')
const handleEmojiMart = (emoji) => {
setTypingText((prevState) => prevState + emoji.native)
}
const onChange = (e) => {
setTypingText(e.target.value)
}
const handleSendMessage = (e) => {
if (e.keyCode === 13) {
console.log(typingText)
setTypingText('')
}
}
const handleUploadFile = async (file) => {
try {
console.log(file)
message.success('File updated successfully.')
} catch (error) {
message.error(error)
}
}
const handleLike = () => {
setTypingText((prevState) => prevState + '?')
}
return (
<Fragment>
<Col
style={{
padding: 12,
width: 'calc(100% - 120px)',
}}
>
<Input
placeholder="Type a message..."
value={typingText}
onChange={onChange}
onKeyDown={handleSendMessage}
// onFocus={() => channel?.startTyping()}
// onBlur={() => channel?.endTyping()}
/>
</Col>
<Col
style={{
float: 'right',
display: 'flex',
}}
>
<Upload beforeUpload={handleUploadFile} showUploadList={false}>
<Button
style={{
border: 0,
display: 'inline-block',
cursor: 'pointer',
}}
type="ghost"
icon={<PictureOutlined />}
size="large"
/>
</Upload>
<div>
<PickerButton
style={{
position: 'absolute',
bottom: 42,
right: 42,
}}
handleEmojiMart={handleEmojiMart}
/>
</div>
<Button
style={{ border: 0 }}
type="ghost"
icon={
<LikeOutlined
style={{
color: PRIMARY_COLOR,
}}
/>
}
size="large"
onClick={handleLike}
/>
</Col>
</Fragment>
)
}
Example #10
| Source File: index.js From gobench with Apache License 2.0 | 4 votes |
|
render() {
const { likes, dislikes, action } = this.state
const actions = [
<span key="comment-basic-like">
<Tooltip title="Like">
{action === 'liked' && <LikeFilled onClick={this.like} />}
{action !== 'liked' && <LikeOutlined onClick={this.like} />}
</Tooltip>
<span style={{ paddingLeft: 8, cursor: 'auto' }}>{likes}</span>
</span>,
<span key="comment-basic-dislike">
<Tooltip title="Dislike">
{action === 'disliked' && <LikeFilled onClick={this.dislike} />}
{action !== 'disliked' && <LikeOutlined onClick={this.dislike} />}
</Tooltip>
<span style={{ paddingLeft: 8, cursor: 'auto' }}>{dislikes}</span>
</span>,
<span key="comment-basic-reply-to">Reply to</span>,
]
return (
<div>
<h5 className="mb-3">
<strong>Basic</strong>
</h5>
<div className="mb-5">
<Comment
actions={actions}
author={<a>Han Solo</a>}
avatar={
<Avatar
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
}
content={
<p>
We supply a series of design principles, practical patterns and high quality design
resources (Sketch and Axure), to help people create their product prototypes
beautifully and efficiently.
</p>
}
datetime={
<Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
<span>{moment().fromNow()}</span>
</Tooltip>
}
/>
</div>
<h5 className="mb-3">
<strong>Nested</strong>
</h5>
<div className="mb-5">
<Comment
actions={actions}
author={<a>Han Solo</a>}
avatar={
<Avatar
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
}
content={
<p>
We supply a series of design principles, practical patterns and high quality design
resources (Sketch and Axure), to help people create their product prototypes
beautifully and efficiently.
</p>
}
datetime={
<Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
<span>{moment().fromNow()}</span>
</Tooltip>
}
>
<Comment
actions={actions}
author={<a>Han Solo</a>}
avatar={
<Avatar
src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
alt="Han Solo"
/>
}
content={
<p>
We supply a series of design principles, practical patterns and high quality
design resources (Sketch and Axure), to help people create their product
prototypes beautifully and efficiently.
</p>
}
datetime={
<Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
<span>{moment().fromNow()}</span>
</Tooltip>
}
/>
</Comment>
</div>
</div>
)
}
Example #11
| 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>
</>
);
}
