Table of Contents

Class TwBubble

Namespace
TwBlazor.Components
Assembly
TwBlazor.dll

Represents a chat message bubble, with an optional row of reactions under it.

public class TwBubble : TwBlazorComponentBase, IComponent, IHandleEvent, IHandleAfterRender, ITwComponent
Inheritance
TwBubble
Implements
Inherited Members

Remarks

Inside a TwMessage the bubble follows the message's alignment, and a tip near its bottom points at the sender's avatar. Set Align to override the alignment.

Accessibility: the reactions are a group named "Reactions". Each reaction is announced by its Label (or emoji) and count. When OnReactionClick is set, each one is a toggle button that reports whether the current user chose it; otherwise the reactions are plain text.

Constructors

TwBubble() 

public TwBubble()

Properties

Align

Gets or sets which side of the conversation the bubble sits on.

[Parameter]
public MessageAlign? Align { get; set; }

Property Value

MessageAlign?

Remarks

If not set, the enclosing TwMessage's alignment is used, or Start outside one.

ChildContent

Gets or sets the content of the bubble.

[Parameter]
public RenderFragment? ChildContent { get; set; }

Property Value

RenderFragment

Color

Gets or sets the bubble's color.

[Parameter]
public Color? Color { get; set; }

Property Value

Color?

Remarks

If not set, a Soft or Outlined bubble is neutral gray and a Filled bubble uses the primary color.

OnReactionClick

Gets or sets the callback invoked when a reaction is clicked. When set, every reaction is a toggle button.

[Parameter]
public EventCallback<BubbleReaction> OnReactionClick { get; set; }

Property Value

EventCallback<BubbleReaction>

Remarks

The bubble does not change the reaction itself: update its Reacted and Count in the callback.

Reactions

Gets or sets the reactions shown under the bubble.

[Parameter]
public IEnumerable<BubbleReaction>? Reactions { get; set; }

Property Value

IEnumerable<BubbleReaction>

Tail

Gets or sets whether a tip near the bottom of the bubble points at the sender.

[Parameter]
public bool Tail { get; set; }

Property Value

bool

Variant

Gets or sets how the bubble is filled.

[Parameter]
public BubbleVariant Variant { get; set; }

Property Value

BubbleVariant

Methods

BuildRenderTree(RenderTreeBuilder)

Renders the component to the supplied RenderTreeBuilder.

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

__builder RenderTreeBuilder
Edit this page