x 调试器

本模块提供模板供使用 o-取用器. 茶叶机用于呈现内容.

安装

npm install --save @financial-times/x-teaser @financial-times/o-teaser

这个 x-engine 模块用于将您选择的运行时间注入组件。 请读一下 x-engine 文档,如果您正在消费 x- 在应用程序中首次使用组件.

概念

特征

由于取笑器非常复杂,有上千个可能的通相被分解成逻辑组特征. 它们是:

• Meta, 标题上的内容分类
• 标题,内容标题
• Standfirst,一个字幕或内容描述
• 内容公布的状况、日期或时间
• 相关链接, 相关内容链接的补充列表
• 图像, 内容的海报图像
• 标题shot, 内容作者在其列中发布内容时的图像
• 视频,用于视频内容,可以播放视频
• 自定义槽, 插入自定义组件或标记的自由槽
• 促销内容,一个插入不同类型促销内容的插槽,例如但不仅限于:剪辑,交互式图形等.

指标

茶叶显示器 内容 但是,我们的内容项目也带有进一步描述它们的暗示和特征。 内容项目只能提供给保费订户,被排除在联合许可证之外,或选择作为编辑的选择。 这种额外数据可能并不总是能产生可见的输出,也可能不是所有用户都能看到. 然而,除了内容本身之外,它们还可以用来作出决定.

规则

因为有这么多 笑话属性 某些选项可能冲突。 在这种情况下,一种选择必须优先于另一种选择。 这些坐位通过使用 规则. 规则集是按先后顺序执行一系列条件的函数. 当一个条件被评估为真实时,必须返回.

例如,为了决定要显示的媒体类型(视频、头像或图像),我们定义了以下规则:

const media = (props) => {
  if (props.showVideo && props.video && props.video.url) {
    return 'video'
  }

  if (props.showHeadshot && props.headshot && props.headshot.url && props.indicators.isColumn) {
    return 'headshot'
  }

  if (props.showImage && props.image && props.image.url) {
    return 'image'
  }
}

使用量

本单元提供的组件都是需要绘制地图的功能 笑话属性。它们可用于香草JavaScript或JSX(如果你不熟悉检查) WTF为JSX (第一编) 例如,如果您正在使用 React 写入您的应用程序,您可以使用这样的组件 :

import React from 'react'
import { Teaser } from '@financial-times/x-teaser'

// A == B == C
const a = Teaser(props)
const b = <Teaser {...props} />
const c = React.createElement(Teaser, props)

全体 x- 组件被设计为与各种运行时间相兼容,而不仅仅是回放. 看看这个 x-engine 建议的图书馆和框架清单的文档.

儿童成分

用于建造完整的取笑器的所有分部件都可以单独进口和使用。 每个组件都可以得到一整套 笑话属性。 。 。 .

import { Title, Standfirst } from '@financial-times/x-teaser'

const TeaserIsh = (title, standfirst) => (
  <div className="teaser-ish">
    <Title title={title} />
    <Standfirst standfirst={standfirst} />
  </div>
)

类型脚本

包含一个 TypeScript 定义文件,涵盖此组件预期的所有属性 。 你可以这样使用:

import { TeaserProps } from './Props'

const props: TeaserProps = {}

属性

载于 特性 记录取笑者属性,或 道具,也已被拆分为逻辑组。 没有道具是强制性的,也没有设定默认,但是 预设 用于常用组合。 在道具冲突的情况下 规则 应决定哪一个应优先。 有道具可用的TypeScript定义.

特性道具

通用道具

元道具

标题

站起第一支持

状态支持

图像道具

副线道具

头镜头道具

视频道具

相关链接道具

背景说明

备选道具

Meta 链接道具( 已过期)

链接道具

媒体道具

指标道具

特殊样式道具

预设

由于最常用的配置有这么多的选项预设,这些是: -

• Small
• SmallHeavy
• Large
• Hero
• HeroNarrow
• HeroVideo
• HeroOverlay
• TopStory
• TopStoryLandscape

要使用预设导入 presets 属性和取笑器组件,并将您选择的预设与其他属性相混合.

import { Teaser, presets } from '@financial-times/x-teaser'

const html = Teaser({ ...props, ...presets.Hero, showStatus: false })