ctrl+shift+p filters: :st2 :st3 :win :osx :linux
浏览

Ionic框架扩展自动完成

作者： Matheus Cardoso 全部

为Sublime Text提供的Ionic框架自动完成功能

标签 自动完成, 完成, Ionic框架

详细信息

  • 1.1.0
  • github.com
  • github.com
  • 9年前
  • 49分钟前
  • 9年前

安装次数

  • 总数 24K
  • Win 15K
  • Mac 6K
  • Linux 4K
8月6日 8月5日 8月4日 8月3日 8月2日 8月1日 7月31日 7月30日 7月29日 7月28日 7月27日 7月26日 7月25日 7月24日 7月23日 7月22日 7月21日 7月20日 7月19日 7月18日 7月17日 7月16日 7月15日 7月14日 7月13日 7月12日 7月11日 7月10日 7月9日 7月8日 7月7日 7月6日 7月5日 7月4日 7月3日 7月2日 7月1日 6月30日 6月29日 6月28日 6月27日 6月26日 6月25日 6月24日 6月23日 6月22日
Windows 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1
Mac 1 1 0 0 0 0 0 0 2 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0
Linux 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0

README

源代码
raw.githubusercontent.com

Ionic框架扩展自动完成

这是目前最完整用于自动完成Ionic框架指令、服务和元素的Sublime Text插件。

与其他插件不同的是，此插件旨在成为帮助您使用Ionic构建优秀应用最实用的工具，但它并不旨在超越您对框架的必要知识。

如果您想要创建一个项目列表，例如，您必须知道什么元素是"Ionic List"的一部分，因为Ionic框架扩展自动完成只会帮助您处理元素。

<ion-list> 

    <ion-item href="#"></ion-item>
</ion-list>

<div class="list">

    <a class="item">

    </a>
</div>

那么，为什么使用此插件呢？

Ionic框架扩展自动完成几乎包含了所有的Ionic指令html完成选项，并且有超过300个元素和服务的片段，包括颜色和类型组合！它基于最新版本，即v1.0.0-rc.1“osmium-ostrich”。

让我们看另一个例子。如果您想要一个缩略图列表，只需创建一个具有list类名的DIV（或使用也提供的ion-list），然后搜索ion-item-thumbnail-left（或如果需要则使用right）即可。

<div class="list">
    <a class="item item-thumbnail-left" href="#">
        <img src="image_source">
        <h2>title</h2>
        <p>description</p>
    </a>
</div>

再次强调，此插件不会为您生成完整的缩略图列表，但会帮助您更快地构建列表，前提是您知道如何构建它。明白了没？

您可以在这里查看整个插件引用。

如何贡献力量？

您可以通过提交问题、分叉并发送拉取请求来贡献力量。尝试修改或添加两个文件："html_completions.py”和“snippets.py”。

第一个是一个基本的Sublime Text插件文件，用于处理html自动完成。若要更改或添加Ionic指令，请参考html_completions.py文件。

最后一个是一个普通的 Python 脚本。它处理所有片段文件的生成（你以为我会手动创建所有这些文件吗？）。因此，如果你想提交一个新的片段或对现有的进行修复，请参考 snippets.py 文件。

一起贡献，让我们为惊人的 Ionic 框架制作一个更好的插件吧。:D

最后，如何安装这个出色的插件？

  1. 首先，如果你还没有安装，你必须安装包控制；
  2. 安装后，打开 命令面板 并搜索 Ionic 框架扩展自动完成 并安装它。

这样就完成了。你不需要进行任何配置。只需安装它，使用它，并立即开始开发一个新的精彩的 Ionic 应用。

致谢

有两个与 ST2/ST3 相关的插件，为 Ionic 框架提供片段和补全。它们是

它们远未涵盖此插件的功能，但它们有不同的方法。它们提供大片段（第二个，在最近的更新中已破损一些部分）而不是元素的部分。如果你对生成整个内容如标签页、列表（带有预定义的项目）等感兴趣，请参考它们。

我要说的是，Ionic - Sublime 插件 是我的灵感来源。在早期版本中，我甚至为插件做贡献。但我想对生成的结果有更多的控制，因此我开发了此插件。

参考

你可以按照以下提示轻松弄清此插件在 ST2/ST3 中如何工作：- 在 HTML 中，你只需输入“<”后跟“ion”，所有指令就会显示给你；

  • 仍然在 HTML 中，对于 CSS 组件，只需输入“ionic-”，片段就会弹出；

  • 在 JS 脚本中，大多数片段都是服务。所以只需输入“$”后跟“ionic”，服务就会为你呈现；

  • 例外的是实用片段，如“ionic.Platform”或“ionic.DomUtil”。你可以通过输入“ionic”之后跟大写字母来找到这些片段，分别是“ionicPlatform”和“ionicDomUtil”；

不过，为了以防万一，整个参考都被放在下面。祝你玩得开心。:)

CSS 组件

JavaScript

CSS 组件

页眉

触发器 - ionic-header-assertive: “HTML

Trigger -  **ionic-header-balanced:** 
```HTML
<div class="bar bar-header bar-balanced"> 
     <h1 class="title"></h1> 
</div>

触发器 - ionic-header-calm: “HTML

Trigger -  **ionic-header-dark:** 
```HTML
<div class="bar bar-header bar-dark"> 
     <h1 class="title"></h1> 
</div>

触发器 - ionic-header-energized: “HTML

Trigger -  **ionic-header-light:** 
```HTML
<div class="bar bar-header bar-light"> 
     <h1 class="title"></h1> 
</div>

触发器 - ionic-header-positive: “HTML

Trigger -  **ionic-header-royal:** 
```HTML
<div class="bar bar-header bar-royal"> 
     <h1 class="title"></h1> 
</div>

触发器 - ionic-header-stable: “HTML

<h2 id="css_footer">Footer</h2>

