Job Flashcards
(38 cards)
ALERT
alignAction flex-start
className
AppBar
Propname Type default description
ID
AppBar
Prop name Type default description
id string Required The html id
children node The content of the component
color enum primary The color of a component. It suports those theme colores that make sense
One of: inherit, primary, secondary, default
position enum static The positon type.
One of type: fixed, absolute, sticky, static
Avatar
Prop name Type Default Description
alt string Used in combination with src or srcSet to provide an alt attribute for the rendered img element.
children node Used to render icon or text elements inside the Avatar. When children are provided, the name, src and alt props will not be used and no img will be rendered by default. This can be an element, or just a string.
email string The user’s email. Used to fall back to Gravatar
gutter enum none The left/right margin around the avatar.
One of: left, right, both, none
id string The html id
name string The name of the user. This is used to generate the initials shown. If children are provided this will not be shown. If no alt provided, this will be used instead.
onBlur func Event handler for onBlur
onFocus func Event handler for onFocus
onMouseLeave func Event handler for onMouseLeave
onMouseOver func Event handler for onMouseOver
onTouchEnd func Event handler for onTouchEnd
onTouchStart func Event handler for onTouchStart
size enum small The size of the avatar.
One of: small, medium, large
sizes string The sizes attribute for the img element.
src string The src attribute for the img element.
srcSet string The srcSet attribute for the img element.
BackgroundJob
Prop name Type Default Description
active false
https://preamble-ui.azurewebsites.net/#/Components/BackgroundJob
BackgroundJobsMenu
Prop name Type Default Description
jobs []
https://preamble-ui.azurewebsites.net/#/Components/BackgroundJobsMenu
BackgroundJobsMenu
Prop name Type Default Description
jobs []
https://preamble-ui.azurewebsites.net/#/Components/BackgroundJobsMenu
BoxModel
Prop name Type Default Description
id string The html id
margin union Any pre-set margin, false to disable. { top: { value: “”, unit: “” }, left: { value: “”, unit: “” },
bottom: { value: “”, unit: “” }, right: { value: “”, unit: “” } }
One of type: object, bool
onChange func Callback fired when an input is changed. function ({ size, padding, margin}) => {}
padding union Any pre-set padding, false to disable. { top: { value: “”, unit: “” }, left: { value: “”, unit: “” },
bottom: { value: “”, unit: “” }, right: { value: “”, unit: “” } }
One of type: object, bool
size union Any pre-set sizes, false to disable. { width: { value: “”, unit: “” }, height: { value: “”, unit:
“” } }
One of type: object, bool
Breadcrumbs
Prop name Type Default Description
children node Pass in multiple children. Each child will become a separate breadcrumb.
id string The html id
maxItems number 8 Specifies the maximum number of breadcrumbs to display. When there are more
than the maximum number, only the first and last will be shown, with an ellipsis in
between.
Button
PROPS & METHODS
Prop name Type Default Description
children node Required The content of the button.
aria-label string An accessibility label to display for the button. Defaults to the title
prop. If title prop omitted, and the icon is a button variant, this is
required for accessibility.
color enum The color of the component. It supports those those theme colors that make sense for this component
One of: default, primary, secondary, inherit
component union You can use this prop with react-router. See https://material-
ui.com/guides/composition/#button
One of type: string, func, object
disabled bool If true, the button will be disabled.
endIcon node Icon placed to the right of the text
fullWidth bool If true, the button will take up the full width of its container.
href string The URL to link to when the button is clicked. If desired, an a
element will be used as the root node.
id string The html id
onClick any Callback to execute when the button is pressed
openInNewWindowbool Set true to open the href in a new window.
role string HTML role
size enum The size of the button. small is equivalent to the dense button
styling.
One of: small, medium, large
startIcon node Icon placed to the left of the text
stopPropagation bool If true, we will stop propagation of event execution for onClick.
style object Additional styles to render
tabIndex union The tab index of the button. Should be 0 if the button is selectable,
-1 if the button is not selectable.
One of type: number, string
title node The tooltip to display for the button
tooltipProps object Shape Props to spread to the Tooltip component if rendered
type enum default The type of button to render
One of: default, icon, fab
variant enum contained The style of button.
One of: contained, outlined, text
ButtonDropDown
PROPS & METHODS
Prop name Type Default Description
options shape[] Required An array of Button props
id: string — The html id
children: node — Required — The content of the button.
component: union —
@ignoreUtilized By: Preamble => Page
disabled: bool — If true, the button will be disabled.
href: string — The URL to link to when the button is clicked. If desired, an a element will be used as the root node.
onClick: any — Callback to execute when the button is pressed
size: enum — The size of the button. small is equivalent to the dense button styling.
type: enum — The type of button to render
variant: enum — The style of button.
openInNewWindow: bool — Set true to open the href in a new window.
color enum The color of the component. It supports those those theme
colors that make sense for this component
One of: default, primary, secondary, inherit
fullWidth bool If true, the ButtonDropDown will take up the full width of its
container.
id string The html id
ButtonGroup
PROPS & METHODS
Prop name Type Default Description
className string Classes to apply to the root
id string The html id
layout enum left Sets the layout and margin of your group of buttons
One of: left, right, justify, stacked, center
Card
PROPS & METHODS
Prop name Type Default Description
id string Required The html id
avatar shape The Avatar for the Card Header.
id: string — Required — The html id
alt: string — Used in combination with src or srcSet to provide an alt attribute for the rendered img element.
children: node — Used to render icon or text elements inside the Avatar. src and alt props will not be used and no img will be rendered by default. This can be an element, or just a string.
className: string — @ignore
onBlur: func — Event handler for onBlur
onFocus: func — Event handler for onFocus
onMouseLeave: func — Event handler for onMouseLeave
onMouseOver: func — Event handler for onMouseOver
onTouchEnd: func — Event handler for onTouchEnd
onTouchStart: func — Event handler for onTouchStart
sizes: string — The sizes attribute for the img element.
src: string — The src attribute for the img element.
srcSet: string — The srcSet attribute for the img element.
cardActionsProps object
Props to pass on to the CardActions component
cardContentProps object Props to pass on to the CardContent component
cardHeaderProps object Props to pass on to the CardAction component
cardMediaProps object Props to pass on to the CardMedia component
content node The content of the card
disableFooterSpacing bool If true, the card footer does not have additional margin.
footer node The footer content of the card
image string If provided, the card will have an image shown at the top
imageHeight string The height of a provided image
raised bool If true, the card will use raised styling.
subheader node The subheader to use on the card header
title node The title to use on the card header
Checkbox
PROPS & METHODS
Prop name Type Default Description
id string Required The html id
checked union If true the checkbox is checked
One of type: bool, string
color enum Color for the checkbox
One of: default, primary, secondary
disabled bool If true the checkbox is disabled
helperText string The text to display for input help/hints
indeterminate bool If true the checkbox is selected with the indeterminate icon -
label string The text to be used in the label.
onChange func Callback for the checkbox is clicked
Signature: function(event, checked) => void event: the originating event.
checked: the checked value of the switch
value string The value to put on the checkbox input.
value=”Green” equals: event.target.value = “Green”
Utilized by:
FormBuilder
Chip
PROPS & METHODS
Prop name Type Default Description
avatar element
Avatar element
id string The html id
label node The contents of the chip label
onDelete func Callback function fired when the delete icon is clicked. If set, the delete icon will
be shown.
CodeEditor
PROPS & METHODS
Prop name Type Default Description
enableOverviewRuler false
height 300
minimap { enabled: false }
scrollBeyondLastLine false
ColorPicker
PROPS & METHODS
Prop name Type Default Description
color union Color in one of the following formats: - Hex (#fff or #ffffff) - RGB(A) ({r: 21, g: 21, b: 21, a:
.5} or {r: 21, g: 21, b: 21}) - HSL(A) ({h: 0, s: 0, l: .1, a: .5} or {h: 0, s: 0, l: .1})
One of type: string, shape, shape
id string The html id
label node The contents of the label
labelPosition enum inside Whether to display the label normally or outside of the color picker
One of: inside, outside
onChange func Function fired when color is picked
onClear func Callback when color is cleared
presetColors union[] Preset Colors (see color format)
DataMapper
https://preamble-ui.azurewebsites.net/#/Components/DateDistanceTooltip
DateDistanceTooltip
https://preamble-ui.azurewebsites.net/#/Components/DateDistanceTooltip
Divider
PROPS & METHODS
Prop name Type Default Description
absolute bool false Sets an absolute position with left and top set to 0px.
component union hr The component used for the root node. Either a string to use a DOM element
or a component.
One of type: func, string, object
flexItem bool false If true, a vertical divider will have the correct height when used in flex
container. (By default, a vertical divider will have a calculated height of 0px if
it is the child of a flex container.)
id string The html id.
light bool false If true, the divider will have a lighter color.
orientation enum horizontal The divider orientation
One of: horizontal, vertical
variant enum fullWidth The variant to use.
One of: fullWidth, inset, middle
Drawer
PROPS & METHODS
Prop name Type Default Description
id string Required
The html id
anchor enum Side from which the drawer will appear
One of: left, top, right, bottom
children node The contents of the drawer
onClose func Callback fired when the component requests to be closed
open bool If ‘true’, the drawer is open.
variant enum temporary The variant to use
One of: permanent, persistent, temporary
ErrorMessage
PROPS & METHODS
Prop name Type Default Description
id string Required The html id
align enum left Set the text-align on the component.
One of: left, center
children node The error message
gutterBottom bool true If true, the text will have a bottom margin.
gutterTop bool false If true, the text will have a top margin.
message custom Deprecated: Use a child node instead
preset enum Use a preset error
One of: 403, 404
title string The title shown large
type enum error The type of error.
One of: warning, error, info
ErrorPage
PROPS & METHODS Prop name Type Default Description className maxWidth lg severity warning
ExpansionPanel
PROPS & METHODS
Prop name Type Default Description
id string Required The html id
defaultExpanded bool false If true, will display the expansion panel in the
expanded state by default.
disabled bool false If true, will render the expansion panel as disabled
expandActions node The actions to be displayed when the panel is
expanded
expandDetails node The content to be displayed when the panel is
expanded
expandIcon node An icon to display at the right side of the expansion
panel (replaces the Expand Arrow)
expandSummary node The content to be displayed when the panel is
collapsed
expanded bool If set, will give manual control over the expansion
panel.
onChange func Callback fired when the expand/collapse state is
changed.
Signature: function(event: object, expanded: bool) =>
void event: The event source of the callback
expanded: The expanded state of the panel
removeMarginExpanded bool false If true, the margin between expanded panels is
removed
startIcon node An icon to display at the left side of the expansion
panel
unmountOnExit bool false If true, the details/actions will unmount when the panel
is closed
