aurelia - bind to css visibility -
using aurelia's css bind have use syntax
<div css.bind="{visibility: somefield ? 'visible':'hidden'}"> is there more succinct way this?
please note, using show.bind not i'm after equivalent display:none , want visibility:hidden (so element takes space not visible)
something ideal
<div visibility.bind="somefield">
a little simpler syntax be:
<div css=“visibility: ${somefield ? 'visible':'hidden'}”> to make more succinct, can create custom attribute:
import {inject} 'aurelia-framework'; @inject(element) export class visibilitycustomattribute { constructor(element) { this.element = element; } valuechanged(newvalue) { this.element.style.visibility = newvalue ? 'visible' : 'hidden'; } } and use this:
<template> <require from='./visibility-custom-attribute'></require> <div visibility.bind="somefield"> </template> see this gistrun example.
Comments
Post a Comment