Svelte Materialify使用指南：Button、Card、Alert、Chip等10个高频组件用法示例

Svelte Materialify使用指南Button、Card、Alert、Chip等10个高频组件用法示例【免费下载链接】svelte-materialifyA Material UI Design Component library for Svelte heavily inspired by vuetify.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-materialifySvelte Materialify是一个为 Svelte 打造的 Material UI 组件库设计深度参考 Vuetify提供按钮、卡片、提示框等开箱即用的 Material Design 组件。本文用 10 个最高频组件的实战示例帮你快速上手几分钟即可搭出漂亮的应用界面。一键安装最快配置方法先安装组件库本体一条命令搞定npm i svelte-materialify如果你需要使用 SCSS 自定义主题色则安装完整的预处理器依赖npm i -D svelte-materialify svelte-preprocess sass postcss完整的安装说明含 Rollup / Webpack / Sapper 集成方式见 installation.md。基础布局MaterialApp 是组件的容器所有组件都建议放在MaterialApp内它负责注入全局样式并启用主题themelight或darkscript import { MaterialApp, Button } from svelte-materialify; /script MaterialApp themelight Button默认样式按钮/Button /MaterialApp如果你自定义了主题则从svelte-materialify/src导入未编译版本主题变量写在_material-theme.scss文件中。使用细节见 usage.md。1. Button 按钮8 种风格自由切换Button 支持raised默认凸起、text、outlined、fab、icon等多种风格通过布尔属性即可切换Button凸起按钮/Button Button text文字按钮/Button Button outlined描边按钮/Button Button fab悬浮按钮/Button Button disabled禁用按钮/Button源码位于packages/svelte-materialify/src/components/Button/Button.svelte支持ripple水波纹、block通栏、tile直角等属性。2. Card 卡片内容展示的万能容器Card 支持outlined描边、raised默认投影、shaped圆角、hover悬浮效果Card raised classpa-3 mb-3 CardTitle项目介绍/CardTitle CardText卡片内部可放任意内容配合标题、副标题和底部操作区使用。/CardText CardActions Button text colorprimary了解更多/Button /CardActions /Card配套子组件CardTitle/CardSubtitle/CardText/CardActions均从主包导出源码见packages/svelte-materialify/src/components/Card/Card.svelte。3. Alert 提示框一键 dismiss 的反馈提示Alert 自带淡入淡出过渡dismissible属性开启后会自动生成关闭按钮Alert dense dismissible bordersuccess 操作成功数据已保存 /Alert常用属性dense紧凑、outlined描边、tile直角、coloredBorder彩色描边。源码见packages/svelte-materialify/src/components/Alert/Alert.svelte官方演示可参考packages/docs/src/examples/Alert/下的各场景示例。4. Chip 标签小巧的信息胶囊Chip 常用于筛选、标签、多选close属性可让其显示关闭按钮点击后自动触发close事件Chip close on:close{handleClose}Svelte 开发/Chip Chip label标签/Chip Chip outlined selected已选中/Chipsize支持x-small到x-large五档源码见packages/svelte-materialify/src/components/Chip/Chip.svelte。5. TextField 输入框带校验和清除功能TextField 内置标签浮动动画、错误提示与clearable一键清空TextField bind:value{email} label邮箱地址 placeholderyouexample.com outlined clearable rules{[v v.includes() || 请输入有效邮箱]} on:input{() $field.validate()} /还支持filled/solo/dense等风格以及counter字符计数。源码见packages/svelte-materialify/src/components/TextField/TextField.svelte。6. Checkbox 复选框支持单选与组选checked做单选绑定把group传成数组即可实现多选组Checkbox bind:checked{agree} label同意服务条款 / {#each options as item} Checkbox group{selected} value{item} label{item} / {/each}还内置indeterminate半选状态适合全选场景。源码见packages/svelte-materialify/src/components/Checkbox/Checkbox.svelte。7. Dialog 对话框控制 active 即可弹出Dialog 基于 Overlay 实现点击遮罩自动关闭persistent可禁止Button on:click{() (open true)}打开对话框/Button Dialog bind:active{open} width{480} Card CardTitle确认删除/CardTitle CardText此操作不可恢复。/CardText CardActions Button text on:click{() (open false)}取消/Button Button colorerror on:click{() (open false)}删除/Button /CardActions /Card /Dialogfullscreen属性可切换全屏模式。源码见packages/svelte-materialify/src/components/Dialog/Dialog.svelte。8. Tabs 选项卡自带滑块动画Tabs 内部组合了 SlideGroup 与 Window标签切换时滑块自动跟随Tabs bind:value{tabIndex} grow svelte:fragment slottabs Tab value{0}概览/Tab Tab value{1}详情/Tab Tab value{2}评论/Tab /svelte:fragment TabContent value{0}这里是概览内容/TabContent TabContent value{1}这里是详情内容/TabContent TabContent value{2}这里是评论内容/TabContent /Tabs支持centered居中、icons图标行、vertical纵向等布局。源码见packages/svelte-materialify/src/components/Tabs/Tabs.svelte。9. Snackbar 消息条自动消失的轻量通知Snackbar 适合操作成功/失败等轻提示设置timeout后到时自动关闭Snackbar bind:active bottom left rounded timeout{3000} 文件上传成功 /Snackbar通过top/bottom/left/right/center控制位置outlined、tile调整外观。源码见packages/svelte-materialify/src/components/Snackbar/Snackbar.svelte。10. AppBar 应用栏页面的抬头AppBar 提供dense、prominent、fixed、collapsed等属性配合命名插槽放置图标与标题AppBar prominent fixed svelte:fragment sloticon Button icon☰/Button /svelte:fragment svelte:fragment slottitle我的应用/svelte:fragment Button icon⚙️/Button /AppBar高度可通过height属性自定义。源码见packages/svelte-materialify/src/components/AppBar/AppBar.svelte。进阶自定义主题色安装时选择了自定义样式后在_material-theme.scss中覆盖变量即可全局换肤$primary-color: #004d26; $secondary-color: #ff99cc; $body-font-family: Poppins, Segoe UI, sans-serif;更多组件DataTable、Menu、NavigationDrawer、Slider、Tooltip 等的完整导出清单见 index.js每个组件的 TS 类型定义位于packages/svelte-materialify/types/目录编写代码时可获得完整属性提示。小结组件核心场景记忆点Button一切交互入口布尔属性切换风格Card内容分组四个子组件组合Alert全局反馈dismissible 一键关闭Chip标签/筛选close 事件TextField表单输入rules 校验Checkbox选择group 数组多选Dialog重要操作确认active 控制显隐Tabs内容分区滑块自动跟随Snackbar轻量通知timeout 自动消失AppBar页面导航栏命名插槽布局掌握以上 10 个组件你已经能覆盖日常 80% 的界面需求。剩下的工作就是打开 REPL 把它们组合起来搭出属于你的 Svelte Material 应用了 【免费下载链接】svelte-materialifyA Material UI Design Component library for Svelte heavily inspired by vuetify.项目地址: https://gitcode.com/gh_mirrors/sv/svelte-materialify创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考