| Name | Type | Description | Default |
|---|---|---|---|
| background | {
attachment?: string;
clip?: string;
color?: string;
image?: string;
origin?: string;
position?: string;
repeat?: string;
size?: string;
} | Based on the CSS property background allows configuring all properties related to the background of a container. See MDN for further information. | - |
| border | BorderProperties | {
top?: BorderProperties;
right?: BorderProperties;
bottom?: BorderProperties;
left?: BorderProperties;
}being {
width?: string;
style?: LineStyleValues;
color?: string;
}and 'none' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | Based on the CSS property border allows configuring all properties related to the border of a container. | - |
| borderRadius | string | Sets the border-radius CSS property. See MDN for further information. | - |
| boxShadow | string | Sets the box-shadow CSS property. See MDN for further information. | 'none' |
| boxSizing | 'content-box' | 'border-box' | Sets the box-sizing CSS property. See MDN for further information. | 'content-box' |
| children | React.ReactNode | Custom content inside the container. | - |
| display | 'block' | 'inline-block' | 'inline' | 'none' | Sets the display CSS property. See MDN for further information. The set of values is limited to the ones related to the outer display type. If you want to apply any pattern from the inner box and how the children are laid out, we recommend you to use the Flex and Grid components. | 'block' |
| float | 'left' | 'right' | 'none' | Sets the float CSS property. See MDN for further information. | 'none' |
| height | string | Sets the height CSS property. See MDN for further information. | 'auto' |
| inset | {
top?: string;
right?: string;
bottom?: string;
left?: string;
} | Based on the CSS property inset this prop is a shorthand that corresponds to the top, right, bottom, and/or left properties. | 'auto' |
| margin | string | Spacebeing {
top?: string;
right?: string;
bottom?: string;
left?: string;
} | Size of the margin to be applied to the container. | - |
| maxHeight | string | Sets the max-height CSS property. See MDN for further information. | 'none' |
| maxWidth | string | Sets the max-width CSS property. See MDN for further information. | 'none' |
| minHeight | string | Sets the min-height CSS property. See MDN for further information. | 'auto' |
| minWidth | string | Sets the min-width CSS property. See MDN for further information. | 'auto' |
| outline | {
width?: string;
style?: LineStyleValues;
color?: string;
offset?: string;
} | Based on the CSS property outline allows configuring all properties related to the outline of a container. | - |
| overflow | OverflowValues |
{
x?: OverflowValues;
y?: OverflowValues;
}being 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | Sets the overflow CSS property. See MDN for further information. | 'visible' |
| padding | string | Spacebeing {
top?: string;
right?: string;
bottom?: string;
left?: string;
} | Size of the padding to be applied to the container. | - |
| position | 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | Sets the position CSS property. See MDN for further information. | 'static' |
| ref | React.Ref<HTMLDivElement> | Reference to the component. | - |
| width | string | Sets the width CSS property. See MDN for further information. | 'auto' |
| zIndex | 'auto' | number | Sets the z-index CSS property. See MDN for further information. | 'auto' |
() => { return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcContainer border={{ color: "var(--border-color-primary-light)", width: "var(--border-width-m)", style: "var(--border-style-outline)" }} borderRadius="var(--border-radius-s)" padding="var(--spacing-padding-xs)" width="fit-content" > <DxcParagraph>Example text</DxcParagraph> </DxcContainer> </DxcInset> ); }
This code provides an illustration of a custom component created exclusively with the DxcContainer. You should not copy this code, use our DxcSelect instead.
It is imperative to exclusively utilize Halstack components for optimal compatibility and adherence to our development standards. In case you do not find one that fits your needs, please reach out to our development team first to discuss your particular scenario.
() => { const suggestions = ["Option 1", "Option 2", "Option 3", "Option 4"]; return ( <DxcInset space="var(--spacing-padding-xl)"> <DxcContainer background={{ color: "var(--border-color-neutral-brighter)" }} border={{ color: "var(--border-color-neutral-medium)", style: "var(--border-style-default)", width: "var(--border-width-s)" }} borderRadius="var(--border-radius-s)" boxShadow="var(--shadow-200)" boxSizing="border-box" maxHeight="304px" overflow={{ x: "hidden", y: "auto" }} padding={{ bottom: "var(--spacing-padding-xxs)", top: "var(--spacing-padding-xxs)" }} width="250px" > {suggestions.map((suggestion, index) => ( <DxcContainer padding={{ left: "var(--spacing-padding-xs)", right: "var(--spacing-padding-xs)" }}> <DxcContainer border={ index !== suggestions.length - 1 ? { bottom: { color: "var(--border-color-neutral-lighter)", style: "var(--border-style-default)", width: "var(--border-width-s)" } } : undefined } overflow="hidden" padding="var(--spacing-padding-xxs)" > <DxcTypography lineHeight="1.715em" textOverflow="ellipsis" whiteSpace="nowrap"> {suggestion} </DxcTypography> </DxcContainer> </DxcContainer> ))} </DxcContainer> </DxcInset> ); }