@ant-design/icons#TagsOutlined JavaScript Examples

The following examples show how to use @ant-design/icons#TagsOutlined. 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: FormInput.component.jsx    From todo-hooks with GNU General Public License v3.0 6 votes vote down vote up 
FormInput = ({setForm}) => (
  <Col xs={24} sm={24} md={24} lg={12} xl={12}>
    <Form.Item label="Title" name="title">
      <Input
        prefix={
          <TagsOutlined /> // Icon
        }
        onChange={e => {
          setForm(e.target.value);
        }}
      />
    </Form.Item>
  </Col>
)
Example #2
Source File: MyAsset.js    From next-terminal with GNU Affero General Public License v3.0 4 votes vote down vote up 
render() {
        return (
            <div style={{marginTop: 20}}>
                <Content style={{background: 'white', padding: 24}}>
                    <div>
                        <Row justify="space-around" align="middle" gutter={24}>
                            <Col span={4} key={1}>
                                <Title level={3}>我的资产</Title>
                            </Col>
                            <Col span={20} key={2} style={{textAlign: 'right'}}>
                                <Space>
                                    <Search
                                        ref={this.inputRefOfName}
                                        placeholder="资产名称"
                                        allowClear
                                        onSearch={this.handleSearchByName}
                                        style={{width: 200}}
                                    />

                                    <Select mode="multiple"
                                            allowClear
                                            value={this.state.selectedTags}
                                            placeholder="资产标签" onChange={this.handleTagsChange}
                                            style={{minWidth: 150}}>
                                        {this.state.tags.map(tag => {
                                            if (tag === '-') {
                                                return undefined;
                                            }
                                            return (<Select.Option key={tag}>{tag}</Select.Option>)
                                        })}
                                    </Select>

                                    <Select onChange={this.handleSearchByProtocol}
                                            value={this.state.queryParams.protocol ? this.state.queryParams.protocol : ''}
                                            style={{width: 100}}>
                                        <Select.Option value="">全部协议</Select.Option>
                                        <Select.Option value="rdp">rdp</Select.Option>
                                        <Select.Option value="ssh">ssh</Select.Option>
                                        <Select.Option value="vnc">vnc</Select.Option>
                                        <Select.Option value="telnet">telnet</Select.Option>
                                        <Select.Option value="kubernetes">kubernetes</Select.Option>
                                    </Select>

                                    <Tooltip title='重置查询'>

                                        <Button icon={<UndoOutlined/>} onClick={() => {
                                            this.inputRefOfName.current.setValue('');
                                            this.inputRefOfIp.current.setValue('');
                                            this.setState({
                                                selectedTags: []
                                            })
                                            this.loadTableData({pageIndex: 1, pageSize: 10, protocol: '', tags: ''})
                                        }}>

                                        </Button>
                                    </Tooltip>

                                    <Divider type="vertical"/>

                                    <Tooltip title="刷新列表">
                                        <Button icon={<SyncOutlined/>} onClick={() => {
                                            this.loadTableData(this.state.queryParams)
                                        }}>

                                        </Button>
                                    </Tooltip>

                                </Space>
                            </Col>
                        </Row>
                    </div>

                </Content>

                <div style={{marginTop: 20}}>
                    <List
                        loading={this.state.loading}
                        grid={{gutter: 16, column: 4}}
                        dataSource={this.state.items}
                        pagination={{
                            showSizeChanger: true,
                            current: this.state.queryParams.pageIndex,
                            pageSize: this.state.queryParams.pageSize,
                            onChange: this.handleChangPage,
                            onShowSizeChange: this.handleChangPage,
                            total: this.state.total,
                            showTotal: total => `总计 ${total} 条`,
                            pageSizeOptions: [8, 16, 32, 64, 128]
                        }}
                        renderItem={item => {

                            const id = item['id'];
                            const protocol = item['protocol'];
                            const name = item['name'];
                            const sshMode = item['sshMode'];
                            let url = '';
                            if (protocol === 'ssh' && sshMode === 'native') {
                                url = `#/term?assetId=${id}&assetName=${name}`;
                            } else {
                                url = `#/access?assetId=${id}&assetName=${name}&protocol=${protocol}`;
                            }

                            return (
                                <List.Item>
                                    <a target='_blank' href={url} rel='noreferrer noopener'>
                                        <Card title={item['name']}
                                              hoverable
                                              extra={item['active'] ?
                                                  <Tag icon={<CheckCircleOutlined/>} color="success">
                                                      运行中
                                                  </Tag> : <Tag icon={<ExclamationCircleOutlined/>} color="error">
                                                      不可用
                                                  </Tag>}
                                              actions={[]}>
                                            <Descriptions title="" column={1}>
                                                <Descriptions.Item label={<div><CodeOutlined/> 资产协议</div>}>
                                                    <strong>{item['protocol']}</strong>
                                                </Descriptions.Item>
                                                <Descriptions.Item label={<div><TagsOutlined/> 标签</div>}>
                                                    <strong>{this.renderTags(item['tags'])}</strong>
                                                </Descriptions.Item>
                                            </Descriptions>
                                        </Card>
                                    </a>
                                </List.Item>
                            )
                        }}
                    />
                </div>
            </div>
        );
    }