@carbon/react
Version:
React components for the Carbon Design System
74 lines (73 loc) • 2.61 kB
TypeScript
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import { PolymorphicComponentPropWithRef } from '../../internal/PolymorphicProps';
type ColumnSpanPercent = '25%' | '50%' | '75%' | '100%';
type ColumnSpanSimple = boolean | number | ColumnSpanPercent;
export interface ColumnSpanObject {
span?: ColumnSpanSimple;
offset?: number;
start?: number;
end?: number;
}
export type ColumnSpan = ColumnSpanSimple | ColumnSpanObject;
export interface ColumnBaseProps {
/**
* Pass in content that will be rendered within the `Column`
*/
children?: React.ReactNode;
/**
* Specify a custom className to be applied to the `Column`
*/
className?: string;
/**
* Specify column span for the `lg` breakpoint (Default breakpoint up to 1312px)
* This breakpoint supports 16 columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
lg?: ColumnSpan;
/**
* Specify column span for the `max` breakpoint. This breakpoint supports 16
* columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
max?: ColumnSpan;
/**
* Specify column span for the `md` breakpoint (Default breakpoint up to 1056px)
* This breakpoint supports 8 columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
md?: ColumnSpan;
/**
* Specify column span for the `sm` breakpoint (Default breakpoint up to 672px)
* This breakpoint supports 4 columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
sm?: ColumnSpan;
/**
* Specify column span for the `xlg` breakpoint (Default breakpoint up to
* 1584px) This breakpoint supports 16 columns by default.
*
* @see https://carbondesignsystem.com/elements/2x-grid/overview/#breakpoints
*/
xlg?: ColumnSpan;
/**
* Specify constant column span, start, or end values that will not change
* based on breakpoint
*/
span?: ColumnSpan;
}
export type ColumnProps<T extends React.ElementType> = PolymorphicComponentPropWithRef<T, ColumnBaseProps>;
export interface ColumnComponent {
<T extends React.ElementType>(props: ColumnProps<T>, context?: any): React.ReactElement<any, any> | null;
}
declare const _default: ColumnComponent;
export default _default;