# CSS 帮助类

DarkM.UI 预定义了丰富的 CSS 帮助类，所有样式都在 packages/styles/_helper.scss 文件中，可满足大部分日常样式需求。

# 📋 命名规范

所有帮助类统一使用 nm- 前缀（NameM 的缩写）：

nm-{属性}-{值}

示例：
nm-text-primary    // 文本颜色 - 主色
nm-p-10            // 内边距 - 10px
nm-m-t-5           // 上外边距 - 5px

1
2
3
4
5
6

# 🎨 文本颜色

类名	说明	效果
`nm-text-info`	信息色	信息色
`nm-text-primary`	主色	主色
`nm-text-success`	成功色	成功色
`nm-text-warning`	警告色	警告色
`nm-text-danger`	危险色	危险色
`nm-text-white`	白色	白色
`nm-text-black`	黑色	黑色
`nm-text-gray`	灰色	灰色

使用示例：

<p class="nm-text-info">信息文本</p>
<p class="nm-text-primary">主要文本</p>
<p class="nm-text-success">成功文本</p>
<p class="nm-text-warning">警告文本</p>
<p class="nm-text-danger">危险文本</p>

1
2
3
4
5

# 📝 文本对齐

类名	说明
`nm-text-left`	左对齐
`nm-text-center`	居中对齐
`nm-text-right`	右对齐
`nm-text-justify`	两端对齐

使用示例：

<p class="nm-text-left">左对齐文本</p>
<p class="nm-text-center">居中对齐文本</p>
<p class="nm-text-right">右对齐文本</p>

1
2
3

# 🔤 字体样式

# 字体粗细

类名	说明
`nm-text-normal`	正常（400）
`nm-text-bold`	加粗（700）
`nm-text-light`	细体（300）

# 字体大小

支持 1-50px：

<div class="nm-size-10">10px 字体</div>
<div class="nm-size-12">12px 字体</div>
<div class="nm-size-14">14px 字体（默认）</div>
<div class="nm-size-16">16px 字体</div>
<div class="nm-size-18">18px 字体</div>
<div class="nm-size-20">20px 字体</div>
<div class="nm-size-24">24px 字体</div>
<div class="nm-size-30">30px 字体</div>

1
2
3
4
5
6
7
8

# 文本装饰

类名	说明
`nm-text-underline`	下划线
`nm-text-line-through`	删除线
`nm-text-none`	无装饰
`nm-text-ellipsis`	文本省略（单行）

使用示例：

<p class="nm-text-underline">下划线文本</p>
<p class="nm-text-line-through">删除线文本</p>
<p class="nm-text-ellipsis">这是一段很长的文本，超出宽度会显示省略号</p>

1
2
3

# 🎨 背景颜色

类名	说明	效果
`nm-bg-info`	信息背景	信息色
`nm-bg-primary`	主色背景	主色
`nm-bg-success`	成功背景	成功色
`nm-bg-warning`	警告背景	警告色
`nm-bg-danger`	危险背景	危险色
`nm-bg-white`	白色背景	白色
`nm-bg-black`	黑色背景	黑色
`nm-bg-gray`	灰色背景	灰色

使用示例：

<span class="nm-bg-primary nm-text-white">主色背景</span>
<span class="nm-bg-success nm-text-white">成功背景</span>
<span class="nm-bg-warning nm-text-white">警告背景</span>

1
2
3

# 📏 内边距（Padding）

# 命名规则

nm-p-{方向}-{值}

方向：
- 不写方向：四个方向
- t (top)：上
- r (right)：右
- b (bottom)：下
- l (left)：左

值：1-30 (表示 px)

1
2
3
4
5
6
7
8
9
10

# 完整内边距

类名	说明	CSS
`nm-p-1`	1px 内边距	`padding: 1px`
`nm-p-5`	5px 内边距	`padding: 5px`
`nm-p-10`	10px 内边距	`padding: 10px`
`nm-p-15`	15px 内边距	`padding: 15px`
`nm-p-20`	20px 内边距	`padding: 20px`
`nm-p-30`	30px 内边距	`padding: 30px`

# 单方向内边距

<!-- 上内边距 -->
<div class="nm-p-t-10">上内边距 10px</div>

<!-- 右内边距 -->
<div class="nm-p-r-10">右内边距 10px</div>

<!-- 下内边距 -->
<div class="nm-p-b-10">下内边距 10px</div>

<!-- 左内边距 -->
<div class="nm-p-l-10">左内边距 10px</div>

1
2
3
4
5
6
7
8
9
10
11

# 组合内边距

<div class="nm-p-t-15 nm-p-l-30">
  上内边距 15px，左内边距 30px
</div>

1
2
3

# 📐 外边距（Margin）

# 命名规则

与内边距相同，只是将 p 改为 m：

nm-m-{方向}-{值}

# 完整外边距

类名	说明	CSS
`nm-m-1`	1px 外边距	`margin: 1px`
`nm-m-5`	5px 外边距	`margin: 5px`
`nm-m-10`	10px 外边距	`margin: 10px`
`nm-m-15`	15px 外边距	`margin: 15px`
`nm-m-20`	20px 外边距	`margin: 20px`
`nm-m-30`	30px 外边距	`margin: 30px`

# 单方向外边距

<!-- 上外边距 -->
<div class="nm-m-t-10">上外边距 10px</div>

