phammead - story - 促销列表 - 
说明
这个 @bbc/psammead-story-promo-list 软件包是一组三个组件, StoryPromoUl, (中文(简体) ), StoryPromoLi 财务报告和审定财务报表 StoryPromoLiBase它们使用 ul 财务报告和审定财务报表 li 分别是HTML元素. 这个 StoryPromoLi 财务报告和审定财务报表 StoryPromoLiBase 组件都是 li 元素和可以互换使用,因为它们有类似的道具 唯一的区别是 StoryPromoLiBase 没有垫装预设装置的船舶,使其更能适应任何一套关于儿童元素的垫装/边距规则.
安装
npm install @bbc/psammead-story-promo-list
道具
| 参数 | 类型 | 需求 | 默认 | 示例 |
|---|---|---|---|---|
| 儿童 | 节点 | 对 | 不详 | <StoryPromoLi><StoryPromo image={Image} info={Info} /></StoryPromoLi> |
| 边框 | 嘘 | 没有 | true | false |
使用量
常用相并用 psammead-story-promo。 。 。 .
import React, { Fragment } from 'react';
import StoryPromo, { Headline, Summary } from '@bbc/psammead-story-promo';
import { StoryPromoLi, StoryPromoUl } from '@bbc/psammead-story-promo-list';
import { latin } from '@bbc/gel-foundations/scripts';
const Image = (
<img src="https://foobar.com/image.jpg" />
);
const Info = (
<Fragment>
<Headline script={latin}>
<Link href="https://www.bbc.co.uk/news">The headline of the promo</Link>
</Headline>
<Summary script={latin}>The summary of the promo</Summary>
<time>12 March 2019</time>
</Fragment>
);
<StoryPromo
image={Image}
info={Info}
/>
<StoryPromoUl>
<StoryPromoLi>
<StoryPromo image={Image} info={Info} />;
</StoryPromoLi>
<StoryPromoLi>
<StoryPromo image={Image} info={Info} />;
</StoryPromoLi>
</StoryPromoUl>
何时使用此组件
这个组件被设计为在"index"页面上与故事相伴而用.
无障碍说明
我们增加了这个角色 list 财务报告和审定财务报表 listitem 以返回列表语义.
我们还没有彻底查看过跨设备浏览器 AT测试,这是在进行中。 我们会用11个音符更新, 进行适当的释放.
捐款
Psammead完全开源. 我们感谢任何贡献,无论是新的组件、错误修正还是总体改进。 请参看我们的主要贡献指南,可查阅: psammead 仓库的根。 。 。 .
行为守则
我们欢迎对这项工作的反馈和帮助。 通过参与这个项目,你同意遵守 行为守则请稍候再读一下.
许可证
萨姆米德 Apache 2.0 许可。 。 。 .