18231669351
/
reagent_manage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

骨架屏类型简化，波纹介绍修改

Browse Source
master
toesbieya 6 years ago
parent 9d3ac80fe9
commit aed701c2ec
5 changed files with 103 additions and 133 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 1
      vue/src/assets/styles/index.scss
  2. 225
      vue/src/components/Skeleton/QSkeleton.sass
  3. 6
      vue/src/components/Skeleton/constant.js
  4. 2
      vue/src/components/Skeleton/index.vue
  5. 2
      vue/src/views/example/components/ripple.vue

1
vue/src/assets/styles/index.scss
Unescape View File

@ -116,6 +116,7 @@ a:hover {
font-size: 16px; font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
color: #337ab7; color: #337ab7;
user-select: none;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;

225
vue/src/components/Skeleton/QSkeleton.sass
Unescape View File

@ -1,137 +1,110 @@
.q-skeleton .q-skeleton
background: rgba(0, 0, 0, .12) background: rgba(0, 0, 0, .12)
border-radius: 4px border-radius: 4px
/* /*
maintain size even with border maintain size even with border
for types that have height specified for types that have height specified
*/ */
box-sizing: border-box box-sizing: border-box
&:before &:before
content: '\00a0' content: '\00a0'
&--type &--type
&-text &-circle
transform: scale(1, .5) height: 48px
width: 48px
&-circle, border-radius: 50%
&-QAvatar
height: 48px &--bordered
width: 48px border: 1px solid rgba(0, 0, 0, .05)
border-radius: 50%
&--square
&-QBtn border-radius: 0
width: 90px
height: 36px &--anim-fade
&-QBadge animation: q-skeleton--fade 1.5s linear .5s infinite
width: 70px
height: 16px &--anim-pulse
&-QChip animation: q-skeleton--pulse 1.5s ease-in-out .5s infinite
width: 90px
height: 28px &--anim-pulse-x
border-radius: 16px animation: q-skeleton--pulse-x 1.5s ease-in-out .5s infinite
&-QToolbar
height: 50px &--anim-pulse-y
&-QCheckbox, animation: q-skeleton--pulse-y 1.5s ease-in-out .5s infinite
&-QRadio
width: 40px &--anim-wave,
height: 40px &--anim-blink,
border-radius: 50% &--anim-pop
&-QToggle position: relative
width: 56px overflow: hidden
height: 40px z-index: 1
border-radius: 7px
&-QSlider, &:after
&-QRange content: ''
height: 40px position: absolute
&-QInput top: 0
height: 56px right: 0
bottom: 0
&--bordered left: 0
border: 1px solid rgba(0,0,0,.05) z-index: 0
&--square &--anim-blink:after
border-radius: 0 background: rgba(255, 255, 255, .7)
animation: q-skeleton--fade 1.5s linear .5s infinite
&--anim-fade
animation: q-skeleton--fade 1.5s linear .5s infinite &--anim-wave:after
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent)
&--anim-pulse animation: q-skeleton--wave 1.5s linear .5s infinite
animation: q-skeleton--pulse 1.5s ease-in-out .5s infinite
&--anim-pulse-x &--dark
animation: q-skeleton--pulse-x 1.5s ease-in-out .5s infinite background: rgba(255, 255, 255, 0.05)
&--anim-pulse-y
animation: q-skeleton--pulse-y 1.5s ease-in-out .5s infinite &.q-skeleton--bordered
border: 1px solid rgba(255, 255, 255, .25)
&--anim-wave,
&--anim-blink, &.q-skeleton--anim-wave:after
&--anim-pop background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent)
position: relative
overflow: hidden &.q-skeleton--anim-blink:after
z-index: 1 background: rgba(255, 255, 255, .2)
&:after
content: ''
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: 0
&--anim-blink:after
background: rgba(255,255,255,.7)
animation: q-skeleton--fade 1.5s linear .5s infinite
&--anim-wave:after
background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent)
animation: q-skeleton--wave 1.5s linear .5s infinite
&--dark
background: rgba(255, 255, 255, 0.05)
&.q-skeleton--bordered
border: 1px solid rgba(255,255,255,.25)
&.q-skeleton--anim-wave:after
background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent)
&.q-skeleton--anim-blink:after
background: rgba(255,255,255,.2)
@keyframes q-skeleton--fade @keyframes q-skeleton--fade
0% 0%
opacity: 1 opacity: 1
50% 50%
opacity: .4 opacity: .4
100% 100%
opacity: 1 opacity: 1
@keyframes q-skeleton--pulse @keyframes q-skeleton--pulse
0% 0%
transform: scale(1) transform: scale(1)
50% 50%
transform: scale(.85) transform: scale(.85)
100% 100%
transform: scale(1) transform: scale(1)
@keyframes q-skeleton--pulse-x @keyframes q-skeleton--pulse-x
0% 0%
transform: scaleX(1) transform: scaleX(1)
50% 50%
transform: scaleX(.75) transform: scaleX(.75)
100% 100%
transform: scaleX(1) transform: scaleX(1)
@keyframes q-skeleton--pulse-y @keyframes q-skeleton--pulse-y
0% 0%
transform: scaleY(1) transform: scaleY(1)
50% 50%
transform: scaleY(.75) transform: scaleY(.75)
100% 100%
transform: scaleY(1) transform: scaleY(1)
@keyframes q-skeleton--wave @keyframes q-skeleton--wave
0% 0%
transform: translateX(-100%) transform: translateX(-100%)
100% 100%
transform: translateX(100%) transform: translateX(100%)

6
vue/src/components/Skeleton/constant.js
Unescape View File

@ -1,9 +1,5 @@
export const skeletonTypes = [ export const skeletonTypes = [
'text', 'rect', 'circle', 'text', 'circle'
'QBtn', 'QBadge', 'QChip', 'QToolbar',
'QCheckbox', 'QRadio', 'QToggle',
'QSlider', 'QRange', 'QInput',
'QAvatar'
] ]
export const skeletonAnimations = [ export const skeletonAnimations = [
'wave', 'pulse', 'pulse-x', 'pulse-y', 'fade', 'blink', 'none' 'wave', 'pulse', 'pulse-x', 'pulse-y', 'fade', 'blink', 'none'

2
vue/src/components/Skeleton/index.vue
Unescape View File

@ -9,7 +9,7 @@
type: { type: {
type: String, type: String,
validator: v => skeletonTypes.includes(v), validator: v => skeletonTypes.includes(v),
default: 'rect' default: 'text'
}, },
animation: { animation: {
type: String, type: String,

2
vue/src/views/example/components/ripple.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div v-ripple class="tip-row"> <div v-ripple class="tip-row">
点击触发波纹 点击触发波纹，详情请见<a href="https://quasar.dev/vue-directives/material-ripple" target="_blank">quasar</a>
</div> </div>
</template> </template>

Write Preview
Loading…
Cancel
Save