Typography
Typography can be used to set themes for react components, learn more at https://mui.com/material-ui/api/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 />);
Copy link