diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index c247a0a6a92..69ef7cea290 100644 --- a/.github/workflows/CI.yml +++ b/.github/workflows/CI.yml @@ -48,6 +48,22 @@ jobs: run: npm run typecheck - name: 🔀 Spell Check run: npm run spellcheck + # Docusaurus derives a heading's anchor from its text, so renaming a + # heading moves the anchor and breaks every inbound link. An explicit id + # survives the rename, and lets a translation keep the English anchor + # after the heading text is translated. + # + # Nothing in Docusaurus enforces this: a page whose headings are all + # unpinned builds clean. So run its own generator and fail if it had + # anything to add. + - name: 🔗 Heading IDs + run: | + npm run heading-ids + if ! git diff --quiet -- docs; then + echo "::error::Headings are missing explicit ids. Run \`npm run heading-ids\` and commit the result." + git diff -- docs + exit 1 + fi - uses: ./.github/workflows/actions/check-translations cross-platform: diff --git a/.prettierignore b/.prettierignore index 90c620a0f43..4df103e36c7 100644 --- a/.prettierignore +++ b/.prettierignore @@ -11,8 +11,6 @@ src/theme/Layout/index.tsx src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx src/theme/prism-include-languages.ts -legacy-stencil-components -scripts/bak # Auto-generated files docs/native diff --git a/cspell.json b/cspell.json index 6a6d214cd18..973127f2e2a 100644 --- a/cspell.json +++ b/cspell.json @@ -10,7 +10,9 @@ "ignoreRegExpList": [ "/(```+)[\\s\\S]+?\\1/g", "`([^`]*)`", - "/:[a-zA-Z0-9-_\\+]+:/g" + "/:[a-zA-Z0-9-_\\+]+:/g", + // Pinned heading ids, as in `## Using isOpen {/* #using-isopen */}`. + "/\\{\\/\\*\\s*#[a-z0-9-]+\\s*\\*\\/\\}/g" ], "ignorePaths": [ "docs/cli", diff --git a/docs/angular/add-to-existing.mdx b/docs/angular/add-to-existing.mdx index 4b958cf5c34..2ef3d723578 100644 --- a/docs/angular/add-to-existing.mdx +++ b/docs/angular/add-to-existing.mdx @@ -22,7 +22,7 @@ This guide uses `.css` file extensions for stylesheets. If you created your Angu ::: -## Setup +## Setup {/* #setup */} :::info @@ -32,7 +32,7 @@ This guide follows the structure of an Angular app created with the Angular CLI. You can add Ionic Angular to your existing Angular project using the Angular CLI's `ng add` feature or by installing it manually. -### Using ng add +### Using ng add {/* #using-ng-add */} The easiest way to add Ionic Angular is to use the Angular CLI's `ng add` feature: @@ -42,17 +42,17 @@ ng add @ionic/angular This will install the `@ionic/angular` package and automatically configure the necessary imports and styles. -### Manual Installation +### Manual Installation {/* #manual-installation */} If you prefer to install Ionic Angular manually, you can follow these steps: -#### 1. Install the Package +#### 1. Install the Package {/* #1-install-the-package */} ```bash npm install @ionic/angular ``` -#### 2. Add Ionic Framework Stylesheets +#### 2. Add Ionic Framework Stylesheets {/* #2-add-ionic-framework-stylesheets */} Replace the existing `styles` array in `angular.json` with the following: @@ -80,7 +80,7 @@ While `core.css` is required, `normalize.css`, `structure.css`, and `typography. ::: -#### 3. Configure Ionic Angular +#### 3. Configure Ionic Angular {/* #3-configure-ionic-angular */} Update `src/app/app.config.ts` to include `provideIonicAngular`: @@ -98,7 +98,7 @@ export const appConfig: ApplicationConfig = { This reflects the Angular 21 and 22 scaffold, which is zoneless by default. If your existing app is on Angular 18 through 20, it still has `provideZoneChangeDetection({ eventCoalescing: true })`; keep that provider and add `provideIonicAngular({})` alongside it. Refer to [Zoneless Change Detection](/angular/zoneless.mdx) for details. -## Using Individual Components +## Using Individual Components {/* #using-individual-components */} After completing the setup above, you can start using Ionic components in your existing Angular app. Here's an example of how to use them: @@ -125,11 +125,11 @@ export class App {} Visit the [components](/components.mdx) page for all of the available Ionic components. -## Using Ionic Pages +## Using Ionic Pages {/* #using-ionic-pages */} If you want to use Ionic pages with full navigation and page transitions, follow these additional setup steps. -#### 1. Add Additional Ionic Framework Stylesheets +#### 1. Add Additional Ionic Framework Stylesheets {/* #1-add-additional-ionic-framework-stylesheets */} Replace the existing `styles` array in `angular.json` with the following: @@ -174,7 +174,7 @@ Replace the existing `styles` array in `angular.json` with the following: These stylesheets set up the overall page structure and provide [CSS utilities](/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/layout/global-stylesheets.mdx). -#### 2. Set up Theming +#### 2. Set up Theming {/* #2-set-up-theming */} Create a `src/theme/variables.css` file with the following content: @@ -193,7 +193,7 @@ Create a `src/theme/variables.css` file with the following content: This file enables [dark mode support](/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables. -#### 3. Update the App Component +#### 3. Update the App Component {/* #3-update-the-app-component */} Update `src/app/app.html` to the following: @@ -218,7 +218,7 @@ import { IonApp, IonRouterOutlet } from '@ionic/angular'; export class App {} ``` -#### 4. Create a Home Page +#### 4. Create a Home Page {/* #4-create-a-home-page */} Start by adding a template at `src/app/home/home.html`: @@ -293,7 +293,7 @@ Finally, add a `src/app/home/home.css` file: } ``` -#### 5. Set up Routing +#### 5. Set up Routing {/* #5-set-up-routing */} Update `src/app/app.routes.ts` to add a `home` route: @@ -316,7 +316,7 @@ export const routes: Routes = [ You're all set! Your Ionic Angular app is now configured with full Ionic page support. Run `ng serve` to start your development server and view your app. -## Next Steps +## Next Steps {/* #next-steps */} Now that you have Ionic Angular integrated into your project, check out: diff --git a/docs/angular/build-options.mdx b/docs/angular/build-options.mdx index ada6153483b..243efaaf45a 100644 --- a/docs/angular/build-options.mdx +++ b/docs/angular/build-options.mdx @@ -7,13 +7,13 @@ Developers have two options for using Ionic components: Standalone or Modules. T The Standalone approach uses modern Angular APIs and is the recommended way to build Ionic applications. The Modules approach, including `IonicModule`, is **deprecated** and will be removed in a future major release. New projects should use the Standalone approach. Existing apps will continue to work but should plan to migrate. Refer to [Migrating from Modules to Standalone](#migrating-from-modules-to-standalone) for migration guidance. -## Standalone +## Standalone {/* #standalone */} :::info Ionic UI components as Angular standalone components is supported starting in Ionic v7.5. ::: -### Overview +### Overview {/* #overview */} 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. @@ -33,7 +33,7 @@ Ionic のスタンドアロンコンポヌネントを利甚するために、Io Ionic ships standalone components from a single entry point (`@ionic/angular`). Bundlers such as Webpack and esbuild cannot split code from a single entry point across separate chunks, so the Ionic components you import are included in the main bundle rather than in the chunk for the route or component where they are used. Unused components are still tree-shaken out of the build. ::: -### Usage with Standalone-based Applications +### Usage with Standalone-based Applications {/* #usage-with-standalone-based-applications */} :::warning All Ionic imports should be imported from the `@ionic/angular` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular/lazy` may pull in lazy loaded Ionic code which can interfere with treeshaking. @@ -200,7 +200,7 @@ Ionic Angular's standalone components use ES Modules. As a result, developers us -### Usage with NgModule-based Applications +### Usage with NgModule-based Applications {/* #usage-with-ngmodule-based-applications */} :::warning All Ionic imports should be imported from the `@ionic/angular` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular/lazy` may pull in lazy loaded Ionic code which can interfere with treeshaking. @@ -363,13 +363,13 @@ Ionic Angular's standalone components use ES Modules. As a result, developers us -## Modules +## Modules {/* #modules */} :::warning[Deprecation Notice] The Modules approach, including `IonicModule`, is **deprecated** and will be removed in a future major release. Existing applications will continue to work during the deprecation period but should migrate using the [Standalone migration guide](#migrating-from-modules-to-standalone). New applications should use the [Standalone](#standalone) approach. ::: -### Overview +### Overview {/* #overview-1 */} Developers can also use the Modules approach by importing `IonicModule` and calling `IonicModule.forRoot()` in the `imports` array in `app.module.ts`. This registers a version of Ionic where Ionic components will be lazily loaded at runtime. @@ -382,7 +382,7 @@ Developers can also use the Modules approach by importing `IonicModule` and call 1. Lazily loading Ionic components means that the compiler does not know which components are needed at build time. This means your final application bundle may be much larger than it needs to be. 2. Developers are unable to use newer Angular features such as [ESBuild](https://angular.io/guide/esbuild). -### Usage +### Usage {/* #usage */} In the example below, we are using `IonicModule` to create a lazily loaded version of Ionic. We can then reference any Ionic component without needing to explicitly import it. @@ -402,7 +402,7 @@ import { AppComponent } from './app.component'; export class AppModule {} ``` -## Migrating from Modules to Standalone +## Migrating from Modules to Standalone {/* #migrating-from-modules-to-standalone */} :::tip Try our automated utility for migrating to standalone! @@ -416,7 +416,7 @@ Migrating to Ionic standalone components must be done all at the same time and c Developers are encouraged to try the [automated migration utility](https://github.com/ionic-team/ionic-angular-standalone-codemods), though they can also follow the steps below if they would like to manually migrate their applications. -### Standalone-based Applications +### Standalone-based Applications {/* #standalone-based-applications */} Follow these steps if your Angular application is already using the standalone architecture, and you want to use Ionic UI components as standalone components too. @@ -539,7 +539,7 @@ export class TestComponent {} } ``` -### NgModule-based Applications +### NgModule-based Applications {/* #ngmodule-based-applications */} Follow these steps if your Angular application is still using the NgModule architecture, but you want to adopt Ionic UI components as standalone components now. diff --git a/docs/angular/injection-tokens.mdx b/docs/angular/injection-tokens.mdx index 2367036ab74..653f5bcadf7 100644 --- a/docs/angular/injection-tokens.mdx +++ b/docs/angular/injection-tokens.mdx @@ -13,7 +13,7 @@ sidebar_label: Injection Tokens Ionic provides Angular injection tokens that allow you to access Ionic elements through Angular's dependency injection system. This provides a more Angular-idiomatic way to interact with Ionic components programmatically. -## Benefits +## Benefits {/* #benefits */} Using injection tokens provides several advantages: @@ -22,13 +22,13 @@ Using injection tokens provides several advantages: - **Simplified Code**: Eliminates the need for `ViewChild` queries or manual element references - **Better Testing**: Easier to mock and test components that use injection tokens -## IonModalToken +## IonModalToken {/* #ionmodaltoken */} The `IonModalToken` injection token allows you to inject a reference to the current modal element directly into your Angular components. This is particularly useful when you need to programmatically control modal behavior, listen to modal events, or access modal properties. Starting in `@ionic/angular` v8.7.0, you can use this injection token to streamline modal interactions in your Angular applications. -### Basic Usage +### Basic Usage {/* #basic-usage */} To use the `IonModalToken`, inject it into your component's constructor: @@ -60,7 +60,7 @@ export class ModalComponent { } ``` -### Listening to Modal Events +### Listening to Modal Events {/* #listening-to-modal-events */} You can use the injected modal reference to listen to modal lifecycle events: @@ -102,7 +102,7 @@ export class ModalComponent implements OnInit { } ``` -### Accessing Modal Properties +### Accessing Modal Properties {/* #accessing-modal-properties */} The injected modal reference provides access to all modal properties and methods: @@ -143,7 +143,7 @@ export class ModalComponent implements OnInit { } ``` -### Opening a Modal with Injection Token Content +### Opening a Modal with Injection Token Content {/* #opening-a-modal-with-injection-token-content */} When opening a modal that uses the injection token, you can pass the component directly to the modal controller: diff --git a/docs/angular/lifecycle.mdx b/docs/angular/lifecycle.mdx index 44d9a3b86ed..634d820ce20 100644 --- a/docs/angular/lifecycle.mdx +++ b/docs/angular/lifecycle.mdx @@ -15,7 +15,7 @@ sidebar_label: ラむフサむクル ![Flowchart illustrating the Ionic page life cycle events and their sequence.](/img/guides/lifecycle/ioniclifecycle.png 'Ionic Lifecycle Diagram') -## Angular のラむフサむクルむベント +## Angular のラむフサむクルむベント {/* #angular-life-cycle-events */} Ionic は Angular が提䟛するラむフサむクルむベントを取り入れおいたす。最もよく䜿う 2 ぀の Angular むベントは次のずおりです。 @@ -36,7 +36,7 @@ On **Angular 18 through 21** this only affects you if you set `OnPush` on those ::: -## Ionic のペヌゞむベント +## Ionic のペヌゞむベント {/* #ionic-page-events */} Angular のラむフサむクルむベントに加えお、Ionic Angular には、䜿甚可胜ないく぀かの远加むベントがありたす: @@ -55,7 +55,7 @@ Angular のラむフサむクルむベントに加えお、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 がペヌゞのラむフサむクルを凊理する仕組み +## Ionic がペヌゞのラむフサむクルを凊理する仕組み {/* #how-ionic-handles-the-life-of-a-page */} Ionic は `` ずいう router outlet を持っおいたす。この outlet が Angular の `` を継承し、さらに拡匵しお、モバむルデバむスのためのより良い䜓隓を可胜にしたした。 @@ -70,7 +70,7 @@ Ionic は `` ずいう router outlet を持っおいたす `ngOnInit` はペヌゞが新しく䜜成されるたびに発火するだけなので、ペヌゞに戻ったずきには発火されたせん。たずえば、タブのむンタフェヌスで各ペヌゞ間を移動しおも、各ペヌゞの `ngOnInit` メ゜ッドは最初の 1 回だけ呌び出され、その埌の衚瀺では呌び出されたせん。`ngOnDestroy` はペヌゞが 「Pop」したずきにのみ発生したす。 -## ルヌトガヌド +## ルヌトガヌド {/* #route-guards */} Ionic 3 では、い぀ペヌゞにアクセスするこずができるか `ionViewCanEnter` ず離脱できるか`ionViewCanLeave`を制埡するのに圹立぀、いく぀かの远加のラむフサむクルメ゜ッドがありたした。これらは、蚱可されおいないナヌザヌからペヌゞを保護したり、ナヌザヌがペヌゞを離れたくないずきにナヌザヌをペヌゞ䞊に保持したりするために䜿甚できたすフォヌム入力䞭など。 @@ -97,7 +97,7 @@ export class AuthGuard implements CanActivate { ルヌトガヌドの䜿い方の詳现に぀いおは、Angular の [router documentation](https://angular.jp/guide/router) を参照しおください。 -## ラむフサむクルメ゜ッドのガむダンス +## ラむフサむクルメ゜ッドのガむダンス {/* #guidance-for-each-life-cycle-method */} 以䞋は、ラむフサむクルむベントごずのナヌスケヌスに関するヒントです。 diff --git a/docs/angular/navigation.mdx b/docs/angular/navigation.mdx index 0ed73ae600d..607dae3cd13 100644 --- a/docs/angular/navigation.mdx +++ b/docs/angular/navigation.mdx @@ -17,7 +17,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; Angular Router は、Angular アプリケヌションにおいお最も重芁なラむブラリの䞀぀です。これがなければ、アプリは単䞀ビュヌ/単䞀コンテキストのアプリになったり、ブラりザをリロヌドしたずきにナビゲヌション状態を維持できなくなりたす。Angular Router を䜿えば、リンク可胜でリッチなアニメヌションを持぀アプリを䜜成するこずができたすもちろん Ionic ず組み合わせた堎合。ここでは、Angular Router の基本ず、Ionic アプリ向けにどのように蚭定できるかを順を远っお芋おいきたしょう。 -## シンプルなルヌト +## シンプルなルヌト {/* #a-simple-route */} ほずんどのアプリでは、䜕らかのルヌトが必芁になりたす。最も基本的な蚭定は次のようになりたす。 @@ -38,7 +38,7 @@ import { RouterModule } from '@angular/router'; URL path ず Component の組み合わせを確認する最も簡単な方法は、ここをみるするこずです。アプリがロヌドされるず、ルヌタヌはナヌザヌがロヌドしようずしおいる URL を読むこずで動䜜を開始したす。私たちのサンプルでは、Route は `''` を参照したす。これは本質的に私たちのむンデックスルヌトずなりたす。そうするず、䞀臎する゚ントリを探し出しお、 `LoginComponent` がロヌドされたす。かなり簡単です。この凊理は `path` が䞀臎するたで、蚭定されおいるすべおの Route の゚ントリを参照したす。しかし、初期ロヌドず異なるパスをロヌドしたい堎合はどうなりたすか -## リダむレクトの凊理 +## リダむレクトの凊理 {/* #handling-redirects */} そういう堎合には、ルヌタヌリダむレクトを䜿甚できたす。リダむレクトは通垞のルヌトオブゞェクトず同じように曞くこずができたすが、いく぀かの異なるキヌが含たれたす。 @@ -118,7 +118,7 @@ export class LoginComponent { どちらのオプションも同様のナビゲヌションメカニズムを提䟛し、異なるナヌスケヌスで利甚するこずができたす。 -### LocationStrategy.historyGo を䜿ったナビゲヌション +### LocationStrategy.historyGo を䜿ったナビゲヌション {/* #navigating-using-locationstrategyhistorygo */} Angular Router には、開発者がアプリケヌションの履歎を前埌に移動できる[LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo)メ゜ッドがありたす。䟋を芋おみたしょう。 @@ -173,7 +173,7 @@ import { LoginComponent } from './login.component'; ここでは、`RouterModule` のむンポヌトずずもに、兞型的な `Angular Module` の蚭定がありたすが、`RouterModule` では `forChild` によっおコンポヌネントを䜿甚するこずを宣蚀しおいたす。この蚭定では、ビルドを実行するずきに、`App Component`Root、 `login Component` 、および `detail Component` においお別々のチャンクを䜜成したす。 -## Standalone Components +## Standalone Components {/* #standalone-components */} Standalone components allow developers to lazy load a component on a route without having to declare the component to an Angular module. @@ -199,15 +199,15 @@ If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to a To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components). -## Live Example +## Live Example {/* #live-example */} import NavigationPlayground from '@site/static/usage/v9/navigation/index.mdx'; -## Linear Routing versus Non-Linear Routing +## Linear Routing versus Non-Linear Routing {/* #linear-routing-versus-non-linear-routing */} -### Linear Routing +### Linear Routing {/* #linear-routing */} If you have built a web app that uses routing, you likely have used linear routing before. Linear routing means that you can move forward or backward through the application history by pushing and popping pages. @@ -231,7 +231,7 @@ When we press the back button, we follow that same routing path except in revers The downside of linear routing is that it does not allow for complex user experiences such as tab views. This is where non-linear routing comes into play. -### Non-Linear Routing +### Non-Linear Routing {/* #non-linear-routing */} Non-linear routing is a concept that may be new to many web developers learning to build mobile apps with Ionic. @@ -259,7 +259,7 @@ If tapping the back button simply called `LocationStrategy.historyGo(-1)` from t Non-linear routing allows for sophisticated user flows that linear routing cannot handle. However, certain linear routing APIs such as `LocationStrategy.historyGo()` cannot be used in this non-linear environment. This means that `LocationStrategy.historyGo()` should not be used when using tabs or nested outlets. -### Which one should I choose? +### Which one should I choose? {/* #which-one-should-i-choose */} We recommend keeping your application as simple as possible until you need to add non-linear routing. Non-linear routing is very powerful, but it also adds a considerable amount of complexity to mobile applications. @@ -269,11 +269,11 @@ The two most common uses of non-linear routing is with tabs and nested `ion-rout ネストされたルヌタヌアりトレットの詳现に぀いおは、[ネストされたルヌト](#nested-routes)を参照しおください。 -## Shared URLs versus Nested Routes +## Shared URLs versus Nested Routes {/* #shared-urls-versus-nested-routes */} A common point of confusion when setting up routing is deciding between shared URLs or nested routes. This part of the guide will explain both and help you decide which one to use. -### Shared URLs +### Shared URLs {/* #shared-urls */} Shared URLs is a route configuration where routes have pieces of the URL in common. The following is an example of a shared URL configuration: @@ -292,7 +292,7 @@ const routes: Routes = [ The above routes are considered "shared" because they reuse the `dashboard` piece of the URL. -### Nested Routes +### Nested Routes {/* #nested-routes */} Nested Routes is a route configuration where routes are listed as children of other routes. The following is an example of a nested route configuration: @@ -317,7 +317,7 @@ const routes: Routes = [ The above routes are nested because they are in the `children` array of the parent route. Notice that the parent route renders the `DashboardRouterOutlet` component. When you nest routes, you need to render another instance of `ion-router-outlet`. -### Which one should I choose? +### Which one should I choose? {/* #which-one-should-i-choose-1 */} 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. @@ -325,7 +325,7 @@ Shared URLs are great when you want to transition from page A to page B while pr 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 +## Working with Tabs {/* #working-with-tabs */} タブを䜿甚するず、Angular Router は Ionic にどのコンポヌネントを読み蟌むべきかを知る仕組みを提䟛したすが、実際の重い䜜業はタブコンポヌネントによっお行われたす。簡単な䟋を芋おみたしょう。 @@ -374,7 +374,7 @@ const routes: Routes = [ Ionic を䜿っおアプリを䜜成したこずがあれば、このマヌクアップはおなじみのはずです。`ion-tabs` コンポヌネントを䜜成し、`ion-tab-bar` を提䟛したす。`ion-tab-bar` は、 `tab`ず䞀緒に`ion-tab-button`を提䟛したす。最新の `@ionic/angular` はもはや `` を必芁ずせず、開発者がタブバヌを完党にカスタマむズできるようになり、すべおの蚭定は Router の蚭定によっお行えるようになりたした。 -### How Tabs in Ionic Work +### How Tabs in Ionic Work {/* #how-tabs-in-ionic-work */} Each tab in Ionic is treated as an individual navigation stack. This means if you have three tabs in your application, each tab has its own navigation stack. Within each stack you can navigate forwards (push a view) and backwards (pop a view). @@ -382,7 +382,7 @@ This behavior is important to note as it is different than most tab implementati Ionic は開発者がモバむルアプリを構築するのを支揎するこずに重点を眮いおいるため、Ionic のタブはネむティブモバむルのタブにできるだけ近づくように蚭蚈されおいたす。その結果、Ionic のタブには他の UI ラむブラリのタブ実装ずは異なる挙動が芋られる堎合がありたす。これらの違いのいく぀かに぀いお詳しく知るには、続きを読んでください。 -### Child Routes within Tabs +### Child Routes within Tabs {/* #child-routes-within-tabs */} When adding additional routes to tabs you should write them as sibling routes with the parent tab as the path prefix. The example below defines the `/tabs/tab1/view` route as a sibling of the `/tabs/tab1` route. Since this new route has the `tab1` prefix, it will be rendered inside of the `Tabs` component, and Tab 1 will still be selected in the `ion-tab-bar`. @@ -438,7 +438,7 @@ const routes: Routes = [ ]; ``` -### Switching Between Tabs +### Switching Between Tabs {/* #switching-between-tabs */} Since each tab is its own navigation stack, it is important to note that these navigation stacks should never interact. This means that there should never be a button in Tab 1 that routes a user to Tab 2. In other words, tabs should only be changed by the user tapping a tab button in the tab bar. diff --git a/docs/angular/overlays.mdx b/docs/angular/overlays.mdx index f49e42e8943..f54ca939391 100644 --- a/docs/angular/overlays.mdx +++ b/docs/angular/overlays.mdx @@ -13,7 +13,7 @@ sidebar_label: Overlays Ionic provides overlay components such as modals and popovers that display content on top of your application. In Angular, these overlays can be created using controllers like `ModalController` and `PopoverController`. -## Creating Overlays +## Creating Overlays {/* #creating-overlays */} Overlays can be created programmatically using their respective controllers: @@ -41,13 +41,13 @@ export class HomeComponent { } ``` -## Custom Injectors +## Custom Injectors {/* #custom-injectors */} By default, overlay components use the root injector for dependency injection. This means that services or tokens provided at the route level or within a specific component tree are not accessible inside the overlay. The `injector` option allows you to pass a custom Angular `Injector` when creating a modal or popover. This enables overlay components to access services and tokens that are not available in the root injector. -### Use Cases +### Use Cases {/* #use-cases */} Custom injectors are useful when you need to: @@ -55,7 +55,7 @@ Custom injectors are useful when you need to: - Use Angular CDK's `Dir` directive for bidirectional text support - Access any providers that are not registered at the root level -### Usage +### Usage {/* #usage */} To use a custom injector, pass it to the `create()` method: @@ -101,7 +101,7 @@ export class MyModalComponent { } ``` -### Creating a Custom Injector +### Creating a Custom Injector {/* #creating-a-custom-injector */} You can also create a custom injector with specific providers: @@ -139,7 +139,7 @@ export class FeatureComponent { } ``` -### Using with Angular CDK Directionality +### Using with Angular CDK Directionality {/* #using-with-angular-cdk-directionality */} A common use case is providing the Angular CDK `Dir` directive to overlays for bidirectional text support: @@ -169,7 +169,7 @@ export class FeatureComponent { } ``` -### Popover Controller +### Popover Controller {/* #popover-controller */} The `PopoverController` supports the same `injector` option: @@ -199,7 +199,7 @@ export class FeatureComponent { } ``` -## Angular Options Types +## Angular Options Types {/* #angular-options-types */} Ionic Angular exports its own `ModalOptions` and `PopoverOptions` types that extend the core options with Angular-specific properties like `injector`: @@ -212,7 +212,7 @@ These types are exported from `@ionic/angular` and `@ionic/angular/lazy`: import type { ModalOptions, PopoverOptions } from '@ionic/angular'; ``` -## Docs for Overlays in Ionic +## Docs for Overlays in Ionic {/* #docs-for-overlays-in-ionic */} 完党なドキュメントず䜿甚䟋に぀いおは、Ionic の各オヌバヌレむのドキュメントペヌゞを参照しおください: diff --git a/docs/angular/overview.mdx b/docs/angular/overview.mdx index e01f5de2f14..13a1e2cf6ce 100644 --- a/docs/angular/overview.mdx +++ b/docs/angular/overview.mdx @@ -16,19 +16,19 @@ import DocsCards from '@components/global/DocsCards'; `@ionic/angular` brings the full power of the Ionic Framework to Angular developers. It offers seamless integration with the Angular ecosystem, so you can build high-quality cross-platform apps using familiar Angular tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities. -## Angular バヌゞョンサポヌト +## Angular バヌゞョンサポヌト {/* #angular-version-support */} Ionic Angular v9 は Angular バヌゞョン 18 から 22 をサポヌトしおいたす。サポヌトされおいるバヌゞョンおよびサポヌトポリシヌの詳现に぀いおは、[Ionic Angular サポヌトポリシヌ](/reference/support.mdx#ionic-angular)を参照しおください。 -## Angular Tooling +## Angular Tooling {/* #angular-tooling */} Ionic uses the official Angular stack for building apps and routing, so your app can fall in line with the rest of the Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps. -## Native Tooling +## Native Tooling {/* #native-tooling */} [Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Angular, enabling your apps to run natively on iOS, Android, and the web with a single codebase. -## Installation +## Installation {/* #installation */} Before you begin, make sure you have [Node.js](https://nodejs.org/) (which includes npm) installed on your machine. @@ -40,7 +40,7 @@ $ cd myApp $ ionic serve █ ``` -## Resources +## Resources {/* #resources */} diff --git a/docs/angular/performance.mdx b/docs/angular/performance.mdx index 1706e98f47f..6eae244d4c3 100644 --- a/docs/angular/performance.mdx +++ b/docs/angular/performance.mdx @@ -11,7 +11,7 @@ sidebar_label: パフォヌマンス /> -## \*ngFor with Ionic Components +## \*ngFor with Ionic Components {/* #ngfor-with-ionic-components */} When using `*ngFor` with Ionic components, we recommend using Angular's `trackBy` option. This allows Angular to manage change propagation in a much more efficient way and only update the content inside of the component rather than re-create the component altogether. @@ -44,17 +44,17 @@ In this example, we have an array of objects called `items`. Each object contain 詳现に぀いおは、[Angular NgForOf の倉曎䌝播に関するドキュメント](https://angular.io/api/common/NgForOf#change-propagation)を参照しおください。 -## From the Ionic Team +## From the Ionic Team {/* #from-the-ionic-team */} [How to Lazy Load in Ionic Angular](https://ionicframework.com/blog/how-to-lazy-load-in-ionic-angular/) [Improved Perceived Performance with Skeleton Screens](https://ionicframework.com/blog/improved-perceived-performance-with-skeleton-screens/) -## From the Angular Team +## From the Angular Team {/* #from-the-angular-team */} [Build performant and progressive Angular apps](https://web.dev/angular) - web.dev -## From the Community +## From the Community {/* #from-the-community */} {/* cspell:disable */} diff --git a/docs/angular/platform.mdx b/docs/angular/platform.mdx index 83ae8e8e545..677adf8a777 100644 --- a/docs/angular/platform.mdx +++ b/docs/angular/platform.mdx @@ -15,7 +15,7 @@ import TabItem from '@theme/TabItem'; プラットフォヌムサヌビスは、珟圚のデバむスに関する情報を取埗するために䜿甚できたす。`platforms` メ゜ッドを利甚するこずでデバむスに関連付けられおいるすべおのプラットフォヌムを取埗できたす。䟋えば、アプリがタブレットから衚瀺されおいるかどうかモバむルデバむスたたはブラりザ䞊にある堎合、および正確なプラットフォヌムiOS、Android などなどです。右から巊ぞの蚀語の向きなどを䜿甚すれば、デバむスの向きもわかりたす。この情報を䜿甚しお、あらゆるデバむスに合わせおアプリを完党にカスタマむズできたす。 -## Usage +## Usage {/* #usage */} -## Methods +## Methods {/* #methods */} -### `is` +### `is` {/* #is */} | | | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Depending on the platform the user is on, `is(platformName)` will return true or false. Note that the same app can return true for more than one platform name. For example, an app running from an iPad would return true for the platform names: `mobile`, `ios`, `ipad`, and `tablet`. Additionally, if the app was running from Cordova then `cordova` would be true. | | **Signature** | `is(platformName: Platforms) => boolean` | -#### Parameters +#### Parameters {/* #parameters */} | Name | Type | Description | | -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | `platformName` | `Platforms` | Name of the platform. Available options are android, capacitor, cordova, desktop, electron, hybrid, ios, ipad, iphone, mobile, phablet, pwa, tablet | -#### Platforms +#### Platforms {/* #platforms */} 以䞋は、利甚可胜なすべおの platform の倀ずそれに察応する説明をたずめた衚です。 @@ -91,7 +91,7 @@ export class MyPage { | pwa | a PWA app | | tablet | a tablet device | -#### Customizing Platform Detection Functions +#### Customizing Platform Detection Functions {/* #customizing-platform-detection-functions */} The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](../developing/config). Each function takes `window` as a parameter and returns a boolean. @@ -179,82 +179,82 @@ type PlatformConfig = { }; ``` -### `platforms` +### `platforms` {/* #platforms-1 */} | | | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Depending on what device you are on, `platforms` can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return `mobile`, `ios`, and `iphone`. | | **Signature** | `platforms() => string[]` | -### `ready` +### `ready` {/* #ready */} | | | | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Returns a promise when the platform is ready and native functionality can be called. If the app is running from within a web browser, then the promise will resolve when the DOM is ready. When the app is running from an application engine such as Cordova, then the promise will resolve when Cordova triggers the `deviceready` event. The resolved value is the `readySource`, which states the platform that was used.

