import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Title } = Typography; return ( <div> <Title style={{ margin: '8px 0' }} >h1. Semi Design</Title> <Title heading={2} style={{ margin: '8px 0' }} >h2. Semi Design</Title> <Title heading={3} style={{ margin: '8px 0' }} >h3. Semi Design</Title> <Title heading={4} style={{ margin: '8px 0' }} >h4. Semi Design</Title> <Title heading={5} style={{ margin: '8px 0' }} >h5. Semi Design</Title> <Title heading={6} style={{ margin: '8px 0' }} >h6. Semi Design</Title> </div> ); }

import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Text } = Typography; return ( <div> <Text>Text</Text> <br /> <br /> <Text type="secondary">Secondary</Text> <br /> <br /> <Text type="tertiary">{'Tertiary v>=1.2.0'}</Text> <br /> <br /> <Text type="quaternary">{'Quaternary v>=1.2.0'}</Text> <br /> <br /> <Text type="warning">Warning</Text> <br /> <br /> <Text type="success">{'Success v>=1.7.0'}</Text> <br /> <br /> <Text type="danger">Danger</Text> <br /> <br /> <Text disabled>Disabled</Text> <br /> <br /> <Text mark>Default Mark</Text> <br /> <br /> <Text code>Example Code</Text> <br /> <br /> <Text underline>Underline</Text> <br /> <br /> <Text delete>Deleted</Text> <br /> <br /> <Text strong>Strong</Text> </div> ); }

import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; import { IconLink } from '@douyinfe/semi-icons'; function Demo() { const { Text } = Typography; return ( <div> <Text link={{ href: 'https://semi.design/' }}>Link</Text> <br /> <br /> <Text link={{ href: 'https://semi.design/' }}>Open Website</Text> <br /> <br /> <Text link icon={<IconLink />} underline>Link</Text> </div> ); }

import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Paragraph, Title } = Typography; return ( <div> <Title heading={5}>Default Spacing</Title> <Paragraph> {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`} </Paragraph> <br /> <Title heading={5}>Extended Spacing</Title> <Paragraph spacing="extended"> {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`} </Paragraph> </div> ); }

import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Numeral } = Typography; return ( <div> <Numeral precision={1}> <p>Liked：1.6111e1 K</p> </Numeral> <p> Views: <Numeral rule="numbers" precision={1}> 2.4444e2 </Numeral> K </p> <Numeral rule="percentages" precision={2} style={{ marginBottom: 12 }}> <p>Favorable rating: 0.915</p> </Numeral> <Numeral rule="percentages" style={{ marginBottom: 12 }}> My odds of winning this game are 0.6 and my odds of losing are 0.4. </Numeral> <Numeral rule="bytes-decimal" precision={2} truncate="floor"> <p>Used: 1000</p> <p>Available: {1024*1000}</p> </Numeral> <Numeral rule="bytes-binary" precision={2} truncate="floor"> <p>Used: 1024</p> <p>Available: {2e12}</p> </Numeral> </div> ); }

import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Numeral } = Typography; function parserTCH(oldVal) { return oldVal.split(' ').map(item => Number(item) ? `${item.replace(/(\d)(?=(?:\d{3})+(?:\.|$))/g, '$1,')}+` : item ).join(' '); } function Infos() { const data = [ { type: 'Stars', min: '7100' }, { type: 'Fork', min: '560' }, { type: 'Downloads', min: '5000000' }, { type: 'Contributors', min: '100' } ]; return data.map(item => <p key={item.min}> {item.type}： <b style={{ color: 'rgba(var(--semi-violet-5),1)' }}> {item.min} </b> </p> ); } return ( <div> <Numeral parser={parserTCH} component="div"> Semi Design value our users, any kind of contribution is welcome {Infos} </Numeral> <br /> <Numeral link={{ href: 'https://semi.design', target: '_blank' }} parser={parserTCH}> Trusted by {1e5} users, Go to website &gt;&gt; </Numeral> </div> ); }

