Semantic-UI Card Variations 流体卡变体

Semantic-UI是一项流行的CSS框架，它提供了许多易于使用的UI组件，其中之一是Card组件。Card是一个可配置的面板，可以用于呈现各种不同类型的数据，并且可以使用各种不同的修饰符和变体来自定义其外观和行为。

本文将介绍Semantic-UI Card组件的不同变体以及如何在您的应用程序中使用它们。

流体卡

流体卡是一种可滚动的卡片，可以用于呈现长列表或需要在小尺寸屏幕上显示的内容。流体卡可以通过将fluid属性设置为true来创建。

<div class="ui card fluid">
  <div class="content">
    <div class="header">流体卡变体</div>
      <div class="description">
        这是一个可以滚动的卡片，它可以用于呈现长列表或需要在小屏幕上显示的内容。
      </div>
    </div>
  <div class="extra content">
    <span class="right floated">创建于：2021年11月1日</span>
    <span><i class="user icon"></i>管理员</span>
  </div>
</div>

上面的代码将创建一个流体卡片，它具有一个内容区域和一个额外的内容区域。

反色卡

反色卡是指卡片的颜色与主题不同。 反色卡可以通过将color属性设置为不同的颜色来创建。

<div class="ui card red">
  <div class="content">
    <div class="header">反色卡变体</div>
      <div class="description">
        这是一个反色卡片，它具有一个红色的背景和白色的文本。
      </div>
    </div>
  <div class="extra content">
    <span class="right floated">创建于：2021年11月1日</span>
    <span><i class="user icon"></i>管理员</span>
  </div>
</div>

上面的代码将创建一个红色的反色卡片。

卡片组

卡片组是指将多个卡片组合在一起的容器。卡片组可以通过在ui类之后添加cards类来创建。

<div class="ui cards">
  <div class="ui card">
    <div class="content">
      <div class="header">卡1</div>
        <div class="description">
          这是一个普通卡片。
        </div>
      </div>
    <div class="extra content">
      <span class="right floated">创建于：2021年11月1日</span>
      <span><i class="user icon"></i>管理员</span>
    </div>
  </div>
  <div class="ui card">
    <div class="content">
      <div class="header">卡2</div>
        <div class="description">
          这是另一个普通卡片。
        </div>
      </div>
    <div class="extra content">
      <span class="right floated">创建于：2021年11月1日</span>
      <span><i class="user icon"></i>管理员</span>
    </div>
  </div>
</div>

上面的代码将创建一个包含两个普通卡片的卡片组。

尺寸变体

卡片可以通过将size属性设置为不同的尺寸来改变大小。 默认情况下，卡片的大小是中等尺寸的，但是可以通过将size属性设置为以下值之一来使用不同的尺寸：

• mini
• tiny
• small
• large
• big
• huge
• massive

例如，下面的代码将创建一个大尺寸的卡片：

<div class="ui card big">
  <div class="content">
    <div class="header">大尺寸卡变体</div>
      <div class="description">
        这是一个大尺寸卡片。
      </div>
    </div>
  <div class="extra content">
    <span class="right floated">创建于：2021年11月1日</span>
    <span><i class="user icon"></i>管理员</span>
  </div>
</div>

以上就是Semantic-UI Card组件的一些常见变体，您可以使用这些变体来自定义卡片的外观和行为，以满足您的需要。