Section Title

Props:
Properties
Descriptions
Required
Default
backgroundStyle
Background color of the component.
Color.White(#FFFFFF)
body
The content of SectionTitle that you want to display. Supports markdown.
​
textAlign
TextAlign.Left
The inline contents are aligned to the left edge of the line box. It's default value.

TextAlign.Right
The inline contents are aligned to the right edge of the line box.

TextAlign.Center
The inline contents are centered within the line box.
TextAlign.Left
Examples
SectionTitles can be aligned in different ways, and have a background color that stretches across the entire width of the Whisper, unlike some other components. In addition, the body attribute also allows you to use markdown for the content of the component. In this example, we'll look at the different alignments, background, and what the component looks like with some content. Here is a screenshot to show you what the code below will look like once you add the content.
​
​
TypeScript Example
React Example
​
​
1
import { whisper } from '@oliveai/ldk';
2
import {
3
  Color,
4
  TextAlign,
5
  WhisperComponentType,
6
} from '@oliveai/ldk/dist/whisper/types';
7
​
8
export const sectionTitle = async() => {
9
  await whisper.create({
10
    label: 'Olive Helps Section title Loop',
11
    components: [
12
      {
13
        body: 'section Title in center with [Some Link 1](# "A Link")',
14
        type: WhisperComponentType.SectionTitle,
15
        textAlign: TextAlign.Center,
16
      },
17
      {
18
        body: 'section Title on the left with a link : http://google.com',
19
        type: WhisperComponentType.SectionTitle,
20
        textAlign: TextAlign.Left,
21
      },
22
      {
23
        body: '~~Strikethrough section Title on the right(white)~~',
24
        type: WhisperComponentType.SectionTitle,
25
        textAlign: TextAlign.Right,
26
        backgroundStyle: Color.White,
27
      },
28
      {
29
        body: '_Italic section Title in center(grey)_',
30
        textAlign: TextAlign.Center,
31
        type: WhisperComponentType.SectionTitle,
32
        backgroundStyle: Color.Grey,
33
      },
34
      {
35
        type: WhisperComponentType.Markdown,
36
        body: 'Section Title is a section heading component to a Whisper. It helps better separate content on the Whisper. ',
37
      },
38
    ],
39
  });
40
}
41
​
Copied!
1
import { React, ReactWhisper } from '@oliveai/ldk';
2
import { Color, TextAlign } from '@oliveai/ldk/dist/whisper/types';
3
​
4
 ReactWhisper.renderNewWhisper(
5
  <oh-whisper label="Olive Helps Section title Loop" onClose={() => {}}>
6
    <oh-section-title 
7
      body="section Title in center with [Some Link 1](# 'A Link')" 
8
      textAlign={TextAlign.Center} 
9
    />
10
    <oh-section-title
11
        body="section Title on the left with a link : http://google.com"
12
        textAlign={TextAlign.Left}
13
    />
14
    <oh-section-title
15
      body="~~Strikethrough section Title on the right(white)~~"
16
      textAlign={TextAlign.Right}
17
      backgroundStyle={Color.White}
18
    />
19
    <oh-section-title
20
      body="_Italic section Title in center(grey)_"
21
      textAlign={TextAlign.Center}
22
      backgroundStyle={Color.Grey}
23
    />
24
    <oh-markdown 
25
      body="Section Title is a section heading component to a Whisper. It helps better separate content on the Whisper. " 
26
    />
27
  </oh-whisper>,
28
);
29
​
Copied!
​
​

Whisper Components - Previous

RichTextEditor

Next - Whisper Components

Select

Last modified 21d ago

Copy link

Contents

Props:

Examples