Class Hide


public class Hide extends StyledElement<Hide>
A container that hides its content at specified breakpoints.

Hide uses CSS media queries to conditionally hide content based on screen size. Content is visible by default and hidden when the screen width matches the specified breakpoint conditions.

Visibility Modes:

Usage:


 // Hide on large screens and up (hide on desktop)
 Hide hideOnDesktop = Hide.from(Breakpoint.LG);
 hideOnDesktop.addElement(mobileOnlyContent);

 // Hide on mobile (below SM breakpoint)
 Hide hideOnMobile = Hide.below(Breakpoint.SM);
 hideOnMobile.addElement(desktopContent);

 // Hide only on tablets (MD to LG)
 Hide hideOnTablet = Hide.between(Breakpoint.MD, Breakpoint.LG);
 hideOnTablet.addElement(nonTabletContent);

 // Wrap existing element
 Hide wrapper = Hide.from(Breakpoint.XL, existingElement);
 
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:
  • Method Details

    • from

      public static Hide from(Breakpoint breakpoint)
      Creates a Hide container that hides content at the specified breakpoint and larger.

      Uses min-width media query (mobile-first approach).

      Parameters:
      breakpoint - the minimum breakpoint at which content is hidden
      Returns:
      a new Hide container
    • from

      public static Hide from(Breakpoint breakpoint, Element<?> content)
      Creates a Hide container with content, hidden at the specified breakpoint and larger.
      Parameters:
      breakpoint - the minimum breakpoint at which content is hidden
      content - the element to hide
      Returns:
      a new Hide container
    • below

      public static Hide below(Breakpoint breakpoint)
      Creates a Hide container that hides content below the specified breakpoint.

      Uses max-width media query to hide content on smaller screens.

      Parameters:
      breakpoint - content is hidden below this breakpoint
      Returns:
      a new Hide container
    • below

      public static Hide below(Breakpoint breakpoint, Element<?> content)
      Creates a Hide container with content, hidden below the specified breakpoint.
      Parameters:
      breakpoint - content is hidden below this breakpoint
      content - the element to hide
      Returns:
      a new Hide container
    • only

      public static Hide only(Breakpoint breakpoint)
      Creates a Hide container that hides content only at the specified breakpoint range.

      Content is hidden between this breakpoint's min-width and the next breakpoint's min-width (exclusive).

      Parameters:
      breakpoint - the exact breakpoint range to hide content
      Returns:
      a new Hide container
    • only

      public static Hide only(Breakpoint breakpoint, Element<?> content)
      Creates a Hide container with content, hidden only at the specified breakpoint range.
      Parameters:
      breakpoint - the exact breakpoint range to hide content
      content - the element to hide
      Returns:
      a new Hide container
    • between

      public static Hide between(Breakpoint from, Breakpoint to)
      Creates a Hide container that hides content between two breakpoints (inclusive).
      Parameters:
      from - the minimum breakpoint (inclusive)
      to - the maximum breakpoint (inclusive)
      Returns:
      a new Hide container
    • between

      public static Hide between(Breakpoint from, Breakpoint to, Element<?> content)
      Creates a Hide container with content, hidden between two breakpoints.
      Parameters:
      from - the minimum breakpoint (inclusive)
      to - the maximum breakpoint (inclusive)
      content - the element to hide
      Returns:
      a new Hide container
    • initialize

      protected void initialize()
      Called during initialization to add the responsive CSS to the page.
      Overrides:
      initialize in class StyledElement<Hide>