o-标签

标签用于内容分类,以强调一个值,或突出一个状态.

• 使用量
• 标签类型
• 标记
• 萨斯
• 移徙指南
• 联系人
• 许可证

使用量

检查出来 如何将 Origami 组件纳入您的项目 开始 o-labels。 。 。 .

标签类型

标签有三种类型:

• 标准标签,默认值.
• 指标标签。 。 。 .
• 时间戳标签。 。 。 .

标准标签

标准标签用于内容分类或强调一个值. 例如,突出核心品牌的商业或溢价内容,或突出内部产品的服务层次。 可创建自定义标签 .

标准标签大小

本表概述了可能的标准标签大小.

标准标签国

本表概述了可能的标准标签状态. 也可以创建自定义状态 .

指标标签

指标标签用于以新的,更新的和活的变体显示故事状态. 指标标签只支持核心品牌,但 内部品牌支持正在考虑中。 。 。 .

标志标签状态

本表概述了可能的指标标签状态:

例如,一个活的标签:

<span class="o-labels-indicator o-labels-indicator--live">
    <span class="o-labels-indicator__status">live</span>
</span>

现场和封闭的标签也支持更突出的徽章变体:

<span
    class="o-labels-indicator o-labels-indicator--live o-labels-indicator--inverse o-labels-indicator--badge"
>
    <span class="o-labels-indicator__status">live</span>
</span>

时间戳标签

时间戳标签用于在文章不是新的,更新的,或者活的时,显示一个指标标签所取代的文章状态. 时间戳标签只支持核心品牌.

标记

标准标签标记

标准标签的最低标记如下:

<span class="o-labels">Label</span>

标准标签以内衬显示,因此,将上述标记列入一款,例如,将使其与文本并列.

有几个大小修饰类,可用于改变标准标签的一般外观:

<span class="o-labels o-labels--big">Big Label</span>
<span class="o-labels o-labels--small">Small Label</span>

标签也可以有多个州之一. 可用的状态取决于您使用的品牌( 白标签品牌组件没有状态) :

以下核心品牌状态用于对内容进行分类,多见于FT.com上:

<span class="o-labels o-labels--content-commercial">Paid Post</span> (used for
paid post and promoted content)
<span class="o-labels o-labels--content-premium">Premium</span> (used for
premium-only content)

以下状态用于表示一个特征处于β状态:

<span class="o-labels o-labels--lifecycle-beta">Beta</span>

以下内部品牌状态用于代表Origami组件的不同支持级别: to

<span class="o-labels o-labels--support-active">Active</span>
<span class="o-labels o-labels--support-maintained">Maintained</span>
<span class="o-labels o-labels--support-experimental">Experimental</span>
<span class="o-labels o-labels--support-deprecated">Deprecated</span>
<span class="o-labels o-labels--support-dead">Dead</span>

以下内部品牌状态用于代表FT的服务级别: 1

<span class="o-labels o-labels--support-platinum">Platinum</span>
<span class="o-labels o-labels--support-gold">Gold</span>
<span class="o-labels o-labels--support-silver">Silver</span>
<span class="o-labels o-labels--support-bronze">Bronze</span>

内部品牌也可能使用以颜色调色板为基础的状态,这些状态没有指定用于灵活性的特定用途:

<span class="o-labels o-labels--oxford">oxford</span>
<span class="o-labels o-labels--teal">teal</span>
<span class="o-labels o-labels--lemon">lemon</span>
<span class="o-labels o-labels--slate">slate</span>
<span class="o-labels o-labels--jade">jade</span>
<span class="o-labels o-labels--crimson">crimson</span>
<span class="o-labels o-labels--mandarin">mandarin</span>

标志标志

指标标签有三个状态之一:

• live
• closed
• updated
• new

使用下列标记进行活标签 :

<span class="o-labels-indicator o-labels-indicator--live">
    <span class="o-labels-indicator__status"> live </span>
</span>

使用修改类 o-labels-indicator--closed 用于关闭标签 :

<span class="o-labels-indicator o-labels-indicator--closed">
    <span class="o-labels-indicator__status"> closed </span>
</span>

对于更新或新建的标签,使用相联的修饰类,例如. o-labels-indicator--updated,并添加一个儿童元素 o-labels-indicator__timestamp 显示新的/更新的时间。 我们建议使用 日期 以格式化时间戳元素.

<span class="o-labels-indicator o-labels-indicator--new">
    <span class="o-labels-indicator__status"> new </span>
    <span class="o-labels-indicator__timestamp">
        <!-- demo `time` element only (the datetime is not 1 hour ago) -->
        <time datetime="2020-07-09T12:52:33+0000" title="July 9 2020 1:52 pm"
            >1 hour ago</time
        >
    </span>
