shadcn_ui-typography

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Shadcn UI — Typography

Shadcn UI — 排版

Instructions

使用说明

Use

ShadTheme.of(context).textTheme

for consistent text styles. Default font family is Geist.

使用

ShadTheme.of(context).textTheme

来保持文本样式的一致性。默认字体为Geist。

Text style names

文本样式名称

h1Large, h1, h2, h3, h4 — Headings
p — Body paragraph
blockquote — Quote style
table — Table header/cell text
list — List item text
lead — Lead/subtitle
large — Large body
small — Small/caption
muted — Muted/secondary text

h1Large、h1、h2、h3、h4 — 标题样式
p — 正文段落
blockquote — 引用样式
table — 表格表头/单元格文本
list — 列表项文本
lead — 引导文本/副标题
large — 大尺寸正文
small — 小尺寸文本/说明文字
muted — 弱化/次要文本

Examples

示例

dart

Text(
  'Taxing Laughter: The Joke Tax Chronicles',
  style: ShadTheme.of(context).textTheme.h1,
)

Text(
  'The king, seeing how much happier his subjects were...',
  style: ShadTheme.of(context).textTheme.p,
)

Text(
  'Email address',
  style: ShadTheme.of(context).textTheme.small,
)

Text(
  'Enter your email address.',
  style: ShadTheme.of(context).textTheme.muted,
)

dart

Text(
  'Taxing Laughter: The Joke Tax Chronicles',
  style: ShadTheme.of(context).textTheme.h1,
)

Text(
  'The king, seeing how much happier his subjects were...',
  style: ShadTheme.of(context).textTheme.p,
)

Text(
  'Email address',
  style: ShadTheme.of(context).textTheme.small,
)

Text(
  'Enter your email address.',
  style: ShadTheme.of(context).textTheme.muted,
)

Custom font family

自定义字体

Add font assets (e.g. under
```
/fonts
```
) and register in
```
pubspec.yaml
```
:

yaml

flutter:
  fonts:
    - family: UbuntuMono
      fonts:
        - asset: fonts/UbuntuMono-Regular.ttf
        - asset: fonts/UbuntuMono-Italic.ttf
          style: italic
        - asset: fonts/UbuntuMono-Bold.ttf
          weight: 700

Set
```
ShadTextTheme
```
in
```
ShadThemeData
```
:

dart

return ShadApp(
  theme: ShadThemeData(
    brightness: Brightness.light,
    colorScheme: const ShadZincColorScheme.light(),
    textTheme: ShadTextTheme(
      colorScheme: const ShadZincColorScheme.light(),
      family: 'UbuntuMono',
    ),
  ),
  ...
);

添加字体资源（例如放在
```
/fonts
```
目录下）并在
```
pubspec.yaml
```
中注册：

yaml

flutter:
  fonts:
    - family: UbuntuMono
      fonts:
        - asset: fonts/UbuntuMono-Regular.ttf
        - asset: fonts/UbuntuMono-Italic.ttf
          style: italic
        - asset: fonts/UbuntuMono-Bold.ttf
          weight: 700

在
```
ShadThemeData
```
中设置
```
ShadTextTheme
```
：

dart

return ShadApp(
  theme: ShadThemeData(
    brightness: Brightness.light,
    colorScheme: const ShadZincColorScheme.light(),
    textTheme: ShadTextTheme(
      colorScheme: const ShadZincColorScheme.light(),
      family: 'UbuntuMono',
    ),
  ),
  ...
);

Google Fonts

Install

google_fonts

, then:

dart

theme: ShadThemeData(
  brightness: Brightness.light,
  colorScheme: const ShadZincColorScheme.light(),
  textTheme: ShadTextTheme.fromGoogleFont(GoogleFonts.poppins),
),

安装

google_fonts

包，然后：

dart

theme: ShadThemeData(
  brightness: Brightness.light,
  colorScheme: const ShadZincColorScheme.light(),
  textTheme: ShadTextTheme.fromGoogleFont(GoogleFonts.poppins),
),

Custom text styles

自定义文本样式

Extend

ShadTextTheme

with the

custom

parameter:

dart

textTheme: ShadTextTheme(
  custom: {
    'myCustomStyle': const TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.w400,
      color: Colors.blue,
    ),
  },
),

Access:

ShadTheme.of(context).textTheme.custom['myCustomStyle']!

Or define an extension on

ShadTextTheme

and use

ShadTheme.of(context).textTheme.myCustomStyle

通过

custom

参数扩展

ShadTextTheme

：

dart

textTheme: ShadTextTheme(
  custom: {
    'myCustomStyle': const TextStyle(
      fontSize: 16,
      fontWeight: FontWeight.w400,
      color: Colors.blue,
    ),
  },
),

访问方式：

ShadTheme.of(context).textTheme.custom['myCustomStyle']!

或者为

ShadTextTheme

定义扩展，然后使用

ShadTheme.of(context).textTheme.myCustomStyle

。