antd#Typography JavaScript Examples

The following examples show how to use antd#Typography. 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: AccountHistory.js From vpp with MIT License

6 votes

AccountHistory = () => {
  return (
    <div className={styles.accountHistory}>
      <div style={{height: '50px',fontSize: '16px', color: '#333',lineHeight: '50px', paddingLeft: '10px', borderBottom: '1px solid #f0f0f0'}}>
        交易记录
      </div>
      <div style={{height: '290px'}}>
        <List
          bordered
          dataSource={data}
          renderItem={(item,index) => (
            <List.Item>
              <Typography.Text mark>{index%2 ===0 ? '转入': '转出'}</Typography.Text> {item}
            </List.Item>
          )}
        />
      </div>
    </div>
  )
}

Example #2

Source File: index.jsx From egoshop with Apache License 2.0

6 votes

BlockCodeView = ({ url }) => {
  const blockUrl = `npx umi block add ${firstUpperCase(url)} --path=${url}`;
  return (
    <div className={styles['copy-block-view']}>
      <Typography.Paragraph
        copyable={{
          text: blockUrl,
          onCopy: () => onBlockCopy(url),
        }}
        style={{
          display: 'flex',
        }}
      >
        <pre>
          <code className={styles['copy-block-code']}>{blockUrl}</code>
        </pre>
      </Typography.Paragraph>
    </div>
  );
}

Example #3

Source File: Header.js From label-studio-frontend with Apache License 2.0

6 votes

HtxHeader = observer(({ item }) => {
  const size = parseInt(item.size);
  const style = item.style ? Tree.cssConverter(item.style) : { margin: "10px 0" };

  if (!style.fontSize && size > 4) {
    style.fontSize = size === 5 ? "1.2em" : "1.1em";
  }

  return (
    <Typography.Title underline={item.underline} level={size} style={style}>
      {item._value}
    </Typography.Title>
  );
})

Example #4

Source File: NearbySpots.js From saveourfaves-frontend with MIT License

6 votes

render() {
    const Title = Typography;
    return (
      <>
        <Row
          style={{
            textAlign: "center",
            marginTop: "20px",
            marginBottom: "20px"
          }}
        >
          <Title className="section-title" style={{ margin: "auto" }} level={4}>
            Local Gems Nearby
          </Title>
        </Row>
        <SuggestedPlaceCards suggestedPlaces={this.props.suggestedPlaces} />
      </>
    );
  }

Example #5

Source File: Stats.js From placement-portal with MIT License

6 votes

render() {
        const {Title, Number, Color} = this.props;
        return (
             <Col sm={{span: 24}} md={{span: 8}} xl={{span: 8}} xxl={{span: 6}}>
                 <Card
                     style={{background: Color, margin: 10}}
                     actions={[
                         <PieChartOutlined key="statistics" />,
                         <EditOutlined key="details" />
                     ]}
                 >
                     <Row type={'flex'} justify={'center'}>
                         <Col>
                             <Row type={'flex'} justify={'center'}>
                                 <Typography.Title style={{color: '#ffffff', fontSize: '1.8em'}}>
                                     {Title}
                                 </Typography.Title>
                             </Row>
                             <Row type={'flex'} justify={'end'}>
                                 <Typography.Title style={{color: '#ffffff', fontSize: '2em'}}>
                                     {Number}
                                 </Typography.Title>
                             </Row>
                         </Col>
                     </Row>
                 </Card>
             </Col>

        );
    }

Example #6

Source File: index.jsx From vpp with MIT License

5 votes

{ Title } = Typography

Example #7

Source File: UserProfileDashboard.js From video-journal-for-teams-fe with MIT License

5 votes

{ Title } = Typography

Example #8

Source File: index.js From QiskitFlow with Apache License 2.0

5 votes

{ Text, Paragraph } = Typography

Example #9

Source File: Address.jsx From Tai-Shang-NFT-Wallet with MIT License

5 votes

{ Text } = Typography

Example #10

Source File: FooterLayout.js From Smart-Vehicle-Fleet-Manager with MIT License

5 votes

{ Title } = Typography

Example #11

Source File: pinnedDeadline.js From deadviz with MIT License

5 votes

{ Title } = Typography

Example #12

Source File: index.js From online-test-platform with Apache License 2.0

5 votes

{ Title } = Typography

Example #13

Source File: Address.jsx From moonshot with MIT License

5 votes

{ Text } = Typography

Example #14

Source File: App.js From websocket-demo with MIT License

5 votes

{ Title } = Typography

Example #15

Source File: SocialIcons.js From bonded-stablecoin-ui with MIT License

5 votes

{ Text } = Typography

Example #16

Source File: Address.js From ship with MIT License

5 votes

{ Text } = Typography

Example #17

Source File: Address.jsx From quadratic-diplomacy with MIT License

5 votes

{ Text } = Typography

Example #18

Source File: IncomingCallModal.jsx From react-sendbird-messenger with GNU General Public License v3.0

5 votes

{ Title, Text } = Typography

Example #19

Source File: ProgressModal.js From react-portal with MIT License

5 votes

{ Text } = Typography

Example #20

Source File: Broker.js From kafka-map with Apache License 2.0

5 votes

{Title} = Typography