</span>

指标标签还支持一个反向主题,用于黑暗背景. 要使用反向主题,请添加 o-labels-indicator--inverse 班级的标记.

-<span class="o-labels-indicator o-labels-indicator--live">
+<span class="o-labels-indicator o-labels-indicator--live o-labels-indicator--inverse">
    <span class="o-labels-indicator__status">
        live
    </span>
</span>

时间戳标记

要加入时间戳标签,请使用以下标记. 注意时间戳标签还支持一个带有阴暗背景的可选反向变体 o-labels-timestamp--inverse 类 :

<span class="o-labels-timestamp o-labels-timestamp--inverse">
    <!-- demo `time` element only -->
    <time datetime="2016-02-29T12:35:48Z" title="February 29 2016 12:35 pm"
        >February 29 2016</time
    >
</span>

同指标标签一样,我们建议使用 日期 以格式化时间戳元素.

萨斯

输出所有标签样式 oLabels 组合 :

@include oLabels();

或通过选项映射 $opts 参数来输出所需的标签样式。 选项包括:

• 大小: 要输出的标准标签大小列表( 见 可用大小(中文(简体) )
• 状态:要输出的标准标签列表(参见 可用状态页:1
• 指标
  • 状态:要输出的指标标签状态列表(参见 可用状态(中文(简体) )
  • 反转
• 时间戳
  • 反转

@include oLabels(
    $opts: (
        // standard label sizes to output
        // e.g. .o-labels--big
        'sizes': ('big'),
        // standard label states to output
        // e.g. .o-labels--content-commercial
        'states': ('content-commercial', 'content-premium'),
        // indicator label labels to output
        // .o-labels-indicator
        'indicators':
            (
                // indicator label statuses to output
                // .o-labels-indicator--live
                'status': ('live'),
                // whether to output the indicator label inverse style
                // .o-labels-indicator--inverse
                'inverse': true
            ),
        // output the timestamp label label
        // .o-labels-timestamp
        'timestamp':
            (
                // whether to output the timestamp label inverse style
                // .o-labels-timestamp--inverse
                'inverse': true
            ),
    )
);

自定义标准标签状态

使用 oLabelsAddState 混合以添加标准标签的自定义标签状态。 见 oLabelsAddState 萨斯道克 更多细节.

// outputs a class .o-labels--citrus-fruit
@include oLabelsAddState(
    'citrus-fruit',
    (
        background-color: oColorsByName('lemon'),
    )
);

自定义标记

当无法使用时 o-labels CSS类,例如在另一个折射组件中,使用:

• oLabelsContent 以自定义类输出标准标签.
• oLabelsIndicatorContent 输出带有自定义类的指标标签.
• oLabelsTimestampContent 输出带有自定义类的时间戳标签.

如果可以使用的话 o-labels 我们推荐的班级 标签 财务报告和审定财务报表 标签Add国 换句话说 在使用多个标签的地方, 使用这些标签将有助于缩小您的 CSS 捆绑的大小 .

标签关联

oLabelsContent 接受一个 $opts 参数是选项的映射。 用于所有标签设置"碱"到"真"所要求的输出样式. 然后设置标签 "大小" 及其 "状态" .. 这些选项中的任何一种都可以独立输出.

要输出现有的标签 :

.o-example-my-label {
    @include oLabelsContent(
        $opts: (
            'base': true,
            'size': 'big',
            'state': 'tier-gold',
        )
    );
}

输出自定义标签 :

.o-example-my-custom-label {
    @include oLabelsContent(
        $opts: (
            'base': true,
            'size': 'big',
            'state': (
                'background-color': oColorsByName('lemon'),
            ),
        )
    );
}

标签指示器

由于指标标签的样式适用于多个html元素 oLabelsIndicatorContent 接受一个 $opts 参数到每个元素的输出样式.

// equivalent to .o-labels-indicator
.my-indicator-label {
    @include oLabelsIndicatorContent(
        $opts: (
            'block': true,
        )
    );
}
// equivalent to .o-labels-indicator--live
.my-indicator-label--live {
    @include oLabelsIndicatorContent(
        $opts: (
            'block': true,
            'modifier': 'live',
        )
    );
}
// equivalent to .o-labels-indicator__status
.my-indicator-label__status {
    @include oLabelsIndicatorContent(
        $opts: (
            'element': 'status',
        )
    );
}
// equivalent to .o-labels-indicator__timestamp
.my-indicator-label__timestamp {
    @include oLabelsIndicatorContent(
        $opts: (
            'element': 'timestamp',
        )
    );
}

移徙指南

联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .

许可证

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