o-取用器

本部分用于展示与文章有联系的取笑者.

• 使用量
• 发展
• 标记
• 萨斯
• 移徙指南
• 联系人
• 许可证

使用量

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

发展

安装 折纸制作工具 改为 构建和运行演示

标记

取笑者的基本标记结构会像这样:

<div class="o-teaser o-teaser--small">
    <div class="o-teaser__content">
        <a href="#" class="o-teaser__tag">World</a>
        <h2 class="o-teaser__heading">
            <a href="#">Japan sells negative yield 10-year bonds</a>
        </h2>
        <div class="o-teaser__timestamp">
            <time
                data-o-component="o-date"
                class="o-teaser__timestamp-date"
                datetime="2016-02-29T12:35:48Z"
                >2016-02-29T12:35:48Z</time
            >
        </div>
    </div>
</div>

可选包括: 日期 在时间戳元素中提供格式化日期的组件 o-teaser__timestamp。这是为了制作相对时间戳,例如“1小时前”.

茶叶师支持多种 要素 并可以使用多个自定义 主题 并应根据需要加以使用。 关于包括标记在内的全部实例清单,见 书记官处。 。 。 .

图像

要将图像添加到取笑器中,请使用下列标记结构: 1

<div class="o-teaser__image-container">
    <img src="{image-src}" class="o-teaser__image" alt="{alt text}" />
</div>

为了支持懒散地装入图像,您可以使用 o-teaser__image-placeholder 要素,如下:

<div class="o-teaser__image-container">
    <div class="o-teaser__image-placeholder">
        <img src="{image-src}" class="o-teaser__image" alt="{alt text}" />
    </div>
</div>

支助要素

默认支持以下元素:

.o-teaser__tag              # Small coloured tag at the top of the teaser
.o-teaser__tag-suffix       # Small coloured content to come after the tag, such as timestamp or duration
.o-teaser__tag-prefix       # A container for content before the tag
.o-teaser__heading          # Main heading of the teaser
.o-teaser__standfirst       # A short piece of content
.o-teaser__image-container  # Wrapper element for an image
.o-teaser__image            # An image for the teaser
.o-teaser__headshot         # Author's headshot image
.o-teaser__timestamp        # A styled timestamp for the teaser
.o-teaser__related          # A list of related content links
.o-teaser__related-item     # A single item of a related content list

萨斯

包括所有取笑者的风格 oTeaser数字 :

@import '@financial-times/o-teaser/main';

@include oTeaser();

茶叶由各种元素(如:取向,站立第一,时间戳等)和一系列主题(如:小,大,视频等)组成. 通过列表 elements 财务报告和审定财务报表 themes 在选项中 $opts 参数只包含所需的样式 :

@include oTeaser(
    $opts: (
        'elements': (
            'default',
            'images',
        ),
        'themes': (
            'small',
            'large',
            'video',
        ),
    )
);

要件通过组别加以规定,其中包括:

• default - 所有基本文字要素,包括:标题、站起、元和标记.
• images - 所有图像元素样式
• promoted - 由员额元素样式促进和支付薪金
• related-items - 有关项目要素的样式
• timestamp - 时间戳和活的邮政样式的样式

主题 包括:

• small - 造型为 小笑话
• large - 造型为 大笑话
• standard - 发表意见和反向主题
• video - 产出 视频取笑器 样式
• audio - 产出 音频取笑器 样式
• top-stories - 输出所有顶级故事取笑者风格和变化
• hero - 全部产出 超级英雄 笑话风格和变化

主题

o-teaser 拥有一些主题来帮助突出内容并提供多样的布局. 主题被分出为3个类型布局,每个类型都有各自的修饰符来为样式添加不同的变体.

小笑话

使用 o-teaser--small 修饰相.

补充修改语:

• stacked: 将图像移动到取笑器上方
• opinion: 将标签颜色改为蓝色
• live: 将背景更改为红色, 并改变元素位置, 以使取笑器突出
• post: 设置活博客帖样式

大笑话

使用 o-teaser--large 修饰相.

补充修改语:

• opinion: 添加蓝色背景
• highlight: 添加 claret 背景

取笑英雄们

使用 o-teaser--hero 修饰相.

在故事书上查看示例

补充修改语:

• centred: 图像和文本居中
• opinion: 添加蓝色背景
• highlight: 添加 claret 背景
• stretched:使取笑者取出可用空间的全部高度,将站出和时间戳的内容固定在取笑者的下方.

视频取笑者

使用 o-teaser--video 修饰相.

在故事书上查看示例

视频取笑者

使用 o-teaser--audio 修饰相.

移徙指南

联系人

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

许可证

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