LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props:
  • Examples

Was this helpful?

  1. Whisper Components

Section Title

Section Title is a section heading component to a Whisper, it helps better separate content on the Whisper.

PreviousRichTextEditorNextSelect

Last updated 3 years ago

Was this helpful?

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.

import { whisper } from '@oliveai/ldk';
import {
  Color,
  TextAlign,
  WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';

export const sectionTitle = async() => {
  await whisper.create({
    label: 'Olive Helps Section title Loop',
    components: [
      {
        body: 'section Title in center with [Some Link 1](# "A Link")',
        type: WhisperComponentType.SectionTitle,
        textAlign: TextAlign.Center,
      },
      {
        body: 'section Title on the left with a link : http://google.com',
        type: WhisperComponentType.SectionTitle,
        textAlign: TextAlign.Left,
      },
      {
        body: '~~Strikethrough section Title on the right(white)~~',
        type: WhisperComponentType.SectionTitle,
        textAlign: TextAlign.Right,
        backgroundStyle: Color.White,
      },
      {
        body: '_Italic section Title in center(grey)_',
        textAlign: TextAlign.Center,
        type: WhisperComponentType.SectionTitle,
        backgroundStyle: Color.Grey,
      },
      {
        type: WhisperComponentType.Markdown,
        body: 'Section Title is a section heading component to a Whisper. It helps better separate content on the Whisper. ',
      },
    ],
  });
}
import { React, ReactWhisper } from '@oliveai/ldk';
import { Color, TextAlign } from '@oliveai/ldk/dist/whisper/types';

 ReactWhisper.renderNewWhisper(
  <oh-whisper label="Olive Helps Section title Loop" onClose={() => {}}>
    <oh-section-title 
      body="section Title in center with [Some Link 1](# 'A Link')" 
      textAlign={TextAlign.Center} 
    />
    <oh-section-title
        body="section Title on the left with a link : http://google.com"
        textAlign={TextAlign.Left}
    />
    <oh-section-title
      body="~~Strikethrough section Title on the right(white)~~"
      textAlign={TextAlign.Right}
      backgroundStyle={Color.White}
    />
    <oh-section-title
      body="_Italic section Title in center(grey)_"
      textAlign={TextAlign.Center}
      backgroundStyle={Color.Grey}
    />
    <oh-markdown 
      body="Section Title is a section heading component to a Whisper. It helps better separate content on the Whisper. " 
    />
  </oh-whisper>,
);