Skip to content

Commit ffb978c

Browse files
rdlabordlabo
committed
Merge branch 'main' of github.com:ionic-team/ionic-docs
# Conflicts: # docs/api/datetime.md # docs/cli.md # docs/developer-resources/books.md # docusaurus.config.js # package-lock.json
2 parents b65cf6d + 42e8ec3 commit ffb978c

File tree

122 files changed

+15719
-11476
lines changed

Some content is hidden

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

122 files changed

+15719
-11476
lines changed

‎docs/api/datetime.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ import CustomizingButtonTexts from '@site/static/usage/v8/datetime/buttons/custo
3636
import HighlightedDatesArray from '@site/static/usage/v8/datetime/highlightedDates/array/index.md';
3737
import HighlightedDatesCallback from '@site/static/usage/v8/datetime/highlightedDates/callback/index.md';
3838

39+
import ShowAdjacentDays from '@site/static/usage/v8/datetime/show-adjacent-days/index.md';
40+
3941
import MultipleDateSelection from '@site/static/usage/v8/datetime/multiple/index.md';
4042

4143
import GlobalTheming from '@site/static/usage/v8/datetime/styling/global-theming/index.md';
@@ -248,6 +250,18 @@ import Wheel from '@site/static/usage/v8/datetime/presentation/wheel/index.md';
248250

249251
<Wheel />
250252

253+
## 隣接する日を表示する
254+
255+
`showAdjacentDays` プロパティが `true` に設定されている場合、カレンダービューに前月と翌月の日が表示され、月の初めや終わりの空白を埋めることができます。ユーザーが有効な隣接日をクリックすると、カレンダーはその月のビューを表示するようにスムーズにアニメーションします。
256+
257+
`showAdjacentDays`が有効な場合、カレンダービューは常に6行表示されるため、グリッドを埋めるために必要に応じて前月または翌月の日が表示されます。例えば、ある月が週の初日に始まり、5行目で終わるとしても、6行目を完成させるために翌月の日が最後に表示されます。
258+
259+
:::note
260+
This property is only supported when using `presentation="date"` and `preferWheel="false"`.
261+
:::
262+
263+
<ShowAdjacentDays />
264+
251265
## 複数の日付の選択
252266

253267
`multiple`プロパティが`true`に設定されている場合、カレンダーピッカーから複数の日付を選択することができます。選択した日付をクリックすると選択が解除されます。

‎docs/api/input-otp.md

