Skip to content

Commit 2881413

Browse files
committed
Merge branch 'main' of github.com:ionic-team/ionic-docs
# Conflicts: # docs/angular/storage.md
2 parents db7c8e5 + 29132d1 commit 2881413

File tree

56 files changed

+692
-16767
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+692
-16767
lines changed

docs/angular/storage.md

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,47 @@ sidebar_label: ストレージ
44
---
55

66
<head>
7-
<title>Angular App Data Storage Options - Ionic Documentation</title>
7+
<title>Angularアプリのデータストレージの選択肢 - Ionic Documentation</title>
88
<meta
99
name="description"
10-
content="A variety of options are available for storing data within Ionic apps made using Angular. Read our documentation for Ionic Secure Storage and @ionic/storage."
10+
content="A variety of options are available for storing data within Ionic apps made using Angular. Choose the options that best fit your storage needs."
1111
/>
1212
</head>
1313

14-
Ionic アプリ内にデータを保存するためのさまざまなオプションを用意しています
14+
Ionicアプリケーション内でデータを保存するには、さまざまなオプションが利用可能です。アプリケーションのニーズに最も適したオプションを選択することが最善です。単一のアプリケーションが複数のオプションにまたがる要件を持つ場合もあります
1515

16-
Here are two official Ionic options:
16+
:::info
17+
一部のストレージオプションはサードパーティ製プラグインや製品を伴います。そのような場合、それらのプラグインや製品を推奨またはサポートするものではありません。ここでは情報提供のみを目的として言及しています。
18+
:::
1719

18-
## Ionic Secure Storage
20+
以下に一般的なユースケースと解決策を示します:
1921

