SpeechBubble

Description

StickyNotes are a take on the classic computer metaphor of a sticknote. They are often used to provide notes or additional information to the viewer.

SpeechBubble

The SpeechBubble component is used to create a colored bubble with a speech bubble tail. The SpeechBubble has the following props:

• position (optional). Default value is b. Options are t (top), b (bottom), l (left), r (right), tl (top left), tr (top right), bl (bottom left), br (bottom right).
• shape (optional). Default value is ''. Options are round and circle which affect the corner radius of the bubble.
• animation (optional). Default value is ''. Options are pop and float
• color (optional) can be any of the color scheme options. If not provided, the default color is red-light.
• textAlign (optional) the text alignment of the content. Default is left.
• maxWidth (optional) the maximum width of the speech bubble. Default is 100%.
• borderWidth (optional) the width of the border. Default is 1px.

Example:

<SpeechBubble position="r" color='sky' shape="round" maxWidth="300px">

Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
</SpeechBubble>

Renders as:

Hello, I'm a speech bubble! I'm a longer speech bubble. I'm still going.

<SpeechBubble position="b" color='sky' shape="round" maxWidth="300px">

Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
</SpeechBubble>

Renders as:

Hello, I'm a speech bubble! I'm a longer speech bubble. I'm still going.

<SpeechBubble position="t" color='amber' shape="round" maxWidth="300px">

Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
</SpeechBubble>

Renders as:

Hello, I'm a speech bubble! I'm a longer speech bubble. I'm still going.

If you want to position it somewhere arbitrary on the slide add v-drag to the admonition and also set the maxWidth to something fixed (e.g., 300px):

<SpeechBubble position="t" color='sky' shape="round" maxWidth="300px" v-drag>

Hello, I'm a **speech bubble**! I'm a longer speech bubble. I'm still going.
</SpeechBubble>