聚合物 & Web 组件代码片段

作者： robdodson 全部

Sublime Text 的聚合物和 Web 组件代码片段

详细信息

版本 2017.01.24.20.01.54
主页 github．com
问题 github．com
修改日期 8年前
上次查看 1小时前
首次出现 10年前

安装次数

总计 12K
Win 5K
Mac 4K
Linux 2K

	2021年8月6日	2021年8月5日	2021年8月4日	2021年8月3日	2021年8月2日	2021年8月1日	2021年7月31日	2021年7月30日	2021年7月29日	2021年7月28日	2021年7月27日	2021年7月26日	2021年7月25日	2021年7月24日	2021年7月23日	2021年7月22日	2021年7月21日	2021年7月20日	2021年7月19日	2021年7月18日	2021年7月17日	2021年7月16日	2021年7月15日	2021年7月14日	2021年7月13日	2021年7月12日	2021年7月11日	2021年7月10日	2021年7月9日	2021年7月8日	2021年7月7日	2021年7月6日	2021年7月5日	2021年7月4日	2021年7月3日	2021年7月2日	2021年7月1日	2021年6月30日	2021年6月29日	2021年6月28日	2021年6月27日	2021年6月26日	2021年6月25日	2021年6月24日	2021年6月23日
Windows	0	0	0	0	1	0	0	0	0	0	0	0	0	0	0	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	0	0	0	0	0
Mac	1	1	0	0	0	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	0	0	0	0	0	0	0	0	0	0	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

README

源代码: raw．githubusercontent．com

Sublime Text 的聚合物代码片段

安装

要通过包控制安装，搜索 聚合物 & Web 组件代码片段。如果您还没有安装包控制，请安装它。它真是太棒了。

如果您不使用包控制，可以下载包并将其手动放置在您的 包 目录中。它会工作，但不会自动更新。

元素

输入任何 iron-* 或 paper-* 元素的名称，然后按 tab 键自动完成。例如

Using snippets

或者，输入元素的名称前缀，然后按 ctrl+space 键进行模糊搜索以获取完成建议。例

Fuzz auto complete

Polymer

[pe] Polymer 元素

<dom-module id="$1">
    <template>
        <style>
            :host {
                display: block;
            }
        </style>
        $2
    </template>
    <script>
        Polymer({
            is: '$1'
        });
    </script>
</dom-module>

[pes] 带有外部样式表的聚合物元素

<dom-module id="$1">
    <link rel="import" type="css" href="$1.css">
    <template>
        $2
    </template>
    <script>
        Polymer({
            is: '$1'
        });
    </script>
</dom-module>

[hi] HTML 导入（我经常使用这个）

<link rel="import" href="${1:bower_components}/${0}/${0}.html">

[hii] HTML 导入 iron-* 元素

<link rel="import" href="${1:bower_components}/iron-${2}/iron-${2}.html">

[hip] HTML 导入 paper-* 元素

<link rel="import" href="${1:bower_components}/paper-${2}/paper-${2}.html">

Web 组件

[template] 模板

<template$1>$0</template>

[ce] 自定义元素

var ${4:tmpl} = document.querySelector('${5:template}');

var ${1:WidgetProto} = Object.create(HTMLElement.prototype);

${1:WidgetProto}.createdCallback = function() {
    var root = this.createShadowRoot();
    root.appendChild(document.importNode(${4:tmpl}.content, true));
};

var ${2:Widget} = document.registerElement('${3:my-widget}', {
    prototype: ${1:WidgetProto}
});

HTML

[ph] 带有 Web 组件 polyfill 的 HTML 模板

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <title>${1}</title>
    <meta name="description" content="${2}">


    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">


    <meta name="mobile-web-app-capable" content="yes">
    <meta name="theme-color" content="black">
    <link rel="icon" href="icon.png">


    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon.png">


    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body unresolved>
    $0
</body>
</html>

贡献

复制这个项目！
创建您的功能分支： git checkout -b my-new-feature
提交您的更改： git commit -m '添加一些功能'
推动到分支： git push origin my-new-feature
提交 pull 请求 :D