List Pair
The List Pair component helps organize data by label and value.
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

4 separate List Pair components with different
style
prop values and a markdown linkJavascript
React
import { whisper } from '@oliveai/ldk';
import {
Whisper,
WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';
await whisper.create({
label: 'List Pair',
components: [
{
type: whisper.WhisperComponentType.ListPair,
copyable: true,
label: 'Label None Not Copyable',
labelCopyable: false,
onValueCopy: (error, value) => {
console.log('Copied: ', value);
},
style: whisper.Urgency.None,
value: 'Value None Copyable [Link](https://docs.oliveai.dev/)',
},
{
type: whisper.WhisperComponentType.ListPair,
copyable: true,
label: 'Label Error Copyable',
labelCopyable: true,
onLabelCopy: (error, value) => {
console.log('Copied: ', value);
},
style: whisper.Urgency.Error,
value: 'Value Error Copyable [Link](https://docs.oliveai.dev/)',
},
{
type: whisper.WhisperComponentType.ListPair,
copyable: true,
label: 'Label Success Not Copyable',
labelCopyable: false,
onValueCopy: (error, value) => {
console.log('Copied: ', value);
},
style: whisper.Urgency.Success,
value: 'Value Success Copyable [Link](https://docs.oliveai.dev/)',
},
{
type: whisper.WhisperComponentType.ListPair,
copyable: false,
label: 'Label Warning Copyable',
labelCopyable: true,
onLabelCopy: (error, value) => {
console.log('Copied: ', value);
},
style: whisper.Urgency.Warning,
value: 'Value Warning Not Copyable [Link](https://docs.oliveai.dev/)',
},
],
});
import * as React from 'react';
import '@oliveai/ldk';
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
import { Urgency } from '@oliveai/ldk/dist/whisper/types';
const TestListPair = () => {
return (
<oh-whisper label="List Pair">
<oh-list-pair
copyable={true}
labelCopyable={false}
label="Label None Not Copyable"
onValueCopy={(error, value) => {
console.log('Copied: ', value);
}}
style={Urgency.None}
value="Value None Copyable [Link](https://docs.oliveai.dev/)"
/>
<oh-list-pair
copyable={true}
labelCopyable={true}
label="Label Error Copyable"
onLabelCopy={(error, value) => {
console.log('Copied: ', value);
}}
style={Urgency.Error}
value="Value Error Copyable [Link](https://docs.oliveai.dev/)"
/>
<oh-list-pair
copyable={true}
labelCopyable={false}
label="Label Success Not Copyable"
onValueCopy={(error, value) => {
console.log('Copied: ', value);
}}
style={Urgency.Success}
value="Value Success Copyable [Link](https://docs.oliveai.dev/)"
/>
<oh-list-pair
copyable={false}
labelCopyable={true}
label="Label Warning Copyable"
onLabelCopy={(error, value) => {
console.log('Copied: ', value);
}}
style={Urgency.Warning}
value="Value Warning Not Copyable [Link](https://docs.oliveai.dev/)"
/>
</oh-whisper>
);
};
ReactWhisper.renderNewWhisper(<TestListPair />);
Last modified 1yr ago