Trigger -  **ionic-footer-assertive:** 
```HTML
<div class="bar bar-footer bar-assertive"> 
     <div class="title"></div> 
</div>

触发器 - ionic-footer-balanced: “HTML

Trigger -  **ionic-footer-calm:** 
```HTML
<div class="bar bar-footer bar-calm"> 
     <div class="title"></div> 
</div>

触发器 - ionic-footer-dark: “HTML

Trigger -  **ionic-footer-energized:** 
```HTML
<div class="bar bar-footer bar-energized"> 
     <div class="title"></div> 
</div>

触发器 - ionic-footer-light: “HTML

Trigger -  **ionic-footer-positive:** 
```HTML
<div class="bar bar-footer bar-positive"> 
     <div class="title"></div> 
</div>

触发器 - ionic-footer-royal: “HTML

Trigger -  **ionic-footer-stable:** 
```HTML
<div class="bar bar-footer bar-stable"> 
     <div class="title"></div> 
</div>

按钮

触发器 - ionic-button-assertive: “HTML

Trigger -  **ionic-button-balanced:** 
```HTML
<button class="button button-balanced"></button>

触发器 - ionic-button-bar-assertive: “HTML

Trigger -  **ionic-button-bar-balanced:** 
```HTML
<div class="button-bar bar-balanced"></div>

触发器 - ionic-button-bar-calm: “HTML

Trigger -  **ionic-button-bar-dark:** 
```HTML
<div class="button-bar bar-dark"></div>

触发器 - ionic-button-bar-energized: “HTML

Trigger -  **ionic-button-bar-light:** 
```HTML
<div class="button-bar bar-light"></div>

触发器 - ionic-button-bar-positive: “HTML

Trigger -  **ionic-button-bar-royal:** 
```HTML
<div class="button-bar bar-royal"></div>

触发器 - ionic-button-bar-stable: “HTML

Trigger -  **ionic-button-block-assertive:** 
```HTML
<button class="button button-block button-assertive"></button>

触发器 - ionic-button-block-balanced: “HTML

Trigger -  **ionic-button-block-calm:** 
```HTML
<button class="button button-block button-calm"></button>

触发器 - ionic-button-block-dark: “HTML

Trigger -  **ionic-button-block-energized:** 
```HTML
<button class="button button-block button-energized"></button>

触发器 - ionic-button-block-light: “HTML

Trigger -  **ionic-button-block-positive:** 
```HTML
<button class="button button-block button-positive"></button>

触发器 - ionic-button-block-royal: “HTML

Trigger -  **ionic-button-block-stable:** 
```HTML
<button class="button button-block button-stable"></button>

触发器 - ionic-button-calm: “HTML

Trigger -  **ionic-button-clear-assertive:** 
```HTML
<button class="button button-clear button-assertive"></button>

触发器 - ionic-button-clear-balanced: “HTML

Trigger -  **ionic-button-clear-calm:** 
```HTML
<button class="button button-clear button-calm"></button>

触发器 - ionic-button-clear-dark: ”HTML

Trigger -  **ionic-button-clear-energized:** 
```HTML
<button class="button button-clear button-energized"></button>

触发器 - ionic-button-clear-light: “HTML

Trigger -  **ionic-button-clear-positive:** 
```HTML
<button class="button button-clear button-positive"></button>

触发器 - ionic-button-clear-royal: ”HTML

Trigger -  **ionic-button-clear-stable:** 
```HTML
<button class="button button-clear button-stable"></button>

触发器 - ionic-button-dark: “HTML

Trigger -  **ionic-button-energized:** 
```HTML
<button class="button button-energized"></button>

触发器 - ionic-button-full-assertive: ”HTML

Trigger -  **ionic-button-full-balanced:** 
```HTML
<button class="button button-full button-balanced"></button>

触发器 - ionic-button-full-calm: “HTML

Trigger -  **ionic-button-full-dark:** 
```HTML
<button class="button button-full button-dark"></button>

触发器 - ionic-button-full-energized: ”HTML

Trigger -  **ionic-button-full-light:** 
```HTML
<button class="button button-full button-light"></button>

触发器 - ionic-button-full-positive: “HTML

Trigger -  **ionic-button-full-royal:** 
```HTML
<button class="button button-full button-royal"></button>

触发器 - ionic-button-full-stable: ”HTML

Trigger -  **ionic-button-icon-left-assertive:** 
```HTML
<button class="button icon-left ionicon button-assertive"></button>

触发器 - ionic-button-icon-left-balanced: “HTML

Trigger -  **ionic-button-icon-left-calm:** 
```HTML
<button class="button icon-left ionicon button-calm"></button>

触发器 - ionic-button-icon-left-dark: ”HTML

Trigger -  **ionic-button-icon-left-energized:** 
```HTML
<button class="button icon-left ionicon button-energized"></button>

触发器 - ionic-button-icon-left-light: “HTML

Trigger -  **ionic-button-icon-left-positive:** 
```HTML
<button class="button icon-left ionicon button-positive"></button>

触发器 - ionic-button-icon-left-royal: ”HTML

Trigger -  **ionic-button-icon-left-stable:** 
```HTML
<button class="button icon-left ionicon button-stable"></button>

触发器 - ionic-button-icon-right-assertive: “HTML

Trigger -  **ionic-button-icon-right-balanced:** 
```HTML
<button class="button icon-right ionicon button-balanced"></button>

触发器 - ionic-button-icon-right-calm: ”HTML

Trigger -  **ionic-button-icon-right-dark:** 
```HTML
<button class="button icon-right ionicon button-dark"></button>

触发器 - ionic-button-icon-right-energized: ”HTML

Trigger -  **ionic-button-icon-right-light:** 
```HTML
<button class="button icon-right ionicon button-light"></button>

触发器 - ionic-button-icon-right-positive: ”HTML

Trigger -  **ionic-button-icon-right-royal:** 
```HTML
<button class="button icon-right ionicon button-royal"></button>

