मैं इसके लिए नया हूं इसलिए कृपया आसान हो जाएं ...

मैं बाहरी स्टाइलशीट का उपयोग करके पॉलिमर 2.0 कस्टम तत्व को स्टाइल करने की कोशिश कर रहा हूं, हालांकि मुझे तत्व पर लागू करने के लिए बाहरी स्टाइलशीट नहीं मिल सकती है।

यह वह तत्व है जिसे मैं स्टाइल करने की कोशिश कर रहा हूं (web-app.html):

<link rel="import" href="../elements/Styles/style-web-app.html">

<dom-module id="web-app">
<template>
<div id="header-container" class="header-container">
<div id="logo">
<img id="Mono" class="logo" src="../img/mono_primary_white_RGB.png" 
height="75px" width="75px" />
</div>
<div id="header">
<h1 id="title">ICR</h1>
</div>
</div>
<div id="tabs">
<paper-tabs selected="{{selected}}">
<paper-tab name="Name">Name</paper-tab>
<paper-tab name="Type">Type</paper-tab>
<paper-tab name="Usages">Usages</paper-tab>
</paper-tabs>
</div>
</template>

और यह बाहरी स्टाइलशीट कोड है (style-web-app.html):

<dom-module id="style-web-app">
<template>
<style>
:host{
#title {
font-size: 30px;
/* text-align: center; */
width: 500px;
color: #FFFFFF;
}
#header-container, #tabs {
background-color: #01579B;
display: flex;
color: #FFFFFF;
}
#header {
display: inline-block;
}
}
</style>
</template>
</dom-module>

क्या कोई कृपया मुझे बता सकता है कि मैं कहाँ गलत हो रहा हूँ?

तिया

1
A P 22 मई 2018, 19:48

1 उत्तर

सबसे बढ़िया उत्तर

यहाँ एक छद्म उदाहरण है जो सीधे पॉलिमर 2.0 प्रलेखन से लिया गया है।
साझा करने के लिए एक स्टाइलशीट बनाने के बाद, आप इसे उस तत्व में आयात कर सकते हैं जिसमें आप उस शैली को जोड़ना चाहते हैं और <style> में शामिल करें का उपयोग करके उन्हें लागू कर सकते हैं -

<!-- Create Your external Style document -->
<dom-module id="my-style-module">
  <template>
    <style>
      p {
       color: red;
      }
      <!-- rest of styles to share go here! -->
    </style>
  </template>
</dom-module>


<!-- import custom-style -->
<link rel="import" href="/bower_components/polymer/lib/elements/custom-style.html">
<link rel="import" href="my-style-module.html">
<dom-module>
 <template>
   <style include="my-style-module">
     <!-- custom element style go here! -->
   </style>

  <p>Paragraph A: I am in the main DOM. I am red.</p>
 </template>

 <script>
  //Your custom element script
 </script>
</dom-module>

इसलिए, आपके उदाहरण में, आपको style-web-app से स्टाइल शामिल करने के लिए web-app.html को इस रूप में अपडेट करना होगा -

<style include="style-web-app">
         <!-- custom element style go here! -->
</style>

आप कस्टम स्टाइलिंग और बाहरी स्टाइलशीट पर आगे पढ़ सकते हैं यहां

1
Code.Decode 22 मई 2018, 22:10