diff --git a/static/icons/component-action-sheet-icon.png b/static/icons/component-action-sheet-icon.png index 50dee9de006..72b0ec7a49b 100644 Binary files a/static/icons/component-action-sheet-icon.png and b/static/icons/component-action-sheet-icon.png differ diff --git a/static/icons/component-alert-icon.png b/static/icons/component-alert-icon.png index 3b11a3dfec3..86835cfe815 100644 Binary files a/static/icons/component-alert-icon.png and b/static/icons/component-alert-icon.png differ diff --git a/static/icons/component-api-icon.png b/static/icons/component-api-icon.png index d9ef4582a4b..ae19cd1c62e 100644 Binary files a/static/icons/component-api-icon.png and b/static/icons/component-api-icon.png differ diff --git a/static/icons/component-badge-icon.png b/static/icons/component-badge-icon.png index b7b952c0833..a0c11b5a3b4 100644 Binary files a/static/icons/component-badge-icon.png and b/static/icons/component-badge-icon.png differ diff --git a/static/icons/component-breadcrumbs-icon.png b/static/icons/component-breadcrumbs-icon.png index 2e7a4165fcf..c6f33b04068 100644 Binary files a/static/icons/component-breadcrumbs-icon.png and b/static/icons/component-breadcrumbs-icon.png differ diff --git a/static/icons/component-button-icon.png b/static/icons/component-button-icon.png index 9f14f5fd58d..705d517f50c 100644 Binary files a/static/icons/component-button-icon.png and b/static/icons/component-button-icon.png differ diff --git a/static/icons/component-card-icon.png b/static/icons/component-card-icon.png index 6eed76e6f71..5dd1e2c8ab5 100644 Binary files a/static/icons/component-card-icon.png and b/static/icons/component-card-icon.png differ diff --git a/static/icons/component-checkbox-icon.png b/static/icons/component-checkbox-icon.png index f2c62b6c9dd..01870af26d3 100644 Binary files a/static/icons/component-checkbox-icon.png and b/static/icons/component-checkbox-icon.png differ diff --git a/static/icons/component-chip-icon.png b/static/icons/component-chip-icon.png index bcaae5b8372..bdfa2c0f14b 100644 Binary files a/static/icons/component-chip-icon.png and b/static/icons/component-chip-icon.png differ diff --git a/static/icons/component-content-icon.png b/static/icons/component-content-icon.png index b3119671797..dd531df5403 100644 Binary files a/static/icons/component-content-icon.png and b/static/icons/component-content-icon.png differ diff --git a/static/icons/component-datetimepicker-icon.png b/static/icons/component-datetimepicker-icon.png index c0dd5f990d4..d1113012b6f 100644 Binary files a/static/icons/component-datetimepicker-icon.png and b/static/icons/component-datetimepicker-icon.png differ diff --git a/static/icons/component-fab-icon.png b/static/icons/component-fab-icon.png index 2df54e17071..53fabe4ab62 100644 Binary files a/static/icons/component-fab-icon.png and b/static/icons/component-fab-icon.png differ diff --git a/static/icons/component-footer-icon.png b/static/icons/component-footer-icon.png deleted file mode 100755 index ceb1adfb86a..00000000000 Binary files a/static/icons/component-footer-icon.png and /dev/null differ diff --git a/static/icons/component-grid-icon.png b/static/icons/component-grid-icon.png index 7da31a68427..8166b5db194 100644 Binary files a/static/icons/component-grid-icon.png and b/static/icons/component-grid-icon.png differ diff --git a/static/icons/component-header-icon.png b/static/icons/component-header-icon.png deleted file mode 100755 index a802a821eaf..00000000000 Binary files a/static/icons/component-header-icon.png and /dev/null differ diff --git a/static/icons/component-icons-icon.png b/static/icons/component-icons-icon.png index 1e444bc4e3e..ec935d7c2ea 100644 Binary files a/static/icons/component-icons-icon.png and b/static/icons/component-icons-icon.png differ diff --git a/static/icons/component-infinitescroll-icon.png b/static/icons/component-infinitescroll-icon.png index 48e22e86f82..0c63666de5e 100644 Binary files a/static/icons/component-infinitescroll-icon.png and b/static/icons/component-infinitescroll-icon.png differ diff --git a/static/icons/component-input-icon.png b/static/icons/component-input-icon.png index 0063084f3a5..1bf2b9c211f 100644 Binary files a/static/icons/component-input-icon.png and b/static/icons/component-input-icon.png differ diff --git a/static/icons/component-input-otp-icon.png b/static/icons/component-input-otp-icon.png deleted file mode 100644 index 416847abf39..00000000000 Binary files a/static/icons/component-input-otp-icon.png and /dev/null differ diff --git a/static/icons/component-item-icon.png b/static/icons/component-item-icon.png index 44f02dc744d..9055d0fdf5e 100644 Binary files a/static/icons/component-item-icon.png and b/static/icons/component-item-icon.png differ diff --git a/static/icons/component-lists-icon.png b/static/icons/component-lists-icon.png index 9e1fd11ce92..cda91108932 100644 Binary files a/static/icons/component-lists-icon.png and b/static/icons/component-lists-icon.png differ diff --git a/static/icons/component-media-icon.png b/static/icons/component-media-icon.png index 7534e9f6944..3bcc5a70e53 100644 Binary files a/static/icons/component-media-icon.png and b/static/icons/component-media-icon.png differ diff --git a/static/icons/component-menu-icon.png b/static/icons/component-menu-icon.png index 0af47d63cc4..11cfad80d9e 100644 Binary files a/static/icons/component-menu-icon.png and b/static/icons/component-menu-icon.png differ diff --git a/static/icons/component-modal-icon.png b/static/icons/component-modal-icon.png index f6a08144470..a4602cf5e51 100644 Binary files a/static/icons/component-modal-icon.png and b/static/icons/component-modal-icon.png differ diff --git a/static/icons/component-navigation-icon.png b/static/icons/component-navigation-icon.png index e0c808a709c..f00bb4a213d 100644 Binary files a/static/icons/component-navigation-icon.png and b/static/icons/component-navigation-icon.png differ diff --git a/static/icons/component-popover-icon.png b/static/icons/component-popover-icon.png index b71d1acc78c..1cacf053e5a 100644 Binary files a/static/icons/component-popover-icon.png and b/static/icons/component-popover-icon.png differ diff --git a/static/icons/component-progress-icon.png b/static/icons/component-progress-icon.png index 177cd6d2fe5..6cb7d670ad5 100644 Binary files a/static/icons/component-progress-icon.png and b/static/icons/component-progress-icon.png differ diff --git a/static/icons/component-radio-icon.png b/static/icons/component-radio-icon.png index 7d2f543bc94..d91174de224 100644 Binary files a/static/icons/component-radio-icon.png and b/static/icons/component-radio-icon.png differ diff --git a/static/icons/component-range-icon.png b/static/icons/component-range-icon.png index 1001d9c8f17..80235d6f19b 100644 Binary files a/static/icons/component-range-icon.png and b/static/icons/component-range-icon.png differ diff --git a/static/icons/component-refresher-icon.png b/static/icons/component-refresher-icon.png index 174be827811..ec7088121c2 100644 Binary files a/static/icons/component-refresher-icon.png and b/static/icons/component-refresher-icon.png differ diff --git a/static/icons/component-reorder-icon.png b/static/icons/component-reorder-icon.png index b555f66cab6..d49727dadd1 100644 Binary files a/static/icons/component-reorder-icon.png and b/static/icons/component-reorder-icon.png differ diff --git a/static/icons/component-routing-icon.png b/static/icons/component-routing-icon.png index c67b8dfc875..381bedccafe 100644 Binary files a/static/icons/component-routing-icon.png and b/static/icons/component-routing-icon.png differ diff --git a/static/icons/component-searchbar-icon.png b/static/icons/component-searchbar-icon.png index 4341738560d..6dc6a36091f 100644 Binary files a/static/icons/component-searchbar-icon.png and b/static/icons/component-searchbar-icon.png differ diff --git a/static/icons/component-segment-icon.png b/static/icons/component-segment-icon.png index e6902dd129a..f3a01890e1c 100644 Binary files a/static/icons/component-segment-icon.png and b/static/icons/component-segment-icon.png differ diff --git a/static/icons/component-select-icon.png b/static/icons/component-select-icon.png index 7d4a172cd97..4c7258abcbb 100644 Binary files a/static/icons/component-select-icon.png and b/static/icons/component-select-icon.png differ diff --git a/static/icons/component-slides-icon.png b/static/icons/component-slides-icon.png deleted file mode 100644 index b49f725c20a..00000000000 Binary files a/static/icons/component-slides-icon.png and /dev/null differ diff --git a/static/icons/component-toast-icon.png b/static/icons/component-toast-icon.png index d03b6ff898e..5f085bf6a72 100644 Binary files a/static/icons/component-toast-icon.png and b/static/icons/component-toast-icon.png differ diff --git a/static/icons/component-toggle-icon.png b/static/icons/component-toggle-icon.png index 031ef7f1f9e..0077fcf865c 100644 Binary files a/static/icons/component-toggle-icon.png and b/static/icons/component-toggle-icon.png differ diff --git a/static/icons/component-toolbar-icon.png b/static/icons/component-toolbar-icon.png index 3c283abda71..205d9304696 100644 Binary files a/static/icons/component-toolbar-icon.png and b/static/icons/component-toolbar-icon.png differ diff --git a/static/icons/component-typography-icon.png b/static/icons/component-typography-icon.png index c375549eda8..f3ae6697304 100644 Binary files a/static/icons/component-typography-icon.png and b/static/icons/component-typography-icon.png differ diff --git a/static/icons/feature-component-accordion-icon.png b/static/icons/feature-component-accordion-icon.png index 847a1095418..931877cf60e 100644 Binary files a/static/icons/feature-component-accordion-icon.png and b/static/icons/feature-component-accordion-icon.png differ diff --git a/static/icons/feature-component-actionsheet-icon.png b/static/icons/feature-component-actionsheet-icon.png index 994b0e49ece..5a922240b3c 100644 Binary files a/static/icons/feature-component-actionsheet-icon.png and b/static/icons/feature-component-actionsheet-icon.png differ diff --git a/static/icons/feature-component-datetime-icon.png b/static/icons/feature-component-datetime-icon.png index b6838937042..eafaea6a5fc 100644 Binary files a/static/icons/feature-component-datetime-icon.png and b/static/icons/feature-component-datetime-icon.png differ diff --git a/static/icons/feature-component-icons-icon.png b/static/icons/feature-component-icons-icon.png index af1123bceb8..d437bb00a9f 100644 Binary files a/static/icons/feature-component-icons-icon.png and b/static/icons/feature-component-icons-icon.png differ diff --git a/static/icons/feature-component-item-icon.png b/static/icons/feature-component-item-icon.png index c3353db553b..20207f4c23c 100644 Binary files a/static/icons/feature-component-item-icon.png and b/static/icons/feature-component-item-icon.png differ diff --git a/static/icons/feature-component-navigation-icon.png b/static/icons/feature-component-navigation-icon.png index 3cbc522b259..de33068f806 100644 Binary files a/static/icons/feature-component-navigation-icon.png and b/static/icons/feature-component-navigation-icon.png differ diff --git a/static/icons/feature-component-refresher-icon.png b/static/icons/feature-component-refresher-icon.png index 528354fbad0..8091f23f92e 100644 Binary files a/static/icons/feature-component-refresher-icon.png and b/static/icons/feature-component-refresher-icon.png differ diff --git a/static/icons/feature-component-search-icon.png b/static/icons/feature-component-search-icon.png index f0d11cc7874..4e6a0f8191b 100644 Binary files a/static/icons/feature-component-search-icon.png and b/static/icons/feature-component-search-icon.png differ diff --git a/static/icons/feature-component-tabs-icon.png b/static/icons/feature-component-tabs-icon.png index c73c0ffa45c..6fad513f6fb 100644 Binary files a/static/icons/feature-component-tabs-icon.png and b/static/icons/feature-component-tabs-icon.png differ diff --git a/versioned_docs/version-v7/components.md b/versioned_docs/version-v7/components.md index 732b59a43b2..4d1b2cf28a2 100644 --- a/versioned_docs/version-v7/components.md +++ b/versioned_docs/version-v7/components.md @@ -19,14 +19,18 @@ import DocsCards from '@components/global/DocsCards'; `} -Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you’re familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component. +Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](api.md) for a complete list of each component and sub-component. - -

Action Sheets display a set of options with the ability to confirm or cancel an action.

-
+ +

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

+
+ + +

Action Sheets display a set of options with the ability to confirm or cancel an action.

+

Alerts are a great way to offer the user the ability to choose a specific action or list of actions.

@@ -36,6 +40,10 @@ Ionic apps are made of high-level building blocks called Components, which allow

Badges are a small component that typically communicate a numerical value to the user.

+ +

Breadcrumbs are navigation items that are used to indicate where a user is on an app.

+
+

Buttons let your users take action. They're an essential way to interact with and navigate through an app.

@@ -58,7 +66,7 @@ Ionic apps are made of high-level building blocks called Components, which allow

Content is the quintessential way to interact with and navigate through an app.

- +

Date & time pickers are used to present an interface that makes it easy for users to select dates and times.

@@ -66,32 +74,38 @@ Ionic apps are made of high-level building blocks called Components, which allow

Floating action buttons are circular buttons that perform a primary action on a screen.

- -

Beautifully designed icons for use in web, iOS, Android, and desktop apps.

-
-

The grid is a powerful mobile-first system for building custom layouts.

+ +

Beautifully designed icons for use in web, iOS, and Android apps.

+
+

Infinite scroll allows you to load new data as the user scrolls through your app.

- +

Inputs provides a way for users to enter data in your app.

- -

Items are an all-purpose UI container that can be used as part of a list.

+ +

+ Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. + Items can be swiped, deleted, reordered, edited, and more. +

Lists can display rows of information, such as a contact list, playlist, or menu.

- -

Navigation is how users move between different pages in your app.

+ +

+ A collection of media components, including avatars, icons, images, and thumbnails, designed to enhance visual + content. +

@@ -102,6 +116,10 @@ Ionic apps are made of high-level building blocks called Components, which allow

Modals slide in and off screen to display a temporary UI and are often used for login or sign-up pages.

+ +

Navigation is how users move between different pages in your app.

+
+

Popover provides an easy way to present information or options without changing contexts.

@@ -114,12 +132,12 @@ Ionic apps are made of high-level building blocks called Components, which allow

Radio inputs allow you to present a set of exclusive options.

- -

Refresher provides pull-to-refresh functionality on a content component.

+ +

Range sliders let users select a value by dragging a knob along a track.

- -

Searchbar is used to search or filter items, usually from a toolbar.

+ +

Refresher provides pull-to-refresh functionality on a content component.

@@ -130,6 +148,10 @@ Ionic apps are made of high-level building blocks called Components, which allow

Routing allows navigation based on the current path.

+ +

Searchbar is used to search or filter items, usually from a toolbar.

+
+

Segments provide a set of exclusive buttons that can be used as a filter or view switcher.

@@ -143,14 +165,18 @@ Ionic apps are made of high-level building blocks called Components, which allow
-

Toast is used to show a notification over the top of an app's content. It can be temporary or dismissible.

+

Toasts are subtle notifications that appear over your app's content without interrupting user interaction.

Toggles are an input for binary options, often used for options and switches.

- -

Toolbars are used to house information and actions relating to your app.

-
+ +

Toolbars are used to house information and actions relating to your app.

+
+ + +

Text is used to style or change the color of text within an application.

+
diff --git a/versioned_sidebars/version-v7-sidebars.json b/versioned_sidebars/version-v7-sidebars.json index 0f8d95b1b72..a0fa29d70cf 100644 --- a/versioned_sidebars/version-v7-sidebars.json +++ b/versioned_sidebars/version-v7-sidebars.json @@ -276,19 +276,19 @@ }, { "type": "category", - "label": "Action Sheet", + "label": "Accordion", "collapsed": false, "items": [ - "api/action-sheet" + "api/accordion", + "api/accordion-group" ] }, { "type": "category", - "label": "Accordion", + "label": "Action Sheet", "collapsed": false, "items": [ - "api/accordion", - "api/accordion-group" + "api/action-sheet" ] }, { @@ -309,7 +309,7 @@ }, { "type": "category", - "label": "Breadcrumb", + "label": "Breadcrumbs", "collapsed": false, "items": [ "api/breadcrumb", @@ -394,24 +394,24 @@ }, { "type": "category", - "label": "Infinite Scroll", + "label": "Icons", "collapsed": false, "items": [ - "api/infinite-scroll", - "api/infinite-scroll-content" + "api/icon" ] }, { "type": "category", - "label": "Icons", + "label": "Infinite Scroll", "collapsed": false, "items": [ - "api/icon" + "api/infinite-scroll", + "api/infinite-scroll-content" ] }, { "type": "category", - "label": "Input", + "label": "Inputs", "collapsed": false, "items": [ "api/input",