Svelte Materialify工具类速查：Spacing、Flex、Float、Elevation九大技巧快速美化页面
【免费下载链接】svelte-materialifyA Material UI Design Component library for Svelte heavily inspired by vuetify.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-materialify
Svelte Materialify 是一个面向 Svelte 的 Material Design 组件库，除了开箱即用的组件，它还内置了一整套工具类（helper classes）：只需给元素加上类名，就能直接调整间距（Spacing）、弹性布局（Flex）、浮动（Float）、高度（Elevation）等样式，几乎不用手写 CSS。本文以速查清单的形式，带你一次掌握九大常用技巧，快速做出 Material Design 风格的页面 🎨
1️⃣ Spacing 间距类：一个类名搞定边距和内边距
不想为每个元素单独建 class？Spacing 工具类让你用{属性}{方向}-{尺寸}的格式直接调整 margin 和 padding：
| 位置 | 取值 | 示例 |
|---|---|---|
| 属性 | m=外边距，p=内边距 | ma-3、pt-2 |
| 方向 | t/b/l/r/a（全方向） | mt-2、px-4 |
| 尺寸 | 0～16（每级 4px），负值n1～n16 | mb-4、ml-n1 |
- 尺寸步进严格对齐 Material Design 规范，
1就是4px - 负 margin（如
ml-n1= -4px）适合把元素"拉近"对齐 - 支持断点前缀：
ma-md-2表示仅在 md 及以上屏幕生效
类名实现位于 packages/svelte-materialify/src/styles/generic/_spacing.scss，更多细节可查看 spacing.md。
2️⃣ Flex 布局：一个类名切换行/列与对齐
Svelte Materialify 的 Flex 工具类覆盖了 Flexbox 最常用的场景，全部支持断点前缀（如.d-md-flex、.flex-sm-column）：
| 功能 | 常用类名 |
|---|---|
| 启用容器 | .d-flex、.d-inline-flex |
| 主轴方向 | .flex-row-reverse、.flex-column |
| 水平对齐 | .justify-center、.justify-space-between、.justify-space-around |
| 交叉对齐 | .align-center、.align-end、.align-baseline |
| 单项对齐 | .align-self-start、.align-self-center |
| 换行 | .flex-wrap、.flex-nowrap、.flex-wrap-reverse |
| 顺序 | .order-first、.order-last、.order-1～.order-12 |
| 伸缩 | .flex-grow-1、.flex-shrink-0 |
💡 小技巧：flex-direction: column时，justify与align作用的轴会互换，写竖排导航时注意一下。实现见 packages/svelte-materialify/src/styles/generic/_flex.scss。
3️⃣ Float 浮动：按视口控制左右浮动
当布局还需要传统浮动（比如图文环绕）时，用 Float 工具类即可：
.float-left/.float-right/.float-none- 可加断点：
.float-sm-left（小屏才左浮）、.float-lg-none（大屏取消浮动）
全部类名一览在 packages/svelte-materialify/src/styles/generic/_float.scss。
4️⃣ Elevation 高度：一键做出 Material 的"悬浮感"
Material Design 的灵魂之一就是卡片阴影。Elevation 工具类提供0～24 共 25 个层级：
- 类名格式：
elevation-{n}，如elevation-2、elevation-8 - 数值越大，阴影越深，元素看起来越"浮"在页面上
- 在 SCSS 中还可以用 mixin：
@include elevation($n)
卡片、对话框、AppBar 都自带 elevation，你只需在自定义元素上补一个类名，整体视觉立刻统一。实现位于 packages/svelte-materialify/src/styles/tools/_elevation.scss。
5️⃣ Display 显示控制：不同屏幕显示不同内容
根据视口"显隐"元素，是做响应式页面最常用的手段：
.d-none、.d-block、.d-inline、.d-inline-block、.d-flex、.d-inline-flex- 加断点后只在该断点生效：
.d-sm-none（小屏隐藏）、.d-lg-block（大屏才显示）
如果想在 JavaScript 中判断当前屏幕尺寸，项目还提供了 packages/svelte-materialify/src/utils/breakpoints.js，配合window.matchMedia使用，例如md-and-down（中小屏）。
6️⃣ 圆角 Rounded：快速给任意元素加弧度
圆角工具类格式为rounded-{边/角}-{尺寸}：
- 整体：
.rounded、.rounded-sm、.rounded-lg、.rounded-xl - 特殊形状：
.rounded-pill（胶囊）、.rounded-circle（圆形头像） - 单边/单角：
.rounded-t（上边）、.rounded-br（右下角）等
尺寸与断点无关，想全局修改可在主题文件中覆盖$rounded变量。样式见 packages/svelte-materialify/src/styles/generic/_radius.scss。
7️⃣ 颜色类：Material 色板一键取色
整个 Material Design 色板都能通过类名直接使用，每个颜色都有text和背景两种变体：
<div class="red">红色背景</div> <div class="yellow lighten-4">浅黄背景</div> <span class="deep-purple-text text-accent-1">深紫强调文字</span> <div class="primary-color">主题色背景</div>- 变体：
lighten-{n}、darken-{n}、accent-{n} - 主题色：
primary-color/primary-text - 在 JS 中取色：
import colors from 'svelte-materialify/src/utils/colors'，色板定义见 packages/svelte-materialify/src/utils/colors.js
8️⃣ 文字排版：对齐、粗细、透明度一站搞定
Typography 工具类覆盖文字最常用的调整：
- 对齐：
.text-left/.text-center/.text-right（同样支持断点） - 装饰：
.text-decoration-underline、.text-decoration-line-through、.text-decoration-none - 转换：大写等大小写转换类
- 字重：Material 支持 100/300/400/500/700/900 及斜体
- 强调层次：
.text--primary（默认）、.text--secondary（提示文字）、.text--disabled（禁用），透明度会随主题自动变化
样式实现位于 packages/svelte-materialify/src/styles/generic/_typography.scss。
9️⃣ 断点响应式：一套类名适配所有屏幕
前面 9 大技巧的共同底座是断点系统，Svelte Materialify 定义了 5 档：
| 断点 | 前缀 | 含义 |
|---|---|---|
| xs | -（可省略） | 手机 |
| sm | -sm- | 大屏手机/平板竖屏 |
| md | -md- | 平板横屏 |
| lg | -lg- | 笔记本 |
| xl | -xl- | 大桌面屏 |
用法就是往类名中间插断点：ma-md-4、.d-sm-none、.float-lg-right、.d-md-flex。这样一套标记就能让页面从手机到桌面都整齐好看 📱➡️🖥️
速查清单一览
| 技巧 | 类名示例 | 典型场景 |
|---|---|---|
| Spacing | ma-4、pt-2、ml-n1 | 元素间距微调 |
| Flex | d-flex、justify-center、flex-column | 布局骨架 |
| Float | float-right、float-sm-none | 图文环绕 |
| Elevation | elevation-2、elevation-8 | 卡片悬浮感 |
| Display | d-none、d-md-block | 响应式显隐 |
| Rounded | rounded-lg、rounded-pill | 圆角美化 |
| Colors | red、primary-text、lighten-4 | Material 配色 |
| Typography | text-center、font-weight-bold、text--secondary | 文字层次 |
| 断点 | -sm-/-md-/-lg-/-xl- | 全断点适配 |
小结：掌握这九个方向的工具类，你不需要再为"加个边距""换个对齐"单独写样式表。类名即文档，边敲边查，配合官方文档页（如 packages/docs/src/routes/styles/ 下的各专题页），可以显著提升 Svelte Materialify 项目的开发效率 ✨
【免费下载链接】svelte-materialifyA Material UI Design Component library for Svelte heavily inspired by vuetify.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-materialify
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
