List Pair

Props
Name
Type
Description
Required
Default
copyable
boolean
Copy the unbolded text to the right (including markdown).
​
labelCopyable
boolean
Copy the bolded text to the left (including markdown).
false
label
string
The bolded left hand text.
​
onValueCopy
function
Executes the provided function when the value is copied.
null
onLabelCopy
function
Executes the provided function when the label is copied.
​
style
+Urgency
Background color of the component.
​
value
string
The unbolded left hand text. Markdown compatible.
​
Note: Types marked with + are Olive LDK enums
Examples
4 separate List Pair components with different style prop values and a markdown link
Javascript
React
1
import { whisper } from '@oliveai/ldk';
2
import {
3
  Whisper,
4
  WhisperComponentType,
5
} from '@oliveai/ldk/dist/whisper/types';
6
​
7
await whisper.create({
8
  label: 'List Pair',
9
  components: [
10
    {
11
      type: whisper.WhisperComponentType.ListPair,
12
      copyable: true,
13
      label: 'Label None Not Copyable',
14
      labelCopyable: false,
15
      onValueCopy: (error, value) => {
16
        console.log('Copied: ', value);
17
      },
18
      style: whisper.Urgency.None,
19
      value: 'Value None Copyable [Link](https://docs.oliveai.dev/)',
20
    },
21
    {
22
      type: whisper.WhisperComponentType.ListPair,
23
      copyable: true,
24
      label: 'Label Error Copyable',
25
      labelCopyable: true,
26
      onLabelCopy: (error, value) => {
27
        console.log('Copied: ', value);
28
      },
29
      style: whisper.Urgency.Error,
30
      value: 'Value Error Copyable [Link](https://docs.oliveai.dev/)',
31
    },
32
    {
33
      type: whisper.WhisperComponentType.ListPair,
34
      copyable: true,
35
      label: 'Label Success Not Copyable',
36
      labelCopyable: false,
37
      onValueCopy: (error, value) => {
38
        console.log('Copied: ', value);
39
      },
40
      style: whisper.Urgency.Success,
41
      value: 'Value Success Copyable [Link](https://docs.oliveai.dev/)',
42
    },
43
    {
44
      type: whisper.WhisperComponentType.ListPair,
45
      copyable: false,
46
      label: 'Label Warning Copyable',
47
      labelCopyable: true,
48
      onLabelCopy: (error, value) => {
49
        console.log('Copied: ', value);
50
      },
51
      style: whisper.Urgency.Warning,
52
      value: 'Value Warning Not Copyable [Link](https://docs.oliveai.dev/)',
53
    },
54
  ],
55
});
Copied!
1
import * as React from 'react';
2
import '@oliveai/ldk';
3
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
4
import { Urgency } from '@oliveai/ldk/dist/whisper/types';
5
​
6
const TestListPair = () => {
7
  return (
8
    <oh-whisper label="List Pair">
9
      <oh-list-pair
10
        copyable={true}
11
        labelCopyable={false}
12
        label="Label None Not Copyable"
13
        onValueCopy={(error, value) => {
14
          console.log('Copied: ', value);
15
        }}
16
        style={Urgency.None}
17
        value="Value None Copyable [Link](https://docs.oliveai.dev/)"
18
      />
19
      <oh-list-pair
20
        copyable={true}
21
        labelCopyable={true}
22
        label="Label Error Copyable"
23
        onLabelCopy={(error, value) => {
24
          console.log('Copied: ', value);
25
        }}
26
        style={Urgency.Error}
27
        value="Value Error Copyable [Link](https://docs.oliveai.dev/)"
28
      />
29
      <oh-list-pair
30
        copyable={true}
31
        labelCopyable={false}
32
        label="Label Success Not Copyable"
33
        onValueCopy={(error, value) => {
34
          console.log('Copied: ', value);
35
        }}
36
        style={Urgency.Success}
37
        value="Value Success Copyable [Link](https://docs.oliveai.dev/)"
38
      />
39
      <oh-list-pair
40
        copyable={false}
41
        labelCopyable={true}
42
        label="Label Warning Copyable"
43
        onLabelCopy={(error, value) => {
44
          console.log('Copied: ', value);
45
        }}
46
        style={Urgency.Warning}
47
        value="Value Warning Not Copyable [Link](https://docs.oliveai.dev/)"
48
      />
49
    </oh-whisper>
50
  );
51
};
52
​
53
ReactWhisper.renderNewWhisper(<TestListPair />);
Copied!

Whisper Components - Previous

Icon

Next - Whisper Components

Link

Last modified 20h ago

Copy link

Contents

Props

Examples