@illa-design/typography v1.3.0

Typography

Typography is used to show text information. It has 3 child component: Heading, Text, Paragraph.

Installation

yarn add @illa-design/typography

Import component

import { Typography } from "@illa-design/typography"

API

Typography Basic Properties

Heading Basic Properties

Text Basic Properties

Paragraph Basic Properties

ellipsisConfig

copyableConfig

Example

Basic usage

<Typograph>
  <Heading>I am a title.</Heading>
  <Paragraph>I am a paragraph.</Paragraph>
  <Text>I am text.</Text>
</Typograph>

Text style

<Text>
  ILLA Design 
</Text>
<Text colorScheme="red">
  ILLA Design
</Text>
<Text bold>
  Bold
</Text>
<Text disabled>
  Disabled
</Text>
<Text mark>
  Mark
</Text>
<Text underline>
  Underline
</Text>
<Text delete>
  Line through
</Text>
<Text code>
  Code snippet
</Text>

Paragraph indent

<paragraph indent>
  I took her hand in mine, and we went out of the ruined place; and, as the morning mists had risen long ago when I first left the forge, so, the evening mists were rising now, and in all the broad expanse of tranquil light they showed to me, I saw no shadow of another parting from her.
</paragraph>

Ellipsis text

<paragraph indent ellipsis={new EllipsisBuilder().rows(2).expandable(true).create()}>
  I took her hand in mine, and we went out of the ruined place; and, as the morning mists had risen long ago when I first left the forge, so, the evening mists were rising now, and in all the broad expanse of tranquil light they showed to me, I saw no shadow of another parting from her.
</paragraph>

Copyable text

<Text copyable>
  This is a copyable text.
</Text>