diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index 57aacfb932d..308663ffe0a 100644 --- a/.github/workflows/CI.yml +++ b/.github/workflows/CI.yml @@ -12,7 +12,6 @@ jobs: runs-on: ${{ matrix.os }} strategy: matrix: - node_version: [20] # Build processes work differently across operating systems, so the # checks run on each one to make sure anyone can contribute to the # docs. @@ -20,16 +19,18 @@ jobs: steps: - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 - - name: ⚙️ Use Node.js ${{ matrix.node_version }} + - name: ⚙️ Use Node.js uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 with: - node-version: ${{ matrix.node_version }} + node-version: 24 - name: 🕸️ Install Dependencies - run: npm ci --legacy-peer-deps + run: npm ci - name: 🖌️ Lint run: npm run lint - name: Test run: npm run test + - name: 🧩 Typecheck + run: npm run typecheck - name: 🔤 Spell Check run: npm run spellcheck - uses: ./.github/workflows/actions/check-admonitions diff --git a/.prettierignore b/.prettierignore index 0075dc0417d..90c620a0f43 100644 --- a/.prettierignore +++ b/.prettierignore @@ -3,7 +3,9 @@ # Wrapped components are our own code, so they follow the repo's formatting. src/theme/DocItem/Layout/index.tsx src/theme/EditMetaRow/index.tsx +src/theme/Icon/DarkMode/index.tsx src/theme/Icon/Edit/index.tsx +src/theme/Icon/LightMode/index.tsx src/theme/Icon/Language/index.tsx src/theme/Layout/index.tsx src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -12,20 +14,18 @@ src/theme/prism-include-languages.ts legacy-stencil-components scripts/bak -docs/api +# Auto-generated files docs/native versioned_docs/version-v*/native docs/cli/commands -# Each definition in these files is one line of prose inside a JSX
. -# Prettier's mdx parser reflows those children and moves link text onto its own -# line, which MDX then wraps in a paragraph, rendering invalid HTML such as -#

Android SDK