触发器 - ionic-button-icon-right-stable: ”HTML

Trigger -  **ionic-button-large-assertive:** 
```HTML
<button class="button button-large button-assertive"></button>

触发器 - ionic-button-large-balanced: ”HTML

Trigger -  **ionic-button-large-calm:** 
```HTML
<button class="button button-large button-calm"></button>

触发器 - ionic-button-large-dark: “HTML

Trigger -  **ionic-button-large-energized:** 
```HTML
<button class="button button-large button-energized"></button>

触发器 - ionic-button-large-light: ”HTML

Trigger -  **ionic-button-large-positive:** 
```HTML
<button class="button button-large button-positive"></button>

触发器 - ionic-button-large-royal: “HTML

Trigger -  **ionic-button-large-stable:** 
```HTML
<button class="button button-large button-stable"></button>

触发器 - ionic-button-light: ”HTML

Trigger -  **ionic-button-outline-assertive:** 
```HTML
<button class="button button-outline button-assertive"></button>

触发器 - ionic-button-outline-balanced: “HTML

Trigger -  **ionic-button-outline-calm:** 
```HTML
<button class="button button-outline button-calm"></button>

触发器 - ionic-button-outline-dark: ”HTML

Trigger -  **ionic-button-outline-energized:** 
```HTML
<button class="button button-outline button-energized"></button>

触发器 - ionic-button-outline-light: “HTML

Trigger -  **ionic-button-outline-positive:** 
```HTML
<button class="button button-outline button-positive"></button>

触发器 - ionic-button-outline-royal: ”HTML

Trigger -  **ionic-button-outline-stable:** 
```HTML
<button class="button button-outline button-stable"></button>

触发器 - ionic-button-positive: “HTML

Trigger -  **ionic-button-royal:** 
```HTML
<button class="button button-royal"></button>

触发器 - ionic-button-small-assertive: ”HTML

Trigger -  **ionic-button-small-balanced:** 
```HTML
<button class="button button-small button-balanced"></button>

触发器 - ionic-button-small-calm: “HTML

Trigger -  **ionic-button-small-dark:** 
```HTML
<button class="button button-small button-dark"></button>

触发器 - ionic-button-small-energized: ”HTML

Trigger -  **ionic-button-small-light:** 
```HTML
<button class="button button-small button-light"></button>

触发器 - ionic-button-small-positive: “HTML

Trigger -  **ionic-button-small-royal:** 
```HTML
<button class="button button-small button-royal"></button>

触发器 - ionic-button-small-stable: ”HTML

Trigger -  **ionic-button-stable:** 
```HTML
<button class="button button-stable"></button>

列表

触发器 - ionic-collection-repeat: “HTML

Trigger -  **ionic-item-avatar:** 
```HTML
<a class="item item-avatar" href="#">
    <img src="image_source">
    <h2>title</h2>
    <p>description</p>
</a>

触发器 - ionic-item-button-left: ”HTML 

Trigger -  **ionic-item-button-right:** 
```HTML
<a class="item item-button-right" href="#"></a>

触发器 - ionic-item-divider: “HTML

Trigger -  **ionic-item-icon-left-right:** 
```HTML
<a class="item item-icon-left item-icon-right" href="#"></a>

触发器 - ionic-item-icon-left: ”HTML 

Trigger -  **ionic-item-icon-right:** 
```HTML
<a class="item item-icon-right" href="#"></a>

触发器 - ionic-item-thumbnail-left: “HTML

标题

描述

Trigger -  **ionic-item-thumbnail-right:** 
```HTML
<a class="item item-thumbnail-right" href="#">
    <img src="image_source">
    <h2>title</h2>
    <p>description</p>
</a>

触发器 - ionic-item: ”HTML 

Trigger -  **ionic-list-inset:** 
```HTML
<div class="list list-inset"></div>

卡片

触发器 - ionic-card-footer: “HTML

描述
页脚
Trigger -  **ionic-card-header-footer:** 
```HTML
<div class="card">
    <div class="item item-divider">
        header
    </div>
    <div class="item item-text-wrap">
        desc
    </div>
    <div class="item item-divider">
        footer
    </div>
</div>

触发器 - ionic-card-header: ”HTML

头部
描述
Trigger -  **ionic-card-image:** 
```HTML
<div class="item item-avatar" href="#">
    <img src="image_source">
    <h2>title</h2>
    <p>description</p>
</div>
<div class="item item-image">
    <img src="image_source">
</div>
<a class="item item-icon-left assertive" href="#">
    <i class="icon ionicon"></i>
    text_link
</a>

触发器 - ionic-card-list-item: “HTML 描述 

Trigger -  **ionic-card-list:** 
```HTML
<div class="list card">

</div>

触发器 - ionic-card-showcase: ”HTML

标题

描述

描述

1 点赞 5 评论

点赞 评论 分享 
Trigger -  **ionic-card:** 

```HTML
<div class="card">
    <div class="item item-text-wrap">
        desc
    </div>
</div>

表单

触发器 - ionic-input-floating:

<label class="item item-input item-floating-label">
    <span class="input-label">input_name}</span>
    <input type="text" placeholder="input_placeholder">
</label>

触发器 - ionic-input-header:

<div class="bar bar-header item-input-inset">
    <label class="item-input-wrapper">
        <i class="icon ion-ios7-search placeholder-icon"></i>
        <input type="search" placeholder="Search">
    </label>
    <button class="button button-clear">
        Cancel
    </button>
</div>

触发器 - ionic-input-icon:

<label class="item item-input">
    <i class="icon ion-search placeholder-icon"></i>
    <input type="text" placeholder="Search">
</label>

触发器 - ionic-input-inline:

<label class="item item-input">
    <span class="input-label">input_name</span>
    <input type="text">
