LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page

Was this helpful?

  1. Whisper Components

Typography

Typography can be used to set themes for react components, learn more at https://mui.com/material-ui/api/typography/

PreviousTelephoneNextWhat are Aptitudes?

Last updated 3 years ago

Was this helpful?

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.

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 />);