评级

在本文中,我们将讨论可用于添加星级评级或自定义评论的Rating Element。

  1. 设置
  2. 模式设置
  3. 图形设置
  4. 设计设置
  5. 文本
  6. 定制
  7. 演示
  8. 总结

评级元素在页面上添加星级或自定义评论。要添加评级元素,只需搜索“Rating”并拖动“Rating”到画布。

添加评级元素

设置

评分元素由空星、半满星和满星部分组成,可以是图标或图像。Rating Element还包含一个可选的文本部分,用于显示评分的数字表示形式或任何其他想要添加的自定义文本。

评级元素演示1

“评级元素”选项中的“设置”控件组包含一组用于初始化评级元素的选项。下面是“安装程序”控制组中每个选项的详细说明。

评级元素设置
  • 基本字体大小-使用此选项可以使评级元素的星星和文本部分变小或变大。
  • 评级—设置实际分级。例如,如果你加上3.5由于这个选项的价值,将会有三颗满星和半满星作为评级。
  • 最小和最大刻度-使用此选项设置评级的最小和最大星星。例如,如果您将最小刻度设置为1,最大刻度设置为5,那么您将拥有一个五星评级系统,可以从1星评级到5星评级。
  • 宽度和最大宽度-使用这些选项来设置评级元素的宽度和最大宽度。
  • 背景-使用此选项设置评级元素的背景颜色。
  • 选项
    • 空的图标-使用此选项决定是否显示空星星。如果禁用,它将只显示满星和半满星。
    • 圆的整体-使用此选项舍入任何值添加到评级选择。最终的结果将是一个没有半全星的评级系统。例如,如果将“评级”选项值设置为3.5,它会四舍五入到4评级元素演示2

模式设置

属性时,模式控制组将显示添加模式选项。设置对照组。Schema是代码结构化数据,它为谷歌搜索引擎提供额外的信息,以帮助它理解您的页面的内容,在这种情况下,评级元素。

Schema控制组提供了一些选项来帮助您向谷歌描述评级元素。结构化数据包含各种主题,您可以了解更多关于模式代码的信息在这里

评价元素模式
  • 类型-此选项增加类型属性和您添加到选项中的任何值作为值。元素添加审查自动输入,这就是为什么你需要在这里为你的组织或业务添加一个类型,而不是审查
  • 物品的名称-使用此选项添加组织或企业的名称。
  • 项电话—使用此选项可添加组织或企业的电话号码。
  • 项目地址-使用此选项添加组织或企业的邮政地址。
  • 项目图片—使用此选项为您的组织或业务添加映像。
  • 作者姓名-使用此选项添加作者名称,该名称将被添加到审查模式类型的作者财产。
  • 作者审查-使用此选项为评级元素添加评论。的值将使用此选项的值reviewBody的财产审查模式类型。

图形设置

Rating元素的图形部分是空状态、半满状态和满状态的图标。图形部分的默认图标是星形图标,但您可以将图标更改为您想要的任何图标,或者使用自定义图像来代替图形部分的图标。

评级元素图
  • 类型-使用此选项来决定你是否想要评级元素的图形部分是图标还是自定义图像。
  • 完整的—使用此选项在完全模式下选择图形部分的图标或自定义图像。
  • 半满的-使用此选项可在半满模式下选择图形部分的图标或自定义图像。
  • —此选项用于在空模式下选择图形部分的图标或自定义图像。
  • 间距和颜色—设置图标的间距和颜色。属性时,此选项将显示图标图形类型。
  • 间距和最大宽度-使用此选项可设置用于代替图标的每个自定义图像之间的间距和每个图像的最大宽度。属性时,此选项将显示图像图形类型。

设计设置

设计设置由控制组组成,用于设置评分元素的空白、填充、边框和其他与设计相关的方面。

评级元素Flexbox边际

保证金

使用此选项可设置评级元素的边距。您可以更改评级元素的所有方面的设置或单独修改它们。

