When using show.bind
the element remains in the page and is either hidden or visible through the use of display:none
or display:block
behind the scenes.
export class MyViewModel {
isVisible = false;
}
I can be both hidden or visible, but not at the same time
DOM elements are hidden using the hidden attribute. You can conditionally use any .NET parameter to set this attribute to hide the DOM elements.
@page "/"
I am Blazor
Show/Hide
@code {
private bool IsShow {get;set;} = false;
private void Show[]
{
IsShow = !IsShow;
}
}
Use invisible
to hide an element, but still maintain its place in the DOM, affecting the layout of other elements [compare with .hidden
from the documentation].
01
02
03
Collapsing elements
Use collapse
to hide table rows, row groups, columns, and column groups as if they were set to display: none
, but without impacting the size of other rows and columns.
This makes it possible to dynamically toggle rows and columns without affecting the table layout.
Invoice #ClientAmount#100Pendant Publishing$2,000.00#101Kruger Industrial Smoothing$545.00#102J. Peterman$10,000.25
Hiding a row using `collapse`
Hiding a row using `hidden`
Invoice #
Client
Amount
#100
Pendant Publishing
$2,000.00
#101
Kruger Industrial Smoothing
$545.00
#102
J. Peterman
$10,000.25
Making elements visible
Use visible
to make an element visible. This is mostly useful for undoing the invisible
utility at different screen sizes.
01
02
03
Applying conditionally
Hover, focus, and other states
Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use
Invoice #
Client
Amount
#100
Pendant Publishing
$2,000.00
#101
Kruger Industrial Smoothing
$545.00
#102
J. Peterman
$10,000.25
1 to only apply the invisible
utility on hover.For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.
You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use
Invoice #
Client
Amount
#100
Pendant Publishing
$2,000.00
#101
Kruger Industrial Smoothing
$545.00
#102
J. Peterman
$10,000.25
3 to apply the invisible
utility at only medium screen sizes and above. The hidden
attribute can also be used to keep a user from seeing an element until some other condition has been met [like selecting a checkbox, etc.]. Then, a JavaScript could remove the hidden attribute, and make the element visible.
You can show or hide elements on your page conditionally, i.e. when a specific condition is met. There are two ways of doing in Wappler - using a conditional region and using the dynamic show and hide attributes. In this tutorial we will explain how to use both methods and what are the differenced.
We have a variable on our page, and we want to show or hide an element based on its value:
Screenshot_11440×900 192 KB
The element we want to show and hide is a simple column in the layout:
Screenshot_21440×900 252 KB
Show/Hide Dynamic Attributes
The show and hide dynamic attributes allow you to change the visibility of the element.show
- will show the element when the condition is methide
- will hide the element when the condition is met
When using the show/hide dynamic attributes the element is not removed from the DOM, it’s just hidden by applying a display: none
to it. Use them if you want to toggle the visibility of the element often.
First we select the column and add a new dynamic attribute:
Screenshot_31440×900 240 KB
Select Display > Show:
Screenshot_41440×900 250 KB
And click the dynamic data picker:
Screenshot_51440×900 182 KB
We want to show the element when the variable value equals 2
. So select the variable value and click the data formatter icon: