From 83392384600c401716055375956b3a81a7f47fa7 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Fri, 25 Sep 2026 15:20:30 -0700 Subject: [PATCH] chore(cleanup): remove dead JP only files --- .github/workflows/deploy.yml | 43 -- _templates/playground/new/index.md.ejs.t | 48 --- docs/deployment/desktop-app.mdx | 48 --- docs/developer-resources/books.mdx | 81 ---- docs/layout/grid.mdx | 512 ----------------------- docs/react.mdx | 143 ------- docs/react/testing.mdx | 7 - docs/studio/setup/installation.mdx | 17 - redirects | 3 - src/theme/EventNavbar/index.tsx | 33 -- src/theme/EventNavbar/styles.module.css | 51 --- versioned_docs/version-v6/studio.mdx | 31 -- 12 files changed, 1017 deletions(-) delete mode 100644 .github/workflows/deploy.yml delete mode 100644 _templates/playground/new/index.md.ejs.t delete mode 100644 docs/deployment/desktop-app.mdx delete mode 100644 docs/developer-resources/books.mdx delete mode 100644 docs/layout/grid.mdx delete mode 100644 docs/react.mdx delete mode 100644 docs/react/testing.mdx delete mode 100644 docs/studio/setup/installation.mdx delete mode 100644 redirects delete mode 100644 src/theme/EventNavbar/index.tsx delete mode 100644 src/theme/EventNavbar/styles.module.css delete mode 100644 versioned_docs/version-v6/studio.mdx diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml deleted file mode 100644 index 30621e7cd85..00000000000 --- a/.github/workflows/deploy.yml +++ /dev/null @@ -1,43 +0,0 @@ -name: Deploy -on: - push: - branches: [ main ] -jobs: - build: - - runs-on: ubuntu-latest - - steps: - - uses: actions/checkout@v3 - - uses: actions/setup-node@v3 - with: - node-version: 20.x - cache: 'npm' - cache-dependency-path: package-lock.json - - - name: prepare code - run: git clone https://github.com/ionic-jp/community-site.git site - - # community-siteのビルド - - name: community-site build - run: | - npm install - npm run build.ci - working-directory: site - - # Docsのビルド - - name: npm install, build - run: | - npm ci --legacy-peer-deps - npm run prebuild - npm run build:ci - mv site/www/* www/ - - # デプロイ - - name: deploy - run: | - npx netlify-cli@23.7.3 deploy \ - --site ${{ secrets.NETLIFY_SITE_ID }} \ - --dir www/ \ - --auth ${{ secrets.NETLIFY_TOKEN }} \ - --prod diff --git a/_templates/playground/new/index.md.ejs.t b/_templates/playground/new/index.md.ejs.t deleted file mode 100644 index 148d3e85efe..00000000000 --- a/_templates/playground/new/index.md.ejs.t +++ /dev/null @@ -1,48 +0,0 @@ ---- -to: "<%= `static/usage/v${version}/${name}/${path}/index.md` %>" ---- -import Playground from '@site/src/components/global/Playground'; - -import javascript from './javascript.md'; -<% if (css){ %> -import react_main_tsx from './react/main_tsx.md'; -import react_main_css from './react/main_css.md'; - -<% } else { -%> -import react from './react.md'; -<% } -%> -import vue from './vue.md'; - -import angular_example_component_html from './angular/example_component_html.md'; -<% if (css){ -%> -import angular_example_component_css from './angular/example_component_css.md'; -<% } -%> -import angular_example_component_ts from './angular/example_component_ts.md'; - - - react: { - files: { - 'src/main.tsx': react_main_tsx, - 'src/main.css': react_main_css, - }, - }, -<% } else { -%> - react, -<% } -%> - vue, - angular: { - files: { - 'src/app/example.component.html': angular_example_component_html, -<% if (css){ -%> - 'src/app/example.component.css': angular_example_component_css, -<% } -%> - 'src/app/example.component.ts': angular_example_component_ts, - }, - }, - }} - src="usage/v<%= version %>/<%= name %>/<%= path %>/demo.html" -/> diff --git a/docs/deployment/desktop-app.mdx b/docs/deployment/desktop-app.mdx deleted file mode 100644 index c30f4b2e7b5..00000000000 --- a/docs/deployment/desktop-app.mdx +++ /dev/null @@ -1,48 +0,0 @@ ---- -title: デスクトップアプリへのデプロイ -sidebar_label: Electronデスクトップアプリ ---- - - - WindowsとmacOS App Stores向けにデスクトップアプリとしてビルド - - - -Ionic でデスクトップアプリケーションを構築すると、開発者はコードを 100%再利用し、従来のデスクトップアプリケーションをリリースしながら、プッシュ通知などのすべてのネイティブデバイスの機能を利用することができます。このガイドでは、Electron に精通していることを前提としており、Electron アプリの「作り方」については触れません。 詳しくは Electron guide. をご覧ください。 - -## macOS アプリ {/* #macos-app */} - -### 要件 {/* #requirements */} - -macOS アプリをストアでアプリを公開するには、難しい要件が 2 つあります。 - -- [Xcode](https://itunes.apple.com/us/app/xcode/id497799835?mt=12) が最新版であること -- 開発者アカウント ($100 through Apple's developer portal) が有効であること - -### リリース {/* #publishing */} - -Electron チームは、macOS 用のアプリを公開する方法についての詳細なガイドを持っています。[the docs](https://electronjs.org/docs/tutorial/mac-app-store-submission-guide) をご覧ください。 - -## Windows アプリ {/* #windows-app */} - -### 要件 {/* #requirements-1 */} - -Windows アプリをストアでアプリを公開するには、2 つの厳しい要件があります。 - -- Anniversary Update 付き Windows 10（2016 年 8 月 2 日リリース） -- Windows 10 SDK、[こちらからダウンロード](https://developer.microsoft.com/en-us/windows/downloads/windows-10-sdk) -- Node -- electron-windows-store CLI - -`electron-windows-store` は npm を使ってインストールすることができます: - -```shell -npm install -g electron-windows-store -``` - -### リリース作業 {/* #publishing-1 */} - -macOS と同様、Electron は Windows 用のアプリを公開する方法についても詳細なガイドを提供している。 [the docs](https://electronjs.org/docs/tutorial/windows-store-guide) を確認してください diff --git a/docs/developer-resources/books.mdx b/docs/developer-resources/books.mdx deleted file mode 100644 index cdf70d774c1..00000000000 --- a/docs/developer-resources/books.mdx +++ /dev/null @@ -1,81 +0,0 @@ -# Books - -### [Ionic で作る モバイルアプリ制作入門〈Web/iPhone/Android 対応〉](https://amzn.to/2Ygk5bA) {/* #introduction-to-mobile-app-development-with-ionic */} - -WEB サイトがつくれれば、モバイルアプリをつくることができる時代がやってきました。本書では、HTML でモバイルアプリをつくるフレームワーク「Ionic」の紹介と、チュートリアルで作り方を解説しています。 - -by [`rdlabo`](https://twitter.com/rdlabo) - -### [Learn Ionic 4 From Scratch](https://leanpub.com/learnionic4fromscratch) {/* #learn-ionic-4-from-scratch */} - -Angular. Vue. React. Vanilla JavaScript. All of these tools can be used to create awesome applications with Ionic, thanks to the new Stencil compiler. This book is aimed at beginners that are looking to create amazing web, mobile and desktop applications using Ionic with examples across all of the popular frameworks. - -{/* cspell:disable-next-line */} - -by [Paul Halliday](https://developer.school) - -### [Creating Ionic Applications with StencilJS](https://www.joshmorony.com/creating-ionic-applications-with-stencil-js/) - [Free Preview](https://cdn2.hubspot.net/hubfs/3776657/PREVIEW-Creating-Ionic-Apps-with-StencilJS.pdf) {/* #creating-ionic-applications-with-stenciljs---free-preview */} - -As well as being a powerful tool for generating reuseable web components, StencilJS provides the tools needed to build an entire application out of web components. Combined with the Ionic web components, StencilJS gives us everything we need to build high-quality production mobile applications - no framework required. - -{/* cspell:disable-next-line */} - -by [Joshua Morony](https://www.joshmorony.com/blog) - -### [Mobile App Development with Ionic: Cross-Platform Apps with Ionic 2, Angular 2, and Cordova](https://www.amazon.com/Mobile-App-Development-Ionic-Cross-Platform/dp/1491937785/ref=sr_1_2?ie=UTF8&qid=1464183332&sr=8-2&keywords=ionic+2) {/* #mobile-app-development-with-ionic-cross-platform-apps-with-ionic-2-angular-2-and-cordova */} - -{/* cspell:disable-next-line */} - -by Chris Griffith - -### [Building Mobile Apps with Ionic & Angular](https://www.joshmorony.com/building-mobile-apps-with-ionic-2/) {/* #building-mobile-apps-with-ionic--angular */} - -{/* cspell:disable-next-line */} - -by [Joshua Morony](https://www.joshmorony.com/blog) - -Building Mobile Apps with Ionic & Angular is an all-in-one resource for learning the latest and greatest version of Ionic. It is targeted at beginners and works its way through the basics of Ionic, to example applications of varying complexity, and then to the steps required to build and publish your application (on the app stores or as a PWA). It has been updated for every major release, so you can rest easy knowing that you're not learning outdated tech. - -### [Ionic 2 From Zero to App Store](https://devdactic.com/zero-to-app) {/* #ionic-2-from-zero-to-app-store */} - -{/* cspell:disable-next-line */} - -by Simon Reimler - -### [Ionic Framework By Example](https://www.packtpub.com/application-development/ionic-framework-example) {/* #ionic-framework-by-example */} - -{/* cspell:disable-next-line */} - -by Sani Yusuf - -### [Building Firestore Powered Ionic Apps](https://javebratt.com/ionic-firebase-book/) {/* #building-firestore-powered-ionic-apps */} - -{/* cspell:disable-next-line */} - -by Jorge Vergara - -This book will help you go from not knowing what Firebase is to be able to use the different APIs for your Ionic Applications. It will take you from “_What’s Firebase?_” to building scalable, production-ready apps and it’s always up-to-date with latest Ionic and Firebase versions. - -### [Ionic 2 Cookbook - Second Edition](https://www.amazon.com/Ionic-Cookbook-Second-Hoc-Phan-ebook/dp/B01C4D9VWS?ie=UTF8&keywords=ionic%202&qid=1464183332&ref_=sr_1_3&sr=8-3) {/* #ionic-2-cookbook---second-edition */} - -{/* cspell:disable-next-line */} - -by Hoc Phan - -### [Mastering Ionic 2](https://www.leanpub.com/masteringionic2) {/* #mastering-ionic-2 */} - -{/* cspell:disable-next-line */} - -by James Griffiths - -### [Learning Ionic](https://www.packtpub.com/in/application-development/learning-ionic) (Ionic 1) {/* #learning-ionic-ionic-1 */} - -{/* cspell:disable-next-line */} - -by Arvind Ravulavaru - -### [Learning Ionic - Second Edition](https://www.packtpub.com/in/web-development/learning-ionic-second-edition) (Ionic 2/3) {/* #learning-ionic---second-edition-ionic-23 */} - -{/* cspell:disable-next-line */} - -by Arvind Ravulavaru diff --git a/docs/layout/grid.mdx b/docs/layout/grid.mdx deleted file mode 100644 index 4d78f4687e7..00000000000 --- a/docs/layout/grid.mdx +++ /dev/null @@ -1,512 +0,0 @@ ---- -title: レスポンシブグリッド ---- - - - レスポンシブグリッドシステムとスクリーンサイズに応じたカルムレイアウト - - - -グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッドは、[grid](../api/grid.mdx), [row(s)](../api/row.mdx), [column(s)](../api/col.mdx) という三つの単位で構成されています。列はその行を埋めるように拡張され、追加の列に合うようにサイズが変更されます。これは、画面サイズに応じて異なるブレイクポイントを持つ 12 列のレイアウトに基づいています。カラムの数は CSS を使ってカスタマイズすることができます。 - -## 仕組み {/* #how-it-works */} - -```html - - - -
1 of 3
- - -
2 of 3
- - -
3 of 3
- - - -``` - -- グリッドは、すべての行と列のためのコンテナとして機能します。グリッドはコンテナの幅いっぱいに表示されます。 - しかし、`fixed`属性を追加すると、スクリーンサイズごとの幅を指定することができます。 -- 行は、列を適切に並べるための水平方向のグループです。 -- コンテンツは列の中に配置されるべきで、列のみが行の直接の子となることができます。 -- `size-{breakpoint}` 属性は、1 行あたりデフォルトの 12 列のうち、使用する列の数を指定します。 - つまり、`size="4"` を指定すると、グリッドの 1/3、つまり 12 列のうち 4 列を占有することができます。 -- size に値を指定しないカラムは、自動的に同じ幅になります。例えば、`size-sm`を 4 つ指定すると、スモールブレイクポイント以上の幅は、それぞれ自動的に 25%になります。 -- カラムの幅はパーセンテージで設定されるため、常に流動的で、親要素からの相対的な大きさになります。 -- カラムは個々のカラムの間にパディングを持ちますが、パディングはグリッドとカラムから削除することができます。 - しかし、グリッドに `ion-no-padding` クラスを追加することで、グリッドとカラムからパディングを取り除くことができます。グリッドに適用できるその他のスタイルについては、[CSS ユーティリティ](css-utilities.mdx) を参照してください。 -- グリッドの階層は、レスポンシブ・ブレークポイントごとに、すべてのブレークポイント（特小）、小、中、大、特大の 5 段階あります。 -- グリッドの階層は最小幅を基準にしており、その階層とそれより大きな階層に適用されます。 - (例: `size-sm="4"` は、小型、中型、大型、特大のデバイスに適用されます)。 -- グリッドは CSS 変数で簡単にカスタマイズすることができます。グリッドのカスタマイズ](#customizing-the-grid)を参照してください。 - -### ライブでの実装例 {/* #live-example */} - -Angular の場合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid) 、React の場合は [こちら](https://stackblitz.com/edit/ionic-react-basic-grid) で、ライブでの実装例を見ることができます。 - -## グリッドの大きさ {/* #grid-size */} - -デフォルトでは、グリッドは 100%の幅を占めます。画面サイズに応じた幅を設定するには、 `fixed` 属性を追加します。各ブレークポイントにおけるグリッドの幅は、CSS 変数 `--ion-grid-width-{breakpoint}` で定義される。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。 - -| Name | Value | Description | -| ---- | ------ | ------------------------------------------------- | -| xs | 100% | Don't set the grid width for xs screens | -| sm | 540px | Set grid width to 540px when (min-width: 576px) | -| md | 720px | Set grid width to 720px when (min-width: 768px) | -| lg | 960px | Set grid width to 960px when (min-width: 992px) | -| xl | 1140px | Set grid width to 1140px when (min-width: 1200px) | - -### ライブでの実装例 {/* #live-example-1 */} - -Angular の場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width-grid) 、React の場合は [こちら](https://stackblitz.com/edit/ionic-react-fixed-width-grid) で、ライブの例を見ることができます。 - -## グリッドの属性 {/* #grid-attributes */} - -グリッドは、デフォルトでは画面の幅いっぱいに表示されます。これは、以下の属性を使って変更できます。 - -| Property | Description | -| -------- | ------------------------------------------------- | -| fixed | Set a max width based on the current screen size. | - -## デフォルトのブレークポイント {/* #default-breakpoints */} - -デフォルトのブレークポイントは、以下の表で定義されています。現時点では、ブレイクポイントをカスタマイズすることはできません。カスタマイズできない理由については、 [Variables in Media Queries](../theming/advanced.mdx#variables-in-media-queries) を参照してください。 - -| Name | Value | Width Prefix | Offset Prefix | Push Prefix | Pull Prefix | Description | -| ---- | ------ | ------------ | ------------- | ----------- | ----------- | ------------------------------------ | -| xs | 0 | `size-` | `offset-` | `push-` | `pull-` | Set columns when (min-width: 0) | -| sm | 576px | `size-sm-` | `offset-sm-` | `push-sm-` | `pull-sm-` | Set columns when (min-width: 576px) | -| md | 768px | `size-md-` | `offset-md-` | `push-md-` | `pull-md-` | Set columns when (min-width: 768px) | -| lg | 992px | `size-lg-` | `offset-lg-` | `push-lg-` | `pull-lg-` | Set columns when (min-width: 992px) | -| xl | 1200px | `size-xl-` | `offset-xl-` | `push-xl-` | `pull-xl-` | Set columns when (min-width: 1200px) | - -## オートレイアウトカラム {/* #auto-layout-columns */} - -### 均等な幅 {/* #equal-width */} - -デフォルトでは、すべてのデバイスと画面サイズにおいて、カラムは行の中で同じ幅を占めます。 - -```html - - - -
1 of 2
- - -
2 of 2
- - - - -
1 of 3
- - -
2 of 3
- - -
3 of 3
- - - -``` - -### 1 列の幅を設定する {/* #setting-one-column-width */} - -1 つのカラムの幅を設定すると、他のカラムは自動的にその幅にリサイズされます。これは、あらかじめ定義されたグリッド属性を使って行うことができます。以下の例では、中央のカラムの幅に関係なく、他のカラムがリサイズされます。 - -```html - - - -
1 of 3
- - -
2 of 3 (wider)
- - -
3 of 3
- - - - -
1 of 3
- - -
2 of 3 (wider)
- - -
3 of 3
- - - -``` - -#### ライブでの実装例 {/* #live-example-2 */} - -Angular では [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) 、React では [こちら](https://stackblitz.com/edit/ionic-react-set-width-col) で、実例を見ることができます。 - -### 可変幅 {/* #variable-width */} - -`size-{breakpoint}` プロパティを `"auto"` に設定することで、カラムはそのコンテンツの自然な幅に基づいてサイズを変更することができます。これは、ピクセルでカラムの幅を設定する場合に非常に便利です。可変幅のカラムの隣のカラムは、行を埋めるようにリサイズされます。 - -```html - - - -
1 of 3
- - -
Variable width content
- - -
3 of 3
- - - - -
1 of 4
- - -
2 of 4
- - -
- -
- - -
4 of 4
- - - -``` - -#### ライブでの実装例 {/* #live-example-3 */} - -Angular では [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) 、React では [こちら](https://stackblitz.com/edit/ionic-react-var-width-col) で、実例を見ることができます。 - -## レスポンシブ属性 {/* #responsive-attributes */} - -### すべてのブレークポイント {/* #all-breakpoints */} - -すべてのデバイスとスクリーンに対してカラムの幅をカスタマイズするには、`size` プロパティを設定します。このプロパティの値は、利用可能なカラムのうち、このカラムが占めるべきカラムの数を決定します。 - -```html - - - -
1 of 4
- - -
2 of 4
- - -
3 of 4
- - -
4 of 4
- - - -``` - -### 積み上げから水平へ {/* #stacked-to-horizontal */} - -width 属性と breakpoint 属性の組み合わせで、超小型画面では積み上げ型、小型画面では水平型になるようなグリッドを作成することができます。 - -```html - - - -
1 of 4
- - -
2 of 4
- - -
3 of 4
- - -
4 of 4
- - - -``` - -#### ライブでの実装例 {/* #live-example-4 */} - -Angular では [こちら](https://stackblitz.com/edit/ionic-ng-stacked-horizontal-grid) 、React では [こちら](https://stackblitz.com/edit/ionic-react-stacked-horizontal-grid) で実例を見ることができます。 - -## 並び替え {/* #reordering */} - -### カラムのオフセット {/* #offsetting-columns */} - -offset` プロパティを追加することで、カラムを右に移動させることができます。このプロパティは、カラムの左側のマージンを指定したカラム数だけ増加させる。例えば、以下のグリッドでは、最後のカラムは 3 カラム分オフセットされ、3 カラムを占めることになります。 - -```html - - - -
1 of 2
- - -
2 of 2
- - - -``` - -また、スクリーンのブレークポイントに基づいてオフセットを追加することもできます。以下は、`md`スクリーン以上では最後のカラムが 3 カラム分オフセットされるグリッドの例です。 - -```html - - - -
1 of 3
- - -
2 of 3
- - -
3 of 3
- - - -``` - -#### ライブでの実装例 {/* #live-example-5 */} - -Angular では [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) 、React では [こちら](https://stackblitz.com/edit/ionic-react-offset-grid-cols) で、実例を見ることができます。 - -### プッシュとプル {/* #push-and-pull */} - -`push` と `pull` というプロパティを追加することで、カラムの並び替えを行うことができます。これらのプロパティは、カラムの `left` と `right` を指定したカラム数だけ調整し、カラムの並び替えを簡単に行うことができます。例えば、以下のグリッドでは、`1 of 2`と記述されたカラムが実際には最後のカラムとなり、`2 of 2`が最初のカラムとなります。 - -```html - - - -
1 of 2
- - -
2 of 2
- - - -``` - -また、画面のブレークポイントに基づいて Push と Pull を追加することができます。以下の例では、`3 of 3`のカラムの記述があるカラムは、実際には`md`画面以上の最初のカラムになります。 - -```html - - - -
1 of 3
- - -
2 of 3
- - -
3 of 3
- - - -``` - -#### ライブでの実装例 {/* #live-example-6 */} - -Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-push-pull) で実例を見ることができます。 - -## アライメント {/* #alignment */} - -### 垂直方向のアラインメント {/* #vertical-alignment */} - -行に異なるクラスを追加することで、すべての列を行の内側に垂直に整列させることができます。利用可能なクラスの一覧は、[css utilities](css-utilities.mdx#flex-container-properties) を参照してください。 - -```html - - - -
1 of 4
- - -
2 of 4
- - -
3 of 4
- - -
4 of 4 # # #
- - - - - -
1 of 4
- - -
2 of 4
- - -
3 of 4
- - -
4 of 4 # # #
- - - - - -
1 of 4
- - -
2 of 4
- - -
3 of 4
- - -
4 of 4 # # #
- - - -``` - -カラムはまた、カラムに直接 alignment クラスを追加することによって、他のカラムと異なるように自分自身を配置することができます。利用可能なクラスの一覧は、[css utilities](css-utilities.mdx#flex-item-properties) を参照してください。 - -```html - - - -
1 of 4
- - -
2 of 4
- - -
3 of 4
- - -
4 of 4 # # #
- - - -``` - -#### ライブでの実装例 {/* #live-example-7 */} - -Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-align) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-vertical-align) で、実例を見ることができます。 - -### 水平方向の整列 {/* #horizontal-alignment */} - -行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[css ユーティリティ](css-utilities.mdx#flex-container-properties) を参照してください。 - -```html - - - -
1 of 2
- - -
2 of 2
- - - - - -
1 of 2
- - -
2 of 2
- - - - - -
1 of 2
- - -
2 of 2
- - - - - -
1 of 2
- - -
2 of 2
- - - - - -
1 of 2
- - -
2 of 2
- - - -``` - -#### ライブでの実装例 {/* #live-example-8 */} - -Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-align) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-horizontal-align) で実例を見ることができます。 - -## グリッドのカスタマイズ {/* #customizing-the-grid */} - -組み込みの CSS 変数を使用すると、定義済みのグリッド属性をカスタマイズすることができます。パディングの値やカラムの数などを変更できます。 - -### 列の数 {/* #number-of-columns */} - -グリッドのカラム数は、CSS 変数 `--ion-grid-columns` で変更することができます。デフォルトでは 12 列ですが、これを任意の正の整数に変更し、個々の列の幅を計算するために使用することができます。 - -```css ---ion-grid-columns: 12; -``` - -### グリッドの Padding {/* #grid-padding */} - -グリッドコンテナの Padding は、CSS 変数 `--ion-grid-padding` を使ってすべてのブレークポイントに対して設定することができます。個々のブレイクポイントを上書きするには、CSS 変数 `--ion-grid-padding-{breakpoint}` を使用します。 - -```css ---ion-grid-padding: 5px; - ---ion-grid-padding-xs: 5px; ---ion-grid-padding-sm: 5px; ---ion-grid-padding-md: 5px; ---ion-grid-padding-lg: 5px; ---ion-grid-padding-xl: 5px; -``` - -### Grid width {/* #grid-width */} - -固定グリッドの幅の値を画面サイズに応じてカスタマイズするには、各ブレークポイントごとに `--ion-grid-width-{breakpoint}` の値をオーバーライドします。 - -```css ---ion-grid-width-xs: 100%; ---ion-grid-width-sm: 540px; ---ion-grid-width-md: 720px; ---ion-grid-width-lg: 960px; ---ion-grid-width-xl: 1140px; -``` - -### Column Padding {/* #column-padding */} - -列の padding は `--ion-grid-column-padding` CSS 変数で全てのブレークポイントに対して設定することができます。個々のブレークポイントを上書きするには、CSS 変数 `--ion-grid-column-padding-{breakpoint}` を使用します。 - -```css ---ion-grid-column-padding: 5px; - ---ion-grid-column-padding-xs: 5px; ---ion-grid-column-padding-sm: 5px; ---ion-grid-column-padding-md: 5px; ---ion-grid-column-padding-lg: 5px; ---ion-grid-column-padding-xl: 5px; -``` diff --git a/docs/react.mdx b/docs/react.mdx deleted file mode 100644 index b29c3956644..00000000000 --- a/docs/react.mdx +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Ionic React -sidebar_label: 概要 -hide_title: true -hide_table_of_contents: true ---- - -import PageStyles from '@components/page/react/PageStyles'; - -import DocsCard from '@components/global/DocsCard'; -import DocsCards from '@components/global/DocsCards'; - - - Ionic Reactでアプリをつくろう: Framework and Documentation - - - - - -
-
-

コードひとつで
あらゆるプラットフォーム
まさにReact

- -- ✓ 100 以上のモバイルに最適化された React UI コンポーネント -- ✓ React の標準的なツールである react-dom -- ✓ iOS / Android / Electron / PWA に対応 - -[Get Started](#installation) - -
- -
- -
-
- -### モバイル、デスクトップ、ウェブにまたがる素晴らしいアプリを、あなたが知っている、そして愛する React で構築してください。 {/* #build-awesome-apps-across-mobile-desktop-and-web-with-the-react-you-know-and-love */} - -Ionic React は、Ionic Framework のネイティブ React バージョンで、世界中の何百万ものミッションクリティカルなアプリを動かしている、無料のオープンソース SDK です。 - -React を使用して、あらゆるプラットフォーム向けに受賞歴のあるアプリを出荷するために必要なすべてが揃っています。 - -
- -
- -## すばらしいデザイン {/* #amazing-design */} - -100 種類以上の美しいモバイル対応の UI コンポーネント、アニメーション、ジェスチャーから選択でき、軽量であなたのブランドに合うようにカスタマイズできます。 - -[Explore UI components](/components.mdx) - -
- -
- -
- -
- -
- -
- -## 使い慣れたツール {/* #familiar-tooling */} - -Ionic React プロジェクトは React プロジェクトと同じように、[react-dom](https://react.dev/reference/react-dom)を活用し、[Create React App (CRA)](https://github.com/facebook/create-react-app) アプリで通常見られるセットアップを行います。 [ルーティングとナビゲーション](/react/navigation.mdx) では、React Router が使用されます。 -React バージョン 16.8 以上と互換性があります。 - -
- -
- -
- -
- -
- -
- -## More than mobile {/* #more-than-mobile */} - -最新のネイティブランタイムである [Capacitor](https://capacitorjs.com) を使用して、Ionic React プロジェクトをネイティブの iOS、Android、Electron、Web に Progressive Web App としてデプロイできます。すべて 1 つの共有コードベースで。 - -
- -
- -
- -
- -
- -
- -## まさに React {/* #just-react */} - -結局のところ、ただの React なのです。Ionic React はオープンな Web 標準とビルトインのブラウザ機能を使用しているため、何百万とある Web ライブラリのどれとも互換性があります。 - -
- -
- -
- -
- -## インストール {/* #installation */} - -```shell-session -$ npm install -g @ionic/cli -$ ionic start myApp tabs --type react - -$ ionic serve █ -``` - -## Resources {/* #resources */} - - - -

Ionic Frameworkで素晴らしいアプリを作り始めるために知っておくべき基礎知識を学びます。

- - - -

個々のコンポーネントを使用するか、完全なアプリ体験をつくるか。

- - - -

IonicとReact Routerでアプリ内ナビゲーションの基本を学ぶ

- - - -

Ionicのライフサイクルイベントをクラスコンポーネントやフックで使用する方法について学びます。

- - - - - diff --git a/docs/react/testing.mdx b/docs/react/testing.mdx deleted file mode 100644 index c40482a29f6..00000000000 --- a/docs/react/testing.mdx +++ /dev/null @@ -1,7 +0,0 @@ ---- -sidebar_label: テスト ---- - -# Testing Ionic React - -When an `@ionic/react` application is generated using the Ionic CLI, it is automatically set up for unit testing and integration testing with [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro). The combo provides a great way to test your React components in isolation as well integrated together. For more information on how to get started testing an Ionic React app, see our article [Testing Ionic React Apps with Jest and React Testing Library](https://ionicframework.com/blog/testing-ionic-react-apps-with-jest-and-react-testing-library/). diff --git a/docs/studio/setup/installation.mdx b/docs/studio/setup/installation.mdx deleted file mode 100644 index 66a36519a2e..00000000000 --- a/docs/studio/setup/installation.mdx +++ /dev/null @@ -1,17 +0,0 @@ -# Studio のインストール - -Ionic Studio の最新版のダウンロードはこちらです。 [Ionic Dashboard](https://dashboard.ionicframework.com/personal/downloads). - -## 必要な環境 {/* #requirements */} - -- macOS あるいは Windows 10 -- [Node & npm](../../intro/environment.mdx#node--npm) がセットアップされている必要があります。 -- オプションとして、バージョン管理のために [Git](../../intro/environment.mdx#git) をインストール - -## インストール {/* #installation */} - -Ionic Studio のダウンロードリンクは Ionic ダッシュボードの [downloads section](https://dashboard.ionicframework.com/personal/downloads) にあります。 - -まず Ionic Studio をダウンロードしインストーラーを実行、ウィザードに従います。 Ionic Studio には依存するツールがあり、それらは起動時にインストールやアップデートが自動的に行われます。 - -Ionic Studio は新しいバージョンがリリースされると自動的にアップデートされますが、上記ダウンロードリンクよりインストールしなおすことも可能です。 diff --git a/redirects b/redirects deleted file mode 100644 index 2c7ddeb0656..00000000000 --- a/redirects +++ /dev/null @@ -1,3 +0,0 @@ -/ /index.html 200 -/case /case/index.html 200 -/docs/* /docs/index.html 200 diff --git a/src/theme/EventNavbar/index.tsx b/src/theme/EventNavbar/index.tsx deleted file mode 100644 index a002c898e98..00000000000 --- a/src/theme/EventNavbar/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React, { type ReactNode } from 'react'; -import styles from './styles.module.css'; - -const limitDatetime = '2022-07-09 14:00:00'; - -function EventNavbar(): ReactNode { - return ( - new Date().getTime() < new Date(limitDatetime).getTime() && ( -
- -
- ) - ); -} - -export default EventNavbar; diff --git a/src/theme/EventNavbar/styles.module.css b/src/theme/EventNavbar/styles.module.css deleted file mode 100644 index 140350cb225..00000000000 --- a/src/theme/EventNavbar/styles.module.css +++ /dev/null @@ -1,51 +0,0 @@ -.eventNavbar { - background: #C04848; /* fallback for old browsers */ - background: linear-gradient(to right, #480048, #B71C1C); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ -} - -.eventNavbarContent { - max-width: 800px; - margin: auto; - display: flex; - justify-content: center; - align-items: center; - padding: 16px 8px; -} - - -.headerTitle { - color: #ffffff; - padding: 0; - margin: 0; - font-size: 1.8rem; - line-height: 1.5rem; - text-align: right; -} - -.headerCopy { - display: block; - font-size: 0.9rem; - margin: 0 16px; - color: #ffffff; -} - -.headerLink { - color: #0F2027; - background: #FFEB3B; - font-size: 0.8rem; - font-weight: bold; - padding: 8px 16px; -} - -.headerLink:hover { - color: #0F2027; - background: #FDD835; -} - - - -@media (max-width: 767px) { - .eventNavbar{ - display: none; - } -} diff --git a/versioned_docs/version-v6/studio.mdx b/versioned_docs/version-v6/studio.mdx deleted file mode 100644 index 53770bef9f7..00000000000 --- a/versioned_docs/version-v6/studio.mdx +++ /dev/null @@ -1,31 +0,0 @@ ---- -hide_table_of_contents: true ---- - -import DocsCard from '@components/global/DocsCard'; -import DocsCards from '@components/global/DocsCards'; - -# Studio へようこそ - -Ionic Studio は、最小限のコーディングでアプリを構築し、プロトタイプを作成できるようにする、高速で簡単なアプリビルダーです。 - -Studio は、開発者のワークフローを置き換えるのではなく、既存のワークフローに統合するように設計されており、開発者やアーキテクトはお気に入りのツールを使って視覚的に構築したり、コードに落とし込んだりすることが可能です。 - -Studio -は、コードをツールに戻すことを完全にサポートしています。これは、アプリ開発ツール市場では事実上前例のないことです。 - -Studio はデスクトップツールであり、サブスクリプションが必要で、Ionic Angular 4.x+プロジェクトのみが対象です。開始するには、下記からサインアップしてください。 - - - -

Studioにサインアップして、今すぐビルドを開始しましょう。

- - - -

Studio内だけでなく、メールでも配信。

- - - -

Ionic Studioに関するよくあるご質問にお答えします。

- -