diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 00000000000..6c70128f275
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1,20 @@
+# Lines starting with '#' are comments.
+# Each line is a file pattern followed by one or more owners.
+
+# More details are here: https://help.github.com/articles/about-codeowners/
+
+# The '*' pattern is global owners.
+
+# Order is important. The last matching pattern has the most precedence.
+# The folders are ordered as follows:
+
+# In each subsection folders are ordered first by depth, then alphabetically.
+# This should make it easy to add new rules without breaking existing ones.
+
+/_templates/ @mapsandapps
+/docs/api/ @mapsandapps
+/src/ @mapsandapps
+/static/usage/ @mapsandapps
+
+/static/code/stackblitz/**/*/package.json @ionic-team/framework
+/static/code/stackblitz/**/*/package-lock.json @ionic-team/framework
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
index ced06132a9e..2903eb255f6 100644
--- a/.github/workflows/CI.yml
+++ b/.github/workflows/CI.yml
@@ -8,11 +8,11 @@ on: [pull_request]
jobs:
test:
- name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }}
+ name: Test on ${{ matrix.os }}
runs-on: ${{ matrix.os }}
strategy:
matrix:
- node_version: [16]
+ node_version: [19]
os: [windows-latest, macOS-latest]
steps:
@@ -25,9 +25,10 @@ jobs:
run: npm ci --legacy-peer-deps
- name: Lint
run: npm run lint
- # Lint changes should be pushed
- # to the branch before the branch
- # is merge eligible.
+ - name: Spell Check
+ run: npm run spellcheck
+ # Lint and spell check changes should be pushed
+ # to the branch before the branch is merge eligible.
- name: Check Diff
run: git diff --exit-code
shell: bash
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 327ea5004e8..0931f6f983c 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -4,6 +4,9 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check
- [Contributing Guide](#contributing-guide)
- [Development Workflow](#development-workflow)
+ - [Previewing Changes](#previewing-changes)
+ - [Linting Documentation](#linting-documentation)
+ - [Spell Check](#spell-check)
- [Using VS Code on Windows](#using-vs-code-on-windows)
- [Project Structure](#project-structure)
- [Directories](#directories)
@@ -12,7 +15,6 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check
- [Translation](#translation)
- [Reporting Issues](#reporting-issues)
- [Pull Request Guidelines](#pull-request-guidelines)
-
- [Deploying](#deploying)
- [License](#license)
@@ -20,6 +22,8 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check
## Development Workflow
+### Previewing Changes
+
In order to run the documentation locally, install the dependencies and run the development server:
```sh
@@ -27,7 +31,61 @@ $ npm install --legacy-peer-deps
$ npm start
```
-> **Note**: certain versions of npm (5-8) and Node.js (10-16) are required to run certain scripts.
+> [!NOTE]
+> Certain versions of npm (5-8) and Node.js (10-16) are required to run certain scripts.
+
+### Linting Documentation
+
+This repository uses [Prettier](https://prettier.io/), an opinionated code formatter, in order to keep consistent formatting throughout the documentation. Run the following command to automatically fix all formatting, and then push any changes:
+
+```
+npm run lint
+```
+
+### Spell Check
+
+This repository uses [cspell](https://cspell.org/), a spell checker for code, to automatically flag any spelling errors. Run the following command to see any spelling errors:
+
+```
+npm run spellcheck
+```
+
+> [!NOTE]
+> Any spelling errors will need to be fixed manually. There are various ways to ignore words or sections that were flagged erroneously. These are listed below.
+
+#### Ignoring words
+
+**To ignore:**
+
+- A **specific word**, add it to the following file: `cspell-wordlist.txt`
+ - For example, `Ionicons` is flagged as an unknown word. Since this is the name of our software, it has been added to this file to be ignored.
+- A **directory** or anything matching a **regular expression**, update the following file: `cspell.json`
+ - For example, we don't want to flag anything inside of code ticks (`) or code blocks (```), so there are regular expressions added to ignore anything inside of these.
+- An **entire line**, add the following comment above it:
+ ```markdown
+
+ ```
+- **Multiple lines**, add comments above and below the lines to be ignored:
+
+ ```markdown
+
+
+
Everything inside of these comments will be ignored by the spell checkr. Proofread your own words carefully.
+
+
+ ```
+
+> [!IMPORTANT]
+> You need to have line breaks between the `cspell` comments and any HTML elements,
+> otherwise the build will error with `Module build failed`.
+
+#### Tips
+
+Before adding a word or section to be ignored, see if there is a way to make it pass the spell check. Technical terms that are part of an API may need to be wrapped in code formatting. For example, the word `keydown` is flagged as an unknown word by the spell checker, but this is a [Web API event](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event). We can wrap any mentions of `keydown` in two backticks (\`keydown\`) in order to avoid it being flagged by the spell checker.
+
+Comments disabling the next line or entire sections of documentation are useful for making the spell checker ignore people's names.
+
+In general, we should try to avoid ignoring words unless they are technical terms that are used throughout the documentation and wouldn't necessarily make sense formatted as code.
---
@@ -87,6 +145,8 @@ We use Crowdin for our translation service. You can participate in the translati
_Please submit translation issues to the Crowdin page and not the Ionic Docs GitHub repo._
+
+
The Japanese translation of the docs were built by an independent team, lead by [rdlabo](https://github.com/rdlabo) and can be found and contributed to on the [ionic-jp group's `ionic-docs` project page](https://github.com/ionic-jp/ionic-docs).
## Reporting Issues
@@ -100,7 +160,8 @@ If the issue you're reporting is a bug, please be sure it is an issue with the I
- OS and browser versions
- If possible, a demo repo or CodePen/CodeSandbox
-> **Note**: Some [reference content](#reference-content) is pulled from other Ionic repos. In that case, please submit your issue on the docs repo with a link to the repo where the content lives.
+> [!NOTE]
+> Some [reference content](#reference-content) is pulled from other Ionic repos. In that case, please submit your issue on the docs repo with a link to the repo where the content lives.
---
@@ -110,20 +171,6 @@ When submitting pull requests, please keep the scope of your change contained to
---
-
-
## Deploying
The Ionic documentation's `main` branch is deployed automatically and separately from the [Ionic site](https://github.com/ionic-team/ionic-site) itself. The Ionic site then uses a proxy for paths under `/docs` to request the deployed documentation.
diff --git a/_templates/playground/new/angular.md.ejs.t b/_templates/playground/new/angular.md.ejs.t
index ab2bc1a81d7..f44075feb06 100644
--- a/_templates/playground/new/angular.md.ejs.t
+++ b/_templates/playground/new/angular.md.ejs.t
@@ -1,7 +1,7 @@
---
# this file's location depends on whether or not the css option or angular_ts option is selected via the prompt
-to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/${(css || angular_ts) ? 'angular/example_component_html.md' : 'angular.md'}` %>"
+to: "<%= `static/usage/v${version}/${name}/${path}/${(css || angular_ts) ? 'angular/example_component_html.md' : 'angular.md'}` %>"
---
```html
-<<%= name %>>>
+<<%= component %>>>
```
diff --git a/_templates/playground/new/angular_example_component_css.md.ejs.t b/_templates/playground/new/angular_example_component_css.md.ejs.t
index 233d88bd9d0..e6aab594e42 100644
--- a/_templates/playground/new/angular_example_component_css.md.ejs.t
+++ b/_templates/playground/new/angular_example_component_css.md.ejs.t
@@ -1,9 +1,9 @@
---
# this file only gets generated if `css` (from the command line prompt) is true
-to: "<%= css ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/angular/example_component_css.md` : null %>"
+to: "<%= css ? `static/usage/v${version}/${name}/${path}/angular/example_component_css.md` : null %>"
---
```css
-<%= name %> {
+<%= component %> {
/* styles go here */
}
```
diff --git a/_templates/playground/new/angular_example_component_ts.md.ejs.t b/_templates/playground/new/angular_example_component_ts.md.ejs.t
index e6132304d6f..fb07f495acb 100644
--- a/_templates/playground/new/angular_example_component_ts.md.ejs.t
+++ b/_templates/playground/new/angular_example_component_ts.md.ejs.t
@@ -1,6 +1,6 @@
---
# this file only gets generated if `angular_ts` (from the command line prompt) is true
-to: "<%= angular_ts ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/angular/example_component_ts.md` : null %>"
+to: "<%= angular_ts ? `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` : null %>"
---
```ts
import { Component } from '@angular/core';
diff --git a/_templates/playground/new/demo.html.ejs.t b/_templates/playground/new/demo.html.ejs.t
index b8ea2dff630..27bf47e1760 100644
--- a/_templates/playground/new/demo.html.ejs.t
+++ b/_templates/playground/new/demo.html.ejs.t
@@ -1,20 +1,20 @@
---
-arbitrary: <% nameWithoutIon = name.replace('ion-', ''); numberOfAncestors = (path.match(/\//g) || []).length; directoryChanges = '../'.repeat(numberOfAncestors) %>
-to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>"
+arbitrary: <% numberOfAncestors = (path.match(/\//g) || []).length; directoryChanges = '../'.repeat(numberOfAncestors) %>
+to: "<%= `static/usage/v${version}/${name}/${path}/demo.html` %>"
---
- <%= h.changeCase.titleCase(nameWithoutIon) %>
+ <%= h.changeCase.titleCase(name) %>
<% if (css){ %>
<% } %>
@@ -24,7 +24,7 @@ to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>"
+
+
diff --git a/docs/angular/performance.md b/docs/angular/performance.md
index cf441e2adfc..d2c78341765 100644
--- a/docs/angular/performance.md
+++ b/docs/angular/performance.md
@@ -56,6 +56,8 @@ For more information on how Angular manages change propagation with `ngFor` see
## From the Community
+
+
[High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony
[High Performance List Filtering in Ionic](https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/) - Josh Morony
@@ -64,6 +66,8 @@ For more information on how Angular manages change propagation with `ngFor` see
[Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony
+
+
:::note
Do you have a guide you'd like to share? Click the _Edit this page_ button below.
:::
diff --git a/docs/angular/platform.md b/docs/angular/platform.md
index 686a0c6fb20..5cb3546fc72 100644
--- a/docs/angular/platform.md
+++ b/docs/angular/platform.md
@@ -2,6 +2,9 @@
title: Platform
---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
Platform | Ionic Platform to Customize Apps to Fit Any Device
+
+
```tsx
import { Platform } from '@ionic/angular';
@@ -25,6 +38,23 @@ export class MyPage {
}
```
+
+
+
+```tsx
+import { Platform } from '@ionic/angular/standalone';
+
+@Component({...})
+export class MyPage {
+ constructor(public platform: Platform) {
+
+ }
+}
+```
+
+
+
+
## Methods
### `is`
diff --git a/docs/angular/slides.md b/docs/angular/slides.md
index c5eefbec3be..4ceb1d3f6df 100644
--- a/docs/angular/slides.md
+++ b/docs/angular/slides.md
@@ -2,6 +2,9 @@
title: Migrating from ion-slides to Swiper.js
---
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
Set Up Swiper.js for Angular Slides [Example] | Ionic
+
```typescript
// home.page.ts
@@ -152,6 +165,25 @@ export class HomePage {
}
```
+
+
+
+```typescript
+// home.page.ts
+
+import { IonicSlides } from '@ionic/angular/standalone';
+
+@Component({
+ ...
+})
+export class HomePage {
+ swiperModules = [IonicSlides];
+}
+```
+
+
+
+
```html
@@ -224,24 +256,24 @@ To migrate, we would change the name of the event to `slidechange`:
Below is a full list of event name changes when going from `ion-slides` to Swiper Angular:
-| ion-slides Event | Swiper Event |
-| ----------------------- | -------------------------- |
-| ionSlideWillChange | slidechangetransitionstart |
-| ionSlideDidChange | slidechangetransitionend |
-| ionSlideDoubleTap | doubletap |
-| ionSlideDrag | slidermove |
-| ionSlideNextStart | slidenexttransitionstart |
-| ionSlideNextEnd | slidenexttransitionend |
-| ionSlidePrevStart | slideprevtransitionstart |
-| ionSlidePrevEnd | slideprevtransitionend |
-| ionSlideReachStart | reachbeginning |
-| ionSlideReachEnd | reachend |
-| ionSlideTap | tap |
-| ionSlideTouchStart | touchstart |
-| ionSlideTouchEnd | touchend |
-| ionSlideTransitionStart | transitionstart |
-| ionSlideTransitionEnd | transitionend |
-| ionSlidesDidLoad | init |
+| ion-slides Event | Swiper Event |
+| ------------------------- | ---------------------------- |
+| `ionSlideWillChange` | `slidechangetransitionstart` |
+| `ionSlideDidChange` | `slidechangetransitionend` |
+| `ionSlideDoubleTap` | `doubletap` |
+| `ionSlideDrag` | `slidermove` |
+| `ionSlideNextStart` | `slidenexttransitionstart` |
+| `ionSlideNextEnd` | `slidenexttransitionend` |
+| `ionSlidePrevStart` | `slideprevtransitionstart` |
+| `ionSlidePrevEnd` | `slideprevtransitionend` |
+| `ionSlideReachStart` | `reachbeginning` |
+| `ionSlideReachEnd` | `reachend` |
+| `ionSlideTap` | `tap` |
+| `ionSlideTouchStart` | `touchstart` |
+| `ionSlideTouchEnd` | `touchend` |
+| `ionSlideTransitionStart` | `transitionstart` |
+| `ionSlideTransitionEnd` | `transitionend` |
+| `ionSlidesDidLoad` | `init` |
:::note
All events available in Swiper Element can be found at https://swiperjs.com/swiper-api#events.
@@ -281,19 +313,19 @@ export class SlidesExample {
Below is a full list of method changes when going from `ion-slides` to Swiper Element:
-| ion-slides Method | Notes |
-| ------------------ | ------------------------------------------------------------------------------------ |
-| getActiveIndex() | Use the `activeIndex` property instead. |
-| getPreviousIndex() | Use the `previousIndex` property instead. |
-| getSwiper() | Get a reference to the Swiper instance using the `swiper` prop. See example above. |
-| isBeginning() | Use the `isBeginning` property instead. |
-| isEnd() | Use the `isEnd` property instead. |
-| length() | Use the `slides` property instead. (i.e swiper.slides.length) |
-| lockSwipeToNext() | Use the `allowSlidesNext` property instead. |
-| lockSwipeToPrev() | Use the `allowSlidePrev` property instead. |
-| lockSwipes() | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. |
-| startAutoplay() | Use the `autoplay` property instead. |
-| stopAutoplay() | Use the `autoplay` property instead. |
+| ion-slides Method | Notes |
+| -------------------- | ------------------------------------------------------------------------------------ |
+| `getActiveIndex()` | Use the `activeIndex` property instead. |
+| `getPreviousIndex()` | Use the `previousIndex` property instead. |
+| `getSwiper()` | Get a reference to the Swiper instance using the `swiper` prop. See example above. |
+| `isBeginning()` | Use the `isBeginning` property instead. |
+| `isEnd()` | Use the `isEnd` property instead. |
+| `length()` | Use the `slides` property instead. (i.e swiper.slides.length) |
+| `lockSwipeToNext()` | Use the `allowSlidesNext` property instead. |
+| `lockSwipeToPrev()` | Use the `allowSlidePrev` property instead. |
+| `lockSwipes()` | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. |
+| `startAutoplay()` | Use the `autoplay` property instead. |
+| `stopAutoplay()` | Use the `autoplay` property instead. |
:::note
All methods and properties available on the Swiper instance can be found at https://swiperjs.com/swiper-api#methods-and-properties.
diff --git a/docs/angular/your-first-app/8-distribute.md b/docs/angular/your-first-app/8-distribute.md
index 44b3781b476..545e57c1945 100644
--- a/docs/angular/your-first-app/8-distribute.md
+++ b/docs/angular/your-first-app/8-distribute.md
@@ -18,7 +18,7 @@ For more on connecting your code repository to Appflow, checkout the [Connect yo
The Appflow SDK (also known as Ionic Deploy plugin) will allow you to take advantage of arguably two of the best Appflow features: deploying live updates to your app and bypassing the app stores. Ionic Appflow's Live Update feature is shipped with Appflow SDK and features the capabilities of detecting and syncing the updates for your app that you have pushed to your identified channels within the dashboard.
-To get the Appflow SDK plugin added to your project, you can follow the install instructions within the Appflow Dashboard by clicking on "Install Instructions" inside of the `Deploy > Destinations` section. Alternatively, you can install the plugin manually by excuting the following command in your app's root directory:
+To get the Appflow SDK plugin added to your project, you can follow the install instructions within the Appflow Dashboard by clicking on "Install Instructions" inside of the `Deploy > Destinations` section. Alternatively, you can install the plugin manually by executing the following command in your app's root directory:
```shell
ionic deploy add \
@@ -75,7 +75,7 @@ For more information, visit the [Create an Automation](https://ionic.io/docs/app
## Create an Environment
-[Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) can be futher customized via [Environments](https://ionic.io/docs/appflow/automation/environments). This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the [Automation](https://ionic.io/docs/appflow/automation/intro) feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever.
+[Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) can be further customized via [Environments](https://ionic.io/docs/appflow/automation/environments). This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the [Automation](https://ionic.io/docs/appflow/automation/intro) feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever.
Creating an Environment is available for those on our [Basic plans](https://ionic.io/pricing) and above. More information on this can be found in the [Create an Environment](https://ionic.io/docs/appflow/quickstart/environment) section within the Appflow docs.
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index f0ce55ff644..91651affb23 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -29,15 +29,27 @@ import Basic from '@site/static/usage/v7/checkbox/basic/index.md';
## Label Placement
-開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
+開発者は `labelPlacement` プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。このプロパティはフレックスボックスの `flex-direction` プロパティを反映しています。
import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md';
+## Alignment
+
+Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
+
+:::note
+Stacked checkboxes can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
+:::
+
+import Alignment from '@site/static/usage/v7/checkbox/alignment/index.md';
+
+
+
## Justification
-開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
+開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの `justify-content` プロパティを反映しています。
import Justify from '@site/static/usage/v7/checkbox/justify/index.md';
diff --git a/docs/api/content.md b/docs/api/content.md
index 16ee4f360a0..a437a90020f 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -95,6 +95,29 @@ import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index
+### Safe Area Padding
+
+The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables).
+
+The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable.
+
+```css
+ion-content::part(scroll) {
+ padding-top: var(--ion-safe-area-top, 0);
+}
+```
+
+Another common use case is to apply padding to the left side of the content to account for the notch when the device is in landscape mode and the notch is on the left side. This can be done by setting the `padding-left` property to the value of the `--ion-safe-area-left` variable.
+
+```css
+ion-content::part(scroll) {
+ padding-left: var(--ion-safe-area-left, 0);
+}
+```
+
+import SafeArea from '@site/static/usage/v7/content/theming/safe-area/index.md';
+
+
## Interfaces
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 674c48ff229..d71d9fc0f78 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -37,6 +37,7 @@ import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlighted
import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md';
import GlobalTheming from '@site/static/usage/v7/datetime/styling/global-theming/index.md';
+import CalendarDaysStyling from '@site/static/usage/v7/datetime/styling/calendar-days/index.md';
import WheelStyling from '@site/static/usage/v7/datetime/styling/wheel-styling/index.md';
@@ -61,7 +62,7 @@ Datetimeはカレンダーとタイムホイールのインターフェイスを
Ionic Frameworkのdatetimeは、開発者が一般的な落とし穴を回避できるように設計されており、
開発者は簡単にdatetime値を操作し、ユーザーにシンプルなdatetimeピッカーを提供し、素晴らしいユーザーエクスペリエンスを提供することができます。
-### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ
+### ISO 8601 Datetime Format: `YYYY-MM-DDTHH:mmZ`
Ionic Frameworkでは、[ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を値として使用します。
この値は、JavaScriptの `Date` オブジェクトを使用するのではなく、単純に文字列として使用されます。
@@ -70,15 +71,15 @@ JSONオブジェクトやデータベース内でのシリアライズやパー
以下は、 `ion-datetime` で使用できる ISO 8601 フォーマットの例です:
-| Description | Format | Datetime Value Example |
-| -------------------- | ---------------------- | ---------------------------- |
-| Year | YYYY | 1994 |
-| Year and Month | YYYY-MM | 1994-12 |
-| Complete Date | YYYY-MM-DD | 1994-12-15 |
-| Date and Time | YYYY-MM-DDTHH:mm | 1994-12-15T13:47 |
-| UTC Timezone | YYYY-MM-DDTHH:mm:ssZ | 1994-12-15T13:47:20Z |
-| Timezone Offset | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20+05:00 |
-| Hour and Minute | HH:mm | 13:47 |
+| Description | Format | Datetime Value Example |
+| -------------------- | ------------------------ | ------------------------------ |
+| Year | `YYYY` | `1994` |
+| Year and Month | `YYYY-MM` | `1994-12` |
+| Complete Date | `YYYY-MM-DD` | `1994-12-15` |
+| Date and Time | `YYYY-MM-DDTHH:mm` | `1994-12-15T13:47` |
+| UTC Timezone | `YYYY-MM-DDTHH:mm:ssZ` | `1994-12-15T13:47:20Z` |
+| Timezone Offset | `YYYY-MM-DDTHH:mm:ssTZD` | `1994-12-15T13:47:20+05:00` |
+| Hour and Minute | `HH:mm` | `13:47` |
年号は常に4桁、ミリ秒は（加算される場合は）常に3桁、その他は常に2桁であることに注意してください。
ミリ秒は3桁、その他は2桁である。
@@ -98,13 +99,17 @@ JSONオブジェクトやデータベース内でのシリアライズやパー
モーダルやポップオーバーなどのオーバーレイで日付時刻を表示する必要がある場合は、 [ion-datetime-button](./datetime-button) を使用することをお勧めします。スペースに制約がある場合は、 `ion-datetime-button` を使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付と時刻のピッカーがオーバーレイで表示されます。
+## 非同期に値を設定する
+
+すでにdatetimeが作成された後にプログラムで`value`が更新されると、datetimeは自動的に新しい日付にジャンプします。しかし、ユーザーがdatetimeを操作しているときに、この方法で`value`を更新することは避けることをお勧めします。例えば、datetimeの`value`が非同期処理で読み込まれる場合、値の更新が終わるまでCSSでdatetimeを非表示にすることをお勧めします。
+
## 日付コンテナ
### 日付の最小値と最大値
日付の最小値と最大値をカスタマイズするには、 `min` と `max` コンポーネントプロパティを使用します。上の表にあるのと同じ IS0 8601 フォーマットに従って、各コンポーネントはユーザーが選択できる日付を制限することができます。
-次の例では、日付の選択を 2022 年 3 月から 2022 年 5 月のみに制限しています。
+以下の例では、日付の選択を2022年3月から2022年5月のみに制限しています。
@@ -118,8 +123,8 @@ JSONオブジェクトやデータベース内でのシリアライズやパー
### 高度な日付制限
-`isDateEnabled` プロパティを使用すると、開発者は ISO 8601 日付文字列を使用して、特定の日、日付の範囲、週末、または任意のカスタムルールを無効にするように `ion-datetime` をカスタマイズすることができます。
-`isDateEnabled` プロパティは、日付が有効かどうかを示す boolean 値を返す関数を受け付けます。この関数は、レンダリングされた各日付、前月、今月、来月に対して呼び出されます。カスタムの実装では、ジャンキングを避けるために、パフォーマンスを最適化する必要があります。
+`isDateEnabled` プロパティを使用すると、開発者は `ion-datetime` をカスタマイズして、ISO 8601 の日付文字列を使用して、特定の日、日付の範囲、週末、または任意のカスタムルールを無効にすることができる。
+isDateEnabled` プロパティは、日付が有効かどうかを示すブール値を返す関数を受け付ける。この関数は、レンダリングされた各日付、前月、当月、翌月に対して呼び出されます。カスタムの実装では、ジャンクを避けるためにパフォーマンスを最適化する必要があります。
次の例では、週末の日付をすべて無効にする方法を示しています。より高度な日付操作を行うには、 `date-fns` のような日付ユーティリティを使用することをお勧めします。
@@ -291,7 +296,7 @@ This property is only supported when using `presentation="date"` and `preferWhee
`highlightedDates`プロパティを使用すると、開発者は特定の日付をカスタムテキストや背景色でスタイル設定することができます。このプロパティは、日付とその色の配列として定義するか、ISO 文字列を受け取って使用する色を返すコールバックとして定義することができます。
-色を指定する場合は、有効な CSS カラーフォーマットを使用できます。これには、16進コード、rgba、[color variables](../theming/colors) などが含まれます。
+色を指定する場合は、有効な CSS カラーフォーマットを使用できます。これには、16進コード、`rgba` 、[color variables](../theming/colors) などが含まれます。
一貫したユーザーエクスペリエンスを維持するため、選択された日付のスタイルは常にカスタムハイライトよりも優先されます。
@@ -321,6 +326,16 @@ Ionicの強力なテーマシステムを使用すると、特定のテーマに
+### Calendar Days
+
+The calendar days in a grid-style `ion-datetime` can be styled using CSS shadow parts.
+
+:::note
+The example below selects the day 2 days ago, unless that day is in the previous month, then it selects a day 2 days in the future. This is done for demo purposes in order to show how to apply custom styling to all days, the current day, and the selected day.
+:::
+
+
+
### Wheel Pickers
`ion-datetime`で使用するホイールは、シャドウパーツとCSS変数を組み合わせてスタイルを設定することができます。これは、ホイールスタイルのdatetimeのカラムにも、グリッドスタイルのdatetimeの月/年のピッカーにも適用されます。
@@ -363,7 +378,7 @@ import { format, parseISO } from 'date-fns';
/**
* This is provided in the event
* payload from the `ionChange` event.
- *
+ *
* The value is an ISO-8601 date string.
*/
const dateFromIonDatetime = '2021-06-04T14:23:00-04:00';
diff --git a/docs/api/fab.md b/docs/api/fab.md
index 53f788c8cf9..50543da1726 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -41,6 +41,32 @@ import Positioning from '@site/static/usage/v7/fab/positioning/index.md';
+### セーフエリア
+
+`ion-header`コンポーネントや`ion-footer`コンポーネントがない場合、fabはデバイスのノッチやステータスバー、その他のデバイスUIで覆われている可能性があります。このような場合、上下の [safe area](/docs/theming/advanced#safe-area-padding) は考慮されません。これは [`--ion-safe-area-(dir)`変数](/docs/theming/advanced#application-variables) を使って調整することができます。
+
+`vertical`を`"top"`に設定したfabを `ion-header` なしで使用する場合は、上マージンを設定する必要があります：
+
+```css
+ion-fab {
+ margin-top: var(--ion-safe-area-top, 0)；
+}
+```
+
+また、`ion-footer`なしで`vertical`を`"bottom"`に設定したfabを使用する場合は、下マージンを設定する必要があります：
+
+```css
+ion-fab {
+ margin-bottom: var(--ion-safe-area-bottom, 0)；
+}
+```
+
+`ion-header` (`vertical` が `"top"` に設定されたファブの場合) または `ion-footer` (`vertical` が `"bottom"` に設定されたファブの場合) がある場合、ファブはヘッダまたはフッタからの相対位置に配置されるため、CSS の調整は必要ありません。
+
+import SafeArea from '@site/static/usage/v7/fab/safe-area/index.md';
+
+
+
## ボタンサイズ
メインファブボタンの `size` プロパティを `"small"` に設定すると、ミニサイズで描画されます。なお、このプロパティは内側のファブボタンで使用した場合は効果がありません。
@@ -68,7 +94,6 @@ import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-pr
import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/index.md';
-
## アクセシビリティ
diff --git a/docs/api/input.md b/docs/api/input.md
index 7ac18ebfea2..ed661b127c3 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -30,7 +30,7 @@ import Basic from '@site/static/usage/v7/input/basic/index.md';
## Types
-input コンポーネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタイプの入力のみを対象としています。また、keyup、keydown、keypressなどの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの `type` は `"text"` です。
+input コンポーネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタイプの入力のみを対象としています。また、`keyup`、`keydown`、`keypress`などの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの `type` は `"text"` です。
import Types from '@site/static/usage/v7/input/types/index.md';
@@ -85,6 +85,8 @@ Material Design では、Inputに塗りつぶしのスタイルが用意され
`fill` スタイルはInputコンテナを視覚的に定義するため、`fill` を使用するInputは `ion-item` で使用すべきではありません。
+Filled inputs can be used on iOS by setting Input's `mode` to `md`.
+
import Fill from '@site/static/usage/v7/input/fill/index.md';
@@ -104,10 +106,18 @@ import HelperError from '@site/static/usage/v7/input/helper-error/index.md';
Input Counterは、Inputの下に表示されるテキストで、入力可能な文字数のうち、何文字が入力されたかをユーザーに通知するものです。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
+The `counter` and `counterFormatter` properties on `ion-item` were [deprecated in Ionic 7](/docs/api/input#using-the-modern-syntax) and should be used directly on `ion-input` instead.
+
import Counter from '@site/static/usage/v7/input/counter/index.md';
+Inputs with a counter add a border between the input and the counter, therefore they should not be placed inside of an `ion-item` which adds an additional border under the item. The `ion-padding-start` class can be added to align the counter inputs with inputs inside of items.
+
+import CounterAlignment from '@site/static/usage/v7/input/counter-alignment/index.md';
+
+
+
## Filtering User Input
開発者は `ionInput` イベントを使用して、キー入力などのユーザー入力に応答して入力値を更新することができます。これは、無効な文字や不要な文字をフィルタリングするのに便利です。
diff --git a/docs/api/item.md b/docs/api/item.md
index 4310fb7eb4f..9c32284bc4a 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -8,6 +8,9 @@ import Parts from '@ionic-internal/component-api/v7/item/parts.md';
import CustomProps from '@ionic-internal/component-api/v7/item/custom-props.md';
import Slots from '@ionic-internal/component-api/v7/item/slots.md';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import BestPracticeFigure from '@components/global/BestPracticeFigure';
+
ion-item: Input, Edit, or Delete iOS and Android Item Elements
@@ -17,7 +20,8 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
-アイテムは、テキスト、アイコン、アバター、画像、Input、その他のネイティブまたはカスタム要素を含むことができる要素です。一般的には、他のアイテムと一緒に[list](./list)に配置されます。アイテムは、スワイプ、削除、並び替え、編集などが可能です。
+アイテムは、テキスト、アイコン、アバター、画像、Input、その他のネイティブまたはカスタム要素を含むことができる要素です。アイテムは他のアイテムと一緒に[リスト](./list)の行としてのみ使用してください。アイテムはスワイプ、削除、並び替え、編集などができます。
+
## 基本的な使い方
@@ -28,6 +32,135 @@ import Basic from '@site/static/usage/v7/item/basic/index.md';
+## コンテンツの種類
+
+リスト内のアイテムは様々な形をとりますが、一般的にビジュアル、テキスト、メタデータ、アクション、コントロールの5つの異なるコンテンツタイプをサポートします。しかし、これらのコンテンツタイプをすべて同時に使うべきではありません。以下のガイドでは、異なるコンテンツタイプと、アプリケーションでの適切な利用方法を示します。
+
+### 補助ビジュアル
+
+補助ビジュアル 補助ビジュアルはアイテムの装飾アイコンやその他の飾りです。サポーティングビジュアルの一般的な例は、[アバター](./avatar)、 [アイコン](./icon)、[サムネイル](./thumbnail)です。このコンテンツはアイテムの意図を理解するために必要ではないので、通常`aria-hidden="true"`を使ってスクリーンリーダーから隠されます。
+
+アイコン・ボタンのように、アイテムとのインタラクションにビジュアルが必要な場合、そのビジュアルはサポート・ビジュアルではなく、 [アクション](#actions) となります。
+
+}
+ doNotImage={}
+/>
+
+下の例では、ビジュアルをサポートする2つのリストを作成しています。最初のリストはアイコンを使い、2番目のリストはアバターを使います。ビジュアルは装飾的なものなので、すべて `aria-hidden="true"` を指定しています。さらに、これらは `start` スロットで一貫して表示されます。
+
+import SupportingVisuals from '@site/static/usage/v7/item/content-types/supporting-visuals/index.md';
+
+
+
+### テキスト
+
+テキスト・コンテンツ・タイプには、フォーム制御ラベルやその他の可視テキストが含まれます。このテキストは項目の意図を示す役割を果たします。テキストは短く、要点をまとめるようにしてください。
+
+If you find that you need a few more sentences to clarify the item's purpose, consider moving the additional sentences to a Note at the bottom of the list. Adding the item to its own list makes it clear which item the text is associated with.}
+ doText="Move long text outside of the list"
+ doNotText="Don't try to fit long text in an item"
+ doImage={}
+ doNotImage={}
+/>
+
+下の例では、さまざまなタイプのテキストでリストを作成しています。"First Name"と "Last Name "のラベルは、テキスト入力に何を入力すべきかを示しています。
+
+トグルの "Allow Notifications"ラベルの下には、ユーザーが通知を無効にできることを示すテキストが追加されています。このテキストは短いので、アイテムの内側に配置されています。
+
+そのリストの下には、 [Note](./note) の下に長いテキストを含むtextareaを含む別のリストがあります。textareaは、長いテキストが他のフィールドではなく、textareaに関連付けられていることを明らかにするために、それ自身のリストに配置されました。
+
+import Text from '@site/static/usage/v7/item/content-types/text/index.md';
+
+
+
+### メタデータ
+
+メタデータは、ステータステキストやカウントのようなアイテムの追加コンテキストを提供します。Badge](./badge)や[Note](./note)のようなコンポーネントは、メタデータを表示する素晴らしい方法です。
+
+}
+ doNotImage={}
+/>
+
+}
+ cautionImage={}
+/>
+
+以下の例では、異なる種類のメタデータを持つ2つのリストを作成している。最初のリストは[Note](./note)を使って、それぞれのToDoリストにいくつのタスクがあるかを表示している。
+
+つ目のリストは、iOSのメールアプリを真似て受信トレイを表示しています。このリストでは、"開始"スロットに "未読メッセージ"インジケータ、"終了"スロットにタイムスタンプとカスタム詳細アイコンを含むカスタムメタデータを使用しています。"未読メッセージ"インジケータは、未読メッセージにユーザーの注意を引くために青くハイライトされ、タイムスタンプはより控えめです。
+
+import Metadata from '@site/static/usage/v7/item/content-types/metadata/index.md';
+
+
+
+### アクション
+
+アクションは、アクティブにすると何かをするインタラクティブな要素です。アイテムは1行に複数のアクションを表示することができます。しかし、開発者は、各アクションのタップターゲットが十分に大きいことを確認する必要があります。
+
+開発者は、入れ子になったインタラクティブ機能を作成することは避けるべきです。例えば、 `button` プロパティが `true` に設定されている場合、開発者はアイテムのメインコンテンツ内にボタンを追加することを避けるべきです。
+
+Actions can be added by using the Item Sliding component. Actions can also be placed directly inside of the Item without the use of Item Sliding, but this should be limited to no more than 2 actions.}
+ doText={<>Use an Item Sliding to reveal multiple actions by swiping on the Item.}
+ doNotText="Don't put more than 2 actions within an Item."
+ doImage={}
+ doNotImage={}
+/>
+
+下の例では、連絡先のリストを作成しています。各項目は、その項目の完全な連絡先ページに移動するためのスタブボタンです。各項目には、ユーザーが項目をスワイプすることで表示できる追加アクションがあります。
+
+import Actions from '@site/static/usage/v7/item/content-types/actions/index.md';
+
+
+
+### コントロール
+
+コントロールは、チェックボックス、入力、ラジオなどのフォームコンポーネントです。リスト内の各項目は、画面スペースの制約上、最大でも2つのコントロールを持つ必要があります。
+
+Metadata such as helper text or character counts should not be used on form controls in list views. If such metadata is needed, the form control should be placed outside of a list. Filled Inputs are a great way of visually defining the input container outside of a list.}
+ doText="Place inputs with metadata outside of the list."
+ doNotText="Don't put metadata for inputs in the list."
+ doImage={}
+ doNotImage={}
+/>
+
+Alternatively, the metadata can be placed in a Note at the bottom of the list.}
+ doText="Place metadata for inputs at the end of a list."
+ doNotText="Don't put metadata for inputs in the list."
+ doImage={}
+ doNotImage={}
+/>
+
+Items should typically have no more than two controls. If you need more controls, consider adding the additional controls in a Modal that is accessible from the item.}
+ doText="Move additional controls to a submenu accessible from the item."
+ doNotText="Don't use more than two controls within an item."
+ doImage={}
+ doNotImage={}
+/>
+
+以下の例では、ToDoタスクのリストを作成しています。それぞれの項目にはチェックボックスと入力があります。チェックボックスはユーザーがタスクを完了としてマークできるようにし、入力はユーザーがタスクの名前を変更できるようにします。
+
+import Controls from '@site/static/usage/v7/item/content-types/controls/index.md';
+
+
+
+
## クリック可能なItems
`href` か `button` プロパティが設定されている場合、itemは "clickable（クリック可能）" と見なされます。clickableなitemsには、インタラクティブに操作できることを示す視覚的な違いがいくつかあります。たとえば、clickableなitemは、`md` modeではrippleエフェクトを持ち、`ios` modeではハイライト表示され、`ios` modeでの [detail arrow](/#detail-arrows) が表示されます。
@@ -69,16 +202,6 @@ import Lines from '@site/static/usage/v7/item/lines/index.md';
-
-## Media Items
-
-[Avatars](./avatar) and [Thumbnails](./thumbnail) can be slotted inside of an item. This is useful when making lists of images and text.
-
-import Media from '@site/static/usage/v7/item/media/index.md';
-
-
-
-
## Buttons in Items
Buttonsは、アイテムの外側にあるときよりも、アイテムの内側にあるときの方が小さくスタイルされます。ボタンのサイズをアイテムの外側のボタンと同じにするには、`size`属性に`"default"`を設定します。
@@ -87,14 +210,6 @@ import Buttons from '@site/static/usage/v7/item/buttons/index.md';
-
-## Icons in Items
-
-import Icons from '@site/static/usage/v7/item/icons/index.md';
-
-
-
-
## Item Inputs
import Inputs from '@site/static/usage/v7/item/inputs/index.md';
@@ -121,17 +236,14 @@ import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md
+## ガイドライン
-### Inputハイライト
-
-input を含むアイテムは、フォーカスされたとき、有効なとき、無効なときに、Inputの下のボーダーを異なる色でハイライトします。デフォルトでは、`md`アイテムは高さが `2px` に設定されたハイライトを持ち、`ios`はハイライトを持ちません（技術的に高さは `0` に設定されています）。高さは `--highlight-height` CSS プロパティを使って変更することができます。ハイライトをオフにするには、この変数を `0` に設定します。
-
-ハイライトの色はアイテムの状態に応じて変化しますが、デフォルトではすべての状態でIonicカラーが使用されます。フォーカスされている場合、Inputのハイライトは `primary` カラーを使用します。Inputが有効な場合は `success` カラーが使用され、無効なInputは `danger` カラーが使用されます。これは提供されているCSSプロパティを使ってカスタマイズすることができます。
-
-import InputHighlight from '@site/static/usage/v7/item/theming/input-highlight/index.md';
-
-
+以下のガイドラインは、リスト項目を理解しやすく、使いやすくするのに役立ちます。
+1. アイテムは [Lists](./list) の中だけで使用してください。
+2. リスト内のアイテムは、一貫したフォーマットで表示されるべきです。例えば、アイテムに装飾的なアイコンを表示する場合、アイコンはアイテム間で同じように配置されるべきです。
+3. アイテムは決して[入れ子になったインタラクティヴ](https://dequeuniversity.com/rules/axe/4.4/nested-interactive)をレンダリングすべきではありません。入れ子になったインタラクティブ要素が使用されている場合、スクリーンリーダーは正しいインタラクティブ要素を選択することができません。例えば、`button="true"`を持つ`ion-item`の中にボタンを置くことは避けてください。
+4. コンテントタイプ](#content-types)を正しく使用してください。Itemコンポーネントは、[List](./list)内の行として設計されており、汎用コンテナとして使用すべきではありません。
## プロパティ
diff --git a/docs/api/label.md b/docs/api/label.md
index ace0774f3e5..c031dfe567a 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -17,8 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
-Labelは `ion-item`、`ion-input`、`ion-toggle` 等と共に使用できるラッパー(wrapper)要素です。item内のlabelの位置はinline、fixed、stacked、またはfloatingにすることができます。
+Labelは、主に[Item](./item.md)コンポーネントにテキストコンテンツを追加するために使用される要素です。Labelは、[Input](./input.md)や[Radio](./radio.md)のようなフォーム制御コンポーネントの内部で、可視ラベルを指定する場合にも使用できますが、必須ではありません。
+The position of the label inside of an item can be inline, fixed, stacked, or floating.
## 基本的な使い方
@@ -32,13 +33,7 @@ import Item from '@site/static/usage/v7/label/item/index.md';
-## Input Labels
-
-import Input from '@site/static/usage/v7/label/input/index.md';
-
-
-
-## テーマ
+## Theming
### Colors
diff --git a/docs/api/menu.md b/docs/api/menu.md
index 90988b203f1..4abd4c1a067 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -60,7 +60,7 @@ import Sides from '@site/static/usage/v7/menu/sides/index.md';
## 複数メニュー
-同じサイドに複数のメニューが存在する場合、開きたいメニューを開く前にそのメニューを有効にする必要があります。これは `MenuController` の `enable` メソッドを呼び出すことで行うことができます。次に、メニューの `menuId` または `side` に基づいて `open` を呼び出すことができます。
+同じサイドに複数のメニューが存在する場合、サイドではなくIDで参照する必要があります。そうしないと、間違ったメニューがアクティブになる可能性がある。
import Multiple from '@site/static/usage/v7/menu/multiple/index.md';
diff --git a/docs/api/modal.md b/docs/api/modal.md
index 948cba6e9d1..c1feffe3490 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -89,6 +89,18 @@ import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/ca
+### 子コンポーネントでのdismiss動作の変更
+
+あるシナリオでは、開発者は提示されたモーダルの状態に基づいて `canDismiss` コールバックの動作をカスタマイズする必要があるかもしれません。このカスタマイズは、たとえば、モーダル内のフォームが無効な場合にモーダルが却下されないようにしたい場合に特に便利です。
+
+このカスタマイズを実現するために、子コンポーネントは、親コンポーネントと通信して `canDismiss` コールバックを管理する条件を更新するために、関数コールバック、イベントエミッション、その他のリアクティビティメカニズムなどのさまざまなテクニックを使用できます。
+
+以下は、子コンポーネントが親コンポーネントとどのように通信して `canDismiss` コールバックを変更できるかを示す簡単な例です：
+
+import CanDismissChildStateExample from '@site/static/usage/v7/modal/can-dismiss/child-state/index.md';
+
+
+
## モーダルの種類
### Card Modal
diff --git a/docs/api/radio.md b/docs/api/radio.md
index b8eb1b6c56c..110532eef69 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -30,21 +30,32 @@ import Basic from '@site/static/usage/v7/radio/basic/index.md';
## Label Placement
-開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
+開発者は `labelPlacement` プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。 このプロパティはフレックスボックスの `flex-direction` プロパティを反映しています。
import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md';
+## Alignment
+
+Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
+
+:::note
+Stacked radios can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
+:::
+
+import Alignment from '@site/static/usage/v7/radio/alignment/index.md';
+
+
+
## Justification
-開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。
+開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの `justify-content` プロパティを反映しています。
import Justify from '@site/static/usage/v7/radio/justify/index.md';
-
:::note
`ion-item`は、`justify`がどのように機能するかを強調するためにデモで使用されているだけです。 `justify` が正しく機能するために必須ではありません。
:::
diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md
index 4d784334810..cb5c985d4f9 100644
--- a/docs/api/searchbar.md
+++ b/docs/api/searchbar.md
@@ -94,7 +94,7 @@ import CSSProps from '@site/static/usage/v7/searchbar/theming/css-properties/ind
### Android
-デフォルトでは、Inputをタップするとキーボードが表示され、サブミットボタンに虫眼鏡のアイコンが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、アイコンが虫眼鏡からarriage returnに変更されます。
+デフォルトでは、Inputをタップするとキーボードが表示され、サブミットボタンに虫眼鏡のアイコンが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、アイコンが虫眼鏡からcarriage returnに変更されます。
### iOS
diff --git a/docs/api/select.md b/docs/api/select.md
index 8a0481b899e..256399fd455 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
-Selectは、ネイティブの `
})
}
+/>
+
+下の例では、ビジュアルをサポートする2つのリストを作成しています。最初のリストはアイコンを使い、2番目のリストはアバターを使います。ビジュアルは装飾的なものなので、すべて `aria-hidden="true"` を指定しています。さらに、これらは `start` スロットで一貫して表示されます。
+
+import SupportingVisuals from '@site/static/usage/v7/item/content-types/supporting-visuals/index.md';
+
+})
}
+ doNotImage={})
}
+/>
+
+下の例では、さまざまなタイプのテキストでリストを作成しています。"First Name"と "Last Name "のラベルは、テキスト入力に何を入力すべきかを示しています。
+
+トグルの "Allow Notifications"ラベルの下には、ユーザーが通知を無効にできることを示すテキストが追加されています。このテキストは短いので、アイテムの内側に配置されています。
+
+そのリストの下には、 [Note](./note) の下に長いテキストを含むtextareaを含む別のリストがあります。textareaは、長いテキストが他のフィールドではなく、textareaに関連付けられていることを明らかにするために、それ自身のリストに配置されました。
+
+import Text from '@site/static/usage/v7/item/content-types/text/index.md';
+
+})
}
+/>
+
+})
}
+/>
+
+以下の例では、異なる種類のメタデータを持つ2つのリストを作成している。最初のリストは[Note](./note)を使って、それぞれのToDoリストにいくつのタスクがあるかを表示している。
+
+つ目のリストは、iOSのメールアプリを真似て受信トレイを表示しています。このリストでは、"開始"スロットに "未読メッセージ"インジケータ、"終了"スロットにタイムスタンプとカスタム詳細アイコンを含むカスタムメタデータを使用しています。"未読メッセージ"インジケータは、未読メッセージにユーザーの注意を引くために青くハイライトされ、タイムスタンプはより控えめです。
+
+import Metadata from '@site/static/usage/v7/item/content-types/metadata/index.md';
+
+})
}
+ doNotImage={})
}
+/>
+
+下の例では、連絡先のリストを作成しています。各項目は、その項目の完全な連絡先ページに移動するためのスタブボタンです。各項目には、ユーザーが項目をスワイプすることで表示できる追加アクションがあります。
+
+import Actions from '@site/static/usage/v7/item/content-types/actions/index.md';
+
+})
}
+ doNotImage={})
}
+/>
+
+})
}
+ doNotImage={})
}
+/>
+
+})
}
+ doNotImage={})
}
+/>
+
+以下の例では、ToDoタスクのリストを作成しています。それぞれの項目にはチェックボックスと入力があります。チェックボックスはユーザーがタスクを完了としてマークできるようにし、入力はユーザーがタスクの名前を変更できるようにします。
+
+import Controls from '@site/static/usage/v7/item/content-types/controls/index.md';
+
+