Flux

Appearance

Comment ​

This component represents a user comment with support for customizable details such as the author's name, avatar, and optional time information. It includes a structured layout with an avatar, header, and message body, allowing additional content to be provided via a slot. Styles can adjust its appearance, such as flipping or differentiating received comments.

Props

avatar-alt?: string
A brief description of the image that is shown.

avatar-fallback?: "colored" | "neutral"
How the fallback to initials should look.

avatar-fallback-icon?: FluxIconName
The icon that is used within the fallback.

avatar-fallback-initials?: string
The initials that are used for the fallback.

avatar-url?: string
The url to the image source that is used in the avatar.

is-flipped?: boolean
Flip the comment.

is-received?: boolean
Use a received appearance.

name: string
The name of the comment's author.

period?: string
The period when the comment was created.

Slots

default
The contents of the comment.

Examples ​

Incoming

An incoming comment that is used within a message thread.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ducimus earum sed tenetur. Amet at dicta explicabo facere, fuga id itaque nisi quam quisquam tempore. Alias asperiores ea odio perspiciatis?
System

<template>
    <FluxComment
        avatar-fallback="neutral"
        avatar-fallback-icon="gear"
        posted-by="System"
        :posted-on="postedOn"
        is-received>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ducimus earum sed tenetur. Amet at dicta explicabo facere, fuga id itaque nisi quam quisquam tempore. Alias asperiores ea odio perspiciatis?
    </FluxComment>
</template>

<script
    lang="ts"
    setup>
    import { FluxComment } from '@flux-ui/components';
    import { DateTime } from 'luxon';

    const postedOn = DateTime.now().minus({seconds: 45});
</script>

Outgoing

An outgoing comment that is used within a message thread.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ducimus earum sed tenetur. Amet at dicta explicabo facere, fuga id itaque nisi quam quisquam tempore. Alias asperiores ea odio perspiciatis? 

<template>
    <FluxComment
        avatar-fallback-icon="user"
        posted-by="You"
        :posted-on="postedOn">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio ducimus earum sed tenetur. Amet at dicta explicabo facere, fuga id itaque nisi quam quisquam tempore. Alias asperiores ea odio perspiciatis?
    </FluxComment>
</template>

<script
    lang="ts"
    setup>
    import { FluxComment } from '@flux-ui/components';
    import { DateTime } from 'luxon';

    const postedOn = DateTime.now();
</script>

Typing

An indication that someone is typing a message.

Bas Milius

<template>
    <FluxComment
        avatar-fallback-icon="user"
        is-received
        is-typing
        posted-by="Bas Milius"/>
</template>

<script
    lang="ts"
    setup>
    import { FluxComment } from '@flux-ui/components';
</script>

Used components ​