# @financial-times/o-brand 中文文档

规范地址：https://npmcn.com/package/%40financial-times/o-brand/

版本：4\.2\.4
npm 元数据更新时间：2026-10-06T13:39:35.050Z
中文译文更新时间：2026-11-14T18:24:32.892Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-brand
原文对照：https://npmcn.com/package/%40financial-times/o-brand/?lang=original
项目主页：https://registry.origami.ft.com/components/o-brand
源码仓库：https://github.com/Financial-Times/o-brand

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：40.8 kB，19 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2019-02-12T14:41:53.126Z
- 最新版本发布：2026-02-26T10:55:40.369Z
- 近 30 天下载量：14467（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：23（近 12 个月 1 个）

## 中文简介

用于"品牌"其他"Origami"组件的工具.

## 安装

```sh
npm install @financial-times/o-brand
```

也可以使用：`pnpm add @financial-times/o-brand`、`yarn add @financial-times/o-brand`、`bun add @financial-times/o-brand`

## README

# ○-品牌

用于调整Origami组件以用于不同用途的工具.

-   [术语](https://npmcn.com/package/%40financial-times/o-brand/#readme-terms)
-   [使用量](https://npmcn.com/package/%40financial-times/o-brand/#readme-usage)
-   [萨斯](https://npmcn.com/package/%40financial-times/o-brand/#readme-sass)
-   [移徙](https://npmcn.com/package/%40financial-times/o-brand/#readme-migration)
-   [联系人](https://npmcn.com/package/%40financial-times/o-brand/#readme-contact)
-   [许可证](https://npmcn.com/package/%40financial-times/o-brand/#readme-licence)

## 术语

### 品牌

品牌代表一种要求组件提供独特外观或独特功能的环境. 品牌可能被视为一个主题,但品牌组件可以提供独特的特征以及独特的外观.

品牌包括:

-   核心:面向公共ft.com网站和子公司的FT品牌.
-   内部:适合内部产品、工具和文档的样式.
-   白色标签:基,结构样式仅.

_说明: ["主人"的品牌已经贬值了](https://github.com/Financial-Times/origami/issues/243),取而代之的是"核心"品牌._

### 备选案文

一个变体是给定品牌内某个组件的添加或修改. 备选案文 **必须** 具有可选性,并基于充分功能的组成部分。 例如:按钮组件可能具有"反"变体,"大"变体等. 一个头部组件可能有一个"子导航"变体,一个"粘"变体等.

## 使用量

**非奥利加米项目不得依赖 `o-brand` 直接说.**

非奥里加米项目不得依赖 `o-brand` 直接说 检查出来 [如何将 Origami 组件纳入您的项目](https://origami.ft.com/documentation/components/#including-origami-components-in-your-project) 开始使用 Origami 组件。 如果你愿意学习如何开发一个有品牌的 Origami 组件 [创建 Origami 组件教程](https://origami.ft.com/documentation/tutorials/create-a-new-component-part-1/) 显示如何使用 `o-brand` 用于构建可定制组件.

## 萨斯

内部混合 `o-brand` 帮助配置支持品牌的组件。 没有配置在 `o-brand`它为部件应用自己的品牌支持提供了机制。 消费Origami品牌组件的项目可通过设置品牌来选择一个品牌 `$o-brand` 变量.

以下组合和功能有助于品牌组件.

-   [红宝石](https://npmcn.com/package/%40financial-times/o-brand/#readme-obrandis) - 检查是否正在使用一个品牌.
-   [红外线防御](https://npmcn.com/package/%40financial-times/o-brand/#readme-obranddefine) - 定义品牌配置(变量和被支持的变体).
-   [红外线](https://npmcn.com/package/%40financial-times/o-brand/#readme-obrandget) - 获取品牌变量.
-   [brand 支持软件](https://npmcn.com/package/%40financial-times/o-brand/#readme-obrandsupportsvariant) - 检查品牌是否支持变体.
-   [澳洲海关](https://npmcn.com/package/%40financial-times/o-brand/#readme-obrandcustomize) - 更新一个独特项目的品牌变量.

### 红宝石

此功能会检查当前使用的品牌是否是给定的品牌.

```scss
$o-brand: internal; // Defined in the product using branded Origami components.

$chosen-brand: oBrandIs('internal'); // true
$chosen-brand: oBrandIs('core'); // false
```

### brand获得当前

此函数返回当前品牌, 如果没有设置则返回默认品牌 .

```scss
$o-brand: internal; // Defined in the product using branded Origami components.

$chosen-brand: oBrandGetCurrent('internal'); // internal
```

### 红外线防御

组件各自负责为其支持的每个品牌确定配置. 为了添加新品牌的配置, 请使用混音 `oBrandDefine`。 。 。 .

何处 `$component` 是组件的名称; `$brand` 属于“核心”、“内部”或“白色标签”;以及 `$config` 由变量和辅助变量组成的地图:

-   [`variables`](https://npmcn.com/package/%40financial-times/o-brand/#readme-brand-variables)
-   [`supported variants`](https://npmcn.com/package/%40financial-times/o-brand/#readme-supported-variants)

```scss
@if oBrandIs('core') {
    @include oBrandDefine($component, $brand, $config);
}
```

_说明: `oBrandDefine` 应结合 `oBrandIs`,只定义请求的品牌._

#### 品牌变量

品牌变量为品牌配置组件. 例如,一个构成部分 `o-example` 可能定义变量 `example-background` 来配置其背景颜色.

```scss
$variables: (
    example-background: 'paper'
);
```

嵌入式映射会配置一个变体,这个变体可能为已存在的变量提供新的变量或不同的值. 例如 `inverse` 对变量有不同值的变量 `example-background`数字 :

```scss
$variables: (
    example-background: 'paper',
    'inverse': (
        example-background: 'slate'
    )
);
```

-   变量名称 _必须_ 是一个字符串,应该为字母数字,包括破折号等. `example-background`。 。 。 .
-   变量名称 _不应该_ 完全匹配 css 属性,例如. `example-background` 结束 `background`。 。 。 .
-   一个变体 _必须_ 成为数字字符串例如. `inverse`, (中文(简体) ), `b2b-inverse`。 。 。 .

#### 支持的备选案文

要表示品牌应支持一个变体,请将变体名称添加到 `supports-variants` 列表中选择一个选项.

例如,要配置对"反"和"b2b"变体的支持:

```scss
$supports-variants: (
    'inverse',
    'b2b'
);
```

然后可以使用 [brand 支持软件](https://npmcn.com/package/%40financial-times/o-brand/#readme-obrandsupportsvariant)。 。 。 .

#### 内容 `oBrandDefine` 示例

以下示例定义了 `core` 用于组件的品牌 `o-example`我们定义了四个变量,包括: `example-background`但我们提供不同的 `example-background` 数值 `inverse` 财务报告和审定财务报表 `b2b` 变相. 使用 `supports-variants` 我们明确列出 `core` 品牌支持这两个变体.

```scss
@if oBrandIs('core') {
    @include oBrandDefine('o-example', 'core', (
        'variables': (
            example-background: 'paper',
            example-border-width: 1px,
            example-border-type: solid,
            example-border-type: grey,
            'inverse': (
                example-background: 'slate'
            )
            'b2b': (
                example-background: 'lightblue'
            )
        ),
        'supports-variants': (
            'inverse',
            'b2b'
        )
    ));
}
```

### 红外线

使用 `oBrandGet` 获取一个品牌变量。 首先创建一个私有的, 组件- spectifc 函数来调用 `oBrandGet`,例如,一个组件 `o-example`创建 `_oExampleGet`数字 :

```scss
/// Helper for `o-brand` function.
/// @access private
@function _oExampleGet($variables, $from: null) {
    @return oBrandGet($component: 'o-example', $variables: $variables, $from: $from);
}
```

您的新组件 spectifc 函数 `_oExampleGet` 然后可用于获取变量。 例如,在《公约》的基础上 `oBrandDefine` 示例:

```scss
.o-example {
    background: _oExampleGet($variables: 'example-background'); // background: paper;
}
```

可以要求多个变量:

```scss
.o-example {
    border: _oExampleGet($variables: ('example-border-width', 'example-border-type', 'example-border-color')); // border: 1px solid grey;
}
```

要获取变量用于变量,请使用 `$from` 参数 :

```scss
.o-example--inverse {
    background: _oExampleGet($variables: 'example-background', $from: 'inverse'); // background: slate;
}
```

这个 `$from` 参数还接受自定义变体 :

```scss
$custom-variant: (
    'example-background': 'hotpink',
    'example-border-width', '2px'
);

.o-example--custom {
    background: _oExampleGet($variables: 'example-background', $from: $custom-variant); // background: hotpink;
    border-width: _oExampleGet($variables: 'example-border-width', $from: $custom-variant); // border-width: 2px;
}
```

-   `oBrandGet` 返回时 `null` 如果变量未定义。 Sass去除设置为的 Css 属性 `null`。这是对不同变体有条件输出 css 属性的有用特性.

### brand 支持软件

检查一个品牌是否支持变种调用 `oBrandSupportsVariant`。首先创建用于包接 `oBrandSupportsVariant`,例如,一个组件 `o-example`创建 `_oExampleSupports`数字 :

```scss
/// Helper for `o-brand` function.
/// @access private
@function _oExampleSupports($variant) {
    @return oBrandSupportsVariant($component: 'o-example', $variant: $variant);
}
```

那就调用您的新功能 `_oExampleSupports` 以确定是否为变体输出 CSS。 例如,只输出 `inverse` 如果品牌支持它,则变体:

```scss
@if _oExampleSupports($variant: 'inverse') {
    .o-example--inverse {
        background: _oExampleGet($variables: 'example-background', $from: 'inverse'); // background: slate;
    }
}
```

### 澳洲海关

`oBrandCustomize` 允许修改现有的品牌变量,只要这些变量已经用 `oBrandDefine`。这种自定义是特定组件的,所以品牌组件必须包起来 `oBrandCustomize` 在自己的混合体中 `o-brand` 不得在Origami组件外直接使用.

示例组件(实例):

```scss
/// Create a component-specific mixin to wrap `oBrandCustomize`.
@mixin oExampleCustomize($variables) {
    @include oBrandCustomize('o-example', $variables);
}

// Define the whitelabel brand for the component.
@if oBrandIs('whitelabel') {
    @include oBrandDefine('o-example', 'whitelabel', (
        'variables': (
            example-background: white,
            example-color: black,
        ),
        'supports-variants': ()
    ));
}
```

示例项目:

```scss
$o-brand: 'whitelabel';
@import '@financial-times/o-table';

// Customise the example component.
// Here we change the variable "example-background" from "white" to "lightblue".
// The "example-color" variable has not been customised so remains "black".
@include oExampleCustomize((
    example-background: lightblue
));

// Output the example component CSS.
@include oExample();
```

## 移徙

| 状态 | 主要版本 | 最后一个小版本 | 移徙指南 |
| :-: | :-: | :-: | :-: |
| 活动 | 页:1 | 不详 | [迁移到 v4](https://npmcn.com/package/%40financial-times/o-brand/MIGRATION.md#migrating-from-v3-to-v4) |
| 维护 | 3个 | 3.2 国家 | [迁移到 v3](https://npmcn.com/package/%40financial-times/o-brand/MIGRATION.md#migrating-from-v2-to-v3) |
| 维护 | 2个 | 2.4 国家 | [迁移到 v2](https://npmcn.com/package/%40financial-times/o-brand/MIGRATION.md#migrating-from-v1-to-v2) |
| 已贬值 | 1个 | 1.1 国家 | 不详 |

## 联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-brand/issues)访问 [{\\fn黑体\\fs20\\shad2\\2ah82\\3ah20\\4ah33\\fscx95\\3ch592001\\be1}#毛发折射](https://financialtimes.slack.com/messages/ft-origami/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 .

## 许可证

本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 .

## 常见问题

### @financial-times/o-brand 是什么？

用于"品牌"其他"Origami"组件的工具\.

### 如何安装 @financial-times/o-brand？

在项目目录运行 npm install @financial-times/o-brand，或使用 pnpm add / yarn add / bun add。

### @financial-times/o-brand 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-brand 是否存在。

### @financial-times/o-brand 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @financial-times/o-brand 可以商用吗？

@financial-times/o-brand 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @financial-times/o-brand 的下载量有多少？

根据 npm 官方下载统计，@financial-times/o-brand 在 2026/10/15 – 2026/11/13 这 30 天内被下载 14,467 次，日均约 482 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @financial-times/o-brand 还在维护吗？

最新版本 4\.2\.4 发布于 2026/02/26（8 个月前）；至今共发布 23 个版本，其中过去 12 个月发布了 1 个；首次发布于 2019/02/12。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。