Semantic-UI 文本加载器类型

Semantic-UI 是一种现代的 CSS 框架，它提供了许多 UI 组件，其中包括文本加载器类型。这些文本加载器类型可以用来在页面加载 HTML 内容时向用户传达进度信息。

介绍

Semantic-UI 的文本加载器类型包括四种类型：

• inverted：反色加载器
• active：活动加载器
• disabled：禁用加载器
• indeterminate：不确定加载器

这些加载器可以用于不同的场景，例如在数据加载期间向用户提供视觉反馈或将加载愈合在进度指示器中以表明进度。

用法

以下是一个示例代码片段，它演示了如何使用 Semantic-UI 的文本加载器类型：

<div class="ui inverted dimmer">
  <div class="ui text loader">Loading</div>
</div>

• ui inverted dimmer：在加载器的背景上设置反色模式
• ui text loader：添加文字加载器

该示例将创建一个反色模式的文本加载器类型的页面，文本内容为“Loading”。

API

反色加载器 inverted

反色加载器将加载器的背景设置为反色模式。要创建反色加载器，请使用以下代码：

<div class="ui inverted dimmer">
  <div class="ui loader">Loading</div>
</div>

活动加载器 active

活动加载器指示正在活动的进度，例如下载文件或执行操作。要创建活动加载器，请使用以下代码：

<div class="ui active inverted dimmer">
  <div class="ui text loader">Loading</div>
</div>

禁用加载器 disabled

禁用加载器将加载器设置为禁用状态。要创建禁用加载器，请使用以下代码：

<div class="ui disabled inverted dimmer">
  <div class="ui text loader">Loading</div>
</div>

不确定加载器 indeterminate

不确定加载器指示进度未知的进程，例如搜索数据。要创建不确定加载器，请使用以下代码：

<div class="ui indeterminate inverted dimmer">
  <div class="ui text loader">Loading</div>
</div>

结论

Semantic-UI 的文本加载器类型提供了多种选项，以便开发人员可以向用户提供即时反馈。如果您正在设计一个需要进度指示器的应用程序，则应考虑使用这些加载器。