VCC UI is deprecated and has been replaced by Design System

View

A View is a generic layout component.

Under the hood, it's basically a <div> element with some sensible defaults:

box-sizing: border-box
display: flex;
flex-direction: column;
flex-wrap: nowrap;
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
align-items: stretch;

It supports responsive object or array values for all it's style props. Array values map according to the number of values passed:

Number of values	Responsive style
1	default
2	default, fromM
3	default, fromM, fromL
4	default, fromM, fromL, fromXL

All padding and margin values are based on multiples of the baselineGrid which is 8px.

Example

Props - View

Name	Description	Type	Default Value
`alignContent`	Sets align-content.	`ResponsiveProp<'${string}var(--${string})${string}' ｜ '${string}calc(${string})${string}' ｜ AlignContent ｜ undefined>`	n/a
`alignItems`	Sets align-items.	`ResponsiveProp<'${string}var(--${string})${string}' ｜ '${string}calc(${string})${string}' ｜ AlignItems ｜ undefined>`	n/a
`alignSelf`	Sets align-self.	`ResponsiveProp<'${string}var(--${string})${string}' ｜ '${string}calc(${string})${string}' ｜ AlignSelf ｜ undefined>`	n/a
`as`		`As<any>`	n/a
`backgroundColor`	A custom background color	`ResponsiveProp<(('${string}var(--${string})${string}' ｜ '${string}calc(${string})${string}' ｜ BackgroundColor) & ("background.primary" ｜ "background.secondary" ｜ Omit<string, "">)) ｜ undefined>`	n/a
`basis`	Sets flex-basis.	`ResponsiveProp<FlexBasis<string ｜ number> ｜ undefined>`	n/a
`bg`		`ResponsiveProp<Background<string ｜ number> ｜ undefined>`	n/a
`direction`	Sets the flex-direction.	`ResponsiveProp<'${string}var(--${string})${string}' ｜ '${string}calc(${string})${string}' ｜ FlexDirection ｜ undefined>`	n/a
`display`	Sets display.	`ResponsiveProp<'${string}var(--${string})${string}' ｜ '${string}calc(${string})${string}' ｜ Display ｜ undefined>`	n/a
`extend`	A CSS object or a function returning a CSS object, or an array of them	`ExtendPropValue<CurrentTheme, { backgroundColor?: ResponsiveProp<(('${string}var(--${string})${string}' ｜ '${string}calc(${string})${string}' ｜ BackgroundColor) & ("background.primary" ｜ "background.secondary" ｜ Omit<...>)) ｜ undefined>; ... 29 more ...; height?: ResponsiveProp<...>; }>`	n/a
`flex`	Sets flex.	`ResponsiveProp<Flex<string ｜ number> ｜ undefined>`	n/a
`grow`	Sets flex-grow.	`ResponsiveProp<'${string}var(--${string})${string}' ｜ '${string}calc(${string})${string}' ｜ FlexGrow ｜ undefined>`	n/a
`height`	Sets height.	`ResponsiveProp<Height<string ｜ number> ｜ undefined>`	n/a
`justifyContent`	Sets justify-content.	`ResponsiveProp<'${string}var(--${string})${string}' ｜ '${string}calc(${string})${string}' ｜ JustifyContent ｜ undefined>`	n/a
`margin`	Adds margin based on the baselineGrid. Overwritten by specific directional margins.	`ResponsiveProp<Margin<string ｜ number> ｜ undefined>`	n/a
`marginBottom`	Adds bottom margin based on the baselineGrid.	`ResponsiveProp<MarginBottom<string ｜ number> ｜ undefined>`	n/a
`marginLeft`	Adds left margin based on the baselineGrid.	`ResponsiveProp<MarginLeft<string ｜ number> ｜ undefined>`	n/a
`marginRight`	Adds right margin based on the baselineGrid.	`ResponsiveProp<MarginRight<string ｜ number> ｜ undefined>`	n/a
`marginTop`	Adds top margin based on the baselineGrid.	`ResponsiveProp<MarginTop<string ｜ number> ｜ undefined>`	n/a
`maxHeight`	Sets max-height.	`ResponsiveProp<MaxHeight<string ｜ number> ｜ undefined>`	n/a
`maxWidth`	Sets max-width.	`ResponsiveProp<MaxWidth<string ｜ number> ｜ undefined>`	n/a
`minHeight`	Sets min-height.	`ResponsiveProp<MinHeight<string ｜ number> ｜ undefined>`	n/a
`minWidth`	Sets min-width.	`ResponsiveProp<MinWidth<string ｜ number> ｜ undefined>`	n/a
`order`	Sets order.	`ResponsiveProp<'${string}var(--${string})${string}' ｜ '${string}calc(${string})${string}' ｜ Order ｜ undefined>`	n/a
`padding`	Adds padding based on the baselineGrid. Overwritten by specific directional paddings.	`ResponsiveProp<Padding<string ｜ number> ｜ undefined>`	n/a
`paddingBottom`	Adds bottom padding based on the baselineGrid.	`ResponsiveProp<PaddingBottom<string ｜ number> ｜ undefined>`	n/a
`paddingLeft`	Adds left padding based on the baselineGrid.	`ResponsiveProp<PaddingLeft<string ｜ number> ｜ undefined>`	n/a
`paddingRight`	Adds right padding based on the baselineGrid.	`ResponsiveProp<PaddingRight<string ｜ number> ｜ undefined>`	n/a
`paddingTop`	Adds top padding based on the baselineGrid.	`ResponsiveProp<PaddingTop<string ｜ number> ｜ undefined>`	n/a
`ref`		`any`	n/a
`shrink`	Sets flex-shrink.	`ResponsiveProp<'${string}var(--${string})${string}' ｜ '${string}calc(${string})${string}' ｜ FlexShrink ｜ undefined>`	n/a
`spacing`	Adds spacing between children based on the baselineGrid.	`ResponsiveProp<string ｜ number> ｜ undefined`	n/a
`width`	Sets width.	`ResponsiveProp<Width<string ｜ number> ｜ undefined>`	n/a
`wrap`	Sets flex-wrap.	`ResponsiveProp<'${string}var(--${string})${string}' ｜ '${string}calc(${string})${string}' ｜ FlexWrap ｜ undefined>`	n/a

View