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-materialifySvelte Materialify 是一个面向 Svelte 的 Material Design 组件库除了开箱即用的组件它还内置了一整套工具类helper classes只需给元素加上类名就能直接调整间距Spacing、弹性布局Flex、浮动Float、高度Elevation等样式几乎不用手写 CSS。本文以速查清单的形式带你一次掌握九大常用技巧快速做出 Material Design 风格的页面 1️⃣ Spacing 间距类一个类名搞定边距和内边距不想为每个元素单独建 classSpacing 工具类让你用{属性}{方向}-{尺寸}的格式直接调整 margin 和 padding位置取值示例属性m外边距p内边距ma-3、pt-2方向t/b/l/r/a全方向mt-2、px-4尺寸016每级 4px负值n1n16mb-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 工具类提供024 共 25 个层级类名格式elevation-{n}如elevation-2、elevation-8数值越大阴影越深元素看起来越浮在页面上在 SCSS 中还可以用 mixininclude 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 classred红色背景/div div classyellow lighten-4浅黄背景/div span classdeep-purple-text text-accent-1深紫强调文字/span div classprimary-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.js8️⃣ 文字排版对齐、粗细、透明度一站搞定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。这样一套标记就能让页面从手机到桌面都整齐好看 ➡️️速查清单一览技巧类名示例典型场景Spacingma-4、pt-2、ml-n1元素间距微调Flexd-flex、justify-center、flex-column布局骨架Floatfloat-right、float-sm-none图文环绕Elevationelevation-2、elevation-8卡片悬浮感Displayd-none、d-md-block响应式显隐Roundedrounded-lg、rounded-pill圆角美化Colorsred、primary-text、lighten-4Material 配色Typographytext-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），仅供参考