DotNaos UI

Container

Container from the Base package.

Source code

Waiting for the preview before loading source files · 2 of 2

Properties

Public properties derived from the component’s TypeScript signature.

PropertyTypeDefault
acceptsOptional
readonly string[]
activeOptional
boolean
allowedChildrenOptional
readonly string[]
asOptional
ContainerElement
childrenOptional
ReactNode
customizeOptional
UiCustomization
disabledOptional
boolean
fullWidthOptional
boolean
gapOptional
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7
hasInvalidChildrenOptional
boolean
kindOptional
string
layoutOptional
"center"
marginOptional
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7
metricsOptional
UiMetrics
paddingOptional
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7
partOptional
"invalid-slot" | "unstyled"
radiusSizeOptional
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7
slotOptional
string
scrollOptional
"both" | "horizontal" | "vertical"
surfaceOptional
"content" | "transparent" | "panel" | "raised" | "sunken" | "overlay" | "control"
toneOptional
"muted" | "danger" | "warning" | "success"
typeOptional
string
onSubmitOptional
FormEventHandler<HTMLElement>
placeholderOptional
string
titleOptional
string
controlsOptional
boolean
valueOptional
string | number | readonly string[]
onChangeOptional
FormEventHandler<HTMLElement>
classNameOptional
string
colorOptional
string
mutedOptional
boolean
sizeOptional
number
acceptOptional
string
acceptCharsetOptional
string
actionOptional
string | ((formData: FormData) => void | Promise<void>)
allowFullScreenOptional
boolean
allowTransparencyOptional
boolean
altOptional
string
asyncOptional
boolean
autoCompleteOptional
string
autoPlayOptional
boolean
captureOptional
false | true | "user" | "environment"
cellPaddingOptional
string | number
cellSpacingOptional
string | number
charSetOptional
string
challengeOptional
string
checkedOptional
boolean
citeOptional
string
classIDOptional
string
colsOptional
number
colSpanOptional
number
coordsOptional
string
crossOriginOptional
"" | "anonymous" | "use-credentials"
dataOptional
string
dateTimeOptional
string
defaultOptional
boolean
deferOptional
boolean
downloadOptional
any
encTypeOptional
string
formOptional
string
formActionOptional
string | ((formData: FormData) => void | Promise<void>)
formEncTypeOptional
string
formMethodOptional
string
formNoValidateOptional
boolean
formTargetOptional
string
frameBorderOptional
string | number
headersOptional
string
heightOptional
string | number
highOptional
number
hrefOptional
string
hrefLangOptional
string
htmlForOptional
string
httpEquivOptional
string
integrityOptional
string
keyParamsOptional
string
keyTypeOptional
string
labelOptional
string
listOptional
string
loopOptional
boolean
lowOptional
number
manifestOptional
string
marginHeightOptional
number
marginWidthOptional
number
maxOptional
string | number
maxLengthOptional
number
mediaOptional
string
mediaGroupOptional
string
methodOptional
string
minOptional
string | number
minLengthOptional
number
multipleOptional
boolean
nameOptional
string
noValidateOptional
boolean
openOptional
boolean
optimumOptional
number
patternOptional
string
playsInlineOptional
boolean
posterOptional
string
preloadOptional
string
readOnlyOptional
boolean
requiredOptional
boolean
reversedOptional
boolean
rowsOptional
number
rowSpanOptional
number
sandboxOptional
string
scopeOptional
string
scopedOptional
boolean
scrollingOptional
string
seamlessOptional
boolean
selectedOptional
boolean
shapeOptional
string
sizesOptional
string
spanOptional
number
srcOptional
string
srcDocOptional
string
srcLangOptional
string
srcSetOptional
string
startOptional
number
stepOptional
string | number
summaryOptional
string
targetOptional
string
useMapOptional
string
widthOptional
string | number
wmodeOptional
string
wrapOptional
string
defaultCheckedOptional
boolean
defaultValueOptional
string | number | readonly string[]
suppressContentEditableWarningOptional
boolean
suppressHydrationWarningOptional
boolean
accessKeyOptional
string
autoCapitalizeOptional
"none" | (string & {}) | "off" | "on" | "sentences" | "words" | "characters"
autoFocusOptional
boolean
contentEditableOptional
false | true | "inherit" | "true" | "false" | "plaintext-only"
contextMenuOptional
string
dirOptional
string
draggableOptional
false | true | "true" | "false"
enterKeyHintOptional
"search" | "send" | "enter" | "done" | "go" | "next" | "previous"
hiddenOptional
boolean
idOptional
string
langOptional
string
nonceOptional
string
spellCheckOptional
false | true | "true" | "false"
styleOptional
CSSProperties
tabIndexOptional
number
translateOptional
"yes" | "no"
radioGroupOptional
string
roleOptional
AriaRole
aboutOptional
string
contentOptional
string
datatypeOptional
string
inlistOptional
any
prefixOptional
string
propertyOptional
string
relOptional
string
resourceOptional
string
revOptional
string
typeofOptional
string
vocabOptional
string
autoCorrectOptional
string
autoSaveOptional
string
itemPropOptional
string
itemScopeOptional
boolean
itemTypeOptional
string
itemIDOptional
string
itemRefOptional
string
resultsOptional
number
securityOptional
string
unselectableOptional
"off" | "on"
popoverOptional
"" | "auto" | "manual" | "hint"
popoverTargetActionOptional
"toggle" | "show" | "hide"
popoverTargetOptional
string
inertOptional
boolean
inputModeOptionalHints at the type of data that might be entered by the user while editing the element or its contents
"text" | "search" | "none" | "email" | "numeric" | "tel" | "url" | "decimal"
isOptionalSpecify that a standard HTML element should behave like a defined custom built-in element
string
exportpartsOptional
string
aria-activedescendantOptionalIdentifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
string
aria-atomicOptionalIndicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.
false | true | "true" | "false"
aria-autocompleteOptionalIndicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.
"list" | "both" | "none" | "inline"
aria-braillelabelOptionalDefines a string value that labels the current element, which is intended to be converted into Braille.
string
aria-brailleroledescriptionOptionalDefines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
string
aria-busyOptional
false | true | "true" | "false"
aria-checkedOptionalIndicates the current "checked" state of checkboxes, radio buttons, and other widgets.
false | true | "true" | "false" | "mixed"
aria-colcountOptionalDefines the total number of columns in a table, grid, or treegrid.
number
aria-colindexOptionalDefines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid.
number
aria-colindextextOptionalDefines a human readable text alternative of aria-colindex.
string
aria-colspanOptionalDefines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
number
aria-controlsOptionalIdentifies the element (or elements) whose contents or presence are controlled by the current element.
string
aria-currentOptionalIndicates the element that represents the current item within a container or set of related elements.
false | true | "true" | "false" | "step" | "time" | "page" | "location" | "date"
aria-describedbyOptionalIdentifies the element (or elements) that describes the object.
string
aria-descriptionOptionalDefines a string value that describes or annotates the current element.
string
aria-detailsOptionalIdentifies the element that provides a detailed, extended description for the object.
string
aria-disabledOptionalIndicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
false | true | "true" | "false"
aria-dropeffectOptionalIndicates what functions can be performed when a dragged object is released on the drop target.
"link" | "copy" | "none" | "execute" | "move" | "popup"
aria-errormessageOptionalIdentifies the element that provides an error message for the object.
string
aria-expandedOptionalIndicates whether the element, or another grouping element it controls, is currently expanded or collapsed.
false | true | "true" | "false"
aria-flowtoOptionalIdentifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order.
string
aria-grabbedOptionalIndicates an element's "grabbed" state in a drag-and-drop operation.
false | true | "true" | "false"
aria-haspopupOptionalIndicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.
false | true | "true" | "false" | "dialog" | "menu" | "grid" | "listbox" | "tree"
aria-hiddenOptionalIndicates whether the element is exposed to an accessibility API.
false | true | "true" | "false"
aria-invalidOptionalIndicates the entered value does not conform to the format expected by the application.
false | true | "true" | "false" | "grammar" | "spelling"
aria-keyshortcutsOptionalIndicates keyboard shortcuts that an author has implemented to activate or give focus to an element.
string
aria-labelOptionalDefines a string value that labels the current element.
string
aria-labelledbyOptionalIdentifies the element (or elements) that labels the current element.
string
aria-levelOptionalDefines the hierarchical level of an element within a structure.
number
aria-liveOptionalIndicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region.
"off" | "assertive" | "polite"
aria-modalOptionalIndicates whether an element is modal when displayed.
false | true | "true" | "false"
aria-multilineOptionalIndicates whether a text box accepts multiple lines of input or only a single line.
false | true | "true" | "false"
aria-multiselectableOptionalIndicates that the user may select more than one item from the current selectable descendants.
false | true | "true" | "false"
aria-orientationOptionalIndicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous.
"horizontal" | "vertical"
aria-ownsOptionalIdentifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship.
string
aria-placeholderOptionalDefines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format.
string
aria-posinsetOptionalDefines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
number
aria-pressedOptionalIndicates the current "pressed" state of toggle buttons.
false | true | "true" | "false" | "mixed"
aria-readonlyOptionalIndicates that the element is not editable, but is otherwise operable.
false | true | "true" | "false"
aria-relevantOptionalIndicates what notifications the user agent will trigger when the accessibility tree within a live region is modified.
"text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals"
aria-requiredOptionalIndicates that user input is required on the element before a form may be submitted.
false | true | "true" | "false"
aria-roledescriptionOptionalDefines a human-readable, author-localized description for the role of an element.
string
aria-rowcountOptionalDefines the total number of rows in a table, grid, or treegrid.
number
aria-rowindexOptionalDefines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid.
number
aria-rowindextextOptionalDefines a human readable text alternative of aria-rowindex.
string
aria-rowspanOptionalDefines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid.
number
aria-selectedOptionalIndicates the current "selected" state of various widgets.
false | true | "true" | "false"
aria-setsizeOptionalDefines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
number
aria-sortOptionalIndicates if items in a table or grid are sorted in ascending or descending order.
"none" | "ascending" | "descending" | "other"
aria-valuemaxOptionalDefines the maximum allowed value for a range widget.
number
aria-valueminOptionalDefines the minimum allowed value for a range widget.
number
aria-valuenowOptionalDefines the current value for a range widget.
number
aria-valuetextOptionalDefines the human readable text alternative of aria-valuenow for a range widget.
string
dangerouslySetInnerHTMLOptional
{ __html: string | TrustedHTML; }
onCopyOptional
ClipboardEventHandler<HTMLElement>
onCopyCaptureOptional
ClipboardEventHandler<HTMLElement>
onCutOptional
ClipboardEventHandler<HTMLElement>
onCutCaptureOptional
ClipboardEventHandler<HTMLElement>
onPasteOptional
ClipboardEventHandler<HTMLElement>
onPasteCaptureOptional
ClipboardEventHandler<HTMLElement>
onCompositionEndOptional
CompositionEventHandler<HTMLElement>
onCompositionEndCaptureOptional
CompositionEventHandler<HTMLElement>
onCompositionStartOptional
CompositionEventHandler<HTMLElement>
onCompositionStartCaptureOptional
CompositionEventHandler<HTMLElement>
onCompositionUpdateOptional
CompositionEventHandler<HTMLElement>
onCompositionUpdateCaptureOptional
CompositionEventHandler<HTMLElement>
onFocusOptional
FocusEventHandler<HTMLElement>
onFocusCaptureOptional
FocusEventHandler<HTMLElement>
onBlurOptional
FocusEventHandler<HTMLElement>
onBlurCaptureOptional
FocusEventHandler<HTMLElement>
onChangeCaptureOptional
FormEventHandler<HTMLElement>
onBeforeInputOptional
InputEventHandler<HTMLElement>
onBeforeInputCaptureOptional
FormEventHandler<HTMLElement>
onInputOptional
FormEventHandler<HTMLElement>
onInputCaptureOptional
FormEventHandler<HTMLElement>
onResetOptional
FormEventHandler<HTMLElement>
onResetCaptureOptional
FormEventHandler<HTMLElement>
onSubmitCaptureOptional
FormEventHandler<HTMLElement>
onInvalidOptional
FormEventHandler<HTMLElement>
onInvalidCaptureOptional
FormEventHandler<HTMLElement>
onLoadOptional
ReactEventHandler<HTMLElement>
onLoadCaptureOptional
ReactEventHandler<HTMLElement>
onErrorOptional
ReactEventHandler<HTMLElement>
onErrorCaptureOptional
ReactEventHandler<HTMLElement>
onKeyDownOptional
KeyboardEventHandler<HTMLElement>
onKeyDownCaptureOptional
KeyboardEventHandler<HTMLElement>
onKeyPressOptional
KeyboardEventHandler<HTMLElement>
onKeyPressCaptureOptional
KeyboardEventHandler<HTMLElement>
onKeyUpOptional
KeyboardEventHandler<HTMLElement>
onKeyUpCaptureOptional
KeyboardEventHandler<HTMLElement>
onAbortOptional
ReactEventHandler<HTMLElement>
onAbortCaptureOptional
ReactEventHandler<HTMLElement>
onCanPlayOptional
ReactEventHandler<HTMLElement>
onCanPlayCaptureOptional
ReactEventHandler<HTMLElement>
onCanPlayThroughOptional
ReactEventHandler<HTMLElement>
onCanPlayThroughCaptureOptional
ReactEventHandler<HTMLElement>
onDurationChangeOptional
ReactEventHandler<HTMLElement>
onDurationChangeCaptureOptional
ReactEventHandler<HTMLElement>
onEmptiedOptional
ReactEventHandler<HTMLElement>
onEmptiedCaptureOptional
ReactEventHandler<HTMLElement>
onEncryptedOptional
ReactEventHandler<HTMLElement>
onEncryptedCaptureOptional
ReactEventHandler<HTMLElement>
onEndedOptional
ReactEventHandler<HTMLElement>
onEndedCaptureOptional
ReactEventHandler<HTMLElement>
onLoadedDataOptional
ReactEventHandler<HTMLElement>
onLoadedDataCaptureOptional
ReactEventHandler<HTMLElement>
onLoadedMetadataOptional
ReactEventHandler<HTMLElement>
onLoadedMetadataCaptureOptional
ReactEventHandler<HTMLElement>
onLoadStartOptional
ReactEventHandler<HTMLElement>
onLoadStartCaptureOptional
ReactEventHandler<HTMLElement>
onPauseOptional
ReactEventHandler<HTMLElement>
onPauseCaptureOptional
ReactEventHandler<HTMLElement>
onPlayOptional
ReactEventHandler<HTMLElement>
onPlayCaptureOptional
ReactEventHandler<HTMLElement>
onPlayingOptional
ReactEventHandler<HTMLElement>
onPlayingCaptureOptional
ReactEventHandler<HTMLElement>
onProgressOptional
ReactEventHandler<HTMLElement>
onProgressCaptureOptional
ReactEventHandler<HTMLElement>
onRateChangeOptional
ReactEventHandler<HTMLElement>
onRateChangeCaptureOptional
ReactEventHandler<HTMLElement>
onSeekedOptional
ReactEventHandler<HTMLElement>
onSeekedCaptureOptional
ReactEventHandler<HTMLElement>
onSeekingOptional
ReactEventHandler<HTMLElement>
onSeekingCaptureOptional
ReactEventHandler<HTMLElement>
onStalledOptional
ReactEventHandler<HTMLElement>
onStalledCaptureOptional
ReactEventHandler<HTMLElement>
onSuspendOptional
ReactEventHandler<HTMLElement>
onSuspendCaptureOptional
ReactEventHandler<HTMLElement>
onTimeUpdateOptional
ReactEventHandler<HTMLElement>
onTimeUpdateCaptureOptional
ReactEventHandler<HTMLElement>
onVolumeChangeOptional
ReactEventHandler<HTMLElement>
onVolumeChangeCaptureOptional
ReactEventHandler<HTMLElement>
onWaitingOptional
ReactEventHandler<HTMLElement>
onWaitingCaptureOptional
ReactEventHandler<HTMLElement>
onAuxClickOptional
MouseEventHandler<HTMLElement>
onAuxClickCaptureOptional
MouseEventHandler<HTMLElement>
onClickOptional
MouseEventHandler<HTMLElement>
onClickCaptureOptional
MouseEventHandler<HTMLElement>
onContextMenuOptional
MouseEventHandler<HTMLElement>
onContextMenuCaptureOptional
MouseEventHandler<HTMLElement>
onDoubleClickOptional
MouseEventHandler<HTMLElement>
onDoubleClickCaptureOptional
MouseEventHandler<HTMLElement>
onDragOptional
DragEventHandler<HTMLElement>
onDragCaptureOptional
DragEventHandler<HTMLElement>
onDragEndOptional
DragEventHandler<HTMLElement>
onDragEndCaptureOptional
DragEventHandler<HTMLElement>
onDragEnterOptional
DragEventHandler<HTMLElement>
onDragEnterCaptureOptional
DragEventHandler<HTMLElement>
onDragExitOptional
DragEventHandler<HTMLElement>
onDragExitCaptureOptional
DragEventHandler<HTMLElement>
onDragLeaveOptional
DragEventHandler<HTMLElement>
onDragLeaveCaptureOptional
DragEventHandler<HTMLElement>
onDragOverOptional
DragEventHandler<HTMLElement>
onDragOverCaptureOptional
DragEventHandler<HTMLElement>
onDragStartOptional
DragEventHandler<HTMLElement>
onDragStartCaptureOptional
DragEventHandler<HTMLElement>
onDropOptional
DragEventHandler<HTMLElement>
onDropCaptureOptional
DragEventHandler<HTMLElement>
onMouseDownOptional
MouseEventHandler<HTMLElement>
onMouseDownCaptureOptional
MouseEventHandler<HTMLElement>
onMouseEnterOptional
MouseEventHandler<HTMLElement>
onMouseLeaveOptional
MouseEventHandler<HTMLElement>
onMouseMoveOptional
MouseEventHandler<HTMLElement>
onMouseMoveCaptureOptional
MouseEventHandler<HTMLElement>
onMouseOutOptional
MouseEventHandler<HTMLElement>
onMouseOutCaptureOptional
MouseEventHandler<HTMLElement>
onMouseOverOptional
MouseEventHandler<HTMLElement>
onMouseOverCaptureOptional
MouseEventHandler<HTMLElement>
onMouseUpOptional
MouseEventHandler<HTMLElement>
onMouseUpCaptureOptional
MouseEventHandler<HTMLElement>
onSelectOptional
ReactEventHandler<HTMLElement>
onSelectCaptureOptional
ReactEventHandler<HTMLElement>
onTouchCancelOptional
TouchEventHandler<HTMLElement>
onTouchCancelCaptureOptional
TouchEventHandler<HTMLElement>
onTouchEndOptional
TouchEventHandler<HTMLElement>
onTouchEndCaptureOptional
TouchEventHandler<HTMLElement>
onTouchMoveOptional
TouchEventHandler<HTMLElement>
onTouchMoveCaptureOptional
TouchEventHandler<HTMLElement>
onTouchStartOptional
TouchEventHandler<HTMLElement>
onTouchStartCaptureOptional
TouchEventHandler<HTMLElement>
onPointerDownOptional
PointerEventHandler<HTMLElement>
onPointerDownCaptureOptional
PointerEventHandler<HTMLElement>
onPointerMoveOptional
PointerEventHandler<HTMLElement>
onPointerMoveCaptureOptional
PointerEventHandler<HTMLElement>
onPointerUpOptional
PointerEventHandler<HTMLElement>
onPointerUpCaptureOptional
PointerEventHandler<HTMLElement>
onPointerCancelOptional
PointerEventHandler<HTMLElement>
onPointerCancelCaptureOptional
PointerEventHandler<HTMLElement>
onPointerEnterOptional
PointerEventHandler<HTMLElement>
onPointerLeaveOptional
PointerEventHandler<HTMLElement>
onPointerOverOptional
PointerEventHandler<HTMLElement>
onPointerOverCaptureOptional
PointerEventHandler<HTMLElement>
onPointerOutOptional
PointerEventHandler<HTMLElement>
onPointerOutCaptureOptional
PointerEventHandler<HTMLElement>
onGotPointerCaptureOptional
PointerEventHandler<HTMLElement>
onGotPointerCaptureCaptureOptional
PointerEventHandler<HTMLElement>
onLostPointerCaptureOptional
PointerEventHandler<HTMLElement>
onLostPointerCaptureCaptureOptional
PointerEventHandler<HTMLElement>
onScrollOptional
UIEventHandler<HTMLElement>
onScrollCaptureOptional
UIEventHandler<HTMLElement>
onScrollEndOptional
UIEventHandler<HTMLElement>
onScrollEndCaptureOptional
UIEventHandler<HTMLElement>
onWheelOptional
WheelEventHandler<HTMLElement>
onWheelCaptureOptional
WheelEventHandler<HTMLElement>
onAnimationStartOptional
AnimationEventHandler<HTMLElement>
onAnimationStartCaptureOptional
AnimationEventHandler<HTMLElement>
onAnimationEndOptional
AnimationEventHandler<HTMLElement>
onAnimationEndCaptureOptional
AnimationEventHandler<HTMLElement>
onAnimationIterationOptional
AnimationEventHandler<HTMLElement>
onAnimationIterationCaptureOptional
AnimationEventHandler<HTMLElement>
onToggleOptional
ToggleEventHandler<HTMLElement>
onBeforeToggleOptional
ToggleEventHandler<HTMLElement>
onTransitionCancelOptional
TransitionEventHandler<HTMLElement>
onTransitionCancelCaptureOptional
TransitionEventHandler<HTMLElement>
onTransitionEndOptional
TransitionEventHandler<HTMLElement>
onTransitionEndCaptureOptional
TransitionEventHandler<HTMLElement>
onTransitionRunOptional
TransitionEventHandler<HTMLElement>
onTransitionRunCaptureOptional
TransitionEventHandler<HTMLElement>
onTransitionStartOptional
TransitionEventHandler<HTMLElement>
onTransitionStartCaptureOptional
TransitionEventHandler<HTMLElement>
radiusOptional
"theme" | "full"
aspectOptional
"auto" | "square"
refOptionalAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
Ref<HTMLElement>
keyOptional
Key | null