{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/basic/typography","result":{"data":{"current":{"frontmatter":{"title":"Typography","order":24,"brief":"The basic format of text, images, paragraphs, and numeric.","icon":"doc-typography"},"fields":{"type":"basic"},"tableOfContents":{"items":[{"url":"#when-to-use","title":"When to Use"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#title","title":"Title"},{"url":"#text","title":"Text"},{"url":"#paragraph","title":"Paragraph"},{"url":"#numeral","title":"Numeral"},{"url":"#size","title":"Size"},{"url":"#copyable-text","title":"Copyable text"},{"url":"#ellipsis","title":"Ellipsis"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#typographytext","title":"Typography.Text"},{"url":"#typographytitle","title":"Typography.Title"},{"url":"#typographyparagraph","title":"Typography.Paragraph"},{"url":"#typographynumeral","title":"Typography.Numeral"},{"url":"#ellipsis-config","title":"Ellipsis Config"},{"url":"#copyable-config","title":"Copyable Config"}]},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"},{"url":"#faq","title":"FAQ"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"en-US\",\n \"order\": 24,\n \"category\": \"Basic\",\n \"title\": \"Typography\",\n \"subTitle\": \"Typography\",\n \"icon\": \"doc-typography\",\n \"brief\": \"The basic format of text, images, paragraphs, and numeric.\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar Notice = makeShortcode(\"Notice\");\nvar ApiType = makeShortcode(\"ApiType\");\nvar PureA = makeShortcode(\"PureA\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"When to Use\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"To display the text content of articles, blogs, logs, etc.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"To take basic operations such as copying and omitting text.\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { Typography } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Title\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"heading\"), \" to set different levels of headint title.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const { Title } = Typography;\\n return (\\n
\\n h1. Semi Design\\n h2. Semi Design\\n h3. Semi Design\\n h4. Semi Design\\n h5. Semi Design\\n h6. Semi Design\\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Text\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Text component has different built-in styles. You could also pass \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"icon\"), \" to use the build-in styles for icon. Different from passing icon to children, using \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"icon\"), \" for link will have no underline in compliance with Semi Design principles.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const { Text } = Typography;\\n return (\\n
\\n Text\\n
\\n
\\n Secondary\\n
\\n
\\n {'Tertiary v>=1.2.0'}\\n
\\n
\\n {'Quaternary v>=1.2.0'}\\n
\\n
\\n Warning\\n
\\n
\\n {'Success v>=1.7.0'}\\n
\\n
\\n Danger\\n
\\n
\\n Disabled\\n
\\n
\\n Default Mark\\n
\\n
\\n Example Code\\n
\\n
\\n Underline\\n
\\n
\\n Deleted\\n
\\n
\\n Strong\\n
\\n );\\n}\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"You could pass object to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"link\"), \", which will be mounted on \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"\"), \".\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Typography } from '@douyinfe/semi-ui';\\nimport { IconLink } from '@douyinfe/semi-icons';\\n\\nfunction Demo() {\\n const { Text } = Typography;\\n return (\\n
\\n Link\\n
\\n
\\n Open Website\\n
\\n
\\n } underline>Link\\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Paragraph\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Paragraph component has two spacings. You could set\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"spacing='extended'\"), \" for a looser spacing.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const { Paragraph, Title } = Typography;\\n return (\\n
\\n Default Spacing\\n \\n {`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.`}\\n \\n
\\n Extended Spacing\\n \\n {`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.`}\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Numeral\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Based on Text component, added properties: \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"rule\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"precision\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"truncate\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"parser\"), \", to provide the ability to handle Numeral in text separately.\"), mdx(Notice, {\n title: \"Note\",\n mdxType: \"Notice\"\n }, \"The Numeral component recursively traverses Children to detect all numeric text within it for conversion and display, taking care to control the rendering structure hierarchy.\", mdx(\"br\", null), \"For Numeral components with a rule of percentage, the data processing rules have changed. In \", mdx(\"strong\", null, \"v2.22.0-v2.29.0\"), \", for num whose absolute value is greater than or equal to 1, the result is num%; for num whose absolute value is less than or equal to 1, the result is (num*100)%. After the \", mdx(\"strong\", null, \"v2.30.0\"), \" version, it is unified to (num*100)%.\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"precision\"), \" allows you to set the number of decimal places to be retained, used to set precision\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"truncate\"), \" The truncation of the number of decimal places, optionally \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"ceil\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"floor\"), \", \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"round\"), \", aligned with Math.ceil, Math.floor, Math.round\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"rule\"), \" for setting the parsing rules\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"set to \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"percentages\"), \" to automatically convert numbers to percentages\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"set to \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"bytes-decimal\"), \" to automatically convert numbers to bytes, 1 KB is defined as 1000 bytes, (B, KB, MB, GB, TB, PB, EB, ZB, YB)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"Set to \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"bytes-binary\"), \" automatically converts the number to the unit of display corresponding to bytes, 1 KiB is defined as equal to 1024 bytes, (B, KiB, MiB, GiB, TiB, PiB, EiB, ZiB, YiB)\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When set to \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"text\"), \", Automatic rounding of numbers only, based on the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"precision\"), \" and \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"truncate\"), \" attributes\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When set to \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"numbers\"), \", non-numeric characters will be filtered and only numbers will be displayed\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When set to \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"exponential\"), \", numbers are automatically converted to scientific notation\")), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const { Numeral } = Typography;\\n return (\\n
\\n \\n