<!-- 右外边距 -->
<div class="nm-m-r-10">右外边距 10px</div>

<!-- 下外边距 -->
<div class="nm-m-b-10">下外边距 10px</div>

<!-- 左外边距 -->
<div class="nm-m-l-10">左外边距 10px</div>

1
2
3
4
5
6
7
8
9
10
11

# 自动外边距

类名	说明
`nm-m-auto`	自动外边距
`nm-m-l-auto`	左边距自动（靠右）
`nm-m-r-auto`	右边距自动（靠左）
`nm-m-t-auto`	上边距自动
`nm-m-b-auto`	下边距自动

# 📦 尺寸类

# 宽度

类名	说明
`nm-w-25`	宽度 25%
`nm-w-50`	宽度 50%
`nm-w-75`	宽度 75%
`nm-w-100`	宽度 100%
`nm-w-auto`	自动宽度

# 高度

类名	说明
`nm-h-25`	高度 25%
`nm-h-50`	高度 50%
`nm-h-75`	高度 75%
`nm-h-100`	高度 100%
`nm-h-auto`	自动高度

# 最大宽高

类名	说明
`nm-mw-100`	最大宽度 100%
`nm-mh-100`	最大高度 100%

# 🎭 显示类

类名	说明	CSS
`nm-d-block`	块级元素	`display: block`
`nm-d-inline`	行内元素	`display: inline`
`nm-d-inline-block`	行内块元素	`display: inline-block`
`nm-d-flex`	Flex 布局	`display: flex`
`nm-d-inline-flex`	行内 Flex	`display: inline-flex`
`nm-d-none`	隐藏元素	`display: none`

# 可见性

类名	说明
`nm-visible`	可见
`nm-invisible`	不可见（占位）
`nm-hidden`	隐藏（不占位）

# 📍 定位类

类名	说明	CSS
`nm-pos-relative`	相对定位	`position: relative`
`nm-pos-absolute`	绝对定位	`position: absolute`
`nm-pos-fixed`	固定定位	`position: fixed`
`nm-pos-sticky`	粘性定位	`position: sticky`

# 位置偏移

<div class="nm-pos-relative">
  <div class="nm-pos-absolute nm-top-0 nm-right-0">右上角</div>
</div>

1
2
3

类名	说明
`nm-top-0`	顶部 0
`nm-right-0`	右侧 0
`nm-bottom-0`	底部 0
`nm-left-0`	左侧 0

# 🎨 边框类

# 边框

类名	说明
`nm-border`	默认边框
`nm-border-top`	上边框
`nm-border-right`	右边框
`nm-border-bottom`	下边框
`nm-border-left`	左边框
`nm-border-none`	无边框

# 圆角

类名	说明
`nm-radius-0`	无圆角
`nm-radius-2`	2px 圆角
`nm-radius-4`	4px 圆角
`nm-radius-8`	8px 圆角
`nm-radius-50`	50% 圆角（圆形）

# ✨ 阴影类

类名	说明
`nm-shadow-sm`	小阴影
`nm-shadow`	默认阴影
`nm-shadow-md`	中等阴影
`nm-shadow-lg`	大阴影
`nm-shadow-none`	无阴影

使用示例：

<div class="nm-shadow nm-p-20 nm-m-20 nm-bg-white">
  带阴影的卡片
</div>

1
2
3

# 🔄 Flex 布局类

# Flex 方向

类名	说明	CSS
`nm-flex-row`	水平方向	`flex-direction: row`
`nm-flex-row-reverse`	水平反向	`flex-direction: row-reverse`
`nm-flex-column`	垂直方向	`flex-direction: column`
`nm-flex-column-reverse`	垂直反向	`flex-direction: column-reverse`

# Flex 对齐

类名	说明	CSS
`nm-justify-start`	起点对齐	`justify-content: flex-start`
`nm-justify-end`	终点对齐	`justify-content: flex-end`
`nm-justify-center`	居中对齐	`justify-content: center`
`nm-justify-between`	两端对齐	`justify-content: space-between`
`nm-justify-around`	均匀分布	`justify-content: space-around`

# Flex 项目

类名	说明
`nm-flex-1`	flex: 1
`nm-flex-auto`	flex: auto
`nm-flex-none`	flex: none

# 📚 使用建议

# 1. 组合使用

<div class="nm-p-20 nm-bg-white nm-shadow nm-radius-4">
  <h2 class="nm-text-primary nm-text-bold nm-m-b-10">标题</h2>
  <p class="nm-text-gray nm-size-14">内容文本</p>
</div>

1
2
3
4

# 2. 避免过度使用

<!-- ❌ 不推荐：类名过多 -->
<div class="nm-p-10 nm-m-5 nm-bg-white nm-shadow nm-radius-4 nm-text-primary">

<!-- ✅ 推荐：提取为组件样式 -->
<style scoped>
.card {
  @apply nm-p-10 nm-bg-white nm-shadow nm-radius-4;
}
</style>

1
2
3
4
5
6
7
8
9

# 3. 响应式支持

<!-- 移动端隐藏 -->
<div class="nm-d-none nm-d-md-block">桌面端显示</div>

<!-- 平板隐藏 -->
<div class="nm-d-block nm-d-md-none">仅移动端显示</div>

1
2
3
4
5

# 🔗 参考链接

最后更新: 2022-08-07

← 组件介绍 (opens new window) 皮肤机制 →