Paper Spinner like Android

我試圖用Polymer材料和Paper Spinner從Polymer重新構建Android上的微調器。但它從來不是對稱的。這是我做過什麼： https://jsbin.com/ciqova/edit?html,console,output Paper Spinner like Android

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <!-- Polymer Imports --> 
 
    <base href="https://polygit.org/polymer+:master/components/"> 
 
    <link href="polymer/polymer.html" rel="import"> 
 
    <script type="text/JavaScript" src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html"> 
 
    <link rel="import" href="iron-flex-layout/iron-flex-layout.html"> 
 
    <link rel="import" href="paper-material/paper-material.html"> 
 
    <link rel="import" href="paper-spinner/paper-spinner.html"> 
 
    <!-- MDL Import --> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
 
    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
 
    <!-- JavaScript --> 
 
    <style is="custom-style" include="iron-flex iron-flex-alignment"> 
 
     .center { 
 
      @apply(--layout-horizontal); 
 
      @apply(--layout-center-justified); 
 
     } 
 

 
     paper-material.round { 
 
      border-radius: 50%; 
 
      height: 34px; 
 
      width: 36px; 
 
     } 
 
     
 
     paper-spinner.size { 
 
      height: 30px; 
 
      width: 30px; 
 
     } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 
    <div class="center"> 
 
    <paper-material elevation="5" class="round size"> 
 
     <div class="center"> 
 
     <paper-spinner class="size" active></paper-spinner> 
 
     </div> 
 
    </paper-material> 
 
    
 
    </div> 
 
</body> 
 

 
</html>

我希望你能幫助我。我的意思是這個微調： https://www.google.com/design/spec/components/progress-activity.html#progress-activity-behavior看下行爲的第一個視頻。

尼爾斯

來源

2016-04-12 Nils Bergmann

歡迎＃1。請直接將相關信息添加到問題中，而不僅僅是鏈接到外部資源。 –

不對稱可能已經通過旋轉器容器（.round），其中其寬度比其高度大的2px的尺寸而引起的。（？一個錯字）

paper-material.round { 
    border-radius: 50%; 
    height: 34px; 
    width: 36px; // width !== height --> asymmetry 
}

此外，容器看上去有點緊圍繞微調，是在填充的迫切需要：

paper-material.round { 
    border-radius: 50%; 
    height: 34px; 
    width: 34px; // width === height 
    padding: 10px; // give spinner some breathing room 
}

即使有這些變化，微調微微仰起偏離中心我說：

...所以我碰一碰它打倒padding-top。

paper-spinner.size { 
    height: 30px; 
    width: 30px; 
    padding-top: 1px; 
}

這裏的jsbin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <!-- Polymer Imports --> 
 
    <base href="https://polygit.org/polymer+:master/components/"> 
 
    <link href="polymer/polymer.html" rel="import"> 
 
    <script type="text/JavaScript" src="webcomponentsjs/webcomponents-lite.min.js"></script> 
 
    <link rel="import" href="iron-flex-layout/iron-flex-layout-classes.html"> 
 
    <link rel="import" href="iron-flex-layout/iron-flex-layout.html"> 
 
    <link rel="import" href="paper-material/paper-material.html"> 
 
    <link rel="import" href="paper-spinner/paper-spinner.html"> 
 
    <!-- MDL Import --> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    <link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"> 
 
    <script defer src="https://code.getmdl.io/1.1.3/material.min.js"></script> 
 
    <!-- JavaScript --> 
 
    <style is="custom-style" include="iron-flex iron-flex-alignment"> 
 
     .center { 
 
      @apply(--layout-horizontal); 
 
      @apply(--layout-center-justified); 
 
     } 
 

 
     paper-material.round { 
 
      border-radius: 50%; 
 
      height: 34px; 
 
      width: 34px; 
 
      padding: 10px; 
 
     } 
 
     
 
     paper-spinner.size { 
 
      height: 30px; 
 
      width: 30px; 
 
      padding-top: 1px; 
 
     } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 
    <div class="center"> 
 
    <paper-material elevation="5" class="round size"> 
 
     <div class="center"> 
 
     <paper-spinner class="size" active></paper-spinner> 
 
     </div> 
 
    </paper-material> 
 
    
 
    </div> 
 
</body> 
 

 
</html>

來源

2016-04-12 13:06:21

太棒了！這次真是萬分感謝！ –

Paper Spinner like Android

回答

相關問題