點燈坊

失くすものさえない今が強くなるチャンスよ

實作 Badge

Sam Xiao's Avatar 2021-03-25

在右上角帶有 Badge 顯示特別資訊亦為常見 Layout，可使用 absolute + relative 實現。

Version

Tailwind CSS 2.0.3

Badge

badge000

在圖片右上角顯示紅色 badge。

<template>
  <div class="w-1/3 mx-auto mt-4 relative">
    <img class="w-full" src="https://picsum.photos/300/200/?random=10">
    <div class="absolute -top-2 -right-2 bg-red-500 text-white w-6 h-6 rounded-full text-center z-10">2</div>
  </div>
</template>

第 2 行

<div class="w-1/3 mx-auto mt-4 relative">

設定父層 box style：

  • w-1/3：設定 box width
  • mx-auto：設定 box 水平置中
  • mt-4：設定 box 的 top margin
  • relative：設定使用 relative position

在 box 設定 relative 為關鍵，這使得 badge 的 absolute 將以 box 為坐標基準

第 3 行

<img class="w-full" src="https://picsum.photos/300/200/?random=10">

設定 box 內圖片 style：

  • w-full：圖片使用 box 所設定 width

第 4 行

<div class="absolute -top-2 -right-2 bg-red-500 text-white w-6 h-6 rounded-full text-center z-10">2</div>

設定 badge style：

  • absolute：設定 badge 使用 absolute position
  • -top-2：設定 badge 的 top 坐標
  • -right-2：設定 badge 的 right 坐標
  • bg-red-500：設定 badge 的背景顏色
  • text-white：設定 badge 的文字顏色
  • w-6：設定 badge 的 width
  • h-6：設定 badge 的 height
  • rounded-full：設定 badge 為圓形
  • text-center：設定 badge 內文字水平置中
  • z-10：使 badge 能浮在圖片上

在 badge 使用 absolute 為關鍵，這使得 badge 能設定 top 與 right 坐標

Conclusion

  • 透過 badge 使用 absolute，而父層 box 使用 relative，就能輕易實作出 badge

Reference

Tailwind CSS, Position

# TailwindCSS