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

Link

The Link component provides the ability to customize anchor elements with four urgency styles

PreviousList PairNextPagination

Last updated 3 years ago

Was this helpful?

Props:

Properties
Descriptions
Required
Default

href

The web address that this link points.

text

The text that you want to display for your link.

onClick

Executes the provided function when the Link is clicked.

style

Urgency.Error- White text with red background. Urgency.None - purple text with no background.

Urgency.Success- White text with green background.

Urgency.Warning - Red Text with light yellow background.

Urgency.None

textAlign

TextAlign.Left - The inline contents are aligned to the left edge of the whisper content area. TextAlign.Right - The inline contents are aligned to the right edge of the whisper content area. TextAlign.Center - The inline contents are centered within the whisper content area.

TextAlign.Left

Examples

Let's take a closer look at the Link component and its different styles. In this code block, you can:

  • Create four different links with different Urgency options.

  • Create a link without style set up, the link will use its default style, which is Urgency.None.

  • Create a link for Olive Helps. By clicking this link, it will direct you to a new page.

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

export const linkWhisper = async () => {
  await whisper.create({
    label: 'Links',
    onClose: () => {
      console.debug('closed');
    },
    components: [
      {
        type: WhisperComponentType.Link,
        textAlign: TextAlign.Left,
        onClick: () => {
          console.log('success');
        },
        text: `Urgency.Success`,
        style: Urgency.Success,
      },
      {
        type: WhisperComponentType.Link,
        textAlign: TextAlign.Left,
        onClick: () => {
          console.log('warning');
        },
        text: `Urgency.Warning`,
        style: Urgency.Warning,
      },
      {
        type: WhisperComponentType.Link,
        textAlign: TextAlign.Left,
        onClick: () => {
          console.log('error');
        },
        text: `Urgency.Error`,
        style: Urgency.Error,
      },
      {
        type: WhisperComponentType.Link,
        textAlign: TextAlign.Left,
        onClick: () => {
          console.log('none');
        },
        text: `Urgency.None`,
        style: Urgency.None,
      },
      {
        type: WhisperComponentType.Link,
        textAlign: TextAlign.Left,
        onClick: () => {
          console.log('default');
        },
        text: `Default`,
      },
      {
        type: WhisperComponentType.Link,
        text: `Olive Helps`,
        textAlign: TextAlign.Left,
        href: 'https://oliveai.com/developers/helps',
        onClick: () => {
          console.log('success');
        },
      },
      {
        type: WhisperComponentType.Link,
        textAlign: TextAlign.Left,
        text: `Update the Whisper`,
        onClick: (_error: Error, onClickWhisper: Whisper) => {
          onClickWhisper.update({
            components: [
              {
                type: WhisperComponentType.Message,
                body: 'You just updated this whisper by clicking the link!',
              },
            ],
          });
        },
      },
    ],
  });
}

If you have any questions about Updating Whispers, please check Whisper Updates.

import { React, ReactWhisper } from '@oliveai/ldk';
import { TextAlign, Urgency } from '@oliveai/ldk/dist/whisper/types';
  
const LinkWhispers: React.FunctionComponent<Object> = () => { 
// Set initial React state to isWhisperUpdated===false
  const [isWhisperUpdated, updateWhisper] = React.useState(false);
  return (
    <oh-whisper label='Link examples' onClose={() => console.debug('closed')}>
      {isWhisperUpdated === true && <oh-message body="You just updated this whisper by clicking the link!" />}
      {isWhisperUpdated === false && [
        <oh-link
          textAlign={TextAlign.Left}
          text="Urgency.Success"
          style={Urgency.Success}
          onClick={() => {
            console.log('success');
          }}
        />,
        <oh-link
          textAlign={TextAlign.Left}
          text="Urgency.Warning"
          style={Urgency.Warning}
          onClick={() => {
            console.log('warning');
          }}
        />,
        <oh-link
          textAlign={TextAlign.Left}
          text="Urgency.Error"
          style={Urgency.Error}
          onClick={() => {
            console.log('error');
          }}
        />,
        <oh-link
          textAlign={TextAlign.Left}
          text="Urgency.None"
          style={Urgency.None}
          onClick={() => {
            console.log('none');
          }}
        />,
        <oh-link
          textAlign={TextAlign.Left}
          text="default"
          onClick={() => {
            console.log('default');
          }}
        />,
        <oh-link
          textAlign={TextAlign.Left}
          text="Olive Helps"
          href="https://oliveai.com/developers/helps"
          onClick={() => {
            console.log('success');
          }}
        />,
        <oh-link
          textAlign={TextAlign.Left}
          text="Update the Whisper"
          onClick={(error) => {
            if (error) {
              console.log(error);
            } else {
            // Update React State to isWhisperUpdated===true
              updateWhisper(true);
            }
          }}
        />,
      ]}
    </oh-whisper>
  );
};

ReactWhisper.renderNewWhisper(<LinkWhispers />);

If you have any questions about Updating React Whispers, please check JSX Whispers.

Create a link to . By clicking the link, it will update the Whisper. The updated Whisper should look like the screenshot below.

Update the Whisper