@mantine/core/lib/components/DataList/DataList.d.ts

React components library focused on usability, accessibility and developer experience

import { BoxProps, ElementProps, Factory, MantineSize, MantineSpacing, StylesApiProps } from '../../core';
import { DataListItem, DataListItemStylesNames } from './DataListItem/DataListItem';
import { DataListItemLabel, DataListItemLabelStylesNames } from './DataListItemLabel/DataListItemLabel';
import { DataListItemValue, DataListItemValueStylesNames } from './DataListItemValue/DataListItemValue';
export type DataListStylesNames = 'root' | DataListItemStylesNames | DataListItemLabelStylesNames | DataListItemValueStylesNames;
export type DataListCssVariables = {
    root: '--data-list-fz' | '--data-list-lh' | '--data-list-gap' | '--data-list-label-width';
};
export interface DataListProps extends BoxProps, StylesApiProps<DataListFactory>, ElementProps<'dl'> {
    /** DataList.Item components */
    children?: React.ReactNode;
    /** Controls `font-size` and `line-height` @default 'sm' */
    size?: MantineSize;
    /** Key of `theme.spacing` or any valid CSS value to set gap between items @default 'sm' */
    gap?: MantineSpacing;
    /** Controls arrangement of label and value within each item. `horizontal` renders label and value side by side, `vertical` stacks label on top of value @default 'horizontal' */
    orientation?: 'horizontal' | 'vertical';
    /** Adds border between items @default false */
    withDivider?: boolean;
    /** Controls min-width of the label (dt) element, any valid CSS value @default '120px' */
    labelWidth?: React.CSSProperties['minWidth'];
}
export type DataListFactory = Factory<{
    props: DataListProps;
    ref: HTMLDListElement;
    stylesNames: DataListStylesNames;
    vars: DataListCssVariables;
    staticComponents: {
        Item: typeof DataListItem;
        ItemLabel: typeof DataListItemLabel;
        ItemValue: typeof DataListItemValue;
    };
}>;
export declare const DataList: import("../..").MantineComponent<{
    props: DataListProps;
    ref: HTMLDListElement;
    stylesNames: DataListStylesNames;
    vars: DataListCssVariables;
    staticComponents: {
        Item: typeof DataListItem;
        ItemLabel: typeof DataListItemLabel;
        ItemValue: typeof DataListItemValue;
    };
}>;