kbin-ui
v2.3.9
Published
collection of react ui components
Readme
kbin-ui
Table of contents
Variables
Functions
- AnimatedFlexCol
- AnimatedFlexRow
- AnimatedText
- AutoPlacingGrid
- Button
- CenterMenu
- CheckBox
- Conditional
- ContextMenu
- ContextMenuExtension
- DualButtons
- FlexCol
- FlexRow
- HorizontalButtonScroller
- HorizontalScroller
- IfElse
- LabelledItems
- LabelledMultiText
- LabelledText
- Map
- Notification
- SVGIcon
- Switch
- Text
- TextArea
- TextAreaOnly
- TextInput
- TextInputOnly
- UncontrolledCheckBox
- UncontrolledDualButtons
- createMenuManager
- setCustomColors
- setCustomScrollbarJSS
- setCustomSizes
- setCustomSpringConfig
- setCustomZIndices
- useContextMenu
- useScrollbarJSS
Variables
colors
• Const colors: object
Type declaration:
Name | Type |
------ | ------ |
buttonBorder | string |
centerMenu | string |
centerMenuBackground | string |
centerMenuBorder | string |
checkBoxBorder | string |
checkBoxHighlightCenter | string |
checkBoxHighlightEdge | string |
contextMenuBackground | string |
contextMenuItemBorder | string |
defaultButton | string |
focussedInput | string |
focussedInputBorder | string |
inputBG | string |
inputText | string |
notificationFailure | string |
notificationSuccess | string |
redButton | string |
text | string |
unfocussedInput | string |
unfocussedInputLabel | string |
scrollbarBackground | string |
scrollbarThumb | string |
Defined in: theme.ts:3
scrollbarJSS
• Const scrollbarJSS: object
an object with JSS to set a custom scrollbar in a component
Usage:
const useJSS = createUseStyles({
/* style */,
...scrollbarJSS.thin
})Type declaration:
Name | Type |
------ | ------ |
none | { &::-webkit-scrollbar: { width: string = '0px' } ; &::-webkit-scrollbar-thumb: { background: string = '#0a2154'; borderRadius: string = '1.5em' } ; &::-webkit-scrollbar-track: { background: string = '#2323246f' } ; scrollbarColor: string = '#0a2154'; scrollbarWidth: string = 'none' } |
regular | { &::-webkit-scrollbar: { width: string = '.8em' } ; &::-webkit-scrollbar-thumb: { background: string = '#0a2154'; borderRadius: string = '1.5em' } ; &::-webkit-scrollbar-track: { background: string = '#2323246f' } ; scrollbarColor: string = '#0a2154'; scrollbarWidth: string = 'auto' } |
thin | { &::-webkit-scrollbar: { width: string = '.5em' } ; &::-webkit-scrollbar-thumb: { background: string = '#0a2154'; borderRadius: string = '1.5em' } ; &::-webkit-scrollbar-track: { background: string = '#2323246f' } ; scrollbarColor: string = '#0a2154'; scrollbarWidth: string = 'thin' } |
Defined in: theme.ts:142
sizes
• Const sizes: object
a collection of size constants compatible with CSS used across the UI
Usage:
<Button fontSize={sizes.text.small}></Button>Type declaration:
Name | Type |
------ | ------ |
button | { margin: string = '.2em'; padding: string = '.3em' } |
checkBox | { checkDif: number = 0; highlightDif: number = 1.5; size: number = 1.2 } |
contextMenu | { maxHeight: string = '90vh'; maxWidth: string = '90vw' } |
file | { height: number = 12; width: number = 10 } |
switch | { diameter: number = 3 } |
text | { large: string = 'calc(25px + 2.8vmin)'; medium: string = 'calc(18px + 1.8vmin)'; small: string = 'calc(12px + 1.2vmin)'; xsmall: string = 'calc(8px + 1vmin)'; xxsmall: string = 'calc(7px + .8vmin)' } |
Defined in: theme.ts:36
springConfig
• Const springConfig: object
a collection of default spring configs
Usage:
const springStyle = useSpring({
/* animated style */,
config: springConfig.fast
})Type declaration:
Name | Type |
------ | ------ |
fast | { friction: number = 30; tension: number = 370 } |
medium | { friction: number = 40; tension: number = 330; velocity: number = 5 } |
xslow | { clamp: boolean = true; friction: number = 20; mass: number = 50; tension: number = 100 } |
Defined in: theme.ts:106
zIndex
• Const zIndex: object
sets the z-index of necessary components
Type declaration:
Name | Type |
------ | ------ |
centerMenu | number |
contextMenu | number |
notification | number |
Defined in: theme.ts:96
Functions
AnimatedFlexCol
▸ ConstAnimatedFlexCol(__namedParameters: { alignItems?: string ; backgroundColor?: string ; children?: React.ReactNode ; className?: string ; height?: string ; justifyContent?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onDragOver?: (e: DragEvent<HTMLDivElement>) => void ; onDrop?: (e: DragEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: PointerEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: PointerEvent<HTMLDivElement>) => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; width?: string }, ref: ForwardedRef<HTMLDivElement>): Element
animated(FlexCol) compatible with springs. see FlexCol.
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
alignItems? | string |
backgroundColor? | string |
children? | React.ReactNode |
className? | string |
height? | string |
justifyContent? | string |
margin? | string |
onClick? | (e: MouseEvent<HTMLDivElement>) => void |
onContextMenu? | (e: MouseEvent<HTMLDivElement>) => void |
onDragOver? | (e: DragEvent<HTMLDivElement>) => void |
onDrop? | (e: DragEvent<HTMLDivElement>) => void |
onPointerEnter? | (e: PointerEvent<HTMLDivElement>) => void |
onPointerLeave? | (e: PointerEvent<HTMLDivElement>) => void |
onWheel? | (e: WheelEvent<HTMLDivElement>) => void |
padding? | string |
pointer? | boolean |
ref? | RefObject<HTMLDivElement> |
style? | CSS.Properties |
width? | string |
• ref: ForwardedRef<HTMLDivElement>
Returns: Element
Defined in: Flex/FlexCol.tsx:58
AnimatedFlexRow
▸ ConstAnimatedFlexRow(__namedParameters: { alignItems?: string ; backgroundColor?: string ; children?: React.ReactNode ; className?: string ; flexWrap?: wrap | nowrap | wrap-reverse ; height?: string ; justifyContent?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: PointerEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: PointerEvent<HTMLDivElement>) => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; width?: string }, ref: ForwardedRef<HTMLDivElement>): Element
animated(FlexRow) compatible with springs. see FlexRow.
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
alignItems? | string |
backgroundColor? | string |
children? | React.ReactNode |
className? | string |
flexWrap? | wrap | nowrap | wrap-reverse |
height? | string |
justifyContent? | string |
margin? | string |
onClick? | (e: MouseEvent<HTMLDivElement>) => void |
onContextMenu? | (e: MouseEvent<HTMLDivElement>) => void |
onPointerEnter? | (e: PointerEvent<HTMLDivElement>) => void |
onPointerLeave? | (e: PointerEvent<HTMLDivElement>) => void |
onWheel? | (e: WheelEvent<HTMLDivElement>) => void |
padding? | string |
pointer? | boolean |
ref? | RefObject<HTMLDivElement> |
style? | CSS.Properties |
width? | string |
• ref: ForwardedRef<HTMLDivElement>
Returns: Element
Defined in: Flex/FlexRow.tsx:54
AnimatedText
▸ ConstAnimatedText(__namedParameters: { className?: string ; color?: string ; fontSize?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; text: string ; textAlign?: string ; textCursor?: boolean ; underline?: boolean ; wrap?: boolean }, ref: ForwardedRef<HTMLDivElement>): Element
animated(Text) compatible with springs. see Text.
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
className? | string |
color? | string |
fontSize? | string |
margin? | string |
onClick? | (e: MouseEvent<HTMLDivElement>) => void |
padding? | string |
pointer? | boolean |
ref? | RefObject<HTMLDivElement> |
style? | CSS.Properties |
text | string |
textAlign? | string |
textCursor? | boolean |
underline? | boolean |
wrap? | boolean |
• ref: ForwardedRef<HTMLDivElement>
Returns: Element
Defined in: Text/Text.tsx:40
AutoPlacingGrid
▸ AutoPlacingGrid(__namedParameters: { alignItems?: start | end | center | stretch ; children?: ReactNode ; className?: string ; direction: row | column | row dense | column dense ; gap?: string ; justifyContent?: start | end | center | stretch ; minHeight: string ; minWidth: string ; numCols?: number | string ; numRows?: number | string ; placeItems?: start | end | center | stretch ; style?: CSS.Properties }): Element
a div with css grid and basic auto placing capabilities
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
alignItems? | start | end | center | stretch |
children? | ReactNode |
className? | string |
direction | row | column | row dense | column dense |
gap? | string |
justifyContent? | start | end | center | stretch |
minHeight | string |
minWidth | string |
numCols? | number | string |
numRows? | number | string |
placeItems? | start | end | center | stretch |
style? | CSS.Properties |
Returns: Element
Defined in: AutoPlacingGrid/AutoPlacingGrid.tsx:5
Button
▸ Button(__namedParameters: { buttonRef?: RefObject<HTMLDivElement> ; children?: React.ReactNode ; className?: string ; fontSize?: string ; isRed?: boolean ; margin?: string ; notClickable?: boolean ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onDoubleClick?: (e: MouseEvent<HTMLDivElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLDivElement>) => void ; onPointerDown?: (e: React.PointerEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: MouseEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: MouseEvent<HTMLDivElement>) => void ; padding?: string ; style?: CSS.Properties }): Element
a standard button element with onClick + more
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
buttonRef? | RefObject<HTMLDivElement> |
children? | React.ReactNode |
className? | string |
fontSize? | string |
isRed? | boolean |
margin? | string |
notClickable? | boolean |
onClick? | (e: MouseEvent<HTMLDivElement>) => void |
onContextMenu? | (e: MouseEvent<HTMLDivElement>) => void |
onDoubleClick? | (e: MouseEvent<HTMLDivElement>) => void |
onKeyDown? | (e: KeyboardEvent<HTMLDivElement>) => void |
onPointerDown? | (e: React.PointerEvent<HTMLDivElement>) => void |
onPointerEnter? | (e: MouseEvent<HTMLDivElement>) => void |
onPointerLeave? | (e: MouseEvent<HTMLDivElement>) => void |
padding? | string |
style? | CSS.Properties |
Returns: Element
Defined in: Button/Button.tsx:6
CenterMenu
▸ CenterMenu(__namedParameters: { bounderStyle?: CSS.Properties ; children: React.ReactNode ; className?: string ; cmControlData: CenterMenuControlData ; header?: string ; headerClassName?: string ; headerStyle?: CSS.Properties ; onClose: () => void ; style?: CSS.Properties }): Element
a component to create central menu popups. used along with the menuManager and useCenterMenu hook.
Usage:
First the menu manager must be instantiated. See createMenuManager.
once the useCenterMenu hook is available (probably through export / import), create center menus following the two component pattern below
function ExampleCenterMenu() {
const { cmControlData, closeMenu, softClose } = useCenterMenu('exampleMenu')
return (
<CenterMenu
cmControlData={cmControlData}
onClose={closeMenu}
>
<ExampleMenuItems closeMenu={closeMenu} softClose={softClose}>
</CenterMenu>
)
}
function ExampleMenuItems({ closeMenu, softClose }) {
useEscapeToClose(closeMenu)
return (
<Fragment>
/* menu content */
</Fragment>
)
}Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
bounderStyle? | CSS.Properties |
children | React.ReactNode |
className? | string |
cmControlData | CenterMenuControlData |
header? | string |
headerClassName? | string |
headerStyle? | CSS.Properties |
onClose | () => void |
style? | CSS.Properties |
Returns: Element
Defined in: CenterMenu/CenterMenu.tsx:11
CheckBox
▸ CheckBox(__namedParameters: { onChecked?: () => void ; onUnChecked?: () => void ; style?: CSS.Properties }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
onChecked? | () => void |
onUnChecked? | () => void |
style? | CSS.Properties |
Returns: Element
Defined in: CheckBox/CheckBox.tsx:5
Conditional
▸ Conditional(__namedParameters: { children: ReactNode ; showIf: boolean }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
children | ReactNode |
showIf | boolean |
Returns: Element
Defined in: Conditional.tsx:3
ContextMenu
▸ ContextMenu(__namedParameters: { bounderStyle?: CSS.Properties ; children: ReactNode ; event: React.MouseEvent<HTMLDivElement> | MouseEvent ; isOpen: boolean ; onClose: () => void ; style?: CSS.Properties }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
bounderStyle? | CSS.Properties |
children | ReactNode |
event | React.MouseEvent<HTMLDivElement> | MouseEvent |
isOpen | boolean |
onClose | () => void |
style? | CSS.Properties |
Returns: Element
Defined in: ContextMenu/ContextMenu.tsx:7
ContextMenuExtension
▸ ContextMenuExtension(__namedParameters: { buttonStyle?: CSS.Properties ; children: ReactNode ; fontSize?: string ; text: string }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
buttonStyle? | CSS.Properties |
children | ReactNode |
fontSize? | string |
text | string |
Returns: Element
Defined in: ContextMenuExtension/ExtensionMenu.tsx:10
DualButtons
▸ DualButtons(__namedParameters: { leftText: string ; onLeft?: () => void ; onRight?: () => void ; rightText: string ; startRight?: boolean }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
leftText | string |
onLeft? | () => void |
onRight? | () => void |
rightText | string |
startRight? | boolean |
Returns: Element
Defined in: DualButtons/DualButtons.tsx:4
FlexCol
▸ ConstFlexCol(__namedParameters: { alignItems?: string ; backgroundColor?: string ; children?: React.ReactNode ; className?: string ; height?: string ; justifyContent?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onDragOver?: (e: DragEvent<HTMLDivElement>) => void ; onDrop?: (e: DragEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: PointerEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: PointerEvent<HTMLDivElement>) => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; width?: string }, ref: ForwardedRef<HTMLDivElement>): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
alignItems? | string |
backgroundColor? | string |
children? | React.ReactNode |
className? | string |
height? | string |
justifyContent? | string |
margin? | string |
onClick? | (e: MouseEvent<HTMLDivElement>) => void |
onContextMenu? | (e: MouseEvent<HTMLDivElement>) => void |
onDragOver? | (e: DragEvent<HTMLDivElement>) => void |
onDrop? | (e: DragEvent<HTMLDivElement>) => void |
onPointerEnter? | (e: PointerEvent<HTMLDivElement>) => void |
onPointerLeave? | (e: PointerEvent<HTMLDivElement>) => void |
onWheel? | (e: WheelEvent<HTMLDivElement>) => void |
padding? | string |
pointer? | boolean |
ref? | RefObject<HTMLDivElement> |
style? | CSS.Properties |
width? | string |
• ref: ForwardedRef<HTMLDivElement>
Returns: Element
Defined in: Flex/FlexCol.tsx:56
FlexRow
▸ ConstFlexRow(__namedParameters: { alignItems?: string ; backgroundColor?: string ; children?: React.ReactNode ; className?: string ; flexWrap?: wrap | nowrap | wrap-reverse ; height?: string ; justifyContent?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void ; onPointerEnter?: (e: PointerEvent<HTMLDivElement>) => void ; onPointerLeave?: (e: PointerEvent<HTMLDivElement>) => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; width?: string }, ref: ForwardedRef<HTMLDivElement>): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
alignItems? | string |
backgroundColor? | string |
children? | React.ReactNode |
className? | string |
flexWrap? | wrap | nowrap | wrap-reverse |
height? | string |
justifyContent? | string |
margin? | string |
onClick? | (e: MouseEvent<HTMLDivElement>) => void |
onContextMenu? | (e: MouseEvent<HTMLDivElement>) => void |
onPointerEnter? | (e: PointerEvent<HTMLDivElement>) => void |
onPointerLeave? | (e: PointerEvent<HTMLDivElement>) => void |
onWheel? | (e: WheelEvent<HTMLDivElement>) => void |
padding? | string |
pointer? | boolean |
ref? | RefObject<HTMLDivElement> |
style? | CSS.Properties |
width? | string |
• ref: ForwardedRef<HTMLDivElement>
Returns: Element
Defined in: Flex/FlexRow.tsx:52
HorizontalButtonScroller
▸ HorizontalButtonScroller(__namedParameters: { buttonClassName?: string ; buttonStyle?: CSS.Properties ; children: ReactNode ; className?: string ; onLeft: () => void ; onRight: () => void ; onWheel?: (e: WheelEvent<HTMLDivElement>) => void ; style?: CSS.Properties ; useOnWheel?: boolean }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
buttonClassName? | string |
buttonStyle? | CSS.Properties |
children | ReactNode |
className? | string |
onLeft | () => void |
onRight | () => void |
onWheel? | (e: WheelEvent<HTMLDivElement>) => void |
style? | CSS.Properties |
useOnWheel? | boolean |
Returns: Element
Defined in: HorizontalButtonScroller.tsx:10
HorizontalScroller
▸ HorizontalScroller(__namedParameters: { alignItems?: string ; children: ReactNode ; className?: string ; height?: string ; style?: CSS.Properties ; width?: string }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
alignItems? | string |
children | ReactNode |
className? | string |
height? | string |
style? | CSS.Properties |
width? | string |
Returns: Element
Defined in: HorizontalScroller/HorizontalScroller.tsx:13
IfElse
▸ IfElse(__namedParameters: { show: ReactNode ; showElse: ReactNode ; showIf: boolean }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
show | ReactNode |
showElse | ReactNode |
showIf | boolean |
Returns: Element
Defined in: IfElse.tsx:3
LabelledItems
▸ LabelledItems(__namedParameters: { children: ReactNode ; itemsStyle?: CSS.Properties ; label: ReactNode ; labelSize?: string ; labelStyle?: CSS.Properties ; style?: CSS.Properties }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
children | ReactNode |
itemsStyle? | CSS.Properties |
label | ReactNode |
labelSize? | string |
labelStyle? | CSS.Properties |
style? | CSS.Properties |
Returns: Element
Defined in: LabelledItems/LabelledItems.tsx:9
LabelledMultiText
▸ LabelledMultiText(__namedParameters: { label: string ; labelSize?: string ; labelStyle?: CSS.Properties ; style?: CSS.Properties ; text: string[] ; textSize?: string ; textStyle?: CSS.Properties }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
label | string |
labelSize? | string |
labelStyle? | CSS.Properties |
style? | CSS.Properties |
text | string[] |
textSize? | string |
textStyle? | CSS.Properties |
Returns: Element
Defined in: LabelledText/LabelledMultiText.tsx:8
LabelledText
▸ LabelledText(__namedParameters: { label: string ; labelSize?: string ; labelStyle?: CSS.Properties ; style?: CSS.Properties ; text: string ; textSize?: string ; textStyle?: CSS.Properties }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
label | string |
labelSize? | string |
labelStyle? | CSS.Properties |
style? | CSS.Properties |
text | string |
textSize? | string |
textStyle? | CSS.Properties |
Returns: Element
Defined in: LabelledText/LabelledText.tsx:8
Map
▸ Map<T>(__namedParameters: { array: T[] ; map: (val: T, index: number) => ReactNode }): Element
Type parameters:
Name |
------ |
T |
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
array | T[] |
map | (val: T, index: number) => ReactNode |
Returns: Element
Defined in: Map.tsx:3
Notification
▸ Notification(__namedParameters: { xLocation?: left | center | right ; yLocation?: top | center | bottom }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
xLocation? | left | center | right |
yLocation? | top | center | bottom |
Returns: Element
Defined in: Notification/Notification.tsx:16
SVGIcon
▸ SVGIcon(__namedParameters: { alt: string ; className?: string ; height?: string ; imageRef?: RefObject<HTMLImageElement> ; margin?: string ; onClick?: (e: MouseEvent<HTMLImageElement>) => void ; onPointerDown?: (e: PointerEvent<HTMLImageElement>) => void ; padding?: string ; pointer?: boolean ; scale?: number ; size?: string ; src: string ; style?: CSS.Properties ; width?: string }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
alt | string |
className? | string |
height? | string |
imageRef? | RefObject<HTMLImageElement> |
margin? | string |
onClick? | (e: MouseEvent<HTMLImageElement>) => void |
onPointerDown? | (e: PointerEvent<HTMLImageElement>) => void |
padding? | string |
pointer? | boolean |
scale? | number |
size? | string |
src | string |
style? | CSS.Properties |
width? | string |
Returns: Element
Defined in: SVGIcon/SVGIcon.tsx:5
Switch
▸ Switch(__namedParameters: { fontSize?: string ; initState: boolean ; onSwitch: (newState: boolean) => void ; style?: object ; text: string }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
fontSize? | string |
initState | boolean |
onSwitch | (newState: boolean) => void |
style? | object |
text | string |
Returns: Element
Defined in: Switch/Switch.tsx:19
Text
▸ ConstText(__namedParameters: { className?: string ; color?: string ; fontSize?: string ; margin?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; padding?: string ; pointer?: boolean ; ref?: RefObject<HTMLDivElement> ; style?: CSS.Properties ; text: string ; textAlign?: string ; textCursor?: boolean ; underline?: boolean ; wrap?: boolean }, ref: ForwardedRef<HTMLDivElement>): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
className? | string |
color? | string |
fontSize? | string |
margin? | string |
onClick? | (e: MouseEvent<HTMLDivElement>) => void |
padding? | string |
pointer? | boolean |
ref? | RefObject<HTMLDivElement> |
style? | CSS.Properties |
text | string |
textAlign? | string |
textCursor? | boolean |
underline? | boolean |
wrap? | boolean |
• ref: ForwardedRef<HTMLDivElement>
Returns: Element
Defined in: Text/Text.tsx:38
TextArea
▸ TextArea(__namedParameters: { autoFocus?: boolean ; bounderClassName?: string ; defaultValue?: string ; fontSize?: string ; inputClassName?: string ; label?: string ; labelFontSize?: string ; labelStyle?: CSS.Properties ; layout?: row | column ; onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void ; onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void ; onEnter?: () => void ; onEscape?: () => void ; onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLTextAreaElement>) => void ; placeholder?: string ; style?: CSS.Properties ; textAreaRef?: RefObject<HTMLTextAreaElement> ; value?: string }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
autoFocus? | boolean |
bounderClassName? | string |
defaultValue? | string |
fontSize? | string |
inputClassName? | string |
label? | string |
labelFontSize? | string |
labelStyle? | CSS.Properties |
layout? | row | column |
onBlur? | (e: FocusEvent<HTMLTextAreaElement>) => void |
onChange? | (e: ChangeEvent<HTMLTextAreaElement>) => void |
onEnter? | () => void |
onEscape? | () => void |
onFocus? | (e: FocusEvent<HTMLTextAreaElement>) => void |
onKeyDown? | (e: KeyboardEvent<HTMLTextAreaElement>) => void |
placeholder? | string |
style? | CSS.Properties |
textAreaRef? | RefObject<HTMLTextAreaElement> |
value? | string |
Returns: Element
Defined in: TextArea/TextArea.tsx:11
TextAreaOnly
▸ TextAreaOnly(__namedParameters: { autoFocus?: boolean ; className?: string ; defaultValue?: string ; fontSize?: string ; onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void ; onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void ; onEnter?: () => void ; onEscape?: () => void ; onFocus?: (e: FocusEvent<HTMLTextAreaElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLTextAreaElement>) => void ; placeholder?: string ; style?: CSS.Properties ; textAreaRef?: RefObject<HTMLTextAreaElement> ; value?: string }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
autoFocus? | boolean |
className? | string |
defaultValue? | string |
fontSize? | string |
onBlur? | (e: FocusEvent<HTMLTextAreaElement>) => void |
onChange? | (e: ChangeEvent<HTMLTextAreaElement>) => void |
onEnter? | () => void |
onEscape? | () => void |
onFocus? | (e: FocusEvent<HTMLTextAreaElement>) => void |
onKeyDown? | (e: KeyboardEvent<HTMLTextAreaElement>) => void |
placeholder? | string |
style? | CSS.Properties |
textAreaRef? | RefObject<HTMLTextAreaElement> |
value? | string |
Returns: Element
Defined in: TextArea/TextAreaOnly.tsx:5
TextInput
▸ TextInput(__namedParameters: { autoFocus?: boolean ; bounderClassName?: string ; defaultValue?: string ; fontSize?: string ; inputClassName?: string ; inputRef?: RefObject<HTMLInputElement> ; label?: string ; labelFontSize?: string ; labelStyle?: CSS.Properties ; layout?: row | column ; onBlur?: (e: FocusEvent<HTMLInputElement>) => void ; onChange?: (e: ChangeEvent<HTMLInputElement>) => void ; onEnter?: () => void ; onEscape?: () => void ; onFocus?: (e: FocusEvent<HTMLInputElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void ; password?: boolean ; placeholder?: string ; style?: CSS.Properties ; value?: string }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
autoFocus? | boolean |
bounderClassName? | string |
defaultValue? | string |
fontSize? | string |
inputClassName? | string |
inputRef? | RefObject<HTMLInputElement> |
label? | string |
labelFontSize? | string |
labelStyle? | CSS.Properties |
layout? | row | column |
onBlur? | (e: FocusEvent<HTMLInputElement>) => void |
onChange? | (e: ChangeEvent<HTMLInputElement>) => void |
onEnter? | () => void |
onEscape? | () => void |
onFocus? | (e: FocusEvent<HTMLInputElement>) => void |
onKeyDown? | (e: KeyboardEvent<HTMLInputElement>) => void |
password? | boolean |
placeholder? | string |
style? | CSS.Properties |
value? | string |
Returns: Element
Defined in: TextInput/TextInput.tsx:11
TextInputOnly
▸ TextInputOnly(__namedParameters: { autoFocus?: boolean ; className?: string ; defaultValue?: string ; fontSize?: string ; inputRef?: RefObject<HTMLInputElement> ; onBlur?: (e: FocusEvent<HTMLInputElement>) => void ; onChange?: (e: ChangeEvent<HTMLInputElement>) => void ; onEnter?: () => void ; onEscape?: () => void ; onFocus?: (e: FocusEvent<HTMLInputElement>) => void ; onKeyDown?: (e: KeyboardEvent<HTMLInputElement>) => void ; password?: boolean ; placeholder?: string ; style?: CSS.Properties ; value?: string }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
autoFocus? | boolean |
className? | string |
defaultValue? | string |
fontSize? | string |
inputRef? | RefObject<HTMLInputElement> |
onBlur? | (e: FocusEvent<HTMLInputElement>) => void |
onChange? | (e: ChangeEvent<HTMLInputElement>) => void |
onEnter? | () => void |
onEscape? | () => void |
onFocus? | (e: FocusEvent<HTMLInputElement>) => void |
onKeyDown? | (e: KeyboardEvent<HTMLInputElement>) => void |
password? | boolean |
placeholder? | string |
style? | CSS.Properties |
value? | string |
Returns: Element
Defined in: TextInput/TextInputOnly.tsx:5
UncontrolledCheckBox
▸ UncontrolledCheckBox(__namedParameters: { checked: boolean ; className?: string ; onClick?: (e: MouseEvent<HTMLDivElement>) => void ; style?: CSS.Properties }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
checked | boolean |
className? | string |
onClick? | (e: MouseEvent<HTMLDivElement>) => void |
style? | CSS.Properties |
Returns: Element
Defined in: CheckBox/UncontrolledCheckBox.tsx:7
UncontrolledDualButtons
▸ UncontrolledDualButtons(__namedParameters: { isRight: boolean ; leftText: string ; onLeft: () => void ; onRight: () => void ; rightText: string ; style?: CSS.Properties }): Element
Parameters:
• __namedParameters: object
Name | Type |
------ | ------ |
isRight | boolean |
leftText | string |
onLeft | () => void |
onRight | () => void |
rightText | string |
style? | CSS.Properties |
Returns: Element
Defined in: DualButtons/UncontrolledDualButtons.tsx:9
createMenuManager
▸ createMenuManager(): object
Returns: object
Name | Type |
------ | ------ |
mmAddMenu | (name: string, openMenu: OpenMenu) => void |
mmCloseMenu | () => void |
mmOpenMenu | (name: string, save: boolean, ...args: any) => void |
mmQueueMenu | (name: string, ...args: any) => void |
useCenterMenu | (name: string, onOpen?: OpenMenu, save: boolean, onClose?: () => void) => { closeMenu: () => void ; cmControlData: boolean ; softClose: () => void } |
Defined in: menuManager/menuManager.ts:4
setCustomColors
▸ setCustomColors(customColors: Partial<typeof colors>): void
Parameters:
Name | Type |
------ | ------ |
customColors | Partial<typeof colors> |
Returns: void
Defined in: theme.ts:32
setCustomScrollbarJSS
▸ setCustomScrollbarJSS(customJSS: CustomScrollbarJSS): void
Parameters:
Name | Type |
------ | ------ |
customJSS | CustomScrollbarJSS |
Returns: void
Defined in: theme.ts:193
setCustomSizes
▸ setCustomSizes(customSizes: CustomSizes): void
Parameters:
Name | Type |
------ | ------ |
customSizes | CustomSizes |
Returns: void
Defined in: theme.ts:75
setCustomSpringConfig
▸ setCustomSpringConfig(customSpringConfig: CustomSpringConfig): void
Parameters:
Name | Type |
------ | ------ |
customSpringConfig | CustomSpringConfig |
Returns: void
Defined in: theme.ts:130
setCustomZIndices
▸ setCustomZIndices(customZIndices: Partial<typeof zIndex>): void
Parameters:
Name | Type |
------ | ------ |
customZIndices | Partial<typeof zIndex> |
Returns: void
Defined in: theme.ts:102
useContextMenu
▸ useContextMenu<Data>(idata: Data): Return<Data>
Type parameters:
Name |
------ |
Data |
Parameters:
Name | Type |
------ | ------ |
idata | Data |
Returns: Return<Data>
Defined in: ContextMenu/hooks.ts:14
useScrollbarJSS
▸ ConstuseScrollbarJSS(data?: unknown): Record<Scroller, string>
Parameters:
Name | Type |
------ | ------ |
data? | unknown |
Returns: Record<Scroller, string>
Defined in: theme.ts:205