. Formatting these files reintroduces that markup. -docs/reference/glossary.mdx -versioned_docs/version-v*/reference/glossary.md* +versioned_docs/version-v*/cli/commands # Archived versions versioned_docs/version-v5 versioned_docs/version-v6 +versioned_docs/version-v7 +static/usage/v6 +static/usage/v7 static/code/stackblitz @@ -33,4 +33,6 @@ static/code/stackblitz .github build node_modules + +# Source material for the Japanese translation tooling, not documentation. src/translate diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 00000000000..2b532afe4ce --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,11 @@ +/** + * Prettier configuration for the docs site. + */ + +const ionicConfig = require('@ionic/prettier-config'); + +module.exports = { + ...ionicConfig, + // Override the trailingComma setting to avoid trailing commas in function arguments and JSX props. + trailingComma: 'es5', +}; diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 648af64a279..83759a3f32b 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -214,27 +214,119 @@ The Ionic documentation's `main` branch is deployed automatically and separately ### Archiving a Version -Archived versions are served from a frozen Vercel deployment instead of being rebuilt on every `main` deploy, which keeps build times and memory usage low. Two files control this: +Archived versions are served from a frozen Vercel deployment instead of being rebuilt on every `main` deploy, which keeps build times and memory usage low. That deployment is a full snapshot of the site, so it serves every version that was in the build. Two files control this: -- [`versions.json`](./versions.json): lists the versions Docusaurus rebuilds on every deploy. +- [`versions.json`](./versions.json): lists the older versions Docusaurus rebuilds on every deploy. It does not include the current version, which is built from `docs/` and takes its label from `versions.current` in `docusaurus.config.js`. - [`versionsArchived.json`](./versionsArchived.json): maps each archived version to the frozen deployment URL the version picker links to. -The archived URL has to point at a build that _included_ the version, so you build it first, then move it to `versionsArchived.json`: +The docs keep the current version plus one older version rebuildable, so each major release archives one version and involves two different version numbers. The steps below refer to them as: -1. **Build the version.** Make sure it is in `versions.json`. If you are refreshing an already-archived version, move it out of `versionsArchived.json` and back into `versions.json`. Commit, push and let Vercel deploy. -2. **Promote the deployment.** In the Vercel dashboard, open that deployment and **Promote to Production** so it does not get cleaned up. Wait for the build to finish before pushing again, or it may get canceled. -3. **Copy its URL.** Use the deployment's unique `ionic-docs--ionic1.vercel.app` URL, not the branch or production alias. -4. **Archive it.** Remove the version from `versions.json`, then add it to `versionsArchived.json` with `/docs/` appended and no trailing slash (a trailing slash causes a brief 404 flash): +- ``: the version being frozen and removed from `versions.json`. +- ``: the version that just stopped being current and moved into `versions.json`. It is not being archived, but step 1 has to account for it. + +For example, when `v9` becomes current: `v8` is `` and `v7` is ``. + +The archived URL has to point at a build that _included_ ``, so you build it first, then move it to `versionsArchived.json`: + +1. **Check the `vercel.json` redirects.** The frozen deployment bakes in whatever `vercel.json` looked like at build time, and it serves every version in that build. Any `:version(...)` group missing a version therefore stays broken on that host for good. Make sure the groups already list ``, which is the one most likely to be missing since it only just moved into `versions.json`. The `angular`, `react`, `vue` and `javascript` landing pages each need a group, as no version ships an index page for them: + + ```json + { + "source": "/docs/:version(v6|v7|)/angular", + "destination": "/docs/:version/angular/overview" + }, + { + "source": "/docs/:version()/javascript", + "destination": "/docs/:version/javascript/overview" + } + ``` + + The groups accumulate, so existing entries stay in place whether or not that version is archived and you are only ever adding to them. The `javascript` group only covers versions that have a `javascript/` section. + +Everything from here on refers to ``: + +2. **Build ``.** Make sure it is in `versions.json`. If you are refreshing an already-archived version, move it out of `versionsArchived.json` and back into `versions.json`, and add it back to the generation scripts in step 10. Commit, push and let Vercel deploy. +3. **Promote the deployment.** In the Vercel dashboard, open that deployment and **Promote to Production** so it does not get cleaned up. Wait for the build to finish before pushing again, or it may get canceled. +4. **Copy its URL.** Use the deployment's unique `ionic-docs--ionic1.vercel.app` URL, not the branch or production alias. +5. **Archive it.** Remove `` from `versions.json`, then add it to `versionsArchived.json` with `/docs/` appended and no trailing slash (a trailing slash causes a brief 404 flash): + + _`versions.json`_ + + ```diff + [ + - "v8", + - "" + + "v8" + ] + ``` + + _`versionsArchived.json`_ ```json { - "v6": "https://ionic-docs--ionic1.vercel.app/docs/v6" + "": "https://ionic-docs--ionic1.vercel.app/docs/", + "v6": "https://ionic-docs-lq0if04rc-ionic1.vercel.app/docs/v6", + "v5": "https://ionic-docs-5utg8ms4c-ionic1.vercel.app/docs/v5" } ``` -5. **Open a PR.** Once merged, the version picker links to the archive and `main` stops building that version. +6. **Update `.prettierignore`.** Add the archived version folders to the archived versions group to keep Prettier from formatting generated files: + + ``` + static/usage/ + versioned_docs/version- + ``` + +7. **Update `cspell.json`.** Add the archived version to the `ignorePaths` array so the spell checker skips generated files: + + ```diff + "ignorePaths": [ + ... + "versioned_docs/version-v5", + "versioned_docs/version-v6", + + "versioned_docs/version-" + ] + ``` + +8. **Update `renovate.json`.** Add the archived version's StackBlitz examples to `ignorePaths` so Renovate stops opening dependency PRs against frozen examples: + + ```diff + "ignorePaths": [ + "static/code/stackblitz/v6/**", + + "static/code/stackblitz//**" + ] + ``` + + Then remove that version's `@ionic/` `allowedVersions` rule from `packageRules`, since it no longer has anything to match. + +9. **Update the playground generator.** Remove `` from the version choices in [`_templates/playground/new/index.js`](./_templates/playground/new/index.js) so `npm run playground:new` stops offering a version that is no longer built. The choices are bare numbers, without the `v`: + + ```diff + - choices: ['', '8', '9'], + + choices: ['8', '9'], + ``` + +10. **Update the generation scripts.** Remove `` from the write lists in [`scripts/native.mjs`](./scripts/native.mjs) and [`scripts/cli.mjs`](./scripts/cli.mjs), so every build stops regenerating content for a version served from a frozen deployment. The remaining targets are `docs/` (the current version) and the one older version still in `versions.json`. + + _`scripts/native.mjs`_ + + ```diff + writeFileSync(`docs/native/${fileName}`, apiContent); + - writeFileSync(`versioned_docs/version-/native/${fileName}`, apiContent); + writeFileSync(`versioned_docs/version-v8/native/${fileName}`, apiContent); + ``` + + _`scripts/cli.mjs`_ + + ```diff + writeFileSync(`docs/${path}`, data); + - writeFileSync(`versioned_docs/version-/${path}`, data); + writeFileSync(`versioned_docs/version-v8/${path}`, data); + ``` + +11. **Open a PR.** Once merged, the version picker links to the archive and `main` stops building ``. -Removed versions keep their `versioned_docs/` and `versioned_sidebars/` content, so they can be rebuilt anytime by adding them back to `versions.json`. +Removed versions keep their authored `versioned_docs/` and `versioned_sidebars/` content, so they can be rebuilt anytime by adding them back to `versions.json`. Their `native/` and `cli/commands/` pages are generated rather than committed, so a rebuild also needs the version back in the write lists from step 10. Without it those sections build empty. > [!NOTE] > Ionic v3 and v4 use other build tools and are not managed here. diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js index c69d04db737..11ea9e42a82 100644 --- a/_templates/playground/new/index.js +++ b/_templates/playground/new/index.js @@ -55,7 +55,7 @@ module.exports = { name: 'version', message: 'Select the Ionic Framework version for the playground', initial: '9', - choices: ['6', '7', '8', '9'], + choices: ['8', '9'], }, { type: 'toggle', @@ -72,7 +72,7 @@ module.exports = { const playgroundName = changeCase.pascal(answers.path.split('/').pop()); console.log( - `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v${answers.version}/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n` + `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v${answers.version}/${answers.name}/${answers.path}/index.mdx';\n\n<${playgroundName} />\n` ); return answers; diff --git a/_templates/playground/new/index.mdx.ejs.t b/_templates/playground/new/index.mdx.ejs.t new file mode 100644 index 00000000000..261bd9bcdcb --- /dev/null +++ b/_templates/playground/new/index.mdx.ejs.t @@ -0,0 +1,48 @@ +--- +to: "<%= `static/usage/v${version}/${name}/${path}/index.mdx` %>" +--- +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +<% if (css){ %> +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +<% } else { -%> +import react from './react.md'; +<% } -%> +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +<% if (css){ -%> +import angular_example_component_css from './angular/example_component_css.md'; +<% } -%> +import angular_example_component_ts from './angular/example_component_ts.md'; + + + react: { + files: { + 'src/main.tsx': react_main_tsx, + 'src/main.css': react_main_css, + }, + }, +<% } else { -%> + react, +<% } -%> + vue, + angular: { + files: { + 'src/app/example.component.html': angular_example_component_html, +<% if (css){ -%> + 'src/app/example.component.css': angular_example_component_css, +<% } -%> + 'src/app/example.component.ts': angular_example_component_ts, + }, + }, + }} + src="usage/v<%= version %>/<%= name %>/<%= path %>/demo.html" +/> diff --git a/cspell-wordlist.txt b/cspell-wordlist.txt index 7080739c57c..13b3252d864 100644 --- a/cspell-wordlist.txt +++ b/cspell-wordlist.txt @@ -1,92 +1,92 @@ -Appflow -Codepen -Firestore -Genymotion -Hygen -Ionicon -Ionicons -Logcat -Maskito -Pluralsight -Swiper -Udemy -Vetur -Wistia -WCAG -CDK -browserslistrc -actionsheet -fabs -datetime -datetimes -datetimepicker -infinitescroll -searchbar -searchbars -sidemenu -textarea -textareas -ionicframework -appstore -authed -autogrow -automations -autoplay -Callout -codemods -comparewith -composables -engageable -flexbox -fontawesome -fortawesome -frontmatter -fullscreen -geolocation -iconset -interactives -isopen -jank -janky -jarsigner -jsdelivr -keyframes -keytool -lifecycles -localstorage -mobileweb -phablet -playstore -preconfigured -preflighted -proxying -quickstart -remixicon -retargeted -runtimes -scroller -subcomponent -subcomponents -subpath -subpaths -svgs -swipeable -templating -transpiling -treeshaking -triaging -typeahead -unminified -unsanitized -viewports -webapps -webviews -xlarge -xsmall - -allowtransparency -mozallowfullscreen -msallowfullscreen -oallowfullscreen -webkitallowfullscreen -webnative +Appflow +Codepen +Firestore +Genymotion +Hygen +Ionicon +Ionicons +Logcat +Maskito +Pluralsight +Swiper +Udemy +Vetur +Wistia +WCAG +CDK + +actionsheet +fabs +datetime +datetimes +datetimepicker +infinitescroll +searchbar +searchbars +sidemenu +textarea +textareas + +appstore +authed +autogrow +automations +autoplay +Callout +codemods +comparewith +composables +engageable +flexbox +fontawesome +fortawesome +frontmatter +fullscreen +geolocation +iconset +interactives +isopen +jank +janky +jarsigner +jsdelivr +keyframes +keytool +lifecycles +localstorage +mobileweb +phablet +playstore +preconfigured +preflighted +proxying +quickstart +remixicon +retargeted +runtimes +scroller +subcomponent +subcomponents +subpath +subpaths +svgs +swipeable +templating +transpiling +treeshaking +triaging +typeahead +unminified +unsanitized +viewports +webapps +webviews +xlarge +xsmall + +allowtransparency +mozallowfullscreen +msallowfullscreen +oallowfullscreen +webkitallowfullscreen +webnative diff --git a/cspell.json b/cspell.json index 77ea0b734e9..6a6d214cd18 100644 --- a/cspell.json +++ b/cspell.json @@ -10,8 +10,7 @@ "ignoreRegExpList": [ "/(```+)[\\s\\S]+?\\1/g", "`([^`]*)`", - "/:[a-zA-Z0-9-_\\+]+:/g", - "/\\]\\([^)]*\\)/g" + "/:[a-zA-Z0-9-_\\+]+:/g" ], "ignorePaths": [ "docs/cli", @@ -21,8 +20,10 @@ "versioned_docs/**/native", "versioned_docs/version-v5", "versioned_docs/version-v6", - "node_modules", - "src/translate" + "versioned_docs/version-v7", + "src/translate", + "scripts/build-translate", + "node_modules" ], "flagWords": [ "hte" diff --git a/docs/angular/lifecycle.mdx b/docs/angular/lifecycle.mdx index 34c8fafba64..5ee03710850 100644 --- a/docs/angular/lifecycle.mdx +++ b/docs/angular/lifecycle.mdx @@ -27,7 +27,13 @@ Ionic は Angular が提供するライフサイクルイベントを取り入 Angular のコンポーネントライフサイクルイベントの詳細については、[コンポーネントライフサイクルのドキュメント](https://angular.jp/guide/lifecycle-hooks)をご覧ください。 :::note -`ion-nav` または `ion-router-outlet` を使用するコンポーネントは、 `OnPush` 変更検出方式を使用しないでください。そうすることで、 `ngOnInit` などのライフサイクル・フックが起動するのを防ぐことができます。また、非同期状態の変更は正しくレンダリングされない場合があります。 + +If your pages keep state in plain fields rather than signals, the component hosting `ion-router-outlet` or `ion-tabs` needs eager change detection, as does every component between it and your application root. A change detection pass starts at the application root and skips a clean `OnPush` view along with everything below it, so an `OnPush` component above the outlet stops updates from reaching the routed pages under it. The pages themselves can use `OnPush`, as long as their state is a signal or they call `markForCheck()`. + +On **Angular 18 through 21** this only affects you if you set `OnPush` on those components yourself, because a component that does not declare a strategy is eager. + +**Angular 22** makes `OnPush` the default for components that do not declare one, so refer to [Change detection on Angular 22](/docs/angular/zoneless.mdx#change-detection-on-angular-22) for what your app shell has to declare. + ::: ## Ionic のページイベント diff --git a/docs/angular/overlays.mdx b/docs/angular/overlays.mdx index b79dc72451b..f49e42e8943 100644 --- a/docs/angular/overlays.mdx +++ b/docs/angular/overlays.mdx @@ -71,7 +71,10 @@ import { MyRouteService } from './my-route.service'; providers: [MyRouteService], // Service provided at route level }) export class FeatureComponent { - constructor(private modalController: ModalController, private injector: Injector) {} + constructor( + private modalController: ModalController, + private injector: Injector + ) {} async openModal() { const modal = await this.modalController.create({ @@ -113,7 +116,10 @@ import { MyService } from './my.service'; templateUrl: './feature.component.html', }) export class FeatureComponent { - constructor(private modalController: ModalController, private injector: Injector) {} + constructor( + private modalController: ModalController, + private injector: Injector + ) {} async openModal() { const myService = new MyService(); @@ -148,7 +154,10 @@ import { MyModalComponent } from './my-modal.component'; templateUrl: './feature.component.html', }) export class FeatureComponent { - constructor(private modalController: ModalController, private injector: Injector) {} + constructor( + private modalController: ModalController, + private injector: Injector + ) {} async openModal() { const modal = await this.modalController.create({ @@ -174,7 +183,10 @@ import { MyPopoverComponent } from './my-popover.component'; templateUrl: './feature.component.html', }) export class FeatureComponent { - constructor(private popoverController: PopoverController, private injector: Injector) {} + constructor( + private popoverController: PopoverController, + private injector: Injector + ) {} async openPopover(event: Event) { const popover = await this.popoverController.create({ diff --git a/docs/angular/pwa.mdx b/docs/angular/pwa.mdx index 4eede3ec334..ae8735a46c3 100644 --- a/docs/angular/pwa.mdx +++ b/docs/angular/pwa.mdx @@ -13,7 +13,7 @@ sidebar_label: Progressive Web Apps ## Making your Angular app a PWA -The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this. +The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this. The `@angular/pwa` package will automatically add a service worker and an app manifest to the app. To add this package to the app, run: diff --git a/docs/angular/slides.mdx b/docs/angular/slides.mdx index d1c8d4a05a6..d6e91120b9e 100644 --- a/docs/angular/slides.mdx +++ b/docs/angular/slides.mdx @@ -17,7 +17,7 @@ import TabItem from '@theme/TabItem'; `ion-slides`は v6.0.0 で非推奨となり、v7.0.0 で削除されました。Swiper.js ライブラリを直接使用することをお勧めします。移行プロセスは以下に詳しく説明されています。 ::: -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. +We recommend [Swiper.js](http://swiperjs.com/) if you need a modern touch slider component. Swiper 9 introduced [Swiper Element](https://swiperjs.com/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 @@ -71,7 +71,7 @@ From there, we just have to replace `ion-slides` elements with `swiper-container 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. -追加モジュールを自動的に含まないコア版を使いたい場合は、Swiper のコアバージョンおよびモジュールのドキュメントを参照してください。この移行ガイドの残りは、あなたがバンドル版を使用していることを前提としています。 +追加モジュールを自動的に含まないコア版を使いたい場合は、[Swiper のコアバージョンおよびモジュールのドキュメント](https://swiperjs.com/element#core-version-and-modules)を参照してください。この移行ガイドの残りは、あなたがバンドル版を使用していることを前提としています。 ## Swiping with Style @@ -93,7 +93,7 @@ If you were using the CSS custom properties found on `ion-slides`, below is a li | `--scroll-bar-background` | `--swiper-scrollbar-bg-color` | | `--scroll-bar-background-active` | `--swiper-scrollbar-drag-bg-color` | -追加のカスタム CSS では、Swiper Element が Shadow DOM カプセル化を使用しているため、スタイルを Shadow DOM スコープに注入する必要があります。手順はSwiper のスタイル注入ガイドを参照してください。 +追加のカスタム CSS では、Swiper Element が Shadow DOM カプセル化を使用しているため、スタイルを Shadow DOM スコープに注入する必要があります。手順は[Swiper のスタイル注入ガイド](https://swiperjs.com/element#injecting-styles)を参照してください。 ### Additional `ion-slides` Styles @@ -227,7 +227,7 @@ Below is a full list of property changes when going from `ion-slides` to Swiper | pager | Use the `pagination` property instead. | :::note -Swiper Element で利用可能なすべてのプロパティは、Swiper API パラメータドキュメントに記載されています。 +Swiper Element で利用可能なすべてのプロパティは、[Swiper API パラメータドキュメント](https://swiperjs.com/swiper-api#parameters)に記載されています。 ::: ## Events @@ -276,7 +276,7 @@ Below is a full list of event name changes when going from `ion-slides` to Swipe | `ionSlidesDidLoad` | `swiperinit` | :::note -Swiper Element で利用可能なすべてのイベントはSwiper API イベントドキュメントで確認でき、小文字で「`swiper`」という言葉を接頭辞で付けてください。 +Swiper Element で利用可能なすべてのイベントは[Swiper API イベントドキュメント](https://swiperjs.com/swiper-api#events)で確認でき、小文字で「`swiper`」という言葉を接頭辞で付けてください。 ::: ## Methods @@ -328,7 +328,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper El | `stopAutoplay()` | Use the `autoplay` property instead. | :::note -Swiper インスタンスで利用可能なすべてのメソッドとプロパティは、Swiper API のメソッドおよびプロパティドキュメントで確認できます。 +Swiper インスタンスで利用可能なすべてのメソッドとプロパティは、[Swiper API のメソッドおよびプロパティドキュメント](https://swiperjs.com/swiper-api#methods-and-properties)で確認できます。 ::: ## Effects @@ -340,12 +340,12 @@ Effects such as Cube or Fade can be used in Swiper Element with no additional im ``` :::note -Swiper のエフェクトについての詳細は、Swiper API フェードエフェクトドキュメントをご参照ください。 +Swiper のエフェクトについての詳細は、[Swiper API フェードエフェクトドキュメント](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 Element documentation 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](https://swiperjs.com/element) and then referencing [the Swiper API docs](https://swiperjs.com/swiper-api). ## FAQ @@ -359,8 +359,8 @@ If you are running into issues with the migration, please create a post on the [ ### Where do I file bug reports? -課題を開く前に、Swiper ディスカッションボードまたはIonic フォーラムに投稿して、コミュニティによって問題が解決できるか確認することを検討してください。 +課題を開く前に、[Swiper ディスカッションボード](https://github.com/nolimits4web/swiper/discussions)または[Ionic フォーラム](https://forum.ionicframework.com)に投稿して、コミュニティによって問題が解決できるか確認することを検討してください。 -Swiper ライブラリで問題が発生している場合、新しいバグはSwiper のイシュートラッカーに報告してください。 +Swiper ライブラリで問題が発生している場合、新しいバグは[Swiper のイシュートラッカー](https://github.com/nolimits4web/swiper/issues)に報告してください。 -`IonicSlides`モジュールで問題が発生している場合、新しいバグはIonic Framework のイシュートラッカーに報告してください。 +`IonicSlides`モジュールで問題が発生している場合、新しいバグは[Ionic Framework のイシュートラッカー](https://github.com/ionic-team/ionic-framework/issues)に報告してください。 diff --git a/docs/angular/your-first-app/2-taking-photos.mdx b/docs/angular/your-first-app/2-taking-photos.mdx index 4952eaaf39a..86575f31f6b 100644 --- a/docs/angular/your-first-app/2-taking-photos.mdx +++ b/docs/angular/your-first-app/2-taking-photos.mdx @@ -105,7 +105,9 @@ export class Tab2Page { ``` :::note + In a standalone app there is no global icon registry, so each icon you reference by name (like `camera`) must be registered with `addIcons`. Import the specific Ionic components a page uses from `@ionic/angular` and list them in the component's `imports` array. + ::: Then, open `tab2.page.html` and call the `addPhotoToGallery()` method when the FAB is tapped/clicked: diff --git a/docs/angular/your-first-app/3-saving-photos.mdx b/docs/angular/your-first-app/3-saving-photos.mdx index f4e23af8076..4df08e91606 100644 --- a/docs/angular/your-first-app/3-saving-photos.mdx +++ b/docs/angular/your-first-app/3-saving-photos.mdx @@ -90,7 +90,7 @@ We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save th Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. -For now, create a new helper method, `convertBlobToBase64()`, to implement the necessary logic for running on the web. +Create a new helper method, `base64FromPath()`, to implement the necessary logic for running on the web: ```ts import { Injectable } from '@angular/core'; @@ -107,10 +107,7 @@ export class PhotoService { // CHANGE: Update the `savePicture()` method private async savePicture(photo: Photo) { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await this.convertBlobToBase64(blob)) as string; + const base64Data = await this.base64FromPath(photo.webPath!); // Write the file to the data directory const fileName = Date.now() + '.jpeg'; @@ -128,13 +125,19 @@ export class PhotoService { }; } - // CHANGE: Add the `convertBlobToBase64` method - private convertBlobToBase64(blob: Blob) { + // CHANGE: Add the `base64FromPath()` method + private async base64FromPath(path: string): Promise { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); @@ -176,10 +179,7 @@ export class PhotoService { } private async savePicture(photo: Photo) { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await this.convertBlobToBase64(blob)) as string; + const base64Data = await this.base64FromPath(photo.webPath!); // Write the file to the data directory const fileName = Date.now() + '.jpeg'; @@ -197,12 +197,18 @@ export class PhotoService { }; } - private convertBlobToBase64(blob: Blob) { + private async base64FromPath(path: string): Promise { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); diff --git a/docs/angular/your-first-app/4-loading-photos.mdx b/docs/angular/your-first-app/4-loading-photos.mdx index 7f37d53e759..f206052ca82 100644 --- a/docs/angular/your-first-app/4-loading-photos.mdx +++ b/docs/angular/your-first-app/4-loading-photos.mdx @@ -105,13 +105,13 @@ export class PhotoService { // CHANGE: Display the photo by reading into base64 format for (const photo of photos) { // Read each saved photo's data from the Filesystem - const readFile = await Filesystem.readFile({ + const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, }); // Web platform only: Load the photo as base64 data - photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } // CHANGE: Set the signal so the gallery view updates @@ -157,10 +157,7 @@ export class PhotoService { } private async savePicture(photo: Photo) { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - const base64Data = (await this.convertBlobToBase64(blob)) as string; + const base64Data = await this.base64FromPath(photo.webPath!); // Write the file to the data directory const fileName = Date.now() + '.jpeg'; @@ -178,12 +175,18 @@ export class PhotoService { }; } - private convertBlobToBase64(blob: Blob) { + private async base64FromPath(path: string): Promise { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); @@ -196,13 +199,13 @@ export class PhotoService { for (const photo of photos) { // Read each saved photo's data from the Filesystem - const readFile = await Filesystem.readFile({ + const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, }); // Web platform only: Load the photo as base64 data - photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } this.photos.set(photos); diff --git a/docs/angular/your-first-app/5-adding-mobile.mdx b/docs/angular/your-first-app/5-adding-mobile.mdx index 3e4830040b6..d6f06b54cda 100644 --- a/docs/angular/your-first-app/5-adding-mobile.mdx +++ b/docs/angular/your-first-app/5-adding-mobile.mdx @@ -65,10 +65,7 @@ private async savePicture(photo: Photo) { }); base64Data = file.data; } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - base64Data = await this.convertBlobToBase64(blob) as string; + base64Data = await this.base64FromPath(photo.webPath!); } // Write the file to the data directory @@ -116,10 +113,7 @@ private async savePicture(photo: Photo) { }); base64Data = file.data; } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - base64Data = await this.convertBlobToBase64(blob) as string; + base64Data = await this.base64FromPath(photo.webPath!); } // Write the file to the data directory @@ -160,13 +154,13 @@ public async loadSaved() { // If running on the web... if (!this.platform.is('hybrid')) { for (const photo of photos) { - const readFile = await Filesystem.readFile({ + const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data }); // Web platform only: Load the photo as base64 data - photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } } @@ -228,11 +222,7 @@ export class PhotoService { base64Data = file.data; } else { - // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath!); - const blob = await response.blob(); - - base64Data = (await this.convertBlobToBase64(blob)) as string; + base64Data = await this.base64FromPath(photo.webPath!); } // Write the file to the data directory @@ -259,12 +249,18 @@ export class PhotoService { } } - private convertBlobToBase64(blob: Blob) { + private async base64FromPath(path: string): Promise { + const response = await fetch(path); + const blob = await response.blob(); return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { - resolve(reader.result); + if (typeof reader.result === 'string') { + resolve(reader.result); + } else { + reject('method did not return a string'); + } }; reader.readAsDataURL(blob); }); @@ -278,12 +274,12 @@ export class PhotoService { // If running on the web... if (!this.platform.is('hybrid')) { for (const photo of photos) { - const readFile = await Filesystem.readFile({ + const file = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, }); // Web platform only: Load the photo as base64 data - photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + photo.webviewPath = `data:image/jpeg;base64,${file.data}`; } } diff --git a/docs/angular/zoneless.mdx b/docs/angular/zoneless.mdx index c05fec73ffc..0d961474817 100644 --- a/docs/angular/zoneless.mdx +++ b/docs/angular/zoneless.mdx @@ -27,7 +27,9 @@ You do not need to change these. Angular schedules change detection for them in - Navigation, route transitions, and tab switching. :::note[Angular 22] -Angular 22 also makes `OnPush` the default change detection strategy. Under `OnPush`, synchronous state set as a plain field (including in the lifecycle hooks above) no longer re-renders on its own, even though Ionic notifies Angular. Signals still update the view. For the migration path, refer to the [OnPush Change Detection section of the Ionic 9 upgrade guide](/docs/updating/9-0.mdx#onpush-change-detection-on-angular-22). + +Angular 22 also makes `OnPush` the default change detection strategy. Under `OnPush`, synchronous state set as a plain field (including in the lifecycle hooks above) no longer re-renders on its own, even though Ionic notifies Angular. Signals still update the view. Refer to [Change detection on Angular 22](#change-detection-on-angular-22) for what this means for your app shell, and to the [OnPush Change Detection section of the Ionic 9 upgrade guide](/docs/updating/9-0.mdx#onpush-change-detection-on-angular-22) for the migration steps. + ::: ## What needs a notification @@ -81,7 +83,9 @@ import { ChangeDetectorRef, Component, inject } from '@angular/core'; @Component({ selector: 'app-list', - template: `@for (item of items; track item) { {{ item }} }`, + template: `@for (item of items; track item) { + {{ item }} + }`, }) export class ListPage { private cdr = inject(ChangeDetectorRef); @@ -113,7 +117,7 @@ Content projected into an inline `ion-modal` or `ion-popover` follows the same r @for (item of items(); track item) { - {{ item }} + {{ item }} } @@ -149,6 +153,25 @@ export class AppComponent { } ``` +## Change detection on Angular 22 + +On Angular 22 a component that does not declare a strategy is `OnPush`. If your pages keep state in plain fields rather than signals, every component from your application root down to the one hosting `ion-router-outlet` or `ion-tabs` (your app shell) must stay eager. A tick starts at the application root and skips a clean `OnPush` view and everything below it, so an `OnPush` ancestor strands the page even when the page itself is eager: + +```ts +import { ChangeDetectionStrategy, Component } from '@angular/core'; + +@Component({ + selector: 'app-root', + changeDetection: ChangeDetectionStrategy.Eager, + template: '', +}) +export class AppComponent {} +``` + +If other components sit between your application root and `ion-router-outlet`, each of them needs the same declaration. Pages that set state through signals, or that call `markForCheck()`, are unaffected: both mark the ancestor chain, so a tick reaches them whatever the shell declares. Converting your pages that way is the alternative to keeping the shell eager. + +Hosting an `ion-nav` is fine either way, because its pages are attached as root views and are checked independently of the component hosting them. + ## Staying on Zone.js If you are not ready to adopt zoneless change detection, you can opt back into Zone.js with `provideZoneChangeDetection()`. Refer to the [Keeping Zone.js section of the Ionic 9 upgrade guide](/docs/updating/9-0.mdx#keeping-zonejs) for the exact configuration. diff --git a/docs/api/accordion-group.mdx b/docs/api/accordion-group.mdx index e0250802c05..9fae04b3770 100644 --- a/docs/api/accordion-group.mdx +++ b/docs/api/accordion-group.mdx @@ -1,6 +1,7 @@ --- -title: "ion-accordion-group" +title: 'ion-accordion-group' --- + import Props from '@ionic-internal/component-api/v9/accordion-group/props.mdx'; import Events from '@ionic-internal/component-api/v9/accordion-group/events.mdx'; import Methods from '@ionic-internal/component-api/v9/accordion-group/methods.mdx'; @@ -38,19 +39,25 @@ interface AccordionGroupCustomEvent extends CustomEvent { ``` ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/accordion.mdx b/docs/api/accordion.mdx index 2fff6e27a48..7c484689238 100644 --- a/docs/api/accordion.mdx +++ b/docs/api/accordion.mdx @@ -1,6 +1,7 @@ --- -title: "ion-accordion" +title: 'ion-accordion' --- + import Props from '@ionic-internal/component-api/v9/accordion/props.mdx'; import Events from '@ionic-internal/component-api/v9/accordion/events.mdx'; import Methods from '@ionic-internal/component-api/v9/accordion/methods.mdx'; @@ -10,14 +11,16 @@ import Slots from '@ionic-internal/component-api/v9/accordion/slots.mdx'; ion-accordion: アコーディオンコンポーネント: 作り方と例 - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - アコーディオンは、情報を整理してグループ化する方法を提供しながら、垂直方向のスペースを減らすために、コンテンツに折り畳み可能なセクションを提供します。すべての `ion-accordion` コンポーネントは `ion-accordion-group` コンポーネントの中にグループ化されている必要があります。 ## 基本的な使い方 @@ -120,18 +123,18 @@ import ExpansionStyles from '@site/static/usage/v9/accordion/customization/expan アコーディオンの状態に応じてスタイルを設定することで、展開の動作をカスタマイズすることができます。 `ion-accordion` には4つのステートクラスが適用されています。これらのクラスを使ってスタイリングすることで、高度な状態遷移を作成することができます。 -| クラス名 | 説明 | -| ---------- |-----------------------------------| -| `.accordion-expanding` | アコーディオンがアクティブに展開しているときに適用されます。 | -| `.accordion-expanded` | アコーディオンが完全に展開されたときに適用されます。 | +| クラス名 | 説明 | +| ----------------------- | ------------------------------------------------------------------ | +| `.accordion-expanding` | アコーディオンがアクティブに展開しているときに適用されます。 | +| `.accordion-expanded` | アコーディオンが完全に展開されたときに適用されます。 | | `.accordion-collapsing` | アコーディオンがアクティブに折りたたまれているときに適用されます。 | -| `.accordion-collapsed` | アコーディオンが完全に折りたたまれているときに適用されます。 | +| `.accordion-collapsed` | アコーディオンが完全に折りたたまれているときに適用されます。 | アコーディオンの特定の部分をターゲットにする必要がある場合、要素を直接ターゲットにすることをお勧めします。例えば、アコーディオンが展開されたときに `header` slot の ion-item をカスタマイズしたい場合、以下のセレクタを使用することができます。 ```css -ion-accordion.accordion-expanding ion-item[slot="header"], -ion-accordion.accordion-expanded ion-item[slot="header"] { +ion-accordion.accordion-expanding ion-item[slot='header'], +ion-accordion.accordion-expanded ion-item[slot='header'] { --color: red; } ``` @@ -154,7 +157,7 @@ import Icons from '@site/static/usage/v9/accordion/customization/icons/index.mdx ### テーマ -`ion-accordion` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの `ion-item` をターゲットにすることで行うことができます。 `ion-item` を使用しているので、 [ion-item CSS Variables](./item#css-custom-properties) と [ion-item Shadow Parts](./item#css-shadow-parts) にもすべてアクセスすることができます。コンテンツのテイムも、`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/v9/accordion/customization/theming/index.mdx'; @@ -174,15 +177,15 @@ import AccessibilityAnimations from '@site/static/usage/v9/accordion/accessibili `ion-accordion-group` の中で使用する場合、`ion-accordion` はキーボードによる操作を完全にサポートしています。次の表は、それぞれのキーが何をするのかの詳細です。 -| 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. | +| 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. | ## パフォーマンス @@ -199,19 +202,25 @@ import AccessibilityAnimations from '@site/static/usage/v9/accordion/accessibili 3. これらの解決方法を選択できない場合、開発者は [ion-accordion-group](./accordion-group) の `animated` プロパティを使用してアニメーションを完全に無効にすることを検討することができます。 ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/action-sheet.mdx b/docs/api/action-sheet.mdx index 792d6baa660..7ef09402a66 100644 --- a/docs/api/action-sheet.mdx +++ b/docs/api/action-sheet.mdx @@ -1,6 +1,7 @@ --- -title: "ion-action-sheet" +title: 'ion-action-sheet' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -13,14 +14,16 @@ import Slots from '@ionic-internal/component-api/v9/action-sheet/slots.mdx'; ion-action-sheet: Action Sheet Dialog for iOS and Android - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Action Sheetは複数の選択肢を表示するダイアログです。アプリのコンテンツ上に表示され、ユーザが手動で破棄しないとアプリの利用を再開することはできません。`ios` modeでは、破壊的な選択肢は明示されます（コンテンツの削除などは赤字などでわかりやすく表示されます）。Action Sheetを破棄するには、背景をタップする、デスクトップのパソコンの場合はエスケープキーを押すなど、複数の選択肢があります。 ## インラインアクションシート (推奨) @@ -280,19 +283,25 @@ interface ActionSheetOptions { ``` ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/alert.mdx b/docs/api/alert.mdx index 82cadc6dd44..647bd85f670 100644 --- a/docs/api/alert.mdx +++ b/docs/api/alert.mdx @@ -1,6 +1,7 @@ --- -title: "ion-alert" +title: 'ion-alert' --- + import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; @@ -13,7 +14,10 @@ import Slots from '@ionic-internal/component-api/v9/alert/slots.mdx'; ion-alert: Ionic Alert Buttons with Custom Message Prompts - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -58,7 +62,6 @@ import Buttons from '@site/static/usage/v9/alert/buttons/index.mdx'; - ## Inputs 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を構築することをお勧めします。 @@ -181,7 +184,6 @@ const alert = await alertController.create({ - すべてのARIA属性は、アラートの`htmlAttributes`プロパティにカスタム値を定義することで、手動で上書きすることができます。 #### Alert Buttons の概要 @@ -281,7 +283,6 @@ interface AlertButton { } ``` - ### AlertInput ```typescript @@ -306,7 +307,6 @@ interface AlertInput { } ``` - ### AlertOptions ```typescript @@ -332,19 +332,25 @@ interface AlertOptions { ``` ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/app.mdx b/docs/api/app.mdx index 85b6770686a..7cec8ad59d4 100644 --- a/docs/api/app.mdx +++ b/docs/api/app.mdx @@ -1,6 +1,7 @@ --- -title: "ion-app" +title: 'ion-app' --- + import Props from '@ionic-internal/component-api/v9/app/props.mdx'; import Events from '@ionic-internal/component-api/v9/app/events.mdx'; import Methods from '@ionic-internal/component-api/v9/app/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/app/slots.mdx'; ion-app: Container Element for an Ionic Application - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -19,12 +23,12 @@ AppはIonicアプリケーションのコンテナ要素です。1つのプロ `ion-app`を使用すると、以下の動作が可能になります。 -* [キーボードライフサイクルイベント](../developing/keyboard#keyboard-lifecycle-events) は、ネイティブプラグインを必要なくなります。 -* Android 端末のハードウェアバックボタンの動作をカスタマイズするための [Hardware Back Button Listeners](../developing/hardware-back-button) を使えます -* Capacitor や Cordova でステータスバーをサポートし、ステータスバーをタップすることでビューの最上部にスクロールできるようになります。 -* テキスト入力が画面上のキーボードにかからないように、コンテンツをスクロールさせるスクロールアシストユーティリティが使えます。 -* Material Design モードでのボタン操作時の[Ripple effect](./リップルエフェクト) が使えます。 -* Ionicアプリの使用感をよりネイティブなものにする、その他のタップやフォーカスのユーティリティが使えます。 +- [キーボードライフサイクルイベント](../developing/keyboard#keyboard-lifecycle-events) は、ネイティブプラグインを必要なくなります。 +- Android 端末のハードウェアバックボタンの動作をカスタマイズするための [Hardware Back Button Listeners](../developing/hardware-back-button) を使えます +- Capacitor や Cordova でステータスバーをサポートし、ステータスバーをタップすることでビューの最上部にスクロールできるようになります。 +- テキスト入力が画面上のキーボードにかからないように、コンテンツをスクロールさせるスクロールアシストユーティリティが使えます。 +- Material Design モードでのボタン操作時の[Ripple effect](./リップルエフェクト) が使えます。 +- Ionicアプリの使用感をよりネイティブなものにする、その他のタップやフォーカスのユーティリティが使えます。 ## プログラムによるフォーカス @@ -35,19 +39,25 @@ import SetFocus from '@site/static/usage/v9/app/set-focus/index.mdx'; ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/avatar.mdx b/docs/api/avatar.mdx index 7f9e8c8fd36..4e0320a78e3 100644 --- a/docs/api/avatar.mdx +++ b/docs/api/avatar.mdx @@ -1,5 +1,5 @@ --- -title: "ion-avatar" +title: 'ion-avatar' --- import Props from '@ionic-internal/component-api/v9/avatar/props.mdx'; @@ -11,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/avatar/slots.mdx'; ion-avatar: Circular Application Avatar Icon Component - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -49,19 +52,25 @@ import CSSProps from '@site/static/usage/v9/avatar/theming/css-properties/index. ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/back-button.mdx b/docs/api/back-button.mdx index bf6a87881e7..ee91ecf2467 100644 --- a/docs/api/back-button.mdx +++ b/docs/api/back-button.mdx @@ -1,6 +1,7 @@ --- -title: "ion-back-button" +title: 'ion-back-button' --- + import Props from '@ionic-internal/component-api/v9/back-button/props.mdx'; import Events from '@ionic-internal/component-api/v9/back-button/events.mdx'; import Methods from '@ionic-internal/component-api/v9/back-button/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/back-button/slots.mdx'; ion-back-button: Custom Menu Back Button for Applications - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -38,19 +42,25 @@ import Custom from '@site/static/usage/v9/back-button/custom/index.mdx'; 時折、アプリが履歴がないときに戻るボタンを表示し、ナビゲートする必要がある場合があります。この場合、戻るボタンの `defaultHref` をパスに設定することで実現できます。 `defaultHref` を使用するには、アプリにパスが設定されたルーターが含まれている必要があります。 ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/backdrop.mdx b/docs/api/backdrop.mdx index 69e17ae7d3b..2266ed37bba 100644 --- a/docs/api/backdrop.mdx +++ b/docs/api/backdrop.mdx @@ -1,6 +1,7 @@ --- -title: "ion-backdrop" +title: 'ion-backdrop' --- + import Props from '@ionic-internal/component-api/v9/backdrop/props.mdx'; import Events from '@ionic-internal/component-api/v9/backdrop/events.mdx'; import Methods from '@ionic-internal/component-api/v9/backdrop/methods.mdx'; @@ -33,19 +34,25 @@ import Styling from '@site/static/usage/v9/backdrop/styling/index.mdx'; ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots - \ No newline at end of file + + diff --git a/docs/api/badge.mdx b/docs/api/badge.mdx index 97fcfb4f97d..8d3cfbf7cbe 100644 --- a/docs/api/badge.mdx +++ b/docs/api/badge.mdx @@ -1,6 +1,7 @@ --- -title: "ion-badge" +title: 'ion-badge' --- + import Props from '@ionic-internal/component-api/v9/badge/props.mdx'; import Events from '@ionic-internal/component-api/v9/badge/events.mdx'; import Methods from '@ionic-internal/component-api/v9/badge/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/badge/slots.mdx'; ion-badge: iOS & Android App Notification Badge Icons - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -52,19 +56,25 @@ import CSSProps from '@site/static/usage/v9/badge/theming/css-properties/index.m ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/breadcrumb.mdx b/docs/api/breadcrumb.mdx index b0c6f6c5cf6..1ccca38123b 100644 --- a/docs/api/breadcrumb.mdx +++ b/docs/api/breadcrumb.mdx @@ -1,6 +1,7 @@ --- -title: "ion-breadcrumb" +title: 'ion-breadcrumb' --- + import Props from '@ionic-internal/component-api/v9/breadcrumb/props.mdx'; import Events from '@ionic-internal/component-api/v9/breadcrumb/events.mdx'; import Methods from '@ionic-internal/component-api/v9/breadcrumb/methods.mdx'; @@ -38,19 +39,25 @@ interface BreadcrumbCustomEvent extends CustomEvent { ``` ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/breadcrumbs.mdx b/docs/api/breadcrumbs.mdx index dece75502dc..4410af756c0 100644 --- a/docs/api/breadcrumbs.mdx +++ b/docs/api/breadcrumbs.mdx @@ -1,6 +1,7 @@ --- -title: "ion-breadcrumbs" +title: 'ion-breadcrumbs' --- + import Props from '@ionic-internal/component-api/v9/breadcrumbs/props.mdx'; import Events from '@ionic-internal/component-api/v9/breadcrumbs/events.mdx'; import Methods from '@ionic-internal/component-api/v9/breadcrumbs/methods.mdx'; @@ -8,8 +9,6 @@ import Parts from '@ionic-internal/component-api/v9/breadcrumbs/parts.mdx'; import CustomProps from '@ionic-internal/component-api/v9/breadcrumbs/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v9/breadcrumbs/slots.mdx'; - - import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -84,21 +83,26 @@ import CSSProps from '@site/static/usage/v9/breadcrumbs/theming/css-properties/i - ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/button.mdx b/docs/api/button.mdx index ac996b63f79..c488d9c4095 100644 --- a/docs/api/button.mdx +++ b/docs/api/button.mdx @@ -1,6 +1,7 @@ --- -title: "ion-button" +title: 'ion-button' --- + import Props from '@ionic-internal/component-api/v9/button/props.mdx'; import Events from '@ionic-internal/component-api/v9/button/events.mdx'; import Methods from '@ionic-internal/component-api/v9/button/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/button/slots.mdx'; ion-button: Style Buttons with Custom CSS Properties - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -41,7 +45,6 @@ import Shape from '@site/static/usage/v9/button/shape/index.mdx'; - ## Fill この属性は、Buttonのbackgroundとborder-colorを設定します。デフォルトでは、Buttonはtoolbar内にない限り、backgroundは塗りつぶされます。toolbar内にある場合は、backgroundは透明になります。 @@ -97,19 +100,25 @@ import TextWrapping from '@site/static/usage/v9/button/text-wrapping/index.mdx'; ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/buttons.mdx b/docs/api/buttons.mdx index b2c21693823..03361246863 100644 --- a/docs/api/buttons.mdx +++ b/docs/api/buttons.mdx @@ -1,6 +1,7 @@ --- -title: "ion-buttons" +title: 'ion-buttons' --- + import Props from '@ionic-internal/component-api/v9/buttons/props.mdx'; import Events from '@ionic-internal/component-api/v9/buttons/events.mdx'; import Methods from '@ionic-internal/component-api/v9/buttons/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/buttons/slots.mdx'; ion-buttons: Toolbar Element with Named Slots for Buttons - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -29,12 +33,12 @@ import Basic from '@site/static/usage/v9/buttons/basic/index.mdx'; ツールバー内のボタンは、スロットという名前を使って配置することができます。下図は各スロットの説明です。 -| Slot | Description | -|--------------|----------------------------------------------------------------------------------------------------------| -| `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. | +| Slot | Description | +| ----------- | ------------------------------------------------------------------------------------------------------- | +| `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/v9/buttons/placement/index.mdx'; @@ -64,19 +68,25 @@ import CollapsibleLargeTitleButtons from '@site/static/usage/v9/title/collapsibl ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/card-content.mdx b/docs/api/card-content.mdx index ac151b35f73..705861028bd 100644 --- a/docs/api/card-content.mdx +++ b/docs/api/card-content.mdx @@ -1,6 +1,7 @@ --- -title: "ion-card-content" +title: 'ion-card-content' --- + import Props from '@ionic-internal/component-api/v9/card-content/props.mdx'; import Events from '@ionic-internal/component-api/v9/card-content/events.mdx'; import Methods from '@ionic-internal/component-api/v9/card-content/methods.mdx'; @@ -15,19 +16,25 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; 詳細は[Card](./card)のドキュメントを参照してください。 ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/card-header.mdx b/docs/api/card-header.mdx index 853c59a2bf1..7880946d147 100644 --- a/docs/api/card-header.mdx +++ b/docs/api/card-header.mdx @@ -1,6 +1,7 @@ --- -title: "ion-card-header" +title: 'ion-card-header' --- + import Props from '@ionic-internal/component-api/v9/card-header/props.mdx'; import Events from '@ionic-internal/component-api/v9/card-header/events.mdx'; import Methods from '@ionic-internal/component-api/v9/card-header/methods.mdx'; @@ -17,19 +18,25 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; 詳細は[Card](./card)のドキュメントを参照してください。 ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/card-subtitle.mdx b/docs/api/card-subtitle.mdx index cae3b7a0276..00ce6c8f3d1 100644 --- a/docs/api/card-subtitle.mdx +++ b/docs/api/card-subtitle.mdx @@ -1,6 +1,7 @@ --- -title: "ion-card-subtitle" +title: 'ion-card-subtitle' --- + import Props from '@ionic-internal/component-api/v9/card-subtitle/props.mdx'; import Events from '@ionic-internal/component-api/v9/card-subtitle/events.mdx'; import Methods from '@ionic-internal/component-api/v9/card-subtitle/methods.mdx'; @@ -17,19 +18,25 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; 詳細は[Card](./card)のドキュメントを参照してください。 ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/card-title.mdx b/docs/api/card-title.mdx index f7c48b0d3f2..f9b510fe9be 100644 --- a/docs/api/card-title.mdx +++ b/docs/api/card-title.mdx @@ -1,6 +1,7 @@ --- -title: "ion-card-title" +title: 'ion-card-title' --- + import Props from '@ionic-internal/component-api/v9/card-title/props.mdx'; import Events from '@ionic-internal/component-api/v9/card-title/events.mdx'; import Methods from '@ionic-internal/component-api/v9/card-title/methods.mdx'; @@ -12,7 +13,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ion-card-title: Ionic App Card Title Component - + @@ -22,19 +26,25 @@ Card titleはcardの子コンポーネントで、[card header](./card-header) 詳細は[Card](./card)のドキュメントを参照してください。 ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/card.mdx b/docs/api/card.mdx index 8fcda23f8a0..54bf67031a2 100644 --- a/docs/api/card.mdx +++ b/docs/api/card.mdx @@ -1,6 +1,7 @@ --- -title: "ion-card" +title: 'ion-card' --- + import Props from '@ionic-internal/component-api/v9/card/props.mdx'; import Events from '@ionic-internal/component-api/v9/card/events.mdx'; import Methods from '@ionic-internal/component-api/v9/card/methods.mdx'; @@ -12,47 +13,44 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ion-card: Card UI Components for Ionic Framework API - + - カードは、テキスト、画像、ボタン、リストなどのコンテンツを表示するためのコンテナです。 カードは1つのコンポーネントで構成することもできますが、 多くの場合、ヘッダー、タイトル、サブタイトル、コンテンツで構成されます。 カードはこの構造に対応するため、いくつかのコンポーネントに分割されます。 [カードヘッダ](./card-header)、[カードタイトル](./card-title)、[カードサブタイトル](./card-subtitle)、[カードコンテンツ](./card-content)。 - ## 基本的な使い方 import Basic from '@site/static/usage/v9/card/basic/index.mdx'; - ## Media Cards import Media from '@site/static/usage/v9/card/media/index.mdx'; - ## Card Buttons import Buttons from '@site/static/usage/v9/card/buttons/index.mdx'; - ## List Card import List from '@site/static/usage/v9/card/list/index.mdx'; - ## テーマ ### Colors @@ -67,21 +65,26 @@ import CSSProps from '@site/static/usage/v9/card/theming/css-properties/index.md - ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/checkbox.mdx b/docs/api/checkbox.mdx index 0c092c2fb20..fa13238da44 100644 --- a/docs/api/checkbox.mdx +++ b/docs/api/checkbox.mdx @@ -1,5 +1,5 @@ --- -title: "ion-checkbox" +title: 'ion-checkbox' --- import Props from '@ionic-internal/component-api/v9/checkbox/props.mdx'; @@ -11,14 +11,16 @@ import Slots from '@ionic-internal/component-api/v9/checkbox/slots.mdx'; ion-checkbox: Ionic App Checkbox to Select Multiple Options - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Checkboxを使用すると、一連のオプションから複数のオプションを選択できます。選択すると、チェックマークが付いた状態(checked)で表示されます。checkboxをクリックすると、 `checked` プロパティーが切り替わります。`checked` プロパティを設定して、プログラムで `checked` を切り替えることもできます。 ## 基本的な使い方 @@ -55,7 +57,6 @@ import Justify from '@site/static/usage/v9/checkbox/justify/index.mdx'; - :::note `ion-item`は、 `justify` がどのように機能するかを強調するためにデモで使用されているだけです。 `justify` が正しく機能するために必須ではありません。 ::: @@ -115,19 +116,25 @@ interface CheckboxCustomEvent extends CustomEvent { ``` ## Properties + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/chip.mdx b/docs/api/chip.mdx index 6798a385075..74a30454a48 100644 --- a/docs/api/chip.mdx +++ b/docs/api/chip.mdx @@ -1,6 +1,7 @@ --- -title: "ion-chip" +title: 'ion-chip' --- + import Props from '@ionic-internal/component-api/v9/chip/props.mdx'; import Events from '@ionic-internal/component-api/v9/chip/events.mdx'; import Methods from '@ionic-internal/component-api/v9/chip/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/chip/slots.mdx'; ion-chip: Text, Icon and Avatar for Ionic Framework Apps - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -46,19 +50,25 @@ import CSSProps from '@site/static/usage/v9/chip/theming/css-properties/index.md ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/col.mdx b/docs/api/col.mdx index ad1d688365c..2e99198f1ba 100644 --- a/docs/api/col.mdx +++ b/docs/api/col.mdx @@ -1,6 +1,7 @@ --- -title: "ion-col" +title: 'ion-col' --- + import Props from '@ionic-internal/component-api/v9/col/props.mdx'; import Events from '@ionic-internal/component-api/v9/col/events.mdx'; import Methods from '@ionic-internal/component-api/v9/col/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/col/slots.mdx'; ion-col: Column Component Padding and Other Properties - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -26,19 +30,25 @@ Columnは、[Grid](./grid) システムのセルラーコンポーネントで デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムは[フレックスアイテム](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)なので、この動作をカスタマイズするために、カラムに適用できるいくつかの[CSSクラス](/docs/layout/css-utilities#flex-item-properties) があります。 ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/content.mdx b/docs/api/content.mdx index 87b1378429a..e3879c8d50a 100644 --- a/docs/api/content.mdx +++ b/docs/api/content.mdx @@ -1,6 +1,7 @@ --- -title: "ion-content" +title: 'ion-content' --- + import Props from '@ionic-internal/component-api/v9/content/props.mdx'; import Events from '@ionic-internal/component-api/v9/content/events.mdx'; import Methods from '@ionic-internal/component-api/v9/content/methods.mdx'; @@ -10,28 +11,28 @@ import Slots from '@ionic-internal/component-api/v9/content/slots.mdx'; ion-content: Scrollable Component for Ionic App Content - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Contentコンポーネントは、スクロール可能領域を制御するいくつかの便利なメソッドを備えた、 使いやすいコンテンツ領域を提供します。 1つのビューに表示できるコンテンツは1つだけです。 Contentは、他の多くのIonicコンポーネントと同様に、 [CSS Utilities](/docs/layout/css-utilities) で提供されるグローバルスタイルを使用するか、CSSおよび使用可能な [CSS Custom Properties](#css-custom-properties) を使用して個別にスタイル設定することによって、`padding` や `margin` などを変更するようにカスタマイズできます。 - ## 基本的な使い方 import Basic from '@site/static/usage/v9/content/basic/index.mdx'; - ## Header & Footer コンテンツは、ページ内の唯一のトップレベル・コンポーネントとすることも、[ヘッダー](./header)、[フッター](./footer)、またはその両方と一緒に使用することも可能です。ヘッダーやフッターと一緒に使用すると、残りの高さを埋めるようにサイズが調整されます。 @@ -40,7 +41,6 @@ import HeaderFooter from '@site/static/usage/v9/content/header-footer/index.mdx' - ## Fullscreen Content デフォルトでは、コンテンツは [ヘッダー](./header)と [フッター](./footer)の間のスペースを埋めますが、それらの背景にまわることはありません。例えば、ヘッダーとフッターのどちらかに `translucent` プロパティを設定した場合や、ツールバーに `opacity` を設定した場合など、特定のケースでは、コンテンツをヘッダーとフッターの後ろにスクロールさせることが望まれるかもしれない。これは、コンテンツの `fullscreen` プロパティを `true` に設定することで実現することができます。 @@ -49,7 +49,6 @@ import Fullscreen from '@site/static/usage/v9/content/fullscreen/index.mdx'; - ## コンテンツの固定 スクロール可能な領域の外側に要素を配置するには、`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)プロパティを使ってスタイルを設定することができます。 @@ -76,7 +75,6 @@ import ScrollEvents from '@site/static/usage/v9/content/scroll-events/index.mdx' - ## テーマ ### Colors @@ -161,21 +159,26 @@ interface ScrollCustomEvent extends ScrollBaseCustomEvent { } ``` - ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/datetime-button.mdx b/docs/api/datetime-button.mdx index 248e185d56e..1f3a9643efd 100644 --- a/docs/api/datetime-button.mdx +++ b/docs/api/datetime-button.mdx @@ -1,6 +1,7 @@ --- -title: "ion-datetime-button" +title: 'ion-datetime-button' --- + import Props from '@ionic-internal/component-api/v9/datetime-button/props.mdx'; import Events from '@ionic-internal/component-api/v9/datetime-button/events.mdx'; import Methods from '@ionic-internal/component-api/v9/datetime-button/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/datetime-button/slots.mdx'; ion-datetime-button: Ionic Input for Datetime Picker - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -48,19 +52,25 @@ import FormatOptions from '@site/static/usage/v9/datetime-button/format-options/ `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.mdx b/docs/api/datetime.mdx index ec68dd6c3a6..956db17538c 100644 --- a/docs/api/datetime.mdx +++ b/docs/api/datetime.mdx @@ -1,6 +1,7 @@ --- title: 'ion-datetime' --- + import Props from '@ionic-internal/component-api/v9/datetime/props.mdx'; import Events from '@ionic-internal/component-api/v9/datetime/events.mdx'; import Methods from '@ionic-internal/component-api/v9/datetime/methods.mdx'; @@ -160,8 +161,8 @@ Ionic Framework では、[Intl.DatetimeFormat](https://developer.mozilla.org/en- 時間サイクルには 4 つのタイプがあります。 -| 時間サイクルの種類 | 説明 | -| ------------------ | ----------------------------------------------------------------------------- | +| 時間サイクルの種類 | 説明 | +| ------------------ | ------------------------------------------------------------------------------ | | `'h12'` | 1〜12 を使用する時間方式。パターンの `h` に対応し、午前 12:00 から始まります。 | | `'h23'` | 0〜23 を使用する時間方式。パターンの `H` に対応し、0:00 から始まります。 | | `'h11'` | 0〜11 を使用する時間方式。パターンの `K` に対応し、午前 0:00 から始まります。 | @@ -501,19 +502,25 @@ interface DatetimeCustomEvent extends CustomEvent { ``` ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSS カスタムプロパティ + ## Slots + diff --git a/docs/api/fab-button.mdx b/docs/api/fab-button.mdx index 4210c71c923..91b087f089f 100644 --- a/docs/api/fab-button.mdx +++ b/docs/api/fab-button.mdx @@ -1,6 +1,7 @@ --- -title: "ion-fab-button" +title: 'ion-fab-button' --- + import Props from '@ionic-internal/component-api/v9/fab-button/props.mdx'; import Events from '@ionic-internal/component-api/v9/fab-button/events.mdx'; import Methods from '@ionic-internal/component-api/v9/fab-button/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/fab-button/slots.mdx'; ion-fab-button: Ionic FAB Button Icon for Primary Action - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -24,19 +28,25 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; 使用例については、[fab ドキュメント](./fab) を参照してください。 ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## スロット + diff --git a/docs/api/fab-list.mdx b/docs/api/fab-list.mdx index 823a120dedb..ff5c415e218 100644 --- a/docs/api/fab-list.mdx +++ b/docs/api/fab-list.mdx @@ -1,6 +1,7 @@ --- -title: "ion-fab-list" +title: 'ion-fab-list' --- + import Props from '@ionic-internal/component-api/v9/fab-list/props.mdx'; import Events from '@ionic-internal/component-api/v9/fab-list/events.mdx'; import Methods from '@ionic-internal/component-api/v9/fab-list/methods.mdx'; @@ -17,19 +18,25 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; 使用例については、[fab ドキュメント](./fab) を参照してください。 ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## スロット + diff --git a/docs/api/fab.mdx b/docs/api/fab.mdx index a7431f9df81..0ce4c88591e 100644 --- a/docs/api/fab.mdx +++ b/docs/api/fab.mdx @@ -1,6 +1,7 @@ --- -title: "ion-fab" +title: 'ion-fab' --- + import Props from '@ionic-internal/component-api/v9/fab/props.mdx'; import Events from '@ionic-internal/component-api/v9/fab/events.mdx'; import Methods from '@ionic-internal/component-api/v9/fab/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/fab/slots.mdx'; ion-fab: Ionic Floating Action Button for Android and iOS - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -49,7 +53,7 @@ import Positioning from '@site/static/usage/v9/fab/positioning/index.mdx'; ```css ion-fab { - margin-top: var(--ion-safe-area-top, 0)； + margin-top: var(--ion-safe-area-top, 0); } ``` @@ -57,7 +61,7 @@ ion-fab { ```css ion-fab { - margin-bottom: var(--ion-safe-area-bottom, 0)； + margin-bottom: var(--ion-safe-area-bottom, 0); } ``` @@ -112,19 +116,25 @@ import CSSShadowParts from '@site/static/usage/v9/fab/theming/css-shadow-parts/i FABはアイコンのみを含むことができるため、開発者は各`ion-fab-button`インスタンスに `aria-label` を提供しなければなりません。このラベルがなければ、支援技術は各ボタンの目的を告知することができません。 ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/footer.mdx b/docs/api/footer.mdx index d4144c8d715..a0b24aa69d9 100644 --- a/docs/api/footer.mdx +++ b/docs/api/footer.mdx @@ -1,6 +1,7 @@ --- -title: "ion-footer" +title: 'ion-footer' --- + import Props from '@ionic-internal/component-api/v9/footer/props.mdx'; import Events from '@ionic-internal/component-api/v9/footer/events.mdx'; import Methods from '@ionic-internal/component-api/v9/footer/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/footer/slots.mdx'; ion-footer: Page Footer | Ionic App Footer Root Component - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -56,19 +60,25 @@ import NoBorder from '@site/static/usage/v9/footer/no-border/index.mdx'; ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/grid.mdx b/docs/api/grid.mdx index 2a41d7b4123..713afa68200 100644 --- a/docs/api/grid.mdx +++ b/docs/api/grid.mdx @@ -1,6 +1,7 @@ --- title: 'ion-grid' --- + import Props from '@ionic-internal/component-api/v9/grid/props.mdx'; import Events from '@ionic-internal/component-api/v9/grid/events.mdx'; import Methods from '@ionic-internal/component-api/v9/grid/methods.mdx'; @@ -10,14 +11,16 @@ import Slots from '@ionic-internal/component-api/v9/grid/slots.mdx'; ion-grid: Display Grids for Mobile-First Custom App Layout - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッド、[row(s)](row.mdx)、 [column(s)](col.mdx) の 3 つのユニットで構成されています。カラムは行を埋めるように展開され、追加のカラムに合うようにサイズを変更します。これは、画面サイズに応じて異なるブレークポイントを持つ 12 列のレイアウトをベースにしています。カラムの数は、CSS を使ってカスタマイズすることができます。 ## 概要 @@ -49,7 +52,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; | lg | 992px | `sizeLg` | `offsetLg` | `pushLg` | `pullLg` | Set columns when (min-width: 992px) | | xl | 1200px | `sizeXl` | `offsetXl` | `pushXl` | `pullXl` | Set columns when (min-width: 1200px) | - ## 基本的な使い方 デフォルトでは、すべてのデバイスと画面サイズにおいて、列は行の中で同じ幅を占めます。 @@ -58,7 +60,6 @@ import Basic from '@site/static/usage/v9/grid/basic/index.mdx'; - ## グリッドの固定 {/* #fixed-grid */} グリッドはコンテナの幅の 100%を使用します。グリッドに`fixed`プロパティを追加することで、画面サイズに基づいて幅が設定されます。各ブレークポイントのグリッド幅は以下の表に示されていますが、カスタマイズすることも可能です。詳細については、[グリッドのカスタマイズ](#customizing-the-grid)を参照してください。以下の例を StackBlitz で開き、画面のサイズを変更してグリッド幅の変化を確認してください。 @@ -75,7 +76,6 @@ import Fixed from '@site/static/usage/v9/grid/fixed/index.mdx'; - ## カラムのサイズ カラムは特定のサイズに設定して、全カラム数のうち特定の数を占めるようにすることや、コンテンツに応じて幅を変更することができます。デフォルトのカラム数は 12 ですが、カスタマイズすることも可能です。詳細については、以下の[カラム数](#number-of-columns)のセクションを参照してください。 @@ -88,7 +88,6 @@ import SizeAuto from '@site/static/usage/v9/grid/size-auto/index.mdx'; - ### 指定されたサイズ カラムの `size` を設定すると、他のカラムは自動的にそのカラムの周りにリサイズされます。すべてのカラムにサイズが指定され、それがカラムの総数に満たない場合、カラムの後に空白ができます。 @@ -105,7 +104,6 @@ import SizeResponsive from '@site/static/usage/v9/grid/size-responsive/index.mdx - ## 列のオフセット カラムは、全カラム数のうち一定のカラム数だけ右にずらすオフセットが可能です。 @@ -126,7 +124,6 @@ import OffsetResponsive from '@site/static/usage/v9/grid/offset-responsive/index - ## コラム プッシュ＆プル カラムの総数のうち、一定のカラム数だけ、カラムを右に押したり、左に引いたりすることができます。 @@ -157,7 +154,6 @@ import VerticalAlignment from '@site/static/usage/v9/grid/vertical-alignment/ind - ### 水平アライメント すべての列は、行に異なるクラスを追加することで水平方向に整列させることができます。使用可能なクラスのリストは[CSS ユーティリティ](/layout/css-utilities.mdx#flex-container-properties)を参照してください。 @@ -197,19 +193,25 @@ import Padding from '@site/static/usage/v9/grid/customizing/padding/index.mdx'; ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSS カスタムプロパティ + ## Slots + diff --git a/docs/api/header.mdx b/docs/api/header.mdx index c7547a3f683..fa610ab6982 100644 --- a/docs/api/header.mdx +++ b/docs/api/header.mdx @@ -1,6 +1,7 @@ --- -title: "ion-header" +title: 'ion-header' --- + import Props from '@ionic-internal/component-api/v9/header/props.mdx'; import Events from '@ionic-internal/component-api/v9/header/events.mdx'; import Methods from '@ionic-internal/component-api/v9/header/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/header/slots.mdx'; ion-header: Header Parent Component for Ionic Framework Apps - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -66,19 +70,25 @@ import NoBorder from '@site/static/usage/v9/header/no-border/index.mdx'; ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/icon.mdx b/docs/api/icon.mdx index 0ec1ff46e7b..da82ad3406a 100644 --- a/docs/api/icon.mdx +++ b/docs/api/icon.mdx @@ -10,9 +10,9 @@ title: 'ion-icon' /> -Icon は、アイコンを表示するための汎用コンテナです。Ionicons はすべての Ionic Framework アプリケーションにデフォルトで含まれていますが、このコンポーネントでは Ionicons、カスタム SVG、フォントベースのアイコンライブラリ、そのほかのアイコンシステムも表示できます。アイコンの提供元にかかわらず、一貫したスタイルとサイズを提供します。 +Icon は、アイコンを表示するための汎用コンテナです。[Ionicons](https://ionic.io/ionicons) はすべての Ionic Framework アプリケーションにデフォルトで含まれていますが、このコンポーネントでは Ionicons、カスタム SVG、フォントベースのアイコンライブラリ、そのほかのアイコンシステムも表示できます。アイコンの提供元にかかわらず、一貫したスタイルとサイズを提供します。 -Ionicons のドキュメントについては、ionic.io/ioniconsを参照してください。 +Ionicons のドキュメントについては、[ionic.io/ionicons](https://ionic.io/ionicons)を参照してください。 ## 基本的な使い方 diff --git a/docs/api/img.mdx b/docs/api/img.mdx index 0b22f2faf99..da45ed720a7 100644 --- a/docs/api/img.mdx +++ b/docs/api/img.mdx @@ -1,5 +1,5 @@ --- -title: "ion-img" +title: 'ion-img' --- import Props from '@ionic-internal/component-api/v9/img/props.mdx'; @@ -11,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/img/slots.mdx'; ion-img: Img Tag to Lazy Load Images in Viewport - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -31,19 +34,25 @@ import Basic from '@site/static/usage/v9/img/basic/index.mdx'; ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/infinite-scroll-content.mdx b/docs/api/infinite-scroll-content.mdx index d4ee55e7a02..62f477c71e6 100644 --- a/docs/api/infinite-scroll-content.mdx +++ b/docs/api/infinite-scroll-content.mdx @@ -1,5 +1,5 @@ --- -title: "ion-infinite-scroll-content" +title: 'ion-infinite-scroll-content' --- import Props from '@ionic-internal/component-api/v9/infinite-scroll-content/props.mdx'; @@ -16,19 +16,25 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; 詳細および使用方法については、[Infinite Scrollドキュメント](./infinite-scroll.mdx#infinite-scroll-content)を参照してください。 ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## スロット + diff --git a/docs/api/infinite-scroll.mdx b/docs/api/infinite-scroll.mdx index f70ab60b7c3..3fb7def6330 100644 --- a/docs/api/infinite-scroll.mdx +++ b/docs/api/infinite-scroll.mdx @@ -1,5 +1,5 @@ --- -title: "ion-infinite-scroll" +title: 'ion-infinite-scroll' --- import Props from '@ionic-internal/component-api/v9/infinite-scroll/props.mdx'; @@ -11,12 +11,14 @@ import Slots from '@ionic-internal/component-api/v9/infinite-scroll/slots.mdx'; ion-infinite-scroll: Infinite Scroller Action Component - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Infinite Scrollコンポーネントは、ユーザーがページの下部または上部から指定された距離をスクロールしたときに実行されるアクションを呼び出します。 ユーザが定義された距離に達したときに、`ionInfinite` イベントに割り当てられた関数が呼び出されます。この関数がすべてのタスクを完了したら、無限スクロールインスタンスに対して `complete()` メソッドを呼び出す必要があります。 @@ -75,12 +77,8 @@ import CustomContent from '@site/static/usage/v9/infinite-scroll/custom-infinite ```html - - First item - - - Second item - + First item + Second item ... @@ -105,19 +103,25 @@ interface InfiniteScrollCustomEvent extends CustomEvent { ``` ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/input-otp.mdx b/docs/api/input-otp.mdx index 2e47b416e1e..67cae39507c 100644 --- a/docs/api/input-otp.mdx +++ b/docs/api/input-otp.mdx @@ -1,6 +1,7 @@ --- -title: "ion-input-otp" +title: 'ion-input-otp' --- + import Props from '@ionic-internal/component-api/v9/input-otp/props.mdx'; import Events from '@ionic-internal/component-api/v9/input-otp/events.mdx'; import Methods from '@ionic-internal/component-api/v9/input-otp/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/input-otp/slots.mdx'; ion-input-otp: ワンタイムパスワード入力コンポーネント - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -32,6 +36,7 @@ import Basic from '@site/static/usage/v9/input-otp/basic/index.mdx'; `type` プロパティは入力形式を決定し、数字または英数字の検証コードをサポートします。プロパティには2つの値を指定できる： `number`と `text` です。デフォルトでは `type="number"` を使用し、数字認証コードを入力を受け付けます。 `type="text"` を指定すると、英数字の入力を受け付ける。この柔軟性により、数字のみのコード（SMS 認証コードのような）や英数字のコード（バックアップコードやリカバリキーのような）など、さまざまな OTP フォーマットを扱うことができます `type` プロパティは `inputmode` 属性と `pattern` 属性の両方を自動的に設定します： + - `type="number"` の場合： - `inputmode="numeric"`を設定し、モバイルデバイスに数字キーボードを表示します。 - `pattern="[\p{N}]"`を設定し、数字入力のみを許可します。 @@ -72,6 +77,7 @@ import Size from '@site/static/usage/v9/input-otp/size/index.mdx'; ## Separators `separators` プロパティは1つ以上の入力ボックスの間に視覚的な仕切りを追加します。セパレータは3つの方法で定義できます： + - カンマで区切られた数値の文字列 (例: `"1,3"`) - 数字の配列 (例: `[1, 3]`) - 文字列 `"all"` (すべての入力ボックスの間にセパレータを表示する) @@ -85,6 +91,7 @@ import Separators from '@site/static/usage/v9/input-otp/separators/index.mdx'; ## States このコンポーネントは、入力ボックスの自動スタイリングのためのさまざまな状態をサポートしています： + - それぞれのプロパティによる `disabled` と `readonly` 状態 - フォームバリデーション状態： CSSクラスによって視覚的に示される `valid` と `invalid` の状態 - Angularの場合：バリデーション状態は、フレームワークの値アクセサとフォームバリデーションによって自動的に管理されます @@ -99,16 +106,18 @@ import States from '@site/static/usage/v9/input-otp/states/index.mdx'; ## 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="number"`: `"[\p{N}]"` スクリプト内のあらゆる種類の数値文字にマッチします。 - `type="text"`: `"[\p{L}\p{N}]"` あらゆるスクリプトのあらゆる種類の数字と、あらゆる言語のあらゆる種類の文字にマッチします。 このコンポーネントは、指定されたパターンにマッチしない文字の入力を防ぎます。開発者は、特定の入力要件に一致する独自のパターン文字列を提供することで、これらのデフォルトをオーバーライドできます。 :::tip カスタム `pattern` を使用する場合、`type` プロパティがモバイルデバイスに表示されるキーボードを制御することを覚えておいてください： + - 数字のみのパターンには `type="number"` を使い、数字キーボードを表示します。 - 英数字キーボードを表示するには、文字を含むパターンには `type="text"` を使用します。 -::: + ::: import Pattern from '@site/static/usage/v9/input-otp/pattern/index.mdx'; @@ -121,7 +130,7 @@ import Pattern from '@site/static/usage/v9/input-otp/pattern/index.mdx'; `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). +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/v9/input-otp/theming/colors/index.mdx'; @@ -144,30 +153,36 @@ Input OTPのキーボードナビゲーションは、[ARIA Authoring Practices コンポーネントが無効になっていない場合、これらのキーボード操作はすべての `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. | +| 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.mdx b/docs/api/input-password-toggle.mdx index 0f1704b3446..b7f918cc635 100644 --- a/docs/api/input-password-toggle.mdx +++ b/docs/api/input-password-toggle.mdx @@ -1,6 +1,7 @@ --- -title: "ion-input-password-toggle" +title: 'ion-input-password-toggle' --- + import Props from '@ionic-internal/component-api/v9/input-password-toggle/props.mdx'; import Events from '@ionic-internal/component-api/v9/input-password-toggle/events.mdx'; import Methods from '@ionic-internal/component-api/v9/input-password-toggle/methods.mdx'; @@ -10,43 +11,52 @@ import Slots from '@ionic-internal/component-api/v9/input-password-toggle/slots. 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/v9/input-password-toggle/basic/index.mdx'; ## Properties + ## Events + ## Methods + ## CSS Shadow Parts + ## CSS Custom Properties + ## Slots + diff --git a/docs/api/input.mdx b/docs/api/input.mdx index 7cc4d3b5e2f..0444d38ce5b 100644 --- a/docs/api/input.mdx +++ b/docs/api/input.mdx @@ -1,6 +1,7 @@ --- -title: "ion-input" +title: 'ion-input' --- + import Props from '@ionic-internal/component-api/v9/input/props.mdx'; import Events from '@ionic-internal/component-api/v9/input/events.mdx'; import Methods from '@ionic-internal/component-api/v9/input/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/input/slots.mdx'; ion-input: Custom Input With Styling and CSS Properties - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -168,7 +172,7 @@ import StartEndSlots from '@site/static/usage/v9/input/start-end-slots/index.mdx `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). +The `color` property does _not_ change the text color of the input. For that, use the [`--color` CSS property](#css-custom-properties-1). ::: import Colors from '@site/static/usage/v9/input/theming/colors/index.mdx'; @@ -205,19 +209,25 @@ interface InputCustomEvent extends CustomEvent { ``` ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/item-divider.mdx b/docs/api/item-divider.mdx index 8e32732b30d..67e44a0cff8 100644 --- a/docs/api/item-divider.mdx +++ b/docs/api/item-divider.mdx @@ -1,6 +1,7 @@ --- -title: "ion-item-divider" +title: 'ion-item-divider' --- + import Props from '@ionic-internal/component-api/v9/item-divider/props.mdx'; import Events from '@ionic-internal/component-api/v9/item-divider/events.mdx'; import Methods from '@ionic-internal/component-api/v9/item-divider/methods.mdx'; @@ -10,24 +11,24 @@ import Slots from '@ionic-internal/component-api/v9/item-divider/slots.mdx'; ion-item-divider: Item Divider Block Element for Ionic Apps - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - アイテムディバイダは、リスト内の [アイテム](./item) を区切るために使用できるブロック要素です。リストヘッダーと似ていますが、リストの一番上に置くだけでなく、アイテムのグループの間に置く必要があります。 - ## 基本的な使い方 import Basic from '@site/static/usage/v9/item-divider/basic/index.mdx'; - ## テーマ ### 配色 @@ -36,28 +37,32 @@ import Colors from '@site/static/usage/v9/item-divider/theming/colors/index.mdx' - ## CSSカスタムプロパティ import CSSProps from '@site/static/usage/v9/item-divider/theming/css-properties/index.mdx'; - ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/item-group.mdx b/docs/api/item-group.mdx index 8dab9816d47..4ce16df4fa5 100644 --- a/docs/api/item-group.mdx +++ b/docs/api/item-group.mdx @@ -1,6 +1,7 @@ --- -title: "ion-item-group" +title: 'ion-item-group' --- + import Props from '@ionic-internal/component-api/v9/item-group/props.mdx'; import Events from '@ionic-internal/component-api/v9/item-group/events.mdx'; import Methods from '@ionic-internal/component-api/v9/item-group/methods.mdx'; @@ -10,12 +11,14 @@ import Slots from '@ionic-internal/component-api/v9/item-group/slots.mdx'; ion-item-group: Group Items to Divide into Multiple Sections - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - アイテムグループとは、類似の[アイテム](./item)をまとめて整理するためのコンテナです。アイテムグループには、アイテムを複数のセクションに分けるための[アイテムディバイダー](./item-divider)を含めることができます。また、[スライドアイテム](./item-sliding)をグループ化するために使用することができます。 ## 基本的な使い方 @@ -30,21 +33,26 @@ import SlidingItems from '@site/static/usage/v9/item-group/sliding-items/index.m - ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/item-option.mdx b/docs/api/item-option.mdx index 2474f7c94f0..785ed96f62d 100644 --- a/docs/api/item-option.mdx +++ b/docs/api/item-option.mdx @@ -1,6 +1,7 @@ --- -title: "ion-item-option" +title: 'ion-item-option' --- + import Props from '@ionic-internal/component-api/v9/item-option/props.mdx'; import Events from '@ionic-internal/component-api/v9/item-option/events.mdx'; import Methods from '@ionic-internal/component-api/v9/item-option/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/item-option/slots.mdx'; ion-item-option: Option Button for Sliding Item in Ionic - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -22,19 +26,25 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; 詳細については、[item sliding](./item-sliding)のドキュメントを参照してください。 ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/item-options.mdx b/docs/api/item-options.mdx index 1902be20e22..01bf0d99794 100644 --- a/docs/api/item-options.mdx +++ b/docs/api/item-options.mdx @@ -1,6 +1,7 @@ --- -title: "ion-item-options" +title: 'ion-item-options' --- + import Props from '@ionic-internal/component-api/v9/item-options/props.mdx'; import Events from '@ionic-internal/component-api/v9/item-options/events.mdx'; import Methods from '@ionic-internal/component-api/v9/item-options/methods.mdx'; @@ -10,7 +11,10 @@ import Slots from '@ionic-internal/component-api/v9/item-options/slots.mdx'; ion-item-options: Option Button Components for Ionic Apps - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -22,24 +26,30 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## Side Description | Side | Position | Swipe Direction | -|---------|-----------------------------------------------------------------|-------------------------------------------------------------------| +| ------- | --------------------------------------------------------------- | ----------------------------------------------------------------- | | `start` | To the `left` of the content in LTR, and to the `right` in RTL. | From `left` to `right` in LTR, and from `right` to `left` in RTL. | | `end` | To the `right` of the content in LTR, and to the `left` in RTL. | From `right` to `left` in LTR, and from `left` to `right` in RTL. | ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/item-sliding.mdx b/docs/api/item-sliding.mdx index 94b1b242e7f..fbb878b34de 100644 --- a/docs/api/item-sliding.mdx +++ b/docs/api/item-sliding.mdx @@ -1,6 +1,7 @@ --- -title: "ion-item-sliding" +title: 'ion-item-sliding' --- + import Props from '@ionic-internal/component-api/v9/item-sliding/props.mdx'; import Events from '@ionic-internal/component-api/v9/item-sliding/events.mdx'; import Methods from '@ionic-internal/component-api/v9/item-sliding/methods.mdx'; @@ -10,15 +11,16 @@ import Slots from '@ionic-internal/component-api/v9/item-sliding/slots.mdx'; ion-item-sliding: Slide Buttons | Slide Right to Left - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - スライドアイテムには、ドラッグしてオプションボタンを表示させることができるアイテムが含まれています。子要素として [item](./item) コンポーネントが必要です。表示させるオプションはすべて [item options](./item-options) 要素に記述する必要があります。 - ## 基本的な使い方 スライドアイテムのオプションは、デフォルトではアイテムの `"end"` 側に配置されます。つまり、LTRでは右から左へ、RTLでは左から右へスワイプすると、オプションが表示されます。反対側に配置し、反対方向にスワイプしたときに表示されるようにするには、 [item options](./item-options) 要素の side 属性を `"start"` に設定します。アイテムオプションは最大2つまで同時に使用することができ、スワイプの方向によって2つの異なるオプションを表示させることができます。 @@ -27,7 +29,6 @@ import Basic from '@site/static/usage/v9/item-sliding/basic/index.mdx'; - ## Icon Options [アイテムオプション](./item-option) でアイコンをテキストと一緒に配置すると、デフォルトでテキストの上にアイコンを表示します。アイコンのスロットは、利用可能な [アイテムオプションスロット](./item-option#slots) に変更することで位置を変更することが可能です。 @@ -36,7 +37,6 @@ import Icons from '@site/static/usage/v9/item-sliding/icons/index.mdx'; - ## 拡張可能なオプション オプションは、スワイプがあるポイントを超えると、親となる `ion-item` の幅いっぱいに展開されます。これは、[item options](./item-options) の `ionSwipe` イベントと組み合わせることで、アイテムが完全にスワイプされたときにメソッドを呼び出すことができます。 @@ -45,7 +45,6 @@ import Expandable from '@site/static/usage/v9/item-sliding/expandable/index.mdx' - ## Interfaces ### ItemSlidingCustomEvent @@ -59,19 +58,25 @@ interface ItemSlidingCustomEvent extends CustomEvent { ``` ## プロパティ + ## イベント + ## メソッド + ## CSS Shadow Parts + ## CSSカスタムプロパティ + ## Slots + diff --git a/docs/api/item.mdx b/docs/api/item.mdx index 807073da891..e7f7d879518 100644 --- a/docs/api/item.mdx +++ b/docs/api/item.mdx @@ -1,6 +1,7 @@ --- -title: "ion-item" +title: 'ion-item' --- + import Props from '@ionic-internal/component-api/v9/item/props.mdx'; import Events from '@ionic-internal/component-api/v9/item/events.mdx'; import Methods from '@ionic-internal/component-api/v9/item/methods.mdx'; @@ -15,14 +16,16 @@ import TabItem from '@theme/TabItem'; ion-item: Input, Edit, or Delete iOS and Android Item Elements - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - アイテムは、テキスト、アイコン、アバター、画像、Input、その他のネイティブまたはカスタム要素を含むことができる要素です。アイテムは他のアイテムと一緒に[リスト](./list)の行としてのみ使用してください。アイテムはスワイプ、削除、並び替え、編集などができます。 ## 基本的な使い方 @@ -33,7 +36,6 @@ import Basic from '@site/static/usage/v9/item/basic/index.mdx'; - ## コンテンツの種類 {/* #content-types */} リスト内のアイテムは様々な形をとりますが、一般的にビジュアル、テキスト、メタデータ、アクション、コントロールの5つの異なるコンテンツタイプをサポートします。しかし、これらのコンテンツタイプをすべて同時に使うべきではありません。以下のガイドでは、異なるコンテンツタイプと、アプリケーションでの適切な利用方法を示します。 @@ -48,8 +50,18 @@ import Basic from '@site/static/usage/v9/item/basic/index.mdx'; text="Supporting visuals should be rendered in a consistent manner. This makes the information in each item easier to parse." doText="Align visuals on the same side in a list" doNotText="Don't render visuals with different alignments in the same list" - doImage={A list with several items. Each item has an icon and visible text describing the item. The icon in each item is rendered at the start of the line.} - doNotImage={A list with several items. Each item has an icon and visible text describing the item. Some icons are rendered at the start of the line, and some icons are rendered at the end of the line} + doImage={ + A list with several items. Each item has an icon and visible text describing the item. The icon in each item is rendered at the start of the line. + } + doNotImage={ + A list with several items. Each item has an icon and visible text describing the item. Some icons are rendered at the start of the line, and some icons are rendered at the end of the line + } /> 下の例では、ビジュアルをサポートする2つのリストを作成しています。最初のリストはアイコンを使い、2番目のリストはアバターを使います。ビジュアルは装飾的なものなので、すべて `aria-hidden="true"` を指定しています。さらに、これらは `start` スロットで一貫して表示されます。 @@ -63,11 +75,27 @@ import SupportingVisuals from '@site/static/usage/v9/item/content-types/supporti テキスト・コンテンツ・タイプには、フォーム制御ラベルやその他の可視テキストが含まれます。このテキストは項目の意図を示す役割を果たします。テキストは短く、要点をまとめるようにしてください。 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.} + text={ + <> + 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={A list with an item that contains a checked checkbox indicating the user wants to receive emails. Text describing how often the user will receive emails as well as how to unsubscribe from emails is placed underneath the list.} - doNotImage={A list with an item that contains a checked checkbox indicating the user wants to receive emails. Text describing how often the user will receive emails as well as how to unsubscribe from emails is placed as a single paragraph inline with the checkbox, making the text hard to read and increasing the height of the item.} + doImage={ + A list with an item that contains a checked checkbox indicating the user wants to receive emails. Text describing how often the user will receive emails as well as how to unsubscribe from emails is placed underneath the list. + } + doNotImage={ + A list with an item that contains a checked checkbox indicating the user wants to receive emails. Text describing how often the user will receive emails as well as how to unsubscribe from emails is placed as a single paragraph inline with the checkbox, making the text hard to read and increasing the height of the item. + } /> 下の例では、さまざまなタイプのテキストでリストを作成しています。"First Name"と "Last Name "のラベルは、テキスト入力に何を入力すべきかを示しています。 @@ -88,16 +116,36 @@ import Text from '@site/static/usage/v9/item/content-types/text/index.mdx'; text="Limit the amount of metadata you include to only the most relevant information." doText="Add only the most important metadata" doNotText="Don't add too much metadata as it can overwhelm or confuse the user." - doImage={A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item.} - doNotImage={A list that contains several items, each representing a different to-do list. Two counts are placed at the end of each item: One count that states the total number of tasks, and another count that states the total number of tasks that are due today.} + doImage={ + A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item. + } + doNotImage={ + A list that contains several items, each representing a different to-do list. Two counts are placed at the end of each item: One count that states the total number of tasks, and another count that states the total number of tasks that are due today. + } /> } - cautionImage={A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item. However, the count is highlighted in blue which draws the user's attention away from the name of the to-do list.} + doImage={ + A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item. + } + cautionImage={ + A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item. However, the count is highlighted in blue which draws the user's attention away from the name of the to-do list. + } /> 以下の例では、異なる種類のメタデータを持つ2つのリストを作成している。最初のリストは[Note](./note)を使って、それぞれのToDoリストにいくつのタスクがあるかを表示している。 @@ -115,11 +163,32 @@ import Metadata from '@site/static/usage/v9/item/content-types/metadata/index.md 開発者は、入れ子になったインタラクティブ機能を作成することは避けるべきです。例えば、 `button` プロパティが `true` に設定されている場合、開発者はアイテムのメインコンテンツ内にボタンを追加することを避けるべきです。 Actions can be added by using the Item Sliding component. Actions can also be placed directly inside of the Item without the use of Item Sliding, but this should be limited to no more than 2 actions.} - doText={<>Use an Item Sliding to reveal multiple actions by swiping on the Item.} + text={ + <> + 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={A list that contains several items, each representing a contact. Each item has text that states the contact's name as well as several actions including pinning the contact, sharing the contact, and deleting the contact. These actions are revealed by swiping on the item.} - doNotImage={A list that contains several items, each representing a contact. Each item has text that states the contact's name as well as several actions including pinning the contact, sharing the contact, and deleting the contact. The actions are placed directly on the item. Since there are so many actions, some of the text is cut off.} + doImage={ + A list that contains several items, each representing a contact. Each item has text that states the contact's name as well as several actions including pinning the contact, sharing the contact, and deleting the contact. These actions are revealed by swiping on the item. + } + doNotImage={ + A list that contains several items, each representing a contact. Each item has text that states the contact's name as well as several actions including pinning the contact, sharing the contact, and deleting the contact. The actions are placed directly on the item. Since there are so many actions, some of the text is cut off. + } /> 下の例では、連絡先のリストを作成しています。各項目は、その項目の完全な連絡先ページに移動するためのスタブボタンです。各項目には、ユーザーが項目をスワイプすることで表示できる追加アクションがあります。 @@ -133,27 +202,74 @@ import Actions from '@site/static/usage/v9/item/content-types/actions/index.mdx' コントロールは、チェックボックス、入力、ラジオなどのフォームコンポーネントです。リスト内の各項目は、画面スペースの制約上、最大でも2つのコントロールを持つ必要があります。 Metadata such as helper text or character counts should not be used on form controls in list views. If such metadata is needed, the form control should be placed outside of a list. Filled Inputs are a great way of visually defining the input container outside of a list.} + text={ + <> + 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={There is an email input and a password input. Both have helper text associated with them. Since both are placed outside of a list it is clear which input each helper text is associated with.} - doNotImage={There is a list containing an email input and a password input. Both have helper texts associated with them. However, the divider between each item and between the helper text makes it hard to tell which input each helper text is associated with.} + doImage={ + There is an email input and a password input. Both have helper text associated with them. Since both are placed outside of a list it is clear which input each helper text is associated with. + } + doNotImage={ + There is a list containing an email input and a password input. Both have helper texts associated with them. However, the divider between each item and between the helper text makes it hard to tell which input each helper text is associated with. + } /> Alternatively, the metadata can be placed in a Note at the bottom of the list.} + text={ + <> + 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={There are two lists of inputs. The first list contains a password input. Below that list contains text that says 'Password must be at least 16 characters'. The second list contains an email input. This second list is separated so the password length requirement text is clearly associated with the password input above.} - doNotImage={There is one list of inputs. One of the inputs is a password input with text below the input that says 'Password must be at least 16 characters'. However, this text is placed directly above another input, so it's not immediately clear which input the text is associated with.} + doImage={ + There are two lists of inputs. The first list contains a password input. Below that list contains text that says 'Password must be at least 16 characters'. The second list contains an email input. This second list is separated so the password length requirement text is clearly associated with the password input above. + } + doNotImage={ + There is one list of inputs. One of the inputs is a password input with text below the input that says 'Password must be at least 16 characters'. However, this text is placed directly above another input, so it's not immediately clear which input the text is associated with. + } /> 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.} + text={ + <> + 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={There is one list of inputs. One of the inputs is a password input with text below the input that says 'Password must be at least 16 characters'. However, this text is placed directly above another input, so it's not immediately clear which input the text is associated with.} - doNotImage={There are two lists of inputs. The first list contains a password input. Below that list contains text that says 'Password must be at least 16 characters'. The second list contains an email input. This second list is separated so the password length requirement text is clearly associated with the password input above.} + doImage={ + There is one list of inputs. One of the inputs is a password input with text below the input that says 'Password must be at least 16 characters'. However, this text is placed directly above another input, so it's not immediately clear which input the text is associated with. + } + doNotImage={ + There are two lists of inputs. The first list contains a password input. Below that list contains text that says 'Password must be at least 16 characters'. The second list contains an email input. This second list is separated so the password length requirement text is clearly associated with the password input above. + } /> 以下の例では、ToDoタスクのリストを作成しています。それぞれの項目にはチェックボックスと入力があります。チェックボックスはユーザーがタスクを完了としてマークできるようにし、入力はユーザーがタスクの名前を変更できるようにします。 @@ -162,7 +278,6 @@ import Controls from '@site/static/usage/v9/item/content-types/controls/index.md - ## クリック可能なItems `href`、`button`、`routerLink` のいずれかのプロパティが設定されている場合、item は「clickable（クリック可能）」と見なされます。clickable な item には、操作可能であることを示す視覚的な違いがいくつかあります。例えば、`md` mode では操作時に ripple エフェクトが適用され、`ios` mode では操作時にハイライトされ、デフォルトで [detail arrow](#detail-arrows) が表示されます。 @@ -171,7 +286,6 @@ import Clickable from '@site/static/usage/v9/item/clickable/index.mdx'; - ## ルーティング Item は `routerLink` プロパティを使用したクライアントサイドナビゲーションをサポートします。`routerLink` を設定すると item はアンカーとしてレンダリングされ、タップしたときに指定したルートへ移動します。`routerDirection` プロパティは遷移アニメーションの方向を制御し、`routerAnimation` にはカスタムアニメーションビルダーを指定できます。 @@ -338,6 +452,7 @@ import CSSProps from '@site/static/usage/v9/item/theming/css-properties/index.md ### キーボードインタラクション An `` has the following keyboard interactions when any of these conditions are met: + - The `button` property is set to `"true"`, rendering a native `