Different button background when on/off

Community Usage questions
1

Is the feature of having two backgrounds still available?
In v0 I could use this code (to have a different background when the button is on or off):

:host
background-color:default;
color:white;
text-transform:none;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAEsCAYAAAB5fY51AAAACXBIWXMAAK0DAACtAwGwAEtUAAAF8WlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDIwLTAzLTEzVDEzOjAwOjIzKzAyOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMC0wMy0xM1QxMzoyNjoxMyswMjowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyMC0wMy0xM1QxMzoyNjoxMyswMjowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3MTZmNGU1Ny0yZDdlLTRiMWUtOGVmMC03MDZhZDY2NzljZTIiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDo3NmZiODFiMi04YWRhLTBhNDAtOGUzOS1jMjBkYjE3NWJlYTQiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMjZhODVkMy1kNDJlLTQ2ZmMtYWY5My01OGMyNDY3NmU2NjciPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmUyNmE4NWQzLWQ0MmUtNDZmYy1hZjkzLTU4YzI0Njc2ZTY2NyIgc3RFdnQ6d2hlbj0iMjAyMC0wMy0xM1QxMzowMDoyMyswMjowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo3MTZmNGU1Ny0yZDdlLTRiMWUtOGVmMC03MDZhZDY2NzljZTIiIHN0RXZ0OndoZW49IjIwMjAtMDMtMTNUMTM6MjY6MTMrMDI6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5rj+OHAAADLElEQVR42u3agQmAMBAEQV/Sf8tnCSryJMGZEk5YPmAlOQB2cJoAECwAwQIEC0CwAAQLECyANQ0TwCN+WOxXLiwQK09CAMECECxAsAAEC0CwAMECECwAwQIEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtgjmECuFUmcGEBCBYgWACCBSBYgGABzOC3hn3EBO3K/svu78ISK+zvSQggWIBgAQgWgGABggUgWACCBQgWgGABCBYgWACCBSBYgGABCBaAYAGCBSBYAIIFCBaAYAEIFiBYAIIFIFiAYAEIFoBgAYIFIFiAYAEIFoBgAYIFIFgAggUIFoBgAQgWIFgAggUgWIBgAQgWgGABggUgWACCBQgWgGABCBYgWACCBSBYgGABCBaAYAGCBSBYgGABCBaAYAGCBSBYAIIFCBaAYAEIFiBYAIIFIFiAYAEIFoBgAYIFIFgAggUIFoBgAQgWIFgAggUgWIBgATQaJthCmcD+uLAAwQIQLECwAAQLQLCA/3nzW0PM1a7sb3/7f7+wfKy57G9/PAkBwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLECwAAQLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsQLAABAtAsADBAhAsAMECBAtAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIEC0CwAAQLECwAwQIQLGA/lcQKgAsLQLAAwQIQLADBAgQLQLAABAsQLADBAhAsQLAABAtAsADBAhAsgBsXvigUWGljmWQAAAAASUVORK5CYII=');
background-position:center center; 
background-size:95%; 
}

.on {
background-color:orange;
background-position:center center; 
background-size:95%; 
background-image:url('data:image/png;base64,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');
}

But in v1 something must've changed because only the :host image is used.
Help? :rescue_worker_helmet:

1 Like
2

Writing :host.on instead of .on should work.

1 Like
3

It worked!

Example (.GIF)

osc
osc856×586 119 KB

4

For what it's worth, simply using the label property: checkbox.json (978 Bytes)

1 Like
5

The first pair of quotes = when the button is set to value 1
The second pair of quotes = ... 0

Shouldn't these two depend on the values that the user inputs in the on and off fields?

6

Sure, that's a simple example but you could write #{@{this} == @{this.on} ? "^check" : ""}

3 Likes
7

Hey there and sorry for bringing this topic up again. I was just searching if someone had created a nice checkbox class.

To maybe complete this topic for other users I'd like to mention that you need to exchange the comma in the above answer with a ":"

#{@{this} == @{this.on} ? "^check" : ""}
2 Likes
8

Indeed my mistake !

1 Like