类型

使用前读取

Entur的官方字体为Nationale,由位于哥本哈根的Playtype Foundry所创建. 该字体受许可证保护,只能用于官方Entur产品. 通过下载此字体, 您确认您为 Entur 所使用, 而该字体将只用于开发 Entur 的官方产品 . 所有其他用途都将被视为违反许可协议和Entur品牌,并可提起法律诉讼.

这个软件包包含样式和回放组件,用于我们所有的打字.

寻找 文档? 吗? 寻找β 文档? 吗?

安装

npm install @entur/typography
# or
yarn add @entur/typography

QQ 快速启动

使用稳定打字法(建议生产)

import { Heading1, Paragraph, Link } from '@entur/typography';
import '@entur/typography/styles';

function MyComponent() {
  return (
    <div>
      <Heading1>My Title</Heading1>
      <Paragraph>My content</Paragraph>
      <Link href="/more">Learn more</Link>
    </div>
  );
}

使用 Beta 图案( 实验特性)

import { Heading, Text, Link } from '@entur/typography/beta';
import '@entur/typography/styles';
import '@entur/typography/beta/styles';

function MyComponent() {
  return (
    <div>
      <Heading as="h1" variant="title-1">
        My Title
      </Heading>
      <Text variant="paragraph">My content</Text>
      <Link href="/more">Learn more</Link>
    </div>
  );
}

* 移徙

有好消息吗! 这个软件包保持了完全后向相容性. 所有现有的进口模式仍然与以前一样有效.

后向兼容性

// ✅ All these still work exactly as before
import { Heading1 } from '@entur/typography/dist/Heading1';
import { Paragraph } from '@entur/typography/dist/Paragraph';
import '@entur/typography/dist/styles.css';

现代进口(建议)

// 🚀 But these are now preferred
import { Heading1, Paragraph } from '@entur/typography';
import '@entur/typography/styles';

移动到新打字机

使用 migrate-typography 与您的 AI 编码代理。 它涵盖旧的部件(Heading1– 说吧 –6, (中文(简体) ), Paragraph ...),β变化和布局β间距尺度.

更新样式

// Replace this
@import '@entur/typography/dist/styles.css';

// With this
@import '@entur/typography/styles';

* 特性

Β 类型

• 语义变体 - 标题、字幕、段落等.
• 大小变体 - 特别大、大、中、小、多
• 重量变量 - 中和大胆
• 默认无边距 - 无论你放在哪里,文本都会被冲走
• 间距 - 说吧 spacing="m" 或者说 spacing={{ top: 's', bottom: 'xl' }},与 gap 内 @entur/layout/beta
• 文本连接器 - 环绕正在运行的文本,以获得标题、段落和列表之间的节奏
• 无障碍 - 内建的ARIA支持和语义HTML

传统类型

• 单个构成部分 - 标题1-6、段落、链接等.
• 简单 API - 易于使用,配置最小
• 后向兼容性 - 现行守则继续有效

许可证

• 源代码根据欧洲联盟公共许可证第1.2版(欧盟PL-1.2)获得许可
• 字体单独许可使用,所有使用均应遵循其许可使用.