Skip to content

Commit e7bdaed

Browse files
rdlabordlabo
committed
Merge branch 'main' of github.com:ionic-team/ionic-docs
# Conflicts: # docs/api/datetime.md # docs/api/modal.md # docs/vue/navigation.md # src/components/page/reference/ReleaseNotes/release-notes.json
2 parents e18bad1 + a81d8ed commit e7bdaed

File tree

63 files changed

+3358
-2340
lines changed

Some content is hidden

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

63 files changed

+3358
-2340
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
# Generated files
99
.docusaurus
1010
.cache-loader
11+
src/components/page/reference/ReleaseNotes/release-notes.json
1112

1213
# Misc
1314
.DS_Store

‎docs/api/datetime.md‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ import ShowingConfirmationButtons from '@site/static/usage/datetime/buttons/show
3434
import CustomizingButtons from '@site/static/usage/datetime/buttons/customizing-buttons/index.md';
3535
import CustomizingButtonTexts from '@site/static/usage/datetime/buttons/customizing-button-texts/index.md';
3636

37+
import MultipleDateSelection from '@site/static/usage/datetime/multiple/index.md';
38+
3739
import Theming from '@site/static/usage/datetime/theming/index.md';
3840

3941
<head>
@@ -207,12 +209,44 @@ Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-U
207209

208210
### 日付の選択
209211

210-
時刻の選択は、 `presentation` プロパティに `date-time`, `time-date`, または `date` を渡すことで行うことができます。
212+
時刻の選択は、 `presentation` プロパティに `date-time`, `time-date`, または `date` を渡すことで行うことで有効になります。
211213

212214
この例では、`date`の設定でdatetimeを指定しています。
213215

214216
<Date />
215217

