diff --git a/cspell.json b/cspell.json index 385200d0e10..d738043b6e6 100644 --- a/cspell.json +++ b/cspell.json @@ -1,26 +1,32 @@ -{ - "dictionaries": ["custom-words"], - "dictionaryDefinitions": [ - { - "name": "custom-words", - "path": "./cspell-wordlist.txt", - "addWords": true - } - ], - "ignoreRegExpList": [ - "/(```+)[\\s\\S]+?\\1/g", - "`([^`]*)`", - "/:[a-zA-Z0-9-_\\+]+:/g" - ], - "ignorePaths": [ - "docs/cli", - "docs/native", - "versioned_docs/**/api", - "versioned_docs/**/cli", - "versioned_docs/**/native", - "node_modules" - ], - "flagWords": [ - "hte" - ] -} +{ + "dictionaries": ["custom-words"], + "dictionaryDefinitions": [ + { + "name": "custom-words", + "path": "./cspell-wordlist.txt", + "addWords": true + } + ], + "ignoreRegExpList": [ + "/(```+)[\\s\\S]+?\\1/g", + "`([^`]*)`", + "/:[a-zA-Z0-9-_\\+]+:/g" + ], + "ignorePaths": [ + "docs/cli", + "docs/native", + "versioned_docs/**/api", + "versioned_docs/**/cli", + "versioned_docs/**/native", + "node_modules" + ], + "flagWords": [ + "hte" + ], + "words": [ + "tappable", + "Overscroll", + "expressjs", + "browserslistrc" + ] +} diff --git a/docs/core-concepts/webview.md b/docs/core-concepts/webview.md index 17382c430e1..d32f338a4dc 100644 --- a/docs/core-concepts/webview.md +++ b/docs/core-concepts/webview.md @@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core'; Capacitor.convertFileSrc(filePath); ``` -For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md). +For Cordova apps, the [Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview) provides a utility function for converting File URIs: `window.Ionic.WebView.convertFileSrc()`. There is also a corresponding Ionic Native plugin: [`@awesome-cordova-plugins/ionic-webview`](https://danielsogl.gitbook.io/awesome-cordova-plugins/ionic-webview). ### Implementations diff --git a/docusaurus.config.js b/docusaurus.config.js index e7b90b1c434..d7c42ea71c1 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -1,35 +1,10 @@ const path = require('path'); const prismic = require('@prismicio/client'); -const fetch = require('node-fetch'); const VERSIONS_JSON = require('./versions.json'); - -/** - * Old versions of the Ionic Docs are archived so - * that we do not need to re-build it every time we deploy. - * Building a large number of docs sites at once can cause - * out of memory issues, so archiving old docs sites - * allow us to keep memory usage and build times low. - * - * Note that this file is only for versions of the Ionic Docs - * that are built with Docusaurus. The - * Ionic v3 and v4 docs are built with other tools, so those - * versions are not included here. - * - * Note that the urls specified in this file should - * NOT have a trailing slash otherwise users will - * briefly get a 404 Page Not Found error before - * the docuementation website loads. - */ const ARCHIVED_VERSIONS_JSON = require('./versionsArchived.json'); -/** - * This returns an array where each entry is an array - * containing the version name at index 0 and - * the archive url at index 1. - */ const ArchivedVersionsDropdownItems = Object.entries(ARCHIVED_VERSIONS_JSON).splice(0, 5); - const BASE_URL = '/docs'; module.exports = { @@ -51,12 +26,12 @@ module.exports = { favicon: 'img/meta/favicon-96x96.png', organizationName: 'ionic-team', projectName: 'ionic-docs', + presets: [ [ '@docusaurus/preset-classic', /** @type {import('@docusaurus/preset-classic').Options} */ { - // Will be passed to @docusaurus/plugin-content-docs (false to disable). docs: { routeBasePath: '/', sidebarPath: require.resolve('./sidebars.js'), @@ -81,18 +56,15 @@ module.exports = { }, exclude: ['README.md'], lastVersion: 'current', - /** @type {import('@docusaurus/plugin-content-docs').VersionOptions} */ versions: { current: { label: 'v8', }, }, }, - // Will be passed to @docusaurus/plugin-google-tag-manager. googleTagManager: { containerId: 'GTM-TKMGCBC', }, - // Will be passed to @docusaurus/theme-classic. theme: { customCss: [ require.resolve('./node_modules/modern-normalize/modern-normalize.css'), @@ -103,6 +75,7 @@ module.exports = { }, ], ], + /** @type {import('@docusaurus/preset-classic').ThemeConfig} */ themeConfig: { announcementBar: { @@ -114,34 +87,13 @@ module.exports = { metadata: [ { name: 'og:image', content: 'https://ionicframework.com/docs/img/meta/open-graph.png' }, { name: 'twitter:image', content: 'https://ionicframework.com/docs/img/meta/open-graph.png' }, - { - name: 'twitter:card', - content: 'summary_large_image', - }, - { - name: 'twitter:domain', - content: 'ionicframework.com', - }, - { - name: 'twitter:site', - content: '@ionicframework', - }, - { - name: 'twitter:creator', - content: 'ionicframework', - }, - { - name: 'fb:page_id', - content: '1321836767955949', - }, - { - name: 'og:type', - content: 'website', - }, - { - name: 'og:site_name', - content: 'Ionic Framework Docs', - }, + { name: 'twitter:card', content: 'summary_large_image' }, + { name: 'twitter:domain', content: 'ionicframework.com' }, + { name: 'twitter:site', content: '@ionicframework' }, + { name: 'twitter:creator', content: 'ionicframework' }, + { name: 'fb:page_id', content: '1321836767955949' }, + { name: 'og:type', content: 'website' }, + { name: 'og:site_name', content: 'Ionic Framework Docs' }, ], colorMode: { defaultMode: 'light', @@ -195,22 +147,12 @@ module.exports = { dropdownItemsAfter: [ ...ArchivedVersionsDropdownItems.map(([versionName, versionUrl]) => ({ label: versionName, - /** - * Use "to" instead of "href" so the - * external URL icon does not show up. - */ to: versionUrl, - /** - * Just like the version docs in this project, - * we want to archived versions to open in the - * same tab. - */ target: '_self', })), { to: 'https://ionicframework.com/docs/v4/components', label: 'v4', target: '_blank' }, { to: 'https://ionicframework.com/docs/v3/', label: 'v3', target: '_blank' }, ], - // dropdownItemsAfter: [{to: '/versions', label: 'All versions'}], dropdownActiveClassDisabled: true, }, { @@ -323,8 +265,6 @@ module.exports = { }, prism: { theme: { plain: {}, styles: [] }, - // Prism provides a [default list of languages](https://github.com/FormidableLabs/prism-react-renderer/blob/e1c83a468b05df7f452b3ad7e4ae5ab874574d4e/packages/generate-prism-languages/index.ts#L9-L26). - // A list of [additional languages](https://prismjs.com/#supported-languages) that are supported can be found at their website. additionalLanguages: ['shell-session', 'http', 'diff'], }, algolia: { @@ -335,7 +275,6 @@ module.exports = { }, }, plugins: [ - // Allows usage of Sass/SCSS in the CSS preprocessor. 'docusaurus-plugin-sass', [ 'docusaurus-plugin-module-alias', @@ -354,10 +293,7 @@ module.exports = { async loadContent() { const repoName = 'ionicframeworkcom'; const endpoint = prismic.getEndpoint(repoName); - const client = prismic.createClient(endpoint, { - fetch, - }); - + const client = prismic.createClient(endpoint); return await client.getByType('docs_ad'); }, async contentLoaded({ content, actions: { setGlobalData, addRoute } }) { diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/README.md b/i18n/ja/docusaurus-plugin-content-docs/current/README.md new file mode 100644 index 00000000000..12005305278 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/README.md @@ -0,0 +1,17 @@ +# Docs folder + +The `/docs` folder houses all markdown files. The page structure loosely maps to the routing on the site since paths can be changed in the frontmatter. + +## Versioning + +This folder can also contain components, assets, and whatever else is meant to be versioned when the docusaurus versioning script is run. For example, if there is a page component that is only relevant to the `layout` section in the current version of Ionic, it could be added to a `_components/` folder in `docs/layout/`. When the versioning script is run, the component will be copied to `versioned_docs/version-{X}/layout/_components/` and there will now be a separate component in `docs/layout/_components/` that can be deleted or updated to the latest version. The same concept applies to images and other files. + +If components are meant to be shared across versions, they can be put in `src/components/`. If images and other served files are meant to be shared across versions they can be put in `static/`. + +## Auto Generated Files + +All markdown files in these directories are generated from [scripts](/scripts): + +- `docs/api/` +- `docs/cli/commands/` +- `docs/native/` diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/build-options.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/build-options.md new file mode 100644 index 00000000000..630864d1621 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/build-options.md @@ -0,0 +1,700 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Build Options + +Developers have two options for using Ionic components: Standalone or Modules. This guide covers both options as well as the benefits and downsides of each approach. + +While the Standalone approach is newer and makes use of more modern Angular APIs, the Modules approach will continue to be supported in Ionic. Most of the Angular examples on this documentation website use the Modules approach. + +## Standalone + +:::info +Ionic UI components as Angular standalone components is supported starting in Ionic v7.5. +::: + +### 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. + +See the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for instructions on how to update your Ionic app to make use of Ionic standalone components. + +**Benefits** + +1. Enables treeshaking so the final build output only includes the code necessary to run your app which reduces overall build size. +2. Avoids the use of NgModules to streamline the development experience and make your code easier to understand. +3. Allows developers to also use newer Angular features such as [ESBuild](https://angular.io/guide/esbuild). + +**Drawbacks** + +1. Ionic components need to be imported into every Angular component they are used in which can be time consuming to set up. + +### Usage with Standalone-based Applications + +:::warning +All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking. +::: + +**Bootstrapping and Configuration** + +Ionic Angular needs to be configured when the Angular application calls `bootstrapApplication` using the `provideIonicAngular` function. Developers can pass any [IonicConfig](../developing/config#ionicconfig) values as an object in this function. Note that `provideIonicAngular` needs to be called even if no custom config is passed. + +```typescript title="main.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; + +bootstrapApplication(AppComponent, { + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + provideIonicAngular({ mode: 'ios' }), + provideRouter(routes), + ], +}); +``` + +**Components** + +In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { IonButton, IonContent } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], + standalone: true, + imports: [IonButton, IonContent], +}) +export class HomePage { + constructor() {} +} +``` + +**Icons** + +The icon SVG data needs to be defined in the Angular component so it can be loaded correctly. Developers can use the `addIcons` function from `ionicons` to map the SVG data to a string name. Developers can then reference the icon by its string name using the `name` property on `IonIcon`. + +We recommend calling `addIcons` in the Angular component `constructor` so the data is only added if the Angular component is being used. + +For developers using Ionicons 7.2 or newer, passing only the SVG data will cause the string name to be automatically generated. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { IonIcon } from '@ionic/angular/standalone'; +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], + standalone: true, + imports: [IonIcon], +}) +export class HomePage { + constructor() { + /** + * On Ionicons 7.2+ this icon + * gets mapped to a "logo-ionic" key. + * Alternatively, developers can do: + * addIcons({ 'logo-ionic': logoIonic }); + */ + addIcons({ logoIonic }); + } +} +``` + +Icons can also be registered in entry points such as `app.component.ts` to avoid the need to call `addIcons` multiple times. Developers should be aware that the initial application chunk may increase because the registered icons will need to be loaded at application start. However, if your application uses a small number of icons the impact of this may be minimal. + +```typescript title="app.component.ts" +import { Component } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], + standalone: true, +}) +export class AppComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ logoIonic }); + } +} +``` + +Icons registered in an application entry point can then be referenced by name anywhere in the application. + +```html title="home.page.html" + + +``` + +**Routing** + +Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (``) elements should import `IonRouterLinkWithHref` instead. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], + standalone: true, + imports: [ + IonButton, + RouterLink, // required to get base routerLink behavior for @angular/router + IonRouterLink, // use IonRouterLinkWithHref if you are using an element instead + ], +}) +export class HomePage {} +``` + +```html title="home.page.html" +Go to Foo Page +``` + +**Testing** + +Ionic Angular's standalone components use ES Modules. As a result, developers using Jest should ensure that ES Modules are transpiled to a format that Jest can use. Developers using Jest should add the following to their Jest config: + + + + +```json + +"transformIgnorePatterns": ["/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"] +``` + + + + +```json + +"transformIgnorePatterns": ["/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"] +``` + + + + +### Usage with NgModule-based Applications + +:::warning +All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking. +::: + +**Bootstrapping and Configuration** + +Ionic Angular needs to be configured in the `providers` array of `app.module.ts` using the `provideIonicAngular` function. Developers can pass any [IonicConfig](../developing/config#ionicconfig) values as an object in this function. Note that `provideIonicAngular` needs to be called even if no custom config is passed. + +```typescript title="app.module.ts" +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouteReuseStrategy } from '@angular/router'; + +import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone'; + +import { AppComponent } from './app.component'; +import { AppRoutingModule } from './app-routing.module'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, AppRoutingModule], + providers: [provideIonicAngular(), { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +**Components** + +In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` array in the Angular component's NgModule for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array. + +```typescript title="home.module.ts" +import { NgModule } from '@angular/core'; +import { IonButton, IonContent } from '@ionic/angular/standalone'; +import { HomePage } from './home.page'; + +import { HomePageRoutingModule } from './home-routing.module'; + +@NgModule({ + imports: [IonButton, IonContent, HomePageRoutingModule], + declarations: [HomePage], +}) +export class HomePageModule {} +``` + +**Icons** + +The icon SVG data needs to be defined in the Angular component so it can be loaded correctly. Developers can use the `addIcons` function from `ionicons` to map the SVG data to a string name. Developers can then reference the icon by its string name using the `name` property on `IonIcon`. The `IonIcon` component should be added in `app.module.ts` just like the other Ionic components. + +We recommend calling `addIcons` in the Angular component `constructor` so the data is only added if the Angular component is being used. + +For developers using Ionicons 7.2 or newer, passing only the SVG data will cause the string name to be automatically generated. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], +}) +export class HomePage { + constructor() { + /** + * On Ionicons 7.2+ this icon + * gets mapped to a "logo-ionic" key. + * Alternatively, developers can do: + * addIcons({ 'logo-ionic': logoIonic }); + */ + addIcons({ logoIonic }); + } +} +``` + +Icons can also be registered in entry points such as `app.component.ts` to avoid the need to call `addIcons` multiple times. Developers should be aware that the initial application chunk may increase because the registered icons will need to be loaded at application start. However, if your application uses a small number of icons the impact of this may be minimal. + +```typescript title="app.component.ts" +import { Component } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], +}) +export class AppComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ logoIonic }); + } +} +``` + +Icons registered in an application entry point can then be referenced by name anywhere in the application. + +```html title="home.page.html" + + +``` + +**Routing** + +Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (``) elements should import `IonRouterLinkWithHref` instead. + +```typescript title="home.module.ts" +import { NgModule } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; +import { HomePage } from './home.page'; + +import { HomePageRoutingModule } from './home-routing.module'; + +@NgModule({ + imports: [ + IonButton, + RouterLink, // required to get base routerLink behavior for @angular/router + IonRouterLink, // use IonRouterLinkWithHref if you are using an element instead + HomePageRoutingModule, + ], + declarations: [HomePage], +}) +export class HomePageModule {} +``` + +```html title="home.page.html" +Go to Foo Page +``` + +**Testing** + +Ionic Angular's standalone components use ES Modules. As a result, developers using Jest should ensure that ES Modules are transpiled to a format that Jest can use. Developers using Jest should add the following to their Jest config: + + + + +```json + +"transformIgnorePatterns": ["/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"] +``` + + + + +```json + +"transformIgnorePatterns": ["/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"] +``` + + + + +## Modules + +### Overview + +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. + +**Benefits** + +1. Since components are lazily loaded as needed, developers do not need to spend time manually importing and registering each Ionic component. + +**Drawbacks** + +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 + +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. + +```typescript +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, IonicModule.forRoot()], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +## Migrating from Modules to Standalone + +:::tip +Try our automated utility for migrating to standalone! + +See https://github.com/ionic-team/ionic-angular-standalone-codemods for instructions on how to get started. All issues related to the migration utility should be filed on the linked repo. +::: + +The Standalone option is newer than the Modules option, so developers may wish to switch during the development of their application. This guide details the steps needed to migrate. + +Migrating to Ionic standalone components must be done all at the same time and cannot be done gradually. The Modules and Standalone approaches use two different build systems of Ionic that cannot be used at the same time. + +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 + +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. + +1. Run `npm install @ionic/angular@latest` to ensure you are running the latest version of Ionic. Ionic UI Standalone Components is supported in Ionic v7.5 or newer. + +2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components. + +3. Remove the `IonicModule` call in `main.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function. + +```diff title="main.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +- import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; ++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; + +bootstrapApplication(AppComponent, { + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + /** + * The custom config serves as an example + * of how to pass a config to provideIonicAngular. + * You do not need to set "mode: 'ios'" to + * use Ionic standalone components. + */ +- importProvidersFrom(IonicModule.forRoot({ mode: 'ios' })), ++ provideIonicAngular({ mode: 'ios' }), + provideRouter(routes), + ], +}); +``` + +4. Remove any references to `IonicModule` found elsewhere in your application. + +5. Update any existing imports from `@ionic/angular` to import from `@ionic/angular/standalone` instead. + +```diff +- import { Platform } from '@ionic/angular'; ++ import { Platform } from '@ionic/angular/standalone'; +``` + +6. Add imports for each Ionic component in the Angular component where they are used. Be sure to pass the imports to the `imports` array on your Angular component. + +```diff title="app.component.ts" +import { Component } from '@angular/core'; ++ import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], + standalone: true, ++ imports: [IonApp, IonRouterOutlet], +}) +export class AppComponent { + constructor() {} +} +``` + +7. If you are using Ionicons, define the icon SVG data used in each Angular component using `addIcons`. This allows you to continue referencing icons by string name in your component template. Note that you will need to do this for any additional icons added. + +```diff title="test.component.ts" +import { Component } from '@angular/core'; ++ import { IonIcon } from '@ionic/angular/standalone'; ++ import { addIcons } from 'ionicons'; ++ import { alarm, logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], + standalone: true, ++ imports: [IonIcon], +}) +export class TestComponent { + constructor() { ++ addIcons({ alarm, logoIonic }); + } +} +``` + +8. Remove the following code from your `angular.json` file if present. Note that it may appear multiple times. + +```diff title="angular.json" +- { +- "glob": "**/*.svg", +- "input": "node_modules/ionicons/dist/ionicons/svg", +- "output": "./svg" +- } +``` + +9. If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to import the `IonRouterLink` directive for Ionic components or `IonRouterLinkWithHref` directive for `` elements. + +```diff title="test.component.ts" +import { Component } from '@angular/core'; +- import { IonButton } from '@ionic/angular/standalone'; ++ import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], + standalone: true, + imports: [ + IonButton, ++ IonRouterLink + ], +}) +export class TestComponent {} +``` + +10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations. + +```json title=".vscode/settings.json" +{ + "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"] +} +``` + +### 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. + +1. Run `npm install @ionic/angular@latest` to ensure you are running the latest version of Ionic. Ionic UI Standalone Components is supported in Ionic v7.5 or newer. + +2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components. + +3. Remove the `IonicModule` call in `app.module.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function. + +```diff title="app.module.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +- import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; ++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; + +@NgModule({ + declarations: [AppComponent], +- imports: [BrowserModule, IonicModule.forRoot({ mode: 'ios' }), AppRoutingModule], ++ imports: [BrowserModule, AppRoutingModule], + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + /** + * The custom config serves as an example + * of how to pass a config to provideIonicAngular. + * You do not need to set "mode: 'ios'" to + * use Ionic standalone components. + */ ++ provideIonicAngular({ mode: 'ios' }), + ], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +4. Remove any references to `IonicModule` found elsewhere in your application. + +5. Update any existing imports from `@ionic/angular` to import from `@ionic/angular/standalone` instead. + +```diff +- import { Platform } from '@ionic/angular'; ++ import { Platform } from '@ionic/angular/standalone'; +``` + +6. Add imports for each Ionic component in the NgModule for the Angular component where they are used. Be sure to pass the components to the `imports` array on the module. + +```diff title="app.module.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +- import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; ++ import { provideIonicAngular, IonicRouteStrategy, IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; + +@NgModule({ + declarations: [AppComponent], +- imports: [BrowserModule, AppRoutingModule], ++ imports: [BrowserModule, AppRoutingModule, IonApp, IonRouterOutlet], + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + provideIonicAngular({ mode: 'ios' }) + ], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +For example, all modules that are using Ionic components need to have the Ionic components imported in their component module. + +```diff title="home.module.ts" +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { HomePage } from './home.page'; + +import { HomePageRoutingModule } from './home-routing.module'; + ++ import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + HomePageRoutingModule, ++ IonContent, ++ IonHeader, ++ IonTitle, ++ IonToolbar + ], + declarations: [HomePage] +}) +export class HomePageModule {} +``` + +7. If you are using Ionicons, define the icon SVG data used in each Angular component using `addIcons`. This allows you to continue referencing icons by string name in your component template. Note that you will need to do this for any additional icons added. The `IonIcon` component should still be provided in the NgModule. + +```diff title="test.component.ts" +import { Component } from '@angular/core'; ++ import { addIcons } from 'ionicons'; ++ import { alarm, logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], +}) +export class TestComponent { + constructor() { ++ addIcons({ alarm, logoIonic }); + } +} +``` + +```diff title="test.module.ts" +import { NgModule } from '@angular/core'; +import { TestComponent } from './test.component'; ++ import { IonIcon } from '@ionic/angular/standalone'; + +@NgModule({ + imports: [ ++ IonIcon, + ], + declarations: [TestComponent] +}) +export class TestComponentModule {} +``` + +8. Remove the following code from your `angular.json` file if present. Note that it may appear multiple times. + +```diff title="angular.json" +- { +- "glob": "**/*.svg", +- "input": "node_modules/ionicons/dist/ionicons/svg", +- "output": "./svg" +- } +``` + +9. If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to import the `IonRouterLink` directive for Ionic components or `IonRouterLinkWithHref` directive for `` elements. + +```diff title="test.module.ts" +import { NgModule } from '@angular/core'; +import { TestComponent } from './test.component'; +- import { IonButton } from '@ionic/angular/standalone'; ++ import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; + +@NgModule({ + imports: [ + IonButton, ++ IonRouterLink, + ], + declarations: [TestComponent] +}) +``` + +10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations. + +```json title=".vscode/settings.json" +{ + "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"] +} +``` diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/lifecycle.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/lifecycle.md new file mode 100644 index 00000000000..85a76955693 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/lifecycle.md @@ -0,0 +1,103 @@ +--- +title: Ionic PageのLife Cycle +sidebar_label: ライフサイクル +--- + + + AngularのページコンポーネントのLife Cycle - すべてのイベントのドキュメンテーション + + + +このガイドでは、Ionic と Angular を使用して構築されたアプリでの Page Life Cycle のしくみについて説明します。（追記：Life Cycle とは、表示をはじめてから破棄するまでを指します。この間の特定のタイミングに設定されているイベントを Life Cycle Events といいます） + +![Flowchart illustrating the Ionic page life cycle events and their sequence.](/img/guides/lifecycle/ioniclifecycle.png 'Ionic Lifecycle Diagram') + +## Angular の Life Cycle Events + +Ionic は Angular が提供する Life Cycle Events を取り入れています。最もよく使う 2 つの Angular イベントは次のとおりです。 + +| Event Name | Description | +| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ngOnInit` | コンポーネントの初期化中に発生します。このイベントを使用して、ローカルメンバーを初期化し、一度だけ実行する必要がある Service を呼び出すことができます。 | +| `ngOnDestroy` | Angular がビューを破棄する直前に発生します。 observables の unsubscribe などのクリーンアップに役立ちます。 | + +Angular の Component Life Cycle イベントの詳細については、それらの [component lifecycle docs](https://angular.jp/guide/lifecycle-hooks) をご覧ください。 + +:::note +`ion-nav` または `ion-router-outlet` を使用するコンポーネントは、 `OnPush` 変更検出方式を使用しないでください。そうすることで、 `ngOnInit` などのライフサイクル・フックが起動するのを防ぐことができます。また、非同期状態の変更は正しくレンダリングされない場合があります。 +::: + +## Ionic の Page Events + +Angular の Life Cycle Events に加えて、Ionic Angular には、使用可能ないくつかの追加イベントがあります: + +| Event Name | Description | +| ------------------ | ------------------------------------------------------------------------ | +| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 | +| `ionViewDidEnter` | コンポーネントが表示されるアニメーションが **終了した時に** 発火します。 | +| `ionViewWillLeave` | コンポーネントを離脱するアニメーションが **はじまる時に** 発火します。 | +| `ionViewDidLeave` | コンポーネントを離脱するアニメーションが **終了した時に** 発火します。 | + +これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionic ライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。 + +`ionViewWillEnter`と`ionViewDidEnter`の違いは、いつ発火するかです。前者は `ngOnInit` の直後でページ遷移が始まる前に、後者は遷移が終わった後に直接呼び出されます。 + +`ionViewWillLeave` と `ionViewDidLeave` についてですが、 `ionViewWillLeave` は現在のページから離脱する処理がはじまる前に呼び出されますが、 `ionViewDidLeave` は新しいページに遷移する処理が成功してから呼び出されます (新しいページの `ionViewDidEnter` が発火した後になります)。 + +![Animated GIF showing Ionic page life cycle events in a console log as a page transition occurs.](/img/guides/lifecycle/ioniclifecycle.gif 'Ionic Lifecycle Animation') + +## Ionic が Page の Life をどのように処理するか + +Ionic は `` という router outlet を持っています。この outlet が Angular の `` を継承し、さらに拡張して、モバイルデバイスのためのより良い体験を可能にしました。 + +`` にアプリがラップされることで、Ionic はナビゲーションの扱いを少し変更します。新しいページに遷移すると、Ionic は古いページを既存の DOM に残しますが、ビューから隠して新しいページに移行します。これを行う理由は 2 つあります: + +1. 古いページの状態を維持することができます（画面上のデータ、スクロール位置など）。 +2. ページがすでに存在しており作成し直す必要がないため、ページへの移行がスムーズになります。 + +たとえば、UI の "戻る" ボタンまたはブラウザの "戻る" ボタンを押すことによってページが「Pop」されると、ページは DOM から削除されるだけとなります。 + +この特別な処理のために、`ngOnInit` と `ngOnDestroy` のメソッドは通常そうあるべきだと思うときには発火しないかもしれません。 + +`ngOnInit` はページが新しく作成されるたびに発火するだけなので、ページに戻ったときには発火されません。たとえば、タブのインタフェースで各ページ間を移動しても、各ページの `ngOnInit` メソッドは最初の 1 回だけ呼び出され、その後の表示では呼び出されません。`ngOnDestroy` はページが 「Pop」したときにのみ発生します。 + +## ルートガード + +Ionic 3 では、いつページにアクセスすることができるか（ `ionViewCanEnter` ）と離脱できるか（`ionViewCanLeave`）を制御するのに役立つ、いくつかの追加のライフサイクルメソッドがありました。これらは、許可されていないユーザーからページを保護したり、ユーザーがページを離れたくないときにユーザーをページ上に保持したりするために使用できます（フォーム入力中など）。 + +これらの方法は、Angular のルートガードを使用するために Ionic 4 で削除されました。 + +ルートガードは、ルートに対して特定のアクションを実行できるかどうかを判断するのに役立ちます。それらは特定のインターフェースを実装するクラスです。`CanActive` と `CanDeactivate` のインターフェイスは、`ionViewCanEnter` と `ionViewCanLeave` と同様のロジックでイベントを削除することができます。 + +```tsx +@Injectable() +export class AuthGuard implements CanActivate { + constructor(private authService: AuthService) {} + + canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { + return this.authService.isAuthenticated(); + } +} +``` + +このガードを使用するには、それをルート定義の適切なパラメータに追加します: + +```tsx +{ path: 'settings', canActivate: [AuthGuard], loadChildren: '...', } +``` + +ルートガードの使い方の詳細については、Angular の [router documentation](https://angular.jp/guide/router) を参照してください。 + +## Life Cycle メソッドのガイダンス + +以下は、life cycle events ごとのユースケースに関するヒントです。 + +- `ngOnInit` - コンポーネントを初期化し、Service からアクセスごとに更新する必要がないデータをロードします。 +- `ionViewWillEnter` - `ionViewWillEnter` は View がナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Service からデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量の DOM 操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。 +- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Page がユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたはスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。 +- `ionViewWillLeave` - observables の unsubscribing のように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。 +- `ionViewDidLeave` - このイベントが発生すると、新しいページへと完全に遷移したことがわかります。そのため、ビューが表示されているときに通常は行わない可能性があるロジックはすべてここに移動できます。 +- `ngOnDestroy` - `ionViewWillLeave` でクリーンアップしたくないページのクリーンアップロジックはここにおいてください。 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/navigation.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/navigation.md new file mode 100644 index 00000000000..96576a1b061 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/navigation.md @@ -0,0 +1,475 @@ +--- +title: Angular ナビゲーション +sidebar_label: ナビゲーション/ルーティング +--- + +import useBaseUrl from '@docusaurus/useBaseUrl'; + + + Angular Navigation: How Routing & Redirects Work in Angular Apps + + + +このガイドでは、Ionic と Angular を使用して構築されたアプリでのルーティングのしくみについて説明します。 + +Angular Router は、Angular アプリケーションで最も重要なライブラリの 1 つです。これがなければ、アプリはシングルビュー/シングルコンテキストアプリになるか、ブラウザのリロード時にナビゲーションのステートを維持できなくなります。Angular Router を使用すると、リンク可能でリッチなアニメーションを持つリッチなアプリを作成できます（もちろん、Ionic と組み合わせると！）。Angular Router の基本と、それを Ionic アプリケーション用に設定する方法を見てみましょう。 + +## シンプルな Route + +ほとんどのアプリでは、some sort of route を持つことがしばしば必要になります。最も基本的な設定はこのようになります： + +```tsx + +import { RouterModule } from '@angular/router'; + +@NgModule({ + imports: [ + ... + RouterModule.forRoot([ + { path: '', component: LoginComponent }, + { path: 'detail', component: DetailComponent }, + ]) + ], +}) +``` + +URL path と Component の組み合わせを確認する最も簡単な方法は、ここをみるすることです。アプリがロードされると、ルーターはユーザーがロードしようとしている URL を読むことで動作を開始します。私たちのサンプルでは、Route は `''` を参照します。これは本質的に私たちのインデックスルートとなります。そうすると、一致するエントリを探し出して、 `LoginComponent` がロードされます。かなり簡単です。この処理は `path` が一致するまで、設定されているすべての Route のエントリを参照します。しかし、初期ロードと異なるパスをロードしたい場合はどうなりますか？ + +## リダイレクトの処理 + +そういう場合には、ルーターリダイレクトを使用できます。リダイレクトは通常のルートオブジェクトと同じように書くことができますが、いくつかの異なるキーが含まれます。 + +```tsx +[ + { path: '', redirectTo: 'login', pathMatch: 'full' }, + { path: 'login', component: LoginComponent }, + { path: 'detail', component: DetailComponent }, +]; +``` + +このリダイレクトでは、アプリのインデックス（`''`）を探しはじめると、`login` にリダイレクトします。最後の `pathMatch` キーは、ルータにパスの検索方法を指示するために必要です。 + +`full` を使用すると、たとえ最後まで `/route1/route2/route3` と一致する path がなかったとしても、フルパスを比較する必要があることをルータに伝えることができます。つまり、次のようになります。 + +```tsx +{ path: '/route1/route2/route3', redirectTo: 'login', pathMatch: 'full' }, +{ path: 'login', component: LoginComponent }, +``` + +このように書くと `/route1/route2/route3` をロードすると、リダイレクトを行います。けれど仮に `/route1/route2/route4` であれば、すべての path が一致しないのでリダイレクトを行いません。 + +あるいは、こういう書き方もできます: + +```tsx +{ path: '/route1/route2', redirectTo: 'login', pathMatch: 'prefix' }, +{ path: 'login', component: LoginComponent }, +``` + +`/route1/route2/route3` と `/route1/route2/route4` の両方を読み込んだとおき, どちらの場合もリダイレクトします。 `pathMatch: 'prefix'` によって、一部でも一致したら該当するからです。 + +## routes へのナビゲーション + +routes について説明してきましたが、それではどのようにしてそのルートにナビゲーションしたらいいのでしょうか。これには、 `routerLink` directive を利用します。先ほどの簡単な router 設定でこれを確認してみましょう: + +```ts +RouterModule.forRoot([ + { path: '', component: LoginComponent }, + { path: 'detail', component: DetailComponent }, +]); +``` + +わたしたちは、次の HTML を利用することで、`LoginComponent` から `detail` route に遷移することができます。 + +```html + + + Login + + + + + Go to detail + +``` + +ここで重要なのは`ion-button` と `routerLink` directive です。RouterLink は典型的な `href` と同様の考えで動作しますが、URL を文字列として構築する代わりに配列として構築することができ、それによってより複雑なパスを書くこともできます。 + +Router API を使用して、プログラムで遷移することもできます。 + +```tsx +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + ... +}) +export class LoginComponent { + + constructor(private router: Router){} + + navigate(){ + this.router.navigate(['/detail']) + } +} +``` + +どちらのオプションも同様のナビゲーションメカニズムを提供し、異なるユースケースで利用することができます。 + +### LocationStrategy.historyGo を使ったナビゲーション + +Angular Router には [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) メソッドがあり、アプリケーションの履歴を進んだり戻ったりすることができます。例を見てみましょう。 + +次のようなアプリケーションの履歴があるとします： + +`/ページA` --> `/ページB` --> `/ページC`。 + +もし `/pageC` で `LocationStrategy.historyGo(-2)` を呼び出すと、 `/pageA` に戻る。その後、 `LocationStrategy.historyGo(2)` を呼び出すと、 `/pageC` に戻る。 + +`LocationStrategy.historyGo()` の主な特徴は、アプリケーションの履歴が線形であることを想定していることです。つまり、`LocationStrategy.historyGo()` は非線形のルーティングを使用するアプリケーションでは使用すべきではありません。詳しくは [リニアルーティング対非リニアルーティング](#linear-routing-versus-non-linear-routing) を参照してください。 + +## Lazy loading routes + +現在のルート設定では、すべての Component が、ルートとなる `app.module` と同じ `chunk` に含まれているので理想的ではありません。代わりに、ルータにはコンポーネントを独自の `chunk` に分離できるように設定されています。 + +```tsx + +import { RouterModule } from '@angular/router'; + +@NgModule({ + imports: [ + ... + RouterModule.forRoot([ + { path: '', redirectTo: 'login', pathMatch: 'full' }, + { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) }, + { path: 'detail', loadChildren: () => import('./detail/detail.module').then(m => m.DetailModule) } + ]) + ], +}) +``` + +`loadChildren` プロパティはコンポーネントの代わりにネイティブインポートを直接仕様してモジュールを参照する方法です。ただしこれを行うには、コンポーネントごとにモジュールを作成する必要があります。 + +```tsx +... +import { RouterModule } from '@angular/router'; +import { LoginComponent } from './login.component'; + +@NgModule({ + imports: [ + ... + RouterModule.forChild([ + { path: '', component: LoginComponent }, + ]) + ], +}) +``` + +:::note +一部のコードを省略して紹介しています +::: + +ここでは、`RouterModule` のインポートとともに、典型的な `Angular Module` の設定がありますが、`RouterModule` では `forChild` によってコンポーネントを使用することを宣言しています。この設定では、ビルドを実行するときに、`App Component`（Root）、 `login Component` 、および `detail Component` において別々のチャンクを作成します。 + +## Standalone Components + +Standalone components allow developers to lazy load a component on a route without having to declare the component to an Angular module. + +Developers can use the existing syntax for standalone component routing from Angular: + +```ts +@NgModule({ + imports: [ + RouterModule.forRoot([ + { + path: 'standalone-route', + loadComponent: () => import('./path/to/my-component.component').then((c) => c.MyComponent), + }, + ]), + ], +}) +export class AppRoutingModule {} +``` + +:::tip +If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.md#migrating-from-modules-to-standalone). +::: + +To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components). + +## Live Example + +If you would prefer to get hands on with the concepts and code described above, please checkout our [live example](https://stackblitz.com/edit/ionic-angular-routing?file=src/app/app-routing.module.ts) of the topics above on StackBlitz. + +## Linear Routing versus Non-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. + +The following is an example of linear routing in a mobile app: + + + +The application history in this example has the following path: + +`Accessibility` --> `VoiceOver` --> `Speech` + +When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use router Angular Router APIs such as [LocationStrategy.historyGo()](#navigating-using-locationstrategy). + +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 is a concept that may be new to many web developers learning to build mobile apps with Ionic. + +Non-linear routing means that the view that the user should go back to is not necessarily the previous view that was displayed on the screen. + +The following is an example of non-linear routing: + + + +In the example above, we start on the `Originals` tab. Tapping a card brings us to the `Ted Lasso` view within the `Originals` tab. + +From here, we switch to the `Search` tab. Then, we tap the `Originals` tab again and are brought back to the `Ted Lasso` view. At this point, we have started using non-linear routing. + +Why is this non-linear routing? The previous view we were on was the `Search` view. However, pressing the back button on the `Ted Lasso` view should bring us back to the root `Originals` view. This happens because each tab in a mobile app is treated as its own stack. The [Working with Tabs](#working-with-tabs) sections goes over this in more detail. + +If tapping the back button simply called `LocationStrategy.historyGo(-1)` from the `Ted Lasso` view, we would be brought back to the `Search` view which is not correct. + +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? + +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. + +The two most common uses of non-linear routing is with tabs and nested `ion-router-outlet`s. We recommend only using non-linear routing if your application meets the tabs or nested router outlet use cases. + +For more on tabs, please see [Working with Tabs](#working-with-tabs). + +For more on nested router outlets, please see [Nested Routes](#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 is a route configuration where routes have pieces of the URL in common. The following is an example of a shared URL configuration: + +```tsx +const routes: Routes = [ + { + path: 'dashboard', + component: DashboardMainPage, + }, + { + path: 'dashboard/stats', + component: DashboardStatsPage, + }, +]; +``` + +The above routes are considered "shared" because they reuse the `dashboard` piece of the URL. + +### 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: + +```tsx +const routes: Routes = [ + { + path: 'dashboard', + component: DashboardRouterOutlet, + children: [ + { + path: '', + component: DashboardMainPage, + }, + { + path: 'stats', + component: DashboardStatsPage, + }, + ], + }, +]; +``` + +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? + +Shared URLs are great when you want to transition from page A to page B while preserving the relationship between the two pages in the URL. In our previous example, a button on the `/dashboard` page could transition to the `/dashboard/stats` page. The relationship between the two pages is preserved because of a) the page transition and b) the url. + +Nested routes should be used when you want to render content in outlet A while also rendering sub-content inside of a nested outlet B. The most common use case you will run into is tabs. When you load up a tabs Ionic starter application, you will see `ion-tab-bar` and `ion-tabs` components rendered in the first `ion-router-outlet`. The `ion-tabs` component renders another `ion-router-outlet` which is responsible for rendering the contents of each tab. + +There are very few use cases in which nested routes make sense in mobile applications. When in doubt, use the shared URL route configuration. We strongly caution against using nested routing in contexts other than tabs as it can quickly make navigating your app confusing. + +## Working with Tabs + +タブを使用すると、Angular Router にどのコンポーネントをロードする必要があるかを知るためのメカニズムを Ionic が提供しますが、タブコンポーネントでは複雑な作業が行われます。簡単な例を見てみましょう。 + +```ts +const routes: Routes = [ + { + path: 'tabs', + component: TabsPage, + children: [ + { + path: 'tab1', + children: [ + { + path: '', + loadChildren: () => import('../tab1/tab1.module').then((m) => m.Tab1PageModule), + }, + ], + }, + { + path: '', + redirectTo: '/tabs/tab1', + pathMatch: 'full', + }, + ], + }, + { + path: '', + redirectTo: '/tabs/tab1', + pathMatch: 'full', + }, +]; +``` + +ここでは、 `tabs` パスを読み込んでいます。この例では、path を `tabs` としていますが、これは変更可能です。あなたのアプリに合った名前にすることができます。このルートオブジェクトでは、子ルートも定義することができます。この例では、トップレベルの子ルート「tab1」が「outlet」として機能し、さらに子ルートをロードすることができます。この例では、1 つの子ルートがあり、新しいコンポーネントをロードするだけです。Tabs のマークアップは、次のとおりです: + +```html + + + + + Tab One + + + +``` + +Ionic を使ってアプリを作成したことがあれば、このマークアップはおなじみのはずです。`ion-tabs` コンポーネントを作成し、`ion-tab-bar` を提供します。`ion-tab-bar` は、 `tab`と一緒に`ion-tab-button`を提供します。最新の `@ionic/angular` はもはや `` を必要とせず、開発者がタブバーを完全にカスタマイズできるようになり、すべての設定は Router の設定によって行えるようになりました。 + +### 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). + +This behavior is important to note as it is different than most tab implementations that are found in other web based UI libraries. Other libraries typically manage tabs as one single history stack. + +Since Ionic is focused on helping developers build mobile apps, the tabs in Ionic are designed to match native mobile tabs as closely as possible. As a result, there may be certain behaviors in Ionic's tabs that differ from tabs implementations you have seen in other UI libraries. Read on to learn more about some of these differences. + +### 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`. + +```ts +const routes: Routes = [ + { + path: 'tabs', + component: TabsPage, + children: [ + { + path: 'tab1', + children: [ + { + path: '', + loadChildren: () => import('../tab1/tab1.module').then((m) => m.Tab1PageModule), + }, + ], + }, + { + path: 'tab1/view', + children: [ + { + path: '', + loadChildren: () => import('../tab1/tab1view.module').then((m) => m.Tab1ViewPageModule), + }, + ], + }, + { + path: 'tab2', + children: [ + { + path: '', + loadChildren: () => import('../tab2/tab2.module').then((m) => m.Tab2PageModule), + }, + ], + }, + { + path: 'tab3', + children: [ + { + path: '', + loadChildren: () => import('../tab3/tab3.module').then((m) => m.Tab3PageModule), + }, + ], + }, + ], + }, + { + path: '', + redirectTo: '/tabs/tab1', + pathMatch: 'full', + }, +]; +``` + +### 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. + +A good example of this in practice is the iOS App Store and Google Play Store mobile applications. These apps both provide tabbed interfaces, but neither one ever routes the user across tabs. For example, the "Games" tab in the iOS App Store app never directs users to the "Search" tab and vice versa. + +Let's take a look at a couple common mistakes that are made with tabs. + +**A Settings Tab That Multiple Tabs Reference** + +A common practice is to create a Settings view as its own tab. This is great if developers need to present several nested settings menus. However, other tabs should never try to route to the Settings tab. As we mentioned above, the only way that the Settings tab should be activated is by a user tapping the appropriate tab button. + +If you find that your tabs need to reference the Settings tab, we recommend making the Settings view a modal by using `ion-modal`. This is a practice found in the iOS App Store app. With this approach, any tab can present the modal without breaking the mobile tabs pattern of each tab being its own stack. + +The example below shows how the iOS App Store app handles presenting an "Account" view from multiple tabs. By presenting the "Account" view in a modal, the app can work within the mobile tabs best practices to show the same view across multiple tabs. + + + +**Reusing Views Across Tabs** + +Another common practice is to present the same view in multiple tabs. Developers often try to do this by having the view contained in a single tab, with other tabs routing to that tab. As we mentioned above, this breaks the mobile tabs pattern and should be avoided. + +Instead, we recommend having routes in each tab that reference the same component. This is a practice done in popular apps like Spotify. For example, you can access an album or podcast from the "Home", "Search", and "Your Library" tabs. When accessing the album or podcast, users stay within that tab. The app does this by creating routes per tab and sharing a common component in the codebase. + +The example below shows how the Spotify app reuses the same album component to show content in multiple tabs. Notice that each screenshot shows the same album but from a different tab. + +| Home Tab | Search Tab | +| :-------------------------------------------------: | :---------------------------------------------------: | +| | | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/overview.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/overview.md new file mode 100644 index 00000000000..5d29843b7e6 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/overview.md @@ -0,0 +1,46 @@ +--- +title: Ionic Angular の概要 +sidebar_label: 概要 +--- + + + Ionic Angular Overview | Angular Version Support and Tooling + + + +import DocsCard from '@components/global/DocsCard'; +import DocsCards from '@components/global/DocsCards'; + +`@ionic/angular` は core Ionic experience に、Angular 開発者向けにカスタマイズされたツールと API を組み合わせたものです。 + +## Angular バージョンサポート + +Ionic v7 は Angular v14+をサポートしています。アップグレード戦略の一環として、Angular にはアップグレードを自動化するためのツールが組み込まれており、API に変更があった際には開発者にフィードバックを提供します。これにより、アップデートの手間を減らし、エコシステムを最新の状態に保つことができます。 + +## Angular Tooling + +Ionic4 以降では、アプリケーション構築とルーティングのために公式の Angular スタックが使用されているため、あなたのアプリケーションは Angular エコシステムと同じように利用できます。更に独自の機能が必要な場合には、Ionic は`@ionic/angular-toolkit`を提供します。、これは [official Angular CLI](https://angular.jp/cli) を構築して統合し、`@ionic/angular` アプリ固有の機能を提供します。 + +## Resources + + + +

Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.

+ + + +

Learn the basics of navigation inside your app with Ionic and Angular Router

+ + + +

Learn about using Ionic lifecycle events in class components and with hooks

+ + + +

Learn about using Modules or Standalone Components in Ionic.

+ + + diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/performance.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/performance.md new file mode 100644 index 00000000000..d2c78341765 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/performance.md @@ -0,0 +1,73 @@ +--- +title: Angularのパフォーマンス +sidebar_label: パフォーマンス +--- + + + Angular Performance: Manage App Component Change with ngFor + + + +## \*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. + +By using `trackBy` you can provide a stable identity for each loop element so Angular can track insertions and deletions within the iterator. Below is an example of how to use `trackBy`: + +**home.page.html** + +```html + + {{ item.value }} + +``` + +**home.component.ts** + +```tsx + +items = [ + { id: 0, value: 'Item 0' }, + { id: 1, value: 'Item 1' }, + ... +] + +trackItems(index: number, itemObject: any) { + return itemObject.id; +} +``` + +In this example, we have an array of objects called `items`. Each object contains a `value` and an `id`. Using `trackBy`, we pass a `trackItems` function which returns the `id` of each object. This `id` is used to provide a stable identity for each loop element. + +For more information on how Angular manages change propagation with `ngFor` see https://angular.io/api/common/NgForOf#change-propagation. + +## 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 + +[Build performant and progressive Angular apps](https://web.dev/angular) - web.dev + +## From the Community + + + +[High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony + +[High Performance List Filtering in Ionic](https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/) - Josh Morony + +[Increasing Performance with Efficient DOM Writes in Ionic](https://www.joshmorony.com/increasing-performance-with-efficient-dom-writes-in-ionic-2/) - Josh Morony + +[Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony + + + +:::note +Do you have a guide you'd like to share? Click the _Edit this page_ button below. +::: diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/platform.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/platform.md new file mode 100644 index 00000000000..5cb3546fc72 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/platform.md @@ -0,0 +1,246 @@ +--- +title: Platform +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Platform | Ionic Platform to Customize Apps to Fit Any Device + + + +プラットフォームサービスは、現在のデバイスに関する情報を取得するために使用できます。`platforms` メソッドを利用することでデバイスに関連付けられているすべてのプラットフォームを取得できます。例えば、アプリがタブレットから表示されているかどうか（モバイルデバイスまたはブラウザ上にある場合）、および正確なプラットフォーム（iOS、Android など）などです。右から左への言語の向きなどを使用すれば、デバイスの向きもわかります。この情報を使用して、あらゆるデバイスに合わせてアプリを完全にカスタマイズできます。 + +## Usage + + + + +```tsx +import { Platform } from '@ionic/angular'; + +@Component({...}) +export class MyPage { + constructor(public platform: Platform) { + + } +} +``` + + + + +```tsx +import { Platform } from '@ionic/angular/standalone'; + +@Component({...}) +export class MyPage { + constructor(public platform: Platform) { + + } +} +``` + + + + +## Methods + +### `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 + +| 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 + +以下は、利用可能なすべての platform の値とそれに対応する説明をまとめた表です。 + +| Platform Name | Description | +| ------------- | ---------------------------------------- | +| android | a device running Android | +| capacitor | a device running Capacitor | +| cordova | a device running Cordova | +| desktop | a desktop device | +| electron | a desktop device running Electron | +| hybrid | a device running Capacitor or Cordova | +| ios | a device running iOS | +| ipad | an iPad device | +| iphone | an iPhone device | +| mobile | a mobile device | +| mobileweb | a web browser running in a mobile device | +| phablet | a phablet device | +| pwa | a PWA app | +| tablet | a tablet device | + +#### 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. + +```tsx +import { IonicModule } from '@ionic/angular'; + +@NgModule({ + ... + imports: [ + BrowserModule, + IonicModule.forRoot({ + platform: { + /** The default `desktop` function returns false for devices with a touchscreen. + * This is not always wanted, so this function tests the User Agent instead. + **/ + 'desktop': (win) => { + const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(win.navigator.userAgent); + return !isMobile; + } + }, + }), + AppRoutingModule + ], + ... +}) +``` + +```ts +type PlatformConfig = { + android?: ((win: Window) => boolean) | undefined; + capacitor?: ((win: Window) => boolean) | undefined; + cordova?: ((win: Window) => boolean) | undefined; + desktop?: ((win: Window) => boolean) | undefined; + electron?: ((win: Window) => boolean) | undefined; + hybrid?: ((win: Window) => boolean) | undefined; + ios?: ((win: Window) => boolean) | undefined; + ipad?: ((win: Window) => boolean) | undefined; + iphone?: ((win: Window) => boolean) | undefined; + mobile?: ((win: Window) => boolean) | undefined; + mobileweb?: ((win: Window) => boolean) | undefined; + phablet?: ((win: Window) => boolean) | undefined; + pwa?: ((win: Window) => boolean) | undefined; + tablet?: ((win: Window) => boolean) | undefined; +}; +``` + +### `platforms` + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **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` + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **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` + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **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` + +| | | +| --------------- | ----------------------------------------------- | +| **Description** | Returns `true` if the app is in landscape mode. | +| **Signature** | `isLandscape() => boolean` | + +### `isPortrait` + +| | | +| --------------- | ---------------------------------------------- | +| **Description** | Returns `true` if the app is in portrait mode. | +| **Signature** | `isPortrait() => boolean` | + +### `width` + +| | | +| --------------- | -------------------------------------------------------------------- | +| **Description** | Gets the width of the platform's viewport using `window.innerWidth`. | +| **Signature** | `width() => number` | + +### `height` + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | Gets the height of the platform's viewport using `window.innerHeight`. | +| **Signature** | `height() => number` | + +### `url` + +| | | +| --------------- | -------------------- | +| **Description** | Get the current url. | +| **Signature** | `url() => string` | + +### `testUserAgent` + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | Returns `true` if the expression is included in the user agent string. | +| **Signature** | `testUserAgent(expression: string) => boolean` | + +#### Parameters + +| Name | Type | Description | +| ---------- | ------ | ------------------------------------- | +| expression | string | The string to check in the user agent | + +## Events + +### `pause` + +`pause` イベントは、ネイティブ・プラットフォームがアプリケーションをバックグラウンドに置いたとき、通常はユーザーが別のアプリケーションに切り替えたときに発生します。このイベントは、Cordova/Capacitor アプリケーションがバックグラウンドに置かれたときに発生しますが、標準的な Web ブラウザでは発生しません。 + +#### Examples + +```tsx +this.platform.pause.subscribe(async () => { + alert('Pause event detected'); +}); +``` + +### `resize` + +`resize` イベントは、ブラウザウィンドウの寸法が変更されたときに発生します。これは、ブラウザーウィンドウが物理的にサイズ変更されている場合や、デバイスの向きが変わっている場合に発生します。 + +#### Examples + +```tsx +this.platform.resize.subscribe(async () => { + alert('Resize event detected'); +}); +``` + +### `resume` + +`resume` イベントは、ネイティブプラットフォームがバックグラウンドからアプリケーションを引き出したときに発生します。このイベントは、Cordova/Capacitor アプリがバックグラウンドから出てきても、標準的な Web ブラウザで起動しない場合に発生します。 + +#### Examples + +```tsx +this.platform.resume.subscribe(async () => { + alert('Resume event detected'); +}); +``` diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/pwa.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/pwa.md new file mode 100644 index 00000000000..684c150c457 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/pwa.md @@ -0,0 +1,166 @@ +--- +title: AngularでのPWA +sidebar_label: Progressive Web Apps +--- + + + Make Progressive Web Apps (PWA) in Angular - Ionic Tutorial + + + +## Making your Angular app a PWA + +The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this. + +The `@angular/pwa` package will automatically add a service worker and an app manifest to the app. +To add this package to the app, run: + +```shell +ng add @angular/pwa +``` + +Once this package has been added run `ionic build --prod` and the `www` directory will be ready to deploy as a PWA. + +:::note +By default, the `@angular/pwa` package comes with the Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons. +::: + +:::note +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 + +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: + +```json +{ + "$schema": "./node_modules/@angular/service-worker/config/schema.json", + "index": "/index.html", + "assetGroups": [ + { + "name": "app", + "installMode": "prefetch", + "resources": { + "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"] + } + }, + { + "name": "assets", + "installMode": "lazy", + "updateMode": "prefetch", + "resources": { + "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"] + } + } + ] +} +``` + +There are two sections in here, one for app specific resources (JS, CSS, HTML) and assets the app will load on demand. Depending on your app, these options can be customized. For a more detailed guide, read [the official guide from the Angular Team.](https://angular.io/guide/service-worker-config) + +## Deploying + +### 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). + +First, if not already available, [create the project](https://console.firebase.google.com) in Firebase. + +Next, in a Terminal, install the Firebase CLI: + +```shell +npm install -g firebase-tools +``` + +:::note +If it's the first time you use firebase-tools, login to your Google account with `firebase login` command. +::: + +With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts: + +**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys". + +Create a new Firebase project or select an existing one. + +**"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website. + +**"What do you want to use as your public directory?"** Enter "www". + +:::note +Answering this next question will ensure that routing, hard reload, and deep linking work in the app: +::: + +**Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes". + +**"File build/index.html already exists. Overwrite?"** Enter "No". + +**Set up automatic builds and deploys with Github?** Enter "Yes". + +**For which GitHub repository would you like to set up a Github Workflow?** Enter your project name. + +**Set up the workflow to run a build script before every deploy?** Enter "Yes". + +**What script should be run before every deploy?** Enter `npm ci && npm run build`. + +**Set up automatic deployment to your sites live channel when a PR is merged?** Enter "Yes". + +**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main branch name. + +A `firebase.json` config file is generated, configuring the app for deployment. + +The last thing needed is to make sure caching headers are being set correctly. To do this, add a `headers` snippet to the `firebase.json` file. The complete `firebase.json` looks like: + +```json +{ + "hosting": { + "public": "www", + "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ], + "headers": [ + { + "source": "/build/app/**", + "headers": [ + { + "key": "Cache-Control", + "value": "public, max-age=31536000" + } + ] + }, + { + "source": "ngsw-worker.js", + "headers": [ + { + "key": "Cache-Control", + "value": "no-cache" + } + ] + } + ] + } +} +``` + +For more information about the `firebase.json` properties, see the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json). + +Next, build an optimized version of the app by running: + +```shell +ionic build --prod +``` + +Last, deploy the app by running: + +```shell +firebase deploy +``` + +After this completes, the app will be live. diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/slides.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/slides.md new file mode 100644 index 00000000000..836b717114a --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/slides.md @@ -0,0 +1,366 @@ +--- +title: Migrating from ion-slides to Swiper.js +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Set Up Swiper.js for Angular Slides [Example] | Ionic + + + +:::warning Looking for `ion-slides`? +`ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below. +::: + +We recommend Swiper.js if you need a modern touch slider component. Swiper 9 introduced Swiper Element as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element. + +## Getting Started + +First, update to the latest version of Ionic: + +```shell +npm install @ionic/angular@latest +``` + +Once that is done, install the Swiper dependency in your project: + +```shell +npm install swiper@latest +``` + +Next, we need to add the `CUSTOM_ELEMENTS_SCHEMA`, which tells Angular that we will be using custom elements. This can be done in either `app.module.ts`, or the module file for the component where you will be using Swiper. + +```typescript +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +@NgModule({ + schemas: [..., CUSTOM_ELEMENTS_SCHEMA] +}); +... +``` + +Finally, we need to call Swiper's `register` function to globally register Swiper's custom elements. This should only be done once, so place it in `app.component.ts`. + +```typescript +import { register } from 'swiper/element/bundle'; + +register(); + +@Component({ + ... +}) +... +``` + +From there, we just have to replace `ion-slides` elements with `swiper-container` and `ion-slide` elements with `swiper-slide`. Note that these custom elements do not need to be imported, as calling `register` tells Angular about them on its own. + +```html + + Slide 1 + Slide 2 + Slide 3 + +``` + +## 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. + +If you would like to use the Core version instead, which does not include additional modules automatically, see https://swiperjs.com/element#core-version-and-modules. The rest of this migration guide will assume you are using the bundled version. + +## Swiping with Style + +To migrate over your CSS, first update your selectors to target the new custom elements instead: + +| ion-slides Selector | Swiper Selector | +| ------------------- | ------------------ | +| `ion-slides` | `swiper-container` | +| `ion-slide` | `swiper-slide` | + +If you were using the CSS custom properties found on `ion-slides`, below is a list of corresponding properties used in Swiper. + +| `ion-slides` CSS property | `swiper-container` CSS property | +| ---------------------------------- | ------------------------------------------- | +| `--bullet-background` | `--swiper-pagination-bullet-inactive-color` | +| `--bullet-background-active` | `--swiper-pagination-color` | +| `--progress-bar-background` | `--swiper-pagination-progressbar-bg-color` | +| `--progress-bar-background-active` | `--swiper-pagination-color` | +| `--scroll-bar-background` | `--swiper-scrollbar-bg-color` | +| `--scroll-bar-background-active` | `--swiper-scrollbar-drag-bg-color` | + +For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See https://swiperjs.com/element#injecting-styles for instructions. + +### 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`: + +```css +swiper-container { + --swiper-pagination-bullet-inactive-color: var(--ion-text-color-step-800, #cccccc); + --swiper-pagination-color: var(--ion-color-primary, #0054e9); + --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25); + --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1); + --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5); +} + +swiper-slide { + display: flex; + position: relative; + + flex-direction: column; + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; + + font-size: 18px; + + text-align: center; + box-sizing: border-box; +} + +swiper-slide img { + width: auto; + max-width: 100%; + height: auto; + max-height: 100%; +} +``` + +## 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. + +It is recommended to review the [properties](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/slides/IonicSlides.ts) set by `IonicSlides` and determine which ones you would like to customize. + +We can install the `IonicSlides` module by importing and passing it to the `modules` property of `swiper-container` as an array: + + + + +```typescript +// home.page.ts + +import { IonicSlides } from '@ionic/angular'; + +@Component({ + ... +}) +export class HomePage { + swiperModules = [IonicSlides]; +} +``` + + + + +```typescript +// home.page.ts + +import { IonicSlides } from '@ionic/angular/standalone'; + +@Component({ + ... +}) +export class HomePage { + swiperModules = [IonicSlides]; +} +``` + + + + +```html + + + ... +``` + +:::note +If you are using the Core version of Swiper and have installed additional modules, ensure that `IonicSlides` is the last module in the array. This will let it automatically customize the settings of modules such as Pagination, Scrollbar, Zoom, and more. +::: + +## Properties + +Swiper options should be provided as individual properties directly on the `` component. + +Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` options set: + +```html + + Slide 1 + Slide 3 + Slide 3 + +``` + +To set these options as properties directly on `` we would do the following: + +```html + + Slide 1 + Slide 2 + Slide 3 + +``` + +Below is a full list of property changes when going from `ion-slides` to Swiper Element: + +| Name | Notes | +| ------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| options | Set each option as a property directly on the `` component. | +| mode | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. | +| pager | Use the `pagination` property instead. | + +:::note +All properties available in Swiper Element can be found at https://swiperjs.com/swiper-api#parameters. +::: + +## 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. + +Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event: + +```html + + Slide 1 + Slide 3 + Slide 3 + +``` + +To migrate, we would change the name of the event to `swiperslidechange`: + +```html + + Slide 1 + Slide 2 + Slide 3 + +``` + +Below is a full list of event name changes when going from `ion-slides` to Swiper Angular: + +| ion-slides Event | Swiper Event | +| ------------------------- | ---------------------------------- | +| `ionSlideWillChange` | `swiperslidechangetransitionstart` | +| `ionSlideDidChange` | `swiperslidechange` | +| `ionSlideDoubleTap` | `swiperdoubletap` | +| `ionSlideDrag` | `swiperslidermove` | +| `ionSlideNextStart` | `swiperslidenexttransitionstart` | +| `ionSlideNextEnd` | `swiperslidenexttransitionend` | +| `ionSlidePrevStart` | `swiperslideprevtransitionstart` | +| `ionSlidePrevEnd` | `swiperslideprevtransitionend` | +| `ionSlideReachStart` | `swiperreachbeginning` | +| `ionSlideReachEnd` | `swiperreachend` | +| `ionSlideTap` | `swipertap` | +| `ionSlideTouchStart` | `swipertouchstart` | +| `ionSlideTouchEnd` | `swipertouchend` | +| `ionSlideTransitionStart` | `swipertransitionstart` | +| `ionSlideTransitionEnd` | `swipertransitionend` | +| `ionSlidesDidLoad` | `swiperinit` | + +:::note +All events available in Swiper Element can be found at https://swiperjs.com/swiper-api#events and should be lowercased and prefixed with the word `swiper`. +::: + +## Methods + +Most methods have been removed in favor of directly accessing the properties of the Swiper instance. To access the Swiper instance, first get a reference to the `` element (such as through `ViewChild`), then access its `swiper` prop: + +```html + + + + Slide 1 + Slide 2 + Slide 3 + +``` + +```typescript +// slides.component.ts + +import { ..., ElementRef, ViewChild } from '@angular/core'; + +@Component({ + ... +}) +export class SlidesExample { + @ViewChild('swiper') + swiperRef: ElementRef | undefined; + + logActiveIndex() { + console.log(this.swiperRef?.nativeElement.swiper.activeIndex); + } +} +``` + +Below is a full list of method changes when going from `ion-slides` to Swiper Element: + +| ion-slides Method | Notes | +| -------------------- | ------------------------------------------------------------------------------------ | +| `getActiveIndex()` | Use the `activeIndex` property instead. | +| `getPreviousIndex()` | Use the `previousIndex` property instead. | +| `getSwiper()` | Get a reference to the Swiper instance using the `swiper` prop. See example above. | +| `isBeginning()` | Use the `isBeginning` property instead. | +| `isEnd()` | Use the `isEnd` property instead. | +| `length()` | Use the `slides` property instead. (i.e swiper.slides.length) | +| `lockSwipeToNext()` | Use the `allowSlidesNext` property instead. | +| `lockSwipeToPrev()` | Use the `allowSlidePrev` property instead. | +| `lockSwipes()` | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. | +| `startAutoplay()` | Use the `autoplay` property instead. | +| `stopAutoplay()` | Use the `autoplay` property instead. | + +:::note +All methods and properties available on the Swiper instance can be found at https://swiperjs.com/swiper-api#methods-and-properties. +::: + +## 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: + +```html + ... +``` + +:::note +For more information on effects in Swiper, please see https://swiperjs.com/swiper-api#fade-effect. +::: + +## Wrap Up + +Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper Element documentation and then referencing the Swiper API docs. + +## FAQ + +### 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? + +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? + +Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to see if your issue can be resolved by the community. + +If you are running into problems with the Swiper library, new bugs should be filed on the Swiper repo: https://github.com/nolimits4web/swiper/issues + +If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework repo: https://github.com/ionic-team/ionic-framework/issues diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/storage.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/storage.md new file mode 100644 index 00000000000..23c365eb7d4 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/storage.md @@ -0,0 +1,32 @@ +--- +title: データストレージ +sidebar_label: ストレージ +--- + + + Angular App Data Storage Options - Ionic Documentation + + + +Ionic アプリ内にデータを保存するためのさまざまなオプションを用意しています。 + +Here are two official Ionic options: + +## Ionic Secure Storage + +For teams building mission-critical apps or requiring encryption support, [Ionic Secure Storage](https://ionic.io/docs/secure-storage) is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android. + +It makes it easy to build high performance, offline-ready Ionic apps across iOS, Android, and the web. + +[Learn more](https://ionic.io/products/secure-storage) + +## @ionic/storage + +For developers not requiring encryption nor relational data support, [@ionic/storage](https://github.com/ionic-team/ionic-storage) is an open source key/value API for building apps that work across storage engines on multiple platforms. + +Additionally, Ionic Secure Storage has a driver that works with the key/value API in `@ionic/storage` while providing encryption and SQLite support. + +Learn more about [@ionic/storage](https://github.com/ionic-team/ionic-storage) diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/testing.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/testing.md new file mode 100644 index 00000000000..095c38c8061 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/testing.md @@ -0,0 +1,593 @@ +--- +title: テスト +--- + + + Angular Unit and End-to-End Testing for Ionic App Components + + + +Ionic CLI を使用して `@ionic/angular` アプリケーションを生成すると、アプリケーションのユニットテストとエンドツーエンドのテスト用に自動的に準備されます。これは Angular CLI で使われる設定と同じものです。Angular で作られたアプリケーションのテストについての詳細は Angular Testing Guide をご参照ください。 + +## テストの原則 + +アプリケーションをテストするときは、テストによってシステムに欠陥があるかどうかを確認できる、ということを覚えておくことが一番です。しかし、どんなささいなシステムも完全に欠陥のないことを証明することは不可能です。このため、テストの目的はコードが正しいことを確認することではなく、コードの中の問題を見つけることです。これは微妙ですが、重要な違いです。 + +もし私たちがコードが正しいことを証明しようとするのであれば、私たちはコードを通じて幸せな道を歩み続けようとするでしょう。もし私が問題の発見しようとするのであれば、コードをより完全に実行し、そこに潜むバグを発見する可能性が高くなります。 + +最初からアプリケーションのテストを開始することも最良です。これにより、修正が容易な段階で早期に欠陥を発見できます。またこれにより、システムに新しい機能が追加されたときに、コードを確実にリファクタリングすることもできます。 + +## ユニットテスト + +ユニットテストでは、システムの他の部分から分離して、単一のコードユニット（Component、Page、Service、Pipe など）を実行します。分離は、コードの依存関係の代わりにモックオブジェクトを注入することによって実現されます。モックオブジェクトによって、テストは依存関係の切り出しをきめ細かく制御することができます。モックによって、どの依存関係が呼び出され、何が渡されたかをテストで判断することもできます。 + +適切に記述されたユニットテストは、コードの単位とそれに含まれる機能が `describe()` コールバックによって記述されるように構成されています。コード単位とその機能の要件は、`it()` コールバックによってテストされます。`describe()` コールバックと `it()` コールバックの説明を読むと、フレーズとして意味がわかります。ネストされた `describe()` と最後の `it()` の記述をつなげると、テストケースを完全に記述する文が形成されます。 + +ユニットテストはコードを分離して実行するため、高速で堅牢であり、高度なコードカバレッジが可能です。 + +### モックの利用 + +ユニットテストでは、コードをコードをモジュールで分離して実行します。これを簡単にするには、Jasmine(https://jasmine.github.io/) を使用することをお勧めします。Jasmine は、テスト実行中に依存関係の代わりにモックオブジェクト(Jasmine は 「スパイ」 と呼んでいます)を作成します。モックオブジェクトを使用すると、テストはその依存関係への呼び出しによって返される値を制御できるため、依存関係に加えられた変更から現在のテストを独立させることができます。これにより、テストのセットアップも簡単になり、テスト対象のモジュール内のコードだけをテストすることができます。 + +モックを使用すると、モックが呼び出されたかどうか、および `toHaveBeenCalled*` セットの関数を介してどのように呼び出されたかを判断するために、テストでモックを確認することもできます。これらの関数では、メソッドが呼び出されたことをテストするときに、`toHaveBeenCalled` メソッドの呼び出しよりも `toHaveBeenCalledTimes` の呼び出しを優先して、テストをできるだけ具体的に行う必要があります。つまり、`expect(mock.foo).toHaveBeenCalledTimes(1)` は `expect(mock.foo).toHaveBeenCalled()` よりも優れています。何かが呼ばれていないこと（`expect(mock.foo).not.toHaveBeenCalled()`）をテストする際は、逆のアドバイスに従うべきです。 + +Jasmine でモックオブジェクトを作成する一般的な方法は 2 つあります。モックオブジェクトは、`jasmine.createSpy` と`jasmine.createSpyObj` を使ってスクラッチで作成することも、`spyOn()` と `spyOnProperty()` を使って既存のオブジェクトにスパイをインストールすることもできます。 + +### `jasmine.createSpy` と `jasmine.createSpyObj` の利用 + +`jasmine.createSpyObj` は、作成時に定義された一連のモックメソッドを使用して、完全なモックオブジェクトをスクラッチで作成します。これはとてもシンプルで便利です。テストのために何かを組み立てたり注入したりする必要はありません。この関数の使用する欠点は、実際のオブジェクトと一致しないオブジェクトを生成できることです。 + +`jasmine.createSpy` も似ていますが、スタンドアロンのモック関数を作成します。 + +#### `spyOn()` と `spyOnProperty()` の利用 + +`spyOn()` は、既存のオブジェクトにスパイをインストールします。この手法を使用する利点は、オブジェクト上に存在しないメソッドをスパイしようとすると、例外が発生することです。これにより、テストが存在しないメソッドをモックすることを防ぎます。欠点は、テストが最初から完全に整形されたオブジェクトを必要とすることであり、これはテストに必要なセットアップの量を増加させるかと思います。 + +`spyOnProperty()` は似ていますが、メソッドではなくプロパティに対してスパイするという点で異なります。 + +### 一般的なテストの構成 + +ユニットテストは、エンティティ（Component、Page、Service、Pipe など）ごとに 1 つの `spec` ファイルを持つ `spec` ファイルに含まれています。`spec` ファイルは、テスト中のソースと一緒に存在し、かつその名前が付けられます。たとえば、プロジェクトに WeatherService という Service がある場合、そのコードは`weather.service.ts` という名前のファイルにあり、テストは `weather.service.spec.ts` という名前のファイルにあります。これらのファイルは両方とも同じフォルダにあります。 + +`spec` ファイル自体には、そのテスト全体を定義するただ一つの `describe` コールが含まれています。その中には、主要な機能領域を定義する他の `describe` コールがネストされています。各 `describe` コールには、setup コードと teardown コード（一般的に `beforeEach` と `afterEach` コールによって処理される）、機能を階層的に分解した `describe` コール、また個々のテストケースを定義する `it` コールが含まれます。 + +`describe` と `it` コールには、説明のテキストラベルも含まれます。適切な形式のテストでは、`describe` と `it` をコールすると、ラベルと組み合わせた適切なフレーズが実行され、各テストケースのすべてのラベルが `describe` と `it` ラベルを組み合わせて構成され、完全な文が作成されます。 + +例: + +```tsx +describe('Calculation', () => { + describe('divide', () => { + it('calculates 4 / 2 properly' () => {}); + it('cowardly refuses to divide by zero' () => {}); + ... + }); + + describe('multiply', () => { + ... + }); +}); +``` + +外側の `describe` コールは `Calculation` Service がテストされていることを示し、内側の `describe` コールはテストされている機能を正確に示し、そして `it` コールはテストケースが何であるかを示しています。各テストケースの完全なラベルを実行すると、意味のある文になります(卑劣な 0 での除算という計算を拒否しました)。 + +### ページとコンポーネント + +Pages は単なる Angular コンポーネントです。そのため、ページとコンポーネントは両方とも Angular のコンポーネントテストガイドライン を使ってテストされます。 + +ページとコンポーネントには TypeScript コードと HTML テンプレートマークアップの両方が含まれているため、コンポーネントクラスのテストとコンポーネント DOM のテストの両方を実行できます。ページが作成されると、生成されるテンプレートテストは次のようになります: + +```tsx +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TabsPage } from './tabs.page'; + +describe('TabsPage', () => { + let component: TabsPage; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [TabsPage], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }).compileComponents(); + + fixture = TestBed.createComponent(TabsPage); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); +``` + +コンポーネントクラスのテストを行う場合、コンポーネントオブジェクトは `component=fixture.componentInstance;` によって定義されたコンポーネントオブジェクトを使用してアクセスされます。これはコンポーネントクラスのインスタンスです。DOM テストを行う際には、`fixture.nativeElement` プロパティが使用されます。これはコンポーネントの実際の `HTMLElement`であり、テストで DOM を調べるために `HTMLElement.querySelector` などの標準の HTML API メソッドを使うことを可能にします。 + +## Service + +Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主に HTTP 操作やデータ操作を実行するデータの service の 2 つの大まかなカテゴリーのいずれかに分類されます。 + +### 基本的な Service のテスト + +ほとんどの service をテストするために推奨する方法は、service をインスタンス化し、service が持つ依存関係のモックを手動で注入することです。こうすることで、コードを分離してテストすることができます。 + +たとえば、タイムカードの配列を取得して差引支給額を計算するメソッドを持つ service があるとします。また税金計算は、現在の service が依存しているもう一つの service を介して処理されるとします。この給与計算の service は、このようにテストすることができます: + +```tsx +import { PayrollService } from './payroll.service'; + +describe('PayrollService', () => { + let service: PayrollService; + let taxServiceSpy; + + beforeEach(() => { + taxServiceSpy = jasmine.createSpyObj('TaxService', { + federalIncomeTax: 0, + stateIncomeTax: 0, + socialSecurity: 0, + medicare: 0 + }); + service = new PayrollService(taxServiceSpy); + }); + + describe('net pay calculations', () => { + ... + }); +}); +``` + +これにより、テストでは `taxServiceSpy.federalIncomeTax.and.returnValue(73.24)` などのモックの設定を介して様々な税金計算から戻される値を制御できます。これにより、「差引支給額」のテストを税金計算ロジックから独立させることができます。税金のコードが変更された場合、修正する必要があるのは税金 service 関連のコードとテストのみです。差引支給額のテストは、税金がどのように計算されるかを考慮せず、値が適切に適用されるのみであるため、そのまま機能し続けることができます。 + +`ionic g service name` で service を生成するときに使われる scaffold は Angular のテストユーティリティを使ってテストモジュールをセットアップします。必ずしもそうする必要はありません。ただし、このコードを残しておくことで、手動でサービスを構築したり、次のように注入したりすることができます: + +```tsx +import { TestBed, inject } from '@angular/core/testing'; + +import { PayrollService } from './payroll.service'; +import { TaxService } from './tax.service'; + +describe('PayrolService', () => { + let taxServiceSpy; + + beforeEach(() => { + taxServiceSpy = jasmine.createSpyObj('TaxService', { + federalIncomeTax: 0, + stateIncomeTax: 0, + socialSecurity: 0, + medicare: 0, + }); + TestBed.configureTestingModule({ + providers: [PayrollService, { provide: TaxService, useValue: taxServiceSpy }], + }); + }); + + it('does some test where it is injected', inject([PayrollService], (service: PayrollService) => { + expect(service).toBeTruthy(); + })); + + it('does some test where it is manually built', () => { + const service = new PayrollService(taxServiceSpy); + expect(service).toBeTruthy(); + }); +}); +``` + +#### HTTP データ Service のテスト + +HTTP 操作を実行するほとんどの service は、それらの操作を実行するために Angular の HttpClient service を使用します。そのようなテストには、Angular の `HttpClientTestingModule` を使うことが推奨されています。このモジュールの詳細なドキュメントは Angular の HTTP リクエストをテストする のガイドを参照してください。 + +このようなテストの基本的な設定は次のようになります: + +```tsx +import { HttpBackend, HttpClient } from '@angular/common/http'; +import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing'; +import { TestBed, inject } from '@angular/core/testing'; + +import { IssTrackingDataService } from './iss-tracking-data.service'; + +describe('IssTrackingDataService', () => { + let httpClient: HttpClient; + let httpTestingController: HttpTestingController; + let issTrackingDataService: IssTrackingDataService; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [IssTrackingDataService], + }); + + httpClient = TestBed.get(HttpClient); + httpTestingController = TestBed.get(HttpTestingController); + issTrackingDataService = new IssTrackingDataService(httpClient); + }); + + it('exists', inject([IssTrackingDataService], (service: IssTrackingDataService) => { + expect(service).toBeTruthy(); + })); + + describe('location', () => { + it('gets the location of the ISS now', () => { + issTrackingDataService.location().subscribe((x) => { + expect(x).toEqual({ longitude: -138.1719, latitude: 44.4423 }); + }); + const req = httpTestingController.expectOne('http://api.open-notify.org/iss-now.json'); + expect(req.request.method).toEqual('GET'); + req.flush({ + iss_position: { longitude: '-138.1719', latitude: '44.4423' }, + timestamp: 1525950644, + message: 'success', + }); + httpTestingController.verify(); + }); + }); +}); +``` + +### Pipe + +pipe は、特別に定義されたインタフェースを持つ service のようなものです。このクラスには、入力値(およびその他のオプションの引数)を操作してページにレンダリングされる出力を作成するための public メソッド `transform` が含まれています。パイプをテストするには、パイプをインスタンス化し、transform メソッドを呼び出して結果を検証します。 + +簡単な例として、`Person` オブジェクトを受け取り、名前をフォーマットする pipe を見てみましょう。簡単にするために、`Person` は `id`、`firstName`、`lastName`、`middleInitial` で構成されるとします。パイプの要件は、名・姓・ミドルネームのいずれかが存在しない場合に、名前を「性、名 M(ミドルネーム)。」として出力することです。このようなテストは次のようになります: + +```tsx +import { NamePipe } from './name.pipe'; + +import { Person } from '../../models/person'; + +describe('NamePipe', () => { + let pipe: NamePipe; + let testPerson: Person; + + beforeEach(() => { + pipe = new NamePipe(); + testPerson = { + id: 42, + firstName: 'Douglas', + lastName: 'Adams', + middleInitial: 'N', + }; + }); + + it('exists', () => { + expect(pipe).toBeTruthy(); + }); + + it('formats a full name properly', () => { + expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas N.'); + }); + + it('handles having no middle initial', () => { + delete testPerson.middleInitial; + expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas'); + }); + + it('handles having no first name', () => { + delete testPerson.firstName; + expect(pipe.transform(testPerson)).toBeEqual('Adams N.'); + }); + + it('handles having no last name', () => { + delete testPerson.lastName; + expect(pipe.transform(testPerson)).toBeEqual('Douglas N.'); + }); +}); +``` + +また、pipe を利用するコンポーネントおよびページでの DOM テストを介して pipe を実行することも有益です。 + +## エンドツーエンドテスト + +エンドツーエンドのテストは、アプリケーションが全体として機能し、多くの場合、ライブデータへの接続を含むことを検証するために使用されます。一方で、ユニットテストは分離されたコードユニットに重点を置いているため、アプリケーションロジックの低レベルのテストが可能ですが、エンドツーエンドテストはさまざまなユーザーストーリーや使用・シナリオに重点を置いており、アプリケーション全体を通したデータフローの総合的な高レベルのテストを提供します。また一方で、ユニットテストではアプリケーションのロジックの問題を明らかにしようとしますが、エンドツーエンドテストでは、個々のユニットが一緒に使用される場合に発生する問題を明らかにしようとします。エンドツーエンドのテストにより、アプリケーションの全体的なアーキテクチャに関する問題が明らかになります。 + +エンドツーエンドテストはユーザーストーリーを実行し、個々のコードモジュールではなくアプリケーション全体を対象とするため、エンドツーエンドテストは、メインアプリケーション自体のコードとは別に、プロジェクト内の独自のアプリケーションとして存在します。ほとんどのエンドツーエンドテストは、アプリケーションとの共通のユーザー対話を自動化し、それらの対話の結果を判別するために DOM を調査します。 + +### テストの構成 + +`@ionic/angular` アプリケーションが作成されると、 デフォルトのエンドツーエンドのテストアプリケーションが `e2e` フォルダに生成されます。このアプリケーションは Protractor を使用してブラウザを制御し、Jasmine を使用してテストを構築し、実行します。アプリケーションは、初期時は次の 4 つのファイルで構成されています: + +- `protractor.conf.js` - Protractor の設定ファイル +- `tsconfig.e2e.json` - テストアプリケーション用の特定の TypeScript の設定 +- `src/app.po.ts` - アプリケーションをナビゲートするメソッド、DOM 内の要素を照会するメソッド、ページ上の要素を操作するメソッドを含むページオブジェクト +- `src/app.e2e-spec.ts` - テスト用のスクリプト + +#### ページオブジェクト + +エンドツーエンドのテストは、アプリケーションとの共通のユーザー対話を自動化し、アプリケーションが応答するのを待ち、対話の結果を判別するために DOM を検査します。これには、多くの DOM 操作と試験が必要です。これらをすべて手作業で行うと、テストは非常に脆くなり、見て理解することや保守が困難になります。 + +ページオブジェクトは、TypeScript クラスの単一ページの HTML をカプセル化し、テスト用のスクリプトがアプリケーションと対話するために使用する API を提供します。DOM 操作ロジックをページオブジェクト内にカプセル化することで、テストが読みやすくなり、かつ判断することがはるかに簡単になり、テストの保守コストが大幅に削減されます。洗練されたページオブジェクトを作成することは、高品質で保守しやすいエンドツーエンドのテストを作成するための鍵です。 + +##### ベースページオブジェクト + +多くのテストは、ページが表示されるのを待ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに依存しています。これを行うために使用されるメソッドは、適切な DOM 要素の変更を取得するために使用される CSS セレクターのみと一貫性があります。したがって、このロジックを、他のページオブジェクトが使用できるベースクラスに抽象化することは理にかなっています。 + +すべてのページオブジェクトがサポートを必要とするいくつかのベースメソッドを実装する例を次に示します: + +```tsx +import { browser, by, element, ExpectedConditions } from 'protractor'; + +export class PageObjectBase { + private path: string; + protected tag: string; + + constructor(tag: string, path: string) { + this.tag = tag; + this.path = path; + } + + load() { + return browser.get(this.path); + } + + rootElement() { + return element(by.css(this.tag)); + } + + waitUntilInvisible() { + browser.wait(ExpectedConditions.invisibilityOf(this.rootElement()), 3000); + } + + waitUntilPresent() { + browser.wait(ExpectedConditions.presenceOf(this.rootElement()), 3000); + } + + waitUntilNotPresent() { + browser.wait(ExpectedConditions.not(ExpectedConditions.presenceOf(this.rootElement())), 3000); + } + + waitUntilVisible() { + browser.wait(ExpectedConditions.visibilityOf(this.rootElement()), 3000); + } + + getTitle() { + return element(by.css(`${this.tag} ion-title`)).getText(); + } + + protected enterInputText(sel: string, text: string) { + const el = element(by.css(`${this.tag} ${sel}`)); + const inp = el.element(by.css('input')); + inp.sendKeys(text); + } + + protected enterTextareaText(sel: string, text: string) { + const el = element(by.css(`${this.tag} ${sel}`)); + const inp = el.element(by.css('textarea')); + inp.sendKeys(text); + } + + protected clickButton(sel: string) { + const el = element(by.css(`${this.tag} ${sel}`)); + browser.wait(ExpectedConditions.elementToBeClickable(el)); + el.click(); + } +} +``` + +##### ページ毎の要約 + +アプリケーションの各ページには、そのページの要素を抽象化する独自のページオブジェクトクラスがあります。ベースとなるページオブジェクトクラスを使用する場合、ページオブジェクトを作成するには、ほとんどの場合そのページに固有の要素のカスタムメソッドを作成する必要があります。多くの場合、これらのカスタム要素は、必要な作業を実行するためにベースクラスのメソッドの恩恵を受けます。 + +次に、単純ですが典型的なログインページのページオブジェクトの例を示します。`enterEMail()` のような多くのメソッドは、作業の大部分を行うベースクラスのメソッドを呼び出すことに注意してください。 + +```tsx +import { browser, by, element, ExpectedConditions } from 'protractor'; +import { PageObjectBase } from './base.po'; + +export class LoginPage extends PageObjectBase { + constructor() { + super('app-login', '/login'); + } + + waitForError() { + browser.wait(ExpectedConditions.presenceOf(element(by.css('.error'))), 3000); + } + + getErrorMessage() { + return element(by.css('.error')).getText(); + } + + enterEMail(email: string) { + this.enterInputText('#email-input', email); + } + + enterPassword(password: string) { + this.enterInputText('#password-input', password); + } + + clickSignIn() { + this.clickButton('#signin-button'); + } +} +``` + +#### テストスクリプト + +ユニットテストと同様に、エンドツーエンドのテストスクリプトはネストされた `describe()` と `it()` 関数で構成されています。エンドツーエンドのテストの場合、`describe()` 関数は一般に、特定のシナリオを、そのシナリオ内でアクションが実行されるときにアプリケーションによって表されるべき特定の振る舞いを示す `it()` 関数とともに示します。 + +また、ユニットテストと同様に、`describe()` および `it()` 関数で使用されるラベルは、"describe" または "it"と、完全なテストケースを形成するためにともに連結されるとき、両方とも意味をなします。 + +典型的なログインシナリオを実行するエンドツーエンドのテストスクリプトの簡単な例を次に示します。 + +```tsx +import { AppPage } from '../page-objects/pages/app.po'; +import { AboutPage } from '../page-objects/pages/about.po'; +import { CustomersPage } from '../page-objects/pages/customers.po'; +import { LoginPage } from '../page-objects/pages/login.po'; +import { MenuPage } from '../page-objects/pages/menu.po'; +import { TasksPage } from '../page-objects/pages/tasks.po'; + +describe('Login', () => { + const about = new AboutPage(); + const app = new AppPage(); + const customers = new CustomersPage(); + const login = new LoginPage(); + const menu = new MenuPage(); + const tasks = new TasksPage(); + + beforeEach(() => { + app.load(); + }); + + describe('before logged in', () => { + it('displays the login screen', () => { + expect(login.rootElement().isDisplayed()).toEqual(true); + }); + + it('allows in-app navigation to about', () => { + menu.clickAbout(); + about.waitUntilVisible(); + login.waitUntilInvisible(); + }); + + it('does not allow in-app navigation to tasks', () => { + menu.clickTasks(); + app.waitForPageNavigation(); + expect(login.rootElement().isDisplayed()).toEqual(true); + }); + + it('does not allow in-app navigation to customers', () => { + menu.clickCustomers(); + app.waitForPageNavigation(); + expect(login.rootElement().isDisplayed()).toEqual(true); + }); + + it('displays an error message if the login fails', () => { + login.enterEMail('test@test.com'); + login.enterPassword('bogus'); + login.clickSignIn(); + login.waitForError(); + expect(login.getErrorMessage()).toEqual('The password is invalid or the user does not have a password.'); + }); + + it('navigates to the tasks page if the login succeeds', () => { + login.enterEMail('test@test.com'); + login.enterPassword('testtest'); + login.clickSignIn(); + tasks.waitUntilVisible(); + }); + }); + + describe('once logged in', () => { + beforeEach(() => { + tasks.waitUntilVisible(); + }); + + it('allows navigation to the customers page', () => { + menu.clickCustomers(); + customers.waitUntilVisible(); + tasks.waitUntilInvisible(); + }); + + it('allows navigation to the about page', () => { + menu.clickAbout(); + about.waitUntilVisible(); + tasks.waitUntilInvisible(); + }); + + it('allows navigation back to the tasks page', () => { + menu.clickAbout(); + tasks.waitUntilInvisible(); + menu.clickTasks(); + tasks.waitUntilVisible(); + }); + }); +}); +``` + +### 設定 + +デフォルトの設定では、開発に使用される同じ `environment.ts` ファイルを使います。エンドツーエンドのテストで使用するデータをより適切に制御するには、テスト用の特定の環境を用意し、テストにその環境を使用すると便利なことが多いです。このセクションでは、この設定を作成する 1 つの方法を示します。 + +#### テスト環境 + +テスト環境を設定するには、テスト専用のバックエンドを使用する新しい環境ファイルを作成し、その環境を使うために `angular.json` ファイルを更新し、`package.json` 中の `e2e` スクリプトを `test` 環境を指定するように修正します。 + +##### `environment.e2e.ts` ファイルを生成 + +Angular の `environment.ts` と `environment.prod.ts` ファイルは、アプリケーションのバックエンドのデータサービスのベース URL などの情報を格納するために度々使用されます。また、同じ情報を提供する `environment.e2e.ts` を作成してください。これは、開発または本番のバックエンドサービスではなく、テスト専用のバックエンドサービスにのみ接続します。以下に例を示します: + +```tsx +export const environment = { + production: false, + databaseURL: 'https://e2e-test-api.my-great-app.com', + projectId: 'my-great-app-e2e', +}; +``` + +##### `angular.json` ファイルを修正 + +`angular.json` ファイルを使用するには、このファイルを修正する必要があります。これは階層化プロセスです。以下の XPath リストに従って、必要な設定を追加しましょう。 + +`/projects/app/architect/build/configurations` にファイルの置換を行う `test` という名前の設定を追加します: + +```json +"test": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.e2e.ts" + } + ] +} +``` + +`/projects/app/architect/serve/configurations` に、上記で定義した `test` というビルドの設定をブラウザターゲットに指定する `test` という名前の設定を追加します。 + +```json +"test": { + "browserTarget": "app:build:test" +} +``` + +`/projects/app-e2e/architect/e2e/configurations` に、上記で定義した `test` という起動設定で開発サーバーターゲットを指定する `test` という名前の設定を追加します。 + +```json +"test": { + "devServerTarget": "app:serve:test" +} +``` + +##### `package.json` ファイルを修正 + +`npm run e2e` が `test` の設定を使うように `package.json` ファイルを修正します。 + +```json +"scripts": { + "e2e": "ng e2e --configuration=test", + "lint": "ng lint", + "ng": "ng", + "start": "ng serve", + "test": "ng test", + "test:dev": "ng test --browsers=ChromeHeadlessCI", + "test:ci": "ng test --no-watch --browsers=ChromeHeadlessCI" +}, +``` + +#### テストクリーンアップ + +エンドツーエンドテストが何らかの方法でデータを変更する場合は、テストが完了したらデータを既知の状態に一度リセットすると便利です。そのための 1 つの方法は: + +1. クリーンアップを実行するエンドポイントを生成する。 +1. `protractor.conf.js` ファイルによってエクスポートされる `config` オブジェクトに `onCleanUp()` 関数を追加する + +次に例を示します: + +```javascript +onCleanUp() { + const axios = require('axios'); + return axios + .post( + 'https://e2e-test-api.my-great-app.com/purgeDatabase', + {} + ) + .then(res => { + console.log(res.data); + }) + .catch(err => console.log(err)); +} +``` diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/virtual-scroll.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/virtual-scroll.md new file mode 100644 index 00000000000..3e239956e27 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/virtual-scroll.md @@ -0,0 +1,133 @@ +# 仮想スクロール + +:::warning Looking for `ion-virtual-scroll`? + +`ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below. + +::: + +## Installation + +To setup the CDK Scroller, first install `@angular/cdk`: + +```shell +npm add @angular/cdk +``` + +This provides a collection of different utilities, but we'll focus on `ScrollingModule` for now. + +When we want to use the CDK Scroller, we'll need to import the module in our component. For example, in a tabs starter project, we can add our import to the `tabs1.module.ts` file. + +```diff + import { IonicModule } from '@ionic/angular'; + import { NgModule } from '@angular/core'; + import { CommonModule } from '@angular/common'; + import { FormsModule } from '@angular/forms'; + import { Tab1Page } from './tab1.page'; + import { ExploreContainerComponentModule } from '../explore-container/explore-container.module'; ++ import { ScrollingModule } from '@angular/cdk/scrolling'; + import { Tab1PageRoutingModule } from './tab1-routing.module'; + @NgModule({ + imports: [ + IonicModule, + CommonModule, + FormsModule, + ExploreContainerComponentModule, + Tab1PageRoutingModule, ++ ScrollingModule + ], + declarations: [Tab1Page] + }) + export class Tab1PageModule {} +``` + +With this added, we have access to the Virtual Scroller in the Tab1Page component. + +## Usage + +The CDK Virtual Scroller can be added to a component by adding the `cdk-virtual-scroll-viewport` to a component's template. + +```html + + + +``` + +`cdk-virtual-scroll-viewport` becomes the root of our scrollable content and is responsible for recycling DOM nodes as they scroll out of view. + +The DOM nodes at this point can be any content needed for an app. The difference is that when we want to iterate over a collection, `*cdkVirtualFor` is used instead of `*ngFor`. + +```html + + + + + + + + {{item }} + + + + +``` + +Here, `items` is an array, but it can be an array, `Observable`, or `DataSource`. `DataSource` is an abstract class that can provide the data needed as well as utility methods. For more details, check out the [CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview). + +The component is not complete yet as the `cdk-virtual-scroll-viewport` needs to know how big each node will be as well as the min/max buffer sizes. + +At the moment, CDK Virtual Scroller only supports fixed sized elements, but dynamic sized elements are planned for the future. For the `Tab1Page` component, since it is only rendering an item, it can be hard-coded to a fixed size. + +The min/max buffer size tells the scroller "render as many nodes as it takes to meet this minimum height, but not over this". + +```html + +``` + +For this case, the `cdk-virtual-scroll-viewport` will render cells at a height 56px until it reaches a height of 900px, but no more at 1350px. These numbers are arbitrary, so be sure to test out what values will work in a real use case. + +Putting everything together, the final HTML should look like: + +```html + + + + + + + + {{item }} + + + + +``` + +The last piece needed is a some CSS to size the viewport correctly. In the `tab1.page.scss` file, add the following + +```scss +cdk-virtual-scroll-viewport { + height: 100%; + width: 100%; +} +``` + +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 + +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. + +For example: + +```html + + + + + +``` + +## Further Reading + +This only covers a small portion of what the CDK Virtual Scroller is capable of. For more details, please see the [Angular CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview). diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app.md new file mode 100644 index 00000000000..22a9b47a603 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app.md @@ -0,0 +1,182 @@ +--- +title: 'はじめてのIonicアプリ: Angular' +sidebar_label: はじめてのアプリ +--- + + + Build Your First Ionic Mobile App: Angular Development Tutorial + + + +Ionic の素晴らしいところは、1 つのコードベースで、使い慣れた Web ツールと言語を使用して任意のプラットフォーム用にビルドできることです。 Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step. + +Here’s the finished app running on all 3 platforms: + + + +:::note +Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.md) +::: + +## What We'll Build + +We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device. + +Highlights include: + +- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components). +- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime. +- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs. + +Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng). + +## Download Required Tools + +Download and install these right away to ensure an optimal Ionic development experience: + +- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/). +- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/). +- **Command-line interface/terminal (CLI)**: + - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell + CLI, running in Administrator mode. + - **Mac/Linux** users, virtually any terminal will work. + +## Install Ionic Tooling + +Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens: + +:::note +To open a terminal in Visual Studio Code, go to Terminal -> New Terminal. +::: + +```shell +npm install -g @ionic/cli native-run cordova-res +``` + +:::note +The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. + +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +::: + +## アプリの作成 + +次に、"Tabs" というアプリテンプレートを使用して Ionic Angular アプリを生成し、Native 機能を使うために Capacitor を追加します。 + +```shell +ionic start photo-gallery tabs --type=angular --capacitor +``` + +:::note + +`NgModules` と `Standalone` のどちらかを選択するプロンプトが表示されたら、このチュートリアルは `NgModules` のアプローチに従っているので、`NgModules` を選択する。 + +::: + +このスタータープロジェクトには、Ionic 開発のために事前に構成された 3 つのページとベストプラクティスが用意されています。共通の構成要素がすでに配置されているため、機能を簡単に追加できます！ + +次に、アプリのフォルダに移動します: + +```shell +cd photo-gallery +``` + +Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work: + +```shell +npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem +``` + +### PWA Elements + +Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/ionic-pwa-elements). + +It's a separate dependency, so install it next: + +```shell +npm install @ionic/pwa-elements +``` + +Next, import `@ionic/pwa-elements` by editing `src/main.ts`. + +```tsx +import { defineCustomElements } from '@ionic/pwa-elements/loader'; + +// Call the element loader before the bootstrapModule/bootstrapApplication call +defineCustomElements(window); +``` + +That’s it! Now for the fun part - let’s see the app in action. + +## アプリを起動 + +次のコマンドを実行してください: + +```shell +ionic serve +``` + +And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed. + +## Photo Gallery!!! + +There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately! + +![Animated GIF showing the live reload feature in an Ionic app, with changes in code immediately updating the app in a web browser.](/img/guides/first-app-cap-ng/email-photogallery.gif 'Live Reload Feature in Ionic App') + +Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see: + +```html + + + Tab 2 + + + + + + + Tab 2 + + + +``` + +`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](https://ionicframework.com/docs/api/title#collapsible-large-titles) support). Rename both `ion-title` elements to: + +```html +Photo Gallery +``` + +We put the visual aspects of our app into ``. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB) to the bottom of the page and set the camera image as the icon. + +```html + + + + + + + +``` + +Next, open `src/app/tabs/tabs.page.html`. Change the label to “Photos” and the icon name to “images”: + +```html + + + Photos + +``` + +Save all changes to see them automatically applied in the browser. That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android. diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/2-taking-photos.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/2-taking-photos.md new file mode 100644 index 00000000000..efaa4f38961 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/2-taking-photos.md @@ -0,0 +1,134 @@ +--- +title: Taking Photos with the Camera +sidebar_label: カメラ撮影 +--- + + + Build Camera API for iOS, Android & Web | Ionic Capacitor Camera + + + +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](https://capacitorjs.com/docs/apis/camera). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). + +## Photo Service + +All Capacitor logic (Camera usage and other native features) will be encapsulated in a service class. Create `PhotoService` using the `ionic generate` command: + +```shell +ionic g service services/photo +``` + +Open the new `services/photo.service.ts` file, and let’s add the logic that will power the camera functionality. First, import Capacitor dependencies and get references to the Camera, Filesystem, and Storage plugins: + +```tsx +import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera'; +import { Filesystem, Directory } from '@capacitor/filesystem'; +import { Preferences } from '@capacitor/preferences'; +``` + +Next, define a new class method, `addNewToGallery`, that will contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera: + +```tsx +public async addNewToGallery() { + // Take a photo + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, + source: CameraSource.Camera, + quality: 100 + }); +} +``` + +Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `Camera.getPhoto()` - that will open up the device's camera and allow us to take photos. + +Next, open up `tab2.page.ts` and import the PhotoService class and add a method that calls the `addNewToGallery` method on the imported service: + +```tsx +import { PhotoService } from '../services/photo.service'; + +constructor(public photoService: PhotoService) { } + +addPhotoToGallery() { + this.photoService.addNewToGallery(); +} +``` + +Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the FAB is tapped/clicked: + +```html + + + + + + + +``` + +Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie! + +![A photo gallery app displaying a webcam selfie.](/img/guides/first-app-cap-ng/camera-web.png 'Webcam Selfie in Photo Gallery') + +_(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 + +Outside of the `PhotoService` class definition (the very bottom of the file), create a new interface, `UserPhoto`, to hold our photo metadata: + +```tsx +export interface UserPhoto { + filepath: string; + webviewPath?: string; +} +``` + +Back at the top of the file, define an array of Photos, which will contain a reference to each photo captured with the Camera. + +```tsx +export class PhotoService { + public photos: UserPhoto[] = []; + + // other code +} +``` + +Over in the `addNewToGallery` function, add the newly captured photo to the beginning of the Photos array. + +```tsx + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, + source: CameraSource.Camera, + quality: 100 + }); + + this.photos.unshift({ + filepath: "soon...", + webviewPath: capturedPhoto.webPath! + }); +} +``` + +Next, move over to `tab2.page.html` so we can display the image on the screen. Add a [Grid component](https://ionicframework.com/docs/api/grid) so that each photo will display nicely as photos are added to the gallery, and loop through each photo in the `PhotoServices`'s Photos array, adding an Image component (``) for each. Point the `src` (source) at the photo’s path: + +```html + + + + + + + + + + + +``` + +Save all files. Within the web browser, click the Camera button and take another photo. This time, the photo is displayed in the Photo Gallery! + +Up next, we’ll add support for saving the photos to the filesystem, so they can be retrieved and displayed in our app at a later time. diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/3-saving-photos.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/3-saving-photos.md new file mode 100644 index 00000000000..cf9b948c221 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/3-saving-photos.md @@ -0,0 +1,81 @@ +--- +sidebar_label: 写真の保存 +--- + +# Saving Photos to the Filesystem + +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 + +Fortunately, saving them to the filesystem only takes a few steps. Begin by creating a new class method, `savePicture()`, in the `PhotoService` class (`src/app/services/photo.service.ts`). We pass in the `photo` object, which represents the newly captured device photo: + +```tsx +private async savePicture(photo: Photo) { } +``` + +We can use this new method immediately in `addNewToGallery()`: + +```tsx +public async addNewToGallery() { + // Take a photo + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, // file-based data; provides best performance + source: CameraSource.Camera, // automatically take a new photo with the camera + quality: 100 // highest quality (0 to 100) + }); + + // Save the picture and add it to photo collection + const savedImageFile = await this.savePicture(capturedPhoto); + this.photos.unshift(savedImageFile); +} +``` + +We’ll use the Capacitor [Filesystem API](https://capacitorjs.com/docs/apis/filesystem) to save the photo to the filesystem. To start, convert the photo to base64 format, then feed the data to the Filesystem’s `writeFile` function. As you’ll recall, we display each photo on the screen by setting each image’s source path (`src` attribute) in `tab2.page.html` to the webviewPath property. So, set it then return the new Photo object. + +```tsx +private async savePicture(photo: Photo) { + // Convert photo to base64 format, required by Filesystem API to save + const base64Data = await this.readAsBase64(photo); + + // Write the file to the data directory + const fileName = Date.now() + '.jpeg'; + const savedFile = await Filesystem.writeFile({ + path: fileName, + data: base64Data, + directory: Directory.Data + }); + + // Use webPath to display the new image instead of base64 since it's + // already loaded into memory + return { + filepath: fileName, + webviewPath: photo.webPath + }; +} +``` + +`readAsBase64()` is a helper function we’ll define next. It's useful to organize via a separate method since it requires a small amount of platform-specific (web vs. mobile) logic - more on that in a bit. For now, implement the logic for running on the web: + +```tsx +private async readAsBase64(photo: Photo) { + // Fetch the photo, read as a blob, then convert to base64 format + const response = await fetch(photo.webPath!); + const blob = await response.blob(); + + return await this.convertBlobToBase64(blob) as string; +} + +private convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onerror = reject; + reader.onload = () => { + resolve(reader.result); + }; + reader.readAsDataURL(blob); +}); +``` + +Obtaining the camera photo as base64 format on the web appears to be a bit trickier than on mobile. In reality, we’re just using built-in web APIs: [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) as a neat way to read the file into blob format, then FileReader’s [readAsDataURL()](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) to convert the photo blob to base64. + +There we go! Each time a new photo is taken, it’s now automatically saved to the filesystem. diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/4-loading-photos.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/4-loading-photos.md new file mode 100644 index 00000000000..f2fc61b1fd1 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/4-loading-photos.md @@ -0,0 +1,69 @@ +--- +sidebar_label: 写真の読み込み +--- + +# Loading Photos from the Filesystem + +We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. + +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitorjs.com/docs/apis/preferences) to store our array of Photos in a key-value store. + +## Preferences API + +Begin by defining a constant variable that will act as the key for the store: + +```tsx +export class PhotoService { + public photos: UserPhoto[] = []; + private PHOTO_STORAGE: string = 'photos'; + + // other code +} +``` + +Next, at the end of the `addNewToGallery` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved. + +```tsx +Preferences.set({ + key: this.PHOTO_STORAGE, + value: JSON.stringify(this.photos), +}); +``` + +With the photo array data saved, create a function called `loadSaved()` that can retrieve that data. We use the same key to retrieve the photos array in JSON format, then parse it into an array: + +```tsx +public async loadSaved() { + // Retrieve cached photo array data + const { value } = await Preferences.get({ key: this.PHOTO_STORAGE }); + this.photos = (value ? JSON.parse(value) : []) as UserPhoto[]; + + // more to come... +} +``` + +On mobile (coming up next!), we can directly set the source of an image tag - `` - to each photo file on the Filesystem, displaying them automatically. On the web, however, we must read each image from the Filesystem into base64 format, using a new `base64` property on the `Photo` object. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Below is the code you need to add in the `loadSaved()` function you just added: + +```tsx +// Display the photo by reading into base64 format +for (let photo of this.photos) { + // Read each saved photo's data from the Filesystem + const readFile = await Filesystem.readFile({ + path: photo.filepath, + directory: Directory.Data, + }); + + // Web platform only: Load the photo as base64 data + photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; +} +``` + +After, call this new method in `tab2.page.ts` so that when the user first navigates to Tab 2 (the Photo Gallery), all photos are loaded and displayed on the screen. + +```tsx +async ngOnInit() { + await this.photoService.loadSaved(); +} +``` + +That’s it! We’ve built a complete Photo Gallery feature in our Ionic app that works on the web. Next up, we’ll transform it into a mobile app for iOS and Android! diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/5-adding-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/5-adding-mobile.md new file mode 100644 index 00000000000..16235a008a4 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/5-adding-mobile.md @@ -0,0 +1,117 @@ +--- +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 + +Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device. + +Import the Ionic [Platform API](https://ionicframework.com/docs/angular/platform) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile): + +```tsx +import { Platform } from '@ionic/angular'; + +export class PhotoService { + public photos: UserPhoto[] = []; + private PHOTO_STORAGE: string = 'photos'; + private platform: Platform; + + constructor(platform: Platform) { + this.platform = platform; + } + + // other code +} +``` + +## Platform-specific Logic + +First, we’ll update the photo saving functionality to support mobile. In the `readAsBase64()` function, check which platform the app is running on. If it’s “hybrid” (Capacitor or Cordova, two native runtimes), 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: + +```tsx +private async readAsBase64(photo: Photo) { + // "hybrid" will detect Cordova or Capacitor + if (this.platform.is('hybrid')) { + // Read the file into base64 format + const file = await Filesystem.readFile({ + path: photo.path! + }); + + return file.data; + } + else { + // Fetch the photo, read as a blob, then convert to base64 format + const response = await fetch(photo.webPath!); + const blob = await response.blob(); + + return await this.convertBlobToBase64(blob) as string; + } +} +``` + +Next, update the `savePicture()` method. When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details here](https://ionicframework.com/docs/core-concepts/webview#file-protocol)). + +```tsx +// Save picture to file on device +private async savePicture(photo: Photo) { + // Convert photo to base64 format, required by Filesystem API to save + const base64Data = await this.readAsBase64(photo); + + // Write the file to the data directory + const fileName = Date.now() + '.jpeg'; + const savedFile = await Filesystem.writeFile({ + path: fileName, + data: base64Data, + directory: Directory.Data + }); + + if (this.platform.is('hybrid')) { + // Display the new image by rewriting the 'file://' path to HTTP + // Details: https://ionicframework.com/docs/building/webview#file-protocol + return { + filepath: savedFile.uri, + webviewPath: Capacitor.convertFileSrc(savedFile.uri), + }; + } + else { + // Use webPath to display the new image instead of base64 since it's + // already loaded into memory + return { + filepath: fileName, + webviewPath: photo.webPath + }; + } +} +``` + +Next, head back over to the `loadSaved()` function we implemented for the web earlier. On mobile, we can directly set the source of an image tag - `` - to each photo file on the Filesystem, displaying them automatically. Thus, only the web requires reading each image from the Filesystem into base64 format. Update this function to add an _if statement_ around the Filesystem code: + +```tsx +public async loadSaved() { + // Retrieve cached photo array data + const { value } = await Preferences.get({ key: this.PHOTO_STORAGE }); + this.photos = (value ? JSON.parse(value) : []) as UserPhoto[]; + + // Easiest way to detect when running on the web: + // “when the platform is NOT hybrid, do this” + if (!this.platform.is('hybrid')) { + // Display the photo by reading into base64 format + for (let photo of this.photos) { + // Read each saved photo's data from the Filesystem + const readFile = await Filesystem.readFile({ + path: photo.filepath, + directory: Directory.Data + }); + + // Web platform only: Load the photo as base64 data + photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + } + } +} +``` + +Our Photo Gallery now consists of one codebase that runs on the web, Android, and iOS. Next up, the part you’ve been waiting for - deploying the app to a device. diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/6-deploying-mobile.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/6-deploying-mobile.md new file mode 100644 index 00000000000..06ae7100d8f --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/6-deploying-mobile.md @@ -0,0 +1,114 @@ +--- +title: Deploying to iOS and Android +sidebar_label: モバイルへのデプロイ +--- + + + Deploying to iOS and Android Apps - Capacitor Setup on Ionic + + + +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! Remember, you can find the complete source code for this app [here](https://github.com/ionic-team/photo-gallery-capacitor-ng). + +## Capacitor Setup + +Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the differences [here](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova). + +If you’re still running `ionic serve` in the terminal, cancel it. Complete a fresh build of your Ionic project, fixing any errors that it reports: + +```shell +ionic build +``` + +Next, create both the iOS and Android projects: + +```shell +$ ionic cap add ios +$ ionic cap add android +``` + +Both android and ios folders at the root of the project are created. These are entirely standalone native projects that should be considered part of your Ionic app (i.e., check them into source control, edit them using their native tooling, etc.). + +Every time you perform a build (e.g. `ionic build`) that updates your web directory (default: `www`), you'll need to copy those changes into your native projects: + +```shell +ionic cap copy +``` + +Note: After making updates to the native portion of the code (such as adding a new plugin), use the `sync` command: + +```shell +ionic cap sync +``` + +## iOS Deployment + +:::note +To build an iOS app, you’ll need a Mac computer. +::: + +Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by [CocoaPods](https://cocoapods.org/). Before running this app on an iOS device, there's a couple of steps to complete. + +First, run the Capacitor `open` command, which opens the native iOS project in Xcode: + +```shell +ionic cap open ios +``` + +In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties." + +![The Info.plist file in Xcode showing the NSCameraUsageDescription key added for camera access.](/img/guides/first-app-cap-ng/xcode-info-plist.png 'Xcode Info.plist Configuration') + +Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values." + +Add the `NSCameraUsageDescription` Key and set the Value to something that describes why the app needs to use the camera, such as "To Take Photos." The Value field is displayed to the app user when the permission prompt opens. + +Follow the same process to add the other two Keys required of the Camera plugin: `NSPhotoLibraryAddUsageDescription` and `NSPhotoLibraryUsageDescription`. + +Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team. + +![The Xcode interface displaying the Signing and Capabilities tab for an iOS app project.](/img/guides/first-app-cap-ng/xcode-signing.png 'Xcode Signing & Capabilities') + +With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device: + +![Xcode toolbar highlighting the Build button used to compile and run an iOS app.](/img/guides/first-app-cap-ng/xcode-build-button.png 'Xcode Build Button') + +Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app! + +![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 + +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. + +First, run the Capacitor `open` command, which opens the native Android project in Android Studio: + +```shell +ionic cap open android +``` + +Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`. + +![Android Studio editor showing the AndroidManifest.xml file with camera permissions.](/img/guides/first-app-cap-ng/android-manifest.png 'Android Manifest Permissions') + +Scroll to the `Permissions` section and ensure these entries are included: + +```xml + + +``` + +Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device. + +![The Android Studio interface with arrows pointing to the Run button and the connected device.](/img/guides/first-app-cap-ng/android-device.png 'Android Studio Run Configuration') + +Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app. + +![Two Android phones 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/android-permissions-photo.png 'Android Permissions and Photo Capture') + +Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉 + +In the next portion of this tutorial, we’ll use the Ionic CLI’s Live Reload functionality to quickly implement photo deletion - thus completing our Photo Gallery feature. diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/7-live-reload.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/7-live-reload.md new file mode 100644 index 00000000000..484feddcc0f --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/7-live-reload.md @@ -0,0 +1,114 @@ +--- +title: アプリ開発を高速化するためのライブリロード +sidebar_label: ライブリロード +--- + + + + + +So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster? + +We can use the Ionic CLI’s [Live Reload functionality](https://ionicframework.com/docs/cli/livereload) 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 + +Remember `ionic serve`? That was Live Reload working in the browser, allowing us to iterate quickly. + +We can also use it when developing on iOS and Android devices. This is particularly useful when writing code that interacts with native plugins - we must run it on a device to verify that it works. Therefore, being able to quickly write, build, test, and deploy code is crucial to keeping up our development speed. + +Let’s use Live Reload to implement photo deletion, the missing piece of our Photo Gallery feature. Select your platform of choice (iOS or Android) and connect a device to your computer. Next, run either command in a terminal, based on your chosen platform: + +```shell +$ ionic cap run ios -l --external + +$ 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 + +With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog. + +```html + + + +``` + +Over in `tab2.page.ts`, import Action Sheet and add it to the constructor: + +```tsx +import { ActionSheetController } from '@ionic/angular'; + +constructor(public photoService: PhotoService, + public actionSheetController: ActionSheetController) {} +``` + +Add `UserPhoto` to the import statement. + +```tsx +import { PhotoService, UserPhoto } from '../services/photo.service'; +``` + +Next, implement the `showActionSheet()` function. We add two options: `Delete` that calls PhotoService’s `deletePicture()` function (to be added next) and `Cancel`, which when given the role of “cancel” will automatically close the action sheet: + +```tsx +public async showActionSheet(photo: UserPhoto, position: number) { + const actionSheet = await this.actionSheetController.create({ + header: 'Photos', + buttons: [{ + text: 'Delete', + role: 'destructive', + icon: 'trash', + handler: () => { + this.photoService.deletePicture(photo, position); + } + }, { + text: 'Cancel', + icon: 'close', + role: 'cancel', + handler: () => { + // Nothing to do, action sheet is automatically closed + } + }] + }); + await actionSheet.present(); +} +``` + +Save both of the files we just edited. The Photo Gallery app will reload automatically, and now when we tap on one of the photos in the gallery, the action sheet displays. Tapping “Delete” doesn’t do anything yet, so head back into your code editor. + +In `src/app/services/photo.service.ts`, add the `deletePicture()` function: + +```tsx +public async deletePicture(photo: UserPhoto, position: number) { + // Remove this photo from the Photos reference data array + this.photos.splice(position, 1); + + // Update photos array cache by overwriting the existing photo array + Preferences.set({ + key: this.PHOTO_STORAGE, + value: JSON.stringify(this.photos) + }); + + // delete photo file from filesystem + const filename = photo.filepath + .substr(photo.filepath.lastIndexOf('/') + 1); + + await Filesystem.deleteFile({ + path: filename, + directory: Directory.Data + }); +} +``` + +The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API. + +Save this file, then tap on a photo again and choose the “Delete” option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪 + +In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices. diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/8-distribute.md b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/8-distribute.md new file mode 100644 index 00000000000..65ef475f6be --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/angular/your-first-app/8-distribute.md @@ -0,0 +1,100 @@ +--- +sidebar_label: Distribute +--- + +# Build and Deploy your App + +Now that you have built your first app, you are going to want to get it distributed so everyone can start using it. The mechanics of building and deploying your application can be quite cumbersome. That is where [Appflow](https://ionic.io/docs/appflow/) comes into play. Appflow allows you to effectively generate web and native builds, push out live app updates, publish your app to the app stores, and automate the whole process. The entire Quickstart guide can be found [here](https://ionic.io/docs/appflow/quickstart). + +Below we will run through an overview of the steps. + +## 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 + +The Appflow SDK (also known as Ionic Deploy plugin) will allow you to take advantage of arguably two of the best Appflow features: deploying live updates to your app and bypassing the app stores. Ionic Appflow's Live Update feature is shipped with Appflow SDK and features the capabilities of detecting and syncing the updates for your app that you have pushed to your identified channels within the dashboard. + +To get the Appflow SDK plugin added to your project, you can follow the install instructions within the Appflow Dashboard by clicking on "Install Instructions" inside of the `Deploy > Destinations` section. Alternatively, you can install the plugin manually by executing the following command in your app's root directory: + +```shell +ionic deploy add \ + --app-id="YOUR_APP_ID" \ + --channel-name="YOUR_CHANNEL_NAME" \ + --update-method="background|auto|none" \ +``` + +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 + +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: + +```shell +git add . # stage any changes +git commit -m "added appflow sdk" # commit staged changes +git push origin main # push the changes from the main branch to your git host +``` + +After the push is made, you will then see your commit under the `Commits` tab of the Appflow Dashboard. For more on this, take a look at the [Push a Commit](https://ionic.io/docs/appflow/quickstart/push) section inside the Appflow docs. + +## 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. + +To get the live update deployed, a Web build will need to be created. This can be done through the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right corner of the `Build > Builds` tab. After selecting the correct commit to deploy, select the `Web` target platform and the `Latest` build stack. Depending on your Appflow plan, you will then be able to include custom environments, if any are configured. Finally, you can enable `Live Update` and pick the Channel to automatically assign the build to once it successfully completes. + +Upon completion of the Web Build, additional versioning options are available to you. After completing this section and you have a successful Deploy build, you can then assign it to the same Channel you configured the Appflow SDK to listen to when you installed it by clicking the `Deploy live updates` button in the build detail page. The same can be done by clicking the `Deploy live updates` icon on the build in the `Build > Builds` tab and select the Channel from the dropdown. + +To receive this live update, you will need to run the app on a device or an emulator. The quickest and easiest way to do this is through the following command: + +```shell +ionic [cordova | cap] run [ios | android] [options] +``` + +Assuming the app is configured correctly to listen to the channel you deployed to, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied! + +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 + +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. + +Given a successful Package build, an iOS binary (`.ipa` or IPA) or/and an Android binary (`.apk` or APK) file becomes available to you. The file can subsequently be downloaded so you can install it on a device by clicking the file name in the `Artifacts` section in the right of the build detail page or clicking the `Download IPA/APK` icon on the build in the `Build > Builds` tab. + +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 + +[Automations](https://ionic.io/docs/appflow/automation/intro) enable you and your team to utilize the full CI/CD powers of Appflow. You can create automations that trigger [Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) every time your team commits new code to a given branch. The automations can also be configured to use different environments and native configurations for building different versions of your app for development, staging, QA and production. + +For more information, visit the [Create an Automation](https://ionic.io/docs/appflow/quickstart/automation) section within the Appflow docs. There you will see details on creating a single automation. However, you can create multiple automations for different branches or workflows and customize them to fit your needs. An important note is that the ability to create an automation is available for those on our [Basic plans](https://ionic.io/pricing) and above. + +## 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 + +[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). + +Native configs can be used to: + +- Overwrite the unique bundle identifier or [id attribute](https://cordova.apache.org/docs/en/latest/config_ref/#widget) in `config.xml` +- Overwrite the App Name as it will appear on the home screen of a device +- Overwrite the [Appflow SDK (Deploy Plugin) variables and preferences](https://ionic.io/docs/appflow/deploy/api#plugin-variables) + +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? + +Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users devices! + +There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users. + +Happy app building! 💙 diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api.md b/i18n/ja/docusaurus-plugin-content-docs/current/api.md new file mode 100644 index 00000000000..01b482ea210 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api.md @@ -0,0 +1,17 @@ +--- +title: APIインデックス +--- + +import APIList from '@components/page/api/APIList'; + + + API Index | API カスタム要素の Ionic Docs API Index + + + +各 Ionic の [コンポーネント](/docs/components) は、1 つ以上の [カスタム要素](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) から構成されます。各カスタム要素は順番に、プロパティ、メソッド、イベント、および CSS カスタムプロパティを公開できます。 + + diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/accordion-group.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/accordion-group.md new file mode 100644 index 00000000000..8c78ab292b9 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/accordion-group.md @@ -0,0 +1,81 @@ +--- +title: 'ion-accordion-group' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### animated + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、アコーディオングループ内のすべてのアコーディオンが拡大・縮小時にアニメーションを行います。 | +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `true` | + +### disabled + +| | | +| --------------- | ---------------------------------------------------------------- | +| **Description** | `true`の場合、アコーディオングループと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### expand + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------- | +| **Description** | 各アコーディオンの拡張動作を記述します。指定可能な値は `"compact"` と `"inset"` です。デフォルトは `"compact"` です。 | +| **Attribute** | `expand` | +| **Type** | `"compact" \| "inset"` | +| **Default** | `'compact'` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### multiple + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、アコーディオングループは複数のアコーディオンコンポーネントを同時に展開することができます。 | +| **Attribute** | `multiple` | +| **Type** | `boolean \| undefined` | +| **Default** | `undefined` | + +### readonly + +| | | +| --------------- | ------------------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、アコーディオングループはインタラクティブに操作できないが、不透明度は変更されない。 | +| **Attribute** | `readonly` | +| **Type** | `boolean` | +| **Default** | `false` | + +### value + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アコーディオングループの値です。これは、どのアコーディオンを展開するかを制御します。これは、`multiple="true"`のときだけ、文字列の配列でなければなりません。 | +| **Attribute** | `value` | +| **Type** | `null \| string \| string[] \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ionChange` | value プロパティがクリックなどのユーザーアクションによって変更されたときに発行される。 プログラムで `value` プロパティを設定した場合には、このイベントは発生しない。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/accordion.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/accordion.md new file mode 100644 index 00000000000..833adbd6ad5 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/accordion.md @@ -0,0 +1,89 @@ +--- +title: 'ion-accordion' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Ion-Accordion Components: How to Build & Examples | Ionic + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### disabled + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | `true`の場合、アコーディオンは対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### readonly + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、アコーディオンはインタラクティブに操作することはできませんが、不透明度は変化しません。 | +| **Attribute** | `readonly` | +| **Type** | `boolean` | +| **Default** | `false` | + +### toggleIcon + +| | | +| --------------- | ---------------------------------------------------------------------------------------------- | +| **Description** | 使用するトグルアイコンです。このアイコンは、アコーディオンの展開・折りたたみ時に回転されます。 | +| **Attribute** | `toggle-icon` | +| **Type** | `string` | +| **Default** | `chevronDown` | + +### toggleIconSlot + +| | | +| --------------- | --------------------------------------------------------------------------------- | +| **Description** | トグルアイコンを配置する `ion-item` の内側のスロット。デフォルトは `"end"` です。 | +| **Attribute** | `toggle-icon-slot` | +| **Type** | `"end" \| "start"` | +| **Default** | `'end'` | + +### value + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | アコーディオンの値です。デフォルトは自動生成された値です。 | +| **Attribute** | `value` | +| **Type** | `string` | +| **Default** | `ion-accordion-${accordionIds++}` | + +## CSS Shadow Parts + +| Name | Description | +| ---------- | --------------------------------------------------------------------------------------------------------------------- | +| `content` | content slot のラッパー要素。 | +| `expanded` | 拡張された要素です。ヘッダ`とコンテンツ`の部分と組み合わせて使用することができます（例：`::part(header expanded)`）。 | +| `header` | header slot のラッパーの要素です。 | + +## Slots + +| Name | Description | +| --------- | -------------------------------------------------------------------------------- | +| `content` | コンテンツはヘッダーの下に配置され、展開状態に応じて表示または非表示になります。 | +| `header` | コンテンツは上部に配置され、アコーディオンアイテムの拡大・縮小に使用されます。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/action-sheet.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/action-sheet.md new file mode 100644 index 00000000000..31a9ba7c5ff --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/action-sheet.md @@ -0,0 +1,244 @@ +--- +title: 'ion-action-sheet' +demoUrl: '/docs/demos/api/action-sheet/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/action-sheet/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-action-sheet | Action Sheet Dialog for iOS and Android Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### animated + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | `true`の場合、アクションシートはアニメーションを行います。 | +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `true` | + +### backdropDismiss + +| | | +| --------------- | ------------------------------------------------------------------------------ | +| **Description** | `true`の場合、バックドロップがクリックされるとアクションシートが解除されます。 | +| **Attribute** | `backdrop-dismiss` | +| **Type** | `boolean` | +| **Default** | `true` | + +### buttons + +| | | +| --------------- | -------------------------------------- | +| **Description** | アクションシートのボタンの配列です。 | +| **Attribute** | `buttons` | +| **Type** | `(string \| ActionSheetButton)[]` | +| **Default** | `[]` | + +### cssClass + +| | | +| --------------- | --------------------------------------------------------------------------------------------------- | +| **Description** | カスタム CSS に適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 | +| **Attribute** | `css-class` | +| **Type** | `string \| string[] \| undefined` | +| **Default** | `undefined` | + +### enterAnimation + +| | | +| --------------- | ------------------------------------------------------- | +| **Description** | アクションシートの提示時に使用するアニメーションです。 | +| **Attribute** | `enter-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### header + +| | | +| --------------- | -------------------------------- | +| **Description** | アクションシートのタイトルです。 | +| **Attribute** | `header` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### htmlAttributes + +| | | +| --------------- | -------------------------------------- | +| **Description** | アクションシートに渡す追加属性。 | +| **Attribute** | `html-attributes` | +| **Type** | `undefined \| { [key: string]: any; }` | +| **Default** | `undefined` | + +### isOpen + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、アクションシートは開かれます。`false`の場合、アクションシートは閉じます。プレゼンテーションの細かな制御が必要な場合はこれを使用し、そうでない場合は actionSheetController または `trigger` プロパティを使用します。注意: アクションシートが終了しても、`isOpen`は自動的に`false`に戻されません。あなたのコードでそれを行う必要があります。 | +| **Attribute** | `is-open` | +| **Type** | `boolean` | +| **Default** | `false` | + +### keyboardClose + +| | | +| --------------- | ------------------------------------------------------------------------------ | +| **Description** | `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 | +| **Attribute** | `keyboard-close` | +| **Type** | `boolean` | +| **Default** | `true` | + +### leaveAnimation + +| | | +| --------------- | -------------------------------------------------------------- | +| **Description** | アクションシートが解除されたときに使用するアニメーションです。 | +| **Attribute** | `leave-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### subHeader + +| | | +| --------------- | ------------------------------------ | +| **Description** | アクションシートのサブタイトルです。 | +| **Attribute** | `sub-header` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### translucent + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、アクションシートは半透明になります。mode が `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 | +| **Attribute** | `translucent` | +| **Type** | `boolean` | +| **Default** | `false` | + +### trigger + +| | | +| --------------- | --------------------------------------------------------------- | +| **Description** | クリックするとアクションシートが開くトリガー要素に対応する ID。 | +| **Attribute** | `trigger` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| --------------------------- | -------------------------------------------------------------------------------- | +| `didDismiss` | アクションシートが解散した後に発行されます。ionActionSheetDidDismiss の略記。 | +| `didPresent` | アクションシートが提示された後に発行されます。ionActionSheetWillDismiss の略語。 | +| `ionActionSheetDidDismiss` | アクションシートが解散した後に発行されます。 | +| `ionActionSheetDidPresent` | アクションシートが提示された後に発行されます。 | +| `ionActionSheetWillDismiss` | アクションシートが解散する前に発行されます。 | +| `ionActionSheetWillPresent` | アクションシートが提示される前に発行されます。 | +| `willDismiss` | アクションシートが解散する前に発行されます。ionActionSheetWillDismiss の略記。 | +| `willPresent` | アクションシートが提示される前に発行されます。ionActionSheetWillPresent の略記。 | + +## Methods + +### dismiss + +| | | +| --------------- | ---------------------------------------------------------------- | +| **Description** | アクションシートのオーバーレイが提示された後、それを解除します。 | +| **Signature** | `dismiss(data?: any, role?: string) => Promise` | + +### onDidDismiss + +| | | +| --------------- | ------------------------------------------------------------- | +| **Description** | アクションシートが解散したときに解決する Promise を返します。 | +| **Signature** | `onDidDismiss() => Promise>` | + +### onWillDismiss + +| | | +| --------------- | ------------------------------------------------------------------- | +| **Description** | アクションシートが解散するタイミングを解決する Promise を返します。 | +| **Signature** | `onWillDismiss() => Promise>` | + +### present + +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | アクションシートのオーバーレイを作成後に提示します。 | +| **Signature** | `present() => Promise` | + +## CSS Custom Properties + +| Name | Description | +| --------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| `--backdrop-opacity` | 背景の不透明度 | +| `--backdrop-opacity` | 背景の不透明度 | +| `--background` | アクションシートグループの背景 | +| `--background` | アクションシートグループの背景 | +| `--button-background` | アクションシートボタンの背景 | +| `--button-background` | アクションシートボタンの背景 | +| `--button-background-activated` | アクションシートボタンが押されたときの背景。注意：これを設定すると、Material Design の波紋に干渉します。 | +| `--button-background-activated` | アクションシートボタンが押されたときの背景。注意：これを設定すると、Material Design の波紋に干渉します。 | +| `--button-background-activated-opacity` | アクションシートボタンが押されたときの背景の不透明度 | +| `--button-background-activated-opacity` | アクションシートボタンが押されたときの背景の不透明度 | +| `--button-background-focused` | にタブしたときのアクションシートボタンの背景。 | +| `--button-background-focused` | にタブしたときのアクションシートボタンの背景。 | +| `--button-background-focused-opacity` | にタブしたときのアクションシートボタンの背景の不透明度。 | +| `--button-background-focused-opacity` | にタブしたときのアクションシートボタンの背景の不透明度。 | +| `--button-background-hover` | ホバー時のアクションシートボタンの背景 | +| `--button-background-hover` | ホバー時のアクションシートボタンの背景 | +| `--button-background-hover-opacity` | ホバー時のアクションシートボタンの背景の不透明度 | +| `--button-background-hover-opacity` | ホバー時のアクションシートボタンの背景の不透明度 | +| `--button-background-selected` | 選択したアクションシートボタンの背景 | +| `--button-background-selected` | 選択したアクションシートボタンの背景 | +| `--button-background-selected-opacity` | 選択されたアクションシートボタンの背景の不透明度 | +| `--button-background-selected-opacity` | 選択されたアクションシートボタンの背景の不透明度 | +| `--button-color` | アクションシートボタンの色 | +| `--button-color` | アクションシートボタンの色 | +| `--button-color-activated` | アクションシートボタンが押されたときの色 | +| `--button-color-activated` | アクションシートボタンが押されたときの色 | +| `--button-color-disabled` | 無効時の選択されたアクション・シート・ボタンの色 | +| `--button-color-disabled` | 無効時の選択されたアクション・シート・ボタンの色 | +| `--button-color-focused` | にタブで移動したときのアクションシートのボタンの色。 | +| `--button-color-focused` | にタブで移動したときのアクションシートのボタンの色。 | +| `--button-color-hover` | ホバー時のアクションシートボタンの色 | +| `--button-color-hover` | ホバー時のアクションシートボタンの色 | +| `--button-color-selected` | 選択されたアクションシートのボタンの色 | +| `--button-color-selected` | 選択されたアクションシートのボタンの色 | +| `--color` | アクションシートテキストの色 | +| `--color` | アクションシートテキストの色 | +| `--height` | アクションシートの高さ | +| `--height` | アクションシートの高さ | +| `--max-height` | アクションシートの最大の高さ | +| `--max-height` | アクションシートの最大の高さ | +| `--max-width` | アクションシートの最大幅 | +| `--max-width` | アクションシートの最大幅 | +| `--min-height` | アクションシートの最小高さ | +| `--min-height` | アクションシートの最小高さ | +| `--min-width` | アクションシートの最小幅 | +| `--min-width` | アクションシートの最小幅 | +| `--width` | アクションシートの横幅 | +| `--width` | アクションシートの横幅 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/alert.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/alert.md new file mode 100644 index 00000000000..429d7132a7f --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/alert.md @@ -0,0 +1,230 @@ +--- +title: 'ion-alert' +demoUrl: '/docs/demos/api/alert/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/alert/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-alert: Ionic API Alert Buttons with Custom Message Prompts + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### animated + +| | | +| --------------- | ------------------------------------------------------ | +| **Description** | `true`の場合、アラートはアニメーションで表示されます。 | +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `true` | + +### backdropDismiss + +| | | +| --------------- | -------------------------------------------------------------------- | +| **Description** | `true`の場合、バックドロップがクリックされるとアラートが解除される。 | +| **Attribute** | `backdrop-dismiss` | +| **Type** | `boolean` | +| **Default** | `true` | + +### buttons + +| | | +| --------------- | ---------------------------------- | +| **Description** | アラートに追加されるボタンの配列。 | +| **Attribute** | `buttons` | +| **Type** | `(string \| AlertButton)[]` | +| **Default** | `[]` | + +### cssClass + +| | | +| --------------- | --------------------------------------------------------------------------------------------------- | +| **Description** | カスタム CSS に適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 | +| **Attribute** | `css-class` | +| **Type** | `string \| string[] \| undefined` | +| **Default** | `undefined` | + +### enterAnimation + +| | | +| --------------- | ------------------------------------------------------- | +| **Description** | アラート提示時に使用するアニメーションです。 | +| **Attribute** | `enter-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### header + +| | | +| --------------- | ------------------------------------------ | +| **Description** | アラートの見出しにあるメインタイトルです。 | +| **Attribute** | `header` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### htmlAttributes + +| | | +| --------------- | -------------------------------------- | +| **Description** | アラートに渡す追加属性。 | +| **Attribute** | `html-attributes` | +| **Type** | `undefined \| { [key: string]: any; }` | +| **Default** | `undefined` | + +### inputs + +| | | +| --------------- | --------------------------------- | +| **Description** | アラートに表示する Input の配列。 | +| **Attribute** | `inputs` | +| **Type** | `AlertInput[]` | +| **Default** | `[]` | + +### isOpen + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、アラートは開く。もし `false` ならば、アラートは閉じます。alertController や`trigger`プロパティを使用してください。注意: アラートが終了しても `isOpen` は自動的に `false` に戻りません。あなたのコードでそれを行う必要があります。 | +| **Attribute** | `is-open` | +| **Type** | `boolean` | +| **Default** | `false` | + +### keyboardClose + +| | | +| --------------- | ------------------------------------------------------------------------------ | +| **Description** | `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 | +| **Attribute** | `keyboard-close` | +| **Type** | `boolean` | +| **Default** | `true` | + +### leaveAnimation + +| | | +| --------------- | ------------------------------------------------------- | +| **Description** | アラートが解除されたときに使用するアニメーション。 | +| **Attribute** | `leave-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### message + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アラートに表示されるメインメッセージ。`message`には、文字列としてプレーンテキストまたは HTML のいずれかを指定することができます。通常 HTML 用に予約されている文字を表示するには、エスケープする必要があります。例えば、``は `<Ionic>` になります：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) このプロパティは、カスタム HTML を文字列として受け付けます。デフォルトでは、コンテンツはプレーンテキストとしてパースされます。カスタム HTML を使用するには、Ionic の設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。 | +| **Attribute** | `message` | +| **Type** | `IonicSafeString \| string \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### subHeader + +| | | +| --------------- | -------------------------------------------------------------------- | +| **Description** | アラートの見出しにあるサブタイトルです。タイトルの下に表示されます。 | +| **Attribute** | `sub-header` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### translucent + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、アラートは半透明になります。mode が `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 | +| **Attribute** | `translucent` | +| **Type** | `boolean` | +| **Default** | `false` | + +### trigger + +| | | +| --------------- | --------------------------------------------------------- | +| **Description** | クリックされるとアラートが開くトリガー要素に対応する ID。 | +| **Attribute** | `trigger` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| --------------------- | ------------------------------------------------------------------ | +| `didDismiss` | アラートが解除された後に発行されます。ionAlertDidDismiss の略記。 | +| `didPresent` | アラートが提示された後に発行されます。ionAlertWillDismiss の略記。 | +| `ionAlertDidDismiss` | アラートが解除された後に発行されます。 | +| `ionAlertDidPresent` | アラートが提示された後に発行されます。 | +| `ionAlertWillDismiss` | アラートが解除される前に発行されます。 | +| `ionAlertWillPresent` | アラートが提示される前に発行されます。 | +| `willDismiss` | アラートが解除される前に発行されます。ionAlertWillDismiss の略記。 | +| `willPresent` | アラートが提示される前に発行されます。ionAlertWillPresent の略記。 | + +## Methods + +### dismiss + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | アラートオーバーレイが表示された後、解除します。 | +| **Signature** | `dismiss(data?: any, role?: string) => Promise` | + +### onDidDismiss + +| | | +| --------------- | ----------------------------------------------------------- | +| **Description** | アラートが解除されたことを解決する Promise を返します。 | +| **Signature** | `onDidDismiss() => Promise>` | + +### onWillDismiss + +| | | +| --------------- | ------------------------------------------------------------- | +| **Description** | アラートが解除されるタイミングを解決する Promise を返します。 | +| **Signature** | `onWillDismiss() => Promise>` | + +### present + +| | | +| --------------- | ---------------------------------------------- | +| **Description** | アラートオーバーレイを作成した後に提示します。 | +| **Signature** | `present() => Promise` | + +## CSS Custom Properties + +| Name | Description | +| -------------------- | -------------------- | +| `--backdrop-opacity` | 背景の不透明度 | +| `--backdrop-opacity` | 背景の不透明度 | +| `--background` | 注意喚起の背景 | +| `--background` | 注意喚起の背景 | +| `--height` | アラートの高さ | +| `--height` | アラートの高さ | +| `--max-height` | アラートの最大の高さ | +| `--max-height` | アラートの最大の高さ | +| `--max-width` | アラートの最大幅 | +| `--max-width` | アラートの最大幅 | +| `--min-height` | アラートの最小の高さ | +| `--min-height` | アラートの最小の高さ | +| `--min-width` | アラートの最小幅 | +| `--min-width` | アラートの最小幅 | +| `--width` | アラートの幅 | +| `--width` | アラートの幅 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/app.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/app.md new file mode 100644 index 00000000000..df3b8b57e29 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/app.md @@ -0,0 +1,25 @@ +--- +title: 'ion-app' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-app: Container Element for an Ionic Application + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Methods + +### setFocus + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ion-focusable`を使用している要素にフォーカスを設定するために使用する。キーボードイベントの結果として要素にフォーカスを当てる場合は、このメソッドを使用しないでください。このメソッドは、他のユーザアクションの結果としてプログラム的に要素にフォーカスを当てたい場合に使用します。(例: ユーザーがポップオーバーを提示したときに、ポップオーバー内の最初の要素にフォーカスを当てますが、ポップオーバーは常にキーボード操作の結果として提示されるわけではありません)。 | +| **Signature** | `setFocus(elements: HTMLElement[]) => Promise` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/avatar.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/avatar.md new file mode 100644 index 00000000000..252ef9c5ba1 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/avatar.md @@ -0,0 +1,27 @@ +--- +title: 'ion-avatar' +demoUrl: '/docs/demos/api/avatar/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/avatar/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-avatar: Circular Application Avatar Icon Component + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## CSS Custom Properties + +| Name | Description | +| ----------------- | ------------------------------------ | +| `--border-radius` | アバターとインナーイメージの境界半径 | +| `--border-radius` | アバターとインナーイメージの境界半径 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/back-button.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/back-button.md new file mode 100644 index 00000000000..9557682948f --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/back-button.md @@ -0,0 +1,171 @@ +--- +title: 'ion-back-button' +demoUrl: '/docs/demos/api/back-button/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/back-button/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Back Button | ion-back-button: Custom Menu Icon for Applications + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### defaultHref + +| | | +| --------------- | ---------------------------------------------- | +| **Description** | 履歴がない場合に、デフォルトで戻るための URL。 | +| **Attribute** | `default-href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | `true`の場合、ユーザはボタンと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### icon + +| | | +| --------------- | ----------------------------------------------------------------------------------------------- | +| **Description** | 戻るボタンに使用する内蔵の名前付き SVG アイコン名または SVG ファイルの正確な`src`を指定します。 | +| **Attribute** | `icon` | +| **Type** | `null \| string \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### routerAnimation + +| | | +| --------------- | -------------------------------------------------------------------------------- | +| **Description** | ルーターを使用する場合、別のページに移動する際の遷移アニメーションを指定します。 | +| **Attribute** | `router-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### text + +| | | +| --------------- | ------------------------------------ | +| **Description** | バックボタンに表示するテキストです。 | +| **Attribute** | `text` | +| **Type** | `null \| string \| undefined` | +| **Default** | `undefined` | + +### type + +| | | +| --------------- | --------------------------------- | +| **Description** | ボタンの種類です。 | +| **Attribute** | `type` | +| **Type** | `"button" \| "reset" \| "submit"` | +| **Default** | `'button'` | + +## CSS Shadow Parts + +| Name | Description | +| -------- | ------------------------------------------------ | +| `icon` | 戻るボタンのアイコン（ion-icon を使用）。 | +| `native` | すべての子要素を包むネイティブ HTML ボタン要素。 | +| `text` | 戻るボタンのテキストです。 | + +## CSS Custom Properties + +| Name | Description | +| ------------------------------ | -------------------------------------------------------------------------------------------------- | +| `--background` | ボタンの背景 | +| `--background` | ボタンの背景 | +| `--background-focused` | タブキーでフォーカスしたときのボタンの背景 | +| `--background-focused` | タブキーでフォーカスしたときのボタンの背景 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのボタンの背景の不透明度 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのボタンの背景の不透明度 | +| `--background-hover` | ホバー時のボタンの背景 | +| `--background-hover` | ホバー時のボタンの背景 | +| `--background-hover-opacity` | ホバー時の背景の不透明度 | +| `--background-hover-opacity` | ホバー時の背景の不透明度 | +| `--border-radius` | ボタンの境界半径 | +| `--border-radius` | ボタンの境界半径 | +| `--color` | ボタンの文字色 | +| `--color` | ボタンの文字色 | +| `--color-focused` | タブキーでフォーカスしたときのボタンの文字色 | +| `--color-focused` | タブキーでフォーカスしたときのボタンの文字色 | +| `--color-hover` | ホバー時のボタンの文字色 | +| `--color-hover` | ホバー時のボタンの文字色 | +| `--icon-font-size` | ボタンアイコンの Font Size | +| `--icon-font-size` | ボタンアイコンの Font Size | +| `--icon-font-weight` | ボタンアイコンの Font Weight | +| `--icon-font-weight` | ボタンアイコンの Font Weight | +| `--icon-margin-bottom` | ボタンアイコンの Bottom Margin | +| `--icon-margin-bottom` | ボタンアイコンの Bottom Margin | +| `--icon-margin-end` | ボタンアイコンの方向が左から右の場合は Right Margin、右から左の場合は Left Margin | +| `--icon-margin-end` | ボタンアイコンの方向が左から右の場合は Right Margin、右から左の場合は Left Margin | +| `--icon-margin-start` | ボタンアイコンの方向が左から右の場合は Left Margin、右から左の場合は Right Margin | +| `--icon-margin-start` | ボタンアイコンの方向が左から右の場合は Left Margin、右から左の場合は Right Margin | +| `--icon-margin-top` | ボタンアイコンの Top Margin | +| `--icon-margin-top` | ボタンアイコンの Top Margin | +| `--icon-padding-bottom` | ボタンアイコンの Bottom Padding | +| `--icon-padding-bottom` | ボタンアイコンの Bottom Padding | +| `--icon-padding-end` | ボタンアイコンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding を使用します。 | +| `--icon-padding-end` | ボタンアイコンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding を使用します。 | +| `--icon-padding-start` | ボタンアイコンの方向が左から右の場合は Left Padding、右から左の場合は Right Padding を使用します。 | +| `--icon-padding-start` | ボタンアイコンの方向が左から右の場合は Left Padding、右から左の場合は Right Padding を使用します。 | +| `--icon-padding-top` | ボタンアイコンの Top Padding | +| `--icon-padding-top` | ボタンアイコンの Top Padding | +| `--margin-bottom` | ボタンの Bottom Margin | +| `--margin-bottom` | ボタンの Bottom Margin | +| `--margin-end` | ボタンの向きが左から右の場合は Right Margin、右から左の場合は Left Margin | +| `--margin-end` | ボタンの向きが左から右の場合は Right Margin、右から左の場合は Left Margin | +| `--margin-start` | ボタンの向きが左から右の場合は Left Margin、右から左の場合は Right Margin | +| `--margin-start` | ボタンの向きが左から右の場合は Left Margin、右から左の場合は Right Margin | +| `--margin-top` | ボタンの Top Margin | +| `--margin-top` | ボタンの Top Margin | +| `--min-height` | ボタンの最小高さ | +| `--min-height` | ボタンの最小高さ | +| `--min-width` | ボタンの最小幅 | +| `--min-width` | ボタンの最小幅 | +| `--opacity` | ボタンの不透明度 | +| `--opacity` | ボタンの不透明度 | +| `--padding-bottom` | ボタンの Bottom Padding | +| `--padding-bottom` | ボタンの Bottom Padding | +| `--padding-end` | ボタンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-end` | ボタンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-start` | ボタンの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-start` | ボタンの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-top` | ボタンの Top Padding | +| `--padding-top` | ボタンの Top Padding | +| `--ripple-color` | ボタンリプルエフェクトの色 | +| `--ripple-color` | ボタンリプルエフェクトの色 | +| `--transition` | ボタンの遷移 | +| `--transition` | ボタンの遷移 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/backdrop.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/backdrop.md new file mode 100644 index 00000000000..ecf17e9bb9f --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/backdrop.md @@ -0,0 +1,55 @@ +--- +title: 'ion-backdrop' +demoUrl: '/docs/demos/api/backdrop/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/backdrop/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Ionic-Backdrop Component Full Screen Overlay| Ionic Framework + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### stopPropagation + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | `true`の場合、バックドロップはタップ時に伝搬を停止します。 | +| **Attribute** | `stop-propagation` | +| **Type** | `boolean` | +| **Default** | `true` | + +### tappable + +| | | +| --------------- | ------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、背景をクリックすることができ、`ionBackdropTap`イベントを発生させます。 | +| **Attribute** | `tappable` | +| **Type** | `boolean` | +| **Default** | `true` | + +### visible + +| | | +| --------------- | -------------------------------------------- | +| **Description** | `true`の場合、バックドロップが表示されます。 | +| **Attribute** | `visible` | +| **Type** | `boolean` | +| **Default** | `true` | + +## Events + +| Name | Description | +| ---------------- | ------------------------------------------------ | +| `ionBackdropTap` | バックドロップがタップされたときに発行されます。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/badge.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/badge.md new file mode 100644 index 00000000000..9e992088fdd --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/badge.md @@ -0,0 +1,57 @@ +--- +title: 'ion-badge' +demoUrl: '/docs/demos/api/badge/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/badge/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Badges | ion-badge: iOS & Android App Notification Badge Icons + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +## CSS Custom Properties + +| Name | Description | +| ------------------ | ---------------------------------------------------------------------------------------- | +| `--background` | バッジの背景 | +| `--background` | バッジの背景 | +| `--color` | バッジの文字色 | +| `--color` | バッジの文字色 | +| `--padding-bottom` | バッジの Bottom Padding | +| `--padding-bottom` | バッジの Bottom Padding | +| `--padding-end` | バッジの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-end` | バッジの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-start` | バッジの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-start` | バッジの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-top` | バッジの Top Padding | +| `--padding-top` | バッジの Top Padding | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/breadcrumb.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/breadcrumb.md new file mode 100644 index 00000000000..fee68b09d40 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/breadcrumb.md @@ -0,0 +1,141 @@ +--- +title: 'ion-breadcrumb' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### active + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、パンくずが現在アクティブなパンくずであることを示すために、パンくずの外観を変化させることができる。最後のパンくずが設定されていない場合、デフォルトは `true` です。 | +| **Attribute** | `active` | +| **Type** | `boolean` | +| **Default** | `false` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | ------------------------------------------------------------ | +| **Description** | `true`の場合、ユーザーはパンくずと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### download + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 | +| **Attribute** | `download` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### href + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。 | +| **Attribute** | `href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### rel + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。 | +| **Attribute** | `rel` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### routerAnimation + +| | | +| --------------- | ---------------------------------------------------------------------------------------------- | +| **Description** | ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。 | +| **Attribute** | `router-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### routerDirection + +| | | +| --------------- | ------------------------------------------------------------------------------------ | +| **Description** | ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。 | +| **Attribute** | `router-direction` | +| **Type** | `"back" \| "forward" \| "root"` | +| **Default** | `'forward'` | + +### separator + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | true の場合、このパンくずと次のパンくずの間にセパレータを表示します。デフォルトは `true` で、最後のパンくずを除くすべてのパンくずが表示されます。 | +| **Attribute** | `separator` | +| **Type** | `boolean \| undefined` | +| **Default** | `undefined` | + +### target + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | リンク先の URL を表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. | +| **Attribute** | `target` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ---------- | ------------------------------------------------ | +| `ionBlur` | パンくずのフォーカスが外れたときに発行されます。 | +| `ionFocus` | パンくずがフォーカスされたときに発行されます。 | + +## CSS Shadow Parts + +| Name | Description | +| --------------------- | ------------------------------------------------------------------- | +| `collapsed-indicator` | パンくずが折りたたまれていることを示すインジケーター要素です。 | +| `native` | すべての子要素を包むネイティブ HTML のアンカーまたは div 要素です。 | +| `separator` | 各パンくずの間のセパレータ要素です。 | + +## CSS Custom Properties + +| Name | Description | +| ---------------------- | ------------------------------------------ | +| `--background-focused` | フォーカス時のパンくずの背景色 | +| `--background-focused` | フォーカス時のパンくずの背景色 | +| `--color` | パンくずの文字色 | +| `--color` | パンくずの文字色 | +| `--color-active` | アクティブなパンくずのテキスト色 | +| `--color-active` | アクティブなパンくずのテキスト色 | +| `--color-focused` | フォーカスされたときのパンくずのテキスト色 | +| `--color-focused` | フォーカスされたときのパンくずのテキスト色 | +| `--color-hover` | ホバー時のパンくずのテキスト色 | +| `--color-hover` | ホバー時のパンくずのテキスト色 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/breadcrumbs.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/breadcrumbs.md new file mode 100644 index 00000000000..9c15d4dbe41 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/breadcrumbs.md @@ -0,0 +1,63 @@ +--- +title: 'ion-breadcrumbs' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### itemsAfterCollapse + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 折りたたまれたインジケータの後に表示するパンくずの数。itemsBeforeCollapse`+`itemsAfterCollapse`が`maxItems` よりも大きい場合、パンくずは折りたたまれない。 | +| **Attribute** | `items-after-collapse` | +| **Type** | `number` | +| **Default** | `1` | + +### itemsBeforeCollapse + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 折りたたんだインジケータの前に表示するパンくずの数を指定します。itemsBeforeCollapse`+`itemsAfterCollapse`が`maxItems` よりも大きい場合、パンくずは折りたたまれない。 | +| **Attribute** | `items-before-collapse` | +| **Type** | `number` | +| **Default** | `1` | + +### maxItems + +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | 折りたたむ前に表示するパンくずの最大数を指定します。 | +| **Attribute** | `max-items` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ------------------- | ---------------------------------------------------------- | +| `ionCollapsedClick` | 折りたたみインジケータがクリックされたときに発行されます。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/button.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/button.md new file mode 100644 index 00000000000..9183895d0aa --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/button.md @@ -0,0 +1,248 @@ +--- +title: 'ion-button' +demoUrl: '/docs/demos/api/button/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/button/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-button: Design and Style Buttons with Custom CSS Properties + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### buttonType + +| | | +| --------------- | ------------------ | +| **Description** | ボタンの種類です。 | +| **Attribute** | `button-type` | +| **Type** | `string` | +| **Default** | `'button'` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | `true`の場合、ユーザはボタンと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### download + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 | +| **Attribute** | `download` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### expand + +| | | +| --------------- | ----------------------------------------------------------------------------------------------- | +| **Description** | 全角のボタンなら`"block"`、角が四角く左右のボーダーがない全角のボタンなら`"full"`に設定します。 | +| **Attribute** | `expand` | +| **Type** | `"block" \| "full" \| undefined` | +| **Default** | `undefined` | + +### fill + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | フラットなボタンに似た透明なボタンには `"clear"` を、ボーダーのある透明なボタンには `"outline"` を、背景を塗りつぶしたボタンには `"solid"` を設定します。デフォルトの塗りつぶしは `"solid"` です。ただし、ツールバーの内側では `"clear"` となります。 | +| **Attribute** | `fill` | +| **Type** | `"clear" \| "default" \| "outline" \| "solid" \| undefined` | +| **Default** | `undefined` | + +### form + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------- | +| **Description** | HTML のフォーム要素またはフォーム要素 ID。ボタンがフォームの子でない場合に、フォームを送信するために使用します。 | +| **Attribute** | `form` | +| **Type** | `HTMLFormElement \| string \| undefined` | +| **Default** | `undefined` | + +### href + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。 | +| **Attribute** | `href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### rel + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。 | +| **Attribute** | `rel` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### routerAnimation + +| | | +| --------------- | ---------------------------------------------------------------------------------------------- | +| **Description** | ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。 | +| **Attribute** | `router-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### routerDirection + +| | | +| --------------- | ------------------------------------------------------------------------------------ | +| **Description** | ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。 | +| **Attribute** | `router-direction` | +| **Type** | `"back" \| "forward" \| "root"` | +| **Default** | `'forward'` | + +### shape + +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | round"` に設定すると、より角が丸いボタンになります。 | +| **Attribute** | `shape` | +| **Type** | `"round" \| undefined` | +| **Default** | `undefined` | + +### size + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ボタンの高さと Padding が少ない場合は `"small"` に、ボタンの高さと Padding がデフォルトの場合は `"default"` に、ボタンの高さと Padding が多い場合は `"large"` に設定します。ただし、ボタンがアイテムの中にある場合は、デフォルトでサイズが `"small"` になっています。アイテムの内部でサイズを `"default"` に設定すると、標準サイズのボタンになります。 | +| **Attribute** | `size` | +| **Type** | `"default" \| "large" \| "small" \| undefined` | +| **Default** | `undefined` | + +### strong + +| | | +| --------------- | --------------------------------------------------------------------- | +| **Description** | `true`の場合、より重い Font Weight を持つボタンをアクティブにします。 | +| **Attribute** | `strong` | +| **Type** | `boolean` | +| **Default** | `false` | + +### target + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | リンク先の URL を表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. | +| **Attribute** | `target` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### type + +| | | +| --------------- | --------------------------------- | +| **Description** | ボタンの種類です。 | +| **Attribute** | `type` | +| **Type** | `"button" \| "reset" \| "submit"` | +| **Default** | `'button'` | + +## Events + +| Name | Description | +| ---------- | ---------------------------------------------------- | +| `ionBlur` | ボタンのフォーカスが外れたときに発行されます。 | +| `ionFocus` | ボタンにフォーカスが当たっているときに発行されます。 | + +## CSS Shadow Parts + +| Name | Description | +| -------- | -------------------------------------------------------------------------- | +| `native` | すべての子要素をラップするネイティブ HTML のボタンまたはアンカー要素です。 | + +## CSS Custom Properties + +| Name | Description | +| -------------------------------- | ---------------------------------------------------------------------------------------- | +| `--background` | ボタンの背景 | +| `--background` | ボタンの背景 | +| `--background-activated` | ボタンが押されたときの背景。注意：これを設定すると、Material Design の波紋に干渉します。 | +| `--background-activated` | ボタンが押されたときの背景。注意：これを設定すると、Material Design の波紋に干渉します。 | +| `--background-activated-opacity` | ボタンが押されたときの不透明度 | +| `--background-activated-opacity` | ボタンが押されたときの不透明度 | +| `--background-focused` | タブキーでフォーカスしたときのボタンの背景 | +| `--background-focused` | タブキーでフォーカスしたときのボタンの背景 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのボタンの不透明度 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのボタンの不透明度 | +| `--background-hover` | ホバー時のボタンの背景 | +| `--background-hover` | ホバー時のボタンの背景 | +| `--background-hover-opacity` | ホバー時の背景の不透明度 | +| `--background-hover-opacity` | ホバー時の背景の不透明度 | +| `--border-color` | ボタンのボーダーカラー | +| `--border-color` | ボタンのボーダーカラー | +| `--border-radius` | ボタンの境界半径 | +| `--border-radius` | ボタンの境界半径 | +| `--border-style` | ボタンのボーダースタイル | +| `--border-style` | ボタンのボーダースタイル | +| `--border-width` | ボタンのボーダー幅 | +| `--border-width` | ボタンのボーダー幅 | +| `--box-shadow` | ボタンのボックスシャドウ | +| `--box-shadow` | ボタンのボックスシャドウ | +| `--color` | ボタンの文字色 | +| `--color` | ボタンの文字色 | +| `--color-activated` | ボタンが押されたときの文字色 | +| `--color-activated` | ボタンが押されたときの文字色 | +| `--color-focused` | タブキーでフォーカスしたときのボタンの文字色 | +| `--color-focused` | タブキーでフォーカスしたときのボタンの文字色 | +| `--color-hover` | ホバー時のボタンの文字色 | +| `--color-hover` | ホバー時のボタンの文字色 | +| `--opacity` | ボタンの不透明度 | +| `--opacity` | ボタンの不透明度 | +| `--padding-bottom` | ボタンの Bottom Padding | +| `--padding-bottom` | ボタンの Bottom Padding | +| `--padding-end` | ボタンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-end` | ボタンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-start` | ボタンの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-start` | ボタンの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-top` | ボタンの Top Padding | +| `--padding-top` | ボタンの Top Padding | +| `--ripple-color` | ボタンリプルエフェクトの色 | +| `--ripple-color` | ボタンリプルエフェクトの色 | +| `--transition` | ボタンの遷移 | +| `--transition` | ボタンの遷移 | + +## Slots + +| Name | Description | +| ----------- | ---------------------------------------------------------------------------------- | +| `` | slot がない状態で提供される場合、コンテンツは名前付き slot の間に配置されます。 | +| `end` | コンテンツは、LTR の場合はボタンテキストの右側に、RTL の場合は左側に配置されます。 | +| `icon-only` | テキストを持たないボタン内のアイコンに対して使用されるべきです。 | +| `start` | コンテンツは、LTR ではボタンテキストの左側に、RTL では右側に配置されます。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/buttons.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/buttons.md new file mode 100644 index 00000000000..526db90e0ff --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/buttons.md @@ -0,0 +1,29 @@ +--- +title: 'ion-buttons' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-buttons: Toolbar Element with Named Slots for Buttons + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### collapse + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | true を指定すると、ツールバーが最初のツールバーでない場合、親ツールバーが完全に折り畳まれたときにボタンが消えます。ツールバーが最初のツールバーである場合、ボタンは隠され、すべてのツールバーが完全に折りたたまれたときにのみ表示されます。 ion-header`で `collapse`を`true`に設定した`ios` mode にのみ適用されます。 通常、[Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用されます。 | +| **Attribute** | `collapse` | +| **Type** | `boolean` | +| **Default** | `false` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/card-content.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/card-content.md new file mode 100644 index 00000000000..26cdf8ef5f0 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/card-content.md @@ -0,0 +1,19 @@ +--- +title: 'ion-card-content' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/card-header.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/card-header.md new file mode 100644 index 00000000000..3171ec2114f --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/card-header.md @@ -0,0 +1,39 @@ +--- +title: 'ion-card-header' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### translucent + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、カードヘッダは半透明になります。mode が `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 | +| **Attribute** | `translucent` | +| **Type** | `boolean` | +| **Default** | `false` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/card-subtitle.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/card-subtitle.md new file mode 100644 index 00000000000..c8fd924bea1 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/card-subtitle.md @@ -0,0 +1,37 @@ +--- +title: 'ion-card-subtitle' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +## CSS Custom Properties + +| Name | Description | +| --------- | ---------------------- | +| `--color` | カードサブタイトルの色 | +| `--color` | カードサブタイトルの色 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/card-title.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/card-title.md new file mode 100644 index 00000000000..c14f45c32fd --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/card-title.md @@ -0,0 +1,45 @@ +--- +title: 'ion-card-title' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-card-title | Ionic App Card Title Component and Properties + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +## CSS Custom Properties + +| Name | Description | +| --------- | ------------------ | +| `--color` | カードタイトルの色 | +| `--color` | カードタイトルの色 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/card.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/card.md new file mode 100644 index 00000000000..f9f64b169ec --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/card.md @@ -0,0 +1,136 @@ +--- +title: 'ion-card' +demoUrl: '/docs/demos/api/card/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/card/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-card: Card UI Components for Ionic Framework API + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### button + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | `true`の場合、ボタンタグがレンダリングされ、カードはタップ可能になる。 | +| **Attribute** | `button` | +| **Type** | `boolean` | +| **Default** | `false` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | `true`の場合、ユーザはカードと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### download + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 | +| **Attribute** | `download` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### href + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。 | +| **Attribute** | `href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### rel + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。 | +| **Attribute** | `rel` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### routerAnimation + +| | | +| --------------- | ---------------------------------------------------------------------------------------------- | +| **Description** | ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。 | +| **Attribute** | `router-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### routerDirection + +| | | +| --------------- | ------------------------------------------------------------------------------------ | +| **Description** | ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。 | +| **Attribute** | `router-direction` | +| **Type** | `"back" \| "forward" \| "root"` | +| **Default** | `'forward'` | + +### target + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | リンク先の URL を表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. | +| **Attribute** | `target` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### type + +| | | +| --------------- | ------------------------------------------------------------------------------ | +| **Description** | ボタンの種類。onclick`または`button`プロパティが存在する場合にのみ使用される。 | +| **Attribute** | `type` | +| **Type** | `"button" \| "reset" \| "submit"` | +| **Default** | `'button'` | + +## CSS Shadow Parts + +| Name | Description | +| -------- | ----------------------------------------------------------------------------------- | +| `native` | すべての子要素をラップするネイティブ HTML のボタン、アンカー、または div 要素です。 | + +## CSS Custom Properties + +| Name | Description | +| -------------- | ------------ | +| `--background` | カードの背景 | +| `--background` | カードの背景 | +| `--color` | カードの色 | +| `--color` | カードの色 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/checkbox.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/checkbox.md new file mode 100644 index 00000000000..bf478bc45ac --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/checkbox.md @@ -0,0 +1,191 @@ +--- +title: 'ion-checkbox' +demoUrl: '/docs/demos/api/checkbox/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/checkbox/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-checkboxes: Ionic App Component to Select Multiple Options + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### alignment + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 十字軸上のチェックボックスとラベルの配置を制御する方法。start"`：ラベルとコントロールはLTRでは横軸の左側に、RTLでは右側に表示されます。center"`：ラベルとコントロールは LTR でも RTL でも横軸の中央に表示されます。このプロパティを設定すると、チェックボックス `display` が `block` に変更されます。 | +| **Attribute** | `alignment` | +| **Type** | `"center" \| "start" \| undefined` | +| **Default** | `undefined` | + +### checked + +| | | +| --------------- | -------------------------------------------- | +| **Description** | `true`の場合、チェックボックスが選択される。 | +| **Attribute** | `checked` | +| **Type** | `boolean` | +| **Default** | `false` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | ------------------------------------------------------------------ | +| **Description** | `true`の場合、ユーザはチェックボックスと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### errorText + +| | | +| --------------- | ------------------------------------------------------------------------------------- | +| **Description** | Text that is placed under the checkbox label and displayed when an error is detected. | +| **Attribute** | `error-text` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### helperText + +| | | +| --------------- | ------------------------------------------------------------------------------------- | +| **Description** | Text that is placed under the checkbox label and displayed when no error is detected. | +| **Attribute** | `helper-text` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### indeterminate + +| | | +| --------------- | -------------------------------------------------------------- | +| **Description** | `true`の場合、チェックボックスは視覚的に不定形と表示されます。 | +| **Attribute** | `indeterminate` | +| **Type** | `boolean` | +| **Default** | `false` | + +### justify + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ラベルとチェックボックスを 1 行にまとめる方法。start"`：ラベルとチェックボックスはLTRでは左に、RTLでは右に表示されます。end"`：ラベルとチェックボックスは LTR では右に、RTL では左に表示されます。space-between"`：ラベルとチェックボックスは行の反対側に表示され、2つの要素の間にはスペースが入ります。このプロパティを設定すると、チェックボックスの `display`が`block` に変更されます。 | +| **Attribute** | `justify` | +| **Type** | `"end" \| "space-between" \| "start" \| undefined` | +| **Default** | `undefined` | + +### labelPlacement + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | チェックボックスに対するラベルの位置。start"`：ラベルはLTRではチェックボックスの左に、RTLでは右に表示されます。end"`：ラベルは LTR ではチェックボックスの右、RTL では左に表示されます。fixed"`：ラベルの幅が固定される以外は `"start"` と同じ動作をします。長いテキストは省略記号("...")で切り捨てられます。積み重ね"`：ラベルは向きに関係なくチェックボックスの上に表示されます。ラベルの整列は `alignment` プロパティで制御できます。 | +| **Attribute** | `label-placement` | +| **Type** | `"end" \| "fixed" \| "stacked" \| "start"` | +| **Default** | `'start'` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### name + +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | フォームデータとともに送信されるコントロールの名前。 | +| **Attribute** | `name` | +| **Type** | `string` | +| **Default** | `this.inputId` | + +### required + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. | +| **Attribute** | `required` | +| **Type** | `boolean` | +| **Default** | `false` | + +### value + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | チェックボックスの値は、チェックされているかどうかを意味するものではなく、`checked`プロパティを使用します。 チェックボックスの値は `` の値に似ており、チェックボックスがネイティブの `
` に参加する場合にのみ使用されます。 | +| **Attribute** | `value` | +| **Type** | `any` | +| **Default** | `'on'` | + +## Events + +| Name | Description | +| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `ionBlur` | チェックボックスのフォーカスが外れたときに発行されます。 | +| `ionChange` | クリックなどのユーザーアクションの結果、checked プロパティが変更されたときに発行される。 プログラムで `checked` プロパティを設定した場合は、このイベントは発生しません。 | +| `ionFocus` | チェックボックスにフォーカスが当たったときに発行されます。 | + +## CSS Shadow Parts + +| Name | Description | +| ----------------- | ---------------------------------------------------------------------------------------------- | +| `container` | チェックボックスマークのコンテナです。 | +| `error-text` | Supporting text displayed beneath the checkbox label when the checkbox is invalid and touched. | +| `helper-text` | Supporting text displayed beneath the checkbox label when the checkbox is valid. | +| `label` | チェックボックスを表すラベルテキスト。 | +| `mark` | チェックされた状態を示すために使用されるチェックマークです。 | +| `supporting-text` | Supporting text displayed beneath the checkbox label. | + +## CSS Custom Properties + +| Name | Description | +| ------------------------------- | -------------------------------------------------------------- | +| `--border-color` | チェックボックスアイコンのボーダーカラー | +| `--border-color` | チェックボックスアイコンのボーダーカラー | +| `--border-color-checked` | チェックボックスのアイコンがチェックされたときのボーダーカラー | +| `--border-color-checked` | チェックボックスのアイコンがチェックされたときのボーダーカラー | +| `--border-radius` | チェックボックスアイコンの境界半径 | +| `--border-radius` | チェックボックスアイコンの境界半径 | +| `--border-style` | チェックボックスアイコンのボーダースタイル | +| `--border-style` | チェックボックスアイコンのボーダースタイル | +| `--border-width` | チェックボックスアイコンのボーダー幅 | +| `--border-width` | チェックボックスアイコンのボーダー幅 | +| `--checkbox-background` | チェックボックスアイコンの背景 | +| `--checkbox-background` | チェックボックスアイコンの背景 | +| `--checkbox-background-checked` | チェックしたときのチェックボックスアイコンの背景 | +| `--checkbox-background-checked` | チェックしたときのチェックボックスアイコンの背景 | +| `--checkmark-color` | チェックボックスのチェックマークがチェックされたときの色 | +| `--checkmark-color` | チェックボックスのチェックマークがチェックされたときの色 | +| `--checkmark-width` | チェックボックス・チェックマークのストローク幅 | +| `--checkmark-width` | チェックボックス・チェックマークのストローク幅 | +| `--size` | チェックボックスのアイコンの大きさ | +| `--size` | チェックボックスのアイコンの大きさ | +| `--transition` | チェックボックスアイコンの遷移 | +| `--transition` | チェックボックスアイコンの遷移 | + +## Slots + +| Name | Description | +| ---- | ------------------------------------------------------------------------------------------------------------------------------------ | +| `` | チェックボックスと関連付けるラベルテキスト。"labelPlacement"プロパティを使用して、チェックボックスに対するラベルの配置を制御します。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/chip.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/chip.md new file mode 100644 index 00000000000..67ad1ca6059 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/chip.md @@ -0,0 +1,67 @@ +--- +title: 'ion-chip' +demoUrl: '/docs/demos/api/chip/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/chip/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-chip: Name, Text, Icon and Avatar for Ionic Framework Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | `true`の場合、ユーザはチップと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### outline + +| | | +| --------------- | ---------------------------------------- | +| **Description** | アウトラインスタイルボタンを表示します。 | +| **Attribute** | `outline` | +| **Type** | `boolean` | +| **Default** | `false` | + +## CSS Custom Properties + +| Name | Description | +| -------------- | ------------ | +| `--background` | チップの背景 | +| `--background` | チップの背景 | +| `--color` | チップの色 | +| `--color` | チップの色 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/col.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/col.md new file mode 100644 index 00000000000..b0523f8bf93 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/col.md @@ -0,0 +1,248 @@ +--- +title: 'ion-col' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-col: Column Component Padding, Size and Other Properties + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### offset + +| | | +| --------------- | ---------------------------------------------------------------------------- | +| **Description** | オフセットする量を、利用可能な合計の末尾に何列分シフトさせるかで指定します。 | +| **Attribute** | `offset` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### offsetLg + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------- | +| **Description** | Lg スクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。 | +| **Attribute** | `offset-lg` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### offsetMd + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------- | +| **Description** | md スクリーン用のカラムをオフセットする量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。 | +| **Attribute** | `offset-md` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### offsetSm + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------- | +| **Description** | sm スクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。 | +| **Attribute** | `offset-sm` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### offsetXl + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------- | +| **Description** | xl スクリーン用のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。 | +| **Attribute** | `offset-xl` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### offsetXs + +| | | +| --------------- | ------------------------------------------------------------------------------------------- | +| **Description** | xs 画面のカラムをオフセットする量を、利用可能な合計の末尾に何カラム分ずらすかで指定します。 | +| **Attribute** | `offset-xs` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### pull + +| | | +| --------------- | ------------------------------------------------------------------------ | +| **Description** | 列を引っ張る量を、利用可能な合計の開始位置に何列分ずらすかで指定します。 | +| **Attribute** | `pull` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### pullLg + +| | | +| --------------- | --------------------------------------------------------------------------------------------------- | +| **Description** | LG スクリーン用のカラムを引く量を、使用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 | +| **Attribute** | `pull-lg` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### pullMd + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------- | +| **Description** | md スクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラムシフトさせるかで指定します。 | +| **Attribute** | `pull-md` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### pullSm + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------- | +| **Description** | sm スクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 | +| **Attribute** | `pull-sm` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### pullXl + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------- | +| **Description** | xl スクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 | +| **Attribute** | `pull-xl` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### pullXs + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------- | +| **Description** | xs スクリーン用のカラムを引っ張る量を、利用可能な合計の開始位置に何カラム分シフトさせるかで指定します。 | +| **Attribute** | `pull-xs` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### push + +| | | +| --------------- | ------------------------------------------------------------------------------ | +| **Description** | カラムを押す量を、利用可能な合計の末尾に何カラム分シフトさせるかで指定します。 | +| **Attribute** | `push` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### pushLg + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------- | +| **Description** | LG スクリーン用のカラムをプッシュする量を、使用可能な総カラムのうち何カラム分までシフトさせるかで指定します。 | +| **Attribute** | `push-lg` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### pushMd + +| | | +| --------------- | --------------------------------------------------------------------------------------- | +| **Description** | md スクリーン用のカラムを、利用可能な合計の末尾に何カラム分シフトさせるかを指定します。 | +| **Attribute** | `push-md` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### pushSm + +| | | +| --------------- | ----------------------------------------------------------------------------------------------- | +| **Description** | sm スクリーン用のカラムを押す量を、使用可能な合計の末尾に何カラム分シフトさせるかで指定します。 | +| **Attribute** | `push-sm` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### pushXl + +| | | +| --------------- | --------------------------------------------------------------------------------------------------- | +| **Description** | xl スクリーン用のカラムをプッシュする量を、利用可能な合計の末尾にシフトするカラムの数で指定します。 | +| **Attribute** | `push-xl` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### pushXs + +| | | +| --------------- | ------------------------------------------------------------------------- | +| **Description** | xs 画面分の列を、利用可能な合計の末尾に何列分シフトさせるかを指定します。 | +| **Attribute** | `push-xs` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### size + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | カラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。`"auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 | +| **Attribute** | `size` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### sizeLg + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | lg スクリーン用のカラムの大きさを、利用可能な合計カラム数のうち何カラムを占めるべきかという観点から指定します。 `"auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 | +| **Attribute** | `size-lg` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### sizeMd + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | md スクリーンのカラムの大きさを、利用可能なカラムのうち何カラムを占有するかで指定します。`"auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 | +| **Attribute** | `size-md` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### sizeSm + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | sm スクリーン用のカラムの大きさを、利用可能なカラムのうち何カラムを占めるかで指定します。`"auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 | +| **Attribute** | `size-sm` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### sizeXl + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | xl スクリーン用のカラムの大きさを、利用可能な合計カラムのうち何カラムを占めるべきかという観点から指定します。`"auto"`が渡された場合、カラムはそのコンテンツのサイズになります。 | +| **Attribute** | `size-xl` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### sizeXs + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | xs スクリーンのカラムの大きさを、利用可能な合計のうち何カラムを占めるべきかという観点から指定します。 `"auto"`が渡された場合、カラムはそのコンテンツのサイズとなる。 | +| **Attribute** | `size-xs` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +## CSS Custom Properties + +| Name | Description | +| ------------------------------ | ------------------------------------------------------ | +| `--ion-grid-column-padding` | カラムの Padding | +| `--ion-grid-column-padding-lg` | LG 以上の画面でのコラムの Padding | +| `--ion-grid-column-padding-md` | md スクリーン以上のカラムの Padding | +| `--ion-grid-column-padding-sm` | スマートフォン以上の画面では、コラムにパッドを入れる。 | +| `--ion-grid-column-padding-xl` | XL 以上の画面でのカラムの Padding | +| `--ion-grid-column-padding-xs` | xs スクリーン以上のカラムの Padding | +| `--ion-grid-columns` | グリッドのカラムの総数 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/content.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/content.md new file mode 100644 index 00000000000..b78f233df8a --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/content.md @@ -0,0 +1,158 @@ +--- +title: 'ion-content' +demoUrl: '/docs/demos/api/content/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/content/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-content: Scrollable CSS Component for Ionic App Content Areas + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### fixedSlotPlacement + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | 固定コンテンツが DOM 内のメイン・コンテンツの相対的などこに配置されるかを制御します。これは、固定要素がキーボード・フォーカスを受ける順番を制御するために使用できます。例えば、固定スロットの FAB がメインページのコンテンツよりも先にキーボードフォーカスを受け取るようにする場合、このプロパティを `'before'` に設定します。 | +| **Attribute** | `fixed-slot-placement` | +| **Type** | `"after" \| "before"` | +| **Default** | `'after'` | + +### forceOverscroll + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`で、コンテンツがオーバーフロースクロールを引き起こさない場合、スクロールインタラクションはバウンスを引き起こします。コンテンツが ionContent の境界を超えた場合、何も変化しません。なお、これは iOS のシステムバウンスを無効にするものではありません。これは OS レベルの設定です。 | +| **Attribute** | `force-overscroll` | +| **Type** | `boolean \| undefined` | +| **Default** | `undefined` | + +### fullscreen + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、コンテンツはヘッダーとフッターの後ろにスクロールされます。この効果は、ツールバーを透明に設定することで簡単に確認することができます。 | +| **Attribute** | `fullscreen` | +| **Type** | `boolean` | +| **Default** | `false` | + +### scrollEvents + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | パフォーマンス上の理由から、ionScroll イベントはデフォルトで無効になっています。ionScroll イベントを有効にして(ionScroll)からリスニングを開始するには、このプロパティを`true`に設定します。 | +| **Attribute** | `scroll-events` | +| **Type** | `boolean` | +| **Default** | `false` | + +### scrollX + +| | | +| --------------- | ---------------------------------------------------------------------------------------- | +| **Description** | X 軸方向のコンテンツスクロールを有効にしたい場合は、このプロパティを`true`に設定します。 | +| **Attribute** | `scroll-x` | +| **Type** | `boolean` | +| **Default** | `false` | + +### scrollY + +| | | +| --------------- | ----------------------------------------------------------------------------------------- | +| **Description** | Y 軸方向のコンテンツスクロールを無効にしたい場合は、このプロパティに`false`を設定します。 | +| **Attribute** | `scroll-y` | +| **Type** | `boolean` | +| **Default** | `true` | + +## Events + +| Name | Description | +| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ionScroll` | スクロール中に発行されます。このイベントはデフォルトで無効になっています。有効にするには `scrollEvents` に `true` を設定します。 | +| `ionScrollEnd` | スクロールが終了したときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定します。 | +| `ionScrollStart` | スクロールが開始されたときに発行されます。このイベントはデフォルトで無効になっている。有効にするには `scrollEvents` に `true` を設定してください。 | + +## Methods + +### getScrollElement + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 実際のスクロールが行われる要素を取得します。この要素を使用して、`scroll` イベントを購読したり、`scrollTop` を手動で変更したりすることができる。スクロールイベントには `ionScroll`, `ionScrollStart`, `ionScrollEnd` を、コンテンツを特定のポイントにスクロールさせるには `scrollToPoint()` を使用することが推奨されます。 | +| **Signature** | `getScrollElement() => Promise` | + +### scrollByPoint + +| | | +| --------------- | ------------------------------------------------------------------------ | +| **Description** | コンポーネントを指定した X/Y 距離だけスクロールさせる。 | +| **Signature** | `scrollByPoint(x: number, y: number, duration: number) => Promise` | + +### scrollToBottom + +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | コンポーネントの一番下までスクロールします。 | +| **Signature** | `scrollToBottom(duration?: number) => Promise` | + +### scrollToPoint + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------- | +| **Description** | コンポーネント内の指定した X/Y 位置までスクロールします。 | +| **Signature** | `scrollToPoint(x: number \| undefined \| null, y: number \| undefined \| null, duration?: number) => Promise` | + +### scrollToTop + +| | | +| --------------- | ------------------------------------------------- | +| **Description** | コンポーネントの上部にスクロールします。 | +| **Signature** | `scrollToTop(duration?: number) => Promise` | + +## CSS Shadow Parts + +| Name | Description | +| ------------ | -------------------------------------- | +| `background` | コンテンツの背景です。 | +| `scroll` | コンテンツのスクロール可能なコンテナ。 | + +## CSS Custom Properties + +| Name | Description | +| ------------------- | -------------------------------------------------------------------------------------------- | +| `--background` | コンテンツの背景 | +| `--color` | コンテンツの色 | +| `--keyboard-offset` | コンテンツのキーボードオフセット | +| `--offset-bottom` | コンテンツのオフセットボトム | +| `--offset-top` | コンテンツのオフセットトップ | +| `--padding-bottom` | コンテンツの Bottom Padding | +| `--padding-end` | コンテンツの方向が左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-start` | コンテンツの方向が左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-top` | コンテンツの Top Padding | + +## Slots + +| Name | Description | +| ------- | --------------------------------------------------------------------------- | +| `` | slot なしで提供される場合、コンテンツはスクロール可能な領域に配置されます。 | +| `fixed` | スクロールしてはいけない固定コンテンツに使用する必要があります。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/datetime-button.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/datetime-button.md new file mode 100644 index 00000000000..9710a6a0e45 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/datetime-button.md @@ -0,0 +1,61 @@ +--- +title: 'ion-datetime-button' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `'primary'` | + +### datetime + +| | | +| --------------- | ------------------------------------------------------------------ | +| **Description** | datetime ボタンに関連付けられた `ion-datetime` インスタンスの ID。 | +| **Attribute** | `datetime` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | `true`の場合、ユーザはボタンと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +## CSS Shadow Parts + +| Name | Description | +| -------- | ----------------------------------------------------------- | +| `native` | slot されたテキストをラップするネイティブ HTML ボタンです。 | + +## Slots + +| Name | Description | +| ------------- | -------------------------------------------- | +| `date-target` | 日付ボタンの内側に表示されるコンテンツです。 | +| `time-target` | 時刻ボタンの内側に表示される内容。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/datetime.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/datetime.md new file mode 100644 index 00000000000..96f737261bf --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/datetime.md @@ -0,0 +1,381 @@ +--- +title: 'ion-datetime' +demoUrl: '/docs/demos/api/datetime/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/datetime/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-datetime: Ionic API Input for Datetime Format Picker + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### cancelText + +| | | +| --------------- | -------------------------------------------------- | +| **Description** | ピッカーのキャンセルボタンに表示するテキストです。 | +| **Attribute** | `cancel-text` | +| **Type** | `string` | +| **Default** | `'Cancel'` | + +### clearText + +| | | +| --------------- | ----------------------------------------------- | +| **Description** | ピッカーの"Clear"ボタンに表示するテキストです。 | +| **Attribute** | `clear-text` | +| **Type** | `string` | +| **Default** | `'Clear'` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `'primary'` | + +### dayValues + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | 選択可能な日のリストを作成するために使用する値です。デフォルトでは、指定した月のすべての曜日が表示されます。しかし、表示する曜日を正確に制御するために、`dayValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。配列の day が 2 月の`31`のように選択した月にとって無効な数字であっても、選択した月にとって有効でない日は正しく表示されないことに注意してください。 | +| **Attribute** | `day-values` | +| **Type** | `number \| number[] \| string \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | ------------------------------------------------------------ | +| **Description** | `true`の場合、ユーザは datetime を操作することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### doneText + +| | | +| --------------- | -------------------------------------------- | +| **Description** | ピッカーの "Done "ボタンに表示するテキスト。 | +| **Attribute** | `done-text` | +| **Type** | `string` | +| **Default** | `'Done'` | + +### firstDayOfWeek + +| | | +| --------------- | ---------------------------------------------------------------------------------------- | +| **Description** | ion-datetime`に使用する週の最初の曜日を指定します。デフォルト値は `0` で、日曜日を表す。 | +| **Attribute** | `first-day-of-week` | +| **Type** | `number` | +| **Default** | `0` | + +### formatOptions + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 日付と時刻のフォーマットオプション。それぞれ[Intl.DateTimeFormatOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options)型です。 | +| **Attribute** | `format-options` | +| **Type** | `undefined \| { date: DateTimeFormatOptions; time?: DateTimeFormatOptions \| undefined; } \| { date?: DateTimeFormatOptions \| undefined; time: DateTimeFormatOptions; }` | +| **Default** | `undefined` | + +### highlightedDates + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 特定の日付にカスタムテキストと背景色を適用するために使用します。 ISO 文字列と色を含むオブジェクトの配列、または ISO 文字列を受け取って色を返すコールバックのいずれかを指定します。 preferWheel="false"`を持つ `date`、`date-time`、`time-date` のプレゼンテーションにのみ適用されます。 | +| **Attribute** | `highlighted-dates` | +| **Type** | `((dateIsoString: string) => DatetimeHighlightStyle \| undefined) \| DatetimeHighlight[] \| undefined` | +| **Default** | `undefined` | + +### hourCycle + +| | | +| --------------- | ------------------------------------------------------------------------------------------------- | +| **Description** | ion-datetime`の時間周期を指定します。値が設定されていない場合、現在のロケールによって指定される。 | +| **Attribute** | `hour-cycle` | +| **Type** | `"h11" \| "h12" \| "h23" \| "h24" \| undefined` | +| **Default** | `undefined` | + +### hourValues + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 選択可能な時間のリストを作成するために使用される値です。デフォルトでは、24 時間制の場合は `0` から `23` まで、12 時間制の場合は `1` から `12` までの時間帯が設定されます。しかし、表示する時間を正確に制御するために、`hourValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を指定することができます。 | +| **Attribute** | `hour-values` | +| **Type** | `number \| number[] \| string \| undefined` | +| **Default** | `undefined` | + +### isDateEnabled + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 個々の日付(暦日)が有効か無効かを返します。 `true`の場合、その日は有効/対話型になる。もし `false` ならば、その日は無効/非インタラクティブです。 この関数は、指定された日の ISO 8601 の日付文字列を受け取ります。デフォルトでは、すべての曜日が有効になります。開発者はこの関数を使用して、特定の日を無効にするカスタムロジックを記述することができます。 この関数は、レンダリングされたカレンダーの各日、前月、当月、翌月に対して呼び出されます。カスタム実装は、ジャンクを避けるためにパフォーマンスを最適化する必要があります。 | +| **Attribute** | `is-date-enabled` | +| **Type** | `((dateIsoString: string) => boolean) \| undefined` | +| **Default** | `undefined` | + +### locale + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ion-datetime`に使用するロケールを指定します。これは月と日の名前のフォーマットに影響します。`"default"`の値は、あなたのデバイスが設定するデフォルトのロケールを指します。 | +| **Attribute** | `locale` | +| **Type** | `string` | +| **Default** | `'default'` | + +### max + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 許容される最大の datetime を指定します。値は、[ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) の `1996-12-19` に従った日付文字列である必要があります。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最大で`1994`のような年号を指定することができます。デフォルトはこの年の末日です。 | +| **Attribute** | `max` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### min + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 許容される最小の datetime。値は [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime) に従った日付文字列でなければならず、例えば `1996-12-19` のようなものです。このフォーマットは、正確な日付時刻を指定する必要はありません。例えば、最小値は`1994`のような年号だけでいいです。デフォルトは、今日から 100 年前の年頭です。 | +| **Attribute** | `min` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### minuteValues + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 選択可能な分数のリストを作成するために使用される値です。デフォルトでは、分数は `0` から `59` までの範囲です。しかし、表示する分を正確に制御するために、`minuteValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、分表示を 15 分ごとに行う場合は、 `minuteValues="0,15,30,45"` と入力することになります。 | +| **Attribute** | `minute-values` | +| **Type** | `number \| number[] \| string \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### monthValues + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 選択可能な月のリストを作成するために使用する値。デフォルトでは、月の値は `1` から `12` までの範囲です。しかし、どの月を表示するかを正確に制御するために、`monthValues` には数値、数値の配列、またはコンマで区切られた数値の文字列を取ることができます。例えば、夏の月だけを表示する場合、この入力値は `monthValues="6,7,8"` となります。つまり、1 月の値は `1` であり、12 月の値は `12` です。 | +| **Attribute** | `month-values` | +| **Type** | `number \| number[] \| string \| undefined` | +| **Default** | `undefined` | + +### multiple + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、複数の日付を一度に選択することができる。presentation="date"`と `preferWheel="false"` にのみ適用される。 | +| **Attribute** | `multiple` | +| **Type** | `boolean` | +| **Default** | `false` | + +### name + +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | フォームデータとともに送信されるコントロールの名前。 | +| **Attribute** | `name` | +| **Type** | `string` | +| **Default** | `this.inputId` | + +### preferWheel + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、可能な限りカレンダーグリッドの代わりにホイールピッカーが表示されます。もし `false` ならば、可能な限りホイールピッカーの代わりにカレンダーグリッドがレンダリングされます。 ホイールピッカーは、`presentation`が以下の値の場合、グリッドの代わりにレンダリングすることができます：`presentation`が `"date"`, `"date-time"`, または `"time-date"`. ホイールピッカーは、`preferWheel`の値に関係なく、`presentation`が次の値のいずれかである場合に常にレンダリングされます：`"time"`, `"month"`, `"month-year"`, または `"year"`. | +| **Attribute** | `prefer-wheel` | +| **Type** | `boolean` | +| **Default** | `false` | + +### presentation + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | どの値を選択するか。`"date"`はカレンダーピッカーを表示し、月、日、年を選択します。`"time"`は時間ピッカーを表示し、時、分、そして（オプションで）AM/PM を選択します。`"date-time"`は、日付ピッカーを最初に、時間ピッカーを次に表示します。"time-date"`は、最初に時間ピッカー、2 番目に日付ピッカーを表示します。 | +| **Attribute** | `presentation` | +| **Type** | `"date" \| "date-time" \| "month" \| "month-year" \| "time" \| "time-date" \| "year"` | +| **Default** | `'date-time'` | + +### readonly + +| | | +| --------------- | --------------------------------------------------------------------- | +| **Description** | true`の場合、日付は正常に表示されるが、選択された日付は変更できない。 | +| **Attribute** | `readonly` | +| **Type** | `boolean` | +| **Default** | `false` | + +### showAdjacentDays + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | If `true`, the datetime calendar displays a six-week (42-day) layout, including days from the previous and next months to fill the grid. These adjacent days are selectable unless disabled. | +| **Attribute** | `show-adjacent-days` | +| **Type** | `boolean` | +| **Default** | `false` | + +### showClearButton + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、`ion-datetime`コンポーネントの下部にあるデフォルトの "Cancel "と "OK "ボタンと一緒に "Clear "ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合、開発者は `button` slot を使用することもできる。カスタムボタンが `button` slot に設定されている場合、デフォルトのボタンはレンダリングされません。 | +| **Attribute** | `show-clear-button` | +| **Type** | `boolean` | +| **Default** | `false` | + +### showDefaultButtons + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、`ion-datetime`コンポーネントの下部にデフォルトの "Cancel" と "OK" ボタンがレンダリングされます。これらのボタンをカスタマイズしたい場合は、`button`slot を使用することもできます。カスタムボタンが `button` slot に設定されている場合、デフォルトのボタンはレンダリングされません。 | +| **Attribute** | `show-default-buttons` | +| **Type** | `boolean` | +| **Default** | `false` | + +### showDefaultTimeLabel + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、`ion-datetime`コンポーネントの時間セレクタにデフォルトの "Time "ラベルがレンダリングされる。このラベルをカスタマイズしたい場合は、`time-label`slot を使用することもできます。 `time-label` slot にカスタムラベルが設定されている場合、デフォルトのラベルはレンダリングされません。 | +| **Attribute** | `show-default-time-label` | +| **Type** | `boolean` | +| **Default** | `true` | + +### showDefaultTitle + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、カレンダーピッカーの上にヘッダーが表示されます。これには、slot されたタイトルと、選択された日付の両方が含まれます。 | +| **Attribute** | `show-default-title` | +| **Type** | `boolean` | +| **Default** | `false` | + +### size + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------- | +| **Description** | cover`の場合、`ion-datetime`はコンテナの全幅を覆うように展開される。`fixed`の場合、`ion-datetime`は固定幅になる。 | +| **Attribute** | `size` | +| **Type** | `"cover" \| "fixed"` | +| **Default** | `'fixed'` | + +### titleSelectedDatesFormatter + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 選択されている日付の数を示すヘッダーテキストをフォーマットするために使用されるコールバック。選択されている日付が 0 あるいは 1 以上の場合にのみ使用されます (つまり、1 の場合は未使用です)。デフォルトでは、ヘッダテキストは "numberOfDates days "に設定されます。 コールバック内から `this` にアクセスする必要がある場合は https://ionicframework.com/docs/troubleshooting/runtime#accessing-this を参照。 | +| **Attribute** | `title-selected-dates-formatter` | +| **Type** | `((selectedDates: string[]) => string) \| undefined` | +| **Default** | `undefined` | + +### value + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------- | +| **Description** | datetime の値を有効な ISO 8601 datetime 文字列として指定します。これは、`multiple="true"`の場合のみ、文字列の配列です。 | +| **Attribute** | `value` | +| **Type** | `null \| string \| string[] \| undefined` | +| **Default** | `undefined` | + +### yearValues + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 選択可能な年のリストを作成するために使用する値。デフォルトでは、年の値は日付の `min` と `max` の間に設定される。しかし、表示する年を正確に制御するために、 `yearValues` 入力には数値、数値の配列、カンマで区切られた数値の文字列を指定することができます。例えば、うるう年と最近のうるう年を表示する場合、この入力の値は `yearValues="2008,2012,2016,2020,2024"` となります。 | +| **Attribute** | `year-values` | +| **Type** | `number \| number[] \| string \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ----------- | ---------------------------------------------------------------------------------------------------------------------------- | +| `ionBlur` | datetime のフォーカスが外れたときに発行されます。 | +| `ionCancel` | datetime の選択がキャンセルされたときに発生します。 | +| `ionChange` | 値(選択された日付)が変更されたときに発行される。 プログラムで `value` プロパティを設定した場合は、このイベントは発生しない。 | +| `ionFocus` | datetime にフォーカスが当たったときに発行されます。 | + +## Methods + +### cancel + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------ | +| **Description** | ionCancel イベントを発行し、オプションで datetime が表示されたポップオーバーまたはモーダルを閉じます。 | +| **Signature** | `cancel(closeOverlay?: boolean) => Promise` | + +### confirm + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 選択された datetime の値を確認し、`value`プロパティを更新し、オプションで datetime が表示されていたポップオーバーまたはモーダルを閉じます。 | +| **Signature** | `confirm(closeOverlay?: boolean) => Promise` | + +### reset + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | datetime の内部状態をリセットするが、値は更新しません。有効な ISO-8601 文字列を渡すと、コンポーネントの状態は指定した日付にリセットされます。値が提供されない場合、内部状態は min、max、today のクランプされた値にリセットされます。 | +| **Signature** | `reset(startDate?: string) => Promise` | + +## CSS Shadow Parts + +| Name | Description | +| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| `calendar-day` | 日付カレンダーの中に日を表示する個々のボタン。 | +| `calendar-day active` | 現在選択されている暦日。 | +| `calendar-day disabled` | 無効になる暦日。 | +| `calendar-day today` | 現在の日を含む暦日。 | +| `month-year-button` | グリッドスタイルレイアウト使用時に月/年ピッカーを開くボタン。 | +| `time-button` | presentation="date-time"`または`"time-date"`のグリッドスタイルレイアウトを使用しているときに、時間ピッカーを開くボタン。 | +| `time-button active` | ピッカーが開いているときのタイムピッカーボタン。 | +| `wheel-item` | ホイールスタイルレイアウトを使用している場合は個々の項目、グリッドスタイルレイアウトを使用している場合は月/年のピッカーに表示されます。 | +| `wheel-item active` | 現在選択されているホイール項目。 | + +## CSS Custom Properties + +| Name | Description | +| --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--background` | datetime コンポーネントの主な背景。 | +| `--background` | datetime コンポーネントの主な背景。 | +| `--background-rgb` | datetime コンポーネントの主な背景を RGB フォーマットで示します。 | +| `--background-rgb` | datetime コンポーネントの主な背景を RGB フォーマットで示します。 | +| `--title-color` | タイトルの文字色です。 | +| `--title-color` | タイトルの文字色です。 | +| `--wheel-fade-background-rgb` | ホイールスタイルレイアウトの場合は非選択項目を覆うグラデーションの色、グリッドスタイルレイアウトの場合は月/年ピッカーの色。255,255,255`のような RGB フォーマットでなければなりません。 | +| `--wheel-fade-background-rgb` | ホイールスタイルレイアウトの場合は非選択項目を覆うグラデーションの色、グリッドスタイルレイアウトの場合は月/年ピッカーの色。255,255,255`のような RGB フォーマットでなければなりません。 | +| `--wheel-highlight-background` | ホイールスタイルレイアウトの場合は選択された項目の下、グリッドスタイルレイアウトの場合は月/年ピッカーのハイライトの背景。 | +| `--wheel-highlight-background` | ホイールスタイルレイアウトの場合は選択された項目の下、グリッドスタイルレイアウトの場合は月/年ピッカーのハイライトの背景。 | +| `--wheel-highlight-border-radius` | ホイールスタイルレイアウトの場合は選択された項目の下、グリッドスタイルレイアウトの場合は月/年ピッカーのハイライトの境界半径。 | +| `--wheel-highlight-border-radius` | ホイールスタイルレイアウトの場合は選択された項目の下、グリッドスタイルレイアウトの場合は月/年ピッカーのハイライトの境界半径。 | + +## Slots + +| Name | Description | +| ------------ | ------------------------------------- | +| `buttons` | datetime のボタンです。 | +| `time-label` | datetime の時間セレクタのラベルです。 | +| `title` | datetime のタイトルです。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/fab-button.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/fab-button.md new file mode 100644 index 00000000000..cd2c426069d --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/fab-button.md @@ -0,0 +1,220 @@ +--- +title: 'ion-fab-button' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Floating Action Button | Ionic FAB Button Icon for Primary Action + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### activated + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | `true`の場合、ファブボタンにクローズアイコンを表示します。 | +| **Attribute** | `activated` | +| **Type** | `boolean` | +| **Default** | `false` | + +### closeIcon + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | クローズアイコンに使用するアイコン名です。ファブボタンが押されたときに表示されます。ファブリストを含むファブ内のメインボタンである場合のみ適用されます。 | +| **Attribute** | `close-icon` | +| **Type** | `string` | +| **Default** | `close` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | ---------------------------------------------------------------- | +| **Description** | `true`の場合、ユーザーはファブボタンを操作することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### download + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 | +| **Attribute** | `download` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### href + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。 | +| **Attribute** | `href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### rel + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。 | +| **Attribute** | `rel` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### routerAnimation + +| | | +| --------------- | ---------------------------------------------------------------------------------------------- | +| **Description** | ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。 | +| **Attribute** | `router-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### routerDirection + +| | | +| --------------- | ------------------------------------------------------------------------------------ | +| **Description** | ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。 | +| **Attribute** | `router-direction` | +| **Type** | `"back" \| "forward" \| "root"` | +| **Default** | `'forward'` | + +### show + +| | | +| --------------- | -------------------------------------------------------------- | +| **Description** | `true`の場合、fab ボタンが fab-list にあるときに表示されます。 | +| **Attribute** | `show` | +| **Type** | `boolean` | +| **Default** | `false` | + +### size + +| | | +| --------------- | ----------------------------------------------------------------------------- | +| **Description** | ボタンの大きさを指定します。ミニファブボタンを作るには、`small`に設定します。 | +| **Attribute** | `size` | +| **Type** | `"small" \| undefined` | +| **Default** | `undefined` | + +### target + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | リンク先の URL を表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. | +| **Attribute** | `target` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### translucent + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、ファブボタンが半透明になります。mode が `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 | +| **Attribute** | `translucent` | +| **Type** | `boolean` | +| **Default** | `false` | + +### type + +| | | +| --------------- | --------------------------------- | +| **Description** | ボタンの種類です。 | +| **Attribute** | `type` | +| **Type** | `"button" \| "reset" \| "submit"` | +| **Default** | `'button'` | + +## Events + +| Name | Description | +| ---------- | ---------------------------------------------------- | +| `ionBlur` | ボタンのフォーカスが外れたときに発行されます。 | +| `ionFocus` | ボタンにフォーカスが当たっているときに発行されます。 | + +## CSS Shadow Parts + +| Name | Description | +| ------------ | ------------------------------------------------------------------------------- | +| `close-icon` | ファブリストを開いたときに表示されるクローズアイコン（ion-icon を使用します）。 | +| `native` | すべての子要素をラップするネイティブ HTML のボタンまたはアンカー要素です。 | + +## CSS Custom Properties + +| Name | Description | +| -------------------------------- | ---------------------------------------------------------------------------------------- | +| `--background` | ボタンの背景 | +| `--background` | ボタンの背景 | +| `--background-activated` | ボタンが押されたときの背景。注意：これを設定すると、Material Design の波紋に干渉します。 | +| `--background-activated` | ボタンが押されたときの背景。注意：これを設定すると、Material Design の波紋に干渉します。 | +| `--background-activated-opacity` | 押されたときのボタンの背景の不透明度 | +| `--background-activated-opacity` | 押されたときのボタンの背景の不透明度 | +| `--background-focused` | タブキーでフォーカスしたときのボタンの背景 | +| `--background-focused` | タブキーでフォーカスしたときのボタンの背景 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのボタンの背景の不透明度 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのボタンの背景の不透明度 | +| `--background-hover` | ホバー時のボタンの背景 | +| `--background-hover` | ホバー時のボタンの背景 | +| `--background-hover-opacity` | ホバー時のボタン背景の不透明度 | +| `--background-hover-opacity` | ホバー時のボタン背景の不透明度 | +| `--border-color` | ボタンのボーダーカラー | +| `--border-color` | ボタンのボーダーカラー | +| `--border-radius` | ボタンの境界半径 | +| `--border-radius` | ボタンの境界半径 | +| `--border-style` | ボタンのボーダースタイル | +| `--border-style` | ボタンのボーダースタイル | +| `--border-width` | ボタンのボーダー幅 | +| `--border-width` | ボタンのボーダー幅 | +| `--box-shadow` | ボタンのボックスシャドウ | +| `--box-shadow` | ボタンのボックスシャドウ | +| `--close-icon-font-size` | クローズアイコンの Font Size | +| `--close-icon-font-size` | クローズアイコンの Font Size | +| `--color` | ボタンの文字色 | +| `--color` | ボタンの文字色 | +| `--color-activated` | ボタンが押されたときの文字色 | +| `--color-activated` | ボタンが押されたときの文字色 | +| `--color-focused` | タブキーでフォーカスしたときのボタンの文字色 | +| `--color-focused` | タブキーでフォーカスしたときのボタンの文字色 | +| `--color-hover` | ホバー時のボタンの文字色 | +| `--color-hover` | ホバー時のボタンの文字色 | +| `--padding-bottom` | ボタンの Bottom Padding | +| `--padding-bottom` | ボタンの Bottom Padding | +| `--padding-end` | ボタンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-end` | ボタンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-start` | ボタンの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-start` | ボタンの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-top` | ボタンの Top Padding | +| `--padding-top` | ボタンの Top Padding | +| `--ripple-color` | ボタンリプルエフェクトの色 | +| `--ripple-color` | ボタンリプルエフェクトの色 | +| `--transition` | ボタンの遷移 | +| `--transition` | ボタンの遷移 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/fab-list.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/fab-list.md new file mode 100644 index 00000000000..1a93c70d2a0 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/fab-list.md @@ -0,0 +1,30 @@ +--- +title: 'ion-fab-list' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### activated + +| | | +| --------------- | -------------------------------------------------------------- | +| **Description** | `true`の場合、ファブリストに全てのファブボタンが表示されます。 | +| **Attribute** | `activated` | +| **Type** | `boolean` | +| **Default** | `false` | + +### side + +| | | +| --------------- | -------------------------------------------------------------------- | +| **Description** | メインファブボタンに対して、ファブリストが表示される側を指定します。 | +| **Attribute** | `side` | +| **Type** | `"bottom" \| "end" \| "start" \| "top"` | +| **Default** | `'bottom'` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/fab.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/fab.md new file mode 100644 index 00000000000..80b58a0af95 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/fab.md @@ -0,0 +1,67 @@ +--- +title: 'ion-fab' +demoUrl: '/docs/demos/api/fab/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/fab/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-fab: Floating Action Button for Android and iOS Ionic Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### activated + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | もし `true` ならば、`ion-fab` 内の `ion-fab-button` とすべての `ion-fab-list` の両方がアクティブになる。つまり、`ion-fab-button`は`close`アイコンになり、`ion-fab-list`は可視化される。 | +| **Attribute** | `activated` | +| **Type** | `boolean` | +| **Default** | `false` | + +### edge + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、`vertical`が`"top"`の場合はヘッダーの端に、`"bottom"`の場合はフッターの端にファブを表示します。 `fixed` slot と一緒に使用する必要があります。 | +| **Attribute** | `edge` | +| **Type** | `boolean` | +| **Default** | `false` | + +### horizontal + +| | | +| --------------- | ------------------------------------------- | +| **Description** | ビューポートでファブを水平に揃える場所。 | +| **Attribute** | `horizontal` | +| **Type** | `"center" \| "end" \| "start" \| undefined` | +| **Default** | `undefined` | + +### vertical + +| | | +| --------------- | -------------------------------------------- | +| **Description** | ビューポートでファブを縦に並べる場所。 | +| **Attribute** | `vertical` | +| **Type** | `"bottom" \| "center" \| "top" \| undefined` | +| **Default** | `undefined` | + +## Methods + +### close + +| | | +| --------------- | ----------------------------------------- | +| **Description** | アクティブな FAB リストコンテナを閉じる。 | +| **Signature** | `close() => Promise` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/footer.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/footer.md new file mode 100644 index 00000000000..624bda8c907 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/footer.md @@ -0,0 +1,45 @@ +--- +title: 'ion-footer' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Page Footer | Ionic App Footer: Wrapper Root Page Component + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### collapse + +| | | +| --------------- | ----------------------------------------------------------------------------- | +| **Description** | フッターに適用されるスクロール効果を記述します。iOS mode でのみ適用されます。 | +| **Attribute** | `collapse` | +| **Type** | `"fade" \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### translucent + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、フッターは半透明になります。mode が `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合のみ適用されます。 注意：フッターの後ろにコンテンツをスクロールさせるためには、コンテンツに `fullscreen` 属性が設定されている必要があります。 | +| **Attribute** | `translucent` | +| **Type** | `boolean` | +| **Default** | `false` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/grid.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/grid.md new file mode 100644 index 00000000000..4236b0d78be --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/grid.md @@ -0,0 +1,48 @@ +--- +title: 'ion-grid' +demoUrl: '/docs/demos/api/grid/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/grid/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Ion-Grid: Display Grids to Build Mobile-First Custom App Layout + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### fixed + +| | | +| --------------- | ------------------------------------------------------------ | +| **Description** | `true`の場合、グリッドの幅は画面サイズに応じた固定幅となる。 | +| **Attribute** | `fixed` | +| **Type** | `boolean` | +| **Default** | `false` | + +## CSS Custom Properties + +| Name | Description | +| ----------------------- | -------------------------------------------- | +| `--ion-grid-padding` | グリッドの Padding | +| `--ion-grid-padding-lg` | LG 画面でのグリッドの Padding | +| `--ion-grid-padding-md` | md 画面におけるグリッドの Padding | +| `--ion-grid-padding-sm` | スマートスクリーンにおけるグリッドの Padding | +| `--ion-grid-padding-xl` | XL 画面でのグリッドの Padding | +| `--ion-grid-padding-xs` | xs 画面での Grid の Padding | +| `--ion-grid-width` | 固定 Grid の幅 | +| `--ion-grid-width-lg` | LG スクリーンで固定された Grid の幅 | +| `--ion-grid-width-md` | md 画面での固定 Grid の幅 | +| `--ion-grid-width-sm` | sm 画面での固定 Grid の幅 | +| `--ion-grid-width-xl` | xl 画面での固定 Grid の幅 | +| `--ion-grid-width-xs` | xs スクリーンで固定された Grid の幅 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/header.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/header.md new file mode 100644 index 00000000000..3ef47694dc4 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/header.md @@ -0,0 +1,45 @@ +--- +title: 'ion-header' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-header: Header Parent Component for Ionic Framework Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### collapse + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ヘッダーに適用されるスクロール効果を記述します。iOS mode でのみ適用されます。 通常、[折りたたみ式ラージタイトル](https://ionicframework.com/docs/api/title#collapsible-large-titles)に使用します。 | +| **Attribute** | `collapse` | +| **Type** | `"condense" \| "fade" \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### translucent + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、ヘッダーは半透明になります。mode が `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 注意：ヘッダーの後ろにコンテンツをスクロールさせるには、コンテンツに `fullscreen` 属性が設定されている必要があります。 | +| **Attribute** | `translucent` | +| **Type** | `boolean` | +| **Default** | `false` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/icon.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/icon.md new file mode 100644 index 00000000000..1e014a7cdb4 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/icon.md @@ -0,0 +1,43 @@ +--- +title: 'ion-icon' +--- + + + ion-icon: Icon Component for Ionic Framework Apps + + + +Icon は、Ioniconsライブラリを通じて利用できるシンプルなコンポーネントで、すべての Ionic Framework アプリケーションにデフォルトでプリパッケージされています。Ionicons のセットから任意のアイコン、またはカスタム SVG を表示するために使用することができます。また、サイズや色などのスタイリングもサポートされています。 + +利用可能なアイコンのリストは ionic.io/ionicons. For more information including styling and custom SVG usage, see the Usage page をご覧ください。 + +## 基本的な使い方 + +import Basic from '@site/static/usage/v8/icon/basic/index.md'; + + + +## アクセシビリティ + +純粋に装飾的なコンテンツであるアイコンは、aria-hidden="true"を持つべきです。これは、アイコンを視覚的に隠すことはできませんが、支援技術からその要素を隠すことができます。 + +```html + +``` + +アイコンがインタラクティブな場合は、aria-labelを追加することで代替テキストを定義する必要があります。 + +```html + +``` + +また、アイコンが説明する他の要素の中にある場合は、その要素に aria-label を付加し、 aria-hidden でアイコンを非表示とします。 + +```html + + + +``` diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/img.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/img.md new file mode 100644 index 00000000000..0407db21e21 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/img.md @@ -0,0 +1,52 @@ +--- +title: 'ion-img' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Img Tag to Lazy Load Images in Viewport | ion-img Tag + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### alt + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | この属性は、画像を説明する代替テキストを定義します。画像の URL が間違っている場合、画像がサポートされている形式の一つでない場合、または画像がまだダウンロードされていない場合、ユーザにはこのテキストが表示されます。 | +| **Attribute** | `alt` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### src + +| | | +| --------------- | ------------------------------------------------- | +| **Description** | 画像の URL。この属性は `` 要素では必須です。 | +| **Attribute** | `src` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ---------------- | -------------------------------------------- | +| `ionError` | img の読み込みに失敗したときに発行されます。 | +| `ionImgDidLoad` | 画像の読み込みが終了したときに発行されます。 | +| `ionImgWillLoad` | img src が設定されたときに発行されます。 | + +## CSS Shadow Parts + +| Name | Description | +| ------- | ------------------- | +| `image` | 内側の `img` 要素。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/infinite-scroll-content.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/infinite-scroll-content.md new file mode 100644 index 00000000000..c6a3a275c8a --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/infinite-scroll-content.md @@ -0,0 +1,28 @@ +--- +title: 'ion-infinite-scroll-content' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### loadingSpinner + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ロード中に表示されるアニメーション SVG スピナーです。 | +| **Attribute** | `loading-spinner` | +| **Type** | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| null \| undefined` | +| **Default** | `undefined` | + +### loadingText + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ロード中に表示するオプションのテキスト。`loadingText`には、文字列としてプレーンテキストまたは HTML のいずれかを指定することができます。通常 HTML 用に予約されている文字を表示するには、エスケープする必要があります。例えば、``は `<Ionic>` になります。詳しくはこちら：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) このプロパティは、カスタム HTML を文字列として受け付けます。デフォルトでは、コンテンツはプレーンテキストとしてパースされます。カスタム HTML を使用するには、Ionic の設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。 | +| **Attribute** | `loading-text` | +| **Type** | `IonicSafeString \| string \| undefined` | +| **Default** | `undefined` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/infinite-scroll.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/infinite-scroll.md new file mode 100644 index 00000000000..66648de10f7 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/infinite-scroll.md @@ -0,0 +1,62 @@ +--- +title: 'ion-infinite-scroll' +demoUrl: '/docs/demos/api/infinite-scroll/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/infinite-scroll/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Infinite Scroller | ion-infinite-scroll Action Component + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### disabled + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、無限スクロールは非表示になり、スクロールイベントリスナーが削除されます。 `true` を設定すると、無限スクロールがスクロール中に新しいデータを積極的に受け取ろうとするのを無効にすることができます。これは、追加できるデータがもうないことが分かっていて、無限スクロールが不要になった場合に有効です。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### position + +| | | +| --------------- | --------------------------------------------------------------------------------- | +| **Description** | 無限スクロール要素の位置を指定します。値は `top` または `bottom` のどちらかです。 | +| **Attribute** | `position` | +| **Type** | `"bottom" \| "top"` | +| **Default** | `'bottom'` | + +### threshold + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | スクロールしたときに `infinite` 出力イベントを呼び出すための、コンテンツの底からの閾値の距離。閾値はパーセントかピクセル単位で指定します。例えば、`10%`という値を使用すると、ユーザがページの下から 10%スクロールしたときに `infinite` 出力イベントが呼び出されるようになります。また、ページの下から 100 ピクセル以内にスクロールした場合には、`100px`という値を使用します。 | +| **Attribute** | `threshold` | +| **Type** | `string` | +| **Default** | `'15%'` | + +## Events + +| Name | Description | +| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ionInfinite` | スクロールが閾値の距離に達したときに発行されます。非同期処理が完了したら、無限ハンドラから無限スクロールの `complete()` メソッドを呼び出す必要があります。 | + +## Methods + +### complete + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 非同期操作が完了したら、`ionInfinite`出力イベントハンドラ内で `complete()` を呼び出します。例えば、AJAX リクエストからデータを受信してデータリストに項目を追加するなど、アプリが非同期処理を実行している間が `loading` 状態です。データの受信と UI の更新が完了したら、このメソッドを呼び出してロードが完了したことを知らせます。このメソッドは、無限スクロールの状態を `loading` から `enabled` へと変更します。 | +| **Signature** | `complete() => Promise` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/input-otp.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/input-otp.md new file mode 100644 index 00000000000..4f069d53f0d --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/input-otp.md @@ -0,0 +1,199 @@ +--- +title: 'ion-input-otp' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### autocapitalize + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプション off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. | +| **Attribute** | `autocapitalize` | +| **Type** | `string` | +| **Default** | `'off'` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | --------------------------------------------------------- | +| **Description** | `true`の場合、ユーザは Input と対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### fill + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | The fill for the input boxes. If `"solid"` the input boxes will have a background. If `"outline"` the input boxes will be transparent with a border. | +| **Attribute** | `fill` | +| **Type** | `"outline" \| "solid" \| undefined` | +| **Default** | `'outline'` | + +### inputmode + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. For numbers (type="number"): "numeric" For text (type="text"): "text" | +| **Attribute** | `inputmode` | +| **Type** | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | +| **Default** | `undefined` | + +### length + +| | | +| --------------- | ------------------------------------- | +| **Description** | The number of input boxes to display. | +| **Attribute** | `length` | +| **Type** | `number` | +| **Default** | `4` | + +### pattern + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | A regex pattern string for allowed characters. Defaults based on type. For numbers (`type="number"`): `"[\p{N}]"` For text (`type="text"`): `"[\p{L}\p{N}]"` | +| **Attribute** | `pattern` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### readonly + +| | | +| --------------- | ------------------------------------------------------ | +| **Description** | `true`の場合、ユーザーは値を変更することができません。 | +| **Attribute** | `readonly` | +| **Type** | `boolean` | +| **Default** | `false` | + +### separators + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Where separators should be shown between input boxes. Can be a comma-separated string or an array of numbers. For example: `"3"` will show a separator after the 3rd input box. `[1,4]` will show a separator after the 1st and 4th input boxes. `"all"` will show a separator between every input box. | +| **Attribute** | `separators` | +| **Type** | `number[] \| string \| undefined` | +| **Default** | `undefined` | + +### shape + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | The shape of the input boxes. If "round" they will have an increased border radius. If "rectangular" they will have no border radius. If "soft" they will have a soft border radius. | +| **Attribute** | `shape` | +| **Type** | `"rectangular" \| "round" \| "soft"` | +| **Default** | `'round'` | + +### size + +| | | +| --------------- | -------------------------------- | +| **Description** | The size of the input boxes. | +| **Attribute** | `size` | +| **Type** | `"large" \| "medium" \| "small"` | +| **Default** | `'medium'` | + +### type + +| | | +| --------------- | --------------------------------------------- | +| **Description** | The type of input allowed in the input boxes. | +| **Attribute** | `type` | +| **Type** | `"number" \| "text"` | +| **Default** | `'number'` | + +### value + +| | | +| --------------- | --------------------------------------- | +| **Description** | The value of the input group. | +| **Attribute** | `value` | +| **Type** | `null \| number \| string \| undefined` | +| **Default** | `''` | + +## Events + +| Name | Description | +| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ionBlur` | Emitted when the input group loses focus. | +| `ionChange` | The `ionChange` event is fired when the user modifies the input's value. Unlike the `ionInput` event, the `ionChange` event is only fired when changes are committed, not as the user types. The `ionChange` event fires when the `` component loses focus after its value has changed. This event will not emit when programmatically setting the `value` property. | +| `ionComplete` | Emitted when all input boxes have been filled with valid values. | +| `ionFocus` | Emitted when the input group has focus. | +| `ionInput` | ionInput` イベントは、ユーザが入力値を変更するたびに発生する。ionChange` イベントとは異なり、 `ionInput` イベントは入力値が変更されるたびに発生する。これは通常、ユーザが入力を行うたびに発生します。 テキスト入力を受け付ける要素(`type=text`, `type=tel`など)の場合、インターフェイスは[`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent)となります。その他の要素の場合、インターフェイスは[`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event)となります。編集時に入力がクリアされる場合、型は `null` となる。 | + +## Methods + +### setFocus + +| | | +| --------------- | ------------------------------------------- | +| **Description** | Sets focus to an input box. | +| **Signature** | `setFocus(index?: number) => Promise` | + +## CSS Custom Properties + +| Name | Description | +| --------------------------- | -------------------------------------------------------------------------------------------------------------- | +| `--background` | Background color of the input boxes | +| `--background` | Background color of the input boxes | +| `--border-color` | Border color of the input boxes | +| `--border-color` | Border color of the input boxes | +| `--border-radius` | Border radius of the input boxes | +| `--border-radius` | Border radius of the input boxes | +| `--border-width` | Border width of the input boxes | +| `--border-width` | Border width of the input boxes | +| `--color` | Text color of the input | +| `--color` | Text color of the input | +| `--height` | Height of input boxes | +| `--height` | Height of input boxes | +| `--highlight-color-focused` | フォーカスされたときの入力のハイライトの色 | +| `--highlight-color-focused` | フォーカスされたときの入力のハイライトの色 | +| `--highlight-color-invalid` | 入力が無効な場合のハイライトの色 | +| `--highlight-color-invalid` | 入力が無効な場合のハイライトの色 | +| `--highlight-color-valid` | 有効時の入力のハイライトの色 | +| `--highlight-color-valid` | 有効時の入力のハイライトの色 | +| `--margin-bottom` | Bottom margin of the input group | +| `--margin-bottom` | Bottom margin of the input group | +| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the input group | +| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the input group | +| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the input group | +| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the input group | +| `--margin-top` | Top margin of the input group | +| `--margin-top` | Top margin of the input group | +| `--min-width` | Minimum width of input boxes | +| `--min-width` | Minimum width of input boxes | +| `--padding-bottom` | Bottom padding of the input group | +| `--padding-bottom` | Bottom padding of the input group | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input group | +| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input group | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input group | +| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input group | +| `--padding-top` | Top padding of the input group | +| `--padding-top` | Top padding of the input group | +| `--separator-border-radius` | Border radius of the separator between boxes | +| `--separator-border-radius` | Border radius of the separator between boxes | +| `--separator-color` | Color of the separator between boxes | +| `--separator-color` | Color of the separator between boxes | +| `--separator-height` | Height of the separator between boxes | +| `--separator-height` | Height of the separator between boxes | +| `--separator-width` | Width of the separator between boxes | +| `--separator-width` | Width of the separator between boxes | +| `--width` | Width of input boxes | +| `--width` | Width of input boxes | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/input-password-toggle.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/input-password-toggle.md new file mode 100644 index 00000000000..e32f0f46cf8 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/input-password-toggle.md @@ -0,0 +1,48 @@ +--- +title: 'ion-input-password-toggle' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### hideIcon + +| | | +| --------------- | --------------------------------------------------------------------------------------- | +| **Description** | パスワードの非表示を表すアイコン。設定されていない場合、"eyeOff "アイコンが使用される。 | +| **Attribute** | `hide-icon` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### showIcon + +| | | +| --------------- | --------------------------------------------------------------------------------- | +| **Description** | パスワードを示すアイコン。設定されていない場合は、"eye"のアイコンが使用されます。 | +| **Attribute** | `show-icon` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/input.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/input.md new file mode 100644 index 00000000000..7b2ae3221e9 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/input.md @@ -0,0 +1,411 @@ +--- +title: 'ion-input' +demoUrl: '/docs/demos/api/input/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/input/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-input: Custom Input Value Type Styling and CSS Properties + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### autocapitalize + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプション off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. | +| **Attribute** | `autocapitalize` | +| **Type** | `string` | +| **Default** | `'off'` | + +### autocomplete + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | コントロールの値が、ブラウザによって自動的に補完されるかどうかを示します。 | +| **Attribute** | `autocomplete` | +| **Type** | `"name" \| "email" \| "tel" \| "url" \| "on" \| "off" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "photo"` | +| **Default** | `'off'` | + +### autocorrect + +| | | +| --------------- | ----------------------------------------------------------------------- | +| **Description** | ユーザーがテキスト値を入力/編集する際に、自動補正を有効にするかどうか。 | +| **Attribute** | `autocorrect` | +| **Type** | `"off" \| "on"` | +| **Default** | `'off'` | + +### autofocus + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ネイティブの入力要素に [`autofocus` 属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) を設定します。 ページロード時に要素がフォーカスされるには、これだけでは不十分かもしれません。詳しくは[managing focus](/docs/developing/managing-focus)を参照してください。 | +| **Attribute** | `autofocus` | +| **Type** | `boolean` | +| **Default** | `false` | + +### clearInput + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、値があるときに Input にクリアアイコンが表示されます。これをクリックすると、入力がクリアされます。 | +| **Attribute** | `clear-input` | +| **Type** | `boolean` | +| **Default** | `false` | + +### clearInputIcon + +| | | +| --------------- | ------------------------------------------------------------------------------------------ | +| **Description** | クリアボタンに使用するアイコン。clearInput`が`true` に設定されている場合にのみ適用される。 | +| **Attribute** | `clear-input-icon` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### clearOnEdit + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、編集時にフォーカスされた後、値がクリアされる。デフォルトは `type` が `"password"` のとき `true` で、それ以外のときは `false` です。 | +| **Attribute** | `clear-on-edit` | +| **Type** | `boolean \| undefined` | +| **Default** | `undefined` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### counter + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。カウンターを正しく計算するために、開発者は `maxlength` プロパティも設定する必要があります。 | +| **Attribute** | `counter` | +| **Type** | `boolean` | +| **Default** | `false` | + +### counterFormatter + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | カウンターのテキストをフォーマットするためのコールバック。デフォルトでは、カウンタのテキストは "itemLength / maxLength" に設定される。 コールバック内から `this` にアクセスする必要がある場合は https://ionicframework.com/docs/troubleshooting/runtime#accessing-this を参照。 | +| **Attribute** | `counter-formatter` | +| **Type** | `((inputLength: number, maxLength: number) => string) \| undefined` | +| **Default** | `undefined` | + +### debounce + +| | | +| --------------- | -------------------------------------------------------------------------------------- | +| **Description** | キーを押すたびに `ionInput` イベントが発生するまでの待ち時間をミリ秒単位で設定します。 | +| **Attribute** | `debounce` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | --------------------------------------------------------- | +| **Description** | `true`の場合、ユーザは Input と対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### enterkeyhint + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | +| **Attribute** | `enterkeyhint` | +| **Type** | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | +| **Default** | `undefined` | + +### errorText + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | Input の下に配置され、エラーが検出されたときに表示されるテキストです。 | +| **Attribute** | `error-text` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### fill + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アイテムの塗りつぶし。もし `"solid"` ならば、アイテムは背景を持つようになります。もし `"outline"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。 | +| **Attribute** | `fill` | +| **Type** | `"outline" \| "solid" \| undefined` | +| **Default** | `undefined` | + +### helperText + +| | | +| --------------- | ---------------------------------------------------------------------------- | +| **Description** | Input の下に配置され、エラーが検出されなかった場合に表示されるテキストです。 | +| **Attribute** | `helper-text` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### inputmode + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | +| **Attribute** | `inputmode` | +| **Type** | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | +| **Default** | `undefined` | + +### label + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 入力に関連付けられた可視ラベル。 プレーンテキストのラベルをレンダリングする必要がある場合に使用する。 両方が使用されている場合、`label` プロパティが `label` スロットよりも優先される。 | +| **Attribute** | `label` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### labelPlacement + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 入力に対してラベルを配置する位置。`"start"`：ラベルは LTR では入力の左側に、RTL では右側に表示されます。`"end"`：ラベルは LTR では入力の右側、RTL では左側に表示されます。"floating"`：`"floating"`：ラベルは、入力にフォーカスが当たっているときや、入力に値があるときは小さく表示され、入力の上に表示されます。それ以外の場合は、入力の上に表示されます。`"スタック(stacked)"`：入力がぼやけた状態や値がない場合でも、ラベルは小さく表示され、入力の上に表示されます。`"fixed"`：ラベルの幅が固定される以外は、`"start"`と同じ動作になります。長いテキストは省略記号（"..."）で切り捨てられます。 | +| **Attribute** | `label-placement` | +| **Type** | `"end" \| "fixed" \| "floating" \| "stacked" \| "start"` | +| **Default** | `'start'` | + +### max + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | 最大値で、その最小値（min 属性）より小さくてはなりません。 | +| **Attribute** | `max` | +| **Type** | `number \| string \| undefined` | +| **Default** | `undefined` | + +### maxlength + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | type 属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最大文字数を指定します。 | +| **Attribute** | `maxlength` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### min + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | 最小値で、その最大値（max 属性）より大きくてはなりません。 | +| **Attribute** | `min` | +| **Type** | `number \| string \| undefined` | +| **Default** | `undefined` | + +### minlength + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | type 属性の値が `text`, `email`, `search`, `password`, `tel`, または `url` の場合、この属性はユーザーが入力できる最小文字数を指定します。 | +| **Attribute** | `minlength` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### multiple + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、ユーザは複数の値を入力することができる。この属性は、type 属性が `"email"` に設定されている場合に適用され、それ以外の場合は無視される。 | +| **Attribute** | `multiple` | +| **Type** | `boolean \| undefined` | +| **Default** | `undefined` | + +### name + +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | フォームデータとともに送信されるコントロールの名前。 | +| **Attribute** | `name` | +| **Type** | `string` | +| **Default** | `this.inputId` | + +### pattern + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 値をチェックするための正規表現。パターンは、部分的なものだけでなく、値全体にマッチする必要があります。title 属性を使って、ユーザーを助けるためにパターンを説明します。この属性は、type 属性の値が `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, または `"password"` であるときに適用され、それ以外のときは無視されます。type 属性が `"date"` の場合、`pattern` は `"date"` Input タイプをネイティブにサポートしないブラウザでのみ使用されます。詳しくは https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date を参照してください。 | +| **Attribute** | `pattern` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### placeholder + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Input が値を持つ前に表示される指示テキスト。このプロパティは、`type`プロパティが `"email"`, `"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, または `"url"` に設定されている場合にのみ適用され、それ以外は無視されます。 | +| **Attribute** | `placeholder` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### readonly + +| | | +| --------------- | ------------------------------------------------------ | +| **Description** | `true`の場合、ユーザーは値を変更することができません。 | +| **Attribute** | `readonly` | +| **Type** | `boolean` | +| **Default** | `false` | + +### required + +| | | +| --------------- | -------------------------------------------------------------------------- | +| **Description** | `true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。 | +| **Attribute** | `required` | +| **Type** | `boolean` | +| **Default** | `false` | + +### shape + +| | | +| --------------- | --------------------------------------------------------------------- | +| **Description** | 入力の形状を指定します。"round"の場合、境界線の半径が大きくなります。 | +| **Attribute** | `shape` | +| **Type** | `"round" \| undefined` | +| **Default** | `undefined` | + +### spellcheck + +| | | +| --------------- | ---------------------------------------------------------------- | +| **Description** | `true`の場合、その要素のスペルチェックと文法チェックが行われる。 | +| **Attribute** | `spellcheck` | +| **Type** | `boolean` | +| **Default** | `false` | + +### step + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | min 属性、max 属性と連携して、値を設定する際の増分を制限することができます。設定可能な値は以下の通りです。any"`または正の浮動小数点数。 | +| **Attribute** | `step` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### type + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 表示するコントロールの種類を指定します。デフォルトのタイプはテキストです。 | +| **Attribute** | `type` | +| **Type** | `"date" \| "datetime-local" \| "email" \| "month" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url" \| "week"` | +| **Default** | `'text'` | + +### value + +| | | +| --------------- | --------------------------------------- | +| **Description** | 入力された値です。 | +| **Attribute** | `value` | +| **Type** | `null \| number \| string \| undefined` | +| **Default** | `''` | + +## Events + +| Name | Description | +| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ionBlur` | Input のフォーカスが外れたときに発行されます。 | +| `ionChange` | ionChange` イベントは、ユーザが入力値を変更したときに発生する。ionInput` イベントとは異なり、`ionChange` イベントは変更がコミットされたときにのみ発生する。 ユーザが明示的に変更をコミットしたとき (例えば、`` の日付ピッカーから日付を選択したり、"Enter" キーを押したりしたときなど)。- 値が変更された後、要素がフォーカスを失ったとき。 このイベントは、プログラムで `value` プロパティを設定する場合には発生しません。 | +| `ionFocus` | Input にフォーカスが当たったときに発行されます。 | +| `ionInput` | ionInput` イベントは、ユーザが入力値を変更するたびに発生する。ionChange` イベントとは異なり、 `ionInput` イベントは入力値が変更されるたびに発生する。これは通常、ユーザが入力を行うたびに発生します。 テキスト入力を受け付ける要素(`type=text`, `type=tel`など)の場合、インターフェイスは[`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent)となります。その他の要素の場合、インターフェイスは[`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event)となります。編集時に入力がクリアされる場合、型は `null` となる。 | + +## Methods + +### getInputElement + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | 要素の内部で使用されているネイティブの `` 要素を返します。 | +| **Signature** | `getInputElement() => Promise` | + +### setFocus + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ion-input`のネイティブ`input`にフォーカスを設定する。グローバルな`input.focus()`の代わりにこのメソッドを使用する。 ページ入力時に入力にフォーカスを当てたい場合は、`ionViewDidEnter()`ライフサイクルメソッド内で`setFocus()`を呼び出す必要がある。 オーバーレイが表示されたときに入力にフォーカスを当てたい開発者は、`didPresent`が解決した後に`setFocus` を呼び出してください。 詳細については、[managing focus](/docs/developing/managing-focus)を参照してください。 | +| **Signature** | `setFocus() => Promise` | + +## CSS Custom Properties + +| Name | Description | +| --------------------------- | -------------------------------------------------------------------------------------- | +| `--background` | Input の背景 | +| `--background` | Input の背景 | +| `--border-color` | ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の Input 下のボーダーの色 | +| `--border-color` | ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の Input 下のボーダーの色 | +| `--border-radius` | 入力の半径。fill="outline "を使う場合、半径が大きいと表示が不 均一になることがある。 | +| `--border-radius` | 入力の半径。fill="outline "を使う場合、半径が大きいと表示が不 均一になることがある。 | +| `--border-style` | ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーのスタイル | +| `--border-style` | ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーのスタイル | +| `--border-width` | ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーの幅 | +| `--border-width` | ヘルパーテキスト、エラーテキスト、カウンターを使用する場合の入力下のボーダーの幅 | +| `--color` | Input のテキストの色 | +| `--color` | Input のテキストの色 | +| `--highlight-color-focused` | フォーカスされたときの入力のハイライトの色 | +| `--highlight-color-focused` | フォーカスされたときの入力のハイライトの色 | +| `--highlight-color-invalid` | 入力が無効な場合のハイライトの色 | +| `--highlight-color-invalid` | 入力が無効な場合のハイライトの色 | +| `--highlight-color-valid` | 有効時の入力のハイライトの色 | +| `--highlight-color-valid` | 有効時の入力のハイライトの色 | +| `--highlight-height` | 入力のハイライトの高さ。md モードにのみ適用される。 | +| `--highlight-height` | 入力のハイライトの高さ。md モードにのみ適用される。 | +| `--padding-bottom` | Input の Bottom Padding | +| `--padding-bottom` | Input の Bottom Padding | +| `--padding-end` | 入力の方向が左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-end` | 入力の方向が左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-start` | 入力の方向が左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-start` | 入力の方向が左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-top` | Input の Top Padding | +| `--padding-top` | Input の Top Padding | +| `--placeholder-color` | Input の Placeholder テキストの色 | +| `--placeholder-color` | Input の Placeholder テキストの色 | +| `--placeholder-font-style` | Input の Placeholder テキストの Font Style | +| `--placeholder-font-style` | Input の Placeholder テキストの Font Style | +| `--placeholder-font-weight` | Input の Placeholder テキストの Font Weight | +| `--placeholder-font-weight` | Input の Placeholder テキストの Font Weight | +| `--placeholder-opacity` | Input の Placeholder テキストの不透明度 | +| `--placeholder-opacity` | Input の Placeholder テキストの不透明度 | + +## Slots + +| Name | Description | +| ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `end` | 入力の後端に表示する内容。(実験的) | +| `label` | 入力に関連付けるラベルテキスト。labelPlacement`プロパティを使用すると、入力に対してラベルを配置する位置を制御することができる。ラベルをカスタム HTML でレンダリングする必要がある場合に使用します。(EXPERIMENTAL) | +| `start` | 入力の最先端に表示するコンテンツ。(実験的) | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/item-divider.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/item-divider.md new file mode 100644 index 00000000000..071c25ae2d4 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/item-divider.md @@ -0,0 +1,80 @@ +--- +title: 'ion-item-divider' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Item Divider | List Item Divider Block Element for Ionic Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### sticky + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`に設定すると、アイテムディバイダーがビューポートの上部に到達しても、次の `ion-item-divider` がそれを置き換えるまで表示されたままになります。 この機能は `position:sticky` に依存しています: https://caniuse.com/#feat=css-sticky | +| **Attribute** | `sticky` | +| **Type** | `boolean` | +| **Default** | `false` | + +## CSS Custom Properties + +| Name | Description | +| ------------------------ | ------------------------------------------------------------------------------------------------------ | +| `--background` | アイテムディバイダーの背景 | +| `--background` | アイテムディバイダーの背景 | +| `--color` | アイテムディバイダーの色 | +| `--color` | アイテムディバイダーの色 | +| `--inner-padding-bottom` | アイテムディバイダーの Bottom Inner Padding | +| `--inner-padding-bottom` | アイテムディバイダーの Bottom Inner Padding | +| `--inner-padding-end` | アイテムディバイダーの End Inner Padding | +| `--inner-padding-end` | アイテムディバイダーの End Inner Padding | +| `--inner-padding-start` | アイテムディバイダーの Start Inner Padding | +| `--inner-padding-start` | アイテムディバイダーの Start Inner Padding | +| `--inner-padding-top` | アイテムディバイダーの Top Inner Padding | +| `--inner-padding-top` | アイテムディバイダーの Top Inner Padding | +| `--padding-bottom` | アイテムディバイダーの Bottom Padding | +| `--padding-bottom` | アイテムディバイダーの Bottom Padding | +| `--padding-end` | アイテムディバイダーの方向が左から右の場合は Right Padding、右から左の場合は Left Padding | +| `--padding-end` | アイテムディバイダーの方向が左から右の場合は Right Padding、右から左の場合は Left Padding | +| `--padding-start` | アイテムディバイダーの方向が左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-start` | アイテムディバイダーの方向が左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-top` | アイテムディバイダーの Top Padding | +| `--padding-top` | アイテムディバイダーの Top Padding | + +## Slots + +| Name | Description | +| ------- | ------------------------------------------------------------------------------- | +| `` | slot がない状態で提供される場合、コンテンツは名前付き slot の間に配置されます。 | +| `end` | コンテンツは、LTR では仕切り文字の右側に、RTL では左側に配置されます。 | +| `start` | コンテンツは、LTR では仕切り文字の左側に、RTL では右側に配置されます。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/item-group.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/item-group.md new file mode 100644 index 00000000000..93c5f266666 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/item-group.md @@ -0,0 +1,16 @@ +--- +title: 'ion-item-group' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-item-group: Group Items to Divide into Multiple Sections + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/item-option.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/item-option.md new file mode 100644 index 00000000000..9c0fce2a9d0 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/item-option.md @@ -0,0 +1,127 @@ +--- +title: 'ion-item-option' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-item-option: Option Button and Properties for Ionic Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | `true`の場合、ユーザーはアイテムオプションと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### download + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 | +| **Attribute** | `download` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### expandable + +| | | +| --------------- | ------------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、オプションは利用可能な幅を占めるように展開し、他のオプションをカバーします。 | +| **Attribute** | `expandable` | +| **Type** | `boolean` | +| **Default** | `false` | + +### href + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。 | +| **Attribute** | `href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### rel + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。 | +| **Attribute** | `rel` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### target + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | リンク先の URL を表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. | +| **Attribute** | `target` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### type + +| | | +| --------------- | --------------------------------- | +| **Description** | ボタンの種類です。 | +| **Attribute** | `type` | +| **Type** | `"button" \| "reset" \| "submit"` | +| **Default** | `'button'` | + +## CSS Shadow Parts + +| Name | Description | +| -------- | -------------------------------------------------------------------------- | +| `native` | すべての子要素をラップするネイティブ HTML のボタンまたはアンカー要素です。 | + +## CSS Custom Properties + +| Name | Description | +| -------------- | -------------------------- | +| `--background` | アイテムオプションの背景 | +| `--background` | アイテムオプションの背景 | +| `--color` | アイテムオプションのカラー | +| `--color` | アイテムオプションのカラー | + +## Slots + +| Name | Description | +| ----------- | ------------------------------------------------------------------------------- | +| `` | slot がない状態で提供される場合、コンテンツは名前付き slot の間に配置されます。 | +| `bottom` | コンテンツは、オプションテキストの下に配置されます。 | +| `end` | コンテンツは、LTR ではオプションテキストの右側に、RTL では左側に配置されます。 | +| `icon-only` | テキストを持たないオプションのアイコンに使用されるべきです。 | +| `start` | コンテンツは、LTR ではオプションテキストの左側に、RTL では右側に配置されます。 | +| `top` | オプションテキストの上にコンテンツが配置されます。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/item-options.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/item-options.md new file mode 100644 index 00000000000..852583d9ba7 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/item-options.md @@ -0,0 +1,33 @@ +--- +title: 'ion-item-options' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-item-options: Option Button Components for Ionic Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### side + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | オプションボタンを配置する側を指定します。指定可能な値。start"`と`"end"`.複数の `ion-item-options` がある場合は、それぞれにサイドを指定する必要があります。 | +| **Attribute** | `side` | +| **Type** | `"end" \| "start"` | +| **Default** | `'end'` | + +## Events + +| Name | Description | +| ---------- | -------------------------------------------------- | +| `ionSwipe` | アイテムが完全にスワイプされたときに発行されます。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/item-sliding.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/item-sliding.md new file mode 100644 index 00000000000..4460c910dfa --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/item-sliding.md @@ -0,0 +1,70 @@ +--- +title: 'ion-item-sliding' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Slide Buttons | Slide Right to Left with ion-item-sliding + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### disabled + +| | | +| --------------- | -------------------------------------------------------------------- | +| **Description** | `true`の場合、ユーザーはスライドアイテムを操作することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +## Events + +| Name | Description | +| --------- | ------------------------------------------ | +| `ionDrag` | スライド位置が変化したときに発行されます。 | + +## Methods + +### close + +| | | +| --------------- | ---------------------------------------------------------------------------------------- | +| **Description** | スライドしているアイテムを閉じる。アイテムは[リスト](./list)からも閉じることができます。 | +| **Signature** | `close() => Promise` | + +### closeOpened + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------- | +| **Description** | リスト内のスライドアイテムをすべて閉じます。アイテムは、[リスト](./list)からも閉じることができます。 | +| **Signature** | `closeOpened() => Promise` | + +### getOpenAmount + +| | | +| --------------- | -------------------------------------------------- | +| **Description** | アイテムが開いている量をピクセル単位で取得します。 | +| **Signature** | `getOpenAmount() => Promise` | + +### getSlidingRatio + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | オプションの幅と比較した、アイテムのオープン量の比率を取得します。返された数値が正の場合、右側のオプションが開いていることになります。返された数値が負の場合、左側のオプションが開いています。数値の絶対値が 1 より大きい場合、その項目は選択肢の幅より多く開いていることになります。 | +| **Signature** | `getSlidingRatio() => Promise` | + +### open + +| | | +| --------------- | ------------------------------------------------ | +| **Description** | スライド式の項目を開く。 | +| **Signature** | `open(side: Side \| undefined) => Promise` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/item.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/item.md new file mode 100644 index 00000000000..28b3574552e --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/item.md @@ -0,0 +1,230 @@ +--- +title: 'ion-item' +demoUrl: '/docs/demos/api/item/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/item/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-item: Input, Edit, or Delete iOS and Android Item Elements + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### button + +| | | +| --------------- | ------------------------------------------------------------------------ | +| **Description** | `true`の場合、ボタンタグがレンダリングされ、アイテムはタップ可能になる。 | +| **Attribute** | `button` | +| **Type** | `boolean` | +| **Default** | `false` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### detail + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、アイテムに詳細矢印が表示されます。デフォルトは `false` で、`mode` が `ios` で `href` または `button` プロパティが存在する場合のみです。 | +| **Attribute** | `detail` | +| **Type** | `boolean \| undefined` | +| **Default** | `undefined` | + +### detailIcon + +| | | +| --------------- | --------------------------------------------------------------- | +| **Description** | `detail` が `true` に設定されているときに使用するアイコンです。 | +| **Attribute** | `detail-icon` | +| **Type** | `string` | +| **Default** | `chevronForward` | + +### disabled + +| | | +| --------------- | -------------------------------------------------------------- | +| **Description** | `true`の場合、ユーザはそのアイテムと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### download + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 | +| **Attribute** | `download` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### href + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。 | +| **Attribute** | `href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### lines + +| | | +| --------------- | ------------------------------------------ | +| **Description** | アイテムに表示される下枠の表示方法。 | +| **Attribute** | `lines` | +| **Type** | `"full" \| "inset" \| "none" \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### rel + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。 | +| **Attribute** | `rel` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### routerAnimation + +| | | +| --------------- | ---------------------------------------------------------------------------------------------- | +| **Description** | ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。 | +| **Attribute** | `router-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### routerDirection + +| | | +| --------------- | ------------------------------------------------------------------------------------ | +| **Description** | ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。 | +| **Attribute** | `router-direction` | +| **Type** | `"back" \| "forward" \| "root"` | +| **Default** | `'forward'` | + +### target + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | リンク先の URL を表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. | +| **Attribute** | `target` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### type + +| | | +| --------------- | ------------------------------------------------------------------------------ | +| **Description** | ボタンの種類。onclick`または`button`プロパティが存在する場合にのみ使用される。 | +| **Attribute** | `type` | +| **Type** | `"button" \| "reset" \| "submit"` | +| **Default** | `'button'` | + +## CSS Shadow Parts + +| Name | Description | +| ------------- | ----------------------------------------------------------------------------------- | +| `detail-icon` | アイテムのシェブロンアイコンを表示します。detail="true"`のときのみ適用されます。 | +| `native` | すべての子要素をラップするネイティブ HTML のボタン、アンカー、または div 要素です。 | + +## CSS Custom Properties + +| Name | Description | +| -------------------------------- | ------------------------------------------------------------------------------------------------------ | +| `--background` | アイテムの背景 | +| `--background` | アイテムの背景 | +| `--background-activated` | 押されたときのアイテムの背景。注意：これを設定すると、Material Design の波紋に干渉します。 | +| `--background-activated` | 押されたときのアイテムの背景。注意：これを設定すると、Material Design の波紋に干渉します。 | +| `--background-activated-opacity` | 押されたときのアイテム背景の不透明度 | +| `--background-activated-opacity` | 押されたときのアイテム背景の不透明度 | +| `--background-focused` | タブキーでフォーカスしたときのアイテムの背景 | +| `--background-focused` | タブキーでフォーカスしたときのアイテムの背景 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのアイテムの背景の不透明度 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのアイテムの背景の不透明度 | +| `--background-hover` | ホバー時のアイテムの背景 | +| `--background-hover` | ホバー時のアイテムの背景 | +| `--background-hover-opacity` | ホバー時のアイテムの背景の不透明度 | +| `--background-hover-opacity` | ホバー時のアイテムの背景の不透明度 | +| `--border-color` | アイテムの縁取りの色 | +| `--border-color` | アイテムの縁取りの色 | +| `--border-radius` | アイテムの境界線の半径 | +| `--border-radius` | アイテムの境界線の半径 | +| `--border-style` | アイテムの枠のスタイル | +| `--border-style` | アイテムの枠のスタイル | +| `--border-width` | アイテムの枠の幅 | +| `--border-width` | アイテムの枠の幅 | +| `--color` | アイテムのカラー | +| `--color` | アイテムのカラー | +| `--color-activated` | 押したときのアイテムの色 | +| `--color-activated` | 押したときのアイテムの色 | +| `--color-focused` | タブキーでフォーカスしたときのアイテムの色 | +| `--color-focused` | タブキーでフォーカスしたときのアイテムの色 | +| `--color-hover` | ホバー時のアイテムの色 | +| `--color-hover` | ホバー時のアイテムの色 | +| `--detail-icon-color` | アイテム詳細アイコンの色 | +| `--detail-icon-color` | アイテム詳細アイコンの色 | +| `--detail-icon-font-size` | アイテム詳細アイコンの Font Size | +| `--detail-icon-font-size` | アイテム詳細アイコンの Font Size | +| `--detail-icon-opacity` | アイテム詳細アイコンの不透明度 | +| `--detail-icon-opacity` | アイテム詳細アイコンの不透明度 | +| `--inner-border-width` | アイテム内枠の幅 | +| `--inner-border-width` | アイテム内枠の幅 | +| `--inner-box-shadow` | アイテム内側のボックスシャドウ | +| `--inner-box-shadow` | アイテム内側のボックスシャドウ | +| `--inner-padding-bottom` | アイテム内側の Bottom Padding | +| `--inner-padding-bottom` | アイテム内側の Bottom Padding | +| `--inner-padding-end` | 方向が左から右の場合は Right Padding、方向がアイテムの内側の右から左の場合は Left Padding となります。 | +| `--inner-padding-end` | 方向が左から右の場合は Right Padding、方向がアイテムの内側の右から左の場合は Left Padding となります。 | +| `--inner-padding-start` | 方向が左から右の場合は Left Padding、方向が右から左の場合は Right Padding がアイテム内側に入る | +| `--inner-padding-start` | 方向が左から右の場合は Left Padding、方向が右から左の場合は Right Padding がアイテム内側に入る | +| `--inner-padding-top` | アイテム内側の Top Padding | +| `--inner-padding-top` | アイテム内側の Top Padding | +| `--min-height` | アイテムの最小高さ | +| `--min-height` | アイテムの最小高さ | +| `--padding-bottom` | アイテムの Bottom Padding | +| `--padding-bottom` | アイテムの Bottom Padding | +| `--padding-end` | 方向が左から右の場合は Right Padding、方向が右から左の場合は Left Padding で項目を囲む | +| `--padding-end` | 方向が左から右の場合は Right Padding、方向が右から左の場合は Left Padding で項目を囲む | +| `--padding-start` | 方向が左から右の場合は Left Padding、方向が右から左の場合は Right Padding で項目を囲む | +| `--padding-start` | 方向が左から右の場合は Left Padding、方向が右から左の場合は Right Padding で項目を囲む | +| `--padding-top` | アイテムの Top Padding | +| `--padding-top` | アイテムの Top Padding | +| `--ripple-color` | アイテム波及効果の色 | +| `--ripple-color` | アイテム波及効果の色 | +| `--transition` | アイテムの変遷 | +| `--transition` | アイテムの変遷 | + +## Slots + +| Name | Description | +| ------- | ------------------------------------------------------------------------------- | +| `` | slot がない状態で提供される場合、コンテンツは名前付き slot の間に配置されます。 | +| `end` | コンテンツは、LTR ではアイテムテキストの右側に、RTL では左側に配置されます。 | +| `start` | コンテンツは、LTR ではアイテムテキストの左側に、RTL では右側に配置されます。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/label.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/label.md new file mode 100644 index 00000000000..52e07ec3205 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/label.md @@ -0,0 +1,54 @@ +--- +title: 'ion-label' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Item Label Color and Properties for Applications | ion-label + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### position + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | 位置は、ラベルがアイテム内のどこで、どのように動作するかを決定します。 | +| **Attribute** | `position` | +| **Type** | `"fixed" \| "floating" \| "stacked" \| undefined` | +| **Default** | `undefined` | + +## CSS Custom Properties + +| Name | Description | +| --------- | ----------------------------------------------------------------------------------------------- | +| `--color` | ラベルの色。このプロパティは `ion-label` を `ion-item` の内部で使用する場合にのみ利用可能です。 | +| `--color` | ラベルの色。このプロパティは `ion-label` を `ion-item` の内部で使用する場合にのみ利用可能です。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/list-header.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/list-header.md new file mode 100644 index 00000000000..dd17ebbe89e --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/list-header.md @@ -0,0 +1,56 @@ +--- +title: 'ion-list-header' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### lines + +| | | +| --------------- | ------------------------------------------------------ | +| **Description** | リストヘッダーの下辺のボーダーをどのように表示するか。 | +| **Attribute** | `lines` | +| **Type** | `"full" \| "inset" \| "none" \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +## CSS Custom Properties + +| Name | Description | +| ---------------------- | -------------------------------- | +| `--background` | リストヘッダーの背景 | +| `--background` | リストヘッダーの背景 | +| `--border-color` | リストヘッダーボーダーの色 | +| `--border-color` | リストヘッダーボーダーの色 | +| `--border-style` | リストヘッダーボーダーのスタイル | +| `--border-style` | リストヘッダーボーダーのスタイル | +| `--border-width` | リストヘッダー枠の幅 | +| `--border-width` | リストヘッダー枠の幅 | +| `--color` | リストヘッダーテキストの色 | +| `--color` | リストヘッダーテキストの色 | +| `--inner-border-width` | リストヘッダー内枠の幅 | +| `--inner-border-width` | リストヘッダー内枠の幅 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/list.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/list.md new file mode 100644 index 00000000000..59ac3ee1059 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/list.md @@ -0,0 +1,56 @@ +--- +title: 'ion-list' +demoUrl: '/docs/demos/api/list/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/list/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-list: Item List View Component for iOS and Android Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### inset + +| | | +| --------------- | ------------------------------------------------------ | +| **Description** | `true`の場合、リストの周囲に余白ができ、角が丸くなる。 | +| **Attribute** | `inset` | +| **Type** | `boolean` | +| **Default** | `false` | + +### lines + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | すべてのアイテムで、下のボーダーをどのように表示させるか。 | +| **Attribute** | `lines` | +| **Type** | `"full" \| "inset" \| "none" \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +## Methods + +### closeSlidingItems + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | リスト内で `ion-item-sliding` が使用されている場合、このメソッドは開いているスライドアイテムを閉じる。 実際に `ion-item-sliding` が閉じられた場合は `true` を返します。 | +| **Signature** | `closeSlidingItems() => Promise` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/loading.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/loading.md new file mode 100644 index 00000000000..5c852fb6c73 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/loading.md @@ -0,0 +1,223 @@ +--- +title: 'ion-loading' +demoUrl: '/docs/demos/api/loading/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/loading/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Loading | Application Loading Indicator Overlay | ion-loading + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### animated + +| | | +| --------------- | -------------------------------------------------------------- | +| **Description** | `true`の場合、ロードインジケータをアニメーションで表示します。 | +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `true` | + +### backdropDismiss + +| | | +| --------------- | ---------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、バックドロップがクリックされたときにローディングインジケータが解除される。 | +| **Attribute** | `backdrop-dismiss` | +| **Type** | `boolean` | +| **Default** | `false` | + +### cssClass + +| | | +| --------------- | --------------------------------------------------------------------------------------------------- | +| **Description** | カスタム CSS に適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 | +| **Attribute** | `css-class` | +| **Type** | `string \| string[] \| undefined` | +| **Default** | `undefined` | + +### duration + +| | | +| --------------- | ------------------------------------------------------------ | +| **Description** | ローディングインジケータを解除するまでの待ち時間（ミリ秒）。 | +| **Attribute** | `duration` | +| **Type** | `number` | +| **Default** | `0` | + +### enterAnimation + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | ローディングインジケータが表示されたときに使用するアニメーションです。 | +| **Attribute** | `enter-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### htmlAttributes + +| | | +| --------------- | -------------------------------------- | +| **Description** | ローダーに渡す追加属性。 | +| **Attribute** | `html-attributes` | +| **Type** | `undefined \| { [key: string]: any; }` | +| **Default** | `undefined` | + +### isOpen + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、ローディングインジケータは開きます。`false`の場合、ローディングインジケータは閉じます。より細かく表示を制御したい場合に使用します。そうでない場合は、loadingController または `trigger` プロパティを使用してください。注意: ローディングインジケータが終了しても、`isOpen`は自動的に `false`に戻されません。あなたのコードでそれを行う必要があります。 | +| **Attribute** | `is-open` | +| **Type** | `boolean` | +| **Default** | `false` | + +### keyboardClose + +| | | +| --------------- | ------------------------------------------------------------------------------ | +| **Description** | `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 | +| **Attribute** | `keyboard-close` | +| **Type** | `boolean` | +| **Default** | `true` | + +### leaveAnimation + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | ローディングインジケータが解除されたときに使用するアニメーションです。 | +| **Attribute** | `leave-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### message + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ローディングインジケータに表示するテキストコンテンツを任意で指定します。 このプロパティは、文字列としてカスタム HTML を受け入れます。コンテンツはデフォルトでプレーンテキストとしてパースされます。カスタム HTML を使用するには、Ionic の設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。 | +| **Attribute** | `message` | +| **Type** | `IonicSafeString \| string \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### showBackdrop + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | `true`の場合、ロードインジケータの後ろにバックドロップが表示されます。 | +| **Attribute** | `show-backdrop` | +| **Type** | `boolean` | +| **Default** | `true` | + +### spinner + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 表示するスピナーの名前。 | +| **Attribute** | `spinner` | +| **Type** | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| null \| undefined` | +| **Default** | `undefined` | + +### translucent + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、ロードインジケータは半透明になります。mode が `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 | +| **Attribute** | `translucent` | +| **Type** | `boolean` | +| **Default** | `false` | + +### trigger + +| | | +| --------------- | ---------------------------------------------------------------------------- | +| **Description** | クリックするとローディングインジケータが開くトリガー要素に対応する ID です。 | +| **Attribute** | `trigger` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ----------------------- | -------------------------------------------------------------------------------------- | +| `didDismiss` | ローディングインジケータが解除された後に発行されます。ionLoadingDidDismiss の略記。 | +| `didPresent` | ローディングインジケータが提示された後に放出される。ionLoadingWillDismiss の略記。 | +| `ionLoadingDidDismiss` | ローディングが解除された後に発行されます。 | +| `ionLoadingDidPresent` | ローディングが提示された後に発行されます。 | +| `ionLoadingWillDismiss` | ローディングが解除される前に発行されます。 | +| `ionLoadingWillPresent` | ローディングが提示される前に発行されます。 | +| `willDismiss` | ローディングインジケータが解散する前に発行されます。ionLoadingWillDismiss の略記です。 | +| `willPresent` | ローディングインジケータが提示される前に発行されます。ionLoadingWillPresent の略記。 | + +## Methods + +### dismiss + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | ローディングオーバーレイが提示された後、それを解除します。 | +| **Signature** | `dismiss(data?: any, role?: string) => Promise` | + +### onDidDismiss + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | ローディングが解除されたタイミングを解決する Promise を返します。 | +| **Signature** | `onDidDismiss() => Promise>` | + +### onWillDismiss + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | ローディングが解除されるタイミングを解決する Promise を返します。 | +| **Signature** | `onWillDismiss() => Promise>` | + +### present + +| | | +| --------------- | ---------------------------------------------- | +| **Description** | 作成後のローディングオーバーレイを提示します。 | +| **Signature** | `present() => Promise` | + +## CSS Custom Properties + +| Name | Description | +| -------------------- | ---------------------------------- | +| `--backdrop-opacity` | 背景の不透明度 | +| `--backdrop-opacity` | 背景の不透明度 | +| `--background` | ローディングダイアログの背景 | +| `--background` | ローディングダイアログの背景 | +| `--height` | ローディングダイアログの高さ | +| `--height` | ローディングダイアログの高さ | +| `--max-height` | ローディングダイアログの最大の高さ | +| `--max-height` | ローディングダイアログの最大の高さ | +| `--max-width` | ローディングダイアログの最大幅 | +| `--max-width` | ローディングダイアログの最大幅 | +| `--min-height` | ローディングダイアログの最小高さ | +| `--min-height` | ローディングダイアログの最小高さ | +| `--min-width` | ローディングダイアログの最小幅 | +| `--min-width` | ローディングダイアログの最小幅 | +| `--spinner-color` | ローディングスピナーの色 | +| `--spinner-color` | ローディングスピナーの色 | +| `--width` | ローディングダイアログの幅 | +| `--width` | ローディングダイアログの幅 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/menu-button.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/menu-button.md new file mode 100644 index 00000000000..41a6a0733cb --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/menu-button.md @@ -0,0 +1,112 @@ +--- +title: 'ion-menu-button' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Menu Button | ion-menu-button to Open an App Menu on A Page + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### autoHide + +| | | +| --------------- | -------------------------------------------------------------------------------- | +| **Description** | 対応するメニューがアクティブでない場合、メニューボタンを自動的に非表示にします。 | +| **Attribute** | `auto-hide` | +| **Type** | `boolean` | +| **Default** | `true` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | ---------------------------------------------------------------- | +| **Description** | `true`の場合、ユーザはメニューボタンを操作することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### menu + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用されます。 | +| **Attribute** | `menu` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### type + +| | | +| --------------- | --------------------------------- | +| **Description** | ボタンの種類です。 | +| **Attribute** | `type` | +| **Type** | `"button" \| "reset" \| "submit"` | +| **Default** | `'button'` | + +## CSS Shadow Parts + +| Name | Description | +| -------- | ------------------------------------------------- | +| `icon` | メニューボタンのアイコン（ion-icon を使用）です。 | +| `native` | すべての子要素を包むネイティブ HTML ボタン要素。 | + +## CSS Custom Properties + +| Name | Description | +| ------------------------------ | ---------------------------------------------------------------------------------------- | +| `--background` | メニューボタンの背景 | +| `--background` | メニューボタンの背景 | +| `--background-focused` | タブキーでフォーカスしたときのメニューボタンの背景色 | +| `--background-focused` | タブキーでフォーカスしたときのメニューボタンの背景色 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのメニューボタンの背景の不透明度 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのメニューボタンの背景の不透明度 | +| `--background-hover` | ホバー時のメニューボタンの背景 | +| `--background-hover` | ホバー時のメニューボタンの背景 | +| `--background-hover-opacity` | ホバー時の背景の不透明度 | +| `--background-hover-opacity` | ホバー時の背景の不透明度 | +| `--border-radius` | メニューボタンのボーダー半径 | +| `--border-radius` | メニューボタンのボーダー半径 | +| `--color` | メニューボタンの色 | +| `--color` | メニューボタンの色 | +| `--color-focused` | タブキーでフォーカスしたときのメニューボタンの色 | +| `--color-focused` | タブキーでフォーカスしたときのメニューボタンの色 | +| `--color-hover` | ホバー時のメニューボタンの色 | +| `--color-hover` | ホバー時のメニューボタンの色 | +| `--padding-bottom` | ボタンの Bottom Padding | +| `--padding-bottom` | ボタンの Bottom Padding | +| `--padding-end` | ボタンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-end` | ボタンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-start` | ボタンの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-start` | ボタンの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-top` | ボタンの Top Padding | +| `--padding-top` | ボタンの Top Padding | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/menu-toggle.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/menu-toggle.md new file mode 100644 index 00000000000..708cf38ad65 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/menu-toggle.md @@ -0,0 +1,44 @@ +--- +title: 'ion-menu-toggle' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-menu-toggle | MenuToggle Component to Open/Close Active Menus + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### autoHide + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 対応するメニューがアクティブでない場合に、自動的にコンテンツを非表示にします。 デフォルトでは `true` になっています。メニューの状態に関係なく `ion-menu-toggle` を常に表示しておきたい場合は、`false` に変更します。 | +| **Attribute** | `auto-hide` | +| **Type** | `boolean` | +| **Default** | `true` | + +### menu + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | メニューの `menuId` プロパティに対応するオプションのプロパティです。メニュー側には `start` または `end` を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用される。 このプロパティを使用しない場合、`ion-menu-toggle`は、最初にアクティブになったメニューをトグルします。 | +| **Attribute** | `menu` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +## Slots + +| Name | Description | +| ---- | ------------------------------------------------------------------------ | +| `` | トグルの内側にコンテンツを配置し、クリックターゲットとして機能させます。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/menu.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/menu.md new file mode 100644 index 00000000000..be0d3260a41 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/menu.md @@ -0,0 +1,164 @@ +--- +title: 'ion-menu' +demoUrl: '/docs/demos/api/menu/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/menu/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-menu: API Framework Docs for Types of Menu Components + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### contentId + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。 | +| **Attribute** | `content-id` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | -------------------------------------- | +| **Description** | `true`の場合、メニューは無効化される。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### maxEdgeStart + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ドラッグでメニューを開く際のエッジのしきい値です。この値を超えてドラッグ/スワイプが行われた場合、メニューはトリガーされない。 | +| **Attribute** | `max-edge-start` | +| **Type** | `number` | +| **Default** | `50` | + +### menuId + +| | | +| --------------- | --------------------- | +| **Description** | メニューの ID です。 | +| **Attribute** | `menu-id` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### side + +| | | +| --------------- | -------------------------------------------- | +| **Description** | メニューがビューのどの側に配置されるべきか。 | +| **Attribute** | `side` | +| **Type** | `"end" \| "start"` | +| **Default** | `'start'` | + +### swipeGesture + +| | | +| --------------- | ------------------------------------------------------ | +| **Description** | `true`の場合、スワイプによるメニュー操作が有効になる。 | +| **Attribute** | `swipe-gesture` | +| **Type** | `boolean` | +| **Default** | `true` | + +### type + +| | | +| --------------- | -------------------------------------------------------------------------------------- | +| **Description** | メニューの表示形式を指定します。利用可能なオプション。overlay"`, `"reveal"`, `"push"`. | +| **Attribute** | `type` | +| **Type** | `"overlay" \| "push" \| "reveal" \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| -------------- | ------------------------------------------------ | +| `ionDidClose` | メニューが閉じられたときに発行されます。 | +| `ionDidOpen` | メニューが開いているときに発行されます。 | +| `ionWillClose` | メニューが閉じられようとするときに発行されます。 | +| `ionWillOpen` | メニューが開かれようとするときに発行されます。 | + +## Methods + +### close + +| | | +| --------------- | ------------------------------------------------------------------------------------------------- | +| **Description** | メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、`false`を返します。 | +| **Signature** | `close(animated?: boolean, role?: string) => Promise` | + +### isActive + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | メニューがアクティブであれば `true` を返します。 メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、`ion-split-pane`の一部でない状態であることを意味します。 | +| **Signature** | `isActive() => Promise` | + +### isOpen + +| | | +| --------------- | ---------------------------------------------- | +| **Description** | メニューが開いている場合は `true` を返します。 | +| **Signature** | `isOpen() => Promise` | + +### open + +| | | +| --------------- | ----------------------------------------------------------------------------------------- | +| **Description** | メニューを開く。メニューが既に開いているか、開くことができない場合は、`false`を返します。 | +| **Signature** | `open(animated?: boolean) => Promise` | + +### setOpen + +| | | +| --------------- | ------------------------------------------------------------------------------------- | +| **Description** | ボタンを開いたり閉じたりします。操作が正常に完了しない場合は `false` を返します。 | +| **Signature** | `setOpen(shouldOpen: boolean, animated?: boolean, role?: string) => Promise` | + +### toggle + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとします。操作が正常に完了しない場合は、`false`を返します。 | +| **Signature** | `toggle(animated?: boolean) => Promise` | + +## CSS Shadow Parts + +| Name | Description | +| ----------- | ---------------------------------------------------------------------- | +| `backdrop` | メニューを開いているときに、メインコンテンツの上に表示される背景です。 | +| `container` | メニューの内容を格納するコンテナです。 | + +## CSS Custom Properties + +| Name | Description | +| -------------- | ---------------------- | +| `--background` | メニューの背景 | +| `--background` | メニューの背景 | +| `--height` | メニューの高さ | +| `--height` | メニューの高さ | +| `--max-height` | メニューの最大の高さ | +| `--max-height` | メニューの最大の高さ | +| `--max-width` | メニューの最大幅 | +| `--max-width` | メニューの最大幅 | +| `--min-height` | メニューの高さの最小値 | +| `--min-height` | メニューの高さの最小値 | +| `--min-width` | メニューの最小幅 | +| `--min-width` | メニューの最小幅 | +| `--width` | メニューの幅 | +| `--width` | メニューの幅 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/modal.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/modal.md new file mode 100644 index 00000000000..1d13b9f9fed --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/modal.md @@ -0,0 +1,303 @@ +--- +title: 'ion-modal' +demoUrl: '/docs/demos/api/modal/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/modal/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-modal: Ionic Mobile App Custom Modal API Component + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### animated + +| | | +| --------------- | -------------------------------------------------- | +| **Description** | `true`の場合、モーダルはアニメーションを行います。 | +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `true` | + +### backdropBreakpoint + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | シートモーダル使用時に背景がフェードインし始めるポイントを示す 0 ～ 1 の 10 進数値です。それ以前は、背景は非表示で、シートの下のコンテンツは操作可能です。この値は排他的で、指定された値の後に背景がアクティブになることを意味します。 | +| **Attribute** | `backdrop-breakpoint` | +| **Type** | `number` | +| **Default** | `0` | + +### backdropDismiss + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | `true`の場合、バックドロップがクリックされるとモーダルは解除されます。 | +| **Attribute** | `backdrop-dismiss` | +| **Type** | `boolean` | +| **Default** | `true` | + +### breakpoints + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | シート モーダルを作成するときに使用するブレークポイントです。配列の各値は 0 から 1 の間の 10 進数でなければならず、0 はモーダルが完全に閉じていることを、1 はモーダルが完全に開いていることを示しています。値は、画面の高さではなく、モーダルの高さに対する相対値です。この配列の値の 1 つは、`initialBreakpoint` プロパティの値でなければなりません。例えば[0, .25, .5, 1] | +| **Attribute** | `breakpoints` | +| **Type** | `number[] \| undefined` | +| **Default** | `undefined` | + +### canDismiss + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | dismiss`メソッドを呼び出したときに、モーダルが終了できるかどうかを決定します。 値が`true`または値の関数が`true`を返す場合、モーダルは終了しようとすると閉じます。値が`false`の場合、または値の関数が`false`を返す場合、モーダルは閉じません。 コールバック内から`this` にアクセスする必要がある場合は、 https://ionicframework.com/docs/troubleshooting/runtime#accessing-this を参照してください。 | +| **Attribute** | `can-dismiss` | +| **Type** | `((data?: any, role?: string \| undefined) => Promise) \| boolean` | +| **Default** | `true` | + +### enterAnimation + +| | | +| --------------- | ------------------------------------------------------- | +| **Description** | モーダルが表示されたときに使用するアニメーション。 | +| **Attribute** | `enter-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### expandToScroll + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Controls whether scrolling or dragging within the sheet modal expands it to a larger breakpoint. This only takes effect when `breakpoints` and `initialBreakpoint` are set. If `true`, scrolling or dragging anywhere in the modal will first expand it to the next breakpoint. Once fully expanded, scrolling will affect the content. If `false`, scrolling will always affect the content. The modal will only expand when dragging the header or handle. The modal will close when dragging the header or handle. It can also be closed when dragging the content, but only if the content is scrolled to the top. | +| **Attribute** | `expand-to-scroll` | +| **Type** | `boolean` | +| **Default** | `true` | + +### focusTrap + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | もし `true` なら、フォーカスはこのオーバーレイの外側には移動できない。false`の場合、フォーカスはオーバーレイの外側に移動することができる。 ほとんどの場合、このプロパティは `true`のままにしておくべきである。このプロパティを`false`に設定すると、支援技術に依存しているユーザーがフォーカスを混乱した状態に移動できる可能性があるため、深刻なアクセシビリティの問題を引き起こす可能性があります。絶対に必要な場合のみ、このプロパティを`false` に設定することをお勧めします。 開発者は、このオーバーレイがサードパーティライブラリから Ionic 以外のオーバーレイを表示している場合、フォーカストラッピングを無効にすることを検討するとよいでしょう。開発者は、サードパーティーのオーバーレイを表示するときに Ionic オーバーレイのフォーカストラッピングを無効にし、サードパーティーのオーバーレイを解除して Ionic オーバーレイにフォーカスを戻すときにフォーカストラッピングを再度有効にします。 | +| **Attribute** | `focus-trap` | +| **Type** | `boolean` | +| **Default** | `true` | + +### handle + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | シートモーダルの上部に表示される水平線です。 `breakpoints`と`initialBreakpoint`プロパティを設定すると、デフォルトで`true`になります。 | +| **Attribute** | `handle` | +| **Type** | `boolean \| undefined` | +| **Default** | `undefined` | + +### handleBehavior + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ハンドルが押されたときのシートモーダルのインタラクション動作です。 デフォルトは `"none"` で、ハンドルが押されてもモーダルはサイズも位置も変わりません。cycle"` に設定すると、押されたときにモーダルが利用可能なブレークポイント間を循環するようになります。 ハンドルの動作は、`handle`プロパティが`false`に設定されている場合、または`breakpoints` プロパティが設定されていない場合（フルスクリーンまたはカード モーダルを使用している場合）には、利用できません。 | +| **Attribute** | `handle-behavior` | +| **Type** | `"cycle" \| "none" \| undefined` | +| **Default** | `'none'` | + +### htmlAttributes + +| | | +| --------------- | -------------------------------------- | +| **Description** | モーダルに渡す追加属性。 | +| **Attribute** | `html-attributes` | +| **Type** | `undefined \| { [key: string]: any; }` | +| **Default** | `undefined` | + +### initialBreakpoint + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | シートモーダル作成時にモーダルが開く初期点を示す 0 から 1 までの 10 進値。この値は `breakpoints` 配列にも記載されている必要があります。 | +| **Attribute** | `initial-breakpoint` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### isOpen + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、モーダルは開かれます。 `false`の場合、モーダルは閉じます。それ以外の場合は、modalController または `trigger` プロパティを使用してください。注意: `isOpen` は、モーダルが終了しても自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。 | +| **Attribute** | `is-open` | +| **Type** | `boolean` | +| **Default** | `false` | + +### keepContentsMounted + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、モーダルの作成時に `ion-modal` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、モーダルが終了してもマウントされたままです。しかし、モーダルが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、モーダルを最初に作成するときにのみ使用する必要があります。 注意：この機能は、Angular、React、Vue などの JavaScript フレームワークのインライン モーダルにのみ適用されます。 | +| **Attribute** | `keep-contents-mounted` | +| **Type** | `boolean` | +| **Default** | `false` | + +### keyboardClose + +| | | +| --------------- | ------------------------------------------------------------------------------ | +| **Description** | `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 | +| **Attribute** | `keyboard-close` | +| **Type** | `boolean` | +| **Default** | `true` | + +### leaveAnimation + +| | | +| --------------- | ------------------------------------------------------- | +| **Description** | モーダルが解除されたときに使用するアニメーションです。 | +| **Attribute** | `leave-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### presentingElement + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------- | +| **Description** | モーダルを提示した要素です。カード提示効果や、複数のモーダルを重ねる場合に使用します。iOS mode でのみ適用されます。 | +| **Attribute** | `presenting-element` | +| **Type** | `HTMLElement \| undefined` | +| **Default** | `undefined` | + +### showBackdrop + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、モーダルの後ろに背景が表示されます。このプロパティは、モーダルが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、または DOM に存在するかどうかを制御するものではありません。 | +| **Attribute** | `show-backdrop` | +| **Type** | `boolean` | +| **Default** | `true` | + +### trigger + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | クリックされたときにモーダルを開かせるトリガー要素に対応する ID です。 | +| **Attribute** | `trigger` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ------------------------ | ---------------------------------------------------------------------- | +| `didDismiss` | モーダルが解散した後に発行されます。ionModalDidDismiss の略記です。 | +| `didPresent` | モーダルが提示された後に発行されます。ionModalDidPresent の略記です。 | +| `ionBreakpointDidChange` | モーダルブレークポイントが変更された後に発行されます。 | +| `ionModalDidDismiss` | モーダルが終了した後に発行されます。 | +| `ionModalDidPresent` | モーダルが提示された後に発行されます。 | +| `ionModalWillDismiss` | モーダルが解散する前に発行されます。 | +| `ionModalWillPresent` | モーダルが提示される前に発行されます。 | +| `willDismiss` | モーダルが解散する前に発行されます。ionModalWillDismiss の略記です。 | +| `willPresent` | モーダルが提示される前に発行されます。ionModalWillPresent の略記です。 | + +## Methods + +### dismiss + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | モーダルオーバーレイが表示された後、それを解除します。 | +| **Signature** | `dismiss(data?: any, role?: string) => Promise` | + +### getCurrentBreakpoint + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | シートスタイルモーダルの現在のブレークポイントを返します。 | +| **Signature** | `getCurrentBreakpoint() => Promise` | + +### onDidDismiss + +| | | +| --------------- | ----------------------------------------------------------- | +| **Description** | モーダルが解除されたときに解決する Promise を返します。 | +| **Signature** | `onDidDismiss() => Promise>` | + +### onWillDismiss + +| | | +| --------------- | ------------------------------------------------------------ | +| **Description** | モーダルがいつ解散するかを解決する Promise を返します。 | +| **Signature** | `onWillDismiss() => Promise>` | + +### present + +| | | +| --------------- | ---------------------------------------------- | +| **Description** | モーダルオーバーレイを作成した後に提示します。 | +| **Signature** | `present() => Promise` | + +### setCurrentBreakpoint + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | シートスタイルモーダルを特定のブレークポイントに移動します。ブレークポイントの値は、 `breakpoints` 配列で定義された値でなければなりません。 | +| **Signature** | `setCurrentBreakpoint(breakpoint: number) => Promise` | + +## CSS Shadow Parts + +| Name | Description | +| ---------- | -------------------------------------------------------------------- | +| `backdrop` | ion-backdrop`要素です。 | +| `content` | デフォルト slot のラッパー要素です。 | +| `handle` | handle="true"`のときにシートモーダルの上部に表示されるハンドルです。 | + +## CSS Custom Properties + +| Name | Description | +| -------------------- | ------------------------------------ | +| `--backdrop-opacity` | 背景の不透明度 | +| `--backdrop-opacity` | 背景の不透明度 | +| `--background` | モーダルコンテンツの背景 | +| `--background` | モーダルコンテンツの背景 | +| `--border-color` | モーダルコンテンツのボーダーカラー | +| `--border-color` | モーダルコンテンツのボーダーカラー | +| `--border-radius` | モーダルコンテンツのボーダー半径 | +| `--border-radius` | モーダルコンテンツのボーダー半径 | +| `--border-style` | モーダルコンテンツのボーダースタイル | +| `--border-style` | モーダルコンテンツのボーダースタイル | +| `--border-width` | モーダルコンテンツのボーダー幅 | +| `--border-width` | モーダルコンテンツのボーダー幅 | +| `--height` | モーダルの高さ | +| `--height` | モーダルの高さ | +| `--max-height` | モーダルの最大の高さ | +| `--max-height` | モーダルの最大の高さ | +| `--max-width` | モーダルの最大幅 | +| `--max-width` | モーダルの最大幅 | +| `--min-height` | モーダルの最小高さ | +| `--min-height` | モーダルの最小高さ | +| `--min-width` | モーダルの最小幅 | +| `--min-width` | モーダルの最小幅 | +| `--width` | モーダルの幅 | +| `--width` | モーダルの幅 | + +## Slots + +| Name | Description | +| ---- | -------------------------------------------------------- | +| `` | コンテンツは `.modal-content` 要素の内側に配置されます。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/nav-link.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/nav-link.md new file mode 100644 index 00000000000..7485491c177 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/nav-link.md @@ -0,0 +1,54 @@ +--- +title: 'ion-nav-link' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-nav-link: The Element for Navigation to a Specified Component + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### component + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------- | +| **Description** | ナビゲート先のコンポーネント。 `routerDirection`が `"forward"` または `"root"` である場合にのみ使用します。 | +| **Attribute** | `component` | +| **Type** | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | +| **Default** | `undefined` | + +### componentProps + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------- | +| **Description** | コンポーネントに props として渡したいデータ。routerDirection"`が`"forward"`または`"root"` である場合のみ使用します。 | +| **Attribute** | `component-props` | +| **Type** | `undefined \| { [key: string]: any; }` | +| **Default** | `undefined` | + +### routerAnimation + +| | | +| --------------- | ------------------------------------------------------- | +| **Description** | 別ページに移動する際の遷移アニメーション。 | +| **Attribute** | `router-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### routerDirection + +| | | +| --------------- | ------------------------------------ | +| **Description** | 別ページに移動する際の遷移方向です。 | +| **Attribute** | `router-direction` | +| **Type** | `"back" \| "forward" \| "root"` | +| **Default** | `'forward'` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/nav.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/nav.md new file mode 100644 index 00000000000..70ea80b44da --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/nav.md @@ -0,0 +1,174 @@ +--- +title: 'ion-nav' +demoUrl: '/docs/demos/api/nav/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/nav/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-nav | Nav View Component for Ionic Framework Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### animated + +| | | +| --------------- | ---------------------------------------------------------------- | +| **Description** | `true`の場合、コンポーネントの遷移をアニメーションで表現します。 | +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `true` | + +### animation + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | デフォルトでは、`ion-nav` は mode（ios または Material Design）に応じてページ間の遷移をアニメーション化します。しかし、このプロパティは `AnimationBuilder` 関数を使用して、独自の遷移を作成することができます。 | +| **Attribute** | `animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### root + +| | | +| --------------- | -------------------------------------------------------------------------- | +| **Description** | ロードするルート NavComponent | +| **Attribute** | `root` | +| **Type** | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | +| **Default** | `undefined` | + +### rootParams + +| | | +| --------------- | -------------------------------------- | +| **Description** | ルートコンポーネントの任意のパラメータ | +| **Attribute** | `root-params` | +| **Type** | `undefined \| { [key: string]: any; }` | +| **Default** | `undefined` | + +### swipeGesture + +| | | +| --------------- | -------------------------------------------------------------- | +| **Description** | ナビコンポーネントがスワイプで戻ることができるようにする場合。 | +| **Attribute** | `swipe-gesture` | +| **Type** | `boolean \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ------------------ | ------------------------------------------------------ | +| `ionNavDidChange` | ナビのコンポーネントが変更されたときに発生するイベント | +| `ionNavWillChange` | ナビコンポーネントが変更されたときに発生するイベント | + +## Methods + +### canGoBack + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | 現在のビューが戻ることができる場合は `true` を返します。 | +| **Signature** | `canGoBack(view?: ViewController) => Promise` | + +### getActive + +| | | +| --------------- | ----------------------------------------------------- | +| **Description** | アクティブビューを取得します。 | +| **Signature** | `getActive() => Promise` | + +### getByIndex + +| | | +| --------------- | ------------------------------------------------------------------- | +| **Description** | 指定されたインデックスにあるビューを取得します。 | +| **Signature** | `getByIndex(index: number) => Promise` | + +### getLength + +| | | +| --------------- | ---------------------------------- | +| **Description** | スタック内のビューの数を返します。 | +| **Signature** | `getLength() => Promise` | + +### getPrevious + +| | | +| --------------- | ---------------------------------------------------------------------------- | +| **Description** | 前のビューを取得します。 | +| **Signature** | `getPrevious(view?: ViewController) => Promise` | + +### insert + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 指定されたインデックスのナビゲーションスタックにコンポーネントを挿入します。これは、ナビゲーションスタックの任意の位置にコンポーネントを追加するのに便利です。 | +| **Signature** | `insert(insertIndex: number, component: T, componentProps?: ComponentProps \| null, opts?: NavOptions \| null, done?: TransitionDoneFn) => Promise` | + +### insertPages + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 指定されたインデックスのナビゲーションスタックにコンポーネントの配列を挿入します。配列の最後のコンポーネントはビューとしてインスタンス化され、アニメーションしてアクティブビューになります。 | +| **Signature** | `insertPages(insertIndex: number, insertComponents: NavComponent[] \| NavComponentWithProps[], opts?: NavOptions \| null, done?: TransitionDoneFn) => Promise` | + +### pop + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------- | +| **Description** | ナビゲーションスタックからコンポーネントをポップオフします。現在のコンポーネントからナビゲートして戻る。 | +| **Signature** | `pop(opts?: NavOptions \| null, done?: TransitionDoneFn) => Promise` | + +### popTo + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ナビゲーションスタック内の特定のインデックスにポップします。 | +| **Signature** | `popTo(indexOrViewCtrl: number \| ViewController, opts?: NavOptions \| null, done?: TransitionDoneFn) => Promise` | + +### popToRoot + +| | | +| --------------- | ----------------------------------------------------------------------------------- | +| **Description** | スタックのルートまで戻ってナビゲートする、それがどんなに遠くても。 | +| **Signature** | `popToRoot(opts?: NavOptions \| null, done?: TransitionDoneFn) => Promise` | + +### push + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 新しいコンポーネントを現在のナビゲーションスタックにプッシュします。追加情報があれば、オブジェクトとして一緒に渡す。この追加情報には、NavParams からアクセスできます。 | +| **Signature** | `push(component: T, componentProps?: ComponentProps \| null, opts?: NavOptions \| null, done?: TransitionDoneFn) => Promise` | + +### removeIndex + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 指定されたインデックスにあるコンポーネントをナビゲーションスタックから削除します。 | +| **Signature** | `removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions \| null, done?: TransitionDoneFn) => Promise` | + +### setPages + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | 現在のナビゲーションスタックのビューを設定し、最後のビューにナビゲートします。デフォルトではアニメーションは無効になっていますが、ナビゲーションコントローラーにオプションを渡すことで有効にすることができます。ナビゲーションパラメーターは、配列内の各ページに渡すこともできます。 | +| **Signature** | `setPages(views: NavComponent[] \| NavComponentWithProps[], opts?: NavOptions \| null, done?: TransitionDoneFn) => Promise` | + +### setRoot + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 現在のナビゲーションスタックのルートをコンポーネントに設定します。 | +| **Signature** | `setRoot(component: T, componentProps?: ComponentProps \| null, opts?: NavOptions \| null, done?: TransitionDoneFn) => Promise` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/note.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/note.md new file mode 100644 index 00000000000..3ff2003e360 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/note.md @@ -0,0 +1,47 @@ +--- +title: 'ion-note' +demoUrl: '/docs/demos/api/note/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/note/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-note: Note Text Elements for iOS and Android Ionic Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +## CSS Custom Properties + +| Name | Description | +| --------- | ----------- | +| `--color` | ノートの色 | +| `--color` | ノートの色 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/picker-column-option.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/picker-column-option.md new file mode 100644 index 00000000000..b78baff2fa4 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/picker-column-option.md @@ -0,0 +1,39 @@ +--- +title: 'ion-picker-column-option' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `'primary'` | + +### disabled + +| | | +| --------------- | ----------------------------------------------------------- | +| **Description** | true`の場合、ユーザーはピッカー列オプションを操作できない。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### value + +| | | +| --------------- | ---------------------------- | +| **Description** | オプションのテキスト値です。 | +| **Attribute** | `value` | +| **Type** | `any` | +| **Default** | `undefined` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/picker-column.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/picker-column.md new file mode 100644 index 00000000000..a9f756666c5 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/picker-column.md @@ -0,0 +1,70 @@ +--- +title: 'ion-picker-column' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `'primary'` | + +### disabled + +| | | +| --------------- | --------------------------------------------------------- | +| **Description** | true`の場合、ユーザーはピッカーと対話することができない。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### value + +| | | +| --------------- | ------------------------------------ | +| **Description** | ピッカーで選択されているオプション。 | +| **Attribute** | `value` | +| **Type** | `number \| string \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ----------- | ------------------------------------------------------------------------------------------------------------ | +| `ionChange` | 値が変更されたときに発行される。 プログラムで `value` プロパティを設定した場合は、このイベントは発生しない。 | + +## Methods + +### setFocus + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ピッカーカラム内のスクロール可能なコンテナにフォーカスを設定します。グローバルメソッド `pickerColumn.focus()` の代わりにこのメソッドを使用します。 | +| **Signature** | `setFocus() => Promise` | + +## Slots + +| Name | Description | +| -------- | ------------------------------------------------ | +| `prefix` | ピッカー・オプションの左側に表示するコンテンツ。 | +| `suffix` | ピッカー・オプションの右側に表示するコンテンツ。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/picker-legacy.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/picker-legacy.md new file mode 100644 index 00000000000..2eaa440f00a --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/picker-legacy.md @@ -0,0 +1,219 @@ +--- +title: 'ion-picker-legacy' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### animated + +| | | +| --------------- | -------------------------------------------------- | +| **Description** | `true`の場合、ピッカーはアニメーションを行います。 | +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `true` | + +### backdropDismiss + +| | | +| --------------- | -------------------------------------------------------------------- | +| **Description** | `true`の場合、バックドロップがクリックされるとピッカーが解除される。 | +| **Attribute** | `backdrop-dismiss` | +| **Type** | `boolean` | +| **Default** | `true` | + +### buttons + +| | | +| --------------- | ---------------------------------------- | +| **Description** | ピッカーの上部に表示されるボタンの配列。 | +| **Attribute** | `buttons` | +| **Type** | `PickerButton[]` | +| **Default** | `[]` | + +### columns + +| | | +| --------------- | ---------------------------------- | +| **Description** | ピッカーに表示されるカラムの配列。 | +| **Attribute** | `columns` | +| **Type** | `PickerColumn[]` | +| **Default** | `[]` | + +### cssClass + +| | | +| --------------- | --------------------------------------------------------------------------------------------------- | +| **Description** | カスタム CSS に適用する追加のクラス。複数のクラスを指定する場合は、スペースで区切る必要があります。 | +| **Attribute** | `css-class` | +| **Type** | `string \| string[] \| undefined` | +| **Default** | `undefined` | + +### duration + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | ピッカーが終了するまでの待ち時間をミリ秒単位で指定します。 | +| **Attribute** | `duration` | +| **Type** | `number` | +| **Default** | `0` | + +### enterAnimation + +| | | +| --------------- | ------------------------------------------------------- | +| **Description** | ピッカーが表示されたときに使用するアニメーション。 | +| **Attribute** | `enter-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### htmlAttributes + +| | | +| --------------- | -------------------------------------- | +| **Description** | ピッカーに渡す追加属性。 | +| **Attribute** | `html-attributes` | +| **Type** | `undefined \| { [key: string]: any; }` | +| **Default** | `undefined` | + +### isOpen + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、ピッカーは開きます。`false`の場合、ピッカーは閉じます。ピッカーの表示をより細かく制御したい場合に使用します。それ以外の場合は pickerController や `trigger` プロパティを使用します。注意: ピッカーが終了しても `isOpen` は自動的に `false` に戻りません。あなたのコードでそれを行う必要があります。 | +| **Attribute** | `is-open` | +| **Type** | `boolean` | +| **Default** | `false` | + +### keyboardClose + +| | | +| --------------- | ------------------------------------------------------------------------------ | +| **Description** | `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 | +| **Attribute** | `keyboard-close` | +| **Type** | `boolean` | +| **Default** | `true` | + +### leaveAnimation + +| | | +| --------------- | ------------------------------------------------------- | +| **Description** | ピッカーが解除されたときに使用するアニメーションです。 | +| **Attribute** | `leave-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### showBackdrop + +| | | +| --------------- | -------------------------------------------------- | +| **Description** | `true`の場合、ピッカーの後ろに背景が表示されます。 | +| **Attribute** | `show-backdrop` | +| **Type** | `boolean` | +| **Default** | `true` | + +### trigger + +| | | +| --------------- | ------------------------------------------------------- | +| **Description** | クリックするとピッカーが開くトリガー要素に対応する ID。 | +| **Attribute** | `trigger` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ---------------------- | ----------------------------------------------------------------------- | +| `didDismiss` | ピッカーが解散した後に発行されます。ionPickerDidDismiss の略記です。 | +| `didPresent` | ピッカーが提示された後に発行されます。ionPickerWillDismiss の略記です。 | +| `ionPickerDidDismiss` | ピッカーが解散した後に発行されます。 | +| `ionPickerDidPresent` | ピッカーが提示された後に発行されます。 | +| `ionPickerWillDismiss` | ピッカーが解散する前に発行されます。 | +| `ionPickerWillPresent` | ピッカーが提示される前に発行されます。 | +| `willDismiss` | ピッカーが解散する前に発行されます。ionPickerWillDismiss の略記です。 | +| `willPresent` | ピッカーが提示される前に発行されます。ionPickerWillPresent の略記です。 | + +## Methods + +### dismiss + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | ピッカー・オーバーレイが表示された後、それを解除します。 | +| **Signature** | `dismiss(data?: any, role?: string) => Promise` | + +### getColumn + +| | | +| --------------- | --------------------------------------------------------------- | +| **Description** | 指定された名前に一致するカラムを取得します。 | +| **Signature** | `getColumn(name: string) => Promise` | + +### onDidDismiss + +| | | +| --------------- | ----------------------------------------------------------- | +| **Description** | ピッカーが解散したことを解決する Promise を返します。 | +| **Signature** | `onDidDismiss() => Promise>` | + +### onWillDismiss + +| | | +| --------------- | ------------------------------------------------------------ | +| **Description** | ピッカーが解散するタイミングを解決する Promise を返します。 | +| **Signature** | `onWillDismiss() => Promise>` | + +### present + +| | | +| --------------- | ------------------------------------------------ | +| **Description** | ピッカー・オーバーレイを作成した後に提示します。 | +| **Signature** | `present() => Promise` | + +## CSS Custom Properties + +| Name | Description | +| -------------------- | -------------------------- | +| `--backdrop-opacity` | 背景の不透明度 | +| `--backdrop-opacity` | 背景の不透明度 | +| `--background` | ピッカーの背景 | +| `--background` | ピッカーの背景 | +| `--background-rgb` | ピッカーの背景（rgb 形式） | +| `--background-rgb` | ピッカーの背景（rgb 形式） | +| `--border-color` | ピッカーのボーダーカラー | +| `--border-color` | ピッカーのボーダーカラー | +| `--border-radius` | ピッカーのボーダー半径 | +| `--border-radius` | ピッカーのボーダー半径 | +| `--border-style` | ピッカーのボーダースタイル | +| `--border-style` | ピッカーのボーダースタイル | +| `--border-width` | ピッカーのボーダー幅 | +| `--border-width` | ピッカーのボーダー幅 | +| `--height` | ピッカーの高さ | +| `--height` | ピッカーの高さ | +| `--max-height` | ピッカーの最大の高さ | +| `--max-height` | ピッカーの最大の高さ | +| `--max-width` | ピッカーの最大幅 | +| `--max-width` | ピッカーの最大幅 | +| `--min-height` | ピッカーの最小の高さ | +| `--min-height` | ピッカーの最小の高さ | +| `--min-width` | ピッカーの最小幅 | +| `--min-width` | ピッカーの最小幅 | +| `--width` | ピッカーの幅 | +| `--width` | ピッカーの幅 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/picker.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/picker.md new file mode 100644 index 00000000000..960d6e2253a --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/picker.md @@ -0,0 +1,42 @@ +--- +title: 'ion-picker' +demoUrl: '/docs/demos/api/picker/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/picker/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Picker | Display Buttons and Columns for ion-picker on Ionic Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +## CSS Custom Properties + +| Name | Description | +| --------------------------- | ---------------------------------------------------- | +| `--fade-background-rgb` | 非選択項目をカバーするグラデーションの背景（rgb 形式 | +| `--fade-background-rgb` | 非選択項目をカバーするグラデーションの背景（rgb 形式 | +| `--highlight-background` | 選択されたアイテムのピッカー・ハイライトの背景 | +| `--highlight-background` | 選択されたアイテムのピッカー・ハイライトの背景 | +| `--highlight-border-radius` | 選択されたアイテムのピッカーハイライトの境界半径 | +| `--highlight-border-radius` | 選択されたアイテムのピッカーハイライトの境界半径 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/popover.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/popover.md new file mode 100644 index 00000000000..fe1fee97412 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/popover.md @@ -0,0 +1,313 @@ +--- +title: 'ion-popover' +demoUrl: '/docs/demos/api/popover/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/popover/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-popover: iOS / Android Popover UI Component & CSS Properties + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### alignment + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ポップオーバーのコンテンツを `reference` ポイントに揃える方法を記述します。デフォルトは `ios` モードでは `"center"` で、`md` モードでは `"start"` です。 | +| **Attribute** | `alignment` | +| **Type** | `"center" \| "end" \| "start" \| undefined` | +| **Default** | `undefined` | + +### animated + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | `true`の場合、ポップオーバーはアニメーションを行います。 | +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `true` | + +### arrow + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、`ios` mode で動作しているとき、ポップオーバーは `reference` を指し示す矢印を表示します。 `md` mode では適用されない。 | +| **Attribute** | `arrow` | +| **Type** | `boolean` | +| **Default** | `true` | + +### backdropDismiss + +| | | +| --------------- | ------------------------------------------------------------------------------ | +| **Description** | `true`の場合、バックドロップがクリックされたときにポップオーバーが解除される。 | +| **Attribute** | `backdrop-dismiss` | +| **Type** | `boolean` | +| **Default** | `true` | + +### component + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ポップオーバーの内側に表示するコンポーネントです。これを使う必要があるのは、JavaScript フレームワークを使用していない場合だけです。そうでない場合は、`ion-popover`の中にコンポーネントを入れるだけでいいです。 | +| **Attribute** | `component` | +| **Type** | `Function \| HTMLElement \| null \| string \| undefined` | +| **Default** | `undefined` | + +### componentProps + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ポップオーバー・コンポーネントに渡すデータです。これを使う必要があるのは、JavaScript フレームワークを使用していない場合だけです。そうでなければ、コンポーネントに直接 props を設定すればよいのです。 | +| **Attribute** | `component-props` | +| **Type** | `undefined \| { [key: string]: any; }` | +| **Default** | `undefined` | + +### dismissOnSelect + +| | | +| --------------- | -------------------------------------------------------------------------------- | +| **Description** | `true`の場合、コンテンツがクリックされると、ポップオーバーは自動的に解除される。 | +| **Attribute** | `dismiss-on-select` | +| **Type** | `boolean` | +| **Default** | `false` | + +### enterAnimation + +| | | +| --------------- | ------------------------------------------------------------ | +| **Description** | ポップオーバーが表示されたときに使用するアニメーションです。 | +| **Attribute** | `enter-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### event + +| | | +| --------------- | -------------------------------------------------- | +| **Description** | ポップオーバー・アニメーションに渡すイベントです。 | +| **Attribute** | `event` | +| **Type** | `any` | +| **Default** | `undefined` | + +### focusTrap + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | もし `true` なら、フォーカスはこのオーバーレイの外側には移動できない。false`の場合、フォーカスはオーバーレイの外側に移動することができる。 ほとんどの場合、このプロパティは `true`のままにしておくべきである。このプロパティを`false`に設定すると、支援技術に依存しているユーザーがフォーカスを混乱した状態に移動できる可能性があるため、深刻なアクセシビリティの問題を引き起こす可能性があります。絶対に必要な場合のみ、このプロパティを`false` に設定することをお勧めします。 開発者は、このオーバーレイがサードパーティライブラリから Ionic 以外のオーバーレイを表示している場合、フォーカストラッピングを無効にすることを検討するとよいでしょう。開発者は、サードパーティーのオーバーレイを表示するときに Ionic オーバーレイのフォーカストラッピングを無効にし、サードパーティーのオーバーレイを解除して Ionic オーバーレイにフォーカスを戻すときにフォーカストラッピングを再度有効にします。 | +| **Attribute** | `focus-trap` | +| **Type** | `boolean` | +| **Default** | `true` | + +### htmlAttributes + +| | | +| --------------- | -------------------------------------- | +| **Description** | ポップオーバーに渡す追加属性。 | +| **Attribute** | `html-attributes` | +| **Type** | `undefined \| { [key: string]: any; }` | +| **Default** | `undefined` | + +### isOpen + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、ポップオーバーは開く。もし `false` ならば、ポップオーバーは閉じます。より細かく表示を制御する必要がある場合はこれを使用し、そうでない場合は popoverController または `trigger` プロパティを使用します。注意: ポップオーバーが閉じると `isOpen` は自動的に `false` に戻されません。あなたのコードでそれを行う必要があります。 | +| **Attribute** | `is-open` | +| **Type** | `boolean` | +| **Default** | `false` | + +### keepContentsMounted + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、ポップオーバーの作成時に `ion-popover` に渡されたコンポーネントが自動的にマウントされます。このコンポーネントは、ポップオーバーが削除されてもマウントされたままです。ただし、ポップオーバーが破棄されると、コンポーネントは破棄されます。このプロパティはリアクティブではないので、ポップオーバーを最初に作成するときにのみ使用する必要があります。 注：この機能は、Angular、React、Vue などの JavaScript フレームワークのインラインポップオーバーにのみ適用されます。 | +| **Attribute** | `keep-contents-mounted` | +| **Type** | `boolean` | +| **Default** | `false` | + +### keyboardClose + +| | | +| --------------- | ------------------------------------------------------------------------------ | +| **Description** | `true`の場合、オーバーレイが表示されたときにキーボードが自動的に解除されます。 | +| **Attribute** | `keyboard-close` | +| **Type** | `boolean` | +| **Default** | `true` | + +### leaveAnimation + +| | | +| --------------- | ------------------------------------------------------------ | +| **Description** | ポップオーバーが解除されたときに使用するアニメーションです。 | +| **Attribute** | `leave-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### reference + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ポップオーバーを何に対して相対的に配置するかを記述します。もし `"trigger"` ならば、ポップオーバーはトリガーボタンに相対して配置されます。イベントを渡すと、event.target によって決定されます。もし `"event"` ならば、ポップオーバーはトリガーアクションの x/y 座標に相対的に配置されます。イベントを渡す場合、これは event.clientX と event.clientY を介して決定されます。 | +| **Attribute** | `reference` | +| **Type** | `"event" \| "trigger"` | +| **Default** | `'trigger'` | + +### showBackdrop + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、ポップオーバーの後ろに背景が表示されます。このプロパティは、ポップオーバーが表示されたときに背景が画面を暗くするかどうかを制御します。このプロパティは、背景がアクティブであるかどうか、または DOM に存在するかどうかを制御しません。 | +| **Attribute** | `show-backdrop` | +| **Type** | `boolean` | +| **Default** | `true` | + +### side + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ポップオーバーを `reference` ポイントのどちら側に配置するかを記述します。`"start"` と `"end"` の値は RTL を意識しており、`"left"` と `"right"` の値はそうではない。 | +| **Attribute** | `side` | +| **Type** | `"bottom" \| "end" \| "left" \| "right" \| "start" \| "top"` | +| **Default** | `'bottom'` | + +### size + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ポップオーバーの幅を計算する方法を記述します。もし `"cover"` なら、ポップオーバーの幅はトリガーの幅に合わせます。auto"` の場合、ポップオーバーの幅は静的なデフォルト値に設定されます。 | +| **Attribute** | `size` | +| **Type** | `"auto" \| "cover"` | +| **Default** | `'auto'` | + +### translucent + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、ポップオーバーは半透明になります。mode が `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 | +| **Attribute** | `translucent` | +| **Type** | `boolean` | +| **Default** | `false` | + +### trigger + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ポップオーバーを開かせるトリガー要素に対応する ID です。trigger-action`プロパティを使用して、ポップオーバーを開くためのインタラクションをカスタマイズすることができます。 | +| **Attribute** | `trigger` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### triggerAction + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | どのようなトリガーとの相互作用でポップオーバーを開くべきかを記述します。 `trigger`プロパティが `undefined` の場合は適用されません。`"click"` の場合、トリガーが左クリックされたときにポップオーバーが表示されます。`"hover"` の場合、ポインタがトリガーの上に乗ったときにポップオーバーが表示されます。コンテキストメニューの場合、デスクトップでは右クリック、モバイルでは長押しでポップオーバーが表示されます。これは、デバイスの通常のコンテキストメニューが表示されるのを防ぐことにもなります。 | +| **Attribute** | `trigger-action` | +| **Type** | `"click" \| "context-menu" \| "hover"` | +| **Default** | `'click'` | + +## Events + +| Name | Description | +| ----------------------- | ------------------------------------------------------------------------------ | +| `didDismiss` | ポップオーバーが解散した後に発行されます。ionPopoverDidDismiss の略記です。 | +| `didPresent` | ポップオーバーが提示された後に発行されます。ionPopoverWillDismiss の略記です。 | +| `ionPopoverDidDismiss` | ポップオーバーが解除された後に発行されます。 | +| `ionPopoverDidPresent` | ポップオーバーが表示された後に発行されます。 | +| `ionPopoverWillDismiss` | ポップオーバーが解除される前に発行されます。 | +| `ionPopoverWillPresent` | ポップオーバーが表示される前に発行されます。 | +| `willDismiss` | ポップオーバーが解散する前に発行されます。ionPopoverWillDismiss の略記です。 | +| `willPresent` | ポップオーバーが提示される前に発行されます。ionPopoverWillPresent の略記です。 | + +## Methods + +### dismiss + +| | | +| --------------- | ---------------------------------------------------------------------------------------- | +| **Description** | ポップオーバーオーバーレイが提示された後、それを解除します。 | +| **Signature** | `dismiss(data?: any, role?: string, dismissParentPopover?: boolean) => Promise` | + +### onDidDismiss + +| | | +| --------------- | ------------------------------------------------------------------- | +| **Description** | ポップオーバーが解除されたタイミングを解決する Promise を返します。 | +| **Signature** | `onDidDismiss() => Promise>` | + +### onWillDismiss + +| | | +| --------------- | ------------------------------------------------------------------- | +| **Description** | ポップオーバーが解除されるタイミングを解決する Promise を返します。 | +| **Signature** | `onWillDismiss() => Promise>` | + +### present + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ポップオーバーが作成された後に、ポップオーバーを表示します。開発者は、マウス、タッチ、またはポインタイベントを渡すことで、そのイベントがディスパッチされた場所と相対的にポップオーバーを配置することができます。 | +| **Signature** | `present(event?: MouseEvent \| TouchEvent \| PointerEvent \| CustomEvent) => Promise` | + +## CSS Shadow Parts + +| Name | Description | +| ---------- | ----------------------------------------------------- | +| `arrow` | 参照要素を指し示す矢印。`ios` mode 時のみ適用される。 | +| `backdrop` | ion-backdrop`要素です。 | +| `content` | デフォルト slot のラッパー要素です。 | + +## CSS Custom Properties + +| Name | Description | +| -------------------- | ----------------------------------------------------- | +| `--backdrop-opacity` | 背景の不透明度 | +| `--backdrop-opacity` | 背景の不透明度 | +| `--background` | ポップオーバーの背景 | +| `--background` | ポップオーバーの背景 | +| `--box-shadow` | ポップオーバーのボックスシャドウ | +| `--box-shadow` | ポップオーバーのボックスシャドウ | +| `--height` | ポップオーバーの高さ | +| `--height` | ポップオーバーの高さ | +| `--max-height` | ポップオーバーの最大の高さ | +| `--max-height` | ポップオーバーの最大の高さ | +| `--max-width` | ポップオーバーの最大幅 | +| `--max-width` | ポップオーバーの最大幅 | +| `--min-height` | ポップオーバーの高さの最小値 | +| `--min-height` | ポップオーバーの高さの最小値 | +| `--min-width` | ポップオーバーの最小幅 | +| `--min-width` | ポップオーバーの最小幅 | +| `--offset-x` | ポップオーバーを X 軸方向に移動させる量 | +| `--offset-x` | ポップオーバーを X 軸方向に移動させる量 | +| `--offset-y` | ポップオーバーを Y 軸方向に移動させる量を指定します。 | +| `--offset-y` | ポップオーバーを Y 軸方向に移動させる量を指定します。 | +| `--width` | ポップオーバーの幅 | +| `--width` | ポップオーバーの幅 | + +## Slots + +| Name | Description | +| ---- | -------------------------------------------------------- | +| `` | コンテンツは `.popover-content` 要素の内部に配置される。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/progress-bar.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/progress-bar.md new file mode 100644 index 00000000000..9fc80bd0d81 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/progress-bar.md @@ -0,0 +1,93 @@ +--- +title: 'ion-progress-bar' +demoUrl: '/docs/demos/api/progress-bar/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/progress-bar/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Progress Bar | Horizontal App Progress Bar for Loading Indicator + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### buffer + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------- | +| **Description** | バッファと値が 1 より小さい場合、バッファの円が表示されます。バッファは[0, 1]の間である必要があります。 | +| **Attribute** | `buffer` | +| **Type** | `number` | +| **Default** | `1` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### reversed + +| | | +| --------------- | ------------------------------------------------- | +| **Description** | true の場合、プログレスバーの方向を反転させます。 | +| **Attribute** | `reversed` | +| **Type** | `boolean` | +| **Default** | `false` | + +### type + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 処理にかかる時間が既知か否かに応じて、プログレスバーの状態を指定します。デフォルトのオプションは以下の通り。determinate"`(アニメーションなし),`"indeterminate"` (左から右へアニメーションする). | +| **Attribute** | `type` | +| **Type** | `"determinate" \| "indeterminate"` | +| **Default** | `'determinate'` | + +### value + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | この値は、`type`が`"determinate"`である場合に、アクティブバーをどれだけ表示するかを決定するものです。値は [0, 1] の間であるべきです。 | +| **Attribute** | `value` | +| **Type** | `number` | +| **Default** | `0` | + +## CSS Shadow Parts + +| Name | Description | +| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | +| `progress` | type`が`"determinate"`のときは現在値を表示し、`type`が`"indeterminate"`のときは前後にスライドするプログレスバーです。 | +| `stream` | バッファリング中に表示されるアニメーションの円です。これは `buffer` が設定され、`type` が `"determinate"` のときのみ表示される。 | +| `track` | プログレスバーの後ろにあるトラックバーです。buffer`プロパティが設定され、`type`が `"determinate"`である場合、トラックは`buffer` 値の幅となる。 | + +## CSS Custom Properties + +| Name | Description | +| ----------------------- | ------------------------------------------------------------------------------ | +| `--background` | プログレストラックの背景、または `buffer` が設定されている場合はバッファバー。 | +| `--background` | プログレストラックの背景、または `buffer` が設定されている場合はバッファバー。 | +| `--progress-background` | 現在値を表すプログレスバーの背景 | +| `--progress-background` | 現在値を表すプログレスバーの背景 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/radio-group.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/radio-group.md new file mode 100644 index 00000000000..9ca6b12ddf4 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/radio-group.md @@ -0,0 +1,78 @@ +--- +title: 'ion-radio-group' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-radio-group | Radio Button Group Usage for Ionic Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### allowEmptySelection + +| | | +| --------------- | ------------------------------------------------ | +| **Description** | `true`の場合、ラジオを非選択にすることができる。 | +| **Attribute** | `allow-empty-selection` | +| **Type** | `boolean` | +| **Default** | `false` | + +### compareWith + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | このプロパティを使用すると、開発者は、ion-radio-group で選択されたオプションを決定するときにオブジェクトを比較するためのカスタム関数またはプロパティ名を指定できます。指定しない場合、デフォルトの動作では、比較に厳密な等式 (===) が使用されます。 | +| **Attribute** | `compare-with` | +| **Type** | `((currentValue: any, compareValue: any) => boolean) \| null \| string \| undefined` | +| **Default** | `undefined` | + +### errorText + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | The error text to display at the top of the radio group. | +| **Attribute** | `error-text` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### helperText + +| | | +| --------------- | --------------------------------------------------------- | +| **Description** | The helper text to display at the top of the radio group. | +| **Attribute** | `helper-text` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### name + +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | フォームデータとともに送信されるコントロールの名前。 | +| **Attribute** | `name` | +| **Type** | `string` | +| **Default** | `this.inputId` | + +### value + +| | | +| --------------- | ---------------------- | +| **Description** | 無線グループの値です。 | +| **Attribute** | `value` | +| **Type** | `any` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ----------- | ------------------------------------------------------------------------------------------------------------ | +| `ionChange` | 値が変更されたときに発行される。 プログラムで `value` プロパティを設定した場合は、このイベントは発生しない。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/radio.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/radio.md new file mode 100644 index 00000000000..50b4ea4e001 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/radio.md @@ -0,0 +1,128 @@ +--- +title: 'ion-radio' +demoUrl: '/docs/demos/api/radio/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/radio/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-radio Component: Radio Property for iOS and Android + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### alignment + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ラジオとラベルの十字軸上の配置を制御する方法。start"`：ラベルとコントロールはLTRでは横軸の左側に、RTLでは右側に表示されます。center"`：ラベルとコントロールは LTR でも RTL でも横軸の中央に表示されます。このプロパティを設定すると、ラジオの `display` が `block` に変更されます。 | +| **Attribute** | `alignment` | +| **Type** | `"center" \| "start" \| undefined` | +| **Default** | `undefined` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | `true`の場合、ユーザはラジオと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### justify + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ラベルとラジオを 1 行にまとめる方法。start"`：ラベルとラジオはLTRでは左に、RTLでは右に表示されます。end"`：ラベルとラジオは LTR では右に、RTL では左に表示されます。space-between"`：ラベルとラジオは行の反対側に表示され、2つの要素の間にはスペースが入ります。このプロパティを設定すると、ラジオの `display`が`block` に変更されます。 | +| **Attribute** | `justify` | +| **Type** | `"end" \| "space-between" \| "start" \| undefined` | +| **Default** | `undefined` | + +### labelPlacement + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ラジオに対してラベルを配置する位置。start"`：ラベルはLTRではラジオの左に、RTLでは右に表示されます。end"`：ラベルは LTR ではラジオの右、RTL では左に表示される。fixed"`：ラベルの幅が固定される以外は `"start"` と同じ動作をします。長いテキストは省略記号("...")で切り捨てられます。stacked"`：ラベルは向きに関係なくラジオの上に表示されます。ラベルの整列は `alignment` プロパティで制御できます。 | +| **Attribute** | `label-placement` | +| **Type** | `"end" \| "fixed" \| "stacked" \| "start"` | +| **Default** | `'start'` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### name + +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | フォームデータとともに送信されるコントロールの名前。 | +| **Attribute** | `name` | +| **Type** | `string` | +| **Default** | `this.inputId` | + +### value + +| | | +| --------------- | ---------------- | +| **Description** | ラジオの値です。 | +| **Attribute** | `value` | +| **Type** | `any` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ---------- | ------------------------------------------------------ | +| `ionBlur` | ラジオボタンのフォーカスが外れたときに発行されます。 | +| `ionFocus` | ラジオボタンにフォーカスが当たったときに発行されます。 | + +## CSS Shadow Parts + +| Name | Description | +| ----------- | ------------------------------------------------------------------------ | +| `container` | ラジオマークの入れ物です。 | +| `label` | ラジオを説明するラベルテキスト。 | +| `mark` | チェックされた状態を示すために使用されるチェックマークまたはドットです。 | + +## CSS Custom Properties + +| Name | Description | +| ----------------------- | -------------------------------------- | +| `--border-radius` | ラジオのボーダー半径 | +| `--border-radius` | ラジオのボーダー半径 | +| `--color` | ラジオのカラー | +| `--color` | ラジオのカラー | +| `--color-checked` | チェックしたラジオの色 | +| `--color-checked` | チェックしたラジオの色 | +| `--inner-border-radius` | 内側のチェック付きラジオのボーダー半径 | +| `--inner-border-radius` | 内側のチェック付きラジオのボーダー半径 | + +## Slots + +| Name | Description | +| ---- | ---------------------------------------------------------------------------------------------------------------------------- | +| `` | ラジオに関連付けるラベルテキストです。"labelPlacement"プロパティを使用して、ラジオに対するラベルの相対的な配置を制御します。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/range.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/range.md new file mode 100644 index 00000000000..ac09937591a --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/range.md @@ -0,0 +1,233 @@ +--- +title: 'ion-range' +demoUrl: '/docs/demos/api/range/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/range/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Range Slider | ion-range: Slider Knob Controls with Labels + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### activeBarStart + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | レンジアクティブバーの開始位置です。この機能は、ノブが 1 つの場合のみ有効です（dualKnobs="false"）。有効な値は、min 値以上、max 値以下です。 | +| **Attribute** | `active-bar-start` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### debounce + +| | | +| --------------- | ------------------------------------------------------------------------------------------ | +| **Description** | レンジの値が変化するたびに `ionInput` イベントをトリガーするまでの待ち時間（ミリ秒単位）。 | +| **Attribute** | `debounce` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | ------------------------------------------------------ | +| **Description** | `true`の場合、ユーザは範囲と対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### dualKnobs + +| | | +| --------------- | ------------------------ | +| **Description** | 2 つのノブを表示します。 | +| **Attribute** | `dual-knobs` | +| **Type** | `boolean` | +| **Default** | `false` | + +### label + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | コントロールのラベルとして表示するテキスト。プレーンテキストのみが必要な場合は `label` スロットよりもこちらを使用する。両方を使用する場合は、`label` プロパティが `label` スロットよりも優先される。 | +| **Attribute** | `label` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### labelPlacement + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | 範囲に対するラベルの位置。start"`：ラベルはLTRでは範囲の左側、RTLでは右側に表示される。end"`：ラベルは LTR では範囲の右側、RTL では左側に表示される。fixed"`：ラベルの幅が固定される以外は `"start"` と同じ動作をします。長いテキストは省略記号("...")で切り捨てられます。積み上げ"`：ラベルは方向に関係なく範囲の上に表示されます。 | +| **Attribute** | `label-placement` | +| **Type** | `"end" \| "fixed" \| "stacked" \| "start"` | +| **Default** | `'start'` | + +### max + +| | | +| --------------- | ------------------ | +| **Description** | 範囲の最大整数値。 | +| **Attribute** | `max` | +| **Type** | `number` | +| **Default** | `100` | + +### min + +| | | +| --------------- | -------------------- | +| **Description** | 範囲の最小の整数値。 | +| **Attribute** | `min` | +| **Type** | `number` | +| **Default** | `0` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### name + +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | フォームデータとともに送信されるコントロールの名前。 | +| **Attribute** | `name` | +| **Type** | `string` | +| **Default** | `this.rangeId` | + +### pin + +| | | +| --------------- | ------------------------------------------------------------ | +| **Description** | `true`の場合、ノブを押したときに整数値のピンが表示されます。 | +| **Attribute** | `pin` | +| **Type** | `boolean` | +| **Default** | `false` | + +### pinFormatter + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ピンのテキストをフォーマットするためのコールバック。デフォルトでは、ピンのテキストは `Math.round(value)` に設定されます。 コールバック内から `this` にアクセスする必要がある場合は https://ionicframework.com/docs/troubleshooting/runtime#accessing-this を参照してください。 | +| **Attribute** | `pin-formatter` | +| **Type** | `(value: number) => string \| number` | +| **Default** | `(value: number): number => Math.round(value)` | + +### snaps + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、ノブはステッププロパティの値に基づいて等間隔に配置されたティックマークにスナップします。 | +| **Attribute** | `snaps` | +| **Type** | `boolean` | +| **Default** | `false` | + +### step + +| | | +| --------------- | ---------------------- | +| **Description** | 値の粒度を指定します。 | +| **Attribute** | `step` | +| **Type** | `number` | +| **Default** | `1` | + +### ticks + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、ステップの値に基づいてティックマークを表示します。snaps`が `true` の場合のみ適用される。 | +| **Attribute** | `ticks` | +| **Type** | `boolean` | +| **Default** | `true` | + +### value + +| | | +| --------------- | --------------------------------------------- | +| **Description** | 範囲の値です。 | +| **Attribute** | `value` | +| **Type** | `number \| { lower: number; upper: number; }` | +| **Default** | `0` | + +## Events + +| Name | Description | +| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ionBlur` | レンジの焦点が合わなくなったときに発行されます。 | +| `ionChange` | ionChange`イベントは``要素に対して、ユーザがその要素の値を変更したときに発生します。 ・ユーザがドラッグした後にノブを離したとき ・ユーザがキーボードの矢印でノブを移動したとき このイベントはプログラムで`value`プロパティを設定したときには発生しません。 | +| `ionFocus` | レンジのフォーカスが合ったときに発行されます。 | +| `ionInput` | `ionInput`イベントは、``要素に対して、値が変更されたときに発生するイベントです。`ionChange`とは異なり、`ionInput`はユーザがノブをドラッグしている間、継続して発生します。 | +| `ionKnobMoveEnd` | マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーが範囲ノブの移動を終了したときに発行されます。 | +| `ionKnobMoveStart` | マウスドラッグ、タッチジェスチャー、キーボード操作など、ユーザーがレンジノブの移動を開始したときに発行されます。 | + +## CSS Shadow Parts + +| Name | Description | +| ------------- | ---------------------------------------- | +| `bar` | バーの非アクティブな部分。 | +| `bar-active` | バーのアクティブな部分です。 | +| `knob` | 範囲をドラッグする際に使用するハンドル。 | +| `label` | 範囲を表すラベルテキスト。 | +| `pin` | ノブの上に表示されるカウンターです。 | +| `tick` | 非アクティブなティックマークです。 | +| `tick-active` | アクティブなティックマークです。 | + +## CSS Custom Properties + +| Name | Description | +| ------------------------- | -------------------------------------- | +| `--bar-background` | レンジバーの背景 | +| `--bar-background` | レンジバーの背景 | +| `--bar-background-active` | アクティブレンジバーの背景 | +| `--bar-background-active` | アクティブレンジバーの背景 | +| `--bar-border-radius` | レンジバーのボーダー半径 | +| `--bar-border-radius` | レンジバーのボーダー半径 | +| `--bar-height` | レンジバーの高さ | +| `--bar-height` | レンジバーの高さ | +| `--height` | レンジの高さ | +| `--height` | レンジの高さ | +| `--knob-background` | レンジノブの背景 | +| `--knob-background` | レンジノブの背景 | +| `--knob-border-radius` | レンジツマミのボーダー半径 | +| `--knob-border-radius` | レンジツマミのボーダー半径 | +| `--knob-box-shadow` | レンジノブのボックスシャドウ | +| `--knob-box-shadow` | レンジノブのボックスシャドウ | +| `--knob-size` | レンジツマミの大きさ | +| `--knob-size` | レンジツマミの大きさ | +| `--pin-background` | レンジピンの背景（MD mode 時のみ有効） | +| `--pin-background` | レンジピンの背景（MD mode 時のみ有効） | +| `--pin-color` | レンジピンの色（MD mode 時のみ有効） | +| `--pin-color` | レンジピンの色（MD mode 時のみ有効） | + +## Slots + +| Name | Description | +| ------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `end` | コンテンツは、LTR では範囲スライダーの右側に、RTL では左側に配置されます。 | +| `label` | 範囲に関連付けるラベルテキスト。`"labelPlacement`"プロパティを使用して、ラベルが範囲に対してどの位置に配置されるかを制御します。 | +| `start` | コンテンツは、LTR では範囲スライダーの左側に、RTL では右側に配置されます。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/refresher-content.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/refresher-content.md new file mode 100644 index 00000000000..2b70868cd28 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/refresher-content.md @@ -0,0 +1,46 @@ +--- +title: 'ion-refresher-content' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### pullingIcon + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | プルダウン開始時に表示する静的なアイコンまたはスピナーです。スピナー名を指定することで、iOS デバイスでプルダウン時に徐々にティックマークが表示されるようにすることができます。 | +| **Attribute** | `pulling-icon` | +| **Type** | `null \| string \| undefined` | +| **Default** | `undefined` | + +### pullingText + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | プルダウン開始時に表示したいテキストです。 `pullingText` は、文字列としてプレーンテキストまたは HTML のいずれかを受け取ることができます。通常 HTML 用に予約されている文字を表示するには、エスケープする必要があります。例えば、``は `<Ionic>` になります：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) デフォルトでは、コンテンツはプレーンテキストとして解析されます。カスタム HTML を使用するには、Ionic の設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。 | +| **Attribute** | `pulling-text` | +| **Type** | `IonicSafeString \| string \| undefined` | +| **Default** | `undefined` | + +### refreshingSpinner + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | リフレッシュ開始を示すアニメーション SVG スピナー | +| **Attribute** | `refreshing-spinner` | +| **Type** | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| null \| undefined` | +| **Default** | `undefined` | + +### refreshingText + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | リフレッシュを行う際に表示したいテキストです。 `refreshingText` には、文字列としてプレーンテキストまたは HTML のいずれかを指定することができます。通常 HTML 用に予約されている文字を表示するには、エスケープする必要があります。例えば、``は `<Ionic>` となります：[セキュリティ・ドキュメント](https://ionicframework.com/docs/faq/security) デフォルトでは、コンテンツはプレーンテキストとして解析されます。カスタム HTML を使用するには、Ionic の設定で `innerHTMLTemplatesEnabled` を `true` に設定する必要があります。 | +| **Attribute** | `refreshing-text` | +| **Type** | `IonicSafeString \| string \| undefined` | +| **Default** | `undefined` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/refresher.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/refresher.md new file mode 100644 index 00000000000..9b91e812b9b --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/refresher.md @@ -0,0 +1,114 @@ +--- +title: 'ion-refresher' +demoUrl: '/docs/demos/api/refresher/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/refresher/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-refresher: Pull-to-Refresh Page Content on Ionic Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### closeDuration + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | リフレッシャーを閉じるのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。 | +| **Attribute** | `close-duration` | +| **Type** | `string` | +| **Default** | `'280ms'` | + +### disabled + +| | | +| --------------- | -------------------------------------------- | +| **Description** | `true`の場合、リフレッシャーは非表示となる。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### pullFactor + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 引きの速さを何倍にするか。引きのアニメーションを遅くするには、`1`より小さい数値を渡します。引っ張る速度を速くするには、`1`より大きい数値を渡します。デフォルト値は `1` で、カーソルの速度と同じです。もし負の値が渡された場合、代わりに `1` が係数となります。 例えば例えば、渡された値が `1.2` で、コンテンツが `10` ピクセルでドラッグされた場合、`10` ピクセルではなく、`12` ピクセルでドラッグされます（20% の増加です）。渡された値が `0.8` の場合、ドラッグされた量はカーソルの移動量より少ない `8` ピクセルとなります。 リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。 | +| **Attribute** | `pull-factor` | +| **Type** | `number` | +| **Default** | `1` | + +### pullMax + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | リフレッシャーが自動的に `refreshing` 状態になるまでの、引っ張りの最大距離。デフォルトは `pullMin + 60` の結果です。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシャーが有効になります。 | +| **Attribute** | `pull-max` | +| **Type** | `number` | +| **Default** | `this.pullMin + 60` | + +### pullMin + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | リフレッシャーが `refreshing` 状態になるまでに、ユーザが引き下げるべき最小距離。リフレッシャーコンテンツがスピナーを使用する場合は適用されず、ネイティブリフレッシャーが有効になる。 | +| **Attribute** | `pull-min` | +| **Type** | `number` | +| **Default** | `60` | + +### snapbackDuration + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | リフレッシャーが `refreshing` 状態にスナップバックするのにかかる時間。リフレッシュコンテンツがスピナーを使用している場合は適用されず、ネイティブリフレッシュが有効になります。 | +| **Attribute** | `snapback-duration` | +| **Type** | `string` | +| **Default** | `'280ms'` | + +## Events + +| Name | Description | +| ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ionPull` | ユーザーがコンテンツを引き下げ、リフレッシャーを露出している間に発行されます。 | +| `ionRefresh` | ユーザーがコンテンツから手を離し、`pullMin`を越えて下に引いたとき、またはコンテンツを下に引き、pullMax を越えたときに発行されます。リフレッシャーの状態を `refreshing` に更新します。非同期処理が完了したら `complete()` メソッドを呼び出す必要があります。 | +| `ionStart` | ユーザーが引き下げを開始するときに発行されます。 | + +## Methods + +### cancel + +| | | +| --------------- | ------------------------------------------------------------------ | +| **Description** | リフレッシュの状態を `refreshing` から `cancelling` に変更します。 | +| **Signature** | `cancel() => Promise` | + +### complete + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 非同期操作が完了したら `complete()` を呼び出します。例えば、`refreshing`状態は、アプリが AJAX リクエストからより多くのデータを受信するなど、非同期操作を実行している間です。データを受信したら、このメソッドを呼び出して、リフレッシュが完了したことを示し、リフレッシュャを閉じます。このメソッドは、リフレッシャーの状態を `refreshing` から `completing` に変更します。 | +| **Signature** | `complete() => Promise` | + +### getProgress + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ユーザーがどれだけ下に引っ張られたかを表す数値です。数値 `0` は、ユーザーが全く下に引いていないことを表します。数値 `1` および `1` より大きい数値は、ユーザーが手を離したときに更新が行われるほど十分に下に引っ張られたことを表します。もしユーザーが手を離し、数値が `1` より小さい場合は、更新は行われず、コンテンツは元の位置に戻ります。 | +| **Signature** | `getProgress() => Promise` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/reorder-group.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/reorder-group.md new file mode 100644 index 00000000000..9c3f8d76bf8 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/reorder-group.md @@ -0,0 +1,42 @@ +--- +title: 'ion-reorder-group' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-reorder-group: Wrapper Component for Ionic Framework Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### disabled + +| | | +| --------------- | ---------------------------------------- | +| **Description** | `true`の場合、リオーダーは非表示になる。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `true` | + +## Events + +| Name | Description | +| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ionItemReorder` | 再注文アクションを完了させるためにリッスンする必要があるイベント。イベントが発生したら、再注文のアクションを確定するために `complete()` メソッドを呼び出す必要があります。 | + +## Methods + +### complete + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | 再注文操作を完了します。ionItemReorder`イベントで呼び出す必要がある。 アイテムのリストが渡された場合、リストは適切な順序に並び替えられ、返される。 パラメータが渡されない場合、または`true`が渡された場合、並べ替えは完了し、アイテムはドラッグされた位置に留まります。`false`が渡された場合、並び替えは完了し、アイテムは元の位置に跳ね返されます。 | +| **Signature** | `complete(listOrReorder?: boolean \| any[]) => Promise` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/reorder.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/reorder.md new file mode 100644 index 00000000000..52439b3ecef --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/reorder.md @@ -0,0 +1,26 @@ +--- +title: 'ion-reorder' +demoUrl: '/docs/demos/api/reorder/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/reorder/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Reorder | ion-reorder: Drag and Drop Icon to Reorder Items + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## CSS Shadow Parts + +| Name | Description | +| ------ | ----------------------------------------------------- | +| `icon` | リオーダーハンドルのアイコンです（ion-icon を使用）。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/ripple-effect.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/ripple-effect.md new file mode 100644 index 00000000000..c7059edf2ea --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/ripple-effect.md @@ -0,0 +1,38 @@ +--- +title: 'ion-ripple-effect' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-ripple-effect | Ripple Effect Button Component for Ionic Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### type + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | リップル効果の種類を設定します： - `bounded`：リップル効果はユーザーのクリック位置から拡大します - `unbounded`：リップル効果はボタンの中心から拡大し、コンテナを溢れさせます。 注：境界のある波紋のサーフェスは、overflow プロパティを hidden に設定し、境界のない波紋のサーフェスは、visible に設定する必要があります。 | +| **Attribute** | `type` | +| **Type** | `"bounded" \| "unbounded"` | +| **Default** | `'bounded'` | + +## Methods + +### addRipple + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | 親要素に波及効果を付加します。 | +| **Signature** | `addRipple(x: number, y: number) => Promise<() => void>` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/route-redirect.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/route-redirect.md new file mode 100644 index 00000000000..72decfa72f1 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/route-redirect.md @@ -0,0 +1,42 @@ +--- +title: 'ion-route-redirect' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-route-redirect Plugin: Redirect 'from' a URL 'to' Another URL + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### from + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | リダイレクトルートは、ある URL から別の URL へリダイレクトさせるルートです。このプロパティは、その "from" URL です。このプロパティを適用するには、ナビゲートされる URL と完全に一致する必要があります。 この値で指定されるパスは、最初の `/` スラッシュが指定されていない場合でも、常に絶対パスとなります。 | +| **Attribute** | `from` | +| **Type** | `string` | +| **Default** | `undefined` | + +### to + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | リダイレクトルートは、ある URL から別の URL へリダイレクトさせるルートです。このプロパティは、その "to "URL です。定義された `ion-route-redirect` ルールにマッチした場合、ルータはこのプロパティで指定されたパスにリダイレクトします。 このプロパティの値は、常に `ion-router` で定義されたルートの範囲内の絶対パスであり、別のルータや別のドメインへのリダイレクトを実行するために使用することはできません。 これは仮想的なリダイレクトであり、実際のブラウザのリフレッシュを引き起こすことはないことに注意してください。 このプロパティが指定されていない場合、または値が `undefined` の場合、たとえ "from" の値が一致しても、リダイレクトルート全体は noop となります。 | +| **Attribute** | `to` | +| **Type** | `null \| string \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ionRouteRedirectChanged` | このルールの値が DOM から追加/削除されたり、パブリックプロパティが変更されたりしたときに発生する内部イベントです。 ion-router`は、ルータルールの内部レジストリを更新するために、このイベントを捕捉します。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/route.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/route.md new file mode 100644 index 00000000000..8b29fc9269d --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/route.md @@ -0,0 +1,69 @@ +--- +title: 'ion-route' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-route: API Route Component for Ionic Framework Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### beforeEnter + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ルーターがアクセスしようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。 | +| **Attribute** | `before-enter` | +| **Type** | `(() => NavigationHookResult \| Promise) \| undefined` | +| **Default** | `undefined` | + +### beforeLeave + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ルートが離脱しようとしたときに発生するナビゲーションフックです。 `true`を返すとナビゲーションを進めることができ、`false`を返すとナビゲーションをキャンセルすることができます。NavigationHookOptions`オブジェクトを返すと、ルーターは指定されたパスにリダイレクトするようになります。 | +| **Attribute** | `before-leave` | +| **Type** | `(() => NavigationHookResult \| Promise) \| undefined` | +| **Default** | `undefined` | + +### component + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ルートが一致したときに、ナビゲーションアウトレット（`ion-tabs`、`ion-nav`）にロード/選択するコンポーネントの名前。 このプロパティの値は、常にロードするコンポーネントのタグ名とは限らず、`ion-tabs`では、実際には選択する `ion-tab` の名前を指します。 | +| **Attribute** | `component` | +| **Type** | `string` | +| **Default** | `undefined` | + +### componentProps + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------ | +| **Description** | キーとなる値 `{ 'red': true, 'blue':'white'}` には、レンダリング時に定義されたコンポーネントに渡すべき小道具が含まれる。 | +| **Attribute** | `component-props` | +| **Type** | `undefined \| { [key: string]: any; }` | +| **Default** | `undefined` | + +### url + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | このルートを適用するために一致させる必要がある相対パスです。 express js と同様にパスを受け付けるので、/foo/:bar のような url でパラメータを定義し、受信する props で bar を利用することができます。 | +| **Attribute** | `url` | +| **Type** | `string` | +| **Default** | `''` | + +## Events + +| Name | Description | +| --------------------- | -------------------------------------------------------------------------- | +| `ionRouteDataChanged` | このルートがいつ変更されたかを知るために `ion-router` が内部で使用します。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/router-link.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/router-link.md new file mode 100644 index 00000000000..30acd846955 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/router-link.md @@ -0,0 +1,83 @@ +--- +title: 'ion-router-link' +demoUrl: '/docs/demos/api/router-link/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/router-link/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Router Link | Navigating The ion-router-link Component + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### href + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。 | +| **Attribute** | `href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### rel + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。 | +| **Attribute** | `rel` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### routerAnimation + +| | | +| --------------- | ---------------------------------------------------------------------------------------------- | +| **Description** | ルータを使用する場合、`href`を使用して別のページに移動する際の遷移アニメーションを指定します。 | +| **Attribute** | `router-animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### routerDirection + +| | | +| --------------- | ------------------------------------------------------------------------------------ | +| **Description** | ルータを使用する場合、`href`を使用して他のページに移動する際の遷移方向を指定します。 | +| **Attribute** | `router-direction` | +| **Type** | `"back" \| "forward" \| "root"` | +| **Default** | `'forward'` | + +### target + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | リンク先の URL を表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. | +| **Attribute** | `target` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +## CSS Custom Properties + +| Name | Description | +| -------------- | ---------------------- | +| `--background` | ルーターリンクの背景 | +| `--color` | ルーターリンクの文字色 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/router-outlet.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/router-outlet.md new file mode 100644 index 00000000000..6a9b70abe07 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/router-outlet.md @@ -0,0 +1,47 @@ +--- +title: 'ion-router-outlet' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Ion-Router-Outlet for Animation & Stacked Navigation | Ionic + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### animated + +| | | +| --------------- | -------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、ルータ・アウトレットはコンポーネントの遷移をアニメーションで表現する必要があります。 | +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `true` | + +### animation + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------- | +| **Description** | このプロパティは、AnimationBuilder の機能を使用して、カスタムトランジションを作成することができます。 | +| **Attribute** | `animation` | +| **Type** | `((baseEl: any, opts?: any) => Animation) \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `getIonMode(this)` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/router.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/router.md new file mode 100644 index 00000000000..805228c6214 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/router.md @@ -0,0 +1,59 @@ +--- +title: 'ion-router' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-router: Router Component to Coordinate URL Navigation + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### root + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | URL のマッチング時に使用するルートパスです。デフォルトでは"/"に設定されていますが、すべての URL パスに対して代替プレフィックスを指定することができます。 | +| **Attribute** | `root` | +| **Type** | `string` | +| **Default** | `'/'` | + +### useHash + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ルーターは 2 つの "モード "で動作します。- ハッシュを使用します。ハッシュあり： `/index.html#/path/to/page` - ハッシュなし。ハッシュなし： `/path/to/page` - ハッシュあり： `/index.html#/path/to/page` どちらを使うかは、アプリの要件や配置される場所によって異なるかもしれません。 通常、"ハッシュなし"ナビゲーションは SEO に有利で、よりユーザーフレンドリーですが、適切に動作させるためにサーバー側の追加設定が必要な場合があります。 一方、ハッシュ・ナビゲーションは、ファイル・プロトコルで動作するため、導入が非常に簡単です。 デフォルトでは、このプロパティは `true` です。ハッシュのない URL を許可するには `false` に変更します。 | +| **Attribute** | `use-hash` | +| **Type** | `boolean` | +| **Default** | `true` | + +## Events + +| Name | Description | +| -------------------- | ------------------------------------------------------ | +| `ionRouteDidChange` | ルートが変更されたときに発行されます。 | +| `ionRouteWillChange` | ルートが変更されようとするときに発行されます。イベント | + +## Methods + +### back + +| | | +| --------------- | --------------------------------- | +| **Description** | window.history で前ページに戻る。 | +| **Signature** | `back() => Promise` | + +### push + +| | | +| --------------- | --------------------------------------------------------------------------------------------------- | +| **Description** | 指定されたパスに移動します。 | +| **Signature** | `push(path: string, direction?: RouterDirection, animation?: AnimationBuilder) => Promise` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/row.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/row.md new file mode 100644 index 00000000000..22a5dd688d1 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/row.md @@ -0,0 +1,18 @@ +--- +title: 'ion-row' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-row: Horizontal Row Components and Alignment | Ionic API Docs + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/searchbar.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/searchbar.md new file mode 100644 index 00000000000..17c4040e17a --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/searchbar.md @@ -0,0 +1,283 @@ +--- +title: 'ion-searchbar' +demoUrl: '/docs/demos/api/searchbar/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/searchbar/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Search Bar Icon for Keyboard Text Display | Ion-Search Bar + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### animated + +| | | +| --------------- | ------------------------------------------------------ | +| **Description** | `true`の場合、検索バーのアニメーションを有効にします。 | +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `false` | + +### autocapitalize + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプション off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. | +| **Attribute** | `autocapitalize` | +| **Type** | `string` | +| **Default** | `'off'` | + +### autocomplete + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Input のオートコンプリートプロパティを設定します。 | +| **Attribute** | `autocomplete` | +| **Type** | `"name" \| "email" \| "tel" \| "url" \| "on" \| "off" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "photo"` | +| **Default** | `'off'` | + +### autocorrect + +| | | +| --------------- | ---------------------------------------------- | +| **Description** | Input のオートコレクトプロパティを設定します。 | +| **Attribute** | `autocorrect` | +| **Type** | `"off" \| "on"` | +| **Default** | `'off'` | + +### cancelButtonIcon + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------- | +| **Description** | キャンセルボタンのアイコンを設定します。 `md` mode のみに適用されます。デフォルトは `arrow-back-sharp` です。 | +| **Attribute** | `cancel-button-icon` | +| **Type** | `string` | +| **Default** | `config.get('backButtonIcon', arrowBackSharp) as string` | + +### cancelButtonText + +| | | +| --------------- | ------------------------------------------------------- | +| **Description** | Set the cancel button text. Only applies to `ios` mode. | +| **Attribute** | `cancel-button-text` | +| **Type** | `string` | +| **Default** | `'Cancel'` | + +### clearIcon + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------- | +| **Description** | クリアアイコンを設定します。デフォルトは `ios` の場合は `close-circle` 、`md` の場合は `close-sharp` です。 | +| **Attribute** | `clear-icon` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### debounce + +| | | +| --------------- | -------------------------------------------------------------------------------------- | +| **Description** | キーを押すたびに `ionInput` イベントが発生するまでの待ち時間をミリ秒単位で設定します。 | +| **Attribute** | `debounce` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | --------------------------------------------------------- | +| **Description** | `true`の場合、ユーザは Input と対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### enterkeyhint + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | +| **Attribute** | `enterkeyhint` | +| **Type** | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | +| **Default** | `undefined` | + +### inputmode + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | +| **Attribute** | `inputmode` | +| **Type** | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | +| **Default** | `undefined` | + +### maxlength + +| | | +| --------------- | ------------------------------------------------------ | +| **Description** | この属性は、ユーザが入力できる最大文字数を指定します。 | +| **Attribute** | `maxlength` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### minlength + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | この属性は、ユーザーが入力できる最小の文字数を指定します。 | +| **Attribute** | `minlength` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### name + +| | | +| --------------- | -------------------------------------------------------------------------------------------- | +| **Description** | フォームで使用する場合は、フォーム・データと一緒に送信されるコントロールの名前を設定します。 | +| **Attribute** | `name` | +| **Type** | `string` | +| **Default** | `this.inputId` | + +### placeholder + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Input の placeholder を設定します。 `placeholder` には、文字列としてプレーンテキストまたは HTML のいずれかを指定することができます。通常 HTML 用に予約されている文字を表示するには、エスケープする必要があります。例えば `` は `<Ionic>` になります。詳細は [セキュリティ・ドキュメンテーション](https://ionicframework.com/docs/faq/security) をご覧ください。 | +| **Attribute** | `placeholder` | +| **Type** | `string` | +| **Default** | `'Search'` | + +### searchIcon + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 検索アイコンとして使用するアイコンです。デフォルトは `ios` mode では `search-outline` 、`md` mode では `search-sharp` です。 | +| **Attribute** | `search-icon` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### showCancelButton + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | キャンセルボタンに関する動作を設定します。デフォルトは `"never"` です。focus"` に設定すると、フォーカスが当たったときにキャンセルボタンを表示します。never"`に設定すると、キャンセルボタンを非表示にします。always"` に設定すると、フォーカスの状態に関係なくキャンセルボタンを表示します。 | +| **Attribute** | `show-cancel-button` | +| **Type** | `"always" \| "focus" \| "never"` | +| **Default** | `'never'` | + +### showClearButton + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | クリアボタンに関する動作を設定します。デフォルトは `"focus"` です。`"focus"`に設定すると、Input が空でない場合、フォーカス時にクリアボタンを表示します。`"never"`に設定すると、クリアボタンを非表示にします。`"always"`に設定すると、フォーカスの状態に関係なくクリアボタンを表示するが、Input が空でない場合にのみクリアボタンを表示します。 | +| **Attribute** | `show-clear-button` | +| **Type** | `"always" \| "focus" \| "never"` | +| **Default** | `'always'` | + +### spellcheck + +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | `true`の場合、入力値のスペルチェックを有効にします。 | +| **Attribute** | `spellcheck` | +| **Type** | `boolean` | +| **Default** | `false` | + +### type + +| | | +| --------------- | --------------------------------------------------------------------------- | +| **Description** | Input の種類を設定します。 | +| **Attribute** | `type` | +| **Type** | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | +| **Default** | `'search'` | + +### value + +| | | +| --------------- | ----------------------------- | +| **Description** | 検索バーの値。 | +| **Attribute** | `value` | +| **Type** | `null \| string \| undefined` | +| **Default** | `''` | + +## Events + +| Name | Description | +| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `ionBlur` | Input のフォーカスが外れたときに発行されます。 | +| `ionCancel` | キャンセルボタンがクリックされたときに発行されます。 | +| `ionChange` | onChange`イベントは、ユーザが要素の値を変更したときに`` 要素に対して発生する。ionInput` イベントとは異なり、要素の値が変更されるたびに `ionChange` イベントが発生するわけではない。 ionChange`イベントは、ユーザによって値が変更されたときに発生する。これは、要素のフォーカスが外れたときや、"Enter" キーが押されたときに発生する。また、クリアボタンやキャンセルボタンをクリックしたときにも`ionChange`イベントが発生することがある。 プログラムで`value` プロパティを設定した場合には、このイベントは発生しない。 | +| `ionClear` | Clear Input ボタンがクリックされたときに発行されます。 | +| `ionFocus` | Input にフォーカスが当たったときに発行されます。 | +| `ionInput` | ion-searchbar`要素の `value` が変更されたときに発行されます。 | + +## Methods + +### getInputElement + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | 要素の内部で使用されているネイティブの `` 要素を返します。 | +| **Signature** | `getInputElement() => Promise` | + +### setFocus + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ion-searchbar`のネイティブ`input`にフォーカスを設定する。グローバルな`input.focus()`の代わりにこのメソッドを使用する。 ページ入力時に入力にフォーカスを当てたい開発者は、`ionViewDidEnter()`ライフサイクルメソッド内で`setFocus()`を呼び出す必要がある。 オーバーレイが表示されたときに入力にフォーカスを当てたい開発者は、`didPresent`が解決した後に`setFocus` を呼び出してください。 詳細については、[managing focus](/docs/developing/managing-focus)を参照してください。 | +| **Signature** | `setFocus() => Promise` | + +## CSS Custom Properties + +| Name | Description | +| --------------------------- | ------------------------------------- | +| `--background` | 検索バーの Input の背景 | +| `--background` | 検索バーの Input の背景 | +| `--border-radius` | 検索バーの Input のボーダー半径 | +| `--border-radius` | 検索バーの Input のボーダー半径 | +| `--box-shadow` | 検索バーの Input のボックスシャドウ | +| `--box-shadow` | 検索バーの Input のボックスシャドウ | +| `--cancel-button-color` | 検索バーのキャンセルボタンの色 | +| `--cancel-button-color` | 検索バーのキャンセルボタンの色 | +| `--clear-button-color` | 検索バーのクリアボタンの色 | +| `--clear-button-color` | 検索バーのクリアボタンの色 | +| `--color` | 検索バーのテキストの色 | +| `--color` | 検索バーのテキストの色 | +| `--icon-color` | 検索バーのアイコンの色 | +| `--icon-color` | 検索バーのアイコンの色 | +| `--placeholder-color` | 検索バーの Placeholder の色 | +| `--placeholder-color` | 検索バーの Placeholder の色 | +| `--placeholder-font-style` | 検索バーの Placeholder の Font Style | +| `--placeholder-font-style` | 検索バーの Placeholder の Font Style | +| `--placeholder-font-weight` | 検索バーの Placeholder の Font Weight | +| `--placeholder-font-weight` | 検索バーの Placeholder の Font Weight | +| `--placeholder-opacity` | 検索バーの Placeholder の不透明度 | +| `--placeholder-opacity` | 検索バーの Placeholder の不透明度 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/segment-button.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/segment-button.md new file mode 100644 index 00000000000..b55fedd73fb --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/segment-button.md @@ -0,0 +1,143 @@ +--- +title: 'ion-segment-button' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-segment-button | Segment Button Icon and Segment Value + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### contentId + +| | | +| --------------- | ------------------------------ | +| **Description** | セグメントコンテンツの `id` 。 | +| **Attribute** | `content-id` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | -------------------------------------------------------------------- | +| **Description** | `true`の場合、ユーザーはセグメントボタンを操作することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### layout + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------- | +| **Description** | セグメント内のテキストとアイコンのレイアウトを設定します。 | +| **Attribute** | `layout` | +| **Type** | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | +| **Default** | `'icon-top'` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### type + +| | | +| --------------- | --------------------------------- | +| **Description** | ボタンの種類です。 | +| **Attribute** | `type` | +| **Type** | `"button" \| "reset" \| "submit"` | +| **Default** | `'button'` | + +### value + +| | | +| --------------- | -------------------------- | +| **Description** | セグメントボタンの値です。 | +| **Attribute** | `value` | +| **Type** | `number \| string` | +| **Default** | `'ion-sb-' + ids++` | + +## CSS Shadow Parts + +| Name | Description | +| ---------------------- | -------------------------------------------------------------------- | +| `indicator` | チェックしたセグメントボタンに表示されるインジケーターです。 | +| `indicator-background` | チェックしたセグメントボタンに表示されるインジケータの背景要素です。 | +| `native` | すべての子要素を包むネイティブ HTML ボタン要素。 | + +## CSS Custom Properties + +| Name | Description | +| ------------------------------ | -------------------------------------------------------------------------------------------------- | +| `--background` | セグメントボタンの背景 | +| `--background` | セグメントボタンの背景 | +| `--background-checked` | チェックしたセグメントボタンの背景 | +| `--background-checked` | チェックしたセグメントボタンの背景 | +| `--background-focused` | タブキーでフォーカスされたときのセグメントボタンの背景 | +| `--background-focused` | タブキーでフォーカスされたときのセグメントボタンの背景 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのセグメントボタンの背景の不透明度 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのセグメントボタンの背景の不透明度 | +| `--background-hover` | セグメントボタンがホバーされたときの背景 | +| `--background-hover` | セグメントボタンがホバーされたときの背景 | +| `--background-hover-opacity` | ホバー時のセグメントボタンの背景の不透明度 | +| `--background-hover-opacity` | ホバー時のセグメントボタンの背景の不透明度 | +| `--border-color` | セグメントボタンのボーダーの色 | +| `--border-color` | セグメントボタンのボーダーの色 | +| `--border-radius` | セグメントボタンのボーダーの半径 | +| `--border-radius` | セグメントボタンのボーダーの半径 | +| `--border-style` | セグメントボタンのボーダーのスタイル | +| `--border-style` | セグメントボタンのボーダーのスタイル | +| `--border-width` | セグメントボタンの枠の幅 | +| `--border-width` | セグメントボタンの枠の幅 | +| `--color` | セグメントボタンの色 | +| `--color` | セグメントボタンの色 | +| `--color-checked` | チェックしたセグメントボタンの色 | +| `--color-checked` | チェックしたセグメントボタンの色 | +| `--color-focused` | タブキーでフォーカスしたときのセグメントボタンの色 | +| `--color-focused` | タブキーでフォーカスしたときのセグメントボタンの色 | +| `--color-hover` | ホバー時のセグメントボタンの色 | +| `--color-hover` | ホバー時のセグメントボタンの色 | +| `--indicator-box-shadow` | チェックしたセグメントボタンのインジケーターにボックスシャドウを付ける | +| `--indicator-box-shadow` | チェックしたセグメントボタンのインジケーターにボックスシャドウを付ける | +| `--indicator-color` | チェックしたセグメントボタンのインジケーターの色 | +| `--indicator-color` | チェックしたセグメントボタンのインジケーターの色 | +| `--indicator-height` | チェックしたセグメントボタンのインジケータの高さ | +| `--indicator-height` | チェックしたセグメントボタンのインジケータの高さ | +| `--indicator-transform` | チェックされたセグメントボタンのインジケータのトランスフォーム | +| `--indicator-transform` | チェックされたセグメントボタンのインジケータのトランスフォーム | +| `--indicator-transition` | チェックしたセグメントボタンのインジケーターの遷移 | +| `--indicator-transition` | チェックしたセグメントボタンのインジケーターの遷移 | +| `--margin-bottom` | セグメントボタンの Bottom Margin | +| `--margin-bottom` | セグメントボタンの Bottom Margin | +| `--margin-end` | セグメントボタンの方向が左から右の場合は Right Margin、右から左の場合は Left Margin | +| `--margin-end` | セグメントボタンの方向が左から右の場合は Right Margin、右から左の場合は Left Margin | +| `--margin-start` | セグメントボタンの方向が左から右の場合は Left Margin、右から左の場合は Right Margin | +| `--margin-start` | セグメントボタンの方向が左から右の場合は Left Margin、右から左の場合は Right Margin | +| `--margin-top` | セグメントボタンの Top Margin | +| `--margin-top` | セグメントボタンの Top Margin | +| `--padding-bottom` | セグメントボタンの Bottom Padding | +| `--padding-bottom` | セグメントボタンの Bottom Padding | +| `--padding-end` | セグメントボタンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-end` | セグメントボタンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-start` | セグメントボタンの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-start` | セグメントボタンの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-top` | セグメントボタンの Top Padding | +| `--padding-top` | セグメントボタンの Top Padding | +| `--transition` | セグメントボタンの遷移 | +| `--transition` | セグメントボタンの遷移 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/segment-content.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/segment-content.md new file mode 100644 index 00000000000..0eb6f398d25 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/segment-content.md @@ -0,0 +1,10 @@ +--- +title: 'ion-segment-content' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/segment-view.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/segment-view.md new file mode 100644 index 00000000000..81e54702245 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/segment-view.md @@ -0,0 +1,27 @@ +--- +title: 'ion-segment-view' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### disabled + +| | | +| --------------- | --------------------------------------------- | +| **Description** | true`の場合、セグメントビューは操作できない。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +## Events + +| Name | Description | +| ---------------------- | ---------------------------------------------------- | +| `ionSegmentViewScroll` | セグメントビューがスクロールされたときに発せられる。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/segment.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/segment.md new file mode 100644 index 00000000000..873520349bc --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/segment.md @@ -0,0 +1,98 @@ +--- +title: 'ion-segment' +demoUrl: '/docs/demos/api/segment/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/segment/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-segment: API Documentation for Segmented Controls + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | -------------------------------------------------------------- | +| **Description** | `true`の場合、ユーザーはセグメントと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### scrollable + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、セグメントボタンはオーバーフローし、ユーザーはスワイプしてそれらを見ることができます。また、スワイプして隠れたボタンを見るために、ボタンの間でインジケータをドラッグするジェスチャーを無効にします。 | +| **Attribute** | `scrollable` | +| **Type** | `boolean` | +| **Default** | `false` | + +### selectOnFocus + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、キーボードで `ion-segment-button` に移動すると、その要素にフォーカスが当たって選択される。 `false` の場合、キーボードによるナビゲーションは `ion-segment-button` 要素にのみフォーカスを当てます。 | +| **Attribute** | `select-on-focus` | +| **Type** | `boolean` | +| **Default** | `false` | + +### swipeGesture + +| | | +| --------------- | ------------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、ユーザーはセグメントボタンの間をスワイプしてアクティブにすることができます。 | +| **Attribute** | `swipe-gesture` | +| **Type** | `boolean` | +| **Default** | `true` | + +### value + +| | | +| --------------- | ------------------------------- | +| **Description** | セグメントの価値 | +| **Attribute** | `value` | +| **Type** | `number \| string \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ionChange` | value プロパティが変更され、`ion-segment`からドラッグしていたポインタが解放されたときに発行される。 プログラムで `value` プロパティを設定した場合は、このイベントは発生しない。 | + +## CSS Custom Properties + +| Name | Description | +| -------------- | ---------------------- | +| `--background` | セグメントボタンの背景 | +| `--background` | セグメントボタンの背景 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/select-modal.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/select-modal.md new file mode 100644 index 00000000000..af70d689c47 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/select-modal.md @@ -0,0 +1,39 @@ +--- +title: 'ion-select-modal' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### header + +| | | +| --------------- | --------------------- | +| **Description** | | +| **Attribute** | `header` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### multiple + +| | | +| --------------- | ---------------------- | +| **Description** | | +| **Attribute** | `multiple` | +| **Type** | `boolean \| undefined` | +| **Default** | `undefined` | + +### options + +| | | +| --------------- | --------------------- | +| **Description** | | +| **Attribute** | `options` | +| **Type** | `SelectModalOption[]` | +| **Default** | `[]` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/select-option.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/select-option.md new file mode 100644 index 00000000000..f6f1b77dc56 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/select-option.md @@ -0,0 +1,38 @@ +--- +title: 'ion-select-option' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Select Option | What Is An Option Select on Ionic Framework Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### disabled + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | `true`の場合、ユーザは選択オプションと対話することができません。このプロパティは、`interface="action-sheet"`の場合には適用されない。なぜなら、`ion-action-sheet`はボタンを無効にすることができないからです。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### value + +| | | +| --------------- | ---------------------------- | +| **Description** | オプションのテキスト値です。 | +| **Attribute** | `value` | +| **Type** | `any` | +| **Default** | `undefined` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/select.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/select.md new file mode 100644 index 00000000000..518f5f72121 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/select.md @@ -0,0 +1,306 @@ +--- +title: 'ion-select' +demoUrl: '/docs/demos/api/select/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/select/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-select: Select One or Multiple Value Boxes or Placeholders + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### cancelText + +| | | +| --------------- | ---------------------------------------- | +| **Description** | キャンセルボタンに表示するテキストです。 | +| **Attribute** | `cancel-text` | +| **Type** | `string` | +| **Default** | `'Cancel'` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです：`"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色についての詳細は [theming](/docs/theming/basics) を参照してください。 このプロパティは、modern select 構文を使用する場合にのみ利用可能です。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### compareWith + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | このプロパティを使用すると、開発者は、ion-select で選択されたオプションを決定するときにオブジェクトを比較するためのカスタム関数またはプロパティ名を指定できます。指定しない場合、デフォルトの動作では比較に厳密な等式 (===) が使用されます。 | +| **Attribute** | `compare-with` | +| **Type** | `((currentValue: any, compareValue: any) => boolean) \| null \| string \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | `true`の場合、ユーザはセレクトと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### errorText + +| | | +| --------------- | ----------------------------------------------------------------------------- | +| **Description** | Text that is placed under the select and displayed when an error is detected. | +| **Attribute** | `error-text` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### expandedIcon + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | セレクトが開いているときに表示するトグルアイコン。定義されている場合、`md`モードでのアイコン回転の動作は無効になる。未定義の場合、セレクトが開いているときも閉じているときも `toggleIcon` が使用される。 | +| **Attribute** | `expanded-icon` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### fill + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アイテムの塗りつぶし。もし `"solid"` ならば、アイテムは背景を持つようになります。もし `"outline"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。 | +| **Attribute** | `fill` | +| **Type** | `"outline" \| "solid" \| undefined` | +| **Default** | `undefined` | + +### helperText + +| | | +| --------------- | ----------------------------------------------------------------------------- | +| **Description** | Text that is placed under the select and displayed when no error is detected. | +| **Attribute** | `helper-text` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### interface + +| | | +| --------------- | -------------------------------------------------------------------------------------- | +| **Description** | セレクトが使用するインターフェース：action-sheet`, `popover`, `alert`, または `modal`. | +| **Attribute** | `interface` | +| **Type** | `"action-sheet" \| "alert" \| "modal" \| "popover"` | +| **Default** | `'alert'` | + +### interfaceOptions + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | alert`、`action-sheet`、`popover`インターフェースが取ることができる追加オプション。各インターフェイスの作成オプションについては、[ion-alert docs](./alert), [ion-action-sheet docs](./action-sheet), [ion-popover docs](./popover), [ion-modal docs](./modal) を参照してください。 注意:`interfaceOptions`は`alert`インターフェイスの`inputs`や`buttons` を上書きしない。 | +| **Attribute** | `interface-options` | +| **Type** | `any` | +| **Default** | `{}` | + +### justify + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ラベルとセレクトを 1 行にまとめる方法。`labelPlacement`が `"floating"` または `"stacked"` に設定されている場合、ラベルとセレクトが異なる行にあるときは `justify` は適用されません。`"start"`：ラベルとセレクトは LTR では左側に、RTL では右側に表示されます。`"end"`：ラベルとセレクトは LTR では右に、RTL では左に表示されます。"space-between"`：ラベルとセレクトは行の反対側の端に表示され、2 つの要素の間にはスペースがあります。 | +| **Attribute** | `justify` | +| **Type** | `"end" \| "space-between" \| "start" \| undefined` | +| **Default** | `undefined` | + +### label + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | セレクトに関連付けられた可視ラベル。 プレーンテキストのラベルをレンダリングする必要がある場合に使用する。 label`プロパティは `label` スロットよりも優先される。 | +| **Attribute** | `label` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### labelPlacement + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | セレクトに対してラベルを配置する位置。`"start"`：ラベルは LTR ではセレクトの左側に、RTL では右側に表示されます。`"end"`：ラベルは LTR ではセレクトの右側に、RTL では左側に表示されます。"floating"`：ラベルは、セレクトがフォーカスされているか、セレクトに値がある場合、小さく表示され、セレクトの上に表示されます。それ以外の場合は、セレクトの上に表示されます。"stacked"`：ラベルは、セレクトがぼやけた状態や値がない状態でも、小さく表示され、セレクトの上に表示されます。`"fixed"`：ラベルの幅が固定される以外は、`"start"`と同じ動作になります。長いテキストは省略記号（"..."）で切り捨てられます。`"floating"`や "stacked"`を使用する場合は、selectに `value`か`placeholder` のどちらかを指定して初期化することをお勧めします。 | +| **Attribute** | `label-placement` | +| **Type** | `"end" \| "fixed" \| "floating" \| "stacked" \| "start" \| undefined` | +| **Default** | `'start'` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### multiple + +| | | +| --------------- | --------------------------------------------------------- | +| **Description** | `true`の場合、select は複数の値を受け入れることができる。 | +| **Attribute** | `multiple` | +| **Type** | `boolean` | +| **Default** | `false` | + +### name + +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | フォームデータとともに送信されるコントロールの名前。 | +| **Attribute** | `name` | +| **Type** | `string` | +| **Default** | `this.inputId` | + +### okText + +| | | +| --------------- | --------------------------------- | +| **Description** | ok ボタンに表示するテキストです。 | +| **Attribute** | `ok-text` | +| **Type** | `string` | +| **Default** | `'OK'` | + +### placeholder + +| | | +| --------------- | ------------------------------------------ | +| **Description** | セレクトが空のときに表示するテキストです。 | +| **Attribute** | `placeholder` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### required + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | If true, screen readers will announce it as a required field. This property works only for accessibility purposes, it will not prevent the form from submitting if the value is invalid. | +| **Attribute** | `required` | +| **Type** | `boolean` | +| **Default** | `false` | + +### selectedText + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | 選択されたオプションの値の代わりに表示するテキストです。 | +| **Attribute** | `selected-text` | +| **Type** | `null \| string \| undefined` | +| **Default** | `undefined` | + +### shape + +| | | +| --------------- | ------------------------------------------------------------------------- | +| **Description** | セレクトの形状を指定します。`round`の場合、境界線の半径が大きくなります。 | +| **Attribute** | `shape` | +| **Type** | `"round" \| undefined` | +| **Default** | `undefined` | + +### toggleIcon + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 使用するトグルアイコン。デフォルトは `ios` モードの場合は `chevronExpand` で、`md` モードの場合は `caretDownSharp` である。 | +| **Attribute** | `toggle-icon` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### value + +| | | +| --------------- | ------------------ | +| **Description** | セレクトの値です。 | +| **Attribute** | `value` | +| **Type** | `any` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ------------ | ------------------------------------------------------------------------------------------------------------ | +| `ionBlur` | セレクトのフォーカスが外れたときに発行されます。 | +| `ionCancel` | 選択がキャンセルされたときに発行されます。 | +| `ionChange` | 値が変更されたときに発行される。 プログラムで `value` プロパティを設定した場合は、このイベントは発生しない。 | +| `ionDismiss` | オーバーレイが解除されたときに発行されます。 | +| `ionFocus` | セレクトにフォーカスが当たったときに発行されます。 | + +## Methods + +### open + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | セレクトオーバーレイを開きます。オーバーレイは `ion-select` の `interface` プロパティによって、アラート、アクションシート、ポップオーバーのいずれかになります。 | +| **Signature** | `open(event?: UIEvent) => Promise` | + +## CSS Shadow Parts + +| Name | Description | +| ----------------- | ------------------------------------------------------------------------------------ | +| `container` | 選択テキストまたはプレースホルダーのコンテナ。 | +| `error-text` | Supporting text displayed beneath the select when the select is invalid and touched. | +| `helper-text` | Supporting text displayed beneath the select when the select is valid. | +| `icon` | セレクトアイコンのコンテナです。 | +| `label` | セレクトを表すラベルテキスト。 | +| `placeholder` | 値がないときにセレクトに表示されるテキスト。 | +| `supporting-text` | Supporting text displayed beneath the select. | +| `text` | セレクトの表示値です。 | + +## CSS Custom Properties + +| Name | Description | +| --------------------------- | ------------------------------------------------------------------------------------------ | +| `--background` | セレクトの背景 | +| `--background` | セレクトの背景 | +| `--border-color` | セレクトボーダーの色 | +| `--border-color` | セレクトボーダーの色 | +| `--border-radius` | 選択枠の半径。fill="outline "を使う場合、半径が大きいと表示が不 均一になることがあります。 | +| `--border-radius` | 選択枠の半径。fill="outline "を使う場合、半径が大きいと表示が不 均一になることがあります。 | +| `--border-style` | セレクトボーダーのスタイル | +| `--border-style` | セレクトボーダーのスタイル | +| `--border-width` | セレクトボーダーの幅 | +| `--border-width` | セレクトボーダーの幅 | +| `--highlight-color-focused` | フォーカス時のセレクトのハイライトの色 | +| `--highlight-color-focused` | フォーカス時のセレクトのハイライトの色 | +| `--highlight-color-invalid` | 無効時のセレクトのハイライトの色 | +| `--highlight-color-invalid` | 無効時のセレクトのハイライトの色 | +| `--highlight-color-valid` | 有効時のセレクトのハイライトの色 | +| `--highlight-color-valid` | 有効時のセレクトのハイライトの色 | +| `--highlight-height` | セレクトのハイライトの高さ。md モードにのみ適用される。 | +| `--highlight-height` | セレクトのハイライトの高さ。md モードにのみ適用される。 | +| `--padding-bottom` | セレクトの Bottom Padding | +| `--padding-bottom` | セレクトの Bottom Padding | +| `--padding-end` | セレクトの方向が左から右の場合は Right Padding、右から左の場合は Left Padding を行う | +| `--padding-end` | セレクトの方向が左から右の場合は Right Padding、右から左の場合は Left Padding を行う | +| `--padding-start` | セレクトの方向が左から右の場合は Left Padding、右から左の場合は Right Padding | +| `--padding-start` | セレクトの方向が左から右の場合は Left Padding、右から左の場合は Right Padding | +| `--padding-top` | セレクトの Top Padding | +| `--padding-top` | セレクトの Top Padding | +| `--placeholder-color` | セレクト Placeholder テキストの色 | +| `--placeholder-color` | セレクト Placeholder テキストの色 | +| `--placeholder-opacity` | 選択 Placeholder テキストの不透明度 | +| `--placeholder-opacity` | 選択 Placeholder テキストの不透明度 | +| `--ripple-color` | MD モード時のリップルエフェクトの色です。 | +| `--ripple-color` | MD モード時のリップルエフェクトの色です。 | + +## Slots + +| Name | Description | +| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `end` | セレクトの最後尾に表示するコンテンツ。 | +| `label` | セレクトに関連付けるラベルテキスト。labelPlacement`プロパティを使用して、select に対するラベルの位置を制御します。ラベルをカスタム HTML でレンダリングする必要がある場合に使用します。 | +| `start` | セレクトの最先端に表示するコンテンツ。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/skeleton-text.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/skeleton-text.md new file mode 100644 index 00000000000..2af9c1df265 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/skeleton-text.md @@ -0,0 +1,39 @@ +--- +title: 'ion-skeleton-text' +demoUrl: '/docs/demos/api/skeleton-text/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/skeleton-text/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Skeleton Text | Skeleton Loading Placeholder & Framework for Text + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### animated + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | `true`の場合、スケルトンテキストをアニメーションさせる。 | +| **Attribute** | `animated` | +| **Type** | `boolean` | +| **Default** | `false` | + +## CSS Custom Properties + +| Name | Description | +| ------------------ | ---------------------------------- | +| `--background` | スケルトンテキストの背景 | +| `--background-rgb` | スケルトンテキストの背景（rgb 形式 | +| `--border-radius` | スケルトンテキストのボーダー半径 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/slide.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/slide.md new file mode 100644 index 00000000000..19cf3359585 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/slide.md @@ -0,0 +1,16 @@ +--- +title: 'ion-slide' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-slide | Slide API Component for Ionic Framework Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/slides.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/slides.md new file mode 100644 index 00000000000..7ceb61a7e45 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/slides.md @@ -0,0 +1,202 @@ +--- +title: 'ion-slides' +demoUrl: '/docs/demos/api/slides/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/slides/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Ion-Slides: Mobile Touch Slider with Built-In & Custom Animation + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +## Properties + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### options + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------- | +| **Description** | swiper インスタンスに渡すオプションです。有効なオプションについては、https://swiperjs.com/swiper-api を参照してください。 | +| **Attribute** | `options` | +| **Type** | `any` | +| **Default** | `{}` | + +### pager + +| | | +| --------------- | -------------------------------------------------- | +| **Description** | もし `true` ならば、ページネーションを表示します。 | +| **Attribute** | `pager` | +| **Type** | `boolean` | +| **Default** | `false` | + +### scrollbar + +| | | +| --------------- | ------------------------------------------ | +| **Description** | `true`の場合、スクロールバーを表示します。 | +| **Attribute** | `scrollbar` | +| **Type** | `boolean` | +| **Default** | `false` | + +## Events + +| Name | Description | +| ------------------------- | ------------------------------------------------------------------- | +| `ionSlideDidChange` | アクティブスライドが変更された後に発行されます。 | +| `ionSlideDoubleTap` | ユーザがスライドのコンテナをダブルタップしたときに発生します。 | +| `ionSlideDrag` | スライダーがアクティブに移動しているときに発行されます。 | +| `ionSlideNextEnd` | 次のスライドが終了したときに発行されます。 | +| `ionSlideNextStart` | 次のスライドが開始されたときに発行されます。 | +| `ionSlidePrevEnd` | 前のスライドが終了したときに発行されます。 | +| `ionSlidePrevStart` | 前のスライドが開始されたときに発行されます。 | +| `ionSlideReachEnd` | スライダーが最後のスライドになったときに発行されます。 | +| `ionSlideReachStart` | スライダーが初期位置にあるときに発行されます。 | +| `ionSlidesDidLoad` | Swiper の初期化後に発行されます。 | +| `ionSlideTap` | ユーザがスライドのコンテナをタップ/クリックしたときに発行されます。 | +| `ionSlideTouchEnd` | ユーザーがタッチを離したときに発行されます。 | +| `ionSlideTouchStart` | ユーザーがスライダーに初めて触れたときに発行されます。 | +| `ionSlideTransitionEnd` | スライド遷移が終了したときに発行されます。 | +| `ionSlideTransitionStart` | スライド遷移が開始されたときに発行されます。 | +| `ionSlideWillChange` | アクティブスライドが変更される前に発行されます。 | + +## Methods + +### getActiveIndex + +| | | +| --------------- | ------------------------------------------------ | +| **Description** | アクティブなスライドのインデックスを取得します。 | +| **Signature** | `getActiveIndex() => Promise` | + +### getPreviousIndex + +| | | +| --------------- | ---------------------------------------- | +| **Description** | 前のスライドのインデックスを取得します。 | +| **Signature** | `getPreviousIndex() => Promise` | + +### getSwiper + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | Swiper のインスタンスを取得します。これを使用して、Swiper のフル API にアクセスします。すべての API オプションについては、https://swiperjs.com/swiper-api を参照してください。 | +| **Signature** | `getSwiper() => Promise` | + +### isBeginning + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | 現在のスライドが最初のスライドであるか否かを取得します。 | +| **Signature** | `isBeginning() => Promise` | + +### isEnd + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | 現在のスライドが最後のスライドであるか否かを取得します。 | +| **Signature** | `isEnd() => Promise` | + +### length + +| | | +| --------------- | ------------------------------ | +| **Description** | スライドの総枚数を取得します。 | +| **Signature** | `length() => Promise` | + +### lockSwipeToNext + +| | | +| --------------- | -------------------------------------------------------------- | +| **Description** | 次のスライドにスライドする機能をロックまたはアンロックします。 | +| **Signature** | `lockSwipeToNext(lock: boolean) => Promise` | + +### lockSwipeToPrev + +| | | +| --------------- | -------------------------------------------------------------- | +| **Description** | 前のスライドにスライドする機能をロックまたはアンロックします。 | +| **Signature** | `lockSwipeToPrev(lock: boolean) => Promise` | + +### lockSwipes + +| | | +| --------------- | ---------------------------------------------------------------------------- | +| **Description** | 次のスライドや前のスライドにスライドする機能をロックまたはアンロックします。 | +| **Signature** | `lockSwipes(lock: boolean) => Promise` | + +### slideNext + +| | | +| --------------- | -------------------------------------------------------------------- | +| **Description** | 次のスライドに遷移します。 | +| **Signature** | `slideNext(speed?: number, runCallbacks?: boolean) => Promise` | + +### slidePrev + +| | | +| --------------- | -------------------------------------------------------------------- | +| **Description** | 前のスライドに遷移します。 | +| **Signature** | `slidePrev(speed?: number, runCallbacks?: boolean) => Promise` | + +### slideTo + +| | | +| --------------- | --------------------------------------------------------------------------------- | +| **Description** | 指定されたスライドに遷移します。 | +| **Signature** | `slideTo(index: number, speed?: number, runCallbacks?: boolean) => Promise` | + +### startAutoplay + +| | | +| --------------- | ---------------------------------- | +| **Description** | オートプレイを開始します。 | +| **Signature** | `startAutoplay() => Promise` | + +### stopAutoplay + +| | | +| --------------- | --------------------------------- | +| **Description** | 自動再生を停止します。 | +| **Signature** | `stopAutoplay() => Promise` | + +### update + +| | | +| --------------- | -------------------------------------------------------------------------------------------- | +| **Description** | 基礎となるスライダーの実装を更新します。子スライダーを追加または削除した場合に呼び出します。 | +| **Signature** | `update() => Promise` | + +### updateAutoHeight + +| | | +| --------------- | ---------------------------------------------------------------------------------------------- | +| **Description** | speed」パラメータに等しい時間、スイーパーの高さを強制的に更新する（autoHeight が有効な場合）。 | +| **Signature** | `updateAutoHeight(speed?: number) => Promise` | + +## CSS Custom Properties + +| Name | Description | +| ---------------------------------- | -------------------------------------------------- | +| `--bullet-background` | ページネーションの箇条書きの背景 | +| `--bullet-background-active` | アクティブなページネーションバレットの背景 | +| `--progress-bar-background` | ページネーションの進行バーの背景 | +| `--progress-bar-background-active` | アクティブなページネーションの進行バーの背景 | +| `--scroll-bar-background` | ページネーション用スクロールバーの背景 | +| `--scroll-bar-background-active` | アクティブなページネーションのスクロールバーの背景 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/spinner.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/spinner.md new file mode 100644 index 00000000000..579a469e119 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/spinner.md @@ -0,0 +1,64 @@ +--- +title: 'ion-spinner' +demoUrl: '/docs/demos/api/spinner/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/spinner/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-spinner | Animated Spinner Icon Components and Properties + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### duration + +| | | +| --------------- | -------------------------------------------------------------------------------- | +| **Description** | スピナーアニメーションの持続時間（ミリ秒）。デフォルトはスピナーによって異なる。 | +| **Attribute** | `duration` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### name + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 使用する SVG スピナーの名前。名前が提供されない場合、プラットフォームのデフォルトのスピナーが使用されます。 | +| **Attribute** | `name` | +| **Type** | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| undefined` | +| **Default** | `undefined` | + +### paused + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | `true`の場合、スピナーのアニメーションは一時停止されます。 | +| **Attribute** | `paused` | +| **Type** | `boolean` | +| **Default** | `false` | + +## CSS Custom Properties + +| Name | Description | +| --------- | ------------ | +| `--color` | スピナーの色 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/split-pane.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/split-pane.md new file mode 100644 index 00000000000..2ad2ba0286f --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/split-pane.md @@ -0,0 +1,66 @@ +--- +title: 'ion-split-pane' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-split-pane: Split Plane View for Menus and Multi-View Layouts + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### contentId + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | メインコンテンツの `id` です。ルータを使用する場合は、通常 `ion-router-outlet` となります。ルータを使用しない場合は、通常、メインビューの `ion-content` となります。これは `ion-menu` 内の `ion-content` の ID ではありません。 | +| **Attribute** | `content-id` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | -------------------------------------------- | +| **Description** | `true`の場合、分割ペインが非表示になります。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### when + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 分割パネルを表示するタイミング。CSS メディアクエリ式、またはショートカット式を指定します。また、ブーリアン表現も可能です。 | +| **Attribute** | `when` | +| **Type** | `boolean \| string` | +| **Default** | `QUERY['lg']` | + +## Events + +| Name | Description | +| --------------------- | -------------------------------------------- | +| `ionSplitPaneVisible` | 分割画面の表示が変わったときに呼び出される式 | + +## CSS Custom Properties + +| Name | Description | +| ------------------ | ------------------------------------------------------------------------------------ | +| `--border` | ペイン間のボーダー | +| `--border` | ペイン間のボーダー | +| `--side-max-width` | サイドペインの最大幅を指定します。分割ペインが折りたたまれた状態では適用されません。 | +| `--side-max-width` | サイドペインの最大幅を指定します。分割ペインが折りたたまれた状態では適用されません。 | +| `--side-min-width` | サイドペインの最小幅を指定します。分割ペインが折りたたまれた状態では適用されません。 | +| `--side-min-width` | サイドペインの最小幅を指定します。分割ペインが折りたたまれた状態では適用されません。 | +| `--side-width` | サイドペインの幅を指定します。分割ペインが折りたたまれた状態では適用されません。 | +| `--side-width` | サイドペインの幅を指定します。分割ペインが折りたたまれた状態では適用されません。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/tab-bar.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/tab-bar.md new file mode 100644 index 00000000000..695db510845 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/tab-bar.md @@ -0,0 +1,67 @@ +--- +title: 'ion-tab-bar' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-tab-bar with CSS Custom Properties for Tab Bar Components + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### selectedTab + +| | | +| --------------- | ---------------------------- | +| **Description** | 選択されたタブコンポーネント | +| **Attribute** | `selected-tab` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### translucent + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、タブバーを半透明にします。mode が `"ios"` で、デバイスが [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility) をサポートしている場合にのみ適用されます。 | +| **Attribute** | `translucent` | +| **Type** | `boolean` | +| **Default** | `false` | + +## CSS Custom Properties + +| Name | Description | +| -------------- | ---------------- | +| `--background` | タブバーの背景 | +| `--background` | タブバーの背景 | +| `--border` | タブバーの境界線 | +| `--border` | タブバーの境界線 | +| `--color` | タブバーの色 | +| `--color` | タブバーの色 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/tab-button.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/tab-button.md new file mode 100644 index 00000000000..ec623aa8927 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/tab-button.md @@ -0,0 +1,134 @@ +--- +title: 'ion-tab-button' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Ion-Tab-Button: What it is, Usage & Properties | Ionic Framework + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### disabled + +| | | +| --------------- | ------------------------------------------------------------ | +| **Description** | `true`の場合、ユーザはタブボタンを操作することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### download + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | この属性は、ブラウザが URL に移動する代わりに URL をダウンロードするように指示し、ユーザはローカルファイルとして保存するように促されます。この属性に値がある場合、保存のプロンプトであらかじめ入力されたファイル名として使用されます（ユーザーはファイル名を変更することができます）。 | +| **Attribute** | `download` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### href + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | ハイパーリンクが指し示す URL または URL フラグメントを格納します。このプロパティが設定されている場合、アンカータグがレンダリングされます。 | +| **Attribute** | `href` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### layout + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------- | +| **Description** | タブバーのテキストとアイコンのレイアウトを設定します。デフォルトは`"icon-top"`です。 | +| **Attribute** | `layout` | +| **Type** | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### rel + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ターゲットオブジェクトとリンクオブジェクトの関係を指定します。値は、スペースで区切られた[リンクタイプ](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)のリストです。 | +| **Attribute** | `rel` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### selected + +| | | +| --------------- | ---------------------------- | +| **Description** | 選択されたタブコンポーネント | +| **Attribute** | `selected` | +| **Type** | `boolean` | +| **Default** | `false` | + +### tab + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 各 `ion-tab` にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。 | +| **Attribute** | `tab` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### target + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | リンク先の URL を表示する場所を指定します。href`を指定した場合のみ適用される。特別なキーワードがあります。_blank"`, `"_self"`, `"_parent"`, `"_top"`. | +| **Attribute** | `target` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +## CSS Shadow Parts + +| Name | Description | +| -------- | -------------------------------------------------------- | +| `native` | すべての子要素を包むネイティブ HTML のアンカー要素です。 | + +## CSS Custom Properties + +| Name | Description | +| ------------------------------ | -------------------------------------------------------------------------------------------- | +| `--background` | タブボタンの背景 | +| `--background` | タブボタンの背景 | +| `--background-focused` | タブキーでフォーカスされたときのタブボタンの背景 | +| `--background-focused` | タブキーでフォーカスされたときのタブボタンの背景 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのタブボタンの背景の不透明度 | +| `--background-focused-opacity` | タブキーでフォーカスしたときのタブボタンの背景の不透明度 | +| `--color` | タブボタンの色 | +| `--color` | タブボタンの色 | +| `--color-focused` | タブキーでフォーカスしたときのタブボタンの色 | +| `--color-focused` | タブキーでフォーカスしたときのタブボタンの色 | +| `--color-selected` | 選択されたタブボタンの色 | +| `--color-selected` | 選択されたタブボタンの色 | +| `--padding-bottom` | タブボタンの Bottom Padding | +| `--padding-bottom` | タブボタンの Bottom Padding | +| `--padding-end` | タブボタンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-end` | タブボタンの向きが左から右の場合は Right Padding、右から左の場合は Left Padding となります。 | +| `--padding-start` | タブボタンの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-start` | タブボタンの向きが左から右の場合は Left Padding、右から左の場合は Right Padding となります。 | +| `--padding-top` | タブボタンの Top Padding | +| `--padding-top` | タブボタンの Top Padding | +| `--ripple-color` | ボタンリプルエフェクトの色 | +| `--ripple-color` | ボタンリプルエフェクトの色 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/tab.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/tab.md new file mode 100644 index 00000000000..173dd72a8a4 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/tab.md @@ -0,0 +1,47 @@ +--- +title: 'ion-tab' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-tab - Ionic Framework Application Component + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### component + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | タブの内側に表示するコンポーネントです。 | +| **Attribute** | `component` | +| **Type** | `Function \| HTMLElement \| null \| string \| undefined` | +| **Default** | `undefined` | + +### tab + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 各 `ion-tab` にはタブ ID を指定する必要があります。これは、選択されたタブを参照したり、ルータがタブを切り替えたりするために内部的に使用される。 | +| **Attribute** | `tab` | +| **Type** | `string` | +| **Default** | `undefined` | + +## Methods + +### setActive + +| | | +| --------------- | -------------------------------------------- | +| **Description** | タブのアクティブコンポーネントを設定します。 | +| **Signature** | `setActive() => Promise` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/tabs.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/tabs.md new file mode 100644 index 00000000000..270d2e0cb22 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/tabs.md @@ -0,0 +1,58 @@ +--- +title: 'ion-tabs' +demoUrl: '/docs/demos/api/tabs/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/tabs/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Ion-Tabs: Tab-Based Component for App Top-Level Navigation + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Events + +| Name | Description | +| ------------------- | -------------------------------------------------------------------------- | +| `ionTabsDidChange` | ナビゲーションが新しいコンポーネントに遷移し終わったときに発行されます。 | +| `ionTabsWillChange` | ナビゲーションが新しいコンポーネントに移行しようとするときに発行されます。 | + +## Methods + +### getSelected + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 現在選択されているタブを取得します。このメソッドは、バニラ JavaScript プロジェクトでのみ使用できます。Angular、React、Vue のタブの実装は、各フレームワークのルーターと結合しています。 | +| **Signature** | `getSelected() => Promise` | + +### getTab + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | 特定のタブを `tab` プロパティの値または要素参照で取得する。このメソッドは vanilla JavaScript プロジェクトでのみ利用可能です。Angular、React、Vue のタブの実装は、それぞれのフレームワークのルータと結合しています。 | +| **Signature** | `getTab(tab: string \| HTMLIonTabElement) => Promise` | + +### select + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | タブを `tab` プロパティの値または要素参照で選択する。このメソッドはバニラ JavaScript プロジェクトでのみ利用可能です。Angular、React、Vue のタブの実装は、それぞれのフレームワークのルータと結合しています。 | +| **Signature** | `select(tab: string \| HTMLIonTabElement) => Promise` | + +## Slots + +| Name | Description | +| -------- | ------------------------------------------------------------------------------- | +| `` | slot がない状態で提供される場合、コンテンツは名前付き slot の間に配置されます。 | +| `bottom` | コンテンツは画面下部に配置されます。 | +| `top` | コンテンツは画面上部に配置されます。 | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/text.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/text.md new file mode 100644 index 00000000000..27b2e9b9427 --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/text.md @@ -0,0 +1,40 @@ +--- +title: 'ion-text' +demoUrl: '/docs/demos/api/text/index.html' +demoSourceUrl: 'https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/text/index.html' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + ion-text: Ionic App Component to Style or Change Text Color + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | diff --git a/i18n/ja/docusaurus-plugin-content-docs/current/api/textarea.md b/i18n/ja/docusaurus-plugin-content-docs/current/api/textarea.md new file mode 100644 index 00000000000..1cbe99292fe --- /dev/null +++ b/i18n/ja/docusaurus-plugin-content-docs/current/api/textarea.md @@ -0,0 +1,355 @@ +--- +title: 'ion-textarea' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Ionic Textarea Component and CSS Properties for Multi-Line Input + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +## Properties + +### autoGrow + +| | | +| --------------- | --------------------------------------------------------------------------- | +| **Description** | `true`の場合、textarea コンテナは textarea の内容に応じて拡大・縮小します。 | +| **Attribute** | `auto-grow` | +| **Type** | `boolean` | +| **Default** | `false` | + +### autocapitalize + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | テキスト値がユーザーによって入力／編集される際に、自動的に大文字にするかどうか、またどのようにするかについて示します。利用可能なオプション off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. | +| **Attribute** | `autocapitalize` | +| **Type** | `string` | +| **Default** | `'none'` | + +### autofocus + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | ネイティブの入力要素に [`autofocus` 属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) を設定します。 ページロード時に要素がフォーカスされるには、これだけでは不十分かもしれません。詳しくは[managing focus](/docs/developing/managing-focus)を参照してください。 | +| **Attribute** | `autofocus` | +| **Type** | `boolean` | +| **Default** | `false` | + +### clearOnEdit + +| | | +| --------------- | --------------------------------------------------------------- | +| **Description** | true`の場合、編集時にフォーカスが当たった後、値がクリアされる。 | +| **Attribute** | `clear-on-edit` | +| **Type** | `boolean` | +| **Default** | `false` | + +### color + +| | | +| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アプリケーションのカラーパレットから使用する色を指定します。デフォルトのオプションは以下の通りです。 `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, と `"dark"` です．色に関する詳しい情報は [theming](/docs/theming/basics) を参照してください。 | +| **Attribute** | `color` | +| **Type** | `"danger" \| "dark" \| "light" \| "medium" \| "primary" \| "secondary" \| "success" \| "tertiary" \| "warning" \| string & Record \| undefined` | +| **Default** | `undefined` | + +### cols + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------ | +| **Description** | テキストコントロールの可視幅を、平均文字幅で指定します。指定する場合は、正の整数である必要があります。 | +| **Attribute** | `cols` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### counter + +| | | +| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | `true`の場合、文字カウンタが使用された文字の比率と総文字数制限を表示します。カウンターを正しく計算するために、開発者は `maxlength` プロパティも設定する必要があります。 | +| **Attribute** | `counter` | +| **Type** | `boolean` | +| **Default** | `false` | + +### counterFormatter + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | カウンターのテキストをフォーマットするためのコールバック。デフォルトでは、カウンタのテキストは "itemLength / maxLength" に設定される。 コールバック内から `this` にアクセスする必要がある場合は https://ionicframework.com/docs/troubleshooting/runtime#accessing-this を参照。 | +| **Attribute** | `counter-formatter` | +| **Type** | `((inputLength: number, maxLength: number) => string) \| undefined` | +| **Default** | `undefined` | + +### debounce + +| | | +| --------------- | -------------------------------------------------------------------------------------- | +| **Description** | キーを押すたびに `ionInput` イベントが発生するまでの待ち時間をミリ秒単位で設定します。 | +| **Attribute** | `debounce` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### disabled + +| | | +| --------------- | ---------------------------------------------------------------- | +| **Description** | `true`の場合、ユーザはテキストエリアと対話することができません。 | +| **Attribute** | `disabled` | +| **Type** | `boolean` | +| **Default** | `false` | + +### enterkeyhint + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | どのエンターキーを表示するかのブラウザへのヒント。指定可能な値。enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | +| **Attribute** | `enterkeyhint` | +| **Type** | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | +| **Default** | `undefined` | + +### errorText + +| | | +| --------------- | ------------------------------------------------------------------------------ | +| **Description** | テキストエリアの下に配置され、エラーが検出されたときに表示されるテキストです。 | +| **Attribute** | `error-text` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### fill + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | アイテムの塗りつぶし。もし `"solid"` ならば、アイテムは背景を持つようになります。もし `"outline"` ならば、アイテムはボーダー付きの透明なものになります。md`モードでのみ使用可能です。 | +| **Attribute** | `fill` | +| **Type** | `"outline" \| "solid" \| undefined` | +| **Default** | `undefined` | + +### helperText + +| | | +| --------------- | ------------------------------------------------------------------------------- | +| **Description** | textarea の下に配置され、エラーが検出されなかった場合に表示されるテキストです。 | +| **Attribute** | `helper-text` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### inputmode + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| **Description** | どのキーボードを表示するかのブラウザへのヒント。指定可能な値。none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | +| **Attribute** | `inputmode` | +| **Type** | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | +| **Default** | `undefined` | + +### label + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | textarea に関連付けられた可視ラベル。 プレーンテキストのラベルをレンダリングする必要がある場合に使用する。 両方が使用されている場合、`label` プロパティが `label` スロットよりも優先される。 | +| **Attribute** | `label` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### labelPlacement + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | テキストエリアと相対的にラベルを配置する場所。"start"`：ラベルはLTRではテキストエリアの左側に、RTLでは右側に表示されます。`"end"`：ラベルはLTRではテキストエリアの右側に、RTLでは左側に表示されます。"floating"`：ラベルは、テキストエリアにフォーカスが当たっているか、値がある場合、小さく表示され、テキストエリアの上に表示されます。それ以外の場合は textarea の上に表示されます。`"stacked"`：テキストエリアがぼやけた状態や値がない場合でも、ラベルは小さく表示され、テキストエリアの上に表示されます。固定"`：ラベルの幅が固定される以外は、`"start"`と同じ動作になります。長いテキストは省略記号（"..."）で切り捨てられます。 | +| **Attribute** | `label-placement` | +| **Type** | `"end" \| "fixed" \| "floating" \| "stacked" \| "start"` | +| **Default** | `'start'` | + +### maxlength + +| | | +| --------------- | ------------------------------------------------------ | +| **Description** | この属性は、ユーザが入力できる最大文字数を指定します。 | +| **Attribute** | `maxlength` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### minlength + +| | | +| --------------- | ---------------------------------------------------------- | +| **Description** | この属性は、ユーザーが入力できる最小の文字数を指定します。 | +| **Attribute** | `minlength` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### mode + +| | | +| --------------- | ----------------------------------------------------------------- | +| **Description** | mode は、どのプラットフォームのスタイルを使用するかを決定します。 | +| **Attribute** | `mode` | +| **Type** | `"ios" \| "md"` | +| **Default** | `undefined` | + +### name + +| | | +| --------------- | ---------------------------------------------------- | +| **Description** | フォームデータとともに送信されるコントロールの名前。 | +| **Attribute** | `name` | +| **Type** | `string` | +| **Default** | `this.inputId` | + +### placeholder + +| | | +| --------------- | ------------------------------------ | +| **Description** | 入力が値を持つ前に表示される指示文。 | +| **Attribute** | `placeholder` | +| **Type** | `string \| undefined` | +| **Default** | `undefined` | + +### readonly + +| | | +| --------------- | ------------------------------------------------------ | +| **Description** | `true`の場合、ユーザーは値を変更することができません。 | +| **Attribute** | `readonly` | +| **Type** | `boolean` | +| **Default** | `false` | + +### required + +| | | +| --------------- | -------------------------------------------------------------------------- | +| **Description** | `true`の場合、ユーザーはフォームを送信する前に値を入力する必要があります。 | +| **Attribute** | `required` | +| **Type** | `boolean` | +| **Default** | `false` | + +### rows + +| | | +| --------------- | -------------------------------- | +| **Description** | コントロールの可視テキスト行数。 | +| **Attribute** | `rows` | +| **Type** | `number \| undefined` | +| **Default** | `undefined` | + +### shape + +| | | +| --------------- | --------------------------------------------------------------------------------- | +| **Description** | テキストエリアの形状を指定します。round "の場合、ボーダーの半径が大きくなります。 | +| **Attribute** | `shape` | +| **Type** | `"round" \| undefined` | +| **Default** | `undefined` | + +### spellcheck + +| | | +| --------------- | ---------------------------------------------------------------- | +| **Description** | `true`の場合、その要素のスペルチェックと文法チェックが行われる。 | +| **Attribute** | `spellcheck` | +| **Type** | `boolean` | +| **Default** | `false` | + +### value + +| | | +| --------------- | ----------------------------- | +| **Description** | textarea の値です。 | +| **Attribute** | `value` | +| **Type** | `null \| string \| undefined` | +| **Default** | `''` | + +### wrap + +| | | +| --------------- | -------------------------------------------------------- | +| **Description** | コントロールがテキストをどのように折り返すかを示します。 | +| **Attribute** | `wrap` | +| **Type** | `"hard" \| "off" \| "soft" \| undefined` | +| **Default** | `undefined` | + +## Events + +| Name | Description | +| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ionBlur` | Input のフォーカスが外れたときに発行されます。 | +| `ionChange` | onChange` イベントは、ユーザが textarea の値を変更したときに発生する。ionInput` イベントとは異なり、`ionChange` イベントは値が変更された後に要素のフォーカスが外れたときに発生する。 このイベントは、プログラムで `value` プロパティを設定した場合には発生しない。 | +| `ionFocus` | Input にフォーカスが当たったときに発行されます。 | +| `ionInput` | ionInput` イベントは、ユーザが textarea の値を変更するたびに発生する。ionChange` イベントとは異なり、 `ionInput` イベントは textarea の値が変更されるたびに発生する。これは通常、ユーザがキーを入力するたびに発生する。 clearOnEdit`が有効な場合、ユーザが textarea をクリアするためにキーダウンを行うと、`ionInput` イベントが発生する。 | + +## Methods + +### getInputElement + +| | | +| --------------- | ---------------------------------------------------------------- | +| **Description** | 要素の内部で使用されるネイティブの `