From d8f8cc474d11e5713f1e56a91a3068e3ae1bfd10 Mon Sep 17 00:00:00 2001 From: Masahiko Sakakibara Date: Tue, 25 Jul 2023 22:12:51 +0900 Subject: [PATCH] chore(jp): merge recent update (#2883) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs(angular): supported angular versions (#2785) * fix(playground): prevent horizontal scrollbar on ios device frame view (#2789) * docs(toast): add version to layout (#2800) * docs(toast): update cdn version (#2801) * fix(playground): hidden iframes are hidden from screen readers (#2802) * chore(version): update v5 and v6 docs to use the versioned docs demo deployment (#2796) * docs(api): add accessibility section for icons (#2807) * docs(layout): update css-utilities to show float properly (#2808) closes #265 * fix(playground): iframe is hidden using display (#2809) resolves #2778 * chore: clear docs/native directory when generating markdown (#2812) * docs(segment): wrap text in labels for segments in toolbar playground (#2815) * docs(security): clarify sanitizer (#2814) * docs(gestures): remove browser support section (#2817) * docs(icon): indicate where to find custom SVG usage (#2816) * chore(): 翻訳ミスを修正 * updated * build * docs(datetime): clarify timezone usage (#2822) * docs(animations): add type interfaces (#2811) * docs(alert): alert input label is only for radio/checkbox (#2810) * feat: docusaurus plugin to generate component api docs (#2797) * Revert " feat: docusaurus plugin to generate component api docs (#2797)" (#2824) This reverts commit cb056e961aef9d7386cbdfe992d4d47ec03f86f5. * docs(input, textarea): update migration guide for proper metadata usage (#2827) * docs(slides): update migration guides to use Swiper 9 (#2833) Co-authored-by: Liam DeBeasi * feat(translate): update translate * feat(translate): add auto translation by DeepL * feat(translate): h2 is translated * feat(v7): translate api * feat(translate): translate api * feat(translate): translate api * fix(api): fixed spelling * feat(translation): partial retranslation * chore(): remove unused file * docs(modal): clarify swipeToClose migration (#2839) * docs(select): fix typeahead search (#2840) Co-authored-by: BlackHakwDC * docs(updating): clean up verbiage and broken links on migration guides (#2842) * fix(translate): proofread the translation of DeepL * chore(translate): run translate * feat(translate): translate searchbar * feat(translate): fix deepl translation * fix(translate): translate docs/index * docs(badge): content must be passed to be shown (#2844) * docs(config): move framework config guides to unified config guide (#2727) * docs(live reload): update docs about Capacitor programmatic builds (#2843) Resolves #2805 * docs(many): update config links (#2846) * docs(config): add documentation for innerHTMLTemplatesEnabled (#2826) * docs: update dev workflow instructions (#2848) * docs(react, vue): add vite pwa docs (#2841) * docs(v5): change CDN links to use core@v5 (#2847) * docs(quickstart): update to include imports and match current starter (#2849) resolves #2485 --------- Co-authored-by: Liam DeBeasi * docs(input, textarea): clarify error text behavior (#2853) * docs(native): fix grammar and typos (#2806) * docs: rxjs migration guide for v7 (#2852) * docs(modal): playground example to prevent swipe to dismiss (#2820) * docs(react): update imports for swiper migration (#2851) * docs(slides): fix typo in Angular migration guide (#2856) * docs(toast): remove hardware back button dismissal (#2854) Co-authored-by: liamdebeasi * feat(translate): remove '自動翻訳' from cache data * docs(lifecycle): clarify when lifecycles are called (#2858) * docs(config): update innerHTMLTemplatesEnabled default (#2857) * feat: docusaurus plugin to generate component api docs (#2829) * chore: remove v7 beta banner (#2836) * docs(config): update v7 to latest version (#2862) * chore(many): update v7 playgrounds to point to Ionic 7.0.0 (#2859) * fix(plugin): account for versions with no paths (#2865) * fix(config): fall back to label (#2866) * docs(upgrade-pill): link to v7 upgrade guide (#2724) * chore(): remove unused auto translated * docs(support): update support table for v7 (#2868) resolves #2867 * docs(datetime): remove unused variable from example (#2803) * docs(v7): update breaking changes link (#2869) * docs(v7): update migration guide tags (#2870) * feat(translate): translate api * docs(migration): fix header levels in v4 migration guide (#2872) * docs(migration): update versioned migration guide to link to latest version of page (#2871) Co-authored-by: skofgar * chore(docs contributing): update code of conduct to link out to full … (#2875) * chore(i18n): remove production check for Japanese docs (#2825) * docs(deployment): typo with windows requirements (#2879) * chore(coc email): update email to devrel (#2881) * fix(path): fix language path * Revert "fix(path): fix language path" This reverts commit 0d070be3f6c3020b3d536149df24622a0dfe0cf1. * fix(lang): default path change to be en(if Japanese * feat(api): update api translate * fix(jp): set the v7 document version to v7 (#2884) * docs(select): popover can be used with multiple prop (#2887) * Revert "fix(jp): set the v7 document version to v7 (#2884)" (#2889) This reverts commit c4004b5503ef38f83aab1002d2d4de23c83574ad. * docs(react): add example for useIonRouter (#2888) * docs(modal): controller playground uses bolded action (#2890) * docs(theming): update vendor prefixed line height (#2661) * docs(layout): update structure docs to use new playground examples (#2882) resolves #594 * docs(theming): remove stray whitespace (#2895) * docs(CONTRIBUTING): update misspell and period addition (#2893) * fix(modal): controller playground uses v7 label syntax (#2891) * fix(styles): add sidebar indentation for nested sections (#2886) * fix(styles): add sidebar indentation for nested sections * fix: spacing at end of sidebar * fix: spacing between sections * fix: padding between collapsed sections * docs(router-link): removal of phone demo on v6 and v7 (#2899) * docs(studio): removal of studio pages for v7, v6, and v5 (#2900) * docs(native): correctly show all the native plugins (#2903) * docs(nav): clearly state that it's not used for routing (#2901) * fix(ColorGenerator): always prepend entered colors with pound sign (#2904) * docs(item): migrate inputs example to v7 (#2835) * docs(vue): update quickstart steps to remove typescript (#2689) * docs(modal): playground for auto height sheets (#2905) * docs(react): clarify state behavior with Ionic React (#2894) Co-authored-by: Liam DeBeasi * docs(quickstart): remove unnecessary references to React Native (#2238) * Update quickstart.md this was set as intro to React Native which is wrong in my opinion. Should be Ionic React instead. * Remove other incorrect references to React Native --------- Co-authored-by: Shawn Taylor * docs(searchbar): debounce uses ionInput (#2913) Co-authored-by: guillaumesmo * docs(react): remove old overview and update link (#2897) Resolves #2220 * docs(react): update pwa-elements import * styles(): Add developer experts cta section to intro/next page (#2908) * fix(developer experts card): Add dark mode compatability (#2919) * docs(react): provide unique key instead of index (#2630) As providing index as keys is a bad practice, this commit modifies the key value to be `photo.filepath` which will be unique and consistent while adding new photos. [Keys - react docs](https://reactjs.org/docs/lists-and-keys.html#keys) [example why it is not recommended](https://robinpokorny.com/blog/index-as-a-key-is-an-anti-pattern/) * docs(toast): clarify aria-live usage (#2914) * docs(security): clarify IonicSafeString usage with innerHTMLTemplatesEnabled (#2906) * docs(cli): update Ionic CLI docs for version 7 (#2924) * docs(pwa): update firebase instructions for deploying pwa (#2916) * docs(react): update firebase instructions for deploying pwa --------- Co-authored-by: Brett Peary * docs(support): remove migration guide link (#2925) This link does not exist anymore as the migration guides are available as a top-level category in the sidebar. * fix(release-notes): remove element symbols and names and update design (#2921) * docs(angular): add missing non-null assertion operator (#2683) * fix(): page components file structure (#2907) * docs(your-first-app): mark webviewPath as optional in UserPhoto interface (#2926) Co-authored-by: derf974 * fix(angular-getting-started): type errors (#2688) Co-authored-by: Greg Billetdeaux Co-authored-by: Maria Hutt * Revert "fix(): page components file structure (#2907)" (#2928) This reverts commit d84866986b590f4cf7cf0ecb0a78b993c4b41741. * refactor(api): v5 docs use internal import (#2929) * fix(playground): allow automatic mode selection when relevant base file is overwritten (#2922) * fix: styles for ion-slides migration (#2930) * refactor(playground): remove unused angularModuleOptions feature (#2933) * docs(ionicslides): include slides param link (#2934) Co-authored-by: Arno * docs(tab): remove references to using Stencil with tab (#2932) * chore(crowdin): api docs are no longer ignored (#2938) * fix(docsdemo, playground): add keys to list items (#2940) * fix(ColorAccordion, LayeredColorsSelect): add keys to list items (#2942) * fix(docdemo, coloraccordion): correctly format SVG/CSS props (#2941) * chore(contributing): remove slack link on v5 (#2939) * docs(Swiper): fix typo in slidesPerView value (#2945) * docs(android): update where to find SDK/AVD managers (#2947) Co-authored-by: rtpHarry * chore(intro/next): Elite Ionic -> Ionic Start (#2931) * docs(developing): tip for changing node_modules permissions (#2950) Co-authored-by: Utku Demir <50655392+Demir-Utku@users.noreply.github.com> * docs(breadcrumbs): update vue example (#2949) * docs(lifecycle): clarify method descriptions (#2951) Co-authored-by: BAYiTUPAi * docs(updating): add angular toolkit upgrade to v7 upgrade guide (#2952) * chore(lint): add prettier and lint on CI (#2946) - Adds prettier to a lint command (prettier was installed just not used anywhere) - Runs `npm install` & `npm lint` on CI - Updates the `.prettierignore` to be more up-to-date with the current docs structure - `static/code/stackblitz` files were ignored because it was modifying the indentation surrounding `{ TEMPLATE }` and this caused the StackBlitz to look worse when opened - Adds `mdx` as a parser to the `@ionic/prettier-config` and updates this repo to use that version * docs(support): update angular support policy (#2953) This PR updates the support table to note that Angular 16 is supported for Ionic v7 * docs(range): update docs to use label prop (#2955) * fix(tabs): correct router playground src (#2957) * docs(app-store): add reference to App Store Connect (#2198) Co-authored-by: Brandy Carney * docs(developing): update Java instructions to mention JDK 11 for latest cordova-android (#2200) Updates the developing android documentation to reflect the latest Cordova guide here: https://cordova.apache.org/docs/en/11.x/guide/platforms/android/#java-development-kit-jdk --------- Co-authored-by: Brandy Carney * docs(react): remove IonContent from tabs example (#2958) * docs(vue): remove IonContent from tabs example (#2959) * docs(dark-mode): replace deprecated addListener() usage (#1908) Co-authored-by: Maria Hutt * docs(quickstart): remove typescript for imports and tests (#2216) * Update quickstart.md Currently, the "use Javascript" section is incomplete as Jest is still configured to use Typescript and running `npm run test:unit` will throw errors. The section was revised to to include Jest Javascript configuration changes. --------- Co-authored-by: Shawn Taylor * fix(CodeColor, LayeredColorsSelect): fix invalid DOM nesting (#2963) * docs(react): remove unopened closing tag (#2964) * fix: Ionic CLI links to latest docs page (#2961) * docs(tabs): angular usage does not use explicit ion-router-outlet (#2965) Co-authored-by: skytern <36536345+skytern@users.noreply.github.com> * doc(CORS): update the native options (#2954) Include different options for Capacitor and Cordova (legacy). Also fixes what was a dead link to Ionic Native. * feat(playground): inline dependencies per framework example (#2970) * chore: update minor release to happen every 4 weeks if needed (#2972) * docs(select): add label slot and aria label playgrounds (#2971) * docs(vue): add community guide by theafolayan (#1795) Co-authored-by: Maria Hutt * docs(PWAs): add Vue to list of PWA deployment guides (#2974) Co-authored-by: VAS000 * docs(spinner): add docs for resizing (#2966) * docs(spinner): add docs for resizing * docs(developing): update default Android SDK path (#2771) Co-authored-by: Brandy Carney * docs(native): fix typo (#2976) * chore: prettier formatting (#2979) * chore: prettier formatting * chore: revert invalid changes * docs(angular): relative routing is supported (#2980) Co-authored-by: rdlabo> * docs(angular): update component testing code snippets (#2985) * chore(deps): update react and vue playground dependencies (#2989) * docs(datetime): add playground for styling wheel pickers (#2982) * docs(angular):updated component photo service (#2986) (#2987) * docs(angular):updated component photo service (#2986) * docs(angular):changed component photo service (#2986) changed photo.path --> photo.path! * remove extra newline --------- Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> * docs(android): clarify steps to set up native project and run with Capacitor (#1889) Co-authored-by: Shawn Taylor * docs(security): content security policies (#2975) Co-authored-by: Liam DeBeasi * chore(fundamentals): clarify events (#2992) * docs(app-store): add release flag (#2990) Co-authored-by: zhangshengjie * docs(vue): fix lifecycle table formatting (#2967) Adds a new line before the table to allow the markdown to render properly * docs(infinite-scroll): use the correct custom event (#2995) * docs(angular): fix indentation in 5-adding-mobile.md (#2855) * docs: fix indentation in 5-adding-mobile.md * Also change in v7 docs --------- Co-authored-by: Shawn Taylor * docs(input): add label slot and no visible label demos (#2997) * docs(select): add playgrounds for toggle icon customization (#2996) * add playgrounds * lint * Update static/usage/v7/select/customization/custom-toggle-icons/index.md Co-authored-by: Liam DeBeasi * Update static/usage/v7/select/customization/icon-flip-behavior/index.md Co-authored-by: Liam DeBeasi * fix icon usage for React and Vue * rename toggleIconWhenOpen to expandedIcon --------- Co-authored-by: Liam DeBeasi * docs(input): input masking examples (#2993) * docs(textarea): add label slot examples (#3001) * chore: add playgrounds for JP docs (#3004) * chore: upgrade maskito dependencies to v1 (#3005) * fix(playground-tabs): show arrows on long list (#3009) * docs(native): improve grammar fixed wording mistakes * docs(your-first-app): switch to Date.now() (#2915) Co-authored-by: Maria Hutt * docs(list): use dark mode aware color (#3015) Co-authored-by: reslear * docs(maskito): update credit card mask format (#3007) * chore(ci): check for diff after running prettier (#2981) * chore: lint content (#3020) * docs(animation): add playground for override example (#3018) Co-authored-by: dillionmegida * docs(vue): Improve documentation for removing Typescript steps in v7 (#3002) * feat(playground): add support for generating a new playground (#2994) * Add prompts and generate vue file * Generate other files * Use variables in headers * Add readme * Add prompt with option to generate css files * Add version to prompt and modify files accordingly * Update readme * Address PR review * Add hint for component name casing * Add Angular TS option * Reformat to use advanced prompting * Refactor where markdown output comes from * Remove default value for path; add validation * Add validation for component name --------- Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> * chore: enable renovate for component playground deps (#3016) * Configure Renovate (#3017) * Add renovate.json * chore: remove invalid setting --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Sean Perkins * docs(modal): clarify swipe to close section (#3021) * docs(react): clarify IonTabs behavior with IonPage (#3012) * chore(renovate): remove extending docs config (#3027) * docs(animation): add playground for group example (#3025) * docs(animations): add playground for chained animations (#3026) Co-authored-by: dillionmegida * chore(deps): update dependency vite to v2.9.16 [security] (#3028) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * docs(animation): add playground for basic animations (#3031) Co-authored-by: dillionmegida * fix(deps): update dependency @types/node to v16.18.38 (#3033) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(generation): correct angular imports (#3034) * Refactor: Improve readability * Combine index files and fix bug with angular ts generation * docs(animations): buttons in StackBlitz demos do not need id (#3037) * chore(renovate): limit include paths (#3030) * chore(renovate): limit include paths * fix: use matchPackagePatterns * docs(animations): add playground for before and after hooks (#3035) Co-authored-by: dillionmegida * docs(animations): add playground for preference based (#3036) Co-authored-by: dillionmegida * docs(angular): add type assertion for your first app code snippet (#2910) Was getting an error: "Type 'string | undefined' is not assignable to type 'string'." Adding an exclamation point at the end of line 111 solves it. * docs(animation): add playground example for double-click gesture (#3042) Co-authored-by: dillionmegida < dillionmegida@users.noreply.github.com> Co-authored-by: Maria Hutt * docs(animation): add gesture animation playground (#3043) Co-authored-by: dillionmegida * docs(gesture): add playground example for basic usage (#3038) Co-authored-by: dillionmegida * docs(animation): add playground example for keyframes (#3039) Co-authored-by: dillionmegida < dillionmegida@users.noreply.github.com> * docs(item-sliding): clarify expandable behavior (#3044) * docs(menu): add playgrounds for menu sides and multiple menus (#3049) * fix(): fix conflict package.json * chore(): fixed lint * fix(ci): fix lint and diff * fix(script): follow new docs script * translate * chore * chore(): fix confrect * fmt * fix(): remove i18n folder from git --------- Co-authored-by: Sean Perkins Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Co-authored-by: Liam DeBeasi Co-authored-by: Brandy Carney Co-authored-by: BlackHakwDC Co-authored-by: Maria Hutt Co-authored-by: Shawn Taylor Co-authored-by: ptmkenny <1451472+ptmkenny@users.noreply.github.com> Co-authored-by: reslear Co-authored-by: skofgar Co-authored-by: John Wheeler <73669769+johnwheeler-prod@users.noreply.github.com> Co-authored-by: Robert G Co-authored-by: Serhii Kulykov Co-authored-by: Yusuf Sahin HAMZA Co-authored-by: FernetB <47339424+FernetB@users.noreply.github.com> Co-authored-by: Ashraf Latif Co-authored-by: guillaumesmo Co-authored-by: James McDonald <38434825+mcdonaldjc@users.noreply.github.com> Co-authored-by: jaredcbaum <61951482+jaredcbaum@users.noreply.github.com> Co-authored-by: Thejas Kiran P S <30928792+ThejasKiranPS@users.noreply.github.com> Co-authored-by: Matt Netkow Co-authored-by: Brett Peary Co-authored-by: Daniel Feliz <47199869+dfeliz@users.noreply.github.com> Co-authored-by: derf974 Co-authored-by: gregbilletdeaux <121880999+gregbilletdeaux@users.noreply.github.com> Co-authored-by: Greg Billetdeaux Co-authored-by: Maria Hutt Co-authored-by: Arno Co-authored-by: rtpHarry Co-authored-by: Utku Demir <50655392+Demir-Utku@users.noreply.github.com> Co-authored-by: BAYiTUPAi Co-authored-by: Joost Jansen <87212060+jstjnsn@users.noreply.github.com> Co-authored-by: Brandy Carney Co-authored-by: Austine A <8253869+AustineA@users.noreply.github.com> Co-authored-by: Stephan Schmitz Co-authored-by: praxxys <65581743+praxxys@users.noreply.github.com> Co-authored-by: Zakuru San Co-authored-by: skytern <36536345+skytern@users.noreply.github.com> Co-authored-by: Ken Sodemann Co-authored-by: Oluwaseun Raphael Afolayan Co-authored-by: VAS000 Co-authored-by: Julien De Coster <3533550+juliendecoster@users.noreply.github.com> Co-authored-by: Martijn Grendelman Co-authored-by: Chandra Nandan Co-authored-by: Sanjeed <40694326+sanjeed5@users.noreply.github.com> Co-authored-by: zhangshengjie Co-authored-by: Kevin Cunningham Co-authored-by: Bobby Galli Co-authored-by: Stefan Kempinger <19308955+CrazyChaoz@users.noreply.github.com> Co-authored-by: Biskweet <67809939+Biskweet@users.noreply.github.com> Co-authored-by: reslear Co-authored-by: dillionmegida Co-authored-by: Simo Mafuxwana Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: dillionmegida Co-authored-by: Joshua Albrechtsen --- .github/workflows/CI.yml | 33 + .prettierignore | 10 +- .prettierrc.js | 11 - CONTRIBUTING.md | 5 +- _templates/README.md | 32 + _templates/playground/new/angular.md.ejs.t | 7 + .../angular_example_component_css.md.ejs.t | 9 + .../new/angular_example_component_ts.md.ejs.t | 17 + _templates/playground/new/demo.html.ejs.t | 32 + _templates/playground/new/index.js | 64 + _templates/playground/new/index.md.ejs.t | 60 + _templates/playground/new/javascript.md.ejs.t | 14 + _templates/playground/new/react.md.ejs.t | 19 + .../playground/new/react_main_css.md.ejs.t | 9 + _templates/playground/new/vue.md.ejs.t | 28 + crowdin.yml | 1 - docs/angular/lifecycle.md | 66 +- docs/angular/navigation.md | 47 +- docs/angular/overview.md | 8 +- docs/angular/platform.md | 6 +- docs/angular/pwa.md | 20 +- docs/angular/slides.md | 25 +- docs/angular/storage.md | 2 +- docs/angular/testing.md | 28 +- docs/angular/your-first-app.md | 6 +- .../angular/your-first-app/2-taking-photos.md | 4 +- .../angular/your-first-app/3-saving-photos.md | 2 +- .../your-first-app/4-loading-photos.md | 4 +- .../angular/your-first-app/5-adding-mobile.md | 62 +- docs/api/datetime.md | 17 +- docs/api/input.md | 48 +- docs/api/item-sliding.md | 2 +- docs/api/menu.md | 40 +- docs/api/modal.md | 8 +- docs/api/nav.md | 6 +- docs/api/range.md | 32 +- docs/api/router-link.md | 16 +- docs/api/searchbar.md | 2 +- docs/api/select.md | 149 +- docs/api/spinner.md | 10 +- docs/api/tab-bar.md | 42 +- docs/api/tab-button.md | 64 +- docs/api/tab.md | 2 +- docs/api/textarea.md | 30 +- docs/api/toast.md | 10 +- docs/cli.md | 16 +- docs/cli/configuration.md | 34 +- docs/cli/livereload.md | 3 +- docs/cli/using-a-proxy.md | 4 +- docs/components.md | 30 +- docs/contributing/coc.md | 4 +- docs/core-concepts/cross-platform.md | 30 +- docs/core-concepts/fundamentals.md | 38 +- docs/core-concepts/webview.md | 22 +- .../what-are-progressive-web-apps.md | 16 +- docs/deployment/app-store.md | 34 +- docs/deployment/desktop-app.md | 18 +- docs/deployment/play-store.md | 30 +- docs/deployment/progressive-web-app.md | 4 +- docs/developer-resources/books.md | 4 +- .../guides/first-app-v4/ios-android-camera.md | 2 +- .../guides/first-app-v4/theming.md | 6 +- docs/developer-resources/tools.md | 8 +- docs/developer-resources/videos.md | 8 +- docs/developing/android.md | 123 +- docs/developing/config.md | 84 +- docs/developing/config/global/index.md | 16 +- docs/developing/config/per-component/index.md | 22 +- .../config/per-platform-fallback/index.md | 24 +- .../config/per-platform-overrides/index.md | 8 +- docs/developing/config/per-platform/index.md | 7 +- docs/developing/hardware-back-button.md | 36 +- docs/developing/ios.md | 94 +- docs/developing/keyboard.md | 28 +- docs/developing/previewing.md | 14 +- docs/developing/scaffolding.md | 8 +- docs/developing/starting.md | 6 +- docs/developing/tips.md | 33 +- docs/index.md | 54 +- docs/intro/cdn.md | 32 +- docs/intro/cli.md | 18 +- docs/intro/environment.md | 24 +- docs/intro/first-app.md | 8 +- docs/intro/next.md | 14 +- docs/intro/vscode-extension.md | 6 +- docs/layout/css-utilities.md | 45 +- docs/layout/global-stylesheets.md | 6 +- docs/layout/grid.md | 54 +- docs/layout/structure.md | 217 +- docs/native-faq.md | 7 +- docs/native-setup.md | 2 +- docs/native.md | 4 - docs/react.md | 20 +- docs/react/config.md | 8 +- docs/react/lifecycle.md | 44 +- docs/react/navigation.md | 224 +- docs/react/overview.md | 20 +- docs/react/platform.md | 5 +- docs/react/pwa.md | 73 +- docs/react/quickstart.md | 90 +- docs/react/slides.md | 2 + docs/react/your-first-app.md | 2 +- docs/react/your-first-app/2-taking-photos.md | 4 +- docs/react/your-first-app/3-saving-photos.md | 2 +- docs/reference/browser-support.md | 23 +- docs/reference/glossary.md | 140 +- docs/reference/support.md | 46 +- docs/reference/versioning.md | 15 +- docs/studio/assets.md | 17 - docs/studio/code.md | 40 - docs/studio/designer.md | 179 - docs/studio/faq.md | 23 - docs/studio/guides/routing-and-navigation.md | 29 - .../guides/using-native-functionality.md | 17 - docs/studio/running.md | 66 - docs/studio/settings.md | 68 - docs/studio/setup/installation.md | 16 +- docs/studio/setup/native.md | 13 - docs/studio/start.md | 13 - docs/studio/support.md | 15 - docs/studio/terminal.md | 36 - docs/studio/theming.md | 15 - docs/techniques/security.md | 54 + docs/theming/advanced.md | 32 +- docs/theming/basics.md | 19 +- docs/theming/color-generator.md | 2 +- docs/theming/colors.md | 24 +- docs/theming/css-shadow-parts.md | 63 +- docs/theming/css-variables.md | 28 +- docs/theming/dark-mode.md | 32 +- docs/theming/platform-styles.md | 26 +- docs/theming/themes.md | 12 +- docs/troubleshooting/build.md | 21 +- docs/troubleshooting/cors.md | 8 +- docs/troubleshooting/native.md | 20 +- docs/troubleshooting/runtime.md | 2 +- docs/updating/4-0.md | 16 +- docs/updating/6-0.md | 102 +- docs/updating/7-0.md | 49 +- docs/utilities/animations.md | 1336 +- docs/utilities/gestures.md | 305 +- docs/vue/config.md | 14 +- docs/vue/lifecycle.md | 45 +- docs/vue/navigation.md | 119 +- docs/vue/overview.md | 15 +- docs/vue/platform.md | 4 +- docs/vue/pwa.md | 65 +- docs/vue/quickstart.md | 150 +- docs/vue/slides.md | 6 +- docs/vue/your-first-app.md | 2 +- docs/vue/your-first-app/2-taking-photos.md | 4 +- docs/vue/your-first-app/3-saving-photos.md | 2 +- docusaurus.config.js | 4 +- package-lock.json | 13696 +++------------- package.json | 11 +- .../index.js | 58 +- renovate.json | 25 + scripts/{api-ja.js => _api-ja.js} | 4 +- scripts/{api.js => _api.js} | 8 +- scripts/bak/build-data/release-notes.ts | 285 - scripts/build-translate/index.ts | 92 +- scripts/build-translate/readme.md | 26 +- scripts/build-translate/translate-type.ts | 6 +- scripts/data/cli.json | 373 +- scripts/data/translated-api.json | 1678 +- scripts/data/translated-cache.json | 152 +- scripts/data/translated-cli.json | 92 +- scripts/data/translated-native.json | 562 +- scripts/i18n.sh | 10 +- scripts/native.js | 7 - scripts/release-notes.js | 201 +- sidebars.js | 26 +- src/components/global/DocDemo/index.js | 3 +- src/components/global/Playground/README.md | 4 + src/components/global/Playground/index.tsx | 65 +- .../global/Playground/stackblitz.utils.ts | 330 +- .../global/PlaygroundTabs/index.tsx | 10 +- src/components/page/intro/AppWizard/index.tsx | 3 +- .../next/DeveloperExperts/index.module.scss | 51 + .../intro/next/DeveloperExperts/index.tsx | 29 + .../native/NativeEnterpriseCard/index.tsx | 10 +- .../page/reference/ReleaseNotes/index.tsx | 35 +- .../reference/ReleaseNotes/styles.module.css | 96 +- .../page/theming/CodeColor/index.tsx | 4 +- .../page/theming/ColorAccordion/index.tsx | 17 +- .../page/theming/ColorGenerator/index.tsx | 5 +- .../theming/LayeredColorsSelect/index.tsx | 46 +- src/styles/components/_doc-sidebar.scss | 19 +- src/styles/custom.scss | 4 + src/theme/EventNavbar/index.tsx | 15 +- .../.detection/api/accordion-group.json | 4 +- src/translate/.detection/api/accordion.json | 2 +- .../.detection/api/action-sheet.json | 80 +- src/translate/.detection/api/alert.json | 74 +- src/translate/.detection/api/breadcrumbs.json | 2 +- src/translate/.detection/api/checkbox.json | 104 +- src/translate/.detection/api/content.json | 2 +- src/translate/.detection/api/datetime.json | 63 +- .../api/infinite-scroll-content.json | 2 +- src/translate/.detection/api/input.json | 253 +- src/translate/.detection/api/item.json | 28 +- src/translate/.detection/api/loading.json | 74 +- src/translate/.detection/api/modal.json | 31 +- src/translate/.detection/api/picker.json | 72 + src/translate/.detection/api/popover.json | 10 +- src/translate/.detection/api/radio.json | 82 +- src/translate/.detection/api/range.json | 95 +- .../.detection/api/refresher-content.json | 4 +- src/translate/.detection/api/searchbar.json | 35 +- .../.detection/api/segment-button.json | 7 +- src/translate/.detection/api/segment.json | 4 +- src/translate/.detection/api/select.json | 318 +- src/translate/.detection/api/tab-button.json | 2 +- src/translate/.detection/api/tabs.json | 6 +- src/translate/.detection/api/textarea.json | 254 +- src/translate/.detection/api/toast.json | 74 +- src/translate/.detection/api/toggle.json | 104 +- src/translate/.detection/cli/build.readme.md | 2 +- .../.detection/cli/capacitor-add.readme.md | 3 +- .../.detection/cli/capacitor-build.readme.md | 3 +- .../.detection/cli/capacitor-copy.readme.md | 3 +- .../.detection/cli/capacitor-open.readme.md | 3 +- .../.detection/cli/capacitor-run.readme.md | 3 +- .../.detection/cli/capacitor-sync.readme.md | 3 +- .../.detection/cli/capacitor-update.readme.md | 3 +- .../.detection/cli/completion.readme.md | 2 +- .../.detection/cli/config-get.readme.md | 2 +- .../.detection/cli/config-set.readme.md | 2 +- .../.detection/cli/config-unset.readme.md | 2 +- .../.detection/cli/cordova-build.readme.md | 2 +- .../.detection/cli/cordova-compile.readme.md | 2 +- .../.detection/cli/cordova-emulate.readme.md | 2 +- .../.detection/cli/cordova-platform.readme.md | 2 +- .../.detection/cli/cordova-plugin.readme.md | 2 +- .../.detection/cli/cordova-prepare.readme.md | 2 +- .../cli/cordova-requirements.readme.md | 2 +- .../cli/cordova-resources.readme.md | 3 +- .../.detection/cli/cordova-run.readme.md | 2 +- .../.detection/cli/deploy-add.readme.md | 2 +- .../.detection/cli/deploy-build.readme.md | 3 +- .../.detection/cli/deploy-configure.readme.md | 2 +- .../.detection/cli/doctor-check.readme.md | 2 +- .../.detection/cli/doctor-list.readme.md | 3 +- .../.detection/cli/doctor-treat.readme.md | 2 +- .../.detection/cli/generate.readme.md | 6 +- .../.detection/cli/git-remote.readme.md | 2 +- src/translate/.detection/cli/info.readme.md | 2 +- src/translate/.detection/cli/init.readme.md | 2 +- .../cli/integrations-disable.readme.md | 2 +- .../cli/integrations-enable.readme.md | 2 +- .../cli/integrations-list.readme.md | 2 +- src/translate/.detection/cli/link.readme.md | 2 +- .../.detection/cli/live-update-add.json | 80 + .../.detection/cli/live-update-add.readme.md | 5 + .../.detection/cli/live-update-configure.json | 86 + .../cli/live-update-configure.readme.md | 5 + .../.detection/cli/live-update-manifest.json | 18 + .../cli/live-update-manifest.readme.md | 0 src/translate/.detection/cli/login.readme.md | 2 +- src/translate/.detection/cli/logout.readme.md | 2 +- .../.detection/cli/package-build.readme.md | 5 +- .../.detection/cli/package-deploy.readme.md | 2 +- src/translate/.detection/cli/repair.readme.md | 2 +- src/translate/.detection/cli/serve.json | 2 +- src/translate/.detection/cli/serve.readme.md | 4 +- src/translate/.detection/cli/signup.readme.md | 2 +- .../.detection/cli/ssh-setup.readme.md | 2 +- .../.detection/cli/ssh-use.readme.md | 2 +- .../.detection/cli/ssl-generate.readme.md | 2 +- src/translate/.detection/cli/start.readme.md | 2 +- ...wesome-cordova-plugins-abbyy-rtr.readme.md | 1 - ...awesome-cordova-plugins-actsheet.readme.md | 1 - .../@awesome-cordova-plugins-adjust.readme.md | 1 - ...esome-cordova-plugins-admob-free.readme.md | 1 - ...esome-cordova-plugins-admob-plus.readme.md | 1 - ...wesome-cordova-plugins-admob-pro.readme.md | 3 +- .../@awesome-cordova-plugins-admob.readme.md | 2 +- ...@awesome-cordova-plugins-aes-256.readme.md | 1 - .../@awesome-cordova-plugins-alipay.readme.md | 1 - ...e-cordova-plugins-all-in-one-sdk.readme.md | 1 - ...rdova-plugins-analytics-firebase.readme.md | 1 - ...ordova-plugins-android-exoplayer.readme.md | 1 - ...dova-plugins-android-full-screen.readme.md | 3 +- ...me-cordova-plugins-android-notch.readme.md | 1 - ...dova-plugins-android-permissions.readme.md | 1 - ...@awesome-cordova-plugins-anyline.readme.md | 1 - ...cordova-plugins-app-availability.readme.md | 1 - ...ova-plugins-app-center-analytics.readme.md | 1 - ...rdova-plugins-app-center-crashes.readme.md | 1 - ...va-plugins-app-center-low-memory.readme.md | 1 - ...-cordova-plugins-app-center-push.readme.md | 2 - ...ome-cordova-plugins-app-launcher.readme.md | 1 - ...ome-cordova-plugins-app-minimize.readme.md | 1 - ...-cordova-plugins-app-preferences.readme.md | 1 - ...awesome-cordova-plugins-app-rate.readme.md | 1 - ...some-cordova-plugins-app-version.readme.md | 1 - ...wesome-cordova-plugins-apple-pay.readme.md | 1 - ...ome-cordova-plugins-apple-wallet.readme.md | 1 - ...awesome-cordova-plugins-appodeal.readme.md | 1 - ...va-plugins-approov-advanced-http.readme.md | 2 +- ...wesome-cordova-plugins-appsflyer.readme.md | 1 - ...cordova-plugins-audio-management.readme.md | 1 - ...wesome-cordova-plugins-autostart.readme.md | 1 - ...cordova-plugins-background-fetch.readme.md | 1 - ...a-plugins-background-geolocation.readme.md | 1 - ...-cordova-plugins-background-mode.readme.md | 3 +- ...ordova-plugins-background-upload.readme.md | 1 - ...wesome-cordova-plugins-backlight.readme.md | 1 - .../@awesome-cordova-plugins-badge.readme.md | 1 - ...esome-cordova-plugins-baidu-push.readme.md | 1 - ...-cordova-plugins-barcode-scanner.readme.md | 1 - ...ordova-plugins-base64-to-gallery.readme.md | 2 +- .../@awesome-cordova-plugins-base64.readme.md | 1 - ...e-cordova-plugins-battery-status.readme.md | 1 - ...awesome-cordova-plugins-biocatch.readme.md | 1 - ...ordova-plugins-biometric-wrapper.readme.md | 1 - .../@awesome-cordova-plugins-ble.readme.md | 1 - ...@awesome-cordova-plugins-blinkid.readme.md | 1 - ...@awesome-cordova-plugins-blinkup.readme.md | 1 - ...ns-bluetooth-classic-serial-port.readme.md | 2 +- ...ome-cordova-plugins-bluetooth-le.readme.md | 1 - ...cordova-plugins-bluetooth-serial.readme.md | 2 +- ...wesome-cordova-plugins-braintree.readme.md | 5 +- ...wesome-cordova-plugins-branch-io.readme.md | 1 - ...esome-cordova-plugins-brightness.readme.md | 1 - ...some-cordova-plugins-broadcaster.readme.md | 1 - ...some-cordova-plugins-browser-tab.readme.md | 1 - ...esome-cordova-plugins-build-info.readme.md | 1 - ...awesome-cordova-plugins-calendar.readme.md | 2 - ...e-cordova-plugins-call-directory.readme.md | 1 - ...awesome-cordova-plugins-call-log.readme.md | 1 - ...some-cordova-plugins-call-number.readme.md | 1 - ...e-cordova-plugins-camera-preview.readme.md | 1 - .../@awesome-cordova-plugins-camera.readme.md | 3 +- ...@awesome-cordova-plugins-chooser.readme.md | 2 +- ...wesome-cordova-plugins-class-kit.readme.md | 1 - ...wesome-cordova-plugins-clevertap.readme.md | 1 - ...wesome-cordova-plugins-clipboard.readme.md | 2 - ...e-cordova-plugins-cloud-settings.readme.md | 1 - ...wesome-cordova-plugins-clover-go.readme.md | 1 - ...wesome-cordova-plugins-code-push.readme.md | 1 - ...ova-plugins-colored-browser-tabs.readme.md | 1 - ...awesome-cordova-plugins-contacts.readme.md | 1 - ...e-cordova-plugins-couchbase-lite.readme.md | 1 - .../@awesome-cordova-plugins-crop.readme.md | 2 +- ...ome-cordova-plugins-custom-uisdk.readme.md | 1 - ...some-cordova-plugins-date-picker.readme.md | 1 - ...awesome-cordova-plugins-db-meter.readme.md | 2 +- ...-cordova-plugins-device-accounts.readme.md | 1 - ...-cordova-plugins-device-feedback.readme.md | 2 - ...me-cordova-plugins-device-motion.readme.md | 1 - ...rdova-plugins-device-orientation.readme.md | 1 - .../@awesome-cordova-plugins-device.readme.md | 1 - ...esome-cordova-plugins-dfu-update.readme.md | 1 - ...esome-cordova-plugins-diagnostic.readme.md | 1 - ...@awesome-cordova-plugins-dialogs.readme.md | 1 - ...-cordova-plugins-document-picker.readme.md | 2 - ...cordova-plugins-document-scanner.readme.md | 1 - ...-cordova-plugins-document-viewer.readme.md | 3 +- ...esome-cordova-plugins-downloader.readme.md | 2 - ...e-cordova-plugins-email-composer.readme.md | 3 - ...e-cordova-plugins-emm-app-config.readme.md | 2 - ...cordova-plugins-estimote-beacons.readme.md | 1 - ...gins-extended-device-information.readme.md | 10 +- .../@awesome-cordova-plugins-fabric.readme.md | 1 - ...awesome-cordova-plugins-facebook.readme.md | 8 +- .../@awesome-cordova-plugins-fcm.readme.md | 1 - ...ome-cordova-plugins-file-chooser.readme.md | 2 - ...-cordova-plugins-file-encryption.readme.md | 1 - ...some-cordova-plugins-file-opener.readme.md | 1 - ...wesome-cordova-plugins-file-path.readme.md | 2 - ...some-cordova-plugins-file-picker.readme.md | 2 - ...me-cordova-plugins-file-transfer.readme.md | 1 - .../@awesome-cordova-plugins-file.readme.md | 12 +- ...rdova-plugins-firebase-analytics.readme.md | 5 +- ...-plugins-firebase-authentication.readme.md | 1 - ...-cordova-plugins-firebase-config.readme.md | 1 - ...e-cordova-plugins-firebase-crash.readme.md | 1 - ...ova-plugins-firebase-crashlytics.readme.md | 1 - ...a-plugins-firebase-dynamic-links.readme.md | 4 +- ...rdova-plugins-firebase-messaging.readme.md | 1 - ...-cordova-plugins-firebase-vision.readme.md | 1 - ...esome-cordova-plugins-firebase-x.readme.md | 1 - ...awesome-cordova-plugins-firebase.readme.md | 1 - ...cordova-plugins-flurry-analytics.readme.md | 1 - ...rdova-plugins-foreground-service.readme.md | 5 +- .../@awesome-cordova-plugins-ftp.readme.md | 1 - ...ordova-plugins-full-screen-image.readme.md | 1 - ...-cordova-plugins-gao-de-location.readme.md | 1 - ...ordova-plugins-ge-tui-sdk-plugin.readme.md | 1 - ...awesome-cordova-plugins-geofence.readme.md | 2 +- ...some-cordova-plugins-geolocation.readme.md | 5 +- ...me-cordova-plugins-globalization.readme.md | 1 - ...cordova-plugins-google-analytics.readme.md | 4 +- ...me-cordova-plugins-google-nearby.readme.md | 1 - ...ugins-google-play-games-services.readme.md | 1 - ...wesome-cordova-plugins-gyroscope.readme.md | 2 +- .../@awesome-cordova-plugins-hce.readme.md | 1 - ...ome-cordova-plugins-header-color.readme.md | 1 - ...esome-cordova-plugins-health-kit.readme.md | 1 - .../@awesome-cordova-plugins-health.readme.md | 1 - ...@awesome-cordova-plugins-hotspot.readme.md | 1 - .../@awesome-cordova-plugins-http.readme.md | 2 +- .../@awesome-cordova-plugins-httpd.readme.md | 3 +- ...-cordova-plugins-iamport-cordova.readme.md | 1 - ...@awesome-cordova-plugins-ibeacon.readme.md | 3 +- ...ome-cordova-plugins-image-picker.readme.md | 1 - ...me-cordova-plugins-image-resizer.readme.md | 1 - .../@awesome-cordova-plugins-imap.readme.md | 1 - ...e-cordova-plugins-in-app-browser.readme.md | 2 +- ...ordova-plugins-in-app-purchase-2.readme.md | 35 +- ...-cordova-plugins-in-app-purchase.readme.md | 1 - ...me-cordova-plugins-in-app-review.readme.md | 2 - ...ordova-plugins-index-app-content.readme.md | 1 - ...awesome-cordova-plugins-insomnia.readme.md | 1 - ...e-cordova-plugins-intel-security.readme.md | 2 +- ...awesome-cordova-plugins-intercom.readme.md | 1 - ...me-cordova-plugins-ionic-webview.readme.md | 1 - ...s-ios-aswebauthenticationsessapi.readme.md | 1 - ...awesome-cordova-plugins-is-debug.readme.md | 1 - ...esome-cordova-plugins-janalytics.readme.md | 1 - ...wesome-cordova-plugins-jins-meme.readme.md | 1 - .../@awesome-cordova-plugins-jumio.readme.md | 2 +- ...awesome-cordova-plugins-keyboard.readme.md | 1 - ...ordova-plugins-keychain-touch-id.readme.md | 1 - ...awesome-cordova-plugins-keychain.readme.md | 1 - ...some-cordova-plugins-kommunicate.readme.md | 1 - ...awesome-cordova-plugins-last-cam.readme.md | 1 - ...cordova-plugins-launch-navigator.readme.md | 1 - ...me-cordova-plugins-launch-review.readme.md | 3 +- ...esome-cordova-plugins-line-login.readme.md | 1 - ...ome-cordova-plugins-local-backup.readme.md | 1 - ...dova-plugins-local-notifications.readme.md | 1 - ...me-cordova-plugins-locataccuracy.readme.md | 1 - ...ova-plugins-lottie-splash-screen.readme.md | 1 - .../@awesome-cordova-plugins-luxand.readme.md | 1 - ...ome-cordova-plugins-magnetometer.readme.md | 1 - .../@awesome-cordova-plugins-market.readme.md | 1 - ...me-cordova-plugins-media-capture.readme.md | 1 - .../@awesome-cordova-plugins-media.readme.md | 1 - .../@awesome-cordova-plugins-metrix.readme.md | 1 - ...awesome-cordova-plugins-mixpanel.readme.md | 1 - ...-cordova-plugins-mlkit-translate.readme.md | 1 - ...ova-plugins-mobile-accessibility.readme.md | 1 - ...cordova-plugins-mobile-messaging.readme.md | 1 - ...@awesome-cordova-plugins-ms-adal.readme.md | 3 +- ...plugins-multiple-document-picker.readme.md | 1 - ...e-cordova-plugins-music-controls.readme.md | 1 - ...ome-cordova-plugins-native-audio.readme.md | 2 +- ...-cordova-plugins-native-geocoder.readme.md | 1 - ...-cordova-plugins-native-keyboard.readme.md | 2 - ...-plugins-native-page-transitions.readme.md | 1 - ...cordova-plugins-native-ringtones.readme.md | 1 - ...esome-cordova-plugins-navigatbar.readme.md | 1 - ...ordova-plugins-network-interface.readme.md | 1 - ...@awesome-cordova-plugins-network.readme.md | 1 - .../@awesome-cordova-plugins-nfc.readme.md | 2 +- .../@awesome-cordova-plugins-ocr.readme.md | 3 +- ...wesome-cordova-plugins-onesignal.readme.md | 6 +- ...ova-plugins-open-native-settings.readme.md | 3 +- ...awesome-cordova-plugins-openalpr.readme.md | 1 - .../@awesome-cordova-plugins-paypal.readme.md | 1 - ...@awesome-cordova-plugins-paytabs.readme.md | 1 - ...me-cordova-plugins-pdf-generator.readme.md | 1 - ...wesome-cordova-plugins-pedometer.readme.md | 1 - ...gins-phonegap-local-notification.readme.md | 1 - ...me-cordova-plugins-photo-library.readme.md | 1 - ...ome-cordova-plugins-photo-viewer.readme.md | 2 +- ...wesome-cordova-plugins-pin-check.readme.md | 1 - ...esome-cordova-plugins-pin-dialog.readme.md | 3 - ...wesome-cordova-plugins-pinterest.readme.md | 1 - ...awesome-cordova-plugins-pollfish.readme.md | 1 - ...cordova-plugins-power-management.readme.md | 1 - ...rdova-plugins-power-optimization.readme.md | 1 - ...@awesome-cordova-plugins-printer.readme.md | 2 +- ...cordova-plugins-pspdfkit-cordova.readme.md | 1 - ...wesome-cordova-plugins-purchases.readme.md | 6 +- .../@awesome-cordova-plugins-push.readme.md | 1 - ...ome-cordova-plugins-pushape-push.readme.md | 1 - .../@awesome-cordova-plugins-qqsdk.readme.md | 1 - ...esome-cordova-plugins-qr-scanner.readme.md | 1 - ...a-plugins-regula-document-reader.readme.md | 1 - ...@awesome-cordova-plugins-restart.readme.md | 1 - ...@awesome-cordova-plugins-rollbar.readme.md | 1 - ...a-plugins-safari-view-controller.readme.md | 1 - ...rdova-plugins-screen-orientation.readme.md | 1 - ...esome-cordova-plugins-screenshot.readme.md | 2 +- ...@awesome-cordova-plugins-sensors.readme.md | 1 - .../@awesome-cordova-plugins-serial.readme.md | 1 - ...ordova-plugins-service-discovery.readme.md | 1 - .../@awesome-cordova-plugins-shake.readme.md | 2 +- ...me-cordova-plugins-shop-checkout.readme.md | 1 - ...ordova-plugins-shortcuts-android.readme.md | 1 - ...rdova-plugins-sign-in-with-apple.readme.md | 3 +- .../@awesome-cordova-plugins-sim.readme.md | 1 - ...e-cordova-plugins-siri-shortcuts.readme.md | 1 - ...wesome-cordova-plugins-smartlook.readme.md | 1 - ...me-cordova-plugins-sms-retriever.readme.md | 1 - .../@awesome-cordova-plugins-sms.readme.md | 2 - ...e-cordova-plugins-social-sharing.readme.md | 1 - ...rdova-plugins-speech-recognition.readme.md | 1 - ...wesome-cordova-plugins-speechkit.readme.md | 1 - ...e-cordova-plugins-spinner-dialog.readme.md | 1 - ...me-cordova-plugins-splash-screen.readme.md | 2 +- ...ome-cordova-plugins-spotify-auth.readme.md | 2 +- ...e-cordova-plugins-sqlite-db-copy.readme.md | 1 - ...me-cordova-plugins-sqlite-porter.readme.md | 1 - .../@awesome-cordova-plugins-sqlite.readme.md | 1 - ...some-cordova-plugins-ssh-connect.readme.md | 1 - ...wesome-cordova-plugins-star-prnt.readme.md | 3 +- ...esome-cordova-plugins-status-bar.readme.md | 1 - ...some-cordova-plugins-stepcounter.readme.md | 2 +- ...-cordova-plugins-streaming-media.readme.md | 1 - .../@awesome-cordova-plugins-stripe.readme.md | 1 - .../@awesome-cordova-plugins-sum-up.readme.md | 1 - ...s-system-alert-window-permission.readme.md | 1 - ...me-cordova-plugins-taptic-engine.readme.md | 1 - ...ova-plugins-tealium-adidentifier.readme.md | 1 - ...-plugins-tealium-installreferrer.readme.md | 1 - ...@awesome-cordova-plugins-tealium.readme.md | 3 +- ...-plugins-text-to-speech-advanced.readme.md | 1 - ...e-cordova-plugins-text-to-speech.readme.md | 1 - ...-cordova-plugins-theme-detection.readme.md | 1 - ...ordova-plugins-themeable-browser.readme.md | 1 - ...-cordova-plugins-three-dee-touch.readme.md | 1 - .../@awesome-cordova-plugins-toast.readme.md | 1 - ...awesome-cordova-plugins-touch-id.readme.md | 1 - ...-cordova-plugins-twitter-connect.readme.md | 4 +- .../@awesome-cordova-plugins-uid.readme.md | 1 - ...cordova-plugins-unique-device-id.readme.md | 1 - ...dova-plugins-unvired-cordova-sdk.readme.md | 18 +- .../@awesome-cordova-plugins-uptime.readme.md | 1 - ...ome-cordova-plugins-urbanairship.readme.md | 1 - ...ova-plugins-usabilla-cordova-sdk.readme.md | 1 - ...esome-cordova-plugins-user-agent.readme.md | 3 +- .../@awesome-cordova-plugins-vibes.readme.md | 1 - ...wesome-cordova-plugins-vibration.readme.md | 2 +- ...rdova-plugins-video-capture-plus.readme.md | 2 +- ...ome-cordova-plugins-video-player.readme.md | 1 - ...esome-cordova-plugins-web-intent.readme.md | 3 +- ...esome-cordova-plugins-web-server.readme.md | 1 - ...ordova-plugins-web-socket-server.readme.md | 1 - ...wesome-cordova-plugins-webengage.readme.md | 1 - .../@awesome-cordova-plugins-wechat.readme.md | 1 - ...me-cordova-plugins-wifi-wizard-2.readme.md | 1 - ...esome-cordova-plugins-wonderpush.readme.md | 2 - ...ova-plugins-youtube-video-player.readme.md | 1 - .../@awesome-cordova-plugins-zbar.readme.md | 1 - ...awesome-cordova-plugins-zeroconf.readme.md | 3 +- .../@awesome-cordova-plugins-zip.readme.md | 1 - .../@awesome-cordova-plugins-zoom.readme.md | 1 - src/translate/api/accordion-group.json | 4 +- src/translate/api/accordion.json | 2 +- src/translate/api/action-sheet.json | 80 +- src/translate/api/alert.json | 74 +- src/translate/api/breadcrumbs.json | 2 +- src/translate/api/checkbox.json | 104 +- src/translate/api/content.json | 2 +- src/translate/api/datetime.json | 63 +- .../api/infinite-scroll-content.json | 2 +- src/translate/api/input.json | 253 +- src/translate/api/item.json | 28 +- src/translate/api/loading.json | 74 +- src/translate/api/modal.json | 31 +- src/translate/api/picker.json | 72 + src/translate/api/popover.json | 10 +- src/translate/api/radio.json | 82 +- src/translate/api/range.json | 95 +- src/translate/api/refresher-content.json | 4 +- src/translate/api/searchbar.json | 35 +- src/translate/api/segment-button.json | 7 +- src/translate/api/segment.json | 4 +- src/translate/api/select.json | 318 +- src/translate/api/tab-button.json | 2 +- src/translate/api/tabs.json | 6 +- src/translate/api/textarea.json | 254 +- src/translate/api/toast.json | 74 +- src/translate/api/toggle.json | 104 +- src/translate/cli/build.readme.md | 2 +- src/translate/cli/capacitor-add.readme.md | 3 +- src/translate/cli/capacitor-build.readme.md | 3 +- src/translate/cli/capacitor-copy.readme.md | 3 +- src/translate/cli/capacitor-open.readme.md | 3 +- src/translate/cli/capacitor-run.readme.md | 3 +- src/translate/cli/capacitor-sync.readme.md | 3 +- src/translate/cli/capacitor-update.readme.md | 3 +- src/translate/cli/completion.readme.md | 2 +- src/translate/cli/config-get.readme.md | 2 +- src/translate/cli/config-set.readme.md | 2 +- src/translate/cli/config-unset.readme.md | 2 +- src/translate/cli/cordova-build.readme.md | 2 +- src/translate/cli/cordova-compile.readme.md | 2 +- src/translate/cli/cordova-emulate.readme.md | 2 +- src/translate/cli/cordova-platform.readme.md | 2 +- src/translate/cli/cordova-plugin.readme.md | 2 +- src/translate/cli/cordova-prepare.readme.md | 2 +- .../cli/cordova-requirements.readme.md | 2 +- src/translate/cli/cordova-resources.readme.md | 3 +- src/translate/cli/cordova-run.readme.md | 2 +- src/translate/cli/deploy-add.readme.md | 2 +- src/translate/cli/deploy-build.readme.md | 3 +- src/translate/cli/deploy-configure.readme.md | 2 +- src/translate/cli/doctor-check.readme.md | 2 +- src/translate/cli/doctor-list.readme.md | 3 +- src/translate/cli/doctor-treat.readme.md | 2 +- src/translate/cli/generate.readme.md | 6 +- src/translate/cli/git-remote.readme.md | 2 +- src/translate/cli/info.readme.md | 2 +- src/translate/cli/init.readme.md | 2 +- .../cli/integrations-disable.readme.md | 2 +- .../cli/integrations-enable.readme.md | 2 +- src/translate/cli/integrations-list.readme.md | 2 +- src/translate/cli/link.readme.md | 2 +- src/translate/cli/live-update-add.json | 80 + src/translate/cli/live-update-add.readme.md | 5 + src/translate/cli/live-update-configure.json | 86 + .../cli/live-update-configure.readme.md | 5 + src/translate/cli/live-update-manifest.json | 18 + .../cli/live-update-manifest.readme.md | 0 src/translate/cli/login.readme.md | 2 +- src/translate/cli/logout.readme.md | 2 +- src/translate/cli/package-build.readme.md | 5 +- src/translate/cli/package-deploy.readme.md | 2 +- src/translate/cli/repair.readme.md | 2 +- src/translate/cli/serve.json | 2 +- src/translate/cli/serve.readme.md | 4 +- src/translate/cli/signup.readme.md | 2 +- src/translate/cli/ssh-setup.readme.md | 2 +- src/translate/cli/ssh-use.readme.md | 2 +- src/translate/cli/ssl-generate.readme.md | 2 +- src/translate/cli/start.readme.md | 2 +- ...wesome-cordova-plugins-abbyy-rtr.readme.md | 1 - ...awesome-cordova-plugins-actsheet.readme.md | 1 - .../@awesome-cordova-plugins-adjust.readme.md | 1 - ...esome-cordova-plugins-admob-free.readme.md | 1 - ...esome-cordova-plugins-admob-plus.readme.md | 1 - ...wesome-cordova-plugins-admob-pro.readme.md | 3 +- .../@awesome-cordova-plugins-admob.readme.md | 2 +- ...@awesome-cordova-plugins-aes-256.readme.md | 1 - .../@awesome-cordova-plugins-alipay.readme.md | 1 - ...e-cordova-plugins-all-in-one-sdk.readme.md | 1 - ...rdova-plugins-analytics-firebase.readme.md | 1 - ...ordova-plugins-android-exoplayer.readme.md | 1 - ...dova-plugins-android-full-screen.readme.md | 3 +- ...me-cordova-plugins-android-notch.readme.md | 1 - ...dova-plugins-android-permissions.readme.md | 1 - ...@awesome-cordova-plugins-anyline.readme.md | 1 - ...cordova-plugins-app-availability.readme.md | 1 - ...ova-plugins-app-center-analytics.readme.md | 1 - ...rdova-plugins-app-center-crashes.readme.md | 1 - ...va-plugins-app-center-low-memory.readme.md | 1 - ...-cordova-plugins-app-center-push.readme.md | 2 - ...ome-cordova-plugins-app-launcher.readme.md | 1 - ...ome-cordova-plugins-app-minimize.readme.md | 1 - ...-cordova-plugins-app-preferences.readme.md | 1 - ...awesome-cordova-plugins-app-rate.readme.md | 1 - ...some-cordova-plugins-app-version.readme.md | 1 - ...wesome-cordova-plugins-apple-pay.readme.md | 1 - ...ome-cordova-plugins-apple-wallet.readme.md | 1 - ...awesome-cordova-plugins-appodeal.readme.md | 1 - ...va-plugins-approov-advanced-http.readme.md | 2 +- ...wesome-cordova-plugins-appsflyer.readme.md | 1 - ...cordova-plugins-audio-management.readme.md | 1 - ...wesome-cordova-plugins-autostart.readme.md | 1 - ...cordova-plugins-background-fetch.readme.md | 1 - ...a-plugins-background-geolocation.readme.md | 1 - ...-cordova-plugins-background-mode.readme.md | 3 +- ...ordova-plugins-background-upload.readme.md | 1 - ...wesome-cordova-plugins-backlight.readme.md | 1 - .../@awesome-cordova-plugins-badge.readme.md | 1 - ...esome-cordova-plugins-baidu-push.readme.md | 1 - ...-cordova-plugins-barcode-scanner.readme.md | 1 - ...ordova-plugins-base64-to-gallery.readme.md | 2 +- .../@awesome-cordova-plugins-base64.readme.md | 1 - ...e-cordova-plugins-battery-status.readme.md | 1 - ...awesome-cordova-plugins-biocatch.readme.md | 1 - ...ordova-plugins-biometric-wrapper.readme.md | 1 - .../@awesome-cordova-plugins-ble.readme.md | 1 - ...@awesome-cordova-plugins-blinkid.readme.md | 1 - ...@awesome-cordova-plugins-blinkup.readme.md | 1 - ...ns-bluetooth-classic-serial-port.readme.md | 2 +- ...ome-cordova-plugins-bluetooth-le.readme.md | 1 - ...cordova-plugins-bluetooth-serial.readme.md | 2 +- ...wesome-cordova-plugins-braintree.readme.md | 5 +- ...wesome-cordova-plugins-branch-io.readme.md | 1 - ...esome-cordova-plugins-brightness.readme.md | 1 - ...some-cordova-plugins-broadcaster.readme.md | 1 - ...some-cordova-plugins-browser-tab.readme.md | 1 - ...esome-cordova-plugins-build-info.readme.md | 1 - ...awesome-cordova-plugins-calendar.readme.md | 2 - ...e-cordova-plugins-call-directory.readme.md | 1 - ...awesome-cordova-plugins-call-log.readme.md | 1 - ...some-cordova-plugins-call-number.readme.md | 1 - ...e-cordova-plugins-camera-preview.readme.md | 1 - .../@awesome-cordova-plugins-camera.readme.md | 3 +- ...@awesome-cordova-plugins-chooser.readme.md | 2 +- ...wesome-cordova-plugins-class-kit.readme.md | 1 - ...wesome-cordova-plugins-clevertap.readme.md | 1 - ...wesome-cordova-plugins-clipboard.readme.md | 2 - ...e-cordova-plugins-cloud-settings.readme.md | 1 - ...wesome-cordova-plugins-clover-go.readme.md | 1 - ...wesome-cordova-plugins-code-push.readme.md | 1 - ...ova-plugins-colored-browser-tabs.readme.md | 1 - ...awesome-cordova-plugins-contacts.readme.md | 1 - ...e-cordova-plugins-couchbase-lite.readme.md | 1 - .../@awesome-cordova-plugins-crop.readme.md | 2 +- ...ome-cordova-plugins-custom-uisdk.readme.md | 1 - ...some-cordova-plugins-date-picker.readme.md | 1 - ...awesome-cordova-plugins-db-meter.readme.md | 2 +- ...-cordova-plugins-device-accounts.readme.md | 1 - ...-cordova-plugins-device-feedback.readme.md | 2 - ...me-cordova-plugins-device-motion.readme.md | 1 - ...rdova-plugins-device-orientation.readme.md | 1 - .../@awesome-cordova-plugins-device.readme.md | 1 - ...esome-cordova-plugins-dfu-update.readme.md | 1 - ...esome-cordova-plugins-diagnostic.readme.md | 1 - ...@awesome-cordova-plugins-dialogs.readme.md | 1 - ...-cordova-plugins-document-picker.readme.md | 2 - ...cordova-plugins-document-scanner.readme.md | 1 - ...-cordova-plugins-document-viewer.readme.md | 3 +- ...esome-cordova-plugins-downloader.readme.md | 2 - ...e-cordova-plugins-email-composer.readme.md | 3 - ...e-cordova-plugins-emm-app-config.readme.md | 2 - ...cordova-plugins-estimote-beacons.readme.md | 1 - ...gins-extended-device-information.readme.md | 10 +- .../@awesome-cordova-plugins-fabric.readme.md | 1 - ...awesome-cordova-plugins-facebook.readme.md | 8 +- .../@awesome-cordova-plugins-fcm.readme.md | 1 - ...ome-cordova-plugins-file-chooser.readme.md | 2 - ...-cordova-plugins-file-encryption.readme.md | 1 - ...some-cordova-plugins-file-opener.readme.md | 1 - ...wesome-cordova-plugins-file-path.readme.md | 2 - ...some-cordova-plugins-file-picker.readme.md | 2 - ...me-cordova-plugins-file-transfer.readme.md | 1 - .../@awesome-cordova-plugins-file.readme.md | 12 +- ...rdova-plugins-firebase-analytics.readme.md | 5 +- ...-plugins-firebase-authentication.readme.md | 1 - ...-cordova-plugins-firebase-config.readme.md | 1 - ...e-cordova-plugins-firebase-crash.readme.md | 1 - ...ova-plugins-firebase-crashlytics.readme.md | 1 - ...a-plugins-firebase-dynamic-links.readme.md | 4 +- ...rdova-plugins-firebase-messaging.readme.md | 1 - ...-cordova-plugins-firebase-vision.readme.md | 1 - ...esome-cordova-plugins-firebase-x.readme.md | 1 - ...awesome-cordova-plugins-firebase.readme.md | 1 - ...cordova-plugins-flurry-analytics.readme.md | 1 - ...rdova-plugins-foreground-service.readme.md | 5 +- .../@awesome-cordova-plugins-ftp.readme.md | 1 - ...ordova-plugins-full-screen-image.readme.md | 1 - ...-cordova-plugins-gao-de-location.readme.md | 1 - ...ordova-plugins-ge-tui-sdk-plugin.readme.md | 1 - ...awesome-cordova-plugins-geofence.readme.md | 2 +- ...some-cordova-plugins-geolocation.readme.md | 5 +- ...me-cordova-plugins-globalization.readme.md | 1 - ...cordova-plugins-google-analytics.readme.md | 4 +- ...me-cordova-plugins-google-nearby.readme.md | 1 - ...ugins-google-play-games-services.readme.md | 1 - ...wesome-cordova-plugins-gyroscope.readme.md | 2 +- .../@awesome-cordova-plugins-hce.readme.md | 1 - ...ome-cordova-plugins-header-color.readme.md | 1 - ...esome-cordova-plugins-health-kit.readme.md | 1 - .../@awesome-cordova-plugins-health.readme.md | 1 - ...@awesome-cordova-plugins-hotspot.readme.md | 1 - .../@awesome-cordova-plugins-http.readme.md | 2 +- .../@awesome-cordova-plugins-httpd.readme.md | 3 +- ...-cordova-plugins-iamport-cordova.readme.md | 1 - ...@awesome-cordova-plugins-ibeacon.readme.md | 3 +- ...ome-cordova-plugins-image-picker.readme.md | 1 - ...me-cordova-plugins-image-resizer.readme.md | 1 - .../@awesome-cordova-plugins-imap.readme.md | 1 - ...e-cordova-plugins-in-app-browser.readme.md | 2 +- ...ordova-plugins-in-app-purchase-2.readme.md | 35 +- ...-cordova-plugins-in-app-purchase.readme.md | 1 - ...me-cordova-plugins-in-app-review.readme.md | 2 - ...ordova-plugins-index-app-content.readme.md | 1 - ...awesome-cordova-plugins-insomnia.readme.md | 1 - ...e-cordova-plugins-intel-security.readme.md | 2 +- ...awesome-cordova-plugins-intercom.readme.md | 1 - ...me-cordova-plugins-ionic-webview.readme.md | 1 - ...s-ios-aswebauthenticationsessapi.readme.md | 1 - ...awesome-cordova-plugins-is-debug.readme.md | 1 - ...esome-cordova-plugins-janalytics.readme.md | 1 - ...wesome-cordova-plugins-jins-meme.readme.md | 1 - .../@awesome-cordova-plugins-jumio.readme.md | 2 +- ...awesome-cordova-plugins-keyboard.readme.md | 1 - ...ordova-plugins-keychain-touch-id.readme.md | 1 - ...awesome-cordova-plugins-keychain.readme.md | 1 - ...some-cordova-plugins-kommunicate.readme.md | 1 - ...awesome-cordova-plugins-last-cam.readme.md | 1 - ...cordova-plugins-launch-navigator.readme.md | 1 - ...me-cordova-plugins-launch-review.readme.md | 3 +- ...esome-cordova-plugins-line-login.readme.md | 1 - ...ome-cordova-plugins-local-backup.readme.md | 1 - ...dova-plugins-local-notifications.readme.md | 1 - ...me-cordova-plugins-locataccuracy.readme.md | 1 - ...ova-plugins-lottie-splash-screen.readme.md | 1 - .../@awesome-cordova-plugins-luxand.readme.md | 1 - ...ome-cordova-plugins-magnetometer.readme.md | 1 - .../@awesome-cordova-plugins-market.readme.md | 1 - ...me-cordova-plugins-media-capture.readme.md | 1 - .../@awesome-cordova-plugins-media.readme.md | 1 - .../@awesome-cordova-plugins-metrix.readme.md | 1 - ...awesome-cordova-plugins-mixpanel.readme.md | 1 - ...-cordova-plugins-mlkit-translate.readme.md | 1 - ...ova-plugins-mobile-accessibility.readme.md | 1 - ...cordova-plugins-mobile-messaging.readme.md | 1 - ...@awesome-cordova-plugins-ms-adal.readme.md | 3 +- ...plugins-multiple-document-picker.readme.md | 1 - ...e-cordova-plugins-music-controls.readme.md | 1 - ...ome-cordova-plugins-native-audio.readme.md | 2 +- ...-cordova-plugins-native-geocoder.readme.md | 1 - ...-cordova-plugins-native-keyboard.readme.md | 2 - ...-plugins-native-page-transitions.readme.md | 1 - ...cordova-plugins-native-ringtones.readme.md | 1 - ...esome-cordova-plugins-navigatbar.readme.md | 1 - ...ordova-plugins-network-interface.readme.md | 1 - ...@awesome-cordova-plugins-network.readme.md | 1 - .../@awesome-cordova-plugins-nfc.readme.md | 2 +- .../@awesome-cordova-plugins-ocr.readme.md | 3 +- ...wesome-cordova-plugins-onesignal.readme.md | 6 +- ...ova-plugins-open-native-settings.readme.md | 3 +- ...awesome-cordova-plugins-openalpr.readme.md | 1 - .../@awesome-cordova-plugins-paypal.readme.md | 1 - ...@awesome-cordova-plugins-paytabs.readme.md | 1 - ...me-cordova-plugins-pdf-generator.readme.md | 1 - ...wesome-cordova-plugins-pedometer.readme.md | 1 - ...gins-phonegap-local-notification.readme.md | 1 - ...me-cordova-plugins-photo-library.readme.md | 1 - ...ome-cordova-plugins-photo-viewer.readme.md | 2 +- ...wesome-cordova-plugins-pin-check.readme.md | 1 - ...esome-cordova-plugins-pin-dialog.readme.md | 3 - ...wesome-cordova-plugins-pinterest.readme.md | 1 - ...awesome-cordova-plugins-pollfish.readme.md | 1 - ...cordova-plugins-power-management.readme.md | 1 - ...rdova-plugins-power-optimization.readme.md | 1 - ...@awesome-cordova-plugins-printer.readme.md | 2 +- ...cordova-plugins-pspdfkit-cordova.readme.md | 1 - ...wesome-cordova-plugins-purchases.readme.md | 6 +- .../@awesome-cordova-plugins-push.readme.md | 1 - ...ome-cordova-plugins-pushape-push.readme.md | 1 - .../@awesome-cordova-plugins-qqsdk.readme.md | 1 - ...esome-cordova-plugins-qr-scanner.readme.md | 1 - ...a-plugins-regula-document-reader.readme.md | 1 - ...@awesome-cordova-plugins-restart.readme.md | 1 - ...@awesome-cordova-plugins-rollbar.readme.md | 1 - ...a-plugins-safari-view-controller.readme.md | 1 - ...rdova-plugins-screen-orientation.readme.md | 1 - ...esome-cordova-plugins-screenshot.readme.md | 2 +- ...@awesome-cordova-plugins-sensors.readme.md | 1 - .../@awesome-cordova-plugins-serial.readme.md | 1 - ...ordova-plugins-service-discovery.readme.md | 1 - .../@awesome-cordova-plugins-shake.readme.md | 2 +- ...me-cordova-plugins-shop-checkout.readme.md | 1 - ...ordova-plugins-shortcuts-android.readme.md | 1 - ...rdova-plugins-sign-in-with-apple.readme.md | 3 +- .../@awesome-cordova-plugins-sim.readme.md | 1 - ...e-cordova-plugins-siri-shortcuts.readme.md | 1 - ...wesome-cordova-plugins-smartlook.readme.md | 1 - ...me-cordova-plugins-sms-retriever.readme.md | 1 - .../@awesome-cordova-plugins-sms.readme.md | 2 - ...e-cordova-plugins-social-sharing.readme.md | 1 - ...rdova-plugins-speech-recognition.readme.md | 1 - ...wesome-cordova-plugins-speechkit.readme.md | 1 - ...e-cordova-plugins-spinner-dialog.readme.md | 1 - ...me-cordova-plugins-splash-screen.readme.md | 2 +- ...ome-cordova-plugins-spotify-auth.readme.md | 2 +- ...e-cordova-plugins-sqlite-db-copy.readme.md | 1 - ...me-cordova-plugins-sqlite-porter.readme.md | 1 - .../@awesome-cordova-plugins-sqlite.readme.md | 1 - ...some-cordova-plugins-ssh-connect.readme.md | 1 - ...wesome-cordova-plugins-star-prnt.readme.md | 3 +- ...esome-cordova-plugins-status-bar.readme.md | 1 - ...some-cordova-plugins-stepcounter.readme.md | 2 +- ...-cordova-plugins-streaming-media.readme.md | 1 - .../@awesome-cordova-plugins-stripe.readme.md | 1 - .../@awesome-cordova-plugins-sum-up.readme.md | 1 - ...s-system-alert-window-permission.readme.md | 1 - ...me-cordova-plugins-taptic-engine.readme.md | 1 - ...ova-plugins-tealium-adidentifier.readme.md | 1 - ...-plugins-tealium-installreferrer.readme.md | 1 - ...@awesome-cordova-plugins-tealium.readme.md | 3 +- ...-plugins-text-to-speech-advanced.readme.md | 1 - ...e-cordova-plugins-text-to-speech.readme.md | 1 - ...-cordova-plugins-theme-detection.readme.md | 1 - ...ordova-plugins-themeable-browser.readme.md | 1 - ...-cordova-plugins-three-dee-touch.readme.md | 1 - .../@awesome-cordova-plugins-toast.readme.md | 1 - ...awesome-cordova-plugins-touch-id.readme.md | 1 - ...-cordova-plugins-twitter-connect.readme.md | 4 +- .../@awesome-cordova-plugins-uid.readme.md | 1 - ...cordova-plugins-unique-device-id.readme.md | 1 - ...dova-plugins-unvired-cordova-sdk.readme.md | 18 +- .../@awesome-cordova-plugins-uptime.readme.md | 1 - ...ome-cordova-plugins-urbanairship.readme.md | 1 - ...ova-plugins-usabilla-cordova-sdk.readme.md | 1 - ...esome-cordova-plugins-user-agent.readme.md | 3 +- .../@awesome-cordova-plugins-vibes.readme.md | 1 - ...wesome-cordova-plugins-vibration.readme.md | 2 +- ...rdova-plugins-video-capture-plus.readme.md | 2 +- ...ome-cordova-plugins-video-player.readme.md | 1 - ...esome-cordova-plugins-web-intent.readme.md | 3 +- ...esome-cordova-plugins-web-server.readme.md | 1 - ...ordova-plugins-web-socket-server.readme.md | 1 - ...wesome-cordova-plugins-webengage.readme.md | 1 - .../@awesome-cordova-plugins-wechat.readme.md | 1 - ...me-cordova-plugins-wifi-wizard-2.readme.md | 1 - ...esome-cordova-plugins-wonderpush.readme.md | 2 - ...ova-plugins-youtube-video-player.readme.md | 1 - .../@awesome-cordova-plugins-zbar.readme.md | 1 - ...awesome-cordova-plugins-zeroconf.readme.md | 3 +- .../@awesome-cordova-plugins-zip.readme.md | 1 - .../@awesome-cordova-plugins-zoom.readme.md | 1 - .../accordion-group/custom-props.md | 2 +- .../auto-generated/accordion-group/events.md | 8 +- .../auto-generated/accordion-group/methods.md | 2 +- .../auto-generated/accordion-group/parts.md | 2 +- .../auto-generated/accordion-group/props.md | 99 +- .../auto-generated/accordion-group/slots.md | 2 +- .../auto-generated/accordion/custom-props.md | 2 +- static/auto-generated/accordion/events.md | 2 +- static/auto-generated/accordion/methods.md | 2 +- static/auto-generated/accordion/parts.md | 10 +- static/auto-generated/accordion/props.md | 85 +- static/auto-generated/accordion/slots.md | 8 +- .../action-sheet/custom-props.md | 52 +- static/auto-generated/action-sheet/events.md | 10 +- static/auto-generated/action-sheet/methods.md | 31 +- static/auto-generated/action-sheet/parts.md | 2 +- static/auto-generated/action-sheet/props.md | 171 +- static/auto-generated/action-sheet/slots.md | 2 +- static/auto-generated/alert/custom-props.md | 22 +- static/auto-generated/alert/events.md | 10 +- static/auto-generated/alert/methods.md | 31 +- static/auto-generated/alert/parts.md | 2 +- static/auto-generated/alert/props.md | 201 +- static/auto-generated/alert/slots.md | 2 +- static/auto-generated/app/custom-props.md | 2 +- static/auto-generated/app/events.md | 2 +- static/auto-generated/app/methods.md | 2 +- static/auto-generated/app/parts.md | 2 +- static/auto-generated/app/props.md | 2 +- static/auto-generated/app/slots.md | 2 +- static/auto-generated/avatar/custom-props.md | 6 +- static/auto-generated/avatar/events.md | 2 +- static/auto-generated/avatar/methods.md | 2 +- static/auto-generated/avatar/parts.md | 2 +- static/auto-generated/avatar/props.md | 2 +- static/auto-generated/avatar/slots.md | 2 +- .../back-button/custom-props.md | 70 +- static/auto-generated/back-button/events.md | 2 +- static/auto-generated/back-button/methods.md | 2 +- static/auto-generated/back-button/parts.md | 10 +- static/auto-generated/back-button/props.md | 117 +- static/auto-generated/back-button/slots.md | 2 +- .../auto-generated/backdrop/custom-props.md | 2 +- static/auto-generated/backdrop/events.md | 6 +- static/auto-generated/backdrop/methods.md | 2 +- static/auto-generated/backdrop/parts.md | 2 +- static/auto-generated/backdrop/props.md | 43 +- static/auto-generated/backdrop/slots.md | 2 +- static/auto-generated/badge/custom-props.md | 18 +- static/auto-generated/badge/events.md | 2 +- static/auto-generated/badge/methods.md | 2 +- static/auto-generated/badge/parts.md | 2 +- static/auto-generated/badge/props.md | 29 +- static/auto-generated/badge/slots.md | 2 +- .../auto-generated/breadcrumb/custom-props.md | 16 +- static/auto-generated/breadcrumb/events.md | 10 +- static/auto-generated/breadcrumb/methods.md | 2 +- static/auto-generated/breadcrumb/parts.md | 12 +- static/auto-generated/breadcrumb/props.md | 167 +- static/auto-generated/breadcrumb/slots.md | 2 +- .../breadcrumbs/custom-props.md | 2 +- static/auto-generated/breadcrumbs/events.md | 6 +- static/auto-generated/breadcrumbs/methods.md | 2 +- static/auto-generated/breadcrumbs/parts.md | 2 +- static/auto-generated/breadcrumbs/props.md | 75 +- static/auto-generated/breadcrumbs/slots.md | 2 +- static/auto-generated/button/custom-props.md | 52 +- static/auto-generated/button/events.md | 8 +- static/auto-generated/button/methods.md | 2 +- static/auto-generated/button/parts.md | 8 +- static/auto-generated/button/props.md | 241 +- static/auto-generated/button/slots.md | 14 +- static/auto-generated/buttons/custom-props.md | 2 +- static/auto-generated/buttons/events.md | 2 +- static/auto-generated/buttons/methods.md | 2 +- static/auto-generated/buttons/parts.md | 2 +- static/auto-generated/buttons/props.md | 19 +- static/auto-generated/buttons/slots.md | 2 +- .../card-content/custom-props.md | 2 +- static/auto-generated/card-content/events.md | 2 +- static/auto-generated/card-content/methods.md | 2 +- static/auto-generated/card-content/parts.md | 2 +- static/auto-generated/card-content/props.md | 15 +- static/auto-generated/card-content/slots.md | 2 +- .../card-header/custom-props.md | 2 +- static/auto-generated/card-header/events.md | 2 +- static/auto-generated/card-header/methods.md | 2 +- static/auto-generated/card-header/parts.md | 2 +- static/auto-generated/card-header/props.md | 43 +- static/auto-generated/card-header/slots.md | 2 +- .../card-subtitle/custom-props.md | 6 +- static/auto-generated/card-subtitle/events.md | 2 +- .../auto-generated/card-subtitle/methods.md | 2 +- static/auto-generated/card-subtitle/parts.md | 2 +- static/auto-generated/card-subtitle/props.md | 29 +- static/auto-generated/card-subtitle/slots.md | 2 +- .../auto-generated/card-title/custom-props.md | 6 +- static/auto-generated/card-title/events.md | 2 +- static/auto-generated/card-title/methods.md | 2 +- static/auto-generated/card-title/parts.md | 2 +- static/auto-generated/card-title/props.md | 29 +- static/auto-generated/card-title/slots.md | 2 +- static/auto-generated/card/custom-props.md | 8 +- static/auto-generated/card/events.md | 2 +- static/auto-generated/card/methods.md | 2 +- static/auto-generated/card/parts.md | 8 +- static/auto-generated/card/props.md | 157 +- static/auto-generated/card/slots.md | 2 +- .../auto-generated/checkbox/custom-props.md | 26 +- static/auto-generated/checkbox/events.md | 10 +- static/auto-generated/checkbox/methods.md | 2 +- static/auto-generated/checkbox/parts.md | 10 +- static/auto-generated/checkbox/props.md | 105 +- static/auto-generated/checkbox/slots.md | 2 +- static/auto-generated/chip/custom-props.md | 8 +- static/auto-generated/chip/events.md | 2 +- static/auto-generated/chip/methods.md | 2 +- static/auto-generated/chip/parts.md | 2 +- static/auto-generated/chip/props.md | 57 +- static/auto-generated/chip/slots.md | 2 +- static/auto-generated/col/custom-props.md | 18 +- static/auto-generated/col/events.md | 2 +- static/auto-generated/col/methods.md | 2 +- static/auto-generated/col/parts.md | 2 +- static/auto-generated/col/props.md | 469 +- static/auto-generated/col/slots.md | 2 +- static/auto-generated/content/custom-props.md | 24 +- static/auto-generated/content/events.md | 10 +- static/auto-generated/content/methods.md | 42 +- static/auto-generated/content/parts.md | 10 +- static/auto-generated/content/props.md | 105 +- static/auto-generated/content/slots.md | 10 +- .../datetime-button/custom-props.md | 2 +- .../auto-generated/datetime-button/events.md | 2 +- .../auto-generated/datetime-button/methods.md | 2 +- .../auto-generated/datetime-button/parts.md | 8 +- .../auto-generated/datetime-button/props.md | 57 +- .../auto-generated/datetime-button/slots.md | 8 +- .../auto-generated/datetime/custom-props.md | 12 +- static/auto-generated/datetime/events.md | 12 +- static/auto-generated/datetime/methods.md | 28 +- static/auto-generated/datetime/parts.md | 2 +- static/auto-generated/datetime/props.md | 449 +- static/auto-generated/datetime/slots.md | 12 +- .../auto-generated/fab-button/custom-props.md | 52 +- static/auto-generated/fab-button/events.md | 8 +- static/auto-generated/fab-button/methods.md | 2 +- static/auto-generated/fab-button/parts.md | 10 +- static/auto-generated/fab-button/props.md | 215 +- static/auto-generated/fab-button/slots.md | 2 +- .../auto-generated/fab-list/custom-props.md | 2 +- static/auto-generated/fab-list/events.md | 2 +- static/auto-generated/fab-list/methods.md | 2 +- static/auto-generated/fab-list/parts.md | 2 +- static/auto-generated/fab-list/props.md | 29 +- static/auto-generated/fab-list/slots.md | 2 +- static/auto-generated/fab/custom-props.md | 2 +- static/auto-generated/fab/events.md | 2 +- static/auto-generated/fab/methods.md | 12 +- static/auto-generated/fab/parts.md | 2 +- static/auto-generated/fab/props.md | 57 +- static/auto-generated/fab/slots.md | 2 +- static/auto-generated/footer/custom-props.md | 2 +- static/auto-generated/footer/events.md | 2 +- static/auto-generated/footer/methods.md | 2 +- static/auto-generated/footer/parts.md | 2 +- static/auto-generated/footer/props.md | 51 +- static/auto-generated/footer/slots.md | 2 +- static/auto-generated/grid/custom-props.md | 28 +- static/auto-generated/grid/events.md | 2 +- static/auto-generated/grid/methods.md | 2 +- static/auto-generated/grid/parts.md | 2 +- static/auto-generated/grid/props.md | 15 +- static/auto-generated/grid/slots.md | 2 +- static/auto-generated/header/custom-props.md | 2 +- static/auto-generated/header/events.md | 2 +- static/auto-generated/header/methods.md | 2 +- static/auto-generated/header/parts.md | 2 +- static/auto-generated/header/props.md | 51 +- static/auto-generated/header/slots.md | 2 +- static/auto-generated/img/custom-props.md | 2 +- static/auto-generated/img/events.md | 12 +- static/auto-generated/img/methods.md | 2 +- static/auto-generated/img/parts.md | 6 +- static/auto-generated/img/props.md | 35 +- static/auto-generated/img/slots.md | 2 +- .../infinite-scroll-content/custom-props.md | 2 +- .../infinite-scroll-content/events.md | 2 +- .../infinite-scroll-content/methods.md | 2 +- .../infinite-scroll-content/parts.md | 2 +- .../infinite-scroll-content/props.md | 39 +- .../infinite-scroll-content/slots.md | 2 +- .../infinite-scroll/custom-props.md | 2 +- .../auto-generated/infinite-scroll/events.md | 6 +- .../auto-generated/infinite-scroll/methods.md | 12 +- .../auto-generated/infinite-scroll/parts.md | 2 +- .../auto-generated/infinite-scroll/props.md | 51 +- .../auto-generated/infinite-scroll/slots.md | 2 +- static/auto-generated/input/custom-props.md | 26 +- static/auto-generated/input/events.md | 14 +- static/auto-generated/input/methods.md | 19 +- static/auto-generated/input/parts.md | 2 +- static/auto-generated/input/props.md | 433 +- static/auto-generated/input/slots.md | 2 +- .../item-divider/custom-props.md | 26 +- static/auto-generated/item-divider/events.md | 2 +- static/auto-generated/item-divider/methods.md | 2 +- static/auto-generated/item-divider/parts.md | 2 +- static/auto-generated/item-divider/props.md | 49 +- static/auto-generated/item-divider/slots.md | 12 +- .../auto-generated/item-group/custom-props.md | 2 +- static/auto-generated/item-group/events.md | 2 +- static/auto-generated/item-group/methods.md | 2 +- static/auto-generated/item-group/parts.md | 2 +- static/auto-generated/item-group/props.md | 2 +- static/auto-generated/item-group/slots.md | 2 +- .../item-option/custom-props.md | 8 +- static/auto-generated/item-option/events.md | 2 +- static/auto-generated/item-option/methods.md | 2 +- static/auto-generated/item-option/parts.md | 8 +- static/auto-generated/item-option/props.md | 129 +- static/auto-generated/item-option/slots.md | 18 +- .../item-options/custom-props.md | 2 +- static/auto-generated/item-options/events.md | 6 +- static/auto-generated/item-options/methods.md | 2 +- static/auto-generated/item-options/parts.md | 2 +- static/auto-generated/item-options/props.md | 19 +- static/auto-generated/item-options/slots.md | 2 +- .../item-sliding/custom-props.md | 2 +- static/auto-generated/item-sliding/events.md | 6 +- static/auto-generated/item-sliding/methods.md | 40 +- static/auto-generated/item-sliding/parts.md | 2 +- static/auto-generated/item-sliding/props.md | 15 +- static/auto-generated/item-sliding/slots.md | 2 +- static/auto-generated/item/custom-props.md | 76 +- static/auto-generated/item/events.md | 2 +- static/auto-generated/item/methods.md | 2 +- static/auto-generated/item/parts.md | 10 +- static/auto-generated/item/props.md | 257 +- static/auto-generated/item/slots.md | 16 +- static/auto-generated/label/custom-props.md | 6 +- static/auto-generated/label/events.md | 2 +- static/auto-generated/label/methods.md | 2 +- static/auto-generated/label/parts.md | 2 +- static/auto-generated/label/props.md | 43 +- static/auto-generated/label/slots.md | 2 +- .../list-header/custom-props.md | 18 +- static/auto-generated/list-header/events.md | 2 +- static/auto-generated/list-header/methods.md | 2 +- static/auto-generated/list-header/parts.md | 2 +- static/auto-generated/list-header/props.md | 43 +- static/auto-generated/list-header/slots.md | 2 +- static/auto-generated/list/custom-props.md | 2 +- static/auto-generated/list/events.md | 2 +- static/auto-generated/list/methods.md | 12 +- static/auto-generated/list/parts.md | 2 +- static/auto-generated/list/props.md | 43 +- static/auto-generated/list/slots.md | 2 +- static/auto-generated/loading/custom-props.md | 24 +- static/auto-generated/loading/events.md | 10 +- static/auto-generated/loading/methods.md | 31 +- static/auto-generated/loading/parts.md | 2 +- static/auto-generated/loading/props.md | 187 +- static/auto-generated/loading/slots.md | 2 +- .../menu-button/custom-props.md | 32 +- static/auto-generated/menu-button/events.md | 2 +- static/auto-generated/menu-button/methods.md | 2 +- static/auto-generated/menu-button/parts.md | 8 +- static/auto-generated/menu-button/props.md | 85 +- static/auto-generated/menu-button/slots.md | 2 +- .../menu-toggle/custom-props.md | 2 +- static/auto-generated/menu-toggle/events.md | 2 +- static/auto-generated/menu-toggle/methods.md | 2 +- static/auto-generated/menu-toggle/parts.md | 2 +- static/auto-generated/menu-toggle/props.md | 39 +- static/auto-generated/menu-toggle/slots.md | 8 +- static/auto-generated/menu/custom-props.md | 18 +- static/auto-generated/menu/events.md | 12 +- static/auto-generated/menu/methods.md | 47 +- static/auto-generated/menu/parts.md | 10 +- static/auto-generated/menu/props.md | 101 +- static/auto-generated/menu/slots.md | 2 +- static/auto-generated/modal/custom-props.md | 30 +- static/auto-generated/modal/events.md | 24 +- static/auto-generated/modal/methods.md | 45 +- static/auto-generated/modal/parts.md | 12 +- static/auto-generated/modal/props.md | 285 +- static/auto-generated/modal/slots.md | 8 +- .../auto-generated/nav-link/custom-props.md | 2 +- static/auto-generated/nav-link/events.md | 2 +- static/auto-generated/nav-link/methods.md | 2 +- static/auto-generated/nav-link/parts.md | 2 +- static/auto-generated/nav-link/props.md | 61 +- static/auto-generated/nav-link/slots.md | 2 +- static/auto-generated/nav/custom-props.md | 2 +- static/auto-generated/nav/events.md | 10 +- static/auto-generated/nav/methods.md | 100 +- static/auto-generated/nav/parts.md | 2 +- static/auto-generated/nav/props.md | 73 +- static/auto-generated/nav/slots.md | 2 +- static/auto-generated/note/custom-props.md | 6 +- static/auto-generated/note/events.md | 2 +- static/auto-generated/note/methods.md | 2 +- static/auto-generated/note/parts.md | 2 +- static/auto-generated/note/props.md | 29 +- static/auto-generated/note/slots.md | 2 +- static/auto-generated/picker/custom-props.md | 32 +- static/auto-generated/picker/events.md | 12 +- static/auto-generated/picker/methods.md | 38 +- static/auto-generated/picker/parts.md | 2 +- static/auto-generated/picker/props.md | 171 +- static/auto-generated/picker/slots.md | 2 +- static/auto-generated/popover/custom-props.md | 28 +- static/auto-generated/popover/events.md | 22 +- static/auto-generated/popover/methods.md | 31 +- static/auto-generated/popover/parts.md | 12 +- static/auto-generated/popover/props.md | 323 +- static/auto-generated/popover/slots.md | 8 +- .../progress-bar/custom-props.md | 12 +- static/auto-generated/progress-bar/events.md | 2 +- static/auto-generated/progress-bar/methods.md | 2 +- static/auto-generated/progress-bar/parts.md | 12 +- static/auto-generated/progress-bar/props.md | 89 +- static/auto-generated/progress-bar/slots.md | 2 +- .../radio-group/custom-props.md | 2 +- static/auto-generated/radio-group/events.md | 6 +- static/auto-generated/radio-group/methods.md | 2 +- static/auto-generated/radio-group/parts.md | 2 +- static/auto-generated/radio-group/props.md | 43 +- static/auto-generated/radio-group/slots.md | 2 +- static/auto-generated/radio/custom-props.md | 12 +- static/auto-generated/radio/events.md | 8 +- static/auto-generated/radio/methods.md | 2 +- static/auto-generated/radio/parts.md | 10 +- static/auto-generated/radio/props.md | 71 +- static/auto-generated/radio/slots.md | 2 +- static/auto-generated/range/custom-props.md | 28 +- static/auto-generated/range/events.md | 14 +- static/auto-generated/range/methods.md | 2 +- static/auto-generated/range/parts.md | 18 +- static/auto-generated/range/props.md | 215 +- static/auto-generated/range/slots.md | 10 +- .../refresher-content/custom-props.md | 2 +- .../refresher-content/events.md | 2 +- .../refresher-content/methods.md | 2 +- .../auto-generated/refresher-content/parts.md | 2 +- .../auto-generated/refresher-content/props.md | 79 +- .../auto-generated/refresher-content/slots.md | 2 +- .../auto-generated/refresher/custom-props.md | 2 +- static/auto-generated/refresher/events.md | 12 +- static/auto-generated/refresher/methods.md | 26 +- static/auto-generated/refresher/parts.md | 2 +- static/auto-generated/refresher/props.md | 89 +- static/auto-generated/refresher/slots.md | 2 +- .../reorder-group/custom-props.md | 2 +- static/auto-generated/reorder-group/events.md | 6 +- .../auto-generated/reorder-group/methods.md | 12 +- static/auto-generated/reorder-group/parts.md | 2 +- static/auto-generated/reorder-group/props.md | 15 +- static/auto-generated/reorder-group/slots.md | 2 +- static/auto-generated/reorder/custom-props.md | 2 +- static/auto-generated/reorder/events.md | 2 +- static/auto-generated/reorder/methods.md | 2 +- static/auto-generated/reorder/parts.md | 8 +- static/auto-generated/reorder/props.md | 2 +- static/auto-generated/reorder/slots.md | 2 +- .../ripple-effect/custom-props.md | 2 +- static/auto-generated/ripple-effect/events.md | 2 +- .../auto-generated/ripple-effect/methods.md | 10 +- static/auto-generated/ripple-effect/parts.md | 2 +- static/auto-generated/ripple-effect/props.md | 19 +- static/auto-generated/ripple-effect/slots.md | 2 +- .../route-redirect/custom-props.md | 2 +- .../auto-generated/route-redirect/events.md | 8 +- .../auto-generated/route-redirect/methods.md | 2 +- static/auto-generated/route-redirect/parts.md | 2 +- static/auto-generated/route-redirect/props.md | 39 +- static/auto-generated/route-redirect/slots.md | 2 +- static/auto-generated/route/custom-props.md | 2 +- static/auto-generated/route/events.md | 6 +- static/auto-generated/route/methods.md | 2 +- static/auto-generated/route/parts.md | 2 +- static/auto-generated/route/props.md | 79 +- static/auto-generated/route/slots.md | 2 +- .../router-link/custom-props.md | 10 +- static/auto-generated/router-link/events.md | 2 +- static/auto-generated/router-link/methods.md | 2 +- static/auto-generated/router-link/parts.md | 2 +- static/auto-generated/router-link/props.md | 91 +- static/auto-generated/router-link/slots.md | 2 +- .../router-outlet/custom-props.md | 2 +- static/auto-generated/router-outlet/events.md | 2 +- .../auto-generated/router-outlet/methods.md | 2 +- static/auto-generated/router-outlet/parts.md | 2 +- static/auto-generated/router-outlet/props.md | 43 +- static/auto-generated/router-outlet/slots.md | 2 +- static/auto-generated/router/custom-props.md | 2 +- static/auto-generated/router/events.md | 8 +- static/auto-generated/router/methods.md | 21 +- static/auto-generated/router/parts.md | 2 +- static/auto-generated/router/props.md | 39 +- static/auto-generated/router/slots.md | 2 +- static/auto-generated/row/custom-props.md | 2 +- static/auto-generated/row/events.md | 2 +- static/auto-generated/row/methods.md | 2 +- static/auto-generated/row/parts.md | 2 +- static/auto-generated/row/props.md | 2 +- static/auto-generated/row/slots.md | 2 +- .../auto-generated/searchbar/custom-props.md | 28 +- static/auto-generated/searchbar/events.md | 18 +- static/auto-generated/searchbar/methods.md | 17 +- static/auto-generated/searchbar/parts.md | 2 +- static/auto-generated/searchbar/props.md | 273 +- static/auto-generated/searchbar/slots.md | 2 +- .../segment-button/custom-props.md | 62 +- .../auto-generated/segment-button/events.md | 2 +- .../auto-generated/segment-button/methods.md | 2 +- static/auto-generated/segment-button/parts.md | 10 +- static/auto-generated/segment-button/props.md | 71 +- static/auto-generated/segment-button/slots.md | 2 +- static/auto-generated/segment/custom-props.md | 6 +- static/auto-generated/segment/events.md | 8 +- static/auto-generated/segment/methods.md | 2 +- static/auto-generated/segment/parts.md | 2 +- static/auto-generated/segment/props.md | 99 +- static/auto-generated/segment/slots.md | 2 +- .../select-option/custom-props.md | 2 +- static/auto-generated/select-option/events.md | 2 +- .../auto-generated/select-option/methods.md | 2 +- static/auto-generated/select-option/parts.md | 2 +- static/auto-generated/select-option/props.md | 29 +- static/auto-generated/select-option/slots.md | 2 +- static/auto-generated/select/custom-props.md | 18 +- static/auto-generated/select/events.md | 16 +- static/auto-generated/select/methods.md | 10 +- static/auto-generated/select/parts.md | 10 +- static/auto-generated/select/props.md | 177 +- static/auto-generated/select/slots.md | 2 +- .../skeleton-text/custom-props.md | 12 +- static/auto-generated/skeleton-text/events.md | 2 +- .../auto-generated/skeleton-text/methods.md | 2 +- static/auto-generated/skeleton-text/parts.md | 2 +- static/auto-generated/skeleton-text/props.md | 15 +- static/auto-generated/skeleton-text/slots.md | 2 +- static/auto-generated/slide/custom-props.md | 2 +- static/auto-generated/slide/events.md | 2 +- static/auto-generated/slide/methods.md | 2 +- static/auto-generated/slide/parts.md | 2 +- static/auto-generated/slide/props.md | 2 +- static/auto-generated/slide/slots.md | 2 +- static/auto-generated/slides/custom-props.md | 18 +- static/auto-generated/slides/events.md | 38 +- static/auto-generated/slides/methods.md | 119 +- static/auto-generated/slides/parts.md | 2 +- static/auto-generated/slides/props.md | 59 +- static/auto-generated/slides/slots.md | 2 +- static/auto-generated/spinner/custom-props.md | 6 +- static/auto-generated/spinner/events.md | 2 +- static/auto-generated/spinner/methods.md | 2 +- static/auto-generated/spinner/parts.md | 2 +- static/auto-generated/spinner/props.md | 59 +- static/auto-generated/spinner/slots.md | 2 +- .../auto-generated/split-pane/custom-props.md | 10 +- static/auto-generated/split-pane/events.md | 6 +- static/auto-generated/split-pane/methods.md | 2 +- static/auto-generated/split-pane/parts.md | 2 +- static/auto-generated/split-pane/props.md | 49 +- static/auto-generated/split-pane/slots.md | 2 +- static/auto-generated/tab-bar/custom-props.md | 10 +- static/auto-generated/tab-bar/events.md | 2 +- static/auto-generated/tab-bar/methods.md | 2 +- static/auto-generated/tab-bar/parts.md | 2 +- static/auto-generated/tab-bar/props.md | 57 +- static/auto-generated/tab-bar/slots.md | 2 +- .../auto-generated/tab-button/custom-props.md | 28 +- static/auto-generated/tab-button/events.md | 2 +- static/auto-generated/tab-button/methods.md | 2 +- static/auto-generated/tab-button/parts.md | 8 +- static/auto-generated/tab-button/props.md | 133 +- static/auto-generated/tab-button/slots.md | 2 +- static/auto-generated/tab/custom-props.md | 2 +- static/auto-generated/tab/events.md | 2 +- static/auto-generated/tab/methods.md | 10 +- static/auto-generated/tab/parts.md | 2 +- static/auto-generated/tab/props.md | 29 +- static/auto-generated/tab/slots.md | 2 +- static/auto-generated/tabs/custom-props.md | 2 +- static/auto-generated/tabs/events.md | 10 +- static/auto-generated/tabs/methods.md | 24 +- static/auto-generated/tabs/parts.md | 2 +- static/auto-generated/tabs/props.md | 2 +- static/auto-generated/tabs/slots.md | 12 +- static/auto-generated/text/custom-props.md | 2 +- static/auto-generated/text/events.md | 2 +- static/auto-generated/text/methods.md | 2 +- static/auto-generated/text/parts.md | 2 +- static/auto-generated/text/props.md | 29 +- static/auto-generated/text/slots.md | 2 +- .../auto-generated/textarea/custom-props.md | 28 +- static/auto-generated/textarea/events.md | 14 +- static/auto-generated/textarea/methods.md | 19 +- static/auto-generated/textarea/parts.md | 2 +- static/auto-generated/textarea/props.md | 305 +- static/auto-generated/textarea/slots.md | 2 +- .../auto-generated/thumbnail/custom-props.md | 8 +- static/auto-generated/thumbnail/events.md | 2 +- static/auto-generated/thumbnail/methods.md | 2 +- static/auto-generated/thumbnail/parts.md | 2 +- static/auto-generated/thumbnail/props.md | 2 +- static/auto-generated/thumbnail/slots.md | 2 +- static/auto-generated/title/custom-props.md | 6 +- static/auto-generated/title/events.md | 2 +- static/auto-generated/title/methods.md | 2 +- static/auto-generated/title/parts.md | 2 +- static/auto-generated/title/props.md | 29 +- static/auto-generated/title/slots.md | 2 +- static/auto-generated/toast/custom-props.md | 40 +- static/auto-generated/toast/events.md | 12 +- static/auto-generated/toast/methods.md | 31 +- static/auto-generated/toast/parts.md | 16 +- static/auto-generated/toast/props.md | 229 +- static/auto-generated/toast/slots.md | 2 +- static/auto-generated/toggle/custom-props.md | 28 +- static/auto-generated/toggle/events.md | 12 +- static/auto-generated/toggle/methods.md | 2 +- static/auto-generated/toggle/parts.md | 8 +- static/auto-generated/toggle/props.md | 105 +- static/auto-generated/toggle/slots.md | 2 +- static/auto-generated/toolbar/custom-props.md | 28 +- static/auto-generated/toolbar/events.md | 2 +- static/auto-generated/toolbar/methods.md | 2 +- static/auto-generated/toolbar/parts.md | 2 +- static/auto-generated/toolbar/props.md | 29 +- static/auto-generated/toolbar/slots.md | 14 +- .../virtual-scroll/custom-props.md | 2 +- .../auto-generated/virtual-scroll/events.md | 2 +- .../auto-generated/virtual-scroll/methods.md | 28 +- static/auto-generated/virtual-scroll/parts.md | 2 +- static/auto-generated/virtual-scroll/props.md | 213 +- static/auto-generated/virtual-scroll/slots.md | 2 +- .../code/stackblitz/v6/angular/app.module.ts | 4 +- static/code/stackblitz/v6/html/index.html | 8 - .../stackblitz/v6/html/index.withContent.html | 8 - static/code/stackblitz/v6/react/app.tsx | 4 +- .../stackblitz/v6/react/app.withContent.tsx | 4 +- .../stackblitz/v6/react/package-lock.json | 648 +- static/code/stackblitz/v6/vue/main.ts | 4 +- .../code/stackblitz/v6/vue/package-lock.json | 15 +- .../code/stackblitz/v7/angular/app.module.ts | 4 +- static/code/stackblitz/v7/html/index.html | 8 - static/code/stackblitz/v7/html/index.ts | 5 +- .../stackblitz/v7/html/index.withContent.html | 8 - static/code/stackblitz/v7/react/app.tsx | 4 +- .../stackblitz/v7/react/app.withContent.tsx | 4 +- .../stackblitz/v7/react/package-lock.json | 88 +- static/code/stackblitz/v7/react/package.json | 4 +- static/code/stackblitz/v7/vue/main.ts | 4 +- .../code/stackblitz/v7/vue/package-lock.json | 100 +- static/code/stackblitz/v7/vue/package.json | 4 +- static/demos/api/alert/index.html | 2 +- static/demos/api/card/index.html | 4 +- static/demos/api/datetime/index.html | 2 +- static/demos/api/menu/index.html | 4 +- static/demos/color-generator/index.html | 51 +- .../accessibility/animations/demo.html | 84 +- .../accessibility/animations/javascript.md | 46 +- static/usage/v6/accordion/basic/angular.md | 12 +- static/usage/v6/accordion/basic/demo.html | 84 +- static/usage/v6/accordion/basic/javascript.md | 12 +- static/usage/v6/accordion/basic/react.md | 7 +- static/usage/v6/accordion/basic/vue.md | 25 +- .../angular/example_component_css.md | 10 +- .../angular/example_component_html.md | 12 +- .../advanced-expansion-styles/demo.html | 138 +- .../advanced-expansion-styles/javascript.md | 20 +- .../react/main_css.md | 10 +- .../advanced-expansion-styles/vue.md | 39 +- .../customization/expansion-styles/angular.md | 12 +- .../customization/expansion-styles/demo.html | 84 +- .../expansion-styles/javascript.md | 12 +- .../customization/expansion-styles/react.md | 7 +- .../customization/expansion-styles/vue.md | 25 +- .../accordion/customization/icons/demo.html | 84 +- .../customization/icons/javascript.md | 12 +- .../v6/accordion/customization/icons/react.md | 7 +- .../v6/accordion/customization/icons/vue.md | 29 +- .../theming/angular/example_component_html.md | 12 +- .../theming/angular/global_css.md | 10 +- .../accordion/customization/theming/demo.html | 126 +- .../customization/theming/javascript.md | 24 +- .../customization/theming/react/main_css.md | 10 +- .../customization/theming/react/main_tsx.md | 7 +- .../v6/accordion/customization/theming/vue.md | 41 +- .../v6/accordion/disable-group/demo.html | 84 +- .../v6/accordion/disable/group/demo.html | 84 +- .../v6/accordion/disable/individual/demo.html | 84 +- .../v6/accordion/listen-changes/demo.html | 119 +- static/usage/v6/accordion/multiple/demo.html | 92 +- .../v6/accordion/readonly/group/angular.md | 12 +- .../v6/accordion/readonly/group/demo.html | 84 +- .../v6/accordion/readonly/group/javascript.md | 12 +- .../v6/accordion/readonly/group/react.md | 7 +- .../usage/v6/accordion/readonly/group/vue.md | 25 +- .../accordion/readonly/individual/angular.md | 12 +- .../accordion/readonly/individual/demo.html | 84 +- .../readonly/individual/javascript.md | 12 +- .../v6/accordion/readonly/individual/react.md | 7 +- .../v6/accordion/readonly/individual/vue.md | 25 +- static/usage/v6/accordion/toggle/demo.html | 118 +- static/usage/v6/action-sheet/basic/demo.html | 124 +- .../theming/css-properties/demo.html | 124 +- .../v6/action-sheet/theming/styling/demo.html | 144 +- .../buttons/angular/example_component_html.md | 2 +- static/usage/v6/alert/buttons/demo.html | 112 +- static/usage/v6/alert/buttons/javascript.md | 10 +- .../alert/customization/angular/global_css.md | 4 +- static/usage/v6/alert/customization/demo.html | 132 +- .../v6/alert/customization/javascript.md | 8 +- .../v6/alert/customization/react/main_css.md | 4 +- .../radios/angular/example_component_html.md | 2 +- static/usage/v6/alert/inputs/radios/demo.html | 92 +- .../v6/alert/inputs/radios/javascript.md | 8 +- .../angular/example_component_html.md | 2 +- .../v6/alert/inputs/text-inputs/demo.html | 100 +- .../v6/alert/inputs/text-inputs/javascript.md | 12 +- .../angular/example_component_html.md | 2 +- .../v6/alert/presenting/controller/demo.html | 62 +- static/usage/v6/avatar/basic/demo.html | 45 +- static/usage/v6/avatar/chip/demo.html | 51 +- static/usage/v6/avatar/chip/vue.md | 2 +- static/usage/v6/avatar/item/demo.html | 51 +- static/usage/v6/avatar/item/vue.md | 2 +- .../avatar/theming/css-properties/demo.html | 54 +- .../theming/css-properties/react/main_tsx.md | 1 - .../v6/avatar/theming/css-properties/vue.md | 2 +- .../basic/angular/page_two_component_ts.md | 4 +- static/usage/v6/back-button/basic/demo.html | 55 +- .../v6/back-button/basic/vue/page_two_vue.md | 2 +- .../custom/angular/page_two_component_ts.md | 4 +- static/usage/v6/back-button/custom/demo.html | 55 +- .../v6/back-button/custom/vue/page_two_vue.md | 4 +- static/usage/v6/backdrop/basic/demo.html | 61 +- static/usage/v6/backdrop/styling/demo.html | 106 +- static/usage/v6/badge/basic/demo.html | 68 +- .../usage/v6/badge/theming/colors/demo.html | 100 +- .../angular/example_component_css.md | 2 +- .../v6/badge/theming/css-properties/demo.html | 72 +- .../theming/css-properties/react/main_css.md | 2 +- static/usage/v6/breadcrumbs/basic/demo.html | 50 +- .../angular/example_component_html.md | 2 +- .../expand-on-click/demo.html | 66 +- .../collapsing-items/expand-on-click/vue.md | 8 +- .../items-before-after/demo.html | 120 +- .../collapsing-items/max-items/demo.html | 54 +- .../angular/example_component_html.md | 2 +- .../popover-on-click/demo.html | 96 +- .../popover-on-click/javascript.md | 6 +- .../popover-on-click/react.md | 5 +- .../collapsing-items/popover-on-click/vue.md | 40 +- .../icons/custom-separators/demo.html | 74 +- .../icons/custom-separators/vue.md | 2 +- .../icons/icons-on-items/demo.html | 124 +- .../v6/breadcrumbs/theming/colors/demo.html | 50 +- .../angular/example_component_css.md | 2 +- .../theming/css-properties/demo.html | 64 +- .../theming/css-properties/react/main_css.md | 2 +- static/usage/v6/button/basic/angular.md | 3 +- static/usage/v6/button/basic/demo.html | 43 +- static/usage/v6/button/basic/javascript.md | 3 +- static/usage/v6/button/expand/angular.md | 3 +- static/usage/v6/button/expand/demo.html | 54 +- static/usage/v6/button/expand/javascript.md | 3 +- static/usage/v6/button/fill/demo.html | 47 +- static/usage/v6/button/icons/demo.html | 61 +- static/usage/v6/button/icons/vue.md | 4 +- static/usage/v6/button/shape/angular.md | 3 +- static/usage/v6/button/shape/demo.html | 43 +- static/usage/v6/button/shape/javascript.md | 3 +- static/usage/v6/button/size/demo.html | 45 +- .../usage/v6/button/theming/colors/demo.html | 72 +- .../button/theming/css-properties/demo.html | 88 +- .../theming/css-properties/react/main_css.md | 1 - .../theming/css-properties/react/main_tsx.md | 4 +- static/usage/v6/buttons/basic/demo.html | 50 +- static/usage/v6/buttons/placement/demo.html | 86 +- static/usage/v6/buttons/types/angular.md | 8 +- static/usage/v6/buttons/types/demo.html | 188 +- static/usage/v6/buttons/types/javascript.md | 8 +- static/usage/v6/buttons/types/react.md | 9 +- static/usage/v6/buttons/types/vue.md | 10 +- static/usage/v6/card/basic/demo.html | 78 +- static/usage/v6/card/basic/react/main_tsx.md | 4 +- static/usage/v6/card/buttons/demo.html | 82 +- .../usage/v6/card/buttons/react/main_tsx.md | 4 +- static/usage/v6/card/list/demo.html | 140 +- static/usage/v6/card/list/react/main_tsx.md | 12 +- static/usage/v6/card/media/demo.html | 80 +- static/usage/v6/card/media/react/main_tsx.md | 4 +- .../colors/angular/example_component_html.md | 36 +- static/usage/v6/card/theming/colors/demo.html | 250 +- .../v6/card/theming/colors/javascript.md | 36 +- .../v6/card/theming/colors/react/main_tsx.md | 36 +- static/usage/v6/card/theming/colors/vue.md | 36 +- .../v6/card/theming/css-properties/demo.html | 112 +- .../theming/css-properties/react/main_tsx.md | 4 +- static/usage/v6/checkbox/basic/demo.html | 46 +- static/usage/v6/checkbox/basic/react.md | 8 +- static/usage/v6/checkbox/basic/vue.md | 10 +- .../usage/v6/checkbox/indeterminate/demo.html | 46 +- .../usage/v6/checkbox/indeterminate/react.md | 8 +- static/usage/v6/checkbox/indeterminate/vue.md | 10 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../checkbox/theming/css-properties/demo.html | 66 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 8 +- .../v6/checkbox/theming/css-properties/vue.md | 12 +- static/usage/v6/chip/basic/demo.html | 45 +- static/usage/v6/chip/slots/demo.html | 63 +- static/usage/v6/chip/theming/colors/demo.html | 78 +- .../v6/chip/theming/css-properties/demo.html | 53 +- static/usage/v6/content/basic/demo.html | 48 +- static/usage/v6/content/fixed/angular.md | 50 +- .../fixed/angular/example_component_css.md | 2 +- .../fixed/angular/example_component_html.md | 50 +- static/usage/v6/content/fixed/demo.html | 132 +- static/usage/v6/content/fixed/javascript.md | 52 +- static/usage/v6/content/fixed/react.md | 50 +- .../usage/v6/content/fixed/react/main_css.md | 2 +- .../usage/v6/content/fixed/react/main_tsx.md | 50 +- static/usage/v6/content/fixed/vue.md | 52 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 58 +- static/usage/v6/content/fullscreen/demo.html | 150 +- .../usage/v6/content/fullscreen/javascript.md | 60 +- .../v6/content/fullscreen/react/main_css.md | 2 +- .../v6/content/fullscreen/react/main_tsx.md | 58 +- static/usage/v6/content/fullscreen/vue.md | 60 +- .../usage/v6/content/header-footer/angular.md | 8 +- .../usage/v6/content/header-footer/demo.html | 72 +- .../v6/content/header-footer/javascript.md | 8 +- .../usage/v6/content/header-footer/react.md | 8 +- static/usage/v6/content/header-footer/vue.md | 8 +- .../angular/example_component_html.md | 53 +- .../usage/v6/content/scroll-events/demo.html | 134 +- .../v6/content/scroll-events/javascript.md | 50 +- .../usage/v6/content/scroll-events/react.md | 53 +- static/usage/v6/content/scroll-events/vue.md | 57 +- .../angular/example_component_html.md | 50 +- .../usage/v6/content/scroll-methods/demo.html | 146 +- .../v6/content/scroll-methods/javascript.md | 50 +- .../usage/v6/content/scroll-methods/react.md | 58 +- static/usage/v6/content/scroll-methods/vue.md | 52 +- .../usage/v6/content/theming/colors/demo.html | 126 +- .../content/theming/css-properties/demo.html | 60 +- .../theming/css-shadow-parts/demo.html | 64 +- .../usage/v6/datetime-button/basic/demo.html | 56 +- .../usage/v6/datetime-button/basic/react.md | 2 +- static/usage/v6/datetime-button/basic/vue.md | 2 +- static/usage/v6/datetime/basic/demo.html | 56 +- .../customizing-button-texts/angular.md | 7 +- .../customizing-button-texts/demo.html | 52 +- .../customizing-button-texts/javascript.md | 6 +- .../buttons/customizing-button-texts/react.md | 9 +- .../buttons/customizing-button-texts/vue.md | 8 +- .../buttons/customizing-buttons/demo.html | 70 +- .../buttons/customizing-buttons/react.md | 18 +- .../buttons/customizing-buttons/vue.md | 4 +- .../showing-confirmation-buttons/demo.html | 52 +- .../showing-confirmation-buttons/react.md | 4 +- .../date-constraints/advanced/demo.html | 74 +- .../date-constraints/advanced/javascript.md | 2 +- .../date-constraints/advanced/react.md | 8 +- .../datetime/date-constraints/advanced/vue.md | 10 +- .../date-constraints/max-min/angular.md | 6 +- .../date-constraints/max-min/demo.html | 50 +- .../date-constraints/max-min/javascript.md | 6 +- .../date-constraints/max-min/react.md | 8 +- .../datetime/date-constraints/max-min/vue.md | 6 +- .../date-constraints/values/angular.md | 5 +- .../date-constraints/values/demo.html | 50 +- .../date-constraints/values/javascript.md | 5 +- .../datetime/date-constraints/values/react.md | 7 +- .../datetime/date-constraints/values/vue.md | 5 +- .../array/angular/example_component_html.md | 6 +- .../array/angular/example_component_ts.md | 4 +- .../datetime/highlightedDates/array/demo.html | 106 +- .../highlightedDates/array/javascript.md | 4 +- .../datetime/highlightedDates/array/react.md | 4 +- .../v6/datetime/highlightedDates/array/vue.md | 16 +- .../callback/angular/example_component_ts.md | 4 +- .../highlightedDates/callback/demo.html | 96 +- .../highlightedDates/callback/javascript.md | 4 +- .../highlightedDates/callback/react.md | 4 +- .../datetime/highlightedDates/callback/vue.md | 8 +- .../localization/custom-locale/demo.html | 50 +- .../localization/custom-locale/react.md | 4 +- .../localization/first-day-of-week/demo.html | 50 +- .../localization/first-day-of-week/react.md | 4 +- .../localization/hour-cycle/demo.html | 50 +- .../datetime/localization/hour-cycle/react.md | 4 +- .../locale-extension-tags/demo.html | 50 +- .../locale-extension-tags/react.md | 4 +- .../localization/time-label/demo.html | 54 +- static/usage/v6/datetime/multiple/angular.md | 6 +- static/usage/v6/datetime/multiple/demo.html | 58 +- static/usage/v6/datetime/multiple/react.md | 8 +- static/usage/v6/datetime/multiple/vue.md | 6 +- .../v6/datetime/presentation/date/demo.html | 50 +- .../v6/datetime/presentation/date/react.md | 4 +- .../presentation/month-and-year/demo.html | 50 +- .../presentation/month-and-year/react.md | 4 +- .../v6/datetime/presentation/time/demo.html | 50 +- .../v6/datetime/presentation/time/react.md | 4 +- .../v6/datetime/presentation/wheel/demo.html | 50 +- .../v6/datetime/presentation/wheel/react.md | 4 +- static/usage/v6/datetime/theming/demo.html | 136 +- .../usage/v6/datetime/theming/javascript.md | 18 +- .../v6/datetime/theming/react/main_css.md | 12 +- static/usage/v6/datetime/theming/vue.md | 18 +- .../title/customizing-title/demo.html | 54 +- .../title/showing-default-title/demo.html | 50 +- .../title/showing-default-title/react.md | 4 +- static/usage/v6/fab/basic/demo.html | 49 +- static/usage/v6/fab/basic/vue.md | 4 +- static/usage/v6/fab/button-sizing/demo.html | 69 +- static/usage/v6/fab/button-sizing/vue.md | 4 +- static/usage/v6/fab/list-side/demo.html | 97 +- static/usage/v6/fab/list-side/vue.md | 4 +- static/usage/v6/fab/positioning/angular.md | 2 +- static/usage/v6/fab/positioning/demo.html | 129 +- static/usage/v6/fab/positioning/javascript.md | 2 +- static/usage/v6/fab/positioning/react.md | 11 +- static/usage/v6/fab/positioning/vue.md | 15 +- static/usage/v6/fab/theming/colors/demo.html | 99 +- static/usage/v6/fab/theming/colors/vue.md | 4 +- .../angular/example_component_css.md | 4 +- .../theming/css-custom-properties/demo.html | 86 +- .../css-custom-properties/javascript.md | 2 +- .../css-custom-properties/react/main_css.md | 4 +- .../fab/theming/css-custom-properties/vue.md | 6 +- .../angular/example_component_css.md | 6 +- .../v6/fab/theming/css-shadow-parts/demo.html | 94 +- .../theming/css-shadow-parts/javascript.md | 4 +- .../css-shadow-parts/react/main_css.md | 6 +- .../v6/fab/theming/css-shadow-parts/vue.md | 8 +- static/usage/v6/footer/basic/demo.html | 47 +- .../angular/example_component_html.md | 57 +- .../v6/footer/custom-scroll-target/demo.html | 156 +- .../footer/custom-scroll-target/javascript.md | 57 +- .../custom-scroll-target/react/main_tsx.md | 59 +- .../v6/footer/custom-scroll-target/vue.md | 57 +- static/usage/v6/footer/fade/angular.md | 57 +- static/usage/v6/footer/fade/demo.html | 131 +- static/usage/v6/footer/fade/javascript.md | 57 +- static/usage/v6/footer/fade/react.md | 57 +- static/usage/v6/footer/fade/vue.md | 57 +- static/usage/v6/footer/no-border/demo.html | 47 +- static/usage/v6/footer/translucent/angular.md | 57 +- static/usage/v6/footer/translucent/demo.html | 131 +- .../usage/v6/footer/translucent/javascript.md | 57 +- static/usage/v6/footer/translucent/react.md | 57 +- static/usage/v6/footer/translucent/vue.md | 57 +- static/usage/v6/grid/basic/demo.html | 136 +- .../grid/customizing/column-number/demo.html | 90 +- .../column-number/react/main_tsx.md | 4 +- .../v6/grid/customizing/padding/demo.html | 124 +- .../usage/v6/grid/customizing/width/demo.html | 106 +- static/usage/v6/grid/fixed/demo.html | 82 +- .../angular/example_component_html.md | 40 +- .../v6/grid/horizontal-alignment/demo.html | 159 +- .../grid/horizontal-alignment/javascript.md | 40 +- .../horizontal-alignment/react/main_tsx.md | 40 +- .../usage/v6/grid/horizontal-alignment/vue.md | 40 +- .../usage/v6/grid/offset-responsive/demo.html | 122 +- .../grid/offset-responsive/react/main_tsx.md | 8 +- static/usage/v6/grid/offset/demo.html | 120 +- static/usage/v6/grid/offset/react/main_tsx.md | 16 +- .../v6/grid/push-pull-responsive/demo.html | 124 +- .../push-pull-responsive/react/main_tsx.md | 24 +- .../angular/example_component_html.md | 5 +- static/usage/v6/grid/push-pull/demo.html | 134 +- static/usage/v6/grid/push-pull/javascript.md | 5 +- .../usage/v6/grid/push-pull/react/main_tsx.md | 23 +- static/usage/v6/grid/push-pull/vue.md | 15 +- static/usage/v6/grid/size-auto/demo.html | 136 +- .../usage/v6/grid/size-auto/react/main_tsx.md | 14 +- .../usage/v6/grid/size-responsive/demo.html | 126 +- .../v6/grid/size-responsive/react/main_tsx.md | 40 +- static/usage/v6/grid/size/demo.html | 122 +- static/usage/v6/grid/size/react/main_tsx.md | 12 +- .../angular/example_component_html.md | 36 +- .../v6/grid/vertical-alignment/demo.html | 171 +- .../v6/grid/vertical-alignment/javascript.md | 36 +- .../grid/vertical-alignment/react/main_tsx.md | 36 +- .../usage/v6/grid/vertical-alignment/vue.md | 36 +- static/usage/v6/header/basic/demo.html | 47 +- static/usage/v6/header/condense/angular.md | 57 +- static/usage/v6/header/condense/demo.html | 141 +- static/usage/v6/header/condense/javascript.md | 57 +- static/usage/v6/header/condense/react.md | 59 +- static/usage/v6/header/condense/vue.md | 57 +- .../angular/example_component_html.md | 57 +- .../v6/header/custom-scroll-target/demo.html | 156 +- .../custom-scroll-target/react/main_tsx.md | 59 +- .../v6/header/custom-scroll-target/vue.md | 57 +- static/usage/v6/header/fade/angular.md | 57 +- static/usage/v6/header/fade/demo.html | 131 +- static/usage/v6/header/fade/javascript.md | 57 +- static/usage/v6/header/fade/react.md | 57 +- static/usage/v6/header/fade/vue.md | 57 +- static/usage/v6/header/no-border/demo.html | 47 +- static/usage/v6/header/translucent/angular.md | 57 +- static/usage/v6/header/translucent/demo.html | 131 +- .../usage/v6/header/translucent/javascript.md | 57 +- static/usage/v6/header/translucent/react.md | 57 +- static/usage/v6/header/translucent/vue.md | 57 +- static/usage/v6/icon/basic/demo.html | 47 +- static/usage/v6/icon/basic/index.md | 7 +- static/usage/v6/img/basic/angular.md | 5 +- static/usage/v6/img/basic/demo.html | 52 +- static/usage/v6/img/basic/javascript.md | 5 +- static/usage/v6/img/basic/react.md | 5 +- static/usage/v6/img/basic/vue.md | 5 +- .../usage/v6/infinite-scroll/basic/demo.html | 115 +- static/usage/v6/infinite-scroll/basic/vue.md | 4 +- .../custom-infinite-scroll-content/demo.html | 175 +- .../custom-infinite-scroll-content/vue.md | 2 +- .../infinite-scroll-content/demo.html | 101 +- .../infinite-scroll-content/vue.md | 2 +- static/usage/v6/input/basic/demo.html | 104 +- static/usage/v6/input/clear/demo.html | 82 +- static/usage/v6/input/clear/vue.md | 5 +- static/usage/v6/input/fill/demo.html | 74 +- .../angular/example_component_html.md | 6 +- .../filtering/angular/example_component_ts.md | 10 +- static/usage/v6/input/filtering/demo.html | 64 +- static/usage/v6/input/filtering/index.md | 24 +- static/usage/v6/input/filtering/javascript.md | 4 +- static/usage/v6/input/filtering/react.md | 22 +- static/usage/v6/input/filtering/vue.md | 20 +- static/usage/v6/input/labels/demo.html | 84 +- .../usage/v6/input/theming/colors/demo.html | 76 +- .../angular/example_component_css.md | 2 +- .../v6/input/theming/css-properties/demo.html | 72 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 4 +- .../v6/input/theming/css-properties/vue.md | 2 +- static/usage/v6/input/types/demo.html | 104 +- static/usage/v6/item-divider/basic/angular.md | 8 +- static/usage/v6/item-divider/basic/demo.html | 112 +- .../usage/v6/item-divider/basic/javascript.md | 8 +- static/usage/v6/item-divider/basic/react.md | 8 +- static/usage/v6/item-divider/basic/vue.md | 8 +- .../v6/item-divider/theming/colors/demo.html | 108 +- .../angular/example_component_html.md | 4 +- .../theming/css-properties/demo.html | 66 +- .../theming/css-properties/javascript.md | 4 +- .../theming/css-properties/react/main_tsx.md | 5 +- .../theming/css-properties/vue.md | 6 +- static/usage/v6/item-group/basic/demo.html | 104 +- .../v6/item-group/sliding-items/angular.md | 56 +- .../v6/item-group/sliding-items/demo.html | 192 +- .../v6/item-group/sliding-items/javascript.md | 56 +- .../v6/item-group/sliding-items/react.md | 66 +- .../usage/v6/item-group/sliding-items/vue.md | 66 +- static/usage/v6/item-sliding/basic/demo.html | 110 +- .../v6/item-sliding/expandable/demo.html | 76 +- .../usage/v6/item-sliding/expandable/react.md | 8 +- static/usage/v6/item-sliding/icons/angular.md | 16 +- static/usage/v6/item-sliding/icons/demo.html | 298 +- .../usage/v6/item-sliding/icons/javascript.md | 16 +- static/usage/v6/item-sliding/icons/react.md | 16 +- static/usage/v6/item-sliding/icons/vue.md | 20 +- static/usage/v6/item/basic/angular.md | 10 +- static/usage/v6/item/basic/demo.html | 116 +- static/usage/v6/item/basic/javascript.md | 10 +- static/usage/v6/item/basic/react.md | 6 +- static/usage/v6/item/basic/vue.md | 8 +- static/usage/v6/item/buttons/angular.md | 20 +- static/usage/v6/item/buttons/demo.html | 122 +- static/usage/v6/item/buttons/javascript.md | 20 +- static/usage/v6/item/buttons/react.md | 8 +- static/usage/v6/item/buttons/vue.md | 24 +- static/usage/v6/item/clickable/demo.html | 72 +- static/usage/v6/item/counter/demo.html | 78 +- static/usage/v6/item/counter/react.md | 5 +- static/usage/v6/item/counter/vue.md | 4 +- static/usage/v6/item/detail-arrows/demo.html | 122 +- static/usage/v6/item/detail-arrows/vue.md | 1 + static/usage/v6/item/helper-error/demo.html | 108 +- .../usage/v6/item/helper-error/javascript.md | 10 +- static/usage/v6/item/helper-error/react.md | 5 +- static/usage/v6/item/helper-error/vue.md | 8 +- static/usage/v6/item/icons/angular.md | 16 +- static/usage/v6/item/icons/demo.html | 88 +- static/usage/v6/item/icons/javascript.md | 16 +- static/usage/v6/item/icons/react.md | 16 +- static/usage/v6/item/icons/vue.md | 20 +- static/usage/v6/item/inputs/demo.html | 144 +- static/usage/v6/item/inputs/react.md | 11 +- static/usage/v6/item/inputs/vue.md | 11 +- static/usage/v6/item/lines/angular.md | 4 +- static/usage/v6/item/lines/demo.html | 114 +- static/usage/v6/item/lines/javascript.md | 4 +- static/usage/v6/item/lines/react.md | 4 +- static/usage/v6/item/lines/vue.md | 6 +- static/usage/v6/item/media/angular.md | 8 +- static/usage/v6/item/media/demo.html | 76 +- static/usage/v6/item/media/javascript.md | 8 +- static/usage/v6/item/media/react.md | 8 +- static/usage/v6/item/media/vue.md | 8 +- static/usage/v6/item/theming/colors/demo.html | 108 +- .../v6/item/theming/css-properties/demo.html | 108 +- .../item/theming/css-shadow-parts/demo.html | 108 +- .../v6/item/theming/input-highlight/demo.html | 84 +- static/usage/v6/label/basic/demo.html | 40 +- static/usage/v6/label/input/demo.html | 111 +- static/usage/v6/label/item/angular.md | 10 +- static/usage/v6/label/item/demo.html | 93 +- static/usage/v6/label/item/javascript.md | 10 +- static/usage/v6/label/item/react.md | 6 +- static/usage/v6/label/item/vue.md | 8 +- .../usage/v6/label/theming/colors/demo.html | 68 +- static/usage/v6/list-header/basic/demo.html | 88 +- static/usage/v6/list-header/buttons/demo.html | 90 +- static/usage/v6/list-header/lines/demo.html | 114 +- .../v6/list-header/theming/colors/demo.html | 108 +- .../theming/css-properties/demo.html | 62 +- static/usage/v6/list/basic/demo.html | 82 +- static/usage/v6/list/inset/demo.html | 90 +- static/usage/v6/list/lines/demo.html | 118 +- static/usage/v6/loading/controller/demo.html | 68 +- .../usage/v6/loading/controller/javascript.md | 16 +- static/usage/v6/loading/controller/react.md | 15 +- static/usage/v6/loading/controller/vue.md | 12 +- static/usage/v6/loading/spinners/demo.html | 70 +- .../usage/v6/loading/spinners/javascript.md | 18 +- static/usage/v6/loading/spinners/react.md | 17 +- static/usage/v6/loading/spinners/vue.md | 12 +- .../v6/loading/theming/angular/global_css.md | 2 +- static/usage/v6/loading/theming/demo.html | 84 +- static/usage/v6/loading/theming/javascript.md | 28 +- static/usage/v6/loading/theming/react.md | 17 +- .../v6/loading/theming/react/main_css.md | 2 +- .../v6/loading/theming/react/main_tsx.md | 17 +- static/usage/v6/loading/theming/vue.md | 12 +- static/usage/v6/menu/basic/angular.md | 4 +- static/usage/v6/menu/basic/demo.html | 70 +- static/usage/v6/menu/basic/javascript.md | 4 +- static/usage/v6/menu/basic/react.md | 15 +- static/usage/v6/menu/basic/vue.md | 17 +- .../theming/angular/example_component_css.md | 2 +- .../theming/angular/example_component_html.md | 4 +- static/usage/v6/menu/theming/demo.html | 88 +- static/usage/v6/menu/theming/javascript.md | 4 +- .../usage/v6/menu/theming/react/main_css.md | 2 +- .../usage/v6/menu/theming/react/main_tsx.md | 15 +- static/usage/v6/menu/theming/vue.md | 17 +- static/usage/v6/menu/toggle/demo.html | 78 +- static/usage/v6/menu/toggle/react.md | 13 +- static/usage/v6/menu/toggle/vue.md | 13 +- .../type/angular/example_component_html.md | 5 +- static/usage/v6/menu/type/demo.html | 135 +- static/usage/v6/menu/type/javascript.md | 3 +- static/usage/v6/menu/type/react.md | 6 +- static/usage/v6/menu/type/vue.md | 13 +- .../v6/modal/can-dismiss/boolean/demo.html | 124 +- .../v6/modal/can-dismiss/function/demo.html | 126 +- .../prevent-swipe-to-close/demo.html | 108 +- static/usage/v6/modal/card/basic/demo.html | 164 +- .../angular/modal-example_component_html.md | 2 +- static/usage/v6/modal/controller/demo.html | 100 +- .../usage/v6/modal/controller/javascript.md | 2 +- static/usage/v6/modal/controller/react.md | 4 +- .../v6/modal/controller/vue/modal_vue.md | 2 +- .../usage/v6/modal/custom-dialogs/demo.html | 144 +- .../v6/modal/custom-dialogs/react/main_tsx.md | 2 +- static/usage/v6/modal/custom-dialogs/vue.md | 18 +- static/usage/v6/modal/inline/basic/demo.html | 116 +- .../usage/v6/modal/inline/is-open/demo.html | 84 +- .../v6/modal/performance/mount/angular.md | 4 +- .../v6/modal/performance/mount/demo.html | 94 +- .../usage/v6/modal/performance/mount/react.md | 15 +- .../usage/v6/modal/performance/mount/vue.md | 14 +- .../modal/sheet/background-content/demo.html | 189 +- static/usage/v6/modal/sheet/basic/demo.html | 148 +- .../v6/modal/sheet/handle-behavior/demo.html | 68 +- .../v6/modal/styling/animations/demo.html | 207 +- .../usage/v6/modal/styling/theming/demo.html | 184 +- .../usage/v6/nav/modal-navigation/demo.html | 156 +- static/usage/v6/nav/nav-link/demo.html | 67 +- static/usage/v6/note/basic/demo.html | 41 +- static/usage/v6/note/item/demo.html | 64 +- static/usage/v6/note/theming/colors/demo.html | 84 +- .../v6/note/theming/css-properties/demo.html | 50 +- .../usage/v6/picker/multiple-column/demo.html | 178 +- .../usage/v6/picker/single-column/demo.html | 125 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../customization/positioning/demo.html | 98 +- .../positioning/react/main_css.md | 2 +- .../v6/popover/customization/sizing/demo.html | 54 +- .../styling/angular/global_css.md | 2 +- .../popover/customization/styling/demo.html | 76 +- .../customization/styling/react/main_css.md | 2 +- static/usage/v6/popover/nested/demo.html | 72 +- .../v6/popover/performance/mount/demo.html | 46 +- .../popover/performance/mount/javascript.md | 2 +- .../angular/example_component_html.md | 2 +- .../angular/popover_component_html.md | 2 +- .../popover/presenting/controller/demo.html | 106 +- .../presenting/controller/javascript.md | 2 +- .../presenting/controller/vue/popover_vue.md | 14 +- .../angular/example_component_html.md | 2 +- .../presenting/inline-isopen/demo.html | 64 +- .../presenting/inline-isopen/javascript.md | 4 +- .../presenting/inline-trigger/demo.html | 62 +- .../buffer/angular/example_component_ts.md | 2 +- static/usage/v6/progress-bar/buffer/demo.html | 87 +- static/usage/v6/progress-bar/buffer/react.md | 4 +- static/usage/v6/progress-bar/buffer/vue.md | 4 +- .../angular/example_component_ts.md | 2 +- .../v6/progress-bar/determinate/demo.html | 69 +- .../v6/progress-bar/determinate/react.md | 4 +- .../usage/v6/progress-bar/determinate/vue.md | 4 +- .../v6/progress-bar/indeterminate/demo.html | 41 +- .../v6/progress-bar/indeterminate/react.md | 4 +- .../v6/progress-bar/theming/colors/demo.html | 68 +- .../angular/example_component_html.md | 3 +- .../theming/css-properties/demo.html | 62 +- .../theming/css-properties/react/main_tsx.md | 3 +- .../theming/css-properties/vue.md | 2 +- .../angular/example_component_html.md | 3 +- .../theming/css-shadow-parts/demo.html | 72 +- .../css-shadow-parts/react/main_tsx.md | 3 +- .../theming/css-shadow-parts/vue.md | 2 +- static/usage/v6/radio/basic/demo.html | 88 +- .../usage/v6/radio/empty-selection/demo.html | 88 +- .../usage/v6/radio/theming/colors/demo.html | 96 +- .../v6/radio/theming/css-properties/demo.html | 92 +- .../radio/theming/css-shadow-parts/demo.html | 118 +- static/usage/v6/range/basic/demo.html | 50 +- static/usage/v6/range/dual-knobs/demo.html | 64 +- .../usage/v6/range/ion-change-event/demo.html | 69 +- .../v6/range/ion-knob-move-event/demo.html | 85 +- static/usage/v6/range/pins/demo.html | 62 +- static/usage/v6/range/slots/demo.html | 56 +- .../usage/v6/range/snapping-ticks/demo.html | 50 +- .../v6/range/theming/css-properties/demo.html | 66 +- .../range/theming/css-shadow-parts/demo.html | 112 +- .../advanced/angular/example_component_ts.md | 20 +- static/usage/v6/refresher/advanced/demo.html | 152 +- .../usage/v6/refresher/advanced/javascript.md | 16 +- .../v6/refresher/advanced/react/main_tsx.md | 40 +- static/usage/v6/refresher/advanced/vue.md | 44 +- .../basic/angular/example_component_ts.md | 2 +- static/usage/v6/refresher/basic/demo.html | 70 +- static/usage/v6/refresher/basic/react.md | 11 +- .../angular/example_component_html.md | 3 +- .../angular/example_component_ts.md | 2 +- .../v6/refresher/custom-content/demo.html | 78 +- .../v6/refresher/custom-content/javascript.md | 3 +- .../v6/refresher/custom-content/react.md | 15 +- .../usage/v6/refresher/custom-content/vue.md | 3 +- .../angular/example_component_ts.md | 2 +- .../refresher/custom-scroll-target/demo.html | 106 +- .../custom-scroll-target/react/main_tsx.md | 11 +- .../angular/example_component_ts.md | 2 +- .../v6/refresher/pull-properties/demo.html | 70 +- .../v6/refresher/pull-properties/react.md | 11 +- .../basic/angular/example_component_html.md | 20 +- .../basic/angular/example_component_ts.md | 2 +- static/usage/v6/reorder/basic/demo.html | 132 +- static/usage/v6/reorder/basic/javascript.md | 22 +- static/usage/v6/reorder/basic/react.md | 20 +- static/usage/v6/reorder/basic/vue.md | 26 +- .../angular/example_component_html.md | 20 +- .../angular/example_component_ts.md | 2 +- static/usage/v6/reorder/custom-icon/demo.html | 152 +- .../v6/reorder/custom-icon/javascript.md | 22 +- static/usage/v6/reorder/custom-icon/react.md | 20 +- static/usage/v6/reorder/custom-icon/vue.md | 26 +- .../angular/example_component_html.md | 20 +- .../v6/reorder/custom-scroll-target/demo.html | 150 +- .../custom-scroll-target/javascript.md | 22 +- .../custom-scroll-target/react/main_tsx.md | 30 +- .../v6/reorder/custom-scroll-target/vue.md | 28 +- .../angular/example_component_html.md | 24 +- .../angular/example_component_ts.md | 2 +- .../v6/reorder/toggling-disabled/demo.html | 150 +- .../reorder/toggling-disabled/javascript.md | 26 +- .../v6/reorder/toggling-disabled/react.md | 36 +- .../usage/v6/reorder/toggling-disabled/vue.md | 32 +- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 2 +- .../usage/v6/reorder/updating-data/demo.html | 108 +- .../v6/reorder/updating-data/javascript.md | 2 +- .../usage/v6/reorder/updating-data/react.md | 8 +- static/usage/v6/reorder/updating-data/vue.md | 10 +- .../wrapper/angular/example_component_html.md | 20 +- .../wrapper/angular/example_component_ts.md | 2 +- static/usage/v6/reorder/wrapper/demo.html | 142 +- static/usage/v6/reorder/wrapper/javascript.md | 22 +- static/usage/v6/reorder/wrapper/react.md | 20 +- static/usage/v6/reorder/wrapper/vue.md | 26 +- static/usage/v6/ripple-effect/basic/demo.html | 154 +- .../v6/ripple-effect/customizing/demo.html | 152 +- static/usage/v6/ripple-effect/type/demo.html | 152 +- static/usage/v6/router/basic/demo.html | 69 +- static/usage/v6/searchbar/basic/demo.html | 58 +- .../v6/searchbar/cancel-button/angular.md | 7 +- .../v6/searchbar/cancel-button/demo.html | 62 +- .../v6/searchbar/cancel-button/javascript.md | 7 +- .../usage/v6/searchbar/cancel-button/react.md | 7 +- .../usage/v6/searchbar/cancel-button/vue.md | 9 +- .../usage/v6/searchbar/clear-button/demo.html | 56 +- static/usage/v6/searchbar/clear-button/vue.md | 2 +- .../debounce/angular/example_component_ts.md | 15 +- static/usage/v6/searchbar/debounce/demo.html | 105 +- .../usage/v6/searchbar/debounce/javascript.md | 15 +- static/usage/v6/searchbar/debounce/react.md | 23 +- static/usage/v6/searchbar/debounce/vue.md | 15 +- .../usage/v6/searchbar/search-icon/demo.html | 52 +- static/usage/v6/searchbar/search-icon/vue.md | 2 +- .../v6/searchbar/theming/colors/demo.html | 68 +- .../theming/css-properties/demo.html | 90 +- .../theming/css-properties/javascript.md | 30 +- .../theming/css-properties/react/main_tsx.md | 4 +- .../usage/v6/segment-button/basic/demo.html | 98 +- .../usage/v6/segment-button/layout/demo.html | 188 +- static/usage/v6/segment-button/layout/vue.md | 2 +- .../theming/css-properties/demo.html | 102 +- .../theming/css-shadow-parts/demo.html | 118 +- static/usage/v6/segment/basic/demo.html | 86 +- static/usage/v6/segment/scrollable/demo.html | 120 +- static/usage/v6/segment/scrollable/vue.md | 15 +- .../usage/v6/segment/theming/colors/demo.html | 214 +- .../segment/theming/css-properties/demo.html | 72 +- .../select/basic/multiple-selection/demo.html | 56 +- .../angular/example_component_html.md | 2 +- .../basic/responding-to-interaction/demo.html | 116 +- .../responding-to-interaction/javascript.md | 2 +- .../basic/responding-to-interaction/vue.md | 8 +- .../select/basic/single-selection/demo.html | 56 +- .../customization/button-text/demo.html | 74 +- .../angular/example_component_html.md | 6 +- .../customization/interface-options/demo.html | 146 +- .../interface-options/javascript.md | 12 +- .../customization/interface-options/react.md | 12 +- .../customization/interface-options/vue.md | 18 +- .../angular/example_component_css.md | 2 +- .../customization/styling-select/demo.html | 114 +- .../styling-select/javascript.md | 42 +- .../styling-select/react/main_css.md | 2 +- .../select/interfaces/action-sheet/demo.html | 56 +- .../v6/select/interfaces/popover/demo.html | 56 +- .../angular/example_component_html.md | 2 +- .../multiple-selection/demo.html | 156 +- .../multiple-selection/javascript.md | 18 +- .../multiple-selection/vue.md | 28 +- .../angular/example_component_html.md | 8 +- .../using-comparewith/demo.html | 138 +- .../using-comparewith/javascript.md | 14 +- .../using-comparewith/vue.md | 24 +- .../typeahead/angular/angular_types_ts.md | 2 +- .../angular/example_component_html.md | 2 +- .../typeahead/angular/example_component_ts.md | 16 +- .../angular/modal-example_component_html.md | 2 +- .../angular/modal-example_component_ts.md | 31 +- static/usage/v6/select/typeahead/demo.html | 32 +- static/usage/v6/select/typeahead/index.md | 18 +- .../usage/v6/select/typeahead/javascript.md | 26 +- .../v6/select/typeahead/react/main_tsx.md | 20 +- .../select/typeahead/react/react_types_ts.md | 2 +- .../react/typeahead_component_tsx.md | 58 +- .../v6/select/typeahead/vue/example_vue.md | 22 +- .../typeahead/vue/typeahead_component_vue.md | 102 +- .../v6/select/typeahead/vue/vue_types_ts.md | 2 +- .../basic/angular/example_component_ts.md | 5 +- static/usage/v6/skeleton-text/basic/demo.html | 97 +- .../v6/skeleton-text/basic/javascript.md | 1 - static/usage/v6/skeleton-text/basic/react.md | 22 +- static/usage/v6/skeleton-text/basic/vue.md | 14 +- .../angular/example_component_css.md | 2 +- .../theming/css-properties/demo.html | 106 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 19 +- .../theming/css-properties/vue.md | 13 +- static/usage/v6/spinner/basic/demo.html | 130 +- .../usage/v6/spinner/theming/colors/demo.html | 58 +- .../spinner/theming/css-properties/demo.html | 50 +- .../spinner/theming/css-properties/react.md | 4 +- static/usage/v6/split-pane/basic/angular.md | 8 +- static/usage/v6/split-pane/basic/demo.html | 70 +- .../usage/v6/split-pane/basic/javascript.md | 8 +- static/usage/v6/split-pane/basic/react.md | 10 +- static/usage/v6/split-pane/basic/vue.md | 12 +- .../angular/example_component_html.md | 8 +- .../theming/css-properties/demo.html | 84 +- .../theming/css-properties/javascript.md | 10 +- .../theming/css-properties/react/main_tsx.md | 10 +- .../split-pane/theming/css-properties/vue.md | 14 +- .../router/angular/example_component_html.md | 2 - static/usage/v6/tabs/router/demo.html | 225 +- static/usage/v6/text/basic/angular.md | 8 +- static/usage/v6/text/basic/demo.html | 108 +- static/usage/v6/text/basic/javascript.md | 8 +- static/usage/v6/text/basic/react.md | 13 +- static/usage/v6/text/basic/vue.md | 8 +- static/usage/v6/textarea/autogrow/angular.md | 7 +- static/usage/v6/textarea/autogrow/demo.html | 67 +- .../usage/v6/textarea/autogrow/javascript.md | 7 +- static/usage/v6/textarea/autogrow/vue.md | 7 +- static/usage/v6/textarea/basic/demo.html | 76 +- .../usage/v6/textarea/clear-on-edit/demo.html | 52 +- static/usage/v6/textarea/theming/demo.html | 66 +- static/usage/v6/thumbnail/basic/demo.html | 45 +- static/usage/v6/thumbnail/item/demo.html | 51 +- .../angular/example_component_css.md | 1 - .../angular/example_component_html.md | 1 - .../theming/css-properties/demo.html | 56 +- .../theming/css-properties/react/main_tsx.md | 1 - static/usage/v6/title/basic/demo.html | 41 +- .../collapsible-large-title/basic/demo.html | 97 +- .../collapsible-large-title/buttons/demo.html | 103 +- .../v6/title/theming/css-properties/demo.html | 116 +- .../buttons/angular/example_component_html.md | 2 +- .../buttons/angular/example_component_ts.md | 14 +- static/usage/v6/toast/buttons/demo.html | 132 +- static/usage/v6/toast/buttons/javascript.md | 12 +- static/usage/v6/toast/buttons/react.md | 14 +- static/usage/v6/toast/buttons/vue.md | 12 +- .../icon/angular/example_component_html.md | 2 +- .../icon/angular/example_component_ts.md | 4 +- static/usage/v6/toast/icon/demo.html | 78 +- static/usage/v6/toast/icon/javascript.md | 4 +- static/usage/v6/toast/icon/react.md | 4 +- static/usage/v6/toast/icon/vue.md | 2 +- .../layout/angular/example_component_html.md | 2 +- .../layout/angular/example_component_ts.md | 25 +- static/usage/v6/toast/layout/demo.html | 112 +- static/usage/v6/toast/layout/javascript.md | 20 +- static/usage/v6/toast/layout/react.md | 18 +- static/usage/v6/toast/layout/vue.md | 32 +- .../angular/example_component_html.md | 2 +- .../angular/example_component_ts.md | 4 +- .../v6/toast/presenting/controller/demo.html | 92 +- .../toast/presenting/controller/javascript.md | 2 +- .../v6/toast/presenting/controller/react.md | 14 +- .../v6/toast/presenting/controller/vue.md | 2 +- .../theming/angular/example_component_ts.md | 4 +- .../v6/toast/theming/angular/global_css.md | 6 +- static/usage/v6/toast/theming/demo.html | 120 +- static/usage/v6/toast/theming/javascript.md | 8 +- .../usage/v6/toast/theming/react/main_css.md | 6 +- .../usage/v6/toast/theming/react/main_tsx.md | 4 +- static/usage/v6/toast/theming/vue.md | 8 +- static/usage/v6/toggle/basic/demo.html | 84 +- static/usage/v6/toggle/on-off/demo.html | 41 +- static/usage/v6/toggle/on-off/react.md | 4 +- .../usage/v6/toggle/theming/colors/demo.html | 57 +- .../angular/example_component_html.md | 3 +- .../toggle/theming/css-properties/demo.html | 98 +- .../angular/example_component_html.md | 3 +- .../toggle/theming/css-shadow-parts/demo.html | 112 +- static/usage/v6/toolbar/basic/demo.html | 51 +- static/usage/v6/toolbar/buttons/angular.md | 16 +- static/usage/v6/toolbar/buttons/demo.html | 210 +- static/usage/v6/toolbar/buttons/javascript.md | 16 +- static/usage/v6/toolbar/buttons/react.md | 16 +- static/usage/v6/toolbar/buttons/vue.md | 16 +- .../usage/v6/toolbar/progress-bars/demo.html | 43 +- static/usage/v6/toolbar/searchbars/demo.html | 47 +- static/usage/v6/toolbar/segments/demo.html | 53 +- .../usage/v6/toolbar/theming/colors/demo.html | 110 +- .../toolbar/theming/css-properties/demo.html | 76 +- .../accessibility/animations/demo.html | 84 +- .../accessibility/animations/javascript.md | 46 +- static/usage/v7/accordion/basic/angular.md | 12 +- static/usage/v7/accordion/basic/demo.html | 84 +- static/usage/v7/accordion/basic/javascript.md | 12 +- static/usage/v7/accordion/basic/react.md | 7 +- static/usage/v7/accordion/basic/vue.md | 25 +- .../angular/example_component_css.md | 10 +- .../angular/example_component_html.md | 12 +- .../advanced-expansion-styles/demo.html | 138 +- .../advanced-expansion-styles/javascript.md | 20 +- .../react/main_css.md | 10 +- .../advanced-expansion-styles/vue.md | 39 +- .../customization/expansion-styles/angular.md | 12 +- .../customization/expansion-styles/demo.html | 84 +- .../expansion-styles/javascript.md | 12 +- .../customization/expansion-styles/react.md | 7 +- .../customization/expansion-styles/vue.md | 25 +- .../accordion/customization/icons/demo.html | 84 +- .../customization/icons/javascript.md | 12 +- .../v7/accordion/customization/icons/react.md | 7 +- .../v7/accordion/customization/icons/vue.md | 29 +- .../theming/angular/example_component_html.md | 12 +- .../theming/angular/global_css.md | 10 +- .../accordion/customization/theming/demo.html | 126 +- .../customization/theming/javascript.md | 24 +- .../customization/theming/react/main_css.md | 10 +- .../customization/theming/react/main_tsx.md | 7 +- .../v7/accordion/customization/theming/vue.md | 41 +- .../v7/accordion/disable-group/demo.html | 84 +- .../v7/accordion/disable/group/demo.html | 84 +- .../v7/accordion/disable/individual/demo.html | 84 +- .../v7/accordion/listen-changes/demo.html | 119 +- static/usage/v7/accordion/multiple/demo.html | 92 +- .../v7/accordion/readonly/group/angular.md | 12 +- .../v7/accordion/readonly/group/demo.html | 84 +- .../v7/accordion/readonly/group/javascript.md | 12 +- .../v7/accordion/readonly/group/react.md | 7 +- .../usage/v7/accordion/readonly/group/vue.md | 25 +- .../accordion/readonly/individual/angular.md | 12 +- .../accordion/readonly/individual/demo.html | 84 +- .../readonly/individual/javascript.md | 12 +- .../v7/accordion/readonly/individual/react.md | 7 +- .../v7/accordion/readonly/individual/vue.md | 25 +- static/usage/v7/accordion/toggle/demo.html | 118 +- .../v7/action-sheet/controller/demo.html | 98 +- .../isOpen/angular/example_component_ts.md | 16 +- .../v7/action-sheet/inline/isOpen/demo.html | 98 +- .../action-sheet/inline/isOpen/javascript.md | 14 +- .../v7/action-sheet/inline/isOpen/react.md | 14 +- .../v7/action-sheet/inline/isOpen/vue.md | 2 +- .../trigger/angular/example_component_html.md | 6 +- .../trigger/angular/example_component_ts.md | 14 +- .../v7/action-sheet/inline/trigger/demo.html | 95 +- .../action-sheet/inline/trigger/javascript.md | 19 +- .../v7/action-sheet/inline/trigger/react.md | 14 +- .../v7/action-sheet/inline/trigger/vue.md | 6 +- .../angular/example_component_ts.md | 14 +- .../role-info-on-dismiss/demo.html | 126 +- .../role-info-on-dismiss/javascript.md | 14 +- .../role-info-on-dismiss/react/main_tsx.md | 14 +- .../action-sheet/role-info-on-dismiss/vue.md | 2 +- .../angular/example_component_ts.md | 14 +- .../theming/css-properties/demo.html | 124 +- .../theming/css-properties/javascript.md | 14 +- .../theming/css-properties/react/main_tsx.md | 14 +- .../styling/angular/example_component_ts.md | 14 +- .../v7/action-sheet/theming/styling/demo.html | 140 +- .../theming/styling/javascript.md | 14 +- .../theming/styling/react/main_tsx.md | 14 +- .../buttons/angular/example_component_html.md | 2 +- .../buttons/angular/example_component_ts.md | 10 +- static/usage/v7/alert/buttons/demo.html | 114 +- static/usage/v7/alert/buttons/javascript.md | 10 +- static/usage/v7/alert/buttons/vue.md | 4 +- .../angular/example_component_html.md | 7 +- .../alert/customization/angular/global_css.md | 4 +- static/usage/v7/alert/customization/demo.html | 122 +- .../v7/alert/customization/javascript.md | 8 +- .../v7/alert/customization/react/main_css.md | 4 +- static/usage/v7/alert/customization/vue.md | 7 +- .../radios/angular/example_component_html.md | 2 +- static/usage/v7/alert/inputs/radios/demo.html | 84 +- .../v7/alert/inputs/radios/javascript.md | 8 +- .../angular/example_component_html.md | 2 +- .../v7/alert/inputs/text-inputs/demo.html | 92 +- .../v7/alert/inputs/text-inputs/javascript.md | 12 +- .../angular/example_component_html.md | 2 +- .../v7/alert/presenting/controller/demo.html | 62 +- .../isOpen/angular/example_component_html.md | 2 +- .../v7/alert/presenting/isOpen/demo.html | 60 +- .../v7/alert/presenting/isOpen/javascript.md | 6 +- .../trigger/angular/example_component_html.md | 2 +- .../v7/alert/presenting/trigger/demo.html | 60 +- .../basic/angular/example_component_html.md | 9 + .../basic/angular/example_component_ts.md | 40 + static/usage/v7/animations/basic/demo.html | 59 + static/usage/v7/animations/basic/index.md | 25 + .../usage/v7/animations/basic/javascript.md | 18 + static/usage/v7/animations/basic/react.md | 45 + static/usage/v7/animations/basic/vue.md | 51 + .../angular/example_component_html.md | 9 + .../angular/example_component_ts.md | 52 + .../before-and-after-hooks/demo.html | 74 + .../before-and-after-hooks/index.md | 25 + .../before-and-after-hooks/javascript.md | 28 + .../before-and-after-hooks/react.md | 61 + .../animations/before-and-after-hooks/vue.md | 67 + .../chain/angular/example_component_html.md | 17 + .../chain/angular/example_component_ts.md | 73 + static/usage/v7/animations/chain/demo.html | 96 + static/usage/v7/animations/chain/index.md | 25 + .../usage/v7/animations/chain/javascript.md | 67 + static/usage/v7/animations/chain/react.md | 89 + static/usage/v7/animations/chain/vue.md | 100 + .../gesture/angular/example_component_css.md | 17 + .../gesture/angular/example_component_html.md | 11 + .../gesture/angular/example_component_ts.md | 82 + static/usage/v7/animations/gesture/demo.html | 113 + static/usage/v7/animations/gesture/index.md | 35 + .../usage/v7/animations/gesture/javascript.md | 98 + .../v7/animations/gesture/react/main_css.md | 17 + .../v7/animations/gesture/react/main_tsx.md | 92 + static/usage/v7/animations/gesture/vue.md | 112 + .../group/angular/example_component_html.md | 17 + .../group/angular/example_component_ts.md | 66 + static/usage/v7/animations/group/demo.html | 87 + static/usage/v7/animations/group/index.md | 25 + .../usage/v7/animations/group/javascript.md | 46 + static/usage/v7/animations/group/react.md | 75 + static/usage/v7/animations/group/vue.md | 83 + .../angular/example_component_html.md | 8 + .../keyframes/angular/example_component_ts.md | 42 + .../usage/v7/animations/keyframes/demo.html | 61 + static/usage/v7/animations/keyframes/index.md | 25 + .../v7/animations/keyframes/javascript.md | 20 + static/usage/v7/animations/keyframes/react.md | 47 + static/usage/v7/animations/keyframes/vue.md | 60 + .../angular/example_component_html.md | 23 + .../angular/example_component_ts.md | 52 + .../v7/animations/modal-override/demo.html | 78 + .../v7/animations/modal-override/index.md | 26 + .../animations/modal-override/javascript.md | 57 + .../v7/animations/modal-override/react.md | 71 + .../usage/v7/animations/modal-override/vue.md | 90 + .../angular/example_component_css.md | 16 + .../angular/example_component_html.md | 9 + .../angular/example_component_ts.md | 41 + .../v7/animations/preference-based/demo.html | 71 + .../v7/animations/preference-based/index.md | 35 + .../animations/preference-based/javascript.md | 35 + .../preference-based/react/main_css.md | 16 + .../preference-based/react/main_tsx.md | 47 + .../v7/animations/preference-based/vue.md | 68 + static/usage/v7/avatar/basic/demo.html | 45 +- static/usage/v7/avatar/chip/demo.html | 51 +- static/usage/v7/avatar/chip/vue.md | 2 +- static/usage/v7/avatar/item/demo.html | 51 +- static/usage/v7/avatar/item/vue.md | 2 +- .../avatar/theming/css-properties/demo.html | 54 +- .../theming/css-properties/react/main_tsx.md | 1 - .../v7/avatar/theming/css-properties/vue.md | 2 +- .../basic/angular/page_two_component_ts.md | 4 +- static/usage/v7/back-button/basic/demo.html | 55 +- .../v7/back-button/basic/vue/page_two_vue.md | 2 +- .../custom/angular/page_two_component_ts.md | 4 +- static/usage/v7/back-button/custom/demo.html | 55 +- .../v7/back-button/custom/vue/page_two_vue.md | 4 +- static/usage/v7/backdrop/basic/demo.html | 61 +- static/usage/v7/backdrop/styling/demo.html | 106 +- static/usage/v7/badge/basic/demo.html | 68 +- .../usage/v7/badge/theming/colors/demo.html | 100 +- .../angular/example_component_css.md | 2 +- .../v7/badge/theming/css-properties/demo.html | 72 +- .../theming/css-properties/react/main_css.md | 2 +- static/usage/v7/breadcrumbs/basic/demo.html | 50 +- .../angular/example_component_html.md | 2 +- .../expand-on-click/demo.html | 66 +- .../collapsing-items/expand-on-click/vue.md | 8 +- .../items-before-after/demo.html | 120 +- .../collapsing-items/max-items/demo.html | 54 +- .../angular/example_component_html.md | 2 +- .../popover-on-click/demo.html | 96 +- .../popover-on-click/javascript.md | 6 +- .../popover-on-click/react.md | 5 +- .../collapsing-items/popover-on-click/vue.md | 40 +- .../icons/custom-separators/demo.html | 74 +- .../icons/custom-separators/vue.md | 2 +- .../icons/icons-on-items/demo.html | 124 +- .../v7/breadcrumbs/theming/colors/demo.html | 50 +- .../v7/breadcrumbs/theming/colors/vue.md | 10 +- .../angular/example_component_css.md | 2 +- .../theming/css-properties/demo.html | 64 +- .../theming/css-properties/react/main_css.md | 2 +- static/usage/v7/button/basic/angular.md | 3 +- static/usage/v7/button/basic/demo.html | 43 +- static/usage/v7/button/basic/javascript.md | 3 +- static/usage/v7/button/expand/angular.md | 3 +- static/usage/v7/button/expand/demo.html | 54 +- static/usage/v7/button/expand/javascript.md | 3 +- static/usage/v7/button/fill/demo.html | 47 +- static/usage/v7/button/icons/demo.html | 61 +- static/usage/v7/button/icons/vue.md | 4 +- static/usage/v7/button/shape/angular.md | 3 +- static/usage/v7/button/shape/demo.html | 43 +- static/usage/v7/button/shape/javascript.md | 3 +- static/usage/v7/button/size/demo.html | 45 +- .../usage/v7/button/theming/colors/demo.html | 72 +- .../button/theming/css-properties/demo.html | 88 +- .../theming/css-properties/react/main_css.md | 1 - .../theming/css-properties/react/main_tsx.md | 4 +- static/usage/v7/buttons/basic/demo.html | 50 +- static/usage/v7/buttons/placement/demo.html | 86 +- static/usage/v7/buttons/types/angular.md | 8 +- static/usage/v7/buttons/types/demo.html | 188 +- static/usage/v7/buttons/types/javascript.md | 8 +- static/usage/v7/buttons/types/react.md | 9 +- static/usage/v7/buttons/types/vue.md | 10 +- static/usage/v7/card/basic/demo.html | 68 +- static/usage/v7/card/basic/index.md | 6 +- static/usage/v7/card/basic/react.md | 4 +- static/usage/v7/card/buttons/demo.html | 72 +- static/usage/v7/card/buttons/index.md | 7 +- static/usage/v7/card/buttons/react.md | 4 +- static/usage/v7/card/list/demo.html | 130 +- static/usage/v7/card/list/react/main_tsx.md | 12 +- static/usage/v7/card/media/demo.html | 70 +- static/usage/v7/card/media/index.md | 7 +- static/usage/v7/card/media/react.md | 4 +- .../usage/v7/card/theming/colors/angular.md | 36 +- static/usage/v7/card/theming/colors/demo.html | 238 +- .../v7/card/theming/colors/javascript.md | 36 +- static/usage/v7/card/theming/colors/react.md | 36 +- static/usage/v7/card/theming/colors/vue.md | 36 +- .../v7/card/theming/css-properties/demo.html | 100 +- .../theming/css-properties/react/main_tsx.md | 4 +- static/usage/v7/checkbox/basic/demo.html | 38 +- static/usage/v7/checkbox/basic/react.md | 6 +- static/usage/v7/checkbox/basic/vue.md | 2 +- .../usage/v7/checkbox/indeterminate/demo.html | 38 +- .../usage/v7/checkbox/indeterminate/react.md | 6 +- static/usage/v7/checkbox/indeterminate/vue.md | 2 +- static/usage/v7/checkbox/justify/angular.md | 4 +- static/usage/v7/checkbox/justify/demo.html | 29 +- .../usage/v7/checkbox/justify/javascript.md | 4 +- static/usage/v7/checkbox/justify/react.md | 4 +- static/usage/v7/checkbox/justify/vue.md | 4 +- .../v7/checkbox/label-placement/demo.html | 48 +- .../v7/checkbox/label-placement/react.md | 8 +- .../usage/v7/checkbox/label-placement/vue.md | 8 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../checkbox/theming/css-properties/demo.html | 58 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 6 +- .../v7/checkbox/theming/css-properties/vue.md | 4 +- static/usage/v7/chip/basic/demo.html | 45 +- static/usage/v7/chip/slots/demo.html | 63 +- static/usage/v7/chip/theming/colors/demo.html | 78 +- .../v7/chip/theming/css-properties/demo.html | 53 +- static/usage/v7/content/basic/demo.html | 48 +- static/usage/v7/content/fixed/angular.md | 50 +- .../fixed/angular/example_component_css.md | 2 +- .../fixed/angular/example_component_html.md | 50 +- static/usage/v7/content/fixed/demo.html | 132 +- static/usage/v7/content/fixed/javascript.md | 52 +- static/usage/v7/content/fixed/react.md | 50 +- .../usage/v7/content/fixed/react/main_css.md | 2 +- .../usage/v7/content/fixed/react/main_tsx.md | 50 +- static/usage/v7/content/fixed/vue.md | 52 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 58 +- static/usage/v7/content/fullscreen/demo.html | 150 +- .../usage/v7/content/fullscreen/javascript.md | 60 +- .../v7/content/fullscreen/react/main_css.md | 2 +- .../v7/content/fullscreen/react/main_tsx.md | 58 +- static/usage/v7/content/fullscreen/vue.md | 60 +- .../usage/v7/content/header-footer/angular.md | 8 +- .../usage/v7/content/header-footer/demo.html | 72 +- .../v7/content/header-footer/javascript.md | 8 +- .../usage/v7/content/header-footer/react.md | 8 +- static/usage/v7/content/header-footer/vue.md | 8 +- .../angular/example_component_html.md | 53 +- .../usage/v7/content/scroll-events/demo.html | 134 +- .../v7/content/scroll-events/javascript.md | 50 +- .../usage/v7/content/scroll-events/react.md | 53 +- static/usage/v7/content/scroll-events/vue.md | 57 +- .../angular/example_component_html.md | 50 +- .../usage/v7/content/scroll-methods/demo.html | 146 +- .../v7/content/scroll-methods/javascript.md | 50 +- .../usage/v7/content/scroll-methods/react.md | 58 +- static/usage/v7/content/scroll-methods/vue.md | 52 +- .../usage/v7/content/theming/colors/demo.html | 126 +- .../content/theming/css-properties/demo.html | 60 +- .../theming/css-shadow-parts/demo.html | 64 +- .../usage/v7/datetime-button/basic/demo.html | 56 +- .../usage/v7/datetime-button/basic/react.md | 2 +- static/usage/v7/datetime-button/basic/vue.md | 2 +- static/usage/v7/datetime/basic/demo.html | 54 +- .../customizing-button-texts/angular.md | 7 +- .../customizing-button-texts/demo.html | 52 +- .../customizing-button-texts/javascript.md | 6 +- .../buttons/customizing-button-texts/react.md | 9 +- .../buttons/customizing-button-texts/vue.md | 8 +- .../buttons/customizing-buttons/demo.html | 70 +- .../buttons/customizing-buttons/react.md | 18 +- .../buttons/customizing-buttons/vue.md | 4 +- .../showing-confirmation-buttons/demo.html | 52 +- .../showing-confirmation-buttons/react.md | 4 +- .../date-constraints/advanced/demo.html | 74 +- .../date-constraints/advanced/javascript.md | 2 +- .../date-constraints/advanced/react.md | 8 +- .../datetime/date-constraints/advanced/vue.md | 10 +- .../date-constraints/max-min/angular.md | 6 +- .../date-constraints/max-min/demo.html | 50 +- .../date-constraints/max-min/javascript.md | 6 +- .../date-constraints/max-min/react.md | 8 +- .../datetime/date-constraints/max-min/vue.md | 6 +- .../date-constraints/values/angular.md | 5 +- .../date-constraints/values/demo.html | 50 +- .../date-constraints/values/javascript.md | 5 +- .../datetime/date-constraints/values/react.md | 7 +- .../datetime/date-constraints/values/vue.md | 5 +- .../array/angular/example_component_html.md | 6 +- .../array/angular/example_component_ts.md | 4 +- .../datetime/highlightedDates/array/demo.html | 100 +- .../highlightedDates/array/javascript.md | 4 +- .../datetime/highlightedDates/array/react.md | 4 +- .../v7/datetime/highlightedDates/array/vue.md | 16 +- .../callback/angular/example_component_ts.md | 4 +- .../highlightedDates/callback/demo.html | 90 +- .../highlightedDates/callback/javascript.md | 4 +- .../highlightedDates/callback/react.md | 4 +- .../datetime/highlightedDates/callback/vue.md | 8 +- .../localization/custom-locale/demo.html | 50 +- .../localization/custom-locale/react.md | 4 +- .../localization/first-day-of-week/demo.html | 50 +- .../localization/first-day-of-week/react.md | 4 +- .../localization/hour-cycle/demo.html | 50 +- .../datetime/localization/hour-cycle/react.md | 4 +- .../locale-extension-tags/demo.html | 50 +- .../locale-extension-tags/react.md | 4 +- .../localization/time-label/demo.html | 54 +- static/usage/v7/datetime/multiple/angular.md | 6 +- static/usage/v7/datetime/multiple/demo.html | 58 +- static/usage/v7/datetime/multiple/react.md | 8 +- static/usage/v7/datetime/multiple/vue.md | 6 +- .../v7/datetime/presentation/date/demo.html | 50 +- .../v7/datetime/presentation/date/react.md | 4 +- .../presentation/month-and-year/demo.html | 50 +- .../presentation/month-and-year/react.md | 4 +- .../v7/datetime/presentation/time/demo.html | 50 +- .../v7/datetime/presentation/time/react.md | 4 +- .../v7/datetime/presentation/wheel/demo.html | 50 +- .../v7/datetime/presentation/wheel/react.md | 4 +- .../angular/example_component_html.md | 3 + .../global-theming/angular/global_css.md | 66 + .../datetime/styling/global-theming/demo.html | 76 + .../datetime/styling/global-theming/index.md | 33 + .../styling/global-theming/javascript.md | 54 + .../styling/global-theming/react/main_css.md | 50 + .../styling/global-theming/react/main_tsx.md | 11 + .../v7/datetime/styling/global-theming/vue.md | 65 + .../angular/example_component_css.md | 16 + .../angular/example_component_html.md | 3 + .../datetime/styling/wheel-styling/demo.html | 39 + .../datetime/styling/wheel-styling/index.md | 33 + .../styling/wheel-styling/javascript.md | 20 + .../styling/wheel-styling/react/main_css.md | 16 + .../styling/wheel-styling/react/main_tsx.md | 11 + .../v7/datetime/styling/wheel-styling/vue.md | 31 + static/usage/v7/datetime/theming/demo.html | 136 +- static/usage/v7/datetime/theming/index.md | 2 + .../usage/v7/datetime/theming/javascript.md | 18 +- .../v7/datetime/theming/react/main_css.md | 12 +- static/usage/v7/datetime/theming/vue.md | 18 +- .../title/customizing-title/demo.html | 54 +- .../title/showing-default-title/demo.html | 50 +- .../title/showing-default-title/react.md | 4 +- static/usage/v7/fab/basic/demo.html | 49 +- static/usage/v7/fab/basic/vue.md | 4 +- static/usage/v7/fab/button-sizing/demo.html | 69 +- static/usage/v7/fab/button-sizing/vue.md | 4 +- static/usage/v7/fab/list-side/demo.html | 97 +- static/usage/v7/fab/list-side/vue.md | 4 +- static/usage/v7/fab/positioning/angular.md | 2 +- static/usage/v7/fab/positioning/demo.html | 129 +- static/usage/v7/fab/positioning/javascript.md | 2 +- static/usage/v7/fab/positioning/react.md | 11 +- static/usage/v7/fab/positioning/vue.md | 15 +- static/usage/v7/fab/theming/colors/demo.html | 99 +- static/usage/v7/fab/theming/colors/vue.md | 4 +- .../angular/example_component_css.md | 4 +- .../theming/css-custom-properties/demo.html | 86 +- .../css-custom-properties/javascript.md | 2 +- .../css-custom-properties/react/main_css.md | 4 +- .../fab/theming/css-custom-properties/vue.md | 6 +- .../angular/example_component_css.md | 6 +- .../v7/fab/theming/css-shadow-parts/demo.html | 94 +- .../theming/css-shadow-parts/javascript.md | 4 +- .../css-shadow-parts/react/main_css.md | 6 +- .../v7/fab/theming/css-shadow-parts/vue.md | 8 +- static/usage/v7/footer/basic/demo.html | 47 +- .../angular/example_component_html.md | 57 +- .../v7/footer/custom-scroll-target/demo.html | 156 +- .../footer/custom-scroll-target/javascript.md | 57 +- .../custom-scroll-target/react/main_tsx.md | 59 +- .../v7/footer/custom-scroll-target/vue.md | 57 +- static/usage/v7/footer/fade/angular.md | 57 +- static/usage/v7/footer/fade/demo.html | 131 +- static/usage/v7/footer/fade/javascript.md | 57 +- static/usage/v7/footer/fade/react.md | 57 +- static/usage/v7/footer/fade/vue.md | 57 +- static/usage/v7/footer/no-border/demo.html | 47 +- static/usage/v7/footer/translucent/angular.md | 57 +- static/usage/v7/footer/translucent/demo.html | 131 +- .../usage/v7/footer/translucent/javascript.md | 57 +- static/usage/v7/footer/translucent/react.md | 57 +- static/usage/v7/footer/translucent/vue.md | 57 +- .../basic/angular/example_component_css.md | 14 + .../basic/angular/example_component_html.md | 10 + .../basic/angular/example_component_ts.md | 50 + static/usage/v7/gestures/basic/demo.html | 81 + static/usage/v7/gestures/basic/index.md | 34 + static/usage/v7/gestures/basic/javascript.md | 58 + .../usage/v7/gestures/basic/react/main_css.md | 14 + .../usage/v7/gestures/basic/react/main_tsx.md | 62 + static/usage/v7/gestures/basic/vue.md | 82 + .../angular/example_component_css.md | 6 + .../angular/example_component_html.md | 5 + .../angular/example_component_ts.md | 51 + .../usage/v7/gestures/double-click/demo.html | 67 + .../usage/v7/gestures/double-click/index.md | 34 + .../v7/gestures/double-click/javascript.md | 49 + .../gestures/double-click/react/main_css.md | 6 + .../gestures/double-click/react/main_tsx.md | 57 + static/usage/v7/gestures/double-click/vue.md | 69 + static/usage/v7/grid/basic/demo.html | 136 +- .../grid/customizing/column-number/demo.html | 90 +- .../column-number/react/main_tsx.md | 4 +- .../v7/grid/customizing/padding/demo.html | 124 +- .../usage/v7/grid/customizing/width/demo.html | 106 +- static/usage/v7/grid/fixed/demo.html | 82 +- .../angular/example_component_html.md | 40 +- .../v7/grid/horizontal-alignment/demo.html | 159 +- .../grid/horizontal-alignment/javascript.md | 40 +- .../horizontal-alignment/react/main_tsx.md | 40 +- .../usage/v7/grid/horizontal-alignment/vue.md | 40 +- .../usage/v7/grid/offset-responsive/demo.html | 122 +- .../grid/offset-responsive/react/main_tsx.md | 8 +- static/usage/v7/grid/offset/demo.html | 120 +- static/usage/v7/grid/offset/react/main_tsx.md | 16 +- .../v7/grid/push-pull-responsive/demo.html | 124 +- .../push-pull-responsive/react/main_tsx.md | 24 +- .../angular/example_component_html.md | 5 +- static/usage/v7/grid/push-pull/demo.html | 134 +- static/usage/v7/grid/push-pull/javascript.md | 5 +- .../usage/v7/grid/push-pull/react/main_tsx.md | 23 +- static/usage/v7/grid/push-pull/vue.md | 15 +- static/usage/v7/grid/size-auto/demo.html | 136 +- .../usage/v7/grid/size-auto/react/main_tsx.md | 14 +- .../usage/v7/grid/size-responsive/demo.html | 126 +- .../v7/grid/size-responsive/react/main_tsx.md | 40 +- static/usage/v7/grid/size/demo.html | 122 +- static/usage/v7/grid/size/react/main_tsx.md | 12 +- .../angular/example_component_html.md | 36 +- .../v7/grid/vertical-alignment/demo.html | 171 +- .../v7/grid/vertical-alignment/javascript.md | 36 +- .../grid/vertical-alignment/react/main_tsx.md | 36 +- .../usage/v7/grid/vertical-alignment/vue.md | 36 +- static/usage/v7/header/basic/demo.html | 47 +- static/usage/v7/header/condense/angular.md | 57 +- static/usage/v7/header/condense/demo.html | 141 +- static/usage/v7/header/condense/javascript.md | 57 +- static/usage/v7/header/condense/react.md | 59 +- static/usage/v7/header/condense/vue.md | 57 +- .../angular/example_component_html.md | 57 +- .../v7/header/custom-scroll-target/demo.html | 156 +- .../custom-scroll-target/react/main_tsx.md | 59 +- .../v7/header/custom-scroll-target/vue.md | 57 +- static/usage/v7/header/fade/angular.md | 57 +- static/usage/v7/header/fade/demo.html | 131 +- static/usage/v7/header/fade/javascript.md | 57 +- static/usage/v7/header/fade/react.md | 57 +- static/usage/v7/header/fade/vue.md | 57 +- static/usage/v7/header/no-border/demo.html | 47 +- static/usage/v7/header/translucent/angular.md | 57 +- static/usage/v7/header/translucent/demo.html | 131 +- .../usage/v7/header/translucent/javascript.md | 57 +- static/usage/v7/header/translucent/react.md | 57 +- static/usage/v7/header/translucent/vue.md | 57 +- static/usage/v7/icon/basic/demo.html | 47 +- static/usage/v7/icon/basic/index.md | 7 +- static/usage/v7/img/basic/angular.md | 5 +- static/usage/v7/img/basic/demo.html | 54 +- static/usage/v7/img/basic/javascript.md | 5 +- static/usage/v7/img/basic/react.md | 5 +- static/usage/v7/img/basic/vue.md | 5 +- .../usage/v7/infinite-scroll/basic/demo.html | 115 +- static/usage/v7/infinite-scroll/basic/vue.md | 4 +- .../custom-infinite-scroll-content/demo.html | 175 +- .../custom-infinite-scroll-content/vue.md | 2 +- .../infinite-scroll-content/demo.html | 101 +- .../infinite-scroll-content/vue.md | 2 +- static/usage/v7/input/basic/demo.html | 92 +- static/usage/v7/input/clear/angular.md | 22 +- static/usage/v7/input/clear/demo.html | 93 +- static/usage/v7/input/clear/javascript.md | 22 +- static/usage/v7/input/clear/react.md | 22 +- static/usage/v7/input/clear/vue.md | 26 +- .../counter/angular/example_component_html.md | 9 +- static/usage/v7/input/counter/demo.html | 69 +- static/usage/v7/input/counter/javascript.md | 8 +- static/usage/v7/input/counter/react.md | 11 +- static/usage/v7/input/counter/vue.md | 15 +- static/usage/v7/input/fill/demo.html | 61 +- static/usage/v7/input/fill/index.md | 2 +- static/usage/v7/input/fill/react.md | 4 +- static/usage/v7/input/fill/vue.md | 4 +- .../angular/example_component_html.md | 2 +- .../filtering/angular/example_component_ts.md | 10 +- static/usage/v7/input/filtering/demo.html | 62 +- static/usage/v7/input/filtering/index.md | 24 +- static/usage/v7/input/filtering/javascript.md | 4 +- static/usage/v7/input/filtering/react.md | 23 +- static/usage/v7/input/filtering/vue.md | 16 +- static/usage/v7/input/helper-error/angular.md | 2 +- static/usage/v7/input/helper-error/demo.html | 112 +- .../usage/v7/input/helper-error/javascript.md | 10 +- static/usage/v7/input/helper-error/vue.md | 8 +- .../usage/v7/input/label-placement/angular.md | 6 +- .../usage/v7/input/label-placement/demo.html | 74 +- .../usage/v7/input/label-placement/index.md | 7 +- .../v7/input/label-placement/javascript.md | 6 +- .../usage/v7/input/label-placement/react.md | 6 +- static/usage/v7/input/label-placement/vue.md | 6 +- static/usage/v7/input/label-slot/angular.md | 9 + static/usage/v7/input/label-slot/demo.html | 28 + static/usage/v7/input/label-slot/index.md | 8 + .../usage/v7/input/label-slot/javascript.md | 9 + static/usage/v7/input/label-slot/react.md | 19 + static/usage/v7/input/label-slot/vue.md | 20 + .../v7/input/mask/angular/app_module_ts.md | 19 + .../mask/angular/example_component_html.md | 20 + .../mask/angular/example_component_ts.md | 31 + static/usage/v7/input/mask/demo.html | 73 + static/usage/v7/input/mask/index.md | 58 + .../v7/input/mask/javascript/index_html.md | 58 + .../v7/input/mask/javascript/index_ts.md | 28 + static/usage/v7/input/mask/react.md | 59 + static/usage/v7/input/mask/vue.md | 51 + static/usage/v7/input/migration/index.md | 18 +- .../v7/input/no-visible-label/angular.md | 7 + .../usage/v7/input/no-visible-label/demo.html | 26 + .../usage/v7/input/no-visible-label/index.md | 8 + .../v7/input/no-visible-label/javascript.md | 7 + .../usage/v7/input/no-visible-label/react.md | 15 + static/usage/v7/input/no-visible-label/vue.md | 18 + .../usage/v7/input/theming/colors/demo.html | 74 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 6 +- .../v7/input/theming/css-properties/demo.html | 92 +- .../theming/css-properties/javascript.md | 8 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 4 +- .../v7/input/theming/css-properties/vue.md | 8 +- static/usage/v7/input/types/angular.md | 8 +- static/usage/v7/input/types/demo.html | 92 +- static/usage/v7/input/types/javascript.md | 8 +- static/usage/v7/input/types/react.md | 8 +- static/usage/v7/input/types/vue.md | 8 +- static/usage/v7/item-divider/basic/angular.md | 8 +- static/usage/v7/item-divider/basic/demo.html | 112 +- .../usage/v7/item-divider/basic/javascript.md | 8 +- static/usage/v7/item-divider/basic/react.md | 8 +- static/usage/v7/item-divider/basic/vue.md | 8 +- .../v7/item-divider/theming/colors/demo.html | 108 +- .../angular/example_component_html.md | 4 +- .../theming/css-properties/demo.html | 66 +- .../theming/css-properties/javascript.md | 4 +- .../theming/css-properties/react/main_tsx.md | 5 +- .../theming/css-properties/vue.md | 6 +- static/usage/v7/item-group/basic/demo.html | 104 +- .../v7/item-group/sliding-items/angular.md | 56 +- .../v7/item-group/sliding-items/demo.html | 192 +- .../v7/item-group/sliding-items/javascript.md | 56 +- .../v7/item-group/sliding-items/react.md | 66 +- .../usage/v7/item-group/sliding-items/vue.md | 66 +- static/usage/v7/item-sliding/basic/demo.html | 110 +- .../v7/item-sliding/expandable/demo.html | 76 +- .../usage/v7/item-sliding/expandable/react.md | 8 +- static/usage/v7/item-sliding/icons/angular.md | 16 +- static/usage/v7/item-sliding/icons/demo.html | 298 +- .../usage/v7/item-sliding/icons/javascript.md | 16 +- static/usage/v7/item-sliding/icons/react.md | 16 +- static/usage/v7/item-sliding/icons/vue.md | 20 +- static/usage/v7/item/basic/angular.md | 10 +- static/usage/v7/item/basic/demo.html | 116 +- static/usage/v7/item/basic/javascript.md | 10 +- static/usage/v7/item/basic/react.md | 6 +- static/usage/v7/item/basic/vue.md | 8 +- static/usage/v7/item/buttons/angular.md | 20 +- static/usage/v7/item/buttons/demo.html | 122 +- static/usage/v7/item/buttons/javascript.md | 20 +- static/usage/v7/item/buttons/react.md | 8 +- static/usage/v7/item/buttons/vue.md | 24 +- static/usage/v7/item/clickable/demo.html | 72 +- static/usage/v7/item/detail-arrows/demo.html | 122 +- static/usage/v7/item/detail-arrows/vue.md | 1 + static/usage/v7/item/icons/angular.md | 16 +- static/usage/v7/item/icons/demo.html | 88 +- static/usage/v7/item/icons/javascript.md | 16 +- static/usage/v7/item/icons/react.md | 16 +- static/usage/v7/item/icons/vue.md | 20 +- static/usage/v7/item/inputs/angular.md | 32 +- static/usage/v7/item/inputs/demo.html | 144 +- static/usage/v7/item/inputs/javascript.md | 36 +- static/usage/v7/item/inputs/react.md | 42 +- static/usage/v7/item/inputs/vue.md | 47 +- static/usage/v7/item/lines/angular.md | 4 +- static/usage/v7/item/lines/demo.html | 114 +- static/usage/v7/item/lines/javascript.md | 4 +- static/usage/v7/item/lines/react.md | 4 +- static/usage/v7/item/lines/vue.md | 6 +- static/usage/v7/item/media/angular.md | 8 +- static/usage/v7/item/media/demo.html | 76 +- static/usage/v7/item/media/javascript.md | 8 +- static/usage/v7/item/media/react.md | 8 +- static/usage/v7/item/media/vue.md | 8 +- static/usage/v7/item/theming/colors/demo.html | 108 +- .../v7/item/theming/css-properties/demo.html | 108 +- .../item/theming/css-shadow-parts/demo.html | 108 +- .../v7/item/theming/input-highlight/demo.html | 84 +- static/usage/v7/label/basic/demo.html | 40 +- static/usage/v7/label/input/demo.html | 111 +- static/usage/v7/label/item/angular.md | 10 +- static/usage/v7/label/item/demo.html | 93 +- static/usage/v7/label/item/javascript.md | 10 +- static/usage/v7/label/item/react.md | 6 +- static/usage/v7/label/item/vue.md | 8 +- .../usage/v7/label/theming/colors/demo.html | 68 +- static/usage/v7/list-header/basic/demo.html | 88 +- static/usage/v7/list-header/buttons/demo.html | 90 +- static/usage/v7/list-header/lines/demo.html | 114 +- .../v7/list-header/theming/colors/demo.html | 108 +- .../theming/css-properties/demo.html | 62 +- static/usage/v7/list/basic/demo.html | 82 +- static/usage/v7/list/inset/angular.md | 36 +- static/usage/v7/list/inset/demo.html | 88 +- static/usage/v7/list/inset/index.md | 8 +- static/usage/v7/list/inset/javascript.md | 36 +- static/usage/v7/list/inset/react.md | 38 +- static/usage/v7/list/inset/vue.md | 40 +- static/usage/v7/list/lines/demo.html | 118 +- static/usage/v7/loading/controller/demo.html | 68 +- .../usage/v7/loading/controller/javascript.md | 16 +- static/usage/v7/loading/controller/react.md | 15 +- static/usage/v7/loading/controller/vue.md | 12 +- static/usage/v7/loading/inline/demo.html | 41 +- static/usage/v7/loading/spinners/demo.html | 40 +- .../v7/loading/theming/angular/global_css.md | 2 +- static/usage/v7/loading/theming/demo.html | 62 +- .../v7/loading/theming/react/main_css.md | 2 +- static/usage/v7/menu/basic/angular.md | 4 +- static/usage/v7/menu/basic/demo.html | 70 +- static/usage/v7/menu/basic/javascript.md | 4 +- static/usage/v7/menu/basic/react.md | 15 +- static/usage/v7/menu/basic/vue.md | 17 +- .../angular/example_component_html.md | 43 + .../multiple/angular/example_component_ts.md | 29 + static/usage/v7/menu/multiple/demo.html | 82 + static/usage/v7/menu/multiple/index.md | 27 + static/usage/v7/menu/multiple/javascript.md | 62 + static/usage/v7/menu/multiple/react.md | 77 + static/usage/v7/menu/multiple/vue.md | 74 + static/usage/v7/menu/sides/angular.md | 21 + static/usage/v7/menu/sides/demo.html | 37 + static/usage/v7/menu/sides/index.md | 18 + static/usage/v7/menu/sides/javascript.md | 21 + static/usage/v7/menu/sides/react.md | 30 + static/usage/v7/menu/sides/vue.md | 41 + .../theming/angular/example_component_css.md | 2 +- .../theming/angular/example_component_html.md | 4 +- static/usage/v7/menu/theming/demo.html | 88 +- static/usage/v7/menu/theming/javascript.md | 4 +- .../usage/v7/menu/theming/react/main_css.md | 2 +- .../usage/v7/menu/theming/react/main_tsx.md | 15 +- static/usage/v7/menu/theming/vue.md | 17 +- static/usage/v7/menu/toggle/demo.html | 78 +- static/usage/v7/menu/toggle/react.md | 13 +- static/usage/v7/menu/toggle/vue.md | 13 +- .../type/angular/example_component_html.md | 5 +- static/usage/v7/menu/type/demo.html | 135 +- static/usage/v7/menu/type/javascript.md | 3 +- static/usage/v7/menu/type/react.md | 6 +- static/usage/v7/menu/type/vue.md | 13 +- .../v7/modal/can-dismiss/boolean/demo.html | 124 +- .../v7/modal/can-dismiss/function/demo.html | 126 +- .../prevent-swipe-to-close/demo.html | 108 +- static/usage/v7/modal/card/basic/demo.html | 164 +- .../angular/modal-example_component_html.md | 5 +- static/usage/v7/modal/controller/demo.html | 103 +- .../usage/v7/modal/controller/javascript.md | 5 +- static/usage/v7/modal/controller/react.md | 8 +- .../v7/modal/controller/vue/modal_vue.md | 8 +- .../usage/v7/modal/custom-dialogs/demo.html | 136 +- .../v7/modal/custom-dialogs/react/main_tsx.md | 2 +- static/usage/v7/modal/custom-dialogs/vue.md | 18 +- static/usage/v7/modal/inline/basic/demo.html | 116 +- .../usage/v7/modal/inline/is-open/demo.html | 84 +- .../v7/modal/performance/mount/angular.md | 4 +- .../v7/modal/performance/mount/demo.html | 86 +- .../usage/v7/modal/performance/mount/react.md | 15 +- .../usage/v7/modal/performance/mount/vue.md | 14 +- .../angular/example_component_css.md | 13 + .../angular/example_component_html.md | 16 + .../v7/modal/sheet/auto-height/demo.html | 49 + .../usage/v7/modal/sheet/auto-height/index.md | 33 + .../v7/modal/sheet/auto-height/javascript.md | 35 + .../modal/sheet/auto-height/react/main_css.md | 13 + .../modal/sheet/auto-height/react/main_tsx.md | 30 + .../usage/v7/modal/sheet/auto-height/vue.md | 46 + .../modal/sheet/background-content/demo.html | 189 +- static/usage/v7/modal/sheet/basic/demo.html | 148 +- .../v7/modal/sheet/handle-behavior/demo.html | 68 +- .../v7/modal/styling/animations/demo.html | 207 +- .../usage/v7/modal/styling/theming/demo.html | 184 +- .../usage/v7/nav/modal-navigation/demo.html | 156 +- static/usage/v7/nav/nav-link/demo.html | 67 +- static/usage/v7/note/basic/demo.html | 41 +- static/usage/v7/note/item/demo.html | 64 +- static/usage/v7/note/theming/colors/demo.html | 84 +- .../v7/note/theming/css-properties/demo.html | 50 +- static/usage/v7/picker/controller/demo.html | 125 +- .../isOpen/angular/example_component_ts.md | 47 +- .../usage/v7/picker/inline/isOpen/demo.html | 117 +- .../v7/picker/inline/isOpen/javascript.md | 47 +- static/usage/v7/picker/inline/isOpen/react.md | 35 +- static/usage/v7/picker/inline/isOpen/vue.md | 51 +- .../trigger/angular/example_component_html.md | 6 +- .../trigger/angular/example_component_ts.md | 47 +- .../usage/v7/picker/inline/trigger/demo.html | 111 +- .../v7/picker/inline/trigger/javascript.md | 47 +- .../usage/v7/picker/inline/trigger/react.md | 35 +- static/usage/v7/picker/inline/trigger/vue.md | 55 +- .../angular/example_component_html.md | 6 +- .../angular/example_component_ts.md | 102 +- .../usage/v7/picker/multiple-column/demo.html | 162 +- .../v7/picker/multiple-column/javascript.md | 102 +- .../usage/v7/picker/multiple-column/react.md | 72 +- static/usage/v7/picker/multiple-column/vue.md | 110 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../customization/positioning/demo.html | 98 +- .../positioning/react/main_css.md | 2 +- .../v7/popover/customization/sizing/demo.html | 54 +- .../styling/angular/global_css.md | 2 +- .../popover/customization/styling/demo.html | 76 +- .../customization/styling/react/main_css.md | 2 +- static/usage/v7/popover/nested/demo.html | 72 +- .../v7/popover/performance/mount/demo.html | 46 +- .../popover/performance/mount/javascript.md | 2 +- .../angular/example_component_html.md | 2 +- .../angular/popover_component_html.md | 2 +- .../popover/presenting/controller/demo.html | 106 +- .../presenting/controller/javascript.md | 2 +- .../presenting/controller/vue/popover_vue.md | 14 +- .../angular/example_component_html.md | 2 +- .../presenting/inline-isopen/demo.html | 64 +- .../presenting/inline-isopen/javascript.md | 4 +- .../presenting/inline-trigger/demo.html | 62 +- .../buffer/angular/example_component_ts.md | 2 +- static/usage/v7/progress-bar/buffer/demo.html | 87 +- static/usage/v7/progress-bar/buffer/react.md | 4 +- static/usage/v7/progress-bar/buffer/vue.md | 4 +- .../angular/example_component_ts.md | 2 +- .../v7/progress-bar/determinate/demo.html | 69 +- .../v7/progress-bar/determinate/react.md | 4 +- .../usage/v7/progress-bar/determinate/vue.md | 4 +- .../v7/progress-bar/indeterminate/demo.html | 41 +- .../v7/progress-bar/indeterminate/react.md | 4 +- .../v7/progress-bar/theming/colors/demo.html | 68 +- .../angular/example_component_html.md | 3 +- .../theming/css-properties/demo.html | 62 +- .../theming/css-properties/react/main_tsx.md | 3 +- .../theming/css-properties/vue.md | 2 +- .../angular/example_component_html.md | 3 +- .../theming/css-shadow-parts/demo.html | 72 +- .../css-shadow-parts/react/main_tsx.md | 3 +- .../theming/css-shadow-parts/vue.md | 2 +- static/usage/v7/radio/basic/angular.md | 2 +- static/usage/v7/radio/basic/demo.html | 58 +- static/usage/v7/radio/basic/javascript.md | 2 +- static/usage/v7/radio/basic/react.md | 9 +- static/usage/v7/radio/basic/vue.md | 2 +- .../usage/v7/radio/empty-selection/demo.html | 48 +- .../usage/v7/radio/empty-selection/index.md | 6 +- .../usage/v7/radio/empty-selection/react.md | 12 +- static/usage/v7/radio/justify/demo.html | 29 +- static/usage/v7/radio/justify/react.md | 16 +- static/usage/v7/radio/justify/vue.md | 4 +- .../usage/v7/radio/label-placement/demo.html | 60 +- .../usage/v7/radio/label-placement/react.md | 20 +- static/usage/v7/radio/label-placement/vue.md | 8 +- .../usage/v7/radio/theming/colors/demo.html | 90 +- .../v7/radio/theming/css-properties/demo.html | 90 +- .../theming/css-properties/javascript.md | 8 +- .../v7/radio/theming/css-properties/vue.md | 8 +- .../angular/example_component_css.md | 2 +- .../radio/theming/css-shadow-parts/demo.html | 112 +- .../theming/css-shadow-parts/javascript.md | 2 +- .../css-shadow-parts/react/main_css.md | 2 +- static/usage/v7/range/basic/demo.html | 48 +- static/usage/v7/range/basic/index.md | 2 + static/usage/v7/range/dual-knobs/demo.html | 62 +- .../usage/v7/range/ion-change-event/demo.html | 67 +- .../usage/v7/range/ion-change-event/react.md | 5 +- .../angular/example_component_html.md | 6 +- .../v7/range/ion-knob-move-event/demo.html | 83 +- .../usage/v7/range/ion-knob-move-event/vue.md | 6 +- static/usage/v7/range/label-slot/angular.md | 5 + static/usage/v7/range/label-slot/demo.html | 29 + static/usage/v7/range/label-slot/index.md | 8 + .../usage/v7/range/label-slot/javascript.md | 5 + static/usage/v7/range/label-slot/react.md | 14 + static/usage/v7/range/label-slot/vue.md | 16 + static/usage/v7/range/labels/angular.md | 12 +- static/usage/v7/range/labels/demo.html | 64 +- static/usage/v7/range/labels/javascript.md | 12 +- static/usage/v7/range/labels/react.md | 22 +- static/usage/v7/range/labels/vue.md | 20 +- static/usage/v7/range/migration/index.md | 110 +- .../v7/range/no-visible-label/angular.md | 3 + .../usage/v7/range/no-visible-label/demo.html | 27 + .../usage/v7/range/no-visible-label/index.md | 8 + .../v7/range/no-visible-label/javascript.md | 3 + .../usage/v7/range/no-visible-label/react.md | 8 + static/usage/v7/range/no-visible-label/vue.md | 14 + static/usage/v7/range/pins/demo.html | 60 +- static/usage/v7/range/slots/demo.html | 54 +- .../usage/v7/range/snapping-ticks/demo.html | 48 +- .../v7/range/theming/css-properties/demo.html | 64 +- .../angular/example_component_html.md | 10 +- .../range/theming/css-shadow-parts/demo.html | 118 +- .../css-shadow-parts/react/main_tsx.md | 4 +- .../v7/range/theming/css-shadow-parts/vue.md | 10 +- .../advanced/angular/example_component_ts.md | 20 +- static/usage/v7/refresher/advanced/demo.html | 152 +- .../usage/v7/refresher/advanced/javascript.md | 16 +- .../v7/refresher/advanced/react/main_tsx.md | 40 +- static/usage/v7/refresher/advanced/vue.md | 44 +- .../basic/angular/example_component_ts.md | 2 +- static/usage/v7/refresher/basic/demo.html | 70 +- static/usage/v7/refresher/basic/react.md | 11 +- .../angular/example_component_html.md | 3 +- .../angular/example_component_ts.md | 2 +- .../v7/refresher/custom-content/demo.html | 78 +- .../v7/refresher/custom-content/javascript.md | 3 +- .../v7/refresher/custom-content/react.md | 15 +- .../usage/v7/refresher/custom-content/vue.md | 3 +- .../angular/example_component_ts.md | 2 +- .../refresher/custom-scroll-target/demo.html | 106 +- .../custom-scroll-target/react/main_tsx.md | 11 +- .../angular/example_component_ts.md | 2 +- .../v7/refresher/pull-properties/demo.html | 70 +- .../v7/refresher/pull-properties/react.md | 11 +- .../basic/angular/example_component_html.md | 20 +- .../basic/angular/example_component_ts.md | 2 +- static/usage/v7/reorder/basic/demo.html | 132 +- static/usage/v7/reorder/basic/javascript.md | 22 +- static/usage/v7/reorder/basic/react.md | 20 +- static/usage/v7/reorder/basic/vue.md | 26 +- .../angular/example_component_html.md | 20 +- .../angular/example_component_ts.md | 2 +- static/usage/v7/reorder/custom-icon/demo.html | 152 +- .../v7/reorder/custom-icon/javascript.md | 22 +- static/usage/v7/reorder/custom-icon/react.md | 20 +- static/usage/v7/reorder/custom-icon/vue.md | 26 +- .../angular/example_component_html.md | 20 +- .../v7/reorder/custom-scroll-target/demo.html | 150 +- .../custom-scroll-target/javascript.md | 22 +- .../custom-scroll-target/react/main_tsx.md | 30 +- .../v7/reorder/custom-scroll-target/vue.md | 28 +- .../angular/example_component_html.md | 24 +- .../angular/example_component_ts.md | 2 +- .../v7/reorder/toggling-disabled/demo.html | 150 +- .../reorder/toggling-disabled/javascript.md | 26 +- .../v7/reorder/toggling-disabled/react.md | 36 +- .../usage/v7/reorder/toggling-disabled/vue.md | 32 +- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 2 +- .../usage/v7/reorder/updating-data/demo.html | 108 +- .../v7/reorder/updating-data/javascript.md | 2 +- .../usage/v7/reorder/updating-data/react.md | 8 +- static/usage/v7/reorder/updating-data/vue.md | 10 +- .../wrapper/angular/example_component_html.md | 20 +- .../wrapper/angular/example_component_ts.md | 2 +- static/usage/v7/reorder/wrapper/demo.html | 142 +- static/usage/v7/reorder/wrapper/javascript.md | 22 +- static/usage/v7/reorder/wrapper/react.md | 20 +- static/usage/v7/reorder/wrapper/vue.md | 26 +- static/usage/v7/ripple-effect/basic/demo.html | 154 +- .../v7/ripple-effect/customizing/demo.html | 152 +- static/usage/v7/ripple-effect/type/demo.html | 152 +- static/usage/v7/router/basic/demo.html | 69 +- static/usage/v7/searchbar/basic/demo.html | 58 +- .../v7/searchbar/cancel-button/angular.md | 7 +- .../v7/searchbar/cancel-button/demo.html | 62 +- .../v7/searchbar/cancel-button/javascript.md | 7 +- .../usage/v7/searchbar/cancel-button/react.md | 7 +- .../usage/v7/searchbar/cancel-button/vue.md | 9 +- .../usage/v7/searchbar/clear-button/demo.html | 56 +- static/usage/v7/searchbar/clear-button/vue.md | 2 +- .../angular/example_component_html.md | 2 +- .../debounce/angular/example_component_ts.md | 17 +- static/usage/v7/searchbar/debounce/demo.html | 105 +- .../usage/v7/searchbar/debounce/javascript.md | 19 +- static/usage/v7/searchbar/debounce/react.md | 27 +- static/usage/v7/searchbar/debounce/vue.md | 19 +- .../usage/v7/searchbar/search-icon/demo.html | 52 +- static/usage/v7/searchbar/search-icon/vue.md | 2 +- .../v7/searchbar/theming/colors/demo.html | 68 +- .../theming/css-properties/demo.html | 90 +- .../theming/css-properties/javascript.md | 30 +- .../theming/css-properties/react/main_tsx.md | 4 +- .../usage/v7/segment-button/basic/demo.html | 98 +- .../usage/v7/segment-button/layout/demo.html | 188 +- static/usage/v7/segment-button/layout/vue.md | 2 +- .../theming/css-properties/demo.html | 102 +- .../theming/css-shadow-parts/demo.html | 118 +- static/usage/v7/segment/basic/demo.html | 86 +- static/usage/v7/segment/scrollable/demo.html | 120 +- static/usage/v7/segment/scrollable/vue.md | 15 +- .../usage/v7/segment/theming/colors/demo.html | 214 +- .../segment/theming/css-properties/demo.html | 72 +- .../select/basic/multiple-selection/demo.html | 54 +- .../angular/example_component_html.md | 2 +- .../basic/responding-to-interaction/demo.html | 114 +- .../responding-to-interaction/javascript.md | 2 +- .../basic/responding-to-interaction/vue.md | 8 +- .../select/basic/single-selection/demo.html | 54 +- .../customization/button-text/angular.md | 7 +- .../customization/button-text/demo.html | 78 +- .../customization/button-text/javascript.md | 7 +- .../select/customization/button-text/react.md | 7 +- .../select/customization/button-text/vue.md | 7 +- .../custom-toggle-icons/angular.md | 17 + .../custom-toggle-icons/demo.html | 36 + .../custom-toggle-icons/index.md | 13 + .../custom-toggle-icons/javascript.md | 17 + .../custom-toggle-icons/react.md | 26 + .../customization/custom-toggle-icons/vue.md | 32 + .../angular/example_component_css.md | 13 + .../angular/example_component_html.md | 30 + .../angular/example_component_ts.md | 10 + .../icon-flip-behavior/demo.html | 63 + .../customization/icon-flip-behavior/index.md | 34 + .../icon-flip-behavior/javascript.md | 44 + .../icon-flip-behavior/react/main_css.md | 13 + .../icon-flip-behavior/react/main_tsx.md | 41 + .../customization/icon-flip-behavior/vue.md | 59 + .../angular/example_component_html.md | 13 +- .../customization/interface-options/demo.html | 143 +- .../interface-options/javascript.md | 12 +- .../customization/interface-options/react.md | 19 +- .../customization/interface-options/vue.md | 32 +- .../angular/example_component_css.md | 2 +- .../customization/styling-select/demo.html | 112 +- .../styling-select/javascript.md | 42 +- .../styling-select/react/main_css.md | 2 +- static/usage/v7/select/fill/demo.html | 72 +- static/usage/v7/select/fill/react.md | 4 +- static/usage/v7/select/fill/vue.md | 4 +- .../select/interfaces/action-sheet/demo.html | 54 +- .../v7/select/interfaces/popover/demo.html | 54 +- static/usage/v7/select/justify/demo.html | 29 +- static/usage/v7/select/justify/index.md | 7 +- .../usage/v7/select/label-placement/demo.html | 106 +- .../usage/v7/select/label-placement/index.md | 7 +- .../usage/v7/select/label-placement/react.md | 6 +- static/usage/v7/select/label-placement/vue.md | 6 +- static/usage/v7/select/label-slot/angular.md | 12 + static/usage/v7/select/label-slot/demo.html | 31 + static/usage/v7/select/label-slot/index.md | 13 + .../usage/v7/select/label-slot/javascript.md | 12 + static/usage/v7/select/label-slot/react.md | 22 + static/usage/v7/select/label-slot/vue.md | 23 + static/usage/v7/select/migration/index.md | 2 +- .../v7/select/no-visible-label/angular.md | 11 + .../v7/select/no-visible-label/demo.html | 30 + .../usage/v7/select/no-visible-label/index.md | 13 + .../v7/select/no-visible-label/javascript.md | 11 + .../usage/v7/select/no-visible-label/react.md | 19 + .../usage/v7/select/no-visible-label/vue.md | 22 + .../angular/example_component_html.md | 2 +- .../multiple-selection/demo.html | 154 +- .../multiple-selection/javascript.md | 18 +- .../multiple-selection/vue.md | 28 +- .../angular/example_component_html.md | 2 +- .../using-comparewith/demo.html | 136 +- .../using-comparewith/javascript.md | 14 +- .../using-comparewith/vue.md | 24 +- .../typeahead/angular/angular_types_ts.md | 2 +- .../angular/example_component_html.md | 2 +- .../typeahead/angular/example_component_ts.md | 16 +- .../angular/modal-example_component_html.md | 8 +- .../angular/modal-example_component_ts.md | 31 +- static/usage/v7/select/typeahead/demo.html | 32 +- static/usage/v7/select/typeahead/index.md | 18 +- .../usage/v7/select/typeahead/javascript.md | 26 +- .../v7/select/typeahead/react/main_tsx.md | 20 +- .../select/typeahead/react/react_types_ts.md | 2 +- .../react/typeahead_component_tsx.md | 65 +- .../v7/select/typeahead/vue/example_vue.md | 22 +- .../typeahead/vue/typeahead_component_vue.md | 106 +- .../v7/select/typeahead/vue/vue_types_ts.md | 2 +- .../basic/angular/example_component_ts.md | 5 +- static/usage/v7/skeleton-text/basic/demo.html | 97 +- .../v7/skeleton-text/basic/javascript.md | 1 - static/usage/v7/skeleton-text/basic/react.md | 22 +- static/usage/v7/skeleton-text/basic/vue.md | 14 +- .../angular/example_component_css.md | 2 +- .../theming/css-properties/demo.html | 106 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 19 +- .../theming/css-properties/vue.md | 13 +- static/usage/v7/spinner/basic/demo.html | 130 +- .../usage/v7/spinner/theming/colors/demo.html | 58 +- .../spinner/theming/css-properties/demo.html | 50 +- .../spinner/theming/css-properties/react.md | 4 +- .../resizing/angular/example_component_css.md | 6 + .../angular/example_component_html.md | 3 + .../v7/spinner/theming/resizing/demo.html | 29 + .../v7/spinner/theming/resizing/index.md | 32 + .../v7/spinner/theming/resizing/javascript.md | 10 + .../v7/spinner/theming/resizing/react.md | 9 + .../theming/resizing/react/main_css.md | 6 + .../theming/resizing/react/main_tsx.md | 15 + .../usage/v7/spinner/theming/resizing/vue.md | 21 + static/usage/v7/split-pane/basic/angular.md | 8 +- static/usage/v7/split-pane/basic/demo.html | 70 +- .../usage/v7/split-pane/basic/javascript.md | 8 +- static/usage/v7/split-pane/basic/react.md | 10 +- static/usage/v7/split-pane/basic/vue.md | 12 +- .../angular/example_component_html.md | 8 +- .../theming/css-properties/demo.html | 84 +- .../theming/css-properties/javascript.md | 10 +- .../theming/css-properties/react/main_tsx.md | 10 +- .../split-pane/theming/css-properties/vue.md | 14 +- .../router/angular/example_component_html.md | 2 - static/usage/v7/tabs/router/demo.html | 225 +- static/usage/v7/tabs/router/index.md | 2 +- static/usage/v7/text/basic/angular.md | 8 +- static/usage/v7/text/basic/demo.html | 108 +- static/usage/v7/text/basic/javascript.md | 8 +- static/usage/v7/text/basic/react.md | 13 +- static/usage/v7/text/basic/vue.md | 8 +- static/usage/v7/textarea/autogrow/angular.md | 7 +- static/usage/v7/textarea/autogrow/demo.html | 67 +- .../usage/v7/textarea/autogrow/javascript.md | 7 +- static/usage/v7/textarea/autogrow/vue.md | 7 +- static/usage/v7/textarea/basic/demo.html | 68 +- .../usage/v7/textarea/clear-on-edit/demo.html | 52 +- static/usage/v7/textarea/counter/demo.html | 69 +- static/usage/v7/textarea/fill/demo.html | 68 +- .../usage/v7/textarea/helper-error/demo.html | 111 +- .../v7/textarea/label-placement/demo.html | 74 +- .../usage/v7/textarea/label-slot/angular.md | 9 + static/usage/v7/textarea/label-slot/demo.html | 28 + static/usage/v7/textarea/label-slot/index.md | 8 + .../v7/textarea/label-slot/javascript.md | 9 + static/usage/v7/textarea/label-slot/react.md | 19 + static/usage/v7/textarea/label-slot/vue.md | 20 + static/usage/v7/textarea/migration/index.md | 18 +- .../v7/textarea/no-visible-label/angular.md | 7 + .../v7/textarea/no-visible-label/demo.html | 26 + .../v7/textarea/no-visible-label/index.md | 8 + .../textarea/no-visible-label/javascript.md | 7 + .../v7/textarea/no-visible-label/react.md | 15 + .../usage/v7/textarea/no-visible-label/vue.md | 18 + static/usage/v7/textarea/theming/demo.html | 86 +- .../usage/v7/textarea/theming/javascript.md | 2 +- static/usage/v7/textarea/theming/vue.md | 2 +- static/usage/v7/thumbnail/basic/demo.html | 45 +- static/usage/v7/thumbnail/item/demo.html | 51 +- .../angular/example_component_css.md | 1 - .../angular/example_component_html.md | 1 - .../theming/css-properties/demo.html | 56 +- .../theming/css-properties/react/main_tsx.md | 1 - static/usage/v7/title/basic/demo.html | 41 +- .../collapsible-large-title/basic/demo.html | 97 +- .../collapsible-large-title/buttons/demo.html | 103 +- .../v7/title/theming/css-properties/demo.html | 116 +- .../buttons/angular/example_component_html.md | 6 +- .../buttons/angular/example_component_ts.md | 14 +- static/usage/v7/toast/buttons/demo.html | 116 +- static/usage/v7/toast/buttons/javascript.md | 14 +- static/usage/v7/toast/buttons/react.md | 10 +- static/usage/v7/toast/buttons/vue.md | 30 +- static/usage/v7/toast/icon/angular.md | 2 +- static/usage/v7/toast/icon/demo.html | 50 +- static/usage/v7/toast/icon/index.md | 2 +- static/usage/v7/toast/icon/vue.md | 4 +- static/usage/v7/toast/inline/basic/demo.html | 48 +- static/usage/v7/toast/inline/basic/index.md | 2 +- static/usage/v7/toast/inline/basic/react.md | 10 +- static/usage/v7/toast/inline/basic/vue.md | 9 +- .../usage/v7/toast/inline/is-open/demo.html | 58 +- static/usage/v7/toast/inline/is-open/vue.md | 4 +- .../layout/angular/example_component_html.md | 10 +- .../layout/angular/example_component_ts.md | 4 +- static/usage/v7/toast/layout/demo.html | 79 +- static/usage/v7/toast/layout/javascript.md | 15 +- static/usage/v7/toast/layout/react.md | 4 +- static/usage/v7/toast/layout/vue.md | 8 +- .../angular/example_component_html.md | 2 +- .../angular/example_component_ts.md | 4 +- .../v7/toast/presenting/controller/demo.html | 92 +- .../toast/presenting/controller/javascript.md | 2 +- .../v7/toast/presenting/controller/react.md | 14 +- .../v7/toast/presenting/controller/vue.md | 2 +- .../theming/angular/example_component_html.md | 8 +- .../theming/angular/example_component_ts.md | 4 +- .../v7/toast/theming/angular/global_css.md | 6 +- static/usage/v7/toast/theming/demo.html | 103 +- static/usage/v7/toast/theming/javascript.md | 8 +- .../usage/v7/toast/theming/react/main_css.md | 6 +- .../usage/v7/toast/theming/react/main_tsx.md | 10 +- static/usage/v7/toast/theming/vue.md | 20 +- static/usage/v7/toggle/basic/demo.html | 46 +- static/usage/v7/toggle/basic/react.md | 16 +- static/usage/v7/toggle/justify/demo.html | 68 +- .../usage/v7/toggle/label-placement/demo.html | 44 +- .../usage/v7/toggle/label-placement/react.md | 12 +- static/usage/v7/toggle/list/demo.html | 59 +- static/usage/v7/toggle/on-off/demo.html | 39 +- static/usage/v7/toggle/on-off/react.md | 4 +- .../usage/v7/toggle/theming/colors/demo.html | 55 +- .../toggle/theming/css-properties/demo.html | 96 +- .../theming/css-properties/javascript.md | 12 +- .../v7/toggle/theming/css-properties/vue.md | 12 +- .../toggle/theming/css-shadow-parts/demo.html | 112 +- .../theming/css-shadow-parts/javascript.md | 10 +- .../v7/toggle/theming/css-shadow-parts/vue.md | 10 +- static/usage/v7/toolbar/basic/demo.html | 51 +- static/usage/v7/toolbar/buttons/angular.md | 16 +- static/usage/v7/toolbar/buttons/demo.html | 210 +- static/usage/v7/toolbar/buttons/javascript.md | 16 +- static/usage/v7/toolbar/buttons/react.md | 16 +- static/usage/v7/toolbar/buttons/vue.md | 16 +- .../usage/v7/toolbar/progress-bars/demo.html | 43 +- static/usage/v7/toolbar/searchbars/demo.html | 47 +- static/usage/v7/toolbar/segments/demo.html | 53 +- .../usage/v7/toolbar/theming/colors/demo.html | 110 +- .../toolbar/theming/css-properties/demo.html | 76 +- .../version-v5/angular/navigation.md | 4 - .../angular/your-first-app/5-adding-mobile.md | 2 +- versioned_docs/version-v5/api/action-sheet.md | 169 +- versioned_docs/version-v5/api/alert.md | 172 +- versioned_docs/version-v5/api/app.md | 31 + versioned_docs/version-v5/api/avatar.md | 31 +- versioned_docs/version-v5/api/back-button.md | 132 +- versioned_docs/version-v5/api/backdrop.md | 46 +- versioned_docs/version-v5/api/badge.md | 44 +- versioned_docs/version-v5/api/button.md | 197 +- versioned_docs/version-v5/api/buttons.md | 34 +- versioned_docs/version-v5/api/card-content.md | 34 +- versioned_docs/version-v5/api/card-header.md | 44 +- .../version-v5/api/card-subtitle.md | 39 +- versioned_docs/version-v5/api/card-title.md | 39 +- versioned_docs/version-v5/api/card.md | 127 +- versioned_docs/version-v5/api/checkbox.md | 103 +- versioned_docs/version-v5/api/chip.md | 52 +- versioned_docs/version-v5/api/col.md | 249 +- versioned_docs/version-v5/api/content.md | 125 +- versioned_docs/version-v5/api/datetime.md | 245 +- versioned_docs/version-v5/api/fab-button.md | 186 +- versioned_docs/version-v5/api/fab-list.md | 39 +- versioned_docs/version-v5/api/fab.md | 52 +- versioned_docs/version-v5/api/footer.md | 39 +- versioned_docs/version-v5/api/grid.md | 45 +- versioned_docs/version-v5/api/header.md | 44 +- versioned_docs/version-v5/api/img.md | 45 +- .../version-v5/api/infinite-scroll-content.md | 39 +- .../version-v5/api/infinite-scroll.md | 53 +- versioned_docs/version-v5/api/input.md | 297 +- versioned_docs/version-v5/api/item-divider.md | 55 +- versioned_docs/version-v5/api/item-group.md | 31 + versioned_docs/version-v5/api/item-option.md | 114 +- versioned_docs/version-v5/api/item-options.md | 36 +- versioned_docs/version-v5/api/item-sliding.md | 55 +- versioned_docs/version-v5/api/item.md | 197 +- versioned_docs/version-v5/api/label.md | 44 +- versioned_docs/version-v5/api/list-header.md | 49 +- versioned_docs/version-v5/api/list.md | 47 +- versioned_docs/version-v5/api/loading.md | 164 +- versioned_docs/version-v5/api/menu-button.md | 86 +- versioned_docs/version-v5/api/menu-toggle.md | 39 +- versioned_docs/version-v5/api/menu.md | 138 +- versioned_docs/version-v5/api/modal.md | 167 +- versioned_docs/version-v5/api/nav-link.md | 63 +- versioned_docs/version-v5/api/nav.md | 148 +- versioned_docs/version-v5/api/note.md | 39 +- versioned_docs/version-v5/api/picker.md | 249 +- versioned_docs/version-v5/api/popover.md | 164 +- versioned_docs/version-v5/api/progress-bar.md | 78 +- versioned_docs/version-v5/api/radio-group.md | 46 +- versioned_docs/version-v5/api/radio.md | 75 +- versioned_docs/version-v5/api/range.md | 162 +- .../version-v5/api/refresher-content.md | 63 +- versioned_docs/version-v5/api/refresher.md | 94 +- .../version-v5/api/reorder-group.md | 40 +- versioned_docs/version-v5/api/reorder.md | 31 +- .../version-v5/api/ripple-effect.md | 35 +- .../version-v5/api/route-redirect.md | 41 +- versioned_docs/version-v5/api/route.md | 88 +- versioned_docs/version-v5/api/router-link.md | 68 +- .../version-v5/api/router-outlet.md | 44 +- versioned_docs/version-v5/api/router.md | 48 +- versioned_docs/version-v5/api/row.md | 31 + versioned_docs/version-v5/api/searchbar.md | 219 +- .../version-v5/api/segment-button.md | 93 +- versioned_docs/version-v5/api/segment.md | 74 +- .../version-v5/api/select-option.md | 39 +- versioned_docs/version-v5/api/select.md | 150 +- .../version-v5/api/skeleton-text.md | 36 +- versioned_docs/version-v5/api/slide.md | 31 + versioned_docs/version-v5/api/slides.md | 185 +- versioned_docs/version-v5/api/spinner.md | 51 +- versioned_docs/version-v5/api/split-pane.md | 51 +- versioned_docs/version-v5/api/tab-bar.md | 93 +- versioned_docs/version-v5/api/tab-button.md | 180 +- versioned_docs/version-v5/api/tab.md | 44 +- versioned_docs/version-v5/api/tabs.md | 43 +- versioned_docs/version-v5/api/text.md | 39 +- versioned_docs/version-v5/api/textarea.md | 235 +- versioned_docs/version-v5/api/thumbnail.md | 32 +- versioned_docs/version-v5/api/title.md | 39 +- versioned_docs/version-v5/api/toast.md | 190 +- versioned_docs/version-v5/api/toggle.md | 93 +- versioned_docs/version-v5/api/toolbar.md | 53 +- .../version-v5/api/virtual-scroll.md | 151 +- versioned_docs/version-v5/contributing/coc.md | 4 +- .../contributing/how-to-contribute.md | 2 +- .../version-v5/deployment/app-store.md | 7 +- .../version-v5/developing/android.md | 8 +- versioned_docs/version-v5/developing/tips.md | 1 + versioned_docs/version-v5/index.md | 2 +- versioned_docs/version-v5/intro/next.md | 4 + versioned_docs/version-v5/native/abbyy-rtr.md | 6 +- .../version-v5/native/action-sheet.md | 6 +- versioned_docs/version-v5/native/aes-256.md | 6 +- .../version-v5/native/all-in-one-sdk.md | 6 +- .../version-v5/native/analytics-firebase.md | 6 +- .../version-v5/native/android-exoplayer.md | 6 +- .../version-v5/native/android-full-screen.md | 7 +- .../version-v5/native/android-notch.md | 6 +- .../version-v5/native/android-permissions.md | 8 +- .../version-v5/native/app-availability.md | 7 +- .../version-v5/native/app-center-analytics.md | 8 +- .../version-v5/native/app-center-crashes.md | 7 +- .../version-v5/native/app-center-push.md | 7 +- .../version-v5/native/app-preferences.md | 7 +- .../version-v5/native/app-version.md | 6 +- .../version-v5/native/apple-wallet.md | 3 +- versioned_docs/version-v5/native/appsflyer.md | 6 +- .../version-v5/native/background-fetch.md | 17 +- .../native/background-geolocation.md | 8 +- .../version-v5/native/background-mode.md | 7 +- .../version-v5/native/background-upload.md | 7 +- .../version-v5/native/barcode-scanner.md | 7 +- .../version-v5/native/battery-status.md | 7 +- .../version-v5/native/biometric-wrapper.md | 6 +- .../version-v5/native/bluetooth-le.md | 6 +- .../version-v5/native/bluetooth-serial.md | 17 +- .../version-v5/native/broadcaster.md | 6 +- .../version-v5/native/build-info.md | 3 +- .../version-v5/native/call-directory.md | 7 +- .../version-v5/native/camera-preview.md | 7 +- .../version-v5/native/cloud-settings.md | 7 +- versioned_docs/version-v5/native/code-push.md | 3 +- .../version-v5/native/custom-uisdk.md | 6 +- .../version-v5/native/device-accounts.md | 6 +- .../version-v5/native/device-motion.md | 6 +- .../version-v5/native/device-orientation.md | 7 +- .../version-v5/native/dfu-update.md | 6 +- .../version-v5/native/diagnostic.md | 6 +- .../version-v5/native/document-picker.md | 9 +- .../version-v5/native/document-scanner.md | 17 +- .../version-v5/native/document-viewer.md | 7 +- .../version-v5/native/email-composer.md | 7 +- versioned_docs/version-v5/native/facebook.md | 6 +- versioned_docs/version-v5/native/fcm.md | 7 +- .../version-v5/native/file-opener.md | 6 +- versioned_docs/version-v5/native/file-path.md | 3 +- .../version-v5/native/file-transfer.md | 6 +- .../version-v5/native/firebase-analytics.md | 7 +- .../native/firebase-authentication.md | 9 +- .../version-v5/native/firebase-config.md | 7 +- .../version-v5/native/firebase-crash.md | 7 +- .../version-v5/native/firebase-crashlytics.md | 8 +- .../native/firebase-dynamic-links.md | 8 +- .../version-v5/native/firebase-messaging.md | 7 +- .../version-v5/native/firebase-vision.md | 17 +- .../version-v5/native/firebase-x.md | 3 +- .../version-v5/native/flashlight.md | 6 +- .../version-v5/native/foreground-service.md | 7 +- .../version-v5/native/gao-de-location.md | 7 +- .../version-v5/native/ge-tui-sdk-plugin.md | 6 +- .../version-v5/native/geolocation.md | 6 +- .../version-v5/native/globalization.md | 6 +- .../version-v5/native/google-analytics.md | 17 +- .../version-v5/native/google-nearby.md | 6 +- .../version-v5/native/google-plus.md | 6 +- .../version-v5/native/health-kit.md | 6 +- versioned_docs/version-v5/native/http.md | 3 +- .../version-v5/native/image-picker.md | 7 +- .../version-v5/native/in-app-browser.md | 6 +- .../version-v5/native/in-app-purchase-2.md | 6 +- .../version-v5/native/in-app-review.md | 6 +- versioned_docs/version-v5/native/instagram.md | 3 +- .../version-v5/native/ionic-webview.md | 6 +- .../ios-aswebauthenticationsession-api.md | 8 +- versioned_docs/version-v5/native/keyboard.md | 6 +- versioned_docs/version-v5/native/keychain.md | 6 +- .../version-v5/native/kommunicate.md | 6 +- .../version-v5/native/launch-navigator.md | 8 +- .../version-v5/native/launch-review.md | 3 +- .../version-v5/native/line-login.md | 6 +- .../version-v5/native/local-notifications.md | 8 +- .../version-v5/native/location-accuracy.md | 8 +- .../version-v5/native/lottie-splash-screen.md | 8 +- .../version-v5/native/media-capture.md | 6 +- .../version-v5/native/mlkit-translate.md | 7 +- .../version-v5/native/mobile-messaging.md | 7 +- .../native/multiple-document-picker.md | 9 +- .../version-v5/native/music-controls.md | 7 +- .../version-v5/native/native-audio.md | 6 +- .../version-v5/native/native-geocoder.md | 7 +- .../version-v5/native/native-keyboard.md | 7 +- .../native/native-page-transitions.md | 9 +- .../version-v5/native/native-storage.md | 6 +- .../version-v5/native/network-interface.md | 7 +- versioned_docs/version-v5/native/network.md | 6 +- versioned_docs/version-v5/native/onesignal.md | 3 +- .../version-v5/native/open-native-settings.md | 7 +- .../version-v5/native/pdf-generator.md | 3 +- .../version-v5/native/photo-library.md | 6 +- .../version-v5/native/photo-viewer.md | 6 +- .../version-v5/native/pspdfkit-cordova.md | 3 +- versioned_docs/version-v5/native/purchases.md | 6 +- .../version-v5/native/pushape-push.md | 3 +- .../native/safari-view-controller.md | 8 +- .../version-v5/native/screen-orientation.md | 7 +- .../version-v5/native/service-discovery.md | 6 +- .../version-v5/native/sign-in-with-apple.md | 7 +- versioned_docs/version-v5/native/smartlook.md | 9 +- .../version-v5/native/sms-retriever.md | 7 +- .../version-v5/native/social-sharing.md | 7 +- .../version-v5/native/speech-recognition.md | 7 +- .../version-v5/native/spinner-dialog.md | 7 +- .../version-v5/native/splash-screen.md | 6 +- .../version-v5/native/spotify-auth.md | 3 +- .../version-v5/native/sqlite-db-copy.md | 6 +- .../version-v5/native/sqlite-porter.md | 8 +- versioned_docs/version-v5/native/star-prnt.md | 3 +- .../version-v5/native/status-bar.md | 3 +- .../version-v5/native/streaming-media.md | 7 +- .../version-v5/native/taptic-engine.md | 6 +- .../version-v5/native/tealium-adidentifier.md | 7 +- .../native/tealium-installreferrer.md | 8 +- .../version-v5/native/theme-detection.md | 7 +- .../version-v5/native/three-dee-touch.md | 6 +- .../version-v5/native/unvired-cordova-sdk.md | 8 +- .../version-v5/native/urbanairship.md | 3 +- .../version-v5/native/usabilla-cordova-sdk.md | 6 +- versioned_docs/version-v5/native/vibration.md | 3 +- .../version-v5/native/video-editor.md | 6 +- .../version-v5/native/video-player.md | 8 +- .../version-v5/native/web-intent.md | 7 +- .../version-v5/native/web-server.md | 3 +- .../version-v5/native/web-socket-server.md | 7 +- versioned_docs/version-v5/native/webengage.md | 3 +- .../version-v5/native/wheel-selector.md | 7 +- .../version-v5/native/wifi-wizard-2.md | 6 +- .../version-v5/native/wonderpush.md | 3 +- .../version-v5/native/youtube-video-player.md | 8 +- versioned_docs/version-v5/react/overview.md | 45 - .../version-v5/reference/glossary.md | 10 +- .../version-v5/reference/migration.md | 301 +- versioned_docs/version-v5/studio.md | 31 - versioned_docs/version-v5/studio/assets.md | 17 - versioned_docs/version-v5/studio/code.md | 40 - versioned_docs/version-v5/studio/designer.md | 179 - versioned_docs/version-v5/studio/faq.md | 23 - .../studio/guides/routing-and-navigation.md | 29 - .../guides/using-native-functionality.md | 17 - versioned_docs/version-v5/studio/running.md | 66 - versioned_docs/version-v5/studio/settings.md | 68 - .../version-v5/studio/setup/installation.md | 17 - .../version-v5/studio/setup/native.md | 13 - versioned_docs/version-v5/studio/start.md | 13 - versioned_docs/version-v5/studio/support.md | 15 - versioned_docs/version-v5/studio/terminal.md | 36 - versioned_docs/version-v5/studio/theming.md | 15 - .../version-v5/theming/dark-mode.md | 4 +- versioned_docs/version-v5/vue/quickstart.md | 14 +- .../version-v6/angular/navigation.md | 20 +- versioned_docs/version-v6/angular/slides.md | 25 +- versioned_docs/version-v6/angular/testing.md | 6 +- .../version-v6/angular/virtual-scroll.md | 2 +- .../angular/your-first-app/3-saving-photos.md | 2 +- .../your-first-app/4-loading-photos.md | 2 +- .../angular/your-first-app/5-adding-mobile.md | 58 +- versioned_docs/version-v6/api/icon.md | 2 +- versioned_docs/version-v6/api/nav.md | 6 +- versioned_docs/version-v6/api/router-link.md | 11 +- versioned_docs/version-v6/api/slide.md | 2 +- versioned_docs/version-v6/api/slides.md | 26 +- versioned_docs/version-v6/api/tab-bar.md | 40 +- versioned_docs/version-v6/api/tab-button.md | 62 +- versioned_docs/version-v6/api/tab.md | 2 +- .../version-v6/api/virtual-scroll.md | 10 +- versioned_docs/version-v6/contributing/coc.md | 4 +- .../version-v6/deployment/app-store.md | 7 +- .../version-v6/developing/android.md | 18 +- .../version-v6/developing/config.md | 98 +- .../developing/config/global/index.md | 16 +- .../developing/config/per-component/index.md | 22 +- .../config/per-platform-fallback/index.md | 24 +- .../config/per-platform-overrides/index.md | 8 +- .../developing/config/per-platform/index.md | 7 +- .../developing/hardware-back-button.md | 8 +- versioned_docs/version-v6/developing/tips.md | 1 + versioned_docs/version-v6/intro/next.md | 4 + .../version-v6/intro/upgrading-to-ionic-6.md | 110 +- versioned_docs/version-v6/native-faq.md | 9 +- versioned_docs/version-v6/native.md | 8 +- versioned_docs/version-v6/react/navigation.md | 55 +- versioned_docs/version-v6/react/overview.md | 45 - versioned_docs/version-v6/react/quickstart.md | 4 +- versioned_docs/version-v6/react/slides.md | 4 +- .../version-v6/react/virtual-scroll.md | 6 +- .../react/your-first-app/2-taking-photos.md | 2 +- .../react/your-first-app/3-saving-photos.md | 2 +- .../version-v6/reference/browser-support.md | 1 - .../version-v6/reference/glossary.md | 4 +- .../version-v6/reference/migration.md | 303 +- .../version-v6/reference/support.md | 16 +- versioned_docs/version-v6/studio.md | 8 +- versioned_docs/version-v6/studio/assets.md | 17 - versioned_docs/version-v6/studio/code.md | 40 - versioned_docs/version-v6/studio/designer.md | 179 - versioned_docs/version-v6/studio/faq.md | 23 - .../studio/guides/routing-and-navigation.md | 29 - .../guides/using-native-functionality.md | 17 - versioned_docs/version-v6/studio/running.md | 66 - versioned_docs/version-v6/studio/settings.md | 68 - .../version-v6/studio/setup/installation.md | 17 - .../version-v6/studio/setup/native.md | 13 - versioned_docs/version-v6/studio/start.md | 13 - versioned_docs/version-v6/studio/support.md | 15 - versioned_docs/version-v6/studio/terminal.md | 36 - versioned_docs/version-v6/studio/theming.md | 15 - .../version-v6/theming/dark-mode.md | 4 +- versioned_docs/version-v6/vue/navigation.md | 24 +- versioned_docs/version-v6/vue/overview.md | 1 + versioned_docs/version-v6/vue/quickstart.md | 48 +- versioned_docs/version-v6/vue/slides.md | 6 +- .../version-v6/vue/virtual-scroll.md | 2 +- .../vue/your-first-app/2-taking-photos.md | 2 +- .../vue/your-first-app/3-saving-photos.md | 2 +- 3766 files changed, 64592 insertions(+), 72239 deletions(-) create mode 100644 .github/workflows/CI.yml delete mode 100644 .prettierrc.js create mode 100644 _templates/README.md create mode 100644 _templates/playground/new/angular.md.ejs.t create mode 100644 _templates/playground/new/angular_example_component_css.md.ejs.t create mode 100644 _templates/playground/new/angular_example_component_ts.md.ejs.t create mode 100644 _templates/playground/new/demo.html.ejs.t create mode 100644 _templates/playground/new/index.js create mode 100644 _templates/playground/new/index.md.ejs.t create mode 100644 _templates/playground/new/javascript.md.ejs.t create mode 100644 _templates/playground/new/react.md.ejs.t create mode 100644 _templates/playground/new/react_main_css.md.ejs.t create mode 100644 _templates/playground/new/vue.md.ejs.t delete mode 100644 docs/studio/assets.md delete mode 100644 docs/studio/code.md delete mode 100644 docs/studio/designer.md delete mode 100644 docs/studio/faq.md delete mode 100644 docs/studio/guides/routing-and-navigation.md delete mode 100644 docs/studio/guides/using-native-functionality.md delete mode 100644 docs/studio/running.md delete mode 100644 docs/studio/settings.md delete mode 100644 docs/studio/setup/native.md delete mode 100644 docs/studio/start.md delete mode 100644 docs/studio/support.md delete mode 100644 docs/studio/terminal.md delete mode 100644 docs/studio/theming.md create mode 100644 renovate.json rename scripts/{api-ja.js => _api-ja.js} (97%) rename scripts/{api.js => _api.js} (98%) delete mode 100644 scripts/bak/build-data/release-notes.ts create mode 100644 src/components/page/intro/next/DeveloperExperts/index.module.scss create mode 100644 src/components/page/intro/next/DeveloperExperts/index.tsx create mode 100644 src/translate/.detection/cli/live-update-add.json create mode 100644 src/translate/.detection/cli/live-update-add.readme.md create mode 100644 src/translate/.detection/cli/live-update-configure.json create mode 100644 src/translate/.detection/cli/live-update-configure.readme.md create mode 100644 src/translate/.detection/cli/live-update-manifest.json create mode 100644 src/translate/.detection/cli/live-update-manifest.readme.md create mode 100644 src/translate/cli/live-update-add.json create mode 100644 src/translate/cli/live-update-add.readme.md create mode 100644 src/translate/cli/live-update-configure.json create mode 100644 src/translate/cli/live-update-configure.readme.md create mode 100644 src/translate/cli/live-update-manifest.json create mode 100644 src/translate/cli/live-update-manifest.readme.md create mode 100644 static/usage/v7/animations/basic/angular/example_component_html.md create mode 100644 static/usage/v7/animations/basic/angular/example_component_ts.md create mode 100644 static/usage/v7/animations/basic/demo.html create mode 100644 static/usage/v7/animations/basic/index.md create mode 100644 static/usage/v7/animations/basic/javascript.md create mode 100644 static/usage/v7/animations/basic/react.md create mode 100644 static/usage/v7/animations/basic/vue.md create mode 100644 static/usage/v7/animations/before-and-after-hooks/angular/example_component_html.md create mode 100644 static/usage/v7/animations/before-and-after-hooks/angular/example_component_ts.md create mode 100644 static/usage/v7/animations/before-and-after-hooks/demo.html create mode 100644 static/usage/v7/animations/before-and-after-hooks/index.md create mode 100644 static/usage/v7/animations/before-and-after-hooks/javascript.md create mode 100644 static/usage/v7/animations/before-and-after-hooks/react.md create mode 100644 static/usage/v7/animations/before-and-after-hooks/vue.md create mode 100644 static/usage/v7/animations/chain/angular/example_component_html.md create mode 100644 static/usage/v7/animations/chain/angular/example_component_ts.md create mode 100644 static/usage/v7/animations/chain/demo.html create mode 100644 static/usage/v7/animations/chain/index.md create mode 100644 static/usage/v7/animations/chain/javascript.md create mode 100644 static/usage/v7/animations/chain/react.md create mode 100644 static/usage/v7/animations/chain/vue.md create mode 100644 static/usage/v7/animations/gesture/angular/example_component_css.md create mode 100644 static/usage/v7/animations/gesture/angular/example_component_html.md create mode 100644 static/usage/v7/animations/gesture/angular/example_component_ts.md create mode 100644 static/usage/v7/animations/gesture/demo.html create mode 100644 static/usage/v7/animations/gesture/index.md create mode 100644 static/usage/v7/animations/gesture/javascript.md create mode 100644 static/usage/v7/animations/gesture/react/main_css.md create mode 100644 static/usage/v7/animations/gesture/react/main_tsx.md create mode 100644 static/usage/v7/animations/gesture/vue.md create mode 100644 static/usage/v7/animations/group/angular/example_component_html.md create mode 100644 static/usage/v7/animations/group/angular/example_component_ts.md create mode 100644 static/usage/v7/animations/group/demo.html create mode 100644 static/usage/v7/animations/group/index.md create mode 100644 static/usage/v7/animations/group/javascript.md create mode 100644 static/usage/v7/animations/group/react.md create mode 100644 static/usage/v7/animations/group/vue.md create mode 100644 static/usage/v7/animations/keyframes/angular/example_component_html.md create mode 100644 static/usage/v7/animations/keyframes/angular/example_component_ts.md create mode 100644 static/usage/v7/animations/keyframes/demo.html create mode 100644 static/usage/v7/animations/keyframes/index.md create mode 100644 static/usage/v7/animations/keyframes/javascript.md create mode 100644 static/usage/v7/animations/keyframes/react.md create mode 100644 static/usage/v7/animations/keyframes/vue.md create mode 100644 static/usage/v7/animations/modal-override/angular/example_component_html.md create mode 100644 static/usage/v7/animations/modal-override/angular/example_component_ts.md create mode 100644 static/usage/v7/animations/modal-override/demo.html create mode 100644 static/usage/v7/animations/modal-override/index.md create mode 100644 static/usage/v7/animations/modal-override/javascript.md create mode 100644 static/usage/v7/animations/modal-override/react.md create mode 100644 static/usage/v7/animations/modal-override/vue.md create mode 100644 static/usage/v7/animations/preference-based/angular/example_component_css.md create mode 100644 static/usage/v7/animations/preference-based/angular/example_component_html.md create mode 100644 static/usage/v7/animations/preference-based/angular/example_component_ts.md create mode 100644 static/usage/v7/animations/preference-based/demo.html create mode 100644 static/usage/v7/animations/preference-based/index.md create mode 100644 static/usage/v7/animations/preference-based/javascript.md create mode 100644 static/usage/v7/animations/preference-based/react/main_css.md create mode 100644 static/usage/v7/animations/preference-based/react/main_tsx.md create mode 100644 static/usage/v7/animations/preference-based/vue.md create mode 100644 static/usage/v7/datetime/styling/global-theming/angular/example_component_html.md create mode 100644 static/usage/v7/datetime/styling/global-theming/angular/global_css.md create mode 100644 static/usage/v7/datetime/styling/global-theming/demo.html create mode 100644 static/usage/v7/datetime/styling/global-theming/index.md create mode 100644 static/usage/v7/datetime/styling/global-theming/javascript.md create mode 100644 static/usage/v7/datetime/styling/global-theming/react/main_css.md create mode 100644 static/usage/v7/datetime/styling/global-theming/react/main_tsx.md create mode 100644 static/usage/v7/datetime/styling/global-theming/vue.md create mode 100644 static/usage/v7/datetime/styling/wheel-styling/angular/example_component_css.md create mode 100644 static/usage/v7/datetime/styling/wheel-styling/angular/example_component_html.md create mode 100644 static/usage/v7/datetime/styling/wheel-styling/demo.html create mode 100644 static/usage/v7/datetime/styling/wheel-styling/index.md create mode 100644 static/usage/v7/datetime/styling/wheel-styling/javascript.md create mode 100644 static/usage/v7/datetime/styling/wheel-styling/react/main_css.md create mode 100644 static/usage/v7/datetime/styling/wheel-styling/react/main_tsx.md create mode 100644 static/usage/v7/datetime/styling/wheel-styling/vue.md create mode 100644 static/usage/v7/gestures/basic/angular/example_component_css.md create mode 100644 static/usage/v7/gestures/basic/angular/example_component_html.md create mode 100644 static/usage/v7/gestures/basic/angular/example_component_ts.md create mode 100644 static/usage/v7/gestures/basic/demo.html create mode 100644 static/usage/v7/gestures/basic/index.md create mode 100644 static/usage/v7/gestures/basic/javascript.md create mode 100644 static/usage/v7/gestures/basic/react/main_css.md create mode 100644 static/usage/v7/gestures/basic/react/main_tsx.md create mode 100644 static/usage/v7/gestures/basic/vue.md create mode 100644 static/usage/v7/gestures/double-click/angular/example_component_css.md create mode 100644 static/usage/v7/gestures/double-click/angular/example_component_html.md create mode 100644 static/usage/v7/gestures/double-click/angular/example_component_ts.md create mode 100644 static/usage/v7/gestures/double-click/demo.html create mode 100644 static/usage/v7/gestures/double-click/index.md create mode 100644 static/usage/v7/gestures/double-click/javascript.md create mode 100644 static/usage/v7/gestures/double-click/react/main_css.md create mode 100644 static/usage/v7/gestures/double-click/react/main_tsx.md create mode 100644 static/usage/v7/gestures/double-click/vue.md create mode 100644 static/usage/v7/input/label-slot/angular.md create mode 100644 static/usage/v7/input/label-slot/demo.html create mode 100644 static/usage/v7/input/label-slot/index.md create mode 100644 static/usage/v7/input/label-slot/javascript.md create mode 100644 static/usage/v7/input/label-slot/react.md create mode 100644 static/usage/v7/input/label-slot/vue.md create mode 100644 static/usage/v7/input/mask/angular/app_module_ts.md create mode 100644 static/usage/v7/input/mask/angular/example_component_html.md create mode 100644 static/usage/v7/input/mask/angular/example_component_ts.md create mode 100644 static/usage/v7/input/mask/demo.html create mode 100644 static/usage/v7/input/mask/index.md create mode 100644 static/usage/v7/input/mask/javascript/index_html.md create mode 100644 static/usage/v7/input/mask/javascript/index_ts.md create mode 100644 static/usage/v7/input/mask/react.md create mode 100644 static/usage/v7/input/mask/vue.md create mode 100644 static/usage/v7/input/no-visible-label/angular.md create mode 100644 static/usage/v7/input/no-visible-label/demo.html create mode 100644 static/usage/v7/input/no-visible-label/index.md create mode 100644 static/usage/v7/input/no-visible-label/javascript.md create mode 100644 static/usage/v7/input/no-visible-label/react.md create mode 100644 static/usage/v7/input/no-visible-label/vue.md create mode 100644 static/usage/v7/menu/multiple/angular/example_component_html.md create mode 100644 static/usage/v7/menu/multiple/angular/example_component_ts.md create mode 100644 static/usage/v7/menu/multiple/demo.html create mode 100644 static/usage/v7/menu/multiple/index.md create mode 100644 static/usage/v7/menu/multiple/javascript.md create mode 100644 static/usage/v7/menu/multiple/react.md create mode 100644 static/usage/v7/menu/multiple/vue.md create mode 100644 static/usage/v7/menu/sides/angular.md create mode 100644 static/usage/v7/menu/sides/demo.html create mode 100644 static/usage/v7/menu/sides/index.md create mode 100644 static/usage/v7/menu/sides/javascript.md create mode 100644 static/usage/v7/menu/sides/react.md create mode 100644 static/usage/v7/menu/sides/vue.md create mode 100644 static/usage/v7/modal/sheet/auto-height/angular/example_component_css.md create mode 100644 static/usage/v7/modal/sheet/auto-height/angular/example_component_html.md create mode 100644 static/usage/v7/modal/sheet/auto-height/demo.html create mode 100644 static/usage/v7/modal/sheet/auto-height/index.md create mode 100644 static/usage/v7/modal/sheet/auto-height/javascript.md create mode 100644 static/usage/v7/modal/sheet/auto-height/react/main_css.md create mode 100644 static/usage/v7/modal/sheet/auto-height/react/main_tsx.md create mode 100644 static/usage/v7/modal/sheet/auto-height/vue.md create mode 100644 static/usage/v7/range/label-slot/angular.md create mode 100644 static/usage/v7/range/label-slot/demo.html create mode 100644 static/usage/v7/range/label-slot/index.md create mode 100644 static/usage/v7/range/label-slot/javascript.md create mode 100644 static/usage/v7/range/label-slot/react.md create mode 100644 static/usage/v7/range/label-slot/vue.md create mode 100644 static/usage/v7/range/no-visible-label/angular.md create mode 100644 static/usage/v7/range/no-visible-label/demo.html create mode 100644 static/usage/v7/range/no-visible-label/index.md create mode 100644 static/usage/v7/range/no-visible-label/javascript.md create mode 100644 static/usage/v7/range/no-visible-label/react.md create mode 100644 static/usage/v7/range/no-visible-label/vue.md create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/angular.md create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/demo.html create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/index.md create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/javascript.md create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/react.md create mode 100644 static/usage/v7/select/customization/custom-toggle-icons/vue.md create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_css.md create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_html.md create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/angular/example_component_ts.md create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/demo.html create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/index.md create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/javascript.md create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/react/main_css.md create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/react/main_tsx.md create mode 100644 static/usage/v7/select/customization/icon-flip-behavior/vue.md create mode 100644 static/usage/v7/select/label-slot/angular.md create mode 100644 static/usage/v7/select/label-slot/demo.html create mode 100644 static/usage/v7/select/label-slot/index.md create mode 100644 static/usage/v7/select/label-slot/javascript.md create mode 100644 static/usage/v7/select/label-slot/react.md create mode 100644 static/usage/v7/select/label-slot/vue.md create mode 100644 static/usage/v7/select/no-visible-label/angular.md create mode 100644 static/usage/v7/select/no-visible-label/demo.html create mode 100644 static/usage/v7/select/no-visible-label/index.md create mode 100644 static/usage/v7/select/no-visible-label/javascript.md create mode 100644 static/usage/v7/select/no-visible-label/react.md create mode 100644 static/usage/v7/select/no-visible-label/vue.md create mode 100644 static/usage/v7/spinner/theming/resizing/angular/example_component_css.md create mode 100644 static/usage/v7/spinner/theming/resizing/angular/example_component_html.md create mode 100644 static/usage/v7/spinner/theming/resizing/demo.html create mode 100644 static/usage/v7/spinner/theming/resizing/index.md create mode 100644 static/usage/v7/spinner/theming/resizing/javascript.md create mode 100644 static/usage/v7/spinner/theming/resizing/react.md create mode 100644 static/usage/v7/spinner/theming/resizing/react/main_css.md create mode 100644 static/usage/v7/spinner/theming/resizing/react/main_tsx.md create mode 100644 static/usage/v7/spinner/theming/resizing/vue.md create mode 100644 static/usage/v7/textarea/label-slot/angular.md create mode 100644 static/usage/v7/textarea/label-slot/demo.html create mode 100644 static/usage/v7/textarea/label-slot/index.md create mode 100644 static/usage/v7/textarea/label-slot/javascript.md create mode 100644 static/usage/v7/textarea/label-slot/react.md create mode 100644 static/usage/v7/textarea/label-slot/vue.md create mode 100644 static/usage/v7/textarea/no-visible-label/angular.md create mode 100644 static/usage/v7/textarea/no-visible-label/demo.html create mode 100644 static/usage/v7/textarea/no-visible-label/index.md create mode 100644 static/usage/v7/textarea/no-visible-label/javascript.md create mode 100644 static/usage/v7/textarea/no-visible-label/react.md create mode 100644 static/usage/v7/textarea/no-visible-label/vue.md delete mode 100644 versioned_docs/version-v5/react/overview.md delete mode 100644 versioned_docs/version-v5/studio.md delete mode 100644 versioned_docs/version-v5/studio/assets.md delete mode 100644 versioned_docs/version-v5/studio/code.md delete mode 100644 versioned_docs/version-v5/studio/designer.md delete mode 100644 versioned_docs/version-v5/studio/faq.md delete mode 100644 versioned_docs/version-v5/studio/guides/routing-and-navigation.md delete mode 100644 versioned_docs/version-v5/studio/guides/using-native-functionality.md delete mode 100644 versioned_docs/version-v5/studio/running.md delete mode 100644 versioned_docs/version-v5/studio/settings.md delete mode 100644 versioned_docs/version-v5/studio/setup/installation.md delete mode 100644 versioned_docs/version-v5/studio/setup/native.md delete mode 100644 versioned_docs/version-v5/studio/start.md delete mode 100644 versioned_docs/version-v5/studio/support.md delete mode 100644 versioned_docs/version-v5/studio/terminal.md delete mode 100644 versioned_docs/version-v5/studio/theming.md delete mode 100644 versioned_docs/version-v6/react/overview.md delete mode 100644 versioned_docs/version-v6/studio/assets.md delete mode 100644 versioned_docs/version-v6/studio/code.md delete mode 100644 versioned_docs/version-v6/studio/designer.md delete mode 100644 versioned_docs/version-v6/studio/faq.md delete mode 100644 versioned_docs/version-v6/studio/guides/routing-and-navigation.md delete mode 100644 versioned_docs/version-v6/studio/guides/using-native-functionality.md delete mode 100644 versioned_docs/version-v6/studio/running.md delete mode 100644 versioned_docs/version-v6/studio/settings.md delete mode 100644 versioned_docs/version-v6/studio/setup/installation.md delete mode 100644 versioned_docs/version-v6/studio/setup/native.md delete mode 100644 versioned_docs/version-v6/studio/start.md delete mode 100644 versioned_docs/version-v6/studio/support.md delete mode 100644 versioned_docs/version-v6/studio/terminal.md delete mode 100644 versioned_docs/version-v6/studio/theming.md diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml new file mode 100644 index 00000000000..ced06132a9e --- /dev/null +++ b/.github/workflows/CI.yml @@ -0,0 +1,33 @@ +# GitHub Actions docs +# https://help.github.com/en/articles/about-github-actions +# https://help.github.com/en/articles/workflow-syntax-for-github-actions + +name: Install Dependencies, Lint + +on: [pull_request] + +jobs: + test: + name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }} + runs-on: ${{ matrix.os }} + strategy: + matrix: + node_version: [16] + os: [windows-latest, macOS-latest] + + steps: + - uses: actions/checkout@v1 + - name: Use Node.js ${{ matrix.node_version }} + uses: actions/setup-node@v1 + with: + node-version: ${{ matrix.node_version }} + - name: Install Dependencies + run: npm ci --legacy-peer-deps + - name: Lint + run: npm run lint + # Lint changes should be pushed + # to the branch before the branch + # is merge eligible. + - name: Check Diff + run: git diff --exit-code + shell: bash diff --git a/.prettierignore b/.prettierignore index 85fee6b4234..c9e0e72442c 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,13 +1,15 @@ src/theme/DocItem src/theme/DocPage legacy-stencil-components -node_modules scripts/bak -src/styles.bak -src/pages + docs/api docs/native docs/cli/commands +static/code/stackblitz + .docusaurus -.github \ No newline at end of file +.github +build +node_modules diff --git a/.prettierrc.js b/.prettierrc.js deleted file mode 100644 index 4122fc68e28..00000000000 --- a/.prettierrc.js +++ /dev/null @@ -1,11 +0,0 @@ -module.exports = { - ...require("@ionic/prettier-config"), - overrides: [ - { - files: "*.md", - options: { - "parser": "mdx" - } - } - ] -}; \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 18349950c0e..327ea5004e8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -54,8 +54,9 @@ Ionic's documentation is built using [Docusaurus](https://docusaurus.io/). The c - `components/` - styles split out into the components they target - `static/` - `demos/` - self-contained demos, optionally presented by pages via `demoUrl` YAML frontmatter + - `usage/` - playgrounds that can be created by running `npm run playground:new` [(docs)](_templates/README.md#new-playground-template) - `versioned_docs/` - versions of the docs created by the docusaurus versioning command -- `versioned_sitebars/` - versions of the docs sidebars created by the docusaurus versioning command +- `versioned_sidebars/` - versions of the docs sidebars created by the docusaurus versioning command ## Authoring Content @@ -84,7 +85,7 @@ The Ionic docs have been translated into Japanese and are in the process of bein We use Crowdin for our translation service. You can participate in the translation effort on the [Ionic Crowdin page](https://crowdin.com/project/ionic-docs). -_Please submit translation issues to the Crowdin page and not the Ionic Docs GitHub repo_ +_Please submit translation issues to the Crowdin page and not the Ionic Docs GitHub repo._ The Japanese translation of the docs were built by an independent team, lead by [rdlabo](https://github.com/rdlabo) and can be found and contributed to on the [ionic-jp group's `ionic-docs` project page](https://github.com/ionic-jp/ionic-docs). diff --git a/_templates/README.md b/_templates/README.md new file mode 100644 index 00000000000..0e91373099f --- /dev/null +++ b/_templates/README.md @@ -0,0 +1,32 @@ +# Hygen templates + +The templates in this directory are intended to be used with [hygen](https://www.hygen.io/) to generate boilerplate files. Check out [the root package.json](../package.json) to see if there are any custom commands to use them (e.g. `npm run playground:new`). You can also run e.g. `hygen playground new` to use a generator. + +Some helpful docs links for updating/creating templates: + +- [enquirer](https://github.com/enquirer/enquirer#toggle-prompt) for building command line prompts +- [inflection](https://www.hygen.io/docs/templates#helpers-and-inflections) and [change case](https://www.hygen.io/docs/templates#change-case-helpers) for e.g. changing the case of variables submitted via the prompts + +# New playground template + +## Generation + +To create a new playground, run `npm run playground:new`. This will walk you through some prompts to decide what files for the generator to create for the playground, and what their paths should be. + +The path defaults to `basic`. If there is already a basic playground, you'll want to input a different path for the playground. + +The CSS option will add extra files if you need to include custom CSS in your playground. + +If you need a component for multiple versions of Ionic Framework, you (currently) need to run the generator once for each version. + +## Usage + +Once you've generated your playground, you need to add it to the main markdown file in the docs (e.g. [docs/api/button.md](../docs/api/button.md)) by doing something similar to the following example: + +``` +## Feature + +import Feature from '@site/static/usage/v7/button/feature/index.md'; + + +``` diff --git a/_templates/playground/new/angular.md.ejs.t b/_templates/playground/new/angular.md.ejs.t new file mode 100644 index 00000000000..ab2bc1a81d7 --- /dev/null +++ b/_templates/playground/new/angular.md.ejs.t @@ -0,0 +1,7 @@ +--- +# this file's location depends on whether or not the css option or angular_ts option is selected via the prompt +to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/${(css || angular_ts) ? 'angular/example_component_html.md' : 'angular.md'}` %>" +--- +```html +<<%= name %>>> +``` diff --git a/_templates/playground/new/angular_example_component_css.md.ejs.t b/_templates/playground/new/angular_example_component_css.md.ejs.t new file mode 100644 index 00000000000..233d88bd9d0 --- /dev/null +++ b/_templates/playground/new/angular_example_component_css.md.ejs.t @@ -0,0 +1,9 @@ +--- +# this file only gets generated if `css` (from the command line prompt) is true +to: "<%= css ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/angular/example_component_css.md` : null %>" +--- +```css +<%= name %> { + /* styles go here */ +} +``` diff --git a/_templates/playground/new/angular_example_component_ts.md.ejs.t b/_templates/playground/new/angular_example_component_ts.md.ejs.t new file mode 100644 index 00000000000..e6132304d6f --- /dev/null +++ b/_templates/playground/new/angular_example_component_ts.md.ejs.t @@ -0,0 +1,17 @@ +--- +# this file only gets generated if `angular_ts` (from the command line prompt) is true +to: "<%= angular_ts ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/angular/example_component_ts.md` : null %>" +--- +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +<% if (css){ -%> + styleUrls: ['./example.component.css'], +<% } -%> +}) +export class ExampleComponent { +} +``` diff --git a/_templates/playground/new/demo.html.ejs.t b/_templates/playground/new/demo.html.ejs.t new file mode 100644 index 00000000000..b8ea2dff630 --- /dev/null +++ b/_templates/playground/new/demo.html.ejs.t @@ -0,0 +1,32 @@ +--- +arbitrary: <% nameWithoutIon = name.replace('ion-', ''); numberOfAncestors = (path.match(/\//g) || []).length; directoryChanges = '../'.repeat(numberOfAncestors) %> +to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>" +--- + + + + + + <%= h.changeCase.titleCase(nameWithoutIon) %> + + + + <% if (css){ %> + + <% } %> + + + + + +
+ <<%= name %>>> +
+ + + + diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js new file mode 100644 index 00000000000..91d3acf0134 --- /dev/null +++ b/_templates/playground/new/index.js @@ -0,0 +1,64 @@ +const changeCase = require('change-case'); + +// see types of prompts: +// https://github.com/enquirer/enquirer/tree/master/examples +// +module.exports = { + prompt: ({ inquirer }) => { + const questions = [ + { + type: 'input', + name: 'name', + message: 'Which component is this playground for?', + initial: 'ion-button', + validate(value) { + return value.match(/^ion-[a-z/-]*[a-z]+$/) ? true : "Component name must be kebab-case and begin with 'ion-'"; + }, + }, + { + type: 'input', + name: 'path', + message: 'What should the playground path be?', + hint: 'e.g. `basic` or `theming/colors`', + validate(value) { + return value.match(/^[a-z]+[a-z/-]*[a-z]+$/) + ? true + : "Path should begin and end with a letter and only contain lowercase letters, '-', or '/'"; + }, + }, + { + type: 'select', + name: 'version', + message: 'Select the Ionic Framework version for the playground', + initial: '7', + choices: ['6', '7'], + }, + { + type: 'toggle', + name: 'css', + message: 'Generate custom CSS files?', + enabled: 'Yes', + disabled: 'No', + }, + { + type: 'toggle', + name: 'angular_ts', + message: 'Generate an Angular TypeScript file?', + enabled: 'Yes', + disabled: 'No', + }, + ]; + + return inquirer.prompt(questions).then((answers) => { + const componentName = changeCase.pascal(answers.path.split('/').pop()); + console.log( + `\nTo use this component in a docs markdown file, include\nthe following:\n\n## ${componentName}\n\nimport ${componentName} from '@site/static/usage/v7/${answers.name.replace( + 'ion-', + '' + )}/${answers.path}/index.md';\n\n<${componentName} />\n` + ); + + return answers; + }); + }, +}; diff --git a/_templates/playground/new/index.md.ejs.t b/_templates/playground/new/index.md.ejs.t new file mode 100644 index 00000000000..fe9b7483a31 --- /dev/null +++ b/_templates/playground/new/index.md.ejs.t @@ -0,0 +1,60 @@ +--- +arbitrary: <% nameWithoutIon = name.replace('ion-', '') %> +to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/index.md` %>" +--- +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +<% if (css){ %> +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +<% } else { -%> +import react from './react.md'; +<% } -%> +import vue from './vue.md'; +<% if (css || angular_ts){ %> +import angular_example_component_html from './angular/example_component_html.md'; +<% } else { -%> +import angular from './angular.md'; +<% } -%> +<% if (angular_ts){ -%> +import angular_example_component_ts from './angular/example_component_ts.md'; +<% } -%> +<% if (css){ -%> +import angular_example_component_css from './angular/example_component_css.md'; +<% } -%> + + + react: { + files: { + 'src/main.tsx': react_main_tsx, + 'src/main.css': react_main_css, + }, + }, +<% } else { -%> + react, +<% } -%> + vue, +<% if (angular_ts || css){ -%> + angular: { + files: { + 'src/app/example.component.html': angular_example_component_html, +<% if (angular_ts){ -%> + 'src/app/example.component.ts': angular_example_component_ts, +<% } -%> +<% if (css){ -%> + 'src/app/example.component.css': angular_example_component_css, +<% } -%> + }, + }, +<% } else { -%> + angular, +<% } -%> + }} + src="usage/v<%= version %>/<%= nameWithoutIon %>/<%= path %>/demo.html" +/> diff --git a/_templates/playground/new/javascript.md.ejs.t b/_templates/playground/new/javascript.md.ejs.t new file mode 100644 index 00000000000..067c56a59c5 --- /dev/null +++ b/_templates/playground/new/javascript.md.ejs.t @@ -0,0 +1,14 @@ +--- +to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/javascript.md` %>" +--- +```html +<<%= name %>>> +<% if (css){ -%> + + +<% } -%> +``` diff --git a/_templates/playground/new/react.md.ejs.t b/_templates/playground/new/react.md.ejs.t new file mode 100644 index 00000000000..b446e39db5a --- /dev/null +++ b/_templates/playground/new/react.md.ejs.t @@ -0,0 +1,19 @@ +--- +arbitrary: <% pascalName = h.changeCase.pascal(name) %> +# this file's location depends on whether or not the css option is selected via the prompt +to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/${css ? 'react/main_tsx.md' : 'react.md'}` %>" +--- +```tsx +import React from 'react'; +import { <%= pascalName %> } from '@ionic/react';<% if (css){ %> + +import './main.css';<% } %> + +function Example() { + return ( + <<%= pascalName %>>> + ); +} +export default Example; +``` + diff --git a/_templates/playground/new/react_main_css.md.ejs.t b/_templates/playground/new/react_main_css.md.ejs.t new file mode 100644 index 00000000000..595e6eaef12 --- /dev/null +++ b/_templates/playground/new/react_main_css.md.ejs.t @@ -0,0 +1,9 @@ +--- +# this file only gets generated if `css` (from the command line prompt) is true +to: "<%= css ? `static/usage/v${version}/${name.replace('ion-', '')}/${path}/react/main_css.md` : null %>" +--- +```css +<%= name %> { + /* styles go here */ +} +``` diff --git a/_templates/playground/new/vue.md.ejs.t b/_templates/playground/new/vue.md.ejs.t new file mode 100644 index 00000000000..b1bf2cd21eb --- /dev/null +++ b/_templates/playground/new/vue.md.ejs.t @@ -0,0 +1,28 @@ +--- +arbitrary: <% pascalName = h.changeCase.pascal(name) %> +to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/vue.md` %>" +--- +```html + + + +<% if (css){ -%> + + +<% } -%> +``` diff --git a/crowdin.yml b/crowdin.yml index 33a536865ca..c237cf6e3bd 100644 --- a/crowdin.yml +++ b/crowdin.yml @@ -8,6 +8,5 @@ files: - source: /docs/**/* translation: /i18n/%two_letters_code%/docusaurus-plugin-content-docs/current/**/%original_file_name% ignore: - - /docs/api/**/* - /docs/cli/commands/**/* - /docs/native/**/* diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md index 2e4f4afa24f..007cdd56667 100644 --- a/docs/angular/lifecycle.md +++ b/docs/angular/lifecycle.md @@ -11,37 +11,37 @@ sidebar_label: ライフサイクル /> -このガイドでは、IonicとAngularを使用して構築されたアプリでのPage Life Cycleのしくみについて説明します。（追記：Life Cycleとは、表示をはじめてから破棄するまでを指します。この間の特定のタイミングに設定されているイベントをLife Cycle Eventsといいます） +このガイドでは、Ionic と Angular を使用して構築されたアプリでの Page Life Cycle のしくみについて説明します。（追記：Life Cycle とは、表示をはじめてから破棄するまでを指します。この間の特定のタイミングに設定されているイベントを Life Cycle Events といいます） ![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.png) -## AngularのLife Cycle Events +## Angular の Life Cycle Events -IonicはAngularが提供するLife Cycle Eventsを取り入れています。最もよく使う2つのAngularイベントは次のとおりです。 +Ionic は Angular が提供する Life Cycle Events を取り入れています。最もよく使う 2 つの Angular イベントは次のとおりです。 -| Event Name | Description | -| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `ngOnInit` | コンポーネントの初期化中に発生します。このイベントを使用して、ローカルメンバーを初期化し、一度だけ実行する必要があるServiceを呼び出すことができます。 | -| `ngOnDestroy` | Angularがビューを破棄する直前に発生します。 observables の unsubscribe などのクリーンアップに役立ちます。 | +| Event Name | Description | +| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ngOnInit` | コンポーネントの初期化中に発生します。このイベントを使用して、ローカルメンバーを初期化し、一度だけ実行する必要がある Service を呼び出すことができます。 | +| `ngOnDestroy` | Angular がビューを破棄する直前に発生します。 observables の unsubscribe などのクリーンアップに役立ちます。 | -AngularのComponent Life Cycleイベントの詳細については、それらの [component lifecycle docs](https://angular.jp/guide/lifecycle-hooks) をご覧ください。 +Angular の Component Life Cycle イベントの詳細については、それらの [component lifecycle docs](https://angular.jp/guide/lifecycle-hooks) をご覧ください。 :::note `ion-nav` または `ion-router-outlet` を使用するコンポーネントは、 `OnPush` 変更検出方式を使用しないでください。そうすることで、 `ngOnInit` などのライフサイクル・フックが起動するのを防ぐことができます。また、非同期状態の変更は正しくレンダリングされない場合があります。 ::: -## IonicのPage Events +## Ionic の Page Events -AngularのLife Cycle Eventsに加えて、Ionic Angularには、使用可能ないくつかの追加イベントがあります: +Angular の Life Cycle Events に加えて、Ionic Angular には、使用可能ないくつかの追加イベントがあります: -| Event Name | Description | -| ------------------ | ------------------------------------------------------------------ | -| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 | -| `ionViewDidEnter` | コンポーネントが表示されるアニメーションが終了した時に発火します。 | -| `ionViewWillLeave` | コンポーネントを離脱するアニメーションがはじまる時に発火します。 | -| `ionViewDidLeave` | コンポーネントを離脱するアニメーションが終了した時に発火します。 | +| Event Name | Description | +| ------------------ | ------------------------------------------------------------------------ | +| `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 | +| `ionViewDidEnter` | コンポーネントが表示されるアニメーションが **終了した時に** 発火します。 | +| `ionViewWillLeave` | コンポーネントを離脱するアニメーションが **はじまる時に** 発火します。 | +| `ionViewDidLeave` | コンポーネントを離脱するアニメーションが **終了した時に** 発火します。 | -これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionicライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。 +これらのライフサイクルは、ルーターによって直接マッピングされたコンポーネントに対してのみ呼び出されます。つまり、`/pageOne`が`PageOneComponent`にマッピングされた場合、Ionic ライフサイクルは`PageOneComponent`で呼び出されますが、`PageOneComponent`がレンダリングする子コンポーネントでは呼び出されません。 `ionViewWillEnter`と`ionViewDidEnter`の違いは、いつ発火するかです。前者は `ngOnInit` の直後でページ遷移が始まる前に、後者は遷移が終わった後に直接呼び出されます。 @@ -49,26 +49,26 @@ AngularのLife Cycle Eventsに加えて、Ionic Angularには、使用可能な ![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.gif) -## IonicがPageのLifeをどのように処理するか +## Ionic が Page の Life をどのように処理するか -Ionic は `` という router outlet を持っています。この outlet が Angularの `` を継承し、さらに拡張して、モバイルデバイスのためのより良い体験を可能にしました。 +Ionic は `` という router outlet を持っています。この outlet が Angular の `` を継承し、さらに拡張して、モバイルデバイスのためのより良い体験を可能にしました。 -`` にアプリがラップされることで、Ionicはナビゲーションの扱いを少し変更します。新しいページに遷移すると、Ionicは古いページを既存のDOMに残しますが、ビューから隠して新しいページに移行します。これを行う理由は2つあります: +`` にアプリがラップされることで、Ionic はナビゲーションの扱いを少し変更します。新しいページに遷移すると、Ionic は古いページを既存の DOM に残しますが、ビューから隠して新しいページに移行します。これを行う理由は 2 つあります: -1) 古いページの状態を維持することができます（画面上のデータ、スクロール位置など）。 -2) ページがすでに存在しており作成し直す必要がないため、ページへの移行がスムーズになります。 +1. 古いページの状態を維持することができます（画面上のデータ、スクロール位置など）。 +2. ページがすでに存在しており作成し直す必要がないため、ページへの移行がスムーズになります。 -たとえば、UIの "戻る" ボタンまたはブラウザの "戻る" ボタンを押すことによってページが「Pop」されると、ページはDOMから削除されるだけとなります。 +たとえば、UI の "戻る" ボタンまたはブラウザの "戻る" ボタンを押すことによってページが「Pop」されると、ページは DOM から削除されるだけとなります。 この特別な処理のために、`ngOnInit` と `ngOnDestroy` のメソッドは通常そうあるべきだと思うときには発火しないかもしれません。 -`ngOnInit` はページが新しく作成されるたびに発火するだけなので、ページに戻ったときには発火されません。たとえば、タブのインタフェースで各ページ間を移動しても、各ページの `ngOnInit` メソッドは最初の1回だけ呼び出され、その後の表示では呼び出されません。`ngOnDestroy` はページが 「Pop」したときにのみ発生します。 +`ngOnInit` はページが新しく作成されるたびに発火するだけなので、ページに戻ったときには発火されません。たとえば、タブのインタフェースで各ページ間を移動しても、各ページの `ngOnInit` メソッドは最初の 1 回だけ呼び出され、その後の表示では呼び出されません。`ngOnDestroy` はページが 「Pop」したときにのみ発生します。 ## ルートガード -Ionic 3では、いつページにアクセスすることができるか（ `ionViewCanEnter` ）と離脱できるか（`ionViewCanLeave`）を制御するのに役立つ、いくつかの追加のライフサイクルメソッドがありました。これらは、許可されていないユーザーからページを保護したり、ユーザーがページを離れたくないときにユーザーをページ上に保持したりするために使用できます（フォーム入力中など）。 +Ionic 3 では、いつページにアクセスすることができるか（ `ionViewCanEnter` ）と離脱できるか（`ionViewCanLeave`）を制御するのに役立つ、いくつかの追加のライフサイクルメソッドがありました。これらは、許可されていないユーザーからページを保護したり、ユーザーがページを離れたくないときにユーザーをページ上に保持したりするために使用できます（フォーム入力中など）。 -これらの方法は、Angularのルートガードを使用するためにIonic 4で削除されました。 +これらの方法は、Angular のルートガードを使用するために Ionic 4 で削除されました。 ルートガードは、ルートに対して特定のアクションを実行できるかどうかを判断するのに役立ちます。それらは特定のインターフェースを実装するクラスです。`CanActive` と `CanDeactivate` のインターフェイスは、`ionViewCanEnter` と `ionViewCanLeave` と同様のロジックでイベントを削除することができます。 @@ -89,15 +89,15 @@ export class AuthGuard implements CanActivate { { path: 'settings', canActivate: [AuthGuard], loadChildren: '...', } ``` -ルートガードの使い方の詳細については、Angularの [router documentation](https://angular.jp/guide/router) を参照してください。 +ルートガードの使い方の詳細については、Angular の [router documentation](https://angular.jp/guide/router) を参照してください。 -## Life Cycleメソッドのガイダンス +## Life Cycle メソッドのガイダンス -以下は、life cycle eventsごとのユースケースに関するヒントです。 +以下は、life cycle events ごとのユースケースに関するヒントです。 -- `ngOnInit` - コンポーネントを初期化し、Serviceからアクセスごとに更新する必要がないデータをロードします。 -- `ionViewWillEnter` - `ionViewWillEnter` はViewがナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Serviceからデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量のDOM操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。 -- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Pageがユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたはスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。 -- `ionViewWillLeave` - observablesのunsubscribingのように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。 +- `ngOnInit` - コンポーネントを初期化し、Service からアクセスごとに更新する必要がないデータをロードします。 +- `ionViewWillEnter` - `ionViewWillEnter` は View がナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Service からデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量の DOM 操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。 +- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Page がユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたはスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。 +- `ionViewWillLeave` - observables の unsubscribing のように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。 - `ionViewDidLeave` - このイベントが発生すると、新しいページへと完全に遷移したことがわかります。そのため、ビューが表示されているときに通常は行わない可能性があるロジックはすべてここに移動できます。 - `ngOnDestroy` - `ionViewWillLeave` でクリーンアップしたくないページのクリーンアップロジックはここにおいてください。 diff --git a/docs/angular/navigation.md b/docs/angular/navigation.md index 1fd76d76af8..a4b72d42482 100644 --- a/docs/angular/navigation.md +++ b/docs/angular/navigation.md @@ -13,12 +13,11 @@ import useBaseUrl from '@docusaurus/useBaseUrl'; /> -このガイドでは、IonicとAngularを使用して構築されたアプリでのルーティングのしくみについて説明します。 +このガイドでは、Ionic と Angular を使用して構築されたアプリでのルーティングのしくみについて説明します。 +Angular Router は、Angular アプリケーションで最も重要なライブラリの 1 つです。これがなければ、アプリはシングルビュー/シングルコンテキストアプリになるか、ブラウザのリロード時にナビゲーションのステートを維持できなくなります。Angular Router を使用すると、リンク可能でリッチなアニメーションを持つリッチなアプリを作成できます（もちろん、Ionic と組み合わせると！）。Angular Router の基本と、それを Ionic アプリケーション用に設定する方法を見てみましょう。 -Angular Routerは、Angularアプリケーションで最も重要なライブラリの1つです。これがなければ、アプリはシングルビュー/シングルコンテキストアプリになるか、ブラウザのリロード時にナビゲーションのステートを維持できなくなります。Angular Routerを使用すると、リンク可能でリッチなアニメーションを持つリッチなアプリを作成できます（もちろん、Ionicと組み合わせると！）。Angular Routerの基本と、それをIonicアプリケーション用に設定する方法を見てみましょう。 - -## シンプルなRoute +## シンプルな Route ほとんどのアプリでは、some sort of route を持つことがしばしば必要になります。最も基本的な設定はこのようになります： @@ -37,7 +36,7 @@ import { RouterModule } from '@angular/router'; }) ``` -URL path と Component の組み合わせを確認する最も簡単な方法は、ここをみるすることです。アプリがロードされると、ルーターはユーザーがロードしようとしているURLを読むことで動作を開始します。私たちのサンプルでは、Routeは `''` を参照します。これは本質的に私たちのインデックスルートとなります。そうすると、一致するエントリを探し出して、 `LoginComponent` がロードされます。かなり簡単です。この処理は `path` が一致するまで、設定されているすべてのRouteのエントリを参照します。しかし、初期ロードと異なるパスをロードしたい場合はどうなりますか？ +URL path と Component の組み合わせを確認する最も簡単な方法は、ここをみるすることです。アプリがロードされると、ルーターはユーザーがロードしようとしている URL を読むことで動作を開始します。私たちのサンプルでは、Route は `''` を参照します。これは本質的に私たちのインデックスルートとなります。そうすると、一致するエントリを探し出して、 `LoginComponent` がロードされます。かなり簡単です。この処理は `path` が一致するまで、設定されているすべての Route のエントリを参照します。しかし、初期ロードと異なるパスをロードしたい場合はどうなりますか？ ## リダイレクトの処理 @@ -53,14 +52,14 @@ URL path と Component の組み合わせを確認する最も簡単な方法は このリダイレクトでは、アプリのインデックス（`''`）を探しはじめると、`login` にリダイレクトします。最後の `pathMatch` キーは、ルータにパスの検索方法を指示するために必要です。 -`full` を使用すると、たとえ最後まで `/route1/route2/route3` と一致するpathがなかったとしても、フルパスを比較する必要があることをルータに伝えることができます。つまり、次のようになります。 +`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が一致しないのでリダイレクトを行いません。 +このように書くと `/route1/route2/route3` をロードすると、リダイレクトを行います。けれど仮に `/route1/route2/route4` であれば、すべての path が一致しないのでリダイレクトを行いません。 あるいは、こういう書き方もできます: @@ -71,9 +70,9 @@ URL path と Component の組み合わせを確認する最も簡単な方法は `/route1/route2/route3` と `/route1/route2/route4` の両方を読み込んだとおき, どちらの場合もリダイレクトします。 `pathMatch: 'prefix'` によって、一部でも一致したら該当するからです。 -## routesへのナビゲーション +## routes へのナビゲーション -routesについて説明してきましたが、それではどのようにしてそのルートにナビゲーションしたらいいのでしょうか。これには、 `routerLink` directiveを利用します。先ほどの簡単なrouter設定でこれを確認してみましょう: +routes について説明してきましたが、それではどのようにしてそのルートにナビゲーションしたらいいのでしょうか。これには、 `routerLink` directive を利用します。先ほどの簡単な router 設定でこれを確認してみましょう: ```ts RouterModule.forRoot([ @@ -82,7 +81,7 @@ RouterModule.forRoot([ ]); ``` -わたしたちは、次のHTMLを利用することで、`LoginComponent` から `detail` routeに遷移することができます。 +わたしたちは、次の HTML を利用することで、`LoginComponent` から `detail` route に遷移することができます。 ```html @@ -96,9 +95,9 @@ RouterModule.forRoot([ ``` -ここで重要なのは`ion-button` と `routerLink` directiveです。RouterLinkは典型的な `href` と同様の考えで動作しますが、URLを文字列として構築する代わりに配列として構築することができ、それによってより複雑なパスを書くこともできます。 +ここで重要なのは`ion-button` と `routerLink` directive です。RouterLink は典型的な `href` と同様の考えで動作しますが、URL を文字列として構築する代わりに配列として構築することができ、それによってより複雑なパスを書くこともできます。 -Router APIを使用して、プログラムで遷移することもできます。 +Router API を使用して、プログラムで遷移することもできます。 ```tsx import { Component } from '@angular/core'; @@ -119,25 +118,21 @@ export class LoginComponent { どちらのオプションも同様のナビゲーションメカニズムを提供し、異なるユースケースで利用することができます。 -:::note -相対URLを使用したナビゲーションに関するメモ：現在、複数のナビゲーションスタックをサポートするために、相対URLはサポートされていません。 -::: - -### Navigating using LocationStrategy.historyGo +### LocationStrategy.historyGo を使ったナビゲーション -Angular Router has a [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) method that allows developers to move forward or backward through the application history. Let's take a look at an example. +Angular Router には [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) メソッドがあり、アプリケーションの履歴を進んだり戻ったりすることができます。例を見てみましょう。 -Say you have the following application history: +次のようなアプリケーションの履歴があるとします： -`/pageA` --> `/pageB` --> `/pageC` +`/ページA` --> `/ページB` --> `/ページC`。 -If you were to call `LocationStrategy.historyGo(-2)` on `/pageC`, you would be brought back to `/pageA`. If you then called `LocationStrategy.historyGo(2)`, you would be brought to `/pageC`. +もし `/pageC` で `LocationStrategy.historyGo(-2)` を呼び出すと、 `/pageA` に戻る。その後、 `LocationStrategy.historyGo(2)` を呼び出すと、 `/pageC` に戻る。 -An key characteristic of `LocationStrategy.historyGo()` is that it expects your application history to be linear. This means that `LocationStrategy.historyGo()` should not be used in applications that make use of non-linear routing. See [Linear Routing versus Non-Linear Routing](#linear-routing-versus-non-linear-routing) for more information. +`LocationStrategy.historyGo()` の主な特徴は、アプリケーションの履歴が線形であることを想定していることです。つまり、`LocationStrategy.historyGo()` は非線形のルーティングを使用するアプリケーションでは使用すべきではありません。詳しくは [リニアルーティング対非リニアルーティング](#linear-routing-versus-non-linear-routing) を参照してください。 ## Lazy loading routes -現在のルート設定では、すべてのComponentが、ルートとなる `app.module` と同じ `chunk` に含まれているので理想的ではありません。代わりに、ルータにはコンポーネントを独自の `chunk` に分離できるように設定されています。 +現在のルート設定では、すべての Component が、ルートとなる `app.module` と同じ `chunk` に含まれているので理想的ではありません。代わりに、ルータにはコンポーネントを独自の `chunk` に分離できるように設定されています。 ```tsx @@ -352,7 +347,7 @@ There are very few use cases in which nested routes make sense in mobile applica ## Working with Tabs -タブを使用すると、Angular Routerにどのコンポーネントをロードする必要があるかを知るためのメカニズムをIonicが提供しますが、タブコンポーネントでは複雑な作業が行われます。簡単な例を見てみましょう。 +タブを使用すると、Angular Router にどのコンポーネントをロードする必要があるかを知るためのメカニズムを Ionic が提供しますが、タブコンポーネントでは複雑な作業が行われます。簡単な例を見てみましょう。 ```ts const routes: Routes = [ @@ -384,7 +379,7 @@ const routes: Routes = [ ]; ``` -ここでは、 `tabs` パスを読み込んでいます。この例では、pathを `tabs` としていますが、これは変更可能です。あなたのアプリに合った名前にすることができます。このルートオブジェクトでは、子ルートも定義することができます。この例では、トップレベルの子ルート「tab1」が「outlet」として機能し、さらに子ルートをロードすることができます。この例では、1 つの子ルートがあり、新しいコンポーネントをロードするだけです。Tabsのマークアップは、次のとおりです: +ここでは、 `tabs` パスを読み込んでいます。この例では、path を `tabs` としていますが、これは変更可能です。あなたのアプリに合った名前にすることができます。このルートオブジェクトでは、子ルートも定義することができます。この例では、トップレベルの子ルート「tab1」が「outlet」として機能し、さらに子ルートをロードすることができます。この例では、1 つの子ルートがあり、新しいコンポーネントをロードするだけです。Tabs のマークアップは、次のとおりです: ```html @@ -397,7 +392,7 @@ const routes: Routes = [ ``` -Ionicを使ってアプリを作成したことがあれば、このマークアップはおなじみのはずです。`ion-tabs` コンポーネントを作成し、`ion-tab-bar` を提供します。`ion-tab-bar` は、 `tab`と一緒に`ion-tab-button`を提供します。最新の `@ionic/angular` はもはや `` を必要とせず、開発者がタブバーを完全にカスタマイズできるようになり、すべての設定はRouterの設定によって行えるようになりました。 +Ionic を使ってアプリを作成したことがあれば、このマークアップはおなじみのはずです。`ion-tabs` コンポーネントを作成し、`ion-tab-bar` を提供します。`ion-tab-bar` は、 `tab`と一緒に`ion-tab-button`を提供します。最新の `@ionic/angular` はもはや `` を必要とせず、開発者がタブバーを完全にカスタマイズできるようになり、すべての設定は Router の設定によって行えるようになりました。 ### How Tabs in Ionic Work diff --git a/docs/angular/overview.md b/docs/angular/overview.md index f7e37efb4f8..60d2910bfec 100644 --- a/docs/angular/overview.md +++ b/docs/angular/overview.md @@ -14,15 +14,15 @@ sidebar_label: 概要 import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; -`@ionic/angular` はcore Ionic experienceに、Angular開発者向けにカスタマイズされたツールとAPIを組み合わせたものです。 +`@ionic/angular` は core Ionic experience に、Angular 開発者向けにカスタマイズされたツールと API を組み合わせたものです。 -## Angularバージョンサポート +## Angular バージョンサポート -Ionic v7はAngular v14+をサポートしています。アップグレード戦略の一環として、Angularにはアップグレードを自動化するためのツールが組み込まれており、APIに変更があった際には開発者にフィードバックを提供します。これにより、アップデートの手間を減らし、エコシステムを最新の状態に保つことができます。 +Ionic v7 は Angular v14+をサポートしています。アップグレード戦略の一環として、Angular にはアップグレードを自動化するためのツールが組み込まれており、API に変更があった際には開発者にフィードバックを提供します。これにより、アップデートの手間を減らし、エコシステムを最新の状態に保つことができます。 ## Angular Tooling -Ionic4以降では、アプリケーション構築とルーティングのために公式のAngularスタックが使用されているため、あなたのアプリケーションはAngularエコシステムと同じように利用できます。更に独自の機能が必要な場合には、Ionicは`@ionic/angular-toolkit`を提供します。、これは [official Angular CLI](https://angular.jp/cli) を構築して統合し、`@ionic/angular` アプリ固有の機能を提供します。 +Ionic4 以降では、アプリケーション構築とルーティングのために公式の Angular スタックが使用されているため、あなたのアプリケーションは Angular エコシステムと同じように利用できます。更に独自の機能が必要な場合には、Ionic は`@ionic/angular-toolkit`を提供します。、これは [official Angular CLI](https://angular.jp/cli) を構築して統合し、`@ionic/angular` アプリ固有の機能を提供します。 ## Resources diff --git a/docs/angular/platform.md b/docs/angular/platform.md index 5b872bc9753..686a0c6fb20 100644 --- a/docs/angular/platform.md +++ b/docs/angular/platform.md @@ -10,7 +10,7 @@ title: Platform /> -プラットフォームサービスは、現在のデバイスに関する情報を取得するために使用できます。`platforms` メソッドを利用することでデバイスに関連付けられているすべてのプラットフォームを取得できます。例えば、アプリがタブレットから表示されているかどうか（モバイルデバイスまたはブラウザ上にある場合）、および正確なプラットフォーム（iOS、Androidなど）などです。右から左への言語の向きなどを使用すれば、デバイスの向きもわかります。この情報を使用して、あらゆるデバイスに合わせてアプリを完全にカスタマイズできます。 +プラットフォームサービスは、現在のデバイスに関する情報を取得するために使用できます。`platforms` メソッドを利用することでデバイスに関連付けられているすべてのプラットフォームを取得できます。例えば、アプリがタブレットから表示されているかどうか（モバイルデバイスまたはブラウザ上にある場合）、および正確なプラットフォーム（iOS、Android など）などです。右から左への言語の向きなどを使用すれば、デバイスの向きもわかります。この情報を使用して、あらゆるデバイスに合わせてアプリを完全にカスタマイズできます。 ## Usage @@ -181,7 +181,7 @@ type PlatformConfig = { ### `pause` -`pause` イベントは、ネイティブ・プラットフォームがアプリケーションをバックグラウンドに置いたとき、通常はユーザーが別のアプリケーションに切り替えたときに発生します。このイベントは、Cordova/Capacitorアプリケーションがバックグラウンドに置かれたときに発生しますが、標準的なWebブラウザでは発生しません。 +`pause` イベントは、ネイティブ・プラットフォームがアプリケーションをバックグラウンドに置いたとき、通常はユーザーが別のアプリケーションに切り替えたときに発生します。このイベントは、Cordova/Capacitor アプリケーションがバックグラウンドに置かれたときに発生しますが、標準的な Web ブラウザでは発生しません。 #### Examples @@ -205,7 +205,7 @@ this.platform.resize.subscribe(async () => { ### `resume` -`resume` イベントは、ネイティブプラットフォームがバックグラウンドからアプリケーションを引き出したときに発生します。このイベントは、Cordova/Capacitorアプリがバックグラウンドから出てきても、標準的なWebブラウザで起動しない場合に発生します。 +`resume` イベントは、ネイティブプラットフォームがバックグラウンドからアプリケーションを引き出したときに発生します。このイベントは、Cordova/Capacitor アプリがバックグラウンドから出てきても、標準的な Web ブラウザで起動しない場合に発生します。 #### Examples diff --git a/docs/angular/pwa.md b/docs/angular/pwa.md index 9f915668dfa..684c150c457 100644 --- a/docs/angular/pwa.md +++ b/docs/angular/pwa.md @@ -82,19 +82,33 @@ If it's the first time you use firebase-tools, login to your Google account with With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts: -**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure and deploy Firebase Hosting sites." +**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys". + +Create a new Firebase project or select an existing one. **"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website. **"What do you want to use as your public directory?"** Enter "www". :::note -Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app: +Answering this next question will ensure that routing, hard reload, and deep linking work in the app: ::: **Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes". -**"File www/index.html already exists. Overwrite?"** Enter "No". +**"File build/index.html already exists. Overwrite?"** Enter "No". + +**Set up automatic builds and deploys with Github?** Enter "Yes". + +**For which GitHub repository would you like to set up a Github Workflow?** Enter your project name. + +**Set up the workflow to run a build script before every deploy?** Enter "Yes". + +**What script should be run before every deploy?** Enter `npm ci && npm run build`. + +**Set up automatic deployment to your sites live channel when a PR is merged?** Enter "Yes". + +**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main branch name. A `firebase.json` config file is generated, configuring the app for deployment. diff --git a/docs/angular/slides.md b/docs/angular/slides.md index e9ffe1b23f8..c5eefbec3be 100644 --- a/docs/angular/slides.md +++ b/docs/angular/slides.md @@ -75,7 +75,7 @@ If you would like to use the Core version instead, which does not include additi 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` | @@ -109,6 +109,7 @@ swiper-slide { display: flex; position: relative; + flex-direction: column; flex-shrink: 0; align-items: center; justify-content: center; @@ -134,6 +135,8 @@ swiper-slide img { 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 it from `@ionic/angular` and passing it to the `modules` property of `swiper-container` as an array: ```typescript @@ -152,9 +155,7 @@ export class HomePage { ```html - - ... - + ... ``` :::note @@ -168,7 +169,7 @@ Swiper options should be provided as individual properties directly on the ` + Slide 1 Slide 3 Slide 3 @@ -187,11 +188,11 @@ To set these options as properties directly on `` we would do 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. | +| 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. @@ -303,9 +304,7 @@ All methods and properties available on the Swiper instance can be found at - ... - + ... ``` :::note diff --git a/docs/angular/storage.md b/docs/angular/storage.md index 2a7397d7f99..23c365eb7d4 100644 --- a/docs/angular/storage.md +++ b/docs/angular/storage.md @@ -11,7 +11,7 @@ sidebar_label: ストレージ /> -Ionicアプリ内にデータを保存するためのさまざまなオプションを用意しています。 +Ionic アプリ内にデータを保存するためのさまざまなオプションを用意しています。 Here are two official Ionic options: diff --git a/docs/angular/testing.md b/docs/angular/testing.md index 60406db92d5..095c38c8061 100644 --- a/docs/angular/testing.md +++ b/docs/angular/testing.md @@ -22,7 +22,7 @@ Ionic CLI を使用して `@ionic/angular` アプリケーションを生成す ## ユニットテスト -ユニットテストでは、システムの他の部分から分離して、単一のコードユニット（Component、Page、Service、Pipeなど）を実行します。分離は、コードの依存関係の代わりにモックオブジェクトを注入することによって実現されます。モックオブジェクトによって、テストは依存関係の切り出しをきめ細かく制御することができます。モックによって、どの依存関係が呼び出され、何が渡されたかをテストで判断することもできます。 +ユニットテストでは、システムの他の部分から分離して、単一のコードユニット（Component、Page、Service、Pipe など）を実行します。分離は、コードの依存関係の代わりにモックオブジェクトを注入することによって実現されます。モックオブジェクトによって、テストは依存関係の切り出しをきめ細かく制御することができます。モックによって、どの依存関係が呼び出され、何が渡されたかをテストで判断することもできます。 適切に記述されたユニットテストは、コードの単位とそれに含まれる機能が `describe()` コールバックによって記述されるように構成されています。コード単位とその機能の要件は、`it()` コールバックによってテストされます。`describe()` コールバックと `it()` コールバックの説明を読むと、フレーズとして意味がわかります。ネストされた `describe()` と最後の `it()` の記述をつなげると、テストケースを完全に記述する文が形成されます。 @@ -34,7 +34,7 @@ Ionic CLI を使用して `@ionic/angular` アプリケーションを生成す モックを使用すると、モックが呼び出されたかどうか、および `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 でモックオブジェクトを作成する一般的な方法は 2 つあります。モックオブジェクトは、`jasmine.createSpy` と`jasmine.createSpyObj` を使ってスクラッチで作成することも、`spyOn()` と `spyOnProperty()` を使って既存のオブジェクトにスパイをインストールすることもできます。 ### `jasmine.createSpy` と `jasmine.createSpyObj` の利用 @@ -50,7 +50,7 @@ Jasmine でモックオブジェクトを作成する一般的な方法は2つ ### 一般的なテストの構成 -ユニットテストは、エンティティ（Component、Page、Service、Pipe など）ごとに1つの `spec` ファイルを持つ `spec` ファイルに含まれています。`spec` ファイルは、テスト中のソースと一緒に存在し、かつその名前が付けられます。たとえば、プロジェクトに WeatherService という Service がある場合、そのコードは`weather.service.ts` という名前のファイルにあり、テストは `weather.service.spec.ts` という名前のファイルにあります。これらのファイルは両方とも同じフォルダにあります。 +ユニットテストは、エンティティ（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` コールが含まれます。 @@ -72,7 +72,7 @@ describe('Calculation', () => { }); ``` -外側の `describe` コールは `Calculation` Service がテストされていることを示し、内側の `describe` コールはテストされている機能を正確に示し、そして `it` コールはテストケースが何であるかを示しています。各テストケースの完全なラベルを実行すると、意味のある文になります(卑劣な 0 での除算という計算を拒否しました)。 +外側の `describe` コールは `Calculation` Service がテストされていることを示し、内側の `describe` コールはテストされている機能を正確に示し、そして `it` コールはテストケースが何であるかを示しています。各テストケースの完全なラベルを実行すると、意味のある文になります(卑劣な 0 での除算という計算を拒否しました)。 ### ページとコンポーネント @@ -82,7 +82,7 @@ Pages は単なる Angular コンポーネントです。そのため、ペー ```tsx import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; import { TabsPage } from './tabs.page'; @@ -91,13 +91,11 @@ describe('TabsPage', () => { let fixture: ComponentFixture; beforeEach(async () => { - TestBed.configureTestingModule({ + await TestBed.configureTestingModule({ declarations: [TabsPage], schemas: [CUSTOM_ELEMENTS_SCHEMA], }).compileComponents(); - }); - beforeEach(() => { fixture = TestBed.createComponent(TabsPage); component = fixture.componentInstance; fixture.detectChanges(); @@ -113,7 +111,7 @@ describe('TabsPage', () => { ## Service -Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主にHTTP操作やデータ操作を実行するデータの service の2つの大まかなカテゴリーのいずれかに分類されます。 +Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主に HTTP 操作やデータ操作を実行するデータの service の 2 つの大まかなカテゴリーのいずれかに分類されます。 ### 基本的な Service のテスト @@ -182,7 +180,7 @@ describe('PayrolService', () => { #### HTTP データ Service のテスト -HTTP 操作を実行するほとんどの service は、それらの操作を実行するために Angular の HttpClient service を使用します。そのようなテストには、Angular の `HttpClientTestingModule` を使うことが推奨されています。このモジュールの詳細なドキュメントは Angular の HTTPリクエストをテストする のガイドを参照してください。 +HTTP 操作を実行するほとんどの service は、それらの操作を実行するために Angular の HttpClient service を使用します。そのようなテストには、Angular の `HttpClientTestingModule` を使うことが推奨されています。このモジュールの詳細なドキュメントは Angular の HTTP リクエストをテストする のガイドを参照してください。 このようなテストの基本的な設定は次のようになります: @@ -291,7 +289,7 @@ describe('NamePipe', () => { ### テストの構成 -`@ionic/angular` アプリケーションが作成されると、 デフォルトのエンドツーエンドのテストアプリケーションが `e2e` フォルダに生成されます。このアプリケーションは Protractor を使用してブラウザを制御し、Jasmine を使用してテストを構築し、実行します。アプリケーションは、初期時は次の4つのファイルで構成されています: +`@ionic/angular` アプリケーションが作成されると、 デフォルトのエンドツーエンドのテストアプリケーションが `e2e` フォルダに生成されます。このアプリケーションは Protractor を使用してブラウザを制御し、Jasmine を使用してテストを構築し、実行します。アプリケーションは、初期時は次の 4 つのファイルで構成されています: - `protractor.conf.js` - Protractor の設定ファイル - `tsconfig.e2e.json` - テストアプリケーション用の特定の TypeScript の設定 @@ -302,11 +300,11 @@ describe('NamePipe', () => { エンドツーエンドのテストは、アプリケーションとの共通のユーザー対話を自動化し、アプリケーションが応答するのを待ち、対話の結果を判別するために DOM を検査します。これには、多くの DOM 操作と試験が必要です。これらをすべて手作業で行うと、テストは非常に脆くなり、見て理解することや保守が困難になります。 -ページオブジェクトは、TypeScript クラスの単一ページの HTML をカプセル化し、テスト用のスクリプトがアプリケーションと対話するために使用するAPIを提供します。DOM 操作ロジックをページオブジェクト内にカプセル化することで、テストが読みやすくなり、かつ判断することがはるかに簡単になり、テストの保守コストが大幅に削減されます。洗練されたページオブジェクトを作成することは、高品質で保守しやすいエンドツーエンドのテストを作成するための鍵です。 +ページオブジェクトは、TypeScript クラスの単一ページの HTML をカプセル化し、テスト用のスクリプトがアプリケーションと対話するために使用する API を提供します。DOM 操作ロジックをページオブジェクト内にカプセル化することで、テストが読みやすくなり、かつ判断することがはるかに簡単になり、テストの保守コストが大幅に削減されます。洗練されたページオブジェクトを作成することは、高品質で保守しやすいエンドツーエンドのテストを作成するための鍵です。 ##### ベースページオブジェクト -多くのテストは、ページが表示されるのを待ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに依存しています。これを行うために使用されるメソッドは、適切な DOM 要素の変更を取得するために使用されるCSSセレクターのみと一貫性があります。したがって、このロジックを、他のページオブジェクトが使用できるベースクラスに抽象化することは理にかなっています。 +多くのテストは、ページが表示されるのを待ったり、input にテキストを入力したり、ボタンをクリックするなどのアクションに依存しています。これを行うために使用されるメソッドは、適切な DOM 要素の変更を取得するために使用される CSS セレクターのみと一貫性があります。したがって、このロジックを、他のページオブジェクトが使用できるベースクラスに抽象化することは理にかなっています。 すべてのページオブジェクトがサポートを必要とするいくつかのベースメソッドを実装する例を次に示します: @@ -503,7 +501,7 @@ describe('Login', () => { ### 設定 -デフォルトの設定では、開発に使用される同じ `environment.ts` ファイルを使います。エンドツーエンドのテストで使用するデータをより適切に制御するには、テスト用の特定の環境を用意し、テストにその環境を使用すると便利なことが多いです。このセクションでは、この設定を作成する1つの方法を示します。 +デフォルトの設定では、開発に使用される同じ `environment.ts` ファイルを使います。エンドツーエンドのテストで使用するデータをより適切に制御するには、テスト用の特定の環境を用意し、テストにその環境を使用すると便利なことが多いです。このセクションでは、この設定を作成する 1 つの方法を示します。 #### テスト環境 @@ -572,7 +570,7 @@ export const environment = { #### テストクリーンアップ -エンドツーエンドテストが何らかの方法でデータを変更する場合は、テストが完了したらデータを既知の状態に一度リセットすると便利です。そのための1つの方法は: +エンドツーエンドテストが何らかの方法でデータを変更する場合は、テストが完了したらデータを既知の状態に一度リセットすると便利です。そのための 1 つの方法は: 1. クリーンアップを実行するエンドポイントを生成する。 1. `protractor.conf.js` ファイルによってエクスポートされる `config` オブジェクトに `onCleanUp()` 関数を追加する diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md index 8c2a873a651..3b097970d69 100644 --- a/docs/angular/your-first-app.md +++ b/docs/angular/your-first-app.md @@ -11,7 +11,7 @@ sidebar_label: はじめてのアプリ /> -Ionic の素晴らしいところは、1つのコードベースで、使い慣れた Web ツールと言語を使用して任意のプラットフォーム用にビルドできることです。 Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step. +Ionic の素晴らしいところは、1 つのコードベースで、使い慣れた Web ツールと言語を使用して任意のプラットフォーム用にビルドできることです。 Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step. Here’s the finished app running on all 3 platforms: @@ -71,13 +71,13 @@ Consider setting up npm to operate globally without elevated permissions. See [R ## アプリの作成 -次に、"Tabs" というアプリテンプレートを使用して Ionic Angular アプリを生成し、Native機能を使うためにCapacitorを追加します。 +次に、"Tabs" というアプリテンプレートを使用して Ionic Angular アプリを生成し、Native 機能を使うために Capacitor を追加します。 ```shell ionic start photo-gallery tabs --type=angular --capacitor ``` -このスタータープロジェクトには、Ionic 開発のために事前に構成された3つのページとベストプラクティスが用意されています。共通の構成要素がすでに配置されているため、機能を簡単に追加できます！ +このスタータープロジェクトには、Ionic 開発のために事前に構成された 3 つのページとベストプラクティスが用意されています。共通の構成要素がすでに配置されているため、機能を簡単に追加できます！ 次に、アプリのフォルダに移動します: diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md index 0500def6158..0d839b8e2f5 100644 --- a/docs/angular/your-first-app/2-taking-photos.md +++ b/docs/angular/your-first-app/2-taking-photos.md @@ -83,7 +83,7 @@ Outside of the `PhotoService` class definition (the very bottom of the file), cr ```tsx export interface UserPhoto { filepath: string; - webviewPath: string; + webviewPath?: string; } ``` @@ -108,7 +108,7 @@ Over in the `addNewToGallery` function, add the newly captured photo to the begi this.photos.unshift({ filepath: "soon...", - webviewPath: capturedPhoto.webPath + webviewPath: capturedPhoto.webPath! }); } ``` diff --git a/docs/angular/your-first-app/3-saving-photos.md b/docs/angular/your-first-app/3-saving-photos.md index 588ebd4397e..cf9b948c221 100644 --- a/docs/angular/your-first-app/3-saving-photos.md +++ b/docs/angular/your-first-app/3-saving-photos.md @@ -39,7 +39,7 @@ private async savePicture(photo: Photo) { const base64Data = await this.readAsBase64(photo); // Write the file to the data directory - const fileName = new Date().getTime() + '.jpeg'; + const fileName = Date.now() + '.jpeg'; const savedFile = await Filesystem.writeFile({ path: fileName, data: base64Data, diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.md index 79759c48c53..f2fc61b1fd1 100644 --- a/docs/angular/your-first-app/4-loading-photos.md +++ b/docs/angular/your-first-app/4-loading-photos.md @@ -35,8 +35,8 @@ With the photo array data saved, create a function called `loadSaved()` that can ```tsx public async loadSaved() { // Retrieve cached photo array data - const photoList = await Preferences.get({ key: this.PHOTO_STORAGE }); - this.photos = JSON.parse(photoList.value) || []; + const { value } = await Preferences.get({ key: this.PHOTO_STORAGE }); + this.photos = (value ? JSON.parse(value) : []) as UserPhoto[]; // more to come... } diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.md index f07de10841e..16235a008a4 100644 --- a/docs/angular/your-first-app/5-adding-mobile.md +++ b/docs/angular/your-first-app/5-adding-mobile.md @@ -38,14 +38,14 @@ private async readAsBase64(photo: Photo) { if (this.platform.is('hybrid')) { // Read the file into base64 format const file = await Filesystem.readFile({ - path: photo.path + path: photo.path! }); return file.data; } else { // Fetch the photo, read as a blob, then convert to base64 format - const response = await fetch(photo.webPath); + const response = await fetch(photo.webPath!); const blob = await response.blob(); return await this.convertBlobToBase64(blob) as string; @@ -57,35 +57,35 @@ Next, update the `savePicture()` method. When running on mobile, set `filepath` ```tsx // Save picture to file on device - private async savePicture(photo: Photo) { - // Convert photo to base64 format, required by Filesystem API to save - const base64Data = await this.readAsBase64(photo); - - // Write the file to the data directory - const fileName = new Date().getTime() + '.jpeg'; - const savedFile = await Filesystem.writeFile({ - path: fileName, - data: base64Data, - directory: Directory.Data - }); +private async savePicture(photo: Photo) { + // Convert photo to base64 format, required by Filesystem API to save + const base64Data = await this.readAsBase64(photo); + + // Write the file to the data directory + const fileName = Date.now() + '.jpeg'; + const savedFile = await Filesystem.writeFile({ + path: fileName, + data: base64Data, + directory: Directory.Data + }); - if (this.platform.is('hybrid')) { - // Display the new image by rewriting the 'file://' path to HTTP - // Details: https://ionicframework.com/docs/building/webview#file-protocol - return { - filepath: savedFile.uri, - webviewPath: Capacitor.convertFileSrc(savedFile.uri), - }; - } - else { - // Use webPath to display the new image instead of base64 since it's - // already loaded into memory - return { - filepath: fileName, - webviewPath: photo.webPath - }; - } + if (this.platform.is('hybrid')) { + // Display the new image by rewriting the 'file://' path to HTTP + // Details: https://ionicframework.com/docs/building/webview#file-protocol + return { + filepath: savedFile.uri, + webviewPath: Capacitor.convertFileSrc(savedFile.uri), + }; } + else { + // Use webPath to display the new image instead of base64 since it's + // already loaded into memory + return { + filepath: fileName, + webviewPath: photo.webPath + }; + } +} ``` Next, head back over to the `loadSaved()` function we implemented for the web earlier. On mobile, we can directly set the source of an image tag - `` - to each photo file on the Filesystem, displaying them automatically. Thus, only the web requires reading each image from the Filesystem into base64 format. Update this function to add an _if statement_ around the Filesystem code: @@ -93,8 +93,8 @@ Next, head back over to the `loadSaved()` function we implemented for the web ea ```tsx public async loadSaved() { // Retrieve cached photo array data - const photoList = await Preferences.get({ key: this.PHOTO_STORAGE }); - this.photos = JSON.parse(photoList.value) || []; + const { value } = await Preferences.get({ key: this.PHOTO_STORAGE }); + this.photos = (value ? JSON.parse(value) : []) as UserPhoto[]; // Easiest way to detect when running on the web: // “when the platform is NOT hybrid, do this” diff --git a/docs/api/datetime.md b/docs/api/datetime.md index 85877fd9ad3..22998f8f62a 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -36,7 +36,8 @@ import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlighted import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md'; -import Theming from '@site/static/usage/v7/datetime/theming/index.md'; +import GlobalTheming from '@site/static/usage/v7/datetime/styling/global-theming/index.md'; +import WheelStyling from '@site/static/usage/v7/datetime/styling/wheel-styling/index.md'; ion-datetime: Ionic API Input for Datetime Format Picker @@ -310,13 +311,21 @@ A callback is better when the highlighted dates are recurring, such as birthdays -## テーマ +## Styling + +### グローバルテーマ Ionicの強力なテーマシステムを使用すると、特定のテーマに合わせてアプリ全体を簡単に変更することができます。この例では、[Color Creator](../theming/colors#new-color-creator) と [Stepped Color Generator](../theming/themes#stepped-color-generator) を使用して、 `ion-datetime` で使用できるローズ色のパレットを作成しました。 この方法の利点は、`ion-datetime`だけでなく、すべてのコンポーネントが自動的にこのテーマを利用できることです。 - + + +### Wheel Pickers + +The wheels used in `ion-datetime` can be styled through a combination of shadow parts and CSS variables. This applies to both the columns in wheel-style datetimes, and the month/year picker in grid-style datetimes. + + ## タイムゾーン @@ -336,7 +345,7 @@ const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; const date = new Date('2014-10-25T10:46:20Z'); // Use date-fns-tz to convert from UTC to a zoned time -const zonedTime = dateFnsTz.utcToZonedTime(date, userTimeZone); +const zonedTime = utcToZonedTime(date, userTimeZone); // Create a formatted string from the zoned time format(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone }); diff --git a/docs/api/input.md b/docs/api/input.md index c28cb4dc359..50f6f52ed63 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -36,8 +36,15 @@ import Types from '@site/static/usage/v7/input/types/index.md'; +## Labels -## Label Placement +Labels should be used to describe the input. They can be used visually, and they will also be read out by screen readers when the user is focused on the input. This makes it easy for the user to understand the intent of the input. Input has several ways to assign a label: + +- `label` property: used for plaintext labels +- `label` slot: used for custom HTML labels (experimental) +- `aria-label`: used to provide a label for screen readers but adds no visible label + +### Label Placement ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。 @@ -45,6 +52,23 @@ import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md +### Label Slot (experimental) + +While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead. + +Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior. + +import LabelSlot from '@site/static/usage/v7/input/label-slot/index.md'; + + + +### No Visible Label + +If no visible label is needed, developers should still supply an `aria-label` so the input is accessible to screen readers. + +import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.md'; + + ## Clear Options @@ -94,7 +118,27 @@ import FilteringData from '@site/static/usage/v7/input/filtering/index.md'; -## テーマ +## Input Masking + +Input masks are expressions that constrain input to support valid input values. Ionic recommends using [Maskito](https://tinkoff.github.io/maskito/getting-started/what-is-maskito) for input masking. Maskito is a lightweight, dependency-free library for masking input fields. It supports a wide range of masks, including phone numbers, credit cards, dates, and more. + +To get started with Maskito, install the library: + +```bash +npm install @maskito/core @maskito/{angular,react,vue} +``` + +import Masking from '@site/static/usage/v7/input/mask/index.md'; + + + +:::note + +Please submit bug reports with Maskito to the [Maskito Github repository](https://github.com/Tinkoff/maskito/issues). For technical support, please use the [Ionic Forum](https://forum.ionicframework.com/) or [Ionic Discord](http://chat.ionicframework.com/). + +::: + +## Theming ### Colors diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md index 2f6fd70b029..75d1412d181 100644 --- a/docs/api/item-sliding.md +++ b/docs/api/item-sliding.md @@ -39,7 +39,7 @@ import Icons from '@site/static/usage/v7/item-sliding/icons/index.md'; ## 拡張可能なオプション -オプションは、あるポイントを超えてスワイプすると、アイテムの幅いっぱいに広がるように拡張することができます。これは、 [item options](./item-options) の `ionSwipe` イベントと組み合わせることで、アイテムが完全にスワイプされたときにメソッドを呼び出すことができるようになります。 +オプションは、スワイプがあるポイントを超えると、親となる `ion-item` の幅いっぱいに展開されます。これは、[item options](./item-options) の `ionSwipe` イベントと組み合わせることで、アイテムが完全にスワイプされたときにメソッドを呼び出すことができます。 import Expandable from '@site/static/usage/v7/item-sliding/expandable/index.md'; diff --git a/docs/api/menu.md b/docs/api/menu.md index dd952566387..20902fa474d 100644 --- a/docs/api/menu.md +++ b/docs/api/menu.md @@ -18,27 +18,26 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Menuコンポーネントは、現在のビューの横からスライドするナビゲーションパネルです。 -デフォルトでは左からスライドしますが、サイドはオーバーライドできます。 -Menuの表示はmodeによって異なりますが、表示するtypeはmenuのtypeによって変更することができます。 -menu要素は、root content要素と同じ深度である必要があります。 -コンテンツにつけるMenuの数に制限はありません。 -これらはテンプレートから、またはプログラムでMenuControllerを使用して制御できます。 +メニューコンポーネントは、現在のビューの横からスライドしてくるナビゲーションドロワーです。デフォルトでは、開始側を使用し、LTRの場合は左から、RTLの場合は右からスライドさせますが、サイドをオーバーライドすることができます。メニューの表示はモードによって異なりますが、表示タイプは利用可能なメニュータイプのいずれかに変更することができます。 + +メニュー要素はルートコンテンツ要素の兄弟要素でなければなりません。コンテンツにはいくつでもメニューを付けることができる。これらのメニューはテンプレートから制御するか、`MenuController`を使用してプログラムで制御することができます。 ## 基本的な使い方 -import BasicUsage from '@site/static/usage/v7/menu/basic/index.md'; +import Basic from '@site/static/usage/v7/menu/basic/index.md'; + + - ## Menu Toggle -[ion-menu-toggle](./menu-toggle) コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。 +[menu toggle](./menu-toggle) コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。 import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md'; + ## Menu Types `type`プロパティは、アプリケーションでのメニューの表示方法をカスタマイズするために使用することができます。 @@ -47,7 +46,28 @@ import MenuType from '@site/static/usage/v7/menu/type/index.md'; -## テーマ + +## Menu Sides + +Menus are displayed on the `"start"` side by default. In apps that use left-to-right direction, this is the left side, and in right-to-left apps, this will be the right side. Menus can also be set to display on the `"end"` side, which is the opposite of `"start"`. + +If menus on both sides are needed in an app, the menu can be opened by passing the `side` value to the `open` method on `MenuController`. If a side is not provided, the menu on the `"start"` side will be opened. See the [multiple menus](#multiple-menus) section below for an example using `MenuController`. + +import Sides from '@site/static/usage/v7/menu/sides/index.md'; + + + + +## Multiple Menus + +When multiple menus exist on the same side, we need to enable the menu that we want to open before it can be opened. This can be done by calling the `enable` method on the `MenuController`. We can then call `open` on a menu based on its `menuId` or `side`. + +import Multiple from '@site/static/usage/v7/menu/multiple/index.md'; + + + + +## Theming ### CSS Shadow Parts diff --git a/docs/api/modal.md b/docs/api/modal.md index 987532187c3..3d826b76943 100644 --- a/docs/api/modal.md +++ b/docs/api/modal.md @@ -83,7 +83,7 @@ import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/f ### スワイプで閉じないようにする -開発者は、ユーザーがスワイプしてモーダルを閉じるのを防ぎたい場合があります。これは `canDismiss` のコールバック関数を設定し、`role` が `gesture` でないことをチェックすることで実現できます。 +開発者は、ユーザがスワイプしてカードやシートのモーダルを閉じないようにしたい場合があります。これは `canDismiss` にコールバック関数を設定し、`role` が `gesture` でないかチェックすることで実現できます。 import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md'; @@ -127,6 +127,12 @@ import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/bac +#### 自動の高さのシート + +import SheetAutoHeightExample from '@site/static/usage/v7/modal/sheet/auto-height/index.md'; + + + #### ハンドルの動作 シートモーダルでは、ブレークポイント間でシートをドラッグするために使用されるハンドルインジケータをオプションでレンダリングすることができます。 `handleBehavior` プロパティは、ハンドルがユーザーによってアクティブにされたときの振る舞いを設定するために使用されます。 diff --git a/docs/api/nav.md b/docs/api/nav.md index 61e847bcf50..72d04ddb32b 100644 --- a/docs/api/nav.md +++ b/docs/api/nav.md @@ -19,7 +19,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Navは、任意のコンポーネントをロードし、スタックに新しいコンポーネントを追加するためのスタンドアロンコンポーネントです。 -RouterOutletとは異なり、Navは特定のルーターに関連付けられていません。つまり、Navコンポーネントをロードして他のコンポーネントをスタックに追加しても、ルーター全体のアプリケーションには影響しません。これは、独自のサブナビゲーションを必要とするが、アプリのURLに縛られないモーダルを持つことができるユースケースに適しています。 +Router Outletとは異なり、Navは特定のルーターに縛られることはありません。つまり、Navコンポーネントをロードし、他のコンポーネントをスタックにプッシュしても、アプリ全体のルーターには影響しない。例えば、新しいコンポーネントを`ion-nav`にプッシュして、URLが更新されることを期待するべきではありません。これは、アプリのURLに関連付けずに、独自のサブナビゲーションが必要なモーダルがあるような使用例に適しています。 + +:::note +`ion-nav` is not meant to be used for routing. Instead, see the routing guides for [Angular](../angular/navigation), [React](../react/navigation), and [Vue](../vue/navigation), or [`ion-router`](./router) for vanilla JavaScript projects. +::: ## NavLinkを利用する diff --git a/docs/api/range.md b/docs/api/range.md index 2464ca37fdd..19cb292d0fd 100644 --- a/docs/api/range.md +++ b/docs/api/range.md @@ -22,18 +22,38 @@ Rangeスライダは、スライダノブを動かして、ユーザーが値の デフォルトでは、Rangeスライダーの最小値は`0`、最大値は`100`です。これは `min` と `max` プロパティで設定することができます。 -## 基本的な使い方 +## Labels -import Basic from '@site/static/usage/v7/range/basic/index.md'; +Labels should be used to describe the range. They can be used visually, and they will also be read out by screen readers when the user is focused on the range. This makes it easy for the user to understand the intent of the range. Range has several ways to assign a label: - +- `label` property: used for plaintext labels +- `label` slot: used for custom HTML labels +- `aria-label`: used to provide a label for screen readers but adds no visible label -## Label Placement +### Label Placement + +The below demo shows how to use the `labelPlacement` property to change the position of the label relative to the range. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot. import LabelsPlayground from '@site/static/usage/v7/range/labels/index.md'; +### Label Slot + +While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead. + +import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md'; + + + +### No Visible Label + +If no visible label is needed, developers should still supply an `aria-label` so the range is accessible to screen readers. + +import NoVisibleLabel from '@site/static/usage/v7/range/no-visible-label/index.md'; + + + ## Decorations Decorative elements can be passed into the `start` or `end` slots of the range. This is useful for adding icons such as low volume or high volume icons. Since these elements are decorative, they should not be announced by assistive technology such as screen readers. @@ -116,7 +136,9 @@ Developers can perform this migration one range at a time. While developers can ### 最新の構文の使い方 -Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-range` using `slot="label"`. The placement of the label can be configured using the `labelPlacement` property on `ion-range`. +Using the modern syntax involves removing the `ion-label` and passing the label to `ion-range` using the `label` property. The placement of the label can be configured using the `labelPlacement` property. + +If custom HTML is needed for the label, it can be passed directly inside the `ion-range` using the `label` slot instead. import Migration from '@site/static/usage/v7/range/migration/index.md'; diff --git a/docs/api/router-link.md b/docs/api/router-link.md index 051704b0d28..f3d9618ce42 100644 --- a/docs/api/router-link.md +++ b/docs/api/router-link.md @@ -1,10 +1,6 @@ --- title: "ion-router-link" -hide_table_of_contents: true -demoUrl: "/docs/demos/api/router-link/index.html" -demoSourceUrl: "https://github.com/ionic-team/ionic-docs/tree/main/static/demos/api/router-link/index.html" --- -import TOCInline from '@theme/TOCInline'; import Props from '@ionic-internal/component-api/v7/router-link/props.md'; import Events from '@ionic-internal/component-api/v7/router-link/events.md'; @@ -22,23 +18,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -

コンテンツ

- - - - - router linkコンポーネントは、指定されたリンクに移動するために使用します。ブラウザのアンカータグと同様に、hrefで場所を、directionで遷移のアニメーションを指定することができます。 :::note Note: このコンポーネントは、バニラおよびステンシルJavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。 ::: - - +See the [Router](./router) documentation for more information. ## プロパティ diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md index 40953824dad..6894c6757b5 100644 --- a/docs/api/searchbar.md +++ b/docs/api/searchbar.md @@ -66,7 +66,7 @@ import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md'; ## Debounce -検索バーにDebounceを設定して、`ionChange`イベントのトリガーを遅延させることができます。これは、入力に文字が入力されるたびにデータを要求するのではなく、要求を出すのを待つために使うことができるので、データを問い合わせるときに便利です。 +検索バーにDebounceを設定して、`ionInput`イベントのトリガーを遅延させることができます。これは、入力に文字が入力されるたびにデータを要求するのではなく、要求を出すのを待つために使うことができるので、データを問い合わせるときに便利です。 import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md'; diff --git a/docs/api/select.md b/docs/api/select.md index 29a5fa9e4e1..dbccd8cdea7 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -24,7 +24,41 @@ selectは、子要素 `` とともに使用する必要があ `value` が `` にセットされている場合、オプションはその値に基づいて選択済みになります。 -## 単一選択 +## Labels + +Labels should be used to describe the select. They can be used visually, and they will also be read out by screen readers when the user is focused on the select. This makes it easy for the user to understand the intent of the select. Select has several ways to assign a label: + +Select has several options for supplying a label for the component: + +- `label` property: used for plaintext labels +- `label` slot: used for custom HTML labels +- `aria-label`: used to provide a label for screen readers but adds no visible label + +### Label Placement + +Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot. + +import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md'; + + + +### Label Slot + +While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead. + +import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md'; + + + +### No Visible Label + +If no visible label is needed, developers should still supply an `aria-label` so the select is accessible to screen readers. + +import NoVisibleLabel from '@site/static/usage/v7/select/no-visible-label/index.md'; + + + +## Single Selection デフォルトでは、selectを使用すると、ユーザは1つのOptionだけを選択できます。Alertのインターフェースでは、Optionのリストがradio button形式で表示されます。action sheetインタフェースは、1つの値選択でのみ使用できます。selectコンポーネントの値は、選択したオプションの値の値を受け取ります。 @@ -48,11 +82,11 @@ import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/inde -## 複数選択 +## Multiple Selection -`multiple` 属性を追加して選択すると、複数のOptionを選択できます。複数のOptionを選択できる場合は、checkbox形式のオプションのリストがAlertオーバーレイで表示されます。selectコンポーネントの値は、選択されたすべてのオプション値の配列を受け取ります。 +By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert or popover overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values. -Note: `action-sheet` と `popover` インターフェイスでは、複数選択は動作しません +Note: the `action-sheet` interface will not work with multiple selection. import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md'; @@ -60,17 +94,17 @@ import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multipl ## Responding to Interaction -select とユーザーのインタラクションを処理する主な方法は、 `ionChange` イベント、 `ionDismiss` イベント、 `ionCancel` イベントです。これらのイベントと select が発生するその他のイベントの詳細については、[イベント](#events) を参照してください。 +The main ways of handling user interaction with the select are the `ionChange`, `ionDismiss`, and `ionCancel` events. See [Events](#events) for more details on these and other events that select fires. import RespondingToInteractionExample from '@site/static/usage/v7/select/basic/responding-to-interaction/index.md'; -## Object値について +## Object Value References -選択した値にObjectを使用する場合、これらのObjectの識別情報がサーバーまたはデータベースからのものであれば変更できますが、選択した値の識別情報は変更されません。たとえば、目的のObject値を持つ既存の値がselectにロードされたが、新しく取得されたselectオプションが異なるIDを持つようになった場合などです。これにより、元の選択がそのままの状態であっても、選択に値がまったく表示されなくなります。 +When using objects for select values, it is possible for the identities of these objects to change if they are coming from a server or database, while the selected value's identity remains the same. For example, this can occur when an existing record with the desired object value is loaded into the select, but the newly retrieved select options now have different identities. This will result in the select appearing to have no value at all, even though the original selection in still intact. -デフォルトでは、selectはObjectの等価性(`===`)を使用して、オプションが選択されているかどうかを判断します。これは`compareWiths`プロパティにプロパティ名または関数を指定することで上書きできます。 +By default, the select uses object equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property. ### Using compareWith @@ -83,15 +117,6 @@ import UsingCompareWithExample from '@site/static/usage/v7/select/objects-as-val import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/select/objects-as-values/multiple-selection/index.md'; - - -## Label Placement - -Labelsは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。 - -import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md'; - - ## Justification @@ -103,63 +128,81 @@ import JustifyExample from '@site/static/usage/v7/select/justify/index.md'; ## Filled Selects -Material Designでは、セレクトに塗りつぶしのスタイルが用意されています。セレクトの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。 +Material Design offers filled styles for a select. The `fill` property on the select can be set to either `"solid"` or `"outline"`. -`fill` スタイルはセレクトコンテナを視覚的に定義するため、`fill` を使用するセレクトは `ion-item` で使用すべきではありません。 +Since the `fill` styles visually defines the select container, selects that use `fill` should not be used in `ion-item`. import FillExample from '@site/static/usage/v7/select/fill/index.md'; -## SelectのButton +## Select Buttons -alertはふたつのボタンをサポートしています: `Cancel` と `OK` です。それぞれのボタンは、 `cancelText` と `okText` プロパティを使ってカスタマイズできます。 +The alert supports two buttons: `Cancel` and `OK`. Each button's text can be customized using the `cancelText` and `okText` properties. -`action-sheet` と `popover` インタフェースには `OK` ボタンがありません。いずれかのオプションをクリックすると、自動的にオーバーレイが閉じ、その値が選択されます。`popover` インターフェースには`Cancel`ボタンがないので、backdropをクリックするとオーバーレイが閉じます。 +The `action-sheet` and `popover` interfaces do not have an `OK` button, clicking on any of the options will automatically close the overlay and select that value. The `popover` interface does not have a `Cancel` button, clicking on the backdrop will close the overlay. import ButtonTextExample from '@site/static/usage/v7/select/customization/button-text/index.md'; -## インターフェイスオプション +## Interface Options -select は alert、action sheet、popover インターフェースを使用するので、`interfaceOptions` プロパティを通して、これらのコンポーネントにオプションを渡すことができます。これは、カスタムヘッダー、サブヘッダー、CSS クラスなどを渡すために使用できます。 +Since select uses the alert, action sheet and popover interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more. -各インターフェースが受け付けるプロパティは、[ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), [ion-popover docs](popover.md) を参照してください。 +See the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), and [ion-popover docs](popover.md) for the properties that each interface accepts. -Note: `alert` インターフェースでは、 `interfaceOptions` は `inputs` や `buttons` をオーバーライドしません。 +Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/interface-options/index.md'; -## カスタマイズ +## Customization -Selectコンポーネントを構成する2つのユニットがあり、それぞれを別々にスタイルする必要があります。 `ion-select`要素は、ビュー上で選択された値（複数可）、または何もない場合はプレースホルダー、およびドロップダウンのアイコンによって表現されます。インターフェースは、上記の [インターフェース](#interfaces) セクションで定義されており、 `ion-select` をクリックすると開かれるダイアログです。インターフェースには、 `ion-select-option` 要素を追加することで定義されるすべてのオプションが含まれています。次のセクションでは、これらのスタイリングの違いについて説明します。 +There are two units that make up the Select component and each need to be styled separately. The `ion-select` element is represented on the view by the selected value(s), or placeholder if there is none, and dropdown icon. The interface, which is defined in the [Interfaces](#interfaces) section above, is the dialog that opens when clicking on the `ion-select`. The interface contains all of the options defined by adding `ion-select-option` elements. The following sections will go over the differences between styling these. -### Select 要素のスタイリング +### Styling Select Element -前述の通り、`ion-select` 要素は、ビューに表示される値 (またはプレースホルダ) とアイコンのみで構成されています。これをカスタマイズするには、CSSと[CSSカスタムプロパティ](#css-custom-properties)を組み合わせてスタイルを設定します。 +As mentioned, the `ion-select` element consists only of the value(s), or placeholder, and icon that is displayed on the view. To customize this, style using a combination of CSS and any of the [CSS custom properties](#css-custom-properties). -また、必要な [ブラウザサポート](https://caniuse.com/#feat=mdn-css_selectors_part) に応じて、CSSのシャドウパーツを使用してセレクトのスタイルを設定することができます。part` を使用することで、要素上の任意のCSSプロパティをターゲットにすることができることに注意してください。 +Alternatively, depending on the [browser support](https://caniuse.com/#feat=mdn-css_selectors_part) needed, CSS shadow parts can be used to style the select. Notice that by using `::part`, any CSS property on the element can be targeted. import StylingSelectExample from '@site/static/usage/v7/select/customization/styling-select/index.md'; -### Select インターフェイスのスタイリング +### Styling Select Interface + +Customizing the interface dialog should be done by following the Customization section in that interface's documentation: + +- [Alert Customization](alert.md#customization) +- [Action Sheet Customization](action-sheet.md#customization) +- [Popover Customization](popover.md#customization) + +However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.md) for usage examples of customizing options. + +### Custom Toggle Icons + +The icon that displays next to the select text can be set to any [Ionicon](https://ionic.io/ionicons) using the `toggleIcon` and/or `expandedIcon` properties. + +import CustomToggleIconsExample from '@site/static/usage/v7/select/customization/custom-toggle-icons/index.md'; + + + +### Icon Flip Behavior + +By default, when the select is open, the toggle icon will automatically rotate on `md` mode and remain static on `ios` mode. This behavior can be customized using CSS. -インターフェイスのダイアログのカスタマイズは、そのインターフェイスのドキュメントのカスタマイズのセクションにしたがって行ってください。 +The below example also uses a [custom `toggleIcon`](#custom-toggle-icons) to better demonstrate the flip behavior on `ios`, since the default icon is vertically symmetrical. -- [アラートのカスタマイズ](alert.md#customization) -- [アクションシートのカスタマイズ](action-sheet.md#customization) -- [ポップオーバーのカスタマイズ](popover.md#customization) +import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/icon-flip-behavior/index.md'; -ただし、Selectオプションでは、スタイリングを容易にするためにクラスを設定し、オーバーレイオプションにクラスを渡す機能があります。オプションのカスタマイズの使用例については、[Selectオプションのドキュメント](select-option.md)を参照してください。 + ## Typeahead Component -Typeaheadやオートコンプリートの機能は、既存のIonicコンポーネントを使用して構築することができます。利用可能なスクリーンスペースを最大限に活用するために、`ion-modal`を使用することをお勧めします。 +Typeahead or autocomplete functionality can be built using existing Ionic components. We recommend using an `ion-modal` to make the best use of the available screen space. import TypeaheadExample from '@site/static/usage/v7/select/typeahead/index.md'; @@ -177,7 +220,7 @@ interface SelectChangeEventDetail { ### SelectCustomEvent -必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、`CustomEvent` インターフェースの代わりにこのインターフェースを使用することが可能です。 +While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. ```typescript interface SelectCustomEvent extends CustomEvent { @@ -186,42 +229,42 @@ interface SelectCustomEvent extends CustomEvent { } ``` -## Legacy Select Syntaxからの移行 +## Migrating from Legacy Select Syntax -Ionic 7.0では、よりシンプルなselect構文が導入されました。この新しい構文は、selectの設定に必要な定型文を減らし、アクセシビリティの問題を解決し、開発者のエクスペリエンスを向上させます。 +A simpler select syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an select, resolves accessibility issues, and improves the developer experience. -開発者は、この移行を一度に1つのセレクトで実行できます。開発者はレガシー構文を使い続けることができますが、できるだけ早く移行することをお勧めします。 +Developers can perform this migration one select at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible. -### 最新の構文の使い方 +### Using the Modern Syntax -最新の構文を使うには、2つのステップがあります。 +Using the modern syntax involves two steps: -1. ion-label` を削除して、代わりに `ion-select` の `label` プロパティを使用します。ラベルの配置は `ion-select` の `labelPlacement` プロパティを使用して設定することができる。 -2. fill` と `shape` の使い方を `ion-item` から `ion-select` に移動します。 +1. Remove `ion-label` and use the `label` property on `ion-select` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-select`. +2. Move any usage of `fill` and `shape` from `ion-item` on to `ion-select`. import Migration from '@site/static/usage/v7/select/migration/index.md'; -### レガシー構文の使用 +### Using the Legacy Syntax -Ionicは、アプリが最新のセレクト構文を使用しているかどうかをヒューリスティックで検出します。場合によっては、レガシー構文を使い続けることが望ましい場合もあります。開発者は `ion-select` の `legacy` プロパティを `true` に設定することで、そのInputインスタンスでレガシー構文を使用するように強制できます。 +Ionic uses heuristics to detect if an app is using the modern select syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-select` to `true` to force that instance of the input to use the legacy syntax. -## プロパティ +## Properties -## イベント +## Events -## メソッド +## Methods ## CSS Shadow Parts -## CSSカスタムプロパティ +## CSS Custom Properties ## Slots - \ No newline at end of file + diff --git a/docs/api/spinner.md b/docs/api/spinner.md index 7d32a2ec0ad..f9b0c64eec2 100644 --- a/docs/api/spinner.md +++ b/docs/api/spinner.md @@ -37,7 +37,15 @@ import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md'; -## CSSカスタムプロパティ +### Styling + +You may use custom CSS to style the spinner. For example, you can resize the spinner by setting the width and height. + +import Resizing from '@site/static/usage/v7/spinner/theming/resizing/index.md'; + + + +### CSS Custom Properties import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.md'; diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md index 62d6b90f0c7..4fbcf8375f2 100644 --- a/docs/api/tab-bar.md +++ b/docs/api/tab-bar.md @@ -28,7 +28,7 @@ TabBarは、[tab buttons](tab-button.md)のセットを含むUIコンポーネ ## 使い方 - + @@ -110,46 +110,6 @@ export const TabBarExample: React.FC = () => ( - - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'tab-bar-example', - styleUrl: 'tab-bar-example.css' -}) -export class TabBarExample { - render() { - return [ - - {/* Tab views */} - - - - - {/* Tab bar */} - - - - - - - - - - - - - ]; - } -} -``` - - - - - ```html diff --git a/docs/api/tab-button.md b/docs/api/tab-button.md index cb2c489accf..3f845ed55b3 100644 --- a/docs/api/tab-button.md +++ b/docs/api/tab-button.md @@ -27,7 +27,7 @@ tab buttonは、[tab bar](tab-bar.md)の内部に配置されるUIコンポー ## 使い方 - + @@ -153,68 +153,6 @@ export const TabButtonExample: React.FC = () => ( - - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'tab-button-example', - styleUrl: 'tab-button-example.css' -}) -export class TabButtonExample { - render() { - return [ - - {/* Tab views */} - - - - - - - - - - - - - - - - - {/* Tab bar */} - - - - Schedule - - - - - Speakers - - - - - Map - - - - - About - - - - ]; - } -} -``` - - - - - ```html diff --git a/docs/api/tab.md b/docs/api/tab.md index 5bbda670ff4..fbb5a07dca6 100644 --- a/docs/api/tab.md +++ b/docs/api/tab.md @@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; タブコンポーネントは、[tabs](tabs.md) の子コンポーネントです。各タブには、アプリまたは単一のビューのトップレベルのナビゲーション スタックを含めることができます。アプリには多くのタブがあり、それぞれが独立したナビゲーションを持つことができます。 :::note - Note: このコンポーネントは、バニラまたはステンシルJavaScriptプロジェクトでのみ使用する必要があります。Angular、React、Vue のアプリでは、タブコンポーネントを宣言するために `ion-tab` を使用する必要はありません。 + Note: このコンポーネントは、Vanilla JavaScriptプロジェクトでのみ使用してください。Angular、React、Vueアプリでは、`ion-tab`を使ってタブコンポーネントを宣言する必要はありません。 ::: diff --git a/docs/api/textarea.md b/docs/api/textarea.md index 27c74dc86b0..54d2823e6bc 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.md @@ -29,14 +29,40 @@ import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.md'; -## Label Placement +## Labels + +Labels should be used to describe the textarea. They can be used visually, and they will also be read out by screen readers when the user is focused on the textarea. This makes it easy for the user to understand the intent of the textarea. Textarea has several ways to assign a label: + +- `label` property: used for plaintext labels +- `label` slot: used for custom HTML labels (experimental) +- `aria-label`: used to provide a label for screen readers but adds no visible label + +### Label Placement ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。 -import Labels from '@site/static/usage/v7/textarea/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v7/textarea/label-placement/index.md'; +### Label Slot (experimental) + +While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead. + +Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior. + +import LabelSlot from '@site/static/usage/v7/textarea/label-slot/index.md'; + + + +### No Visible Label + +If no visible label is needed, developers should still supply an `aria-label` so the textarea is accessible to screen readers. + +import NoVisibleLabel from '@site/static/usage/v7/textarea/no-visible-label/index.md'; + + + ## Filled Textareas Material Designでは、テキストエリアの塗りつぶしスタイルが用意されています。アイテムの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。 diff --git a/docs/api/toast.md b/docs/api/toast.md index 18c6117e269..0e88bf4a819 100644 --- a/docs/api/toast.md +++ b/docs/api/toast.md @@ -134,19 +134,17 @@ interface ToastOptions { ### スクリーンリーダー -`ion-toast` は、デフォルトで `aria-live="polite"` と `aria-atomic="true"` が設定されています。 +`ion-toast` は、内側の `.toast-content` 要素に `role="status"` と `aria-live="polite"` を設定しています。これにより、スクリーンリーダーはトーストのメッセージとヘッダーのみをアナウンスするようになります。ボタンとアイコンはアナウンスされません。 -`aria-live` を指定すると、トーストの内容が更新されたときにスクリーンリーダがアナウンスするようになります。しかし、この属性は `'polite'` に設定されているため、スクリーン・リーダーは通常、現在のタスクを中断することはありません。開発者は `htmlAttributes` プロパティを使用して `aria-live` を `'assertive'` に設定することで、この動作をカスタマイズすることができます。これにより、トーストが更新されると、スクリーン・リーダーはすぐにユーザーに通知し、それまでの更新を中断させる可能性があります。 +`aria-live`は、トーストの内容が更新されたときに、スクリーン・リーダーがその内容をアナウンスするようにします。しかし、属性が `'polite'` に設定されているため、スクリーン・リーダーは現在のタスクを中断してはいけません。 -また、`aria-atomic="true"`を設定すると、トースト全体を1つのユニットとしてアナウンスすることができます。これはトーストのコンテンツを動的に更新するときに便利で、スクリーン・リーダーが変更されたコンテンツのみをアナウンスすることを防ぎます。 +トーストは微妙な通知であることを意図しているので、`aria-live`は決して`"assertive"`に設定されるべきではありません。もし開発者が重要なメッセージでユーザーを中断させる必要がある場合は、[alert](./alert)を使用することをお勧めします。 ### ヒント これは完全なリストではありませんが、トーストを使用する際に従うべきガイドラインをいくつか紹介します。 -* トーストの解除にユーザーの操作を必要としないようにします。例えば、トーストに "Dismiss" ボタンがあるのは良いですが、タイムアウト後にトーストが自動的に終了するようにします。通知のためにユーザーの操作が必要な場合は、代わりに [ion-alert](./alert) を使用することを検討してください。 - -* 複数のトーストを連続して開くことは避けてください。もし `aria-live` が `'assertive'` に設定されている場合、スクリーンリーダーは新しいトーストをアナウンスするために現在のタスクの読み込みを中断し、前のトーストのコンテキストが失われる可能性があります。 +* トーストの解除にユーザーの操作を必要としないようにします。例えば、トーストに "Dismiss"ボタンがあるのは良いのですが、タイムアウト時間が経過すると自動的にトーストが消えるようにすべきです。通知のためにユーザーの操作が必要な場合は、代わりに[alert](./alert)を使用することを検討してください。 * 長いメッセージのトーストの場合は、`duration`プロパティを調整して、ユーザーがトーストの内容を読むのに十分な時間を確保することを検討してください。 diff --git a/docs/cli.md b/docs/cli.md index fac64336ea2..b9ceb42ea2c 100644 --- a/docs/cli.md +++ b/docs/cli.md @@ -11,11 +11,11 @@ sidebar_label: 概要 /> -The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) は、Ionicアプリを開発する時に頼りになるツールです。 +The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) は、Ionic アプリを開発する時に頼りになるツールです。 ## インストール -Ionic CLI はnpmでグローバルにインストールできます: +Ionic CLI は npm でグローバルにインストールできます: ```shell npm install -g @ionic/cli @@ -23,7 +23,7 @@ npm install -g @ionic/cli ## Help -Ionic CLIでは `--help` フラグをつけることでコマンドのドキュメントを利用できます。 +Ionic CLI では `--help` フラグをつけることでコマンドのドキュメントを利用できます。 ```shell $ ionic --help @@ -41,14 +41,14 @@ $ ionic --help ## 構成 -Ionic CLI は、[TypeScript](/docs/reference/glossary#typescript)と [Node.js](/docs/reference/glossary#node)で構築されています。Node 10.3+をサポートしていますが、最新のNode LTSが推奨です。Follow development on the open source Github repository. +Ionic CLI は、[TypeScript](/docs/reference/glossary#typescript)と [Node.js](/docs/reference/glossary#node)で構築されています。Node 10.3+をサポートしていますが、最新の Node LTS が推奨です。Follow development on the open source Github repository. ## トラブルシューティング -Ionic CLIの問題をトラブルシューティングするには、以下の方法が役立ちます: +Ionic CLI の問題をトラブルシューティングするには、以下の方法が役立ちます: -- 最新バージョンのIonic CLIがインストールされていることを確認します。インストールされているバージョンは、`ionic --version`を実行することで取得できます。 -- 最新のNode LTSがインストールされていることを確認します。[Node & npm](/docs/intro/environment#node-npm) environment setupを参照してください。 +- 最新バージョンの Ionic CLI がインストールされていることを確認します。インストールされているバージョンは、`ionic --version`を実行することで取得できます。 +- 最新の Node LTS がインストールされていることを確認します。[Node & npm](/docs/intro/environment#node-npm) environment setup を参照してください。 - `verbose` フラグは、デバッグメッセージを表示し、問題を絞り込むことができます。 - 接続の問題は、プロキシの設定が適切でないことが原因である可能性があります。リクエストプロキシの設定については、[Using a Proxy](/docs/cli/using-a-proxy) を参照してください。 -- Ionic CLI のグローバルな設定ディレクトリは、すべてのプラットフォームで `~/.ionic` です。このディレクトリは安全に削除でき、Ionic CLIが再投入しますが、すべての設定（ユーザーセッションを含む）は失われます。このディレクトリは[CLI環境変数](/docs/cli/configuration#environment-variables)で設定します。 +- Ionic CLI のグローバルな設定ディレクトリは、すべてのプラットフォームで `~/.ionic` です。このディレクトリは安全に削除でき、Ionic CLI が再投入しますが、すべての設定（ユーザーセッションを含む）は失われます。このディレクトリは[CLI 環境変数](/docs/cli/configuration#environment-variables)で設定します。 diff --git a/docs/cli/configuration.md b/docs/cli/configuration.md index 947eb20f6b0..293fc0bc9bd 100644 --- a/docs/cli/configuration.md +++ b/docs/cli/configuration.md @@ -12,13 +12,13 @@ title: 設定 ## ファイル -設定された値はJSONファイルに格納されます。Ionic CLIは、通常`~/.ionic/config.json`にグローバル設定ファイルを設定します。通常はプロジェクトのルートディレクトリに `ionic.config.json` という名前で保存されます。 +設定された値は JSON ファイルに格納されます。Ionic CLI は、通常`~/.ionic/config.json`にグローバル設定ファイルを設定します。通常はプロジェクトのルートディレクトリに `ionic.config.json` という名前で保存されます。 -CLIには、プロジェクト設定ファイルおよびグローバルCLI設定ファイルから設定値を設定およびprintfするためのコマンドが用意されています。[`ionic config get`](commands/config-get.md) と [`ionic config set`](commands/config-set.md) の使い方については、`ionic config--help`を参照してください。 +CLI には、プロジェクト設定ファイルおよびグローバル CLI 設定ファイルから設定値を設定および printf するためのコマンドが用意されています。[`ionic config get`](commands/config-get.md) と [`ionic config set`](commands/config-set.md) の使い方については、`ionic config--help`を参照してください。 ### プロジェクト設定ファイル -各Ionicプロジェクトには、通常はプロジェクトのルートディレクトリに、プロジェクト設定ファイルがあります。以下は注釈付きの `ionic.config.json` です。 +各 Ionic プロジェクトには、通常はプロジェクトのルートディレクトリに、プロジェクト設定ファイルがあります。以下は注釈付きの `ionic.config.json` です。 ```json { @@ -49,7 +49,7 @@ CLIには、プロジェクト設定ファイルおよびグローバルCLI設 ## 環境変数 -CLIは、次の環境変数を検索します: +CLI は、次の環境変数を検索します: - `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`. - `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.md). @@ -57,7 +57,7 @@ CLIは、次の環境変数を検索します: ## Flags -CLI flagsは、CLIコマンドの動作を変更するグローバルオプションです。 +CLI flags は、CLI コマンドの動作を変更するグローバルオプションです。 - `--help`: Instead of running the command, view its help page. - `--verbose`: Show all log messages for debugging purposes. @@ -67,15 +67,15 @@ CLI flagsは、CLIコマンドの動作を変更するグローバルオプシ ## Hooks -CLIは、ビルドの前後など、特定のイベント中にスクリプトを実行できます。CLIにフックするために、以下の [npm scripts](https://docs.npmjs.com/misc/scripts) を `package.json`: ファイルで使用できます。: +CLI は、ビルドの前後など、特定のイベント中にスクリプトを実行できます。CLI にフックするために、以下の [npm scripts](https://docs.npmjs.com/misc/scripts) を `package.json`: ファイルで使用できます。: -* `ionic:serve:before`: dev server が start される前に実行されます -* `ionic:serve:after`: dev server が終了される前に実行されます -* `ionic:build:before`: web assetの構築がはじまる前に実行されます -* `ionic:build:after`: web assetの構築が終了して実行されます。 -* `ionic:capacitor:run:before` : executed on capacitor run before capacitor open is executed -* `ionic:capacitor:build:before` : executed on capacitor build before capacitor open is executed -* `ionic:capacitor:sync:after`: executed during `ionic capacitor sync` after a sync +- `ionic:serve:before`: dev server が start される前に実行されます +- `ionic:serve:after`: dev server が終了される前に実行されます +- `ionic:build:before`: web asset の構築がはじまる前に実行されます +- `ionic:build:after`: web asset の構築が終了して実行されます。 +- `ionic:capacitor:run:before` : executed on capacitor run before capacitor open is executed +- `ionic:capacitor:build:before` : executed on capacitor build before capacitor open is executed +- `ionic:capacitor:sync:after`: executed during `ionic capacitor sync` after a sync When using a shell script for any of the hooks, hook context is defined in environment variables prefixed with `IONIC_CLI_HOOK_CTX_`. @@ -93,7 +93,7 @@ IONIC_CLI_HOOK_CTX_CAPACITOR_APP_NAME=ionic-starter-app IONIC_CLI_HOOK_CTX_CAPACITOR_VERBOSE=false ``` -Hooksは `ionic.config.json` で定義することもできます。プロジェクト内でHooksオブジェクトを定義します。各キーはフックの名前(先頭に`ionic:`を付けない)で、値はJavaScriptファイルへのパスまたはパスの配列です。 +Hooks は `ionic.config.json` で定義することもできます。プロジェクト内で Hooks オブジェクトを定義します。各キーはフックの名前(先頭に`ionic:`を付けない)で、値は JavaScript ファイルへのパスまたはパスの配列です。 次の例では、ファイルは `ionic:build:before` フックでインポートされ、実行されます。 @@ -124,7 +124,7 @@ module.exports = function (ctx) { The Ionic CLI supports a multi-app configuration setup, which involves multiple Ionic apps and shared code within a single repository, or [monorepo](../reference/glossary.md#monorepo). :::note -Ionic CLIは multi-app 構成セットアップをサポートしており、複数のIonicアプリケーションと共有コードが単一のリポジトリ [monorepo](/docs/reference/glossary#monorepo) 内に存在することができます。 +Ionic CLI は multi-app 構成セットアップをサポートしており、複数の Ionic アプリケーションと共有コードが単一のリポジトリ [monorepo](/docs/reference/glossary#monorepo) 内に存在することができます。 If you're using Angular, please see [this article](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) for examples. ::: @@ -217,7 +217,7 @@ $ ionic init ## 詳細設定 -### Buildの上書き +### Build の上書き Normally, the CLI runs a hard-coded set of commands based on the project type. For example, the standard web asset build for Angular projects is `ng run app:build`. The web asset build can be overridden and `ionic build` can continue to be used by utilizing the `ionic:build` [npm script](https://docs.npmjs.com/misc/scripts). Similarly, the dev server can be overridden by using the `ionic:serve` npm script. @@ -240,4 +240,4 @@ If these variables are set in the environment, `ionic cordova build ios` will us ### 遠隔計測について -CLIからIonicに使用状況データが送信されるため、操作性が向上します。この機能を無効にするには、`ionic config set-g telemetry false`を実行してください。 +CLI から Ionic に使用状況データが送信されるため、操作性が向上します。この機能を無効にするには、`ionic config set-g telemetry false`を実行してください。 diff --git a/docs/cli/livereload.md b/docs/cli/livereload.md index 23703954a9e..4d2d160ee78 100644 --- a/docs/cli/livereload.md +++ b/docs/cli/livereload.md @@ -64,8 +64,9 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl Live reload will use HTTP by default which will cause web APIs that require a secure context (like [web crypto](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)) to fail. To establish a secure context you can use the `--ssl` argument to use HTTPS. For example, with an Angular application you can run the following to pass a certificate and private key and serve your app with HTTPS: + ```shell ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key' ``` -Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623). \ No newline at end of file +Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623). diff --git a/docs/cli/using-a-proxy.md b/docs/cli/using-a-proxy.md index 57680535f4f..76fe15db241 100644 --- a/docs/cli/using-a-proxy.md +++ b/docs/cli/using-a-proxy.md @@ -16,7 +16,7 @@ $ export HTTPS_PROXY="https://proxy.example.com:8888" # also used by npm $ export IONIC_HTTP_PROXY="http://proxy.example.com:8888" ``` -### 他のCLI +### 他の CLI Each CLI that you use must be configured separately to proxy network requests. @@ -32,7 +32,7 @@ npm config set proxy http://proxy.company.com:8888 git config --global http.proxy http://proxy.example.com:8888 ``` -### SSLの設定 +### SSL の設定 The Ionic CLI can be configured to use various SSL settings for HTTP requests. diff --git a/docs/components.md b/docs/components.md index 90cd49769ae..5fae65c456e 100644 --- a/docs/components.md +++ b/docs/components.md @@ -19,7 +19,7 @@ import DocsCards from '@components/global/DocsCards'; `} -Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成要素で構成されています。コンポーネントを使用すると、アプリのインターフェイスをすばやく構築することができます。Ionicには、modals、popups、cardsなど、さまざまなコンポーネントが用意されています。以下の例を確認して、各コンポーネントの外観と各コンポーネントの使用方法を確認してください。基本に慣れたら、各コンポーネントをカスタマイズする方法についてのアイデアを得るために [API Index](api.md) をご覧ください。 +Ionic アプリは、コンポーネントと呼ばれる高レイヤーの構成要素で構成されています。コンポーネントを使用すると、アプリのインターフェイスをすばやく構築することができます。Ionic には、modals、popups、cards など、さまざまなコンポーネントが用意されています。以下の例を確認して、各コンポーネントの外観と各コンポーネントの使用方法を確認してください。基本に慣れたら、各コンポーネントをカスタマイズする方法についてのアイデアを得るために [API Index](api.md) をご覧ください。 @@ -37,13 +37,13 @@ Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成 -

Buttonを使ってユーザが行動を起こすことができます。これはアプリと対話したり、移動したりするのに不可欠な方法です。

+

+ Buttonを使ってユーザが行動を起こすことができます。これはアプリと対話したり、移動したりするのに不可欠な方法です。 +

-

- Cardは重要なコンテンツを表示するのに最適な方法で、画像、ボタン、テキストなどを含めることができます。 -

+

Cardは重要なコンテンツを表示するのに最適な方法で、画像、ボタン、テキストなどを含めることができます。

 @@ -59,11 +59,15 @@ Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成 -

日付と時刻のピッカーは、ユーザーが日付と時刻を簡単に選択できるようにするためのインターフェースを提示することができます。

+

+ 日付と時刻のピッカーは、ユーザーが日付と時刻を簡単に選択できるようにするためのインターフェースを提示することができます。 +

-

フローティングアクションボタン（FAB）は、画面上で主要な、または最も一般的なアクションを実行する円形のボタンです。

+

+ フローティングアクションボタン（FAB）は、画面上で主要な、または最も一般的なアクションを実行する円形のボタンです。 +

@@ -95,11 +99,15 @@ Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成 -

Menuは一般的なナビゲーションパターンです。それらは常時画面上に表示することも、必要に応じて表示することもできます。

+

+ Menuは一般的なナビゲーションパターンです。それらは常時画面上に表示することも、必要に応じて表示することもできます。 +

-

Modalはは、一時的なUIを表示するために画面内および画面外にスライドするため、ログインページまたはサインアップページによく使用されます。

+

+ Modalはは、一時的なUIを表示するために画面内および画面外にスライドするため、ログインページまたはサインアップページによく使用されます。 +

@@ -139,7 +147,9 @@ Ionicアプリは、コンポーネントと呼ばれる高レイヤーの構成 -

Tabsを使用すると、タブ付きナビゲーション、つまり現代のアプリケーションの標準的なナビゲーションパターンが有効になります。

+

+ Tabsを使用すると、タブ付きナビゲーション、つまり現代のアプリケーションの標準的なナビゲーションパターンが有効になります。 +

diff --git a/docs/contributing/coc.md b/docs/contributing/coc.md index 5e9c1a94d20..b347ee6e9b0 100644 --- a/docs/contributing/coc.md +++ b/docs/contributing/coc.md @@ -8,4 +8,6 @@ We promise to extend courtesy and respect to everyone involved in this project r If any member of the community violates this code of conduct, the maintainers of the Ionic project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate. -If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at hi@ionicframework.com. +If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at devrel@ionic.io. + +Please click here to review to Ionic's full code of conduct. diff --git a/docs/core-concepts/cross-platform.md b/docs/core-concepts/cross-platform.md index 4564e31fa34..cfa520f8ee9 100644 --- a/docs/core-concepts/cross-platform.md +++ b/docs/core-concepts/cross-platform.md @@ -4,19 +4,19 @@ disableHtmlPreviews: true # クロスプラットフォーム -Ionicは、どんなプラットフォーム向けに開発を行う場合でも簡単に開発できるように構築されています。まさにクロスプラットフォームに対応したフレームワークです。つまり、Android、iOS、Electron、Progressive Web App（PWA）として実行することができ、すべてシングルコードで実装可能です。それぞれのプラットフォームにアプリを最適化するためにいくつかの気をつける点があります。 +Ionic は、どんなプラットフォーム向けに開発を行う場合でも簡単に開発できるように構築されています。まさにクロスプラットフォームに対応したフレームワークです。つまり、Android、iOS、Electron、Progressive Web App（PWA）として実行することができ、すべてシングルコードで実装可能です。それぞれのプラットフォームにアプリを最適化するためにいくつかの気をつける点があります。 -## ハードウェアAPI +## ハードウェア API -ネイティブアプリには、カメラを起動したり、位置情報を取得したりといったデバイス内の情報を取得するためのAPIを呼び出すことがよくあります。これらのAPI呼び出し処理はウェブブラウザ環境では動きません。なぜならネイティブブリッジが存在しないからです。Ionicにはこの問題に対応するためのいくつかの方法があります。 +ネイティブアプリには、カメラを起動したり、位置情報を取得したりといったデバイス内の情報を取得するための API を呼び出すことがよくあります。これらの API 呼び出し処理はウェブブラウザ環境では動きません。なぜならネイティブブリッジが存在しないからです。Ionic にはこの問題に対応するためのいくつかの方法があります。 ### Ionic Native -[Ionic Native](../native.md) はネイティブ環境内かどうか検出するための独自の内部ロジックを持っています。それにより、ネイティブ環境ではなかったりCordovaプラグインが存在しない場合は、ランタイムエラーを発生させるかわりに警告メッセージを表示させます。ネイティブ機能が存在しなくても、アプリがクラッシュすることなく動き続けるということです。 +[Ionic Native](../native.md) はネイティブ環境内かどうか検出するための独自の内部ロジックを持っています。それにより、ネイティブ環境ではなかったり Cordova プラグインが存在しない場合は、ランタイムエラーを発生させるかわりに警告メッセージを表示させます。ネイティブ機能が存在しなくても、 アプリがクラッシュすることなく動き続けるということです。 ### プラットフォーム検知 -Ionicアプリ内では、ネイティブAPIを呼び出す際はいつでも、現在の環境がネイティブ環境かどうかを確認することが推奨されます。例: +Ionic アプリ内では、ネイティブ API を呼び出す際はいつでも、現在の環境がネイティブ環境かどうかを確認することが推奨されます。例: ```tsx this.platform.ready().then(() => { @@ -29,11 +29,11 @@ this.platform.ready().then(() => { }); ``` -このコードは、ネイティブAPIが使えるかどうか不確かな環境向けに開発していたとしても非常に役に立ちます。 +このコードは、ネイティブ API が使える  かどうか不確かな環境向けに開発していたとしても非常に役に立ちます。 ### ブラウザのフォールバック -多くのネイティブAPI（例えばFile API）はブラウザで利用できません。APIは常に改良されネイティブに追いついているので、それらを調査することをお勧めします。これらの2つの点を考慮すると、アプリが実行されているプラ​​ットフォームに適応するような素晴らしいエクスペリエンスを作成するのはかなり簡単です。 +多くのネイティブ API（例えば File API）はブラウザで利用できません。API は常に改良されネイティブに追いついているので、それらを調査することをお勧めします。これらの 2 つの点を考慮すると、アプリが実行されているプラ ​​ ットフォームに適応するような素晴らしいエクスペリエンスを作成するのはかなり簡単です。 ## デスクトップ @@ -41,7 +41,7 @@ this.platform.ready().then(() => { ### レイアウト -多くの人がアプリのレイアウトに気付くことはめったにありませんが、ユーザビリティやユーザエクスペリエンスに大きな影響をあたえる可能性があります。下記の一般的なUIパターンを考えてください: +多くの人がアプリのレイアウトに気付くことはめったにありませんが、ユーザビリティやユーザエクスペリエンスに大きな影響をあたえる可能性があります。下記の一般的な UI パターンを考えてください: ```html @@ -63,7 +63,7 @@ this.platform.ready().then(() => { ``` -このコードは幅が100%の5つの項目をレンダリングします。以下に示すように、これはモバイルデバイスでは見栄えがするかもしれませんが、デスクトップブラウザで見ると異なった印象をうけます。画面幅が広いため各項目は画面全体に表示されるように引き伸ばされ、使われないスペースが多くなってしまいます。 +このコードは幅が 100%の 5 つの  項目をレンダリングします。以下に示すように、これはモバイルデバイスでは見栄えがするかもしれませんが、デスクトップブラウザで見ると異なった印象をうけます。画面幅が広いため各項目は画面全体に表示されるように引き伸ばされ、使われないスペースが多くなってしまいます。 @@ -101,7 +101,7 @@ To improve this experience, we can wrap the items in a [Grid](../api/grid.md) co ``` -全体を `ion-grid` 要素で囲むことで、Ionicのグリッドシステムがこのレイアウトに適用されます。それぞれの項目を一つの列で囲むことで、各項目をグリッド内で同じ幅に保ち、同じ行内に表示させます。 +全体を `ion-grid` 要素で囲むことで、Ionic のグリッドシステムがこのレイアウトに適用されます。それぞれの項目を一つの列で囲むことで、各項目をグリッド内で同じ幅に保ち、同じ行内に表示させます。 @@ -145,7 +145,7 @@ To improve this experience, we can wrap the items in a [Grid](../api/grid.md) co 上の例ではたくさんのコードが追加されていますが、キーポイントは下記になります: -- `ion-col`は`size`属性からその幅の値を取得します。`size`の値は使用可能な列の合計数になり、デフォルト値は12です。 +- `ion-col`は`size`属性からその幅の値を取得します。`size`の値は使用可能な列の合計数になり、デフォルト値は 12 です。 - `size`属性は`size-{breakpoint}`の形式で各画面幅に応じたブレークポイントを持つこともできます。 @@ -153,13 +153,13 @@ To improve this experience, we can wrap the items in a [Grid](../api/grid.md) co ## ストレージ -ほとんどのアプリは何らかの種類のデータをローカルに保存する必要があります。 XHRリクエストからJSONを保存する場合でも、認証トークンを保存する場合でも、さまざまなストレージの選択肢があります。さらに、アプリがネイティブ環境で実行されている場合には、SQLiteデータベースが利用され、そこにデータを格納することが可能です。これらのさまざまなストレージメカニズムにはそれぞれ独自の長所と短所がありますが、Ionic開発者はそれを心配する必要はありません。 +ほとんどのアプリは何らかの種類のデータをローカルに保存する必要があります。 XHR リクエストから JSON を保存する場合でも、認証トークンを保存する場合でも、さまざまなストレージの選択肢があります。さらに、アプリがネイティブ環境で実行されている場合には、SQLite データベースが利用され、そこにデータを格納することが可能です。これらのさまざまなストレージメカニズムにはそれぞれ独自の長所と短所がありますが、Ionic 開発者はそれを心配する必要はありません。 ### Ionic Storage -この場合、Ionicのストレージライブラリは複数の環境において最適な選択肢です。Ionicのストレージクラスは、十分にテストされたLocalForageライブラリ上に構築され、適応性の高いストレージメカニズムを提供します。 +この場合、Ionic のストレージライブラリは複数の環境において最適な選択肢です。Ionic のストレージクラスは、十分にテストされた LocalForage ライブラリ上に構築され、適応性の高いストレージメカニズムを提供します。 -現在、ネイティブ向けにはSQLiteを通して実行され、他にもIndexedDB（使用可能であれば）、WebSql、ローカルストレージなどが内部的に使用されます。これらのすべてに対応し、安定したAPIを使ってデータの読み書きが可能です。 +現在、ネイティブ向けには SQLite を通して実行され、他にも IndexedDB（使用可能であれば）、WebSql、ローカルストレージなどが内部的に使用されます。これらのすべてに対応し、安定した API を使ってデータの読み書きが可能です。 ```tsx class MyClass { @@ -177,4 +177,4 @@ class MyClass { } ``` -PouchDBといった他のストレージを選択することも可能です。 +PouchDB といった他のストレージを選択することも可能です。 diff --git a/docs/core-concepts/fundamentals.md b/docs/core-concepts/fundamentals.md index 1c73465725e..dbceb51b028 100644 --- a/docs/core-concepts/fundamentals.md +++ b/docs/core-concepts/fundamentals.md @@ -11,37 +11,47 @@ sidebar_label: 基本的な考え方 /> -Ionicアプリの開発に慣れていない人には、Ionicプロジェクトの背景にある基本的な哲学、概念、およびツールについて知ることが、理解を深めることに役立ちます。複雑なトピックに入る前に、Ionic Frameworkとは何か、そしてそれがどのように機能するかについての基本を説明します。 +Ionic アプリの開発に慣れていない人には、Ionic プロジェクトの背景にある基本的な哲学、概念、およびツールについて知ることが、理解を深めることに役立ちます。複雑なトピックに入る前に、Ionic Framework とは何か、そしてそれがどのように機能するかについての基本を説明します。 -## UIコンポーネント +## UI コンポーネント -Ionic Frameworkは、アプリケーションの構成要素として機能する、再利用可能なUIコンポーネントのライブラリです。Ionicのコンポーネントは、HTML、CSS、JavaScriptを利用した[Web標準](../reference/glossary.md#web-standards)に基づいて構築されています。コンポーネントは事前に構築されていますが、高度にカスタマイズできるようになるように設計されており、アプリで各コンポーネントを独自に作成できるため、アプリごとにオリジナルの外観を持たせることができます。具体的には、Ionicコンポーネントは、アプリ全体で外観をグローバルに変更するように簡単にテーマを設定できます。外観のカスタマイズの詳細については、[Theming](../theming/basics.md)を参照してください。 +Ionic Framework は、アプリケーションの構成要素として機能する、再利用可能な UI コンポーネントのライブラリです。Ionic のコンポーネントは、HTML、CSS、JavaScript を利用した[Web 標準](../reference/glossary.md#web-standards)に基づいて構築されています。コンポーネントは事前に構築されていますが、高度にカスタマイズできるようになるように設計されており、アプリで各コンポーネントを独自に作成できるため、アプリごとにオリジナルの外観を持たせることができます。具体的には、Ionic コンポーネントは、アプリ全体で外観をグローバルに変更するように簡単にテーマを設定できます。外観のカスタマイズの詳細については、[Theming](../theming/basics.md)を参照してください。 ## スタイルの適用 -スタイルの適用は、アプリ開発者が複数のプラットフォームで共通したベースとなるコードを使用できるIonic Frameworkに組み込まれている機能です。すべてのIonicコンポーネントは、自動的にアプリケーションが実行されているプラットフォームに外観を合わせます。たとえば、iPhoneやiPadなどのAppleデバイスは、Apple独自のiOSデザインを使用します。同様に、Androidデバイスは、Material Designと呼ばれるGoogleのデザインを使用します。 +スタイルの適用は、アプリ開発者が複数のプラットフォームで共通したベースとなるコードを使用できる Ionic Framework に組み込まれている機能です。すべての Ionic コンポーネントは、自動的にアプリケーションが実行されているプラットフォームに外観を合わせます。たとえば、iPhone や iPad などの Apple デバイスは、Apple 独自のiOS デザインを使用します。同様に、Android デバイスは、Material Designと呼ばれる Google のデザインを使用します。 -プラットフォーム間で微妙なデザイン変更を行うことで、ユーザーに使い慣れたアプリのUXを提供します。AppleのApp StoreからダウンロードしたIonicアプリはiOSテーマを使用し、AndroidのPlay StoreからダウンロードしたIonicアプリはMaterial Designテーマを取得します。ブラウザからProgressive Web Apps（PWA）として表示アプリを表示する場合、IonicはデフォルトでMaterial Designテーマを使用します。さらに、特定のシナリオで使用するプラットフォームを決定することはすべて設定可能です。スタイルの適用についてのさらなる情報は[Theming](../theming/basics.md)をご覧ください。 +プラットフォーム間で微妙なデザイン変更を行うことで、ユーザーに使い慣れたアプリの UX を提供します。Apple の App Store からダウンロードした Ionic アプリは iOS テーマを使用し、Android の Play Store からダウンロードした Ionic アプリは Material Design テーマを取得します。ブラウザから Progressive Web Apps（PWA）として表示アプリを表示する場合、Ionic はデフォルトで Material Design テーマを使用します。さらに、特定のシナリオで使用するプラットフォームを決定することはすべて設定可能です。スタイルの適用についてのさらなる情報は[Theming](../theming/basics.md)をご覧ください。 ## ナビゲーション -従来のWebアプリケーションは「線形」のナビゲーションを使用します。つまりユーザーは、ページに移動して、戻るボタンを押すと戻ることができます。 -この例としては、ユーザが、Wikipediaのようなページで、ブラウザの履歴から「進む」「戻る」をつかっているのが挙げられます。 +従来の Web アプリケーションは「線形」のナビゲーションを使用します。つまりユーザーは、ページに移動して、戻るボタンを押すと戻ることができます。 +この例としては、ユーザが、Wikipedia のようなページで、ブラウザの履歴から「進む」「戻る」をつかっているのが挙げられます。 これとは対照的に、モバイルアプリはしばしば平行な「非線形」ナビゲーションを利用します。たとえば、タブのついたインタフェースでは、タブごとにナビゲーションスタックを個別に設定できるため、ユーザがタブ間を移動したり切り替えたりするときにユーザが自分の場所を失うことはありません。 -Ionicアプリは、このモバイルナビゲーションのアプローチを採用しており、Web開発者が慣れ親しんでいるブラウザスタイルのナビゲーション概念を維持しながら、ネストすることもできる並列ナビゲーション履歴をサポートしています。 +Ionic アプリは、このモバイルナビゲーションのアプローチを採用しており、Web 開発者が慣れ親しんでいるブラウザスタイルのナビゲーション概念を維持しながら、ネストすることもできる並列ナビゲーション履歴をサポートしています。 -Angularと`@ionic/angular`で構築するアプリは、Angular Routerを使用することをお勧めします。これはAngularとIonic 4の組み合わせから使うことができます。 +Angular と`@ionic/angular`で構築するアプリは、Angular Routerを使用することをお勧めします。これは Angular と Ionic 4 の組み合わせから使うことができます。 -## Nativeアクセス +## Native アクセス -Webテクノロジで構築されたアプリ（Ionicアプリなど）の素晴らしい点は、デスクトップコンピュータ、携帯電話、タブレット、自動車、冷蔵庫など、ほとんどすべてのプラットフォームで実行できることです。Ionicアプリ用のベースとなるコードは、Web標準とこれらのプラットフォーム間で共有される共通のAPIに基づいているため、多くのプラットフォームで機能します。 +Web テクノロジで構築されたアプリ（Ionic アプリなど）の素晴らしい点は、デスクトップコンピュータ、携帯電話、タブレット、自動車、冷蔵庫など、ほとんどすべてのプラットフォームで実行できることです。Ionic アプリ用のベースとなるコードは、Web 標準とこれらのプラットフォーム間で共有される共通の API に基づいているため、多くのプラットフォームで機能します。 -Ionicの最も一般的な使用例の1つは、 App Store と Play Store の両方からダウンロードできるアプリを作成することです。iOSとAndroidの両方のソフトウェア開発キット（SDK）は、完全なネイティブSDKアクセスを可能にしながら、あらゆるIonicアプリをレンダリングする [Web Views](webview.md) を提供します。 +Ionic の最も一般的な使用例の 1 つは、 App Store と Play Store の両方からダウンロードできるアプリを作成することです。iOS と Android の両方のソフトウェア開発キット（SDK）は、完全なネイティブ SDK アクセスを可能にしながら、あらゆる Ionic アプリをレンダリングする [Web Views](webview.md) を提供します。 -Capacitor や Cordova などのプロジェクトは、IonicアプリにネイティブSDKへのアクセスを与えるためによく使われています。つまり、開発者は一般的なWeb開発ツールを使ってアプリを素早く構築することができ、かつデバイスの加速度センサー、カメラ、GPSなどのネイティブ機能にアクセスすることができるのです。 + + Capacitor + や + Cordova + などのプロジェクトは、IonicアプリにネイティブSDKへのアクセスを与えるためによく使われています。つまり、開発者は一般的なWeb開発ツールを使ってアプリを素早く構築することができ、かつデバイスの加速度センサー、カメラ、GPSなどのネイティブ機能にアクセスすることができるのです。 ## テーマ -基本的に、Ionic FrameworkはCSSを使用して構築されているので、CSSプロパティ (variables)の柔軟性を利用することができます。これにより、Web標準に準拠しながら見栄えのするアプリを設計することがとても簡単になります。デフォルトでもすばらしいものがつくれるように、私たちはテーマカラーのデフォルトセットを提供しますが、ブランド、会社、または希望のカラーパレットに合うデザインにするためにそれらを上書きすることをお勧めします。アプリケーションの背景色からテキストの色まで、すべてカスタマイズ可能です。アプリのテーマに関する詳細は[Theming](../theming/basics.md)をご覧ください。 +Ionic Framework はCSSを使って構築されており、CSS プロパティ（変数）が提供する柔軟性を活用できます。これにより、ウェブ標準に従いつつ、見栄えのするアプリを驚くほど簡単にデザインできます。私たちは、開発者がいくつかの素晴らしいデフォルトを持つことができるように色のセットを提供しますが、ブランド、企業、または希望のカラーパレットに一致するデザインを作成するためにそれらを上書きすることをお勧めします。アプリケーションの背景色からテキストの色まで、すべてカスタマイズ可能です。アプリのテーマ設定の詳細については、 [Theming](../theming/basics.md) を参照してください。 + +## イベント + +多くの Ionic コンポーネントは [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) を使用して、コンポーネントの重要な状態変化を開発者に通知します。例えば、 `ion-datetime` コンポーネントは、選択された日付が変更されると `ionChange` を発行します。 + +開発者は通常通り `click` などの標準的なイベントを使用することができる。しかし、コンポーネントの [shadow root](../reference/glossary.md#shadow) 内で発生した多くのイベントは、ホスト要素に [retargeted](https://dom.spec.whatwg.org/#retarget) されます。この結果、ユーザーが 1 回しかクリックしなくても、複数の `click` ハンドラが実行される可能性があります。そのため、開発者は Ionic コンポーネントの状態変化を適切に通知するために、Ionic のイベントに頼る必要があります。Ionic のイベントには、標準的なイベントとの衝突を避けるために`ion`というプレフィックスが付けられています。各コンポーネントのドキュメントページには、開発者がアプリケーションでリッスンできる利用可能なイベントのリストがあります。 diff --git a/docs/core-concepts/webview.md b/docs/core-concepts/webview.md index 9a1344cc5af..8c40ee79471 100644 --- a/docs/core-concepts/webview.md +++ b/docs/core-concepts/webview.md @@ -10,31 +10,31 @@ title: Web View /> -Web Viewは、ネイティブデバイス上のWebアプリを強化します。 +Web View は、ネイティブデバイス上の Web アプリを強化します。 -[Capacitor](../reference/glossary.md#capacitor) と統合されたアプリでは、Web Viewは自動的に提供されます。 +[Capacitor](../reference/glossary.md#capacitor) と統合されたアプリでは、Web View は自動的に提供されます。 -[Cordova](../reference/glossary.md#cordova)については、IonicがWeb View のプラグインを管理しています。このプラグインは、Ionic CLIを使用する際にデフォルトで提供されます。 +[Cordova](../reference/glossary.md#cordova)については、Ionic がWeb View のプラグインを管理しています。このプラグインは、Ionic CLI を使用する際にデフォルトで提供されます。 -## Web Viewとは +## Web View とは -Ionicアプリは[Web技術](../reference/glossary.md#web-standards)をつかって構築され、フルスクリーンでの表示、Webブラウザのすべての機能が使えるWeb Viewを使ってレンダリングされます。 +Ionic アプリは[Web 技術](../reference/glossary.md#web-standards)をつかって構築され、フルスクリーンでの表示、Web ブラウザのすべての機能が使える Web View を使ってレンダリングされます。 -最近のWeb Viewは、カメラ、センサー、GPS、スピーカー、Bluetoothなどのハードウェア機能のための組み込みHTML5 APIsを多数提供していますが、プラットフォーム固有のハードウェアAPIにアクセスする必要がある場合もあります。Ionicアプリでは、通常はJavaScript APIを利用してネイティブプラグインにアクセスしてブリッジする形でハードウェアAPIを利用することができます。 +最近の Web View は、カメラ、センサー、GPS、スピーカー、Bluetooth などのハードウェア機能のための組み込みHTML5 APIsを多数提供していますが、プラットフォーム固有のハードウェア API にアクセスする必要がある場合もあります。Ionic アプリでは、通常は JavaScript API を利用してネイティブプラグインにアクセスしてブリッジする形でハードウェア API を利用することができます。 ![webview architecture](/img/building/webview-architecture.png) -Ionic Web Viewプラグインは、最新のJavaScriptアプリケーションに特化しています。iOSとAndroidの両方で、アプリファイルは常に `http://` プロトコルを使ってデバイス上で動作する最適化されたHTTPサーバーにホストされます。 +Ionic Web View プラグインは、最新の JavaScript アプリケーションに特化しています。iOS と Android の両方で、アプリファイルは常に `http://` プロトコルを使ってデバイス上で動作する最適化された HTTP サーバーにホストされます。 ### CORS Web Views enforce [CORS](../reference/glossary.md#cors), so it's important that external services properly handle cross-origin requests. See the [CORS FAQs](../troubleshooting/cors.md) for information on dealing with CORS in Ionic apps. -### Fileプロトコル +### File プロトコル -CordovaとCapacitorのアプリはローカルのHTTPサーバーでホストされており、`http://` プロトコルとして提供されます。ただし、一部のプラグインは `file://` プロトコルを利用してデバイスファイルにアクセスしようとします。`http://` と `file://` プロトコルの間にある問題を回避するためには、ファイルアクセスするパスをローカルのHTTPサーバに書き換える必要があります。例えば、 `file:///path/to/device/file` はアプリがレンダリングする前に `http://://path/to/device/file` に書き換えなければなりません。 +Cordova と Capacitor のアプリはローカルの HTTP サーバーでホストされており、`http://` プロトコルとして提供されます。ただし、一部のプラグインは `file://` プロトコルを利用してデバイスファイルにアクセスしようとします。`http://` と `file://` プロトコルの間にある問題を回避するためには、ファイルアクセスするパスをローカルの HTTP サーバに書き換える必要があります。例えば、 `file:///path/to/device/file` はアプリがレンダリングする前に `http://://path/to/device/file` に書き換えなければなりません。 -Capacitorアプリの場合、URIはこのように変換します。 +Capacitor アプリの場合、URI はこのように変換します。 ```javascript import { Capacitor } from '@capacitor/core'; @@ -42,7 +42,7 @@ import { Capacitor } from '@capacitor/core'; Capacitor.convertFileSrc(filePath); ``` -Cordovaアプリでは、[Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview)　がFile URIを変換するユーティリティ関数 `window.Ionic.WebView.convertFileSrc()` を提供しています。また、対応するIonic Nativeプラグインもあります。また、対応するIonic Nativeプラグインとして [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md) があります。 +Cordova アプリでは、[Ionic Web View plugin](https://github.com/ionic-team/cordova-plugin-ionic-webview)　が File URI を変換するユーティリティ関数 `window.Ionic.WebView.convertFileSrc()` を提供しています。また、対応する Ionic Native プラグインもあります。また、対応する Ionic Native プラグインとして [`@awesome-cordova-plugins/ionic-webview`](../native/ionic-webview.md) があります。 ### 実装 diff --git a/docs/core-concepts/what-are-progressive-web-apps.md b/docs/core-concepts/what-are-progressive-web-apps.md index 2517935b7b1..47020a40c74 100644 --- a/docs/core-concepts/what-are-progressive-web-apps.md +++ b/docs/core-concepts/what-are-progressive-web-apps.md @@ -16,12 +16,12 @@ title: Progressive Web Apps ### The web...それよりもいいもの Progressive Web App (PWA) は、最新の Web 機能を使用して、ユーザーにアプリのようなエクスペリエンスを提供する Web アプリです。 -これらのアプリは、特定の要件（下記参照）を満たし、サーバーに展開され、URLからアクセスでき、検索エンジンにインデックスされます。 +これらのアプリは、特定の要件（下記参照）を満たし、サーバーに展開され、URL からアクセスでき、検索エンジンにインデックスされます。 [Capacitor](https://capacitorjs.com)と連携して、すべてのユーザーに複数のデプロイ対象を提供することができます。 -アプリをPWAとしてデプロイするだけでなく、ネイティブアプリとしてデプロイし、両方のチャネルを活用することができます。 +アプリを PWA としてデプロイするだけでなく、ネイティブアプリとしてデプロイし、両方のチャネルを活用することができます。 -Ionicでは、アプリストアへのリリースだけでなく、PWAとしてモバイルWebにデプロイすることも可能です。 +Ionic では、アプリストアへのリリースだけでなく、PWA としてモバイル Web にデプロイすることも可能です。 ### 要求されるもの @@ -37,7 +37,7 @@ Progressive Web App と見なされるには、アプリが以下の要件を満 - フレッシュ - サービスワーカーの更新プロセスにより、常に最新の情報を提供します。 -- 安全 - HTTPS経由で提供され、盗聴を防止し、コンテンツが改ざんされていないことを確認します。 +- 安全 - HTTPS 経由で提供され、盗聴を防止し、コンテンツが改ざんされていないことを確認します。 - 発見性 - W3C マニフェストとサービスワーカー登録により、「アプリケーション」として識別可能であり、検索エンジンに見つけてもらうことができます。 @@ -45,7 +45,7 @@ Progressive Web App と見なされるには、アプリが以下の要件を満 - インストール可能 - アプリストアのような煩わしさがなく、ユーザーが最も便利だと思うアプリをホーム画面に置いておくことができます。 -- リンク可能 - 複雑なインストールを必要とせず、URLで簡単に共有できます。 +- リンク可能 - 複雑なインストールを必要とせず、URL で簡単に共有できます。 @@ -53,7 +53,7 @@ Progressive Web App と見なされるには、アプリが以下の要件を満 -たくさんありますが、Ionicアプリの場合はいくつかのポイントに集約されます。 +たくさんありますが、Ionic アプリの場合はいくつかのポイントに集約されます。 #### オフライン対応 @@ -61,8 +61,8 @@ Progressive Web App と見なされるには、アプリが以下の要件を満 #### Web App Manifest -App Manifestファイルには、アプリに必要なリソースを記述する必要があります。これには、アプリの表示名、アイコン、スプラッシュ画面などが含まれます。index.html Manifest ファイルにリンクすると、ブラウザがそれを検出し、リソースを読み込むようになります。 +App Manifest ファイルには、アプリに必要なリソースを記述する必要があります。これには、アプリの表示名、アイコン、スプラッシュ画面などが含まれます。index.html Manifest ファイルにリンクすると、ブラウザがそれを検出し、リソースを読み込むようになります。 #### Service Worker -Service Workerについては、オフライン サポートの項でも触れましたが、本当は独自のセクションが必要です。Service Worker は、アプリのリソースをキャッシュするためのプログラム的な方法を提供します。JavaScript ファイルであれ、HTTP リクエストの JSON データであれ、です。プログラム的な API により、開発者はキャッシュをどのように処理するかを決定でき、他の選択肢よりもはるかに柔軟なエクスペリエンスを提供します。 +Service Worker については、オフライン サポートの項でも触れましたが、本当は独自のセクションが必要です。Service Worker は、アプリのリソースをキャッシュするためのプログラム的な方法を提供します。JavaScript ファイルであれ、HTTP リクエストの JSON データであれ、です。プログラム的な API により、開発者はキャッシュをどのように処理するかを決定でき、他の選択肢よりもはるかに柔軟なエクスペリエンスを提供します。 diff --git a/docs/deployment/app-store.md b/docs/deployment/app-store.md index ec8b0266c20..6a2a1a0a58c 100644 --- a/docs/deployment/app-store.md +++ b/docs/deployment/app-store.md @@ -13,18 +13,18 @@ sidebar_label: iOS App Store ## 要件 -iOS App Storeにアプリを提出するには、いくつかのことが必要です。 +iOS App Store にアプリを提出するには、いくつかのことが必要です。 - Xcode -- 有料のApple Developersアカウント +- 有料の Apple Developers アカウント - 有効なプロビジョニングプロファイル - アプリの開発および配布に関する証明書 -Apple Developer Programへの登録は、[このガイド](https://developer.apple.com/programs/) に従ってください。 +Apple Developer Program への登録は、[このガイド](https://developer.apple.com/programs/) に従ってください。 ## リリースビルドの作成 -iOSプラットフォームがまだ追加されていない場合は、必ず追加してください。 +iOS プラットフォームがまだ追加されていない場合は、必ず追加してください。 ```shell ionic cordova platform add ios @@ -40,34 +40,38 @@ ionic cordova build ios --prod ここから、`.xcworkspace` ファイルを `./platforms/ios/` に開き、Xcode を起動します。 +:::tip +`release`フラグを使えば、リリースビルドを自動的に生成させることもできます。 +::: + ## 署名証明書の生成 iOS 用の証明書の生成は少し複雑なので、証明書とは何か、どのように生成するかについては、[Apple の公式ドキュメント](https://help.apple.com/xcode/mac/current/#/dev3a05256b8) を必ず確認してください。 -必要な証明書とプロファイルを作成するには、[Appleのメンバーセンター](https://developer.apple.com/membercenter) にアクセスし、Appleのドキュメントに記載されているリンクをたどってください。 +必要な証明書とプロファイルを作成するには、[Apple のメンバーセンター](https://developer.apple.com/membercenter) にアクセスし、Apple のドキュメントに記載されているリンクをたどってください。 -ここで重要なのは、開発用と配布用の2種類の証明書があることです。開発用証明書は、まさに開発時のためのものです。アプリに署名して、その証明書がアクセスできるデバイスにデプロイするためのものです。 +ここで重要なのは、開発用と配布用の 2 種類の証明書があることです。開発用証明書は、まさに開発時のためのものです。アプリに署名して、その証明書がアクセスできるデバイスにデプロイするためのものです。 ディストリビューション証明書は、アプリをストアに配布するためのものです。アプリがディストリビューション証明書で署名されると、どのデバイスにもインストールできるようになります。 -## XCodeでのアプリへの署名 +## XCode でのアプリへの署名 -正しい証明書を生成した後、Xcodeに自動的に証明書を管理させるか、手動で管理するかのオプションがあります。Xcode が自動的に証明書を管理するようにすることをお勧めします。これは、選択されたビルドタイプに基づいて、正しいDevelopmentとDistributionの証明書が使用されることを確認するためです。 +正しい証明書を生成した後、Xcode に自動的に証明書を管理させるか、手動で管理するかのオプションがあります。Xcode が自動的に証明書を管理するようにすることをお勧めします。これは、選択されたビルドタイプに基づいて、正しい Development と Distribution の証明書が使用されることを確認するためです。 -このオプションを選択した状態で、`Product > Archive`メニューから`Archive`を選択します。これにより、アプリストアで配布するためのアプリのバージョンが構築されます。アーカイブが作成された後、Xcode Organizerが開かれます。 +このオプションを選択した状態で、`Product > Archive`メニューから`Archive`を選択します。これにより、アプリストアで配布するためのアプリのバージョンが構築されます。アーカイブが作成された後、Xcode Organizer が開かれます。 -Xcode Organizerは、現在のアプリのビルドを含むリストを表示します。最後のビルドを選び、「Upload to App Store」をクリックします。 -チームを選択する場所と、アプリの詳細情報、そして「Upload」ボタンがあるはずなので、それをクリックします。 +Xcode Organizer は、現在のアプリのビルドを含むリストを表示します。最後のビルドを選び、'Upload to App Store'をクリックします。 +チームを選択する場所があり、アプリの詳細情報と'Upload'ボタンをクリックします。 -アップロードに成功すると、アプリは [iTunes Connect](https://itunesconnect.apple.com) にリストされ、 "Activity" にリストされるはずです。 -ここから、TestFlightをベータテスト用に有効にしたり、アプリをAppleの承認用に送信したりすることができます。 +アップロードに成功すると、アプリは[iTunes Connect](https://itunesconnect.apple.com)の「アクティビティ」に表示されるか、[App Store Connect](https://appstoreconnect.apple.com/)の「Apps」に表示されます。ここから、アプリを TestFlight に公開したり、Apple に送信して App Store の承認を得ることができます。 ## アプリのアップデート アプリが成長するにつれ、新機能や修正を加えて更新する必要があります。 -アプリのアップデートは、Appleに新バージョンを提出するか、Appflowのようなlive update機能を使用することで可能です。 +アプリのアップデートは、Apple に新バージョンを提出するか、Appflow のようなlive update 機能を使用することで可能です。 -Live Updatesを使うと, アプリの変更は、App Storeの承認を待つことなく、Appflowのダッシュボードから直接ユーザーにリアルタイムでプッシュすることができます。 +Live Updatesを使うと, アプリの変更は、App +Storeの承認を待つことなく、Appflowのダッシュボードから直接ユーザーにリアルタイムでプッシュすることができます。 :::note iOS App Store が更新されたビルドを受け入れるには、config.xml ファイルを編集してバージョン値を増やし、上記の手順でアプリをリリース用に再構築する必要があります。 diff --git a/docs/deployment/desktop-app.md b/docs/deployment/desktop-app.md index 4ca4a877a7a..6d72e41298d 100644 --- a/docs/deployment/desktop-app.md +++ b/docs/deployment/desktop-app.md @@ -11,26 +11,26 @@ sidebar_label: Electronデスクトップアプリ /> -Ionicでデスクトップアプリケーションを構築すると、開発者はコードを100%再利用し、従来のデスクトップアプリケーションをリリースしながら、プッシュ通知などのすべてのネイティブデバイスの機能を利用することができます。このガイドでは、Electronに精通していることを前提としており、Electronアプリの「作り方」については触れません。 詳しくは Electron guide. をご覧ください。 +Ionic でデスクトップアプリケーションを構築すると、開発者はコードを 100%再利用し、従来のデスクトップアプリケーションをリリースしながら、プッシュ通知などのすべてのネイティブデバイスの機能を利用することができます。このガイドでは、Electron に精通していることを前提としており、Electron アプリの「作り方」については触れません。 詳しくは Electron guide. をご覧ください。 -## macOSアプリ +## macOS アプリ ### 要件 -macOSアプリをストアでアプリを公開するには、難しい要件が2つあります。 +macOS アプリをストアでアプリを公開するには、難しい要件が 2 つあります。 -* [Xcode](https://itunes.apple.com/us/app/xcode/id497799835?mt=12) が最新版であること -* 開発者アカウント ($100 through Apple's developer portal) が有効であること +- [Xcode](https://itunes.apple.com/us/app/xcode/id497799835?mt=12) が最新版であること +- 開発者アカウント ($100 through Apple's developer portal) が有効であること ### リリース -Electronチームは、macOS用のアプリを公開する方法についての詳細なガイドを持っています。[the docs](https://electronjs.org/docs/tutorial/mac-app-store-submission-guide) をご覧ください。 +Electron チームは、macOS 用のアプリを公開する方法についての詳細なガイドを持っています。[the docs](https://electronjs.org/docs/tutorial/mac-app-store-submission-guide) をご覧ください。 -## Windowsアプリ +## Windows アプリ ### 要件 -Windowsアプリをストアでアプリを公開するには、2つの厳しい要件があります。 +Windows アプリをストアでアプリを公開するには、2 つの厳しい要件があります。 - Windows 10 with Anniversary Update (released August 2nd, 2016) - The Windows 10 SDK, [download here](https://developer.microsoft.com/en-us/windows/downloads/windows-10-sdk) @@ -45,4 +45,4 @@ npm install -g electron-windows-store ### リリース作業 -macOSと同様、ElectronはWindows用のアプリを公開する方法についても詳細なガイドを提供している。 [the docs](https://electronjs.org/docs/tutorial/windows-store-guide) を確認してください +macOS と同様、Electron は Windows 用のアプリを公開する方法についても詳細なガイドを提供している。 [the docs](https://electronjs.org/docs/tutorial/windows-store-guide) を確認してください diff --git a/docs/deployment/play-store.md b/docs/deployment/play-store.md index e3202c3ae60..d45dd27aa13 100644 --- a/docs/deployment/play-store.md +++ b/docs/deployment/play-store.md @@ -13,19 +13,19 @@ sidebar_label: Android Play Store ## アプリのリリースビルド作成 -Android用のリリースビルドを生成するには、以下のcliコマンドを実行します。 +Android 用のリリースビルドを生成するには、以下の cli コマンドを実行します。 ```shell $ ionic cordova build android --prod --release ``` これは、アプリの `platforms/android/app/build/outputs/apk` ディレクトリにある `config.xml` の設定に基づき、リリースビルドを生成するものです。 -Ionicアプリはこのファイルにあらかじめデフォルト値が設定されていますが、ビルドをカスタマイズするために変更することができます。 +Ionic アプリはこのファイルにあらかじめデフォルト値が設定されていますが、ビルドをカスタマイズするために変更することができます。 -## APKへの署名 +## APK への署名 まず、署名されていない APK に署名する必要があります。署名鍵がすでに生成されている場合は、この手順をスキップして、代わりにその鍵を使用します。 -Android SDKに付属するkeytoolコマンドを使用して、秘密鍵を生成します。 +Android SDK に付属する keytool コマンドを使用して、秘密鍵を生成します。 ```shell $ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000 @@ -34,33 +34,33 @@ $ keytool -genkey -v -keystore my-release-key.keystore -alias alias_name -keyalg このコマンドを実行し、プロンプトに答えると、カレントディレクトリに `my-release-key.keystore` という名前のファイルが作成されます。 :::caution -このファイルを保存し、安全な場所に保管してください。このファイルを紛失すると、Google Playストアはこのアプリのアップデートを受け付けません! +このファイルを保存し、安全な場所に保管してください。このファイルを紛失すると、Google Play ストアはこのアプリのアップデートを受け付けません! ::: -署名されていないAPKに署名するには、Android SDKに含まれるjarsignerツールを実行します。 +署名されていない APK に署名するには、Android SDK に含まれる jarsigner ツールを実行します。 ```shell $ jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore HelloWorld-release-unsigned.apk alias_name ``` -最後に、APKを最適化するために、zipalignツールを実行する必要があります。 +最後に、APK を最適化するために、zipalign ツールを実行する必要があります。 `zipalign` ツールは `/path/to/Android/sdk/build-tools/VERSION/zipalign` にあります。 -例えば、Android StudioがインストールされているmacOSでは、`zipalign`は `~/Library/Android/sdk/build-tools/VERSION/zipalign` の中に入っています。 +例えば、Android Studio がインストールされている macOS では、`zipalign`は `~/Library/Android/sdk/build-tools/VERSION/zipalign` の中に入っています。 ```shell $ zipalign -v 4 HelloWorld-release-unsigned.apk HelloWorld.apk ``` -これにより、Google Playストアに受け入れられるHelloWorld.apkという最終リリースバイナリが生成されます。 +これにより、Google Play ストアに受け入れられる HelloWorld.apk という最終リリースバイナリが生成されます。 -## Google Play Storeにアプリを送信する +## Google Play Store にアプリを送信する -リリース用APKが生成されたので、Playストアのリスティングを書き、APKをアップロードすることができるようになりました。 +リリース用 APK が生成されたので、Play ストアのリスティングを書き、APK をアップロードすることができるようになりました。 まずは、[Google Play Store Developer Console](https://play.google.com/apps/publish)にアクセスし、開発者アカウントを新規に作成します。 :::note -Google Playで開発者アカウントを作るには、25USドルが必要です。 +Google Play で開発者アカウントを作るには、25US ドルが必要です。 ::: 開発者アカウントを作成したら、「アプリケーションを作成する」ボタン(Create an Application)をクリックします。 @@ -68,12 +68,12 @@ Google Playで開発者アカウントを作るには、25USドルが必要で ![Create an App button](/img/publishing/newAppGPlay.png) アプリの説明、スクリーンショット、その他の情報を入力してください。 -準備ができたら、生成された署名付きリリースAPKをアップロードし、アプリを公開します。 +準備ができたら、生成された署名付きリリース APK をアップロードし、アプリを公開します。 ## アプリのアップデート -アプリの進化に伴い、新機能の追加や修正などのアップデートが必要になってきます。アプリのアップデートは、Google Play Storeに新バージョンを提出するか、AppflowのLive Update機能のようなライブアップデートサービスを使用することで行うことができます。ライブアップデートでは、Playストアに変更を送信することなく、Appflowのダッシュボードから直接ユーザーに変更をプッシュすることができます。Live Updateについてもっと知るためにはこちらにアクセスください。 +アプリの進化に伴い、新機能の追加や修正などのアップデートが必要になってきます。アプリのアップデートは、Google Play Store に新バージョンを提出するか、Appflow の Live Update 機能のようなライブアップデートサービスを使用することで行うことができます。ライブアップデートでは、Play ストアに変更を送信することなく、Appflow のダッシュボードから直接ユーザーに変更をプッシュすることができます。Live Update についてもっと知るためにはこちらにアクセスください。 :::note -Google PlayストアでアップデートされたAPKを受け入れるには、config.xmlファイルを編集してバージョンをあげて、上記の手順に従ってアプリをリリース用に再構築する必要があります。 +Google Play ストアでアップデートされた APK を受け入れるには、config.xml ファイルを編集してバージョンをあげて、上記の手順に従ってアプリをリリース用に再構築する必要があります。 ::: diff --git a/docs/deployment/progressive-web-app.md b/docs/deployment/progressive-web-app.md index 1caee78f3bf..83ecdcfd90a 100644 --- a/docs/deployment/progressive-web-app.md +++ b/docs/deployment/progressive-web-app.md @@ -14,9 +14,9 @@ import DocsCards from '@components/global/DocsCards'; /> -Ionic Apps は Web 技術で構築されているため、ネイティブアプリと同様に Progressive Web App として動作させることができます。PWAとは何かよくわからない？Ionic の [PWA Overview](https://ionicframework.com/pwa) または [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) ページで詳細を確認できます。 +Ionic Apps は Web 技術で構築されているため、ネイティブアプリと同様に Progressive Web App として動作させることができます。PWA とは何かよくわからない？Ionic の [PWA Overview](https://ionicframework.com/pwa) または [What are Progressive Web Apps](../core-concepts/what-are-progressive-web-apps.md) ページで詳細を確認できます。 -Ionicが対応しているフレームワークについては、専用のガイドを作成し、より詳しく解説しています。以下は、AngularとReactのリンクです。 +Ionic が対応しているフレームワークについては、専用のガイドを作成し、より詳しく解説しています。以下は、Angular と React と Vue のリンクです。 diff --git a/docs/developer-resources/books.md b/docs/developer-resources/books.md index 00b4b8b77d6..483da7da603 100644 --- a/docs/developer-resources/books.md +++ b/docs/developer-resources/books.md @@ -1,8 +1,8 @@ # Books -### [Ionicで作る モバイルアプリ制作入門〈Web/iPhone/Android対応〉](https://amzn.to/2Ygk5bA) +### [Ionic で作る モバイルアプリ制作入門〈Web/iPhone/Android 対応〉](https://amzn.to/2Ygk5bA) -WEBサイトがつくれれば、モバイルアプリをつくることができる時代がやってきました。本書では、HTMLでモバイルアプリをつくるフレームワーク「Ionic」の紹介と、チュートリアルで作り方を解説しています。 +WEB サイトがつくれれば、モバイルアプリをつくることができる時代がやってきました。本書では、HTML でモバイルアプリをつくるフレームワーク「Ionic」の紹介と、チュートリアルで作り方を解説しています。 by [rdlabo](https://twitter.com/rdlabo) diff --git a/docs/developer-resources/guides/first-app-v4/ios-android-camera.md b/docs/developer-resources/guides/first-app-v4/ios-android-camera.md index 81d33c7f1c6..565be644bdf 100644 --- a/docs/developer-resources/guides/first-app-v4/ios-android-camera.md +++ b/docs/developer-resources/guides/first-app-v4/ios-android-camera.md @@ -57,7 +57,7 @@ ionic cordova plugin add cordova-plugin-camera ``` -次のステップは iOS ユーザーのみ必要です。iOS10では、開発者はなぜアプリがデバイスカメラにアクセスしたいのか理由を示さなければなりません。これを section () の `config.xml` の最後に追加します: +次のステップは iOS ユーザーのみ必要です。iOS10 では、開発者はなぜアプリがデバイスカメラにアクセスしたいのか理由を示さなければなりません。これを section () の `config.xml` の最後に追加します: ```xml diff --git a/docs/developer-resources/guides/first-app-v4/theming.md b/docs/developer-resources/guides/first-app-v4/theming.md index 199a870ae31..140d3aef091 100644 --- a/docs/developer-resources/guides/first-app-v4/theming.md +++ b/docs/developer-resources/guides/first-app-v4/theming.md @@ -2,7 +2,7 @@ 今までは、単なるカメラアプリを壮大なフォトギャラリーに発展してきました。では、Ionic のテーマ設定でフォトギャラリーを独自のものにする方法を見てみましょう。このアプリのビジュアルデザインは非常に重要で、幸運なことに、Ionic はすぐに使える多くの柔軟なテーマを提供してくれます。 -Ionic には CSS 変数として定義された9つのデフォルトカラーがあり、UI コンポーネントのカラーを変更するために使用できます: +Ionic には CSS 変数として定義された 9 つのデフォルトカラーがあり、UI コンポーネントのカラーを変更するために使用できます: ![v4-theming-defaults](/img/guides/first-app-v4/theming-defaults.png) @@ -27,7 +27,7 @@ base、contrast、shade、tint プロパティを指定することによって } ``` -アプリの UI 用にカスタムカラーパレットを作る最も簡単で強力な方法は、Ionic の[カラージェネレーター](../../../theming/color-generator.md)です。色の16進数の値を変更すると、埋め込まれたデモアプリに新しい色が自動的に反映されます。変更が終わったら、生成されたコードを直接 Ionic プロジェクトにコピー&ペーストします。 +アプリの UI 用にカスタムカラーパレットを作る最も簡単で強力な方法は、Ionic の[カラージェネレーター](../../../theming/color-generator.md)です。色の 16 進数の値を変更すると、埋め込まれたデモアプリに新しい色が自動的に反映されます。変更が終わったら、生成されたコードを直接 Ionic プロジェクトにコピー&ペーストします。 しかし待ってください、まだあります！Ionic は、アプリケーションが実行されているデバイスに基づいて、プラットフォーム固有のスタイルを自動的に提供し、ユーザーが慣れているネイティブなルック・アンド・フィールを与えます: @@ -51,6 +51,6 @@ imports: [ ![ios and android comparison](/img/guides/first-app-v3/ion-lab-md-styling.png) -CSS 変数とプラットフォーム固有のスタイルを使用すれば、とても魅力的なIonic アプリケーションを簡単に作成できます。これで、Ionic を使い始めるために必要なものがすべて揃いました。 +CSS 変数とプラットフォーム固有のスタイルを使用すれば、とても魅力的な Ionic アプリケーションを簡単に作成できます。これで、Ionic を使い始めるために必要なものがすべて揃いました。 素晴らしいアプリ作りに旅立ちましょう！ diff --git a/docs/developer-resources/tools.md b/docs/developer-resources/tools.md index bd81b630b44..00587c68984 100644 --- a/docs/developer-resources/tools.md +++ b/docs/developer-resources/tools.md @@ -2,19 +2,19 @@ ### [Angular CLI](https://github.com/angular/angular-cli) -Angular CLIの機能の詳細 +Angular CLI の機能の詳細 ### [StackBlitz](https://stackblitz.com/) -ブラウザで0から新しいIonicアプリを始めましょう！ +ブラウザで 0 から新しい Ionic アプリを始めましょう！ ### [TypeScript](https://www.typescriptlang.org/) -TypeScriptでの作業を素晴らしいものにする機能を調べてください。 +TypeScript での作業を素晴らしいものにする機能を調べてください。 ### [Glossary](../reference/glossary.md) -Ionicで開発中に利用される一般的な用語の一覧。 +Ionic で開発中に利用される一般的な用語の一覧。 ### [Starter Apps](https://ionicthemes.com) diff --git a/docs/developer-resources/videos.md b/docs/developer-resources/videos.md index 8a51e148ad3..a6c946e7532 100644 --- a/docs/developer-resources/videos.md +++ b/docs/developer-resources/videos.md @@ -2,7 +2,7 @@ ### [Ionic 2 Crash Course](https://www.youtube.com/watch?v=O2WiI9QrS5s&feature=youtu.be) -Ionic2の簡単な紹介と最初のアプリの作り方です。 +Ionic2 の簡単な紹介と最初のアプリの作り方です。 ### [Ionic & Async](https://blog.ionicframework.com/screencast-ionic-async/) @@ -10,12 +10,12 @@ Ionic2の簡単な紹介と最初のアプリの作り方です。 ### [Building a TODO app in Ionic 2](http://www.joshmorony.com/build-a-todo-app-from-scratch-with-ionic-2-video-tutorial/) -Ionic2アプリを構築する方法を学びましょう。 +Ionic2 アプリを構築する方法を学びましょう。 ### [Angular Connect: Ionic 2](https://www.youtube.com/watch?v=bAlydPwFONY) -Ionic2の裏にあるアイデアと目標を掘り下げてみましょう。 +Ionic2 の裏にあるアイデアと目標を掘り下げてみましょう。 ### [Ionic & Typings](https://blog.ionicframework.com/ionic-and-typings/) -Ionic2アプリで使用しているライブラリに、タイピングを追加する方法を学びましょう。 +Ionic2 アプリで使用しているライブラリに、タイピングを追加する方法を学びましょう。 diff --git a/docs/developing/android.md b/docs/developing/android.md index 8874bb90f0e..78c9cbb4879 100644 --- a/docs/developing/android.md +++ b/docs/developing/android.md @@ -11,53 +11,52 @@ sidebar_label: Androidでの開発 /> -このガイドでは、[Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova)を使用して、Androidエミュレータおよびデバイス上でIonicアプリケーションを実行およびデバッグする方法について説明します。AndroidアプリはWindows、macOS、Linux上で開発できます。 +このガイドでは、[Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova)を使用して、Android エミュレータおよびデバイス上で Ionic アプリケーションを実行およびデバッグする方法について説明します。Android アプリは Windows、macOS、Linux 上で開発できます。 ## Android Studio -[Android Studio](https://developer.android.com/studio/) はネイティブなAndroidアプリを作るためのIDEです。[Android SDK](../reference/glossary.md#android-sdk)が含まれており、コマンドラインで使用できるように設定する必要があります。 +[Android Studio](https://developer.android.com/studio/) はネイティブな Android アプリを作るための IDE です。[Android SDK](../reference/glossary.md#android-sdk)が含まれており、コマンドラインで使用できるように設定する必要があります。 -Androidエミュレータに必要な [Android仮想デバイス](android.md#creating-an-android-virtual-device) の作成にもAndroid Studioが使用されます。Ionicアプリは [デバイスに起動](android.md#set-up-an-android-device)することもできます。 +Android エミュレータに必要な [Android 仮想デバイス](android.md#creating-an-android-virtual-device) の作成にも Android Studio が使用されます。Ionic アプリは [デバイスに起動](android.md#set-up-an-android-device)することもできます。 :::note -Android Studioを使ってIonicアプリを開発することはお勧めしません。実際には、ネイティブのAndroidプラットフォーム向けにアプリをビルドして実行したり、Android SDKや仮想デバイスを管理するためだけに使うべきです。 +Android Studio を使って Ionic アプリを開発することはお勧めしません。実際には、ネイティブの Android プラットフォーム向けにアプリをビルドして実行したり、Android SDK や仮想デバイスを管理するためだけに使うべきです。 ::: -### Android Studioのインストール +### Android Studio のインストール -Android website からAndroid Studioをダウンロードします。より詳しいインストール手順は User Guide をご覧ください。 + + Android website + からAndroid Studioをダウンロードします。より詳しいインストール手順は + User Guide + をご覧ください。 -### Android SDKのインストール +### Android SDK のインストール -Android Studioをインストールしたら起動します。IDEは、Android SDKのインストールが必要であることを検出するはずです。**SDK Components Setup**の画面で、SDKのインストールを完了して、**Android SDKのパス**のをメモしておいてください。 +Android Studio をインストールしたら起動します。IDE は、Android SDK のインストールが必要であることを検出するはずです。**SDK Components Setup**の画面で、SDK のインストールを完了して、**Android SDK のパス**のをメモしておいてください。 ![Android Studio SDK Setup](/img/installation/android-studio-sdk-setup.png) -デフォルトでは、最新の安定版SDKプラットフォームがインストールされ、そのバージョンのAndroidをターゲットにするために必要なパッケージもコレクションされています。 +デフォルトでは、最新の安定版 SDK プラットフォームがインストールされ、そのバージョンの Android をターゲットにするために必要なパッケージもコレクションされています。 -システムイメージやその他のマイナーSDKプラットフォームパッケージをインストールするには、SDK Managerの下部にある **Show Package Details** がオンになっていることを確認する必要があります。 +システムイメージやその他のマイナー SDK プラットフォームパッケージをインストールするには、SDK Manager の下部にある **Show Package Details** がオンになっていることを確認する必要があります。 ![Android Studio SDK Manager](/img/installation/android-studio-sdk.png) -今後の参考情報ですが、Android SDKはAndroid Studioの起動画面の **Configure** » **SDK Manager** メニュー、またはAndroidプロジェクト内の **Tools** » **SDK Manager** で管理することができます。 +今後の参考情報ですが、Android SDK は Android Studio の起動画面の **Configure** » **SDK Manager** メニュー、または Android プロジェクト内の **Tools** » **SDK Manager** で管理することができます。 ### コマンドラインツールの設定 -Android SDKには便利なコマンドラインツールが付属しています。これは利用する前に、いくつかの環境変数を設定する必要があります。以下のドキュメントは、macOSとLinuxのものです。WIndowsの場合は、ターミナルセッションでの環境変数の設定と保存に関するドキュメントを確認ください。 +Android SDK には便利なコマンドラインツールが付属しています。これは利用する前に、いくつかの環境変数を設定する必要があります。以下のドキュメントは、macOS と Linux のものです。WIndows の場合は、ターミナルセッションでの環境変数の設定と保存に関するドキュメントを確認ください。 `~/.bashrc`もしくは`~/.bash_profile`、または同様のシェル起動スクリプトを、次のように変更します。s: -1. `ANDROID_SDK_ROOT`環境変数を設定します。このパスは、前のセクションでメモした**Android SDKのパス**です。 - - For Mac: - - ```shell - $ export ANDROID_SDK_ROOT=$HOME/Android/sdk - ``` - - For Linux/Windows: +1. Set the `ANDROID_SDK_ROOT` environment variable. This path should be the **Android SDK Location** used in the previous section. To find the SDK Location in Android Studio, click **File** > **Project Structure**. Select **SDK Location** in the left pane. The path is shown under **Android SDK location**. ```shell - $ export ANDROID_SDK_ROOT=$HOME/Android/Sdk + $ export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk ``` 2. Add the Android SDK command-line directories to `PATH`. Each directory corresponds to the category of command-line tool. @@ -72,33 +71,33 @@ Android SDKには` must also be added to `PATH`. + For `apksigner` and `zipalign`, `$ANDROID_SDK_ROOT/build-tools` must also be added to `PATH`. ::: -### Android仮想デバイスの作成 +### Android 仮想デバイスの作成 -Android仮想デバイス（AVD）は、AndroidエミュレータがAndroid OSを実行するために利用する設計図です。以下のドキュメントはAndroidエミュレータをセットアップするための簡単な方法です。詳細な手順と情報は、Android のドキュメントを参照ください。 +Android 仮想デバイス（AVD）は、Android エミュレータが Android OS を実行するために利用する設計図です。以下のドキュメントは Android エミュレータをセットアップするための簡単な方法です。詳細な手順と情報は、Android のドキュメントを参照ください。 -AVDはAVD Managerで管理します。Android Studioの初期画面で、 **Configure** » **AVD Manager** をクリックします。AVD Managerは、Androidプロジェクト内で、-**Tools** » **AVD Manager** メニューから開くこともできます。 +AVDs are managed with the Virtual Device Manager. In the Android Studio welcome screen, the context menu at the top right, then **Virtual Device Manager**. The Virtual Device Manager can also be opened inside Android projects in the **Tools** » **Device Manager** menu. ![AVD Setup](/img/installation/android-studio-avd-setup.png) -**Create Virtual Device** をクリックし、適切なデバイス定義を選択します。不明な場合は、 **Pixel 2** を選択し、適切なシステムイメージを選択します。よく分からない場合は、**Pie** (API 28) with Google Play servicesを選択してください。Androidのバージョンについては、Androidのバージョン履歴を参照してください。 +**Create Virtual Device** をクリックし、適切なデバイス定義を選択します。不明な場合は、 **Pixel 2** を選択し、適切なシステムイメージを選択します。よく分からない場合は、**Pie** (API 28) with Google Play services を選択してください。Android のバージョンについては、Android のバージョン履歴を参照してください。 -AVDが作成されたら、AndroidエミュレータでAVDを起動します。エミュレータを実行し続けることは、Android用のIonicアプリケーションを開発しながら検出を確実にするための最良の方法です。 +AVD が作成されたら、Android エミュレータで AVD を起動します。エミュレータを実行し続けることは、Android 用の Ionic アプリケーションを開発しながら検出を確実にするための最良の方法です。
Android Emulator Booting
-### Androidデバイスを設定する +### Android デバイスを設定する -Androidハードウェアの実物は、Ionicアプリ開発でも使用できます。しかし、最初に、デバイスを開発用にセットアップする必要があります。以下のドキュメントは開発用にAndroidデバイスを設定する簡単な方法です。詳細な手順と情報については、the Android documentationを参照してください。 +Android ハードウェアの実物は、Ionic アプリ開発でも使用できます。しかし、最初に、デバイスを開発用にセットアップする必要があります。以下のドキュメントは開発用に Android デバイスを設定する簡単な方法です。詳細な手順と情報については、the Android documentationを参照してください。 -1. デバイスのUSBデバッグを有効にします。**Settings**を開き、**Developer options**に移動し、**USB debugging**を有効にします。**Developer options**のメニューを最初に有効にする必要があるかもしれません。手順についてはthe Android documentationをご確認ください。 -1. デバイスにコンピュータへの接続許可があることを確認してください。macOSの場合、追加の設定は不要です。Windowsの場合はOEM USB driversをインストールしてください。 +1. デバイスの USB デバッグを有効にします。**Settings**を開き、**Developer options**に移動し、**USB debugging**を有効にします。**Developer options**のメニューを最初に有効にする必要があるかもしれません。手順についてはthe Android documentationをご確認ください。 +1. デバイスにコンピュータへの接続許可があることを確認してください。macOS の場合、追加の設定は不要です。Windows の場合はOEM USB driversをインストールしてください。 -USBケーブルでデバイスをコンピュータに接続し、次のコマンドを使用して接続が機能することを確認します。 +USB ケーブルでデバイスをコンピュータに接続し、次のコマンドを使用して接続が機能することを確認します。 ```shell adb devices @@ -108,14 +107,14 @@ adb devices ## Cordova Setup -Cordovaがプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitorには不要です。 +Cordova がプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitor には不要です。 ### Java -ネイティブのAndroidアプリは Java プログラミング言語でコンパイルされている。ダウンロードページからJDK 8をdownload pageします。 +Native Android apps are compiled with the Java programming language. Download the Java Development Kit (JDK) 11 if you are using **`cordova-android`** `10.0.0` or greater. :::note -残念ながら、Cordovaは最新バージョンのJavaと互換性がありません。 +If you are using any version of **`cordova-android`** below `10.0.0`, install the Java Development Kit (JDK) 8. ::: ### Gradle @@ -131,43 +130,57 @@ Cordovaがプログラムビルドをサポートするには、追加のセッ ## プロジェクトのセットアップ -アプリをAndroidシミュレータやデバイスにデプロイする前に、ネイティブプロジェクトを設定する必要があります。 +アプリを Android シミュレータやデバイスにデプロイする前に、ネイティブプロジェクトを設定する必要があります。 + +1. **Perform an Ionic build, if you haven't already.** -1. **ネイティブプロジェクトが存在しない場合は、生成します。** + ``` + $ ionic build + ``` - Capacitorでは以下の実行をサポートしています: +2. **Generate the native project, if it does not already exist.** + + Capacitor では以下の実行をサポートしています: ```shell $ ionic capacitor add android ``` - Cordovaでは以下のように実行します。 + Cordova では以下のように実行します。 ```shell $ ionic cordova prepare android ``` -2. **[Package ID](../reference/glossary.md#package-id) を設定します。** +3. **Set the [Package ID](../reference/glossary.md#package-id).** Capacitor の場合は、`capacitor.config.json` ファイルを開き、`appId` プロパティを修正します。 -Cordovaの場合は、`config.xml`ファイルを開き、ルート要素である `` の `id` 属性を変更します。詳しくは、[Cordovaのドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget)を参照してください。 +Cordova の場合は、`config.xml`ファイルを開き、ルート要素である `` の `id` 属性を変更します。詳しくは、[Cordova のドキュメント](https://cordova.apache.org/docs/en/latest/config_ref/#widget)を参照してください。 + +## Capacitor での実行 -## Capacitorでの実行 +Capacitor は Android Studio を使って、シミュレータやデバイスへのアプリの構築と実行を行います。 -CapacitorはAndroid Studioを使って、シミュレータやデバイスへのアプリの構築と実行を行います。 +1. **Ionic アプリを開発してネイティブプロジェクトに同期します** + +重要な変更が行われるたびに、変更が Android シミュレータやデバイスに表示されるようにするには、Web アセットに Ionic アプリを組み込む必要があります。次に、Web アセットをネイティブプロジェクトにコピーする必要があります。幸い、このプロセスは Ionic CLI コマンド 1 つで簡単になります。 + +```shell +$ ionic capacitor copy android +``` -1. **Ionicアプリを開発してネイティブプロジェクトに同期します** +2. **Run the app on a simulator or device.** - 重要な変更が行われるたびに、変更がAndroidシミュレータやデバイスに表示されるようにするには、WebアセットにIonicアプリを組み込む必要があります。次に、Webアセットをネイティブプロジェクトにコピーする必要があります。幸い、このプロセスはIonic CLIコマンド1つで簡単になります。 + You can open the Android Studio Project using: ```shell - $ ionic capacitor copy android + $ ionic capacitor open android ``` -2. **Android StudioでRunボタンをクリックして、シュミレーターかデバイスを選択ください。** + In Android Studio, click the Run button and then select the target simulator or device. -![Android Studio Run Button Area](/img/running/android-studio-run-button-area.png) + ![Android Studio Run Button Area](/img/running/android-studio-run-button-area.png) ### ライブリロード @@ -191,13 +204,13 @@ ionic cordova run android -l これで、アプリのソースファイルに変更があった場合、Web アセットが再構築され、再度デプロイしなくてもシミュレータやデバイスに変更が反映されるようになりました。 -## Androidアプリのデバッグ +## Android アプリのデバッグ -アプリがAndroidデバイスやエミュレータ上で動作するようになったら、 Chrome DevToolsを使ってデバッグすることができます。 +アプリが Android デバイスやエミュレータ上で動作するようになったら、 Chrome DevTools を使ってデバッグすることができます。 -### Chrome DevToolsの利用 +### Chrome DevTools の利用 -Chromeは、AndroidシミュレータとデバイスのためのWeb開発者ツールをサポートしている。シミュレータが動作している間、またはデバイスがコンピュータに接続されている間にChromeで `chrome://inspect` に移動し、デバッグが必要なアプリケーションを **Inspect** します。 +Chrome は、Android シミュレータとデバイスのための Web 開発者ツールをサポートしている。シミュレータが動作している間、またはデバイスがコンピュータに接続されている間に Chrome で `chrome://inspect` に移動し、デバッグが必要なアプリケーションを **Inspect** します。 :::note アプリケーションがデバイスまたはシミュレータで実行されていることを確認してください。実行されていない場合は、リストに表示されません。 @@ -205,9 +218,9 @@ Chromeは、AndroidシミュレータとデバイスのためのWeb開発者ツ ![Android Chrome DevTools](/img/running/android-chrome-devtools.png) -### Native Logsの表示 +### Native Logs の表示 -Android Studioで実行している場合、ネイティブログは **Logcat** に表示されます。 +Android Studio で実行している場合、ネイティブログは **Logcat** に表示されます。 :::note **Logcat** ウインドウが非表示の場合は、 **View** » **Tool Windows** » **Logcat** から有効にします。 diff --git a/docs/developing/config.md b/docs/developing/config.md index 10ad73cec8d..1bb117883fa 100644 --- a/docs/developing/config.md +++ b/docs/developing/config.md @@ -21,7 +21,6 @@ Ionic Config is not reactive. Updating the config's value after the component ha import PerComponentExample from '@site/docs/developing/config/per-component/index.md'; - ## Per-Platform Config @@ -33,7 +32,6 @@ import PerPlatformExample from '@site/docs/developing/config/per-platform/index. - ### Fallbacks The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match: @@ -59,7 +57,7 @@ Ionic Angular provides a `Config` provider for accessing the Ionic Config. | | | | --------------- | -------------------------------------------------------------------------------- | | **Description** | Returns a config value as an `any`. Returns `null` if the config is not defined. | -| **Signature** | `get(key: string, fallback?: any) => any` | +| **Signature** | `get(key: string, fallback?: any) => any` | #### Examples @@ -79,7 +77,7 @@ class AppComponent { | | | | --------------- | ------------------------------------------------------------------------------------ | | **Description** | Returns a config value as a `boolean`. Returns `false` if the config is not defined. | -| **Signature** | `getBoolean(key: string, fallback?: boolean) => boolean` | +| **Signature** | `getBoolean(key: string, fallback?: boolean) => boolean` | #### Examples @@ -99,7 +97,7 @@ class AppComponent { | | | | --------------- | ------------------------------------------------------------------------------- | | **Description** | Returns a config value as a `number`. Returns `0` if the config is not defined. | -| **Signature** | `getNumber(key: string, fallback?: number) => number` | +| **Signature** | `getNumber(key: string, fallback?: number) => number` | ## Interfaces @@ -107,41 +105,41 @@ class AppComponent { Below are the config options that Ionic uses. -| Config | Type | Description | -| ------------------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | -| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | -| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | -| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | -| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | -| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | -| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | -| `backButtonText` | `string` | Overrides the default text in all `` components. | -| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | -| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | -| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | -| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | -| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | -| `menuIcon` | `string` | Overrides the default icon in all `` components. | -| `menuType` | `string` | Overrides the default menu type for all `` components. | -| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | -| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | -| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | -| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | -| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | -| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | -| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | -| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | -| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | -| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | -| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | -| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | -| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | -| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | -| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | -| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | -| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | -| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | -| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | +| Config | Type | Description | +| --------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | +| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | +| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | +| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | +| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | +| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | +| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | +| `backButtonText` | `string` | Overrides the default text in all `` components. | +| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | +| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | +| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | +| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | +| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | +| `menuIcon` | `string` | Overrides the default icon in all `` components. | +| `menuType` | `string` | Overrides the default menu type for all `` components. | +| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | +| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | +| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | +| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | +| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | +| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | +| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | +| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | +| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | +| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | +| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | +| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | +| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | +| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | +| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | +| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | +| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | +| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | +| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | diff --git a/docs/developing/config/global/index.md b/docs/developing/config/global/index.md index bbfbaa83a71..c2358647c26 100644 --- a/docs/developing/config/global/index.md +++ b/docs/developing/config/global/index.md @@ -17,10 +17,11 @@ import TabItem from '@theme/TabItem'; window.Ionic = { config: { rippleEffect: false, - mode: 'md' - } -} + mode: 'md', + }, +}; ``` + @@ -38,10 +39,12 @@ import { IonicModule } from '@ionic/angular'; ... }) ``` + The `setupIonicReact` function must be called before rendering any Ionic components (including `IonApp`). + ```tsx title="App.tsx" import { setupIonicReact } from '@ionic/react'; @@ -50,18 +53,19 @@ setupIonicReact({ mode: 'md', }); ``` + ```tsx title="main.ts" - import { IonicVue } from '@ionic/vue'; import { createApp } from 'vue'; - + createApp(App).use(IonicVue, { rippleEffect: false, mode: 'md', }); ``` + - \ No newline at end of file + diff --git a/docs/developing/config/per-component/index.md b/docs/developing/config/per-component/index.md index 64b868a70ee..0e4aadeee60 100644 --- a/docs/developing/config/per-component/index.md +++ b/docs/developing/config/per-component/index.md @@ -19,9 +19,9 @@ import TabItem from '@theme/TabItem'; window.Ionic = { config: { // Not recommended when your app requires reactive values - backButtonText: 'Go Back' - } -} + backButtonText: 'Go Back', + }, +}; ``` **Recommended** @@ -31,7 +31,7 @@ window.Ionic = { ``` + @@ -75,6 +76,7 @@ class MyComponent { backButtonText = 'Go Back'; } ``` + @@ -85,7 +87,7 @@ import { setupIonicReact } from '@ionic/react'; setupIonicReact({ // Not recommended when your app requires reactive values - backButtonText: 'Go Back' + backButtonText: 'Go Back', }); ``` @@ -106,6 +108,7 @@ const ExampleComponent = () => { ) } ``` + @@ -114,10 +117,10 @@ const ExampleComponent = () => { ```ts import { IonicVue } from '@ionic/vue'; import { createApp } from 'vue'; - - // Not recommended when your app requires reactive values + +// Not recommended when your app requires reactive values createApp(App).use(IonicVue, { - backButtonText: 'Go Back' + backButtonText: 'Go Back', }); ``` @@ -139,5 +142,6 @@ createApp(App).use(IonicVue, { const backButtonText = ref('Go Back'); ``` + - \ No newline at end of file + diff --git a/docs/developing/config/per-platform-fallback/index.md b/docs/developing/config/per-platform-fallback/index.md index 02a5f27a3c0..6390a6120d1 100644 --- a/docs/developing/config/per-platform-fallback/index.md +++ b/docs/developing/config/per-platform-fallback/index.md @@ -34,6 +34,7 @@ const getConfig = () => { ... }); ``` + @@ -43,18 +44,18 @@ import { isPlatform, setupIonicReact } from '@ionic/react'; const getConfig = () => { if (isPlatform('hybrid')) { return { - tabButtonLayout: 'label-hide' - } + tabButtonLayout: 'label-hide', + }; } - + return { - tabButtonLayout: 'icon-top' + tabButtonLayout: 'icon-top', }; }; setupIonicReact(getConfig()); - ``` + @@ -64,16 +65,17 @@ import { IonicVue, isPlatform } from '@ionic/vue'; const getConfig = () => { if (isPlatform('hybrid')) { return { - tabButtonLayout: 'label-hide' - } + tabButtonLayout: 'label-hide', + }; } - + return { - tabButtonLayout: 'icon-top' + tabButtonLayout: 'icon-top', }; }; createApp(App).use(IonicVue, getConfig()); -```` +``` + - \ No newline at end of file + diff --git a/docs/developing/config/per-platform-overrides/index.md b/docs/developing/config/per-platform-overrides/index.md index 243cfa9c2fc..a5b8cdc490a 100644 --- a/docs/developing/config/per-platform-overrides/index.md +++ b/docs/developing/config/per-platform-overrides/index.md @@ -37,6 +37,7 @@ const getConfig = () => { ... }); ``` + @@ -59,8 +60,8 @@ const getConfig = () => { }; setupIonicReact(getConfig()); - ``` + @@ -83,6 +84,7 @@ const getConfig = () => { }; createApp(App).use(IonicVue, getConfig()); -```` +``` + - \ No newline at end of file + diff --git a/docs/developing/config/per-platform/index.md b/docs/developing/config/per-platform/index.md index 7d17299d0f8..d21553ad1cf 100644 --- a/docs/developing/config/per-platform/index.md +++ b/docs/developing/config/per-platform/index.md @@ -31,6 +31,7 @@ import { isPlatform, IonicModule } from '@ionic/angular'; ... }) ``` + @@ -45,6 +46,7 @@ setupIonicReact({ animated: !isPlatform('mobileweb'), }); ``` + @@ -58,6 +60,7 @@ import { IonicVue, isPlatform } from '@ionic/vue'; createApp(App).use(IonicVue, { animated: !isPlatform('mobileweb'), }); -```` +``` + - \ No newline at end of file + diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md index e9019a90855..d29a604d3f9 100644 --- a/docs/developing/hardware-back-button.md +++ b/docs/developing/hardware-back-button.md @@ -13,13 +13,13 @@ import TabItem from '@theme/TabItem'; /> -ハードウェアの戻るボタンは、ほとんどのAndroidデバイスにあります。ネイティブアプリケーションでは、これを使って、モデルを閉じたり、前のビューに移動したり、アプリを終了したりすることができる。既定値では、 戻るボタンを押すと、現在のビューがナビゲーションスタックからポップされ、前のビューが表示されます。ナビゲーションスタックに前のビューが存在しない場合は、何も起こりません。このガイドでは、ハードウェアの戻るボタンの動作をカスタマイズする方法について説明します。 +ハードウェアの戻るボタンは、ほとんどの Android デバイスにあります。ネイティブアプリケーションでは、これを使って、モデルを閉じたり、前のビューに移動したり、アプリを終了したりすることができる。既定値では、 戻るボタンを押すと、現在のビューがナビゲーションスタックからポップされ、前のビューが表示されます。ナビゲーションスタックに前のビューが存在しない場合は、何も起こりません。このガイドでは、ハードウェアの戻るボタンの動作をカスタマイズする方法について説明します。 :::note -ハードウェアの 「戻る」 ボタンとはAndroidデバイスの物理的な 「戻る」 ボタンのことであり、ブラウザの 「戻る」 ボタンや `ion-back-button` ボタンと混同しないでください。このガイドの情報は、Androidデバイスにのみ適用されます。 +ハードウェアの 「戻る」 ボタンとは Android デバイスの物理的な 「戻る」 ボタンのことであり、ブラウザの 「戻る」 ボタンや `ion-back-button` ボタンと混同しないでください。このガイドの情報は、Android デバイスにのみ適用されます。 ::: -## CapacitorとCordovaにおける戻るボタン +## Capacitor と Cordova における戻るボタン :::note The `@capacitor/app` package must be installed in Capacitor apps to use the hardware back button. @@ -27,18 +27,18 @@ The `@capacitor/app` package must be installed in Capacitor apps to use the hard When running in a Capacitor or Cordova application, Ionic Framework will emit an `ionBackButton` event when a user presses the hardware back button. -`ionBackButton` イベントを監視して、起動するハンドラを登録できます。このハンドラは、アプリケーションの終了や確認ダイアログのオープンなどのアクションを実行できます。各ハンドラには優先順位を割り当てる必要があります。既定では、ハードウェアの戻るボタンを押すごとに1つのハンドラだけが起動されます。優先順位の値は、どのコールバックを呼び出すかを決定するために使用されます。これが便利なのは、モーダルを開いている場合、ハードウェアの戻るボタンを押したときにモーダルが閉じられたり、アプリが後方に移動したりしないようにしたいからです。一度に1つのハンドラだけを実行すると、モーダルを閉じることができますが、戻るにはハードウェアの戻るボタンをもう一度押す必要があります。 +`ionBackButton` イベントを監視して、起動するハンドラを登録できます。このハンドラは、アプリケーションの終了や確認ダイアログのオープンなどのアクションを実行できます。各ハンドラには優先順位を割り当てる必要があります。既定では、ハードウェアの戻るボタンを押すごとに 1 つのハンドラだけが起動されます。優先順位の値は、どのコールバックを呼び出すかを決定するために使用されます。これが便利なのは、モーダルを開いている場合、ハードウェアの戻るボタンを押したときにモーダルが閉じられたり、アプリが後方に移動したりしないようにしたいからです。一度に 1 つのハンドラだけを実行すると、モーダルを閉じることができますが、戻るにはハードウェアの戻るボタンをもう一度押す必要があります。 複数のハンドラを起動したい場合があります。各ハンドラのコールバックは、フレームワークに次のハンドラを呼び出すように指示するために使用できるパラメーターとして関数を渡します。 ## ブラウザにおける戻るボタン -モバイルブラウザーやPWAでアプリを実行する場合、ハードウェアのバックボタンカスタマイズは制限されます。これは、CapacitorとCordovaが、通常のWebブラウザでは公開されないデバイスAPIを利用しているために違いがあります。例えば、ハードウェアバックボタンを使ってオーバーレイやメニューを閉じる機能は、モバイルブラウザでアプリを実行しているときにはサポートされていません。これらは既知の制限であり、現時点では簡単な解決策はありません。 +モバイルブラウザーや PWA でアプリを実行する場合、ハードウェアのバックボタンカスタマイズは制限されます。これは、Capacitor と Cordova が、通常の Web ブラウザでは公開されないデバイス API を利用しているために違いがあります。例えば、ハードウェアバックボタンを使ってオーバーレイやメニューを閉じる機能は、モバイルブラウザでアプリを実行しているときにはサポートされていません。これらは既知の制限であり、現時点では簡単な解決策はありません。 -ハードウェアバックボタンを完全にサポートするには、CapacitorまたはCordovaの使用をお勧めします。 +ハードウェアバックボタンを完全にサポートするには、Capacitor または Cordova の使用をお勧めします。 :::note -ブラウザやPWAで実行してる時、 `ionBackButton` イベントは実行されません。 +ブラウザや PWA で実行してる時、 `ionBackButton` イベントは実行されません。 ::: ## Basic Usage @@ -109,7 +109,7 @@ export default { ```` -この例では、ハードウェアバックボタンが押されたときに呼び出されるハンドラを登録しています。優先度を10に設定し、次のハンドラを呼び出すことをフレームワークに指定していません。その結果、優先順位が10未満のハンドラは呼び出されません。優先度が10より大きいハンドラが最初に呼び出されます。 +この例では、ハードウェアバックボタンが押されたときに呼び出されるハンドラを登録しています。優先度を 10 に設定し、次のハンドラを呼び出すことをフレームワークに指定していません。その結果、優先順位が 10 未満のハンドラは呼び出されません。優先度が 10 より大きいハンドラが最初に呼び出されます。 同じ優先順位値を持つハンドラが存在する場合は、最後に登録されたハンドラが呼び出されます。詳細は、 [Handlers with the Same Priorities](#handlers-with-the-same-priorities) を参照してください。 @@ -207,11 +207,11 @@ export default { ```` -この例は、次のハンドラを起動するようにIonic Frameworkに指示する方法を示しています。すべてのコールバックには、パラメータとして `processNextHandler` 関数が用意されています。これをコールすると、次のハンドラ (存在する場合) が起動されます。 +この例は、次のハンドラを起動するように Ionic Framework に指示する方法を示しています。すべてのコールバックには、パラメータとして `processNextHandler` 関数が用意されています。これをコールすると、次のハンドラ (存在する場合) が起動されます。 ## 同じ優先順位のハンドラ -内部的には、Ionic Frameworkはハードウェアのバックボタンハンドラを管理するためにプライオリティキューに似たものを使用します。優先順位の値が最大のハンドラが最初に呼び出されます。同じ優先順位のハンドラが複数存在する場合、このキューに追加された同じ優先順位の _last_ handlerが、最初に呼び出されるハンドラになります。 +内部的には、Ionic Framework はハードウェアのバックボタンハンドラを管理するためにプライオリティキューに似たものを使用します。優先順位の値が最大のハンドラが最初に呼び出されます。同じ優先順位のハンドラが複数存在する場合、このキューに追加された同じ優先順位の _last_ handler が、最初に呼び出されるハンドラになります。 ```javascript document.addEventListener('ionBackButton', (ev) => { @@ -231,11 +231,11 @@ document.addEventListener('ionBackButton', (ev) => { }); ``` -上の例では、ハンドラAとBの両方の優先度は10です。ハンドラBは最後に登録されているため、Ionic FrameworkはハンドラAを呼び出す前にハンドラBを呼び出します。 +上の例では、ハンドラ A と B の両方の優先度は 10 です。ハンドラ B は最後に登録されているため、Ionic Framework はハンドラ A を呼び出す前にハンドラ B を呼び出します。 ## アプリの終了 -場合によっては、ハードウェアの戻るボタンを押したときにアプリケーションを終了することをお勧めします。これは、Capacitor/Cordovaが提供するメソッドと組み合わせた `ionBackButton` イベントを使用することで実現できます。 +場合によっては、ハードウェアの戻るボタンを押したときにアプリケーションを終了することをお勧めします。これは、Capacitor/Cordova が提供するメソッドと組み合わせた `ionBackButton` イベントを使用することで実現できます。 ````mdx-code-block -このガイドでは、 [Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova) を使用して、iOSシミュレータおよびデバイス上でIonicアプリケーションを実行およびデバッグする方法について説明します。iOSアプリは、XcodeがインストールされているmacOS上でのみ開発できます。 +このガイドでは、 [Capacitor](../reference/glossary.md#capacitor) または [Cordova](../reference/glossary.md#cordova) を使用して、iOS シミュレータおよびデバイス上で Ionic アプリケーションを実行およびデバッグする方法について説明します。iOS アプリは、Xcode がインストールされている macOS 上でのみ開発できます。 -iOS上でIonicアプリを実行するためのワークフローは2つあります: +iOS 上で Ionic アプリを実行するためのワークフローは 2 つあります: -* [Xcodeで実行](#running-with-xcode) -* [Ionic CLIでの実行](#running-with-the-ionic-cli) +- [Xcode で実行](#running-with-xcode) +- [Ionic CLI での実行](#running-with-the-ionic-cli) -Xcodeアプローチの方が一般的に安定していますが、Ionic CLIを使ったアプローチでは、 [ライブリロード](../reference/glossary.md#livereload) 機能が提供されています。 +Xcode アプローチの方が一般的に安定していますが、Ionic CLI を使ったアプローチでは、 [ライブリロード](../reference/glossary.md#livereload) 機能が提供されています。 -## Xcodeのセットアップ +## Xcode のセットアップ -[Xcode](https://developer.apple.com/xcode/) はネイティブなiOSアプリを作るためのIDEです。これにはiOS SDKとXcodeコマンドラインツールが含まれている。XcodeはAppleアカウントで無料で[ダウンロード](https://developer.apple.com/download/)できるし、App Storeからインストールすることもできます。 +[Xcode](https://developer.apple.com/xcode/) はネイティブな iOS アプリを作るための IDE です。これには iOS SDK と Xcode コマンドラインツールが含まれている。Xcode は Apple アカウントで無料で[ダウンロード](https://developer.apple.com/download/)できるし、App Store からインストールすることもできます。 -Xcodeをインストールしたら、使用するコマンドラインツールが選択されていることを確認します: +Xcode をインストールしたら、使用するコマンドラインツールが選択されていることを確認します: ```shell xcode-select --install ``` -### Development Teamの設定 +### Development Team の設定 -すべてのiOSアプリは、開発用であってもコード署名されていなければならない。幸いなことに、Xcodeは自動コード署名によってこれを簡単にしてくれます。唯一の前提条件はApple IDです。 +すべての iOS アプリは、開発用であってもコード署名されていなければならない。幸いなことに、Xcode は自動コード署名によってこれを簡単にしてくれます。唯一の前提条件は Apple ID です。 -Xcodeを開き、 **Xcode** » **Preferences** » **Accounts** に移動します。Apple IDが表示されない場合は、追加します。ログインすると、Personal TeamがApple IDのチームリストに表示されます。 +Xcode を開き、 **Xcode** » **Preferences** » **Accounts** に移動します。Apple ID が表示されない場合は、追加します。ログインすると、Personal Team が Apple ID のチームリストに表示されます。 ![Xcode Accounts](/img/installation/ios-xcode-accounts.png) -### iOS Simulatorの作成 +### iOS Simulator の作成 -iOSシミュレータは、Mac上のiOSデバイスをエミュレートする。次のドキュメントは、iOSシミュレータを簡単にセットアップする方法です。詳細については、 [Appleのドキュメンテーション](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/simulator_help_topics/Chapter/Chapter.html) を参照してください。 +iOS シミュレータは、Mac 上の iOS デバイスをエミュレートする。次のドキュメントは、iOS シミュレータを簡単にセットアップする方法です。詳細については、 [Apple のドキュメンテーション](https://developer.apple.com/library/content/documentation/IDEs/Conceptual/simulator_help_topics/Chapter/Chapter.html) を参照してください。 -Xcodeを開き、**Window** » **Devices and Simulators** に移動します。iPhone 11シミュレータが存在しない場合は作成します。 +Xcode を開き、**Window** » **Devices and Simulators** に移動します。iPhone 11 シミュレータが存在しない場合は作成します。 ![iOS Simulators](/img/installation/ios-xcode-simulators-setup.png) ## Cordova のセットアップ -Cordovaがプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitorには不要です。 +Cordova がプログラムビルドをサポートするには、追加のセットアップが必要です。 Capacitor には不要です。 ### ios-sim & ios-deploy - [`ios-sim`](https://github.com/ios-control/ios-sim) と [`ios-deploy`](https://github.com/ios-control/ios-deploy) は、開発中にiOSシミュレータとiOSデバイスにアプリをデプロイするユーティリティです。これらは [npm](../reference/glossary.md#npm) を使ってグローバルにインストールすることができます。 +[`ios-sim`](https://github.com/ios-control/ios-sim) と [`ios-deploy`](https://github.com/ios-control/ios-deploy) は、開発中に iOS シミュレータと iOS デバイスにアプリをデプロイするユーティリティです。これらは [npm](../reference/glossary.md#npm) を使ってグローバルにインストールすることができます。 ```shell $ npm install -g ios-sim @@ -62,17 +62,17 @@ $ brew install ios-deploy ## プロジェクト設定 -アプリをiOSシミュレータやデバイスにデプロイする前に、ネイティブのプロジェクトを設定する必要があります。 +アプリを iOS シミュレータやデバイスにデプロイする前に、ネイティブのプロジェクトを設定する必要があります。 1. **ネイティブのプロジェクトが存在しない場合は、以下を実行します。** - Capacitorの場合は、以下を実行します。 + Capacitor の場合は、以下を実行します。 ```shell $ ionic capacitor add ios ``` - Cordovaの場合は、以下を実行します。 + Cordova の場合は、以下を実行します。 ```shell $ ionic cordova prepare ios @@ -80,76 +80,76 @@ $ brew install ios-deploy 1. **[Package ID](/reference/glossary.md#package-id)を設定** - Capacitorの場合は、`capacitor.config.json` ファイルを開き、`appId`プロパティを変更します。 + Capacitor の場合は、`capacitor.config.json` ファイルを開き、`appId`プロパティを変更します。 - Cordovaの場合は、`config.xml`ファイルを開き、`id`を変更し``でルートを設定します。要素の属性を変更します。詳しくは [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご覧ください。 + Cordova の場合は、`config.xml`ファイルを開き、`id`を変更し``でルートを設定します。要素の属性を変更します。詳しくは [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) をご覧ください。 1. **Xcodeでプロジェクトを開きます** - Capacitorの場合は、次のコマンドを実行してXcodeでアプリを開きます。 + Capacitor の場合は、次のコマンドを実行して Xcode でアプリを開きます。 ```shell $ ionic capacitor open ios ``` - Cordovaの場合は、Xcodeを起動したあと、**File** » **Open**からアプリを探します。アプリのディレクトリ`platforms/ios`を開きます。 + Cordova の場合は、Xcode を起動したあと、**File** » **Open**からアプリを探します。アプリのディレクトリ`platforms/ios`を開きます。 -1. **Projectのナビゲーションから、プロジェクトのrootにあるproject editorを開きます。**Identity**で、設定されている Package ID は Bundle Identifier と一致していることを確認します。** +1. **Project のナビゲーションから、プロジェクトの root にある project editor を開きます。**Identity**で、設定されている Package ID は Bundle Identifier と一致していることを確認します。** ![Xcode Identity Setup](/img/running/ios-xcode-identity-setup.png) -1. **同じproject editorのSigningで、セクションで、Automatically manage signingが有効になっていることを確認します。** 次に、Development Teamを選択してください。Development Teamを選択すると、Xcodeは自動的にプロビジョニングと署名を準備しようとします。 +1. **同じ project editor のSigningで、セクションで、Automatically manage signingが有効になっていることを確認します。** 次に、Development Team を選択してください。Development Team を選択すると、Xcode は自動的にプロビジョニングと署名を準備しようとします。 ![Xcode Signing Setup](/img/running/ios-xcode-signing-setup.png) -## Xcodeで実行する +## Xcode で実行する -このワークフローでは、Xcodeは一般的なコンパイルと署名の問題を自動的に修正できます。 +このワークフローでは、Xcode は一般的なコンパイルと署名の問題を自動的に修正できます。 -1. **Ionicアプリを開発し、それをネイティブプロジェクトと同期させます。** +1. **Ionic アプリを開発し、それをネイティブプロジェクトと同期させます。** - 変更が検知がある度に、iOSシミュレータやデバイスが変更を検知するより前に、IonicアプリをWebアセットにビルドする必要があります。その後、Webアセットをネイティブプロジェクトにコピーします。幸いなことに、このプロセスはIonic CLIコマンドひとつで簡単にできます。 + 変更が検知がある度に、iOS シミュレータやデバイスが変更を検知するより前に、Ionic アプリを Web アセットにビルドする必要があります。その後、Web アセットをネイティブプロジェクトにコピーします。幸いなことに、このプロセスは Ionic CLI コマンドひとつで簡単にできます。 - Capacitorの場合は、以下を実行します。 + Capacitor の場合は、以下を実行します。 ```shell $ ionic capacitor copy ios $ ionic capacitor update ``` - Cordovaの場合は、以下を実行します。 + Cordova の場合は、以下を実行します。 ```shell $ ionic cordova prepare ios ``` -1. **Xcodeで、目的のシミュレータまたはデバイスを選択して再生ボタンをクリックします。** +1. **Xcode で、目的のシミュレータまたはデバイスを選択して再生ボタンをクリックします。** ![Xcode Play Button Area](/img/running/ios-xcode-play-button-area.png) -## Ionic CLIを使用して実行する +## Ionic CLI を使用して実行する -Ionic CLIは、コマンドひとつで、Ionicアプリを作成、コピーし、iOSシミュレータやデバイスにデプロイできます。　`ionic serve`のような[ライブリロード](../reference/glossary.md#livereload) 機能を利用するために、開発用のサーバを遅延することもできます。 +Ionic CLI は、コマンドひとつで、Ionic アプリを作成、コピーし、iOS シミュレータやデバイスにデプロイできます。　`ionic serve`のような[ライブリロード](../reference/glossary.md#livereload) 機能を利用するために、開発用のサーバを遅延することもできます。 ライブリロードを使うと、アプリのソースファイルに加えられた変更がウェブアセットの再構築を引き起こし、その変更は再デプロイすることなくシミュレータやデバイスに反映されます。 :::caution -iOSデバイスでは、デバイスとコンピュータが同じWi-Fiネットワーク上にある必要があります。デバイスが接続できるように、devサーバーの外部URLも必要です。外部アドレスにバインドするには、--external (または--host=0.0.0.0)を使用します。 +iOS デバイスでは、デバイスとコンピュータが同じ Wi-Fi ネットワーク上にある必要があります。デバイスが接続できるように、dev サーバーの外部 URL も必要です。外部アドレスにバインドするには、--external (または--host=0.0.0.0)を使用します。 ::: -### Capacitorを使ったライブリロード +### Capacitor を使ったライブリロード -CapacitorにはXcodeを利用してアプリケーションバイナリの構築とデプロイを行います。Ionic CLIで、ライブリロードサーバを起動し、Capacitorを設定して1つのコマンドで使用できます。 +Capacitor には Xcode を利用してアプリケーションバイナリの構築とデプロイを行います。Ionic CLI で、ライブリロードサーバを起動し、Capacitor を設定して 1 つのコマンドで使用できます。 -以下を実行し、ターゲットシミュレータまたはデバイスを選択し、Xcodeの再生ボタンをクリックします: +以下を実行し、ターゲットシミュレータまたはデバイスを選択し、Xcode の再生ボタンをクリックします: ```shell ionic capacitor run ios -l --external ``` -### Cordovaを使ったライブリロード +### Cordova を使ったライブリロード -Cordovaはネイティブプロジェクトをプログラムでビルドしてデプロイすることができます。 +Cordova はネイティブプロジェクトをプログラムでビルドしてデプロイすることができます。 ライブリロードサーバを起動し、アプリをビルドしてデプロイするには、以下を実行します: @@ -157,25 +157,25 @@ Cordovaはネイティブプロジェクトをプログラムでビルドして ionic cordova run ios -l --external ``` -## iOSアプリのデバッグ +## iOS アプリのデバッグ -アプリがiOSデバイスやシミュレーター上で動くようになったら、Safariでデバッグできます。 +アプリが iOS デバイスやシミュレーター上で動くようになったら、Safari でデバッグできます。 -### Safari Web Inspectorを使う +### Safari Web Inspector を使う -SafariはiOSシミュレータとデバイスのWeb Inspectorをサポートしています。Developメニューを開いてシミュレータまたはデバイスを選択し、Ionic Appを選択してWeb Inspectorを開きます。 +Safari は iOS シミュレータとデバイスの Web Inspector をサポートしています。Develop メニューを開いてシミュレータまたはデバイスを選択し、Ionic App を選択して Web Inspector を開きます。 :::note -*Develop** メニューが非表示になってる場合は、**Safari** » **Preferences** » **Advanced** » **Show Develop menu in menu bar** から有効にします。 +\*Develop** メニューが非表示になってる場合は、**Safari** » **Preferences** » **Advanced** » **Show Develop menu in menu bar\*\* から有効にします。 -アプリがリストにない場合は、 **Settings** » **Safari** » **Advanced** » **Web Inspector** からデバイスのWeb Inspectorを有効にする必要があります。 +アプリがリストにない場合は、 **Settings** » **Safari** » **Advanced** » **Web Inspector** からデバイスの Web Inspector を有効にする必要があります。 ::: ![Safari Web Inspector](/img/running/ios-safari-web-inspector-timelines.png) ## ネイティブログの表示 -Xcodeで実行している場合、ネイティブログはXcodeの **Console** にあります。 +Xcode で実行している場合、ネイティブログは Xcode の **Console** にあります。 :::note **Console** が表示されない場合, **View** » **Debug Area** » **Activate Console**を有効化してください。 diff --git a/docs/developing/keyboard.md b/docs/developing/keyboard.md index 3e5ea1a3c22..1125091b1da 100644 --- a/docs/developing/keyboard.md +++ b/docs/developing/keyboard.md @@ -14,16 +14,16 @@ import TabItem from '@theme/TabItem'; /> -開発者がモバイルアプリやPWAを開発する際に直面する一般的な障害は、画面上のキーボードの存在を考慮してカスタマイズすることです。このガイドでは、アプリケーションでオンスクリーンキーボードを管理するためのさまざまなツールの概要を説明します。 +開発者がモバイルアプリや PWA を開発する際に直面する一般的な障害は、画面上のキーボードの存在を考慮してカスタマイズすることです。このガイドでは、アプリケーションでオンスクリーンキーボードを管理するためのさまざまなツールの概要を説明します。 ## inputmode -開発者は、 `inputmode` 属性を使用して、入力に入力できるデータのタイプを指定できます。これにより、ユーザーの入力内容に関連するボタンを含むキーボードがブラウザに表示されます。例えば、 `inputmode="email"` を指定すると、 `@` キーを含むキーボードが表示され、その他のemail入力の最適化も行われます。 +開発者は、 `inputmode` 属性を使用して、入力に入力できるデータのタイプを指定できます。これにより、ユーザーの入力内容に関連するボタンを含むキーボードがブラウザに表示されます。例えば、 `inputmode="email"` を指定すると、 `@` キーを含むキーボードが表示され、その他の email 入力の最適化も行われます。 -`inputmode` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などのIonicコンポーネントでも使用できます。 +`inputmode` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などの Ionic コンポーネントでも使用できます。 -特定のデータ型を必要とする入力では、代わりに `type` 属性を使用する必要があります。たとえば、emailの入力では、 `inputmode.` を指定するのではなく、`type="email"` -を使用する必要があります。これは、入力されるデータが常にemailの形式になるためです。一方、inputがemailまたはユーザー名を受け入れる場合は、入力されるデータが常に `type="email"` になるとは限らないため、 `inputmode=”email”` を使用するのが適切です。 +特定のデータ型を必要とする入力では、代わりに `type` 属性を使用する必要があります。たとえば、email の入力では、 `inputmode.` を指定するのではなく、`type="email"` +を使用する必要があります。これは、入力されるデータが常に email の形式になるためです。一方、input が email またはユーザー名を受け入れる場合は、入力されるデータが常に `type="email"` になるとは限らないため、 `inputmode=”email”` を使用するのが適切です。 使用可能な値のリストについては、inputmode Documentationを参照してください。 @@ -102,14 +102,14 @@ import TabItem from '@theme/TabItem'; :::note -`inputmode` 属性はChrome 66+ と iOS Safari 12.2+のデバイスでサポートされています: https://caniuse.com/#search=inputmode +`inputmode` 属性は Chrome 66+ と iOS Safari 12.2+のデバイスでサポートされています: https://caniuse.com/#search=inputmode ::: ## enterkeyhint -`enterkeyhint` 属性を使用すると、開発者は "Enter" キーに表示するアクション・ラベルまたはアイコンのタイプを指定できます。 `enterkeyhint` を使用すると、ユーザが "Enter" キーをタップしたときに何が起こるかを知ることができます。ここで指定する値は、ユーザーが何をしているかによって異なります。たとえば、ユーザーが検索ボックスに入力している場合、開発者はinputが `enterkeyhint="search"` であることを確認する必要があります。 +`enterkeyhint` 属性を使用すると、開発者は "Enter" キーに表示するアクション・ラベルまたはアイコンのタイプを指定できます。 `enterkeyhint` を使用すると、ユーザが "Enter" キーをタップしたときに何が起こるかを知ることができます。ここで指定する値は、ユーザーが何をしているかによって異なります。たとえば、ユーザーが検索ボックスに入力している場合、開発者は input が `enterkeyhint="search"` であることを確認する必要があります。 -`enterkeyhint` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などのIonicコンポーネントでも使用できます。 +`enterkeyhint` はグローバル属性であるため、通常の入力エレメントに加えて、`ion-input` や `ion-textarea` などの Ionic コンポーネントでも使用できます。 使用可能な値のリストについては、 enterkeyhint Standard を参照してください。 @@ -173,23 +173,23 @@ import TabItem from '@theme/TabItem'; ## ダークモード -デフォルトでは、キーボードテーマはOSによって決定されます。たとえば、iOSでダークモードが有効になっている場合、アプリケーションのCSSにダークテーマがない場合でも、アプリケーションのキーボードはダークテーマで表示されます。 +デフォルトでは、キーボードテーマは OS によって決定されます。たとえば、iOS でダークモードが有効になっている場合、アプリケーションの CSS にダークテーマがない場合でも、アプリケーションのキーボードはダークテーマで表示されます。 -モバイルWebブラウザやPWAでアプリを実行しているとき、キーボードを特定のテーマで表示させる方法はありません。 +モバイル Web ブラウザや PWA でアプリを実行しているとき、キーボードを特定のテーマで表示させる方法はありません。 When running an app in Capacitor or Cordova, it is possible to force the keyboard to appear with a certain theme. For more information regarding this configuration, see the Capacitor Keyboard Documentation. ## アクセサリバーを非表示にする -ウェブベースのアプリケーションを実行すると、iOSはキーボードの上にアクセサリバーを表示する。これにより、ユーザーは次または前の入力に移動したり、キーボードを閉じることができます。 +ウェブベースのアプリケーションを実行すると、iOS はキーボードの上にアクセサリバーを表示する。これにより、ユーザーは次または前の入力に移動したり、キーボードを閉じることができます。 -モバイルWebブラウザやPWAでアプリを実行する場合、アクセサリバーを非表示にする方法はありません。 +モバイル Web ブラウザや PWA でアプリを実行する場合、アクセサリバーを非表示にする方法はありません。 When running an app in Capacitor or Cordova, it is possible to hide the accessory bar. For more information regarding this configuration, see the Capacitor Keyboard Documentation. ## キーボードのライフサイクルイベント -スクリーンキーボードの存在を検出することは、そうでなければキーボードによって隠される入力の位置を調整するのに有用です。CapacitorとCordovaアプリでは、開発者は一般的にネイティブのキーボードプラグインを使ってキーボードライフサイクルイベントをListenします。モバイルブラウザやPWAで動作するアプリでは、サポートされていればVisual Viewport APIを使用することができる。Ionic Frameworkはこれらの両方のアプローチをラップし、`window` に `ionKeyboardDidShow` と `ionKeyboardDidHide` イベントを発行します。 `ionKeyboardDidShow` のイベントペイロードには、キーボードの高さの近似値がピクセル単位で含まれています。 +スクリーンキーボードの存在を検出することは、そうでなければキーボードによって隠される入力の位置を調整するのに有用です。Capacitor と Cordova アプリでは、開発者は一般的にネイティブのキーボードプラグインを使ってキーボードライフサイクルイベントを Listen します。モバイルブラウザや PWA で動作するアプリでは、サポートされていれば Visual Viewport API を使用することができる。Ionic Framework はこれらの両方のアプローチをラップし、`window` に `ionKeyboardDidShow` と `ionKeyboardDidHide` イベントを発行します。 `ionKeyboardDidShow` のイベントペイロードには、キーボードの高さの近似値がピクセル単位で含まれています。 ### Usage @@ -269,5 +269,5 @@ watch(keyboardHeight, () => { ```` :::note -モバイルWebブラウザやPWAで動作するアプリでは、 Keyboard Lifecycle EventsはChrome 62以降とiOS Safari 13.0以降でのみサポートされています。 +モバイル Web ブラウザや PWA で動作するアプリでは、 Keyboard Lifecycle Events は Chrome 62 以降と iOS Safari 13.0 以降でのみサポートされています。 ::: diff --git a/docs/developing/previewing.md b/docs/developing/previewing.md index a2f494f10e1..205f6873632 100644 --- a/docs/developing/previewing.md +++ b/docs/developing/previewing.md @@ -13,12 +13,12 @@ title: プレビュー ネイティブ機能のテストには、ターゲットとするプラットフォームやニーズに応じて、さまざまなオプションがあります。 - Web ブラウザでローカルに実行する (ネイティブ機能については [Platform Detection](../core-concepts/cross-platform.md) を使用します) -- [iOSへのデプロイ](ios.md) -- [Androidへのデプロイ](android.md) +- [iOS へのデプロイ](ios.md) +- [Android へのデプロイ](android.md) ## ウェブブラウザでローカルに実行する -Ionic の最も強力な機能の1つは、アプリ開発の大部分をデスクトップ上のブラウザで行えることです。従来のウェブ開発ツール（Chrome/Safari/Firefoxの開発ツール）に完全にアクセスできるため、コードを書いてから、再コンパイルやシミュレーターやデバイスへのデプロイの必要なく、迅速にテスト/デバッグを行うことが可能です。 +Ionic の最も強力な機能の 1 つは、アプリ開発の大部分をデスクトップ上のブラウザで行えることです。従来のウェブ開発ツール（Chrome/Safari/Firefox の開発ツール）に完全にアクセスできるため、コードを書いてから、再コンパイルやシミュレーターやデバイスへのデプロイの必要なく、迅速にテスト/デバッグを行うことが可能です。 これを行うには、プロジェクトのディレクトリで、コマンドラインから `ionic serve` を実行します。 @@ -47,7 +47,7 @@ $ ionic serve ### Chrome -アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/Linuxでは`Ctrl+Shift+I`、Macでは`Cmd+Opt+I`を押して、Chrome開発者ツールを開きます。 +アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/Linux では`Ctrl+Shift+I`、Mac では`Cmd+Opt+I`を押して、Chrome 開発者ツールを開きます。 Chrome Dev Tools @@ -59,11 +59,11 @@ $ ionic serve :::note -前提条件：Safariの詳細オプションで「メニューバーに開発メニューを表示する」オプションが有効になっている必要があります。 +前提条件：Safari の詳細オプションで「メニューバーに開発メニューを表示する」オプションが有効になっている必要があります。 ::: -アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。Safariの**Develop**メニューを選択し、**Enter Responsive Design Mode** を選択します。または、キーボードショートカット `Cmd+Opt+R` を使用することもできます。 +アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。Safari の**Develop**メニューを選択し、**Enter Responsive Design Mode** を選択します。または、キーボードショートカット `Cmd+Opt+R` を使用することもできます。 Safari Responsive Design Mode @@ -73,7 +73,7 @@ $ ionic serve ### Firefox -アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/LinuxではCtrl+Shift+M`、MacではCmd+Opt+M`を押して、Firefoxの開発者ツールを開きます。 +アプリケーションを、サービスを受けるローカルまたはリモートのアドレスで開いてください。例えば、`http://localhost:4200`です。次に、Windows/Linux では Ctrl+Shift+M`、MacではCmd+Opt+M`を押して、Firefox の開発者ツールを開きます。 Firefox Responsive Design Mode diff --git a/docs/developing/scaffolding.md b/docs/developing/scaffolding.md index 71e2d2e70a1..4b653c2eebf 100644 --- a/docs/developing/scaffolding.md +++ b/docs/developing/scaffolding.md @@ -10,7 +10,7 @@ title: 基本 /> -Ionic CLIでアプリを作成したら、次は機能やコンポーネントのビルドを開始します。アプリの大部分は `src/app/` ディレクトリで開発することになります。 +Ionic CLI でアプリを作成したら、次は機能やコンポーネントのビルドを開始します。アプリの大部分は `src/app/` ディレクトリで開発することになります。 ## プロジェクト構成 @@ -62,7 +62,7 @@ $ ionic generate guard ``` -選択後、Ionic CLIは名前の入力を求めるプロンプトを表示します。この名前にはパスを指定することができ、整理されたプロジェクト構造内で簡単に機能を生成することができます。 +選択後、Ionic CLI は名前の入力を求めるプロンプトを表示します。この名前にはパスを指定することができ、整理されたプロジェクト構造内で簡単に機能を生成することができます。 :::note `portfolio/intro` のような任意のレベルのネストが可能です。例えば、`ionic g component "portfolio/intro/About Me"`とすることで、コンポーネントを簡単にページにスコープすることができます。 @@ -88,8 +88,8 @@ UPDATE src/app/app-routing.module.ts (475 bytes) [OK] Generated page! ``` -Ionic CLIは、ベストプラクティスに近づけるために、基礎となるフレームワークツールを使用します。 `ionic/angular` の場合、Angular CLIがフードの下で使用されます。 +Ionic CLI は、ベストプラクティスに近づけるために、基礎となるフレームワークツールを使用します。 `ionic/angular` の場合、Angular CLI がフードの下で使用されます。 -新しいページ用のファイルとディレクトリを作成した後、CLIは新しいページを含めるためにルーター設定も更新します。これにより、開発ライフサイクルを進めるために必要な手作業が軽減されます。 +新しいページ用のファイルとディレクトリを作成した後、CLI は新しいページを含めるためにルーター設定も更新します。これにより、開発ライフサイクルを進めるために必要な手作業が軽減されます。 詳細については、コマンドラインから `ionic g --help` を実行するか、`ionic generate` の [the documentation](../cli/commands/generate.md) を参照してください。 diff --git a/docs/developing/starting.md b/docs/developing/starting.md index 878d4b41995..0897de64e2e 100644 --- a/docs/developing/starting.md +++ b/docs/developing/starting.md @@ -11,7 +11,7 @@ sidebar_label: はじめ方 /> -新しいIonicアプリの起動は、驚くほど簡単です。コマンドラインから `ionic start` コマンドを実行すれば、あとはCLIが処理してくれる。 +新しい Ionic アプリの起動は、驚くほど簡単です。コマンドラインから `ionic start` コマンドを実行すれば、あとは CLI が処理してくれる。 ```shell-session $ ionic start @@ -25,7 +25,7 @@ the first argument to ionic start. ? Project name: █ ``` -Ionic CLIでは、新しいプロジェクトの名前と使用するテンプレートの入力を求めるプロンプトが表示されます。これらの詳細は、コマンドの引数として提供することができます。 +Ionic CLI では、新しいプロジェクトの名前と使用するテンプレートの入力を求めるプロンプトが表示されます。これらの詳細は、コマンドの引数として提供することができます。 ```shell-session $ ionic start myApp tabs @@ -33,7 +33,7 @@ $ ionic start myApp tabs ここでは、 `myApp` がプロジェクト名、 `tabs` がスターターテンプレート、そしてプロジェクトの種類は `angular` です。 -利用できるプロジェクトテンプレートは `tabs` だけではありません。すべてのプロジェクトタイプの間で、3つのテンプレートが利用可能です。 +利用できるプロジェクトテンプレートは `tabs` だけではありません。すべてのプロジェクトタイプの間で、3 つのテンプレートが利用可能です。 - `tabs`: タブベースのレイアウト - `sidemenu`: サイドメニューレイアウト diff --git a/docs/developing/tips.md b/docs/developing/tips.md index 00efcb1b71a..141b2ae509a 100644 --- a/docs/developing/tips.md +++ b/docs/developing/tips.md @@ -12,45 +12,45 @@ title: 開発者向けのヒント ## Permission Errors の解決 -パッケージをグローバルにインストールすると、 `EACCES` パーミッションエラーが発生する可能性があります。このような場合は、管理者権限なしで動作するようにnpmを設定する必要があります。 +パッケージをグローバルにインストールすると、 `EACCES` パーミッションエラーが発生する可能性があります。このような場合は、管理者権限なしで動作するように npm を設定する必要があります。 :::note -`sudo` とnpmの併用は、さらなる問題を引き起こす可能性があるため、推奨されません。 +`sudo` と npm の併用は、さらなる問題を引き起こす可能性があるため、推奨されません。 ::: -このガイドには、パーミッションの問題を解決するための2つのオプションがあります。詳細なドキュメントと追加オプションについては、[npm docs](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) を参照してください。 +このガイドには、パーミッションの問題を解決するための 2 つのオプションがあります。詳細なドキュメントと追加オプションについては、[npm docs](https://docs.npmjs.com/resolving-eacces-permissions-errors-when-installing-packages-globally) を参照してください。 ### Option 1 -権限の問題を回避する最善の方法は、 node version manager を使用してNodeJSとnpmを再インストールすることです。 +権限の問題を回避する最善の方法は、 node version manager を使用して NodeJS と npm を再インストールすることです。 -このガイドでは、 [nvm](https://github.com/nvm-sh/nvm) のインストールと使用方法について説明します。完全なドキュメントについては、 [nvm docs](https://github.com/nvm-sh/nvm#installation-and-update) for full documentation. See the [npm docs](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#using-a-node-version-manager-to-install-nodejs-and-npm) を参照してください。Windowsの追加オプションと手順については、npmのドキュメントを参照してください。 +このガイドでは、 [nvm](https://github.com/nvm-sh/nvm) のインストールと使用方法について説明します。完全なドキュメントについては、 [nvm docs](https://github.com/nvm-sh/nvm#installation-and-update) for full documentation. See the [npm docs](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm#using-a-node-version-manager-to-install-nodejs-and-npm) を参照してください。Windows の追加オプションと手順については、npm のドキュメントを参照してください。 -1. nvmのインストール +1. nvm のインストール ```shell $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash ``` -1. 新しい端末はnvmを使うようになります。確認するには、新しいターミナルを開き、次のコマンドを実行します。何かが表示されれば、インストールは成功です。 +1. 新しい端末は nvm を使うようになります。確認するには、新しいターミナルを開き、次のコマンドを実行します。何かが表示されれば、インストールは成功です。 ```shell $ command -v nvm ``` -1. NodeJSの最新のLTSリリースをダウンロードしてインストールするには、次のコマンドを実行します: +1. NodeJS の最新の LTS リリースをダウンロードしてインストールするには、次のコマンドを実行します: ```shell $ nvm install --lts ``` -1. 新しくインストールしたNodeJSをデフォルト環境として設定します: +1. 新しくインストールした NodeJS をデフォルト環境として設定します: ```shell $ nvm alias default lts/* ``` -1. 新しい端末はnvmコントロールのNodeJSを使うようになりました: +1. 新しい端末は nvm コントロールの NodeJS を使うようになりました: ```shell $ node -v # will print the version installed above @@ -65,10 +65,11 @@ title: 開発者向けのヒント Windowsでは利用できません -npmのディレクトリの所有者を現在のユーザに変更します: +npm のディレクトリの所有者を現在のユーザに変更します: ```shell $ sudo chown -R $(whoami) /usr/local/{lib/node_modules,bin,share} +$ sudo chown -R $(whoami) /usr/lib/node_modules $ sudo chown -R $(whoami) ~/.npm ~/.npmrc ``` @@ -76,7 +77,7 @@ $ sudo chown -R $(whoami) ~/.npm ~/.npmrc ## 依存モジュールの更新 -[npm](https://www.npmjs.com/) dependencyをアップデートするためには、`` をアップデートしたいパッケージ名に変更して以下を実行します: +[npm](https://www.npmjs.com/) dependency をアップデートするためには、`` をアップデートしたいパッケージ名に変更して以下を実行します: ```shell npm install @ --save @@ -111,11 +112,11 @@ function myBrokenFunction() { } ``` -アプリが起動すると、この機能で一時停止します。その後、開発者ツールを使用して、JavaScriptを1行ずつ実行し、関数が正確にどこで中断するかを調べることができます。 +アプリが起動すると、この機能で一時停止します。その後、開発者ツールを使用して、JavaScript を 1 行ずつ実行し、関数が正確にどこで中断するかを調べることができます。 ## モードの変更 -デフォルトでは、アプリケーションがブラウザで表示されると、Ionic は MD モードを適用します。しかし、Ionic コンポーネントはそれぞれのプラットフォームに応じて接続されるため、そのアプリケーションが iOS でどのように見えているか確認できると便利です。そのために、アプリケーションが起動しているURL に `?ionic:mode=ios` を追加します。例えば、アプリが `8100` ポートで起動している場合は、URLはこうなります: `http://localhost:8100/?ionic:mode=ios` +デフォルトでは、アプリケーションがブラウザで表示されると、Ionic は MD モードを適用します。しかし、Ionic コンポーネントはそれぞれのプラットフォームに応じて接続されるため、そのアプリケーションが iOS でどのように見えているか確認できると便利です。そのために、アプリケーションが起動している URL に `?ionic:mode=ios` を追加します。例えば、アプリが `8100` ポートで起動している場合は、URL はこうなります: `http://localhost:8100/?ionic:mode=ios` :::note しかし、どのプラットフォームが現在使用されているかをブラウザがどのように認識するか、ということは変わらないでしょう。プラットフォームはデバイスの検出とユーザーエージェントの検査によって決定されます。そのため、プラットフォームを変更するには、ユーザーエージェントを変更する必要があります。これを行うには、Chrome DevTools を開き、Ctrl+Shift+i(Mac では Cmd+Option+I) でデバイスのモードをオンに切り替えでください。デバイスモードの切り替えは、Ctrl+Shift+M(Cmd+Option+M on Mac)で行います。 @@ -147,6 +148,6 @@ Xcode を開き、`../path-to-app/platforms/ios/myApp.xcodeproj` を開きます ## Genymotion Android エミュレーターを使用する -Android SDKには標準のエミュレーターが付属していますが、速度が遅く、応答しない場合があります。 +Android SDK には標準のエミュレーターが付属していますが、速度が遅く、応答しない場合があります。 -[Genymotion](https://www.genymotion.com) はより高速な代替エミュレータであり、GPSやカメラなどのネイティブ機能へのアクセスを許可します。 +[Genymotion](https://www.genymotion.com) はより高速な代替エミュレータであり、GPS やカメラなどのネイティブ機能へのアクセスを許可します。 diff --git a/docs/index.md b/docs/index.md index ed09b6446ab..10083ff549a 100644 --- a/docs/index.md +++ b/docs/index.md @@ -22,9 +22,9 @@ import DocsCards from '@components/global/DocsCards'; -Ionic FrameworkはオープンソースのUIツールキットで、HTML、CSS、JavaScriptなどのウェブ技術を使って、 [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md) といった人気フレームワークと併用することで高性能で高品質なモバイルアプリやデスクトップアプリを作ることができます。 +Ionic Framework はオープンソースの UI ツールキットで、HTML、CSS、JavaScript などのウェブ技術を使って、 [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md) といった人気フレームワークと併用することで高性能で高品質なモバイルアプリやデスクトップアプリを作ることができます。 -[Ionicのインストール](intro/cli.md) や [First App Tutorial](intro/next.md#build-your-first-app) を参考に、主な概念を学ぶことができます。 +[Ionic のインストール](intro/cli.md) や [First App Tutorial](intro/next.md#build-your-first-app) を参考に、主な概念を学ぶことができます。 @@ -58,62 +58,62 @@ Ionic FrameworkはオープンソースのUIツールキットで、HTML、CSS ## 概要 -Ionicは、アプリのフロントエンドのUXとUIインタラクション（UIコントロール、インタラクション、ジェスチャー、アニメーション）に重点を置いています。学習が容易で、 [Angular](angular/overview.md) 、 [React](react.md) 、 [Vue](vue/overview.md) などのライブラリやフレームワークに統合することが可能です。また、シンプルな [script include](intro/cdn.md) を使って、フロントエンドフレームワークなしでスタンドアロンで使用することも可能です。Ionicについてもっと知りたい方向けに、私たちはビデオを作成しました。ここから、基本的な使い方を学ぶことができます。 +Ionic は、アプリのフロントエンドの UX と UI インタラクション（UI コントロール、インタラクション、ジェスチャー、アニメーション）に重点を置いています。学習が容易で、 [Angular](angular/overview.md) 、 [React](react.md) 、 [Vue](vue/overview.md) などのライブラリやフレームワークに統合することが可能です。また、シンプルな [script include](intro/cdn.md) を使って、フロントエンドフレームワークなしでスタンドアロンで使用することも可能です。Ionic についてもっと知りたい方向けに、私たちはビデオを作成しました。ここから、基本的な使い方を学ぶことができます。 ### どこでもひとつのコードで -Ionicは、ウェブ開発者がすべての主要アプリストアとモバイルウェブ用のアプリを単一のコードベースから構築できるすばらしいモバイルアプリスタックです。また、 [Adaptive Styling](theming/platform-styles.md) によって、Ionicアプリはすべてのデバイス上で適切な外観と操作感を提供します。 +Ionic は、ウェブ開発者がすべての主要アプリストアとモバイルウェブ用のアプリを単一のコードベースから構築できるすばらしいモバイルアプリスタックです。また、 [Adaptive Styling](theming/platform-styles.md) によって、Ionic アプリはすべてのデバイス上で適切な外観と操作感を提供します。 ### パフォーマンスにフォーカス -Ionicは、効率的なハードウェアアクセラレーション、タッチに最適化されたジェスチャなどのベストプラクティスにより、最新のモバイルデバイスで優れたパフォーマンスと動作を実現するように設計されています。 +Ionic は、効率的なハードウェアアクセラレーション、タッチに最適化されたジェスチャなどのベストプラクティスにより、最新のモバイルデバイスで優れたパフォーマンスと動作を実現するように設計されています。 ### クリーンでシンプル、機能的なデザイン -Ionicは、現在のすべてのモバイルデバイスおよびプラットフォームで美しく動作し、表示するように設計されています。事前に用意されたコンポーネント、タイポグラフィ、各プラットフォームに対応したすばらしい(まだ拡張可能な)ベーステーマにより、スタイルを構築できます。 +Ionic は、現在のすべてのモバイルデバイスおよびプラットフォームで美しく動作し、表示するように設計されています。事前に用意されたコンポーネント、タイポグラフィ、各プラットフォームに対応したすばらしい(まだ拡張可能な)ベーステーマにより、スタイルを構築できます。 -### ネイティブおよびWebに最適化 +### ネイティブおよび Web に最適化 -IonicはネイティブアプリケーションのUIガイドラインをエミュレートし、ネイティブSDKを使用して、ネイティブアプリのUI標準とデバイス機能を、オープンWebの完全なパワーと柔軟性とともに実現します。IonicはCapacitor(またはCordova)を使ってネイティブにデプロイするか、Progressive Web Appとしてブラウザで実行します。 +Ionic はネイティブアプリケーションの UI ガイドラインをエミュレートし、ネイティブ SDK を使用して、ネイティブアプリの UI 標準とデバイス機能を、オープン Web の完全なパワーと柔軟性とともに実現します。Ionic は Capacitor(または Cordova)を使ってネイティブにデプロイするか、Progressive Web App としてブラウザで実行します。 ## ゴール ### クロスプラットフォーム -ネイティブのiOS、Android、デスクトップ、Webなど、複数のプラットフォームで動作するアプリをProgressive Web Appとして、すべて1つのコードベースで開発、デプロイすることができます。一度書けば、どこでも実行できます。 +ネイティブの iOS、Android、デスクトップ、Web など、複数のプラットフォームで動作するアプリを Progressive Web App として、すべて 1 つのコードベースで開発、デプロイすることができます。一度書けば、どこでも実行できます。 -### Web標準 +### Web 標準 -Ionic Frameworkは、Custom ElementsやShadow DOMなどの最新のWeb APIを使用して、信頼性の高い [Web標準テクノロジー](reference/glossary.md#web-standards) : HTML、CSS、およびJavaScriptの上に構築されています。このため、Ionicコンポーネントは安定したAPIを備えており、単一のプラットフォーム・ベンダーの思い付きではありません。 +Ionic Framework は、Custom Elements や Shadow DOM などの最新の Web API を使用して、信頼性の高い [Web 標準テクノロジー](reference/glossary.md#web-standards) : HTML、CSS、および JavaScript の上に構築されています。このため、Ionic コンポーネントは安定した API を備えており、単一のプラットフォーム・ベンダーの思い付きではありません。 ### 美しいデザイン -クリーンでシンプル、機能的。Ionic Frameworkは全てのプラットフォームで動作し、美しく表示されるように設計されています。 +クリーンでシンプル、機能的。Ionic Framework は全てのプラットフォームで動作し、美しく表示されるように設計されています。 あらかじめデザインされたコンポーネント、タイポグラフィ、インタラクティブなパラダイム、すばらしい(まだ拡張可能な)基本テーマから始めます。 ### シンプル -Ionic Frameworkはシンプルさを念頭に置いて構築されているので、Ionicアプリを作成することは楽しく、簡単に学ぶことができ、ウェブ開発スキルを持っている人なら誰でも簡単にアクセスすることができます。 +Ionic Framework はシンプルさを念頭に置いて構築されているので、Ionic アプリを作成することは楽しく、簡単に学ぶことができ、ウェブ開発スキルを持っている人なら誰でも簡単にアクセスすることができます。 -## Frameworkの互換性 +## Framework の互換性 -Ionicの過去のリリースはAngularと密結合されていましたが、フレームワークのバージョン4.xからはスタンドアロンのWeb Componentライブラリとして動作するように再設計され、Angularのような最新のJavaScriptフレームワークと併用できるようになりました。IonicはReactやVueを含むほとんどのフロントエンドフレームワークで使用できますが、Webコンポーネントを完全にサポートするにはshimが必要なフレームワークもあります。 +Ionic の過去のリリースは Angular と密結合されていましたが、フレームワークのバージョン 4.x からはスタンドアロンのWeb Componentライブラリとして動作するように再設計され、Angular のような最新の JavaScript フレームワークと併用できるようになりました。Ionic は React や Vue を含むほとんどのフロントエンドフレームワークで使用できますが、Web コンポーネントを完全にサポートするには shim が必要なフレームワークもあります。 ### JavaScript -Ionic Frameworkを Web Components に移行する主な目標のひとつは、コンポーネントをホストする単一フレームワークのハード要件を取り除くことだった。これにより、コアコンポーネントは、scriptタグだけでWebページ内でスタンドアロンで動作できるようになりました。フレームワークを使って作業することは大規模なチームや大規模なアプリにとっては素晴らしいことですが、IonicをWordPressのようなコンテキストでも、単一ページのスタンドアロンライブラリとして使用することが可能になりました。 +Ionic Framework を Web Components に移行する主な目標のひとつは、コンポーネントをホストする単一フレームワークのハード要件を取り除くことだった。これにより、コアコンポーネントは、script タグだけで Web ページ内でスタンドアロンで動作できるようになりました。フレームワークを使って作業することは大規模なチームや大規模なアプリにとっては素晴らしいことですが、Ionic を WordPress のようなコンテキストでも、単一ページのスタンドアロンライブラリとして使用することが可能になりました。 ### Angular -Angularは常にIonicの素晴らしさの中心にありました。コアコンポーネントはスタンドアロンのWeb Componentライブラリとして動作するように書かれていますが、 `@ionic/angular` パッケージはAngularエコシステムとの統合を簡単にします。 `@ionic/angular` はIonic 2/3に期待されるすべての機能を含んでおり、AngularルータのようなコアAngularライブラリと統合されています。 +Angular は常に Ionic の素晴らしさの中心にありました。コアコンポーネントはスタンドアロンの Web Component ライブラリとして動作するように書かれていますが、 `@ionic/angular` パッケージは Angular エコシステムとの統合を簡単にします。 `@ionic/angular` は Ionic 2/3 に期待されるすべての機能を含んでおり、Angular ルータのようなコア Angular ライブラリと統合されています。 ### React -Ionicは現在、人気のReactライブラリを公式にサポートしています。Ionic Reactを使うと、React開発者は既存のWebスキルを使って、iOS、Android、Web、デスクトップをターゲットにしたアプリを作ることができます。 `@ionic/react` を使えば、すべてのコアIonicコンポーネントを、ネイティブなReactコンポーネントを使っているような感覚で使用することができます。 +Ionic は現在、人気の React ライブラリを公式にサポートしています。Ionic React を使うと、React 開発者は既存の Web スキルを使って、iOS、Android、Web、デスクトップをターゲットにしたアプリを作ることができます。 `@ionic/react` を使えば、すべてのコア Ionic コンポーネントを、ネイティブな React コンポーネントを使っているような感覚で使用することができます。 ### Vue -Ionicは現在、人気のVue3ライブラリを公式にサポートしています。 Ionic Vueを使用すると、Vue開発者は既存のWebスキルを使用して、iOS、Android、Web、およびデスクトップを対象とするアプリを構築できます。 `@ionic/vue` を使用すると、すべてのコアIonicコンポーネントを使用できますが、ネイティブのVueコンポーネントを使用しているように感じられます。 +Ionic は現在、人気の Vue3 ライブラリを公式にサポートしています。 Ionic Vue を使用すると、Vue 開発者は既存の Web スキルを使用して、iOS、Android、Web、およびデスクトップを対象とするアプリを構築できます。 `@ionic/vue` を使用すると、すべてのコア Ionic コンポーネントを使用できますが、ネイティブの Vue コンポーネントを使用しているように感じられます。 ### Future Support @@ -121,23 +121,23 @@ Ionicは現在、人気のVue3ライブラリを公式にサポートしてい ## Ionic CLI -公式の [Ionic CLI](cli.md) は、Ionicアプリを迅速に構築し、Ionic開発者に多くの役に立つコマンドを提供するツールです。CLIには、Ionicのインストールとアップデートに加えて、組み込みの開発サーバ、ビルドとデバッグのためのツールなどが含まれています。 [Appflow](#appflow) のメンバーの場合は、CLIを使用してクラウドの構築と展開を実行し、アカウントを管理できます。 +公式の [Ionic CLI](cli.md) は、Ionic アプリを迅速に構築し、Ionic 開発者に多くの役に立つコマンドを提供するツールです。CLI には、Ionic のインストールとアップデートに加えて、組み込みの開発サーバ、ビルドとデバッグのためのツールなどが含まれています。 [Appflow](#appflow) のメンバーの場合は、CLI を使用してクラウドの構築と展開を実行し、アカウントを管理できます。 ## Appflow -Ionicアプリの構築、デプロイ、ライフサイクルを通じた管理を支援するために、私たちは オープンソースフレームワーク とは分離した Appflow と呼んでいる製品アプリ用の商用サービスを提供しています。 +Ionic アプリの構築、デプロイ、ライフサイクルを通じた管理を支援するために、私たちは オープンソースフレームワーク とは分離した Appflow と呼んでいる製品アプリ用の商用サービスを提供しています。 -Appflowは、開発者とチームがネイティブアプリのビルドをコンパイルし、一元化されたダッシュボードからIonicアプリにライブコードアップデートをデプロイするのを支援する。アプリストアへの直接公開、ワークフローの自動化、シングルサインオン(SSO)、接続されたサービスや統合へのアクセスなど、より高度な機能を利用するには、オプションの有償アップグレードを利用できます。 +Appflow は、開発者とチームがネイティブアプリのビルドをコンパイルし、一元化されたダッシュボードから Ionic アプリにライブコードアップデートをデプロイするのを支援する。アプリストアへの直接公開、ワークフローの自動化、シングルサインオン(SSO)、接続されたサービスや統合へのアクセスなど、より高度な機能を利用するには、オプションの有償アップグレードを利用できます。 -Appflowには Ionic Account が必要で、いくつかの機能を試してみたい人は無料の「Hobby」プランが付いています。 +Appflow には Ionic Account が必要で、いくつかの機能を試してみたい人は無料の「Hobby」プランが付いています。 ## エコシステム -Ionic Frameworkはコアチームによって積極的に開発され、メンテナンスされており、そのエコシステムはその成長と採用を促進する開発者と貢献者の国際的なコミュニティによって導かれている。大小さまざまな開発者や企業がIonicを使って、どこでも動くすばらしいアプリを作ってリリースしています。 +Ionic Framework はコアチームによって積極的に開発され、メンテナンスされており、そのエコシステムはその成長と採用を促進する開発者と貢献者の国際的なコミュニティによって導かれている。大小さまざまな開発者や企業が Ionic を使って、どこでも動くすばらしいアプリを作ってリリースしています。 ### コミュニティに参加する -Ionicの開発者は世界200か国以上に何百万人もいます。コミュニティへの参加方法をいくつか紹介します: +Ionic の開発者は世界 200 か国以上に何百万人もいます。コミュニティへの参加方法をいくつか紹介します: - Forum: @@ -154,6 +154,6 @@ Ionicの開発者は世界200か国以上に何百万人もいます。コミュ ## ライセンス -Ionic Frameworkは無料のオープンソースプロジェクトで、 MIT license ライセンスの下で公開されています。つまり、個人的なプロジェクトや商用プロジェクトで無料で利用できます。MITライセンスは、jQueryやRuby on Railsなどの人気プロジェクトで使用されているのと同じライセンスです。 +Ionic Framework は無料のオープンソースプロジェクトで、 MIT license ライセンスの下で公開されています。つまり、個人的なプロジェクトや商用プロジェクトで無料で利用できます。MIT ライセンスは、jQuery や Ruby on Rails などの人気プロジェクトで使用されているのと同じライセンスです。 -このドキュメントコンテンツ(ionic-docsリポジトリにあります)は、Apache 2ライセンスでライセンスされています。 +このドキュメントコンテンツ(ionic-docsリポジトリにあります)は、Apache 2 ライセンスでライセンスされています。 diff --git a/docs/intro/cdn.md b/docs/intro/cdn.md index 1563c927755..30ea8431b54 100644 --- a/docs/intro/cdn.md +++ b/docs/intro/cdn.md @@ -11,13 +11,13 @@ sidebar_label: パッケージ & CDN /> -Ionicは、テスト環境、Angular、その他のフレームワーク、またはVanilla JSといったすべての状況で、Ionic Frameworkを使い始めるために使用できるさまざまなパッケージを提供しています。 +Ionic は、テスト環境、Angular、その他のフレームワーク、または Vanilla JS といったすべての状況で、Ionic Framework を使い始めるために使用できるさまざまなパッケージを提供しています。 ## Ionic Framework CDN -Ionicフレームワークは、[Plunker](https://plnkr.co/)、[Codepen](https://codepen.io)、またはその他のオンラインコードエディタですばやくテストするために、CDNから組み込むことができます。。 +Ionic フレームワークは、[Plunker](https://plnkr.co/)、[Codepen](https://codepen.io)、またはその他のオンラインコードエディタですばやくテストするために、CDN から組み込むことができます。。 -CDNからフレームワークにアクセスするには、 [jsdelivr](https://www.jsdelivr.com/) を使用することをお勧めします。最新バージョンを入手するためには HTMLファイルの `` 要素、もしくはオンラインコードエディタの呼び出しコードに、次のコードを追加します。 +CDN からフレームワークにアクセスするには、 [jsdelivr](https://www.jsdelivr.com/) を使用することをお勧めします。最新バージョンを入手するためには HTML ファイルの `` 要素、もしくはオンラインコードエディタの呼び出しコードに、次のコードを追加します。 ```html @@ -25,23 +25,23 @@ CDNからフレームワークにアクセスするには、 [jsdelivr](https:// ``` -これにより、フレームワークをインストールしなくても、すべてのIonic Frameworkのコアコンポーネントを使用することができます。CSSバンドルには、すべてのIonic [Global Stylesheets](../layout/global-stylesheets) が含まれます。 +これにより、フレームワークをインストールしなくても、すべての Ionic Framework のコアコンポーネントを使用することができます。CSS バンドルには、すべての Ionic [Global Stylesheets](../layout/global-stylesheets) が含まれます。 :::note -これはAngularや他のフレームワークをインストールしません。これにより、フレームワークなしでIonic Frameworkのコアコンポーネントを使用できます。 +これは Angular や他のフレームワークをインストールしません。これにより、フレームワークなしで Ionic Framework のコアコンポーネントを使用できます。 ::: ## Ionic + Angular -AngularプロジェクトでIonic Frameworkを使用する場合は、 [npm](../reference/glossary.md#npm) から最新の `@ionic/angular` をインストールしてください。これによって、すべてのIonic Frameworkコンポーネントと、Angularのサービスおよび機能を使うことができます。 +Angular プロジェクトで Ionic Framework を使用する場合は、 [npm](../reference/glossary.md#npm) から最新の `@ionic/angular` をインストールしてください。これによって、すべての Ionic Framework コンポーネントと、Angular のサービスおよび機能を使うことができます。 ```shell npm install @ionic/angular@latest --save ``` -新しいIonic Frameworkのリリースがあるたびに、最新バージョンの機能と修正を入手するために [バージョン](../reference/versioning.md) を更新する必要があります。最新のバージョンは [npmを使ったアップデート](../developing/tips.md#updating-dependencies) から取得することができます。 +新しい Ionic Framework のリリースがあるたびに、最新バージョンの機能と修正を入手するために [バージョン](../reference/versioning.md) を更新する必要があります。最新のバージョンは [npm を使ったアップデート](../developing/tips.md#updating-dependencies) から取得することができます。 -Ionicを既存のAngularプロジェクトに追加するには、Angular CLIの `ng add` 機能を使用します。 +Ionic を既存の Angular プロジェクトに追加するには、Angular CLI の `ng add` 機能を使用します。 ```shell ng add @ionic/angular @@ -51,7 +51,7 @@ ng add @ionic/angular ## Ionic + React -Ionicを既存のReactプロジェクトに追加するには、 `@ionic/react` および `@ionic/react-router` パッケージをインストールします。 +Ionic を既存の React プロジェクトに追加するには、 `@ionic/react` および `@ionic/react-router` パッケージをインストールします。 ```shell $ npm install @ionic/react @@ -60,7 +60,7 @@ $ npm install @ionic/react-router ### CSS -必要なCSSをReactプロジェクトに含めるには、ルートアプリコンポーネントに以下を追加します。 +必要な CSS を React プロジェクトに含めるには、ルートアプリコンポーネントに以下を追加します。 ```javascript /* Core CSS required for Ionic components to work properly */ @@ -82,13 +82,13 @@ import '@ionic/react/css/display.css'; ## Ionic + Vue -既存のVueプロジェクトにIonic Frameworkを追加するには、 `@ionic/vue` と `@ionic/vue-router` パッケージをインストールします。 +既存の Vue プロジェクトに Ionic Framework を追加するには、 `@ionic/vue` と `@ionic/vue-router` パッケージをインストールします。 ```shell npm install @ionic/vue @ionic/vue-router ``` -その後、Vueアプリに`IonicVue`プラグインをインストールする必要があります。 +その後、Vue アプリに`IonicVue`プラグインをインストールする必要があります。 **main.js** @@ -109,7 +109,7 @@ router.isReady().then(() => { ### ルーティング -Vueアプリでルーティングを設定する場合、`vue-router`ではなく、`@ionic/vue-router`から依存関係をインポートする必要があります。 +Vue アプリでルーティングを設定する場合、`vue-router`ではなく、`@ionic/vue-router`から依存関係をインポートする必要があります。 **router/index.js** @@ -130,7 +130,7 @@ export default router; ### CSS -Vueプロジェクトで必要なCSSをimportするには、`main.js` ファイルに以下を追加します。 +Vue プロジェクトで必要な CSS を import するには、`main.js` ファイルに以下を追加します。 ```javascript /* Core CSS required for Ionic components to work properly */ @@ -150,11 +150,11 @@ import '@ionic/vue/css/flex-utils.css'; import '@ionic/vue/css/display.css'; ``` -ここからは、Ionic Frameworkでの開発方法について、 [Ionic Vue Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) でご紹介しています。 +ここからは、Ionic Framework での開発方法について、 [Ionic Vue Quickstart Guide](https://ionicframework.com/docs/vue/quickstart) でご紹介しています。 ## Ionicons CDN -IoniconsはデフォルトでIonic Frameworkに同梱されているので、Ionicを使用している場合はインストールは不要です。Ionic Frameworkを使用せずにIoniconsを使用するためには、ページの終わりの近くにある `` の閉じタグの直前に以下の ` diff --git a/docs/intro/cli.md b/docs/intro/cli.md index b52014cd3f1..3ee3bd82f49 100644 --- a/docs/intro/cli.md +++ b/docs/intro/cli.md @@ -13,21 +13,21 @@ import AppWizard from '@components/page/intro/AppWizard'; /> -Ionicアプリは、主にIonic CLI（[command-line](../reference/glossary.md#cli)）を利用して作成・開発します。Ionic CLIは、幅広い開発ツールと開発を手助けするオプションを提供している、Ionic teamが推奨しているインストール方法です。Ionic CLIは、アプリの実行や、Appflowといった他のサービスに接続などができる重要なツールです。 +Ionic アプリは、主に Ionic CLI（[command-line](../reference/glossary.md#cli)）を利用して作成・開発します。Ionic CLI は、幅広い開発ツールと開発を手助けするオプションを提供している、Ionic team が推奨しているインストール方法です。Ionic CLI は、アプリの実行や、Appflow といった他のサービスに接続などができる重要なツールです。 -## Ionic CLIをインストール +## Ionic CLI をインストール -続行する前に、コンピュータに [Node.js](../reference/glossary.md#node) がインストールされているかを確認ください。[この説明で](environment.md)でIonicをセットアップできる環境を説明しています。 +続行する前に、コンピュータに [Node.js](../reference/glossary.md#node) がインストールされているかを確認ください。[この説明で](environment.md)で Ionic をセットアップできる環境を説明しています。 -npmを使って Ionic CLI をインストールします: +npm を使って Ionic CLI をインストールします: ```shell npm install -g @ionic/cli ``` -Ionic CLIが以前にインストールされていた場合は、パッケージ名が変更されているため、アンインストールする必要があります。 +Ionic CLI が以前にインストールされていた場合は、パッケージ名が変更されているため、アンインストールする必要があります。 ```shell $ npm uninstall -g ionic @@ -37,12 +37,12 @@ $ npm install -g @ionic/cli :::note `-g` オプションは、 _グローバルにインストール_ することを意味しています。パッケージをグローバルにインストールすると `EACCES` パーミッションエラーが起きる可能性があります。 -管理権限なしでnpmがグローバルで動作するように設定することを検討してください。詳細については [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) をご覧ください。 +管理権限なしで npm がグローバルで動作するように設定することを検討してください。詳細については [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) をご覧ください。 ::: ## アプリケーションの起動 -Ionicアプリを作成するには、スターターテンプレートを利用するか、まっさらな状態からつくるための`blank`テンプレートを利用して作成します。汎用的な3つのスターターテンプレートは、`blank`、`tabs`、`sidemenu`があります。`ionic start`コマンドで作成を開始できます。 +Ionic アプリを作成するには、スターターテンプレートを利用するか、まっさらな状態からつくるための`blank`テンプレートを利用して作成します。汎用的な 3 つのスターターテンプレートは、`blank`、`tabs`、`sidemenu`があります。`ionic start`コマンドで作成を開始できます。 ```shell ionic start @@ -50,11 +50,11 @@ ionic start ![start app thumbnails](/img/installation/start-app-thumbnails.png) -Ionicアプリのはじめ方をもっと知りたい方は、[スタートガイド](../developing/starting.md)を参照してください。 +Ionic アプリのはじめ方をもっと知りたい方は、[スタートガイド](../developing/starting.md)を参照してください。 ## アプリケーションを実行する -ほとんどのIonicアプリは、`ionic serve`コマンドを利用することによってブラウザですぐに利用することができます。 +ほとんどの Ionic アプリは、`ionic serve`コマンドを利用することによってブラウザですぐに利用することができます。 ```shell $ cd myApp diff --git a/docs/intro/environment.md b/docs/intro/environment.md index 9d1ab81a06d..101674bd522 100644 --- a/docs/intro/environment.md +++ b/docs/intro/environment.md @@ -10,29 +10,29 @@ title: 環境設定 /> -Ionic Frameworkをはじめるためには、[Node と npm](#node--npm)がインストールされている環境が必要です。 +Ionic Framework をはじめるためには、[Node と npm](#node--npm)がインストールされている環境が必要です。 -もちろん、エディタも必要でしょう。[Visual Studio Code](https://code.visualstudio.com/) をおすすめします。Visual Studio Codeは -Microsoft製の無料でとてもパワフルなテキストエディタです。 +もちろん、エディタも必要でしょう。[Visual Studio Code](https://code.visualstudio.com/) をおすすめします。Visual Studio Code は +Microsoft 製の無料でとてもパワフルなテキストエディタです。 ## ターミナル :::note -Ionic開発の多くは、コマンドラインを利用する必要があります。コマンドラインに慣れていない場合は、[このブログ](https://ionicframework.com/blog/new-to-the-command-line/)で簡単な概要を確認してください。 +Ionic 開発の多くは、コマンドラインを利用する必要があります。コマンドラインに慣れていない場合は、[このブログ](https://ionicframework.com/blog/new-to-the-command-line/)で簡単な概要を確認してください。 ::: -一般的に、OSに最初からついているターミナルの使用をお勧めします。多くのサードパーティ端末はIonicで正常に動作しますが、サポートされていない場合があります。 +一般的に、OS に最初からついているターミナルの使用をお勧めします。多くのサードパーティ端末は Ionic で正常に動作しますが、サポートされていない場合があります。 -- Windowsでは、 **コマンドプロンプト** と **PowerShell** がサポートされています。WSLはIonicで動作することがわかっていますが、サポートされていない可能性があります。 -- macOSでは、組み込みの **ターミナル** アプリがサポートされています。 +- Windows では、 **コマンドプロンプト** と **PowerShell** がサポートされています。WSLは Ionic で動作することがわかっていますが、サポートされていない可能性があります。 +- macOS では、組み込みの **ターミナル** アプリがサポートされています。 -Git Bash（git-scm.com）はTTY対話機能をサポートしておらず、Ionicはサポートしていません。 +Git Bash（git-scm.com）は TTY 対話機能をサポートしておらず、Ionic はサポートしていません。 ## Node と npm -モダンなJavaScriptプロジェクトのほとんどのツールは[Node.js](../reference/glossary.md#node)で作られています。[ダウンロードページ](https://nodejs.org/en/download/)には、すべてのプラットフォームのインストールパッケージが事前に用意されています。互換性を確保するためにLTSバージョンを選択することをお勧めします。 +モダンな JavaScript プロジェクトのほとんどのツールは[Node.js](../reference/glossary.md#node)で作られています。[ダウンロードページ](https://nodejs.org/en/download/)には、すべてのプラットフォームのインストールパッケージが事前に用意されています。互換性を確保するために LTS バージョンを選択することをお勧めします。 -NodeにはJavaScriptパッケージマネージャーである [npm](../reference/glossary.md#npm) がバンドルされています。 +Node には JavaScript パッケージマネージャーである [npm](../reference/glossary.md#npm) がバンドルされています。 インストールできているかを確認するためには、新しいターミナルウィンドウを開いて以下を実行します。 @@ -49,7 +49,7 @@ $ npm --version 必須ではありませんが、バージョン管理システムの[Git](../reference/glossary.md#git)の利用を強くお勧めします。 -Gitは [GitHub](https://github.com/) のようなGitホスティングサービスを利用することが多いですが、これらのサービスは最初にサインアップが必要となります。これらのGitホスティングサービスのチュートリアルをご確認ください: +Git は [GitHub](https://github.com/) のような Git ホスティングサービスを利用することが多いですが、これらのサービスは最初にサインアップが必要となります。これらの Git ホスティングサービスのチュートリアルをご確認ください: - GitHub: [Set up Git](https://help.github.com/en/articles/set-up-git) - GitLab: [Installing Git](https://docs.gitlab.com/ee/topics/git/how_to_install_git) @@ -65,4 +65,4 @@ git --version ### Git GUI -Gitはコマンドラインユーティリティですが、利用可能な [GUIクライアント](https://git-scm.com/downloads/guis/) は多数あります。[GitHub Desktop](https://desktop.github.com/)を推奨しており、GitHubとうまく連携します。 +Git はコマンドラインユーティリティですが、利用可能な [GUI クライアント](https://git-scm.com/downloads/guis/) は多数あります。[GitHub Desktop](https://desktop.github.com/)を推奨しており、GitHub とうまく連携します。 diff --git a/docs/intro/first-app.md b/docs/intro/first-app.md index feefd9a52f6..bbccf176835 100644 --- a/docs/intro/first-app.md +++ b/docs/intro/first-app.md @@ -7,16 +7,16 @@ import DocsCards from '@components/global/DocsCards'; # はじめてアプリ制作チュートリアル -Ionicアプリの構築に使用する予定のJavaScriptフレームワークを選びます。 +Ionic アプリの構築に使用する予定の JavaScript フレームワークを選びます。

AngularでIonicアプリを作るための基本を押さえた完全ガイドです

 - -

ReactでIonicアプリを作るための基本を押さえた完全ガイドです

- + +

ReactでIonicアプリを作るための基本を押さえた完全ガイドです

+

VueでIonicアプリを作るための基本を押さえた完全ガイドです

diff --git a/docs/intro/next.md b/docs/intro/next.md index e19041a8e66..801626e379d 100644 --- a/docs/intro/next.md +++ b/docs/intro/next.md @@ -13,20 +13,24 @@ title: 次のステップ import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; -## 最初のアプリを作る +import DeveloperExperts from '@components/page/intro/next/DeveloperExperts'; -Ionicアプリを構築する際に使用する予定のJavaScriptフレームワークを選択します。 +## 最初のアプリをつくる + +Ionic アプリを構築する際に使用する予定の JavaScript フレームワークを選択します。

AngularでIonicアプリを作るための基本を押さえた完全ガイドです

 - -

ReactでIonicアプリを作るための基本を押さえた完全ガイドです

- + +

ReactでIonicアプリを作るための基本を押さえた完全ガイドです

+

VueでIonicアプリを作るための基本を押さえた完全ガイドです

 + + diff --git a/docs/intro/vscode-extension.md b/docs/intro/vscode-extension.md index 5c41a8bf083..e3824a71af0 100644 --- a/docs/intro/vscode-extension.md +++ b/docs/intro/vscode-extension.md @@ -10,11 +10,11 @@ title: Ionic VS Code Extension /> -Ionic Visual Studio Code 拡張は、Ionicアプリの開発に共通するさまざまな機能を、VS Codeのウィンドウを開いたまま実行できるようにします。 [Visual Studio Marketplace上の拡張機能](https://marketplace.visualstudio.com/items?itemName=ionic.ionic) をインストールすることができます。エクステンションをインストールすると、アクティビティバーにIonicのロゴが表示されるようになります。 +Ionic Visual Studio Code 拡張は、Ionic アプリの開発に共通するさまざまな機能を、VS Code のウィンドウを開いたまま実行できるようにします。 [Visual Studio Marketplace 上の拡張機能](https://marketplace.visualstudio.com/items?itemName=ionic.ionic) をインストールすることができます。エクステンションをインストールすると、アクティビティバーに Ionic のロゴが表示されるようになります。 ## 新規プロジェクトの作成 -空のディレクトリから、テンプレートオプションの1つをクリックし、アプリ名を指定することで、新しいAngular、React、またはVueプロジェクトを作成することができます。 +空のディレクトリから、テンプレートオプションの 1 つをクリックし、アプリ名を指定することで、新しい Angular、React、または Vue プロジェクトを作成することができます。 Capacitor追加のビデオ -Capacitorが統合され、"Run On Web", "Run On Android", "Run On iOS "のオプションで、Web, Android, iOS上でアプリを実行することができるようになりました。 +Capacitor が統合され、"Run On Web", "Run On Android", "Run On iOS "のオプションで、Web, Android, iOS 上でアプリを実行することができるようになりました。 ## Doing More diff --git a/docs/layout/css-utilities.md b/docs/layout/css-utilities.md index 3a03ad0fb58..e427cd56c58 100644 --- a/docs/layout/css-utilities.md +++ b/docs/layout/css-utilities.md @@ -12,10 +12,10 @@ inlineHtmlPreviews: true /> -Ionic Frameworは、テキストの順番を入れ替えたり、要素の配置やpaddingやmarginを修正する一連のユーティリティ属性を提供します。これは要素で使うことができます。 +Ionic Framewor は、テキストの順番を入れ替えたり、要素の配置や padding や margin を修正する一連のユーティリティ属性を提供します。これは要素で使うことができます。 :::note -使用可能なIonic Frameworkスターターを使用してアプリケーションを起動していない場合、これらのスタイルを機能させるには、 [グローバルスタイルシートのオプションセクション](global-stylesheets.md#optional) にリストされているスタイルシートを含める必要があります。 +使用可能な Ionic Framework スターターを使用してアプリケーションを起動していない場合、これらのスタイルを機能させるには、 [グローバルスタイルシートのオプションセクション](global-stylesheets.md#optional) にリストされているスタイルシートを含める必要があります。 ::: ## テキストの修正 @@ -113,7 +113,7 @@ Ionic Frameworは、テキストの順番を入れ替えたり、要素の配置 ### Responsive Text Classes -上に挙げたすべてのテキストクラスには、スクリーンサイズに応じてテキストを変更するための追加のクラスがあります。各クラスで `text-` の代わりに `text-{breakpoint}-` を使用すると、特定のスクリーンサイズでのみそのクラスを使用できます。ここで `{breakpoint}` は [Ionic Breakpoints](#ionic-breakpoints) にリストされているブレークポイント名のうちの1つです。 +上に挙げたすべてのテキストクラスには、スクリーンサイズに応じてテキストを変更するための追加のクラスがあります。各クラスで `text-` の代わりに `text-{breakpoint}-` を使用すると、特定のスクリーンサイズでのみそのクラスを使用できます。ここで `{breakpoint}` は [Ionic Breakpoints](#ionic-breakpoints) にリストされているブレークポイント名のうちの 1 つです。 以下の表は、 `{modifier}` のデフォルトの挙動です。 `left`, `right`, `start`, `end`, `center`, `justify`, `wrap`, `nowrap`, `uppercase`, `lowercase`, `capitalize` は上記の通りです。 @@ -127,9 +127,9 @@ Ionic Frameworは、テキストの順番を入れ替えたり、要素の配置 ## 要素の配置 -### Float要素 +### Float 要素 -CSSプロパティのfloatは、テキストとインライン要素を囲んだ要素がそのコンテナの左側または右側に沿って配置することを指定します。 以下のように要素はウェブページのコードと異なった順に表示されます。 +CSS プロパティの float は、テキストとインライン要素を囲んだ要素がそのコンテナの左側または右側に沿って配置することを指定します。 以下のように要素はウェブページのコードと異なった順に表示されます。 ```html @@ -141,8 +141,7 @@ CSSプロパティのfloatは、テキストとインライン要素を囲んだ src="https://ionicframework.com/docs/img/demos/avatar.svg" height="50px" /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac - vehicula lorem. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.

float-left

@@ -152,8 +151,7 @@ CSSプロパティのfloatは、テキストとインライン要素を囲んだ height="50px" class="ion-float-left" /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac - vehicula lorem. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.

float-right

@@ -163,8 +161,7 @@ CSSプロパティのfloatは、テキストとインライン要素を囲んだ height="50px" class="ion-float-right" /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac - vehicula lorem. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. @@ -177,9 +174,9 @@ CSSプロパティのfloatは、テキストとインライン要素を囲んだ | `.ion-float-start` | `float: left` / `float: right` | The same as `float-left` if direction is left-to-right and `float-right` if direction is right-to-left. | | `.ion-float-end` | `float: left` / `float: right` | The same as `float-right` if direction is left-to-right and `float-left` if direction is right-to-left. | -### レスポンシブなFloatクラス +### レスポンシブな Float クラス -上記のすべてのfloatクラスには、画面サイズに基づいて `float` を変更するための追加クラスがあります。特定の画面サイズでのみクラスを使用する場合は、各クラスで `float-` の代わりに`float-{breakpoint}-` を使用します。 `{breakpoint}` は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の1つです。 +上記のすべての float クラスには、画面サイズに基づいて `float` を変更するための追加クラスがあります。特定の画面サイズでのみクラスを使用する場合は、各クラスで `float-` の代わりに`float-{breakpoint}-` を使用します。 `{breakpoint}` は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の 1 つです。 次の表に、デフォルトの動作を示します。 `{modifier}` は、前述のように `left`, `right`, `start`, `end` のいずれかです。 @@ -193,7 +190,7 @@ CSSプロパティのfloatは、テキストとインライン要素を囲んだ ## 要素の表示 -display CSSプロパティは、要素を表示するかどうかを決定します。要素はDOM内に残りますが、非表示の場合はレンダリングされません。 +display CSS プロパティは、要素を表示するかどうかを決定します。要素は DOM 内に残りますが、非表示の場合はレンダリングされません。 ```html @@ -218,9 +215,9 @@ display CSSプロパティは、要素を表示するかどうかを決定しま | ----------- | --------------- | --------------------------- | | `.ion-hide` | `display: none` | The element will be hidden. | -### ResponsiveなDisplay属性 +### Responsive な Display 属性 -画面サイズに基づいて表示を変更するクラスもあります。ただ `.ion-hide` ではなく `.ion-hide-{breakpoint}-{dir}` という特定の画面サイズでのみクラスを使用します。{breakpoint}は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の1つです。 `{dir}` は、指定されたブレークポイントの上 (`up`) または下 (`down`) のすべての画面サイズで要素を非表示にするかどうかです。 +画面サイズに基づいて表示を変更するクラスもあります。ただ `.ion-hide` ではなく `.ion-hide-{breakpoint}-{dir}` という特定の画面サイズでのみクラスを使用します。{breakpoint}は、[Ionic Breakpoints](#ionic-breakpoints)にリストされているブレークポイント名の 1 つです。 `{dir}` は、指定されたブレークポイントの上 (`up`) または下 (`down`) のすべての画面サイズで要素を非表示にするかどうかです。 | Class | Description | | -------------------- | ---------------------------------------------------------------------------------------------------- | @@ -231,9 +228,9 @@ display CSSプロパティは、要素を表示するかどうかを決定しま ## コンテンツのスペース -### 要素のPadding +### 要素の Padding -padding属性は、要素のpaddingエリアを設定します。paddingエリアは、要素のコンテンツとその境界線のスペースです。 +padding 属性は、要素の padding エリアを設定します。padding エリアは、要素のコンテンツとその境界線のスペースです。 `padding` で適用されるデフォルトの数値は `16px` で、これは `--ion-padding`　変数で設定することができます。これらの値を変更する方法については [CSS Variables](../theming/css-variables.md) をご覧ください。 @@ -281,9 +278,9 @@ padding属性は、要素のpaddingエリアを設定します。paddingエリ | `.ion-padding-horizontal` | `padding: 0 16px` | Applies padding to the left and right. | | `.ion-no-padding` | `padding: 0` | Applies no padding to all sides. | -### 要素のMargin +### 要素の Margin -Marginエリアは、隣り合う要素とのスペースを広げるために境界線の外に空のエリアをつくるためのものです。 +Margin エリアは、隣り合う要素とのスペースを広げるために境界線の外に空のエリアをつくるためのものです。 `margin`　はデフォルトで `16px` が設定されており、 `--ion-margin` 変数で設定されています。 これらの値を変更する方法については [CSS Variables](../theming/css-variables.md) をご覧ください。 @@ -519,9 +516,9 @@ Marginエリアは、隣り合う要素とのスペースを広げるために | `.ion-align-self-stretch` | `align-self: stretch` | Item is stretched to fill the container. | | `.ion-align-self-auto` | `align-self: auto` | Item is positioned according to the parent's `align-items` value. | -## Borderの表示 +## Border の表示 -border display CSSプロパティは、borderを表示するかどうかを指定します。このプロパティは、 `ion-header` と` ion-footer` に適用できます。 +border display CSS プロパティは、border を表示するかどうかを指定します。このプロパティは、 `ion-header` と` ion-footer` に適用できます。 ```html @@ -541,9 +538,9 @@ border display CSSプロパティは、borderを表示するかどうかを指 | ---------------- | -------------------------------- | | `.ion-no-border` | The element will have no border. | -## Ionicのブレイクポイント +## Ionic のブレイクポイント -Ionicは、画面サイズに基づいてアプリケーションのスタイルを変えるために、メディアクエリでブレークポイントを使用します。次のブレークポイント名は、上記のユーティリティークラスで使用され、幅が一致したときにクラスが適用されます。 +Ionic は、画面サイズに基づいてアプリケーションのスタイルを変えるために、メディアクエリでブレークポイントを使用します。次のブレークポイント名は、上記のユーティリティークラスで使用され、幅が一致したときにクラスが適用されます。 | Breakpoint Name | Width | | --------------- | -------- | diff --git a/docs/layout/global-stylesheets.md b/docs/layout/global-stylesheets.md index f1bde8ae88e..6cc5a214162 100644 --- a/docs/layout/global-stylesheets.md +++ b/docs/layout/global-stylesheets.md @@ -12,7 +12,7 @@ inlineHtmlPreviews: true /> -Ionic Frameworkのコンポーネントスタイルは自己完結していますが、Ionicのすべての機能を使用するために含める必要があるグローバルなスタイルシートがいくつか存在します。スタイルシートの中には、Ionic Frameworkアプリの外観と動作を適切にするために必要なものと、アプリをすばやくスタイル設定するためのオプションのユーティリティが含まれているものがあります。 +Ionic Framework のコンポーネントスタイルは自己完結していますが、Ionic のすべての機能を使用するために含める必要があるグローバルなスタイルシートがいくつか存在します。スタイルシートの中には、Ionic Framework アプリの外観と動作を適切にするために必要なものと、アプリをすばやくスタイル設定するためのオプションのユーティリティが含まれているものがあります。 ## 利用可能 @@ -26,7 +26,7 @@ Ionic Framework が正常に動作するためには、以下の CSS ファイ ### 推奨 -Ionic Frameworkアプリでは、以下のCSSファイルをインクルードすることが推奨されています。これらが含まれていない場合、一部の要素で好ましくないスタイルになる可能性があります。Ionic Frameworkのコンポーネントをアプリの外で使用する場合は、これらのファイルは必要ない場合があります。 +Ionic Framework アプリでは、以下の CSS ファイルをインクルードすることが推奨されています。これらが含まれていない場合、一部の要素で好ましくないスタイルになる可能性があります。Ionic Framework のコンポーネントをアプリの外で使用する場合は、これらのファイルは必要ない場合があります。 #### structure.css @@ -42,7 +42,7 @@ typography はドキュメント全体の font-family を変更し、見出し ### オプション -以下のCSSファイルはオプションであり、アプリケーションで機能を使用しない場合は、コメントアウトまたは削除して問題ありません。 +以下の CSS ファイルはオプションであり、アプリケーションで機能を使用しない場合は、コメントアウトまたは削除して問題ありません。 #### padding.css diff --git a/docs/layout/grid.md b/docs/layout/grid.md index fbe80a2515b..b44b618c2cb 100644 --- a/docs/layout/grid.md +++ b/docs/layout/grid.md @@ -10,7 +10,7 @@ title: レスポンシブグリッド /> -グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッドは、[grid](../api/grid.md), [row(s)](../api/row.md), [column(s)](../api/col.md) という三つの単位で構成されています。列はその行を埋めるように拡張され、追加の列に合うようにサイズが変更されます。これは、画面サイズに応じて異なるブレイクポイントを持つ12列のレイアウトに基づいています。カラムの数はCSSを使ってカスタマイズすることができます。 +グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッドは、[grid](../api/grid.md), [row(s)](../api/row.md), [column(s)](../api/col.md) という三つの単位で構成されています。列はその行を埋めるように拡張され、追加の列に合うようにサイズが変更されます。これは、画面サイズに応じて異なるブレイクポイントを持つ 12 列のレイアウトに基づいています。カラムの数は CSS を使ってカスタマイズすることができます。 ## How it works @@ -34,24 +34,24 @@ title: レスポンシブグリッド しかし、`fixed`属性を追加すると、スクリーンサイズごとの幅を指定することができます。 - 行は、列を適切に並べるための水平方向のグループです。 - コンテンツは列の中に配置されるべきで、列のみが行の直接の子となることができます。 -- `size-{breakpoint}` 属性は、1行あたりデフォルトの12列のうち、使用する列の数を指定します。 - つまり、`size="4"` を指定すると、グリッドの1/3、つまり12列のうち4列を占有することができます。 -- sizeに値を指定しないカラムは、自動的に同じ幅になります。例えば、`size-sm`を4つ指定すると、スモールブレイクポイント以上の幅は、それぞれ自動的に25%になります。 +- `size-{breakpoint}` 属性は、1 行あたりデフォルトの 12 列のうち、使用する列の数を指定します。 + つまり、`size="4"` を指定すると、グリッドの 1/3、つまり 12 列のうち 4 列を占有することができます。 +- size に値を指定しないカラムは、自動的に同じ幅になります。例えば、`size-sm`を 4 つ指定すると、スモールブレイクポイント以上の幅は、それぞれ自動的に 25%になります。 - カラムの幅はパーセンテージで設定されるため、常に流動的で、親要素からの相対的な大きさになります。 - カラムは個々のカラムの間にパディングを持ちますが、パディングはグリッドとカラムから削除することができます。 しかし、グリッドに `ion-no-padding` クラスを追加することで、グリッドとカラムからパディングを取り除くことができます。グリッドに適用できるその他のスタイルについては、[CSS ユーティリティ](css-utilities.md) を参照してください。 -- グリッドの階層は、レスポンシブ・ブレークポイントごとに、すべてのブレークポイント（特小）、小、中、大、特大の5段階あります。 +- グリッドの階層は、レスポンシブ・ブレークポイントごとに、すべてのブレークポイント（特小）、小、中、大、特大の 5 段階あります。 - グリッドの階層は最小幅を基準にしており、その階層とそれより大きな階層に適用されます。 (例: `size-sm="4"` は、小型、中型、大型、特大のデバイスに適用されます)。 - グリッドは CSS 変数で簡単にカスタマイズすることができます。グリッドのカスタマイズ](#customizing-the-grid)を参照してください。 ### ライブでの実装例 -Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid) 、Reactの場合は [こちら](https://stackblitz.com/edit/ionic-react-basic-grid) で、ライブでの実装例を見ることができます。 +Angular の場合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid) 、React の場合は [こちら](https://stackblitz.com/edit/ionic-react-basic-grid) で、ライブでの実装例を見ることができます。 ## グリッドの大きさ -デフォルトでは、グリッドは100%の幅を占めます。画面サイズに応じた幅を設定するには、 `fixed` 属性を追加します。各ブレークポイントにおけるグリッドの幅は、CSS変数 `--ion-grid-width-{breakpoint}` で定義される。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。 +デフォルトでは、グリッドは 100%の幅を占めます。画面サイズに応じた幅を設定するには、 `fixed` 属性を追加します。各ブレークポイントにおけるグリッドの幅は、CSS 変数 `--ion-grid-width-{breakpoint}` で定義される。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。 | Name | Value | Description | | ---- | ------ | ------------------------------------------------- | @@ -63,7 +63,7 @@ Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-basic-grid) ### ライブでの実装例 -Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width-grid) 、Reactの場合は [こちら](https://stackblitz.com/edit/ionic-react-fixed-width-grid) で、ライブの例を見ることができます。 +Angular の場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width-grid) 、React の場合は [こちら](https://stackblitz.com/edit/ionic-react-fixed-width-grid) で、ライブの例を見ることができます。 ## グリッドの属性 @@ -115,9 +115,9 @@ Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width ``` -### 1列の幅を設定する +### 1 列の幅を設定する -1つのカラムの幅を設定すると、他のカラムは自動的にその幅にリサイズされます。これは、あらかじめ定義されたグリッド属性を使って行うことができます。以下の例では、中央のカラムの幅に関係なく、他のカラムがリサイズされます。 +1 つのカラムの幅を設定すると、他のカラムは自動的にその幅にリサイズされます。これは、あらかじめ定義されたグリッド属性を使って行うことができます。以下の例では、中央のカラムの幅に関係なく、他のカラムがリサイズされます。 ```html @@ -148,7 +148,7 @@ Angularの場合は [こちら](https://stackblitz.com/edit/ionic-ng-fixed-width #### ライブでの実装例 -Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-set-width-col) で、実例を見ることができます。 +Angular では [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) 、React では [こちら](https://stackblitz.com/edit/ionic-react-set-width-col) で、実例を見ることができます。 ### 可変幅 @@ -188,7 +188,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-set-width-col) #### ライブでの実装例 -Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-var-width-col) で、実例を見ることができます。 +Angular では [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) 、React では [こちら](https://stackblitz.com/edit/ionic-react-var-width-col) で、実例を見ることができます。 ## レスポンシブ属性 @@ -217,7 +217,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-var-width-col) ### 積み上げから水平へ -width属性とbreakpoint属性の組み合わせで、超小型画面では積み上げ型、小型画面では水平型になるようなグリッドを作成することができます。 +width 属性と breakpoint 属性の組み合わせで、超小型画面では積み上げ型、小型画面では水平型になるようなグリッドを作成することができます。 ```html @@ -240,13 +240,13 @@ width属性とbreakpoint属性の組み合わせで、超小型画面では積 #### ライブでの実装例 -Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-stacked-horizontal-grid) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-stacked-horizontal-grid) で実例を見ることができます。 +Angular では [こちら](https://stackblitz.com/edit/ionic-ng-stacked-horizontal-grid) 、React では [こちら](https://stackblitz.com/edit/ionic-react-stacked-horizontal-grid) で実例を見ることができます。 ##並び替え ### カラムのオフセット -offset` プロパティを追加することで、カラムを右に移動させることができます。このプロパティは、カラムの左側のマージンを指定したカラム数だけ増加させる。例えば、以下のグリッドでは、最後のカラムは3カラム分オフセットされ、3カラムを占めることになります。 +offset` プロパティを追加することで、カラムを右に移動させることができます。このプロパティは、カラムの左側のマージンを指定したカラム数だけ増加させる。例えば、以下のグリッドでは、最後のカラムは 3 カラム分オフセットされ、3 カラムを占めることになります。 ```html @@ -261,7 +261,7 @@ offset` プロパティを追加することで、カラムを右に移動させ ``` -また、スクリーンのブレークポイントに基づいてオフセットを追加することもできます。以下は、`md`スクリーン以上では最後のカラムが3カラム分オフセットされるグリッドの例です。 +また、スクリーンのブレークポイントに基づいてオフセットを追加することもできます。以下は、`md`スクリーン以上では最後のカラムが 3 カラム分オフセットされるグリッドの例です。 ```html @@ -281,7 +281,7 @@ offset` プロパティを追加することで、カラムを右に移動させ #### ライブでの実装例 -Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-offset-grid-cols) で、実例を見ることができます。 +Angular では [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) 、React では [こちら](https://stackblitz.com/edit/ionic-react-offset-grid-cols) で、実例を見ることができます。 ### プッシュとプル @@ -300,7 +300,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) ``` -また、画面のブレークポイントに基づいてPushとPullを追加することができます。以下の例では、`3 of 3`のカラムの記述があるカラムは、実際には`md`画面以上の最初のカラムになります。 +また、画面のブレークポイントに基づいて Push と Pull を追加することができます。以下の例では、`3 of 3`のカラムの記述があるカラムは、実際には`md`画面以上の最初のカラムになります。 ```html @@ -320,7 +320,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-offset-grid-cols) #### ライブでの実装例 -Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-grid-push-pull) で実例を見ることができます。 +Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-push-pull) で実例を見ることができます。 ## アライメント @@ -377,7 +377,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) ``` -カラムはまた、カラムに直接alignmentクラスを追加することによって、他のカラムと異なるように自分自身を配置することができます。利用可能なクラスの一覧は、[css utilities](css-utilities.md#flex-item-properties) を参照してください。 +カラムはまた、カラムに直接 alignment クラスを追加することによって、他のカラムと異なるように自分自身を配置することができます。利用可能なクラスの一覧は、[css utilities](css-utilities.md#flex-item-properties) を参照してください。 ```html @@ -400,11 +400,11 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-push-pull) #### ライブでの実装例 -Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-align) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-grid-vertical-align) で、実例を見ることができます。 +Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-align) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-vertical-align) で、実例を見ることができます。 ### 水平方向の整列 -行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[cssユーティリティ](css-utilities.md#flex-container-properties) を参照してください。 +行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[css ユーティリティ](css-utilities.md#flex-container-properties) を参照してください。 ```html @@ -457,7 +457,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-vertical-ali #### ライブでの実装例 -Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-align) 、Reactでは [こちら](https://stackblitz.com/edit/ionic-react-grid-horizontal-align) で実例を見ることができます。 +Angular では [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-align) 、React では [こちら](https://stackblitz.com/edit/ionic-react-grid-horizontal-align) で実例を見ることができます。 ## グリッドのカスタマイズ @@ -465,15 +465,15 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-a ### 列の数 -グリッドのカラム数は、CSS変数 `--ion-grid-columns` で変更することができます。デフォルトでは12列ですが、これを任意の正の整数に変更し、個々の列の幅を計算するために使用することができます。 +グリッドのカラム数は、CSS 変数 `--ion-grid-columns` で変更することができます。デフォルトでは 12 列ですが、これを任意の正の整数に変更し、個々の列の幅を計算するために使用することができます。 ```css --ion-grid-columns: 12; ``` -### グリッドのPadding +### グリッドの Padding -グリッドコンテナのPaddingは、CSS変数 `--ion-grid-padding` を使ってすべてのブレークポイントに対して設定することができます。個々のブレイクポイントを上書きするには、CSS変数 `--ion-grid-padding-{breakpoint}` を使用します。 +グリッドコンテナの Padding は、CSS 変数 `--ion-grid-padding` を使ってすべてのブレークポイントに対して設定することができます。個々のブレイクポイントを上書きするには、CSS 変数 `--ion-grid-padding-{breakpoint}` を使用します。 ```css --ion-grid-padding: 5px; @@ -499,7 +499,7 @@ Angularでは [こちら](https://stackblitz.com/edit/ionic-ng-grid-horizontal-a ### Column Padding -列のpaddingは `--ion-grid-column-padding` CSS 変数で全てのブレークポイントに対して設定することができます。個々のブレークポイントを上書きするには、CSS変数 `--ion-grid-column-padding-{breakpoint}` を使用します。 +列の padding は `--ion-grid-column-padding` CSS 変数で全てのブレークポイントに対して設定することができます。個々のブレークポイントを上書きするには、CSS 変数 `--ion-grid-column-padding-{breakpoint}` を使用します。 ```css --ion-grid-column-padding: 5px; diff --git a/docs/layout/structure.md b/docs/layout/structure.md index fbe0d72ef21..ecaccc5c3da 100644 --- a/docs/layout/structure.md +++ b/docs/layout/structure.md @@ -14,223 +14,50 @@ import DocsCards from '@components/global/DocsCards'; /> -Ionic Frameworkは、アプリを構成するために使用できるいくつかの異なるレイアウトを提供します。シングルページレイアウトから、スプリットペインビューやモーダルまで、さまざまなレイアウトがあります。 +Ionic Framework は、アプリを構成するために使用できるいくつかの異なるレイアウトを提供します。シングルページレイアウトから、スプリットペインビューやモーダルまで、さまざまなレイアウトがあります。 -## HeaderとFooterのレイアウト +## Header と Footer のレイアウト ### Header - +最もシンプルなレイアウトは、[header](../api/header.md) と [content](../api/content.md) で構成されています。アプリのほとんどのページは、一般的にこの 2 つを備えていますが、コンテンツを使用するためにヘッダーは必要ではありません。 -最もシンプルなレイアウトは、[header](../api/header.md) と [content](../api/content.md) で構成されています。アプリのほとんどのページは、一般にこの両方を持ちますが、contentを使用するためにheaderは必要ありません。 +import Header from '@site/static/usage/v7/header/basic/index.md'; -```html - - - - Header - - - - -

Main Content

- - -``` +
### Footer - - -ご覧のように、footerのツールバーはコンテンツの上に表示されます。アプリでは、コンテンツの下にツールバーを表示する必要がある場合があり、そのような場合にfooterが使用されます。 - -```html - - -

Main Content

- - - - - Footer - - - -``` - -### Header と Footer - -また、これらを1つのページにまとめて、コンテンツの上と下にツールバーを表示させることも可能です。 - -```html - - - - Header - - +ヘッダーのツールバーがコンテンツの上に表示されるのに対して、フッターはコンテンツの下に表示されます。ヘッダーとフッターは、同じページで併用することも可能です。 - -

Main Content

- +import Footer from '@site/static/usage/v7/footer/basic/index.md'; - - - Footer - - - -``` +