Link
The Link component provides the ability to customize anchor elements with four urgency styles
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 |
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
Urgencyoptions. - 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.
- Create a link to Update the Whisper. By clicking the link, it will update the Whisper. The updated Whisper should look like the screenshot below.
TypeScript Example
React Example
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!',
},
],
});
},
},
],
});
}
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 />);
Last modified 1yr ago