o 消息 
o-message 用于提醒、通知或发出行动呼吁的信息组件.
o-message 使用 Sass 和 Javascript来显示并隐藏消息组件.
如果在页面上提供标记,它可以被宣布为不公开的,也可以在使用时必须被宣布为不公开的 手动构建进程。 。 。 .
使用量
检查出来 如何将 Origami 组件纳入您的项目 开始 o-message。 。 。 .
信件类型
o-message 提供三种类型的信息: 警报, (中文(简体) ), 通知,以及 动作。 。 。 .
- 一个 警报 消息应用作用户与产品互动的反馈(例如,付款减少警告)。 与其他消息不同,提醒消息有一个图标.
- A 类 通知 电文应当用于提供有关产品的信息或警告。 (例如一种产品的β版本).
- 一个 动作 消息应该作为静态的行动呼吁,通常在主要内容之内或以下,这不一定是对用户与产品互动的反应(例如一般要求反馈).
您可以在“% 1” 中找到上面每个信件的演示 口头登记。 。 。 .
默认消息被设计为在任何容器中跨越一页. “ 内在的” 信息的意思是放在一个更小的容器里, 因为它会存储信息 .
除了布局,消息还可以接受另一个变体:状态. 然而,并不是每个信息都接受每个州,或者每个布局,也不是每个信息都为每个品牌工作. 请对照您的产品需求检查下表 。 如果您需要一个无法获取的信息,请 联系 与"折纸"团队.
| 状态支持 | 排版支持 | 品牌支持 | |
|---|---|---|---|
| 动作信息 | inform, (中文(简体) ), inform-inverse | 默认 | 内部、 白色标签 |
| 提醒消息 | success, (中文(简体) ), neutral, (中文(简体) ), error | 默认, 内 | 全部 |
| 通知消息 | inform, (中文(简体) ), feedback, (中文(简体) ), warning, (中文(简体) ), warning-light | 默认, 内 | 核心 : inform 或者说 feedback 只有状态 内部:所有国家 白标签 : inform 只有状态 |
标记
所有消息都有相同的标记. 不同的风格是:
type: 一个o-message--action, (中文(简体) ),o-message--alert, (中文(简体) ),o-message--noticestate: 一个o-message--success, (中文(简体) ),o-message--neutral, (中文(简体) ),o-message--error, (中文(简体) ),o-message--feedback, (中文(简体) ),o-message--warning, (中文(简体) ),o-message--warning-light, (中文(简体) ),o-message--inform, (中文(简体) ),o-message--inform-inverselayout: 仅限当前o-message--inner
注:如在说明中提及的 信件类型,并非所有州都会为所有信息类型工作。 除此之外,版式修改器仅适用于 alert 财务报告和审定财务报表 notice 类型信息.
这个例子说明了成功提醒信息的基本标记:
<div
class="o-message o-message--alert o-message--success"
data-o-component="o-message"
>
<div class="o-message__container">
<div class="o-message__content">
<p class="o-message__content-main">
<span class="o-message__content-highlight">Oops.</span>
</p>
</div>
</div>
</div>
您可以用以下标记来添加更多关于消息的信息:
<div class="o-message o-message--alert o-message--success" data-o-component="o-message">
<div class="o-message__container">
<div class="o-message__content">
<p class="o-message__content-main">
<span class="o-message__content-highlight">Oops.</span>
+ <span class="o-message__content-detail">
+ Something went wrong!
+ The quick brown fox did not jump over the lazy dogs.
+ </span>
</p>
</div>
</div>
</div>
您也可以添加动作, 例如您的消息的按钮和/ 或链接 :
<div class="o-message o-message--alert o-message--success" data-o-component="o-message">
<div class="o-message__container">
<div class="o-message__content">
<p class="o-message__content-main">
<span class="o-message__content-highlight">Oops.</span>
<span class="o-message__content-detail">
Something went wrong!
The quick brown fox did not jump over the lazy dogs.
</span>
</p>
+ <div class="o-message__actions">
+ <a href="#" class="o-message__actions__primary">Button</a>
+ <a href="#" class="o-message__actions__secondary">Text link</a>
+ </div>
</div>
</div>
</div>
如果您已经应用 o-message--inner 修改信件时,您可以添加额外的,完全可选的内容 :
-<div class="o-message o-message--alert o-message--error" data-o-component="o-message">
+<div class="o-message o-message--alert o-message--inner o-message--error" data-o-component="o-message">
<div class="o-message__container">
<div class="o-message__content">
<p class="o-message__content-main">
<span class="o-message__content-highlight">Oops.</span>
<span class="o-message__content-detail">
Something went wrong!
The quick brown fox did not jump over the lazy dogs.
</span>
</p>
+ <p class="o-message__content-additional">
+ Did you know that that sentence uses all of the letters in the alphabet at least once?
+ </p>
<div class="o-message__actions">
<a href="#" class="o-message__actions__primary">Button</a>
<a href="#" class="o-message__actions__secondary">Text link</a>
</div>
</div>
</div>
</div>
对于任何信件,您可以通过使用此标记来突出段落内的任何部分副本 :
<div
class="o-message o-message--alert o-message--success"
data-o-component="o-message"
>
<div class="o-message__container">
<div class="o-message__content">
<p class="o-message__content-main">
The quick brown fox did
<span class="o-message__content-highlight">not</span> jump over the lazy
dogs.
</p>
</div>
</div>
</div>
萨斯 用户可能创建带有突出显示颜色的自定义消息。 这有助于突出信息中的关键词. 对信件副本应用突出显示颜色使用类 o-message__content-highlight-color。 。 。 .
<div
class="o-message o-message--alert o-message--success"
data-o-component="o-message"
>
<div class="o-message__container">
<div class="o-message__content">
<p class="o-message__content-main">
<span class="o-message__content-highlight">
Hurray<span class="o-message__content-highlight-color">thing</span
>happened
</span>
The quick brown fox jumped over the lazy dogs!
</p>
</div>
</div>
</div>
对于 只有动作信息,可以将文本集中到特定类别(.o-message__content--center-align:
<div class="o-message o-message--action o-message--inform" data-o-component="o-message">
<div class="o-message__container">
- <div class="o-message__content">
+ <div class="o-message__content o-message__content--center-align">
<p class="o-message__content-main">
This will be a call to action. Feedback, please.
</p>
</div>
</div>
</div>
Java 脚本
没有代码会自动运行, 除非你正在使用构建服务 。 您必须构建一个 o-message 物体或发射 O.DOMContent 失败事件,该事件 o-message 听着.
建筑业
如果您已声明设置您的消息, 请使用以下内容来保存您的消息 .
import Message from '@financial-times/o-message';
Message.init();
Message 默认情况下将关闭其元素。 通过声明设置信息,可以通过添加 data-o-message-close="false" 到消息元素.
如果你正在设置一个消息 没有现有的DOM元素, Message 将为您构建一个元素。 只要你的标记包含一个带有数据属性的元素 data-o-component=o-message中,您可以选择一个带有特定信息的信息 选项。 。 。 .
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:弦乐. 所有信件都需要状态,您必须提供与您所选择的信件类型相结合的状态,如您所列出的 信件类型content.detail:弦乐. 关于信息性质的细节.
不需要下列选项,所有选项都有默认值:
autoOpen:布尔. 是否自动打开信件,默认为true。 。 。 .parentElement:弦乐. 这决定了信件将附加的元素. 如果没有声明,它会自动附加到正文,或者带有数据属性的元素data-o-component=o-message,默认为null。 。 。 .content: 对象。 文本属性持有下列值:highlight:弦乐. 消息中突出显示的文字 。 默认为nulladditionalInfo:弦乐. 关于信件的更多信息 - 仅适用于带有inner设置。 默认为null
actions: 对象。 文本属性持有下列值:primary: 对象。 按钮属性持有以下值 :text:字符串. 按钮的文本值. 默认为nullurl:弦乐. 按钮链接到的 URL 。 默认为nullopenInNewWindow:布尔. 决定 是否可采取以下行动:target="_blank默认为false
secondary: 对象。 链接属性持有以下值 :text:字符串. 链接的文本值. 默认为nullurl:弦乐. 链接的 URL 链接 。 默认为nullopenInNewWindow:布尔. 决定 是否可采取以下行动:target="_blank默认为false
close:布尔. 是否显示关闭按钮 。 默认为true。 。 。 .
例如,用于配置 close 要显示的图标 :
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
});
萨斯
您可以调用 :
@include oMessage();
您还可以更具体地说明您想要通过使用一个 $opts 地图 :
@include oMessage(
$opts: (
'types': (
'action',
'notice',
),
'states': (
'inform',
'warning',
),
'layouts': (
'inner',
),
)
);
选项包括:
| 特性 | 说明 |
|---|---|
| 类型 | 要支持的信息(例如提醒、通知、行动)见 信件类型。 。 。 . |
| 状态 | 要支持的信息类型(例如“ 信息”、“ 警告”、“ 错误”) 参见 信件类型。 。 。 . |
| 版式 | 默认信件应该横跨页面,以便在内容内支持消息通过"内"选项. 见 信件类型。 。 。 . |
自定义信件
要创建新消息, 并有一个独特的外观调用 oMessageAddSate。混音可以接受三个参数:
name:贵州名. 用于修改类输出 o- message - {name} .opts: 状态选项地图。 笔记颜色可能是 o-颜色 颜色名称或十六进制值 :foreground-color: 消息文本所使用的颜色, 以及未给出亮点颜色的按钮 .background-color: 消息所使用的背景颜色.icon编号: 缩略语 图标名称,在提醒信件中显示。 只要求状态支持提醒消息类型 .button-type(可选) : 按钮的类型。 一个primary或者说secondary(违约)secondary) (中文(简体) ).highlight-color(可选) : 消息按钮使用亮点颜色 。 它也可以用来与 CSS 类一起突出消息副本o-message__content-highlight-color。 。 。 .
types: 清单 信件类型 您的状态支持一个或一个以上( y)alert, (中文(简体) ),notice, (中文(简体) ),action) (中文(简体) ).
// 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 |
| 已贬值 | 页:1 | 5.4 (中文(简体) ) | 迁移到 v5 |
| 已贬值 | 页:1 | 4.2 (中文(简体) ) | 迁移到 v4 |
| 已贬值 | 3个 | - 说吧 | 迁移到 v3 |
| 已贬值 | 2个 | 2.4 国家 | 迁移到 v2 |
| 已贬值 | 1个 | 1.0 国家 | 不详 |
联系人
如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 提出问题访问 #origami - 支持 或电子邮件 折纸支持。 。 。 .
许可证
本软件由金融时报根据以下规定出版: 麻省理工学院许可证。 。 。 .