Container
A max-width wrapper component with responsive padding for consistent layout.
Basic Usage
Content inside container
dart
1
2
3
4
5
6
7
DContainer(
children: [
div(classes: 'bg-zinc-800 p-4 rounded', [
Component.text('Content inside container'),
]),
],
)Sizes
XS Container
SM Container
MD Container
LG Container
XL Container (default)
dart
1
2
3
4
5
6
7
DContainer(size: DContainerSize.xs, children: [...])
DContainer(size: DContainerSize.sm, children: [...])
DContainer(size: DContainerSize.md, children: [...])
DContainer(size: DContainerSize.lg, children: [...])
DContainer(size: DContainerSize.xl, children: [...])
DContainer(size: DContainerSize.xxl, children: [...])
DContainer(size: DContainerSize.full, children: [...])Without Padding
Container without padding
dart
1
2
3
4
5
6
DContainer(
padded: false,
children: [
Component.text('Container without padding'),
],
)Custom Classes
Container with custom classes
dart
1
2
3
4
5
6
DContainer(
className: 'bg-zinc-800/30 py-6 rounded-xl',
children: [
Component.text('Container with custom classes'),
],
)API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| children | List<Component> | [] | Content to render inside the container |
| size | DContainerSize | xl | Maximum width (xs, sm, md, lg, xl, xxl, full) |
| padded | bool | true | Whether to apply responsive horizontal padding |
| className | String? | null | Additional CSS classes |