模拟器

内容扩展和崩溃的无障碍、内容意识部分.

• 使用量
• 标记
• 萨斯
• Java 脚本
  • 建筑业
  • 自定义扩展器
  • 活动
• 移徙
• 联系人
• 许可证

使用量

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

标记

这个 o-expander 组件有内容元素 o-expander__content (DOM用于扩展和倒塌)和切换元素 o-expander__toggle (触发来切换扩展器).

• o-expander__toggle 财务报告和审定财务报表 o-expander__content 可以放在任何地方 o-expander 只要我们.. o-expander__toggle 不包含在 o-expander__content。 。 。 .
• o-expander__toggle 应在键盘访问的按钮或锁定元素上放入.
• 对兄弟会的标记没有限制.

<div data-o-component="o-expander" class="o-expander">
    <div class="o-expander__content">
        <!-- Some content to expand and collapse. -->
    </div>
    <button class="o-expander__toggle">
        Toggle
        <span class="o-expander__visually-hidden"
            >(content will be added above button)</span
        >
    </button>
</div>

默认O-expander会在初始化时崩溃内容. 为了防止这种情况, 添加类 .o-expander__content--expanded (或 aria-hidden="false" 联 合 国 隐藏扩展器) (中文(简体) ).

<div data-o-component="o-expander" class="o-expander">
-	<div class="o-expander__content">
+	<div class="o-expander__content o-expander__content--expanded">
        <!-- Some content to expand and collapse. -->
    </div>
    <button class="o-expander__toggle">
        Toggle
        <span class="o-expander__visually-hidden">(content will be added above button)</span>
    </button>
</div>

或者说

<div data-o-component="o-expander" class="o-expander" data-o-expander-shrink-to="hidden">
-	<div class="o-expander__content">
+	<div class="o-expander__content" aria-hidden="false">
        <!-- Some content to expand and collapse. -->
    </div>
    <button class="o-expander__toggle">
        Toggle
        <span class="o-expander__visually-hidden">(content will be added above button)</span>
    </button>
</div>

高度扩展器

默认扩展器是基于高度. 设定 max-height 使用自定义的扩展器 my-example-expander 见下文. o-expander 将删除您的 max-height 当切换被点击以扩展扩展器时.

-<div data-o-component="o-expander" class="o-expander">
+<div data-o-component="o-expander" class="o-expander my-example-expander">
    <h2>Collapsing content based on its height</h2>
    <div class="o-expander__content">
        <!-- Some content to expand and collapse. -->
    </div>
    <button class="o-expander__toggle">
        Toggle
        <span class="o-expander__visually-hidden">(content will be added above button)</span>
    </button>
</div>

// Set the height to 30% the viewport width (this is for demo purposes and could
// be any height). Only apply a max-height when the expander has the
// `o-expander--initialized` class for progressive enhancement, so when
// JavaScript fails content isn't hidden.
.o-expander--initialized.my-example-expander {
    max-height: 30vh;
}

项目计数扩展器

扩展器也可基于以下各项: o-expander__content。例如,在一个列表中只显示两个项目: o-expander__content 在您崩溃的列表中 (ul 或者说 ol),并指定随 data-o-expander-shrink-to 数据属性.

-	<div data-o-component="o-expander" class="o-expander">
+	<div data-o-component="o-expander" class="o-expander" data-o-expander-shrink-to="2">
        <h2>Collapsing content to a number of items in a list</h2>
        <ul class="o-expander__content">
            <li>item</li>
            <li>item</li>
            <li>item</li> //hidden when collapsed
            <li>item</li> //hidden when collapsed
            <li>item</li> //hidden when collapsed
        </ul>
        <button class="o-expander__toggle">
            Toggle
            <span class="o-expander__visually-hidden">(content will be added above button)</span>
        </button>
    </div>

默认情况下,项目计数假设一个列表。 以其他儿童为基础扩大范围,例如: p 设定要素 data-o-expander-item-selector. e.g. (中文(简体) ).

-	<div data-o-component="o-expander" class="o-expander" data-o-expander-shrink-to="2">
+	<div data-o-component="o-expander" class="o-expander" data-o-expander-shrink-to="2" data-o-expander-item-selector="p">
        <h2>Collapsing content to a number of paragraphs</h2>
        <div class="o-expander__content">
            <p>item</p>
            <p>item</p>
            <p>item</p> //hidden when collapsed
            <p>item</p> //hidden when collapsed
            <p>item</p> //hidden when collapsed
        </div>
        <button class="o-expander__toggle">
            Toggle
            <span class="o-expander__visually-hidden">(content will be added above button)</span>
        </button>
    </div>

隐藏扩展器

扩展器还可以切换可见度 o-expander__content 完全没有。 设定 data-o-expander-shrink-to 改为 hidden。 。 。 .

-	<div data-o-component="o-expander" class="o-expander">
+	<div data-o-component="o-expander" class="o-expander" data-o-expander-shrink-to="hidden">
        <h2>Collapsing all content</h2>
        <div class="o-expander__content">
            <!-- Some content to entirely hide/show. -->
        </div>
        <button class="o-expander__toggle">
            Toggle
            <span class="o-expander__visually-hidden">(content will be added above button)</span>
        </button>
    </div>

切换文本

当扩展器被切换时,所有扩展器都会更新切换文本. 要自定义默认副本, 设置 data-o-expander-collapsed-toggle-text 财务报告和审定财务报表 data-o-expander-expanded-toggle-text 以分别设置崩溃/扩展时的扩展切换器文本.