import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Paragraph, Text } = Typography; return ( <div> <Text>Normal</Text> <Paragraph spacing="extended"> {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`} </Paragraph> <br /> <Text size='small'>Small</Text> <Paragraph size='small'> {`Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`} </Paragraph> <br /> <Text size="small">This is a Text, size is small <Text link size="inherit">This is a Text，size is inherit, inherit parent's size</Text> </Text> </div> ); }

import React from 'react'; import { Typography, TextArea, Button } from '@douyinfe/semi-ui'; import { IconSetting } from '@douyinfe/semi-icons'; function Demo() { const { Paragraph, Text, Numeral } = Typography; return ( <div> <Paragraph copyable>Click the right icon to copy text.</Paragraph> <Paragraph copyable={{ content: 'Hello, Semi Design!' }}>Click to copy text.</Paragraph> <Paragraph copyable={{ onCopy: () => Toast.success({ content: 'Successfully copied.' }) }}>Click the right icon to copy.</Paragraph> Timestamp: <Numeral truncate="ceil" copyable underline>{new Date().getTime()/1000}s</Numeral> <Paragraph copyable={{ icon: <IconSetting style={{ color: 'var(--semi-color-link)' }}/> }}>Custom Copy Node</Paragraph> <Paragraph copyable={{ content: 'Custom render!', render: (copied, doCopy, config) => { return ( <Button size="small" onClick={doCopy}> <span>{copied ? 'Copy success' : `Click to copy: ${config.content}`}</span> </Button> ); } }}> Custom Copy Render </Paragraph> <br/> <br/> <Text type="secondary">Paste here: </Text> <br/> <TextArea autosize style={{ width: 320, marginTop: 4 }} rows={3} /> </div> ); }

import React from 'react'; import { Typography, Tooltip } from '@douyinfe/semi-ui'; function Demo() { const { Paragraph, Text, Title } = Typography; const customRenderTooltip = useCallback((content, children) => { return <Tooltip content={content} style={{ backgroundColor: 'var(--semi-color-primary)' }}>{children}</Tooltip>; }, []); return ( <div> <Title heading={5} ellipsis={{ showTooltip: true }} style={{ width: 250 }}> This is a supercalifragilisticexpialidocious title </Title> <br /> <Text ellipsis={{ showTooltip: { opts: { content: 'This is a supercalifragilisticexpialidocious tooltip' } } }} style={{ width: 150 }} > Custom tooltip text if you need </Text> <br /> <Text link ellipsis={{ showTooltip: true, pos: 'middle' }} style={{ width: 150 }}> This is a supercalifragilisticexpialidocious link </Text> <br/> <Paragraph ellipsis={{ suffix: '-Macbeth' }} style={{ width: 300 }}> {`With suffix: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`} </Paragraph> <br/> <Paragraph ellipsis={{ rows: 3 }} style={{ width: 300 }}> {`Multi-line ellipsis: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`} </Paragraph> <br/> <Paragraph ellipsis={{ rows: 3, showTooltip: { type: 'popover', opts: { style: { width: 300 } } } }} style={{ width: 300 }}> {`With Popover: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`} </Paragraph> <br/> <Paragraph ellipsis={{ rows: 3, expandable: true, collapsible: true, collapseText: 'Show Less', onExpand: (bool, e) => console.log(bool, e) }} style={{ width: 300 }}> {`Expandable and collapsible: Life's but a walking shadow, a poor player, that struts and frets his hour upon the stage, and then is heard no more; it is a tale told by an idiot, full of sound and fury, signifying nothing.`} </Paragraph> <br /> <Title heading={6} ellipsis={{ showTooltip: { renderTooltip: customRenderTooltip } }} style={{ width: 250 }} > Custom tooltip with a blue background color </Title> </div> ); }

import React from 'react'; import { Typography } from '@douyinfe/semi-ui'; function Demo() { const { Text } = Typography; return ( <div> <Text ellipsis={{ showTooltip: { opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation' } } }} style={{ width: 150 }} > Customized configuration can be made on demand when long text is truncated </Text> <br /> <Text ellipsis={{ showTooltip: { opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation', className: 'components-typography-demo' } } }} style={{ width: 150 }} > Customized configuration can be made on demand when long text is truncated </Text> <br /> <Text ellipsis={{ showTooltip: { opts: { content: 'Insfrastructure|Data-inf|bytegraph.cheetah.user_relation', style: { wordBreak: 'break-all' } } } }} style={{ width: 150 }} > Customized configuration can be made on demand when long text is truncated </Text> </div> ); }