</label>

触发器 - ionic-input-inset:

<div class="item item-input-inset">
    <label class="item-input-wrapper">
        <input type="text" placeholder="input_placeholder">
    </label>
    <button class="button button-small">
        button_name
    </button>
</div>

触发器 - ionic-input-placeholder:

<label class="item item-input">
    <input type="text" placeholder="placeholder_1">
</label>

触发器 - ionic-input-stacked:

<label class="item item-input item-stacked-label">
    <span class="input-label">input_name</span>
    <input type="text" placeholder="input_placeholder">
</label>

切换

触发器 - ionic-toggle-assertive:

<li class="item item-toggle">
    desc
    <label class="toggle toggle-assertive">
        <input type="checkbox">
        <div class="track">
            <div class="handle"></div>
        </div>
    </label>
</li>

触发器 - ionic-toggle-balanced:

<li class="item item-toggle">
    desc
    <label class="toggle toggle-balanced">
        <input type="checkbox">
        <div class="track">
            <div class="handle"></div>
        </div>
    </label>
</li>

触发器 - ionic-toggle-calm:

<li class="item item-toggle">
    desc
    <label class="toggle toggle-calm">
        <input type="checkbox">
        <div class="track">
            <div class="handle"></div>
        </div>
    </label>
</li>

触发器 - ionic-toggle-dark:

<li class="item item-toggle">
    desc
    <label class="toggle toggle-dark">
        <input type="checkbox">
        <div class="track">
            <div class="handle"></div>
        </div>
    </label>
</li>

触发器 - ionic-toggle-energized:

<li class="item item-toggle">
    desc
    <label class="toggle toggle-energized">
        <input type="checkbox">
        <div class="track">
            <div class="handle"></div>
        </div>
    </label>
</li>

触发器 - ionic-toggle-light:

<li class="item item-toggle">
    desc
    <label class="toggle toggle-light">
        <input type="checkbox">
        <div class="track">
            <div class="handle"></div>
        </div>
    </label>
</li>

触发器 - ionic-toggle-positive:

<li class="item item-toggle">
    desc
    <label class="toggle toggle-positive">
        <input type="checkbox">
        <div class="track">
            <div class="handle"></div>
        </div>
    </label>
</li>

触发器 - ionic-toggle-royal:

<li class="item item-toggle">
    desc
    <label class="toggle toggle-royal">
        <input type="checkbox">
        <div class="track">
            <div class="handle"></div>
        </div>
    </label>
</li>

触发器 - ionic-toggle-stable:

<li class="item item-toggle">
    desc
    <label class="toggle toggle-stable">
        <input type="checkbox">
        <div class="track">
            <div class="handle"></div>
        </div>
    </label>
</li>

复选框

触发器 - ionic-checkbox-assertive:

<li class="item item-checkbox">
    <label class="checkbox checkbox-assertive">
        <input type="checkbox">
    </label>
    desc
</li>

触发器 - ionic-checkbox-balanced:

<li class="item item-checkbox">
    <label class="checkbox checkbox-balanced">
        <input type="checkbox">
    </label>
    desc
</li>

触发器 - ionic-checkbox-calm:

<li class="item item-checkbox">
    <label class="checkbox checkbox-calm">
        <input type="checkbox">
    </label>
    desc
</li>

触发器 - ionic-checkbox-dark:

<li class="item item-checkbox">
    <label class="checkbox checkbox-dark">
        <input type="checkbox">
    </label>
    desc
</li>

触发器 - ionic-checkbox-energized:

<li class="item item-checkbox">
    <label class="checkbox checkbox-energized">
        <input type="checkbox">
    </label>
    desc
</li>

触发器 - ionic-checkbox-light:

<li class="item item-checkbox">
    <label class="checkbox checkbox-light">
        <input type="checkbox">
    </label>
    desc
</li>

触发器 - ionic-checkbox-positive:

<li class="item item-checkbox">
    <label class="checkbox checkbox-positive">
        <input type="checkbox">
    </label>
    desc
</li>

触发器 - ionic-checkbox-royal:

<li class="item item-checkbox">
    <label class="checkbox checkbox-royal">
        <input type="checkbox">
    </label>
    desc
</li>

触发器 - ionic-checkbox-stable:

<li class="item item-checkbox">
    <label class="checkbox checkbox-stable">
        <input type="checkbox">
    </label>
    desc
</li>

单选按钮

触发器 - ionic-radio-button:

<label class="item item-radio">
    <input type="radio" name="group">
    <div class="item-content">
        desc
    </div>
    <i class="radio-icon ion-checkmark"></i>
</label>

范围

触发器 - ionic-range-assertive:

<div class="range range-assertive">
    <i class="icon ion-volume-low"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>
</div>

触发器 - ionic-range-balanced:

<div class="range range-balanced">
    <i class="icon ion-volume-low"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>
</div>

触发器 - ionic-range-calm:

<div class="range range-calm">
    <i class="icon ion-volume-low"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>
</div>

触发器 - ionic-range-dark:

<div class="range range-dark">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

触发器 - ionic-range-energized:

<div class="range range-energized">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

触发器 - ionic-range-item-assertive:

<div class="item range range-assertive">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

触发器 - ionic-range-item-balanced:

<div class="item range range-balanced">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

触发器 - ionic-range-item-calm:

<div class="item range range-calm">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

触发器 - ionic-range-item-dark:

<div class="item range range-dark">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

触发器 - ionic-range-item-energized:

<div class="item range range-energized">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

触发器 - ionic-range-item-light:

<div class="item range range-light">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>
</div>

触发器 - ionic-range-item-positive:

<div class="item range range-positive">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

触发器 - ionic-range-item-royal:

<div class="item range range-royal">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

触发器 - ionic-range-item-stable:

<div class="item range range-stable">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

触发器 - ionic-range-light:

<div class="range range-light">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

