全球

全球部分包含:

• 布局 - 网格、 区域、 间距、 布局
• 类型 - 所有全局标题, 段落样式
• 丰富的文本 - 类型、 嵌入的视频、 表格、 图像、 列表等样式
• Flex - 弹性对齐和定位的折叠器元件

安装

yarn add @berlitz/globals

道具

标题

段 次 页 次

RichText 道具

弹性道具

使用量

import { P, H1, H2, H3, H4, H5, RichText } from '@berlitz/globals/lib/components/typography'
import { Flex } from '@berlitz/globals/lib/components/Flex'

const MyApp = () => (
  <>
    <H1>Hello World</H1>
    <div>
      <H2 highlight="secondary">H2 Heading</H2>
    </div>
    <P>I am an Example Paragraph</P>
    <RichText>
      <h3>Just a HTML heading</h3>
      <p>Just your average HTML Paragraph</p>
      <iframe src="//youtube.com/embed/9cWxP_HMkCA" />
    </RichText>
    <Flex direction="row" justifyContent="space-around">
      <div>Boxes</div>
      <div>distributed</div>
      <div>in a row</div>
    </Flex>
  </>
)

何时使用此组件

• 标题
• 段 次 页 次
• 丰富文本
• 网格
• 集装箱