○-品牌

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

• 术语
• 使用量
• 萨斯
• 移徙
• 联系人
• 许可证

术语

品牌

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

品牌包括:

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

说明: "主人"的品牌已经贬值了,取而代之的是"核心"品牌.

备选案文

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

使用量

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

非奥里加米项目不得依赖 o-brand 直接说 检查出来 如何将 Origami 组件纳入您的项目 开始使用 Origami 组件。 如果你愿意学习如何开发一个有品牌的 Origami 组件 创建 Origami 组件教程 显示如何使用 o-brand 用于构建可定制组件.

萨斯

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

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

• 红宝石 - 检查是否正在使用一个品牌.
• 红外线防御 - 定义品牌配置(变量和被支持的变体).
• 红外线 - 获取品牌变量.
• brand 支持软件 - 检查品牌是否支持变体.
• 澳洲海关 - 更新一个独特项目的品牌变量.

红宝石

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

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

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

brand获得当前

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

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

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

红外线防御

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

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

• variables
• supported variants

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

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

品牌变量

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

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

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

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

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

支持的备选案文

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

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

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

然后可以使用 brand 支持软件。 。 。 .

内容 oBrandDefine 示例

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

@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数字 :

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

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

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

可以要求多个变量:

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

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

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

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

$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数字 :

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

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

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

澳洲海关

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

示例组件(实例):

/// 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': ()
    ));
}

示例项目:

$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();

移徙

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 {\fn黑体\fs20\shad2\2ah82\3ah20\4ah33\fscx95\3ch592001\be1}#毛发折射 或电子邮件 折纸支持。 。 。 .

许可证

本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .