110 lines
2.4 KiB
Plaintext
110 lines
2.4 KiB
Plaintext
// Columns -- a simple multi-column split for page content.
|
|
//
|
|
// <Columns columns={2} gap="lg">...</Columns>
|
|
//
|
|
// Columns and Grid overlap deliberately: Columns is the coarse two or three
|
|
// way split of a page, and its gaps are wider for that reason. Grid is the one
|
|
// to reach for when the items are cards and the count matters.
|
|
//
|
|
// NOTE: the style block uses /* */ comments only -- // is not a CSS comment
|
|
// and silently swallows the rule that follows it.
|
|
component Columns {
|
|
props {
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
columns: number = 2
|
|
gap: string = "md"
|
|
maxWidth: string = "xl"
|
|
class: string = ""
|
|
}
|
|
|
|
functions {
|
|
shared function columnCount() {
|
|
var value = Number(columns)
|
|
if (!value || value < 1) {
|
|
return 1
|
|
}
|
|
return Math.min(4, value)
|
|
}
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
data-ui-component="Columns"
|
|
class='wrn-columns {class}'
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-gap='{gap}'
|
|
data-max-width='{maxWidth}'
|
|
data-columns='{columnCount()}'
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wrn-columns {
|
|
--columns-gap: 1.5rem;
|
|
display: grid;
|
|
width: 100%;
|
|
min-width: 0;
|
|
gap: var(--columns-gap);
|
|
grid-template-columns: 1fr;
|
|
align-items: start;
|
|
}
|
|
|
|
.wrn-columns[data-max-width="md"] {
|
|
max-width: 48rem;
|
|
}
|
|
|
|
.wrn-columns[data-max-width="lg"] {
|
|
max-width: 64rem;
|
|
}
|
|
|
|
.wrn-columns[data-max-width="xl"] {
|
|
max-width: 80rem;
|
|
}
|
|
|
|
.wrn-columns[data-max-width="2xl"] {
|
|
max-width: 96rem;
|
|
}
|
|
|
|
.wrn-columns[data-max-width="full"] {
|
|
max-width: none;
|
|
}
|
|
|
|
.wrn-columns[data-gap="sm"] {
|
|
--columns-gap: 0.75rem;
|
|
}
|
|
|
|
.wrn-columns[data-gap="lg"] {
|
|
--columns-gap: 2.5rem;
|
|
}
|
|
|
|
.wrn-columns[data-gap="xl"] {
|
|
--columns-gap: 3.5rem;
|
|
}
|
|
|
|
/*
|
|
* Splits at the tablet breakpoint rather than the phone one: a page split
|
|
* is worth keeping single-column for longer than a card deck is.
|
|
*/
|
|
@media (min-width: 768px) {
|
|
.wrn-columns:not([data-columns="1"]) {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.wrn-columns[data-columns="3"] {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.wrn-columns[data-columns="4"] {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
}
|
|
}
|
|
}
|