psammead-radio-schedule - 时间轴 -

说明

这个 RadioSchedule 组件旨在显示不同状态的无线电节目。 目前,该构成部分包括: ProgramCard 内容包括:与无线电节目的链接、国家标签、品牌和插曲标题、摘要和持续时间.

出口

/startTime - 添加程序的起始时间,并设置时钟图标、时间戳和水平线.

安装

npm install @bbc/psammead-radio-schedule --save

组件(WIP)

无线电列表

道具

使用量

此组件会对所有通过的时间表显示无线电调度程序卡和起始时间组件.

import React from 'react';
import { latin } from '@bbc/gel-foundations/scripts';
import RadioSchedule from '@bbc/psammead-radio-schedule';

const schedules = [
  {
    id: 1,
    state: 'live',
    startTime: 1566914061212,
    link: 'www.bbc.co.uk',
    brandTitle: 'This is a brand title',
    summary: 'This is a summary',
    duration: '45:00',
  },
];

<RadioSchedule
  schedules={schedules}
  locale="en-gb"
  timezone="Europe/London"
  script={latin}
  service="news"
  dir="ltr"
  liveLabel="LIVE"
  nextLabel="NEXT"
  durationLabel="Duration %duration%"
/>;

默认链接组件是 a 标记,可以替换为 反应路由大小 Link 组件

import React from 'react';
import { Link } from 'react-router-dom';
import { latin } from '@bbc/gel-foundations/scripts';
import RadioSchedule from '@bbc/psammead-radio-schedule';

const schedules = [
  {
    id: 1,
    state: 'test',
    startTime: 1566914061212,
    link: 'www.bbc.co.uk',
    brandTitle: 'This is another brand title',
    summary: 'This is a longer summary',
    duration: '30:00',
  },
];

<RadioSchedule
  schedules={schedules}
  locale="en-gb"
  timezone="Europe/London"
  script={latin}
  service="news"
  dir="ltr"
  liveLabel="LIVE"
  nextLabel="NEXT"
  durationLabel="Duration %duration%"
  linkComponent={Link}
  linkComponentAttr="to"
/>;

程序卡

道具

使用量

此组件以单一链接显示为程序卡,并有品牌标题,插曲标题,摘要和持续时间. 它还允许以类似于下列方式推翻链接组件: RadioSchedule 构成部分.

import React from 'react';
import { latin } from '@bbc/gel-foundations/scripts';
import ProgramCard from '@bbc/psammead-radio-schedule/ProgramCard';

<ProgramCard
  service="news"
  script={latin}
  dir="ltr"
  startTime="13:00"
  brandTitle="This is a brand title"
  summary="Could a computer ever create better art than a human?"
  duration="PT30M"
  durationLabel="Duration %duration%"
  state="live"
  liveLabel="LIVE"
  nextLabel="NEXT"
  link="https://bbc.com/arabic/articles/c1er5mjnznzo"
  timezone="Europe/London"
/>;

开始时间

道具

使用量

import React from 'react';
import StartTime from '@bbc/psammead-radio-schedule/startTime';
import { latin } from '@bbc/gel-foundations/scripts';

<StartTime
  script={latin}
  service="news"
  timestamp={1566914061212}
  timezone="Europe/London"
  locale="en-gb"
  dir="ltr"
/>;

何时使用此组件

本部分最初用于 front pages,以及媒体页面.

不使用此组件时

无障碍说明

路线图

捐款

Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .

行为守则

我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.

许可证

萨姆米德 Apache 2.0 许可。 。 。 .