触发器 - ionic-range-positive:

<div class="range range-positive">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

触发器 - ionic-range-royal:

<div class="range range-royal">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

触发器 - ionic-range-stable:

<div class="range range-stable">
    <i class="icon ion-volume-low}"></i>
    <input type="range" name="volume" min="0" max="100" value="33">
    <i class="icon ion-volume-high"></i>

</div>

选择

触发器 - ionic-select-assertive:

<label class="item item-input item-select item-assertive">
    <div class="input-label">
        desc
    </div>
    <select>
        <option selected>opt1</option>
        <option>opt2</option>
    <select>
</label>

触发器 - ionic-select-balanced:

<label class="item item-input item-select item-balanced">
    <div class="input-label">
        desc
    </div>
    <select>
        <option selected>opt1</option>
        <option>opt2</option>
    <select>
</label>

触发器 - ionic-select-calm:

<label class="item item-input item-select item-calm">
    <div class="input-label">
        desc
    </div>
    <select>
        <option selected>opt1</option>
        <option>opt2</option>
    <select>
</label>

触发器 - ionic-select-dark:

<label class="item item-input item-select item-dark">
    <div class="input-label">
        desc
    </div>
    <select>
        <option selected>opt1</option>
        <option>opt2</option>
    <select>
</label>

触发器 - ionic-select-energized:

<label class="item item-input item-select item-energized">
    <div class="input-label">
        desc
    </div>
    <select>
        <option selected>opt1</option>
        <option>opt2</option>
    <select>
</label>

触发器 - ionic-select-light:

<label class="item item-input item-select item-light">
    <div class="input-label">
        desc
    </div>
    <select>
        <option selected>opt1</option>
        <option>opt2</option>
    <select>
</label>

触发器 - ionic-select-positive:

<label class="item item-input item-select item-positive">
    <div class="input-label">
        desc
    </div>
    <select>
        <option selected>opt1</option>
        <option>opt2</option>
    <select>
</label>

触发器 - ionic-select-royal:

<label class="item item-input item-select item-royal">
    <div class="input-label">
        desc
    </div>
    <select>
        <option selected>opt1</option>
        <option>opt2</option>
    <select>
</label>

触发器 - ionic-select-stable:

<label class="item item-input item-select item-stable">
    <div class="input-label">
        desc
    </div>
    <select>
        <option selected>opt1</option>
        <option>opt2</option>
    <select>
</label>

标签页

触发器 - ionic-tabs-assertive:

<div class="tabs tabs-assertive"></div>

触发器 - ionic-tabs-balanced:

<div class="tabs tabs-balanced"></div>

触发器 - ionic-tabs-calm:

<div class="tabs tabs-calm"></div>

触发器 - ionic-tabs-dark:

<div class="tabs tabs-dark"></div>

触发器 - ionic-tabs-energized:

<div class="tabs tabs-energized"></div>

触发器 - ionic-tabs-icon-left-assertive:

<div class="tabs tabs-icon-left tabs-assertive"></div>

触发器 - ionic-tabs-icon-left-balanced:

<div class="tabs tabs-icon-left tabs-balanced"></div>

触发器 - ionic-tabs-icon-left-calm:

<div class="tabs tabs-icon-left tabs-calm"></div>

触发器 - ionic-tabs-icon-left-dark:

<div class="tabs tabs-icon-left tabs-dark"></div>

触发器 - ionic-tabs-icon-left-energized:

<div class="tabs tabs-icon-left tabs-energized"></div>

触发器 - ionic-tabs-icon-left-light:

<div class="tabs tabs-icon-left tabs-light"></div>

触发器 - ionic-tabs-icon-left-positive:

<div class="tabs tabs-icon-left tabs-positive"></div>

触发器 - ionic-tabs-icon-left-royal:

<div class="tabs tabs-icon-left tabs-royal"></div>

触发器 - ionic-tabs-icon-left-stable:

<div class="tabs tabs-icon-left tabs-stable"></div>

触发器 - ionic-tabs-icon-only-assertive:

<div class="tabs tabs-icon-only tabs-assertive"></div>

触发器 - ionic-tabs-icon-only-balanced:

<div class="tabs tabs-icon-only tabs-balanced"></div>

触发器 - ionic-tabs-icon-only-calm:

<div class="tabs tabs-icon-only tabs-calm"></div>

触发器 - ionic-tabs-icon-only-dark:

<div class="tabs tabs-icon-only tabs-dark"></div>

触发器 - ionic-tabs-icon-only-energized:

<div class="tabs tabs-icon-only tabs-energized"></div>

触发器 - ionic-tabs-icon-only-light:

<div class="tabs tabs-icon-only tabs-light"></div>

触发器 - ionic-tabs-icon-only-positive:

<div class="tabs tabs-icon-only tabs-positive"></div>

触发器 - ionic-tabs-icon-only-royal:

<div class="tabs tabs-icon-only tabs-royal"></div>

触发器 - ionic-tabs-icon-only-stable:

<div class="tabs tabs-icon-only tabs-stable"></div>

触发器 - ionic-tabs-icon-top-assertive:

<div class="tabs tabs-icon-top tabs-assertive"></div>

触发器 - ionic-tabs-icon-top-balanced:

<div class="tabs tabs-icon-top tabs-balanced"></div>

触发器 - ionic-tabs-icon-top-calm:

<div class="tabs tabs-icon-top tabs-calm"></div>

触发器 - ionic-tabs-icon-top-dark:

<div class="tabs tabs-icon-top tabs-dark"></div>

触发器 - ionic-tabs-icon-top-energized:

<div class="tabs tabs-icon-top tabs-energized"></div>

触发器 - ionic-tabs-icon-top-light:

<div class="tabs tabs-icon-top tabs-light"></div>

触发器 - ionic-tabs-icon-top-positive:

<div class="tabs tabs-icon-top tabs-positive"></div>

