Skip to content

docs(component): added missing components #4186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

docs(component): added missing components #4186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9955fd4
docs(component): added missing components
joesphchang Jul 9, 2025
d4c5cda
docs(components): updated descriptions on components
joesphchang Jul 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 40 additions & 17 deletions docs/components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,14 @@ Ionic apps are made of high-level building blocks called Components, which allow
<intro-end />

<DocsCards>
<DocsCard header="Action Sheet" href="api/action-sheet" img="/icons/feature-component-actionsheet-icon.png">
<p>Action Sheets display a set of options with the ability to confirm or cancel an action.</p>
<DocsCard header="Accordion" href="api/accordion" img="/icons/feature-component-accordion-icon.png">
<p>Accordions provide collapsible sections in your content.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<p>Accordions provide collapsible sections in your content.</p>
<p>Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information.</p>

</DocsCard>

<DocsCard header="Action Sheet" href="api/action-sheet" icon="/icons/component-action-sheet-icon.png">
<p>Action Sheets display a set of options with the ability to confirm or cancel an action.</p>
</DocsCard>

<DocsCard header="Alert" href="api/alert" icon="/icons/component-alert-icon.png">
<p>Alerts are a great way to offer the user the ability to choose a specific action or list of actions.</p>
</DocsCard>
Expand All @@ -36,6 +40,10 @@ Ionic apps are made of high-level building blocks called Components, which allow
<p>Badges are a small component that typically communicate a numerical value to the user.</p>
</DocsCard>

<DocsCard header="Breadcrumbs" href="api/breadcrumbs" icon="/icons/component-breadcrumbs-icon.png">
<p>Breadcrumbs are navigation items that are used to indicate where a user is on an app.</p>
</DocsCard>

<DocsCard header="Button" href="api/button" icon="/icons/component-button-icon.png">
<p>Buttons let your users take action. They're an essential way to interact with and navigate through an app.</p>
</DocsCard>
Expand All @@ -57,22 +65,22 @@ Ionic apps are made of high-level building blocks called Components, which allow
<p>Content is the quintessential way to interact with and navigate through an app.</p>
</DocsCard>

<DocsCard header="Date & Time Pickers" href="api/datetime" icon="/icons/component-datetimepicker-icon.png">
<DocsCard header="Date & Time Pickers" href="api/datetime" img="/icons/feature-component-datetime-icon.png">
<p>Date & time pickers are used to present an interface that makes it easy for users to select dates and times.</p>
</DocsCard>

<DocsCard header="Floating Action Button" href="api/fab" icon="/icons/component-fab-icon.png">
<p>Floating action buttons are circular buttons that perform a primary action on a screen.</p>
</DocsCard>

<DocsCard header="Icons" href="api/icon" img="/icons/feature-component-icons-icon.png">
<p>Beautifully designed icons for use in web, iOS, and Android apps.</p>
</DocsCard>

<DocsCard header="Grid" href="api/grid" icon="/icons/component-grid-icon.png">
<p>The grid is a powerful mobile-first system for building custom layouts.</p>
</DocsCard>

<DocsCard header="Icon" href="api/icon" icon="/icons/component-icons-icon.png">
<p>Beautifully designed icons for use in web, iOS, and Android apps.</p>
</DocsCard>

<DocsCard header="Infinite Scroll" href="api/infinite-scroll" icon="/icons/component-infinitescroll-icon.png">
<p>Infinite scroll allows you to load new data as the user scrolls through your app.</p>
</DocsCard>
Expand All @@ -81,16 +89,19 @@ Ionic apps are made of high-level building blocks called Components, which allow
<p>Inputs provides a way for users to enter data in your app.</p>
</DocsCard>

<DocsCard header="Item" href="api/item" icon="/icons/component-item-icon.png">
<DocsCard header="Item" href="api/item" img="/icons/feature-component-item-icon.png">
<p>Items are an all-purpose UI container that can be used as part of a list.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<p>Items are an all-purpose UI container that can be used as part of a list.</p>
<p>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.</p>

</DocsCard>

<DocsCard header="List" href="api/list" icon="/icons/component-lists-icon.png">
<p>Lists can display rows of information, such as a contact list, playlist, or menu.</p>
</DocsCard>

