使用 Tile 组件

概述

Tile 组件是一个多功能的、可重用的 UI 元素。它设计灵活且适应性强，能够执行用户界面中的各种功能。Tile 组件显示内容，充当可点击或可选择的元素，并包含一个图标。

它旨在将相关信息分组到灵活的容器中，可以包含文本、图像和/或一块颜色。Tile 组件的使用指南是高层次的，重点关注 Tile 的结构及其对网格的响应性。它不提供预定义的样式来控制内容，从而允许显示各种类型的内容。这种灵活性使得 Tile 适用于各种用例，例如显示功能亮点、提供导航选项或呈现数据摘要，包括信息、入门指南、操作指南等。

CSS 类定义

Tile 组件由以下类组成：

.tile: 这是 Tile 组件的基本类。它设置了 Tile 的基本外观和布局，包括其大小、内边距、背景颜色和边框半径。它还设置了一些默认样式，用于在 Tile 处于焦点状态时显示。
.tile-clickable 和 .tile-selectable: 这些是应用于基本 .tile 类的修饰符类。使用它们可以将 Tile 使其行为表现为可点击或可选择的元素。这些类会调整 Tile 的内边距、边框、外边距、字体属性和光标样式。它们还设置了悬停和焦点样式。
.tile-icon: 用于在 Tile 内部放置图标，并设置其颜色。它还包括 inactive 图标的样式。

如何使用 Tile 组件

要使用 Tile 组件，您需要在 HTML 元素中添加 .tile 类。如果希望 Tile 可点击或可选择，请同时添加 .tile-clickable 或 .tile-selectable 类。如果要包含图标，则在 Tile 中添加一个带有 .tile-icon 类的元素。

<div class="tile">
    <p>基本 Tile 内容</p>
</div>

<a class="tile tile-clickable">
    <p>可点击的 Tile 内容</p>
</a>

<a class="tile tile-selectable">
    <p>可选择的 Tile 内容</p>
</a>

使用 Tile 组件的示例

Note

当 Tile 不可点击时，必须使用 <div> 标签。仅当将 Tile 转换为可点击元素时，才应使用 <a> 标签。