Skip to main content
Version: v8

UIコンポーネント

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 for a complete list of each component and sub-component.

Accordion

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

Action Sheet

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

Alert

Alertは、特定のアクションまたはアクションのリストを選択する機能を、ユーザーに提供するための優れた方法です。

Badge

Badgeコンポーネントは、通常は数値をユーザーに伝えるための小さなコンポーネントです。

Breadcrumbs

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

Button

Buttonを使ってユーザが行動を起こせます。アプリと対話したり、移動したりするのに不可欠な方法です。

Card

Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more.

Checkbox

Checkboxを使用して、択一の決定をする必要があることをユーザーに知らせることができます。

Chip

チップはデータやアクションを表示するためのコンパクトな方法です。

Content

コンテンツは、アプリと対話してアプリをナビゲートするための典型的な方法です。

Date & Time Pickers

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

Floating Action Button

フローティングアクションボタン(FAB)は、画面上で主要な、または最も一般的なアクションを実行する円形のボタンです。

Grid

Gridはカスタムレイアウトを構築するための強力なモバイルファーストシステムです。

Icons

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

Infinite Scroll

Infinite scrollは、ユーザーがアプリをスクロールするときに新しいデータを読み込むことができます。

Inputs

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

Item

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.

List

Listは、連絡先リスト、再生リスト、メニューなどの情報の行を表示できます。

Media

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

Menu

Menuは一般的なナビゲーションパターンです。それらは常時画面上に表示することも、必要に応じて表示することもできます。

Modal

Modalはは、一時的なUIを表示するために画面内および画面外にスライドするため、ログインページまたはサインアップページによく使用されます。

Navigation

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

Popover

Popoverは、コンテキストを変えずに情報やオプションを提示する簡単な方法を提供します。

Progress Indicators

Progress indicatorsは、操作またはアクティビティの進行状況を視覚化します。

Radio

Radio inputsはあなたが排他的なオプションのセットを提示することを可能にします。

Range

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

Refresher

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

Reorder

Reorderを使用すると、ユーザーはドラッグアンドドロップでアイテムのリストを並べ替えることができます。

Routing

Routingは現在のpathに基づいてナビゲーションを可能にします。

Searchbar

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

Segment

Segmentsは、フィルターまたはViewの切り替えとして使用できる一連の専用ボタンを提供します。

Select

SelectはネイティブのHTML選択に似ていますが、Sortと選択が少し改善されています。

Tabs

Tabsを使用すると、タブ付きナビゲーション、つまり現代のアプリケーションの標準的なナビゲーションパターンが有効になります。

Toast

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

Toggle

Togglesは択一のInputでありオプションやスイッチによく使われます。

Toolbar

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

Typography

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