Typography

Composants de texte sémantiques pour les titres, les paragraphes et le formatage de texte.

Importation

import { Typography } from 'asterui'

const { Title, Paragraph, Text, Link } = Typography

Exemples

Titres

Niveaux de titre de h1 à h5.

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading

import { Typography } from 'asterui'

function App() {
  const { Title } = Typography
  
  return (
      <div>
        <Title level={1}>h1. Heading</Title>
        <Title level={2}>h2. Heading</Title>
        <Title level={3}>h3. Heading</Title>
        <Title level={4}>h4. Heading</Title>
        <Title level={5}>h5. Heading</Title>
      </div>
    )
}

export default App

Paragraphe

Contenu textuel au niveau bloc.

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing.

Good typography creates a visual hierarchy, helps users navigate content, and improves the overall user experience. It's an essential element of web design that directly impacts readability and engagement.

import { Typography } from 'asterui'

function App() {
  const { Paragraph } = Typography
  
  return (
      <div>
        <Paragraph>
          Typography is the art and technique of arranging type to make written language legible,
          readable, and appealing when displayed. The arrangement of type involves selecting
          typefaces, point sizes, line lengths, line-spacing, and letter-spacing.
        </Paragraph>
        <Paragraph>
          Good typography creates a visual hierarchy, helps users navigate content, and improves the
          overall user experience. It's an essential element of web design that directly impacts
          readability and engagement.
        </Paragraph>
      </div>
    )
}

export default App

Types de texte

Différents types de texte pour divers contextes.

Default TextSecondary TextSuccess TextWarning TextDanger TextDisabled Text

import { Typography, Space } from 'asterui'

function App() {
  const { Text } = Typography
  
  return (
      <Space direction="vertical">
        <Text>Default Text</Text>
        <Text type="secondary">Secondary Text</Text>
        <Text type="success">Success Text</Text>
        <Text type="warning">Warning Text</Text>
        <Text type="danger">Danger Text</Text>
        <Text disabled>Disabled Text</Text>
      </Space>
    )
}

export default App

Styles de texte

Diverses options de formatage de texte.

Bold TextItalic TextUnderlined Text~~Strikethrough Text~~Code TextMarked TextKeyboard Text

import { Typography, Space } from 'asterui'

function App() {
  const { Text } = Typography
  
  return (
      <Space direction="vertical">
        <Text strong>Bold Text</Text>
        <Text italic>Italic Text</Text>
        <Text underline>Underlined Text</Text>
        <Text delete>Strikethrough Text</Text>
        <Text code>Code Text</Text>
        <Text mark>Marked Text</Text>
        <Text keyboard>Keyboard Text</Text>
      </Space>
    )
}

export default App

Liens

Éléments d'ancrage stylisés.

Basic Link Secondary Link Success Link Warning Link Danger Link

import { Typography, Space } from 'asterui'

function App() {
  const { Link } = Typography
  
  return (
      <Space direction="vertical">
        <Link href="#">Basic Link</Link>
        <Link href="#" type="secondary">
          Secondary Link
        </Link>
        <Link href="#" type="success">
          Success Link
        </Link>
        <Link href="#" type="warning">
          Warning Link
        </Link>
        <Link href="#" type="danger">
          Danger Link
        </Link>
      </Space>
    )
}

export default App

Copiable

Copiez le texte dans le presse-papiers en un clic.

This is copyable text. Click the icon to copy.

Copy different text than displayed.

import { Typography, Space } from 'asterui'

function App() {
  const { Paragraph } = Typography
  
  return (
      <Space direction="vertical">
        <Paragraph copyable>This is copyable text. Click the icon to copy.</Paragraph>
        <Paragraph copyable={{ text: 'Custom copied text!' }}>
          Copy different text than displayed.
        </Paragraph>
      </Space>
    )
}

export default App

Points de suspension

Tronquer le texte long avec des points de suspension.

This is a very long paragraph that will be truncated with an ellipsis when it exceeds the available width. This helps maintain clean layouts when dealing with variable-length content.

This paragraph will show two lines before truncating. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

import { Typography } from 'asterui'

function App() {
  const { Paragraph } = Typography
  
  return (
      <div className="max-w-md">
        <Paragraph ellipsis>
          This is a very long paragraph that will be truncated with an ellipsis when it exceeds the
          available width. This helps maintain clean layouts when dealing with variable-length
          content.
        </Paragraph>
        <Paragraph ellipsis={{ rows: 2 }}>
          This paragraph will show two lines before truncating. Lorem ipsum dolor sit amet,
          consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna
          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
        </Paragraph>
      </div>
    )
}

export default App

Éditable

Texte éditable en ligne.

This text can be edited. Click to modify.

Editable Heading

import { Typography, Space } from 'asterui'

function App() {
  const { Title, Paragraph } = Typography
  
  return (
      <Space direction="vertical">
        <Paragraph editable>This text can be edited. Click to modify.</Paragraph>
        <Title level={4} editable>
          Editable Heading
        </Title>
      </Space>
    )
}

export default App

API

Propriété	Description	Type	Défaut
`children`	Contenu	`React.ReactNode`	-
`className`	Classes CSS supplémentaires	`string`	-
`level`	Niveau de titre (h1-h5) - Title uniquement	`1 \| 2 \| 3 \| 4 \| 5`	`1`
`copyable`	Activer la copie vers le presse-papiers - Title et Paragraph	`boolean \| { text?: string }`	`false`
`ellipsis`	Tronquer avec des points de suspension - Title et Paragraph	`boolean \| { rows?: number }`	`false`
`editable`	Activer l’édition en ligne - Title uniquement	`boolean`	`false`
`type`	Type de texte pour le style - Text et Link	`'secondary' \| 'success' \| 'warning' \| 'danger'`	-
`disabled`	Style désactivé - Text uniquement	`boolean`	`false`
`strong`	Texte en gras - Text uniquement	`boolean`	`false`
`italic`	Texte en italique - Text uniquement	`boolean`	`false`
`underline`	Texte souligné - Text uniquement	`boolean`	`false`
`delete`	Texte barré - Text uniquement	`boolean`	`false`
`code`	Style de code - Text uniquement	`boolean`	`false`
`mark`	Texte surligné - Text uniquement	`boolean`	`false`
`keyboard`	Style clavier - Text uniquement	`boolean`	`false`
`size`	Taille du texte - Text, Paragraph et Link	`'xs' \| 'sm' \| 'base' \| 'lg' \| 'xl' \| '2xl'`	-
`align`	Alignement du texte - Paragraph uniquement	`'left' \| 'center' \| 'right'`	-
`href`	URL du lien - Link uniquement	`string`	`'#'`
`external`	Ouvrir dans un nouvel onglet avec icône externe - Link uniquement	`boolean`	`false`
`data-testid`	ID de test pour les tests	`string`	-

Accessibilité

Utilise des éléments HTML sémantiques (h1-h5, p, span, a)
Hiérarchie de titres appropriée maintenue
Les liens ont des étiquettes accessibles
Les actions de copie et d’édition sont accessibles au clavier