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
1
import { whisper } from "@oliveai/ldk"
2
import {
3
WhisperComponentType,
4
Align,
5
Variant,
6
} from "@oliveai/ldk/src/whisper/types"
7
8
(async () => {
9
try {
10
await whisper.create({
11
label: 'Typography Example',
12
onClose: () => {
13
console.debug('closed');
14
},
15
components: [
16
{
17
type: WhisperComponentType.Typography,
18
body: 'default = align: "inherit", paragraph: false, variant: "body1"',
19
},
20
{
21
type: WhisperComponentType.Typography,
22
paragraph: true,
23
body: 'Paragraph: true',
24
},
25
{
26
type: WhisperComponentType.Typography,
27
align: Align.Center,
28
body: 'Align: Center',
29
},
30
{
31
type: WhisperComponentType.Typography,
32
align: Align.Justify,
33
body: 'Align: Justify',
34
},
35
{
36
type: WhisperComponentType.Typography,
37
align: Align.Left,
38
body: 'Align: Left',
39
},
40
{
41
type: WhisperComponentType.Typography,
42
align: Align.Right,
43
body: 'Align: Right',
44
},
45
{
46
type: WhisperComponentType.Typography,
47
tooltip: 'tooltip test',
48
body: 'Tooltip',
49
},
50
{
51
type: WhisperComponentType.Typography,
52
variant: Variant.Body1,
53
body: 'body1',
54
},
55
{
56
type: WhisperComponentType.Typography,
57
variant: Variant.Body2,
58
body: 'body2',
59
},
60
{
61
type: WhisperComponentType.Typography,
62
variant: Variant.Button,
63
body: 'button',
64
},
65
{
66
type: WhisperComponentType.Typography,
67
variant: Variant.Caption,
68
body: 'caption',
69
},
70
{
71
type: WhisperComponentType.Typography,
72
variant: Variant.H1,
73
body: 'h1',
74
},
75
{
76
type: WhisperComponentType.Typography,
77
variant: Variant.H2,
78
body: 'h2',
79
},
80
{
81
type: WhisperComponentType.Typography,
82
variant: Variant.H3,
83
body: 'h3',
84
},
85
{
86
type: WhisperComponentType.Typography,
87
variant: Variant.H4,
88
body: 'h4',
89
},
90
{
91
type: WhisperComponentType.Typography,
92
variant: Variant.H5,
93
body: 'h5',
94
},
95
{
96
type: WhisperComponentType.Typography,
97
variant: Variant.H6,
98
body: 'h6',
99
},
100
{
101
type: WhisperComponentType.Typography,
102
variant: Variant.Inherit,
103
body: 'inherit',
104
},
105
{
106
type: WhisperComponentType.Typography,
107
variant: Variant.Overline,
108
body: 'overline',
109
},
110
{
111
type: WhisperComponentType.Typography,
112
variant: Variant.Subtitle1,
113
body: 'subtitle1',
114
},
115
{
116
type: WhisperComponentType.Typography,
117
variant: Variant.Subtitle2,
118
body: 'subtitle2',
119
},
120
],
121
});
122
} catch (e) {
123
console.debug(e)
124
}
125
})
Copied!
1
import { React, ReactWhisper } from '@oliveai/ldk';
2
import {
3
Align,
4
Variant,
5
} from "@oliveai/ldk/src/whisper/types"
6
7
const TypographyExample = () => {
8
9
return (
10
<oh-whisper label="Typography Example" onClose={() => {}}>
11
<oh-typography
12
body='default = align: "inherit", paragraph: false, variant: "body1"'
13
/>
14
<oh-typography
15
paragraph={true}
16
body='Paragraph: true'
17
/>
18
<oh-typography
19
align={Align.Center}
20
body='Align: Center'
21
/>
22
<oh-typography
23
align={Align.Justify}
24
body='Align: Justify'
25
/>
26
<oh-typography
27
align={Align.Left}
28
body='Align: Left'
29
/>
30
<oh-typography
31
align={Align.Right}
32
body='Align: Right'
33
/>
34
<oh-typography
35
tooltip='tooltip test'
36
body='Tooltip'
37
/>
38
<oh-typography
39
variant={Variant.Body1}
40
body='body1'
41
/>
42
<oh-typography
43
variant={Variant.Body2}
44
body='body2'
45
/>
46
<oh-typography
47
variant={Variant.Button}
48
body='button'
49
/>
50
<oh-typography
51
variant={Variant.Caption}
52
body='caption'
53
/>
54
<oh-typography
55
variant={Variant.H1}
56
body='h1'
57
/>
58
<oh-typography
59
variant={Variant.H1}
60
body='h1'
61
/>
62
<oh-typography
63
variant={Variant.H2}
64
body='h2'
65
/>
66
<oh-typography
67
variant={Variant.H3}
68
body='h3'
69
/>
70
<oh-typography
71
variant={Variant.H4}
72
body='h4'
73
/>
74
<oh-typography
75
variant={Variant.H5}
76
body='h5'
77
/>
78
<oh-typography
79
variant={Variant.H6}
80
body='h6'
81
/>
82
<oh-typography
83
variant={Variant.Inherit}
84
body='inherit'
85
/>
86
<oh-typography
87
variant={Variant.Overline}
88
body='overline'
89
/>
90
<oh-typography
91
variant={Variant.Subtitle1}
92
body='subtitle1'
93
/>
94
<oh-typography
95
variant={Variant.Subtitle2}
96
body='subtitle2'
97
/>
98
</oh-whisper>
99
);
100
};
101
102
ReactWhisper.renderNewWhisper(<TypographyExample />);
Copied!
Copy link
Contents
Examples