Shape
v0.0.10
v0.0.10StableComponentStatelessApache-2.0
Installation
mix mishka.ui.gen.component shape
Source
View Source
Overview of the Shape Component
The Shape component clips its content to a chosen geometric outline. Available shapes: squircle, circle, square, heart, star, star_alt, diamond, pentagon, hexagon, hexagon_alt, decagon, triangle, triangle_down, triangle_left, triangle_right.
Basic usage with image
Basic usage with image
heex
<.shape variant="squircle" src="/avatar.jpg" alt="User avatar" />All 15 shapes
All 15 shapes
heex
<.shape :for={shape <- @shapes} variant={shape} size="medium" src="..." />Sizes
Sizes
heex
<.shape variant="circle" size="extra_small" src="..." />
<.shape variant="circle" size="small" src="..." />
<.shape variant="circle" size="medium" src="..." />
<.shape variant="circle" size="large" src="..." />
<.shape variant="circle" size="extra_large" src="..." />Half mode
Use half="first" or half="second" to render only half of the shape, which is useful for split / hover reveals.
Half mode
heex
<.shape variant="hexagon" half="first" src="..." />
<.shape variant="hexagon" half="second" src="..." />Custom content (slot)
Skip src and pass a slot to clip any HEEx content (gradients, video, avatar initials, etc.) to the shape.
Custom content (slot)
AB
heex
<.shape variant="hexagon" size="large">
<div class="bg-gradient-to-br from-primary-light to-primary-dark size-full
flex items-center justify-center text-white">
AB
</div>
</.shape>Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | No | — |
class
|
any
| — | — | No | — |
variant
|
string
|
squircle
| — | No | Shape: squircle, circle, square, heart, star, star_alt, diamond, pentagon, hexagon, hexagon_alt, decagon, triangle, triangle_down, triangle_left, triangle_right |
size
|
string
|
medium
|
extra_smallsmallmediumlargeextra_large
| No | extra_small | small | medium | large | extra_large |
half
|
string
| — | — | No | Show only half of the shape: "first" (left/top) or "second" (right/bottom) |
src
|
string
| — | — | No | Image source — renders an <img> if provided |
alt
|
string
| — | — | No | Alt text when src is set |
rest
|
global
| — | — | No | — |
Slots
| Name | Required | Description |
|---|---|---|
inner_block
| No | — |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--size
|
extra_smallsmallmediumlargeextra_large
|
--module
| A module name of your own |
What it generates
Functions
shape
Helpers
None
Generated with it
None
Command
mix mishka.ui.gen.component shape