Grid system
Container
My Content
<Container class="pa-4"> My Content </Container>
Available props:
<Container fluid="true" id="my-id" class="pa-4" tag="section"> My Content </Container> fluid: true | false - Removes viewport maximum-width size breakpoints id - DOM element id class - DOM element class tag: default=div - DOM element tag name
Grid
Content
Content
Content
<Container> <Row noGutters="true"> <Column cols="12" sm="4"> <Sheet class="pa-2" outlined="true">Content</Sheet> </Column> <Column cols="12" sm="4"> <Sheet class="pa-2" outlined="true">Content</Sheet> </Column> <Column cols="12" sm="4"> <Sheet class="pa-2" outlined="true">Content</Sheet> </Column> </Row> </Container>
Align
start
start
start
center
center
center
end
end
end
public array $alignments = [ 'start', 'center', 'end', ]; ... <div foreach="$alignments as $align" class="mt-4"> <Container class="card-mark-container"> <Row align="$align" noGutters="true" style="min-height: 90px"> <Column cols="12" sm="4"> <Sheet class="pa-2" outlined="true">$align</Sheet> </Column> <Column cols="12" sm="4"> <Sheet class="pa-2" outlined="true">$align</Sheet> </Column> <Column cols="12" sm="4"> <Sheet class="pa-2" outlined="true">$align</Sheet> </Column> </Row> </Container> </div>
Align self
start
center
end
<Container fluid="true" class="card-mark-container mt-4"> <Row noGutters="true" style="min-height: 90px"> <Column cols="12" sm="4" alignSelf="start"> <Sheet class="pa-2" outlined="true">start</Sheet> </Column> <Column cols="12" sm="4" alignSelf="center"> <Sheet class="pa-2" outlined="true">center</Sheet> </Column> <Column cols="12" sm="4" alignSelf="end"> <Sheet class="pa-2" outlined="true">end</Sheet> </Column> </Row> </Container>
Justify
start
start
center
center
end
end
space-around
space-around
space-between
space-between
public array $justifyOptions = [ 'start', 'center', 'end', 'space-around', 'space-between', ]; ... <Container fluid="true" class="card-mark-container mt-4"> <Row foreach="$justifyOptions as $justify" justify="$justify"> <Column md="4"> <Sheet class="pa-2" outlined="true">$justify</Sheet> </Column> <Column md="4"> <Sheet class="pa-2" outlined="true">$justify</Sheet> </Column> </Row> </Container>
Offset
md-4
offset-md-4
offset-md-3
offset-md-3
offset-md-3
<Container fluid="true" class="card-mark-container mt-4"> <Row noGutters="true" class="mb-6"> <Column md="4"> <Sheet class="pa-2" outlined="true">md-4</Sheet> </Column> <Column md="4" offset-md="4"> <Sheet class="pa-2" outlined="true">offset-md-4</Sheet> </Column> </Row> <Row noGutters="true" class="mb-6"> <Column md="3" offset-md="3"> <Sheet class="pa-2" outlined="true">offset-md-3</Sheet> </Column> <Column md="3" offset-md="3"> <Sheet class="pa-2" outlined="true">offset-md-3</Sheet> </Column> </Row> <Row noGutters="true" class="mb-6"> <Column md="6" offset-md="3"> <Sheet class="pa-2" outlined="true">offset-md-3</Sheet> </Column> </Row> </Container>
And more
This section is under construction.