UI COMPONENTS Flashcards
____________ is the
point of human-computer
interaction and communication in a
device. This can include display
screens, keyboards, a mouse and the
appearance of a desktop. It is also the
way through which a user interacts
with an application or a website
User Interface (UI)
___________ high-level building blocks which allow you to
quickly construct the UI for your app. They add interactivity to a
user interface, providing touchpoints for the user as they navigate
their way around.
UI Components
is a dialog that displays a
set of options. It appears on top of the
app’s content, and must be manually
dismissed by the user before they can
resume interaction with the app.
Action Sheet
a dialog that presents users
with information or collects information
from the user using inputs. An alert
appears on top of the app’s content, and
must be manually dismissed by the user
before they can resume interaction with
the app.
Alert
are inline block elements that usually
appear near another element. Typically they
contain a number or other characters
Badges
provide a clickable element,
which can be used in forms, or anywhere
that needs simple, standard button
functionality. They may display text,
icons, or both.
Buttons
are containers that display content
such as text, images, buttons, and lists. A
card can be a single component, but is
often made up of a header, title, subtitle,
and content.
Cards
allow the selection of
multiple options from a set of options.
They appear as checked (ticked) when
activated.
Checkboxes
represent complex entities in small
blocks, such as a contact.
Chips
a component provides an easy
to use content area with some useful
methods to control the scrollable area.
There should only be one content in a
single view.
content
present a calendar interface
and time wheel, making it easy for users
to select dates and times.
Datetimes
are container elements that contain one or
more fab buttons. They should be placed in a fixed position that does not scroll with the content.
Fabs
act as a container for all rows and
columns. Grids take up the full width of
their container, but adding the fixed
property will set the width based on the
screen size
Grids
calls an action to be
performed when the user scrolls a specified
distance from the bottom or top of the
page.
Infinite Scroll
act as a signifier in which user will
be able to identify what the function of
the button is.
Icons
provides a user to enter data on
the app
Input
are elements that can contain text,
icons, avatars, images, inputs, and any
other native or custom elements.
Item
are made up of multiple rows of
items which can contain text, buttons,
toggles, icons, thumbnails, and much
more
Lists
a navigation drawer that
slides in from the side of the current
view. By default, it slides in from the
left, but the side can be overridden.
Menu
dialog that appears on top of the app’s
content, and must be dismissed by the app before interaction can resume
Modal
dialog that appears on top of the current
page. It can be used for anything, but generally it is used
for overflow actions that don’t fit in the navigation bar.
Popover
inform users about the
status of ongoing processes. There are
two types of progress bars: determinate
and indeterminate.
Progress bars
used to allow users to select one item at a time
Radio buttons
provides pull-to-refresh
functionality on a content component.
The pull-to-refresh pattern lets a user pull
down on a list of data in order to retrieve
more data.
Refresher
