Statbar

Statbar元素在所有三个构建器中都可用。内容构建器，页眉构建器和页脚构建器。元素的目的是以一种吸引人的方式显示统计信息。

元素分解

Statbar元素由许多子元素组成，这些子元素致力于实现预期的效果。这个标记的工作原理如下:

• 容器(.x-statbar）

• 栏(.x-statbar-bar）

• 标签(.x-statbar-label）

可用的控件

在本节中，我们将浏览每个控件组，并特别注意任何独特的控件或注意事项。

Statbar

在初始的Statbar控件分组中，

设置Box以它的一些自定义控件而著名:

的方向select控件有四个选项，“上”、“下”、“左”和“右”，这指定了工具条在激活时展开的方式。以下是上述每种设置的工作顺序:

此外,抵消触发控件是另一个需要注意的自定义控件，因为它决定了当工具条激活并出现动画时，用户应该向屏幕下方滚动多远。例如，如果您将其设置为“90%”，那么当该栏距离浏览器窗口中屏幕顶部的距离为90%时，该栏将被触发。如果它被设置为“10%”，它将在距离浏览器窗口顶部10%时触发。所以请记住，较大的百分比将更快地触发活动状态，而较小的数字将花更长的时间到达视口的顶部。

之后，你会发现传统的控件，如基本设置，空白，填充，边框，阴影等。

保证金

使用此选项可设置状态栏的空白。您可以更改状态栏的所有方面的设置或单独修改它们。

填充

使用此选项可设置Statbar的填充。您可以更改状态栏的所有方面的设置或单独修改它们。

边境

使用此选项可设置Statbar的边框。您可以设置风格，宽度而且颜色边界的每一面或每一面。

边界半径

使用此选项可设置Statbar的边界半径。你可以设置曲线的所有边或单独设置它们。

盒阴影

您可以使用框阴影控制组在状态栏上设置阴影。

• x-使用此选项在状态栏中设置阴影的X偏移量。
• y-使用此选项在状态栏中设置阴影的Y偏移量。
• 模糊-使用此选项在状态栏中设置模糊效果的强度。
• 传播&位置-使用这个选项来设置项目部分阴影的扩散量，并决定你想让阴影位于状态栏的内部还是外部。
• 颜色-使用此选项设置状态栏阴影的颜色。

酒吧

对于本节，唯一要注意的自定义控件是控件分组开头的“栏设置”框中的“长度”控件。这将决定外部包装内的条的长度。你也可以在这里设置内部条的背景颜色。

之后，你会发现边界半径和框阴影控制样式的内部条适当。例如，您可能希望使条的边界半径与外部容器的边界半径相匹配，或者如果容器有边界，则偏移一点。您还可以使用框阴影控件来创建更多的深度。

边界半径

使用此选项设置酒吧的边界半径。你可以设置曲线的所有边或单独设置它们。

盒阴影

您可以使用框阴影控制组在工具条上设置阴影。

• x-使用此选项设置阴影在条中的X偏移量。
• y-使用此选项设置阴影在条中的Y偏移量。
• 模糊-使用这个选项来设置模糊效果的强度。
• 传播&位置-使用这个选项来设置物品部分阴影的扩散量，并决定你想让阴影位于条内还是条外。
• 颜色-使用此选项设置条形阴影的颜色。

标签

为标签对照组，标签设置box中有一些需要我们注意的控件，它们允许我们非常显著地配置我们的Statbar:

首先，如果需要，我们可以选择完全关闭标签。这可以是一个很好的方法来使用动画条效果作为装饰华丽代替。

接下来，我们可以选择使用自定义文本，它将替换默认情况下显示在标签内部的条长度的百分比。单击此复选框将显示一个输入，您可以在其中放置自定义标签。

我们也可以选择总是显示如果我们想让标签始终可见。默认情况下，标签是隐藏的，当你向下滚动屏幕时，它将淡出以匹配栏动画;然而，你可能希望它一直存在。如果是这种情况，您可以选择此选项以确保它不会动画。

下一个控件是我们的证明选择，它将标签相对于Statbar中的栏进行定位。这里的选项是开始、居中和结束．以下是这些设置的一些截图:

再次注意，标签是相对于Statbar元素内的栏而不是Statbar本身定位的。另外，请记住，根据Statbar进入的基本方向，这些位置的输出都有一点不同。

除此之外，我们还有标签的尺寸＆位置控制框:

在这里，您可以为您的标签设置固定的宽度或高度(例如，如果您有一个条形100 px如果你想让标签填充相同的空间，你可以给你的标签一个100 px宽度和高度)。我们也可以用翻译控件来偏移标签在栏中的位置。例如，如果您想让您的标签显示为“浮动”在栏的上方，并在栏的末端水平居中，您可以这样做50％为平移X轴而且-100%为平移Y轴，会得到以下外观:

百分比值总是相对于标签的大小，因为我们使用的是translate，所以这就是为什么向右移动50%，使它在栏尾居中。我们还可以使用诸如px或新兴市场，甚至混合％价值观得到创造性的方法。例如，我们可以将标签设置为条的“Start”，然后偏移它-0.5 em在X轴上-50%在Y轴上创建一个轻微偏移看酒吧的开始。与此同时，打开“Always Visible”选项，你就可以创建一个很酷的偏移标签，它的位置总是完美的，因为它是相对于栏本身的大小和位置的:

使用这些值看看你能得到什么，有无数的可能性!之后，你会发现填充、边框、阴影、文本等传统控件。

填充

使用此选项设置标签的填充。您可以更改标签所有侧面的设置或单独修改它们。

边境

使用此选项可设置标签的边框。您可以设置风格，宽度而且颜色边界的每一面或每一面。

边界半径

使用此选项可设置标签的边界半径。你可以设置曲线的所有边或单独设置它们。

盒阴影

您可以使用框阴影控制组在标签上设置阴影。

• x-使用此选项设置标签中阴影的X偏移量。
• y-使用此选项设置标签中阴影的Y偏移量。
• 模糊-使用此选项在标签中设置模糊效果的强度。
• 传播&位置-使用此选项设置项目部分阴影的扩散量，并决定阴影是位于标签内部还是外部。
• 颜色-使用此选项设置标签阴影的颜色。

文本格式

您可以使用这个控制组来设置标签文本的格式。

• 字体—使用此选项设置标签文本的字体。
• 字体粗细-使用此选项设置字体的重量或厚度。根据字体的选择以及所选字体是否支持权重，这些值可能有所不同。
• 字体大小-使用此选项设置字体大小。
• 字符间距—设置字母之间的空格。
• 行高-使用此选项设置每行之间的间距。

文本样式

您可以使用这个控制组来设置标签文本的样式。

• 字体样式-使用这个选项来决定你是否想要一个正常的或斜体风格。
• 文本对齐-使用此选项设置文本的对齐方式。可能的值是左，中心，正确的,证明．
• 文本装饰—使用此选项强制执行下划线或linethrough风格。
• 文本转换—使用此选项设置文本的大小写。可用的选项有大写字母，驼峰式大小写,小写字母．
• 文本颜色-使用此选项设置文本的颜色。

文本的影子

文本阴影控制组包含为标签文本设置文本阴影的设置。

• x-使用此选项设置文本阴影的X偏移量。
• y-使用此选项设置文本阴影的Y偏移量。
• 模糊-使用此选项设置文本阴影的模糊效果的强度。
• 颜色-使用此选项设置文本阴影的颜色。

定制

自定义面板包含各种功能，允许你进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置一个HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的样式控制，特别是对嵌套标记。点击在这里有关此功能的更详细信息，如使用el美元动态定位基标签，等等。
• 在断点时隐藏 - - - - - -当需要改变设计时，在不同的屏幕尺寸隐藏元素。点击在这里更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素(例如:”如果特色图像设置…”)．点击在这里更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如。data-info = " 123 ")．这在与各种脚本和库集成时特别有用。

演示

要查看Statbar元素的现场演示，请单击在这里．

总结

现在，您已经了解了Statbar元素以及如何在整个设计过程中使用它。