ionic-team · thetaPC · Jan 16, 2024 · Jan 3, 2024 · Jan 4, 2024 · Jan 4, 2024
@@ -1,10 +1,11 @@
 src/theme/DocItem
-src/theme/DocPage
+src/theme/DocRoot
 legacy-stencil-components
 scripts/bak
 
 docs/api
 docs/native
+versioned_docs/version-v*/native
 docs/cli/commands
 
 static/code/stackblitz

@@ -28,7 +28,7 @@ See the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for
 
 ### Usage with Standalone-based Applications
 
-:::caution
+:::warning
 All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking.
 :::
 
@@ -177,7 +177,7 @@ export class HomePage {}
 
 ### Usage with NgModule-based Applications
 
-:::caution
+:::warning
 All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking.
 :::
 

@@ -175,7 +175,7 @@ import { LoginComponent } from './login.component';
 
 ## Standalone Components
 
-:::caution Experimental API
+:::warning Experimental API
 
 Standalone components is an experimental API introduced in Angular 14.x and available in Ionic 6.3 and later. This feature may change before it is stable.
 

@@ -13,7 +13,7 @@ import TabItem from '@theme/TabItem';
   />
 </head>
 
-:::caution Looking for `ion-slides`?
+:::warning Looking for `ion-slides`?
 `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
 :::
 

@@ -1,6 +1,6 @@
 # 仮想スクロール
 
-:::caution Looking for `ion-virtual-scroll`?
+:::warning Looking for `ion-virtual-scroll`?
 
 `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below.
 

@@ -19,7 +19,7 @@ Here’s the finished app running on all 3 platforms:
   width="560"
   height="315"
   src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
-  frameborder="0"
+  frameBorder="0"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen
 ></iframe>

@@ -40,11 +40,8 @@ Web テクノロジで構築されたアプリ（Ionic アプリなど）の素
 
 Ionic の最も一般的な使用例の 1 つは、 <a href="https://www.apple.com/ios/app-store/" target="_blank">App Store</a> と <a href="https://play.google.com/" target="_blank">Play Store</a> の両方からダウンロードできるアプリを作成することです。iOS と Android の両方のソフトウェア開発キット（SDK）は、完全なネイティブ SDK アクセスを可能にしながら、あらゆる Ionic アプリをレンダリングする [Web Views](webview.md) を提供します。
 
-<a href="https://capacitorjs.com/" target="_blank">
-  Capacitor
-</a> や <a href="https://cordova.apache.org/" target="_blank">
-  Cordova
-</a> などのプロジェクトは、IonicアプリにネイティブSDKへのアクセスを与えるためによく使われています。つまり、開発者は一般的なWeb開発ツールを使ってアプリを素早く構築することができ、かつデバイスの加速度センサー、カメラ、GPSなどのネイティブ機能にアクセスすることができるのです。
+<!-- prettier-ignore -->
+<a href="https://capacitorjs.com/" target="_blank">Capacitor</a> や <a href="https://cordova.apache.org/" target="_blank">Cordova</a> などのプロジェクトは、IonicアプリにネイティブSDKへのアクセスを与えるためによく使われています。つまり、開発者は一般的なWeb開発ツールを使ってアプリを素早く構築することができ、かつデバイスの加速度センサー、カメラ、GPSなどのネイティブ機能にアクセスすることができるのです。
 
 ## テーマ
 

@@ -33,7 +33,7 @@ $ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg
 
 このコマンドを実行し、プロンプトに答えると、カレントディレクトリに `my-release-key.keystore` という名前のファイルが作成されます。
 
-:::caution
+:::warning
 このファイルを保存し、安全な場所に保管してください。このファイルを紛失すると、Google Play ストアはこのアプリのアップデートを受け付けません!
 :::
 

@@ -105,7 +105,7 @@ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg R
 
 Once that command has been ran and its prompts have been answered a file called `my-release-key.keystore` will be created in the current directory.
 
-:::caution
+:::warning
 Save this file and keep it somewhere safe. If it is lost the Google Play Store will not accept updates for this app!
 :::
 

