react-md - Typography - Text Container Examples Sandbox

Typography Text Container Examples

src / Demo.tsx

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061import React, { ReactElement } from "react";
import { TextContainer, Text } from "@react-md/typography";

export default function Demo(): ReactElement {
  return (
    <>
      <TextContainer>
        <Text type="headline-4">
          This example will update the size based on the viewport to switch
          between desktop and mobile line widths.
        </Text>
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus
          finibus sodales. Nullam pretium lorem eu scelerisque cursus. Morbi
          aliquet varius nisl. Nullam viverra, dolor ut suscipit congue, massa
          nibh commodo lectus, eu convallis sapien mauris a libero. Suspendisse
          porttitor dolor quis pulvinar semper. Aliquam diam neque, accumsan nec
          aliquam ut, dignissim non nibh. Sed consectetur dolor nec sem volutpat
          rutrum. Proin pellentesque arcu nec varius luctus. Maecenas vel sapien
          a lectus faucibus finibus ut quis sapien. Mauris vitae turpis
          pulvinar, tristique orci in, sollicitudin urna. Aliquam pellentesque
          commodo sem sed volutpat.
        </Text>
      </TextContainer>
      <TextContainer size="desktop">
        <Text type="headline-4">
          This example will always use the desktop typography line width.
        </Text>
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus
          finibus sodales. Nullam pretium lorem eu scelerisque cursus. Morbi
          aliquet varius nisl. Nullam viverra, dolor ut suscipit congue, massa
          nibh commodo lectus, eu convallis sapien mauris a libero. Suspendisse
          porttitor dolor quis pulvinar semper. Aliquam diam neque, accumsan nec
          aliquam ut, dignissim non nibh. Sed consectetur dolor nec sem volutpat
          rutrum. Proin pellentesque arcu nec varius luctus. Maecenas vel sapien
          a lectus faucibus finibus ut quis sapien. Mauris vitae turpis
          pulvinar, tristique orci in, sollicitudin urna. Aliquam pellentesque
          commodo sem sed volutpat.
        </Text>
      </TextContainer>
      <TextContainer size="mobile">
        <Text type="headline-4">
          This example will always use the mobile typography line width.
        </Text>
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus
          finibus sodales. Nullam pretium lorem eu scelerisque cursus. Morbi
          aliquet varius nisl. Nullam viverra, dolor ut suscipit congue, massa
          nibh commodo lectus, eu convallis sapien mauris a libero. Suspendisse
          porttitor dolor quis pulvinar semper. Aliquam diam neque, accumsan nec
          aliquam ut, dignissim non nibh. Sed consectetur dolor nec sem volutpat
          rutrum. Proin pellentesque arcu nec varius luctus. Maecenas vel sapien
          a lectus faucibus finibus ut quis sapien. Mauris vitae turpis
          pulvinar, tristique orci in, sollicitudin urna. Aliquam pellentesque
          commodo sem sed volutpat.
        </Text>
      </TextContainer>
    </>
  );
}

Handling Duplicated Messages

Simple Message Queue

Updating Message Priority

Animating App Bar

Auto Dense

Different Sizes

Fixed With Offset

Simple Usage

Highlight Matches

Simple Example

Using Object Data Sets

Color Examples

Simple Usage

Customizing Badges

Simple Examples

Themed Badges

With Tooltips

Button With Circular Progress

Contained Buttons

Custom Button Theme

Floating Action Buttons

Icon Buttons

Outlined Buttons

Text Buttons

Text Buttons With Icons

Expandable Cards

Simple Example

With Actions

With Media

Action Chips

Choice Chips

Filter Chips

Input Chips

Noninteractable Chips

Simple Chips

Alert Dialogs And Modals

Fixed Dialog Example

Full Page Example

Nested Dialogs

Simple Example

Simple List Example

Horizontal Dividers

Vertical Dividers

Within Lists

All Elevations

Animating Elevation

Configuring Use Panels Behavior

Simple Example

Single Panel

Async Switch Example

Checkbox And Radio Examples

Color Dialog Slider

Configurable Slider

Custom Checkboxes

Customizing Select Options

Discrete Sliders

Example Form

File Input Example

Indeterminate Checkboxes

Menus With Form Controls

Native Select Example

Number Hook Examples

Range Sliders

Select Example

Server Upload Example

Simple File Upload

Simple Help And Error Messages

Simple Sliders

Switch Examples

Text Area Example

Text Field Example

Text Field Hook Examples

Text Field Types

With React Hook Form

Icon Spacing

Overriding Default Icons

Simple Examples

Configurable Layout

Controlling The Layout

Non Fixed App Bar Layouts