BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Ionic 6コンポーネントフレームワークの紹介

Ionic 6コンポーネントフレームワークの紹介

ブックマーク

原文(投稿日:2022/01/13)へのリンク

クロスプラットフォームアプリケーション開発用のUIフレームワークであるIonicは、6回目のイテレーションでリリースされた。Android、iOS、デスクトップアプリケーション向けに一連の新しいコンポーネントとより優れたUI統合を提供する。

Ionicフレームワークにより、最新のWebテクノロジーを利用して、開発者がクロスプラットフォームアプリケーションを構築できるようになる。Web、デスクトップ(Electronを使用)、ネイティブモバイルアプリケーション(Capacitorを使用)のいずれかに公開できる。

各プラットフォームには独自の設計言語があるため、Ionicコンポーネントはユーザのプラットフォームに応じて表示を調整する。

コンポーネント設計がターゲットプラットフォームの設計言語と厳密に一致するようにするために、このリリース以降、IonicはiOSとAndroidのリリースにマッチする年間リリースサイクルに移行する。

Ionicは、このリリースで3つの新しいコンポーネントを導入した。

Accordionコンポーネントは、開発者が大量のコンテンツをカテゴリに整理するのに役立ちます。カテゴリごとにユーザは表示/非表示にすることができる。

Breadcrumbsコンポーネントは、深い階層型ナビゲーションを含む大規模なアプリケーションを対象としている。このアプリケーションは、ユーザがアプリケーション内で自分自身を方向付ける助けとなるものである。

最後に、IonicはBottom Sheetと呼ばれる新しいModalコンポーネントを導入した。これにより、開発者はユーザ定義の位置にスナップする動的オーバーレイを作成できるようになる。

Ionic 6で、既存のコンポーネントがいくつかの改善された。

Ionic Datetimeコンポーネントは、待望のオーバーホールを受けた。現在のiOSとAndroidのスタイルに合わせての調整と共に、スクリーンリーダーをサポートするデスクトップでの機能が改善された。最後に、Datetimeコンポーネントにより、ユーザ言語とリージョン設定に基づいて、date/timeフォーマットが自動的に選択される。

モーダルコンポーネントとポップオーバーコンポーネントの両方を、アプリケーションテンプレート内で宣言的に使用できるようになった。これは、ユーザがion-modalやion-popoverを使って、ブール値を新しいis-openプロパティに渡したり、あるいはイベントをトリガープロパティに渡すことができることを意味する。

<ion-button id="modal-button">Open Modal</ion-modal>
<ion-modal trigger="modal-button">
  modal content
</ion-modal>

or

<ion-popover is-open="true">
  pop-over content
</ion-popover>

開発者はtriggerプロパティを使うために要素IDを提供する必要がある。一般的にシンプルなユースケースを対象としていることに注意してください。is-openプロパティにより柔軟性は高まるが、開発者はユーザの操作に基づいてブール値を手動で設定する必要がある。

このリリースでは、多くのコンポーネントのAndroidスタイルも刷新され、マテリアルデザインのスタイルにマッチするようになった。filledoutlineのバリエーションもサポートする。

開発者は、Ionicブログ変更ログでこのリリースの詳細を確認できる。

Ionic 6の大きな変更の一覧すべては、Ionic Githubリポジトリにある。

Ionicは、MITライセンスの下で利用可能なオープンソースソフトウェアである。

作者について

この記事に星をつける

おすすめ度
スタイル

BT