⚠️ 注: 已替换为 o3- 按钮请参看 移徙指南 用于升级的步骤.

○-按钮

o-按钮提供Sass混音和变量来创建按钮.

• 使用量
• 标记
• 萨斯
• 参考资料
• 移徙
• 联系人
• 许可证

使用量

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

按钮允许用户与页面或产品互动. 每个页面或产品区(一种形式,模式,一篇文章内)不应有超过1个主按钮,所剩任何CTA应被显示为次要或鬼按钮.

按钮传达用户可以采取的行动. 它们通常被放置在你的UI中,比如:

• 对话框
• 模块窗口
• 表单
• 纸牌
• 工具栏

不使用时

如果用户采取的行动是导航的,例如返回,则不应使用按钮.

无障碍

• 最好采用实施时提供的颜色组合. 保证这些组合符合WCAG AA要求. 定制颜色时,参考 颜色指南 确保无障碍.
• 在大多数情况下,偏好使用默认大小按钮而不是小按钮. 默认大小的按钮便于用户注意并按下.

标记

扣子有三种类型,一是一是一是一是二是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一是一.

<button class="o-buttons o-buttons--primary">Submit</button>
<button class="o-buttons o-buttons--secondary">Cancel</button>
<button class="o-buttons o-buttons--ghost">Options</button>

o-按钮 CSS将工作 <button> 或者说 <a> 要素。 对于无障碍环境来说,重要的是,如果你打算建立 <a> 作为按钮,你给它正确 aria 作用。 。 。 .

内部按钮的复制件应当简洁并证实用户正在采取的行动.

主题

主题可以被应用到按钮上来改变其外观. o-按钮默认提供一些主题:

<button class="o-buttons o-buttons--primary o-buttons--inverse">Submit</button>
<button class="o-buttons o-buttons--secondary o-buttons--inverse">Cancel</button>

Sass 用户可能创建 自定义主题。 。 。 .

大小

任何按钮都可以使用 o-buttons--big 修饰品类.

<button class="o-buttons o-buttons--primary o-buttons--big">Click Me</button>

图标

要在按钮上添加图标, 添加类 o-buttons-icon 财务报告和审定财务报表 o-buttons-icon--{icon-name} 转到你的按钮.

萨斯 用户可以从 语句 设置。 不过如果你在使用 构建服务 可用的按钮图标数量有限。 限制图标数量会让CSS捆绑得更小,但是如果你需要我们目前不支持的图标按钮,那么请联系Origami团队:

• 左箭头
• 右箭头
• 上传
• 勾选
• 加号
• 警告
• 向下箭头
• 向上箭头
• 网格
• 列表
• 编辑
• 下载
• 搜索
• 刷新
• 横

<button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-down">Down Arrow</button>
<button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--download">Download</button>

如果您希望按钮只显示图标, 请添加类 o-buttons-icon--icon-only ,并为屏幕阅读器用户提供可视化隐藏标签 o-buttons-icon__label。 。 。 .

<button class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-down o-buttons-icon--icon-only">
    <span class="o-buttons-icon__label">
        Down Arrow
    </span>
</button>

组

环绕按钮 .o-buttons-group 将它们组合在一起:

<div class="o-buttons-group">
    <button class="o-buttons o-buttons--secondary" aria-selected="true">One</button>
    <button class="o-buttons o-buttons--secondary">Two</button>
    <button class="o-buttons o-buttons--secondary">Three</button>
</div>

倾斜

将按钮包入页盖样式 .o-buttons-pagination。大多数页标使用套装 a 类似按钮而非按钮的链接标记 button 标签。 在 pagination 中使用锚标记时, 不使用 aria-selected 数据属性。 改为使用 aria-current="page" 要显示当前页面,这将突出显示当前页面的按钮并显示阅读器.

以下的标记示例显示了20页的页码,其中第14页为当前页码. 紧接着 标记规则 我们建议显示不超过7页,并使用椭圆元素来显示隐藏的结果.

<div class="o-buttons-pagination">
    <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only">
        <span class='o-buttons-icon__label'>Previous results</span>
    </a>

    <a href="#" class="o-buttons o-buttons--secondary">1</a>
    <span class="o-buttons-pagination__ellipsis">...</span>
    <a href="#" class="o-buttons o-buttons--secondary">13</a>
    <a href="#" class="o-buttons o-buttons--secondary" aria-current="page">14</a>
    <a href="#" class="o-buttons o-buttons--secondary">15</a>
    <span class="o-buttons-pagination__ellipsis">...</span>
    <a href="#" class="o-buttons o-buttons--secondary">20</a>

    <a href="#" class="o-buttons o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class='o-buttons-icon__label'>Next results</span>
    </a>
</div>

接地规则

要显示的页数不是由 Origami 执行 。 然而,我们建议如下:

• 一次显示不超过7页. 当有超过7页时,以以下方式将多页隐藏在页形椭圆后. 鉴于:
  • 所选的页面在3下显示椭圆,两边各有3页.
  • 所选的页面是最后2页之一,其中一面显示有3页的椭圆.
  • 第3页选取出4页,椭圆,再取出2页.
  • 上页的第3回选取了2页,椭圆,再选取4页.
  • 所选页面从第一页和最后一页分出3个以上,显示第一页,椭圆,三页,椭圆和最后一页.

举例来说 在 Origami 注册中进行页码演示。 。 。 .

倾斜 主题

主题修改符, 如 o-buttons--inverse 可在页形块内的按钮上添加.

缓冲大小

大按钮也可能被用在平面图样式中. 添加 o-buttons--big 每个按钮的修改符和 o-buttons-pagination__ellipsis--big 到椭圆元素.

<div class="o-buttons-pagination">
    <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-left o-buttons-icon--icon-only" disabled>
        <span class='o-buttons-icon__label'>Previous results</span>
    </a>

    <a href="#" class="o-buttons o-buttons--big o-buttons--secondary" aria-current="page">1</a>
    <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">2</a>
    <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">3</a>
    <span class="o-buttons-pagination__ellipsis o-buttons-pagination__ellipsis--big">...</span>
    <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">18</a>
    <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">19</a>
    <a href="#" class="o-buttons o-buttons--big o-buttons--secondary">20</a>

    <a href="#" class="o-buttons o-buttons--big o-buttons--secondary o-buttons-icon o-buttons-icon--arrow-right o-buttons-icon--icon-only">
        <span class='o-buttons-icon__label'>Next results</span>
    </a>
</div>

已禁用

避免禁用按钮, 除非用户研究显示它们改进了您的界面 。 已禁用按钮有 对比差,使他们难以阅读。它们也 不反馈给用户为什么被禁用。 。 。 .

要禁用按钮,请添加 disabled 属性。 将已禁用按钮隐藏到正在激活时添加类 o-buttons--hide-disabled。 。 。 .

<!-- Visibly disabled because of the `disabled` attribute. -->
<button class="o-buttons" disabled>My Button</button>

<!-- Visually hidden because of the `disabled` attribute and `o-buttons--hide-disabled`.-->
<button class="o-buttons o-buttons--hide-disabled" disabled>My Button</button>

萨斯

输出默认的 o- 按钮 CSS 给主混音器发出单调 oButtons。建议您通过一个选项映射,作为仅包含需要的按钮样式的第一个参数。 没有选项映射,所有o-按钮样式都包括在内.

@include oButtons($opts: (
    'sizes': ('big'), // e.g .o-buttons--big
    'types': ('primary', 'secondary', 'ghost'), // e.g .o-buttons--primary
    'themes': ('mono', 'inverse', 'b2c', 'professional', 'professional-inverse', 'ft-live'), // e.g .o-buttons--inverse
    'icons': ('arrow-left', 'arrow-right', 'search'), // any fticons, e.g .o-buttons-icons.o-buttons-icons--search
    'pagination': true, // .o-buttons-pagination
    'groups': true // .o-buttons-group
));

自定义主题

创建新按钮主题调用 oButtonsAddTheme 带有主题的颜色以及您想要与主题一起使用的按钮和图标类型。如果有的话.

• 名称:您的主题名称。 用于 Modifer 类输出 o-buttons--{name}。 。 。 .
• 选择:用于主题的选项地图。 键包括 color 财务报告和审定财务报表 context。 。 。 .
  • 颜色:按钮的主要颜色。 任何 o-colors 调色板颜色名称 .
  • 上下文( 可选) : 设置了您的按钮背景颜色 。 默认页面颜色(核心品牌的纸张,否则为白色). 这用于确认无障碍,并在某些情况下改变按钮的颜色.
• 类型:用于主题的按钮类型列表.
• 图标:您使用的主题图标列表。 任意 语句 图标名称.

/// .o-buttons--my-special-button
@include oButtonsAddTheme(
    $name: 'my-special-button',
    $opts: ('color': 'claret-80'),
    $types: ('primary', 'secondary'),
    $icons: ('arrow-up', 'arrow-down')
);

自定义标记

我们建议使用 o-buttons 标记,因为这鼓励CSS再利用和较小的捆绑尺寸。 如果您无法更新标记以使用 o-buttons 分类,包括由 oButtonsAddTheme,使用时 oButtonsContent数字 :

.my-button {
    @include oButtonsContent($opts: ('type': 'primary'));
}

.my-icon-button {
    @include oButtonsContent($opts: (
        'type': 'primary',
        'icon': 'arrow-right'
    ));
}

.my-lemon-button {
    @include oButtonsContent($opts: (
        'type': 'primary',
        'theme': ('color': 'lemon')
    ));
}

oButtonsContent 拥有重新创建所有按钮的选项,包括大小不同的按钮和仅用于图标的按钮。 见 o- 按钮 SassDoc 更多细节和实例.

参考资料

• 汉普斯·塞斯福斯更详细地解释了与被禁用按钮有关的问题 轴slab.com 文章在文章中,Hampus建议采用其他设计方法,用于常见的残疾按钮.

移徙

联系人

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

许可证

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