触发器 - ionic-tabs-icon-top-royal:

<div class="tabs tabs-icon-top tabs-royal"></div>

触发器 - ionic-tabs-icon-top-stable:

<div class="tabs tabs-icon-top tabs-stable"></div>

触发器 - ionic-tabs-item-icon:

<a class="tab-item" href="#">
    <i class="icon ion-home"></i>

</a>

触发器 - ionic-tabs-item:

<a class="tab-item" href="#">
    Tab}
</a>

触发器 - ionic-tabs-light:

<div class="tabs tabs-light"></div>

触发器 - ionic-tabs-positive:

<div class="tabs tabs-positive"></div>

触发器 - ionic-tabs-royal:

<div class="tabs tabs-royal"></div>

触发器 - ionic-tabs-stable:

<div class="tabs tabs-stable"></div>

触发器 - ionic-tabs-striped-assertive:

<div class="tabs-striped tabs-color-assertive"></div>

触发器 - ionic-tabs-striped-balanced:

<div class="tabs-striped tabs-color-balanced"></div>

触发器 - ionic-tabs-striped-calm:

<div class="tabs-striped tabs-color-calm"></div>

触发器 - ionic-tabs-striped-dark:

<div class="tabs-striped tabs-color-dark"></div>

触发器 - ionic-tabs-striped-energized:

<div class="tabs-striped tabs-color-energized"></div>

触发器 - ionic-tabs-striped-light:

<div class="tabs-striped tabs-color-light"></div>

触发器 - ionic-tabs-striped-positive:

<div class="tabs-striped tabs-color-positive"></div>

触发器 - ionic-tabs-striped-royal:

<div class="tabs-striped tabs-color-royal"></div>

触发器 - ionic-tabs-striped-stable:

<div class="tabs-striped tabs-color-stable"></div>

JavaScript

操作表

触发器 - $ionicActionSheet.show:

$ionicActionSheet.show({
        buttons: [
            { text: "Button text 1" },
            { text: "Move" }
        ],
        destructiveText: "Delete",
        titleText: "Title",
        cancelText: "Cancel",
        cancel: function() {
            your code goes here
        },
        buttonClicked: function(index) {
            return true;
        }
});

背景板

触发器 - $ionicBackdrop.release:

$ionicBackdrop.release();

触发器 - $ionicBackdrop.retain:

$ionicBackdrop.retain();

内容

触发器 - $ionicScrollDelegate.anchorScroll:

$ionicScrollDelegate.anchorScroll(shouldAnimate)

触发器 - $ionicScrollDelegate.getByHandle:

$ionicScrollDelegate.$getByHandle(handle)

触发器 - $ionicScrollDelegate.getScrollPosition:

$ionicScrollDelegate.getScrollPosition()

触发器 - $ionicScrollDelegate.getScrollView:

$ionicScrollDelegate.getScrollView()

触发器 - $ionicScrollDelegate.resize:

$ionicScrollDelegate.resize()

触发器 - $ionicScrollDelegate.scrollBottom:

$ionicScrollDelegate.scrollBottom(shouldAnimate)

触发器 - $ionicScrollDelegate.scrollBy:

$ionicScrollDelegate.scrollBy(left, top, shouldAnimate)

触发器 - $ionicScrollDelegate.scrollTo:

$ionicScrollDelegate.scrollTo(left, top, shouldAnimate)

触发器 - $ionicScrollDelegate.scrollTop:

$ionicScrollDelegate.scrollTop(shouldAnimate)

触发器 - $ionicScrollDelegate.zoomBy:

$ionicScrollDelegate.zoomBy(factor, animate, originLeft, originTop)

触发器 - $ionicScrollDelegate.zoomTo:

$ionicScrollDelegate.zoomTo(level, animate, originLeft, originTop)

触发器 - <ion-content :

<ion-content has-subheader="false"></ion-content>

触发器 - <ion-refresher :

<ion-refresher pulling-text="Pull to refresh..." on-refresh="doRefresh()"></ion-refresher>

触发器 - <ion-pane :

<ion-pane></ion-pane>

表单输入

触发器 - <ion-checkbox :

<ion-checkbox ng-model="isChecked">Checkbox Label</ion-checkbox>

触发器 - <ion-radio :

<ion-radio ng-model="choice" ng-value="\'A\'">Choose A</ion-radio>

触发器 - <ion-toogle :

<ion-toggle ng-model="airplaneMode" toggle-class="toggle-calm">Airplane Mode</ion-toggle>

页眉/页脚

触发器 - <ion-header-bar :

<ion-header-bar align-title="left" class="bar-positive"></ion-header-bar>

触发器 - <ion-footer-bar :

<ion-footer-bar ion-footer-bar align-title="left" class="bar-assertive"></ion-footer-bar>

列表

触发器 - $ionicListDelegate.canSwipeItems:

$ionicListDelegate.canSwipeItems(true});

触发器 - $ionicListDelegate.closeOptionButtons:

$ionicListDelegate.closeOptionButtons();

触发器 - $ionicListDelegate.showDelete:

$ionicListDelegate.showDelete(true);

触发器 - $ionicListDelegate.showReorder:

$ionicListDelegate.showReorder(true);

触发器 - <ion-list :

<ion-list></ion-list>

触发器 - <ion-item :

<ion-item href="#"></ion-item>

触发器 - <ion-delete-button :

<ion-delete-button class="ion-minus-circled"></ion-delete-button>

触发器 - <ion-reorder-button :

<ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>

触发器 - <ion-option-button :

<ion-option-button class="button-positive"></ion-option-button>

加载

触发器 - $ionicLoading.hide:

$ionicLoading.hide()

触发器 - $ionicLoading.show:

$ionicLoading.show({
    template: "Loading..."
});

模态框

触发器 - $ionicModal.fromTemplate:

$ionicModal.fromTemplate(templateString, options)

