Paper Spinner Android'de olduğu gibi

Polymer'dan gelen Paper Material ve Paper Spinner'la birlikte Android'de olduğu gibi rondelayı yeniden denedim. Ama asla simetrik değildir. Bu ne yaptım: https://jsbin.com/ciqova/edit?html,console,output Paper Spinner Android'de olduğu gibi

<!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>

Bana yardımcı olabilir umuyoruz. Bu Spinner: https://www.google.com/design/spec/components/progress-activity.html#progress-activity-behavior İlk Videonun Davranışı bölümüne bakın.

Nils

kaynak

2016-04-12 Nils Bergmann

Hoşgeldin var. Lütfen sadece dış kaynaklara bağlantı vermek yerine, ilgili bilgileri doğrudan soruna ekleyin. –

asimetri genişliği yüksekliğinden 2px daha büyük değer değişimi kabın (.round), boyutları neden olabilirdi. Hatta bu değişikliklerle

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

, spinner merkez dışı biraz baktım: (? A yazım hatası)

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

Ayrıca konteyner spinner etrafında sıkı biraz baktı ve dolgu muhtaç oldu bana:

... ben padding-top ile aşağı dürttü.

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

İşte Stackoverflow için 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>

kaynak

2016-04-12 13:06:21

Harika çalışıyor! Bunun için teşekkür ederim ! –

Paper Spinner Android'de olduğu gibi

cevap

İlgili konular