```
设定 `data-o-expander-toggle-state="aria"` 以更新 toggle aria 属性,但不更新其文本。 设定为 `none` ,既不更新 toggle aria,也不更新文本属性.
```diff
-
+
Toggle
(content will be added above button)
```
## 萨斯
默认扩展器样式隐藏切换到扩展器已成功关闭, 因此如果 JavaScript 失败, 内容不会被遮蔽 。 当切换扩展器隐藏并立即显示内容时. 包括所有 `o-expander` CSS 使用 `oExpander` 混合剂.
```scss
@include oExpander();
```
如果使用高度扩展器,请设置您的 `max-height`。见 [高度扩展器](https://npmcn.com/package/%40financial-times/o-expander/#readme-height-expander) 举个例子.
_对于动画和其他更复杂的风格,不包括有观点的o-expander CSS. 而不是创建 [自定义扩展器](https://npmcn.com/package/%40financial-times/o-expander/#readme-custom-expander) 完全习惯的风格._
## Java 脚本
JavaScript 将不会自动运行, 除非您正在使用构建服务 。 您必须构建一个 `o-expander` 物体或发射 O.DOMContent 失败事件,该事件 `o-expander` 听着.
### 建筑业
如果您已声明设置了您的扩展器, 请使用以下内容来关闭页面上的所有扩展器 `data-o-component="o-expander"` 属性 :
```js
import Expander from '@financial-times/o-expander';
Expander.init();
```
或启用特定的声明扩展器 :
```js
import Expander from '@financial-times/o-expander';
const myExpanderElement = document.querySelector('my-expander');
const myExpander = new Expander(myExpanderElement);
```
所有声明选项通过 [标记](https://npmcn.com/package/%40financial-times/o-expander/#readme-markup) 也可作为 `opts` 对象。 见 [选项一节](https://npmcn.com/package/%40financial-times/o-expander/#readme-options) 一个完整的名单。 例如:
```js
import Expander from '@financial-times/o-expander';
const myExpanderElement = document.querySelector('my-expander');
const myExpander = new Expander(myExpanderElement, {
shrinkTo: 4,
itemSelecor: 'p',
});
```
#### 选项
以下所有内容均可通过 JavaScript 传递或声明设置 [标记](https://npmcn.com/package/%40financial-times/o-expander/#readme-markup) 作为数据属性( 连字符和前缀由 `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` 方法接受 [相同选项](https://npmcn.com/package/%40financial-times/o-expander/#readme-options) 作为 `init` 方法除外 `itemSelector`替换为 `itemSelector` 它接受两个额外的物体, `selectors` 财务报告和审定财务报表 `classnames`,用于定制所有 CSS 选择器和类.
```js
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](https://registry.origami.ft.com/components/o-expander/jsdoc) 更多细节.
### 活动
o-喷发起下列事件,在任何再油漆/喷发发生之前总是会起火
- `oExpander.init` - 扩张器关闭时起火
- `oExpander.expand` - 扩张器扩张时起火
- `oExpander.collapse` - 扩张器倒塌时起火
## 移徙
| 状态 | 主要版本 | 最后一个小版本 | 移徙指南 |
| :-: | :-: | :-: | :-: |
| 维护 | 第7条 | 不详 | [迁移到 v7](https://npmcn.com/package/%40financial-times/o-expander/MIGRATION.md#migrating-from-v6-to-v7) |
| 已贬值 | 6个 | 第6.3条 | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-expander/MIGRATION.md#migrating-from-v5-to-v6) |
| 已贬值 | 页:1 | 5.0 (中文(简体) ) | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-expander/MIGRATION.md#migrating-from-v4-to-v5) |
| 已贬值 | 页:1 | 4.7 (中文(简体) ) | \- 说吧 |
| 已贬值 | 3个 | 3.0 调用 | \- 说吧 |
| 已贬值 | 2个 | 2.0 数据 | \- 说吧 |
| 已贬值 | 1个 | 1.4 (中文(简体) ) | \- 说吧 |
## 联系人
如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-expander/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 .
* * *
## 许可证
本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 .
## 常见问题
### @financial-times/o-expander 是什么？
用于扩展和崩溃内容或列表的内容意识帮助工具\.注意：该包已被作者标记为弃用——Package no longer supported\. Contact Support at https://www\.npmjs\.com/support for more info\.
### 如何安装 @financial-times/o-expander？
在项目目录运行 npm install @financial-times/o-expander，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/o-viewport（^5\.1\.2）、@financial-times/o-private-foundation（^1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @financial-times/o-expander 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-expander 是否存在。
### @financial-times/o-expander 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @financial-times/o-expander 可以商用吗？
@financial-times/o-expander 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @financial-times/o-expander 的下载量有多少？
根据 npm 官方下载统计，@financial-times/o-expander 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,894 次，日均约 96 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @financial-times/o-expander 还在维护吗？
最新版本 7\.0\.1 发布于 2025/06/30（1\.4 年前）；至今共发布 34 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/02/13。作者已将其标记为弃用，新项目建议寻找替代方案。