触发器 - $ionicModal.fromTemplateUrl:

$ionicModal.fromTemplateUrl(templateUrl, options)

触发器 - <ion-modal-view :

<ion-modal-view></ion-modal-view>

导航

触发器 - $ionicHistory.backTitle:

$ionicHistory.backTitle()

触发器 - $ionicHistory.backView:

$ionicHistory.backView()

触发器 - $ionicHistory.clearCache:

$ionicHistory.clearCache()

触发器 - $ionicHistory.clearHistory:

$ionicHistory.clearHistory()

触发器 - $ionicHistory.currentHistoryId:

$ionicHistory.currentHistoryId()

触发器 - $ionicHistory.currentStateName:

$ionicHistory.currentStateName()

触发器 - $ionicHistory.currentTitle:

$ionicHistory.currentTitle(val)

触发器 - $ionicHistory.currentView:

$ionicHistory.currentView()

触发器 - $ionicHistory.forwardView:

$ionicHistory.forwardView()

触发器 - $ionicHistory.goBack:

$ionicHistory.goBack()

触发器 - $ionicHistory.nextViewOptions:

$ionicHistory.nextViewOptions(
    disableAnimate: true,
     disableBack: true
)

触发器 - $ionicHistory.viewHistory:

$ionicHistory.viewHistory()

触发器 - $ionicNavBarDelegate.align:

$ionicNavBarDelegate.align(direction)

触发器 - $ionicNavBarDelegate.back:

$ionicNavBarDelegate.back()

触发器 - $ionicNavBarDelegate.showBackButton:

$ionicNavBarDelegate.showBackButton(show)

触发器 - $ionicNavBarDelegate.showBar:

$ionicNavBarDelegate.showBar(show)

触发器 - $ionicNavBarDelegate.title:

$ionicNavBarDelegate.title(title)

触发器 - $ionicView.afterEnter:

$scope.$on("$ionicView.afterEnter", function () {

});

触发器 - $ionicView.afterLeave:

$scope.$on("$ionicView.afterLeave", function () {

});

触发器 - $ionicView.beforeEnter:

$scope.$on("$ionicView.beforeEnter", function () {

});

触发器 - $ionicView.beforeLeave:

$scope.$on("$ionicView.beforeLeave", function () {

});

触发器 - $ionicView.enter:

$scope.$on("$ionicView.enter", function () {

});

触发器 - $ionicView.leave:

$scope.$on("$ionicView.leave", function () {

});

触发器 - $ionicView.loaded:

$scope.$on("$ionicView.loaded", function () {

});

触发器 - $ionicView.unloaded:

$scope.$on("$ionicView.unloaded", function () {

});

触发器 - <ion-nav-view :

<ion-nav-view view-title="Your Title!"></ion-view>

触发器 - <ion-nav-bar :

<ion-nav-bar class="bar-positive" align-title="left"></ion-nav-bar>

触发器 - <ion-nav-buttons :

<ion-nav-buttons side="primary"></ion-nav-buttons>

触发器 - <ion-nav-back-button :

<ion-nav-back-button class="button-clear"></ion-nav-back-button>

触发器 - <ion-nav-title :

<ion-nav-title></ion-nav-title>

平台

触发器 - $ionicPlatform.offHardwareBackButton:

$ionicPlatform.offHardwareBackButton(callback)

触发器 - $ionicPlatform.on:

$ionicPlatform.on(type, callback)

触发器 - $ionicPlatform.onHardwareBackButton:

$ionicPlatform.onHardwareBackButton(callback)

触发器 - $ionicPlatform.ready:

$ionicPlatform.ready()

触发器 - $ionicPlatform.registerBackButtonAction:

$ionicPlatform.registerBackButtonAction(callback, priority)

弹出框

触发器 - $ionicPopover.fromTemplate:

$ionicPopover.fromTemplate(templateString, {
     options
});

触发器 - $ionicPopover.fromTemplateUrl:

$ionicPopover.fromTemplateUrl(templateUrl, {
     options
})

弹出

触发器 - $ionicPopup.alert:

$ionicPopup.alert({
    title: $1,
    template: $2
});

触发器 - $ionicPopup.confirm:

$ionicPopup.confirm({
    title: $1,
    template: $2
});

触发器 - $ionicPopup.prompt:

$ionicPopup.prompt({
    title: $1,
    template: $2,
    inputType: $3,
    inputPlaceholder: $4
})

触发器 - $ionicPopup.show:

$ionicPopup.show({
    template: $1,
    title: $2,
    subTitle: $3,
    scope: $scope,
    buttons: [$4]
});

滚动

触发器 - <ion-scroll :

<ion-scroll zooming=\"true\" direction=\"xy\" style=\"width: 500px; height: 500px\"></ion-scroll>

触发器 - <ion-infinite-scroll :

<ion-infinite-scroll on-infinite="loadMore()"></ion-infinite-scroll>

侧边菜单

触发器 - $ionicSideMenuDelegate.$getByHandle:

$ionicSideMenuDelegate.$getByHandle(handle)

触发器 - $ionicSideMenuDelegate.canDragContent:

$ionicSideMenuDelegate.canDragContent()

触发器 - $ionicSideMenuDelegate.edgeDragThreshold:

$ionicSideMenuDelegate.edgeDragThreshold(value)

触发器 - $ionicSideMenuDelegate.$getByHandle:

$ionicSideMenuDelegate.$getByHandle(handle)

触发器 - $ionicSideMenuDelegate.getOpenRatio:

$ionicSideMenuDelegate.getOpenRatio()

触发器 - $ionicSideMenuDelegate.isOpen:

$ionicSideMenuDelegate.isOpen()

触发器 - $ionicSideMenuDelegate.isOpenLeft:

$ionicSideMenuDelegate.isOpenLeft()

触发器 - $ionicSideMenuDelegate.isOpenRight:

