Job Flashcards
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.
