Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @react-md/typography

Index

Type aliases

FontStyle

FontStyle: "italic" | "oblique" | "normal"

TextAlign

TextAlign: "left" | "center" | "right"

TextColor

TextColor: "secondary" | "hint" | "theme-primary" | "theme-secondary" | "theme-warning" | "theme-error"

TextContainerRenderFunction

TextContainerRenderFunction: (props: { className: string }) => ReactElement

Type declaration

    • (props: { className: string }): ReactElement
    • A type describing the text container's children render function. It provides an object containing the correct (and merged) className and exects a renderable element to be returned.

      Parameters

      • props: { className: string }
        • className: string

      Returns ReactElement

TextContainerSize

TextContainerSize: "auto" | "mobile" | "desktop"

A union of the available text container sizes. One of these values must be chosen to help set the max width for text.

TextDecoration

TextDecoration: "underline" | "overline" | "line-through"

TextElement

TextElement: HTMLHeadingElement | HTMLParagraphElement | HTMLSpanElement | HTMLDivElement | HTMLButtonElement | HTMLAnchorElement | HTMLBodyElement | HTMLHtmlElement

A union of the default supported elements that the Text component can be rendered as. This is mostly used for adding the correct HTMLAttributes and enabling the forward ref.

TextRenderFunction

TextRenderFunction: (props: { className: string }) => ReactElement

Type declaration

    • (props: { className: string }): ReactElement
    • Parameters

      • props: { className: string }
        • className: string

      Returns ReactElement

TextTransform

TextTransform: "capitalize" | "uppercase" | "lowercase"

TextTypes

TextTypes: "headline-1" | "headline-2" | "headline-3" | "headline-4" | "headline-5" | "headline-6" | "subtitle-1" | "subtitle-2" | "body-1" | "body-2" | "caption" | "overline" | "button"

A union of all the material design provided typography styles. When used with the Text component, this will generate the correct typography className to apply and determine what component to be rendered as if none was provided.

TextWeight

TextWeight: "thin" | "light" | "regular" | "medium" | "bold" | "semi-bold" | "black"

Variables

Const SrOnly

SrOnly: ForwardRefExoticComponent<SrOnlyProps & RefAttributes<TextElement>> = ...

This component is used to create text that is only visible to screen readers. If you enable the focusable prop, the text will become visible to all users while focused.

Const Text

Text: ForwardRefExoticComponent<TextProps & RefAttributes<TextElement>> = ...

The Text component is used to render text with the material design typography styles applied. By default, everything will be rendered in a <p> tag with the normal paragraph styles.

When the type prop is changed to another typography style, this component will determine the "best" element to render the text in unless the component prop is provided. The default mapping is:

  • "headline-1" -> <h1>
  • "headline-2" -> <h2>
  • "headline-3" -> <h3>
  • "headline-4" -> <h4>
  • "headline-5" -> <h5>
  • "headline-6" -> <h6>
  • "subtitle-1" -> <h5>
  • "subtitle-2" -> <h6>
  • "body-1" -> <p>
  • "body-2" -> <p>
  • "caption" -> <caption>
  • "overline" -> <span>
  • "button" -> <button>

NOTE: if the component prop is not null, this logic will be ignored and the provided component will be used instead.

Const TextContainer

TextContainer: ForwardRefExoticComponent<TextContainerProps & RefAttributes<HTMLDivElement | ElementType<any>>> = ...

Generated using TypeDoc