弃用 - 我不再维护此项目。
Ionic - Sublime插件
Ionic框架代码片段的简单Sublime插件
如果你发现任何问题，请通过
如果你喜欢这个插件并想捐一分钱
安装
通过“包控制：安装包”菜单搜索“Ionic Framework”。 注意： 如果你没有安装Sublime Package Control，你可以在这里找到如何安装它 https://sublime.wbond.net/installation
将存储库克隆到你的Sublime Text 2/3包目录中。 git clone https://github.com/imsingh/ionic-sublime-plugin.git
下载.zip文件并将其解压缩到你的Sublime Text 2/3包目录中。 注意： 你可以通过转到“首选项”>“浏览包”来找到你的Sublime Text 2/3包目录。
包含的内容 - 内容
基于AngularJS指令的Ionic片段
这些片段只能在HTML文件中使用
简单的HTML Ionic片段
这些片段只能在HTML文件中使用
如果你不想或不需要使用AngularJS指令，只想使用Ionic的CSS，你应该使用以下片段。
基于JavaScript的片段
以下片段只能在JavaScript文件中使用。
基于AngularJS指令的Ionic片段
选项卡
| 组件 |
代码片段 |
| ion-tabs |
ionic-tabs |
| ion-tab |
ionic-tab |
侧边菜单
| 组件 |
代码片段 |
| ion-side-menus |
ionic-side-menus |
导航
| 组件 |
代码片段 |
| ion-nav-bar |
ionic-nav-bar |
| ion-nav-view |
ionic-nav-view |
| ion-view |
ionic-view |
| ion-nav-buttons Left |
ionic-nav-buttons:左 |
| ion-nav-buttons 右 |
ionic-nav-buttons:右 |
| ion-nav-back-button |
ion-nav-back-button |
| 组件 |
代码片段 |
| ion-header-bar |
ionic-header-bar |
| ion-footer-bar |
ionic-footer-bar |
内容
| 组件 |
代码片段 |
| ion-content |
ionic-content |
| ion-pane |
ionic-pane |
| ion-refresher |
ionic-refresher |
滚动
| 组件 |
代码片段 |
| ion-scroll |
ionic-scroll |
| ion-infinite-scroll |
ionic-infinite-scrol |
列表
| 组件 |
代码片段 |
| ion-list |
ionic-list |
| ion-item |
ionic-item |
| ion-reorder-button |
ionic-reorder-button |
| ion-option-button |
ionic-option-button |
| ion-delete-button |
ionic-delete-button |
| 组件 |
代码片段 |
| ion-checkbox |
ionic-checkbox |
| ion-radio |
ionic-radio |
| ion-toggle |
ionic-toggle |
| ion-checkbox with theme |
ionic-checkbox:themecolor |
您可以在上表中用任何 themecolor，如 light、stable、positive、calm、balanced、energized、assertive、royal、dark 替代 ##themecolor。
滑块框
| 组件 |
代码片段 |
| ion-slide-box |
ionic-slide-box |
| ion-slide |
ionic-slide |
弹出菜单
| 组件 |
代码片段 |
| ion-popover-view |
ionic-popover |
简单的HTML Ionic片段
您可以在下面表格中使用任何 themecolor，如 light、stable、positive、calm、balanced、energized、assertive、royal、dark 替代 ##themecolor。
示例：ionic-css-footer:calm 用于 calming 主题的页脚。
页眉 & 页脚栏
| 组件 |
代码片段 |
| 页眉栏 |
ionic-css-header |
| 页眉栏主题 |
ionic-css-header:themecolor |
| 子页眉栏 |
ionic-css-subheader |
| 页脚栏 |
ionic-css-footer |
| 页脚栏主题 |
ionic-css-footer:themecolor |
按钮片段
| 组件 |
代码片段 |
| 按钮 |
ionic-css-button |
| 按钮主题 |
ionic-css-button:themecolor |
| 全宽按钮 |
ionic-css-button-full |
| 全宽按钮主题 |
ionic-css-button-full:themecolor |
| 大按钮 |
ionic-css-button-large |
| 大按钮主题 |
ionic-css-button-large:themecolor |
| 小按钮 |
ionic-css-button-small |
| 小按钮主题 |
ionic-css-button-small:themecolor |
| 轮廓按钮 |
ionic-css-button-outline |
| 轮廓按钮主题 |
ionic-css-button-outline:themecolor |
| 清除按钮 |
ionic-css-button-clear |
| 清除按钮主题 |
ionic-css-button-clear:themecolor |
列表片段
| 组件 |
代码片段 |
| 列表 |
ionic-css-list |
| 内嵌列表 |
ionic-css-list:inset |
| 列表项 |
ionic-css-list:item |
| 列表分隔符 |
ionic-css-list:divider |
| 具有头像的列表项 |
ionic-css-list-item:avatar |
| 具有左按钮的列表项 |
ionic-css-list-item:buttonleft |
| 具有右按钮的列表项 |
ionic-css-list-item:buttonright |
| 具有右图标的列表项 |
ionic-css-list-item:iconright |
| 具有左图标的列表项 |
ionic-css-list-item:iconleft |
| 具有右缩略图的列表项 |
ionic-css-list-item:thumbright |
| 具有左缩略图的列表项 |
ionic-css-list-item:thumbleft |
卡片片段
| 组件 |
代码片段 |
| 卡片 |
ionic-css-card |
| 卡片列表 |
ionic-css-card:list |
| 卡片分隔符 |
ionic-css-card:divider |
| 卡片展示 |
ionic-css-card:showcase |
| 带图片的卡片 |
ionic-css-card:image |
表单片段
| 组件 |
代码片段 |
| 浮动表单元素 |
ionic-css-form-floating |
| 堆叠表单元素 |
ionic-css-form-stacked |
| 内嵌表单 |
ionic-css-form-inset |
| 占位符表单元素 |
ionic-css-form-placehoder |
| 页眉表单元素 |
ionic-css-form-header |
| 内联表单元素 |
ionic-css-form-inline |
| 图标表单元素 |
ionic-css-form-icon |
切换片段
| 组件 |
代码片段 |
| 切换默认主题 |
ionic-css-toggle |
| 带有主题的切换 |
ionic-css-toggle:themecolor |
您可以在上表中用任何 themecolor，如 light、stable、positive、calm、balanced、energized、assertive、royal、dark 替代 ##themecolor。
复选框片段
| 组件 |
代码片段 |
| 复选框默认主题 |
ionic-css-checkbox |
| 带有主题的复选框 |
ionic-css-checkbox:themecolor |
您可以在上表中用任何 themecolor，如 light、stable、positive、calm、balanced、energized、assertive、royal、dark 替代 ##themecolor。
单选按钮片段
| 组件 |
代码片段 |
| 单选按钮 |
ionic-css-radio |
范围片段
| 组件 |
代码片段 |
| 范围默认主题 |
ionic-css-range |
| 带有主题的范围 |
ionic-css-range:themecolor |
您可以在上表中用任何 themecolor，如 light、stable、positive、calm、balanced、energized、assertive、royal、dark 替代 ##themecolor。
选择片段
| 组件 |
代码片段 |
| 选择元素 |
ionic-css-select |
选项卡片段
| 组件 |
代码片段 |
| 选项卡 |
ionic-css-tabs |
| 带有主题的选项卡 |
ionic-css-tabs:themecolor |
| 带图标标签 |
ionic-css-tabs-icon |
| 带图标及主题的标签 |
ionic-css-tabs-icon:themecolor |
| 顶部带图标的标签 |
ionic-css-tabs-icontop |
| 顶部带图标及主题的标签 |
ionic-css-tabs-icontop:themecolor |
| 左侧带图标的标签 |
ionic-css-tabs-iconleft |
| 左侧带图标及主题的标签 |
ionic-css-tabs-iconleft:themecolor |
您可以在上表中用任何 themecolor，如 light、stable、positive、calm、balanced、energized、assertive、royal、dark 替代 ##themecolor。
为 Ionic 的 JavaScript 代码片段
主题代码片段只会在 JS 文件中生效
操作表 JavaScript 代码片段
| 组件 |
代码片段 |
| $ionicActionSheet |
ionic-js-actionsheet |
背景 JavaScript 代码片段
| 组件 |
代码片段 |
| $ionicBackdrop |
ionic-js-backdrop |
气泡 JavaScript 代码片段
| 组件 |
代码片段 |
| $ionicPopover |
ionic-js-popover |
弹窗 JavaScript 代码片段
| 组件 |
代码片段 |
| 警报 $ionicPopup |
ionic-js-popup:alert |
| 确认 $ionicPopup |
ionic-js-popup:confirm |
| 提示 $ionicPopup |
ionic-js-popup:prompt |
广播
有时您需要广播某些事件以使 Ionic 完成某些操作，在
ionic-broadcast-* 中您可以找到所需的全部事件。
| 代码片段 |
| ionic-broadcast-infinite-scroll |
| ionic-broadcast-refresh-complete |
许可
Ionic Sublime 插件是开源软件，许可证为 MIT 许可证。
