• 组件
  • 布局与其它

徽标数

用于组织信息和操作,通常也作为详细信息的入口。

规则

  • 当用户有必要知晓每条更新时,应该使用数字型。
  • 当用户只需知道大致有内容更新时,应该使用红点型。

代码演示

综合示例

结合列表的案例参考

<!-- 小圆点 -->
<div class="badge">
	<div class="badge-dot"></div>
</div>
<!-- 独立的 默认的-->
<div class="badge-nowrapper">
	<div class="badge-txt">77</div>
</div>
<!-- 独立的 绿色-->
<div class="badge-nowrapper  badge-insign">
	<div class="badge-txt"预约</div>
</div>
<!-- 独立的 高亮-->
<div class="badge-nowrapper badge-highlight">
	<div class="badge-txt">New</div>
</div>
<!-- 独立的 高亮空心的-->
<div class="badge-nowrapper badge-o-highlight">
	<div class="badge-txt">甲等</div>
</div>
<!-- 组合 -->
<div class="list-ord">
	<div class="list-item  ">
		<a href="" class="txt-arrowlink list-link-wrapper">	
			<div class="badge list-icon-sm">
				<img src="https://image.yuantutech.com/i4/cafad83e314e9fb646211d779686bf72-73-73.png" class="icon ">
				<div class="badge-dot"></div>
			</div>
			<div class="list-content">
				<div class="list-title">小圆点</div>
			</div>
			<div class="list-extra">说明文字</div>
		</a>
	</div>
	<div class="list-item  ">
		<a href="" class="txt-arrowlink list-link-wrapper">	
			<div class="list-content">
				<div class="list-title">右侧内容</div>
			</div>
			<div class="list-extra">
				<div class="badge-nowrapper">
					<div class="badge-txt">77</div>
				</div>
			</div>
		</a>
	</div>
	<div class="list-item  ">
		<a href="" class="txt-arrowlink list-link-wrapper">	
			<div class="list-content">
				<div class="list-title">
				文本内容
					<div class="badge-nowrapper">
						<div class="badge-txt">new</div>
					</div>
				</div>
			</div>
			<div class="list-extra">说明文字</div>
		</a>
	</div>
	<div class="list-item  ">
		<a href="" class="txt-arrowlink list-link-wrapper">	
			<div class="list-content">
				<div class="list-title">
					集合
					<div class="badge-nowrapper">
						<div class="badge-txt">4</div>
					</div>
					<div class="badge-nowrapper badge-insign">
						<div class="badge-txt">预约</div>
					</div>
					<div class="badge-nowrapper badge-highlight">
						<div class="badge-txt">New</div>
					</div>
					<div class="badge-nowrapper badge-o-highlight">
						<div class="badge-txt">甲等</div>
					</div>
				</div>
			</div>
			<div class="list-extra">说明文字</div>
		</a>
	</div>
	<div class="list-item  ">
		<a href="" class="txt-arrowlink list-link-wrapper">	
			<div class="list-content">
				<div class="list-title">
				封顶数字
					<div class="badge-nowrapper">
						<div class="badge-txt">99+</div>
					</div>
				</div>
			</div>
			<div class="list-extra">说明文字</div>
		</a>
	</div>
</div>