<DocsCard header="Navigation" href="api/nav" img="/icons/feature-component-navigation-icon.png">
<p>Navigation is how users move between different pages in your app.</p>
<DocsCard header="Media" href="api/avatar" icon="/icons/component-media-icon.png">
<p>
Media refers to a collection of Ionic's media-related components like ion-avatar, ion-img, ion-icon, and
ion-thumbnail.
Comment on lines +102 to +103
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Media refers to a collection of Ionic's media-related components like ion-avatar, ion-img, ion-icon, and
ion-thumbnail.
A collection of media components, including avatars, icons, images, and thumbnails, designed to
enhance visual content.

</p>
</DocsCard>

<DocsCard header="Menu" href="api/menu" icon="/icons/component-menu-icon.png">
Expand All @@ -101,6 +112,14 @@ Ionic apps are made of high-level building blocks called Components, which allow
<p>Modals slide in and off screen to display a temporary UI and are often used for login or sign-up pages.</p>
</DocsCard>

<DocsCard header="Navigation" href="api/menu" icon="/icons/component-navigation-icon.png">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<DocsCard header="Navigation" href="api/menu" icon="/icons/component-navigation-icon.png">
<DocsCard header="Navigation" href="api/nav" icon="/icons/component-navigation-icon.png">

<p>Navigation is how users move between different pages in your app.</p>
</DocsCard>

<DocsCard header="OTP Input" href="api/input-otp" icon="/icons/component-input-otp-icon.png">
<p>Input OTP component simplifies entering one-time passwords with a customizable, multi-box interface.</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<p>Input OTP component simplifies entering one-time passwords with a customizable, multi-box interface.</p>
<p>OTP inputs offer a simple way to enter one-time passwords using multiple boxes with automatic focus.</p>

</DocsCard>

<DocsCard header="Popover" href="api/popover" icon="/icons/component-popover-icon.png">
<p>Popover provides an easy way to present information or options without changing contexts.</p>
</DocsCard>
Expand All @@ -113,14 +132,10 @@ Ionic apps are made of high-level building blocks called Components, which allow
<p>Radio inputs allow you to present a set of exclusive options.</p>
</DocsCard>

<DocsCard header="Refresher" href="api/refresher" icon="/icons/component-refresher-icon.png">
<DocsCard header="Refresher" href="api/refresher" img="/icons/feature-component-refresher-icon.png">
<p>Refresher provides pull-to-refresh functionality on a content component.</p>
</DocsCard>

<DocsCard header="Searchbar" href="api/searchbar" img="/icons/feature-component-search-icon.png">
<p>Searchbar is used to search or filter items, usually from a toolbar.</p>
</DocsCard>

<DocsCard header="Reorder" href="api/reorder" icon="/icons/component-reorder-icon.png">
<p>Reorder lets users drag and drop to reorder a list of items.</p>
</DocsCard>
Expand All @@ -129,6 +144,10 @@ Ionic apps are made of high-level building blocks called Components, which allow
<p>Routing allows navigation based on the current path.</p>
</DocsCard>

<DocsCard header="Searchbar" href="api/searchbar" icon="/icons/component-searchbar-icon.png">
<p>Searchbar is used to search or filter items, usually from a toolbar.</p>
</DocsCard>

<DocsCard header="Segment" href="api/segment" icon="/icons/component-segment-icon.png">
<p>Segments provide a set of exclusive buttons that can be used as a filter or view switcher.</p>
</DocsCard>
Expand All @@ -149,7 +168,11 @@ Ionic apps are made of high-level building blocks called Components, which allow
<p>Toggles are an input for binary options, often used for options and switches.</p>
</DocsCard>

<DocsCard header="Toolbar" href="api/toolbar" icon="/icons/component-toolbar-icon.png">
<p>Toolbars are used to house information and actions relating to your app.</p>
<DocsCard header="Toolbar" href="api/toolbar" icon="/icons/component-toolbar-icon.png">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are some of these not indented? Is the linter messing it up?

<p>Toolbars are used to house information and actions relating to your app.</p>
</DocsCard>

<DocsCard header="Typography" href="api/text" icon="/icons/component-typography-icon.png">
<p>Text is used to style or change the color of text within an application.</p>
</DocsCard>
</DocsCards>
Binary file added static/icons/component-action-sheet-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/icons/component-breadcrumbs-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/icons/component-icons-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/icons/component-input-otp-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified static/icons/component-media-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/icons/component-navigation-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/icons/component-searchbar-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified static/icons/component-typography-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/icons/feature-component-accordion-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/icons/feature-component-datetime-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/icons/feature-component-item-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added static/icons/feature-component-refresher-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.