Cara menggunakan html hide element conditionally

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`

Invoice #ClientAmount#100Pendant Publishing$2,000.00#101Kruger Industrial Smoothing$545.00#102J. Peterman$10,000.25

Hiding a row using `hidden`

Invoice #ClientAmount#100Pendant Publishing$2,000.00#101Kruger Industrial Smoothing$545.00#102J. Peterman$10,000.25

  

    

      
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 met
hide - 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: