polymer初探_html/css_WEB-ITnose-tutoriel HTML-php.cn

Maison

interface Web

tutoriel HTML

polymer初探_html/css_WEB-ITnose

Jun 24, 2016 am 11:23 AM

最近找了几个模块化的方案，posthtml还不是很成熟，css module需要和react一起比较好用，于是尝试了下polymer。

polymer是基于web component规范的，hello-world-polymer可以让我们快速的熟悉polymer。

polymer模块html，css，js都是写一起的， hello-word.html 代码如下

<link rel="import" href="../../polymer/polymer.html"><dom-module id="hello-world"> <template> <p>Hello <strong>{{who}}</strong> :)</p> </template></dom-module><script>Polymer({ is: 'hello-world', properties: { who: { type: String, value: 'World' } }});</script>

Copier après la connexion

定义好模块后，只要在 index.html 文件引入模块，然后用标签就可以了，这个标签名跟模块里的id是一致的。

<!doctype html><html><head> <meta charset="utf-8"> <title><hello-world></title>  <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>  <link rel="import" href="build/hello-world.html"></head><body>  <hello-world who="world"></hello-world></body></html>

Copier après la connexion

多模块也是没问题的，我们新建一个 hello-module.html ，并且给她一点样式

<link rel="import" href="../../polymer/polymer.html"><dom-module id="hello-module"> <style> p{ color: red; display: flex; } strong{ color: black; } </style> <template> <p>Hello <strong>{{who}}</strong> :)</p> </template></dom-module><script>Polymer({ is: 'hello-module', properties: { who: { type: String, value: 'Module' } }});</script>

Copier après la connexion

然后在 index.html 引入

<!doctype html><html><head> <meta charset="utf-8"> <title><hello-world></title>  <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>  <link rel="import" href="build/hello-module.html"> <link rel="import" href="build/hello-world.html"></head><body>  <hello-module who="module"></hello-module> <hello-world who="world"></hello-world></body></html>

Copier après la connexion

浏览器显示是这样的，polymer已经帮我们加好命名空间，样式是不会相互影响的。

但是一些css3属性怎么办呢，我们还需要autoprefixer或者cssnext。需要三个插件支持，在命令行输入

1	`npm i --save gulp-posthtml posthtml-postcss postcss-cssnext`

Copier après la connexion

然后修改 gulpfile.js 文件

var gulp = require('gulp'), postcssPlugins = [require('postcss-cssnext')({ browsers: ['last 10 versions'] })]gulp.task('html', function() { var posthtml = require('gulp-posthtml'); return gulp.src('modules/*.html') .pipe(posthtml([ require('posthtml-postcss')(postcssPlugins) ]/*, options */)) .pipe(gulp.dest('build/'));});gulp.task('watch', function() { gulp.watch("modules/**.html",["html"]);});gulp.task('default', ['html', 'watch']);

Copier après la connexion

在命令行输入 gulp 就会实时帮我们编译了。生成的模块代码如下

<link rel="import" href="../../polymer/polymer.html"><dom-module id="hello-module"> <style> p{ color: red; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } strong{ color: black; } </style> <template> <p>Hello <strong>{{who}}</strong> :)</p> </template></dom-module><script>Polymer({ is: 'hello-module', properties: { who: { type: String, value: 'Module' } }});</script>

Copier après la connexion

这样浏览器就支持了，测试了一下，polymer支持安卓4.1，如果测试没什么问题，就可以愉快的用上了。

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

Repo: Comment relancer ses coéquipiers

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

3 Il y a quelques semaines By 王林

Afficher plus

Outils chauds Tags

Code&IT

Voix

Entreprise

Commercialisation

Détecteur d'IA

Chatbot

Conception et art

Article chaud

Combien de temps faut-il pour battre Split Fiction?

3 Il y a quelques semaines By DDD

Repo: Comment relancer ses coéquipiers

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Comment obtenir des graines géantes

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

3 Il y a quelques semaines By 王林

Afficher plus

Tags d'article chaud

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7281

Tutoriel Java

1622

Tutoriel CakePHP

1341

Tutoriel Laravel

1258

Tutoriel PHP

1205

Afficher plus

Related knowledge

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Mar 04, 2025 pm 12:32 PM

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Mar 04, 2025 pm 02:39 PM

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?

Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

Quel est le but du & lt; mètre & gt; élément?

Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

Quel est le but du & lt; datalist & gt; élément?

Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

Quel est le but du & lt; Progress & gt; élément?

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive?

See all articles