@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
50 lines (49 loc) • 1.69 kB
TypeScript
/**
* Web Space Component
*
*/
import type { HTMLProps, Ref } from 'react';
import type { DynamicElement, SpacingProps } from '../../shared/types';
import type { SkeletonShow } from '../Skeleton';
import type { InnerSpaceType } from './types';
import SpaceResponsive from './SpaceResponsive';
export type { SpaceResponsiveProps } from './SpaceResponsive';
export type { SpaceDensity, SpaceBreakpoint, } from './SpaceResponsiveContext';
export type SpaceProps = {
/**
* Defines the HTML element used.
* Default: `div`
*/
element?: DynamicElement;
/**
* If set to `true`, then `display: inline-block;` is used, so the HTML elements get aligned horizontally. Defaults to `false`.
*/
inline?: boolean;
/**
* If set to `true`, then a wrapper with `display: flow-root;` is used. This way you avoid **Margin Collapsing**. Defaults to `false`. _Note:_ You can't use `inline={true}` in combination.
*/
noCollapse?: boolean;
/**
* If set to `true`, then the space element will be 100% in width.
* Default: `false`
*/
stretch?: boolean;
/**
* If set to `true`, a loading skeleton will be shown.
* Default: `false`
*/
skeleton?: SkeletonShow;
/**
* Send along a custom React Ref.
* Default: `null`
*/
ref?: Ref<HTMLElement>;
} & Omit<SpacingProps, 'innerSpace'> & {
innerSpace?: InnerSpaceType;
};
export type SpaceAllProps = SpaceProps & Omit<HTMLProps<HTMLElement>, 'ref'>;
declare function Space(props: SpaceAllProps): import("react/jsx-runtime").JSX.Element;
declare namespace Space {
var ResponsiveContext: typeof SpaceResponsive;
}
export default Space;