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-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
color: #337ab7;
user-select: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

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

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

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

@ -1,9 +1,5 @@
export const skeletonTypes = [
'text', 'rect', 'circle',
'QBtn', 'QBadge', 'QChip', 'QToolbar',
'QCheckbox', 'QRadio', 'QToggle',
'QSlider', 'QRange', 'QInput',
'QAvatar'
'text', 'circle'
]
export const skeletonAnimations = [
'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: String,
validator: v => skeletonTypes.includes(v),
default: 'rect'
default: 'text'
},
animation: {
type: String,

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

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

Write Preview
Loading…
Cancel
Save