20-
For teams building mission-critical apps or requiring encryption support, [Ionic Secure Storage](https://ionic.io/docs/secure-storage) is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android.
22+
## ローカルアプリケーション設定とデータ
2123

22-
It makes it easy to build high performance, offline-ready Ionic apps across iOS, Android, and the web.
24+
多くのアプリケーションでは、設定やその他の軽量なキー/値データをローカルに保存する必要があります。[Capacitor Preferences](https://capacitorjs.com/docs/apis/preferences) プラグインは、こうしたシナリオを扱うために特別に設計されています。
2325

24-
[Learn more](https://ionic.io/products/secure-storage)
26+
## リレーショナルデータストレージ(モバイル専用)
2527

26-
## @ionic/storage
28+
一部のアプリケーション、特にオフラインファースト手法を採用しているものは、大量の複雑なリレーショナルデータをローカルに保存する必要がある場合があります。このようなシナリオでは、SQLiteプラグインを使用できます。最も一般的なSQLiteプラグインの提供元は以下の通りです:
2729

28-
For developers not requiring encryption nor relational data support, [@ionic/storage](https://github.com/ionic-team/ionic-storage) is an open source key/value API for building apps that work across storage engines on multiple platforms.
30+
- [Cordova SQLite Storage](https://github.com/storesafe/cordova-sqlite-storage) (a [convenience wrapper](https://danielsogl.gitbook.io/awesome-cordova-plugins/sqlite) also exists for this plugin to aid in implementation)
31+
- [Capacitor Community SQLite Plugin](https://github.com/capacitor-community/sqlite)
2932

30-
Additionally, Ionic Secure Storage has a driver that works with the key/value API in `@ionic/storage` while providing encryption and SQLite support.
33+
## 非リレーショナル型大容量データストレージ(モバイルおよびWeb)
3134

32-
Learn more about [@ionic/storage](https://github.com/ionic-team/ionic-storage)
35+
大量のデータを保存し、かつWebとモバイルの両方で動作する必要があるアプリケーションの場合、Webでは[indexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)を、モバイルでは前述のSQLiteプラグインのいずれかを使用するキー/値ペアデータストレージサービスを作成することが一つの解決策となります。
36+
37+
以下に、これを実現する方法の例を示します:
38+
39+
- [Full application](https://github.com/ionic-enterprise/tutorials-and-demos-ng/tree/main/demos/sqlcipher-kv-pair)
40+
- [Mobile Service](https://github.com/ionic-enterprise/tutorials-and-demos-ng/blob/main/demos/sqlcipher-kv-pair/src/app/core/mobile-kv-store.ts)
41+
- [Web Service](https://github.com/ionic-enterprise/tutorials-and-demos-ng/blob/main/demos/sqlcipher-kv-pair/src/app/core/web-kv-store.ts)
42+
43+
## その他の選択肢
44+
45+
Capacitorアプリケーション内で良好に動作し、ローカルストレージとクラウドベースストレージの両方を提供するその他のストレージオプションも存在し、アプリケーションとの統合が容易な場合があります。
46+
47+
例:
48+
49+
- [PouchDB](https://pouchdb.com/)
50+
- [Firestore](https://firebase.google.com/docs/firestore)

docs/api/radio.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,14 @@ import LabelPlacement from '@site/static/usage/v8/radio/label-placement/index.md
3636

3737
<LabelPlacement />
3838

39+
## Label Wrapping
40+
41+
Regardless of label placement, long text will not wrap by default. If the width of the radio is constrained, overflowing text will be truncated with an ellipsis. You can enable text wrapping by adding the `ion-text-wrap` class to a wrapper around the radio text or styling the `label` shadow part using the `::part()` selector.
42+
43+
import LabelWrap from '@site/static/usage/v8/radio/label-wrap/index.md';
44+
45+
<LabelWrap />
46+
3947
## Object Value References
4048

4149
By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.

docs/developer-resources/guides/first-app-v4/intro.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ It’s easy to get started. Note that all code referenced in this guide can be [
1111
Download/install these right away to ensure an optimal Ionic development experience:
1212

1313
- [Git](https://git-scm.com/downloads) for version control.
14-
- <strong>SSH client</strong>, such as [PuTTy](https://www.putty.org/), for secure login to Appflow.
14+
- <strong>SSH client</strong>, such as [PuTTy](https://putty.software/), for secure login to Appflow.
1515
- <strong>Node.js</strong> for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/).
1616
- <strong>A code editor</strong> for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/).
1717
- <strong>Command-line terminal (CLI)</strong>: FYI <strong>Windows</strong> users, for the best Ionic experience, we

docs/react/storage.md

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,50 @@
11
---
2+
title: Data Storage
23
sidebar_label: Storage
34
---
45

5-
# Data Storage
6+
<head>
7+
<title>React App Data Storage Options - Ionic Documentation</title>
8+
<meta
9+
name="description"
10+
content="A variety of options are available for storing data within Ionic apps made using React. Choose the options that best fit your storage needs."
11+
/>
12+
</head>
613

7-
There are variety of options available for storing data within an Ionic app.
14+
There are a variety of options available for storing data within an Ionic application. It is best to choose options that best fit the needs of your application. A single application may have requirements that span multiple options.
815

9-
Here are two official Ionic options:
16+
:::info
17+
Some storage options involve third-party plugins or products. In such cases, we neither endorse nor support those plugins or products. We are mentioning them here for informational purposes only.
18+
:::
1019

11-
## Ionic Secure Storage
20+
Here are some common use cases and solutions:
1221

13-
For teams building mission-critical apps or requiring encryption support, [Ionic Secure Storage](https://ionic.io/docs/secure-storage) is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android.
22+
## Local Application Settings and Data
1423

15-
It makes it easy to build high performance, offline-ready Ionic apps across iOS, Android, and the web.
24+
Many applications need to locally store settings as well as other lightweight key/value data. The [Capacitor Preferences](https://capacitorjs.com/docs/apis/preferences) plugin is specifically designed to handle these scenarios.
1625

17-
[Learn more](https://ionic.io/products/secure-storage)
26+
## Relational Data Storage (Mobile Only)
1827

19-
## @ionic/storage
28+
Some applications, especially those following an offline-first methodology, may require locally storing high volumes of complex relational data. For such scenarios, a SQLite plugin may be used. The most common SQLite plugin offerings are:
2029

21-
For developers not requiring encryption nor relational data support, [@ionic/storage](https://github.com/ionic-team/ionic-storage) is an open source key/value API for building apps that work across storage engines on multiple platforms.
30+
- [Cordova SQLite Storage](https://github.com/storesafe/cordova-sqlite-storage) (a [convenience wrapper](https://danielsogl.gitbook.io/awesome-cordova-plugins/sqlite) also exists for this plugin to aid in implementation)
31+
- [Capacitor Community SQLite Plugin](https://github.com/capacitor-community/sqlite)
2232

23-
Additionally, Ionic Secure Storage has a driver that works with the key/value API in `@ionic/storage` while providing encryption and SQLite support.
33+
## Non-Relational High Volume Data Storage (Mobile and Web)
2434

25-
Learn more about [@ionic/storage](https://github.com/ionic-team/ionic-storage)
35+
For applications that need to store a high volume of data as well as operate on both web and mobile, a potential solution is to create a key/value pair data storage service that uses [indexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) on the web and one of the previously mentioned SQLite plugins on mobile.
36+
37+
Here a sample of how this can be accomplished:
38+
39+
- [Full application](https://github.com/ionic-enterprise/tutorials-and-demos-react/tree/main/demos/sqlcipher-kv-pair)
40+
- [Mobile Service](https://github.com/ionic-enterprise/tutorials-and-demos-react/blob/main/demos/sqlcipher-kv-pair/src/utils/mobile-kv-store.ts)
41+
- [Web Service](https://github.com/ionic-enterprise/tutorials-and-demos-react/blob/main/demos/sqlcipher-kv-pair/src/utils/web-kv-store.ts)
42+
43+
## Other Options
44+
45+
Other storage options that provide local as well as cloud-based storage that work well within Capacitor applications also exist and may integrate well with your application.
46+
47+
For example:
48+
49+
- [PouchDB](https://pouchdb.com/)
50+
- [Firestore](https://firebase.google.com/docs/firestore)

docs/vue/storage.md

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,47 @@ sidebar_label: ストレージ
44
---
55

66
<head>
7-
<title>Vue App Data Storage for iOS and Android - Ionic Documentation</title>
7+
<title>Vue App Data Storage Options - Ionic Documentation</title>
88
<meta
99
name="description"
10-
content="There's a variety of options available for storing data within an Ionic app. Read our Vue data storage documentation for options on iOS, Android, and web apps."
10+
content="A variety of options are available for storing data within Ionic apps made using Vue. Choose the options that best fit your storage needs."
1111
/>
1212
</head>
1313

14-
There are variety of options available for storing data within an Ionic app.
14+
There are a variety of options available for storing data within an Ionic application. It is best to choose options that best fit the needs of your application. A single application may have requirements that span multiple options.
1515

16-
Here are two official Ionic options:
16+
:::info
17+
Some storage options involve third-party plugins or products. In such cases, we neither endorse nor support those plugins or products. We are mentioning them here for informational purposes only.
18+
:::
1719

18-
## Ionic Secure Storage
20+
Here are some common use cases and solutions:
1921

20-
For teams building mission-critical apps or requiring encryption support, [Ionic Secure Storage](https://ionic.io/docs/secure-storage) is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android.
22+
## Local Application Settings and Data
2123

22-
It makes it easy to build high performance, offline-ready Ionic apps across iOS, Android, and the web.
24+
Many applications need to locally store settings as well as other lightweight key/value data. The [Capacitor Preferences](https://capacitorjs.com/docs/apis/preferences) plugin is specifically designed to handle these scenarios.
2325

24-
[Learn more](https://ionic.io/products/secure-storage)
26+
## Relational Data Storage (Mobile Only)
2527

26-
## @ionic/storage
28+
Some applications, especially those following an offline-first methodology, may require locally storing high volumes of complex relational data. For such scenarios, a SQLite plugin may be used. The most common SQLite plugin offerings are:
2729

28-
For developers not requiring encryption nor relational data support, [@ionic/storage](https://github.com/ionic-team/ionic-storage) is an open source key/value API for building apps that work across storage engines on multiple platforms.
30+
- [Cordova SQLite Storage](https://github.com/storesafe/cordova-sqlite-storage) (a [convenience wrapper](https://danielsogl.gitbook.io/awesome-cordova-plugins/sqlite) also exists for this plugin to aid in implementation)
31+
- [Capacitor Community SQLite Plugin](https://github.com/capacitor-community/sqlite)
2932

30-
Additionally, Ionic Secure Storage has a driver that works with the key/value API in `@ionic/storage` while providing encryption and SQLite support.
33+
## Non-Relational High Volume Data Storage (Mobile and Web)
3134

32-
Learn more about [@ionic/storage](https://github.com/ionic-team/ionic-storage)
35+
For applications that need to store a high volume of data as well as operate on both web and mobile, a potential solution is to create a key/value pair data storage service that uses [indexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) on the web and one of the previously mentioned SQLite plugins on mobile.
36+
37+
Here a sample of how this can be accomplished:
38+
39+
- [Full application](https://github.com/ionic-enterprise/tutorials-and-demos-vue/tree/main/demos/sqlcipher-kv-pair)
40+
- [Mobile Service](https://github.com/ionic-enterprise/tutorials-and-demos-vue/blob/main/demos/sqlcipher-kv-pair/src/composables/mobile-kv-store.ts)
41+
- [Web Service](https://github.com/ionic-enterprise/tutorials-and-demos-vue/blob/main/demos/sqlcipher-kv-pair/src/composables/web-kv-store.ts)
42+
43+
## Other Options
44+
45+
Other storage options that provide local as well as cloud-based storage that work well within Capacitor applications also exist and may integrate well with your application.
46+
47+
For example:
48+
49+
- [PouchDB](https://pouchdb.com/)
50+
- [Firestore](https://firebase.google.com/docs/firestore)

src/components/global/Playground/stackblitz.utils.ts

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,6 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
173173
'react/variables.css',
174174
'react/tsconfig.json',
175175
'react/package.json',
176-
'react/package-lock.json',
177176
'react/index.html',
178177
'react/vite.config.js',
179178
'react/browserslistrc',
@@ -193,17 +192,16 @@ const openReactEditor = async (code: string, options?: EditorOptions) => {
193192

194193
const appTsx = 'src/App.tsx';
195194
const files = {
196-
'.eslintrc.js': defaultFiles[9],
197-
'.browserslistrc': defaultFiles[8],
198-
'vite.config.js': defaultFiles[7],
199-
'index.html': defaultFiles[6],
195+
'.eslintrc.js': defaultFiles[8],
196+
'.browserslistrc': defaultFiles[7],
197+
'vite.config.js': defaultFiles[6],
198+
'index.html': defaultFiles[5],
200199
'src/index.tsx': defaultFiles[0],
201200
[appTsx]: defaultFiles[1],
202201
'src/main.tsx': code,
203202
'src/theme/variables.css': defaultFiles[2],
204203
'tsconfig.json': defaultFiles[3],
205204
'package.json': JSON.stringify(package_json, null, 2),
206-
'package-lock.json': defaultFiles[5],
207205
...options?.files,
208206
'.stackblitzrc': `{
209207
"startCommand": "yarn run start"
@@ -224,7 +222,6 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
224222
const defaultFiles = await loadSourceFiles(
225223
[
226224
'vue/package.json',
227-
'vue/package-lock.json',
228225
'vue/index.html',
229226
'vue/variables.css',
230227
'vue/vite.config.ts',
@@ -248,17 +245,16 @@ const openVueEditor = async (code: string, options?: EditorOptions) => {
248245

249246
const mainTs = 'src/main.ts';
250247
const files = {
251-
'src/App.vue': defaultFiles[6],
248+
'src/App.vue': defaultFiles[5],
252249
'src/components/Example.vue': code,
253-
[mainTs]: defaultFiles[5],
254-
'src/env.d.ts': defaultFiles[9],
255-
'src/theme/variables.css': defaultFiles[3],
256-
'index.html': defaultFiles[2],
257-
'vite.config.ts': defaultFiles[4],
250+
[mainTs]: defaultFiles[4],
251+
'src/env.d.ts': defaultFiles[8],
252+
'src/theme/variables.css': defaultFiles[2],
253+
'index.html': defaultFiles[1],
254+
'vite.config.ts': defaultFiles[3],
258255
'package.json': JSON.stringify(package_json, null, 2),
259-
'package-lock.json': defaultFiles[1],
260-
'tsconfig.json': defaultFiles[7],
261-
'tsconfig.node.json': defaultFiles[8],
256+
'tsconfig.json': defaultFiles[6],
257+
'tsconfig.node.json': defaultFiles[7],
262258
...options?.files,
263259
'.stackblitzrc': `{
264260
"startCommand": "yarn run dev"

static/code/stackblitz/v6/angular/tsconfig.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
"experimentalDecorators": true,
1010
"module": "esnext",
1111
"moduleResolution": "node",
12+
"skipLibCheck": true,
1213
"importHelpers": true,
1314
"target": "es2015",
1415
"typeRoots": ["node_modules/@types"],

0 commit comments

Comments
 (0)