Commit153b336

committed

improve loading

1 parent1d8636e commit153b336Copy full SHA for 153b336

File tree

+34

-3

lines changed

+34

-3

lines changed

Lines changed: 26 additions & 3 deletions

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`<template>`
`2`		`- <divclass="bx--loading-overlay">`
`3`		`- <divdata-loadingclass="bx--loading">`
	`2`	`+ <div:class="overlayClass">`
	`3`	`+ <divdata-loadingclass="bx--loading":class="smallClass">`
`4`	`4`	`<svgclass="bx--loading__svg"viewBox="-75 -75 150 150">`
`5`	`5`	`<title>Loading</title>`
`6`	`6`	`<circlecx="0"cy="0"r="37.5" />`
`@@ -19,14 +19,37 @@`
`19`	`19`	`};`
`20`	`20`	`},`
`21`	`21`	`props:{`
`22`		`- show:false`
	`22`	`+ show: {`
	`23`	`+ type:Boolean,`
	`24`	`+ default:true`
	`25`	`+ },`
	`26`	`+ withoutOverlay: {`
	`27`	`+ type:Boolean,`
	`28`	`+ default:false`
	`29`	`+ },`
	`30`	`+ small: {`
	`31`	`+ type:Boolean,`
	`32`	`+ default:false`
	`33`	`+ }`
`23`	`34`	`},`
`24`	`35`	`name:'ca-loading',`
`25`	`36`	`watch: {`
`26`	`37`	`show (newValue) {`
`27`	`38`	`this.loading.set(newValue)`
`28`	`39`	`}`
`29`	`40`	`},`
	`41`	`+ computed: {`
	`42`	`+overlayClass () {`
	`43`	`+return {`
	`44`	`+'bx--loading-overlay':!this.withoutOverlay`
	`45`	`+ }`
	`46`	`+ },`
	`47`	`+smallClass () {`
	`48`	`+return {`
	`49`	`+'bx--loading--small':this.small`
	`50`	`+ }`
	`51`	`+ }`
	`52`	`+ },`
`30`	`53`	`mounted() {`
`31`	`54`	`this.loading=Loading.create(this.$el.querySelector('[data-loading]'));`
`32`	`55`	`this.loading.set(this.show);`

Lines changed: 8 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,14 @@ storiesOf('Loading', module)`
`5`	`5`	template:`
`6`	`6`	`<ca-loading></ca-loading>`
`7`	`7`	`,
	`8`	`+})).add('small',()=>({`
	`9`	+template:`
	`10`	`+ <ca-loading small></ca-loading>`
	`11`	+ `,
	`12`	`+})).add('withoutOverlay',()=>({`
	`13`	+template:`
	`14`	`+ <ca-loading withoutOverlay></ca-loading>`
	`15`	+ `,
`8`	`16`	`}))`
`9`	`17`	`.add('with para',()=>({`
`10`	`18`	`data:()=>({`

Comments

(0)