Lines changed: 173 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,173 @@
1+
---
2+
title: "ion-input-otp"
3+
---
4+
import Props from '@ionic-internal/component-api/v8/input-otp/props.md';
5+
import Events from '@ionic-internal/component-api/v8/input-otp/events.md';
6+
import Methods from '@ionic-internal/component-api/v8/input-otp/methods.md';
7+
import Parts from '@ionic-internal/component-api/v8/input-otp/parts.md';
8+
import CustomProps from '@ionic-internal/component-api/v8/input-otp/custom-props.mdx';
9+
import Slots from '@ionic-internal/component-api/v8/input-otp/slots.md';
10+
11+
<head>
12+
<title>ion-input-otp: One-Time Password Input Component</title>
13+
<meta name="description" content="ion-input-otp is a component for entering one-time passwords (OTP) with support for multiple input boxes and automatic focus management." />
14+
</head>
15+
16+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
17+
18+
<EncapsulationPill type="scoped" />
19+
20+
The Input OTP component is a specialized input component designed for entering one-time passwords (OTP). It provides a user-friendly interface for entering verification codes with support for multiple input boxes and automatic focus management.
21+
22+
## Basic Usage
23+
24+
The component provides 4 input boxes by default, which is a common length for many verification codes. The number of input boxes can be customized using the `length` property.
25+
26+
import Basic from '@site/static/usage/v8/input-otp/basic/index.md';
27+
28+
<Basic />
29+
30+
## Type
31+
32+
The `type` property determines the input format, supporting either numeric or alphanumeric verification codes. It accepts two values: `number` and `text`. It uses `type="number"` by default for entering numeric verification codes. When `type="text"` is specified, it accepts alphanumeric input. This flexibility allows handling different OTP formats, whether numeric-only codes (like SMS verification codes) or alphanumeric codes (like backup codes or recovery keys).
33+
34+
The `type` property automatically sets both the `inputmode` and `pattern` attributes:
35+
- When `type="number"`:
36+
- Sets `inputmode="numeric"` to show a numeric keyboard on mobile devices
37+
- Sets `pattern="[\p{N}]"` to allow only numeric input
38+
- When `type="text"`:
39+
- Sets `inputmode="text"` to show a standard keyboard
40+
- Sets `pattern="[\p{L}\p{N}]"` to allow alphanumeric input
41+
42+
See the [Pattern](#pattern) section for more details on pattern validation and customization.
43+
44+
import Type from '@site/static/usage/v8/input-otp/type/index.md';
45+
46+
<Type />
47+
48+
## Shape
49+
50+
The `shape` property controls the border radius of the input boxes, creating rounded or sharp corners.
51+
52+
import Shape from '@site/static/usage/v8/input-otp/shape/index.md';
53+
54+
<Shape />
55+
56+
## Fill
57+
58+
The `fill` property controls the background style of the input boxes, offering bordered or filled backgrounds.
59+
60+
import Fill from '@site/static/usage/v8/input-otp/fill/index.md';
61+
62+
<Fill />
63+
64+
## Size
65+
66+
The `size` property provides different size options for the input boxes.
67+
68+
import Size from '@site/static/usage/v8/input-otp/size/index.md';
69+
70+
<Size />
71+
72+
## Separators
73+
74+
The `separators` property adds visual dividers between one or more of the input boxes. Separators can be defined in three ways:
75+
- Comma-separated string of numbers (e.g., `"1,3"`)
76+
- Array of numbers (e.g., `[1, 3]`)
77+
- String `"all"` to show separators between every input box
78+
79+
The numbers represent the index after which a separator should appear. For example, `"1,3"` displays a separator after the first and third input box. This can be used to create visually distinct groupings of input boxes, but it will still have one value.
80+
81+
import Separators from '@site/static/usage/v8/input-otp/separators/index.md';
82+
83+
<Separators />
84+
85+
## States
86+
87+
The component supports various states for automatic styling of input boxes:
88+
- `disabled` and `readonly` states via respective properties
89+
- Form validation states: `valid` and `invalid` visually indicated through CSS classes
90+
- In Angular: validation states are automatically managed through the framework's value accessors and form validation
91+
- For other frameworks: developers must manually add `ion-valid`, `ion-invalid`, and `ion-touched` classes
92+
- `ion-invalid` styles only display when touched (`ion-touched`)
93+
- `ion-valid` styles only display when focused (`has-focus`)
94+
95+
import States from '@site/static/usage/v8/input-otp/states/index.md';
96+
97+
<States />
98+
99+
## Pattern
100+
101+
The `pattern` property enables custom validation using regular expressions. It accepts a [string regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Cheatsheet) or [unicode regular expression](https://www.regular-expressions.info/unicode.html) to validate allowed characters. The `pattern` must match the entire value, not just a subset. Default patterns:
102+
- `type="number"`: `"[\p{N}]"` for matching any kind of numeric character in any script.
103+
- `type="text"`: `"[\p{L}\p{N}]"` for any kind of numeric character in any script and any kind of letter from any language.
104+
105+
The component will prevent users from entering any characters that don't match the specified pattern. Developers can override these defaults by providing their own pattern string to match specific input requirements.
106+
107+
:::tip
108+
When using a custom `pattern`, remember that the `type` property controls which keyboard appears on mobile devices:
109+
- Use `type="number"` for numeric-only patterns to show the numeric keyboard
110+
- Use `type="text"` for patterns that include letters to show the alphanumeric keyboard
111+
:::
112+
113+
import Pattern from '@site/static/usage/v8/input-otp/pattern/index.md';
114+
115+
<Pattern />
116+
117+
## Theming
118+
119+
### Colors
120+
121+
The `color` property changes the color palette for input boxes. For `outline` fills, this property changes the caret color, highlight color and border color. For `solid` fills, this property changes the caret color and highlight color.
122+
123+
:::note
124+
The `color` property does *not* change the text color of the input OTP. For that, use the [`--color` CSS property](#css-custom-properties-1).
125+
:::
126+
127+
import Colors from '@site/static/usage/v8/input-otp/theming/colors/index.md';
128+
129+
<Colors />
130+
131+
### CSS Custom Properties
132+
133+
Input OTP uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input-otp` for customization will not work; therefore we recommend adding a class and customizing it that way. Due to certain styles being applied based on the `fill`, you may need to override properties on the fills separately.
134+
135+
import CSSProps from '@site/static/usage/v8/input-otp/theming/css-properties/index.md';
136+
137+
<CSSProps />
138+
139+
## Accessibility
140+
141+
### Keyboard Interactions
142+
143+
The keyboard navigation for Input OTP follows the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/)'s recommendations for composite widgets. It is treated as a composite widget because it contains multiple focusable elements (input boxes) that function as a single control.
144+
145+
These keyboard interactions apply to all `ion-input-otp` elements when the component is not disabled.
146+
147+
| Key | Description |
148+
| --- | --- |
149+
| <kbd>Tab</kbd> | When first tabbing into the component, focus moves to the first empty box. If all boxes are filled, focus moves to the last box. Once inside the component, tabbing moves to the next focusable element on the page. |
150+
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | When tabbing backwards into the component, focus moves to the first empty box. If all boxes are filled, focus moves to the last box. Once inside the component, shift tabbing focus moves to the previous focusable element on the page. |
151+
| <kbd>ArrowRight</kbd> | Moves focus to the next input box, stopping at the first empty box. In RTL mode, moves focus back to any previous box that contains a value. |
152+
| <kbd>ArrowLeft</kbd> | Moves focus back to any previous box that contains a value. In RTL mode, moves focus to the next input box, stopping at the first empty box. |
153+
| Any character matching the `pattern` property | Fills the current box and automatically moves focus to the next empty box. If all boxes are filled, focus remains on the last box. If the current box has a value, override the value with the entered character. In RTL mode, input fills boxes from right to left. |
154+
| <kbd>Backspace</kbd> | In an empty box: moves focus back one box and clears its value. <br/> In a box with a value: clears that value. <br/> With values in boxes to the right: shifts them all one position to the left. In RTL mode, with values in boxes to the left: shifts them all one position to the right. |
155+
| <kbd>Ctrl</kbd> + <kbd>V</kbd> <br/> <kbd>Cmd</kbd> + <kbd>V</kbd> | Pastes content starting from the first box, regardless of which box is currently focused. All existing values are cleared before pasting. For example, if you have "1234" in all boxes and paste "56", the result will be "56" in the first two boxes with the remaining boxes empty. If the pasted content is longer than the available boxes, the extra characters are ignored. |
156+
157+
## Properties
158+
<Props />
159+
160+
## Events
161+
<Events />
162+
163+
## Methods
164+
<Methods />
165+
166+
## CSS Shadow Parts
167+
<Parts />
168+
169+
## CSS Custom Properties
170+
<CustomProps />
171+
172+
## Slots
173+
<Slots />

‎docs/cli.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,8 @@ Ionic CLI は、[TypeScript](/docs/reference/glossary#typescript)と [Node.js](/
4747

4848
Ionic CLI の問題をトラブルシューティングするには、以下の方法が役立ちます:
4949

50-
- 最新バージョンの Ionic CLI がインストールされていることを確認します。インストールされているバージョンは、`ionic --version`を実行することで取得できます。
51-
- 最新の Node LTS がインストールされていることを確認します。[Node & npm](/docs/intro/environment#node-npm) environment setup を参照してください。
52-
- `verbose` フラグは、デバッグメッセージを表示し、問題を絞り込むことができます。
53-
- 接続の問題は、プロキシの設定が適切でないことが原因である可能性があります。リクエストプロキシの設定については、[Using a Proxy](/docs/cli/using-a-proxy) を参照してください。
54-
- Ionic CLI のグローバルな設定ディレクトリは、すべてのプラットフォームで `~/.ionic` です。このディレクトリは安全に削除でき、Ionic CLI が再投入しますが、すべての設定（ユーザーセッションを含む）は失われます。このディレクトリは[CLI 環境変数](/docs/cli/configuration#environment-variables)で設定します。
50+
- Ionic CLIの最新バージョンがインストールされていることを確認します。 `ionic --version` を実行して、インストールされているIonic CLIのバージョンを取得します。Ionic CLIのバージョンはIonic Frameworkのバージョンとは関係ありません。
51+
- 最新のNode LTSがインストールされていることを確認する。 [Node & npm](/docs/intro/environment#node-npm) 環境設定を参照してください。
52+
- `verbose` フラグはデバッグメッセージを表示し、問題を絞り込むことができます。
53+
- 接続の問題は、プロキシの設定が適切でないことが原因かもしれません。リクエストのプロキシ設定については、[プロキシを使う](/docs/cli/using-a-proxy)を参照してください。
54+
- グローバルIonic CLI設定ディレクトリは、すべてのプラットフォームで `~/.ionic` です。このディレクトリは安全に削除でき、Ionic CLIが再作成しますが、すべての設定（ユーザーセッションを含む）は失われます。このディレクトリを[CLI環境変数](/docs/cli/configuration#environment-variables)で設定します。

‎docs/react/navigation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -197,7 +197,7 @@ const UsersListPage: React.FC = () => {
197197

198198
Other components that have the `routerLink` prop are `IonButton`, `IonCard`, `IonRouterLink`, `IonFabButton`, and `IonItemOption`.
199199

200-
Each of these components also have a `routerDirection` prop to explicitly set the type of page transition to use ("back", "forward", or "none").
200+
Each of these components also have a `routerDirection` prop to explicitly set the type of page transition to use (`"forward"`, `"back"`, or `"root"`).
201201

202202
Outside of these components that have the `routerLink` prop, you can also use React Routers [`Link`](https://v5.reactrouter.com/web/api/Link) component to navigate between views:
203203

‎docs/reference/support.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ The current status of each Ionic Framework version is:
2323
| Version | Status | Released | Maintenance Ends | Ext. Support Ends |
2424
| :-----: | :------------: | :----------: | :--------------: | :---------------: |
2525
| V8 | **Active** | Apr 17, 2024 | TBD | TBD |
26-
| V7 | Maintenance | Mar 29, 2023 | Oct 17, 2024 | Apr 17, 2025 |
26+
| V7 | End of Support | Mar 29, 2023 | Oct 17, 2024 | Apr 17, 2025 |
2727
| V6 | End of Support | Dec 8, 2021 | Sep 29, 2023 | Mar 29, 2024 |
2828
| V5 | End of Support | Feb 11, 2020 | June 8, 2022 | Dec 8, 2022 |
2929
| V4 | End of Support | Jan 23, 2019 | Aug 11, 2020 | Sept 30, 2022 |

‎docs/vue/navigation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ const routes: Array<RouteRecordRaw> = [
138138

139139
The `router-link` attribute can be set on any Ionic Vue component, and the router will navigate to the route specified when the component is clicked. The `router-link` attribute accepts string values as well as named routes, just like `router.push` from Vue Router. For additional control, the `router-direction` and `router-animation` attributes can be set as well.
140140

141-
The `router-direction` attribute accepts values of `forward`, `back`, or `none` and is used to control the direction of the page transition.
141+
The `router-direction` attribute accepts values of `"forward"`, `"back"`, or `"root"` and is used to control the direction of the page transition.
142142

143143
The `router-animation` attribute accepts an `AnimationBuilder` function and is used to provide a custom page transition that is only used when clicking the component it is provided on. The `AnimationBuilder` type is a function that returns an Ionic Animation instance. See the [Animations documentation](../utilities/animations) for more information on using animations in Ionic Vue.
144144

‎docs/vue/utility-functions.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ interface UseIonRouterResult {
7272
forward: (routerAnimation?: AnimationBuilder) => void;
7373
navigate: (
7474
location: string | Location,
75-
routerDirection?: 'forward' | 'back' | 'root' | 'none',
75+
routerDirection?: 'forward' | 'back' | 'root',
7676
routerAction?: 'push' | 'pop' | 'replace',
7777
routerAnimation?: AnimationBuilder
7878
) => void;

‎docusaurus.config.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const ArchivedVersionsDropdownItems = Object.entries(ARCHIVED_VERSIONS_JSON).spl
3333
const BASE_URL = '/docs';
3434

3535
module.exports = {
36-
title: 'Ionic日本語ドキュメンテーション',
36+
title: 'Ionic Framework',
3737
tagline:
3838
'Ionicは、ウェブ開発者のためのアプリプラットフォームです。1つの共有コードベースとオープンなWeb標準を使用して、素晴らしいモバイル、Web、デスクトップアプリケーションのすべてを構築できます。',
3939
url: 'https://ionicframework.jp',
@@ -80,6 +80,7 @@ module.exports = {
8080
},
8181
exclude: ['README.md'],
8282
lastVersion: 'current',
83+
/** @type {import('@docusaurus/plugin-content-docs').VersionOptions} */
8384
versions: {
8485
current: {
8586
label: 'v8',
@@ -338,6 +339,7 @@ module.exports = {
338339
},
339340
},
340341
plugins: [
342+
// Allows usage of Sass/SCSS in the CSS preprocessor.
341343
'docusaurus-plugin-sass',
342344
[
343345
'docusaurus-plugin-module-alias',

0 commit comments

Comments
 (0)