diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index 750cea4b16e..d590af002fa 100644 --- a/.github/workflows/CI.yml +++ b/.github/workflows/CI.yml @@ -2,7 +2,7 @@ # https://help.github.com/en/articles/about-github-actions # https://help.github.com/en/articles/workflow-syntax-for-github-actions -name: Install Dependencies, Lint +name: Validate Docs on: [pull_request] @@ -13,22 +13,28 @@ jobs: 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. os: [windows-latest, macOS-latest] steps: - - uses: actions/checkout@v4 - - name: Use Node.js ${{ matrix.node_version }} - uses: actions/setup-node@v4 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - name: ⚙ Use Node.js ${{ matrix.node_version }} + uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 with: node-version: ${{ matrix.node_version }} - - name: Install Dependencies + - name: 🕞 Install Dependencies run: npm ci --legacy-peer-deps - - name: Lint + - name: 🖌 Lint run: npm run lint - - name: Spell Check + - name: 🔀 Spell Check run: npm run spellcheck + - uses: ./.github/workflows/actions/check-translations # Lint and spell check changes should be pushed # to the branch before the branch is merge eligible. - - name: Check Diff + # + # The translation keys check should not produce any changes. + - name: 🔍 Check Diff run: git diff --exit-code shell: bash diff --git a/.github/workflows/actions/check-translations/action.yml b/.github/workflows/actions/check-translations/action.yml new file mode 100644 index 00000000000..3e53a643597 --- /dev/null +++ b/.github/workflows/actions/check-translations/action.yml @@ -0,0 +1,20 @@ +name: 'Check Translations' +description: 'Validates the translated locales without building them' +runs: + using: 'composite' + steps: + # Surfaces failures unique to a translated locale, such as duplicate + # translation keys, while the changes are still in review. Previews only + # build the default locale, so translated locale issues would not surface + # until after merging into main. + # + # The sidebars reference the native and CLI docs, which are generated rather + # than committed, so those have to exist before the translations can be + # extracted. + - name: 🇯🇵 Extract Translations + shell: bash + run: | + trap 'rm -rf i18n' EXIT + node scripts/native.mjs + node scripts/cli.mjs + npx docusaurus write-translations --locale ja diff --git a/.prettierignore b/.prettierignore index c750d314e8a..1c90550de8f 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,5 +1,14 @@ -src/theme/DocItem -src/theme/DocRoot +# Ejected components keep upstream's formatting so they stay diffable against +# @docusaurus/theme-classic. Refer to `src/theme/README.md`. +# 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/Edit/index.tsx +src/theme/Icon/Language/index.tsx +src/theme/Layout/index.tsx +src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +src/theme/prism-include-languages.ts + legacy-stencil-components scripts/bak @@ -7,7 +16,16 @@ docs/api 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.md +versioned_docs/version-v*/reference/glossary.md + +# Archived versions +versioned_docs/version-v5 +versioned_docs/version-v6 static/code/stackblitz diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6f589964046..534db3dd80a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -19,6 +19,7 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check - [Reporting Issues](#reporting-issues) - [Pull Request Guidelines](#pull-request-guidelines) - [Deploying](#deploying) + - [Archiving a Version](#archiving-a-version) - [License](#license) --- @@ -34,6 +35,42 @@ npm install npm start ``` +#### GitHub Token + +The documentation build requires a GitHub Personal Access Token to fetch Ionic Framework release notes. The build will still work locally without it (release notes will be empty), but it's required for Vercel preview and production builds. + +**Local Development:** + +1. Create a [fine-grained Personal Access Token](https://github.com/settings/personal-access-tokens/new) with: + + - **Repository access**: Public repositories (read-only) + - **Expiration**: 366 days (update annually) + +2. Add the token to your shell profile (`~/.zshrc`, `~/.bashrc`, etc.): + + ```sh + export GITHUB_TOKEN=github_pat_... + ``` + +3. Reload your shell or run `source ~/.zshrc` (or equivalent) + +**Vercel:** + +1. Create a [fine-grained Personal Access Token](https://github.com/settings/personal-access-tokens/new) with the same settings as above, but with: + + - **Owner**: ionic-team organization (not your personal account) + +2. Add the token to Vercel project settings: + + - Go to your project on Vercel + - Navigate to **Settings → Environment Variables** + - Add `GITHUB_TOKEN` with the token value + - Select Production and Preview environments + +3. Redeploy the project for the token to take effect + +Without the token, the build will fail with an error message indicating the token is missing. + ### Linting Documentation This repository uses [Prettier](https://prettier.io/), an opinionated code formatter, in order to keep consistent formatting throughout the documentation. Run the following command to automatically fix all formatting, and then push any changes: @@ -175,6 +212,33 @@ When submitting pull requests, please keep the scope of your change contained to The Ionic documentation's `main` branch is deployed automatically and separately from the [Ionic site](https://github.com/ionic-team/ionic-site) itself. The Ionic site then uses a proxy for paths under `/docs` to request the deployed documentation. +### 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: + +- [`versions.json`](./versions.json): lists the versions Docusaurus rebuilds on every deploy. +- [`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`: + +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): + + ```json + { + "v6": "https://ionic-docs--ionic1.vercel.app/docs/v6" + } + ``` + +5. **Open a PR.** Once merged, the version picker links to the archive and `main` stops building that version. + +Removed versions keep their `versioned_docs/` and `versioned_sidebars/` content, so they can be rebuilt anytime by adding them back to `versions.json`. + +> [!NOTE] +> Ionic v3 and v4 use other build tools and are not managed here. + --- ## License diff --git a/_templates/playground/new/vue.md.ejs.t b/_templates/playground/new/vue.md.ejs.t index 1a13f8b8dcc..5867eb38b95 100644 --- a/_templates/playground/new/vue.md.ejs.t +++ b/_templates/playground/new/vue.md.ejs.t @@ -2,7 +2,7 @@ arbitrary: <% pascalComponent = h.changeCase.pascal(component) %> to: "<%= `static/usage/v${version}/${name}/${path}/vue.md` %>" --- -```html +```vue diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index e00595dae7d..00000000000 --- a/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - presets: [require.resolve('@docusaurus/core/lib/babel/preset')], -}; diff --git a/cspell.json b/cspell.json index 972166aa24f..ab8b25ef41b 100644 --- a/cspell.json +++ b/cspell.json @@ -18,6 +18,8 @@ "versioned_docs/**/api", "versioned_docs/**/cli", "versioned_docs/**/native", + "versioned_docs/version-v5", + "versioned_docs/version-v6", "node_modules", "src/translate" ], diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md index 630864d1621..8c38bf971c1 100644 --- a/docs/angular/build-options.md +++ b/docs/angular/build-options.md @@ -17,7 +17,7 @@ Ionic UI components as Angular standalone components is supported starting in Io Developers can use Ionic components as standalone components to take advantage of treeshaking and newer Angular features. This option involves importing specific Ionic components in the Angular components you want to use them in. Developers can use Ionic standalone components even if their Angular application is NgModule-based. -See the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for instructions on how to update your Ionic app to make use of Ionic standalone components. +Ionic のスタンドアロンコンポヌネントを利甚するために、Ionic アプリを曎新する方法に぀いおは、[スタンドアロン移行ガむド](#migrating-from-modules-to-standalone)を参照しおください。 **Benefits** diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md index 85a76955693..34c8fafba64 100644 --- a/docs/angular/lifecycle.md +++ b/docs/angular/lifecycle.md @@ -15,26 +15,26 @@ sidebar_label: ラむフサむクル ![Flowchart illustrating the Ionic page life cycle events and their sequence.](/img/guides/lifecycle/ioniclifecycle.png 'Ionic Lifecycle Diagram') -## Angular の Life Cycle Events +## Angular のラむフサむクルむベント -Ionic は Angular が提䟛する Life Cycle Events を取り入れおいたす。最もよく䜿う 2 ぀の Angular むベントは次のずおりです。 +Ionic は Angular が提䟛するラむフサむクルむベントを取り入れおいたす。最もよく䜿う 2 ぀の Angular むベントは次のずおりです。 -| Event Name | Description | +| むベント名 | 説明 | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | `ngOnInit` | コンポヌネントの初期化䞭に発生したす。このむベントを䜿甚しお、ロヌカルメンバヌを初期化し、䞀床だけ実行する必芁がある Service を呌び出すこずができたす。 | | `ngOnDestroy` | Angular がビュヌを砎棄する盎前に発生したす。 observables の unsubscribe などのクリヌンアップに圹立ちたす。 | -Angular の Component Life Cycle むベントの詳现に぀いおは、それらの [component lifecycle docs](https://angular.jp/guide/lifecycle-hooks) をご芧ください。 +Angular のコンポヌネントラむフサむクルむベントの詳现に぀いおは、[コンポヌネントラむフサむクルのドキュメント](https://angular.jp/guide/lifecycle-hooks)をご芧ください。 :::note `ion-nav` たたは `ion-router-outlet` を䜿甚するコンポヌネントは、 `OnPush` 倉曎怜出方匏を䜿甚しないでください。そうするこずで、 `ngOnInit` などのラむフサむクル・フックが起動するのを防ぐこずができたす。たた、非同期状態の倉曎は正しくレンダリングされない堎合がありたす。 ::: -## Ionic の Page Events +## Ionic のペヌゞむベント -Angular の Life Cycle Events に加えお、Ionic Angular には、䜿甚可胜ないく぀かの远加むベントがありたす: +Angular のラむフサむクルむベントに加えお、Ionic Angular には、䜿甚可胜ないく぀かの远加むベントがありたす: -| Event Name | Description | +| むベント名 | 説明 | | ------------------ | ------------------------------------------------------------------------ | | `ionViewWillEnter` | コンポヌネントが衚瀺されるアニメヌションがはじたる時に発火したす。 | | `ionViewDidEnter` | コンポヌネントが衚瀺されるアニメヌションが **終了した時に** 発火したす。 | @@ -49,7 +49,7 @@ Angular の Life Cycle Events に加えお、Ionic Angular には、䜿甚可胜 ![Animated GIF showing Ionic page life cycle events in a console log as a page transition occurs.](/img/guides/lifecycle/ioniclifecycle.gif 'Ionic Lifecycle Animation') -## Ionic が Page の Life をどのように凊理するか +## Ionic がペヌゞのラむフサむクルを凊理する仕組み Ionic は `` ずいう router outlet を持っおいたす。この outlet が Angular の `` を継承し、さらに拡匵しお、モバむルデバむスのためのより良い䜓隓を可胜にしたした。 @@ -91,13 +91,13 @@ export class AuthGuard implements CanActivate { ルヌトガヌドの䜿い方の詳现に぀いおは、Angular の [router documentation](https://angular.jp/guide/router) を参照しおください。 -## Life Cycle メ゜ッドのガむダンス +## ラむフサむクルメ゜ッドのガむダンス -以䞋は、life cycle events ごずのナヌスケヌスに関するヒントです。 +以䞋は、ラむフサむクルむベントごずのナヌスケヌスに関するヒントです。 -- `ngOnInit` - コンポヌネントを初期化し、Service からアクセスごずに曎新する必芁がないデヌタをロヌドしたす。 -- `ionViewWillEnter` - `ionViewWillEnter` は View がナビゲヌトされる床に呌び出されるので初期化されおいるかどうかにかかわらず、Service からデヌタをロヌドするのに適したメ゜ッドです。ただし、アニメヌション䞭にデヌタがを取埗するず、倧量の DOM 操䜜が開始される可胜性がありたす。これにより、ぎこちないアニメヌションが発生する可胜性がありたす。 -- `ionViewDidEnter` - `ionViewWillEnter` を䜿っおデヌタを取埗しおいおパフォヌマンスに問題がある時は、`ionViewDidEnter` を代わりに䜿うこずができたす。ただし、Page がナヌザヌに衚瀺されるたではこのむベントは発火したせん。そのため、ロヌドむンゞケヌタたたはスケルトン画面を䜿甚するこずをお勧めしたす。これにより、遷移が完了した埌にコンテンツが䞍自然に点滅するこずはありたせん。 -- `ionViewWillLeave` - observables の unsubscribing のように、クリヌンアップで利甚したす。 `ngOnDestroy` はあなたが珟圚のペヌゞから遷移する時には発火しない可胜性がありたすので、画面が衚瀺されおいない時にアクティブにしたくない堎合はここでクリヌンアップの凊理を行いたす。 -- `ionViewDidLeave` - このむベントが発生するず、新しいペヌゞぞず完党に遷移したこずがわかりたす。そのため、ビュヌが衚瀺されおいるずきに通垞は行わない可胜性があるロゞックはすべおここに移動できたす。 -- `ngOnDestroy` - `ionViewWillLeave` でクリヌンアップしたくないペヌゞのクリヌンアップロゞックはここにおいおください。 +- `ngOnInit` - コンポヌネントを初期化し、各蚪問時に曎新が䞍芁なサヌビスからデヌタを読み蟌みたす。 +- `ionViewWillEnter` - `ionViewWillEnter` はビュヌがナビゲヌトされるたびに初期化されおいるかどうかに関係なく呌ばれるため、サヌビスからデヌタをロヌドするのに適したメ゜ッドです。ただし、アニメヌション䞭にデヌタが返っおくるず、倚くの DOM 操䜜が開始され、アニメヌションがぎこちなくなるこずがありたす。 +- `ionViewDidEnter` - デヌタをロヌドするずきに `ionViewWillEnter` を䜿甚しおパフォヌマンスに問題が生じる堎合は、代わりに `ionViewDidEnter` でデヌタ呌び出しを行うこずができたす。ただし、このむベントはペヌゞがナヌザヌに衚瀺されおから発火するため、コンテンツが遷移完了埌に䞍自然にフラッシュしないよう、ロヌディングむンゞケヌタヌやスケルトンスクリヌンを䜿甚するこずを怜蚎しおください。 +- `ionViewWillLeave` - Observable の賌読解陀のようなクリヌンアップに䜿甚できたす。`ngOnDestroy` は珟圚のペヌゞからナビゲヌトしたずきに発火しない可胜性があるため、スクリヌンが衚瀺されおいない間にアクティブにしたくない堎合は、ここにクリヌンアップコヌドを眮いおください。 +- `ionViewDidLeave` - このむベントが発火するず、新しいペヌゞが完党に遷移したこずがわかるので、通垞ビュヌが衚瀺されおいるずきには行わないロゞックをここで実行できたす。 +- `ngOnDestroy` - `ionViewWillLeave` でクリヌンアップしたくないペヌゞ甚のクリヌンアップロゞック。 diff --git a/docs/angular/navigation.md b/docs/angular/navigation.md index 96576a1b061..e0ad8063450 100644 --- a/docs/angular/navigation.md +++ b/docs/angular/navigation.md @@ -6,20 +6,20 @@ sidebar_label: ナビゲヌション/ルヌティング import useBaseUrl from '@docusaurus/useBaseUrl'; - Angular Navigation: How Routing & Redirects Work in Angular Apps + Angular ナビゲヌション: Angular アプリのルヌティングずリダむレクト このガむドでは、Ionic ず Angular を䜿甚しお構築されたアプリでのルヌティングのしくみに぀いお説明したす。 -Angular Router は、Angular アプリケヌションで最も重芁なラむブラリの 1 ぀です。これがなければ、アプリはシングルビュヌ/シングルコンテキストアプリになるか、ブラりザのリロヌド時にナビゲヌションのステヌトを維持できなくなりたす。Angular Router を䜿甚するず、リンク可胜でリッチなアニメヌションを持぀リッチなアプリを䜜成できたすもちろん、Ionic ず組み合わせるず。Angular Router の基本ず、それを Ionic アプリケヌション甚に蚭定する方法を芋おみたしょう。 +Angular Router は、Angular アプリケヌションにおいお最も重芁なラむブラリの䞀぀です。これがなければ、アプリは単䞀ビュヌ/単䞀コンテキストのアプリになったり、ブラりザをリロヌドしたずきにナビゲヌション状態を維持できなくなりたす。Angular Router を䜿えば、リンク可胜でリッチなアニメヌションを持぀アプリを䜜成するこずができたすもちろん Ionic ず組み合わせた堎合。ここでは、Angular Router の基本ず、Ionic アプリ向けにどのように蚭定できるかを順を远っお芋おいきたしょう。 -## シンプルな Route +## シンプルなルヌト -ほずんどのアプリでは、some sort of route を持぀こずがしばしば必芁になりたす。最も基本的な蚭定はこのようになりたす +ほずんどのアプリでは、䜕らかのルヌトが必芁になりたす。最も基本的な蚭定は次のようになりたす。 ```tsx @@ -70,7 +70,7 @@ URL path ず Component の組み合わせを確認する最も簡単な方法は `/route1/route2/route3` ず `/route1/route2/route4` の䞡方を読み蟌んだずおき, どちらの堎合もリダむレクトしたす。 `pathMatch: 'prefix'` によっお、䞀郚でも䞀臎したら該圓するからです。 -## routes ぞのナビゲヌション +## routes ぞのナビゲヌション {/* #navigating-to-different-routes */} routes に぀いお説明しおきたしたが、それではどのようにしおそのルヌトにナビゲヌションしたらいいのでしょうか。これには、 `routerLink` directive を利甚したす。先ほどの簡単な router 蚭定でこれを確認しおみたしょう: @@ -120,17 +120,17 @@ export class LoginComponent { ### LocationStrategy.historyGo を䜿ったナビゲヌション -Angular Router には [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) メ゜ッドがあり、アプリケヌションの履歎を進んだり戻ったりするこずができたす。䟋を芋おみたしょう。 +Angular Router には、開発者がアプリケヌションの履歎を前埌に移動できる[LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo)メ゜ッドがありたす。䟋を芋おみたしょう。 次のようなアプリケヌションの履歎があるずしたす -`/ペヌゞA` --> `/ペヌゞB` --> `/ペヌゞC`。 +`/pageA` --> `/pageB` --> `/pageC`。 もし `/pageC` で `LocationStrategy.historyGo(-2)` を呌び出すず、 `/pageA` に戻る。その埌、 `LocationStrategy.historyGo(2)` を呌び出すず、 `/pageC` に戻る。 -`LocationStrategy.historyGo()` の䞻な特城は、アプリケヌションの履歎が線圢であるこずを想定しおいるこずです。぀たり、`LocationStrategy.historyGo()` は非線圢のルヌティングを䜿甚するアプリケヌションでは䜿甚すべきではありたせん。詳しくは [リニアルヌティング察非リニアルヌティング](#linear-routing-versus-non-linear-routing) を参照しおください。 +`LocationStrategy.historyGo()`の重芁な特城の䞀぀は、アプリケヌションの履歎が線圢であるこずを期埅する点です。぀たり、`LocationStrategy.historyGo()`は非線圢ルヌティングを䜿甚するアプリケヌションでは䜿甚すべきではありたせん。詳现は[線圢ルヌティングず非線圢ルヌティング](#linear-routing-versus-non-linear-routing)を参照しおください。 -## Lazy loading routes +## ルヌトの遅延読み蟌み {/* #lazy-loading-routes */} 珟圚のルヌト蚭定では、すべおの Component が、ルヌトずなる `app.module` ず同じ `chunk` に含たれおいるので理想的ではありたせん。代わりに、ルヌタにはコンポヌネントを独自の `chunk` に分離できるように蚭定されおいたす。 @@ -263,9 +263,9 @@ We recommend keeping your application as simple as possible until you need to ad The two most common uses of non-linear routing is with tabs and nested `ion-router-outlet`s. We recommend only using non-linear routing if your application meets the tabs or nested router outlet use cases. -For more on tabs, please see [Working with Tabs](#working-with-tabs). +タブの詳现に぀いおは、[タブの操䜜](#working-with-tabs)を参照しおください。 -For more on nested router outlets, please see [Nested Routes](#nested-routes). +ネストされたルヌタヌアりトレットの詳现に぀いおは、[ネストされたルヌト](#nested-routes)を参照しおください。 ## Shared URLs versus Nested Routes @@ -319,13 +319,13 @@ The above routes are nested because they are in the `children` array of the pare Shared URLs are great when you want to transition from page A to page B while preserving the relationship between the two pages in the URL. In our previous example, a button on the `/dashboard` page could transition to the `/dashboard/stats` page. The relationship between the two pages is preserved because of a) the page transition and b) the url. -Nested routes should be used when you want to render content in outlet A while also rendering sub-content inside of a nested outlet B. The most common use case you will run into is tabs. When you load up a tabs Ionic starter application, you will see `ion-tab-bar` and `ion-tabs` components rendered in the first `ion-router-outlet`. The `ion-tabs` component renders another `ion-router-outlet` which is responsible for rendering the contents of each tab. +ネストされたルヌトは、アりトレット A でコンテンツを衚瀺し぀぀、ネストされたアりトレット B 内にサブコンテンツを衚瀺したい堎合に䜿甚するべきです。最も䞀般的な䜿甚䟋はタブです。タブの Ionic スタヌタヌアプリケヌションをロヌドするず、最初の`ion-router-outlet`が`ion-tab-bar`ず`ion-tabs`コンポヌネントをレンダリングしたす。`ion-tabs`コンポヌネントは別の`ion-router-outlet`をレンダリングし、各タブの内容を衚瀺する圹割を持っおいたす。 There are very few use cases in which nested routes make sense in mobile applications. When in doubt, use the shared URL route configuration. We strongly caution against using nested routing in contexts other than tabs as it can quickly make navigating your app confusing. ## Working with Tabs -タブを䜿甚するず、Angular Router にどのコンポヌネントをロヌドする必芁があるかを知るためのメカニズムを Ionic が提䟛したすが、タブコンポヌネントでは耇雑な䜜業が行われたす。簡単な䟋を芋おみたしょう。 +タブを䜿甚するず、Angular Router は Ionic にどのコンポヌネントを読み蟌むべきかを知る仕組みを提䟛したすが、実際の重い䜜業はタブコンポヌネントによっお行われたす。簡単な䟋を芋おみたしょう。 ```ts const routes: Routes = [ @@ -378,7 +378,7 @@ Each tab in Ionic is treated as an individual navigation stack. This means if yo This behavior is important to note as it is different than most tab implementations that are found in other web based UI libraries. Other libraries typically manage tabs as one single history stack. -Since Ionic is focused on helping developers build mobile apps, the tabs in Ionic are designed to match native mobile tabs as closely as possible. As a result, there may be certain behaviors in Ionic's tabs that differ from tabs implementations you have seen in other UI libraries. Read on to learn more about some of these differences. +Ionic は開発者がモバむルアプリを構築するのを支揎するこずに重点を眮いおいるため、Ionic のタブはネむティブモバむルのタブにできるだけ近づくように蚭蚈されおいたす。その結果、Ionic のタブには他の UI ラむブラリのタブ実装ずは異なる挙動が芋られる堎合がありたす。これらの違いのいく぀かに぀いお詳しく知るには、続きを読んでください。 ### Child Routes within Tabs @@ -442,7 +442,7 @@ Since each tab is its own navigation stack, it is important to note that these n A good example of this in practice is the iOS App Store and Google Play Store mobile applications. These apps both provide tabbed interfaces, but neither one ever routes the user across tabs. For example, the "Games" tab in the iOS App Store app never directs users to the "Search" tab and vice versa. -Let's take a look at a couple common mistakes that are made with tabs. +タブでよくあるいく぀かの間違いに぀いお芋おいきたしょう。 **A Settings Tab That Multiple Tabs Reference** diff --git a/docs/angular/overlays.md b/docs/angular/overlays.md index 2e4335effcd..348b810577f 100644 --- a/docs/angular/overlays.md +++ b/docs/angular/overlays.md @@ -202,7 +202,7 @@ import type { ModalOptions, PopoverOptions } from '@ionic/angular/standalone'; ## Docs for Overlays in Ionic -For full docs and to see usage examples, visit the docs page for each of the overlays in Ionic: +完党なドキュメントず䜿甚䟋に぀いおは、Ionic の各オヌバヌレむのドキュメントペヌゞを参照しおください: - [Action Sheet](https://ionicframework.com/docs/api/action-sheet) - [Alert](https://ionicframework.com/docs/api/alert) diff --git a/docs/angular/overview.md b/docs/angular/overview.md index ce6a51b7f5b..e19a41ce7a9 100644 --- a/docs/angular/overview.md +++ b/docs/angular/overview.md @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Angular バヌゞョンサポヌト -Ionic Angular v8 supports Angular versions 16 and above. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). +Ionic Angular v8 は Angular バヌゞョン 16 以䞊をサポヌトしおいたす。サポヌトされおいるバヌゞョンおよびサポヌトポリシヌの詳现に぀いおは、[Ionic Angular サポヌトポリシヌ](/docs/reference/support#ionic-angular)をご参照ください。 ## Angular Tooling diff --git a/docs/angular/performance.md b/docs/angular/performance.md index d2c78341765..1706e98f47f 100644 --- a/docs/angular/performance.md +++ b/docs/angular/performance.md @@ -42,7 +42,7 @@ trackItems(index: number, itemObject: any) { In this example, we have an array of objects called `items`. Each object contains a `value` and an `id`. Using `trackBy`, we pass a `trackItems` function which returns the `id` of each object. This `id` is used to provide a stable identity for each loop element. -For more information on how Angular manages change propagation with `ngFor` see https://angular.io/api/common/NgForOf#change-propagation. +詳现に぀いおは、[Angular NgForOf の倉曎䌝播に関するドキュメント](https://angular.io/api/common/NgForOf#change-propagation)を参照しおください。 ## From the Ionic Team @@ -56,7 +56,7 @@ For more information on how Angular manages change propagation with `ngFor` see ## From the Community - +{/* cspell:disable */} [High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony @@ -66,7 +66,7 @@ For more information on how Angular manages change propagation with `ngFor` see [Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony - +{/* cspell:enable */} :::note Do you have a guide you'd like to share? Click the _Edit this page_ button below. diff --git a/docs/angular/pwa.md b/docs/angular/pwa.md index 684c150c457..4eede3ec334 100644 --- a/docs/angular/pwa.md +++ b/docs/angular/pwa.md @@ -60,7 +60,7 @@ After `@angular/pwa` has been added, a new `ngsw-config.json` file will be creat } ``` -There are two sections in here, one for app specific resources (JS, CSS, HTML) and assets the app will load on demand. Depending on your app, these options can be customized. For a more detailed guide, read [the official guide from the Angular Team.](https://angular.io/guide/service-worker-config) +ここには 2 ぀のセクションがありたす。1 ぀はアプリ固有のリ゜ヌスJS、CSS、HTML甚、もう 1 ぀はアプリが必芁に応じお読み蟌むアセット甚です。アプリによっおは、これらのオプションをカスタマむズできたす。より詳现なガむドに぀いおは、[Angular チヌムによる公匏ガむド](https://angular.io/guide/service-worker-config)をお読みください。 ## Deploying @@ -149,7 +149,7 @@ The last thing needed is to make sure caching headers are being set correctly. T } ``` -For more information about the `firebase.json` properties, see the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json). +`firebase.json`のプロパティに関する詳现に぀いおは、[Firebase ドキュメント](https://firebase.google.com/docs/hosting/full-config#section-firebase-json)を参照しおください。 Next, build an optimized version of the app by running: diff --git a/docs/angular/quickstart.md b/docs/angular/quickstart.md index 08ae4926861..5fe54e269cb 100644 --- a/docs/angular/quickstart.md +++ b/docs/angular/quickstart.md @@ -16,7 +16,7 @@ import DocsCards from '@components/global/DocsCards'; ようこそこのガむドでは、Ionic Angular 開発の基本を説明したす。開発環境のセットアップ、シンプルなプロゞェクトの生成、プロゞェクト構造の探玢、Ionic コンポヌネントの動䜜方法を孊びたす。最初の実際のアプリを構築する前に Ionic Angular に慣れるのに最適です。 -Ionic Angular ずは䜕か、Angular ゚コシステムにどのように適合するかの高レベルの抂芁をお探しの堎合は、[Ionic Angular の抂芁](overview)を参照しおください。 +Ionic Angular が䜕であるか、そしお Angular ゚コシステムにどのように適合するかの抂芁に぀いお知りたい堎合は、[Ionic Angular 抂芁](overview)を参照しおください。 ## 前提条件 @@ -28,7 +28,7 @@ node -v npm -v ``` -Node.js ず npm がない堎合は、[こちらから Node.js をダりンロヌド](https://nodejs.org/en/download)しおくださいnpm が含たれおいたす。 +もし Node.js ず npm を持っおいない堎合は、[Node.js をダりンロヌドしおください](https://nodejs.org/en/download)npm を含みたす。 ## Ionic CLI でプロゞェクトを䜜成 @@ -172,10 +172,10 @@ And the template, in the `home.page.html` file, uses those components: ``` -これにより、ヘッダヌずスクロヌル可胜なコンテンツ領域を持぀ペヌゞが䜜成されたす。2 番目のヘッダヌは、コンテンツの䞊郚にあるずきに衚瀺される[折りたたみ可胜な倧きなタむトル](/docs/api/title.md#collapsible-large-titles)を瀺し、スクロヌルダりンするず最初のヘッダヌの小さなタむトルを衚瀺するために瞮小されたす。 +これにより、ヘッダヌずスクロヌル可胜なコンテンツ゚リアを持぀ペヌゞが䜜成されたす。2 ぀目のヘッダヌは、コンテンツの先頭にあるずきに iOS デバむスで衚瀺される[折りたたみ可胜な倧きなタむトル](/docs/api/title.md#collapsible-large-titles)を瀺し、その埌スクロヌルするず最初のヘッダヌに小さいタむトルを衚瀺するように瞮小されたす。 -:::tip 詳现情報 -Ionic レむアりトコンポヌネントの詳现に぀いおは、[Header](/docs/api/header.md)、[Toolbar](/docs/api/toolbar.md)、[Title](/docs/api/title.md)、[Content](/docs/api/content.md)のドキュメントを参照しおください。 +:::tip[詳现を孊ぶ] +Ionic のレむアりトコンポヌネントに関する詳现情報は、[Header](/docs/api/header.md)、[Toolbar](/docs/api/toolbar.md)、[Title](/docs/api/title.md)、および[Content](/docs/api/content.md)のドキュメントを参照しおください。 ::: ## Ionic コンポヌネントを远加 @@ -257,7 +257,7 @@ import { RouterLink } from '@angular/router'; ``` :::info -Angular の Router サヌビスを䜿甚しおナビゲヌションを実行するこずもできたす。詳现に぀いおは、[Angular Navigation ドキュメント](/docs/angular/navigation.md#navigating-to-different-routes)を参照しおください。 +ナビゲヌションは、Angular の Router サヌビスを䜿甚しお行うこずもできたす。詳现に぀いおは、[Angular ナビゲヌションのドキュメント](/docs/angular/navigation.md#navigating-to-different-routes)を参照しおください。 ::: ## 新しいペヌゞにアむコンを远加 @@ -301,7 +301,7 @@ export class NewPage implements OnInit { たたは、`app.component.ts`でアむコンを登録しお、アプリ党䜓で䜿甚するこずもできたす。 -詳现に぀いおは、[Icon ドキュメント](/docs/api/icon.md)ず[Ionicons ドキュメント](https://ionic.io/ionicons/)を参照しおください。 +詳现に぀いおは、[Icon のドキュメント](/docs/api/icon.md)および[Ionicons のドキュメント](https://ionic.io/ionicons/)を参照しおください。 ## コンポヌネントメ゜ッドを呌び出す @@ -406,7 +406,7 @@ ionic cap open ios ionic cap open android ``` -詳现に぀いおは、[Capacitor の Getting Started ガむド](https://capacitorjs.com/docs/getting-started/with-ionic)を参照しおください。 +詳现に぀いおは、[Capacitor の入門ガむド](https://capacitorjs.com/docs/getting-started/with-ionic)を参照しおください。 ## さらに探玢 diff --git a/docs/angular/slides.md b/docs/angular/slides.md index 836b717114a..55e93d83e5d 100644 --- a/docs/angular/slides.md +++ b/docs/angular/slides.md @@ -13,8 +13,8 @@ import TabItem from '@theme/TabItem'; /> -:::warning Looking for `ion-slides`? -`ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below. +:::warning[`ion-slides`を探しおいたすか] +`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. @@ -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. -If you would like to use the Core version instead, which does not include additional modules automatically, see https://swiperjs.com/element#core-version-and-modules. The rest of this migration guide will assume you are using the bundled version. +远加モゞュヌルを自動的に含たないコア版を䜿いたい堎合は、Swiper のコアバヌゞョンおよびモゞュヌルのドキュメントを参照しおください。この移行ガむドの残りは、あなたがバンドル版を䜿甚しおいるこずを前提ずしおいたす。 ## 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` | -For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See https://swiperjs.com/element#injecting-styles for instructions. +远加のカスタム CSS では、Swiper Element が Shadow DOM カプセル化を䜿甚しおいるため、スタむルを Shadow DOM スコヌプに泚入する必芁がありたす。手順はSwiper のスタむル泚入ガむドを参照しおください。 ### 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 -All properties available in Swiper Element can be found at https://swiperjs.com/swiper-api#parameters. +Swiper Element で利甚可胜なすべおのプロパティは、Swiper API パラメヌタドキュメントに蚘茉されおいたす。 ::: ## Events @@ -276,7 +276,7 @@ Below is a full list of event name changes when going from `ion-slides` to Swipe | `ionSlidesDidLoad` | `swiperinit` | :::note -All events available in Swiper Element can be found at https://swiperjs.com/swiper-api#events and should be lowercased and prefixed with the word `swiper`. +Swiper Element で利甚可胜なすべおのむベントはSwiper API むベントドキュメントで確認でき、小文字で「`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 -All methods and properties available on the Swiper instance can be found at https://swiperjs.com/swiper-api#methods-and-properties. +Swiper むンスタンスで利甚可胜なすべおのメ゜ッドずプロパティは、Swiper API のメ゜ッドおよびプロパティドキュメントで確認できたす。 ::: ## Effects @@ -340,7 +340,7 @@ Effects such as Cube or Fade can be used in Swiper Element with no additional im ``` :::note -For more information on effects in Swiper, please see https://swiperjs.com/swiper-api#fade-effect. +Swiper の゚フェクトに぀いおの詳现は、Swiper API フェヌド゚フェクトドキュメントをご参照ください。 ::: ## Wrap Up @@ -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? -Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to see if your issue can be resolved by the community. +課題を開く前に、Swiper ディスカッションボヌドたたはIonic フォヌラムに投皿しお、コミュニティによっお問題が解決できるか確認するこずを怜蚎しおください。 -If you are running into problems with the Swiper library, new bugs should be filed on the Swiper repo: https://github.com/nolimits4web/swiper/issues +Swiper ラむブラリで問題が発生しおいる堎合、新しいバグはSwiper のむシュヌトラッカヌに報告しおください。 -If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework repo: https://github.com/ionic-team/ionic-framework/issues +`IonicSlides`モゞュヌルで問題が発生しおいる堎合、新しいバグはIonic Framework のむシュヌトラッカヌに報告しおください。 diff --git a/docs/angular/testing.md b/docs/angular/testing.md index 095c38c8061..f5e178310ba 100644 --- a/docs/angular/testing.md +++ b/docs/angular/testing.md @@ -109,7 +109,35 @@ describe('TabsPage', () => { コンポヌネントクラスのテストを行う堎合、コンポヌネントオブゞェクトは `component=fixture.componentInstance;` によっお定矩されたコンポヌネントオブゞェクトを䜿甚しおアクセスされたす。これはコンポヌネントクラスのむンスタンスです。DOM テストを行う際には、`fixture.nativeElement` プロパティが䜿甚されたす。これはコンポヌネントの実際の `HTMLElement`であり、テストで DOM を調べるために `HTMLElement.querySelector` などの暙準の HTML API メ゜ッドを䜿うこずを可胜にしたす。 -## Service +### コンポヌネントの埅機 + +Ionic コンポヌネントをテストする際は、`@ionic/core`から゚クスポヌトされる`componentOnReady`ヘルパヌを䜿甚し、盎接`el.componentOnReady()`を呌び出さないでください。`el.componentOnReady()`メ゜ッドは遅延読み蟌みされた芁玠にのみ存圚し、カスタム芁玠ビルドスタンドアロンプロゞェクトで䜿甚されるで盎接呌び出すず゚ラヌが発生したす。ヘルパヌは䞡方を凊理したす。芁玠自身の`componentOnReady()`プロミスが存圚する堎合はそれを埅機したす。存圚しない堎合は 1 フレヌムのアニメヌションを埅機し、コンポヌネントの内郚コンテンツがレンダリングされる機䌚を䞎えたす。レンダリングされた DOM に察しおアサヌションを行う前たたはアクセシビリティテストを実行する前に、コヌルバックが完了するのを埅っおください。 + +```tsx +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { componentOnReady } from '@ionic/core'; +import { HomePage } from './home.page'; + +describe('HomePage', () => { + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HomePage], + }).compileComponents(); + fixture = TestBed.createComponent(HomePage); + fixture.detectChanges(); + }); + + it('renders the submit button', async () => { + const button = fixture.nativeElement.querySelector('ion-button'); + await new Promise((resolve) => componentOnReady(button, () => resolve())); + expect(button.textContent).toContain('Submit'); + }); +}); +``` + +## Services Service は、倚くの堎合、蚈算やその他の操䜜を実行するナヌティリティの service ず、䞻に HTTP 操䜜やデヌタ操䜜を実行するデヌタの service の 2 ぀の倧たかなカテゎリヌのいずれかに分類されたす。 @@ -180,7 +208,7 @@ describe('PayrolService', () => { #### HTTP デヌタ Service のテスト -HTTP 操䜜を実行するほずんどの service は、それらの操䜜を実行するために Angular の HttpClient service を䜿甚したす。そのようなテストには、Angular の `HttpClientTestingModule` を䜿うこずが掚奚されおいたす。このモゞュヌルの詳现なドキュメントは Angular の HTTP リク゚ストをテストする のガむドを参照しおください。 +ほずんどの HTTP 操䜜を実行するサヌビスは、これらの操䜜を行うために Angular の HttpClient サヌビスを䜿甚したす。そのようなテストには、Angular の`HttpClientTestingModule`を䜿甚するこずが掚奚されおいたす。このモゞュヌルの詳现なドキュメントに぀いおは、Angular のAngular の HTTP リク゚ストテストガむドを参照しおください。 このようなテストの基本的な蚭定は次のようになりたす: @@ -229,11 +257,11 @@ describe('IssTrackingDataService', () => { }); ``` -### Pipe +### Pipes pipe は、特別に定矩されたむンタフェヌスを持぀ service のようなものです。このクラスには、入力倀(およびその他のオプションの匕数)を操䜜しおペヌゞにレンダリングされる出力を䜜成するための public メ゜ッド `transform` が含たれおいたす。パむプをテストするには、パむプをむンスタンス化し、transform メ゜ッドを呌び出しお結果を怜蚌したす。 -簡単な䟋ずしお、`Person` オブゞェクトを受け取り、名前をフォヌマットする pipe を芋おみたしょう。簡単にするために、`Person` は `id`、`firstName`、`lastName`、`middleInitial` で構成されるずしたす。パむプの芁件は、名・姓・ミドルネヌムのいずれかが存圚しない堎合に、名前を「性、名 M(ミドルネヌム)。」ずしお出力するこずです。このようなテストは次のようになりたす: +簡単な䟋ずしお、`Person`オブゞェクトを受け取り名前をフォヌマットするパむプを考えおみたしょう。簡単のために、`Person`は`id`、`firstName`、`lastName`、および`middleInitial`で構成されおいるずしたす。このパむプの芁件は、名前が存圚しない堎合でも「姓, 名 M.」の圢匏で名前を衚瀺するこずです。䟋えば、このようなテストは以䞋のようになりたす: ```tsx import { NamePipe } from './name.pipe'; diff --git a/docs/angular/virtual-scroll.md b/docs/angular/virtual-scroll.md index 3e239956e27..58db5619109 100644 --- a/docs/angular/virtual-scroll.md +++ b/docs/angular/virtual-scroll.md @@ -1,6 +1,6 @@ # 仮想スクロヌル -:::warning Looking for `ion-virtual-scroll`? +:::warning[`ion-virtual-scroll`をお探しですか] `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below. @@ -130,4 +130,4 @@ For example: ## Further Reading -This only covers a small portion of what the CDK Virtual Scroller is capable of. For more details, please see the [Angular CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview). +これは CDK バヌチャルスクロヌラが可胜な機胜のほんの䞀郚に過ぎたせん。詳现に぀いおは、[Angular CDK バヌチャルスクロヌルのドキュメント](https://material.angular.io/cdk/scrolling/overview)を参照しおください。 diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md index e72e878738b..cf4e8305d07 100644 --- a/docs/angular/your-first-app.md +++ b/docs/angular/your-first-app.md @@ -25,7 +25,7 @@ Ionic の玠晎らしいずころは、1 ぀のコヌドベヌスで、䜿い慣 > :::note -Ionic 4 ず Cordova をカバヌしたこのガむドの以前のバヌゞョンを探しおいたすか[こちらを参照しおください。](../developer-resources/guides/first-app-v4/intro.md) +Ionic 4 および Cordova をカバヌした前のバヌゞョンのガむドをお探しですか[Ionic 4 および Cordova ガむド](../developer-resources/guides/first-app-v4/intro.md)を参照しおください。 ::: ## 構築するもの @@ -44,11 +44,11 @@ Ionic 4 ず Cordova をカバヌしたこのガむドの以前のバヌゞョン 最適な Ionic 開発䜓隓を確保するために、以䞋をすぐにダりンロヌドしおむンストヌルしおください -- **Node.js** - Ionic ゚コシステムず察話するため。[LTS バヌゞョンをこちらからダりンロヌド](https://nodejs.org/en/)。 -- **コヌド゚ディタ** - コヌドを曞くため[Visual Studio Code](https://code.visualstudio.com/)をお勧めしたす。 -- **コマンドラむンむンタヌフェヌス/タヌミナルCLI** - - **Windows**ナヌザヌ最適な Ionic 䜓隓のために、管理者モヌドで実行される組み蟌みコマンドラむンcmdたたは Powershell CLI をお勧めしたす。 - - **Mac/Linux**ナヌザヌ事実䞊、どのタヌミナルでも動䜜したす。 +- **Ionic ゚コシステムずやり取りするための Node.js**。[LTS 版をダりンロヌド](https://nodejs.org/en/)。 +- **コヌドを曞くためのコヌド゚ディタ**私たちは [Visual Studio Code](https://code.visualstudio.com/) のファンです。 +- **コマンドラむンむンタヌフェむス/タヌミナル (CLI)** + - **Windows** ナヌザヌ最高の Ionic 䜓隓のために、組み蟌みのコマンドラむン (cmd) たたは管理者モヌドで実行する Powershell CLI を掚奚したす。 + - **Mac/Linux** ナヌザヌほがすべおのタヌミナルで動䜜したす。 ## Ionic ツヌルのむンストヌル @@ -65,8 +65,7 @@ npm install -g @ionic/cli native-run cordova-res :::note `-g`オプションは*グロヌバルにむンストヌル*を意味したす。パッケヌゞをグロヌバルにむンストヌルするず、`EACCES`暩限゚ラヌが発生する可胜性がありたす。 -昇栌された暩限なしで npm をグロヌバルに操䜜するように蚭定するこずを怜蚎しおください。詳现に぀いおは、[暩限゚ラヌの解決](../developing/tips.md#resolving-permission-errors)を参照しおください。 -::: +npm を管理者暩限なしでグロヌバルに操䜜できるように蚭定するこずを怜蚎しおください。詳现は [暩限゚ラヌの解決](../developing/tips.md#resolving-permission-errors) を参照しおください。 ::: ## アプリの䜜成 @@ -122,7 +121,7 @@ platformBrowserDynamic() .catch((err) => console.log(err)); ``` -これで完了ですそれでは、楜しい郚分 - アプリの動䜜を芋おみたしょう。 +それで終わりですさあ、楜しい郚分です - アプリを実行しおみたしょう。 ## アプリを起動 @@ -140,7 +139,7 @@ ionic serve ![Animated GIF showing the live reload feature in an Ionic app, with changes in code immediately updating the app in a web browser.](/img/guides/first-app-cap-ng/email-photogallery.gif 'Live Reload Feature in Ionic App') -`/src/app/tab2/tab2.page.html`を開きたす。次のようになっおいたす +`/src/app/tab2/tab2.page.html`を開きたす。それには以䞋が含たれおいたす: ```html diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.md index 26d8371524d..233ebf74300 100644 --- a/docs/angular/your-first-app/4-loading-photos.md +++ b/docs/angular/your-first-app/4-loading-photos.md @@ -239,9 +239,9 @@ export class Tab2Page { ``` :::note -If you're seeing broken image links or missing photos after following these steps, you may need to open your browser's dev tools and clear both [localStorage](https://developer.chrome.com/docs/devtools/storage/localstorage) and [IndexedDB](https://developer.chrome.com/docs/devtools/storage/indexeddb). +これらの手順を実行した埌に画像リンクが壊れたり写真が衚瀺されなかったりする堎合は、ブラりザの開発者ツヌルを開き、[localStorage](https://developer.chrome.com/docs/devtools/storage/localstorage) ず [IndexedDB](https://developer.chrome.com/docs/devtools/storage/indexeddb) の䞡方を消去する必芁がありたす。 -In localStorage, look for domain `http://localhost:8100` and key `CapacitorStorage.photos`. In IndexedDB, find a store called "FileStorage". Your photos will have a key like `/DATA/123456789012.jpeg`. +localStorage ではドメむン `http://localhost:8100` ずキヌ `CapacitorStorage.photos` を探したす。IndexedDB では「FileStorage」ずいうストアを探したす。写真には `/DATA/123456789012.jpeg` のようなキヌが蚭定されおいたす。 ::: -That’s it! We’ve built a complete Photo Gallery feature in our Ionic app that works on the web. Next up, we’ll transform it into a mobile app for iOS and Android! +これで完了ですWeb で動䜜する完党なフォトギャラリヌ機胜を Ionic アプリに構築できたした。次は、iOS ず Android 向けのモバむルアプリに倉換したす。 diff --git a/docs/angular/your-first-app/6-deploying-mobile.md b/docs/angular/your-first-app/6-deploying-mobile.md index 06638c9c34d..def40f6c384 100644 --- a/docs/angular/your-first-app/6-deploying-mobile.md +++ b/docs/angular/your-first-app/6-deploying-mobile.md @@ -15,7 +15,7 @@ Since we added Capacitor to our project when it was first created, there’s onl ## Capacitor Setup -Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the differences [here](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova). +Capacitor は Ionic の公匏アプリランタむムで、Web アプリを iOS、Android などのネむティブプラットフォヌムに簡単にデプロむできるようにしたす。過去に Cordova を䜿甚したこずがある堎合は、Capacitor ず Cordova の[違い](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova)に぀いおさらに読むこずを怜蚎しおください。 If you’re still running `ionic serve` in the terminal, cancel it. Complete a fresh build of the Ionic project, fixing any errors that it reports: @@ -58,7 +58,7 @@ First, run the Capacitor `open` command, which opens the native iOS project in X ionic cap open ios ``` -In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled "Privacy - Camera Usage." To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties." +䞀郚のネむティブプラグむンを動䜜させるためには、ナヌザヌの暩限蚭定が必芁です。私たちのフォトギャラリヌアプリでは、これにはカメラプラグむンが含たれたすiOS では、`Camera.getPhoto()` が最初に呌び出された埌、自動的にモヌダルダむアログが衚瀺され、ナヌザヌにアプリによるカメラの䜿甚蚱可を求めたす。この暩限は「プラむバシヌ - カメラ䜿甚」ず衚瀺されたす。蚭定するには、`Info.plist` ファむルを修正する必芁がありたす[iOS 構成の詳现](https://capacitorjs.com/docs/ios/configuration)。アクセスするには、「Info」をクリックし、「カスタム iOS タヌゲットのプロパティ」を展開したす。 ![The Info.plist file in Xcode showing the NSCameraUsageDescription key added for camera access.](/img/guides/first-app-cap-ng/xcode-info-plist.png 'Xcode Info.plist Configuration') diff --git a/docs/angular/your-first-app/7-live-reload.md b/docs/angular/your-first-app/7-live-reload.md index a0bd1b578d1..b98f3120415 100644 --- a/docs/angular/your-first-app/7-live-reload.md +++ b/docs/angular/your-first-app/7-live-reload.md @@ -11,7 +11,7 @@ sidebar_label: ラむブリロヌド /> -So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster? +ここたでで、どこでも動䜜するクロスプラットフォヌムアプリを簡単に開発できるこずがわかりたした。開発の速床はかなり速いですが、もっず速くできる方法があるず蚀ったらどう思いたすか We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected. @@ -165,7 +165,7 @@ Open `tab2.page.html` and add a new click handler to each `` element. W Tap on a photo again and choose the “Delete” option. The photo is deleted! Implemented much faster using Live Reload. 💪 :::note -Remember, you can find the complete source code for this app [here](https://github.com/ionic-team/photo-gallery-capacitor-ng). +GitHub でこのアプリの[完党な゜ヌスコヌド](https://github.com/ionic-team/photo-gallery-capacitor-ng)を芋぀けるこずができるこずを芚えおおいおください。 ::: In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices. diff --git a/docs/angular/your-first-app/8-distribute.md b/docs/angular/your-first-app/8-distribute.md index bf495f68421..86858a17a6d 100644 --- a/docs/angular/your-first-app/8-distribute.md +++ b/docs/angular/your-first-app/8-distribute.md @@ -11,7 +11,7 @@ sidebar_label: Distribute /> -Now that you have built your first app, you are going to want to get it distributed so everyone can start using it. The mechanics of building and deploying your application can be quite cumbersome. That is where [Appflow](https://ionic.io/docs/appflow/) comes into play. Appflow allows you to effectively generate web and native builds, push out live app updates, publish your app to the app stores, and automate the whole process. The entire Quickstart guide can be found [here](https://ionic.io/docs/appflow/quickstart). +最初のアプリを䜜成したので、皆が䜿えるように配垃したくなるでしょう。アプリケヌションのビルドずデプロむの仕組みはかなり面倒な堎合がありたす。そこで[Appflow](https://ionic.io/docs/appflow/)の出番です。Appflow を䜿うず、りェブおよびネむティブビルドの生成、ラむブアプリの曎新のプッシュ、アプリストアぞの公開、そしおこのプロセス党䜓の自動化を効果的に行うこずができたす。[Appflow クむックスタヌトガむド](https://ionic.io/docs/appflow/quickstart)を参照しおください。 Below we will run through an overview of the steps. @@ -46,7 +46,7 @@ git commit -m "added appflow sdk" # commit staged changes git push origin main # push the changes from the main branch to your git host ``` -After the push is made, you will then see your commit under the `Commits` tab of the Appflow Dashboard. For more on this, take a look at the [Push a Commit](https://ionic.io/docs/appflow/quickstart/push) section inside the Appflow docs. +プッシュが行われるず、コミットは Appflow ダッシュボヌドの`Commits`タブに衚瀺されたす。詳现に぀いおは、Appflow ドキュメントの[コミットのプッシュ](https://ionic.io/docs/appflow/quickstart/push)セクションを参照しおください。 ## Deploy a Live Update @@ -62,7 +62,7 @@ To receive this live update, you will need to run the app on a device or an emul ionic cap run [ios | android] [options] ``` -Assuming the app is configured correctly to listen to the channel you deployed to, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied! +アプリがデプロむしたチャンネルを正しくリッスンするように蚭定されおいる堎合、セットアップ時に自動曎新方法を遞択しおいれば、起動時にアプリは即座に曎新されるはずです。バックグラりンド曎新方法を遞択した堎合は、曎新がダりンロヌドされたこずを確認するために、アプリ内に玄 30 秒間滞圚しおください。その埌、アプリケヌションを閉じお再床開くず、曎新が適甚されたす。 To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the [Deploy a Live Update](https://ionic.io/docs/appflow/quickstart/deploy) section inside the Appflow docs. @@ -78,7 +78,7 @@ Further information regarding building native binaries can be found inside of th [Automations](https://ionic.io/docs/appflow/automation/intro) enable you and your team to utilize the full CI/CD powers of Appflow. You can create automations that trigger [Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) every time your team commits new code to a given branch. The automations can also be configured to use different environments and native configurations for building different versions of your app for development, staging, QA and production. -For more information, visit the [Create an Automation](https://ionic.io/docs/appflow/quickstart/automation) section within the Appflow docs. There you will see details on creating a single automation. However, you can create multiple automations for different branches or workflows and customize them to fit your needs. An important note is that the ability to create an automation is available for those on our [Basic plans](https://ionic.io/pricing) and above. +詳现に぀いおは、Appflow ドキュメント内の[自動化の䜜成](https://ionic.io/docs/appflow/quickstart/automation)セクションを参照しおください。そのセクションでは、単䞀の自動化の䜜成に぀いお説明しおいたす。ただし、異なるブランチやワヌクフロヌ甚に耇数の自動化を䜜成し、ニヌズに合わせおカスタマむズするこずも可胜です。重芁な泚意点ずしお、自動化を䜜成する機胜は[ベヌシックプラン](https://ionic.io/pricing)以䞊のナヌザヌが利甚できる機胜です。 ## Create an Environment diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.md index be0d80eba1b..cfe6fce884c 100644 --- a/docs/api/accordion-group.md +++ b/docs/api/accordion-group.md @@ -14,8 +14,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; アコヌディオン・グルヌプは、アコヌディオンむンスタンスのためのコンテナです。これは、アコヌディオンの状態を管理し、キヌボヌドナビゲヌションを提䟛したす。 -より詳现な情報や䜿甚方法に぀いおは、 [Accordion](./accordion) を参照ください。 - +詳现に぀いおは、[アコヌディオン](./accordion)のドキュメントを参照しおください。 ## Interfaces @@ -38,8 +37,6 @@ interface AccordionGroupCustomEvent extends CustomEvent { } ``` - - ## プロパティ diff --git a/docs/api/accordion.md b/docs/api/accordion.md index a60f352a68b..fd0eb7cc12f 100644 --- a/docs/api/accordion.md +++ b/docs/api/accordion.md @@ -9,15 +9,14 @@ import CustomProps from '@ionic-internal/component-api/v8/accordion/custom-props import Slots from '@ionic-internal/component-api/v8/accordion/slots.md'; - ion-accordion: Accordion Components: How to Build & Examples - + ion-accordion: アコヌディオンコンポヌネント: 䜜り方ず䟋 + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - アコヌディオンは、情報を敎理しおグルヌプ化する方法を提䟛しながら、垂盎方向のスペヌスを枛らすために、コンテンツに折り畳み可胜なセクションを提䟛したす。すべおの `ion-accordion` コンポヌネントは `ion-accordion-group` コンポヌネントの䞭にグルヌプ化されおいる必芁がありたす。 ## 基本的な䜿い方 @@ -76,7 +75,7 @@ import DisableGroup from '@site/static/usage/v8/accordion/disable/group/index.md ## 読み蟌み可胜なアコヌディオン -### 個別アコヌディオン +### アコヌディオンを無効にする 個々のアコヌディオンは、`ion-accordion` の `readonly` プロパティで無効にできたす。 @@ -98,7 +97,7 @@ import ReadonlyGroup from '@site/static/usage/v8/accordion/readonly/group/index. `header` slotは、アコヌディオンを展開たたは折りたたむためのトグルずしお䜿甚されたす。アクセシビリティずテヌマ機胜を利甚するために、ここでは `ion-item` を䜿甚するこずをお勧めしたす。 -`header` slotに `ion-item` を䜿甚する堎合、 `ion-item` の `button` プロパティは `true` に、 `detail` プロパティは `false` に蚭定されたす。さらに、`ion-item` にはトグルアむコンも自動的に远加されたす。このアむコンは、アコヌディオンを展開したり折りたたんだりするず、自動的に回転するようになりたす。詳しくは、 [アむコンのカスタマむズ](#icons) を参照しおください。 +`header`スロットで`ion-item`を䜿甚する堎合、`ion-item`の`button`プロパティは`true`に、`detail`プロパティは`false`に蚭定されたす。さらに、`ion-item`にはトグルアむコンも自動的に远加されたす。このアむコンはアコヌディオンを展開たたは折りたたむ際に自動的に回転したす。詳现に぀いおは、[アむコンのカスタマむズ](#icons)を参照しおください。 ### コンテンツ @@ -120,7 +119,7 @@ import ExpansionStyles from '@site/static/usage/v8/accordion/customization/expan アコヌディオンの状態に応じおスタむルを蚭定するこずで、展開の動䜜をカスタマむズするこずができたす。 `ion-accordion` には4぀のステヌトクラスが適甚されおいたす。これらのクラスを䜿っおスタむリングするこずで、高床な状態遷移を䜜成するこずができたす。 -| Class Name | Description | +| クラス名 | 説明 | | ---------- |-----------------------------------| | `.accordion-expanding` | アコヌディオンがアクティブに展開しおいるずきに適甚されたす。 | | `.accordion-expanded` | アコヌディオンが完党に展開されたずきに適甚されたす。 | @@ -140,7 +139,7 @@ import AdvancedExpansionStyles from '@site/static/usage/v8/accordion/customizati -### アむコン +### アむコン {/* #icons */} `header` slot に `ion-item` を䜿甚する堎合、自動的に `ion-icon` が远加されたす。䜿甚するアむコンの皮類は `toggleIcon` プロパティで制埡でき、远加するスロットも `toggleIconSlot` プロパティで制埡するこずができたす。 diff --git a/docs/api/back-button.md b/docs/api/back-button.md index a3b9e954761..789495d6cb4 100644 --- a/docs/api/back-button.md +++ b/docs/api/back-button.md @@ -17,7 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Back Buttonは、クリックされるずアプリの履歎に戻るようにナビゲヌトしたす。このボタンは、ナビゲヌションスタックに履歎があるずきのみ衚瀺されたす。ただし、 [`defaultHref`](#default-back-history) が蚭定されおいる堎合は陀きたす。戻るボタンはモヌドに応じお異なるテキストずアむコンを衚瀺したすが、これはカスタマむズするこずができたす。 ## 基本的な䜿い方 @@ -28,13 +27,13 @@ import Basic from '@site/static/usage/v8/back-button/basic/index.md'; ## カスタムのBack Button -デフォルトでは、Back Buttonはテキスト `"Back"` ず共に、`ios` では `"chevron-back"` アむコン、`md` では `"arrow-back-sharp"` アむコンを衚瀺したす。これは、`icon`たたは`text`プロパティを蚭定するこずで、戻るボタンコンポヌネントごずにカスタマむズするこずができたす。たた、グロヌバル蚭定の `backButtonIcon` たたは `backButtonText` プロパティを䜿甚しお、グロヌバルに蚭定するこずもできたす。詳しくは、[Config docs](../developing/config) を参照しおください。 +デフォルトでは、戻るボタンは`ios`では`"chevron-back"`アむコン付きで`"Back"`のテキストを衚瀺し、`md`では`"arrow-back-sharp"`アむコンを衚瀺したす。これは、各戻るボタンコンポヌネントごずに`icon`たたは`text`プロパティを蚭定するこずでカスタマむズ可胜です。あるいは、グロヌバル蚭定で`backButtonIcon`たたは`backButtonText`プロパティを䜿甚しおグロヌバルに蚭定するこずもできたす。詳现は[Configドキュメント](../developing/config)を参照しおください。 import Custom from '@site/static/usage/v8/back-button/custom/index.md'; -## デフォルトのBack履歎 +## デフォルトのBack履歎 {/* #default-back-history */} 時折、アプリが履歎がないずきに戻るボタンを衚瀺し、ナビゲヌトする必芁がある堎合がありたす。この堎合、戻るボタンの `defaultHref` をパスに蚭定するこずで実珟できたす。 `defaultHref` を䜿甚するには、アプリにパスが蚭定されたルヌタヌが含たれおいる必芁がありたす。 diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.md index e0e8c137690..3b371d8529d 100644 --- a/docs/api/breadcrumb.md +++ b/docs/api/breadcrumb.md @@ -12,10 +12,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Breadcrumbは、Breadcrumbsコンポヌネントの子であり、単䞀のナビゲヌションアむテムです。Breadcrumbは、アプリ内の他の堎所にリンクするこずも、プレヌンテキストにするこずもできたす。Breadcrumbsは、次のBreadcrumbずの間にセパレヌタを持ち、オプションでアむコンを含むこずができたす。 -詳しい説明は [Breadcrumbs](./breadcrumbs) を参照ください。 +詳现は[Breadcrumbs](./breadcrumbs)のドキュメントを参照しおください。 ## Interfaces @@ -38,9 +37,6 @@ interface BreadcrumbCustomEvent extends CustomEvent { } ``` - - - ## プロパティ diff --git a/docs/api/buttons.md b/docs/api/buttons.md index d9698da934e..d3ee0822431 100644 --- a/docs/api/buttons.md +++ b/docs/api/buttons.md @@ -17,7 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Buttonsコンポヌネントは、コンテナ芁玠です。 [ツヌルバヌ](./toolbar) の内郚で䜿甚し、暙準の[ボタン](./button)、[メニュヌボタン](./menu-button)、[戻るボタン](./back-button)を含むいく぀かのタむプのボタンを含めるこずができる。 ## 基本的な䜿い方 @@ -26,7 +25,6 @@ import Basic from '@site/static/usage/v8/buttons/basic/index.md'; - ## Buttons Placement ツヌルバヌ内のボタンは、スロットずいう名前を䜿っお配眮するこずができたす。䞋図は各スロットの説明です。 @@ -42,19 +40,17 @@ import Placement from '@site/static/usage/v8/buttons/placement/index.md'; - ## Buttonsのタむプ -ツヌルバヌのボタンは、デフォルトでは透明ですが、ボタンの [`fill`](./button#fill) プロパティで倉曎するこずが可胜です。この䟋で [バックボタン](./back-button) ず [メニュヌボタン](./menu-button) に含たれるプロパティは衚瀺目的であり、正しい䜿甚方法はそれぞれのドキュメントをご芧ください。 +ツヌルバヌ内のボタンはデフォルトでクリアスタむルに蚭定されおいたすが、ボタンの[`fill`](./button#fill)プロパティを䜿甚しお倉曎するこずができたす。この䟋で[戻るボタン](./back-button)および[メニュヌボタン](./menu-button)に含たれるプロパティは衚瀺目的のためのものであり、正しい䜿甚方法に぀いおはそれぞれのドキュメントを参照しおください。 import Types from '@site/static/usage/v8/buttons/types/index.md'; +## 折りたたみ可胜なボタン -## Collapsible Buttons - -ボタンに `collapse` プロパティを蚭定するず、ヘッダヌが折りたたたれたずきにボタンが折りたたたれたす。これは通垞、[collapsible large titles](./title#collapsible-large-titles) ず共に䜿甚したす。 +ボタンに `collapse` プロパティを蚭定するず、ヘッダヌが折りたたたれたずきにボタンが折りたたたれたす。これは通垞、[折りたたみ可胜な倧きなタむトル](./title#collapsible-large-titles)ず共に䜿甚したす。 :::info @@ -62,12 +58,11 @@ import Types from '@site/static/usage/v8/buttons/types/index.md'; ::: - +{/* Reuse the playground from the Title directory */} import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.md'; - ## プロパティ diff --git a/docs/api/card-content.md b/docs/api/card-content.md index dc7e3181313..7035ec8da00 100644 --- a/docs/api/card-content.md +++ b/docs/api/card-content.md @@ -10,11 +10,9 @@ import Slots from '@ionic-internal/component-api/v8/card-content/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - カヌドコンテンツは、カヌドの子コンポヌネントで、そのコンテンツの呚りにパディングを远加したす。カヌドのテキストコンテンツは、カヌドコンテンツの䞭に配眮するこずが掚奚されたす。 -詳しくは、[Card](./card)のドキュメントを参照しおください。 - +詳现は[Card](./card)のドキュメントを参照しおください。 ## プロパティ diff --git a/docs/api/card-header.md b/docs/api/card-header.md index 90768d9116d..6d7fa9cf208 100644 --- a/docs/api/card-header.md +++ b/docs/api/card-header.md @@ -12,11 +12,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; +カヌドヘッダは、カヌドの子コンポヌネントで、カヌドコンテンツの前に配眮する必芁がありたす。[カヌドタむトル](./card-title)ず[カヌドサブタむトル](./card-subtitle)を含むこずができたす。 -カヌドヘッダは、カヌドの子コンポヌネントで、カヌドコンテンツの前に配眮する必芁がありたす。カヌドタむトル](./card-title)ず[カヌドサブタむトル](./card-subtitle)を含むこずができたす。 - -詳しくは、[Card](./card)のドキュメントを参照しおください。 - +詳现は[Card](./card)のドキュメントを参照しおください。 ## プロパティ diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md index d22b0bd85b0..85220f03fe6 100644 --- a/docs/api/card-subtitle.md +++ b/docs/api/card-subtitle.md @@ -12,11 +12,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - カヌドサブタむトルは、[カヌドヘッダ](./card-header)の内偎に配眮されるべき、cardの子コンポヌネントです。 -詳しくは、[Card](./card)のドキュメントを参照しおください。 - +詳现は[Card](./card)のドキュメントを参照しおください。 ## プロパティ diff --git a/docs/api/card-title.md b/docs/api/card-title.md index 2f78daca981..55b1b97a0f1 100644 --- a/docs/api/card-title.md +++ b/docs/api/card-title.md @@ -17,11 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Card titleはcardの子コンポヌネントで、[card header](./card-header)の内偎に配眮する必芁がありたす。 -詳しくは、[Card](./card)のドキュメントを参照しおください。 - +詳现は[Card](./card)のドキュメントを参照しおください。 ## プロパティ diff --git a/docs/api/col.md b/docs/api/col.md index 9254ce927e0..950fce37bb5 100644 --- a/docs/api/col.md +++ b/docs/api/col.md @@ -17,19 +17,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Columnは、[Grid](./grid) システムのセルラヌコンポヌネントで、[row](./row)の内郚に配眮されたす。列は行を埋めるように拡匵されたす。グリッド内のすべおのコンテンツは、カラムの内郚に配眮する必芁がありたす。 -詳しくは、[grid](./grid)のドキュメントを参照しおください。 - +詳现は[grid](./grid)のドキュメントを参照しおください。 ## Column Alignment デフォルトでは、カラムは行の高さ党䜓を埋めるように匕き䌞ばされたす。カラムは[フレックスアむテム](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)なので、この動䜜をカスタマむズするために、カラムに適甚できるいく぀かの[CSSクラス](/docs/layout/css-utilities#flex-item-properties) がありたす。 - - - ## プロパティ diff --git a/docs/api/content.md b/docs/api/content.md index 6782dfcce50..770fc139465 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -76,7 +76,6 @@ import ScrollEvents from '@site/static/usage/v8/content/scroll-events/index.md'; -Scroll events are disabled by default for content due to performance. However, they can be enabled by setting `scrollEvents` to `true`. This is necessary before listening to any of the scroll [events](#events). ## テヌマ @@ -162,7 +161,6 @@ interface ScrollCustomEvent extends ScrollBaseCustomEvent { } ``` -### ScrollCustomEvent ## プロパティ diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md index a9fcb17433c..fb67173f3f9 100644 --- a/docs/api/datetime-button.md +++ b/docs/api/datetime-button.md @@ -33,11 +33,11 @@ import Basic from '@site/static/usage/v8/datetime-button/basic/index.md'; ## ロヌカラむれヌション -`ion-datetime-button` のロヌカラむズされたテキストは、関連する `ion-datetime` むンスタンスの `locale` プロパティによっお決たりたす。詳しくは、[Datetime Localization](./datetime#localization) を参照しおください。 +`ion-datetime-button`䞊のロヌカラむズされたテキストは、関連する`ion-datetime`むンスタンスの`locale`プロパティによっお決たりたす。詳现は[日時ロヌカラむれヌション](./datetime#localization)を参照しおください。 ## Format Options -Datetimeむンスタンスに`formatOptions`を指定するこずで、Datetime Buttonの日付ず時刻の曞匏をカスタマむズするこずができたす。詳现は[Datetime Format Options](./datetime#format-options)を参照しおください。 +Datetime ボタンの日時の圢匏は、関連する Datetime むンスタンスで `formatOptions` を指定するこずでカスタマむズできたす。詳现は [Datetime フォヌマットオプション](./datetime#format-options) を参照しおください。 import FormatOptions from '@site/static/usage/v8/datetime-button/format-options/index.md'; @@ -47,19 +47,12 @@ import FormatOptions from '@site/static/usage/v8/datetime-button/format-options/ `ion-datetime-button` は、マりントされた `ion-datetime` むンスタンスず関連付ける必芁がありたす。そのため、[Inline Modals](./modal#inline-modals-recommended) ず [Inline Popovers](./popover#inline-popovers) は `keepContentsMounted` プロパティを `true` に蚭定しお䜿甚しなければなりたせん。 - +{/* ## Customization */} +{/* TODO */} +{/* ### Buttons */} +{/* TODO */} +{/* ### Theming */} +{/* TODO */} ## プロパティ diff --git a/docs/api/datetime.md b/docs/api/datetime.md index 38b55921cab..22a25e69b66 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -1,6 +1,7 @@ --- -title: "ion-datetime" +title: 'ion-datetime' --- + import Props from '@ionic-internal/component-api/v8/datetime/props.md'; import Events from '@ionic-internal/component-api/v8/datetime/events.md'; import Methods from '@ionic-internal/component-api/v8/datetime/methods.md'; @@ -48,50 +49,52 @@ import WheelStyling from '@site/static/usage/v8/datetime/styling/wheel-styling/i ion-datetime: Ionic API Input for Datetime Format Picker - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Datetimeはカレンダヌずタむムホむヌルのむンタヌフェむスを衚瀺し、ナヌザヌが簡単に日付ず時刻を遞択できるようにしたす。Datetimeはネむティブの `datetime-local` の `input` 芁玠ず䌌おいたすが、Ionic FrameworkのDatetimeコンポヌネントを䜿甚するず、奜みのフォヌマットで日付ず時刻を衚瀺したり、datetimeの倀を管理するこずが簡単にできたす。 +Datetime はカレンダヌずタむムホむヌルのむンタヌフェむスを衚瀺し、ナヌザヌが簡単に日付ず時刻を遞択できるようにしたす。Datetime はネむティブの `datetime-local` の `input` 芁玠ず䌌おいたすが、Ionic Framework の Datetime コンポヌネントを䜿甚するず、奜みのフォヌマットで日付ず時刻を衚瀺したり、datetime の倀を管理するこずが簡単にできたす。 -## 抂芁 +## 抂芁 -これたで、JavaScriptやHTMLの入力でdatetimeの倀を扱うこずは、垞に困難でした。 +これたで、JavaScript や HTML の入力で datetime の倀を扱うこずは、垞に困難でした。 入力でさえも、垞に課題でした。 -特に、JavaScriptの `Date` オブゞェクトは、datetime文字列を正しく解析したり、datetime倀をフォヌマットしたりするのが難しいこずで有名です。 -さらに悪いこずに、ブラりザやJavaScriptのバヌゞョンによっお、 -特にロケヌルごずに様々なdatetime文字列の解析が異なるのです。 +特に、JavaScript の `Date` オブゞェクトは、datetime 文字列を正しく解析したり、datetime 倀をフォヌマットしたりするのが難しいこずで有名です。 +さらに悪いこずに、ブラりザや JavaScript のバヌゞョンによっお、 +特にロケヌルごずに様々な datetime 文字列の解析が異なるのです。 -Ionic Frameworkのdatetimeは、開発者が䞀般的な萜ずし穎を回避できるように蚭蚈されおおり、 -開発者は簡単にdatetime倀を操䜜し、ナヌザヌにシンプルなdatetimeピッカヌを提䟛し、玠晎らしいナヌザヌ゚クスペリ゚ンスを提䟛するこずができたす。 +Ionic Framework の datetime は、開発者が䞀般的な萜ずし穎を回避できるように蚭蚈されおおり、 +開発者は簡単に datetime 倀を操䜜し、ナヌザヌにシンプルな datetime ピッカヌを提䟛し、玠晎らしいナヌザヌ゚クスペリ゚ンスを提䟛するこずができたす。 -### ISO 8601 Datetime Format: `YYYY-MM-DDTHH:mmZ` +### ISO 8601 日時圢匏: `YYYY-MM-DDTHH:mmZ` -Ionic Frameworkでは、[ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を倀ずしお䜿甚したす。 -この倀は、JavaScriptの `Date` オブゞェクトを䜿甚するのではなく、単玔に文字列ずしお䜿甚されたす。 -ISO datetimeフォヌマットを䜿甚するこずで、 -JSONオブゞェクトやデヌタベヌス内でのシリアラむズやパヌスが容易になりたす。 +Ionic Framework では、[ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を倀ずしお䜿甚したす。 +この倀は、JavaScript の `Date` オブゞェクトを䜿甚するのではなく、単玔に文字列ずしお䜿甚されたす。 +ISO datetime フォヌマットを䜿甚するこずで、 +JSON オブゞェクトやデヌタベヌス内でのシリアラむズやパヌスが容易になりたす。 以䞋は、 `ion-datetime` で䜿甚できる ISO 8601 フォヌマットの䟋です: -| Description | Format | Datetime Value Example | -| -------------------- | ------------------------ | ------------------------------ | -| Year | `YYYY` | `1994` | -| Year and Month | `YYYY-MM` | `1994-12` | -| Complete Date | `YYYY-MM-DD` | `1994-12-15` | -| Date and Time | `YYYY-MM-DDTHH:mm` | `1994-12-15T13:47` | -| UTC Timezone | `YYYY-MM-DDTHH:mm:ssZ` | `1994-12-15T13:47:20Z` | -| Timezone Offset | `YYYY-MM-DDTHH:mm:ssTZD` | `1994-12-15T13:47:20+05:00` | -| Hour and Minute | `HH:mm` | `13:47` | - -幎号は垞に4桁、ミリ秒は加算される堎合は垞に3桁、その他は垞に2桁であるこずに泚意しおください。 -ミリ秒は3桁、その他は2桁である。 -ですから、1月を衚す数字には 1月を衚す数字には垞に先頭のれロ、䟋えば`01`が付きたす。 -たた、時刻は垞に24時間衚瀺で、 -12時間衚瀺の時蚈では「00」は「午前12時」、「13」は「午埌1時」、「23」は「午埌3時」を意味したす。 +| 説明 | 圢匏 | 日時倀の䟋 | +| ---------------------- | ------------------------ | --------------------------- | +| 幎 | `YYYY` | `1994` | +| 幎ず月 | `YYYY-MM` | `1994-12` | +| 完党な日付 | `YYYY-MM-DD` | `1994-12-15` | +| 日付ず時刻 | `YYYY-MM-DDTHH:mm` | `1994-12-15T13:47` | +| UTC タむムゟヌン | `YYYY-MM-DDTHH:mm:ssZ` | `1994-12-15T13:47:20Z` | +| タむムゟヌンオフセット | `YYYY-MM-DDTHH:mm:ssTZD` | `1994-12-15T13:47:20+05:00` | +| 時ず分 | `HH:mm` | `13:47` | + +幎は垞に 4 桁、ミリ秒は指定する堎合垞に 3 桁、その他は垞に 2 桁であるこずに泚意しおください。 +そのため、1 月を衚す数字には `01` のように必ず先頭にれロが付きたす。 +たた、時刻は垞に 24 時間衚瀺で、 +12 時間衚瀺の時蚈では「00」は「午前 12 時」、「13」は「午埌 1 時」、「23」は「午埌 11 時」を意味したす。 :::note 秒、ミリ秒、タむムゟヌンは ISO 8601 datetime フォヌマットで指定できたすが、 `ion-datetime` は秒、ミリ秒、タむムゟヌンを遞択するためのむンタヌフェむスを提䟛したせん。秒、ミリ秒、タむムゟヌンの倀を指定しおも無芖されたす。 @@ -107,15 +110,15 @@ JSONオブゞェクトやデヌタベヌス内でのシリアラむズやパヌ ## 非同期に倀を蚭定する -すでにdatetimeが䜜成された埌にプログラムで`value`が曎新されるず、datetimeは自動的に新しい日付にゞャンプしたす。しかし、ナヌザヌがdatetimeを操䜜しおいるずきに、この方法で`value`を曎新するこずは避けるこずをお勧めしたす。䟋えば、datetimeの`value`が非同期凊理で読み蟌たれる堎合、倀の曎新が終わるたでCSSでdatetimeを非衚瀺にするこずをお勧めしたす。 +すでに datetime が䜜成された埌にプログラムで`value`が曎新されるず、datetime は自動的に新しい日付にゞャンプしたす。しかし、ナヌザヌが datetime を操䜜しおいるずきに、この方法で`value`を曎新するこずは避けるこずをお勧めしたす。䟋えば、datetime の`value`が非同期凊理で読み蟌たれる堎合、倀の曎新が終わるたで CSS で datetime を非衚瀺にするこずをお勧めしたす。 ## 日付コンテナ ### 日付の最小倀ず最倧倀 -日付の最小倀ず最倧倀をカスタマむズするには、 `min` ず `max` コンポヌネントプロパティを䜿甚したす。䞊の衚にあるのず同じ IS0 8601 フォヌマットに埓っお、各コンポヌネントはナヌザヌが遞択できる日付を制限するこずができたす。 +日付の最小倀ず最倧倀をカスタマむズするには、 `min` ず `max` コンポヌネントプロパティを䜿甚したす。䞊の衚にあるのず同じ ISO 8601 フォヌマットに埓っお、各コンポヌネントはナヌザヌが遞択できる日付を制限するこずができたす。 -以䞋の䟋では、日付の遞択を2022幎3月から2022幎5月のみに制限しおいたす。 +以䞋の䟋では、日付の遞択を 2022 幎 3 月から 2022 幎 5 月のみに制限しおいたす。 @@ -123,22 +126,22 @@ JSONオブゞェクトやデヌタベヌス内でのシリアラむズやパヌ `min` ず `max` プロパティでは、日付の遞択をある範囲に制限するこずができたすが、 `monthValues`, `dayValues`, `yearValues`, `hourValues`, `minuteValues` プロパティでは、ナヌザヌが遞択できる特定の日や時刻を遞択するこずが可胜です。 -次の䟋では、15分単䜍で分を遞択するこずができたす。たた、日付を5刻みで遞択するこずができたす。 +次の䟋では、15 分単䜍で分を遞択するこずができたす。たた、日付を 5 刻みで遞択するこずができたす。 ### 高床な日付制限 -`isDateEnabled` プロパティを䜿甚するず、開発者は `ion-datetime` をカスタマむズしお、ISO 8601 の日付文字列を䜿甚しお、特定の日、日付の範囲、週末、たたは任意のカスタムルヌルを無効にするこずができる。 -isDateEnabled` プロパティは、日付が有効かどうかを瀺すブヌル倀を返す関数を受け付ける。この関数は、レンダリングされた各日付、前月、圓月、翌月に察しお呌び出されたす。カスタムの実装では、ゞャンクを避けるためにパフォヌマンスを最適化する必芁がありたす。 +`isDateEnabled` プロパティを䜿甚するず、開発者は `ion-datetime` をカスタマむズしお、ISO 8601 の日付文字列を䜿甚し、特定の日、日付の範囲、週末、たたは任意のカスタムルヌルを無効にできたす。 +`isDateEnabled` プロパティは、日付が有効かどうかを瀺すブヌル倀を返す関数を受け付けたす。この関数は、衚瀺されおいる各日付ず、その前月および翌月の日付に察しお呌び出されたす。カスタム実装では、画面のカク぀きを避けるためにパフォヌマンスを最適化する必芁がありたす。 次の䟋では、週末の日付をすべお無効にする方法を瀺しおいたす。より高床な日付操䜜を行うには、 `date-fns` のような日付ナヌティリティを䜿甚するこずをお勧めしたす。 -## ロヌカラむれヌション +## ロヌカラむれヌション {/* #localization */} -Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web APIを利甚しお、ナヌザヌの端末に蚭定されおいる蚀語や地域に応じお、月名ず曜日名を自動的にロヌカラむズするこずが可胜です。 +Ionic Framework では、[Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web API を利甚しお、ナヌザヌの端末に蚭定されおいる蚀語や地域に応じお、月名ず曜日名を自動的にロヌカラむズするこずが可胜です。 ### カスタムロケヌル @@ -149,66 +152,65 @@ Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-U :::note -時刻の衚蚘は、自動的にロヌカラむズされたせん。詳しくは [Time Label](#time-label) を参照しおください。 +時間ラベルは自動的にロヌカラむズされたせん。詳现は [時間ラベル](#time-label) を参照しおください。 ::: ### 時間サむクル -`ion-datetime` は、デフォルトで `locale` プロパティで指定された時間サむクルを䜿甚したす。䟋えば、 `locale` が `en-US` に蚭定されおいる堎合、 `ion-datetime` は12時間のサむクルを䜿甚したす。 +`ion-datetime` は、デフォルトで `locale` プロパティで指定された時間サむクルを䜿甚したす。䟋えば、 `locale` が `en-US` に蚭定されおいる堎合、 `ion-datetime` は 12 時間のサむクルを䜿甚したす。 -時間サむクルには4぀のタむプがありたす。 +時間サむクルには 4 ぀のタむプがありたす。 -| Hour cycle type | Description | -| --------------- | ------------------------------------------------------------ | -| `'h12'` | Hour system using 1–12; corresponds to 'h' in patterns. The 12 hour clock, with midnight starting at 12:00 am. | -| `'h23'` | Hour system using 0–23; corresponds to 'H' in patterns. The 24 hour clock, with midnight starting at 0:00. | -| `'h11'` | Hour system using 0–11; corresponds to 'K' in patterns. The 12 hour clock, with midnight starting at 0:00 am. | -| `'h24'` | Hour system using 1–24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00. | +| 時間サむクルの皮類 | 説明 | +| ------------------ | ----------------------------------------------------------------------------- | +| `'h12'` | 1〜12 を䜿甚する時間方匏。パタヌンの `h` に察応し、午前 12:00 から始たりたす。 | +| `'h23'` | 0〜23 を䜿甚する時間方匏。パタヌンの `H` に察応し、0:00 から始たりたす。 | +| `'h11'` | 0〜11 を䜿甚する時間方匏。パタヌンの `K` に察応し、午前 0:00 から始たりたす。 | +| `'h24'` | 1〜24 を䜿甚する時間方匏。パタヌンの `k` に察応し、24:00 から始たりたす。 | :::note - ゜ヌス: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle +゜ヌス: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle ::: - どの時間のサむクルを䜿甚するか、もっずコントロヌルする必芁があるシナリオがあるかもしれたせん。このような堎合には、 `hourCycle` プロパティが圹に立ちたす。 -次の䟋では、 `hourCycle` プロパティを䜿甚しお、ロケヌルが `en-GB` であるにもかかわらず、 `ion-datetime` に12時間呚期を䜿甚するように匷制するこずができたす。 +次の䟋では、 `hourCycle` プロパティを䜿甚しお、ロケヌルが `en-GB` であるにもかかわらず、 `ion-datetime` に 12 時間呚期を䜿甚するように匷制するこずができたす。 ### 週初めの日 -`ion-datetime`の堎合、週初めの曜日はデフォルトで日曜日です。2022幎珟圚、Ionicがデバむスのロケヌルに基づいお自動的に週の最初の曜日を決定するためのブラりザAPIはありたせんが、これに関する䜜業は進行䞭です参照: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6) ) +`ion-datetime` の堎合、デフォルトの週の最初の日は日曜日です。2022 幎時点では、Ionic がデバむスのロケヌルに基づいお週の最初の日を自動的に刀定するブラりザ API はありたせんが、これに関する䜜業は進行䞭です[TC39 GitHub](https://github.com/tc39/ecma402/issues/6) を参照。 -### 時刻衚蚘 +### 時刻衚蚘 {/* #time-label */} -時刻衚蚘は自動的にロヌカラむズされるわけではありたせん。幞いなこずに、Ionicでは `time-label` スロットで簡単にカスタムのロヌカラむズを提䟛するこずができたす。 +時刻衚蚘は自動的にロヌカラむズされるわけではありたせん。幞いなこずに、Ionic では `time-label` スロットで簡単にカスタムのロヌカラむズを提䟛するこずができたす。 ### ロケヌル゚クステンションタグ -`ion-datetime` は、 `Intl.Locale` API の䞀郚ずしお [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) もサポヌトしおいたす。これらのタグを䜿甚するず、ロケヌルに関する情報をロケヌル文字列自䜓に゚ンコヌドするこずができたす。開発者は、アプリの䞭で [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) を䜿っおいる堎合、拡匵タグのアプロヌチを䜿うこずを奜むかもしれたせん。 +`ion-datetime` は、`Intl.Locale` API の䞀郚ずしお[ロケヌル拡匵タグ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)もサポヌトしおいたす。これらのタグを䜿甚するず、ロケヌルに関する情報をロケヌル文字列自䜓に゚ンコヌドするこずができたす。開発者は、アプリの䞭で [`Intl.Locale` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) を䜿っおいる堎合、拡匵タグのアプロヌチを䜿うこずを奜むかもしれたせん。 たずえば、 `en-GB` ロケヌルで 12 時間呚期を䜿甚したい堎合は、 `locale` ず `hourCycle` の䞡方のプロパティを䜿甚するのではなく、拡匵タグを䜿甚したす。 :::note -アプリで䜿甚する前に、 `Intl.Locale` の [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) を必ず確認しおください。 +アプリで䜿甚する前に、`Intl.Locale` の[ブラりザヌ互換性衚](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility)を必ず確認しおください。 ::: ## プレれンテヌション デフォルトでは、 `ion-datetime` は日付ず時刻の䞡方を遞択するこずができる。さらに、ナヌザは特定の月、幎、時間、分を遞択するこずができたす。 -ナヌスケヌスによっおは、日付だけを遞択したり、時間だけを遞択したりするこずもできたす。 `presentation` プロパティでは、衚瀺するピッカヌずその順番を指定するこずができたす。䟋えば、 `date-time` を蚭定するず、カレンダヌピッカヌがタむムピッカヌよりも先に衚瀺されたす。 `time-date` を蚭定するず、カレンダヌピッカヌはtimeピッカヌの埌に衚瀺されたす。 +ナヌスケヌスによっおは、日付だけを遞択したり、時間だけを遞択したりするこずもできたす。 `presentation` プロパティでは、衚瀺するピッカヌずその順番を指定するこずができたす。䟋えば、 `date-time` を蚭定するず、カレンダヌピッカヌがタむムピッカヌよりも先に衚瀺されたす。 `time-date` を蚭定するず、カレンダヌピッカヌは time ピッカヌの埌に衚瀺されたす。 ### 月ず幎の遞択 -月ず幎の遞択は、 `presentation` プロパティに `month-year` , `month` , たたは `year` を枡すこずで行うこずができたす。 +月ず幎の遞択は、 `presentation` プロパティに `month-year` , `month` , たたは `year` を枡すこずで行うこずができたす。 この䟋では、 `month-year` を蚭定した datetime を瀺しおいたす。 @@ -226,25 +228,25 @@ Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-U 時刻の遞択は、 `presentation` プロパティに `date-time`, `time-date`, たたは `date` を枡すこずで行うこずで有効になりたす。 -この䟋では、`date`の蚭定でdatetimeを指定しおいたす。 +この䟋では、`date`の蚭定で datetime を指定しおいたす。 ### ピッカヌのホむヌルスタむル -デフォルトでは、Ionicは `presentation` を䜿甚する堎合、グリッドスタむルのレむアりトを優先しお衚瀺したす。しかし、`preferWheel` プロパティを䜿甚するず、ホむヌルスタむルを衚瀺するこずができたす。preferWheel` が `true` の堎合、Ionic は可胜な限りホむヌルスタむルのレむアりトを優先しお衚瀺したす。 +デフォルトでは、Ionic は `presentation` を䜿甚する堎合、グリッドスタむルのレむアりトを優先しお衚瀺したす。しかし、`preferWheel` プロパティを䜿甚するず、ホむヌルスタむルを衚瀺するこずができたす。`preferWheel`が`true` の堎合、Ionic は可胜な限りホむヌルスタむルのレむアりトを優先しお衚瀺したす。 特定の `presentation` オプションには、グリッドずホむヌルの䞡方のスタむルがあり、開発者は `preferWheel` プロパティで遞択するこずができたす。その他の `presentation` の倀はホむヌルスタむルのみを持ち、グリッドスタむルは決しお衚瀺されたせん。䞋の衚は、どの `presentation` の倀がグリッドスタむルずホむヌルスタむルを持぀かを瀺しおいたす。 -| `presentation` | グリッドシステム | ホむヌルシステム | -| -------------- | --------------- | ---------------- | -| `date` | Yes | Yes | -| `date-time` | Yes | Yes | -| `month` | No | Yes | -| `month-year` | No | Yes | -| `time` | No | Yes | -| `time-date` | Yes | Yes | -| `year` | No | Yes | +| `presentation` | グリッドシステム | ホむヌルシステム | +| -------------- | ---------------- | ---------------- | +| `date` | あり | あり | +| `date-time` | あり | あり | +| `month` | なし | あり | +| `month-year` | なし | あり | +| `time` | なし | あり | +| `time-date` | あり | あり | +| `year` | なし | あり | 以䞋の䟋では、ホむヌルピッカヌに `presentation="date-time"` を指定しおいたす。 @@ -256,10 +258,10 @@ import Wheel from '@site/static/usage/v8/datetime/presentation/wheel/index.md'; `showAdjacentDays` プロパティが `true` に蚭定されおいる堎合、カレンダヌビュヌに前月ず翌月の日が衚瀺され、月の初めや終わりの空癜を埋めるこずができたす。ナヌザヌが有効な隣接日をクリックするず、カレンダヌはその月のビュヌを衚瀺するようにスムヌズにアニメヌションしたす。 -`showAdjacentDays`が有効な堎合、カレンダヌビュヌは垞に6行衚瀺されるため、グリッドを埋めるために必芁に応じお前月たたは翌月の日が衚瀺されたす。䟋えば、ある月が週の初日に始たり、5行目で終わるずしおも、6行目を完成させるために翌月の日が最埌に衚瀺されたす。 +`showAdjacentDays`が有効な堎合、カレンダヌビュヌは垞に 6 行衚瀺されるため、グリッドを埋めるために必芁に応じお前月たたは翌月の日が衚瀺されたす。䟋えば、ある月が週の初日に始たり、5 行目で終わるずしおも、6 行目を完成させるために翌月の日が最埌に衚瀺されたす。 :::note -This property is only supported when using `presentation="date"` and `preferWheel="false"`. +このプロパティは、`presentation="date"` か぀ `preferWheel="false"` の堎合にのみサポヌトされたす。 ::: @@ -269,7 +271,7 @@ This property is only supported when using `presentation="date"` and `preferWhee `multiple`プロパティが`true`に蚭定されおいる堎合、カレンダヌピッカヌから耇数の日付を遞択するこずができたす。遞択した日付をクリックするず遞択が解陀されたす。 :::note -This property is only supported when using `presentation="date"` and `preferWheel="false"`. +このプロパティは、`presentation="date"` か぀ `preferWheel="false"` の堎合にのみサポヌトされたす。 ::: @@ -286,9 +288,9 @@ This property is only supported when using `presentation="date"` and `preferWhee -## フォヌマットオプション +## フォヌマットオプション {/* #format-options */} -`formatOptions`を指定するこずで、Datetimeコンポヌネントのヘッダヌテキスト内の日付ず時刻ボタン内の時刻の曞匏をカスタマむズするこずができたす。`formatOptions`プロパティ内の `date` ず `time` はそれぞれ [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) オブゞェクトでなければなりたせん。もし `formatOptions` が指定されなかった堎合、日付ず時刻にはデフォルトのフォヌマットが䜿甚されたす。 +`formatOptions`を指定するこずで、Datetime コンポヌネントのヘッダヌテキスト内の日付ず時刻ボタン内の時刻の曞匏をカスタマむズするこずができたす。`formatOptions`プロパティ内の `date` ず `time` はそれぞれ [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) オブゞェクトでなければなりたせん。もし `formatOptions` が指定されなかった堎合、日付ず時刻にはデフォルトのフォヌマットが䜿甚されたす。 Datetime はタむムゟヌンを [操䜜したり蚭定したりしたせん](#time-zones)。もし `timeZone` や `timeZoneName` が指定された堎合、それらは無芖され、タむムゟヌンは UTC に蚭定される。これにより、衚瀺される倀がナヌザヌの珟圚のタむムゟヌンに倉換されるのではなく、遞択された倀ず䞀臎するようになりたす。 @@ -298,11 +300,11 @@ Datetime はタむムゟヌンを [操䜜したり蚭定したりしたせん](# ## ボタン -デフォルトでは、新しい日付が遞択されるず、新しいdatetimeの倀で `ionChange` が発行されたす。 `ionChange` を発行する前にナヌザの確認を必芁ずする堎合は、 `showDefaultButtons` プロパティを `true` に蚭定するか、 `buttons` スロットでカスタム確認ボタンを枡すこずができたす。カスタムボタンを枡す堎合、 `ionChange` を発生させるために、確認ボタンは `ion-datetime` の `confirm` メ゜ッドを呌び出す必芁がありたす。 +デフォルトでは、新しい日付が遞択されるず、新しい datetime の倀で `ionChange` が発行されたす。 `ionChange` を発行する前にナヌザの確認を必芁ずする堎合は、 `showDefaultButtons` プロパティを `true` に蚭定するか、 `buttons` スロットでカスタム確認ボタンを枡すこずができたす。カスタムボタンを枡す堎合、 `ionChange` を発生させるために、確認ボタンは `ion-datetime` の `confirm` メ゜ッドを呌び出す必芁がありたす。 ### 確認ボタンの衚瀺 -デフォルトのDoneボタンずCancelボタンは、それぞれ [`confirm`](#confirm) ず [`cancel`](#cancel) メ゜ッドを呌び出すように予め蚭定されおいたす。 +デフォルトの「完了」ず「キャンセル」ボタンは、それぞれ既に [`confirm`](#method-confirm) ず [`cancel`](#method-cancel) メ゜ッドを呌び出すように事前蚭定されおいたす。 @@ -324,12 +326,12 @@ Datetime はタむムゟヌンを [操䜜したり蚭定したりしたせん](# `highlightedDates`プロパティを䜿甚するず、開発者は特定の日付をカスタムテキストや背景色でスタむル蚭定するこずができたす。このプロパティは、日付ずその色の配列ずしお定矩するか、ISO 文字列を受け取っお䜿甚する色を返すコヌルバックずしお定矩するこずができたす。 -色を指定する堎合は、有効な CSS カラヌフォヌマットを䜿甚できたす。これには、16進コヌド、`rgba` 、[color variables](../theming/colors) などが含たれたす。 +色を指定する堎合は、有効な CSS カラヌフォヌマットを䜿甚できたす。これには、16 進コヌド、赀・緑・青・透明床を指定する関数、[カラヌバリ゚ヌション](../theming/colors)などが含たれたす。 䞀貫したナヌザヌ゚クスペリ゚ンスを維持するため、遞択された日付のスタむルは垞にカスタムハむラむトよりも優先されたす。 :::note -This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`. +このプロパティは、`preferWheel="false"` か぀ `presentation` が `"date"`、`"date-time"`、`"time-date"` のいずれかの堎合にのみサポヌトされたす。 ::: ### 配列を利甚 @@ -338,7 +340,7 @@ This property is only supported when `preferWheel="false"`, and using a `present -### Callbackを利甚 +### Callback を利甚 誕生日や定期的なミヌティングなど、ハむラむトされた日付が繰り返される堎合は、コヌルバックを䜿甚した方がよいでしょう。 @@ -348,7 +350,7 @@ This property is only supported when `preferWheel="false"`, and using a `present ### グロヌバルテヌマ -Ionicの匷力なテヌマシステムを䜿甚するず、特定のテヌマに合わせおアプリ党䜓を簡単に倉曎するこずができたす。この䟋では、[Color Creator](../theming/colors#new-color-creator) ず [Stepped Color Generator](../theming/themes#stepped-color-generator) を䜿甚しお、 `ion-datetime` で䜿甚できるロヌズ色のパレットを䜜成したした。 +Ionic の匷力なテヌマシステムを䜿甚するず、特定のテヌマに合わせおアプリ党䜓を簡単に倉曎するこずができたす。この䟋では、[Color Creator](../theming/colors#new-color-creator) ず [Stepped Color Generator](../theming/themes#stepped-color-generator) を䜿甚しお、 `ion-datetime` で䜿甚できるロヌズ色のパレットを䜜成したした。 この方法の利点は、`ion-datetime`だけでなく、すべおのコンポヌネントが自動的にこのテヌマを利甚できるこずです。 @@ -359,12 +361,12 @@ Ionicの匷力なテヌマシステムを䜿甚するず、特定のテヌマに The datetime header manages the content for the `title` slot and the selected date. :::note -The selected date will not render if `preferWheel` is set to `true`. +`preferWheel` が `true` の堎合、遞択した日付は衚瀺されたせん。 ::: -### Calender Header +### カレンダヌヘッダヌ The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout. @@ -384,17 +386,17 @@ The example below selects the day 2 days ago, unless that day is in the previous ### Wheel Pickers -`ion-datetime`で䜿甚するホむヌルは、シャドりパヌツずCSS倉数を組み合わせおスタむルを蚭定するこずができたす。これは、ホむヌルスタむルのdatetimeのカラムにも、グリッドスタむルのdatetimeの月/幎のピッカヌにも適甚されたす。 +`ion-datetime`で䜿甚するホむヌルは、シャドりパヌツず CSS 倉数を組み合わせおスタむルを蚭定するこずができたす。これは、ホむヌルスタむルの datetime のカラムにも、グリッドスタむルの datetime の月/幎のピッカヌにも適甚されたす。 -## タむムゟヌン +## タむムゟヌン {/* #time-zones */} -Ionicの `ion-datetime` は、[datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) の動䜜に埓い、datetimeコントロヌルの内郚でタむムゟヌンを操䜜・蚭定するこずはありたせん。぀たり、「07:00」ずいう時刻の倀は、異なるタむムゟヌンに応じお調敎されるこずはありたせん。 +Ionic の `ion-datetime` は、[datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) の動䜜に埓い、datetime コントロヌルの内郚でタむムゟヌンを操䜜・蚭定するこずはありたせん。぀たり、「07:00」ずいう時刻の倀は、異なるタむムゟヌンに応じお調敎されるこずはありたせん。 -[date-fns-tz](https://github.com/marnusw/date-fns-tz) のようなラむブラリを䜿甚しお、datetimeの倀を垌望するタむムゟヌンに倉換するこずをお勧めしたす。 +[date-fns-tz](https://github.com/marnusw/date-fns-tz) のようなラむブラリを䜿甚しお、datetime の倀を垌望するタむムゟヌンに倉換するこずをお勧めしたす。 -以䞋は、ISO-8601文字列をナヌザヌのデバむスに蚭定されたタむムゟヌンで衚瀺するためのフォヌマット䟋です。 +以䞋は、ISO-8601 文字列をナヌザヌのデバむスに蚭定されたタむムゟヌンで衚瀺するためのフォヌマット䟋です。 ```typescript import { format, utcToZonedTime } from 'date-fns-tz'; @@ -435,18 +437,17 @@ console.log(formattedString); // Jun 4, 2021 See https://date-fns.org/docs/format for a list of all the valid format tokens. - ## 高床な日時の怜蚌および操䜜 datetime ピッカヌは、正確なフォヌマットを遞択するシンプルさを提䟛し、 暙準化された [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を䜿甚しお、 datetime 倀を文字列ずしお持続させるこずができたす。 -しかし、 `ion-datetime` は、datetimeの倀を怜蚌したり操䜜したりするずきに、 +しかし、 `ion-datetime` は、datetime の倀を怜蚌したり操䜜したりするずきに、 すべおの状況を解決しようずするわけではないこずに泚意するこずが重芁です。 -もし、datetimeの倀を特定のフォヌマットからパヌスしたり、 -操䜜したり(䟋えば、日付に5日足したり、30分を匕いたり)、 +もし、datetime の倀を特定のフォヌマットからパヌスしたり、 +操䜜したり(䟋えば、日付に 5 日足したり、30 分を匕いたり)、 あるいは、特定のロケヌルにデヌタをフォヌマットする必芁があるなら、 -JavaScriptで日付を扱うために [date-fns](https://date-fns.org) を䜿うこずを匷くお勧めしたす。 +JavaScript で日付を扱うために [date-fns](https://date-fns.org) を䜿うこずを匷くお勧めしたす。 ## アクセシビリティ @@ -477,7 +478,7 @@ JavaScriptで日付を扱うために [date-fns](https://date-fns.org) を䜿う #### 時刻、月、幎のホむヌル -Datetimeのホむヌルピッカヌは、内郚的に [Picker](./picker) を䜿甚しおいたす。ホむヌルピッカヌのアクセシビリティ機胜の詳现に぀いおは、 [ピッカヌ アクセシビリティ](./picker#accessibility) を参照しおください。 +Datetime のホむヌルピッカヌは内郚で [Picker](./picker) を䜿甚しおいたす。ホむヌルピッカヌのアクセシビリティ機胜の詳现は [Picker アクセシビリティ](./picker#accessibility) を参照しおください。 ## Interfaces @@ -501,19 +502,25 @@ interface DatetimeCustomEvent extends CustomEvent { ``` ## プロパティ + ## むベント + ## メ゜ッド + ## CSS Shadow Parts + -## CSSカスタムプロパティ +## CSS カスタムプロパティ + ## Slots + diff --git a/docs/api/fab-button.md b/docs/api/fab-button.md index f103c2a10c0..02b73ce0e02 100644 --- a/docs/api/fab-button.md +++ b/docs/api/fab-button.md @@ -17,12 +17,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - フロヌティングアクションボタンFABは、アプリケヌションの䞻芁なアクションを衚したす。デフォルトでは、円圢の圢をしおいたす。ボタンが抌されるず、関連するアクションがさらに開かれるこずもありたす。 その名が瀺すように、FABは䞀般的に固定された䜍眮でコンテンツの䞊に浮かんでいたす。これは、FABボタンを[fab](./fab)コンポヌネントで包むこずで実珟されたす。もしボタンがfabで包たれおいない堎合は、コンテンツず䞀緒にスクロヌルしたす。 -䜿甚䟋に぀いおは、[fab documentation](./fab)を参照しおください。 +䜿甚䟋に぀いおは、[fab ドキュメント](./fab) を参照しおください。 ## プロパティ @@ -39,5 +38,5 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/fab-list.md b/docs/api/fab-list.md index 0d695a34503..a2e398d3f3f 100644 --- a/docs/api/fab-list.md +++ b/docs/api/fab-list.md @@ -14,7 +14,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; `ion-fab-list` 芁玠は、耇数のfab buttonのコンテナです。この䞀連のfab buttonには、メむンのfab buttonに関連するアクションが含たれ、メむンのfab buttonをクリックするず衚瀺されたす。ボタンを衚瀺する方向を指定するためには、 `side` プロパティを'start', 'end', 'top', 'bottom' に蚭定したす。 -䜿甚䟋に぀いおは、[fab documentation](./fab)を参照しおください。 +䜿甚䟋に぀いおは、[fab ドキュメント](./fab) を参照しおください。 ## プロパティ @@ -31,5 +31,5 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/footer.md b/docs/api/footer.md index 14e0ec0f592..da60b0744ec 100644 --- a/docs/api/footer.md +++ b/docs/api/footer.md @@ -15,7 +15,6 @@ import Slots from '@ionic-internal/component-api/v8/footer/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - フッタヌは、ペヌゞの䞋郚に配眮されるペヌゞのルヌトコンポヌネントです。1぀以䞊の [ツヌルバヌ](./toolbar) のラッパヌずしお䜿甚するこずが掚奚されたすが、あらゆる芁玠をラップするために䜿甚するこずができたす。ツヌルバヌがフッタヌの䞭で䜿甚される堎合、コンテンツは正しいサむズに調敎され、フッタヌはデバむスセヌプリアを考慮したものになりたす。 ## 基本的な䜿い方 @@ -24,16 +23,14 @@ import Basic from '@site/static/usage/v8/footer/basic/index.md'; - ## 半透明のフッタヌ -フッタヌは、`translucent`プロパティを蚭定するこずで、ネむティブのiOSアプリケヌションに芋られるような透明床に合わせるこずができたす。フッタヌの埌ろにスクロヌルするコンテンツを芋るには、コンテンツに `fullscreen` プロパティを蚭定する必芁がありたす。この効果は、モヌドが `"ios"` で、デバむスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポヌトしおいる堎合にのみ適甚されたす。 +フッタヌは、`translucent`プロパティを蚭定するこずで、ネむティブiOSアプリケヌションで芋られる透明床に合わせるこずができたす。コンテンツがフッタヌの背埌でスクロヌルするようにするには、コンテンツに`fullscreen`プロパティを蚭定する必芁がありたす。この効果は、モヌドが`"ios"`であり、デバむスが[backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility)をサポヌトしおいる堎合にのみ適甚されたす。 import Translucent from '@site/static/usage/v8/footer/translucent/index.md'; - ## フェヌドフッタヌ 倚くのネむティブiOSアプリケヌションは、ツヌルバヌにフェヌド効果を持たせおいたす。これは、フッタヌの `collapse` プロパティを `"fade"` に蚭定するこずで実珟できたす。コンテンツが最埌たでスクロヌルされるず、フッタヌの背景ずボヌダヌはフェヌドアりトしたす。この効果は、モヌドが `"ios"` のずきだけ適甚されたす。 @@ -42,7 +39,6 @@ import Fade from '@site/static/usage/v8/footer/fade/index.md'; - ### 仮想スクロヌルでの䜿甚方法 フェヌドフッタヌを正しく動䜜させるためには、スクロヌルコンテナが必芁です。仮想スクロヌル゜リュヌションを䜿甚する堎合は、カスタムスクロヌルタヌゲットを提䟛する必芁がありたす。コンテンツのスクロヌルを無効にし、スクロヌルを担圓する芁玠に `.ion-content-scroll-host` クラスを远加する必芁がありたす。 @@ -59,7 +55,6 @@ import NoBorder from '@site/static/usage/v8/footer/no-border/index.md'; - ## プロパティ diff --git a/docs/api/grid.md b/docs/api/grid.md index fa1aa126685..5d227870ff7 100644 --- a/docs/api/grid.md +++ b/docs/api/grid.md @@ -1,6 +1,7 @@ --- -title: "ion-grid" +title: 'ion-grid' --- + import Props from '@ionic-internal/component-api/v8/grid/props.md'; import Events from '@ionic-internal/component-api/v8/grid/events.md'; import Methods from '@ionic-internal/component-api/v8/grid/methods.md'; @@ -10,36 +11,34 @@ import Slots from '@ionic-internal/component-api/v8/grid/slots.md'; ion-grid: Display Grids for Mobile-First Custom App Layout - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; - -グリッドは、カスタムレむアりトを構築するための匷力なモバむルファヌストのフレックスボックスシステムです。グリッド、[row(s)](row.md)、 [column(s)](col.md) の3぀のナニットで構成されおいたす。カラムは行を埋めるように展開され、远加のカラムに合うようにサむズを倉曎したす。これは、画面サむズに応じお異なるブレヌクポむントを持぀12列のレむアりトをベヌスにしおいたす。カラムの数は、CSSを䜿っおカスタマむズするこずができたす。 +グリッドは、カスタムレむアりトを構築するための匷力なモバむルファヌストのフレックスボックスシステムです。グリッド、[row(s)](row.md)、 [column(s)](col.md) の 3 ぀のナニットで構成されおいたす。カラムは行を埋めるように展開され、远加のカラムに合うようにサむズを倉曎したす。これは、画面サむズに応じお異なるブレヌクポむントを持぀ 12 列のレむアりトをベヌスにしおいたす。カラムの数は、CSS を䜿っおカスタマむズするこずができたす。 ## 抂芁 -- グリッドは、すべおの行ず列のコンテナずしお機胜したす。グリッドは、そのコンテナの幅を完党に占有したす。 - が、`fixed`プロパティを远加するず、画面サむズに応じた幅が蚭定されたす。埌述の[Fixed Grid](#fixed-grid)を参照しおください。 -- 行は、列を適切に䞊べるための氎平方向のグルヌプです。 -- コンテンツは列の䞭に配眮されるべきで、列だけが行の盎属の子になるこずができる。 -- `size`プロパティは、1行あたりデフォルトの12列のうち、䜿甚する列の数を瀺したす。 - ぀たり、`size="4"`をカラムに远加するこずで、グリッドの1/3、぀たり12カラムのうち4カラムを占有するこずができたす。 -- sizeに倀を指定しないカラムは、自動的に等しい幅を持぀ようになりたす。䟋えば、4぀のカラムは、それぞれ自動的に25の幅になりたす。 -- カラムの幅はパヌセンテヌゞで蚭定されるため、垞に流動的で芪芁玠からの盞察的なサむズになりたす。 -- 個々のカラムの間にはパディングがありたす。しかし、パディングはグリッドから削陀するこずができたす。 - カラムを衚瀺するには、グリッドに `ion-no-padding` クラスを远加したす。グリッドに適甚できるその他のスタむルに぀いおは、[CSS Utilities](../layout/css-utilities) を参照しおください。 -- グリッドの階局は5぀あり、レスポンシブ・ブレヌクポむントごずに1぀ず぀、すべおのブレヌクポむント特小、小、䞭、倧、特倧が甚意されおいたす。 -- グリッドの階局は最小幅を基準ずしおおり、その階局ずそれよりも倧きい階局に適甚されたす。 - (䟋: `size-sm="4"` は、小型、䞭型、倧型、特倧のデバむスに適甚されたす)。 -- グリッドはCSS倉数でカスタマむズするこずができたす。 [グリッドのカスタマむズ](#customizing-the-grid) を参照しおください。 - -## デフォルトのブレむキング・ポむント - -グリッドのデフォルトのブレヌクポむントずそれに察応するプロパティは、以䞋の衚で定矩されおいたす。ブレむクポむントの倀は、珟時点ではカスタマむズするこずができたせん。カスタマむズできない理由に぀いおは、 [メディアク゚リの倉数](../theming/advanced#variables-in-media-queries) を参照しおください。 +- グリッドは、すべおの行ず列を栌玍するコンテナずしお機胜したす。グリッドはコンテナの党幅を占めたすが、`fixed`プロパティを远加するず、画面サむズに基づいお幅が蚭定されたす。詳现は䞋蚘の[固定グリッド](#fixed-grid)を参照しおください。 +- 行は列を暪方向に敎列させる氎平のグルヌプです。 +- コンテンツは列内に配眮する必芁があり、行の盎䞋に配眮できるのは列のみです。 +- `size`プロパティは、1 行あたりのデフォルト 12 列のうち䜿甚する列数を瀺したす。したがっお、`size="4"`を列に远加するず、グリッドの 3 分の 1、぀たり 12 列のうち 4 列分を占めるこずができたす。 +- サむズが蚭定されおいない列は、自動的に等しい幅になりたす。䟋えば、4 列がある堎合、それぞれ自動的に 25の幅になりたす。 +- 列の幅はパヌセンテヌゞで蚭定されるため、垞に可倉であり、芪芁玠に察しお盞察的にサむズが調敎されたす。 +- 個々の列の間にはパディングがありたす。ただし、グリッドず列に`ion-no-padding`クラスを远加するこずでパディングを削陀するこずができたす。グリッドに適甚できるその他のスタむルに぀いおは、[CSS ナヌティリティ](../layout/css-utilities)を参照しおください。 +- グリッドには、5 ぀のグリッド階局がありたす。それぞれのレスポンシブブレヌクポむントに察応しおいたすすべおのブレヌクポむント超小、小、䞭、倧、超倧です。 +- グリッド階局は最小幅を基準にしおおり、その階局およびそれ以䞊の倧きさの階局に適甚されたす䟋`size-sm="4"`は小、䞭、倧、超倧のデバむスに適甚されたす。 +- グリッドは CSS 倉数を通じおカスタマむズできたす。詳现は[グリッドのカスタマむズ](#customizing-the-grid)を参照しおください。 + +## デフォルトのブレむキング・ポむント {/* #default-breakpoints */} + +グリッドのデフォルトのブレヌクポむントず、それに察応するプロパティは以䞋の衚で定矩されおいたす。珟時点ではブレヌクポむントの倀をカスタマむズするこずはできたせん。カスタマむズできない理由に぀いおは、[メディアク゚リの倉数](../theming/advanced#variables-in-media-queries)を参照しおください。 | Name | Value | Width Property | Offset Property | Push Property | Pull Property | Description | | ---- | ------ | -------------- | --------------- | ------------- | ------------- | ------------------------------------ | @@ -49,7 +48,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,10 +56,9 @@ import Basic from '@site/static/usage/v8/grid/basic/index.md'; +## グリッドの固定 {/* #fixed-grid */} -## グリッドの固定 - -グリッドはコンテナの幅を100%占有したす。グリッドに `fixed` プロパティを远加するこずで、画面サむズに応じた幅を蚭定するこずができたす。各ブレむクポむントのグリッドの幅は以䞋の衚に蚘茉されおいたすが、カスタマむズするこずも可胜です。詳しくは、[グリッドのカスタマむズ](#customizing-the-grid) を参照しおください。以䞋の䟋をStackBlitzで開き、画面のサむズを倉曎するず、グリッドの幅が倉化するこずを確認できたす。 +グリッドはコンテナの幅の 100%を䜿甚したす。グリッドに`fixed`プロパティを远加するこずで、画面サむズに基づいお幅が蚭定されたす。各ブレヌクポむントのグリッド幅は以䞋の衚に瀺されおいたすが、カスタマむズするこずも可胜です。詳现に぀いおは、[グリッドのカスタマむズ](#customizing-the-grid)を参照しおください。以䞋の䟋を StackBlitz で開き、画面のサむズを倉曎しおグリッド幅の倉化を確認しおください。 | Name | Value | Description | | ---- | ------ | ------------------------------------------------- | @@ -75,10 +72,9 @@ import Fixed from '@site/static/usage/v8/grid/fixed/index.md'; - ## カラムのサむズ -カラムは、党䜓のカラム数のうち特定の数を占めるように特定のサむズに蚭定したり、コンテンツに応じお幅を倉曎したりするこずができたす。デフォルトのカラム数は12ですが、これはカスタマむズ可胜です。詳しくは、䞋蚘の [カラム数](#number-of-columns) の項を参照しおください。 +カラムは特定のサむズに蚭定しお、党カラム数のうち特定の数を占めるようにするこずや、コンテンツに応じお幅を倉曎するこずができたす。デフォルトのカラム数は 12 ですが、カスタマむズするこずも可胜です。詳现に぀いおは、以䞋の[カラム数](#number-of-columns)のセクションを参照しおください。 ### コンテンツベヌスサむズ @@ -88,7 +84,6 @@ import SizeAuto from '@site/static/usage/v8/grid/size-auto/index.md'; - ### 指定されたサむズ カラムの `size` を蚭定するず、他のカラムは自動的にそのカラムの呚りにリサむズされたす。すべおのカラムにサむズが指定され、それがカラムの総数に満たない堎合、カラムの埌に空癜ができたす。 @@ -99,13 +94,12 @@ import Size from '@site/static/usage/v8/grid/size/index.md'; ### レスポンシブサむズ -`size`プロパティは、すべおの [ブレヌクポむント](#default-breakpoints) の列幅を倉曎したす。たた、Columnでは、"size" の末尟にブレヌクポむント名を付加したいく぀かのsizeプロパティが甚意されおいたす。これらのプロパティは、画面サむズに応じおカラムの幅を倉曎するために䜿甚するこずができたす。以䞋の䟋をStackBlitzで開き、画面のサむズを倉曎するず、カラムの幅が倉化するのがわかりたす。 +`size`プロパティは、すべおの[ブレヌクポむント](#default-breakpoints)でカラム幅を倉曎したす。カラムはたた、ブレヌクポむント名が「size」の末尟に付加された耇数のサむズプロパティを提䟛したす。これらのプロパティを䜿甚しお、画面サむズに応じおカラムの幅を倉曎するこずができたす。以䞋の䟋を StackBlitz で開き、画面のサむズを倉曎しおカラム幅の倉化を確認しおください。 import SizeResponsive from '@site/static/usage/v8/grid/size-responsive/index.md'; - ## 列のオフセット カラムは、党カラム数のうち䞀定のカラム数だけ右にずらすオフセットが可胜です。 @@ -120,13 +114,12 @@ import Offset from '@site/static/usage/v8/grid/offset/index.md'; ### レスポンシブオフセット -`offset`プロパティは、すべおの[ブレヌクポむント](#default-breakpoints)に察しお、カラムの巊マヌゞンを倉曎したす。たた、カラムには、"offset"の末尟にブレヌクポむント名が付加されたいく぀かのoffsetプロパティが甚意されおいたす。これらのプロパティは、画面サむズに応じおカラムのオフセットを倉曎するために䜿甚するこずができたす。以䞋の䟋をStackBlitzで開き、画面のサむズを倉曎するず、カラムのオフセットが倉化するのを確認できたす。 +`offset`プロパティは、すべおの[ブレヌクポむント](#default-breakpoints)で列の巊マヌゞンを倉曎したす。列には、ブレヌクポむント名を"offset"の末尟に付けた耇数のオフセットプロパティもありたす。これらのプロパティは、画面サむズに応じお列のオフセットを倉曎するために䜿甚できたす。以䞋の䟋を StackBlitz で開き、画面サむズを倉曎しお列のオフセットがどのように倉化するかを確認しおください。 import OffsetResponsive from '@site/static/usage/v8/grid/offset-responsive/index.md'; - ## コラム プッシュプル カラムの総数のうち、䞀定のカラム数だけ、カラムを右に抌したり、巊に匕いたりするこずができたす。 @@ -141,7 +134,7 @@ import PushPull from '@site/static/usage/v8/grid/push-pull/index.md'; ### プッシュプルのレスポンシブ察応 -`push`ず`pull`プロパティは、すべおの[ブレヌクポむント](#default-breakpoints)に察しお、カラムの䜍眮を倉曎したす。たた、カラムには、"push" / "pull "の末尟にブレヌクポむント名を付加した `push` ず `pull` プロパティがいく぀かありたす。これらのプロパティは、画面サむズに応じおカラムの䜍眮を倉曎するために䜿甚するこずができたす。以䞋の䟋をStackBlitzで開き、画面のサむズを倉曎するず、列の䜍眮が倉化するのがわかりたす。 +`push`および`pull`プロパティは、すべおの[ブレヌクポむント](#default-breakpoints)で列の䜍眮を倉曎したす。列には、ブレヌクポむント名を"push" / "pull"の末尟に付けた耇数の`push`および`pull`プロパティもありたす。これらのプロパティは、画面サむズに応じお列の䜍眮を倉曎するために䜿甚できたす。以䞋の䟋を StackBlitz で開き、画面サむズを倉曎しお列の䜍眮がどのように倉化するかを確認しおください。 import PushPullResponsive from '@site/static/usage/v8/grid/push-pull-responsive/index.md'; @@ -151,36 +144,35 @@ import PushPullResponsive from '@site/static/usage/v8/grid/push-pull-responsive/ ### 垂盎方向のアラむメント -行に異なるクラスを远加するこずで、すべおの列を行の内偎に垂盎に揃えるこずができたす。利甚可胜なクラスの䞀芧は、[css utilities](/layout/css-utilities#flex-container-properties) を参照しおください。 +すべおの列は、行に異なるクラスを远加するこずで垂盎に敎列させるこずができたす。䜿甚可胜なクラスのリストは[CSS ナヌティリティ](/layout/css-utilities#flex-container-properties)を参照しおください。 import VerticalAlignment from '@site/static/usage/v8/grid/vertical-alignment/index.md'; - ### 氎平アラむメント -行に異なるクラスを远加するこずで、すべおの列を行の内偎に氎平に揃えるこずができたす。利甚可胜なクラスの䞀芧は、[css utilities](/layout/css-utilities.md#flex-container-properties) を参照しおください。 +すべおの列は、行に異なるクラスを远加するこずで氎平方向に敎列させるこずができたす。䜿甚可胜なクラスのリストは[CSS ナヌティリティ](/layout/css-utilities.md#flex-container-properties)を参照しおください。 import HorizontalAlignment from '@site/static/usage/v8/grid/horizontal-alignment/index.md'; -## グリッドのカスタマむズ +## グリッドのカスタマむズ {/* #customizing-the-grid */} -組み蟌みのCSS倉数を䜿甚するこずで、定矩枈みのグリッド属性をカスタマむズするこずができたす。パディングの倀やカラム数などを倉曎するこずができたす。 +組み蟌みの CSS 倉数を䜿甚するこずで、定矩枈みのグリッド属性をカスタマむズするこずができたす。パディングの倀やカラム数などを倉曎するこずができたす。 ### 固定幅 -固定グリッドの幅は、CSS倉数 `--ion-grid-width` を甚いおすべおのブレむクポむントに察しお蚭定するこずができたす。個々のブレむクポむントを䞊曞きするには、`--ion-grid-width-{breakpoint}` CSS倉数を䜿甚したす。各ブレヌクポむントのデフォルト倀は、[固定グリッド](#fixed-grid)セクションに蚘茉されおいたす。以䞋の䟋をStackBlitzで開き、画面のサむズを倉曎するず、グリッドの幅が倉化するのが確認できたす。 +固定グリッドの幅は、すべおのブレヌクポむントに察しお`--ion-grid-width` CSS 倉数で蚭定できたす。個別のブレヌクポむントを䞊曞きするには、`--ion-grid-width-{breakpoint}` CSS 倉数を䜿甚しおください。各ブレヌクポむントのデフォルト倀は、[固定グリッド](#fixed-grid)セクションに蚘茉されおいたす。以䞋の䟋を StackBlitz で開き、画面サむズを倉曎しおグリッド幅がどのように倉化するかを確認しおください。 import Width from '@site/static/usage/v8/grid/customizing/width/index.md'; -### 列数 +### 列数 {/* #number-of-columns */} -グリッドのカラム数は `--ion-grid-columns` ずいうCSS倉数で倉曎するこずができたす。デフォルトでは12列ですが、これを任意の正の敎数に倉曎し、各列の幅を蚈算するために䜿甚するこずができたす。 +グリッドのカラム数は `--ion-grid-columns` ずいう CSS 倉数で倉曎するこずができたす。デフォルトでは 12 列ですが、これを任意の正の敎数に倉曎し、各列の幅を蚈算するために䜿甚するこずができたす。 import ColumnNumber from '@site/static/usage/v8/grid/customizing/column-number/index.md'; @@ -188,28 +180,34 @@ import ColumnNumber from '@site/static/usage/v8/grid/customizing/column-number/i ### Padding -グリッドコンテナのpaddingは、CSS倉数 `--ion-grid-padding` を甚いおすべおのブレむクポむントに察しお蚭定するこずができたす。個々のブレむクポむントを䞊曞きするには、 `--ion-grid-padding-{breakpoint}` CSS倉数を䜿甚したす。 +グリッドコンテナの padding は、CSS 倉数 `--ion-grid-padding` を甚いおすべおのブレむクポむントに察しお蚭定するこずができたす。個々のブレむクポむントを䞊曞きするには、 `--ion-grid-padding-{breakpoint}` CSS 倉数を䜿甚したす。 -列の padding は、CSS 倉数 `--ion-grid-column-padding` ですべおのブレむクポむントに察しお蚭定できたす。個々のブレむクポむントを䞊曞きするには、 `--ion-grid-column-padding-{breakpoint}` CSS倉数を䜿甚したす。 +列の padding は、CSS 倉数 `--ion-grid-column-padding` ですべおのブレむクポむントに察しお蚭定できたす。個々のブレむクポむントを䞊曞きするには、 `--ion-grid-column-padding-{breakpoint}` CSS 倉数を䜿甚したす。 import Padding from '@site/static/usage/v8/grid/customizing/padding/index.md'; ## プロパティ + ## むベント + ## メ゜ッド + ## CSS Shadow Parts + -## CSSカスタムプロパティ +## CSS カスタムプロパティ + ## Slots + diff --git a/docs/api/header.md b/docs/api/header.md index b8d328f0a5a..8a9114c015f 100644 --- a/docs/api/header.md +++ b/docs/api/header.md @@ -15,27 +15,23 @@ import Slots from '@ionic-internal/component-api/v8/header/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - ヘッダヌは、ペヌゞの䞊郚に配眮されるペヌゞのルヌトコンポヌネントです。1぀以䞊の[ツヌルバヌ](./toolbar)のラッパヌずしお䜿甚するこずが掚奚されおいたすが、あらゆる芁玠をラップするために䜿甚するこずができたす。ツヌルバヌがヘッダヌ内で䜿甚される堎合、コンテンツは正しいサむズになるように調敎され、ヘッダヌはデバむスセヌフ領域を考慮したす。 - ## 基本的な䜿い方 import Basic from '@site/static/usage/v8/header/basic/index.md'; - ## 半透明のヘッダヌ -ヘッダヌは、`translucent`プロパティを蚭定するこずで、ネむティブのiOSアプリケヌションに芋られるような透明床に合わせるこずができたす。ヘッダヌの埌ろにスクロヌルするコンテンツを芋るには、コンテンツに `fullscreen` プロパティを蚭定する必芁がありたす。この効果は、モヌドが `"ios"` で、デバむスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポヌトしおいる堎合にのみ適甚されたす。 +ヘッダヌは、`translucent`プロパティを蚭定するこずで、ネむティブiOSアプリケヌションで芋られる透明床ず䞀臎させるこずができたす。コンテンツをヘッダヌの背埌にスクロヌルさせるには、コンテンツに`fullscreen`プロパティを蚭定する必芁がありたす。この効果は、モヌドが`"ios"`であり、デバむスが[backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility)をサポヌトしおいる堎合にのみ適甚されたす。 import Translucent from '@site/static/usage/v8/header/translucent/index.md'; - -## 折りたたみのヘッダヌ +## 折りたたみのヘッダヌ {/* #condensed-header */} Ionicでは、iOSネむティブアプリケヌションで芋られる、倧きなツヌルバヌのタむトルを衚瀺し、スクロヌルするず小さなタむトルに折りたたむ機胜を提䟛しおいたす。これは、コンテンツの䞊に1぀、コンテンツの䞭に1぀、合蚈2぀のヘッダヌを远加し、コンテンツの䞭にあるヘッダヌに `collapse` プロパティを `"condense"` に蚭定するこずで実珟できたす。この効果は、モヌドが "ios "のずきのみ適甚されたす。 @@ -43,18 +39,16 @@ import Condense from '@site/static/usage/v8/header/condense/index.md'; - ## フェヌドヘッダヌ 倚くのネむティブiOSアプリケヌションは、ツヌルバヌにフェヌド効果を持たせおいたす。これは、ヘッダヌの `collapse` プロパティを `"fade"` に蚭定するこずで実珟可胜です。ペヌゞが最初に読み蟌たれたずき、ヘッダヌの背景ず境界線は非衚瀺になりたす。コンテンツがスクロヌルされるず、ヘッダヌは再びフェヌドむンしたす。この効果は、モヌドが「ios」のずきだけ適甚されたす。 -この機胜は、[Condensed Header](#condensed-header)ず組み合わせるこずができたす。collapse`プロパティに`"fade"`を蚭定した堎合は、コンテンツの倖偎にあるヘッダヌに適甚されるはずです。 +この機胜は、[折りたたみヘッダヌ](#condensed-header)ず組み合わせるこずができたす。`collapse`プロパティに`"fade"`を蚭定した堎合は、コンテンツの倖偎にあるヘッダヌに適甚する必芁がありたす。 import Fade from '@site/static/usage/v8/header/fade/index.md'; - ### 仮想スクロヌルの䜿甚方法 フェヌドヘッダヌが正しく動䜜するためには、スクロヌルコンテナが必芁です。仮想スクロヌル゜リュヌションを䜿甚する堎合は、カスタムスクロヌルタヌゲットを提䟛する必芁がありたす。コンテンツのスクロヌルを無効にし、スクロヌルを担圓する芁玠に `.ion-content-scroll-host` クラスを远加する必芁がありたす。 @@ -63,7 +57,6 @@ import CustomScrollTarget from '@site/static/usage/v8/header/custom-scroll-targe - ## Borders `"md"`モヌドでは、ヘッダヌの䞋郚に `box-shadow` が衚瀺されたす。 `"ios"`モヌドでは、ヘッダの䞋郚に `border` が衚瀺されたす。これらは、ヘッダヌに `.ion-no-border` クラスを远加するこずで削陀するこずができたす。 @@ -72,7 +65,6 @@ import NoBorder from '@site/static/usage/v8/header/no-border/index.md'; - ## プロパティ diff --git a/docs/api/icon.md b/docs/api/icon.md index 06762a5c22b..fa46acb7dbd 100644 --- a/docs/api/icon.md +++ b/docs/api/icon.md @@ -12,7 +12,7 @@ title: 'ion-icon' Iconは、Ioniconsラむブラリを通じお利甚できるシンプルなコンポヌネントで、すべおのIonic Frameworkアプリケヌションにデフォルトでプリパッケヌゞされおいたす。Ioniconsのセットから任意のアむコン、たたはカスタムSVGを衚瀺するために䜿甚するこずができたす。たた、サむズや色などのスタむリングもサポヌトされおいたす。 -利甚可胜なアむコンのリストは ionic.io/ionicons. For more information including styling and custom SVG usage, see the Usage page をご芧ください。 +利甚可胜なすべおのアむコンの䞀芧に぀いおは、ionic.io/ioniconsを参照しおください。スタむリングやカスタムSVGの䜿甚を含む詳现に぀いおは、䜿甚方法ペヌゞを参照しおください。 ## 基本的な䜿い方 @@ -20,7 +20,6 @@ import Basic from '@site/static/usage/v8/icon/basic/index.md'; - ## アクセシビリティ 玔粋に装食的なコンテンツであるアむコンは、aria-hidden="true"を持぀べきです。これは、アむコンを芖芚的に隠すこずはできたせんが、支揎技術からその芁玠を隠すこずができたす。 @@ -29,7 +28,6 @@ import Basic from '@site/static/usage/v8/icon/basic/index.md'; ``` - アむコンがむンタラクティブな堎合は、aria-labelを远加するこずで代替テキストを定矩する必芁がありたす。 ```html diff --git a/docs/api/infinite-scroll-content.md b/docs/api/infinite-scroll-content.md index 7f52e086588..34c7583d4c8 100644 --- a/docs/api/infinite-scroll-content.md +++ b/docs/api/infinite-scroll-content.md @@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; `ion-infinite-scroll-content` コンポヌネントは、`ion-infinite-scroll` で䜿甚されるデフォルトの子コンポヌネントです。無限スクロヌルのスピナヌが衚瀺されたす。このスピナヌはプラットフォヌムに応じお最適に衚瀺され、無限スクロヌルの状態に応じお倖芳が倉化したす。`loadingSpinner` and `loadingText` プロパティを蚭定するこずにより、既定倀のスピナヌを倉曎したり、テキストを远加するこずができたす。 -For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content). +詳现および䜿甚方法に぀いおは、[Infinite Scrollドキュメント](./infinite-scroll.md#infinite-scroll-content)を参照しおください。 ## プロパティ @@ -30,5 +30,5 @@ For more information as well as usage, see the [Infinite Scroll Documentation](. ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/input-otp.md b/docs/api/input-otp.md index 147fb408f71..3563167c569 100644 --- a/docs/api/input-otp.md +++ b/docs/api/input-otp.md @@ -39,7 +39,7 @@ import Basic from '@site/static/usage/v8/input-otp/basic/index.md'; - 暙準のキヌボヌドを衚瀺するには `inputmode="text"` を蚭定したす。 - `pattern="[\p{L}\p{N}]"` を蚭定し、英数字の入力を蚱可する。 -パタヌンの怜蚌やカスタマむズの詳现に぀いおは、[パタヌン](#pattern)のセクションを参照しおください。 +パタヌンのバリデヌションずカスタマむズの詳现に぀いおは、[Pattern](#pattern)のセクションを参照しおください。 import Type from '@site/static/usage/v8/input-otp/type/index.md'; diff --git a/docs/api/input.md b/docs/api/input.md index 1346470a356..1fb39c5da64 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -17,17 +17,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - input コンポヌネントは、HTML input 芁玠のラッパヌで、カスタムスタむルず远加機胜を備えおいたす。HTML入力ず同じプロパティのほずんどを受け入れ、モバむルデバむスのキヌボヌドず統合したす。 - ## 基本的な䜿い方 import Basic from '@site/static/usage/v8/input/basic/index.md'; - ## Types input コンポヌネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタむプの入力のみを察象ずしおいたす。たた、`keyup`、`keydown`、`keypress`などの暙準的なテキスト入力むベントをすべおサポヌトしおいたす。デフォルトの `type` は `"text"` です。 @@ -78,7 +75,6 @@ import Clear from '@site/static/usage/v8/input/clear/index.md'; - ## Filled Inputs Material Design では、Inputに塗り぀ぶしのスタむルが甚意されおいたす。Inputの `fill` プロパティは `"solid"` たたは `"outline"` のいずれかに蚭定するこずができたす。 @@ -93,7 +89,6 @@ import Fill from '@site/static/usage/v8/input/fill/index.md'; - ## Helper & Error Text ヘルパヌテキストず゚ラヌテキストは、`helperText` ず `errorText` プロパティを䜿甚しお入力の内郚で䜿甚するこずができたす。゚ラヌテキストは、 `ion-invalid` クラスず `ion-touched` クラスが `ion-input` に远加されおいない限り衚瀺されない。これにより、ナヌザがデヌタを入力する前に゚ラヌが衚瀺されるこずはありたせん。 @@ -157,7 +152,7 @@ Please submit bug reports with Maskito to the [Maskito Github repository](https: この機胜は [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots) のシミュレヌト版に䟝存しおいるため、実隓的なものであるこずに泚意しおください。そのため、シミュレヌトされた動䜜はネむティブのスロットの動䜜ず完党に䞀臎するずは限りたせん。 :::note -In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information. +ほずんどの堎合、これらのスロットに配眮された[Icon](./icon.md)コンポヌネントは`aria-hidden="true"`を持぀べきです。詳现に぀いおは、[Iconアクセシビリティのドキュメント](https://ionicframework.com/docs/api/icon#accessibility)を参照しおください。 If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. ::: @@ -209,7 +204,6 @@ interface InputCustomEvent extends CustomEvent { } ``` - ## プロパティ diff --git a/docs/api/item-option.md b/docs/api/item-option.md index 13cac75f832..90a9801e640 100644 --- a/docs/api/item-option.md +++ b/docs/api/item-option.md @@ -17,11 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; +アむテムオプションコンポヌネントは、スラむドアむテムのためのボタンです。[アむテムオプション](./item-options)の䞭に配眮する必芁がありたす。`ionSwipe`むベントず `expandable` プロパティを組み合わせるこずで、アむテムの完党なスワむプアクションを䜜成するこずができたす。 -アむテムオプションコンポヌネントは、スラむドアむテムのためのボタンです。アむテムオプション](./item-options)の䞭に配眮する必芁がありたす。ionSwipe`むベントず `expandable` プロパティを組み合わせるこずで、アむテムの完党なスワむプアクションを䜜成するこずができたす。 - -詳しくは [item sliding](./item-sliding) のドキュメントを参照しおください。 - +詳现に぀いおは、[item sliding](./item-sliding)のドキュメントを参照しおください。 ## プロパティ diff --git a/docs/api/item-options.md b/docs/api/item-options.md index 7d4c557e8df..b239ff5b5d3 100644 --- a/docs/api/item-options.md +++ b/docs/api/item-options.md @@ -15,11 +15,9 @@ import Slots from '@ionic-internal/component-api/v8/item-options/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - アむテムオプションコンポヌネントは、スラむドアむテムの[アむテムオプション](./item-option)ボタンのためのコンテナです。これらのボタンは、[startたたはend](#side-description)のいずれかに配眮するこずができたす。 -詳しくは [item sliding](./item-sliding) のドキュメントを参照しおください。 - +詳现に぀いおは、[item sliding](./item-sliding)のドキュメントを参照しおください。 ## Side Description @@ -28,9 +26,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; | `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. | - - - ## プロパティ diff --git a/docs/api/item.md b/docs/api/item.md index 00adbba440c..92087d5f5b2 100644 --- a/docs/api/item.md +++ b/docs/api/item.md @@ -22,17 +22,15 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; アむテムは、テキスト、アむコン、アバタヌ、画像、Input、その他のネむティブたたはカスタム芁玠を含むこずができる芁玠です。アむテムは他のアむテムず䞀緒に[リスト](./list)の行ずしおのみ䜿甚しおください。アむテムはスワむプ、削陀、䞊び替え、線集などができたす。 - ## 基本的な䜿い方 -アむテムはテキストを巊寄せにし、テキストがアむテムより幅が広い堎合は省略蚘号を远加しおいたす。この動䜜は、Ionic Framework が提䟛する CSS Utilities を䜿っお倉曎するこずができたす。䟋えば、以䞋の䟋では `.ion-text-nowrap` を䜿っおいたす。テキストを倉換するためにアむテムに远加できる他のクラスに぀いおは、[CSS Utilities Documentation](/docs/layout/css-utilities) を参照しおください。 +アむテムはテキストを巊揃えにし、テキストがアむテムより広い堎合は折り返されたす。この動䜜は、Ionic Frameworkが提䟛するCSSナヌティリティを䜿甚しお倉曎するこずができたす。以䞋の䟋では`.ion-text-nowrap`を䜿甚しおいたす。アむテム内のテキストを倉換するために远加できる他のクラスに぀いおは、[CSSナヌティリティのドキュメント](/docs/layout/css-utilities)を参照しおください。 import Basic from '@site/static/usage/v8/item/basic/index.md'; - -## コンテンツの皮類 +## コンテンツの皮類 {/* #content-types */} リスト内のアむテムは様々な圢をずりたすが、䞀般的にビゞュアル、テキスト、メタデヌタ、アクション、コントロヌルの5぀の異なるコンテンツタむプをサポヌトしたす。しかし、これらのコンテンツタむプをすべお同時に䜿うべきではありたせん。以䞋のガむドでは、異なるコンテンツタむプず、アプリケヌションでの適切な利甚方法を瀺したす。 @@ -80,7 +78,7 @@ import Text from '@site/static/usage/v8/item/content-types/text/index.md'; ### メタデヌタ -メタデヌタは、ステヌタステキストやカりントのようなアむテムの远加コンテキストを提䟛したす。Badge](./badge)や[Note](./note)のようなコンポヌネントは、メタデヌタを衚瀺する玠晎らしい方法です。 +メタデヌタは、ステヌタステキストやカりントのようなアむテムの远加コンテキストを提䟛したす。[バッゞ](./badge)や[泚蚘](./note)のようなコンポヌネントは、メタデヌタを衚瀺する玠晎らしい方法です。 -### アクション +### アクション {/* #actions */} アクションは、アクティブにするず䜕かをするむンタラクティブな芁玠です。アむテムは1行に耇数のアクションを衚瀺するこずができたす。しかし、開発者は、各アクションのタップタヌゲットが十分に倧きいこずを確認する必芁がありたす。 @@ -160,7 +158,6 @@ import Controls from '@site/static/usage/v8/item/content-types/controls/index.md - ## クリック可胜なItems `href` か `button` プロパティが蚭定されおいる堎合、itemは "clickableクリック可胜" ず芋なされたす。clickableなitemsには、むンタラクティブに操䜜できるこずを瀺す芖芚的な違いがいく぀かありたす。たずえば、clickableなitemは、`md` modeではripple゚フェクトを持ち、`ios` modeではハむラむト衚瀺され、`ios` modeでの [detail arrow](/#detail-arrows) が衚瀺されたす。 @@ -169,7 +166,6 @@ import Clickable from '@site/static/usage/v8/item/clickable/index.md'; - ## Detail Arrows デフォルトでは、[clickableなitems](/#clickable-items) は、`ios` modeで右矢印アむコンを衚瀺したす。clickableな芁玠の右矢印アむコンを非衚瀺にするには、 `detail` プロパティを `false` に蚭定したす。自動的に衚瀺されない項目に右矢印アむコンを衚瀺するには、`detail`プロパティを `true` に蚭定したす。 @@ -178,21 +174,12 @@ import DetailArrows from '@site/static/usage/v8/item/detail-arrows/index.md'; - - - +{/* TODO add this functionality back as a css variable */} +{/* This feature is not enabled by default on clickable items for the `md` mode, but it can be enabled by setting the following CSS variable: */} +{/* ```css */} +{/* --item-detail-push-show: true; */} +{/* ``` */} +{/* Refer to the [theming documentation](/docs/theming/css-variables) for more information. */} ## Item Lines @@ -230,7 +217,7 @@ import CSSParts from '@site/static/usage/v8/item/theming/css-shadow-parts/index. -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} import CSSProps from '@site/static/usage/v8/item/theming/css-properties/index.md'; @@ -243,7 +230,7 @@ import CSSProps from '@site/static/usage/v8/item/theming/css-properties/index.md 1. アむテムは [Lists](./list) の䞭だけで䜿甚しおください。 2. リスト内のアむテムは、䞀貫したフォヌマットで衚瀺されるべきです。䟋えば、アむテムに装食的なアむコンを衚瀺する堎合、アむコンはアむテム間で同じように配眮されるべきです。 3. アむテムは決しお[入れ子になったむンタラクティノ](https://dequeuniversity.com/rules/axe/4.4/nested-interactive)をレンダリングすべきではありたせん。入れ子になったむンタラクティブ芁玠が䜿甚されおいる堎合、スクリヌンリヌダヌは正しいむンタラクティブ芁玠を遞択するこずができたせん。䟋えば、`button="true"`を持぀`ion-item`の䞭にボタンを眮くこずは避けおください。 -4. コンテントタむプ](#content-types)を正しく䜿甚しおください。Itemコンポヌネントは、[List](./list)内の行ずしお蚭蚈されおおり、汎甚コンテナずしお䜿甚すべきではありたせん。 +4. [コンテンツタむプ](#content-types)を正しく䜿甚しおください。Item コンポヌネントは、[リスト](./list)内の行ずしお蚭蚈されおおり、汎甚コンテナずしお䜿甚すべきではありたせん。 ## アクセシビリティ diff --git a/docs/api/loading.md b/docs/api/loading.md index 05c94846a7c..abd29cf7ba9 100644 --- a/docs/api/loading.md +++ b/docs/api/loading.md @@ -17,12 +17,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - ナヌザむンタラクションをブロックしながらアクティビティを瀺すためのオヌバヌレむです。ロヌディング・むンゞケヌタはアプリのコンテンツの䞊に衚瀺され、ナヌザヌの操䜜を再開するために消すこずができたす。オプションでbackdropが含たれおおり、`showBackdrop: false` で無効にするこずができたす。 ## 基本的な䜿い方 -䞀床衚瀺されるず、ロヌドむンゞケヌタはデフォルトで無期限に衚瀺されたす。開発者は、コンポヌネント䞊で `dismiss()` メ゜ッドを呌び出すこずで、䜜成埌にロヌディングむンゞケヌタを手動で解陀するこずができたす。onDidDismiss` 関数を呌び出すず、ロヌディングむンゞケヌタが解陀された埌にアクションを実行するこずができたす。 +䞀床衚瀺されるず、ロヌドむンゞケヌタはデフォルトで無期限に衚瀺されたす。開発者は、コンポヌネント䞊で `dismiss()` メ゜ッドを呌び出すこずで、䜜成埌にロヌディングむンゞケヌタを手動で解陀するこずができたす。`onDidDismiss` 関数を呌び出すず、ロヌディングむンゞケヌタが解陀された埌にアクションを実行するこずができたす。 たた、ロヌドオプションの `duration` に衚瀺するミリ秒数を枡すこずで、特定の時間が経過した埌にロヌドむンゞケヌタを自動的に解陀するよう蚭定するこずもできたす。 @@ -38,11 +37,11 @@ import Controller from '@site/static/usage/v8/loading/controller/index.md'; -## Customization +## カスタマむズ ### スピナヌ -䜿甚するスピナヌは `spinner` プロパティを䜿甚しおカスタマむズするこずができたす。オプションの完党なリストは [spinner property documentation](#spinner) を参照しおください。 +䜿甚するスピナヌは `spinner` プロパティでカスタマむズできたす。すべおのオプションに぀いおは、[`spinner` プロパティのドキュメント](#spinner)を参照しおください。 import Spinners from '@site/static/usage/v8/loading/spinners/index.md'; @@ -94,7 +93,6 @@ interface LoadingOptions { } ``` - ## プロパティ diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md index 09d26cc2c8c..73f78ea6a30 100644 --- a/docs/api/menu-button.md +++ b/docs/api/menu-button.md @@ -17,11 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Menu Buttonコンポヌネントは、アむコンを含み、クリックされるずメニュヌを開く機胜を自動的に远加したす。 -詳しくは、[menu](./menu)のドキュメントをご芧ください。 - +詳现に぀いおは、[メニュヌ](./menu)のドキュメントを参照しおください。 ## プロパティ diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md index c1d1aa25648..ebd25ad46bc 100644 --- a/docs/api/menu-toggle.md +++ b/docs/api/menu-toggle.md @@ -17,13 +17,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Menu Toggleコンポヌネントは、メニュヌの開閉を切り替えるために䜿甚するこずができたす。 メニュヌトグルは、遞択されたメニュヌが有効な堎合にのみ衚瀺されたす。メニュヌが無効になっおいる堎合や、分割ペむンずしお衚瀺されおいる堎合は、メニュヌトグルは非衚瀺になりたす。垞にメニュヌトグルを衚瀺するには、`autoHide`プロパティを`false`に蚭定したす。 -詳しくは、[menu](./menu#menu-toggle)のドキュメントを参照しおください。 - +詳现に぀いおは、[メニュヌ](./menu#menu-toggle)のドキュメントを参照しおください。 ## プロパティ diff --git a/docs/api/menu.md b/docs/api/menu.md index b085f700a3d..f433287bc01 100644 --- a/docs/api/menu.md +++ b/docs/api/menu.md @@ -17,7 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - メニュヌコンポヌネントは、珟圚のビュヌの暪からスラむドしおくるナビゲヌションドロワヌです。デフォルトでは、開始偎を䜿甚し、LTRの堎合は巊から、RTLの堎合は右からスラむドさせたすが、サむドをオヌバヌラむドするこずができたす。メニュヌの衚瀺はモヌドによっお異なりたすが、衚瀺タむプは利甚可胜なメニュヌタむプのいずれかに倉曎するこずができたす。 メニュヌ芁玠はルヌトコンテンツ芁玠の兄匟芁玠でなければなりたせん。コンテンツにはいく぀でもメニュヌを付けるこずができる。これらのメニュヌはテンプレヌトから制埡するか、`MenuController`を䜿甚しおプログラムで制埡するこずができたす。 @@ -28,7 +27,6 @@ import Basic from '@site/static/usage/v8/menu/basic/index.md'; - ## Menu Toggle [menu toggle](./menu-toggle) コンポヌネントを䜿甚しお、メニュヌを開いたり閉じたりするカスタムボタンを䜜成するこずができたす。 @@ -37,7 +35,6 @@ import MenuToggle from '@site/static/usage/v8/menu/toggle/index.md'; - ## Menu Types `type`プロパティは、アプリケヌションでのメニュヌの衚瀺方法をカスタマむズするために䜿甚するこずができたす。 @@ -46,19 +43,17 @@ import MenuType from '@site/static/usage/v8/menu/type/index.md'; - ## Menu Sides メニュヌはデフォルトでは`"start"`偎に衚瀺されたす。巊から右ぞ移動するアプリでは巊偎に、右から巊ぞ移動するアプリでは右偎に衚瀺されたす。メニュヌは`"start"`の反察偎である`"end"`偎に衚瀺させるこずもできたす。 -アプリ内で䞡サむドのメニュヌが必芁な堎合、 `MenuController` の `open` メ゜ッドに `side` の倀を枡すこずでメニュヌを開くこずができたす。sideが指定されない堎合は、`"start"`偎のメニュヌが開かれる。MenuController` を䜿甚した䟋に぀いおは、䞋蚘の [耇数メニュヌ](#multiple-menus) セクションを参照ください。 +アプリで䞡偎にメニュヌが必芁な堎合は、`side`の倀を`MenuController`の`open`メ゜ッドに枡すこずでメニュヌを開くこずができたす。サむドが指定されおいない堎合、`"start"`偎のメニュヌが開きたす。`MenuController`を䜿甚した䟋に぀いおは、以䞋の[耇数のメニュヌ](#multiple-menus)セクションを参照しおください。 import Sides from '@site/static/usage/v8/menu/sides/index.md'; - -## 耇数メニュヌ +## 耇数メニュヌ {/* #multiple-menus */} 同じサむドに耇数のメニュヌが存圚する堎合、サむドではなくIDで参照する必芁がありたす。そうしないず、間違ったメニュヌがアクティブになる可胜性がある。 @@ -66,7 +61,6 @@ import Multiple from '@site/static/usage/v8/menu/multiple/index.md'; - ## テヌマ ### CSS Shadow Parts @@ -88,9 +82,6 @@ interface MenuCustomEvent extends CustomEvent { } ``` - - - ## プロパティ diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md index 781fb90c6aa..d0c209c0b90 100644 --- a/docs/api/nav-link.md +++ b/docs/api/nav-link.md @@ -15,13 +15,11 @@ import Slots from '@ionic-internal/component-api/v8/nav-link/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - ナビゲヌションリンクは指定されたコンポヌネントに移動するために䜿甚されたす。コンポヌネントは `forward`, `back` たたは `root` コンポヌネントずしお移動するこずができたす。 これは、ナビゲヌションコントロヌラの `push()`, `pop()`, `setRoot()` メ゜ッドを呌び出すための芁玠圢匏ずなりたす。 -詳しくは[nav](./nav#using-navlink)のドキュメントを参照ください。 - +詳现に぀いおは、[nav](./nav#using-navlink)のドキュメントを参照しおください。 ## プロパティ diff --git a/docs/api/nav.md b/docs/api/nav.md index 61e902f6b26..11ef93deed2 100644 --- a/docs/api/nav.md +++ b/docs/api/nav.md @@ -22,10 +22,10 @@ Navは、任意のコンポヌネントをロヌドし、スタックに新し Router Outletずは異なり、Navは特定のルヌタヌに瞛られるこずはありたせん。぀たり、Navコンポヌネントをロヌドし、他のコンポヌネントをスタックにプッシュしおも、アプリ党䜓のルヌタヌには圱響しない。䟋えば、新しいコンポヌネントを`ion-nav`にプッシュしお、URLが曎新されるこずを期埅するべきではありたせん。これは、アプリのURLに関連付けずに、独自のサブナビゲヌションが必芁なモヌダルがあるような䜿甚䟋に適しおいたす。 :::note -`ion-nav`はルヌティングに䜿甚するものではありたせん。 代わりに、[Angular](../angular/navigation)、[React](../react/navigation)、[Vue](../vue/navigation)、たたはバニラJavaScriptプロゞェクト甚の[`ion-router`](./router)のルヌティングガむドを参照しおください。 -::: +`ion-nav`はルヌティングには䜿甚されたせん。代わりに、[Angular](../angular/navigation)、[React](../react/navigation)、および[Vue](../vue/navigation)のルヌティングガむド、たたは[`ion-router`](./router)のバニラJavaScriptプロゞェクト甚ガむドを参照しおください。 -## NavLinkを利甚する +{/* cspell:disable-next-line */} +## NavLinkを利甚する {/* #using-navlink */} NavLinkは、Navず察話する際の簡玠化されたAPIです。開発者はコンポヌネントをカスタマむズしたり、コンポヌネントのプロパティを枡したり、ルヌトアニメヌションの方向を倉曎したり、ナビゲヌト時のカスタムアニメヌションを定矩したりするこずができたす。 @@ -59,8 +59,6 @@ interface NavCustomEvent extends CustomEvent { } ``` - - ## プロパティ diff --git a/docs/api/picker-legacy.md b/docs/api/picker-legacy.md index 077077f6baf..27a9b7c822f 100644 --- a/docs/api/picker-legacy.md +++ b/docs/api/picker-legacy.md @@ -17,7 +17,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -:::warning Deprecation Notice +:::warning[非掚奚通知] `ion-picker-legacy` is deprecated and will be removed in the next major release. Migrate to [`ion-picker`](./picker.md) as soon as possible. diff --git a/docs/api/picker.md b/docs/api/picker.md index 83debbd21c2..17c17005251 100644 --- a/docs/api/picker.md +++ b/docs/api/picker.md @@ -48,254 +48,6 @@ import CSSProps from '@site/static/usage/v8/picker/theming/css-properties/index. import ModalExample from '@site/static/usage/v8/picker/modal/index.md'; - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Navigation - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Function | -| ------------------ | ------------------------------------------------------------ | -| `ArrowUp` | Scroll to the previous option. | -| `ArrowDown` | Scroll to the next option. | -| `PageUp` | Scroll up by more than one option. | -| `PageDown` | Scroll down by more than one option. | -| `Home` | Scroll to the first option. | -| `End` | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Pickerは、各[Picker Column](./picker-column)に[`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role)を実装するこずで、スクリヌンリヌダヌを䜿甚したナビゲヌションをサポヌトしたす。以䞋のゞェスチャヌを䜿甚しおPickerをナビゲヌトできたす。 - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | ## Accessibility diff --git a/docs/api/popover.md b/docs/api/popover.md index 018f7b4b607..27c9d9e54ab 100644 --- a/docs/api/popover.md +++ b/docs/api/popover.md @@ -17,12 +17,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Popoverは、珟圚のペヌゞの䞊郚に衚瀺されるダむアログです。これは䜕にでも䜿甚できたすが、通垞はナビゲヌションバヌに収たらないオヌバヌフロヌアクションに䜿甚されたす。 `ion-popover` を䜿甚するには、むンラむンで䜿甚する方法ず `popoverController` を䜿甚する方法がりたす。それぞれの方法には異なる考慮点があるので、あなたのナヌスケヌスに最も適した方法を䜿甚するようにしたしょう。 -## むンラむンポップオヌバヌ +## むンラむンポップオヌバヌ {/* #inline-popovers */} `ion-popover` は、テンプレヌトに盎接コンポヌネントを蚘述しお䜿甚するこずができたす。これにより、ポップオヌバヌを衚瀺するために必芁なハンドラの数を枛らすこずができたす。 @@ -64,16 +63,15 @@ import InlineTrigger from '@site/static/usage/v8/popover/presenting/inline-trigg `isOpen` は䞀方向のデヌタバむンディングを䜿甚しおいたす。぀たり、ポップオヌバヌが閉じられたずきに自動的に `false` に蚭定されるこずはありたせん。開発者は `ionPopoverDidDismiss` たたは `didDismiss` むベントをリッスンしお `isOpen` を `false` にセットする必芁がありたす。この理由は、`ion-popover` の内郚がアプリケヌションの状態ず密に結合されるのを防ぐためである。䞀方通行のデヌタバむンディングでは、ポップオヌバヌはリアクティブ倉数が提䟛するブヌリアン倀だけを気にすればよいのです。双方向のデヌタバむンディングでは、ポップオヌバヌはブヌル倀ずリアクティブ倉数の存圚の䞡方に関心を持぀必芁がありたす。これは非決定的な動䜜に぀ながり、アプリケヌションのデバッグを難しくしたす。 - import IsOpenTrigger from '@site/static/usage/v8/popover/presenting/inline-isopen/index.md'; -## ポップオヌバヌコントロヌラ +## ポップオヌバヌコントロヌラ {/* #controller-popovers */} Ionic Framework からむンポヌトされた `popoverController` を䜿甚するこずで、`ion-popover` をプログラム的に衚瀺するこずも可胜です。これにより、むンラむンポップオヌバヌのカスタマむズ以䞊に、ポップオヌバヌを衚瀺するタむミングを完党に制埡するこずができたす。 -### どのような堎合に䜿甚するのか +### い぀䜿うか ポップオヌバヌはむンラむンで蚘述するこずをお勧めしたす。ポップオヌバヌをむンラむンで曞くこずが珟実的でない耇雑なナヌスケヌスの堎合にのみ `popoverController` を䜿甚すべきです。コントロヌラを䜿甚する堎合、ポップオヌバヌは前もっお䜜成されないので、 `trigger` や `trigger-action` などのプロパティはここでは適甚されたせん。さらに、ネストされたポップオヌバヌはコントロヌラのアプロヌチず互換性がありたせん。なぜなら、ポップオヌバヌは `create` メ゜ッドが呌ばれたずきに自動的にアプリケヌションのルヌトに远加されるからです。 @@ -87,7 +85,6 @@ import ControllerExample from '@site/static/usage/v8/popover/presenting/controll - ## スタむリング ポップオヌバヌはアプリケヌションのルヌトで衚瀺されるので、アプリケヌション党䜓を芆うように衚瀺されたす。この動䜜はむンラむンポップオヌバヌずコントロヌラから衚瀺されるポップオヌバヌの䞡方に適甚されたす。そのため、カスタムポップオヌバヌスタむリングは特定のコンポヌネントにスコヌプするこずができたせん。代わりに、スタむルはグロヌバルに適甚されなければなりたせん。ほずんどの開発者は、カスタムスタむルを `global.css` に配眮すれば十分です。 @@ -100,7 +97,6 @@ import Styling from '@site/static/usage/v8/popover/customization/styling/index.m - ## 配眮 ### リファレンス @@ -129,7 +125,7 @@ import Positioning from '@site/static/usage/v8/popover/customization/positioning ドロップダりンメニュヌを䜜成するずき、ポップオヌバヌの幅をトリガヌ芁玠の幅ず䞀臎させたい堎合がありたす。トリガヌの幅を事前に知らずにこれを行うのは厄介です。 `size` プロパティを `'cover'` に蚭定するず、Ionic Framework はポップオヌバヌの幅をトリガヌ芁玠の幅に䞀臎させるようにしたす。 -`popoverController` を䜿甚する堎合は、`event` オプションでむベントを指定する必芁があり、Ionic Framework は `event.target` を参照芁玠に䜿甚したす。このパタヌンの䟋は [controller demo](#controller-popovers) を参照しおください。 +`popoverController`を䜿甚しおいる堎合、`event`オプションでむベントを指定する必芁があり、Ionic Frameworkは`event.target`を参照芁玠ずしお䜿甚したす。このパタヌンの䟋に぀いおは、[controllerデモ](#controller-popovers)を参照しおください。 import Sizing from '@site/static/usage/v8/popover/customization/sizing/index.md'; @@ -149,7 +145,6 @@ import NestedPopover from '@site/static/usage/v8/popover/nested/index.md'; - ## Interfaces 以䞋に、`popoverController` を䜿甚する際に利甚可胜なすべおのオプションを瀺したす。これらのオプションは `popoverController.create()` を呌び出す際に指定したす。 @@ -182,7 +177,6 @@ interface PopoverOptions { } ``` - ## Types 以䞋に、`ion-popover` のすべおのカスタムTypeを玹介したす。 @@ -251,7 +245,7 @@ import Mount from '@site/static/usage/v8/popover/performance/mount/index.md'; ## CSS Shadow Parts -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} ## Slots diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md index ea0189ee129..bf75ea4845b 100644 --- a/docs/api/progress-bar.md +++ b/docs/api/progress-bar.md @@ -48,7 +48,7 @@ import Indeterminate from '@site/static/usage/v8/progress-bar/indeterminate/inde ## Progress Bars in Toolbars - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v8/toolbar/progress-bars/index.md'; diff --git a/docs/api/radio-group.md b/docs/api/radio-group.md index d8d678a0a1a..07941287a28 100644 --- a/docs/api/radio-group.md +++ b/docs/api/radio-group.md @@ -15,9 +15,7 @@ import Slots from '@ionic-internal/component-api/v8/radio-group/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - -ラゞオ・グルヌプは、[ラゞオ](./radio)のグルヌプのためのコンテナです。ラゞオグルヌプは、ナヌザヌがラゞオボタンを1぀だけ遞択できるようにしたす。ラゞオ・グルヌプに属するラゞオ・ボタンを1぀チェックするず、同じグルヌプ内で以前にチェックされたラゞオ・ボタンのチェックは解陀されたす。ラゞオ・グルヌプの䜿甚䟋に぀いおは、[radio](./radio)のドキュメントを参照しおください。 - +ラゞオグルヌプは、[ラゞオボタン](./radio)のグルヌプのコンテナです。ナヌザヌは、セット内のラゞオボタンを最倧で1぀だけ遞択できたす。ラゞオグルヌプに属する1぀のラゞオボタンをチェックするず、同じグルヌプ内で以前にチェックされたラゞオボタンはすべおチェック解陀されたす。ラゞオグルヌプの䜿甚䟋に぀いおは、[ラゞオ](./radio)のドキュメントを参照しおください。 ## Interfaces @@ -40,7 +38,6 @@ interface RadioGroupCustomEvent extends CustomEvent { } ``` - ## プロパティ diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.md index d127d60354a..0cf78f73fed 100644 --- a/docs/api/refresher-content.md +++ b/docs/api/refresher-content.md @@ -10,11 +10,9 @@ import Slots from '@ionic-internal/component-api/v8/refresher-content/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - リフレッシュコンテンツには、プルトゥリフレッシュ時に衚瀺するテキスト、アむコン、スピナヌが含たれたす。Ionicは、プラットフォヌムに基づいお、プルアむコンずリフレッシュスピナヌを衚瀺したす。ただし、デフォルトのアむコン、スピナヌ、テキストは、リフレッシュの状態に応じおカスタマむズできたす。 -䜿甚䟋に぀いおは、[Refresher](/docs/api/refresher)ドキュメントを参照しおください。 - +䜿甚䟋に぀いおは、[Refresher](/docs/api/refresher)のドキュメントを参照しおください。 ## プロパティ diff --git a/docs/api/refresher.md b/docs/api/refresher.md index 8d7e12ea44d..8b60845ffe8 100644 --- a/docs/api/refresher.md +++ b/docs/api/refresher.md @@ -15,20 +15,17 @@ import Slots from '@ionic-internal/component-api/v8/refresher/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - リフレッシャヌは、コンテンツコンポヌネントにプルトゥリフレッシュ機胜を提䟛したす。pull-to-refreshパタヌンは、ナヌザがより倚くのデヌタを取埗するために、デヌタのリストをプルダりンするこずを可胜にしたす。 デヌタは、リフレッシャヌの出力むベント䞭に倉曎する必芁がありたす。非同期凊理が完了し、リフレッシュが終了したら、リフレッシュに察しお `complete()` を呌び出す必芁がありたす。 - ## 基本的な䜿い方 import Basic from '@site/static/usage/v8/refresher/basic/index.md'; - -## Pull プロパティ +## Pull プロパティ {/* #pull-properties */} リフレッシャヌには、匕くゞェスチャヌをカスタマむズするためのプロパティがいく぀かありたす。 `pullFactor` プロパティを蚭定するず匕っ匵るスピヌドを、`pullMin` プロパティを蚭定するずナヌザが匕っ匵る最小距離を、`pullMax` プロパティを蚭定するずリフレッシャヌが `refreshing` 状態になる前にナヌザが匕っ匵る最倧距離を倉曎するこずができたす。 @@ -38,8 +35,7 @@ import PullProperties from '@site/static/usage/v8/refresher/pull-properties/inde - -## カスタムリフレッシャヌコンテンツ +## カスタムリフレッシャヌコンテンツ {/* #custom-refresher-content */} デフォルトのアむコン、スピナヌ、テキストは、リフレッシャヌの状態が `pulling` か `refreshing` かによっお、[リフレッシャヌコンテンツ](./refresher-content) 䞊でカスタマむズするこずができたす。 @@ -49,7 +45,6 @@ import CustomContent from '@site/static/usage/v8/refresher/custom-content/index. - ## Native Refreshers iOSずAndroidの䞡プラットフォヌムは、pull-to-refreshにネむティブのような流動的な感芚を䞎えるために、それぞれのデバむスが公開するプロパティを䜿甚するリフレッシュ機胜を提䟛したす。 @@ -58,10 +53,9 @@ iOSずMaterial Designのネむティブリフレッシュ機胜は、Ionicのデ ネむティブのリフレッシャヌでは、マテリアルデザむン甚の `circular` スピナヌを䜿甚したすが、iOS では `lines` スピナヌを䜿甚したす。iOSでは、ティックマヌクはペヌゞが䞋に匕っ匵られるに぀れお埐々に衚瀺されたす。 -[Pullプロパティ](#pull-properties)、`closeDuration`、`snapbackDuration`のような特定のリフレッシャヌプロパティは、ネむティブリフレッシャヌの倚くがスクロヌルベヌスであるため、互換性がありたせん。サポヌトされおいないプロパティの詳现に぀いおは、[Properties](#properties)を参照しおください。 - -[リフレッシュコンテンツ](#custom-refresher-content)の `pullingIcon` を任意のアむコンたたはスピナヌに蚭定するこずで、ネむティブリフレッシュモヌドを無効にするこずができたす。䜿甚可胜な倀に぀いおは、[Ionicons](https://ionic.io/ionicons) および [Spinner](./spinner) のドキュメントを参照しおください。 +[プルプロパティ](#pull-properties)、`closeDuration` および `snapbackDuration` などの特定のリフレッシャヌのプロパティは、ネむティブリフレッシャヌの倚くがスクロヌルベヌスであるため、互換性がありたせん。サポヌトされおいないプロパティの詳现に぀いおは、[プロパティ](#properties)を参照しおください。 +ネむティブのリフレッシャヌは、[リフレッシャヌコンテンツ](#custom-refresher-content)の`pullingIcon`を任意のアむコンたたはスピナヌに蚭定するこずで無効にできたす。蚱可されおいる倀に぀いおは、[Ionicons](https://ionic.io/ionicons)および[Spinner](./spinner)のドキュメントを参照しおください。 ## Usage with Virtual Scroll @@ -93,7 +87,6 @@ import CustomScrollTarget from '@site/static/usage/v8/refresher/custom-scroll-ta - ## 高床な䜿甚法 リフレッシャヌはどのようなタむプのコンテンツでも䜿甚できたすが、ネむティブアプリでよくある䜿甚䟋は、曎新時に曎新されるデヌタのリストを衚瀺するこずです。以䞋の䟋では、アプリはデヌタのリストを生成し、曎新が完了したずきにリストの先頭にデヌタを远加したす。実際のアプリでは、ネットワヌクたたはデヌタベヌス呌び出しによっおリク゚ストを送信した埌に、デヌタを受信しお曎新したす。 @@ -154,7 +147,7 @@ interface RefresherPullEndCustomEvent extends CustomEvent { } ``` -## プロパティ +## プロパティ {/* #properties */} ## むベント diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md index 5b3ef9cbfc5..6295945c021 100644 --- a/docs/api/reorder-group.md +++ b/docs/api/reorder-group.md @@ -15,11 +15,9 @@ import Slots from '@ionic-internal/component-api/v8/reorder-group/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Reorder groupは、[reorder](./reorder)コンポヌネントを䜿甚するアむテムのコンテナです。ナヌザヌがアむテムをドラッグしおドロップするず、`ionReorderEnd`むベントが発行されたす。このむベントのハンドラを実装し、`complete`メ゜ッドを呌び出す必芁がありたす。 -`ionReorderEnd`むベントの`detail`プロパティには、`from`ず`to`のむンデックスを含む、reorder操䜜に関するすべおの関連情報が含たれおいたす。reorderのコンテキストでは、アむテムはむンデックス`from`からむンデックス`to`に移動したす。reorder groupの䜿甚䟋に぀いおは、[reorder](./reorder)ドキュメントを参照しおください。 - +`ionReorderEnd` むベントの `detail` プロパティには、`from` および `to` むンデックスを含む、䞊べ替え操䜜に関するすべおの関連情報が含たれおいたす。䞊べ替えの文脈では、項目は `to` むンデックスに `from` 移動したす。䞊べ替えグルヌプの䜿甚䟋に぀いおは、[reorder](./reorder) ドキュメントを参照しおください。 ## Interfaces @@ -88,7 +86,6 @@ interface ItemReorderCustomEvent extends CustomEvent { } ``` - ## プロパティ diff --git a/docs/api/router-link.md b/docs/api/router-link.md index 24b1dd26daf..429d809403d 100644 --- a/docs/api/router-link.md +++ b/docs/api/router-link.md @@ -18,13 +18,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -router linkコンポヌネントは、指定されたリンクに移動するために䜿甚したす。ブラりザのアンカヌタグず同様に、hrefで堎所を、directionで遷移のアニメヌションを指定するこずができたす。 +ルヌタヌリンクコンポヌネントは、指定されたリンクに移動するために䜿甚したす。ブラりザのアンカヌタグず同様に、`href` で堎所を、`direction` で遷移のアニメヌションを指定できたす。 :::note - Note: このコンポヌネントは、vanilla ず Stencil での JavaScriptプロゞェクトでのみ䜿甚しおください。Angularプロゞェクトでは、[`ion-router-outlet`](router-outlet.md) ず Angularルヌタを䜿甚しおください。 +このコンポヌネントは、Vanilla JavaScript ず Stencil のプロゞェクトでのみ䜿甚しおください。Angular プロゞェクトでは、[`ion-router-outlet`](router-outlet.md) ず Angular ルヌタヌを䜿甚しおください。 ::: -詳现に぀いおは、[Router](./router)ドキュメントを参照しおください。 +詳现に぀いおは、[ルヌタヌ](./router)のドキュメントを参照しおください。 ## プロパティ @@ -41,5 +41,5 @@ router linkコンポヌネントは、指定されたリンクに移動するた ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/row.md b/docs/api/row.md index 1362477e3bd..19007f64f54 100644 --- a/docs/api/row.md +++ b/docs/api/row.md @@ -20,16 +20,12 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Rowは[Grid](./grid)システムの氎平方向の構成芁玠で、さたざたな数の [columns](./col)を含む。列が適切に配眮されるようにしたす。 -詳しくは[grid](./grid)のドキュメントを参照しおください。 - +詳现に぀いおは、[グリッド](./grid)のドキュメントを参照しおください。 ## Row Alignment デフォルトでは、列は行の高さ党䜓を埋めるように䌞瞮し、必芁に応じお折り返されたす。行は [Flexコンテナ](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container) なので、この動䜜をカスタマむズするために、行に適甚できるいく぀かの [CSS クラス](/docs/layout/css-utilities#flex-container-properties) が甚意されおいたす。 - - - ## プロパティ diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md index 91f0db1d5d6..a720e2bb67b 100644 --- a/docs/api/searchbar.md +++ b/docs/api/searchbar.md @@ -58,7 +58,7 @@ import CancelButton from '@site/static/usage/v8/searchbar/cancel-button/index.md 怜玢バヌは、ツヌルバヌの䞭に配眮されたずきにネむティブに芋えるようにスタむルされおいたす。iOSでは、怜玢バヌは、ペヌゞタむトルを含むツヌルバヌの䞋にある、独自のツヌルバヌに配眮されるべきです。Material Designでは、怜玢バヌは、独自のツヌルバヌに氞続的に衚瀺されるか、ペヌゞタむトルを含むツヌルバヌの䞊に展開されるかのいずれかです。 - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v8/toolbar/searchbars/index.md'; diff --git a/docs/api/segment-content.md b/docs/api/segment-content.md index 3c17b07eceb..6dee4671fed 100644 --- a/docs/api/segment-content.md +++ b/docs/api/segment-content.md @@ -18,16 +18,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Segment content is a wrapper element used to control the display of child elements when using swipeable segments. Segment content elements are children of a single -[segment view](./segment-view.md) instance that is linked to a [segment](./segment.md). See our [swipeable segments](./segment.md#swipeable-segments) documentation -for more information on how to use segment contents. +セグメントコンテンツは、スワむプ可胜なセグメントを䜿甚する際に子芁玠の衚瀺を制埡するためのラッパヌ芁玠です。セグメントコンテンツ芁玠は、[セグメント](./segment.md)にリンクされた単䞀の[セグメントビュヌ](./segment-view.md)むンスタンスの子芁玠です。セグメントコンテンツの䜿甚方法に぀いおは、[スワむプ可胜なセグメント](./segment.md#swipeable-segments)のドキュメントを参照しおください。 ## Usage Each `ion-segment-content` needs a unique `id` attribute. This will be used to link the segment content to a segment button via the button's [contentId property](./segment-button.md#properties). - +{/* Reuse swipeable segments playground */} import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md'; @@ -48,5 +46,5 @@ import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md'; ## CSS Custom Properties -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/segment-view.md b/docs/api/segment-view.md index 5d0054c4ff8..9641275cfe7 100644 --- a/docs/api/segment-view.md +++ b/docs/api/segment-view.md @@ -18,8 +18,8 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Segment view is a wrapper element that links a group of [segment contents](./segment-content.md) to a [segment](./segment.md) when using swipeable segments. -See our [swipeable segments](./segment.md#swipeable-segments) documentation for more information on how to use segment views. +セグメントビュヌは、スワむプ可胜なセグメントを䜿甚する際に、[セグメントコンテンツ](./segment-content.md)のグルヌプを[セグメント](./segment.md)にリンクするラッパヌ芁玠です。 +セグメントビュヌの䜿甚方法に぀いおは、[スワむプ可胜なセグメント](./segment.md#swipeable-segments)のドキュメントを参照しおください。 ## Properties @@ -36,5 +36,5 @@ See our [swipeable segments](./segment.md#swipeable-segments) documentation for ## CSS Custom Properties -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/segment.md b/docs/api/segment.md index 9be86bcbb6a..3ec339dd780 100644 --- a/docs/api/segment.md +++ b/docs/api/segment.md @@ -43,7 +43,7 @@ import Scrollable from '@site/static/usage/v8/segment/scrollable/index.md'; ## Segments in Toolbars - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v8/toolbar/segments/index.md'; diff --git a/docs/api/select-option.md b/docs/api/select-option.md index f5852382a7c..a07f8287df6 100644 --- a/docs/api/select-option.md +++ b/docs/api/select-option.md @@ -17,12 +17,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - セレクトオプションは、セレクトの子芁玠ずなるコンポヌネントです。定矩された各オプションは、Selectダむアログに枡され衚瀺されたす。 䜿甚䟋に぀いおは、[Select](./select)のドキュメントを参照しおください。 - ## プロパティ @@ -38,5 +36,5 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/select.md b/docs/api/select.md index ec45b02e90e..c1dccb7082f 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -17,7 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - セレクトは、䞀連のオプションから1぀たたは耇数のオプションを遞択するためのフォヌムコントロヌルです。ナヌザヌがセレクトをタップするず、ダむアログが衚瀺され、すべおのオプションが倧きく遞択しやすいリストに衚瀺されたす。 selectは、子芁玠 `` ずずもに䜿甚する必芁がありたす。子芁玠のオプションに`value`属性が指定されおいない堎合、そのtextが倀ずしお䜿甚されたす。 @@ -84,7 +83,7 @@ import MultipleSelectionExample from '@site/static/usage/v8/select/basic/multipl -## むンタヌフェむス +## むンタヌフェむス {/* #interfaces */} デフォルトでは、selectは [ion-alert](alert.md) を䜿甚しおアラヌトのオプションのオヌバヌレむを開きたす。むンタヌフェむスは、`interface` プロパティに `action-sheet`、`popover`、`modal` を枡すこずで、[ion-action-sheet](action-sheet.md)、[ion-popover](popover.md)、[ion-modal](modal.md) を䜿甚するように倉曎するこずができたす。それぞれのむンタヌフェヌスの制限事項に぀いおは、他のセクションを参照しおください。 @@ -94,7 +93,6 @@ import AlertExample from '@site/static/usage/v8/select/basic/single-selection/in - ### Action Sheet import ActionSheetExample from '@site/static/usage/v8/select/interfaces/action-sheet/index.md'; @@ -115,7 +113,7 @@ import ModalExample from '@site/static/usage/v8/select/interfaces/modal/index.md ## Responding to Interaction -Select ずナヌザのむンタラクションを凊理する䞻な方法は、 `ionChange` むベント、 `ionDismiss` むベント、 `ionCancel` むベントです。これらのむベントやselectが発生するその他のむベントの詳现に぀いおは、[Events](#events)を参照しおください。 +Selectずのナヌザヌむンタラクションを凊理する䞻な方法は、`ionChange`、`ionDismiss`、および`ionCancel`むベントです。これらおよびSelectが発火する他のむベントの詳现に぀いおは、[Events](#events)を参照しおください。 import RespondingToInteractionExample from '@site/static/usage/v8/select/basic/responding-to-interaction/index.md'; @@ -140,7 +138,7 @@ import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v8/selec ## Justification - + 開発者は `justify` プロパティを䜿っお、ラベルずコントロヌルの行の詰め方をコントロヌルするこずができる。 import JustifyExample from '@site/static/usage/v8/select/justify/index.md'; @@ -178,8 +176,7 @@ import ButtonTextExample from '@site/static/usage/v8/select/customization/button selectはalert、action sheet、popover、modalの各むンタヌフェむスを䜿甚するので、`interfaceOptions`プロパティを通しおこれらのコンポヌネントにオプションを枡すこずができたす。これを䜿甚しお、カスタムヘッダヌ、サブヘッダヌ、CSS クラスなどを枡すこずができたす。 -各むンタフェヌスが受け付けるプロパティに぀いおは、[ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), [ion-popover docs](popover.md), [ion-modal docs](modal.md) を参照しおください。 -を参照しおください。 +各むンタヌフェヌスが受け入れるプロパティに぀いおは、[ion-alertドキュメント](alert.md)、[ion-action-sheetドキュメント](action-sheet.md)、[ion-popoverドキュメント](popover.md)、および[ion-modalドキュメント](modal.md)を参照しおください。 泚意: `alert` むンタヌフェむスでは、`interfaceOptions` は `inputs` や `buttons` を䞊曞きしたせん。 @@ -192,7 +189,7 @@ import InterfaceOptionsExample from '@site/static/usage/v8/select/customization/ `start`ず`end`スロットは、セレクトの䞡偎にアむコン、ボタン、たたはプレフィックス/サフィックステキストを配眮するために䜿甚できたす。スロットコンテンツがクリックされた堎合、セレクトは開きたせん。 :::note -ほずんどの堎合、これらのスロットに配眮された[Icon](./icon.md)コンポヌネントには`aria-hidden="true"`を蚭定すべきです。詳现に぀いおは、[Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility)を参照しおください。 +ほずんどの堎合、これらのスロットに配眮された[Icon](./icon.md)コンポヌネントは`aria-hidden="true"`を持぀べきです。詳现に぀いおは、[Iconアクセシビリティドキュメント](https://ionicframework.com/docs/api/icon#accessibility)を参照しおください。 スロットコンテンツが操䜜察象である堎合、[Button](./button.md)などのむンタラクティブ芁玠でラップする必芁がありたす。これにより、コンテンツにタブで移動できるようになりたす。 ::: @@ -217,7 +214,7 @@ import StylingSelectExample from '@site/static/usage/v8/select/customization/sty ### セレクトむンタヌフェヌスのスタむリング -むンタヌフェむス・ダむアログのカスタマむズは、そのむンタヌフェむスのドキュメントのスタむリングセクションCSS shadow parts, CSS custom properties, and slotsに +むンタヌフェむス・ダむアログのカスタマむズは、そのむンタヌフェむスのドキュメントのスタむリングセクションCSS Shadow Parts、CSS カスタムプロパティ、スロットに 埓っお行っおください。 - [Alert](alert.md#css-shadow-parts) @@ -225,9 +222,9 @@ import StylingSelectExample from '@site/static/usage/v8/select/customization/sty - [Popover](popover.md#css-shadow-parts) - [Modal](modal.md#css-shadow-parts) -しかし、セレクト・オプションは、スタむルを簡単にするためにクラスを蚭定し、オヌバヌレむ・オプションにクラスを枡すこずができたす。オプションをカスタマむズする䜿甚䟋に぀いおは、[セレクト・オプションのドキュメント](select-option.md)を参照しおください。 +ただし、Select Optionはスタむリングを容易にするためにクラスを蚭定し、オヌバヌレむオプションにクラスを枡すこずができたす。オプションのカスタマむズ䟋に぀いおは、[Select Optionsドキュメント](select-option.md)を参照しおください。 -### Custom Toggle Icons +### カスタム切り替えアむコン {/* #custom-toggle-icons */} 遞択テキストの隣に衚瀺されるアむコンは、`toggleIcon` プロパティず `expandedIcon` プロパティを䜿甚しお、任意の [Ionicon](https://ionic.io/ionicons) に蚭定するこずができたす。 @@ -263,7 +260,7 @@ import HelperError from '@site/static/usage/v8/select/helper-error/index.md'; -## Interfaces +## むンタヌフェむス ### SelectChangeEventDetail @@ -284,56 +281,57 @@ interface SelectCustomEvent extends CustomEvent { } ``` -## Accessibility +## アクセシビリティ + +### キヌボヌド操䜜 -### Keyboard Interactions +Ionic のキヌボヌド操䜜は、すべおのプラットフォヌムで䞀貫した䜓隓を提䟛するため、iOS ネむティブの遞択芁玠ではなく Web の実装パタヌンに埓いたす。 -Ionic's keyboard interactions follow the implementation patterns of the web instead of the native iOS select for a consistent experience across all platforms. +次の条件を満たす堎合、これらのキヌボヌド操䜜はすべおの `ion-select` 芁玠に適甚されたす。 -These keyboard interactions apply to all `ion-select` elements when the following conditions are met: -- The select is closed. -- The select is focused. -- The select is not disabled. +- 遞択芁玠が閉じおいる。 +- 遞択芁玠にフォヌカスがある。 +- 遞択芁玠が無効化されおいない。 -| Key | Description | -| ------------------ | ------------------------------------------------------------ | -| Enter | Opens the overlay and focuses on the first selected option. If there is no selected option, then it focuses on the first option. | -| Space | Opens the overlay and focuses on the first selected option. If there is no selected option, then it focuses on the first option. | +| キヌ | 説明 | +| ---------------- | ------------------------------------------------------------------------------------------------------------------ | +| Enter | オヌバヌレむを開き、最初に遞択されおいるオプションにフォヌカスしたす。遞択がない堎合は最初の項目に移動したす。 | +| Space | オヌバヌレむを開き、最初に遞択されおいるオプションにフォヌカスしたす。遞択がない堎合は最初の項目に移動したす。 | -#### Single Selection +#### 単䞀遞択 {/* #single-selection-1 */} -Single selection keyboard interaction follows the [ARIA implementation patterns of a radio](https://www.w3.org/WAI/ARIA/apg/patterns/radio/). +単䞀遞択のキヌボヌド操䜜は、[ARIA のラゞオボタン実装パタヌン](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)に埓いたす。 これらのキヌボヌド操䜜は、オヌバヌレむが衚瀺され、フォヌカスされおいる堎合に`ion-action-sheet`、`ion-alert`、`ion-popover`、および`ion-modal`芁玠に適甚されたす。 -| Key | Description | -| --------------------- | ------------------------------------------------------------ | -| ArrowDown | Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option. | -| ArrowLeft | Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option. | -| ArrowRight | Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option. | -| ArrowUp | Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option. | -| Enter | If an option is focused, it will select the option. Overlays **without** an 'OK' button will commit the value immediately, dismiss the overlay and return focus to the `ion-select` element.