Liked\\uFF1A1.6111e1 K

\\n \\n\\n

\\n Views:\\n \\n 2.4444e2\\n \\n K\\n

\\n \\n \\n

Favorable rating: 0.915

\\n \\n\\n \\n My odds of winning this game are 0.6 and my odds of losing are 0.4.\\n \\n\\n \\n

Used: 1000

\\n

Available: {1024*1000}

\\n \\n \\n \\n

Used: 1024

\\n

Available: {2e12}

\\n \\n
\\n );\\n}\\n\")), mdx(\"p\", {\n parentName: \"section\"\n }, \"Parsing rules can be customised via \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"parser\"), \".\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const { Numeral } = Typography;\\n\\n function parserTCH(oldVal) {\\n return oldVal.split(' ').map(item =>\\n Number(item) ? `${item.replace(/(\\\\d)(?=(?:\\\\d{3})+(?:\\\\.|$))/g, '$1,')}+` : item\\n ).join(' ');\\n }\\n\\n function Infos() {\\n const data = [\\n { type: 'Stars', min: '7100' },\\n { type: 'Fork', min: '560' },\\n { type: 'Downloads', min: '5000000' },\\n { type: 'Contributors', min: '100' }\\n ];\\n return data.map(item =>\\n

\\n {item.type}\\uFF1A\\n \\n {item.min}\\n \\n

\\n );\\n }\\n\\n return (\\n
\\n \\n Semi Design value our users, any kind of contribution is welcome\\n {Infos}\\n \\n
\\n \\n Trusted by {1e5} users, Go to website >>\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Size\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Paragraph and Text component support two sizes, \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"small\"), \"(12px) and \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"normal\"), \"(14px). By default it is set to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"normal\"), \"\\u3002\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"When the paragraph component or text component are used nested, set the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"size\"), \" property of the inner component to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"inherit\"), \", and the size of the inner component will inherit the size setting of the outer component.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Typography } from '@douyinfe/semi-ui';\\n\\nfunction Demo() {\\n const { Paragraph, Text } = Typography;\\n return (\\n
\\n Normal\\n \\n {`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.`}\\n \\n
\\n Small\\n \\n {`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.`}\\n \\n
\\n This is a Text, size is small\\n This is a Text\\uFF0Csize is inherit, inherit parent's size\\n \\n
\\n );\\n}\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Copyable text\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"Copying of text can be supported by configuring the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"copyable\"), \" property.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"When copyable is configured as true, the default copied content is children itself. Note that at this time, children only support string type.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"When copyable is configured as object, you can specify the content copied to the clipboard through \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"copyable.content\"), \", which is no longer strongly associated with children.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"At this time, children will no longer limit the type, but \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"copyable.content\"), \" still needs to be a string.\", mdx(\"br\", {\n parentName: \"p\"\n }), \"\\n\", \"You can use the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"copyable.render\"), \" attribute to customize the copyable button render.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Typography, TextArea, Button } from '@douyinfe/semi-ui';\\nimport { IconSetting } from '@douyinfe/semi-icons';\\n\\nfunction Demo() {\\n const { Paragraph, Text, Numeral } = Typography;\\n\\n return (\\n
\\n Click the right icon to copy text.\\n Click to copy text.\\n Toast.success({ content: 'Successfully copied.' }) }}>Click the right icon to copy.\\n Timestamp: {new Date().getTime()/1000}s\\n }}>Custom Copy Node\\n {\\n return (\\n \\n );\\n }\\n }}>\\n Custom Copy Render\\n \\n
\\n
\\n Paste here: \\n
\\n