+
Oops.
Something went wrong!
The quick brown fox did not jump over the lazy dogs.
+
+ Did you know that that sentence uses all of the letters in the alphabet at least once?
+
```
对于任何信件,您可以通过使用此标记来突出段落内的任何部分副本 :
```html
The quick brown fox did
not jump over the lazy
dogs.
```
[萨斯](https://npmcn.com/package/%40financial-times/o-message/#readme-sass) 用户可能创建带有突出显示颜色的自定义消息。 这有助于突出信息中的关键词. 对信件副本应用突出显示颜色使用类 `o-message__content-highlight-color`。 。 。 .
```html
Hurraythinghappened
The quick brown fox jumped over the lazy dogs!
```
对于 **只有动作信息**,可以将文本集中到特定类别(`.o-message__content--center-align`:
```diff
-
+
This will be a call to action. Feedback, please.
```
## Java 脚本
没有代码会自动运行, 除非你正在使用构建服务 。 您必须构建一个 `o-message` 物体或发射 O.DOMContent 失败事件,该事件 `o-message` 听着.
### 建筑业
如果您已声明设置您的消息, 请使用以下内容来保存您的消息 .
```js
import Message from '@financial-times/o-message';
Message.init();
```
`Message` 默认情况下将关闭其元素。 通过声明设置信息,可以通过添加 `data-o-message-close="false"` 到消息元素.
如果你正在设置一个消息 没有现有的DOM元素, `Message` 将为您构建一个元素。 只要你的标记包含一个带有数据属性的元素 `data-o-component=o-message`中,您可以选择一个带有特定信息的信息 [选项](https://npmcn.com/package/%40financial-times/o-message/#readme-options)。 。 。 .
```js
import Message from '@financial-times/o-message';
const importantMessage = new Message(null, {
type: 'alert',
state: 'error',
content: {
highlight: 'Something has gone wrong.',
detail: 'The quick brown fox did not jump over the lazy dogs.',
},
});
```
### 选项
`o-message` 允许多个配置选项,可以改变消息的类型及其视觉造型.
示例中列出了唯一需要的选项 _上文_它们是:
- `type`:弦乐. o-message 变种. 现有变体有"行动","警报"和"通知"等.
- `state`:弦乐. 所有信件都需要状态,您必须提供与您所选择的信件类型相结合的状态,如您所列出的 [信件类型](https://npmcn.com/package/%40financial-times/o-message/#readme-message-types)
- `content.detail`:弦乐. 关于信息性质的细节.
不需要下列选项,所有选项都有默认值:
- `autoOpen`:布尔. 是否自动打开信件,默认为 `true`。 。 。 .
- `parentElement`:弦乐. 这决定了信件将附加的元素. 如果没有声明,它会自动附加到正文,或者带有数据属性的元素 `data-o-component=o-message`,默认为 `null`。 。 。 .
- `content`: 对象。 文本属性持有下列值:
- `highlight`:弦乐. 消息中突出显示的文字 。 默认为 `null`
- `additionalInfo`:弦乐. 关于信件的更多信息 - 仅适用于带有 `inner` 设置。 默认为 `null`
- `actions`: 对象。 文本属性持有下列值:
- `primary`: 对象。 按钮属性持有以下值 :
- `text`:字符串. 按钮的文本值. 默认为 `null`
- `url`:弦乐. 按钮链接到的 URL 。 默认为 `null`
- `openInNewWindow`:布尔. 决定 是否可采取以下行动: `target="_blank`默认为 `false`
- `secondary`: 对象。 链接属性持有以下值 :
- `text`:字符串. 链接的文本值. 默认为 `null`
- `url`:弦乐. 链接的 URL 链接 。 默认为 `null`
- `openInNewWindow`:布尔. 决定 是否可采取以下行动: `target="_blank`默认为 `false`
- `close`:布尔. 是否显示关闭按钮 。 默认为 `true`。 。 。 .
例如,用于配置 `close` 要显示的图标 :
```diff
import Message from 'o-message';
const importantMessage = new Message(null, {
type: 'alert',
state: 'error',
content: {
- highlight: 'Something has gone wrong.',
+ highlight: 'Something has gone very wrong.',
detail: 'The quick brown fox did not jump over the lazy dogs.'
},
+ close: false
});
```
## 萨斯
您可以调用 :
```scss
@include oMessage();
```
您还可以更具体地说明您想要通过使用一个 `$opts` 地图 :
```scss
@include oMessage(
$opts: (
'types': (
'action',
'notice',
),
'states': (
'inform',
'warning',
),
'layouts': (
'inner',
),
)
);
```
选项包括:
| 特性 | 说明 |
| :-: | :-: |
| 类型 | 要支持的信息(例如提醒、通知、行动)见 [信件类型](https://npmcn.com/package/%40financial-times/o-message/#readme-message-types)。 。 。 . |
| 状态 | 要支持的信息类型(例如“ 信息”、“ 警告”、“ 错误”) 参见 [信件类型](https://npmcn.com/package/%40financial-times/o-message/#readme-message-types)。 。 。 . |
| 版式 | 默认信件应该横跨页面,以便在内容内支持消息通过"内"选项. 见 [信件类型](https://npmcn.com/package/%40financial-times/o-message/#readme-message-types)。 。 。 . |
### 自定义信件
要创建新消息, 并有一个独特的外观调用 `oMessageAddSate`。混音可以接受三个参数:
- `name`:贵州名. 用于修改类输出 o- message - {name} .
- `opts`: 状态选项地图。 笔记颜色可能是 [o-颜色](https://registry.origami.ft.com/components/o-colors) 颜色名称或十六进制值 :
- `foreground-color`: 消息文本所使用的颜色, 以及未给出亮点颜色的按钮 .
- `background-color`: 消息所使用的背景颜色.
- `icon`编号: [缩略语](https://registry.origami.ft.com/components/o-icons) 图标名称,在提醒信件中显示。 只要求状态支持提醒消息类型 .
- `button-type` (可选) : 按钮的类型。 一个 `primary` 或者说 `secondary` (违约) `secondary`) (中文(简体) ).
- `highlight-color` (可选) : 消息按钮使用亮点颜色 。 它也可以用来与 CSS 类一起突出消息副本 `o-message__content-highlight-color`。 。 。 .
- `types`: 清单 [信件类型](https://npmcn.com/package/%40financial-times/o-message/#readme-message-types) 您的状态支持一个或一个以上( y)`alert`, (中文(简体) ), `notice`, (中文(简体) ), `action`) (中文(简体) ).
```scss
// Outputs CSS for a custom message state called "pikachu"
// Outputs a modifier class `o-message--pikachu`
@include oMessageAddState(
$name: 'pikachu',
// the custom state is named "pikachu"
$opts:
(
// slate message
'background-color': 'slate',
// white text
'foreground-color': 'white',
// lemon highlights with `o-message__content-highlight-color` and a lemon button
'highlight-color': 'lemon',
// a primary button`o-message__content-highlight` highlight copy
'button-type': 'primary',
// show a 'user' o-icons icon if used as an alert
'icon': 'user',
),
$types: (
'notice',
'alert',
)
); // this state should work with notice and alert message types
```
## 移徙
| 状态 | 主要版本 | 最后一个小版本 | 移徙指南 |
| :-: | :-: | :-: | :-: |
| 维护 | 6个 | 不详 | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-message/MIGRATION.md#migrating-from-v5-to-v6) |
| 已贬值 | 页:1 | 5.4 (中文(简体) ) | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-message/MIGRATION.md#migrating-from-v4-to-v5) |
| 已贬值 | 页:1 | 4.2 (中文(简体) ) | [迁移到 v4](https://npmcn.com/package/%40financial-times/o-message/MIGRATION.md#migrating-from-v3-to-v4) |
| 已贬值 | 3个 | \- 说吧 | [迁移到 v3](https://npmcn.com/package/%40financial-times/o-message/MIGRATION.md#migrating-from-v2-to-v3) |
| 已贬值 | 2个 | 2.4 国家 | [迁移到 v2](https://npmcn.com/package/%40financial-times/o-message/MIGRATION.md#migrating-from-v1-to-v2) |
| 已贬值 | 1个 | 1.0 国家 | 不详 |
## 联系人
如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-message/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 .
## 许可证
本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 .
## 常见问题
### @financial-times/o-message 是什么？
提供提醒、通知或发出行动呼吁的信息要素\.
### 如何安装 @financial-times/o-message？
在项目目录运行 npm install @financial-times/o-message，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/math（^1\.0\.0）、@financial-times/o-brand（^4\.1\.0）、@financial-times/o-private-foundation（^1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。
### @financial-times/o-message 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-message 是否存在。
### @financial-times/o-message 支持 ESM 还是 CommonJS？
以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。
### @financial-times/o-message 可以商用吗？
@financial-times/o-message 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @financial-times/o-message 的下载量有多少？
根据 npm 官方下载统计，@financial-times/o-message 在 2026/10/15 – 2026/11/13 这 30 天内被下载 13,759 次，日均约 459 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @financial-times/o-message 还在维护吗？
最新版本 6\.0\.0 发布于 2025/02/20（1\.7 年前）；至今共发布 42 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。