{\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}最爱读的

说明

这个 MostRead 组件旨在显示给定的、取决于服务时间的最受读取的文章。 构成部分包括: MostReadList 包含命令列表 MostReadItemWrapperA级 MostReadItemWrapper 是由下列项目组成的清单项目: MostReadLink,与文章的链接,以及 MostReadRank 代表文章排名的数字计数器.

这个 MostReadLink 财务报告和审定财务报表 MostReadRank 组件还支持大小道具。 此道具目前只接受一个 default 财务报告和审定财务报表 small 尺寸。 这些值在内部改变了用于部分组件缩放的CSS. 这将允许今后增加更多的尺寸.

安装

npm install @bbc/psammead-most-read

构成部分

多读列表

道具

使用量

此组件将与其他最常读组件结合使用,示例见下文.

import React from 'react';
import {
  MostReadList,
  MostReadLink,
  MostReadRank,
  MostReadItemWrapper,
} from '@bbc/psammead-most-read';
import { latin } from '@bbc/gel-foundations/scripts';

<MostReadList
  items={items}
  service="news"
  script={latin}
  dir="ltr"
  columnLayout="twoColumn"
>
  <MostReadItemWrapper dir="ltr" children columnLayout="twoColumn">
    <MostReadRank
      service="news"
      script={latin}
      listIndex={1}
      numberOfItems={10}
      dir="ltr"
      columnLayout="twoColumn"
    />
    <MostReadLink
      dir="ltr"
      href="/bbc.co.uk/news/articles/27051997"
      service="news"
      script={latin}
      title="This is a news article headline"
    />
  </MostReadItemWrapper>
</MostReadList>;

大多数读取项目

道具

使用量

此组件用于包接 MostReadLink 财务报告和审定财务报表 MostReadRank 如下文所示.

import React from 'react';
import { latin } from '@bbc/gel-foundations/scripts';
import {
  MostReadLink,
  MostReadRank,
  MostReadItemWrapper,
} from '@bbc/psammead-most-read';
<MostReadItemWrapper dir="ltr" children columnLayout="twoColumn">
  <MostReadRank
    service="news"
    script={latin}
    listIndex={1}
    numberOfItems={10}
    dir="ltr"
    columnLayout="twoColumn"
  />
  <MostReadLink
    dir="ltr"
    script={latin}
    service="news"
    title="This is a article headline"
    href="/bbc.co.uk/news/00000027051997"
  />
</MostReadItemWrapper>;

多数读取Rank

道具

使用量

import React from 'react';
import { latin } from '@bbc/gel-foundations/scripts';
import { MostReadRank } from '@bbc/psammead-most-read';

<MostReadRank
  service="news"
  script={latin}
  listIndex={1}
  numberOfItems={5}
  dir="ltr"
  columnLayout="twoColumn"
  size="small"
/>;

多读链接

道具

使用量

此组件的典型使用例如下所示。 它包含一个信息元素. 信息元素是一个链接,它指向相应的文章.

import React from 'react';
import { latin } from '@bbc/gel-foundations/scripts';
import { MostReadLink } from '@bbc/psammead-most-read';
import Timestamp from '@bbc/psammead-timestamp';

<MostReadLink
  dir="ltr"
  script={latin}
  service="news"
  title="This is a article headline"
  href="/bbc.co.uk/news/00000027051997"
  size="small"
>
  <Timestamp
    datetime="2019-03-01T14:00+00:00"
    script={script}
    padding={false}
    service={service}
  >
    Last updated: 5th November 2016
  </Timestamp>
</MostReadLink>;

何时使用这些组件

这些组件拟用于: article, (中文(简体) ), front, (中文(简体) ), story 财务报告和审定财务报表 mostRead 页面.

无障碍说明

• 这些组件预计将在使用屏幕读取器时提供命令列表中最读取的文章的信息,方法是宣布区域地标,读出标题"最读取",并按正确的顺序读出每个标题链接.
• 由于faux区块链接代码,预计不会也读出军衔.

捐款

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

行为守则

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

许可证

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