@amsterdam/design-system-react
Version:
All React components from the Amsterdam Design System. Use it to compose pages in your website or application.
71 lines (70 loc) • 1.96 kB
TypeScript
/**
* @license EUPL-1.2+
* Copyright Gemeente Amsterdam
*/
import type { HTMLAttributes, PropsWithChildren } from 'react';
import type { CrossAlign, MainAlign } from '../common/types';
export declare const rowTags: readonly ["article", "div", "section"];
type RowTag = (typeof rowTags)[number];
export declare const rowGapSizes: readonly ["none", "x-small", "small", "large", "x-large"];
type RowGap = (typeof rowGapSizes)[number];
export type RowProps = {
/**
* The horizontal alignment of the items in the row.
* @default start
*/
align?: MainAlign;
/**
* The vertical alignment of the items in the row.
* @default stretch
*/
alignVertical?: CrossAlign;
/**
* The HTML element to use.
* @default div
*/
as?: RowTag;
/**
* The amount of space between items.
* @default medium
*/
gap?: RowGap;
/**
* Whether items of the row can wrap onto multiple lines.
* @default false
*/
wrap?: boolean;
} & PropsWithChildren<HTMLAttributes<HTMLElement>>;
/**
* @see {@link https://designsystem.amsterdam/?path=/docs/components-layout-row--docs Row docs at Amsterdam Design System}
*/
export declare const Row: import("react").ForwardRefExoticComponent<{
/**
* The horizontal alignment of the items in the row.
* @default start
*/
align?: MainAlign;
/**
* The vertical alignment of the items in the row.
* @default stretch
*/
alignVertical?: CrossAlign;
/**
* The HTML element to use.
* @default div
*/
as?: RowTag;
/**
* The amount of space between items.
* @default medium
*/
gap?: RowGap;
/**
* Whether items of the row can wrap onto multiple lines.
* @default false
*/
wrap?: boolean;
} & HTMLAttributes<HTMLElement> & {
children?: import("react").ReactNode | undefined;
} & import("react").RefAttributes<unknown>>;
export {};