Typography

When To Use

• When you need to display a title or paragraph contents in Articles/Blogs/Notes.
• When you need copyable/editable/ellipsis texts.

Examples

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/title.tsx">Title Component</code> <code src="./demo/paragraph-debug.tsx" debug>Title and Paragraph</code> <code src="./demo/text.tsx">Text and Link Component</code> <code src="./demo/editable.tsx">Editable</code> <code src="./demo/copyable.tsx">Copyable</code> <code src="./demo/ellipsis.tsx">Ellipsis</code> <code src="./demo/ellipsis-controlled.tsx" version="5.16.0">Controlled ellipsis expand/collapse</code> <code src="./demo/ellipsis-middle.tsx">Ellipsis from middle</code> <code src="./demo/ellipsis-debug.tsx" debug>Ellipsis Debug</code> <code src="./demo/suffix.tsx">suffix</code> <code src="./demo/componentToken-debug.tsx" debug>Component Token</code> <code src="./demo/link-danger-debug.tsx" debug>Link danger Debug</code>

API

Common props ref：Common props

Typography.Text

Typography.Title

Typography.Paragraph

copyable

{
  text: string | (() => string | Promise<string>),
  onCopy: function(event),
  icon: ReactNode,
  tooltips: false | [ReactNode, ReactNode],
  format: 'text/plain' | 'text/html',
  tabIndex: number,
}

editable

{
  icon: ReactNode,
  tooltip: ReactNode,
  editing: boolean,
  maxLength: number,
  autoSize: boolean | { minRows: number, maxRows: number },
  text: string,
  onChange: function(string),
  onCancel: function,
  onStart: function,
  onEnd: function,
  triggerType: ('icon' | 'text')[],
  enterIcon: ReactNode,
  tabIndex: number,
}

ellipsis

interface EllipsisConfig {
  rows: number;
  /** `collapsible` added in `5.16.0` */
  expandable: boolean | 'collapsible';
  suffix: string;
  /** render function added in `5.16.0` */
  symbol: ReactNode | ((expanded: boolean) => ReactNode);
  tooltip: ReactNode | TooltipProps;
  /** added in `5.16.0` */
  defaultExpanded: boolean;
  /** added in `5.16.0` */
  expanded: boolean;
  /** `info` added in `5.16.0` */
  onExpand: (event: MouseEvent, info: { expanded: boolean }) => void;
  onEllipsis: (ellipsis: boolean) => void;
}

Design Token

<ComponentTokenTable component="Typography"></ComponentTokenTable>