问题描述
我正在做的是简单的路由，并且每个元素中的样式均未正确实现，请帮助我使样式标签正常工作
这是我制定的代码
这是路由元素，负责显示第一个和第二个元素。默认情况下显示的是First元素（即 MypolymerApp ）的视图。问题在于，第一个和第二个元素中的样式标签未实现，因此整个样式崩溃。
import {
html,polymerElement
} from '@polymer/polymer/polymer-element.js';
import '@polymer/app-route/app-location.js';
import '@polymer/app-route/app-route.js';
import '@polymer/iron-pages/iron-pages.js';
import './my-login';
import './my-element';
class Routerapp extends polymerElement {
static get template() {
return html `
<style>
.demo-card {
width: 100%
}
.demo-card>.mdl-card__title {
color: white;
height: 176px;
background: url('../assets/crd-bg.jpg') center / cover;
}
.mdl-card {
min-height: inherit;
}
.mdl-cell {
color: black;
font-family: 'Roboto';
font-size: x-large;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.inner-card {
padding-top: 10px;
padding-left: 5px;
padding-bottom: 5px;
}
.Box {
background-color: cadetblue;
}
h1,h2,h3,h4,h5,h6,.mdl-card__supporting-text {
color: inherit;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
</style>
<app-location route="{{route}}" use-hash-as-path></app-location>
<app-route
route="{{route}}"
pattern="/:ext"
data="{{routerData}}"
tail="{{subroute}}"></app-route>
<div>
<iron-pages selected="[[routerData.ext]]" attr-for-selected="view">
<my-element view="element"></my-element>
<my-login view="sucess"></my-login>
</iron-pages>
</div>
`;
}
static get properties() {
return {
routerData: {
type: Object,value: {
ext: "element"
}
}
};
}
}
window.customElements.define('app-router',Routerapp);
> 2. this is the first element. This has the style tag which is not being implemented with the HTML code below the <style>. Here at the last button is conneted to href and which changes the view from the first element to the second one which is **mylogin** element.
import { html,polymerElement } from '@polymer/polymer/polymer-element.js';
import '@polymer/app-route/app-location.js';
import '@polymer/app-route/app-route.js';
import '@polymer/iron-pages/iron-pages.js';
import './my-login';
/**
* `my-element`
* CustomElement Example using polymer 3.0
*
* @customElement
* @polymer
* @demo demo/index.html
*/
class MypolymerApp extends polymerElement {
static get template() {
return html`
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<style>
.demo-card {
width: 100%
}
.demo-card>.mdl-card__title {
color: white;
height: 176px;
background: url('../assets/crd-bg.jpg') center / cover;
}
.mdl-card {
min-height: inherit;
}
.mdl-cell {
color: black;
font-family: 'Roboto';
font-size: x-large;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.inner-card {
padding-top: 10px;
padding-left: 5px;
padding-bottom: 5px;
}
.Box {
background-color: cadetblue;
}
h1,.mdl-card__supporting-text {
color: inherit;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
</style>
<div class="demo-card mdl-card mdl-shadow--8dp">
<!-- MDL Card Container -->
<div class="mdl-card__title">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col"><img src="../assets/C.png" width="100" height="90" alt="" ;></div>
<div class="mdl-layout-spacer"></div>
<div style="color:white" class="mdl-cell mdl-cell--8-col">
<h4 style="color:white" class="mdl-card__title">Star TMT steel</h4>*9029
<!-- title text -->
</div>
</div>
<div class="mdl-layout-spacer"></div>
<div>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">Account
Change</button>
</div>
</div>
<!-- Supporting Text -->
<div class="mdl-card__supporting-text mdl-card--border">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col ">
<h5>Last <h5>Transaction</h5>
</h5>
</div>
<div class="mdl-cell mdl-cell--4-col ">
<h4><b>$500.00</b></h4>
<h6>Material Purcashed</h6>
</div>
<div class="mdl-cell mdl-cell--4-col ">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--9-col ">
<h5><b>17 OCT 2017</b></h5>
<h6>Transaction Date</h6>
</div>
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell mdl-cell--4-col">
<!-- Primary-colored flat button -->
<button class="mdl-button mdl-js-button mdl-button--primary">
<h5 style="font-weight: 700;">Repeat</h5>
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Border and Action Elements -->
<div class="mdl-card__supporting-text mdl-card--border">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--5-col ">
<div class="inner-card demo-card mdl-card mdl-shadow--2dp">
<div style="margin: inherit;" class="mdl-grid">
<div class="mdl-cell--5-col">
<h6>Amount</h6>
<h3><b>$250.00</b></h3>
</div>
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell--2-col">
<h6>USD</h6>
</div>
<div class="mdl-cell--3-col">
<div class="mdl-cell mdl-cell--4-col"><img src="../assets/usa.png" width="50"
height="50" alt="" ;></div>
</div>
</div>
</div>
<div class="inner-card demo-card mdl-card mdl-shadow--2dp">
<h6>Remarks</h6>
<h6>Just Payment</h6>
</div>
<div style="height: 50px;" class=" demo-card mdl-card mdl-shadow--2dp">
</div>
<div class="inner-card demo-card mdl-card mdl-shadow--2dp">
<div style="margin: inherit;" class="mdl-grid">
<div class="mdl-cell--7-col">
<h6>From</h6>
<h5>Teleco Account</h5>
<h6>Available Balance $55,000.00</h6>
</div>
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell--4-col">
<button class="mdl-button mdl-js-button mdl-button--primary">
<h6 style="font-weight: 700;">SELECT</h6>
</button>
</div>
</div>
</div>
</div>
<div class="mdl-cell mdl-cell--3-col ">
</div>
<div style="width:inherit;" class="mdl-cell mdl-cell-4-col ">
<div class="inner-card demo-card mdl-card mdl-shadow--2dp">
<div style="width: 270px;" class="mdl-grid">
<div class="mdl-cell mdl-cell--8-col ">
<h6>Schedule this Payment</h6>
</div>
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell mdl-cell--4-col">
<!-- Primary-colored flat button -->
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1">
<input type="checkBox" id="switch-1" class="mdl-switch__input" checked />
</label>
</div>
<table>
<tr>
<td>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Once">
<input type="radio" id="Once" class="mdl-radio__button" name="options"
checked />
<!-- intitial state checked using attribute checked -->
<span class="mdl-radio__label">Once</span>
</label>
</td>
<td>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Monthly">
<input type="radio" id="Monthly" class="mdl-radio__button" name="options"
checked />
<!-- intitial state checked using attribute checked -->
<span class="mdl-radio__label">Monthly</span>
</label>
</td>
</tr>
<tr>
<td>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Quaterly">
<input type="radio" id="Quaterly" class="mdl-radio__button" name="options"
checked />
<!-- intitial state checked using attribute checked -->
<span class="mdl-radio__label">Quaterly</span>
</label>
</td>
<td>
<label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="Yearly">
<input type="radio" id="Yearly" class="mdl-radio__button" name="options"
checked />
<!-- intitial state checked using attribute checked -->
<span class="mdl-radio__label">Yearly</span>
</label>
</td>
</tr>
</table>
</div>
</div>
<div class="inner-card demo-card mdl-card mdl-shadow--2dp ">
<h6>Start Date</h6>
<h5><b>06 NOV 2017</b></h5>
</div>
<div class="inner-card demo-card mdl-card mdl-shadow--2dp ">
<h6>No of Occurrences</h6>
<h5><b>7</b></h5>
</div>
</div>
</div>
</div>
<div style="text-align: center;" class="mdl-card__actions mdl-card--border">
<a class="mdl-button mdl-js-button mdl-button--primary">
Back
</a>
<button href="#/sucess" on-click="onclick" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
Proceed
</button>
</div>
</div>
`
}
static get properties() {
return {
routerData: {
type: Object,value: {
ext: null
}
}
};
}
onclick() {
console.log("Tom")
this.set('this.routerData.ext','sucess')
}
}
window.customElements.define('my-element',MypolymerApp);
3. This is the Second element which renderd when the button in First element is clicked and even here the style tag is not being implemented to the HTML code below it so the styling is changed.
import {html,polymerElement} from '@polymer/polymer/polymer-element.js';
//import {SignupTemplate} from './signup-template'
/**
* `my-element`
* CustomElement Example using polymer 3.0
*
* @customElement
* @polymer
* @demo demo/index.html
*/
export class MyName extends polymerElement {
static get template() {
return html`
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<body>
<link rel="stylesheet" href="/node_modules/material-design-lite/material.min.css">
<script src="/node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"></script>
<style>
.demo-card {
width: 100%
}
.demo-card>.mdl-card__title {
color: white;
height: 176px;
}
.mdl-card__title {
background-color: lightblue;
}
.mdl-card {
min-height: inherit;
}
.mdl-cell,.mdl-grid {
color: black;
font-family: 'Roboto';
font-size: x-large;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.inner-card {
padding-top: 10px;
padding-left: 5px;
padding-bottom: 5px;
}
.Box {
background-color: cadetblue;
}
h1,.mdl-card__supporting-text {
color: inherit;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
</style>
<div class="demo-card mdl-card mdl-shadow--12dp">
<div class="mdl-card__title mdl-card--border Box">
<div style="align-content:center; margin-left: 380px; color: black;">
<h3 style="text-align: center;">Submitted</h3>
<h6 style="text-align: center;">Your request has been submitted and awaits approval</h6>
</div>
</div>
<div class="mdl-card__title">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--5-col"><img src="../assets/C.png" width="100" height="90" alt="" ;></div>
<div class="mdl-layout-spacer"></div>
<div class="mdl-cell mdl-cell--8-col">
<h4 class="mdl-card__title">Star TMT steel</h4>*9029
<!-- title text -->
</div>
</div>
<div class="mdl-cell mdl-cell--4-col">
<h4 style="text-align: center;"><b>$2500.00</b></h4>
<h6 style="text-align: center;">Domestic payment</h6>
</div>
<div class="mdl-cell mdl-cell--4-col">
<h5 style="text-align: center;"><b>06 NOV 2017</b></h5>
<h6 style="text-align: center;">Scheduled on</h6>
</div>
</div>
<div style="text-align: center;" class="mdl-card__actions mdl-card--border">
<a href="#"><img src="../assets/download.png" width="50"
height="50" alt="" ;></a>
<a href="#"><img src="../assets/share.png" width="50"
height="50" alt="" ;></a>
<a href="#"><img src="../assets/print.png" width="50"
height="50" alt="" ;></a>
</div>
</div>
`;}}
window.customElements.define('my-login',MyName);<!doctype html>
<html lang="en">
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,user-scalable=yes">
<title>my-element demo</title>
<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="../my-element.js"></script>
<!-- <script type="module" src="../router.js"></script> -->
<!-- <custom-style>
<style is="custom-style" include="demo-pages-shared-styles">
</style>
</custom-style> -->
</head>
<body>
<my-element></my-element>
</body>
</html>解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）