代码之家 › 专栏 › 技术社区 › Noim

类似于Android的Paper Spinner

spinner polymer

Noim · 技术社区 · 10 年前

我尝试用Paper Material和Polymer的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>

我希望你能帮我。我是说这个纺纱机: https://www.google.com/design/spec/components/progress-activity.html#progress-activity-behavior 查看第一个视频的行为。

无

1 回复 | 直到 10 年前

user600838 user600838 10 年前

这种不对称可能是由旋转器容器的尺寸造成的( .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>