From 7229a94deaae871acd61f16529a8c81d3585f34c Mon Sep 17 00:00:00 2001 From: Masahiko Sakakibara Date: Tue, 17 Oct 2023 23:12:25 +0900 Subject: [PATCH] feat(translation/jp): 20231006 update (#3174) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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(button): include accessibility section with best practices for text wrapping (#3008) * 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 * chore: lint * fix(script): follow new docs script * translate * chore * chore(): fix confrect * fmt * fix(): remove i18n folder from git * chore: JP docs point to v7 (#3056) * chore: use correct name for JP docs (#3057) * docs(android,iOS): link to capacitor getting started guide (#3055) * docs(theming): add section about safe area padding (#3065) * docs(quickstart): change wording for installing CLI (#3040) Co-authored-by: Maria Hutt * docs(previewing): adding instruction about "ionic serve --external" (#3045) Co-authored-by: Maria Hutt * docs(theming): migrate Dark Mode Codepens to playground examples (#3067) Resolves #2998 Co-authored-by: Colum Ferry * docs(api): add accessibility section for new htmlAttributes property (#3064) * docs(vue): streamline usage examples with script setup syntax (#2956) * chore(docs): streamline demo using script setup syntax Simplifies usage demo using Vue’s script setup syntax. --------- Co-authored-by: Shawn Taylor * docs(input): update `Maskito` documentation link (#3072) * docs(react): document lifecycle hook dependencies arg (#3078) resolves #1949 * docs(input): update `Maskito` repository link (#3074) * feat(playground): add prop to display console messages from demo (#3060) * fix(): consolidate docusaurus tab groupids (#3079) * fix(vue): fix bug with key type * fix(): alphabetize sidebar (#3081) * Revert "fix(): alphabetize sidebar (#3081)" (#3087) This reverts commit 760204f9876ec03b7aff07d3a2949e65dc556b10. * docs(picker): describe how to set the initial value of a picker column (#3091) * chore: standardize title tag format (#3092) * docs(datetime): add best practices for setting value async (#3053) * fix(docs): fix merge mistake * translate(core): create translate file * fmt * translate(docs): translated * fmt * chore(CODEOWNERS): create codeowners file and add me * feat(generation): generate playgrounds for guides (#3098) * Conditional prompting * Improve console.log copy * Adjust templates for guide playground generation * Add validation --------- Co-authored-by: Brandy Carney * chore: format generated property types (#3080) * docs(content): add playground for safe area usage (#3102) * docs(fab): add playground for safe area workaround (#3105) * docs(fab): add playground for safe area workaround * Add safe area sizes for stackblitzes * Use both component & global css files; use both scoped and global style tags * feat(checkbox, radio, toggle, range): stacked labels for form controls (#3097) Co-authored-by: Brandy Carney * docs(datetime): adds playground for styling calendar days using shadow parts (#3101) * chore(angular, html, react, vue): revert package versions on stackblitz (#3106) * feat(many): update playgrounds to use showConsole prop instead of showing data within demo (#3107) * docs(input): notes about appropriate uses of counter (#3109) * docs(input): note deprecated properties --------- Co-authored-by: Brandy Carney * fix(nav-link): opt-out of vue reactivity for component binding (#3113) Co-authored-by: David Kagiri * chore(react): update react router links (#3099) * Fix doc links * Fix GH link * Fix typo * docs(modal): modifying dismiss behavior in child components (#3117) * chore: update v7 playground dependencies for React and Vue (#3122) * update react package.json * update vue package.json * chore(ci): renovate configurations for stackblitz templates (#3124) * fix(deps): update ionic to v6.7.5 (#3125) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency typescript to v4.9.5 (#3126) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update react monorepo (#3131) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(playground): better handle multiple files for Javascript (#3119) * fix(playground): better handle multiple files for Javascript * fix(playground): react stackbiltz template files (#3134) * fix(deps): update dependency vue to v3.3.4 (#3129) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency vue-router to v4.2.4 (#3130) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency clsx to v2 (#3138) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency vue-tsc to v1 (#3136) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency vite to v4 (#3135) * chore(deps): update dependency vite to v4 * chore(deps): update dependency @vitejs/plugin-vue to v4 --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Shawn Taylor * chore(): update node to v19 (#3139) * chore(): update node to v19 * chore(): rename status check * chore: trigger rebuild --------- Co-authored-by: Sean Perkins * fix(deps): update dependency @types/node to v18 (#3137) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * docs(item): add best practices and usage guides (#3123) * chore: rename dont props to doNot (#3144) * chore: rename dont files to do-not (#3145) * fix(deps): update ionic to v7.4.1 (#3146) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(): add cspell and fix spelling errors in docs (#3069) * docs(select): reorder examples, add alert playground (#3153) * fix(deps): update dependency @types/node to v18.17.19 (#3154) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update ionic to v7.4.2 (#3161) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency @types/node to v18.18.0 (#3160) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(support): update support table (#3164) * chore(support): update support table * update versioned support tables * fix(deps): update dependency @types/node to v18.18.1 (#3163) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * docs: add docs for dynamic font scaling (#3111) * docs(angular): add standalone documentation (#3115) * docs(dynamic-font): fix font family name (#3149) * docs: add modules architecture usage (#3151) * docs(angular): add angular standalone syntax to non-playground examples (#3116) * fix(angular): standalone guide formatting (#3152) * docs(angular): include add diff sign (#3157) * docs(toast): add playground for positionAnchor (#3158) * chore: resolve cspell errors (#3165) * chore: resolve cspell errors * chore: ignore all node_modules folders * chore: adjust sorting * docs(select): keyboard navigation (#3156) * chore(deps): update dependency vue-tsc to v1.8.14 (#3159) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency web-vitals to v3 (#3142) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore: team is requested for review for renovatebot prs (#3168) * fix typo * chore * chore * fix(deps): update dependency vue-router to v4.2.5 (#3147) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency @types/react to v18.2.22 (#3141) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency vue-tsc to v1.8.15 (#3170) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency @types/node to v18.18.3 (#3171) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency @vitejs/plugin-vue to v4.4.0 (#3172) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update ionic to v7.4.3 (#3178) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update react monorepo (#3179) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency web-vitals to v3.5.0 (#3173) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore: team is requested for review for renovatebot lockfile prs (#3180) * chore(deps): update dependency vite to v4.4.11 (#3177) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * feat(playground): persist framework and mode selection (#3169) * fix(deps): update dependency @types/node to v18.18.4 (#3182) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * chore(deps): update dependency vue-tsc to v1.8.16 (#3181) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(playground): wait until playground is in view before loading stored framework/mode (#3185) * docs(menu): clarify multiple side menu behavior (#3186) * docs(angular): document standalone routing usage (#3167) * docs(many): remove legacy form control syntax from v7 playgrounds (#3140) * docs(angular): add a section to standalone migration for migrating components (#3176) * chore(deps): update dependency vue-tsc to v1.8.18 (#3188) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(jp): re-add files for removed playgrounds (#3189) --------- Co-authored-by: Serhii Kulykov Co-authored-by: Brandy Carney Co-authored-by: Liam DeBeasi Co-authored-by: Maria Hutt Co-authored-by: Sean Perkins Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com> Co-authored-by: Yusuf Sahin HAMZA Co-authored-by: FernetB <47339424+FernetB@users.noreply.github.com> Co-authored-by: Ashraf Latif Co-authored-by: Shawn Taylor 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 Co-authored-by: Faizanahmed Saiyed <119733178+Faizanahmedsy@users.noreply.github.com> Co-authored-by: Mohammed Ashfaq <44408323+ashfaqhaq@users.noreply.github.com> Co-authored-by: Colum Ferry Co-authored-by: Treigh Mawaka <92684310+treighmawaka@users.noreply.github.com> Co-authored-by: Nikita Barsukov Co-authored-by: fc92 <38385756+fc92@users.noreply.github.com> Co-authored-by: Damian Tarnawsky <84595830+dtarnawsky@users.noreply.github.com> Co-authored-by: Sean Perkins <13732623+sean-perkins@users.noreply.github.com> Co-authored-by: David Kagiri Co-authored-by: Conor --- .github/CODEOWNERS | 20 + .github/workflows/CI.yml | 11 +- CONTRIBUTING.md | 81 +- _templates/playground/new/angular.md.ejs.t | 4 +- .../angular_example_component_css.md.ejs.t | 4 +- .../new/angular_example_component_ts.md.ejs.t | 2 +- _templates/playground/new/demo.html.ejs.t | 10 +- _templates/playground/new/index.js | 127 +- _templates/playground/new/index.md.ejs.t | 5 +- _templates/playground/new/javascript.md.ejs.t | 6 +- _templates/playground/new/react.md.ejs.t | 8 +- .../playground/new/react_main_css.md.ejs.t | 4 +- _templates/playground/new/vue.md.ejs.t | 12 +- cspell-wordlist.txt | 84 + cspell.json | 27 + docs/README.md | 2 +- docs/angular/build-options.md | 578 ++ docs/angular/overview.md | 4 + docs/angular/performance.md | 4 + docs/angular/platform.md | 30 + docs/angular/slides.md | 96 +- docs/angular/your-first-app/8-distribute.md | 4 +- docs/api/checkbox.md | 16 +- docs/api/content.md | 23 + docs/api/datetime.md | 45 +- docs/api/fab.md | 27 +- docs/api/input.md | 12 +- docs/api/item.md | 168 +- docs/api/label.md | 11 +- docs/api/menu.md | 2 +- docs/api/modal.md | 12 + docs/api/radio.md | 17 +- docs/api/searchbar.md | 2 +- docs/api/select.md | 91 +- docs/api/textarea.md | 2 + docs/api/toast.md | 8 + docs/api/toggle.md | 12 +- .../what-are-progressive-web-apps.md | 4 + docs/deployment/play-store.md | 2 +- docs/developer-resources/books.md | 24 +- docs/developer-resources/courses.md | 26 +- docs/developing/config.md | 57 + docs/developing/config/global/index.md | 18 + docs/developing/config/per-component/index.md | 37 + .../config/per-platform-fallback/index.md | 27 + .../config/per-platform-overrides/index.md | 30 + docs/developing/config/per-platform/index.md | 23 + docs/developing/hardware-back-button.md | 61 + docs/developing/keyboard.md | 20 + docs/layout/css-utilities.md | 2 +- docs/layout/dynamic-font-scaling.md | 220 + docs/layout/global-stylesheets.md | 2 +- docs/native-faq.md | 2 +- docs/react/navigation.md | 18 +- docs/react/slides.md | 62 +- docs/react/your-first-app/2-taking-photos.md | 2 +- docs/react/your-first-app/8-distribute.md | 6 +- docs/reference/glossary.md | 4 + docs/reference/support.md | 18 +- docs/techniques/security.md | 20 + docs/theming/advanced.md | 2 +- docs/troubleshooting/native.md | 2 +- docs/utilities/animations.md | 20 + docs/utilities/gestures.md | 25 + docs/vue/overview.md | 4 + docs/vue/slides.md | 62 +- docs/vue/your-first-app/8-distribute.md | 4 +- package-lock.json | 5254 ++++++++--------- package.json | 4 +- .../index.js | 14 +- renovate.json | 36 +- scripts/data/translated-api.json | 338 +- scripts/data/translated-cache.json | 15 +- scripts/data/translated-cli.json | 80 +- scripts/data/translated-native.json | 558 +- sidebars.js | 2 + .../best-practice-figure.css | 70 + .../global/BestPracticeFigure/index.tsx | 90 + src/components/global/Playground/README.md | 6 +- src/components/global/Playground/index.tsx | 303 +- .../global/Playground/stackblitz.utils.ts | 18 +- src/styles/components/README.md | 2 +- src/translate/.detection/api/checkbox.json | 39 +- src/translate/.detection/api/content.json | 6 - src/translate/.detection/api/datetime.json | 54 +- src/translate/.detection/api/item.json | 8 +- src/translate/.detection/api/radio.json | 39 +- src/translate/.detection/api/range.json | 12 +- .../.detection/api/router-outlet.json | 9 +- src/translate/.detection/api/textarea.json | 2 +- src/translate/.detection/api/toast.json | 44 +- src/translate/.detection/api/toggle.json | 39 +- src/translate/api/checkbox.json | 39 +- src/translate/api/content.json | 6 - src/translate/api/datetime.json | 54 +- src/translate/api/item.json | 8 +- src/translate/api/radio.json | 39 +- src/translate/api/range.json | 12 +- src/translate/api/router-outlet.json | 9 +- src/translate/api/textarea.json | 2 +- src/translate/api/toast.json | 44 +- src/translate/api/toggle.json | 39 +- src/translate/cli/ssh-use.readme.md | 2 +- .../accordion-group/custom-props.md | 1 - .../auto-generated/accordion-group/events.md | 3 - .../auto-generated/accordion-group/methods.md | 1 - .../auto-generated/accordion-group/parts.md | 1 - .../auto-generated/accordion-group/props.md | 62 - .../auto-generated/accordion-group/slots.md | 1 - .../auto-generated/accordion/custom-props.md | 1 - static/auto-generated/accordion/events.md | 1 - static/auto-generated/accordion/methods.md | 1 - static/auto-generated/accordion/parts.md | 5 - static/auto-generated/accordion/props.md | 53 - static/auto-generated/accordion/slots.md | 4 - .../action-sheet/custom-props.md | 25 - static/auto-generated/action-sheet/events.md | 6 - static/auto-generated/action-sheet/methods.md | 27 - static/auto-generated/action-sheet/parts.md | 1 - static/auto-generated/action-sheet/props.md | 107 - static/auto-generated/action-sheet/slots.md | 1 - static/auto-generated/alert/custom-props.md | 10 - static/auto-generated/alert/events.md | 6 - static/auto-generated/alert/methods.md | 27 - static/auto-generated/alert/parts.md | 1 - static/auto-generated/alert/props.md | 125 - static/auto-generated/alert/slots.md | 1 - static/auto-generated/app/custom-props.md | 1 - static/auto-generated/app/events.md | 1 - static/auto-generated/app/methods.md | 1 - static/auto-generated/app/parts.md | 1 - static/auto-generated/app/props.md | 1 - static/auto-generated/app/slots.md | 1 - static/auto-generated/avatar/custom-props.md | 3 - static/auto-generated/avatar/events.md | 1 - static/auto-generated/avatar/methods.md | 1 - static/auto-generated/avatar/parts.md | 1 - static/auto-generated/avatar/props.md | 1 - static/auto-generated/avatar/slots.md | 1 - .../back-button/custom-props.md | 34 - static/auto-generated/back-button/events.md | 1 - static/auto-generated/back-button/methods.md | 1 - static/auto-generated/back-button/parts.md | 5 - static/auto-generated/back-button/props.md | 71 - static/auto-generated/back-button/slots.md | 1 - .../auto-generated/backdrop/custom-props.md | 1 - static/auto-generated/backdrop/events.md | 3 - static/auto-generated/backdrop/methods.md | 1 - static/auto-generated/backdrop/parts.md | 1 - static/auto-generated/backdrop/props.md | 26 - static/auto-generated/backdrop/slots.md | 1 - static/auto-generated/badge/custom-props.md | 8 - static/auto-generated/badge/events.md | 1 - static/auto-generated/badge/methods.md | 1 - static/auto-generated/badge/parts.md | 1 - static/auto-generated/badge/props.md | 17 - static/auto-generated/badge/slots.md | 1 - .../auto-generated/breadcrumb/custom-props.md | 7 - static/auto-generated/breadcrumb/events.md | 4 - static/auto-generated/breadcrumb/methods.md | 1 - static/auto-generated/breadcrumb/parts.md | 5 - static/auto-generated/breadcrumb/props.md | 98 - static/auto-generated/breadcrumb/slots.md | 1 - .../breadcrumbs/custom-props.md | 1 - static/auto-generated/breadcrumbs/events.md | 3 - static/auto-generated/breadcrumbs/methods.md | 1 - static/auto-generated/breadcrumbs/parts.md | 1 - static/auto-generated/breadcrumbs/props.md | 44 - static/auto-generated/breadcrumbs/slots.md | 1 - static/auto-generated/button/custom-props.md | 25 - static/auto-generated/button/events.md | 4 - static/auto-generated/button/methods.md | 1 - static/auto-generated/button/parts.md | 3 - static/auto-generated/button/props.md | 152 - static/auto-generated/button/slots.md | 6 - static/auto-generated/buttons/custom-props.md | 1 - static/auto-generated/buttons/events.md | 1 - static/auto-generated/buttons/methods.md | 1 - static/auto-generated/buttons/parts.md | 1 - static/auto-generated/buttons/props.md | 8 - static/auto-generated/buttons/slots.md | 1 - .../card-content/custom-props.md | 1 - static/auto-generated/card-content/events.md | 1 - static/auto-generated/card-content/methods.md | 1 - static/auto-generated/card-content/parts.md | 1 - static/auto-generated/card-content/props.md | 8 - static/auto-generated/card-content/slots.md | 1 - .../card-header/custom-props.md | 1 - static/auto-generated/card-header/events.md | 1 - static/auto-generated/card-header/methods.md | 1 - static/auto-generated/card-header/parts.md | 1 - static/auto-generated/card-header/props.md | 26 - static/auto-generated/card-header/slots.md | 1 - .../card-subtitle/custom-props.md | 3 - static/auto-generated/card-subtitle/events.md | 1 - .../auto-generated/card-subtitle/methods.md | 1 - static/auto-generated/card-subtitle/parts.md | 1 - static/auto-generated/card-subtitle/props.md | 17 - static/auto-generated/card-subtitle/slots.md | 1 - .../auto-generated/card-title/custom-props.md | 3 - static/auto-generated/card-title/events.md | 1 - static/auto-generated/card-title/methods.md | 1 - static/auto-generated/card-title/parts.md | 1 - static/auto-generated/card-title/props.md | 17 - static/auto-generated/card-title/slots.md | 1 - static/auto-generated/card/custom-props.md | 4 - static/auto-generated/card/events.md | 1 - static/auto-generated/card/methods.md | 1 - static/auto-generated/card/parts.md | 3 - static/auto-generated/card/props.md | 98 - static/auto-generated/card/slots.md | 1 - .../auto-generated/checkbox/custom-props.md | 13 - static/auto-generated/checkbox/events.md | 5 - static/auto-generated/checkbox/methods.md | 1 - static/auto-generated/checkbox/parts.md | 4 - static/auto-generated/checkbox/props.md | 62 - static/auto-generated/checkbox/slots.md | 1 - static/auto-generated/chip/custom-props.md | 4 - static/auto-generated/chip/events.md | 1 - static/auto-generated/chip/methods.md | 1 - static/auto-generated/chip/parts.md | 1 - static/auto-generated/chip/props.md | 35 - static/auto-generated/chip/slots.md | 1 - static/auto-generated/col/custom-props.md | 9 - static/auto-generated/col/events.md | 1 - static/auto-generated/col/methods.md | 1 - static/auto-generated/col/parts.md | 1 - static/auto-generated/col/props.md | 215 - static/auto-generated/col/slots.md | 1 - static/auto-generated/content/custom-props.md | 11 - static/auto-generated/content/events.md | 5 - static/auto-generated/content/methods.md | 34 - static/auto-generated/content/parts.md | 4 - static/auto-generated/content/props.md | 53 - static/auto-generated/content/slots.md | 4 - .../datetime-button/custom-props.md | 1 - .../auto-generated/datetime-button/events.md | 1 - .../auto-generated/datetime-button/methods.md | 1 - .../auto-generated/datetime-button/parts.md | 3 - .../auto-generated/datetime-button/props.md | 35 - .../auto-generated/datetime-button/slots.md | 4 - .../auto-generated/datetime/custom-props.md | 5 - static/auto-generated/datetime/events.md | 6 - static/auto-generated/datetime/methods.md | 20 - static/auto-generated/datetime/parts.md | 1 - static/auto-generated/datetime/props.md | 269 - static/auto-generated/datetime/slots.md | 5 - .../auto-generated/fab-button/custom-props.md | 25 - static/auto-generated/fab-button/events.md | 4 - static/auto-generated/fab-button/methods.md | 1 - static/auto-generated/fab-button/parts.md | 4 - static/auto-generated/fab-button/props.md | 134 - static/auto-generated/fab-button/slots.md | 1 - .../auto-generated/fab-list/custom-props.md | 1 - static/auto-generated/fab-list/events.md | 1 - static/auto-generated/fab-list/methods.md | 1 - static/auto-generated/fab-list/parts.md | 1 - static/auto-generated/fab-list/props.md | 17 - static/auto-generated/fab-list/slots.md | 1 - static/auto-generated/fab/custom-props.md | 1 - static/auto-generated/fab/events.md | 1 - static/auto-generated/fab/methods.md | 6 - static/auto-generated/fab/parts.md | 1 - static/auto-generated/fab/props.md | 35 - static/auto-generated/fab/slots.md | 1 - static/auto-generated/footer/custom-props.md | 1 - static/auto-generated/footer/events.md | 1 - static/auto-generated/footer/methods.md | 1 - static/auto-generated/footer/parts.md | 1 - static/auto-generated/footer/props.md | 26 - static/auto-generated/footer/slots.md | 1 - static/auto-generated/grid/custom-props.md | 14 - static/auto-generated/grid/events.md | 1 - static/auto-generated/grid/methods.md | 1 - static/auto-generated/grid/parts.md | 1 - static/auto-generated/grid/props.md | 8 - static/auto-generated/grid/slots.md | 1 - static/auto-generated/header/custom-props.md | 1 - static/auto-generated/header/events.md | 1 - static/auto-generated/header/methods.md | 1 - static/auto-generated/header/parts.md | 1 - static/auto-generated/header/props.md | 26 - static/auto-generated/header/slots.md | 1 - static/auto-generated/img/custom-props.md | 1 - static/auto-generated/img/events.md | 5 - static/auto-generated/img/methods.md | 1 - static/auto-generated/img/parts.md | 3 - static/auto-generated/img/props.md | 17 - static/auto-generated/img/slots.md | 1 - .../infinite-scroll-content/custom-props.md | 1 - .../infinite-scroll-content/events.md | 1 - .../infinite-scroll-content/methods.md | 1 - .../infinite-scroll-content/parts.md | 1 - .../infinite-scroll-content/props.md | 17 - .../infinite-scroll-content/slots.md | 1 - .../infinite-scroll/custom-props.md | 1 - .../auto-generated/infinite-scroll/events.md | 3 - .../auto-generated/infinite-scroll/methods.md | 6 - .../auto-generated/infinite-scroll/parts.md | 1 - .../auto-generated/infinite-scroll/props.md | 26 - .../auto-generated/infinite-scroll/slots.md | 1 - static/auto-generated/input/custom-props.md | 12 - static/auto-generated/input/events.md | 6 - static/auto-generated/input/methods.md | 13 - static/auto-generated/input/parts.md | 1 - static/auto-generated/input/props.md | 251 - static/auto-generated/input/slots.md | 1 - .../item-divider/custom-props.md | 12 - static/auto-generated/item-divider/events.md | 1 - static/auto-generated/item-divider/methods.md | 1 - static/auto-generated/item-divider/parts.md | 1 - static/auto-generated/item-divider/props.md | 26 - static/auto-generated/item-divider/slots.md | 5 - .../auto-generated/item-group/custom-props.md | 1 - static/auto-generated/item-group/events.md | 1 - static/auto-generated/item-group/methods.md | 1 - static/auto-generated/item-group/parts.md | 1 - static/auto-generated/item-group/props.md | 1 - static/auto-generated/item-group/slots.md | 1 - .../item-option/custom-props.md | 4 - static/auto-generated/item-option/events.md | 1 - static/auto-generated/item-option/methods.md | 1 - static/auto-generated/item-option/parts.md | 3 - static/auto-generated/item-option/props.md | 80 - static/auto-generated/item-option/slots.md | 8 - .../item-options/custom-props.md | 1 - static/auto-generated/item-options/events.md | 3 - static/auto-generated/item-options/methods.md | 1 - static/auto-generated/item-options/parts.md | 1 - static/auto-generated/item-options/props.md | 8 - static/auto-generated/item-options/slots.md | 1 - .../item-sliding/custom-props.md | 1 - static/auto-generated/item-sliding/events.md | 3 - static/auto-generated/item-sliding/methods.md | 34 - static/auto-generated/item-sliding/parts.md | 1 - static/auto-generated/item-sliding/props.md | 8 - static/auto-generated/item-sliding/slots.md | 1 - static/auto-generated/item/custom-props.md | 37 - static/auto-generated/item/events.md | 1 - static/auto-generated/item/methods.md | 1 - static/auto-generated/item/parts.md | 4 - static/auto-generated/item/props.md | 161 - static/auto-generated/item/slots.md | 7 - static/auto-generated/label/custom-props.md | 3 - static/auto-generated/label/events.md | 1 - static/auto-generated/label/methods.md | 1 - static/auto-generated/label/parts.md | 1 - static/auto-generated/label/props.md | 26 - static/auto-generated/label/slots.md | 1 - .../list-header/custom-props.md | 8 - static/auto-generated/list-header/events.md | 1 - static/auto-generated/list-header/methods.md | 1 - static/auto-generated/list-header/parts.md | 1 - static/auto-generated/list-header/props.md | 26 - static/auto-generated/list-header/slots.md | 1 - static/auto-generated/list/custom-props.md | 1 - static/auto-generated/list/events.md | 1 - static/auto-generated/list/methods.md | 6 - static/auto-generated/list/parts.md | 1 - static/auto-generated/list/props.md | 26 - static/auto-generated/list/slots.md | 1 - static/auto-generated/loading/custom-props.md | 11 - static/auto-generated/loading/events.md | 6 - static/auto-generated/loading/methods.md | 27 - static/auto-generated/loading/parts.md | 1 - static/auto-generated/loading/props.md | 116 - static/auto-generated/loading/slots.md | 1 - .../menu-button/custom-props.md | 15 - static/auto-generated/menu-button/events.md | 1 - static/auto-generated/menu-button/methods.md | 1 - static/auto-generated/menu-button/parts.md | 4 - static/auto-generated/menu-button/props.md | 53 - static/auto-generated/menu-button/slots.md | 1 - .../menu-toggle/custom-props.md | 1 - static/auto-generated/menu-toggle/events.md | 1 - static/auto-generated/menu-toggle/methods.md | 1 - static/auto-generated/menu-toggle/parts.md | 1 - static/auto-generated/menu-toggle/props.md | 17 - static/auto-generated/menu-toggle/slots.md | 3 - static/auto-generated/menu/custom-props.md | 9 - static/auto-generated/menu/events.md | 6 - static/auto-generated/menu/methods.md | 41 - static/auto-generated/menu/parts.md | 4 - static/auto-generated/menu/props.md | 62 - static/auto-generated/menu/slots.md | 1 - static/auto-generated/modal/custom-props.md | 14 - static/auto-generated/modal/events.md | 11 - static/auto-generated/modal/methods.md | 41 - static/auto-generated/modal/parts.md | 5 - static/auto-generated/modal/props.md | 170 - static/auto-generated/modal/slots.md | 3 - .../auto-generated/nav-link/custom-props.md | 1 - static/auto-generated/nav-link/events.md | 1 - static/auto-generated/nav-link/methods.md | 1 - static/auto-generated/nav-link/parts.md | 1 - static/auto-generated/nav-link/props.md | 35 - static/auto-generated/nav-link/slots.md | 1 - static/auto-generated/nav/custom-props.md | 1 - static/auto-generated/nav/events.md | 4 - static/auto-generated/nav/methods.md | 90 - static/auto-generated/nav/parts.md | 1 - static/auto-generated/nav/props.md | 44 - static/auto-generated/nav/slots.md | 1 - static/auto-generated/note/custom-props.md | 3 - static/auto-generated/note/events.md | 1 - static/auto-generated/note/methods.md | 1 - static/auto-generated/note/parts.md | 1 - static/auto-generated/note/props.md | 17 - static/auto-generated/note/slots.md | 1 - static/auto-generated/picker/custom-props.md | 15 - static/auto-generated/picker/events.md | 6 - static/auto-generated/picker/methods.md | 34 - static/auto-generated/picker/parts.md | 1 - static/auto-generated/picker/props.md | 107 - static/auto-generated/picker/slots.md | 1 - static/auto-generated/popover/custom-props.md | 13 - static/auto-generated/popover/events.md | 10 - static/auto-generated/popover/methods.md | 27 - static/auto-generated/popover/parts.md | 5 - static/auto-generated/popover/props.md | 197 - static/auto-generated/popover/slots.md | 3 - .../progress-bar/custom-props.md | 5 - static/auto-generated/progress-bar/events.md | 1 - static/auto-generated/progress-bar/methods.md | 1 - static/auto-generated/progress-bar/parts.md | 5 - static/auto-generated/progress-bar/props.md | 53 - static/auto-generated/progress-bar/slots.md | 1 - .../radio-group/custom-props.md | 1 - static/auto-generated/radio-group/events.md | 3 - static/auto-generated/radio-group/methods.md | 1 - static/auto-generated/radio-group/parts.md | 1 - static/auto-generated/radio-group/props.md | 26 - static/auto-generated/radio-group/slots.md | 1 - static/auto-generated/radio/custom-props.md | 6 - static/auto-generated/radio/events.md | 4 - static/auto-generated/radio/methods.md | 1 - static/auto-generated/radio/parts.md | 4 - static/auto-generated/radio/props.md | 44 - static/auto-generated/radio/slots.md | 1 - static/auto-generated/range/custom-props.md | 13 - static/auto-generated/range/events.md | 7 - static/auto-generated/range/methods.md | 1 - static/auto-generated/range/parts.md | 8 - static/auto-generated/range/props.md | 134 - static/auto-generated/range/slots.md | 4 - .../refresher-content/custom-props.md | 1 - .../refresher-content/events.md | 1 - .../refresher-content/methods.md | 1 - .../auto-generated/refresher-content/parts.md | 1 - .../auto-generated/refresher-content/props.md | 35 - .../auto-generated/refresher-content/slots.md | 1 - .../auto-generated/refresher/custom-props.md | 1 - static/auto-generated/refresher/events.md | 5 - static/auto-generated/refresher/methods.md | 20 - static/auto-generated/refresher/parts.md | 1 - static/auto-generated/refresher/props.md | 53 - static/auto-generated/refresher/slots.md | 1 - .../reorder-group/custom-props.md | 1 - static/auto-generated/reorder-group/events.md | 3 - .../auto-generated/reorder-group/methods.md | 6 - static/auto-generated/reorder-group/parts.md | 1 - static/auto-generated/reorder-group/props.md | 8 - static/auto-generated/reorder-group/slots.md | 1 - static/auto-generated/reorder/custom-props.md | 1 - static/auto-generated/reorder/events.md | 1 - static/auto-generated/reorder/methods.md | 1 - static/auto-generated/reorder/parts.md | 3 - static/auto-generated/reorder/props.md | 1 - static/auto-generated/reorder/slots.md | 1 - .../ripple-effect/custom-props.md | 1 - static/auto-generated/ripple-effect/events.md | 1 - .../auto-generated/ripple-effect/methods.md | 6 - static/auto-generated/ripple-effect/parts.md | 1 - static/auto-generated/ripple-effect/props.md | 8 - static/auto-generated/ripple-effect/slots.md | 1 - .../route-redirect/custom-props.md | 1 - .../auto-generated/route-redirect/events.md | 3 - .../auto-generated/route-redirect/methods.md | 1 - static/auto-generated/route-redirect/parts.md | 1 - static/auto-generated/route-redirect/props.md | 17 - static/auto-generated/route-redirect/slots.md | 1 - static/auto-generated/route/custom-props.md | 1 - static/auto-generated/route/events.md | 3 - static/auto-generated/route/methods.md | 1 - static/auto-generated/route/parts.md | 1 - static/auto-generated/route/props.md | 44 - static/auto-generated/route/slots.md | 1 - .../router-link/custom-props.md | 4 - static/auto-generated/router-link/events.md | 1 - static/auto-generated/router-link/methods.md | 1 - static/auto-generated/router-link/parts.md | 1 - static/auto-generated/router-link/props.md | 53 - static/auto-generated/router-link/slots.md | 1 - .../router-outlet/custom-props.md | 1 - static/auto-generated/router-outlet/events.md | 1 - .../auto-generated/router-outlet/methods.md | 1 - static/auto-generated/router-outlet/parts.md | 1 - static/auto-generated/router-outlet/props.md | 26 - static/auto-generated/router-outlet/slots.md | 1 - static/auto-generated/router/custom-props.md | 1 - static/auto-generated/router/events.md | 4 - static/auto-generated/router/methods.md | 13 - static/auto-generated/router/parts.md | 1 - static/auto-generated/router/props.md | 17 - static/auto-generated/router/slots.md | 1 - static/auto-generated/row/custom-props.md | 1 - static/auto-generated/row/events.md | 1 - static/auto-generated/row/methods.md | 1 - static/auto-generated/row/parts.md | 1 - static/auto-generated/row/props.md | 1 - static/auto-generated/row/slots.md | 1 - .../auto-generated/searchbar/custom-props.md | 13 - static/auto-generated/searchbar/events.md | 8 - static/auto-generated/searchbar/methods.md | 13 - static/auto-generated/searchbar/parts.md | 1 - static/auto-generated/searchbar/props.md | 170 - static/auto-generated/searchbar/slots.md | 1 - .../segment-button/custom-props.md | 30 - .../auto-generated/segment-button/events.md | 1 - .../auto-generated/segment-button/methods.md | 1 - static/auto-generated/segment-button/parts.md | 5 - static/auto-generated/segment-button/props.md | 44 - static/auto-generated/segment-button/slots.md | 1 - static/auto-generated/segment/custom-props.md | 3 - static/auto-generated/segment/events.md | 3 - static/auto-generated/segment/methods.md | 1 - static/auto-generated/segment/parts.md | 1 - static/auto-generated/segment/props.md | 62 - static/auto-generated/segment/slots.md | 1 - .../select-option/custom-props.md | 1 - static/auto-generated/select-option/events.md | 1 - .../auto-generated/select-option/methods.md | 1 - static/auto-generated/select-option/parts.md | 1 - static/auto-generated/select-option/props.md | 17 - static/auto-generated/select-option/slots.md | 1 - static/auto-generated/select/custom-props.md | 8 - static/auto-generated/select/events.md | 7 - static/auto-generated/select/methods.md | 6 - static/auto-generated/select/parts.md | 5 - static/auto-generated/select/props.md | 107 - static/auto-generated/select/slots.md | 1 - .../skeleton-text/custom-props.md | 5 - static/auto-generated/skeleton-text/events.md | 1 - .../auto-generated/skeleton-text/methods.md | 1 - static/auto-generated/skeleton-text/parts.md | 1 - static/auto-generated/skeleton-text/props.md | 8 - static/auto-generated/skeleton-text/slots.md | 1 - static/auto-generated/slide/custom-props.md | 1 - static/auto-generated/slide/events.md | 1 - static/auto-generated/slide/methods.md | 1 - static/auto-generated/slide/parts.md | 1 - static/auto-generated/slide/props.md | 1 - static/auto-generated/slide/slots.md | 1 - static/auto-generated/slides/custom-props.md | 8 - static/auto-generated/slides/events.md | 18 - static/auto-generated/slides/methods.md | 111 - static/auto-generated/slides/parts.md | 1 - static/auto-generated/slides/props.md | 35 - static/auto-generated/slides/slots.md | 1 - static/auto-generated/spinner/custom-props.md | 3 - static/auto-generated/spinner/events.md | 1 - static/auto-generated/spinner/methods.md | 1 - static/auto-generated/spinner/parts.md | 1 - static/auto-generated/spinner/props.md | 35 - static/auto-generated/spinner/slots.md | 1 - .../auto-generated/split-pane/custom-props.md | 6 - static/auto-generated/split-pane/events.md | 3 - static/auto-generated/split-pane/methods.md | 1 - static/auto-generated/split-pane/parts.md | 1 - static/auto-generated/split-pane/props.md | 26 - static/auto-generated/split-pane/slots.md | 1 - static/auto-generated/tab-bar/custom-props.md | 5 - static/auto-generated/tab-bar/events.md | 1 - static/auto-generated/tab-bar/methods.md | 1 - static/auto-generated/tab-bar/parts.md | 1 - static/auto-generated/tab-bar/props.md | 35 - static/auto-generated/tab-bar/slots.md | 1 - .../auto-generated/tab-button/custom-props.md | 13 - static/auto-generated/tab-button/events.md | 1 - static/auto-generated/tab-button/methods.md | 1 - static/auto-generated/tab-button/parts.md | 3 - static/auto-generated/tab-button/props.md | 80 - static/auto-generated/tab-button/slots.md | 1 - static/auto-generated/tab/custom-props.md | 1 - static/auto-generated/tab/events.md | 1 - static/auto-generated/tab/methods.md | 6 - static/auto-generated/tab/parts.md | 1 - static/auto-generated/tab/props.md | 17 - static/auto-generated/tab/slots.md | 1 - static/auto-generated/tabs/custom-props.md | 1 - static/auto-generated/tabs/events.md | 4 - static/auto-generated/tabs/methods.md | 20 - static/auto-generated/tabs/parts.md | 1 - static/auto-generated/tabs/props.md | 1 - static/auto-generated/tabs/slots.md | 5 - static/auto-generated/text/custom-props.md | 1 - static/auto-generated/text/events.md | 1 - static/auto-generated/text/methods.md | 1 - static/auto-generated/text/parts.md | 1 - static/auto-generated/text/props.md | 17 - static/auto-generated/text/slots.md | 1 - .../auto-generated/textarea/custom-props.md | 13 - static/auto-generated/textarea/events.md | 6 - static/auto-generated/textarea/methods.md | 13 - static/auto-generated/textarea/parts.md | 1 - static/auto-generated/textarea/props.md | 188 - static/auto-generated/textarea/slots.md | 1 - .../auto-generated/thumbnail/custom-props.md | 4 - static/auto-generated/thumbnail/events.md | 1 - static/auto-generated/thumbnail/methods.md | 1 - static/auto-generated/thumbnail/parts.md | 1 - static/auto-generated/thumbnail/props.md | 1 - static/auto-generated/thumbnail/slots.md | 1 - static/auto-generated/title/custom-props.md | 3 - static/auto-generated/title/events.md | 1 - static/auto-generated/title/methods.md | 1 - static/auto-generated/title/parts.md | 1 - static/auto-generated/title/props.md | 17 - static/auto-generated/title/slots.md | 1 - static/auto-generated/toast/custom-props.md | 19 - static/auto-generated/toast/events.md | 6 - static/auto-generated/toast/methods.md | 27 - static/auto-generated/toast/parts.md | 7 - static/auto-generated/toast/props.md | 143 - static/auto-generated/toast/slots.md | 1 - static/auto-generated/toggle/custom-props.md | 14 - static/auto-generated/toggle/events.md | 5 - static/auto-generated/toggle/methods.md | 1 - static/auto-generated/toggle/parts.md | 4 - static/auto-generated/toggle/props.md | 62 - static/auto-generated/toggle/slots.md | 1 - static/auto-generated/toolbar/custom-props.md | 13 - static/auto-generated/toolbar/events.md | 1 - static/auto-generated/toolbar/methods.md | 1 - static/auto-generated/toolbar/parts.md | 1 - static/auto-generated/toolbar/props.md | 17 - static/auto-generated/toolbar/slots.md | 7 - .../virtual-scroll/custom-props.md | 1 - .../auto-generated/virtual-scroll/events.md | 1 - .../auto-generated/virtual-scroll/methods.md | 20 - static/auto-generated/virtual-scroll/parts.md | 1 - static/auto-generated/virtual-scroll/props.md | 116 - static/auto-generated/virtual-scroll/slots.md | 1 - static/code/stackblitz/README.md | 4 +- static/code/stackblitz/v6/react/index.html | 9 +- .../stackblitz/v6/react/package-lock.json | 140 +- static/code/stackblitz/v6/react/package.json | 4 +- .../code/stackblitz/v6/vue/package-lock.json | 1809 +++--- static/code/stackblitz/v6/vue/package.json | 8 +- static/code/stackblitz/v7/react/index.html | 9 +- .../stackblitz/v7/react/package-lock.json | 268 +- static/code/stackblitz/v7/react/package.json | 10 +- .../code/stackblitz/v7/vue/package-lock.json | 1837 +++--- static/code/stackblitz/v7/vue/package.json | 12 +- static/img/item/actions-do-not.jpg | Bin 0 -> 802874 bytes static/img/item/actions-do.jpg | Bin 0 -> 496848 bytes static/img/item/controls-count-do-not.jpg | Bin 0 -> 550291 bytes static/img/item/controls-count-do.jpg | Bin 0 -> 482124 bytes static/img/item/controls-metadata-do-not.jpg | Bin 0 -> 418189 bytes static/img/item/controls-metadata-do.jpg | Bin 0 -> 446592 bytes .../item/controls-metadata-list-do-not.jpg | Bin 0 -> 533655 bytes static/img/item/controls-metadata-list-do.jpg | Bin 0 -> 572757 bytes static/img/item/long-text-do-not.jpg | Bin 0 -> 973178 bytes static/img/item/long-text-do.jpg | Bin 0 -> 865283 bytes .../img/item/metadata-important-caution.jpg | Bin 0 -> 750320 bytes static/img/item/metadata-relevant-do-not.jpg | Bin 0 -> 635432 bytes static/img/item/metadata-relevant-do.jpg | Bin 0 -> 552217 bytes static/img/item/visuals-do-not.jpg | Bin 0 -> 338335 bytes static/img/item/visuals-do.jpg | Bin 0 -> 318046 bytes .../animations/javascript/index_html.md | 179 +- .../usage/v6/nav/nav-link/vue/example_vue.md | 3 +- .../usage/v6/nav/nav-link/vue/page_one_vue.md | 3 +- .../usage/v6/nav/nav-link/vue/page_two_vue.md | 3 +- .../angular/example_component_html.md | 2 - .../angular/example_component_ts.md | 15 +- .../v7/accordion/listen-changes/demo.html | 17 +- .../v7/accordion/listen-changes/index.md | 1 + .../v7/accordion/listen-changes/javascript.md | 10 +- .../v7/accordion/listen-changes/react.md | 70 +- .../usage/v7/accordion/listen-changes/vue.md | 21 +- .../angular/example_component_css.md | 4 - .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 5 +- .../role-info-on-dismiss/demo.html | 9 +- .../role-info-on-dismiss/index.md | 1 + .../role-info-on-dismiss/javascript.md | 9 +- .../role-info-on-dismiss/react/main_css.md | 4 - .../role-info-on-dismiss/react/main_tsx.md | 10 +- .../action-sheet/role-info-on-dismiss/vue.md | 17 +- .../buttons/angular/example_component_html.md | 2 - .../buttons/angular/example_component_ts.md | 9 +- static/usage/v7/alert/buttons/demo.html | 20 +- static/usage/v7/alert/buttons/index.md | 1 + static/usage/v7/alert/buttons/javascript.md | 10 +- static/usage/v7/alert/buttons/react.md | 13 +- static/usage/v7/alert/buttons/vue.md | 16 +- static/usage/v7/backdrop/basic/angular.md | 3 +- static/usage/v7/backdrop/basic/demo.html | 3 +- static/usage/v7/backdrop/basic/javascript.md | 3 +- static/usage/v7/backdrop/basic/react.md | 4 +- static/usage/v7/backdrop/basic/vue.md | 6 +- static/usage/v7/checkbox/alignment/angular.md | 11 + static/usage/v7/checkbox/alignment/demo.html | 29 + static/usage/v7/checkbox/alignment/index.md | 17 + .../usage/v7/checkbox/alignment/javascript.md | 11 + static/usage/v7/checkbox/alignment/react.md | 25 + static/usage/v7/checkbox/alignment/vue.md | 24 + .../v7/checkbox/label-placement/angular.md | 4 + .../v7/checkbox/label-placement/demo.html | 4 + .../v7/checkbox/label-placement/javascript.md | 4 + .../v7/checkbox/label-placement/react.md | 4 + .../usage/v7/checkbox/label-placement/vue.md | 4 + .../angular/example_component_ts.md | 2 +- .../usage/v7/content/scroll-events/demo.html | 2 +- .../usage/v7/content/scroll-events/index.md | 1 + .../v7/content/scroll-events/javascript.md | 2 +- .../usage/v7/content/scroll-events/react.md | 2 +- static/usage/v7/content/scroll-events/vue.md | 2 +- .../angular/example_component_css.md | 8 + .../angular/example_component_html.md | 5 + .../theming/safe-area/angular/global_css.md | 12 + .../v7/content/theming/safe-area/demo.html | 36 + .../v7/content/theming/safe-area/index.md | 36 + .../content/theming/safe-area/javascript.md | 25 + .../theming/safe-area/react/main_css.md | 19 + .../theming/safe-area/react/main_tsx.md | 15 + .../usage/v7/content/theming/safe-area/vue.md | 40 + .../angular/example_component_css.md | 46 + .../angular/example_component_html.md | 3 + .../angular/example_component_ts.md | 36 + .../datetime/styling/calendar-days/demo.html | 91 + .../datetime/styling/calendar-days/index.md | 35 + .../styling/calendar-days/javascript.md | 72 + .../styling/calendar-days/react/main_css.md | 46 + .../styling/calendar-days/react/main_tsx.md | 33 + .../v7/datetime/styling/calendar-days/vue.md | 88 + .../angular/example_component_ts.md | 14 + .../datetime/styling/wheel-styling/index.md | 2 + .../angular/example_component_css.md | 6 + .../angular/example_component_html.md | 7 + .../v7/fab/safe-area/angular/global_css.md | 10 + static/usage/v7/fab/safe-area/demo.html | 28 + static/usage/v7/fab/safe-area/index.md | 35 + static/usage/v7/fab/safe-area/javascript.md | 23 + .../usage/v7/fab/safe-area/react/main_css.md | 15 + .../usage/v7/fab/safe-area/react/main_tsx.md | 18 + static/usage/v7/fab/safe-area/vue.md | 44 + .../v7/input/counter-alignment/angular.md | 11 + .../v7/input/counter-alignment/demo.html | 30 + .../usage/v7/input/counter-alignment/index.md | 17 + .../v7/input/counter-alignment/javascript.md | 11 + .../usage/v7/input/counter-alignment/react.md | 21 + .../usage/v7/input/counter-alignment/vue.md | 17 + .../v7/input/mask/javascript/index_html.md | 89 +- .../v7/item/content-types/actions/angular.md | 150 + .../v7/item/content-types/actions/demo.html | 165 + .../v7/item/content-types/actions/index.md | 19 + .../item/content-types/actions/javascript.md | 150 + .../v7/item/content-types/actions/react.md | 174 + .../v7/item/content-types/actions/vue.md | 191 + .../v7/item/content-types/controls/angular.md | 39 + .../v7/item/content-types/controls/demo.html | 54 + .../v7/item/content-types/controls/index.md | 19 + .../item/content-types/controls/javascript.md | 39 + .../v7/item/content-types/controls/react.md | 49 + .../v7/item/content-types/controls/vue.md | 59 + .../metadata/angular/example_component_css.md | 41 + .../angular/example_component_html.md | 90 + .../v7/item/content-types/metadata/demo.html | 146 + .../v7/item/content-types/metadata/index.md | 34 + .../item/content-types/metadata/javascript.md | 132 + .../content-types/metadata/react/main_css.md | 41 + .../content-types/metadata/react/main_tsx.md | 122 + .../v7/item/content-types/metadata/vue.md | 169 + .../supporting-visuals/angular.md | 47 + .../supporting-visuals/demo.html | 66 + .../content-types/supporting-visuals/index.md | 18 + .../supporting-visuals/javascript.md | 47 + .../content-types/supporting-visuals/react.md | 58 + .../content-types/supporting-visuals/vue.md | 68 + .../text/angular/example_component_css.md | 5 + .../text/angular/example_component_html.md | 33 + .../v7/item/content-types/text/demo.html | 53 + .../usage/v7/item/content-types/text/index.md | 34 + .../v7/item/content-types/text/javascript.md | 39 + .../item/content-types/text/react/main_css.md | 5 + .../item/content-types/text/react/main_tsx.md | 57 + .../usage/v7/item/content-types/text/vue.md | 74 + static/usage/v7/item/inputs/angular.md | 8 - static/usage/v7/item/inputs/demo.html | 16 - static/usage/v7/item/inputs/javascript.md | 8 - static/usage/v7/item/inputs/react.md | 16 - static/usage/v7/item/inputs/vue.md | 12 - .../v7/item/theming/input-highlight/vue.md | 1 - static/usage/v7/label/input/vue.md | 1 - .../angular/example_component_html.md | 45 + .../angular/global_css.md | 5 + .../v7/layout/dynamic-font-scaling/demo.html | 71 + .../v7/layout/dynamic-font-scaling/index.md | 34 + .../layout/dynamic-font-scaling/javascript.md | 51 + .../dynamic-font-scaling/react/main_css.md | 5 + .../dynamic-font-scaling/react/main_tsx.md | 74 + .../v7/layout/dynamic-font-scaling/vue.md | 98 + .../multiple/angular/example_component_ts.md | 20 +- static/usage/v7/menu/multiple/demo.html | 20 +- static/usage/v7/menu/multiple/javascript.md | 20 +- static/usage/v7/menu/multiple/react.md | 20 +- static/usage/v7/menu/multiple/vue.md | 20 +- .../type/angular/example_component_html.md | 15 +- static/usage/v7/menu/type/demo.html | 15 +- static/usage/v7/menu/type/javascript.md | 15 +- static/usage/v7/menu/type/react.md | 16 +- static/usage/v7/menu/type/vue.md | 17 +- .../boolean/angular/example_component_html.md | 5 +- .../v7/modal/can-dismiss/boolean/demo.html | 5 +- .../modal/can-dismiss/boolean/javascript.md | 5 +- .../v7/modal/can-dismiss/boolean/react.md | 8 +- .../usage/v7/modal/can-dismiss/boolean/vue.md | 7 +- .../child-state/angular/app_module_ts.md | 19 + .../angular/child_component_html.md | 24 + .../child-state/angular/child_component_ts.md | 22 + .../angular/example_component_html.md | 23 + .../angular/example_component_ts.md | 58 + .../modal/can-dismiss/child-state/demo.html | 92 + .../v7/modal/can-dismiss/child-state/index.md | 42 + .../child-state/react/child_tsx.md | 55 + .../can-dismiss/child-state/react/main_tsx.md | 97 + .../can-dismiss/child-state/vue/child_vue.md | 51 + .../child-state/vue/example_vue.md | 85 + .../basic/angular/example_component_html.md | 9 +- static/usage/v7/modal/inline/basic/demo.html | 8 +- .../usage/v7/modal/inline/basic/javascript.md | 3 +- static/usage/v7/modal/inline/basic/react.md | 10 +- static/usage/v7/modal/inline/basic/vue.md | 10 +- .../animations/javascript/index_html.md | 179 +- .../usage/v7/nav/nav-link/vue/example_vue.md | 3 +- .../usage/v7/nav/nav-link/vue/page_one_vue.md | 3 +- .../usage/v7/nav/nav-link/vue/page_two_vue.md | 3 +- .../angular/example_component_ts.md | 2 +- static/usage/v7/picker/controller/demo.html | 2 +- static/usage/v7/picker/controller/index.md | 1 + .../usage/v7/picker/controller/javascript.md | 2 +- static/usage/v7/picker/controller/react.md | 2 +- static/usage/v7/picker/controller/vue.md | 2 +- .../isOpen/angular/example_component_ts.md | 2 +- .../usage/v7/picker/inline/isOpen/demo.html | 2 +- static/usage/v7/picker/inline/isOpen/index.md | 1 + .../v7/picker/inline/isOpen/javascript.md | 2 +- static/usage/v7/picker/inline/isOpen/react.md | 2 +- static/usage/v7/picker/inline/isOpen/vue.md | 2 +- .../trigger/angular/example_component_ts.md | 2 +- .../usage/v7/picker/inline/trigger/demo.html | 2 +- .../usage/v7/picker/inline/trigger/index.md | 1 + .../v7/picker/inline/trigger/javascript.md | 2 +- .../usage/v7/picker/inline/trigger/react.md | 2 +- static/usage/v7/picker/inline/trigger/vue.md | 2 +- .../angular/example_component_ts.md | 2 +- .../usage/v7/picker/multiple-column/demo.html | 2 +- .../usage/v7/picker/multiple-column/index.md | 1 + .../v7/picker/multiple-column/javascript.md | 2 +- .../usage/v7/picker/multiple-column/react.md | 4 +- static/usage/v7/picker/multiple-column/vue.md | 2 +- .../angular/example_component_html.md | 1 - .../angular/example_component_ts.md | 4 +- .../popover/presenting/controller/demo.html | 11 +- .../v7/popover/presenting/controller/index.md | 1 + .../presenting/controller/javascript.md | 5 +- .../v7/popover/presenting/controller/react.md | 26 +- .../presenting/controller/vue/example_vue.md | 8 +- static/usage/v7/radio/alignment/angular.md | 15 + static/usage/v7/radio/alignment/demo.html | 34 + static/usage/v7/radio/alignment/index.md | 17 + static/usage/v7/radio/alignment/javascript.md | 15 + static/usage/v7/radio/alignment/react.md | 27 + static/usage/v7/radio/alignment/vue.md | 26 + .../usage/v7/radio/label-placement/angular.md | 6 + .../usage/v7/radio/label-placement/demo.html | 6 + .../v7/radio/label-placement/javascript.md | 6 + .../usage/v7/radio/label-placement/react.md | 8 + static/usage/v7/radio/label-placement/vue.md | 6 + .../angular/example_component_html.md | 6 - .../angular/example_component_ts.md | 8 +- .../v7/range/ion-knob-move-event/demo.html | 12 +- .../v7/range/ion-knob-move-event/index.md | 1 + .../range/ion-knob-move-event/javascript.md | 12 +- .../v7/range/ion-knob-move-event/react.md | 26 +- .../usage/v7/range/ion-knob-move-event/vue.md | 20 +- static/usage/v7/range/labels/angular.md | 4 + static/usage/v7/range/labels/demo.html | 4 + static/usage/v7/range/labels/javascript.md | 4 + static/usage/v7/range/labels/react.md | 4 + static/usage/v7/range/labels/vue.md | 4 + static/usage/v7/reorder/basic/index.md | 1 + static/usage/v7/reorder/custom-icon/index.md | 1 + .../v7/reorder/custom-scroll-target/index.md | 1 + .../v7/reorder/toggling-disabled/index.md | 1 + .../usage/v7/reorder/updating-data/index.md | 1 + static/usage/v7/reorder/wrapper/index.md | 1 + .../angular/example_component_html.md | 7 +- .../angular/example_component_ts.md | 12 +- .../basic/responding-to-interaction/demo.html | 38 +- .../basic/responding-to-interaction/index.md | 1 + .../responding-to-interaction/javascript.md | 8 +- .../basic/responding-to-interaction/react.md | 45 +- .../basic/responding-to-interaction/vue.md | 24 +- .../angular/example_component_html.md | 3 - .../angular/example_component_ts.md | 4 +- .../multiple-selection/demo.html | 19 +- .../multiple-selection/index.md | 1 + .../multiple-selection/javascript.md | 9 +- .../multiple-selection/react.md | 11 +- .../multiple-selection/vue.md | 13 +- .../angular/example_component_html.md | 3 - .../angular/example_component_ts.md | 4 +- .../using-comparewith/demo.html | 15 +- .../using-comparewith/index.md | 1 + .../using-comparewith/javascript.md | 8 +- .../using-comparewith/react.md | 11 +- .../using-comparewith/vue.md | 13 +- .../theming/automatic-dark-mode/javascript.md | 165 +- .../v7/theming/manual-dark-mode/javascript.md | 241 +- .../buttons/angular/example_component_html.md | 2 - .../buttons/angular/example_component_ts.md | 8 +- static/usage/v7/toast/buttons/demo.html | 20 +- static/usage/v7/toast/buttons/index.md | 1 + static/usage/v7/toast/buttons/javascript.md | 10 +- static/usage/v7/toast/buttons/react.md | 13 +- static/usage/v7/toast/buttons/vue.md | 17 +- .../usage/v7/toast/position-anchor/angular.md | 33 + .../usage/v7/toast/position-anchor/demo.html | 57 + .../usage/v7/toast/position-anchor/index.md | 19 + .../v7/toast/position-anchor/javascript.md | 33 + .../usage/v7/toast/position-anchor/react.md | 43 + static/usage/v7/toast/position-anchor/vue.md | 52 + static/usage/v7/toggle/alignment/angular.md | 4 + static/usage/v7/toggle/alignment/demo.html | 25 + static/usage/v7/toggle/alignment/index.md | 17 + .../usage/v7/toggle/alignment/javascript.md | 4 + static/usage/v7/toggle/alignment/react.md | 20 + static/usage/v7/toggle/alignment/vue.md | 17 + .../v7/toggle/label-placement/angular.md | 1 + .../usage/v7/toggle/label-placement/demo.html | 1 + .../v7/toggle/label-placement/javascript.md | 1 + .../usage/v7/toggle/label-placement/react.md | 1 + static/usage/v7/toggle/label-placement/vue.md | 1 + .../version-v5/angular/performance.md | 4 + versioned_docs/version-v5/angular/testing.md | 2 +- versioned_docs/version-v5/api/input.md | 2 +- versioned_docs/version-v5/components.md | 2 +- .../what-are-progressive-web-apps.md | 4 + .../version-v5/developer-resources/books.md | 22 + .../version-v5/developer-resources/courses.md | 26 +- .../version-v5/native/wifi-wizard-2.md | 6 +- versioned_docs/version-v5/react/navigation.md | 4 + versioned_docs/version-v5/react/pwa.md | 2 +- .../react/your-first-app/2-taking-photos.md | 2 +- .../version-v5/reference/glossary.md | 4 + .../version-v5/reference/support.md | 14 +- versioned_docs/version-v5/theming/advanced.md | 2 +- .../version-v5/theming/css-shadow-parts.md | 2 +- .../version-v5/utilities/animations.md | 6 + versioned_docs/version-v5/vue/quickstart.md | 2 +- versioned_docs/version-v6/README.md | 2 +- .../version-v6/angular/performance.md | 4 + versioned_docs/version-v6/angular/slides.md | 62 +- versioned_docs/version-v6/angular/testing.md | 2 +- .../angular/your-first-app/8-distribute.md | 4 +- versioned_docs/version-v6/api/input.md | 2 +- versioned_docs/version-v6/api/select.md | 4 +- versioned_docs/version-v6/components.md | 2 +- .../what-are-progressive-web-apps.md | 4 + .../version-v6/developer-resources/books.md | 22 + .../version-v6/developer-resources/courses.md | 26 +- versioned_docs/version-v6/native-faq.md | 2 +- versioned_docs/version-v6/react/navigation.md | 4 + versioned_docs/version-v6/react/pwa.md | 2 +- versioned_docs/version-v6/react/slides.md | 62 +- .../react/your-first-app/2-taking-photos.md | 2 +- .../react/your-first-app/8-distribute.md | 6 +- .../version-v6/reference/glossary.md | 4 + .../version-v6/reference/support.md | 16 +- versioned_docs/version-v6/theming/advanced.md | 2 +- .../version-v6/utilities/animations.md | 6 + versioned_docs/version-v6/vue/overview.md | 4 + versioned_docs/version-v6/vue/quickstart.md | 2 +- versioned_docs/version-v6/vue/slides.md | 62 +- .../vue/your-first-app/8-distribute.md | 4 +- 987 files changed, 14507 insertions(+), 13704 deletions(-) create mode 100644 .github/CODEOWNERS create mode 100644 cspell-wordlist.txt create mode 100644 cspell.json create mode 100644 docs/angular/build-options.md create mode 100644 docs/layout/dynamic-font-scaling.md create mode 100644 src/components/global/BestPracticeFigure/best-practice-figure.css create mode 100644 src/components/global/BestPracticeFigure/index.tsx delete mode 100644 static/auto-generated/accordion-group/custom-props.md delete mode 100644 static/auto-generated/accordion-group/events.md delete mode 100644 static/auto-generated/accordion-group/methods.md delete mode 100644 static/auto-generated/accordion-group/parts.md delete mode 100644 static/auto-generated/accordion-group/props.md delete mode 100644 static/auto-generated/accordion-group/slots.md delete mode 100644 static/auto-generated/accordion/custom-props.md delete mode 100644 static/auto-generated/accordion/events.md delete mode 100644 static/auto-generated/accordion/methods.md delete mode 100644 static/auto-generated/accordion/parts.md delete mode 100644 static/auto-generated/accordion/props.md delete mode 100644 static/auto-generated/accordion/slots.md delete mode 100644 static/auto-generated/action-sheet/custom-props.md delete mode 100644 static/auto-generated/action-sheet/events.md delete mode 100644 static/auto-generated/action-sheet/methods.md delete mode 100644 static/auto-generated/action-sheet/parts.md delete mode 100644 static/auto-generated/action-sheet/props.md delete mode 100644 static/auto-generated/action-sheet/slots.md delete mode 100644 static/auto-generated/alert/custom-props.md delete mode 100644 static/auto-generated/alert/events.md delete mode 100644 static/auto-generated/alert/methods.md delete mode 100644 static/auto-generated/alert/parts.md delete mode 100644 static/auto-generated/alert/props.md delete mode 100644 static/auto-generated/alert/slots.md delete mode 100644 static/auto-generated/app/custom-props.md delete mode 100644 static/auto-generated/app/events.md delete mode 100644 static/auto-generated/app/methods.md delete mode 100644 static/auto-generated/app/parts.md delete mode 100644 static/auto-generated/app/props.md delete mode 100644 static/auto-generated/app/slots.md delete mode 100644 static/auto-generated/avatar/custom-props.md delete mode 100644 static/auto-generated/avatar/events.md delete mode 100644 static/auto-generated/avatar/methods.md delete mode 100644 static/auto-generated/avatar/parts.md delete mode 100644 static/auto-generated/avatar/props.md delete mode 100644 static/auto-generated/avatar/slots.md delete mode 100644 static/auto-generated/back-button/custom-props.md delete mode 100644 static/auto-generated/back-button/events.md delete mode 100644 static/auto-generated/back-button/methods.md delete mode 100644 static/auto-generated/back-button/parts.md delete mode 100644 static/auto-generated/back-button/props.md delete mode 100644 static/auto-generated/back-button/slots.md delete mode 100644 static/auto-generated/backdrop/custom-props.md delete mode 100644 static/auto-generated/backdrop/events.md delete mode 100644 static/auto-generated/backdrop/methods.md delete mode 100644 static/auto-generated/backdrop/parts.md delete mode 100644 static/auto-generated/backdrop/props.md delete mode 100644 static/auto-generated/backdrop/slots.md delete mode 100644 static/auto-generated/badge/custom-props.md delete mode 100644 static/auto-generated/badge/events.md delete mode 100644 static/auto-generated/badge/methods.md delete mode 100644 static/auto-generated/badge/parts.md delete mode 100644 static/auto-generated/badge/props.md delete mode 100644 static/auto-generated/badge/slots.md delete mode 100644 static/auto-generated/breadcrumb/custom-props.md delete mode 100644 static/auto-generated/breadcrumb/events.md delete mode 100644 static/auto-generated/breadcrumb/methods.md delete mode 100644 static/auto-generated/breadcrumb/parts.md delete mode 100644 static/auto-generated/breadcrumb/props.md delete mode 100644 static/auto-generated/breadcrumb/slots.md delete mode 100644 static/auto-generated/breadcrumbs/custom-props.md delete mode 100644 static/auto-generated/breadcrumbs/events.md delete mode 100644 static/auto-generated/breadcrumbs/methods.md delete mode 100644 static/auto-generated/breadcrumbs/parts.md delete mode 100644 static/auto-generated/breadcrumbs/props.md delete mode 100644 static/auto-generated/breadcrumbs/slots.md delete mode 100644 static/auto-generated/button/custom-props.md delete mode 100644 static/auto-generated/button/events.md delete mode 100644 static/auto-generated/button/methods.md delete mode 100644 static/auto-generated/button/parts.md delete mode 100644 static/auto-generated/button/props.md delete mode 100644 static/auto-generated/button/slots.md delete mode 100644 static/auto-generated/buttons/custom-props.md delete mode 100644 static/auto-generated/buttons/events.md delete mode 100644 static/auto-generated/buttons/methods.md delete mode 100644 static/auto-generated/buttons/parts.md delete mode 100644 static/auto-generated/buttons/props.md delete mode 100644 static/auto-generated/buttons/slots.md delete mode 100644 static/auto-generated/card-content/custom-props.md delete mode 100644 static/auto-generated/card-content/events.md delete mode 100644 static/auto-generated/card-content/methods.md delete mode 100644 static/auto-generated/card-content/parts.md delete mode 100644 static/auto-generated/card-content/props.md delete mode 100644 static/auto-generated/card-content/slots.md delete mode 100644 static/auto-generated/card-header/custom-props.md delete mode 100644 static/auto-generated/card-header/events.md delete mode 100644 static/auto-generated/card-header/methods.md delete mode 100644 static/auto-generated/card-header/parts.md delete mode 100644 static/auto-generated/card-header/props.md delete mode 100644 static/auto-generated/card-header/slots.md delete mode 100644 static/auto-generated/card-subtitle/custom-props.md delete mode 100644 static/auto-generated/card-subtitle/events.md delete mode 100644 static/auto-generated/card-subtitle/methods.md delete mode 100644 static/auto-generated/card-subtitle/parts.md delete mode 100644 static/auto-generated/card-subtitle/props.md delete mode 100644 static/auto-generated/card-subtitle/slots.md delete mode 100644 static/auto-generated/card-title/custom-props.md delete mode 100644 static/auto-generated/card-title/events.md delete mode 100644 static/auto-generated/card-title/methods.md delete mode 100644 static/auto-generated/card-title/parts.md delete mode 100644 static/auto-generated/card-title/props.md delete mode 100644 static/auto-generated/card-title/slots.md delete mode 100644 static/auto-generated/card/custom-props.md delete mode 100644 static/auto-generated/card/events.md delete mode 100644 static/auto-generated/card/methods.md delete mode 100644 static/auto-generated/card/parts.md delete mode 100644 static/auto-generated/card/props.md delete mode 100644 static/auto-generated/card/slots.md delete mode 100644 static/auto-generated/checkbox/custom-props.md delete mode 100644 static/auto-generated/checkbox/events.md delete mode 100644 static/auto-generated/checkbox/methods.md delete mode 100644 static/auto-generated/checkbox/parts.md delete mode 100644 static/auto-generated/checkbox/props.md delete mode 100644 static/auto-generated/checkbox/slots.md delete mode 100644 static/auto-generated/chip/custom-props.md delete mode 100644 static/auto-generated/chip/events.md delete mode 100644 static/auto-generated/chip/methods.md delete mode 100644 static/auto-generated/chip/parts.md delete mode 100644 static/auto-generated/chip/props.md delete mode 100644 static/auto-generated/chip/slots.md delete mode 100644 static/auto-generated/col/custom-props.md delete mode 100644 static/auto-generated/col/events.md delete mode 100644 static/auto-generated/col/methods.md delete mode 100644 static/auto-generated/col/parts.md delete mode 100644 static/auto-generated/col/props.md delete mode 100644 static/auto-generated/col/slots.md delete mode 100644 static/auto-generated/content/custom-props.md delete mode 100644 static/auto-generated/content/events.md delete mode 100644 static/auto-generated/content/methods.md delete mode 100644 static/auto-generated/content/parts.md delete mode 100644 static/auto-generated/content/props.md delete mode 100644 static/auto-generated/content/slots.md delete mode 100644 static/auto-generated/datetime-button/custom-props.md delete mode 100644 static/auto-generated/datetime-button/events.md delete mode 100644 static/auto-generated/datetime-button/methods.md delete mode 100644 static/auto-generated/datetime-button/parts.md delete mode 100644 static/auto-generated/datetime-button/props.md delete mode 100644 static/auto-generated/datetime-button/slots.md delete mode 100644 static/auto-generated/datetime/custom-props.md delete mode 100644 static/auto-generated/datetime/events.md delete mode 100644 static/auto-generated/datetime/methods.md delete mode 100644 static/auto-generated/datetime/parts.md delete mode 100644 static/auto-generated/datetime/props.md delete mode 100644 static/auto-generated/datetime/slots.md delete mode 100644 static/auto-generated/fab-button/custom-props.md delete mode 100644 static/auto-generated/fab-button/events.md delete mode 100644 static/auto-generated/fab-button/methods.md delete mode 100644 static/auto-generated/fab-button/parts.md delete mode 100644 static/auto-generated/fab-button/props.md delete mode 100644 static/auto-generated/fab-button/slots.md delete mode 100644 static/auto-generated/fab-list/custom-props.md delete mode 100644 static/auto-generated/fab-list/events.md delete mode 100644 static/auto-generated/fab-list/methods.md delete mode 100644 static/auto-generated/fab-list/parts.md delete mode 100644 static/auto-generated/fab-list/props.md delete mode 100644 static/auto-generated/fab-list/slots.md delete mode 100644 static/auto-generated/fab/custom-props.md delete mode 100644 static/auto-generated/fab/events.md delete mode 100644 static/auto-generated/fab/methods.md delete mode 100644 static/auto-generated/fab/parts.md delete mode 100644 static/auto-generated/fab/props.md delete mode 100644 static/auto-generated/fab/slots.md delete mode 100644 static/auto-generated/footer/custom-props.md delete mode 100644 static/auto-generated/footer/events.md delete mode 100644 static/auto-generated/footer/methods.md delete mode 100644 static/auto-generated/footer/parts.md delete mode 100644 static/auto-generated/footer/props.md delete mode 100644 static/auto-generated/footer/slots.md delete mode 100644 static/auto-generated/grid/custom-props.md delete mode 100644 static/auto-generated/grid/events.md delete mode 100644 static/auto-generated/grid/methods.md delete mode 100644 static/auto-generated/grid/parts.md delete mode 100644 static/auto-generated/grid/props.md delete mode 100644 static/auto-generated/grid/slots.md delete mode 100644 static/auto-generated/header/custom-props.md delete mode 100644 static/auto-generated/header/events.md delete mode 100644 static/auto-generated/header/methods.md delete mode 100644 static/auto-generated/header/parts.md delete mode 100644 static/auto-generated/header/props.md delete mode 100644 static/auto-generated/header/slots.md delete mode 100644 static/auto-generated/img/custom-props.md delete mode 100644 static/auto-generated/img/events.md delete mode 100644 static/auto-generated/img/methods.md delete mode 100644 static/auto-generated/img/parts.md delete mode 100644 static/auto-generated/img/props.md delete mode 100644 static/auto-generated/img/slots.md delete mode 100644 static/auto-generated/infinite-scroll-content/custom-props.md delete mode 100644 static/auto-generated/infinite-scroll-content/events.md delete mode 100644 static/auto-generated/infinite-scroll-content/methods.md delete mode 100644 static/auto-generated/infinite-scroll-content/parts.md delete mode 100644 static/auto-generated/infinite-scroll-content/props.md delete mode 100644 static/auto-generated/infinite-scroll-content/slots.md delete mode 100644 static/auto-generated/infinite-scroll/custom-props.md delete mode 100644 static/auto-generated/infinite-scroll/events.md delete mode 100644 static/auto-generated/infinite-scroll/methods.md delete mode 100644 static/auto-generated/infinite-scroll/parts.md delete mode 100644 static/auto-generated/infinite-scroll/props.md delete mode 100644 static/auto-generated/infinite-scroll/slots.md delete mode 100644 static/auto-generated/input/custom-props.md delete mode 100644 static/auto-generated/input/events.md delete mode 100644 static/auto-generated/input/methods.md delete mode 100644 static/auto-generated/input/parts.md delete mode 100644 static/auto-generated/input/props.md delete mode 100644 static/auto-generated/input/slots.md delete mode 100644 static/auto-generated/item-divider/custom-props.md delete mode 100644 static/auto-generated/item-divider/events.md delete mode 100644 static/auto-generated/item-divider/methods.md delete mode 100644 static/auto-generated/item-divider/parts.md delete mode 100644 static/auto-generated/item-divider/props.md delete mode 100644 static/auto-generated/item-divider/slots.md delete mode 100644 static/auto-generated/item-group/custom-props.md delete mode 100644 static/auto-generated/item-group/events.md delete mode 100644 static/auto-generated/item-group/methods.md delete mode 100644 static/auto-generated/item-group/parts.md delete mode 100644 static/auto-generated/item-group/props.md delete mode 100644 static/auto-generated/item-group/slots.md delete mode 100644 static/auto-generated/item-option/custom-props.md delete mode 100644 static/auto-generated/item-option/events.md delete mode 100644 static/auto-generated/item-option/methods.md delete mode 100644 static/auto-generated/item-option/parts.md delete mode 100644 static/auto-generated/item-option/props.md delete mode 100644 static/auto-generated/item-option/slots.md delete mode 100644 static/auto-generated/item-options/custom-props.md delete mode 100644 static/auto-generated/item-options/events.md delete mode 100644 static/auto-generated/item-options/methods.md delete mode 100644 static/auto-generated/item-options/parts.md delete mode 100644 static/auto-generated/item-options/props.md delete mode 100644 static/auto-generated/item-options/slots.md delete mode 100644 static/auto-generated/item-sliding/custom-props.md delete mode 100644 static/auto-generated/item-sliding/events.md delete mode 100644 static/auto-generated/item-sliding/methods.md delete mode 100644 static/auto-generated/item-sliding/parts.md delete mode 100644 static/auto-generated/item-sliding/props.md delete mode 100644 static/auto-generated/item-sliding/slots.md delete mode 100644 static/auto-generated/item/custom-props.md delete mode 100644 static/auto-generated/item/events.md delete mode 100644 static/auto-generated/item/methods.md delete mode 100644 static/auto-generated/item/parts.md delete mode 100644 static/auto-generated/item/props.md delete mode 100644 static/auto-generated/item/slots.md delete mode 100644 static/auto-generated/label/custom-props.md delete mode 100644 static/auto-generated/label/events.md delete mode 100644 static/auto-generated/label/methods.md delete mode 100644 static/auto-generated/label/parts.md delete mode 100644 static/auto-generated/label/props.md delete mode 100644 static/auto-generated/label/slots.md delete mode 100644 static/auto-generated/list-header/custom-props.md delete mode 100644 static/auto-generated/list-header/events.md delete mode 100644 static/auto-generated/list-header/methods.md delete mode 100644 static/auto-generated/list-header/parts.md delete mode 100644 static/auto-generated/list-header/props.md delete mode 100644 static/auto-generated/list-header/slots.md delete mode 100644 static/auto-generated/list/custom-props.md delete mode 100644 static/auto-generated/list/events.md delete mode 100644 static/auto-generated/list/methods.md delete mode 100644 static/auto-generated/list/parts.md delete mode 100644 static/auto-generated/list/props.md delete mode 100644 static/auto-generated/list/slots.md delete mode 100644 static/auto-generated/loading/custom-props.md delete mode 100644 static/auto-generated/loading/events.md delete mode 100644 static/auto-generated/loading/methods.md delete mode 100644 static/auto-generated/loading/parts.md delete mode 100644 static/auto-generated/loading/props.md delete mode 100644 static/auto-generated/loading/slots.md delete mode 100644 static/auto-generated/menu-button/custom-props.md delete mode 100644 static/auto-generated/menu-button/events.md delete mode 100644 static/auto-generated/menu-button/methods.md delete mode 100644 static/auto-generated/menu-button/parts.md delete mode 100644 static/auto-generated/menu-button/props.md delete mode 100644 static/auto-generated/menu-button/slots.md delete mode 100644 static/auto-generated/menu-toggle/custom-props.md delete mode 100644 static/auto-generated/menu-toggle/events.md delete mode 100644 static/auto-generated/menu-toggle/methods.md delete mode 100644 static/auto-generated/menu-toggle/parts.md delete mode 100644 static/auto-generated/menu-toggle/props.md delete mode 100644 static/auto-generated/menu-toggle/slots.md delete mode 100644 static/auto-generated/menu/custom-props.md delete mode 100644 static/auto-generated/menu/events.md delete mode 100644 static/auto-generated/menu/methods.md delete mode 100644 static/auto-generated/menu/parts.md delete mode 100644 static/auto-generated/menu/props.md delete mode 100644 static/auto-generated/menu/slots.md delete mode 100644 static/auto-generated/modal/custom-props.md delete mode 100644 static/auto-generated/modal/events.md delete mode 100644 static/auto-generated/modal/methods.md delete mode 100644 static/auto-generated/modal/parts.md delete mode 100644 static/auto-generated/modal/props.md delete mode 100644 static/auto-generated/modal/slots.md delete mode 100644 static/auto-generated/nav-link/custom-props.md delete mode 100644 static/auto-generated/nav-link/events.md delete mode 100644 static/auto-generated/nav-link/methods.md delete mode 100644 static/auto-generated/nav-link/parts.md delete mode 100644 static/auto-generated/nav-link/props.md delete mode 100644 static/auto-generated/nav-link/slots.md delete mode 100644 static/auto-generated/nav/custom-props.md delete mode 100644 static/auto-generated/nav/events.md delete mode 100644 static/auto-generated/nav/methods.md delete mode 100644 static/auto-generated/nav/parts.md delete mode 100644 static/auto-generated/nav/props.md delete mode 100644 static/auto-generated/nav/slots.md delete mode 100644 static/auto-generated/note/custom-props.md delete mode 100644 static/auto-generated/note/events.md delete mode 100644 static/auto-generated/note/methods.md delete mode 100644 static/auto-generated/note/parts.md delete mode 100644 static/auto-generated/note/props.md delete mode 100644 static/auto-generated/note/slots.md delete mode 100644 static/auto-generated/picker/custom-props.md delete mode 100644 static/auto-generated/picker/events.md delete mode 100644 static/auto-generated/picker/methods.md delete mode 100644 static/auto-generated/picker/parts.md delete mode 100644 static/auto-generated/picker/props.md delete mode 100644 static/auto-generated/picker/slots.md delete mode 100644 static/auto-generated/popover/custom-props.md delete mode 100644 static/auto-generated/popover/events.md delete mode 100644 static/auto-generated/popover/methods.md delete mode 100644 static/auto-generated/popover/parts.md delete mode 100644 static/auto-generated/popover/props.md delete mode 100644 static/auto-generated/popover/slots.md delete mode 100644 static/auto-generated/progress-bar/custom-props.md delete mode 100644 static/auto-generated/progress-bar/events.md delete mode 100644 static/auto-generated/progress-bar/methods.md delete mode 100644 static/auto-generated/progress-bar/parts.md delete mode 100644 static/auto-generated/progress-bar/props.md delete mode 100644 static/auto-generated/progress-bar/slots.md delete mode 100644 static/auto-generated/radio-group/custom-props.md delete mode 100644 static/auto-generated/radio-group/events.md delete mode 100644 static/auto-generated/radio-group/methods.md delete mode 100644 static/auto-generated/radio-group/parts.md delete mode 100644 static/auto-generated/radio-group/props.md delete mode 100644 static/auto-generated/radio-group/slots.md delete mode 100644 static/auto-generated/radio/custom-props.md delete mode 100644 static/auto-generated/radio/events.md delete mode 100644 static/auto-generated/radio/methods.md delete mode 100644 static/auto-generated/radio/parts.md delete mode 100644 static/auto-generated/radio/props.md delete mode 100644 static/auto-generated/radio/slots.md delete mode 100644 static/auto-generated/range/custom-props.md delete mode 100644 static/auto-generated/range/events.md delete mode 100644 static/auto-generated/range/methods.md delete mode 100644 static/auto-generated/range/parts.md delete mode 100644 static/auto-generated/range/props.md delete mode 100644 static/auto-generated/range/slots.md delete mode 100644 static/auto-generated/refresher-content/custom-props.md delete mode 100644 static/auto-generated/refresher-content/events.md delete mode 100644 static/auto-generated/refresher-content/methods.md delete mode 100644 static/auto-generated/refresher-content/parts.md delete mode 100644 static/auto-generated/refresher-content/props.md delete mode 100644 static/auto-generated/refresher-content/slots.md delete mode 100644 static/auto-generated/refresher/custom-props.md delete mode 100644 static/auto-generated/refresher/events.md delete mode 100644 static/auto-generated/refresher/methods.md delete mode 100644 static/auto-generated/refresher/parts.md delete mode 100644 static/auto-generated/refresher/props.md delete mode 100644 static/auto-generated/refresher/slots.md delete mode 100644 static/auto-generated/reorder-group/custom-props.md delete mode 100644 static/auto-generated/reorder-group/events.md delete mode 100644 static/auto-generated/reorder-group/methods.md delete mode 100644 static/auto-generated/reorder-group/parts.md delete mode 100644 static/auto-generated/reorder-group/props.md delete mode 100644 static/auto-generated/reorder-group/slots.md delete mode 100644 static/auto-generated/reorder/custom-props.md delete mode 100644 static/auto-generated/reorder/events.md delete mode 100644 static/auto-generated/reorder/methods.md delete mode 100644 static/auto-generated/reorder/parts.md delete mode 100644 static/auto-generated/reorder/props.md delete mode 100644 static/auto-generated/reorder/slots.md delete mode 100644 static/auto-generated/ripple-effect/custom-props.md delete mode 100644 static/auto-generated/ripple-effect/events.md delete mode 100644 static/auto-generated/ripple-effect/methods.md delete mode 100644 static/auto-generated/ripple-effect/parts.md delete mode 100644 static/auto-generated/ripple-effect/props.md delete mode 100644 static/auto-generated/ripple-effect/slots.md delete mode 100644 static/auto-generated/route-redirect/custom-props.md delete mode 100644 static/auto-generated/route-redirect/events.md delete mode 100644 static/auto-generated/route-redirect/methods.md delete mode 100644 static/auto-generated/route-redirect/parts.md delete mode 100644 static/auto-generated/route-redirect/props.md delete mode 100644 static/auto-generated/route-redirect/slots.md delete mode 100644 static/auto-generated/route/custom-props.md delete mode 100644 static/auto-generated/route/events.md delete mode 100644 static/auto-generated/route/methods.md delete mode 100644 static/auto-generated/route/parts.md delete mode 100644 static/auto-generated/route/props.md delete mode 100644 static/auto-generated/route/slots.md delete mode 100644 static/auto-generated/router-link/custom-props.md delete mode 100644 static/auto-generated/router-link/events.md delete mode 100644 static/auto-generated/router-link/methods.md delete mode 100644 static/auto-generated/router-link/parts.md delete mode 100644 static/auto-generated/router-link/props.md delete mode 100644 static/auto-generated/router-link/slots.md delete mode 100644 static/auto-generated/router-outlet/custom-props.md delete mode 100644 static/auto-generated/router-outlet/events.md delete mode 100644 static/auto-generated/router-outlet/methods.md delete mode 100644 static/auto-generated/router-outlet/parts.md delete mode 100644 static/auto-generated/router-outlet/props.md delete mode 100644 static/auto-generated/router-outlet/slots.md delete mode 100644 static/auto-generated/router/custom-props.md delete mode 100644 static/auto-generated/router/events.md delete mode 100644 static/auto-generated/router/methods.md delete mode 100644 static/auto-generated/router/parts.md delete mode 100644 static/auto-generated/router/props.md delete mode 100644 static/auto-generated/router/slots.md delete mode 100644 static/auto-generated/row/custom-props.md delete mode 100644 static/auto-generated/row/events.md delete mode 100644 static/auto-generated/row/methods.md delete mode 100644 static/auto-generated/row/parts.md delete mode 100644 static/auto-generated/row/props.md delete mode 100644 static/auto-generated/row/slots.md delete mode 100644 static/auto-generated/searchbar/custom-props.md delete mode 100644 static/auto-generated/searchbar/events.md delete mode 100644 static/auto-generated/searchbar/methods.md delete mode 100644 static/auto-generated/searchbar/parts.md delete mode 100644 static/auto-generated/searchbar/props.md delete mode 100644 static/auto-generated/searchbar/slots.md delete mode 100644 static/auto-generated/segment-button/custom-props.md delete mode 100644 static/auto-generated/segment-button/events.md delete mode 100644 static/auto-generated/segment-button/methods.md delete mode 100644 static/auto-generated/segment-button/parts.md delete mode 100644 static/auto-generated/segment-button/props.md delete mode 100644 static/auto-generated/segment-button/slots.md delete mode 100644 static/auto-generated/segment/custom-props.md delete mode 100644 static/auto-generated/segment/events.md delete mode 100644 static/auto-generated/segment/methods.md delete mode 100644 static/auto-generated/segment/parts.md delete mode 100644 static/auto-generated/segment/props.md delete mode 100644 static/auto-generated/segment/slots.md delete mode 100644 static/auto-generated/select-option/custom-props.md delete mode 100644 static/auto-generated/select-option/events.md delete mode 100644 static/auto-generated/select-option/methods.md delete mode 100644 static/auto-generated/select-option/parts.md delete mode 100644 static/auto-generated/select-option/props.md delete mode 100644 static/auto-generated/select-option/slots.md delete mode 100644 static/auto-generated/select/custom-props.md delete mode 100644 static/auto-generated/select/events.md delete mode 100644 static/auto-generated/select/methods.md delete mode 100644 static/auto-generated/select/parts.md delete mode 100644 static/auto-generated/select/props.md delete mode 100644 static/auto-generated/select/slots.md delete mode 100644 static/auto-generated/skeleton-text/custom-props.md delete mode 100644 static/auto-generated/skeleton-text/events.md delete mode 100644 static/auto-generated/skeleton-text/methods.md delete mode 100644 static/auto-generated/skeleton-text/parts.md delete mode 100644 static/auto-generated/skeleton-text/props.md delete mode 100644 static/auto-generated/skeleton-text/slots.md delete mode 100644 static/auto-generated/slide/custom-props.md delete mode 100644 static/auto-generated/slide/events.md delete mode 100644 static/auto-generated/slide/methods.md delete mode 100644 static/auto-generated/slide/parts.md delete mode 100644 static/auto-generated/slide/props.md delete mode 100644 static/auto-generated/slide/slots.md delete mode 100644 static/auto-generated/slides/custom-props.md delete mode 100644 static/auto-generated/slides/events.md delete mode 100644 static/auto-generated/slides/methods.md delete mode 100644 static/auto-generated/slides/parts.md delete mode 100644 static/auto-generated/slides/props.md delete mode 100644 static/auto-generated/slides/slots.md delete mode 100644 static/auto-generated/spinner/custom-props.md delete mode 100644 static/auto-generated/spinner/events.md delete mode 100644 static/auto-generated/spinner/methods.md delete mode 100644 static/auto-generated/spinner/parts.md delete mode 100644 static/auto-generated/spinner/props.md delete mode 100644 static/auto-generated/spinner/slots.md delete mode 100644 static/auto-generated/split-pane/custom-props.md delete mode 100644 static/auto-generated/split-pane/events.md delete mode 100644 static/auto-generated/split-pane/methods.md delete mode 100644 static/auto-generated/split-pane/parts.md delete mode 100644 static/auto-generated/split-pane/props.md delete mode 100644 static/auto-generated/split-pane/slots.md delete mode 100644 static/auto-generated/tab-bar/custom-props.md delete mode 100644 static/auto-generated/tab-bar/events.md delete mode 100644 static/auto-generated/tab-bar/methods.md delete mode 100644 static/auto-generated/tab-bar/parts.md delete mode 100644 static/auto-generated/tab-bar/props.md delete mode 100644 static/auto-generated/tab-bar/slots.md delete mode 100644 static/auto-generated/tab-button/custom-props.md delete mode 100644 static/auto-generated/tab-button/events.md delete mode 100644 static/auto-generated/tab-button/methods.md delete mode 100644 static/auto-generated/tab-button/parts.md delete mode 100644 static/auto-generated/tab-button/props.md delete mode 100644 static/auto-generated/tab-button/slots.md delete mode 100644 static/auto-generated/tab/custom-props.md delete mode 100644 static/auto-generated/tab/events.md delete mode 100644 static/auto-generated/tab/methods.md delete mode 100644 static/auto-generated/tab/parts.md delete mode 100644 static/auto-generated/tab/props.md delete mode 100644 static/auto-generated/tab/slots.md delete mode 100644 static/auto-generated/tabs/custom-props.md delete mode 100644 static/auto-generated/tabs/events.md delete mode 100644 static/auto-generated/tabs/methods.md delete mode 100644 static/auto-generated/tabs/parts.md delete mode 100644 static/auto-generated/tabs/props.md delete mode 100644 static/auto-generated/tabs/slots.md delete mode 100644 static/auto-generated/text/custom-props.md delete mode 100644 static/auto-generated/text/events.md delete mode 100644 static/auto-generated/text/methods.md delete mode 100644 static/auto-generated/text/parts.md delete mode 100644 static/auto-generated/text/props.md delete mode 100644 static/auto-generated/text/slots.md delete mode 100644 static/auto-generated/textarea/custom-props.md delete mode 100644 static/auto-generated/textarea/events.md delete mode 100644 static/auto-generated/textarea/methods.md delete mode 100644 static/auto-generated/textarea/parts.md delete mode 100644 static/auto-generated/textarea/props.md delete mode 100644 static/auto-generated/textarea/slots.md delete mode 100644 static/auto-generated/thumbnail/custom-props.md delete mode 100644 static/auto-generated/thumbnail/events.md delete mode 100644 static/auto-generated/thumbnail/methods.md delete mode 100644 static/auto-generated/thumbnail/parts.md delete mode 100644 static/auto-generated/thumbnail/props.md delete mode 100644 static/auto-generated/thumbnail/slots.md delete mode 100644 static/auto-generated/title/custom-props.md delete mode 100644 static/auto-generated/title/events.md delete mode 100644 static/auto-generated/title/methods.md delete mode 100644 static/auto-generated/title/parts.md delete mode 100644 static/auto-generated/title/props.md delete mode 100644 static/auto-generated/title/slots.md delete mode 100644 static/auto-generated/toast/custom-props.md delete mode 100644 static/auto-generated/toast/events.md delete mode 100644 static/auto-generated/toast/methods.md delete mode 100644 static/auto-generated/toast/parts.md delete mode 100644 static/auto-generated/toast/props.md delete mode 100644 static/auto-generated/toast/slots.md delete mode 100644 static/auto-generated/toggle/custom-props.md delete mode 100644 static/auto-generated/toggle/events.md delete mode 100644 static/auto-generated/toggle/methods.md delete mode 100644 static/auto-generated/toggle/parts.md delete mode 100644 static/auto-generated/toggle/props.md delete mode 100644 static/auto-generated/toggle/slots.md delete mode 100644 static/auto-generated/toolbar/custom-props.md delete mode 100644 static/auto-generated/toolbar/events.md delete mode 100644 static/auto-generated/toolbar/methods.md delete mode 100644 static/auto-generated/toolbar/parts.md delete mode 100644 static/auto-generated/toolbar/props.md delete mode 100644 static/auto-generated/toolbar/slots.md delete mode 100644 static/auto-generated/virtual-scroll/custom-props.md delete mode 100644 static/auto-generated/virtual-scroll/events.md delete mode 100644 static/auto-generated/virtual-scroll/methods.md delete mode 100644 static/auto-generated/virtual-scroll/parts.md delete mode 100644 static/auto-generated/virtual-scroll/props.md delete mode 100644 static/auto-generated/virtual-scroll/slots.md create mode 100644 static/img/item/actions-do-not.jpg create mode 100644 static/img/item/actions-do.jpg create mode 100644 static/img/item/controls-count-do-not.jpg create mode 100644 static/img/item/controls-count-do.jpg create mode 100644 static/img/item/controls-metadata-do-not.jpg create mode 100644 static/img/item/controls-metadata-do.jpg create mode 100644 static/img/item/controls-metadata-list-do-not.jpg create mode 100644 static/img/item/controls-metadata-list-do.jpg create mode 100644 static/img/item/long-text-do-not.jpg create mode 100644 static/img/item/long-text-do.jpg create mode 100644 static/img/item/metadata-important-caution.jpg create mode 100644 static/img/item/metadata-relevant-do-not.jpg create mode 100644 static/img/item/metadata-relevant-do.jpg create mode 100644 static/img/item/visuals-do-not.jpg create mode 100644 static/img/item/visuals-do.jpg create mode 100644 static/usage/v7/checkbox/alignment/angular.md create mode 100644 static/usage/v7/checkbox/alignment/demo.html create mode 100644 static/usage/v7/checkbox/alignment/index.md create mode 100644 static/usage/v7/checkbox/alignment/javascript.md create mode 100644 static/usage/v7/checkbox/alignment/react.md create mode 100644 static/usage/v7/checkbox/alignment/vue.md create mode 100644 static/usage/v7/content/theming/safe-area/angular/example_component_css.md create mode 100644 static/usage/v7/content/theming/safe-area/angular/example_component_html.md create mode 100644 static/usage/v7/content/theming/safe-area/angular/global_css.md create mode 100644 static/usage/v7/content/theming/safe-area/demo.html create mode 100644 static/usage/v7/content/theming/safe-area/index.md create mode 100644 static/usage/v7/content/theming/safe-area/javascript.md create mode 100644 static/usage/v7/content/theming/safe-area/react/main_css.md create mode 100644 static/usage/v7/content/theming/safe-area/react/main_tsx.md create mode 100644 static/usage/v7/content/theming/safe-area/vue.md create mode 100644 static/usage/v7/datetime/styling/calendar-days/angular/example_component_css.md create mode 100644 static/usage/v7/datetime/styling/calendar-days/angular/example_component_html.md create mode 100644 static/usage/v7/datetime/styling/calendar-days/angular/example_component_ts.md create mode 100644 static/usage/v7/datetime/styling/calendar-days/demo.html create mode 100644 static/usage/v7/datetime/styling/calendar-days/index.md create mode 100644 static/usage/v7/datetime/styling/calendar-days/javascript.md create mode 100644 static/usage/v7/datetime/styling/calendar-days/react/main_css.md create mode 100644 static/usage/v7/datetime/styling/calendar-days/react/main_tsx.md create mode 100644 static/usage/v7/datetime/styling/calendar-days/vue.md create mode 100644 static/usage/v7/datetime/styling/wheel-styling/angular/example_component_ts.md create mode 100644 static/usage/v7/fab/safe-area/angular/example_component_css.md create mode 100644 static/usage/v7/fab/safe-area/angular/example_component_html.md create mode 100644 static/usage/v7/fab/safe-area/angular/global_css.md create mode 100644 static/usage/v7/fab/safe-area/demo.html create mode 100644 static/usage/v7/fab/safe-area/index.md create mode 100644 static/usage/v7/fab/safe-area/javascript.md create mode 100644 static/usage/v7/fab/safe-area/react/main_css.md create mode 100644 static/usage/v7/fab/safe-area/react/main_tsx.md create mode 100644 static/usage/v7/fab/safe-area/vue.md create mode 100644 static/usage/v7/input/counter-alignment/angular.md create mode 100644 static/usage/v7/input/counter-alignment/demo.html create mode 100644 static/usage/v7/input/counter-alignment/index.md create mode 100644 static/usage/v7/input/counter-alignment/javascript.md create mode 100644 static/usage/v7/input/counter-alignment/react.md create mode 100644 static/usage/v7/input/counter-alignment/vue.md create mode 100644 static/usage/v7/item/content-types/actions/angular.md create mode 100644 static/usage/v7/item/content-types/actions/demo.html create mode 100644 static/usage/v7/item/content-types/actions/index.md create mode 100644 static/usage/v7/item/content-types/actions/javascript.md create mode 100644 static/usage/v7/item/content-types/actions/react.md create mode 100644 static/usage/v7/item/content-types/actions/vue.md create mode 100644 static/usage/v7/item/content-types/controls/angular.md create mode 100644 static/usage/v7/item/content-types/controls/demo.html create mode 100644 static/usage/v7/item/content-types/controls/index.md create mode 100644 static/usage/v7/item/content-types/controls/javascript.md create mode 100644 static/usage/v7/item/content-types/controls/react.md create mode 100644 static/usage/v7/item/content-types/controls/vue.md create mode 100644 static/usage/v7/item/content-types/metadata/angular/example_component_css.md create mode 100644 static/usage/v7/item/content-types/metadata/angular/example_component_html.md create mode 100644 static/usage/v7/item/content-types/metadata/demo.html create mode 100644 static/usage/v7/item/content-types/metadata/index.md create mode 100644 static/usage/v7/item/content-types/metadata/javascript.md create mode 100644 static/usage/v7/item/content-types/metadata/react/main_css.md create mode 100644 static/usage/v7/item/content-types/metadata/react/main_tsx.md create mode 100644 static/usage/v7/item/content-types/metadata/vue.md create mode 100644 static/usage/v7/item/content-types/supporting-visuals/angular.md create mode 100644 static/usage/v7/item/content-types/supporting-visuals/demo.html create mode 100644 static/usage/v7/item/content-types/supporting-visuals/index.md create mode 100644 static/usage/v7/item/content-types/supporting-visuals/javascript.md create mode 100644 static/usage/v7/item/content-types/supporting-visuals/react.md create mode 100644 static/usage/v7/item/content-types/supporting-visuals/vue.md create mode 100644 static/usage/v7/item/content-types/text/angular/example_component_css.md create mode 100644 static/usage/v7/item/content-types/text/angular/example_component_html.md create mode 100644 static/usage/v7/item/content-types/text/demo.html create mode 100644 static/usage/v7/item/content-types/text/index.md create mode 100644 static/usage/v7/item/content-types/text/javascript.md create mode 100644 static/usage/v7/item/content-types/text/react/main_css.md create mode 100644 static/usage/v7/item/content-types/text/react/main_tsx.md create mode 100644 static/usage/v7/item/content-types/text/vue.md create mode 100644 static/usage/v7/layout/dynamic-font-scaling/angular/example_component_html.md create mode 100644 static/usage/v7/layout/dynamic-font-scaling/angular/global_css.md create mode 100644 static/usage/v7/layout/dynamic-font-scaling/demo.html create mode 100644 static/usage/v7/layout/dynamic-font-scaling/index.md create mode 100644 static/usage/v7/layout/dynamic-font-scaling/javascript.md create mode 100644 static/usage/v7/layout/dynamic-font-scaling/react/main_css.md create mode 100644 static/usage/v7/layout/dynamic-font-scaling/react/main_tsx.md create mode 100644 static/usage/v7/layout/dynamic-font-scaling/vue.md create mode 100644 static/usage/v7/modal/can-dismiss/child-state/angular/app_module_ts.md create mode 100644 static/usage/v7/modal/can-dismiss/child-state/angular/child_component_html.md create mode 100644 static/usage/v7/modal/can-dismiss/child-state/angular/child_component_ts.md create mode 100644 static/usage/v7/modal/can-dismiss/child-state/angular/example_component_html.md create mode 100644 static/usage/v7/modal/can-dismiss/child-state/angular/example_component_ts.md create mode 100644 static/usage/v7/modal/can-dismiss/child-state/demo.html create mode 100644 static/usage/v7/modal/can-dismiss/child-state/index.md create mode 100644 static/usage/v7/modal/can-dismiss/child-state/react/child_tsx.md create mode 100644 static/usage/v7/modal/can-dismiss/child-state/react/main_tsx.md create mode 100644 static/usage/v7/modal/can-dismiss/child-state/vue/child_vue.md create mode 100644 static/usage/v7/modal/can-dismiss/child-state/vue/example_vue.md create mode 100644 static/usage/v7/radio/alignment/angular.md create mode 100644 static/usage/v7/radio/alignment/demo.html create mode 100644 static/usage/v7/radio/alignment/index.md create mode 100644 static/usage/v7/radio/alignment/javascript.md create mode 100644 static/usage/v7/radio/alignment/react.md create mode 100644 static/usage/v7/radio/alignment/vue.md create mode 100644 static/usage/v7/toast/position-anchor/angular.md create mode 100644 static/usage/v7/toast/position-anchor/demo.html create mode 100644 static/usage/v7/toast/position-anchor/index.md create mode 100644 static/usage/v7/toast/position-anchor/javascript.md create mode 100644 static/usage/v7/toast/position-anchor/react.md create mode 100644 static/usage/v7/toast/position-anchor/vue.md create mode 100644 static/usage/v7/toggle/alignment/angular.md create mode 100644 static/usage/v7/toggle/alignment/demo.html create mode 100644 static/usage/v7/toggle/alignment/index.md create mode 100644 static/usage/v7/toggle/alignment/javascript.md create mode 100644 static/usage/v7/toggle/alignment/react.md create mode 100644 static/usage/v7/toggle/alignment/vue.md diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 00000000000..6c70128f275 --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,20 @@ +# Lines starting with '#' are comments. +# Each line is a file pattern followed by one or more owners. + +# More details are here: https://help.github.com/articles/about-codeowners/ + +# The '*' pattern is global owners. + +# Order is important. The last matching pattern has the most precedence. +# The folders are ordered as follows: + +# In each subsection folders are ordered first by depth, then alphabetically. +# This should make it easy to add new rules without breaking existing ones. + +/_templates/ @mapsandapps +/docs/api/ @mapsandapps +/src/ @mapsandapps +/static/usage/ @mapsandapps + +/static/code/stackblitz/**/*/package.json @ionic-team/framework +/static/code/stackblitz/**/*/package-lock.json @ionic-team/framework diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index ced06132a9e..2903eb255f6 100644 --- a/.github/workflows/CI.yml +++ b/.github/workflows/CI.yml @@ -8,11 +8,11 @@ on: [pull_request] jobs: test: - name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }} + name: Test on ${{ matrix.os }} runs-on: ${{ matrix.os }} strategy: matrix: - node_version: [16] + node_version: [19] os: [windows-latest, macOS-latest] steps: @@ -25,9 +25,10 @@ jobs: 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: Spell Check + run: npm run spellcheck + # Lint and spell check 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/CONTRIBUTING.md b/CONTRIBUTING.md index 327ea5004e8..0931f6f983c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -4,6 +4,9 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check - [Contributing Guide](#contributing-guide) - [Development Workflow](#development-workflow) + - [Previewing Changes](#previewing-changes) + - [Linting Documentation](#linting-documentation) + - [Spell Check](#spell-check) - [Using VS Code on Windows](#using-vs-code-on-windows) - [Project Structure](#project-structure) - [Directories](#directories) @@ -12,7 +15,6 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check - [Translation](#translation) - [Reporting Issues](#reporting-issues) - [Pull Request Guidelines](#pull-request-guidelines) - - [Deploying](#deploying) - [License](#license) @@ -20,6 +22,8 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check ## Development Workflow +### Previewing Changes + In order to run the documentation locally, install the dependencies and run the development server: ```sh @@ -27,7 +31,61 @@ $ npm install --legacy-peer-deps $ npm start ``` -> **Note**: certain versions of npm (5-8) and Node.js (10-16) are required to run certain scripts. +> [!NOTE] +> Certain versions of npm (5-8) and Node.js (10-16) are required to run certain scripts. + +### Linting Documentation + +This repository uses [Prettier](https://prettier.io/), an opinionated code formatter, in order to keep consistent formatting throughout the documentation. Run the following command to automatically fix all formatting, and then push any changes: + +``` +npm run lint +``` + +### Spell Check + +This repository uses [cspell](https://cspell.org/), a spell checker for code, to automatically flag any spelling errors. Run the following command to see any spelling errors: + +``` +npm run spellcheck +``` + +> [!NOTE] +> Any spelling errors will need to be fixed manually. There are various ways to ignore words or sections that were flagged erroneously. These are listed below. + +#### Ignoring words + +**To ignore:** + +- A **specific word**, add it to the following file: `cspell-wordlist.txt` + - For example, `Ionicons` is flagged as an unknown word. Since this is the name of our software, it has been added to this file to be ignored. +- A **directory** or anything matching a **regular expression**, update the following file: `cspell.json` + - For example, we don't want to flag anything inside of code ticks (`) or code blocks (```), so there are regular expressions added to ignore anything inside of these. +- An **entire line**, add the following comment above it: + ```markdown + + ``` +- **Multiple lines**, add comments above and below the lines to be ignored: + + ```markdown + + +

Everything inside of these comments will be ignored by the spell checkr. Proofread your own words carefully.

+ + + ``` + +> [!IMPORTANT] +> You need to have line breaks between the `cspell` comments and any HTML elements, +> otherwise the build will error with `Module build failed`. + +#### Tips + +Before adding a word or section to be ignored, see if there is a way to make it pass the spell check. Technical terms that are part of an API may need to be wrapped in code formatting. For example, the word `keydown` is flagged as an unknown word by the spell checker, but this is a [Web API event](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event). We can wrap any mentions of `keydown` in two backticks (\`keydown\`) in order to avoid it being flagged by the spell checker. + +Comments disabling the next line or entire sections of documentation are useful for making the spell checker ignore people's names. + +In general, we should try to avoid ignoring words unless they are technical terms that are used throughout the documentation and wouldn't necessarily make sense formatted as code. --- @@ -87,6 +145,8 @@ We use Crowdin for our translation service. You can participate in the translati _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). ## Reporting Issues @@ -100,7 +160,8 @@ If the issue you're reporting is a bug, please be sure it is an issue with the I - OS and browser versions - If possible, a demo repo or CodePen/CodeSandbox -> **Note**: Some [reference content](#reference-content) is pulled from other Ionic repos. In that case, please submit your issue on the docs repo with a link to the repo where the content lives. +> [!NOTE] +> Some [reference content](#reference-content) is pulled from other Ionic repos. In that case, please submit your issue on the docs repo with a link to the repo where the content lives. --- @@ -110,20 +171,6 @@ When submitting pull requests, please keep the scope of your change contained to --- - - ## Deploying The Ionic documentation's `main` branch is deployed automatically and separately from the [Ionic site](https://github.com/ionic-team/ionic-site) itself. The Ionic site then uses a proxy for paths under `/docs` to request the deployed documentation. diff --git a/_templates/playground/new/angular.md.ejs.t b/_templates/playground/new/angular.md.ejs.t index ab2bc1a81d7..f44075feb06 100644 --- a/_templates/playground/new/angular.md.ejs.t +++ b/_templates/playground/new/angular.md.ejs.t @@ -1,7 +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'}` %>" +to: "<%= `static/usage/v${version}/${name}/${path}/${(css || angular_ts) ? 'angular/example_component_html.md' : 'angular.md'}` %>" --- ```html -<<%= name %>>> +<<%= component %>>> ``` diff --git a/_templates/playground/new/angular_example_component_css.md.ejs.t b/_templates/playground/new/angular_example_component_css.md.ejs.t index 233d88bd9d0..e6aab594e42 100644 --- a/_templates/playground/new/angular_example_component_css.md.ejs.t +++ b/_templates/playground/new/angular_example_component_css.md.ejs.t @@ -1,9 +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 %>" +to: "<%= css ? `static/usage/v${version}/${name}/${path}/angular/example_component_css.md` : null %>" --- ```css -<%= name %> { +<%= component %> { /* 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 index e6132304d6f..fb07f495acb 100644 --- a/_templates/playground/new/angular_example_component_ts.md.ejs.t +++ b/_templates/playground/new/angular_example_component_ts.md.ejs.t @@ -1,6 +1,6 @@ --- # 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 %>" +to: "<%= angular_ts ? `static/usage/v${version}/${name}/${path}/angular/example_component_ts.md` : null %>" --- ```ts import { Component } from '@angular/core'; diff --git a/_templates/playground/new/demo.html.ejs.t b/_templates/playground/new/demo.html.ejs.t index b8ea2dff630..27bf47e1760 100644 --- a/_templates/playground/new/demo.html.ejs.t +++ b/_templates/playground/new/demo.html.ejs.t @@ -1,20 +1,20 @@ --- -arbitrary: <% nameWithoutIon = name.replace('ion-', ''); numberOfAncestors = (path.match(/\//g) || []).length; directoryChanges = '../'.repeat(numberOfAncestors) %> -to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>" +arbitrary: <% numberOfAncestors = (path.match(/\//g) || []).length; directoryChanges = '../'.repeat(numberOfAncestors) %> +to: "<%= `static/usage/v${version}/${name}/${path}/demo.html` %>" --- - <%= h.changeCase.titleCase(nameWithoutIon) %> + <%= h.changeCase.titleCase(name) %> <% if (css){ %> <% } %> @@ -24,7 +24,7 @@ to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/demo.html` %>"
- <<%= name %>>> + <<%= component %>>>
diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js index 91d3acf0134..869c85506dc 100644 --- a/_templates/playground/new/index.js +++ b/_templates/playground/new/index.js @@ -5,60 +5,83 @@ const changeCase = require('change-case'); // 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-'"; + return inquirer + .prompt([ + { + type: 'toggle', + name: 'is_component', + message: 'Is this playground for a component?', + initial: true, }, - }, - { - 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', - }, - ]; + ]) + .then((answers) => { + return inquirer + .prompt([ + // ask a different question for components vs. other playgrounds + answers.is_component + ? { + type: 'input', + name: 'component', + 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: 'name', + message: 'Which guide section is this playground for?', + initial: 'animations', + validate(value) { + return value.match(/^[a-z/-]+$/) ? true : 'Section must be kebab-case'; + }, + }, + { + 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?', + }, + { + type: 'toggle', + name: 'angular_ts', + message: 'Generate an Angular TypeScript file?', + }, + ]) + .then((answers) => { + answers.name = answers.name || answers.component.replace('ion-', ''); + + // if the playground is not for a component, + // include an ion-card in the playground + answers.component = answers.component || 'ion-card'; - 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` - ); + const playgroundName = changeCase.pascal(answers.path.split('/').pop()); + console.log( + `\nTo use this playground in a docs markdown file, include\nthe following:\n\n## ${playgroundName}\n\nimport ${playgroundName} from '@site/static/usage/v7/${answers.name}/${answers.path}/index.md';\n\n<${playgroundName} />\n` + ); - return answers; - }); + return answers; + }); + }); }, }; diff --git a/_templates/playground/new/index.md.ejs.t b/_templates/playground/new/index.md.ejs.t index fe9b7483a31..5c7bbf08e81 100644 --- a/_templates/playground/new/index.md.ejs.t +++ b/_templates/playground/new/index.md.ejs.t @@ -1,6 +1,5 @@ --- -arbitrary: <% nameWithoutIon = name.replace('ion-', '') %> -to: "<%= `static/usage/v${version}/${nameWithoutIon}/${path}/index.md` %>" +to: "<%= `static/usage/v${version}/${name}/${path}/index.md` %>" --- import Playground from '@site/src/components/global/Playground'; @@ -56,5 +55,5 @@ import angular_example_component_css from './angular/example_component_css.md'; angular, <% } -%> }} - src="usage/v<%= version %>/<%= nameWithoutIon %>/<%= path %>/demo.html" + src="usage/v<%= version %>/<%= name %>/<%= path %>/demo.html" /> diff --git a/_templates/playground/new/javascript.md.ejs.t b/_templates/playground/new/javascript.md.ejs.t index 067c56a59c5..1aa3e7f1f2e 100644 --- a/_templates/playground/new/javascript.md.ejs.t +++ b/_templates/playground/new/javascript.md.ejs.t @@ -1,12 +1,12 @@ --- -to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/javascript.md` %>" +to: "<%= `static/usage/v${version}/${name}/${path}/javascript.md` %>" --- ```html -<<%= name %>>> +<<%= component %>>> <% if (css){ -%> diff --git a/_templates/playground/new/react.md.ejs.t b/_templates/playground/new/react.md.ejs.t index b446e39db5a..8a84f90e57f 100644 --- a/_templates/playground/new/react.md.ejs.t +++ b/_templates/playground/new/react.md.ejs.t @@ -1,17 +1,17 @@ --- -arbitrary: <% pascalName = h.changeCase.pascal(name) %> +arbitrary: <% pascalComponent = h.changeCase.pascal(component) %> # 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'}` %>" +to: "<%= `static/usage/v${version}/${name}/${path}/${css ? 'react/main_tsx.md' : 'react.md'}` %>" --- ```tsx import React from 'react'; -import { <%= pascalName %> } from '@ionic/react';<% if (css){ %> +import { <%= pascalComponent %> } from '@ionic/react';<% if (css){ %> import './main.css';<% } %> function Example() { return ( - <<%= pascalName %>>> + <<%= pascalComponent %>>> ); } 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 index 595e6eaef12..1abbc16100c 100644 --- a/_templates/playground/new/react_main_css.md.ejs.t +++ b/_templates/playground/new/react_main_css.md.ejs.t @@ -1,9 +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 %>" +to: "<%= css ? `static/usage/v${version}/${name}/${path}/react/main_css.md` : null %>" --- ```css -<%= name %> { +<%= component %> { /* styles go here */ } ``` diff --git a/_templates/playground/new/vue.md.ejs.t b/_templates/playground/new/vue.md.ejs.t index b1bf2cd21eb..a22edd2b2b4 100644 --- a/_templates/playground/new/vue.md.ejs.t +++ b/_templates/playground/new/vue.md.ejs.t @@ -1,26 +1,26 @@ --- -arbitrary: <% pascalName = h.changeCase.pascal(name) %> -to: "<%= `static/usage/v${version}/${name.replace('ion-', '')}/${path}/vue.md` %>" +arbitrary: <% pascalComponent = h.changeCase.pascal(component) %> +to: "<%= `static/usage/v${version}/${name}/${path}/vue.md` %>" --- ```html <% if (css){ -%> diff --git a/cspell-wordlist.txt b/cspell-wordlist.txt new file mode 100644 index 00000000000..13ab88a5d60 --- /dev/null +++ b/cspell-wordlist.txt @@ -0,0 +1,84 @@ +Appflow +Codepen +Firestore +Genymotion +Hygen +Ionicon +Ionicons +Logcat +Maskito +Pluralsight +Swiper +Udemy +Vetur +Wistia + +actionsheet +fabs +datetime +datetimes +datetimepicker +infinitescroll +searchbar +searchbars +sidemenu +textarea +textareas + +appstore +authed +autogrow +automations +autoplay +Callout +comparewith +composables +engageable +flexbox +frontmatter +fullscreen +geolocation +interactives +isopen +jank +janky +jarsigner +jsdelivr +keyframes +keytool +lifecycles +localstorage +mobileweb +phablet +playstore +preconfigured +preflighted +proxying +quickstart +retargeted +runtimes +scroller +subcomponent +subcomponents +swipeable +templating +transpiling +treeshaking +triaging +typeahead +unminified +unsanitized +viewports +webapps +webviews +xlarge +xsmall + +allowtransparency +mozallowfullscreen +msallowfullscreen +oallowfullscreen +webkitallowfullscreen + +ionicframework +browserslistrc diff --git a/cspell.json b/cspell.json new file mode 100644 index 00000000000..972166aa24f --- /dev/null +++ b/cspell.json @@ -0,0 +1,27 @@ +{ + "dictionaries": ["custom-words"], + "dictionaryDefinitions": [ + { + "name": "custom-words", + "path": "./cspell-wordlist.txt", + "addWords": true + } + ], + "ignoreRegExpList": [ + "/(```+)[\\s\\S]+?\\1/g", + "`([^`]*)`", + "/:[a-zA-Z0-9-_\\+]+:/g" + ], + "ignorePaths": [ + "docs/cli", + "docs/native", + "versioned_docs/**/api", + "versioned_docs/**/cli", + "versioned_docs/**/native", + "node_modules", + "src/translate" + ], + "flagWords": [ + "hte" + ] +} diff --git a/docs/README.md b/docs/README.md index 2da29748116..12005305278 100644 --- a/docs/README.md +++ b/docs/README.md @@ -4,7 +4,7 @@ The `/docs` folder houses all markdown files. The page structure loosely maps to ## Versioning -This folder can also contain components, assets, and whatever else is meant to be versioned when the docusaurus versioning script is run. For example, if there is a page component that is only relevant to the `layout` section in the current version of Ionic, it could be added to a `_components/` folder in `docs/layout/`. When the versioning script is run, the component will be copied to `versioned_docs/verion-{X}/layout/_components/` and there will now be a separate component in `docs/layout/_components/` that can be deleted or updated to the latest version. The same concept applies to images and other files. +This folder can also contain components, assets, and whatever else is meant to be versioned when the docusaurus versioning script is run. For example, if there is a page component that is only relevant to the `layout` section in the current version of Ionic, it could be added to a `_components/` folder in `docs/layout/`. When the versioning script is run, the component will be copied to `versioned_docs/version-{X}/layout/_components/` and there will now be a separate component in `docs/layout/_components/` that can be deleted or updated to the latest version. The same concept applies to images and other files. If components are meant to be shared across versions, they can be put in `src/components/`. If images and other served files are meant to be shared across versions they can be put in `static/`. diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md new file mode 100644 index 00000000000..46c85e0d08f --- /dev/null +++ b/docs/angular/build-options.md @@ -0,0 +1,578 @@ +# Build Options + +Developers have two options for using Ionic components: Standalone or Modules. This guide covers both options as well as the benefits and downsides of each approach. + +While the Standalone approach is newer and makes use of more modern Angular APIs, the Modules approach will continue to be supported in Ionic. Most of the Angular examples on this documentation website use the Modules approach. + +## Standalone + +:::info +Ionic UI components as Angular standalone components is supported starting in Ionic v7.5. +::: + +### Overview + +Developers can use Ionic components as standalone components to take advantage of treeshaking and newer Angular features. This option involves importing specific Ionic components in the Angular components you want to use them in. Developers can use Ionic standalone components even if their Angular application is NgModule-based. + +See the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for instructions on how to update your Ionic app to make use of Ionic standalone components. + +**Benefits** + +1. Enables treeshaking so the final build output only includes the code necessary to run your app which reduces overall build size. +2. Avoids the use of NgModules to streamline the development experience and make your code easier to understand. +3. Allows developers to also use newer Angular features such as [ESBuild](https://angular.io/guide/esbuild). + +**Drawbacks** + +1. Ionic components need to be imported into every Angular component they are used in which can be time consuming to set up. + +### Usage with Standalone-based Applications + +:::caution +All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking. +::: + +**Bootstrapping and Configuration** + +Ionic Angular needs to be configured when the Angular application calls `bootstrapApplication` using the `provideIonicAngular` function. Developers can pass any [IonicConfig](../developing/config#ionicconfig) values as an object in this function. Note that `provideIonicAngular` needs to be called even if no custom config is passed. + +```typescript title="main.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +bootstrapApplication(AppComponent, { + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + provideIonicAngular({ mode: 'ios' }), + provideRouter(routes), + ], +}); +``` + +**Components** + +In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { IonButton, IonContent } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], + standalone: true, + imports: [IonButton, IonContent], +}) +export class HomePage { + constructor() {} +} +``` + +**Icons** + +The icon SVG data needs to be defined in the Angular component so it can be loaded correctly. Developers can use the `addIcons` function from `ionicons` to map the SVG data to a string name. Developers can then reference the icon by its string name using the `name` property on `IonIcon`. + +We recommend calling `addIcons` in the Angular component `constructor` so the data is only added if the Angular component is being used. + +For developers using Ionicons 7.2 or newer, passing only the SVG data will cause the string name to be automatically generated. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { IonIcon } from '@ionic/angular/standalone'; +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], + standalone: true, + imports: [IonIcon], +}) +export class HomePage { + constructor() { + /** + * On Ionicons 7.2+ this icon + * gets mapped to a "logo-ionic" key. + * Alternatively, developers can do: + * addIcons({ 'logo-ionic': logoIonic }); + */ + addIcons({ logoIonic }); + } +} +``` + +**Routing** + +Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (``) elements should import `IonRouterLinkWithHref` instead. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], + standalone: true, + imports: [ + IonButton, + RouterLink, // required to get base routerLink behavior for @angular/router + IonRouterLink, // use IonRouterLinkWithHref if you are using an element instead + ], +}) +export class HomePage {} +``` + +```html title="home.page.html" +Go to Foo Page +``` + +### Usage with NgModule-based Applications + +:::caution +All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking. +::: + +**Bootstrapping and Configuration** + +Ionic Angular needs to be configured in the `providers` array of `app.module.ts` using the `provideIonicAngular` function. Developers can pass any [IonicConfig](../developing/config#ionicconfig) values as an object in this function. Note that `provideIonicAngular` needs to be called even if no custom config is passed. + +```typescript title="app.module.ts" +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouteReuseStrategy } from '@angular/router'; + +import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone'; + +import { AppComponent } from './app.component'; +import { AppRoutingModule } from './app-routing.module'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, AppRoutingModule], + providers: [provideIonicAngular(), { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +**Components** + +In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` array in the Angular component's NgModule for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array. + +```typescript title="home.module.ts" +import { NgModule } from '@angular/core'; +import { IonButton, IonContent } from '@ionic/angular/standalone'; +import { HomePage } from './home.page'; + +import { HomePageRoutingModule } from './home-routing.module'; + +@NgModule({ + imports: [IonButton, IonContent, HomePageRoutingModule], + declarations: [HomePage], +}) +export class HomePageModule {} +``` + +**Icons** + +The icon SVG data needs to be defined in the Angular component so it can be loaded correctly. Developers can use the `addIcons` function from `ionicons` to map the SVG data to a string name. Developers can then reference the icon by its string name using the `name` property on `IonIcon`. The `IonIcon` component should be added in `app.module.ts` just like the other Ionic components. + +We recommend calling `addIcons` in the Angular component `constructor` so the data is only added if the Angular component is being used. + +For developers using Ionicons 7.2 or newer, passing only the SVG data will cause the string name to be automatically generated. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], +}) +export class HomePage { + constructor() { + /** + * On Ionicons 7.2+ this icon + * gets mapped to a "logo-ionic" key. + * Alternatively, developers can do: + * addIcons({ 'logo-ionic': logoIonic }); + */ + addIcons({ logoIonic }); + } +} +``` + +**Routing** + +Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (``) elements should import `IonRouterLinkWithHref` instead. + +```typescript title="home.module.ts" +import { NgModule } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; +import { HomePage } from './home.page'; + +import { HomePageRoutingModule } from './home-routing.module'; + +@NgModule({ + imports: [ + IonButton, + RouterLink, // required to get base routerLink behavior for @angular/router + IonRouterLink, // use IonRouterLinkWithHref if you are using an element instead + HomePageRoutingModule, + ], + declarations: [HomePage], +}) +export class HomePageModule {} +``` + +```html title="home.page.html" +Go to Foo Page +``` + +## Modules + +### Overview + +Developers can also use the Modules approach by importing `IonicModule` and calling `IonicModule.forRoot()` in the `imports` array in `app.module.ts`. This registers a version of Ionic where Ionic components will be lazily loaded at runtime. + +**Benefits** + +1. Since components are lazily loaded as needed, developers do not need to spend time manually importing and registering each Ionic component. + +**Drawbacks** + +1. Lazily loading Ionic components means that the compiler does not know which components are needed at build time. This means your final application bundle may be much larger than it needs to be. +2. Developers are unable to use newer Angular features such as [ESBuild](https://angular.io/guide/esbuild). + +### Usage + +In the example below, we are using `IonicModule` to create a lazily loaded version of Ionic. We can then reference any Ionic component without needing to explicitly import it. + +```typescript +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, IonicModule.forRoot()], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +## Migrating from Modules to Standalone + +The Standalone option is newer than the Modules option, so developers may wish to switch during the development of their application. This guide details the steps needed to migrate. + +Migrating to Ionic standalone components must be done all at the same time and cannot be done gradually. The Modules and Standalone approaches use two different build systems of Ionic that cannot be used at the same time. + +### Standalone-based Applications + +Follow these steps if your Angular application is already using the standalone architecture, and you want to use Ionic UI components as standalone components too. + +1. Run `npm install @ionic/angular@latest` to ensure you are running the latest version of Ionic. Ionic UI Standalone Components is supported in Ionic v7.5 or newer. + +2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components. + +3. Remove the `IonicModule` call in `main.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function. + +```diff title="main.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +- import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; ++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +bootstrapApplication(AppComponent, { + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + /** + * The custom config serves as an example + * of how to pass a config to provideIonicAngular. + * You do not need to set "mode: 'ios'" to + * use Ionic standalone components. + */ +- importProvidersFrom(IonicModule.forRoot({ mode: 'ios' })), ++ provideIonicAngular({ mode: 'ios' }), + provideRouter(routes), + ], +}); +``` + +4. Remove any references to `IonicModule` found elsewhere in your application. + +5. Update any existing imports from `@ionic/angular` to import from `@ionic/angular/standalone` instead. + +```diff +- import { Platform } from '@ionic/angular'; ++ import { Platform } from '@ionic/angular/standalone'; +``` + +6. Add imports for each Ionic component in the Angular component where they are used. Be sure to pass the imports to the `imports` array on your Angular component. + +```diff title="app.component.ts" +import { Component } from '@angular/core'; ++ import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], + standalone: true, ++ imports: [IonApp, IonRouterOutlet], +}) +export class AppComponent { + constructor() {} +} +``` + +7. If you are using Ionicons, define the icon SVG data used in each Angular component using `addIcons`. This allows you to continue referencing icons by string name in your component template. Note that you will need to do this for any additional icons added. + +```diff title="test.component.ts" +import { Component } from '@angular/core'; ++ import { IonIcon } from '@ionic/angular/standalone'; ++ import { addIcons } from 'ionicons'; ++ import { alarm, logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], + standalone: true, ++ imports: [IonIcon], +}) +export class TestComponent { + constructor() { ++ addIcons({ alarm, logoIonic }); + } +} +``` + +8. Remove the following code from your `angular.json` file if present. Note that it may appear multiple times. + +```diff title="angular.json" +- { +- "glob": "**/*.svg", +- "input": "node_modules/ionicons/dist/ionicons/svg", +- "output": "./svg" +- } +``` + +9. If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to import the `IonRouterLink` directive for Ionic components or `IonRouterLinkWithHref` directive for `` elements. + +```diff title="test.component.ts" +import { Component } from '@angular/core'; +- import { IonButton } from '@ionic/angular/standalone'; ++ import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], + standalone: true, + imports: [ + IonButton, ++ IonRouterLink + ], +}) +export class TestComponent {} +``` + +### NgModule-based Applications + +Follow these steps if your Angular application is still using the NgModule architecture, but you want to adopt Ionic UI components as standalone components now. + +1. Run `npm install @ionic/angular@latest` to ensure you are running the latest version of Ionic. Ionic UI Standalone Components is supported in Ionic v7.5 or newer. + +2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components. + +3. Remove the `IonicModule` call in `app.module.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function. + +```diff title="app.module.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +- import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; ++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +@NgModule({ + declarations: [AppComponent], +- imports: [BrowserModule, IonicModule.forRoot({ mode: 'ios' }), AppRoutingModule], ++ imports: [BrowserModule, AppRoutingModule], + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + /** + * The custom config serves as an example + * of how to pass a config to provideIonicAngular. + * You do not need to set "mode: 'ios'" to + * use Ionic standalone components. + */ ++ provideIonicAngular({ mode: 'ios' }), + ], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +4. Remove any references to `IonicModule` found elsewhere in your application. + +5. Update any existing imports from `@ionic/angular` to import from `@ionic/angular/standalone` instead. + +```diff +- import { Platform } from '@ionic/angular'; ++ import { Platform } from '@ionic/angular/standalone'; +``` + +6. Add imports for each Ionic component in the NgModule for the Angular component where they are used. Be sure to pass the components to the `imports` array on the module. + +```diff title="app.module.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +- import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; ++ import { provideIonicAngular, IonicRouteStrategy, IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; +import { environment } from './environments/environment'; + +if (environment.production) { + enableProdMode(); +} + +@NgModule({ + declarations: [AppComponent], +- imports: [BrowserModule, AppRoutingModule], ++ imports: [BrowserModule, AppRoutingModule, IonApp, IonRouterOutlet], + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + provideIonicAngular({ mode: 'ios' }) + ], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +For example, all modules that are using Ionic components need to have the Ionic components imported in their component module. + +```diff title="home.module.ts" +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { HomePage } from './home.page'; + +import { HomePageRoutingModule } from './home-routing.module'; + ++ import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + HomePageRoutingModule, ++ IonContent, ++ IonHeader, ++ IonTitle, ++ IonToolbar + ], + declarations: [HomePage] +}) +export class HomePageModule {} +``` + +7. If you are using Ionicons, define the icon SVG data used in each Angular component using `addIcons`. This allows you to continue referencing icons by string name in your component template. Note that you will need to do this for any additional icons added. The `IonIcon` component should still be provided in the NgModule. + +```diff title="test.component.ts" +import { Component } from '@angular/core'; ++ import { addIcons } from 'ionicons'; ++ import { alarm, logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], +}) +export class TestComponent { + constructor() { ++ addIcons({ alarm, logoIonic }); + } +} +``` + +```diff title="test.module.ts" +import { NgModule } from '@angular/core'; +import { TestComponent } from './test.component'; ++ import { IonIcon } from '@ionic/angular/standalone'; + +@NgModule({ + imports: [ ++ IonIcon, + ], + declarations: [TestComponent] +}) +export class TestComponentModule {} +``` + +8. Remove the following code from your `angular.json` file if present. Note that it may appear multiple times. + +```diff title="angular.json" +- { +- "glob": "**/*.svg", +- "input": "node_modules/ionicons/dist/ionicons/svg", +- "output": "./svg" +- } +``` + +9. If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to import the `IonRouterLink` directive for Ionic components or `IonRouterLinkWithHref` directive for `` elements. + +```diff title="test.module.ts" +import { NgModule } from '@angular/core'; +import { TestComponent } from './test.component'; +- import { IonButton } from '@ionic/angular/standalone'; ++ import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; + +@NgModule({ + imports: [ + IonButton, ++ IonRouterLink, + ], + declarations: [TestComponent] +}) +``` diff --git a/docs/angular/overview.md b/docs/angular/overview.md index 60d2910bfec..5d29843b7e6 100644 --- a/docs/angular/overview.md +++ b/docs/angular/overview.md @@ -39,4 +39,8 @@ Ionic4 以降では、アプリケーション構築とルーティングのた

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

+ +

Learn about using Modules or Standalone Components in Ionic.

+ + diff --git a/docs/angular/performance.md b/docs/angular/performance.md index cf441e2adfc..d2c78341765 100644 --- a/docs/angular/performance.md +++ b/docs/angular/performance.md @@ -56,6 +56,8 @@ For more information on how Angular manages change propagation with `ngFor` see ## From the Community + + [High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony [High Performance List Filtering in Ionic](https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/) - Josh Morony @@ -64,6 +66,8 @@ For more information on how Angular manages change propagation with `ngFor` see [Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony + + :::note Do you have a guide you'd like to share? Click the _Edit this page_ button below. ::: diff --git a/docs/angular/platform.md b/docs/angular/platform.md index 686a0c6fb20..5cb3546fc72 100644 --- a/docs/angular/platform.md +++ b/docs/angular/platform.md @@ -2,6 +2,9 @@ title: Platform --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + Platform | Ionic Platform to Customize Apps to Fit Any Device + + ```tsx import { Platform } from '@ionic/angular'; @@ -25,6 +38,23 @@ export class MyPage { } ``` + + + +```tsx +import { Platform } from '@ionic/angular/standalone'; + +@Component({...}) +export class MyPage { + constructor(public platform: Platform) { + + } +} +``` + + + + ## Methods ### `is` diff --git a/docs/angular/slides.md b/docs/angular/slides.md index c5eefbec3be..4ceb1d3f6df 100644 --- a/docs/angular/slides.md +++ b/docs/angular/slides.md @@ -2,6 +2,9 @@ title: Migrating from ion-slides to Swiper.js --- +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + Set Up Swiper.js for Angular Slides [Example] | Ionic + ```typescript // home.page.ts @@ -152,6 +165,25 @@ export class HomePage { } ``` + + + +```typescript +// home.page.ts + +import { IonicSlides } from '@ionic/angular/standalone'; + +@Component({ + ... +}) +export class HomePage { + swiperModules = [IonicSlides]; +} +``` + + + + ```html @@ -224,24 +256,24 @@ To migrate, we would change the name of the event to `slidechange`: Below is a full list of event name changes when going from `ion-slides` to Swiper Angular: -| ion-slides Event | Swiper Event | -| ----------------------- | -------------------------- | -| ionSlideWillChange | slidechangetransitionstart | -| ionSlideDidChange | slidechangetransitionend | -| ionSlideDoubleTap | doubletap | -| ionSlideDrag | slidermove | -| ionSlideNextStart | slidenexttransitionstart | -| ionSlideNextEnd | slidenexttransitionend | -| ionSlidePrevStart | slideprevtransitionstart | -| ionSlidePrevEnd | slideprevtransitionend | -| ionSlideReachStart | reachbeginning | -| ionSlideReachEnd | reachend | -| ionSlideTap | tap | -| ionSlideTouchStart | touchstart | -| ionSlideTouchEnd | touchend | -| ionSlideTransitionStart | transitionstart | -| ionSlideTransitionEnd | transitionend | -| ionSlidesDidLoad | init | +| ion-slides Event | Swiper Event | +| ------------------------- | ---------------------------- | +| `ionSlideWillChange` | `slidechangetransitionstart` | +| `ionSlideDidChange` | `slidechangetransitionend` | +| `ionSlideDoubleTap` | `doubletap` | +| `ionSlideDrag` | `slidermove` | +| `ionSlideNextStart` | `slidenexttransitionstart` | +| `ionSlideNextEnd` | `slidenexttransitionend` | +| `ionSlidePrevStart` | `slideprevtransitionstart` | +| `ionSlidePrevEnd` | `slideprevtransitionend` | +| `ionSlideReachStart` | `reachbeginning` | +| `ionSlideReachEnd` | `reachend` | +| `ionSlideTap` | `tap` | +| `ionSlideTouchStart` | `touchstart` | +| `ionSlideTouchEnd` | `touchend` | +| `ionSlideTransitionStart` | `transitionstart` | +| `ionSlideTransitionEnd` | `transitionend` | +| `ionSlidesDidLoad` | `init` | :::note All events available in Swiper Element can be found at https://swiperjs.com/swiper-api#events. @@ -281,19 +313,19 @@ export class SlidesExample { Below is a full list of method changes when going from `ion-slides` to Swiper Element: -| ion-slides Method | Notes | -| ------------------ | ------------------------------------------------------------------------------------ | -| getActiveIndex() | Use the `activeIndex` property instead. | -| getPreviousIndex() | Use the `previousIndex` property instead. | -| getSwiper() | Get a reference to the Swiper instance using the `swiper` prop. See example above. | -| isBeginning() | Use the `isBeginning` property instead. | -| isEnd() | Use the `isEnd` property instead. | -| length() | Use the `slides` property instead. (i.e swiper.slides.length) | -| lockSwipeToNext() | Use the `allowSlidesNext` property instead. | -| lockSwipeToPrev() | Use the `allowSlidePrev` property instead. | -| lockSwipes() | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. | -| startAutoplay() | Use the `autoplay` property instead. | -| stopAutoplay() | Use the `autoplay` property instead. | +| ion-slides Method | Notes | +| -------------------- | ------------------------------------------------------------------------------------ | +| `getActiveIndex()` | Use the `activeIndex` property instead. | +| `getPreviousIndex()` | Use the `previousIndex` property instead. | +| `getSwiper()` | Get a reference to the Swiper instance using the `swiper` prop. See example above. | +| `isBeginning()` | Use the `isBeginning` property instead. | +| `isEnd()` | Use the `isEnd` property instead. | +| `length()` | Use the `slides` property instead. (i.e swiper.slides.length) | +| `lockSwipeToNext()` | Use the `allowSlidesNext` property instead. | +| `lockSwipeToPrev()` | Use the `allowSlidePrev` property instead. | +| `lockSwipes()` | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. | +| `startAutoplay()` | Use the `autoplay` property instead. | +| `stopAutoplay()` | Use the `autoplay` property instead. | :::note All methods and properties available on the Swiper instance can be found at https://swiperjs.com/swiper-api#methods-and-properties. diff --git a/docs/angular/your-first-app/8-distribute.md b/docs/angular/your-first-app/8-distribute.md index 44b3781b476..545e57c1945 100644 --- a/docs/angular/your-first-app/8-distribute.md +++ b/docs/angular/your-first-app/8-distribute.md @@ -18,7 +18,7 @@ For more on connecting your code repository to Appflow, checkout the [Connect yo The Appflow SDK (also known as Ionic Deploy plugin) will allow you to take advantage of arguably two of the best Appflow features: deploying live updates to your app and bypassing the app stores. Ionic Appflow's Live Update feature is shipped with Appflow SDK and features the capabilities of detecting and syncing the updates for your app that you have pushed to your identified channels within the dashboard. -To get the Appflow SDK plugin added to your project, you can follow the install instructions within the Appflow Dashboard by clicking on "Install Instructions" inside of the `Deploy > Destinations` section. Alternatively, you can install the plugin manually by excuting the following command in your app's root directory: +To get the Appflow SDK plugin added to your project, you can follow the install instructions within the Appflow Dashboard by clicking on "Install Instructions" inside of the `Deploy > Destinations` section. Alternatively, you can install the plugin manually by executing the following command in your app's root directory: ```shell ionic deploy add \ @@ -75,7 +75,7 @@ For more information, visit the [Create an Automation](https://ionic.io/docs/app ## Create an Environment -[Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) can be futher customized via [Environments](https://ionic.io/docs/appflow/automation/environments). This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the [Automation](https://ionic.io/docs/appflow/automation/intro) feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever. +[Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) can be further customized via [Environments](https://ionic.io/docs/appflow/automation/environments). This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the [Automation](https://ionic.io/docs/appflow/automation/intro) feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever. Creating an Environment is available for those on our [Basic plans](https://ionic.io/pricing) and above. More information on this can be found in the [Create an Environment](https://ionic.io/docs/appflow/quickstart/environment) section within the Appflow docs. diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md index f0ce55ff644..91651affb23 100644 --- a/docs/api/checkbox.md +++ b/docs/api/checkbox.md @@ -29,15 +29,27 @@ import Basic from '@site/static/usage/v7/checkbox/basic/index.md'; ## Label Placement -開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。 +開発者は `labelPlacement` プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。このプロパティはフレックスボックスの `flex-direction` プロパティを反映しています。 import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md'; +## Alignment + +Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property. + +:::note +Stacked checkboxes can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally. +::: + +import Alignment from '@site/static/usage/v7/checkbox/alignment/index.md'; + + + ## Justification -開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。 +開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの `justify-content` プロパティを反映しています。 import Justify from '@site/static/usage/v7/checkbox/justify/index.md'; diff --git a/docs/api/content.md b/docs/api/content.md index 16ee4f360a0..a437a90020f 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -95,6 +95,29 @@ import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index +### Safe Area Padding + +The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables). + +The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable. + +```css +ion-content::part(scroll) { + padding-top: var(--ion-safe-area-top, 0); +} +``` + +Another common use case is to apply padding to the left side of the content to account for the notch when the device is in landscape mode and the notch is on the left side. This can be done by setting the `padding-left` property to the value of the `--ion-safe-area-left` variable. + +```css +ion-content::part(scroll) { + padding-left: var(--ion-safe-area-left, 0); +} +``` + +import SafeArea from '@site/static/usage/v7/content/theming/safe-area/index.md'; + + ## Interfaces diff --git a/docs/api/datetime.md b/docs/api/datetime.md index 674c48ff229..d71d9fc0f78 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -37,6 +37,7 @@ import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlighted import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md'; import GlobalTheming from '@site/static/usage/v7/datetime/styling/global-theming/index.md'; +import CalendarDaysStyling from '@site/static/usage/v7/datetime/styling/calendar-days/index.md'; import WheelStyling from '@site/static/usage/v7/datetime/styling/wheel-styling/index.md'; @@ -61,7 +62,7 @@ Datetimeはカレンダーとタイムホイールのインターフェイスを Ionic Frameworkのdatetimeは、開発者が一般的な落とし穴を回避できるように設計されており、 開発者は簡単にdatetime値を操作し、ユーザーにシンプルなdatetimeピッカーを提供し、素晴らしいユーザーエクスペリエンスを提供することができます。 -### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ +### ISO 8601 Datetime Format: `YYYY-MM-DDTHH:mmZ` Ionic Frameworkでは、[ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を値として使用します。 この値は、JavaScriptの `Date` オブジェクトを使用するのではなく、単純に文字列として使用されます。 @@ -70,15 +71,15 @@ JSONオブジェクトやデータベース内でのシリアライズやパー 以下は、 `ion-datetime` で使用できる ISO 8601 フォーマットの例です: -| Description | Format | Datetime Value Example | -| -------------------- | ---------------------- | ---------------------------- | -| Year | YYYY | 1994 | -| Year and Month | YYYY-MM | 1994-12 | -| Complete Date | YYYY-MM-DD | 1994-12-15 | -| Date and Time | YYYY-MM-DDTHH:mm | 1994-12-15T13:47 | -| UTC Timezone | YYYY-MM-DDTHH:mm:ssZ | 1994-12-15T13:47:20Z | -| Timezone Offset | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20+05:00 | -| Hour and Minute | HH:mm | 13:47 | +| Description | Format | Datetime Value Example | +| -------------------- | ------------------------ | ------------------------------ | +| Year | `YYYY` | `1994` | +| Year and Month | `YYYY-MM` | `1994-12` | +| Complete Date | `YYYY-MM-DD` | `1994-12-15` | +| Date and Time | `YYYY-MM-DDTHH:mm` | `1994-12-15T13:47` | +| UTC Timezone | `YYYY-MM-DDTHH:mm:ssZ` | `1994-12-15T13:47:20Z` | +| Timezone Offset | `YYYY-MM-DDTHH:mm:ssTZD` | `1994-12-15T13:47:20+05:00` | +| Hour and Minute | `HH:mm` | `13:47` | 年号は常に4桁、ミリ秒は（加算される場合は）常に3桁、その他は常に2桁であることに注意してください。 ミリ秒は3桁、その他は2桁である。 @@ -98,13 +99,17 @@ JSONオブジェクトやデータベース内でのシリアライズやパー モーダルやポップオーバーなどのオーバーレイで日付時刻を表示する必要がある場合は、 [ion-datetime-button](./datetime-button) を使用することをお勧めします。スペースに制約がある場合は、 `ion-datetime-button` を使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付と時刻のピッカーがオーバーレイで表示されます。 +## 非同期に値を設定する + +すでにdatetimeが作成された後にプログラムで`value`が更新されると、datetimeは自動的に新しい日付にジャンプします。しかし、ユーザーがdatetimeを操作しているときに、この方法で`value`を更新することは避けることをお勧めします。例えば、datetimeの`value`が非同期処理で読み込まれる場合、値の更新が終わるまでCSSでdatetimeを非表示にすることをお勧めします。 + ## 日付コンテナ ### 日付の最小値と最大値 日付の最小値と最大値をカスタマイズするには、 `min` と `max` コンポーネントプロパティを使用します。上の表にあるのと同じ IS0 8601 フォーマットに従って、各コンポーネントはユーザーが選択できる日付を制限することができます。 -次の例では、日付の選択を 2022 年 3 月から 2022 年 5 月のみに制限しています。 +以下の例では、日付の選択を2022年3月から2022年5月のみに制限しています。 @@ -118,8 +123,8 @@ JSONオブジェクトやデータベース内でのシリアライズやパー ### 高度な日付制限 -`isDateEnabled` プロパティを使用すると、開発者は ISO 8601 日付文字列を使用して、特定の日、日付の範囲、週末、または任意のカスタムルールを無効にするように `ion-datetime` をカスタマイズすることができます。 -`isDateEnabled` プロパティは、日付が有効かどうかを示す boolean 値を返す関数を受け付けます。この関数は、レンダリングされた各日付、前月、今月、来月に対して呼び出されます。カスタムの実装では、ジャンキングを避けるために、パフォーマンスを最適化する必要があります。 +`isDateEnabled` プロパティを使用すると、開発者は `ion-datetime` をカスタマイズして、ISO 8601 の日付文字列を使用して、特定の日、日付の範囲、週末、または任意のカスタムルールを無効にすることができる。 +isDateEnabled` プロパティは、日付が有効かどうかを示すブール値を返す関数を受け付ける。この関数は、レンダリングされた各日付、前月、当月、翌月に対して呼び出されます。カスタムの実装では、ジャンクを避けるためにパフォーマンスを最適化する必要があります。 次の例では、週末の日付をすべて無効にする方法を示しています。より高度な日付操作を行うには、 `date-fns` のような日付ユーティリティを使用することをお勧めします。 @@ -291,7 +296,7 @@ This property is only supported when using `presentation="date"` and `preferWhee `highlightedDates`プロパティを使用すると、開発者は特定の日付をカスタムテキストや背景色でスタイル設定することができます。このプロパティは、日付とその色の配列として定義するか、ISO 文字列を受け取って使用する色を返すコールバックとして定義することができます。 -色を指定する場合は、有効な CSS カラーフォーマットを使用できます。これには、16進コード、rgba、[color variables](../theming/colors) などが含まれます。 +色を指定する場合は、有効な CSS カラーフォーマットを使用できます。これには、16進コード、`rgba` 、[color variables](../theming/colors) などが含まれます。 一貫したユーザーエクスペリエンスを維持するため、選択された日付のスタイルは常にカスタムハイライトよりも優先されます。 @@ -321,6 +326,16 @@ Ionicの強力なテーマシステムを使用すると、特定のテーマに +### Calendar Days + +The calendar days in a grid-style `ion-datetime` can be styled using CSS shadow parts. + +:::note +The example below selects the day 2 days ago, unless that day is in the previous month, then it selects a day 2 days in the future. This is done for demo purposes in order to show how to apply custom styling to all days, the current day, and the selected day. +::: + + + ### Wheel Pickers `ion-datetime`で使用するホイールは、シャドウパーツとCSS変数を組み合わせてスタイルを設定することができます。これは、ホイールスタイルのdatetimeのカラムにも、グリッドスタイルのdatetimeの月/年のピッカーにも適用されます。 @@ -363,7 +378,7 @@ import { format, parseISO } from 'date-fns'; /** * This is provided in the event * payload from the `ionChange` event. - * + * * The value is an ISO-8601 date string. */ const dateFromIonDatetime = '2021-06-04T14:23:00-04:00'; diff --git a/docs/api/fab.md b/docs/api/fab.md index 53f788c8cf9..50543da1726 100644 --- a/docs/api/fab.md +++ b/docs/api/fab.md @@ -41,6 +41,32 @@ import Positioning from '@site/static/usage/v7/fab/positioning/index.md'; +### セーフエリア + +`ion-header`コンポーネントや`ion-footer`コンポーネントがない場合、fabはデバイスのノッチやステータスバー、その他のデバイスUIで覆われている可能性があります。このような場合、上下の [safe area](/docs/theming/advanced#safe-area-padding) は考慮されません。これは [`--ion-safe-area-(dir)`変数](/docs/theming/advanced#application-variables) を使って調整することができます。 + +`vertical`を`"top"`に設定したfabを `ion-header` なしで使用する場合は、上マージンを設定する必要があります： + +```css +ion-fab { + margin-top: var(--ion-safe-area-top, 0)； +} +``` + +また、`ion-footer`なしで`vertical`を`"bottom"`に設定したfabを使用する場合は、下マージンを設定する必要があります： + +```css +ion-fab { + margin-bottom: var(--ion-safe-area-bottom, 0)； +} +``` + +`ion-header` (`vertical` が `"top"` に設定されたファブの場合) または `ion-footer` (`vertical` が `"bottom"` に設定されたファブの場合) がある場合、ファブはヘッダまたはフッタからの相対位置に配置されるため、CSS の調整は必要ありません。 + +import SafeArea from '@site/static/usage/v7/fab/safe-area/index.md'; + + + ## ボタンサイズ メインファブボタンの `size` プロパティを `"small"` に設定すると、ミニサイズで描画されます。なお、このプロパティは内側のファブボタンで使用した場合は効果がありません。 @@ -68,7 +94,6 @@ import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-pr import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/index.md'; - ## アクセシビリティ diff --git a/docs/api/input.md b/docs/api/input.md index 7ac18ebfea2..ed661b127c3 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -30,7 +30,7 @@ import Basic from '@site/static/usage/v7/input/basic/index.md'; ## Types -input コンポーネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタイプの入力のみを対象としています。また、keyup、keydown、keypressなどの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの `type` は `"text"` です。 +input コンポーネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタイプの入力のみを対象としています。また、`keyup`、`keydown`、`keypress`などの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの `type` は `"text"` です。 import Types from '@site/static/usage/v7/input/types/index.md'; @@ -85,6 +85,8 @@ Material Design では、Inputに塗りつぶしのスタイルが用意され `fill` スタイルはInputコンテナを視覚的に定義するため、`fill` を使用するInputは `ion-item` で使用すべきではありません。 +Filled inputs can be used on iOS by setting Input's `mode` to `md`. + import Fill from '@site/static/usage/v7/input/fill/index.md'; @@ -104,10 +106,18 @@ import HelperError from '@site/static/usage/v7/input/helper-error/index.md'; Input Counterは、Inputの下に表示されるテキストで、入力可能な文字数のうち、何文字が入力されたかをユーザーに通知するものです。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。 +The `counter` and `counterFormatter` properties on `ion-item` were [deprecated in Ionic 7](/docs/api/input#using-the-modern-syntax) and should be used directly on `ion-input` instead. + import Counter from '@site/static/usage/v7/input/counter/index.md'; +Inputs with a counter add a border between the input and the counter, therefore they should not be placed inside of an `ion-item` which adds an additional border under the item. The `ion-padding-start` class can be added to align the counter inputs with inputs inside of items. + +import CounterAlignment from '@site/static/usage/v7/input/counter-alignment/index.md'; + + + ## Filtering User Input 開発者は `ionInput` イベントを使用して、キー入力などのユーザー入力に応答して入力値を更新することができます。これは、無効な文字や不要な文字をフィルタリングするのに便利です。 diff --git a/docs/api/item.md b/docs/api/item.md index 4310fb7eb4f..9c32284bc4a 100644 --- a/docs/api/item.md +++ b/docs/api/item.md @@ -8,6 +8,9 @@ import Parts from '@ionic-internal/component-api/v7/item/parts.md'; import CustomProps from '@ionic-internal/component-api/v7/item/custom-props.md'; import Slots from '@ionic-internal/component-api/v7/item/slots.md'; +import useBaseUrl from '@docusaurus/useBaseUrl'; +import BestPracticeFigure from '@components/global/BestPracticeFigure'; + ion-item: Input, Edit, or Delete iOS and Android Item Elements @@ -17,7 +20,8 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -アイテムは、テキスト、アイコン、アバター、画像、Input、その他のネイティブまたはカスタム要素を含むことができる要素です。一般的には、他のアイテムと一緒に[list](./list)に配置されます。アイテムは、スワイプ、削除、並び替え、編集などが可能です。 +アイテムは、テキスト、アイコン、アバター、画像、Input、その他のネイティブまたはカスタム要素を含むことができる要素です。アイテムは他のアイテムと一緒に[リスト](./list)の行としてのみ使用してください。アイテムはスワイプ、削除、並び替え、編集などができます。 + ## 基本的な使い方 @@ -28,6 +32,135 @@ import Basic from '@site/static/usage/v7/item/basic/index.md'; +## コンテンツの種類 + +リスト内のアイテムは様々な形をとりますが、一般的にビジュアル、テキスト、メタデータ、アクション、コントロールの5つの異なるコンテンツタイプをサポートします。しかし、これらのコンテンツタイプをすべて同時に使うべきではありません。以下のガイドでは、異なるコンテンツタイプと、アプリケーションでの適切な利用方法を示します。 + +### 補助ビジュアル + +補助ビジュアル 補助ビジュアルはアイテムの装飾アイコンやその他の飾りです。サポーティングビジュアルの一般的な例は、[アバター](./avatar)、 [アイコン](./icon)、[サムネイル](./thumbnail)です。このコンテンツはアイテムの意図を理解するために必要ではないので、通常`aria-hidden="true"`を使ってスクリーンリーダーから隠されます。 + +アイコン・ボタンのように、アイテムとのインタラクションにビジュアルが必要な場合、そのビジュアルはサポート・ビジュアルではなく、 [アクション](#actions) となります。 + +} + doNotImage={A list with several items. Each item has an icon and visible text describing the item. Some icons are rendered at the start of the line, and some icons are rendered at the end of the line} +/> + +下の例では、ビジュアルをサポートする2つのリストを作成しています。最初のリストはアイコンを使い、2番目のリストはアバターを使います。ビジュアルは装飾的なものなので、すべて `aria-hidden="true"` を指定しています。さらに、これらは `start` スロットで一貫して表示されます。 + +import SupportingVisuals from '@site/static/usage/v7/item/content-types/supporting-visuals/index.md'; + + + +### テキスト + +テキスト・コンテンツ・タイプには、フォーム制御ラベルやその他の可視テキストが含まれます。このテキストは項目の意図を示す役割を果たします。テキストは短く、要点をまとめるようにしてください。 + +If you find that you need a few more sentences to clarify the item's purpose, consider moving the additional sentences to a Note at the bottom of the list. Adding the item to its own list makes it clear which item the text is associated with.} + doText="Move long text outside of the list" + doNotText="Don't try to fit long text in an item" + doImage={A list with an item that contains a checked checkbox indicating the user wants to receive emails. Text describing how often the user will receive emails as well as how to unsubscribe from emails is placed underneath the list.} + doNotImage={A list with an item that contains a checked checkbox indicating the user wants to receive emails. Text describing how often the user will receive emails as well as how to unsubscribe from emails is placed as a single paragraph inline with the checkbox, making the text hard to read and increasing the height of the item.} +/> + +下の例では、さまざまなタイプのテキストでリストを作成しています。"First Name"と "Last Name "のラベルは、テキスト入力に何を入力すべきかを示しています。 + +トグルの "Allow Notifications"ラベルの下には、ユーザーが通知を無効にできることを示すテキストが追加されています。このテキストは短いので、アイテムの内側に配置されています。 + +そのリストの下には、 [Note](./note) の下に長いテキストを含むtextareaを含む別のリストがあります。textareaは、長いテキストが他のフィールドではなく、textareaに関連付けられていることを明らかにするために、それ自身のリストに配置されました。 + +import Text from '@site/static/usage/v7/item/content-types/text/index.md'; + + + +### メタデータ + +メタデータは、ステータステキストやカウントのようなアイテムの追加コンテキストを提供します。Badge](./badge)や[Note](./note)のようなコンポーネントは、メタデータを表示する素晴らしい方法です。 + +} + doNotImage={A list that contains several items, each representing a different to-do list. Two counts are placed at the end of each item: One count that states the total number of tasks, and another count that states the total number of tasks that are due today.} +/> + +} + cautionImage={A list that contains several items, each representing a different to-do list. A count of how many tasks in each to-do list is placed at the end of each item. However, the count is highlighted in blue which draws the user's attention away from the name of the to-do list.} +/> + +以下の例では、異なる種類のメタデータを持つ2つのリストを作成している。最初のリストは[Note](./note)を使って、それぞれのToDoリストにいくつのタスクがあるかを表示している。 + +つ目のリストは、iOSのメールアプリを真似て受信トレイを表示しています。このリストでは、"開始"スロットに "未読メッセージ"インジケータ、"終了"スロットにタイムスタンプとカスタム詳細アイコンを含むカスタムメタデータを使用しています。"未読メッセージ"インジケータは、未読メッセージにユーザーの注意を引くために青くハイライトされ、タイムスタンプはより控えめです。 + +import Metadata from '@site/static/usage/v7/item/content-types/metadata/index.md'; + + + +### アクション + +アクションは、アクティブにすると何かをするインタラクティブな要素です。アイテムは1行に複数のアクションを表示することができます。しかし、開発者は、各アクションのタップターゲットが十分に大きいことを確認する必要があります。 + +開発者は、入れ子になったインタラクティブ機能を作成することは避けるべきです。例えば、 `button` プロパティが `true` に設定されている場合、開発者はアイテムのメインコンテンツ内にボタンを追加することを避けるべきです。 + +Actions can be added by using the Item Sliding component. Actions can also be placed directly inside of the Item without the use of Item Sliding, but this should be limited to no more than 2 actions.} + doText={<>Use an Item Sliding to reveal multiple actions by swiping on the Item.} + doNotText="Don't put more than 2 actions within an Item." + doImage={A list that contains several items, each representing a contact. Each item has text that states the contact's name as well as several actions including pinning the contact, sharing the contact, and deleting the contact. These actions are revealed by swiping on the item.} + doNotImage={A list that contains several items, each representing a contact. Each item has text that states the contact's name as well as several actions including pinning the contact, sharing the contact, and deleting the contact. The actions are placed directly on the item. Since there are so many actions, some of the text is cut off.} +/> + +下の例では、連絡先のリストを作成しています。各項目は、その項目の完全な連絡先ページに移動するためのスタブボタンです。各項目には、ユーザーが項目をスワイプすることで表示できる追加アクションがあります。 + +import Actions from '@site/static/usage/v7/item/content-types/actions/index.md'; + + + +### コントロール + +コントロールは、チェックボックス、入力、ラジオなどのフォームコンポーネントです。リスト内の各項目は、画面スペースの制約上、最大でも2つのコントロールを持つ必要があります。 + +Metadata such as helper text or character counts should not be used on form controls in list views. If such metadata is needed, the form control should be placed outside of a list. Filled Inputs are a great way of visually defining the input container outside of a list.} + doText="Place inputs with metadata outside of the list." + doNotText="Don't put metadata for inputs in the list." + doImage={There is an email input and a password input. Both have helper text associated with them. Since both are placed outside of a list it is clear which input each helper text is associated with.} + doNotImage={There is a list containing an email input and a password input. Both have helper texts associated with them. However, the divider between each item and between the helper text makes it hard to tell which input each helper text is associated with.} +/> + +Alternatively, the metadata can be placed in a Note at the bottom of the list.} + doText="Place metadata for inputs at the end of a list." + doNotText="Don't put metadata for inputs in the list." + doImage={There are two lists of inputs. The first list contains a password input. Below that list contains text that says 'Password must be at least 16 characters'. The second list contains an email input. This second list is separated so the password length requirement text is clearly associated with the password input above.} + doNotImage={There is one list of inputs. One of the inputs is a password input with text below the input that says 'Password must be at least 16 characters'. However, this text is placed directly above another input, so it's not immediately clear which input the text is associated with.} +/> + +Items should typically have no more than two controls. If you need more controls, consider adding the additional controls in a Modal that is accessible from the item.} + doText="Move additional controls to a submenu accessible from the item." + doNotText="Don't use more than two controls within an item." + doImage={There is one list of inputs. One of the inputs is a password input with text below the input that says 'Password must be at least 16 characters'. However, this text is placed directly above another input, so it's not immediately clear which input the text is associated with.} + doNotImage={There are two lists of inputs. The first list contains a password input. Below that list contains text that says 'Password must be at least 16 characters'. The second list contains an email input. This second list is separated so the password length requirement text is clearly associated with the password input above.} +/> + +以下の例では、ToDoタスクのリストを作成しています。それぞれの項目にはチェックボックスと入力があります。チェックボックスはユーザーがタスクを完了としてマークできるようにし、入力はユーザーがタスクの名前を変更できるようにします。 + +import Controls from '@site/static/usage/v7/item/content-types/controls/index.md'; + + + + ## クリック可能なItems `href` か `button` プロパティが設定されている場合、itemは "clickable（クリック可能）" と見なされます。clickableなitemsには、インタラクティブに操作できることを示す視覚的な違いがいくつかあります。たとえば、clickableなitemは、`md` modeではrippleエフェクトを持ち、`ios` modeではハイライト表示され、`ios` modeでの [detail arrow](/#detail-arrows) が表示されます。 @@ -69,16 +202,6 @@ import Lines from '@site/static/usage/v7/item/lines/index.md'; - -## Media Items - -[Avatars](./avatar) and [Thumbnails](./thumbnail) can be slotted inside of an item. This is useful when making lists of images and text. - -import Media from '@site/static/usage/v7/item/media/index.md'; - - - - ## Buttons in Items Buttonsは、アイテムの外側にあるときよりも、アイテムの内側にあるときの方が小さくスタイルされます。ボタンのサイズをアイテムの外側のボタンと同じにするには、`size`属性に`"default"`を設定します。 @@ -87,14 +210,6 @@ import Buttons from '@site/static/usage/v7/item/buttons/index.md'; - -## Icons in Items - -import Icons from '@site/static/usage/v7/item/icons/index.md'; - - - - ## Item Inputs import Inputs from '@site/static/usage/v7/item/inputs/index.md'; @@ -121,17 +236,14 @@ import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md +## ガイドライン -### Inputハイライト - -input を含むアイテムは、フォーカスされたとき、有効なとき、無効なときに、Inputの下のボーダーを異なる色でハイライトします。デフォルトでは、`md`アイテムは高さが `2px` に設定されたハイライトを持ち、`ios`はハイライトを持ちません（技術的に高さは `0` に設定されています）。高さは `--highlight-height` CSS プロパティを使って変更することができます。ハイライトをオフにするには、この変数を `0` に設定します。 - -ハイライトの色はアイテムの状態に応じて変化しますが、デフォルトではすべての状態でIonicカラーが使用されます。フォーカスされている場合、Inputのハイライトは `primary` カラーを使用します。Inputが有効な場合は `success` カラーが使用され、無効なInputは `danger` カラーが使用されます。これは提供されているCSSプロパティを使ってカスタマイズすることができます。 - -import InputHighlight from '@site/static/usage/v7/item/theming/input-highlight/index.md'; - - +以下のガイドラインは、リスト項目を理解しやすく、使いやすくするのに役立ちます。 +1. アイテムは [Lists](./list) の中だけで使用してください。 +2. リスト内のアイテムは、一貫したフォーマットで表示されるべきです。例えば、アイテムに装飾的なアイコンを表示する場合、アイコンはアイテム間で同じように配置されるべきです。 +3. アイテムは決して[入れ子になったインタラクティヴ](https://dequeuniversity.com/rules/axe/4.4/nested-interactive)をレンダリングすべきではありません。入れ子になったインタラクティブ要素が使用されている場合、スクリーンリーダーは正しいインタラクティブ要素を選択することができません。例えば、`button="true"`を持つ`ion-item`の中にボタンを置くことは避けてください。 +4. コンテントタイプ](#content-types)を正しく使用してください。Itemコンポーネントは、[List](./list)内の行として設計されており、汎用コンテナとして使用すべきではありません。 ## プロパティ diff --git a/docs/api/label.md b/docs/api/label.md index ace0774f3e5..c031dfe567a 100644 --- a/docs/api/label.md +++ b/docs/api/label.md @@ -17,8 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Labelは `ion-item`、`ion-input`、`ion-toggle` 等と共に使用できるラッパー(wrapper)要素です。item内のlabelの位置はinline、fixed、stacked、またはfloatingにすることができます。 +Labelは、主に[Item](./item.md)コンポーネントにテキストコンテンツを追加するために使用される要素です。Labelは、[Input](./input.md)や[Radio](./radio.md)のようなフォーム制御コンポーネントの内部で、可視ラベルを指定する場合にも使用できますが、必須ではありません。 +The position of the label inside of an item can be inline, fixed, stacked, or floating. ## 基本的な使い方 @@ -32,13 +33,7 @@ import Item from '@site/static/usage/v7/label/item/index.md'; -## Input Labels - -import Input from '@site/static/usage/v7/label/input/index.md'; - - - -## テーマ +## Theming ### Colors diff --git a/docs/api/menu.md b/docs/api/menu.md index 90988b203f1..4abd4c1a067 100644 --- a/docs/api/menu.md +++ b/docs/api/menu.md @@ -60,7 +60,7 @@ import Sides from '@site/static/usage/v7/menu/sides/index.md'; ## 複数メニュー -同じサイドに複数のメニューが存在する場合、開きたいメニューを開く前にそのメニューを有効にする必要があります。これは `MenuController` の `enable` メソッドを呼び出すことで行うことができます。次に、メニューの `menuId` または `side` に基づいて `open` を呼び出すことができます。 +同じサイドに複数のメニューが存在する場合、サイドではなくIDで参照する必要があります。そうしないと、間違ったメニューがアクティブになる可能性がある。 import Multiple from '@site/static/usage/v7/menu/multiple/index.md'; diff --git a/docs/api/modal.md b/docs/api/modal.md index 948cba6e9d1..c1feffe3490 100644 --- a/docs/api/modal.md +++ b/docs/api/modal.md @@ -89,6 +89,18 @@ import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/ca +### 子コンポーネントでのdismiss動作の変更 + +あるシナリオでは、開発者は提示されたモーダルの状態に基づいて `canDismiss` コールバックの動作をカスタマイズする必要があるかもしれません。このカスタマイズは、たとえば、モーダル内のフォームが無効な場合にモーダルが却下されないようにしたい場合に特に便利です。 + +このカスタマイズを実現するために、子コンポーネントは、親コンポーネントと通信して `canDismiss` コールバックを管理する条件を更新するために、関数コールバック、イベントエミッション、その他のリアクティビティメカニズムなどのさまざまなテクニックを使用できます。 + +以下は、子コンポーネントが親コンポーネントとどのように通信して `canDismiss` コールバックを変更できるかを示す簡単な例です： + +import CanDismissChildStateExample from '@site/static/usage/v7/modal/can-dismiss/child-state/index.md'; + + + ## モーダルの種類 ### Card Modal diff --git a/docs/api/radio.md b/docs/api/radio.md index b8eb1b6c56c..110532eef69 100644 --- a/docs/api/radio.md +++ b/docs/api/radio.md @@ -30,21 +30,32 @@ import Basic from '@site/static/usage/v7/radio/basic/index.md'; ## Label Placement -開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。 +開発者は `labelPlacement` プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。 このプロパティはフレックスボックスの `flex-direction` プロパティを反映しています。 import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md'; +## Alignment + +Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property. + +:::note +Stacked radios can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally. +::: + +import Alignment from '@site/static/usage/v7/radio/alignment/index.md'; + + + ## Justification -開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。 +開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの `justify-content` プロパティを反映しています。 import Justify from '@site/static/usage/v7/radio/justify/index.md'; - :::note `ion-item`は、`justify`がどのように機能するかを強調するためにデモで使用されているだけです。 `justify` が正しく機能するために必須ではありません。 ::: diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md index 4d784334810..cb5c985d4f9 100644 --- a/docs/api/searchbar.md +++ b/docs/api/searchbar.md @@ -94,7 +94,7 @@ import CSSProps from '@site/static/usage/v7/searchbar/theming/css-properties/ind ### Android -デフォルトでは、Inputをタップするとキーボードが表示され、サブミットボタンに虫眼鏡のアイコンが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、アイコンが虫眼鏡からarriage returnに変更されます。 +デフォルトでは、Inputをタップするとキーボードが表示され、サブミットボタンに虫眼鏡のアイコンが表示されます。オプションで `inputmode` プロパティを `"search"` に設定すると、アイコンが虫眼鏡からcarriage returnに変更されます。 ### iOS diff --git a/docs/api/select.md b/docs/api/select.md index 8a0481b899e..256399fd455 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -18,7 +18,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Selectは、ネイティブの `