Typography

Maeng Design의 Typography 컴포넌트는 제목, 본문, 목록 등을 포함한 기본 텍스트 작성 및 기사/블로그/노트에 제목 또는 단락 내용을 표시해야 할 때 사용합니다.

Title

타이틀은 1부터 5까지 총 5가지의 level이 존재합니다.

h1. Typography Title

h2. Typography Title

h3. Typography Title

h4. Typography Title

h5. Typography Title

import React from 'react';
import { Typography } from 'maeng-design';

const { Title } = Typography;

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

Paragraph & Text

Paragraph와 Text는 다양한 스타일과 Code 스타일로 텍스트를 작성할 수 있습니다.

mark. Typography Text

code. Typography Text

italic. Typography Textunderline. Typography Text~~delete. Typography Text~~strong. Typography Textellipsis. Typography Text

import React from 'react';
import { Typography } from 'maeng-design';

const { Paragraph, Text } = Typography;

const App = () => (
  <Paragraph>
    <Text mark>mark. Typography Text</Text>
    <Text code={{ language: 'javascript' }}>code. Typography Text</Text>
    <Text italic>italic. Typography Text</Text>
    <Text underline>underline. Typography Text</Text>
    <Text delete>delete. Typography Text</Text>
    <Text strong>strong. Typography Text</Text>
    <Text className="ellipsis" ellipsis>ellipsis. Typography Text</Text>
  </Paragraph>
);

Title API

Title 속성을 설정하여 다양한 타이틀을 생성할 수 있습니다.

Property	Description	Type	default
level	타이틀의 헤더의 단계를 설정할 수 있습니다.	1 2 3 4 5	5
ellipsis	텍스트가 넘칠 때 줄임표 표시할 수 있습니다.	boolean \| { rows: number }	false
mark	중요한 텍스트를 하이라이팅 할 수 있습니다.	boolean	false
italic	기울임꼴 텍스트를 지정할 수 있습니다.	boolean	false
underline	텍스트에 밑줄을 표시할 수 있습니다.	boolean	false
disabled	텍스트를 비활성화 시킬 수 있습니다.	boolean	false
color	텍스트의 색상을 지정할 수 있습니다.	ColorName	gray13
onClick	click 이벤트를 처리하는 핸들러 설정	(event) => void	-

Paragraph API

Paragraph 속성을 설정하여 다양한 단락을 생성할 수 있습니다.

Property	Description	Type	default
ellipsis	텍스트가 넘칠 때 줄임표 표시할 수 있습니다.	boolean \| { rows: number }	false
mark	중요한 텍스트를 하이라이팅 할 수 있습니다.	boolean	false
italic	기울임꼴 텍스트를 지정할 수 있습니다.	boolean	false
underline	텍스트에 밑줄을 표시할 수 있습니다.	boolean	false
delete	텍스트에 제거된 선을 표시할 수 있습니다.	boolean	false
strong	텍스트를 굵게 강조할 수 있습니다.	boolean	false
code	텍스트를 코드 스타일로 나타낼 수 있습니다.	{ language: LanguageName }	-
disabled	텍스트를 비활성화 시킬 수 있습니다.	boolean	false
color	텍스트의 색상을 지정할 수 있습니다.	ColorName	gray13
onClick	click 이벤트를 처리하는 핸들러 설정	(event) => void	-

Text API

Text 속성을 설정하여 다양한 텍스트를 생성할 수 있습니다.

Property	Description	Type	default
ellipsis	텍스트가 넘칠 때 줄임표 표시할 수 있습니다.	boolean \| { rows: number }	false
mark	중요한 텍스트를 하이라이팅 할 수 있습니다.	boolean	false
italic	기울임꼴 텍스트를 지정할 수 있습니다.	boolean	false
underline	텍스트에 밑줄을 표시할 수 있습니다.	boolean	false
delete	텍스트에 제거된 선을 표시할 수 있습니다.	boolean	false
strong	텍스트를 굵게 강조할 수 있습니다.	boolean	false
code	텍스트를 코드 스타일로 나타낼 수 있습니다.	{ language: LanguageName }	-
disabled	텍스트를 비활성화 시킬 수 있습니다.	boolean	false
color	텍스트의 색상을 지정할 수 있습니다.	ColorName	gray13
onClick	click 이벤트를 처리하는 핸들러 설정	(event) => void	-

.css-6ojbmi{background-color:#ffe58f;}Typography