99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

polymer如何實現(xiàn)樣式的共享和隔離

發(fā)布時間：2017-07-07 22:01  回復(fù):0  查看:2405   最后回復(fù)：2017-07-07 22:01  
本文和大家分享的主要是使用polymer 實現(xiàn)樣式的共享和隔離相關(guān)內(nèi)容，一起來看看吧，希望對大家 學(xué)習(xí)polymer有所幫助。
　　polymer-starter-kit 是一個初始化的例子，這個例子設(shè)計的很巧妙，在  app/styles/app-theme.html  里面定義了各種css 變量，可以方便的更改主題的配色，變量用  --  定義，屬性用  var()  調(diào)用，選擇器用  @apply()  調(diào)用，相當(dāng)于sass 的  @mixin  。
　　:root {
　　--dark-primary- color: #303F9F;
　　--default-primary- color: #3F51B5;
　　--light-primary- color: #C5CAE9;
　　--text-primary- color: #ffffff; /*text/icons*/
　　--accent- color: #FF4081;
　　--primary- background-color: #c5cae9;
　　--primary-text- color: #212121;
　　--secondary-text- color: #727272;
　　--disabled-text- color: #bdbdbd;
　　--divider- color: #B6B6B6;
　　}
　　paper-menu  a {
　　@apply(--layout-horizontal);
　　@apply(--layout-center);
　　 text-decoration: none;
　　 color: var(--menu-link-color);
　　 font-family: 'Roboto', 'Noto', sans-serif;
　　-webkit- font-smoothing: antialiased;
　　 text-rendering: optimizeLegibility;
　　 font-size: 14px;
　　 font-weight: 400;
　　 line-height: 24px;
　　 min-height: 48px;
　　 padding: 0 16px;
　　}
　　 shared-styles.html  里面是共享的樣式
　　.page-title {
　　@apply(--paper-font-display2);
　　}
　　paper-menu  a > *, paper-menu paper-item > *, paper-menu paper- icon-item > * {
　　 pointer-events: none;
　　}
　　@ media (max-width: 600px) {
　　.page-title {
　　 font-size: 24px!important;
　　}
　　}
　　在  my-greeting.html  文件里是這么調(diào)用的
　　< style include="shared-styles">style>
　　< style>
　　:host {
　　 display: block;
　　 color: red;
　　}
　　 input{
　　 color: red;
　　}
　　style>
　　然后在瀏覽器生成了下面的樣式，自動加了命名空間，很贊。
　　 paper-menu.my-greeting  a.my-greeting > *.my-greeting,  paper-menu.my-greeting  paper-item.my-greeting > *.my-greeting,  paper-menu.my-greeting  paper-icon-item.my-greeting > *.my-greeting {
　　 pointer-events: none;
　　}
　　@ media (max-width: 600px) {.page-title.my-greeting {
　　 font-size: 24px!important;
　　}
　　}
　　 my-greeting {
　　 display: block;
　　 color: red;
　　}
　　 input.my-greeting {
　　 color: red;
　　}
　　在  index.html  里面也有調(diào)用
　　< style is="custom-style" include="shared-styles">style>
　　然后生成的是不同的命名空間，所以頁面級調(diào)用和模塊級調(diào)用是不同的，相互不會影響。
　　.page-title:not([style-scope]):not(.style-scope) {
　　 font-family:'Roboto', 'Noto', sans-serif;
　　 -webkit-font-smoothing:antialiased;
　　 font-size:45px;
　　 font-weight:400;
　　 letter-spacing:-.018em;
　　 line-height:48px
　　}
　　 paper-menu  a > *:not([style-scope]):not(.style-scope), paper-menu  paper-item > *:not([style-scope]):not(.style-scope), paper-menu  paper-icon-item > *:not([style-scope]):not(.style-scope) {
　　 pointer-events: none;
　　}
　　@ media (max-width: 600px) {.page-title:not([style-scope]):not(.style-scope) {
　　 font-size: 24px!important;
　　}
　　}
來源：zhouwenbin

您還未登錄，請先登錄

熱門帖子

最新帖子

?