TailUno Component

Appearance

Steps 步骤条 ​

  • 支持水平和垂直两种布局方式
  • 可以显示步骤标题和描述文本
  • 支持自定义当前步骤的样式
  • 响应式设计，适配不同屏幕尺寸

行内tailwind/unocss用法 ​

使用行内的tailwind/unocss样式构建，复制组件的代码即可使用

1
2
3
4
1
步骤1
这是第一步的描述
2
步骤2
这是第二步的描述
3
步骤3
这是第三步的描述
4
步骤4
这是第四步的描述
1
步骤1
这是第一步的描述
2
步骤2
这是第二步的描述
3
步骤3
这是第三步的描述
4
步骤4
这是第四步的描述
1
步骤1
这是第一步的描述
2
步骤2
这是第二步的描述
3
步骤3
这是第三步的描述
查看代码
html
<!-- 基础步骤条 -->
<div class="flex w-full items-center">
  <div class="flex flex-1 items-center">
    <div class="flex size-8 items-center justify-center rounded-full bg-primary text-white">
      1
    </div>
    <div class="mx-2 h-[2px] flex-1 bg-primary" />
  </div>
  <div class="flex flex-1 items-center">
    <div class="flex size-8 items-center justify-center rounded-full bg-gray-200 text-gray-600">
      2
    </div>
    <div class="mx-2 h-[2px] flex-1 bg-gray-200" />
  </div>
  <div class="flex flex-1 items-center">
    <div class="flex size-8 items-center justify-center rounded-full bg-gray-200 text-gray-600">
      3
    </div>
    <div class="mx-2 h-[2px] flex-1 bg-gray-200" />
  </div>
  <div class="flex size-8 items-center justify-center rounded-full bg-gray-200 text-gray-600">
    4
  </div>
</div>

<!-- 图标顶部带标题的步骤条 -->
<div class="mt-8 flex w-full items-center">
  <div class="relative flex flex-1 flex-col gap-2">
    <div class="flex w-full items-center">
      <div class="flex size-8 items-center justify-center rounded-full bg-primary text-white">
        1
      </div>
      <div class="mx-2 h-[2px] flex-1 bg-primary" />
    </div>
    <div class="mb-2 font-medium text-primary">
      步骤1
      <div class="mt-2 text-sm text-gray-400">
        这是第一步的描述
      </div>
    </div>
  </div>
  <div class="relative flex flex-1 flex-col gap-2">
    <div class="flex w-full items-center">
      <div class="flex size-8 items-center justify-center rounded-full bg-gray-200 text-gray-600">
        2
      </div>
      <div class="mx-2 h-[2px] flex-1 bg-gray-200" />
    </div>
    <div class="mb-2 font-medium text-gray-600">
      步骤2
      <div class="mt-2 text-sm text-gray-400">
        这是第二步的描述
      </div>
    </div>
  </div>
  <div class="relative flex flex-1 flex-col gap-2">
    <div class="flex w-full items-center">
      <div class="flex size-8 items-center justify-center rounded-full bg-gray-200 text-gray-600">
        3
      </div>
      <div class="mx-2 h-[2px] flex-1 bg-gray-200" />
    </div>
    <div class="mb-2 font-medium text-gray-600">
      步骤3
      <div class="mt-2 text-sm text-gray-400">
        这是第三步的描述
      </div>
    </div>
  </div>
  <div class="relative flex flex-1 flex-col gap-2">
    <div class="flex w-full items-center">
      <div class="flex size-8 items-center justify-center rounded-full bg-gray-200 text-gray-600">
        4
      </div>
    </div>
    <div class="mb-2 font-medium text-gray-600">
      步骤4

      <div class="mt-2 text-sm text-gray-400">
        这是第四步的描述
      </div>
    </div>
  </div>
</div>

<!-- 带标题和描述的步骤条 -->
<div class="mt-8 flex w-full items-start">
  <div class="flex flex-1 flex-col items-center">
    <div class="mb-2 flex w-full items-center">
      <div class="h-[2px] flex-1 bg-transparent" />
      <div class="mx-2 flex size-8 items-center justify-center rounded-full bg-primary text-white">
        1
      </div>
      <div class="h-[2px] flex-1 bg-primary" />
    </div>
    <div class="font-medium text-primary">
      步骤1
    </div>
    <div class="text-sm text-gray-400">
      这是第一步的描述
    </div>
  </div>
  <div class="flex flex-1 flex-col items-center">
    <div class="mb-2 flex w-full items-center">
      <div class="h-[2px] flex-1 bg-gray-200" />
      <div class="mx-2 flex size-8 items-center justify-center rounded-full bg-gray-200 text-gray-600">
        2
      </div>
      <div class="h-[2px] flex-1 bg-gray-200" />
    </div>
    <div class="font-medium text-gray-600">
      步骤2
    </div>
    <div class="text-sm text-gray-400">
      这是第二步的描述
    </div>
  </div>
  <div class="flex flex-1 flex-col items-center">
    <div class="mb-2 flex w-full items-center">
      <div class="h-[2px] flex-1 bg-gray-200" />
      <div class="mx-2 flex size-8 items-center justify-center rounded-full bg-gray-200 text-gray-600">
        3
      </div>
      <div class="h-[2px] flex-1 bg-gray-200" />
    </div>
    <div class="font-medium text-gray-600">
      步骤3
    </div>
    <div class="text-sm text-gray-400">
      这是第三步的描述
    </div>
  </div>
  <div class="flex flex-1 flex-col items-center">
    <div class="mb-2 flex w-full items-center">
      <div class="h-[2px] flex-1 bg-gray-200" />
      <div class="mx-2 flex size-8 items-center justify-center rounded-full bg-gray-200 text-gray-600">
        4
      </div>
      <div class="h-[2px] flex-1 bg-transparent" />
    </div>
    <div class="font-medium text-gray-600">
      步骤4
    </div>
    <div class="text-sm text-gray-400">
      这是第四步的描述
    </div>
  </div>
</div>

<!-- 垂直步骤条 -->
<div class="mt-8 flex flex-col gap-4">
  <div class="flex items-start gap-4">
    <div class="flex size-8 items-center justify-center rounded-full bg-primary text-white">
      1
    </div>
    <div class="flex flex-col">
      <div class="font-medium text-primary">
        步骤1
      </div>
      <div class="text-sm text-gray-400">
        这是第一步的描述
      </div>
    </div>
  </div>
  <div class="flex items-start gap-4">
    <div class="flex size-8 items-center justify-center rounded-full bg-gray-200 text-gray-600">
      2
    </div>
    <div class="flex flex-col">
      <div class="font-medium text-gray-600">
        步骤2
      </div>
      <div class="text-sm text-gray-400">
        这是第二步的描述
      </div>
    </div>
  </div>
  <div class="flex items-start gap-4">
    <div class="flex size-8 items-center justify-center rounded-full bg-gray-200 text-gray-600">
      3
    </div>
    <div class="flex flex-col">
      <div class="font-medium text-gray-600">
        步骤3
      </div>
      <div class="text-sm text-gray-400">
        这是第三步的描述
      </div>
    </div>
  </div>
</div>