Ionic Snippets - Sublime Plugin
一个完全面向 Ionic 框架代码片段的 Sublime 插件
请通过以下方式告诉我您希望添加的其他内容
安装
安装此插件有3种方法。
通过“包管理器：安装包”菜单搜索“ion snippets”。注意：如果您没有安装 Sublime Package Control，您可以在这里找到如何安装它的方法 https://sublime.wbond.net/installation
将代码库克隆到您的 Sublime Text 2/3 软件包目录中。git clone https://github.com/PixelDropInc/ionic-snippets-sublime-plugin.git
下载 .zip 文件并将其解压缩到您的 Sublime Text 2/3 软件包目录中。注意：您可以通过访问“首选项”>“浏览包”来找到您的 Sublime Text 2/3 软件包目录。
包含内容 - 目录
CSS 代码片段
JS 代码片段
CSS 代码片段
ionic css 代码片段以 ion- 为前缀
页眉
| 组件 |
代码片段代码 |
| bar-light |
ion-bar-light |
| bar-stable |
ion-bar-balanced |
| bar-positive |
ion-bar-positive |
| bar-calm |
ion-bar-calm |
| bar-balanced |
ion-bar-balanced |
| bar-energized |
ion-bar-energized |
| bar-assertive |
ion-bar-assertive |
| bar-royal |
ion-bar-royal |
| bar-dark |
ion-bar-dark |
| 副页眉 |
ion-bar-subheader |
页脚
| 组件 |
代码片段代码 |
| 页脚 |
ion-bar-footer |
| 页脚左-右 |
ion-bar-footer-left-right |
| 页脚左拉 |
ion-bar-footer-pull-left |
| bar-footer-pull-right |
ion-bar-footer-pull-right |
按钮
| 组件 |
代码片段代码 |
| 按钮 |
ion-button |
| 按钮容器 |
ion-button-container |
| 按钮浅色 |
ion-button-light |
| 按钮稳定色 |
ion-button-stable |
| 按钮积极色 |
ion-button-positive |
| 按钮平静色 |
ion-button-calm |
| 按钮平衡色 |
ion-button-balanced |
| 按钮充满活力色 |
ion-button-energized |
| 按钮果断色 |
ion-button-assertive |
| 按钮皇家色 |
ion-button-royal |
| 按钮深色 |
ion-button-dark |
| 按钮全宽 |
ion-button-full |
| 按钮小型 |
ion-button-small |
| 按钮大型 |
ion-button-large |
| 按钮轮廓 |
ion-button-outline |
| 按钮清除 |
ion-button-clear |
| 按钮主页 |
ion-button-home |
| 按钮星星 |
ion-button-star |
| 按钮向左箭头 |
ion-button-chevron-left |
| 按钮向右箭头 |
ion-button-chevron-right |
| 按钮齿轮 |
ion-button-gear |
| 按钮设置 |
ion-button-setting |
| 按钮导航图标 |
ion-button-navicon |
| 按钮清除 |
ion-button-clear |
| 按钮条 |
ion-button-bar |
列表
| 组件 |
代码片段代码 |
| 列表 |
ion-list-ul |
| 列表分隔线 |
ion-item Divider |
| 列表图标邮件 |
ion-list-icon-email |
| 列表图标聊天气泡 |
ion-list-icon-chatbubble |
| 列表图标麦克风 |
ion-list-icon-mic |
| 列表图标人物 |
ion-list-icon-person |
| 列表按钮 |
ion-list-button-positive |
| 列表项头像 |
ion-list-item-avatar |
| 列表项缩略图 |
ion-list-item-thumbnail |
| 列表内嵌 |
ion-item-inset |
卡片
| 组件 |
代码片段代码 |
| 卡片 |
ion-card |
| 卡片头部底部 |
ion-card-header-footer |
| 卡片列表 |
ion-list-card |
| 卡片展示 |
ion-list-card-showcase |
| 卡片图片 |
ion-list-card-img |
表单
| 组件 |
代码片段代码 |
| 表单 |
ion-form |
| 表单占位符标签 |
ion-form-placeholder-label |
| 表单内联标签 |
ion-form-inline-label |
| 表单堆叠标签 |
ion-form-stacked-label |
| 表单浮动标签 |
ion-form-floating-label |
| 内嵌表单 |
ion-form-inset |
| 表单输入图标 |
ion-form-input-icon |
| 表单内联标签 |
ion-form-inline-label |
| 表头输入 |
ion-form-header-input |
切换按钮
| 组件 |
代码片段代码 |
| 开关 |
ion-toggle |
| 开关项 |
ion-item-toggle |
复选框
| 组件 |
代码片段代码 |
| 复选框 |
ion-item-checkbox |
单选按钮
| 组件 |
代码片段代码 |
| 单选按钮 |
ion-item-radio |
范围
| 组件 |
代码片段代码 |
| 范围 |
ion-range |
| 范围列表 |
ion-range-list |
选择器
| 组件 |
代码片段代码 |
| 选择框 |
ion-item-select |
标签页
| 组件 |
代码片段代码 |
| 选项卡 |
ion-tabs |
| 选项卡图标 |
ion-tabs-icon |
| 顶部图标选项卡 |
ion-tabs-icon-top |
| 左侧图标选项卡 |
ion-tabs-icon-left |
实用工具
Js选项卡
| 组件 |
代码片段代码 |
| 选项卡 |
ion-js-tabs |
| 选项卡 |
ion-js-tab |
| ionictabsdelegate(html) |
ion-js-$ionictabsdelegate-html |
| ionictabsdelegate(angular) |
ion-js-$ionictabsdelegate-ng |
侧边菜单
| 组件 |
代码片段代码 |
| 侧菜单 |
ion-js-side-menus-html |
| 侧边菜单 |
ion-js-side-menu-html |
| 侧菜单(angular) |
ion-js-side-menu-ng |
| 侧菜单-内容 |
ion-js-side-menu-content-html |
| 菜单切换 |
ion-js-menu-toggle |
| 菜单关闭 |
ion-js-menu-close |
| 侧菜单-内容 |
ion-js-side-menu-content |
| Ionic侧菜单代理(html) |
ion-js-$ionicsidemenudelegate-html |
| Ionic侧菜单代理(angular) |
ion-js-$ionicSideMenuDelegate-ng |
导航
| 组件 |
代码片段代码 |
| 导航视图 |
ion-js-nav-view |
| 视图 |
ion-js-view |
| 导航栏 |
ion-js-nav-bar |
| 导航按钮 |
ion-js-nav-button |
| 导航返回按钮 |
ion-js-nav-back-button |
| 导航清除 |
ion-js-nav-clear |
| 导航栏代理(html) |
ion-js-$ionicnavbardelegate-html |
| 导航栏代理(angular) |
ion-js-$ionicnavbardelegate-ng |
页眉页脚
| 组件 |
代码片段代码 |
| 页眉 |
ion-js头部栏 |
| 页脚 |
ion-js底部栏 |
内容
| 组件 |
代码片段代码 |
| 内容 |
ion-js内容 |
| 刷新 |
ion-js刷新 |
| 面板 |
ion-js面板 |
滚动
| 组件 |
代码片段代码 |
| 滚动 |
ion-js滚动 |
| 无限滚动 |
ion-js无限滚动 |
| Ionic滚动代理(html) |
ion-js-$ionicScrollDelegate-html |
| Ionic滚动代理(angular) |
ion-js-$ionicScrollDelegate-ng |
列表
| 组件 |
代码片段代码 |
| 列表 |
ion-js列表 |
| 项 |
ion-js项 |
| 删除按钮 |
ion-js-删除按钮 |
| 重排按钮(html) |
ion-js-重排按钮-html |
| 重排按钮(angular) |
ion-js-重排按钮-ng |
| 选项按钮 |
ion-js-选项按钮 |
| 集合重复(html) |
ion-js-集合重复-html |
| 集合重复(angular) |
ion-js-集合重复-ng |
| 列表代理(html) |
ion-js-$ioniclistdelegate-html |
| 列表代理(angular) |
ion-js-$ioniclistdelegate-ng |
表单输入
| 组件 |
代码片段代码 |
| 复选框 |
ion-js-复选框 |
| 单选 |
ion-js-单选 |
| 切换按钮 |
ion-js-切换 |
滑动框
| 组件 |
代码片段代码 |
| 滑动框 |
ion-js-滑动框 |
| 滑动框代理 (html) |
ion-js-$ionicslideboxdelegate-html |
| 滑动框代理 (angular) |
ion-js-$ionicslideboxdelegate-ng |
模态弹窗
| 组件 |
代码片段代码 |
| 模态框 (html) |
ion-js-$ionicmodal-html |
| 模态框 (angular) |
ion-js-$ionicmodal-ng |
弹出菜单
| 组件 |
代码片段代码 |
| 弹出层 (html) |
ion-js-$ionicpopover-html |
| 弹出层 (angular) |
ion-js-$ionicpopover-ng |
操作表
| 组件 |
代码片段代码 |
| 操作表 |
ion-js-$ionicactionsheet-ng |
弹出窗口
| 组件 |
代码片段代码 |
| 弹出警告 |
ion-js-$ionicpopup-alert-ng |
| 弹出确认 |
ion-js-$ionicpopup-confirm-ng |
加载中
| 组件 |
代码片段代码 |
| 加载中 |
ion-js-$ionicLoading-ng |
| 加载配置 |
ion-js-$ionicLoadingConfig-ng |
事件
| 组件 |
代码片段代码 |
| 悬停 |
ion-js-悬停 |
| 点击 |
ion-js-点击 |
| 点击 |
ion-js-点击 |
| 触摸 |
ion-js-触摸 |
| 释放 |
ion-js-释放 |
| 拖动 |
ion-js-拖动 |
| 上拖 |
ion-js-上拖 |
| 右拖 |
ion-js-右拖 |
| 下拖 |
ion-js-下拖 |
| 左拖 |
ion-js-左拖 |
| 滑动 |
ion-js-滑动 |
| 上拖 |
ion-js-向上滑动 |
| 右拖 |
ion-js-向右滑动 |
| 下拖 |
ion-js-向下滑动 |
| 左拖 |
ion-js-向左滑动 |
背景遮罩
| 组件 |
代码片段代码 |
| background |
ion-js-$ionicbackdrop-ng |
事件
点击
键盘
| 组件 |
代码片段代码 |
| 键盘 |
ion-js-键盘 |
| 键盘连接 |
ion-js-键盘连接 |
许可证
Ionic Snippets - Sublime Plugin 是一个开源软件，使用 GNU GPL 许可证发行。