@@ -101,15 +101,15 @@ Now comes the fun part: testing out the native app on your device! For iOS, the
       src="https://fast.wistia.net/embed/iframe/s5v4fujv7w?videoFoam=true"
       title="Wistia video player"
       allowtransparency="true"
-      frameborder="0"
+      frameBorder="0"
       scrolling="no"
       class="wistia_embed"
       name="wistia_embed"
       allowfullscreen
-      mozallowfullscreen
-      webkitallowfullscreen
-      oallowfullscreen
-      msallowfullscreen
+      mozallowFullScreen
+      webkitallowFullScreen
+      oallowFullScreen
+      msallowFullScreen
       width="100%"
       height="100%"
     ></iframe>
@@ -130,15 +130,15 @@ In the upper right hand corner, click the Play button. Select your connected dev
       src="https://fast.wistia.net/embed/iframe/b2ys5v4sno?videoFoam=true"
       title="Wistia video player"
       allowtransparency="true"
-      frameborder="0"
+      frameBorder="0"
       scrolling="no"
       class="wistia_embed"
       name="wistia_embed"
       allowfullscreen
-      mozallowfullscreen
-      webkitallowfullscreen
-      oallowfullscreen
-      msallowfullscreen
+      mozallowFullScreen
+      webkitallowFullScreen
+      oallowFullScreen
+      msallowFullScreen
       width="100%"
       height="100%"
     ></iframe>

@@ -139,18 +139,11 @@ Ionic Framework はコアチームによって積極的に開発され、メン
 
 Ionic の開発者は世界 200 か国以上に何百万人もいます。コミュニティへの参加方法をいくつか紹介します:
 
-- <a href="https://forum.ionicframework.com/" target="_blank">
-    Forum:
-  </a> A great place for asking questions and sharing ideas.
-- <a href="https://twitter.com/ionicframework" target="_blank">
-    Twitter:
-  </a> Where we post updates and share content from the Ionic community.
-- <a href="https://github.com/ionic-team/ionic" target="_blank">
-    GitHub:
-  </a> For reporting bugs or requesting new features, create an issue here. PRs welcome!
-- <a href="https://ionicframework.com/contributors" target="_blank">
-    Content authoring:
-  </a> Write a technical blog or share your story with the Ionic community.
+<!-- prettier-ignore -->
+- <a href="https://forum.ionicframework.com/" target="_blank">Forum:</a> A great place for asking questions and sharing ideas.
+- <a href="https://twitter.com/ionicframework" target="_blank">Twitter:</a> Where we post updates and share content from the Ionic community.
+- <a href="https://github.com/ionic-team/ionic" target="_blank">GitHub:</a> For reporting bugs or requesting new features, create an issue here. PRs welcome!
+- <a href="https://ionicframework.com/contributors" target="_blank">Content authoring:</a> Write a technical blog or share your story with the Ionic community.
 
 ## ライセンス
 

@@ -217,7 +217,7 @@ display CSS プロパティは、要素を表示するかどうかを決定し
 
 ### Responsive な Display 属性
 
-画面サイズに基づいて表示を変更するクラスもあります。ただ `.ion-hide` ではなく `.ion-hide-{breakpoint}-{dir}` という特定の画面サイズでのみクラスを使用します。{breakpoint}は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の 1 つです。 `{dir}` は、指定されたブレークポイントの上 (`up`) または下 (`down`) のすべての画面サイズで要素を非表示にするかどうかです。
+画面サイズに基づいて表示を変更するクラスもあります。ただ `.ion-hide` ではなく `.ion-hide-{breakpoint}-{dir}` という特定の画面サイズでのみクラスを使用します。\{breakpoint\}は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の 1 つです。 `{dir}` は、指定されたブレークポイントの上 (`up`) または下 (`down`) のすべての画面サイズで要素を非表示にするかどうかです。
 
 | Class                | Description                                                                                          |
 | -------------------- | ---------------------------------------------------------------------------------------------------- |

@@ -20,8 +20,8 @@ import DocsCards from '@components/global/DocsCards';
 
 <PageStyles>
 
