Layouts
v0.0.10
mix mishka.ui.gen.component layout
Overview of the Phoenix LiveView Layout Component
The Phoenix LiveView layout component component is customizable utility for building responsive UI structures using Tailwind CSS. It wraps flex and grid systems in a clean interface that allows you to control spacing, alignment, order, direction, and more.
Overview of the Phoenix LiveView Layout Component
Flex Component
The flex component provides a clean abstraction over Tailwind’s flexbox utilities. Below is a breakdown of all available props with examples.
Flex Component
<.flex></.flex>Grid Component
Grid Component
<.grid></.grid>Direction prop
Sets the direction of flex items inside the container (row or column).
Direction prop
<.flex direction="col"></.flex>
<.flex direction="col"></.flex>
<.flex direction="col"></.flex>
<.flex direction="col"></.flex>Justify prop
Controls horizontal alignment of children inside the container.
Justify prop
<.flex justify="start"></.flex>
<.flex justify="center"></.flex>
<.flex justify="end"></.flex>
<.flex justify="between"></.flex>
<.flex justify="around"></.flex>
<.flex justify="evenly"></.flex>Align prop
Controls vertical alignment of items along the cross axis.
Align prop
<.flex align="start"></.flex>
<.flex align="center"></.flex>
<.flex align="end"></.flex>
<.flex align="stretch"></.flex>
<.flex align="baseline"></.flex>Gap prop
Sets the spacing between child elements using Tailwind's gap utilities.
Gap prop
<.flex gap="extra_small"></.flex>
<.flex gap="small"></.flex>
<.flex gap="medium"></.flex>
<.flex gap="large"></.flex>
<.grid gap="extra_large"></.grid>Wrap prop
Enables or disables flex wrapping when items overflow the container.
Wrap prop
<.flex wrap="nowrap"></.flex>
<.flex wrap="wrap"></.flex>
<.flex wrap="wrap-reverse"></.flex>Grow prop
Allows a flex item to grow and fill the remaining space. The prop goes on the flex element that should grow, so that element sits inside another flex container. It takes grow or none, or a Tailwind class.
Grow prop
<.flex wrap="nowrap" gap="small">
<.flex grow="grow">Grows</.flex>
<.flex grow="none">Normal</.flex>
</.flex>Shrink prop
Specifies whether a flex item can shrink when its container is too small for all of its items. It takes shrink or none, or a Tailwind class. In the example both items ask for three quarters of the width: the first one shrinks to make room, and the second keeps its size.
Shrink prop
<.flex wrap="nowrap" class="w-full">
<.flex shrink="shrink" class="w-3/4">Shrinks</.flex>
<.flex shrink="none" class="w-3/4">Keeps its size</.flex>
</.flex>Basis prop
Sets the initial size of a flex item before the remaining space is distributed. The named values extra_small, small, medium, large and extra_large are Tailwind's basis-1 to basis-5, which are small steps of the spacing scale. For a share of the container, write a Tailwind class such as basis-1/3.
Basis prop
<.flex wrap="nowrap" gap="small">
<.flex basis="basis-1/3">1/3 width</.flex>
<.flex grow="grow">Takes the rest</.flex>
</.flex>
<.flex basis="extra_small"></.flex>
<.flex basis="small"></.flex>
<.flex basis="medium"></.flex>
<.flex basis="large"></.flex>
<.flex basis="extra_large"></.flex>Order prop
Controls the visual order of an item, whatever its place in the markup. It takes first, last or none, and goes on the item: a flex or a grid inside its parent.
Order prop
<.flex wrap="nowrap" gap="small">
<.flex order="last">Last</.flex>
<.flex>Middle</.flex>
<.flex order="first">First</.flex>
</.flex>
<.flex order="none">An item that keeps its place</.flex>
<.grid order="last">A grid takes order the same way</.grid>Align self prop
Controlling how an individual flex item is positioned along its container's cross axis. It takes auto, start, center, end or stretch, goes on the flex item, and overrides the container's own align.
Align self prop
<.flex wrap="nowrap" align="start" gap="small" class="h-32">
<.flex>Follows the container</.flex>
<.flex align_self="center">Center</.flex>
<.flex align_self="end">End</.flex>
</.flex>
<.flex align_self="auto"></.flex>
<.flex align_self="start"></.flex>
<.flex align_self="stretch"></.flex>Grid cols prop
Sets the number of columns in the grid layout.
Grid cols prop
<.grid cols="one"></.grid>
<.grid cols="two"></.grid>
<.grid cols="three"></.grid>
<.grid cols="four"></.grid>
<.grid cols="five"></.grid>
<.grid cols="six"></.grid>
<.grid cols="seven"></.grid>
<.grid cols="eight"></.grid>
<.grid cols="nine"></.grid>
<.grid cols="ten"></.grid>
<.grid cols="eleven"></.grid>
<.grid cols="twelve"></.grid>
<.grid cols="none"></.grid>Rows prop
Defines the number of rows in the grid layout.
Rows prop
<.grid rows="one"></.grid>
<.grid rows="two"></.grid>
<.grid rows="three"></.grid>
<.grid rows="four"></.grid>
<.grid rows="five"></.grid>
<.grid rows="six"></.grid>
<.grid rows="none"></.grid>Auto cols prop
Sets the size of implicit columns (auto-generated by the browser). Columns are implicit when the grid declares none of its own, so the example turns cols off with none and places the items in a row with auto_flow="col". With min every column is as narrow as its content; with fr the columns share the width equally.
Auto cols prop
<.grid cols="none" auto_flow="col" auto_cols="min" gap="small">
<div>min</div>
<div>min</div>
<div>min</div>
</.grid>
<.grid cols="none" auto_flow="col" auto_cols="fr" gap="small">
<div>fr</div>
<div>fr</div>
<div>fr</div>
</.grid>
<.grid auto_cols="auto"></.grid>
<.grid auto_cols="max"></.grid>Auto rows prop
Sets the size of implicit rows in the layout.
Auto rows prop
<.grid auto_rows="auto"></.grid>
<.grid auto_rows="min"></.grid>
<.grid auto_rows="max"></.grid>
<.grid auto_rows="fr"></.grid>Auto flow prop
Controls the direction of auto-placed items in the grid (row or column).
Auto flow prop
<.grid auto_flow="row"></.grid>
<.grid auto_flow="col"></.grid>
<.grid auto_flow="row-dense"></.grid>
<.grid auto_flow="col-dense"></.grid>Justify items prop
Controls how grid items align horizontally inside their cells. The grid's justify_items prop does not add a class, so write Tailwind's justify-items-center (or justify-items-start, justify-items-end, justify-items-stretch) in class. To place one item, write justify_self on that item: it takes auto, start, end, center or stretch. In the second grid below, each item is a one-column grid of its own.
Justify items prop
<.grid cols="two" gap="medium" class="justify-items-center">
<div>Centered 1</div>
<div>Centered 2</div>
</.grid>
<.grid cols="two" gap="medium">
<.grid cols="one" justify_self="start">Start</.grid>
<.grid cols="one" justify_self="end">End</.grid>
</.grid>
<.grid justify_self="auto"></.grid>
<.grid justify_self="center"></.grid>
<.grid justify_self="stretch"></.grid>Align content prop
Defines how multiple rows align in the grid container.
Align content prop
<.grid align_content="start"></.grid>
<.grid align_content="center"></.grid>
<.grid align_content="end"></.grid>
<.grid align_content="between"></.grid>
<.grid align_content="around"></.grid>
<.grid align_content="evenly"></.grid>Place content prop
Shorthand for aligning content both horizontally and vertically inside the grid.
Place content prop
<.grid place_content="start"></.grid>
<.grid place_content="center"></.grid>
<.grid place_content="end"></.grid>
<.grid place_content="between"></.grid>
<.grid place_content="around"></.grid>
<.grid place_content="evenly"></.grid>
<.grid place_content="stretch"></.grid>Place items prop
Shorthand to control alignment of individual items along both axes.
Place items prop
<.grid place_items="start"></.grid>
<.grid place_items="end"></.grid>
<.grid place_items="center"></.grid>
<.grid place_items="stretch"></.grid>Place self prop
Controls alignment of a single item inside the grid. It goes on the item and takes auto, start, end, center or stretch.
Place self prop
<.grid cols="two" gap="medium" class="h-64">
<.grid cols="one" place_self="center">I am centered</.grid>
<.grid cols="one">I'm default</.grid>
</.grid>
<.grid place_self="auto"></.grid>
<.grid place_self="start"></.grid>
<.grid place_self="end"></.grid>
<.grid place_self="stretch"></.grid>Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | No | A unique identifier for the root element of the component |
direction
|
string
|
row
| — | No | Sets the flex direction of the container |
justify
|
string
|
start
| — | No | Controls alignment of items along the main axis |
align
|
string
|
stretch
| — | No | Controls alignment of items along the cross axis |
align_self
|
string
| — | — | No | Controls alignment for a single item, overriding the container's align setting |
gap
|
string
| — | — | No | Sets the space between child elements |
wrap
|
string
|
wrap
| — | No | Controls wrapping behavior of flex items |
grow
|
string
| — | — | No | Determines whether flex items grow to fill available space |
shrink
|
string
| — | — | No | Determines whether flex items shrink if needed |
basis
|
string
| — | — | No | Sets the initial main size of a flex item |
order
|
string
| — | — | No | Controls the visual order of an item within a flex or grid container |
class
|
any
| — | — | No | Additional CSS classes to apply to the container |
rest
|
global
| — | — | No | Any valid global HTML attributes passed to the component (e.g. aria, data-*) |
Slots
| Name | Required | Description |
|---|---|---|
inner_block
| No | The inner content to render inside the component |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--type
|
flexgrid
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component layout