bladewindUI
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" />
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 | Defines the size of the avatar. tiny small medium regular big huge omg |
stacked | false | Defines if the avatar images are displayed as a stack. Value needs to be set as a string not boolean.true false |
class | mr-2 mt-2 | Any additonal css classes can be added using this attribute. |
<x-bladewind.avatar
image="/path/to/the/image/file"
alt="company logo"
size="big"
stacked="true"
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