Foundation - Media SASS 参考

描述

您可以使用 SASS 参考更改组件的样式。

下表列出了项目设置文件中的 SASS 变量，这些变量可自定义此组件的默认样式。

Sr.No.	名称 &描述	类型	默认值
1	$orbit-bullet-background 它表示轨道项目符号的默认颜色。	颜色	$medium-gray
2	$orbit-bullet-background-active 它表示轨道项目符号的默认活动颜色。	颜色	$dark-gray
3	$orbit-bullet-diameter 它表示轨道子弹的默认直径。	Number	1.2rem
4	$orbit-bullet-margin 它表示轨道子弹之间的默认边距。	Number	0.1rem
5	$orbit-bullet-margin-top 它表示轨道项目符号与幻灯片区域的默认距离。	Number	0.8rem
6	$orbit-bullet-margin-bottom 它表示项目符号与其下方内容的默认底部边距。	Number	0.8rem
7	$orbit-caption-background 它表示轨道标题的默认背景颜色。	颜色	rgba($black, 0.5)
8	$orbit-caption-padding 它表示轨道标题的默认填充。	数字	1rem
9	$orbit-control-background-hover 它表示悬停时控件的默认背景颜色。	颜色	rgba($black, 0.5)
10	$orbit-control-padding 它表示轨道控件的默认填充。	数字	1rem
11	$orbit-control-zindex 它表示轨道控件的默认 z 索引。	数字	10

要构建此组件的最终 CSS 输出，可以使用以下 mixin。要使用 Foundation 组件构建自己的类结构，您可以自己使用 mixin。

@include orbit-wrapper;

它将样式添加到 orbit 的包装器。

@include orbit-container;

它将样式添加到内部 orbit 幻灯片容器。它用于类 .orbit-container。

@include orbit-slide;

它将样式添加到滑块的单独幻灯片中。它用于类 .orbit-slide。

@include orbit-caption;

它为幻灯片标题添加样式。

@include orbit-control;

它为下一个和上一个按钮添加基本样式。在默认 CSS 中，样式分为 .orbit-next 和 .orbit-previous 类。

@include orbit-previous;

它为上一个按钮添加样式。这些用于类 .orbit-previous。

@include orbit-next;

它将样式添加到下一个按钮。这些用于类 .orbit-next。

@include orbit-bullets;

它将样式添加到轨道项目符号的容器中，并将样式添加到上一个按钮，这些用于类 .orbit-bullets。