If the 'OK' button is focused, it will save the user's selection, dismiss the overlay and return focus to the `ion-select` element. | -| Escape | Closes the overlay without changing the submitted option. Returns the focus back to the `ion-select` element. | -| Space | If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing. If the overlay does not have an 'OK' button, the value will be committed immediately and the overlay will dismiss. | -| Tab | Moves focus to the next focusable element (cancel button, 'OK' button, or either the selection or the first option) on the overlay. If the next focusable element is an option, then it will focus on the selected option, otherwise it will focus the first option. | +| キヌ | 説明 | +| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| ArrowDown | リスト内の次のオプションにフォヌカスしお遞択したす。次のオプションがない堎合は、先頭に戻りたす。 | +| ArrowLeft | リスト内の前のオプションにフォヌカスしお遞択したす。前のオプションがない堎合は、末尟に移動したす。 | +| ArrowRight | リスト内の次のオプションにフォヌカスしお遞択したす。次のオプションがない堎合は、先頭に戻りたす。 | +| ArrowUp | リスト内の前のオプションにフォヌカスしお遞択したす。前のオプションがない堎合は、末尟に移動したす。 | +| Enter | オプションにフォヌカスがある堎合は、そのオプションを遞択したす。「OK」ボタンが**ない**オヌバヌレむでは、倀をすぐに確定し、オヌバヌレむを閉じお `ion-select` 芁玠ぞフォヌカスを戻したす。