填充

使用此选项设置评级元素的填充。您可以更改评级元素的所有方面的设置或单独修改它们。

评分元素填充边框

边境

使用此选项可设置Rating元素的边框。您可以设置风格宽度而且颜色边境线的所有边或每边的边境线。

边界半径

使用此选项为Rating元素设置边界半径。你可以在所有边都设置曲线,也可以单独设置。

评定元素边界半径框阴影

盒阴影

您可以使用框阴影控制组在评级元素上设置阴影。

  • x-使用此选项设置阴影的X偏移在评级元素。
  • y-使用此选项设置奖状阴影的Y偏移量。
  • 模糊-使用此选项在评分元素中设置模糊效果的强度。
  • 传播和定位-使用此选项设置项目部分阴影的扩散量,并决定您想要阴影位于Rating元素的内部还是外部。
  • 颜色-使用此选项设置评级元素阴影的颜色。

文本

文本设置由控制组组成,用于设置评分元素的文本部分的特征。

内容

属性,此选项将显示是否启用显示文本选择。使用此选项,您可以在评级元素的星号部分之后添加自定义文本。默认文本使用动态内容要显示的功能{{rating}} / {{max}}评级控件中添加的值评级选项,马克斯检索添加的值马克斯规模选择。

评级元素演示3

您可以随心所欲地更改文本,例如,如果将值更改为{{max}}的{{rating}}最终的结果是这样的:

评级元素演示3

文本Flexbox

Text Flexbox部分包含使用CSS Flexbox显示设置Rating Element图形和文本部分的位置的控件。

评级元素文本Flexbox
  • 孩子的位置:使用此选项来决定评分元素的项目应该垂直(列)还是水平(行)布局。
  • 反向:启用此选项将导致评级元素以相反的方式铺设。
  • 包装:当较小的设备中没有足够的空间时,启用此选项来包装评级元素。
  • 水平对齐:使用此选项水平布局评级元素。
  • 垂直对齐:使用此选项可以垂直布局评级元素。

点击在这里有关Flexbox显示器的更多信息。

文本保证金

使用此选项可设置“评级元素”文本部分的边距。您可以更改文本所有侧面的设置,也可以单独修改它们。

元素文本边距

文本格式

您可以使用此控制组来设置Rating Element中文本的格式。

评级元素文本格式
  • 字体-使用此选项设置评级元素文本的字体。
  • 字体粗细-使用此选项设置字体的粗细。这些值可能会根据所选字体以及所选字体是否支持权重而有所不同。
  • 字体大小—设置字体大小。
  • 字符间距—设置字母间距。
  • 行高-使用此选项设置每行之间的间距。
  • 字体样式-使用此选项决定是否要有一个正常的斜体风格。
  • 文本对齐-使用此选项设置文本的对齐方式。可能的值为中心正确的,证明
  • 文本装饰—强制下划线linethrough风格。
  • 文本转换—使用该选项设置文本的大小写。可用的选项有大写字母驼峰式大小写,小写字母
  • 文本颜色-使用此选项设置文本的颜色。

文本的影子

文本阴影控制组包含为“评级元素”文本设置文本阴影的设置。

评价元素文本边距文本阴影
  • x-使用此选项设置文本阴影的X偏移量。
  • y—使用此选项设置文本阴影的Y偏移量。
  • 模糊-使用此选项设置文本阴影中的模糊效果的强度。
  • 颜色-使用此选项设置文本阴影的颜色。

定制

自定义窗格由各种功能组成,允许您进一步控制元素的样式和功能:

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

演示

要查看评级元素的现场演示,请单击在这里

总结

总之,我们已经讨论了评级元素。我们已经讨论过评级元素是在页面上添加评级和星级评论的简单工具,我们已经学习了如何改变它的内容和设计。最后,我们深入研究了Rating Element设置的细节。

看到不准确的东西了吗?让我们知道

Baidu
map