Author

Component

Props

name

Sets the name (or full name) for the author. Additionally, it is used by the author's avatar to set the initials, in case the are required if no imgUrl is set.

 <template>
    <Author name="John Doe" />
</template>
 

• Type: string
• Default: 'John Doe'

role

Sets the role for the author. It is used to display the role in the author's details.

 <template>
    <Author role="Frontend Developer" />
</template>
 

imgUrl

The imgUrl prop sets the image source for the author's avatar. If the URL is not provided, invalid or the image fails to load, a fallback (initials) is shown.

 <template>
    <Author imgUrl="https://exampleweb.com/image/20" />
</template>
 

• Type: string

layoutOrientation

The layoutOrientation prop defines the main layout orientation of the author's information and avatar. It uses the Orientation enum.

 <template>
    <Author :layoutOrientation="Orientation.HORIZONTAL" />
</template>
 

• Type: Orientation
• Default: Orientation.HORIZONTAL

Options

detailsOrientation

Defines the author details layout orientation. It uses the Orientation enum.

 <template>
    <Author :detailsOrientation="Orientation.VERTICAL" />
</template>
 

• Type: Orientation
• Default: Orientation.VERTICAL

Options

shape

The shape prop defines the author's avatar container shape. It uses the AvatarShape enum.

 <template>
    <Author :shape="AvatarShape.CIRCLE" />
</template>
 

• Type: AvatarShape
• Default: AvatarShape.CIRCLE

Options

size

The size prop determines the overall dimensions of the user's avatar. It uses the AvatarSize enum.

Allowed sizes: XS, SM, MD

 <template>
    <Author :size="AvatarSize.SM" />
</template>
 

• Type: AvatarSize
• Default: AvatarSize.SM

Options