Typography

Property 
description
Required
Default
align
Align text examples:  Align.center text alignment is centered, Align.inherit text is aligned the same as the components parent, Align.justify text aligned with both margins, Align.left test is aligned with the left margin, Align.right text is aligned with right margin 
​
Align.inherit
body
The content that you want displayed. String
​
N/A
paragraph
Boolean
​
false
tooltip
Text that appears when hovering over the component. string
​
N/A
variant
Variant is a enum, that can Body1, Body2, Button, Caption, H1, H2, H3, H4, H5, H6, Inherit, Overline, Subtitle1, and Subtitle2
​
Body1
​
Examples 
Basic Whisper to show how to use the Typography component.
JavaScript
React
import { whisper } from "@oliveai/ldk"
import { 
  WhisperComponentType,
  Align,
  Variant,
 } from "@oliveai/ldk/src/whisper/types"
​
(async () => {
  try {
    await whisper.create({
      label: 'Typography Example',
      onClose: () => {
        console.debug('closed');
      },
      components: [
        {
          type: WhisperComponentType.Typography,
          body: 'default = align: "inherit", paragraph: false, variant: "body1"',
        },
        {
          type: WhisperComponentType.Typography,
          paragraph: true,
          body: 'Paragraph: true',
        },
        {
          type: WhisperComponentType.Typography,
          align: Align.Center,
          body: 'Align: Center',
        },
        {
          type: WhisperComponentType.Typography,
          align: Align.Justify,
          body: 'Align: Justify',
        },
        {
          type: WhisperComponentType.Typography,
          align: Align.Left,
          body: 'Align: Left',
        },
        {
          type: WhisperComponentType.Typography,
          align: Align.Right,
          body: 'Align: Right',
        },
        {
          type: WhisperComponentType.Typography,
          tooltip: 'tooltip test',
          body: 'Tooltip',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Body1,
          body: 'body1',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Body2,
          body: 'body2',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Button,
          body: 'button',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Caption,
          body: 'caption',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.H1,
          body: 'h1',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.H2,
          body: 'h2',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.H3,
          body: 'h3',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.H4,
          body: 'h4',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.H5,
          body: 'h5',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.H6,
          body: 'h6',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Inherit,
          body: 'inherit',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Overline,
          body: 'overline',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Subtitle1,
          body: 'subtitle1',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Subtitle2,
          body: 'subtitle2',
        },
      ],
    });
  } catch (e) {
    console.debug(e)
  }
})
import { React, ReactWhisper } from '@oliveai/ldk';
import { 
  Align,
  Variant,
 } from "@oliveai/ldk/src/whisper/types"
 
 const TypographyExample = () => {
  
  return (
    <oh-whisper label="Typography Example" onClose={() => {}}>
      <oh-typography
        body='default = align: "inherit", paragraph: false, variant: "body1"'
      />
      <oh-typography
          paragraph={true}
          body='Paragraph: true'
      />
      <oh-typography
        align={Align.Center}
        body='Align: Center'
      />
      <oh-typography
        align={Align.Justify}
        body='Align: Justify'
      />
      <oh-typography
        align={Align.Left}
        body='Align: Left'
      />
      <oh-typography
        align={Align.Right}
        body='Align: Right'
      />
      <oh-typography
        tooltip='tooltip test'
        body='Tooltip'
      />
      <oh-typography
        variant={Variant.Body1}
        body='body1'
      />
      <oh-typography
        variant={Variant.Body2}
        body='body2'
      />
      <oh-typography
        variant={Variant.Button}
        body='button'
      />
      <oh-typography
        variant={Variant.Caption}
        body='caption'
      />
      <oh-typography
        variant={Variant.H1}
        body='h1'
      />
      <oh-typography
        variant={Variant.H1}
        body='h1'
      />
      <oh-typography
        variant={Variant.H2}
        body='h2'
      />
      <oh-typography
        variant={Variant.H3}
        body='h3'
      />
      <oh-typography
        variant={Variant.H4}
        body='h4'
      />
      <oh-typography
        variant={Variant.H5}
        body='h5'
      />
      <oh-typography
        variant={Variant.H6}
        body='h6'
      />
      <oh-typography
        variant={Variant.Inherit}
        body='inherit'
      />
      <oh-typography
        variant={Variant.Overline}
        body='overline'
      />
      <oh-typography
        variant={Variant.Subtitle1}
        body='subtitle1'
      />
      <oh-typography
        variant={Variant.Subtitle2}
        body='subtitle2'
      />
    </oh-whisper>
  );
};
​
ReactWhisper.renderNewWhisper(<TypographyExample />);
​
Whisper Components - Previous
Telephone
Next - APTITUDES
What are Aptitudes?
Last modified 4mo ago
Copy link