SpareBank1设计系统中Badge组件的设计与实现-CSDN博客

本文链接：https://blog.csdn.net/gitblog_07175/article/details/148418463

SpareBank1设计系统中Badge组件的设计与实现

designsystem SpareBank 1's design system and component library. 项目地址: https://gitcode.com/gh_mirrors/desi/designsystem

组件概述

Badge（徽章）是现代化用户界面中常见的UI元素，主要用于向用户传递数量信息或状态提示。在SpareBank1设计系统中，Badge被设计为一个轻量级的视觉指示器，能够有效吸引用户注意力，特别适用于显示未读消息数量、系统通知或任务提醒等场景。

核心功能特性

SpareBank1设计系统中的Badge组件具备以下关键特性：

数字显示能力：可以清晰展示具体的数量值，如未读消息数
纯状态指示：在没有具体数值时，可作为简单的状态提示点
视觉强调：通过色彩和形状设计确保在各种背景下都能突出显示
灵活定位：支持与图标、用户名称等多种UI元素配合使用

技术实现方案

基础结构设计

Badge组件的基础HTML结构应保持简洁：

<span class="badge" data-count="5">5</span>

对于纯状态指示的无数字Badge：

<span class="badge notification"></span>

样式实现要点

CSS实现需要考虑以下关键点：

圆形基础形状：通过border-radius实现完美的圆形外观
动态尺寸：根据内容自动调整大小，同时确保最小尺寸
醒目配色：使用对比度高的颜色确保可读性
定位系统：支持绝对定位以覆盖在其他元素上

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background-color: var(--color-primary);
  color: white;
  font-size: 0.75rem;
  font-weight: bold;
  line-height: 1;
}

.badge.notification {
  width: 0.75rem;
  height: 0.75rem;
  min-width: auto;
  padding: 0;
}