218+
### ピッカーのホイールスタイル
219+
220+
デフォルトでは、Ionicは `presentation` を使用する場合、グリッドスタイルのレイアウトを優先して表示します。しかし、`preferWheel` プロパティを使用すると、ホイールスタイルを表示することができます。preferWheel` が `true` の場合、Ionic は可能な限りホイールスタイルのレイアウトを優先して表示します。
221+
222+
特定の `presentation` オプションには、グリッドとホイールの両方のスタイルがあり、開発者は `preferWheel` プロパティで選択することができます。その他の `presentation` の値はホイールスタイルのみを持ち、グリッドスタイルは決して表示されません。下の表は、どの `presentation` の値がグリッドスタイルとホイールスタイルを持つかを示しています。
223+
224+
| `presentation` | グリッドシステム | ホイールシステム |
225+
| -------------- | --------------- | ---------------- |
226+
| `date` | Yes | Yes |
227+
| `date-time` | Yes | Yes |
228+
| `month` | No | Yes |
229+
| `month-year` | No | Yes |
230+
| `time` | No | Yes |
231+
| `time-date` | Yes | Yes |
232+
| `year` | No | Yes |
233+
234+
以下の例では、ホイールピッカーに `presentation="date-time"` を指定しています。
235+
236+
import Wheel from '@site/static/usage/datetime/presentation/wheel/index.md';
237+
238+
<Wheel />
239+
240+
## Multiple Date Selection
241+
242+
If the `multiple` property is set to `true`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it.
243+
244+
:::note
245+
This property is only supported when using `presentation="date"` and `preferWheel="false"`.
246+
:::
247+
248+
<MultipleDateSelection />
249+
216250
## タイトル
217251

218252
デフォルトでは、`ion-datetime`は、コンポーネントに関連するヘッダーやタイトルを表示しません。開発者は `showDefaultTitle` プロパティを使用して、デフォルトのタイトル/ヘッダー構成を表示することができます。また、 `title` スロットを使用して、ヘッダーに表示される内容をカスタマイズすることもできます。

‎docs/api/modal.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,14 @@ import SheetBackgroundContentExample from '@site/static/usage/modal/sheet/backgr
126126

127127
<SheetBackgroundContentExample />
128128

129+
#### ハンドルの動作
130+
131+
シートモーダルでは、ブレークポイント間でシートをドラッグするために使用されるハンドルインジケータをオプションでレンダリングすることができます。 `handleBehavior` プロパティは、ハンドルがユーザーによってアクティブにされたときの振る舞いを設定するために使用されます。
132+
133+
import SheetHandleBehaviorExample from '@site/static/usage/modal/sheet/handle-behavior/index.md';
134+
135+
<SheetHandleBehaviorExample />
136+
129137
## スタイリング
130138

131139
モーダルはアプリケーションのルートで表示されるので、アプリ全体を覆うように表示されます。この動作は、インライン モーダルおよびコントローラから表示されるモーダルの両方に適用されます。その結果、カスタムのモーダルスタイルを特定のコンポーネントにスコープすることはできず、モーダルには適用されません。代わりに、スタイルはグローバルに適用する必要があります。ほとんどの開発者は、カスタムスタイルを `global.css` に配置すれば十分です。
@@ -240,6 +248,25 @@ See https://w3c.github.io/aria/#aria-modal for more information.
240248

241249
バックドロップが無効になると、ユーザーはポインタやキーボードを使用して、シートモーダルの外側の要素を操作することができるようになります。入力支援は、`aria-modal` の使用により、デフォルトではシートモーダルの外側にフォーカスを当てないかもしれません。オートフォーカスなどの機能は、ユーザーに警告することなく、支援技術が 2つのインタラクティブなコンテキスト間をジャンプする原因となるため、ここでは避けることをお勧めします。
242250

251+
## パフォーマンス
252+
253+
### インナー コンテンツのマウント
254+
255+
インラインの `ion-modal` のコンテンツは、閉じられるとアンマウントされます。このコンテンツがレンダリングに時間がかかる場合、開発者は `keepContentsMounted` プロパティを使用して、モーダルがマウントされると同時にコンテンツをマウントすることができます。これにより、モーダルが開かれたときにインナー コンテンツがすでにマウントされているので、アプリケーションの応答性を最適化することができます。
256+
257+
import Mount from '@site/static/usage/modal/performance/mount/index.md';
258+
259+
<Mount />
260+
261+
開発者は `keepContentsMounted` を使用する際に、以下の点に注意する必要があります。
262+
263+
- この機能は、既存のパフォーマンスの問題に対処するための最後の手段として使用すべきです。この機能を使用する前に、パフォーマンスのボトルネックを特定し、解決するように努めてください。さらに、パフォーマンスの問題を予測するためにこの機能を使用しないでください。
264+
265+
- この機能は、JavaScriptフレームワークを使用している場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをモーダルに渡すことができ、コンテンツは自動的にレンダリングされます。
266+
267+
- この機能はインラインモーダルでのみ動作します。 `modalController` で作成されたモーダルは先に作成されないので、インナーコンテンツも作成されません。
268+
269+
- インナー コンポーネントの JavaScript Framework ライフサイクル フックはすべて、モーダルが表示されたときではなく、モーダルがマウントされたときに実行されます。
243270

244271
## プロパティ
245272
<Props />

‎docs/api/popover.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,25 @@ type PositionAlign = 'start' | 'center' | 'end';
224224
| `ArrowLeft` | When used in a child popover, closes the popover and returns focus to the parent popover. |
225225
| `Space`, `Enter`, and `ArrowRight` | When focusing a trigger element, opens the associated popover. |
226226

227+
## Performance
228+
229+
### Mounting Inner Contents
230+
231+
The content of an inline `ion-popover` is unmounted when closed. If this content is expensive to render, developers can use the `keepContentsMounted` property to mount the content as soon as the popover is mounted. This can help optimize the responsiveness of your application as the inner contents will have already been mounted when the popover opens.
232+
233+
import Mount from '@site/static/usage/popover/performance/mount/index.md';
234+
235+
<Mount />
236+
237+
Developers should keep the following in mind when using `keepContentsMounted`:
238+
239+
- This feature should be used as a last resort in order to deal with existing performance problems. Try to identify and resolve performance bottlenecks before using this feature. Additionally, do not use this to anticipate performance problems.
240+
241+
- This feature is only needed when using a JavaScript Framework. Developers not using a framework can pass the contents to be rendered into the popover, and the contents will be rendered automatically.
242+
243+
- This feature only works with inline popovers. Popovers created with the `popoverController` are not created ahead of time, so the inner contents are not created either.
244+
245+
- Any JavaScript Framework lifecycle hooks on the inner component will run as soon as the popover is mounted, not when the popover is presented.
227246

228247
## プロパティ
229248
<Props />

‎docs/vue/navigation.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ Vue Routerを使ったルーティングについて知っていることはす
2121

2222
## 簡単なメモ
2323

24-
このガイドを読むと、これらの概念のほとんどが、Ionic Frameworkを使用しないVueルータに見られる概念と非常によく似ていることがわかります。あなたの意見は正しいでしょう!Ionic VueはVue Routerの長所を活用して、Ionic Frameworkを使ったアプリ構築への移行を可能な限りシームレスにしています。そのため、独自のルーティングソリューションを構築するよりも、可能な限りVueルータの機能に依存することをお勧めします。
24+
このガイドを読んでいると、これらのコンセプトのほとんどが、Ionic Frameworkを使わずにVue Routerで見られるコンセプトと非常に似ていることに気がつくかもしれません。あなたの観察は正しいでしょう! Ionic Vueは、Ionic Frameworkでアプリを構築するための移行をできるだけシームレスにするために、Vue Routerの最良の部分を活用しています。そのため、独自のルーティングソリューションを構築しようとするよりも、できるだけVue Routerの機能に依存することをお勧めします。
2525

2626
## 簡単なRoute
2727

‎src/components/global/Playground/icons/IconCss.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import React from 'react';
2+
3+
export const IconCss = () => (
4+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="12" width="12">
5+
<polygon points="5.902 27.201 3.656 2 28.344 2 26.095 27.197 15.985 30 5.902 27.201" fill="#1572b6"></polygon>
6+
<polygon points="16 27.858 24.17 25.593 26.092 4.061 16 4.061 16 27.858" fill="#33a9dc"></polygon>
7+
<polygon
8+
points="16 13.191 20.09 13.191 20.372 10.026 16 10.026 16 6.935 16.011 6.935 23.75 6.935 23.676 7.764 22.917 16.282 16 16.282 16 13.191"
9+
fill="#fff"
10+
></polygon>
11+
<polygon
12+
points="16.019 21.218 16.005 21.222 12.563 20.292 12.343 17.827 10.67 17.827 9.24 17.827 9.673 22.68 16.004 24.438 16.019 24.434 16.019 21.218"
13+
fill="#ebebeb"
14+
></polygon>
15+
<polygon
16+
points="19.827 16.151 19.455 20.29 16.008 21.22 16.008 24.436 22.344 22.68 22.391 22.158 22.928 16.151 19.827 16.151"
17+
fill="#fff"
18+
></polygon>
19+
<polygon
20+
points="16.011 6.935 16.011 8.855 16.011 10.018 16.011 10.026 8.555 10.026 8.555 10.026 8.545 10.026 8.483 9.331 8.342 7.764 8.268 6.935 16.011 6.935"
21+
fill="#ebebeb"
22+
></polygon>
23+
<polygon
24+
points="16 13.191 16 15.111 16 16.274 16 16.282 12.611 16.282 12.611 16.282 12.601 16.282 12.539 15.587 12.399 14.02 12.325 13.191 16 13.191"
25+
fill="#ebebeb"
26+
></polygon>
27+
</svg>
28+
);

‎src/components/global/Playground/icons/IconDefault.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import React from 'react';
2+
3+
export const IconDefault = () => (
4+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="12" width="12">
5+
<path d="M20.414,2H5V30H27V8.586ZM7,28V4H19v6h6V28Z" fill="#3178C6"></path>
6+
</svg>
7+
);

‎src/components/global/Playground/icons/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
export * from './IconHtml';
22
export * from './IconTs';
33
export * from './IconVue';
4+
export * from './IconDefault';
5+
export * from './IconCss';
46
export * from './IconDots';

‎src/components/global/Playground/index.tsx‎

Lines changed: 50 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import 'tippy.js/dist/tippy.css';
1111
import PlaygroundTabs from '../PlaygroundTabs';
1212
import TabItem from '@theme/TabItem';
1313

14-
import { IconHtml, IconTs, IconVue, IconDots } from './icons';
14+
import { IconHtml, IconTs, IconVue, IconDefault, IconCss, IconDots } from './icons';
1515

1616
const ControlButton = ({ isSelected, handleClick, title, label }) => {
1717
return (
@@ -163,21 +163,24 @@ export default function Playground({
163163
* before loading the iframes.
164164
*/
165165
useEffect(() => {
166-
const io = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
167-
const ev = entries[0];
168-
if (!ev.isIntersecting || renderIframes) return;
166+
const io = new IntersectionObserver(
167+
(entries: IntersectionObserverEntry[]) => {
168+
const ev = entries[0];
169+
if (!ev.isIntersecting || renderIframes) return;
169170

170-
setRenderIframes(true);
171+
setRenderIframes(true);
171172

172-
/**
173-
* Once the playground is loaded, it is never "unloaded"
174-
* so we can safely disconnect the observer.
175-
*/
176-
io.disconnect();
177-
}, { threshold: 0 });
173+
/**
174+
* Once the playground is loaded, it is never "unloaded"
175+
* so we can safely disconnect the observer.
176+
*/
177+
io.disconnect();
178+
},
179+
{ threshold: 0 }
180+
);
178181

179182
io.observe(hostRef.current!);
180-
})
183+
});
181184

182185
const isIOS = mode === Mode.iOS;
183186
const isMD = mode === Mode.MD;
@@ -276,11 +279,16 @@ export default function Playground({
276279
const extension = fileName.slice(fileName.lastIndexOf('.') + 1);
277280
switch (extension) {
278281
case 'ts':
282+
case 'tsx':
279283
return <IconTs />;
280284
case 'html':
281285
return <IconHtml />;
282286
case 'vue':
283287
return <IconVue />;
288+
case 'css':
289+
return <IconCss />;
290+
default:
291+
return <IconDefault />;
284292
}
285293
}
286294

@@ -440,36 +448,36 @@ export default function Playground({
440448
show the other. This is done to avoid flickering
441449
and doing unnecessary reloads when switching modes.
442450
*/}
443-
{devicePreview
444-
? [
445-
<div className={!isIOS ? 'frame-hidden' : 'frame-visible'}>
446-
<device-preview mode="ios">
447-
<iframe height={frameSize} ref={frameiOS} src={sourceiOS}></iframe>
448-
</device-preview>
449-
</div>,
450-
<div className={!isMD ? 'frame-hidden' : 'frame-visible'}>
451-
<device-preview mode="md">
452-
<iframe height={frameSize} ref={frameMD} src={sourceMD}></iframe>
453-
</device-preview>
454-
</div>,
455-
]
456-
: [
457-
<iframe
458-
height={frameSize}
459-
className={!isIOS ? 'frame-hidden' : ''}
460-
ref={frameiOS}
461-
src={sourceiOS}
462-
></iframe>,
463-
<iframe
464-
height={frameSize}
465-
className={!isMD ? 'frame-hidden' : ''}
466-
ref={frameMD}
467-
src={sourceMD}
468-
></iframe>,
469-
]}
470-
</div>
471-
] : []
472-
}
451+
{devicePreview
452+
? [
453+
<div className={!isIOS ? 'frame-hidden' : 'frame-visible'}>
454+
<device-preview mode="ios">
455+
<iframe height={frameSize} ref={frameiOS} src={sourceiOS}></iframe>
456+
</device-preview>
457+
</div>,
458+
<div className={!isMD ? 'frame-hidden' : 'frame-visible'}>
459+
<device-preview mode="md">
460+
<iframe height={frameSize} ref={frameMD} src={sourceMD}></iframe>
461+
</device-preview>
462+
</div>,
463+
]
464+
: [
465+
<iframe
466+
height={frameSize}
467+
className={!isIOS ? 'frame-hidden' : ''}
468+
ref={frameiOS}
469+
src={sourceiOS}
470+
></iframe>,
471+
<iframe
472+
height={frameSize}
473+
className={!isMD ? 'frame-hidden' : ''}
474+
ref={frameMD}
475+
src={sourceMD}
476+
></iframe>,
477+
]}
478+
</div>,
479+
]
480+
: []}
473481
</div>
474482
<div
475483
ref={codeRef}

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,12 +56,13 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => {
5656
}
5757

5858
const openAngularEditor = async (code: string, options?: EditorOptions) => {
59-
let [main_ts, app_module_ts, app_component_ts, app_component_css, styles_css, angular_json, tsconfig_json] = await loadSourceFiles([
59+
let [main_ts, app_module_ts, app_component_ts, app_component_css, styles_css, global_css, angular_json, tsconfig_json] = await loadSourceFiles([
6060
'angular/main.ts',
6161
'angular/app.module.ts',
6262
'angular/app.component.ts',
6363
'angular/app.component.css',
6464
'angular/styles.css',
65+
'angular/global.css',
6566
'angular/angular.json',
6667
'angular/tsconfig.json'
6768
])
@@ -88,6 +89,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => {
8889
'src/app/app.component.css': app_component_css,
8990
'src/index.html': '<app-root></app-root>',
9091
'src/styles.css': styles_css,
92+
'src/global.css': global_css,
9193
'angular.json': angular_json,
9294
'tsconfig.json': tsconfig_json,
9395
...options?.files

0 commit comments

Comments
 (0)