diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
new file mode 100644
index 00000000000..b1f04ad75d3
--- /dev/null
+++ b/.github/CODEOWNERS
@@ -0,0 +1,14 @@
+# 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.
+
+* @ionic-team/framework
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
deleted file mode 100644
index 1a0efc743b7..00000000000
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-name: Bug report
-about: Report a bug on the docs site
-title: ''
-labels: bug
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Browser and OS (please complete the following information)**
- - OS: [e.g. iOS]
- - Browser: [e.g. chrome, safari]
- - Version: [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml
new file mode 100644
index 00000000000..3cae620736e
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@@ -0,0 +1,43 @@
+name: 🐛 Bug Report
+description: Report a bug on the docs site
+labels: ["triage"]
+title: "bug: "
+body:
+ - type: textarea
+ attributes:
+ label: Describe the Bug
+ description: A clear description of what the bug is and how it manifests.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Expected Behavior
+ description: A clear description of what you expected to happen.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Steps to Reproduce
+ description: Please explain the steps required to duplicate this issue.
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Screenshots
+ description: If applicable, add screenshots to help explain the problem.
+ - type: input
+ attributes:
+ label: Operating System
+ description: The operating system you are running (e.g. Windows)
+ - type: input
+ attributes:
+ label: Browser
+ description: The browser you are running (e.g. Chrome, Safari)
+ - type: input
+ attributes:
+ label: Version
+ description: The browser version you are running (e.g. 14)
+ - type: textarea
+ attributes:
+ label: Additional Information
+ description: List any other information that is relevant to your issue.
diff --git a/.github/ISSUE_TEMPLATE/content-issue.md b/.github/ISSUE_TEMPLATE/content-issue.md
deleted file mode 100644
index 58b864b751c..00000000000
--- a/.github/ISSUE_TEMPLATE/content-issue.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-name: Content issue
-about: Report missing or inaccurate content on the docs
-title: ''
-labels: content
-assignees: ''
-
----
-
-**URL**
-The URL at which the content is missing or inaccurate
-
-**What is missing or inaccurate about the content on this page?**
diff --git a/.github/ISSUE_TEMPLATE/content-issue.yml b/.github/ISSUE_TEMPLATE/content-issue.yml
new file mode 100644
index 00000000000..404492e1736
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/content-issue.yml
@@ -0,0 +1,17 @@
+name: 📕 Content Issue
+description: Report missing or inaccurate content on the docs
+labels: ["triage"]
+title: "content: "
+body:
+ - type: input
+ attributes:
+ label: URL
+ description: The URL at which the content is missing or inaccurate
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Issue Description
+ description: What is missing or inaccurate about the content on this page?
+ validations:
+ required: true
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
deleted file mode 100644
index d513e5c0428..00000000000
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ /dev/null
@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest a feature for the docs
-title: ''
-labels: feature
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.yml b/.github/ISSUE_TEMPLATE/feature_request.yml
new file mode 100644
index 00000000000..5a964579982
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/feature_request.yml
@@ -0,0 +1,23 @@
+name: 💡 Feature Request
+description: Suggest a feature for the docs
+labels: ["triage"]
+title: "feat: "
+body:
+ - type: textarea
+ attributes:
+ label: Describe Problem
+ description: A clear and concise description of what the problem is. Ex. I am always frustrated when [...]
+ validations:
+ required: true
+ - type: textarea
+ attributes:
+ label: Describe Preferred Solution
+ description: A clear and concise description of what you want to happen.
+ - type: textarea
+ attributes:
+ label: Describe Alternatives
+ description: A clear and concise description of any alternative solutions or features you have considered.
+ - type: textarea
+ attributes:
+ label: Additional Information
+ description: Add any other context or screenshots about the feature request here.
\ No newline at end of file
diff --git a/.github/ionic-issue-bot.yml b/.github/ionic-issue-bot.yml
new file mode 100644
index 00000000000..f0da0d54073
--- /dev/null
+++ b/.github/ionic-issue-bot.yml
@@ -0,0 +1,86 @@
+triage:
+ label: triage
+ dryRun: false
+
+closeAndLock:
+ labels:
+ - label: 'ionitron: support'
+ message: >
+ Thanks for the issue! This issue appears to be a support request. We use this issue tracker exclusively for
+ content issues, bug reports and feature requests related to the documentation. Please use our
+ [forum](https://forum.ionicframework.com/) for help or questions about Ionic Framework.
+
+
+ Thank you for using Ionic!
+ - label: 'ionitron: missing template'
+ message: >
+ Thanks for the issue! It appears that you have not filled out the provided issue template. We use this issue
+ template in order to gather more information and further assist you. Please create a new issue and ensure the
+ template is fully filled out.
+
+
+ Thank you for using Ionic!
+ close: true
+ lock: true
+ dryRun: false
+
+comment:
+ labels:
+ - label: "help wanted"
+ message: >
+ This issue has been labeled as `help wanted`. This label is added to issues
+ that we believe would be good for contributors.
+
+
+ If you'd like to work on this issue, please comment here letting us know that
+ you would like to submit a pull request for it. This helps us to keep track of
+ the pull request and make sure there isn't duplicated effort.
+
+
+ For a guide on how to create a pull request and test this project locally to see
+ your changes, see our [contributing documentation](https://github.com/ionic-team/ionic-docs/blob/main/CONTRIBUTING.md).
+
+
+ Thank you!
+ - label: 'ionitron: needs reproduction'
+ message: >
+ Thanks for the issue! This issue has been labeled as `needs reproduction`. This label is added to issues that
+ we are not able to reproduce.
+
+
+ Please provide easy to follow steps for us to reproduce this issue.
+ dryRun: false
+
+noReply:
+ days: 14
+ maxIssuesPerRun: 100
+ label: "needs: reply"
+ responseLabel: triage
+ exemptProjects: true
+ exemptMilestones: true
+ message: >
+ Thanks for the issue! This issue is being closed due to the lack of a reply. If this is still an issue,
+ please create a new issue and ensure the template is fully filled out.
+
+
+ Thank you for using Ionic!
+ close: true
+ lock: true
+ dryRun: false
+
+noReproduction:
+ days: 14
+ maxIssuesPerRun: 100
+ label: "ionitron: needs reproduction"
+ responseLabel: triage
+ exemptProjects: true
+ exemptMilestones: true
+ message: >
+ Thanks for the issue! This issue is being closed due to the lack of a reproduction. If this is still an issue,
+ please create a new issue and ensure the template is fully filled out.
+
+
+ Thank you for using Ionic!
+ close: true
+ lock: true
+ dryRun: false
diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml
new file mode 100644
index 00000000000..750cea4b16e
--- /dev/null
+++ b/.github/workflows/CI.yml
@@ -0,0 +1,34 @@
+# GitHub Actions docs
+# https://help.github.com/en/articles/about-github-actions
+# https://help.github.com/en/articles/workflow-syntax-for-github-actions
+
+name: Install Dependencies, Lint
+
+on: [pull_request]
+
+jobs:
+ test:
+ name: Test on ${{ matrix.os }}
+ runs-on: ${{ matrix.os }}
+ strategy:
+ matrix:
+ node_version: [20]
+ os: [windows-latest, macOS-latest]
+
+ steps:
+ - uses: actions/checkout@v4
+ - name: Use Node.js ${{ matrix.node_version }}
+ uses: actions/setup-node@v4
+ with:
+ node-version: ${{ matrix.node_version }}
+ - name: Install Dependencies
+ run: npm ci --legacy-peer-deps
+ - name: Lint
+ run: npm run lint
+ - 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/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
new file mode 100644
index 00000000000..fef3fa51da8
--- /dev/null
+++ b/.github/workflows/deploy.yml
@@ -0,0 +1,43 @@
+name: Deploy
+on:
+ push:
+ branches: [ main ]
+jobs:
+ build:
+
+ runs-on: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v3
+ - uses: actions/setup-node@v3
+ with:
+ node-version: 20.x
+ cache: 'npm'
+ cache-dependency-path: package-lock.json
+
+ - name: prepare code
+ run: git clone https://github.com/ionic-jp/community-site.git site
+
+ # community-siteのビルド
+ - name: community-site build
+ run: |
+ npm install
+ npm run build.ci
+ working-directory: site
+
+ # Docsのビルド
+ - name: npm install, build
+ run: |
+ npm ci --legacy-peer-deps
+ npm run prebuild
+ npm run build:ci
+ mv site/www/* www/
+
+ # デプロイ
+ - name: deploy
+ run: |
+ npx netlify-cli deploy \
+ --site ${{ secrets.NETLIFY_SITE_ID }} \
+ --dir www/ \
+ --auth ${{ secrets.NETLIFY_TOKEN }} \
+ --prod
diff --git a/.gitignore b/.gitignore
index 31aea381f0b..e34ae50b1dc 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,6 +3,8 @@
# Production
/build
+/www
+/i18n
# Generated files
.docusaurus
@@ -19,4 +21,6 @@ src/components/page/reference/ReleaseNotes/release-notes.json
npm-debug.log*
yarn-debug.log*
-yarn-error.log*
\ No newline at end of file
+yarn-error.log*
+
+static/**/node_modules/
diff --git a/.npmrc b/.npmrc
new file mode 100644
index 00000000000..860dc500f0d
--- /dev/null
+++ b/.npmrc
@@ -0,0 +1 @@
+node-options=--max_old_space_size=4096
diff --git a/.prettierignore b/.prettierignore
index 85fee6b4234..c750d314e8a 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,13 +1,18 @@
src/theme/DocItem
-src/theme/DocPage
+src/theme/DocRoot
legacy-stencil-components
-node_modules
scripts/bak
-src/styles.bak
-src/pages
+
docs/api
docs/native
+versioned_docs/version-v*/native
docs/cli/commands
+docs/reference/glossary.md
+
+static/code/stackblitz
.docusaurus
-.github
\ No newline at end of file
+.github
+build
+node_modules
+src/translate
diff --git a/.prettierrc.js b/.prettierrc.js
deleted file mode 100644
index 4122fc68e28..00000000000
--- a/.prettierrc.js
+++ /dev/null
@@ -1,11 +0,0 @@
-module.exports = {
- ...require("@ionic/prettier-config"),
- overrides: [
- {
- files: "*.md",
- options: {
- "parser": "mdx"
- }
- }
- ]
-};
\ No newline at end of file
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 7184cf5f7d7..6452724858e 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,14 +22,67 @@ 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
-$ npm install
-$ npm start
+npm install
+npm start
+```
+
+### 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**: recent versions of npm (5+) and Node.js (10+) are required to run certain scripts.
+> [!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.
---
@@ -54,8 +109,9 @@ Ionic's documentation is built using [Docusaurus](https://docusaurus.io/). The c
- `components/` - styles split out into the components they target
- `static/`
- `demos/` - self-contained demos, optionally presented by pages via `demoUrl` YAML frontmatter
+ - `usage/` - playgrounds that can be created by running `npm run playground:new` [(docs)](_templates/README.md#new-playground-template)
- `versioned_docs/` - versions of the docs created by the docusaurus versioning command
-- `versioned_sitebars/` - versions of the docs sidebars created by the docusaurus versioning command
+- `versioned_sidebars/` - versions of the docs sidebars created by the docusaurus versioning command
## Authoring Content
@@ -84,7 +140,9 @@ The Ionic docs have been translated into Japanese and are in the process of bein
We use Crowdin for our translation service. You can participate in the translation effort on the [Ionic Crowdin page](https://crowdin.com/project/ionic-docs).
-_Please submit translation issues to the Crowdin page and not the Ionic Docs GitHub repo_
+_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).
@@ -99,7 +157,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.
---
@@ -109,20 +168,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.
@@ -133,4 +178,4 @@ The Ionic documentation's `main` branch is deployed automatically and separately
This repo is licensed and managed separately from Ionic itself.
-By contributing to this repo, you agree to have your contributions licensed under the Apache 2.0 license. See [LICENSE](../LICENSE) for the full license text.
+By contributing to this repo, you agree to have your contributions licensed under the Apache 2.0 license. See [LICENSE](LICENSE) for the full license text.
diff --git a/_templates/README.md b/_templates/README.md
new file mode 100644
index 00000000000..60a3ebef83d
--- /dev/null
+++ b/_templates/README.md
@@ -0,0 +1,32 @@
+# Hygen templates
+
+The templates in this directory are intended to be used with [hygen](https://www.hygen.io/) to generate boilerplate files. Check out [the root package.json](../package.json) to see if there are any custom commands to use them (e.g. `npm run playground:new`). You can also run e.g. `hygen playground new` to use a generator.
+
+Some helpful docs links for updating/creating templates:
+
+- [enquirer](https://github.com/enquirer/enquirer#toggle-prompt) for building command line prompts
+- [inflection](https://www.hygen.io/docs/templates#helpers-and-inflections) and [change case](https://www.hygen.io/docs/templates#change-case-helpers) for e.g. changing the case of variables submitted via the prompts
+
+# New playground template
+
+## Generation
+
+To create a new playground, run `npm run playground:new`. This will walk you through some prompts to decide what files for the generator to create for the playground, and what their paths should be.
+
+The path defaults to `basic`. If there is already a basic playground, you'll want to input a different path for the playground.
+
+The CSS option will add extra files if you need to include custom CSS in your playground.
+
+If you need a component for multiple versions of Ionic Framework, you (currently) need to run the generator once for each version.
+
+## Usage
+
+Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. [docs/api/button.md](../docs/api/button.md)) by doing something similar to the following example:
+
+```
+## Feature
+
+import Feature from '@site/static/usage/v8/button/feature/index.md';
+
+
+```
diff --git a/_templates/playground/new/angular_example_component_css.md.ejs.t b/_templates/playground/new/angular_example_component_css.md.ejs.t
new file mode 100644
index 00000000000..e6aab594e42
--- /dev/null
+++ b/_templates/playground/new/angular_example_component_css.md.ejs.t
@@ -0,0 +1,9 @@
+---
+# this file only gets generated if `css` (from the command line prompt) is true
+to: "<%= css ? `static/usage/v${version}/${name}/${path}/angular/example_component_css.md` : null %>"
+---
+```css
+<%= component %> {
+ /* styles go here */
+}
+```
diff --git a/_templates/playground/new/angular_example_component_html.md.ejs.t b/_templates/playground/new/angular_example_component_html.md.ejs.t
new file mode 100644
index 00000000000..98f48fde212
--- /dev/null
+++ b/_templates/playground/new/angular_example_component_html.md.ejs.t
@@ -0,0 +1,6 @@
+---
+to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_html.md` %>"
+---
+```html
+<<%= component %>>>
+```
diff --git a/_templates/playground/new/angular_example_component_ts.md.ejs.t b/_templates/playground/new/angular_example_component_ts.md.ejs.t
new file mode 100644
index 00000000000..548a45dd57b
--- /dev/null
+++ b/_templates/playground/new/angular_example_component_ts.md.ejs.t
@@ -0,0 +1,16 @@
+---
+arbitrary: <% pascalComponent = h.changeCase.pascal(component) %>
+to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` %>"
+---
+```ts
+import { Component } from '@angular/core';
+import { <%= pascalComponent %> } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-example',
+ templateUrl: 'example.component.html',
+ styleUrls: ['./example.component.css'],
+ imports: [<%= pascalComponent %>],
+})
+export class ExampleComponent {}
+```
diff --git a/_templates/playground/new/demo.html.ejs.t b/_templates/playground/new/demo.html.ejs.t
new file mode 100644
index 00000000000..3a6a9cadff9
--- /dev/null
+++ b/_templates/playground/new/demo.html.ejs.t
@@ -0,0 +1,32 @@
+---
+arbitrary: <% numberOfAncestors = (path.match(/\//g) || []).length; directoryChanges = '../'.repeat(numberOfAncestors) %>
+to: "<%= `static/usage/v${version}/${name}/${path}/demo.html` %>"
+---
+
+
+
+
+
+ <%= h.changeCase.titleCase(name) %>
+
+
+
+ <% if (css){ %>
+
+ <% } %>
+
+
+
+
+
+
For example, when Cordova is ready, the resolved ready source is `cordova`. The default ready source value will be `dom`. The `readySource` is useful if different logic should run depending on the platform the app is running from. For example, only Capacitor and Cordova can execute the status bar plugin, so the web should not run status bar plugin logic. |
+| **Signature** | `ready() => Promise` |
-For example, when Cordova is ready, the resolved ready source is `cordova`. The default ready source value will be `dom`. The `readySource` is useful if different logic should run depending on the platform the app is running from. For example, only Capacitor and Cordova can execute the status bar plugin, so the web should not run status bar plugin logic.
+### `isRTL`
-### `isRTL() => boolean`
+| | |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Description** | Returns if this app is using right-to-left language direction or not. We recommend the app's `index.html` file already has the correct `dir` attribute value set, such as `` or ``. [W3C: Structural markup and right-to-left text in HTML](http://www.w3.org/International/questions/qa-html-dir) |
+| **Signature** | `isRTL() => boolean` |
-Returns if this app is using right-to-left language direction or not. We recommend the app's `index.html` file already has the correct `dir` attribute value set, such as `` or ``. [W3C: Structural markup and right-to-left text in HTML](http://www.w3.org/International/questions/qa-html-dir)
+### `isLandscape`
-### `isLandscape() => boolean`
+| | |
+| --------------- | ----------------------------------------------- |
+| **Description** | Returns `true` if the app is in landscape mode. |
+| **Signature** | `isLandscape() => boolean` |
-Returns `true` if the app is in landscape mode.
+### `isPortrait`
-### `isPortrait() => boolean`
+| | |
+| --------------- | ---------------------------------------------- |
+| **Description** | Returns `true` if the app is in portrait mode. |
+| **Signature** | `isPortrait() => boolean` |
-Returns `true` if the app is in portrait mode.
+### `width`
-### `width() => number`
+| | |
+| --------------- | -------------------------------------------------------------------- |
+| **Description** | Gets the width of the platform's viewport using `window.innerWidth`. |
+| **Signature** | `width() => number` |
-Gets the width of the platform's viewport using `window.innerWidth`.
+### `height`
-### `height() => number`
+| | |
+| --------------- | ---------------------------------------------------------------------- |
+| **Description** | Gets the height of the platform's viewport using `window.innerHeight`. |
+| **Signature** | `height() => number` |
-Gets the height of the platform's viewport using `window.innerHeight`.
+### `url`
-### `url() => string`
+| | |
+| --------------- | -------------------- |
+| **Description** | Get the current url. |
+| **Signature** | `url() => string` |
-Get the current url.
+### `testUserAgent`
-### `testUserAgent(expression: string) => boolean`
+| | |
+| --------------- | ---------------------------------------------------------------------- |
+| **Description** | Returns `true` if the expression is included in the user agent string. |
+| **Signature** | `testUserAgent(expression: string) => boolean` |
-Returns `true` if the expression is included in the user agent string.
-
-### Parameters
+#### Parameters
| Name | Type | Description |
| ---------- | ------ | ------------------------------------- |
@@ -154,9 +211,9 @@ Returns `true` if the expression is included in the user agent string.
### `pause`
-The `pause` event emits when the native platform puts the application into the background, typically when the user switches to a different application. This event emits when a Cordova/Capacitor app is put into the background but doesn't fire in a standard web browser.
+`pause` イベントは、ネイティブ・プラットフォームがアプリケーションをバックグラウンドに置いたとき、通常はユーザーが別のアプリケーションに切り替えたときに発生します。このイベントは、Cordova/Capacitor アプリケーションがバックグラウンドに置かれたときに発生しますが、標準的な Web ブラウザでは発生しません。
-#### Usage
+#### Examples
```tsx
this.platform.pause.subscribe(async () => {
@@ -166,9 +223,9 @@ this.platform.pause.subscribe(async () => {
### `resize`
-The `resize` event emits when the browser window has changed dimensions. This could be from a browser window being physically resized, or from a device changing orientation.
+`resize` イベントは、ブラウザウィンドウの寸法が変更されたときに発生します。これは、ブラウザーウィンドウが物理的にサイズ変更されている場合や、デバイスの向きが変わっている場合に発生します。
-#### Usage
+#### Examples
```tsx
this.platform.resize.subscribe(async () => {
@@ -178,9 +235,9 @@ this.platform.resize.subscribe(async () => {
### `resume`
-The `resume` event fires when the native platform pulls the application out from the background. This event emits when a Cordova/Capacitor app comes out from the background but doesn't fire in a standard web browser.
+`resume` イベントは、ネイティブプラットフォームがバックグラウンドからアプリケーションを引き出したときに発生します。このイベントは、Cordova/Capacitor アプリがバックグラウンドから出てきても、標準的な Web ブラウザで起動しない場合に発生します。
-#### Usage
+#### Examples
```tsx
this.platform.resume.subscribe(async () => {
diff --git a/docs/angular/pwa.md b/docs/angular/pwa.md
index 8b90caf5d89..684c150c457 100644
--- a/docs/angular/pwa.md
+++ b/docs/angular/pwa.md
@@ -1,5 +1,5 @@
---
-title: Progressive Web Apps in Angular
+title: AngularでのPWA
sidebar_label: Progressive Web Apps
---
@@ -82,19 +82,33 @@ If it's the first time you use firebase-tools, login to your Google account with
With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts:
-**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure and deploy Firebase Hosting sites."
+**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys".
+
+Create a new Firebase project or select an existing one.
**"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website.
**"What do you want to use as your public directory?"** Enter "www".
:::note
-Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app:
+Answering this next question will ensure that routing, hard reload, and deep linking work in the app:
:::
**Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes".
-**"File www/index.html already exists. Overwrite?"** Enter "No".
+**"File build/index.html already exists. Overwrite?"** Enter "No".
+
+**Set up automatic builds and deploys with Github?** Enter "Yes".
+
+**For which GitHub repository would you like to set up a Github Workflow?** Enter your project name.
+
+**Set up the workflow to run a build script before every deploy?** Enter "Yes".
+
+**What script should be run before every deploy?** Enter `npm ci && npm run build`.
+
+**Set up automatic deployment to your sites live channel when a PR is merged?** Enter "Yes".
+
+**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main branch name.
A `firebase.json` config file is generated, configuring the app for deployment.
diff --git a/docs/angular/slides.md b/docs/angular/slides.md
index afeda06f317..836b717114a 100644
--- a/docs/angular/slides.md
+++ b/docs/angular/slides.md
@@ -1,7 +1,10 @@
---
-title: Slides
+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
-We recommend Swiper.js if you need a modern touch slider component. It powers our `ion-slides` component, but we now recommend that developers use Swiper for Angular directly.
+:::warning Looking for `ion-slides`?
+`ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
+:::
-This guide will go over how to get Swiper for Angular set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Angular integration.
+We recommend Swiper.js if you need a modern touch slider component. Swiper 9 introduced Swiper Element as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element.
## Getting Started
@@ -25,223 +30,209 @@ npm install @ionic/angular@latest
Once that is done, install the Swiper dependency in your project:
```shell
-npm install swiper
+npm install swiper@latest
```
-Once that is done, we need to import the `SwiperModule` module. This should be done in your component's module file:
+Next, we need to add the `CUSTOM_ELEMENTS_SCHEMA`, which tells Angular that we will be using custom elements. This can be done in either `app.module.ts`, or the module file for the component where you will be using Swiper.
```typescript
-// home.module.ts
-import { SwiperModule } from 'swiper/angular';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
- imports: [..., SwiperModule]
+ schemas: [..., CUSTOM_ELEMENTS_SCHEMA]
});
...
```
-## Swiping with Style
-
-Next, we need to import the base Swiper styles. We are also going to import the styles that Ionic provides which will let us customize the Swiper styles using the same CSS Variables that we used with `ion-slides`.
-
-You can import these files in `global.scss`:
-
-```scss
-// global.scss
-@import '~swiper/scss';
-@import '~@ionic/angular/css/ionic-swiper';
-```
-
-If you prefer to import these in the CSS file for your slides component, you will need to disable [ViewEncapsulation in Angular](https://angular.io/api/core/ViewEncapsulation), otherwise the styles will not apply:
+Finally, we need to call Swiper's `register` function to globally register Swiper's custom elements. This should only be done once, so place it in `app.component.ts`.
```typescript
-// home.page.ts
-import { Component, ViewEncapsulation } from '@angular/core';
+import { register } from 'swiper/element/bundle';
+
+register();
@Component({
- selector: 'app-home',
- templateUrl: 'home.page.html',
- styleUrls: ['home.page.scss'],
- encapsulation: ViewEncapsulation.None
-})
-export class HomePage {
...
-}
+})
+...
```
-```scss
-// home.page.scss
-@import '~swiper/scss';
-@import '~@ionic/angular/css/ionic-swiper';
+From there, we just have to replace `ion-slides` elements with `swiper-container` and `ion-slide` elements with `swiper-slide`. Note that these custom elements do not need to be imported, as calling `register` tells Angular about them on its own.
+
+```html
+
+ Slide 1
+ Slide 2
+ Slide 3
+
```
-### Updating Selectors
+## Bundled vs. Core Versions
-Previously, we were able to target `ion-slides` and `ion-slide` to apply any custom styling. The contents of those style blocks remain the same, but we need to update the selectors. Below is a list of selector changes when going from `ion-slides` to Swiper Angular:
+By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features.
-| ion-slides Selector | Swiper Selector |
-| ------------------- | --------------- |
-| `ion-slides` | `.swiper` |
-| `ion-slide` | `.swiper-slide` |
+If you would like to use the Core version instead, which does not include additional modules automatically, see https://swiperjs.com/element#core-version-and-modules. The rest of this migration guide will assume you are using the bundled version.
-### Vanilla CSS (Optional)
+## Swiping with Style
-For developers not using a CSS pre-processor, Swiper also provides the styles bundled together. It is important to note that this will import styles for all modules as well.
+To migrate over your CSS, first update your selectors to target the new custom elements instead:
-```javascript
-// slides.component.css
-@import 'swiper/css';
-@import '@ionic/angular/css/ionic-swiper';
-```
+| ion-slides Selector | Swiper Selector |
+| ------------------- | ------------------ |
+| `ion-slides` | `swiper-container` |
+| `ion-slide` | `swiper-slide` |
-## Using Components
+If you were using the CSS custom properties found on `ion-slides`, below is a list of corresponding properties used in Swiper.
-Swiper Angular exports a `Swiper` component which is the equivalent of `ion-slides`. It also exports a `swiperSlide` directive which can be used on an `` for each slide:
+| `ion-slides` CSS property | `swiper-container` CSS property |
+| ---------------------------------- | ------------------------------------------- |
+| `--bullet-background` | `--swiper-pagination-bullet-inactive-color` |
+| `--bullet-background-active` | `--swiper-pagination-color` |
+| `--progress-bar-background` | `--swiper-pagination-progressbar-bg-color` |
+| `--progress-bar-background-active` | `--swiper-pagination-color` |
+| `--scroll-bar-background` | `--swiper-scrollbar-bg-color` |
+| `--scroll-bar-background-active` | `--swiper-scrollbar-drag-bg-color` |
-```html
-
-
-
- Slide 1
- Slide 2
- Slide 3
-
-
-```
+For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See https://swiperjs.com/element#injecting-styles for instructions.
-## Using Modules
+### Additional `ion-slides` Styles
-By default, Swiper for Angular does not import any additional modules. To use modules such as Navigation or Pagination, you need to import them first.
+The `ion-slides` component had additional styling that helped create a native look and feel. These styles are **not** required to use Swiper.js with Ionic, but if you would like to maintain the look of `ion-slides` as closely as possible, add the following CSS to your `global.scss`:
-`ion-slides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules.
+```css
+swiper-container {
+ --swiper-pagination-bullet-inactive-color: var(--ion-text-color-step-800, #cccccc);
+ --swiper-pagination-color: var(--ion-color-primary, #0054e9);
+ --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
+ --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
+ --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5);
+}
-To begin, we need to import the modules and provide them to Swiper:
+swiper-slide {
+ display: flex;
+ position: relative;
-```typescript
-// home.page.ts
-import { Component } from '@angular/core';
-import SwiperCore, { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
+ flex-direction: column;
+ flex-shrink: 0;
+ align-items: center;
+ justify-content: center;
-SwiperCore.use([Autoplay, Keyboard, Pagination, Scrollbar, Zoom]);
+ width: 100%;
+ height: 100%;
-@Component({
- selector: 'app-home',
- templateUrl: 'home.page.html',
- styleUrls: ['home.page.scss']
-})
-export class HomePage {
- ...
+ font-size: 18px;
+
+ text-align: center;
+ box-sizing: border-box;
}
-```
-Next, we need to import the stylesheets for each module:
-
-```scss
-// global.scss
-@import '~swiper/scss';
-@import '~swiper/scss/autoplay';
-@import '~swiper/scss/keyboard';
-@import '~swiper/scss/pagination';
-@import '~swiper/scss/scrollbar';
-@import '~swiper/scss/zoom';
-@import '~@ionic/angular/css/ionic-swiper';
+swiper-slide img {
+ width: auto;
+ max-width: 100%;
+ height: auto;
+ max-height: 100%;
+}
```
-Finally, we can turn these features on by using the appropriate properties:
-
-```html
-
-
-
- Slide 1
- Slide 2
- Slide 3
-
-
-```
+## The IonicSlides Module
-:::note
-See https://swiperjs.com/angular#usage for a full list of modules.
-:::
+With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic.
-## The IonicSlides Module
+It is recommended to review the [properties](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/slides/IonicSlides.ts) set by `IonicSlides` and determine which ones you would like to customize.
-With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly.
+We can install the `IonicSlides` module by importing and passing it to the `modules` property of `swiper-container` as an array:
-We can install the `IonicSlides` module by importing it from `@ionic/angular` and passing it in as the last item in the array provided in `SwiperCore.use`:
+
+
-```javascript
+```typescript
// home.page.ts
-import { Component } from '@angular/core';
-import SwiperCore, { Autoplay, Keyboard, Pagination, Scrollbar, Zoom } from 'swiper';
-import { IonicSlides } from '@ionic/angular';
-SwiperCore.use([Autoplay, Keyboard, Pagination, Scrollbar, Zoom, IonicSlides]);
+import { IonicSlides } from '@ionic/angular';
@Component({
- selector: 'app-home',
- templateUrl: 'home.page.html',
- styleUrls: ['home.page.scss']
+ ...
})
export class HomePage {
+ swiperModules = [IonicSlides];
+}
+```
+
+
+
+
+```typescript
+// home.page.ts
+
+import { IonicSlides } from '@ionic/angular/standalone';
+
+@Component({
...
+})
+export class HomePage {
+ swiperModules = [IonicSlides];
}
```
+
+
+
+```html
+
+
+ ...
+```
+
:::note
-The `IonicSlides` module must be the last module in the array. This will let it automatically customize the settings of modules such as Pagination, Scrollbar, Zoom, and more.
+If you are using the Core version of Swiper and have installed additional modules, ensure that `IonicSlides` is the last module in the array. This will let it automatically customize the settings of modules such as Pagination, Scrollbar, Zoom, and more.
:::
## Properties
-Swiper options can be provided as individual properties directly on the `` component or via the `config` property.
+Swiper options should be provided as individual properties directly on the `` component.
Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` options set:
```html
-
+Slide 1Slide 3Slide 3
```
-To set these options as properties directly on `` we would do the following:
-
-```html
-
- Slide 1
- Slide 2
- Slide 3
-
-```
-
-To set these options using the `config` object, we would do:
+To set these options as properties directly on `` we would do the following:
```html
-
- Slide 1
- Slide 3
- Slide 3
-
+
+ Slide 1
+ Slide 2
+ Slide 3
+
```
-Below is a full list of property changes when going from `ion-slides` to Swiper Angular:
+Below is a full list of property changes when going from `ion-slides` to Swiper Element:
-| Name | Notes |
-| --------- | --------------------------------------------------------------------------------------------------------------------- |
-| options | Use the `config` property instead or set each option as a property directly on the `` component. |
-| mode | For different styles based upon the mode, you can target the slides with `.ios .swiper` or `.md .swiper` in your CSS. |
-| pager | Use the `pagination` property instead. Requires installation of the Pagination module. |
-| scrollbar | You can continue to use the `scrollbar` property, just be sure to install the Scrollbar module first. |
+| Name | Notes |
+| ------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| options | Set each option as a property directly on the `` component. |
+| mode | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. |
+| pager | Use the `pagination` property instead. |
:::note
-All properties available in Swiper Angular can be found at https://swiperjs.com/angular#swiper-component-props.
+All properties available in Swiper Element can be found at https://swiperjs.com/swiper-api#parameters.
:::
## Events
-Since the `Swiper` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them.
+Since the `swiper-container` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them. Additionally, all event names should be lowercase instead of camelCase.
Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
@@ -253,170 +244,108 @@ Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event:
```
-To migrate, we would change the name of the event to `slideChange`:
+To migrate, we would change the name of the event to `swiperslidechange`:
```html
-
- Slide 1
- Slide 2
- Slide 3
-
+
+ Slide 1
+ Slide 2
+ Slide 3
+
```
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` | `swiperslidechangetransitionstart` |
+| `ionSlideDidChange` | `swiperslidechange` |
+| `ionSlideDoubleTap` | `swiperdoubletap` |
+| `ionSlideDrag` | `swiperslidermove` |
+| `ionSlideNextStart` | `swiperslidenexttransitionstart` |
+| `ionSlideNextEnd` | `swiperslidenexttransitionend` |
+| `ionSlidePrevStart` | `swiperslideprevtransitionstart` |
+| `ionSlidePrevEnd` | `swiperslideprevtransitionend` |
+| `ionSlideReachStart` | `swiperreachbeginning` |
+| `ionSlideReachEnd` | `swiperreachend` |
+| `ionSlideTap` | `swipertap` |
+| `ionSlideTouchStart` | `swipertouchstart` |
+| `ionSlideTouchEnd` | `swipertouchend` |
+| `ionSlideTransitionStart` | `swipertransitionstart` |
+| `ionSlideTransitionEnd` | `swipertransitionend` |
+| `ionSlidesDidLoad` | `swiperinit` |
:::note
-All events available in Swiper Angular can be found at https://swiperjs.com/angular#swiper-component-events.
+All events available in Swiper Element can be found at https://swiperjs.com/swiper-api#events and should be lowercased and prefixed with the word `swiper`.
:::
## Methods
-Most methods have been removed in favor of accessing the `` props directly.
-
-Accessing these properties can be tricky as you want to access the properties on the Swiper instance itself, not your Angular component. To do this, we recommend getting a reference to the `Swiper` instance via `(swiper)`:
+Most methods have been removed in favor of directly accessing the properties of the Swiper instance. To access the Swiper instance, first get a reference to the `` element (such as through `ViewChild`), then access its `swiper` prop:
```html
-
- Slide 1
- Slide 2
- Slide 3
-
+
+ Slide 1
+ Slide 2
+ Slide 3
+
```
-```javascript
+```typescript
// slides.component.ts
-import { Component } from '@angular/core';
+
+import { ..., ElementRef, ViewChild } from '@angular/core';
@Component({
- selector: 'app-slides-example',
- templateUrl: 'slides.component.html',
- styleUrls: ['slides.component.scss']
+ ...
})
export class SlidesExample {
- private slides: any;
+ @ViewChild('swiper')
+ swiperRef: ElementRef | undefined;
- constructor() {}
- setSwiperInstance(swiper: any) {
- this.slides = swiper;
+ logActiveIndex() {
+ console.log(this.swiperRef?.nativeElement.swiper.activeIndex);
}
}
```
-From here, if you wanted to access a property on the Swiper instance you would access `this.slides`. For example, if you wanted to check the `isBeginning` property, you could do: `this.slides.isBeginning`. Make sure `this.slides` is defined first though!
+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. |
-Below is a full list of method changes when going from `ion-slides` to Swiper Angular:
-
-| 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 `(swiper)`. See example above. |
-| isBeginning() | Use the `isBeginning` property instead. |
-| isEnd() | Use the `isEnd` property instead. |
-| length() | Use the `slides` property instead. (i.e swiperRef.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.
+:::
## Effects
-If you are using effects such as Cube or Fade, you can install them just like we did with the other modules. In this example, we will use the fade effect. To start, we will import the `EffectFade` module and register it using `SwiperCore.use`:
+Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect:
```html
-
-
-
- Slide 1
- Slide 2
- Slide 3
-
-```
-
-```javascript
-// slides.component.ts
-import { Component } from '@angular/core';
-import SwiperCore, { EffectFade } from 'swiper';
-import { IonicSlides } from '@ionic/angular';
-
-SwiperCore.use([EffectFade, IonicSlides]);
-
-@Component({
- selector: 'app-slides-example',
- templateUrl: 'slides.component.html',
- styleUrls: ['slides.component.scss'],
-})
-export class SlidesExample {
- constructor() {}
-}
-```
-
-Next, we need to import the stylesheet associated with the effect:
-
-```scss
-// global.scss
-@import '~swiper/scss/effect-fade';
-```
-
-After that, we can activate it by setting the `effect` property on `swiper` to `"fade"`:
-
-```html
-
-
-
- Slide 1
- Slide 2
- Slide 3
-
-```
-
-```javascript
-// slides.component.ts
-import { Component } from '@angular/core';
-import SwiperCore, { EffectFade } from 'swiper';
-import { IonicSlides } from '@ionic/angular';
-
-SwiperCore.use([EffectFade, IonicSlides]);
-
-@Component({
- selector: 'app-slides-example',
- templateUrl: 'slides.component.html',
- styleUrls: ['slides.component.scss'],
-})
-export class SlidesExample {
- constructor() {}
-}
+ ...
```
:::note
-For more information on effects in Swiper, please see https://swiperjs.com/angular#effects.
+For more information on effects in Swiper, please see https://swiperjs.com/swiper-api#fade-effect.
:::
## Wrap Up
-Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper Angular Introduction and then referencing the Swiper API docs.
+Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper Element documentation and then referencing the Swiper API docs.
## FAQ
diff --git a/docs/angular/storage.md b/docs/angular/storage.md
index dad80e77f3a..23c365eb7d4 100644
--- a/docs/angular/storage.md
+++ b/docs/angular/storage.md
@@ -1,6 +1,6 @@
---
-title: Data Storage
-sidebar_label: Storage
+title: データストレージ
+sidebar_label: ストレージ
---
@@ -11,7 +11,7 @@ sidebar_label: Storage
/>
-There are variety of options available for storing data within an Ionic app.
+Ionic アプリ内にデータを保存するためのさまざまなオプションを用意しています。
Here are two official Ionic options:
diff --git a/docs/angular/testing.md b/docs/angular/testing.md
index b8aedacd3fe..095c38c8061 100644
--- a/docs/angular/testing.md
+++ b/docs/angular/testing.md
@@ -1,5 +1,5 @@
---
-title: Testing
+title: テスト
---
@@ -10,53 +10,53 @@ title: Testing
/>
-When an `@ionic/angular` application is generated using the Ionic CLI, it is automatically set up for unit testing and end-to-end testing of the application. This is the same setup that is used by the Angular CLI. Refer to the Angular Testing Guide for detailed information on testing Angular applications.
+Ionic CLI を使用して `@ionic/angular` アプリケーションを生成すると、アプリケーションのユニットテストとエンドツーエンドのテスト用に自動的に準備されます。これは Angular CLI で使われる設定と同じものです。Angular で作られたアプリケーションのテストについての詳細は Angular Testing Guide をご参照ください。
-## Testing Principles
+## テストの原則
-When testing an application, it is best to keep in mind that testing can show if defects are present in a system. However, it is impossible to prove that any non-trivial system is completely free of defects. For this reason, the goal of testing is not to verify that the code is correct but to find problems within the code. This is a subtle but important distinction.
+アプリケーションをテストするときは、テストによってシステムに欠陥があるかどうかを確認できる、ということを覚えておくことが一番です。しかし、どんなささいなシステムも完全に欠陥のないことを証明することは不可能です。このため、テストの目的はコードが正しいことを確認することではなく、コードの中の問題を見つけることです。これは微妙ですが、重要な違いです。
-If we set out to prove that the code is correct, we are more likely to stick to the happy path through the code. If we set out to find problems, we are more likely to more fully exercise the code and find the bugs that are lurking there.
+もし私たちがコードが正しいことを証明しようとするのであれば、私たちはコードを通じて幸せな道を歩み続けようとするでしょう。もし私が問題の発見しようとするのであれば、コードをより完全に実行し、そこに潜むバグを発見する可能性が高くなります。
-It is also best to begin testing an application from the very start. This allows defects to be found early in the process when they are easier to fix. This also allows code to be refactored with confidence as new features are added to the system.
+最初からアプリケーションのテストを開始することも最良です。これにより、修正が容易な段階で早期に欠陥を発見できます。またこれにより、システムに新しい機能が追加されたときに、コードを確実にリファクタリングすることもできます。
-## Unit Testing
+## ユニットテスト
-Unit tests exercise a single unit of code (component, page, service, pipe, etc) in isolation from the rest of the system. Isolation is achieved through the injection of mock objects in place of the code's dependencies. The mock objects allow the test to have fine-grained control of the outputs of the dependencies. The mocks also allow the test to determine which dependencies have been called and what has been passed to them.
+ユニットテストでは、システムの他の部分から分離して、単一のコードユニット（Component、Page、Service、Pipe など）を実行します。分離は、コードの依存関係の代わりにモックオブジェクトを注入することによって実現されます。モックオブジェクトによって、テストは依存関係の切り出しをきめ細かく制御することができます。モックによって、どの依存関係が呼び出され、何が渡されたかをテストで判断することもできます。
-Well-written unit tests are structured such that the unit of code and the features it contains are described via `describe()` callbacks. The requirements for the unit of code and its features are tested via `it()` callbacks. When the descriptions for the `describe()` and `it()` callbacks are read, they make sense as a phrase. When the descriptions for nested `describe()`s and a final `it()` are concatenated together, they form a sentence that fully describes the test case.
+適切に記述されたユニットテストは、コードの単位とそれに含まれる機能が `describe()` コールバックによって記述されるように構成されています。コード単位とその機能の要件は、`it()` コールバックによってテストされます。`describe()` コールバックと `it()` コールバックの説明を読むと、フレーズとして意味がわかります。ネストされた `describe()` と最後の `it()` の記述をつなげると、テストケースを完全に記述する文が形成されます。
-Since unit tests exercise the code in isolation, they are fast, robust, and allow for a high degree of code coverage.
+ユニットテストはコードを分離して実行するため、高速で堅牢であり、高度なコードカバレッジが可能です。
-### Using Mocks
+### モックの利用
-Unit tests exercise a code module in isolation. To facilitate this, we recommend using Jasmine (https://jasmine.github.io/). Jasmine creates mock objects (which Jasmine calls "spies") to take the place of dependencies while testing. When a mock object is used, the test can control the values returned by calls to that dependency, making the current test independent of changes made to the dependency. This also makes the test setup easier, allowing the test to only be concerned with the code within the module under test.
+ユニットテストでは、コードをコードをモジュールで分離して実行します。これを簡単にするには、Jasmine(https://jasmine.github.io/) を使用することをお勧めします。Jasmine は、テスト実行中に依存関係の代わりにモックオブジェクト(Jasmine は 「スパイ」 と呼んでいます)を作成します。モックオブジェクトを使用すると、テストはその依存関係への呼び出しによって返される値を制御できるため、依存関係に加えられた変更から現在のテストを独立させることができます。これにより、テストのセットアップも簡単になり、テスト対象のモジュール内のコードだけをテストすることができます。
-Using mocks also allows the test to query the mock to determine if it was called and how it was called via the `toHaveBeenCalled*` set of functions. Tests should be as specific as possible with these functions, favoring calls to `toHaveBeenCalledTimes` over calls to `toHaveBeenCalled` when testing that a method has been called. That is `expect(mock.foo).toHaveBeenCalledTimes(1)` is better than `expect(mock.foo).toHaveBeenCalled()`. The opposite advice should be followed when testing that something has not been called (`expect(mock.foo).not.toHaveBeenCalled()`).
+モックを使用すると、モックが呼び出されたかどうか、および `toHaveBeenCalled*` セットの関数を介してどのように呼び出されたかを判断するために、テストでモックを確認することもできます。これらの関数では、メソッドが呼び出されたことをテストするときに、`toHaveBeenCalled` メソッドの呼び出しよりも `toHaveBeenCalledTimes` の呼び出しを優先して、テストをできるだけ具体的に行う必要があります。つまり、`expect(mock.foo).toHaveBeenCalledTimes(1)` は `expect(mock.foo).toHaveBeenCalled()` よりも優れています。何かが呼ばれていないこと（`expect(mock.foo).not.toHaveBeenCalled()`）をテストする際は、逆のアドバイスに従うべきです。
-There are two common ways to create mock objects in Jasmine. Mock objects can be constructed from scratch using `jasmine.createSpy` and `jasmine.createSpyObj` or spies can be installed onto existing objects using `spyOn()` and `spyOnProperty()`.
+Jasmine でモックオブジェクトを作成する一般的な方法は 2 つあります。モックオブジェクトは、`jasmine.createSpy` と`jasmine.createSpyObj` を使ってスクラッチで作成することも、`spyOn()` と `spyOnProperty()` を使って既存のオブジェクトにスパイをインストールすることもできます。
-#### Using `jasmine.createSpy` and `jasmine.createSpyObj`
+### `jasmine.createSpy` と `jasmine.createSpyObj` の利用
-`jasmine.createSpyObj` creates a full mock object from scratch with a set of mock methods defined on creation. This is useful in that it is very simple. Nothing needs to be constructed or injected into the test. The disadvantage of using this function is that it allows the creation of objects that may not match the real objects.
+`jasmine.createSpyObj` は、作成時に定義された一連のモックメソッドを使用して、完全なモックオブジェクトをスクラッチで作成します。これはとてもシンプルで便利です。テストのために何かを組み立てたり注入したりする必要はありません。この関数の使用する欠点は、実際のオブジェクトと一致しないオブジェクトを生成できることです。
-`jasmine.createSpy` is similar but it creates a stand-alone mock function.
+`jasmine.createSpy` も似ていますが、スタンドアロンのモック関数を作成します。
-#### Using `spyOn()` and `spyOnProperty()`
+#### `spyOn()` と `spyOnProperty()` の利用
-`spyOn()` installs the spy on an existing object. The advantage of using this technique is that if an attempt is made to spy on a method that does not exist on the object, an exception is raised. This prevents the test from mocking methods that do not exist. The disadvantage is that the test needs a fully formed object to begin with, which may increase the amount of test setup required.
+`spyOn()` は、既存のオブジェクトにスパイをインストールします。この手法を使用する利点は、オブジェクト上に存在しないメソッドをスパイしようとすると、例外が発生することです。これにより、テストが存在しないメソッドをモックすることを防ぎます。欠点は、テストが最初から完全に整形されたオブジェクトを必要とすることであり、これはテストに必要なセットアップの量を増加させるかと思います。
-`spyOnProperty()` is similar with the difference being that it spies on a property and not a method.
+`spyOnProperty()` は似ていますが、メソッドではなくプロパティに対してスパイするという点で異なります。
-### General Testing Structure
+### 一般的なテストの構成
-Unit tests are contained in `spec` files with one `spec` file per entity (component, page, service, pipe, etc.). The `spec` files live side-by-side with and are named after the source that they are testing. For example, if the project has a service called WeatherService, the code for it is in a file named `weather.service.ts` with the tests in a file named `weather.service.spec.ts`. Both of those files are in the same folder.
+ユニットテストは、エンティティ（Component、Page、Service、Pipe など）ごとに 1 つの `spec` ファイルを持つ `spec` ファイルに含まれています。`spec` ファイルは、テスト中のソースと一緒に存在し、かつその名前が付けられます。たとえば、プロジェクトに WeatherService という Service がある場合、そのコードは`weather.service.ts` という名前のファイルにあり、テストは `weather.service.spec.ts` という名前のファイルにあります。これらのファイルは両方とも同じフォルダにあります。
-The `spec` files themselves contain a single `describe` call that defines that overall test. Nested within it are other `describe` calls that define major areas of functionality. Each `describe` call can contain setup and teardown code (generally handled via `beforeEach` and `afterEach` calls), more `describe` calls forming a hierarchical breakdown of functionality, and `it` calls which define individual test cases.
+`spec` ファイル自体には、そのテスト全体を定義するただ一つの `describe` コールが含まれています。その中には、主要な機能領域を定義する他の `describe` コールがネストされています。各 `describe` コールには、setup コードと teardown コード（一般的に `beforeEach` と `afterEach` コールによって処理される）、機能を階層的に分解した `describe` コール、また個々のテストケースを定義する `it` コールが含まれます。
-The `describe` and `it` calls also contain a descriptive text label. In well-formed tests, the `describe` and `it` calls combine with their labels to perform proper phrases and the full label for each test case, formed by combining the `describe` and `it` labels, creates a full sentence.
+`describe` と `it` コールには、説明のテキストラベルも含まれます。適切な形式のテストでは、`describe` と `it` をコールすると、ラベルと組み合わせた適切なフレーズが実行され、各テストケースのすべてのラベルが `describe` と `it` ラベルを組み合わせて構成され、完全な文が作成されます。
-For example:
+例:
```tsx
describe('Calculation', () => {
@@ -72,17 +72,17 @@ describe('Calculation', () => {
});
```
-The outer `describe` call states that the `Calculation` service is being tested, the inner `describe` calls state exactly what functionality is being tested, and the `it` calls state what the test cases are. When run the full label for each test case is a sentence that makes sense (Calculation divide cowardly refuses to divide by zero).
+外側の `describe` コールは `Calculation` Service がテストされていることを示し、内側の `describe` コールはテストされている機能を正確に示し、そして `it` コールはテストケースが何であるかを示しています。各テストケースの完全なラベルを実行すると、意味のある文になります(卑劣な 0 での除算という計算を拒否しました)。
-### Pages and Components
+### ページとコンポーネント
-Pages are just Angular components. Thus, pages and components are both tested using Angular's Component Testing guidelines.
+Pages は単なる Angular コンポーネントです。そのため、ページとコンポーネントは両方とも Angular のコンポーネントテストガイドライン を使ってテストされます。
-Since pages and components contain both TypeScript code and HTML template markup it is possible to perform both component class testing and component DOM testing. When a page is created, the template test that is generated looks like this:
+ページとコンポーネントには TypeScript コードと HTML テンプレートマークアップの両方が含まれているため、コンポーネントクラスのテストとコンポーネント DOM のテストの両方を実行できます。ページが作成されると、生成されるテンプレートテストは次のようになります:
```tsx
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
import { TabsPage } from './tabs.page';
@@ -91,13 +91,11 @@ describe('TabsPage', () => {
let fixture: ComponentFixture;
beforeEach(async () => {
- TestBed.configureTestingModule({
+ await TestBed.configureTestingModule({
declarations: [TabsPage],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).compileComponents();
- });
- beforeEach(() => {
fixture = TestBed.createComponent(TabsPage);
component = fixture.componentInstance;
fixture.detectChanges();
@@ -109,17 +107,17 @@ describe('TabsPage', () => {
});
```
-When doing component class testing, the component object is accessed using the component object defined via `component = fixture.componentInstance;`. This is an instance of the component class. When doing DOM testing, the `fixture.nativeElement` property is used. This is the actual `HTMLElement` for the component, which allows the test to use standard HTML API methods such as `HTMLElement.querySelector` in order to examine the DOM.
+コンポーネントクラスのテストを行う場合、コンポーネントオブジェクトは `component=fixture.componentInstance;` によって定義されたコンポーネントオブジェクトを使用してアクセスされます。これはコンポーネントクラスのインスタンスです。DOM テストを行う際には、`fixture.nativeElement` プロパティが使用されます。これはコンポーネントの実際の `HTMLElement`であり、テストで DOM を調べるために `HTMLElement.querySelector` などの標準の HTML API メソッドを使うことを可能にします。
-## Services
+## Service
-Services often fall into one of two broad categories: utility services that perform calculations and other operations, and data services that perform primarily HTTP operations and data manipulation.
+Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主に HTTP 操作やデータ操作を実行するデータの service の 2 つの大まかなカテゴリーのいずれかに分類されます。
-### Basic Service Testing
+### 基本的な Service のテスト
-The suggested way to test most services is to instantiate the service and manually inject mocks for any dependency the service has. This way, the code can be tested in isolation.
+ほとんどの service をテストするために推奨する方法は、service をインスタンス化し、service が持つ依存関係のモックを手動で注入することです。こうすることで、コードを分離してテストすることができます。
-Let's say that there is a service with a method that takes an array of timecards and calculates net pay. Let's also assume that the tax calculations are handled via another service that the current service depends on. This payroll service could be tested as such:
+たとえば、タイムカードの配列を取得して差引支給額を計算するメソッドを持つ service があるとします。また税金計算は、現在の service が依存しているもう一つの service を介して処理されるとします。この給与計算の service は、このようにテストすることができます:
```tsx
import { PayrollService } from './payroll.service';
@@ -144,9 +142,9 @@ describe('PayrollService', () => {
});
```
-This allows the test to control the values returned by the various tax calculations via mock setup such as `taxServiceSpy.federalIncomeTax.and.returnValue(73.24)`. This allows the "net pay" tests to be independent of the tax calculation logic. When the tax codes change, only the tax service related code and tests need to change. The tests for the net pay can continue to operate as they are since these tests do not care how the tax is calculated, just that the value is applied properly.
+これにより、テストでは `taxServiceSpy.federalIncomeTax.and.returnValue(73.24)` などのモックの設定を介して様々な税金計算から戻される値を制御できます。これにより、「差引支給額」のテストを税金計算ロジックから独立させることができます。税金のコードが変更された場合、修正する必要があるのは税金 service 関連のコードとテストのみです。差引支給額のテストは、税金がどのように計算されるかを考慮せず、値が適切に適用されるのみであるため、そのまま機能し続けることができます。
-The scaffolding that is used when a service is generated via `ionic g service name` uses Angular's testing utilities and sets up a testing module. Doing so is not strictly necessary. That code may be left in, however, allowing the service to be built manually or injected as such:
+`ionic g service name` で service を生成するときに使われる scaffold は Angular のテストユーティリティを使ってテストモジュールをセットアップします。必ずしもそうする必要はありません。ただし、このコードを残しておくことで、手動でサービスを構築したり、次のように注入したりすることができます:
```tsx
import { TestBed, inject } from '@angular/core/testing';
@@ -180,11 +178,11 @@ describe('PayrolService', () => {
});
```
-#### Testing HTTP Data Services
+#### HTTP データ Service のテスト
-Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please see Angular's Angular's Testing HTTP requests guide.
+HTTP 操作を実行するほとんどの service は、それらの操作を実行するために Angular の HttpClient service を使用します。そのようなテストには、Angular の `HttpClientTestingModule` を使うことが推奨されています。このモジュールの詳細なドキュメントは Angular の HTTP リクエストをテストする のガイドを参照してください。
-This basic setup for such a test looks like this:
+このようなテストの基本的な設定は次のようになります:
```tsx
import { HttpBackend, HttpClient } from '@angular/common/http';
@@ -231,11 +229,11 @@ describe('IssTrackingDataService', () => {
});
```
-### Pipes
+### Pipe
-A pipe is like a service with a specifically defined interface. It is a class that contains one public method, `transform`, which manipulates the input value (and other optional arguments) in order to create the output that is rendered on the page. To test a pipe: instantiate the pipe, call the transform method, and verify the results.
+pipe は、特別に定義されたインタフェースを持つ service のようなものです。このクラスには、入力値(およびその他のオプションの引数)を操作してページにレンダリングされる出力を作成するための public メソッド `transform` が含まれています。パイプをテストするには、パイプをインスタンス化し、transform メソッドを呼び出して結果を検証します。
-As a simple example, let's look at a pipe that takes a `Person` object and formats the name. For the sake of simplicity, let's say a `Person` consists of an `id`, `firstName`, `lastName`, and `middleInitial`. The requirements for the pipe are to print the name as "Last, First M." handling situations where a first name, last name, or middle initial do not exist. Such a test might look like this:
+簡単な例として、`Person` オブジェクトを受け取り、名前をフォーマットする pipe を見てみましょう。簡単にするために、`Person` は `id`、`firstName`、`lastName`、`middleInitial` で構成されるとします。パイプの要件は、名・姓・ミドルネームのいずれかが存在しない場合に、名前を「性、名 M(ミドルネーム)。」として出力することです。このようなテストは次のようになります:
```tsx
import { NamePipe } from './name.pipe';
@@ -281,34 +279,34 @@ describe('NamePipe', () => {
});
```
-It is also beneficial to exercise the pipe via DOM testing in the components and pages that utilize the pipe.
+また、pipe を利用するコンポーネントおよびページでの DOM テストを介して pipe を実行することも有益です。
-## End-to-end Testing
+## エンドツーエンドテスト
-End-to-end testing is used to verify that an application works as a whole and often includes a connection to live data. Whereas unit tests focus on code units in isolation and thus allow for low-level testing of the application logic, end-to-end tests focus on various user stories or usage scenarios, providing high-level testing of the overall flow of data through the application. Whereas unit tests try to uncover problems with an application's logic, end-to-end tests try to uncover problems that occur when those individual units are used together. End-to-end tests uncover problems with the overall architecture of the application.
+エンドツーエンドのテストは、アプリケーションが全体として機能し、多くの場合、ライブデータへの接続を含むことを検証するために使用されます。一方で、ユニットテストは分離されたコードユニットに重点を置いているため、アプリケーションロジックの低レベルのテストが可能ですが、エンドツーエンドテストはさまざまなユーザーストーリーや使用・シナリオに重点を置いており、アプリケーション全体を通したデータフローの総合的な高レベルのテストを提供します。また一方で、ユニットテストではアプリケーションのロジックの問題を明らかにしようとしますが、エンドツーエンドテストでは、個々のユニットが一緒に使用される場合に発生する問題を明らかにしようとします。エンドツーエンドのテストにより、アプリケーションの全体的なアーキテクチャに関する問題が明らかになります。
-Since end-to-end tests exercise user stories and cover the application as a whole rather than individual code modules, end-to-end tests exist in their own application in the project apart from the code for the main application itself. Most end-to-end tests operate by automating common user interactions with the application and examining the DOM to determine the results of those interactions.
+エンドツーエンドテストはユーザーストーリーを実行し、個々のコードモジュールではなくアプリケーション全体を対象とするため、エンドツーエンドテストは、メインアプリケーション自体のコードとは別に、プロジェクト内の独自のアプリケーションとして存在します。ほとんどのエンドツーエンドテストは、アプリケーションとの共通のユーザー対話を自動化し、それらの対話の結果を判別するために DOM を調査します。
-### Test Structure
+### テストの構成
-When an `@ionic/angular` application is generated, a default end-to-end test application is generated in the `e2e` folder. This application uses Protractor to control the browser and Jasmine to structure and execute the tests. The application initially consists of four files:
+`@ionic/angular` アプリケーションが作成されると、 デフォルトのエンドツーエンドのテストアプリケーションが `e2e` フォルダに生成されます。このアプリケーションは Protractor を使用してブラウザを制御し、Jasmine を使用してテストを構築し、実行します。アプリケーションは、初期時は次の 4 つのファイルで構成されています:
-- `protractor.conf.js` - the Protractor configuration file
-- `tsconfig.e2e.json` - specific TypeScript configuration for the testing application
-- `src/app.po.ts` - a page object containing methods that navigate the application, query elements in the DOM, and maninpulate elements on the page
-- `src/app.e2e-spec.ts` - a testing script
+- `protractor.conf.js` - Protractor の設定ファイル
+- `tsconfig.e2e.json` - テストアプリケーション用の特定の TypeScript の設定
+- `src/app.po.ts` - アプリケーションをナビゲートするメソッド、DOM 内の要素を照会するメソッド、ページ上の要素を操作するメソッドを含むページオブジェクト
+- `src/app.e2e-spec.ts` - テスト用のスクリプト
-#### Page Objects
+#### ページオブジェクト
-End-to-end tests operate by automating common user interactions with the application, waiting for the application to respond, and examining the DOM to determine the results of the interaction. This involves a lot of DOM manipulation and examination. If this were all done manually, the tests would be very brittle and difficult to read and maintain.
+エンドツーエンドのテストは、アプリケーションとの共通のユーザー対話を自動化し、アプリケーションが応答するのを待ち、対話の結果を判別するために DOM を検査します。これには、多くの DOM 操作と試験が必要です。これらをすべて手作業で行うと、テストは非常に脆くなり、見て理解することや保守が困難になります。
-Page objects encapsulate the HTML for a single page in a TypeScript class, providing an API that the test scripts use to interact with the application. The encapsulation of the DOM manipulation logic in page objects makes the tests more readable and far easier to reason about, lowering the maintenance costs of the test. Creating well-crafted page objects is the key to creating high quality and maintainable end-to-end tests.
+ページオブジェクトは、TypeScript クラスの単一ページの HTML をカプセル化し、テスト用のスクリプトがアプリケーションと対話するために使用する API を提供します。DOM 操作ロジックをページオブジェクト内にカプセル化することで、テストが読みやすくなり、かつ判断することがはるかに簡単になり、テストの保守コストが大幅に削減されます。洗練されたページオブジェクトを作成することは、高品質で保守しやすいエンドツーエンドのテストを作成するための鍵です。
-##### Base Page Object
+##### ベースページオブジェクト
-A lot of tests rely on actions such as waiting for a page to be visible, entering text into an input, and clicking a button. The methods used to do this remain consistent with only the CSS selectors used to get the appropriate DOM element changing. Therefore it makes sense to abstract this logic into a base class that can be used by the other page objects.
+多くのテストは、ページが表示されるのを待ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに依存しています。これを行うために使用されるメソッドは、適切な DOM 要素の変更を取得するために使用される CSS セレクターのみと一貫性があります。したがって、このロジックを、他のページオブジェクトが使用できるベースクラスに抽象化することは理にかなっています。
-Here is an example that implements a few basic methods that all page objects will need to support.
+すべてのページオブジェクトがサポートを必要とするいくつかのベースメソッドを実装する例を次に示します:
```tsx
import { browser, by, element, ExpectedConditions } from 'protractor';
@@ -370,11 +368,11 @@ export class PageObjectBase {
}
```
-##### Per-Page Abstractions
+##### ページ毎の要約
-Each page in the application will have its own page object class that abstracts the elements on that page. If a base page object class is used, creating the page object involves mostly creating custom methods for elements that are specific to that page. Often, these custom elements take advantage of methods in the base class in order to perform the work that is required.
+アプリケーションの各ページには、そのページの要素を抽象化する独自のページオブジェクトクラスがあります。ベースとなるページオブジェクトクラスを使用する場合、ページオブジェクトを作成するには、ほとんどの場合そのページに固有の要素のカスタムメソッドを作成する必要があります。多くの場合、これらのカスタム要素は、必要な作業を実行するためにベースクラスのメソッドの恩恵を受けます。
-Here is an example page object for a simple but typical login page. Notice that many of the methods, such as `enterEMail()`, call methods in the base class that perform the bulk of the work.
+次に、単純ですが典型的なログインページのページオブジェクトの例を示します。`enterEMail()` のような多くのメソッドは、作業の大部分を行うベースクラスのメソッドを呼び出すことに注意してください。
```tsx
import { browser, by, element, ExpectedConditions } from 'protractor';
@@ -407,13 +405,13 @@ export class LoginPage extends PageObjectBase {
}
```
-#### Testing Scripts
+#### テストスクリプト
-Similar to unit tests, end-to-end test scripts consist of nested `describe()` and `it()` functions. In the case of end-to-end tests, the `describe()` functions generally denote specific scenarios with the `it()` functions denoting specific behaviors that should be exhibited by the application as actions are performed within that scenario.
+ユニットテストと同様に、エンドツーエンドのテストスクリプトはネストされた `describe()` と `it()` 関数で構成されています。エンドツーエンドのテストの場合、`describe()` 関数は一般に、特定のシナリオを、そのシナリオ内でアクションが実行されるときにアプリケーションによって表されるべき特定の振る舞いを示す `it()` 関数とともに示します。
-Also similar to unit tests, the labels used in the `describe()` and `it()` functions should make sense both with the "describe" or "it" and when concatenated together to form the complete test case.
+また、ユニットテストと同様に、`describe()` および `it()` 関数で使用されるラベルは、"describe" または "it"と、完全なテストケースを形成するためにともに連結されるとき、両方とも意味をなします。
-Here is a sample end-to-end test script that exercises some typical login scenarios.
+典型的なログインシナリオを実行するエンドツーエンドのテストスクリプトの簡単な例を次に示します。
```tsx
import { AppPage } from '../page-objects/pages/app.po';
@@ -501,17 +499,17 @@ describe('Login', () => {
});
```
-### Configuration
+### 設定
-The default configuration uses the same `environment.ts` file that is used for development. In order to provide better control over the data used by the end-to-end tests, it is often useful to create a specific environment for testing and use that environment for the tests. This section shows one possible way to create this configuration.
+デフォルトの設定では、開発に使用される同じ `environment.ts` ファイルを使います。エンドツーエンドのテストで使用するデータをより適切に制御するには、テスト用の特定の環境を用意し、テストにその環境を使用すると便利なことが多いです。このセクションでは、この設定を作成する 1 つの方法を示します。
-#### Testing Environment
+#### テスト環境
-Setting up a testing environment involves creating a new environment file that uses a dedicated testing backend, updating the `angular.json` file to use that environment, and modifying the `e2e` script in the `package.json` to specify the `test` environment.
+テスト環境を設定するには、テスト専用のバックエンドを使用する新しい環境ファイルを作成し、その環境を使うために `angular.json` ファイルを更新し、`package.json` 中の `e2e` スクリプトを `test` 環境を指定するように修正します。
-##### Create the `environment.e2e.ts` File
+##### `environment.e2e.ts` ファイルを生成
-The Angular `environment.ts` and `environment.prod.ts` files are often used to store information such as the base URL for the application's backend data services. Create an `environment.e2e.ts` that provides the same information, only connecting to backend services that are dedicated to testing rather than the development or production backend services. Here is an example:
+Angular の `environment.ts` と `environment.prod.ts` ファイルは、アプリケーションのバックエンドのデータサービスのベース URL などの情報を格納するために度々使用されます。また、同じ情報を提供する `environment.e2e.ts` を作成してください。これは、開発または本番のバックエンドサービスではなく、テスト専用のバックエンドサービスにのみ接続します。以下に例を示します:
```tsx
export const environment = {
@@ -521,11 +519,11 @@ export const environment = {
};
```
-##### Modify the `angular.json` File
+##### `angular.json` ファイルを修正
-The `angular.json` file needs to be modified to use this file. This is a layered process. Follow the XPaths listed below to add the configuration that is required.
+`angular.json` ファイルを使用するには、このファイルを修正する必要があります。これは階層化プロセスです。以下の XPath リストに従って、必要な設定を追加しましょう。
-Add a configuration at `/projects/app/architect/build/configurations` called `test` that does the file replacement:
+`/projects/app/architect/build/configurations` にファイルの置換を行う `test` という名前の設定を追加します:
```json
"test": {
@@ -538,7 +536,7 @@ Add a configuration at `/projects/app/architect/build/configurations` called `te
}
```
-Add a configuration at `/projects/app/architect/serve/configurations` called `test` that points the browser target at the `test` build configuration that was defined above.
+`/projects/app/architect/serve/configurations` に、上記で定義した `test` というビルドの設定をブラウザターゲットに指定する `test` という名前の設定を追加します。
```json
"test": {
@@ -546,7 +544,7 @@ Add a configuration at `/projects/app/architect/serve/configurations` called `te
}
```
-Add a configuration at `/projects/app-e2e/architect/e2e/configurations` called `test` that does points the dev server target at the `test` serve configuration defined above.
+`/projects/app-e2e/architect/e2e/configurations` に、上記で定義した `test` という起動設定で開発サーバーターゲットを指定する `test` という名前の設定を追加します。
```json
"test": {
@@ -554,9 +552,9 @@ Add a configuration at `/projects/app-e2e/architect/e2e/configurations` called `
}
```
-##### Modify the `package.json` File
+##### `package.json` ファイルを修正
-Modify the `package.json` file so that `npm run e2e` uses the `test` configuration.
+`npm run e2e` が `test` の設定を使うように `package.json` ファイルを修正します。
```json
"scripts": {
@@ -570,14 +568,14 @@ Modify the `package.json` file so that `npm run e2e` uses the `test` configurati
},
```
-#### Test Cleanup
+#### テストクリーンアップ
-If the end-to-end tests modify data in any way it is helpful to reset the data to a known state once the test completes. One way to do that is to:
+エンドツーエンドテストが何らかの方法でデータを変更する場合は、テストが完了したらデータを既知の状態に一度リセットすると便利です。そのための 1 つの方法は:
-1. Create an endpoint that performs the cleanup.
-1. Add a `onCleanUp()` function to the `config` object exported by the `protractor.conf.js` file.
+1. クリーンアップを実行するエンドポイントを生成する。
+1. `protractor.conf.js` ファイルによってエクスポートされる `config` オブジェクトに `onCleanUp()` 関数を追加する
-Here is an example:
+次に例を示します:
```javascript
onCleanUp() {
diff --git a/docs/angular/virtual-scroll.md b/docs/angular/virtual-scroll.md
index 0150d810162..3e239956e27 100644
--- a/docs/angular/virtual-scroll.md
+++ b/docs/angular/virtual-scroll.md
@@ -1,8 +1,12 @@
-# Virtual Scroll
+# 仮想スクロール
-In the past, we have provided an `ion-virtual-scroll` component in Ionic Framework to help with list virtualization. At the time this was not available in Angular, but recently Angular has provided its own solution via the `@angular/cdk` package.
+:::warning Looking for `ion-virtual-scroll`?
-## Setup
+`ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below.
+
+:::
+
+## Installation
To setup the CDK Scroller, first install `@angular/cdk`:
diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md
index 753dbefb5a5..22a9b47a603 100644
--- a/docs/angular/your-first-app.md
+++ b/docs/angular/your-first-app.md
@@ -1,6 +1,6 @@
---
-title: 'Your First Ionic App: Angular'
-sidebar_label: Build Your First App
+title: 'はじめてのIonicアプリ: Angular'
+sidebar_label: はじめてのアプリ
---
@@ -11,7 +11,7 @@ sidebar_label: Build Your First App
/>
-The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
+Ionic の素晴らしいところは、1 つのコードベースで、使い慣れた Web ツールと言語を使用して任意のプラットフォーム用にビルドできることです。 Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step.
Here’s the finished app running on all 3 platforms:
@@ -19,9 +19,9 @@ Here’s the finished app running on all 3 platforms:
width="560"
height="315"
src="https://www.youtube.com/embed/0ASQ13Y1Rk4"
- frameborder="0"
+ frameBorder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
- allowfullscreen
+ allowFullScreen
>
:::note
@@ -35,8 +35,8 @@ We'll create a Photo Gallery app that offers the ability to take photos with you
Highlights include:
- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components).
-- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitor.ionicframework.com), Ionic's official native app runtime.
-- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitor.ionicframework.com/docs/apis/camera), [Filesystem](https://capacitor.ionicframework.com/docs/apis/filesystem), and [Storage](https://capacitor.ionicframework.com/docs/apis/storage) APIs.
+- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime.
+- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs.
Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng).
@@ -69,17 +69,23 @@ The `-g` option means _install globally_. When packages are installed globally,
Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information.
:::
-## Create an App
+## アプリの作成
-Next, create an Ionic Angular app that uses the “Tabs” starter template and adds Capacitor for native functionality:
+次に、"Tabs" というアプリテンプレートを使用して Ionic Angular アプリを生成し、Native 機能を使うために Capacitor を追加します。
```shell
ionic start photo-gallery tabs --type=angular --capacitor
```
-This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily!
+:::note
+
+`NgModules` と `Standalone` のどちらかを選択するプロンプトが表示されたら、このチュートリアルは `NgModules` のアプローチに従っているので、`NgModules` を選択する。
+
+:::
+
+このスタータープロジェクトには、Ionic 開発のために事前に構成された 3 つのページとベストプラクティスが用意されています。共通の構成要素がすでに配置されているため、機能を簡単に追加できます！
-Next, change into the app folder:
+次に、アプリのフォルダに移動します:
```shell
cd photo-gallery
@@ -88,7 +94,7 @@ cd photo-gallery
Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work:
```shell
-npm install @capacitor/camera @capacitor/storage @capacitor/filesystem
+npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem
```
### PWA Elements
@@ -106,15 +112,15 @@ Next, import `@ionic/pwa-elements` by editing `src/main.ts`.
```tsx
import { defineCustomElements } from '@ionic/pwa-elements/loader';
-// Call the element loader after the platform has been bootstrapped
+// Call the element loader before the bootstrapModule/bootstrapApplication call
defineCustomElements(window);
```
That’s it! Now for the fun part - let’s see the app in action.
-## Run the App
+## アプリを起動
-Run this command next:
+次のコマンドを実行してください:
```shell
ionic serve
@@ -126,7 +132,7 @@ And voilà! Your Ionic app is now running in a web browser. Most of your app can
There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately!
-
+
Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see:
diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md
index 33064cd1140..efaa4f38961 100644
--- a/docs/angular/your-first-app/2-taking-photos.md
+++ b/docs/angular/your-first-app/2-taking-photos.md
@@ -1,6 +1,6 @@
---
title: Taking Photos with the Camera
-sidebar_label: Taking Photos
+sidebar_label: カメラ撮影
---
@@ -11,7 +11,7 @@ sidebar_label: Taking Photos
/>
-Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](https://capacitor.ionicframework.com/docs/apis/camera). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
+Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](https://capacitorjs.com/docs/apis/camera). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android).
## Photo Service
@@ -26,7 +26,7 @@ Open the new `services/photo.service.ts` file, and let’s add the logic that wi
```tsx
import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera';
import { Filesystem, Directory } from '@capacitor/filesystem';
-import { Storage } from '@capacitor/storage';
+import { Preferences } from '@capacitor/preferences';
```
Next, define a new class method, `addNewToGallery`, that will contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera:
@@ -70,7 +70,7 @@ Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the
Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie!
-
+
_(Your selfie is probably much better than mine)_
@@ -83,7 +83,7 @@ Outside of the `PhotoService` class definition (the very bottom of the file), cr
```tsx
export interface UserPhoto {
filepath: string;
- webviewPath: string;
+ webviewPath?: string;
}
```
@@ -108,7 +108,7 @@ Over in the `addNewToGallery` function, add the newly captured photo to the begi
this.photos.unshift({
filepath: "soon...",
- webviewPath: capturedPhoto.webPath
+ webviewPath: capturedPhoto.webPath!
});
}
```
diff --git a/docs/angular/your-first-app/3-saving-photos.md b/docs/angular/your-first-app/3-saving-photos.md
index 051e5fb3808..cf9b948c221 100644
--- a/docs/angular/your-first-app/3-saving-photos.md
+++ b/docs/angular/your-first-app/3-saving-photos.md
@@ -1,5 +1,5 @@
---
-sidebar_label: Saving Photos
+sidebar_label: 写真の保存
---
# Saving Photos to the Filesystem
@@ -31,7 +31,7 @@ public async addNewToGallery() {
}
```
-We’ll use the Capacitor [Filesystem API](https://capacitor.ionicframework.com/docs/apis/filesystem) to save the photo to the filesystem. To start, convert the photo to base64 format, then feed the data to the Filesystem’s `writeFile` function. As you’ll recall, we display each photo on the screen by setting each image’s source path (`src` attribute) in `tab2.page.html` to the webviewPath property. So, set it then return the new Photo object.
+We’ll use the Capacitor [Filesystem API](https://capacitorjs.com/docs/apis/filesystem) to save the photo to the filesystem. To start, convert the photo to base64 format, then feed the data to the Filesystem’s `writeFile` function. As you’ll recall, we display each photo on the screen by setting each image’s source path (`src` attribute) in `tab2.page.html` to the webviewPath property. So, set it then return the new Photo object.
```tsx
private async savePicture(photo: Photo) {
@@ -39,7 +39,7 @@ private async savePicture(photo: Photo) {
const base64Data = await this.readAsBase64(photo);
// Write the file to the data directory
- const fileName = new Date().getTime() + '.jpeg';
+ const fileName = Date.now() + '.jpeg';
const savedFile = await Filesystem.writeFile({
path: fileName,
data: base64Data,
diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.md
index 15aa6ec926a..f2fc61b1fd1 100644
--- a/docs/angular/your-first-app/4-loading-photos.md
+++ b/docs/angular/your-first-app/4-loading-photos.md
@@ -1,14 +1,14 @@
---
-sidebar_label: Loading Photos
+sidebar_label: 写真の読み込み
---
# Loading Photos from the Filesystem
We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery.
-Fortunately, this is easy: we’ll leverage the Capacitor [Storage API](https://capacitor.ionicframework.com/docs/apis/storage) to store our array of Photos in a key-value store.
+Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitorjs.com/docs/apis/preferences) to store our array of Photos in a key-value store.
-## Storage API
+## Preferences API
Begin by defining a constant variable that will act as the key for the store:
@@ -21,10 +21,10 @@ export class PhotoService {
}
```
-Next, at the end of the `addNewToGallery` function, add a call to `Storage.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
+Next, at the end of the `addNewToGallery` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved.
```tsx
-Storage.set({
+Preferences.set({
key: this.PHOTO_STORAGE,
value: JSON.stringify(this.photos),
});
@@ -35,8 +35,8 @@ With the photo array data saved, create a function called `loadSaved()` that can
```tsx
public async loadSaved() {
// Retrieve cached photo array data
- const photoList = await Storage.get({ key: this.PHOTO_STORAGE });
- this.photos = JSON.parse(photoList.value) || [];
+ const { value } = await Preferences.get({ key: this.PHOTO_STORAGE });
+ this.photos = (value ? JSON.parse(value) : []) as UserPhoto[];
// more to come...
}
diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.md
index 913d4d582e6..16235a008a4 100644
--- a/docs/angular/your-first-app/5-adding-mobile.md
+++ b/docs/angular/your-first-app/5-adding-mobile.md
@@ -2,7 +2,7 @@
strip_number_prefixes: false
---
-# Adding Mobile
+# モバイルデバイス機能の追加
Our photo gallery app won’t be complete until it runs on iOS, Android, and the web - all using one codebase. All it takes is some small logic changes to support mobile platforms, installing some native tooling, then running the app on a device. Let’s go!
@@ -38,14 +38,14 @@ private async readAsBase64(photo: Photo) {
if (this.platform.is('hybrid')) {
// Read the file into base64 format
const file = await Filesystem.readFile({
- path: photo.path
+ path: photo.path!
});
return file.data;
}
else {
// Fetch the photo, read as a blob, then convert to base64 format
- const response = await fetch(photo.webPath);
+ const response = await fetch(photo.webPath!);
const blob = await response.blob();
return await this.convertBlobToBase64(blob) as string;
@@ -57,35 +57,35 @@ Next, update the `savePicture()` method. When running on mobile, set `filepath`
```tsx
// Save picture to file on device
- private async savePicture(photo: Photo) {
- // Convert photo to base64 format, required by Filesystem API to save
- const base64Data = await this.readAsBase64(photo);
-
- // Write the file to the data directory
- const fileName = new Date().getTime() + '.jpeg';
- const savedFile = await Filesystem.writeFile({
- path: fileName,
- data: base64Data,
- directory: Directory.Data
- });
+private async savePicture(photo: Photo) {
+ // Convert photo to base64 format, required by Filesystem API to save
+ const base64Data = await this.readAsBase64(photo);
+
+ // Write the file to the data directory
+ const fileName = Date.now() + '.jpeg';
+ const savedFile = await Filesystem.writeFile({
+ path: fileName,
+ data: base64Data,
+ directory: Directory.Data
+ });
- if (this.platform.is('hybrid')) {
- // Display the new image by rewriting the 'file://' path to HTTP
- // Details: https://ionicframework.com/docs/building/webview#file-protocol
- return {
- filepath: savedFile.uri,
- webviewPath: Capacitor.convertFileSrc(savedFile.uri),
- };
- }
- else {
- // Use webPath to display the new image instead of base64 since it's
- // already loaded into memory
- return {
- filepath: fileName,
- webviewPath: photo.webPath
- };
- }
+ if (this.platform.is('hybrid')) {
+ // Display the new image by rewriting the 'file://' path to HTTP
+ // Details: https://ionicframework.com/docs/building/webview#file-protocol
+ return {
+ filepath: savedFile.uri,
+ webviewPath: Capacitor.convertFileSrc(savedFile.uri),
+ };
}
+ else {
+ // Use webPath to display the new image instead of base64 since it's
+ // already loaded into memory
+ return {
+ filepath: fileName,
+ webviewPath: photo.webPath
+ };
+ }
+}
```
Next, head back over to the `loadSaved()` function we implemented for the web earlier. On mobile, we can directly set the source of an image tag - `` - to each photo file on the Filesystem, displaying them automatically. Thus, only the web requires reading each image from the Filesystem into base64 format. Update this function to add an _if statement_ around the Filesystem code:
@@ -93,8 +93,8 @@ Next, head back over to the `loadSaved()` function we implemented for the web ea
```tsx
public async loadSaved() {
// Retrieve cached photo array data
- const photoList = await Storage.get({ key: this.PHOTO_STORAGE });
- this.photos = JSON.parse(photoList.value) || [];
+ const { value } = await Preferences.get({ key: this.PHOTO_STORAGE });
+ this.photos = (value ? JSON.parse(value) : []) as UserPhoto[];
// Easiest way to detect when running on the web:
// “when the platform is NOT hybrid, do this”
diff --git a/docs/angular/your-first-app/6-deploying-mobile.md b/docs/angular/your-first-app/6-deploying-mobile.md
index 9b6d503d51b..06ae7100d8f 100644
--- a/docs/angular/your-first-app/6-deploying-mobile.md
+++ b/docs/angular/your-first-app/6-deploying-mobile.md
@@ -1,6 +1,6 @@
---
title: Deploying to iOS and Android
-sidebar_label: Deploying Mobile
+sidebar_label: モバイルへのデプロイ
---
@@ -15,7 +15,7 @@ Since we added Capacitor to our project when it was first created, there’s onl
## Capacitor Setup
-Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the differences [here](https://capacitor.ionicframework.com/docs/cordova#differences-between-capacitor-and-cordova).
+Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the differences [here](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova).
If you’re still running `ionic serve` in the terminal, cancel it. Complete a fresh build of your Ionic project, fixing any errors that it reports:
@@ -58,9 +58,9 @@ First, run the Capacitor `open` command, which opens the native iOS project in X
ionic cap open ios
```
-In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitor.ionicframework.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
+In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties."
-
+
Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values."
@@ -70,15 +70,15 @@ Follow the same process to add the other two Keys required of the Camera plugin:
Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team.
-
+
With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device:
-
+
Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app!
-
+
## Android Deployment
@@ -92,7 +92,7 @@ ionic cap open android
Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`.
-
+
Scroll to the `Permissions` section and ensure these entries are included:
@@ -103,11 +103,11 @@ Scroll to the `Permissions` section and ensure these entries are included:
Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device.
-
+
Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app.
-
+
Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉
diff --git a/docs/angular/your-first-app/7-live-reload.md b/docs/angular/your-first-app/7-live-reload.md
index c560be55767..484feddcc0f 100644
--- a/docs/angular/your-first-app/7-live-reload.md
+++ b/docs/angular/your-first-app/7-live-reload.md
@@ -1,6 +1,6 @@
---
-title: Rapid App Development with Live Reload
-sidebar_label: Live Reload
+title: アプリ開発を高速化するためのライブリロード
+sidebar_label: ライブリロード
---
@@ -91,7 +91,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
this.photos.splice(position, 1);
// Update photos array cache by overwriting the existing photo array
- Storage.set({
+ Preferences.set({
key: this.PHOTO_STORAGE,
value: JSON.stringify(this.photos)
});
@@ -107,7 +107,7 @@ public async deletePicture(photo: UserPhoto, position: number) {
}
```
-The selected photo is removed from the Photos array first. Then, we use the Capacitor Storage API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
+The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API.
Save this file, then tap on a photo again and choose the “Delete” option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪
diff --git a/docs/angular/your-first-app/8-distribute.md b/docs/angular/your-first-app/8-distribute.md
index 72f54278489..65ef475f6be 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 \
@@ -55,7 +55,7 @@ To receive this live update, you will need to run the app on a device or an emul
ionic [cordova | cap] run [ios | android] [options]
```
-Assuming the app is configured correctly to listen to the channel you deployed too, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied!
+Assuming the app is configured correctly to listen to the channel you deployed to, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied!
To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the [Deploy a Live Update](https://ionic.io/docs/appflow/quickstart/deploy) section inside the Appflow docs.
@@ -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.
@@ -95,6 +95,6 @@ For access to the ability to create a Native Configuration, you will need to be
Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users devices!
-There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitor.ionicframework.com/docs/apis). The sky’s the limit. Once you have added another feature, run the the build and deploy process again through Appflow to get it out to your users.
+There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users.
Happy app building! 💙
diff --git a/docs/api.md b/docs/api.md
index 45e4c1d8d19..01b482ea210 100644
--- a/docs/api.md
+++ b/docs/api.md
@@ -1,17 +1,17 @@
---
-title: API Index
+title: APIインデックス
---
import APIList from '@components/page/api/APIList';
- API Index | Ionic Docs API Index for all API Custom Elements
+ API Index | API カスタム要素の Ionic Docs API Index
-Each Ionic [component](/docs/components) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties.
+各 Ionic の [コンポーネント](/docs/components) は、1 つ以上の [カスタム要素](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) から構成されます。各カスタム要素は順番に、プロパティ、メソッド、イベント、および CSS カスタムプロパティを公開できます。
diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.md
index aa3020206b8..be0d80eba1b 100644
--- a/docs/api/accordion-group.md
+++ b/docs/api/accordion-group.md
@@ -1,37 +1,21 @@
---
title: "ion-accordion-group"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/accordion-group/props.md';
-import Events from '@site/static/auto-generated/accordion-group/events.md';
-import Methods from '@site/static/auto-generated/accordion-group/methods.md';
-import Parts from '@site/static/auto-generated/accordion-group/parts.md';
-import CustomProps from '@site/static/auto-generated/accordion-group/custom-props.md';
-import Slots from '@site/static/auto-generated/accordion-group/slots.md';
-
-
+import Props from '@ionic-internal/component-api/v8/accordion-group/props.md';
+import Events from '@ionic-internal/component-api/v8/accordion-group/events.md';
+import Methods from '@ionic-internal/component-api/v8/accordion-group/methods.md';
+import Parts from '@ionic-internal/component-api/v8/accordion-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/accordion-group/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/accordion-group/slots.md';
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
+アコーディオン・グループは、アコーディオンインスタンスのためのコンテナです。これは、アコーディオンの状態を管理し、キーボードナビゲーションを提供します。
-Accordion group is a container for accordion instances. It manages the state of the accordions and provides keyboard navigation.
+より詳細な情報や使用方法については、 [Accordion](./accordion) を参照ください。
-For more information as well as usage, see the [Accordion Documentation](./accordion)
## Interfaces
@@ -45,7 +29,7 @@ interface AccordionGroupChangeEventDetail {
### AccordionGroupCustomEvent
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
```typescript
interface AccordionGroupCustomEvent extends CustomEvent {
@@ -56,20 +40,20 @@ interface AccordionGroupCustomEvent extends CustomEvent {
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/accordion.md b/docs/api/accordion.md
index 87380efebdf..a60f352a68b 100644
--- a/docs/api/accordion.md
+++ b/docs/api/accordion.md
@@ -1,133 +1,133 @@
---
title: "ion-accordion"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/accordion/props.md';
-import Events from '@site/static/auto-generated/accordion/events.md';
-import Methods from '@site/static/auto-generated/accordion/methods.md';
-import Parts from '@site/static/auto-generated/accordion/parts.md';
-import CustomProps from '@site/static/auto-generated/accordion/custom-props.md';
-import Slots from '@site/static/auto-generated/accordion/slots.md';
+import Props from '@ionic-internal/component-api/v8/accordion/props.md';
+import Events from '@ionic-internal/component-api/v8/accordion/events.md';
+import Methods from '@ionic-internal/component-api/v8/accordion/methods.md';
+import Parts from '@ionic-internal/component-api/v8/accordion/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/accordion/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/accordion/slots.md';
- Ion-Accordion Components: How to Build & Examples | Ionic
-
+ ion-accordion: Accordion Components: How to Build & Examples
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. All `ion-accordion` components should be grouped inside `ion-accordion-group` components.
+アコーディオンは、情報を整理してグループ化する方法を提供しながら、垂直方向のスペースを減らすために、コンテンツに折り畳み可能なセクションを提供します。すべての `ion-accordion` コンポーネントは `ion-accordion-group` コンポーネントの中にグループ化されている必要があります。
-## Basic Usage
+## 基本的な使い方
-import Basic from '@site/static/usage/accordion/basic/index.md';
+import Basic from '@site/static/usage/v8/accordion/basic/index.md';
-## Toggle Accordions
+## アコーディオンをトグルする方法
-Which accordion is open is controlled by setting the `value` property on `ion-accordion-group`. Setting this property allows developers to programmatically expand or collapse certain accordions.
+どのアコーディオンを開くかは、`ion-accordion-group` の `value` プロパティを設定することで制御できます。このプロパティを設定することで、開発者はプログラムによって特定のアコーディオンを展開したり折りたたんだりすることができます。
-import Toggle from '@site/static/usage/accordion/toggle/index.md';
+import Toggle from '@site/static/usage/v8/accordion/toggle/index.md';
-## Listen for Accordion State Changes
+## アコーディオンの状態変化を監視
+
+:::caution
+[Input](./input) や [Textarea](./textarea) などの他のコンポーネントが発する `ionChange` イベントのほとんどはバブル化されます。その結果、アコーディオンの中で関連コンポーネントが使用されている場合、これらのイベントはバブルアップし、アコーディオングループの `ionChange` リスナーを発火させます。
+
+アコーディオンの内部で `ionChange` を発する他のコンポーネントを使用する場合は、アコーディオングループの `ionChange` コールバックに、コールバックに渡されたイベントの `target` キーをチェックさせ、`ionChange` がアコーディオングループからのものであり、子孫からのものでないことを確認することをお勧めします。
+:::
-Developers can listen for the `ionChange` event to be notified when accordions expand or collapse.
+開発者は `ionChange` イベントをリッスンして、アコーディオンが展開または折りたたまれたときに通知を受けることができます。
-import ListenChanges from '@site/static/usage/accordion/listen-changes/index.md';
+import ListenChanges from '@site/static/usage/v8/accordion/listen-changes/index.md';
-## Multiple Accordions
+## 複数のアコーディオン
-Developers can allow multiple accordions to be open at once with the `multiple` property.
+開発者は `multiple` プロパティを使用して、複数のアコーディオンを一度に開くことができるようにすることができます。
-import Multiple from '@site/static/usage/accordion/multiple/index.md';
+import Multiple from '@site/static/usage/v8/accordion/multiple/index.md';
-## Disabling Accordions
+## アコーディオンの無効化
-### Individual Accordion
+### アコーディオンを無効にする
-Individual accordions can be disabled with the `disabled` property on `ion-accordion`.
+個々のアコーディオンは、`ion-accordion` の `disabled` プロパティで無効にできます。
-import DisableIndividual from '@site/static/usage/accordion/disable/individual/index.md';
+import DisableIndividual from '@site/static/usage/v8/accordion/disable/individual/index.md';
-### Accordion Group
+### アコーディオングループ
-The accordion group can be disabled with the `disabled` property on `ion-accordion-group`.
+アコーディオングループは、`ion-accordion-group` の `disabled` プロパティで無効にすることができます。
-import DisableGroup from '@site/static/usage/accordion/disable/group/index.md';
+import DisableGroup from '@site/static/usage/v8/accordion/disable/group/index.md';
-## Readonly Accordions
+## 読み込み可能なアコーディオン
-### Individual Accordion
+### 個別アコーディオン
-Individual accordions can be disabled with the `readonly` property on `ion-accordion`.
+個々のアコーディオンは、`ion-accordion` の `readonly` プロパティで無効にできます。
-import ReadonlyIndividual from '@site/static/usage/accordion/readonly/individual/index.md';
+import ReadonlyIndividual from '@site/static/usage/v8/accordion/readonly/individual/index.md';
-### Accordion Group
+### アコーディオングループ
-The accordion group can be disabled with the `readonly` property on `ion-accordion-group`.
+アコーディオングループは、`ion-accordion-group` の `readonly` プロパティで無効にできます。
-import ReadonlyGroup from '@site/static/usage/accordion/readonly/group/index.md';
+import ReadonlyGroup from '@site/static/usage/v8/accordion/readonly/group/index.md';
-## Anatomy
+## 構造
-### Header
+## ヘッダー
-The `header` slot is used as the toggle that will expand or collapse your accordion. We recommend you use an `ion-item` here to take advantage of the accessibility and theming functionalities.
+`header` slotは、アコーディオンを展開または折りたたむためのトグルとして使用されます。アクセシビリティとテーマ機能を利用するために、ここでは `ion-item` を使用することをお勧めします。
-When using `ion-item` in the `header` slot, the `ion-item`'s `button` prop is set to `true` and the `detail` prop is set to `false`. In addition, we will also automatically add a toggle icon to the `ion-item`. This icon will automatically be rotated when you expand or collapse the accordion. See [Customizing Icons](#icons) for more information.
+`header` slotに `ion-item` を使用する場合、 `ion-item` の `button` プロパティは `true` に、 `detail` プロパティは `false` に設定されます。さらに、`ion-item` にはトグルアイコンも自動的に追加されます。このアイコンは、アコーディオンを展開したり折りたたんだりすると、自動的に回転するようになります。詳しくは、 [アイコンのカスタマイズ](#icons) を参照してください。
-### Content
+### コンテンツ
-The `content` slot is used as the part of the accordion that is revealed or hidden depending on the state of your accordion. You can place anything here except for another `ion-content` instance as only one instance of `ion-content` should be added per page.
+`content` slotは、アコーディオンの状態に応じて表示/非表示される部分として使用されます。1ページに1つだけ `ion-content` インスタンスを追加する必要があるため、ここには他の `ion-content` インスタンスを除いて何でも置くことができます。
-## Customization
+## カスタマイズ
-### Expansion Styles
+### 拡張スタイル
-There are two built in expansion styles: `compact` and `inset`. This expansion style is set via the `expand` property on `ion-accordion-group`.
+組み込みの拡張スタイルには、`compact` と `inset` の 2 種類があります。この拡張スタイルは `ion-accordion-group` の `expand` プロパティによって設定されます。
-When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened.
+`expand="inset"` の場合、アコーディオングループにはborder radiusが与えられます。 `md` モードでは、アコーディオン全体を開くと下に移動します。
-import ExpansionStyles from '@site/static/usage/accordion/customization/expansion-styles/index.md';
+import ExpansionStyles from '@site/static/usage/v8/accordion/customization/expansion-styles/index.md';
-### Advanced Expansion Styles
+### 高度な拡張スタイル
-You can customize the expansion behavior by styling based on the accordion's state. There are four state classes applied to `ion-accordion`. Styling using these classes can allow you to create advanced state transitions:
+アコーディオンの状態に応じてスタイルを設定することで、展開の動作をカスタマイズすることができます。 `ion-accordion` には4つのステートクラスが適用されています。これらのクラスを使ってスタイリングすることで、高度な状態遷移を作成することができます。
-| Class Name | Description |
-| ---------- | ----------- |
-| `.accordion-expanding` | Applied when the accordion is actively expanding |
-| `.accordion-expanded` | Applied when the accordion is fully expanded |
-| `.accordion-collapsing` | Applied when the accordion is actively collapsing |
-| `.accordion-collapsed` | Applied when the accordion is fully collapsed |
+| Class Name | Description |
+| ---------- |-----------------------------------|
+| `.accordion-expanding` | アコーディオンがアクティブに展開しているときに適用されます。 |
+| `.accordion-expanded` | アコーディオンが完全に展開されたときに適用されます。 |
+| `.accordion-collapsing` | アコーディオンがアクティブに折りたたまれているときに適用されます。 |
+| `.accordion-collapsed` | アコーディオンが完全に折りたたまれているときに適用されます。 |
-If you need to target specific pieces of the accordion, we recommend targeting the element directly. For example, if you want to customize the ion-item in your header slot when the accordion is expanded, you can use the following selector:
+アコーディオンの特定の部分をターゲットにする必要がある場合、要素を直接ターゲットにすることをお勧めします。例えば、アコーディオンが展開されたときに `header` slot の ion-item をカスタマイズしたい場合、以下のセレクタを使用することができます。
```css
ion-accordion.accordion-expanding ion-item[slot="header"],
@@ -136,81 +136,81 @@ ion-accordion.accordion-expanded ion-item[slot="header"] {
}
```
-import AdvancedExpansionStyles from '@site/static/usage/accordion/customization/advanced-expansion-styles/index.md';
+import AdvancedExpansionStyles from '@site/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md';
-### Icons
+### アイコン
-When using an `ion-item` in the `header` slot, we automatically add an `ion-icon`. The type of icon used can be controlled by the `toggleIcon` property, and the slot it is added to can be controlled with the `toggleIconSlot` property.
+`header` slot に `ion-item` を使用する場合、自動的に `ion-icon` が追加されます。使用するアイコンの種類は `toggleIcon` プロパティで制御でき、追加するスロットも `toggleIconSlot` プロパティで制御することができます。
-If you would like to manage the icon yourself or use an icon that is not an `ion-icon`, you can add the `ion-accordion-toggle-icon` class to the icon element.
+アイコンを自分で管理したい場合や、`ion-icon` 以外のアイコンを使用したい場合は、icon 要素に `ion-accordion-toggle-icon` クラスを追加することができます。
-Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion.
+どのオプションを選択しても、アコーディオンを展開または折りたたむと、アイコンは自動的に回転します。
-import Icons from '@site/static/usage/accordion/customization/icons/index.md';
+import Icons from '@site/static/usage/v8/accordion/customization/icons/index.md';
-### Theming
+### テーマ
-Since `ion-accordion` acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted `ion-item`. Since you are using `ion-item`, you also have access to all of the [ion-item CSS Variables](./item#css-custom-properties) and [ion-item Shadow Parts](./item#css-shadow-parts). Theming the content is also easily achieved by targeting the element that is in the `content` slot.
+`ion-accordion` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの `ion-item` をターゲットにすることで行うことができます。 `ion-item` を使用しているので、 [ion-item CSS Variables](./item#css-custom-properties) と [ion-item Shadow Parts](./item#css-shadow-parts) にもすべてアクセスすることができます。コンテンツのテイムも、`content` slotにある要素をターゲットにすることで簡単に実現できます。
-import Theming from '@site/static/usage/accordion/customization/theming/index.md';
+import Theming from '@site/static/usage/v8/accordion/customization/theming/index.md';
-## Accessibility
+## アクセシビリティ
-### Animations
+### アニメーション
-By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app.
+デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは `prefers-reduced-motion` メディアクエリがサポートされ、`reduce` に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Frameworkアプリで `animated` を設定することで、アニメーションを無効にすることができます。
-import AccessibilityAnimations from '@site/static/usage/accordion/accessibility/animations/index.md';
+import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibility/animations/index.md';
-### Keyboard Navigation
+### キーボードインタラクション
-When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does:
+`ion-accordion-group` の中で使用する場合、`ion-accordion` はキーボードによる操作を完全にサポートしています。次の表は、それぞれのキーが何をするのかの詳細です。
-| Key | Function |
-| ------------------ | ------------------------------------------------------------ |
-| `Space` or `Enter` | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. |
-| `Tab` | Moves focus to the next focusable element. |
-| `Shift` + `Tab` | Moves focus to the previous focusable element. |
-| `Down Arrow` | - When focus is on an accordion header, moves focus to the next accordion header. - When focus is on the last accordion header, moves focus to the first accordion header. |
-| `Up Arrow` | - When focus is on an accordion header, moves focus to the previous accordion header. - When focus is on the first accordion header, moves focus to the last accordion header. |
-| `Home` | When focus is on an accordion header, moves focus to the first accordion header. |
-| `End` | When focus is on an accordion header, moves focus to the last accordion header. |
+| Key | Description |
+| ------------------------------------ | ------------------------------------------------------------ |
+| Space or Enter | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. |
+| Tab | Moves focus to the next focusable element. |
+| Shift + Tab | Moves focus to the previous focusable element. |
+| Down Arrow | - When focus is on an accordion header, moves focus to the next accordion header. - When focus is on the last accordion header, moves focus to the first accordion header. |
+| Up Arrow | - When focus is on an accordion header, moves focus to the previous accordion header. - When focus is on the first accordion header, moves focus to the last accordion header. |
+| Home | When focus is on an accordion header, moves focus to the first accordion header. |
+| End | When focus is on an accordion header, moves focus to the last accordion header. |
-## Performance
+## パフォーマンス
-### Animations
+### アニメーション
-The accordion animation works by knowing the height of the `content` slot when the animation starts. The accordion expects that this height will remain consistent throughout the animation. As a result, developers should avoid performing any operation that may change the height of the content during the animation.
+アコーディオンアニメーションは、アニメーションを開始するときに `content` slotの高さを知ることによって動作します。アコーディオンは、この高さがアニメーションの間、一貫して保たれることを期待します。そのため、開発者はアニメーション中にコンテンツの高さを変更するような操作を行わないようにしなければなりません。
-For example, using [ion-img](./img) may cause layout shifts as it lazily loads images. This means that as the animation plays, `ion-img` will load the image data, and the dimensions of `ion-img` will change to account for the loaded image data. This can result in the height of the `content` slot changing. Developers have a few options for avoiding this:
+例えば、[ion-img](./img) を使用すると、画像を遅延ロードするため、レイアウトのずれが生じることがあります。つまり、アニメーションを再生すると、 `ion-img` が画像データをロードし、ロードされた画像データを考慮して `ion-img` の寸法が変更されることになります。その結果、 `content` slotの高さが変化してしまうことがあります。これを避けるために、開発者にはいくつかのオプションがあります。
-1. Use an `img` element without any lazy loading. `ion-img` always uses lazy loading, but `img` does not use lazy loading by default. This is the simplest option and works well if you have small images that do not significantly benefit from lazy loading.
+1. 遅延読み込みを行わない `img` 要素を使用します。`ion-img` は常に遅延読み込みを使用しますが、`img` はデフォルトでは遅延読み込みを使用しません。これは最も単純なオプションで、遅延読み込みの恩恵をあまり受けない小さな画像を使用する場合に有効です。
-2. Set a minimum width and height on `ion-img`. If you need to use lazy loading and know the dimensions of the images ahead of time (such as if you are loading icons of the same size), you can set the `ion-img` to have a minimum width or height using CSS. This gives developers the benefit of lazy loading while avoiding layout shifts. This works when using an `img` element with `loading="lazy"` too!
+2. `ion-img` に最小の幅と高さを設定します。遅延読み込みを使用する必要があり、前もって画像の寸法がわかっている場合（同じサイズのアイコンを読み込む場合など）、CSS を使用して `ion-img` に最小限の幅または高さを設定することができます。これにより、開発者はレイアウトの崩れを防ぎつつ、遅延ロードの恩恵を受けることができます。これは、 `img` 要素を `loading="lazy"` と共に使用する場合にも有効です!
-3. If neither of these options are applicable, developers may want to consider disabling animations altogether by using the `animated` property on [ion-accordion-group](./accordion-group).
+3. これらの解決方法を選択できない場合、開発者は [ion-accordion-group](./accordion-group) の `animated` プロパティを使用してアニメーションを完全に無効にすることを検討することができます。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md
index 42113201f7a..441cda46e30 100644
--- a/docs/api/action-sheet.md
+++ b/docs/api/action-sheet.md
@@ -1,52 +1,75 @@
---
title: "ion-action-sheet"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/action-sheet/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/action-sheet/index.html"
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
-import Props from '@site/static/auto-generated/action-sheet/props.md';
-import Events from '@site/static/auto-generated/action-sheet/events.md';
-import Methods from '@site/static/auto-generated/action-sheet/methods.md';
-import Parts from '@site/static/auto-generated/action-sheet/parts.md';
-import CustomProps from '@site/static/auto-generated/action-sheet/custom-props.md';
-import Slots from '@site/static/auto-generated/action-sheet/slots.md';
+import Props from '@ionic-internal/component-api/v8/action-sheet/props.md';
+import Events from '@ionic-internal/component-api/v8/action-sheet/events.md';
+import Methods from '@ionic-internal/component-api/v8/action-sheet/methods.md';
+import Parts from '@ionic-internal/component-api/v8/action-sheet/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/action-sheet/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/action-sheet/slots.md';
- ion-action-sheet | Action Sheet Dialog for iOS and Android Apps
-
+ ion-action-sheet: Action Sheet Dialog for iOS and Android
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
+Action Sheetは複数の選択肢を表示するダイアログです。アプリのコンテンツ上に表示され、ユーザが手動で破棄しないとアプリの利用を再開することはできません。`ios` modeでは、破壊的な選択肢は明示されます（コンテンツの削除などは赤字などでわかりやすく表示されます）。Action Sheetを破棄するには、背景をタップする、デスクトップのパソコンの場合はエスケープキーを押すなど、複数の選択肢があります。
+## インラインアクションシート (推奨)
+`ion-action-sheet` は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。
-An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop.
+import Trigger from '@site/static/usage/v8/action-sheet/inline/trigger/index.md';
+
+
+
+### `isOpen` を使う
+
+`ion-action-sheet` の `isOpen` プロパティは、開発者がアプリケーションの状態からアクションシートの表示状態を制御することを可能にします。つまり、`isOpen`が`true`に設定されるとアクションシートが表示され、`isOpen`が`false`に設定されるとアクションシートは解除されます。
+
+`isOpen` は一方通行のデータバインディングを使用しているため、アクションシートが終了したときに自動的に `false` に設定されることはありません。開発者は `ionActionSheetDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` に設定する必要があります。この理由は、`ion-action-sheet` の内部がアプリケーションの状態と密接に結合するのを防ぐためです。一方通行のデータバインディングでは、アクションシートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、アクションシートは、ブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
+
+import IsOpen from '@site/static/usage/v8/action-sheet/inline/isOpen/index.md';
+
+
+
+## Controller アクションシート
+
+アクションシートの表示・非表示をより細かく制御したい場合は、`actionSheetController`を使用することができます。
+
+import Controller from '@site/static/usage/v8/action-sheet/controller/index.md';
+
+
## Buttons
-A button's `role` property can either be `destructive` or `cancel`. Buttons without a role property will have the default look for the platform. Buttons with the `cancel` role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the `buttons` array. Note: We recommend that `destructive` buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role.
+Buttonの `role` プロパティは、 `destructive` か `cancel` のどちらかを利用できます。 roleプロパティがない場合は、プラットフォームに応じたデフォルトの外観となります。`cancel` role を持つButtonは、配列 `buttons` のどこに配置してもアクションシートの最下部に表示されます。 Note: `destructive` roleをつけるButtonは、一番上のButtonとして配置することをおすすめします。また、背景をタップしてアクションシートを破棄した場合、cancel role に設定されているhandlerが実行されます。
-A button can also be passed data via the `data` property on `ActionSheetButton`. This will populate the `data` field in the return value of the `onDidDismiss` method.
+Buttonは `ActionSheetButton` の `data` プロパティを介してデータを渡すこともできます。これは `onDidDismiss` メソッドの戻り値にある `data` フィールドにデータを入力します。
-## Customization
+## Collecting Role Information on Dismiss
-Action Sheet 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.
+`didDismiss` イベントが発生すると、イベント詳細の `data` と `role` フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。
-We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the [Usage](#usage) section for an example of how to pass a class using `cssClass`.
+import RoleInfo from '@site/static/usage/v8/action-sheet/role-info-on-dismiss/index.md';
+
+
+
+## テーマ
+
+アクションシートはscopedによるカプセル化を採用しており、実行時に各スタイルにクラスを追加することで、自動的にCSSをスコープ化します。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
+
+### スタイリング
+
+私たちは、 `create` メソッドで `cssClass` にカスタムクラスを渡し、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスを受け付けることもできます。
```css
/* DOES NOT WORK - not specific enough */
@@ -60,566 +83,216 @@ We recommend passing a custom class to `cssClass` in the `create` method and usi
}
```
-Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Action Sheet without needing to target individual elements:
+import Styling from '@site/static/usage/v8/action-sheet/theming/styling/index.md';
-```css
-.my-custom-class {
- --background: #e5e5e5;
-}
-```
+
-:::note
- If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.
-:::
+## CSSカスタムプロパティ
+[CSSカスタムプロパティ](#css-custom-properties-1) は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。
-## Interfaces
+import CssCustomProperties from '@site/static/usage/v8/action-sheet/theming/css-properties/index.md';
-### ActionSheetButton
+
-```typescript
-interface ActionSheetButton {
- text?: string;
- role?: 'cancel' | 'destructive' | 'selected' | string;
- icon?: string;
- cssClass?: string | string[];
- handler?: () => boolean | void | Promise;
- data?: T;
-}
-```
+## アクセシビリティ
-### ActionSheetOptions
+### Screen Readers
-```typescript
-interface ActionSheetOptions {
- header?: string;
- subHeader?: string;
- cssClass?: string | string[];
- buttons: (ActionSheetButton | string)[];
- backdropDismiss?: boolean;
- translucent?: boolean;
- animated?: boolean;
- mode?: Mode;
- keyboardClose?: boolean;
- id?: string;
- htmlAttributes?: { [key: string]: any };
+アクションシートは、スクリーンリーダーにとって [アクセシブル](../reference/glossary#a11y) であるためにariaプロパティを設定しますが、これらのプロパティは、十分な説明になっていなかったり、アクションシートがアプリでどのように使用されているかに合っていなかったりする場合、オーバーライドすることができます。
- enterAnimation?: AnimationBuilder;
- leaveAnimation?: AnimationBuilder;
-}
-```
+#### Role
+アクションシートには `role` として [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) が設定されます。ARIA仕様に合わせるためには、`aria-label`属性か`aria-labelledby`属性のどちらかを設定しなければなりません。
+#### Action Sheet の概要
-## Usage
+Ionicは自動的にヘッダー要素を指すように `aria-labelledby` を設定するので、すべてのアクションシートには `header` プロパティを定義することを強く推奨します。しかし、`header`を含めない場合は、`htmlAttributes`プロパティを使って、説明的な`aria-label`を指定するか、カスタムの`aria-labelledby`値を設定することもできます。
-
+
-```typescript
-import { Component } from '@angular/core';
-import { ActionSheetController } from '@ionic/angular';
-
-@Component({
- selector: 'action-sheet-example',
- templateUrl: 'action-sheet-example.html',
- styleUrls: ['./action-sheet-example.css'],
-})
-export class ActionSheetExample {
-
- constructor(public actionSheetController: ActionSheetController) {}
-
- async presentActionSheet() {
- const actionSheet = await this.actionSheetController.create({
- header: 'Albums',
- cssClass: 'my-custom-class',
- buttons: [{
- text: 'Delete',
- role: 'destructive',
- icon: 'trash',
- id: 'delete-button',
- data: {
- type: 'delete'
- },
- handler: () => {
- console.log('Delete clicked');
- }
- }, {
- text: 'Share',
- icon: 'share',
- data: 10,
- handler: () => {
- console.log('Share clicked');
- }
- }, {
- text: 'Play (open modal)',
- icon: 'caret-forward-circle',
- data: 'Data value',
- handler: () => {
- console.log('Play clicked');
- }
- }, {
- text: 'Favorite',
- icon: 'heart',
- handler: () => {
- console.log('Favorite clicked');
- }
- }, {
- text: 'Cancel',
- icon: 'close',
- role: 'cancel',
- handler: () => {
- console.log('Cancel clicked');
- }
- }]
- });
- await actionSheet.present();
-
- const { role, data } = await actionSheet.onDidDismiss();
- console.log('onDidDismiss resolved with role and data', role, data);
- }
-
-}
+```javascript
+const actionSheet = await this.actionSheetController.create({
+ htmlAttributes: {
+ 'aria-label': 'action sheet dialog',
+ },
+});
```
+
-### Style Placement
-
-In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Action Sheet can be presented from within a page, the `ion-action-sheet` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config).
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+ htmlAttributes: {
+ 'aria-label': 'action sheet dialog',
+ },
+});
+```
-
-
+
```javascript
-async function presentActionSheet() {
- const actionSheet = document.createElement('ion-action-sheet');
-
- actionSheet.header = 'Albums';
- actionSheet.cssClass = 'my-custom-class';
- actionSheet.buttons = [{
- text: 'Delete',
- role: 'destructive',
- icon: 'trash',
- id: 'delete-button',
- data: {
- type: 'delete'
- },
- handler: () => {
- console.log('Delete clicked');
- }
- }, {
- text: 'Share',
- icon: 'share',
- data: 10,
- handler: () => {
- console.log('Share clicked');
- }
- }, {
- text: 'Play (open modal)',
- icon: 'caret-forward-circle',
- data: 'Data value',
- handler: () => {
- console.log('Play clicked');
- }
- }, {
- text: 'Favorite',
- icon: 'heart',
- handler: () => {
- console.log('Favorite clicked');
- }
- }, {
- text: 'Cancel',
- icon: 'close',
- role: 'cancel',
- handler: () => {
- console.log('Cancel clicked');
- }
- }];
- document.body.appendChild(actionSheet);
- await actionSheet.present();
-
- const { role, data } = await actionSheet.onDidDismiss();
- console.log('onDidDismiss resolved with role and data', role, data);
-}
+useIonActionSheet({
+ htmlAttributes: {
+ 'aria-label': 'action sheet dialog',
+ },
+});
```
+
+
+
+
+```javascript
+const actionSheet = await actionSheetController.create({
+ htmlAttributes: {
+ 'aria-label': 'action sheet dialog',
+ },
+});
+```
+
-
+#### Action Sheet Buttons の概要
-```tsx
-/* Using with useIonActionSheet Hook */
-
-import React from 'react';
-import {
- IonButton,
- IonContent,
- IonPage,
- useIonActionSheet,
-} from '@ionic/react';
-
-const ActionSheetExample: React.FC = () => {
- const [present, dismiss] = useIonActionSheet();
-
- return (
-
-
-
- present({
- buttons: [{ text: 'Ok' }, { text: 'Cancel' }],
- header: 'Action Sheet'
- })
- }
- >
- Show ActionSheet
-
-
- present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')
- }
- >
- Show ActionSheet using params
-
- {
- present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');
- setTimeout(dismiss, 3000);
- }}
- >
- Show ActionSheet, hide after 3 seconds
-
-
-
- );
-};
-```
+テキストを含むボタンはスクリーンリーダーによって読み取られる。ボタンがアイコンのみを含んでいる場合や、既存のテキスト以外の説明が必要な場合は、ボタンの `htmlAttributes` プロパティに `aria-label` を渡して、ラベルをボタンに割り当てる必要があります。
-```tsx
-/* Using with IonActionSheet Component */
-
-import React, { useState } from 'react';
-import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
-import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';
-
-export const ActionSheetExample: React.FC = () => {
- const [showActionSheet, setShowActionSheet] = useState(false);
-
- return (
-
- setShowActionSheet(true)} expand="block">
- Show Action Sheet
-
- setShowActionSheet(false)}
- cssClass='my-custom-class'
- buttons={[{
- text: 'Delete',
- role: 'destructive',
- icon: trash,
- id: 'delete-button',
- data: {
- type: 'delete'
- },
- handler: () => {
- console.log('Delete clicked');
- }
- }, {
- text: 'Share',
- icon: share,
- data: 10,
- handler: () => {
- console.log('Share clicked');
- }
- }, {
- text: 'Play (open modal)',
- icon: caretForwardCircle,
- data: 'Data value',
- handler: () => {
- console.log('Play clicked');
- }
- }, {
- text: 'Favorite',
- icon: heart,
- handler: () => {
- console.log('Favorite clicked');
- }
- }, {
- text: 'Cancel',
- icon: close,
- role: 'cancel',
- handler: () => {
- console.log('Cancel clicked');
- }
- }]}
- >
-
-
- );
-}
-```
+
+
+
+```javascript
+const actionSheet = await this.actionSheetController.create({
+ header: 'Header',
+ buttons: [
+ {
+ icon: 'close',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
+```
+
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-import { actionSheetController } from '@ionic/core';
-
-@Component({
- tag: 'action-sheet-example',
- styleUrl: 'action-sheet-example.css'
-})
-export class ActionSheetExample {
- async presentActionSheet() {
- const actionSheet = await actionSheetController.create({
- header: 'Albums',
- cssClass: 'my-custom-class',
- buttons: [{
- text: 'Delete',
- role: 'destructive',
- icon: 'trash',
- id: 'delete-button',
- data: {
- type: 'delete'
- },
- handler: () => {
- console.log('Delete clicked');
- }
- }, {
- text: 'Share',
- icon: 'share',
- data: 10,
- handler: () => {
- console.log('Share clicked');
- }
- }, {
- text: 'Play (open modal)',
- icon: 'caret-forward-circle',
- data: 'Data value',
- handler: () => {
- console.log('Play clicked');
- }
- }, {
- text: 'Favorite',
- icon: 'heart',
- handler: () => {
- console.log('Favorite clicked');
- }
- }, {
- text: 'Cancel',
- icon: 'close',
- role: 'cancel',
- handler: () => {
- console.log('Cancel clicked');
- }
- }]
- });
- await actionSheet.present();
-
- const { role, data } = await actionSheet.onDidDismiss();
- console.log('onDidDismiss resolved with role and data', role, data);
- }
-
- render() {
- return [
-
- this.presentActionSheet()}>Present Action Sheet
-
- ];
- }
-}
+```javascript
+const actionSheet = await this.actionSheetController.create({
+ header: 'Header',
+ buttons: [
+ {
+ icon: 'close',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
```
-
+
-
-
-```html
-
- Show Action Sheet
-
-
-
```
-Developers can also use this component directly in their template:
-
-```html
-
- Show Action Sheet
-
-
-
-
-
```
-
-## Properties
+## Interfaces
+
+### ActionSheetButton
+
+```typescript
+interface ActionSheetButton {
+ text?: string;
+ role?: 'cancel' | 'destructive' | 'selected' | string;
+ icon?: string;
+ cssClass?: string | string[];
+ id?: string;
+ htmlAttributes?: { [key: string]: any };
+ handler?: () => boolean | void | Promise;
+ data?: T;
+}
+```
+
+### ActionSheetOptions
+
+```typescript
+interface ActionSheetOptions {
+ header?: string;
+ subHeader?: string;
+ cssClass?: string | string[];
+ buttons: (ActionSheetButton | string)[];
+ backdropDismiss?: boolean;
+ translucent?: boolean;
+ animated?: boolean;
+ mode?: Mode;
+ keyboardClose?: boolean;
+ id?: string;
+ htmlAttributes?: { [key: string]: any };
+
+ enterAnimation?: AnimationBuilder;
+ leaveAnimation?: AnimationBuilder;
+}
+```
+
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/alert.md b/docs/api/alert.md
index 7004abbf2bb..f313ff8c8bf 100644
--- a/docs/api/alert.md
+++ b/docs/api/alert.md
@@ -4,134 +4,82 @@ title: "ion-alert"
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
-import Props from '@site/static/auto-generated/alert/props.md';
-import Events from '@site/static/auto-generated/alert/events.md';
-import Methods from '@site/static/auto-generated/alert/methods.md';
-import Parts from '@site/static/auto-generated/alert/parts.md';
-import CustomProps from '@site/static/auto-generated/alert/custom-props.md';
-import Slots from '@site/static/auto-generated/alert/slots.md';
+import Props from '@ionic-internal/component-api/v8/alert/props.md';
+import Events from '@ionic-internal/component-api/v8/alert/events.md';
+import Methods from '@ionic-internal/component-api/v8/alert/methods.md';
+import Parts from '@ionic-internal/component-api/v8/alert/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/alert/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/alert/slots.md';
- ion-alert: Ionic API Alert Buttons with Custom Message Prompts
-
+ ion-alert: Ionic Alert Buttons with Custom Message Prompts
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
+アラートは、ユーザーに情報を提示したり、Inputを使ってユーザーから情報を収集したりするダイアログである。アラートはアプリのコンテンツの上に表示され、アプリとの対話を再開する前に、ユーザーが手動で解除する必要があります。また、オプションで `header`、`subHeader`、`message` を持つことができます。
+## インラインアラート(推奨)
-An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `header`, `subHeader` and `message`.
+`ion-alert` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、アラートを表示するために必要なハンドラの数を減らすことができます。
-## Presenting
+import Trigger from '@site/static/usage/v8/alert/presenting/trigger/index.md';
-### Controller
+
-import Controller from '@site/static/usage/alert/presenting/controller/index.md';
+### `isOpen` を使う
-
+`ion-alert` の `isOpen` プロパティは、開発者がアプリケーションの状態からアラートの表示状態を制御することを可能にします。つまり、`isOpen` を `true` に設定するとアラートが表示され、`isOpen` を `false` に設定するとアラートは解除されます。
-### Inline
+`isOpen` は一方通行のデータバインディングを使用しているため、アラートが解除されたときに自動的に `false` に設定されることはありません。開発者は `ionAlertDidDismiss` または `didDismiss` イベントを待ち、`isOpen` を `false` に設定する必要があります。この理由は、`ion-alert` の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、アラートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。双方向のデータバインディングでは、アラートはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にする可能性があります。
-When using Ionic with React or Vue, `ion-alert` can also be placed directly in the template through use of the `isOpen` property. Note that `isOpen` must be set to `false` manually when the alert is dismissed; it will not be updated automatically.
+import IsOpen from '@site/static/usage/v8/alert/presenting/isOpen/index.md';
-
-
+
-```tsx
-import React, { useState } from 'react';
-import { IonAlert, IonButton, IonContent } from '@ionic/react';
-
-function Example() {
- const [showAlert, setShowAlert] = useState(false);
-
- return (
-
- setShowAlert(true)}>Click Me
- setShowAlert(false)}
- header="Alert"
- subHeader="Important message"
- message="This is an alert!"
- buttons={['OK']}
- />
-
- );
-}
-```
+## Controller Alerts
-
-
+`alertController`は、アラートを表示するタイミングや解除するタイミングをより細かく制御する必要がある場合に使用することができる。
-```html
-
-
- Show Alert
-
-
-
-
-
-```
+import Controller from '@site/static/usage/v8/alert/presenting/controller/index.md';
-
-
+
## Buttons
-In the array of `buttons`, each button includes properties for its `text`, and optionally a `handler`. If a handler returns `false` then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the `buttons` array from left to right. Note: The right most button (the last one in the array) is the main button.
+`buttons` の配列には、各buttonの `text` のプロパティと、オプションで `handler` を利用することができます。 `handler` が `false` を返した場合、buttonがクリックされてもAlertは自動的に解除されません。すべての `buttons` は、左から右にボタン配列に追加された順序で表示されます。 Note: 一番右のボタン(配列の最後の1つ)がメインボタンです。
-Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role.
+オプションで、`cancel`のような `role` プロパティをボタンに追加することができます。もし `cancel` ロールがボタンのいずれかに設定されている場合、バックドロップをタップしてアラートが解除されると、キャンセルロールを持つボタンから handler が起動されます。
-import Buttons from '@site/static/usage/alert/buttons/index.md';
+import Buttons from '@site/static/usage/v8/alert/buttons/index.md';
## Inputs
-Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead.
+Alertには、複数の異なるInputを含めることもでき、そのデータをアプリで受け取ることができます。 Inputはユーザーに情報の入力を促す簡単な方法として使用できます。Radios, checkboxes と text inputs textarea はすべて利用できますが、これらを混ぜて利用することはできません。例えば、Alertはすべてbutton Inputであったり、すべてcheckboxでのInputを持つことはできますが、同一のAlertにradioとcheckbox Inputを混ぜることはできません。ただし、"text" Inputでは、 `url`, `email`, `text` などの複数のtypeを混ぜて利用することはできます。アラートのガイドラインに収まらない複雑なForm UIが必要な場合は、代わりにModal内でFormを構築することをお勧めします。
### Text Inputs Example
-import TextInputs from '@site/static/usage/alert/inputs/text-inputs/index.md';
+import TextInputs from '@site/static/usage/v8/alert/inputs/text-inputs/index.md';
### Radio Example
-import Radios from '@site/static/usage/alert/inputs/radios/index.md';
+import Radios from '@site/static/usage/v8/alert/inputs/radios/index.md';
-## Customization
+## カスタマイズ
-Alert 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.
+Alertはscopedによるカプセル化を使用しており、実行時に各スタイルにクラスを追加することで自動的にCSSをスコープします。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
-We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces.
+`create` メソッドで `cssClass` にカスタムクラスを渡し、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。このプロパティは、スペースで区切られた複数のクラスを受け付けることもできます。
```css
/* DOES NOT WORK - not specific enough */
@@ -145,7 +93,7 @@ We recommend passing a custom class to `cssClass` in the `create` method and usi
}
```
-Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Alert without needing to target individual elements:
+[CSSカスタムプロパティ](#css-custom-properties) は、個々の要素をターゲットにすることなく、アラートのスタイルに使用することができます。
```css
.my-custom-class {
@@ -153,25 +101,183 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t
}
```
-import Customization from '@site/static/usage/alert/customization/index.md';
+import Customization from '@site/static/usage/v8/alert/customization/index.md';
:::note
- If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
+IonicのAngularアプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。
:::
+## アクセシビリティ
+
+### Screen Readers
+
+アラートは、スクリーンリーダーにとって[アクセシブル](../reference/glossary#a11y)であるために、ariaプロパティを設定しますが、これらのプロパティは、十分な説明がない場合、またはアラートがアプリでどのように使用されているかと一致しない場合は、オーバーライドすることができます。
+
+#### Role
+
+Ionicは自動的にアラートの`role`を、入力やボタンがある場合は[`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role)に、何もない場合は[`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role)に設定します。
+
+#### Alert の概要
+
+アラートに `header` プロパティが定義されている場合、`aria-labelledby` 属性は自動的にヘッダの ID に設定されます。 `header` が定義されていない場合、`subHeader` 要素がフォールバックとして使用されます。同様に、 `aria-describedby` 属性が定義されている場合は、自動的に `message` 要素の ID が設定されます。
+
+ARIAの仕様に合わせるために、アラートには `message` と `header` または `subHeader` を含めることを強くお勧めします。もし `header` や `subHeader` を含めない場合は、`htmlAttributes` プロパティを使用して、説明的な `aria-label` を指定することができます。
+
+
+
+
+
+```javascript
+const alert = await this.alertController.create({
+ message: 'This is an alert with custom aria attributes.',
+ htmlAttributes: {
+ 'aria-label': 'alert dialog',
+ },
+});
+```
+
+
+
+
+
+```javascript
+const alert = await this.alertController.create({
+ message: 'This is an alert with custom aria attributes.',
+ htmlAttributes: {
+ 'aria-label': 'alert dialog',
+ },
+});
+```
+
+
+
+
+
+```javascript
+useIonAlert({
+ message: 'This is an alert with custom aria attributes.',
+ htmlAttributes: {
+ 'aria-label': 'alert dialog',
+ },
+});
+```
+
+
+
+
+
+```javascript
+const alert = await alertController.create({
+ message: 'This is an alert with custom aria attributes.',
+ htmlAttributes: {
+ 'aria-label': 'alert dialog',
+ },
+});
+```
+
+
+
+
+
+
+すべてのARIA属性は、アラートの`htmlAttributes`プロパティにカスタム値を定義することで、手動で上書きすることができます。
+
+#### Alert Buttons の概要
+
+Buttons containing text will be read by a screen reader. If a description other than the existing text is desired, a label can be set on the button by passing `aria-label` to the `htmlAttributes` property on the button.
+
+
+
+
+
+```javascript
+const alert = await this.alertController.create({
+ header: 'Header',
+ buttons: [
+ {
+ text: 'Exit',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
+```
+
+
+
+
+
+```javascript
+const alert = await this.alertController.create({
+ header: 'Header',
+ buttons: [
+ {
+ text: 'Exit',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
+```
+
+
+
+
+
+```javascript
+useIonAlert({
+ header: 'Header',
+ buttons: [
+ {
+ text: 'Exit',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
+```
+
+
+
+
+
+```javascript
+const alert = await alertController.create({
+ header: 'Header',
+ buttons: [
+ {
+ text: 'Exit',
+ htmlAttributes: {
+ 'aria-label': 'close',
+ },
+ },
+ ],
+});
+```
+
+
+
+
## Interfaces
### AlertButton
```typescript
+type AlertButtonOverlayHandler = boolean | void | { [key: string]: any };
+
interface AlertButton {
text: string;
role?: 'cancel' | 'destructive' | string;
cssClass?: string | string[];
- handler?: (value: any) => boolean | void | {[key: string]: any};
+ id?: string;
+ htmlAttributes?: { [key: string]: any };
+ handler?: (value: any) => AlertButtonOverlayHandler | Promise;
}
```
@@ -184,6 +290,9 @@ interface AlertInput {
name?: string;
placeholder?: string;
value?: any;
+ /**
+ * The label text to display next to the input, if the input type is `radio` or `checkbox`.
+ */
label?: string;
checked?: boolean;
disabled?: boolean;
@@ -222,20 +331,20 @@ interface AlertOptions {
}
```
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/app.md b/docs/api/app.md
index 2e0645a063d..32602254b86 100644
--- a/docs/api/app.md
+++ b/docs/api/app.md
@@ -1,55 +1,53 @@
---
title: "ion-app"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/app/props.md';
-import Events from '@site/static/auto-generated/app/events.md';
-import Methods from '@site/static/auto-generated/app/methods.md';
-import Parts from '@site/static/auto-generated/app/parts.md';
-import CustomProps from '@site/static/auto-generated/app/custom-props.md';
-import Slots from '@site/static/auto-generated/app/slots.md';
+import Props from '@ionic-internal/component-api/v8/app/props.md';
+import Events from '@ionic-internal/component-api/v8/app/events.md';
+import Methods from '@ionic-internal/component-api/v8/app/methods.md';
+import Parts from '@ionic-internal/component-api/v8/app/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/app/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/app/slots.md';
ion-app: Container Element for an Ionic Application
-
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
Contents
+AppはIonicアプリケーションのコンテナ要素です。1つのプロジェクトにつき``要素は1つだけです。アプリはメニュー、ヘッダー、コンテンツ、フッターなど多くのIonicコンポーネントを持つことができます。オーバーレイコンポーネントは表示時に `` に追加されます。
-
+`ion-app`を使用すると、以下の動作が可能になります。
+* [キーボードライフサイクルイベント](../developing/keyboard#keyboard-lifecycle-events) は、ネイティブプラグインを必要なくなります。
+* Android 端末のハードウェアバックボタンの動作をカスタマイズするための [Hardware Back Button Listeners](../developing/hardware-back-button) を使えます
+* Capacitor や Cordova でステータスバーをサポートし、ステータスバーをタップすることでビューの最上部にスクロールできるようになります。
+* テキスト入力が画面上のキーボードにかからないように、コンテンツをスクロールさせるスクロールアシストユーティリティが使えます。
+* Material Design モードでのボタン操作時の[Ripple effect](./リップルエフェクト) が使えます。
+* Ionicアプリの使用感をよりネイティブなものにする、その他のタップやフォーカスのユーティリティが使えます。
+## Programmatic Focus
-App is a container element for an Ionic application. There should only be one `` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `` when they are presented.
+Ionic offers focus utilities for components with the `ion-focusable` class. These utilities automatically manage focus for components when certain keyboard keys, like Tab, are pressed. Components can also be programmatically focused in response to user actions using the `setFocus` method from `ion-app`.
+import SetFocus from '@site/static/usage/v8/app/set-focus/index.md';
+
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/avatar.md b/docs/api/avatar.md
index 86fb904812a..9a3577b416b 100644
--- a/docs/api/avatar.md
+++ b/docs/api/avatar.md
@@ -1,220 +1,67 @@
---
title: "ion-avatar"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/avatar/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/avatar/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import Props from '@site/static/auto-generated/avatar/props.md';
-import Events from '@site/static/auto-generated/avatar/events.md';
-import Methods from '@site/static/auto-generated/avatar/methods.md';
-import Parts from '@site/static/auto-generated/avatar/parts.md';
-import CustomProps from '@site/static/auto-generated/avatar/custom-props.md';
-import Slots from '@site/static/auto-generated/avatar/slots.md';
+import Props from '@ionic-internal/component-api/v8/avatar/props.md';
+import Events from '@ionic-internal/component-api/v8/avatar/events.md';
+import Methods from '@ionic-internal/component-api/v8/avatar/methods.md';
+import Parts from '@ionic-internal/component-api/v8/avatar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/avatar/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/avatar/slots.md';
ion-avatar: Circular Application Avatar Icon Component
-
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
+Avatarは通常、写真やアイコンをラップする円形のコンポーネントです。これらは、人またはオブジェクトを表示するために使用できます。
-
+Avatarは、単独で使用することも、任意の要素の内部で使用することもできます。`ion-chip` または `ion-item` の内部に配置すると、Avatarは親コンポーネントに合わせてサイズ変更します。Avatarをitemの左側または右側に配置するには、`slot` を `start` か `end` に設定します。
+## 基本的な使い方
+import Basic from '@site/static/usage/v8/avatar/basic/index.md';
-Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.
+
-Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively.
+## Chip Avatar
+import Chip from '@site/static/usage/v8/avatar/chip/index.md';
+
+## Item Avatar
-## Usage
+import Item from '@site/static/usage/v8/avatar/item/index.md';
-
+
-
+## テーマ
-```html
-
-
-
+## CSSカスタムプロパティ
-
-
-
-
- Chip Avatar
-
+import CSSProps from '@site/static/usage/v8/avatar/theming/css-properties/index.md';
-
-
-
-
- Item Avatar
-
-```
+
-
-
-
-
-
-```html
-
-
-
-
-
-
-
-
- Chip Avatar
-
-
-
-
-
-
- Item Avatar
-
-```
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react';
-
-export const AvatarExample: React.FC = () => (
-
-
-
-
-
-
-
-
-
- Chip Avatar
-
-
-
-
-
-
- Item Avatar
-
-
-);
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'avatar-example',
- styleUrl: 'avatar-example.css'
-})
-export class AvatarExample {
- render() {
- return [
-
-
- ,
-
-
-
-
-
- Chip Avatar
- ,
-
-
-
-
-
- Item Avatar
-
- ];
- }
-}
-```
-
-
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-
- Chip Avatar
-
-
-
-
-
-
- Item Avatar
-
-
-
-
-```
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/back-button.md b/docs/api/back-button.md
index 615a04c61ee..a3b9e954761 100644
--- a/docs/api/back-button.md
+++ b/docs/api/back-button.md
@@ -1,372 +1,57 @@
---
title: "ion-back-button"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/back-button/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/back-button/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/back-button/props.md';
-import Events from '@site/static/auto-generated/back-button/events.md';
-import Methods from '@site/static/auto-generated/back-button/methods.md';
-import Parts from '@site/static/auto-generated/back-button/parts.md';
-import CustomProps from '@site/static/auto-generated/back-button/custom-props.md';
-import Slots from '@site/static/auto-generated/back-button/slots.md';
+import Props from '@ionic-internal/component-api/v8/back-button/props.md';
+import Events from '@ionic-internal/component-api/v8/back-button/events.md';
+import Methods from '@ionic-internal/component-api/v8/back-button/methods.md';
+import Parts from '@ionic-internal/component-api/v8/back-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/back-button/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/back-button/slots.md';
- Back Button | ion-back-button: Custom Menu Icon for Applications
-
+ ion-back-button: Custom Menu Back Button for Applications
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-
-The back button navigates back in the app's history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack.
-
-To change what is displayed in the back button, use the `text` and `icon` properties.
-
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react';
-
-export const BackButtonExample: React.FC = () => (
-
- {/*-- Default back button --*/}
-
-
-
-
-
-
-
-
- {/*-- Back button with a default href --*/}
-
-
-
-
-
-
-
-
- {/*-- Back button with custom text and icon --*/}
-
-
-
-
-
-
-
-
- {/*-- Back button with no text and custom icon --*/}
-
-
-
-
-
-
-
-
- {/*-- Danger back button next to a menu button --*/}
-
-
-
-
-
-
-
-
-
-);
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'back-button-example',
- styleUrl: 'back-button-example.css'
-})
-export class BackButtonExample {
- render() {
- const buttonText = "Custom";
- const buttonIcon = "add";
-
- return [
- // Default back button
-
-
-
-
-
-
- ,
-
- // Back button with a default href
-
-
-
-
-
-
- ,
-
- // Back button with custom text and icon
-
-
-
-
-
-
-
- ,
-
- // Back button with no text and custom icon
-
-
-
-
-
-
- ,
-
- // Danger back button next to a menu button
-
-
-
-
-
-
-
-
- ];
- }
-}
-```
-
-
-
-
+Back Buttonは、クリックされるとアプリの履歴に戻るようにナビゲートします。このボタンは、ナビゲーションスタックに履歴があるときのみ表示されます。ただし、 [`defaultHref`](#default-back-history) が設定されている場合は除きます。戻るボタンはモードに応じて異なるテキストとアイコンを表示しますが、これはカスタマイズすることができます。
-```html
-
-
-
-
-
-
-
-
-
+## 基本的な使い方
-
-
-
-
-
-
-
-
+import Basic from '@site/static/usage/v8/back-button/basic/index.md';
-
-
-
-
-
-
-
-
-
+
-
-
-
-
-
-
-
-
+## カスタムのBack Button
-
-
-
-
-
-
-
-
-
-
+デフォルトでは、Back Buttonはテキスト `"Back"` と共に、`ios` では `"chevron-back"` アイコン、`md` では `"arrow-back-sharp"` アイコンを表示します。これは、`icon`または`text`プロパティを設定することで、戻るボタンコンポーネントごとにカスタマイズすることができます。また、グローバル設定の `backButtonIcon` または `backButtonText` プロパティを使用して、グローバルに設定することもできます。詳しくは、[Config docs](../developing/config) を参照してください。
-
-```
+
-
+## デフォルトのBack履歴
-
+時折、アプリが履歴がないときに戻るボタンを表示し、ナビゲートする必要がある場合があります。この場合、戻るボタンの `defaultHref` をパスに設定することで実現できます。 `defaultHref` を使用するには、アプリにパスが設定されたルーターが含まれている必要があります。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md
index 177cd990b0d..3ac77c97296 100644
--- a/docs/api/backdrop.md
+++ b/docs/api/backdrop.md
@@ -1,245 +1,50 @@
---
title: "ion-backdrop"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/backdrop/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/backdrop/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/backdrop/props.md';
-import Events from '@site/static/auto-generated/backdrop/events.md';
-import Methods from '@site/static/auto-generated/backdrop/methods.md';
-import Parts from '@site/static/auto-generated/backdrop/parts.md';
-import CustomProps from '@site/static/auto-generated/backdrop/custom-props.md';
-import Slots from '@site/static/auto-generated/backdrop/slots.md';
-
-
+import Props from '@ionic-internal/component-api/v8/backdrop/props.md';
+import Events from '@ionic-internal/component-api/v8/backdrop/events.md';
+import Methods from '@ionic-internal/component-api/v8/backdrop/methods.md';
+import Parts from '@ionic-internal/component-api/v8/backdrop/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/backdrop/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/backdrop/slots.md';
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-
-Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component.
-
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'backdrop-example',
- templateUrl: 'backdrop-example.html',
- styleUrls: ['./backdrop-example.css'],
-})
-export class BackdropExample {
- enableBackdropDismiss = false;
- showBackdrop = false;
- shouldPropagate = false;
-}
-```
-
-
-
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-```javascript
-var backdrop = document.getElementById('customBackdrop');
-backdrop.visible = false;
-backdrop.tappable = false;
-backdrop.stopPropagation = false;
-```
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonBackdrop, IonContent } from '@ionic/react';
-
-export const BackdropExample: React.FC = () => (
-
- {/*-- Default backdrop --*/}
-
-
- {/*-- Backdrop that is not tappable --*/}
-
-
- {/*-- Backdrop that is not visible --*/}
-
-
- {/*-- Backdrop with propagation --*/}
-
-
-
-
-);
-```
-
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'backdrop-example',
- styleUrl: 'backdrop-example.css'
-})
-export class BackdropExample {
- render() {
- const enableBackdropDismiss = false;
- const showBackdrop = false;
- const shouldPropagate = false;
-
- return [
- // Default backdrop
- ,
-
- // Backdrop that is not tappable
- ,
-
- // Backdrop that is not visible
- ,
-
- // Backdrop with propagation
- ,
-
- // Backdrop that sets dynamic properties
-
-
- ];
- }
-}
-```
-
-
-
-
-
+Backdropは、他のコンポーネントをオーバーレイするためフルスクリーンのコンポーネントです。これらは、他のコンテンツの上に遷移するコンポーネントのバックグラウンドで役立ち、そのコンポーネントを削除するために使用できます。
-```html
-
-
-
+## 基本的な使い方
-
-
+Backdropは、その後ろのコンテンツをクリックしたりタップしたりするのを防ぎます。デフォルトでは透明なので、下のデモではCSSで見えるようにしています。
-
-
+import Basic from '@site/static/usage/v8/backdrop/basic/index.md';
-
-
+
-
-
-
-
+## スタイリング
-
-```
+コンテンツに `z-index` を設定し、背景よりも高い位置に表示させることができます（デフォルトは `2` です）。
-
+import Styling from '@site/static/usage/v8/backdrop/styling/index.md';
-
+
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
diff --git a/docs/api/badge.md b/docs/api/badge.md
index ae0de884003..c7682a087a3 100644
--- a/docs/api/badge.md
+++ b/docs/api/badge.md
@@ -1,234 +1,70 @@
---
title: "ion-badge"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/badge/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/badge/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/badge/props.md';
-import Events from '@site/static/auto-generated/badge/events.md';
-import Methods from '@site/static/auto-generated/badge/methods.md';
-import Parts from '@site/static/auto-generated/badge/parts.md';
-import CustomProps from '@site/static/auto-generated/badge/custom-props.md';
-import Slots from '@site/static/auto-generated/badge/slots.md';
+import Props from '@ionic-internal/component-api/v8/badge/props.md';
+import Events from '@ionic-internal/component-api/v8/badge/events.md';
+import Methods from '@ionic-internal/component-api/v8/badge/methods.md';
+import Parts from '@ionic-internal/component-api/v8/badge/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/badge/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/badge/slots.md';
- Badges | ion-badge: iOS & Android App Notification Badge Icons
-
+ ion-badge: iOS & Android App Notification Badge Icons
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
+バッジはインラインブロック要素で、通常は他の要素の近くに表示されます。通常、数字やその他の文字が含まれています。バッジは、ある要素に関連する追加項目があることを知らせたり、その項目の数を示したりするために使用されます。バッジは、コンテンツが渡されないと非表示になります。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v8/badge/basic/index.md';
-
+
+## Tabボタン内のバッジ
+バッジはTabボタン内に追加することができ、多くの場合、通知を示したり、要素に関連する追加項目を強調するために使用されます。
-Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are.
+:::info
+Empty badges are only available for `md` mode.
+:::
+import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md';
+
+## テーマ
-## Usage
+### Colors
-
+import Colors from '@site/static/usage/v8/badge/theming/colors/index.md';
-
+
-```html
-
-99
+### CSS Properties
-
-11
-22
-33
-44
-55
-66
-77
-88
-99
+import CSSProps from '@site/static/usage/v8/badge/theming/css-properties/index.md';
-
-
- 11
- My Item
- 22
-
-```
-
-
-
-
-
-
-```html
-
-99
+
-
-11
-22
-33
-44
-55
-66
-77
-88
-99
-
-
-
- 11
- My Item
- 22
-
-```
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react';
-
-export const BadgeExample: React.FC = () => (
-
- {/*-- Default --*/}
- 99
-
- {/*-- Colors --*/}
- 11
- 22
- 33
- 44
- 55
- 66
- 77
- 88
- 99
-
- {/*-- Item with badge on left and right --*/}
-
- 11
- My Item
- 22
-
-
-);
-```
-
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'badge-example',
- styleUrl: 'badge-example.css'
-})
-export class BadgeExample {
- render() {
- return [
- // Default
- 99,
-
- // Colors
- 11,
- 22,
- 33,
- 44,
- 55,
- 66,
- 77,
- 88,
- 99,
-
- // Item with badge on left and right
-
- 11
- My Item
- 22
-
- ];
- }
-}
-```
-
-
-
-
-
-
-```html
-
-
- 99
-
-
- 11
- 22
- 33
- 44
- 55
- 66
- 77
- 88
- 99
-
-
-
- 11
- My Item
- 22
-
-
-
-
-```
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.md
index 799cc91a3e7..e0e8c137690 100644
--- a/docs/api/breadcrumb.md
+++ b/docs/api/breadcrumb.md
@@ -1,37 +1,21 @@
---
title: "ion-breadcrumb"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/breadcrumb/props.md';
-import Events from '@site/static/auto-generated/breadcrumb/events.md';
-import Methods from '@site/static/auto-generated/breadcrumb/methods.md';
-import Parts from '@site/static/auto-generated/breadcrumb/parts.md';
-import CustomProps from '@site/static/auto-generated/breadcrumb/custom-props.md';
-import Slots from '@site/static/auto-generated/breadcrumb/slots.md';
-
-
+import Props from '@ionic-internal/component-api/v8/breadcrumb/props.md';
+import Events from '@ionic-internal/component-api/v8/breadcrumb/events.md';
+import Methods from '@ionic-internal/component-api/v8/breadcrumb/methods.md';
+import Parts from '@ionic-internal/component-api/v8/breadcrumb/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/breadcrumb/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/breadcrumb/slots.md';
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-A Breadcrumb is a single navigation item that is a child of the Breadcrumbs component. A breadcrumb can link elsewhere in an app or it can be plain text. Each breadcrumb has a separator between it and the next breadcrumb and can optionally contain an icon.
+Breadcrumbは、Breadcrumbsコンポーネントの子であり、単一のナビゲーションアイテムです。Breadcrumbは、アプリ内の他の場所にリンクすることも、プレーンテキストにすることもできます。Breadcrumbsは、次のBreadcrumbとの間にセパレータを持ち、オプションでアイコンを含むことができます。
-For usage examples, see the [Breadcrumbs](/docs/api/breadcrumbs) documentation.
+詳しい説明は [Breadcrumbs](./breadcrumbs) を参照ください。
## Interfaces
@@ -45,7 +29,7 @@ interface BreadcrumbCollapsedClickEventDetail {
### BreadcrumbCustomEvent
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing .
+必須ではありませんが、より強い型付けのために、このインターフェースを `CustomEvent` インターフェースの代わりに使用することができます。
```typescript
interface BreadcrumbCustomEvent extends CustomEvent {
@@ -57,20 +41,20 @@ interface BreadcrumbCustomEvent extends CustomEvent {
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md
index aad5436ff2e..b00f98cd337 100644
--- a/docs/api/breadcrumbs.md
+++ b/docs/api/breadcrumbs.md
@@ -1,42 +1,38 @@
---
title: "ion-breadcrumbs"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/breadcrumbs/props.md';
-import Events from '@site/static/auto-generated/breadcrumbs/events.md';
-import Methods from '@site/static/auto-generated/breadcrumbs/methods.md';
-import Parts from '@site/static/auto-generated/breadcrumbs/parts.md';
-import CustomProps from '@site/static/auto-generated/breadcrumbs/custom-props.md';
-import Slots from '@site/static/auto-generated/breadcrumbs/slots.md';
+import Props from '@ionic-internal/component-api/v8/breadcrumbs/props.md';
+import Events from '@ionic-internal/component-api/v8/breadcrumbs/events.md';
+import Methods from '@ionic-internal/component-api/v8/breadcrumbs/methods.md';
+import Parts from '@ionic-internal/component-api/v8/breadcrumbs/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/breadcrumbs/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/breadcrumbs/slots.md';
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-Breadcrumbs are navigation items that are used to indicate where a user is on an app or site. They should be used for large sites and apps with hierarchically arranged pages. Breadcrumbs can be collapsed based on the maximum number that can show, and the collapsed indicator can be clicked on to present a popover with more information or expand the collapsed breadcrumbs.
+Breadcrumbsは、ユーザーがアプリやサイトのどこにいるのかを示すために使用されるナビゲーションアイテムです。大規模なサイトや、階層的に配置されたページを持つアプリで使用する必要があります。Breadcrumbsは、表示可能な最大数に応じて折りたたむことができ、折りたたんだインジケータをクリックすると、詳細情報を示すポップオーバーが表示され、折りたたんだBreadcrumbを展開することができます。
-## Basic Usage
+## 基本的な使い方
-import Basic from '@site/static/usage/breadcrumbs/basic/index.md';
+import Basic from '@site/static/usage/v8/breadcrumbs/basic/index.md';
## Using Icons
-### Icons on Items
+### アイテムでのアイコン
-import IconsOnItems from '@site/static/usage/breadcrumbs/icons/icons-on-items/index.md';
+import IconsOnItems from '@site/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md';
### Custom Separators
-import CustomSeparators from '@site/static/usage/breadcrumbs/icons/custom-separators/index.md';
+import CustomSeparators from '@site/static/usage/v8/breadcrumbs/icons/custom-separators/index.md';
@@ -44,65 +40,65 @@ import CustomSeparators from '@site/static/usage/breadcrumbs/icons/custom-separa
### Max Items
-If there are more items than the value of `maxItems`, the breadcrumbs will be collapsed. By default, only the first and last items will be shown.
+`maxItems` の値よりも多くのアイテムがある場合、breadcrumbsは折りたたまれます。デフォルトでは、最初と最後のアイテムのみが表示されます。
-import MaxItems from '@site/static/usage/breadcrumbs/collapsing-items/max-items/index.md';
+import MaxItems from '@site/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md';
### Items Before or After Collapse
-Once the items are collapsed, the number of items to show can be controlled by the `itemsBeforeCollapse` and `itemsAfterCollapse` properties.
+アイテムが折りたたまれた後、表示するアイテムの数は `itemsBeforeCollapse` と `itemsAfterCollapse` プロパティで制御することができます。
-import ItemsBeforeAfter from '@site/static/usage/breadcrumbs/collapsing-items/items-before-after/index.md';
+import ItemsBeforeAfter from '@site/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md';
### Collapsed Indicator Click -- Expand Breadcrumbs
-Clicking the collapsed indicator will fire the `ionCollapsedClick` event. This can be used to, for example, expand the breadcrumbs.
+インジケータをクリックすると、`ionCollapsedClick` イベントが発生します。これは、例えば、breadcrumbsを展開するために使うことができます。
-import ExpandOnClick from '@site/static/usage/breadcrumbs/collapsing-items/expand-on-click/index.md';
+import ExpandOnClick from '@site/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/index.md';
### Collapsed Indicator Click -- Present Popover
-The `ionCollapsedClick` event can also be used to present an overlay (in this case, an `ion-popover`) showing the hidden breadcrumbs.
+また、`ionCollapsedClick` イベントは、隠されたパンくずを表示するオーバーレイ（この場合は `ion-popover` ）を提示するために使用することができます。
-import PopoverOnClick from '@site/static/usage/breadcrumbs/collapsing-items/popover-on-click/index.md';
+import PopoverOnClick from '@site/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/index.md';
-## Styling
+## テーマ
-## Color Property
+### Colors
-import ColorProp from '@site/static/usage/breadcrumbs/styling/color/index.md';
+import Colors from '@site/static/usage/v8/breadcrumbs/theming/colors/index.md';
-
+
-## CSS Properties
+## CSSカスタムプロパティ
-import CSSProps from '@site/static/usage/breadcrumbs/styling/css-props/index.md';
+import CSSProps from '@site/static/usage/v8/breadcrumbs/theming/css-properties/index.md';
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/button.md b/docs/api/button.md
index 2831df0f112..5490dc07c4c 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -1,411 +1,115 @@
---
title: "ion-button"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/button/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/button/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/button/props.md';
-import Events from '@site/static/auto-generated/button/events.md';
-import Methods from '@site/static/auto-generated/button/methods.md';
-import Parts from '@site/static/auto-generated/button/parts.md';
-import CustomProps from '@site/static/auto-generated/button/custom-props.md';
-import Slots from '@site/static/auto-generated/button/slots.md';
+import Props from '@ionic-internal/component-api/v8/button/props.md';
+import Events from '@ionic-internal/component-api/v8/button/events.md';
+import Methods from '@ionic-internal/component-api/v8/button/methods.md';
+import Parts from '@ionic-internal/component-api/v8/button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/button/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/button/slots.md';
- ion-button: Design and Style Buttons with Custom CSS Properties
-
+ ion-button: Style Buttons with Custom CSS Properties
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
+Buttonはクリック可能な要素を提供し、Form内や、標準の単機能なButton機能を必要とする任意の場所で使用できます。text、icon、またはその両方を表示できます。Buttonは、いくつかの属性を利用して特定の外観になるようにスタイル設定できます。
+## 基本的な使い方
+import Basic from '@site/static/usage/v8/button/basic/index.md';
-Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way.
+
## Expand
-This attribute lets you specify how wide the button should be. By default, buttons are inline blocks, but setting this attribute will change the button to a full-width block element.
+このプロパティでは、ボタンの幅を指定することができます。デフォルトでは、ボタンは `display: inline-block` を持ちますが、このプロパティを設定すると、ボタンは `display: block` を持つ全角要素に変更されます。
-| Value | Details |
-|----------------|------------------------------------------------------------------------------|
-| `block` | Full-width button with rounded corners. |
-| `full` | Full-width button with square corners and no border on the left or right. |
-
-## Fill
+import Expand from '@site/static/usage/v8/button/expand/index.md';
-This attribute determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background.
-
-| Value | Details |
-|----------------|------------------------------------------------------------------------------|
-| `clear` | Button with a transparent background that resembles a flat button. |
-| `outline` | Button with a transparent background and a visible border. |
-| `solid` | Button with a filled background. Useful for buttons in a toolbar. |
-
-## Size
+
-This attribute specifies the size of the button. Setting this attribute will change the height and padding of a button.
+## Shape
-| Value | Details |
-|----------------|------------------------------------------------------------------------------|
-| `small` | Button with less height and padding. Default for buttons in an item. |
-| `default` | Button with the default height and padding. Useful for buttons in an item. |
-| `large` | Button with more height and padding. |
+このプロパティは、ボタンの形状を指定することができます。デフォルトでは、ボタンは小さなボーダー半径を持つ長方形ですが、これを `"round"` に設定すると、ボタンは丸みを帯びた要素に変更されます。
+import Shape from '@site/static/usage/v8/button/shape/index.md';
+
-## Usage
-
-
-
-
-
-
-```html
-
-Default
+## Fill
-
-Anchor
+この属性は、Buttonのbackgroundとborder-colorを設定します。デフォルトでは、Buttonはtoolbar内にない限り、backgroundは塗りつぶされます。toolbar内にある場合は、backgroundは透明になります。
-
-Primary
-Secondary
-Tertiary
-Success
-Warning
-Danger
-Light
-Medium
-Dark
+import Fill from '@site/static/usage/v8/button/fill/index.md';
-
-Full Button
-Block Button
+
-
-Round Button
+## Size
-
-Outline + Full
-Outline + Block
-Outline + Round
+この属性は、Buttonのサイズを指定します。この属性を設定すると、Buttonの高さとpaddingが変更されます
-
-
-
- Left Icon
-
+import Size from '@site/static/usage/v8/button/size/index.md';
-
- Right Icon
-
-
+
-
-
-
+## Icons
-
-Large
-Default
-Small
-```
+import Icons from '@site/static/usage/v8/button/icons/index.md';
+
-
+## テーマ
+### Colors
-
+import Colors from '@site/static/usage/v8/button/theming/colors/index.md';
+
-```html
-
-Default
+## CSSカスタムプロパティ
-
-Anchor
+import CSSProps from '@site/static/usage/v8/button/theming/css-properties/index.md';
-
-Primary
-Secondary
-Tertiary
-Success
-Warning
-Danger
-Light
-Medium
-Dark
+
-
-Full Button
-Block Button
+## アクセシビリティ
-
-Round Button
+ボタンはアクセスしやすいように作られていますが、その内容によっては調整が必要な場合があります。ボタンコンポーネントは、ネイティブの[button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)をレンダリングし、ネイティブのボタンが提供する機能を利用できるようにします。
-
-Outline + Full
-Outline + Block
-Outline + Round
+### Overflowing Text Content
-
-
-
- Left Icon
-
+ボタンのテキスト・コンテンツがコンテナからはみ出す場合が多々あります。このような場合、すべてのテキストがまだ読めるように、ボタンの内側にテキストを折り返すことをお勧めします。ボタンコンポーネントは、テキストの余分な行を収容するために、その高さを自動的に調整します。
-
- Right Icon
-
-
+テキストが長すぎて収まらない場合、ボタンテキストは自動的に次の行に折り返されません。テキストを折り返すには、`ion-text-wrap`クラスを追加して、`white-space`プロパティを`"normal"`に設定します。これは将来のメジャーリリースでデフォルトになる予定である。
-
-
-
-
-
-Large
-Default
-Small
-```
-
-
-
-
-
-
-
-```tsx
-import React from 'react';
+:::info
+max-width`スタイルは、デモのためだけに下のボタンに設定されています。テキストラッピングは動的なボタン幅で動作します。
+:::
-import { IonButton, IonIcon, IonContent } from '@ionic/react';
-import { star } from 'ionicons/icons';
+import TextWrapping from '@site/static/usage/v8/button/text-wrapping/index.md';
-export const ButtonExample: React.FC = () => (
-
- {/*-- Default --*/}
- Default
-
- {/*-- Anchor --*/}
- Anchor
-
- {/*-- Colors --*/}
- Primary
- Secondary
- Tertiary
- Success
- Warning
- Danger
- Light
- Medium
- Dark
-
- {/*-- Expand --*/}
- Full Button
- Block Button
-
- {/*-- Round --*/}
- Round Button
-
- {/*-- Fill --*/}
- Outline + Full
- Outline + Block
- Outline + Round
+
- {/*-- Icons --*/}
-
-
- Left Icon
-
-
-
- Right Icon
-
-
-
-
-
-
-
- {/*-- Sizes --*/}
- Large
- Default
- Small
-
-);
-
-```
-
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'button-example',
- styleUrl: 'button-example.css'
-})
-export class ButtonExample {
- render() {
- return [
- // Default
- Default,
-
- // Anchor
- Anchor,
-
- // Colors
- Primary,
- Secondary,
- Tertiary,
- Success,
- Warning,
- Danger,
- Light,
- Medium,
- Dark,
-
- // Expand
- Full Button,
- Block Button,
-
- // Round
- Round Button,
-
- // Fill
- Outline + Full,
- Outline + Block,
- Outline + Round,
-
- // Icons
-
-
- Left Icon
- ,
-
-
- Right Icon
-
- ,
-
-
-
- ,
-
- // Sizes
- Large,
- Default,
- Small
- ];
- }
-}
-```
-
-
-
-
-
-
-```html
-
-
- Default
-
-
- Anchor
-
-
- Primary
- Secondary
- Tertiary
- Success
- Warning
- Danger
- Light
- Medium
- Dark
-
-
- Full Button
- Block Button
-
-
- Round Button
-
-
- Outline + Full
- Outline + Block
- Outline + Round
-
-
-
-
- Left Icon
-
-
-
- Right Icon
-
-
-
-
-
-
-
-
- Large
- Default
- Small
-
-
-
-```
-
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/buttons.md b/docs/api/buttons.md
index 7e247b828ec..d9698da934e 100644
--- a/docs/api/buttons.md
+++ b/docs/api/buttons.md
@@ -1,377 +1,87 @@
---
title: "ion-buttons"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/buttons/props.md';
-import Events from '@site/static/auto-generated/buttons/events.md';
-import Methods from '@site/static/auto-generated/buttons/methods.md';
-import Parts from '@site/static/auto-generated/buttons/parts.md';
-import CustomProps from '@site/static/auto-generated/buttons/custom-props.md';
-import Slots from '@site/static/auto-generated/buttons/slots.md';
+import Props from '@ionic-internal/component-api/v8/buttons/props.md';
+import Events from '@ionic-internal/component-api/v8/buttons/events.md';
+import Methods from '@ionic-internal/component-api/v8/buttons/methods.md';
+import Parts from '@ionic-internal/component-api/v8/buttons/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/buttons/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/buttons/slots.md';
ion-buttons: Toolbar Element with Named Slots for Buttons
-
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
+Buttonsコンポーネントは、コンテナ要素です。 [ツールバー](./toolbar) の内部で使用し、標準の[ボタン](./button)、[メニューボタン](./menu-button)、[戻るボタン](./back-button)を含むいくつかのタイプのボタンを含めることができる。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v8/buttons/basic/index.md';
+
-The Buttons component is a container element. Buttons placed in a toolbar should be placed inside of the `` element.
+## Buttons Placement
-The `` element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot.
+ツールバー内のボタンは、スロットという名前を使って配置することができます。下図は各スロットの説明です。
| Slot | Description |
|--------------|----------------------------------------------------------------------------------------------------------|
-| `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. |
-| `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. |
| `start` | Positions to the `left` of the content in LTR, and to the `right` in RTL. |
| `end` | Positions to the `right` of the content in LTR, and to the `left` in RTL. |
+| `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. |
+| `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. |
+
+import Placement from '@site/static/usage/v8/buttons/placement/index.md';
+
+
+
+
+## Buttonsのタイプ
+
+ツールバーのボタンは、デフォルトでは透明ですが、ボタンの [`fill`](./button#fill) プロパティで変更することが可能です。この例で [バックボタン](./back-button) と [メニューボタン](./menu-button) に含まれるプロパティは表示目的であり、正しい使用方法はそれぞれのドキュメントをご覧ください。
+
+import Types from '@site/static/usage/v8/buttons/types/index.md';
+
+
+
+
+## Collapsible Buttons
+
+ボタンに `collapse` プロパティを設定すると、ヘッダーが折りたたまれたときにボタンが折りたたまれます。これは通常、[collapsible large titles](./title#collapsible-large-titles) と共に使用します。
+
+:::info
+
+この機能はiOS modeでのみ有効です。
+
+:::
+
+import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.md';
+
-## Usage
-
-
-
-
-
-```html
-
-
-
-
- Back Button
-
-
-
-
-
-
-
-
-
-
-
- Default Buttons
-
-
-
-
-
-
-
-
-
-
-
-
-
- Right side menu toggle
-
-
-
-
-
-
-
-
-
-
-
- Collapsible Buttons
-
-```
-
-
-
-
-
-
-```html
-
-
-
-
- Back Button
-
-
-
-
-
-
-
-
-
-
-
- Default Buttons
-
-
-
-
-
-
-
-
-
-
-
-
-
- Right side menu toggle
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Collapsible Buttons
-
-```
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton, IonContent } from '@ionic/react';
-import { personCircle, search, star, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons';
-
-export const ButtonsExample: React.FC = () => (
-
-
-
-
-
- Back Button
-
-
-
-
-
-
-
-
-
-
-
- Default Buttons
-
-
-
-
-
-
-
-
-
- {}}>
-
-
-
- Right side menu toggle
-
-
-
-
-
-
-
-
-
-
-
- Collapsible Buttons
-
-
-);
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'buttons-example',
- styleUrl: 'buttons-example.css'
-})
-export class ButtonsExample {
-
- clickedStar() {
- console.log("Clicked star button");
- }
-
- render() {
- return [
-
-
-
-
- Back Button
- ,
-
-
-
-
-
-
-
-
-
-
- Default Buttons
-
-
-
-
-
- ,
-
-
-
- this.clickedStar()}>
-
-
-
- Right side menu toggle
-
-
-
- ,
-
-
-
-
-
-
-
- Collapsible Buttons
-
- ];
- }
-}
-```
-
-
-
-
-
-
-```html
-
-
-
-
-
- Back Button
-
-
-
-
-
-
-
-
-
-
-
- Default Buttons
-
-
-
-
-
-
-
-
-
-
-
-
-
- Right side menu toggle
-
-
-
-
-
-
-
-
-
-
-
- Collapsible Buttons
-
-
-
-
-```
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/card-content.md b/docs/api/card-content.md
index 75d361f515b..dc7e3181313 100644
--- a/docs/api/card-content.md
+++ b/docs/api/card-content.md
@@ -1,54 +1,35 @@
---
title: "ion-card-content"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/card-content/props.md';
-import Events from '@site/static/auto-generated/card-content/events.md';
-import Methods from '@site/static/auto-generated/card-content/methods.md';
-import Parts from '@site/static/auto-generated/card-content/parts.md';
-import CustomProps from '@site/static/auto-generated/card-content/custom-props.md';
-import Slots from '@site/static/auto-generated/card-content/slots.md';
-
-
+import Props from '@ionic-internal/component-api/v8/card-content/props.md';
+import Events from '@ionic-internal/component-api/v8/card-content/events.md';
+import Methods from '@ionic-internal/component-api/v8/card-content/methods.md';
+import Parts from '@ionic-internal/component-api/v8/card-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/card-content/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/card-content/slots.md';
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-
Contents
-
-
-
-
-`ion-card-content` is child component of `ion-card` that adds some content padding.
-It is recommended that any text content for a card should be placed in an `ion-card-content`.
+カードコンテンツは、カードの子コンポーネントで、そのコンテンツの周りにパディングを追加します。カードのテキストコンテンツは、カードコンテンツの中に配置することが推奨されます。
+詳しくは、[Card](./card)のドキュメントを参照してください。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/card-header.md b/docs/api/card-header.md
index 88dceee3cb7..90768d9116d 100644
--- a/docs/api/card-header.md
+++ b/docs/api/card-header.md
@@ -1,53 +1,37 @@
---
title: "ion-card-header"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/card-header/props.md';
-import Events from '@site/static/auto-generated/card-header/events.md';
-import Methods from '@site/static/auto-generated/card-header/methods.md';
-import Parts from '@site/static/auto-generated/card-header/parts.md';
-import CustomProps from '@site/static/auto-generated/card-header/custom-props.md';
-import Slots from '@site/static/auto-generated/card-header/slots.md';
-
-
+import Props from '@ionic-internal/component-api/v8/card-header/props.md';
+import Events from '@ionic-internal/component-api/v8/card-header/events.md';
+import Methods from '@ionic-internal/component-api/v8/card-header/methods.md';
+import Parts from '@ionic-internal/component-api/v8/card-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/card-header/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/card-header/slots.md';
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-
-`ion-card-header` is a header component for `ion-card`.
+カードヘッダは、カードの子コンポーネントで、カードコンテンツの前に配置する必要があります。カードタイトル](./card-title)と[カードサブタイトル](./card-subtitle)を含むことができます。
+詳しくは、[Card](./card)のドキュメントを参照してください。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md
index 11fbe3a3e77..d22b0bd85b0 100644
--- a/docs/api/card-subtitle.md
+++ b/docs/api/card-subtitle.md
@@ -1,52 +1,37 @@
---
title: "ion-card-subtitle"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/card-subtitle/props.md';
-import Events from '@site/static/auto-generated/card-subtitle/events.md';
-import Methods from '@site/static/auto-generated/card-subtitle/methods.md';
-import Parts from '@site/static/auto-generated/card-subtitle/parts.md';
-import CustomProps from '@site/static/auto-generated/card-subtitle/custom-props.md';
-import Slots from '@site/static/auto-generated/card-subtitle/slots.md';
-
-
+import Props from '@ionic-internal/component-api/v8/card-subtitle/props.md';
+import Events from '@ionic-internal/component-api/v8/card-subtitle/events.md';
+import Methods from '@ionic-internal/component-api/v8/card-subtitle/methods.md';
+import Parts from '@ionic-internal/component-api/v8/card-subtitle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/card-subtitle/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/card-subtitle/slots.md';
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-`ion-card-subtitle` is a child component of `ion-card`
+カードサブタイトルは、[カードヘッダ](./card-header)の内側に配置されるべき、cardの子コンポーネントです。
+詳しくは、[Card](./card)のドキュメントを参照してください。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/card-title.md b/docs/api/card-title.md
index 096a7a7219a..2f78daca981 100644
--- a/docs/api/card-title.md
+++ b/docs/api/card-title.md
@@ -1,56 +1,42 @@
---
title: "ion-card-title"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Props from '@ionic-internal/component-api/v8/card-title/props.md';
+import Events from '@ionic-internal/component-api/v8/card-title/events.md';
+import Methods from '@ionic-internal/component-api/v8/card-title/methods.md';
+import Parts from '@ionic-internal/component-api/v8/card-title/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/card-title/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/card-title/slots.md';
-import Props from '@site/static/auto-generated/card-title/props.md';
-import Events from '@site/static/auto-generated/card-title/events.md';
-import Methods from '@site/static/auto-generated/card-title/methods.md';
-import Parts from '@site/static/auto-generated/card-title/parts.md';
-import CustomProps from '@site/static/auto-generated/card-title/custom-props.md';
-import Slots from '@site/static/auto-generated/card-title/slots.md';
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
- ion-card-title | Ionic App Card Title Component and Properties
-
+ ion-card-title: Ionic App Card Title Component
+
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
Contents
-
-
-
-
-
-`ion-card-title` is a child component of `ion-card`
+Card titleはcardの子コンポーネントで、[card header](./card-header)の内側に配置する必要があります。
+詳しくは、[Card](./card)のドキュメントを参照してください。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/card.md b/docs/api/card.md
index 48afa83b762..aa14648067b 100644
--- a/docs/api/card.md
+++ b/docs/api/card.md
@@ -1,381 +1,87 @@
---
title: "ion-card"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/card/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/card/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Props from '@ionic-internal/component-api/v8/card/props.md';
+import Events from '@ionic-internal/component-api/v8/card/events.md';
+import Methods from '@ionic-internal/component-api/v8/card/methods.md';
+import Parts from '@ionic-internal/component-api/v8/card/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/card/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/card/slots.md';
-import Props from '@site/static/auto-generated/card/props.md';
-import Events from '@site/static/auto-generated/card/events.md';
-import Methods from '@site/static/auto-generated/card/methods.md';
-import Parts from '@site/static/auto-generated/card/parts.md';
-import CustomProps from '@site/static/auto-generated/card/custom-props.md';
-import Slots from '@site/static/auto-generated/card/slots.md';
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
ion-card: Card UI Components for Ionic Framework API
-
+
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
Contents
-
-
-
+カードは、テキスト、画像、ボタン、リストなどのコンテンツを表示するためのコンテナです。
+カードは1つのコンポーネントで構成することもできますが、
+多くの場合、ヘッダー、タイトル、サブタイトル、コンテンツで構成されます。
+カードはこの構造に対応するため、いくつかのコンポーネントに分割されます。
+[カードヘッダ](./card-header)、[カードタイトル](./card-title)、[カードサブタイトル](./card-subtitle)、[カードコンテンツ](./card-content)。
+
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v8/card/basic/index.md';
+
+
+
+
+## Media Cards
+
+import Media from '@site/static/usage/v8/card/media/index.md';
+
+
+
+
+## Card Buttons
+
+import Buttons from '@site/static/usage/v8/card/buttons/index.md';
+
+
+
+
+## List Card
+
+import List from '@site/static/usage/v8/card/list/index.md';
+
+
+
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v8/card/theming/colors/index.md';
+
+
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v8/card/theming/css-properties/index.md';
+
+
-Cards are a standard piece of UI that serves as an entry point to more detailed
-information. A card can be a single component, but is often made up of some
-header, title, subtitle, and content. `ion-card` is broken up into several
-sub-components to reflect this. Please see `ion-card-content`,
-`ion-card-header`, `ion-card-title`, `ion-card-subtitle`.
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
- Card Subtitle
- Card Title
-
-
-
- Keep close to Nature's heart... and break clear away, once in awhile,
- and climb a mountain or spend a week in the woods. Wash your spirit clean.
-
-
-
-
-
- ion-item in a card, icon left, button right
- View
-
-
-
- This is content, without any paragraph or header tags,
- within an ion-card-content element.
-
-
-
-
-
-
- Card Link Item 1 activated
-
-
-
-
- Card Link Item 2
-
-
-
-
- Card Button Item 1 activated
-
-
-
-
- Card Button Item 2
-
-
-```
-
-
-
-
-
-
-```html
-
-
- Card Subtitle
- Card Title
-
-
-
- Keep close to Nature's heart... and break clear away, once in awhile,
- and climb a mountain or spend a week in the woods. Wash your spirit clean.
-
-
-
-
-
-
- ion-item in a card, icon left, button right
- View
-
-
-
- This is content, without any paragraph or header tags,
- within an ion-card-content element.
-
-
-
-
-
-
- Card Link Item 1 activated
-
-
-
-
- Card Link Item 2
-
-
-
-
- Card Button Item 1 activated
-
-
-
-
- Card Button Item 2
-
-
-```
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react';
-import { pin, wifi, wine, warning, walk } from 'ionicons/icons';
-
-export const CardExamples: React.FC = () => {
- return (
-
-
-
- CardExamples
-
-
-
-
-
- Card Subtitle
- Card Title
-
-
-
- Keep close to Nature's heart... and break clear away, once in awhile,
- and climb a mountain or spend a week in the woods. Wash your spirit clean.
-
-
-
-
-
-
- ion-item in a card, icon left, button right
- View
-
-
-
- This is content, without any paragraph or header tags,
- within an ion-cardContent element.
-
-
-
-
-
-
- Card Link Item 1 activated
-
-
-
-
- Card Link Item 2
-
-
-
-
- Card Button Item 1 activated
-
-
-
-
- Card Button Item 2
-
-
-
-
- );
-};
-
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'card-example',
- styleUrl: 'card-example.css'
-})
-export class CardExample {
- render() {
- return [
-
-
- Card Subtitle
- Card Title
-
-
-
- Keep close to Nature's heart... and break clear away, once in awhile,
- and climb a mountain or spend a week in the woods. Wash your spirit clean.
-
- ,
-
-
-
-
- ion-item in a card, icon left, button right
- View
-
-
-
- This is content, without any paragraph or header tags,
- within an ion-card-content element.
-
- ,
-
-
-
-
- Card Link Item 1 activated
-
-
-
-
- Card Link Item 2
-
-
-
-
- Card Button Item 1 activated
-
-
-
-
- Card Button Item 2
-
-
- ];
- }
-}
-```
-
-
-
-
-
-
-```html
-
-
-
- Card Subtitle
- Card Title
-
-
-
- Keep close to Nature's heart... and break clear away, once in awhile,
- and climb a mountain or spend a week in the woods. Wash your spirit clean.
-
-
-
-
-
-
- ion-item in a card, icon left, button right
- View
-
-
-
- This is content, without any paragraph or header tags,
- within an ion-card-content element.
-
-
-
-
-
-
- Card Link Item 1 activated
-
-
-
-
- Card Link Item 2
-
-
-
-
- Card Button Item 1 activated
-
-
-
-
- Card Button Item 2
-
-
-
-
-
-```
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index 93e5fedeeed..153e5a58566 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -1,343 +1,157 @@
---
title: "ion-checkbox"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/checkbox/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/checkbox/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import Props from '@site/static/auto-generated/checkbox/props.md';
-import Events from '@site/static/auto-generated/checkbox/events.md';
-import Methods from '@site/static/auto-generated/checkbox/methods.md';
-import Parts from '@site/static/auto-generated/checkbox/parts.md';
-import CustomProps from '@site/static/auto-generated/checkbox/custom-props.md';
-import Slots from '@site/static/auto-generated/checkbox/slots.md';
+import Props from '@ionic-internal/component-api/v8/checkbox/props.md';
+import Events from '@ionic-internal/component-api/v8/checkbox/events.md';
+import Methods from '@ionic-internal/component-api/v8/checkbox/methods.md';
+import Parts from '@ionic-internal/component-api/v8/checkbox/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/checkbox/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/checkbox/slots.md';
- ion-checkboxes: Ionic App Component to Select Multiple Options
-
+ ion-checkbox: Ionic App Checkbox to Select Multiple Options
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
+Checkboxを使用すると、一連のオプションから複数のオプションを選択できます。選択すると、チェックマークが付いた状態(checked)で表示されます。checkboxをクリックすると、 `checked` プロパティーが切り替わります。`checked` プロパティを設定して、プログラムで `checked` を切り替えることもできます。
+## 基本的な使い方
+import Basic from '@site/static/usage/v8/checkbox/basic/index.md';
-Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property.
+
-## Interfaces
+## Label Placement
-### CheckboxChangeEventDetail
+開発者は `labelPlacement` プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。このプロパティはフレックスボックスの `flex-direction` プロパティを反映しています。
-```typescript
-interface CheckboxChangeEventDetail {
- value: T;
- checked: boolean;
-}
-```
+import LabelPlacement from '@site/static/usage/v8/checkbox/label-placement/index.md';
-### CheckboxCustomEvent
+
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+## Alignment
-```typescript
-interface CheckboxCustomEvent extends CustomEvent {
- detail: CheckboxChangeEventDetail;
- target: HTMLIonCheckboxElement;
-}
-```
+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/v8/checkbox/alignment/index.md';
+
-## Usage
+## Justification
-
+開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの `justify-content` プロパティを反映しています。
-
+import Justify from '@site/static/usage/v8/checkbox/justify/index.md';
-```html
-
-
+
-
-
-
-
+:::note
+`ion-item`は、 `justify` がどのように機能するかを強調するためにデモで使用されているだけです。 `justify` が正しく機能するために必須ではありません。
+:::
-
-
-
-
-
-
+## Indeterminate Checkboxes
-
-
-
- {{entry.val}}
-
-
-
-```
+import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md';
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'app-page-home',
- templateUrl: 'home.page.html',
- styleUrls: ['home.page.scss']
-})
-export class HomePage {
- public form = [
- { val: 'Pepperoni', isChecked: true },
- { val: 'Sausage', isChecked: false },
- { val: 'Mushroom', isChecked: false }
- ];
-}
-```
+
+
+## Links inside of Labels
+Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable.
-
+import LabelLink from '@site/static/usage/v8/checkbox/label-link/index.md';
+
-
+## Helper & Error Text
-```html
-
-
+Helper and error text can be used inside of a checkbox with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-checkbox`. This ensures errors are not shown before the user has a chance to enter data.
-
-
+In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
-
-
+import HelperError from '@site/static/usage/v8/checkbox/helper-error/index.md';
-
-
-
-
-
-
+
-
-
-
- Pepperoni
-
-
+## Theming
-
- Sausage
-
-
+## CSSカスタムプロパティ
-
- Mushrooms
-
-
-
-```
+import CSSProps from '@site/static/usage/v8/checkbox/theming/css-properties/index.md';
+
-
-
-
-
-
-```tsx
-import React, { useState } from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react';
-
-const checkboxList = [
- { val: 'Pepperoni', isChecked: true },
- { val: 'Sausage', isChecked: false },
- { val: 'Mushroom', isChecked: false }
-];
-
-export const CheckboxExamples: React.FC = () => {
-
- const [checked, setChecked] = useState(false);
-
- return (
-
-
-
- CheckboxExamples
-
-
-
-
- Default Checkbox
-
- Checked: {JSON.stringify(checked)}
- setChecked(e.detail.checked)} />
-
-
- Disabled Checkbox
-
-
- Checkbox Colors
-
-
-
-
-
-
-
- Checkboxes in a List
-
- {checkboxList.map(({ val, isChecked }, i) => (
-
- {val}
-
-
- ))}
-
-
-
- );
-};
-```
+## Interfaces
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'checkbox-example',
- styleUrl: 'checkbox-example.css'
-})
-export class CheckboxExample {
- private form = [
- { val: 'Pepperoni', isChecked: true },
- { val: 'Sausage', isChecked: false },
- { val: 'Mushroom', isChecked: false }
- ];
-
- render() {
- return [
- // Default Checkbox
- ,
-
- // Disabled Checkbox
- ,
-
- // Checked Checkbox
- ,
-
- // Checkbox Colors
- ,
- ,
- ,
- ,
- ,
-
- // Checkboxes in a List
-
- {this.form.map(entry =>
-
- {entry.val}
-
-
- )}
-
- ];
- }
+### CheckboxChangeEventDetail
+
+```typescript
+interface CheckboxChangeEventDetail {
+ value: T;
+ checked: boolean;
}
```
+### CheckboxCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {{entry.val}}
-
-
-
-
-
-
-
+```typescript
+interface CheckboxCustomEvent extends CustomEvent {
+ detail: CheckboxChangeEventDetail;
+ target: HTMLIonCheckboxElement;
+}
```
-
+## レガシーなチェックボックス構文からのマイグレーション
+
+Ionic 7.0では、よりシンプルなチェックボックス構文が導入されました。この新しい構文は、チェックボックスの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
+
+開発者は、この移行を一度に1つのチェックボックスずつ実行することができます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+
+### 最新の構文の使い方
+
+最新の構文を使用するには、`ion-label` を削除して、 `ion-checkbox` の中に直接ラベルを渡す必要があります。ラベルの配置は `ion-checkbox` の `labelPlacement` プロパティを使用して設定することができる。ラベルとコントロールの行の詰め方は、`ion-checkbox` の `justify` プロパティを使用して制御することができます。
+
+import Migration from '@site/static/usage/v8/checkbox/migration/index.md';
+
+
+
+
+:::note
+Ionic の過去のバージョンでは、`ion-checkbox` が正しく機能するために `ion-item` が必要でした。Ionic 7.0 からは、`ion-checkbox` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-checkbox`が正しく機能するためには、`ion-item`はもはや必須ではありません。
+:::
+
+### レガシーな構文の使い方
+
+Ionicは、アプリが最新のチェックボックス構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましい場合もあります。開発者は `ion-checkbox` の `legacy` プロパティを `true` に設定することで、そのチェックボックスのインスタンスがレガシー構文を使用するように強制できます。
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/chip.md b/docs/api/chip.md
index 4e10449fd00..43f9f6b7726 100644
--- a/docs/api/chip.md
+++ b/docs/api/chip.md
@@ -1,368 +1,64 @@
---
title: "ion-chip"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/chip/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/chip/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/chip/props.md';
-import Events from '@site/static/auto-generated/chip/events.md';
-import Methods from '@site/static/auto-generated/chip/methods.md';
-import Parts from '@site/static/auto-generated/chip/parts.md';
-import CustomProps from '@site/static/auto-generated/chip/custom-props.md';
-import Slots from '@site/static/auto-generated/chip/slots.md';
+import Props from '@ionic-internal/component-api/v8/chip/props.md';
+import Events from '@ionic-internal/component-api/v8/chip/events.md';
+import Methods from '@ionic-internal/component-api/v8/chip/methods.md';
+import Parts from '@ionic-internal/component-api/v8/chip/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/chip/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/chip/slots.md';
- ion-chip: Name, Text, Icon and Avatar for Ionic Framework Apps
-
+ ion-chip: Text, Icon and Avatar for Ionic Framework Apps
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-
-
-Columns are cellular components of the [grid](grid.md) system and go inside of a [row](row.md).
-They will expand to fill their row. All content within a grid should go inside of a column.
+Columnは、[Grid](./grid) システムのセルラーコンポーネントで、[row](./row)の内部に配置されます。列は行を埋めるように拡張されます。グリッド内のすべてのコンテンツは、カラムの内部に配置する必要があります。
-See [Grid Layout](/docs/layout/grid) for more information.
+詳しくは、[grid](./grid)のドキュメントを参照してください。
## Column Alignment
-By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior.
+デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムは[フレックスアイテム](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)なので、この動作をカスタマイズするために、カラムに適用できるいくつかの[CSSクラス](/docs/layout/css-utilities#flex-item-properties) があります。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/content.md b/docs/api/content.md
index ee2c258044c..6782dfcce50 100644
--- a/docs/api/content.md
+++ b/docs/api/content.md
@@ -1,259 +1,183 @@
---
title: "ion-content"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/content/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/content/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/content/props.md';
-import Events from '@site/static/auto-generated/content/events.md';
-import Methods from '@site/static/auto-generated/content/methods.md';
-import Parts from '@site/static/auto-generated/content/parts.md';
-import CustomProps from '@site/static/auto-generated/content/custom-props.md';
-import Slots from '@site/static/auto-generated/content/slots.md';
+import Props from '@ionic-internal/component-api/v8/content/props.md';
+import Events from '@ionic-internal/component-api/v8/content/events.md';
+import Methods from '@ionic-internal/component-api/v8/content/methods.md';
+import Parts from '@ionic-internal/component-api/v8/content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/content/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/content/slots.md';
- ion-content: Scrollable CSS Component for Ionic App Content Areas
-
+ ion-content: Scrollable Component for Ionic App Content
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
+Contentコンポーネントは、スクロール可能領域を制御するいくつかの便利なメソッドを備えた、
+使いやすいコンテンツ領域を提供します。
+1つのビューに表示できるコンテンツは1つだけです。
+Contentは、他の多くのIonicコンポーネントと同様に、 [CSS Utilities](/docs/layout/css-utilities) で提供されるグローバルスタイルを使用するか、CSSおよび使用可能な [CSS Custom Properties](#css-custom-properties) を使用して個別にスタイル設定することによって、`padding` や `margin` などを変更するようにカスタマイズできます。
-The content component provides an easy to use content area with some useful methods
-to control the scrollable area. There should only be one content in a single
-view.
+## 基本的な使い方
-Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties).
+import Basic from '@site/static/usage/v8/content/basic/index.md';
+
-## Fixed Content
-In order to place elements outside of the scrollable area, `slot="fixed"` can be added to the element. This will absolutely position the element placing it in the top left. In order to place the element in a different position, style it using [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
+## Header & Footer
-## Interfaces
+コンテンツは、ページ内の唯一のトップレベル・コンポーネントとすることも、[ヘッダー](./header)、[フッター](./footer)、またはその両方と一緒に使用することも可能です。ヘッダーやフッターと一緒に使用すると、残りの高さを埋めるようにサイズが調整されます。
-### ScrollBaseDetail
+import HeaderFooter from '@site/static/usage/v8/content/header-footer/index.md';
-```typescript
-interface ScrollBaseDetail {
- isScrolling: boolean;
-}
-```
+
-### ScrollDetail
-```typescript
-interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
- scrollTop: number;
- scrollLeft: number;
-}
-```
+## Fullscreen Content
-### ScrollBaseCustomEvent
+デフォルトでは、コンテンツは [ヘッダー](./header)と [フッター](./footer)の間のスペースを埋めますが、それらの背景にまわることはありません。例えば、ヘッダーとフッターのどちらかに `translucent` プロパティを設定した場合や、ツールバーに `opacity` を設定した場合など、特定のケースでは、コンテンツをヘッダーとフッターの後ろにスクロールさせることが望まれるかもしれない。これは、コンテンツの `fullscreen` プロパティを `true` に設定することで実現することができます。
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScrollStart` and `ionScrollEnd` events.
+import Fullscreen from '@site/static/usage/v8/content/fullscreen/index.md';
-```typescript
-interface ScrollBaseCustomEvent extends CustomEvent {
- detail: ScrollBaseDetail;
- target: HTMLIonContentElement;
-}
-```
+
-### ScrollCustomEvent
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScroll` event.
+## コンテンツの固定
-```typescript
-interface ScrollCustomEvent extends ScrollBaseCustomEvent {
- detail: ScrollDetail;
-}
-```
+スクロール可能な領域の外側に要素を配置するには、`fixed`スロットに割り当てます。そうすることで、その要素はコンテンツの左上に[絶対位置](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning)されます。要素の位置を変えるには、CSSの[top, right, bottom, left](https://developer.mozilla.org/en-US/docs/Web/CSS/position)プロパティを使ってスタイルを設定することができます。
+The `fixedSlotPlacement` property is used to determine if content in the `fixed` slot is placed before or after the main content in the DOM. When set to `before`, fixed slot content will be placed before the main content and will therefore receive keyboard focus before the main content receives keyboard focus. This can be useful when the main content contains an infinitely-scrolling list, preventing a [FAB](./fab) or other fixed content from being reachable by pressing the tab key.
+import Fixed from '@site/static/usage/v8/content/fixed/index.md';
+
-## Usage
+## スクロールメソッド
-
+コンテンツには [メソッド](#methods) が用意されており、これを呼び出すことでコンテンツを下、上、または特定のポイントにスクロールさせることができます。これらのメソッドには `duration` を渡すことができ、瞬時に位置を変更するのではなく、スムーズに移行することができます。
-
+import ScrollMethods from '@site/static/usage/v8/content/scroll-methods/index.md';
-```html
-
-
Main Content
+
-
-
Fixed Content
-
-
-```
+## Scroll Events
+スクロールイベントは、パフォーマンス上、コンテンツに対してデフォルトで無効化されています。しかし、`scrollEvents` を `true` に設定することで、有効にすることができます。これは、 スクロール [イベント](#events) を聞く前に必要です。
+import ScrollEvents from '@site/static/usage/v8/content/scroll-events/index.md';
-
+
+Scroll events are disabled by default for content due to performance. However, they can be enabled by setting `scrollEvents` to `true`. This is necessary before listening to any of the scroll [events](#events).
-
+## テーマ
-```html
-
-
-
-);
-```
+### 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.
-```tsx
-import { Component, h } from '@stencil/core';
+```css
+ion-content::part(scroll) {
+ padding-left: var(--ion-safe-area-left, 0);
+}
+```
-@Component({
- tag: 'content-example',
- styleUrl: 'content-example.css'
-})
-export class ContentExample {
- logScrollStart() {
- console.log('Scroll start');
- }
+import SafeArea from '@site/static/usage/v8/content/theming/safe-area/index.md';
- logScrolling(ev) {
- console.log('Scrolling', ev);
- }
+
- logScrollEnd() {
- console.log('Scroll end');
- }
+## Interfaces
- render() {
- return [
- this.logScrollStart()}
- onIonScroll={(ev) => this.logScrolling(ev)}
- onIonScrollEnd={() => this.logScrollEnd()}>
-
-
-
+```typescript
+interface ScrollDetail extends GestureDetail, ScrollBaseDetail {
+ scrollTop: number;
+ scrollLeft: number;
+}
+```
-
+必須ではありませんが、`ionScrollStart` と `ionScrollEnd` イベントをより強く型付けするために、`CustomEvent` インターフェースの代わりにこのインターフェースを利用することが可能です。
+```typescript
+interface ScrollBaseCustomEvent extends CustomEvent {
+ detail: ScrollBaseDetail;
+ target: HTMLIonContentElement;
+}
```
+### ScrollCustomEvent
+必須ではありませんが、`ionScroll` イベントをより強く型付けするために、`CustomEvent` インターフェースの代わりにこのインターフェースを利用することが可能です。
-
+```typescript
+interface ScrollCustomEvent extends ScrollBaseCustomEvent {
+ detail: ScrollDetail;
+}
+```
-
+### ScrollCustomEvent
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md
new file mode 100644
index 00000000000..a9fcb17433c
--- /dev/null
+++ b/docs/api/datetime-button.md
@@ -0,0 +1,80 @@
+---
+title: "ion-datetime-button"
+---
+import Props from '@ionic-internal/component-api/v8/datetime-button/props.md';
+import Events from '@ionic-internal/component-api/v8/datetime-button/events.md';
+import Methods from '@ionic-internal/component-api/v8/datetime-button/methods.md';
+import Parts from '@ionic-internal/component-api/v8/datetime-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/datetime-button/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/datetime-button/slots.md';
+
+
+ ion-datetime-button: Ionic Input for Datetime Picker
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Datetimeボタンは、[Datetime](./datetime) コンポーネントとリンクし、フォーマットされた日付と時刻を表示します。また、モーダルやポップオーバーなどで日時を表示するためのボタンも用意されています。
+
+## 概要
+
+Datetimeボタンは、スペースに制約がある場合に使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付や時刻のピッカーがオーバーレイで表示されます。
+
+Angular、React、VueなどのJavaScriptフレームワークでDatetime Buttonを使用する場合は、 [ion-modalのkeepContentsMountedプロパティ](./modal#keepcontentsmounted) または [ion-popover](./popover#keepcontentsmounted) を使用していることを確認してください。これにより、オーバーレイがまだ表示されていない場合でも、リンクされたdatetimeインスタンスがマウントされるようになります。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v8/datetime-button/basic/index.md';
+
+
+
+## ローカライゼーション
+
+`ion-datetime-button` のローカライズされたテキストは、関連する `ion-datetime` インスタンスの `locale` プロパティによって決まります。詳しくは、[Datetime Localization](./datetime#localization) を参照してください。
+
+## Format Options
+
+Datetimeインスタンスに`formatOptions`を指定することで、Datetime Buttonの日付と時刻の書式をカスタマイズすることができます。詳細は[Datetime Format Options](./datetime#format-options)を参照してください。
+
+import FormatOptions from '@site/static/usage/v8/datetime-button/format-options/index.md';
+
+
+
+## モーダルやポップオーバーと使う
+
+`ion-datetime-button` は、マウントされた `ion-datetime` インスタンスと関連付ける必要があります。そのため、[Inline Modals](./modal#inline-modals-recommended) と [Inline Popovers](./popover#inline-popovers) は `keepContentsMounted` プロパティを `true` に設定して使用しなければなりません。
+
+
+
+## プロパティ
+
+
+## イベント
+
+
+## メソッド
+
+
+## CSS Shadow Parts
+
+
+## CSS カスタムプロパティ
+
+
+## Slots
+
diff --git a/docs/api/datetime.md b/docs/api/datetime.md
index 9770cef8b7e..af3f8671ebe 100644
--- a/docs/api/datetime.md
+++ b/docs/api/datetime.md
@@ -1,147 +1,160 @@
---
title: "ion-datetime"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Props from '@ionic-internal/component-api/v8/datetime/props.md';
+import Events from '@ionic-internal/component-api/v8/datetime/events.md';
+import Methods from '@ionic-internal/component-api/v8/datetime/methods.md';
+import Parts from '@ionic-internal/component-api/v8/datetime/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/datetime/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/datetime/slots.md';
-import Props from '@site/static/auto-generated/datetime/props.md';
-import Events from '@site/static/auto-generated/datetime/events.md';
-import Methods from '@site/static/auto-generated/datetime/methods.md';
-import Parts from '@site/static/auto-generated/datetime/parts.md';
-import CustomProps from '@site/static/auto-generated/datetime/custom-props.md';
-import Slots from '@site/static/auto-generated/datetime/slots.md';
+import Basic from '@site/static/usage/v8/datetime/basic/index.md';
-import Basic from '@site/static/usage/datetime/basic/index.md';
+import MaxMin from '@site/static/usage/v8/datetime/date-constraints/max-min/index.md';
+import Values from '@site/static/usage/v8/datetime/date-constraints/values/index.md';
+import Advanced from '@site/static/usage/v8/datetime/date-constraints/advanced/index.md';
-import MaxMin from '@site/static/usage/datetime/date-constraints/max-min/index.md';
-import Values from '@site/static/usage/datetime/date-constraints/values/index.md';
-import Advanced from '@site/static/usage/datetime/date-constraints/advanced/index.md';
+import FormatOptions from '@site/static/usage/v8/datetime/format-options/index.md';
-import CustomLocale from '@site/static/usage/datetime/localization/custom-locale/index.md';
-import HourCycle from '@site/static/usage/datetime/localization/hour-cycle/index.md';
-import FirstDayOfWeek from '@site/static/usage/datetime/localization/first-day-of-week/index.md';
-import LocaleExtensionTags from '@site/static/usage/datetime/localization/locale-extension-tags/index.md';
-import TimeLabel from '@site/static/usage/datetime/localization/time-label/index.md';
+import CustomLocale from '@site/static/usage/v8/datetime/localization/custom-locale/index.md';
+import HourCycle from '@site/static/usage/v8/datetime/localization/hour-cycle/index.md';
+import FirstDayOfWeek from '@site/static/usage/v8/datetime/localization/first-day-of-week/index.md';
+import LocaleExtensionTags from '@site/static/usage/v8/datetime/localization/locale-extension-tags/index.md';
+import TimeLabel from '@site/static/usage/v8/datetime/localization/time-label/index.md';
-import MonthAndYear from '@site/static/usage/datetime/presentation/month-and-year/index.md';
-import Time from '@site/static/usage/datetime/presentation/time/index.md';
-import Date from '@site/static/usage/datetime/presentation/date/index.md';
+import MonthAndYear from '@site/static/usage/v8/datetime/presentation/month-and-year/index.md';
+import Time from '@site/static/usage/v8/datetime/presentation/time/index.md';
+import Date from '@site/static/usage/v8/datetime/presentation/date/index.md';
-import ShowingDefaultTitle from '@site/static/usage/datetime/title/showing-default-title/index.md';
-import CustomizingTitle from '@site/static/usage/datetime/title/customizing-title/index.md';
+import ShowingDefaultTitle from '@site/static/usage/v8/datetime/title/showing-default-title/index.md';
+import CustomizingTitle from '@site/static/usage/v8/datetime/title/customizing-title/index.md';
-import ShowingConfirmationButtons from '@site/static/usage/datetime/buttons/showing-confirmation-buttons/index.md';
-import CustomizingButtons from '@site/static/usage/datetime/buttons/customizing-buttons/index.md';
-import CustomizingButtonTexts from '@site/static/usage/datetime/buttons/customizing-button-texts/index.md';
+import ShowingConfirmationButtons from '@site/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md';
+import CustomizingButtons from '@site/static/usage/v8/datetime/buttons/customizing-buttons/index.md';
+import CustomizingButtonTexts from '@site/static/usage/v8/datetime/buttons/customizing-button-texts/index.md';
-import MultipleDateSelection from '@site/static/usage/datetime/multiple/index.md';
+import HighlightedDatesArray from '@site/static/usage/v8/datetime/highlightedDates/array/index.md';
+import HighlightedDatesCallback from '@site/static/usage/v8/datetime/highlightedDates/callback/index.md';
-import Theming from '@site/static/usage/datetime/theming/index.md';
+import ShowAdjacentDays from '@site/static/usage/v8/datetime/show-adjacent-days/index.md';
+
+import MultipleDateSelection from '@site/static/usage/v8/datetime/multiple/index.md';
+
+import GlobalTheming from '@site/static/usage/v8/datetime/styling/global-theming/index.md';
+import CalendarDaysStyling from '@site/static/usage/v8/datetime/styling/calendar-days/index.md';
+import WheelStyling from '@site/static/usage/v8/datetime/styling/wheel-styling/index.md';
ion-datetime: Ionic API Input for Datetime Format Picker
-
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-Datetimes present a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native `input` elements of `datetime-local`, however, Ionic Framework's Datetime component makes it easy to display the date and time in the preferred format, and manage the datetime values.
+Datetimeはカレンダーとタイムホイールのインターフェイスを表示し、ユーザーが簡単に日付と時刻を選択できるようにします。Datetimeはネイティブの `datetime-local` の `input` 要素と似ていますが、Ionic FrameworkのDatetimeコンポーネントを使用すると、好みのフォーマットで日付と時刻を表示したり、datetimeの値を管理することが簡単にできます。
-## Overview
+## 概要
-Historically, handling datetime values within JavaScript, or even within HTML
-inputs, has always been a challenge. Specifically, JavaScript's `Date` object is
-notoriously difficult to correctly parse apart datetime strings or to format
-datetime values. Even worse is how different browsers and JavaScript versions
-parse various datetime strings differently, especially per locale.
+これまで、JavaScriptやHTMLの入力でdatetimeの値を扱うことは、常に困難でした。
+入力でさえも、常に課題でした。
+特に、JavaScriptの `Date` オブジェクトは、datetime文字列を正しく解析したり、datetime値をフォーマットしたりするのが難しいことで有名です。
+さらに悪いことに、ブラウザやJavaScriptのバージョンによって、
+特にロケールごとに様々なdatetime文字列の解析が異なるのです。
-Fortunately, Ionic Framework's datetime input has been designed so developers can avoid
-the common pitfalls, allowing developers to easily manipulate datetime values and give the user a simple datetime picker for a great user experience.
+Ionic Frameworkのdatetimeは、開発者が一般的な落とし穴を回避できるように設計されており、
+開発者は簡単にdatetime値を操作し、ユーザーにシンプルなdatetimeピッカーを提供し、素晴らしいユーザーエクスペリエンスを提供することができます。
-### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ
+### ISO 8601 Datetime Format: `YYYY-MM-DDTHH:mmZ`
-Ionic Framework uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime)
-for its value. The value is simply a string, rather than using JavaScript's
-`Date` object. Using the ISO datetime format makes it easy to serialize
-and parse within JSON objects and databases.
+Ionic Frameworkでは、[ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を値として使用します。
+この値は、JavaScriptの `Date` オブジェクトを使用するのではなく、単純に文字列として使用されます。
+ISO datetimeフォーマットを使用することで、
+JSONオブジェクトやデータベース内でのシリアライズやパースが容易になります。
-Below are some examples of ISO 8601 formats that can be used with `ion-datetime`:
+以下は、 `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` |
-Note that the year is always four-digits, milliseconds (if it's added) is always
-three-digits, and all others are always two-digits. So the number representing
-January always has a leading zero, such as `01`. Additionally, the hour is
-always in the 24-hour format, so `00` is `12am` on a 12-hour clock, `13` means
-`1pm`, and `23` means `11pm`.
+年号は常に4桁、ミリ秒は（加算される場合は）常に3桁、その他は常に2桁であることに注意してください。
+ミリ秒は3桁、その他は2桁である。
+ですから、1月を表す数字には 1月を表す数字には常に先頭のゼロ、例えば`01`が付きます。
+また、時刻は常に24時間表示で、
+12時間表示の時計では「00」は「午前12時」、「13」は「午後1時」、「23」は「午後3時」を意味します。
:::note
-While seconds and milliseconds can be specified using the ISO 8601 datetime format, `ion-datetime` does not provide an interface for second and millisecond selection. Any second or millisecond values provided will be ignored.
+秒、ミリ秒、タイムゾーンは ISO 8601 datetime フォーマットで指定できますが、 `ion-datetime` は秒、ミリ秒、タイムゾーンを選択するためのインターフェイスを提供しません。秒、ミリ秒、タイムゾーンの値を指定しても無視されます。
:::
-## Basic Usage
+## 基本的な使い方
-## Date Constraints
+## 日付ボタンと使う
+
+モーダルやポップオーバーなどのオーバーレイで日付時刻を表示する必要がある場合は、 [ion-datetime-button](./datetime-button) を使用することをお勧めします。スペースに制約がある場合は、 `ion-datetime-button` を使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付と時刻のピッカーがオーバーレイで表示されます。
+
+## 非同期に値を設定する
+
+すでにdatetimeが作成された後にプログラムで`value`が更新されると、datetimeは自動的に新しい日付にジャンプします。しかし、ユーザーがdatetimeを操作しているときに、この方法で`value`を更新することは避けることをお勧めします。例えば、datetimeの`value`が非同期処理で読み込まれる場合、値の更新が終わるまでCSSでdatetimeを非表示にすることをお勧めします。
+
+## 日付コンテナ
-### Max and Min Dates
+### 日付の最小値と最大値
-To customize the minimum and maximum datetime values, the `min` and `max` component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user.
+日付の最小値と最大値をカスタマイズするには、 `min` と `max` コンポーネントプロパティを使用します。上の表にあるのと同じ IS0 8601 フォーマットに従って、各コンポーネントはユーザーが選択できる日付を制限することができます。
-The following example restricts date selection to March 2022 through May 2022 only.
+以下の例では、日付の選択を2022年3月から2022年5月のみに制限しています。
-### Selecting Specific Values
+### 特定の値を選択する
-While the `min` and `max` properties allow you to restrict date selection to a certain range, the `monthValues`, `dayValues`, `yearValues`, `hourValues`, and `minuteValues` properties allow you choose specific days and times that users can select.
+`min` と `max` プロパティでは、日付の選択をある範囲に制限することができますが、 `monthValues`, `dayValues`, `yearValues`, `hourValues`, `minuteValues` プロパティでは、ユーザーが選択できる特定の日や時刻を選択することが可能です。
-The following example allows minutes to be selected in increments of 15. It also allows for days to be selected in increments of 5.
+次の例では、15分単位で分を選択することができます。また、日付を5刻みで選択することができます。
-### Advanced Date Constraints
+### 高度な日付制限
-With the `isDateEnabled` property, developers can customize the `ion-datetime` to disable a specific day, range of dates, weekends or any custom rule using an ISO 8601 date string.
-The `isDateEnabled` property accepts a function returning a boolean, indicating if a date is enabled. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank.
+`isDateEnabled` プロパティを使用すると、開発者は `ion-datetime` をカスタマイズして、ISO 8601 の日付文字列を使用して、特定の日、日付の範囲、週末、または任意のカスタムルールを無効にすることができる。
+isDateEnabled` プロパティは、日付が有効かどうかを示すブール値を返す関数を受け付ける。この関数は、レンダリングされた各日付、前月、当月、翌月に対して呼び出されます。カスタムの実装では、ジャンクを避けるためにパフォーマンスを最適化する必要があります。
-The following example shows how to disable all weekend dates. For more advanced date manipulation, we recommend using a date utility such as `date-fns`.
+次の例では、週末の日付をすべて無効にする方法を示しています。より高度な日付操作を行うには、 `date-fns` のような日付ユーティリティを使用することをお勧めします。
-## Localization
+## ローカライゼーション
-Ionic Framework makes use of the [Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web API which allows us to automatically localize the month and day names according to the language and region set on the user's device.
+Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web APIを利用して、ユーザーの端末に設定されている言語や地域に応じて、月名と曜日名を自動的にローカライズすることが可能です。
-### Custom Locale
+### カスタムロケール
-For instances where you need a specific locale, you can use the `locale` property to set it. The locale controls both the language and the date and time formats that are displayed.
+特定のロケールが必要な場合、 `locale` プロパティを使用して設定することができます。ロケールは、表示される言語と日付・時刻のフォーマットの両方を制御します。
-The following example shows how to set the locale to Spanish (Spain).
+次の例では、ロケールをスペイン語（Spanish）に設定する方法を示しています。
:::note
-The time label is not automatically localized. See [Time Label](#time-label) for more information.
+時刻の表記は、自動的にローカライズされません。詳しくは [Time Label](#time-label) を参照してください。
:::
-### Hour Cycle
+### 時間サイクル
-`ion-datetime` will use the hour cycle that is specified by the `locale` property by default. For example, if `locale` is set to `en-US`, then `ion-datetime` will use a 12 hour cycle.
+`ion-datetime` は、デフォルトで `locale` プロパティで指定された時間サイクルを使用します。例えば、 `locale` が `en-US` に設定されている場合、 `ion-datetime` は12時間のサイクルを使用します。
-There are 4 primary hour cycle types:
+時間サイクルには4つのタイプがあります。
| Hour cycle type | Description |
| --------------- | ------------------------------------------------------------ |
@@ -151,77 +164,77 @@ There are 4 primary hour cycle types:
| `'h24'` | Hour system using 1–24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00. |
:::note
- Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle
+ ソース: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle
:::
-There may be scenarios where you need to have more control over which hour cycle is used. This is where the `hourCycle` property can help.
+どの時間のサイクルを使用するか、もっとコントロールする必要があるシナリオがあるかもしれません。このような場合には、 `hourCycle` プロパティが役に立ちます。
-In the following example, we can use the `hourCycle` property to force `ion-datetime` to use the 12 hour cycle even though the locale is `en-GB`, which uses a 24 hour cycle by default:
+次の例では、 `hourCycle` プロパティを使用して、ロケールが `en-GB` であるにもかかわらず、 `ion-datetime` に12時間周期を使用するように強制することができます。
-### First Day of the Week
+### 週初めの日
-For `ion-datetime`, the default first day of the week is Sunday. As of 2022, there is no browser API that lets Ionic automatically determine the first day of the week based on a device's locale, though there is on-going work regarding this (see: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6)).
+`ion-datetime`の場合、週初めの曜日はデフォルトで日曜日です。2022年現在、Ionicがデバイスのロケールに基づいて自動的に週の最初の曜日を決定するためのブラウザAPIはありませんが、これに関する作業は進行中です（参照: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6) )．
-### Time Label
+### 時刻表記
-The time label is not automatically localized. Fortunately, Ionic makes it easy to provide custom localizations with the `time-label` slot.
+時刻表記は自動的にローカライズされるわけではありません。幸いなことに、Ionicでは `time-label` スロットで簡単にカスタムのローカライズを提供することができます。
-### Locale Extension Tags
+### ロケールエクステンションタグ
-`ion-datetime` also supports [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) as part of the `Intl.Locale` API. These tags let you encode information about the locale in the locale string itself. Developers may prefer to use the extension tag approach if they are using the [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) in their apps.
+`ion-datetime` は、 `Intl.Locale` API の一部として [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) もサポートしています。これらのタグを使用すると、ロケールに関する情報をロケール文字列自体にエンコードすることができます。開発者は、アプリの中で [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) を使っている場合、拡張タグのアプローチを使うことを好むかもしれません。
-For example, if you wanted to use a 12 hour cycle with the `en-GB` locale, you could provide extension tags instead of using both the `locale` and `hourCycle` properties:
+たとえば、 `en-GB` ロケールで 12 時間周期を使用したい場合は、 `locale` と `hourCycle` の両方のプロパティを使用するのではなく、拡張タグを使用します。
:::note
-Be sure to check the [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) for `Intl.Locale` before using it in your app.
+アプリで使用する前に、 `Intl.Locale` の [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) を必ず確認してください。
:::
-## Presentation
+## プレゼンテーション
-By default, `ion-datetime` allows users to select both date and time. In addition, users have access to selecting the specific month, year, hour, and minute.
+デフォルトでは、 `ion-datetime` は日付と時刻の両方を選択することができる。さらに、ユーザは特定の月、年、時間、分を選択することができます。
-Some use cases may call for only date selection or only time selection. The `presentation` property allows you to specify which pickers to show and the order to show them in. For example, setting `date-time` will have the calendar picker appear before the time picker. Setting `time-date` will have the calendar picker appear after the time picker.
+ユースケースによっては、日付だけを選択したり、時間だけを選択したりすることもできます。 `presentation` プロパティでは、表示するピッカーとその順番を指定することができます。例えば、 `date-time` を設定すると、カレンダーピッカーがタイムピッカーよりも先に表示されます。 `time-date` を設定すると、カレンダーピッカーはtimeピッカーの後に表示されます。
-### Month and Year Selection
+### 月と年の選択
-Month and year selection is available by passing `month-year`, `year-month`, `month`, or `year` to the `presentation` property.
+月と年の選択は、 `presentation` プロパティに `month-year` , `month` , または `year` を渡すことで行うことができます。
-This example shows a datetime with the `month-year` configuration.
+この例では、 `month-year` を設定した datetime を示しています。
-### Time Selection
+### 時刻の選択
-Time selection is available by passing `date-time`, `time-date`, or `time` to the `presentation` property.
+時刻の選択は、 `presentation` プロパティに `date-time`, `time-date`, `time` を渡すことで行うことができます。
-This example shows a datetime with the `time` configuration.
+この例では、`time`の設定で datetime を表示しています。
-### Date Selection
+### 日付の選択
-Date selection is available by passing `date-time`, `time-date`, or `date` to the `presentation` property.
+時刻の選択は、 `presentation` プロパティに `date-time`, `time-date`, または `date` を渡すことで行うことで有効になります。
-This example shows a datetime with the `date` configuration.
+この例では、`date`の設定でdatetimeを指定しています。
-### Wheel Style Pickers
+### ピッカーのホイールスタイル
-By default, Ionic will prefer to show a grid style layout when using `presentation`. However, it is possible to show a wheel style using the `preferWheel` property. When `preferWheel` is `true`, Ionic will prefer to show the wheel style layout when possible.
+デフォルトでは、Ionicは `presentation` を使用する場合、グリッドスタイルのレイアウトを優先して表示します。しかし、`preferWheel` プロパティを使用すると、ホイールスタイルを表示することができます。preferWheel` が `true` の場合、Ionic は可能な限りホイールスタイルのレイアウトを優先して表示します。
-Certain `presentation` options have both grid and wheel styles that developers can choose from with the `preferWheel` property. Other `presentation` values only have a wheel style and will never show a grid style. The table below shows which `presentation` values have grid or wheel styles.
+特定の `presentation` オプションには、グリッドとホイールの両方のスタイルがあり、開発者は `preferWheel` プロパティで選択することができます。その他の `presentation` の値はホイールスタイルのみを持ち、グリッドスタイルは決して表示されません。下の表は、どの `presentation` の値がグリッドスタイルとホイールスタイルを持つかを示しています。
-| `presentation` | Has Grid Style? | Has Wheel Style? |
+| `presentation` | グリッドシステム | ホイールシステム |
| -------------- | --------------- | ---------------- |
| `date` | Yes | Yes |
| `date-time` | Yes | Yes |
@@ -231,15 +244,27 @@ Certain `presentation` options have both grid and wheel styles that developers c
| `time-date` | Yes | Yes |
| `year` | No | Yes |
-The example below shows the wheel picker with `presentation="date-time"`.
+以下の例では、ホイールピッカーに `presentation="date-time"` を指定しています。
-import Wheel from '@site/static/usage/datetime/presentation/wheel/index.md';
+import Wheel from '@site/static/usage/v8/datetime/presentation/wheel/index.md';
-## Multiple Date Selection
+## 隣接する日を表示する
+
+`showAdjacentDays` プロパティが `true` に設定されている場合、カレンダービューに前月と翌月の日が表示され、月の初めや終わりの空白を埋めることができます。ユーザーが有効な隣接日をクリックすると、カレンダーはその月のビューを表示するようにスムーズにアニメーションします。
+
+`showAdjacentDays`が有効な場合、カレンダービューは常に6行表示されるため、グリッドを埋めるために必要に応じて前月または翌月の日が表示されます。例えば、ある月が週の初日に始まり、5行目で終わるとしても、6行目を完成させるために翌月の日が最後に表示されます。
+
+:::note
+This property is only supported when using `presentation="date"` and `preferWheel="false"`.
+:::
+
+
+
+## 複数の日付の選択
-If the `multiple` property is set to `true`, multiple dates can be selected from the calendar picker. Clicking a selected date will deselect it.
+`multiple`プロパティが`true`に設定されている場合、カレンダーピッカーから複数の日付を選択することができます。選択した日付をクリックすると選択が解除されます。
:::note
This property is only supported when using `presentation="date"` and `preferWheel="false"`.
@@ -247,57 +272,109 @@ This property is only supported when using `presentation="date"` and `preferWhee
-## Titles
+## タイトル
-By default, `ion-datetime` does not show any header or title associated with the component. Developers can use the `showDefaultTitle` property to show the default title/header configuration. They can also use the `title` slot to customize what is rendered in the header.
+デフォルトでは、`ion-datetime`は、コンポーネントに関連するヘッダーやタイトルを表示しません。開発者は `showDefaultTitle` プロパティを使用して、デフォルトのタイトル/ヘッダー構成を表示することができます。また、 `title` スロットを使用して、ヘッダーに表示される内容をカスタマイズすることもできます。
-### Showing the Default Title
+### デフォルトタイトルを表示
-### Customizing the Title
+### タイトルをカスタマイズ
-## Buttons
+## フォーマットオプション
+
+`formatOptions`を指定することで、Datetimeコンポーネントのヘッダーテキスト内の日付と時刻ボタン内の時刻の書式をカスタマイズすることができます。`formatOptions`プロパティ内の `date` と `time` はそれぞれ [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) オブジェクトでなければなりません。もし `formatOptions` が指定されなかった場合、日付と時刻にはデフォルトのフォーマットが使用されます。
+
+Datetime はタイムゾーンを [操作したり設定したりしません](#time-zones)。もし `timeZone` や `timeZoneName` が指定された場合、それらは無視され、タイムゾーンは UTC に設定される。これにより、表示される値がユーザーの現在のタイムゾーンに変換されるのではなく、選択された値と一致するようになります。
+
+選択された表示と一致しない可能性があるので、指定するオプションには注意してください。例えば、`month`の表示に対して`minute: 'numeric'` を指定すると、予期しない動作になり、時間だけが表示されるはずのところに月が表示されるかもしれません。
-By default, `ionChange` is emitted with the new datetime value whenever a new date is selected. To require user confirmation before emitting `ionChange`, you can either set the `showDefaultButtons` property to `true` or use the `buttons` slot to pass in a custom confirmation button. When passing in custom buttons, the confirm button must call the `confirm` method on `ion-datetime` for `ionChange` to be emitted.
+
-### Showing Confirmation Buttons
+## ボタン
-The default Done and Cancel buttons are already preconfigured to call the `done` and `cancel` methods, respectively.
+デフォルトでは、新しい日付が選択されると、新しいdatetimeの値で `ionChange` が発行されます。 `ionChange` を発行する前にユーザの確認を必要とする場合は、 `showDefaultButtons` プロパティを `true` に設定するか、 `buttons` スロットでカスタム確認ボタンを渡すことができます。カスタムボタンを渡す場合、 `ionChange` を発生させるために、確認ボタンは `ion-datetime` の `confirm` メソッドを呼び出す必要があります。
+
+### 確認ボタンの表示
+
+デフォルトのDoneボタンとCancelボタンは、それぞれ [`confirm`](#confirm) と [`cancel`](#cancel) メソッドを呼び出すように予め設定されています。
-### Customizing Button Texts
+### ボタンテキストのカスタマイズ
-For simple use cases, developers can provide custom button text to the confirmation and cancel values through the `doneText` and `cancelText` properties. We recommend doing this when you only need to change the button text and do not need any custom behavior.
+単純なユースケースの場合、開発者は `doneText` と `cancelText` プロパティを使用して、確認とキャンセルの値にカスタムボタンテキストを指定することができます。この方法は、ボタンのテキストを変更するだけで、カスタムビヘイビアを必要としない場合に推奨します。
-### Customizing Button Elements
+### ボタン要素のカスタマイズ
-Developers can provide their own buttons for advanced custom behavior.
+開発者は、高度なカスタム動作のための独自のボタンを提供することができる。
-`ion-datetime` has `confirm`, `cancel`, and `reset` methods that developers can call when clicking on custom buttons. The `reset` method also allows developers to provide a date to reset the datetime to.
+`ion-datetime` には `confirm`, `cancel`, `reset` メソッドがあり、開発者がカスタムボタンをクリックした際に呼び出すことができる。また、 `reset` メソッドには、日付のリセット先を指定することができます。
-## Theming
+## 特定の日付をハイライトする
+
+`highlightedDates`プロパティを使用すると、開発者は特定の日付をカスタムテキストや背景色でスタイル設定することができます。このプロパティは、日付とその色の配列として定義するか、ISO 文字列を受け取って使用する色を返すコールバックとして定義することができます。
-Ionic's powerful theming system can be used to easily change your entire app to match a certain theme. In this example, we used the [Color Creator](../theming/colors#new-color-creator) and the [Stepped Color Generator](../theming/themes#stepped-color-generator) to create a rose color palette that we can use for `ion-datetime`.
+色を指定する場合は、有効な CSS カラーフォーマットを使用できます。これには、16進コード、`rgba` 、[color variables](../theming/colors) などが含まれます。
-The benefit of this approach is that every component, not just `ion-datetime`, can automatically take advantage of this theme.
+一貫したユーザーエクスペリエンスを維持するため、選択された日付のスタイルは常にカスタムハイライトよりも優先されます。
-
+:::note
+This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`.
+:::
-## Time Zones
+### 配列を利用
-Ionic's `ion-datetime` follows the [datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) behavior of not manipulating or setting the time zone inside of a datetime control. In other words, a time value of "07:00" will not be adjusted according to different time zones.
+ハイライトが期日などの固定された日付に適用される場合は、配列の方が適しています。
-We recommend using a library such as [date-fns-tz](https://github.com/marnusw/date-fns-tz) to convert a datetime value to the desired time zone.
+
-Below is an example of formatting an ISO-8601 string to display in the time zone set on a user's device:
+### Callbackを利用
+
+誕生日や定期的なミーティングなど、ハイライトされた日付が繰り返される場合は、コールバックを使用した方がよいでしょう。
+
+
+
+## スタイリング
+
+### グローバルテーマ
+
+Ionicの強力なテーマシステムを使用すると、特定のテーマに合わせてアプリ全体を簡単に変更することができます。この例では、[Color Creator](../theming/colors#new-color-creator) と [Stepped Color Generator](../theming/themes#stepped-color-generator) を使用して、 `ion-datetime` で使用できるローズ色のパレットを作成しました。
+
+この方法の利点は、`ion-datetime`だけでなく、すべてのコンポーネントが自動的にこのテーマを利用できることです。
+
+
+
+### 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の月/年のピッカーにも適用されます。
+
+
+
+## タイムゾーン
+
+Ionicの `ion-datetime` は、[datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) の動作に従い、datetimeコントロールの内部でタイムゾーンを操作・設定することはありません。つまり、「07:00」という時刻の値は、異なるタイムゾーンに応じて調整されることはありません。
+
+[date-fns-tz](https://github.com/marnusw/date-fns-tz) のようなライブラリを使用して、datetimeの値を希望するタイムゾーンに変換することをお勧めします。
+
+以下は、ISO-8601文字列をユーザーのデバイスに設定されたタイムゾーンで表示するためのフォーマット例です。
```typescript
import { format, utcToZonedTime } from 'date-fns-tz';
@@ -309,17 +386,17 @@ const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
const date = new Date('2014-10-25T10:46:20Z');
// Use date-fns-tz to convert from UTC to a zoned time
-const zonedTime = dateFnsTz.utcToZonedTime(date, userTimeZone);
+const zonedTime = utcToZonedTime(date, userTimeZone);
// Create a formatted string from the zoned time
format(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone });
```
-### Parsing Date Values
+### 日付の値のパース
-The `ionChange` event will emit the date value as an ISO-8601 string in the event payload. It is the developer's responsibility to format it based on their application needs. We recommend using [date-fns](https://date-fns.org) to format the date value.
+`ionChange` イベントは、イベントのペイロードに ISO-8601 形式の文字列として日付の値を出力します。アプリケーションのニーズに応じてこれをフォーマットするのは、開発者の責任です。日付の値をフォーマットするには、[date-fns](https://date-fns.org) を使用することを推奨します。
-Below is an example of formatting an ISO-8601 string to display the month, date and year:
+以下は、月、日、年を表示するために ISO-8601 文字列をフォーマットする例である。
```typescript
import { format, parseISO } from 'date-fns';
@@ -327,7 +404,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';
@@ -339,55 +416,48 @@ console.log(formattedString); // Jun 4, 2021
See https://date-fns.org/docs/format for a list of all the valid format tokens.
-## Advanced Datetime Validation and Manipulation
-
-The datetime picker provides the simplicity of selecting an exact format, and
-persists the datetime values as a string using the standardized [ISO 8601
-datetime format](https://www.w3.org/TR/NOTE-datetime). However, it's important
-to note that `ion-datetime` does not attempt to solve all situations when
-validating and manipulating datetime values. If datetime values need to be
-parsed from a certain format, or manipulated (such as adding 5 days to a date,
-subtracting 30 minutes, etc.), or even formatting data to a specific locale,
-then we highly recommend using [date-fns](https://date-fns.org) to work with
-dates in JavaScript.
+## 高度な日時の検証および操作
-## Accessibility
+datetime ピッカーは、正確なフォーマットを選択するシンプルさを提供し、
+標準化された [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を使用して、
+datetime 値を文字列として持続させることができます。
+しかし、 `ion-datetime` は、datetimeの値を検証したり操作したりするときに、
+すべての状況を解決しようとするわけではないことに注意することが重要です。
+もし、datetimeの値を特定のフォーマットからパースしたり、
+操作したり(例えば、日付に5日足したり、30分を引いたり)、
+あるいは、特定のロケールにデータをフォーマットする必要があるなら、
+JavaScriptで日付を扱うために [date-fns](https://date-fns.org) を使うことを強くお勧めします。
-### Keyboard Navigation
+## アクセシビリティ
-`ion-datetime` has full keyboard support for navigating between focusable elements inside of the component. The following table details what each key does:
+### キーボードインタラクション
-| Key | Function |
-| ------------------ | ------------------------------------------------------------ |
-| `Tab` | Moves focus to the next focusable element. |
-| `Shift` + `Tab` | Moves focus to the previous focusable element. |
-| `Space` or `Enter` | Clicks the focusable element. |
+`ion-datetime` は、コンポーネント内のフォーカス可能な要素間を移動するためのフルキーボードサポートを備えています。次の表は、それぞれのキーが何をするのかの詳細です。
-#### Date Grid
+| Key | Description |
+| ------------------------------------ | ---------------------------------------------- |
+| Tab | Moves focus to the next focusable element. |
+| Shift + Tab | Moves focus to the previous focusable element. |
+| Space or Enter | Clicks the focusable element. |
-| Key | Function |
-| ------------------ | ------------------------------------------------------------ |
-| `ArrowUp` | Moves focus to the same day of the previous week. |
-| `ArrowDown` | Moves focus to the same day of the next week. |
-| `ArrowRight` | Moves focus to the next day. |
-| `ArrowLeft` | Moves focus to the previous day. |
-| `Home` | Moves focus to the first day of the current week. |
-| `End` | Moves focus to the last day of the current week. |
-| `PageUp` | Changes the grid of dates to the previous month. |
-| `PageDown` | Changes the grid of dates to the next month. |
-| `Shift` + `PageUp` | Changes the grid of dates to the previous year. |
-| `Shift` + `PageDown` | Changes the grid of dates to the next year. |
+#### 日付の表示
-#### Time, Month, and Year Wheels
+| Key | Description |
+| -------------------------------------- | ------------------------------------------------- |
+| ArrowUp | Moves focus to the same day of the previous week. |
+| ArrowDown | Moves focus to the same day of the next week. |
+| ArrowRight | Moves focus to the next day. |
+| ArrowLeft | Moves focus to the previous day. |
+| Home | Moves focus to the first day of the current week. |
+| End | Moves focus to the last day of the current week. |
+| PageUp | Changes the grid of dates to the previous month. |
+| PageDown | Changes the grid of dates to the next month. |
+| Shift + PageUp | Changes the grid of dates to the previous year. |
+| Shift + PageDown | Changes the grid of dates to the next year. |
-When using the time wheel picker, you can use the number keys to select hour and minute values when the columns are focused.
+#### 時刻、月、年のホイール
-| Key | Function |
-| ------------------ | ------------------------------------------------------------ |
-| `ArrowUp` | Scroll to the previous item. |
-| `ArrowDown` | Scroll to the next item. |
-| `Home` | Scroll to the first item. |
-| `End` | Scroll to the last item. |
+Datetimeのホイールピッカーは、内部的に [Picker](./picker) を使用しています。ホイールピッカーのアクセシビリティ機能の詳細については、 [ピッカー アクセシビリティ](./picker#accessibility) を参照してください。
## Interfaces
@@ -401,7 +471,7 @@ interface DatetimeChangeEventDetail {
### DatetimeCustomEvent
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
```typescript
interface DatetimeCustomEvent extends CustomEvent {
@@ -410,19 +480,19 @@ interface DatetimeCustomEvent extends CustomEvent {
}
```
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
diff --git a/docs/api/fab-button.md b/docs/api/fab-button.md
index ae84d8c2d7c..f103c2a10c0 100644
--- a/docs/api/fab-button.md
+++ b/docs/api/fab-button.md
@@ -1,235 +1,42 @@
---
title: "ion-fab-button"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/fab-button/props.md';
-import Events from '@site/static/auto-generated/fab-button/events.md';
-import Methods from '@site/static/auto-generated/fab-button/methods.md';
-import Parts from '@site/static/auto-generated/fab-button/parts.md';
-import CustomProps from '@site/static/auto-generated/fab-button/custom-props.md';
-import Slots from '@site/static/auto-generated/fab-button/slots.md';
+import Props from '@ionic-internal/component-api/v8/fab-button/props.md';
+import Events from '@ionic-internal/component-api/v8/fab-button/events.md';
+import Methods from '@ionic-internal/component-api/v8/fab-button/methods.md';
+import Parts from '@ionic-internal/component-api/v8/fab-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/fab-button/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/fab-button/slots.md';
- Floating Action Button | Ionic FAB Button Icon for Primary Action
-
+ ion-fab-button: Ionic FAB Button Icon for Primary Action
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-
-Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an `FAB`. They need to be wrapped with an `` component in order to be fixed over the content.
-
-If the FAB button is not wrapped with ``, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors:
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
-
-
- Button
-
-
-
- Default
-
-
- Mini
-
-
- Primary
- Secondary
- Danger
- Light
- Dark
-
-
-```
-
-
-
-
-
-
-
-```html
-
-
-
-
- Button
-
-
-
- Default
-
-
- Mini
-
-
- Primary
- Secondary
- Danger
- Light
- Dark
-
-
-```
-
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonContent, IonFab, IonFabButton } from '@ionic/react';
-
-export const FabButtonExample: React.FC = () => (
-
- {/*-- Fixed Floating Action Button that does not scroll with the content --*/}
-
- Button
-
-
- {/*-- Default Floating Action Button that scrolls with the content.--*/}
- Default
-
- {/*-- Mini --*/}
- Mini
-
- {/*-- Colors --*/}
- Primary
- Secondary
- Danger
- Light
- Dark
-
-);
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'fab-button-example',
- styleUrl: 'fab-button-example.css'
-})
-export class FabButtonExample {
- render() {
- return [
-
-
- {/* Fixed Floating Action Button that does not scroll with the content */}
-
- Button
-
-
- {/* Default Floating Action Button that scrolls with the content */}
- Default
-
- {/* Mini */}
- Mini
-
- {/* Colors */}
- Primary
- Secondary
- Danger
- Light
- Dark
-
-
- ];
- }
-}
-```
-
-
-
-
-
-
-```html
-
-
-
-
-
- Button
-
-
-
- Default
-
-
- Mini
-
-
- Primary
- Secondary
- Danger
- Light
- Dark
-
-
-
-
-
-```
+フローティングアクションボタン（FAB）は、アプリケーションの主要なアクションを表します。デフォルトでは、円形の形をしています。ボタンが押されると、関連するアクションがさらに開かれることもあります。
-
+その名が示すように、FABは一般的に固定された位置でコンテンツの上に浮かんでいます。これは、FABボタンを[fab](./fab)コンポーネントで包むことで実現されます。もしボタンがfabで包まれていない場合は、コンテンツと一緒にスクロールします。
-
+使用例については、[fab documentation](./fab)を参照してください。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
diff --git a/docs/api/fab-list.md b/docs/api/fab-list.md
index 99b7b7ddb18..0d695a34503 100644
--- a/docs/api/fab-list.md
+++ b/docs/api/fab-list.md
@@ -1,345 +1,34 @@
---
title: "ion-fab-list"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/fab-list/props.md';
-import Events from '@site/static/auto-generated/fab-list/events.md';
-import Methods from '@site/static/auto-generated/fab-list/methods.md';
-import Parts from '@site/static/auto-generated/fab-list/parts.md';
-import CustomProps from '@site/static/auto-generated/fab-list/custom-props.md';
-import Slots from '@site/static/auto-generated/fab-list/slots.md';
-
-
+import Props from '@ionic-internal/component-api/v8/fab-list/props.md';
+import Events from '@ionic-internal/component-api/v8/fab-list/events.md';
+import Methods from '@ionic-internal/component-api/v8/fab-list/methods.md';
+import Parts from '@ionic-internal/component-api/v8/fab-list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/fab-list/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/fab-list/slots.md';
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-
-The `ion-fab-list` element is a container for multiple fab buttons. This collection of fab buttons contains actions related to the main fab button and is flung out on click. To specify what side the buttons should appear on, set the `side` property to 'start', 'end', 'top', 'bottom'
-
-
-
-## Usage
-
-
-
-
-
-```html
-
- Share
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
-
-
-
-
-
-```html
-
- Share
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react';
-import { logoFacebook, logoTwitter, logoYoutube, logoPwa, logoNpm, logoIonic, logoGithub, logoJavascript, logoAngular, logoVimeo, logoChrome, logoReact } from 'ionicons/icons';
-
-export const FabListExample: React.FC = () => (
-
-
- Share
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'fab-list-example',
- styleUrl: 'fab-list-example.css'
-})
-export class FabListExample {
- render() {
- return [
-
- Share
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ];
- }
-}
-```
-
-
-
-
-
-
-```html
-
-
- Share
-
-
- Facebook
- Twitter
- Youtube
-
-
-
- Vimeo
-
-
-
-
-
-
-```
-
-
-
+`ion-fab-list` 要素は、複数のfab buttonのコンテナです。この一連のfab buttonには、メインのfab buttonに関連するアクションが含まれ、メインのfab buttonをクリックすると表示されます。ボタンを表示する方向を指定するためには、 `side` プロパティを'start', 'end', 'top', 'bottom' に設定します。
-
+使用例については、[fab documentation](./fab)を参照してください。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
diff --git a/docs/api/fab.md b/docs/api/fab.md
index 6c8edec36cd..f16fdaed4a2 100644
--- a/docs/api/fab.md
+++ b/docs/api/fab.md
@@ -1,642 +1,130 @@
---
title: "ion-fab"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/fab/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/fab/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/fab/props.md';
-import Events from '@site/static/auto-generated/fab/events.md';
-import Methods from '@site/static/auto-generated/fab/methods.md';
-import Parts from '@site/static/auto-generated/fab/parts.md';
-import CustomProps from '@site/static/auto-generated/fab/custom-props.md';
-import Slots from '@site/static/auto-generated/fab/slots.md';
+import Props from '@ionic-internal/component-api/v8/fab/props.md';
+import Events from '@ionic-internal/component-api/v8/fab/events.md';
+import Methods from '@ionic-internal/component-api/v8/fab/methods.md';
+import Parts from '@ionic-internal/component-api/v8/fab/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/fab/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/fab/slots.md';
- ion-fab: Floating Action Button for Android and iOS Ionic Apps
-
+ ion-fab: Ionic Floating Action Button for Android and iOS
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-
-Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several [fab-list](fab-list.md) elements with different side values.
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
- Header
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Footer
-
-
-```
+Fabは、1つ以上の[fabボタン](./fab-button)を含むコンテナ要素です。それらはコンテンツと一緒にスクロールしない固定位置に配置されるべきです。Fabは1つのメインFabボタンを持つべきです。また、メインファブボタンがクリックされたときに表示される関連ボタンを含む1つ以上の[fabリスト](./fab-list)を含むことができます。
+## 基本的な使い方
-
-
-
-
-
-```html
-
-
- Header
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Footer
-
-
-```
+import BasicUsage from '@site/static/usage/v8/fab/basic/index.md';
+
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonContent, IonHeader, IonFooter, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react';
-import { add, settings, share, person, arrowForwardCircle, arrowBackCircle, arrowUpCircle, logoVimeo, logoFacebook, logoInstagram, logoTwitter } from 'ionicons/icons';
-
-export const FabExamples: React.FC = () => {
- return (
-
-
-
- Header
-
-
-
- {/*-- fab placed to the top end --*/}
-
-
-
-
-
-
- {/*-- fab placed to the bottom end --*/}
-
-
-
-
-
-
- {/*-- fab placed to the top start --*/}
-
-
-
-
-
-
- {/*-- fab placed to the bottom start --*/}
-
-
-
-
-
-
- {/*-- fab placed to the (vertical) center and start --*/}
-
-
-
-
-
-
- {/*-- fab placed to the (vertical) center and end --*/}
-
-
-
-
-
-
- {/*-- fab placed to the top and end and on the top edge of the content overlapping header --*/}
-
-
-
-
-
-
- {/*-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right --*/}
-
-
-
-
-
-
-
-
-
- {/*-- fab placed in the center of the content with a list on each side --*/}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Footer
-
-
-
- );
-};
-```
+## List Side
+
+[fabリスト](./fab-list)コンポーネントの`side`プロパティは、メインfabボタンと相対的に表示される場所を制御します。一つのfabは、`side`の値が全て異なる限り、複数のfabリストを持つことができます。
+
+import ListSide from '@site/static/usage/v8/fab/list-side/index.md';
+
+
+
+## ポジション
+
+fabを固定位置に配置するためには、外側の [content](./content) コンポーネントの `fixed` スロットに割り当てる必要があります。vertical`とhorizontal`のプロップを使用して、ビューポートでのfabの配置を制御します。edge`プロップは、アプリのヘッダーやフッターにfabボタンが重なるようにします。
+
+import Positioning from '@site/static/usage/v8/fab/positioning/index.md';
+
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'fab-example',
- styleUrl: 'fab-example.css'
-})
-export class FabExample {
- render() {
- return [
-
-
- Header
-
- ,
-
-
- {/* fab placed to the top end */}
-
-
-
-
-
-
- {/* fab placed to the bottom end */}
-
-
-
-
-
-
- {/* fab placed to the top start */}
-
-
-
-
-
-
- {/* fab placed to the bottom start */}
-
-
-
-
-
-
- {/* fab placed to the (vertical) center and start */}
-
-
-
-
-
-
- {/* fab placed to the (vertical) center and end */}
-
-
-
-
-
-
- {/* fab placed to the top and end and on the top edge of the content overlapping header */}
-
-
-
-
-
-
- {/* fab placed to the bottom and start and on the bottom edge of content overlapping footer with a list to the right */}
-
-
-
-
-
-
-
-
-
- {/* fab placed in the center of the content with a list on each side */}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ,
-
-
-
-
- Footer
-
-
-
- ];
- }
+### セーフエリア
+
+`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)；
}
```
-
-
-
-
-
-```html
-
-
-
- Header
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Footer
-
-
-
-
-
+また、`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/v8/fab/safe-area/index.md';
+
+
+
+### 無限リストとの相対関係
+
+無限にスクロールするリストなど、ビューに多くのインタラクティブ要素が含まれるシナリオでは、フローティングアクションボタン(FAB)がDOM内のすべてのアイテムの下に配置されていると、ユーザーがフローティングアクションボタンに移動するのが難しい場合があります。
+
+[Content](./content)の `fixedSlotPlacement` プロパティを `before` に設定することで、FABはDOM内のメインコンテンツの前に配置されます。これにより、他のインタラクティブ要素がフォーカスを受ける前にFABがキーボードフォーカスを受けるようになり、ユーザがFABにアクセスしやすくなります。
+
+import BeforeContent from '@site/static/usage/v8/fab/before-content/index.md';
+
+
+
+## ボタンサイズ
+
+メインファブボタンの `size` プロパティを `"small"` に設定すると、ミニサイズで描画されます。なお、このプロパティは内側のファブボタンで使用した場合は効果がありません。
+
+import ButtonSizing from '@site/static/usage/v8/fab/button-sizing/index.md';
+
+
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v8/fab/theming/colors/index.md';
+
+
+
+## CSSカスタムプロパティ
+
+import CSSCustomProperties from '@site/static/usage/v8/fab/theming/css-custom-properties/index.md';
+
+
+
+### CSS Shadow Parts
+
+import CSSShadowParts from '@site/static/usage/v8/fab/theming/css-shadow-parts/index.md';
+
+
+
+## アクセシビリティ
-
+### ラベル
-
+FABはアイコンのみを含むことができるため、開発者は各`ion-fab-button`インスタンスに `aria-label` を提供しなければなりません。このラベルがなければ、支援技術は各ボタンの目的を告知することができません。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/footer.md b/docs/api/footer.md
index c25ef97b48b..14e0ec0f592 100644
--- a/docs/api/footer.md
+++ b/docs/api/footer.md
@@ -1,262 +1,79 @@
---
title: "ion-footer"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/footer/props.md';
-import Events from '@site/static/auto-generated/footer/events.md';
-import Methods from '@site/static/auto-generated/footer/methods.md';
-import Parts from '@site/static/auto-generated/footer/parts.md';
-import CustomProps from '@site/static/auto-generated/footer/custom-props.md';
-import Slots from '@site/static/auto-generated/footer/slots.md';
+import Props from '@ionic-internal/component-api/v8/footer/props.md';
+import Events from '@ionic-internal/component-api/v8/footer/events.md';
+import Methods from '@ionic-internal/component-api/v8/footer/methods.md';
+import Parts from '@ionic-internal/component-api/v8/footer/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/footer/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/footer/slots.md';
- Page Footer | Ionic App Footer: Wrapper Root Page Component
-
+ ion-footer: Page Footer | Ionic App Footer Root Component
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-
Contents
-
+フッターは、ページの下部に配置されるページのルートコンポーネントです。1つ以上の [ツールバー](./toolbar) のラッパーとして使用することが推奨されますが、あらゆる要素をラップするために使用することができます。ツールバーがフッターの中で使用される場合、コンテンツは正しいサイズに調整され、フッターはデバイスセーフエリアを考慮したものになります。
+## 基本的な使い方
-Footer is a root component of a page that sits at the bottom of the page.
-Footer can be a wrapper for ion-toolbar to make sure the content area is sized correctly.
+import Basic from '@site/static/usage/v8/footer/basic/index.md';
-## Fade Footer
+
-The `collapse` property can be set to `'fade'` on a page's `ion-footer` to have the background color of the toolbars fade in as users scroll. This provides the same fade effect that is found in many native iOS applications.
-### Usage with Virtual Scroll
+## 半透明のフッター
-Fade footer requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target.
+フッターは、`translucent`プロパティを設定することで、ネイティブのiOSアプリケーションに見られるような透明度に合わせることができます。フッターの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。
-```html
-
-
-
-
-
-
-
- Footer
-
-
-```
+import Translucent from '@site/static/usage/v8/footer/translucent/index.md';
+
-## Usage
+## フェードフッター
-
+多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、フッターの `collapse` プロパティを `"fade"` に設定することで実現できます。コンテンツが最後までスクロールされると、フッターの背景とボーダーはフェードアウトします。この効果は、モードが `"ios"` のときだけ適用されます。
-
+import Fade from '@site/static/usage/v8/footer/fade/index.md';
-```html
-
+
-
-
-
- Footer - No Border
-
-
-
-
- Footer
-
-
+### 仮想スクロールでの使用方法
-
-
-
- Footer
-
-
-```
+フェードフッターを正しく動作させるためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。
+import CustomScrollTarget from '@site/static/usage/v8/footer/custom-scroll-target/index.md';
-
+
+## ボーダー
-
+`"md"`モードでは、フッターは上部に `box-shadow` が表示されます。`"ios"`モードでは、上部に `border` が表示されます。これらは、フッターに `.ion-no-border` クラスを追加することで削除することができます。
-```html
-
+import NoBorder from '@site/static/usage/v8/footer/no-border/index.md';
-
-
-
- Footer - No Border
-
-
+
-
-
- Footer
-
-
-
-
-
- Footer
-
-
-```
-
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react';
-
-export const FooterExample: React.FC = () => (
- <>
-
-
- {/*-- Footer without a border --*/}
-
-
- Footer - No Border
-
-
-
-
-
- Footer
-
-
-
- {/*-- Fade Footer --*/}
-
-
- Footer
-
-
-
-);
-```
-
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'footer-example',
- styleUrl: 'footer-example.css'
-})
-export class FooterExample {
- render() {
- return [
- ,
-
- {/*-- Footer without a border --*/}
-
-
- Footer - No Border
-
- ,
-
-
-
- Footer
-
- ,
-
- {/*-- Fade Footer --*/}
-
-
- Footer
-
-
- ];
- }
-}
-```
-
-
-
-
-
-
-
-```html
-
-
-
-
-
-
- Footer - No Border
-
-
-
-
-
- Footer
-
-
-
-
-
-
- Footer
-
-
-
-
-
-```
-
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/grid.md b/docs/api/grid.md
index 000dcc16283..fa1aa126685 100644
--- a/docs/api/grid.md
+++ b/docs/api/grid.md
@@ -1,975 +1,215 @@
---
title: "ion-grid"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/grid/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/grid/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/grid/props.md';
-import Events from '@site/static/auto-generated/grid/events.md';
-import Methods from '@site/static/auto-generated/grid/methods.md';
-import Parts from '@site/static/auto-generated/grid/parts.md';
-import CustomProps from '@site/static/auto-generated/grid/custom-props.md';
-import Slots from '@site/static/auto-generated/grid/slots.md';
+import Props from '@ionic-internal/component-api/v8/grid/props.md';
+import Events from '@ionic-internal/component-api/v8/grid/events.md';
+import Methods from '@ionic-internal/component-api/v8/grid/methods.md';
+import Parts from '@ionic-internal/component-api/v8/grid/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/grid/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/grid/slots.md';
- Ion-Grid: Display Grids to Build Mobile-First Custom App Layout
-
+ ion-grid: Display Grids for Mobile-First Custom App Layout
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
+
-
+### 仮想スクロールの使用方法
+フェードヘッダーが正しく動作するためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。
-Header is a parent component that holds the toolbar component.
-It's important to note that ion-header needs to be the one of the three root elements of a page
+import CustomScrollTarget from '@site/static/usage/v8/header/custom-scroll-target/index.md';
-## Fade Header
+
-The `collapse` property can be set to `'fade'` on a page's main `ion-header` to have the background color of the toolbars fade in as users scroll. This provides the same fade effect that is found in many native iOS applications.
-This functionality can be combined with [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) as well. The `collapse="condense"` value should be set on the `ion-header` inside of your `ion-content`. The `collapse="fade"` value should be set on the `ion-header` outside of your `ion-content`.
+## Borders
-### Usage with Virtual Scroll
+`"md"`モードでは、ヘッダーの下部に `box-shadow` が表示されます。 `"ios"`モードでは、ヘッダの下部に `border` が表示されます。これらは、ヘッダーに `.ion-no-border` クラスを追加することで削除することができます。
-Fade and collapsible large titles require a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target.
+import NoBorder from '@site/static/usage/v8/header/no-border/index.md';
-```html
-
-
- Header
-
-
-
-
-
- Header
-
-
-
-
-
-
-```
-
-
-
-## Usage
-
-
-
-
+
-```html
-
-
-
-
-
- My Navigation Bar
-
-
- Subheader
-
-
-
-
-
-
- Header - No Border
-
-
-
-
-
-
- My Navigation Bar
-
-
-
-
-
-
-
- Header
-
-
-
-
-
-
- Header
-
-
-
-```
-
-
-
-
-
-
-
-```html
-
-
-
-
-
- My Navigation Bar
-
-
-
- Subheader
-
-
-
-
-
-
- Header - No Border
-
-
-
-
-
-
- My Navigation Bar
-
-
-
-
-
-
-
- Header
-
-
-
-
-
-
- Header
-
-
-
-```
-
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react';
-
-export const HeaderExample: React.FC = () => (
- <>
-
-
-
-
-
- My Navigation Bar
-
-
-
- Subheader
-
-
-
- {/*-- Header without a border --*/}
-
-
- Header - No Border
-
-
-
-
-
-
- My Navigation Bar
-
-
-
-
- {/*-- Fade Header with collapse header --*/}
-
-
- Header
-
-
-
-
-
-
- Header
-
-
-
-
-);
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'header-example',
- styleUrl: 'header-example.css'
-})
-export class HeaderExample {
- render() {
- return [
-
-
-
-
-
- My Navigation Bar
-
-
-
- Subheader
-
- ,
-
- {/*-- Header without a border --*/}
-
-
- Header - No Border
-
- ,
-
-
-
-
- My Navigation Bar
-
-
- ,
-
- {/*-- Fade Header with collapse header --*/}
-
-
- Header
-
-
-
-
-
-
- Header
-
-
-
- ];
- }
-}
-```
-
-
-
-
-
-
-
-```html
-
-
-
-
-
-
- My Navigation Bar
-
-
-
- Subheader
-
-
-
-
-
-
- Header - No Border
-
-
-
-
-
-
- My Navigation Bar
-
-
-
-
-
-
-
- Header
-
-
-
-
-
-
- Header
-
-
-
-
-
-
-```
-
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/icon.md b/docs/api/icon.md
new file mode 100644
index 00000000000..06762a5c22b
--- /dev/null
+++ b/docs/api/icon.md
@@ -0,0 +1,45 @@
+---
+title: 'ion-icon'
+---
+
+
+ ion-icon: Icon Component for Ionic Framework Apps
+
+
+
+Iconは、Ioniconsライブラリを通じて利用できるシンプルなコンポーネントで、すべてのIonic Frameworkアプリケーションにデフォルトでプリパッケージされています。Ioniconsのセットから任意のアイコン、またはカスタムSVGを表示するために使用することができます。また、サイズや色などのスタイリングもサポートされています。
+
+利用可能なアイコンのリストは ionic.io/ionicons. For more information including styling and custom SVG usage, see the Usage page をご覧ください。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v8/icon/basic/index.md';
+
+
+
+
+## アクセシビリティ
+
+純粋に装飾的なコンテンツであるアイコンは、aria-hidden="true"を持つべきです。これは、アイコンを視覚的に隠すことはできませんが、支援技術からその要素を隠すことができます。
+
+```html
+
+```
+
+
+アイコンがインタラクティブな場合は、aria-labelを追加することで代替テキストを定義する必要があります。
+
+```html
+
+```
+
+また、アイコンが説明する他の要素の中にある場合は、その要素に aria-label を付加し、 aria-hidden でアイコンを非表示とします。
+
+```html
+
+
+
+```
diff --git a/docs/api/img.md b/docs/api/img.md
index 410fa0a90fb..069e17b344c 100644
--- a/docs/api/img.md
+++ b/docs/api/img.md
@@ -1,190 +1,45 @@
---
title: "ion-img"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import Props from '@site/static/auto-generated/img/props.md';
-import Events from '@site/static/auto-generated/img/events.md';
-import Methods from '@site/static/auto-generated/img/methods.md';
-import Parts from '@site/static/auto-generated/img/parts.md';
-import CustomProps from '@site/static/auto-generated/img/custom-props.md';
-import Slots from '@site/static/auto-generated/img/slots.md';
+import Props from '@ionic-internal/component-api/v8/img/props.md';
+import Events from '@ionic-internal/component-api/v8/img/events.md';
+import Methods from '@ionic-internal/component-api/v8/img/methods.md';
+import Parts from '@ionic-internal/component-api/v8/img/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/img/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/img/slots.md';
- Img Tag to Lazy Load Images in Viewport | ion-img Tag
-
+ ion-img: Img Tag to Lazy Load Images in Viewport
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
+Img は、タグがビューポートに表示されているときに画像をLazy Loadするタグです。これは、画像が表示されているときにのみロードされるため、巨大なリストを生成する場合に非常に便利です。このコンポーネントは [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) を内部的に使用します。Intersection Observerは、最近のほとんどのブラウザでサポートされていますが、サポートされていない場合は `setTimeout` で処理されます。
+## 基本的な使い方
+import Basic from '@site/static/usage/v8/img/basic/index.md';
-Img is a tag that will lazily load an image when ever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) internally, which is supported in most modern browser, but falls back to a `setTimeout` when it is not supported.
+
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
-
-
-
- {{item.text}}
-
-
-```
-
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonList, IonItem, IonThumbnail, IonImg, IonLabel, IonContent } from '@ionic/react';
-
-type Item = {
- src: string;
- text: string;
-};
-const items: Item[] = [{ src: 'http://placekitten.com/g/200/300', text: 'a picture of a cat' }];
-
-export const ImgExample: React.FC = () => (
-
-
- {items.map((image, i) => (
-
-
-
-
- {image.text}
-
- ))}
-
-
-);
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'img-example',
- styleUrl: 'img-example.css'
-})
-export class ImgExample {
- private items = [{
- 'text': 'Item 1',
- 'src': '/path/to/external/file.png'
- }, {
- 'text': 'Item 2',
- 'src': '/path/to/external/file.png'
- }, {
- 'text': 'Item 3',
- 'src': '/path/to/external/file.png'
- }];
-
- render() {
- return [
-
- {this.items.map(item =>
-
-
-
-
- {item.text}
-
- )}
-
- ];
- }
-}
-```
-
-
-
-
-
-
-```html
-
-
-
-
-
-
- {{item.text}}
-
-
-
-
-
-```
-
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
diff --git a/docs/api/infinite-scroll-content.md b/docs/api/infinite-scroll-content.md
index 02c077e7596..7f52e086588 100644
--- a/docs/api/infinite-scroll-content.md
+++ b/docs/api/infinite-scroll-content.md
@@ -1,178 +1,33 @@
---
title: "ion-infinite-scroll-content"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/infinite-scroll-content/props.md';
-import Events from '@site/static/auto-generated/infinite-scroll-content/events.md';
-import Methods from '@site/static/auto-generated/infinite-scroll-content/methods.md';
-import Parts from '@site/static/auto-generated/infinite-scroll-content/parts.md';
-import CustomProps from '@site/static/auto-generated/infinite-scroll-content/custom-props.md';
-import Slots from '@site/static/auto-generated/infinite-scroll-content/slots.md';
-
+import Props from '@ionic-internal/component-api/v8/infinite-scroll-content/props.md';
+import Events from '@ionic-internal/component-api/v8/infinite-scroll-content/events.md';
+import Methods from '@ionic-internal/component-api/v8/infinite-scroll-content/methods.md';
+import Parts from '@ionic-internal/component-api/v8/infinite-scroll-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/infinite-scroll-content/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/infinite-scroll-content/slots.md';
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-
Contents
-
-
-
-
-
-The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties.
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
-
-
-
-
-```
-
-
-
-
-
-
-
-```html
-
-
-
-
-
-
-```
-
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonContent, IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/react';
-
-export const InfiniteScrollExample: React.FC = () => (
-
-
-
-
-
-
-);
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'infinite-scroll-content-example',
- styleUrl: 'infinite-scroll-content-example.css'
-})
-export class InfiniteScrollContentExample {
- render() {
- return [
-
-
-
-
-
-
- ];
- }
-}
-```
-
-
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/input-otp.md b/docs/api/input-otp.md
new file mode 100644
index 00000000000..147fb408f71
--- /dev/null
+++ b/docs/api/input-otp.md
@@ -0,0 +1,173 @@
+---
+title: "ion-input-otp"
+---
+import Props from '@ionic-internal/component-api/v8/input-otp/props.md';
+import Events from '@ionic-internal/component-api/v8/input-otp/events.md';
+import Methods from '@ionic-internal/component-api/v8/input-otp/methods.md';
+import Parts from '@ionic-internal/component-api/v8/input-otp/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/input-otp/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/input-otp/slots.md';
+
+
+ ion-input-otp: ワンタイムパスワード入力コンポーネント
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+Input OTP コンポーネントは、ワンタイムパスワード（OTP）入力用に設計された入力コンポーネントです。複数の入力ボックスと自動フォーカス管理をサポートし、 検証コードを入力するためのユーザーフレンドリーなインターフェイスを提供します。
+
+## 基本的な使用法
+
+このコンポーネントはデフォルトで4つの入力ボックスを提供します。入力ボックスの数は `length` プロパティを使用してカスタマイズすることができます。
+
+import Basic from '@site/static/usage/v8/input-otp/basic/index.md';
+
+
+
+## Type
+
+`type` プロパティは入力形式を決定し、数字または英数字の検証コードをサポートします。プロパティには2つの値を指定できる： `number`と `text` です。デフォルトでは `type="number"` を使用し、数字認証コードを入力を受け付けます。 `type="text"` を指定すると、英数字の入力を受け付ける。この柔軟性により、数字のみのコード（SMS 認証コードのような）や英数字のコード（バックアップコードやリカバリキーのような）など、さまざまな OTP フォーマットを扱うことができます
+
+`type` プロパティは `inputmode` 属性と `pattern` 属性の両方を自動的に設定します：
+- `type="number"` の場合：
+ - `inputmode="numeric"`を設定し、モバイルデバイスに数字キーボードを表示します。
+ - `pattern="[\p{N}]"`を設定し、数字入力のみを許可します。
+- `type="text"`の場合
+ - 標準のキーボードを表示するには `inputmode="text"` を設定します。
+ - `pattern="[\p{L}\p{N}]"` を設定し、英数字の入力を許可する。
+
+パターンの検証やカスタマイズの詳細については、[パターン](#pattern)のセクションを参照してください。
+
+import Type from '@site/static/usage/v8/input-otp/type/index.md';
+
+
+
+## Shape
+
+`shape` プロパティは、入力ボックスのボーダー半径をコントロールし、丸みを帯びたコーナーやシャープなコーナーを作成します。
+
+import Shape from '@site/static/usage/v8/input-otp/shape/index.md';
+
+
+
+## Fill
+
+`fill` プロパティは入力ボックスの背景のスタイルをコントロールし、縁取りまたは塗りつぶしの背景を提供します。
+
+import Fill from '@site/static/usage/v8/input-otp/fill/index.md';
+
+
+
+## Size
+
+`size`プロパティは入力ボックスに異なるサイズのオプションを提供します。
+
+import Size from '@site/static/usage/v8/input-otp/size/index.md';
+
+
+
+## Separators
+
+`separators` プロパティは1つ以上の入力ボックスの間に視覚的な仕切りを追加します。セパレータは3つの方法で定義できます：
+- カンマで区切られた数値の文字列 (例: `"1,3"`)
+- 数字の配列 (例: `[1, 3]`)
+- 文字列 `"all"` (すべての入力ボックスの間にセパレータを表示する)
+
+数字はセパレータが表示されるべきインデックスを表します。例えば、`"1,3"` は1番目と3番目の入力ボックスの後にセパレータを表示します。これは、入力ボックスを視覚的に区別してグループ化するために使用できますが、それでも値は1つです。
+
+import Separators from '@site/static/usage/v8/input-otp/separators/index.md';
+
+
+
+## States
+
+このコンポーネントは、入力ボックスの自動スタイリングのためのさまざまな状態をサポートしています：
+- それぞれのプロパティによる `disabled` と `readonly` 状態
+- フォームバリデーション状態： CSSクラスによって視覚的に示される `valid` と `invalid` の状態
+- Angularの場合：バリデーション状態は、フレームワークの値アクセサとフォームバリデーションによって自動的に管理されます
+- 他のフレームワークの場合: 開発者は `ion-valid`、`ion-invalid`、`ion-touched` クラスを手動で追加する必要があります
+- `onvalid` スタイルはタッチされたときのみ表示されます (`ion-touched`)
+- `ion-valid` スタイルはフォーカスされたときのみ表示されます (`has-focus`)
+
+import States from '@site/static/usage/v8/input-otp/states/index.md';
+
+
+
+## Pattern
+
+`pattern` プロパティは正規表現を使ったカスタムバリデーションを可能にします。 [文字列の正規表現](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions/Cheatsheet)または[unicodeの正規表現](https://www.regular-expressions.info/unicode.html)を使用して、許可される文字を検証することができます。 `pattern`はサブセットだけでなく、値全体にマッチする必要があります。デフォルトのパターン
+- `type="number"`: `"[\p{N}]"` スクリプト内のあらゆる種類の数値文字にマッチします。
+- `type="text"`: `"[\p{L}\p{N}]"` あらゆるスクリプトのあらゆる種類の数字と、あらゆる言語のあらゆる種類の文字にマッチします。
+
+このコンポーネントは、指定されたパターンにマッチしない文字の入力を防ぎます。開発者は、特定の入力要件に一致する独自のパターン文字列を提供することで、これらのデフォルトをオーバーライドできます。
+
+:::tip
+カスタム `pattern` を使用する場合、`type` プロパティがモバイルデバイスに表示されるキーボードを制御することを覚えておいてください：
+- 数字のみのパターンには `type="number"` を使い、数字キーボードを表示します。
+- 英数字キーボードを表示するには、文字を含むパターンには `type="text"` を使用します。
+:::
+
+import Pattern from '@site/static/usage/v8/input-otp/pattern/index.md';
+
+
+
+## Theming
+
+### Colors
+
+`color`プロパティは入力ボックスのカラーパレットを変更します。アウトライン塗りつぶしの場合、このプロパティはキャレットカラー、ハイライトカラー、ボーダーカラーを変更します。 `solid` 塗りつぶしの場合、このプロパティはキャレットカラーとハイライトカラーを変更します。
+
+:::note
+The `color` property does *not* change the text color of the input OTP. For that, use the [`--color` CSS property](#css-custom-properties-1).
+:::
+
+import Colors from '@site/static/usage/v8/input-otp/theming/colors/index.md';
+
+
+
+### CSS Custom Properties
+
+Input OTPはスコープされたカプセル化を使用しています。これは、実行時に各スタイルに追加のクラスを追加することで、CSSを自動的にスコープすることを意味します。CSSでスコープされたセレクタをオーバーライドするには、[より高い特異性](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。特定のスタイルが `fill` に基づいて適用されるため、`fill` のプロパティを個別にオーバーライドする必要があるかもしれません。
+
+import CSSProps from '@site/static/usage/v8/input-otp/theming/css-properties/index.md';
+
+
+
+## Accessibility
+
+### Keyboard Interactions
+
+Input OTPのキーボードナビゲーションは、[ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/) の複合ウィジェットに関する推奨に従っています。これは、1つのコントロールとして機能する複数のフォーカス可能な要素（入力ボックス）を含むため、複合ウィジェットとして扱われます。
+
+コンポーネントが無効になっていない場合、これらのキーボード操作はすべての `ion-input-otp` 要素に適用されます。
+
+| Key | Description |
+| --- | --- |
+| Tab | 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. |
+| Shift + Tab | 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. |
+| ArrowRight | 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. |
+| ArrowLeft | 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. |
+| 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. |
+| Backspace | In an empty box: moves focus back one box and clears its value. In a box with a value: clears that value. 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. |
+| Ctrl + V Cmd + V | 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. |
+
+## Properties
+
+
+## Events
+
+
+## Methods
+
+
+## CSS Shadow Parts
+
+
+## CSS Custom Properties
+
+
+## Slots
+
diff --git a/docs/api/input-password-toggle.md b/docs/api/input-password-toggle.md
new file mode 100644
index 00000000000..7813203667a
--- /dev/null
+++ b/docs/api/input-password-toggle.md
@@ -0,0 +1,52 @@
+---
+title: "ion-input-password-toggle"
+---
+import Props from '@ionic-internal/component-api/v8/input-password-toggle/props.md';
+import Events from '@ionic-internal/component-api/v8/input-password-toggle/events.md';
+import Methods from '@ionic-internal/component-api/v8/input-password-toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v8/input-password-toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/input-password-toggle/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/input-password-toggle/slots.md';
+
+
+ ion-input-password-toggle: Toggle the visibility of a password in Input
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+
+The InputPasswordToggle component is a companion component to [Input](./input). It allows users to toggle the visibility of text in a password input.
+
+## Basic Usage
+
+:::info
+InputPasswordToggle must be used with an [Input](./input) that has its [`type`](./input/#type) property set to either `'text'` or `'password'`.
+
+Using any other `type` will cause a warning to be logged.
+:::
+
+
+import Basic from '@site/static/usage/v8/input-password-toggle/basic/index.md';
+
+
+
+## Properties
+
+
+## Events
+
+
+## Methods
+
+
+## CSS Shadow Parts
+
+
+## CSS Custom Properties
+
+
+## Slots
+
diff --git a/docs/api/input.md b/docs/api/input.md
index 53686f74f57..7664fb62c33 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -1,380 +1,251 @@
---
title: "ion-input"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/input/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/input/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/input/props.md';
-import Events from '@site/static/auto-generated/input/events.md';
-import Methods from '@site/static/auto-generated/input/methods.md';
-import Parts from '@site/static/auto-generated/input/parts.md';
-import CustomProps from '@site/static/auto-generated/input/custom-props.md';
-import Slots from '@site/static/auto-generated/input/slots.md';
+import Props from '@ionic-internal/component-api/v8/input/props.md';
+import Events from '@ionic-internal/component-api/v8/input/events.md';
+import Methods from '@ionic-internal/component-api/v8/input/methods.md';
+import Parts from '@ionic-internal/component-api/v8/input/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/input/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/input/slots.md';
- ion-input: Custom Input Value Type Styling and CSS Properties
-
+ ion-input: Custom Input With Styling and CSS Properties
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
+input コンポーネントは、HTML input 要素のラッパーで、カスタムスタイルと追加機能を備えています。HTML入力と同じプロパティのほとんどを受け入れ、モバイルデバイスのキーボードと統合します。
+## 基本的な使い方
-The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices.
+import Basic from '@site/static/usage/v8/input/basic/index.md';
-It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, and `"url"`. It supports all standard text input events including keyup, keydown, keypress, and more.
+
-## Interfaces
-### InputChangeEventDetail
+## Types
-```typescript
-interface InputChangeEventDetail {
- value: string | undefined | null;
-}
-```
+input コンポーネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタイプの入力のみを対象としています。また、`keyup`、`keydown`、`keypress`などの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの `type` は `"text"` です。
-### InputCustomEvent
+import Types from '@site/static/usage/v8/input/types/index.md';
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
-```typescript
-interface InputCustomEvent extends CustomEvent {
- detail: InputChangeEventDetail;
- target: HTMLIonInputElement;
-}
-```
+## Labels
+ラベルは、入力を説明するために使用されるべきです。これらは視覚的に使用することができ、また、ユーザーが入力に集中しているときには、スクリーンリーダーによって読み上げられます。これにより、ユーザーは入力の意図を理解しやすくなる。Inputにはラベルを割り当てる方法がいくつかあります：
+- `label`プロパティ：プレーンテキストのラベルに使用する。
+- `label`スロット: カスタム HTML ラベルに使用する（実験的）。
+- `aria-label`: スクリーンリーダー用のラベルとして使用されるが、ラベルは表示されない。
-## Usage
+### Label Placement
-
+ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。
-
+import LabelPlacement from '@site/static/usage/v8/input/label-placement/index.md';
-```html
-
-
+
-
-
+### Label Slot （実験的）
-
-
+プレーンテキストのラベルは `label` プロパティを通して渡されるべきですが、カスタム HTML が必要な場合は、代わりに `label` スロットを通して渡すことができます。
-
-
+この機能は、[Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots) のシミュレート版に依存しているため、実験的なものとみなされていることに注意してください。その結果、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。
-
-
+import LabelSlot from '@site/static/usage/v8/input/label-slot/index.md';
-
-
+
-
-
+### No Visible Label
-
-
- Default Label
-
-
+表示するラベルが必要ない場合でも、開発者は `aria-label` を指定する必要があります。
-
- Floating Label
-
-
+import NoVisibleLabel from '@site/static/usage/v8/input/no-visible-label/index.md';
-
- Fixed Label
-
-
+
-
- Stacked Label
-
-
-```
+## Clear Options
-
+Inputsには、入力の操作方法に応じて、Inputをクリアするための2つのオプションがあります。最初の方法は `clearInput` プロパティを追加することで、Inputに `value` があるときにクリアボタンを表示します。2つ目の方法は `clearOnEdit` プロパティで、入力が編集削除された後、再度入力されるとクリアされます。 `type` が `"password"` に設定されているInputは、デフォルトで `clearOnEdit` が有効になっています。
+import Clear from '@site/static/usage/v8/input/clear/index.md';
-
+
-```html
-
-
-
-
+## Filled Inputs
-
-
+Material Design では、Inputに塗りつぶしのスタイルが用意されています。Inputの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。
-
-
+Filled inputs をiOSで使うためには、inputの `mode` を `md` に設定する必要があります。
-
-
+:::warning
+Inputs that use `fill` should not be used in an `ion-item` due to styling conflicts between the components.
+:::
-
-
+import Fill from '@site/static/usage/v8/input/fill/index.md';
-
-
+
-
-
- Default Label
-
-
-
- Floating Label
-
-
+## Helper & Error Text
-
- Fixed Label
-
-
+ヘルパーテキストとエラーテキストは、`helperText` と `errorText` プロパティを使用して入力の内部で使用することができます。エラーテキストは、 `ion-invalid` クラスと `ion-touched` クラスが `ion-input` に追加されていない限り表示されない。これにより、ユーザがデータを入力する前にエラーが表示されることはありません。
-
- Stacked Label
-
-
-```
+Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。
-
-
-
-
-
-```tsx
-import React, { useState } from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonInput, IonItem, IonLabel, IonList, IonItemDivider } from '@ionic/react';
-
-export const InputExamples: React.FC = () => {
-
- const [text, setText] = useState();
- const [number, setNumber] = useState();
-
- return (
-
-
-
- IonInput Examples
-
-
-
-
- Default Input with Placeholder
-
- setText(e.detail.value!)}>
-
-
- Input with clear button when there is a value
-
- setText(e.detail.value!)} clearInput>
-
-
- Number type input
-
- setNumber(parseInt(e.detail.value!, 10))}>
-
-
- Disabled input
-
-
-
-
- Readonly input
-
-
-
-
- Inputs with labels
-
-
- Default Label
-
-
-
-
- Floating Label
-
-
-
-
- Fixed Label
-
-
-
-
- Stacked Label
-
-
-
-
-
- );
-};
-```
+import HelperError from '@site/static/usage/v8/input/helper-error/index.md';
-
+
+## Input Counter
-
+Input Counterは、Inputの下に表示されるテキストで、入力可能な文字数のうち、何文字が入力されたかをユーザーに通知するものです。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。
-```tsx
-import { Component, h } from '@stencil/core';
+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.
-@Component({
- tag: 'input-example',
- styleUrl: 'input-example.css'
-})
-export class InputExample {
- render() {
- return [
- // Default Input
- ,
+import Counter from '@site/static/usage/v8/input/counter/index.md';
- // Input with value
- ,
+
- // Input with placeholder
- ,
+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.
- // Input with clear button when there is a value
- ,
+import CounterAlignment from '@site/static/usage/v8/input/counter-alignment/index.md';
- // Number type input
- ,
+
- // Disabled input
- ,
+## Filtering User Input
- // Readonly input
- ,
+開発者は `ionInput` イベントを使用して、キー入力などのユーザー入力に応答して入力値を更新することができます。これは、無効な文字や不要な文字をフィルタリングするのに便利です。
- // Inputs with labels
-
- Default Label
-
- ,
+ステート変数に値を格納する場合、ステート変数と `ion-input` コンポーネントの値の両方を更新することを推奨します。これにより、状態変数と `ion-input` コンポーネントの値が確実に同期されます。
-
- Floating Label
-
- ,
+import FilteringData from '@site/static/usage/v8/input/filtering/index.md';
-
- Fixed Label
-
- ,
+
-
- Stacked Label
-
-
- ];
- }
-}
+## 入力マスキング
+
+入力マスキングは、有効な入力値をサポートするように入力を制約する式です。Ionicでは、入力マスキングに[Maskito](https://maskito.dev)を使うことを推奨しています。Maskitoは、入力フィールドをマスクするための軽量で依存関係のないライブラリです。電話番号、クレジットカード、日付など、幅広いマスクをサポートしています。
+
+Maskitoを使い始めるには、ライブラリをインストールしてください：
+
+```bash
+npm install @maskito/core @maskito/{angular,react,vue}
```
-
+import Masking from '@site/static/usage/v8/input/mask/index.md';
+
+
+
+:::note
+
+Please submit bug reports with Maskito to the [Maskito Github repository](https://github.com/taiga-family/maskito/issues). For technical support, please use the [Ionic Forum](https://forum.ionicframework.com/) or [Ionic Discord](http://chat.ionicframework.com/).
+
+:::
+
+## Start and End Slots (experimental)
+
+`start`スロットと `end`スロットはInputの両側にアイコン、ボタン、接頭辞/接尾辞テキストを配置するために使用することができます。
+この機能は [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots) のシミュレート版に依存しているため、実験的なものであることに注意してください。そのため、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。
-
+:::note
+In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
-```html
-
-
-
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+:::
-
-
+import StartEndSlots from '@site/static/usage/v8/input/start-end-slots/index.md';
-
-
+
-
-
+## テーマ
-
-
+### 配色
-
-
+`color`プロパティを設定すると、各Inputのカラーパレットが変更されます。 `ios`モードでは、このプロパティはキャレットカラーを変更します。 `md`モードでは、このプロパティはキャレットカラーとハイライト/アンダーラインカラーを変更します。
-
-
+:::note
+The `color` property does *not* change the text color of the input. For that, use the [`--color` CSS property](#css-custom-properties-1).
+:::
-
-
- Default Label
-
-
+import Colors from '@site/static/usage/v8/input/theming/colors/index.md';
-
- Floating Label
-
-
+
-
- Fixed Label
-
-
+## CSSカスタムプロパティ
-
- Stacked Label
-
-
-
+Inputはscoped encapsulationを採用しており、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化します。CSSでscopedセレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。
-
+
+
+## レガシーな Input 構文からの移行
+
+Ionic 7.0では、よりシンプルなInput構文が導入されました。この新しい構文は、Inputのセットアップに必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
+
+開発者は、この移行を一度に1つのInputで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
+
+### 最新の構文の使い方
+
+最新の構文を使うには、3つのステップがあります。
+
+1. `ion-label` を削除して、代わりに `ion-input` の `label` プロパティを使用します。ラベルの配置は `ion-input` の `labelPlacement` プロパティで設定することができる。
+2. Input固有のプロパティを `ion-item` から `ion-input` に移動します。これには、`counter`、`counterFormatter`、`fill`、`shape`プロパティが含まれる。
+3. `ion-item` の `helper` と `error` スロットの使用を削除し、代わりに `ion-input` の `helperText` と `errorText` プロパティを使用します。
+
+import Migration from '@site/static/usage/v8/input/migration/index.md';
+
+
+
+### レガシー構文の使用
+
+Ionicは、アプリが最新のInput構文を使用しているかどうかをヒューリスティックに検出します。場合によっては、レガシーな構文を使い続けることが望ましいこともあります。開発者は、`ion-input`の`legacy`プロパティを`true`に設定することで、そのInputのインスタンスにレガシー構文を使用するように強制できます。
+
+## Interfaces
+
+### InputChangeEventDetail
+
+```typescript
+interface InputChangeEventDetail {
+ value: string | undefined | null;
+}
```
-
+### InputCustomEvent
+
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
+
+```typescript
+interface InputCustomEvent extends CustomEvent {
+ detail: InputChangeEventDetail;
+ target: HTMLIonInputElement;
+}
+```
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md
index 6b99a537c9f..1189a364940 100644
--- a/docs/api/item-divider.md
+++ b/docs/api/item-divider.md
@@ -1,323 +1,63 @@
---
title: "ion-item-divider"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/item-divider/props.md';
-import Events from '@site/static/auto-generated/item-divider/events.md';
-import Methods from '@site/static/auto-generated/item-divider/methods.md';
-import Parts from '@site/static/auto-generated/item-divider/parts.md';
-import CustomProps from '@site/static/auto-generated/item-divider/custom-props.md';
-import Slots from '@site/static/auto-generated/item-divider/slots.md';
+import Props from '@ionic-internal/component-api/v8/item-divider/props.md';
+import Events from '@ionic-internal/component-api/v8/item-divider/events.md';
+import Methods from '@ionic-internal/component-api/v8/item-divider/methods.md';
+import Parts from '@ionic-internal/component-api/v8/item-divider/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/item-divider/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/item-divider/slots.md';
- Item Divider | List Item Divider Block Element for Ionic Apps
-
+ ion-item-divider: Item Divider Block Element for Ionic Apps
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-
-Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead of being placed at the top of a list, they should go in between groups of items.
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
- Basic Item Divider
-
-
-
-
-
- Secondary Item Divider
-
-
-
-
-
-
-
- Section A
-
-
-
- A1
- A2
- A3
- A4
- A5
-
-
-
- Section B
-
-
-
- B1
- B2
- B3
- B4
- B5
-
-```
-
-
-
-
-
-
-
-```html
-
-
- Basic Item Divider
-
-
-
-
-
- Secondary Item Divider
-
-
-
-
-
-
-
- Section A
-
-
-
- A1
- A2
- A3
- A4
- A5
-
-
-
- Section B
-
-
-
- B1
- B2
- B3
- B4
- B5
-
-```
-
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonItemDivider, IonLabel, IonList, IonItem, IonContent } from '@ionic/react';
-
-export const ItemDividerExample: React.FC = () => (
-
-
-
- Basic Item Divider
-
-
-
-
-
- Secondary Item Divider
-
-
-
- {/*-- Item Dividers in a List --*/}
-
-
-
- Section A
-
-
-
- A1
- A2
- A3
- A4
- A5
-
-
-
- Section B
-
-
-
- B1
- B2
- B3
- B4
- B5
-
-
-);
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'item-divider-example',
- styleUrl: 'item-divider-example.css'
-})
-export class ItemDividerExample {
- render() {
- return [
-
-
- Basic Item Divider
-
- ,
-
-
-
- Secondary Item Divider
-
- ,
-
- // Item Dividers in a List
-
-
-
- Section A
-
-
-
- A1
- A2
- A3
- A4
- A5
-
-
-
- Section B
-
-
- B1
- B2
- B3
- B4
- B5
-
- ];
- }
-}
-```
+アイテムディバイダは、リスト内の [アイテム](./item) を区切るために使用できるブロック要素です。リストヘッダーと似ていますが、リストの一番上に置くだけでなく、アイテムのグループの間に置く必要があります。
-
+## 基本的な使い方
-
+import Basic from '@site/static/usage/v8/item-divider/basic/index.md';
-```html
-
-
-
- Basic Item Divider
-
-
+
-
-
- Secondary Item Divider
-
-
-
-
-
-
- Section A
-
-
+## テーマ
- A1
- A2
- A3
- A4
- A5
+### Colors
-
-
- Section B
-
-
+import Colors from '@site/static/usage/v8/item-divider/theming/colors/index.md';
- B1
- B2
- B3
- B4
- B5
-
-
+
-
-```
+## CSSカスタムプロパティ
+import CSSProps from '@site/static/usage/v8/item-divider/theming/css-properties/index.md';
-
+
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/item-group.md b/docs/api/item-group.md
index 0ee07c99ffb..4e635e8220f 100644
--- a/docs/api/item-group.md
+++ b/docs/api/item-group.md
@@ -1,660 +1,50 @@
---
title: "ion-item-group"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/item-group/props.md';
-import Events from '@site/static/auto-generated/item-group/events.md';
-import Methods from '@site/static/auto-generated/item-group/methods.md';
-import Parts from '@site/static/auto-generated/item-group/parts.md';
-import CustomProps from '@site/static/auto-generated/item-group/custom-props.md';
-import Slots from '@site/static/auto-generated/item-group/slots.md';
+import Props from '@ionic-internal/component-api/v8/item-group/props.md';
+import Events from '@ionic-internal/component-api/v8/item-group/events.md';
+import Methods from '@ionic-internal/component-api/v8/item-group/methods.md';
+import Parts from '@ionic-internal/component-api/v8/item-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/item-group/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/item-group/slots.md';
ion-item-group: Group Items to Divide into Multiple Sections
-
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-
Contents
-
-
-
-
-
-Item groups are containers that organize similar items together. They can contain item dividers to divide the items into multiple sections. They can also be used to group sliding items.
-
-
-
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
- A
-
-
-
- Angola
-
-
- Argentina
-
-
- Armenia
-
-
-
-
-
- B
-
-
-
- Bangladesh
-
-
- Belarus
-
-
- Belgium
-
-
-
-
-
-
-
-
- Fruits
-
-
-
-
-
-
-
-
-
-
-
- Favorite
-
-
-
-
-
-
-```
+## Sliding Items
+import SlidingItems from '@site/static/usage/v8/item-group/sliding-items/index.md';
-
+
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/item-option.md b/docs/api/item-option.md
index ef012820497..13cac75f832 100644
--- a/docs/api/item-option.md
+++ b/docs/api/item-option.md
@@ -1,57 +1,42 @@
---
title: "ion-item-option"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/item-option/props.md';
-import Events from '@site/static/auto-generated/item-option/events.md';
-import Methods from '@site/static/auto-generated/item-option/methods.md';
-import Parts from '@site/static/auto-generated/item-option/parts.md';
-import CustomProps from '@site/static/auto-generated/item-option/custom-props.md';
-import Slots from '@site/static/auto-generated/item-option/slots.md';
+import Props from '@ionic-internal/component-api/v8/item-option/props.md';
+import Events from '@ionic-internal/component-api/v8/item-option/events.md';
+import Methods from '@ionic-internal/component-api/v8/item-option/methods.md';
+import Parts from '@ionic-internal/component-api/v8/item-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/item-option/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/item-option/slots.md';
- ion-item-options: Option Button Components for Ionic Apps
-
+ ion-item-option: Option Button for Sliding Item in Ionic
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-The option button for an `ion-item-sliding`. Must be placed inside of an ``.
-You can combine the `ionSwipe` event and the `expandable` directive to create a full swipe
-action for the item.
+アイテムオプションコンポーネントは、スライドアイテムのためのボタンです。アイテムオプション](./item-options)の中に配置する必要があります。ionSwipe`イベントと `expandable` プロパティを組み合わせることで、アイテムの完全なスワイプアクションを作成することができます。
+詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/item-options.md b/docs/api/item-options.md
index d73d1dc5d57..7d4c557e8df 100644
--- a/docs/api/item-options.md
+++ b/docs/api/item-options.md
@@ -1,39 +1,24 @@
---
title: "ion-item-options"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/item-options/props.md';
-import Events from '@site/static/auto-generated/item-options/events.md';
-import Methods from '@site/static/auto-generated/item-options/methods.md';
-import Parts from '@site/static/auto-generated/item-options/parts.md';
-import CustomProps from '@site/static/auto-generated/item-options/custom-props.md';
-import Slots from '@site/static/auto-generated/item-options/slots.md';
+import Props from '@ionic-internal/component-api/v8/item-options/props.md';
+import Events from '@ionic-internal/component-api/v8/item-options/events.md';
+import Methods from '@ionic-internal/component-api/v8/item-options/methods.md';
+import Parts from '@ionic-internal/component-api/v8/item-options/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/item-options/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/item-options/slots.md';
ion-item-options: Option Button Components for Ionic Apps
-
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-
Contents
-
-
+アイテムオプションコンポーネントは、スライドアイテムの[アイテムオプション](./item-option)ボタンのためのコンテナです。これらのボタンは、[startまたはend](#side-description)のいずれかに配置することができます。
-The option buttons for an `ion-item-sliding`. These buttons can be placed either on the [start or end side](#side-description).
-You can combine the `ionSwipe` event plus the `expandable` directive to create a full swipe action for the item.
+詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。
## Side Description
@@ -46,20 +31,20 @@ You can combine the `ionSwipe` event plus the `expandable` directive to create a
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md
index fc9fa85a117..9d5970f9b76 100644
--- a/docs/api/item-sliding.md
+++ b/docs/api/item-sliding.md
@@ -1,67 +1,56 @@
---
title: "ion-item-sliding"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/item-sliding/props.md';
-import Events from '@site/static/auto-generated/item-sliding/events.md';
-import Methods from '@site/static/auto-generated/item-sliding/methods.md';
-import Parts from '@site/static/auto-generated/item-sliding/parts.md';
-import CustomProps from '@site/static/auto-generated/item-sliding/custom-props.md';
-import Slots from '@site/static/auto-generated/item-sliding/slots.md';
+import Props from '@ionic-internal/component-api/v8/item-sliding/props.md';
+import Events from '@ionic-internal/component-api/v8/item-sliding/events.md';
+import Methods from '@ionic-internal/component-api/v8/item-sliding/methods.md';
+import Parts from '@ionic-internal/component-api/v8/item-sliding/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/item-sliding/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/item-sliding/slots.md';
- Slide Buttons | Slide Right to Left with ion-item-sliding
-
+ ion-item-sliding: Slide Buttons | Slide Right to Left
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
+スライドアイテムには、ドラッグしてオプションボタンを表示させることができるアイテムが含まれています。子要素として [item](./item) コンポーネントが必要です。表示させるオプションはすべて [item options](./item-options) 要素に記述する必要があります。
+
-
Contents
+## 基本的な使い方
-
+スライドアイテムのオプションは、デフォルトではアイテムの `"end"` 側に配置されます。つまり、LTRでは右から左へ、RTLでは左から右へスワイプすると、オプションが表示されます。反対側に配置し、反対方向にスワイプしたときに表示されるようにするには、 [item options](./item-options) 要素の side 属性を `"start"` に設定します。アイテムオプションは最大2つまで同時に使用することができ、スワイプの方向によって2つの異なるオプションを表示させることができます。
+import Basic from '@site/static/usage/v8/item-sliding/basic/index.md';
+
-A sliding item contains an item that can be dragged to reveal buttons. It requires an [item](item.md) component as a child. All options to reveal should be placed in the [item options](item-options.md) element.
+## Icon Options
-## Swipe Direction
+[アイテムオプション](./item-option) でアイコンをテキストと一緒に配置すると、デフォルトでテキストの上にアイコンを表示します。アイコンのスロットは、利用可能な [アイテムオプションスロット](./item-option#slots) に変更することで位置を変更することが可能です。
-By default, the buttons are placed on the `"end"` side. This means that options are revealed when the sliding item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the `side` attribute to `"start"` on the [`ion-item-options`](item-options.md) element. Up to two `ion-item-options` can be used at the same time in order to reveal two different sets of options depending on the swiping direction.
+import Icons from '@site/static/usage/v8/item-sliding/icons/index.md';
+
-## Options Layout
-By default if an icon is placed with text in the [item option](item-option.md), it will display the icon on top of the text, but the icon slot can be changed to any of the following to position it in the option.
+## 拡張可能なオプション
-| Slot | Description |
-| ----------- | ------------------------------------------------------------------------ |
-| `start` | In LTR, start is the left side of the button, and in RTL it is the right |
-| `top` | The icon is above the text |
-| `icon-only` | The icon is the only content of the button |
-| `bottom` | The icon is below the text |
-| `end` | In LTR, end is the right side of the button, and in RTL it is the left |
+オプションは、スワイプがあるポイントを超えると、親となる `ion-item` の幅いっぱいに展開されます。これは、[item options](./item-options) の `ionSwipe` イベントと組み合わせることで、アイテムが完全にスワイプされたときにメソッドを呼び出すことができます。
+import Expandable from '@site/static/usage/v8/item-sliding/expandable/index.md';
-## Expandable Options
+
-Options can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the `ionSwipe` event to call methods on the class.
## Interfaces
### ItemSlidingCustomEvent
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
```typescript
interface ItemSlidingCustomEvent extends CustomEvent {
@@ -69,853 +58,20 @@ interface ItemSlidingCustomEvent extends CustomEvent {
}
```
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
-
-
- Favorite
- Share
-
-
-
- Item Options
-
-
-
- Unread
-
-
-
-
-
-
-
- Delete
-
-
-
-
- Expandable Options
-
-
-
-
- Archive
-
-
-
-
-
-
-
-
-
-
-
- 10:45 AM
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Sliding item with icon start options on end side */}
-
-
-
- Sliding Item, Icons Start
-
-
-
-
-
- More
-
-
-
- Archive
-
-
-
-
- {/* Sliding item with icon end options on end side */}
-
-
-
- Sliding Item, Icons End
-
-
-
-
-
- More
-
-
-
- Archive
-
-
-
-
- {/* Sliding item with icon top options on end side */}
-
-
-
- Sliding Item, Icons Top
-
-
-
-
-
- More
-
-
-
- Archive
-
-
-
-
- {/* Sliding item with icon bottom options on end side */}
-
-
-
- Sliding Item, Icons Bottom
-
-
-
-
-
- More
-
-
-
- Archive
-
-
-
-
-);
-```
-
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'item-sliding-example',
- styleUrl: 'item-sliding-example.css'
-})
-export class ItemSlidingExample {
- favorite(ev: any) {
- console.log('Favorite clicked', ev);
- }
-
- share(ev: any) {
- console.log('Favorite clicked', ev);
- }
-
- unread(ev: any) {
- console.log('Favorite clicked', ev);
- }
-
- render() {
- return [
-
- {/* Sliding item with text options on both sides */}
-
-
- this.favorite(ev)}>Favorite
- this.share(ev)}>Share
-
-
-
- Item Options
-
-
-
- this.unread(ev)}>Unread
-
-
-
- {/* Sliding item with expandable options on both sides */}
-
-
-
- Delete
-
-
-
-
- Expandable Options
-
-
-
-
- Archive
-
-
-
-
- {/* Multi-line sliding item with icon options on both sides */}
-
-
-
-
HubStruck Notifications
-
A new message in your network
-
Oceanic Next has joined your network
-
-
- 10:45 AM
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {/* Sliding item with icon start options on end side */}
-
-
-
- Sliding Item, Icons Start
-
-
-
-
-
- More
-
-
-
- Archive
-
-
-
-
- {/* Sliding item with icon end options on end side */}
-
-
-
- Sliding Item, Icons End
-
-
-
-
-
- More
-
-
-
- Archive
-
-
-
-
- {/* Sliding item with icon top options on end side */}
-
-
-
- Sliding Item, Icons Top
-
-
-
-
-
- More
-
-
-
- Archive
-
-
-
-
- {/* Sliding item with icon bottom options on end side */}
-
-
-
- Sliding Item, Icons Bottom
-
-
-
-
-
- More
-
-
-
- Archive
-
-
-
-
- ];
- }
-}
-```
-
-
-
-
-
-
-```html
-
-
-
-
-
- Favorite
- Share
-
-
-
- Item Options
-
-
-
- Unread
-
-
-
-
-
-
-
- Delete
-
-
-
-
- Expandable Options
-
-
-
-
- Archive
-
-
-
-
-
-
-
-
-
HubStruck Notifications
-
A new message in your network
-
Oceanic Next has joined your network
-
-
- 10:45 AM
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Sliding Item, Icons Start
-
-
-
-
-
- More
-
-
-
- Archive
-
-
-
-
-
-
-
-
- Sliding Item, Icons End
-
-
-
-
-
- More
-
-
-
- Archive
-
-
-
-
-
-
-
-
- Sliding Item, Icons Top
-
-
-
-
-
- More
-
-
-
- Archive
-
-
-
-
-
-
-
-
- Sliding Item, Icons Bottom
-
-
-
-
-
- More
-
-
-
- Archive
-
-
-
-
-
-
-
-```
-
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/item.md b/docs/api/item.md
index f0ffefc9f1a..ae23c687b98 100644
--- a/docs/api/item.md
+++ b/docs/api/item.md
@@ -1,2143 +1,295 @@
---
title: "ion-item"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/item/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/item/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Props from '@ionic-internal/component-api/v8/item/props.md';
+import Events from '@ionic-internal/component-api/v8/item/events.md';
+import Methods from '@ionic-internal/component-api/v8/item/methods.md';
+import Parts from '@ionic-internal/component-api/v8/item/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/item/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/item/slots.md';
-import Props from '@site/static/auto-generated/item/props.md';
-import Events from '@site/static/auto-generated/item/events.md';
-import Methods from '@site/static/auto-generated/item/methods.md';
-import Parts from '@site/static/auto-generated/item/parts.md';
-import CustomProps from '@site/static/auto-generated/item/custom-props.md';
-import Slots from '@site/static/auto-generated/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
-
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
+アイテムは、テキスト、アイコン、アバター、画像、Input、その他のネイティブまたはカスタム要素を含むことができる要素です。アイテムは他のアイテムと一緒に[リスト](./list)の行としてのみ使用してください。アイテムはスワイプ、削除、並び替え、編集などができます。
-
+## 基本的な使い方
+アイテムはテキストを左寄せにし、テキストがアイテムより幅が広い場合は省略記号を追加しています。この動作は、Ionic Framework が提供する CSS Utilities を使って変更することができます。例えば、以下の例では `.ion-text-nowrap` を使っています。テキストを変換するためにアイテムに追加できる他のクラスについては、[CSS Utilities Documentation](/docs/layout/css-utilities) を参照してください。
-Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a list with other items. Items can be swiped, deleted, reordered, edited, and more.
+import Basic from '@site/static/usage/v8/item/basic/index.md';
-## Clickable Items
+
-An item is considered "clickable" if it has an `href` or `button` property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in `md` mode, has a highlight when activated in `ios` mode, and has a [detail arrow](#detail-arrows) by default in `ios` mode.
-## Detail Arrows
+## コンテンツの種類
-By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`.
+リスト内のアイテムは様々な形をとりますが、一般的にビジュアル、テキスト、メタデータ、アクション、コントロールの5つの異なるコンテンツタイプをサポートします。しかし、これらのコンテンツタイプをすべて同時に使うべきではありません。以下のガイドでは、異なるコンテンツタイプと、アプリケーションでの適切な利用方法を示します。
-
-
-
-## Item Placement
-
-Item uses named [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) in order to position content. This logic makes it possible to write a complex item with simple, understandable markup without having to worry about styling and positioning the elements.
-
-The below chart details the item slots and where it will place the element inside of the item:
-
-| Slot | Description |
-|---------|-----------------------------------------------------------------------------|
-| `start` | Placed to the left of all other content in LTR, and to the `right` in RTL. |
-| `end` | Placed to the right of all other content in LTR, and to the `left` in RTL. |
-| none | Placed inside of the input wrapper. |
+}
+ doNotImage={}
+/>
+下の例では、ビジュアルをサポートする2つのリストを作成しています。最初のリストはアイコンを使い、2番目のリストはアバターを使います。ビジュアルは装飾的なものなので、すべて `aria-hidden="true"` を指定しています。さらに、これらは `start` スロットで一貫して表示されます。
-### Text Alignment
+import SupportingVisuals from '@site/static/usage/v8/item/content-types/supporting-visuals/index.md';
-Items left align text and add an ellipsis when the text is wider than the item. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for classes that can be added to `` to transform the text.
+
+### テキスト
-## Input Highlight
+テキスト・コンテンツ・タイプには、フォーム制御ラベルやその他の可視テキストが含まれます。このテキストは項目の意図を示す役割を果たします。テキストは短く、要点をまとめるようにしてください。
-### Highlight Height
+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={}
+/>
-Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`. For more information on setting CSS properties, see the [theming documentation](/docs/theming/css-variables).
+下の例では、さまざまなタイプのテキストでリストを作成しています。"First Name"と "Last Name "のラベルは、テキスト入力に何を入力すべきかを示しています。
-### Highlight Color
+トグルの "Allow Notifications"ラベルの下には、ユーザーが通知を無効にできることを示すテキストが追加されています。このテキストは短いので、アイテムの内側に配置されています。
-The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the `primary` color. If the input is valid it will use the `success` color, and invalid inputs will use the `danger` color. See the [CSS Custom Properties](#css-custom-properties) section below for the highlight color variables.
+そのリストの下には、 [Note](./note) の下に長いテキストを含むtextareaを含む別のリストがあります。textareaは、長いテキストが他のフィールドではなく、textareaに関連付けられていることを明らかにするために、それ自身のリストに配置されました。
-### Counter Formatter
+import Text from '@site/static/usage/v8/item/content-types/text/index.md';
-When using `counter`, the default behavior is to format the value that gets displayed as `itemLength / maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property. See the [Usage](#usage) section for an example.
+
+### メタデータ
+メタデータは、ステータステキストやカウントのようなアイテムの追加コンテキストを提供します。Badge](./badge)や[Note](./note)のようなコンポーネントは、メタデータを表示する素晴らしい方法です。
+}
+ doNotImage={}
+/>
-## Usage
+}
+ cautionImage={}
+/>
-
+以下の例では、異なる種類のメタデータを持つ2つのリストを作成している。最初のリストは[Note](./note)を使って、それぞれのToDoリストにいくつのタスクがあるかを表示している。
-
+つ目のリストは、iOSのメールアプリを真似て受信トレイを表示しています。このリストでは、"開始"スロットに "未読メッセージ"インジケータ、"終了"スロットにタイムスタンプとカスタム詳細アイコンを含むカスタムメタデータを使用しています。"未読メッセージ"インジケータは、未読メッセージにユーザーの注意を引くために青くハイライトされ、タイムスタンプはより控えめです。
-```html
-
-
-
- Item
-
-
+import Metadata from '@site/static/usage/v8/item/content-types/metadata/index.md';
-
-
-
- Button Item
-
-
+
-
-
-
- Anchor Item
-
-
+### アクション
-
-
- Secondary Color Item
-
-
-```
+アクションは、アクティブにすると何かをするインタラクティブな要素です。アイテムは1行に複数のアクションを表示することができます。しかし、開発者は、各アクションのタップターゲットが十分に大きいことを確認する必要があります。
-### Detail Arrows
-
-```html
-
-
- Standard Item with Detail Arrow
-
-
-
-
-
- Button Item with Detail Arrow
-
-
-
-
-
- Anchor Item with no Detail Arrow
-
-
-```
+開発者は、入れ子になったインタラクティブ機能を作成することは避けるべきです。例えば、 `button` プロパティが `true` に設定されている場合、開発者はアイテムのメインコンテンツ内にボタンを追加することを避けるべきです。
-### List Items
-
-```html
-
-
-
- Item
-
-
-
-
-
- No Lines Item
-
-
-
-
-
- Multiline text that should wrap when it is too long
- to fit on one line in the item.
-
-
-
-
-
-
-
H3 Primary Title
-
-
Paragraph line 1
-
-
Paragraph line 2 secondary
-
-
-
-
-
-
- Item with Full Lines
-
-
-
-
-```
+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={}
+/>
-### Item Lines
-
-```html
-
-
- Item Lines Inset
-
-
-
-
- Item Lines Full
-
-
-
-
- Item Lines None
-
-
-
-
-
- Full Lines Item 1
-
-
-
- Full Lines Item 2
-
-
-
-
-
-
- Inset Lines Item 1
-
-
-
- Inset Lines Item 2
-
-
-
-
-
-
- No lines Item 1
-
-
-
- No lines Item 2
-
-
-
- No lines Item 3
-
-
-```
+下の例では、連絡先のリストを作成しています。各項目は、その項目の完全な連絡先ページに移動するためのスタブボタンです。各項目には、ユーザーが項目をスワイプすることで表示できる追加アクションがあります。
+import Actions from '@site/static/usage/v8/item/content-types/actions/index.md';
-### Media Items
-
-```html
-
-
-
-
-
- Avatar Start, Button Item
-
-
-
-
-
- Thumbnail End, Anchor Item
-
-
-
-
-
-
-
-
-
-
-
-
H2 Title Text
-
Button on right
-
- View
-
-
-
-
-
-
-
-
H3 Title Text
-
Icon on right
-
-
-
-```
+
-### Buttons in Items
-
-```html
-
-
- Start
-
- Button Start/End
-
- End
-
-
-
-
-
- Start Icon
-
-
- Buttons with Icons
-
-
- End Icon
-
-
-
-
-
-
-
- Icon only Buttons
-
-
-
-
-```
+### コントロール
-### Icons in Items
-
-```html
-
-
- Icon End
-
-
-
-
-
-
- Large Icon End
-
-
-
-
-
-
- Small Icon End
-
-
-
-
-
-
-
- Icon Start
-
-
-
-
-
- Two Icons End
-
-
-
-
-```
+コントロールは、チェックボックス、入力、ラジオなどのフォームコンポーネントです。リスト内の各項目は、画面スペースの制約上、最大でも2つのコントロールを持つ必要があります。
-### Item Inputs
-
-```html
-
- Datetime
-
-
-
-
- Select
-
- No Game Console
- NES
- Nintendo64
- PlayStation
- Sega Genesis
- Sega Saturn
- SNES
-
-
-
-
- Toggle
-
-
-
-
- Floating Input
-
-
-
-
- Input (placeholder)
-
-
-
-
- Input (Fill: Solid)
-
-
-
-
- Input (Fill: Outline)
-
-
-
-
- Helper and Error Text
-
- Helper Text
- Error Text
-
-
-
- Checkbox
-
-
-
-
- Range
-
-
-```
+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={}
+/>
-### Item Counter
+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={}
+/>
-```html
-
- Counter
-
-
-```
+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={}
+/>
-### Item Counter Formatter
+以下の例では、ToDoタスクのリストを作成しています。それぞれの項目にはチェックボックスと入力があります。チェックボックスはユーザーがタスクを完了としてマークできるようにし、入力はユーザーがタスクの名前を変更できるようにします。
-```html
-
- Counter
-
-
+import Controls from '@site/static/usage/v8/item/content-types/controls/index.md';
-```
+
-```typescript
-import { Component } from '@angular/core';
+## クリック可能なItems
-@Component({…})
-export class MyComponent {
-
- counterFormatter(inputLength: number, maxLength: number) {
- return `${maxLength - inputLength} characters remaining`;
- }
-}
+`href` か `button` プロパティが設定されている場合、itemは "clickable（クリック可能）" と見なされます。clickableなitemsには、インタラクティブに操作できることを示す視覚的な違いがいくつかあります。たとえば、clickableなitemは、`md` modeではrippleエフェクトを持ち、`ios` modeではハイライト表示され、`ios` modeでの [detail arrow](/#detail-arrows) が表示されます。
-```
+import Clickable from '@site/static/usage/v8/item/clickable/index.md';
+
-
+## Detail Arrows
-
+デフォルトでは、[clickableなitems](/#clickable-items) は、`ios` modeで右矢印アイコンを表示します。clickableな要素の右矢印アイコンを非表示にするには、 `detail` プロパティを `false` に設定します。自動的に表示されない項目に右矢印アイコンを表示するには、`detail`プロパティを `true` に設定します。
-```html
-
-
-
- Item
-
-
+import DetailArrows from '@site/static/usage/v8/item/detail-arrows/index.md';
-
-
-
- Button Item
-
-
+
-
-
-
- Anchor Item
-
-
-
-
- Secondary Color Item
-
-
-```
+
-
- Item Lines Inset
-
-
-
-
- Item Lines Full
-
-
-
-
- Item Lines None
-
-
-
-
-
- Full Lines Item 1
-
-
-
- Full Lines Item 2
-
-
-
-
-
-
- Inset Lines Item 1
-
-
-
- Inset Lines Item 2
-
-
-
-
-
-
- No lines Item 1
-
-
-
- No lines Item 2
-
-
-
- No lines Item 3
-
-
+```css
+--item-detail-push-show: true;
```
+See the [theming documentation](/docs/theming/css-variables) for more information.
-### Media Items
-
-```html
-
-
-
-
-
- Avatar Start, Button Item
-
-
-
-
-
- Thumbnail End, Anchor Item
-
-
-
-
-
-
-
-
-
-
-
-
H2 Title Text
-
Button on right
-
- View
-
-
-
-
-
-
-
-
H3 Title Text
-
Icon on right
-
-
-
-```
+-->
-### Buttons in Items
-
-```html
-
-
- Start
-
- Button Start/End
-
- End
-
-
-
-
-
- Start Icon
-
-
- Buttons with Icons
-
-
- End Icon
-
-
-
-
-
-
-
- Icon only Buttons
-
-
-
-
-```
-### Icons in Items
-
-```html
-
-
- Icon End
-
-
-
-
-
-
- Large Icon End
-
-
-
-
-
-
- Small Icon End
-
-
-
-
-
-
-
- Icon Start
-
-
-
-
-
- Two Icons End
-
-
-
-
-```
+## Item Lines
-### Item Inputs
-
-```html
-
- Datetime
-
-
-
-
- Select
-
- No Game Console
- NES
- Nintendo64
- PlayStation
- Sega Genesis
- Sega Saturn
- SNES
-
-
-
-
- Toggle
-
-
-
-
- Floating Input
-
-
-
-
- Input (placeholder)
-
-
-
-
- Input (Fill: Solid)
-
-
-
-
- Input (Fill: Outline)
-
-
-
-
- Helper and Error Text
-
- Helper Text
- Error Text
-
-
-
- Checkbox
-
-
-
-
- Range
-
-
-```
+アイテムはデフォルトで下部のボーダーを挿入して表示します。ボーダーは左側にパディングを持ち、 `"start"` スロットにスロットされたコンテンツの下に表示されることはありません。 `lines` プロパティを `"full"` または `"none"` に変更すると、それぞれ全幅のボーダーが表示され、ボーダーを表示しないようになります。
-### Item Counter
+import Lines from '@site/static/usage/v8/item/lines/index.md';
-```html
-
- Counter
-
-
-```
+
-### Item Counter Formatter
+## Buttons in Items
-```html
-
- Counter
-
-
+Buttonsは、アイテムの外側にあるときよりも、アイテムの内側にあるときの方が小さくスタイルされます。ボタンのサイズをアイテムの外側のボタンと同じにするには、`size`属性に`"default"`を設定します。
-
+import Buttons from '@site/static/usage/v8/item/buttons/index.md';
-```
+
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonDatetime, IonSelect, IonSelectOption, IonToggle, IonInput, IonCheckbox, IonRange, IonNote } from '@ionic/react';
-import { closeCircle, home, star, navigate, informationCircle, checkmarkCircle, shuffle } from 'ionicons/icons';
-
-export const ItemExamples: React.FC = () => {
- return (
-
-
-
- ItemExamples
-
-
-
- {/*-- Default Item --*/}
-
-
- Item
-
-
-
- {/*-- Item as a Button --*/}
- { }}>
-
- Button Item
-
-
-
- {/*-- Item as an Anchor --*/}
-
-
- Anchor Item
-
-
-
-
-
- Secondary Color Item
-
-
-
- {/*-- Detail Arrows --*/}
-
-
- Standard Item with Detail Arrow
-
-
-
- { }} detail>
-
- Button Item with Detail Arrow
-
-
-
-
-
- Anchor Item with no Detail Arrow
-
-
-
-
-
-
- Item
-
-
-
-
-
- No Lines Item
-
-
-
-
-
- Multiline text that should wrap when it is too long
- to fit on one line in the item.
-
-
-
-
-
-
-
-
-
-
-
-```
+### キーボードインタラクション
-### Buttons in Items
-
-```html
-
-
-
- Start
-
- Button Start/End
-
- End
-
-
-
-
-
- Start Icon
-
-
- Buttons with Icons
-
-
- End Icon
-
-
-
-
-
-
-
- Icon only Buttons
-
-
-
-
-
-```
+An `` has the following keyboard interactions when any of these conditions are met:
+- The `button` property is set to `"true"`, rendering a native `
+When an `` renders a native `` element, the keyboard interactions follow the same pattern as the [link role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/link_role):
-
+| Key | Description |
+| ---------------- | ---------------------------------------------------------------------------------------- |
+| Enter | Activates the item, navigating to the linked page or moving focus to the in-page target. |
## Properties
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/label.md b/docs/api/label.md
index 20c2525fe83..db2d8284e5b 100644
--- a/docs/api/label.md
+++ b/docs/api/label.md
@@ -1,408 +1,61 @@
---
title: "ion-label"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/label/props.md';
-import Events from '@site/static/auto-generated/label/events.md';
-import Methods from '@site/static/auto-generated/label/methods.md';
-import Parts from '@site/static/auto-generated/label/parts.md';
-import CustomProps from '@site/static/auto-generated/label/custom-props.md';
-import Slots from '@site/static/auto-generated/label/slots.md';
+import Props from '@ionic-internal/component-api/v8/label/props.md';
+import Events from '@ionic-internal/component-api/v8/label/events.md';
+import Methods from '@ionic-internal/component-api/v8/label/methods.md';
+import Parts from '@ionic-internal/component-api/v8/label/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/label/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/label/slots.md';
- Item Label Color and Properties for Applications | ion-label
-
+ ion-label: Item Label Color and Properties for Applications
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-
-Label is a wrapper element that can be used in combination with `ion-item`, `ion-input`, `ion-toggle`, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating.
-
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-Label
-
-
-Primary Label
-Secondary Label
-Danger Label
-Light Label
-Dark Label
-
-
-
- Default Item
-
-
-
-
- Multi-line text that should wrap when it is too long
- to fit on one line in the item.
-
-
-
-
-
- Default Input
-
-
-
-
- Fixed
-
-
-
-
- Floating
-
-
-
-
- Stacked
-
-
-
-
- Toggle
-
-
-
-
-
- Checkbox
-
-```
-
-
-
-
-
-
-
-```html
-
-Label
-
-
-Primary Label
-Secondary Label
-Danger Label
-Light Label
-Dark Label
-
-
-
- Default Item
-
-
-
-
- Multi-line text that should wrap when it is too long
- to fit on one line in the item.
-
-
-
-
-
- Default Input
-
-
-
-
- Fixed
-
-
-
-
- Floating
-
-
-
-
- Stacked
-
-
-
-
- Toggle
-
-
-
-
-
- Checkbox
-
-```
-
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react';
-
-export const LabelExample: React.FC = () => (
-
- {/*-- Default Label --*/}
- Label
-
- {/*-- Label Colors --*/}
- Primary Label
- Secondary Label
- Danger Label
- Light Label
- Dark Label
-
- {/*-- Item Labels --*/}
-
- Default Item
-
-
-
-
- Multi-line text that should wrap when it is too long
- to fit on one line in the item.
-
-
-
- {/*-- Input Labels --*/}
-
- Default Input
-
-
-
-
- Fixed
-
-
-
-
- Floating
-
-
-
-
- Stacked
-
-
-
-
- Toggle
-
-
-
-
-
- Checkbox
-
-
-);
-```
-
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'label-example',
- styleUrl: 'label-example.css'
-})
-export class LabelExample {
- render() {
- return [
- // Default Label
- Label,
-
- // Label Colors
- Primary Label,
- Secondary Label,
- Danger Label,
- Light Label,
- Dark Label,
-
- // Item Labels
-
- Default Item
- ,
-
-
-
- Multi-line text that should wrap when it is too long
- to fit on one line in the item.
-
- ,
-
- // Input Labels
-
- Default Input
-
- ,
-
-
- Fixed
-
- ,
-
-
- Floating
-
- ,
-
-
- Stacked
-
- ,
-
-
- Toggle
-
- ,
-
-
-
- Checkbox
-
- ];
- }
-}
-```
-
-
-
-
-
-
-
-```html
-
-
- Label
-
-
- Primary Label
- Secondary Label
- Danger Label
- Light Label
- Dark Label
-
-
-
- Default Item
-
+Labelは、主に[Item](./item.md)コンポーネントにテキストコンテンツを追加するために使用される要素です。Labelは、[Input](./input.md)や[Radio](./radio.md)のようなフォーム制御コンポーネントの内部で、可視ラベルを指定する場合にも使用できますが、必須ではありません。
-
-
- Multi-line text that should wrap when it is too long
- to fit on one line in the item.
-
-
+The position of the label inside of an item can be inline, fixed, stacked, or floating.
-
-
- Default Input
-
-
+## 基本的な使い方
-
- Fixed
-
-
+import Basic from '@site/static/usage/v8/label/basic/index.md';
-
- Floating
-
-
+
-
- Stacked
-
-
+## Item Labels
-
- Toggle
-
-
+import Item from '@site/static/usage/v8/label/item/index.md';
-
-
- Checkbox
-
-
+
-
-```
+### Colors
+import Colors from '@site/static/usage/v8/label/theming/colors/index.md';
-
+
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/list-header.md b/docs/api/list-header.md
index 666f90e7699..e436b1c67e4 100644
--- a/docs/api/list-header.md
+++ b/docs/api/list-header.md
@@ -1,444 +1,74 @@
---
title: "ion-list-header"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Props from '@ionic-internal/component-api/v8/list-header/props.md';
+import Events from '@ionic-internal/component-api/v8/list-header/events.md';
+import Methods from '@ionic-internal/component-api/v8/list-header/methods.md';
+import Parts from '@ionic-internal/component-api/v8/list-header/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/list-header/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/list-header/slots.md';
-import Props from '@site/static/auto-generated/list-header/props.md';
-import Events from '@site/static/auto-generated/list-header/events.md';
-import Methods from '@site/static/auto-generated/list-header/methods.md';
-import Parts from '@site/static/auto-generated/list-header/parts.md';
-import CustomProps from '@site/static/auto-generated/list-header/custom-props.md';
-import Slots from '@site/static/auto-generated/list-header/slots.md';
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
+リストヘッダーは、[リスト](./list)の内容を記述するために使用されるブロック要素です。アイテムディバイダー](./item-divider)とは異なり、リストヘッダーは[アイテム](./item)のリストの先頭で一度だけ使用する必要があります。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v8/list-header/basic/index.md';
+
+
+
+
+## リストヘッダーのボタン
+
+リストのヘッダーに [button](./button) を配置すると、リストの一部を表示し、ボタンで全リストにリダイレクトするのに便利です。
+
+import Buttons from '@site/static/usage/v8/list-header/buttons/index.md';
+
+
+
+
+## List Headerの下線
+
+リストヘッダーは、デフォルトでは下部のボーダーが表示されません。 `lines` プロパティを `"full"` または `"inset"` に変更すると、それぞれ全幅のボーダーまたは左paddingを伴う挿入ボーダーが表示されます。
+
+import Lines from '@site/static/usage/v8/list-header/lines/index.md';
+
+
+
+## テーマ
+
+### Colors
+
+import Colors from '@site/static/usage/v8/list-header/theming/colors/index.md';
+
+
+
+## CSSカスタムプロパティ
+
+import CSSProps from '@site/static/usage/v8/list-header/theming/css-properties/index.md';
+
+
+
-
-
Contents
-
-
-
-
-
-ListHeader a header component for a list.
-Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the list items.
-
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
- List Header
-
-
-
-
- New This Week
- See All
-
-
-
-
- New This Week
- See All
-
-
-
-
- New This Week
- See All
-
-
-
-
- New This Week
- See All
-
-
-
-
-
- Recent
- Clear
-
-
-
-
I got you babe
-
-
-
-
-
-
- Trending
-
-
-
-
harry styles
-
-
-
-
-
christmas
-
-
-
-
-
falling
-
-
-
-```
-
-
-
-
-
-
-
-```html
-
-
- List Header
-
-
-
-
- New This Week
- See All
-
-
-
-
- New This Week
- See All
-
-
-
-
- New This Week
- See All
-
-
-
-
- New This Week
- See All
-
-
-
-
-
- Recent
- Clear
-
-
-
-
I got you babe
-
-
-
-
-
-
- Trending
-
-
-
-
harry styles
-
-
-
-
-
christmas
-
-
-
-
-
falling
-
-
-
-```
-
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonButton, IonContent, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react';
-
-export const ListHeaderExample: React.FC = () => (
-
- {/*-- Default List Header --*/}
-
- List Header
-
-
- {/*-- List Header with Button --*/}
-
- New This Week
- See All
-
-
- {/*-- List Header with Outline Button --*/}
-
- New This Week
- See All
-
-
- {/*-- List Header Full Lines --*/}
-
- New This Week
- See All
-
-
- {/*-- List Header Inset Lines --*/}
-
- New This Week
- See All
-
-
- {/*-- List Headers in Lists --*/}
-
-
- Recent
- Clear
-
-
-
-
I got you babe
-
-
-
-
-
-
- Trending
-
-
-
-
harry styles
-
-
-
-
-
christmas
-
-
-
-
-
falling
-
-
-
-
-);
-```
-
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'list-header-example',
- styleUrl: 'list-header-example.css'
-})
-export class ListHeaderExample {
- render() {
- return [
- // Default List Header
-
- List Header
- ,
-
- // List Header with Button
-
- New This Week
- See All
- ,
-
- // List Header with Outline Button
-
- New This Week
- See All
- ,
-
- // List Header Full Lines
-
- New This Week
- See All
- ,
-
- // List Header Inset Lines
-
- New This Week
- See All
- ,
-
- // List Headers in Lists
-
-
- Recent
- Clear
-
-
-
-
I got you babe
-
-
- ,
-
-
-
- Trending
-
-
-
-
harry styles
-
-
-
-
-
christmas
-
-
-
-
-
falling
-
-
-
- ];
- }
-}
-```
-
-
-
-
-
-
-
-```html
-
-
-
- List Header
-
-
-
-
- New This Week
- See All
-
-
-
-
- New This Week
- See All
-
-
-
-
- New This Week
- See All
-
-
-
-
- New This Week
- See All
-
-
-
-
-
- Recent
- Clear
-
-
-
-
I got you babe
-
-
-
-
-
-
- Trending
-
-
-
-
harry styles
-
-
-
-
-
christmas
-
-
-
-
-
falling
-
-
-
-
-
-
-```
-
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/list.md b/docs/api/list.md
index 2ca87ee4274..d612f673907 100644
--- a/docs/api/list.md
+++ b/docs/api/list.md
@@ -1,459 +1,66 @@
---
title: "ion-list"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/list/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/list/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/list/props.md';
-import Events from '@site/static/auto-generated/list/events.md';
-import Methods from '@site/static/auto-generated/list/methods.md';
-import Parts from '@site/static/auto-generated/list/parts.md';
-import CustomProps from '@site/static/auto-generated/list/custom-props.md';
-import Slots from '@site/static/auto-generated/list/slots.md';
+import Props from '@ionic-internal/component-api/v8/list/props.md';
+import Events from '@ionic-internal/component-api/v8/list/events.md';
+import Methods from '@ionic-internal/component-api/v8/list/methods.md';
+import Parts from '@ionic-internal/component-api/v8/list/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/list/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/list/slots.md';
ion-list: Item List View Component for iOS and Android Apps
-
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-
Contents
-
-
-
-
-
-Lists are made up of multiple rows of items which can contain text, buttons, toggles,
-icons, thumbnails, and much more. Lists generally contain items with similar data content, such as images and text.
-
-Lists support several interactions including swiping items to reveal options, dragging to reorder items within the list, and deleting items.
-
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
-
- Pokémon Yellow
-
-
- Mega Man X
-
-
- The Legend of Zelda
-
-
- Pac-Man
-
-
- Super Mario World
-
-
-
-
-
-
- Input
-
-
-
- Toggle
-
-
-
- Radio
-
-
-
- Checkbox
-
-
-
-
-
-
-
-
- Item
-
-
- Unread
-
-
-
-
-
- Item
-
-
- Unread
-
-
-
-```
-
-
-
-
-
-
-```html
-
-
-
- Pokémon Yellow
-
-
- Mega Man X
-
-
- The Legend of Zelda
-
-
- Pac-Man
-
-
- Super Mario World
-
-
-
-
-
-
- Input
-
-
-
- Toggle
-
-
-
- Radio
-
-
-
- Checkbox
-
-
-
-
-
-
-
-
- Item
-
-
- Unread
-
-
-
-
-
- Item
-
-
- Unread
-
-
-
-```
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions, IonContent } from '@ionic/react';
-
-export const ListExample: React.FC = () => (
-
- {/*-- List of Text Items --*/}
-
-
- Pokémon Yellow
-
-
- Mega Man X
-
-
- The Legend of Zelda
-
-
- Pac-Man
-
-
- Super Mario World
-
-
-
- {/*-- List of Input Items --*/}
-
-
- Input
-
-
-
- Toggle
-
-
-
- Radio
-
-
-
- Checkbox
-
-
-
-
- {/*-- List of Sliding Items --*/}
-
-
-
- Item
-
-
- {}}>Unread
-
-
-
-
-
- Item
-
-
- {}}>Unread
-
-
-
-
-);
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-@Component({
- tag: 'list-example',
- styleUrl: 'list-example.css'
-})
-export class ListExample {
- unread(ev: Event) {
- console.log('Item is unread', ev);
- }
+リストは、Text、Buttons、Toggleを含むこと [アイテム](./item) の複数の行で構成されています。
+アイコンやサムネイルなど、さまざまな機能を備えています。リストには一般的に、画像やテキストなど、類似したデータ内容を持つアイテムが含まれます。
- render() {
- return [
- // List of Text Items
-
-
- Pokémon Yellow
-
-
- Mega Man X
-
-
- The Legend of Zelda
-
-
- Pac-Man
-
-
- Super Mario World
-
- ,
+リストは、アイテムをスワイプしてオプションを表示したり、ドラッグしてリスト内のアイテムを[並び替え](./reorder)したり、アイテムを削除したりするなどの操作をサポートしています。
- // List of Input Items
-
-
- Input
-
-
-
- Toggle
-
-
-
- Radio
-
-
-
- Checkbox
-
-
- ,
+## 基本的な使い方
- // List of Sliding Items
-
-
-
- Item
-
-
- this.unread(ev)}>Unread
-
-
+import Basic from '@site/static/usage/v8/list/basic/index.md';
-
-
- Item
-
-
- this.unread(ev)}>Unread
-
-
-
- ];
- }
-}
-```
+
-
+## Inset List
+リストに `inset` プロパティを追加すると、リストの周囲にマージンが適用されます。また、`ios`モードでは、リストに角丸が追加されます。
-
+import Inset from '@site/static/usage/v8/list/inset/index.md';
-```html
-
-
-
-
- Pokémon Yellow
-
-
- Mega Man X
-
-
- The Legend of Zelda
-
-
- Pac-Man
-
-
- Super Mario World
-
-
+
-
-
-
- Input
-
-
-
- Toggle
-
-
-
- Radio
-
-
-
- Checkbox
-
-
-
-
-
-
-
- Item
-
-
- Unread
-
-
+## List Lines
-
-
- Item
-
-
- Unread
-
-
-
-
+リストに `lines` プロパティを追加すると、リスト内のすべてのアイテムの下側のボーダーを調整することができます。 `"full"`に設定すると全幅のボーダーが表示され、`"inset"`に設定すると左paddingで調整されたボーダーが表示され、`none"`に設定するとボーダーが表示されません。リスト内のアイテムに `lines` プロパティが設定されている場合は、リスト上のプロパティよりもそちらが優先されます。
-
-```
+
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/loading.md b/docs/api/loading.md
index a3f495b1576..05c94846a7c 100644
--- a/docs/api/loading.md
+++ b/docs/api/loading.md
@@ -1,124 +1,60 @@
---
title: "ion-loading"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/loading/props.md';
-import Events from '@site/static/auto-generated/loading/events.md';
-import Methods from '@site/static/auto-generated/loading/methods.md';
-import Parts from '@site/static/auto-generated/loading/parts.md';
-import CustomProps from '@site/static/auto-generated/loading/custom-props.md';
-import Slots from '@site/static/auto-generated/loading/slots.md';
+import Props from '@ionic-internal/component-api/v8/loading/props.md';
+import Events from '@ionic-internal/component-api/v8/loading/events.md';
+import Methods from '@ionic-internal/component-api/v8/loading/methods.md';
+import Parts from '@ionic-internal/component-api/v8/loading/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/loading/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/loading/slots.md';
- Loading | Application Loading Indicator Overlay | ion-loading
-
+ ion-loading: Loading | Application Loading Indicator Overlay
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting `showBackdrop: false` upon creation.
+ユーザインタラクションをブロックしながらアクティビティを示すためのオーバーレイです。ローディング・インジケータはアプリのコンテンツの上に表示され、ユーザーの操作を再開するために消すことができます。オプションでbackdropが含まれており、`showBackdrop: false` で無効にすることができます。
+
+## 基本的な使い方
+
+一度表示されると、ロードインジケータはデフォルトで無期限に表示されます。開発者は、コンポーネント上で `dismiss()` メソッドを呼び出すことで、作成後にローディングインジケータを手動で解除することができます。onDidDismiss` 関数を呼び出すと、ローディングインジケータが解除された後にアクションを実行することができます。
-## Basic Usage
+また、ロードオプションの `duration` に表示するミリ秒数を渡すことで、特定の時間が経過した後にロードインジケータを自動的に解除するよう設定することもできます。
-Once presented, the loading indicator will display indefinitely by default. Developers can manually dismiss the loading indicator after creation by calling the `dismiss()` method on the component. The `onDidDismiss` function can be called to perform an action after the loading indicator is dismissed.
+### インラインロード (推奨)
-Alternatively, developers can configure the loading indicator to dismiss automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the loading options.
+import Inline from '@site/static/usage/v8/loading/inline/index.md';
+
+
### Controller
-import Controller from '@site/static/usage/loading/controller/index.md';
+import Controller from '@site/static/usage/v8/loading/controller/index.md';
-### Inline
-
-Ionic React and Ionic Vue users also have the option to use the `ion-loading` component directly in their template.
-
-
-
-
-```tsx
-import React, { useState } from 'react';
-import { IonLoading, IonButton, IonContent } from '@ionic/react';
-
-export const LoadingExample: React.FC = () => {
- const [showLoading, setShowLoading] = useState(false);
-
- return (
-
- setShowLoading(true)}>Show Loading
- setShowLoading(false)}
- message={'Please wait...'}
- duration={5000}
- />
-
- );
-};
-```
-
-
-
-```html
-
-
- Show Loading
-
-
-
-
-
-
-```
-
-
-
## Customization
-### Spinners
+### スピナー
-The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#spinner) for a full list of options.
+使用するスピナーは `spinner` プロパティを使用してカスタマイズすることができます。オプションの完全なリストは [spinner property documentation](#spinner) を参照してください。
-import Spinners from '@site/static/usage/loading/spinners/index.md';
+import Spinners from '@site/static/usage/v8/loading/spinners/index.md';
-### Theming
+### テーマ
-Loading 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.
+Loading は scoped encapsulation を使用しています。これは、実行時に各スタイルに追加のクラスを付加することで、自動的に CSS をスコープ化することを意味します。CSSでscopedセレクタをオーバーライドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。
-We recommend passing a custom class and using that to add custom styles to the host and inner elements.
+カスタムクラスを渡して、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。
-import Theming from '@site/static/usage/loading/theming/index.md';
+import Theming from '@site/static/usage/v8/loading/theming/index.md';
@@ -126,6 +62,13 @@ import Theming from '@site/static/usage/loading/theming/index.md';
`ion-loading` is presented at the root of your application, so we recommend placing any `ion-loading` styles in a global stylesheet.
:::
+## アクセシビリティ
+
+Ionicは自動的にLoadingの`role`を[`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role)に設定します。
+
+Loadingに`message`プロパティが定義されている場合、`aria-labelledby`属性は自動的にmessage要素のIDに設定されます。そうでない場合、`aria-labelledby`は設定されず、開発者は `htmlAttributes` プロパティを使用して `aria-label` を提供する必要があります。
+
+すべてのARIA属性は、Loadingの`htmlAttributes`プロパティにカスタム値を定義することによって、手動で上書きすることができます。
## Interfaces
@@ -152,19 +95,19 @@ interface LoadingOptions {
```
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md
index 39080919e9a..09d26cc2c8c 100644
--- a/docs/api/menu-button.md
+++ b/docs/api/menu-button.md
@@ -1,56 +1,42 @@
---
title: "ion-menu-button"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/menu-button/props.md';
-import Events from '@site/static/auto-generated/menu-button/events.md';
-import Methods from '@site/static/auto-generated/menu-button/methods.md';
-import Parts from '@site/static/auto-generated/menu-button/parts.md';
-import CustomProps from '@site/static/auto-generated/menu-button/custom-props.md';
-import Slots from '@site/static/auto-generated/menu-button/slots.md';
+import Props from '@ionic-internal/component-api/v8/menu-button/props.md';
+import Events from '@ionic-internal/component-api/v8/menu-button/events.md';
+import Methods from '@ionic-internal/component-api/v8/menu-button/methods.md';
+import Parts from '@ionic-internal/component-api/v8/menu-button/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/menu-button/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/menu-button/slots.md';
- Menu Button | ion-menu-button to Open an App Menu on A Page
-
+ ion-menu-button: Menu Button to Open an App Menu on a Page
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-
-Menu Button is component that automatically creates the icon and functionality to open a menu on a page.
+Menu Buttonコンポーネントは、アイコンを含み、クリックされるとメニューを開く機能を自動的に追加します。
+詳しくは、[menu](./menu)のドキュメントをご覧ください。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md
index 3d1fa90bcad..c1d1aa25648 100644
--- a/docs/api/menu-toggle.md
+++ b/docs/api/menu-toggle.md
@@ -1,219 +1,44 @@
---
title: "ion-menu-toggle"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/menu-toggle/props.md';
-import Events from '@site/static/auto-generated/menu-toggle/events.md';
-import Methods from '@site/static/auto-generated/menu-toggle/methods.md';
-import Parts from '@site/static/auto-generated/menu-toggle/parts.md';
-import CustomProps from '@site/static/auto-generated/menu-toggle/custom-props.md';
-import Slots from '@site/static/auto-generated/menu-toggle/slots.md';
+import Props from '@ionic-internal/component-api/v8/menu-toggle/props.md';
+import Events from '@ionic-internal/component-api/v8/menu-toggle/events.md';
+import Methods from '@ionic-internal/component-api/v8/menu-toggle/methods.md';
+import Parts from '@ionic-internal/component-api/v8/menu-toggle/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/menu-toggle/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/menu-toggle/slots.md';
- ion-menu-toggle | MenuToggle Component to Open/Close Active Menus
-
+ ion-menu-toggle: MenuToggle Component to Open/Close Menus
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-
-The MenuToggle component can be used to toggle a menu open or closed.
-
-By default, it's only visible when the selected menu is active. A menu is active when it can be opened/closed. If the menu is disabled or it's being presented as a split-pane, the menu is marked as non-active and ion-menu-toggle hides itself.
-
-In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` property can be set to `false`.
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
-
-
- Example Menu
-
-
-
-
- Menu Item
-
-
-
-
-
-
- Toggle Menu
-
-
-
-
-```
-
-
-
-
-
-
-
-
-```html
-
-
-
-
- Example Menu
-
-
-
-
- Menu Item
-
-
-
-
-
-
-```
+メニュートグルは、選択されたメニューが有効な場合にのみ表示されます。メニューが無効になっている場合や、分割ペインとして表示されている場合は、メニュートグルは非表示になります。常にメニュートグルを表示するには、`autoHide`プロパティを`false`に設定します。
-
+詳しくは、[menu](./menu#menu-toggle)のドキュメントを参照してください。
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/menu.md b/docs/api/menu.md
index 06da15d9de4..b085f700a3d 100644
--- a/docs/api/menu.md
+++ b/docs/api/menu.md
@@ -1,552 +1,110 @@
---
title: "ion-menu"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/menu/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/menu/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/menu/props.md';
-import Events from '@site/static/auto-generated/menu/events.md';
-import Methods from '@site/static/auto-generated/menu/methods.md';
-import Parts from '@site/static/auto-generated/menu/parts.md';
-import CustomProps from '@site/static/auto-generated/menu/custom-props.md';
-import Slots from '@site/static/auto-generated/menu/slots.md';
+import Props from '@ionic-internal/component-api/v8/menu/props.md';
+import Events from '@ionic-internal/component-api/v8/menu/events.md';
+import Methods from '@ionic-internal/component-api/v8/menu/methods.md';
+import Parts from '@ionic-internal/component-api/v8/menu/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/menu/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/menu/slots.md';
ion-menu: API Framework Docs for Types of Menu Components
-
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
+メニューコンポーネントは、現在のビューの横からスライドしてくるナビゲーションドロワーです。デフォルトでは、開始側を使用し、LTRの場合は左から、RTLの場合は右からスライドさせますが、サイドをオーバーライドすることができます。メニューの表示はモードによって異なりますが、表示タイプは利用可能なメニュータイプのいずれかに変更することができます。
+メニュー要素はルートコンテンツ要素の兄弟要素でなければなりません。コンテンツにはいくつでもメニューを付けることができる。これらのメニューはテンプレートから制御するか、`MenuController`を使用してプログラムで制御することができます。
+## 基本的な使い方
-The Menu component is a navigation drawer that slides in from the side of the current view.
-By default, it slides in from the left, but the side can be overridden.
-The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types.
-The menu element should be a sibling to the root content element.
-There can be any number of menus attached to the content.
-These can be controlled from the templates, or programmatically using the MenuController.
+import Basic from '@site/static/usage/v8/menu/basic/index.md';
-## Interfaces
+
-### MenuCustomEvent
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+## Menu Toggle
-```typescript
-interface MenuCustomEvent extends CustomEvent {
- detail: T;
- target: HTMLIonMenuElement;
-}
-```
+[menu toggle](./menu-toggle) コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。
+import MenuToggle from '@site/static/usage/v8/menu/toggle/index.md';
+
-## Usage
-
-
-
-
-
-```html
-
-
-
- Start Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
-
-
-
-
-
- Custom Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
-
-
-
-
-
- End Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
-
-
-
-```
-```typescript
-import { Component } from '@angular/core';
-import { MenuController } from '@ionic/angular';
-
-@Component({
- selector: 'menu-example',
- templateUrl: 'menu-example.html',
- styleUrls: ['./menu-example.css'],
-})
-export class MenuExample {
-
-constructor(private menu: MenuController) { }
-
- openFirst() {
- this.menu.enable(true, 'first');
- this.menu.open('first');
- }
-
- openEnd() {
- this.menu.open('end');
- }
-
- openCustom() {
- this.menu.enable(true, 'custom');
- this.menu.open('custom');
- }
-}
-```
+## Menu Types
-```css
-.my-custom-menu {
- --width: 500px;
-}
-```
+`type`プロパティは、アプリケーションでのメニューの表示方法をカスタマイズするために使用することができます。
-
-
-
-
-
-```html
-
-
-
-
- Start Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
-
-
-
-
-
- Custom Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
-
-
-
-
-
- End Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
-
-
-
-
-
- Menu - Basic
-
-
-
- Open Start Menu
- Open End Menu
- Open Custom Menu
-
-
-
-
-```
+import MenuType from '@site/static/usage/v8/menu/type/index.md';
-```javascript
-
-
-
-```
+
-```css
-.my-custom-menu {
- --width: 500px;
-}
-```
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react';
-
-export const MenuExample: React.FC = () => (
- <>
-
-
-
- Start Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
-
-
-
-
-
- Custom Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
-
-
-
-
-
- End Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
-
-
-
-);
-```
+## Menu Sides
+メニューはデフォルトでは`"start"`側に表示されます。左から右へ移動するアプリでは左側に、右から左へ移動するアプリでは右側に表示されます。メニューは`"start"`の反対側である`"end"`側に表示させることもできます。
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-import { menuController } from '@ionic/core';
-
-@Component({
- tag: 'menu-example',
- styleUrl: 'menu-example.css'
-})
-export class MenuExample {
- openFirst() {
- menuController.enable(true, 'first');
- menuController.open('first');
- }
-
- openEnd() {
- menuController.open('end');
- }
-
- openCustom() {
- menuController.enable(true, 'custom');
- menuController.open('custom');
- }
-
- render() {
- return [
-
-
-
- Start Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
- ,
-
-
-
-
- Custom Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
- ,
-
-
-
-
- End Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
- ,
-
- // A router outlet can be placed here instead
-
- this.openFirst()}>Open Start Menu
- this.openEnd()}>Open End Menu
- this.openCustom()}>Open Custom Menu
-
- ];
- }
-}
-```
+アプリ内で両サイドのメニューが必要な場合、 `MenuController` の `open` メソッドに `side` の値を渡すことでメニューを開くことができます。sideが指定されない場合は、`"start"`側のメニューが開かれる。MenuController` を使用した例については、下記の [複数メニュー](#multiple-menus) セクションを参照ください。
-```css
-.my-custom-menu {
- --width: 500px;
-}
-```
+import Sides from '@site/static/usage/v8/menu/sides/index.md';
+
+
+
+
+## 複数メニュー
+
+同じサイドに複数のメニューが存在する場合、サイドではなくIDで参照する必要があります。そうしないと、間違ったメニューがアクティブになる可能性がある。
+
+import Multiple from '@site/static/usage/v8/menu/multiple/index.md';
+
+
+
+
+## テーマ
+
+### CSS Shadow Parts
+
+import Theming from '@site/static/usage/v8/menu/theming/index.md';
-
-
-
-
-
-```html
-
-
-
-
- Start Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
-
-
-
-
-
- Custom Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
-
-
-
-
-
- End Menu
-
-
-
-
- Menu Item
- Menu Item
- Menu Item
- Menu Item
- Menu Item
-
-
-
-
-
-
-
-
-
```
-
-
-## Properties
+
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/modal.md b/docs/api/modal.md
index 2bd1b95b970..56d2ab1a9a3 100644
--- a/docs/api/modal.md
+++ b/docs/api/modal.md
@@ -1,187 +1,222 @@
---
title: "ion-modal"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/modal/props.md';
-import Events from '@site/static/auto-generated/modal/events.md';
-import Methods from '@site/static/auto-generated/modal/methods.md';
-import Parts from '@site/static/auto-generated/modal/parts.md';
-import CustomProps from '@site/static/auto-generated/modal/custom-props.md';
-import Slots from '@site/static/auto-generated/modal/slots.md';
+import Props from '@ionic-internal/component-api/v8/modal/props.md';
+import Events from '@ionic-internal/component-api/v8/modal/events.md';
+import Methods from '@ionic-internal/component-api/v8/modal/methods.md';
+import Parts from '@ionic-internal/component-api/v8/modal/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/modal/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/modal/slots.md';
ion-modal: Ionic Mobile App Custom Modal API Component
-
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-A Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases.
-## Inline Modals (Recommended)
+Modalは、アプリのコンテンツの上に表示されるダイアログであり、インタラクションを再開する前にはアプリによって消されなければならない。選択できるオプションが多い場合や、リスト内の項目をフィルタする場合、およびその他の多くのユースケースで、Selectコンポーネントとして役立ちます。
+
-`ion-modal` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the modal.
+## インラインモーダル(推奨)
-When using `ion-modal` with Angular, React, or Vue, the component you pass in will be destroyed when the modal is dismissed. As this functionality is provided by the JavaScript framework, using `ion-modal` without a JavaScript framework will not destroy the component you passed in. If this is a needed functionality, we recommend using the `modalController` instead.
+テンプレートに直接コンポーネントを記述することで、 `ion-modal` を使用することができます。これにより、モーダルを表示するために必要なハンドラの数を減らすことができます。
-import InlineModalTriggerExample from '@site/static/usage/modal/inline/basic/index.md';
+Angular、React、Vue で `ion-modal` を使用する場合、渡されたコンポーネントはモーダルが解除されると破棄されます。この機能は JavaScript フレームワークによって提供されるので、JavaScript フレームワークなしで `ion-modal` を使用しても、渡されたコンポーネントは破棄されません。この機能が必要な場合は、代わりに `modalController` を使用することをお勧めします。
+
+import InlineModalTriggerExample from '@site/static/usage/v8/modal/inline/basic/index.md';
-### Using `isOpen`
+### `isOpen` の使用
-The `isOpen` property on `ion-modal` allows developers to control the presentation state of the modal from their application state. This means when `isOpen` is set to `true` the modal will be presented and when `isOpen` is set to `false` the modal will be dismissed.
+`ion-modal` の `isOpen` プロパティを使用すると、開発者がアプリケーションの状態からモーダルの表示状態を制御することができます。つまり、 `isOpen` を `true` に設定するとモーダルが表示され、 `isOpen` を `false` に設定するとモーダルが解除されます。
-`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the modal is dismissed. Developers should listen for the `ionModalDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-modal` from being tightly coupled with the state of the application. With a one way data binding, the modal only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the modal needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
+`isOpen` は一方向のデータバインディングを使用します。つまり、モーダルが解除されたときに自動的に `false` にセットされることはありません。開発者は `ionModalDidDismiss` または `didDismiss` イベントを監視して、 `isOpen` を `false` に設定する必要があります。この理由は、`ion-modal` の内部がアプリケーションの状態と密に結合するのを防ぐためである。一方通行のデータバインディングでは、モーダルはリアクティブ変数が提供するboolean値だけを気にすればいいです。双方向のデータバインディングでは、モーダルはboolean値とリアクティブ変数の存在の両方を考慮する必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。
-import InlineModalIsOpenExample from '@site/static/usage/modal/inline/is-open/index.md';
+import InlineModalIsOpenExample from '@site/static/usage/v8/modal/inline/is-open/index.md';
-## Controller Modals
+## モーダルコントローラ
-With the `modalController` developers can present an `ion-modal` programmatically. Developers will have complete control over when a modal is presented and dismissed.
+`ModalController` を使用すると、開発者はプログラムによって `ion-modal` を表示させることができます。開発者は、モーダルの表示と非表示を完全に制御することができます。
-import ControllerExample from '@site/static/usage/modal/controller/index.md';
+import ControllerExample from '@site/static/usage/v8/modal/controller/index.md';
-## Preventing a Modal from Dismissing
+## モーダルの終了を防止する
-When entering data into a modal, it is often desirable to have a way of preventing accidental data loss. The `canDismiss` property on `ion-modal` gives developers control over when a modal is allowed to dismiss.
+モーダルにデータを入力しているとき、誤ってデータが失われないようにする方法があると便利です。 `ion-modal` の `canDismiss` プロパティは、モーダルをいつ終了させるかを開発者がコントロールできるようにします。
-There are two different ways of using the `canDismiss` property.
+canDismiss`プロパティの使用方法には、boolean値の設定とコールバック関数の設定の2種類があります。
:::note
- Note: When using a sheet modal, `canDismiss` will not be checked on swipe if there is no `0` breakpoint set. However, it will still be checked when pressing `Esc` or the hardware back button.
+ Note: シートモーダルでは、`0` ブレークポイントが設定されていない場合、スワイプ時に `canDismiss` はチェックされません。しかし、`Esc` やハードウェアのバックボタンを押すと、チェックされます。
:::
-### Setting a boolean value
+### boolean値の設定
-Developers can set `canDismiss` to a boolean value. If `canDismiss` is `true`, then the modal will close when users attempt to dismiss the modal. If `canDismiss` is `false`, then the modal will not close when users attempt to dismiss the modal.
+開発者は `canDismiss` にboolean値を設定することができます。 `canDismiss` が `true` の場合、ユーザーがモーダルを閉じようとすると、モーダルは閉じます。 `canDismiss` が `false` の場合、ユーザーがモーダルを閉じようとしても、モーダルは閉じません。
-Setting a boolean value should be used when you need to require a particular action to be taken prior to a modal being dismissed. For example, if developers want to require that a "Terms of Use" checkbox is checked prior to closing the modal, they could set `canDismiss` to `false` initially and update it to `true` when the checkbox is checked.
+boolean値を設定するのは、モーダルが終了する前に特定のアクションを実行する必要がある場合に使用する必要があります。たとえば、開発者がモーダルを閉じる前に "利用規約" チェックボックスをチェックすることを要求したい場合、最初は `canDismiss` を `false` に設定し、チェックボックスがチェックされたら `true` に更新することが可能です。
-import CanDismissBooleanExample from '@site/static/usage/modal/can-dismiss/boolean/index.md';
+import CanDismissBooleanExample from '@site/static/usage/v8/modal/can-dismiss/boolean/index.md';
-### Setting a callback function
+### コールバック関数を設定する
-Developers can set `canDismiss` to be a function. This function must return a `Promise` that resolves to either `true` or `false`. If the promise resolves to `true`, then the modal will dismiss. If the promise resolves to `false`, then the modal will not dismiss.
+開発者は `canDismiss` を関数として設定することができます。この関数は、 `true` か `false` のどちらかに解決する `Promise` を返さなければなりません。もし、約束が `true` に解決されたら、モーダルは解除されます。もし、プロミスが `false` に解決された場合、モーダルは解除されません。
-Setting a callback function should be used when you have complex dismissing criteria such as showing a confirmation dialog prior to dismissing the modal. The option that users select in this dialog can then be used to determine whether or not the modal should proceed with dismissing.
+コールバック関数を設定するのは、モーダルを終了する前に確認ダイアログを表示するなど、終了条件が複雑な場合に使用する必要があります。ユーザーがこのダイアログで選択したオプションは、モーダルの終了を続行するかどうかの判断に使用されます。
-Note that setting a callback function will cause the swipe gesture to be interrupted when using a card or sheet modal. This is because Ionic does not know what your callback function will resolve to ahead of time.
+コールバック関数を設定すると、カードまたはシートモーダルの使用時にスワイプジェスチャが中断されることに注意してください。これは、Ionicが、あなたのコールバック関数が何を解決するか事前に知らないためです。
-import CanDismissFunctionExample from '@site/static/usage/modal/can-dismiss/function/index.md';
+import CanDismissFunctionExample from '@site/static/usage/v8/modal/can-dismiss/function/index.md';
-## Types of modals
-
-### Card Modal
+### スワイプで閉じないようにする
+
+開発者は、ユーザがスワイプしてカードやシートのモーダルを閉じないようにしたい場合があります。これは `canDismiss` にコールバック関数を設定し、`role` が `gesture` でないかチェックすることで実現できます。
+
+import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/index.md';
+
+
+
+### 子コンポーネントでのdismiss動作の変更
+
+あるシナリオでは、開発者は提示されたモーダルの状態に基づいて `canDismiss` コールバックの動作をカスタマイズする必要があるかもしれません。このカスタマイズは、たとえば、モーダル内のフォームが無効な場合にモーダルが却下されないようにしたい場合に特に便利です。
-Developers can create a card modal effect where the modal appears as a card stacked on top of your app's main content. To create a card modal, developers need to set the `presentingElement` property and the `swipeToClose` properties on `ion-modal`.
+このカスタマイズを実現するために、子コンポーネントは、親コンポーネントと通信して `canDismiss` コールバックを管理する条件を更新するために、関数コールバック、イベントエミッション、その他のリアクティビティメカニズムなどのさまざまなテクニックを使用できます。
-The `presentingElement` property accepts a reference to the element that should display under your modal. This is typically a reference to `ion-router-outlet`.
+以下は、子コンポーネントが親コンポーネントとどのように通信して `canDismiss` コールバックを変更できるかを示す簡単な例です：
-The `swipeToClose` property can be used to control whether or not the card modal can be swiped to close.
+import CanDismissChildStateExample from '@site/static/usage/v8/modal/can-dismiss/child-state/index.md';
+
+
+
+## Card Modal
+
+開発者は、アプリのメインコンテンツの上にカードが積み重なったようにモーダルが表示されるカードモーダルエフェクトを作成できます。カードモーダルを作成するには、開発者は `ion-modal` に `presentingElement` プロパティを設定する必要があります。
+
+開発者は、アプリのメインコンテンツの上にカードが積み重なったように表示されるカードモーダル効果を作成することができます。カードモーダルを作成するには、開発者は `ion-modal` に `presentingElement` プロパティと `swipeToClose` プロパティを設定する必要があります。
+
+`canDismiss` プロパティを使用して、カードモーダルをスワイプして閉じることができるかどうかを制御することができます。
:::note
The card display style is only available on iOS.
:::
-import CardExample from '@site/static/usage/modal/card/basic/index.md';
+import CardExample from '@site/static/usage/v8/modal/card/basic/index.md';
-### Sheet Modal
+## Sheet Modal
-Developers can create a sheet modal effect similar to the drawer components available in maps applications. To create a sheet modal, developers need to set the `breakpoints` and `initialBreakpoint` properties on `ion-modal`.
+:::info
+[Content](./content) should be used inside of the sheet modal if you want your modal content to be scrollable.
+:::
-The `breakpoints` property accepts an array which states each breakpoint that the sheet can snap to when swiped. A `breakpoints` property of `[0, 0.5, 1]` would indicate that the sheet can be swiped to show 0% of the modal, 50% of the modal, and 100% of the modal. When the modal is swiped to 0%, the modal will be automatically dismissed.
+開発者は、マップアプリケーションで利用可能なドロワーコンポーネントに似たシートモーダルエフェクトを作成することができます。シートモーダルを作成するには、`ion-modal` の `breakpoints` プロパティと `initialBreakpoint` プロパティを設定する必要があります。
-The `initialBreakpoint` property is required so that the sheet modal knows which breakpoint to start at when presenting. The `initialBreakpoint` value must also exist in the `breakpoints` array. Given a `breakpoints` value of `[0, 0.5, 1]`, an `initialBreakpoint` value of `0.5` would be valid as `0.5` is in the `breakpoints` array. An `initialBreakpoint` value of `0.25` would not be valid as `0.25` does not exist in the `breakpoints` array.
+`breakpoints`プロパティには、スワイプしたときにシートがスナップすることができる各ブレークポイントを示す配列が渡されます。 `breakpoints` プロパティが `[0, 0.5, 1]` の場合、シートをスワイプすると、モーダルの 0%、50%、100%を表示することができることを示します。モーダルが0%にスワイプされると、モーダルは自動的にディスクローズされます。 `0` ブレークポイントが含まれていない場合、スワイプ時にモーダルを解除することはできませんが、`Esc` またはハードウェアの戻るボタンを押すことで解除することができることに注意してください。
-The `backdropBreakpoint` property can be used to customize the point at which the `ion-backdrop` will begin to fade in. This is useful when creating interfaces that have content underneath the sheet that should remain interactive. A common use case is a sheet modal that overlays a map where the map is interactive until the sheet is fully expanded.
+`initialBreakpoint` プロパティは、シート モーダルが表示されるときに、どのブレークポイントから開始するかを知るために必要なものです。 `initialBreakpoint` の値は、 `breakpoints` 配列にも存在する必要があります。例えば、 `breakpoints` の値が `[0, 0.5, 1]` である場合、 `initialBreakpoint` の値が `0.5` であれば、 `breakpoints` 配列に `0.5` が存在するため有効であると考えられます。 `0.25` は `breakpoints` 配列に存在しないので、 `initialBreakpoint` の値は無効になります。
-:::note
- Note: The `swipeToClose` property has no effect when using a sheet modal as sheet modals must be swipeable in order to be usable.
-:::
+`backdropBreakpoint` プロパティは、 `ion-backdrop` がフェードインし始めるポイントをカスタマイズするために使用することができます。これは、シートの下にインタラクティブなコンテンツがあるようなインタフェースを作成する際に便利です。よくある使用例としては、シートが完全に展開されるまでマップがインタラクティブになるような、マップをオーバーレイするシートモーダルです。
-import SheetExample from '@site/static/usage/modal/sheet/basic/index.md';
+import SheetExample from '@site/static/usage/v8/modal/sheet/basic/index.md';
-#### Interacting with background content
+### 背景コンテンツとのインタラクション
-import SheetBackgroundContentExample from '@site/static/usage/modal/sheet/background-content/index.md';
+import SheetBackgroundContentExample from '@site/static/usage/v8/modal/sheet/background-content/index.md';
-#### Handle Behavior
+### 任意の高さのシート
+
+Developers should use the `--height` CSS Variable to change the height of the sheet modal instead of changing the last breakpoint in the `breakpoints` array. The reason for this is changing the last breakpoint in the `breakpoints` array to a value less than `1` will cause some of the modal to be inaccessible outside of the viewport.
+
+The following example shows how to get a sheet modal that is automatically sized based on its content. Note that by keeping the maximum breakpoint at `1` we ensure that the entire modal is accessible in the viewport.
+
+import SheetAutoHeightExample from '@site/static/usage/v8/modal/sheet/auto-height/index.md';
-Sheet modals can optionally render a handle indicator used for dragging the sheet between breakpoints. The `handleBehavior` property can be used to configure the behavior of when the handle is activated by the user.
+
-import SheetHandleBehaviorExample from '@site/static/usage/modal/sheet/handle-behavior/index.md';
+### ハンドルの動作
+
+シートモーダルでは、ブレークポイント間でシートをドラッグするために使用されるハンドルインジケータをオプションでレンダリングすることができます。 `handleBehavior` プロパティは、ハンドルがユーザーによってアクティブにされたときの振る舞いを設定するために使用されます。
+
+import SheetHandleBehaviorExample from '@site/static/usage/v8/modal/sheet/handle-behavior/index.md';
+### Scrolling content at all breakpoints
+
+Sheet modals can be configured to allow scrolling content at all breakpoints, making them ideal for displaying content larger than the viewport. By setting the `expandToScroll` property to `false`, the content remains scrollable at every breakpoint. Otherwise, by default, scrolling is only enabled when the sheet modal is fully expanded.
+
+import SheetScrollingContentExample from '@site/static/usage/v8/modal/sheet/expand-to-scroll/index.md';
+
+
+
## Styling
-Modals are presented at the root of your application so they overlay your entire app. This behavior applies to both inline modals and modals presented from a controller. As a result, custom modal styles can not be scoped to a particular component as they will not apply to the modal. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient.
+モーダルはアプリケーションのルートで表示されるので、アプリ全体を覆うように表示されます。この動作は、インライン モーダルおよびコントローラから表示されるモーダルの両方に適用されます。その結果、カスタムのモーダルスタイルを特定のコンポーネントにスコープすることはできず、モーダルには適用されません。代わりに、スタイルはグローバルに適用する必要があります。ほとんどの開発者は、カスタムスタイルを `global.css` に配置すれば十分です。
:::note
- If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.
+IonicのAngularアプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。詳しくは、以下のAngularセクションの [Style Placement](#style-placement) をお読みください。
:::
:::note
- `ion-modal` works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of `0`. This is to avoid the effect of shadows and backdrops getting darker with each added modal. This can be changed by setting the `--box-shadow` and `--backdrop-opacity` CSS variables:
+`ion-modal` は、積み重ねられたモーダルは同じサイズであるという前提で動作します。その結果、後続の各モーダルはボックスシャドウを持たず、背景の不透明度は `0` になります。これは、モーダルが追加されるたびに影や背景が濃くなるのを避けるためです。これは、CSS 変数 `--box-shadow` と `--backdrop-opacity` を設定することで変更することができます。
:::
-```
+```
ion-modal.stack-modal {
--box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
--backdrop-opacity: var(--ion-backdrop-opacity, 0.32);
}
```
-import ThemeExample from '@site/static/usage/modal/styling/theming/index.md';
+import ThemeExample from '@site/static/usage/v8/modal/styling/theming/index.md';
-### Animations
+### アニメーション
-The enter and leave animations can be customized by using our animation builder and assigning animations to `enterAnimation` and `leaveAnimation`.
+アニメーションビルダーを使用し、`enterAnimation` と `leaveAnimation` にアニメーションを割り当てることで、表示時、非表示時のアニメーションをカスタマイズすることができます。
-import AnimationsExample from '@site/static/usage/modal/styling/animations/index.md';
+import AnimationsExample from '@site/static/usage/v8/modal/styling/animations/index.md';
## Custom Dialogs
-While `ion-modal` is most often used for full-page views, cards, or sheets, it is also possible to use it for custom dialogs. This is useful if developers need an interface that is more complex than what components such as [ion-alert](./alert) or [ion-loading](./loading) provide.
+`ion-modal`は、フルページビュー、カード、シートに使用されることが多いですが、カスタムダイアログに使用することも可能です。これは、[ion-alert](./alert)や[ion-loading](./loading)などのコンポーネントが提供するものより複雑なインターフェースを必要とする開発者に便利です。
-import CustomDialogs from '@site/static/usage/modal/custom-dialogs/index.md';
+import CustomDialogs from '@site/static/usage/v8/modal/custom-dialogs/index.md';
-A few things to keep in mind when creating custom dialogs:
+カスタムダイアログを作成する際に注意すべき点がいくつかあります。
-* `ion-content` is intended to be used in full-page modals, cards, and sheets. If your custom dialog has a dynamic or unknown size, `ion-content` should not be used.
-* Creating custom dialogs provides a way of ejecting from the default modal experience. As a result, custom dialogs should not be used with card or sheet modals.
+* `ion-content` は、フルページモダル、カード、シートで使用することを意図しています。カスタムダイアログのサイズが動的であったり、不明であったりする場合は、 `ion-content` を使用するべきではありません。
+* カスタムダイアログを作成することは、デフォルトのモーダルエクスペリエンスから逃れる方法を提供します。そのため、カスタムダイアログは、カードやシートのモーダルでは使用しないでください。
## Interfaces
### ModalOptions
-Below you will find all of the options available to you when using the `modalController`. These options should be supplied when calling `modalController.create()`.
+下記は `modalController` を使用する際に利用できるすべてのオプションです。これらのオプションは、 `modalController.create()` を呼び出す際に指定します。
```typescript
interface ModalOptions {
@@ -192,7 +227,7 @@ interface ModalOptions {
backdropDismiss?: boolean;
cssClass?: string | string[];
animated?: boolean;
- swipeToClose?: boolean;
+ canDismiss?: boolean | ((data?: any, role?: string) => Promise);
mode?: 'ios' | 'md';
keyboardClose?: boolean;
@@ -210,7 +245,7 @@ interface ModalOptions {
```
### ModalCustomEvent
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
```typescript
interface ModalCustomEvent extends CustomEvent {
@@ -218,67 +253,72 @@ interface ModalCustomEvent extends CustomEvent {
}
```
-## Accessibility
+## アクセシビリティ
+
+### Keyboard Interactions
+
+| Key | Description |
+| --------------- | ------------------- |
+| Esc | Dismisses the modal |
+
-### Keyboard Navigation
+### ラベル
-| Key | Function |
-| ----- | ------------------- |
-| `Esc` | Dismisses the modal |
+モーダルには [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) という役割があります。そのため、開発者はモーダルに適切なラベル付けを行う必要があります。モーダルが `ion-title` を使用している場合、 `ion-modal` で [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) を設定すると、内部のテキストをモーダル自体のラベルに使用することができます。モーダルに追加の説明テキストが含まれている場合、このテキストは [`aria-describedby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) を使ってモーダルと関連付けることができます。
-### Screen Readers
+### スクリーンリーダー
-Modals have the `aria-modal` attribute applied. This attribute can cause assistive technologies to limit navigation to the modal element's contents. As a result, using gestures that move to the next or previous items may not focus elements outside of the modal. This applies even when the backdrop is disabled in sheet modals using the `backdropBreakpoint` property.
+モーダルには `aria-modal` 属性が適用されています。この属性は、支援技術によるナビゲーションをモーダル要素のコンテンツに制限させることがあります。その結果、次や前の項目に移動するジェスチャを使用しても、モーダルの外側の要素にフォーカスが当たらない場合があります。これは、`backdropBreakpoint` プロパティを使用して、シート モーダルでバックドロップを無効にした場合にも当てはまります。
-Assistive technologies will not limit navigation to the modal element's contents if developers manually move focus. However, manually moving focus outside of a modal is not supported in Ionic for modals that have focus trapping enabled.
+開発者が手動でフォーカスを移動しても、アシストはモーダル要素のコンテンツへのナビゲーションを制限しません。ただし、Ionic では、フォーカスのトラッピングが有効になっているモーダルに対して、モーダルの外側に手動でフォーカスを移動することはサポートされていません。
See https://w3c.github.io/aria/#aria-modal for more information.
-### Focus Trapping
+### フォーカスのトラッピング
-When a modal is presented, focus will be trapped inside of the presented modal. Users can focus other interactive elements inside the modal but will never be able to focus interactive elements outside the modal while the modal is presented. For applications that present multiple stacked modals, focus will be trapped on the modal that was presented last.
+モーダルが表示されると、フォーカスは表示されたモーダルの内側に閉じ込められます。ユーザーは、モーダル内の他のインタラクティブ要素にフォーカスを合わせることができますが、モーダルが表示されている間は、モーダルの外側のインタラクティブ要素にフォーカスを合わせることができません。複数のスタック モーダルを表示するアプリケーションでは、最後に表示されたモーダルにフォーカスが移動します。
-Sheet modals that have had their backdrop disabled by the `backdropBreakpoint` property are not subject to focus trapping.
+`backdropBreakpoint` プロパティによって背景が無効にされたシート モーダルは、フォーカスのトラッピングの対象にはなりません。
-### Sheet Modals
+### シートモーダル
-Sheet modals allow users to interact with content behind the modal when the `backdropBreakpoint` property is used. The backdrop will be disabled up to and including the specified `backdropBreakpoint` and will be enabled after it.
+シートモーダルでは、`backdropBreakpoint` プロパティが使用されているとき、ユーザがモーダルの後ろのコンテンツとインタラクトできるようにします。バックドロップは、指定された `backdropBreakpoint` までは無効になり、それ以降は有効になります。
-When the backdrop is disabled, users will be able to interact with elements outside the sheet modal using a pointer or keyboard. Assistive technologies may not focus outside the sheet modal by default due to the usage of `aria-modal`. We recommend avoiding features such as autofocus here as it can cause assistive technologies to jump between two interactive contexts without warning the user.
+バックドロップが無効になると、ユーザーはポインタやキーボードを使用して、シートモーダルの外側の要素を操作することができるようになります。入力支援は、`aria-modal` の使用により、デフォルトではシートモーダルの外側にフォーカスを当てないかもしれません。オートフォーカスなどの機能は、ユーザーに警告することなく、支援技術が 2つのインタラクティブなコンテキスト間をジャンプする原因となるため、ここでは避けることをお勧めします。
-## Performance
+## パフォーマンス
-### Mounting Inner Contents
+### インナー コンテンツのマウント
-The content of an inline `ion-modal` 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 modal is mounted. This can help optimize the responsiveness of your application as the inner contents will have already been mounted when the modal opens.
+インラインの `ion-modal` のコンテンツは、閉じられるとアンマウントされます。このコンテンツがレンダリングに時間がかかる場合、開発者は `keepContentsMounted` プロパティを使用して、モーダルがマウントされると同時にコンテンツをマウントすることができます。これにより、モーダルが開かれたときにインナー コンテンツがすでにマウントされているので、アプリケーションの応答性を最適化することができます。
-import Mount from '@site/static/usage/modal/performance/mount/index.md';
+import Mount from '@site/static/usage/v8/modal/performance/mount/index.md';
-Developers should keep the following in mind when using `keepContentsMounted`:
+開発者は `keepContentsMounted` を使用する際に、以下の点に注意する必要があります。
-- 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.
+- この機能は、既存のパフォーマンスの問題に対処するための最後の手段として使用すべきです。この機能を使用する前に、パフォーマンスのボトルネックを特定し、解決するように努めてください。さらに、パフォーマンスの問題を予測するためにこの機能を使用しないでください。
-- This feature is only needed when using a JavaScript Framework. Developers not using a framework can pass the contents to be rendered into the modal, and the contents will be rendered automatically.
+- この機能は、JavaScriptフレームワークを使用している場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをモーダルに渡すことができ、コンテンツは自動的にレンダリングされます。
-- This feature only works with inline modals. Modals created with the `modalController` are not created ahead of time, so the inner contents are not created either.
+- この機能はインラインモーダルでのみ動作します。 `modalController` で作成されたモーダルは先に作成されないので、インナーコンテンツも作成されません。
-- Any JavaScript Framework lifecycle hooks on the inner component will run as soon as the modal is mounted, not when the modal is presented.
+- インナー コンポーネントの JavaScript Framework ライフサイクル フックはすべて、モーダルが表示されたときではなく、モーダルがマウントされたときに実行されます。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md
index 76161afb226..781fb90c6aa 100644
--- a/docs/api/nav-link.md
+++ b/docs/api/nav-link.md
@@ -1,58 +1,42 @@
---
title: "ion-nav-link"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/nav-link/props.md';
-import Events from '@site/static/auto-generated/nav-link/events.md';
-import Methods from '@site/static/auto-generated/nav-link/methods.md';
-import Parts from '@site/static/auto-generated/nav-link/parts.md';
-import CustomProps from '@site/static/auto-generated/nav-link/custom-props.md';
-import Slots from '@site/static/auto-generated/nav-link/slots.md';
+import Props from '@ionic-internal/component-api/v8/nav-link/props.md';
+import Events from '@ionic-internal/component-api/v8/nav-link/events.md';
+import Methods from '@ionic-internal/component-api/v8/nav-link/methods.md';
+import Parts from '@ionic-internal/component-api/v8/nav-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/nav-link/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/nav-link/slots.md';
- ion-nav-link: The Element for Navigation to a Specified Component
-
+ ion-nav-link: Navigation Links to a Specified Component
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-
Contents
-
-
-
-
-A navigation link is used to navigate to a specified component. The component can be navigated to by going `forward`, `back` or as a `root` component.
-It is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller.
+ナビゲーションリンクは指定されたコンポーネントに移動するために使用されます。コンポーネントは `forward`, `back` または `root` コンポーネントとして移動することができます。
+これは、ナビゲーションコントローラの `push()`, `pop()`, `setRoot()` メソッドを呼び出すための要素形式となります。
+詳しくは[nav](./nav#using-navlink)のドキュメントを参照ください。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/nav.md b/docs/api/nav.md
index 68fefd1fec1..f3f41882aa8 100644
--- a/docs/api/nav.md
+++ b/docs/api/nav.md
@@ -1,48 +1,57 @@
---
title: "ion-nav"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/nav/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/nav/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/nav/props.md';
-import Events from '@site/static/auto-generated/nav/events.md';
-import Methods from '@site/static/auto-generated/nav/methods.md';
-import Parts from '@site/static/auto-generated/nav/parts.md';
-import CustomProps from '@site/static/auto-generated/nav/custom-props.md';
-import Slots from '@site/static/auto-generated/nav/slots.md';
+import Props from '@ionic-internal/component-api/v8/nav/props.md';
+import Events from '@ionic-internal/component-api/v8/nav/events.md';
+import Methods from '@ionic-internal/component-api/v8/nav/methods.md';
+import Parts from '@ionic-internal/component-api/v8/nav/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/nav/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/nav/slots.md';
- ion-nav | Nav View Component for Ionic Framework Apps
-
+ ion-nav: Nav View Component for Ionic Framework Apps
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
+Navは、任意のコンポーネントをロードし、スタックに新しいコンポーネントを追加するためのスタンドアロンコンポーネントです。
+
+Router Outletとは異なり、Navは特定のルーターに縛られることはありません。つまり、Navコンポーネントをロードし、他のコンポーネントをスタックにプッシュしても、アプリ全体のルーターには影響しない。例えば、新しいコンポーネントを`ion-nav`にプッシュして、URLが更新されることを期待するべきではありません。これは、アプリのURLに関連付けずに、独自のサブナビゲーションが必要なモーダルがあるような使用例に適しています。
+
+:::note
+`ion-nav`はルーティングに使用するものではありません。 代わりに、[Angular](../angular/navigation)、[React](../react/navigation)、[Vue](../vue/navigation)、またはバニラJavaScriptプロジェクト用の[`ion-router`](./router)のルーティングガイドを参照してください。
+:::
+
+## NavLinkを利用する
+
+NavLinkは、Navと対話する際の簡素化されたAPIです。開発者はコンポーネントをカスタマイズしたり、コンポーネントのプロパティを渡したり、ルートアニメーションの方向を変更したり、ナビゲート時のカスタムアニメーションを定義したりすることができます。
+
+import NavLinkExample from '@site/static/usage/v8/nav/nav-link/index.md';
+
+
+
+## Navigation within a Modal
+
+Modal can use Nav to offer a linear navigation that is independent of the URL.
-
+:::note
+The example below uses a reference to Nav and the public method APIs to push and pop views. It is recommended to use NavLink in implementations that do not require this level of granular access and control.
+:::
-Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.
+import ModalNavigationExample from '@site/static/usage/v8/nav/modal-navigation/index.md';
-Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.
+
## Interfaces
### NavCustomEvent
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
```typescript
interface NavCustomEvent extends CustomEvent {
@@ -52,20 +61,20 @@ interface NavCustomEvent extends CustomEvent {
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/note.md b/docs/api/note.md
index 74f532882d4..e4b1c451d6f 100644
--- a/docs/api/note.md
+++ b/docs/api/note.md
@@ -1,247 +1,65 @@
---
title: "ion-note"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/note/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/note/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/note/props.md';
-import Events from '@site/static/auto-generated/note/events.md';
-import Methods from '@site/static/auto-generated/note/methods.md';
-import Parts from '@site/static/auto-generated/note/parts.md';
-import CustomProps from '@site/static/auto-generated/note/custom-props.md';
-import Slots from '@site/static/auto-generated/note/slots.md';
+import Props from '@ionic-internal/component-api/v8/note/props.md';
+import Events from '@ionic-internal/component-api/v8/note/events.md';
+import Methods from '@ionic-internal/component-api/v8/note/methods.md';
+import Parts from '@ionic-internal/component-api/v8/note/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/note/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/note/slots.md';
ion-note: Note Text Elements for iOS and Android Ionic Apps
-
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-
-Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default. Notes can be used in an item as metadata text.
-
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-Default Note
-
-
-Primary Note
-Secondary Note
-Danger Note
-Light Note
-Dark Note
-
-
-
-
- Note (End)
- On
-
-
-
- Off
- Note (Start)
-
-
-```
-
-
-
+Noteは、一般的に詳細情報を提供するサブタイトルとして使用されるテキスト要素です。デフォルトではグレーで表示されるように設計されています。Noteは、メタデータテキストとしてアイテム内で使用することができます。
+## 基本的な使い方
-
+import Basic from '@site/static/usage/v8/note/basic/index.md';
-```html
-
-Default Note
+
-
-Primary Note
-Secondary Note
-Danger Note
-Light Note
-Dark Note
+## Item Notes
-
-
-
- Note (End)
- On
-
+import Item from '@site/static/usage/v8/note/item/index.md';
-
- Off
- Note (Start)
-
-
-```
+
+## テーマ
-
+### Colors
+import Colors from '@site/static/usage/v8/note/theming/colors/index.md';
-
+
-```tsx
-import React from 'react';
-import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react';
+## CSSカスタムプロパティ
-export const NoteExample: React.FC = () => (
-
- {/*-- Default Note --*/}
- Default Note
+import CSSProps from '@site/static/usage/v8/note/theming/css-properties/index.md';
- {/*-- Note Colors --*/}
- Primary Note
- Secondary Note
- Danger Note
- Light Note
- Dark Note
+
- {/*-- Notes in a List --*/}
-
-
- Note (End)
- On
-
-
- Off
- Note (Start)
-
-
-
-);
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'note-example',
- styleUrl: 'note-example.css'
-})
-export class NoteExample {
- render() {
- return [
- // Default Note
- Default Note,
-
- // Note Colors
- Primary Note,
- Secondary Note,
- Danger Note,
- Light Note,
- Dark Note,
-
- // Notes in a List
-
-
- Note (End)
- On
-
-
-
- Off
- Note (Start)
-
-
- ];
- }
-}
-```
-
-
-
-
-
-
-
-```html
-
-
- Default Note
-
-
- Primary Note
- Secondary Note
- Danger Note
- Light Note
- Dark Note
-
-
-
-
- Note (End)
- On
-
-
-
- Off
- Note (Start)
-
-
-
-
-
-```
-
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/picker-column-option.md b/docs/api/picker-column-option.md
new file mode 100644
index 00000000000..ea1f428b45a
--- /dev/null
+++ b/docs/api/picker-column-option.md
@@ -0,0 +1,38 @@
+---
+title: "ion-picker-column-option"
+---
+import Props from '@ionic-internal/component-api/v8/picker-column-option/props.md';
+import Events from '@ionic-internal/component-api/v8/picker-column-option/events.md';
+import Methods from '@ionic-internal/component-api/v8/picker-column-option/methods.md';
+import Parts from '@ionic-internal/component-api/v8/picker-column-option/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/picker-column-option/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/picker-column-option/slots.md';
+
+
+ ion-picker-column-option: The individual options within a column in a picker.
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+An individual column option in a picker. Visit the [`ion-picker`](./picker.md) documentation for more details.
+
+## Properties
+
+
+## Events
+
+
+## Methods
+
+
+## CSS Shadow Parts
+
+
+## CSS Custom Properties
+
+
+## Slots
+
diff --git a/docs/api/picker-column.md b/docs/api/picker-column.md
new file mode 100644
index 00000000000..48280cdd380
--- /dev/null
+++ b/docs/api/picker-column.md
@@ -0,0 +1,38 @@
+---
+title: "ion-picker-column"
+---
+import Props from '@ionic-internal/component-api/v8/picker-column/props.md';
+import Events from '@ionic-internal/component-api/v8/picker-column/events.md';
+import Methods from '@ionic-internal/component-api/v8/picker-column/methods.md';
+import Parts from '@ionic-internal/component-api/v8/picker-column/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/picker-column/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/picker-column/slots.md';
+
+
+ ion-picker-column: Individual columns within a picker
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+An individual column within a picker. Visit the [`ion-picker`](./picker.md) documentation for more details.
+
+## Properties
+
+
+## Events
+
+
+## Methods
+
+
+## CSS Shadow Parts
+
+
+## CSS Custom Properties
+
+
+## Slots
+
diff --git a/docs/api/picker-legacy.md b/docs/api/picker-legacy.md
new file mode 100644
index 00000000000..077077f6baf
--- /dev/null
+++ b/docs/api/picker-legacy.md
@@ -0,0 +1,151 @@
+---
+title: "ion-picker-legacy"
+---
+import Props from '@ionic-internal/component-api/v8/picker-legacy/props.md';
+import Events from '@ionic-internal/component-api/v8/picker-legacy/events.md';
+import Methods from '@ionic-internal/component-api/v8/picker-legacy/methods.md';
+import Parts from '@ionic-internal/component-api/v8/picker-legacy/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/picker-legacy/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/picker-legacy/slots.md';
+
+
+ ion-picker-legacy: A Dialog That Displays Buttons and Columns
+
+
+
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
+
+
+
+:::warning Deprecation Notice
+
+`ion-picker-legacy` is deprecated and will be removed in the next major release. Migrate to [`ion-picker`](./picker.md) as soon as possible.
+
+:::
+
+A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.
+
+## Inline Pickers (Recommended)
+
+`ion-picker-legacy` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Picker.
+
+import Trigger from '@site/static/usage/v8/picker-legacy/inline/trigger/index.md';
+
+
+
+### Using `isOpen`
+
+The `isOpen` property on `ion-picker-legacy` allows developers to control the presentation state of the Picker from their application state. This means when `isOpen` is set to `true` the Picker will be presented, and when `isOpen` is set to `false` the Picker will be dismissed.
+
+`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Picker is dismissed. Developers should listen for the `ionPickerDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-picker` from being tightly coupled with the state of the application. With a one way data binding, the Picker only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Picker needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
+
+import IsOpen from '@site/static/usage/v8/picker-legacy/inline/isOpen/index.md';
+
+
+
+## Controller Pickers
+
+The `pickerController` can be used in situations where more control is needed over when the Picker is presented and dismissed.
+
+import Controller from '@site/static/usage/v8/picker-legacy/controller/index.md';
+
+
+
+## Multiple Columns
+
+The `columns` property can be used to display a Picker with multiple columns of different options.
+
+import MultipleColumn from '@site/static/usage/v8/picker-legacy/multiple-column/index.md';
+
+
+
+## Interfaces
+
+### PickerButton
+
+```typescript
+interface PickerButton {
+ text?: string;
+ role?: string;
+ cssClass?: string | string[];
+ handler?: (value: any) => boolean | void;
+}
+```
+
+### PickerColumn
+
+```typescript
+interface PickerColumn {
+ name: string;
+ align?: string;
+ /**
+ * Changing this value allows the initial value of a picker column to be set.
+ */
+ selectedIndex?: number;
+ prevSelected?: number;
+ prefix?: string;
+ suffix?: string;
+ options: PickerColumnOption[];
+ cssClass?: string | string[];
+ columnWidth?: string;
+ prefixWidth?: string;
+ suffixWidth?: string;
+ optionsWidth?: string;
+}
+```
+
+### PickerColumnOption
+
+```typescript
+interface PickerColumnOption {
+ text?: string;
+ value?: any;
+ disabled?: boolean;
+ duration?: number;
+ transform?: string;
+ selected?: boolean;
+ /**
+ * The optional text to assign as the aria-label on the picker column option.
+ */
+ ariaLabel?: string;
+}
+```
+
+### PickerOptions
+
+```typescript
+interface PickerOptions {
+ columns: PickerColumn[];
+ buttons?: PickerButton[];
+ cssClass?: string | string[];
+ showBackdrop?: boolean;
+ backdropDismiss?: boolean;
+ animated?: boolean;
+
+ mode?: Mode;
+ keyboardClose?: boolean;
+ id?: string;
+ htmlAttributes?: { [key: string]: any };
+
+ enterAnimation?: AnimationBuilder;
+ leaveAnimation?: AnimationBuilder;
+}
+```
+
+## Properties
+
+
+## Events
+
+
+## Methods
+
+
+## CSS Shadow Parts
+
+
+## CSS Custom Properties
+
+
+## Slots
+
diff --git a/docs/api/picker.md b/docs/api/picker.md
index 2699f04c1ac..14603e49c18 100644
--- a/docs/api/picker.md
+++ b/docs/api/picker.md
@@ -1,326 +1,191 @@
---
title: "ion-picker"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/picker/props.md';
-import Events from '@site/static/auto-generated/picker/events.md';
-import Methods from '@site/static/auto-generated/picker/methods.md';
-import Parts from '@site/static/auto-generated/picker/parts.md';
-import CustomProps from '@site/static/auto-generated/picker/custom-props.md';
-import Slots from '@site/static/auto-generated/picker/slots.md';
+import Props from '@ionic-internal/component-api/v8/picker/props.md';
+import Events from '@ionic-internal/component-api/v8/picker/events.md';
+import Methods from '@ionic-internal/component-api/v8/picker/methods.md';
+import Parts from '@ionic-internal/component-api/v8/picker/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/picker/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/picker/slots.md';
- Picker | Display Buttons and Columns for ion-picker on Ionic Apps
-
+ ion-picker: Display a list of options in columns
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
+
-A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.
+ピッカーは、ユーザーが選択できるオプションを持つ1つまたは複数の列を表示します。
-## Single Column
+import Basic from '@site/static/usage/v8/picker/basic/index.md';
-Display a list of options in a single, scrollable column.
+
-import SingleColumn from '@site/static/usage/picker/single-column/index.md';
+## Prefix と Suffix コンテンツ
-
+`prefix` スロットと `suffix` スロットを使用して、ピッカーに追加コンテンツを追加します。
+import PrefixSuffix from '@site/static/usage/v8/picker/prefix-suffix/index.md';
-## Multiple Columns
+
-Display multiple columns of different options.
+## テーマ
-import MultipleColumn from '@site/static/usage/picker/multiple-column/index.md';
+### CSS変数
-
+ピッカーのハイライトとフェードは `ion-picker` の CSS 変数を使ってカスタマイズできる。開発者は、`ion-picker-column-options` を直接ターゲットにして、ホストレベルのスタイリングを使用することで、個々の外観をカスタマイズすることができます。
-## Interfaces
+import CSSProps from '@site/static/usage/v8/picker/theming/css-properties/index.md';
-### PickerButton
+
-```typescript
-interface PickerButton {
- text?: string;
- role?: string;
- cssClass?: string | string[];
- handler?: (value: any) => boolean | void;
-}
-```
+## Picker を Modal で使う
-### PickerColumn
+ピッカーは`ion-modal`のようなオーバーレイの中に表示することができ、確認ボタンやキャンセルボタンを使ってピッカー体験を作り出すことができる。
-```typescript
-interface PickerColumn {
- name: string;
- align?: string;
- selectedIndex?: number;
- prevSelected?: number;
- prefix?: string;
- suffix?: string;
- options: PickerColumnOption[];
- cssClass?: string | string[];
- columnWidth?: string;
- prefixWidth?: string;
- suffixWidth?: string;
- optionsWidth?: string;
-}
-```
+import ModalExample from '@site/static/usage/v8/picker/modal/index.md';
-### PickerColumnOption
+
+
+## Accessibility
-```typescript
-interface PickerColumnOption {
- text?: string;
- value?: any;
- disabled?: boolean;
- duration?: number;
- transform?: string;
- selected?: boolean;
-}
-```
+### Screen Readers
-### PickerOptions
+Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker.
-```typescript
-interface PickerOptions {
- columns: PickerColumn[];
- buttons?: PickerButton[];
- cssClass?: string | string[];
- showBackdrop?: boolean;
- backdropDismiss?: boolean;
- animated?: boolean;
+| Gesture | Function |
+| - | - |
+| Swipe Left | Move focus to the previous Picker Column. |
+| Swipe Right | Move focus to the next Picker Column. |
+| Swipe Up | Select the next option in the Picker Column. |
+| Swipe Down | Select the previous option in the Picker Column. |
+| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. |
- mode?: Mode;
- keyboardClose?: boolean;
- id?: string;
- htmlAttributes?: { [key: string]: any };
+:::caution
+The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers.
+:::
- enterAnimation?: AnimationBuilder;
- leaveAnimation?: AnimationBuilder;
-}
-```
+### Keyboard Navigation
+Each [Picker Column](./picker-column) can be navigated using the keyboard when focused.
+| Key | Function |
+| ------------------ | ------------------------------------------------------------ |
+| `ArrowUp` | Scroll to the previous option. |
+| `ArrowDown` | Scroll to the next option. |
+| `PageUp` | Scroll up by more than one option. |
+| `PageDown` | Scroll down by more than one option. |
+| `Home` | Scroll to the first option. |
+| `End` | Scroll to the last option. |
+## Accessibility
-## Usage
+### Screen Readers
-
+Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker.
+| Gesture | Function |
+| - | - |
+| Swipe Left | Move focus to the previous Picker Column. |
+| Swipe Right | Move focus to the next Picker Column. |
+| Swipe Up | Select the next option in the Picker Column. |
+| Swipe Down | Select the previous option in the Picker Column. |
+| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. |
-
+:::caution
+The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers.
+:::
-```html
-Show Picker
-```
+### Keyboard Interactions
-```ts
-import { Component } from '@angular/core';
-import { PickerController } from '@ionic/angular';
-@Component({
- selector: 'app-picker-example',
- template: 'picker-example.component.html'
-})
-export class PickerExample {
- private selectedAnimal: string;
- constructor(private pickerController: PickerController) { }
-
- async presentPicker() {
- const picker = await this.pickerController.create({
- buttons: [
- {
- text: 'Confirm',
- handler: (selected) => {
- this.selectedAnimal = selected.animal.value;
- },
- }
- ],
- columns: [
- {
- name: 'animal',
- options: [
- { text: 'Dog', value: 'dog' },
- { text: 'Cat', value: 'cat' },
- { text: 'Bird', value: 'bird' },
- ]
- }
- ]
- });
- await picker.present();
- }
-}
-```
-
-
-
-
-
-```tsx
-/* Using with useIonPicker Hook */
-
-import React, { useState } from 'react';
-import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react';
-
-const PickerExample: React.FC = () => {
- const [present] = useIonPicker();
- const [value, setValue] = useState('');
- return (
-
-
-
- present({
- buttons: [
- {
- text: 'Confirm',
- handler: (selected) => {
- setValue(selected.animal.value)
- },
- },
- ],
- columns: [
- {
- name: 'animal',
- options: [
- { text: 'Dog', value: 'dog' },
- { text: 'Cat', value: 'cat' },
- { text: 'Bird', value: 'bird' },
- ],
- },
- ],
- })
- }
- >
- Show Picker
-
-
- present(
- [
- {
- name: 'animal',
- options: [
- { text: 'Dog', value: 'dog' },
- { text: 'Cat', value: 'cat' },
- { text: 'Bird', value: 'bird' },
- ],
- },
- {
- name: 'vehicle',
- options: [
- { text: 'Car', value: 'car' },
- { text: 'Truck', value: 'truck' },
- { text: 'Bike', value: 'bike' },
- ],
- },
- ],
- [
- {
- text: 'Confirm',
- handler: (selected) => {
- setValue(`${selected.animal.value}, ${selected.vehicle.value}`)
- },
- },
- ]
- )
- }
- >
- Show Picker using params
-
- {value && (
-
Selected Value: {value}
- )}
-
-
- );
-};
-```
-
-
-
-
-
-
-```vue
-
-
- SHOW PICKER
-
picked: {{ picked.animal.text }}
-
-
-
-
-```
-
-
-
-
-
-
-## Properties
+Each [Picker Column](./picker-column) can be navigated using the keyboard when focused.
+
+| Key | Description |
+| -------------------- | ------------------------------------ |
+| ArrowUp | Scroll to the previous option. |
+| ArrowDown | Scroll to the next option. |
+| PageUp | Scroll up by more than one option. |
+| PageDown | Scroll down by more than one option. |
+| Home | Scroll to the first option. |
+| End | Scroll to the last option. |
+
+## Accessibility
+
+### Screen Readers
+
+Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker.
+
+| Gesture | Function |
+| - | - |
+| Swipe Left | Move focus to the previous Picker Column. |
+| Swipe Right | Move focus to the next Picker Column. |
+| Swipe Up | Select the next option in the Picker Column. |
+| Swipe Down | Select the previous option in the Picker Column. |
+| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. |
+
+:::caution
+The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers.
+:::
+
+### Keyboard Interactions
+
+Each [Picker Column](./picker-column) can be navigated using the keyboard when focused.
+
+| Key | Description |
+| -------------------- | ------------------------------------ |
+| ArrowUp | Scroll to the previous option. |
+| ArrowDown | Scroll to the next option. |
+| PageUp | Scroll up by more than one option. |
+| PageDown | Scroll down by more than one option. |
+| Home | Scroll to the first option. |
+| End | Scroll to the last option. |
+
+## Accessibility
+
+### Screen Readers
+
+Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker.
+
+| Gesture | Function |
+| - | - |
+| Swipe Left | Move focus to the previous Picker Column. |
+| Swipe Right | Move focus to the next Picker Column. |
+| Swipe Up | Select the next option in the Picker Column. |
+| Swipe Down | Select the previous option in the Picker Column. |
+| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. |
+
+:::caution
+The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers.
+:::
+
+### Keyboard Interactions
+
+Each [Picker Column](./picker-column) can be navigated using the keyboard when focused.
+
+| Key | Description |
+| -------------------- | ------------------------------------ |
+| ArrowUp | Scroll to the previous option. |
+| ArrowDown | Scroll to the next option. |
+| PageUp | Scroll up by more than one option. |
+| PageDown | Scroll down by more than one option. |
+| Home | Scroll to the first option. |
+| End | Scroll to the last option. |
+
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
diff --git a/docs/api/popover.md b/docs/api/popover.md
index 63f57530b5a..018f7b4b607 100644
--- a/docs/api/popover.md
+++ b/docs/api/popover.md
@@ -1,46 +1,42 @@
---
title: "ion-popover"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/popover/props.md';
-import Events from '@site/static/auto-generated/popover/events.md';
-import Methods from '@site/static/auto-generated/popover/methods.md';
-import Parts from '@site/static/auto-generated/popover/parts.md';
-import CustomProps from '@site/static/auto-generated/popover/custom-props.md';
-import Slots from '@site/static/auto-generated/popover/slots.md';
+import Props from '@ionic-internal/component-api/v8/popover/props.md';
+import Events from '@ionic-internal/component-api/v8/popover/events.md';
+import Methods from '@ionic-internal/component-api/v8/popover/methods.md';
+import Parts from '@ionic-internal/component-api/v8/popover/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/popover/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/popover/slots.md';
- ion-popover: iOS / Android Popover UI Component & CSS Properties
-
+ ion-popover: iOS / Android Popover UI Dialog Component
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-A Popover is a dialog that appears on top of the current page. It can be used for anything, but generally it is used for overflow actions that don't fit in the navigation bar.
+Popoverは、現在のページの上部に表示されるダイアログです。これは何にでも使用できますが、通常はナビゲーションバーに収まらないオーバーフローアクションに使用されます。
-There are two ways to use `ion-popover`: inline or via the `popoverController`. Each method comes with different considerations, so be sure to use the approach that best fits your use case.
+`ion-popover` を使用するには、インラインで使用する方法と `popoverController` を使用する方法がります。それぞれの方法には異なる考慮点があるので、あなたのユースケースに最も適した方法を使用するようにしましょう。
-## Inline Popovers
+## インラインポップオーバー
-`ion-popover` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the popover.
+`ion-popover` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、ポップオーバーを表示するために必要なハンドラの数を減らすことができます。
-When using `ion-popover` with Angular, React, or Vue, the component you pass in will be destroyed when the popover is dismissed. As this functionality is provided by the JavaScript framework, using `ion-popover` without a JavaScript framework will not destroy the component you passed in. If this is a needed functionality, we recommend using the `popoverController` instead.
+Angular、React、Vue で `ion-popover` を使用する場合、渡されたコンポーネントはポップオーバーが解除されると破棄されます。この機能は JavaScript フレームワークによって提供されるので、JavaScript フレームワークを使わずに `ion-popover` を使用しても、渡したコンポーネントは破棄されない。この機能が必要な場合は、代わりに `popoverController` を使用することを推奨します
-### When to use
+### いつ使うか
-Using a popover inline is useful when you do not want to explicitly wire up click events to open the popover. For example, you can use the `trigger` property to designate a button that should present the popover when clicked. You can also use the `trigger-action` property to customize whether the popover should be presented when the trigger is left clicked, right clicked, or hovered over.
+ポップオーバーをインラインで使用することは、ポップオーバーを開くためにクリックイベントを明示的に配線したくない場合に便利です。例えば、 `trigger` プロパティを使用して、クリックされたときにポップオーバーを表示するボタンを指定することができます。また、`trigger-action` プロパティを使って、トリガーが左クリックされたとき、右クリックされたとき、ホーバーされたときにポップオーバーを表示するかどうかをカスタマイズすることができます。
-If you need fine grained control over when the popover is presented and dismissed, we recommend you use the `popoverController`.
+もし、ポップオーバーの表示と非表示を細かく制御したい場合は、 `popoverController` を使用することをお勧めします。
-### Angular
+### Angular
-Since the component you passed in needs to be created when the popover is presented and destroyed when the popover is dismissed, we are unable to project the content using `` internally. Instead, we use `` which expects an `` to be passed in. As a result, when passing in your component you will need to wrap it in an ``:
+渡されたコンポーネントは、ポップオーバーが表示されたときに作成され、ポップオーバーが解除されたときに破棄される必要があるため、内部で `` を使用してコンテンツを投影することはできません。代わりに、`` を使用します。これは、`` が渡されることを想定しています。そのため、コンポーネントを渡す際には、``でラップする必要があります。
```html
@@ -50,113 +46,113 @@ Since the component you passed in needs to be created when the popover is presen
```
-### Triggers
+### トリガー
-A trigger for an inline `ion-popover` is the element that will open a popover when interacted with. The interaction behavior can be customized by setting the `trigger-action` property. Note that `trigger-action="context-menu"` will prevent your system's default context menu from opening.
+インラインの `ion-popover` のトリガーは、インタラクションされたときにポップオーバーを開く要素です。インタラクションの動作は `trigger-action` プロパティを設定することでカスタマイズすることができます。なお、`trigger-action="context-menu"` はシステムのデフォルトのコンテキストメニューを開かせないようにします。
:::note
- Triggers are not applicable when using the `popoverController` because the `ion-popover` is not created ahead of time.
+ `popoverController` を使用する場合、`ion-popover` は前もって作成されないので、トリガーは適用されません。
:::
-import InlineTrigger from '@site/static/usage/popover/presenting/inline-trigger/index.md';
+import InlineTrigger from '@site/static/usage/v8/popover/presenting/inline-trigger/index.md';
-### isOpen Property
+### isOpen プロパティ
-Inline popovers can also be opened by setting the `isOpen` property to `true`. This method can be used if you need finer grained control over the popover than with a trigger.
+インラインポップオーバーは `isOpen` プロパティを `true` に設定することによっても開くことができます。この方法はトリガーよりも細かくポップオーバーをコントロールする必要がある場合に使用されます。
-`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the popover is dismissed. Developers should listen for the `ionPopoverDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-popover` from being tightly coupled with the state of the application. With a one way data binding, the popover only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the popover needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug.
+`isOpen` は一方向のデータバインディングを使用しています。つまり、ポップオーバーが閉じられたときに自動的に `false` に設定されることはありません。開発者は `ionPopoverDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` にセットする必要があります。この理由は、`ion-popover` の内部がアプリケーションの状態と密に結合されるのを防ぐためである。一方通行のデータバインディングでは、ポップオーバーはリアクティブ変数が提供するブーリアン値だけを気にすればよいのです。双方向のデータバインディングでは、ポップオーバーはブール値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは非決定的な動作につながり、アプリケーションのデバッグを難しくします。
-import IsOpenTrigger from '@site/static/usage/popover/presenting/inline-isopen/index.md';
+import IsOpenTrigger from '@site/static/usage/v8/popover/presenting/inline-isopen/index.md';
-## Controller Popovers
+## ポップオーバーコントローラ
-`ion-popover` can also be presented programmatically by using the `popoverController` imported from Ionic Framework. This allows you to have complete control over when a popover is presented above and beyond the customization that inline popovers give you.
+Ionic Framework からインポートされた `popoverController` を使用することで、`ion-popover` をプログラム的に表示することも可能です。これにより、インラインポップオーバーのカスタマイズ以上に、ポップオーバーを表示するタイミングを完全に制御することができます。
-### When to use
+### どのような場合に使用するのか
-We typically recommend that you write your popovers inline as it streamlines the amount of code in your application. You should only use the `popoverController` for complex use cases where writing a popover inline is impractical. When using a controller, your popover is not created ahead of time, so properties such as `trigger` and `trigger-action` are not applicable here. In addition, nested popovers are not compatible with the controller approach because the popover is automatically added to the root of your application when the `create` method is called.
+ポップオーバーはインラインで記述することをお勧めします。ポップオーバーをインラインで書くことが現実的でない複雑なユースケースの場合にのみ `popoverController` を使用すべきです。コントローラを使用する場合、ポップオーバーは前もって作成されないので、 `trigger` や `trigger-action` などのプロパティはここでは適用されません。さらに、ネストされたポップオーバーはコントローラのアプローチと互換性がありません。なぜなら、ポップオーバーは `create` メソッドが呼ばれたときに自動的にアプリケーションのルートに追加されるからです。
### React
-Instead of a controller, React has a hook called `useIonPopover` which behaves in a similar fashion. Note that `useIonPopover` requires being a descendant of ``. If you need to use a popover outside of an ``, consider using an inline popover instead.
+コントローラの代わりに、React には `useIonPopover` というHookがあり、同じような振る舞いをします。なお、 `useIonPopover` は `` の子孫であることが必要です。もし、 `` の外側でポップオーバーを使用する必要がある場合は、代わりにインラインポップオーバーを使用することを検討してください。
-### Usage
+### 使い方
-import ControllerExample from '@site/static/usage/popover/presenting/controller/index.md';
+import ControllerExample from '@site/static/usage/v8/popover/presenting/controller/index.md';
-## Styling
+## スタイリング
-Popovers are presented at the root of your application so they overlay your entire app. This behavior applies to both inline popovers and popovers presented from a controller. As a result, custom popover styles can not be scoped to a particular component as they will not apply to the popover. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient.
+ポップオーバーはアプリケーションのルートで表示されるので、アプリケーション全体を覆うように表示されます。この動作はインラインポップオーバーとコントローラから表示されるポップオーバーの両方に適用されます。そのため、カスタムポップオーバースタイリングは特定のコンポーネントにスコープすることができません。代わりに、スタイルはグローバルに適用されなければなりません。ほとんどの開発者は、カスタムスタイルを `global.css` に配置すれば十分です。
:::note
If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file.
:::
-import Styling from '@site/static/usage/popover/customization/styling/index.md';
+import Styling from '@site/static/usage/v8/popover/customization/styling/index.md';
-## Positioning
+## 配置
-### Reference
+### リファレンス
-When presenting a popover, Ionic Framework needs a reference point to present the popover relative to. With `reference="event"`, the popover will be presented relative to the x-y coordinates of the pointer event that was dispatched on your trigger element. With `reference="trigger"`, the popover will be presented relative to the bounding box of your trigger element.
+ポップオーバーを表示するとき、Ionic Framework はポップオーバーを相対的に表示するための参照点を必要とします。`reference="event"` を指定すると、ポップオーバーはトリガー要素で dispatch されたポインターイベントのx-y座標に相対的に表示されます。 `reference="trigger"` を指定すると、ポップオーバーはトリガー要素のバウンディングボックスに対して相対的に表示されます。
### Side
-Regardless of what you choose for your reference point, you can position a popover to the `top`, `right`, `left`, or `bottom` of your reference point by using the `side` property. You can also use the `start` or `end` values if you would like the side to switch based on LTR or RTL modes.
+`side` プロパティを使用することで、基準点の上、右、左、下のいずれかにポップオーバーを配置することができます。また、LTRやRTLのモードに応じてサイドを切り替えたい場合は、 `start` や `end` を使用することができます。
### Alignment
-The `alignment` property allows you to line up an edge of your popover with a corresponding edge on your trigger element. The exact edge that is used depends on the value of the `side` property.
+`alignment` プロパティを使用すると、ポップオーバーのエッジをトリガー要素の対応するエッジに揃えることができます。使用される正確な辺は `side` プロパティの値に依存します。
### Side and Alignment Demo
-import Positioning from '@site/static/usage/popover/customization/positioning/index.md';
+import Positioning from '@site/static/usage/v8/popover/customization/positioning/index.md';
-### Offsets
+### オフセット
-If you need finer grained control over the positioning of your popover you can use the `--offset-x` and `--offset-y` CSS Variables. For example, `--offset-x: 10px` will move your popover content to the right by `10px`.
+ポップオーバーの位置をより細かく制御したい場合は、CSS 変数 `--offset-x` と `--offset-y` を使用することができます。例えば、`--offset-x: 10px` はポップオーバーのコンテンツを `10px` だけ右側に移動させます。
-## Sizing
+## サイズ調整
-When making dropdown menus, you may want to have the width of the popover match the width of the trigger element. Doing this without knowing the trigger width ahead of time is tricky. You can set the `size` property to `'cover'` and Ionic Framework will ensure that the width of the popover matches the width of your trigger element.
+ドロップダウンメニューを作成するとき、ポップオーバーの幅をトリガー要素の幅と一致させたい場合があります。トリガーの幅を事前に知らずにこれを行うのは厄介です。 `size` プロパティを `'cover'` に設定すると、Ionic Framework はポップオーバーの幅をトリガー要素の幅に一致させるようにします。
-If you are using the `popoverController`, you must provide an event via the `event` option and Ionic Framework will use `event.target` as the reference element. See the [controller demo](#controller-popovers) for an example of this pattern.
+`popoverController` を使用する場合は、`event` オプションでイベントを指定する必要があり、Ionic Framework は `event.target` を参照要素に使用します。このパターンの例は [controller demo](#controller-popovers) を参照してください。
-import Sizing from '@site/static/usage/popover/customization/sizing/index.md';
+import Sizing from '@site/static/usage/v8/popover/customization/sizing/index.md';
-## Nested Popovers
+## ポップオーバーをネスト
-When using `ion-popover` inline, you can nested popovers to create nested dropdown menus. When doing this, only the backdrop on the first popover will appear so that the screen does not get progressively darker as you open more popovers.
+インラインで `ion-popover` を使用する場合、ポップオーバーを入れ子にして入れ子のドロップダウンメニューを作成することができます。このとき、最初のポップオーバーの背景だけが表示されるので、ポップオーバーを開くたびに画面がだんだん暗くなっていくことはありません。
-You can use the `dismissOnSelect` property to automatically close the popover when the popover content has been clicked. This behavior does not apply when clicking a trigger element for another popover.
+`dismissOnSelect` プロパティを使用すると、ポップオーバーのコンテンツがクリックされたときに自動的にポップオーバーを閉じることができます。この動作は、他のポップオーバーのトリガー要素をクリックしたときには適用されません。
:::note
- Nested popovers cannot be created when using the `popoverController` because the popover is automatically added to the root of your application when the `create` method is called.
+ `popoverController` を使用する場合、ネストしたポップオーバーは作成できません。なぜなら、ポップオーバーは `create` メソッドが呼ばれたときに、自動的にアプリケーションのルートに追加されるからです。
:::
-import NestedPopover from '@site/static/usage/popover/nested/index.md';
+import NestedPopover from '@site/static/usage/v8/popover/nested/index.md';
## Interfaces
-Below you will find all of the options available to you when using the `popoverController`. These options should be supplied when calling `popoverController.create()`.
+以下に、`popoverController` を使用する際に利用可能なすべてのオプションを示します。これらのオプションは `popoverController.create()` を呼び出す際に指定します。
```typescript
interface PopoverOptions {
@@ -176,7 +172,7 @@ interface PopoverOptions {
enterAnimation?: AnimationBuilder;
leaveAnimation?: AnimationBuilder;
-
+
size?: PopoverSize;
dismissOnSelect?: boolean;
reference?: PositionReference;
@@ -189,7 +185,7 @@ interface PopoverOptions {
## Types
-Below you will find all of the custom types for `ion-popover`:
+以下に、`ion-popover` のすべてのカスタムTypeを紹介します。
```typescript
type PopoverSize = 'cover' | 'auto';
@@ -199,64 +195,63 @@ type PositionSide = 'top' | 'right' | 'bottom' | 'left' | 'start' | 'end';
type PositionAlign = 'start' | 'center' | 'end';
```
-## Accessibility
-
-### Keyboard Navigation
+## アクセシビリティ
-`ion-popover` has basic keyboard support for navigating between focusable elements inside of the popover. The following table details what each key does:
+### キーボードインタラクション
-| Key | Function |
-| ------------------ | ------------------------------------------------------------ |
-| `Tab` | Moves focus to the next focusable element. |
-| `Shift` + `Tab` | Moves focus to the previous focusable element. |
-| `Esc` | Closes the popover. |
-| `Space` or `Enter` | Clicks the focusable element. |
+`ion-popover` は、ポップオーバー内のフォーカス可能な要素間を移動するための基本的なキーボードをサポートしています。次の表は、それぞれのキーが何をするのかの詳細です:
+| Key | Description |
+| ------------------------------------ | ---------------------------------------------- |
+| Tab | Moves focus to the next focusable element. |
+| Shift + Tab | Moves focus to the previous focusable element. |
+| Esc | Closes the popover. |
+| Space or Enter | Clicks the focusable element. |
-`ion-popover` has full arrow key support for navigating between `ion-item` elements with the `button` property. The most common use case for this is as a dropdown menu in a desktop-focused application. In addition to the basic keyboard support, the following table details arrow key support for dropdown menus:
+`ion-popover` は、 `button` プロパティを持つ `ion-item` 要素間を移動するための矢印キーを完全にサポートしています。最も一般的な使用例としては、デスクトップにフォーカスしたアプリケーションにおけるドロップダウンメニューとして使用することができます。基本的なキーボードのサポートに加え、次の表ではドロップダウンメニューの矢印キーのサポートについて詳しく説明します。
-| Key | Function |
-| ------------------ | -------------------------------------------------------------- |
-| `ArrowUp` | Moves focus to the previous focusable element. |
-| `ArrowDown` | Moves focus to the next focusable element. |
-| `Home` | Moves focus to the first focusable element. |
-| `End` | Moves focus to the last focusable element. |
-| `ArrowLeft` | When used in a child popover, closes the popover and returns focus to the parent popover. |
-| `Space`, `Enter`, and `ArrowRight` | When focusing a trigger element, opens the associated popover. |
+| Key | Description |
+| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| ArrowUp | Moves focus to the previous focusable element. |
+| ArrowDown | Moves focus to the next focusable element. |
+| Home | Moves focus to the first focusable element. |
+| End | Moves focus to the last focusable element. |
+| ArrowLeft | When used in a child popover, closes the popover and returns focus to the parent popover. |
+| Space, Enter, and ArrowRight | When focusing a trigger element, opens the associated popover. |
## Performance
-### Mounting Inner Contents
+### Innerコンテンツのマウント
-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.
+インライン `ion-popover` のコンテンツは、閉じるとマウントされなくなります。このコンテンツのレンダリングにコストがかかる場合、開発者は `keepContentsMounted` プロパティを使用して、ポップオーバーがマウントされると同時にコンテンツをマウントすることができます。これにより、ポップオーバーが開いたときに内部コンテンツがすでにマウントされているため、アプリケーションの応答性を最適化することができます。
-import Mount from '@site/static/usage/popover/performance/mount/index.md';
+import Mount from '@site/static/usage/v8/popover/performance/mount/index.md';
-Developers should keep the following in mind when using `keepContentsMounted`:
+開発者は `keepContentsMounted` を使用する際に、以下の点に留意する必要があります。
-- 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.
+- この機能は、既存のパフォーマンス問題に対処するための最後の手段として使用する必要があります。この機能は、既存のパフォーマンス問題に対処するための最後の手段として使用されるべきです。また、パフォーマンスの問題を予期してこの機能を使用しないでください。
-- 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.
+- この機能は、JavaScriptフレームワークを使用する場合にのみ必要です。フレームワークを使用していない開発者は、レンダリングするコンテンツをポップオーバーに渡すことができ、コンテンツは自動的にレンダリングされます。
-- 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.
+- この機能はインラインポップオーバーでのみ機能します。 `popoverController`で作成されたポップオーバーは先に作成されないので、内部のコンテンツも作成されません。
-- Any JavaScript Framework lifecycle hooks on the inner component will run as soon as the popover is mounted, not when the popover is presented.
+- 内部コンポーネントの JavaScript Framework ライフサイクルフックは、ポップオーバーが表示されたときではなく、ポップオーバーがマウントされたときにすぐに実行されます。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md
index 2534c34d4e4..ea0189ee129 100644
--- a/docs/api/progress-bar.md
+++ b/docs/api/progress-bar.md
@@ -1,219 +1,96 @@
---
title: "ion-progress-bar"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/progress-bar/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/progress-bar/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/progress-bar/props.md';
-import Events from '@site/static/auto-generated/progress-bar/events.md';
-import Methods from '@site/static/auto-generated/progress-bar/methods.md';
-import Parts from '@site/static/auto-generated/progress-bar/parts.md';
-import CustomProps from '@site/static/auto-generated/progress-bar/custom-props.md';
-import Slots from '@site/static/auto-generated/progress-bar/slots.md';
+import Props from '@ionic-internal/component-api/v8/progress-bar/props.md';
+import Events from '@ionic-internal/component-api/v8/progress-bar/events.md';
+import Methods from '@ionic-internal/component-api/v8/progress-bar/methods.md';
+import Parts from '@ionic-internal/component-api/v8/progress-bar/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/progress-bar/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/progress-bar/slots.md';
- Progress Bar | Horizontal App Progress Bar for Loading Indicator
-
+ ion-progress-bar: App Progress Bar for Loading Indicator
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-
-Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. There are two types of progress bars: `determinate` and `indeterminate`.
-
-## Progress Type
-
-### Determinate
-
-Determinate is the default type. It should be used when the percentage of an operation is known. The progress is represented by setting the `value` property. This can be used to show the progress increasing from 0 to 100% of the track.
-
-If the `buffer` property is set, a buffer stream will show with animated circles to indicate activity. The value of the `buffer` property will also be represented by how much visible track there is. If the value of `buffer` is less than the `value` property, there will be no visible track. If `buffer` is equal to `1` then the buffer stream will be hidden.
-
-### Indeterminate
-
-The indeterminate type should be used when it is unknown how long the process will take. The progress bar is not tied to the `value`, instead it continually slides along the track until the process is complete.
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-
-
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
+プログレスバーは、アプリのロード、フォームの送信、更新の保存など、進行中の処理の状態をユーザーに知らせるものです。プログレスバーには2つのタイプがあります。プログレスバーには、`determinate`と`indeterminate`の2種類があります。
+## Determinate
-
+Determinateはデフォルトのタイプです。操作のパーセンテージがわかっている場合に使用されるべきです。進行状況は `value` プロパティを設定することで表現されます。これは、進捗が0から100%まで増加するように表示するために使用できます。
+import Determinate from '@site/static/usage/v8/progress-bar/determinate/index.md';
-
+
-```tsx
-import React from 'react';
-import { IonProgressBar, IonContent } from '@ionic/react';
+### Buffer
-export const ProgressbarExample: React.FC = () => (
-
- {/*-- Default Progressbar --*/}
-
+`buffer`プロパティが設定されている場合、バッファーストリームがアニメーションの円と共に表示され、アクティビティを示します。また、`buffer`プロパティの値は、目に見えるトラックの量によって表されます。もし `buffer` の値が `value` プロパティより小さければ、目に見えるトラックはありません。もし `buffer` が `1` に等しければ、バッファースリームは隠されます。
- {/*-- Default Progressbar with 50 percent --*/}
-
+import Buffer from '@site/static/usage/v8/progress-bar/buffer/index.md';
- {/*-- Colorize Progressbar --*/}
-
-
+
- {/*-- Other types --*/}
-
-
-
-
-);
-```
+## Indeterminate
-
+Indeterminateタイプは、処理にかかる時間が不明な場合に使用します。プログレスバーは `value` と連動しておらず、処理が完了するまでトラックに沿ってスライドしつづけます。
+import Indeterminate from '@site/static/usage/v8/progress-bar/indeterminate/index.md';
-
+
-```tsx
-import { Component, h } from '@stencil/core';
-@Component({
- tag: 'progress-bar-example',
- styleUrl: 'progress-bar-example.css'
-})
-export class ProgressBarExample {
- render() {
- return [
- // Default Progressbar
- ,
+## Progress Bars in Toolbars
- // Default Progressbar with 50 percent
- ,
+
+import Toolbar from '@site/static/usage/v8/toolbar/progress-bars/index.md';
- // Colorize Progressbar
- ,
- ,
+
- // Other types
- ,
- ,
-
- ];
- }
-}
-```
+## テーマ
-
+### Colors
+import Colors from '@site/static/usage/v8/progress-bar/theming/colors/index.md';
-
+
-```html
-
-
-
-
-
+## CSSカスタムプロパティ
-
-
-
+import CSSProps from '@site/static/usage/v8/progress-bar/theming/css-properties/index.md';
-
-
-
-
-
+
-
-```
+### CSS Shadow Parts
+import CSSParts from '@site/static/usage/v8/progress-bar/theming/css-shadow-parts/index.md';
-
+
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/radio-group.md b/docs/api/radio-group.md
index db0e8c50e2d..d8d678a0a1a 100644
--- a/docs/api/radio-group.md
+++ b/docs/api/radio-group.md
@@ -1,41 +1,23 @@
---
title: "ion-radio-group"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/radio-group/props.md';
-import Events from '@site/static/auto-generated/radio-group/events.md';
-import Methods from '@site/static/auto-generated/radio-group/methods.md';
-import Parts from '@site/static/auto-generated/radio-group/parts.md';
-import CustomProps from '@site/static/auto-generated/radio-group/custom-props.md';
-import Slots from '@site/static/auto-generated/radio-group/slots.md';
+import Props from '@ionic-internal/component-api/v8/radio-group/props.md';
+import Events from '@ionic-internal/component-api/v8/radio-group/events.md';
+import Methods from '@ionic-internal/component-api/v8/radio-group/methods.md';
+import Parts from '@ionic-internal/component-api/v8/radio-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/radio-group/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/radio-group/slots.md';
- ion-radio-group | Radio Button Group Usage for Ionic Apps
-
+ ion-radio-group: Radio Button Group Usage for Ionic Apps
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-
Contents
-
-
+ラジオ・グループは、[ラジオ](./radio)のグループのためのコンテナです。ラジオグループは、ユーザーがラジオボタンを1つだけ選択できるようにします。ラジオ・グループに属するラジオ・ボタンを1つチェックすると、同じグループ内で以前にチェックされたラジオ・ボタンのチェックは解除されます。ラジオ・グループの使用例については、[radio](./radio)のドキュメントを参照してください。
-A radio group is a group of [radio buttons](radio.md). It allows
-a user to select at most one radio button from a set. Checking one radio
-button that belongs to a radio group unchecks any previous checked
-radio button within the same group.
## Interfaces
@@ -49,7 +31,7 @@ interface RadioGroupChangeEventDetail {
### RadioGroupCustomEvent
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
```typescript
interface RadioGroupCustomEvent extends CustomEvent {
@@ -59,284 +41,20 @@ interface RadioGroupCustomEvent extends CustomEvent {
```
-
-## Usage
-
-
-
-
-
-```html
-
-
-
-
- Auto Manufacturers
-
-
-
-
- Cord
-
-
-
-
- Duesenberg
-
-
-
-
- Hudson
-
-
-
-
- Packard
-
-
-
-
- Studebaker
-
-
-
-
-```
-
-
-
-
-
-
-
-```html
-
-
-
-
- Auto Manufacturers
-
-
-
-
- Cord
-
-
-
-
- Duesenberg
-
-
-
-
- Hudson
-
-
-
-
- Packard
-
-
-
-
- Studebaker
-
-
-
-
-```
-
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem, IonContent } from '@ionic/react';
-
-export const RadioGroupExample: React.FC = () => (
-
-
-
-
-
- Auto Manufacturers
-
-
-
-
- Cord
-
-
-
-
- Duesenberg
-
-
-
-
- Hudson
-
-
-
-
- Packard
-
-
-
-
- Studebaker
-
-
-
-
-
-);
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'radio-group-example',
- styleUrl: 'radio-group-example.css'
-})
-export class RadioGroupExample {
- render() {
- return [
-
-
-
-
- Auto Manufacturers
-
-
-
-
- Cord
-
-
-
-
- Duesenberg
-
-
-
-
- Hudson
-
-
-
-
- Packard
-
-
-
-
- Studebaker
-
-
-
-
- ];
- }
-}
-```
-
-
-
-
-
-
-
-```html
-
-
-
-
-
- Auto Manufacturers
-
-
-
-
- Cord
-
-
-
-
- Duesenberg
-
-
-
-
- Hudson
-
-
-
-
- Packard
-
-
-
-
- Studebaker
-
-
-
-
-
-
-
-```
-
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/radio.md b/docs/api/radio.md
index 7814629570e..10eba0d35c5 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -1,277 +1,151 @@
---
title: "ion-radio"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/radio/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/radio/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/radio/props.md';
-import Events from '@site/static/auto-generated/radio/events.md';
-import Methods from '@site/static/auto-generated/radio/methods.md';
-import Parts from '@site/static/auto-generated/radio/parts.md';
-import CustomProps from '@site/static/auto-generated/radio/custom-props.md';
-import Slots from '@site/static/auto-generated/radio/slots.md';
+import Props from '@ionic-internal/component-api/v8/radio/props.md';
+import Events from '@ionic-internal/component-api/v8/radio/events.md';
+import Methods from '@ionic-internal/component-api/v8/radio/methods.md';
+import Parts from '@ionic-internal/component-api/v8/radio/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/radio/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/radio/slots.md';
- ion-radio Component: Radio Property for iOS and Android
-
+ ion-radio: Radio Component for iOS and Android
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
+ラジオは、[ラジオグループ](./radio-group)の中で使用する必要があります。ラジオを押すと、そのラジオがチェックされ、前に選択されていたラジオがある場合は、そのチェックが解除されます。また、親ラジオグループのvalueプロパティをラジオの値に設定することで、プログラム的にチェックすることもできます。
+
+ラジオがラジオグループの中にある場合、いつでもチェックされるのは1つのラジオだけです。複数の項目を選択する場合は、[checkboxes](./checkbox)を代わりに使用する必要があります。ラジオをグループ内で無効にすると、ラジオとの相互作用を防ぐことができます。
+
+## 基本的な使い方
+
+import Basic from '@site/static/usage/v8/radio/basic/index.md';
+
+
+
+## Label Placement
+
+開発者は `labelPlacement` プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。 このプロパティはフレックスボックスの `flex-direction` プロパティを反映しています。
+
+import LabelPlacement from '@site/static/usage/v8/radio/label-placement/index.md';
+
+
+
+## Object Value References
+
+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.
+
+import UsingComparewith from '@site/static/usage/v8/radio/using-comparewith/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/v8/radio/alignment/index.md';
+
+
+
+## Justification
+
+開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの `justify-content` プロパティを反映しています。
+
+import Justify from '@site/static/usage/v8/radio/justify/index.md';
+
+
+
+:::note
+`ion-item`は、`justify`がどのように機能するかを強調するためにデモで使用されているだけです。 `justify` が正しく機能するために必須ではありません。
+:::
+
+## ラジオの選択を解除する
+
+デフォルトでは、一度選択されたラジオは選択を解除することができず、もう一度押すと選択されたままになります。この動作は、親ラジオグループの `allowEmptySelection` プロパティを使用することで変更することができ、ラジオを非選択にすることができます。
+
+import EmptySelection from '@site/static/usage/v8/radio/empty-selection/index.md';
+
+## Helper & Error Text
-Radios should be used inside of an [`ion-radio-group`](radio-group.md). Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent `ion-radio-group` to the value of the radio.
+Helper and error text can be used inside of a radio group with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-radio-group`. This ensures errors are not shown before the user has a chance to enter data.
-When radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time.
+In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation.
+import HelperError from '@site/static/usage/v8/radio/helper-error/index.md';
+
+## テーマ
+### Colors
-## Usage
+import Colors from '@site/static/usage/v8/radio/theming/colors/index.md';
-
+
-
+## CSSカスタムプロパティ
-```html
-
-
-
- Name
-
+import CSSProps from '@site/static/usage/v8/radio/theming/css-properties/index.md';
-
- Biff
-
-
+
-
- Griff
-
-
+### CSS Shadow Parts
-
- Buford
-
-
-
-
-```
+import CSSParts from '@site/static/usage/v8/radio/theming/css-shadow-parts/index.md';
+
-
+## Legacy Radio Syntaxからの移行
+Ionic 7.0では、よりシンプルなラジオ構文が導入されました。この新しい構文は、ラジオを設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
-
+開発者は、この移行を一度に1つのラジオで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。
-```html
-
-
-
- Name
-
+### 最新の構文の使い方
-
- Biff
-
-
+最新の構文を使用するには、`ion-label`を削除して、`ion-radio`の内部にラベルを直接渡します。ラベルの配置は `ion-radio` の `labelPlacement` プロパティを使用して設定することができます。ラベルとコントロールの行の詰め方は、`ion-radio` の `justify` プロパティを使用して制御することができます。
-
- Griff
-
-
+import Migration from '@site/static/usage/v8/radio/migration/index.md';
-
- Buford
-
-
-
-
-```
+
-
+:::note
+Ionic の過去のバージョンでは、`ion-radio` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 からは、`ion-radio` は `ion-item` の中で、そのアイテムが `ion-list` に配置される場合にのみ使用されます。また、`ion-radio`が正しく機能するためには、`ion-item`はもはや必須ではありません。
+:::
+### レガシー構文の使用
-
+Ionicは、アプリが最新の無線構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-radio` の `legacy` プロパティを `true` に設定することで、その無線機のインスタンスがレガシー構文を使用するように強制できます。
-```tsx
-import React, { useState } from 'react';
-import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonItemDivider } from '@ionic/react';
-export const RadioExamples: React.FC = () => {
- const [selected, setSelected] = useState('biff');
- return (
-
-
-
- Radio Examples
-
-
-
-
- setSelected(e.detail.value)}>
-
- Name
-
-
- Biff
-
-
-
-
- Griff
-
-
-
-
- Buford
-
-
-
- Your Selection
- {selected ?? '(none selected'}
-
-
-
- );
-};
-```
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'radio-example',
- styleUrl: 'radio-example.css'
-})
-export class RadioExample {
- render() {
- return [
-
-
-
- Name
-
-
-
- Biff
-
-
-
-
- Griff
-
-
-
-
- Buford
-
-
-
-
- ];
- }
-}
-```
-
-
-
-
-
-
-
-```html
-
-
-
-
- Name
-
-
-
- Biff
-
-
-
-
- Griff
-
-
-
-
- Buford
-
-
-
-
-
-
-
-```
-
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/range.md b/docs/api/range.md
index 37e0596e84a..635cd2d2c8c 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -1,106 +1,158 @@
---
title: "ion-range"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/range/props.md';
-import Events from '@site/static/auto-generated/range/events.md';
-import Methods from '@site/static/auto-generated/range/methods.md';
-import Parts from '@site/static/auto-generated/range/parts.md';
-import CustomProps from '@site/static/auto-generated/range/custom-props.md';
-import Slots from '@site/static/auto-generated/range/slots.md';
+import Props from '@ionic-internal/component-api/v8/range/props.md';
+import Events from '@ionic-internal/component-api/v8/range/events.md';
+import Methods from '@ionic-internal/component-api/v8/range/methods.md';
+import Parts from '@ionic-internal/component-api/v8/range/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/range/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/range/slots.md';
- Range Slider | ion-range: Slider Knob Controls with Labels
-
+ ion-range: Range Slider Knob Controls with Labels
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-The Range slider lets users select from a range of values by moving the slider knob. By default one knob controls the value of the range. This behavior can be customized using [dual knobs](#dual-knobs).
+Rangeスライダは、スライダノブを動かして、ユーザーが値の範囲を選択できるようにするものです。デフォルトでは、1つのノブがレンジの値を制御します。この動作は [dual knobs](#dual-knobs) を使ってカスタマイズすることができます。
+
+デフォルトでは、Rangeスライダーの最小値は`0`、最大値は`100`です。これは `min` と `max` プロパティで設定することができます。
+
+## Labels
+
+ラベルは、範囲を説明するために使用されるべきです。それらは視覚的に使用することができ、また、ユーザーがRangeをフォーカスしてるときに、スクリーンリーダーによって読み上げられます。これにより、ユーザーは範囲の意図を理解しやすくなります。範囲にはラベルを割り当てるいくつかの方法があります：
+
+- `label`プロパティ：プレーンテキストのラベルに使用する。
+- `label`スロット：カスタム HTML ラベルに使用する。
+- `aria-label`: スクリーンリーダー用のラベルとして使用されるが、ラベルは表示されない。
+
+### Label Placement
+
+以下のデモでは、`labelPlacement` プロパティを使用して、範囲に対するラベルの位置を変更しています。ここでは `label` プロパティを使用しているが、`labelPlacement` は `label` スロットでも使用できます。
+
+import LabelsPlayground from '@site/static/usage/v8/range/labels/index.md';
+
+
+
+### Label Slot
+
+プレーンテキストのラベルは `label` プロパティで渡すべきであるが、カスタムHTMLが必要な場合は、代わりに `label` スロットで渡すことができます。
+
+import LabelSlotPlayground from '@site/static/usage/v8/range/label-slot/index.md';
+
+
+
+### No Visible Label
-By default the Range slider has a minimum value of `0` and a maximum value of `100`. This can be configured with the `min` and `max` properties.
+もし表示するラベルが必要ない場合でも、開発者は`aria-label`を与えるべきです。
-import Basic from '@site/static/usage/range/basic/index.md';
+import NoVisibleLabel from '@site/static/usage/v8/range/no-visible-label/index.md';
-
+
-## Range Labels
+## Decorations
-Labels and custom UI elements can be slotted on either side of the range by adding `slot="start"` or `slot="end"` to the element. The element can be any element, such as an `ion-label`, `ion-icon` or a `div`. If the directionality of the document is set to left to right, the contents slotted to the `start` position will display to the left of the range, where as contents slotted to the `end` position will display to the right of the range. In right to left (rtl) directionality, the contents slotted to the `start` position will display to the right of the range, where as contents slotted to the `end` position` will display to the left of the range.
+装飾的な要素は、範囲の `start` または `end` スロットに渡すことができます。これは、音量の小さいアイコンや大きいアイコンのようなアイコンを追加するのに便利です。これらの要素は装飾的なものなので、スクリーンリーダーのような支援技術によってアナウンスされるべきではありません。
-import SlotsPlayground from '@site/static/usage/range/slots/index.md';
+ドキュメントの方向性が左から右に設定されている場合、`start`位置にスロットされたコンテンツは範囲の左に表示され、`end`位置にスロットされたコンテンツは範囲の右に表示されます。右から左(rtl)の方向性の場合、`start`位置にスロットされたコンテンツは範囲の右側に表示され、`end`位置にスロットされたコンテンツは範囲の左側に表示されます。
-
+import DecorationsPlayground from '@site/static/usage/v8/range/slots/index.md';
+
+
## Dual Knobs
-Dual knobs introduce two knob controls that users can use to select a value at a lower and upper bounds. When selected, the Range will emit an `ionChange` event with a [RangeValue](#rangevalue), containing the upper and lower values selected.
+Dual knobs はユーザーが下限と上限の値を選択するために使用できる2つのknobsコントロールを導入しています。選択されると、Range は選択された上下限の値を含む [RangeValue](#rangevalue) を持つ `ionChange` イベントを発信します。
-import DualKnobs from '@site/static/usage/range/dual-knobs/index.md';
+import DualKnobs from '@site/static/usage/v8/range/dual-knobs/index.md';
-## Pins
+## ピン
-The `pin` attribute will display the value of the Range above the knob when dragged. This allows users to select a specific value within the Range.
+`pin` 属性は、ドラッグしたときにノブの上にレンジの値を表示します。これにより、ユーザはRange内の特定の値を選択することができます。
-With the `pinFormatter` function, developers can customize the formatting of the range value to the user.
+`pinFormatter` 関数を使用すると、開発者はユーザーに対してレンジの値のフォーマットをカスタマイズすることができます。
-import Pins from '@site/static/usage/range/pins/index.md';
+import Pins from '@site/static/usage/v8/range/pins/index.md';
## Snapping & Ticks
-Ticks show indications for each available value on the Range. In order to use ticks, developers must set both `snaps` and the `ticks` property to `true`.
+TicksはRange 上で利用可能な各値のインジケータを表示します。Ticksを使用するためには、開発者は `snaps` と `ticks` プロパティの両方を `true` に設定する必要があります。
-With snapping enabled, the Range knob will snap to the nearest available value as the knob is dragged and released.
+snapsを有効にし、knobをドラッグして放すと、Range knobは最も近い利用可能な値にスナップします。
-import SnappingTicks from '@site/static/usage/range/snapping-ticks/index.md';
+import SnappingTicks from '@site/static/usage/v8/range/snapping-ticks/index.md';
-## Event Handling
+## イベントハンドリング
### Using `ionChange`
-The `ionChange` event emits as the Range knob value changes.
+`ionChange` イベントはRange knobの値の変更を監視します。
-import IonChangeEvent from '@site/static/usage/range/ion-change-event/index.md';
+import IonChangeEvent from '@site/static/usage/v8/range/ion-change-event/index.md';
-### Using `ionKnobMoveStart` and `ionKnobMoveEnd`
+### `ionKnobMoveStart` と `ionKnobMoveEnd` を使う
-The `ionKnobMoveStart` event emits when the Range knob begins dragging, whether through mouse drag, touch gesture or keyboard interaction. Inversely, `ionKnobMoveEnd` emits when the Range knob is released. Both events emit with the `RangeValue` type and work in combination with the `dualKnobs` property.
+マウスドラッグ、タッチジェスチャー、キーボード操作のいずれであっても、Range knobのドラッグが開始されると `ionKnobMoveStart` イベントが発行されます。逆に、`ionKnobMoveEnd`はRange knobがリリースされたときに発生します。両イベントは `RangeValue` タイプで発生し、`dualKnobs` プロパティと組み合わせて動作します。
-import IonKnobMoveEvent from '@site/static/usage/range/ion-knob-move-event/index.md';
+import IonKnobMoveEvent from '@site/static/usage/v8/range/ion-knob-move-event/index.md';
-## Styling
+## テーマ
+
+## CSSカスタムプロパティ
+
+Rangeには、アプリケーションのデザインに合わせてRangeコンポーネントの外観を素早くテーマ化してカスタマイズするための[CSS Variables](#css-custom-properties)が含まれています。
+
+import CSSProps from '@site/static/usage/v8/range/theming/css-properties/index.md';
+
+
+
+### CSS Shadow Parts
+
+Rangeには [CSS Shadow Parts](#css-shadow-parts) があり、Rangeコンポーネント内の特定の要素ノードを完全にカスタマイズすることができます。CSS Shadow Partsは最も多くのカスタマイズ機能を提供し、Rangeコンポーネントで高度なスタイリングが必要な場合に推奨されるアプローチです。
+
+import CSSParts from '@site/static/usage/v8/range/theming/css-shadow-parts/index.md';
+
+
+
+## レガシーな範囲構文からの移行
+
+Ionic 7.0では、よりシンプルな範囲構文が導入されました。この新しい構文は、範囲を設定するために必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。
+
+開発者はこの移行を範囲ごとに実行できます。開発者は従来の構文を使い続けることもできますが、できるだけ早く移行することをお勧めします。
+
+### 最新の構文の使い方
+
+最新の構文を使用するには、`ion-label` を削除し、`label` プロパティを使用して `ion-range` にラベルを渡します。ラベルの配置は `labelPlacement` プロパティを使用して設定することができます。
-### Styling with CSS Variables
+ラベルにカスタム HTML が必要な場合は、代わりに `label` スロットを使用して `ion-range` 内に直接渡すことができる。
-Range includes [CSS Variables](#css-custom-properties) to quickly theme and customize the appearance of the Range component to match your application's design.
+import Migration from '@site/static/usage/v8/range/migration/index.md';
-import CssVariablesPlayground from '@site/static/usage/range/css-variables/index.md';
+
-
-### Styling with CSS Shadow Parts
+:::note
+Ionic の過去のバージョンでは、`ion-range` が正しく機能するためには `ion-item` が必要でした。Ionic 7.0 以降では、`ion-range` は `ion-item` 内でアイテムを `ion-list` に配置する場合にのみ使用します。また、`ion-range` が正しく機能するためには、`ion-item` は不要になりました。
+:::
-Range includes [CSS Shadow Parts](#css-shadow-parts) to allow complete customization of specific element nodes within the Range component. CSS Shadow Parts offer the most customization capabilities and are the recommended approach when requiring advance styling with the Range component.
+### レガシー構文の使用
-import CssShadowPartsPlayground from '@site/static/usage/range/css-shadow-parts/index.md';
+Ionicは、アプリが最新の範囲構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けた方が望ましいこともあります。開発者は `ion-range` の `legacy` プロパティを `true` に設定することで、そのインスタンスにレガシー構文を使用させることができます。
-
## Interfaces
@@ -130,7 +182,7 @@ interface RangeKnobMoveEndEventDetail {
### RangeCustomEvent
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
```typescript
interface RangeCustomEvent extends CustomEvent {
@@ -148,20 +200,20 @@ type RangeValue = number | { lower: number, upper: number };
```
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.md
index 837090b7880..d127d60354a 100644
--- a/docs/api/refresher-content.md
+++ b/docs/api/refresher-content.md
@@ -1,54 +1,35 @@
---
title: "ion-refresher-content"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/refresher-content/props.md';
-import Events from '@site/static/auto-generated/refresher-content/events.md';
-import Methods from '@site/static/auto-generated/refresher-content/methods.md';
-import Parts from '@site/static/auto-generated/refresher-content/parts.md';
-import CustomProps from '@site/static/auto-generated/refresher-content/custom-props.md';
-import Slots from '@site/static/auto-generated/refresher-content/slots.md';
-
-
+import Props from '@ionic-internal/component-api/v8/refresher-content/props.md';
+import Events from '@ionic-internal/component-api/v8/refresher-content/events.md';
+import Methods from '@ionic-internal/component-api/v8/refresher-content/methods.md';
+import Parts from '@ionic-internal/component-api/v8/refresher-content/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/refresher-content/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/refresher-content/slots.md';
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-
Contents
-
-
-
-
-
-The refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic provides the pulling icon and refreshing spinner based on the platform. However, the default icon, spinner, and text can be customized based on the state of the refresher.
+リフレッシュコンテンツには、プルトゥリフレッシュ時に表示するテキスト、アイコン、スピナーが含まれます。Ionicは、プラットフォームに基づいて、プルアイコンとリフレッシュスピナーを表示します。ただし、デフォルトのアイコン、スピナー、テキストは、リフレッシュの状態に応じてカスタマイズできます。
+使用例については、[Refresher](/docs/api/refresher)ドキュメントを参照してください。
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/refresher.md b/docs/api/refresher.md
index 3e74f331e33..a34f4612474 100644
--- a/docs/api/refresher.md
+++ b/docs/api/refresher.md
@@ -1,369 +1,143 @@
---
title: "ion-refresher"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/refresher/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/refresher/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/refresher/props.md';
-import Events from '@site/static/auto-generated/refresher/events.md';
-import Methods from '@site/static/auto-generated/refresher/methods.md';
-import Parts from '@site/static/auto-generated/refresher/parts.md';
-import CustomProps from '@site/static/auto-generated/refresher/custom-props.md';
-import Slots from '@site/static/auto-generated/refresher/slots.md';
+import Props from '@ionic-internal/component-api/v8/refresher/props.md';
+import Events from '@ionic-internal/component-api/v8/refresher/events.md';
+import Methods from '@ionic-internal/component-api/v8/refresher/methods.md';
+import Parts from '@ionic-internal/component-api/v8/refresher/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/refresher/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/refresher/slots.md';
ion-refresher: Pull-to-Refresh Page Content on Ionic Apps
-
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
Contents
+リフレッシャーは、コンテンツコンポーネントにプルトゥリフレッシュ機能を提供します。pull-to-refreshパターンは、ユーザがより多くのデータを取得するために、データのリストをプルダウンすることを可能にします。
-
+データは、リフレッシャーの出力イベント中に変更する必要があります。非同期処理が完了し、リフレッシュが終了したら、リフレッシュに対して `complete()` を呼び出す必要があります。
+## 基本的な使い方
-The refresher provides pull-to-refresh functionality on a content component.
-The pull-to-refresh pattern lets a user pull down on a list of data using touch
-in order to retrieve more data.
+import Basic from '@site/static/usage/v8/refresher/basic/index.md';
-Data should be modified during the refresher's output events. Once the async
-operation has completed and the refreshing should end, call `complete()` on the
-refresher.
+
-## Native Refreshers
-Both iOS and Android platforms provide refreshers that take advantage of properties exposed by their respective devices that give pull to refresh a fluid, native-like feel.
+## Pull プロパティ
-Certain properties such as `pullMin` and `snapbackDuration` are not compatible because much of the native refreshers are scroll-based. See [Refresher Properties](#properties) for more information.
+リフレッシャーには、引くジェスチャーをカスタマイズするためのプロパティがいくつかあります。 `pullFactor` プロパティを設定すると引っ張るスピードを、`pullMin` プロパティを設定するとユーザが引っ張る最小距離を、`pullMax` プロパティを設定するとリフレッシャーが `refreshing` 状態になる前にユーザが引っ張る最大距離を変更することができます。
-### iOS Usage
+これらのプロパティは、[native refresher](#native-refreshers)が有効な場合には適用されません。
-Using the iOS native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [Spinner Documentation](spinner.md#properties) for accepted values. The `pullingIcon` defaults to the `lines` spinner on iOS. The spinner tick marks will be progressively shown as the user pulls down on the page.
+import PullProperties from '@site/static/usage/v8/refresher/pull-properties/index.md';
-The iOS native `ion-refresher` relies on rubber band scrolling in order to work properly and is only compatible with iOS devices as a result. We provide a fallback refresher for apps running in iOS mode on devices that do not support rubber band scrolling.
+
-### Android Usage
-Using the MD native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [ion-spinner Documentation](spinner.md#properties) for accepted values. `pullingIcon` defaults to the `circular` spinner on MD.
+## カスタムリフレッシャーコンテンツ
-### Virtual Scroll Usage
+デフォルトのアイコン、スピナー、テキストは、リフレッシャーの状態が `pulling` か `refreshing` かによって、[リフレッシャーコンテンツ](./refresher-content) 上でカスタマイズすることができます。
-Refresher requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target.
+`pullingIcon`を設定すると、[native refresher](#native-refreshers)が無効になります。
-```html
-
-
-
-
-
-
-
-
-```
+import CustomContent from '@site/static/usage/v8/refresher/custom-content/index.md';
-## Interfaces
+
-### RefresherEventDetail
-```typescript
-interface RefresherEventDetail {
- complete(): void;
-}
-```
+## Native Refreshers
-### RefresherCustomEvent
+iOSとAndroidの両プラットフォームは、pull-to-refreshにネイティブのような流動的な感覚を与えるために、それぞれのデバイスが公開するプロパティを使用するリフレッシュ機能を提供します。
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+iOSとMaterial Designのネイティブリフレッシュ機能は、Ionicのデフォルトで有効になっています。ただし、iOSネイティブのリフレッシュ機能は、正しく動作するためにラバーバンドスクロールに依存しており、結果としてiOSデバイスとのみ互換性があります。ラバーバンドスクロールをサポートしていないデバイスでiOSモードで動作するアプリのために、フォールバックリフレッシャーを提供しています。
-```typescript
-interface RefresherCustomEvent extends CustomEvent {
- detail: RefresherEventDetail;
- target: HTMLIonRefresherElement;
-}
-```
+ネイティブのリフレッシャーでは、マテリアルデザイン用の `circular` スピナーを使用しますが、iOS では `lines` スピナーを使用します。iOSでは、ティックマークはページが下に引っ張られるにつれて徐々に表示されます。
+[Pullプロパティ](#pull-properties)、`closeDuration`、`snapbackDuration`のような特定のリフレッシャープロパティは、ネイティブリフレッシャーの多くがスクロールベースであるため、互換性がありません。サポートされていないプロパティの詳細については、[Properties](#properties)を参照してください。
+[リフレッシュコンテンツ](#custom-refresher-content)の `pullingIcon` を任意のアイコンまたはスピナーに設定することで、ネイティブリフレッシュモードを無効にすることができます。使用可能な値については、[Ionicons](https://ionic.io/ionicons) および [Spinner](./spinner) のドキュメントを参照してください。
-## Usage
-
+## Usage with Virtual Scroll
-
+Refresher が機能するためには、スクロールコンテナが必要です。仮想スクロールを使用する場合は、`ion-content` のスクロールを無効にし、`.ion-content-scroll-host` クラスターゲットで、どの要素コンテナがスクロールコンテナを担当するかを指定する必要があります。
-```html
-
-
-
-
-
-
+Developers should apply the following CSS to the scrollable container. This CSS adds a "rubber band" scrolling effect on iOS which allows the native iOS refresher to work properly:
-
-
-
-
-
-
+```css
+.ion-content-scroll-host::before,
+.ion-content-scroll-host::after {
+ position: absolute;
+
+ width: 1px;
+ height: 1px;
+
+ content: "";
+}
-
-
-
-
-
-
-
-```
+.ion-content-scroll-host::before {
+ bottom: -1px;
+}
-```typescript
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'refresher-example',
- templateUrl: 'refresher-example.html',
- styleUrls: ['./refresher-example.css'],
-})
-export class RefresherExample {
- constructor() {}
-
- doRefresh(event) {
- console.log('Begin async operation');
-
- setTimeout(() => {
- console.log('Async operation has ended');
- event.target.complete();
- }, 2000);
- }
+.ion-content-scroll-host::after {
+ top: -1px;
}
```
-
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
+import CustomScrollTarget from '@site/static/usage/v8/refresher/custom-scroll-target/index.md';
-
+
-
+## 高度な使用法
-```tsx
-import React from 'react';
-import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react';
-import { RefresherEventDetail } from '@ionic/core';
-import { chevronDownCircleOutline } from 'ionicons/icons';
+リフレッシャーはどのようなタイプのコンテンツでも使用できますが、ネイティブアプリでよくある使用例は、更新時に更新されるデータのリストを表示することです。以下の例では、アプリはデータのリストを生成し、更新が完了したときにリストの先頭にデータを追加します。実際のアプリでは、ネットワークまたはデータベース呼び出しによってリクエストを送信した後に、データを受信して更新します。
-function doRefresh(event: CustomEvent) {
- console.log('Begin async operation');
+import Advanced from '@site/static/usage/v8/refresher/advanced/index.md';
- setTimeout(() => {
- console.log('Async operation has ended');
- event.detail.complete();
- }, 2000);
-}
+
-export const RefresherExample: React.FC = () => (
-
- {/*-- Default Refresher --*/}
-
-
-
-
-
-
- {/*-- Custom Refresher Properties --*/}
-
-
-
-
-
-
- {/*-- Custom Refresher Content --*/}
-
-
-
-
-
-
-
-);
-```
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'refresher-example',
- styleUrl: 'refresher-example.css'
-})
-export class RefresherExample {
- doRefresh(ev: any) {
- console.log('Begin async operation');
-
- setTimeout(() => {
- console.log('Async operation has ended');
- ev.target.complete();
- }, 2000);
- }
-
- render() {
- return [
- // Default Refresher
-
- this.doRefresh(ev)}>
-
-
- ,
-
- // Custom Refresher Properties
-
-
-
-
- ,
-
- // Custom Refresher Content
-
- this.doRefresh(ev)}>
-
-
-
-
- ];
- }
+## Interfaces
+
+### RefresherEventDetail
+
+```typescript
+interface RefresherEventDetail {
+ complete(): void;
}
```
-
-
-
-
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
+### RefresherCustomEvent
-
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
-
+```typescript
+interface RefresherCustomEvent extends CustomEvent {
+ detail: RefresherEventDetail;
+ target: HTMLIonRefresherElement;
+}
+```
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md
index a82e419cb2e..1ca8e35510b 100644
--- a/docs/api/reorder-group.md
+++ b/docs/api/reorder-group.md
@@ -1,77 +1,25 @@
---
title: "ion-reorder-group"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/reorder-group/props.md';
-import Events from '@site/static/auto-generated/reorder-group/events.md';
-import Methods from '@site/static/auto-generated/reorder-group/methods.md';
-import Parts from '@site/static/auto-generated/reorder-group/parts.md';
-import CustomProps from '@site/static/auto-generated/reorder-group/custom-props.md';
-import Slots from '@site/static/auto-generated/reorder-group/slots.md';
+import Props from '@ionic-internal/component-api/v8/reorder-group/props.md';
+import Events from '@ionic-internal/component-api/v8/reorder-group/events.md';
+import Methods from '@ionic-internal/component-api/v8/reorder-group/methods.md';
+import Parts from '@ionic-internal/component-api/v8/reorder-group/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/reorder-group/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/reorder-group/slots.md';
- ion-reorder-group: Wrapper Component for Ionic Framework Apps
-
+ ion-reorder-group: Wrapper Component for Reorder Items
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
-
-
Contents
-
-
-
-
-
-The reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](reorder.md) for further information about the anchor component that is used to drag items within the `ion-reorder-group`.
-
-Once the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for it should be implemented that calls the `complete()` method.
-
-The `detail` property of the `ionItemReorder` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index.
-## Completing a Reorder
-When the `ionItemReorder` event is dispatched, developers have the option to call the `complete()` method on `ion-reorder-group`. This will complete the reorder operation.
+reorder groupは、[reorder](./reorder) コンポーネントを使用したアイテムのコンテナです。ユーザがアイテムをドラッグして新しい位置にドロップすると、 `ionItemReorder` イベントがディスパッチされる。このイベントのハンドラは `complete` メソッドを呼び出すように実装する必要があります。
-By default, the `complete()` method will re-order the DOM nodes inside of `ion-reorder-group`.
+`ionItemReorder` イベントの `detail` プロパティには、`from` と `to` インデックスを含む、並べ替え操作に関するすべての関連情報が含まれます。並び替えのコンテキストでは、アイテムは `from` インデックスから `to` インデックスに移動します。reorder groupの使用例については、[reorder](./reorder) のドキュメントを参照してください。
-For developers who need to sort an array based on the order of the items in `ion-reorder-group`, we recommend passing the array as a parameter in `complete()`. Ionic will sort and return the array so that it can be reassigned.
-
-In some cases, it may be necessary for an app to re-order both the array and the DOM nodes on its own. When this happens, it is recommended to pass `false` to the `complete()` method. This will prevent Ionic from re-ordering any DOM nodes inside of `ion-reorder-group`.
-
-## Usage with Virtual Scroll
-
-The reorder group requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target.
-
-```html
-
-
-
-
-
- Item 1
-
-
-
-
-
- Item 2
-
-
-
-
-
-
-```
## Interfaces
@@ -87,7 +35,7 @@ interface ItemReorderEventDetail {
### ItemReorderCustomEvent
-While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。
```typescript
interface ItemReorderCustomEvent extends CustomEvent {
@@ -97,674 +45,20 @@ interface ItemReorderCustomEvent extends CustomEvent {
```
-
-## Usage
-
-
-
-
-
-```html
-
-
-
-
-
- Item 1
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
- Item 4
-
-
-
-
-
-
- Item 5
-
-
-
-
-
-
-
-
- Item 6
-
-
-
-
-
-
-
-
-
-
- Item 7
-
-
-
-
-
-
-
- Item 8
-
-
-
-
-```
-
-```javascript
-import { Component, ViewChild } from '@angular/core';
-import { IonReorderGroup } from '@ionic/angular';
-import { ItemReorderEventDetail } from '@ionic/core';
-
-@Component({
- selector: 'reorder-group-example',
- templateUrl: 'reorder-group-example.html',
- styleUrls: ['./reorder-group-example.css']
-})
-export class ReorderGroupExample {
- @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;
-
- constructor() {}
-
- doReorder(ev: CustomEvent) {
- // The `from` and `to` properties contain the index of the item
- // when the drag started and ended, respectively
- console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
-
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. This method can also be called directly
- // by the reorder group
- ev.detail.complete();
- }
-
- toggleReorderGroup() {
- this.reorderGroup.disabled = !this.reorderGroup.disabled;
- }
-}
-```
-
-### Updating Data
-
-```javascript
-import { Component, ViewChild } from '@angular/core';
-import { IonReorderGroup } from '@ionic/angular';
-import { ItemReorderEventDetail } from '@ionic/core';
-
-@Component({
- selector: 'reorder-group-example',
- templateUrl: 'reorder-group-example.html',
- styleUrls: ['./reorder-group-example.css']
-})
-export class ReorderGroupExample {
- items = [1, 2, 3, 4, 5];
-
- @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup;
-
- constructor() {}
-
- doReorder(ev: CustomEvent) {
- // Before complete is called with the items they will remain in the
- // order before the drag
- console.log('Before complete', this.items);
-
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. Update the items variable to the
- // new order of items
- this.items = ev.detail.complete(this.items);
-
- // After complete is called the items will be in the new order
- console.log('After complete', this.items);
- }
-}
-```
-
-
-
-
-
-
-
-```html
-
-
-
-
-
- Item 1
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
- Item 4
-
-
-
-
-
-
- Item 5
-
-
-
-
-
-
-
-
- Item 6
-
-
-
-
-
-
-
-
-
-
- Item 7
-
-
-
-
-
-
-
- Item 8
-
-
-
-
-```
-
-```javascript
-const reorderGroup = document.querySelector('ion-reorder-group');
-
-reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
- // The `from` and `to` properties contain the index of the item
- // when the drag started and ended, respectively
- console.log('Dragged from index', detail.from, 'to', detail.to);
-
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. This method can also be called directly
- // by the reorder group
- detail.complete();
-});
-```
-
-### Updating Data
-
-```javascript
-const items = [1, 2, 3, 4, 5];
-const reorderGroup = document.querySelector('ion-reorder-group');
-
-reorderGroup.addEventListener('ionItemReorder', ({detail}) => {
- // Before complete is called with the items they will remain in the
- // order before the drag
- console.log('Before complete', items);
-
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. Update the items variable to the
- // new order of items
- items = detail.complete(items);
-
- // After complete is called the items will be in the new order
- console.log('After complete', items);
-});
-```
-
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon, IonContent } from '@ionic/react';
-import { ItemReorderEventDetail } from '@ionic/core';
-import { pizza } from 'ionicons/icons';
-
-function doReorder(event: CustomEvent) {
- // The `from` and `to` properties contain the index of the item
- // when the drag started and ended, respectively
- console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
-
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. This method can also be called directly
- // by the reorder group
- event.detail.complete();
-}
-
-export const ReorderGroupExample: React.FC = () => (
-
- {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
-
- {/*-- Default reorder icon, end aligned items --*/}
-
- Item 1
-
-
-
-
- Item 2
-
-
-
- {/*-- Default reorder icon, start aligned items --*/}
-
-
- Item 3
-
-
-
-
- Item 4
-
-
- {/*-- Custom reorder icon end items --*/}
-
- Item 5
-
-
-
-
-
-
- Item 6
-
-
-
-
-
- {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
-
-
- Item 7
-
-
-
-
-
- Item 8
-
-
-
-
-);
-```
-
-### Updating Data
-
-```tsx
-const items = [1, 2, 3, 4, 5];
-
-function doReorder(event: CustomEvent) {
- // Before complete is called with the items they will remain in the
- // order before the drag
- console.log('Before complete', this.items);
-
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. Update the items variable to the
- // new order of items
- this.items = event.detail.complete(this.items);
-
- // After complete is called the items will be in the new order
- console.log('After complete', this.items);
-}
-```
-
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'reorder-group-example',
- styleUrl: 'reorder-group-example.css'
-})
-export class ReorderGroupExample {
- doReorder(ev: any) {
- // The `from` and `to` properties contain the index of the item
- // when the drag started and ended, respectively
- console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to);
-
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. This method can also be called directly
- // by the reorder group
- ev.detail.complete();
- }
-
- render() {
- return [
- // The reorder gesture is disabled by default, enable it to drag and drop items
- this.doReorder(ev)} disabled={false}>
- {/* Default reorder icon, end aligned items */}
-
-
- Item 1
-
-
-
-
-
-
- Item 2
-
-
-
-
- {/* Default reorder icon, start aligned items */}
-
-
-
- Item 3
-
-
-
-
-
-
- Item 4
-
-
-
- {/* Custom reorder icon end items */}
-
-
- Item 5
-
-
-
-
-
-
-
-
- Item 6
-
-
-
-
-
-
- {/* Items wrapped in a reorder, entire item can be dragged */}
-
-
-
- Item 7
-
-
-
-
-
-
-
- Item 8
-
-
-
-
- ]
- }
-}
-```
-
-### Updating Data
-
-```tsx
-import { Component, State, h } from '@stencil/core';
-
-@Component({
- tag: 'reorder-group-example',
- styleUrl: 'reorder-group-example.css'
-})
-export class ReorderGroupExample {
- @State() items = [1, 2, 3, 4, 5];
-
- doReorder(ev: any) {
- // Before complete is called with the items they will remain in the
- // order before the drag
- console.log('Before complete', this.items);
-
- // Finish the reorder and position the item in the DOM based on
- // where the gesture ended. Update the items variable to the
- // new order of items
- this.items = ev.detail.complete(this.items);
-
- // After complete is called the items will be in the new order
- console.log('After complete', this.items);
- }
-
- render() {
- return [
- // The reorder gesture is disabled by default, enable it to drag and drop items
- this.doReorder(ev)} disabled={false}>
-
- {this.items.map(item =>
-
-
- Item { item }
-
-
-
- )}
-
-
- ]
- }
-}
-```
-
-
-
-
-
-
-```html
-
-
-
-
-
-
- Item 1
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
- Item 4
-
-
-
-
-
-
- Item 5
-
-
-
-
-
-
-
-
- Item 6
-
-
-
-
-
-
-
-
-
-
- Item 7
-
-
-
-
-
-
-
- Item 8
-
-
-
-
-
-
-
-```
-
-### Updating Data
-
-```html
-
-```
-
-
-
-
-
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index 1b63f0874eb..d92d9c335fc 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -1,480 +1,102 @@
---
title: "ion-reorder"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/reorder/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/reorder/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-
-import Props from '@site/static/auto-generated/reorder/props.md';
-import Events from '@site/static/auto-generated/reorder/events.md';
-import Methods from '@site/static/auto-generated/reorder/methods.md';
-import Parts from '@site/static/auto-generated/reorder/parts.md';
-import CustomProps from '@site/static/auto-generated/reorder/custom-props.md';
-import Slots from '@site/static/auto-generated/reorder/slots.md';
+import Props from '@ionic-internal/component-api/v8/reorder/props.md';
+import Events from '@ionic-internal/component-api/v8/reorder/events.md';
+import Methods from '@ionic-internal/component-api/v8/reorder/methods.md';
+import Parts from '@ionic-internal/component-api/v8/reorder/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/reorder/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/reorder/slots.md';
- Reorder | ion-reorder: Drag and Drop Icon to Reorder Items
-
+ ion-reorder: Drag and Drop Icon to Reorder Items
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
Contents
-
-
-
-
-Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface.
-
-`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](reorder-group.md) for more information on how to complete the reorder operation.
-
-
-
-
-## Usage
-
-
-
-
-
-
-```html
-
-
-
-
-
- Item 1
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
- Item 4
-
-
-
-
-
-
- Item 5
-
-
-
-
-
-
-
-
- Item 6
-
-
-
-
-
-
-
-
-
-
- Item 7
-
-
-
-
-
-
-
- Item 8
-
-
-
-
-```
-
-
-
-
-
-
-
-```html
-
-
-
-
-
- Item 1
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
- Item 4
-
-
-
-
-
-
- Item 5
-
-
-
-
-
-
-
-
- Item 6
-
-
-
-
-
-
-
-
-
-
- Item 7
-
-
-
-
-
-
-
- Item 8
-
-
-
-
-```
-
-
-
-
-
-
-```tsx
-import React from 'react';
-import { IonIcon, IonItem, IonLabel, IonReorder, IonReorderGroup, IonContent } from '@ionic/react';
-import { pizza } from 'ionicons/icons';
-
-export const ReorderExample: React.FC = () => (
-
- {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/}
-
- {/*-- Default reorder icon, end aligned items --*/}
-
- Item 1
-
-
-
-
- Item 2
-
-
-
- {/*-- Default reorder icon, start aligned items --*/}
-
-
- Item 3
-
-
-
-
- Item 4
-
-
- {/*-- Custom reorder icon end items --*/}
-
- Item 5
-
-
-
-
-
-
- Item 6
-
-
-
-
-
- {/*-- Items wrapped in a reorder, entire item can be dragged --*/}
-
-
- Item 7
-
-
-
-
-
- Item 8
-
-
-
-
-);
-```
-
-
-
-
-
-
-
-```tsx
-import { Component, h } from '@stencil/core';
-
-@Component({
- tag: 'reorder-example',
- styleUrl: 'reorder-example.css'
-})
-export class ReorderExample {
- render() {
- return [
- // The reorder gesture is disabled by default, enable it to drag and drop items
-
- {/* Default reorder icon, end aligned items */}
-
-
- Item 1
-
-
-
-
-
-
- Item 2
-
-
-
-
- {/* Default reorder icon, start aligned items */}
-
-
-
- Item 3
-
-
-
-
-
-
- Item 4
-
-
-
- {/* Custom reorder icon end items */}
-
-
- Item 5
-
-
-
-
-
-
-
-
- Item 6
-
-
-
-
-
-
- {/* Items wrapped in a reorder, entire item can be dragged */}
-
-
-
- Item 7
-
-
-
-
-
-
-
- Item 8
-
-
-
-
- ];
- }
-}
-```
-
-
-
-
-
-
-
-```html
-
-
-
-
-
-
- Item 1
-
-
-
-
-
-
- Item 2
-
-
-
-
-
-
-
-
- Item 3
-
-
-
-
-
-
- Item 4
-
-
-
-
-
-
- Item 5
-
-
-
-
-
-
-
-
- Item 6
-
-
-
-
-
-
-
-
-
-
- Item 7
-
-
-
-
-
-
-
- Item 8
-
-
-
-
-
-
-
-```
-
-
-
-
-
-## Properties
+Reorderは、アイテムのグループ内での順序を変更するためにアイテムをドラッグできるようにするコンポーネントです。視覚的なドラッグ＆ドロップのインターフェイスを提供するために、[reorder group](./reorder-group)内で使用されなければなりません。
+
+Reorderはアイテムをドラッグ＆ドロップするためのアンカーです。reorderが完了すると、reorder groupから `ionItemReorder` イベントがdispatchされ、`complete` メソッドを呼び出す必要があります。
+
+
+## 基本的な使い方
+
+Reorderの最も基本的な例は、アイテムの中にスロットを入れることです。デフォルトでは、reorder groupのreorder機能は無効になっています。reorder groupの `disabled` プロパティを `false` に設定することで有効にすることができます。Reorderアイコンを使ってアイテムをドラッグ＆ドロップし、並び替えることができます。
+
+import Basic from '@site/static/usage/v8/reorder/basic/index.md';
+
+
+
+
+## 並べ替えの切り替え
+
+場合によっては、並べ替えの機能を切り替えるオプションが欲しいかもしれない。これは、関数や変数に基づいて `disabled` プロパティをリアクティブにすることで実現できます。
+
+import TogglingDisabled from '@site/static/usage/v8/reorder/toggling-disabled/index.md';
+
+
+
+
+## Custom Reorder Icon
+
+Reorderコンポーネントは、iOSでは3行、Material Designでは2行のReorderアイコンを使用しています。これは、利用可能なIoniconのいずれかを使って、Reorderの中に[Icon](https://ionic.io/ionicons)コンポーネントを追加することでカスタマイズできます。
+
+import CustomIcon from '@site/static/usage/v8/reorder/custom-icon/index.md';
+
+
+
+
+## Reorder Wrapper
+
+並び替えは、項目を囲むラッパーとして使うこともできます。下の項目のどこかをクリックし、ドラッグすると、リストの順番を入れ替えることができます。
+
+import Wrapper from '@site/static/usage/v8/reorder/wrapper/index.md';
+
+
+
+
+## データの更新
+
+パラメータを指定せずに reorder グループに対して `complete` メソッドを呼び出すと、DOM ノードが並べ替えられます。項目がソートが必要なデータの配列からレンダリングされた場合、データと DOM が同期しない可能性があります。
+
+並べ替えの完了時に配列をソートするには、`complete` メソッドのパラメータとして配列を渡す必要があります。complete`メソッドは配列をソートして返し、再代入できるようにする。配列を渡すと、IonicはDOMノードの並び替えを行わないので注意してください。
+
+場合によっては、アプリが独自に配列と DOM ノードの両方を並べ替える必要があるかもしれません。その場合は `complete` メソッドに `false` をパラメータとして渡す必要があります。これにより、Ionicはreorder group内のDOMノードの並び替えを行わないようになります。
+
+どのようなアプローチを取るにせよ、ループの中でアイテムを提供する場合は、アイテムを並べ替えるための安定したIDを提供する必要があります。つまり、Angularでは `trackBy` を使用し、ReactとVueでは `key` を使用します。
+
+import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md';
+
+
+
+
+## 仮想スクロールでの使用
+
+Reorderを正しく動作させるには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを指定する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。
+
+import CustomScrollTarget from '@site/static/usage/v8/reorder/custom-scroll-target/index.md';
+
+
+
+
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md
index 8388c6670af..a64a3af8692 100644
--- a/docs/api/ripple-effect.md
+++ b/docs/api/ripple-effect.md
@@ -1,283 +1,67 @@
---
title: "ion-ripple-effect"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Props from '@ionic-internal/component-api/v8/ripple-effect/props.md';
+import Events from '@ionic-internal/component-api/v8/ripple-effect/events.md';
+import Methods from '@ionic-internal/component-api/v8/ripple-effect/methods.md';
+import Parts from '@ionic-internal/component-api/v8/ripple-effect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/ripple-effect/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/ripple-effect/slots.md';
-import Props from '@site/static/auto-generated/ripple-effect/props.md';
-import Events from '@site/static/auto-generated/ripple-effect/events.md';
-import Methods from '@site/static/auto-generated/ripple-effect/methods.md';
-import Parts from '@site/static/auto-generated/ripple-effect/parts.md';
-import CustomProps from '@site/static/auto-generated/ripple-effect/custom-props.md';
-import Slots from '@site/static/auto-generated/ripple-effect/slots.md';
+import EncapsulationPill from '@components/page/api/EncapsulationPill';
- ion-ripple-effect | Ripple Effect Button Component for Ionic Apps
-
+ ion-ripple-effect: Ripple Effect Component for Ionic Apps
+
-import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
Contents
-
-
-
-
-
-The ripple effect component adds the [Material Design ink ripple interaction effect](https://material.io/develop/web/supporting/ripple). This component can only be used inside of an `` and can be added to any component.
-
-It's important to note that the parent should have [relative positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position) because the ripple effect is absolutely positioned and will cover the closest parent with relative positioning. The parent element should also be given the `ion-activatable` class, which tells the ripple effect that the element is clickable.
-
-The default type, `"bounded"`, will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, add an `"unbounded"` type. It's recommended to add `overflow: hidden` to the parent element to avoid the ripple overflowing its container, especially with an unbounded ripple.
-
-
-
-## Usage
-
-
-
-
-
-```html
-
-
-
+リップル効果には2つのタイプがある： `"bounded"` と `"unbounded"` です。デフォルトのタイプである `"bounded"` は、クリック位置から外側に波及効果を広げます。常に要素の中心から始まり、円形に広がる波及効果を追加するには、タイプを `"unbounded"` に設定します。
-
+import Type from '@site/static/usage/v8/ripple-effect/type/index.md';
-
- A plain div with an unbounded ripple effect
-
-
+
-
-
-
-
-
+## カスタマイズ
-
-```
+import Customizing from '@site/static/usage/v8/ripple-effect/customizing/index.md';
-
+
-
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
-
\ No newline at end of file
+
diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.md
index beff634f922..c70ffa3d00e 100644
--- a/docs/api/route-redirect.md
+++ b/docs/api/route-redirect.md
@@ -1,58 +1,43 @@
---
title: "ion-route-redirect"
-hide_table_of_contents: true
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import Props from '@site/static/auto-generated/route-redirect/props.md';
-import Events from '@site/static/auto-generated/route-redirect/events.md';
-import Methods from '@site/static/auto-generated/route-redirect/methods.md';
-import Parts from '@site/static/auto-generated/route-redirect/parts.md';
-import CustomProps from '@site/static/auto-generated/route-redirect/custom-props.md';
-import Slots from '@site/static/auto-generated/route-redirect/slots.md';
+import Props from '@ionic-internal/component-api/v8/route-redirect/props.md';
+import Events from '@ionic-internal/component-api/v8/route-redirect/events.md';
+import Methods from '@ionic-internal/component-api/v8/route-redirect/methods.md';
+import Parts from '@ionic-internal/component-api/v8/route-redirect/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/route-redirect/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/route-redirect/slots.md';
- ion-route-redirect Plugin: Redirect 'from' a URL 'to' Another URL
-
+ ion-route-redirect: Redirect 'from' a URL 'to' Another URL
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
Contents
-
-
-
-
-
-A route redirect can only be used with an `ion-router` as a direct child of it.
+ルートリダイレクトは `ion-router` を直接の子としてのみ使うことができます。
:::note
- Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+ Note: このコンポーネントは、vanilla と Stencil での JavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
:::
-The route redirect has two configurable properties:
- - `from`
- - `to`
+ルートリダイレクトには、2つの設定可能なプロパティがあります。
+- `from`
+- `to`
-It redirects "from" a URL "to" another URL. When the defined `ion-route-redirect` rule matches, the router will redirect from the path specified in the `from` property to the path in the `to` property. In order for a redirect to occur the `from` path needs to be an exact match to the navigated URL.
+これは、ある URL から別の URL へとリダイレクトします。定義された `ion-route-redirect` ルールがマッチすると、ルータは `from` プロパティで指定されたパスから `to` プロパティで指定されたパスへリダイレクトします。リダイレクトを行うには、`from` のパスがナビゲートされる URL と完全に一致する必要があります。
-## Multiple Route Redirects
+## 複数ルートのリダイレクト
-An arbitrary number of redirect routes can be defined inside an `ion-router`, but only one can match.
+任意の数のリダイレクトルートを `ion-router` の内部で定義することができますが、合致するのは1つだけです。
-A route redirect will never call another redirect after its own redirect, since this could lead to infinite loops.
+ルートリダイレクトは、それ自身のリダイレクトの後に別のリダイレクトを呼び出すことはありません。
-Take the following two redirects:
+次の2つのリダイレクトを考えてみましょう。
```html
@@ -61,12 +46,12 @@ Take the following two redirects:
```
-If the user navigates to `/admin` the router will redirect to `/login` and stop there. It will never evaluate more than one redirect.
+ユーザーが `/admin` に移動した場合、ルーターは `/login` にリダイレクトし、そこで停止します。複数のリダイレクトを評価することはありません。
-## Usage
+## 使い方
```html
```
-### Route Redirects as Guards
+### ルートリダイレクトのガード
-Redirection routes can work as guards to prevent users from navigating to certain areas of an application based on a given condition, such as if the user is authenticated or not.
+リダイレクトルートは、ユーザーが認証されているかどうかなど、与えられた条件に基づいて、ユーザーがアプリケーションの特定の領域に移動するのを防ぐためのガードとして機能することができます。
-A route redirect can be added and removed dynamically to redirect (or guard) some routes from being accessed. In the following example, all urls `*` will be redirected to the `/login` url if `isLoggedIn` is `false`.
+ルートリダイレクトは動的に追加・削除することができ、一部のルートをアクセスできないようにリダイレクト（ガード）することができます。次の例では、 `isLoggedIn` が `false` の場合、すべての URL `*` は `/login` にリダイレクトされます。
```tsx
const isLoggedIn = false;
@@ -97,7 +82,7 @@ if (!isLoggedIn) {
}
```
-Alternatively, the value of `to` can be modified based on a condition. In the following example, the route redirect will check if the user is logged in and redirect to the `/login` url if not.
+また、`to`の値は条件に基づいて変更することもできます。次の例では、ルートリダイレクトはユーザーがログインしているかどうかをチェックし、ログインしていない場合は `/login` url にリダイレクトします。
```html
@@ -110,19 +95,19 @@ const routeRedirect = document.querySelector('#tutorialRedirect');
routeRedirect.setAttribute('to', isLoggedIn ? undefined : '/login');
```
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
diff --git a/docs/api/route.md b/docs/api/route.md
index 3c8764727ab..b84642e2be1 100644
--- a/docs/api/route.md
+++ b/docs/api/route.md
@@ -1,47 +1,34 @@
---
title: "ion-route"
-hide_table_of_contents: true
---
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
-import Props from '@site/static/auto-generated/route/props.md';
-import Events from '@site/static/auto-generated/route/events.md';
-import Methods from '@site/static/auto-generated/route/methods.md';
-import Parts from '@site/static/auto-generated/route/parts.md';
-import CustomProps from '@site/static/auto-generated/route/custom-props.md';
-import Slots from '@site/static/auto-generated/route/slots.md';
+import Props from '@ionic-internal/component-api/v8/route/props.md';
+import Events from '@ionic-internal/component-api/v8/route/events.md';
+import Methods from '@ionic-internal/component-api/v8/route/methods.md';
+import Parts from '@ionic-internal/component-api/v8/route/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/route/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/route/slots.md';
ion-route: API Route Component for Ionic Framework Apps
-
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
-
Contents
-
-
-
-
-
-The route component takes a component and renders it when the Browser URL matches the url property.
+ルートコンポーネントはコンポーネントを受け取り、ブラウザの URL が url プロパティと一致したときに、そのコンポーネントをレンダリングします。
:::note
- Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](router-outlet.md) and the Angular router.
+ Note: このコンポーネントは、vanilla と Stencil での JavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。
:::
-## Navigation Hooks
+## ナビゲーションフック
-Navigation hooks can be used to perform tasks or act as navigation guards. Hooks are used by providing functions to the `beforeEnter` and `beforeLeave` properties on each `ion-route`. Returning `true` allows navigation to proceed, while returning `false` causes it to be cancelled. Returning an object of type `NavigationHookOptions` allows you to redirect navigation to another page.
+ナビゲーションフックは、タスクを実行したり、ナビゲーションガードとして動作させるために使用することができます。フックは、各 `ion-route` の `beforeEnter` と `beforeLeave` プロパティに関数を提供することで使用します。`true` を返すとナビゲーションを進めることができ、`false` を返すとナビゲーションがキャンセルされる。NavigationHookOptions` 型のオブジェクトを返すと、ナビゲーションを別のページにリダイレクトすることができます。
## Interfaces
@@ -57,7 +44,7 @@ interface NavigationHookOptions {
-## Usage
+## 使い方
@@ -263,19 +250,19 @@ const confirmDiscardChanges = async () => {
-## Properties
+## プロパティ
-## Events
+## イベント
-## Methods
+## メソッド
## CSS Shadow Parts
-## CSS Custom Properties
+## CSSカスタムプロパティ
## Slots
diff --git a/docs/api/router-link.md b/docs/api/router-link.md
index ac7b3786de1..cd340172388 100644
--- a/docs/api/router-link.md
+++ b/docs/api/router-link.md
@@ -1,61 +1,44 @@
---
title: "ion-router-link"
-hide_table_of_contents: true
-demoUrl: "/docs/demos/api/router-link/index.html"
-demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/router-link/index.html"
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import Props from '@site/static/auto-generated/router-link/props.md';
-import Events from '@site/static/auto-generated/router-link/events.md';
-import Methods from '@site/static/auto-generated/router-link/methods.md';
-import Parts from '@site/static/auto-generated/router-link/parts.md';
-import CustomProps from '@site/static/auto-generated/router-link/custom-props.md';
-import Slots from '@site/static/auto-generated/router-link/slots.md';
+import Props from '@ionic-internal/component-api/v8/router-link/props.md';
+import Events from '@ionic-internal/component-api/v8/router-link/events.md';
+import Methods from '@ionic-internal/component-api/v8/router-link/methods.md';
+import Parts from '@ionic-internal/component-api/v8/router-link/parts.md';
+import CustomProps from '@ionic-internal/component-api/v8/router-link/custom-props.mdx';
+import Slots from '@ionic-internal/component-api/v8/router-link/slots.md';
- Router Link | Navigating The ion-router-link Component
-
+ ion-router-link: Navigate To a Specified Link
+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-import APITOCInline from '@components/page/api/APITOCInline';
-
})
| })
|
diff --git a/docs/angular/overview.md b/docs/angular/overview.md
index ce6cd60c6be..5d29843b7e6 100644
--- a/docs/angular/overview.md
+++ b/docs/angular/overview.md
@@ -1,6 +1,6 @@
---
-title: 'Ionic Angular Overview'
-sidebar_label: Overview
+title: Ionic Angular の概要
+sidebar_label: 概要
---
@@ -11,12 +11,36 @@ sidebar_label: Overview
/>
-`@ionic/angular` combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers.
+import DocsCard from '@components/global/DocsCard';
+import DocsCards from '@components/global/DocsCards';
-## Angular Version Support
+`@ionic/angular` は core Ionic experience に、Angular 開発者向けにカスタマイズされたツールと API を組み合わせたものです。
-Ionic supports `Angular 6.0.0 and up`. As part of their upgrade strategy, Angular has built-in tooling to help automate upgrades and provide feedback to developers whenever changes to an API occurred. This reduces update friction and keeps the ecosystem in a evergreen state.
+## Angular バージョンサポート
+
+Ionic v7 は Angular v14+をサポートしています。アップグレード戦略の一環として、Angular にはアップグレードを自動化するためのツールが組み込まれており、API に変更があった際には開発者にフィードバックを提供します。これにより、アップデートの手間を減らし、エコシステムを最新の状態に保つことができます。
## Angular Tooling
-With Ionic 4+, the official Angular stack for building an app and routing are used, so your app can fall in-line with the rest of the great Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps.
+Ionic4 以降では、アプリケーション構築とルーティングのために公式の Angular スタックが使用されているため、あなたのアプリケーションは Angular エコシステムと同じように利用できます。更に独自の機能が必要な場合には、Ionic は`@ionic/angular-toolkit`を提供します。、これは [official Angular CLI](https://angular.jp/cli) を構築して統合し、`@ionic/angular` アプリ固有の機能を提供します。
+
+## Resources
+
+
-})
}
+/>
+下の例では、ビジュアルをサポートする2つのリストを作成しています。最初のリストはアイコンを使い、2番目のリストはアバターを使います。ビジュアルは装飾的なものなので、すべて `aria-hidden="true"` を指定しています。さらに、これらは `start` スロットで一貫して表示されます。
-### Text Alignment
+import SupportingVisuals from '@site/static/usage/v8/item/content-types/supporting-visuals/index.md';
-Items left align text and add an ellipsis when the text is wider than the item. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for classes that can be added to `})
}
+ doNotImage={})
}
+/>
-Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`. For more information on setting CSS properties, see the [theming documentation](/docs/theming/css-variables).
+下の例では、さまざまなタイプのテキストでリストを作成しています。"First Name"と "Last Name "のラベルは、テキスト入力に何を入力すべきかを示しています。
-### Highlight Color
+トグルの "Allow Notifications"ラベルの下には、ユーザーが通知を無効にできることを示すテキストが追加されています。このテキストは短いので、アイテムの内側に配置されています。
-The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the `primary` color. If the input is valid it will use the `success` color, and invalid inputs will use the `danger` color. See the [CSS Custom Properties](#css-custom-properties) section below for the highlight color variables.
+そのリストの下には、 [Note](./note) の下に長いテキストを含むtextareaを含む別のリストがあります。textareaは、長いテキストが他のフィールドではなく、textareaに関連付けられていることを明らかにするために、それ自身のリストに配置されました。
-### Counter Formatter
+import Text from '@site/static/usage/v8/item/content-types/text/index.md';
-When using `counter`, the default behavior is to format the value that gets displayed as `itemLength / maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property. See the [Usage](#usage) section for an example.
+})
}
+/>
-## Usage
+})
}
+/>
-})
}
+ doNotImage={})
}
+/>
-### Item Lines
-
-```html
-
-
- })
}
+ doNotImage={})
}
+/>
-### Item Counter
+})
}
+ doNotImage={})
}
+/>
-```html
-})
}
+ doNotImage={})
}
+/>
-### Item Counter Formatter
+以下の例では、ToDoタスクのリストを作成しています。それぞれの項目にはチェックボックスと入力があります。チェックボックスはユーザーがタスクを完了としてマークできるようにし、入力はユーザーがタスクの名前を変更できるようにします。
-```html
-