-<div class='flex main-flex'>
-  <div class="pull-left">
+<div className='flex main-flex'>
+  <div className="pull-left">
   <h1>コードひとつで <br/> あらゆるプラットフォーム <br/> <strong>まさにReact</strong></h1>
 
 - ✓ 100 以上のモバイルに最適化された React UI コンポーネント
@@ -32,7 +32,7 @@ import DocsCards from '@components/global/DocsCards';
 
   </div>
 
-  <div class="pull-right">
+  <div className="pull-right">
   <img src={require('@site/static/img/frameworks/react-logo.png').default} />
   </div>
 </div>
@@ -43,9 +43,9 @@ Ionic React は、Ionic Framework のネイティブ React バージョンで、
 
 React を使用して、あらゆるプラットフォーム向けに受賞歴のあるアプリを出荷するために必要なすべてが揃っています。
 
-<div class="flex" >
+<div className="flex" >
 
-<div class="pull-left">
+<div className="pull-left">
 
 ## すばらしいデザイン
 
@@ -55,15 +55,15 @@ React を使用して、あらゆるプラットフォーム向けに受賞歴
 
 </div>
 
-<div class="pull-right">
+<div className="pull-right">
   <img src="/docs/icons/feature-guide-components-icon.png" />
 </div>
 
 </div>
 
-<div class="flex reverse" >
+<div className="flex reverse" >
 
-<div class="pull-left">
+<div className="pull-left">
 
 ## 使い慣れたツール
 
@@ -72,39 +72,39 @@ React バージョン 16.8 以降に対応しています。
 
 </div>
 
-<div class="pull-right">
-  <img src={require('@site/static/img/frameworks/react-cli.png').default} class="cli" />
+<div className="pull-right">
+  <img src={require('@site/static/img/frameworks/react-cli.png').default} className="cli" />
 </div>
 
 </div>
 
-<div class="flex">
+<div className="flex">
 
