import { ... } from '@ag.ds-next/react/columns';Usage
Columns components can be imported via the columns entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/columns';Props
| Prop | Type | Description |
|---|---|---|
| alignItems? | ResponsiveProp<"center" | "flex-start" | "flex-end" | "stretch" | "start" | "end" | "baseline"> | Position children within their cell in the Grid. |
| as? | ElementType<any> | |
| children? | ReactNode | |
| cols? | ResponsiveProp<ColumnRange> | The amount of columns that should be created. |
| columnGap? | ResponsiveProp<Spacing> | The amount of space between each column. |
| gap? | ResponsiveProp<Spacing> | The amount of space between each column or row. |
| ref? | Ref<Comp extends "symbol" | "pattern" | "text" | "image" | "switch" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | ... 47 more ... | keyof HTMLElementTagNameMap ? ElementTagNameMap[Comp] : Comp extends new (...args: any) => any ? InstanceType<...> : undefined> | |
| rowGap? | ResponsiveProp<Spacing> | The amount of space between each row. |
| Prop | Type | Description |
|---|---|---|
| alignSelf? | ResponsiveProp<"center" | "flex-start" | "flex-end" | "stretch" | "start" | "end" | "baseline"> | Sets the CSS align-self property.https://developer.mozilla.org/en-US/docs/Web/CSS/align-self |
| as? | ElementType<any> | |
| columnEnd? | ResponsiveProp<ColumnRange | "first" | "last"> | |
| columnSpan? | ResponsiveProp<ColumnRange> | |
| columnStart? | ResponsiveProp<ColumnRange | "first" | "last"> | |
| justifySelf? | ResponsiveProp<"center" | "stretch" | "start" | "end" | "baseline"> | Sets the CSS justify-self property.https://developer.mozilla.org/en-US/docs/Web/CSS/justify-self |
| ref? | Ref<Comp extends "symbol" | "pattern" | "text" | "image" | "switch" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | ... 47 more ... | keyof HTMLElementTagNameMap ? ElementTagNameMap[Comp] : Comp extends new (...args: any) => any ? InstanceType<...> : undefined> |
Source
You can view the full source code for this package on Github.