Implementated - Sublime 插件
此 Implementated sublime 插件包含 Implementated CSS 组件的代码片段。希望它能提高你的工作效率。 :)
尽可能多地通过 - Twitter @ayinloya - 问题 进行贡献
分叉、克隆、修正并发给我一个拉取请求或提交任何问题。每一份贡献都很重要。
以下是可用的内容列表
安装
有三种安装此插件的方法。
通过“Package Control：安装包”菜单搜索“Implementated CSS Snippets”。 注意：如果您还没有安装 Sublime Package Control，您可以通过此处了解如何安装它 https://packagecontrol.sublime.net.cn/installation
将仓库克隆到您的 Sublime Text 2/3 包目录中。 git clone https://github.com/ayinloya/materialized-css-snippets.git
下载.zip文件，并将其解压缩到您的 Sublime Text 2/3 包目录中。 注意：您可以通过转到“首选项”>“浏览包”来找到您的 Sublime Text 2/3包目录。
一些此插件的使用示例。
在输入以下代码片段后按 Tab 键
CDN
| 组件 |
代码片段 |
| CDN 链接（CSS & JS） |
m-cdn |
| CDN 链接（仅为 CSS） |
m-cdn:css |
| CDN 链接（仅为 JS） |
m-cdn:js |
模板
| 组件 |
代码片段 |
| HTML5 模板布局 |
m-template:html |
| HTML5 鸟瞰模板布局 |
m-template:parallax |
| HTML5 启动模板布局 |
m-template:starter |
表单
| 组件 |
代码片段 |
| 表单 |
m-form |
| 注册表单 |
m-form:register |
表格
| 组件 |
代码片段 |
| 表格 |
m-table |
| 边框表格 |
m-table:bordered |
| 居中表格 |
m-table:centered |
| 悬停表格 |
m-table:hover |
| 响应式表格 |
m-table:responsive |
| 条纹表格 |
m-table:striped |
| 高亮表格 |
m-table:highlight |
输入字段（表单字段）
| 组件 |
代码片段 |
| 带有自定义输入错误和成功信息的输入 |
m-input:textarea |
| 文本区域输入 |
m-input:textarea |
| 文本区域输入图标 |
m-input:textarea-icon |
| 文本输入 |
m-input:text |
| 文本输入图标 |
m-input:text-icon |
| 复选框 |
m-input:checkbox |
| 填充复选框 |
m-input:checkbox-fill |
| 日期选择器 |
m-input:date |
| 文件输入 |
m-input:file |
| 单选按钮 |
m-input:radio |
| 有间隔的单选按钮 |
m-input:radio-gap |
| 单选按钮组 |
m-input:radio-group |
| 范围输入 |
m-input:range |
| 选择框 |
m-input:select |
| 禁用选择框 |
m-input:select-disabled |
| 默认浏览器选择框 |
m-input:select-default |
| 默认浏览器禁用选择框 |
m-input:select-default-disabled |
| 选择框组 |
m-input:select-group |
| 带有图片图标的选择框 |
m-input:select-icon |
| 左侧图片图标的选择框 |
m-input:select-icon-left |
| 多选选择框 |
m-input:select-multiple |
| 开关 |
m-input:switch |
| 禁用开关 |
m-input:switch-disabled |
徽章
| 组件 |
代码片段 |
| 徽章 |
m-badge |
| 旧徽章 |
m-badge-o |
按钮
| 组件 |
代码片段 |
| 禁用按钮 |
m-button:disabled |
| 固定浮动按钮 |
m-fixed-floating-button |
| 水平固定浮动按钮 |
m-fixed-floating-button:horizontal |
| 平面按钮 |
m-button:flat |
| 浮动按钮 |
m-button:floating |
| 大按钮 |
m-lg-button |
| 提升按钮 |
m-raised-button |
| 提升按钮图标 |
m-raised-button:icon |
| 提交按钮 |
m-submit-button |
卡片
| 组件 |
代码片段 |
| 默认卡片 |
m-card |
| 图片卡片 |
m-image-card |
| 面板卡片 |
m-panel-card |
| 解析卡片 |
m-revile-card |
| 默认卡片（大） |
m-card:lg |
| 默认卡片（中） |
m-card:md |
| 默认卡片（小） |
m-card:sm |
| 解析卡片（大） |
m-revile-card:lg |
| 解析卡片（中） |
m-revile-card:md |
| 解析卡片（小） |
m-revile-card:sm |
可折叠面板
| 组件 |
代码片段 |
| 可折叠（单选） |
m-collapsible |
| 可折叠（多选） |
m-collapsible:expandable |
| 默认激活的可折叠 |
m-collapsible:selected |
集合
| 组件 |
代码片段 |
| 基本集合 |
m-collection |
| 带有头像的集合 |
m-collection:avatar |
| 可滑动删除的集合 |
m-collection:dismiss |
| 带有链接的集合 |
m-collection:sec |
对话框
| 组件 |
代码片段 |
| 吐司 |
m-toast |
| 吐司（动作） |
m-toast:action |
| 工具提示 |
m-tooltip |
下拉菜单
| 组件 |
代码片段 |
| 下拉菜单 |
m-dropdown |
| 下拉菜单（悬停） |
m-dropdown:hover |
页脚
| 组件 |
代码片段 |
| 页脚 |
m-footer |
| 粘性页脚 |
m-sticky-footer:css |
*(粘性页脚包含实现粘性页脚的CSS代码。)
网格
| 组件 |
代码片段 |
| 列（促销） |
m-col:promo |
| 列 |
m-col |
| 列 1 |
m-col:1 |
| 列 2 |
m-col:2 |
| 列 3 |
m-col:3 |
| 列 4 |
m-col:4 |
| 列 5 |
m-col:5 |
| 列 6 |
m-col:6 |
| 列 7 |
m-col:7 |
| 列 8 |
m-col:8 |
| 列 9 |
m-col:9 |
| 列 10 |
m-col:10 |
| 列 11 |
m-col:11 |
| 列 12 |
m-col:12 |
辅助工具
| 组件 |
代码片段 |
| 对齐 |
m-align |
| 右对齐 |
m-right-align |
| 左对齐 |
m-left-align |
| 居中显示 |
m-center-align |
| 垂直居中 |
m-valign |
| 垂直居中包装器 |
m-valign-wrapper |
| 右浮动 |
m-right |
| 左浮动 |
m-left |
| 仅在桌面设备上隐藏 |
m-hide:desktop |
| 在平板设备和以下设备上隐藏 |
m-hide:tablet-down |
| 在平板设备以上设备上隐藏 |
m-hide:tablet-up |
| 仅在平板设备上隐藏 |
m-hide:tablet |
| 仅在移动设备上隐藏 |
m-hide:mobile |
| 在所有设备上隐藏 |
m-hide |
| 截断 |
m-truncate |
图标
| 组件 |
代码片段 |
| 图标 |
m-icon |
| 图标（大） |
m-icon:lg |
| 图标（中） |
m-icon:md |
| 图标（小） |
m-icon:sm |
| 图标（迷你） |
m-icon:tiny |
JS
| 组件 |
代码片段 |
| 滚动火焰 |
m-scrollfire |
| 图钉 |
m-pushpin |
| Navbar-slideout-js |
m-navbar:slideout-js |
记住在Navbar-slideout-js之前加上“$”符号
媒体
| 组件 |
代码片段 |
| 物料盒子 |
m-materialbox |
| 物料盒子（标题） |
m-materialbox:caption |
| 滑块 |
m-slider |
模态窗口
| 组件 |
代码片段 |
| 模态窗口 |
m-modal |
| 模态（固定底部） |
m-modal:fixed-footer |
导航栏
| 组件 |
代码片段 |
| 导航栏 |
m-navbar |
| Navbar（居中） |
m-navbar:center |
| Navbar（折叠） |
m-navbar:collapse |
| Navbar（固定） |
m-navbar:fixed |
| Navbar-icon |
m-navbar:icon |
| Navbar-text-icon |
m-navbar:icon-text |
| Navbar（左） |
m-navbar:left |
| Navbar（右） |
m-navbar:right |
| Navbar（搜索） |
m-navbar:search |
| Navbar（滑出） |
m-navbar:slideout |
| Navbar（滑出下拉） |
m-navbar:slideout-dropdown |
| Navbar（滑出固定） |
m-navbar:slideout-fixed |
| Navbar（全屏滑出） |
m-navbar:slideout-fullscreen |
分页
| 组件 |
代码片段 |
| 基本分页 |
m-pagination |
视差效果
进度条
| 组件 |
代码片段 |
| 环形进度条 |
m-progress-bar:circular |
| 确定进度条 |
m-progress-bar:determinate |
| 不确定进度条 |
m-progress-bar:indeterminate |
| 彩虹进度条 |
m-progress-bar:rainbow |
滚动
吐司
| 组件 |
代码片段 |
| 吐司对话框 |
m-toast |
| 吐司对话框 js（程序调用吐司） |
m-toast-js |
标签页
排版
面包屑
| 组件 |
代码片段 |
| 面包屑 |
m-breadcrumps |
芯片
用于标签和联系人
| 组件 |
代码片段 |
| 联系人芯片 |
m-breadcrumps |
| 标签芯片 |
m-breadcrumps |
非常重要
当使用 Materialize CSS 版本低于发布 v0.97.0 时，请附加 -o，例如 m-lg-button-o 将产生旧的图标实现 <button type="button" class="waves-effect waves-light btn-large"><i class="mdi-file-cloud right"></i></button>。
