vcc-ui/dist/components/view/view.d.ts

A React library for building user interfaces at Volvo Cars

import { CSSProperties, ComponentWithAs, OmittedIntrinsicElements, PropsWithAs, PropsWithExtend, ResponsiveProp } from '../../types/shared';
export type ViewUniqueProps = PropsWithExtend<{
    /** A custom background color */
    backgroundColor?: ResponsiveProp<CSSProperties['backgroundColor']>;
    bg?: ResponsiveProp<CSSProperties['background']>;
    /** Adds spacing between children based on the baselineGrid. */
    spacing?: ResponsiveProp<number | string>;
    /** Adds left padding based on the baselineGrid. */
    paddingLeft?: ResponsiveProp<CSSProperties['paddingLeft']>;
    /** Adds right padding based on the baselineGrid. */
    paddingRight?: ResponsiveProp<CSSProperties['paddingRight']>;
    /** Adds bottom padding based on the baselineGrid. */
    paddingBottom?: ResponsiveProp<CSSProperties['paddingBottom']>;
    /** Adds top padding based on the baselineGrid. */
    paddingTop?: ResponsiveProp<CSSProperties['paddingTop']>;
    /** Adds padding based on the baselineGrid. Overwritten by specific directional paddings. */
    padding?: ResponsiveProp<CSSProperties['padding']>;
    /** Adds left margin based on the baselineGrid. */
    marginLeft?: ResponsiveProp<CSSProperties['marginLeft']>;
    /** Adds right margin based on the baselineGrid. */
    marginRight?: ResponsiveProp<CSSProperties['marginRight']>;
    /** Adds bottom margin based on the baselineGrid. */
    marginBottom?: ResponsiveProp<CSSProperties['marginBottom']>;
    /** Adds top margin based on the baselineGrid. */
    marginTop?: ResponsiveProp<CSSProperties['marginTop']>;
    /** Adds margin based on the baselineGrid. Overwritten by specific directional margins. */
    margin?: ResponsiveProp<CSSProperties['margin']>;
    /** Sets display. */
    display?: ResponsiveProp<CSSProperties['display']>;
    /** Sets flex-wrap. */
    wrap?: ResponsiveProp<CSSProperties['flexWrap']>;
    /** Sets the flex-direction. */
    direction?: ResponsiveProp<CSSProperties['flexDirection']>;
    /** Sets flex-grow. */
    grow?: ResponsiveProp<CSSProperties['flexGrow']>;
    /** Sets flex-shrink. */
    shrink?: ResponsiveProp<CSSProperties['flexShrink']>;
    /** Sets flex-basis. */
    basis?: ResponsiveProp<CSSProperties['flexBasis']>;
    /** Sets order. */
    order?: ResponsiveProp<CSSProperties['order']>;
    /** Sets flex. */
    flex?: ResponsiveProp<CSSProperties['flex']>;
    /** Sets justify-content. */
    justifyContent?: ResponsiveProp<CSSProperties['justifyContent']>;
    /** Sets align-content. */
    alignContent?: ResponsiveProp<CSSProperties['alignContent']>;
    /** Sets align-items. */
    alignItems?: ResponsiveProp<CSSProperties['alignItems']>;
    /** Sets align-self. */
    alignSelf?: ResponsiveProp<CSSProperties['alignSelf']>;
    /** Sets max-width. */
    maxWidth?: ResponsiveProp<CSSProperties['maxWidth']>;
    /** Sets min-width. */
    minWidth?: ResponsiveProp<CSSProperties['minWidth']>;
    /** Sets width. */
    width?: ResponsiveProp<CSSProperties['width']>;
    /** Sets max-height. */
    maxHeight?: ResponsiveProp<CSSProperties['maxHeight']>;
    /** Sets min-height. */
    minHeight?: ResponsiveProp<CSSProperties['minHeight']>;
    /** Sets height. */
    height?: ResponsiveProp<CSSProperties['height']>;
}>;
export type ViewProps<T extends keyof OmittedIntrinsicElements = 'div'> = PropsWithAs<ViewUniqueProps, T>;
/**
 * @deprecated Use a `<div className="flex-(col|row)">` element instead
 */
export declare const View: ComponentWithAs<ViewUniqueProps, "div">;