"use strict";(self.webpackChunkionic_docs=self.webpackChunkionic_docs||[]).push([[82064],{3905:(e,n,o)=>{o.d(n,{Zo:()=>l,kt:()=>h});var t=o(67294);function a(e,n,o){return n in e?Object.defineProperty(e,n,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[n]=o,e}function r(e,n){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);n&&(t=t.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),o.push.apply(o,t)}return o}function i(e){for(var n=1;n<arguments.length;n++){var o=null!=arguments[n]?arguments[n]:{};n%2?r(Object(o),!0).forEach((function(n){a(e,n,o[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):r(Object(o)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(o,n))}))}return e}function c(e,n){if(null==e)return{};var o,t,a=function(e,n){if(null==e)return{};var o,t,a={},r=Object.keys(e);for(t=0;t<r.length;t++)o=r[t],n.indexOf(o)>=0||(a[o]=e[o]);return a}(e,n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(t=0;t<r.length;t++)o=r[t],n.indexOf(o)>=0||Object.prototype.propertyIsEnumerable.call(e,o)&&(a[o]=e[o])}return a}var s=t.createContext({}),p=function(e){var n=t.useContext(s),o=n;return e&&(o="function"==typeof e?e(n):i(i({},n),e)),o},l=function(e){var n=p(e.components);return t.createElement(s.Provider,{value:n},e.children)},d="mdxType",m={inlineCode:"code",wrapper:function(e){var n=e.children;return t.createElement(t.Fragment,{},n)}},u=t.forwardRef((function(e,n){var o=e.components,a=e.mdxType,r=e.originalType,s=e.parentName,l=c(e,["components","mdxType","originalType","parentName"]),d=p(o),u=a,h=d["".concat(s,".").concat(u)]||d[u]||m[u]||r;return o?t.createElement(h,i(i({ref:n},l),{},{components:o})):t.createElement(h,i({ref:n},l))}));function h(e,n){var o=arguments,a=n&&n.mdxType;if("string"==typeof e||a){var r=o.length,i=new Array(r);i[0]=u;var c={};for(var s in n)hasOwnProperty.call(n,s)&&(c[s]=n[s]);c.originalType=e,c[d]="string"==typeof e?e:a,i[1]=c;for(var p=2;p<r;p++)i[p]=o[p];return t.createElement.apply(null,i)}return t.createElement.apply(null,o)}u.displayName="MDXCreateElement"},34428:(e,n,o)=>{o.d(n,{Z:()=>s});var t=o(67294),a=o(86010),r=o(39960),i=o(44996);const c="card_hPMa";const s=function(e){const n=void 0===e.href,o=void 0!==e.href&&/^http/.test(e.href),s="undefined"===e.header?null:t.createElement("header",{className:"Card-header"},e.header),p=e.hoverIcon||e.icon,l=t.createElement(t.Fragment,null,e.img&&t.createElement("img",{src:(0,i.Z)(e.img),className:"Card-image"}),t.createElement("div",{className:"Card-container"},(e.icon||p)&&t.createElement("div",{className:"Card-icon-row"},e.icon&&t.createElement("img",{src:(0,i.Z)(e.icon),className:"Card-icon Card-icon-default"}),p&&t.createElement("img",{src:(0,i.Z)(p),className:"Card-icon Card-icon-hover"})),e.ionicon&&t.createElement("ion-icon",{name:e.ionicon,className:"Card-ionicon"}),e.iconset&&t.createElement("div",{className:"Card-iconset__container"},e.iconset.split(",").map(((n,o)=>t.createElement("img",{src:(0,i.Z)(n),className:"Card-icon "+(o===e.activeIndex?"Card-icon-active":""),"data-index":o,key:o})))),e.header&&s,t.createElement("div",{className:"Card-content"},e.children))),d=(0,a.Z)({"Card-with-image":void 0!==e.img,"Card-without-image":void 0===e.img,"Card-size-lg":"lg"===e.size,[e.className]:e.className});return n?t.createElement("docs-card",{class:d},t.createElement("div",{className:(0,a.Z)(c,"docs-card")},l)):o?t.createElement("docs-card",{class:d},t.createElement("a",{className:(0,a.Z)(c,"docs-card"),href:e.href,target:"_blank"},l)):t.createElement("docs-card",{class:d},t.createElement(r.Z,{to:e.href,className:(0,a.Z)(c,"docs-card")},l))}},53445:(e,n,o)=>{o.d(n,{Z:()=>a});var t=o(67294);const a=function(e){return t.createElement("docs-cards",{class:e.className},e.children)}},80272:(e,n,o)=>{o.r(n),o.d(n,{assets:()=>l,contentTitle:()=>s,default:()=>h,frontMatter:()=>c,metadata:()=>p,toc:()=>d});var t=o(87462),a=(o(67294),o(3905)),r=o(34428),i=o(53445);const c={title:"UI Components",description:"Ionic Framework comes stock with a number of high-level UI components, including cards, lists, and tabs to quickly and easily build your app's user interface.",hide_table_of_contents:!0},s=void 0,p={unversionedId:"components",id:"version-v5/components",title:"UI Components",description:"Ionic Framework comes stock with a number of high-level UI components, including cards, lists, and tabs to quickly and easily build your app's user interface.",source:"@site/versioned_docs/version-v5/components.md",sourceDirName:".",slug:"/components",permalink:"/docs/v5/components",draft:!1,editUrl:"https://github.com/ionic-team/ionic-docs/edit/main/versioned_docs/version-v5/components.md",tags:[],version:"v5",frontMatter:{title:"UI Components",description:"Ionic Framework comes stock with a number of high-level UI components, including cards, lists, and tabs to quickly and easily build your app's user interface.",hide_table_of_contents:!0},sidebar:"version-v5/api",next:{title:"ion-action-sheet",permalink:"/docs/v5/api/action-sheet"}},l={},d=[],m={toc:d},u="wrapper";function h(e){let{components:n,...o}=e;return(0,a.kt)(u,(0,t.Z)({},m,o,{components:n,mdxType:"MDXLayout"}),(0,a.kt)("head",null,(0,a.kt)("title",null,"UI Components | User Interface Application Building Components"),(0,a.kt)("meta",{name:"description",content:"Ionic Framework comes stock with a number of high-level UI components, including cards, lists, and tabs to quickly and easily build your app's user interface."}),(0,a.kt)("style",null,"\n    :root {\n      --doc-item-container-width: 60rem;\n    }\n  ")),(0,a.kt)("p",null,"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\u2019re familiar with the basics, refer to the ",(0,a.kt)("a",{parentName:"p",href:"/docs/v5/api"},"API Index")," for a complete list of each component and sub-component."),(0,a.kt)("intro-end",null),(0,a.kt)(i.Z,{mdxType:"DocsCards"},(0,a.kt)(r.Z,{header:"Action Sheet",href:"api/action-sheet",img:"/icons/feature-component-actionsheet-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Action Sheets display a set of options with the ability to confirm or cancel an action.")),(0,a.kt)(r.Z,{header:"Alert",href:"api/alert",icon:"/icons/component-alert-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Alerts are a great way to offer the user the ability to choose a specific action or list of actions.")),(0,a.kt)(r.Z,{header:"Badge",href:"api/badge",icon:"/icons/component-badge-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Badges are a small component that typically communicate a numerical value to the user.")),(0,a.kt)(r.Z,{header:"Button",href:"api/button",icon:"/icons/component-button-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Buttons let your users take action. They're an essential way to interact with and navigate through an app.")),(0,a.kt)(r.Z,{header:"Card",href:"api/card",icon:"/icons/component-card-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.")),(0,a.kt)(r.Z,{header:"Checkbox",href:"api/checkbox",icon:"/icons/component-checkbox-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Checkboxes can be used to let the user know they need to make a binary decision.")),(0,a.kt)(r.Z,{header:"Chip",href:"api/chip",icon:"/icons/component-chip-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Chips are a compact way to display data or actions.")),(0,a.kt)(r.Z,{header:"Content",href:"api/content",icon:"/icons/component-content-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Content is the quintessential way to interact with and navigate through an app.")),(0,a.kt)(r.Z,{header:"Date & Time Pickers",href:"api/datetime",icon:"/icons/component-datetimepicker-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Date & time pickers are used to present an interface that makes it easy for users to select dates and times.")),(0,a.kt)(r.Z,{header:"Floating Action Button",href:"api/fab",icon:"/icons/component-fab-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Floating action buttons are circular buttons that perform a primary action on a screen.")),(0,a.kt)(r.Z,{header:"Icons",href:"https://ionic.io/ionicons",img:"/icons/feature-component-icons-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Beautifully designed icons for use in web, iOS, Android, and desktop apps.")),(0,a.kt)(r.Z,{header:"Grid",href:"api/grid",icon:"/icons/component-grid-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"The grid is a powerful mobile-first system for building custom layouts.")),(0,a.kt)(r.Z,{header:"Infinite Scroll",href:"api/infinite-scroll",icon:"/icons/component-infinitescroll-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Infinite scroll allows you to load new data as the user scrolls through your app.")),(0,a.kt)(r.Z,{header:"Input",href:"api/input",icon:"/icons/component-input-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Inputs provides a way for users to enter data in your app.")),(0,a.kt)(r.Z,{header:"Item",href:"api/item",icon:"/icons/component-item-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Items are an all-purpose UI container that can be used as part of a list.")),(0,a.kt)(r.Z,{header:"List",href:"api/list",icon:"/icons/component-lists-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Lists can display rows of information, such as a contact list, playlist, or menu.")),(0,a.kt)(r.Z,{header:"Navigation",href:"api/nav",img:"/icons/feature-component-navigation-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Navigation is how users move between different pages in your app.")),(0,a.kt)(r.Z,{header:"Menu",href:"api/menu",icon:"/icons/component-menu-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Menus are a common navigation pattern. They can be permanently on-screen, or revealed when needed.")),(0,a.kt)(r.Z,{header:"Modal",href:"api/modal",icon:"/icons/component-modal-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Modals slide in and off screen to display a temporary UI and are often used for login or sign-up pages.")),(0,a.kt)(r.Z,{header:"Popover",href:"api/popover",icon:"/icons/component-popover-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Popover provides an easy way to present information or options without changing contexts.")),(0,a.kt)(r.Z,{header:"Progress Indicators",href:"api/progress-bar",icon:"/icons/component-progress-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Progress indicators visualize the progression of an operation or activity.")),(0,a.kt)(r.Z,{header:"Radio",href:"api/radio",icon:"/icons/component-radio-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Radio inputs allow you to present a set of exclusive options.")),(0,a.kt)(r.Z,{header:"Refresher",href:"api/refresher",icon:"/icons/component-refresher-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Refresher provides pull-to-refresh functionality on a content component.")),(0,a.kt)(r.Z,{header:"Searchbar",href:"api/searchbar",img:"/icons/feature-component-search-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Searchbar is used to search or filter items, usually from a toolbar.")),(0,a.kt)(r.Z,{header:"Reorder",href:"api/reorder",icon:"/icons/component-reorder-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Reorder lets users drag and drop to reorder a list of items.")),(0,a.kt)(r.Z,{header:"Routing",href:"api/router",icon:"/icons/component-routing-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Routing allows navigation based on the current path.")),(0,a.kt)(r.Z,{header:"Segment",href:"api/segment",icon:"/icons/component-segment-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Segments provide a set of exclusive buttons that can be used as a filter or view switcher.")),(0,a.kt)(r.Z,{header:"Select",href:"api/select",icon:"/icons/component-select-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Select is similar to the native HTML select, with a few improvements to sorting and selecting.")),(0,a.kt)(r.Z,{header:"Slides",href:"api/slides",icon:"/icons/component-slides-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Slides make it easy to create complex UI such as galleries, tutorials, and page-based layouts.")),(0,a.kt)(r.Z,{header:"Tabs",href:"api/tabs",img:"/icons/feature-component-tabs-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Tabs enable tabbed navigation, a standard navigation pattern in modern apps.")),(0,a.kt)(r.Z,{header:"Toast",href:"api/toast",icon:"/icons/component-toast-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Toast is used to show a notification over the top of an app's content. It can be temporary or dismissible.")),(0,a.kt)(r.Z,{header:"Toggle",href:"api/toggle",icon:"/icons/component-toggle-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Toggles are an input for binary options, often used for options and switches.")),(0,a.kt)(r.Z,{header:"Toolbar",href:"api/toolbar",icon:"/icons/component-toolbar-icon.png",mdxType:"DocsCard"},(0,a.kt)("p",null,"Toolbars are used to house information and actions relating to your app."))))}h.isMDXComponent=!0}}]);