Hopiu/vue-material
1
0
Fork 0
mirror of https://github.com/Hopiu/vue-material.git synced 2026-05-11 16:53:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add spinner stroke width prop

Browse source
This commit is contained in:
Marcos Moura 2016-12-13 19:28:38 -02:00
parent db21a7d007
commit d288282eb5
3 changed files with 29 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
docs/src/pages/components/Spinner.vue
View file

@ -28,6 +28,12 @@
<md-table-cell>The spinner size. Default <code>50</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-stroke</md-table-cell>
<md-table-cell><code>Number</code></md-table-cell>
<md-table-cell>The line width. Default <code>3.5</code></md-table-cell>
</md-table-row>
<md-table-row>
<md-table-cell>md-indeterminate</md-table-cell>
<md-table-cell><code>Boolean</code></md-table-cell>
@ -48,9 +54,9 @@
<example-box card-title="Determinate">
<div class="spinner-demo" slot="demo">
<md-button class="md-primary md-raised" @click.native="restartProgress">Restart</md-button>
<md-spinner :md-progress="progress" v-show="transition"></md-spinner>
<md-spinner :md-progress="progress" v-show="transition" class="md-accent"></md-spinner>
<md-spinner :md-progress="progress" v-show="transition" class="md-warn"></md-spinner>
<md-spinner :md-progress="progress" v-if="transition"></md-spinner>
<md-spinner :md-progress="progress" v-if="transition" class="md-accent"></md-spinner>
<md-spinner :md-progress="progress" v-if="transition" class="md-warn"></md-spinner>
</div>
<div slot="code">
@ -83,6 +89,10 @@
<md-spinner :md-size="20" md-indeterminate class="md-accent"></md-spinner>
<md-spinner :md-size="60" md-indeterminate class="md-warn"></md-spinner>
<md-spinner :md-size="150" md-indeterminate></md-spinner>
<md-spinner :md-size="20" :md-stroke="2.5" md-indeterminate class="md-accent"></md-spinner>
<md-spinner :md-size="60" :md-stroke="1.5" md-indeterminate class="md-warn"></md-spinner>
<md-spinner :md-size="150" :md-stroke="1" md-indeterminate></md-spinner>
</div>
<div slot="code">
@ -90,6 +100,10 @@
&lt;md-spinner :md-size=&quot;20&quot; md-indeterminate class=&quot;md-accent&quot;&gt;&lt;/md-spinner&gt;
&lt;md-spinner :md-size=&quot;60&quot; md-indeterminate class=&quot;md-warn&quot;&gt;&lt;/md-spinner&gt;
&lt;md-spinner :md-size=&quot;150&quot; md-indeterminate&gt;&lt;/md-spinner&gt;
&lt;md-spinner :md-size=&quot;20&quot; :md-stroke=&quot;2&quot; md-indeterminate class=&quot;md-accent&quot;&gt;&lt;/md-spinner&gt;
&lt;md-spinner :md-size=&quot;60&quot; :md-stroke=&quot;1.5&quot; md-indeterminate class=&quot;md-warn&quot;&gt;&lt;/md-spinner&gt;
&lt;md-spinner :md-size=&quot;150&quot; :md-stroke=&quot;1&quot; md-indeterminate&gt;&lt;/md-spinner&gt;
</code-block>
</div>
</example-box>
@ -98,11 +112,11 @@
<div slot="demo">
<md-theme class="complete-example" md-name="orange">
<md-button class="md-fab" @click.native="restartProgress" :class="{ 'md-primary': done }">
<md-icon v-show="!done">cloud_upload</md-icon>
<md-icon v-show="done">done</md-icon>
<md-icon v-if="!done">cloud_upload</md-icon>
<md-icon v-if="done">done</md-icon>
</md-button>
<md-spinner :md-size="75" :md-progress="progress" v-show="transition && progress < 115"></md-spinner>
<md-spinner :md-size="74" :md-stroke="2.2" :md-progress="progress" v-if="transition && progress < 115"></md-spinner>
</md-theme>
</div>
@ -110,11 +124,11 @@
<code-block lang="xml">
&lt;md-theme class=&quot;complete-example&quot; md-name=&quot;orange&quot;&gt;
&lt;md-button class=&quot;md-fab&quot; @click.native=&quot;restartProgress&quot; :class=&quot;{ &#039;md-primary&#039;: done }&quot;&gt;
&lt;md-icon v-show=&quot;!done&quot;&gt;cloud_upload&lt;/md-icon&gt;
&lt;md-icon v-show=&quot;done&quot;&gt;done&lt;/md-icon&gt;
&lt;md-icon v-if=&quot;!done&quot;&gt;cloud_upload&lt;/md-icon&gt;
&lt;md-icon v-if=&quot;done&quot;&gt;done&lt;/md-icon&gt;
&lt;/md-button&gt;
&lt;md-spinner :md-size=&quot;75&quot; :md-progress=&quot;progress&quot; v-show=&quot;transition &amp;&amp; progress &lt; 115&quot;&gt;&lt;/md-spinner&gt;
&lt;md-spinner :md-size=&quot;74&quot; :md-stroke=&quot;2.2&quot; :md-progress=&quot;progress&quot; v-if=&quot;transition &amp;&amp; progress &lt; 115&quot;&gt;&lt;/md-spinner&gt;
&lt;/md-theme&gt;
</code-block>

3
src/components/mdSpinner/mdSpinner.scss
View file

@ -20,7 +20,7 @@
&.md-spinner-leave-active {
opacity: 0;
transform: scale(.9) translateZ(0);
transform: scale(.8) translateZ(0);
transition: $swift-ease-out;
}
@ -53,7 +53,6 @@
fill: none;
stroke-dashoffset: 0;
stroke-miterlimit: 10;
stroke-width: 3.2;
transition: $swift-ease-out;
}

6
src/components/mdSpinner/mdSpinner.vue
View file

@ -2,7 +2,7 @@
<transition name="md-spinner" appear>
<div class="md-spinner" :class="[themeClass, classes]":style="styles">
<svg class="md-spinner-draw" viewBox="25 25 50 50">
<circle class="md-spinner-path" cx="50" cy="50" r="20" :stroke-dasharray="dashProgress">
<circle class="md-spinner-path" cx="50" cy="50" r="20" :stroke-width="mdStroke" :stroke-dasharray="dashProgress">
</svg>
</div>
</transition>
@ -19,6 +19,10 @@
type: Number,
default: 50
},
mdStroke: {
type: Number,
default: 3.5
},
mdIndeterminate: Boolean,
mdProgress: {
type: Number,