Question

我尝试使用来自Polymer的Paper Material和Paper Spinner在Android上重建微调器。但它永远不对称。这就是我做的： https://jsbin.com/ciqova/edit?html,console,output

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

我希望你能帮助我。我的意思是这个Spinner： https://www.google.com/design/spec/components/progress-activity.html#progress-activity-behavior在行为下查看第一个视频。

尼尔斯

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

Paper Spinner就像Android一样

1 个答案: