标注

标注将 Foundation 5 中的面板和警报组合成一个通用的容器组件。

基础知识

标注只是一个应用了 .callout 类的元素。您可以在其中放置任何类型的内容。

<div class="callout">
  <h5>This is a callout.</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
  <a href="#">It's dangerous to go alone, take this.</a>
</div>

这是一个标注。

它有一种易于覆盖的视觉样式，并且经过适当的抑制。

独自一人很危险，带上这个。

着色

可以使用 .secondary、.primary、.success、.warning 或 .alert 类对标注进行着色。标注内的链接将被着色以匹配标注的颜色。

观看视频中的此部分

<div class="callout secondary">
  <h5>This is a secondary callout</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
  <a href="#">It's dangerous to go alone, take this.</a>
</div>

这是一个次要标注

它有一种易于覆盖的视觉样式，并且经过适当的抑制。

独自一人很危险，带上这个。

这是一个主要标注

它有一种易于覆盖的视觉样式，并且经过适当的抑制。

独自一人很危险，带上这个。

这是一个成功标注

它有一种易于覆盖的视觉样式，并且经过适当的抑制。

独自一人很危险，带上这个。

这是一个警告标注

它有一种易于覆盖的视觉样式，并且经过适当的抑制。

独自一人很危险，带上这个。

这是一个警报标注

它有一种易于覆盖的视觉样式，并且经过适当的抑制。

独自一人很危险，带上这个。

尺寸调整

可以使用 .small 和 .large 类来调整标注的大小。这些将分别影响内容周围的填充变小和变大。

<div class="callout small">
  <h5>This is a small callout</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
  <a href="#">It's dangerous to go alone, take this.</a>
</div>

<div class="callout large">
  <h5>This is a large callout</h5>
  <p>It has an easy to override visual style, and is appropriately subdued.</p>
  <a href="#">It's dangerous to go alone, take this.</a>
</div>

这是一个小标注

它有一种易于覆盖的视觉样式，并且经过适当的抑制。

独自一人很危险，带上这个。

这是一个大标注

它有一种易于覆盖的视觉样式，并且经过适当的抑制。

独自一人很危险，带上这个。

使其可关闭

将标注与关闭按钮组件和 data-closable 属性配对以创建可关闭的警报框。

观看视频中的此部分

任何元素都可以用作关闭触发器，而不仅仅是关闭按钮。将属性 data-close 添加到标注内的任何元素都会将其变为关闭触发器。

使用 data-closable 属性时，您可以选择将Motion UI类添加到属性中以更改关闭动画。如果未添加任何类，则插件默认为 jQuery 的 .fadeOut() 函数。

<div class="callout alert" data-closable>
  <h5>This is Important!</h5>
  <p>But when you're done reading it, click the close button in the corner to dismiss this alert.</p>
  <p>I'm using the default <code>data-closable</code> parameters, and simply fade out.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div class="callout success" data-closable="slide-out-right">
  <h5>This a friendly message.</h5>
  <p>And when you're done with me, I can be closed using a Motion UI animation.</p>
  <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
    <span aria-hidden="true">&times;</span>
  </button>
</div>

这很重要！

但是，当您阅读完后，单击角落的关闭按钮以关闭此警报。

我正在使用默认的 data-closable 参数，并且只是淡出。

这是一条友好消息。

当您完成我之后，可以使用 Motion UI 动画关闭我。

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量来自定义此组件的默认样式。

名称	类型	默认值	描述
`$callout-background`	颜色	`$white`	默认背景颜色。
`$callout-background-fade`	数字	`85%`	标注背景的默认淡入淡出值。
`$callout-border`	列表	`1px solid rgba($black, 0.25)`	标注的默认边框样式。
`$callout-margin`	数字	`0 0 1rem 0`	标注的默认底部边距。
`$callout-sizes`	映射	`small: 0.5rem default: 1rem large: 3rem`	标注填充的尺寸。
`$callout-font-color`	颜色	`$body-font-color`	标注的默认字体颜色。
`$callout-font-color-alt`	颜色	`$body-background`	如果标注具有深色背景，则为标注的默认字体颜色。
`$callout-radius`	颜色	`$global-radius`	标注的默认边框半径。
`$callout-link-tint`	数字或布尔值	`30%`	为彩色面板中使用的链接着色的量。设置为 `false` 以禁用此功能。

混合宏

我们使用这些混合宏来构建此组件的最终 CSS 输出。您可以自己使用混合宏从我们的组件中构建自己的类结构。

callout-base

@include callout-base;

添加标注的基本样式，包括填充和边距。

callout-style

@include callout-style($color);

使用单一颜色作为基线为标注生成快速样式。

参数	类型	默认值	描述
`$color`	颜色	`$callout-background`	要使用的颜色。

callout

@include callout($color);

添加标注的样式。

参数	类型	默认值	描述
`$color`	颜色	`$callout-background`	要使用的颜色。