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