@ -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;
@ -12,42 +12,11 @@
content: '\00a0'
&--type
&-text
transform: scale(1, .5)
&-circle,
&-QAvatar
&-circle
height: 48px
width: 48px
border-radius: 50%
&-QBtn
width: 90px
height: 36px
&-QBadge
width: 70px
height: 16px
&-QChip
height: 28px
border-radius: 16px
&-QToolbar
height: 50px
&-QCheckbox,
&-QRadio
width: 40px
height: 40px
&-QToggle
width: 56px
border-radius: 7px
&-QSlider,
&-QRange
&-QInput
height: 56px
&--bordered
border: 1px solid rgba(0, 0, 0, .05)
@ -59,8 +28,10 @@
&--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
@ -70,6 +41,7 @@
position: relative
overflow: hidden
z-index: 1
&:after
content: ''
position: absolute
@ -82,6 +54,7 @@
&--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
@ -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'
@ -9,7 +9,7 @@
type: {
type: String,
validator: v => skeletonTypes.includes(v),
default: 'rect'
default: 'text'
},
animation: {
@ -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>