-	<div data-o-component="o-expander" class="o-expander">
    <div
+		data-o-component="o-expander"
+		class="o-expander"
+		data-o-expander-collapsed-toggle-text="Show more of this please!"
+		data-o-expander-expanded-toggle-text="Less of this please!">
        <div class="o-expander__content">
            <!-- Some content to expand -->
        </div>
        <!-- This toggle text will update when be "Show more of this please!" when the expander initialises. -->
        <!-- And "Less of this please!" when the user expands the expander. -->
        <button class="o-expander__toggle">
            Toggle
            <span class="o-expander__visually-hidden">(content will be added above button)</span>
        </button>
    </div>

设定 data-o-expander-toggle-state="aria" 以更新 toggle aria 属性,但不更新其文本。 设定为 none ,既不更新 toggle aria,也不更新文本属性.

-	<div data-o-component="o-expander" class="o-expander">
+	<div data-o-component="o-expander" class="o-expander" data-o-expander-toggle-state="none">
        <div class="o-expander__content">
            <!-- Some content to expand -->
        </div>
        <!-- This toggle text will not change. -->
        <button class="o-expander__toggle">
            Toggle
            <span class="o-expander__visually-hidden">(content will be added above button)</span>
        </button>
    </div>

萨斯

默认扩展器样式隐藏切换到扩展器已成功关闭, 因此如果 JavaScript 失败, 内容不会被遮蔽 。 当切换扩展器隐藏并立即显示内容时. 包括所有 o-expander CSS 使用 oExpander 混合剂.

@include oExpander();

如果使用高度扩展器,请设置您的 max-height。见 高度扩展器 举个例子.

对于动画和其他更复杂的风格,不包括有观点的o-expander CSS. 而不是创建 自定义扩展器 完全习惯的风格.

Java 脚本

JavaScript 将不会自动运行, 除非您正在使用构建服务 。 您必须构建一个 o-expander 物体或发射 O.DOMContent 失败事件,该事件 o-expander 听着.

建筑业

如果您已声明设置了您的扩展器, 请使用以下内容来关闭页面上的所有扩展器 data-o-component="o-expander" 属性 :

import Expander from '@financial-times/o-expander';
Expander.init();

或启用特定的声明扩展器 :

import Expander from '@financial-times/o-expander';
const myExpanderElement = document.querySelector('my-expander');
const myExpander = new Expander(myExpanderElement);

所有声明选项通过 标记 也可作为 opts 对象。 见 选项一节 一个完整的名单。 例如:

import Expander from '@financial-times/o-expander';
const myExpanderElement = document.querySelector('my-expander');
const myExpander = new Expander(myExpanderElement, {
    shrinkTo: 4,
    itemSelecor: 'p',
});

选项

以下所有内容均可通过 JavaScript 传递或声明设置 标记 作为数据属性( 连字符和前缀由 o-expander 譬如说. data-o-expander-shrink-to="height":

• shrinkTo [height]:扩张器倒塌方法"高","隐"等,或多件.
• itemSelector [li]: 项目选择器以计时 shrinkTo 设置为数字,相对于 .o-expander__content。 。 。 .
• expandedToggleText [less|fewer]: 切换到扩展器崩溃时的文本 。 默认“ fewer ” 或“ less” 当 shrinkTo 是"高",或者"隐藏",当 shrinkTo 是"隐藏".
• collapsedToggleText [more]: 切换到扩展器崩溃时的文本 。 默认“ 更多” 或“ 显示 ” shrinkTo 是"隐藏".
• toggleState [all|aria|none]:如何更新扩展器切换:"全部"更新文本和aria-扩展属性,"aria"仅更新aria-扩展属性,"无"以避免在点击上更新切换.

自定义扩展器

o-expander 可用于创建自定义扩展器,而不包含 o-expander CSS (英语). 如果您需要此功能, 则此功能将有所帮助 o-expander 但习惯UI。 举个例子. o-expander 套装 display: none 默认为相撞项目,但您可能希望将其激活.

要创建自定义扩展器,叫静态 createCustom 方法。 这个 createCustom 方法接受 相同选项 作为 init 方法除外 itemSelector替换为 itemSelector 它接受两个额外的物体, selectors 财务报告和审定财务报表 classnames,用于定制所有 CSS 选择器和类.

import Expander from '@financial-times/o-expander';
const myExpanderElement = document.querySelector('my-expander');
const myCustomExpander = Expander.createCustom(myExpanderElement, {
    shrinkTo: 4,
    selectors: {
        toggle: '.my-expander__toggle', // The toggles within o-expander.
        content: '.my-expander__content', // The content within o-expander which is expandable.
        item: 'li', // The items within o-expander to count, when `shrinkTo` is set to a number.
    },
    classnames: {
        initialized: 'my-expander--initialized', // Added to the expander element when JS is initialised.
        inactive: 'my-expander--inactive', // Added to the expander element if the expander doesn't need to contract/expand.
        expanded: 'my-expander__content--expanded', // Added to the content element when expanded.
        collapsed: 'my-expander__content--collapsed', // Added to the content element when collapsed.
        collapsibleItem: 'my-expander__collapsible-item', // Added to item elements which are hidden when collapsed.
    },
});

见 o 实例 JS Docs 更多细节.

活动

o-喷发起下列事件,在任何再油漆/喷发发生之前总是会起火

• oExpander.init - 扩张器关闭时起火
• oExpander.expand - 扩张器扩张时起火
• oExpander.collapse - 扩张器倒塌时起火

移徙

联系人

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

许可证

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