-<div class="pull-left">
+<div className="pull-left">
 
 ## More than mobile
 
 最新のネイティブランタイムである [Capacitor](https://capacitorjs.com) を使用して、Ionic React プロジェクトをネイティブの iOS、Android、Electron、Web に Progressive Web App としてデプロイできます。すべて 1 つの共有コードベースで。
 
 </div>
 
-<div class="pull-right">
+<div className="pull-right">
   <img src={require('@site/static/img/native-platforms/group-shot.png').default} />
 </div>
 
 </div>
 
-<div class="flex reverse">
+<div className="flex reverse">
 
-  <div class="pull-left">
+  <div className="pull-left">
 
 ## まさに React
 
 結局のところ、ただの React なのです。Ionic React はオープンな Web 標準とビルトインのブラウザ機能を使用しているため、何百万とある Web ライブラリのどれとも互換性があります。
 
   </div>
 
-<div class="pull-right">
+<div className="pull-right">
   <img src={require('@site/static/img/frameworks/react.svg').default} />
 </div>
 

@@ -10,7 +10,7 @@ title: Migrating From IonSlides to Swiper.js
   />
 </head>
 
-:::caution Looking for `IonSlides`?
+:::warning Looking for `IonSlides`?
 
 `IonSlides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
 

@@ -1,6 +1,6 @@
 # 仮想スクロール
 
-:::caution Looking for `ion-virtual-scroll`?
+:::warning Looking for `ion-virtual-scroll`?
 
 `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Virtuoso package detailed below.
 

@@ -19,7 +19,7 @@ Here’s the finished app running on all 3 platforms:
   width="560"
   height="315"
   src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
-  frameborder="0"
+  frameBorder="0"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen
 ></iframe>

@@ -67,9 +67,8 @@ Shadow Parts は、開発者がシャドウツリーの外側から、シャド
 
 ### How ::part works
 
-<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank" rel="noopener noreferrer">
-  `::part()`
-</a> 擬似要素により、開発者はPart属性で公開されているシャドウツリー内の要素を選択することができます。
+<!-- prettier-ignore -->
+<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/::part" target="_blank" rel="noopener noreferrer">`::part()`</a> 擬似要素により、開発者はPart属性で公開されているシャドウツリー内の要素を選択することができます。
 
 `ion-select` は、値が選択されていないときにテキストをスタイル付けするための `placeholder` Part を公開していることが分かっているので、次のようにカスタマイズすることができます。
 

@@ -14,7 +14,7 @@ title: Debugging
   width="560"
   height="315"
   src="https://www.youtube.com/embed/akh6V6Yw1lw"
-  frameborder="0"
+  frameBorder="0"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen
 ></iframe>

@@ -24,9 +24,8 @@ iOS デバイスでアプリケーションを実行するには、プロビジ
 
    Cordova の場合、`config.xml` ファイルを開き、ルート要素 `<widget>` の `id` 属性を修正します。よりくわしい情報は [Cordova ドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご参照ください。
 
-2. <strong>
-     プロジェクトを <b>Xcode</b> で開く。
-   </strong>
+<!-- prettier-ignore -->
+2. <strong>プロジェクトを <b>Xcode</b> で開く。</strong>
 
    Capacitor の場合、以下を実行し Xcode でアプリケーションを開いてください:
 
@@ -36,17 +35,13 @@ iOS デバイスでアプリケーションを実行するには、プロビジ
 
    Cordova の場合、Xcode 開きます。**File** &raquo; **Open** からアプリケーションを見つけます。アプリケーション内の `platforms/ios` ディレクトリを開きます。
 
-3. <strong>
-     <b>プロジェクト ナビゲーター</b>で、プロジェクトのルートを選択しエディタでプロジェクトを開きます。 **Identity**
-     セクションで、設定された Package ID がバンドル識別子と一致することを確認します。
-   </strong>
+<!-- prettier-ignore -->
+3. <strong><b>プロジェクト ナビゲーター</b>で、プロジェクトのルートを選択しエディタでプロジェクトを開きます。 **Identity** セクションで、設定された Package ID がバンドル識別子と一致することを確認します。</strong>
 
    ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png)
 
-4. <strong>
-     同じプロジェクトエディタの <b>署名</b> セクションで、<b>Automatically manage signing</b> が
-     有効になっていることを確認します。
-   </strong> 次に、Team から開発チームを選択します。開発チームがあれば、Xcode は プロビジョニングと署名を自動的に準備しようとします。
+<!-- prettier-ignore -->
+4. <strong>同じプロジェクトエディタの <b>署名</b> セクションで、<b>Automatically manage signing</b> が 有効になっていることを確認します。</strong> 次に、Team から開発チームを選択します。開発チームがあれば、Xcode は プロビジョニングと署名を自動的に準備しようとします。
 
    ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png)
 

@@ -2,6 +2,9 @@
 title: Updating to v4
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
 # Updating to Ionic 4
 
 ## Updating from Ionic 3 to 4

@@ -10,7 +10,7 @@ title: Migrating From ion-slides to Swiper.js
   />
 </head>
 
-:::caution Looking for `ion-slides`?
+:::warning Looking for `ion-slides`?
 `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
 :::
 

@@ -1,6 +1,6 @@
 # 仮想スクロール
 
-:::caution Looking for `ion-virtual-scroll`?
+:::warning Looking for `ion-virtual-scroll`?
 
 `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using a Vue library to accomplish this. We outline one approach using `vue-virtual-scroller` below.
 

@@ -19,7 +19,7 @@ Here’s the finished app running on all 3 platforms:
   width="560"
   height="315"
   src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
-  frameborder="0"
+  frameBorder="0"
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen
 ></iframe>

@@ -280,7 +280,7 @@ module.exports = {
     },
     prism: {
       theme: { plain: {}, styles: [] },
-      // https://github.com/FormidableLabs/prism-react-renderer/blob/5a1c93592c6475fb230bfcb8a9666b72b331638b/packages/generate-prism-languages/index.ts#L9-L24
+      // https://github.com/FormidableLabs/prism-react-renderer/blob/e6d323332b0363a633407fabab47b608088e3a4d/packages/generate-prism-languages/index.ts#L9-L25
       additionalLanguages: ['shell-session', 'http'],
     },
     algolia: {
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,7 +13,7 @@ import TabItem from '@theme/TabItem'; @@
       />
     </head>
-    :::caution Looking for `ion-slides`?
+    :::warning Looking for `ion-slides`?
     `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
     :::
@@ Expand Down @@