Avatar
Size
Sets the size of the avatar, accepts a number type value.
<script setup lang="ts">
import { NmorphAvatar } from "@nmorph/nmorph-ui-kit";
import { Cat, Dog, Racoon } from "~/assets/images";
</script><template>
<div class="avatar-size-overview">
<NmorphAvatar :src="Dog" :size="70" />
<NmorphAvatar :src="Cat" :size="50" />
<NmorphAvatar :src="Racoon" :size="40" />
</div>
</template>Shape
Defines the shape of the avatar. Can be circle or square.
<script setup lang="ts">
import { NmorphAvatar } from "@nmorph/nmorph-ui-kit";
import { Dog, Racoon } from "~/assets/images";
</script><template>
<div class="avatar-shape-overview">
<NmorphAvatar :src="Dog" :size="70" shape="square" />
<NmorphAvatar :src="Racoon" :size="70" shape="circle" />
<NmorphAvatar :src="Dog" :size="70" shape="square" design="plain" borderless />
</div>
</template>Fit
Defines how the image is displayed in the container.
<script setup lang="ts">
import { NmorphAvatar } from "@nmorph/nmorph-ui-kit";
import CatReal from "~/assets/images/cat-real.png";
</script><template>
<div class="avatar-fit-overview">
<NmorphAvatar :src="CatReal" :size="100" shape="square" fit="cover" />
<NmorphAvatar :src="CatReal" :size="100" shape="square" fit="contain" />
<NmorphAvatar :src="CatReal" :size="100" shape="square" fit="fill" />
</div>
</template>Name
Used to generate initials for the fallback when no image is available.
JD
AS
<script setup lang="ts">
import { NmorphAvatar } from "@nmorph/nmorph-ui-kit";
</script><template>
<div class="avatar-name-overview">
<NmorphAvatar name="John Doe" :size="70" />
<NmorphAvatar name="Alex Smith" :size="50" />
</div>
</template>Preview
Opens an image preview on avatar click. `src` and `previewSrc` can accept a string or an array of strings.
<script setup lang="ts">
import { NmorphAvatar } from "@nmorph/nmorph-ui-kit";
import { Dog, Racoon } from "~/assets/images";
</script><template>
<div class="avatar-preview-overview">
<NmorphAvatar
:src="[Dog, Racoon]"
preview
:size="80"
shape="square"
:preview-initial-index="0"
/>
</div>
</template>