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!
​
Whisper Components - Previous
Telephone
Next - APTITUDES
What are Aptitudes?
Last modified 19d ago
Copy link
Contents
Examples