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 |
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 />);
Last modified 8mo ago