47 lines
1.4 KiB
Plaintext
47 lines
1.4 KiB
Plaintext
component Container {
|
|
props {
|
|
size = "default"
|
|
color = "primary"
|
|
columns = 2
|
|
gap = "md"
|
|
maxWidth = "xl"
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<div
|
|
data-ui-component="Container"
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
data-columns='{columns}'
|
|
data-gap='{gap}'
|
|
data-max-width='{maxWidth}'
|
|
class='mx-auto w-full {class}'
|
|
class:max-w-3xl='maxWidth === "md"'
|
|
class:max-w-5xl='maxWidth === "lg"'
|
|
class:max-w-7xl='maxWidth === "xl" || maxWidth === "wide"'
|
|
class:max-w-screen-2xl='maxWidth === "2xl"'
|
|
class:max-w-none='maxWidth === "full"'
|
|
class:px-4='size === "compact" || size === "default"'
|
|
class:px-5='size === "comfortable"'
|
|
class:px-6='size === "spacious"'
|
|
class:sm:px-6='size !== "compact"'
|
|
class:lg:px-8='size === "default" || size === "comfortable" || size === "spacious"'
|
|
class:grid='columns > 1'
|
|
class:grid-cols-1='columns > 1'
|
|
class:sm:grid-cols-2='columns === 2 || columns === 3 || columns === 4 || columns === 5 || columns === 6'
|
|
class:lg:grid-cols-3='columns === 3'
|
|
class:lg:grid-cols-4='columns === 4'
|
|
class:lg:grid-cols-5='columns === 5'
|
|
class:lg:grid-cols-6='columns === 6'
|
|
class:gap-2='gap === "xs"'
|
|
class:gap-3='gap === "sm"'
|
|
class:gap-5='gap === "md"'
|
|
class:gap-8='gap === "lg"'
|
|
class:gap-10='gap === "xl"'
|
|
>
|
|
<slot></slot>
|
|
</div>
|
|
}
|
|
}
|