BT

InfoQ ホームページ ニュース Ionic 5リリースはiOS 13との一貫性、Angular Ivyをサポート

Ionic 5リリースはiOS 13との一貫性、Angular Ivyをサポート

ブックマーク

原文(投稿日:2020/04/07)へのリンク

最近のIonic 5リリースでは、iOS 13スタイルのサポート、新しいカスタムアニメーションAPI、および改善されたIoniconアイコンセットが追加されている。

iOS 13のリリースでは、デザインに多くの変更が加えられ、Ionicはこれらのデザインの改良に対するサポートを提供する。例えば、セグメント、折りたたみ可能なヘッダー、大きなタイトルの折りたたみ、小さなタイトルの折りたたみ、モーダル、メニューオーバーレイ、リフレッシャー、リストヘッダーコンポーネントがある。これらの変更の一部は表面的なものだが、他にもIonic 4からの重大な変更を導入する動作の変更につながるものもあった。

Ionic 5には重大な変更があるが、アップグレードパスは簡単である。

Ionic 5リリースでは、フレームワークで作成されたアプリケーションのデザインエクスペリエンスに多くの改善が加えられている。その改善は、洗練されたデフォルトのカラーパレットから新しいスターターコンポーネントまであり、それによってIonicが使いやすくなっている。Ionic 5では、CSS変数、Shadow DOM、Shadow Partsの初期サポートを通じてスタイルを簡単にカスタマイズできるように改善も行われている。W3C Shadow Partsワーキングドラフトの推奨事項で次のように説明されている。

Shadow DOMを使用すると、作成者はページを「コンポーネント」に分離できます。つまり、マークアップのサブツリーで表され、詳細が外部ページではなくコンポーネント自体にのみ関連付けられます。これにより、ページのある部分に適用するスタイルが誤って過剰に適用され、ページの別の部分が誤って見えてしまう可能性が低くなります。ただし、このスタイルの障壁により、ページがコンポーネントと実際にやり取りしたいときに、コンポーネントとのやり取りも難しくなります。

この仕様は、::part()疑似要素を定義します。これにより、作成者は外部ページのコンテキストからシャドウツリー内の意図的に公開された特定の要素のスタイルを設定できます。カスタムプロパティと組み合わせて、外部ページが特定の値(テーマの色など)をコンポーネントに渡して、コンポーネントとやり取りできるようにします。これらの疑似要素により、コンポーネントと外部ページが安全で強力な方法でやり取りできるようになります。すべての制御を放棄せずにカプセル化を維持できるようになります。

Ionic 5は、Shadow DOMとShadow Partsを活用するためにいくつかのIonicコンポーネントを変換しただけでなく、IonicテーマとCSS変数をカスタマイズするアプローチを改善し、ダークモードのサポートを有効となっている。

Angularを活用するIonicユーザ向けに、Ionic 5は、待望の新しいAngularコンポーネントレンダリングアプローチであり、Angular 9の一部としてリリースされたAngular Ivyの完全なサポートを追加している。

Ionic 5は、新しいバージョンのIoniconのサポートを追加している。これは、オープンソースアイコンの豊富なコレクションであり、SVGおよびWebフォント形式でWeb、iOS、Android、デスクトップアプリで使用される。開発者は、Ionicフレームワークから独立したIoniconを使用できる。

Ionicon

全ての更新リストを確認するには、Ionic開発者はIonic 5 リリースノート移行ガイド重大な変更の完全なリストを確認する必要がある。

Ionicは、当初Angularのフレームワークとして作成されたが、Reactを活用する開発者をサポートするようになり、IonicのVue.jsインテグレーションは現在ベータ版である。

Ionic Frameworkは、MITライセンスの下で利用可能なオープンソースソフトウェアである。コントリビューションとフィードバックはIonic GitHubプロジェクトを通じて奨励されており、Ionicコントリビューションガイドライン行動規範に従う必要がある。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT

あなたのプロファイルは最新ですか?プロフィールを確認してアップデートしてください。

Eメールを変更すると確認のメールが配信されます。

会社名:
役職:
組織規模:
国:
都道府県:
新しいメールアドレスに確認用のメールを送信します。このポップアップ画面は自動的に閉じられます。