多种视觉风格预设
单个数字可以通过多种方式显示 选择适合您页面个性的视觉风格 选择简单、干净的横向布局的线条 选择紧凑、径向轨距的圆圈 使其与扇形一起有趣 或添加动态气泡,随着线条风格的进展而移动 每个预设都提供了一种独特的方式来可视化进步,确保您的进度条始终是设计中不可或缺的一部分,而不是事后的想法。
- 四种不同的风格:从 Line、Circle、Fan 和 Line Bubble 预设中进行选择。
- 径向与线性:在狭窄空间中使用圆和风扇来表示紧凑的径向进度指示器。
- 动画泡泡:线条泡泡风格添加了一个移动端点,突出了当前值。
内容与价值定制
设置进度条很简单。在"内容"选项卡中,给它一个有意义的标题,例如"“项目资金"或"“客户满意度"。然后,设置 Value it,定义栏或圆圈应满的最重要的百分比。这个简单的两步过程就是您在页面上实时获取功能性动态进度指标所需的全部内容。
- 简单输入:只有两个字段:标题和值(百分比)。
- Live 预览:在您键入时,请参阅编辑器中的标题和百分比值更新。
- 动态显示:条形、圆圈或扇形填充会自动调整到您输入的确切百分比。
进度条造型
Style the Back Bar(空轨道或背景)和 Front Bar(彩色填充)独立设置,对于 Front Bar,选择其颜色并控制其宽度(或厚度),对于 Back Bar,设置自己的颜色和风格,这种分离可以让前进的进度在背景中清晰地突出,确保最大的可读性和视觉冲击力。
- 双杆造型:将前杆(进行)和后杆(轨道)风格化,颜色完全不同。
- 厚度控制:调整进度填充的宽度,对于线条和圆圈样式特别有用。
- 清晰的视觉层次结构:使用对比色使完成的部分立即变得明显。
标签与价值设计
Title 和 Value 造型部分来设计您的文本 设置 Title Color 并选择其 Typography 字体、大小和权重 Value(百分比数字)可以进行造型以进行强调,通常使其比标题更大或更大胆 这种集成方法保证了进度条的所有元素都像一个统一的、自定义设计的组件。
- 特定于文本的造型:用于造型标题标签和价值百分比的单独控件。
- 版式控制:使用版式面板对标题文本进行精确的字体控制。
- 强调数字:通常将值风格更加突出,吸引关键指标的注意力。
进度条常见问题
这与"Progressbars"(组)元素的主要区别是什么?
该元素适用于一个单一的、突出的进度指示器。它提供独特的形状预设(圆形、风扇、气泡),并被设计为一个焦点。 进度条元素 是用于创建多个条形的列表或组(如技能列表),所有条形都具有类似的线性样式。
当页面加载时,条形/圆圈会动画化吗?
是的,通常。为了吸引访问者,当元素出现在页面上时,进度填充(前栏)应从 0% 动画化到您的设定值,从而创建平滑、动态的效果。
我可以使用 Circle 样式来显示满分 100 分吗?
Absolutely。Circle(和Fan)风格非常适合这一点。将您的值设置为分数(例如,85%为85)。元素将相应地填充径向弧,创建清晰的规范或评级可视化。
Line泡泡式中的「泡泡」是可以自订的吗?
Yes。有一个气泡颜色和气泡位置设置,你可以改变气泡的颜色,并调整它沿着轨道相对于填充的终点的位置。