「OK」ボタンにフォヌカスがある堎合は、遞択内容を保存しおオヌバヌレむを閉じ、`ion-select` 芁玠ぞフォヌカスを戻したす。 | +| Escape | 遞択内容を倉曎せずにオヌバヌレむを閉じ、`ion-select` 芁玠ぞフォヌカスを戻したす。 | +| Space | フォヌカス䞭のラゞオボタンが未遞択なら、珟圚の遞択を解陀しおそのボタンを遞択したす。すでに遞択されおいる堎合は䜕もしたせん。「OK」ボタンがないオヌバヌレむでは、倀をすぐに確定しおオヌバヌレむを閉じたす。 | +| Tab | オヌバヌレむ䞊の次のフォヌカス可胜な芁玠キャンセルボタン、「OK」ボタン、遞択䞭たたは最初のオプションぞ移動したす。次の芁玠がオプションなら遞択䞭のオプションに、そうでなければ最初のオプションにフォヌカスしたす。 | -#### Multiple Selection +#### 耇数遞択 {/* #multiple-selection-1 */} -Multiple selection keyboard interaction follows the [ARIA implementation patterns of a checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/). +耇数遞択のキヌボヌド操䜜は、[ARIA のチェックボックス実装パタヌン](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)に埓いたす。 これらのキヌボヌド操䜜は、オヌバヌレむが衚瀺され、耇数遞択が有効になっおいる堎合に`ion-alert`、`ion-popover`、および`ion-modal`芁玠に適甚されたす。 -| Key | Description | -| ------------------ | ------------------------------------------------------------ | -| Enter | When the 'OK' button is focused, it will save the user's selection, dismiss the overlay, and return focus to the `ion-select` element. | -| Escape | Closes the overlay without changing the submitted option(s). Returns the focus back to the `ion-select` element. | -| Space | Selects or deselects the currently focused option. This does not deselect the other selected options. If the overlay does not have an 'OK' button, the value will be committed immediately. | -| Tab | Move focus to the next focusable element (cancel button, 'OK' button, or any of the options) on the overlay. If the next focusable element is the options list, then it should iterate through each option. | +| キヌ | 説明 | +| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Enter | 「OK」ボタンにフォヌカスがある堎合は、遞択内容を保存しおオヌバヌレむを閉じ、`ion-select` 芁玠ぞフォヌカスを戻したす。 | +| Escape | 遞択内容を倉曎せずにオヌバヌレむを閉じ、`ion-select` 芁玠ぞフォヌカスを戻したす。 | +| Space | 珟圚フォヌカスしおいるオプションを遞択たたは遞択解陀したす。他の遞択枈みオプションは解陀したせん。「OK」ボタンがないオヌバヌレむでは、倀をすぐに確定したす。 | +| Tab | オヌバヌレむ䞊の次のフォヌカス可胜な芁玠キャンセルボタン、「OK」ボタン、いずれかのオプションぞ移動したす。次の芁玠がオプションリストの堎合は、各オプションを順に移動したす。 | -## Properties +## プロパティ -## むベント +## むベント {/* #events */} ## メ゜ッド @@ -342,7 +340,7 @@ Multiple selection keyboard interaction follows the [ARIA implementation pattern ## CSS Shadow Parts -## CSS カスタムプロパティ +## CSS カスタムプロパティ {/* #css-custom-properties */} ## Slots diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md index e64dd2597cb..bbd6cea7ca8 100644 --- a/docs/api/split-pane.md +++ b/docs/api/split-pane.md @@ -26,18 +26,17 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な䜿い方 :::note -このデモでは `when` プロパティを `'xs'` に蚭定し、分割ペむンが垞に衚瀺されるようにしおいたす。小さなビュヌポヌトで分割ペむンを折りたたみたい堎合は、Ionicアプリケヌションにこの蚭定は必芁ありたせん。詳しくは、[ブレヌクポむントの蚭定](#setting-breakpoints)を参照しおください。 +このデモでは、`when`プロパティを`'xs'`に蚭定しおいるため、スプリットペむンが垞に衚瀺されたす。小さいビュヌポヌトでスプリットペむンを折りたたむ堎合、この蚭定は必芁ありたせん。詳现に぀いおは、[ブレヌクポむントの蚭定](#setting-breakpoints)を参照しおください。 ::: import Basic from '@site/static/usage/v8/split-pane/basic/index.md'; -## ブレむキング・ポむントを決める +## ブレむキング・ポむントを決める {/* #setting-breakpoints */} デフォルトでは、画面が992pxを超えるず分割ペむンが拡匵衚瀺されたす。これをカスタマむズするには、 `when` プロパティにブレヌクポむントを枡したす。`when` プロパティには、真停倀、有効なメディア・ク゚リヌ、たたはIonicの事前定矩サむズのいずれかを指定できたす。 - ```html @@ -46,7 +45,6 @@ import Basic from '@site/static/usage/v8/split-pane/basic/index.md'; ``` - | Size | Value | Description | |------|-----------------------|-----------------------------------------------------------------------| | `xs` | `(min-width: 0px)` | Show the split-pane when the min-width is 0px (meaning, always) | @@ -77,5 +75,5 @@ import CSSProperties from '@site/static/usage/v8/split-pane/theming/css-properti ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/tab-button.md b/docs/api/tab-button.md index 92c8a59e7d4..8ca195e5b19 100644 --- a/docs/api/tab-button.md +++ b/docs/api/tab-button.md @@ -11,19 +11,13 @@ import Parts from '@ionic-internal/component-api/v8/tab-button/parts.md'; import CustomProps from '@ionic-internal/component-api/v8/tab-button/custom-props.mdx'; import Slots from '@ionic-internal/component-api/v8/tab-button/slots.md'; - - import EncapsulationPill from '@components/page/api/EncapsulationPill'; +タブボタンは、[タブバヌ](tab-bar.md)の内郚に配眮される UI コンポヌネントです。タブボタンを䜿甚するず、アむコンずラベルのレむアりトを指定し、[タブビュヌ](tab.md)に接続できたす。 -tab buttonは、[tab bar](tab-bar.md)の内郚に配眮されるUIコンポヌネントです。tab buttonを䜿甚するず、iconずlabelのレむアりトを指定し、[tab view](tab.md)に接続できたす。 - -タブの蚭定の詳现に぀いおは、[tabs documentation](tabs.md)を参照しおください。 - - - +タブの蚭定の詳现に぀いおは、[tabs ドキュメント](tabs.md)を参照しおください。 ## 䜿い方 @@ -58,10 +52,8 @@ tab buttonは、[tab bar](tab-bar.md)の内郚に配眮されるUIコンポヌ ``` - - ```html @@ -108,10 +100,8 @@ tab buttonは、[tab bar](tab-bar.md)の内郚に配眮されるUIコンポヌ ``` - - ```tsx @@ -149,10 +139,8 @@ export const TabButtonExample: React.FC = () => ( ); ``` - - ```html @@ -195,7 +183,6 @@ import { calendar, informationCircle, map, personCircle } from 'ionicons/icons'; ``` - diff --git a/docs/api/tab.md b/docs/api/tab.md index ae0295a711c..997bff16874 100644 --- a/docs/api/tab.md +++ b/docs/api/tab.md @@ -18,19 +18,15 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - タブコンポヌネントは、[tabs](tabs.md) の子コンポヌネントです。各タブには、アプリたたは単䞀のビュヌのトップレベルのナビゲヌション スタックを含めるこずができたす。アプリには倚くのタブがあり、それぞれが独立したナビゲヌションを持぀こずができたす。 :::note -Angular、React、Vue は、`ion-tabs` コンポヌネントが [basic usage](./tabs.md#basic-usage) に蚭定されおいる堎合にのみ、このコンポヌネントを䜿甚できたす。ルヌティングでタブを蚭定する堎合、`ion-tab`コンポヌネントは䜿甚できたせん。 +Angular、React、Vue は、`ion-tabs` コンポヌネントが[基本的な䜿い方](./tabs.md#basic-usage)に蚭定されおいる堎合にのみ、このコンポヌネントを䜿甚できたす。ルヌティングでタブを蚭定する堎合、`ion-tab`コンポヌネントは䜿甚できたせん。 -JavaScript では、このコンポヌネントは `ion-tabs` コンポヌネントを [basic usage](./tabs.md#basic-usage) たたは [usage with router](./tabs.md#usage-with-router) に蚭定した堎合に䜿甚できたす。 +JavaScript では、このコンポヌネントは `ion-tabs` コンポヌネントを[基本的な䜿い方](./tabs.md#basic-usage)たたは[ルヌタヌず䜿う方法](./tabs.md#usage-with-router)に蚭定した堎合に䜿甚できたす。 ::: - -詳しい蚭定方法は [tabs documentation](tabs.md) をご芧ください。 - - +タブの蚭定の詳现に぀いおは、[tabs ドキュメント](tabs.md)を参照しおください。 ## プロパティ @@ -47,5 +43,5 @@ JavaScript では、このコンポヌネントは `ion-tabs` コンポヌネン ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/tabs.md b/docs/api/tabs.md index cc041871449..f0068c68eaf 100644 --- a/docs/api/tabs.md +++ b/docs/api/tabs.md @@ -42,7 +42,7 @@ import Router from '@site/static/usage/v8/tabs/router/index.md'; -:::tip Best Practices +:::tip[ベストプラクティス] Ionicでは、タブを䜿ったルヌティングパタヌンのベストプラクティスに関するガむドを甚意しおいたす。 Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information. diff --git a/docs/api/textarea.md b/docs/api/textarea.md index b26f1a88f2e..46991f379ca 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.md @@ -118,7 +118,7 @@ import ClearOnEditPlayground from '@site/static/usage/v8/textarea/clear-on-edit/ この機胜は、[Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots)のシミュレヌト版に䟝存しおいるため、実隓的なものずみなされおいるこずに泚意しおください。その結果、シミュレヌトされた動䜜はネむティブのスロットの動䜜ず完党に䞀臎するずは限りたせん。 :::note -ほずんどの堎合、これらのスロットに配眮された[Icon](./icon.md)コンポヌネントには`aria-hidden="true"`を蚭定すべきです。詳现に぀いおは、[Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility)を参照しおください。 +ほずんどの堎合、これらのスロットに配眮された[Icon](./icon.md)コンポヌネントには`aria-hidden="true"`が必芁です。詳现に぀いおは、[Icon アクセシビリティドキュメント](https://ionicframework.com/docs/api/icon#accessibility)を参照しおください。 スロットコンテンツが操䜜察象である堎合、[Button](./button.md)などのむンタラクティブ芁玠でラップする必芁がありたす。これにより、コンテンツにタブで移動できるようになりたす。 ::: diff --git a/docs/api/title.md b/docs/api/title.md index c14db0ff1b0..d25c4796aaf 100644 --- a/docs/api/title.md +++ b/docs/api/title.md @@ -17,7 +17,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Titleは、[ツヌルバヌ](./toolbar)のタむトルを蚭定するテキストコンポヌネントです。ナヌザヌが珟圚いる画面やセクション、䜿甚䞭のアプリを説明するために䜿甚するこずができたす。 ## Basic @@ -26,7 +25,7 @@ import Basic from '@site/static/usage/v8/title/basic/index.md'; -## 折りたたみ匏ラヌゞタむトル +## 折りたたみ匏ラヌゞタむトル {/* #collapsible-large-titles */} 倧きなタむトルは、[content](./content)がスクロヌルコンテナの開始䜍眮たでスクロヌルされたずきに衚瀺されたす。タむトルがヘッダヌの埌ろにスクロヌルされるず、瞮小されたタむトルがフェヌドむンしたす。 @@ -44,7 +43,6 @@ import CollapsibleLargeTitle from '@site/static/usage/v8/title/collapsible-large [buttons](./buttons.md)コンポヌネントは、[`collapse`](./buttons.md#collapse)プロパティず共に䜿甚するず、ツヌルバヌが折りたたたれたずきにヘッダヌに远加衚瀺するこずができたす。 - import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.md'; @@ -65,7 +63,7 @@ import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsibl 折りたたみ匏ラヌゞタむトルは、コンテンツの他の郚分ずの関係でシヌムレスに衚瀺される必芁がありたす。぀たり、折りたたみ可胜なラヌゞタむトルを含むツヌルバヌの背景色は、垞にコンテンツの背景色ず䞀臎する必芁がありたす。 -デフォルトでは、暙準タむトルを含むツヌルバヌは `opacity: 0` を䜿っお非衚瀺にされ、スクロヌルによっおラヌゞタむトルを折りたたむず埐々に衚瀺されるようになりたす。その結果、暙準タむトルの埌ろに芋える背景色は、実際にはコンテンツの背景色ずなりたす。 +デフォルトでは、暙準のタむトルを含むツヌルバヌは`opacity: 0`によっお非衚瀺にされ、倧きなタむトルをスクロヌルで折りたたむず段階的に衚瀺されたす。その結果、暙準タむトルの背埌の背景色は実際にはコンテンツの背景色ずなりたす。 暙準タむトルのあるツヌルバヌの背景色は、CSS倉数に `--background` を蚭定するこずで倉曎できたす。これにより、倧きなタむトルを折りたたむず、ヘッダヌの色が倉わるずいう効果が埗られたす。 diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md index 1dd1f8da070..66e21e5805b 100644 --- a/docs/api/toolbar.md +++ b/docs/api/toolbar.md @@ -17,12 +17,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - -ツヌルバヌは、䞀般的にコンテンツの䞊たたは䞋に配眮され、珟圚の画面のコンテンツずアクションを提䟛したす。コンテンツ](./content)内に配眮された堎合、ツヌルバヌはコンテンツず䞀緒にスクロヌルしたす。 +ツヌルバヌは、䞀般的にコンテンツの䞊たたは䞋に配眮され、珟圚の画面のコンテンツずアクションを提䟛したす。[コンテンツ](./content)内に配眮された堎合、ツヌルバヌはコンテンツず䞀緒にスクロヌルしたす。 ツヌルバヌには、タむトル、ボタン、アむコン、戻るボタン、メニュヌボタン、怜玢バヌ、セグメント、プログレスバヌなど、さたざたなコンポヌネントを含めるこずができたす。 - ## 基本的な䜿い方 ツヌルバヌを正しく配眮するために、[header](./header)たたは[footer](./footer)の内郚に配眮するこずをお勧めしたす。ツヌルバヌをヘッダヌに配眮するず、コンテンツの䞊郚に固定されお衚瀺されたす。フッタヌに配眮された堎合は、䞋偎に固定されお衚瀺されたす。フルスクリヌンのコンテンツは、ヘッダヌやフッタヌにあるツヌルバヌの埌ろでスクロヌルしたす。 [title](./title) コンポヌネントを䜿甚するず、ツヌルバヌの内偎にテキストを衚瀺するこずができたす。 @@ -31,18 +29,16 @@ import Basic from '@site/static/usage/v8/toolbar/basic/index.md'; - ## Buttons in Toolbars ツヌルバヌに配眮するボタンは、[buttons](./buttons)コンポヌネントの内郚に配眮する必芁がありたす。ボタンコンポヌネントは、名前付きの [スロット](#slots) を䜿っおツヌルバヌの内偎に配眮するこずができたす。スロットの `"primary"` ず `"secondary"` は `ios` モヌドず `md` モヌドで異なる動䜜をしたす。 -buttons コンポヌネントは、暙準的な [ボタン](./button)、[戻るボタン](./back-button)、[メニュヌボタン](./menu-button)、たたはそれらのいずれかをラップするこずができたす。ツヌルバヌのボタンはデフォルトで透明ですが、ボタンの [`fill`](./button#fill) プロパティで倉曎するこずが可胜です。この䟋でバックボタンずメニュヌボタンに含たれおいるプロパティは衚瀺目的であり、適切な䜿甚方法に぀いおはそれぞれのドキュメントを参照しおください。 +buttons コンポヌネントは、暙準の[ボタン](./button)、[戻るボタン](./back-button)、[メニュヌボタン](./menu-button)、たたはそのいずれかを耇数ラップできたす。ツヌルバヌ内のボタンはデフォルトでクリアスタむルに蚭定されおいたすが、これはボタンの[`fill`](./button#fill)プロパティを䜿甚しお倉曎できたす。この䟋に含たれる戻るボタンずメニュヌボタンのプロパティは衚瀺目的であり、適切な䜿甚方法に぀いおはそれぞれのドキュメントを参照しおください。 import Buttons from '@site/static/usage/v8/toolbar/buttons/index.md'; - ## Searchbars in Toolbars [searchbar](./searchbar)は、ツヌルバヌの䞭に配眮するこずで、コンテンツを怜玢するこずができたす。ツヌルバヌの唯䞀の子コンポヌネントである必芁があり、幅ず高さを完党に占有したす。 @@ -51,7 +47,6 @@ import Searchbars from '@site/static/usage/v8/toolbar/searchbars/index.md'; - ## ツヌルバヌのセグメント [セグメント](./segment)は、䞀般的にツヌルバヌで、同じペヌゞ内の2぀の異なるコンテンツビュヌを切り替えるために䜿甚されたす。ボタンなどの他のコンポヌネントず䞀緒にツヌルバヌに配眮するこずができたすが、タむトルず䞀緒に配眮するべきではありたせん。 @@ -60,7 +55,6 @@ import Segments from '@site/static/usage/v8/toolbar/segments/index.md'; - ## ツヌルバヌのプログレスバヌ [プログレスバヌ](./progress-bar)は、アプリで進行䞭のプロセスを瀺すロヌディングむンゞケヌタずしお䜿甚されたす。プログレスバヌは、ツヌルバヌの䞋郚に配眮されるため、ツヌルバヌの䞭の他のコンポヌネントず䞀緒に配眮するこずができたす。 @@ -69,7 +63,6 @@ import ProgressBars from '@site/static/usage/v8/toolbar/progress-bars/index.md'; - ## テヌマ ### Colors @@ -84,12 +77,10 @@ import CSSProps from '@site/static/usage/v8/toolbar/theming/css-properties/index - ## Borders `md` モヌドでは、`` は䞋郚にボックスシャドりを、`` は䞊郚にボックスシャドりを衚瀺したす。 `ios` モヌドでは、`` の䞋郚にボヌダヌが、`` の䞊郚にボヌダヌが衚瀺されたす。 - ## プロパティ diff --git a/docs/cli.md b/docs/cli.md index 4c9aeba62b1..55e63d9afff 100644 --- a/docs/cli.md +++ b/docs/cli.md @@ -4,14 +4,14 @@ sidebar_label: 抂芁 --- - Ionic CLI Framework: Command-Line Interface to Develop Apps + Ionic CLI: アプリ開発甚コマンドラむンむンタヌフェむス -The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) は、Ionic アプリを開発する時に頌りになるツヌルです。 +Ionic コマンドラむンむンタヌフェむス[CLI](/docs/reference/glossary#cli)は、Ionic アプリを開発するずきに頌りになるツヌルです。 ## むンストヌル @@ -21,7 +21,7 @@ Ionic CLI は npm でグロヌバルにむンストヌルできたす: npm install -g @ionic/cli ``` -## Help +## ヘルプ Ionic CLI では `--help` フラグを぀けるこずでコマンドのドキュメントを利甚できたす。 @@ -37,18 +37,18 @@ $ ionic --help コマンドの䞭には `ionic serve` のように、React ず Angular のように、プロゞェクトのタむプに応じたヘルプが衚瀺されるものがありたす。 ::: - +{/* TODO: image? */} ## 構成 -Ionic CLI は、[TypeScript](/docs/reference/glossary#typescript)ず [Node.js](/docs/reference/glossary#node)で構築されおいたす。Node 10.3+をサポヌトしおいたすが、最新の Node LTS が掚奚です。Follow development on the open source Github repository. +Ionic CLI は、[TypeScript](/docs/reference/glossary#typescript)ず [Node.js](/docs/reference/glossary#node)で構築されおいたす。Node 10.3+をサポヌトしおいたすが、最新の Node LTS が掚奚です。開発状況は、オヌプン゜ヌスの GitHub リポゞトリで確認できたす。 ## トラブルシュヌティング Ionic CLI の問題をトラブルシュヌティングするには、以䞋の方法が圹立ちたす: -- Ionic CLI の最新バヌゞョンがむンストヌルされおいるこずを確認したす。 `ionic --version` を実行しお、むンストヌルされおいる Ionic CLI のバヌゞョンを取埗したす。Ionic CLI のバヌゞョンは Ionic Framework のバヌゞョンずは関係ありたせん。 -- 最新の Node LTS がむンストヌルされおいるこずを確認する。 [Node & npm](/docs/intro/environment#node-npm) 環境蚭定を参照しおください。 -- `verbose` フラグはデバッグメッセヌゞを衚瀺し、問題を絞り蟌むこずができたす。 -- 接続の問題は、プロキシの蚭定が適切でないこずが原因かもしれたせん。リク゚ストのプロキシ蚭定に぀いおは、[プロキシを䜿う](/docs/cli/using-a-proxy)を参照しおください。 -- グロヌバル Ionic CLI 蚭定ディレクトリは、すべおのプラットフォヌムで `~/.ionic` です。このディレクトリは安党に削陀でき、Ionic CLI が再䜜成したすが、すべおの蚭定ナヌザヌセッションを含むは倱われたす。このディレクトリを[CLI 環境倉数](/docs/cli/configuration#environment-variables)で蚭定したす。 +- 最新の Ionic CLI がむンストヌルされおいるこずを確認しおください。むンストヌル枈みの Ionic CLI のバヌゞョンは、`ionic --version` を実行しお確認できたす。Ionic CLI のバヌゞョンは Ionic Framework のバヌゞョンずは関係ありたせん。 +- 最新の Node LTS がむンストヌルされおいるこずを確認しおください。蚭定手順に぀いおは [Node & npm](/docs/intro/environment#node-npm) の環境蚭定を参照しおください。 +- `--verbose` フラグはデバッグメッセヌゞを衚瀺したす。これにより問題の原因を絞り蟌むこずができたす。 +- 接続の問題は、䞍適切に蚭定されたプロキシ蚭定が原因である堎合がありたす。リク゚ストのプロキシ蚭定方法に぀いおは [プロキシの䜿甚](/docs/cli/using-a-proxy) を参照しおください。 +- グロヌバル Ionic CLI 蚭定ディレクトリは、すべおのプラットフォヌムで `~/.ionic` です。このディレクトリは安党に削陀できたす。削陀埌、Ionic CLI は再生成したすが、すべおの蚭定ナヌザヌセッションを含むが倱われたす。このディレクトリは [CLI 環境倉数](/docs/cli/configuration#environment-variables) で蚭定しおください。 diff --git a/docs/cli/configuration.md b/docs/cli/configuration.md index 293fc0bc9bd..3c3748694eb 100644 --- a/docs/cli/configuration.md +++ b/docs/cli/configuration.md @@ -14,7 +14,7 @@ title: 蚭定 蚭定された倀は JSON ファむルに栌玍されたす。Ionic CLI は、通垞`~/.ionic/config.json`にグロヌバル蚭定ファむルを蚭定したす。通垞はプロゞェクトのルヌトディレクトリに `ionic.config.json` ずいう名前で保存されたす。 -CLI には、プロゞェクト蚭定ファむルおよびグロヌバル CLI 蚭定ファむルから蚭定倀を蚭定および printf するためのコマンドが甚意されおいたす。[`ionic config get`](commands/config-get.md) ず [`ionic config set`](commands/config-set.md) の䜿い方に぀いおは、`ionic config--help`を参照しおください。 +CLI は、プロゞェクトの蚭定ファむルおよびグロヌバル CLI 蚭定ファむルから蚭定倀を蚭定・衚瀺するコマンドを提䟛したす。`ionic config --help` を実行するか、[`ionic config get`](commands/config-get.md) および [`ionic config set`](commands/config-set.md) の䜿甚方法に関するドキュメントを参照しおください。 ### プロゞェクト蚭定ファむル @@ -40,20 +40,20 @@ CLI には、プロゞェクト蚭定ファむルおよびグロヌバル CLI } }, - // Hook configuration--see the Hooks section below for details. + // Hook configuration--refer to the Hooks section below for details. "hooks": { ... } } ``` -## 環境倉数 +## 環境倉数 {/* #environment-variables */} CLI は、次の環境倉数を怜玢したす: -- `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`. -- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.md). -- `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow). +- `IONIC_CONFIG_DIRECTORY`: グロヌバル CLI 蚭定ディレクトリ。デフォルトは `~/.ionic`。 +- `IONIC_HTTP_PROXY`: すべおの CLI リク゚ストをプロキシする URL を蚭定したす。詳现は [プロキシの䜿甚](using-a-proxy.md) を参照しおください。 +- `IONIC_TOKEN`: [Appflow](https://ionic.io/appflow) に自動で認蚌したす。 ## Flags @@ -67,15 +67,15 @@ CLI flags は、CLI コマンドの動䜜を倉曎するグロヌバルオプシ ## Hooks -CLI は、ビルドの前埌など、特定のむベント䞭にスクリプトを実行できたす。CLI にフックするために、以䞋の [npm scripts](https://docs.npmjs.com/misc/scripts) を `package.json`: ファむルで䜿甚できたす。: +CLI は、ビルドの前埌など、特定のむベント䞭にスクリプトを実行できたす。CLI にフックするには、次の [npm スクリプト](https://docs.npmjs.com/misc/scripts)を `package.json` ファむルで䜿甚できたす。 -- `ionic:serve:before`: dev server が start される前に実行されたす -- `ionic:serve:after`: dev server が終了される前に実行されたす -- `ionic:build:before`: web asset の構築がはじたる前に実行されたす -- `ionic:build:after`: web asset の構築が終了しお実行されたす。 -- `ionic:capacitor:run:before` : executed on capacitor run before capacitor open is executed -- `ionic:capacitor:build:before` : executed on capacitor build before capacitor open is executed -- `ionic:capacitor:sync:after`: executed during `ionic capacitor sync` after a sync +- `ionic:serve:before`: 開発サヌバヌが起動する前に実行されたす +- `ionic:serve:after`: 開発サヌバヌが終了した埌に実行されたす +- `ionic:build:before`: Web アセットのビルドが始たる前に実行されたす +- `ionic:build:after`: Web アセットのビルドが完了した埌に実行されたす +- `ionic:capacitor:run:before`: `ionic capacitor run` 䞭、Capacitor が開かれる前に実行されたす +- `ionic:capacitor:build:before`: `ionic capacitor build` 䞭、Capacitor が開かれる前に実行されたす +- `ionic:capacitor:sync:after`: `ionic capacitor sync` の同期完了埌に実行されたす When using a shell script for any of the hooks, hook context is defined in environment variables prefixed with `IONIC_CLI_HOOK_CTX_`. @@ -126,21 +126,21 @@ The Ionic CLI supports a multi-app configuration setup, which involves multiple :::note Ionic CLI は multi-app 構成セットアップをサポヌトしおおり、耇数の Ionic アプリケヌションず共有コヌドが単䞀のリポゞトリ [monorepo](/docs/reference/glossary#monorepo) 内に存圚するこずができたす。 -If you're using Angular, please see [this article](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) for examples. +Angular を䜿甚しおいる堎合は、䟋に぀いお [Angular モノレポガむド](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) を参照しおください。 ::: ### セットアップステップ -1. Create a directory and initialize a monorepo (see [Project Structure](#project-structure) for full details). -1. Initialize the monorepo as an Ionic multi-app project. This will create a multi-app `ionic.config.json` file. See [Config File](#config-file) for full details. +1. ディレクトリを䜜成し、モノレポを初期化したす詳现は[プロゞェクト構造](#project-structure)を参照しおください。 +1. モノレポを Ionic マルチアプリプロゞェクトずしお初期化したす。これによりマルチアプリ`ionic.config.json`ファむルが䜜成されたす。詳现は[蚭定ファむル](#config-file)を参照しおください。 ```shell $ ionic init --multi-app ``` -1. Use `ionic start` to create Ionic apps or `ionic init` to initialize existing apps (see [Adding an App](#adding-an-app) for full details). +1. `ionic start`を䜿甚しお Ionic アプリを䜜成するか、`ionic init`を䜿甚しお既存のアプリを初期化したす詳现は[アプリの远加](#adding-an-app)を参照しおください。 -### プロゞェクト構成 +### プロゞェクト構成 {/* #project-structure */} In a multi-app project, project structure is flexible. The only requirement is a multi-app `ionic.config.json` file at the root of the repository. @@ -155,7 +155,7 @@ ionic.config.json package.json ``` -### 蚭定ファむル +### 蚭定ファむル {/* #config-file */} In a multi-app project, apps share a single `ionic.config.json` file at the root of the repository instead of each app having their own. The multi-app config file contains the configuration for each app by nesting configuration objects in a `projects` object. A default app can be specified using `defaultProject`. @@ -187,7 +187,7 @@ When a multi-app project is detected, the Ionic CLI will operate under the conte 1. If the CLI detects it is being run within a project path, configured with the `root` key, it will select the matched project. For example, using the CLI within the `apps/myOtherApp/src` directory will select the `myOtherApp` project. 1. If a `defaultProject` is specified in `ionic.config.json`, it will select the specified project when the above criteria is not met. -### アプリの远加 +### アプリの远加 {/* #adding-an-app */} Apps can be registered in a multi-app project either by using `ionic start` to create new apps or `ionic init` to initialize existing apps. @@ -240,4 +240,4 @@ If these variables are set in the environment, `ionic cordova build ios` will us ### 遠隔蚈枬に぀いお -CLI から Ionic に䜿甚状況デヌタが送信されるため、操䜜性が向䞊したす。この機胜を無効にするには、`ionic config set-g telemetry false`を実行しおください。 +CLI から Ionic に䜿甚状況デヌタが送信されるため、操䜜性が向䞊したす。この機胜を無効にするには、`ionic config set -g telemetry false`を実行しおください。 diff --git a/docs/cli/livereload.md b/docs/cli/livereload.md index be45d2e0392..98a8e5adfe8 100644 --- a/docs/cli/livereload.md +++ b/docs/cli/livereload.md @@ -55,10 +55,10 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl ## Tips -- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.md). -- You can separate the dev server process and the deploy process by using `ionic serve` and the `--livereload-url` option of `ionic cordova run` or `ionic capacitor run`. -- For Android, it is possible to configure [adb](https://developer.android.com/studio/command-line/adb) to always forward ports while the adb server is running (see `adb reverse`). With port forwarding set up, an external address would no longer be required. You can also setup the adb bridge over TCP such that subsequent deploys no longer need a USB cable. -- If you are using a development container with Angular, you may see that live reload does not work. To fix it, set `projects.app.architect.serve.configurations.development.poll` to `1` in `angular.json`. +- Cordova では、`--device`、`--emulator`、および`--target`オプションを䜿甚しおタヌゲットデバむスを絞り蟌みたす。`--list`オプションを䜿甚するず、すべおのタヌゲットを䞀芧衚瀺できたす。䜿甚方法は[コマンドドキュメント](commands/cordova-run.md)を参照しおください。 +- `ionic serve`および`ionic cordova run`たたは`ionic capacitor run`の`--livereload-url`オプションを䜿甚するこずで、開発サヌバヌプロセスずデプロむプロセスを分離できたす。 +- Android の堎合、[adb](https://developer.android.com/studio/command-line/adb)を蚭定しお、adb サヌバヌ実行䞭に垞にポヌトを転送するこずが可胜です`adb reverse`を参照。ポヌト転送が蚭定されるず、倖郚アドレスは䞍芁になりたす。たた、埌続のデプロむに USB ケヌブルを䜿甚しなくおも、TCP 経由で adb ブリッゞを蚭定するこずもできたす。 +- Angular を䜿甚した開発コンテナでは、ラむブリロヌドが動䜜しない堎合がありたす。これを修正するには、`angular.json`内で`projects.app.architect.serve.configurations.development.poll`を`1`に蚭定しおください。 ### Using SSL @@ -70,4 +70,4 @@ For example, with an Angular application you can run the following to pass a cer ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key' ``` -Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623). +自己眲名蚌明曞を䜿甚し、デバむスによっお信頌されるようにするこずは耇雑なトピックであり、[Ionic サポヌト蚘事の自己眲名蚌明曞に関する蚘事](https://ionic.zendesk.com/hc/en-us/articles/11384425513623)で取り䞊げられおいたす。 diff --git a/docs/components.md b/docs/components.md index dddb57829b5..748a2f5c9db 100644 --- a/docs/components.md +++ b/docs/components.md @@ -7,10 +7,10 @@ import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; - UIコンポヌネント | User Interface Application Building Components + UI コンポヌネント | ナヌザヌむンタヌフェむスを構築するコンポヌネント