Class MediaLayout


public class MediaLayout extends StyledElement<MediaLayout>
A media + content pairing layout for displaying media alongside text content.

MediaLayout implements the classic "media object" pattern where an image, icon, or other media element is displayed alongside descriptive content. The media can be positioned on the left or right side.

Structure:

 ┌─────────┬────────────────────────┐
 │         │                        │
 │  Media  │       Content          │
 │         │                        │
 └─────────┴────────────────────────┘
 

Use Cases:

  • Comment threads with user avatars
  • Product listings with thumbnails
  • Notification items with icons
  • Contact cards with photos
  • Social media posts

Usage:


 // Basic media layout
 MediaLayout comment = new MediaLayout();
 comment.setMedia(avatar);
 comment.setContent(commentText);

 // Media on the right
 MediaLayout product = MediaLayout.mediaRight();
 product.setMedia(productImage);
 product.setContent(productInfo);

 // With custom gap and alignment
 MediaLayout notification = new MediaLayout(16);
 notification.setAlign(AlignItems.CENTER);
 notification.setMedia(icon);
 notification.setContent(message);
 
Since:
2025
Version:
1.0
Author:
Marvin P. Warble Jr.
See Also:
  • Constructor Details

    • MediaLayout

      public MediaLayout()
      Constructs a MediaLayout with media on the left.
    • MediaLayout

      public MediaLayout(MediaLayout.Position position)
      Constructs a MediaLayout with the specified media position.
      Parameters:
      position - the media position
    • MediaLayout

      public MediaLayout(int gap)
      Constructs a MediaLayout with the specified gap.
      Parameters:
      gap - the gap in pixels between media and content
    • MediaLayout

      public MediaLayout(MediaLayout.Position position, int gap)
      Constructs a MediaLayout with the specified position and gap.
      Parameters:
      position - the media position
      gap - the gap in pixels between media and content
  • Method Details

    • initialize

      protected void initialize()
      Builds the element tree for the layout.
      Overrides:
      initialize in class StyledElement<MediaLayout>
    • mediaLeft

      public static MediaLayout mediaLeft()
      Creates a MediaLayout with media on the left.
      Returns:
      a new MediaLayout with left-positioned media
    • mediaRight

      public static MediaLayout mediaRight()
      Creates a MediaLayout with media on the right.
      Returns:
      a new MediaLayout with right-positioned media
    • setMedia

      public MediaLayout setMedia(Element<?> media)
      Sets the media element (image, icon, avatar, etc.).
      Parameters:
      media - the media element
      Returns:
      this MediaLayout for method chaining
    • setContent

      public MediaLayout setContent(Element<?> content)
      Sets the content element (text, description, etc.).
      Parameters:
      content - the content element
      Returns:
      this MediaLayout for method chaining
    • setGap

      public final MediaLayout setGap(int gap)
      Sets the gap between media and content.
      Overrides:
      setGap in class StyledElement<MediaLayout>
      Parameters:
      gap - the gap in pixels
      Returns:
      this MediaLayout for method chaining
    • setGap

      public final MediaLayout setGap(String gap)
      Sets the gap between media and content.
      Overrides:
      setGap in class StyledElement<MediaLayout>
      Parameters:
      gap - the gap value (e.g., "1rem", "16px")
      Returns:
      this MediaLayout for method chaining
    • setAlign

      public final MediaLayout setAlign(AlignItems align)
      Sets the vertical alignment of media and content.
      Parameters:
      align - the alignment value
      Returns:
      this MediaLayout for method chaining
    • centerVertically

      public final MediaLayout centerVertically()
      Centers media and content vertically.
      Returns:
      this MediaLayout for method chaining
    • alignTop

      public final MediaLayout alignTop()
      Aligns media and content to the top.
      Returns:
      this MediaLayout for method chaining
    • alignBottom

      public final MediaLayout alignBottom()
      Aligns media and content to the bottom.
      Returns:
      this MediaLayout for method chaining
    • setMediaWidth

      public MediaLayout setMediaWidth(int width)
      Sets the width of the media pane.
      Parameters:
      width - the width in pixels
      Returns:
      this MediaLayout for method chaining
    • setMediaWidth

      public MediaLayout setMediaWidth(String width)
      Sets the width of the media pane.
      Parameters:
      width - the width value (e.g., "64px", "4rem")
      Returns:
      this MediaLayout for method chaining
    • getMediaPane

      public Div getMediaPane()
      Returns the media pane for advanced customization.
      Returns:
      the media pane
    • getContentPane

      public Div getContentPane()
      Returns the content pane for advanced customization.
      Returns:
      the content pane
    • addElement

      public MediaLayout addElement(Element element)
      Adds content to the content pane.
      Overrides:
      addElement in class Element<MediaLayout>
      Parameters:
      element - the element to add
      Returns:
      this MediaLayout for method chaining
    • removeAllElements

      public void removeAllElements()
      Removes all content from the content pane.
      Overrides:
      removeAllElements in class Element<MediaLayout>