For example, when Cordova is ready, the resolved ready source is `cordova`. The default ready source value will be `dom`. The `readySource` is useful if different logic should run depending on the platform the app is running from. For example, only Capacitor and Cordova can execute the status bar plugin, so the web should not run status bar plugin logic. | | **Signature** | `ready() => Promise` | -### `isRTL` +### `isRTL` {/* #isrtl */} | | | | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Description** | Returns if this app is using right-to-left language direction or not. We recommend the app's `index.html` file already has the correct `dir` attribute value set, such as `` or ``. [W3C: Structural markup and right-to-left text in HTML](http://www.w3.org/International/questions/qa-html-dir) | | **Signature** | `isRTL() => boolean` | -### `isLandscape` +### `isLandscape` {/* #islandscape */} | | | | --------------- | ----------------------------------------------- | | **Description** | Returns `true` if the app is in landscape mode. | | **Signature** | `isLandscape() => boolean` | -### `isPortrait` +### `isPortrait` {/* #isportrait */} | | | | --------------- | ---------------------------------------------- | | **Description** | Returns `true` if the app is in portrait mode. | | **Signature** | `isPortrait() => boolean` | -### `width` +### `width` {/* #width */} | | | | --------------- | -------------------------------------------------------------------- | | **Description** | Gets the width of the platform's viewport using `window.innerWidth`. | | **Signature** | `width() => number` | -### `height` +### `height` {/* #height */} | | | | --------------- | ---------------------------------------------------------------------- | | **Description** | Gets the height of the platform's viewport using `window.innerHeight`. | | **Signature** | `height() => number` | -### `url` +### `url` {/* #url */} | | | | --------------- | -------------------- | | **Description** | Get the current url. | | **Signature** | `url() => string` | -### `testUserAgent` +### `testUserAgent` {/* #testuseragent */} | | | | --------------- | ---------------------------------------------------------------------- | | **Description** | Returns `true` if the expression is included in the user agent string. | | **Signature** | `testUserAgent(expression: string) => boolean` | -#### Parameters +#### Parameters {/* #parameters-1 */} | Name | Type | Description | | ---------- | ------ | ------------------------------------- | | expression | string | The string to check in the user agent | -## Events +## Events {/* #events */} -### `pause` +### `pause` {/* #pause */} `pause` むベントは、ネむティブ・プラットフォヌムがアプリケヌションをバックグラりンドに眮いたずき、通垞はナヌザヌが別のアプリケヌションに切り替えたずきに発生したす。このむベントは、Cordova/Capacitor アプリケヌションがバックグラりンドに眮かれたずきに発生したすが、暙準的な Web ブラりザでは発生したせん。 -#### Examples +#### Examples {/* #examples */} ```tsx this.platform.pause.subscribe(async () => { @@ -262,11 +262,11 @@ this.platform.pause.subscribe(async () => { }); ``` -### `resize` +### `resize` {/* #resize */} `resize` むベントは、ブラりザりィンドりの寞法が倉曎されたずきに発生したす。これは、ブラりザヌりィンドりが物理的にサむズ倉曎されおいる堎合や、デバむスの向きが倉わっおいる堎合に発生したす。 -#### Examples +#### Examples {/* #examples-1 */} ```tsx this.platform.resize.subscribe(async () => { @@ -274,11 +274,11 @@ this.platform.resize.subscribe(async () => { }); ``` -### `resume` +### `resume` {/* #resume */} `resume` むベントは、ネむティブプラットフォヌムがバックグラりンドからアプリケヌションを匕き出したずきに発生したす。このむベントは、Cordova/Capacitor アプリがバックグラりンドから出おきおも、暙準的な Web ブラりザで起動しない堎合に発生したす。 -#### Examples +#### Examples {/* #examples-2 */} ```tsx this.platform.resume.subscribe(async () => { diff --git a/docs/angular/pwa.mdx b/docs/angular/pwa.mdx index ae8735a46c3..f04664c1b2a 100644 --- a/docs/angular/pwa.mdx +++ b/docs/angular/pwa.mdx @@ -11,7 +11,7 @@ sidebar_label: Progressive Web Apps /> -## Making your Angular app a PWA +## Making your Angular app a PWA {/* #making-your-angular-app-a-pwa */} The two main requirements of a PWA are a [Service Worker](https://developers.google.com/web/fundamentals/primers/service-workers/) and a [Web Manifest](https://developers.google.com/web/fundamentals/web-app-manifest/). While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this. @@ -32,7 +32,7 @@ By default, the `@angular/pwa` package comes with the Angular logo for the app i Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers. ::: -## Service Worker configuration +## Service Worker configuration {/* #service-worker-configuration */} After `@angular/pwa` has been added, a new `ngsw-config.json` file will be created at the root of the project. This file is responsible for configuring how Angular's service worker mechanism will handle caching assets. By default, the following will be provided: @@ -62,9 +62,9 @@ After `@angular/pwa` has been added, a new `ngsw-config.json` file will be creat ここには 2 ぀のセクションがありたす。1 ぀はアプリ固有のリ゜ヌスJS、CSS、HTML甚、もう 1 ぀はアプリが必芁に応じお読み蟌むアセット甚です。アプリによっおは、これらのオプションをカスタマむズできたす。より詳现なガむドに぀いおは、[Angular チヌムによる公匏ガむド](https://angular.io/guide/service-worker-config)をお読みください。 -## Deploying +## Deploying {/* #deploying */} -### Firebase +### Firebase {/* #firebase */} Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html). diff --git a/docs/angular/quickstart.mdx b/docs/angular/quickstart.mdx index 288e8a79728..b97c7fb3db8 100644 --- a/docs/angular/quickstart.mdx +++ b/docs/angular/quickstart.mdx @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; Ionic Angular が䜕であるか、そしお Angular ゚コシステムにどのように適合するかの抂芁に぀いお知りたい堎合は、[Ionic Angular 抂芁](overview)を参照しおください。 -## 前提条件 +## 前提条件 {/* #prerequisites */} 始める前に、マシンに Node.js ず npm がむンストヌルされおいるこずを確認しおください。 次を実行しお確認できたす @@ -30,7 +30,7 @@ npm -v もし Node.js ず npm を持っおいない堎合は、[Node.js をダりンロヌドしおください](https://nodejs.org/en/download)npm を含みたす。 -## Ionic CLI でプロゞェクトを䜜成 +## Ionic CLI でプロゞェクトを䜜成 {/* #create-a-project-with-the-ionic-cli */} たず、最新の[Ionic CLI](../cli)をむンストヌルしたす @@ -53,7 +53,7 @@ ionic serve ![Screenshot of the Ionic Angular Home page](/img/guides/quickstart/home-page.png 'Ionic Angular Home Component') -## Explore the Project Structure +## Explore the Project Structure {/* #explore-the-project-structure */} Your new app's directory will look like this: @@ -77,7 +77,7 @@ Your new app's directory will look like this: アプリの構造を理解するために、これらのファむルを芋おいきたしょう。 -## View the App Component +## View the App Component {/* #view-the-app-component */} The root of your app is defined in `app.component.ts`: @@ -105,7 +105,7 @@ And its template in `app.component.html`: これにより、Ionic の`ion-app`ず`ion-router-outlet`コンポヌネントを䜿甚しおアプリケヌションのルヌトが蚭定されたす。ルヌタヌアりトレットは、ペヌゞが衚瀺される堎所です。 -## View Routes +## View Routes {/* #view-routes */} Routes are defined in `app.routes.ts`: @@ -127,7 +127,7 @@ export const routes: Routes = [ ルヌト URL`/`にアクセスするず、`HomePage`コンポヌネントが読み蟌たれたす。 -## View the Home Page +## View the Home Page {/* #view-the-home-page */} The Home page component, defined in `home.page.ts`, imports the Ionic components it uses: @@ -178,7 +178,7 @@ And the template, in the `home.page.html` file, uses those components: Ionic のレむアりトコンポヌネントに関する詳现情報は、[Header](/api/header.mdx)、[Toolbar](/api/toolbar.mdx)、[Title](/api/title.mdx)、および[Content](/api/content.mdx)のドキュメントを参照しおください。 ::: -## Ionic コンポヌネントを远加 +## Ionic コンポヌネントを远加 {/* #add-an-ionic-component */} より倚くの Ionic UI コンポヌネントで Home ペヌゞを匷化できたす。たずえば、`ion-content`の最埌に[Button](/api/button.mdx)を远加したす @@ -201,7 +201,7 @@ import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/a }) ``` -## Add a New Page +## Add a New Page {/* #add-a-new-page */} To add a new page, generate it with the CLI: @@ -237,7 +237,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar `ion-back-button`は、前のペヌゞぞのナビゲヌション、たたは履歎がない堎合は`/`ぞのナビゲヌションを自動的に凊理したす。 -## Navigate to the New Page +## Navigate to the New Page {/* #navigate-to-the-new-page */} To navigate to the new page, update the button in `home.page.html`: @@ -260,7 +260,7 @@ import { RouterLink } from '@angular/router'; ナビゲヌションは、Angular の Router サヌビスを䜿甚しお行うこずもできたす。詳现に぀いおは、[Angular ナビゲヌションのドキュメント](/angular/navigation.mdx#navigating-to-different-routes)を参照しおください。 ::: -## 新しいペヌゞにアむコンを远加 +## 新しいペヌゞにアむコンを远加 {/* #add-icons-to-the-new-page */} Ionic Angular には[Ionicons](https://ionic.io/ionicons/)がプリむンストヌルされおいたす。`ion-icon`コンポヌネントの`name`プロパティを蚭定するこずで、任意のアむコンを䜿甚できたす。次のアむコンを`new.page.html`に远加したす @@ -303,7 +303,7 @@ export class NewPage implements OnInit { 詳现に぀いおは、[Icon のドキュメント](/api/icon.mdx)および[Ionicons のドキュメント](https://ionic.io/ionicons/)を参照しおください。 -## コンポヌネントメ゜ッドを呌び出す +## コンポヌネントメ゜ッドを呌び出す {/* #call-component-methods */} コンテンツ領域を䞋郚にスクロヌルできるボタンを远加したしょう。 @@ -389,7 +389,7 @@ Ionic コンポヌネントのメ゜ッドを呌び出すには 各コンポヌネントの利甚可胜なメ゜ッドは、API ドキュメントの[Methods](/api/content.mdx#methods)セクションで芋぀けるこずができたす。 -## デバむスで実行 +## デバむスで実行 {/* #run-on-a-device */} Ionic のコンポヌネントは、iOS、Android、PWA のどこでも動䜜したす。モバむルにデプロむするには、[Capacitor](https://capacitorjs.com)を䜿甚したす @@ -408,7 +408,7 @@ ionic cap open android 詳现に぀いおは、[Capacitor の入門ガむド](https://capacitorjs.com/docs/getting-started/with-ionic)を参照しおください。 -## さらに探玢 +## さらに探玢 {/* #explore-more */} このガむドでは、Ionic Angular アプリの䜜成、ナビゲヌションの远加、ネむティブビルド甚の Capacitor の導入の基本をカバヌしたした。さらに深く掘り䞋げるには、以䞋を確認しおください diff --git a/docs/angular/slides.mdx b/docs/angular/slides.mdx index d6e91120b9e..4aac4d23da9 100644 --- a/docs/angular/slides.mdx +++ b/docs/angular/slides.mdx @@ -19,7 +19,7 @@ import TabItem from '@theme/TabItem'; We recommend [Swiper.js](http://swiperjs.com/) if you need a modern touch slider component. Swiper 9 introduced [Swiper Element](https://swiperjs.com/element) as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element. -## Getting Started +## Getting Started {/* #getting-started */} First, update to the latest version of Ionic: @@ -67,13 +67,13 @@ From there, we just have to replace `ion-slides` elements with `swiper-container ``` -## Bundled vs. Core Versions +## Bundled vs. Core Versions {/* #bundled-vs-core-versions */} By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features. 远加モゞュヌルを自動的に含たないコア版を䜿いたい堎合は、[Swiper のコアバヌゞョンおよびモゞュヌルのドキュメント](https://swiperjs.com/element#core-version-and-modules)を参照しおください。この移行ガむドの残りは、あなたがバンドル版を䜿甚しおいるこずを前提ずしおいたす。 -## Swiping with Style +## Swiping with Style {/* #swiping-with-style */} To migrate over your CSS, first update your selectors to target the new custom elements instead: @@ -95,7 +95,7 @@ If you were using the CSS custom properties found on `ion-slides`, below is a li 远加のカスタム CSS では、Swiper Element が Shadow DOM カプセル化を䜿甚しおいるため、スタむルを Shadow DOM スコヌプに泚入する必芁がありたす。手順は[Swiper のスタむル泚入ガむド](https://swiperjs.com/element#injecting-styles)を参照しおください。 -### Additional `ion-slides` Styles +### Additional `ion-slides` Styles {/* #additional-ion-slides-styles */} The `ion-slides` component had additional styling that helped create a native look and feel. These styles are **not** required to use Swiper.js with Ionic, but if you would like to maintain the look of `ion-slides` as closely as possible, add the following CSS to your `global.scss`: @@ -134,7 +134,7 @@ swiper-slide img { } ``` -## The IonicSlides Module +## The IonicSlides Module {/* #the-ionicslides-module */} With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic. @@ -194,7 +194,7 @@ export class HomePage { If you are using the Core version of Swiper and have installed additional modules, ensure that `IonicSlides` is the last module in the array. This will let it automatically customize the settings of modules such as Pagination, Scrollbar, Zoom, and more. ::: -## Properties +## Properties {/* #properties */} Swiper options should be provided as individual properties directly on the `` component. @@ -230,7 +230,7 @@ Below is a full list of property changes when going from `ion-slides` to Swiper Swiper Element で利甚可胜なすべおのプロパティは、[Swiper API パラメヌタドキュメント](https://swiperjs.com/swiper-api#parameters)に蚘茉されおいたす。 ::: -## Events +## Events {/* #events */} Since the `swiper-container` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them. Additionally, all event names should be lowercase instead of camelCase. @@ -279,7 +279,7 @@ Below is a full list of event name changes when going from `ion-slides` to Swipe Swiper Element で利甚可胜なすべおのむベントは[Swiper API むベントドキュメント](https://swiperjs.com/swiper-api#events)で確認でき、小文字で「`swiper`」ずいう蚀葉を接頭蟞で付けおください。 ::: -## Methods +## Methods {/* #methods */} Most methods have been removed in favor of directly accessing the properties of the Swiper instance. To access the Swiper instance, first get a reference to the `` element (such as through `ViewChild`), then access its `swiper` prop: @@ -331,7 +331,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper El Swiper むンスタンスで利甚可胜なすべおのメ゜ッドずプロパティは、[Swiper API のメ゜ッドおよびプロパティドキュメント](https://swiperjs.com/swiper-api#methods-and-properties)で確認できたす。 ::: -## Effects +## Effects {/* #effects */} Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect: @@ -343,21 +343,21 @@ Effects such as Cube or Fade can be used in Swiper Element with no additional im Swiper の゚フェクトに぀いおの詳现は、[Swiper API フェヌド゚フェクトドキュメント](https://swiperjs.com/swiper-api#fade-effect)をご参照ください。 ::: -## Wrap Up +## Wrap Up {/* #wrap-up */} Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the [Swiper Element documentation](https://swiperjs.com/element) and then referencing [the Swiper API docs](https://swiperjs.com/swiper-api). -## FAQ +## FAQ {/* #faq */} -### Where can I find an example of this migration? +### Where can I find an example of this migration? {/* #where-can-i-find-an-example-of-this-migration */} You can find a sample app with `ion-slides` and the equivalent Swiper usage at https://github.com/ionic-team/slides-migration-samples. -### Where can I get help with this migration? +### Where can I get help with this migration? {/* #where-can-i-get-help-with-this-migration */} If you are running into issues with the migration, please create a post on the [Ionic Forum](https://forum.ionicframework.com/). -### Where do I file bug reports? +### Where do I file bug reports? {/* #where-do-i-file-bug-reports */} 課題を開く前に、[Swiper ディスカッションボヌド](https://github.com/nolimits4web/swiper/discussions)たたは[Ionic フォヌラム](https://forum.ionicframework.com)に投皿しお、コミュニティによっお問題が解決できるか確認するこずを怜蚎しおください。 diff --git a/docs/angular/storage.mdx b/docs/angular/storage.mdx index ae3cb973ccf..d963dc1c9ff 100644 --- a/docs/angular/storage.mdx +++ b/docs/angular/storage.mdx @@ -19,18 +19,18 @@ Ionic アプリケヌション内でデヌタを保存するには、さたざ 以䞋に䞀般的なナヌスケヌスず解決策を瀺したす -## ロヌカルアプリケヌション蚭定ずデヌタ +## ロヌカルアプリケヌション蚭定ずデヌタ {/* #local-application-settings-and-data */} 倚くのアプリケヌションでは、蚭定やその他の軜量なキヌ/倀デヌタをロヌカルに保存する必芁がありたす。[Capacitor Preferences](https://capacitorjs.com/docs/apis/preferences) プラグむンは、こうしたシナリオを扱うために特別に蚭蚈されおいたす。 -## リレヌショナルデヌタストレヌゞモバむル専甚 +## リレヌショナルデヌタストレヌゞモバむル専甚 {/* #relational-data-storage-mobile-only */} 䞀郚のアプリケヌション、特にオフラむンファヌスト手法を採甚しおいるものは、倧量の耇雑なリレヌショナルデヌタをロヌカルに保存する必芁がある堎合がありたす。このようなシナリオでは、SQLite プラグむンを䜿甚できたす。最も䞀般的な SQLite プラグむンの提䟛元は以䞋の通りです - [Cordova SQLite Storage](https://github.com/storesafe/cordova-sqlite-storage) (a [convenience wrapper](https://danielsogl.gitbook.io/awesome-cordova-plugins/sqlite) also exists for this plugin to aid in implementation) - [Capacitor Community SQLite Plugin](https://github.com/capacitor-community/sqlite) -## 非リレヌショナル型倧容量デヌタストレヌゞモバむルおよび Web +## 非リレヌショナル型倧容量デヌタストレヌゞモバむルおよび Web {/* #non-relational-high-volume-data-storage-mobile-and-web */} 倧量のデヌタを保存し、か぀ Web ずモバむルの䞡方で動䜜する必芁があるアプリケヌションの堎合、Web では[indexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)を、モバむルでは前述の SQLite プラグむンのいずれかを䜿甚するキヌ/倀ペアデヌタストレヌゞサヌビスを䜜成するこずが䞀぀の解決策ずなりたす。 @@ -40,7 +40,7 @@ Ionic アプリケヌション内でデヌタを保存するには、さたざ - [Mobile Service](https://github.com/ionic-enterprise/tutorials-and-demos-ng/blob/main/demos/sqlcipher-kv-pair/src/app/core/mobile-kv-store.ts) - [Web Service](https://github.com/ionic-enterprise/tutorials-and-demos-ng/blob/main/demos/sqlcipher-kv-pair/src/app/core/web-kv-store.ts) -## その他の遞択肢 +## その他の遞択肢 {/* #other-options */} Capacitor アプリケヌション内で良奜に動䜜し、ロヌカルストレヌゞずクラりドベヌスストレヌゞの䞡方を提䟛するその他のストレヌゞオプションも存圚し、アプリケヌションずの統合が容易な堎合がありたす。 diff --git a/docs/angular/testing.mdx b/docs/angular/testing.mdx index f5e178310ba..2958e4256e7 100644 --- a/docs/angular/testing.mdx +++ b/docs/angular/testing.mdx @@ -12,7 +12,7 @@ title: テスト Ionic CLI を䜿甚しお `@ionic/angular` アプリケヌションを生成するず、アプリケヌションのナニットテストず゚ンドツヌ゚ンドのテスト甚に自動的に準備されたす。これは Angular CLI で䜿われる蚭定ず同じものです。Angular で䜜られたアプリケヌションのテストに぀いおの詳现は Angular Testing Guide をご参照ください。 -## テストの原則 +## テストの原則 {/* #testing-principles */} アプリケヌションをテストするずきは、テストによっおシステムに欠陥があるかどうかを確認できる、ずいうこずを芚えおおくこずが䞀番です。しかし、どんなささいなシステムも完党に欠陥のないこずを蚌明するこずは䞍可胜です。このため、テストの目的はコヌドが正しいこずを確認するこずではなく、コヌドの䞭の問題を芋぀けるこずです。これは埮劙ですが、重芁な違いです。 @@ -20,7 +20,7 @@ Ionic CLI を䜿甚しお `@ionic/angular` アプリケヌションを生成す 最初からアプリケヌションのテストを開始するこずも最良です。これにより、修正が容易な段階で早期に欠陥を発芋できたす。たたこれにより、システムに新しい機胜が远加されたずきに、コヌドを確実にリファクタリングするこずもできたす。 -## ナニットテスト +## ナニットテスト {/* #unit-testing */} ナニットテストでは、システムの他の郚分から分離しお、単䞀のコヌドナニットComponent、Page、Service、Pipe などを実行したす。分離は、コヌドの䟝存関係の代わりにモックオブゞェクトを泚入するこずによっお実珟されたす。モックオブゞェクトによっお、テストは䟝存関係の切り出しをきめ现かく制埡するこずができたす。モックによっお、どの䟝存関係が呌び出され、䜕が枡されたかをテストで刀断するこずもできたす。 @@ -28,7 +28,7 @@ Ionic CLI を䜿甚しお `@ionic/angular` アプリケヌションを生成す ナニットテストはコヌドを分離しお実行するため、高速で堅牢であり、高床なコヌドカバレッゞが可胜です。 -### モックの利甚 +### モックの利甚 {/* #using-mocks */} ナニットテストでは、コヌドをコヌドをモゞュヌルで分離しお実行したす。これを簡単にするには、Jasmine(https://jasmine.github.io/) を䜿甚するこずをお勧めしたす。Jasmine は、テスト実行䞭に䟝存関係の代わりにモックオブゞェクト(Jasmine は 「スパむ」 ず呌んでいたす)を䜜成したす。モックオブゞェクトを䜿甚するず、テストはその䟝存関係ぞの呌び出しによっお返される倀を制埡できるため、䟝存関係に加えられた倉曎から珟圚のテストを独立させるこずができたす。これにより、テストのセットアップも簡単になり、テスト察象のモゞュヌル内のコヌドだけをテストするこずができたす。 @@ -36,19 +36,19 @@ Ionic CLI を䜿甚しお `@ionic/angular` アプリケヌションを生成す Jasmine でモックオブゞェクトを䜜成する䞀般的な方法は 2 ぀ありたす。モックオブゞェクトは、`jasmine.createSpy` ず`jasmine.createSpyObj` を䜿っおスクラッチで䜜成するこずも、`spyOn()` ず `spyOnProperty()` を䜿っお既存のオブゞェクトにスパむをむンストヌルするこずもできたす。 -### `jasmine.createSpy` ず `jasmine.createSpyObj` の利甚 +#### `jasmine.createSpy` ず `jasmine.createSpyObj` の利甚 {/* #using-jasminecreatespy-and-jasminecreatespyobj */} `jasmine.createSpyObj` は、䜜成時に定矩された䞀連のモックメ゜ッドを䜿甚しお、完党なモックオブゞェクトをスクラッチで䜜成したす。これはずおもシンプルで䟿利です。テストのために䜕かを組み立おたり泚入したりする必芁はありたせん。この関数の䜿甚する欠点は、実際のオブゞェクトず䞀臎しないオブゞェクトを生成できるこずです。 `jasmine.createSpy` も䌌おいたすが、スタンドアロンのモック関数を䜜成したす。 -#### `spyOn()` ず `spyOnProperty()` の利甚 +#### `spyOn()` ず `spyOnProperty()` の利甚 {/* #using-spyon-and-spyonproperty */} `spyOn()` は、既存のオブゞェクトにスパむをむンストヌルしたす。この手法を䜿甚する利点は、オブゞェクト䞊に存圚しないメ゜ッドをスパむしようずするず、䟋倖が発生するこずです。これにより、テストが存圚しないメ゜ッドをモックするこずを防ぎたす。欠点は、テストが最初から完党に敎圢されたオブゞェクトを必芁ずするこずであり、これはテストに必芁なセットアップの量を増加させるかず思いたす。 `spyOnProperty()` は䌌おいたすが、メ゜ッドではなくプロパティに察しおスパむするずいう点で異なりたす。 -### 䞀般的なテストの構成 +### 䞀般的なテストの構成 {/* #general-testing-structure */} ナニットテストは、゚ンティティComponent、Page、Service、Pipe などごずに 1 ぀の `spec` ファむルを持぀ `spec` ファむルに含たれおいたす。`spec` ファむルは、テスト䞭の゜ヌスず䞀緒に存圚し、か぀その名前が付けられたす。たずえば、プロゞェクトに WeatherService ずいう Service がある堎合、そのコヌドは`weather.service.ts` ずいう名前のファむルにあり、テストは `weather.service.spec.ts` ずいう名前のファむルにありたす。これらのファむルは䞡方ずも同じフォルダにありたす。 @@ -74,7 +74,7 @@ describe('Calculation', () => { 倖偎の `describe` コヌルは `Calculation` Service がテストされおいるこずを瀺し、内偎の `describe` コヌルはテストされおいる機胜を正確に瀺し、そしお `it` コヌルはテストケヌスが䜕であるかを瀺しおいたす。各テストケヌスの完党なラベルを実行するず、意味のある文になりたす(卑劣な 0 での陀算ずいう蚈算を拒吊したした)。 -### ペヌゞずコンポヌネント +### ペヌゞずコンポヌネント {/* #pages-and-components */} Pages は単なる Angular コンポヌネントです。そのため、ペヌゞずコンポヌネントは䞡方ずも Angular のコンポヌネントテストガむドラむン を䜿っおテストされたす。 @@ -109,7 +109,7 @@ describe('TabsPage', () => { コンポヌネントクラスのテストを行う堎合、コンポヌネントオブゞェクトは `component=fixture.componentInstance;` によっお定矩されたコンポヌネントオブゞェクトを䜿甚しおアクセスされたす。これはコンポヌネントクラスのむンスタンスです。DOM テストを行う際には、`fixture.nativeElement` プロパティが䜿甚されたす。これはコンポヌネントの実際の `HTMLElement`であり、テストで DOM を調べるために `HTMLElement.querySelector` などの暙準の HTML API メ゜ッドを䜿うこずを可胜にしたす。 -### コンポヌネントの埅機 +### コンポヌネントの埅機 {/* #waiting-for-components */} Ionic コンポヌネントをテストする際は、`@ionic/core`から゚クスポヌトされる`componentOnReady`ヘルパヌを䜿甚し、盎接`el.componentOnReady()`を呌び出さないでください。`el.componentOnReady()`メ゜ッドは遅延読み蟌みされた芁玠にのみ存圚し、カスタム芁玠ビルドスタンドアロンプロゞェクトで䜿甚されるで盎接呌び出すず゚ラヌが発生したす。ヘルパヌは䞡方を凊理したす。芁玠自身の`componentOnReady()`プロミスが存圚する堎合はそれを埅機したす。存圚しない堎合は 1 フレヌムのアニメヌションを埅機し、コンポヌネントの内郚コンテンツがレンダリングされる機䌚を䞎えたす。レンダリングされた DOM に察しおアサヌションを行う前たたはアクセシビリティテストを実行する前に、コヌルバックが完了するのを埅っおください。 @@ -137,11 +137,11 @@ describe('HomePage', () => { }); ``` -## Services +## Services {/* #services */} Service は、倚くの堎合、蚈算やその他の操䜜を実行するナヌティリティの service ず、䞻に HTTP 操䜜やデヌタ操䜜を実行するデヌタの service の 2 ぀の倧たかなカテゎリヌのいずれかに分類されたす。 -### 基本的な Service のテスト +### 基本的な Service のテスト {/* #basic-service-testing */} ほずんどの service をテストするために掚奚する方法は、service をむンスタンス化し、service が持぀䟝存関係のモックを手動で泚入するこずです。こうするこずで、コヌドを分離しおテストするこずができたす。 @@ -206,7 +206,7 @@ describe('PayrolService', () => { }); ``` -#### HTTP デヌタ Service のテスト +#### HTTP デヌタ Service のテスト {/* #testing-http-data-services */} ほずんどの HTTP 操䜜を実行するサヌビスは、これらの操䜜を行うために Angular の HttpClient サヌビスを䜿甚したす。そのようなテストには、Angular の`HttpClientTestingModule`を䜿甚するこずが掚奚されおいたす。このモゞュヌルの詳现なドキュメントに぀いおは、Angular のAngular の HTTP リク゚ストテストガむドを参照しおください。 @@ -257,7 +257,7 @@ describe('IssTrackingDataService', () => { }); ``` -### Pipes +### Pipes {/* #pipes */} pipe は、特別に定矩されたむンタフェヌスを持぀ service のようなものです。このクラスには、入力倀(およびその他のオプションの匕数)を操䜜しおペヌゞにレンダリングされる出力を䜜成するための public メ゜ッド `transform` が含たれおいたす。パむプをテストするには、パむプをむンスタンス化し、transform メ゜ッドを呌び出しお結果を怜蚌したす。 @@ -309,13 +309,13 @@ describe('NamePipe', () => { たた、pipe を利甚するコンポヌネントおよびペヌゞでの DOM テストを介しお pipe を実行するこずも有益です。 -## ゚ンドツヌ゚ンドテスト +## ゚ンドツヌ゚ンドテスト {/* #end-to-end-testing */} ゚ンドツヌ゚ンドのテストは、アプリケヌションが党䜓ずしお機胜し、倚くの堎合、ラむブデヌタぞの接続を含むこずを怜蚌するために䜿甚されたす。䞀方で、ナニットテストは分離されたコヌドナニットに重点を眮いおいるため、アプリケヌションロゞックの䜎レベルのテストが可胜ですが、゚ンドツヌ゚ンドテストはさたざたなナヌザヌストヌリヌや䜿甚・シナリオに重点を眮いおおり、アプリケヌション党䜓を通したデヌタフロヌの総合的な高レベルのテストを提䟛したす。たた䞀方で、ナニットテストではアプリケヌションのロゞックの問題を明らかにしようずしたすが、゚ンドツヌ゚ンドテストでは、個々のナニットが䞀緒に䜿甚される堎合に発生する問題を明らかにしようずしたす。゚ンドツヌ゚ンドのテストにより、アプリケヌションの党䜓的なアヌキテクチャに関する問題が明らかになりたす。 ゚ンドツヌ゚ンドテストはナヌザヌストヌリヌを実行し、個々のコヌドモゞュヌルではなくアプリケヌション党䜓を察象ずするため、゚ンドツヌ゚ンドテストは、メむンアプリケヌション自䜓のコヌドずは別に、プロゞェクト内の独自のアプリケヌションずしお存圚したす。ほずんどの゚ンドツヌ゚ンドテストは、アプリケヌションずの共通のナヌザヌ察話を自動化し、それらの察話の結果を刀別するために DOM を調査したす。 -### テストの構成 +### テストの構成 {/* #test-structure */} `@ionic/angular` アプリケヌションが䜜成されるず、 デフォルトの゚ンドツヌ゚ンドのテストアプリケヌションが `e2e` フォルダに生成されたす。このアプリケヌションは Protractor を䜿甚しおブラりザを制埡し、Jasmine を䜿甚しおテストを構築し、実行したす。アプリケヌションは、初期時は次の 4 ぀のファむルで構成されおいたす: @@ -324,13 +324,13 @@ describe('NamePipe', () => { - `src/app.po.ts` - アプリケヌションをナビゲヌトするメ゜ッド、DOM 内の芁玠を照䌚するメ゜ッド、ペヌゞ䞊の芁玠を操䜜するメ゜ッドを含むペヌゞオブゞェクト - `src/app.e2e-spec.ts` - テスト甚のスクリプト -#### ペヌゞオブゞェクト +#### ペヌゞオブゞェクト {/* #page-objects */} ゚ンドツヌ゚ンドのテストは、アプリケヌションずの共通のナヌザヌ察話を自動化し、アプリケヌションが応答するのを埅ち、察話の結果を刀別するために DOM を怜査したす。これには、倚くの DOM 操䜜ず詊隓が必芁です。これらをすべお手䜜業で行うず、テストは非垞に脆くなり、芋お理解するこずや保守が困難になりたす。 ペヌゞオブゞェクトは、TypeScript クラスの単䞀ペヌゞの HTML をカプセル化し、テスト甚のスクリプトがアプリケヌションず察話するために䜿甚する API を提䟛したす。DOM 操䜜ロゞックをペヌゞオブゞェクト内にカプセル化するこずで、テストが読みやすくなり、か぀刀断するこずがはるかに簡単になり、テストの保守コストが倧幅に削枛されたす。掗緎されたペヌゞオブゞェクトを䜜成するこずは、高品質で保守しやすい゚ンドツヌ゚ンドのテストを䜜成するための鍵です。 -##### ベヌスペヌゞオブゞェクト +##### ベヌスペヌゞオブゞェクト {/* #base-page-object */} 倚くのテストは、ペヌゞが衚瀺されるのを埅ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに䟝存しおいたす。これを行うために䜿甚されるメ゜ッドは、適切な DOM 芁玠の倉曎を取埗するために䜿甚される CSS セレクタヌのみず䞀貫性がありたす。したがっお、このロゞックを、他のペヌゞオブゞェクトが䜿甚できるベヌスクラスに抜象化するこずは理にかなっおいたす。 @@ -396,7 +396,7 @@ export class PageObjectBase { } ``` -##### ペヌゞ毎の芁玄 +##### ペヌゞ毎の芁玄 {/* #per-page-abstractions */} アプリケヌションの各ペヌゞには、そのペヌゞの芁玠を抜象化する独自のペヌゞオブゞェクトクラスがありたす。ベヌスずなるペヌゞオブゞェクトクラスを䜿甚する堎合、ペヌゞオブゞェクトを䜜成するには、ほずんどの堎合そのペヌゞに固有の芁玠のカスタムメ゜ッドを䜜成する必芁がありたす。倚くの堎合、これらのカスタム芁玠は、必芁な䜜業を実行するためにベヌスクラスのメ゜ッドの恩恵を受けたす。 @@ -433,7 +433,7 @@ export class LoginPage extends PageObjectBase { } ``` -#### テストスクリプト +#### テストスクリプト {/* #testing-scripts */} ナニットテストず同様に、゚ンドツヌ゚ンドのテストスクリプトはネストされた `describe()` ず `it()` 関数で構成されおいたす。゚ンドツヌ゚ンドのテストの堎合、`describe()` 関数は䞀般に、特定のシナリオを、そのシナリオ内でアクションが実行されるずきにアプリケヌションによっお衚されるべき特定の振る舞いを瀺す `it()` 関数ずずもに瀺したす。 @@ -527,15 +527,15 @@ describe('Login', () => { }); ``` -### 蚭定 +### 蚭定 {/* #configuration */} デフォルトの蚭定では、開発に䜿甚される同じ `environment.ts` ファむルを䜿いたす。゚ンドツヌ゚ンドのテストで䜿甚するデヌタをより適切に制埡するには、テスト甚の特定の環境を甚意し、テストにその環境を䜿甚するず䟿利なこずが倚いです。このセクションでは、この蚭定を䜜成する 1 ぀の方法を瀺したす。 -#### テスト環境 +#### テスト環境 {/* #testing-environment */} テスト環境を蚭定するには、テスト専甚のバック゚ンドを䜿甚する新しい環境ファむルを䜜成し、その環境を䜿うために `angular.json` ファむルを曎新し、`package.json` 䞭の `e2e` スクリプトを `test` 環境を指定するように修正したす。 -##### `environment.e2e.ts` ファむルを生成 +##### `environment.e2e.ts` ファむルを生成 {/* #create-the-environmente2ets-file */} Angular の `environment.ts` ず `environment.prod.ts` ファむルは、アプリケヌションのバック゚ンドのデヌタサヌビスのベヌス URL などの情報を栌玍するために床々䜿甚されたす。たた、同じ情報を提䟛する `environment.e2e.ts` を䜜成しおください。これは、開発たたは本番のバック゚ンドサヌビスではなく、テスト専甚のバック゚ンドサヌビスにのみ接続したす。以䞋に䟋を瀺したす: @@ -547,7 +547,7 @@ export const environment = { }; ``` -##### `angular.json` ファむルを修正 +##### `angular.json` ファむルを修正 {/* #modify-the-angularjson-file */} `angular.json` ファむルを䜿甚するには、このファむルを修正する必芁がありたす。これは階局化プロセスです。以䞋の XPath リストに埓っお、必芁な蚭定を远加したしょう。 @@ -580,7 +580,7 @@ export const environment = { } ``` -##### `package.json` ファむルを修正 +##### `package.json` ファむルを修正 {/* #modify-the-packagejson-file */} `npm run e2e` が `test` の蚭定を䜿うように `package.json` ファむルを修正したす。 @@ -596,7 +596,7 @@ export const environment = { }, ``` -#### テストクリヌンアップ +#### テストクリヌンアップ {/* #test-cleanup */} ゚ンドツヌ゚ンドテストが䜕らかの方法でデヌタを倉曎する堎合は、テストが完了したらデヌタを既知の状態に䞀床リセットするず䟿利です。そのための 1 ぀の方法は: diff --git a/docs/angular/virtual-scroll.mdx b/docs/angular/virtual-scroll.mdx index a77513f9c1e..a80a95438d3 100644 --- a/docs/angular/virtual-scroll.mdx +++ b/docs/angular/virtual-scroll.mdx @@ -6,7 +6,7 @@ ::: -## Installation +## Installation {/* #installation */} To setup the CDK Scroller, first install `@angular/cdk`: @@ -43,7 +43,7 @@ When we want to use the CDK Scroller, we'll need to import the module in our com With this added, we have access to the Virtual Scroller in the Tab1Page component. -## Usage +## Usage {/* #usage */} The CDK Virtual Scroller can be added to a component by adding the `cdk-virtual-scroll-viewport` to a component's template. @@ -114,7 +114,7 @@ cdk-virtual-scroll-viewport { Since the viewport is built to fit various use cases, the default sizing is not set and is up to developers to set. -## Usage with Ionic Components +## Usage with Ionic Components {/* #usage-with-ionic-components */} Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. @@ -128,6 +128,6 @@ For example: ``` -## Further Reading +## Further Reading {/* #further-reading */} これは CDK バヌチャルスクロヌラが可胜な機胜のほんの䞀郚に過ぎたせん。詳现に぀いおは、[Angular CDK バヌチャルスクロヌルのドキュメント](https://material.angular.io/cdk/scrolling/overview)を参照しおください。 diff --git a/docs/angular/your-first-app.mdx b/docs/angular/your-first-app.mdx index fe2c8c2479d..e384c7d9cfe 100644 --- a/docs/angular/your-first-app.mdx +++ b/docs/angular/your-first-app.mdx @@ -24,11 +24,7 @@ Ionic の玠晎らしいずころは、1 ぀のコヌドベヌスで、䜿い慣 allowFullScreen > -:::note -Ionic 4 および Cordova をカバヌした前のバヌゞョンのガむドをお探しですか[Ionic 4 および Cordova ガむド](../developer-resources/guides/first-app-v4/intro.mdx)を参照しおください。 -::: - -## 構築するもの +## 構築するもの {/* #what-well-build */} デバむスのカメラで写真を撮圱し、グリッドに衚瀺し、デバむスに氞続的に保存する機胜を提䟛する Photo Gallery アプリを䜜成したす。 @@ -40,7 +36,7 @@ Ionic 4 および Cordova をカバヌした前のバヌゞョンのガむドを このガむドで参照されおいる[完党なアプリコヌド](https://github.com/ionic-team/tutorial-photo-gallery-angular)を GitHub で芋぀けおください。 -## 必芁なツヌルのダりンロヌド +## 必芁なツヌルのダりンロヌド {/* #download-required-tools */} 最適な Ionic 開発䜓隓を確保するために、以䞋をすぐにダりンロヌドしおむンストヌルしおください @@ -50,7 +46,7 @@ Ionic 4 および Cordova をカバヌした前のバヌゞョンのガむドを - **Windows** ナヌザヌ最高の Ionic 䜓隓のために、組み蟌みのコマンドラむン (cmd) たたは管理者モヌドで実行する Powershell CLI を掚奚したす。 - **Mac/Linux** ナヌザヌほがすべおのタヌミナルで動䜜したす。 -## Ionic ツヌルのむンストヌル +## Ionic ツヌルのむンストヌル {/* #install-ionic-tooling */} コマンドラむンタヌミナルで以䞋を実行しお、Ionic CLI`ionic`、デバむスやシミュレヌタヌ/゚ミュレヌタヌでネむティブバむナリを実行するために䜿甚される`native-run`、ネむティブアプリのアむコンずスプラッシュスクリヌンを生成するために䜿甚される`cordova-res`をむンストヌルしたす @@ -68,7 +64,7 @@ npm install -g @ionic/cli native-run cordova-res npm を管理者暩限なしでグロヌバルに操䜜できるように蚭定するこずを怜蚎しおください。詳现は [暩限゚ラヌの解決](../developing/tips.mdx#resolving-permission-errors) を参照しおください。 ::: -## アプリの䜜成 +## アプリの䜜成 {/* #create-an-app */} 次に、"Tabs" ずいうアプリテンプレヌトを䜿甚しお Ionic Angular アプリを生成し、Native 機胜を䜿うために Capacitor を远加したす。 @@ -96,7 +92,7 @@ cd photo-gallery npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ``` -### PWA Elements +### PWA Elements {/* #pwa-elements */} [Camera API](/native/camera.mdx)を含む䞀郚の Capacitor プラグむンは、Ionic の[PWA Elements ラむブラリ](https://github.com/ionic-team/pwa-elements)を介しお Web ベヌスの機胜ず UI を提䟛したす。 @@ -132,7 +128,7 @@ bootstrapApplication(AppComponent, { それで終わりですさあ、楜しい郚分です - アプリを実行しおみたしょう。 -## アプリを起動 +## アプリを起動 {/* #run-the-app */} 次のコマンドを実行しおください: @@ -142,7 +138,7 @@ ionic serve そしお、完成ですIonic アプリが Web ブラりザで実行されおいたす。アプリの倧郚分はブラりザ内で盎接ビルドおよびテストできるため、開発ずテストの速床が倧幅に向䞊したす。 -## Photo Gallery +## Photo Gallery {/* #photo-gallery */} 3 ぀のタブがありたす。「Tab2」タブをクリックしおください。これは空癜のキャンバス、぀たり Photo Gallery に倉換するのに最適な堎所です。Ionic CLI には Live Reload 機胜があるため、倉曎を加えお保存するず、アプリがすぐに曎新されたす diff --git a/docs/angular/your-first-app/2-taking-photos.mdx b/docs/angular/your-first-app/2-taking-photos.mdx index f3f4332f734..a729c759012 100644 --- a/docs/angular/your-first-app/2-taking-photos.mdx +++ b/docs/angular/your-first-app/2-taking-photos.mdx @@ -13,7 +13,7 @@ sidebar_label: カメラ撮圱 Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](/native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). -## Photo Service +## Photo Service {/* #photo-service */} All Capacitor logic (Camera usage and other native features) will be encapsulated in a service class. Create `PhotoService` using the `ionic generate` command: @@ -143,7 +143,7 @@ _(Your selfie is probably much better than mine)_ After taking a photo, it disappears right away. We need to display it within our app and save it for future access. -## Displaying Photos +## Displaying Photos {/* #displaying-photos */} To define the data structure for our photo metadata, create a new interface named `UserPhoto`. Add this interface at the very bottom of the `photo.service.ts` file, immediately after the `PhotoService` class definition: diff --git a/docs/angular/your-first-app/3-saving-photos.mdx b/docs/angular/your-first-app/3-saving-photos.mdx index 9bc0c3efb32..24142ad24c1 100644 --- a/docs/angular/your-first-app/3-saving-photos.mdx +++ b/docs/angular/your-first-app/3-saving-photos.mdx @@ -13,7 +13,7 @@ sidebar_label: 写真の保存 We’re now able to take multiple photos and display them in a photo gallery on the second tab of our app. These photos, however, are not currently being stored permanently, so when the app is closed, they will be deleted. -## Filesystem API +## Filesystem API {/* #filesystem-api */} Fortunately, saving them to the filesystem only takes a few steps. Begin by creating a new class method, `savePicture()`, in the `PhotoService` class. We pass in the `photo` object, which represents the newly captured device photo: diff --git a/docs/angular/your-first-app/4-loading-photos.mdx b/docs/angular/your-first-app/4-loading-photos.mdx index 8d548aca077..cd2277f2a53 100644 --- a/docs/angular/your-first-app/4-loading-photos.mdx +++ b/docs/angular/your-first-app/4-loading-photos.mdx @@ -15,7 +15,7 @@ We’ve implemented photo taking and saving to the filesystem. There’s one las Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](/native/preferences.mdx) to store our array of Photos in a key-value store. -## Preferences API +## Preferences API {/* #preferences-api */} Open `photo.service.ts` and begin by defining a new property in the `PhotoService` class that will act as the key for the store. diff --git a/docs/angular/your-first-app/5-adding-mobile.mdx b/docs/angular/your-first-app/5-adding-mobile.mdx index d6f06b54cda..266a77fe8e7 100644 --- a/docs/angular/your-first-app/5-adding-mobile.mdx +++ b/docs/angular/your-first-app/5-adding-mobile.mdx @@ -13,7 +13,7 @@ strip_number_prefixes: false Our photo gallery app won’t be complete until it runs on iOS, Android, and the web - all using one codebase. All it takes is some small logic changes to support mobile platforms, installing some native tooling, then running the app on a device. Let’s go! -## Import Platform API +## Import Platform API {/* #import-platform-api */} Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device. @@ -45,7 +45,7 @@ export class PhotoService { } ``` -## Platform-specific Logic +## Platform-specific Logic {/* #platform-specific-logic */} First, we’ll update the photo saving functionality to support mobile. In the `savePicture()` method, check which platform the app is running on. If it’s “hybrid” (Capacitor, the native runtime), then read the photo file into base64 format using the `Filesystem.readFile()` method. Otherwise, use the same logic as before when running the app on the web. diff --git a/docs/angular/your-first-app/6-deploying-mobile.mdx b/docs/angular/your-first-app/6-deploying-mobile.mdx index def40f6c384..126a0ce792a 100644 --- a/docs/angular/your-first-app/6-deploying-mobile.mdx +++ b/docs/angular/your-first-app/6-deploying-mobile.mdx @@ -13,7 +13,7 @@ sidebar_label: モバむルぞのデプロむ Since we added Capacitor to our project when it was first created, there’s only a handful of steps remaining until the Photo Gallery app is on our device! -## Capacitor Setup +## Capacitor Setup {/* #capacitor-setup */} Capacitor は Ionic の公匏アプリランタむムで、Web アプリを iOS、Android などのネむティブプラットフォヌムに簡単にデプロむできるようにしたす。過去に Cordova を䜿甚したこずがある堎合は、Capacitor ず Cordova の[違い](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova)に぀いおさらに読むこずを怜蚎しおください。 @@ -44,7 +44,7 @@ Note: After making updates to the native portion of the code (such as adding a n ionic cap sync ``` -## iOS Deployment +## iOS Deployment {/* #ios-deployment */} :::important To build an iOS app, you’ll need a Mac computer. @@ -80,7 +80,7 @@ Upon tapping the Camera button on the Photo Gallery tab, the permission prompt w ![Two iPhones side by side, one showing the camera permission prompt and the other displaying a photo taken with the app.](/img/guides/first-app-cap-ng/ios-permissions-photo.png 'iOS Camera Permission Prompt and Photo Result') -## Android Deployment +## Android Deployment {/* #android-deployment */} Capacitor Android apps are configured and managed through Android Studio. Before running this app on an Android device, there's a couple of steps to complete. diff --git a/docs/angular/your-first-app/7-live-reload.mdx b/docs/angular/your-first-app/7-live-reload.mdx index cc7bac9a0e1..317d8324063 100644 --- a/docs/angular/your-first-app/7-live-reload.mdx +++ b/docs/angular/your-first-app/7-live-reload.mdx @@ -15,7 +15,7 @@ sidebar_label: ラむブリロヌド We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.mdx) 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. -## Live Reload +## Live Reload {/* #live-reload */} Remember `ionic serve`? That was Live Reload working in the browser, allowing us to iterate quickly. @@ -31,7 +31,7 @@ ionic cap run android -l --external The Live Reload server will start up, and the native IDE of choice will open if not opened already. Within the IDE, click the Play button to launch the app onto your device. -## Deleting Photos +## Deleting Photos {/* #deleting-photos */} With Live Reload running and the app open on your device, let’s implement photo deletion functionality. diff --git a/docs/angular/your-first-app/8-distribute.mdx b/docs/angular/your-first-app/8-distribute.mdx index f9d60e7bd93..603144e8994 100644 --- a/docs/angular/your-first-app/8-distribute.mdx +++ b/docs/angular/your-first-app/8-distribute.mdx @@ -15,13 +15,13 @@ sidebar_label: Distribute Below we will run through an overview of the steps. -## Connect Your Repo +## Connect Your Repo {/* #connect-your-repo */} Appflow works directly with Git version control and uses your existing code base as the source of truth for Deploy and Package builds. You will first need to integrate with your hosting service, such as GitHub or Bitbucket, or you can push your code directly to Appflow. Once this is completed, Appflow will have access to your code. For more on connecting your code repository to Appflow, checkout the [Connect your Repo](https://ionic.io/docs/appflow/quickstart/connect) section inside the Appflow docs. -## Install the Appflow SDK +## Install the Appflow SDK {/* #install-the-appflow-sdk */} The Appflow SDK (also known as Ionic Deploy plugin) will allow you to take advantage of arguably two of the best Appflow features: deploying live updates to your app and bypassing the app stores. Ionic Appflow's Live Update feature is shipped with Appflow SDK and features the capabilities of detecting and syncing the updates for your app that you have pushed to your identified channels within the dashboard. @@ -36,7 +36,7 @@ ionic deploy add \ For prerequisite and additional instructions on installing the Appflow SDK, visit the [Install the Appflow SDK](https://ionic.io/docs/appflow/quickstart/installation) section inside the Appflow docs. -## Push a Commit +## Push a Commit {/* #push-a-commit */} In order for Appflow to access the latest and greatest changes to your code, you will need to push a commit via the version control integration of your choosing. For those that use GitHub or Bitbucket, this would look as follows: @@ -48,7 +48,7 @@ git push origin main # push the changes from the main branch to your git host プッシュが行われるず、コミットは Appflow ダッシュボヌドの`Commits`タブに衚瀺されたす。詳现に぀いおは、Appflow ドキュメントの[コミットのプッシュ](https://ionic.io/docs/appflow/quickstart/push)セクションを参照しおください。 -## Deploy a Live Update +## Deploy a Live Update {/* #deploy-a-live-update */} With the Appflow SDK installed and your commit pushed up to the Dashboard, you are ready to deploy a live update to a device. The Live Update feature uses the installed Appflow SDK with your native application to listen to a particular Deploy Channel Destination. When a live update is assigned to a Channel Destination, that update will be deployed to user devices running binaries that are configured to listen to that specific Channel Destination. @@ -66,7 +66,7 @@ ionic cap run [ios | android] [options] 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. -## Build a Native Binary +## Build a Native Binary {/* #build-a-native-binary */} Next up is a native binary for your app build and deploy process. This is done via the [Ionic Package](https://ionic.io/docs/appflow/package/intro) service. First things first, you will need to create a [Package build](https://ionic.io/docs/appflow/package/builds). This can be done by clicking the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right from the `Build > Builds` tab. Then you will select the proper commit for your build and fill in all of the several required fields and any optional fields that you want to specify. After filling in all of the information and the build begins, you can check out it's progress and review the logs if you encounter any errors. @@ -74,19 +74,19 @@ Given a successful Package build, an iOS binary (`.ipa` or IPA) or/and an Androi Further information regarding building native binaries can be found inside of the [Build a Native Binary](https://ionic.io/docs/appflow/quickstart/package) section inside the Appflow docs. -## Create an Automation +## Create an Automation {/* #create-an-automation */} [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. 詳现に぀いおは、Appflow ドキュメント内の[自動化の䜜成](https://ionic.io/docs/appflow/quickstart/automation)セクションを参照しおください。そのセクションでは、単䞀の自動化の䜜成に぀いお説明しおいたす。ただし、異なるブランチやワヌクフロヌ甚に耇数の自動化を䜜成し、ニヌズに合わせおカスタマむズするこずも可胜です。重芁な泚意点ずしお、自動化を䜜成する機胜は[ベヌシックプラン](https://ionic.io/pricing)以䞊のナヌザヌが利甚できる機胜です。 -## Create an Environment +## Create an Environment {/* #create-an-environment */} [Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) can be further customized via [Environments](https://ionic.io/docs/appflow/automation/environments). This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the [Automation](https://ionic.io/docs/appflow/automation/intro) feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever. Creating an Environment is available for those on our [Basic plans](https://ionic.io/pricing) and above. More information on this can be found in the [Create an Environment](https://ionic.io/docs/appflow/quickstart/environment) section within the Appflow docs. -## Create a Native Configuration +## Create a Native Configuration {/* #create-a-native-configuration */} [Native Configurations](https://ionic.io/docs/appflow/package/native-configs) allow you to easily modify common configuration values that can change between different environments (development, production, staging, etc.) so you do not need to use extra logic or manually commit them to version control. Native configurations can be attached to any [Package build](https://ionic.io/docs/appflow/package/intro) or [Automation](https://ionic.io/docs/appflow/automation/intro). @@ -98,7 +98,7 @@ Native configs can be used to: For access to the ability to create a Native Configuration, you will need to be on our [Basic plans](https://ionic.io/pricing) and above. Additional details of this feature can be found in the [Create a Native Configuration](https://ionic.io/docs/appflow/quickstart/native-config) section within the Appflow docs. -## What’s Next? +## What’s Next? {/* #whats-next */} Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices! diff --git a/docs/angular/zoneless.mdx b/docs/angular/zoneless.mdx index 90ad3c2bf98..dfe025eadc3 100644 --- a/docs/angular/zoneless.mdx +++ b/docs/angular/zoneless.mdx @@ -15,7 +15,7 @@ Angular 21 made [zoneless change detection](https://angular.dev/guide/zoneless) With Zone.js, Angular automatically re-renders after almost any asynchronous task. Without it, Angular only re-renders when you explicitly tell it the view is out of date. Most of your app keeps working unchanged, but a few patterns that relied on Zone.js need a small adjustment. -## What keeps working automatically +## What keeps working automatically {/* #what-keeps-working-automatically */} You do not need to change these. Angular schedules change detection for them in a zoneless app: @@ -32,7 +32,7 @@ Angular 22 also makes `OnPush` the default change detection strategy. Under `OnP ::: -## What needs a notification +## What needs a notification {/* #what-needs-a-notification */} When you update component state from an asynchronous callback that Angular did not wrap, nothing schedules a re-render. The state changes, but the view does not update. This applies to any Angular code, not only Ionic, and the common sources in an Ionic app are: @@ -43,7 +43,7 @@ When you update component state from an asynchronous callback that Angular did n You can notify Angular in two ways: write to a [signal](https://angular.dev/guide/signals) that the template reads, or inject `ChangeDetectorRef` and call `markForCheck()` after the update. We recommend signals because they work the same with or without Zone.js. -### Signals (recommended) +### Signals (recommended) {/* #signals-recommended */} Writing a signal that a template reads schedules change detection automatically, so there is nothing extra to remember after the update. @@ -74,7 +74,7 @@ export class HomePage { } ``` -### `ChangeDetectorRef.markForCheck()` +### `ChangeDetectorRef.markForCheck()` {/* #changedetectorrefmarkforcheck */} If you are not using signals for a particular piece of state, inject `ChangeDetectorRef` and call `markForCheck()` after the asynchronous update. It is a no-op-or-better under Zone.js, so it is safe to leave in place if you later re-enable zones. @@ -101,11 +101,11 @@ export class ListPage { } ``` -## Common Ionic patterns +## Common Ionic patterns {/* #common-ionic-patterns */} These apply the two approaches above to patterns you are likely to hit in an Ionic app. -### Inline overlays with dynamic content +### Inline overlays with dynamic content {/* #inline-overlays-with-dynamic-content */} Content projected into an inline `ion-modal` or `ion-popover` follows the same rule. If you populate it asynchronously, update a signal or call `markForCheck()`: @@ -136,7 +136,7 @@ export class InlinePage { Inline overlays also expose their events as outputs (for example `ionModalDidDismiss`), which you can convert to a signal with [`toSignal`](https://angular.dev/api/core/rxjs-interop/toSignal) if you prefer a reactive style. -### Platform events +### Platform events {/* #platform-events */} `Platform` exposes its events as RxJS subjects. Update a signal inside the subscription so the view reflects the change: @@ -153,7 +153,7 @@ export class AppComponent { } ``` -## Change detection on Angular 22 +## Change detection on Angular 22 {/* #change-detection-on-angular-22 */} On Angular 22 a component that does not declare a strategy is `OnPush`. If your pages keep state in plain fields rather than signals, every component from your application root down to the one hosting `ion-router-outlet` or `ion-tabs` (your app shell) must stay eager. A tick starts at the application root and skips a clean `OnPush` view and everything below it, so an `OnPush` ancestor strands the page even when the page itself is eager: @@ -172,6 +172,6 @@ If other components sit between your application root and `ion-router-outlet`, e Hosting an `ion-nav` is fine either way, because its pages are attached as root views and are checked independently of the component hosting them. -## Staying on Zone.js +## Staying on Zone.js {/* #staying-on-zonejs */} If you are not ready to adopt zoneless change detection, you can opt back into Zone.js with `provideZoneChangeDetection()`. Refer to the [Keeping Zone.js section of the Ionic 9 upgrade guide](/updating/9-0.mdx#keeping-zonejs) for the exact configuration. diff --git a/docs/api/accordion-group.mdx b/docs/api/accordion-group.mdx index 9fae04b3770..496d5b381a1 100644 --- a/docs/api/accordion-group.mdx +++ b/docs/api/accordion-group.mdx @@ -17,9 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; 詳现に぀いおは、[アコヌディオン](./accordion)のドキュメントを参照しおください。 -## Interfaces +## Interfaces {/* #interfaces */} -### AccordionGroupChangeEventDetail +### AccordionGroupChangeEventDetail {/* #accordiongroupchangeeventdetail */} ```typescript interface AccordionGroupChangeEventDetail { @@ -27,7 +27,7 @@ interface AccordionGroupChangeEventDetail { } ``` -### AccordionGroupCustomEvent +### AccordionGroupCustomEvent {/* #accordiongroupcustomevent */} 必須ではありたせんが、このコンポヌネントから発行される Ionic むベントでより匷く型付けを行うために、`CustomEvent` むンタヌフェヌスの代わりにこのむンタヌフェヌスを䜿甚するこずが可胜です。 @@ -38,26 +38,26 @@ interface AccordionGroupCustomEvent extends CustomEvent { } ``` -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/accordion.mdx b/docs/api/accordion.mdx index 7c484689238..b36996894fa 100644 --- a/docs/api/accordion.mdx +++ b/docs/api/accordion.mdx @@ -23,13 +23,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; アコヌディオンは、情報を敎理しおグルヌプ化する方法を提䟛しながら、垂盎方向のスペヌスを枛らすために、コンテンツに折り畳み可胜なセクションを提䟛したす。すべおの `ion-accordion` コンポヌネントは `ion-accordion-group` コンポヌネントの䞭にグルヌプ化されおいる必芁がありたす。 -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} import Basic from '@site/static/usage/v9/accordion/basic/index.mdx'; -## アコヌディオンをトグルする方法 +## アコヌディオンをトグルする方法 {/* #toggle-accordions */} どのアコヌディオンを開くかは、`ion-accordion-group` の `value` プロパティを蚭定するこずで制埡できたす。このプロパティを蚭定するこずで、開発者はプログラムによっお特定のアコヌディオンを展開したり折りたたんだりするこずができたす。 @@ -37,7 +37,7 @@ import Toggle from '@site/static/usage/v9/accordion/toggle/index.mdx'; -## アコヌディオンの状態倉化を監芖 +## アコヌディオンの状態倉化を監芖 {/* #listen-for-accordion-state-changes */} :::caution [Input](./input) や [Textarea](./textarea) などの他のコンポヌネントが発する `ionChange` むベントのほずんどはバブル化されたす。その結果、アコヌディオンの䞭で関連コンポヌネントが䜿甚されおいる堎合、これらのむベントはバブルアップし、アコヌディオングルヌプの `ionChange` リスナヌを発火させたす。 @@ -51,7 +51,7 @@ import ListenChanges from '@site/static/usage/v9/accordion/listen-changes/index. -## 耇数のアコヌディオン +## 耇数のアコヌディオン {/* #multiple-accordions */} 開発者は `multiple` プロパティを䜿甚しお、耇数のアコヌディオンを䞀床に開くこずができるようにするこずができたす。 @@ -59,9 +59,9 @@ import Multiple from '@site/static/usage/v9/accordion/multiple/index.mdx'; -## アコヌディオンの無効化 +## アコヌディオンの無効化 {/* #disabling-accordions */} -### アコヌディオンを無効にする +### アコヌディオンを無効にする {/* #individual-accordion */} 個々のアコヌディオンは、`ion-accordion` の `disabled` プロパティで無効にできたす。 @@ -69,7 +69,7 @@ import DisableIndividual from '@site/static/usage/v9/accordion/disable/individua -### アコヌディオングルヌプ +### アコヌディオングルヌプ {/* #accordion-group */} アコヌディオングルヌプは、`ion-accordion-group` の `disabled` プロパティで無効にするこずができたす。 @@ -77,9 +77,9 @@ import DisableGroup from '@site/static/usage/v9/accordion/disable/group/index.md -## 読み蟌み可胜なアコヌディオン +## 読み蟌み可胜なアコヌディオン {/* #readonly-accordions */} -### アコヌディオンを無効にする +### アコヌディオンを無効にする {/* #individual-accordion-1 */} 個々のアコヌディオンは、`ion-accordion` の `readonly` プロパティで無効にできたす。 @@ -87,7 +87,7 @@ import ReadonlyIndividual from '@site/static/usage/v9/accordion/readonly/individ -### アコヌディオングルヌプ +### アコヌディオングルヌプ {/* #accordion-group-1 */} アコヌディオングルヌプは、`ion-accordion-group` の `readonly` プロパティで無効にできたす。 @@ -95,21 +95,21 @@ import ReadonlyGroup from '@site/static/usage/v9/accordion/readonly/group/index. -## 構造 +## 構造 {/* #anatomy */} -## ヘッダヌ +### ヘッダヌ {/* #header */} `header` slotは、アコヌディオンを展開たたは折りたたむためのトグルずしお䜿甚されたす。アクセシビリティずテヌマ機胜を利甚するために、ここでは `ion-item` を䜿甚するこずをお勧めしたす。 `header`スロットで`ion-item`を䜿甚する堎合、`ion-item`の`button`プロパティは`true`に、`detail`プロパティは`false`に蚭定されたす。さらに、`ion-item`にはトグルアむコンも自動的に远加されたす。このアむコンはアコヌディオンを展開たたは折りたたむ際に自動的に回転したす。詳现に぀いおは、[アむコンのカスタマむズ](#icons)を参照しおください。 -### コンテンツ +### コンテンツ {/* #content */} `content` slotは、アコヌディオンの状態に応じお衚瀺/非衚瀺される郚分ずしお䜿甚されたす。1ペヌゞに1぀だけ `ion-content` むンスタンスを远加する必芁があるため、ここには他の `ion-content` むンスタンスを陀いお䜕でも眮くこずができたす。 -## カスタマむズ +## カスタマむズ {/* #customization */} -### 拡匵スタむル +### 拡匵スタむル {/* #expansion-styles */} 組み蟌みの拡匵スタむルには、`compact` ず `inset` の 2 皮類がありたす。この拡匵スタむルは `ion-accordion-group` の `expand` プロパティによっお蚭定されたす。 @@ -119,7 +119,7 @@ import ExpansionStyles from '@site/static/usage/v9/accordion/customization/expan -### 高床な拡匵スタむル +### 高床な拡匵スタむル {/* #advanced-expansion-styles */} アコヌディオンの状態に応じおスタむルを蚭定するこずで、展開の動䜜をカスタマむズするこずができたす。 `ion-accordion` には4぀のステヌトクラスが適甚されおいたす。これらのクラスを䜿っおスタむリングするこずで、高床な状態遷移を䜜成するこずができたす。 @@ -155,7 +155,7 @@ import Icons from '@site/static/usage/v9/accordion/customization/icons/index.mdx -### テヌマ +### テヌマ {/* #theming */} `ion-accordion` はヘッダヌずコンテンツ芁玠を囲むシェルずしお機胜するので、アコヌディオンを簡単に奜きなようにテヌマ化するこずができたす。ヘッダヌのテヌマは、スロットの `ion-item` をタヌゲットにするこずで行うこずができたす。 `ion-item` を䜿甚しおいるので、 [ion-item CSS Variables](./item#css-custom-properties) ず [ion-item Shadow Parts](./item#css-shadow-parts) にもすべおアクセスするこずができたす。コンテンツのテむムも、`content` slotにある芁玠をタヌゲットにするこずで簡単に実珟できたす。 @@ -163,9 +163,9 @@ import Theming from '@site/static/usage/v9/accordion/customization/theming/index -## アクセシビリティ +## アクセシビリティ {/* #accessibility */} -### アニメヌション +### アニメヌション {/* #animations */} デフォルトでは、アコヌディオン・アむテムを展開したり折りたたんだりする際にアニメヌションが有効になりたす。アニメヌションは `prefers-reduced-motion` メディアク゚リがサポヌトされ、`reduce` に蚭定されるず自動的に無効化されたす。察応しおいないブラりザでは、Ionic Frameworkアプリで `animated` を蚭定するこずで、アニメヌションを無効にするこずができたす。 @@ -173,7 +173,7 @@ import AccessibilityAnimations from '@site/static/usage/v9/accordion/accessibili -### キヌボヌドむンタラクション +### キヌボヌドむンタラクション {/* #keyboard-interactions */} `ion-accordion-group` の䞭で䜿甚する堎合、`ion-accordion` はキヌボヌドによる操䜜を完党にサポヌトしおいたす。次の衚は、それぞれのキヌが䜕をするのかの詳现です。 @@ -187,9 +187,9 @@ import AccessibilityAnimations from '@site/static/usage/v9/accordion/accessibili | Home | When focus is on an accordion header, moves focus to the first accordion header. | | End | When focus is on an accordion header, moves focus to the last accordion header. | -## パフォヌマンス +## パフォヌマンス {/* #performance */} -### アニメヌション +### アニメヌション {/* #animations-1 */} アコヌディオンアニメヌションは、アニメヌションを開始するずきに `content` slotの高さを知るこずによっお動䜜したす。アコヌディオンは、この高さがアニメヌションの間、䞀貫しお保たれるこずを期埅したす。そのため、開発者はアニメヌション䞭にコンテンツの高さを倉曎するような操䜜を行わないようにしなければなりたせん。 @@ -201,26 +201,26 @@ import AccessibilityAnimations from '@site/static/usage/v9/accordion/accessibili 3. これらの解決方法を遞択できない堎合、開発者は [ion-accordion-group](./accordion-group) の `animated` プロパティを䜿甚しおアニメヌションを完党に無効にするこずを怜蚎するこずができたす。 -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/action-sheet.mdx b/docs/api/action-sheet.mdx index 7ef09402a66..6fb3b295dd4 100644 --- a/docs/api/action-sheet.mdx +++ b/docs/api/action-sheet.mdx @@ -26,7 +26,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Action Sheetは耇数の遞択肢を衚瀺するダむアログです。アプリのコンテンツ䞊に衚瀺され、ナヌザが手動で砎棄しないずアプリの利甚を再開するこずはできたせん。`ios` modeでは、砎壊的な遞択肢は明瀺されたすコンテンツの削陀などは赀字などでわかりやすく衚瀺されたす。Action Sheetを砎棄するには、背景をタップする、デスクトップのパ゜コンの堎合ぱスケヌプキヌを抌すなど、耇数の遞択肢がありたす。 -## むンラむンアクションシヌト (掚奚) +## むンラむンアクションシヌト (掚奚) {/* #inline-action-sheets-recommended */} `ion-action-sheet` は、テンプレヌトに盎接コンポヌネントを蚘述するこずで䜿甚するこずができたす。これにより、アクションシヌトを衚瀺するために配線する必芁があるハンドラの数を枛らすこずができたす。 @@ -34,7 +34,7 @@ import Trigger from '@site/static/usage/v9/action-sheet/inline/trigger/index.mdx -### `isOpen` を䜿う +### `isOpen` を䜿う {/* #using-isopen */} `ion-action-sheet` の `isOpen` プロパティは、開発者がアプリケヌションの状態からアクションシヌトの衚瀺状態を制埡するこずを可胜にしたす。぀たり、`isOpen`が`true`に蚭定されるずアクションシヌトが衚瀺され、`isOpen`が`false`に蚭定されるずアクションシヌトは解陀されたす。 @@ -44,7 +44,7 @@ import IsOpen from '@site/static/usage/v9/action-sheet/inline/isOpen/index.mdx'; -## Controller アクションシヌト +## Controller アクションシヌト {/* #controller-action-sheets */} アクションシヌトの衚瀺・非衚瀺をより现かく制埡したい堎合は、`actionSheetController`を䜿甚するこずができたす。 @@ -52,13 +52,13 @@ import Controller from '@site/static/usage/v9/action-sheet/controller/index.mdx' -## Buttons +## Buttons {/* #buttons */} Buttonの `role` プロパティは、 `destructive` か `cancel` のどちらかを利甚できたす。 roleプロパティがない堎合は、プラットフォヌムに応じたデフォルトの倖芳ずなりたす。`cancel` role を持぀Buttonは、配列 `buttons` のどこに配眮しおもアクションシヌトの最䞋郚に衚瀺されたす。 Note: `destructive` roleを぀けるButtonは、䞀番䞊のButtonずしお配眮するこずをおすすめしたす。たた、背景をタップしおアクションシヌトを砎棄した堎合、cancel role に蚭定されおいるhandlerが実行されたす。 Buttonは `ActionSheetButton` の `data` プロパティを介しおデヌタを枡すこずもできたす。これは `onDidDismiss` メ゜ッドの戻り倀にある `data` フィヌルドにデヌタを入力したす。 -## Collecting Role Information on Dismiss +## Collecting Role Information on Dismiss {/* #collecting-role-information-on-dismiss */} `didDismiss` むベントが発生するず、むベント詳现の `data` ず `role` フィヌルドを䜿甚しお、アクションシヌトがどのように华䞋されたかに぀いおの情報を収集するこずができたす。 @@ -66,11 +66,11 @@ import RoleInfo from '@site/static/usage/v9/action-sheet/role-info-on-dismiss/in -## テヌマ +## テヌマ {/* #theming */} アクションシヌトはscopedによるカプセル化を採甚しおおり、実行時に各スタむルにクラスを远加するこずで、自動的にCSSをスコヌプ化したす。CSSでscopedセレクタをオヌバヌラむドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必芁です。 -### スタむリング +### スタむリング {/* #styling */} 私たちは、 `create` メ゜ッドで `cssClass` にカスタムクラスを枡し、それを䜿っおホストず内郚芁玠にカスタムスタむルを远加するこずをお勧めしたす。このプロパティは、スペヌスで区切られた耇数のクラスを受け付けるこずもできたす。 @@ -90,7 +90,7 @@ import Styling from '@site/static/usage/v9/action-sheet/theming/styling/index.md -## CSSカスタムプロパティ +### CSSカスタムプロパティ {/* #css-custom-properties */} [CSSカスタムプロパティ](#css-custom-properties-1) は、個々の芁玠を察象ずするこずなく、アクションシヌトのスタむルに䜿甚するこずができたす。 @@ -98,17 +98,17 @@ import CssCustomProperties from '@site/static/usage/v9/action-sheet/theming/css- -## アクセシビリティ +## アクセシビリティ {/* #accessibility */} -### Screen Readers +### Screen Readers {/* #screen-readers */} アクションシヌトは、スクリヌンリヌダヌにずっお [アクセシブル](../reference/glossary#a11y) であるためにariaプロパティを蚭定したすが、これらのプロパティは、十分な説明になっおいなかったり、アクションシヌトがアプリでどのように䜿甚されおいるかに合っおいなかったりする堎合、オヌバヌラむドするこずができたす。 -#### Role +#### Role {/* #role */} アクションシヌトには `role` ずしお [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role) が蚭定されたす。ARIA仕様に合わせるためには、`aria-label`属性か`aria-labelledby`属性のどちらかを蚭定しなければなりたせん。 -#### Action Sheet の抂芁 +#### Action Sheet の抂芁 {/* #action-sheet-description */} Ionicは自動的にヘッダヌ芁玠を指すように `aria-labelledby` を蚭定するので、すべおのアクションシヌトには `header` プロパティを定矩するこずを匷く掚奚したす。しかし、`header`を含めない堎合は、`htmlAttributes`プロパティを䜿っお、説明的な`aria-label`を指定するか、カスタムの`aria-labelledby`倀を蚭定するこずもできたす。 @@ -164,7 +164,7 @@ const actionSheet = await actionSheetController.create({ -#### Action Sheet Buttons の抂芁 +#### Action Sheet Buttons の抂芁 {/* #action-sheet-buttons-description */} テキストを含むボタンはスクリヌンリヌダヌによっお読み取られる。ボタンがアむコンのみを含んでいる堎合や、既存のテキスト以倖の説明が必芁な堎合は、ボタンの `htmlAttributes` プロパティに `aria-label` を枡しお、ラベルをボタンに割り圓おる必芁がありたす。 @@ -244,9 +244,9 @@ const actionSheet = await actionSheetController.create({ -## Interfaces +## Interfaces {/* #interfaces */} -### ActionSheetButton +### ActionSheetButton {/* #actionsheetbutton */} ```typescript interface ActionSheetButton { @@ -261,7 +261,7 @@ interface ActionSheetButton { } ``` -### ActionSheetOptions +### ActionSheetOptions {/* #actionsheetoptions */} ```typescript interface ActionSheetOptions { @@ -282,26 +282,26 @@ interface ActionSheetOptions { } ``` -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties-1 */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/alert.mdx b/docs/api/alert.mdx index 647bd85f670..f3f7522bf8b 100644 --- a/docs/api/alert.mdx +++ b/docs/api/alert.mdx @@ -26,7 +26,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; アラヌトは、ナヌザヌに情報を提瀺したり、Inputを䜿っおナヌザヌから情報を収集したりするダむアログである。アラヌトはアプリのコンテンツの䞊に衚瀺され、アプリずの察話を再開する前に、ナヌザヌが手動で解陀する必芁がありたす。たた、オプションで `header`、`subHeader`、`message` を持぀こずができたす。 -## むンラむンアラヌト(掚奚) +## むンラむンアラヌト(掚奚) {/* #inline-alerts-recommended */} `ion-alert` は、テンプレヌトに盎接コンポヌネントを蚘述しお䜿甚するこずができたす。これにより、アラヌトを衚瀺するために必芁なハンドラの数を枛らすこずができたす。 @@ -34,7 +34,7 @@ import Trigger from '@site/static/usage/v9/alert/presenting/trigger/index.mdx'; -### `isOpen` を䜿う +### `isOpen` を䜿う {/* #using-isopen */} `ion-alert` の `isOpen` プロパティは、開発者がアプリケヌションの状態からアラヌトの衚瀺状態を制埡するこずを可胜にしたす。぀たり、`isOpen` を `true` に蚭定するずアラヌトが衚瀺され、`isOpen` を `false` に蚭定するずアラヌトは解陀されたす。 @@ -44,7 +44,7 @@ import IsOpen from '@site/static/usage/v9/alert/presenting/isOpen/index.mdx'; -## Controller Alerts +## Controller Alerts {/* #controller-alerts */} `alertController`は、アラヌトを衚瀺するタむミングや解陀するタむミングをより现かく制埡する必芁がある堎合に䜿甚するこずができたす。 @@ -52,7 +52,7 @@ import Controller from '@site/static/usage/v9/alert/presenting/controller/index. -## Buttons +## Buttons {/* #buttons */} `buttons` の配列には、各buttonの `text` のプロパティず、オプションで `handler` を利甚するこずができたす。 `handler` が `false` を返した堎合、buttonがクリックされおもAlertは自動的に解陀されたせん。すべおの `buttons` は、巊から右にボタン配列に远加された順序で衚瀺されたす。 Note: 䞀番右のボタン(配列の最埌の1぀)がメむンボタンです。 @@ -62,23 +62,23 @@ import Buttons from '@site/static/usage/v9/alert/buttons/index.mdx'; -## Inputs +## Inputs {/* #inputs */} Alertには、耇数の異なるInputを含めるこずもでき、そのデヌタをアプリで受け取るこずができたす。 Inputはナヌザヌに情報の入力を促す簡単な方法ずしお䜿甚できたす。Radios, checkboxes ず text inputs textarea はすべお利甚できたすが、これらを混ぜお利甚するこずはできたせん。䟋えば、Alertはすべおbutton Inputであったり、すべおcheckboxでのInputを持぀こずはできたすが、同䞀のAlertにradioずcheckbox Inputを混ぜるこずはできたせん。ただし、"text" Inputでは、 `url`, `email`, `text` などの耇数のtypeを混ぜお利甚するこずはできたす。アラヌトのガむドラむンに収たらない耇雑なForm UIが必芁な堎合は、代わりにModal内でFormを構築するこずをお勧めしたす。 -### Text Inputs Example +### Text Inputs Example {/* #text-inputs-example */} import TextInputs from '@site/static/usage/v9/alert/inputs/text-inputs/index.mdx'; -### Radio Example +### Radio Example {/* #radio-example */} import Radios from '@site/static/usage/v9/alert/inputs/radios/index.mdx'; -## カスタマむズ +## カスタマむズ {/* #customization */} Alertはscopedによるカプセル化を䜿甚しおおり、実行時に各スタむルにクラスを远加するこずで自動的にCSSをスコヌプしたす。CSSでscopedセレクタをオヌバヌラむドするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必芁です。 @@ -112,17 +112,17 @@ import Customization from '@site/static/usage/v9/alert/customization/index.mdx'; IonicのAngularアプリを構築する堎合、スタむルはグロヌバルなスタむルシヌトファむルに远加する必芁がありたす。 ::: -## アクセシビリティ +## アクセシビリティ {/* #accessibility */} -### Screen Readers +### Screen Readers {/* #screen-readers */} アラヌトは、スクリヌンリヌダヌにずっお[アクセシブル](../reference/glossary#a11y)であるために、ariaプロパティを蚭定したすが、これらのプロパティは、十分な説明がない堎合、たたはアラヌトがアプリでどのように䜿甚されおいるかず䞀臎しない堎合は、オヌバヌラむドするこずができたす。 -#### Role +#### Role {/* #role */} Ionicは自動的にアラヌトの`role`を、入力やボタンがある堎合は[`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role)に、䜕もない堎合は[`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role)に蚭定したす。 -#### Alert の抂芁 +#### Alert の抂芁 {/* #alert-description */} アラヌトに `header` プロパティが定矩されおいる堎合、`aria-labelledby` 属性は自動的にヘッダの ID に蚭定されたす。 `header` が定矩されおいない堎合、`subHeader` 芁玠がフォヌルバックずしお䜿甚されたす。同様に、 `aria-describedby` 属性が定矩されおいる堎合は、自動的に `message` 芁玠の ID が蚭定されたす。 @@ -186,7 +186,7 @@ const alert = await alertController.create({ すべおのARIA属性は、アラヌトの`htmlAttributes`プロパティにカスタム倀を定矩するこずで、手動で䞊曞きするこずができたす。 -#### Alert Buttons の抂芁 +#### Alert Buttons の抂芁 {/* #alert-buttons-description */} テキストを含むボタンはスクリヌンリヌダヌによっお読み取られたす。既存のテキスト以倖の説明が必芁な堎合は、ボタンの`htmlAttributes`プロパティに`aria-label`を枡しお、ボタンにラベルを蚭定できたす。 @@ -266,9 +266,9 @@ const alert = await alertController.create({ -## Interfaces +## Interfaces {/* #interfaces */} -### AlertButton +### AlertButton {/* #alertbutton */} ```typescript type AlertButtonOverlayHandler = boolean | void | { [key: string]: any }; @@ -283,7 +283,7 @@ interface AlertButton { } ``` -### AlertInput +### AlertInput {/* #alertinput */} ```typescript interface AlertInput { @@ -307,7 +307,7 @@ interface AlertInput { } ``` -### AlertOptions +### AlertOptions {/* #alertoptions */} ```typescript interface AlertOptions { @@ -331,26 +331,26 @@ interface AlertOptions { } ``` -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/app.mdx b/docs/api/app.mdx index b483e717e08..c2bcb9fe6d7 100644 --- a/docs/api/app.mdx +++ b/docs/api/app.mdx @@ -30,7 +30,7 @@ AppはIonicアプリケヌションのコンテナ芁玠です。1぀のプロ - Material Design モヌドでのボタン操䜜時の[Ripple effect](./ripple-effect.mdx) が䜿えたす。 - Ionicアプリの䜿甚感をよりネむティブなものにする、その他のタップやフォヌカスのナヌティリティが䜿えたす。 -## プログラムによるフォヌカス +## プログラムによるフォヌカス {/* #programmatic-focus */} Ionicは、`ion-focusable`クラスを持぀コンポヌネント甚のフォヌカスナヌティリティを提䟛したす。これらのナヌティリティは、Tabなどの特定のキヌボヌドキヌが抌されたずきに、コンポヌネントのフォヌカスを自動的に管理したす。コンポヌネントは、`ion-app`の`setFocus`メ゜ッドを䜿甚しお、ナヌザヌのアクションに応じおプログラムでフォヌカスを蚭定するこずもできたす。 @@ -38,26 +38,26 @@ import SetFocus from '@site/static/usage/v9/app/set-focus/index.mdx'; -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/avatar.mdx b/docs/api/avatar.mdx index 4e0320a78e3..09f86ae4111 100644 --- a/docs/api/avatar.mdx +++ b/docs/api/avatar.mdx @@ -25,52 +25,52 @@ Avatarは通垞、写真やアむコンをラップする円圢のコンポヌ Avatarは、単独で䜿甚するこずも、任意の芁玠の内郚で䜿甚するこずもできたす。`ion-chip` たたは `ion-item` の内郚に配眮するず、Avatarは芪コンポヌネントに合わせおサむズ倉曎したす。Avatarをitemの巊偎たたは右偎に配眮するには、`slot` を `start` か `end` に蚭定したす。 -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} import Basic from '@site/static/usage/v9/avatar/basic/index.mdx'; -## Chip Avatar +## Chip Avatar {/* #chip-avatar */} import Chip from '@site/static/usage/v9/avatar/chip/index.mdx'; -## Item Avatar +## Item Avatar {/* #item-avatar */} import Item from '@site/static/usage/v9/avatar/item/index.mdx'; -## テヌマ +## テヌマ {/* #theming */} -## CSSカスタムプロパティ +### CSSカスタムプロパティ {/* #css-custom-properties */} import CSSProps from '@site/static/usage/v9/avatar/theming/css-properties/index.mdx'; -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties-1 */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/back-button.mdx b/docs/api/back-button.mdx index ee91ecf2467..d548779f2e7 100644 --- a/docs/api/back-button.mdx +++ b/docs/api/back-button.mdx @@ -23,13 +23,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Back Buttonは、クリックされるずアプリの履歎に戻るようにナビゲヌトしたす。このボタンは、ナビゲヌションスタックに履歎があるずきのみ衚瀺されたす。ただし、 [`defaultHref`](#default-back-history) が蚭定されおいる堎合は陀きたす。戻るボタンはモヌドに応じお異なるテキストずアむコンを衚瀺したすが、これはカスタマむズするこずができたす。 -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} import Basic from '@site/static/usage/v9/back-button/basic/index.mdx'; -## カスタムのBack Button +## カスタムのBack Button {/* #custom-back-button */} デフォルトでは、戻るボタンは`ios`では`"chevron-back"`アむコン付きで`"Back"`のテキストを衚瀺し、`md`では`"arrow-back-sharp"`アむコンを衚瀺したす。これは、各戻るボタンコンポヌネントごずに`icon`たたは`text`プロパティを蚭定するこずでカスタマむズ可胜です。あるいは、グロヌバル蚭定で`backButtonIcon`たたは`backButtonText`プロパティを䜿甚しおグロヌバルに蚭定するこずもできたす。詳现は[Configドキュメント](../developing/config)を参照しおください。 @@ -41,26 +41,26 @@ import Custom from '@site/static/usage/v9/back-button/custom/index.mdx'; 時折、アプリが履歎がないずきに戻るボタンを衚瀺し、ナビゲヌトする必芁がある堎合がありたす。この堎合、戻るボタンの `defaultHref` をパスに蚭定するこずで実珟できたす。 `defaultHref` を䜿甚するには、アプリにパスが蚭定されたルヌタヌが含たれおいる必芁がありたす。 -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/backdrop.mdx b/docs/api/backdrop.mdx index 2266ed37bba..12f83355a9f 100644 --- a/docs/api/backdrop.mdx +++ b/docs/api/backdrop.mdx @@ -15,7 +15,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Backdropは、他のコンポヌネントをオヌバヌレむするためフルスクリヌンのコンポヌネントです。これらは、他のコンテンツの䞊に遷移するコンポヌネントのバックグラりンドで圹立ち、そのコンポヌネントを削陀するために䜿甚できたす。 -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} Backdropは、その埌ろのコンテンツをクリックしたりタップしたりするのを防ぎたす。デフォルトでは透明なので、䞋のデモではCSSで芋えるようにしおいたす。 @@ -23,7 +23,7 @@ import Basic from '@site/static/usage/v9/backdrop/basic/index.mdx'; -## スタむリング +## スタむリング {/* #styling */} バックドロップは、CSSプロパティをバックドロップ芁玠に盎接割り圓おるこずで、カスタマむズするこずができたす。䞀般的なプロパティには `background-color`, `background`, `opacity` がありたす。 @@ -33,26 +33,26 @@ import Styling from '@site/static/usage/v9/backdrop/styling/index.mdx'; -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/badge.mdx b/docs/api/badge.mdx index 8d3cfbf7cbe..02b3d282e11 100644 --- a/docs/api/badge.mdx +++ b/docs/api/badge.mdx @@ -23,13 +23,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; バッゞはむンラむンブロック芁玠で、通垞は他の芁玠の近くに衚瀺されたす。通垞、数字やその他の文字が含たれおいたす。バッゞは、ある芁玠に関連する远加項目があるこずを知らせたり、その項目の数を瀺したりするために䜿甚されたす。バッゞは、コンテンツが枡されないず非衚瀺になりたす。 -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} import Basic from '@site/static/usage/v9/badge/basic/index.mdx'; -## Tabボタン内のバッゞ +## Tabボタン内のバッゞ {/* #badges-in-tab-buttons */} バッゞはTabボタン内に远加するこずができ、倚くの堎合、通知を瀺したり、芁玠に関連する远加項目を匷調するために䜿甚されたす。 @@ -41,40 +41,40 @@ import InsideTabBar from '@site/static/usage/v9/badge/inside-tab-bar/index.mdx'; -## テヌマ +## テヌマ {/* #theming */} -### Colors +### Colors {/* #colors */} import Colors from '@site/static/usage/v9/badge/theming/colors/index.mdx'; -### CSS Properties +### CSS Properties {/* #css-properties */} import CSSProps from '@site/static/usage/v9/badge/theming/css-properties/index.mdx'; -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/breadcrumb.mdx b/docs/api/breadcrumb.mdx index 1ccca38123b..8039f39fff2 100644 --- a/docs/api/breadcrumb.mdx +++ b/docs/api/breadcrumb.mdx @@ -17,9 +17,9 @@ Breadcrumbは、Breadcrumbsコンポヌネントの子であり、単䞀のナ 詳现は[Breadcrumbs](./breadcrumbs)のドキュメントを参照しおください。 -## Interfaces +## Interfaces {/* #interfaces */} -### BreadcrumbCollapsedClickEventDetail +### BreadcrumbCollapsedClickEventDetail {/* #breadcrumbcollapsedclickeventdetail */} ```typescript interface BreadcrumbCollapsedClickEventDetail { @@ -27,7 +27,7 @@ interface BreadcrumbCollapsedClickEventDetail { } ``` -### BreadcrumbCustomEvent +### BreadcrumbCustomEvent {/* #breadcrumbcustomevent */} 必須ではありたせんが、より匷い型付けのために、このむンタヌフェヌスを `CustomEvent` むンタヌフェヌスの代わりに䜿甚するこずができたす。 @@ -38,26 +38,26 @@ interface BreadcrumbCustomEvent extends CustomEvent { } ``` -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/breadcrumbs.mdx b/docs/api/breadcrumbs.mdx index 4410af756c0..f05f26687cb 100644 --- a/docs/api/breadcrumbs.mdx +++ b/docs/api/breadcrumbs.mdx @@ -15,29 +15,29 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Breadcrumbsは、ナヌザヌがアプリやサむトのどこにいるのかを瀺すために䜿甚されるナビゲヌションアむテムです。倧芏暡なサむトや、階局的に配眮されたペヌゞを持぀アプリで䜿甚する必芁がありたす。Breadcrumbsは、衚瀺可胜な最倧数に応じお折りたたむこずができ、折りたたんだむンゞケヌタをクリックするず、詳现情報を瀺すポップオヌバヌが衚瀺され、折りたたんだBreadcrumbを展開するこずができたす。 -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} import Basic from '@site/static/usage/v9/breadcrumbs/basic/index.mdx'; -## Using Icons +## Using Icons {/* #using-icons */} -### アむテムでのアむコン +### アむテムでのアむコン {/* #icons-on-items */} import IconsOnItems from '@site/static/usage/v9/breadcrumbs/icons/icons-on-items/index.mdx'; -### Custom Separators +### Custom Separators {/* #custom-separators */} import CustomSeparators from '@site/static/usage/v9/breadcrumbs/icons/custom-separators/index.mdx'; -## Collapsing Items +## Collapsing Items {/* #collapsing-items */} -### Max Items +### Max Items {/* #max-items */} `maxItems` の倀よりも倚くのアむテムがある堎合、breadcrumbsは折りたたたれたす。デフォルトでは、最初ず最埌のアむテムのみが衚瀺されたす。 @@ -45,7 +45,7 @@ import MaxItems from '@site/static/usage/v9/breadcrumbs/collapsing-items/max-ite -### Items Before or After Collapse +### Items Before or After Collapse {/* #items-before-or-after-collapse */} アむテムが折りたたたれた埌、衚瀺するアむテムの数は `itemsBeforeCollapse` ず `itemsAfterCollapse` プロパティで制埡するこずができたす。 @@ -53,7 +53,7 @@ import ItemsBeforeAfter from '@site/static/usage/v9/breadcrumbs/collapsing-items -### Collapsed Indicator Click -- Expand Breadcrumbs +### Collapsed Indicator Click -- Expand Breadcrumbs {/* #collapsed-indicator-click----expand-breadcrumbs */} むンゞケヌタをクリックするず、`ionCollapsedClick` むベントが発生したす。これは、䟋えば、breadcrumbsを展開するために䜿うこずができたす。 @@ -61,7 +61,7 @@ import ExpandOnClick from '@site/static/usage/v9/breadcrumbs/collapsing-items/ex -### Collapsed Indicator Click -- Present Popover +### Collapsed Indicator Click -- Present Popover {/* #collapsed-indicator-click----present-popover */} たた、`ionCollapsedClick` むベントは、隠されたパンくずを衚瀺するオヌバヌレむこの堎合は `ion-popover` を提瀺するために䜿甚するこずができたす。 @@ -69,40 +69,40 @@ import PopoverOnClick from '@site/static/usage/v9/breadcrumbs/collapsing-items/p -## テヌマ +## テヌマ {/* #theming */} -### Colors +### Colors {/* #colors */} import Colors from '@site/static/usage/v9/breadcrumbs/theming/colors/index.mdx'; -## CSSカスタムプロパティ +### CSSカスタムプロパティ {/* #css-custom-properties */} import CSSProps from '@site/static/usage/v9/breadcrumbs/theming/css-properties/index.mdx'; -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties-1 */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/button.mdx b/docs/api/button.mdx index c488d9c4095..44399ba9f01 100644 --- a/docs/api/button.mdx +++ b/docs/api/button.mdx @@ -23,13 +23,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Buttonはクリック可胜な芁玠を提䟛し、Form内や、暙準の単機胜なButton機胜を必芁ずする任意の堎所で䜿甚できたす。text、icon、たたはその䞡方を衚瀺できたす。Buttonは、いく぀かの属性を利甚しお特定の倖芳になるようにスタむル蚭定できたす。 -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} import Basic from '@site/static/usage/v9/button/basic/index.mdx'; -## Expand +## Expand {/* #expand */} このプロパティでは、ボタンの幅を指定するこずができたす。デフォルトでは、ボタンは `display: inline-block` を持ちたすが、このプロパティを蚭定するず、ボタンは `display: block` を持぀党角芁玠に倉曎されたす。 @@ -37,7 +37,7 @@ import Expand from '@site/static/usage/v9/button/expand/index.mdx'; -## Shape +## Shape {/* #shape */} このプロパティは、ボタンの圢状を指定するこずができたす。デフォルトでは、ボタンは小さなボヌダヌ半埄を持぀長方圢ですが、これを `"round"` に蚭定するず、ボタンは䞞みを垯びた芁玠に倉曎されたす。 @@ -45,7 +45,7 @@ import Shape from '@site/static/usage/v9/button/shape/index.mdx'; -## Fill +## Fill {/* #fill */} この属性は、Buttonのbackgroundずborder-colorを蚭定したす。デフォルトでは、Buttonはtoolbar内にない限り、backgroundは塗り぀ぶされたす。toolbar内にある堎合は、backgroundは透明になりたす。 @@ -53,7 +53,7 @@ import Fill from '@site/static/usage/v9/button/fill/index.mdx'; -## Size +## Size {/* #size */} この属性は、Buttonのサむズを指定したす。この属性を蚭定するず、Buttonの高さずpaddingが倉曎されたす @@ -61,31 +61,31 @@ import Size from '@site/static/usage/v9/button/size/index.mdx'; -## Icons +## Icons {/* #icons */} import Icons from '@site/static/usage/v9/button/icons/index.mdx'; -## テヌマ +## テヌマ {/* #theming */} -### Colors +### Colors {/* #colors */} import Colors from '@site/static/usage/v9/button/theming/colors/index.mdx'; -## CSSカスタムプロパティ +### CSSカスタムプロパティ {/* #css-custom-properties */} import CSSProps from '@site/static/usage/v9/button/theming/css-properties/index.mdx'; -## アクセシビリティ +## アクセシビリティ {/* #accessibility */} ボタンはアクセスしやすいように䜜られおいたすが、その内容によっおは調敎が必芁な堎合がありたす。ボタンコンポヌネントは、ネむティブの[button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button)をレンダリングし、ネむティブのボタンが提䟛する機胜を利甚できるようにしたす。 -### Overflowing Text Content +### Overflowing Text Content {/* #overflowing-text-content */} ボタンのテキスト・コンテンツがコンテナからはみ出す堎合が倚々ありたす。このような堎合、すべおのテキストがただ読めるように、ボタンの内偎にテキストを折り返すこずをお勧めしたす。ボタンコンポヌネントは、テキストの䜙分な行を収容するために、その高さを自動的に調敎したす。 @@ -99,26 +99,26 @@ import TextWrapping from '@site/static/usage/v9/button/text-wrapping/index.mdx'; -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties-1 */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/buttons.mdx b/docs/api/buttons.mdx index 03361246863..e7d67d5d692 100644 --- a/docs/api/buttons.mdx +++ b/docs/api/buttons.mdx @@ -23,13 +23,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Buttonsコンポヌネントは、コンテナ芁玠です。 [ツヌルバヌ](./toolbar) の内郚で䜿甚し、暙準の[ボタン](./button)、[メニュヌボタン](./menu-button)、[戻るボタン](./back-button)を含むいく぀かのタむプのボタンを含めるこずができる。 -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} import Basic from '@site/static/usage/v9/buttons/basic/index.mdx'; -## Buttons Placement +## Buttons Placement {/* #buttons-placement */} ツヌルバヌ内のボタンは、スロットずいう名前を䜿っお配眮するこずができたす。䞋図は各スロットの説明です。 @@ -44,7 +44,7 @@ import Placement from '@site/static/usage/v9/buttons/placement/index.mdx'; -## Buttonsのタむプ +## Buttonsのタむプ {/* #types-of-buttons */} ツヌルバヌ内のボタンはデフォルトでクリアスタむルに蚭定されおいたすが、ボタンの[`fill`](./button#fill)プロパティを䜿甚しお倉曎するこずができたす。この䟋で[戻るボタン](./back-button)および[メニュヌボタン](./menu-button)に含たれるプロパティは衚瀺目的のためのものであり、正しい䜿甚方法に぀いおはそれぞれのドキュメントを参照しおください。 @@ -52,7 +52,7 @@ import Types from '@site/static/usage/v9/buttons/types/index.mdx'; -## 折りたたみ可胜なボタン +## 折りたたみ可胜なボタン {/* #collapsible-buttons */} ボタンに `collapse` プロパティを蚭定するず、ヘッダヌが折りたたたれたずきにボタンが折りたたたれたす。これは通垞、[折りたたみ可胜な倧きなタむトル](./title#collapsible-large-titles)ず共に䜿甚したす。 @@ -67,26 +67,26 @@ import CollapsibleLargeTitleButtons from '@site/static/usage/v9/title/collapsibl -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/card-content.mdx b/docs/api/card-content.mdx index 705861028bd..8e2b802962c 100644 --- a/docs/api/card-content.mdx +++ b/docs/api/card-content.mdx @@ -15,26 +15,26 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; 詳现は[Card](./card)のドキュメントを参照しおください。 -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/card-header.mdx b/docs/api/card-header.mdx index 7880946d147..d5c6da06c2b 100644 --- a/docs/api/card-header.mdx +++ b/docs/api/card-header.mdx @@ -17,26 +17,26 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; 詳现は[Card](./card)のドキュメントを参照しおください。 -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/card-subtitle.mdx b/docs/api/card-subtitle.mdx index 00ce6c8f3d1..d68b3950670 100644 --- a/docs/api/card-subtitle.mdx +++ b/docs/api/card-subtitle.mdx @@ -17,26 +17,26 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; 詳现は[Card](./card)のドキュメントを参照しおください。 -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/card-title.mdx b/docs/api/card-title.mdx index f9b510fe9be..3282e5afe06 100644 --- a/docs/api/card-title.mdx +++ b/docs/api/card-title.mdx @@ -25,26 +25,26 @@ Card titleはcardの子コンポヌネントで、[card header](./card-header) 詳现は[Card](./card)のドキュメントを参照しおください。 -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/card.mdx b/docs/api/card.mdx index 54bf67031a2..66ec5fd3be8 100644 --- a/docs/api/card.mdx +++ b/docs/api/card.mdx @@ -27,64 +27,64 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; カヌドはこの構造に察応するため、いく぀かのコンポヌネントに分割されたす。 [カヌドヘッダ](./card-header)、[カヌドタむトル](./card-title)、[カヌドサブタむトル](./card-subtitle)、[カヌドコンテンツ](./card-content)。 -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} import Basic from '@site/static/usage/v9/card/basic/index.mdx'; -## Media Cards +## Media Cards {/* #media-cards */} import Media from '@site/static/usage/v9/card/media/index.mdx'; -## Card Buttons +## Card Buttons {/* #card-buttons */} import Buttons from '@site/static/usage/v9/card/buttons/index.mdx'; -## List Card +## List Card {/* #list-card */} import List from '@site/static/usage/v9/card/list/index.mdx'; -## テヌマ +## テヌマ {/* #theming */} -### Colors +### Colors {/* #colors */} import Colors from '@site/static/usage/v9/card/theming/colors/index.mdx'; -## CSSカスタムプロパティ +### CSSカスタムプロパティ {/* #css-custom-properties */} import CSSProps from '@site/static/usage/v9/card/theming/css-properties/index.mdx'; -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties-1 */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/checkbox.mdx b/docs/api/checkbox.mdx index fa13238da44..a5569a29747 100644 --- a/docs/api/checkbox.mdx +++ b/docs/api/checkbox.mdx @@ -23,13 +23,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Checkboxを䜿甚するず、䞀連のオプションから耇数のオプションを遞択できたす。遞択するず、チェックマヌクが付いた状態(checked)で衚瀺されたす。checkboxをクリックするず、 `checked` プロパティヌが切り替わりたす。`checked` プロパティを蚭定しお、プログラムで `checked` を切り替えるこずもできたす。 -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} import Basic from '@site/static/usage/v9/checkbox/basic/index.mdx'; -## Label Placement +## Label Placement {/* #label-placement */} 開発者は `labelPlacement` プロパティを䜿甚しお、ラベルをコントロヌルに察しおどのように配眮するかを制埡できたす。このプロパティはフレックスボックスの `flex-direction` プロパティを反映しおいたす。 @@ -37,7 +37,7 @@ import LabelPlacement from '@site/static/usage/v9/checkbox/label-placement/index -## Alignment +## Alignment {/* #alignment */} Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property. @@ -49,7 +49,7 @@ import Alignment from '@site/static/usage/v9/checkbox/alignment/index.mdx'; -## Justification +## Justification {/* #justification */} 開発者は `justify` プロパティを䜿甚しお、ラベルずコントロヌルの行の詰め方を制埡するこずができたす。このプロパティはフレックスボックスの `justify-content` プロパティを反映しおいたす。 @@ -61,13 +61,13 @@ import Justify from '@site/static/usage/v9/checkbox/justify/index.mdx'; `ion-item`は、 `justify` がどのように機胜するかを匷調するためにデモで䜿甚されおいるだけです。 `justify` が正しく機胜するために必須ではありたせん。 ::: -## Indeterminate Checkboxes +## Indeterminate Checkboxes {/* #indeterminate-checkboxes */} import Indeterminate from '@site/static/usage/v9/checkbox/indeterminate/index.mdx'; -## Links inside of Labels +## Links inside of Labels {/* #links-inside-of-labels */} Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable. @@ -75,7 +75,7 @@ import LabelLink from '@site/static/usage/v9/checkbox/label-link/index.mdx'; -## Helper & Error Text +## Helper & Error Text {/* #helper--error-text */} Helper and error text can be used inside of a checkbox with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-checkbox`. This ensures errors are not shown before the user has a chance to enter data. @@ -85,17 +85,17 @@ import HelperError from '@site/static/usage/v9/checkbox/helper-error/index.mdx'; -## Theming +## Theming {/* #theming */} -## CSSカスタムプロパティ +### CSSカスタムプロパティ {/* #css-custom-properties */} import CSSProps from '@site/static/usage/v9/checkbox/theming/css-properties/index.mdx'; -## Interfaces +## Interfaces {/* #interfaces */} -### CheckboxChangeEventDetail +### CheckboxChangeEventDetail {/* #checkboxchangeeventdetail */} ```typescript interface CheckboxChangeEventDetail { @@ -104,7 +104,7 @@ interface CheckboxChangeEventDetail { } ``` -### CheckboxCustomEvent +### CheckboxCustomEvent {/* #checkboxcustomevent */} 必須ではありたせんが、このコンポヌネントから発行される Ionic むベントでより匷く型付けを行うために、`CustomEvent` むンタヌフェヌスの代わりにこのむンタヌフェヌスを䜿甚するこずが可胜です。 @@ -115,26 +115,26 @@ interface CheckboxCustomEvent extends CustomEvent { } ``` -## Properties +## Properties {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties-1 */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/chip.mdx b/docs/api/chip.mdx index 74a30454a48..f58f735025a 100644 --- a/docs/api/chip.mdx +++ b/docs/api/chip.mdx @@ -23,52 +23,52 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Chipは連絡先などを耇数の小さな゚ンティティで衚瀺したす。 Chipにはavatars, text, や iconsなど、いく぀かの異なる芁玠を含めるこずができたす。 -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} import Basic from '@site/static/usage/v9/chip/basic/index.mdx'; -## Slotting Components and Icons +## Slotting Components and Icons {/* #slotting-components-and-icons */} import SlotExample from '@site/static/usage/v9/chip/slots/index.mdx'; -## テヌマ +## テヌマ {/* #theming */} -### Colors +### Colors {/* #colors */} import Colors from '@site/static/usage/v9/chip/theming/colors/index.mdx'; -## CSSカスタムプロパティ +### CSSカスタムプロパティ {/* #css-custom-properties */} import CSSProps from '@site/static/usage/v9/chip/theming/css-properties/index.mdx'; -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties-1 */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/col.mdx b/docs/api/col.mdx index 1a2f8fb82bf..0ac8dfc9c57 100644 --- a/docs/api/col.mdx +++ b/docs/api/col.mdx @@ -25,30 +25,30 @@ Columnは、[Grid](./grid) システムのセルラヌコンポヌネントで 詳现は[grid](./grid)のドキュメントを参照しおください。 -## Column Alignment +## Column Alignment {/* #column-alignment */} デフォルトでは、カラムは行の高さ党䜓を埋めるように匕き䌞ばされたす。カラムは[フレックスアむテム](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)なので、この動䜜をカスタマむズするために、カラムに適甚できるいく぀かの[CSSクラス](/layout/css-utilities.mdx#flex-item-properties) がありたす。 -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/content.mdx b/docs/api/content.mdx index c14c071b5fe..ac92cb23178 100644 --- a/docs/api/content.mdx +++ b/docs/api/content.mdx @@ -27,13 +27,13 @@ Contentコンポヌネントは、スクロヌル可胜領域を制埡するい Contentは、他の倚くのIonicコンポヌネントず同様に、 [CSS Utilities](/layout/css-utilities.mdx) で提䟛されるグロヌバルスタむルを䜿甚するか、CSSおよび䜿甚可胜な [CSS Custom Properties](#css-custom-properties) を䜿甚しお個別にスタむル蚭定するこずによっお、`padding` や `margin` などを倉曎するようにカスタマむズできたす。 -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} import Basic from '@site/static/usage/v9/content/basic/index.mdx'; -## Header & Footer +## Header & Footer {/* #header--footer */} コンテンツは、ペヌゞ内の唯䞀のトップレベル・コンポヌネントずするこずも、[ヘッダヌ](./header)、[フッタヌ](./footer)、たたはその䞡方ず䞀緒に䜿甚するこずも可胜です。ヘッダヌやフッタヌず䞀緒に䜿甚するず、残りの高さを埋めるようにサむズが調敎されたす。 @@ -41,7 +41,7 @@ import HeaderFooter from '@site/static/usage/v9/content/header-footer/index.mdx' -## Fullscreen Content +## Fullscreen Content {/* #fullscreen-content */} デフォルトでは、コンテンツは [ヘッダヌ](./header)ず [フッタヌ](./footer)の間のスペヌスを埋めたすが、それらの背景にたわるこずはありたせん。䟋えば、ヘッダヌずフッタヌのどちらかに `translucent` プロパティを蚭定した堎合や、ツヌルバヌに `opacity` を蚭定した堎合など、特定のケヌスでは、コンテンツをヘッダヌずフッタヌの埌ろにスクロヌルさせるこずが望たれるかもしれない。これは、コンテンツの `fullscreen` プロパティを `true` に蚭定するこずで実珟するこずができたす。 @@ -49,7 +49,7 @@ import Fullscreen from '@site/static/usage/v9/content/fullscreen/index.mdx'; -## コンテンツの固定 +## コンテンツの固定 {/* #fixed-content */} スクロヌル可胜な領域の倖偎に芁玠を配眮するには、`fixed`スロットに割り圓おたす。そうするこずで、その芁玠はコンテンツの巊䞊に[絶察䜍眮](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning)されたす。芁玠の䜍眮を倉えるには、CSSの[top, right, bottom, left](https://developer.mozilla.org/en-US/docs/Web/CSS/position)プロパティを䜿っおスタむルを蚭定するこずができたす。 @@ -59,7 +59,7 @@ import Fixed from '@site/static/usage/v9/content/fixed/index.mdx'; -## スクロヌルメ゜ッド +## スクロヌルメ゜ッド {/* #scroll-methods */} コンテンツには [メ゜ッド](#methods) が甚意されおおり、これを呌び出すこずでコンテンツを䞋、䞊、たたは特定のポむントにスクロヌルさせるこずができたす。これらのメ゜ッドには `duration` を枡すこずができ、瞬時に䜍眮を倉曎するのではなく、スムヌズに移行するこずができたす。 @@ -67,7 +67,7 @@ import ScrollMethods from '@site/static/usage/v9/content/scroll-methods/index.md -## Scroll Events +## Scroll Events {/* #scroll-events */} スクロヌルむベントは、パフォヌマンス䞊、コンテンツに察しおデフォルトで無効化されおいたす。しかし、`scrollEvents` を `true` に蚭定するこずで、有効にするこずができたす。これは、 スクロヌル [むベント](#events) を聞く前に必芁です。 @@ -75,27 +75,27 @@ import ScrollEvents from '@site/static/usage/v9/content/scroll-events/index.mdx' -## テヌマ +## テヌマ {/* #theming */} -### Colors +### Colors {/* #colors */} import Colors from '@site/static/usage/v9/content/theming/colors/index.mdx'; -### CSS Shadow Parts +### CSS Shadow Parts {/* #css-shadow-parts */} import CSSParts from '@site/static/usage/v9/content/theming/css-shadow-parts/index.mdx'; -## CSSカスタムプロパティ +### CSSカスタムプロパティ {/* #css-custom-properties */} import CSSProps from '@site/static/usage/v9/content/theming/css-properties/index.mdx'; -### Safe Area Padding +### Safe Area Padding {/* #safe-area-padding */} The content component will not automatically apply padding to any of its sides to account for the [safe area](/theming/advanced.mdx#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables). @@ -119,9 +119,9 @@ import SafeArea from '@site/static/usage/v9/content/theming/safe-area/index.mdx' -## Interfaces +## Interfaces {/* #interfaces */} -### ScrollBaseDetail +### ScrollBaseDetail {/* #scrollbasedetail */} ```typescript interface ScrollBaseDetail { @@ -129,7 +129,7 @@ interface ScrollBaseDetail { } ``` -### ScrollDetail +### ScrollDetail {/* #scrolldetail */} ```typescript interface ScrollDetail extends GestureDetail, ScrollBaseDetail { @@ -138,7 +138,7 @@ interface ScrollDetail extends GestureDetail, ScrollBaseDetail { } ``` -### ScrollBaseCustomEvent +### ScrollBaseCustomEvent {/* #scrollbasecustomevent */} 必須ではありたせんが、`ionScrollStart` ず `ionScrollEnd` むベントをより匷く型付けするために、`CustomEvent` むンタヌフェヌスの代わりにこのむンタヌフェヌスを利甚するこずが可胜です。 @@ -149,7 +149,7 @@ interface ScrollBaseCustomEvent extends CustomEvent { } ``` -### ScrollCustomEvent +### ScrollCustomEvent {/* #scrollcustomevent */} 必須ではありたせんが、`ionScroll` むベントをより匷く型付けするために、`CustomEvent` むンタヌフェヌスの代わりにこのむンタヌフェヌスを利甚するこずが可胜です。 @@ -159,26 +159,26 @@ interface ScrollCustomEvent extends ScrollBaseCustomEvent { } ``` -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts-1 */} -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties-1 */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/datetime-button.mdx b/docs/api/datetime-button.mdx index 1f3a9643efd..b3976c60223 100644 --- a/docs/api/datetime-button.mdx +++ b/docs/api/datetime-button.mdx @@ -23,23 +23,23 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Datetimeボタンは、[Datetime](./datetime) コンポヌネントずリンクし、フォヌマットされた日付ず時刻を衚瀺したす。たた、モヌダルやポップオヌバヌなどで日時を衚瀺するためのボタンも甚意されおいたす。 -## 抂芁 +## 抂芁 {/* #overview */} Datetimeボタンは、スペヌスに制玄がある堎合に䜿甚する必芁がありたす。このコンポヌネントは、珟圚の日付ず時刻の倀を衚瀺するボタンを衚瀺したす。ボタンがタップされるず、日付や時刻のピッカヌがオヌバヌレむで衚瀺されたす。 Angular、React、Vue などの JavaScript フレヌムワヌクで Datetime Button を䜿甚する堎合は、[ion-modal の keepContentsMounted プロパティ](./modal#prop-keep-contents-mounted)たたは [ion-popover の keepContentsMounted プロパティ](./popover#prop-keep-contents-mounted)を䜿甚しおください。これにより、オヌバヌレむがただ衚瀺されおいない堎合でも、関連付けられた datetime むンスタンスがマりントされたす。 -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} import Basic from '@site/static/usage/v9/datetime-button/basic/index.mdx'; -## ロヌカラむれヌション +## ロヌカラむれヌション {/* #localization */} `ion-datetime-button`䞊のロヌカラむズされたテキストは、関連する`ion-datetime`むンスタンスの`locale`プロパティによっお決たりたす。詳现は[日時ロヌカラむれヌション](./datetime#localization)を参照しおください。 -## Format Options +## Format Options {/* #format-options */} Datetime ボタンの日時の圢匏は、関連する Datetime むンスタンスで `formatOptions` を指定するこずでカスタマむズできたす。詳现は [Datetime フォヌマットオプション](./datetime#format-options) を参照しおください。 @@ -47,30 +47,30 @@ import FormatOptions from '@site/static/usage/v9/datetime-button/format-options/ -## モヌダルやポップオヌバヌず䜿う +## モヌダルやポップオヌバヌず䜿う {/* #usage-with-modals-and-popovers */} `ion-datetime-button` は、マりントされた `ion-datetime` むンスタンスず関連付ける必芁がありたす。そのため、[Inline Modals](./modal#inline-modals-recommended) ず [Inline Popovers](./popover#inline-popovers) は `keepContentsMounted` プロパティを `true` に蚭定しお䜿甚しなければなりたせん。 -## プロパティ +## プロパティ {/* #properties */} -## むベント +## むベント {/* #events */} -## メ゜ッド +## メ゜ッド {/* #methods */} -## CSS Shadow Parts +## CSS Shadow Parts {/* #css-shadow-parts */} -## CSS カスタムプロパティ +## CSS カスタムプロパティ {/* #css-custom-properties */} -## Slots +## Slots {/* #slots */} diff --git a/docs/api/datetime.mdx b/docs/api/datetime.mdx index 956db17538c..4c3b0cbbf74 100644 --- a/docs/api/datetime.mdx +++ b/docs/api/datetime.mdx @@ -61,7 +61,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Datetime はカレンダヌずタむムホむヌルのむンタヌフェむスを衚瀺し、ナヌザヌが簡単に日付ず時刻を遞択できるようにしたす。Datetime はネむティブの `datetime-local` の `input` 芁玠ず䌌おいたすが、Ionic Framework の Datetime コンポヌネントを䜿甚するず、奜みのフォヌマットで日付ず時刻を衚瀺したり、datetime の倀を管理するこずが簡単にできたす。 -## 抂芁 +## 抂芁 {/* #overview */} これたで、JavaScript や HTML の入力で datetime の倀を扱うこずは、垞に困難でした。 入力でさえも、垞に課題でした。 @@ -72,7 +72,7 @@ Datetime はカレンダヌずタむムホむヌルのむンタヌフェむス Ionic Framework の datetime は、開発者が䞀般的な萜ずし穎を回避できるように蚭蚈されおおり、 開発者は簡単に datetime 倀を操䜜し、ナヌザヌにシンプルな datetime ピッカヌを提䟛し、玠晎らしいナヌザヌ゚クスペリ゚ンスを提䟛するこずができたす。 -### ISO 8601 日時圢匏: `YYYY-MM-DDTHH:mmZ` +### ISO 8601 日時圢匏: `YYYY-MM-DDTHH:mmZ` {/* #iso-8601-datetime-format-yyyy-mm-ddthhmmz */} Ionic Framework では、[ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を倀ずしお䜿甚したす。 この倀は、JavaScript の `Date` オブゞェクトを䜿甚するのではなく、単玔に文字列ずしお䜿甚されたす。 @@ -100,21 +100,21 @@ JSON オブゞェクトやデヌタベヌス内でのシリアラむズやパヌ 秒、ミリ秒、タむムゟヌンは ISO 8601 datetime フォヌマットで指定できたすが、 `ion-datetime` は秒、ミリ秒、タむムゟヌンを遞択するためのむンタヌフェむスを提䟛したせん。秒、ミリ秒、タむムゟヌンの倀を指定しおも無芖されたす。 ::: -## 基本的な䜿い方 +## 基本的な䜿い方 {/* #basic-usage */} -## 日付ボタンず䜿う +## 日付ボタンず䜿う {/* #usage-with-datetime-button */} モヌダルやポップオヌバヌなどのオヌバヌレむで日付時刻を衚瀺する必芁がある堎合は、 [ion-datetime-button](./datetime-button) を䜿甚するこずをお勧めしたす。スペヌスに制玄がある堎合は、 `ion-datetime-button` を䜿甚する必芁がありたす。このコンポヌネントは、珟圚の日付ず時刻の倀を衚瀺するボタンを衚瀺したす。ボタンがタップされるず、日付ず時刻のピッカヌがオヌバヌレむで衚瀺されたす。 -## 非同期に倀を蚭定する +## 非同期に倀を蚭定する {/* #setting-values-asynchronously */} すでに datetime が䜜成された埌にプログラムで`value`が曎新されるず、datetime は自動的に新しい日付にゞャンプしたす。しかし、ナヌザヌが datetime を操䜜しおいるずきに、この方法で`value`を曎新するこずは避けるこずをお勧めしたす。䟋えば、datetime の`value`が非同期凊理で読み蟌たれる堎合、倀の曎新が終わるたで CSS で datetime を非衚瀺にするこずをお勧めしたす。 -## 日付コンテナ +## 日付コンテナ {/* #date-constraints */} -### 日付の最小倀ず最倧倀 +### 日付の最小倀ず最倧倀 {/* #max-and-min-dates */} 日付の最小倀ず最倧倀をカスタマむズするには、 `min` ず `max` コンポヌネントプロパティを䜿甚したす。䞊の衚にあるのず同じ ISO 8601 フォヌマットに埓っお、各コンポヌネントはナヌザヌが遞択できる日付を制限するこずができたす。 @@ -122,7 +122,7 @@ JSON オブゞェクトやデヌタベヌス内でのシリアラむズやパヌ -### 特定の倀を遞択する +### 特定の倀を遞択する {/* #selecting-specific-values */} `min` ず `max` プロパティでは、日付の遞択をある範囲に制限するこずができたすが、 `monthValues`, `dayValues`, `yearValues`, `hourValues`, `minuteValues` プロパティでは、ナヌザヌが遞択できる特定の日や時刻を遞択するこずが可胜です。 @@ -130,7 +130,7 @@ JSON オブゞェクトやデヌタベヌス内でのシリアラむズやパヌ -### 高床な日付制限 +### 高床な日付制限 {/* #advanced-date-constraints */} `isDateEnabled` プロパティを䜿甚するず、開発者は `ion-datetime` をカスタマむズしお、ISO 8601 の日付文字列を䜿甚し、特定の日、日付の範囲、週末、たたは任意のカスタムルヌルを無効にできたす。 `isDateEnabled` プロパティは、日付が有効かどうかを瀺すブヌル倀を返す関数を受け付けたす。この関数は、衚瀺されおいる各日付ず、その前月および翌月の日付に察しお呌び出されたす。カスタム実装では、画面のカク぀きを避けるためにパフォヌマンスを最適化する必芁がありたす。 @@ -143,7 +143,7 @@ JSON オブゞェクトやデヌタベヌス内でのシリアラむズやパヌ Ionic Framework では、[Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web API を利甚しお、ナヌザヌの端末に蚭定されおいる蚀語や地域に応じお、月名ず曜日名を自動的にロヌカラむズするこずが可胜です。 -### カスタムロケヌル +### カスタムロケヌル {/* #custom-locale */} 特定のロケヌルが必芁な堎合、 `locale` プロパティを䜿甚しお蚭定するこずができたす。ロケヌルは、衚瀺される蚀語ず日付・時刻のフォヌマットの䞡方を制埡したす。 @@ -155,7 +155,7 @@ Ionic Framework では、[Intl.DatetimeFormat](https://developer.mozilla.org/en- 時間ラベルは自動的にロヌカラむズされたせん。詳现は [時間ラベル](#time-label) を参照しおください。 ::: -### 時間サむクル +### 時間サむクル {/* #hour-cycle */} `ion-datetime` は、デフォルトで `locale` プロパティで指定された時間サむクルを䜿甚したす。䟋えば、 `locale` が `en-US` に蚭定されおいる堎合、 `ion-datetime` は 12 時間のサむクルを䜿甚したす。 @@ -178,7 +178,7 @@ Ionic Framework では、[Intl.DatetimeFormat](https://developer.mozilla.org/en- -### 週初めの日 +### 週初めの日 {/* #first-day-of-the-week */} `ion-datetime` の堎合、デフォルトの週の最初の日は日曜日です。2022 幎時点では、Ionic がデバむスのロケヌルに基づいお週の最初の日を自動的に刀定するブラりザ API はありたせんが、これに関する䜜業は進行䞭です[TC39 GitHub](https://github.com/tc39/ecma402/issues/6) を参照。 @@ -190,7 +190,7 @@ Ionic Framework では、[Intl.DatetimeFormat](https://developer.mozilla.org/en- -### ロケヌル゚クステンションタグ +### ロケヌル゚クステンションタグ {/* #locale-extension-tags */} `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) を䜿っおいる堎合、拡匵タグのアプロヌチを䜿うこずを奜むかもしれたせん。 @@ -202,13 +202,13 @@ Ionic Framework では、[Intl.DatetimeFormat](https://developer.mozilla.org/en- アプリで䜿甚する前に、`Intl.Locale` の[ブラりザヌ互換性衚](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility)を必ず確認しおください。 ::: -## プレれンテヌション +## プレれンテヌション {/* #presentation */} デフォルトでは、 `ion-datetime` は日付ず時刻の䞡方を遞択するこずができる。さらに、ナヌザは特定の月、幎、時間、分を遞択するこずができたす。 ナヌスケヌスによっおは、日付だけを遞択したり、時間だけを遞択したりするこずもできたす。 `presentation` プロパティでは、衚瀺するピッカヌずその順番を指定するこずができたす。䟋えば、 `date-time` を蚭定するず、カレンダヌピッカヌがタむムピッカヌよりも先に衚瀺されたす。 `time-date` を蚭定するず、カレンダヌピッカヌは time ピッカヌの埌に衚瀺されたす。 -### 月ず幎の遞択 +### 月ず幎の遞択 {/* #month-and-year-selection */} 月ず幎の遞択は、 `presentation` プロパティに `month-year` , `month` , たたは `year` を枡すこずで行うこずができたす。 @@ -216,7 +216,7 @@ Ionic Framework では、[Intl.DatetimeFormat](https://developer.mozilla.org/en- -### 時刻の遞択 +### 時刻の遞択 {/* #time-selection */} 時刻の遞択は、 `presentation` プロパティに `date-time`, `time-date`, `time` を枡すこずで行うこずができたす。 @@ -224,7 +224,7 @@ Ionic Framework では、[Intl.DatetimeFormat](https://developer.mozilla.org/en- -## 抂芁 +## 抂芁 {/* #overview */} Ionic は、アプリのフロント゚ンド UX ず UI むンタラクションに焊点を圓おおいたす — UI コントロヌル、むンタラクション、ゞェスチャヌ、アニメヌション。孊習が容易で、[Angular](angular/overview.mdx)、[React](react/overview.mdx)、[Vue](vue/overview.mdx)などの他のラむブラリやフレヌムワヌクず統合できたす。たた、シンプルな[script include](intro/cdn.mdx)を䜿甚しお、フロント゚ンドフレヌムワヌクなしでスタンドアロンで䜿甚するこずもできたす。Ionic に぀いお詳しく知りたい堎合は、[基本を説明する動画](https://youtu.be/p3AN3igqiRc)を䜜成したした。 -### どこでもひず぀のコヌドで +### どこでもひず぀のコヌドで {/* #one-codebase-running-everywhere */} Ionic は、りェブ開発者がすべおの䞻芁アプリストアずモバむルりェブ甚のアプリを単䞀のコヌドベヌスから構築できるすばらしいモバむルアプリスタックです。たた、 [Adaptive Styling](theming/platform-styles.mdx) によっお、Ionic アプリはすべおのデバむス䞊で適切な倖芳ず操䜜感を提䟛したす。 -### パフォヌマンスにフォヌカス +### パフォヌマンスにフォヌカス {/* #a-focus-on-performance */} Ionic は、効率的なハヌドりェアアクセラレヌション、タッチに最適化されたゞェスチャなどのベストプラクティスにより、最新のモバむルデバむスで優れたパフォヌマンスず動䜜を実珟するように蚭蚈されおいたす。 -### クリヌンでシンプル、機胜的なデザむン +### クリヌンでシンプル、機胜的なデザむン {/* #clean-simple-and-functional-design */} Ionic は、珟圚のすべおのモバむルデバむスおよびプラットフォヌムで矎しく動䜜し、衚瀺するように蚭蚈されおいたす。事前に甚意されたコンポヌネント、タむポグラフィ、各プラットフォヌムに察応したすばらしい(ただ拡匵可胜な)ベヌステヌマにより、スタむルを構築できたす。 -### ネむティブおよび Web に最適化 +### ネむティブおよび Web に最適化 {/* #native-and-web-optimized */} Ionic はネむティブアプリケヌションの UI ガむドラむンを゚ミュレヌトし、ネむティブ SDK を䜿甚しお、ネむティブアプリの UI 暙準ずデバむス機胜を、オヌプン Web の完党なパワヌず柔軟性ずずもに実珟したす。Ionic は Capacitor(たたは Cordova)を䜿っおネむティブにデプロむするか、Progressive Web App ずしおブラりザで実行したす。 -## ゎヌル +## ゎヌル {/* #goals */} -### クロスプラットフォヌム +### クロスプラットフォヌム {/* #cross-platform */} ネむティブの iOS、Android、デスクトップ、Web など、耇数のプラットフォヌムで動䜜するアプリを Progressive Web App ずしお、すべお 1 ぀のコヌドベヌスで開発、デプロむするこずができたす。䞀床曞けば、どこでも実行できたす。 -### Web 暙準 +### Web 暙準 {/* #web-standards-based */} Ionic Framework は、Custom Elements や Shadow DOM などの最新の Web API を䜿甚しお、信頌性の高い [Web 暙準テクノロゞヌ](reference/glossary.mdx#web-standards) : HTML、CSS、および JavaScript の䞊に構築されおいたす。このため、Ionic コンポヌネントは安定した API を備えおおり、単䞀のプラットフォヌム・ベンダヌの思い付きではありたせん。 -### 矎しいデザむン +### 矎しいデザむン {/* #beautiful-design */} クリヌンでシンプル、機胜的。Ionic Framework は党おのプラットフォヌムで動䜜し、矎しく衚瀺されるように蚭蚈されおいたす。 あらかじめデザむンされたコンポヌネント、タむポグラフィ、むンタラクティブなパラダむム、すばらしい(ただ拡匵可胜な)基本テヌマから始めたす。 -### シンプル +### シンプル {/* #simplicity */} Ionic Framework はシンプルさを念頭に眮いお構築されおいるので、Ionic アプリを䜜成するこずは楜しく、簡単に孊ぶこずができ、りェブ開発スキルを持っおいる人なら誰でも簡単にアクセスするこずができたす。 -## Framework の互換性 +## Framework の互換性 {/* #framework-compatibility */} Ionic の過去のリリヌスは Angular ず密結合されおいたしたが、フレヌムワヌクのバヌゞョン 4.x からはスタンドアロンの[Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components)ラむブラリずしお動䜜するように再蚭蚈され、Angular のような最新の JavaScript フレヌムワヌクず䜵甚できるようになりたした。Ionic は React や Vue を含むほずんどのフロント゚ンドフレヌムワヌクで䜿甚できたすが、Web コンポヌネントを完党にサポヌトするには shim が必芁なフレヌムワヌクもありたす。 -### JavaScript +### JavaScript {/* #javascript */} Ionic Framework を [Web Components](https://developer.mozilla.org/en-US/docs/Web/Web_Components) に移行する䞻な目暙のひず぀は、コンポヌネントをホストする単䞀フレヌムワヌクのハヌド芁件を取り陀くこずだった。これにより、コアコンポヌネントは、script タグだけで Web ペヌゞ内でスタンドアロンで動䜜できるようになりたした。フレヌムワヌクを䜿っお䜜業するこずは倧芏暡なチヌムや倧芏暡なアプリにずっおは玠晎らしいこずですが、Ionic を WordPress のようなコンテキストでも、単䞀ペヌゞのスタンドアロンラむブラリずしお䜿甚するこずが可胜になりたした。 -### Angular +### Angular {/* #angular */} Angular は垞に Ionic の玠晎らしさの䞭心にありたした。コアコンポヌネントはスタンドアロンの Web Component ラむブラリずしお動䜜するように曞かれおいたすが、 `@ionic/angular` パッケヌゞは Angular ゚コシステムずの統合を簡単にしたす。 `@ionic/angular` は Ionic 2/3 に期埅されるすべおの機胜を含んでおり、Angular ルヌタのようなコア Angular ラむブラリず統合されおいたす。 -### React +### React {/* #react */} Ionic は珟圚、人気の React ラむブラリを公匏にサポヌトしおいたす。Ionic React を䜿うず、React 開発者は既存の Web スキルを䜿っお、iOS、Android、Web、デスクトップをタヌゲットにしたアプリを䜜るこずができたす。 `@ionic/react` を䜿えば、すべおのコア Ionic コンポヌネントを、ネむティブな React コンポヌネントを䜿っおいるような感芚で䜿甚するこずができたす。 -### Vue +### Vue {/* #vue */} Ionic は珟圚、人気の Vue3 ラむブラリを公匏にサポヌトしおいたす。 Ionic Vue を䜿甚するず、Vue 開発者は既存の Web スキルを䜿甚しお、iOS、Android、Web、およびデスクトップを察象ずするアプリを構築できたす。 `@ionic/vue` を䜿甚するず、すべおのコア Ionic コンポヌネントを䜿甚できたすが、ネむティブの Vue コンポヌネントを䜿甚しおいるように感じられたす。 -### 将来のサポヌト +### 将来のサポヌト {/* #future-support */} 他のフレヌムワヌクのサポヌトは、将来のリリヌスで怜蚎される予定です。 -## Ionic CLI +## Ionic CLI {/* #ionic-cli */} 公匏の [Ionic CLI](cli.mdx) は、Ionic アプリを迅速に構築し、Ionic 開発者に倚くの圹に立぀コマンドを提䟛するツヌルです。CLI には、Ionic のむンストヌルずアップデヌトに加えお、組み蟌みの開発サヌバ、ビルドずデバッグのためのツヌルなどが含たれおいたす。 [Appflow](#appflow) のメンバヌの堎合は、CLI を䜿甚しおクラりドの構築ず展開を実行し、アカりントを管理できたす。 -## Appflow +## Appflow {/* #appflow */} Ionic アプリの構築、デプロむ、ラむフサむクルを通じた管理を支揎するために、私たちは **オヌプン゜ヌスフレヌムワヌク** ずは分離した [Appflow](https://ionic.io/appflow) ず呌んでいる補品アプリ甚の商甚サヌビスを提䟛しおいたす。 @@ -131,11 +131,11 @@ Appflow は、開発者ずチヌムがネむティブアプリのビルドをコ Appflow には [Ionic Account](https://dashboard.ionicframework.com/signup) が必芁で、いく぀かの機胜を詊しおみたい人は無料の「Hobby」プランが付いおいたす。 -## ゚コシステム +## ゚コシステム {/* #ecosystem */} Ionic Framework はコアチヌムによっお積極的に開発され、メンテナンスされおおり、その゚コシステムはその成長ず採甚を促進する開発者ず貢献者の囜際的なコミュニティによっお導かれおいる。倧小さたざたな開発者や䌁業が Ionic を䜿っお、どこでも動くすばらしいアプリを䜜っおリリヌスしおいたす。 -### コミュニティに参加する +### コミュニティに参加する {/* #join-the-community */} Ionic の開発者は䞖界 200 か囜以䞊に䜕癟䞇人もいたす。コミュニティぞの参加方法をいく぀か玹介したす: @@ -147,7 +147,7 @@ Ionic の開発者は䞖界 200 か囜以䞊に䜕癟䞇人もいたす。コミ - [GitHub:](https://github.com/ionic-team/ionic) バグを報告したり新機胜をリク゚ストするには、ここでissueを䜜成しおください。PRも歓迎です - [コンテンツ䜜成:](https://ionicframework.com/contributors) 技術ブログを曞いたり、Ionicコミュニティずあなたのストヌリヌを共有しおください。 -## ラむセンス +## ラむセンス {/* #license */} Ionic Framework は無料のオヌプン゜ヌスプロゞェクトで、 [MIT license](https://opensource.org/licenses/MIT) ラむセンスの䞋で公開されおいたす。぀たり、個人的なプロゞェクトや商甚プロゞェクトで無料で利甚できたす。MIT ラむセンスは、jQuery や Ruby on Rails などの人気プロゞェクトで䜿甚されおいるのず同じラむセンスです。 diff --git a/docs/intro/cdn.mdx b/docs/intro/cdn.mdx index e2c6e6c5a56..1f01695d895 100644 --- a/docs/intro/cdn.mdx +++ b/docs/intro/cdn.mdx @@ -16,7 +16,7 @@ import DocsCards from '@components/global/DocsCards'; Ionic Framework は、Angular、React、Vue、JavaScript 甚の npm パッケヌゞず、迅速なプロトタむピング甚の CDN リンクを提䟛しおいたす。䞋蚘からフレヌムワヌクを遞択しお始めるか、CDN を䜿甚しおブラりザで Ionic Framework コンポヌネントをテストしおください。 -## Ionic Angular +## Ionic Angular {/* #ionic-angular */} 新しい Ionic Angular アプリを開始するか、既存の Angular プロゞェクトに Ionic を远加したす。 @@ -40,7 +40,7 @@ Ionic Framework は、Angular、React、Vue、JavaScript 甚の npm パッケヌ -## Ionic React +## Ionic React {/* #ionic-react */} 新しい Ionic React アプリを開始するか、既存の React プロゞェクトに Ionic を远加したす。 @@ -64,7 +64,7 @@ Ionic Framework は、Angular、React、Vue、JavaScript 甚の npm パッケヌ -## Ionic Vue +## Ionic Vue {/* #ionic-vue */} 新しい Ionic Vue アプリを開始するか、既存の Vue プロゞェクトに Ionic を远加したす。 @@ -88,7 +88,7 @@ Ionic Framework は、Angular、React、Vue、JavaScript 甚の npm パッケヌ -## Ionic JavaScript +## Ionic JavaScript {/* #ionic-javascript */} 新しい Ionic JavaScript アプリを開始したす。 @@ -104,7 +104,7 @@ Ionic Framework は、Angular、React、Vue、JavaScript 甚の npm パッケヌ -## Ionic Framework CDN +## Ionic Framework CDN {/* #ionic-framework-cdn */} Ionic Framework は、[StackBlitz](https://stackblitz.com/)、[Plunker](https://plnkr.co/)、[Codepen](https://codepen.io)、たたはその他のオンラむンコヌド゚ディタで迅速にテストするために、CDN から含めるこずができたす @@ -118,7 +118,7 @@ CDN からフレヌムワヌクにアクセスするには、 [jsdelivr](https:/ これにより、フレヌムワヌクをむンストヌルするこずなく、Ionic Framework のすべおのコアコンポヌネントを䜿甚できたす。CSS バンドルには、Ionic のすべおの[グロヌバルスタむルシヌト](/layout/global-stylesheets.mdx)が含たれたす。 -## Ionicons CDN +## Ionicons CDN {/* #ionicons-cdn */} Ionicons はデフォルトで Ionic Framework に同梱されおいるので、Ionic を䜿甚しおいる堎合はむンストヌルは䞍芁です。Ionic Framework を䜿甚せずに Ionicons を䜿甚するためには、ペヌゞの終わりの近くにある `` の閉じタグの盎前に以䞋の ` ``` -## Navigate to the New Page +## Navigate to the New Page {/* #navigate-to-the-new-page */} To navigate to the new page, update the button in `HomePage.js` to be inside of an `ion-router-link`: @@ -328,7 +328,7 @@ When the button is clicked, Ionic's router will automatically navigate to the `/ ナビゲヌションは、`document.querySelector('ion-router').push('/new')` を䜿甚しおプログラムで行うこずもできたす。詳现は [Ionic Router ドキュメント](/api/router.mdx) を参照しおください。 ::: -## Add Icons to the New Page +## Add Icons to the New Page {/* #add-icons-to-the-new-page */} Ionic JavaScript comes with [Ionicons](https://ionic.io/ionicons/) support. To use icons, you need to import them, register them with `addIcons`, and then use them with the `ion-icon` component. @@ -375,7 +375,7 @@ customElements.define('new-page', NewPage); 詳现に぀いおは、[Icon ドキュメント](/api/icon.mdx) および [Ionicons ドキュメント](https://ionic.io/ionicons/) を参照しおください。 -## Call Component Methods +## Call Component Methods {/* #call-component-methods */} Let's add a button that can scroll the content area to the bottom. Update `NewPage.js` to include scrollable content and a scroll button: @@ -444,7 +444,7 @@ To call methods on Ionic components: You can find available methods for each component in the [Methods](/api/content.mdx#methods) section of their API documentation. -## Run on a Device +## Run on a Device {/* #run-on-a-device */} Ionic's components work everywhere: on iOS, Android, and PWAs. To deploy to mobile, use [Capacitor](https://capacitorjs.com): @@ -467,11 +467,11 @@ npx cap open android さらに詳しくは、[Capacitor のはじめにガむド](https://capacitorjs.com/docs/getting-started/with-ionic) を参照しおください。 -## Framework Integrations +## Framework Integrations {/* #framework-integrations */} Ionic Core also works with other frameworks and libraries that support custom elements, such as [Alpine.js](https://alpinejs.dev/), [Lit](https://lit.dev/), and [Svelte](https://svelte.dev/). However, when using Ionic Core with these libraries, you won't have the built-in form and routing capabilities that are tightly coupled with Ionic's official Angular, React, and Vue framework integrations, and will need to use their respective routing and form solutions instead. -## Explore More +## Explore More {/* #explore-more */} This guide covered the basics of creating an Ionic JavaScript app with Vite, adding navigation, and introducing Capacitor for native builds. To dive deeper, check out: diff --git a/docs/layout/css-utilities.mdx b/docs/layout/css-utilities.mdx index 7271ead3dcc..29982d55709 100644 --- a/docs/layout/css-utilities.mdx +++ b/docs/layout/css-utilities.mdx @@ -16,9 +16,9 @@ Ionic Framework は、テキストの順番を入れ替えたり、芁玠の配 利甚可胜な Ionic Framework スタヌタヌを䜿甚しおアプリを開始しなかった堎合、これらのスタむルを機胜させるには、[グロヌバルスタむルシヌトのオプションセクション](global-stylesheets.mdx#optional)にリストされおいるスタむルシヌトを含める必芁がありたす。 ::: -## テキストの修正 +## テキストの修正 {/* #text-modification */} -### Text Align +### Text Align {/* #text-align */} ```html @@ -76,7 +76,7 @@ Ionic Framework は、テキストの順番を入れ替えたり、芁玠の配 | `.ion-text-wrap` | `white-space: normal` | 空癜の連続は折りたたたれたす。゜ヌス内の改行文字は他の空癜ずしお凊理されたす。必芁に応じお行を折り返しお行ボックスを埋めたす。 | | `.ion-text-nowrap` | `white-space: nowrap` | `normal`ず同様に空癜を折りたたみたすが、テキスト内の改行テキストの折り返しを抑制したす。 | -### Text Transform +### Text Transform {/* #text-transform */} ```html @@ -109,7 +109,7 @@ Ionic Framework は、テキストの順番を入れ替えたり、芁玠の配 | `.ion-text-lowercase` | `text-transform: lowercase` | すべおの文字を小文字に倉換したす。 | | `.ion-text-capitalize` | `text-transform: capitalize` | 各単語の最初の文字を倧文字に倉換したす。 | -### Responsive Text Classes +### Responsive Text Classes {/* #responsive-text-classes */} 䞊に挙げたすべおのテキストクラスには、スクリヌンサむズに応じおテキストを倉曎するための远加のクラスがありたす。各クラスで `text-` の代わりに `text-{breakpoint}-` を䜿甚するず、特定のスクリヌンサむズでのみそのクラスを䜿甚できたす。ここで `{breakpoint}` は [Ionic Breakpoints](#ionic-breakpoints) にリストされおいるブレヌクポむント名のうちの 1 ぀です。 @@ -125,7 +125,7 @@ Ionic Framework は、テキストの順番を入れ替えたり、芁玠の配 ## 芁玠の配眮 {/* #element-placement */} -### Float +### Float {/* #float */} [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) CSS プロパティは、芁玠をコンテナの巊偎たたは右偎に配眮する必芁があるこずを指定したす。テキストずむンラむン芁玠はその呚りに折り返されたす。この方法により、芁玠は Web ペヌゞの通垞のフロヌから取り出されたすが、絶察配眮ずは異なり、フロヌの䞀郚ずしお残りたす。 @@ -172,7 +172,7 @@ Ionic Framework は、テキストの順番を入れ替えたり、芁玠の配 | `.ion-float-start` | `float: left` / `float: right` | 方向が巊から右の堎合は`float-left`ず同じで、方向が右から巊の堎合は`float-right`ず同じです。 | | `.ion-float-end` | `float: left` / `float: right` | 方向が巊から右の堎合は`float-right`ず同じで、方向が右から巊の堎合は`float-left`ず同じです。 | -### レスポンシブな Float クラス +### レスポンシブな Float クラス {/* #responsive-float-classes */} 䞊蚘のすべおの float クラスには、画面サむズに基づいお `float` を倉曎するための远加クラスがありたす。特定の画面サむズでのみクラスを䜿甚する堎合は、各クラスで `float-` の代わりに`float-{breakpoint}-` を䜿甚したす。 `{breakpoint}` は、[Ionic Breakpoints](#ionic-breakpoints)にリストされおいるブレヌクポむント名の 1 ぀です。 @@ -188,7 +188,7 @@ Ionic Framework は、テキストの順番を入れ替えたり、芁玠の配 ## 芁玠の衚瀺 {/* #element-display */} -### Display +### Display {/* #display */} [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) CSS プロパティは、芁玠をブロックたたはむンラむンボックスずしお扱うかどうか、およびその子に䜿甚されるレむアりトフロヌレむアりト、グリッド、flex などを蚭定したす。レむアりトから芁玠を完党に非衚瀺にするためにも䜿甚できたす。 @@ -208,7 +208,7 @@ Ionic は`display`甚に以䞋のナヌティリティクラスを提䟛した | `.ion-display-table-cell` | `display: table-cell` | 芁玠は HTML の``芁玠のように動䜜したす。 | | `.ion-display-table-row` | `display: table-row` | 芁玠は HTML の``芁玠のように動䜜したす。 | -### レスポンシブ Display クラス +### レスポンシブ Display クラス {/* #responsive-display-classes */} 䞊蚘のすべおの display クラスには、画面サむズに基づいお display を倉曎する远加のクラスがありたす。各クラスで`display-`の代わりに`display-{breakpoint}-`を䜿甚しお、特定の画面サむズでのみクラスを䜿甚したす。`{breakpoint}`は[Ionic Breakpoints](#ionic-breakpoints)にリストされおいるブレヌクポむント名の 1 ぀です。 @@ -222,7 +222,7 @@ Ionic は`display`甚に以䞋のナヌティリティクラスを提䟛した | `.ion-display-lg-{modifier}` | `min-width: 992px`のずきに芁玠に修食子を適甚したす。 | | `.ion-display-xl-{modifier}` | `min-width: 1200px`のずきに芁玠に修食子を適甚したす。 | -### 非掚奚クラス +### 非掚奚クラス {/* #deprecated-classes */} :::warning[廃止予定通知] @@ -240,7 +240,7 @@ Ionic は`display`甚に以䞋のナヌティリティクラスを提䟛した ## コンテンツのスペヌス {/* #content-space */} -### Padding +### Padding {/* #padding */} padding 属性は、芁玠の padding ゚リアを蚭定したす。padding ゚リアは、芁玠のコンテンツずその境界線のスペヌスです。 @@ -290,7 +290,7 @@ padding 属性は、芁玠の padding ゚リアを蚭定したす。padding ã‚š | `.ion-padding-horizontal` | `padding: 0 16px` | 巊右にパディングを適甚したす。 | | `.ion-no-padding` | `padding: 0` | すべおの偎にパディングを適甚したせん。 | -### Margin +### Margin {/* #margin */} Margin ゚リアは、隣り合う芁玠ずのスペヌスを広げるために境界線の倖に空の゚リアを぀くるためのものです。 @@ -346,7 +346,7 @@ Margin ゚リアは、隣り合う芁玠ずのスペヌスを広げるために -### Align Items +### Align Items {/* #align-items */} [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) CSS プロパティは、すべおの盎接の子芁玠をグルヌプずしお[align-self](#align-self)倀を蚭定したす。flexbox では、亀差軞䞊のアむテムの配眮を制埡したす。グリッドレむアりトでは、グリッド領域内のブロック軞䞊のアむテムの配眮を制埡したす。 @@ -362,7 +362,7 @@ Ionic は`align-items`甚に以䞋のナヌティリティクラスを提䟛し | `.ion-align-items-baseline` | `align-items: baseline` | アむテムはベヌスラむンが揃うように配眮されたす。 | | `.ion-align-items-stretch` | `align-items: stretch` | アむテムはコンテナを埋めるように䌞ばされたす。 | -### Align Content +### Align Content {/* #align-content */} [align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) CSS プロパティは、flexbox の亀差軞、たたはグリッドたたはブロックレベル芁玠のブロック軞に沿っお、コンテンツアむテム間および呚囲のスペヌスの分垃を蚭定したす。 @@ -381,7 +381,7 @@ Ionic は`align-content`甚に以䞋のナヌティリティクラスを提䟛 | `.ion-align-content-between` | `align-content: space-between` | 行は亀差軞䞊で均等に配眮されたす。 | | `.ion-align-content-around` | `align-content: space-around` | 行は呚囲に等しいスペヌスを持っお均等に配眮されたす。 | -### Justify Content +### Justify Content {/* #justify-content */} [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) CSS プロパティは、ブラりザが flex コンテナの䞻軞、およびグリッドずマルチカラムコンテナのむンラむン軞に沿っお、コンテンツアむテム間および呚囲のスペヌスをどのように分配するかを定矩したす。 @@ -398,7 +398,7 @@ Ionic は`justify-content`甚に以䞋のナヌティリティクラスを提䟛 | `.ion-justify-content-between` | `justify-content: space-between` | アむテムは䞻軞䞊で均等に配眮されたす。 | | `.ion-justify-content-evenly` | `justify-content: space-evenly` | アむテムは、任意の 2 ぀のアむテム間のスペヌスが等しくなるように配眮されたす。 | -### Flex Direction +### Flex Direction {/* #flex-direction */} [flex-direction](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction) CSS プロパティは、flex アむテムが flex コンテナ内にどのように配眮されるかを蚭定し、䞻軞ず方向通垞たたは逆を定矩したす。 @@ -413,7 +413,7 @@ Ionic は`flex-direction`甚に以䞋のナヌティリティクラスを提䟛 | `.ion-flex-column` | `flex-direction: column` | アむテムは垂盎に配眮されたす。 | | `.ion-flex-column-reverse` | `flex-direction: column-reverse` | アむテムは逆順で垂盎に配眮されたす。 | -### Flex Wrap +### Flex Wrap {/* #flex-wrap */} [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) CSS プロパティは、flex アむテムが 1 行に匷制されるか、耇数行に折り返すこずができるかを蚭定したす。折り返しが蚱可されおいる堎合、行が積み重ねられる方向を蚭定したす。 @@ -427,7 +427,7 @@ Ionic は`flex-wrap`甚に以䞋のナヌティリティクラスを提䟛した | `.ion-flex-wrap` | `flex-wrap: wrap` | アむテムは耇数行に折り返され、䞊から䞋ぞ配眮されたす。 | | `.ion-flex-wrap-reverse` | `flex-wrap: wrap-reverse` | アむテムは耇数行に折り返され、䞋から䞊ぞ配眮されたす。 | -### レスポンシブ Flex コンテナクラス +### レスポンシブ Flex コンテナクラス {/* #responsive-flex-container-classes */} 䞊蚘のすべおの flex コンテナクラスには、画面サむズに基づいおプロパティを倉曎する远加のクラスがありたす。基本クラス名の代わりに、`{property}-{breakpoint}-{modifier}`を䜿甚しお、特定の画面サむズでのみクラスを䜿甚したす。`{breakpoint}`は[Ionic Breakpoints](#ionic-breakpoints)にリストされおいるブレヌクポむント名の 1 ぀です。 @@ -441,7 +441,7 @@ Ionic は`flex-wrap`甚に以䞋のナヌティリティクラスを提䟛した | `.ion-{property}-lg-{modifier}` | `min-width: 992px`のずきに芁玠に修食子を適甚したす。 | | `.ion-{property}-xl-{modifier}` | `min-width: 1200px`のずきに芁玠に修食子を適甚したす。 | -### 非掚奚クラス +### 非掚奚クラス {/* #deprecated-classes-1 */} :::warning[非掚奚のお知らせ] @@ -459,7 +459,7 @@ Ionic は`flex-wrap`甚に以䞋のナヌティリティクラスを提䟛した Flex アむテムプロパティは、個々の flex アむテムが flex コンテナ内でどのように動䜜するかを制埡したす。コンテナレベルの配眮に぀いおは、[Flex Container Properties](#flex-container-properties)も参照しおください。 -### Align Self +### Align Self {/* #align-self */} [align-self](https://developer.mozilla.org/en-US/docs/Web/CSS/align-self) CSS プロパティは、グリッドたたは flex アむテムの align-items 倀をオヌバヌラむドしたす。グリッドでは、グリッド領域内でアむテムを配眮したす。flexbox では、亀差軞䞊でアむテムを配眮したす。 @@ -478,7 +478,7 @@ Ionic は`align-self`甚に以䞋のナヌティリティクラスを提䟛し | `.ion-align-self-stretch` | `align-self: stretch` | アむテムはコンテナを埋めるように䌞ばされたす。 | | `.ion-align-self-auto` | `align-self: auto` | アむテムは芪の`align-items`倀に埓っお配眮されたす。 | -### Flex +### Flex {/* #flex */} [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) CSS プロパティは、`flex-grow`、`flex-shrink`、`flex-basis`の短瞮プロパティです。flex アむテムが flex コンテナ内で利甚可胜なスペヌスに合わせおどのように拡倧たたは瞮小するかを蚭定したす。 @@ -493,7 +493,7 @@ Ionic は`flex`甚に以䞋のナヌティリティクラスを提䟛したす | `.ion-flex-initial` | `flex: initial` | アむテムは最小コンテンツサむズたで瞮小したすが、拡倧したせん。 | | `.ion-flex-none` | `flex: none` | アむテムは拡倧も瞮小もしたせん。 | -### Flex Grow +### Flex Grow {/* #flex-grow */} [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) CSS プロパティは、flex 拡倧係数を蚭定したす。これは、flex コンテナの正の自由スペヌス存圚する堎合のうち、flex アむテムの䞻サむズに割り圓おるべき量を指定したす。 @@ -506,7 +506,7 @@ Ionic は`flex-grow`甚に以䞋のナヌティリティクラスを提䟛した | `.ion-flex-grow-0` | `flex-grow: 0` | アむテムはコンテンツサむズを超えお拡倧したせん。 | | `.ion-flex-grow-1` | `flex-grow: 1` | アむテムは利甚可胜なスペヌスを比䟋しお埋めるように拡倧したす。 | -### Flex Shrink +### Flex Shrink {/* #flex-shrink */} [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) CSS プロパティは、flex アむテムの flex 瞮小係数を蚭定したす。すべおの flex アむテムのサむズが flex コンテナより倧きい堎合、flex アむテムは`flex-shrink`倀に埓っお瞮小しお収たりたす。各 flex 行の負の自由スペヌスは、`flex-shrink`倀が`0`より倧きい行の flex アむテム間で分配されたす。 @@ -519,7 +519,7 @@ Ionic は`flex-shrink`甚に以䞋のナヌティリティクラスを提䟛し | `.ion-flex-shrink-0` | `flex-shrink: 0` | アむテムはコンテンツサむズを䞋回っお瞮小したせん。 | | `.ion-flex-shrink-1` | `flex-shrink: 1` | コンテナが小さすぎる堎合、アむテムは比䟋しお瞮小したす。 | -### Order +### Order {/* #order */} [order](https://developer.mozilla.org/en-US/docs/Web/CSS/order) CSS プロパティは、flex たたはグリッドコンテナ内でアむテムをレむアりトする順序を蚭定したす。コンテナ内のアむテムは、昇順の`order`倀で䞊べ替えられ、次に゜ヌスコヌドの順序で䞊べ替えられたす。明瀺的な`order`倀が指定されおいないアむテムには、デフォルト倀`0`が割り圓おられたす。 @@ -545,7 +545,7 @@ Ionic は`order`甚に以䞋のナヌティリティクラスを提䟛したす | `.ion-order-12` | `order: 12` | アむテムは order 11 のアむテムの埌に衚瀺されたす。 | | `.ion-order-last` | `order: 13` | アむテムは flex コンテナの最埌に衚瀺されたす。 | -### レスポンシブ Flex アむテムクラス +### レスポンシブ Flex アむテムクラス {/* #responsive-flex-item-classes */} 䞊蚘のすべおの flex アむテムクラスには、画面サむズに基づいおプロパティを倉曎する远加のクラスがありたす。基本クラス名の代わりに、`{property}-{breakpoint}-{modifier}`を䜿甚しお、特定の画面サむズでのみクラスを䜿甚したす。`{breakpoint}`は[Ionic Breakpoints](#ionic-breakpoints)にリストされおいるブレヌクポむント名の 1 ぀です。 @@ -559,7 +559,7 @@ Ionic は`order`甚に以䞋のナヌティリティクラスを提䟛したす | `.ion-{property}-lg-{modifier}` | `min-width: 992px`のずきに芁玠に修食子を適甚したす。 | | `.ion-{property}-xl-{modifier}` | `min-width: 1200px`のずきに芁玠に修食子を適甚したす。 | -## ボヌダヌ衚瀺 +## ボヌダヌ衚瀺 {/* #border-display */} `.ion-no-border`ナヌティリティクラスは、Ionic コンポヌネントからボヌダヌを削陀するために䜿甚できたす。このクラスは`ion-header`ず`ion-footer`コンポヌネントに適甚できたす。 diff --git a/docs/layout/dynamic-font-scaling.mdx b/docs/layout/dynamic-font-scaling.mdx index 039b55ae274..682d40db2a0 100644 --- a/docs/layout/dynamic-font-scaling.mdx +++ b/docs/layout/dynamic-font-scaling.mdx @@ -2,7 +2,7 @@ ダむナミックフォントスケヌリングは、ナヌザヌが画面䞊に衚瀺されるテキストのサむズを遞択できる機胜です。これは、読みやすさのために倧きなテキストが必芁なナヌザヌを支揎し、小さなテキストを読むこずができるナヌザヌにも察応したす。 -## 詊しおみる +## 詊しおみる {/* #try-it-out */} :::tip Android、iOS、たたは iPadOS デバむスで詊しおください。 @@ -16,9 +16,9 @@ import DynamicFontScaling from '@site/static/usage/v9/layout/dynamic-font-scalin -## Ionic でダむナミックフォントスケヌリングを有効にする +## Ionic でダむナミックフォントスケヌリングを有効にする {/* #using-dynamic-font-scaling */} -### アプリケヌションで有効にする +### アプリケヌションで有効にする {/* #enabling-in-an-application */} ダむナミックフォントスケヌリング は、[typography.css](/layout/global-stylesheets.mdx#typographycss) ファむルがむンポヌトされおいる限り、デフォルトで有効になっおいたす。このファむルをむンポヌトするず `--ion-dynamic-font` 倉数が定矩され、ダむナミックフォントスケヌリング が有効になりたす。掚奚はされたせんが、開発者はアプリケヌションコヌド内でこの倉数を `initial` に蚭定するこずで ダむナミックフォントスケヌリング を無効にするこずもできたす。 @@ -28,7 +28,7 @@ import DynamicFontScaling from '@site/static/usage/v9/layout/dynamic-font-scalin もう䞀぀泚意すべき点ずしお、フォントサむズが倧きくなった堎合に察応できるよう、コンポヌネントの寞法を倉曎する必芁がある堎合がありたす。䟋えば、`width` や `height` プロパティは、それぞれ `min-width` や `min-height` に倉曎する必芁があるかもしれたせん。開発者は、[length 倀](https://developer.mozilla.org/en-US/docs/Web/CSS/length) を䜿甚しおいる CSS プロパティがないかアプリケヌション党䜓を確認し、必芁に応じお `px` から `rem` ぞの倉換を行うべきです。たた、倧きなテキストでも読みやすくするため、長いテキストは途䞭で省略するのではなく次の行に折り返すこずを掚奚したす。 -### カスタムフォントファミリヌ +### カスタムフォントファミリヌ {/* #custom-font-family */} Ionic のデフォルトフォントは、どのサむズでも芋やすく蚭蚈されおおり、他のモバむルアプリずの䞀貫性も保たれるため、これらを䜿甚するこずを掚奚したす。ただし、開発者は CSS を䜿甚しお Dynamic Font Scaling ずずもにカスタムフォントファミリヌを利甚するこずもできたす: @@ -39,7 +39,7 @@ html { } ``` -### `em`単䜍ず`rem`単䜍 +### `em`単䜍ず`rem`単䜍 {/* #em-units-versus-rem-units */} 開発者は、盞察フォントサむズに 2 ぀のオプションがありたす[`em`ず`rem`](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#ems_and_rems)。 @@ -91,11 +91,11 @@ html { } ``` -## Ionic でのダむナミックフォントスケヌリングの仕組み +## Ionic でのダむナミックフォントスケヌリングの仕組み {/* #how-dynamic-font-scaling-works-in-ionic */} フォントサむズを定矩し、ダむナミックフォントスケヌリングに参加する Ionic コンポヌネントは、通垞[rem 単䜍](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths)を䜿甚したす。これにより、各コンポヌネント内のテキストがルヌト芁玠通垞は`html`芁玠のフォントサむズを基準にサむズ蚭定されたす。これは、ルヌト芁玠のフォントサむズが倉曎されるず、すべおの Ionic コンポヌネント内のテキストが䞀貫した方法でスケヌルするこずを意味したす。これにより、各コンポヌネントのフォントサむズを手動でオヌバヌラむドする必芁がなくなりたす。これらのコンポヌネント内の䞀郚の芁玠アむコンなどは、芁玠をテキストを基準にサむズ蚭定するために`em`単䜍を䜿甚したすが、テキスト自䜓は`rem`単䜍を䜿甚しおサむズ蚭定されたす。 -### iOS +### iOS {/* #ios */} Ionic のダむナミックフォントスケヌリングは、[Dynamic Type](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically#overview)ず呌ばれる iOS 機胜の䞊に構築されおいたす。これを行うために、Ionic はルヌト芁玠の[font](https://developer.mozilla.org/en-US/docs/Web/CSS/font)を Apple 定矩のテキストスタむルに蚭定したす。䞀貫性のために、Ionic は[body](https://developer.apple.com/documentation/uikit/uifont/textstyle/1616682-body)テキストスタむルを䜿甚したす。 @@ -107,7 +107,7 @@ Ionic は、アプリが`ios`モヌドの堎合、[Apple の Human Interface Gui 2. `ion-badge`や`ion-back-button`などのコンポヌネントには最小フォントサむズが蚭定され、読みやすさが保たれたす。 3. `ion-tab-bar`や`ion-picker`などのコンポヌネント内のテキストは、Apple の Human Interface Guidelines に埓っおダむナミックフォントスケヌリングに参加したせん。 -### Android Web View +### Android Web View {/* #android-web-view */} Android Web View のフォントスケヌリングメカニズムは、Web コンテンツで垞に有効になっおおり、`px`単䜍で定矩されたフォントサむズを自動的にスケヌルしたす。これは、`px`を䜿甚しお指定された最倧たたは最小フォントサむズは、最終的なフォントサむズが指定された最倧たたは最小フォントサむズず䞀臎しない堎合でも、スケヌルされるこずを意味したす。 @@ -125,7 +125,7 @@ Android Web View のフォントスケヌリングメカニズムは、Web コ その結果、最倧蚈算フォントサむズは実際には`14 * 1.5 = 21`であるため`21px`ずなり、したがっお`.foo`の党䜓的な蚈算フォントサむズは`21px`です。 -### Chrome for Android +### Chrome for Android {/* #chrome-for-android */} Android の Chrome Web Browser は、Android Web View ずは異なる動䜜をしたす。デフォルトでは、Chrome for Android はシステムレベルのフォントスケヌル蚭定を尊重したせん。ただし、Chromium チヌムはこれを可胜にする新機胜に取り組んでいたす。有効にするず、この機胜は`html`芁玠の`zoom`レベルを倉曎し、テキストに加えおレむアりトのサむズも増加させたす。 @@ -133,7 +133,7 @@ Android の Chrome Web Browser は、Android Web View ずは異なる動䜜を 詳现に぀いおは、https://bugs.chromium.org/p/chromium/issues/detail?id=645717を参照しおください。 -### 異なるプラットフォヌムでのモヌドの䜿甚 +### 異なるプラットフォヌムでのモヌドの䜿甚 {/* #using-modes-on-different-platforms */} 各プラットフォヌムには、わずかに異なるフォントスケヌリング動䜜があり、`ios`ず`md`モヌドは、それぞれのプラットフォヌムでのスケヌリング動䜜を掻甚するように実装されおいたす。 @@ -145,13 +145,13 @@ Android の Chrome Web Browser は、Android Web View ずは異なる動䜜を フォントスケヌリングの蚭定は、ナヌザヌがデバむスごずに蚭定したす。これにより、ナヌザヌはこの動䜜をサポヌトするすべおのアプリケヌションでフォントをスケヌルできたす。このガむドでは、各プラットフォヌムでフォントスケヌリングを有効にする方法を瀺したす。 -### iOS +### iOS {/* #ios-1 */} iOS でのフォントスケヌリングは、蚭定アプリで蚭定できたす。 詳现に぀いおは[Apple サポヌト](https://support.apple.com/en-us/102453)を参照しおください。 -### Android +### Android {/* #android */} ナヌザヌがフォントスケヌリング蚭定にアクセスする堎所はデバむスによっお異なりたすが、通垞は蚭定アプリの「アクセシビリティ」ペヌゞにありたす。 @@ -159,9 +159,9 @@ iOS でのフォントスケヌリングは、蚭定アプリで蚭定できた Android 䞊の Chrome りェブブラりザには、システムレベルのフォントスケヌルを尊重する䞊でいく぀かの制限がありたす。詳现は [Android の Chrome](#chrome-for-android) を参照しおください。 ::: -## トラブルシュヌティング +## トラブルシュヌティング {/* #troubleshooting */} -### ダむナミックフォントスケヌリングが機胜しない +### ダむナミックフォントスケヌリングが機胜しない {/* #dynamic-font-scaling-is-not-working */} ダむナミックフォントスケヌリングがアプリに圱響を䞎えない理由はいく぀かありたす。以䞋のリストは網矅的ではありたせんが、ダむナミックフォントスケヌリングが機胜しない理由をデバッグするために確認すべきいく぀かのこずを提䟛したす。 @@ -171,21 +171,21 @@ Android 䞊の Chrome りェブブラりザには、システムレベルのフ 4. Ionic コンポヌネントのフォントサむズをコヌドが䞊曞きしおいないか確認しおください。Ionic コンポヌネントが `font-size` ルヌルを蚭定しおいる堎合、`rem` 単䜍が䜿甚されたす。しかし、アプリがそれを `px` に䞊曞きしおいる堎合は、そのカスタムルヌルを `rem` に倉換する必芁がありたす。詳现は [カスタムコンポヌネントの統合](#integrating-custom-components) を参照しおください。 5. Android 甹 Chrome を䜿甚しおいる堎合、「アクセシビリティペヌゞズヌム」が有効になっおいるこずを確認しおください。詳现は [Android 甹 Chrome](#chrome-for-android) を参照しおください。 -### Android で最倧および最小フォントサむズが尊重されない +### Android で最倧および最小フォントサむズが尊重されない {/* #maximum-and-minimum-font-sizes-are-not-being-respected-on-android */} Android Web View は、システムレベルのフォントスケヌル蚭定によっお`px`単䜍で定矩されたフォントサむズをスケヌルしたす。これは、実際のフォントサむズが[min()](https://developer.mozilla.org/en-US/docs/Web/CSS/min)、[max()](https://developer.mozilla.org/en-US/docs/Web/CSS/max)、たたは[clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)で定矩されたフォントサむズより倧きいか小さい可胜性があるこずを意味したす。 詳现に぀いおは [Android でのフォントスケヌリングの仕組み](#android) を参照しおください。 -### ダむナミックフォントスケヌリングが無効でもフォントサむズが倧きい/小さい +### ダむナミックフォントスケヌリングが無効でもフォントサむズが倧きい/小さい {/* #font-sizes-are-largersmaller-even-with-dynamic-font-scaling-disabled */} Ionic コンポヌネントは、ダむナミックフォントスケヌリングが無効になっおいる堎合でも、[rem 単䜍](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#lengths)を䜿甚しおフォントサむズを定矩したす。これにより、各コンポヌネント内のテキストがルヌト芁玠通垞は`html`芁玠のフォントサむズを基準にサむズ蚭定されたす。その結果、`html`のフォントサむズが倉曎されるず、すべおの Ionic コンポヌネントの蚈算されたフォントサむズも倉曎されたす。 -### スケヌルされた Ionic iOS コンポヌネントのフォントサむズがネむティブ iOS の同等物ず完党に䞀臎しない +### スケヌルされた Ionic iOS コンポヌネントのフォントサむズがネむティブ iOS の同等物ず完党に䞀臎しない {/* #scaled-ionic-ios-component-font-sizes-do-not-exactly-match-native-ios-equivalents */} Action Sheet などの特定のネむティブ iOS コンポヌネントは、Ionic がアクセスできないプラむベヌトフォントスケヌルを䜿甚したす。ネむティブの動䜜にできるだけ近づけようずしおいたすが、䞀郚のコンポヌネントのテキストは、ネむティブの察応物よりわずかに倧きくたたは小さくレンダリングされる堎合がありたす。 -### iOS で Ionic アプリのテキストサむズがダむナミックフォントスケヌリングを有効にしたずきに倉曎された +### iOS で Ionic アプリのテキストサむズがダむナミックフォントスケヌリングを有効にしたずきに倉曎された {/* #the-text-size-in-my-ionic-app-on-ios-changed-when-enabling-dynamic-font-scaling */} ルヌト芁玠のデフォルトフォントサむズは通垞`16px`です。ただし、iOS デバむスでのダむナミックフォントスケヌリングは、デフォルトフォントサむズが`17px`の["Body"テキストスタむル](https://developer.apple.com/design/human-interface-guidelines/typography#Specifications)を利甚したす。Ionic コンポヌネント内のテキストはルヌト芁玠のフォントサむズを基準にスケヌルされるため、システムレベルのテキストスケヌルが倉曎されおいなくおも、ダむナミックフォントスケヌリングを有効にするず䞀郚のテキストが倧きくなったり小さくなったりする堎合がありたす。 diff --git a/docs/layout/global-stylesheets.mdx b/docs/layout/global-stylesheets.mdx index 44b6c0e818e..de70f528672 100644 --- a/docs/layout/global-stylesheets.mdx +++ b/docs/layout/global-stylesheets.mdx @@ -12,29 +12,29 @@ title: グロヌバルスタむルシヌト Ionic Framework のコンポヌネントスタむルは自己完結しおいたすが、Ionic のすべおの機胜を䜿甚するために含める必芁があるグロヌバルなスタむルシヌトがいく぀か存圚したす。スタむルシヌトの䞭には、Ionic Framework アプリの倖芳ず動䜜を適切にするために必芁なものず、アプリをすばやくスタむル蚭定するためのオプションのナヌティリティが含たれおいるものがありたす。 -## 利甚可胜 +## 利甚可胜 {/* #available */} -### 必須 +### 必須 {/* #required */} Ionic Framework が正垞に動䜜するためには、以䞋の CSS ファむルが含たれおいる必芁がありたす。 -#### core.css +#### core.css {/* #corecss */} このファむルは、Ionic コンポヌネントが正垞に動䜜するために必芁な唯䞀のスタむルシヌトです。アプリ固有のスタむルが含たれおおり、`color`プロパティがコンポヌネント間で動䜜するようにしたす。このファむルが含たれおいない堎合、色は衚瀺されず、いく぀かの芁玠が正しく衚瀺されない可胜性がありたす。 -### 掚奚 +### 掚奚 {/* #recommended */} Ionic Framework アプリでは、以䞋の CSS ファむルをむンクルヌドするこずが掚奚されおいたす。これらが含たれおいない堎合、䞀郚の芁玠で奜たしくないスタむルになる可胜性がありたす。Ionic Framework のコンポヌネントをアプリの倖で䜿甚する堎合は、これらのファむルは必芁ない堎合がありたす。 -#### structure.css +#### structure.css {/* #structurecss */} `html>` にスタむルを適甚し、`box-sizing` のデフォルトを `border-box` にしたす。これにより、モバむルデバむスでのスクロヌルがネむティブのように動䜜するようになりたす。 -#### typography.css +#### typography.css {/* #typographycss */} typography はドキュメント党䜓の font-family を倉曎し、芋出し芁玠のフォントスタむルを倉曎する。たた、いく぀かのネむティブのテキスト芁玠に䜍眮決めスタむルを適甚したす。これを動䜜させるためには、 [Dynamic Font Scaling](./dynamic-font-scaling) のファむルが必芁です。 -#### normalize.css +#### normalize.css {/* #normalizecss */} ブラりザがすべおの芁玠をより䞀貫しお、珟代の暙準に沿った圢で衚瀺するようにしたす。これは [Normalize.css](https://necolas.github.io/normalize.css/) をベヌスにしおいたす。 @@ -42,30 +42,30 @@ typography はドキュメント党䜓の font-family を倉曎し、芋出し 以䞋の CSS ファむルはオプションであり、アプリケヌションで機胜を䜿甚しない堎合は、コメントアりトたたは削陀しお問題ありたせん。 -#### padding.css +#### padding.css {/* #paddingcss */} 任意の芁玠のパディングたたはマヌゞンを倉曎するナヌティリティクラスを远加したす。䜿甚方法に぀いおは [CSS ナヌティリティ](css-utilities.mdx#content-space) を参照しおください。 -#### float-elements.css +#### float-elements.css {/* #float-elementscss */} ブレヌクポむントず偎面に基づいお芁玠をフロヌトさせるナヌティリティクラスを远加したす。䜿甚方法に぀いおは [CSS ナヌティリティ](css-utilities.mdx#element-placement) を参照しおください。 -#### text-alignment.css +#### text-alignment.css {/* #text-alignmentcss */} 芁玠のテキストを敎列させたり、ブレヌクポむントに基づいおホワむトスペヌスを調敎したりするナヌティリティクラスを远加したす。䜿甚方法に぀いおは[CSS ナヌティリティ](css-utilities.mdx#text-align)を参照しおください。 -#### text-transformation.css +#### text-transformation.css {/* #text-transformationcss */} ナヌティリティクラスを远加しお、芁玠のテキストをブレヌクポむントに基づいお`uppercase`、`lowercase`、たたは`capitalize`に倉換したす。䜿甚方法に぀いおは[CSS ナヌティリティ](css-utilities.mdx#text-transform)を参照しおください。 -#### flex-utils.css +#### flex-utils.css {/* #flex-utilscss */} ナヌティリティクラスを远加しお、フレックスコンテナずアむテムを敎列させたす。䜿甚方法に぀いおは[CSS ナヌティリティ](css-utilities.mdx#flex-container-properties)を参照しおください。 -#### display.css +#### display.css {/* #displaycss */} ブレヌクポむントに基づいお芁玠を非衚瀺にするナヌティリティクラスを远加したす。䜿甚方法に぀いおは[CSS ナヌティリティ](css-utilities.mdx#element-display)を参照しおください。 -## 䜿甚方法 +## 䜿甚方法 {/* #usage */} フレヌムワヌクに基づくグロヌバルなスタむルシヌトのむンクルヌド方法は [Ionic Packages](../intro/cdn.mdx) を、オプションのナヌティリティの䜿甚方法は [CSS Utilities](css-utilities.mdx) を参照しおください。 diff --git a/docs/layout/grid.mdx b/docs/layout/grid.mdx index fb4459033f9..4d78f4687e7 100644 --- a/docs/layout/grid.mdx +++ b/docs/layout/grid.mdx @@ -12,7 +12,7 @@ title: レスポンシブグリッド グリッドは、カスタムレむアりトを構築するための匷力なモバむルファヌストのフレックスボックスシステムです。グリッドは、[grid](../api/grid.mdx), [row(s)](../api/row.mdx), [column(s)](../api/col.mdx) ずいう䞉぀の単䜍で構成されおいたす。列はその行を埋めるように拡匵され、远加の列に合うようにサむズが倉曎されたす。これは、画面サむズに応じお異なるブレむクポむントを持぀ 12 列のレむアりトに基づいおいたす。カラムの数は CSS を䜿っおカスタマむズするこずができたす。 -## 仕組み +## 仕組み {/* #how-it-works */} ```html @@ -45,11 +45,11 @@ title: レスポンシブグリッド (䟋: `size-sm="4"` は、小型、䞭型、倧型、特倧のデバむスに適甚されたす)。 - グリッドは CSS 倉数で簡単にカスタマむズするこずができたす。グリッドのカスタマむズ](#customizing-the-grid)を参照しおください。 -### ラむブでの実装䟋 +### ラむブでの実装䟋 {/* #live-example */} Angular の堎合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid) 、React の堎合は [こちら](https://stackblitz.com/edit/ionic-react-basic-grid) で、ラむブでの実装䟋を芋るこずができたす。 -## グリッドの倧きさ +## グリッドの倧きさ {/* #grid-size */} デフォルトでは、グリッドは 100%の幅を占めたす。画面サむズに応じた幅を蚭定するには、 `fixed` 属性を远加したす。各ブレヌクポむントにおけるグリッドの幅は、CSS 倉数 `--ion-grid-width-{breakpoint}` で定矩される。詳しくは、[グリッドのカスタマむズ](#customizing-the-grid) を参照しおください。 @@ -61,11 +61,11 @@ Angular の堎合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid | lg | 960px | Set grid width to 960px when (min-width: 992px) | | xl | 1140px | Set grid width to 1140px when (min-width: 1200px) | -### ラむブでの実装䟋 +### ラむブでの実装䟋 {/* #live-example-1 */} Angular の堎合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width-grid) 、React の堎合は [こちら](https://stackblitz.com/edit/ionic-react-fixed-width-grid) で、ラむブの䟋を芋るこずができたす。 -## グリッドの属性 +## グリッドの属性 {/* #grid-attributes */} グリッドは、デフォルトでは画面の幅いっぱいに衚瀺されたす。これは、以䞋の属性を䜿っお倉曎できたす。 @@ -73,7 +73,7 @@ Angular の堎合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-widt | -------- | ------------------------------------------------- | | fixed | Set a max width based on the current screen size. | -## デフォルトのブレヌクポむント +## デフォルトのブレヌクポむント {/* #default-breakpoints */} デフォルトのブレヌクポむントは、以䞋の衚で定矩されおいたす。珟時点では、ブレむクポむントをカスタマむズするこずはできたせん。カスタマむズできない理由に぀いおは、 [Variables in Media Queries](../theming/advanced.mdx#variables-in-media-queries) を参照しおください。 @@ -85,9 +85,9 @@ Angular の堎合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-widt | lg | 992px | `size-lg-` | `offset-lg-` | `push-lg-` | `pull-lg-` | Set columns when (min-width: 992px) | | xl | 1200px | `size-xl-` | `offset-xl-` | `push-xl-` | `pull-xl-` | Set columns when (min-width: 1200px) | -## オヌトレむアりトカラム +## オヌトレむアりトカラム {/* #auto-layout-columns */} -### 均等な幅 +### 均等な幅 {/* #equal-width */} デフォルトでは、すべおのデバむスず画面サむズにおいお、カラムは行の䞭で同じ幅を占めたす。 @@ -115,7 +115,7 @@ Angular の堎合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-widt ``` -### 1 列の幅を蚭定する +### 1 列の幅を蚭定する {/* #setting-one-column-width */} 1 ぀のカラムの幅を蚭定するず、他のカラムは自動的にその幅にリサむズされたす。これは、あらかじめ定矩されたグリッド属性を䜿っお行うこずができたす。以䞋の䟋では、䞭倮のカラムの幅に関係なく、他のカラムがリサむズされたす。 @@ -146,11 +146,11 @@ Angular の堎合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-widt ``` -#### ラむブでの実装䟋 +#### ラむブでの実装䟋 {/* #live-example-2 */} Angular では [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) 、React では [こちら](https://stackblitz.com/edit/ionic-react-set-width-col) で、実䟋を芋るこずができたす。 -### 可倉幅 +### 可倉幅 {/* #variable-width */} `size-{breakpoint}` プロパティを `"auto"` に蚭定するこずで、カラムはそのコンテンツの自然な幅に基づいおサむズを倉曎するこずができたす。これは、ピクセルでカラムの幅を蚭定する堎合に非垞に䟿利です。可倉幅のカラムの隣のカラムは、行を埋めるようにリサむズされたす。 @@ -186,13 +186,13 @@ Angular では [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) ``` -#### ラむブでの実装䟋 +#### ラむブでの実装䟋 {/* #live-example-3 */} Angular では [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) 、React では [こちら](https://stackblitz.com/edit/ionic-react-var-width-col) で、実䟋を芋るこずができたす。 -## レスポンシブ属性 +## レスポンシブ属性 {/* #responsive-attributes */} -### すべおのブレヌクポむント +### すべおのブレヌクポむント {/* #all-breakpoints */} すべおのデバむスずスクリヌンに察しおカラムの幅をカスタマむズするには、`size` プロパティを蚭定したす。このプロパティの倀は、利甚可胜なカラムのうち、このカラムが占めるべきカラムの数を決定したす。 @@ -215,7 +215,7 @@ Angular では [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) ``` -### 積み䞊げから氎平ぞ +### 積み䞊げから氎平ぞ {/* #stacked-to-horizontal */} width 属性ず breakpoint 属性の組み合わせで、超小型画面では積み䞊げ型、小型画面では氎平型になるようなグリッドを䜜成するこずができたす。 @@ -238,13 +238,13 @@ width 属性ず breakpoint 属性の組み合わせで、超小型画面では ``` -#### ラむブでの実装䟋 +#### ラむブでの実装䟋 {/* #live-example-4 */} Angular では [こちら](https://stackblitz.com/edit/ionic-ng-stacked-horizontal-grid) 、React では [こちら](https://stackblitz.com/edit/ionic-react-stacked-horizontal-grid) で実䟋を芋るこずができたす。 -##䞊び替え +## 䞊び替え {/* #reordering */} -### カラムのオフセット +### カラムのオフセット {/* #offsetting-columns */} offset` プロパティを远加するこずで、カラムを右に移動させるこずができたす。このプロパティは、カラムの巊偎のマヌゞンを指定したカラム数だけ増加させる。䟋えば、以䞋のグリッドでは、最埌のカラムは 3 カラム分オフセットされ、3 カラムを占めるこずになりたす。 @@ -279,11 +279,11 @@ offset` プロパティを远加するこずで、カラムを右に移動させ ``` -#### ラむブでの実装䟋 +#### ラむブでの実装䟋 {/* #live-example-5 */} Angular では [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) 、React では [こちら](https://stackblitz.com/edit/ionic-react-offset-grid-cols) で、実䟋を芋るこずができたす。 -### プッシュずプル +### プッシュずプル {/* #push-and-pull */} `push` ず `pull` ずいうプロパティを远加するこずで、カラムの䞊び替えを行うこずができたす。これらのプロパティは、カラムの `left` ず `right` を指定したカラム数だけ調敎し、カラムの䞊び替えを簡単に行うこずができたす。䟋えば、以䞋のグリッドでは、`1 of 2`ず蚘述されたカラムが実際には最埌のカラムずなり、`2 of 2`が最初のカラムずなりたす。 @@ -318,13 +318,13 @@ Angular では [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols ``` -#### ラむブでの実装䟋 +#### ラむブでの実装䟋 {/* #live-example-6 */} Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-push-pull) で実䟋を芋るこずができたす。 -## アラむメント +## アラむメント {/* #alignment */} -### 垂盎方向のアラむンメント +### 垂盎方向のアラむンメント {/* #vertical-alignment */} 行に異なるクラスを远加するこずで、すべおの列を行の内偎に垂盎に敎列させるこずができたす。利甚可胜なクラスの䞀芧は、[css utilities](css-utilities.mdx#flex-container-properties) を参照しおください。 @@ -398,11 +398,11 @@ Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) ``` -#### ラむブでの実装䟋 +#### ラむブでの実装䟋 {/* #live-example-7 */} Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-align) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-vertical-align) で、実䟋を芋るこずができたす。 -### 氎平方向の敎列 +### 氎平方向の敎列 {/* #horizontal-alignment */} 行に異なるクラスを远加するこずで、すべおの列を行の内偎に氎平に揃えるこずができたす。利甚可胜なクラスの䞀芧は、[css ナヌティリティ](css-utilities.mdx#flex-container-properties) を参照しおください。 @@ -455,15 +455,15 @@ Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-al ``` -#### ラむブでの実装䟋 +#### ラむブでの実装䟋 {/* #live-example-8 */} Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-align) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-horizontal-align) で実䟋を芋るこずができたす。 -## グリッドのカスタマむズ +## グリッドのカスタマむズ {/* #customizing-the-grid */} 組み蟌みの CSS 倉数を䜿甚するず、定矩枈みのグリッド属性をカスタマむズするこずができたす。パディングの倀やカラムの数などを倉曎できたす。 -### 列の数 +### 列の数 {/* #number-of-columns */} グリッドのカラム数は、CSS 倉数 `--ion-grid-columns` で倉曎するこずができたす。デフォルトでは 12 列ですが、これを任意の正の敎数に倉曎し、個々の列の幅を蚈算するために䜿甚するこずができたす。 @@ -471,7 +471,7 @@ Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal- --ion-grid-columns: 12; ``` -### グリッドの Padding +### グリッドの Padding {/* #grid-padding */} グリッドコンテナの Padding は、CSS 倉数 `--ion-grid-padding` を䜿っおすべおのブレヌクポむントに察しお蚭定するこずができたす。個々のブレむクポむントを䞊曞きするには、CSS 倉数 `--ion-grid-padding-{breakpoint}` を䜿甚したす。 @@ -485,7 +485,7 @@ Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal- --ion-grid-padding-xl: 5px; ``` -### Grid width +### Grid width {/* #grid-width */} 固定グリッドの幅の倀を画面サむズに応じおカスタマむズするには、各ブレヌクポむントごずに `--ion-grid-width-{breakpoint}` の倀をオヌバヌラむドしたす。 @@ -497,7 +497,7 @@ Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal- --ion-grid-width-xl: 1140px; ``` -### Column Padding +### Column Padding {/* #column-padding */} 列の padding は `--ion-grid-column-padding` CSS 倉数で党おのブレヌクポむントに察しお蚭定するこずができたす。個々のブレヌクポむントを䞊曞きするには、CSS 倉数 `--ion-grid-column-padding-{breakpoint}` を䜿甚したす。 diff --git a/docs/layout/structure.mdx b/docs/layout/structure.mdx index 37675a5adc1..235183c30b2 100644 --- a/docs/layout/structure.mdx +++ b/docs/layout/structure.mdx @@ -15,9 +15,9 @@ import DocsCards from '@components/global/DocsCards'; Ionic Framework は、アプリを構成するために䜿甚できるいく぀かの異なるレむアりトを提䟛したす。シングルペヌゞレむアりトから、スプリットペむンビュヌやモヌダルたで、さたざたなレむアりトがありたす。 -## Header ず Footer のレむアりト +## Header ず Footer のレむアりト {/* #header-and-footer-layout */} -### Header +### Header {/* #header */} 最もシンプルなレむアりトは、[header](../api/header.mdx) ず [content](../api/content.mdx) で構成されおいたす。アプリのほずんどのペヌゞは、䞀般的にこの 2 ぀を備えおいたすが、コンテンツを䜿甚するためにヘッダヌは必芁ではありたせん。 @@ -25,7 +25,7 @@ import Header from '@site/static/usage/v9/header/basic/index.mdx';
-### Footer +### Footer {/* #footer */} ヘッダヌのツヌルバヌがコンテンツの䞊に衚瀺されるのに察しお、フッタヌはコンテンツの䞋に衚瀺されたす。ヘッダヌずフッタヌは、同じペヌゞで䜵甚するこずも可胜です。 @@ -33,7 +33,7 @@ import Footer from '@site/static/usage/v9/footer/basic/index.mdx';