Statbar

在本文中,我们将解释如何使用Statbar元素。

  1. 元素分解
  2. 可用的控件
  3. 酒吧
  4. 标签
  5. 定制
  6. 演示
  7. 总结

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

元素分解

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

  • 容器(.x-statbar

  • 栏(.x-statbar-bar

  • 标签(.x-statbar-label

可用的控件

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

Statbar

在初始的Statbar控件分组中,

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

Statbar设置

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

Statbar例子 Statbar例子 Statbar例子 Statbar例子

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

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

保证金

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

填充

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

边境

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

边界半径

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

盒阴影

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

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

酒吧

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

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

边界半径

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

盒阴影

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

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

标签

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

Statbar标签

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

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

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

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

Statbar例子 Statbar例子 Statbar例子

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

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

Statbar标签尺寸和位置

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

Statbar例子

百分比值总是相对于标签的大小,因为我们使用的是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元素以及如何在整个设计过程中使用它。

看到不准确的地方了吗?让我们知道

Baidu
map