The avatar component allows you to display a rounded picture at the usual avatar size. This size is of course customizable.
This component can be useful for displaying pictures of logged-in users, a contacts list, directory of employees etc.
The avatar component can either display a single image or a horizontal stack of images. Images are displayed as inline-block elements.
A default image is used when the image
attribute is either blank or not specified.
<x-bladewind.avatar image="/path/to/the/image/file" />
The avatar component expects a value for its image
attribute. A default image is however, used if the attribute is either blank or not specified.
You can specify a size for the avatar. See the full list of attributes for the available sizes. The default size is regular
<x-bladewind.avatar
image="/path/to/the/image/file"
size="tiny" />
<x-bladewind.avatar
image="/path/to/the/image/file"
size="small" />
<x-bladewind.avatar
image="/path/to/the/image/file"
size="medium" />
// this is the default
<x-bladewind.avatar
image="/path/to/the/image/file" />
<x-bladewind.avatar
image="/path/to/the/image/file"
size="big" />
<x-bladewind.avatar
image="/path/to/the/image/file"
size="huge" />
<x-bladewind.avatar
image="/path/to/the/image/file"
size="omg" />
Stacked avatars have an overlapping effect. The component will not restrict you from stacking avatars of different sizes but, for a more appealing visual effect, stacking images of the same size is advised.
You can achieve stackability by setting the stacked="true"
attribute on each avatar that you want as part of the stack.
<x-bladewind.avatar
image="/path/to/the/image/file"
stacked="true" />
<x-bladewind.avatar
image="/path/to/the/image/file"
stacked="true" />
<x-bladewind.avatar
image="/path/to/the/image/file"
stacked="true" />
<x-bladewind.avatar
image="/path/to/the/image/file"
stacked="true" />
Avatars can be displayed with a dot to indicate the status of a user. These statuses could be online, offline, invisible. To show a dot indicator on an avatar simply set show_dot="true"
.
<x-bladewind.avatar
show_dot="true"
image="/path/to/the/image/file" />
By default the dot indicator is displayed at the base of the avatar. To change the placement to the top of the avatar, set the dot_placement="top"
attribute.
<x-bladewind.avatar
show_dot="true"
dot_placement="top"
image="/path/to/the/image/file" />
The dot is available in different colours if you wish to use an indicator that matches your theme. This also allows you to set different colours for different statuses.
Set the dot_color
attribute to any of the nine colours compiled into BladewindUI. See the attributes table below for all colours.
<x-bladewind.avatar show_dot="true"
dot_color="primary"
image="/path/to/the/image/file" />
<x-bladewind.avatar show_dot="true"
dot_color="gray"
image="/path/to/the/image/file" />
<x-bladewind.avatar show_dot="true"
dot_color="red"
image="/path/to/the/image/file" />
The table below shows a comprehensive list of all the attributes available for the Avatar component.
Option | Default | Available Values |
---|---|---|
image | public/vendor/bladewind/images/avatar.png | The url to the image file. By default a generic headshot image is used if no url is passed. |
alt | image | The text to display as the value for the image's alt attribute. |
size | regular | Specifies the size of the avatar. tiny small medium regular big huge omg |
stacked | false | Specifies if the avatar images are displayed as a stack. true false |
show_dot | false | Specifies if the avatar images have dot indicators. true false |
dot_color | green | Specifies what colour to use as the dot indicator. Only relevant if show_dot=true.primary
blue red
yellow green purple pink
orange gray cyan
|
dot_placement | bottom | Specifies where the dot indicator should be placed. Only relevant if show_dot=true.top bottom |
show_ring | true | By default avatars show a ring around them. Setting this can turn it off or back on. true false |
class | mr-2 mt-2 | Any additional css classes can be added using this attribute. |
<x-bladewind.avatar
image="/path/to/the/image/file"
alt="company logo"
size="big"
stacked="true"
show_dot="true"
show_ring="false",
dot_color="red",
dot_placement="top"
class="ring-blue-200 ring-offset-2" />
resources > views > components > bladewind > avatar.blade.php
.
The default image displayed when no image is passed is public > vendor > bladewind > images > avatar.png