Typography

Example
基本
标题
文本
段落
API

文本的基本格式。

何时使用 #

当需要展示标题、段落、列表内容时使用，如文章/博客/日志的文本样式。

代码演示 #

基本 #

最简单的用法。

import ReactDOM from 'react-dom';
import { Typography } from '@alifd/next';
const { H1, H2, Paragraph, Text } = Typography;
ReactDOM.render(
  <Typography>
    <H1>{'Fusion \u7B80\u4ECB'}</H1>
    <Paragraph>
      {
        'Fusion \u662F\u4E00\u5957\u4F01\u4E1A\u7EA7\u4E2D\u540E\u53F0UI\u7684\u89E3\u51B3\u65B9\u6848\uFF0C\u81F4\u529B\u4E8E\u89E3\u51B3\u8BBE\u8BA1\u5E08\u4E0E\u524D\u7AEF\u5728\u4EA7\u54C1\u4F53\u9A8C\u4E00\u81F4\u6027\u3001\u5DE5\u4F5C\u534F\u540C\u3001\u5F00\u53D1\u6548\u7387\u65B9\u9762\u7684\u95EE\u9898\u3002\u901A\u8FC7\u534F\u52A9\u4E1A\u52A1\u7EBF\u6784\u5EFA\u8BBE\u8BA1\u7CFB\u7EDF\uFF0C\u63D0\u4F9B\u7CFB\u7EDF\u5316\u5DE5\u5177\u534F\u52A9\u8BBE\u8BA1\u5E08\u524D\u7AEF\u4F7F\u7528\u8BBE\u8BA1\u7CFB\u7EDF\uFF0C\u4E0B\u6E38\u63D0\u4F9B\u4E00\u7AD9\u5F0F\u8BBE\u8BA1\u9879\u76EE\u534F\u4F5C\u5E73\u53F0\uFF1B\u6253\u901A\u4E92\u8054\u7F51\u4EA7\u54C1\u4ECE\u8BBE\u8BA1\u5230\u5F00\u53D1\u7684\u5DE5\u4F5C\u6D41\u3002'
      }
    </Paragraph>
    <Paragraph>
      {
        'Fusion Design \u4EA7\u54C1\u521B\u5EFA\u4E8E2015\u5E74\u5E95\uFF0C\u963F\u91CC\u5DF4\u5DF4\u96C6\u56E2\u4E2D\u53F0\u6218\u7565\u80CC\u666F\u4E0B\uFF0C\u7531\u56FD\u9645UED\uFF08\u73B0\u56FD\u9645\u7528\u6237\u4F53\u9A8C\u4E8B\u4E1A\u90E8\uFF09\u4E0EB2B\u6280\u672F\u90E8\u6210\u7ACB\u4E2D\u53F0DPL\u9879\u76EE\u3002\u4ECE\u56FD\u9645UED\uFF0C\u5929\u732B\uFF0C\u5546\u5BB6\u7B49\u5404\u7C7B\u4E1A\u52A1\u5F62\u6001\u4E2D\u62BD\u8C61\u89E3\u6784\uFF0C\u901A\u8FC7\u4E00\u5957\u8BBE\u8BA1\u7CFB\u7EDF\u534F\u8BAE\u63D0\u5347'
      }
      <Text mark>{'\u8BBE\u8BA1\u4E0E\u5F00\u53D1\u6548\u7387'}</Text>
      {
        '\uFF0C\u4EE5\u7EDF\u4E00\u7684\u7269\u6599\u5206\u53D1\u5DE5\u5177\u63D0\u5347\u56E2\u961F\u534F\u540C\u80FD\u529B\uFF0C\u501F\u52A9\u7075\u6D3B\u7684\u5728\u7EBF\u6837\u5F0F\u914D\u7F6E\u652F\u6491\u4E1A\u52A1\u7684\u8BBE\u8BA1\u521B\u65B0\u3002'
      }
    </Paragraph>
    <H2>{'Fusion \u7684\u80FD\u529B'}</H2>
    <Paragraph>
      {
        '\u6211\u4EEC\u63D0\u4F9B\u5B8C\u5584\u7684\u8BBE\u8BA1\u539F\u5219\u3001\u6700\u4F73\u5B9E\u8DF5\u548C\u8BBE\u8BA1\u8D44\u6E90\u6587\u4EF6\uFF08'
      }
      <Text code>Sketch</Text>
      {' \u548C'} <Text code>Axure</Text>
      {
        '\uFF09\uFF0C\u6765\u5E2E\u52A9\u4E1A\u52A1\u5FEB\u901F\u8BBE\u8BA1\u51FA\u9AD8\u8D28\u91CF\u7684\u4EA7\u54C1\u539F\u578B\u3002'
      }
    </Paragraph>
    <Paragraph component="div">
      <ul>
        <li>
          {
            '\u901A\u8FC7\u6784\u5EFA\u4E00\u5957\u6807\u51C6\u5316\u4E2D\u540E\u53F0\u4F53\u9A8C\u8BBE\u8BA1\u539F\u5219\uFF0C\u63D0\u5347\u4E2D\u540E\u53F0\u4EA7\u54C1\u4F53\u9A8C\u4E00\u81F4\u6027\u95EE\u9898\u3002'
          }
        </li>
        <li>
          {
            '\u901A\u8FC7Fusion\u5E73\u53F0\u7684\u4E3B\u9898\u914D\u7F6E\u80FD\u529B\uFF0C\u7EBF\u4E0A\u4F18\u5316\u54C1\u724C\u6837\u5F0F\u5E76\u540C\u6B65\u7269\u6599\u7ED9\u8BBE\u8BA1\u5E08\u4E0E\u5F00\u53D1\u4F7F\u7528\uFF0C\u505A\u5230\u54C1\u724C\u6837\u5F0F\u8FED\u4EE30\u6210\u672C\u3002\u8282\u7701\u4E86\u5927\u91CF\u7684\u8BBE\u8BA1\u5E08\u548C\u5F00\u53D1\u5DE5\u4F5C\u91CF\u3002'
          }
        </li>
        <li>
          {'\u8BBE\u8BA1\u53EF\u76F4\u63A5\u5728'}
          <Text code>sketch</Text>
          {'\uFF08\u901A\u8FC7\u63D2\u4EF6'}
          <Text code>FusionCool</Text>
          {
            '\uFF09\u4F7F\u7528\u914D\u597D\u7684\u7EC4\u4EF6\u753B\u8BBE\u8BA1\u7A3F\uFF1B\u5F00\u53D1\u53EF\u5728\u672C\u5730\u5DE5\u7A0B\u91CC\u9762\u4F7F\u7528\u914D\u597D\u7684\u4E3B\u9898\u5F00\u53D1\u9879\u76EE\uFF0C\u4E0D\u9700\u8981\u5173\u5FC3\u7EC4\u4EF6\u6837\u5F0F\uFF08\u672A\u6765\u751A\u81F3\u9875\u9762\u6837\u5F0F\uFF09\uFF1B\u4ECE\u800C\u6253\u7834\u534F\u4F5C\u58C1\u5792\uFF0C\u8BA9\u5408\u4F5C\u66F4\u52A0\u987A\u7545\u3002'
          }
        </li>
        <li>
          {'\u901A\u8FC7 '}
          <Text code>FusionCool</Text>{' '}
          {
            '\u53EF\u4EE5\u76F4\u63A5\u65B9\u4FBF\u7684\u6C89\u6DC0\u6A21\u5757\u6A21\u677F\uFF1B\u901A\u8FC7\u811A\u624B\u67B6\u5DE5\u5177\u53EF\u4EE5\u65B9\u4FBF\u7684\u6C89\u6DC0\u4E1A\u52A1\u7EC4\u4EF6\u3001\u4EE3\u7801\u7AEF\uFF1B \u8BA9\u9879\u76EE\u66F4\u5FEB\u843D\u5730\u3002'
          }
        </li>
      </ul>
    </Paragraph>
  </Typography>,
  mountNode
);

标题 #

展示不同级别的标题。

文本 #

内置不同样式的文本。

段落 #

一段文字

API #

Typography #

继承 Typography.Text API

参数	说明	类型	默认值	是否必填
component	设置标签类型	string \| React.JSX.IntrinsicElements	article

Typography.Title #

分为 H1, H2, H3, H4, H5, H6 不同的组件，表示不同层级，继承 Typography.Text API

Typography.Paragraph #

继承 Typography.Text 的 API

参数	说明	类型	默认值	是否必填
component	设置标签类型	string \| React.JSX.IntrinsicElements	p

Typography.Text #

参数	说明	类型	默认值
delete	添加删除线样式	boolean	false
mark	添加标记样式	boolean	false
underline	添加下划线样式	boolean	false
strong	是否加粗	boolean	false
code	添加代码样式	boolean	false
component	设置标签类型	string \| React.JSX.IntrinsicElements	span
rtl	是否以 rtl 模式展示	boolean	false