$ionicSideMenuDelegate.isOpenRight()

触发器 - $ionicSideMenuDelegate.toggleLeft:

$ionicSideMenuDelegate.toggleLeft()

触发器 - $ionicSideMenuDelegate.toggleRight:

$ionicSideMenuDelegate.toggleRight()

触发器 - <ion-side-menus :

<ion-side-menus></ion-side-menus>

触发器 - <ion-side-menu-content :

<ion-side-menu-content drag-content="true"></ion-side-menu-content>

触发器 - <ion-side-menu :

<ion-side-menu side="left"></ion-side-menu>

幻灯区

触发器 - ** “ 触发器 - ** ”

标签页

触发器 - **$ionicTabsDelegate.$getByHandle:** “JavaScript $ionicTabsDelegate.$getByHandle(handle) ” 触发器 - **$ionicTabsDelegate.select:** “JavaScript $ionicTabsDelegate.select(index) ” 触发器 - **$ionicTabsDelegate.selectedIndex:** “JavaScript $ionicTabsDelegate.selectedIndex() ” 触发器 - ** “ 触发器 - ** ”

实用工具

触发器 - $ionicConfigProvider.backButton.icon:

$ionicConfigProvider.backButton.icon(value)

触发器 - $ionicConfigProvider.backButton.previousTitleText:

$ionicConfigProvider.backButton.previousTitleText(value)

触发器 - $ionicConfigProvider.backButton.text:

$ionicConfigProvider.backButton.text(value)

触发器 - $ionicConfigProvider.navBar.alignTitle:

$ionicConfigProvider.navBar.alignTitle(value)

触发器 - $ionicConfigProvider.navBar.positionPrimaryButtons:

$ionicConfigProvider.navBar.positionPrimaryButtons(value)

触发器 - $ionicConfigProvider.navBar.positionSecondaryButtons:

$ionicConfigProvider.navBar.positionSecondaryButtons(value)

触发器 - $ionicConfigProvider.tabs.position:

$ionicConfigProvider.tabs.position(value)

触发器 - $ionicConfigProvider.tabs.style:

$ionicConfigProvider.tabs.style(value)

触发器 - $ionicConfigProvider.templates.maxPrefetch:

$ionicConfigProvider.templates.maxPrefetch(value)

触发器 - $ionicConfigProvider.views.forwardCache:

$ionicConfigProvider.views.forwardCache(value)

触发器 - $ionicConfigProvider.views.maxCache:

$ionicConfigProvider.views.maxCache(maxNumber)

触发器 - $ionicConfigProvider.views.transition:

$ionicConfigProvider.views.transition(transition)

触发器 - ionicDomUtil.animationFrameThrottle:

ionic.DomUtil.animationFrameThrottle(callback)

触发器 - ionicDomUtil.blurAll:

ionic.DomUtil.blurAll()

触发器 - ionicDomUtil.getChildIndex:

ionic.DomUtil.getChildIndex(element, type)

触发器 - ionicDomUtil.getParentOrSelfWithClass:

ionic.DomUtil.getParentOrSelfWithClass(element, className)

触发器 - ionicDomUtil.getParentWithClass:

ionic.DomUtil.getParentWithClass(element, className)

触发器 - ionicDomUtilgetPositionInParent:

ionic.DomUtil.getPositionInParent(element)

触发器 - ionicDomUtil.getTextBounds:

ionic.DomUtil.getTextBounds(textNode)

触发器 - ionicDomUtil.ready:

ionic.DomUtil.ready(callback)

触发器 - ionicDomUtil.rectContains:

ionic.DomUtil.rectContains(x, y, x1, y1, x2, y2)

触发器 - ionicDomUtil.requestAnimationFrame:

ionic.DomUtil.requestAnimationFrame(callback)

触发器 - ionicEventController.off:

ionic.EventController.off(type, callback, element)

触发器 - ionicEventController.offGesture:

ionic.EventController.offGesture(eventType, callback, element)

触发器 - ionicEventController.on:

ionic.EventController.on(type, callback, element)

触发器 - ionicEventController.onGesture:

ionic.EventController.onGesture(eventType, callback, element)

触发器 - ionicEventController.trigger:

ionic.EventController.trigger(eventType, data)

触发器 - ionicPlatform.device:

ionic.Platform.device()

触发器 - ionicPlatform.exitApp:

ionic.Platform.exitApp()

触发器 - ionicPlatform.fullScreen:

ionic.Platform.fullScreen()

触发器 - ionicPlatform.grade:

ionic.Platform.grade

触发器 - ionicPlatform.isAndroid:

ionic.Platform.isAndroid()

触发器 - ionicPlatform.isFullScreen:

ionic.Platform.isFullScreen

触发器 - ionicPlatform.isIOS:

ionic.Platform.isIOS()

触发器 - ionicPlatform.isIPad:

ionic.Platform.isIPad()

触发器 - ionicPlatform.isReady:

ionic.Platform.isReady

触发器 - ionicPlatform.isWebView:

ionic.Platform.isWebView()

触发器 - ionicPlatform.isWindowsPhone:

ionic.Platform.isWindowsPhone()

触发器 - ionicPlatform.platform:

ionic.Platform.platform()

触发器 - ionicPlatform.platforms:

ionic.Platform.platforms

触发器 - ionicPlatform.ready:

ionic.Platform.ready(callback)

触发器 - ionicPlatform.setGrade:

ionic.Platform.setGrade(grade)

触发器 - ionicPlatform.showStatusBar:

ionic.Platform.showStatusBar(shouldShow)

触发器 - ionicPlatform.version:

ionic.Platform.version()

触发器 - $ionicPosition.offset:

$ionicPosition.offset(element)

触发器 - $ionicPosition.position:

$ionicPosition.position(element)

旋转器

触发器 - <ion-spinner :

<ion-spinner icon="spiral"></ion-spinner>