@ant-design/icons#TagFilled JavaScript Examples

The following examples show how to use @ant-design/icons#TagFilled. 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: Relation.js    From OpenRichpedia with MIT License 4 votes vote down vote up 
getUpload() {
    return (
      <div
        style={{
          height: '450px',
          width: '900px',
          borderRadius: '5px',
          border: '1px solid black',
        }}
      >
        {/* <h2
          style={{
            margin: '10px 20px',
            fontSize: '24px',
            fontWeight: '700',
            color: '#77628c',
          }}
        >
            Caption
        </h2>
        <TextArea
          id="textArea"
          style={{ display: 'block', width: '800px', margin: '10px 20px' }}
          value={this.state.value}
          onChange={this.onChange}
          placeholder="Please enter the caption"
          autoSize={{ minRows: 3, maxRows: 9 }}
        /> */}
        <h2
          style={{
            margin: '10px 20px',
            fontSize: '24px',
            fontWeight: '700',
            color: '#77628c',
          }}
        >
          Image
        </h2>
        {/* <Image
          style={{
            display:"block",
            margin:'10px 20px',
            marginLeft:'20px',
            maxHeight: '300px',
          }}
          width={250}
          src={this.state.src}
          fallback={this.state.fall}
        /> */}
        <div
          style={{
            margin: '10px 20px',
            display: 'block',
            height: '300px',
            width: '800px',
            borderRadius: '5px',
            border: '1px solid #e8e8e8',
            background: '#ddddff',
          }}
          onClick={this.handlePreview}
        >
          <a href="javascript:void(0);">
            <div
              style={{
                justifyContent: 'center',
                display: 'flex',
                alignItems: 'center',
                height: '100%',
                fontSize: '50px',
                color: '#9393ff',
              }}
            >
              <MdPhotoSizeSelectActual />
              <span style={{ marginLeft: '15px' }}>Image</span>
            </div>
          </a>
        </div>
        <div>
          <Button
            type="primary"
            shape="round"
            icon={<CloudUploadOutlined />}
            style={{ margin: '10px 10px 0 20px', display: 'inline-flex' }}
            onClick={this.handleUpdate}
          >
            Upload
          </Button>
          <Button
            type="primary"
            shape="round"
            icon={<TagFilled />}
            style={{ margin: '10px 20px 0 0', display: 'inline-flex' }}
            onClick={this.handleEx}
          >
            Example
          </Button>
          {this.getProcess()}
          <p
            style={{
              marginLeft: '20px',
              fontSize: '5px',
              marginTop: '0px',
              display: 'block',
              color: '#9393ff',
            }}
          >
            {this.state.filename}
          </p>
        </div>

        <input
          type="file"
          id="file"
          style={{ opacity: '0' }}
          onChange={this.handleFile}
        />
      </div>
    );
  }
Example #2
Source File: Uploader.js    From OpenRichpedia with MIT License 4 votes vote down vote up 
getUpload() {
    return (
      <div
        style={{
          height: '580px',
          width: '900px',
          borderRadius: '5px',
          border: '1px solid black',
        }}
      >
        <h2
          style={{
            margin: '10px 20px',
            fontSize: '24px',
            fontWeight: '700',
            color: '#77628c',
          }}
        >
            Caption
        </h2>
        <TextArea
          id="textArea"
          style={{ display: 'block', width: '800px', margin: '10px 20px' }}
          value={this.state.value}
          onChange={this.onChange}
          placeholder="Please enter the caption"
          autoSize={{ minRows: 3, maxRows: 9 }}
        />
        <h2
          style={{
            margin: '10px 20px',
            fontSize: '24px',
            fontWeight: '700',
            color: '#77628c',
          }}
        >
          Image
        </h2>
        {/* <Image
          style={{
            display:"block",
            margin:'10px 20px',
            marginLeft:'20px',
            maxHeight: '300px',
          }}
          width={250}
          src={this.state.src}
          fallback={this.state.fall}
        /> */}
        <div
          style={{
            margin: '10px 20px',
            display: 'block',
            height: '300px',
            width: '800px',
            borderRadius: '5px',
            border: '1px solid #e8e8e8',
            background: '#ddddff',
          }}
          onClick={this.handlePreview}
        >
          <a href="javascript:void(0);">
            <div
              style={{
                justifyContent: 'center',
                display: 'flex',
                alignItems: 'center',
                height: '100%',
                fontSize: '50px',
                color: '#9393ff',
              }}
            >
              <MdPhotoSizeSelectActual />
              <span style={{ marginLeft: '15px' }}>Image</span>
            </div>
          </a>
        </div>
        <div>
          <Button
            type="primary"
            shape="round"
            icon={<CloudUploadOutlined />}
            style={{ margin: '10px 10px 0 20px', display: 'inline-flex' }}
            onClick={this.handleUpdate}
          >
            Upload
          </Button>
          <Button
            type="primary"
            shape="round"
            icon={<TagFilled />}
            style={{ margin: '10px 20px 0 0', display: 'inline-flex' }}
            onClick={this.handleEx}
          >
            Example
          </Button>
          {this.getProcess()}
          <p
            style={{
              marginLeft: '20px',
              fontSize: '5px',
              marginTop: '0px',
              display: 'block',
              color: '#9393ff',
            }}
          >
            {this.state.filename}
          </p>
        </div>

        <input
          type="file"
          id="file"
          style={{ opacity: '0' }}
          onChange={this.handleFile}
        />
      </div>
    );
  }