在 Polymer 中应用 mixin 时遇到问题
Having trouble applying a mixin in Polymer
我在让 mixin 在聚合物中工作时遇到问题。我已经创建了 --test-theme 但它没有在元素内应用样式。有什么地方出错了吗?
故事-card.html
<dom-module id="story-card">
<style>
:host {
display: block;
box-sizing: border-box;
}
#story-card {
min-height: 5em;
max-width: 45%;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
#story-card .story-content {
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
@apply(--test-theme);
}
#story-card .story-button-container {
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
margin-bottom: 1em;
width: 100%;
overflow: auto;
white-space: nowrap;
}
#story-card .story-button-container .fab-button {
float: right;
display: inline-block;
margin-left: 0.5em;
margin-bottom: 0.1em;
--paper-fab-background: rgb(233, 74, 47);
}
</style>
<template>
<paper-material id="story-card" elevation="3">
<div class="story-button-container">
<paper-fab icon="delete" class="fab-button" elevated="2" disabled$="[[signedIn]]" animated></paper-fab>
<paper-fab icon="create" class="fab-button" elevated="2" disabled$="[[signedIn]]" on-click="editClickHandler" animated></paper-fab>
</div>
<span class="story-content" hidden$="[[!editing]]">{{storyContent}}</span>
<paper-textarea label="Edit Card" value="{{storyContent}}" hidden$="[[editing]]"></paper-textarea>
</paper-material>
</template>
</dom-module>
<script>
Polymer({
is: 'story-card',
properties: {
storyContent: {
type: String,
value: ''
},
signedIn: {
type: Boolean,
value: false
}
},
// Element Lifecycle
ready: function() {
this.editing = true;
},
editClickHandler: function () {
this.editing = !this.editing;
}
});
</script>
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../story-card.html">
<style is="custom-style">
story-card {
--test-theme: {
font-family: Verdana;
font-size: 5em;
};
}
</style>
<title>story-card Demo</title>
</head>
<body>
<template is="dom-bind" id="app">
<p>An example of <code><story-card></code>:</p>
<story-card class="story-card" story-content="[[storyContent]]"></story-card>
</template>
<script>
( function ( document ) {
var app = document.querySelector( '#app' );
app.storyContent = "Test content";
})( document );
</script>
</body>
</html>
我希望显示的文本 Test Content
更大并且是绿色的,但它使用的是元素中的样式,而不是应用 index.html
中的样式。有人知道我该怎么做吗?
--test-theme {
是一个 属性 赋值,必须像这样(添加冒号):
--test-theme: {
目前我不是 100% 确定原因,但简化一下:
#story-card .story-content { ...
至
.story-content { ...
当我 运行 你的测试时修复它。
http://jsbin.com/zozute/edit?html,output
当我能解释这个根本原因时,我会跟进。
我在让 mixin 在聚合物中工作时遇到问题。我已经创建了 --test-theme 但它没有在元素内应用样式。有什么地方出错了吗?
故事-card.html
<dom-module id="story-card">
<style>
:host {
display: block;
box-sizing: border-box;
}
#story-card {
min-height: 5em;
max-width: 45%;
margin-left: auto;
margin-right: auto;
padding: 1em;
}
#story-card .story-content {
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
@apply(--test-theme);
}
#story-card .story-button-container {
font-family: 'Roboto', sans-serif;
font-size: 1.2em;
margin-bottom: 1em;
width: 100%;
overflow: auto;
white-space: nowrap;
}
#story-card .story-button-container .fab-button {
float: right;
display: inline-block;
margin-left: 0.5em;
margin-bottom: 0.1em;
--paper-fab-background: rgb(233, 74, 47);
}
</style>
<template>
<paper-material id="story-card" elevation="3">
<div class="story-button-container">
<paper-fab icon="delete" class="fab-button" elevated="2" disabled$="[[signedIn]]" animated></paper-fab>
<paper-fab icon="create" class="fab-button" elevated="2" disabled$="[[signedIn]]" on-click="editClickHandler" animated></paper-fab>
</div>
<span class="story-content" hidden$="[[!editing]]">{{storyContent}}</span>
<paper-textarea label="Edit Card" value="{{storyContent}}" hidden$="[[editing]]"></paper-textarea>
</paper-material>
</template>
</dom-module>
<script>
Polymer({
is: 'story-card',
properties: {
storyContent: {
type: String,
value: ''
},
signedIn: {
type: Boolean,
value: false
}
},
// Element Lifecycle
ready: function() {
this.editing = true;
},
editClickHandler: function () {
this.editing = !this.editing;
}
});
</script>
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../story-card.html">
<style is="custom-style">
story-card {
--test-theme: {
font-family: Verdana;
font-size: 5em;
};
}
</style>
<title>story-card Demo</title>
</head>
<body>
<template is="dom-bind" id="app">
<p>An example of <code><story-card></code>:</p>
<story-card class="story-card" story-content="[[storyContent]]"></story-card>
</template>
<script>
( function ( document ) {
var app = document.querySelector( '#app' );
app.storyContent = "Test content";
})( document );
</script>
</body>
</html>
我希望显示的文本 Test Content
更大并且是绿色的,但它使用的是元素中的样式,而不是应用 index.html
中的样式。有人知道我该怎么做吗?
--test-theme {
是一个 属性 赋值,必须像这样(添加冒号):
--test-theme: {
目前我不是 100% 确定原因,但简化一下:
#story-card .story-content { ...
至
.story-content { ...
当我 运行 你的测试时修复它。
http://jsbin.com/zozute/edit?html,output
当我能解释这个根本原因时,我会跟进。