Skip to content

docs(components): update main components page to match sidebar sections #4195

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

Merged
merged 2 commits into from
Jul 16, 2025
Merged

docs(components): update main components page to match sidebar sections #4195

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
eb04f62
docs(components): add range, remove input otp and update headers to m…
brandyscarney Jul 15, 2025
20b2684
docs(components): improve toast description
brandyscarney Jul 16, 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
19 changes: 10 additions & 9 deletions docs/components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import DocsCards from '@components/global/DocsCards';
`}</style>
</head>

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.

<intro-end />

Expand Down Expand Up @@ -49,8 +49,9 @@ Ionic apps are made of high-level building blocks called Components, which allow
</DocsCard>

<DocsCard header="Card" href="api/card" icon="/icons/component-card-icon.png">
<!-- prettier-ignore -->
<p>Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.</p>
<p>
Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.
</p>
</DocsCard>

<DocsCard header="Checkbox" href="api/checkbox" icon="/icons/component-checkbox-icon.png">
Expand Down Expand Up @@ -85,7 +86,7 @@ Ionic apps are made of high-level building blocks called Components, which allow
<p>Infinite scroll allows you to load new data as the user scrolls through your app.</p>
</DocsCard>

<DocsCard header="Input" href="api/input" icon="/icons/component-input-icon.png">
<DocsCard header="Inputs" href="api/input" icon="/icons/component-input-icon.png">
<p>Inputs provides a way for users to enter data in your app.</p>
</DocsCard>

Expand Down Expand Up @@ -119,10 +120,6 @@ Ionic apps are made of high-level building blocks called Components, which allow
<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>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 @@ -135,6 +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="Range" href="api/range" icon="/icons/component-range-icon.png">
<p>Range sliders let users select a value by dragging a knob along a track.</p>
</DocsCard>

<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>
Expand Down Expand Up @@ -164,7 +165,7 @@ Ionic apps are made of high-level building blocks called Components, which allow
</DocsCard>

<DocsCard header="Toast" href="api/toast" icon="/icons/component-toast-icon.png">
<p>Toast is used to show a notification over the top of an app's content. It can be temporary or dismissible.</p>
<p>Toasts are subtle notifications that appear over your app's content without interrupting user interaction.</p>
</DocsCard>

<DocsCard header="Toggle" href="api/toggle" icon="/icons/component-toggle-icon.png">
Expand Down
20 changes: 10 additions & 10 deletions sidebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,15 +252,15 @@ module.exports = {
},
{
type: 'category',
label: 'Action Sheet',
label: 'Accordion',
collapsed: false,
items: ['api/action-sheet'],
items: ['api/accordion', 'api/accordion-group'],
},
{
type: 'category',
label: 'Accordion',
label: 'Action Sheet',
collapsed: false,
items: ['api/accordion', 'api/accordion-group'],
items: ['api/action-sheet'],
},
{
type: 'category',
Expand All @@ -276,7 +276,7 @@ module.exports = {
},
{
type: 'category',
label: 'Breadcrumb',
label: 'Breadcrumbs',
collapsed: false,
items: ['api/breadcrumb', 'api/breadcrumbs'],
},
Expand Down Expand Up @@ -337,19 +337,19 @@ module.exports = {
},
{
type: 'category',
label: 'Infinite Scroll',
label: 'Icons',
collapsed: false,
items: ['api/infinite-scroll', 'api/infinite-scroll-content'],
items: ['api/icon'],
},
{
type: 'category',
label: 'Icons',
label: 'Infinite Scroll',
collapsed: false,
items: ['api/icon'],
items: ['api/infinite-scroll', 'api/infinite-scroll-content'],
},
{
type: 'category',
label: 'Input',
label: 'Inputs',
collapsed: false,
items: ['api/input', 'api/input-password-toggle', 'api/input-otp', 'api/textarea'],
},
Expand Down
Loading