CutestUI Ribbons Component

精美的丝带装饰组件，为您的UI增添亮点

组件介绍

CutestUI Ribbons 是一个美观的装饰性UI组件，可用于突出显示重要内容、标记特殊项目或添加视觉吸引力。该组件提供了多种样式、颜色和位置选项，可以轻松集成到各种项目中。

主要特性

  • 多种颜色变体（primary、success、warning、danger等）
  • 四个角落定位选项（上左、上右、下左、下右）
  • 尺寸调整（小、中、大）
  • 圆角和阴影效果
  • 动画效果（脉冲）
  • 渐变背景
  • 响应式设计
基本用法

要使用 CutestUI Ribbons 组件，您需要在HTML中添加相应的结构并引入CSS文件。

引入CSS

<link rel="stylesheet" href="path/to/ribbons.css">

HTML结构

<div class="ribbon ribbon-top-right ribbon-primary"> <div class="ribbon-content">New!</div> </div>
位置选项

丝带组件可以放置在容器的四个角落。

上右角
Top Right
<div class="ribbon ribbon-top-right ribbon-primary"> <div class="ribbon-content">Top Right</div> </div>
上左角
Top Left
<div class="ribbon ribbon-top-left ribbon-secondary"> <div class="ribbon-content">Top Left</div> </div>
下右角
Bottom Right
<div class="ribbon ribbon-bottom-right ribbon-success"> <div class="ribbon-content">Bottom Right</div> </div>
下左角
Bottom Left
<div class="ribbon ribbon-bottom-left ribbon-info"> <div class="ribbon-content">Bottom Left</div> </div>
颜色变体

丝带组件提供了多种颜色选项，使用渐变背景增强视觉效果。

Primary
Primary
<div class="ribbon ribbon-top-right ribbon-primary"> <div class="ribbon-content">Primary</div> </div>
Secondary
Secondary
<div class="ribbon ribbon-top-right ribbon-secondary"> <div class="ribbon-content">Secondary</div> </div>
Success
Success
<div class="ribbon ribbon-top-right ribbon-success"> <div class="ribbon-content">Success</div> </div>
Info
Info
<div class="ribbon ribbon-top-right ribbon-info"> <div class="ribbon-content">Info</div> </div>
Warning
Warning
<div class="ribbon ribbon-top-right ribbon-warning"> <div class="ribbon-content">Warning</div> </div>
Danger
Danger
<div class="ribbon ribbon-top-right ribbon-danger"> <div class="ribbon-content">Danger</div> </div>
Light
Light
<div class="ribbon ribbon-top-right ribbon-light"> <div class="ribbon-content">Light</div> </div>
Dark
Dark
<div class="ribbon ribbon-top-right ribbon-dark"> <div class="ribbon-content">Dark</div> </div>
尺寸变体

丝带组件提供了三种尺寸选项：小、中和大。

小尺寸
Small
<div class="ribbon ribbon-top-right ribbon-primary ribbon-sm"> <div class="ribbon-content">Small</div> </div>
中尺寸
Medium
<div class="ribbon ribbon-top-right ribbon-primary"> <div class="ribbon-content">Medium</div> </div>
大尺寸
Large
<div class="ribbon ribbon-top-right ribbon-primary ribbon-lg"> <div class="ribbon-content">Large</div> </div>
特殊效果

丝带组件支持多种特殊效果，如圆角、阴影和动画。

圆角效果
Rounded
<div class="ribbon ribbon-top-right ribbon-primary ribbon-rounded"> <div class="ribbon-content">Rounded</div> </div>
脉冲动画
Pulse
<div class="ribbon ribbon-top-right ribbon-primary ribbon-pulse"> <div class="ribbon-content">Pulse</div> </div>
发光效果
Glow
<div class="ribbon ribbon-top-right ribbon-primary ribbon-glow"> <div class="ribbon-content">Glow</div> </div>
实际应用场景

以下是一些丝带组件的实际应用场景示例。

Hot!
产品图片
热门产品

这是一款热门销售的产品，限时特惠中。

¥199.00
New!
产品图片
新品上市

全新上市的产品，限量发售中。

¥299.00
限时优惠

年末大促销

全场商品低至5折，更有限量优惠券等你来抢！活动时间：2023年12月20日-2024年1月5日。

促销活动
使用指南

类名参考

类名 描述 可选值
ribbon 基础类，必须添加 -
ribbon-{position} 位置类 top-right, top-left, bottom-right, bottom-left
ribbon-{color} 颜色类 primary, secondary, success, info, warning, danger, light, dark
ribbon-{size} 尺寸类 sm, lg (默认中型)
ribbon-rounded 圆角效果 -
ribbon-pulse 脉冲动画效果 -
ribbon-glow 发光效果 -
ribbon-shadow-{size} 阴影效果 sm, lg (默认阴影)
ribbon-text-{color} 文本颜色 primary, secondary, success, white, black

注意事项

  • 确保父容器设置了 position: relative 以便丝带正确定位
  • 丝带默认使用绝对定位，并设置了较高的 z-index (1000) 以确保显示在其他元素上方
  • 文本内容应简洁明了，过长的文本可能会导致显示问题
  • 在移动设备上，丝带会自动调整大小以适应屏幕宽度
  • 可以通过组合不同的类来创建自定义效果
自定义组合

通过组合不同的类，可以创建各种自定义效果。

自定义组合1
Special Offer
<div class="ribbon ribbon-top-right ribbon-primary ribbon-lg ribbon-pulse ribbon-glow"> <div class="ribbon-content">Special Offer</div> </div>
自定义组合2
Limited
<div class="ribbon ribbon-bottom-left ribbon-warning ribbon-sm ribbon-rounded"> <div class="ribbon-content">Limited</div> </div>
自定义组合3
Bestseller
<div class="ribbon ribbon-top-left ribbon-success ribbon-shadow-lg ribbon-pulse"> <div class="ribbon-content">Bestseller</div> </div>