Options
All
  • Public
  • Public/Protected
  • All
Menu

Module @react-md/typography

Index

Type aliases

FontStyle: "italic" | "oblique" | "normal"
TextAlign: "left" | "center" | "right"
TextColor: "secondary" | "hint" | "theme-primary" | "theme-secondary" | "theme-warning" | "theme-error"
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 expects a renderable element to be returned.

      Parameters

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

      Returns ReactElement

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: "underline" | "overline" | "line-through"
TextTransform: "capitalize" | "uppercase" | "lowercase"
TextWeight: "thin" | "light" | "regular" | "medium" | "bold" | "semi-bold" | "black"
TypographyHTMLElement: HTMLHeadingElement | HTMLParagraphElement | HTMLSpanElement | HTMLDivElement | HTMLButtonElement | HTMLAnchorElement | HTMLBodyElement | HTMLHtmlElement

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

remarks

@since 4.0.0

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

Type declaration

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

      @since 4.0.0

      Parameters

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

      Returns ReactElement

TypographyType: "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 Typography component, this will generate the correct typography className to apply and determine what component to be rendered as if none was provided.

remarks

@since 4.0.0

Variables

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

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.

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

The Typography 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.

Generated using TypeDoc