UI COMPONENTS Flashcards

1
Q

____________ 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

A

User Interface (UI)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

___________ 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.

A

UI Components

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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.

A

Action Sheet

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

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.

A

Alert

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

are inline block elements that usually
appear near another element. Typically they
contain a number or other characters

A

Badges

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

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.

A

Buttons

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

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.

A

Cards

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

allow the selection of
multiple options from a set of options.
They appear as checked (ticked) when
activated.

A

Checkboxes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

represent complex entities in small
blocks, such as a contact.

A

Chips

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

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.

A

content

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

present a calendar interface
and time wheel, making it easy for users
to select dates and times.

A

Datetimes

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

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.

A

Fabs

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

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

A

Grids

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

calls an action to be
performed when the user scrolls a specified
distance from the bottom or top of the
page.

A

Infinite Scroll

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

act as a signifier in which user will
be able to identify what the function of
the button is.

A

Icons

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

provides a user to enter data on
the app

A

Input

17
Q

are elements that can contain text,
icons, avatars, images, inputs, and any
other native or custom elements.

A

Item

18
Q

are made up of multiple rows of
items which can contain text, buttons,
toggles, icons, thumbnails, and much
more

A

Lists

19
Q

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.

A

Menu

20
Q

dialog that appears on top of the app’s
content, and must be dismissed by the app before interaction can resume

A

Modal

21
Q

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.

A

Popover

22
Q

inform users about the
status of ongoing processes. There are
two types of progress bars: determinate
and indeterminate.

A

Progress bars

23
Q

used to allow users to select one item at a time

A

Radio buttons

24
Q

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.

A

Refresher

25
Q

a component that allows an
item to be dragged to change its order
within a group of items. It must be used
within a reorder group to provide a visual
drag and drop interface.

A

Reorder

26
Q

The ______ outlet behaves in a similar
way to Angular’s built-in router outlet
component and Vue’s router view
component, but contains the logic for
providing a stacked navigation, and
animating views in and out.

A

router

27
Q

represent a text field that can be
used to search through a collection. They can be displayed inside of a toolbar or the main
content.

A

Searchbars

28
Q

display a group of related
buttons, sometimes known as
segmented controls, in a horizontal row.

A

Segments

29
Q

are form controls to select an
option, or options, from a set of options

A

Selects

30
Q

The___component is a multi-section
container. Each section can be swiped or
dragged between. It contains any
number of Slide components.

A

Slides

31
Q

____ are a top-level navigation
component to implement a tab-based
navigation. The component is a container
of individual Tab components.

A

Tabs

32
Q

A _____ notification is a long-standing
custom in mobile application used to
notify the user of something happening
within the system.

A

toast

33
Q

______ are switches that change the state of a single option. They can be switched on or off by pressing or swiping them. Toggles can also be checked programmatically by setting the checked property.

A

Toggles

34
Q

generally positioned above or
below content and provide content and actions
for the current screen. When placed within the
content, toolbars will scroll with the content.

A

Toolbars

35
Q

___provide collapsible sections in your
content to reduce vertical space while providing
a way of organizing and grouping information.

A

Accordions

36
Q

______are navigation items that are used
to indicate where a user is on an app or site. They should be used for large sites and apps with hierarchically arranged pages.

A

Breadcrumbs

37
Q

____ are the different images that users
can see on an app. It consists of the ion, ion- icon, ion-img, ion-thumbnail

A

Media

38
Q

The ____ slider lets users select from a range of values by moving the slider knob. By default, one knob controls the value of the range. This
behavior can be customized using dual knobs

A

Range

39
Q

The ______ component is a simple component
that can be used to style the text color of any element.
The ion-text attribute should be added to the element in order to pass a color from the Sass $colors map and change the text color of that element.

A

Typography