Me!

TJ VanToll

NativeScript Quick Tip: Showing and Hiding Elements

| Comments

NativeScript supports the "collapsed" and "visible" states of the CSS visibility property. This means you can hide an element by setting its "visibility" property to "collapsed" in CSS. For example you can use the following CSS to hide all buttons.

button {
    visibility: collapsed;
}

Warning: Currently NativeScript is inconsistent with the CSS spec, as the CSS spec defines visibility: collapse, and NativeScript uses visiblity: collapsed. I have an issue open to resolve this discrepancy.

Hiding an element in CSS works, but if you need to hide an element you almost certainly need to show it at some point. For this, NativeScript exposes a visibility attribute, which is just a light wrapper around the CSS property. For instance you could also use the following syntax to hide a button:

<Button text="I'm hidden" visibility="collapsed" />

This is handy because having an attribute lets you to use data-binding expressions to control the value of the attribute, which is the technique I almost always use to control visibility. To give a concrete example, in the code below I use a flag in my data model, "showDetails", to determine the visibility of a <Label>.

<Page loaded="loaded">
	<StackLayout>
		<Button text="{{ showDetails ? 'Hide' : 'Show' }}" tap="toggle" />
		<Label text="Lorem ipsum..." visibility="{{ showDetails ? 'visible' : 'collapsed' }}" />
	</StackLayout>
</Page>
var observable = require("data/observable");
var pageData = new observable.Observable();

exports.loaded = function(args) {
	pageData.set("showDetails", true);
	args.object.bindingContext = pageData;
}

exports.toggle = function() {
	pageData.set("showDetails", !pageData.get("showDetails"));
}

The key here is the ternary used as part of the <Label>’s visibility attribute: {{ showDetails ? 'visible' : 'collapsed' }}. When the data model’s "showDetails" property is true NativeScript shows the label, and when the property is false NativeScript hides the label.

That’s all there is to it. If you have any other techniques you use to show/hide elements let me know in the comments. If you have suggestions for a cleaner API feel free to suggest it on GitHub, or better yet, send a PR :)

Comments