From c7ba4ca1c74417fb0ccb8f4987ab5a4f3d1c7c31 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 7 Dec 2023 09:45:34 -0500 Subject: [PATCH 001/148] chore: version the docs for ionic 8 (#3292) --- docs/api/accordion-group.md | 12 +- docs/api/accordion.md | 38 +- docs/api/action-sheet.md | 24 +- docs/api/alert.md | 26 +- docs/api/app.md | 12 +- docs/api/avatar.md | 20 +- docs/api/back-button.md | 16 +- docs/api/backdrop.md | 16 +- docs/api/badge.md | 18 +- docs/api/breadcrumb.md | 12 +- docs/api/breadcrumbs.md | 30 +- docs/api/button.md | 30 +- docs/api/buttons.md | 20 +- docs/api/card-content.md | 12 +- docs/api/card-header.md | 12 +- docs/api/card-subtitle.md | 12 +- docs/api/card-title.md | 12 +- docs/api/card.md | 24 +- docs/api/checkbox.md | 26 +- docs/api/chip.md | 20 +- docs/api/col.md | 12 +- docs/api/content.md | 32 +- docs/api/datetime-button.md | 14 +- docs/api/datetime.md | 60 +- docs/api/fab-button.md | 12 +- docs/api/fab-list.md | 12 +- docs/api/fab.md | 28 +- docs/api/footer.md | 22 +- docs/api/grid.md | 40 +- docs/api/header.md | 24 +- docs/api/icon.md | 2 +- docs/api/img.md | 14 +- docs/api/infinite-scroll-content.md | 12 +- docs/api/infinite-scroll.md | 18 +- docs/api/input.md | 42 +- docs/api/item-divider.md | 18 +- docs/api/item-group.md | 16 +- docs/api/item-option.md | 12 +- docs/api/item-options.md | 12 +- docs/api/item-sliding.md | 18 +- docs/api/item.md | 40 +- docs/api/label.md | 18 +- docs/api/list-header.md | 22 +- docs/api/list.md | 18 +- docs/api/loading.md | 20 +- docs/api/menu-button.md | 12 +- docs/api/menu-toggle.md | 12 +- docs/api/menu.md | 24 +- docs/api/modal.md | 44 +- docs/api/nav-link.md | 12 +- docs/api/nav.md | 14 +- docs/api/note.md | 20 +- docs/api/picker.md | 20 +- docs/api/popover.md | 28 +- docs/api/progress-bar.md | 26 +- docs/api/radio-group.md | 12 +- docs/api/radio.md | 30 +- docs/api/range.md | 36 +- docs/api/refresher-content.md | 12 +- docs/api/refresher.md | 22 +- docs/api/reorder-group.md | 12 +- docs/api/reorder.md | 24 +- docs/api/ripple-effect.md | 18 +- docs/api/route-redirect.md | 12 +- docs/api/route.md | 12 +- docs/api/router-link.md | 12 +- docs/api/router-outlet.md | 12 +- docs/api/router.md | 14 +- docs/api/row.md | 12 +- docs/api/searchbar.md | 28 +- docs/api/segment-button.md | 20 +- docs/api/segment.md | 22 +- docs/api/select-option.md | 12 +- docs/api/select.md | 52 +- docs/api/skeleton-text.md | 16 +- docs/api/spinner.md | 20 +- docs/api/split-pane.md | 16 +- docs/api/tab-bar.md | 12 +- docs/api/tab-button.md | 12 +- docs/api/tab.md | 12 +- docs/api/tabs.md | 14 +- docs/api/text.md | 14 +- docs/api/textarea.md | 34 +- docs/api/thumbnail.md | 18 +- docs/api/title.md | 20 +- docs/api/toast.md | 28 +- docs/api/toggle.md | 32 +- docs/api/toolbar.md | 26 +- docusaurus.config.js | 7 +- scripts/cli.js | 1 + scripts/native.js | 1 + .../accessibility/animations/angular.md | 22 + .../accessibility/animations/demo.html | 41 + .../accessibility/animations/index.md | 17 + .../accessibility/animations/javascript.md | 22 + .../accessibility/animations/react.md | 35 + .../accordion/accessibility/animations/vue.md | 37 + static/usage/v8/accordion/basic/angular.md | 22 + static/usage/v8/accordion/basic/demo.html | 41 + static/usage/v8/accordion/basic/index.md | 18 + static/usage/v8/accordion/basic/javascript.md | 22 + static/usage/v8/accordion/basic/react.md | 35 + static/usage/v8/accordion/basic/vue.md | 38 + .../angular/example_component_css.md | 24 + .../angular/example_component_html.md | 22 + .../angular/example_component_ts.md | 10 + .../advanced-expansion-styles/demo.html | 74 ++ .../advanced-expansion-styles/index.md | 35 + .../advanced-expansion-styles/javascript.md | 47 ++ .../react/main_css.md | 24 + .../react/main_tsx.md | 38 + .../advanced-expansion-styles/vue.md | 63 ++ .../customization/expansion-styles/angular.md | 22 + .../customization/expansion-styles/demo.html | 41 + .../customization/expansion-styles/index.md | 18 + .../expansion-styles/javascript.md | 22 + .../customization/expansion-styles/react.md | 35 + .../customization/expansion-styles/vue.md | 38 + .../accordion/customization/icons/angular.md | 22 + .../accordion/customization/icons/demo.html | 41 + .../v8/accordion/customization/icons/index.md | 18 + .../customization/icons/javascript.md | 22 + .../v8/accordion/customization/icons/react.md | 37 + .../v8/accordion/customization/icons/vue.md | 42 + .../theming/angular/example_component_html.md | 22 + .../theming/angular/global_css.md | 23 + .../accordion/customization/theming/demo.html | 64 ++ .../accordion/customization/theming/index.md | 33 + .../customization/theming/javascript.md | 46 ++ .../customization/theming/react/main_css.md | 23 + .../customization/theming/react/main_tsx.md | 38 + .../v8/accordion/customization/theming/vue.md | 66 ++ .../v8/accordion/disable-group/angular.md | 22 + .../v8/accordion/disable-group/demo.html | 41 + .../usage/v8/accordion/disable-group/index.md | 17 + .../v8/accordion/disable-group/javascript.md | 22 + .../usage/v8/accordion/disable-group/react.md | 35 + .../usage/v8/accordion/disable-group/vue.md | 37 + .../v8/accordion/disable/group/angular.md | 22 + .../v8/accordion/disable/group/demo.html | 41 + .../usage/v8/accordion/disable/group/index.md | 17 + .../v8/accordion/disable/group/javascript.md | 22 + .../usage/v8/accordion/disable/group/react.md | 35 + .../usage/v8/accordion/disable/group/vue.md | 37 + .../accordion/disable/individual/angular.md | 22 + .../v8/accordion/disable/individual/demo.html | 41 + .../v8/accordion/disable/individual/index.md | 18 + .../disable/individual/javascript.md | 22 + .../v8/accordion/disable/individual/react.md | 35 + .../v8/accordion/disable/individual/vue.md | 37 + .../angular/example_component_html.md | 22 + .../angular/example_component_ts.md | 20 + .../v8/accordion/listen-changes/demo.html | 57 ++ .../v8/accordion/listen-changes/index.md | 26 + .../v8/accordion/listen-changes/javascript.md | 36 + .../v8/accordion/listen-changes/react.md | 45 ++ .../usage/v8/accordion/listen-changes/vue.md | 53 ++ static/usage/v8/accordion/multiple/angular.md | 22 + static/usage/v8/accordion/multiple/demo.html | 46 ++ static/usage/v8/accordion/multiple/index.md | 18 + .../usage/v8/accordion/multiple/javascript.md | 27 + static/usage/v8/accordion/multiple/react.md | 45 ++ static/usage/v8/accordion/multiple/vue.md | 38 + .../v8/accordion/readonly/group/angular.md | 22 + .../v8/accordion/readonly/group/demo.html | 41 + .../v8/accordion/readonly/group/index.md | 18 + .../v8/accordion/readonly/group/javascript.md | 22 + .../v8/accordion/readonly/group/react.md | 35 + .../usage/v8/accordion/readonly/group/vue.md | 38 + .../accordion/readonly/individual/angular.md | 22 + .../accordion/readonly/individual/demo.html | 41 + .../v8/accordion/readonly/individual/index.md | 17 + .../readonly/individual/javascript.md | 22 + .../v8/accordion/readonly/individual/react.md | 35 + .../v8/accordion/readonly/individual/vue.md | 38 + .../toggle/angular/example_component_html.md | 24 + .../toggle/angular/example_component_ts.md | 21 + static/usage/v8/accordion/toggle/demo.html | 61 ++ static/usage/v8/accordion/toggle/index.md | 25 + .../usage/v8/accordion/toggle/javascript.md | 35 + static/usage/v8/accordion/toggle/react.md | 51 ++ static/usage/v8/accordion/toggle/vue.md | 58 ++ .../angular/example_component_html.md | 3 + .../angular/example_component_ts.md | 43 + .../v8/action-sheet/controller/demo.html | 53 ++ .../usage/v8/action-sheet/controller/index.md | 27 + .../v8/action-sheet/controller/javascript.md | 35 + .../usage/v8/action-sheet/controller/react.md | 43 + .../usage/v8/action-sheet/controller/vue.md | 46 ++ .../isOpen/angular/example_component_html.md | 9 + .../isOpen/angular/example_component_ts.md | 37 + .../v8/action-sheet/inline/isOpen/demo.html | 53 ++ .../v8/action-sheet/inline/isOpen/index.md | 27 + .../action-sheet/inline/isOpen/javascript.md | 35 + .../v8/action-sheet/inline/isOpen/react.md | 42 + .../v8/action-sheet/inline/isOpen/vue.md | 55 ++ .../trigger/angular/example_component_html.md | 4 + .../trigger/angular/example_component_ts.md | 32 + .../v8/action-sheet/inline/trigger/demo.html | 49 ++ .../v8/action-sheet/inline/trigger/index.md | 27 + .../action-sheet/inline/trigger/javascript.md | 31 + .../v8/action-sheet/inline/trigger/react.md | 39 + .../v8/action-sheet/inline/trigger/vue.md | 40 + .../angular/example_component_css.md | 9 + .../angular/example_component_html.md | 12 + .../angular/example_component_ts.md | 39 + .../role-info-on-dismiss/demo.html | 63 ++ .../role-info-on-dismiss/index.md | 36 + .../role-info-on-dismiss/javascript.md | 51 ++ .../role-info-on-dismiss/react/main_css.md | 9 + .../role-info-on-dismiss/react/main_tsx.md | 48 ++ .../action-sheet/role-info-on-dismiss/vue.md | 65 ++ .../angular/example_component_html.md | 10 + .../angular/example_component_ts.md | 35 + .../css-properties/angular/global_css.md | 12 + .../theming/css-properties/demo.html | 66 ++ .../theming/css-properties/index.md | 35 + .../theming/css-properties/javascript.md | 48 ++ .../theming/css-properties/react/main_css.md | 11 + .../theming/css-properties/react/main_tsx.md | 43 + .../theming/css-properties/vue.md | 58 ++ .../styling/angular/example_component_html.md | 10 + .../styling/angular/example_component_ts.md | 35 + .../theming/styling/angular/global_css.md | 29 + .../v8/action-sheet/theming/styling/demo.html | 83 ++ .../v8/action-sheet/theming/styling/index.md | 35 + .../theming/styling/javascript.md | 65 ++ .../theming/styling/react/main_css.md | 28 + .../theming/styling/react/main_tsx.md | 43 + .../v8/action-sheet/theming/styling/vue.md | 75 ++ .../buttons/angular/example_component_html.md | 9 + .../buttons/angular/example_component_ts.md | 30 + static/usage/v8/alert/buttons/demo.html | 48 ++ static/usage/v8/alert/buttons/index.md | 26 + static/usage/v8/alert/buttons/javascript.md | 29 + static/usage/v8/alert/buttons/react.md | 34 + static/usage/v8/alert/buttons/vue.md | 36 + .../angular/example_component_html.md | 4 + .../angular/example_component_ts.md | 20 + .../alert/customization/angular/global_css.md | 33 + static/usage/v8/alert/customization/demo.html | 72 ++ static/usage/v8/alert/customization/index.md | 34 + .../v8/alert/customization/javascript.md | 53 ++ .../v8/alert/customization/react/main_css.md | 33 + .../v8/alert/customization/react/main_tsx.md | 30 + static/usage/v8/alert/customization/vue.md | 55 ++ .../radios/angular/example_component_html.md | 9 + .../radios/angular/example_component_ts.md | 28 + static/usage/v8/alert/inputs/radios/demo.html | 46 ++ static/usage/v8/alert/inputs/radios/index.md | 25 + .../v8/alert/inputs/radios/javascript.md | 27 + static/usage/v8/alert/inputs/radios/react.md | 35 + static/usage/v8/alert/inputs/radios/vue.md | 34 + .../angular/example_component_html.md | 9 + .../angular/example_component_ts.md | 32 + .../v8/alert/inputs/text-inputs/demo.html | 50 ++ .../v8/alert/inputs/text-inputs/index.md | 25 + .../v8/alert/inputs/text-inputs/javascript.md | 31 + .../v8/alert/inputs/text-inputs/react.md | 39 + .../usage/v8/alert/inputs/text-inputs/vue.md | 38 + .../angular/example_component_html.md | 3 + .../angular/example_component_ts.md | 23 + .../v8/alert/presenting/controller/demo.html | 35 + .../v8/alert/presenting/controller/index.md | 25 + .../alert/presenting/controller/javascript.md | 16 + .../v8/alert/presenting/controller/react.md | 24 + .../v8/alert/presenting/controller/vue.md | 20 + .../isOpen/angular/example_component_html.md | 11 + .../isOpen/angular/example_component_ts.md | 16 + .../v8/alert/presenting/isOpen/demo.html | 36 + .../usage/v8/alert/presenting/isOpen/index.md | 25 + .../v8/alert/presenting/isOpen/javascript.md | 17 + .../usage/v8/alert/presenting/isOpen/react.md | 23 + .../usage/v8/alert/presenting/isOpen/vue.md | 25 + .../trigger/angular/example_component_html.md | 10 + .../trigger/angular/example_component_ts.md | 11 + .../v8/alert/presenting/trigger/demo.html | 33 + .../v8/alert/presenting/trigger/index.md | 25 + .../v8/alert/presenting/trigger/javascript.md | 14 + .../v8/alert/presenting/trigger/react.md | 20 + .../usage/v8/alert/presenting/trigger/vue.md | 18 + .../basic/angular/example_component_html.md | 9 + .../basic/angular/example_component_ts.md | 40 + static/usage/v8/animations/basic/demo.html | 59 ++ static/usage/v8/animations/basic/index.md | 25 + .../usage/v8/animations/basic/javascript.md | 18 + static/usage/v8/animations/basic/react.md | 45 ++ static/usage/v8/animations/basic/vue.md | 51 ++ .../angular/example_component_html.md | 9 + .../angular/example_component_ts.md | 52 ++ .../before-and-after-hooks/demo.html | 74 ++ .../before-and-after-hooks/index.md | 25 + .../before-and-after-hooks/javascript.md | 28 + .../before-and-after-hooks/react.md | 61 ++ .../animations/before-and-after-hooks/vue.md | 67 ++ .../chain/angular/example_component_html.md | 17 + .../chain/angular/example_component_ts.md | 73 ++ static/usage/v8/animations/chain/demo.html | 96 +++ static/usage/v8/animations/chain/index.md | 25 + .../usage/v8/animations/chain/javascript.md | 67 ++ static/usage/v8/animations/chain/react.md | 89 +++ static/usage/v8/animations/chain/vue.md | 100 +++ .../gesture/angular/example_component_css.md | 17 + .../gesture/angular/example_component_html.md | 11 + .../gesture/angular/example_component_ts.md | 82 ++ static/usage/v8/animations/gesture/demo.html | 113 +++ static/usage/v8/animations/gesture/index.md | 35 + .../usage/v8/animations/gesture/javascript.md | 98 +++ .../v8/animations/gesture/react/main_css.md | 17 + .../v8/animations/gesture/react/main_tsx.md | 92 +++ static/usage/v8/animations/gesture/vue.md | 112 +++ .../group/angular/example_component_html.md | 17 + .../group/angular/example_component_ts.md | 66 ++ static/usage/v8/animations/group/demo.html | 87 +++ static/usage/v8/animations/group/index.md | 25 + .../usage/v8/animations/group/javascript.md | 46 ++ static/usage/v8/animations/group/react.md | 75 ++ static/usage/v8/animations/group/vue.md | 83 ++ .../angular/example_component_html.md | 8 + .../keyframes/angular/example_component_ts.md | 42 + .../usage/v8/animations/keyframes/demo.html | 61 ++ static/usage/v8/animations/keyframes/index.md | 25 + .../v8/animations/keyframes/javascript.md | 20 + static/usage/v8/animations/keyframes/react.md | 47 ++ static/usage/v8/animations/keyframes/vue.md | 60 ++ .../angular/example_component_html.md | 23 + .../angular/example_component_ts.md | 52 ++ .../v8/animations/modal-override/demo.html | 78 ++ .../v8/animations/modal-override/index.md | 26 + .../animations/modal-override/javascript.md | 57 ++ .../v8/animations/modal-override/react.md | 71 ++ .../usage/v8/animations/modal-override/vue.md | 90 +++ .../angular/example_component_css.md | 16 + .../angular/example_component_html.md | 9 + .../angular/example_component_ts.md | 41 + .../v8/animations/preference-based/demo.html | 71 ++ .../v8/animations/preference-based/index.md | 35 + .../animations/preference-based/javascript.md | 35 + .../preference-based/react/main_css.md | 16 + .../preference-based/react/main_tsx.md | 47 ++ .../v8/animations/preference-based/vue.md | 68 ++ static/usage/v8/avatar/basic/angular.md | 5 + static/usage/v8/avatar/basic/demo.html | 24 + static/usage/v8/avatar/basic/index.md | 8 + static/usage/v8/avatar/basic/javascript.md | 5 + static/usage/v8/avatar/basic/react.md | 15 + static/usage/v8/avatar/basic/vue.md | 16 + static/usage/v8/avatar/chip/angular.md | 8 + static/usage/v8/avatar/chip/demo.html | 27 + static/usage/v8/avatar/chip/index.md | 8 + static/usage/v8/avatar/chip/javascript.md | 8 + static/usage/v8/avatar/chip/react.md | 17 + static/usage/v8/avatar/chip/vue.md | 19 + static/usage/v8/avatar/item/angular.md | 8 + static/usage/v8/avatar/item/demo.html | 27 + static/usage/v8/avatar/item/index.md | 8 + static/usage/v8/avatar/item/javascript.md | 8 + static/usage/v8/avatar/item/react.md | 17 + static/usage/v8/avatar/item/vue.md | 19 + .../angular/example_component_css.md | 5 + .../angular/example_component_html.md | 5 + .../avatar/theming/css-properties/demo.html | 30 + .../v8/avatar/theming/css-properties/index.md | 33 + .../theming/css-properties/javascript.md | 11 + .../theming/css-properties/react/main_css.md | 5 + .../theming/css-properties/react/main_tsx.md | 17 + .../v8/avatar/theming/css-properties/vue.md | 22 + .../basic/angular/app_module_ts.md | 20 + .../basic/angular/example_component_html.md | 3 + .../basic/angular/example_component_ts.md | 13 + .../basic/angular/page_one_component_ts.md | 26 + .../basic/angular/page_two_component_ts.md | 22 + static/usage/v8/back-button/basic/demo.html | 61 ++ static/usage/v8/back-button/basic/index.md | 50 ++ .../usage/v8/back-button/basic/javascript.md | 48 ++ .../v8/back-button/basic/react/main_tsx.md | 11 + .../back-button/basic/react/page_one_tsx.md | 27 + .../back-button/basic/react/page_two_tsx.md | 25 + .../v8/back-button/basic/vue/example_vue.md | 19 + .../v8/back-button/basic/vue/page_one_vue.md | 30 + .../v8/back-button/basic/vue/page_two_vue.md | 24 + .../custom/angular/app_module_ts.md | 20 + .../custom/angular/example_component_html.md | 3 + .../custom/angular/example_component_ts.md | 13 + .../custom/angular/page_one_component_ts.md | 26 + .../custom/angular/page_two_component_ts.md | 22 + static/usage/v8/back-button/custom/demo.html | 61 ++ static/usage/v8/back-button/custom/index.md | 50 ++ .../usage/v8/back-button/custom/javascript.md | 48 ++ .../v8/back-button/custom/react/main_tsx.md | 11 + .../back-button/custom/react/page_one_tsx.md | 27 + .../back-button/custom/react/page_two_tsx.md | 26 + .../v8/back-button/custom/vue/example_vue.md | 19 + .../v8/back-button/custom/vue/page_one_vue.md | 30 + .../v8/back-button/custom/vue/page_two_vue.md | 28 + .../basic/angular/example_component_css.md | 6 + .../basic/angular/example_component_html.md | 16 + static/usage/v8/backdrop/basic/demo.html | 38 + static/usage/v8/backdrop/basic/index.md | 33 + static/usage/v8/backdrop/basic/javascript.md | 23 + .../usage/v8/backdrop/basic/react/main_css.md | 6 + .../usage/v8/backdrop/basic/react/main_tsx.md | 37 + static/usage/v8/backdrop/basic/vue.md | 42 + .../styling/angular/example_component_css.md | 21 + .../styling/angular/example_component_html.md | 21 + static/usage/v8/backdrop/styling/demo.html | 57 ++ static/usage/v8/backdrop/styling/index.md | 33 + .../usage/v8/backdrop/styling/javascript.md | 43 + .../v8/backdrop/styling/react/main_css.md | 21 + .../v8/backdrop/styling/react/main_tsx.md | 35 + static/usage/v8/backdrop/styling/vue.md | 53 ++ static/usage/v8/badge/basic/angular.md | 12 + static/usage/v8/badge/basic/demo.html | 37 + static/usage/v8/badge/basic/index.md | 8 + static/usage/v8/badge/basic/javascript.md | 12 + static/usage/v8/badge/basic/react.md | 19 + static/usage/v8/badge/basic/vue.md | 23 + .../usage/v8/badge/theming/colors/angular.md | 28 + .../usage/v8/badge/theming/colors/demo.html | 53 ++ static/usage/v8/badge/theming/colors/index.md | 13 + .../v8/badge/theming/colors/javascript.md | 28 + static/usage/v8/badge/theming/colors/react.md | 35 + static/usage/v8/badge/theming/colors/vue.md | 39 + .../angular/example_component_css.md | 8 + .../angular/example_component_html.md | 8 + .../v8/badge/theming/css-properties/demo.html | 40 + .../v8/badge/theming/css-properties/index.md | 32 + .../theming/css-properties/javascript.md | 17 + .../theming/css-properties/react/main_css.md | 8 + .../theming/css-properties/react/main_tsx.md | 18 + .../v8/badge/theming/css-properties/vue.md | 28 + static/usage/v8/breadcrumbs/basic/angular.md | 8 + static/usage/v8/breadcrumbs/basic/demo.html | 27 + static/usage/v8/breadcrumbs/basic/index.md | 8 + .../usage/v8/breadcrumbs/basic/javascript.md | 8 + static/usage/v8/breadcrumbs/basic/react.md | 15 + static/usage/v8/breadcrumbs/basic/vue.md | 19 + .../angular/example_component_html.md | 10 + .../angular/example_component_ts.md | 15 + .../expand-on-click/demo.html | 37 + .../collapsing-items/expand-on-click/index.md | 24 + .../expand-on-click/javascript.md | 18 + .../collapsing-items/expand-on-click/react.md | 20 + .../collapsing-items/expand-on-click/vue.md | 31 + .../items-before-after/angular.md | 41 + .../items-before-after/demo.html | 66 ++ .../items-before-after/index.md | 13 + .../items-before-after/javascript.md | 41 + .../items-before-after/react.md | 50 ++ .../items-before-after/vue.md | 52 ++ .../collapsing-items/max-items/angular.md | 10 + .../collapsing-items/max-items/demo.html | 29 + .../collapsing-items/max-items/index.md | 12 + .../collapsing-items/max-items/javascript.md | 10 + .../collapsing-items/max-items/react.md | 17 + .../collapsing-items/max-items/vue.md | 21 + .../angular/example_component_html.md | 25 + .../angular/example_component_ts.md | 20 + .../popover-on-click/demo.html | 60 ++ .../popover-on-click/index.md | 25 + .../popover-on-click/javascript.md | 41 + .../popover-on-click/react.md | 41 + .../collapsing-items/popover-on-click/vue.md | 48 ++ .../icons/custom-separators/angular.md | 20 + .../icons/custom-separators/demo.html | 39 + .../icons/custom-separators/index.md | 12 + .../icons/custom-separators/javascript.md | 20 + .../icons/custom-separators/react.md | 29 + .../icons/custom-separators/vue.md | 35 + .../icons/icons-on-items/angular.md | 41 + .../icons/icons-on-items/demo.html | 66 ++ .../breadcrumbs/icons/icons-on-items/index.md | 13 + .../icons/icons-on-items/javascript.md | 41 + .../breadcrumbs/icons/icons-on-items/react.md | 52 ++ .../breadcrumbs/icons/icons-on-items/vue.md | 56 ++ .../v8/breadcrumbs/theming/colors/angular.md | 8 + .../v8/breadcrumbs/theming/colors/demo.html | 27 + .../v8/breadcrumbs/theming/colors/index.md | 12 + .../breadcrumbs/theming/colors/javascript.md | 8 + .../v8/breadcrumbs/theming/colors/react.md | 15 + .../v8/breadcrumbs/theming/colors/vue.md | 19 + .../angular/example_component_css.md | 7 + .../angular/example_component_html.md | 8 + .../theming/css-properties/demo.html | 35 + .../theming/css-properties/index.md | 31 + .../theming/css-properties/javascript.md | 16 + .../theming/css-properties/react/main_css.md | 7 + .../theming/css-properties/react/main_tsx.md | 18 + .../breadcrumbs/theming/css-properties/vue.md | 27 + static/usage/v8/button/basic/angular.md | 3 + static/usage/v8/button/basic/demo.html | 23 + static/usage/v8/button/basic/index.md | 8 + static/usage/v8/button/basic/javascript.md | 3 + static/usage/v8/button/basic/react.md | 14 + static/usage/v8/button/basic/vue.md | 15 + static/usage/v8/button/expand/angular.md | 3 + static/usage/v8/button/expand/demo.html | 30 + static/usage/v8/button/expand/index.md | 8 + static/usage/v8/button/expand/javascript.md | 3 + static/usage/v8/button/expand/react.md | 14 + static/usage/v8/button/expand/vue.md | 15 + static/usage/v8/button/fill/angular.md | 6 + static/usage/v8/button/fill/demo.html | 25 + static/usage/v8/button/fill/index.md | 8 + static/usage/v8/button/fill/javascript.md | 6 + static/usage/v8/button/fill/react.md | 16 + static/usage/v8/button/fill/vue.md | 17 + static/usage/v8/button/icons/angular.md | 15 + static/usage/v8/button/icons/demo.html | 34 + static/usage/v8/button/icons/index.md | 8 + static/usage/v8/button/icons/javascript.md | 15 + static/usage/v8/button/icons/react.md | 26 + static/usage/v8/button/icons/vue.md | 30 + static/usage/v8/button/shape/angular.md | 3 + static/usage/v8/button/shape/demo.html | 23 + static/usage/v8/button/shape/index.md | 8 + static/usage/v8/button/shape/javascript.md | 3 + static/usage/v8/button/shape/react.md | 14 + static/usage/v8/button/shape/vue.md | 15 + static/usage/v8/button/size/angular.md | 5 + static/usage/v8/button/size/demo.html | 24 + static/usage/v8/button/size/index.md | 8 + static/usage/v8/button/size/javascript.md | 5 + static/usage/v8/button/size/react.md | 15 + static/usage/v8/button/size/vue.md | 16 + .../usage/v8/button/text-wrapping/angular.md | 7 + .../usage/v8/button/text-wrapping/demo.html | 26 + static/usage/v8/button/text-wrapping/index.md | 8 + .../v8/button/text-wrapping/javascript.md | 7 + static/usage/v8/button/text-wrapping/react.md | 16 + static/usage/v8/button/text-wrapping/vue.md | 18 + .../usage/v8/button/theming/colors/angular.md | 12 + .../usage/v8/button/theming/colors/demo.html | 39 + .../usage/v8/button/theming/colors/index.md | 8 + .../v8/button/theming/colors/javascript.md | 12 + .../usage/v8/button/theming/colors/react.md | 22 + static/usage/v8/button/theming/colors/vue.md | 23 + .../angular/example_component_css.md | 22 + .../angular/example_component_html.md | 3 + .../button/theming/css-properties/demo.html | 45 ++ .../v8/button/theming/css-properties/index.md | 33 + .../theming/css-properties/javascript.md | 26 + .../theming/css-properties/react/main_css.md | 22 + .../theming/css-properties/react/main_tsx.md | 11 + .../v8/button/theming/css-properties/vue.md | 37 + static/usage/v8/buttons/basic/angular.md | 8 + static/usage/v8/buttons/basic/demo.html | 27 + static/usage/v8/buttons/basic/index.md | 8 + static/usage/v8/buttons/basic/javascript.md | 8 + static/usage/v8/buttons/basic/react.md | 16 + static/usage/v8/buttons/basic/vue.md | 19 + static/usage/v8/buttons/placement/angular.md | 21 + static/usage/v8/buttons/placement/demo.html | 47 ++ static/usage/v8/buttons/placement/index.md | 8 + .../usage/v8/buttons/placement/javascript.md | 21 + static/usage/v8/buttons/placement/react.md | 31 + static/usage/v8/buttons/placement/vue.md | 32 + static/usage/v8/buttons/types/angular.md | 74 ++ static/usage/v8/buttons/types/demo.html | 100 +++ static/usage/v8/buttons/types/index.md | 13 + static/usage/v8/buttons/types/javascript.md | 74 ++ static/usage/v8/buttons/types/react.md | 85 ++ static/usage/v8/buttons/types/vue.md | 89 +++ static/usage/v8/card/basic/angular.md | 12 + static/usage/v8/card/basic/demo.html | 38 + static/usage/v8/card/basic/index.md | 8 + static/usage/v8/card/basic/javascript.md | 12 + static/usage/v8/card/basic/react.md | 18 + static/usage/v8/card/basic/vue.md | 23 + static/usage/v8/card/buttons/angular.md | 15 + static/usage/v8/card/buttons/demo.html | 41 + static/usage/v8/card/buttons/index.md | 8 + static/usage/v8/card/buttons/javascript.md | 15 + static/usage/v8/card/buttons/react.md | 21 + static/usage/v8/card/buttons/vue.md | 26 + .../list/angular/example_component_css.md | 5 + .../list/angular/example_component_html.md | 39 + static/usage/v8/card/list/demo.html | 73 ++ static/usage/v8/card/list/index.md | 33 + static/usage/v8/card/list/javascript.md | 45 ++ static/usage/v8/card/list/react/main_css.md | 5 + static/usage/v8/card/list/react/main_tsx.md | 59 ++ static/usage/v8/card/list/vue.md | 56 ++ static/usage/v8/card/media/angular.md | 13 + static/usage/v8/card/media/demo.html | 39 + static/usage/v8/card/media/index.md | 8 + static/usage/v8/card/media/javascript.md | 13 + static/usage/v8/card/media/react.md | 19 + static/usage/v8/card/media/vue.md | 24 + .../usage/v8/card/theming/colors/angular.md | 82 ++ static/usage/v8/card/theming/colors/demo.html | 111 +++ static/usage/v8/card/theming/colors/index.md | 13 + .../v8/card/theming/colors/javascript.md | 82 ++ static/usage/v8/card/theming/colors/react.md | 92 +++ static/usage/v8/card/theming/colors/vue.md | 93 +++ .../angular/example_component_css.md | 14 + .../angular/example_component_html.md | 12 + .../v8/card/theming/css-properties/demo.html | 51 ++ .../v8/card/theming/css-properties/index.md | 32 + .../card/theming/css-properties/javascript.md | 27 + .../theming/css-properties/react/main_css.md | 14 + .../theming/css-properties/react/main_tsx.md | 20 + .../v8/card/theming/css-properties/vue.md | 38 + static/usage/v8/checkbox/alignment/angular.md | 11 + static/usage/v8/checkbox/alignment/demo.html | 29 + static/usage/v8/checkbox/alignment/index.md | 17 + .../usage/v8/checkbox/alignment/javascript.md | 11 + static/usage/v8/checkbox/alignment/react.md | 25 + static/usage/v8/checkbox/alignment/vue.md | 24 + static/usage/v8/checkbox/basic/angular.md | 3 + static/usage/v8/checkbox/basic/demo.html | 22 + static/usage/v8/checkbox/basic/index.md | 17 + static/usage/v8/checkbox/basic/javascript.md | 3 + static/usage/v8/checkbox/basic/react.md | 9 + static/usage/v8/checkbox/basic/vue.md | 14 + .../v8/checkbox/indeterminate/angular.md | 3 + .../usage/v8/checkbox/indeterminate/demo.html | 22 + .../usage/v8/checkbox/indeterminate/index.md | 17 + .../v8/checkbox/indeterminate/javascript.md | 3 + .../usage/v8/checkbox/indeterminate/react.md | 9 + static/usage/v8/checkbox/indeterminate/vue.md | 14 + static/usage/v8/checkbox/justify/angular.md | 15 + static/usage/v8/checkbox/justify/demo.html | 39 + static/usage/v8/checkbox/justify/index.md | 8 + .../usage/v8/checkbox/justify/javascript.md | 15 + static/usage/v8/checkbox/justify/react.md | 23 + static/usage/v8/checkbox/justify/vue.md | 26 + .../v8/checkbox/label-placement/angular.md | 15 + .../v8/checkbox/label-placement/demo.html | 36 + .../v8/checkbox/label-placement/index.md | 8 + .../v8/checkbox/label-placement/javascript.md | 15 + .../v8/checkbox/label-placement/react.md | 25 + .../usage/v8/checkbox/label-placement/vue.md | 26 + static/usage/v8/checkbox/migration/index.md | 188 +++++ .../angular/example_component_css.md | 11 + .../angular/example_component_html.md | 3 + .../checkbox/theming/css-properties/demo.html | 33 + .../checkbox/theming/css-properties/index.md | 32 + .../theming/css-properties/javascript.md | 15 + .../theming/css-properties/react/main_css.md | 11 + .../theming/css-properties/react/main_tsx.md | 11 + .../v8/checkbox/theming/css-properties/vue.md | 26 + static/usage/v8/chip/basic/angular.md | 5 + static/usage/v8/chip/basic/demo.html | 24 + static/usage/v8/chip/basic/index.md | 8 + static/usage/v8/chip/basic/javascript.md | 5 + static/usage/v8/chip/basic/react.md | 14 + static/usage/v8/chip/basic/vue.md | 16 + static/usage/v8/chip/slots/angular.md | 15 + static/usage/v8/chip/slots/demo.html | 34 + static/usage/v8/chip/slots/index.md | 8 + static/usage/v8/chip/slots/javascript.md | 15 + static/usage/v8/chip/slots/react.md | 26 + static/usage/v8/chip/slots/vue.md | 34 + .../usage/v8/chip/theming/colors/angular.md | 12 + static/usage/v8/chip/theming/colors/demo.html | 43 + static/usage/v8/chip/theming/colors/index.md | 8 + .../v8/chip/theming/colors/javascript.md | 12 + static/usage/v8/chip/theming/colors/react.md | 21 + static/usage/v8/chip/theming/colors/vue.md | 23 + .../angular/example_component_css.md | 6 + .../angular/example_component_html.md | 3 + .../v8/chip/theming/css-properties/demo.html | 29 + .../v8/chip/theming/css-properties/index.md | 32 + .../chip/theming/css-properties/javascript.md | 10 + .../theming/css-properties/react/main_css.md | 6 + .../theming/css-properties/react/main_tsx.md | 11 + .../v8/chip/theming/css-properties/vue.md | 21 + static/usage/v8/content/basic/angular.md | 12 + static/usage/v8/content/basic/demo.html | 27 + static/usage/v8/content/basic/index.md | 14 + static/usage/v8/content/basic/javascript.md | 12 + static/usage/v8/content/basic/react.md | 20 + static/usage/v8/content/basic/vue.md | 23 + static/usage/v8/content/fixed/angular.md | 54 ++ .../fixed/angular/example_component_css.md | 6 + .../fixed/angular/example_component_html.md | 54 ++ static/usage/v8/content/fixed/demo.html | 76 ++ static/usage/v8/content/fixed/index.md | 34 + static/usage/v8/content/fixed/javascript.md | 61 ++ static/usage/v8/content/fixed/react.md | 62 ++ .../usage/v8/content/fixed/react/main_css.md | 6 + .../usage/v8/content/fixed/react/main_tsx.md | 64 ++ static/usage/v8/content/fixed/vue.md | 72 ++ .../angular/example_component_css.md | 5 + .../angular/example_component_html.md | 61 ++ static/usage/v8/content/fullscreen/demo.html | 82 ++ static/usage/v8/content/fullscreen/index.md | 34 + .../usage/v8/content/fullscreen/javascript.md | 67 ++ .../v8/content/fullscreen/react/main_css.md | 5 + .../v8/content/fullscreen/react/main_tsx.md | 73 ++ static/usage/v8/content/fullscreen/vue.md | 78 ++ .../usage/v8/content/header-footer/angular.md | 22 + .../usage/v8/content/header-footer/demo.html | 37 + .../usage/v8/content/header-footer/index.md | 14 + .../v8/content/header-footer/javascript.md | 22 + .../usage/v8/content/header-footer/react.md | 32 + static/usage/v8/content/header-footer/vue.md | 33 + .../angular/example_component_html.md | 59 ++ .../angular/example_component_ts.md | 22 + .../usage/v8/content/scroll-events/demo.html | 77 ++ .../usage/v8/content/scroll-events/index.md | 27 + .../v8/content/scroll-events/javascript.md | 62 ++ .../usage/v8/content/scroll-events/react.md | 78 ++ static/usage/v8/content/scroll-events/vue.md | 80 ++ .../angular/example_component_html.md | 55 ++ .../angular/example_component_ts.md | 24 + .../usage/v8/content/scroll-methods/demo.html | 86 ++ .../usage/v8/content/scroll-methods/index.md | 26 + .../v8/content/scroll-methods/javascript.md | 71 ++ .../usage/v8/content/scroll-methods/react.md | 81 ++ static/usage/v8/content/scroll-methods/vue.md | 78 ++ .../v8/content/theming/colors/angular.md | 38 + .../usage/v8/content/theming/colors/demo.html | 67 ++ .../usage/v8/content/theming/colors/index.md | 14 + .../v8/content/theming/colors/javascript.md | 38 + .../usage/v8/content/theming/colors/react.md | 48 ++ static/usage/v8/content/theming/colors/vue.md | 49 ++ .../angular/example_component_css.md | 6 + .../angular/example_component_html.md | 12 + .../content/theming/css-properties/demo.html | 34 + .../content/theming/css-properties/index.md | 34 + .../theming/css-properties/javascript.md | 19 + .../theming/css-properties/react/main_css.md | 6 + .../theming/css-properties/react/main_tsx.md | 22 + .../v8/content/theming/css-properties/vue.md | 30 + .../angular/example_component_css.md | 9 + .../angular/example_component_html.md | 12 + .../theming/css-shadow-parts/demo.html | 37 + .../content/theming/css-shadow-parts/index.md | 34 + .../theming/css-shadow-parts/javascript.md | 22 + .../css-shadow-parts/react/main_css.md | 9 + .../css-shadow-parts/react/main_tsx.md | 22 + .../content/theming/css-shadow-parts/vue.md | 33 + .../angular/example_component_css.md | 8 + .../angular/example_component_html.md | 5 + .../theming/safe-area/angular/global_css.md | 12 + .../v8/content/theming/safe-area/demo.html | 36 + .../v8/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/v8/content/theming/safe-area/vue.md | 40 + .../usage/v8/datetime-button/basic/angular.md | 9 + .../usage/v8/datetime-button/basic/demo.html | 31 + .../usage/v8/datetime-button/basic/index.md | 13 + .../v8/datetime-button/basic/javascript.md | 7 + .../usage/v8/datetime-button/basic/react.md | 16 + static/usage/v8/datetime-button/basic/vue.md | 18 + static/usage/v8/datetime/basic/angular.md | 3 + static/usage/v8/datetime/basic/demo.html | 31 + static/usage/v8/datetime/basic/index.md | 13 + static/usage/v8/datetime/basic/javascript.md | 3 + static/usage/v8/datetime/basic/react.md | 8 + static/usage/v8/datetime/basic/vue.md | 14 + .../customizing-button-texts/angular.md | 3 + .../customizing-button-texts/demo.html | 28 + .../buttons/customizing-button-texts/index.md | 13 + .../customizing-button-texts/javascript.md | 3 + .../buttons/customizing-button-texts/react.md | 8 + .../buttons/customizing-button-texts/vue.md | 14 + .../buttons/customizing-buttons/angular.md | 9 + .../buttons/customizing-buttons/demo.html | 38 + .../buttons/customizing-buttons/index.md | 13 + .../buttons/customizing-buttons/javascript.md | 13 + .../buttons/customizing-buttons/react.md | 32 + .../buttons/customizing-buttons/vue.md | 27 + .../showing-confirmation-buttons/angular.md | 3 + .../showing-confirmation-buttons/demo.html | 28 + .../showing-confirmation-buttons/index.md | 13 + .../javascript.md | 3 + .../showing-confirmation-buttons/react.md | 8 + .../showing-confirmation-buttons/vue.md | 14 + .../angular/example_component_html.md | 3 + .../advanced/angular/example_component_ts.md | 20 + .../date-constraints/advanced/demo.html | 41 + .../date-constraints/advanced/index.md | 25 + .../date-constraints/advanced/javascript.md | 17 + .../date-constraints/advanced/react.md | 19 + .../datetime/date-constraints/advanced/vue.md | 28 + .../date-constraints/max-min/angular.md | 3 + .../date-constraints/max-min/demo.html | 27 + .../date-constraints/max-min/index.md | 13 + .../date-constraints/max-min/javascript.md | 3 + .../date-constraints/max-min/react.md | 8 + .../datetime/date-constraints/max-min/vue.md | 14 + .../date-constraints/values/angular.md | 3 + .../date-constraints/values/demo.html | 27 + .../datetime/date-constraints/values/index.md | 13 + .../date-constraints/values/javascript.md | 3 + .../datetime/date-constraints/values/react.md | 8 + .../datetime/date-constraints/values/vue.md | 14 + .../array/angular/example_component_html.md | 3 + .../array/angular/example_component_ts.md | 32 + .../datetime/highlightedDates/array/demo.html | 53 ++ .../datetime/highlightedDates/array/index.md | 25 + .../highlightedDates/array/javascript.md | 29 + .../datetime/highlightedDates/array/react.md | 35 + .../v8/datetime/highlightedDates/array/vue.md | 40 + .../angular/example_component_html.md | 3 + .../callback/angular/example_component_ts.md | 30 + .../highlightedDates/callback/demo.html | 51 ++ .../highlightedDates/callback/index.md | 25 + .../highlightedDates/callback/javascript.md | 27 + .../highlightedDates/callback/react.md | 32 + .../datetime/highlightedDates/callback/vue.md | 38 + .../localization/custom-locale/angular.md | 3 + .../localization/custom-locale/demo.html | 27 + .../localization/custom-locale/index.md | 13 + .../localization/custom-locale/javascript.md | 3 + .../localization/custom-locale/react.md | 8 + .../localization/custom-locale/vue.md | 14 + .../localization/first-day-of-week/angular.md | 3 + .../localization/first-day-of-week/demo.html | 27 + .../localization/first-day-of-week/index.md | 13 + .../first-day-of-week/javascript.md | 3 + .../localization/first-day-of-week/react.md | 8 + .../localization/first-day-of-week/vue.md | 14 + .../localization/hour-cycle/angular.md | 3 + .../localization/hour-cycle/demo.html | 27 + .../datetime/localization/hour-cycle/index.md | 13 + .../localization/hour-cycle/javascript.md | 3 + .../datetime/localization/hour-cycle/react.md | 8 + .../datetime/localization/hour-cycle/vue.md | 14 + .../locale-extension-tags/angular.md | 3 + .../locale-extension-tags/demo.html | 27 + .../locale-extension-tags/index.md | 13 + .../locale-extension-tags/javascript.md | 3 + .../locale-extension-tags/react.md | 8 + .../localization/locale-extension-tags/vue.md | 14 + .../localization/time-label/angular.md | 5 + .../localization/time-label/demo.html | 29 + .../datetime/localization/time-label/index.md | 13 + .../localization/time-label/javascript.md | 5 + .../datetime/localization/time-label/react.md | 12 + .../datetime/localization/time-label/vue.md | 16 + static/usage/v8/datetime/multiple/angular.md | 3 + static/usage/v8/datetime/multiple/demo.html | 32 + static/usage/v8/datetime/multiple/index.md | 13 + .../usage/v8/datetime/multiple/javascript.md | 8 + static/usage/v8/datetime/multiple/react.md | 16 + static/usage/v8/datetime/multiple/vue.md | 14 + .../v8/datetime/presentation/date/angular.md | 3 + .../v8/datetime/presentation/date/demo.html | 27 + .../v8/datetime/presentation/date/index.md | 13 + .../datetime/presentation/date/javascript.md | 3 + .../v8/datetime/presentation/date/react.md | 8 + .../v8/datetime/presentation/date/vue.md | 14 + .../presentation/month-and-year/angular.md | 3 + .../presentation/month-and-year/demo.html | 27 + .../presentation/month-and-year/index.md | 13 + .../presentation/month-and-year/javascript.md | 3 + .../presentation/month-and-year/react.md | 8 + .../presentation/month-and-year/vue.md | 14 + .../v8/datetime/presentation/time/angular.md | 3 + .../v8/datetime/presentation/time/demo.html | 27 + .../v8/datetime/presentation/time/index.md | 12 + .../datetime/presentation/time/javascript.md | 3 + .../v8/datetime/presentation/time/react.md | 8 + .../v8/datetime/presentation/time/vue.md | 14 + .../v8/datetime/presentation/wheel/angular.md | 3 + .../v8/datetime/presentation/wheel/demo.html | 27 + .../v8/datetime/presentation/wheel/index.md | 13 + .../datetime/presentation/wheel/javascript.md | 3 + .../v8/datetime/presentation/wheel/react.md | 8 + .../v8/datetime/presentation/wheel/vue.md | 14 + .../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 + .../v8/datetime/styling/calendar-days/vue.md | 88 +++ .../angular/example_component_html.md | 3 + .../global-theming/angular/global_css.md | 66 ++ .../datetime/styling/global-theming/demo.html | 76 ++ .../datetime/styling/global-theming/index.md | 33 + .../styling/global-theming/javascript.md | 54 ++ .../styling/global-theming/react/main_css.md | 50 ++ .../styling/global-theming/react/main_tsx.md | 11 + .../v8/datetime/styling/global-theming/vue.md | 65 ++ .../angular/example_component_css.md | 16 + .../angular/example_component_html.md | 3 + .../angular/example_component_ts.md | 14 + .../datetime/styling/wheel-styling/demo.html | 39 + .../datetime/styling/wheel-styling/index.md | 35 + .../styling/wheel-styling/javascript.md | 20 + .../styling/wheel-styling/react/main_css.md | 16 + .../styling/wheel-styling/react/main_tsx.md | 11 + .../v8/datetime/styling/wheel-styling/vue.md | 31 + .../theming/angular/example_component_html.md | 3 + .../v8/datetime/theming/angular/global_css.md | 66 ++ static/usage/v8/datetime/theming/demo.html | 76 ++ static/usage/v8/datetime/theming/index.md | 35 + .../usage/v8/datetime/theming/javascript.md | 54 ++ .../v8/datetime/theming/react/main_css.md | 50 ++ .../v8/datetime/theming/react/main_tsx.md | 11 + static/usage/v8/datetime/theming/vue.md | 65 ++ .../title/customizing-title/angular.md | 5 + .../title/customizing-title/demo.html | 29 + .../datetime/title/customizing-title/index.md | 13 + .../title/customizing-title/javascript.md | 5 + .../datetime/title/customizing-title/react.md | 12 + .../datetime/title/customizing-title/vue.md | 16 + .../title/showing-default-title/angular.md | 3 + .../title/showing-default-title/demo.html | 27 + .../title/showing-default-title/index.md | 13 + .../title/showing-default-title/javascript.md | 3 + .../title/showing-default-title/react.md | 8 + .../title/showing-default-title/vue.md | 14 + static/usage/v8/fab/basic/angular.md | 7 + static/usage/v8/fab/basic/demo.html | 26 + static/usage/v8/fab/basic/index.md | 8 + static/usage/v8/fab/basic/javascript.md | 7 + static/usage/v8/fab/basic/react.md | 16 + static/usage/v8/fab/basic/vue.md | 22 + static/usage/v8/fab/button-sizing/angular.md | 18 + static/usage/v8/fab/button-sizing/demo.html | 37 + static/usage/v8/fab/button-sizing/index.md | 8 + .../usage/v8/fab/button-sizing/javascript.md | 18 + static/usage/v8/fab/button-sizing/react.md | 27 + static/usage/v8/fab/button-sizing/vue.md | 33 + static/usage/v8/fab/list-side/angular.md | 33 + static/usage/v8/fab/list-side/demo.html | 52 ++ static/usage/v8/fab/list-side/index.md | 8 + static/usage/v8/fab/list-side/javascript.md | 33 + static/usage/v8/fab/list-side/react.md | 42 + static/usage/v8/fab/list-side/vue.md | 48 ++ static/usage/v8/fab/positioning/angular.md | 59 ++ static/usage/v8/fab/positioning/demo.html | 74 ++ static/usage/v8/fab/positioning/index.md | 14 + static/usage/v8/fab/positioning/javascript.md | 59 ++ static/usage/v8/fab/positioning/react.md | 77 ++ static/usage/v8/fab/positioning/vue.md | 81 ++ .../angular/example_component_css.md | 6 + .../angular/example_component_html.md | 7 + .../v8/fab/safe-area/angular/global_css.md | 10 + static/usage/v8/fab/safe-area/demo.html | 28 + static/usage/v8/fab/safe-area/index.md | 35 + static/usage/v8/fab/safe-area/javascript.md | 23 + .../usage/v8/fab/safe-area/react/main_css.md | 15 + .../usage/v8/fab/safe-area/react/main_tsx.md | 18 + static/usage/v8/fab/safe-area/vue.md | 44 ++ static/usage/v8/fab/theming/colors/angular.md | 33 + static/usage/v8/fab/theming/colors/demo.html | 52 ++ static/usage/v8/fab/theming/colors/index.md | 8 + .../usage/v8/fab/theming/colors/javascript.md | 33 + static/usage/v8/fab/theming/colors/react.md | 42 + static/usage/v8/fab/theming/colors/vue.md | 48 ++ .../angular/example_component_css.md | 10 + .../angular/example_component_html.md | 18 + .../theming/css-custom-properties/demo.html | 48 ++ .../theming/css-custom-properties/index.md | 32 + .../css-custom-properties/javascript.md | 29 + .../css-custom-properties/react/main_css.md | 10 + .../css-custom-properties/react/main_tsx.md | 29 + .../fab/theming/css-custom-properties/vue.md | 44 ++ .../angular/example_component_css.md | 16 + .../angular/example_component_html.md | 18 + .../v8/fab/theming/css-shadow-parts/demo.html | 54 ++ .../v8/fab/theming/css-shadow-parts/index.md | 32 + .../theming/css-shadow-parts/javascript.md | 35 + .../css-shadow-parts/react/main_css.md | 16 + .../css-shadow-parts/react/main_tsx.md | 29 + .../v8/fab/theming/css-shadow-parts/vue.md | 50 ++ static/usage/v8/footer/basic/angular.md | 10 + static/usage/v8/footer/basic/demo.html | 25 + static/usage/v8/footer/basic/index.md | 14 + static/usage/v8/footer/basic/javascript.md | 10 + static/usage/v8/footer/basic/react.md | 20 + static/usage/v8/footer/basic/vue.md | 21 + .../angular/example_component_css.md | 11 + .../angular/example_component_html.md | 69 ++ .../v8/footer/custom-scroll-target/demo.html | 98 +++ .../v8/footer/custom-scroll-target/index.md | 35 + .../footer/custom-scroll-target/javascript.md | 81 ++ .../custom-scroll-target/react/main_css.md | 11 + .../custom-scroll-target/react/main_tsx.md | 83 ++ .../v8/footer/custom-scroll-target/vue.md | 92 +++ static/usage/v8/footer/fade/angular.md | 67 ++ static/usage/v8/footer/fade/demo.html | 82 ++ static/usage/v8/footer/fade/index.md | 15 + static/usage/v8/footer/fade/javascript.md | 67 ++ static/usage/v8/footer/fade/react.md | 77 ++ static/usage/v8/footer/fade/vue.md | 78 ++ static/usage/v8/footer/no-border/angular.md | 10 + static/usage/v8/footer/no-border/demo.html | 25 + static/usage/v8/footer/no-border/index.md | 14 + .../usage/v8/footer/no-border/javascript.md | 10 + static/usage/v8/footer/no-border/react.md | 20 + static/usage/v8/footer/no-border/vue.md | 21 + static/usage/v8/footer/translucent/angular.md | 67 ++ static/usage/v8/footer/translucent/demo.html | 82 ++ static/usage/v8/footer/translucent/index.md | 15 + .../usage/v8/footer/translucent/javascript.md | 67 ++ static/usage/v8/footer/translucent/react.md | 77 ++ static/usage/v8/footer/translucent/vue.md | 78 ++ .../basic/angular/example_component_css.md | 14 + .../basic/angular/example_component_html.md | 10 + .../basic/angular/example_component_ts.md | 50 ++ static/usage/v8/gestures/basic/demo.html | 81 ++ static/usage/v8/gestures/basic/index.md | 34 + static/usage/v8/gestures/basic/javascript.md | 58 ++ .../usage/v8/gestures/basic/react/main_css.md | 14 + .../usage/v8/gestures/basic/react/main_tsx.md | 62 ++ static/usage/v8/gestures/basic/vue.md | 82 ++ .../angular/example_component_css.md | 6 + .../angular/example_component_html.md | 5 + .../angular/example_component_ts.md | 51 ++ .../usage/v8/gestures/double-click/demo.html | 67 ++ .../usage/v8/gestures/double-click/index.md | 34 + .../v8/gestures/double-click/javascript.md | 49 ++ .../gestures/double-click/react/main_css.md | 6 + .../gestures/double-click/react/main_tsx.md | 57 ++ static/usage/v8/gestures/double-click/vue.md | 69 ++ .../basic/angular/example_component_css.md | 8 + .../basic/angular/example_component_html.md | 37 + static/usage/v8/grid/basic/demo.html | 75 ++ static/usage/v8/grid/basic/index.md | 33 + static/usage/v8/grid/basic/javascript.md | 46 ++ static/usage/v8/grid/basic/react/main_css.md | 8 + static/usage/v8/grid/basic/react/main_tsx.md | 49 ++ static/usage/v8/grid/basic/vue.md | 57 ++ .../angular/example_component_css.md | 12 + .../angular/example_component_html.md | 11 + .../grid/customizing/column-number/demo.html | 51 ++ .../grid/customizing/column-number/index.md | 33 + .../customizing/column-number/javascript.md | 24 + .../column-number/react/main_css.md | 12 + .../column-number/react/main_tsx.md | 25 + .../v8/grid/customizing/column-number/vue.md | 35 + .../padding/angular/example_component_css.md | 26 + .../padding/angular/example_component_html.md | 9 + .../v8/grid/customizing/padding/demo.html | 63 ++ .../v8/grid/customizing/padding/index.md | 33 + .../v8/grid/customizing/padding/javascript.md | 36 + .../customizing/padding/react/main_css.md | 26 + .../customizing/padding/react/main_tsx.md | 21 + .../usage/v8/grid/customizing/padding/vue.md | 47 ++ .../width/angular/example_component_css.md | 18 + .../width/angular/example_component_html.md | 9 + .../usage/v8/grid/customizing/width/demo.html | 54 ++ .../usage/v8/grid/customizing/width/index.md | 33 + .../v8/grid/customizing/width/javascript.md | 28 + .../grid/customizing/width/react/main_css.md | 18 + .../grid/customizing/width/react/main_tsx.md | 19 + static/usage/v8/grid/customizing/width/vue.md | 39 + .../fixed/angular/example_component_css.md | 8 + .../fixed/angular/example_component_html.md | 9 + static/usage/v8/grid/fixed/demo.html | 46 ++ static/usage/v8/grid/fixed/index.md | 33 + static/usage/v8/grid/fixed/javascript.md | 18 + static/usage/v8/grid/fixed/react/main_css.md | 8 + static/usage/v8/grid/fixed/react/main_tsx.md | 19 + static/usage/v8/grid/fixed/vue.md | 29 + .../angular/example_component_css.md | 8 + .../angular/example_component_html.md | 41 + .../v8/grid/horizontal-alignment/demo.html | 79 ++ .../v8/grid/horizontal-alignment/index.md | 33 + .../grid/horizontal-alignment/javascript.md | 50 ++ .../horizontal-alignment/react/main_css.md | 8 + .../horizontal-alignment/react/main_tsx.md | 53 ++ .../usage/v8/grid/horizontal-alignment/vue.md | 61 ++ .../angular/example_component_css.md | 8 + .../angular/example_component_html.md | 30 + .../usage/v8/grid/offset-responsive/demo.html | 68 ++ .../usage/v8/grid/offset-responsive/index.md | 33 + .../v8/grid/offset-responsive/javascript.md | 39 + .../grid/offset-responsive/react/main_css.md | 8 + .../grid/offset-responsive/react/main_tsx.md | 46 ++ static/usage/v8/grid/offset-responsive/vue.md | 50 ++ .../offset/angular/example_component_css.md | 8 + .../offset/angular/example_component_html.md | 29 + static/usage/v8/grid/offset/demo.html | 67 ++ static/usage/v8/grid/offset/index.md | 33 + static/usage/v8/grid/offset/javascript.md | 38 + static/usage/v8/grid/offset/react/main_css.md | 8 + static/usage/v8/grid/offset/react/main_tsx.md | 49 ++ static/usage/v8/grid/offset/vue.md | 49 ++ .../angular/example_component_css.md | 8 + .../angular/example_component_html.md | 31 + .../v8/grid/push-pull-responsive/demo.html | 69 ++ .../v8/grid/push-pull-responsive/index.md | 33 + .../grid/push-pull-responsive/javascript.md | 40 + .../push-pull-responsive/react/main_css.md | 8 + .../push-pull-responsive/react/main_tsx.md | 55 ++ .../usage/v8/grid/push-pull-responsive/vue.md | 51 ++ .../angular/example_component_css.md | 8 + .../angular/example_component_html.md | 33 + static/usage/v8/grid/push-pull/demo.html | 77 ++ static/usage/v8/grid/push-pull/index.md | 33 + static/usage/v8/grid/push-pull/javascript.md | 42 + .../usage/v8/grid/push-pull/react/main_css.md | 8 + .../usage/v8/grid/push-pull/react/main_tsx.md | 55 ++ static/usage/v8/grid/push-pull/vue.md | 59 ++ .../angular/example_component_css.md | 12 + .../angular/example_component_html.md | 34 + static/usage/v8/grid/size-auto/demo.html | 76 ++ static/usage/v8/grid/size-auto/index.md | 33 + static/usage/v8/grid/size-auto/javascript.md | 47 ++ .../usage/v8/grid/size-auto/react/main_css.md | 12 + .../usage/v8/grid/size-auto/react/main_tsx.md | 52 ++ static/usage/v8/grid/size-auto/vue.md | 58 ++ .../angular/example_component_css.md | 8 + .../angular/example_component_html.md | 32 + .../usage/v8/grid/size-responsive/demo.html | 70 ++ static/usage/v8/grid/size-responsive/index.md | 33 + .../v8/grid/size-responsive/javascript.md | 41 + .../v8/grid/size-responsive/react/main_css.md | 8 + .../v8/grid/size-responsive/react/main_tsx.md | 64 ++ static/usage/v8/grid/size-responsive/vue.md | 52 ++ .../size/angular/example_component_css.md | 8 + .../size/angular/example_component_html.md | 30 + static/usage/v8/grid/size/demo.html | 68 ++ static/usage/v8/grid/size/index.md | 33 + static/usage/v8/grid/size/javascript.md | 39 + static/usage/v8/grid/size/react/main_css.md | 8 + static/usage/v8/grid/size/react/main_tsx.md | 48 ++ static/usage/v8/grid/size/vue.md | 50 ++ .../angular/example_component_css.md | 8 + .../angular/example_component_html.md | 46 ++ .../v8/grid/vertical-alignment/demo.html | 84 ++ .../usage/v8/grid/vertical-alignment/index.md | 33 + .../v8/grid/vertical-alignment/javascript.md | 55 ++ .../grid/vertical-alignment/react/main_css.md | 8 + .../grid/vertical-alignment/react/main_tsx.md | 58 ++ .../usage/v8/grid/vertical-alignment/vue.md | 66 ++ static/usage/v8/header/basic/angular.md | 10 + static/usage/v8/header/basic/demo.html | 25 + static/usage/v8/header/basic/index.md | 14 + static/usage/v8/header/basic/javascript.md | 10 + static/usage/v8/header/basic/react.md | 20 + static/usage/v8/header/basic/vue.md | 21 + static/usage/v8/header/condense/angular.md | 75 ++ static/usage/v8/header/condense/demo.html | 92 +++ static/usage/v8/header/condense/index.md | 15 + static/usage/v8/header/condense/javascript.md | 75 ++ static/usage/v8/header/condense/react.md | 87 +++ static/usage/v8/header/condense/vue.md | 86 ++ .../angular/example_component_css.md | 10 + .../angular/example_component_html.md | 69 ++ .../v8/header/custom-scroll-target/demo.html | 98 +++ .../v8/header/custom-scroll-target/index.md | 35 + .../header/custom-scroll-target/javascript.md | 43 + .../custom-scroll-target/react/main_css.md | 10 + .../custom-scroll-target/react/main_tsx.md | 83 ++ .../v8/header/custom-scroll-target/vue.md | 92 +++ static/usage/v8/header/fade/angular.md | 67 ++ static/usage/v8/header/fade/demo.html | 82 ++ static/usage/v8/header/fade/index.md | 15 + static/usage/v8/header/fade/javascript.md | 67 ++ static/usage/v8/header/fade/react.md | 77 ++ static/usage/v8/header/fade/vue.md | 78 ++ static/usage/v8/header/no-border/angular.md | 10 + static/usage/v8/header/no-border/demo.html | 25 + static/usage/v8/header/no-border/index.md | 14 + .../usage/v8/header/no-border/javascript.md | 10 + static/usage/v8/header/no-border/react.md | 20 + static/usage/v8/header/no-border/vue.md | 21 + static/usage/v8/header/translucent/angular.md | 67 ++ static/usage/v8/header/translucent/demo.html | 82 ++ static/usage/v8/header/translucent/index.md | 15 + .../usage/v8/header/translucent/javascript.md | 67 ++ static/usage/v8/header/translucent/react.md | 77 ++ static/usage/v8/header/translucent/vue.md | 78 ++ static/usage/v8/icon/basic/angular.md | 6 + static/usage/v8/icon/basic/demo.html | 25 + static/usage/v8/icon/basic/index.md | 8 + static/usage/v8/icon/basic/javascript.md | 6 + static/usage/v8/icon/basic/react.md | 17 + static/usage/v8/icon/basic/vue.md | 21 + static/usage/v8/img/basic/angular.md | 6 + static/usage/v8/img/basic/demo.html | 31 + static/usage/v8/img/basic/index.md | 8 + static/usage/v8/img/basic/javascript.md | 6 + static/usage/v8/img/basic/react.md | 14 + static/usage/v8/img/basic/vue.md | 17 + .../basic/angular/example_component_html.md | 15 + .../basic/angular/example_component_ts.md | 32 + .../usage/v8/infinite-scroll/basic/demo.html | 60 ++ .../usage/v8/infinite-scroll/basic/index.md | 24 + .../v8/infinite-scroll/basic/javascript.md | 46 ++ .../usage/v8/infinite-scroll/basic/react.md | 53 ++ static/usage/v8/infinite-scroll/basic/vue.md | 65 ++ .../angular/example_component_css.md | 12 + .../angular/example_component_html.md | 68 ++ .../angular/example_component_ts.md | 20 + .../custom-infinite-scroll-content/demo.html | 117 +++ .../custom-infinite-scroll-content/index.md | 34 + .../javascript.md | 104 +++ .../react/main_css.md | 12 + .../react/main_tsx.md | 89 +++ .../custom-infinite-scroll-content/vue.md | 121 +++ .../angular/example_component_html.md | 15 + .../angular/example_component_ts.md | 20 + .../infinite-scroll-content/demo.html | 53 ++ .../infinite-scroll-content/index.md | 24 + .../infinite-scroll-content/javascript.md | 38 + .../infinite-scroll-content/react.md | 44 ++ .../infinite-scroll-content/vue.md | 58 ++ static/usage/v8/input/basic/angular.md | 23 + static/usage/v8/input/basic/demo.html | 48 ++ static/usage/v8/input/basic/index.md | 8 + static/usage/v8/input/basic/javascript.md | 23 + static/usage/v8/input/basic/react.md | 31 + static/usage/v8/input/basic/vue.md | 34 + static/usage/v8/input/clear/angular.md | 34 + static/usage/v8/input/clear/demo.html | 59 ++ static/usage/v8/input/clear/index.md | 8 + static/usage/v8/input/clear/javascript.md | 34 + static/usage/v8/input/clear/react.md | 39 + static/usage/v8/input/clear/vue.md | 45 ++ .../v8/input/counter-alignment/angular.md | 11 + .../v8/input/counter-alignment/demo.html | 30 + .../usage/v8/input/counter-alignment/index.md | 17 + .../v8/input/counter-alignment/javascript.md | 11 + .../usage/v8/input/counter-alignment/react.md | 21 + .../usage/v8/input/counter-alignment/vue.md | 17 + .../counter/angular/example_component_html.md | 12 + .../counter/angular/example_component_ts.md | 13 + static/usage/v8/input/counter/demo.html | 44 ++ static/usage/v8/input/counter/index.md | 24 + static/usage/v8/input/counter/javascript.md | 16 + static/usage/v8/input/counter/react.md | 22 + static/usage/v8/input/counter/vue.md | 22 + static/usage/v8/input/fill/angular.md | 7 + static/usage/v8/input/fill/demo.html | 39 + static/usage/v8/input/fill/index.md | 14 + static/usage/v8/input/fill/javascript.md | 7 + static/usage/v8/input/fill/react.md | 17 + static/usage/v8/input/fill/vue.md | 18 + .../angular/example_component_html.md | 12 + .../filtering/angular/example_component_ts.md | 27 + static/usage/v8/input/filtering/demo.html | 36 + static/usage/v8/input/filtering/index.md | 24 + static/usage/v8/input/filtering/javascript.md | 16 + static/usage/v8/input/filtering/react.md | 36 + static/usage/v8/input/filtering/vue.md | 46 ++ static/usage/v8/input/helper-error/angular.md | 12 + static/usage/v8/input/helper-error/demo.html | 62 ++ static/usage/v8/input/helper-error/index.md | 18 + .../usage/v8/input/helper-error/javascript.md | 38 + static/usage/v8/input/helper-error/react.md | 44 ++ static/usage/v8/input/helper-error/vue.md | 48 ++ .../usage/v8/input/label-placement/angular.md | 19 + .../usage/v8/input/label-placement/demo.html | 44 ++ .../usage/v8/input/label-placement/index.md | 13 + .../v8/input/label-placement/javascript.md | 19 + .../usage/v8/input/label-placement/react.md | 27 + static/usage/v8/input/label-placement/vue.md | 30 + static/usage/v8/input/label-slot/angular.md | 9 + static/usage/v8/input/label-slot/demo.html | 28 + static/usage/v8/input/label-slot/index.md | 8 + .../usage/v8/input/label-slot/javascript.md | 9 + static/usage/v8/input/label-slot/react.md | 19 + static/usage/v8/input/label-slot/vue.md | 20 + .../v8/input/mask/angular/app_module_ts.md | 19 + .../mask/angular/example_component_html.md | 20 + .../mask/angular/example_component_ts.md | 31 + static/usage/v8/input/mask/demo.html | 73 ++ static/usage/v8/input/mask/index.md | 58 ++ .../v8/input/mask/javascript/index_html.md | 45 ++ .../v8/input/mask/javascript/index_ts.md | 28 + static/usage/v8/input/mask/react.md | 59 ++ static/usage/v8/input/mask/vue.md | 51 ++ static/usage/v8/input/migration/index.md | 248 ++++++ .../v8/input/no-visible-label/angular.md | 7 + .../usage/v8/input/no-visible-label/demo.html | 26 + .../usage/v8/input/no-visible-label/index.md | 8 + .../v8/input/no-visible-label/javascript.md | 7 + .../usage/v8/input/no-visible-label/react.md | 15 + static/usage/v8/input/no-visible-label/vue.md | 18 + static/usage/v8/input/set-focus/angular.md | 10 + static/usage/v8/input/set-focus/demo.html | 33 + static/usage/v8/input/set-focus/index.md | 17 + static/usage/v8/input/set-focus/javascript.md | 17 + static/usage/v8/input/set-focus/react.md | 21 + static/usage/v8/input/set-focus/vue.md | 23 + .../usage/v8/input/theming/colors/angular.md | 11 + .../usage/v8/input/theming/colors/demo.html | 42 + static/usage/v8/input/theming/colors/index.md | 13 + .../v8/input/theming/colors/javascript.md | 11 + static/usage/v8/input/theming/colors/react.md | 21 + static/usage/v8/input/theming/colors/vue.md | 22 + .../angular/example_component_css.md | 13 + .../angular/example_component_html.md | 10 + .../css-properties/angular/global_css.md | 14 + .../v8/input/theming/css-properties/demo.html | 55 ++ .../v8/input/theming/css-properties/index.md | 35 + .../theming/css-properties/javascript.md | 31 + .../theming/css-properties/react/main_css.md | 20 + .../theming/css-properties/react/main_tsx.md | 20 + .../v8/input/theming/css-properties/vue.md | 42 + static/usage/v8/input/types/angular.md | 25 + static/usage/v8/input/types/demo.html | 48 ++ static/usage/v8/input/types/index.md | 8 + static/usage/v8/input/types/javascript.md | 25 + static/usage/v8/input/types/react.md | 31 + static/usage/v8/input/types/vue.md | 34 + static/usage/v8/item-divider/basic/angular.md | 35 + static/usage/v8/item-divider/basic/demo.html | 60 ++ static/usage/v8/item-divider/basic/index.md | 13 + .../usage/v8/item-divider/basic/javascript.md | 35 + static/usage/v8/item-divider/basic/react.md | 43 + static/usage/v8/item-divider/basic/vue.md | 46 ++ .../v8/item-divider/theming/colors/angular.md | 32 + .../v8/item-divider/theming/colors/demo.html | 57 ++ .../v8/item-divider/theming/colors/index.md | 13 + .../item-divider/theming/colors/javascript.md | 32 + .../v8/item-divider/theming/colors/react.md | 42 + .../v8/item-divider/theming/colors/vue.md | 43 + .../angular/example_component_css.md | 11 + .../angular/example_component_html.md | 5 + .../theming/css-properties/demo.html | 36 + .../theming/css-properties/index.md | 33 + .../theming/css-properties/javascript.md | 17 + .../theming/css-properties/react/main_css.md | 11 + .../theming/css-properties/react/main_tsx.md | 15 + .../theming/css-properties/vue.md | 28 + static/usage/v8/item-group/basic/angular.md | 33 + static/usage/v8/item-group/basic/demo.html | 58 ++ static/usage/v8/item-group/basic/index.md | 13 + .../usage/v8/item-group/basic/javascript.md | 33 + static/usage/v8/item-group/basic/react.md | 43 + static/usage/v8/item-group/basic/vue.md | 44 ++ .../v8/item-group/sliding-items/angular.md | 67 ++ .../v8/item-group/sliding-items/demo.html | 92 +++ .../v8/item-group/sliding-items/index.md | 13 + .../v8/item-group/sliding-items/javascript.md | 67 ++ .../v8/item-group/sliding-items/react.md | 85 ++ .../usage/v8/item-group/sliding-items/vue.md | 86 ++ static/usage/v8/item-sliding/basic/angular.md | 39 + static/usage/v8/item-sliding/basic/demo.html | 64 ++ static/usage/v8/item-sliding/basic/index.md | 8 + .../usage/v8/item-sliding/basic/javascript.md | 39 + static/usage/v8/item-sliding/basic/react.md | 47 ++ static/usage/v8/item-sliding/basic/vue.md | 50 ++ .../v8/item-sliding/expandable/angular.md | 18 + .../v8/item-sliding/expandable/demo.html | 43 + .../usage/v8/item-sliding/expandable/index.md | 13 + .../v8/item-sliding/expandable/javascript.md | 18 + .../usage/v8/item-sliding/expandable/react.md | 30 + .../usage/v8/item-sliding/expandable/vue.md | 29 + static/usage/v8/item-sliding/icons/angular.md | 120 +++ static/usage/v8/item-sliding/icons/demo.html | 146 ++++ static/usage/v8/item-sliding/icons/index.md | 13 + .../usage/v8/item-sliding/icons/javascript.md | 120 +++ static/usage/v8/item-sliding/icons/react.md | 129 +++ static/usage/v8/item-sliding/icons/vue.md | 135 ++++ static/usage/v8/item/basic/angular.md | 40 + static/usage/v8/item/basic/demo.html | 65 ++ static/usage/v8/item/basic/index.md | 8 + static/usage/v8/item/basic/javascript.md | 40 + static/usage/v8/item/basic/react.md | 50 ++ static/usage/v8/item/basic/vue.md | 51 ++ static/usage/v8/item/buttons/angular.md | 36 + static/usage/v8/item/buttons/demo.html | 62 ++ static/usage/v8/item/buttons/index.md | 8 + static/usage/v8/item/buttons/javascript.md | 36 + static/usage/v8/item/buttons/react.md | 53 ++ static/usage/v8/item/buttons/vue.md | 51 ++ static/usage/v8/item/clickable/angular.md | 17 + static/usage/v8/item/clickable/demo.html | 42 + static/usage/v8/item/clickable/index.md | 8 + static/usage/v8/item/clickable/javascript.md | 17 + static/usage/v8/item/clickable/react.md | 27 + static/usage/v8/item/clickable/vue.md | 28 + .../v8/item/content-types/actions/angular.md | 150 ++++ .../v8/item/content-types/actions/demo.html | 165 ++++ .../v8/item/content-types/actions/index.md | 19 + .../item/content-types/actions/javascript.md | 150 ++++ .../v8/item/content-types/actions/react.md | 174 +++++ .../v8/item/content-types/actions/vue.md | 191 +++++ .../v8/item/content-types/controls/angular.md | 39 + .../v8/item/content-types/controls/demo.html | 54 ++ .../v8/item/content-types/controls/index.md | 19 + .../item/content-types/controls/javascript.md | 39 + .../v8/item/content-types/controls/react.md | 49 ++ .../v8/item/content-types/controls/vue.md | 59 ++ .../metadata/angular/example_component_css.md | 41 + .../angular/example_component_html.md | 90 +++ .../v8/item/content-types/metadata/demo.html | 146 ++++ .../v8/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 +++ .../v8/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 + .../v8/item/content-types/text/demo.html | 53 ++ .../usage/v8/item/content-types/text/index.md | 34 + .../v8/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/v8/item/content-types/text/vue.md | 74 ++ static/usage/v8/item/detail-arrows/angular.md | 37 + static/usage/v8/item/detail-arrows/demo.html | 62 ++ static/usage/v8/item/detail-arrows/index.md | 13 + .../usage/v8/item/detail-arrows/javascript.md | 37 + static/usage/v8/item/detail-arrows/react.md | 48 ++ static/usage/v8/item/detail-arrows/vue.md | 54 ++ static/usage/v8/item/icons/angular.md | 21 + static/usage/v8/item/icons/demo.html | 46 ++ static/usage/v8/item/icons/index.md | 8 + static/usage/v8/item/icons/javascript.md | 21 + static/usage/v8/item/icons/react.md | 32 + static/usage/v8/item/icons/vue.md | 36 + static/usage/v8/item/inputs/angular.md | 43 + static/usage/v8/item/inputs/demo.html | 68 ++ static/usage/v8/item/inputs/index.md | 8 + static/usage/v8/item/inputs/javascript.md | 47 ++ static/usage/v8/item/inputs/react.md | 53 ++ static/usage/v8/item/inputs/vue.md | 63 ++ static/usage/v8/item/lines/angular.md | 41 + static/usage/v8/item/lines/demo.html | 66 ++ static/usage/v8/item/lines/index.md | 8 + static/usage/v8/item/lines/javascript.md | 41 + static/usage/v8/item/lines/react.md | 52 ++ static/usage/v8/item/lines/vue.md | 56 ++ static/usage/v8/item/media/angular.md | 15 + static/usage/v8/item/media/demo.html | 40 + static/usage/v8/item/media/index.md | 8 + static/usage/v8/item/media/javascript.md | 15 + static/usage/v8/item/media/react.md | 25 + static/usage/v8/item/media/vue.md | 26 + .../usage/v8/item/theming/colors/angular.md | 32 + static/usage/v8/item/theming/colors/demo.html | 57 ++ static/usage/v8/item/theming/colors/index.md | 13 + .../v8/item/theming/colors/javascript.md | 32 + static/usage/v8/item/theming/colors/react.md | 42 + static/usage/v8/item/theming/colors/vue.md | 43 + .../angular/example_component_css.md | 18 + .../angular/example_component_html.md | 13 + .../v8/item/theming/css-properties/demo.html | 55 ++ .../v8/item/theming/css-properties/index.md | 32 + .../item/theming/css-properties/javascript.md | 32 + .../theming/css-properties/react/main_css.md | 18 + .../theming/css-properties/react/main_tsx.md | 25 + .../v8/item/theming/css-properties/vue.md | 43 + .../angular/example_component_css.md | 18 + .../angular/example_component_html.md | 13 + .../item/theming/css-shadow-parts/demo.html | 55 ++ .../v8/item/theming/css-shadow-parts/index.md | 32 + .../theming/css-shadow-parts/javascript.md | 32 + .../css-shadow-parts/react/main_css.md | 18 + .../css-shadow-parts/react/main_tsx.md | 25 + .../v8/item/theming/css-shadow-parts/vue.md | 43 + .../angular/example_component_css.md | 8 + .../angular/example_component_html.md | 16 + .../v8/item/theming/input-highlight/demo.html | 48 ++ .../v8/item/theming/input-highlight/index.md | 33 + .../theming/input-highlight/javascript.md | 25 + .../theming/input-highlight/react/main_css.md | 8 + .../theming/input-highlight/react/main_tsx.md | 28 + .../v8/item/theming/input-highlight/vue.md | 35 + .../usage/v8/keyboard/enterkeyhint/angular.md | 14 + .../usage/v8/keyboard/enterkeyhint/demo.html | 33 + .../usage/v8/keyboard/enterkeyhint/index.md | 17 + .../v8/keyboard/enterkeyhint/javascript.md | 14 + .../usage/v8/keyboard/enterkeyhint/react.md | 22 + static/usage/v8/keyboard/enterkeyhint/vue.md | 29 + static/usage/v8/keyboard/inputmode/angular.md | 19 + static/usage/v8/keyboard/inputmode/demo.html | 44 ++ static/usage/v8/keyboard/inputmode/index.md | 17 + .../usage/v8/keyboard/inputmode/javascript.md | 19 + static/usage/v8/keyboard/inputmode/react.md | 27 + static/usage/v8/keyboard/inputmode/vue.md | 34 + static/usage/v8/label/basic/angular.md | 3 + static/usage/v8/label/basic/demo.html | 22 + static/usage/v8/label/basic/index.md | 8 + static/usage/v8/label/basic/javascript.md | 3 + static/usage/v8/label/basic/react.md | 13 + static/usage/v8/label/basic/vue.md | 14 + static/usage/v8/label/input/angular.md | 31 + static/usage/v8/label/input/demo.html | 56 ++ static/usage/v8/label/input/index.md | 8 + static/usage/v8/label/input/javascript.md | 31 + static/usage/v8/label/input/react.md | 41 + static/usage/v8/label/input/vue.md | 41 + static/usage/v8/label/item/angular.md | 26 + static/usage/v8/label/item/demo.html | 51 ++ static/usage/v8/label/item/index.md | 8 + static/usage/v8/label/item/javascript.md | 26 + static/usage/v8/label/item/react.md | 36 + static/usage/v8/label/item/vue.md | 37 + .../usage/v8/label/theming/colors/angular.md | 12 + .../usage/v8/label/theming/colors/demo.html | 37 + static/usage/v8/label/theming/colors/index.md | 8 + .../v8/label/theming/colors/javascript.md | 12 + static/usage/v8/label/theming/colors/react.md | 22 + static/usage/v8/label/theming/colors/vue.md | 23 + .../angular/example_component_html.md | 45 ++ .../angular/global_css.md | 5 + .../v8/layout/dynamic-font-scaling/demo.html | 71 ++ .../v8/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 ++ .../v8/layout/dynamic-font-scaling/vue.md | 98 +++ static/usage/v8/list-header/basic/angular.md | 22 + static/usage/v8/list-header/basic/demo.html | 47 ++ static/usage/v8/list-header/basic/index.md | 13 + .../usage/v8/list-header/basic/javascript.md | 22 + static/usage/v8/list-header/basic/react.md | 30 + static/usage/v8/list-header/basic/vue.md | 33 + .../usage/v8/list-header/buttons/angular.md | 23 + static/usage/v8/list-header/buttons/demo.html | 48 ++ static/usage/v8/list-header/buttons/index.md | 13 + .../v8/list-header/buttons/javascript.md | 23 + static/usage/v8/list-header/buttons/react.md | 31 + static/usage/v8/list-header/buttons/vue.md | 34 + static/usage/v8/list-header/lines/angular.md | 37 + static/usage/v8/list-header/lines/demo.html | 62 ++ static/usage/v8/list-header/lines/index.md | 13 + .../usage/v8/list-header/lines/javascript.md | 37 + static/usage/v8/list-header/lines/react.md | 47 ++ static/usage/v8/list-header/lines/vue.md | 48 ++ .../v8/list-header/theming/colors/angular.md | 32 + .../v8/list-header/theming/colors/demo.html | 57 ++ .../v8/list-header/theming/colors/index.md | 13 + .../list-header/theming/colors/javascript.md | 32 + .../v8/list-header/theming/colors/react.md | 42 + .../v8/list-header/theming/colors/vue.md | 43 + .../angular/example_component_css.md | 10 + .../angular/example_component_html.md | 5 + .../theming/css-properties/demo.html | 35 + .../theming/css-properties/index.md | 33 + .../theming/css-properties/javascript.md | 16 + .../theming/css-properties/react/main_css.md | 10 + .../theming/css-properties/react/main_tsx.md | 15 + .../list-header/theming/css-properties/vue.md | 27 + static/usage/v8/list/basic/angular.md | 19 + static/usage/v8/list/basic/demo.html | 44 ++ static/usage/v8/list/basic/index.md | 8 + static/usage/v8/list/basic/javascript.md | 19 + static/usage/v8/list/basic/react.md | 27 + static/usage/v8/list/basic/vue.md | 30 + static/usage/v8/list/inset/angular.md | 21 + static/usage/v8/list/inset/demo.html | 45 ++ static/usage/v8/list/inset/index.md | 14 + static/usage/v8/list/inset/javascript.md | 21 + static/usage/v8/list/inset/react.md | 29 + static/usage/v8/list/inset/vue.md | 32 + static/usage/v8/list/lines/angular.md | 37 + static/usage/v8/list/lines/demo.html | 64 ++ static/usage/v8/list/lines/index.md | 8 + static/usage/v8/list/lines/javascript.md | 37 + static/usage/v8/list/lines/react.md | 47 ++ static/usage/v8/list/lines/vue.md | 48 ++ .../angular/example_component_html.md | 3 + .../angular/example_component_ts.md | 22 + static/usage/v8/loading/controller/demo.html | 37 + static/usage/v8/loading/controller/index.md | 24 + .../usage/v8/loading/controller/javascript.md | 14 + static/usage/v8/loading/controller/react.md | 26 + static/usage/v8/loading/controller/vue.md | 26 + static/usage/v8/loading/inline/angular.md | 4 + static/usage/v8/loading/inline/demo.html | 23 + static/usage/v8/loading/inline/index.md | 17 + static/usage/v8/loading/inline/javascript.md | 4 + static/usage/v8/loading/inline/react.md | 13 + static/usage/v8/loading/inline/vue.md | 14 + static/usage/v8/loading/spinners/angular.md | 4 + static/usage/v8/loading/spinners/demo.html | 23 + static/usage/v8/loading/spinners/index.md | 17 + .../usage/v8/loading/spinners/javascript.md | 4 + static/usage/v8/loading/spinners/react.md | 13 + static/usage/v8/loading/spinners/vue.md | 15 + .../theming/angular/example_component_html.md | 4 + .../v8/loading/theming/angular/global_css.md | 8 + static/usage/v8/loading/theming/demo.html | 35 + static/usage/v8/loading/theming/index.md | 32 + static/usage/v8/loading/theming/javascript.md | 13 + .../v8/loading/theming/react/main_css.md | 8 + .../v8/loading/theming/react/main_tsx.md | 16 + static/usage/v8/loading/theming/vue.md | 23 + static/usage/v8/menu/basic/angular.md | 21 + static/usage/v8/menu/basic/demo.html | 36 + static/usage/v8/menu/basic/index.md | 18 + static/usage/v8/menu/basic/javascript.md | 21 + static/usage/v8/menu/basic/react.md | 30 + static/usage/v8/menu/basic/vue.md | 41 + .../angular/example_component_html.md | 43 + .../multiple/angular/example_component_ts.md | 39 + static/usage/v8/menu/multiple/demo.html | 92 +++ static/usage/v8/menu/multiple/index.md | 27 + static/usage/v8/menu/multiple/javascript.md | 72 ++ static/usage/v8/menu/multiple/react.md | 87 +++ static/usage/v8/menu/multiple/vue.md | 84 ++ static/usage/v8/menu/sides/angular.md | 21 + static/usage/v8/menu/sides/demo.html | 37 + static/usage/v8/menu/sides/index.md | 18 + static/usage/v8/menu/sides/javascript.md | 21 + static/usage/v8/menu/sides/react.md | 30 + static/usage/v8/menu/sides/vue.md | 41 + .../theming/angular/example_component_css.md | 11 + .../theming/angular/example_component_html.md | 23 + static/usage/v8/menu/theming/demo.html | 47 ++ static/usage/v8/menu/theming/index.md | 33 + static/usage/v8/menu/theming/javascript.md | 35 + .../usage/v8/menu/theming/react/main_css.md | 11 + .../usage/v8/menu/theming/react/main_tsx.md | 33 + static/usage/v8/menu/theming/vue.md | 53 ++ static/usage/v8/menu/toggle/angular.md | 26 + static/usage/v8/menu/toggle/demo.html | 41 + static/usage/v8/menu/toggle/index.md | 18 + static/usage/v8/menu/toggle/javascript.md | 26 + static/usage/v8/menu/toggle/react.md | 35 + static/usage/v8/menu/toggle/vue.md | 46 ++ .../type/angular/example_component_html.md | 46 ++ .../menu/type/angular/example_component_ts.md | 11 + static/usage/v8/menu/type/demo.html | 70 ++ static/usage/v8/menu/type/index.md | 25 + static/usage/v8/menu/type/javascript.md | 55 ++ static/usage/v8/menu/type/react.md | 74 ++ static/usage/v8/menu/type/vue.md | 86 ++ .../boolean/angular/example_component_html.md | 32 + .../boolean/angular/example_component_ts.md | 23 + .../v8/modal/can-dismiss/boolean/demo.html | 64 ++ .../v8/modal/can-dismiss/boolean/index.md | 26 + .../modal/can-dismiss/boolean/javascript.md | 49 ++ .../v8/modal/can-dismiss/boolean/react.md | 72 ++ .../usage/v8/modal/can-dismiss/boolean/vue.md | 82 ++ .../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 +++ .../v8/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 ++ .../angular/example_component_html.md | 27 + .../function/angular/example_component_ts.md | 41 + .../v8/modal/can-dismiss/function/demo.html | 74 ++ .../v8/modal/can-dismiss/function/index.md | 26 + .../modal/can-dismiss/function/javascript.md | 59 ++ .../v8/modal/can-dismiss/function/react.md | 85 ++ .../v8/modal/can-dismiss/function/vue.md | 78 ++ .../angular/example_component_html.md | 30 + .../angular/example_component_ts.md | 13 + .../prevent-swipe-to-close/demo.html | 55 ++ .../prevent-swipe-to-close/index.md | 27 + .../prevent-swipe-to-close/javascript.md | 39 + .../prevent-swipe-to-close/react.md | 56 ++ .../can-dismiss/prevent-swipe-to-close/vue.md | 47 ++ .../basic/angular/example_component_html.md | 65 ++ .../basic/angular/example_component_ts.md | 16 + static/usage/v8/modal/card/basic/demo.html | 88 +++ static/usage/v8/modal/card/basic/index.md | 26 + .../usage/v8/modal/card/basic/javascript.md | 73 ++ static/usage/v8/modal/card/basic/react.md | 100 +++ static/usage/v8/modal/card/basic/vue.md | 115 +++ .../modal/controller/angular/app_module_ts.md | 19 + .../angular/example_component_html.md | 11 + .../angular/example_component_ts.md | 29 + .../angular/modal-example_component_html.md | 18 + .../angular/modal-example_component_ts.md | 23 + static/usage/v8/modal/controller/demo.html | 75 ++ static/usage/v8/modal/controller/index.md | 39 + .../usage/v8/modal/controller/javascript.md | 56 ++ static/usage/v8/modal/controller/react.md | 83 ++ .../v8/modal/controller/vue/example_vue.md | 37 + .../v8/modal/controller/vue/modal_vue.md | 39 + .../angular/example_component_html.md | 33 + .../custom-dialogs/angular/global_css.md | 28 + .../usage/v8/modal/custom-dialogs/demo.html | 79 ++ static/usage/v8/modal/custom-dialogs/index.md | 33 + .../v8/modal/custom-dialogs/javascript.md | 67 ++ .../v8/modal/custom-dialogs/react/main_css.md | 28 + .../v8/modal/custom-dialogs/react/main_tsx.md | 64 ++ static/usage/v8/modal/custom-dialogs/vue.md | 82 ++ .../basic/angular/example_component_html.md | 37 + .../basic/angular/example_component_ts.md | 31 + static/usage/v8/modal/inline/basic/demo.html | 69 ++ static/usage/v8/modal/inline/basic/index.md | 26 + .../usage/v8/modal/inline/basic/javascript.md | 49 ++ static/usage/v8/modal/inline/basic/react.md | 79 ++ static/usage/v8/modal/inline/basic/vue.md | 71 ++ .../is-open/angular/example_component_html.md | 29 + .../is-open/angular/example_component_ts.md | 15 + .../usage/v8/modal/inline/is-open/demo.html | 46 ++ static/usage/v8/modal/inline/is-open/index.md | 26 + .../v8/modal/inline/is-open/javascript.md | 31 + static/usage/v8/modal/inline/is-open/react.md | 42 + static/usage/v8/modal/inline/is-open/vue.md | 39 + .../v8/modal/performance/mount/angular.md | 23 + .../v8/modal/performance/mount/demo.html | 47 ++ .../usage/v8/modal/performance/mount/index.md | 19 + .../v8/modal/performance/mount/javascript.md | 32 + .../usage/v8/modal/performance/mount/react.md | 36 + .../usage/v8/modal/performance/mount/vue.md | 32 + .../angular/example_component_css.md | 13 + .../angular/example_component_html.md | 16 + .../v8/modal/sheet/auto-height/demo.html | 49 ++ .../usage/v8/modal/sheet/auto-height/index.md | 33 + .../v8/modal/sheet/auto-height/javascript.md | 35 + .../modal/sheet/auto-height/react/main_css.md | 13 + .../modal/sheet/auto-height/react/main_tsx.md | 30 + .../usage/v8/modal/sheet/auto-height/vue.md | 34 + .../angular/example_component_css.md | 7 + .../angular/example_component_html.md | 72 ++ .../angular/example_component_ts.md | 20 + .../modal/sheet/background-content/demo.html | 103 +++ .../modal/sheet/background-content/index.md | 28 + .../sheet/background-content/javascript.md | 89 +++ .../modal/sheet/background-content/react.md | 100 +++ .../v8/modal/sheet/background-content/vue.md | 98 +++ static/usage/v8/modal/sheet/basic/angular.md | 56 ++ static/usage/v8/modal/sheet/basic/demo.html | 80 ++ static/usage/v8/modal/sheet/basic/index.md | 19 + .../usage/v8/modal/sheet/basic/javascript.md | 65 ++ static/usage/v8/modal/sheet/basic/react.md | 82 ++ static/usage/v8/modal/sheet/basic/vue.md | 73 ++ .../v8/modal/sheet/handle-behavior/angular.md | 25 + .../v8/modal/sheet/handle-behavior/demo.html | 39 + .../v8/modal/sheet/handle-behavior/index.md | 19 + .../modal/sheet/handle-behavior/javascript.md | 24 + .../v8/modal/sheet/handle-behavior/react.md | 35 + .../v8/modal/sheet/handle-behavior/vue.md | 29 + .../angular/example_component_html.md | 63 ++ .../angular/example_component_ts.md | 40 + .../v8/modal/styling/animations/demo.html | 114 +++ .../v8/modal/styling/animations/index.md | 33 + .../animations/javascript/index_html.md | 95 +++ .../styling/animations/javascript/index_ts.md | 9 + .../v8/modal/styling/animations/react.md | 123 +++ .../usage/v8/modal/styling/animations/vue.md | 109 +++ .../theming/angular/example_component_html.md | 61 ++ .../styling/theming/angular/global_css.md | 17 + .../usage/v8/modal/styling/theming/demo.html | 99 +++ .../usage/v8/modal/styling/theming/index.md | 33 + .../v8/modal/styling/theming/javascript.md | 87 +++ .../modal/styling/theming/react/main_css.md | 17 + .../modal/styling/theming/react/main_tsx.md | 95 +++ static/usage/v8/modal/styling/theming/vue.md | 101 +++ .../modal-navigation/angular/app_module_ts.md | 21 + .../angular/example_component_html.md | 25 + .../angular/example_component_ts.md | 18 + .../angular/page_one_component_ts.md | 23 + .../angular/page_three_component_ts.md | 26 + .../angular/page_two_component_ts.md | 25 + .../usage/v8/nav/modal-navigation/demo.html | 100 +++ static/usage/v8/nav/modal-navigation/index.md | 56 ++ .../v8/nav/modal-navigation/javascript.md | 86 ++ .../v8/nav/modal-navigation/react/main_tsx.md | 60 ++ .../modal-navigation/react/page_one_tsx.md | 18 + .../modal-navigation/react/page_three_tsx.md | 19 + .../modal-navigation/react/page_two_tsx.md | 19 + .../nav/modal-navigation/vue/example_vue.md | 60 ++ .../nav/modal-navigation/vue/page_one_vue.md | 24 + .../modal-navigation/vue/page_three_vue.md | 28 + .../nav/modal-navigation/vue/page_two_vue.md | 24 + .../v8/nav/nav-link/angular/app_module_ts.md | 21 + .../angular/example_component_html.md | 3 + .../nav-link/angular/example_component_ts.md | 13 + .../nav-link/angular/page_one_component_ts.md | 25 + .../angular/page_three_component_ts.md | 21 + .../nav-link/angular/page_two_component_ts.md | 30 + static/usage/v8/nav/nav-link/demo.html | 81 ++ static/usage/v8/nav/nav-link/index.md | 55 ++ static/usage/v8/nav/nav-link/javascript.md | 67 ++ .../usage/v8/nav/nav-link/react/main_tsx.md | 11 + .../v8/nav/nav-link/react/page_one_tsx.md | 26 + .../v8/nav/nav-link/react/page_three_tsx.md | 24 + .../v8/nav/nav-link/react/page_two_tsx.md | 38 + .../usage/v8/nav/nav-link/vue/example_vue.md | 20 + .../usage/v8/nav/nav-link/vue/page_one_vue.md | 30 + .../v8/nav/nav-link/vue/page_three_vue.md | 23 + .../usage/v8/nav/nav-link/vue/page_two_vue.md | 51 ++ static/usage/v8/note/basic/angular.md | 3 + static/usage/v8/note/basic/demo.html | 22 + static/usage/v8/note/basic/index.md | 8 + static/usage/v8/note/basic/javascript.md | 3 + static/usage/v8/note/basic/react.md | 13 + static/usage/v8/note/basic/vue.md | 14 + static/usage/v8/note/item/angular.md | 11 + static/usage/v8/note/item/demo.html | 36 + static/usage/v8/note/item/index.md | 8 + static/usage/v8/note/item/javascript.md | 11 + static/usage/v8/note/item/react.md | 21 + static/usage/v8/note/item/vue.md | 22 + .../usage/v8/note/theming/colors/angular.md | 12 + static/usage/v8/note/theming/colors/demo.html | 47 ++ static/usage/v8/note/theming/colors/index.md | 8 + .../v8/note/theming/colors/javascript.md | 12 + static/usage/v8/note/theming/colors/react.md | 22 + static/usage/v8/note/theming/colors/vue.md | 23 + .../angular/example_component_css.md | 5 + .../angular/example_component_html.md | 3 + .../v8/note/theming/css-properties/demo.html | 28 + .../v8/note/theming/css-properties/index.md | 32 + .../note/theming/css-properties/javascript.md | 9 + .../theming/css-properties/react/main_css.md | 5 + .../theming/css-properties/react/main_tsx.md | 15 + .../v8/note/theming/css-properties/vue.md | 20 + .../angular/example_component_html.md | 3 + .../angular/example_component_ts.md | 54 ++ static/usage/v8/picker/controller/demo.html | 68 ++ static/usage/v8/picker/controller/index.md | 26 + .../usage/v8/picker/controller/javascript.md | 46 ++ static/usage/v8/picker/controller/react.md | 52 ++ static/usage/v8/picker/controller/vue.md | 61 ++ .../isOpen/angular/example_component_html.md | 9 + .../isOpen/angular/example_component_ts.md | 52 ++ .../usage/v8/picker/inline/isOpen/demo.html | 67 ++ static/usage/v8/picker/inline/isOpen/index.md | 26 + .../v8/picker/inline/isOpen/javascript.md | 49 ++ static/usage/v8/picker/inline/isOpen/react.md | 55 ++ static/usage/v8/picker/inline/isOpen/vue.md | 66 ++ .../trigger/angular/example_component_html.md | 4 + .../trigger/angular/example_component_ts.md | 46 ++ .../usage/v8/picker/inline/trigger/demo.html | 63 ++ .../usage/v8/picker/inline/trigger/index.md | 26 + .../v8/picker/inline/trigger/javascript.md | 45 ++ .../usage/v8/picker/inline/trigger/react.md | 52 ++ static/usage/v8/picker/inline/trigger/vue.md | 55 ++ .../angular/example_component_html.md | 4 + .../angular/example_component_ts.md | 76 ++ .../usage/v8/picker/multiple-column/demo.html | 93 +++ .../usage/v8/picker/multiple-column/index.md | 26 + .../v8/picker/multiple-column/javascript.md | 75 ++ .../usage/v8/picker/multiple-column/react.md | 82 ++ static/usage/v8/picker/multiple-column/vue.md | 85 ++ .../angular/example_component_css.md | 12 + .../angular/example_component_html.md | 31 + .../angular/example_component_ts.md | 10 + .../customization/positioning/demo.html | 50 ++ .../customization/positioning/index.md | 34 + .../customization/positioning/javascript.md | 36 + .../positioning/react/main_css.md | 12 + .../positioning/react/main_tsx.md | 33 + .../popover/customization/positioning/vue.md | 47 ++ .../popover/customization/sizing/angular.md | 15 + .../v8/popover/customization/sizing/demo.html | 30 + .../v8/popover/customization/sizing/index.md | 13 + .../customization/sizing/javascript.md | 11 + .../v8/popover/customization/sizing/react.md | 20 + .../v8/popover/customization/sizing/vue.md | 22 + .../styling/angular/example_component_html.md | 8 + .../styling/angular/global_css.md | 17 + .../popover/customization/styling/demo.html | 43 + .../v8/popover/customization/styling/index.md | 32 + .../customization/styling/javascript.md | 24 + .../customization/styling/react/main_css.md | 17 + .../customization/styling/react/main_tsx.md | 18 + .../v8/popover/customization/styling/vue.md | 35 + static/usage/v8/popover/nested/angular.md | 24 + static/usage/v8/popover/nested/demo.html | 39 + static/usage/v8/popover/nested/index.md | 13 + static/usage/v8/popover/nested/javascript.md | 20 + static/usage/v8/popover/nested/react.md | 37 + static/usage/v8/popover/nested/vue.md | 31 + .../v8/popover/performance/mount/angular.md | 8 + .../v8/popover/performance/mount/demo.html | 25 + .../v8/popover/performance/mount/index.md | 18 + .../popover/performance/mount/javascript.md | 6 + .../v8/popover/performance/mount/react.md | 15 + .../usage/v8/popover/performance/mount/vue.md | 19 + .../controller/angular/app_module_ts.md | 19 + .../angular/example_component_html.md | 3 + .../angular/example_component_ts.md | 27 + .../angular/popover_component_html.md | 3 + .../angular/popover_component_ts.md | 10 + .../popover/presenting/controller/demo.html | 52 ++ .../v8/popover/presenting/controller/index.md | 39 + .../presenting/controller/javascript.md | 33 + .../v8/popover/presenting/controller/react.md | 26 + .../presenting/controller/vue/example_vue.md | 26 + .../presenting/controller/vue/popover_vue.md | 15 + .../angular/example_component_html.md | 8 + .../angular/example_component_ts.md | 18 + .../presenting/inline-isopen/demo.html | 37 + .../popover/presenting/inline-isopen/index.md | 25 + .../presenting/inline-isopen/javascript.md | 18 + .../popover/presenting/inline-isopen/react.md | 24 + .../popover/presenting/inline-isopen/vue.md | 29 + .../presenting/inline-trigger/angular.md | 22 + .../presenting/inline-trigger/demo.html | 35 + .../presenting/inline-trigger/index.md | 13 + .../presenting/inline-trigger/javascript.md | 16 + .../presenting/inline-trigger/react.md | 25 + .../popover/presenting/inline-trigger/vue.md | 27 + .../buffer/angular/example_component_html.md | 3 + .../buffer/angular/example_component_ts.md | 29 + static/usage/v8/progress-bar/buffer/demo.html | 44 ++ static/usage/v8/progress-bar/buffer/index.md | 25 + .../v8/progress-bar/buffer/javascript.md | 25 + static/usage/v8/progress-bar/buffer/react.md | 28 + static/usage/v8/progress-bar/buffer/vue.md | 38 + .../angular/example_component_html.md | 3 + .../angular/example_component_ts.md | 26 + .../v8/progress-bar/determinate/demo.html | 39 + .../v8/progress-bar/determinate/index.md | 25 + .../v8/progress-bar/determinate/javascript.md | 20 + .../v8/progress-bar/determinate/react.md | 25 + .../usage/v8/progress-bar/determinate/vue.md | 34 + .../v8/progress-bar/indeterminate/angular.md | 3 + .../v8/progress-bar/indeterminate/demo.html | 22 + .../v8/progress-bar/indeterminate/index.md | 12 + .../progress-bar/indeterminate/javascript.md | 3 + .../v8/progress-bar/indeterminate/react.md | 9 + .../v8/progress-bar/indeterminate/vue.md | 14 + .../v8/progress-bar/theming/colors/angular.md | 11 + .../v8/progress-bar/theming/colors/demo.html | 37 + .../v8/progress-bar/theming/colors/index.md | 12 + .../progress-bar/theming/colors/javascript.md | 11 + .../v8/progress-bar/theming/colors/react.md | 21 + .../v8/progress-bar/theming/colors/vue.md | 22 + .../angular/example_component_css.md | 6 + .../angular/example_component_html.md | 3 + .../theming/css-properties/demo.html | 35 + .../theming/css-properties/index.md | 32 + .../theming/css-properties/javascript.md | 11 + .../theming/css-properties/react/main_css.md | 6 + .../theming/css-properties/react/main_tsx.md | 16 + .../theming/css-properties/vue.md | 22 + .../angular/example_component_css.md | 13 + .../angular/example_component_html.md | 3 + .../theming/css-shadow-parts/demo.html | 42 + .../theming/css-shadow-parts/index.md | 32 + .../theming/css-shadow-parts/javascript.md | 18 + .../css-shadow-parts/react/main_css.md | 13 + .../css-shadow-parts/react/main_tsx.md | 16 + .../theming/css-shadow-parts/vue.md | 29 + static/usage/v8/radio/alignment/angular.md | 15 + static/usage/v8/radio/alignment/demo.html | 34 + static/usage/v8/radio/alignment/index.md | 17 + static/usage/v8/radio/alignment/javascript.md | 15 + static/usage/v8/radio/alignment/react.md | 27 + static/usage/v8/radio/alignment/vue.md | 26 + static/usage/v8/radio/basic/angular.md | 8 + static/usage/v8/radio/basic/demo.html | 33 + static/usage/v8/radio/basic/index.md | 8 + static/usage/v8/radio/basic/javascript.md | 8 + static/usage/v8/radio/basic/react.md | 19 + static/usage/v8/radio/basic/vue.md | 19 + .../usage/v8/radio/empty-selection/angular.md | 8 + .../usage/v8/radio/empty-selection/demo.html | 27 + .../usage/v8/radio/empty-selection/index.md | 8 + .../v8/radio/empty-selection/javascript.md | 8 + .../usage/v8/radio/empty-selection/react.md | 20 + static/usage/v8/radio/empty-selection/vue.md | 19 + static/usage/v8/radio/justify/angular.md | 21 + static/usage/v8/radio/justify/demo.html | 45 ++ static/usage/v8/radio/justify/index.md | 8 + static/usage/v8/radio/justify/javascript.md | 21 + static/usage/v8/radio/justify/react.md | 35 + static/usage/v8/radio/justify/vue.md | 32 + .../usage/v8/radio/label-placement/angular.md | 23 + .../usage/v8/radio/label-placement/demo.html | 44 ++ .../usage/v8/radio/label-placement/index.md | 8 + .../v8/radio/label-placement/javascript.md | 23 + .../usage/v8/radio/label-placement/react.md | 41 + static/usage/v8/radio/label-placement/vue.md | 34 + static/usage/v8/radio/migration/index.md | 188 +++++ .../usage/v8/radio/theming/colors/angular.md | 29 + .../usage/v8/radio/theming/colors/demo.html | 48 ++ static/usage/v8/radio/theming/colors/index.md | 13 + .../v8/radio/theming/colors/javascript.md | 29 + static/usage/v8/radio/theming/colors/react.md | 39 + static/usage/v8/radio/theming/colors/vue.md | 40 + .../angular/example_component_css.md | 21 + .../angular/example_component_html.md | 6 + .../v8/radio/theming/css-properties/demo.html | 47 ++ .../v8/radio/theming/css-properties/index.md | 33 + .../theming/css-properties/javascript.md | 28 + .../theming/css-properties/react/main_css.md | 21 + .../theming/css-properties/react/main_tsx.md | 16 + .../v8/radio/theming/css-properties/vue.md | 39 + .../angular/example_component_css.md | 32 + .../angular/example_component_html.md | 6 + .../radio/theming/css-shadow-parts/demo.html | 58 ++ .../radio/theming/css-shadow-parts/index.md | 33 + .../theming/css-shadow-parts/javascript.md | 39 + .../css-shadow-parts/react/main_css.md | 32 + .../css-shadow-parts/react/main_tsx.md | 16 + .../v8/radio/theming/css-shadow-parts/vue.md | 50 ++ static/usage/v8/range/basic/angular.md | 3 + static/usage/v8/range/basic/demo.html | 27 + static/usage/v8/range/basic/index.md | 10 + static/usage/v8/range/basic/javascript.md | 3 + static/usage/v8/range/basic/react.md | 8 + static/usage/v8/range/basic/vue.md | 14 + static/usage/v8/range/dual-knobs/angular.md | 3 + static/usage/v8/range/dual-knobs/demo.html | 34 + static/usage/v8/range/dual-knobs/index.md | 8 + .../usage/v8/range/dual-knobs/javascript.md | 11 + static/usage/v8/range/dual-knobs/react.md | 17 + static/usage/v8/range/dual-knobs/vue.md | 14 + .../angular/example_component_html.md | 3 + .../angular/example_component_ts.md | 15 + .../usage/v8/range/ion-change-event/demo.html | 37 + .../usage/v8/range/ion-change-event/index.md | 25 + .../v8/range/ion-change-event/javascript.md | 11 + .../usage/v8/range/ion-change-event/react.md | 14 + static/usage/v8/range/ion-change-event/vue.md | 19 + .../angular/example_component_html.md | 7 + .../angular/example_component_ts.md | 19 + .../v8/range/ion-knob-move-event/demo.html | 41 + .../v8/range/ion-knob-move-event/index.md | 25 + .../range/ion-knob-move-event/javascript.md | 15 + .../v8/range/ion-knob-move-event/react.md | 15 + .../usage/v8/range/ion-knob-move-event/vue.md | 26 + static/usage/v8/range/label-slot/angular.md | 5 + static/usage/v8/range/label-slot/demo.html | 29 + static/usage/v8/range/label-slot/index.md | 8 + .../usage/v8/range/label-slot/javascript.md | 5 + static/usage/v8/range/label-slot/react.md | 14 + static/usage/v8/range/label-slot/vue.md | 16 + static/usage/v8/range/labels/angular.md | 15 + static/usage/v8/range/labels/demo.html | 41 + static/usage/v8/range/labels/index.md | 8 + static/usage/v8/range/labels/javascript.md | 15 + static/usage/v8/range/labels/react.md | 24 + static/usage/v8/range/labels/vue.md | 26 + static/usage/v8/range/migration/index.md | 256 ++++++ .../v8/range/no-visible-label/angular.md | 3 + .../usage/v8/range/no-visible-label/demo.html | 27 + .../usage/v8/range/no-visible-label/index.md | 8 + .../v8/range/no-visible-label/javascript.md | 3 + .../usage/v8/range/no-visible-label/react.md | 8 + static/usage/v8/range/no-visible-label/vue.md | 14 + .../pins/angular/example_component_html.md | 3 + .../pins/angular/example_component_ts.md | 13 + static/usage/v8/range/pins/demo.html | 33 + static/usage/v8/range/pins/index.md | 24 + static/usage/v8/range/pins/javascript.md | 10 + static/usage/v8/range/pins/react.md | 8 + static/usage/v8/range/pins/vue.md | 19 + static/usage/v8/range/slots/angular.md | 6 + static/usage/v8/range/slots/demo.html | 30 + static/usage/v8/range/slots/index.md | 8 + static/usage/v8/range/slots/javascript.md | 6 + static/usage/v8/range/slots/react.md | 15 + static/usage/v8/range/slots/vue.md | 24 + .../usage/v8/range/snapping-ticks/angular.md | 3 + .../usage/v8/range/snapping-ticks/demo.html | 27 + static/usage/v8/range/snapping-ticks/index.md | 8 + .../v8/range/snapping-ticks/javascript.md | 3 + static/usage/v8/range/snapping-ticks/react.md | 8 + static/usage/v8/range/snapping-ticks/vue.md | 14 + .../angular/example_component_css.md | 12 + .../angular/example_component_html.md | 3 + .../v8/range/theming/css-properties/demo.html | 36 + .../v8/range/theming/css-properties/index.md | 32 + .../theming/css-properties/javascript.md | 16 + .../theming/css-properties/react/main_css.md | 12 + .../theming/css-properties/react/main_tsx.md | 11 + .../v8/range/theming/css-properties/vue.md | 27 + .../angular/example_component_css.md | 43 + .../angular/example_component_html.md | 11 + .../range/theming/css-shadow-parts/demo.html | 77 ++ .../range/theming/css-shadow-parts/index.md | 32 + .../theming/css-shadow-parts/javascript.md | 47 ++ .../css-shadow-parts/react/main_css.md | 43 + .../css-shadow-parts/react/main_tsx.md | 14 + .../v8/range/theming/css-shadow-parts/vue.md | 66 ++ .../advanced/angular/example_component_css.md | 11 + .../angular/example_component_html.md | 23 + .../advanced/angular/example_component_ts.md | 51 ++ static/usage/v8/refresher/advanced/demo.html | 97 +++ static/usage/v8/refresher/advanced/index.md | 36 + .../usage/v8/refresher/advanced/javascript.md | 82 ++ .../v8/refresher/advanced/react/main_css.md | 11 + .../v8/refresher/advanced/react/main_tsx.md | 93 +++ static/usage/v8/refresher/advanced/vue.md | 108 +++ .../basic/angular/example_component_html.md | 15 + .../basic/angular/example_component_ts.md | 16 + static/usage/v8/refresher/basic/demo.html | 41 + static/usage/v8/refresher/basic/index.md | 26 + static/usage/v8/refresher/basic/javascript.md | 26 + static/usage/v8/refresher/basic/react.md | 40 + static/usage/v8/refresher/basic/vue.md | 36 + .../angular/example_component_html.md | 21 + .../angular/example_component_ts.md | 16 + .../v8/refresher/custom-content/demo.html | 47 ++ .../v8/refresher/custom-content/index.md | 26 + .../v8/refresher/custom-content/javascript.md | 32 + .../v8/refresher/custom-content/react.md | 46 ++ .../usage/v8/refresher/custom-content/vue.md | 43 + .../angular/example_component_css.md | 10 + .../angular/example_component_html.md | 17 + .../angular/example_component_ts.md | 17 + .../refresher/custom-scroll-target/demo.html | 54 ++ .../refresher/custom-scroll-target/index.md | 34 + .../custom-scroll-target/javascript.md | 39 + .../custom-scroll-target/react/main_css.md | 10 + .../custom-scroll-target/react/main_tsx.md | 44 ++ .../v8/refresher/custom-scroll-target/vue.md | 49 ++ .../angular/example_component_html.md | 15 + .../angular/example_component_ts.md | 16 + .../v8/refresher/pull-properties/demo.html | 41 + .../v8/refresher/pull-properties/index.md | 26 + .../refresher/pull-properties/javascript.md | 26 + .../v8/refresher/pull-properties/react.md | 40 + .../usage/v8/refresher/pull-properties/vue.md | 36 + .../basic/angular/example_component_html.md | 32 + .../basic/angular/example_component_ts.md | 22 + static/usage/v8/reorder/basic/demo.html | 71 ++ static/usage/v8/reorder/basic/index.md | 26 + static/usage/v8/reorder/basic/javascript.md | 46 ++ static/usage/v8/reorder/basic/react.md | 50 ++ static/usage/v8/reorder/basic/vue.md | 56 ++ .../angular/example_component_html.md | 42 + .../angular/example_component_ts.md | 22 + static/usage/v8/reorder/custom-icon/demo.html | 81 ++ static/usage/v8/reorder/custom-icon/index.md | 26 + .../v8/reorder/custom-icon/javascript.md | 56 ++ static/usage/v8/reorder/custom-icon/react.md | 61 ++ static/usage/v8/reorder/custom-icon/vue.md | 66 ++ .../angular/example_component_css.md | 11 + .../angular/example_component_html.md | 36 + .../angular/example_component_ts.md | 23 + .../v8/reorder/custom-scroll-target/demo.html | 83 ++ .../v8/reorder/custom-scroll-target/index.md | 37 + .../custom-scroll-target/javascript.md | 62 ++ .../custom-scroll-target/react/main_css.md | 11 + .../custom-scroll-target/react/main_tsx.md | 64 ++ .../v8/reorder/custom-scroll-target/vue.md | 72 ++ .../angular/example_component_html.md | 34 + .../angular/example_component_ts.md | 28 + .../v8/reorder/toggling-disabled/demo.html | 82 ++ .../v8/reorder/toggling-disabled/index.md | 26 + .../reorder/toggling-disabled/javascript.md | 52 ++ .../v8/reorder/toggling-disabled/react.md | 68 ++ .../usage/v8/reorder/toggling-disabled/vue.md | 64 ++ .../angular/example_component_html.md | 12 + .../angular/example_component_ts.md | 31 + .../usage/v8/reorder/updating-data/demo.html | 74 ++ .../usage/v8/reorder/updating-data/index.md | 26 + .../v8/reorder/updating-data/javascript.md | 49 ++ .../usage/v8/reorder/updating-data/react.md | 37 + static/usage/v8/reorder/updating-data/vue.md | 40 + .../wrapper/angular/example_component_html.md | 37 + .../wrapper/angular/example_component_ts.md | 22 + static/usage/v8/reorder/wrapper/demo.html | 76 ++ static/usage/v8/reorder/wrapper/index.md | 26 + static/usage/v8/reorder/wrapper/javascript.md | 51 ++ static/usage/v8/reorder/wrapper/react.md | 55 ++ static/usage/v8/reorder/wrapper/vue.md | 61 ++ .../basic/angular/example_component_css.md | 43 + .../basic/angular/example_component_html.md | 17 + static/usage/v8/ripple-effect/basic/demo.html | 80 ++ static/usage/v8/ripple-effect/basic/index.md | 33 + .../v8/ripple-effect/basic/javascript.md | 61 ++ .../v8/ripple-effect/basic/react/main_css.md | 43 + .../v8/ripple-effect/basic/react/main_tsx.md | 27 + static/usage/v8/ripple-effect/basic/vue.md | 72 ++ .../angular/example_component_css.md | 44 ++ .../angular/example_component_html.md | 15 + .../v8/ripple-effect/customizing/demo.html | 79 ++ .../v8/ripple-effect/customizing/index.md | 33 + .../ripple-effect/customizing/javascript.md | 60 ++ .../customizing/react/main_css.md | 44 ++ .../customizing/react/main_tsx.md | 25 + .../usage/v8/ripple-effect/customizing/vue.md | 71 ++ .../type/angular/example_component_css.md | 44 ++ .../type/angular/example_component_html.md | 15 + static/usage/v8/ripple-effect/type/demo.html | 79 ++ static/usage/v8/ripple-effect/type/index.md | 33 + .../usage/v8/ripple-effect/type/javascript.md | 60 ++ .../v8/ripple-effect/type/react/main_css.md | 44 ++ .../v8/ripple-effect/type/react/main_tsx.md | 25 + static/usage/v8/ripple-effect/type/vue.md | 71 ++ static/usage/v8/router/basic/demo.html | 62 ++ static/usage/v8/router/basic/index.md | 11 + static/usage/v8/router/basic/javascript.md | 47 ++ static/usage/v8/searchbar/basic/angular.md | 7 + static/usage/v8/searchbar/basic/demo.html | 32 + static/usage/v8/searchbar/basic/index.md | 13 + static/usage/v8/searchbar/basic/javascript.md | 7 + static/usage/v8/searchbar/basic/react.md | 17 + static/usage/v8/searchbar/basic/vue.md | 18 + .../v8/searchbar/cancel-button/angular.md | 11 + .../v8/searchbar/cancel-button/demo.html | 36 + .../usage/v8/searchbar/cancel-button/index.md | 13 + .../v8/searchbar/cancel-button/javascript.md | 11 + .../usage/v8/searchbar/cancel-button/react.md | 22 + .../usage/v8/searchbar/cancel-button/vue.md | 26 + .../v8/searchbar/clear-button/angular.md | 6 + .../usage/v8/searchbar/clear-button/demo.html | 31 + .../usage/v8/searchbar/clear-button/index.md | 13 + .../v8/searchbar/clear-button/javascript.md | 6 + .../usage/v8/searchbar/clear-button/react.md | 17 + static/usage/v8/searchbar/clear-button/vue.md | 21 + .../angular/example_component_html.md | 9 + .../debounce/angular/example_component_ts.md | 28 + static/usage/v8/searchbar/debounce/demo.html | 73 ++ static/usage/v8/searchbar/debounce/index.md | 26 + .../usage/v8/searchbar/debounce/javascript.md | 48 ++ static/usage/v8/searchbar/debounce/react.md | 41 + static/usage/v8/searchbar/debounce/vue.md | 43 + .../usage/v8/searchbar/search-icon/angular.md | 4 + .../usage/v8/searchbar/search-icon/demo.html | 29 + .../usage/v8/searchbar/search-icon/index.md | 8 + .../v8/searchbar/search-icon/javascript.md | 4 + .../usage/v8/searchbar/search-icon/react.md | 15 + static/usage/v8/searchbar/search-icon/vue.md | 19 + .../v8/searchbar/theming/colors/angular.md | 12 + .../v8/searchbar/theming/colors/demo.html | 37 + .../v8/searchbar/theming/colors/index.md | 13 + .../v8/searchbar/theming/colors/javascript.md | 12 + .../v8/searchbar/theming/colors/react.md | 22 + .../usage/v8/searchbar/theming/colors/vue.md | 23 + .../angular/example_component_css.md | 20 + .../angular/example_component_html.md | 3 + .../theming/css-properties/demo.html | 46 ++ .../searchbar/theming/css-properties/index.md | 32 + .../theming/css-properties/javascript.md | 24 + .../theming/css-properties/react/main_css.md | 20 + .../theming/css-properties/react/main_tsx.md | 11 + .../searchbar/theming/css-properties/vue.md | 35 + .../usage/v8/segment-button/basic/angular.md | 25 + .../usage/v8/segment-button/basic/demo.html | 54 ++ static/usage/v8/segment-button/basic/index.md | 8 + .../v8/segment-button/basic/javascript.md | 25 + static/usage/v8/segment-button/basic/react.md | 35 + static/usage/v8/segment-button/basic/vue.md | 36 + .../usage/v8/segment-button/layout/angular.md | 73 ++ .../usage/v8/segment-button/layout/demo.html | 102 +++ .../usage/v8/segment-button/layout/index.md | 13 + .../v8/segment-button/layout/javascript.md | 73 ++ .../usage/v8/segment-button/layout/react.md | 84 ++ static/usage/v8/segment-button/layout/vue.md | 88 +++ .../angular/example_component_css.md | 19 + .../angular/example_component_html.md | 13 + .../theming/css-properties/demo.html | 57 ++ .../theming/css-properties/index.md | 32 + .../theming/css-properties/javascript.md | 33 + .../theming/css-properties/react/main_css.md | 19 + .../theming/css-properties/react/main_tsx.md | 23 + .../theming/css-properties/vue.md | 44 ++ .../angular/example_component_css.md | 31 + .../angular/example_component_html.md | 13 + .../theming/css-shadow-parts/demo.html | 69 ++ .../theming/css-shadow-parts/index.md | 32 + .../theming/css-shadow-parts/javascript.md | 45 ++ .../css-shadow-parts/react/main_css.md | 31 + .../css-shadow-parts/react/main_tsx.md | 23 + .../theming/css-shadow-parts/vue.md | 56 ++ static/usage/v8/segment/basic/angular.md | 19 + static/usage/v8/segment/basic/demo.html | 48 ++ static/usage/v8/segment/basic/index.md | 8 + static/usage/v8/segment/basic/javascript.md | 19 + static/usage/v8/segment/basic/react.md | 29 + static/usage/v8/segment/basic/vue.md | 30 + static/usage/v8/segment/scrollable/angular.md | 34 + static/usage/v8/segment/scrollable/demo.html | 64 ++ static/usage/v8/segment/scrollable/index.md | 13 + .../usage/v8/segment/scrollable/javascript.md | 34 + static/usage/v8/segment/scrollable/react.md | 43 + static/usage/v8/segment/scrollable/vue.md | 60 ++ .../v8/segment/theming/colors/angular.md | 82 ++ .../usage/v8/segment/theming/colors/demo.html | 111 +++ .../usage/v8/segment/theming/colors/index.md | 13 + .../v8/segment/theming/colors/javascript.md | 82 ++ .../usage/v8/segment/theming/colors/react.md | 92 +++ static/usage/v8/segment/theming/colors/vue.md | 93 +++ .../angular/example_component_css.md | 5 + .../angular/example_component_html.md | 10 + .../segment/theming/css-properties/demo.html | 40 + .../segment/theming/css-properties/index.md | 32 + .../theming/css-properties/javascript.md | 16 + .../theming/css-properties/react/main_css.md | 5 + .../theming/css-properties/react/main_tsx.md | 22 + .../v8/segment/theming/css-properties/vue.md | 27 + .../basic/multiple-selection/angular.md | 11 + .../select/basic/multiple-selection/demo.html | 30 + .../select/basic/multiple-selection/index.md | 13 + .../basic/multiple-selection/javascript.md | 11 + .../select/basic/multiple-selection/react.md | 18 + .../v8/select/basic/multiple-selection/vue.md | 22 + .../angular/example_component_html.md | 17 + .../angular/example_component_ts.md | 21 + .../basic/responding-to-interaction/demo.html | 46 ++ .../basic/responding-to-interaction/index.md | 26 + .../responding-to-interaction/javascript.md | 27 + .../basic/responding-to-interaction/react.md | 26 + .../basic/responding-to-interaction/vue.md | 39 + .../select/basic/single-selection/angular.md | 11 + .../select/basic/single-selection/demo.html | 30 + .../v8/select/basic/single-selection/index.md | 13 + .../basic/single-selection/javascript.md | 11 + .../v8/select/basic/single-selection/react.md | 18 + .../v8/select/basic/single-selection/vue.md | 22 + .../customization/button-text/angular.md | 23 + .../customization/button-text/demo.html | 47 ++ .../select/customization/button-text/index.md | 13 + .../customization/button-text/javascript.md | 23 + .../select/customization/button-text/react.md | 30 + .../select/customization/button-text/vue.md | 34 + .../custom-toggle-icons/angular.md | 17 + .../custom-toggle-icons/demo.html | 36 + .../custom-toggle-icons/index.md | 13 + .../custom-toggle-icons/javascript.md | 17 + .../custom-toggle-icons/react.md | 26 + .../customization/custom-toggle-icons/vue.md | 32 + .../angular/example_component_css.md | 13 + .../angular/example_component_html.md | 30 + .../angular/example_component_ts.md | 10 + .../icon-flip-behavior/demo.html | 63 ++ .../customization/icon-flip-behavior/index.md | 34 + .../icon-flip-behavior/javascript.md | 44 ++ .../icon-flip-behavior/react/main_css.md | 13 + .../icon-flip-behavior/react/main_tsx.md | 41 + .../customization/icon-flip-behavior/vue.md | 59 ++ .../angular/example_component_html.md | 32 + .../angular/example_component_ts.md | 27 + .../customization/interface-options/demo.html | 83 ++ .../customization/interface-options/index.md | 25 + .../interface-options/javascript.md | 53 ++ .../customization/interface-options/react.md | 57 ++ .../customization/interface-options/vue.md | 73 ++ .../angular/example_component_css.md | 27 + .../angular/example_component_html.md | 7 + .../angular/example_component_ts.md | 10 + .../customization/styling-select/demo.html | 58 ++ .../customization/styling-select/index.md | 34 + .../styling-select/javascript.md | 35 + .../styling-select/react/main_css.md | 27 + .../styling-select/react/main_tsx.md | 17 + .../customization/styling-select/vue.md | 46 ++ static/usage/v8/select/fill/angular.md | 15 + static/usage/v8/select/fill/demo.html | 42 + static/usage/v8/select/fill/index.md | 14 + static/usage/v8/select/fill/javascript.md | 15 + static/usage/v8/select/fill/react.md | 25 + static/usage/v8/select/fill/vue.md | 26 + .../select/interfaces/action-sheet/angular.md | 11 + .../select/interfaces/action-sheet/demo.html | 30 + .../select/interfaces/action-sheet/index.md | 13 + .../interfaces/action-sheet/javascript.md | 11 + .../select/interfaces/action-sheet/react.md | 18 + .../v8/select/interfaces/action-sheet/vue.md | 22 + .../v8/select/interfaces/popover/angular.md | 11 + .../v8/select/interfaces/popover/demo.html | 30 + .../v8/select/interfaces/popover/index.md | 13 + .../select/interfaces/popover/javascript.md | 11 + .../v8/select/interfaces/popover/react.md | 18 + .../usage/v8/select/interfaces/popover/vue.md | 22 + static/usage/v8/select/justify/angular.md | 23 + static/usage/v8/select/justify/demo.html | 49 ++ static/usage/v8/select/justify/index.md | 13 + static/usage/v8/select/justify/javascript.md | 23 + static/usage/v8/select/justify/react.md | 33 + static/usage/v8/select/justify/vue.md | 36 + .../v8/select/label-placement/angular.md | 35 + .../usage/v8/select/label-placement/demo.html | 60 ++ .../usage/v8/select/label-placement/index.md | 13 + .../v8/select/label-placement/javascript.md | 35 + .../usage/v8/select/label-placement/react.md | 43 + static/usage/v8/select/label-placement/vue.md | 46 ++ static/usage/v8/select/label-slot/angular.md | 12 + static/usage/v8/select/label-slot/demo.html | 31 + static/usage/v8/select/label-slot/index.md | 13 + .../usage/v8/select/label-slot/javascript.md | 12 + static/usage/v8/select/label-slot/react.md | 22 + static/usage/v8/select/label-slot/vue.md | 23 + static/usage/v8/select/migration/index.md | 140 ++++ .../v8/select/no-visible-label/angular.md | 11 + .../v8/select/no-visible-label/demo.html | 30 + .../usage/v8/select/no-visible-label/index.md | 13 + .../v8/select/no-visible-label/javascript.md | 11 + .../usage/v8/select/no-visible-label/react.md | 19 + .../usage/v8/select/no-visible-label/vue.md | 22 + .../angular/example_component_html.md | 15 + .../angular/example_component_ts.md | 43 + .../multiple-selection/demo.html | 72 ++ .../multiple-selection/index.md | 26 + .../multiple-selection/javascript.md | 53 ++ .../multiple-selection/react.md | 63 ++ .../multiple-selection/vue.md | 63 ++ .../angular/example_component_html.md | 14 + .../angular/example_component_ts.md | 35 + .../using-comparewith/demo.html | 64 ++ .../using-comparewith/index.md | 26 + .../using-comparewith/javascript.md | 46 ++ .../using-comparewith/react.md | 54 ++ .../using-comparewith/vue.md | 54 ++ .../typeahead/angular/angular_types_ts.md | 6 + .../select/typeahead/angular/app_module_ts.md | 19 + .../angular/example_component_html.md | 23 + .../typeahead/angular/example_component_ts.md | 59 ++ .../angular/modal-example_component_html.md | 26 + .../angular/modal-example_component_ts.md | 82 ++ static/usage/v8/select/typeahead/demo.html | 220 ++++++ static/usage/v8/select/typeahead/index.md | 52 ++ .../usage/v8/select/typeahead/javascript.md | 205 +++++ .../v8/select/typeahead/react/main_tsx.md | 83 ++ .../select/typeahead/react/react_types_ts.md | 6 + .../react/typeahead_component_tsx.md | 122 +++ .../v8/select/typeahead/vue/example_vue.md | 83 ++ .../typeahead/vue/typeahead_component_vue.md | 135 ++++ .../v8/select/typeahead/vue/vue_types_ts.md | 6 + .../basic/angular/example_component_html.md | 39 + .../basic/angular/example_component_ts.md | 12 + static/usage/v8/skeleton-text/basic/demo.html | 89 +++ static/usage/v8/skeleton-text/basic/index.md | 25 + .../v8/skeleton-text/basic/javascript.md | 60 ++ static/usage/v8/skeleton-text/basic/react.md | 61 ++ static/usage/v8/skeleton-text/basic/vue.md | 78 ++ .../angular/example_component_css.md | 7 + .../angular/example_component_html.md | 23 + .../theming/css-properties/demo.html | 58 ++ .../theming/css-properties/index.md | 33 + .../theming/css-properties/javascript.md | 31 + .../theming/css-properties/react/main_css.md | 7 + .../theming/css-properties/react/main_tsx.md | 33 + .../theming/css-properties/vue.md | 49 ++ static/usage/v8/spinner/basic/angular.md | 51 ++ static/usage/v8/spinner/basic/demo.html | 77 ++ static/usage/v8/spinner/basic/index.md | 13 + static/usage/v8/spinner/basic/javascript.md | 51 ++ static/usage/v8/spinner/basic/react.md | 61 ++ static/usage/v8/spinner/basic/vue.md | 62 ++ .../v8/spinner/theming/colors/angular.md | 12 + .../usage/v8/spinner/theming/colors/demo.html | 31 + .../usage/v8/spinner/theming/colors/index.md | 13 + .../v8/spinner/theming/colors/javascript.md | 12 + .../usage/v8/spinner/theming/colors/react.md | 22 + static/usage/v8/spinner/theming/colors/vue.md | 23 + .../angular/example_component_css.md | 5 + .../angular/example_component_html.md | 3 + .../spinner/theming/css-properties/demo.html | 28 + .../spinner/theming/css-properties/index.md | 32 + .../theming/css-properties/javascript.md | 9 + .../spinner/theming/css-properties/react.md | 9 + .../theming/css-properties/react/main_css.md | 5 + .../theming/css-properties/react/main_tsx.md | 15 + .../v8/spinner/theming/css-properties/vue.md | 20 + .../resizing/angular/example_component_css.md | 6 + .../angular/example_component_html.md | 3 + .../v8/spinner/theming/resizing/demo.html | 29 + .../v8/spinner/theming/resizing/index.md | 32 + .../v8/spinner/theming/resizing/javascript.md | 10 + .../v8/spinner/theming/resizing/react.md | 9 + .../theming/resizing/react/main_css.md | 6 + .../theming/resizing/react/main_tsx.md | 15 + .../usage/v8/spinner/theming/resizing/vue.md | 21 + static/usage/v8/split-pane/basic/angular.md | 21 + static/usage/v8/split-pane/basic/demo.html | 36 + static/usage/v8/split-pane/basic/index.md | 13 + .../usage/v8/split-pane/basic/javascript.md | 21 + static/usage/v8/split-pane/basic/react.md | 29 + static/usage/v8/split-pane/basic/vue.md | 32 + .../angular/example_component_css.md | 8 + .../angular/example_component_html.md | 21 + .../theming/css-properties/demo.html | 44 ++ .../theming/css-properties/index.md | 33 + .../theming/css-properties/javascript.md | 30 + .../theming/css-properties/react/main_css.md | 8 + .../theming/css-properties/react/main_tsx.md | 31 + .../split-pane/theming/css-properties/vue.md | 41 + .../tabs/router/angular/app_component_html.md | 3 + .../v8/tabs/router/angular/app_module_ts.md | 19 + .../router/angular/app_routing_module_ts.md | 42 + .../router/angular/example_component_html.md | 22 + .../v8/tabs/router/angular/global_css.md | 8 + .../angular/home_page_component_html.md | 10 + .../router/angular/home_page_component_ts.md | 9 + .../router/angular/home_page_module_ts.md | 14 + .../angular/library_page_component_html.md | 10 + .../angular/library_page_component_ts.md | 9 + .../router/angular/library_page_module_ts.md | 14 + .../angular/radio_page_component_html.md | 10 + .../router/angular/radio_page_component_ts.md | 9 + .../router/angular/radio_page_module_ts.md | 14 + .../angular/search_page_component_html.md | 10 + .../angular/search_page_component_ts.md | 9 + .../router/angular/search_page_module_ts.md | 14 + static/usage/v8/tabs/router/demo.html | 114 +++ static/usage/v8/tabs/router/index.md | 93 +++ static/usage/v8/tabs/router/javascript.md | 101 +++ .../v8/tabs/router/react/home_page_tsx.md | 28 + .../v8/tabs/router/react/library_page_tsx.md | 28 + static/usage/v8/tabs/router/react/main_tsx.md | 58 ++ .../v8/tabs/router/react/radio_page_tsx.md | 28 + .../v8/tabs/router/react/search_page_tsx.md | 28 + static/usage/v8/tabs/router/vue.md | 81 ++ static/usage/v8/tabs/router/vue/app_vue.md | 20 + .../usage/v8/tabs/router/vue/example_vue.md | 48 ++ .../usage/v8/tabs/router/vue/home_page_vue.md | 31 + .../v8/tabs/router/vue/library_page_vue.md | 31 + static/usage/v8/tabs/router/vue/main_ts.md | 32 + .../v8/tabs/router/vue/radio_page_vue.md | 31 + static/usage/v8/tabs/router/vue/router_ts.md | 46 ++ .../v8/tabs/router/vue/search_page_vue.md | 31 + static/usage/v8/text/basic/angular.md | 21 + static/usage/v8/text/basic/demo.html | 59 ++ static/usage/v8/text/basic/index.md | 8 + static/usage/v8/text/basic/javascript.md | 21 + static/usage/v8/text/basic/react.md | 35 + static/usage/v8/text/basic/vue.md | 38 + static/usage/v8/textarea/autogrow/angular.md | 10 + static/usage/v8/textarea/autogrow/demo.html | 41 + static/usage/v8/textarea/autogrow/index.md | 13 + .../usage/v8/textarea/autogrow/javascript.md | 10 + static/usage/v8/textarea/autogrow/react.md | 16 + static/usage/v8/textarea/autogrow/vue.md | 21 + static/usage/v8/textarea/basic/angular.md | 13 + static/usage/v8/textarea/basic/demo.html | 38 + static/usage/v8/textarea/basic/index.md | 13 + static/usage/v8/textarea/basic/javascript.md | 13 + static/usage/v8/textarea/basic/react.md | 20 + static/usage/v8/textarea/basic/vue.md | 24 + .../v8/textarea/clear-on-edit/angular.md | 6 + .../usage/v8/textarea/clear-on-edit/demo.html | 29 + .../usage/v8/textarea/clear-on-edit/index.md | 13 + .../v8/textarea/clear-on-edit/javascript.md | 6 + .../usage/v8/textarea/clear-on-edit/react.md | 13 + static/usage/v8/textarea/clear-on-edit/vue.md | 17 + .../counter/angular/example_component_html.md | 11 + .../counter/angular/example_component_ts.md | 13 + static/usage/v8/textarea/counter/demo.html | 44 ++ static/usage/v8/textarea/counter/index.md | 25 + .../usage/v8/textarea/counter/javascript.md | 16 + static/usage/v8/textarea/counter/react.md | 21 + static/usage/v8/textarea/counter/vue.md | 27 + static/usage/v8/textarea/fill/angular.md | 7 + static/usage/v8/textarea/fill/demo.html | 44 ++ static/usage/v8/textarea/fill/index.md | 14 + static/usage/v8/textarea/fill/javascript.md | 12 + static/usage/v8/textarea/fill/react.md | 21 + static/usage/v8/textarea/fill/vue.md | 23 + .../usage/v8/textarea/helper-error/angular.md | 11 + .../usage/v8/textarea/helper-error/demo.html | 61 ++ .../usage/v8/textarea/helper-error/index.md | 18 + .../v8/textarea/helper-error/javascript.md | 37 + .../usage/v8/textarea/helper-error/react.md | 49 ++ static/usage/v8/textarea/helper-error/vue.md | 47 ++ .../v8/textarea/label-placement/angular.md | 16 + .../v8/textarea/label-placement/demo.html | 41 + .../v8/textarea/label-placement/index.md | 13 + .../v8/textarea/label-placement/javascript.md | 16 + .../v8/textarea/label-placement/react.md | 24 + .../usage/v8/textarea/label-placement/vue.md | 27 + .../usage/v8/textarea/label-slot/angular.md | 9 + static/usage/v8/textarea/label-slot/demo.html | 28 + static/usage/v8/textarea/label-slot/index.md | 8 + .../v8/textarea/label-slot/javascript.md | 9 + static/usage/v8/textarea/label-slot/react.md | 19 + static/usage/v8/textarea/label-slot/vue.md | 20 + static/usage/v8/textarea/migration/index.md | 248 ++++++ .../v8/textarea/no-visible-label/angular.md | 7 + .../v8/textarea/no-visible-label/demo.html | 26 + .../v8/textarea/no-visible-label/index.md | 8 + .../textarea/no-visible-label/javascript.md | 7 + .../v8/textarea/no-visible-label/react.md | 15 + .../usage/v8/textarea/no-visible-label/vue.md | 18 + .../theming/angular/example_component_css.md | 10 + .../theming/angular/example_component_html.md | 10 + .../v8/textarea/theming/angular/global_css.md | 14 + static/usage/v8/textarea/theming/demo.html | 50 ++ static/usage/v8/textarea/theming/index.md | 35 + .../usage/v8/textarea/theming/javascript.md | 28 + .../v8/textarea/theming/react/main_css.md | 17 + .../v8/textarea/theming/react/main_tsx.md | 20 + static/usage/v8/textarea/theming/vue.md | 39 + .../angular/example_component_html.md | 45 ++ .../angular/example_component_ts.md | 24 + .../automatic-dark-mode/angular/global_css.md | 25 + .../v8/theming/automatic-dark-mode/demo.html | 104 +++ .../v8/theming/automatic-dark-mode/index.md | 50 ++ .../theming/automatic-dark-mode/javascript.md | 86 ++ .../automatic-dark-mode/react/main_css.md | 25 + .../automatic-dark-mode/react/main_tsx.md | 93 +++ .../theme/variables_css.md | 160 ++++ .../v8/theming/automatic-dark-mode/vue.md | 129 +++ .../angular/example_component_html.md | 53 ++ .../angular/example_component_ts.md | 39 + .../manual-dark-mode/angular/global_css.md | 25 + .../v8/theming/manual-dark-mode/demo.html | 136 ++++ .../v8/theming/manual-dark-mode/index.md | 50 ++ .../v8/theming/manual-dark-mode/javascript.md | 113 +++ .../manual-dark-mode/react/main_css.md | 25 + .../manual-dark-mode/react/main_tsx.md | 117 +++ .../manual-dark-mode/theme/variables_css.md | 160 ++++ .../usage/v8/theming/manual-dark-mode/vue.md | 162 ++++ static/usage/v8/thumbnail/basic/angular.md | 5 + static/usage/v8/thumbnail/basic/demo.html | 24 + static/usage/v8/thumbnail/basic/index.md | 8 + static/usage/v8/thumbnail/basic/javascript.md | 5 + static/usage/v8/thumbnail/basic/react.md | 15 + static/usage/v8/thumbnail/basic/vue.md | 16 + static/usage/v8/thumbnail/item/angular.md | 8 + static/usage/v8/thumbnail/item/demo.html | 27 + static/usage/v8/thumbnail/item/index.md | 8 + static/usage/v8/thumbnail/item/javascript.md | 8 + static/usage/v8/thumbnail/item/react.md | 18 + static/usage/v8/thumbnail/item/vue.md | 19 + .../angular/example_component_css.md | 6 + .../angular/example_component_html.md | 5 + .../theming/css-properties/demo.html | 31 + .../thumbnail/theming/css-properties/index.md | 33 + .../theming/css-properties/javascript.md | 12 + .../theming/css-properties/react/main_css.md | 6 + .../theming/css-properties/react/main_tsx.md | 17 + .../thumbnail/theming/css-properties/vue.md | 23 + static/usage/v8/title/basic/angular.md | 7 + static/usage/v8/title/basic/demo.html | 22 + static/usage/v8/title/basic/index.md | 14 + static/usage/v8/title/basic/javascript.md | 7 + static/usage/v8/title/basic/react.md | 15 + static/usage/v8/title/basic/vue.md | 18 + .../collapsible-large-title/basic/angular.md | 39 + .../collapsible-large-title/basic/demo.html | 54 ++ .../collapsible-large-title/basic/index.md | 16 + .../basic/javascript.md | 39 + .../collapsible-large-title/basic/react.md | 49 ++ .../collapsible-large-title/basic/vue.md | 50 ++ .../buttons/angular.md | 45 ++ .../collapsible-large-title/buttons/demo.html | 60 ++ .../collapsible-large-title/buttons/index.md | 15 + .../buttons/javascript.md | 45 ++ .../collapsible-large-title/buttons/react.md | 55 ++ .../collapsible-large-title/buttons/vue.md | 56 ++ .../angular/example_component_html.md | 37 + .../css-properties/angular/global_css.md | 14 + .../v8/title/theming/css-properties/demo.html | 67 ++ .../v8/title/theming/css-properties/index.md | 34 + .../theming/css-properties/javascript.md | 52 ++ .../theming/css-properties/react/main_css.md | 14 + .../theming/css-properties/react/main_tsx.md | 49 ++ .../v8/title/theming/css-properties/vue.md | 62 ++ .../buttons/angular/example_component_html.md | 10 + .../buttons/angular/example_component_ts.md | 31 + static/usage/v8/toast/buttons/demo.html | 54 ++ static/usage/v8/toast/buttons/index.md | 26 + static/usage/v8/toast/buttons/javascript.md | 30 + static/usage/v8/toast/buttons/react.md | 35 + static/usage/v8/toast/buttons/vue.md | 50 ++ static/usage/v8/toast/icon/angular.md | 4 + static/usage/v8/toast/icon/demo.html | 28 + static/usage/v8/toast/icon/index.md | 18 + static/usage/v8/toast/icon/javascript.md | 4 + static/usage/v8/toast/icon/react.md | 15 + static/usage/v8/toast/icon/vue.md | 20 + static/usage/v8/toast/inline/basic/angular.md | 12 + static/usage/v8/toast/inline/basic/demo.html | 27 + static/usage/v8/toast/inline/basic/index.md | 19 + .../usage/v8/toast/inline/basic/javascript.md | 12 + static/usage/v8/toast/inline/basic/react.md | 25 + static/usage/v8/toast/inline/basic/vue.md | 30 + .../is-open/angular/example_component_html.md | 16 + .../is-open/angular/example_component_ts.md | 15 + .../usage/v8/toast/inline/is-open/demo.html | 33 + static/usage/v8/toast/inline/is-open/index.md | 26 + .../v8/toast/inline/is-open/javascript.md | 18 + static/usage/v8/toast/inline/is-open/react.md | 31 + static/usage/v8/toast/inline/is-open/vue.md | 35 + .../layout/angular/example_component_html.md | 17 + .../layout/angular/example_component_ts.md | 15 + static/usage/v8/toast/layout/demo.html | 49 ++ static/usage/v8/toast/layout/index.md | 25 + static/usage/v8/toast/layout/javascript.md | 27 + static/usage/v8/toast/layout/react.md | 35 + static/usage/v8/toast/layout/vue.md | 37 + .../usage/v8/toast/position-anchor/angular.md | 33 + .../usage/v8/toast/position-anchor/demo.html | 57 ++ .../usage/v8/toast/position-anchor/index.md | 19 + .../v8/toast/position-anchor/javascript.md | 33 + .../usage/v8/toast/position-anchor/react.md | 43 + static/usage/v8/toast/position-anchor/vue.md | 52 ++ .../angular/example_component_html.md | 5 + .../angular/example_component_ts.md | 22 + .../v8/toast/presenting/controller/demo.html | 52 ++ .../v8/toast/presenting/controller/index.md | 25 + .../toast/presenting/controller/javascript.md | 17 + .../v8/toast/presenting/controller/react.md | 31 + .../v8/toast/presenting/controller/vue.md | 26 + .../theming/angular/example_component_html.md | 10 + .../theming/angular/example_component_ts.md | 18 + .../v8/toast/theming/angular/global_css.md | 17 + static/usage/v8/toast/theming/demo.html | 61 ++ static/usage/v8/toast/theming/index.md | 34 + static/usage/v8/toast/theming/javascript.md | 32 + .../usage/v8/toast/theming/react/main_css.md | 17 + .../usage/v8/toast/theming/react/main_tsx.md | 27 + static/usage/v8/toast/theming/vue.md | 48 ++ static/usage/v8/toggle/alignment/angular.md | 4 + static/usage/v8/toggle/alignment/demo.html | 25 + static/usage/v8/toggle/alignment/index.md | 17 + .../usage/v8/toggle/alignment/javascript.md | 4 + static/usage/v8/toggle/alignment/react.md | 20 + static/usage/v8/toggle/alignment/vue.md | 17 + static/usage/v8/toggle/basic/angular.md | 6 + static/usage/v8/toggle/basic/demo.html | 27 + static/usage/v8/toggle/basic/index.md | 8 + static/usage/v8/toggle/basic/javascript.md | 6 + static/usage/v8/toggle/basic/react.md | 24 + static/usage/v8/toggle/basic/vue.md | 17 + static/usage/v8/toggle/justify/angular.md | 13 + static/usage/v8/toggle/justify/demo.html | 38 + static/usage/v8/toggle/justify/index.md | 8 + static/usage/v8/toggle/justify/javascript.md | 13 + static/usage/v8/toggle/justify/react.md | 21 + static/usage/v8/toggle/justify/vue.md | 24 + .../v8/toggle/label-placement/angular.md | 6 + .../usage/v8/toggle/label-placement/demo.html | 27 + .../usage/v8/toggle/label-placement/index.md | 13 + .../v8/toggle/label-placement/javascript.md | 6 + .../usage/v8/toggle/label-placement/react.md | 22 + static/usage/v8/toggle/label-placement/vue.md | 17 + static/usage/v8/toggle/list/angular.md | 13 + static/usage/v8/toggle/list/demo.html | 32 + static/usage/v8/toggle/list/index.md | 8 + static/usage/v8/toggle/list/javascript.md | 13 + static/usage/v8/toggle/list/react.md | 21 + static/usage/v8/toggle/list/vue.md | 24 + static/usage/v8/toggle/migration/index.md | 188 +++++ static/usage/v8/toggle/on-off/angular.md | 3 + static/usage/v8/toggle/on-off/demo.html | 22 + static/usage/v8/toggle/on-off/index.md | 8 + static/usage/v8/toggle/on-off/javascript.md | 3 + static/usage/v8/toggle/on-off/react.md | 9 + static/usage/v8/toggle/on-off/vue.md | 14 + .../usage/v8/toggle/theming/colors/angular.md | 11 + .../usage/v8/toggle/theming/colors/demo.html | 30 + .../usage/v8/toggle/theming/colors/index.md | 8 + .../v8/toggle/theming/colors/javascript.md | 11 + .../usage/v8/toggle/theming/colors/react.md | 21 + static/usage/v8/toggle/theming/colors/vue.md | 22 + .../angular/example_component_css.md | 27 + .../angular/example_component_html.md | 4 + .../toggle/theming/css-properties/demo.html | 50 ++ .../v8/toggle/theming/css-properties/index.md | 32 + .../theming/css-properties/javascript.md | 32 + .../theming/css-properties/react/main_css.md | 27 + .../theming/css-properties/react/main_tsx.md | 16 + .../v8/toggle/theming/css-properties/vue.md | 43 + .../angular/example_component_css.md | 34 + .../angular/example_component_html.md | 4 + .../toggle/theming/css-shadow-parts/demo.html | 58 ++ .../toggle/theming/css-shadow-parts/index.md | 32 + .../theming/css-shadow-parts/javascript.md | 39 + .../css-shadow-parts/react/main_css.md | 34 + .../css-shadow-parts/react/main_tsx.md | 16 + .../v8/toggle/theming/css-shadow-parts/vue.md | 50 ++ static/usage/v8/toolbar/basic/angular.md | 13 + static/usage/v8/toolbar/basic/demo.html | 28 + static/usage/v8/toolbar/basic/index.md | 14 + static/usage/v8/toolbar/basic/javascript.md | 13 + static/usage/v8/toolbar/basic/react.md | 23 + static/usage/v8/toolbar/basic/vue.md | 24 + static/usage/v8/toolbar/buttons/angular.md | 84 ++ static/usage/v8/toolbar/buttons/demo.html | 110 +++ static/usage/v8/toolbar/buttons/index.md | 13 + static/usage/v8/toolbar/buttons/javascript.md | 84 ++ static/usage/v8/toolbar/buttons/react.md | 95 +++ static/usage/v8/toolbar/buttons/vue.md | 99 +++ .../usage/v8/toolbar/progress-bars/angular.md | 8 + .../usage/v8/toolbar/progress-bars/demo.html | 23 + .../usage/v8/toolbar/progress-bars/index.md | 14 + .../v8/toolbar/progress-bars/javascript.md | 8 + .../usage/v8/toolbar/progress-bars/react.md | 16 + static/usage/v8/toolbar/progress-bars/vue.md | 19 + static/usage/v8/toolbar/searchbars/angular.md | 10 + static/usage/v8/toolbar/searchbars/demo.html | 25 + static/usage/v8/toolbar/searchbars/index.md | 14 + .../usage/v8/toolbar/searchbars/javascript.md | 10 + static/usage/v8/toolbar/searchbars/react.md | 18 + static/usage/v8/toolbar/searchbars/vue.md | 21 + static/usage/v8/toolbar/segments/angular.md | 14 + static/usage/v8/toolbar/segments/demo.html | 29 + static/usage/v8/toolbar/segments/index.md | 14 + .../usage/v8/toolbar/segments/javascript.md | 14 + static/usage/v8/toolbar/segments/react.md | 22 + static/usage/v8/toolbar/segments/vue.md | 25 + .../v8/toolbar/theming/colors/angular.md | 32 + .../usage/v8/toolbar/theming/colors/demo.html | 58 ++ .../usage/v8/toolbar/theming/colors/index.md | 13 + .../v8/toolbar/theming/colors/javascript.md | 32 + .../usage/v8/toolbar/theming/colors/react.md | 42 + static/usage/v8/toolbar/theming/colors/vue.md | 43 + .../angular/example_component_css.md | 14 + .../angular/example_component_html.md | 5 + .../toolbar/theming/css-properties/demo.html | 44 ++ .../toolbar/theming/css-properties/index.md | 33 + .../theming/css-properties/javascript.md | 20 + .../theming/css-properties/react/main_css.md | 14 + .../theming/css-properties/react/main_tsx.md | 15 + .../v8/toolbar/theming/css-properties/vue.md | 31 + versioned_docs/version-v7/README.md | 17 + .../version-v7/angular/build-options.md | 671 ++++++++++++++++ .../version-v7/angular/lifecycle.md | 103 +++ .../version-v7/angular/navigation.md | 497 ++++++++++++ versioned_docs/version-v7/angular/overview.md | 46 ++ .../version-v7/angular/performance.md | 73 ++ versioned_docs/version-v7/angular/platform.md | 246 ++++++ versioned_docs/version-v7/angular/pwa.md | 166 ++++ versioned_docs/version-v7/angular/slides.md | 366 +++++++++ versioned_docs/version-v7/angular/storage.md | 32 + versioned_docs/version-v7/angular/testing.md | 593 ++++++++++++++ .../version-v7/angular/virtual-scroll.md | 133 ++++ .../version-v7/angular/your-first-app.md | 176 +++++ .../angular/your-first-app/2-taking-photos.md | 134 ++++ .../angular/your-first-app/3-saving-photos.md | 81 ++ .../your-first-app/4-loading-photos.md | 69 ++ .../angular/your-first-app/5-adding-mobile.md | 117 +++ .../your-first-app/6-deploying-mobile.md | 114 +++ .../angular/your-first-app/7-live-reload.md | 114 +++ .../angular/your-first-app/8-distribute.md | 100 +++ versioned_docs/version-v7/api.md | 17 + .../version-v7/api/accordion-group.md | 63 ++ versioned_docs/version-v7/api/accordion.md | 220 ++++++ versioned_docs/version-v7/api/action-sheet.md | 307 ++++++++ versioned_docs/version-v7/api/alert.md | 356 +++++++++ versioned_docs/version-v7/api/app.md | 55 ++ versioned_docs/version-v7/api/avatar.md | 76 ++ versioned_docs/version-v7/api/back-button.md | 66 ++ versioned_docs/version-v7/api/backdrop.md | 58 ++ versioned_docs/version-v7/api/badge.md | 68 ++ versioned_docs/version-v7/api/breadcrumb.md | 63 ++ versioned_docs/version-v7/api/breadcrumbs.md | 108 +++ versioned_docs/version-v7/api/button.md | 124 +++ versioned_docs/version-v7/api/buttons.md | 93 +++ versioned_docs/version-v7/api/card-content.md | 40 + versioned_docs/version-v7/api/card-header.md | 42 + .../version-v7/api/card-subtitle.md | 42 + versioned_docs/version-v7/api/card-title.md | 50 ++ versioned_docs/version-v7/api/card.md | 90 +++ versioned_docs/version-v7/api/checkbox.md | 144 ++++ versioned_docs/version-v7/api/chip.md | 74 ++ versioned_docs/version-v7/api/col.md | 54 ++ versioned_docs/version-v7/api/content.md | 182 +++++ .../version-v7/api/datetime-button.md | 82 ++ versioned_docs/version-v7/api/datetime.md | 488 ++++++++++++ versioned_docs/version-v7/api/fab-button.md | 52 ++ versioned_docs/version-v7/api/fab-list.md | 42 + versioned_docs/version-v7/api/fab.md | 130 +++ versioned_docs/version-v7/api/footer.md | 84 ++ versioned_docs/version-v7/api/grid.md | 217 +++++ versioned_docs/version-v7/api/header.md | 94 +++ versioned_docs/version-v7/api/icon.md | 43 + versioned_docs/version-v7/api/img.md | 54 ++ .../version-v7/api/infinite-scroll-content.md | 40 + .../version-v7/api/infinite-scroll.md | 119 +++ versioned_docs/version-v7/api/input.md | 233 ++++++ versioned_docs/version-v7/api/item-divider.md | 68 ++ versioned_docs/version-v7/api/item-group.md | 58 ++ versioned_docs/version-v7/api/item-option.md | 50 ++ versioned_docs/version-v7/api/item-options.md | 55 ++ versioned_docs/version-v7/api/item-sliding.md | 82 ++ versioned_docs/version-v7/api/item.md | 382 +++++++++ versioned_docs/version-v7/api/label.md | 70 ++ versioned_docs/version-v7/api/list-header.md | 76 ++ versioned_docs/version-v7/api/list.md | 71 ++ versioned_docs/version-v7/api/loading.md | 122 +++ versioned_docs/version-v7/api/menu-button.md | 50 ++ versioned_docs/version-v7/api/menu-toggle.md | 52 ++ versioned_docs/version-v7/api/menu.md | 111 +++ versioned_docs/version-v7/api/modal.md | 318 ++++++++ versioned_docs/version-v7/api/nav-link.md | 50 ++ versioned_docs/version-v7/api/nav.md | 74 ++ versioned_docs/version-v7/api/note.md | 74 ++ versioned_docs/version-v7/api/picker.md | 155 ++++ versioned_docs/version-v7/api/popover.md | 262 +++++++ versioned_docs/version-v7/api/progress-bar.md | 100 +++ versioned_docs/version-v7/api/radio-group.md | 67 ++ versioned_docs/version-v7/api/radio.md | 138 ++++ versioned_docs/version-v7/api/range.md | 225 ++++++ .../version-v7/api/refresher-content.md | 40 + versioned_docs/version-v7/api/refresher.md | 123 +++ .../version-v7/api/reorder-group.md | 71 ++ versioned_docs/version-v7/api/reorder.md | 104 +++ .../version-v7/api/ripple-effect.md | 72 ++ .../version-v7/api/route-redirect.md | 118 +++ versioned_docs/version-v7/api/route.md | 270 +++++++ versioned_docs/version-v7/api/router-link.md | 54 ++ .../version-v7/api/router-outlet.md | 57 ++ versioned_docs/version-v7/api/router.md | 116 +++ versioned_docs/version-v7/api/row.md | 55 ++ versioned_docs/version-v7/api/searchbar.md | 143 ++++ .../version-v7/api/segment-button.md | 76 ++ versioned_docs/version-v7/api/segment.md | 123 +++ .../version-v7/api/select-option.md | 50 ++ versioned_docs/version-v7/api/select.md | 339 ++++++++ .../version-v7/api/skeleton-text.md | 62 ++ versioned_docs/version-v7/api/spinner.md | 78 ++ versioned_docs/version-v7/api/split-pane.md | 89 +++ versioned_docs/version-v7/api/tab-bar.md | 169 ++++ versioned_docs/version-v7/api/tab-button.md | 221 ++++++ versioned_docs/version-v7/api/tab.md | 54 ++ versioned_docs/version-v7/api/tabs.md | 88 +++ versioned_docs/version-v7/api/text.md | 58 ++ versioned_docs/version-v7/api/textarea.md | 187 +++++ versioned_docs/version-v7/api/thumbnail.md | 70 ++ versioned_docs/version-v7/api/title.md | 92 +++ versioned_docs/version-v7/api/toast.md | 270 +++++++ versioned_docs/version-v7/api/toggle.md | 166 ++++ versioned_docs/version-v7/api/toolbar.md | 110 +++ versioned_docs/version-v7/cli.md | 54 ++ .../version-v7/cli/commands/.gitignore | 2 + .../version-v7/cli/configuration.md | 243 ++++++ versioned_docs/version-v7/cli/livereload.md | 72 ++ .../version-v7/cli/using-a-proxy.md | 45 ++ versioned_docs/version-v7/components.md | 156 ++++ versioned_docs/version-v7/contributing/coc.md | 13 + .../contributing/how-to-contribute.md | 252 ++++++ .../core-concepts/cross-platform.md | 180 +++++ .../version-v7/core-concepts/fundamentals.md | 53 ++ .../version-v7/core-concepts/webview.md | 50 ++ .../what-are-progressive-web-apps.md | 72 ++ .../version-v7/deployment/app-store.md | 77 ++ .../version-v7/deployment/desktop-app.md | 48 ++ .../version-v7/deployment/play-store.mdx | 167 ++++ .../deployment/progressive-web-app.md | 25 + .../version-v7/developer-resources/books.md | 75 ++ .../version-v7/developer-resources/courses.md | 107 +++ .../version-v7/developer-resources/guides.md | 9 + .../creating-photo-gallery-device-storage.md | 195 +++++ .../guides/first-app-v3/intro.md | 117 +++ .../guides/first-app-v3/ios-android-camera.md | 156 ++++ .../realtime-updates-ionic-deploy.md | 193 +++++ .../guides/first-app-v3/theming.md | 47 ++ .../track-bugs-ionic-monitoring.md | 92 +++ .../creating-photo-gallery-device-storage.md | 202 +++++ .../guides/first-app-v4/intro.md | 97 +++ .../guides/first-app-v4/ios-android-camera.md | 154 ++++ .../guides/first-app-v4/theming.md | 56 ++ .../version-v7/developer-resources/posts.md | 77 ++ .../version-v7/developer-resources/tools.md | 21 + .../version-v7/developer-resources/videos.md | 21 + .../version-v7/developing/android.md | 38 + .../version-v7/developing/config.md | 202 +++++ .../developing/config/global/index.md | 89 +++ .../developing/config/per-component/index.md | 184 +++++ .../config/per-platform-fallback/index.md | 108 +++ .../config/per-platform-overrides/index.md | 120 +++ .../developing/config/per-platform/index.md | 89 +++ .../developing/hardware-back-button.md | 406 ++++++++++ versioned_docs/version-v7/developing/ios.md | 39 + .../version-v7/developing/keyboard.md | 175 +++++ .../version-v7/developing/managing-focus.md | 238 ++++++ .../version-v7/developing/previewing.md | 88 +++ .../version-v7/developing/scaffolding.md | 95 +++ .../version-v7/developing/starting.md | 48 ++ versioned_docs/version-v7/developing/tips.md | 153 ++++ versioned_docs/version-v7/index.md | 159 ++++ versioned_docs/version-v7/intro/cdn.md | 166 ++++ versioned_docs/version-v7/intro/cli.md | 64 ++ .../version-v7/intro/environment.md | 67 ++ versioned_docs/version-v7/intro/first-app.md | 24 + versioned_docs/version-v7/intro/next.md | 36 + .../version-v7/intro/vscode-extension.md | 39 + .../version-v7/layout/css-utilities.md | 551 +++++++++++++ .../version-v7/layout/dynamic-font-scaling.md | 220 ++++++ .../version-v7/layout/global-stylesheets.md | 73 ++ versioned_docs/version-v7/layout/structure.md | 63 ++ versioned_docs/version-v7/native-faq.md | 24 + versioned_docs/version-v7/native-setup.md | 146 ++++ versioned_docs/version-v7/native.md | 32 + versioned_docs/version-v7/native/.gitignore | 2 + versioned_docs/version-v7/react.md | 147 ++++ ...onic-react-to-an-existing-react-project.md | 213 +++++ versioned_docs/version-v7/react/lifecycle.md | 167 ++++ versioned_docs/version-v7/react/navigation.md | 654 ++++++++++++++++ versioned_docs/version-v7/react/overlays.md | 91 +++ .../version-v7/react/performance.md | 47 ++ versioned_docs/version-v7/react/platform.md | 83 ++ versioned_docs/version-v7/react/pwa.md | 180 +++++ versioned_docs/version-v7/react/quickstart.md | 454 +++++++++++ versioned_docs/version-v7/react/slides.md | 571 ++++++++++++++ versioned_docs/version-v7/react/storage.md | 25 + .../version-v7/react/testing/introduction.md | 21 + .../testing/unit-testing/best-practices.md | 51 ++ .../react/testing/unit-testing/examples.md | 112 +++ .../react/testing/unit-testing/setup.md | 40 + .../version-v7/react/virtual-scroll.md | 76 ++ .../version-v7/react/your-first-app.md | 204 +++++ .../react/your-first-app/2-taking-photos.md | 146 ++++ .../react/your-first-app/3-saving-photos.md | 81 ++ .../react/your-first-app/4-loading-photos.md | 65 ++ .../react/your-first-app/5-adding-mobile.md | 73 ++ .../your-first-app/6-deploying-mobile.md | 107 +++ .../react/your-first-app/7-live-reload.md | 120 +++ .../react/your-first-app/8-distribute.md | 100 +++ .../version-v7/reference/browser-support.md | 46 ++ .../version-v7/reference/glossary.md | 570 ++++++++++++++ .../version-v7/reference/release-notes.md | 7 + .../version-v7/reference/support.md | 116 +++ .../version-v7/reference/versioning.md | 24 + .../version-v7/techniques/security.md | 236 ++++++ versioned_docs/version-v7/test/page1.md | 3 + versioned_docs/version-v7/test/page2.md | 3 + versioned_docs/version-v7/theming/advanced.md | 208 +++++ versioned_docs/version-v7/theming/basics.md | 42 + .../version-v7/theming/color-generator.md | 19 + versioned_docs/version-v7/theming/colors.md | 116 +++ .../version-v7/theming/css-shadow-parts.md | 165 ++++ .../version-v7/theming/css-variables.md | 98 +++ .../version-v7/theming/dark-mode.md | 290 +++++++ .../version-v7/theming/platform-styles.md | 51 ++ versioned_docs/version-v7/theming/themes.md | 67 ++ .../version-v7/troubleshooting/build.md | 208 +++++ .../version-v7/troubleshooting/cors.md | 304 +++++++ .../version-v7/troubleshooting/debugging.md | 100 +++ .../version-v7/troubleshooting/native.md | 102 +++ .../version-v7/troubleshooting/runtime.md | 209 +++++ versioned_docs/version-v7/updating/4-0.md | 282 +++++++ versioned_docs/version-v7/updating/5-0.md | 37 + versioned_docs/version-v7/updating/6-0.md | 478 +++++++++++ versioned_docs/version-v7/updating/7-0.md | 155 ++++ .../version-v7/utilities/animations.md | 367 +++++++++ .../version-v7/utilities/gestures.md | 237 ++++++ versioned_docs/version-v7/vue/lifecycle.md | 107 +++ versioned_docs/version-v7/vue/navigation.md | 660 ++++++++++++++++ versioned_docs/version-v7/vue/overview.md | 66 ++ versioned_docs/version-v7/vue/performance.md | 50 ++ versioned_docs/version-v7/vue/platform.md | 87 +++ versioned_docs/version-v7/vue/pwa.md | 263 +++++++ versioned_docs/version-v7/vue/quickstart.md | 739 ++++++++++++++++++ versioned_docs/version-v7/vue/slides.md | 572 ++++++++++++++ versioned_docs/version-v7/vue/storage.md | 32 + versioned_docs/version-v7/vue/testing.md | 3 + .../version-v7/vue/troubleshooting.md | 134 ++++ .../version-v7/vue/utility-functions.md | 184 +++++ .../version-v7/vue/virtual-scroll.md | 143 ++++ .../version-v7/vue/your-first-app.md | 220 ++++++ .../vue/your-first-app/2-taking-photos.md | 155 ++++ .../vue/your-first-app/3-saving-photos.md | 70 ++ .../vue/your-first-app/4-loading-photos.md | 69 ++ .../vue/your-first-app/5-adding-mobile.md | 80 ++ .../vue/your-first-app/6-deploying-mobile.md | 118 +++ .../vue/your-first-app/7-live-reload.md | 134 ++++ .../vue/your-first-app/8-distribute.md | 100 +++ versioned_sidebars/version-v7-sidebars.json | 688 ++++++++++++++++ versions.json | 1 + 3039 files changed, 122220 insertions(+), 896 deletions(-) create mode 100644 static/usage/v8/accordion/accessibility/animations/angular.md create mode 100644 static/usage/v8/accordion/accessibility/animations/demo.html create mode 100644 static/usage/v8/accordion/accessibility/animations/index.md create mode 100644 static/usage/v8/accordion/accessibility/animations/javascript.md create mode 100644 static/usage/v8/accordion/accessibility/animations/react.md create mode 100644 static/usage/v8/accordion/accessibility/animations/vue.md create mode 100644 static/usage/v8/accordion/basic/angular.md create mode 100644 static/usage/v8/accordion/basic/demo.html create mode 100644 static/usage/v8/accordion/basic/index.md create mode 100644 static/usage/v8/accordion/basic/javascript.md create mode 100644 static/usage/v8/accordion/basic/react.md create mode 100644 static/usage/v8/accordion/basic/vue.md create mode 100644 static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_css.md create mode 100644 static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_html.md create mode 100644 static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md create mode 100644 static/usage/v8/accordion/customization/advanced-expansion-styles/demo.html create mode 100644 static/usage/v8/accordion/customization/advanced-expansion-styles/index.md create mode 100644 static/usage/v8/accordion/customization/advanced-expansion-styles/javascript.md create mode 100644 static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_css.md create mode 100644 static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_tsx.md create mode 100644 static/usage/v8/accordion/customization/advanced-expansion-styles/vue.md create mode 100644 static/usage/v8/accordion/customization/expansion-styles/angular.md create mode 100644 static/usage/v8/accordion/customization/expansion-styles/demo.html create mode 100644 static/usage/v8/accordion/customization/expansion-styles/index.md create mode 100644 static/usage/v8/accordion/customization/expansion-styles/javascript.md create mode 100644 static/usage/v8/accordion/customization/expansion-styles/react.md create mode 100644 static/usage/v8/accordion/customization/expansion-styles/vue.md create mode 100644 static/usage/v8/accordion/customization/icons/angular.md create mode 100644 static/usage/v8/accordion/customization/icons/demo.html create mode 100644 static/usage/v8/accordion/customization/icons/index.md create mode 100644 static/usage/v8/accordion/customization/icons/javascript.md create mode 100644 static/usage/v8/accordion/customization/icons/react.md create mode 100644 static/usage/v8/accordion/customization/icons/vue.md create mode 100644 static/usage/v8/accordion/customization/theming/angular/example_component_html.md create mode 100644 static/usage/v8/accordion/customization/theming/angular/global_css.md create mode 100644 static/usage/v8/accordion/customization/theming/demo.html create mode 100644 static/usage/v8/accordion/customization/theming/index.md create mode 100644 static/usage/v8/accordion/customization/theming/javascript.md create mode 100644 static/usage/v8/accordion/customization/theming/react/main_css.md create mode 100644 static/usage/v8/accordion/customization/theming/react/main_tsx.md create mode 100644 static/usage/v8/accordion/customization/theming/vue.md create mode 100644 static/usage/v8/accordion/disable-group/angular.md create mode 100644 static/usage/v8/accordion/disable-group/demo.html create mode 100644 static/usage/v8/accordion/disable-group/index.md create mode 100644 static/usage/v8/accordion/disable-group/javascript.md create mode 100644 static/usage/v8/accordion/disable-group/react.md create mode 100644 static/usage/v8/accordion/disable-group/vue.md create mode 100644 static/usage/v8/accordion/disable/group/angular.md create mode 100644 static/usage/v8/accordion/disable/group/demo.html create mode 100644 static/usage/v8/accordion/disable/group/index.md create mode 100644 static/usage/v8/accordion/disable/group/javascript.md create mode 100644 static/usage/v8/accordion/disable/group/react.md create mode 100644 static/usage/v8/accordion/disable/group/vue.md create mode 100644 static/usage/v8/accordion/disable/individual/angular.md create mode 100644 static/usage/v8/accordion/disable/individual/demo.html create mode 100644 static/usage/v8/accordion/disable/individual/index.md create mode 100644 static/usage/v8/accordion/disable/individual/javascript.md create mode 100644 static/usage/v8/accordion/disable/individual/react.md create mode 100644 static/usage/v8/accordion/disable/individual/vue.md create mode 100644 static/usage/v8/accordion/listen-changes/angular/example_component_html.md create mode 100644 static/usage/v8/accordion/listen-changes/angular/example_component_ts.md create mode 100644 static/usage/v8/accordion/listen-changes/demo.html create mode 100644 static/usage/v8/accordion/listen-changes/index.md create mode 100644 static/usage/v8/accordion/listen-changes/javascript.md create mode 100644 static/usage/v8/accordion/listen-changes/react.md create mode 100644 static/usage/v8/accordion/listen-changes/vue.md create mode 100644 static/usage/v8/accordion/multiple/angular.md create mode 100644 static/usage/v8/accordion/multiple/demo.html create mode 100644 static/usage/v8/accordion/multiple/index.md create mode 100644 static/usage/v8/accordion/multiple/javascript.md create mode 100644 static/usage/v8/accordion/multiple/react.md create mode 100644 static/usage/v8/accordion/multiple/vue.md create mode 100644 static/usage/v8/accordion/readonly/group/angular.md create mode 100644 static/usage/v8/accordion/readonly/group/demo.html create mode 100644 static/usage/v8/accordion/readonly/group/index.md create mode 100644 static/usage/v8/accordion/readonly/group/javascript.md create mode 100644 static/usage/v8/accordion/readonly/group/react.md create mode 100644 static/usage/v8/accordion/readonly/group/vue.md create mode 100644 static/usage/v8/accordion/readonly/individual/angular.md create mode 100644 static/usage/v8/accordion/readonly/individual/demo.html create mode 100644 static/usage/v8/accordion/readonly/individual/index.md create mode 100644 static/usage/v8/accordion/readonly/individual/javascript.md create mode 100644 static/usage/v8/accordion/readonly/individual/react.md create mode 100644 static/usage/v8/accordion/readonly/individual/vue.md create mode 100644 static/usage/v8/accordion/toggle/angular/example_component_html.md create mode 100644 static/usage/v8/accordion/toggle/angular/example_component_ts.md create mode 100644 static/usage/v8/accordion/toggle/demo.html create mode 100644 static/usage/v8/accordion/toggle/index.md create mode 100644 static/usage/v8/accordion/toggle/javascript.md create mode 100644 static/usage/v8/accordion/toggle/react.md create mode 100644 static/usage/v8/accordion/toggle/vue.md create mode 100644 static/usage/v8/action-sheet/controller/angular/example_component_html.md create mode 100644 static/usage/v8/action-sheet/controller/angular/example_component_ts.md create mode 100644 static/usage/v8/action-sheet/controller/demo.html create mode 100644 static/usage/v8/action-sheet/controller/index.md create mode 100644 static/usage/v8/action-sheet/controller/javascript.md create mode 100644 static/usage/v8/action-sheet/controller/react.md create mode 100644 static/usage/v8/action-sheet/controller/vue.md create mode 100644 static/usage/v8/action-sheet/inline/isOpen/angular/example_component_html.md create mode 100644 static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md create mode 100644 static/usage/v8/action-sheet/inline/isOpen/demo.html create mode 100644 static/usage/v8/action-sheet/inline/isOpen/index.md create mode 100644 static/usage/v8/action-sheet/inline/isOpen/javascript.md create mode 100644 static/usage/v8/action-sheet/inline/isOpen/react.md create mode 100644 static/usage/v8/action-sheet/inline/isOpen/vue.md create mode 100644 static/usage/v8/action-sheet/inline/trigger/angular/example_component_html.md create mode 100644 static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md create mode 100644 static/usage/v8/action-sheet/inline/trigger/demo.html create mode 100644 static/usage/v8/action-sheet/inline/trigger/index.md create mode 100644 static/usage/v8/action-sheet/inline/trigger/javascript.md create mode 100644 static/usage/v8/action-sheet/inline/trigger/react.md create mode 100644 static/usage/v8/action-sheet/inline/trigger/vue.md create mode 100644 static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_css.md create mode 100644 static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_html.md create mode 100644 static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md create mode 100644 static/usage/v8/action-sheet/role-info-on-dismiss/demo.html create mode 100644 static/usage/v8/action-sheet/role-info-on-dismiss/index.md create mode 100644 static/usage/v8/action-sheet/role-info-on-dismiss/javascript.md create mode 100644 static/usage/v8/action-sheet/role-info-on-dismiss/react/main_css.md create mode 100644 static/usage/v8/action-sheet/role-info-on-dismiss/react/main_tsx.md create mode 100644 static/usage/v8/action-sheet/role-info-on-dismiss/vue.md create mode 100644 static/usage/v8/action-sheet/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md create mode 100644 static/usage/v8/action-sheet/theming/css-properties/angular/global_css.md create mode 100644 static/usage/v8/action-sheet/theming/css-properties/demo.html create mode 100644 static/usage/v8/action-sheet/theming/css-properties/index.md create mode 100644 static/usage/v8/action-sheet/theming/css-properties/javascript.md create mode 100644 static/usage/v8/action-sheet/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/action-sheet/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/action-sheet/theming/css-properties/vue.md create mode 100644 static/usage/v8/action-sheet/theming/styling/angular/example_component_html.md create mode 100644 static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md create mode 100644 static/usage/v8/action-sheet/theming/styling/angular/global_css.md create mode 100644 static/usage/v8/action-sheet/theming/styling/demo.html create mode 100644 static/usage/v8/action-sheet/theming/styling/index.md create mode 100644 static/usage/v8/action-sheet/theming/styling/javascript.md create mode 100644 static/usage/v8/action-sheet/theming/styling/react/main_css.md create mode 100644 static/usage/v8/action-sheet/theming/styling/react/main_tsx.md create mode 100644 static/usage/v8/action-sheet/theming/styling/vue.md create mode 100644 static/usage/v8/alert/buttons/angular/example_component_html.md create mode 100644 static/usage/v8/alert/buttons/angular/example_component_ts.md create mode 100644 static/usage/v8/alert/buttons/demo.html create mode 100644 static/usage/v8/alert/buttons/index.md create mode 100644 static/usage/v8/alert/buttons/javascript.md create mode 100644 static/usage/v8/alert/buttons/react.md create mode 100644 static/usage/v8/alert/buttons/vue.md create mode 100644 static/usage/v8/alert/customization/angular/example_component_html.md create mode 100644 static/usage/v8/alert/customization/angular/example_component_ts.md create mode 100644 static/usage/v8/alert/customization/angular/global_css.md create mode 100644 static/usage/v8/alert/customization/demo.html create mode 100644 static/usage/v8/alert/customization/index.md create mode 100644 static/usage/v8/alert/customization/javascript.md create mode 100644 static/usage/v8/alert/customization/react/main_css.md create mode 100644 static/usage/v8/alert/customization/react/main_tsx.md create mode 100644 static/usage/v8/alert/customization/vue.md create mode 100644 static/usage/v8/alert/inputs/radios/angular/example_component_html.md create mode 100644 static/usage/v8/alert/inputs/radios/angular/example_component_ts.md create mode 100644 static/usage/v8/alert/inputs/radios/demo.html create mode 100644 static/usage/v8/alert/inputs/radios/index.md create mode 100644 static/usage/v8/alert/inputs/radios/javascript.md create mode 100644 static/usage/v8/alert/inputs/radios/react.md create mode 100644 static/usage/v8/alert/inputs/radios/vue.md create mode 100644 static/usage/v8/alert/inputs/text-inputs/angular/example_component_html.md create mode 100644 static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md create mode 100644 static/usage/v8/alert/inputs/text-inputs/demo.html create mode 100644 static/usage/v8/alert/inputs/text-inputs/index.md create mode 100644 static/usage/v8/alert/inputs/text-inputs/javascript.md create mode 100644 static/usage/v8/alert/inputs/text-inputs/react.md create mode 100644 static/usage/v8/alert/inputs/text-inputs/vue.md create mode 100644 static/usage/v8/alert/presenting/controller/angular/example_component_html.md create mode 100644 static/usage/v8/alert/presenting/controller/angular/example_component_ts.md create mode 100644 static/usage/v8/alert/presenting/controller/demo.html create mode 100644 static/usage/v8/alert/presenting/controller/index.md create mode 100644 static/usage/v8/alert/presenting/controller/javascript.md create mode 100644 static/usage/v8/alert/presenting/controller/react.md create mode 100644 static/usage/v8/alert/presenting/controller/vue.md create mode 100644 static/usage/v8/alert/presenting/isOpen/angular/example_component_html.md create mode 100644 static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md create mode 100644 static/usage/v8/alert/presenting/isOpen/demo.html create mode 100644 static/usage/v8/alert/presenting/isOpen/index.md create mode 100644 static/usage/v8/alert/presenting/isOpen/javascript.md create mode 100644 static/usage/v8/alert/presenting/isOpen/react.md create mode 100644 static/usage/v8/alert/presenting/isOpen/vue.md create mode 100644 static/usage/v8/alert/presenting/trigger/angular/example_component_html.md create mode 100644 static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md create mode 100644 static/usage/v8/alert/presenting/trigger/demo.html create mode 100644 static/usage/v8/alert/presenting/trigger/index.md create mode 100644 static/usage/v8/alert/presenting/trigger/javascript.md create mode 100644 static/usage/v8/alert/presenting/trigger/react.md create mode 100644 static/usage/v8/alert/presenting/trigger/vue.md create mode 100644 static/usage/v8/animations/basic/angular/example_component_html.md create mode 100644 static/usage/v8/animations/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/animations/basic/demo.html create mode 100644 static/usage/v8/animations/basic/index.md create mode 100644 static/usage/v8/animations/basic/javascript.md create mode 100644 static/usage/v8/animations/basic/react.md create mode 100644 static/usage/v8/animations/basic/vue.md create mode 100644 static/usage/v8/animations/before-and-after-hooks/angular/example_component_html.md create mode 100644 static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md create mode 100644 static/usage/v8/animations/before-and-after-hooks/demo.html create mode 100644 static/usage/v8/animations/before-and-after-hooks/index.md create mode 100644 static/usage/v8/animations/before-and-after-hooks/javascript.md create mode 100644 static/usage/v8/animations/before-and-after-hooks/react.md create mode 100644 static/usage/v8/animations/before-and-after-hooks/vue.md create mode 100644 static/usage/v8/animations/chain/angular/example_component_html.md create mode 100644 static/usage/v8/animations/chain/angular/example_component_ts.md create mode 100644 static/usage/v8/animations/chain/demo.html create mode 100644 static/usage/v8/animations/chain/index.md create mode 100644 static/usage/v8/animations/chain/javascript.md create mode 100644 static/usage/v8/animations/chain/react.md create mode 100644 static/usage/v8/animations/chain/vue.md create mode 100644 static/usage/v8/animations/gesture/angular/example_component_css.md create mode 100644 static/usage/v8/animations/gesture/angular/example_component_html.md create mode 100644 static/usage/v8/animations/gesture/angular/example_component_ts.md create mode 100644 static/usage/v8/animations/gesture/demo.html create mode 100644 static/usage/v8/animations/gesture/index.md create mode 100644 static/usage/v8/animations/gesture/javascript.md create mode 100644 static/usage/v8/animations/gesture/react/main_css.md create mode 100644 static/usage/v8/animations/gesture/react/main_tsx.md create mode 100644 static/usage/v8/animations/gesture/vue.md create mode 100644 static/usage/v8/animations/group/angular/example_component_html.md create mode 100644 static/usage/v8/animations/group/angular/example_component_ts.md create mode 100644 static/usage/v8/animations/group/demo.html create mode 100644 static/usage/v8/animations/group/index.md create mode 100644 static/usage/v8/animations/group/javascript.md create mode 100644 static/usage/v8/animations/group/react.md create mode 100644 static/usage/v8/animations/group/vue.md create mode 100644 static/usage/v8/animations/keyframes/angular/example_component_html.md create mode 100644 static/usage/v8/animations/keyframes/angular/example_component_ts.md create mode 100644 static/usage/v8/animations/keyframes/demo.html create mode 100644 static/usage/v8/animations/keyframes/index.md create mode 100644 static/usage/v8/animations/keyframes/javascript.md create mode 100644 static/usage/v8/animations/keyframes/react.md create mode 100644 static/usage/v8/animations/keyframes/vue.md create mode 100644 static/usage/v8/animations/modal-override/angular/example_component_html.md create mode 100644 static/usage/v8/animations/modal-override/angular/example_component_ts.md create mode 100644 static/usage/v8/animations/modal-override/demo.html create mode 100644 static/usage/v8/animations/modal-override/index.md create mode 100644 static/usage/v8/animations/modal-override/javascript.md create mode 100644 static/usage/v8/animations/modal-override/react.md create mode 100644 static/usage/v8/animations/modal-override/vue.md create mode 100644 static/usage/v8/animations/preference-based/angular/example_component_css.md create mode 100644 static/usage/v8/animations/preference-based/angular/example_component_html.md create mode 100644 static/usage/v8/animations/preference-based/angular/example_component_ts.md create mode 100644 static/usage/v8/animations/preference-based/demo.html create mode 100644 static/usage/v8/animations/preference-based/index.md create mode 100644 static/usage/v8/animations/preference-based/javascript.md create mode 100644 static/usage/v8/animations/preference-based/react/main_css.md create mode 100644 static/usage/v8/animations/preference-based/react/main_tsx.md create mode 100644 static/usage/v8/animations/preference-based/vue.md create mode 100644 static/usage/v8/avatar/basic/angular.md create mode 100644 static/usage/v8/avatar/basic/demo.html create mode 100644 static/usage/v8/avatar/basic/index.md create mode 100644 static/usage/v8/avatar/basic/javascript.md create mode 100644 static/usage/v8/avatar/basic/react.md create mode 100644 static/usage/v8/avatar/basic/vue.md create mode 100644 static/usage/v8/avatar/chip/angular.md create mode 100644 static/usage/v8/avatar/chip/demo.html create mode 100644 static/usage/v8/avatar/chip/index.md create mode 100644 static/usage/v8/avatar/chip/javascript.md create mode 100644 static/usage/v8/avatar/chip/react.md create mode 100644 static/usage/v8/avatar/chip/vue.md create mode 100644 static/usage/v8/avatar/item/angular.md create mode 100644 static/usage/v8/avatar/item/demo.html create mode 100644 static/usage/v8/avatar/item/index.md create mode 100644 static/usage/v8/avatar/item/javascript.md create mode 100644 static/usage/v8/avatar/item/react.md create mode 100644 static/usage/v8/avatar/item/vue.md create mode 100644 static/usage/v8/avatar/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/avatar/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/avatar/theming/css-properties/demo.html create mode 100644 static/usage/v8/avatar/theming/css-properties/index.md create mode 100644 static/usage/v8/avatar/theming/css-properties/javascript.md create mode 100644 static/usage/v8/avatar/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/avatar/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/avatar/theming/css-properties/vue.md create mode 100644 static/usage/v8/back-button/basic/angular/app_module_ts.md create mode 100644 static/usage/v8/back-button/basic/angular/example_component_html.md create mode 100644 static/usage/v8/back-button/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/back-button/basic/angular/page_one_component_ts.md create mode 100644 static/usage/v8/back-button/basic/angular/page_two_component_ts.md create mode 100644 static/usage/v8/back-button/basic/demo.html create mode 100644 static/usage/v8/back-button/basic/index.md create mode 100644 static/usage/v8/back-button/basic/javascript.md create mode 100644 static/usage/v8/back-button/basic/react/main_tsx.md create mode 100644 static/usage/v8/back-button/basic/react/page_one_tsx.md create mode 100644 static/usage/v8/back-button/basic/react/page_two_tsx.md create mode 100644 static/usage/v8/back-button/basic/vue/example_vue.md create mode 100644 static/usage/v8/back-button/basic/vue/page_one_vue.md create mode 100644 static/usage/v8/back-button/basic/vue/page_two_vue.md create mode 100644 static/usage/v8/back-button/custom/angular/app_module_ts.md create mode 100644 static/usage/v8/back-button/custom/angular/example_component_html.md create mode 100644 static/usage/v8/back-button/custom/angular/example_component_ts.md create mode 100644 static/usage/v8/back-button/custom/angular/page_one_component_ts.md create mode 100644 static/usage/v8/back-button/custom/angular/page_two_component_ts.md create mode 100644 static/usage/v8/back-button/custom/demo.html create mode 100644 static/usage/v8/back-button/custom/index.md create mode 100644 static/usage/v8/back-button/custom/javascript.md create mode 100644 static/usage/v8/back-button/custom/react/main_tsx.md create mode 100644 static/usage/v8/back-button/custom/react/page_one_tsx.md create mode 100644 static/usage/v8/back-button/custom/react/page_two_tsx.md create mode 100644 static/usage/v8/back-button/custom/vue/example_vue.md create mode 100644 static/usage/v8/back-button/custom/vue/page_one_vue.md create mode 100644 static/usage/v8/back-button/custom/vue/page_two_vue.md create mode 100644 static/usage/v8/backdrop/basic/angular/example_component_css.md create mode 100644 static/usage/v8/backdrop/basic/angular/example_component_html.md create mode 100644 static/usage/v8/backdrop/basic/demo.html create mode 100644 static/usage/v8/backdrop/basic/index.md create mode 100644 static/usage/v8/backdrop/basic/javascript.md create mode 100644 static/usage/v8/backdrop/basic/react/main_css.md create mode 100644 static/usage/v8/backdrop/basic/react/main_tsx.md create mode 100644 static/usage/v8/backdrop/basic/vue.md create mode 100644 static/usage/v8/backdrop/styling/angular/example_component_css.md create mode 100644 static/usage/v8/backdrop/styling/angular/example_component_html.md create mode 100644 static/usage/v8/backdrop/styling/demo.html create mode 100644 static/usage/v8/backdrop/styling/index.md create mode 100644 static/usage/v8/backdrop/styling/javascript.md create mode 100644 static/usage/v8/backdrop/styling/react/main_css.md create mode 100644 static/usage/v8/backdrop/styling/react/main_tsx.md create mode 100644 static/usage/v8/backdrop/styling/vue.md create mode 100644 static/usage/v8/badge/basic/angular.md create mode 100644 static/usage/v8/badge/basic/demo.html create mode 100644 static/usage/v8/badge/basic/index.md create mode 100644 static/usage/v8/badge/basic/javascript.md create mode 100644 static/usage/v8/badge/basic/react.md create mode 100644 static/usage/v8/badge/basic/vue.md create mode 100644 static/usage/v8/badge/theming/colors/angular.md create mode 100644 static/usage/v8/badge/theming/colors/demo.html create mode 100644 static/usage/v8/badge/theming/colors/index.md create mode 100644 static/usage/v8/badge/theming/colors/javascript.md create mode 100644 static/usage/v8/badge/theming/colors/react.md create mode 100644 static/usage/v8/badge/theming/colors/vue.md create mode 100644 static/usage/v8/badge/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/badge/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/badge/theming/css-properties/demo.html create mode 100644 static/usage/v8/badge/theming/css-properties/index.md create mode 100644 static/usage/v8/badge/theming/css-properties/javascript.md create mode 100644 static/usage/v8/badge/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/badge/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/badge/theming/css-properties/vue.md create mode 100644 static/usage/v8/breadcrumbs/basic/angular.md create mode 100644 static/usage/v8/breadcrumbs/basic/demo.html create mode 100644 static/usage/v8/breadcrumbs/basic/index.md create mode 100644 static/usage/v8/breadcrumbs/basic/javascript.md create mode 100644 static/usage/v8/breadcrumbs/basic/react.md create mode 100644 static/usage/v8/breadcrumbs/basic/vue.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/demo.html create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/index.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/javascript.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/react.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/vue.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/items-before-after/demo.html create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/items-before-after/javascript.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/items-before-after/react.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/items-before-after/vue.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/max-items/angular.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/max-items/demo.html create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/max-items/javascript.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/max-items/react.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/max-items/vue.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/demo.html create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/index.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/javascript.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/react.md create mode 100644 static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/vue.md create mode 100644 static/usage/v8/breadcrumbs/icons/custom-separators/angular.md create mode 100644 static/usage/v8/breadcrumbs/icons/custom-separators/demo.html create mode 100644 static/usage/v8/breadcrumbs/icons/custom-separators/index.md create mode 100644 static/usage/v8/breadcrumbs/icons/custom-separators/javascript.md create mode 100644 static/usage/v8/breadcrumbs/icons/custom-separators/react.md create mode 100644 static/usage/v8/breadcrumbs/icons/custom-separators/vue.md create mode 100644 static/usage/v8/breadcrumbs/icons/icons-on-items/angular.md create mode 100644 static/usage/v8/breadcrumbs/icons/icons-on-items/demo.html create mode 100644 static/usage/v8/breadcrumbs/icons/icons-on-items/index.md create mode 100644 static/usage/v8/breadcrumbs/icons/icons-on-items/javascript.md create mode 100644 static/usage/v8/breadcrumbs/icons/icons-on-items/react.md create mode 100644 static/usage/v8/breadcrumbs/icons/icons-on-items/vue.md create mode 100644 static/usage/v8/breadcrumbs/theming/colors/angular.md create mode 100644 static/usage/v8/breadcrumbs/theming/colors/demo.html create mode 100644 static/usage/v8/breadcrumbs/theming/colors/index.md create mode 100644 static/usage/v8/breadcrumbs/theming/colors/javascript.md create mode 100644 static/usage/v8/breadcrumbs/theming/colors/react.md create mode 100644 static/usage/v8/breadcrumbs/theming/colors/vue.md create mode 100644 static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/breadcrumbs/theming/css-properties/demo.html create mode 100644 static/usage/v8/breadcrumbs/theming/css-properties/index.md create mode 100644 static/usage/v8/breadcrumbs/theming/css-properties/javascript.md create mode 100644 static/usage/v8/breadcrumbs/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/breadcrumbs/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/breadcrumbs/theming/css-properties/vue.md create mode 100644 static/usage/v8/button/basic/angular.md create mode 100644 static/usage/v8/button/basic/demo.html create mode 100644 static/usage/v8/button/basic/index.md create mode 100644 static/usage/v8/button/basic/javascript.md create mode 100644 static/usage/v8/button/basic/react.md create mode 100644 static/usage/v8/button/basic/vue.md create mode 100644 static/usage/v8/button/expand/angular.md create mode 100644 static/usage/v8/button/expand/demo.html create mode 100644 static/usage/v8/button/expand/index.md create mode 100644 static/usage/v8/button/expand/javascript.md create mode 100644 static/usage/v8/button/expand/react.md create mode 100644 static/usage/v8/button/expand/vue.md create mode 100644 static/usage/v8/button/fill/angular.md create mode 100644 static/usage/v8/button/fill/demo.html create mode 100644 static/usage/v8/button/fill/index.md create mode 100644 static/usage/v8/button/fill/javascript.md create mode 100644 static/usage/v8/button/fill/react.md create mode 100644 static/usage/v8/button/fill/vue.md create mode 100644 static/usage/v8/button/icons/angular.md create mode 100644 static/usage/v8/button/icons/demo.html create mode 100644 static/usage/v8/button/icons/index.md create mode 100644 static/usage/v8/button/icons/javascript.md create mode 100644 static/usage/v8/button/icons/react.md create mode 100644 static/usage/v8/button/icons/vue.md create mode 100644 static/usage/v8/button/shape/angular.md create mode 100644 static/usage/v8/button/shape/demo.html create mode 100644 static/usage/v8/button/shape/index.md create mode 100644 static/usage/v8/button/shape/javascript.md create mode 100644 static/usage/v8/button/shape/react.md create mode 100644 static/usage/v8/button/shape/vue.md create mode 100644 static/usage/v8/button/size/angular.md create mode 100644 static/usage/v8/button/size/demo.html create mode 100644 static/usage/v8/button/size/index.md create mode 100644 static/usage/v8/button/size/javascript.md create mode 100644 static/usage/v8/button/size/react.md create mode 100644 static/usage/v8/button/size/vue.md create mode 100644 static/usage/v8/button/text-wrapping/angular.md create mode 100644 static/usage/v8/button/text-wrapping/demo.html create mode 100644 static/usage/v8/button/text-wrapping/index.md create mode 100644 static/usage/v8/button/text-wrapping/javascript.md create mode 100644 static/usage/v8/button/text-wrapping/react.md create mode 100644 static/usage/v8/button/text-wrapping/vue.md create mode 100644 static/usage/v8/button/theming/colors/angular.md create mode 100644 static/usage/v8/button/theming/colors/demo.html create mode 100644 static/usage/v8/button/theming/colors/index.md create mode 100644 static/usage/v8/button/theming/colors/javascript.md create mode 100644 static/usage/v8/button/theming/colors/react.md create mode 100644 static/usage/v8/button/theming/colors/vue.md create mode 100644 static/usage/v8/button/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/button/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/button/theming/css-properties/demo.html create mode 100644 static/usage/v8/button/theming/css-properties/index.md create mode 100644 static/usage/v8/button/theming/css-properties/javascript.md create mode 100644 static/usage/v8/button/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/button/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/button/theming/css-properties/vue.md create mode 100644 static/usage/v8/buttons/basic/angular.md create mode 100644 static/usage/v8/buttons/basic/demo.html create mode 100644 static/usage/v8/buttons/basic/index.md create mode 100644 static/usage/v8/buttons/basic/javascript.md create mode 100644 static/usage/v8/buttons/basic/react.md create mode 100644 static/usage/v8/buttons/basic/vue.md create mode 100644 static/usage/v8/buttons/placement/angular.md create mode 100644 static/usage/v8/buttons/placement/demo.html create mode 100644 static/usage/v8/buttons/placement/index.md create mode 100644 static/usage/v8/buttons/placement/javascript.md create mode 100644 static/usage/v8/buttons/placement/react.md create mode 100644 static/usage/v8/buttons/placement/vue.md create mode 100644 static/usage/v8/buttons/types/angular.md create mode 100644 static/usage/v8/buttons/types/demo.html create mode 100644 static/usage/v8/buttons/types/index.md create mode 100644 static/usage/v8/buttons/types/javascript.md create mode 100644 static/usage/v8/buttons/types/react.md create mode 100644 static/usage/v8/buttons/types/vue.md create mode 100644 static/usage/v8/card/basic/angular.md create mode 100644 static/usage/v8/card/basic/demo.html create mode 100644 static/usage/v8/card/basic/index.md create mode 100644 static/usage/v8/card/basic/javascript.md create mode 100644 static/usage/v8/card/basic/react.md create mode 100644 static/usage/v8/card/basic/vue.md create mode 100644 static/usage/v8/card/buttons/angular.md create mode 100644 static/usage/v8/card/buttons/demo.html create mode 100644 static/usage/v8/card/buttons/index.md create mode 100644 static/usage/v8/card/buttons/javascript.md create mode 100644 static/usage/v8/card/buttons/react.md create mode 100644 static/usage/v8/card/buttons/vue.md create mode 100644 static/usage/v8/card/list/angular/example_component_css.md create mode 100644 static/usage/v8/card/list/angular/example_component_html.md create mode 100644 static/usage/v8/card/list/demo.html create mode 100644 static/usage/v8/card/list/index.md create mode 100644 static/usage/v8/card/list/javascript.md create mode 100644 static/usage/v8/card/list/react/main_css.md create mode 100644 static/usage/v8/card/list/react/main_tsx.md create mode 100644 static/usage/v8/card/list/vue.md create mode 100644 static/usage/v8/card/media/angular.md create mode 100644 static/usage/v8/card/media/demo.html create mode 100644 static/usage/v8/card/media/index.md create mode 100644 static/usage/v8/card/media/javascript.md create mode 100644 static/usage/v8/card/media/react.md create mode 100644 static/usage/v8/card/media/vue.md create mode 100644 static/usage/v8/card/theming/colors/angular.md create mode 100644 static/usage/v8/card/theming/colors/demo.html create mode 100644 static/usage/v8/card/theming/colors/index.md create mode 100644 static/usage/v8/card/theming/colors/javascript.md create mode 100644 static/usage/v8/card/theming/colors/react.md create mode 100644 static/usage/v8/card/theming/colors/vue.md create mode 100644 static/usage/v8/card/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/card/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/card/theming/css-properties/demo.html create mode 100644 static/usage/v8/card/theming/css-properties/index.md create mode 100644 static/usage/v8/card/theming/css-properties/javascript.md create mode 100644 static/usage/v8/card/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/card/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/card/theming/css-properties/vue.md create mode 100644 static/usage/v8/checkbox/alignment/angular.md create mode 100644 static/usage/v8/checkbox/alignment/demo.html create mode 100644 static/usage/v8/checkbox/alignment/index.md create mode 100644 static/usage/v8/checkbox/alignment/javascript.md create mode 100644 static/usage/v8/checkbox/alignment/react.md create mode 100644 static/usage/v8/checkbox/alignment/vue.md create mode 100644 static/usage/v8/checkbox/basic/angular.md create mode 100644 static/usage/v8/checkbox/basic/demo.html create mode 100644 static/usage/v8/checkbox/basic/index.md create mode 100644 static/usage/v8/checkbox/basic/javascript.md create mode 100644 static/usage/v8/checkbox/basic/react.md create mode 100644 static/usage/v8/checkbox/basic/vue.md create mode 100644 static/usage/v8/checkbox/indeterminate/angular.md create mode 100644 static/usage/v8/checkbox/indeterminate/demo.html create mode 100644 static/usage/v8/checkbox/indeterminate/index.md create mode 100644 static/usage/v8/checkbox/indeterminate/javascript.md create mode 100644 static/usage/v8/checkbox/indeterminate/react.md create mode 100644 static/usage/v8/checkbox/indeterminate/vue.md create mode 100644 static/usage/v8/checkbox/justify/angular.md create mode 100644 static/usage/v8/checkbox/justify/demo.html create mode 100644 static/usage/v8/checkbox/justify/index.md create mode 100644 static/usage/v8/checkbox/justify/javascript.md create mode 100644 static/usage/v8/checkbox/justify/react.md create mode 100644 static/usage/v8/checkbox/justify/vue.md create mode 100644 static/usage/v8/checkbox/label-placement/angular.md create mode 100644 static/usage/v8/checkbox/label-placement/demo.html create mode 100644 static/usage/v8/checkbox/label-placement/index.md create mode 100644 static/usage/v8/checkbox/label-placement/javascript.md create mode 100644 static/usage/v8/checkbox/label-placement/react.md create mode 100644 static/usage/v8/checkbox/label-placement/vue.md create mode 100644 static/usage/v8/checkbox/migration/index.md create mode 100644 static/usage/v8/checkbox/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/checkbox/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/checkbox/theming/css-properties/demo.html create mode 100644 static/usage/v8/checkbox/theming/css-properties/index.md create mode 100644 static/usage/v8/checkbox/theming/css-properties/javascript.md create mode 100644 static/usage/v8/checkbox/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/checkbox/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/checkbox/theming/css-properties/vue.md create mode 100644 static/usage/v8/chip/basic/angular.md create mode 100644 static/usage/v8/chip/basic/demo.html create mode 100644 static/usage/v8/chip/basic/index.md create mode 100644 static/usage/v8/chip/basic/javascript.md create mode 100644 static/usage/v8/chip/basic/react.md create mode 100644 static/usage/v8/chip/basic/vue.md create mode 100644 static/usage/v8/chip/slots/angular.md create mode 100644 static/usage/v8/chip/slots/demo.html create mode 100644 static/usage/v8/chip/slots/index.md create mode 100644 static/usage/v8/chip/slots/javascript.md create mode 100644 static/usage/v8/chip/slots/react.md create mode 100644 static/usage/v8/chip/slots/vue.md create mode 100644 static/usage/v8/chip/theming/colors/angular.md create mode 100644 static/usage/v8/chip/theming/colors/demo.html create mode 100644 static/usage/v8/chip/theming/colors/index.md create mode 100644 static/usage/v8/chip/theming/colors/javascript.md create mode 100644 static/usage/v8/chip/theming/colors/react.md create mode 100644 static/usage/v8/chip/theming/colors/vue.md create mode 100644 static/usage/v8/chip/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/chip/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/chip/theming/css-properties/demo.html create mode 100644 static/usage/v8/chip/theming/css-properties/index.md create mode 100644 static/usage/v8/chip/theming/css-properties/javascript.md create mode 100644 static/usage/v8/chip/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/chip/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/chip/theming/css-properties/vue.md create mode 100644 static/usage/v8/content/basic/angular.md create mode 100644 static/usage/v8/content/basic/demo.html create mode 100644 static/usage/v8/content/basic/index.md create mode 100644 static/usage/v8/content/basic/javascript.md create mode 100644 static/usage/v8/content/basic/react.md create mode 100644 static/usage/v8/content/basic/vue.md create mode 100644 static/usage/v8/content/fixed/angular.md create mode 100644 static/usage/v8/content/fixed/angular/example_component_css.md create mode 100644 static/usage/v8/content/fixed/angular/example_component_html.md create mode 100644 static/usage/v8/content/fixed/demo.html create mode 100644 static/usage/v8/content/fixed/index.md create mode 100644 static/usage/v8/content/fixed/javascript.md create mode 100644 static/usage/v8/content/fixed/react.md create mode 100644 static/usage/v8/content/fixed/react/main_css.md create mode 100644 static/usage/v8/content/fixed/react/main_tsx.md create mode 100644 static/usage/v8/content/fixed/vue.md create mode 100644 static/usage/v8/content/fullscreen/angular/example_component_css.md create mode 100644 static/usage/v8/content/fullscreen/angular/example_component_html.md create mode 100644 static/usage/v8/content/fullscreen/demo.html create mode 100644 static/usage/v8/content/fullscreen/index.md create mode 100644 static/usage/v8/content/fullscreen/javascript.md create mode 100644 static/usage/v8/content/fullscreen/react/main_css.md create mode 100644 static/usage/v8/content/fullscreen/react/main_tsx.md create mode 100644 static/usage/v8/content/fullscreen/vue.md create mode 100644 static/usage/v8/content/header-footer/angular.md create mode 100644 static/usage/v8/content/header-footer/demo.html create mode 100644 static/usage/v8/content/header-footer/index.md create mode 100644 static/usage/v8/content/header-footer/javascript.md create mode 100644 static/usage/v8/content/header-footer/react.md create mode 100644 static/usage/v8/content/header-footer/vue.md create mode 100644 static/usage/v8/content/scroll-events/angular/example_component_html.md create mode 100644 static/usage/v8/content/scroll-events/angular/example_component_ts.md create mode 100644 static/usage/v8/content/scroll-events/demo.html create mode 100644 static/usage/v8/content/scroll-events/index.md create mode 100644 static/usage/v8/content/scroll-events/javascript.md create mode 100644 static/usage/v8/content/scroll-events/react.md create mode 100644 static/usage/v8/content/scroll-events/vue.md create mode 100644 static/usage/v8/content/scroll-methods/angular/example_component_html.md create mode 100644 static/usage/v8/content/scroll-methods/angular/example_component_ts.md create mode 100644 static/usage/v8/content/scroll-methods/demo.html create mode 100644 static/usage/v8/content/scroll-methods/index.md create mode 100644 static/usage/v8/content/scroll-methods/javascript.md create mode 100644 static/usage/v8/content/scroll-methods/react.md create mode 100644 static/usage/v8/content/scroll-methods/vue.md create mode 100644 static/usage/v8/content/theming/colors/angular.md create mode 100644 static/usage/v8/content/theming/colors/demo.html create mode 100644 static/usage/v8/content/theming/colors/index.md create mode 100644 static/usage/v8/content/theming/colors/javascript.md create mode 100644 static/usage/v8/content/theming/colors/react.md create mode 100644 static/usage/v8/content/theming/colors/vue.md create mode 100644 static/usage/v8/content/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/content/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/content/theming/css-properties/demo.html create mode 100644 static/usage/v8/content/theming/css-properties/index.md create mode 100644 static/usage/v8/content/theming/css-properties/javascript.md create mode 100644 static/usage/v8/content/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/content/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/content/theming/css-properties/vue.md create mode 100644 static/usage/v8/content/theming/css-shadow-parts/angular/example_component_css.md create mode 100644 static/usage/v8/content/theming/css-shadow-parts/angular/example_component_html.md create mode 100644 static/usage/v8/content/theming/css-shadow-parts/demo.html create mode 100644 static/usage/v8/content/theming/css-shadow-parts/index.md create mode 100644 static/usage/v8/content/theming/css-shadow-parts/javascript.md create mode 100644 static/usage/v8/content/theming/css-shadow-parts/react/main_css.md create mode 100644 static/usage/v8/content/theming/css-shadow-parts/react/main_tsx.md create mode 100644 static/usage/v8/content/theming/css-shadow-parts/vue.md create mode 100644 static/usage/v8/content/theming/safe-area/angular/example_component_css.md create mode 100644 static/usage/v8/content/theming/safe-area/angular/example_component_html.md create mode 100644 static/usage/v8/content/theming/safe-area/angular/global_css.md create mode 100644 static/usage/v8/content/theming/safe-area/demo.html create mode 100644 static/usage/v8/content/theming/safe-area/index.md create mode 100644 static/usage/v8/content/theming/safe-area/javascript.md create mode 100644 static/usage/v8/content/theming/safe-area/react/main_css.md create mode 100644 static/usage/v8/content/theming/safe-area/react/main_tsx.md create mode 100644 static/usage/v8/content/theming/safe-area/vue.md create mode 100644 static/usage/v8/datetime-button/basic/angular.md create mode 100644 static/usage/v8/datetime-button/basic/demo.html create mode 100644 static/usage/v8/datetime-button/basic/index.md create mode 100644 static/usage/v8/datetime-button/basic/javascript.md create mode 100644 static/usage/v8/datetime-button/basic/react.md create mode 100644 static/usage/v8/datetime-button/basic/vue.md create mode 100644 static/usage/v8/datetime/basic/angular.md create mode 100644 static/usage/v8/datetime/basic/demo.html create mode 100644 static/usage/v8/datetime/basic/index.md create mode 100644 static/usage/v8/datetime/basic/javascript.md create mode 100644 static/usage/v8/datetime/basic/react.md create mode 100644 static/usage/v8/datetime/basic/vue.md create mode 100644 static/usage/v8/datetime/buttons/customizing-button-texts/angular.md create mode 100644 static/usage/v8/datetime/buttons/customizing-button-texts/demo.html create mode 100644 static/usage/v8/datetime/buttons/customizing-button-texts/index.md create mode 100644 static/usage/v8/datetime/buttons/customizing-button-texts/javascript.md create mode 100644 static/usage/v8/datetime/buttons/customizing-button-texts/react.md create mode 100644 static/usage/v8/datetime/buttons/customizing-button-texts/vue.md create mode 100644 static/usage/v8/datetime/buttons/customizing-buttons/angular.md create mode 100644 static/usage/v8/datetime/buttons/customizing-buttons/demo.html create mode 100644 static/usage/v8/datetime/buttons/customizing-buttons/index.md create mode 100644 static/usage/v8/datetime/buttons/customizing-buttons/javascript.md create mode 100644 static/usage/v8/datetime/buttons/customizing-buttons/react.md create mode 100644 static/usage/v8/datetime/buttons/customizing-buttons/vue.md create mode 100644 static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md create mode 100644 static/usage/v8/datetime/buttons/showing-confirmation-buttons/demo.html create mode 100644 static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md create mode 100644 static/usage/v8/datetime/buttons/showing-confirmation-buttons/javascript.md create mode 100644 static/usage/v8/datetime/buttons/showing-confirmation-buttons/react.md create mode 100644 static/usage/v8/datetime/buttons/showing-confirmation-buttons/vue.md create mode 100644 static/usage/v8/datetime/date-constraints/advanced/angular/example_component_html.md create mode 100644 static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md create mode 100644 static/usage/v8/datetime/date-constraints/advanced/demo.html create mode 100644 static/usage/v8/datetime/date-constraints/advanced/index.md create mode 100644 static/usage/v8/datetime/date-constraints/advanced/javascript.md create mode 100644 static/usage/v8/datetime/date-constraints/advanced/react.md create mode 100644 static/usage/v8/datetime/date-constraints/advanced/vue.md create mode 100644 static/usage/v8/datetime/date-constraints/max-min/angular.md create mode 100644 static/usage/v8/datetime/date-constraints/max-min/demo.html create mode 100644 static/usage/v8/datetime/date-constraints/max-min/index.md create mode 100644 static/usage/v8/datetime/date-constraints/max-min/javascript.md create mode 100644 static/usage/v8/datetime/date-constraints/max-min/react.md create mode 100644 static/usage/v8/datetime/date-constraints/max-min/vue.md create mode 100644 static/usage/v8/datetime/date-constraints/values/angular.md create mode 100644 static/usage/v8/datetime/date-constraints/values/demo.html create mode 100644 static/usage/v8/datetime/date-constraints/values/index.md create mode 100644 static/usage/v8/datetime/date-constraints/values/javascript.md create mode 100644 static/usage/v8/datetime/date-constraints/values/react.md create mode 100644 static/usage/v8/datetime/date-constraints/values/vue.md create mode 100644 static/usage/v8/datetime/highlightedDates/array/angular/example_component_html.md create mode 100644 static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md create mode 100644 static/usage/v8/datetime/highlightedDates/array/demo.html create mode 100644 static/usage/v8/datetime/highlightedDates/array/index.md create mode 100644 static/usage/v8/datetime/highlightedDates/array/javascript.md create mode 100644 static/usage/v8/datetime/highlightedDates/array/react.md create mode 100644 static/usage/v8/datetime/highlightedDates/array/vue.md create mode 100644 static/usage/v8/datetime/highlightedDates/callback/angular/example_component_html.md create mode 100644 static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md create mode 100644 static/usage/v8/datetime/highlightedDates/callback/demo.html create mode 100644 static/usage/v8/datetime/highlightedDates/callback/index.md create mode 100644 static/usage/v8/datetime/highlightedDates/callback/javascript.md create mode 100644 static/usage/v8/datetime/highlightedDates/callback/react.md create mode 100644 static/usage/v8/datetime/highlightedDates/callback/vue.md create mode 100644 static/usage/v8/datetime/localization/custom-locale/angular.md create mode 100644 static/usage/v8/datetime/localization/custom-locale/demo.html create mode 100644 static/usage/v8/datetime/localization/custom-locale/index.md create mode 100644 static/usage/v8/datetime/localization/custom-locale/javascript.md create mode 100644 static/usage/v8/datetime/localization/custom-locale/react.md create mode 100644 static/usage/v8/datetime/localization/custom-locale/vue.md create mode 100644 static/usage/v8/datetime/localization/first-day-of-week/angular.md create mode 100644 static/usage/v8/datetime/localization/first-day-of-week/demo.html create mode 100644 static/usage/v8/datetime/localization/first-day-of-week/index.md create mode 100644 static/usage/v8/datetime/localization/first-day-of-week/javascript.md create mode 100644 static/usage/v8/datetime/localization/first-day-of-week/react.md create mode 100644 static/usage/v8/datetime/localization/first-day-of-week/vue.md create mode 100644 static/usage/v8/datetime/localization/hour-cycle/angular.md create mode 100644 static/usage/v8/datetime/localization/hour-cycle/demo.html create mode 100644 static/usage/v8/datetime/localization/hour-cycle/index.md create mode 100644 static/usage/v8/datetime/localization/hour-cycle/javascript.md create mode 100644 static/usage/v8/datetime/localization/hour-cycle/react.md create mode 100644 static/usage/v8/datetime/localization/hour-cycle/vue.md create mode 100644 static/usage/v8/datetime/localization/locale-extension-tags/angular.md create mode 100644 static/usage/v8/datetime/localization/locale-extension-tags/demo.html create mode 100644 static/usage/v8/datetime/localization/locale-extension-tags/index.md create mode 100644 static/usage/v8/datetime/localization/locale-extension-tags/javascript.md create mode 100644 static/usage/v8/datetime/localization/locale-extension-tags/react.md create mode 100644 static/usage/v8/datetime/localization/locale-extension-tags/vue.md create mode 100644 static/usage/v8/datetime/localization/time-label/angular.md create mode 100644 static/usage/v8/datetime/localization/time-label/demo.html create mode 100644 static/usage/v8/datetime/localization/time-label/index.md create mode 100644 static/usage/v8/datetime/localization/time-label/javascript.md create mode 100644 static/usage/v8/datetime/localization/time-label/react.md create mode 100644 static/usage/v8/datetime/localization/time-label/vue.md create mode 100644 static/usage/v8/datetime/multiple/angular.md create mode 100644 static/usage/v8/datetime/multiple/demo.html create mode 100644 static/usage/v8/datetime/multiple/index.md create mode 100644 static/usage/v8/datetime/multiple/javascript.md create mode 100644 static/usage/v8/datetime/multiple/react.md create mode 100644 static/usage/v8/datetime/multiple/vue.md create mode 100644 static/usage/v8/datetime/presentation/date/angular.md create mode 100644 static/usage/v8/datetime/presentation/date/demo.html create mode 100644 static/usage/v8/datetime/presentation/date/index.md create mode 100644 static/usage/v8/datetime/presentation/date/javascript.md create mode 100644 static/usage/v8/datetime/presentation/date/react.md create mode 100644 static/usage/v8/datetime/presentation/date/vue.md create mode 100644 static/usage/v8/datetime/presentation/month-and-year/angular.md create mode 100644 static/usage/v8/datetime/presentation/month-and-year/demo.html create mode 100644 static/usage/v8/datetime/presentation/month-and-year/index.md create mode 100644 static/usage/v8/datetime/presentation/month-and-year/javascript.md create mode 100644 static/usage/v8/datetime/presentation/month-and-year/react.md create mode 100644 static/usage/v8/datetime/presentation/month-and-year/vue.md create mode 100644 static/usage/v8/datetime/presentation/time/angular.md create mode 100644 static/usage/v8/datetime/presentation/time/demo.html create mode 100644 static/usage/v8/datetime/presentation/time/index.md create mode 100644 static/usage/v8/datetime/presentation/time/javascript.md create mode 100644 static/usage/v8/datetime/presentation/time/react.md create mode 100644 static/usage/v8/datetime/presentation/time/vue.md create mode 100644 static/usage/v8/datetime/presentation/wheel/angular.md create mode 100644 static/usage/v8/datetime/presentation/wheel/demo.html create mode 100644 static/usage/v8/datetime/presentation/wheel/index.md create mode 100644 static/usage/v8/datetime/presentation/wheel/javascript.md create mode 100644 static/usage/v8/datetime/presentation/wheel/react.md create mode 100644 static/usage/v8/datetime/presentation/wheel/vue.md create mode 100644 static/usage/v8/datetime/styling/calendar-days/angular/example_component_css.md create mode 100644 static/usage/v8/datetime/styling/calendar-days/angular/example_component_html.md create mode 100644 static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md create mode 100644 static/usage/v8/datetime/styling/calendar-days/demo.html create mode 100644 static/usage/v8/datetime/styling/calendar-days/index.md create mode 100644 static/usage/v8/datetime/styling/calendar-days/javascript.md create mode 100644 static/usage/v8/datetime/styling/calendar-days/react/main_css.md create mode 100644 static/usage/v8/datetime/styling/calendar-days/react/main_tsx.md create mode 100644 static/usage/v8/datetime/styling/calendar-days/vue.md create mode 100644 static/usage/v8/datetime/styling/global-theming/angular/example_component_html.md create mode 100644 static/usage/v8/datetime/styling/global-theming/angular/global_css.md create mode 100644 static/usage/v8/datetime/styling/global-theming/demo.html create mode 100644 static/usage/v8/datetime/styling/global-theming/index.md create mode 100644 static/usage/v8/datetime/styling/global-theming/javascript.md create mode 100644 static/usage/v8/datetime/styling/global-theming/react/main_css.md create mode 100644 static/usage/v8/datetime/styling/global-theming/react/main_tsx.md create mode 100644 static/usage/v8/datetime/styling/global-theming/vue.md create mode 100644 static/usage/v8/datetime/styling/wheel-styling/angular/example_component_css.md create mode 100644 static/usage/v8/datetime/styling/wheel-styling/angular/example_component_html.md create mode 100644 static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md create mode 100644 static/usage/v8/datetime/styling/wheel-styling/demo.html create mode 100644 static/usage/v8/datetime/styling/wheel-styling/index.md create mode 100644 static/usage/v8/datetime/styling/wheel-styling/javascript.md create mode 100644 static/usage/v8/datetime/styling/wheel-styling/react/main_css.md create mode 100644 static/usage/v8/datetime/styling/wheel-styling/react/main_tsx.md create mode 100644 static/usage/v8/datetime/styling/wheel-styling/vue.md create mode 100644 static/usage/v8/datetime/theming/angular/example_component_html.md create mode 100644 static/usage/v8/datetime/theming/angular/global_css.md create mode 100644 static/usage/v8/datetime/theming/demo.html create mode 100644 static/usage/v8/datetime/theming/index.md create mode 100644 static/usage/v8/datetime/theming/javascript.md create mode 100644 static/usage/v8/datetime/theming/react/main_css.md create mode 100644 static/usage/v8/datetime/theming/react/main_tsx.md create mode 100644 static/usage/v8/datetime/theming/vue.md create mode 100644 static/usage/v8/datetime/title/customizing-title/angular.md create mode 100644 static/usage/v8/datetime/title/customizing-title/demo.html create mode 100644 static/usage/v8/datetime/title/customizing-title/index.md create mode 100644 static/usage/v8/datetime/title/customizing-title/javascript.md create mode 100644 static/usage/v8/datetime/title/customizing-title/react.md create mode 100644 static/usage/v8/datetime/title/customizing-title/vue.md create mode 100644 static/usage/v8/datetime/title/showing-default-title/angular.md create mode 100644 static/usage/v8/datetime/title/showing-default-title/demo.html create mode 100644 static/usage/v8/datetime/title/showing-default-title/index.md create mode 100644 static/usage/v8/datetime/title/showing-default-title/javascript.md create mode 100644 static/usage/v8/datetime/title/showing-default-title/react.md create mode 100644 static/usage/v8/datetime/title/showing-default-title/vue.md create mode 100644 static/usage/v8/fab/basic/angular.md create mode 100644 static/usage/v8/fab/basic/demo.html create mode 100644 static/usage/v8/fab/basic/index.md create mode 100644 static/usage/v8/fab/basic/javascript.md create mode 100644 static/usage/v8/fab/basic/react.md create mode 100644 static/usage/v8/fab/basic/vue.md create mode 100644 static/usage/v8/fab/button-sizing/angular.md create mode 100644 static/usage/v8/fab/button-sizing/demo.html create mode 100644 static/usage/v8/fab/button-sizing/index.md create mode 100644 static/usage/v8/fab/button-sizing/javascript.md create mode 100644 static/usage/v8/fab/button-sizing/react.md create mode 100644 static/usage/v8/fab/button-sizing/vue.md create mode 100644 static/usage/v8/fab/list-side/angular.md create mode 100644 static/usage/v8/fab/list-side/demo.html create mode 100644 static/usage/v8/fab/list-side/index.md create mode 100644 static/usage/v8/fab/list-side/javascript.md create mode 100644 static/usage/v8/fab/list-side/react.md create mode 100644 static/usage/v8/fab/list-side/vue.md create mode 100644 static/usage/v8/fab/positioning/angular.md create mode 100644 static/usage/v8/fab/positioning/demo.html create mode 100644 static/usage/v8/fab/positioning/index.md create mode 100644 static/usage/v8/fab/positioning/javascript.md create mode 100644 static/usage/v8/fab/positioning/react.md create mode 100644 static/usage/v8/fab/positioning/vue.md create mode 100644 static/usage/v8/fab/safe-area/angular/example_component_css.md create mode 100644 static/usage/v8/fab/safe-area/angular/example_component_html.md create mode 100644 static/usage/v8/fab/safe-area/angular/global_css.md create mode 100644 static/usage/v8/fab/safe-area/demo.html create mode 100644 static/usage/v8/fab/safe-area/index.md create mode 100644 static/usage/v8/fab/safe-area/javascript.md create mode 100644 static/usage/v8/fab/safe-area/react/main_css.md create mode 100644 static/usage/v8/fab/safe-area/react/main_tsx.md create mode 100644 static/usage/v8/fab/safe-area/vue.md create mode 100644 static/usage/v8/fab/theming/colors/angular.md create mode 100644 static/usage/v8/fab/theming/colors/demo.html create mode 100644 static/usage/v8/fab/theming/colors/index.md create mode 100644 static/usage/v8/fab/theming/colors/javascript.md create mode 100644 static/usage/v8/fab/theming/colors/react.md create mode 100644 static/usage/v8/fab/theming/colors/vue.md create mode 100644 static/usage/v8/fab/theming/css-custom-properties/angular/example_component_css.md create mode 100644 static/usage/v8/fab/theming/css-custom-properties/angular/example_component_html.md create mode 100644 static/usage/v8/fab/theming/css-custom-properties/demo.html create mode 100644 static/usage/v8/fab/theming/css-custom-properties/index.md create mode 100644 static/usage/v8/fab/theming/css-custom-properties/javascript.md create mode 100644 static/usage/v8/fab/theming/css-custom-properties/react/main_css.md create mode 100644 static/usage/v8/fab/theming/css-custom-properties/react/main_tsx.md create mode 100644 static/usage/v8/fab/theming/css-custom-properties/vue.md create mode 100644 static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_css.md create mode 100644 static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_html.md create mode 100644 static/usage/v8/fab/theming/css-shadow-parts/demo.html create mode 100644 static/usage/v8/fab/theming/css-shadow-parts/index.md create mode 100644 static/usage/v8/fab/theming/css-shadow-parts/javascript.md create mode 100644 static/usage/v8/fab/theming/css-shadow-parts/react/main_css.md create mode 100644 static/usage/v8/fab/theming/css-shadow-parts/react/main_tsx.md create mode 100644 static/usage/v8/fab/theming/css-shadow-parts/vue.md create mode 100644 static/usage/v8/footer/basic/angular.md create mode 100644 static/usage/v8/footer/basic/demo.html create mode 100644 static/usage/v8/footer/basic/index.md create mode 100644 static/usage/v8/footer/basic/javascript.md create mode 100644 static/usage/v8/footer/basic/react.md create mode 100644 static/usage/v8/footer/basic/vue.md create mode 100644 static/usage/v8/footer/custom-scroll-target/angular/example_component_css.md create mode 100644 static/usage/v8/footer/custom-scroll-target/angular/example_component_html.md create mode 100644 static/usage/v8/footer/custom-scroll-target/demo.html create mode 100644 static/usage/v8/footer/custom-scroll-target/index.md create mode 100644 static/usage/v8/footer/custom-scroll-target/javascript.md create mode 100644 static/usage/v8/footer/custom-scroll-target/react/main_css.md create mode 100644 static/usage/v8/footer/custom-scroll-target/react/main_tsx.md create mode 100644 static/usage/v8/footer/custom-scroll-target/vue.md create mode 100644 static/usage/v8/footer/fade/angular.md create mode 100644 static/usage/v8/footer/fade/demo.html create mode 100644 static/usage/v8/footer/fade/index.md create mode 100644 static/usage/v8/footer/fade/javascript.md create mode 100644 static/usage/v8/footer/fade/react.md create mode 100644 static/usage/v8/footer/fade/vue.md create mode 100644 static/usage/v8/footer/no-border/angular.md create mode 100644 static/usage/v8/footer/no-border/demo.html create mode 100644 static/usage/v8/footer/no-border/index.md create mode 100644 static/usage/v8/footer/no-border/javascript.md create mode 100644 static/usage/v8/footer/no-border/react.md create mode 100644 static/usage/v8/footer/no-border/vue.md create mode 100644 static/usage/v8/footer/translucent/angular.md create mode 100644 static/usage/v8/footer/translucent/demo.html create mode 100644 static/usage/v8/footer/translucent/index.md create mode 100644 static/usage/v8/footer/translucent/javascript.md create mode 100644 static/usage/v8/footer/translucent/react.md create mode 100644 static/usage/v8/footer/translucent/vue.md create mode 100644 static/usage/v8/gestures/basic/angular/example_component_css.md create mode 100644 static/usage/v8/gestures/basic/angular/example_component_html.md create mode 100644 static/usage/v8/gestures/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/gestures/basic/demo.html create mode 100644 static/usage/v8/gestures/basic/index.md create mode 100644 static/usage/v8/gestures/basic/javascript.md create mode 100644 static/usage/v8/gestures/basic/react/main_css.md create mode 100644 static/usage/v8/gestures/basic/react/main_tsx.md create mode 100644 static/usage/v8/gestures/basic/vue.md create mode 100644 static/usage/v8/gestures/double-click/angular/example_component_css.md create mode 100644 static/usage/v8/gestures/double-click/angular/example_component_html.md create mode 100644 static/usage/v8/gestures/double-click/angular/example_component_ts.md create mode 100644 static/usage/v8/gestures/double-click/demo.html create mode 100644 static/usage/v8/gestures/double-click/index.md create mode 100644 static/usage/v8/gestures/double-click/javascript.md create mode 100644 static/usage/v8/gestures/double-click/react/main_css.md create mode 100644 static/usage/v8/gestures/double-click/react/main_tsx.md create mode 100644 static/usage/v8/gestures/double-click/vue.md create mode 100644 static/usage/v8/grid/basic/angular/example_component_css.md create mode 100644 static/usage/v8/grid/basic/angular/example_component_html.md create mode 100644 static/usage/v8/grid/basic/demo.html create mode 100644 static/usage/v8/grid/basic/index.md create mode 100644 static/usage/v8/grid/basic/javascript.md create mode 100644 static/usage/v8/grid/basic/react/main_css.md create mode 100644 static/usage/v8/grid/basic/react/main_tsx.md create mode 100644 static/usage/v8/grid/basic/vue.md create mode 100644 static/usage/v8/grid/customizing/column-number/angular/example_component_css.md create mode 100644 static/usage/v8/grid/customizing/column-number/angular/example_component_html.md create mode 100644 static/usage/v8/grid/customizing/column-number/demo.html create mode 100644 static/usage/v8/grid/customizing/column-number/index.md create mode 100644 static/usage/v8/grid/customizing/column-number/javascript.md create mode 100644 static/usage/v8/grid/customizing/column-number/react/main_css.md create mode 100644 static/usage/v8/grid/customizing/column-number/react/main_tsx.md create mode 100644 static/usage/v8/grid/customizing/column-number/vue.md create mode 100644 static/usage/v8/grid/customizing/padding/angular/example_component_css.md create mode 100644 static/usage/v8/grid/customizing/padding/angular/example_component_html.md create mode 100644 static/usage/v8/grid/customizing/padding/demo.html create mode 100644 static/usage/v8/grid/customizing/padding/index.md create mode 100644 static/usage/v8/grid/customizing/padding/javascript.md create mode 100644 static/usage/v8/grid/customizing/padding/react/main_css.md create mode 100644 static/usage/v8/grid/customizing/padding/react/main_tsx.md create mode 100644 static/usage/v8/grid/customizing/padding/vue.md create mode 100644 static/usage/v8/grid/customizing/width/angular/example_component_css.md create mode 100644 static/usage/v8/grid/customizing/width/angular/example_component_html.md create mode 100644 static/usage/v8/grid/customizing/width/demo.html create mode 100644 static/usage/v8/grid/customizing/width/index.md create mode 100644 static/usage/v8/grid/customizing/width/javascript.md create mode 100644 static/usage/v8/grid/customizing/width/react/main_css.md create mode 100644 static/usage/v8/grid/customizing/width/react/main_tsx.md create mode 100644 static/usage/v8/grid/customizing/width/vue.md create mode 100644 static/usage/v8/grid/fixed/angular/example_component_css.md create mode 100644 static/usage/v8/grid/fixed/angular/example_component_html.md create mode 100644 static/usage/v8/grid/fixed/demo.html create mode 100644 static/usage/v8/grid/fixed/index.md create mode 100644 static/usage/v8/grid/fixed/javascript.md create mode 100644 static/usage/v8/grid/fixed/react/main_css.md create mode 100644 static/usage/v8/grid/fixed/react/main_tsx.md create mode 100644 static/usage/v8/grid/fixed/vue.md create mode 100644 static/usage/v8/grid/horizontal-alignment/angular/example_component_css.md create mode 100644 static/usage/v8/grid/horizontal-alignment/angular/example_component_html.md create mode 100644 static/usage/v8/grid/horizontal-alignment/demo.html create mode 100644 static/usage/v8/grid/horizontal-alignment/index.md create mode 100644 static/usage/v8/grid/horizontal-alignment/javascript.md create mode 100644 static/usage/v8/grid/horizontal-alignment/react/main_css.md create mode 100644 static/usage/v8/grid/horizontal-alignment/react/main_tsx.md create mode 100644 static/usage/v8/grid/horizontal-alignment/vue.md create mode 100644 static/usage/v8/grid/offset-responsive/angular/example_component_css.md create mode 100644 static/usage/v8/grid/offset-responsive/angular/example_component_html.md create mode 100644 static/usage/v8/grid/offset-responsive/demo.html create mode 100644 static/usage/v8/grid/offset-responsive/index.md create mode 100644 static/usage/v8/grid/offset-responsive/javascript.md create mode 100644 static/usage/v8/grid/offset-responsive/react/main_css.md create mode 100644 static/usage/v8/grid/offset-responsive/react/main_tsx.md create mode 100644 static/usage/v8/grid/offset-responsive/vue.md create mode 100644 static/usage/v8/grid/offset/angular/example_component_css.md create mode 100644 static/usage/v8/grid/offset/angular/example_component_html.md create mode 100644 static/usage/v8/grid/offset/demo.html create mode 100644 static/usage/v8/grid/offset/index.md create mode 100644 static/usage/v8/grid/offset/javascript.md create mode 100644 static/usage/v8/grid/offset/react/main_css.md create mode 100644 static/usage/v8/grid/offset/react/main_tsx.md create mode 100644 static/usage/v8/grid/offset/vue.md create mode 100644 static/usage/v8/grid/push-pull-responsive/angular/example_component_css.md create mode 100644 static/usage/v8/grid/push-pull-responsive/angular/example_component_html.md create mode 100644 static/usage/v8/grid/push-pull-responsive/demo.html create mode 100644 static/usage/v8/grid/push-pull-responsive/index.md create mode 100644 static/usage/v8/grid/push-pull-responsive/javascript.md create mode 100644 static/usage/v8/grid/push-pull-responsive/react/main_css.md create mode 100644 static/usage/v8/grid/push-pull-responsive/react/main_tsx.md create mode 100644 static/usage/v8/grid/push-pull-responsive/vue.md create mode 100644 static/usage/v8/grid/push-pull/angular/example_component_css.md create mode 100644 static/usage/v8/grid/push-pull/angular/example_component_html.md create mode 100644 static/usage/v8/grid/push-pull/demo.html create mode 100644 static/usage/v8/grid/push-pull/index.md create mode 100644 static/usage/v8/grid/push-pull/javascript.md create mode 100644 static/usage/v8/grid/push-pull/react/main_css.md create mode 100644 static/usage/v8/grid/push-pull/react/main_tsx.md create mode 100644 static/usage/v8/grid/push-pull/vue.md create mode 100644 static/usage/v8/grid/size-auto/angular/example_component_css.md create mode 100644 static/usage/v8/grid/size-auto/angular/example_component_html.md create mode 100644 static/usage/v8/grid/size-auto/demo.html create mode 100644 static/usage/v8/grid/size-auto/index.md create mode 100644 static/usage/v8/grid/size-auto/javascript.md create mode 100644 static/usage/v8/grid/size-auto/react/main_css.md create mode 100644 static/usage/v8/grid/size-auto/react/main_tsx.md create mode 100644 static/usage/v8/grid/size-auto/vue.md create mode 100644 static/usage/v8/grid/size-responsive/angular/example_component_css.md create mode 100644 static/usage/v8/grid/size-responsive/angular/example_component_html.md create mode 100644 static/usage/v8/grid/size-responsive/demo.html create mode 100644 static/usage/v8/grid/size-responsive/index.md create mode 100644 static/usage/v8/grid/size-responsive/javascript.md create mode 100644 static/usage/v8/grid/size-responsive/react/main_css.md create mode 100644 static/usage/v8/grid/size-responsive/react/main_tsx.md create mode 100644 static/usage/v8/grid/size-responsive/vue.md create mode 100644 static/usage/v8/grid/size/angular/example_component_css.md create mode 100644 static/usage/v8/grid/size/angular/example_component_html.md create mode 100644 static/usage/v8/grid/size/demo.html create mode 100644 static/usage/v8/grid/size/index.md create mode 100644 static/usage/v8/grid/size/javascript.md create mode 100644 static/usage/v8/grid/size/react/main_css.md create mode 100644 static/usage/v8/grid/size/react/main_tsx.md create mode 100644 static/usage/v8/grid/size/vue.md create mode 100644 static/usage/v8/grid/vertical-alignment/angular/example_component_css.md create mode 100644 static/usage/v8/grid/vertical-alignment/angular/example_component_html.md create mode 100644 static/usage/v8/grid/vertical-alignment/demo.html create mode 100644 static/usage/v8/grid/vertical-alignment/index.md create mode 100644 static/usage/v8/grid/vertical-alignment/javascript.md create mode 100644 static/usage/v8/grid/vertical-alignment/react/main_css.md create mode 100644 static/usage/v8/grid/vertical-alignment/react/main_tsx.md create mode 100644 static/usage/v8/grid/vertical-alignment/vue.md create mode 100644 static/usage/v8/header/basic/angular.md create mode 100644 static/usage/v8/header/basic/demo.html create mode 100644 static/usage/v8/header/basic/index.md create mode 100644 static/usage/v8/header/basic/javascript.md create mode 100644 static/usage/v8/header/basic/react.md create mode 100644 static/usage/v8/header/basic/vue.md create mode 100644 static/usage/v8/header/condense/angular.md create mode 100644 static/usage/v8/header/condense/demo.html create mode 100644 static/usage/v8/header/condense/index.md create mode 100644 static/usage/v8/header/condense/javascript.md create mode 100644 static/usage/v8/header/condense/react.md create mode 100644 static/usage/v8/header/condense/vue.md create mode 100644 static/usage/v8/header/custom-scroll-target/angular/example_component_css.md create mode 100644 static/usage/v8/header/custom-scroll-target/angular/example_component_html.md create mode 100644 static/usage/v8/header/custom-scroll-target/demo.html create mode 100644 static/usage/v8/header/custom-scroll-target/index.md create mode 100644 static/usage/v8/header/custom-scroll-target/javascript.md create mode 100644 static/usage/v8/header/custom-scroll-target/react/main_css.md create mode 100644 static/usage/v8/header/custom-scroll-target/react/main_tsx.md create mode 100644 static/usage/v8/header/custom-scroll-target/vue.md create mode 100644 static/usage/v8/header/fade/angular.md create mode 100644 static/usage/v8/header/fade/demo.html create mode 100644 static/usage/v8/header/fade/index.md create mode 100644 static/usage/v8/header/fade/javascript.md create mode 100644 static/usage/v8/header/fade/react.md create mode 100644 static/usage/v8/header/fade/vue.md create mode 100644 static/usage/v8/header/no-border/angular.md create mode 100644 static/usage/v8/header/no-border/demo.html create mode 100644 static/usage/v8/header/no-border/index.md create mode 100644 static/usage/v8/header/no-border/javascript.md create mode 100644 static/usage/v8/header/no-border/react.md create mode 100644 static/usage/v8/header/no-border/vue.md create mode 100644 static/usage/v8/header/translucent/angular.md create mode 100644 static/usage/v8/header/translucent/demo.html create mode 100644 static/usage/v8/header/translucent/index.md create mode 100644 static/usage/v8/header/translucent/javascript.md create mode 100644 static/usage/v8/header/translucent/react.md create mode 100644 static/usage/v8/header/translucent/vue.md create mode 100644 static/usage/v8/icon/basic/angular.md create mode 100644 static/usage/v8/icon/basic/demo.html create mode 100644 static/usage/v8/icon/basic/index.md create mode 100644 static/usage/v8/icon/basic/javascript.md create mode 100644 static/usage/v8/icon/basic/react.md create mode 100644 static/usage/v8/icon/basic/vue.md create mode 100644 static/usage/v8/img/basic/angular.md create mode 100644 static/usage/v8/img/basic/demo.html create mode 100644 static/usage/v8/img/basic/index.md create mode 100644 static/usage/v8/img/basic/javascript.md create mode 100644 static/usage/v8/img/basic/react.md create mode 100644 static/usage/v8/img/basic/vue.md create mode 100644 static/usage/v8/infinite-scroll/basic/angular/example_component_html.md create mode 100644 static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/infinite-scroll/basic/demo.html create mode 100644 static/usage/v8/infinite-scroll/basic/index.md create mode 100644 static/usage/v8/infinite-scroll/basic/javascript.md create mode 100644 static/usage/v8/infinite-scroll/basic/react.md create mode 100644 static/usage/v8/infinite-scroll/basic/vue.md create mode 100644 static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md create mode 100644 static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md create mode 100644 static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md create mode 100644 static/usage/v8/infinite-scroll/custom-infinite-scroll-content/demo.html create mode 100644 static/usage/v8/infinite-scroll/custom-infinite-scroll-content/index.md create mode 100644 static/usage/v8/infinite-scroll/custom-infinite-scroll-content/javascript.md create mode 100644 static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_css.md create mode 100644 static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md create mode 100644 static/usage/v8/infinite-scroll/custom-infinite-scroll-content/vue.md create mode 100644 static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md create mode 100644 static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md create mode 100644 static/usage/v8/infinite-scroll/infinite-scroll-content/demo.html create mode 100644 static/usage/v8/infinite-scroll/infinite-scroll-content/index.md create mode 100644 static/usage/v8/infinite-scroll/infinite-scroll-content/javascript.md create mode 100644 static/usage/v8/infinite-scroll/infinite-scroll-content/react.md create mode 100644 static/usage/v8/infinite-scroll/infinite-scroll-content/vue.md create mode 100644 static/usage/v8/input/basic/angular.md create mode 100644 static/usage/v8/input/basic/demo.html create mode 100644 static/usage/v8/input/basic/index.md create mode 100644 static/usage/v8/input/basic/javascript.md create mode 100644 static/usage/v8/input/basic/react.md create mode 100644 static/usage/v8/input/basic/vue.md create mode 100644 static/usage/v8/input/clear/angular.md create mode 100644 static/usage/v8/input/clear/demo.html create mode 100644 static/usage/v8/input/clear/index.md create mode 100644 static/usage/v8/input/clear/javascript.md create mode 100644 static/usage/v8/input/clear/react.md create mode 100644 static/usage/v8/input/clear/vue.md create mode 100644 static/usage/v8/input/counter-alignment/angular.md create mode 100644 static/usage/v8/input/counter-alignment/demo.html create mode 100644 static/usage/v8/input/counter-alignment/index.md create mode 100644 static/usage/v8/input/counter-alignment/javascript.md create mode 100644 static/usage/v8/input/counter-alignment/react.md create mode 100644 static/usage/v8/input/counter-alignment/vue.md create mode 100644 static/usage/v8/input/counter/angular/example_component_html.md create mode 100644 static/usage/v8/input/counter/angular/example_component_ts.md create mode 100644 static/usage/v8/input/counter/demo.html create mode 100644 static/usage/v8/input/counter/index.md create mode 100644 static/usage/v8/input/counter/javascript.md create mode 100644 static/usage/v8/input/counter/react.md create mode 100644 static/usage/v8/input/counter/vue.md create mode 100644 static/usage/v8/input/fill/angular.md create mode 100644 static/usage/v8/input/fill/demo.html create mode 100644 static/usage/v8/input/fill/index.md create mode 100644 static/usage/v8/input/fill/javascript.md create mode 100644 static/usage/v8/input/fill/react.md create mode 100644 static/usage/v8/input/fill/vue.md create mode 100644 static/usage/v8/input/filtering/angular/example_component_html.md create mode 100644 static/usage/v8/input/filtering/angular/example_component_ts.md create mode 100644 static/usage/v8/input/filtering/demo.html create mode 100644 static/usage/v8/input/filtering/index.md create mode 100644 static/usage/v8/input/filtering/javascript.md create mode 100644 static/usage/v8/input/filtering/react.md create mode 100644 static/usage/v8/input/filtering/vue.md create mode 100644 static/usage/v8/input/helper-error/angular.md create mode 100644 static/usage/v8/input/helper-error/demo.html create mode 100644 static/usage/v8/input/helper-error/index.md create mode 100644 static/usage/v8/input/helper-error/javascript.md create mode 100644 static/usage/v8/input/helper-error/react.md create mode 100644 static/usage/v8/input/helper-error/vue.md create mode 100644 static/usage/v8/input/label-placement/angular.md create mode 100644 static/usage/v8/input/label-placement/demo.html create mode 100644 static/usage/v8/input/label-placement/index.md create mode 100644 static/usage/v8/input/label-placement/javascript.md create mode 100644 static/usage/v8/input/label-placement/react.md create mode 100644 static/usage/v8/input/label-placement/vue.md create mode 100644 static/usage/v8/input/label-slot/angular.md create mode 100644 static/usage/v8/input/label-slot/demo.html create mode 100644 static/usage/v8/input/label-slot/index.md create mode 100644 static/usage/v8/input/label-slot/javascript.md create mode 100644 static/usage/v8/input/label-slot/react.md create mode 100644 static/usage/v8/input/label-slot/vue.md create mode 100644 static/usage/v8/input/mask/angular/app_module_ts.md create mode 100644 static/usage/v8/input/mask/angular/example_component_html.md create mode 100644 static/usage/v8/input/mask/angular/example_component_ts.md create mode 100644 static/usage/v8/input/mask/demo.html create mode 100644 static/usage/v8/input/mask/index.md create mode 100644 static/usage/v8/input/mask/javascript/index_html.md create mode 100644 static/usage/v8/input/mask/javascript/index_ts.md create mode 100644 static/usage/v8/input/mask/react.md create mode 100644 static/usage/v8/input/mask/vue.md create mode 100644 static/usage/v8/input/migration/index.md create mode 100644 static/usage/v8/input/no-visible-label/angular.md create mode 100644 static/usage/v8/input/no-visible-label/demo.html create mode 100644 static/usage/v8/input/no-visible-label/index.md create mode 100644 static/usage/v8/input/no-visible-label/javascript.md create mode 100644 static/usage/v8/input/no-visible-label/react.md create mode 100644 static/usage/v8/input/no-visible-label/vue.md create mode 100644 static/usage/v8/input/set-focus/angular.md create mode 100644 static/usage/v8/input/set-focus/demo.html create mode 100644 static/usage/v8/input/set-focus/index.md create mode 100644 static/usage/v8/input/set-focus/javascript.md create mode 100644 static/usage/v8/input/set-focus/react.md create mode 100644 static/usage/v8/input/set-focus/vue.md create mode 100644 static/usage/v8/input/theming/colors/angular.md create mode 100644 static/usage/v8/input/theming/colors/demo.html create mode 100644 static/usage/v8/input/theming/colors/index.md create mode 100644 static/usage/v8/input/theming/colors/javascript.md create mode 100644 static/usage/v8/input/theming/colors/react.md create mode 100644 static/usage/v8/input/theming/colors/vue.md create mode 100644 static/usage/v8/input/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/input/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/input/theming/css-properties/angular/global_css.md create mode 100644 static/usage/v8/input/theming/css-properties/demo.html create mode 100644 static/usage/v8/input/theming/css-properties/index.md create mode 100644 static/usage/v8/input/theming/css-properties/javascript.md create mode 100644 static/usage/v8/input/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/input/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/input/theming/css-properties/vue.md create mode 100644 static/usage/v8/input/types/angular.md create mode 100644 static/usage/v8/input/types/demo.html create mode 100644 static/usage/v8/input/types/index.md create mode 100644 static/usage/v8/input/types/javascript.md create mode 100644 static/usage/v8/input/types/react.md create mode 100644 static/usage/v8/input/types/vue.md create mode 100644 static/usage/v8/item-divider/basic/angular.md create mode 100644 static/usage/v8/item-divider/basic/demo.html create mode 100644 static/usage/v8/item-divider/basic/index.md create mode 100644 static/usage/v8/item-divider/basic/javascript.md create mode 100644 static/usage/v8/item-divider/basic/react.md create mode 100644 static/usage/v8/item-divider/basic/vue.md create mode 100644 static/usage/v8/item-divider/theming/colors/angular.md create mode 100644 static/usage/v8/item-divider/theming/colors/demo.html create mode 100644 static/usage/v8/item-divider/theming/colors/index.md create mode 100644 static/usage/v8/item-divider/theming/colors/javascript.md create mode 100644 static/usage/v8/item-divider/theming/colors/react.md create mode 100644 static/usage/v8/item-divider/theming/colors/vue.md create mode 100644 static/usage/v8/item-divider/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/item-divider/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/item-divider/theming/css-properties/demo.html create mode 100644 static/usage/v8/item-divider/theming/css-properties/index.md create mode 100644 static/usage/v8/item-divider/theming/css-properties/javascript.md create mode 100644 static/usage/v8/item-divider/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/item-divider/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/item-divider/theming/css-properties/vue.md create mode 100644 static/usage/v8/item-group/basic/angular.md create mode 100644 static/usage/v8/item-group/basic/demo.html create mode 100644 static/usage/v8/item-group/basic/index.md create mode 100644 static/usage/v8/item-group/basic/javascript.md create mode 100644 static/usage/v8/item-group/basic/react.md create mode 100644 static/usage/v8/item-group/basic/vue.md create mode 100644 static/usage/v8/item-group/sliding-items/angular.md create mode 100644 static/usage/v8/item-group/sliding-items/demo.html create mode 100644 static/usage/v8/item-group/sliding-items/index.md create mode 100644 static/usage/v8/item-group/sliding-items/javascript.md create mode 100644 static/usage/v8/item-group/sliding-items/react.md create mode 100644 static/usage/v8/item-group/sliding-items/vue.md create mode 100644 static/usage/v8/item-sliding/basic/angular.md create mode 100644 static/usage/v8/item-sliding/basic/demo.html create mode 100644 static/usage/v8/item-sliding/basic/index.md create mode 100644 static/usage/v8/item-sliding/basic/javascript.md create mode 100644 static/usage/v8/item-sliding/basic/react.md create mode 100644 static/usage/v8/item-sliding/basic/vue.md create mode 100644 static/usage/v8/item-sliding/expandable/angular.md create mode 100644 static/usage/v8/item-sliding/expandable/demo.html create mode 100644 static/usage/v8/item-sliding/expandable/index.md create mode 100644 static/usage/v8/item-sliding/expandable/javascript.md create mode 100644 static/usage/v8/item-sliding/expandable/react.md create mode 100644 static/usage/v8/item-sliding/expandable/vue.md create mode 100644 static/usage/v8/item-sliding/icons/angular.md create mode 100644 static/usage/v8/item-sliding/icons/demo.html create mode 100644 static/usage/v8/item-sliding/icons/index.md create mode 100644 static/usage/v8/item-sliding/icons/javascript.md create mode 100644 static/usage/v8/item-sliding/icons/react.md create mode 100644 static/usage/v8/item-sliding/icons/vue.md create mode 100644 static/usage/v8/item/basic/angular.md create mode 100644 static/usage/v8/item/basic/demo.html create mode 100644 static/usage/v8/item/basic/index.md create mode 100644 static/usage/v8/item/basic/javascript.md create mode 100644 static/usage/v8/item/basic/react.md create mode 100644 static/usage/v8/item/basic/vue.md create mode 100644 static/usage/v8/item/buttons/angular.md create mode 100644 static/usage/v8/item/buttons/demo.html create mode 100644 static/usage/v8/item/buttons/index.md create mode 100644 static/usage/v8/item/buttons/javascript.md create mode 100644 static/usage/v8/item/buttons/react.md create mode 100644 static/usage/v8/item/buttons/vue.md create mode 100644 static/usage/v8/item/clickable/angular.md create mode 100644 static/usage/v8/item/clickable/demo.html create mode 100644 static/usage/v8/item/clickable/index.md create mode 100644 static/usage/v8/item/clickable/javascript.md create mode 100644 static/usage/v8/item/clickable/react.md create mode 100644 static/usage/v8/item/clickable/vue.md create mode 100644 static/usage/v8/item/content-types/actions/angular.md create mode 100644 static/usage/v8/item/content-types/actions/demo.html create mode 100644 static/usage/v8/item/content-types/actions/index.md create mode 100644 static/usage/v8/item/content-types/actions/javascript.md create mode 100644 static/usage/v8/item/content-types/actions/react.md create mode 100644 static/usage/v8/item/content-types/actions/vue.md create mode 100644 static/usage/v8/item/content-types/controls/angular.md create mode 100644 static/usage/v8/item/content-types/controls/demo.html create mode 100644 static/usage/v8/item/content-types/controls/index.md create mode 100644 static/usage/v8/item/content-types/controls/javascript.md create mode 100644 static/usage/v8/item/content-types/controls/react.md create mode 100644 static/usage/v8/item/content-types/controls/vue.md create mode 100644 static/usage/v8/item/content-types/metadata/angular/example_component_css.md create mode 100644 static/usage/v8/item/content-types/metadata/angular/example_component_html.md create mode 100644 static/usage/v8/item/content-types/metadata/demo.html create mode 100644 static/usage/v8/item/content-types/metadata/index.md create mode 100644 static/usage/v8/item/content-types/metadata/javascript.md create mode 100644 static/usage/v8/item/content-types/metadata/react/main_css.md create mode 100644 static/usage/v8/item/content-types/metadata/react/main_tsx.md create mode 100644 static/usage/v8/item/content-types/metadata/vue.md create mode 100644 static/usage/v8/item/content-types/supporting-visuals/angular.md create mode 100644 static/usage/v8/item/content-types/supporting-visuals/demo.html create mode 100644 static/usage/v8/item/content-types/supporting-visuals/index.md create mode 100644 static/usage/v8/item/content-types/supporting-visuals/javascript.md create mode 100644 static/usage/v8/item/content-types/supporting-visuals/react.md create mode 100644 static/usage/v8/item/content-types/supporting-visuals/vue.md create mode 100644 static/usage/v8/item/content-types/text/angular/example_component_css.md create mode 100644 static/usage/v8/item/content-types/text/angular/example_component_html.md create mode 100644 static/usage/v8/item/content-types/text/demo.html create mode 100644 static/usage/v8/item/content-types/text/index.md create mode 100644 static/usage/v8/item/content-types/text/javascript.md create mode 100644 static/usage/v8/item/content-types/text/react/main_css.md create mode 100644 static/usage/v8/item/content-types/text/react/main_tsx.md create mode 100644 static/usage/v8/item/content-types/text/vue.md create mode 100644 static/usage/v8/item/detail-arrows/angular.md create mode 100644 static/usage/v8/item/detail-arrows/demo.html create mode 100644 static/usage/v8/item/detail-arrows/index.md create mode 100644 static/usage/v8/item/detail-arrows/javascript.md create mode 100644 static/usage/v8/item/detail-arrows/react.md create mode 100644 static/usage/v8/item/detail-arrows/vue.md create mode 100644 static/usage/v8/item/icons/angular.md create mode 100644 static/usage/v8/item/icons/demo.html create mode 100644 static/usage/v8/item/icons/index.md create mode 100644 static/usage/v8/item/icons/javascript.md create mode 100644 static/usage/v8/item/icons/react.md create mode 100644 static/usage/v8/item/icons/vue.md create mode 100644 static/usage/v8/item/inputs/angular.md create mode 100644 static/usage/v8/item/inputs/demo.html create mode 100644 static/usage/v8/item/inputs/index.md create mode 100644 static/usage/v8/item/inputs/javascript.md create mode 100644 static/usage/v8/item/inputs/react.md create mode 100644 static/usage/v8/item/inputs/vue.md create mode 100644 static/usage/v8/item/lines/angular.md create mode 100644 static/usage/v8/item/lines/demo.html create mode 100644 static/usage/v8/item/lines/index.md create mode 100644 static/usage/v8/item/lines/javascript.md create mode 100644 static/usage/v8/item/lines/react.md create mode 100644 static/usage/v8/item/lines/vue.md create mode 100644 static/usage/v8/item/media/angular.md create mode 100644 static/usage/v8/item/media/demo.html create mode 100644 static/usage/v8/item/media/index.md create mode 100644 static/usage/v8/item/media/javascript.md create mode 100644 static/usage/v8/item/media/react.md create mode 100644 static/usage/v8/item/media/vue.md create mode 100644 static/usage/v8/item/theming/colors/angular.md create mode 100644 static/usage/v8/item/theming/colors/demo.html create mode 100644 static/usage/v8/item/theming/colors/index.md create mode 100644 static/usage/v8/item/theming/colors/javascript.md create mode 100644 static/usage/v8/item/theming/colors/react.md create mode 100644 static/usage/v8/item/theming/colors/vue.md create mode 100644 static/usage/v8/item/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/item/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/item/theming/css-properties/demo.html create mode 100644 static/usage/v8/item/theming/css-properties/index.md create mode 100644 static/usage/v8/item/theming/css-properties/javascript.md create mode 100644 static/usage/v8/item/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/item/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/item/theming/css-properties/vue.md create mode 100644 static/usage/v8/item/theming/css-shadow-parts/angular/example_component_css.md create mode 100644 static/usage/v8/item/theming/css-shadow-parts/angular/example_component_html.md create mode 100644 static/usage/v8/item/theming/css-shadow-parts/demo.html create mode 100644 static/usage/v8/item/theming/css-shadow-parts/index.md create mode 100644 static/usage/v8/item/theming/css-shadow-parts/javascript.md create mode 100644 static/usage/v8/item/theming/css-shadow-parts/react/main_css.md create mode 100644 static/usage/v8/item/theming/css-shadow-parts/react/main_tsx.md create mode 100644 static/usage/v8/item/theming/css-shadow-parts/vue.md create mode 100644 static/usage/v8/item/theming/input-highlight/angular/example_component_css.md create mode 100644 static/usage/v8/item/theming/input-highlight/angular/example_component_html.md create mode 100644 static/usage/v8/item/theming/input-highlight/demo.html create mode 100644 static/usage/v8/item/theming/input-highlight/index.md create mode 100644 static/usage/v8/item/theming/input-highlight/javascript.md create mode 100644 static/usage/v8/item/theming/input-highlight/react/main_css.md create mode 100644 static/usage/v8/item/theming/input-highlight/react/main_tsx.md create mode 100644 static/usage/v8/item/theming/input-highlight/vue.md create mode 100644 static/usage/v8/keyboard/enterkeyhint/angular.md create mode 100644 static/usage/v8/keyboard/enterkeyhint/demo.html create mode 100644 static/usage/v8/keyboard/enterkeyhint/index.md create mode 100644 static/usage/v8/keyboard/enterkeyhint/javascript.md create mode 100644 static/usage/v8/keyboard/enterkeyhint/react.md create mode 100644 static/usage/v8/keyboard/enterkeyhint/vue.md create mode 100644 static/usage/v8/keyboard/inputmode/angular.md create mode 100644 static/usage/v8/keyboard/inputmode/demo.html create mode 100644 static/usage/v8/keyboard/inputmode/index.md create mode 100644 static/usage/v8/keyboard/inputmode/javascript.md create mode 100644 static/usage/v8/keyboard/inputmode/react.md create mode 100644 static/usage/v8/keyboard/inputmode/vue.md create mode 100644 static/usage/v8/label/basic/angular.md create mode 100644 static/usage/v8/label/basic/demo.html create mode 100644 static/usage/v8/label/basic/index.md create mode 100644 static/usage/v8/label/basic/javascript.md create mode 100644 static/usage/v8/label/basic/react.md create mode 100644 static/usage/v8/label/basic/vue.md create mode 100644 static/usage/v8/label/input/angular.md create mode 100644 static/usage/v8/label/input/demo.html create mode 100644 static/usage/v8/label/input/index.md create mode 100644 static/usage/v8/label/input/javascript.md create mode 100644 static/usage/v8/label/input/react.md create mode 100644 static/usage/v8/label/input/vue.md create mode 100644 static/usage/v8/label/item/angular.md create mode 100644 static/usage/v8/label/item/demo.html create mode 100644 static/usage/v8/label/item/index.md create mode 100644 static/usage/v8/label/item/javascript.md create mode 100644 static/usage/v8/label/item/react.md create mode 100644 static/usage/v8/label/item/vue.md create mode 100644 static/usage/v8/label/theming/colors/angular.md create mode 100644 static/usage/v8/label/theming/colors/demo.html create mode 100644 static/usage/v8/label/theming/colors/index.md create mode 100644 static/usage/v8/label/theming/colors/javascript.md create mode 100644 static/usage/v8/label/theming/colors/react.md create mode 100644 static/usage/v8/label/theming/colors/vue.md create mode 100644 static/usage/v8/layout/dynamic-font-scaling/angular/example_component_html.md create mode 100644 static/usage/v8/layout/dynamic-font-scaling/angular/global_css.md create mode 100644 static/usage/v8/layout/dynamic-font-scaling/demo.html create mode 100644 static/usage/v8/layout/dynamic-font-scaling/index.md create mode 100644 static/usage/v8/layout/dynamic-font-scaling/javascript.md create mode 100644 static/usage/v8/layout/dynamic-font-scaling/react/main_css.md create mode 100644 static/usage/v8/layout/dynamic-font-scaling/react/main_tsx.md create mode 100644 static/usage/v8/layout/dynamic-font-scaling/vue.md create mode 100644 static/usage/v8/list-header/basic/angular.md create mode 100644 static/usage/v8/list-header/basic/demo.html create mode 100644 static/usage/v8/list-header/basic/index.md create mode 100644 static/usage/v8/list-header/basic/javascript.md create mode 100644 static/usage/v8/list-header/basic/react.md create mode 100644 static/usage/v8/list-header/basic/vue.md create mode 100644 static/usage/v8/list-header/buttons/angular.md create mode 100644 static/usage/v8/list-header/buttons/demo.html create mode 100644 static/usage/v8/list-header/buttons/index.md create mode 100644 static/usage/v8/list-header/buttons/javascript.md create mode 100644 static/usage/v8/list-header/buttons/react.md create mode 100644 static/usage/v8/list-header/buttons/vue.md create mode 100644 static/usage/v8/list-header/lines/angular.md create mode 100644 static/usage/v8/list-header/lines/demo.html create mode 100644 static/usage/v8/list-header/lines/index.md create mode 100644 static/usage/v8/list-header/lines/javascript.md create mode 100644 static/usage/v8/list-header/lines/react.md create mode 100644 static/usage/v8/list-header/lines/vue.md create mode 100644 static/usage/v8/list-header/theming/colors/angular.md create mode 100644 static/usage/v8/list-header/theming/colors/demo.html create mode 100644 static/usage/v8/list-header/theming/colors/index.md create mode 100644 static/usage/v8/list-header/theming/colors/javascript.md create mode 100644 static/usage/v8/list-header/theming/colors/react.md create mode 100644 static/usage/v8/list-header/theming/colors/vue.md create mode 100644 static/usage/v8/list-header/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/list-header/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/list-header/theming/css-properties/demo.html create mode 100644 static/usage/v8/list-header/theming/css-properties/index.md create mode 100644 static/usage/v8/list-header/theming/css-properties/javascript.md create mode 100644 static/usage/v8/list-header/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/list-header/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/list-header/theming/css-properties/vue.md create mode 100644 static/usage/v8/list/basic/angular.md create mode 100644 static/usage/v8/list/basic/demo.html create mode 100644 static/usage/v8/list/basic/index.md create mode 100644 static/usage/v8/list/basic/javascript.md create mode 100644 static/usage/v8/list/basic/react.md create mode 100644 static/usage/v8/list/basic/vue.md create mode 100644 static/usage/v8/list/inset/angular.md create mode 100644 static/usage/v8/list/inset/demo.html create mode 100644 static/usage/v8/list/inset/index.md create mode 100644 static/usage/v8/list/inset/javascript.md create mode 100644 static/usage/v8/list/inset/react.md create mode 100644 static/usage/v8/list/inset/vue.md create mode 100644 static/usage/v8/list/lines/angular.md create mode 100644 static/usage/v8/list/lines/demo.html create mode 100644 static/usage/v8/list/lines/index.md create mode 100644 static/usage/v8/list/lines/javascript.md create mode 100644 static/usage/v8/list/lines/react.md create mode 100644 static/usage/v8/list/lines/vue.md create mode 100644 static/usage/v8/loading/controller/angular/example_component_html.md create mode 100644 static/usage/v8/loading/controller/angular/example_component_ts.md create mode 100644 static/usage/v8/loading/controller/demo.html create mode 100644 static/usage/v8/loading/controller/index.md create mode 100644 static/usage/v8/loading/controller/javascript.md create mode 100644 static/usage/v8/loading/controller/react.md create mode 100644 static/usage/v8/loading/controller/vue.md create mode 100644 static/usage/v8/loading/inline/angular.md create mode 100644 static/usage/v8/loading/inline/demo.html create mode 100644 static/usage/v8/loading/inline/index.md create mode 100644 static/usage/v8/loading/inline/javascript.md create mode 100644 static/usage/v8/loading/inline/react.md create mode 100644 static/usage/v8/loading/inline/vue.md create mode 100644 static/usage/v8/loading/spinners/angular.md create mode 100644 static/usage/v8/loading/spinners/demo.html create mode 100644 static/usage/v8/loading/spinners/index.md create mode 100644 static/usage/v8/loading/spinners/javascript.md create mode 100644 static/usage/v8/loading/spinners/react.md create mode 100644 static/usage/v8/loading/spinners/vue.md create mode 100644 static/usage/v8/loading/theming/angular/example_component_html.md create mode 100644 static/usage/v8/loading/theming/angular/global_css.md create mode 100644 static/usage/v8/loading/theming/demo.html create mode 100644 static/usage/v8/loading/theming/index.md create mode 100644 static/usage/v8/loading/theming/javascript.md create mode 100644 static/usage/v8/loading/theming/react/main_css.md create mode 100644 static/usage/v8/loading/theming/react/main_tsx.md create mode 100644 static/usage/v8/loading/theming/vue.md create mode 100644 static/usage/v8/menu/basic/angular.md create mode 100644 static/usage/v8/menu/basic/demo.html create mode 100644 static/usage/v8/menu/basic/index.md create mode 100644 static/usage/v8/menu/basic/javascript.md create mode 100644 static/usage/v8/menu/basic/react.md create mode 100644 static/usage/v8/menu/basic/vue.md create mode 100644 static/usage/v8/menu/multiple/angular/example_component_html.md create mode 100644 static/usage/v8/menu/multiple/angular/example_component_ts.md create mode 100644 static/usage/v8/menu/multiple/demo.html create mode 100644 static/usage/v8/menu/multiple/index.md create mode 100644 static/usage/v8/menu/multiple/javascript.md create mode 100644 static/usage/v8/menu/multiple/react.md create mode 100644 static/usage/v8/menu/multiple/vue.md create mode 100644 static/usage/v8/menu/sides/angular.md create mode 100644 static/usage/v8/menu/sides/demo.html create mode 100644 static/usage/v8/menu/sides/index.md create mode 100644 static/usage/v8/menu/sides/javascript.md create mode 100644 static/usage/v8/menu/sides/react.md create mode 100644 static/usage/v8/menu/sides/vue.md create mode 100644 static/usage/v8/menu/theming/angular/example_component_css.md create mode 100644 static/usage/v8/menu/theming/angular/example_component_html.md create mode 100644 static/usage/v8/menu/theming/demo.html create mode 100644 static/usage/v8/menu/theming/index.md create mode 100644 static/usage/v8/menu/theming/javascript.md create mode 100644 static/usage/v8/menu/theming/react/main_css.md create mode 100644 static/usage/v8/menu/theming/react/main_tsx.md create mode 100644 static/usage/v8/menu/theming/vue.md create mode 100644 static/usage/v8/menu/toggle/angular.md create mode 100644 static/usage/v8/menu/toggle/demo.html create mode 100644 static/usage/v8/menu/toggle/index.md create mode 100644 static/usage/v8/menu/toggle/javascript.md create mode 100644 static/usage/v8/menu/toggle/react.md create mode 100644 static/usage/v8/menu/toggle/vue.md create mode 100644 static/usage/v8/menu/type/angular/example_component_html.md create mode 100644 static/usage/v8/menu/type/angular/example_component_ts.md create mode 100644 static/usage/v8/menu/type/demo.html create mode 100644 static/usage/v8/menu/type/index.md create mode 100644 static/usage/v8/menu/type/javascript.md create mode 100644 static/usage/v8/menu/type/react.md create mode 100644 static/usage/v8/menu/type/vue.md create mode 100644 static/usage/v8/modal/can-dismiss/boolean/angular/example_component_html.md create mode 100644 static/usage/v8/modal/can-dismiss/boolean/angular/example_component_ts.md create mode 100644 static/usage/v8/modal/can-dismiss/boolean/demo.html create mode 100644 static/usage/v8/modal/can-dismiss/boolean/index.md create mode 100644 static/usage/v8/modal/can-dismiss/boolean/javascript.md create mode 100644 static/usage/v8/modal/can-dismiss/boolean/react.md create mode 100644 static/usage/v8/modal/can-dismiss/boolean/vue.md create mode 100644 static/usage/v8/modal/can-dismiss/child-state/angular/app_module_ts.md create mode 100644 static/usage/v8/modal/can-dismiss/child-state/angular/child_component_html.md create mode 100644 static/usage/v8/modal/can-dismiss/child-state/angular/child_component_ts.md create mode 100644 static/usage/v8/modal/can-dismiss/child-state/angular/example_component_html.md create mode 100644 static/usage/v8/modal/can-dismiss/child-state/angular/example_component_ts.md create mode 100644 static/usage/v8/modal/can-dismiss/child-state/demo.html create mode 100644 static/usage/v8/modal/can-dismiss/child-state/index.md create mode 100644 static/usage/v8/modal/can-dismiss/child-state/react/child_tsx.md create mode 100644 static/usage/v8/modal/can-dismiss/child-state/react/main_tsx.md create mode 100644 static/usage/v8/modal/can-dismiss/child-state/vue/child_vue.md create mode 100644 static/usage/v8/modal/can-dismiss/child-state/vue/example_vue.md create mode 100644 static/usage/v8/modal/can-dismiss/function/angular/example_component_html.md create mode 100644 static/usage/v8/modal/can-dismiss/function/angular/example_component_ts.md create mode 100644 static/usage/v8/modal/can-dismiss/function/demo.html create mode 100644 static/usage/v8/modal/can-dismiss/function/index.md create mode 100644 static/usage/v8/modal/can-dismiss/function/javascript.md create mode 100644 static/usage/v8/modal/can-dismiss/function/react.md create mode 100644 static/usage/v8/modal/can-dismiss/function/vue.md create mode 100644 static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md create mode 100644 static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md create mode 100644 static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/demo.html create mode 100644 static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/index.md create mode 100644 static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/javascript.md create mode 100644 static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/react.md create mode 100644 static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/vue.md create mode 100644 static/usage/v8/modal/card/basic/angular/example_component_html.md create mode 100644 static/usage/v8/modal/card/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/modal/card/basic/demo.html create mode 100644 static/usage/v8/modal/card/basic/index.md create mode 100644 static/usage/v8/modal/card/basic/javascript.md create mode 100644 static/usage/v8/modal/card/basic/react.md create mode 100644 static/usage/v8/modal/card/basic/vue.md create mode 100644 static/usage/v8/modal/controller/angular/app_module_ts.md create mode 100644 static/usage/v8/modal/controller/angular/example_component_html.md create mode 100644 static/usage/v8/modal/controller/angular/example_component_ts.md create mode 100644 static/usage/v8/modal/controller/angular/modal-example_component_html.md create mode 100644 static/usage/v8/modal/controller/angular/modal-example_component_ts.md create mode 100644 static/usage/v8/modal/controller/demo.html create mode 100644 static/usage/v8/modal/controller/index.md create mode 100644 static/usage/v8/modal/controller/javascript.md create mode 100644 static/usage/v8/modal/controller/react.md create mode 100644 static/usage/v8/modal/controller/vue/example_vue.md create mode 100644 static/usage/v8/modal/controller/vue/modal_vue.md create mode 100644 static/usage/v8/modal/custom-dialogs/angular/example_component_html.md create mode 100644 static/usage/v8/modal/custom-dialogs/angular/global_css.md create mode 100644 static/usage/v8/modal/custom-dialogs/demo.html create mode 100644 static/usage/v8/modal/custom-dialogs/index.md create mode 100644 static/usage/v8/modal/custom-dialogs/javascript.md create mode 100644 static/usage/v8/modal/custom-dialogs/react/main_css.md create mode 100644 static/usage/v8/modal/custom-dialogs/react/main_tsx.md create mode 100644 static/usage/v8/modal/custom-dialogs/vue.md create mode 100644 static/usage/v8/modal/inline/basic/angular/example_component_html.md create mode 100644 static/usage/v8/modal/inline/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/modal/inline/basic/demo.html create mode 100644 static/usage/v8/modal/inline/basic/index.md create mode 100644 static/usage/v8/modal/inline/basic/javascript.md create mode 100644 static/usage/v8/modal/inline/basic/react.md create mode 100644 static/usage/v8/modal/inline/basic/vue.md create mode 100644 static/usage/v8/modal/inline/is-open/angular/example_component_html.md create mode 100644 static/usage/v8/modal/inline/is-open/angular/example_component_ts.md create mode 100644 static/usage/v8/modal/inline/is-open/demo.html create mode 100644 static/usage/v8/modal/inline/is-open/index.md create mode 100644 static/usage/v8/modal/inline/is-open/javascript.md create mode 100644 static/usage/v8/modal/inline/is-open/react.md create mode 100644 static/usage/v8/modal/inline/is-open/vue.md create mode 100644 static/usage/v8/modal/performance/mount/angular.md create mode 100644 static/usage/v8/modal/performance/mount/demo.html create mode 100644 static/usage/v8/modal/performance/mount/index.md create mode 100644 static/usage/v8/modal/performance/mount/javascript.md create mode 100644 static/usage/v8/modal/performance/mount/react.md create mode 100644 static/usage/v8/modal/performance/mount/vue.md create mode 100644 static/usage/v8/modal/sheet/auto-height/angular/example_component_css.md create mode 100644 static/usage/v8/modal/sheet/auto-height/angular/example_component_html.md create mode 100644 static/usage/v8/modal/sheet/auto-height/demo.html create mode 100644 static/usage/v8/modal/sheet/auto-height/index.md create mode 100644 static/usage/v8/modal/sheet/auto-height/javascript.md create mode 100644 static/usage/v8/modal/sheet/auto-height/react/main_css.md create mode 100644 static/usage/v8/modal/sheet/auto-height/react/main_tsx.md create mode 100644 static/usage/v8/modal/sheet/auto-height/vue.md create mode 100644 static/usage/v8/modal/sheet/background-content/angular/example_component_css.md create mode 100644 static/usage/v8/modal/sheet/background-content/angular/example_component_html.md create mode 100644 static/usage/v8/modal/sheet/background-content/angular/example_component_ts.md create mode 100644 static/usage/v8/modal/sheet/background-content/demo.html create mode 100644 static/usage/v8/modal/sheet/background-content/index.md create mode 100644 static/usage/v8/modal/sheet/background-content/javascript.md create mode 100644 static/usage/v8/modal/sheet/background-content/react.md create mode 100644 static/usage/v8/modal/sheet/background-content/vue.md create mode 100644 static/usage/v8/modal/sheet/basic/angular.md create mode 100644 static/usage/v8/modal/sheet/basic/demo.html create mode 100644 static/usage/v8/modal/sheet/basic/index.md create mode 100644 static/usage/v8/modal/sheet/basic/javascript.md create mode 100644 static/usage/v8/modal/sheet/basic/react.md create mode 100644 static/usage/v8/modal/sheet/basic/vue.md create mode 100644 static/usage/v8/modal/sheet/handle-behavior/angular.md create mode 100644 static/usage/v8/modal/sheet/handle-behavior/demo.html create mode 100644 static/usage/v8/modal/sheet/handle-behavior/index.md create mode 100644 static/usage/v8/modal/sheet/handle-behavior/javascript.md create mode 100644 static/usage/v8/modal/sheet/handle-behavior/react.md create mode 100644 static/usage/v8/modal/sheet/handle-behavior/vue.md create mode 100644 static/usage/v8/modal/styling/animations/angular/example_component_html.md create mode 100644 static/usage/v8/modal/styling/animations/angular/example_component_ts.md create mode 100644 static/usage/v8/modal/styling/animations/demo.html create mode 100644 static/usage/v8/modal/styling/animations/index.md create mode 100644 static/usage/v8/modal/styling/animations/javascript/index_html.md create mode 100644 static/usage/v8/modal/styling/animations/javascript/index_ts.md create mode 100644 static/usage/v8/modal/styling/animations/react.md create mode 100644 static/usage/v8/modal/styling/animations/vue.md create mode 100644 static/usage/v8/modal/styling/theming/angular/example_component_html.md create mode 100644 static/usage/v8/modal/styling/theming/angular/global_css.md create mode 100644 static/usage/v8/modal/styling/theming/demo.html create mode 100644 static/usage/v8/modal/styling/theming/index.md create mode 100644 static/usage/v8/modal/styling/theming/javascript.md create mode 100644 static/usage/v8/modal/styling/theming/react/main_css.md create mode 100644 static/usage/v8/modal/styling/theming/react/main_tsx.md create mode 100644 static/usage/v8/modal/styling/theming/vue.md create mode 100644 static/usage/v8/nav/modal-navigation/angular/app_module_ts.md create mode 100644 static/usage/v8/nav/modal-navigation/angular/example_component_html.md create mode 100644 static/usage/v8/nav/modal-navigation/angular/example_component_ts.md create mode 100644 static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md create mode 100644 static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md create mode 100644 static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md create mode 100644 static/usage/v8/nav/modal-navigation/demo.html create mode 100644 static/usage/v8/nav/modal-navigation/index.md create mode 100644 static/usage/v8/nav/modal-navigation/javascript.md create mode 100644 static/usage/v8/nav/modal-navigation/react/main_tsx.md create mode 100644 static/usage/v8/nav/modal-navigation/react/page_one_tsx.md create mode 100644 static/usage/v8/nav/modal-navigation/react/page_three_tsx.md create mode 100644 static/usage/v8/nav/modal-navigation/react/page_two_tsx.md create mode 100644 static/usage/v8/nav/modal-navigation/vue/example_vue.md create mode 100644 static/usage/v8/nav/modal-navigation/vue/page_one_vue.md create mode 100644 static/usage/v8/nav/modal-navigation/vue/page_three_vue.md create mode 100644 static/usage/v8/nav/modal-navigation/vue/page_two_vue.md create mode 100644 static/usage/v8/nav/nav-link/angular/app_module_ts.md create mode 100644 static/usage/v8/nav/nav-link/angular/example_component_html.md create mode 100644 static/usage/v8/nav/nav-link/angular/example_component_ts.md create mode 100644 static/usage/v8/nav/nav-link/angular/page_one_component_ts.md create mode 100644 static/usage/v8/nav/nav-link/angular/page_three_component_ts.md create mode 100644 static/usage/v8/nav/nav-link/angular/page_two_component_ts.md create mode 100644 static/usage/v8/nav/nav-link/demo.html create mode 100644 static/usage/v8/nav/nav-link/index.md create mode 100644 static/usage/v8/nav/nav-link/javascript.md create mode 100644 static/usage/v8/nav/nav-link/react/main_tsx.md create mode 100644 static/usage/v8/nav/nav-link/react/page_one_tsx.md create mode 100644 static/usage/v8/nav/nav-link/react/page_three_tsx.md create mode 100644 static/usage/v8/nav/nav-link/react/page_two_tsx.md create mode 100644 static/usage/v8/nav/nav-link/vue/example_vue.md create mode 100644 static/usage/v8/nav/nav-link/vue/page_one_vue.md create mode 100644 static/usage/v8/nav/nav-link/vue/page_three_vue.md create mode 100644 static/usage/v8/nav/nav-link/vue/page_two_vue.md create mode 100644 static/usage/v8/note/basic/angular.md create mode 100644 static/usage/v8/note/basic/demo.html create mode 100644 static/usage/v8/note/basic/index.md create mode 100644 static/usage/v8/note/basic/javascript.md create mode 100644 static/usage/v8/note/basic/react.md create mode 100644 static/usage/v8/note/basic/vue.md create mode 100644 static/usage/v8/note/item/angular.md create mode 100644 static/usage/v8/note/item/demo.html create mode 100644 static/usage/v8/note/item/index.md create mode 100644 static/usage/v8/note/item/javascript.md create mode 100644 static/usage/v8/note/item/react.md create mode 100644 static/usage/v8/note/item/vue.md create mode 100644 static/usage/v8/note/theming/colors/angular.md create mode 100644 static/usage/v8/note/theming/colors/demo.html create mode 100644 static/usage/v8/note/theming/colors/index.md create mode 100644 static/usage/v8/note/theming/colors/javascript.md create mode 100644 static/usage/v8/note/theming/colors/react.md create mode 100644 static/usage/v8/note/theming/colors/vue.md create mode 100644 static/usage/v8/note/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/note/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/note/theming/css-properties/demo.html create mode 100644 static/usage/v8/note/theming/css-properties/index.md create mode 100644 static/usage/v8/note/theming/css-properties/javascript.md create mode 100644 static/usage/v8/note/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/note/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/note/theming/css-properties/vue.md create mode 100644 static/usage/v8/picker/controller/angular/example_component_html.md create mode 100644 static/usage/v8/picker/controller/angular/example_component_ts.md create mode 100644 static/usage/v8/picker/controller/demo.html create mode 100644 static/usage/v8/picker/controller/index.md create mode 100644 static/usage/v8/picker/controller/javascript.md create mode 100644 static/usage/v8/picker/controller/react.md create mode 100644 static/usage/v8/picker/controller/vue.md create mode 100644 static/usage/v8/picker/inline/isOpen/angular/example_component_html.md create mode 100644 static/usage/v8/picker/inline/isOpen/angular/example_component_ts.md create mode 100644 static/usage/v8/picker/inline/isOpen/demo.html create mode 100644 static/usage/v8/picker/inline/isOpen/index.md create mode 100644 static/usage/v8/picker/inline/isOpen/javascript.md create mode 100644 static/usage/v8/picker/inline/isOpen/react.md create mode 100644 static/usage/v8/picker/inline/isOpen/vue.md create mode 100644 static/usage/v8/picker/inline/trigger/angular/example_component_html.md create mode 100644 static/usage/v8/picker/inline/trigger/angular/example_component_ts.md create mode 100644 static/usage/v8/picker/inline/trigger/demo.html create mode 100644 static/usage/v8/picker/inline/trigger/index.md create mode 100644 static/usage/v8/picker/inline/trigger/javascript.md create mode 100644 static/usage/v8/picker/inline/trigger/react.md create mode 100644 static/usage/v8/picker/inline/trigger/vue.md create mode 100644 static/usage/v8/picker/multiple-column/angular/example_component_html.md create mode 100644 static/usage/v8/picker/multiple-column/angular/example_component_ts.md create mode 100644 static/usage/v8/picker/multiple-column/demo.html create mode 100644 static/usage/v8/picker/multiple-column/index.md create mode 100644 static/usage/v8/picker/multiple-column/javascript.md create mode 100644 static/usage/v8/picker/multiple-column/react.md create mode 100644 static/usage/v8/picker/multiple-column/vue.md create mode 100644 static/usage/v8/popover/customization/positioning/angular/example_component_css.md create mode 100644 static/usage/v8/popover/customization/positioning/angular/example_component_html.md create mode 100644 static/usage/v8/popover/customization/positioning/angular/example_component_ts.md create mode 100644 static/usage/v8/popover/customization/positioning/demo.html create mode 100644 static/usage/v8/popover/customization/positioning/index.md create mode 100644 static/usage/v8/popover/customization/positioning/javascript.md create mode 100644 static/usage/v8/popover/customization/positioning/react/main_css.md create mode 100644 static/usage/v8/popover/customization/positioning/react/main_tsx.md create mode 100644 static/usage/v8/popover/customization/positioning/vue.md create mode 100644 static/usage/v8/popover/customization/sizing/angular.md create mode 100644 static/usage/v8/popover/customization/sizing/demo.html create mode 100644 static/usage/v8/popover/customization/sizing/index.md create mode 100644 static/usage/v8/popover/customization/sizing/javascript.md create mode 100644 static/usage/v8/popover/customization/sizing/react.md create mode 100644 static/usage/v8/popover/customization/sizing/vue.md create mode 100644 static/usage/v8/popover/customization/styling/angular/example_component_html.md create mode 100644 static/usage/v8/popover/customization/styling/angular/global_css.md create mode 100644 static/usage/v8/popover/customization/styling/demo.html create mode 100644 static/usage/v8/popover/customization/styling/index.md create mode 100644 static/usage/v8/popover/customization/styling/javascript.md create mode 100644 static/usage/v8/popover/customization/styling/react/main_css.md create mode 100644 static/usage/v8/popover/customization/styling/react/main_tsx.md create mode 100644 static/usage/v8/popover/customization/styling/vue.md create mode 100644 static/usage/v8/popover/nested/angular.md create mode 100644 static/usage/v8/popover/nested/demo.html create mode 100644 static/usage/v8/popover/nested/index.md create mode 100644 static/usage/v8/popover/nested/javascript.md create mode 100644 static/usage/v8/popover/nested/react.md create mode 100644 static/usage/v8/popover/nested/vue.md create mode 100644 static/usage/v8/popover/performance/mount/angular.md create mode 100644 static/usage/v8/popover/performance/mount/demo.html create mode 100644 static/usage/v8/popover/performance/mount/index.md create mode 100644 static/usage/v8/popover/performance/mount/javascript.md create mode 100644 static/usage/v8/popover/performance/mount/react.md create mode 100644 static/usage/v8/popover/performance/mount/vue.md create mode 100644 static/usage/v8/popover/presenting/controller/angular/app_module_ts.md create mode 100644 static/usage/v8/popover/presenting/controller/angular/example_component_html.md create mode 100644 static/usage/v8/popover/presenting/controller/angular/example_component_ts.md create mode 100644 static/usage/v8/popover/presenting/controller/angular/popover_component_html.md create mode 100644 static/usage/v8/popover/presenting/controller/angular/popover_component_ts.md create mode 100644 static/usage/v8/popover/presenting/controller/demo.html create mode 100644 static/usage/v8/popover/presenting/controller/index.md create mode 100644 static/usage/v8/popover/presenting/controller/javascript.md create mode 100644 static/usage/v8/popover/presenting/controller/react.md create mode 100644 static/usage/v8/popover/presenting/controller/vue/example_vue.md create mode 100644 static/usage/v8/popover/presenting/controller/vue/popover_vue.md create mode 100644 static/usage/v8/popover/presenting/inline-isopen/angular/example_component_html.md create mode 100644 static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md create mode 100644 static/usage/v8/popover/presenting/inline-isopen/demo.html create mode 100644 static/usage/v8/popover/presenting/inline-isopen/index.md create mode 100644 static/usage/v8/popover/presenting/inline-isopen/javascript.md create mode 100644 static/usage/v8/popover/presenting/inline-isopen/react.md create mode 100644 static/usage/v8/popover/presenting/inline-isopen/vue.md create mode 100644 static/usage/v8/popover/presenting/inline-trigger/angular.md create mode 100644 static/usage/v8/popover/presenting/inline-trigger/demo.html create mode 100644 static/usage/v8/popover/presenting/inline-trigger/index.md create mode 100644 static/usage/v8/popover/presenting/inline-trigger/javascript.md create mode 100644 static/usage/v8/popover/presenting/inline-trigger/react.md create mode 100644 static/usage/v8/popover/presenting/inline-trigger/vue.md create mode 100644 static/usage/v8/progress-bar/buffer/angular/example_component_html.md create mode 100644 static/usage/v8/progress-bar/buffer/angular/example_component_ts.md create mode 100644 static/usage/v8/progress-bar/buffer/demo.html create mode 100644 static/usage/v8/progress-bar/buffer/index.md create mode 100644 static/usage/v8/progress-bar/buffer/javascript.md create mode 100644 static/usage/v8/progress-bar/buffer/react.md create mode 100644 static/usage/v8/progress-bar/buffer/vue.md create mode 100644 static/usage/v8/progress-bar/determinate/angular/example_component_html.md create mode 100644 static/usage/v8/progress-bar/determinate/angular/example_component_ts.md create mode 100644 static/usage/v8/progress-bar/determinate/demo.html create mode 100644 static/usage/v8/progress-bar/determinate/index.md create mode 100644 static/usage/v8/progress-bar/determinate/javascript.md create mode 100644 static/usage/v8/progress-bar/determinate/react.md create mode 100644 static/usage/v8/progress-bar/determinate/vue.md create mode 100644 static/usage/v8/progress-bar/indeterminate/angular.md create mode 100644 static/usage/v8/progress-bar/indeterminate/demo.html create mode 100644 static/usage/v8/progress-bar/indeterminate/index.md create mode 100644 static/usage/v8/progress-bar/indeterminate/javascript.md create mode 100644 static/usage/v8/progress-bar/indeterminate/react.md create mode 100644 static/usage/v8/progress-bar/indeterminate/vue.md create mode 100644 static/usage/v8/progress-bar/theming/colors/angular.md create mode 100644 static/usage/v8/progress-bar/theming/colors/demo.html create mode 100644 static/usage/v8/progress-bar/theming/colors/index.md create mode 100644 static/usage/v8/progress-bar/theming/colors/javascript.md create mode 100644 static/usage/v8/progress-bar/theming/colors/react.md create mode 100644 static/usage/v8/progress-bar/theming/colors/vue.md create mode 100644 static/usage/v8/progress-bar/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/progress-bar/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/progress-bar/theming/css-properties/demo.html create mode 100644 static/usage/v8/progress-bar/theming/css-properties/index.md create mode 100644 static/usage/v8/progress-bar/theming/css-properties/javascript.md create mode 100644 static/usage/v8/progress-bar/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/progress-bar/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/progress-bar/theming/css-properties/vue.md create mode 100644 static/usage/v8/progress-bar/theming/css-shadow-parts/angular/example_component_css.md create mode 100644 static/usage/v8/progress-bar/theming/css-shadow-parts/angular/example_component_html.md create mode 100644 static/usage/v8/progress-bar/theming/css-shadow-parts/demo.html create mode 100644 static/usage/v8/progress-bar/theming/css-shadow-parts/index.md create mode 100644 static/usage/v8/progress-bar/theming/css-shadow-parts/javascript.md create mode 100644 static/usage/v8/progress-bar/theming/css-shadow-parts/react/main_css.md create mode 100644 static/usage/v8/progress-bar/theming/css-shadow-parts/react/main_tsx.md create mode 100644 static/usage/v8/progress-bar/theming/css-shadow-parts/vue.md create mode 100644 static/usage/v8/radio/alignment/angular.md create mode 100644 static/usage/v8/radio/alignment/demo.html create mode 100644 static/usage/v8/radio/alignment/index.md create mode 100644 static/usage/v8/radio/alignment/javascript.md create mode 100644 static/usage/v8/radio/alignment/react.md create mode 100644 static/usage/v8/radio/alignment/vue.md create mode 100644 static/usage/v8/radio/basic/angular.md create mode 100644 static/usage/v8/radio/basic/demo.html create mode 100644 static/usage/v8/radio/basic/index.md create mode 100644 static/usage/v8/radio/basic/javascript.md create mode 100644 static/usage/v8/radio/basic/react.md create mode 100644 static/usage/v8/radio/basic/vue.md create mode 100644 static/usage/v8/radio/empty-selection/angular.md create mode 100644 static/usage/v8/radio/empty-selection/demo.html create mode 100644 static/usage/v8/radio/empty-selection/index.md create mode 100644 static/usage/v8/radio/empty-selection/javascript.md create mode 100644 static/usage/v8/radio/empty-selection/react.md create mode 100644 static/usage/v8/radio/empty-selection/vue.md create mode 100644 static/usage/v8/radio/justify/angular.md create mode 100644 static/usage/v8/radio/justify/demo.html create mode 100644 static/usage/v8/radio/justify/index.md create mode 100644 static/usage/v8/radio/justify/javascript.md create mode 100644 static/usage/v8/radio/justify/react.md create mode 100644 static/usage/v8/radio/justify/vue.md create mode 100644 static/usage/v8/radio/label-placement/angular.md create mode 100644 static/usage/v8/radio/label-placement/demo.html create mode 100644 static/usage/v8/radio/label-placement/index.md create mode 100644 static/usage/v8/radio/label-placement/javascript.md create mode 100644 static/usage/v8/radio/label-placement/react.md create mode 100644 static/usage/v8/radio/label-placement/vue.md create mode 100644 static/usage/v8/radio/migration/index.md create mode 100644 static/usage/v8/radio/theming/colors/angular.md create mode 100644 static/usage/v8/radio/theming/colors/demo.html create mode 100644 static/usage/v8/radio/theming/colors/index.md create mode 100644 static/usage/v8/radio/theming/colors/javascript.md create mode 100644 static/usage/v8/radio/theming/colors/react.md create mode 100644 static/usage/v8/radio/theming/colors/vue.md create mode 100644 static/usage/v8/radio/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/radio/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/radio/theming/css-properties/demo.html create mode 100644 static/usage/v8/radio/theming/css-properties/index.md create mode 100644 static/usage/v8/radio/theming/css-properties/javascript.md create mode 100644 static/usage/v8/radio/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/radio/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/radio/theming/css-properties/vue.md create mode 100644 static/usage/v8/radio/theming/css-shadow-parts/angular/example_component_css.md create mode 100644 static/usage/v8/radio/theming/css-shadow-parts/angular/example_component_html.md create mode 100644 static/usage/v8/radio/theming/css-shadow-parts/demo.html create mode 100644 static/usage/v8/radio/theming/css-shadow-parts/index.md create mode 100644 static/usage/v8/radio/theming/css-shadow-parts/javascript.md create mode 100644 static/usage/v8/radio/theming/css-shadow-parts/react/main_css.md create mode 100644 static/usage/v8/radio/theming/css-shadow-parts/react/main_tsx.md create mode 100644 static/usage/v8/radio/theming/css-shadow-parts/vue.md create mode 100644 static/usage/v8/range/basic/angular.md create mode 100644 static/usage/v8/range/basic/demo.html create mode 100644 static/usage/v8/range/basic/index.md create mode 100644 static/usage/v8/range/basic/javascript.md create mode 100644 static/usage/v8/range/basic/react.md create mode 100644 static/usage/v8/range/basic/vue.md create mode 100644 static/usage/v8/range/dual-knobs/angular.md create mode 100644 static/usage/v8/range/dual-knobs/demo.html create mode 100644 static/usage/v8/range/dual-knobs/index.md create mode 100644 static/usage/v8/range/dual-knobs/javascript.md create mode 100644 static/usage/v8/range/dual-knobs/react.md create mode 100644 static/usage/v8/range/dual-knobs/vue.md create mode 100644 static/usage/v8/range/ion-change-event/angular/example_component_html.md create mode 100644 static/usage/v8/range/ion-change-event/angular/example_component_ts.md create mode 100644 static/usage/v8/range/ion-change-event/demo.html create mode 100644 static/usage/v8/range/ion-change-event/index.md create mode 100644 static/usage/v8/range/ion-change-event/javascript.md create mode 100644 static/usage/v8/range/ion-change-event/react.md create mode 100644 static/usage/v8/range/ion-change-event/vue.md create mode 100644 static/usage/v8/range/ion-knob-move-event/angular/example_component_html.md create mode 100644 static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md create mode 100644 static/usage/v8/range/ion-knob-move-event/demo.html create mode 100644 static/usage/v8/range/ion-knob-move-event/index.md create mode 100644 static/usage/v8/range/ion-knob-move-event/javascript.md create mode 100644 static/usage/v8/range/ion-knob-move-event/react.md create mode 100644 static/usage/v8/range/ion-knob-move-event/vue.md create mode 100644 static/usage/v8/range/label-slot/angular.md create mode 100644 static/usage/v8/range/label-slot/demo.html create mode 100644 static/usage/v8/range/label-slot/index.md create mode 100644 static/usage/v8/range/label-slot/javascript.md create mode 100644 static/usage/v8/range/label-slot/react.md create mode 100644 static/usage/v8/range/label-slot/vue.md create mode 100644 static/usage/v8/range/labels/angular.md create mode 100644 static/usage/v8/range/labels/demo.html create mode 100644 static/usage/v8/range/labels/index.md create mode 100644 static/usage/v8/range/labels/javascript.md create mode 100644 static/usage/v8/range/labels/react.md create mode 100644 static/usage/v8/range/labels/vue.md create mode 100644 static/usage/v8/range/migration/index.md create mode 100644 static/usage/v8/range/no-visible-label/angular.md create mode 100644 static/usage/v8/range/no-visible-label/demo.html create mode 100644 static/usage/v8/range/no-visible-label/index.md create mode 100644 static/usage/v8/range/no-visible-label/javascript.md create mode 100644 static/usage/v8/range/no-visible-label/react.md create mode 100644 static/usage/v8/range/no-visible-label/vue.md create mode 100644 static/usage/v8/range/pins/angular/example_component_html.md create mode 100644 static/usage/v8/range/pins/angular/example_component_ts.md create mode 100644 static/usage/v8/range/pins/demo.html create mode 100644 static/usage/v8/range/pins/index.md create mode 100644 static/usage/v8/range/pins/javascript.md create mode 100644 static/usage/v8/range/pins/react.md create mode 100644 static/usage/v8/range/pins/vue.md create mode 100644 static/usage/v8/range/slots/angular.md create mode 100644 static/usage/v8/range/slots/demo.html create mode 100644 static/usage/v8/range/slots/index.md create mode 100644 static/usage/v8/range/slots/javascript.md create mode 100644 static/usage/v8/range/slots/react.md create mode 100644 static/usage/v8/range/slots/vue.md create mode 100644 static/usage/v8/range/snapping-ticks/angular.md create mode 100644 static/usage/v8/range/snapping-ticks/demo.html create mode 100644 static/usage/v8/range/snapping-ticks/index.md create mode 100644 static/usage/v8/range/snapping-ticks/javascript.md create mode 100644 static/usage/v8/range/snapping-ticks/react.md create mode 100644 static/usage/v8/range/snapping-ticks/vue.md create mode 100644 static/usage/v8/range/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/range/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/range/theming/css-properties/demo.html create mode 100644 static/usage/v8/range/theming/css-properties/index.md create mode 100644 static/usage/v8/range/theming/css-properties/javascript.md create mode 100644 static/usage/v8/range/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/range/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/range/theming/css-properties/vue.md create mode 100644 static/usage/v8/range/theming/css-shadow-parts/angular/example_component_css.md create mode 100644 static/usage/v8/range/theming/css-shadow-parts/angular/example_component_html.md create mode 100644 static/usage/v8/range/theming/css-shadow-parts/demo.html create mode 100644 static/usage/v8/range/theming/css-shadow-parts/index.md create mode 100644 static/usage/v8/range/theming/css-shadow-parts/javascript.md create mode 100644 static/usage/v8/range/theming/css-shadow-parts/react/main_css.md create mode 100644 static/usage/v8/range/theming/css-shadow-parts/react/main_tsx.md create mode 100644 static/usage/v8/range/theming/css-shadow-parts/vue.md create mode 100644 static/usage/v8/refresher/advanced/angular/example_component_css.md create mode 100644 static/usage/v8/refresher/advanced/angular/example_component_html.md create mode 100644 static/usage/v8/refresher/advanced/angular/example_component_ts.md create mode 100644 static/usage/v8/refresher/advanced/demo.html create mode 100644 static/usage/v8/refresher/advanced/index.md create mode 100644 static/usage/v8/refresher/advanced/javascript.md create mode 100644 static/usage/v8/refresher/advanced/react/main_css.md create mode 100644 static/usage/v8/refresher/advanced/react/main_tsx.md create mode 100644 static/usage/v8/refresher/advanced/vue.md create mode 100644 static/usage/v8/refresher/basic/angular/example_component_html.md create mode 100644 static/usage/v8/refresher/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/refresher/basic/demo.html create mode 100644 static/usage/v8/refresher/basic/index.md create mode 100644 static/usage/v8/refresher/basic/javascript.md create mode 100644 static/usage/v8/refresher/basic/react.md create mode 100644 static/usage/v8/refresher/basic/vue.md create mode 100644 static/usage/v8/refresher/custom-content/angular/example_component_html.md create mode 100644 static/usage/v8/refresher/custom-content/angular/example_component_ts.md create mode 100644 static/usage/v8/refresher/custom-content/demo.html create mode 100644 static/usage/v8/refresher/custom-content/index.md create mode 100644 static/usage/v8/refresher/custom-content/javascript.md create mode 100644 static/usage/v8/refresher/custom-content/react.md create mode 100644 static/usage/v8/refresher/custom-content/vue.md create mode 100644 static/usage/v8/refresher/custom-scroll-target/angular/example_component_css.md create mode 100644 static/usage/v8/refresher/custom-scroll-target/angular/example_component_html.md create mode 100644 static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md create mode 100644 static/usage/v8/refresher/custom-scroll-target/demo.html create mode 100644 static/usage/v8/refresher/custom-scroll-target/index.md create mode 100644 static/usage/v8/refresher/custom-scroll-target/javascript.md create mode 100644 static/usage/v8/refresher/custom-scroll-target/react/main_css.md create mode 100644 static/usage/v8/refresher/custom-scroll-target/react/main_tsx.md create mode 100644 static/usage/v8/refresher/custom-scroll-target/vue.md create mode 100644 static/usage/v8/refresher/pull-properties/angular/example_component_html.md create mode 100644 static/usage/v8/refresher/pull-properties/angular/example_component_ts.md create mode 100644 static/usage/v8/refresher/pull-properties/demo.html create mode 100644 static/usage/v8/refresher/pull-properties/index.md create mode 100644 static/usage/v8/refresher/pull-properties/javascript.md create mode 100644 static/usage/v8/refresher/pull-properties/react.md create mode 100644 static/usage/v8/refresher/pull-properties/vue.md create mode 100644 static/usage/v8/reorder/basic/angular/example_component_html.md create mode 100644 static/usage/v8/reorder/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/reorder/basic/demo.html create mode 100644 static/usage/v8/reorder/basic/index.md create mode 100644 static/usage/v8/reorder/basic/javascript.md create mode 100644 static/usage/v8/reorder/basic/react.md create mode 100644 static/usage/v8/reorder/basic/vue.md create mode 100644 static/usage/v8/reorder/custom-icon/angular/example_component_html.md create mode 100644 static/usage/v8/reorder/custom-icon/angular/example_component_ts.md create mode 100644 static/usage/v8/reorder/custom-icon/demo.html create mode 100644 static/usage/v8/reorder/custom-icon/index.md create mode 100644 static/usage/v8/reorder/custom-icon/javascript.md create mode 100644 static/usage/v8/reorder/custom-icon/react.md create mode 100644 static/usage/v8/reorder/custom-icon/vue.md create mode 100644 static/usage/v8/reorder/custom-scroll-target/angular/example_component_css.md create mode 100644 static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md create mode 100644 static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md create mode 100644 static/usage/v8/reorder/custom-scroll-target/demo.html create mode 100644 static/usage/v8/reorder/custom-scroll-target/index.md create mode 100644 static/usage/v8/reorder/custom-scroll-target/javascript.md create mode 100644 static/usage/v8/reorder/custom-scroll-target/react/main_css.md create mode 100644 static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md create mode 100644 static/usage/v8/reorder/custom-scroll-target/vue.md create mode 100644 static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md create mode 100644 static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md create mode 100644 static/usage/v8/reorder/toggling-disabled/demo.html create mode 100644 static/usage/v8/reorder/toggling-disabled/index.md create mode 100644 static/usage/v8/reorder/toggling-disabled/javascript.md create mode 100644 static/usage/v8/reorder/toggling-disabled/react.md create mode 100644 static/usage/v8/reorder/toggling-disabled/vue.md create mode 100644 static/usage/v8/reorder/updating-data/angular/example_component_html.md create mode 100644 static/usage/v8/reorder/updating-data/angular/example_component_ts.md create mode 100644 static/usage/v8/reorder/updating-data/demo.html create mode 100644 static/usage/v8/reorder/updating-data/index.md create mode 100644 static/usage/v8/reorder/updating-data/javascript.md create mode 100644 static/usage/v8/reorder/updating-data/react.md create mode 100644 static/usage/v8/reorder/updating-data/vue.md create mode 100644 static/usage/v8/reorder/wrapper/angular/example_component_html.md create mode 100644 static/usage/v8/reorder/wrapper/angular/example_component_ts.md create mode 100644 static/usage/v8/reorder/wrapper/demo.html create mode 100644 static/usage/v8/reorder/wrapper/index.md create mode 100644 static/usage/v8/reorder/wrapper/javascript.md create mode 100644 static/usage/v8/reorder/wrapper/react.md create mode 100644 static/usage/v8/reorder/wrapper/vue.md create mode 100644 static/usage/v8/ripple-effect/basic/angular/example_component_css.md create mode 100644 static/usage/v8/ripple-effect/basic/angular/example_component_html.md create mode 100644 static/usage/v8/ripple-effect/basic/demo.html create mode 100644 static/usage/v8/ripple-effect/basic/index.md create mode 100644 static/usage/v8/ripple-effect/basic/javascript.md create mode 100644 static/usage/v8/ripple-effect/basic/react/main_css.md create mode 100644 static/usage/v8/ripple-effect/basic/react/main_tsx.md create mode 100644 static/usage/v8/ripple-effect/basic/vue.md create mode 100644 static/usage/v8/ripple-effect/customizing/angular/example_component_css.md create mode 100644 static/usage/v8/ripple-effect/customizing/angular/example_component_html.md create mode 100644 static/usage/v8/ripple-effect/customizing/demo.html create mode 100644 static/usage/v8/ripple-effect/customizing/index.md create mode 100644 static/usage/v8/ripple-effect/customizing/javascript.md create mode 100644 static/usage/v8/ripple-effect/customizing/react/main_css.md create mode 100644 static/usage/v8/ripple-effect/customizing/react/main_tsx.md create mode 100644 static/usage/v8/ripple-effect/customizing/vue.md create mode 100644 static/usage/v8/ripple-effect/type/angular/example_component_css.md create mode 100644 static/usage/v8/ripple-effect/type/angular/example_component_html.md create mode 100644 static/usage/v8/ripple-effect/type/demo.html create mode 100644 static/usage/v8/ripple-effect/type/index.md create mode 100644 static/usage/v8/ripple-effect/type/javascript.md create mode 100644 static/usage/v8/ripple-effect/type/react/main_css.md create mode 100644 static/usage/v8/ripple-effect/type/react/main_tsx.md create mode 100644 static/usage/v8/ripple-effect/type/vue.md create mode 100644 static/usage/v8/router/basic/demo.html create mode 100644 static/usage/v8/router/basic/index.md create mode 100644 static/usage/v8/router/basic/javascript.md create mode 100644 static/usage/v8/searchbar/basic/angular.md create mode 100644 static/usage/v8/searchbar/basic/demo.html create mode 100644 static/usage/v8/searchbar/basic/index.md create mode 100644 static/usage/v8/searchbar/basic/javascript.md create mode 100644 static/usage/v8/searchbar/basic/react.md create mode 100644 static/usage/v8/searchbar/basic/vue.md create mode 100644 static/usage/v8/searchbar/cancel-button/angular.md create mode 100644 static/usage/v8/searchbar/cancel-button/demo.html create mode 100644 static/usage/v8/searchbar/cancel-button/index.md create mode 100644 static/usage/v8/searchbar/cancel-button/javascript.md create mode 100644 static/usage/v8/searchbar/cancel-button/react.md create mode 100644 static/usage/v8/searchbar/cancel-button/vue.md create mode 100644 static/usage/v8/searchbar/clear-button/angular.md create mode 100644 static/usage/v8/searchbar/clear-button/demo.html create mode 100644 static/usage/v8/searchbar/clear-button/index.md create mode 100644 static/usage/v8/searchbar/clear-button/javascript.md create mode 100644 static/usage/v8/searchbar/clear-button/react.md create mode 100644 static/usage/v8/searchbar/clear-button/vue.md create mode 100644 static/usage/v8/searchbar/debounce/angular/example_component_html.md create mode 100644 static/usage/v8/searchbar/debounce/angular/example_component_ts.md create mode 100644 static/usage/v8/searchbar/debounce/demo.html create mode 100644 static/usage/v8/searchbar/debounce/index.md create mode 100644 static/usage/v8/searchbar/debounce/javascript.md create mode 100644 static/usage/v8/searchbar/debounce/react.md create mode 100644 static/usage/v8/searchbar/debounce/vue.md create mode 100644 static/usage/v8/searchbar/search-icon/angular.md create mode 100644 static/usage/v8/searchbar/search-icon/demo.html create mode 100644 static/usage/v8/searchbar/search-icon/index.md create mode 100644 static/usage/v8/searchbar/search-icon/javascript.md create mode 100644 static/usage/v8/searchbar/search-icon/react.md create mode 100644 static/usage/v8/searchbar/search-icon/vue.md create mode 100644 static/usage/v8/searchbar/theming/colors/angular.md create mode 100644 static/usage/v8/searchbar/theming/colors/demo.html create mode 100644 static/usage/v8/searchbar/theming/colors/index.md create mode 100644 static/usage/v8/searchbar/theming/colors/javascript.md create mode 100644 static/usage/v8/searchbar/theming/colors/react.md create mode 100644 static/usage/v8/searchbar/theming/colors/vue.md create mode 100644 static/usage/v8/searchbar/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/searchbar/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/searchbar/theming/css-properties/demo.html create mode 100644 static/usage/v8/searchbar/theming/css-properties/index.md create mode 100644 static/usage/v8/searchbar/theming/css-properties/javascript.md create mode 100644 static/usage/v8/searchbar/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/searchbar/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/searchbar/theming/css-properties/vue.md create mode 100644 static/usage/v8/segment-button/basic/angular.md create mode 100644 static/usage/v8/segment-button/basic/demo.html create mode 100644 static/usage/v8/segment-button/basic/index.md create mode 100644 static/usage/v8/segment-button/basic/javascript.md create mode 100644 static/usage/v8/segment-button/basic/react.md create mode 100644 static/usage/v8/segment-button/basic/vue.md create mode 100644 static/usage/v8/segment-button/layout/angular.md create mode 100644 static/usage/v8/segment-button/layout/demo.html create mode 100644 static/usage/v8/segment-button/layout/index.md create mode 100644 static/usage/v8/segment-button/layout/javascript.md create mode 100644 static/usage/v8/segment-button/layout/react.md create mode 100644 static/usage/v8/segment-button/layout/vue.md create mode 100644 static/usage/v8/segment-button/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/segment-button/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/segment-button/theming/css-properties/demo.html create mode 100644 static/usage/v8/segment-button/theming/css-properties/index.md create mode 100644 static/usage/v8/segment-button/theming/css-properties/javascript.md create mode 100644 static/usage/v8/segment-button/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/segment-button/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/segment-button/theming/css-properties/vue.md create mode 100644 static/usage/v8/segment-button/theming/css-shadow-parts/angular/example_component_css.md create mode 100644 static/usage/v8/segment-button/theming/css-shadow-parts/angular/example_component_html.md create mode 100644 static/usage/v8/segment-button/theming/css-shadow-parts/demo.html create mode 100644 static/usage/v8/segment-button/theming/css-shadow-parts/index.md create mode 100644 static/usage/v8/segment-button/theming/css-shadow-parts/javascript.md create mode 100644 static/usage/v8/segment-button/theming/css-shadow-parts/react/main_css.md create mode 100644 static/usage/v8/segment-button/theming/css-shadow-parts/react/main_tsx.md create mode 100644 static/usage/v8/segment-button/theming/css-shadow-parts/vue.md create mode 100644 static/usage/v8/segment/basic/angular.md create mode 100644 static/usage/v8/segment/basic/demo.html create mode 100644 static/usage/v8/segment/basic/index.md create mode 100644 static/usage/v8/segment/basic/javascript.md create mode 100644 static/usage/v8/segment/basic/react.md create mode 100644 static/usage/v8/segment/basic/vue.md create mode 100644 static/usage/v8/segment/scrollable/angular.md create mode 100644 static/usage/v8/segment/scrollable/demo.html create mode 100644 static/usage/v8/segment/scrollable/index.md create mode 100644 static/usage/v8/segment/scrollable/javascript.md create mode 100644 static/usage/v8/segment/scrollable/react.md create mode 100644 static/usage/v8/segment/scrollable/vue.md create mode 100644 static/usage/v8/segment/theming/colors/angular.md create mode 100644 static/usage/v8/segment/theming/colors/demo.html create mode 100644 static/usage/v8/segment/theming/colors/index.md create mode 100644 static/usage/v8/segment/theming/colors/javascript.md create mode 100644 static/usage/v8/segment/theming/colors/react.md create mode 100644 static/usage/v8/segment/theming/colors/vue.md create mode 100644 static/usage/v8/segment/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/segment/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/segment/theming/css-properties/demo.html create mode 100644 static/usage/v8/segment/theming/css-properties/index.md create mode 100644 static/usage/v8/segment/theming/css-properties/javascript.md create mode 100644 static/usage/v8/segment/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/segment/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/segment/theming/css-properties/vue.md create mode 100644 static/usage/v8/select/basic/multiple-selection/angular.md create mode 100644 static/usage/v8/select/basic/multiple-selection/demo.html create mode 100644 static/usage/v8/select/basic/multiple-selection/index.md create mode 100644 static/usage/v8/select/basic/multiple-selection/javascript.md create mode 100644 static/usage/v8/select/basic/multiple-selection/react.md create mode 100644 static/usage/v8/select/basic/multiple-selection/vue.md create mode 100644 static/usage/v8/select/basic/responding-to-interaction/angular/example_component_html.md create mode 100644 static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md create mode 100644 static/usage/v8/select/basic/responding-to-interaction/demo.html create mode 100644 static/usage/v8/select/basic/responding-to-interaction/index.md create mode 100644 static/usage/v8/select/basic/responding-to-interaction/javascript.md create mode 100644 static/usage/v8/select/basic/responding-to-interaction/react.md create mode 100644 static/usage/v8/select/basic/responding-to-interaction/vue.md create mode 100644 static/usage/v8/select/basic/single-selection/angular.md create mode 100644 static/usage/v8/select/basic/single-selection/demo.html create mode 100644 static/usage/v8/select/basic/single-selection/index.md create mode 100644 static/usage/v8/select/basic/single-selection/javascript.md create mode 100644 static/usage/v8/select/basic/single-selection/react.md create mode 100644 static/usage/v8/select/basic/single-selection/vue.md create mode 100644 static/usage/v8/select/customization/button-text/angular.md create mode 100644 static/usage/v8/select/customization/button-text/demo.html create mode 100644 static/usage/v8/select/customization/button-text/index.md create mode 100644 static/usage/v8/select/customization/button-text/javascript.md create mode 100644 static/usage/v8/select/customization/button-text/react.md create mode 100644 static/usage/v8/select/customization/button-text/vue.md create mode 100644 static/usage/v8/select/customization/custom-toggle-icons/angular.md create mode 100644 static/usage/v8/select/customization/custom-toggle-icons/demo.html create mode 100644 static/usage/v8/select/customization/custom-toggle-icons/index.md create mode 100644 static/usage/v8/select/customization/custom-toggle-icons/javascript.md create mode 100644 static/usage/v8/select/customization/custom-toggle-icons/react.md create mode 100644 static/usage/v8/select/customization/custom-toggle-icons/vue.md create mode 100644 static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_css.md create mode 100644 static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_html.md create mode 100644 static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md create mode 100644 static/usage/v8/select/customization/icon-flip-behavior/demo.html create mode 100644 static/usage/v8/select/customization/icon-flip-behavior/index.md create mode 100644 static/usage/v8/select/customization/icon-flip-behavior/javascript.md create mode 100644 static/usage/v8/select/customization/icon-flip-behavior/react/main_css.md create mode 100644 static/usage/v8/select/customization/icon-flip-behavior/react/main_tsx.md create mode 100644 static/usage/v8/select/customization/icon-flip-behavior/vue.md create mode 100644 static/usage/v8/select/customization/interface-options/angular/example_component_html.md create mode 100644 static/usage/v8/select/customization/interface-options/angular/example_component_ts.md create mode 100644 static/usage/v8/select/customization/interface-options/demo.html create mode 100644 static/usage/v8/select/customization/interface-options/index.md create mode 100644 static/usage/v8/select/customization/interface-options/javascript.md create mode 100644 static/usage/v8/select/customization/interface-options/react.md create mode 100644 static/usage/v8/select/customization/interface-options/vue.md create mode 100644 static/usage/v8/select/customization/styling-select/angular/example_component_css.md create mode 100644 static/usage/v8/select/customization/styling-select/angular/example_component_html.md create mode 100644 static/usage/v8/select/customization/styling-select/angular/example_component_ts.md create mode 100644 static/usage/v8/select/customization/styling-select/demo.html create mode 100644 static/usage/v8/select/customization/styling-select/index.md create mode 100644 static/usage/v8/select/customization/styling-select/javascript.md create mode 100644 static/usage/v8/select/customization/styling-select/react/main_css.md create mode 100644 static/usage/v8/select/customization/styling-select/react/main_tsx.md create mode 100644 static/usage/v8/select/customization/styling-select/vue.md create mode 100644 static/usage/v8/select/fill/angular.md create mode 100644 static/usage/v8/select/fill/demo.html create mode 100644 static/usage/v8/select/fill/index.md create mode 100644 static/usage/v8/select/fill/javascript.md create mode 100644 static/usage/v8/select/fill/react.md create mode 100644 static/usage/v8/select/fill/vue.md create mode 100644 static/usage/v8/select/interfaces/action-sheet/angular.md create mode 100644 static/usage/v8/select/interfaces/action-sheet/demo.html create mode 100644 static/usage/v8/select/interfaces/action-sheet/index.md create mode 100644 static/usage/v8/select/interfaces/action-sheet/javascript.md create mode 100644 static/usage/v8/select/interfaces/action-sheet/react.md create mode 100644 static/usage/v8/select/interfaces/action-sheet/vue.md create mode 100644 static/usage/v8/select/interfaces/popover/angular.md create mode 100644 static/usage/v8/select/interfaces/popover/demo.html create mode 100644 static/usage/v8/select/interfaces/popover/index.md create mode 100644 static/usage/v8/select/interfaces/popover/javascript.md create mode 100644 static/usage/v8/select/interfaces/popover/react.md create mode 100644 static/usage/v8/select/interfaces/popover/vue.md create mode 100644 static/usage/v8/select/justify/angular.md create mode 100644 static/usage/v8/select/justify/demo.html create mode 100644 static/usage/v8/select/justify/index.md create mode 100644 static/usage/v8/select/justify/javascript.md create mode 100644 static/usage/v8/select/justify/react.md create mode 100644 static/usage/v8/select/justify/vue.md create mode 100644 static/usage/v8/select/label-placement/angular.md create mode 100644 static/usage/v8/select/label-placement/demo.html create mode 100644 static/usage/v8/select/label-placement/index.md create mode 100644 static/usage/v8/select/label-placement/javascript.md create mode 100644 static/usage/v8/select/label-placement/react.md create mode 100644 static/usage/v8/select/label-placement/vue.md create mode 100644 static/usage/v8/select/label-slot/angular.md create mode 100644 static/usage/v8/select/label-slot/demo.html create mode 100644 static/usage/v8/select/label-slot/index.md create mode 100644 static/usage/v8/select/label-slot/javascript.md create mode 100644 static/usage/v8/select/label-slot/react.md create mode 100644 static/usage/v8/select/label-slot/vue.md create mode 100644 static/usage/v8/select/migration/index.md create mode 100644 static/usage/v8/select/no-visible-label/angular.md create mode 100644 static/usage/v8/select/no-visible-label/demo.html create mode 100644 static/usage/v8/select/no-visible-label/index.md create mode 100644 static/usage/v8/select/no-visible-label/javascript.md create mode 100644 static/usage/v8/select/no-visible-label/react.md create mode 100644 static/usage/v8/select/no-visible-label/vue.md create mode 100644 static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md create mode 100644 static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md create mode 100644 static/usage/v8/select/objects-as-values/multiple-selection/demo.html create mode 100644 static/usage/v8/select/objects-as-values/multiple-selection/index.md create mode 100644 static/usage/v8/select/objects-as-values/multiple-selection/javascript.md create mode 100644 static/usage/v8/select/objects-as-values/multiple-selection/react.md create mode 100644 static/usage/v8/select/objects-as-values/multiple-selection/vue.md create mode 100644 static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md create mode 100644 static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md create mode 100644 static/usage/v8/select/objects-as-values/using-comparewith/demo.html create mode 100644 static/usage/v8/select/objects-as-values/using-comparewith/index.md create mode 100644 static/usage/v8/select/objects-as-values/using-comparewith/javascript.md create mode 100644 static/usage/v8/select/objects-as-values/using-comparewith/react.md create mode 100644 static/usage/v8/select/objects-as-values/using-comparewith/vue.md create mode 100644 static/usage/v8/select/typeahead/angular/angular_types_ts.md create mode 100644 static/usage/v8/select/typeahead/angular/app_module_ts.md create mode 100644 static/usage/v8/select/typeahead/angular/example_component_html.md create mode 100644 static/usage/v8/select/typeahead/angular/example_component_ts.md create mode 100644 static/usage/v8/select/typeahead/angular/modal-example_component_html.md create mode 100644 static/usage/v8/select/typeahead/angular/modal-example_component_ts.md create mode 100644 static/usage/v8/select/typeahead/demo.html create mode 100644 static/usage/v8/select/typeahead/index.md create mode 100644 static/usage/v8/select/typeahead/javascript.md create mode 100644 static/usage/v8/select/typeahead/react/main_tsx.md create mode 100644 static/usage/v8/select/typeahead/react/react_types_ts.md create mode 100644 static/usage/v8/select/typeahead/react/typeahead_component_tsx.md create mode 100644 static/usage/v8/select/typeahead/vue/example_vue.md create mode 100644 static/usage/v8/select/typeahead/vue/typeahead_component_vue.md create mode 100644 static/usage/v8/select/typeahead/vue/vue_types_ts.md create mode 100644 static/usage/v8/skeleton-text/basic/angular/example_component_html.md create mode 100644 static/usage/v8/skeleton-text/basic/angular/example_component_ts.md create mode 100644 static/usage/v8/skeleton-text/basic/demo.html create mode 100644 static/usage/v8/skeleton-text/basic/index.md create mode 100644 static/usage/v8/skeleton-text/basic/javascript.md create mode 100644 static/usage/v8/skeleton-text/basic/react.md create mode 100644 static/usage/v8/skeleton-text/basic/vue.md create mode 100644 static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/skeleton-text/theming/css-properties/demo.html create mode 100644 static/usage/v8/skeleton-text/theming/css-properties/index.md create mode 100644 static/usage/v8/skeleton-text/theming/css-properties/javascript.md create mode 100644 static/usage/v8/skeleton-text/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/skeleton-text/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/skeleton-text/theming/css-properties/vue.md create mode 100644 static/usage/v8/spinner/basic/angular.md create mode 100644 static/usage/v8/spinner/basic/demo.html create mode 100644 static/usage/v8/spinner/basic/index.md create mode 100644 static/usage/v8/spinner/basic/javascript.md create mode 100644 static/usage/v8/spinner/basic/react.md create mode 100644 static/usage/v8/spinner/basic/vue.md create mode 100644 static/usage/v8/spinner/theming/colors/angular.md create mode 100644 static/usage/v8/spinner/theming/colors/demo.html create mode 100644 static/usage/v8/spinner/theming/colors/index.md create mode 100644 static/usage/v8/spinner/theming/colors/javascript.md create mode 100644 static/usage/v8/spinner/theming/colors/react.md create mode 100644 static/usage/v8/spinner/theming/colors/vue.md create mode 100644 static/usage/v8/spinner/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/spinner/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/spinner/theming/css-properties/demo.html create mode 100644 static/usage/v8/spinner/theming/css-properties/index.md create mode 100644 static/usage/v8/spinner/theming/css-properties/javascript.md create mode 100644 static/usage/v8/spinner/theming/css-properties/react.md create mode 100644 static/usage/v8/spinner/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/spinner/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/spinner/theming/css-properties/vue.md create mode 100644 static/usage/v8/spinner/theming/resizing/angular/example_component_css.md create mode 100644 static/usage/v8/spinner/theming/resizing/angular/example_component_html.md create mode 100644 static/usage/v8/spinner/theming/resizing/demo.html create mode 100644 static/usage/v8/spinner/theming/resizing/index.md create mode 100644 static/usage/v8/spinner/theming/resizing/javascript.md create mode 100644 static/usage/v8/spinner/theming/resizing/react.md create mode 100644 static/usage/v8/spinner/theming/resizing/react/main_css.md create mode 100644 static/usage/v8/spinner/theming/resizing/react/main_tsx.md create mode 100644 static/usage/v8/spinner/theming/resizing/vue.md create mode 100644 static/usage/v8/split-pane/basic/angular.md create mode 100644 static/usage/v8/split-pane/basic/demo.html create mode 100644 static/usage/v8/split-pane/basic/index.md create mode 100644 static/usage/v8/split-pane/basic/javascript.md create mode 100644 static/usage/v8/split-pane/basic/react.md create mode 100644 static/usage/v8/split-pane/basic/vue.md create mode 100644 static/usage/v8/split-pane/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/split-pane/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/split-pane/theming/css-properties/demo.html create mode 100644 static/usage/v8/split-pane/theming/css-properties/index.md create mode 100644 static/usage/v8/split-pane/theming/css-properties/javascript.md create mode 100644 static/usage/v8/split-pane/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/split-pane/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/split-pane/theming/css-properties/vue.md create mode 100644 static/usage/v8/tabs/router/angular/app_component_html.md create mode 100644 static/usage/v8/tabs/router/angular/app_module_ts.md create mode 100644 static/usage/v8/tabs/router/angular/app_routing_module_ts.md create mode 100644 static/usage/v8/tabs/router/angular/example_component_html.md create mode 100644 static/usage/v8/tabs/router/angular/global_css.md create mode 100644 static/usage/v8/tabs/router/angular/home_page_component_html.md create mode 100644 static/usage/v8/tabs/router/angular/home_page_component_ts.md create mode 100644 static/usage/v8/tabs/router/angular/home_page_module_ts.md create mode 100644 static/usage/v8/tabs/router/angular/library_page_component_html.md create mode 100644 static/usage/v8/tabs/router/angular/library_page_component_ts.md create mode 100644 static/usage/v8/tabs/router/angular/library_page_module_ts.md create mode 100644 static/usage/v8/tabs/router/angular/radio_page_component_html.md create mode 100644 static/usage/v8/tabs/router/angular/radio_page_component_ts.md create mode 100644 static/usage/v8/tabs/router/angular/radio_page_module_ts.md create mode 100644 static/usage/v8/tabs/router/angular/search_page_component_html.md create mode 100644 static/usage/v8/tabs/router/angular/search_page_component_ts.md create mode 100644 static/usage/v8/tabs/router/angular/search_page_module_ts.md create mode 100644 static/usage/v8/tabs/router/demo.html create mode 100644 static/usage/v8/tabs/router/index.md create mode 100644 static/usage/v8/tabs/router/javascript.md create mode 100644 static/usage/v8/tabs/router/react/home_page_tsx.md create mode 100644 static/usage/v8/tabs/router/react/library_page_tsx.md create mode 100644 static/usage/v8/tabs/router/react/main_tsx.md create mode 100644 static/usage/v8/tabs/router/react/radio_page_tsx.md create mode 100644 static/usage/v8/tabs/router/react/search_page_tsx.md create mode 100644 static/usage/v8/tabs/router/vue.md create mode 100644 static/usage/v8/tabs/router/vue/app_vue.md create mode 100644 static/usage/v8/tabs/router/vue/example_vue.md create mode 100644 static/usage/v8/tabs/router/vue/home_page_vue.md create mode 100644 static/usage/v8/tabs/router/vue/library_page_vue.md create mode 100644 static/usage/v8/tabs/router/vue/main_ts.md create mode 100644 static/usage/v8/tabs/router/vue/radio_page_vue.md create mode 100644 static/usage/v8/tabs/router/vue/router_ts.md create mode 100644 static/usage/v8/tabs/router/vue/search_page_vue.md create mode 100644 static/usage/v8/text/basic/angular.md create mode 100644 static/usage/v8/text/basic/demo.html create mode 100644 static/usage/v8/text/basic/index.md create mode 100644 static/usage/v8/text/basic/javascript.md create mode 100644 static/usage/v8/text/basic/react.md create mode 100644 static/usage/v8/text/basic/vue.md create mode 100644 static/usage/v8/textarea/autogrow/angular.md create mode 100644 static/usage/v8/textarea/autogrow/demo.html create mode 100644 static/usage/v8/textarea/autogrow/index.md create mode 100644 static/usage/v8/textarea/autogrow/javascript.md create mode 100644 static/usage/v8/textarea/autogrow/react.md create mode 100644 static/usage/v8/textarea/autogrow/vue.md create mode 100644 static/usage/v8/textarea/basic/angular.md create mode 100644 static/usage/v8/textarea/basic/demo.html create mode 100644 static/usage/v8/textarea/basic/index.md create mode 100644 static/usage/v8/textarea/basic/javascript.md create mode 100644 static/usage/v8/textarea/basic/react.md create mode 100644 static/usage/v8/textarea/basic/vue.md create mode 100644 static/usage/v8/textarea/clear-on-edit/angular.md create mode 100644 static/usage/v8/textarea/clear-on-edit/demo.html create mode 100644 static/usage/v8/textarea/clear-on-edit/index.md create mode 100644 static/usage/v8/textarea/clear-on-edit/javascript.md create mode 100644 static/usage/v8/textarea/clear-on-edit/react.md create mode 100644 static/usage/v8/textarea/clear-on-edit/vue.md create mode 100644 static/usage/v8/textarea/counter/angular/example_component_html.md create mode 100644 static/usage/v8/textarea/counter/angular/example_component_ts.md create mode 100644 static/usage/v8/textarea/counter/demo.html create mode 100644 static/usage/v8/textarea/counter/index.md create mode 100644 static/usage/v8/textarea/counter/javascript.md create mode 100644 static/usage/v8/textarea/counter/react.md create mode 100644 static/usage/v8/textarea/counter/vue.md create mode 100644 static/usage/v8/textarea/fill/angular.md create mode 100644 static/usage/v8/textarea/fill/demo.html create mode 100644 static/usage/v8/textarea/fill/index.md create mode 100644 static/usage/v8/textarea/fill/javascript.md create mode 100644 static/usage/v8/textarea/fill/react.md create mode 100644 static/usage/v8/textarea/fill/vue.md create mode 100644 static/usage/v8/textarea/helper-error/angular.md create mode 100644 static/usage/v8/textarea/helper-error/demo.html create mode 100644 static/usage/v8/textarea/helper-error/index.md create mode 100644 static/usage/v8/textarea/helper-error/javascript.md create mode 100644 static/usage/v8/textarea/helper-error/react.md create mode 100644 static/usage/v8/textarea/helper-error/vue.md create mode 100644 static/usage/v8/textarea/label-placement/angular.md create mode 100644 static/usage/v8/textarea/label-placement/demo.html create mode 100644 static/usage/v8/textarea/label-placement/index.md create mode 100644 static/usage/v8/textarea/label-placement/javascript.md create mode 100644 static/usage/v8/textarea/label-placement/react.md create mode 100644 static/usage/v8/textarea/label-placement/vue.md create mode 100644 static/usage/v8/textarea/label-slot/angular.md create mode 100644 static/usage/v8/textarea/label-slot/demo.html create mode 100644 static/usage/v8/textarea/label-slot/index.md create mode 100644 static/usage/v8/textarea/label-slot/javascript.md create mode 100644 static/usage/v8/textarea/label-slot/react.md create mode 100644 static/usage/v8/textarea/label-slot/vue.md create mode 100644 static/usage/v8/textarea/migration/index.md create mode 100644 static/usage/v8/textarea/no-visible-label/angular.md create mode 100644 static/usage/v8/textarea/no-visible-label/demo.html create mode 100644 static/usage/v8/textarea/no-visible-label/index.md create mode 100644 static/usage/v8/textarea/no-visible-label/javascript.md create mode 100644 static/usage/v8/textarea/no-visible-label/react.md create mode 100644 static/usage/v8/textarea/no-visible-label/vue.md create mode 100644 static/usage/v8/textarea/theming/angular/example_component_css.md create mode 100644 static/usage/v8/textarea/theming/angular/example_component_html.md create mode 100644 static/usage/v8/textarea/theming/angular/global_css.md create mode 100644 static/usage/v8/textarea/theming/demo.html create mode 100644 static/usage/v8/textarea/theming/index.md create mode 100644 static/usage/v8/textarea/theming/javascript.md create mode 100644 static/usage/v8/textarea/theming/react/main_css.md create mode 100644 static/usage/v8/textarea/theming/react/main_tsx.md create mode 100644 static/usage/v8/textarea/theming/vue.md create mode 100644 static/usage/v8/theming/automatic-dark-mode/angular/example_component_html.md create mode 100644 static/usage/v8/theming/automatic-dark-mode/angular/example_component_ts.md create mode 100644 static/usage/v8/theming/automatic-dark-mode/angular/global_css.md create mode 100644 static/usage/v8/theming/automatic-dark-mode/demo.html create mode 100644 static/usage/v8/theming/automatic-dark-mode/index.md create mode 100644 static/usage/v8/theming/automatic-dark-mode/javascript.md create mode 100644 static/usage/v8/theming/automatic-dark-mode/react/main_css.md create mode 100644 static/usage/v8/theming/automatic-dark-mode/react/main_tsx.md create mode 100644 static/usage/v8/theming/automatic-dark-mode/theme/variables_css.md create mode 100644 static/usage/v8/theming/automatic-dark-mode/vue.md create mode 100644 static/usage/v8/theming/manual-dark-mode/angular/example_component_html.md create mode 100644 static/usage/v8/theming/manual-dark-mode/angular/example_component_ts.md create mode 100644 static/usage/v8/theming/manual-dark-mode/angular/global_css.md create mode 100644 static/usage/v8/theming/manual-dark-mode/demo.html create mode 100644 static/usage/v8/theming/manual-dark-mode/index.md create mode 100644 static/usage/v8/theming/manual-dark-mode/javascript.md create mode 100644 static/usage/v8/theming/manual-dark-mode/react/main_css.md create mode 100644 static/usage/v8/theming/manual-dark-mode/react/main_tsx.md create mode 100644 static/usage/v8/theming/manual-dark-mode/theme/variables_css.md create mode 100644 static/usage/v8/theming/manual-dark-mode/vue.md create mode 100644 static/usage/v8/thumbnail/basic/angular.md create mode 100644 static/usage/v8/thumbnail/basic/demo.html create mode 100644 static/usage/v8/thumbnail/basic/index.md create mode 100644 static/usage/v8/thumbnail/basic/javascript.md create mode 100644 static/usage/v8/thumbnail/basic/react.md create mode 100644 static/usage/v8/thumbnail/basic/vue.md create mode 100644 static/usage/v8/thumbnail/item/angular.md create mode 100644 static/usage/v8/thumbnail/item/demo.html create mode 100644 static/usage/v8/thumbnail/item/index.md create mode 100644 static/usage/v8/thumbnail/item/javascript.md create mode 100644 static/usage/v8/thumbnail/item/react.md create mode 100644 static/usage/v8/thumbnail/item/vue.md create mode 100644 static/usage/v8/thumbnail/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/thumbnail/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/thumbnail/theming/css-properties/demo.html create mode 100644 static/usage/v8/thumbnail/theming/css-properties/index.md create mode 100644 static/usage/v8/thumbnail/theming/css-properties/javascript.md create mode 100644 static/usage/v8/thumbnail/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/thumbnail/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/thumbnail/theming/css-properties/vue.md create mode 100644 static/usage/v8/title/basic/angular.md create mode 100644 static/usage/v8/title/basic/demo.html create mode 100644 static/usage/v8/title/basic/index.md create mode 100644 static/usage/v8/title/basic/javascript.md create mode 100644 static/usage/v8/title/basic/react.md create mode 100644 static/usage/v8/title/basic/vue.md create mode 100644 static/usage/v8/title/collapsible-large-title/basic/angular.md create mode 100644 static/usage/v8/title/collapsible-large-title/basic/demo.html create mode 100644 static/usage/v8/title/collapsible-large-title/basic/index.md create mode 100644 static/usage/v8/title/collapsible-large-title/basic/javascript.md create mode 100644 static/usage/v8/title/collapsible-large-title/basic/react.md create mode 100644 static/usage/v8/title/collapsible-large-title/basic/vue.md create mode 100644 static/usage/v8/title/collapsible-large-title/buttons/angular.md create mode 100644 static/usage/v8/title/collapsible-large-title/buttons/demo.html create mode 100644 static/usage/v8/title/collapsible-large-title/buttons/index.md create mode 100644 static/usage/v8/title/collapsible-large-title/buttons/javascript.md create mode 100644 static/usage/v8/title/collapsible-large-title/buttons/react.md create mode 100644 static/usage/v8/title/collapsible-large-title/buttons/vue.md create mode 100644 static/usage/v8/title/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/title/theming/css-properties/angular/global_css.md create mode 100644 static/usage/v8/title/theming/css-properties/demo.html create mode 100644 static/usage/v8/title/theming/css-properties/index.md create mode 100644 static/usage/v8/title/theming/css-properties/javascript.md create mode 100644 static/usage/v8/title/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/title/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/title/theming/css-properties/vue.md create mode 100644 static/usage/v8/toast/buttons/angular/example_component_html.md create mode 100644 static/usage/v8/toast/buttons/angular/example_component_ts.md create mode 100644 static/usage/v8/toast/buttons/demo.html create mode 100644 static/usage/v8/toast/buttons/index.md create mode 100644 static/usage/v8/toast/buttons/javascript.md create mode 100644 static/usage/v8/toast/buttons/react.md create mode 100644 static/usage/v8/toast/buttons/vue.md create mode 100644 static/usage/v8/toast/icon/angular.md create mode 100644 static/usage/v8/toast/icon/demo.html create mode 100644 static/usage/v8/toast/icon/index.md create mode 100644 static/usage/v8/toast/icon/javascript.md create mode 100644 static/usage/v8/toast/icon/react.md create mode 100644 static/usage/v8/toast/icon/vue.md create mode 100644 static/usage/v8/toast/inline/basic/angular.md create mode 100644 static/usage/v8/toast/inline/basic/demo.html create mode 100644 static/usage/v8/toast/inline/basic/index.md create mode 100644 static/usage/v8/toast/inline/basic/javascript.md create mode 100644 static/usage/v8/toast/inline/basic/react.md create mode 100644 static/usage/v8/toast/inline/basic/vue.md create mode 100644 static/usage/v8/toast/inline/is-open/angular/example_component_html.md create mode 100644 static/usage/v8/toast/inline/is-open/angular/example_component_ts.md create mode 100644 static/usage/v8/toast/inline/is-open/demo.html create mode 100644 static/usage/v8/toast/inline/is-open/index.md create mode 100644 static/usage/v8/toast/inline/is-open/javascript.md create mode 100644 static/usage/v8/toast/inline/is-open/react.md create mode 100644 static/usage/v8/toast/inline/is-open/vue.md create mode 100644 static/usage/v8/toast/layout/angular/example_component_html.md create mode 100644 static/usage/v8/toast/layout/angular/example_component_ts.md create mode 100644 static/usage/v8/toast/layout/demo.html create mode 100644 static/usage/v8/toast/layout/index.md create mode 100644 static/usage/v8/toast/layout/javascript.md create mode 100644 static/usage/v8/toast/layout/react.md create mode 100644 static/usage/v8/toast/layout/vue.md create mode 100644 static/usage/v8/toast/position-anchor/angular.md create mode 100644 static/usage/v8/toast/position-anchor/demo.html create mode 100644 static/usage/v8/toast/position-anchor/index.md create mode 100644 static/usage/v8/toast/position-anchor/javascript.md create mode 100644 static/usage/v8/toast/position-anchor/react.md create mode 100644 static/usage/v8/toast/position-anchor/vue.md create mode 100644 static/usage/v8/toast/presenting/controller/angular/example_component_html.md create mode 100644 static/usage/v8/toast/presenting/controller/angular/example_component_ts.md create mode 100644 static/usage/v8/toast/presenting/controller/demo.html create mode 100644 static/usage/v8/toast/presenting/controller/index.md create mode 100644 static/usage/v8/toast/presenting/controller/javascript.md create mode 100644 static/usage/v8/toast/presenting/controller/react.md create mode 100644 static/usage/v8/toast/presenting/controller/vue.md create mode 100644 static/usage/v8/toast/theming/angular/example_component_html.md create mode 100644 static/usage/v8/toast/theming/angular/example_component_ts.md create mode 100644 static/usage/v8/toast/theming/angular/global_css.md create mode 100644 static/usage/v8/toast/theming/demo.html create mode 100644 static/usage/v8/toast/theming/index.md create mode 100644 static/usage/v8/toast/theming/javascript.md create mode 100644 static/usage/v8/toast/theming/react/main_css.md create mode 100644 static/usage/v8/toast/theming/react/main_tsx.md create mode 100644 static/usage/v8/toast/theming/vue.md create mode 100644 static/usage/v8/toggle/alignment/angular.md create mode 100644 static/usage/v8/toggle/alignment/demo.html create mode 100644 static/usage/v8/toggle/alignment/index.md create mode 100644 static/usage/v8/toggle/alignment/javascript.md create mode 100644 static/usage/v8/toggle/alignment/react.md create mode 100644 static/usage/v8/toggle/alignment/vue.md create mode 100644 static/usage/v8/toggle/basic/angular.md create mode 100644 static/usage/v8/toggle/basic/demo.html create mode 100644 static/usage/v8/toggle/basic/index.md create mode 100644 static/usage/v8/toggle/basic/javascript.md create mode 100644 static/usage/v8/toggle/basic/react.md create mode 100644 static/usage/v8/toggle/basic/vue.md create mode 100644 static/usage/v8/toggle/justify/angular.md create mode 100644 static/usage/v8/toggle/justify/demo.html create mode 100644 static/usage/v8/toggle/justify/index.md create mode 100644 static/usage/v8/toggle/justify/javascript.md create mode 100644 static/usage/v8/toggle/justify/react.md create mode 100644 static/usage/v8/toggle/justify/vue.md create mode 100644 static/usage/v8/toggle/label-placement/angular.md create mode 100644 static/usage/v8/toggle/label-placement/demo.html create mode 100644 static/usage/v8/toggle/label-placement/index.md create mode 100644 static/usage/v8/toggle/label-placement/javascript.md create mode 100644 static/usage/v8/toggle/label-placement/react.md create mode 100644 static/usage/v8/toggle/label-placement/vue.md create mode 100644 static/usage/v8/toggle/list/angular.md create mode 100644 static/usage/v8/toggle/list/demo.html create mode 100644 static/usage/v8/toggle/list/index.md create mode 100644 static/usage/v8/toggle/list/javascript.md create mode 100644 static/usage/v8/toggle/list/react.md create mode 100644 static/usage/v8/toggle/list/vue.md create mode 100644 static/usage/v8/toggle/migration/index.md create mode 100644 static/usage/v8/toggle/on-off/angular.md create mode 100644 static/usage/v8/toggle/on-off/demo.html create mode 100644 static/usage/v8/toggle/on-off/index.md create mode 100644 static/usage/v8/toggle/on-off/javascript.md create mode 100644 static/usage/v8/toggle/on-off/react.md create mode 100644 static/usage/v8/toggle/on-off/vue.md create mode 100644 static/usage/v8/toggle/theming/colors/angular.md create mode 100644 static/usage/v8/toggle/theming/colors/demo.html create mode 100644 static/usage/v8/toggle/theming/colors/index.md create mode 100644 static/usage/v8/toggle/theming/colors/javascript.md create mode 100644 static/usage/v8/toggle/theming/colors/react.md create mode 100644 static/usage/v8/toggle/theming/colors/vue.md create mode 100644 static/usage/v8/toggle/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/toggle/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/toggle/theming/css-properties/demo.html create mode 100644 static/usage/v8/toggle/theming/css-properties/index.md create mode 100644 static/usage/v8/toggle/theming/css-properties/javascript.md create mode 100644 static/usage/v8/toggle/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/toggle/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/toggle/theming/css-properties/vue.md create mode 100644 static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_css.md create mode 100644 static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_html.md create mode 100644 static/usage/v8/toggle/theming/css-shadow-parts/demo.html create mode 100644 static/usage/v8/toggle/theming/css-shadow-parts/index.md create mode 100644 static/usage/v8/toggle/theming/css-shadow-parts/javascript.md create mode 100644 static/usage/v8/toggle/theming/css-shadow-parts/react/main_css.md create mode 100644 static/usage/v8/toggle/theming/css-shadow-parts/react/main_tsx.md create mode 100644 static/usage/v8/toggle/theming/css-shadow-parts/vue.md create mode 100644 static/usage/v8/toolbar/basic/angular.md create mode 100644 static/usage/v8/toolbar/basic/demo.html create mode 100644 static/usage/v8/toolbar/basic/index.md create mode 100644 static/usage/v8/toolbar/basic/javascript.md create mode 100644 static/usage/v8/toolbar/basic/react.md create mode 100644 static/usage/v8/toolbar/basic/vue.md create mode 100644 static/usage/v8/toolbar/buttons/angular.md create mode 100644 static/usage/v8/toolbar/buttons/demo.html create mode 100644 static/usage/v8/toolbar/buttons/index.md create mode 100644 static/usage/v8/toolbar/buttons/javascript.md create mode 100644 static/usage/v8/toolbar/buttons/react.md create mode 100644 static/usage/v8/toolbar/buttons/vue.md create mode 100644 static/usage/v8/toolbar/progress-bars/angular.md create mode 100644 static/usage/v8/toolbar/progress-bars/demo.html create mode 100644 static/usage/v8/toolbar/progress-bars/index.md create mode 100644 static/usage/v8/toolbar/progress-bars/javascript.md create mode 100644 static/usage/v8/toolbar/progress-bars/react.md create mode 100644 static/usage/v8/toolbar/progress-bars/vue.md create mode 100644 static/usage/v8/toolbar/searchbars/angular.md create mode 100644 static/usage/v8/toolbar/searchbars/demo.html create mode 100644 static/usage/v8/toolbar/searchbars/index.md create mode 100644 static/usage/v8/toolbar/searchbars/javascript.md create mode 100644 static/usage/v8/toolbar/searchbars/react.md create mode 100644 static/usage/v8/toolbar/searchbars/vue.md create mode 100644 static/usage/v8/toolbar/segments/angular.md create mode 100644 static/usage/v8/toolbar/segments/demo.html create mode 100644 static/usage/v8/toolbar/segments/index.md create mode 100644 static/usage/v8/toolbar/segments/javascript.md create mode 100644 static/usage/v8/toolbar/segments/react.md create mode 100644 static/usage/v8/toolbar/segments/vue.md create mode 100644 static/usage/v8/toolbar/theming/colors/angular.md create mode 100644 static/usage/v8/toolbar/theming/colors/demo.html create mode 100644 static/usage/v8/toolbar/theming/colors/index.md create mode 100644 static/usage/v8/toolbar/theming/colors/javascript.md create mode 100644 static/usage/v8/toolbar/theming/colors/react.md create mode 100644 static/usage/v8/toolbar/theming/colors/vue.md create mode 100644 static/usage/v8/toolbar/theming/css-properties/angular/example_component_css.md create mode 100644 static/usage/v8/toolbar/theming/css-properties/angular/example_component_html.md create mode 100644 static/usage/v8/toolbar/theming/css-properties/demo.html create mode 100644 static/usage/v8/toolbar/theming/css-properties/index.md create mode 100644 static/usage/v8/toolbar/theming/css-properties/javascript.md create mode 100644 static/usage/v8/toolbar/theming/css-properties/react/main_css.md create mode 100644 static/usage/v8/toolbar/theming/css-properties/react/main_tsx.md create mode 100644 static/usage/v8/toolbar/theming/css-properties/vue.md create mode 100644 versioned_docs/version-v7/README.md create mode 100644 versioned_docs/version-v7/angular/build-options.md create mode 100644 versioned_docs/version-v7/angular/lifecycle.md create mode 100644 versioned_docs/version-v7/angular/navigation.md create mode 100644 versioned_docs/version-v7/angular/overview.md create mode 100644 versioned_docs/version-v7/angular/performance.md create mode 100644 versioned_docs/version-v7/angular/platform.md create mode 100644 versioned_docs/version-v7/angular/pwa.md create mode 100644 versioned_docs/version-v7/angular/slides.md create mode 100644 versioned_docs/version-v7/angular/storage.md create mode 100644 versioned_docs/version-v7/angular/testing.md create mode 100644 versioned_docs/version-v7/angular/virtual-scroll.md create mode 100644 versioned_docs/version-v7/angular/your-first-app.md create mode 100644 versioned_docs/version-v7/angular/your-first-app/2-taking-photos.md create mode 100644 versioned_docs/version-v7/angular/your-first-app/3-saving-photos.md create mode 100644 versioned_docs/version-v7/angular/your-first-app/4-loading-photos.md create mode 100644 versioned_docs/version-v7/angular/your-first-app/5-adding-mobile.md create mode 100644 versioned_docs/version-v7/angular/your-first-app/6-deploying-mobile.md create mode 100644 versioned_docs/version-v7/angular/your-first-app/7-live-reload.md create mode 100644 versioned_docs/version-v7/angular/your-first-app/8-distribute.md create mode 100644 versioned_docs/version-v7/api.md create mode 100644 versioned_docs/version-v7/api/accordion-group.md create mode 100644 versioned_docs/version-v7/api/accordion.md create mode 100644 versioned_docs/version-v7/api/action-sheet.md create mode 100644 versioned_docs/version-v7/api/alert.md create mode 100644 versioned_docs/version-v7/api/app.md create mode 100644 versioned_docs/version-v7/api/avatar.md create mode 100644 versioned_docs/version-v7/api/back-button.md create mode 100644 versioned_docs/version-v7/api/backdrop.md create mode 100644 versioned_docs/version-v7/api/badge.md create mode 100644 versioned_docs/version-v7/api/breadcrumb.md create mode 100644 versioned_docs/version-v7/api/breadcrumbs.md create mode 100644 versioned_docs/version-v7/api/button.md create mode 100644 versioned_docs/version-v7/api/buttons.md create mode 100644 versioned_docs/version-v7/api/card-content.md create mode 100644 versioned_docs/version-v7/api/card-header.md create mode 100644 versioned_docs/version-v7/api/card-subtitle.md create mode 100644 versioned_docs/version-v7/api/card-title.md create mode 100644 versioned_docs/version-v7/api/card.md create mode 100644 versioned_docs/version-v7/api/checkbox.md create mode 100644 versioned_docs/version-v7/api/chip.md create mode 100644 versioned_docs/version-v7/api/col.md create mode 100644 versioned_docs/version-v7/api/content.md create mode 100644 versioned_docs/version-v7/api/datetime-button.md create mode 100644 versioned_docs/version-v7/api/datetime.md create mode 100644 versioned_docs/version-v7/api/fab-button.md create mode 100644 versioned_docs/version-v7/api/fab-list.md create mode 100644 versioned_docs/version-v7/api/fab.md create mode 100644 versioned_docs/version-v7/api/footer.md create mode 100644 versioned_docs/version-v7/api/grid.md create mode 100644 versioned_docs/version-v7/api/header.md create mode 100644 versioned_docs/version-v7/api/icon.md create mode 100644 versioned_docs/version-v7/api/img.md create mode 100644 versioned_docs/version-v7/api/infinite-scroll-content.md create mode 100644 versioned_docs/version-v7/api/infinite-scroll.md create mode 100644 versioned_docs/version-v7/api/input.md create mode 100644 versioned_docs/version-v7/api/item-divider.md create mode 100644 versioned_docs/version-v7/api/item-group.md create mode 100644 versioned_docs/version-v7/api/item-option.md create mode 100644 versioned_docs/version-v7/api/item-options.md create mode 100644 versioned_docs/version-v7/api/item-sliding.md create mode 100644 versioned_docs/version-v7/api/item.md create mode 100644 versioned_docs/version-v7/api/label.md create mode 100644 versioned_docs/version-v7/api/list-header.md create mode 100644 versioned_docs/version-v7/api/list.md create mode 100644 versioned_docs/version-v7/api/loading.md create mode 100644 versioned_docs/version-v7/api/menu-button.md create mode 100644 versioned_docs/version-v7/api/menu-toggle.md create mode 100644 versioned_docs/version-v7/api/menu.md create mode 100644 versioned_docs/version-v7/api/modal.md create mode 100644 versioned_docs/version-v7/api/nav-link.md create mode 100644 versioned_docs/version-v7/api/nav.md create mode 100644 versioned_docs/version-v7/api/note.md create mode 100644 versioned_docs/version-v7/api/picker.md create mode 100644 versioned_docs/version-v7/api/popover.md create mode 100644 versioned_docs/version-v7/api/progress-bar.md create mode 100644 versioned_docs/version-v7/api/radio-group.md create mode 100644 versioned_docs/version-v7/api/radio.md create mode 100644 versioned_docs/version-v7/api/range.md create mode 100644 versioned_docs/version-v7/api/refresher-content.md create mode 100644 versioned_docs/version-v7/api/refresher.md create mode 100644 versioned_docs/version-v7/api/reorder-group.md create mode 100644 versioned_docs/version-v7/api/reorder.md create mode 100644 versioned_docs/version-v7/api/ripple-effect.md create mode 100644 versioned_docs/version-v7/api/route-redirect.md create mode 100644 versioned_docs/version-v7/api/route.md create mode 100644 versioned_docs/version-v7/api/router-link.md create mode 100644 versioned_docs/version-v7/api/router-outlet.md create mode 100644 versioned_docs/version-v7/api/router.md create mode 100644 versioned_docs/version-v7/api/row.md create mode 100644 versioned_docs/version-v7/api/searchbar.md create mode 100644 versioned_docs/version-v7/api/segment-button.md create mode 100644 versioned_docs/version-v7/api/segment.md create mode 100644 versioned_docs/version-v7/api/select-option.md create mode 100644 versioned_docs/version-v7/api/select.md create mode 100644 versioned_docs/version-v7/api/skeleton-text.md create mode 100644 versioned_docs/version-v7/api/spinner.md create mode 100644 versioned_docs/version-v7/api/split-pane.md create mode 100644 versioned_docs/version-v7/api/tab-bar.md create mode 100644 versioned_docs/version-v7/api/tab-button.md create mode 100644 versioned_docs/version-v7/api/tab.md create mode 100644 versioned_docs/version-v7/api/tabs.md create mode 100644 versioned_docs/version-v7/api/text.md create mode 100644 versioned_docs/version-v7/api/textarea.md create mode 100644 versioned_docs/version-v7/api/thumbnail.md create mode 100644 versioned_docs/version-v7/api/title.md create mode 100644 versioned_docs/version-v7/api/toast.md create mode 100644 versioned_docs/version-v7/api/toggle.md create mode 100644 versioned_docs/version-v7/api/toolbar.md create mode 100644 versioned_docs/version-v7/cli.md create mode 100644 versioned_docs/version-v7/cli/commands/.gitignore create mode 100644 versioned_docs/version-v7/cli/configuration.md create mode 100644 versioned_docs/version-v7/cli/livereload.md create mode 100644 versioned_docs/version-v7/cli/using-a-proxy.md create mode 100644 versioned_docs/version-v7/components.md create mode 100644 versioned_docs/version-v7/contributing/coc.md create mode 100644 versioned_docs/version-v7/contributing/how-to-contribute.md create mode 100644 versioned_docs/version-v7/core-concepts/cross-platform.md create mode 100644 versioned_docs/version-v7/core-concepts/fundamentals.md create mode 100644 versioned_docs/version-v7/core-concepts/webview.md create mode 100644 versioned_docs/version-v7/core-concepts/what-are-progressive-web-apps.md create mode 100644 versioned_docs/version-v7/deployment/app-store.md create mode 100644 versioned_docs/version-v7/deployment/desktop-app.md create mode 100644 versioned_docs/version-v7/deployment/play-store.mdx create mode 100644 versioned_docs/version-v7/deployment/progressive-web-app.md create mode 100644 versioned_docs/version-v7/developer-resources/books.md create mode 100644 versioned_docs/version-v7/developer-resources/courses.md create mode 100644 versioned_docs/version-v7/developer-resources/guides.md create mode 100644 versioned_docs/version-v7/developer-resources/guides/first-app-v3/creating-photo-gallery-device-storage.md create mode 100644 versioned_docs/version-v7/developer-resources/guides/first-app-v3/intro.md create mode 100644 versioned_docs/version-v7/developer-resources/guides/first-app-v3/ios-android-camera.md create mode 100644 versioned_docs/version-v7/developer-resources/guides/first-app-v3/realtime-updates-ionic-deploy.md create mode 100644 versioned_docs/version-v7/developer-resources/guides/first-app-v3/theming.md create mode 100644 versioned_docs/version-v7/developer-resources/guides/first-app-v3/track-bugs-ionic-monitoring.md create mode 100644 versioned_docs/version-v7/developer-resources/guides/first-app-v4/creating-photo-gallery-device-storage.md create mode 100644 versioned_docs/version-v7/developer-resources/guides/first-app-v4/intro.md create mode 100644 versioned_docs/version-v7/developer-resources/guides/first-app-v4/ios-android-camera.md create mode 100644 versioned_docs/version-v7/developer-resources/guides/first-app-v4/theming.md create mode 100644 versioned_docs/version-v7/developer-resources/posts.md create mode 100644 versioned_docs/version-v7/developer-resources/tools.md create mode 100644 versioned_docs/version-v7/developer-resources/videos.md create mode 100644 versioned_docs/version-v7/developing/android.md create mode 100644 versioned_docs/version-v7/developing/config.md create mode 100644 versioned_docs/version-v7/developing/config/global/index.md create mode 100644 versioned_docs/version-v7/developing/config/per-component/index.md create mode 100644 versioned_docs/version-v7/developing/config/per-platform-fallback/index.md create mode 100644 versioned_docs/version-v7/developing/config/per-platform-overrides/index.md create mode 100644 versioned_docs/version-v7/developing/config/per-platform/index.md create mode 100644 versioned_docs/version-v7/developing/hardware-back-button.md create mode 100644 versioned_docs/version-v7/developing/ios.md create mode 100644 versioned_docs/version-v7/developing/keyboard.md create mode 100644 versioned_docs/version-v7/developing/managing-focus.md create mode 100644 versioned_docs/version-v7/developing/previewing.md create mode 100644 versioned_docs/version-v7/developing/scaffolding.md create mode 100644 versioned_docs/version-v7/developing/starting.md create mode 100644 versioned_docs/version-v7/developing/tips.md create mode 100644 versioned_docs/version-v7/index.md create mode 100644 versioned_docs/version-v7/intro/cdn.md create mode 100644 versioned_docs/version-v7/intro/cli.md create mode 100644 versioned_docs/version-v7/intro/environment.md create mode 100644 versioned_docs/version-v7/intro/first-app.md create mode 100644 versioned_docs/version-v7/intro/next.md create mode 100644 versioned_docs/version-v7/intro/vscode-extension.md create mode 100644 versioned_docs/version-v7/layout/css-utilities.md create mode 100644 versioned_docs/version-v7/layout/dynamic-font-scaling.md create mode 100644 versioned_docs/version-v7/layout/global-stylesheets.md create mode 100644 versioned_docs/version-v7/layout/structure.md create mode 100644 versioned_docs/version-v7/native-faq.md create mode 100644 versioned_docs/version-v7/native-setup.md create mode 100644 versioned_docs/version-v7/native.md create mode 100644 versioned_docs/version-v7/native/.gitignore create mode 100644 versioned_docs/version-v7/react.md create mode 100644 versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md create mode 100644 versioned_docs/version-v7/react/lifecycle.md create mode 100644 versioned_docs/version-v7/react/navigation.md create mode 100644 versioned_docs/version-v7/react/overlays.md create mode 100644 versioned_docs/version-v7/react/performance.md create mode 100644 versioned_docs/version-v7/react/platform.md create mode 100644 versioned_docs/version-v7/react/pwa.md create mode 100644 versioned_docs/version-v7/react/quickstart.md create mode 100644 versioned_docs/version-v7/react/slides.md create mode 100644 versioned_docs/version-v7/react/storage.md create mode 100644 versioned_docs/version-v7/react/testing/introduction.md create mode 100644 versioned_docs/version-v7/react/testing/unit-testing/best-practices.md create mode 100644 versioned_docs/version-v7/react/testing/unit-testing/examples.md create mode 100644 versioned_docs/version-v7/react/testing/unit-testing/setup.md create mode 100644 versioned_docs/version-v7/react/virtual-scroll.md create mode 100644 versioned_docs/version-v7/react/your-first-app.md create mode 100644 versioned_docs/version-v7/react/your-first-app/2-taking-photos.md create mode 100644 versioned_docs/version-v7/react/your-first-app/3-saving-photos.md create mode 100644 versioned_docs/version-v7/react/your-first-app/4-loading-photos.md create mode 100644 versioned_docs/version-v7/react/your-first-app/5-adding-mobile.md create mode 100644 versioned_docs/version-v7/react/your-first-app/6-deploying-mobile.md create mode 100644 versioned_docs/version-v7/react/your-first-app/7-live-reload.md create mode 100644 versioned_docs/version-v7/react/your-first-app/8-distribute.md create mode 100644 versioned_docs/version-v7/reference/browser-support.md create mode 100644 versioned_docs/version-v7/reference/glossary.md create mode 100644 versioned_docs/version-v7/reference/release-notes.md create mode 100644 versioned_docs/version-v7/reference/support.md create mode 100644 versioned_docs/version-v7/reference/versioning.md create mode 100644 versioned_docs/version-v7/techniques/security.md create mode 100644 versioned_docs/version-v7/test/page1.md create mode 100644 versioned_docs/version-v7/test/page2.md create mode 100644 versioned_docs/version-v7/theming/advanced.md create mode 100644 versioned_docs/version-v7/theming/basics.md create mode 100644 versioned_docs/version-v7/theming/color-generator.md create mode 100644 versioned_docs/version-v7/theming/colors.md create mode 100644 versioned_docs/version-v7/theming/css-shadow-parts.md create mode 100644 versioned_docs/version-v7/theming/css-variables.md create mode 100644 versioned_docs/version-v7/theming/dark-mode.md create mode 100644 versioned_docs/version-v7/theming/platform-styles.md create mode 100644 versioned_docs/version-v7/theming/themes.md create mode 100644 versioned_docs/version-v7/troubleshooting/build.md create mode 100644 versioned_docs/version-v7/troubleshooting/cors.md create mode 100644 versioned_docs/version-v7/troubleshooting/debugging.md create mode 100644 versioned_docs/version-v7/troubleshooting/native.md create mode 100644 versioned_docs/version-v7/troubleshooting/runtime.md create mode 100644 versioned_docs/version-v7/updating/4-0.md create mode 100644 versioned_docs/version-v7/updating/5-0.md create mode 100644 versioned_docs/version-v7/updating/6-0.md create mode 100644 versioned_docs/version-v7/updating/7-0.md create mode 100644 versioned_docs/version-v7/utilities/animations.md create mode 100644 versioned_docs/version-v7/utilities/gestures.md create mode 100644 versioned_docs/version-v7/vue/lifecycle.md create mode 100644 versioned_docs/version-v7/vue/navigation.md create mode 100644 versioned_docs/version-v7/vue/overview.md create mode 100644 versioned_docs/version-v7/vue/performance.md create mode 100644 versioned_docs/version-v7/vue/platform.md create mode 100644 versioned_docs/version-v7/vue/pwa.md create mode 100644 versioned_docs/version-v7/vue/quickstart.md create mode 100644 versioned_docs/version-v7/vue/slides.md create mode 100644 versioned_docs/version-v7/vue/storage.md create mode 100644 versioned_docs/version-v7/vue/testing.md create mode 100644 versioned_docs/version-v7/vue/troubleshooting.md create mode 100644 versioned_docs/version-v7/vue/utility-functions.md create mode 100644 versioned_docs/version-v7/vue/virtual-scroll.md create mode 100644 versioned_docs/version-v7/vue/your-first-app.md create mode 100644 versioned_docs/version-v7/vue/your-first-app/2-taking-photos.md create mode 100644 versioned_docs/version-v7/vue/your-first-app/3-saving-photos.md create mode 100644 versioned_docs/version-v7/vue/your-first-app/4-loading-photos.md create mode 100644 versioned_docs/version-v7/vue/your-first-app/5-adding-mobile.md create mode 100644 versioned_docs/version-v7/vue/your-first-app/6-deploying-mobile.md create mode 100644 versioned_docs/version-v7/vue/your-first-app/7-live-reload.md create mode 100644 versioned_docs/version-v7/vue/your-first-app/8-distribute.md create mode 100644 versioned_sidebars/version-v7-sidebars.json diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.md index 312f8acd762..fb025221dd7 100644 --- a/docs/api/accordion-group.md +++ b/docs/api/accordion-group.md @@ -1,12 +1,12 @@ --- title: "ion-accordion-group" --- -import Props from '@ionic-internal/component-api/v7/accordion-group/props.md'; -import Events from '@ionic-internal/component-api/v7/accordion-group/events.md'; -import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.md'; -import Parts from '@ionic-internal/component-api/v7/accordion-group/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/accordion-group/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/accordion-group/slots.md'; +import Props from '@ionic-internal/component-api/v8/accordion-group/props.md'; +import Events from '@ionic-internal/component-api/v8/accordion-group/events.md'; +import Methods from '@ionic-internal/component-api/v8/accordion-group/methods.md'; +import Parts from '@ionic-internal/component-api/v8/accordion-group/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/accordion-group/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/accordion-group/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; diff --git a/docs/api/accordion.md b/docs/api/accordion.md index 0859e3d9ba4..c1f33321b17 100644 --- a/docs/api/accordion.md +++ b/docs/api/accordion.md @@ -1,12 +1,12 @@ --- title: "ion-accordion" --- -import Props from '@ionic-internal/component-api/v7/accordion/props.md'; -import Events from '@ionic-internal/component-api/v7/accordion/events.md'; -import Methods from '@ionic-internal/component-api/v7/accordion/methods.md'; -import Parts from '@ionic-internal/component-api/v7/accordion/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/accordion/slots.md'; +import Props from '@ionic-internal/component-api/v8/accordion/props.md'; +import Events from '@ionic-internal/component-api/v8/accordion/events.md'; +import Methods from '@ionic-internal/component-api/v8/accordion/methods.md'; +import Parts from '@ionic-internal/component-api/v8/accordion/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/accordion/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/accordion/slots.md'; ion-accordion: Accordion Components: How to Build & Examples @@ -22,7 +22,7 @@ Accordions provide collapsible sections in your content to reduce vertical space ## Basic Usage -import Basic from '@site/static/usage/v7/accordion/basic/index.md'; +import Basic from '@site/static/usage/v8/accordion/basic/index.md'; @@ -30,7 +30,7 @@ import Basic from '@site/static/usage/v7/accordion/basic/index.md'; Which accordion is open is controlled by setting the `value` property on `ion-accordion-group`. Setting this property allows developers to programmatically expand or collapse certain accordions. -import Toggle from '@site/static/usage/v7/accordion/toggle/index.md'; +import Toggle from '@site/static/usage/v8/accordion/toggle/index.md'; @@ -38,7 +38,7 @@ import Toggle from '@site/static/usage/v7/accordion/toggle/index.md'; Developers can listen for the `ionChange` event to be notified when accordions expand or collapse. -import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.md'; +import ListenChanges from '@site/static/usage/v8/accordion/listen-changes/index.md'; @@ -46,7 +46,7 @@ import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index. Developers can allow multiple accordions to be open at once with the `multiple` property. -import Multiple from '@site/static/usage/v7/accordion/multiple/index.md'; +import Multiple from '@site/static/usage/v8/accordion/multiple/index.md'; @@ -56,7 +56,7 @@ import Multiple from '@site/static/usage/v7/accordion/multiple/index.md'; Individual accordions can be disabled with the `disabled` property on `ion-accordion`. -import DisableIndividual from '@site/static/usage/v7/accordion/disable/individual/index.md'; +import DisableIndividual from '@site/static/usage/v8/accordion/disable/individual/index.md'; @@ -64,7 +64,7 @@ import DisableIndividual from '@site/static/usage/v7/accordion/disable/individua The accordion group can be disabled with the `disabled` property on `ion-accordion-group`. -import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md'; +import DisableGroup from '@site/static/usage/v8/accordion/disable/group/index.md'; @@ -74,7 +74,7 @@ import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md Individual accordions can be disabled with the `readonly` property on `ion-accordion`. -import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individual/index.md'; +import ReadonlyIndividual from '@site/static/usage/v8/accordion/readonly/individual/index.md'; @@ -82,7 +82,7 @@ import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individ The accordion group can be disabled with the `readonly` property on `ion-accordion-group`. -import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.md'; +import ReadonlyGroup from '@site/static/usage/v8/accordion/readonly/group/index.md'; @@ -106,7 +106,7 @@ There are two built in expansion styles: `compact` and `inset`. This expansion s When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened. -import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.md'; +import ExpansionStyles from '@site/static/usage/v8/accordion/customization/expansion-styles/index.md'; @@ -130,7 +130,7 @@ ion-accordion.accordion-expanded ion-item[slot="header"] { } ``` -import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customization/advanced-expansion-styles/index.md'; +import AdvancedExpansionStyles from '@site/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md'; @@ -142,7 +142,7 @@ If you would like to manage the icon yourself or use an icon that is not an `ion Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion. -import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md'; +import Icons from '@site/static/usage/v8/accordion/customization/icons/index.md'; @@ -150,7 +150,7 @@ import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md' Since `ion-accordion` acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted `ion-item`. Since you are using `ion-item`, you also have access to all of the [ion-item CSS Variables](./item#css-custom-properties) and [ion-item Shadow Parts](./item#css-shadow-parts). Theming the content is also easily achieved by targeting the element that is in the `content` slot. -import Theming from '@site/static/usage/v7/accordion/customization/theming/index.md'; +import Theming from '@site/static/usage/v8/accordion/customization/theming/index.md'; @@ -160,7 +160,7 @@ import Theming from '@site/static/usage/v7/accordion/customization/theming/index By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app. -import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.md'; +import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibility/animations/index.md'; diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md index 6e70e6de7f3..afbec37e566 100644 --- a/docs/api/action-sheet.md +++ b/docs/api/action-sheet.md @@ -4,12 +4,12 @@ title: "ion-action-sheet" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v7/action-sheet/props.md'; -import Events from '@ionic-internal/component-api/v7/action-sheet/events.md'; -import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md'; -import Parts from '@ionic-internal/component-api/v7/action-sheet/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md'; +import Props from '@ionic-internal/component-api/v8/action-sheet/props.md'; +import Events from '@ionic-internal/component-api/v8/action-sheet/events.md'; +import Methods from '@ionic-internal/component-api/v8/action-sheet/methods.md'; +import Parts from '@ionic-internal/component-api/v8/action-sheet/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/action-sheet/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/action-sheet/slots.md'; ion-action-sheet: Action Sheet Dialog for iOS and Android @@ -27,7 +27,7 @@ An Action Sheet is a dialog that displays a set of options. It appears on top of `ion-action-sheet` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Action Sheet. -import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md'; +import Trigger from '@site/static/usage/v8/action-sheet/inline/trigger/index.md'; @@ -37,7 +37,7 @@ The `isOpen` property on `ion-action-sheet` allows developers to control the pre `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Action Sheet is dismissed. Developers should listen for the `ionActionSheetDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-action-sheet` from being tightly coupled with the state of the application. With a one way data binding, the Action Sheet only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Action Sheet needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. -import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md'; +import IsOpen from '@site/static/usage/v8/action-sheet/inline/isOpen/index.md'; @@ -45,7 +45,7 @@ import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md'; The `actionSheetController` can be used in situations where more control is needed over when the Action Sheet is presented and dismissed. -import Controller from '@site/static/usage/v7/action-sheet/controller/index.md'; +import Controller from '@site/static/usage/v8/action-sheet/controller/index.md'; @@ -59,7 +59,7 @@ A button can also be passed data via the `data` property on `ActionSheetButton`. When the `didDismiss` event is fired, the `data` and `role` fields of the event detail can be used to gather information about how the Action Sheet was dismissed. -import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/index.md'; +import RoleInfo from '@site/static/usage/v8/action-sheet/role-info-on-dismiss/index.md'; @@ -83,7 +83,7 @@ We recommend passing a custom class to `cssClass` in the `create` method and usi } ``` -import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md'; +import Styling from '@site/static/usage/v8/action-sheet/theming/styling/index.md'; @@ -91,7 +91,7 @@ import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md Any of the defined [CSS Custom Properties](#css-custom-properties-1) can be used to style the Action Sheet without needing to target individual elements. -import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md'; +import CssCustomProperties from '@site/static/usage/v8/action-sheet/theming/css-properties/index.md'; diff --git a/docs/api/alert.md b/docs/api/alert.md index 6563d2241ac..b35622c1faf 100644 --- a/docs/api/alert.md +++ b/docs/api/alert.md @@ -4,12 +4,12 @@ title: "ion-alert" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v7/alert/props.md'; -import Events from '@ionic-internal/component-api/v7/alert/events.md'; -import Methods from '@ionic-internal/component-api/v7/alert/methods.md'; -import Parts from '@ionic-internal/component-api/v7/alert/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/alert/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/alert/slots.md'; +import Props from '@ionic-internal/component-api/v8/alert/props.md'; +import Events from '@ionic-internal/component-api/v8/alert/events.md'; +import Methods from '@ionic-internal/component-api/v8/alert/methods.md'; +import Parts from '@ionic-internal/component-api/v8/alert/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/alert/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/alert/slots.md'; ion-alert: Ionic Alert Buttons with Custom Message Prompts @@ -26,7 +26,7 @@ An Alert is a dialog that presents users with information or collects informatio `ion-alert` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Alert. -import Trigger from '@site/static/usage/v7/alert/presenting/trigger/index.md'; +import Trigger from '@site/static/usage/v8/alert/presenting/trigger/index.md'; @@ -36,7 +36,7 @@ The `isOpen` property on `ion-alert` allows developers to control the presentati `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Alert is dismissed. Developers should listen for the `ionAlertDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-alert` from being tightly coupled with the state of the application. With a one way data binding, the Alert only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Alert needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. -import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md'; +import IsOpen from '@site/static/usage/v8/alert/presenting/isOpen/index.md'; @@ -44,7 +44,7 @@ import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md'; The `alertController` can be used in situations where more control is needed over when the Alert is presented and dismissed. -import Controller from '@site/static/usage/v7/alert/presenting/controller/index.md'; +import Controller from '@site/static/usage/v8/alert/presenting/controller/index.md'; @@ -54,7 +54,7 @@ In the array of `buttons`, each button includes properties for its `text`, and o Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role. -import Buttons from '@site/static/usage/v7/alert/buttons/index.md'; +import Buttons from '@site/static/usage/v8/alert/buttons/index.md'; @@ -65,13 +65,13 @@ Alerts can also include several different inputs whose data can be passed back t ### Text Inputs Example -import TextInputs from '@site/static/usage/v7/alert/inputs/text-inputs/index.md'; +import TextInputs from '@site/static/usage/v8/alert/inputs/text-inputs/index.md'; ### Radio Example -import Radios from '@site/static/usage/v7/alert/inputs/radios/index.md'; +import Radios from '@site/static/usage/v8/alert/inputs/radios/index.md'; @@ -101,7 +101,7 @@ Any of the defined [CSS Custom Properties](#css-custom-properties) can be used t } ``` -import Customization from '@site/static/usage/v7/alert/customization/index.md'; +import Customization from '@site/static/usage/v8/alert/customization/index.md'; diff --git a/docs/api/app.md b/docs/api/app.md index 1ac4dc6805e..1a4eb1ef4bd 100644 --- a/docs/api/app.md +++ b/docs/api/app.md @@ -1,12 +1,12 @@ --- title: "ion-app" --- -import Props from '@ionic-internal/component-api/v7/app/props.md'; -import Events from '@ionic-internal/component-api/v7/app/events.md'; -import Methods from '@ionic-internal/component-api/v7/app/methods.md'; -import Parts from '@ionic-internal/component-api/v7/app/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/app/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/app/slots.md'; +import Props from '@ionic-internal/component-api/v8/app/props.md'; +import Events from '@ionic-internal/component-api/v8/app/events.md'; +import Methods from '@ionic-internal/component-api/v8/app/methods.md'; +import Parts from '@ionic-internal/component-api/v8/app/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/app/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/app/slots.md'; ion-app: Container Element for an Ionic Application diff --git a/docs/api/avatar.md b/docs/api/avatar.md index 0f61597f61c..d529228b3e5 100644 --- a/docs/api/avatar.md +++ b/docs/api/avatar.md @@ -2,12 +2,12 @@ title: "ion-avatar" --- -import Props from '@ionic-internal/component-api/v7/avatar/props.md'; -import Events from '@ionic-internal/component-api/v7/avatar/events.md'; -import Methods from '@ionic-internal/component-api/v7/avatar/methods.md'; -import Parts from '@ionic-internal/component-api/v7/avatar/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/avatar/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/avatar/slots.md'; +import Props from '@ionic-internal/component-api/v8/avatar/props.md'; +import Events from '@ionic-internal/component-api/v8/avatar/events.md'; +import Methods from '@ionic-internal/component-api/v8/avatar/methods.md'; +import Parts from '@ionic-internal/component-api/v8/avatar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/avatar/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/avatar/slots.md'; ion-avatar: Circular Application Avatar Icon Component @@ -24,19 +24,19 @@ Avatars can be used by themselves or inside of any element. If placed inside of ## Basic Usage -import Basic from '@site/static/usage/v7/avatar/basic/index.md'; +import Basic from '@site/static/usage/v8/avatar/basic/index.md'; ## Chip Avatar -import Chip from '@site/static/usage/v7/avatar/chip/index.md'; +import Chip from '@site/static/usage/v8/avatar/chip/index.md'; ## Item Avatar -import Item from '@site/static/usage/v7/avatar/item/index.md'; +import Item from '@site/static/usage/v8/avatar/item/index.md'; @@ -44,7 +44,7 @@ import Item from '@site/static/usage/v7/avatar/item/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/avatar/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/avatar/theming/css-properties/index.md'; diff --git a/docs/api/back-button.md b/docs/api/back-button.md index 4b249e0f913..e4d8e66b222 100644 --- a/docs/api/back-button.md +++ b/docs/api/back-button.md @@ -1,12 +1,12 @@ --- title: "ion-back-button" --- -import Props from '@ionic-internal/component-api/v7/back-button/props.md'; -import Events from '@ionic-internal/component-api/v7/back-button/events.md'; -import Methods from '@ionic-internal/component-api/v7/back-button/methods.md'; -import Parts from '@ionic-internal/component-api/v7/back-button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/back-button/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/back-button/slots.md'; +import Props from '@ionic-internal/component-api/v8/back-button/props.md'; +import Events from '@ionic-internal/component-api/v8/back-button/events.md'; +import Methods from '@ionic-internal/component-api/v8/back-button/methods.md'; +import Parts from '@ionic-internal/component-api/v8/back-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/back-button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/back-button/slots.md'; ion-back-button: Custom Menu Back Button for Applications @@ -22,7 +22,7 @@ The back button navigates back in the app's history when clicked. It is only dis ## Basic Usage -import Basic from '@site/static/usage/v7/back-button/basic/index.md'; +import Basic from '@site/static/usage/v8/back-button/basic/index.md'; @@ -30,7 +30,7 @@ import Basic from '@site/static/usage/v7/back-button/basic/index.md'; By default, the back button will display the text `"Back"` with a `"chevron-back"` icon on `ios`, and an `"arrow-back-sharp"` icon on `md`. This can be customized per back button component by setting the `icon` or `text` properties. Alternatively, it can be set globally using the `backButtonIcon` or `backButtonText` properties in the global config. See the [Config docs](../developing/config) for more information. -import Custom from '@site/static/usage/v7/back-button/custom/index.md'; +import Custom from '@site/static/usage/v8/back-button/custom/index.md'; diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md index c553e21a6ad..37a8933e52f 100644 --- a/docs/api/backdrop.md +++ b/docs/api/backdrop.md @@ -1,12 +1,12 @@ --- title: "ion-backdrop" --- -import Props from '@ionic-internal/component-api/v7/backdrop/props.md'; -import Events from '@ionic-internal/component-api/v7/backdrop/events.md'; -import Methods from '@ionic-internal/component-api/v7/backdrop/methods.md'; -import Parts from '@ionic-internal/component-api/v7/backdrop/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/backdrop/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/backdrop/slots.md'; +import Props from '@ionic-internal/component-api/v8/backdrop/props.md'; +import Events from '@ionic-internal/component-api/v8/backdrop/events.md'; +import Methods from '@ionic-internal/component-api/v8/backdrop/methods.md'; +import Parts from '@ionic-internal/component-api/v8/backdrop/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/backdrop/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/backdrop/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -18,7 +18,7 @@ Backdrops are full screen components that overlay other components. They are use The backdrop prevents clicking or tapping on the content behind it. It is transparent by default, so the below demo includes CSS to make it visible. -import Basic from '@site/static/usage/v7/backdrop/basic/index.md'; +import Basic from '@site/static/usage/v8/backdrop/basic/index.md'; @@ -28,7 +28,7 @@ The backdrop can be customized by assigning CSS properties directly to the backd Content can be displayed above the backdrop by setting a `z-index` on the content, higher than the backdrop (defaults to `2`). -import Styling from '@site/static/usage/v7/backdrop/styling/index.md'; +import Styling from '@site/static/usage/v8/backdrop/styling/index.md'; diff --git a/docs/api/badge.md b/docs/api/badge.md index 5ebd44f1fda..58144518938 100644 --- a/docs/api/badge.md +++ b/docs/api/badge.md @@ -1,12 +1,12 @@ --- title: "ion-badge" --- -import Props from '@ionic-internal/component-api/v7/badge/props.md'; -import Events from '@ionic-internal/component-api/v7/badge/events.md'; -import Methods from '@ionic-internal/component-api/v7/badge/methods.md'; -import Parts from '@ionic-internal/component-api/v7/badge/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/badge/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/badge/slots.md'; +import Props from '@ionic-internal/component-api/v8/badge/props.md'; +import Events from '@ionic-internal/component-api/v8/badge/events.md'; +import Methods from '@ionic-internal/component-api/v8/badge/methods.md'; +import Parts from '@ionic-internal/component-api/v8/badge/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/badge/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/badge/slots.md'; ion-badge: iOS & Android App Notification Badge Icons @@ -21,7 +21,7 @@ Badges are inline block elements that usually appear near another element. Typic ## Basic Usage -import Basic from '@site/static/usage/v7/badge/basic/index.md'; +import Basic from '@site/static/usage/v8/badge/basic/index.md'; @@ -29,13 +29,13 @@ import Basic from '@site/static/usage/v7/badge/basic/index.md'; ### Colors -import Colors from '@site/static/usage/v7/badge/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/badge/theming/colors/index.md'; ### CSS Properties -import CSSProps from '@site/static/usage/v7/badge/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/badge/theming/css-properties/index.md'; diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.md index 5679d17a3c9..770fb1b6bfe 100644 --- a/docs/api/breadcrumb.md +++ b/docs/api/breadcrumb.md @@ -1,12 +1,12 @@ --- title: "ion-breadcrumb" --- -import Props from '@ionic-internal/component-api/v7/breadcrumb/props.md'; -import Events from '@ionic-internal/component-api/v7/breadcrumb/events.md'; -import Methods from '@ionic-internal/component-api/v7/breadcrumb/methods.md'; -import Parts from '@ionic-internal/component-api/v7/breadcrumb/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/breadcrumb/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/breadcrumb/slots.md'; +import Props from '@ionic-internal/component-api/v8/breadcrumb/props.md'; +import Events from '@ionic-internal/component-api/v8/breadcrumb/events.md'; +import Methods from '@ionic-internal/component-api/v8/breadcrumb/methods.md'; +import Parts from '@ionic-internal/component-api/v8/breadcrumb/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/breadcrumb/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/breadcrumb/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md index cff44c2f872..281361456f3 100644 --- a/docs/api/breadcrumbs.md +++ b/docs/api/breadcrumbs.md @@ -1,12 +1,12 @@ --- title: "ion-breadcrumbs" --- -import Props from '@ionic-internal/component-api/v7/breadcrumbs/props.md'; -import Events from '@ionic-internal/component-api/v7/breadcrumbs/events.md'; -import Methods from '@ionic-internal/component-api/v7/breadcrumbs/methods.md'; -import Parts from '@ionic-internal/component-api/v7/breadcrumbs/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/breadcrumbs/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/breadcrumbs/slots.md'; +import Props from '@ionic-internal/component-api/v8/breadcrumbs/props.md'; +import Events from '@ionic-internal/component-api/v8/breadcrumbs/events.md'; +import Methods from '@ionic-internal/component-api/v8/breadcrumbs/methods.md'; +import Parts from '@ionic-internal/component-api/v8/breadcrumbs/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/breadcrumbs/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/breadcrumbs/slots.md'; @@ -18,7 +18,7 @@ Breadcrumbs are navigation items that are used to indicate where a user is on an ## Basic Usage -import Basic from '@site/static/usage/v7/breadcrumbs/basic/index.md'; +import Basic from '@site/static/usage/v8/breadcrumbs/basic/index.md'; @@ -26,13 +26,13 @@ import Basic from '@site/static/usage/v7/breadcrumbs/basic/index.md'; ### Icons on Items -import IconsOnItems from '@site/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md'; +import IconsOnItems from '@site/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md'; ### Custom Separators -import CustomSeparators from '@site/static/usage/v7/breadcrumbs/icons/custom-separators/index.md'; +import CustomSeparators from '@site/static/usage/v8/breadcrumbs/icons/custom-separators/index.md'; @@ -42,7 +42,7 @@ import CustomSeparators from '@site/static/usage/v7/breadcrumbs/icons/custom-sep If there are more items than the value of `maxItems`, the breadcrumbs will be collapsed. By default, only the first and last items will be shown. -import MaxItems from '@site/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md'; +import MaxItems from '@site/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md'; @@ -50,7 +50,7 @@ import MaxItems from '@site/static/usage/v7/breadcrumbs/collapsing-items/max-ite Once the items are collapsed, the number of items to show can be controlled by the `itemsBeforeCollapse` and `itemsAfterCollapse` properties. -import ItemsBeforeAfter from '@site/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md'; +import ItemsBeforeAfter from '@site/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md'; @@ -58,7 +58,7 @@ import ItemsBeforeAfter from '@site/static/usage/v7/breadcrumbs/collapsing-items Clicking the collapsed indicator will fire the `ionCollapsedClick` event. This can be used to, for example, expand the breadcrumbs. -import ExpandOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md'; +import ExpandOnClick from '@site/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/index.md'; @@ -66,7 +66,7 @@ import ExpandOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/ex The `ionCollapsedClick` event can also be used to present an overlay (in this case, an `ion-popover`) showing the hidden breadcrumbs. -import PopoverOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md'; +import PopoverOnClick from '@site/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/index.md'; @@ -74,13 +74,13 @@ import PopoverOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/p ### Colors -import Colors from '@site/static/usage/v7/breadcrumbs/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/breadcrumbs/theming/colors/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/breadcrumbs/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/breadcrumbs/theming/css-properties/index.md'; diff --git a/docs/api/button.md b/docs/api/button.md index e84a7410d7d..70568ff38aa 100644 --- a/docs/api/button.md +++ b/docs/api/button.md @@ -1,12 +1,12 @@ --- title: "ion-button" --- -import Props from '@ionic-internal/component-api/v7/button/props.md'; -import Events from '@ionic-internal/component-api/v7/button/events.md'; -import Methods from '@ionic-internal/component-api/v7/button/methods.md'; -import Parts from '@ionic-internal/component-api/v7/button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/button/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/button/slots.md'; +import Props from '@ionic-internal/component-api/v8/button/props.md'; +import Events from '@ionic-internal/component-api/v8/button/events.md'; +import Methods from '@ionic-internal/component-api/v8/button/methods.md'; +import Parts from '@ionic-internal/component-api/v8/button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/button/slots.md'; ion-button: Style Buttons with Custom CSS Properties @@ -21,7 +21,7 @@ Buttons provide a clickable element, which can be used in forms, or anywhere tha ## Basic Usage -import Basic from '@site/static/usage/v7/button/basic/index.md'; +import Basic from '@site/static/usage/v8/button/basic/index.md'; @@ -29,7 +29,7 @@ import Basic from '@site/static/usage/v7/button/basic/index.md'; This property lets you specify how wide the button should be. By default, buttons have `display: inline-block`, but setting this property will change the button to a full-width element with `display: block`. -import Expand from '@site/static/usage/v7/button/expand/index.md'; +import Expand from '@site/static/usage/v8/button/expand/index.md'; @@ -37,7 +37,7 @@ import Expand from '@site/static/usage/v7/button/expand/index.md'; This property lets you specify the shape of the button. By default, buttons are rectangular with a small border radius, but setting this to `"round"` will change the button to a rounded element. -import Shape from '@site/static/usage/v7/button/shape/index.md'; +import Shape from '@site/static/usage/v8/button/shape/index.md'; @@ -46,7 +46,7 @@ import Shape from '@site/static/usage/v7/button/shape/index.md'; This property determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background. -import Fill from '@site/static/usage/v7/button/fill/index.md'; +import Fill from '@site/static/usage/v8/button/fill/index.md'; @@ -54,13 +54,13 @@ import Fill from '@site/static/usage/v7/button/fill/index.md'; This property specifies the size of the button. Setting this property will change the height and padding of a button. -import Size from '@site/static/usage/v7/button/size/index.md'; +import Size from '@site/static/usage/v8/button/size/index.md'; ## Icons -import Icons from '@site/static/usage/v7/button/icons/index.md'; +import Icons from '@site/static/usage/v8/button/icons/index.md'; @@ -68,13 +68,13 @@ import Icons from '@site/static/usage/v7/button/icons/index.md'; ### Colors -import Colors from '@site/static/usage/v7/button/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/button/theming/colors/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/button/theming/css-properties/index.md'; @@ -92,7 +92,7 @@ The button text does not automatically wrap to the next line when the text is to The `max-width` style is set on the button below for demo purposes only. Text wrapping will work with a dynamic button width. ::: -import TextWrapping from '@site/static/usage/v7/button/text-wrapping/index.md'; +import TextWrapping from '@site/static/usage/v8/button/text-wrapping/index.md'; diff --git a/docs/api/buttons.md b/docs/api/buttons.md index cc8f5cf401c..642354eefc8 100644 --- a/docs/api/buttons.md +++ b/docs/api/buttons.md @@ -1,12 +1,12 @@ --- title: "ion-buttons" --- -import Props from '@ionic-internal/component-api/v7/buttons/props.md'; -import Events from '@ionic-internal/component-api/v7/buttons/events.md'; -import Methods from '@ionic-internal/component-api/v7/buttons/methods.md'; -import Parts from '@ionic-internal/component-api/v7/buttons/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/buttons/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/buttons/slots.md'; +import Props from '@ionic-internal/component-api/v8/buttons/props.md'; +import Events from '@ionic-internal/component-api/v8/buttons/events.md'; +import Methods from '@ionic-internal/component-api/v8/buttons/methods.md'; +import Parts from '@ionic-internal/component-api/v8/buttons/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/buttons/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/buttons/slots.md'; ion-buttons: Toolbar Element with Named Slots for Buttons @@ -22,7 +22,7 @@ The Buttons component is a container element. It should be used inside of a [too ## Basic Usage -import Basic from '@site/static/usage/v7/buttons/basic/index.md'; +import Basic from '@site/static/usage/v8/buttons/basic/index.md'; @@ -38,7 +38,7 @@ Buttons can be positioned inside of the toolbar using a named slot. The below ch | `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. | | `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. | -import Placement from '@site/static/usage/v7/buttons/placement/index.md'; +import Placement from '@site/static/usage/v8/buttons/placement/index.md'; @@ -47,7 +47,7 @@ import Placement from '@site/static/usage/v7/buttons/placement/index.md'; A button in a toolbar is styled to be clear by default, but this can be changed using the [`fill`](./button#fill) property on the button. The properties included on [back button](./back-button) and [menu button](./menu-button) in this example are for display purposes; see their respective documentation for proper usage. -import Types from '@site/static/usage/v7/buttons/types/index.md'; +import Types from '@site/static/usage/v8/buttons/types/index.md'; @@ -63,7 +63,7 @@ This feature is only available for iOS. ::: -import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md'; +import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.md'; diff --git a/docs/api/card-content.md b/docs/api/card-content.md index ad6e5e51be8..62b37097f40 100644 --- a/docs/api/card-content.md +++ b/docs/api/card-content.md @@ -1,12 +1,12 @@ --- title: "ion-card-content" --- -import Props from '@ionic-internal/component-api/v7/card-content/props.md'; -import Events from '@ionic-internal/component-api/v7/card-content/events.md'; -import Methods from '@ionic-internal/component-api/v7/card-content/methods.md'; -import Parts from '@ionic-internal/component-api/v7/card-content/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/card-content/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/card-content/slots.md'; +import Props from '@ionic-internal/component-api/v8/card-content/props.md'; +import Events from '@ionic-internal/component-api/v8/card-content/events.md'; +import Methods from '@ionic-internal/component-api/v8/card-content/methods.md'; +import Parts from '@ionic-internal/component-api/v8/card-content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/card-content/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/card-content/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; diff --git a/docs/api/card-header.md b/docs/api/card-header.md index c247d37e667..74ca2c5da7f 100644 --- a/docs/api/card-header.md +++ b/docs/api/card-header.md @@ -1,12 +1,12 @@ --- title: "ion-card-header" --- -import Props from '@ionic-internal/component-api/v7/card-header/props.md'; -import Events from '@ionic-internal/component-api/v7/card-header/events.md'; -import Methods from '@ionic-internal/component-api/v7/card-header/methods.md'; -import Parts from '@ionic-internal/component-api/v7/card-header/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/card-header/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/card-header/slots.md'; +import Props from '@ionic-internal/component-api/v8/card-header/props.md'; +import Events from '@ionic-internal/component-api/v8/card-header/events.md'; +import Methods from '@ionic-internal/component-api/v8/card-header/methods.md'; +import Parts from '@ionic-internal/component-api/v8/card-header/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/card-header/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/card-header/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md index 692caa70759..f3e4b18cee7 100644 --- a/docs/api/card-subtitle.md +++ b/docs/api/card-subtitle.md @@ -1,12 +1,12 @@ --- title: "ion-card-subtitle" --- -import Props from '@ionic-internal/component-api/v7/card-subtitle/props.md'; -import Events from '@ionic-internal/component-api/v7/card-subtitle/events.md'; -import Methods from '@ionic-internal/component-api/v7/card-subtitle/methods.md'; -import Parts from '@ionic-internal/component-api/v7/card-subtitle/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/card-subtitle/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/card-subtitle/slots.md'; +import Props from '@ionic-internal/component-api/v8/card-subtitle/props.md'; +import Events from '@ionic-internal/component-api/v8/card-subtitle/events.md'; +import Methods from '@ionic-internal/component-api/v8/card-subtitle/methods.md'; +import Parts from '@ionic-internal/component-api/v8/card-subtitle/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/card-subtitle/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/card-subtitle/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; diff --git a/docs/api/card-title.md b/docs/api/card-title.md index 657552f95bf..b9c85a2a00c 100644 --- a/docs/api/card-title.md +++ b/docs/api/card-title.md @@ -1,12 +1,12 @@ --- title: "ion-card-title" --- -import Props from '@ionic-internal/component-api/v7/card-title/props.md'; -import Events from '@ionic-internal/component-api/v7/card-title/events.md'; -import Methods from '@ionic-internal/component-api/v7/card-title/methods.md'; -import Parts from '@ionic-internal/component-api/v7/card-title/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/card-title/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/card-title/slots.md'; +import Props from '@ionic-internal/component-api/v8/card-title/props.md'; +import Events from '@ionic-internal/component-api/v8/card-title/events.md'; +import Methods from '@ionic-internal/component-api/v8/card-title/methods.md'; +import Parts from '@ionic-internal/component-api/v8/card-title/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/card-title/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/card-title/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; diff --git a/docs/api/card.md b/docs/api/card.md index 183166599b2..699bda8c4eb 100644 --- a/docs/api/card.md +++ b/docs/api/card.md @@ -1,12 +1,12 @@ --- title: "ion-card" --- -import Props from '@ionic-internal/component-api/v7/card/props.md'; -import Events from '@ionic-internal/component-api/v7/card/events.md'; -import Methods from '@ionic-internal/component-api/v7/card/methods.md'; -import Parts from '@ionic-internal/component-api/v7/card/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/card/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/card/slots.md'; +import Props from '@ionic-internal/component-api/v8/card/props.md'; +import Events from '@ionic-internal/component-api/v8/card/events.md'; +import Methods from '@ionic-internal/component-api/v8/card/methods.md'; +import Parts from '@ionic-internal/component-api/v8/card/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/card/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/card/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -27,28 +27,28 @@ and [card content](./card-content). ## Basic Usage -import Basic from '@site/static/usage/v7/card/basic/index.md'; +import Basic from '@site/static/usage/v8/card/basic/index.md'; ## Media Cards -import Media from '@site/static/usage/v7/card/media/index.md'; +import Media from '@site/static/usage/v8/card/media/index.md'; ## Card Buttons -import Buttons from '@site/static/usage/v7/card/buttons/index.md'; +import Buttons from '@site/static/usage/v8/card/buttons/index.md'; ## List Card -import List from '@site/static/usage/v7/card/list/index.md'; +import List from '@site/static/usage/v8/card/list/index.md'; @@ -57,13 +57,13 @@ import List from '@site/static/usage/v7/card/list/index.md'; ### Colors -import Colors from '@site/static/usage/v7/card/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/card/theming/colors/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/card/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/card/theming/css-properties/index.md'; diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md index c43a878a0ce..bcb053e5495 100644 --- a/docs/api/checkbox.md +++ b/docs/api/checkbox.md @@ -2,12 +2,12 @@ title: "ion-checkbox" --- -import Props from '@ionic-internal/component-api/v7/checkbox/props.md'; -import Events from '@ionic-internal/component-api/v7/checkbox/events.md'; -import Methods from '@ionic-internal/component-api/v7/checkbox/methods.md'; -import Parts from '@ionic-internal/component-api/v7/checkbox/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/checkbox/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/checkbox/slots.md'; +import Props from '@ionic-internal/component-api/v8/checkbox/props.md'; +import Events from '@ionic-internal/component-api/v8/checkbox/events.md'; +import Methods from '@ionic-internal/component-api/v8/checkbox/methods.md'; +import Parts from '@ionic-internal/component-api/v8/checkbox/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/checkbox/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/checkbox/slots.md'; ion-checkbox: Ionic App Checkbox to Select Multiple Options @@ -23,7 +23,7 @@ Checkboxes allow the selection of multiple options from a set of options. They a ## Basic Usage -import Basic from '@site/static/usage/v7/checkbox/basic/index.md'; +import Basic from '@site/static/usage/v8/checkbox/basic/index.md'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v7/checkbox/basic/index.md'; Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property. -import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v8/checkbox/label-placement/index.md'; @@ -43,7 +43,7 @@ Developers can use the `alignment` property to control how the label and control 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'; +import Alignment from '@site/static/usage/v8/checkbox/alignment/index.md'; @@ -51,7 +51,7 @@ import Alignment from '@site/static/usage/v7/checkbox/alignment/index.md'; Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property. -import Justify from '@site/static/usage/v7/checkbox/justify/index.md'; +import Justify from '@site/static/usage/v8/checkbox/justify/index.md'; @@ -62,7 +62,7 @@ import Justify from '@site/static/usage/v7/checkbox/justify/index.md'; ## Indeterminate Checkboxes -import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md'; +import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md'; @@ -70,7 +70,7 @@ import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/checkbox/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/checkbox/theming/css-properties/index.md'; @@ -106,7 +106,7 @@ Developers can perform this migration one checkbox at a time. While developers c Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-checkbox`. The placement of the label can be configured using the `labelPlacement` property on `ion-checkbox`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-checkbox`. -import Migration from '@site/static/usage/v7/checkbox/migration/index.md'; +import Migration from '@site/static/usage/v8/checkbox/migration/index.md'; diff --git a/docs/api/chip.md b/docs/api/chip.md index e99f976e051..3eaf6bd7ab2 100644 --- a/docs/api/chip.md +++ b/docs/api/chip.md @@ -1,12 +1,12 @@ --- title: "ion-chip" --- -import Props from '@ionic-internal/component-api/v7/chip/props.md'; -import Events from '@ionic-internal/component-api/v7/chip/events.md'; -import Methods from '@ionic-internal/component-api/v7/chip/methods.md'; -import Parts from '@ionic-internal/component-api/v7/chip/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/chip/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/chip/slots.md'; +import Props from '@ionic-internal/component-api/v8/chip/props.md'; +import Events from '@ionic-internal/component-api/v8/chip/events.md'; +import Methods from '@ionic-internal/component-api/v8/chip/methods.md'; +import Parts from '@ionic-internal/component-api/v8/chip/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/chip/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/chip/slots.md'; ion-chip: Text, Icon and Avatar for Ionic Framework Apps @@ -21,13 +21,13 @@ Chips represent complex entities in small blocks, such as a contact. A chip can ## Basic Usage -import Basic from '@site/static/usage/v7/chip/basic/index.md'; +import Basic from '@site/static/usage/v8/chip/basic/index.md'; ## Slotting Components and Icons -import SlotExample from '@site/static/usage/v7/chip/slots/index.md'; +import SlotExample from '@site/static/usage/v8/chip/slots/index.md'; @@ -35,13 +35,13 @@ import SlotExample from '@site/static/usage/v7/chip/slots/index.md'; ### Colors -import Colors from '@site/static/usage/v7/chip/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/chip/theming/colors/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/chip/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/chip/theming/css-properties/index.md'; diff --git a/docs/api/col.md b/docs/api/col.md index 0b72b2e9c69..ebc54b7f02f 100644 --- a/docs/api/col.md +++ b/docs/api/col.md @@ -1,12 +1,12 @@ --- title: "ion-col" --- -import Props from '@ionic-internal/component-api/v7/col/props.md'; -import Events from '@ionic-internal/component-api/v7/col/events.md'; -import Methods from '@ionic-internal/component-api/v7/col/methods.md'; -import Parts from '@ionic-internal/component-api/v7/col/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/col/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/col/slots.md'; +import Props from '@ionic-internal/component-api/v8/col/props.md'; +import Events from '@ionic-internal/component-api/v8/col/events.md'; +import Methods from '@ionic-internal/component-api/v8/col/methods.md'; +import Parts from '@ionic-internal/component-api/v8/col/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/col/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/col/slots.md'; ion-col: Column Component Padding and Other Properties diff --git a/docs/api/content.md b/docs/api/content.md index d974b05dd44..832e22cd9d1 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -1,12 +1,12 @@ --- title: "ion-content" --- -import Props from '@ionic-internal/component-api/v7/content/props.md'; -import Events from '@ionic-internal/component-api/v7/content/events.md'; -import Methods from '@ionic-internal/component-api/v7/content/methods.md'; -import Parts from '@ionic-internal/component-api/v7/content/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/content/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/content/slots.md'; +import Props from '@ionic-internal/component-api/v8/content/props.md'; +import Events from '@ionic-internal/component-api/v8/content/events.md'; +import Methods from '@ionic-internal/component-api/v8/content/methods.md'; +import Parts from '@ionic-internal/component-api/v8/content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/content/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/content/slots.md'; ion-content: Scrollable Component for Ionic App Content @@ -27,7 +27,7 @@ Content, along with many other Ionic components, can be customized to modify its ## Basic Usage -import Basic from '@site/static/usage/v7/content/basic/index.md'; +import Basic from '@site/static/usage/v8/content/basic/index.md'; @@ -36,7 +36,7 @@ import Basic from '@site/static/usage/v7/content/basic/index.md'; Content can be the only top-level component in a page, or it can be used alongside a [header](./header), [footer](./footer), or both. When used with a header or footer, it will adjust its size to fill the remaining height. -import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.md'; +import HeaderFooter from '@site/static/usage/v8/content/header-footer/index.md'; @@ -45,7 +45,7 @@ import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.md'; By default, content fills the space between a [header](./header) and [footer](./footer) but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the `translucent` property is set on either of them, or `opacity` is set on the toolbar. This can be achieved by setting the `fullscreen` property on the content to `true`. -import Fullscreen from '@site/static/usage/v7/content/fullscreen/index.md'; +import Fullscreen from '@site/static/usage/v8/content/fullscreen/index.md'; @@ -54,7 +54,7 @@ import Fullscreen from '@site/static/usage/v7/content/fullscreen/index.md'; To place elements outside of the scrollable area, assign them to the `fixed` slot. Doing so will [absolutely position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning) the element to the top left of the content. In order to change the position of the element, it can be styled using the [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) CSS properties. -import Fixed from '@site/static/usage/v7/content/fixed/index.md'; +import Fixed from '@site/static/usage/v8/content/fixed/index.md'; @@ -62,7 +62,7 @@ import Fixed from '@site/static/usage/v7/content/fixed/index.md'; Content provides [methods](#methods) that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a `duration` in order to smoothly transition instead of instantly changing the position. -import ScrollMethods from '@site/static/usage/v7/content/scroll-methods/index.md'; +import ScrollMethods from '@site/static/usage/v8/content/scroll-methods/index.md'; @@ -70,7 +70,7 @@ import ScrollMethods from '@site/static/usage/v7/content/scroll-methods/index.md Scroll events are disabled by default for content due to performance. However, they can be enabled by setting `scrollEvents` to `true`. This is necessary before listening to any of the scroll [events](#events). -import ScrollEvents from '@site/static/usage/v7/content/scroll-events/index.md'; +import ScrollEvents from '@site/static/usage/v8/content/scroll-events/index.md'; @@ -79,19 +79,19 @@ import ScrollEvents from '@site/static/usage/v7/content/scroll-events/index.md'; ### Colors -import Colors from '@site/static/usage/v7/content/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/content/theming/colors/index.md'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v7/content/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v8/content/theming/css-shadow-parts/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/content/theming/css-properties/index.md'; @@ -115,7 +115,7 @@ ion-content::part(scroll) { } ``` -import SafeArea from '@site/static/usage/v7/content/theming/safe-area/index.md'; +import SafeArea from '@site/static/usage/v8/content/theming/safe-area/index.md'; diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md index 62d4a91c7e0..ae6f2fd7b28 100644 --- a/docs/api/datetime-button.md +++ b/docs/api/datetime-button.md @@ -1,12 +1,12 @@ --- title: "ion-datetime-button" --- -import Props from '@ionic-internal/component-api/v7/datetime-button/props.md'; -import Events from '@ionic-internal/component-api/v7/datetime-button/events.md'; -import Methods from '@ionic-internal/component-api/v7/datetime-button/methods.md'; -import Parts from '@ionic-internal/component-api/v7/datetime-button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/datetime-button/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/datetime-button/slots.md'; +import Props from '@ionic-internal/component-api/v8/datetime-button/props.md'; +import Events from '@ionic-internal/component-api/v8/datetime-button/events.md'; +import Methods from '@ionic-internal/component-api/v8/datetime-button/methods.md'; +import Parts from '@ionic-internal/component-api/v8/datetime-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/datetime-button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/datetime-button/slots.md'; ion-datetime-button: Ionic Input for Datetime Picker @@ -27,7 +27,7 @@ When using Datetime Button with a JavaScript framework such as Angular, React, o ## Basic Usage -import Basic from '@site/static/usage/v7/datetime-button/basic/index.md'; +import Basic from '@site/static/usage/v8/datetime-button/basic/index.md'; diff --git a/docs/api/datetime.md b/docs/api/datetime.md index cf9ed3071f7..74d015e1813 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -1,44 +1,44 @@ --- title: "ion-datetime" --- -import Props from '@ionic-internal/component-api/v7/datetime/props.md'; -import Events from '@ionic-internal/component-api/v7/datetime/events.md'; -import Methods from '@ionic-internal/component-api/v7/datetime/methods.md'; -import Parts from '@ionic-internal/component-api/v7/datetime/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/datetime/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/datetime/slots.md'; +import Props from '@ionic-internal/component-api/v8/datetime/props.md'; +import Events from '@ionic-internal/component-api/v8/datetime/events.md'; +import Methods from '@ionic-internal/component-api/v8/datetime/methods.md'; +import Parts from '@ionic-internal/component-api/v8/datetime/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/datetime/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/datetime/slots.md'; -import Basic from '@site/static/usage/v7/datetime/basic/index.md'; +import Basic from '@site/static/usage/v8/datetime/basic/index.md'; -import MaxMin from '@site/static/usage/v7/datetime/date-constraints/max-min/index.md'; -import Values from '@site/static/usage/v7/datetime/date-constraints/values/index.md'; -import Advanced from '@site/static/usage/v7/datetime/date-constraints/advanced/index.md'; +import MaxMin from '@site/static/usage/v8/datetime/date-constraints/max-min/index.md'; +import Values from '@site/static/usage/v8/datetime/date-constraints/values/index.md'; +import Advanced from '@site/static/usage/v8/datetime/date-constraints/advanced/index.md'; -import CustomLocale from '@site/static/usage/v7/datetime/localization/custom-locale/index.md'; -import HourCycle from '@site/static/usage/v7/datetime/localization/hour-cycle/index.md'; -import FirstDayOfWeek from '@site/static/usage/v7/datetime/localization/first-day-of-week/index.md'; -import LocaleExtensionTags from '@site/static/usage/v7/datetime/localization/locale-extension-tags/index.md'; -import TimeLabel from '@site/static/usage/v7/datetime/localization/time-label/index.md'; +import CustomLocale from '@site/static/usage/v8/datetime/localization/custom-locale/index.md'; +import HourCycle from '@site/static/usage/v8/datetime/localization/hour-cycle/index.md'; +import FirstDayOfWeek from '@site/static/usage/v8/datetime/localization/first-day-of-week/index.md'; +import LocaleExtensionTags from '@site/static/usage/v8/datetime/localization/locale-extension-tags/index.md'; +import TimeLabel from '@site/static/usage/v8/datetime/localization/time-label/index.md'; -import MonthAndYear from '@site/static/usage/v7/datetime/presentation/month-and-year/index.md'; -import Time from '@site/static/usage/v7/datetime/presentation/time/index.md'; -import Date from '@site/static/usage/v7/datetime/presentation/date/index.md'; +import MonthAndYear from '@site/static/usage/v8/datetime/presentation/month-and-year/index.md'; +import Time from '@site/static/usage/v8/datetime/presentation/time/index.md'; +import Date from '@site/static/usage/v8/datetime/presentation/date/index.md'; -import ShowingDefaultTitle from '@site/static/usage/v7/datetime/title/showing-default-title/index.md'; -import CustomizingTitle from '@site/static/usage/v7/datetime/title/customizing-title/index.md'; +import ShowingDefaultTitle from '@site/static/usage/v8/datetime/title/showing-default-title/index.md'; +import CustomizingTitle from '@site/static/usage/v8/datetime/title/customizing-title/index.md'; -import ShowingConfirmationButtons from '@site/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md'; -import CustomizingButtons from '@site/static/usage/v7/datetime/buttons/customizing-buttons/index.md'; -import CustomizingButtonTexts from '@site/static/usage/v7/datetime/buttons/customizing-button-texts/index.md'; +import ShowingConfirmationButtons from '@site/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md'; +import CustomizingButtons from '@site/static/usage/v8/datetime/buttons/customizing-buttons/index.md'; +import CustomizingButtonTexts from '@site/static/usage/v8/datetime/buttons/customizing-button-texts/index.md'; -import HighlightedDatesArray from '@site/static/usage/v7/datetime/highlightedDates/array/index.md'; -import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlightedDates/callback/index.md'; +import HighlightedDatesArray from '@site/static/usage/v8/datetime/highlightedDates/array/index.md'; +import HighlightedDatesCallback from '@site/static/usage/v8/datetime/highlightedDates/callback/index.md'; -import MultipleDateSelection from '@site/static/usage/v7/datetime/multiple/index.md'; +import MultipleDateSelection from '@site/static/usage/v8/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'; +import GlobalTheming from '@site/static/usage/v8/datetime/styling/global-theming/index.md'; +import CalendarDaysStyling from '@site/static/usage/v8/datetime/styling/calendar-days/index.md'; +import WheelStyling from '@site/static/usage/v8/datetime/styling/wheel-styling/index.md'; ion-datetime: Ionic API Input for Datetime Format Picker @@ -242,7 +242,7 @@ Certain `presentation` options have both grid and wheel styles that developers c The example below shows the wheel picker with `presentation="date-time"`. -import Wheel from '@site/static/usage/v7/datetime/presentation/wheel/index.md'; +import Wheel from '@site/static/usage/v8/datetime/presentation/wheel/index.md'; diff --git a/docs/api/fab-button.md b/docs/api/fab-button.md index 2901c8dc093..f9556d64b8a 100644 --- a/docs/api/fab-button.md +++ b/docs/api/fab-button.md @@ -1,12 +1,12 @@ --- title: "ion-fab-button" --- -import Props from '@ionic-internal/component-api/v7/fab-button/props.md'; -import Events from '@ionic-internal/component-api/v7/fab-button/events.md'; -import Methods from '@ionic-internal/component-api/v7/fab-button/methods.md'; -import Parts from '@ionic-internal/component-api/v7/fab-button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/fab-button/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/fab-button/slots.md'; +import Props from '@ionic-internal/component-api/v8/fab-button/props.md'; +import Events from '@ionic-internal/component-api/v8/fab-button/events.md'; +import Methods from '@ionic-internal/component-api/v8/fab-button/methods.md'; +import Parts from '@ionic-internal/component-api/v8/fab-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/fab-button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/fab-button/slots.md'; ion-fab-button: Ionic FAB Button Icon for Primary Action diff --git a/docs/api/fab-list.md b/docs/api/fab-list.md index e97540df9d3..463fb137166 100644 --- a/docs/api/fab-list.md +++ b/docs/api/fab-list.md @@ -1,12 +1,12 @@ --- title: "ion-fab-list" --- -import Props from '@ionic-internal/component-api/v7/fab-list/props.md'; -import Events from '@ionic-internal/component-api/v7/fab-list/events.md'; -import Methods from '@ionic-internal/component-api/v7/fab-list/methods.md'; -import Parts from '@ionic-internal/component-api/v7/fab-list/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/fab-list/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/fab-list/slots.md'; +import Props from '@ionic-internal/component-api/v8/fab-list/props.md'; +import Events from '@ionic-internal/component-api/v8/fab-list/events.md'; +import Methods from '@ionic-internal/component-api/v8/fab-list/methods.md'; +import Parts from '@ionic-internal/component-api/v8/fab-list/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/fab-list/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/fab-list/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; diff --git a/docs/api/fab.md b/docs/api/fab.md index 13be8564843..3e665ad8159 100644 --- a/docs/api/fab.md +++ b/docs/api/fab.md @@ -1,12 +1,12 @@ --- title: "ion-fab" --- -import Props from '@ionic-internal/component-api/v7/fab/props.md'; -import Events from '@ionic-internal/component-api/v7/fab/events.md'; -import Methods from '@ionic-internal/component-api/v7/fab/methods.md'; -import Parts from '@ionic-internal/component-api/v7/fab/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/fab/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/fab/slots.md'; +import Props from '@ionic-internal/component-api/v8/fab/props.md'; +import Events from '@ionic-internal/component-api/v8/fab/events.md'; +import Methods from '@ionic-internal/component-api/v8/fab/methods.md'; +import Parts from '@ionic-internal/component-api/v8/fab/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/fab/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/fab/slots.md'; ion-fab: Ionic Floating Action Button for Android and iOS @@ -21,7 +21,7 @@ Fabs are container elements that contain one or more [fab buttons](./fab-button) ## Basic Usage -import BasicUsage from '@site/static/usage/v7/fab/basic/index.md'; +import BasicUsage from '@site/static/usage/v8/fab/basic/index.md'; @@ -29,7 +29,7 @@ import BasicUsage from '@site/static/usage/v7/fab/basic/index.md'; The `side` property of the [fab list](./fab-list) component controls where it appears relative to the main fab button. A single fab can have multiple fab lists as long as they all have different values for `side`. -import ListSide from '@site/static/usage/v7/fab/list-side/index.md'; +import ListSide from '@site/static/usage/v8/fab/list-side/index.md'; @@ -37,7 +37,7 @@ import ListSide from '@site/static/usage/v7/fab/list-side/index.md'; In order to place the fab in a fixed position, it should be assigned to the `fixed` slot of the outer [content](./content) component. Use the `vertical` and `horizontal` props to control the alignment of the fab in the viewport. The `edge` prop will cause the fab button to overlap with the app's header or footer. -import Positioning from '@site/static/usage/v7/fab/positioning/index.md'; +import Positioning from '@site/static/usage/v8/fab/positioning/index.md'; @@ -63,7 +63,7 @@ ion-fab { If there is an `ion-header` (for a fab with `vertical` set to `"top"`) or `ion-footer` (for a fab with `vertical` set to `"bottom"`), no CSS adjustment is needed because the fab gets positioned relative to the header or footer. -import SafeArea from '@site/static/usage/v7/fab/safe-area/index.md'; +import SafeArea from '@site/static/usage/v8/fab/safe-area/index.md'; @@ -71,7 +71,7 @@ import SafeArea from '@site/static/usage/v7/fab/safe-area/index.md'; Setting the `size` property of the main fab button to `"small"` will render it at a mini size. Note that this property will not have an effect when used with the inner fab buttons. -import ButtonSizing from '@site/static/usage/v7/fab/button-sizing/index.md'; +import ButtonSizing from '@site/static/usage/v8/fab/button-sizing/index.md'; @@ -79,19 +79,19 @@ import ButtonSizing from '@site/static/usage/v7/fab/button-sizing/index.md'; ### Colors -import Colors from '@site/static/usage/v7/fab/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/fab/theming/colors/index.md'; ### CSS Custom Properties -import CSSCustomProperties from '@site/static/usage/v7/fab/theming/css-custom-properties/index.md'; +import CSSCustomProperties from '@site/static/usage/v8/fab/theming/css-custom-properties/index.md'; ### CSS Shadow Parts -import CSSShadowParts from '@site/static/usage/v7/fab/theming/css-shadow-parts/index.md'; +import CSSShadowParts from '@site/static/usage/v8/fab/theming/css-shadow-parts/index.md'; diff --git a/docs/api/footer.md b/docs/api/footer.md index 315ff16f4f7..54067048ee2 100644 --- a/docs/api/footer.md +++ b/docs/api/footer.md @@ -1,12 +1,12 @@ --- title: "ion-footer" --- -import Props from '@ionic-internal/component-api/v7/footer/props.md'; -import Events from '@ionic-internal/component-api/v7/footer/events.md'; -import Methods from '@ionic-internal/component-api/v7/footer/methods.md'; -import Parts from '@ionic-internal/component-api/v7/footer/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/footer/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/footer/slots.md'; +import Props from '@ionic-internal/component-api/v8/footer/props.md'; +import Events from '@ionic-internal/component-api/v8/footer/events.md'; +import Methods from '@ionic-internal/component-api/v8/footer/methods.md'; +import Parts from '@ionic-internal/component-api/v8/footer/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/footer/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/footer/slots.md'; ion-footer: Page Footer | Ionic App Footer Root Component @@ -20,7 +20,7 @@ Footer is a root component of a page that aligns itself to the bottom of the pag ## Basic Usage -import Basic from '@site/static/usage/v7/footer/basic/index.md'; +import Basic from '@site/static/usage/v8/footer/basic/index.md'; @@ -29,7 +29,7 @@ import Basic from '@site/static/usage/v7/footer/basic/index.md'; Footers can match the transparency found in native iOS applications by setting the `translucent` property. In order to see the content scrolling behind the footer, the `fullscreen` property needs to be set on the content. This effect will only apply when the mode is `"ios"` and the device supports [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility). -import Translucent from '@site/static/usage/v7/footer/translucent/index.md'; +import Translucent from '@site/static/usage/v8/footer/translucent/index.md'; @@ -38,7 +38,7 @@ import Translucent from '@site/static/usage/v7/footer/translucent/index.md'; Many native iOS applications have a fade effect on the toolbar. This can be achieved by setting the `collapse` property on the footer to `"fade"`. When the content is scrolled to the end, the background and border on the footer will fade away. This effect will only apply when the mode is `"ios"`. -import Fade from '@site/static/usage/v7/footer/fade/index.md'; +import Fade from '@site/static/usage/v8/footer/fade/index.md'; @@ -47,7 +47,7 @@ import Fade from '@site/static/usage/v7/footer/fade/index.md'; A fade footer requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling. -import CustomScrollTarget from '@site/static/usage/v7/footer/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v8/footer/custom-scroll-target/index.md'; @@ -55,7 +55,7 @@ import CustomScrollTarget from '@site/static/usage/v7/footer/custom-scroll-targe In `"md"` mode, the footer will have a `box-shadow` on the top. In `"ios"` mode, it will receive a `border` on the top. These can be removed by adding the `.ion-no-border` class to the footer. -import NoBorder from '@site/static/usage/v7/footer/no-border/index.md'; +import NoBorder from '@site/static/usage/v8/footer/no-border/index.md'; diff --git a/docs/api/grid.md b/docs/api/grid.md index 8d179241b9d..abe0b2950a1 100644 --- a/docs/api/grid.md +++ b/docs/api/grid.md @@ -1,12 +1,12 @@ --- title: "ion-grid" --- -import Props from '@ionic-internal/component-api/v7/grid/props.md'; -import Events from '@ionic-internal/component-api/v7/grid/events.md'; -import Methods from '@ionic-internal/component-api/v7/grid/methods.md'; -import Parts from '@ionic-internal/component-api/v7/grid/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/grid/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/grid/slots.md'; +import Props from '@ionic-internal/component-api/v8/grid/props.md'; +import Events from '@ionic-internal/component-api/v8/grid/events.md'; +import Methods from '@ionic-internal/component-api/v8/grid/methods.md'; +import Parts from '@ionic-internal/component-api/v8/grid/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/grid/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/grid/slots.md'; ion-grid: Display Grids for Mobile-First Custom App Layout @@ -54,7 +54,7 @@ The default breakpoints for the grid and the corresponding properties are define By default, columns will take up equal width inside of a row for all devices and screen sizes. -import Basic from '@site/static/usage/v7/grid/basic/index.md'; +import Basic from '@site/static/usage/v8/grid/basic/index.md'; @@ -71,7 +71,7 @@ Grids take up 100% width of their container. By adding the `fixed` property to t | lg | 960px | Set grid width to 960px when (min-width: 992px) | | xl | 1140px | Set grid width to 1140px when (min-width: 1200px) | -import Fixed from '@site/static/usage/v7/grid/fixed/index.md'; +import Fixed from '@site/static/usage/v8/grid/fixed/index.md'; @@ -84,7 +84,7 @@ Columns can be set to specific sizes to take up a certain number out of the tota By setting the `size` to `"auto"` the column can size itself based on the natural width of its content. This is necessary when setting a column to an absolute width, such as a specific number of pixels. The columns next to the auto-width column will resize to fill the row. -import SizeAuto from '@site/static/usage/v7/grid/size-auto/index.md'; +import SizeAuto from '@site/static/usage/v8/grid/size-auto/index.md'; @@ -93,7 +93,7 @@ import SizeAuto from '@site/static/usage/v7/grid/size-auto/index.md'; Set the `size` of a column and the others will automatically resize around it. If a size is specified on all of the columns and it doesn't add up to the total number of columns, there will be empty space after the columns. -import Size from '@site/static/usage/v7/grid/size/index.md'; +import Size from '@site/static/usage/v8/grid/size/index.md'; @@ -101,7 +101,7 @@ import Size from '@site/static/usage/v7/grid/size/index.md'; The `size` property will change the column width for all [breakpoints](#default-breakpoints). Column also provides several size properties with the breakpoint name appended to the end of "size". These properties can be used to change the width of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column widths change. -import SizeResponsive from '@site/static/usage/v7/grid/size-responsive/index.md'; +import SizeResponsive from '@site/static/usage/v8/grid/size-responsive/index.md'; @@ -114,7 +114,7 @@ Columns can be offset to shift to the right by a certain number of columns out o Columns can be moved to the right by using the `offset` property. This property increases the left margin of the column by the number of specified columns. It also shifts the columns to the right of it, if any exist. -import Offset from '@site/static/usage/v7/grid/offset/index.md'; +import Offset from '@site/static/usage/v8/grid/offset/index.md'; @@ -122,7 +122,7 @@ import Offset from '@site/static/usage/v7/grid/offset/index.md'; The `offset` property will change the column's left margin for all [breakpoints](#default-breakpoints). Column also provides several offset properties with the breakpoint name appended to the end of "offset". These properties can be used to change the offset of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column offsets change. -import OffsetResponsive from '@site/static/usage/v7/grid/offset-responsive/index.md'; +import OffsetResponsive from '@site/static/usage/v8/grid/offset-responsive/index.md'; @@ -135,7 +135,7 @@ Columns can be pushed to to the right or pulled to the left by a certain number Reorder the columns by adding the `push` and `pull` properties. These properties adjust the `left` and `right` of the columns by the specified number of columns making it easy to reorder columns. This will cause columns to overlap if they are shifted to where another column is positioned. -import PushPull from '@site/static/usage/v7/grid/push-pull/index.md'; +import PushPull from '@site/static/usage/v8/grid/push-pull/index.md'; @@ -143,7 +143,7 @@ import PushPull from '@site/static/usage/v7/grid/push-pull/index.md'; The `push` and `pull` properties will change the column's position for all [breakpoints](#default-breakpoints). Column also provides several `push` and `pull` properties with the breakpoint name appended to the end of "push" / "pull". These properties can be used to change the position of the column based on the screen size. Open the below example in StackBlitz and resize the screen to see the column positions change. -import PushPullResponsive from '@site/static/usage/v7/grid/push-pull-responsive/index.md'; +import PushPullResponsive from '@site/static/usage/v8/grid/push-pull-responsive/index.md'; @@ -153,7 +153,7 @@ import PushPullResponsive from '@site/static/usage/v7/grid/push-pull-responsive/ All columns can be vertically aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities#flex-container-properties). -import VerticalAlignment from '@site/static/usage/v7/grid/vertical-alignment/index.md'; +import VerticalAlignment from '@site/static/usage/v8/grid/vertical-alignment/index.md'; @@ -162,7 +162,7 @@ import VerticalAlignment from '@site/static/usage/v7/grid/vertical-alignment/ind All columns can be horizontally aligned inside of a row by adding different classes to the row. For a list of available classes, see [css utilities](/layout/css-utilities.md#flex-container-properties). -import HorizontalAlignment from '@site/static/usage/v7/grid/horizontal-alignment/index.md'; +import HorizontalAlignment from '@site/static/usage/v8/grid/horizontal-alignment/index.md'; @@ -174,7 +174,7 @@ Using our built-in CSS variables, it’s possible to customize the predefined gr The width of a fixed grid can be set for all breakpoints with the `--ion-grid-width` CSS variable. To override individual breakpoints, use the `--ion-grid-width-{breakpoint}` CSS variables. The default value for each of the breakpoints can be found in the [Fixed Grid](#fixed-grid) section. Open the below example in StackBlitz and resize the screen to see the grid width change. -import Width from '@site/static/usage/v7/grid/customizing/width/index.md'; +import Width from '@site/static/usage/v8/grid/customizing/width/index.md'; @@ -182,7 +182,7 @@ import Width from '@site/static/usage/v7/grid/customizing/width/index.md'; The number of grid columns can be modified with the `--ion-grid-columns` CSS variable. By default there are 12 grid columns, but this can be changed to any positive integer and be used to calculate the width of each individual column. -import ColumnNumber from '@site/static/usage/v7/grid/customizing/column-number/index.md'; +import ColumnNumber from '@site/static/usage/v8/grid/customizing/column-number/index.md'; @@ -192,7 +192,7 @@ The padding on the grid container can be set for all breakpoints with the `--ion The padding on the columns can be set for all breakpoints with the `--ion-grid-column-padding` CSS variable. To override individual breakpoints, use the `--ion-grid-column-padding-{breakpoint}` CSS variables. -import Padding from '@site/static/usage/v7/grid/customizing/padding/index.md'; +import Padding from '@site/static/usage/v8/grid/customizing/padding/index.md'; diff --git a/docs/api/header.md b/docs/api/header.md index 584a5207d05..7ab100e0d2f 100644 --- a/docs/api/header.md +++ b/docs/api/header.md @@ -1,12 +1,12 @@ --- title: "ion-header" --- -import Props from '@ionic-internal/component-api/v7/header/props.md'; -import Events from '@ionic-internal/component-api/v7/header/events.md'; -import Methods from '@ionic-internal/component-api/v7/header/methods.md'; -import Parts from '@ionic-internal/component-api/v7/header/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/header/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/header/slots.md'; +import Props from '@ionic-internal/component-api/v8/header/props.md'; +import Events from '@ionic-internal/component-api/v8/header/events.md'; +import Methods from '@ionic-internal/component-api/v8/header/methods.md'; +import Parts from '@ionic-internal/component-api/v8/header/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/header/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/header/slots.md'; ion-header: Header Parent Component for Ionic Framework Apps @@ -21,7 +21,7 @@ Header is a root component of a page that aligns itself to the top of the page. ## Basic Usage -import Basic from '@site/static/usage/v7/header/basic/index.md'; +import Basic from '@site/static/usage/v8/header/basic/index.md'; @@ -30,7 +30,7 @@ import Basic from '@site/static/usage/v7/header/basic/index.md'; Headers can match the transparency found in native iOS applications by setting the `translucent` property. In order to see the content scrolling behind the header, the `fullscreen` property needs to be set on the content. This effect will only apply when the mode is `"ios"` and the device supports [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility). -import Translucent from '@site/static/usage/v7/header/translucent/index.md'; +import Translucent from '@site/static/usage/v8/header/translucent/index.md'; @@ -39,7 +39,7 @@ import Translucent from '@site/static/usage/v7/header/translucent/index.md'; Ionic provides the functionality found in native iOS applications to show a large toolbar title and then collapse it to a small title when scrolling. This can be done by adding two headers, one above the content and one inside of the content, and then setting the `collapse` property to `"condense"` on the header inside of the content. This effect will only apply when the mode is "ios". -import Condense from '@site/static/usage/v7/header/condense/index.md'; +import Condense from '@site/static/usage/v8/header/condense/index.md'; @@ -50,7 +50,7 @@ Many native iOS applications have a fade effect on the toolbar. This can be achi This functionality can be combined with a [Condensed Header](#condensed-header) as well. The `collapse` property with a value set to `"fade"` should be on the header outside of the content. -import Fade from '@site/static/usage/v7/header/fade/index.md'; +import Fade from '@site/static/usage/v8/header/fade/index.md'; @@ -59,7 +59,7 @@ import Fade from '@site/static/usage/v7/header/fade/index.md'; A fade header requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling. -import CustomScrollTarget from '@site/static/usage/v7/header/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v8/header/custom-scroll-target/index.md'; @@ -68,7 +68,7 @@ import CustomScrollTarget from '@site/static/usage/v7/header/custom-scroll-targe In `"md"` mode, the header will have a `box-shadow` on the bottom. In `"ios"` mode, it will receive a `border` on the bottom. These can be removed by adding the `.ion-no-border` class to the header. -import NoBorder from '@site/static/usage/v7/header/no-border/index.md'; +import NoBorder from '@site/static/usage/v8/header/no-border/index.md'; diff --git a/docs/api/icon.md b/docs/api/icon.md index fa9830ebc46..435175ef119 100644 --- a/docs/api/icon.md +++ b/docs/api/icon.md @@ -16,7 +16,7 @@ For a list of all available icons, see ionic ## Basic Usage -import Basic from '@site/static/usage/v7/icon/basic/index.md'; +import Basic from '@site/static/usage/v8/icon/basic/index.md'; diff --git a/docs/api/img.md b/docs/api/img.md index d444d07434b..c94c50cd449 100644 --- a/docs/api/img.md +++ b/docs/api/img.md @@ -2,12 +2,12 @@ title: "ion-img" --- -import Props from '@ionic-internal/component-api/v7/img/props.md'; -import Events from '@ionic-internal/component-api/v7/img/events.md'; -import Methods from '@ionic-internal/component-api/v7/img/methods.md'; -import Parts from '@ionic-internal/component-api/v7/img/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/img/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/img/slots.md'; +import Props from '@ionic-internal/component-api/v8/img/props.md'; +import Events from '@ionic-internal/component-api/v8/img/events.md'; +import Methods from '@ionic-internal/component-api/v8/img/methods.md'; +import Parts from '@ionic-internal/component-api/v8/img/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/img/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/img/slots.md'; ion-img: Img Tag to Lazy Load Images in Viewport @@ -23,7 +23,7 @@ Img is a tag that will lazily load an image whenever the tag is in the viewport. ## Basic Usage -import Basic from '@site/static/usage/v7/img/basic/index.md'; +import Basic from '@site/static/usage/v8/img/basic/index.md'; diff --git a/docs/api/infinite-scroll-content.md b/docs/api/infinite-scroll-content.md index 39da6e7165f..84fc4a93993 100644 --- a/docs/api/infinite-scroll-content.md +++ b/docs/api/infinite-scroll-content.md @@ -2,12 +2,12 @@ title: "ion-infinite-scroll-content" --- -import Props from '@ionic-internal/component-api/v7/infinite-scroll-content/props.md'; -import Events from '@ionic-internal/component-api/v7/infinite-scroll-content/events.md'; -import Methods from '@ionic-internal/component-api/v7/infinite-scroll-content/methods.md'; -import Parts from '@ionic-internal/component-api/v7/infinite-scroll-content/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll-content/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/infinite-scroll-content/slots.md'; +import Props from '@ionic-internal/component-api/v8/infinite-scroll-content/props.md'; +import Events from '@ionic-internal/component-api/v8/infinite-scroll-content/events.md'; +import Methods from '@ionic-internal/component-api/v8/infinite-scroll-content/methods.md'; +import Parts from '@ionic-internal/component-api/v8/infinite-scroll-content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/infinite-scroll-content/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/infinite-scroll-content/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md index 1f4ab01710a..28245105b2e 100644 --- a/docs/api/infinite-scroll.md +++ b/docs/api/infinite-scroll.md @@ -2,12 +2,12 @@ title: "ion-infinite-scroll" --- -import Props from '@ionic-internal/component-api/v7/infinite-scroll/props.md'; -import Events from '@ionic-internal/component-api/v7/infinite-scroll/events.md'; -import Methods from '@ionic-internal/component-api/v7/infinite-scroll/methods.md'; -import Parts from '@ionic-internal/component-api/v7/infinite-scroll/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/infinite-scroll/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/infinite-scroll/slots.md'; +import Props from '@ionic-internal/component-api/v8/infinite-scroll/props.md'; +import Events from '@ionic-internal/component-api/v8/infinite-scroll/events.md'; +import Methods from '@ionic-internal/component-api/v8/infinite-scroll/methods.md'; +import Parts from '@ionic-internal/component-api/v8/infinite-scroll/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/infinite-scroll/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/infinite-scroll/slots.md'; ion-infinite-scroll: Infinite Scroller Action Component @@ -21,7 +21,7 @@ The Infinite Scroll component calls an action to be performed when the user scro The expression assigned to the `ionInfinite` event is called when the user reaches that defined distance. When this expression has finished any and all tasks, it should call the `complete()` method on the infinite scroll instance. -import Basic from '@site/static/usage/v7/infinite-scroll/basic/index.md'; +import Basic from '@site/static/usage/v8/infinite-scroll/basic/index.md'; @@ -29,7 +29,7 @@ import Basic from '@site/static/usage/v7/infinite-scroll/basic/index.md'; The `ion-infinite-scroll-content` is responsible for the visual display of the infinite scroll interaction. By default this component changes its look depending on the infinite scroll's state. It displays a spinner that looks best based on the platform the user is on. Both the spinner and loading text can be customized by setting properties on the `ion-infinite-scroll-content` component. -import InfiniteScrollContent from '@site/static/usage/v7/infinite-scroll/infinite-scroll-content/index.md'; +import InfiniteScrollContent from '@site/static/usage/v8/infinite-scroll/infinite-scroll-content/index.md'; @@ -37,7 +37,7 @@ import InfiniteScrollContent from '@site/static/usage/v7/infinite-scroll/infinit Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` components allows developers to create their own content components, if desired. This content can contain anything, from an SVG element to elements with unique CSS animations. -import CustomContent from '@site/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/index.md'; +import CustomContent from '@site/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/index.md'; diff --git a/docs/api/input.md b/docs/api/input.md index afbf24ced47..4b940eb1c06 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -1,12 +1,12 @@ --- title: "ion-input" --- -import Props from '@ionic-internal/component-api/v7/input/props.md'; -import Events from '@ionic-internal/component-api/v7/input/events.md'; -import Methods from '@ionic-internal/component-api/v7/input/methods.md'; -import Parts from '@ionic-internal/component-api/v7/input/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/input/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/input/slots.md'; +import Props from '@ionic-internal/component-api/v8/input/props.md'; +import Events from '@ionic-internal/component-api/v8/input/events.md'; +import Methods from '@ionic-internal/component-api/v8/input/methods.md'; +import Parts from '@ionic-internal/component-api/v8/input/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/input/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/input/slots.md'; ion-input: Custom Input With Styling and CSS Properties @@ -23,7 +23,7 @@ The input component is a wrapper to the HTML input element with custom styling a ## Basic Usage -import Basic from '@site/static/usage/v7/input/basic/index.md'; +import Basic from '@site/static/usage/v8/input/basic/index.md'; @@ -32,7 +32,7 @@ import Basic from '@site/static/usage/v7/input/basic/index.md'; The input component is meant for text type inputs only, such as `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, and `"url"`. It supports all standard text input events including `keyup`, `keydown`, `keypress`, and more. The default `type` is `"text"`. -import Types from '@site/static/usage/v7/input/types/index.md'; +import Types from '@site/static/usage/v8/input/types/index.md'; @@ -48,7 +48,7 @@ Labels should be used to describe the input. They can be used visually, and they Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control. -import LabelPlacement from '@site/static/usage/v7/input/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v8/input/label-placement/index.md'; @@ -58,7 +58,7 @@ While plaintext labels should be passed in via the `label` property, if custom H Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior. -import LabelSlot from '@site/static/usage/v7/input/label-slot/index.md'; +import LabelSlot from '@site/static/usage/v8/input/label-slot/index.md'; @@ -66,7 +66,7 @@ import LabelSlot from '@site/static/usage/v7/input/label-slot/index.md'; If no visible label is needed, developers should still supply an `aria-label` so the input is accessible to screen readers. -import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v8/input/no-visible-label/index.md'; @@ -74,7 +74,7 @@ import NoVisibleLabel from '@site/static/usage/v7/input/no-visible-label/index.m Inputs offer two options for clearing the input based on how you interact with it. The first way is by adding the `clearInput` property which will show a clear button when the input has a `value`. The second way is the `clearOnEdit` property which will clear the input after it has been blurred and then typed in again. Inputs with a `type` set to `"password"` will have `clearOnEdit` enabled by default. -import Clear from '@site/static/usage/v7/input/clear/index.md'; +import Clear from '@site/static/usage/v8/input/clear/index.md'; @@ -87,7 +87,7 @@ Since the `fill` styles visually defines the input container, inputs that use `f 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'; +import Fill from '@site/static/usage/v8/input/fill/index.md'; @@ -98,7 +98,7 @@ Helper and error text can be used inside of an input with the `helperText` and ` In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation. -import HelperError from '@site/static/usage/v7/input/helper-error/index.md'; +import HelperError from '@site/static/usage/v8/input/helper-error/index.md'; @@ -108,13 +108,13 @@ The input counter is text that displays under an input to notify the user of how 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'; +import Counter from '@site/static/usage/v8/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'; +import CounterAlignment from '@site/static/usage/v8/input/counter-alignment/index.md'; @@ -124,7 +124,7 @@ Developers can use the `ionInput` event to update the input value in response to When storing the value in a state variable, we recommend updating both the state variable and the `ion-input` component value. This ensures that the state variable and the `ion-input` component value remain in sync. -import FilteringData from '@site/static/usage/v7/input/filtering/index.md'; +import FilteringData from '@site/static/usage/v8/input/filtering/index.md'; @@ -138,7 +138,7 @@ To get started with Maskito, install the library: npm install @maskito/core @maskito/{angular,react,vue} ``` -import Masking from '@site/static/usage/v7/input/mask/index.md'; +import Masking from '@site/static/usage/v8/input/mask/index.md'; @@ -154,7 +154,7 @@ Please submit bug reports with Maskito to the [Maskito Github repository](https: Setting the `color` property changes the color palette for each input. On `ios` mode, this property changes the caret color. On `md` mode, this property changes the caret color and the highlight/underline color. -import Colors from '@site/static/usage/v7/input/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/input/theming/colors/index.md'; @@ -162,7 +162,7 @@ import Colors from '@site/static/usage/v7/input/theming/colors/index.md'; Input uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-input` for customization will not work; therefore we recommend adding a class and customizing it that way. -import CSSProps from '@site/static/usage/v7/input/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/input/theming/css-properties/index.md'; @@ -180,7 +180,7 @@ Using the modern syntax involves three steps: 2. Move input-specific properties from `ion-item` on to `ion-input`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties. 3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-input` instead. -import Migration from '@site/static/usage/v7/input/migration/index.md'; +import Migration from '@site/static/usage/v8/input/migration/index.md'; diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md index 8a5db6c541c..f90f416001c 100644 --- a/docs/api/item-divider.md +++ b/docs/api/item-divider.md @@ -1,12 +1,12 @@ --- title: "ion-item-divider" --- -import Props from '@ionic-internal/component-api/v7/item-divider/props.md'; -import Events from '@ionic-internal/component-api/v7/item-divider/events.md'; -import Methods from '@ionic-internal/component-api/v7/item-divider/methods.md'; -import Parts from '@ionic-internal/component-api/v7/item-divider/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/item-divider/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/item-divider/slots.md'; +import Props from '@ionic-internal/component-api/v8/item-divider/props.md'; +import Events from '@ionic-internal/component-api/v8/item-divider/events.md'; +import Methods from '@ionic-internal/component-api/v8/item-divider/methods.md'; +import Parts from '@ionic-internal/component-api/v8/item-divider/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/item-divider/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/item-divider/slots.md'; ion-item-divider: Item Divider Block Element for Ionic Apps @@ -23,7 +23,7 @@ Item dividers are block elements that can be used to separate [items](./item) in ## Basic Usage -import Basic from '@site/static/usage/v7/item-divider/basic/index.md'; +import Basic from '@site/static/usage/v8/item-divider/basic/index.md'; @@ -32,14 +32,14 @@ import Basic from '@site/static/usage/v7/item-divider/basic/index.md'; ### Colors -import Colors from '@site/static/usage/v7/item-divider/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/item-divider/theming/colors/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/item-divider/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/item-divider/theming/css-properties/index.md'; diff --git a/docs/api/item-group.md b/docs/api/item-group.md index 5d440ed3ce8..7a22197721d 100644 --- a/docs/api/item-group.md +++ b/docs/api/item-group.md @@ -1,12 +1,12 @@ --- title: "ion-item-group" --- -import Props from '@ionic-internal/component-api/v7/item-group/props.md'; -import Events from '@ionic-internal/component-api/v7/item-group/events.md'; -import Methods from '@ionic-internal/component-api/v7/item-group/methods.md'; -import Parts from '@ionic-internal/component-api/v7/item-group/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/item-group/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/item-group/slots.md'; +import Props from '@ionic-internal/component-api/v8/item-group/props.md'; +import Events from '@ionic-internal/component-api/v8/item-group/events.md'; +import Methods from '@ionic-internal/component-api/v8/item-group/methods.md'; +import Parts from '@ionic-internal/component-api/v8/item-group/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/item-group/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/item-group/slots.md'; ion-item-group: Group Items to Divide into Multiple Sections @@ -20,13 +20,13 @@ Item groups are containers that organize similar [items](./item) together. They ## Basic Usage -import Basic from '@site/static/usage/v7/item-group/basic/index.md'; +import Basic from '@site/static/usage/v8/item-group/basic/index.md'; ## Sliding Items -import SlidingItems from '@site/static/usage/v7/item-group/sliding-items/index.md'; +import SlidingItems from '@site/static/usage/v8/item-group/sliding-items/index.md'; diff --git a/docs/api/item-option.md b/docs/api/item-option.md index adbc51a8493..344af67893c 100644 --- a/docs/api/item-option.md +++ b/docs/api/item-option.md @@ -1,12 +1,12 @@ --- title: "ion-item-option" --- -import Props from '@ionic-internal/component-api/v7/item-option/props.md'; -import Events from '@ionic-internal/component-api/v7/item-option/events.md'; -import Methods from '@ionic-internal/component-api/v7/item-option/methods.md'; -import Parts from '@ionic-internal/component-api/v7/item-option/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/item-option/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/item-option/slots.md'; +import Props from '@ionic-internal/component-api/v8/item-option/props.md'; +import Events from '@ionic-internal/component-api/v8/item-option/events.md'; +import Methods from '@ionic-internal/component-api/v8/item-option/methods.md'; +import Parts from '@ionic-internal/component-api/v8/item-option/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/item-option/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/item-option/slots.md'; ion-item-option: Option Button for Sliding Item in Ionic diff --git a/docs/api/item-options.md b/docs/api/item-options.md index e242c9d1012..fa2eb2f3dd9 100644 --- a/docs/api/item-options.md +++ b/docs/api/item-options.md @@ -1,12 +1,12 @@ --- title: "ion-item-options" --- -import Props from '@ionic-internal/component-api/v7/item-options/props.md'; -import Events from '@ionic-internal/component-api/v7/item-options/events.md'; -import Methods from '@ionic-internal/component-api/v7/item-options/methods.md'; -import Parts from '@ionic-internal/component-api/v7/item-options/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/item-options/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/item-options/slots.md'; +import Props from '@ionic-internal/component-api/v8/item-options/props.md'; +import Events from '@ionic-internal/component-api/v8/item-options/events.md'; +import Methods from '@ionic-internal/component-api/v8/item-options/methods.md'; +import Parts from '@ionic-internal/component-api/v8/item-options/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/item-options/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/item-options/slots.md'; ion-item-options: Option Button Components for Ionic Apps diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md index c2e69e82cd9..20b864a4ee9 100644 --- a/docs/api/item-sliding.md +++ b/docs/api/item-sliding.md @@ -1,12 +1,12 @@ --- title: "ion-item-sliding" --- -import Props from '@ionic-internal/component-api/v7/item-sliding/props.md'; -import Events from '@ionic-internal/component-api/v7/item-sliding/events.md'; -import Methods from '@ionic-internal/component-api/v7/item-sliding/methods.md'; -import Parts from '@ionic-internal/component-api/v7/item-sliding/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/item-sliding/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/item-sliding/slots.md'; +import Props from '@ionic-internal/component-api/v8/item-sliding/props.md'; +import Events from '@ionic-internal/component-api/v8/item-sliding/events.md'; +import Methods from '@ionic-internal/component-api/v8/item-sliding/methods.md'; +import Parts from '@ionic-internal/component-api/v8/item-sliding/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/item-sliding/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/item-sliding/slots.md'; ion-item-sliding: Slide Buttons | Slide Right to Left @@ -23,7 +23,7 @@ A sliding item contains an item that can be dragged to reveal option buttons. It Sliding item options are placed on the `"end"` side of the item by default. This means that options are revealed when the item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the side attribute to `"start"` on the [item options](./item-options) element. Up to two item options can be used at the same time in order to reveal two different sets of options depending on the swiping direction. -import Basic from '@site/static/usage/v7/item-sliding/basic/index.md'; +import Basic from '@site/static/usage/v8/item-sliding/basic/index.md'; @@ -32,7 +32,7 @@ import Basic from '@site/static/usage/v7/item-sliding/basic/index.md'; When an icon is placed alongside text in the [item option](./item-option), it will display the icon on top of the text by default. The slot on the icon can be changed to any of the available [item option slots](./item-option#slots) to change its position. -import Icons from '@site/static/usage/v7/item-sliding/icons/index.md'; +import Icons from '@site/static/usage/v8/item-sliding/icons/index.md'; @@ -41,7 +41,7 @@ import Icons from '@site/static/usage/v7/item-sliding/icons/index.md'; Options can be expanded to take up the full width of the parent `ion-item` if you swipe past a certain point. This can be combined with the `ionSwipe` event on the [item options](./item-options) to call a method when the item is fully swiped. -import Expandable from '@site/static/usage/v7/item-sliding/expandable/index.md'; +import Expandable from '@site/static/usage/v8/item-sliding/expandable/index.md'; diff --git a/docs/api/item.md b/docs/api/item.md index cffbe64ded2..c479d57bc88 100644 --- a/docs/api/item.md +++ b/docs/api/item.md @@ -1,12 +1,12 @@ --- title: "ion-item" --- -import Props from '@ionic-internal/component-api/v7/item/props.md'; -import Events from '@ionic-internal/component-api/v7/item/events.md'; -import Methods from '@ionic-internal/component-api/v7/item/methods.md'; -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 Props from '@ionic-internal/component-api/v8/item/props.md'; +import Events from '@ionic-internal/component-api/v8/item/events.md'; +import Methods from '@ionic-internal/component-api/v8/item/methods.md'; +import Parts from '@ionic-internal/component-api/v8/item/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/item/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/item/slots.md'; import useBaseUrl from '@docusaurus/useBaseUrl'; import BestPracticeFigure from '@components/global/BestPracticeFigure'; @@ -27,7 +27,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an Items left align text and add an ellipsis when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-wrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text. -import Basic from '@site/static/usage/v7/item/basic/index.md'; +import Basic from '@site/static/usage/v8/item/basic/index.md'; @@ -52,7 +52,7 @@ If a visual is required to interact with the item, such as an icon button, then In the example below, we are creating two lists with supporting visuals. The first list uses icons, and the second list uses avatars. The visuals are decorative, so they all have `aria-hidden="true"`. Additionally, they are presented consistently in the `start` slot. -import SupportingVisuals from '@site/static/usage/v7/item/content-types/supporting-visuals/index.md'; +import SupportingVisuals from '@site/static/usage/v8/item/content-types/supporting-visuals/index.md'; @@ -74,7 +74,7 @@ The "Allow Notifications" label on the toggle has additional text underneath it Below that list is another list containing a textarea with a [Note](./note) containing long text underneath. The textarea was placed in its own list to make it apparent that the long text is associated with the textarea and not any other fields. -import Text from '@site/static/usage/v7/item/content-types/text/index.md'; +import Text from '@site/static/usage/v8/item/content-types/text/index.md'; @@ -102,7 +102,7 @@ In the example below, we are creating two lists with different kinds of metadata The second list mimics the iOS Mail app to show an inbox. This list makes use of custom metadata including an "unread message" indicator in the "start" slot as well as a timestamp and custom detail icon in the "end" slot. The "unread message" indicator is highlighted in blue to draw the user's attention to the unread messages, while the timestamp is more subtle. -import Metadata from '@site/static/usage/v7/item/content-types/metadata/index.md'; +import Metadata from '@site/static/usage/v8/item/content-types/metadata/index.md'; @@ -122,7 +122,7 @@ Developers should avoid creating @@ -174,7 +174,7 @@ import Clickable from '@site/static/usage/v7/item/clickable/index.md'; By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`. -import DetailArrows from '@site/static/usage/v7/item/detail-arrows/index.md'; +import DetailArrows from '@site/static/usage/v8/item/detail-arrows/index.md'; @@ -198,7 +198,7 @@ See the [theming documentation](/docs/theming/css-variables) for more informatio Items show an inset bottom border by default. The border has padding on the left and does not appear under any content that is slotted in the `"start"` slot. The `lines` property can be modified to `"full"` or `"none"` which will show a full width border or no border, respectively. -import Lines from '@site/static/usage/v7/item/lines/index.md'; +import Lines from '@site/static/usage/v8/item/lines/index.md'; @@ -206,13 +206,13 @@ import Lines from '@site/static/usage/v7/item/lines/index.md'; Buttons are styled smaller inside of items than when they are outside of them. To make the button size match buttons outside of an item, set the `size` attribute to `"default"`. -import Buttons from '@site/static/usage/v7/item/buttons/index.md'; +import Buttons from '@site/static/usage/v8/item/buttons/index.md'; ## Item Inputs -import Inputs from '@site/static/usage/v7/item/inputs/index.md'; +import Inputs from '@site/static/usage/v8/item/inputs/index.md'; @@ -220,19 +220,19 @@ import Inputs from '@site/static/usage/v7/item/inputs/index.md'; ### Colors -import Colors from '@site/static/usage/v7/item/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/item/theming/colors/index.md'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v7/item/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v8/item/theming/css-shadow-parts/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/item/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/item/theming/css-properties/index.md'; diff --git a/docs/api/label.md b/docs/api/label.md index c3761074f8d..dcf24afbeaf 100644 --- a/docs/api/label.md +++ b/docs/api/label.md @@ -1,12 +1,12 @@ --- title: "ion-label" --- -import Props from '@ionic-internal/component-api/v7/label/props.md'; -import Events from '@ionic-internal/component-api/v7/label/events.md'; -import Methods from '@ionic-internal/component-api/v7/label/methods.md'; -import Parts from '@ionic-internal/component-api/v7/label/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/label/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/label/slots.md'; +import Props from '@ionic-internal/component-api/v8/label/props.md'; +import Events from '@ionic-internal/component-api/v8/label/events.md'; +import Methods from '@ionic-internal/component-api/v8/label/methods.md'; +import Parts from '@ionic-internal/component-api/v8/label/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/label/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/label/slots.md'; ion-label: Item Label Color and Properties for Applications @@ -23,13 +23,13 @@ The position of the label inside of an item can be inline, fixed, stacked, or fl ## Basic Usage -import Basic from '@site/static/usage/v7/label/basic/index.md'; +import Basic from '@site/static/usage/v8/label/basic/index.md'; ## Item Labels -import Item from '@site/static/usage/v7/label/item/index.md'; +import Item from '@site/static/usage/v8/label/item/index.md'; @@ -37,7 +37,7 @@ import Item from '@site/static/usage/v7/label/item/index.md'; ### Colors -import Colors from '@site/static/usage/v7/label/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/label/theming/colors/index.md'; diff --git a/docs/api/list-header.md b/docs/api/list-header.md index 4d684f1d4b8..2a209b34ce2 100644 --- a/docs/api/list-header.md +++ b/docs/api/list-header.md @@ -1,12 +1,12 @@ --- title: "ion-list-header" --- -import Props from '@ionic-internal/component-api/v7/list-header/props.md'; -import Events from '@ionic-internal/component-api/v7/list-header/events.md'; -import Methods from '@ionic-internal/component-api/v7/list-header/methods.md'; -import Parts from '@ionic-internal/component-api/v7/list-header/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/list-header/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/list-header/slots.md'; +import Props from '@ionic-internal/component-api/v8/list-header/props.md'; +import Events from '@ionic-internal/component-api/v8/list-header/events.md'; +import Methods from '@ionic-internal/component-api/v8/list-header/methods.md'; +import Parts from '@ionic-internal/component-api/v8/list-header/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/list-header/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/list-header/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -17,7 +17,7 @@ List headers are block elements that are used to describe the contents of a [lis ## Basic Usage -import Basic from '@site/static/usage/v7/list-header/basic/index.md'; +import Basic from '@site/static/usage/v8/list-header/basic/index.md'; @@ -26,7 +26,7 @@ import Basic from '@site/static/usage/v7/list-header/basic/index.md'; A [button](./button) placed in a list header can be useful for showing part of a list and redirecting to the full list with the button. -import Buttons from '@site/static/usage/v7/list-header/buttons/index.md'; +import Buttons from '@site/static/usage/v8/list-header/buttons/index.md'; @@ -35,7 +35,7 @@ import Buttons from '@site/static/usage/v7/list-header/buttons/index.md'; List headers do not show a bottom border by default. The `lines` property can be modified to `"full"` or `"inset"` which will show a full width border or an inset border with left padding, respectively. -import Lines from '@site/static/usage/v7/list-header/lines/index.md'; +import Lines from '@site/static/usage/v8/list-header/lines/index.md'; @@ -43,13 +43,13 @@ import Lines from '@site/static/usage/v7/list-header/lines/index.md'; ### Colors -import Colors from '@site/static/usage/v7/list-header/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/list-header/theming/colors/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/list-header/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/list-header/theming/css-properties/index.md'; diff --git a/docs/api/list.md b/docs/api/list.md index 6aee4eaa556..2d82f082eb1 100644 --- a/docs/api/list.md +++ b/docs/api/list.md @@ -1,12 +1,12 @@ --- title: "ion-list" --- -import Props from '@ionic-internal/component-api/v7/list/props.md'; -import Events from '@ionic-internal/component-api/v7/list/events.md'; -import Methods from '@ionic-internal/component-api/v7/list/methods.md'; -import Parts from '@ionic-internal/component-api/v7/list/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/list/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/list/slots.md'; +import Props from '@ionic-internal/component-api/v8/list/props.md'; +import Events from '@ionic-internal/component-api/v8/list/events.md'; +import Methods from '@ionic-internal/component-api/v8/list/methods.md'; +import Parts from '@ionic-internal/component-api/v8/list/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/list/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/list/slots.md'; ion-list: Item List View Component for iOS and Android Apps @@ -23,7 +23,7 @@ Lists support several interactions including swiping items to reveal options, dr ## Basic Usage -import Basic from '@site/static/usage/v7/list/basic/index.md'; +import Basic from '@site/static/usage/v8/list/basic/index.md'; @@ -32,7 +32,7 @@ import Basic from '@site/static/usage/v7/list/basic/index.md'; Adding the `inset` property to a list will apply margin around the list. In `ios` mode it will also add rounded corners to the list. -import Inset from '@site/static/usage/v7/list/inset/index.md'; +import Inset from '@site/static/usage/v8/list/inset/index.md'; @@ -41,7 +41,7 @@ import Inset from '@site/static/usage/v7/list/inset/index.md'; Adding the `lines` property to a list will adjust the bottom borders of all of the items in the list. Setting it to `"full"` will display full width borders, `"inset"` will display borders adjusted with left padding, and `"none"` will show no borders. If the `lines` property is set on an item in a list, that will take priority over the property on the list. -import Lines from '@site/static/usage/v7/list/lines/index.md'; +import Lines from '@site/static/usage/v8/list/lines/index.md'; diff --git a/docs/api/loading.md b/docs/api/loading.md index 074a79408db..989d68614d0 100644 --- a/docs/api/loading.md +++ b/docs/api/loading.md @@ -1,12 +1,12 @@ --- title: "ion-loading" --- -import Props from '@ionic-internal/component-api/v7/loading/props.md'; -import Events from '@ionic-internal/component-api/v7/loading/events.md'; -import Methods from '@ionic-internal/component-api/v7/loading/methods.md'; -import Parts from '@ionic-internal/component-api/v7/loading/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/loading/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/loading/slots.md'; +import Props from '@ionic-internal/component-api/v8/loading/props.md'; +import Events from '@ionic-internal/component-api/v8/loading/events.md'; +import Methods from '@ionic-internal/component-api/v8/loading/methods.md'; +import Parts from '@ionic-internal/component-api/v8/loading/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/loading/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/loading/slots.md'; ion-loading: Loading | Application Loading Indicator Overlay @@ -28,13 +28,13 @@ Alternatively, developers can configure the loading indicator to dismiss automat ### Inline (Recommended) -import Inline from '@site/static/usage/v7/loading/inline/index.md'; +import Inline from '@site/static/usage/v8/loading/inline/index.md'; ### Controller -import Controller from '@site/static/usage/v7/loading/controller/index.md'; +import Controller from '@site/static/usage/v8/loading/controller/index.md'; @@ -44,7 +44,7 @@ import Controller from '@site/static/usage/v7/loading/controller/index.md'; The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#spinner) for a full list of options. -import Spinners from '@site/static/usage/v7/loading/spinners/index.md'; +import Spinners from '@site/static/usage/v8/loading/spinners/index.md'; @@ -54,7 +54,7 @@ Loading uses scoped encapsulation, which means it will automatically scope its C We recommend passing a custom class and using that to add custom styles to the host and inner elements. -import Theming from '@site/static/usage/v7/loading/theming/index.md'; +import Theming from '@site/static/usage/v8/loading/theming/index.md'; diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md index c9deedb43a6..4fc1e792dec 100644 --- a/docs/api/menu-button.md +++ b/docs/api/menu-button.md @@ -1,12 +1,12 @@ --- title: "ion-menu-button" --- -import Props from '@ionic-internal/component-api/v7/menu-button/props.md'; -import Events from '@ionic-internal/component-api/v7/menu-button/events.md'; -import Methods from '@ionic-internal/component-api/v7/menu-button/methods.md'; -import Parts from '@ionic-internal/component-api/v7/menu-button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/menu-button/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/menu-button/slots.md'; +import Props from '@ionic-internal/component-api/v8/menu-button/props.md'; +import Events from '@ionic-internal/component-api/v8/menu-button/events.md'; +import Methods from '@ionic-internal/component-api/v8/menu-button/methods.md'; +import Parts from '@ionic-internal/component-api/v8/menu-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/menu-button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/menu-button/slots.md'; ion-menu-button: Menu Button to Open an App Menu on a Page diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md index 1ffce3af0bf..45842feb073 100644 --- a/docs/api/menu-toggle.md +++ b/docs/api/menu-toggle.md @@ -1,12 +1,12 @@ --- title: "ion-menu-toggle" --- -import Props from '@ionic-internal/component-api/v7/menu-toggle/props.md'; -import Events from '@ionic-internal/component-api/v7/menu-toggle/events.md'; -import Methods from '@ionic-internal/component-api/v7/menu-toggle/methods.md'; -import Parts from '@ionic-internal/component-api/v7/menu-toggle/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/menu-toggle/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/menu-toggle/slots.md'; +import Props from '@ionic-internal/component-api/v8/menu-toggle/props.md'; +import Events from '@ionic-internal/component-api/v8/menu-toggle/events.md'; +import Methods from '@ionic-internal/component-api/v8/menu-toggle/methods.md'; +import Parts from '@ionic-internal/component-api/v8/menu-toggle/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/menu-toggle/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/menu-toggle/slots.md'; ion-menu-toggle: MenuToggle Component to Open/Close Menus diff --git a/docs/api/menu.md b/docs/api/menu.md index 71bc3acbb72..7a76d481a30 100644 --- a/docs/api/menu.md +++ b/docs/api/menu.md @@ -1,12 +1,12 @@ --- title: "ion-menu" --- -import Props from '@ionic-internal/component-api/v7/menu/props.md'; -import Events from '@ionic-internal/component-api/v7/menu/events.md'; -import Methods from '@ionic-internal/component-api/v7/menu/methods.md'; -import Parts from '@ionic-internal/component-api/v7/menu/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/menu/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/menu/slots.md'; +import Props from '@ionic-internal/component-api/v8/menu/props.md'; +import Events from '@ionic-internal/component-api/v8/menu/events.md'; +import Methods from '@ionic-internal/component-api/v8/menu/methods.md'; +import Parts from '@ionic-internal/component-api/v8/menu/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/menu/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/menu/slots.md'; ion-menu: API Framework Docs for Types of Menu Components @@ -24,7 +24,7 @@ The menu element should be a sibling to the root content element. There can be a ## Basic Usage -import Basic from '@site/static/usage/v7/menu/basic/index.md'; +import Basic from '@site/static/usage/v8/menu/basic/index.md'; @@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/menu/basic/index.md'; The [menu toggle](./menu-toggle) component can be used to create custom button that can open or close the menu. -import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md'; +import MenuToggle from '@site/static/usage/v8/menu/toggle/index.md'; @@ -42,7 +42,7 @@ import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md'; The `type` property can be used to customize how menus display in your application. -import MenuType from '@site/static/usage/v7/menu/type/index.md'; +import MenuType from '@site/static/usage/v8/menu/type/index.md'; @@ -53,7 +53,7 @@ Menus are displayed on the `"start"` side by default. In apps that use left-to-r If menus on both sides are needed in an app, the menu can be opened by passing the `side` value to the `open` method on `MenuController`. If a side is not provided, the menu on the `"start"` side will be opened. See the [multiple menus](#multiple-menus) section below for an example using `MenuController`. -import Sides from '@site/static/usage/v7/menu/sides/index.md'; +import Sides from '@site/static/usage/v8/menu/sides/index.md'; @@ -62,7 +62,7 @@ import Sides from '@site/static/usage/v7/menu/sides/index.md'; When multiple menus exist on the same side, we need refer to them by ID instead of side. Otherwise, the wrong menu may be activated. -import Multiple from '@site/static/usage/v7/menu/multiple/index.md'; +import Multiple from '@site/static/usage/v8/menu/multiple/index.md'; @@ -71,7 +71,7 @@ import Multiple from '@site/static/usage/v7/menu/multiple/index.md'; ### CSS Shadow Parts -import Theming from '@site/static/usage/v7/menu/theming/index.md'; +import Theming from '@site/static/usage/v8/menu/theming/index.md'; diff --git a/docs/api/modal.md b/docs/api/modal.md index 9bc25674960..4c5a129acea 100644 --- a/docs/api/modal.md +++ b/docs/api/modal.md @@ -1,12 +1,12 @@ --- title: "ion-modal" --- -import Props from '@ionic-internal/component-api/v7/modal/props.md'; -import Events from '@ionic-internal/component-api/v7/modal/events.md'; -import Methods from '@ionic-internal/component-api/v7/modal/methods.md'; -import Parts from '@ionic-internal/component-api/v7/modal/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/modal/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/modal/slots.md'; +import Props from '@ionic-internal/component-api/v8/modal/props.md'; +import Events from '@ionic-internal/component-api/v8/modal/events.md'; +import Methods from '@ionic-internal/component-api/v8/modal/methods.md'; +import Parts from '@ionic-internal/component-api/v8/modal/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/modal/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/modal/slots.md'; ion-modal: Ionic Mobile App Custom Modal API Component @@ -25,7 +25,7 @@ A Modal is a dialog that appears on top of the app's content, and must be dismis When using `ion-modal` with Angular, React, or Vue, the component you pass in will be destroyed when the modal is dismissed. As this functionality is provided by the JavaScript framework, using `ion-modal` without a JavaScript framework will not destroy the component you passed in. If this is a needed functionality, we recommend using the `modalController` instead. -import InlineModalTriggerExample from '@site/static/usage/v7/modal/inline/basic/index.md'; +import InlineModalTriggerExample from '@site/static/usage/v8/modal/inline/basic/index.md'; @@ -35,7 +35,7 @@ The `isOpen` property on `ion-modal` allows developers to control the presentati `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the modal is dismissed. Developers should listen for the `ionModalDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-modal` from being tightly coupled with the state of the application. With a one way data binding, the modal only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the modal needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. -import InlineModalIsOpenExample from '@site/static/usage/v7/modal/inline/is-open/index.md'; +import InlineModalIsOpenExample from '@site/static/usage/v8/modal/inline/is-open/index.md'; @@ -43,7 +43,7 @@ import InlineModalIsOpenExample from '@site/static/usage/v7/modal/inline/is-open With the `modalController` developers can present an `ion-modal` programmatically. Developers will have complete control over when a modal is presented and dismissed. -import ControllerExample from '@site/static/usage/v7/modal/controller/index.md'; +import ControllerExample from '@site/static/usage/v8/modal/controller/index.md'; @@ -63,7 +63,7 @@ Developers can set `canDismiss` to a boolean value. If `canDismiss` is `true`, t Setting a boolean value should be used when you need to require a particular action to be taken prior to a modal being dismissed. For example, if developers want to require that a "Terms of Use" checkbox is checked prior to closing the modal, they could set `canDismiss` to `false` initially and update it to `true` when the checkbox is checked. -import CanDismissBooleanExample from '@site/static/usage/v7/modal/can-dismiss/boolean/index.md'; +import CanDismissBooleanExample from '@site/static/usage/v8/modal/can-dismiss/boolean/index.md'; @@ -75,7 +75,7 @@ Setting a callback function should be used when you have complex dismissing crit Note that setting a callback function will cause the swipe gesture to be interrupted when using a card or sheet modal. This is because Ionic does not know what your callback function will resolve to ahead of time. -import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/function/index.md'; +import CanDismissFunctionExample from '@site/static/usage/v8/modal/can-dismiss/function/index.md'; @@ -83,7 +83,7 @@ import CanDismissFunctionExample from '@site/static/usage/v7/modal/can-dismiss/f Developers may want to prevent users from swiping to close a card or sheet modal. This can be done by setting a callback function for `canDismiss` and checking if the `role` is not `gesture`. -import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md'; +import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/index.md'; @@ -95,7 +95,7 @@ To achieve this customization, child components can employ various techniques su Here's a simplified example illustrating how a child component can interact with a parent component to modify the `canDismiss` callback: -import CanDismissChildStateExample from '@site/static/usage/v7/modal/can-dismiss/child-state/index.md'; +import CanDismissChildStateExample from '@site/static/usage/v8/modal/can-dismiss/child-state/index.md'; @@ -113,7 +113,7 @@ The `canDismiss` property can be used to control whether or not the card modal c The card display style is only available on iOS. ::: -import CardExample from '@site/static/usage/v7/modal/card/basic/index.md'; +import CardExample from '@site/static/usage/v8/modal/card/basic/index.md'; @@ -127,19 +127,19 @@ The `initialBreakpoint` property is required so that the sheet modal knows which The `backdropBreakpoint` property can be used to customize the point at which the `ion-backdrop` will begin to fade in. This is useful when creating interfaces that have content underneath the sheet that should remain interactive. A common use case is a sheet modal that overlays a map where the map is interactive until the sheet is fully expanded. -import SheetExample from '@site/static/usage/v7/modal/sheet/basic/index.md'; +import SheetExample from '@site/static/usage/v8/modal/sheet/basic/index.md'; #### Interacting with background content -import SheetBackgroundContentExample from '@site/static/usage/v7/modal/sheet/background-content/index.md'; +import SheetBackgroundContentExample from '@site/static/usage/v8/modal/sheet/background-content/index.md'; #### Auto Height Sheet -import SheetAutoHeightExample from '@site/static/usage/v7/modal/sheet/auto-height/index.md'; +import SheetAutoHeightExample from '@site/static/usage/v8/modal/sheet/auto-height/index.md'; @@ -147,7 +147,7 @@ import SheetAutoHeightExample from '@site/static/usage/v7/modal/sheet/auto-heigh Sheet modals can optionally render a handle indicator used for dragging the sheet between breakpoints. The `handleBehavior` property can be used to configure the behavior of when the handle is activated by the user. -import SheetHandleBehaviorExample from '@site/static/usage/v7/modal/sheet/handle-behavior/index.md'; +import SheetHandleBehaviorExample from '@site/static/usage/v8/modal/sheet/handle-behavior/index.md'; @@ -171,7 +171,7 @@ ion-modal.stack-modal { } ``` -import ThemeExample from '@site/static/usage/v7/modal/styling/theming/index.md'; +import ThemeExample from '@site/static/usage/v8/modal/styling/theming/index.md'; @@ -179,7 +179,7 @@ import ThemeExample from '@site/static/usage/v7/modal/styling/theming/index.md'; The enter and leave animations can be customized by using our animation builder and assigning animations to `enterAnimation` and `leaveAnimation`. -import AnimationsExample from '@site/static/usage/v7/modal/styling/animations/index.md'; +import AnimationsExample from '@site/static/usage/v8/modal/styling/animations/index.md'; @@ -187,7 +187,7 @@ import AnimationsExample from '@site/static/usage/v7/modal/styling/animations/in While `ion-modal` is most often used for full-page views, cards, or sheets, it is also possible to use it for custom dialogs. This is useful if developers need an interface that is more complex than what components such as [ion-alert](./alert) or [ion-loading](./loading) provide. -import CustomDialogs from '@site/static/usage/v7/modal/custom-dialogs/index.md'; +import CustomDialogs from '@site/static/usage/v8/modal/custom-dialogs/index.md'; @@ -276,7 +276,7 @@ When the backdrop is disabled, users will be able to interact with elements outs The content of an inline `ion-modal` is unmounted when closed. If this content is expensive to render, developers can use the `keepContentsMounted` property to mount the content as soon as the modal is mounted. This can help optimize the responsiveness of your application as the inner contents will have already been mounted when the modal opens. -import Mount from '@site/static/usage/v7/modal/performance/mount/index.md'; +import Mount from '@site/static/usage/v8/modal/performance/mount/index.md'; diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md index edf6600af92..11da005b7ed 100644 --- a/docs/api/nav-link.md +++ b/docs/api/nav-link.md @@ -1,12 +1,12 @@ --- title: "ion-nav-link" --- -import Props from '@ionic-internal/component-api/v7/nav-link/props.md'; -import Events from '@ionic-internal/component-api/v7/nav-link/events.md'; -import Methods from '@ionic-internal/component-api/v7/nav-link/methods.md'; -import Parts from '@ionic-internal/component-api/v7/nav-link/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/nav-link/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/nav-link/slots.md'; +import Props from '@ionic-internal/component-api/v8/nav-link/props.md'; +import Events from '@ionic-internal/component-api/v8/nav-link/events.md'; +import Methods from '@ionic-internal/component-api/v8/nav-link/methods.md'; +import Parts from '@ionic-internal/component-api/v8/nav-link/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/nav-link/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/nav-link/slots.md'; ion-nav-link: Navigation Links to a Specified Component diff --git a/docs/api/nav.md b/docs/api/nav.md index 19caba09c54..3cce798832c 100644 --- a/docs/api/nav.md +++ b/docs/api/nav.md @@ -1,12 +1,12 @@ --- title: "ion-nav" --- -import Props from '@ionic-internal/component-api/v7/nav/props.md'; -import Events from '@ionic-internal/component-api/v7/nav/events.md'; -import Methods from '@ionic-internal/component-api/v7/nav/methods.md'; -import Parts from '@ionic-internal/component-api/v7/nav/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/nav/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/nav/slots.md'; +import Props from '@ionic-internal/component-api/v8/nav/props.md'; +import Events from '@ionic-internal/component-api/v8/nav/events.md'; +import Methods from '@ionic-internal/component-api/v8/nav/methods.md'; +import Parts from '@ionic-internal/component-api/v8/nav/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/nav/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/nav/slots.md'; ion-nav: Nav View Component for Ionic Framework Apps @@ -29,7 +29,7 @@ Unlike Router Outlet, Nav is not tied to a particular router. This means that if NavLink is a simplified API when interacting with Nav. Developers can customize the component, pass along component properties, modify the direction of the route animation or define a custom animation when navigating. -import NavLinkExample from '@site/static/usage/v7/nav/nav-link/index.md'; +import NavLinkExample from '@site/static/usage/v8/nav/nav-link/index.md'; diff --git a/docs/api/note.md b/docs/api/note.md index d5f00591b4d..7b5efff7415 100644 --- a/docs/api/note.md +++ b/docs/api/note.md @@ -1,12 +1,12 @@ --- title: "ion-note" --- -import Props from '@ionic-internal/component-api/v7/note/props.md'; -import Events from '@ionic-internal/component-api/v7/note/events.md'; -import Methods from '@ionic-internal/component-api/v7/note/methods.md'; -import Parts from '@ionic-internal/component-api/v7/note/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/note/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/note/slots.md'; +import Props from '@ionic-internal/component-api/v8/note/props.md'; +import Events from '@ionic-internal/component-api/v8/note/events.md'; +import Methods from '@ionic-internal/component-api/v8/note/methods.md'; +import Parts from '@ionic-internal/component-api/v8/note/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/note/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/note/slots.md'; ion-note: Note Text Elements for iOS and Android Ionic Apps @@ -21,13 +21,13 @@ Notes are text elements generally used as subtitles that provide more informatio ## Basic Usage -import Basic from '@site/static/usage/v7/note/basic/index.md'; +import Basic from '@site/static/usage/v8/note/basic/index.md'; ## Item Notes -import Item from '@site/static/usage/v7/note/item/index.md'; +import Item from '@site/static/usage/v8/note/item/index.md'; @@ -35,13 +35,13 @@ import Item from '@site/static/usage/v7/note/item/index.md'; ### Colors -import Colors from '@site/static/usage/v7/note/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/note/theming/colors/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/note/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/note/theming/css-properties/index.md'; diff --git a/docs/api/picker.md b/docs/api/picker.md index e36a696bf6f..d286625fcce 100644 --- a/docs/api/picker.md +++ b/docs/api/picker.md @@ -1,12 +1,12 @@ --- title: "ion-picker" --- -import Props from '@ionic-internal/component-api/v7/picker/props.md'; -import Events from '@ionic-internal/component-api/v7/picker/events.md'; -import Methods from '@ionic-internal/component-api/v7/picker/methods.md'; -import Parts from '@ionic-internal/component-api/v7/picker/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/picker/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/picker/slots.md'; +import Props from '@ionic-internal/component-api/v8/picker/props.md'; +import Events from '@ionic-internal/component-api/v8/picker/events.md'; +import Methods from '@ionic-internal/component-api/v8/picker/methods.md'; +import Parts from '@ionic-internal/component-api/v8/picker/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/picker/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/picker/slots.md'; ion-picker: A Dialog That Displays Buttons and Columns @@ -23,7 +23,7 @@ A Picker is a dialog that displays a row of buttons and columns underneath. It a `ion-picker` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Picker. -import Trigger from '@site/static/usage/v7/picker/inline/trigger/index.md'; +import Trigger from '@site/static/usage/v8/picker/inline/trigger/index.md'; @@ -33,7 +33,7 @@ The `isOpen` property on `ion-picker` allows developers to control the presentat `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Picker is dismissed. Developers should listen for the `ionPickerDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-picker` from being tightly coupled with the state of the application. With a one way data binding, the Picker only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Picker needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. -import IsOpen from '@site/static/usage/v7/picker/inline/isOpen/index.md'; +import IsOpen from '@site/static/usage/v8/picker/inline/isOpen/index.md'; @@ -41,7 +41,7 @@ import IsOpen from '@site/static/usage/v7/picker/inline/isOpen/index.md'; The `pickerController` can be used in situations where more control is needed over when the Picker is presented and dismissed. -import Controller from '@site/static/usage/v7/picker/controller/index.md'; +import Controller from '@site/static/usage/v8/picker/controller/index.md'; @@ -49,7 +49,7 @@ import Controller from '@site/static/usage/v7/picker/controller/index.md'; The `columns` property can be used to display a Picker with multiple columns of different options. -import MultipleColumn from '@site/static/usage/v7/picker/multiple-column/index.md'; +import MultipleColumn from '@site/static/usage/v8/picker/multiple-column/index.md'; diff --git a/docs/api/popover.md b/docs/api/popover.md index bc56647295b..0a8cb9b92a2 100644 --- a/docs/api/popover.md +++ b/docs/api/popover.md @@ -1,12 +1,12 @@ --- title: "ion-popover" --- -import Props from '@ionic-internal/component-api/v7/popover/props.md'; -import Events from '@ionic-internal/component-api/v7/popover/events.md'; -import Methods from '@ionic-internal/component-api/v7/popover/methods.md'; -import Parts from '@ionic-internal/component-api/v7/popover/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/popover/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/popover/slots.md'; +import Props from '@ionic-internal/component-api/v8/popover/props.md'; +import Events from '@ionic-internal/component-api/v8/popover/events.md'; +import Methods from '@ionic-internal/component-api/v8/popover/methods.md'; +import Parts from '@ionic-internal/component-api/v8/popover/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/popover/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/popover/slots.md'; ion-popover: iOS / Android Popover UI Dialog Component @@ -54,7 +54,7 @@ A trigger for an inline `ion-popover` is the element that will open a popover wh Triggers are not applicable when using the `popoverController` because the `ion-popover` is not created ahead of time. ::: -import InlineTrigger from '@site/static/usage/v7/popover/presenting/inline-trigger/index.md'; +import InlineTrigger from '@site/static/usage/v8/popover/presenting/inline-trigger/index.md'; @@ -65,7 +65,7 @@ Inline popovers can also be opened by setting the `isOpen` property to `true`. T `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the popover is dismissed. Developers should listen for the `ionPopoverDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-popover` from being tightly coupled with the state of the application. With a one way data binding, the popover only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the popover needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. -import IsOpenTrigger from '@site/static/usage/v7/popover/presenting/inline-isopen/index.md'; +import IsOpenTrigger from '@site/static/usage/v8/popover/presenting/inline-isopen/index.md'; @@ -83,7 +83,7 @@ Instead of a controller, React has a hook called `useIonPopover` which behaves i ### Usage -import ControllerExample from '@site/static/usage/v7/popover/presenting/controller/index.md'; +import ControllerExample from '@site/static/usage/v8/popover/presenting/controller/index.md'; @@ -96,7 +96,7 @@ Popovers are presented at the root of your application so they overlay your enti If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. ::: -import Styling from '@site/static/usage/v7/popover/customization/styling/index.md'; +import Styling from '@site/static/usage/v8/popover/customization/styling/index.md'; @@ -117,7 +117,7 @@ The `alignment` property allows you to line up an edge of your popover with a co ### Side and Alignment Demo -import Positioning from '@site/static/usage/v7/popover/customization/positioning/index.md'; +import Positioning from '@site/static/usage/v8/popover/customization/positioning/index.md'; @@ -131,7 +131,7 @@ When making dropdown menus, you may want to have the width of the popover match If you are using the `popoverController`, you must provide an event via the `event` option and Ionic Framework will use `event.target` as the reference element. See the [controller demo](#controller-popovers) for an example of this pattern. -import Sizing from '@site/static/usage/v7/popover/customization/sizing/index.md'; +import Sizing from '@site/static/usage/v8/popover/customization/sizing/index.md'; @@ -145,7 +145,7 @@ You can use the `dismissOnSelect` property to automatically close the popover wh Nested popovers cannot be created when using the `popoverController` because the popover is automatically added to the root of your application when the `create` method is called. ::: -import NestedPopover from '@site/static/usage/v7/popover/nested/index.md'; +import NestedPopover from '@site/static/usage/v8/popover/nested/index.md'; @@ -226,7 +226,7 @@ type PositionAlign = 'start' | 'center' | 'end'; The content of an inline `ion-popover` is unmounted when closed. If this content is expensive to render, developers can use the `keepContentsMounted` property to mount the content as soon as the popover is mounted. This can help optimize the responsiveness of your application as the inner contents will have already been mounted when the popover opens. -import Mount from '@site/static/usage/v7/popover/performance/mount/index.md'; +import Mount from '@site/static/usage/v8/popover/performance/mount/index.md'; diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md index 72302b953a5..1d775421031 100644 --- a/docs/api/progress-bar.md +++ b/docs/api/progress-bar.md @@ -1,12 +1,12 @@ --- title: "ion-progress-bar" --- -import Props from '@ionic-internal/component-api/v7/progress-bar/props.md'; -import Events from '@ionic-internal/component-api/v7/progress-bar/events.md'; -import Methods from '@ionic-internal/component-api/v7/progress-bar/methods.md'; -import Parts from '@ionic-internal/component-api/v7/progress-bar/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/progress-bar/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/progress-bar/slots.md'; +import Props from '@ionic-internal/component-api/v8/progress-bar/props.md'; +import Events from '@ionic-internal/component-api/v8/progress-bar/events.md'; +import Methods from '@ionic-internal/component-api/v8/progress-bar/methods.md'; +import Parts from '@ionic-internal/component-api/v8/progress-bar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/progress-bar/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/progress-bar/slots.md'; ion-progress-bar: App Progress Bar for Loading Indicator @@ -24,7 +24,7 @@ Progress bars inform users about the status of ongoing processes, such as loadin Determinate is the default type. It should be used when the percentage of an operation is known. The progress is represented by setting the `value` property. This can be used to show the progress increasing from 0 to 100% of the track. -import Determinate from '@site/static/usage/v7/progress-bar/determinate/index.md'; +import Determinate from '@site/static/usage/v8/progress-bar/determinate/index.md'; @@ -32,7 +32,7 @@ import Determinate from '@site/static/usage/v7/progress-bar/determinate/index.md If the `buffer` property is set, a buffer stream will show with animated circles to indicate activity. The value of the `buffer` property will also be represented by how much visible track there is. If the value of `buffer` is less than the `value` property, there will be no visible track. If `buffer` is equal to `1` then the buffer stream will be hidden. -import Buffer from '@site/static/usage/v7/progress-bar/buffer/index.md'; +import Buffer from '@site/static/usage/v8/progress-bar/buffer/index.md'; @@ -41,7 +41,7 @@ import Buffer from '@site/static/usage/v7/progress-bar/buffer/index.md'; The indeterminate type should be used when it is unknown how long the process will take. The progress bar is not tied to the `value`, instead it continually slides along the track until the process is complete. -import Indeterminate from '@site/static/usage/v7/progress-bar/indeterminate/index.md'; +import Indeterminate from '@site/static/usage/v8/progress-bar/indeterminate/index.md'; @@ -49,7 +49,7 @@ import Indeterminate from '@site/static/usage/v7/progress-bar/indeterminate/inde ## Progress Bars in Toolbars -import Toolbar from '@site/static/usage/v7/toolbar/progress-bars/index.md'; +import Toolbar from '@site/static/usage/v8/toolbar/progress-bars/index.md'; @@ -58,21 +58,21 @@ import Toolbar from '@site/static/usage/v7/toolbar/progress-bars/index.md'; ### Colors -import Colors from '@site/static/usage/v7/progress-bar/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/progress-bar/theming/colors/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/progress-bar/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/progress-bar/theming/css-properties/index.md'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v8/progress-bar/theming/css-shadow-parts/index.md'; diff --git a/docs/api/radio-group.md b/docs/api/radio-group.md index 0731d897415..b26ec81379a 100644 --- a/docs/api/radio-group.md +++ b/docs/api/radio-group.md @@ -1,12 +1,12 @@ --- title: "ion-radio-group" --- -import Props from '@ionic-internal/component-api/v7/radio-group/props.md'; -import Events from '@ionic-internal/component-api/v7/radio-group/events.md'; -import Methods from '@ionic-internal/component-api/v7/radio-group/methods.md'; -import Parts from '@ionic-internal/component-api/v7/radio-group/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/radio-group/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/radio-group/slots.md'; +import Props from '@ionic-internal/component-api/v8/radio-group/props.md'; +import Events from '@ionic-internal/component-api/v8/radio-group/events.md'; +import Methods from '@ionic-internal/component-api/v8/radio-group/methods.md'; +import Parts from '@ionic-internal/component-api/v8/radio-group/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/radio-group/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/radio-group/slots.md'; ion-radio-group: Radio Button Group Usage for Ionic Apps diff --git a/docs/api/radio.md b/docs/api/radio.md index 9473c5cc790..6b5f8b10131 100644 --- a/docs/api/radio.md +++ b/docs/api/radio.md @@ -1,12 +1,12 @@ --- title: "ion-radio" --- -import Props from '@ionic-internal/component-api/v7/radio/props.md'; -import Events from '@ionic-internal/component-api/v7/radio/events.md'; -import Methods from '@ionic-internal/component-api/v7/radio/methods.md'; -import Parts from '@ionic-internal/component-api/v7/radio/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/radio/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/radio/slots.md'; +import Props from '@ionic-internal/component-api/v8/radio/props.md'; +import Events from '@ionic-internal/component-api/v8/radio/events.md'; +import Methods from '@ionic-internal/component-api/v8/radio/methods.md'; +import Parts from '@ionic-internal/component-api/v8/radio/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/radio/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/radio/slots.md'; ion-radio: Radio Component for iOS and Android @@ -24,7 +24,7 @@ When radios are inside of a radio group, only one radio will be checked at any t ## Basic Usage -import Basic from '@site/static/usage/v7/radio/basic/index.md'; +import Basic from '@site/static/usage/v8/radio/basic/index.md'; @@ -32,7 +32,7 @@ import Basic from '@site/static/usage/v7/radio/basic/index.md'; Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property. -import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v8/radio/label-placement/index.md'; @@ -44,7 +44,7 @@ Developers can use the `alignment` property to control how the label and control 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'; +import Alignment from '@site/static/usage/v8/radio/alignment/index.md'; @@ -52,7 +52,7 @@ import Alignment from '@site/static/usage/v7/radio/alignment/index.md'; Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property. -import Justify from '@site/static/usage/v7/radio/justify/index.md'; +import Justify from '@site/static/usage/v8/radio/justify/index.md'; @@ -64,7 +64,7 @@ import Justify from '@site/static/usage/v7/radio/justify/index.md'; By default, once a radio is selected it cannot be deselected; pressing it again will keep it selected. This behavior can be modified by using the `allowEmptySelection` property on the parent radio group, which enables the radios to be deselected. -import EmptySelection from '@site/static/usage/v7/radio/empty-selection/index.md'; +import EmptySelection from '@site/static/usage/v8/radio/empty-selection/index.md'; @@ -73,19 +73,19 @@ import EmptySelection from '@site/static/usage/v7/radio/empty-selection/index.md ### Colors -import Colors from '@site/static/usage/v7/radio/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/radio/theming/colors/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/radio/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/radio/theming/css-properties/index.md'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v7/radio/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v8/radio/theming/css-shadow-parts/index.md'; @@ -99,7 +99,7 @@ Developers can perform this migration one radio at a time. While developers can Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-radio`. The placement of the label can be configured using the `labelPlacement` property on `ion-radio`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-radio`. -import Migration from '@site/static/usage/v7/radio/migration/index.md'; +import Migration from '@site/static/usage/v8/radio/migration/index.md'; diff --git a/docs/api/range.md b/docs/api/range.md index ac889645992..c0fe527b70c 100644 --- a/docs/api/range.md +++ b/docs/api/range.md @@ -1,12 +1,12 @@ --- title: "ion-range" --- -import Props from '@ionic-internal/component-api/v7/range/props.md'; -import Events from '@ionic-internal/component-api/v7/range/events.md'; -import Methods from '@ionic-internal/component-api/v7/range/methods.md'; -import Parts from '@ionic-internal/component-api/v7/range/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/range/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/range/slots.md'; +import Props from '@ionic-internal/component-api/v8/range/props.md'; +import Events from '@ionic-internal/component-api/v8/range/events.md'; +import Methods from '@ionic-internal/component-api/v8/range/methods.md'; +import Parts from '@ionic-internal/component-api/v8/range/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/range/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/range/slots.md'; ion-range: Range Slider Knob Controls with Labels @@ -34,7 +34,7 @@ Labels should be used to describe the range. They can be used visually, and they The below demo shows how to use the `labelPlacement` property to change the position of the label relative to the range. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot. -import LabelsPlayground from '@site/static/usage/v7/range/labels/index.md'; +import LabelsPlayground from '@site/static/usage/v8/range/labels/index.md'; @@ -42,7 +42,7 @@ import LabelsPlayground from '@site/static/usage/v7/range/labels/index.md'; While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead. -import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md'; +import LabelSlotPlayground from '@site/static/usage/v8/range/label-slot/index.md'; @@ -50,7 +50,7 @@ import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md If no visible label is needed, developers should still supply an `aria-label` so the range is accessible to screen readers. -import NoVisibleLabel from '@site/static/usage/v7/range/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v8/range/no-visible-label/index.md'; @@ -60,7 +60,7 @@ Decorative elements can be passed into the `start` or `end` slots of the range. If the directionality of the document is set to left to right, the contents slotted to the `start` position will display to the left of the range, where as contents slotted to the `end` position will display to the right of the range. In right to left (rtl) directionality, the contents slotted to the `start` position will display to the right of the range, where as contents slotted to the `end` position will display to the left of the range. -import DecorationsPlayground from '@site/static/usage/v7/range/slots/index.md'; +import DecorationsPlayground from '@site/static/usage/v8/range/slots/index.md'; @@ -68,7 +68,7 @@ import DecorationsPlayground from '@site/static/usage/v7/range/slots/index.md'; Dual knobs introduce two knob controls that users can use to select a value at a lower and upper bounds. When selected, the Range will emit an `ionChange` event with a [RangeValue](#rangevalue), containing the upper and lower values selected. -import DualKnobs from '@site/static/usage/v7/range/dual-knobs/index.md'; +import DualKnobs from '@site/static/usage/v8/range/dual-knobs/index.md'; @@ -78,7 +78,7 @@ The `pin` attribute will display the value of the Range above the knob when drag With the `pinFormatter` function, developers can customize the formatting of the range value to the user. -import Pins from '@site/static/usage/v7/range/pins/index.md'; +import Pins from '@site/static/usage/v8/range/pins/index.md'; @@ -88,7 +88,7 @@ Ticks show indications for each available value on the Range. In order to use ti With snapping enabled, the Range knob will snap to the nearest available value as the knob is dragged and released. -import SnappingTicks from '@site/static/usage/v7/range/snapping-ticks/index.md'; +import SnappingTicks from '@site/static/usage/v8/range/snapping-ticks/index.md'; @@ -98,7 +98,7 @@ import SnappingTicks from '@site/static/usage/v7/range/snapping-ticks/index.md'; The `ionChange` event emits as the Range knob value changes. -import IonChangeEvent from '@site/static/usage/v7/range/ion-change-event/index.md'; +import IonChangeEvent from '@site/static/usage/v8/range/ion-change-event/index.md'; @@ -106,7 +106,7 @@ import IonChangeEvent from '@site/static/usage/v7/range/ion-change-event/index.m The `ionKnobMoveStart` event emits when the Range knob begins dragging, whether through mouse drag, touch gesture or keyboard interaction. Inversely, `ionKnobMoveEnd` emits when the Range knob is released. Both events emit with the `RangeValue` type and work in combination with the `dualKnobs` property. -import IonKnobMoveEvent from '@site/static/usage/v7/range/ion-knob-move-event/index.md'; +import IonKnobMoveEvent from '@site/static/usage/v8/range/ion-knob-move-event/index.md'; @@ -116,7 +116,7 @@ import IonKnobMoveEvent from '@site/static/usage/v7/range/ion-knob-move-event/in Range includes [CSS Variables](#css-custom-properties) to quickly theme and customize the appearance of the Range component to match your application's design. -import CSSProps from '@site/static/usage/v7/range/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/range/theming/css-properties/index.md'; @@ -124,7 +124,7 @@ import CSSProps from '@site/static/usage/v7/range/theming/css-properties/index.m Range includes [CSS Shadow Parts](#css-shadow-parts) to allow complete customization of specific element nodes within the Range component. CSS Shadow Parts offer the most customization capabilities and are the recommended approach when requiring advance styling with the Range component. -import CSSParts from '@site/static/usage/v7/range/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v8/range/theming/css-shadow-parts/index.md'; @@ -140,7 +140,7 @@ Using the modern syntax involves removing the `ion-label` and passing the label If custom HTML is needed for the label, it can be passed directly inside the `ion-range` using the `label` slot instead. -import Migration from '@site/static/usage/v7/range/migration/index.md'; +import Migration from '@site/static/usage/v8/range/migration/index.md'; diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.md index 263a057ce78..0eb09a0fc99 100644 --- a/docs/api/refresher-content.md +++ b/docs/api/refresher-content.md @@ -1,12 +1,12 @@ --- title: "ion-refresher-content" --- -import Props from '@ionic-internal/component-api/v7/refresher-content/props.md'; -import Events from '@ionic-internal/component-api/v7/refresher-content/events.md'; -import Methods from '@ionic-internal/component-api/v7/refresher-content/methods.md'; -import Parts from '@ionic-internal/component-api/v7/refresher-content/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/refresher-content/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/refresher-content/slots.md'; +import Props from '@ionic-internal/component-api/v8/refresher-content/props.md'; +import Events from '@ionic-internal/component-api/v8/refresher-content/events.md'; +import Methods from '@ionic-internal/component-api/v8/refresher-content/methods.md'; +import Parts from '@ionic-internal/component-api/v8/refresher-content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/refresher-content/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/refresher-content/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; diff --git a/docs/api/refresher.md b/docs/api/refresher.md index e6552ab795d..d782bf14bfa 100644 --- a/docs/api/refresher.md +++ b/docs/api/refresher.md @@ -1,12 +1,12 @@ --- title: "ion-refresher" --- -import Props from '@ionic-internal/component-api/v7/refresher/props.md'; -import Events from '@ionic-internal/component-api/v7/refresher/events.md'; -import Methods from '@ionic-internal/component-api/v7/refresher/methods.md'; -import Parts from '@ionic-internal/component-api/v7/refresher/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/refresher/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/refresher/slots.md'; +import Props from '@ionic-internal/component-api/v8/refresher/props.md'; +import Events from '@ionic-internal/component-api/v8/refresher/events.md'; +import Methods from '@ionic-internal/component-api/v8/refresher/methods.md'; +import Parts from '@ionic-internal/component-api/v8/refresher/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/refresher/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/refresher/slots.md'; ion-refresher: Pull-to-Refresh Page Content on Ionic Apps @@ -23,7 +23,7 @@ Data should be modified during the refresher's output events. Once the async ope ## Basic Usage -import Basic from '@site/static/usage/v7/refresher/basic/index.md'; +import Basic from '@site/static/usage/v8/refresher/basic/index.md'; @@ -34,7 +34,7 @@ The refresher has several properties for customizing the pull gesture. Set the ` These properties do not apply when the [native refresher](#native-refreshers) is enabled. -import PullProperties from '@site/static/usage/v7/refresher/pull-properties/index.md'; +import PullProperties from '@site/static/usage/v8/refresher/pull-properties/index.md'; @@ -45,7 +45,7 @@ The default icon, spinner, and text can be customized on the [refresher content] Setting `pullingIcon` will disable the [native refresher](#native-refreshers). -import CustomContent from '@site/static/usage/v7/refresher/custom-content/index.md'; +import CustomContent from '@site/static/usage/v8/refresher/custom-content/index.md'; @@ -67,7 +67,7 @@ The native refreshers can be disabled by setting the `pullingIcon` on the [refre Refresher requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target. -import CustomScrollTarget from '@site/static/usage/v7/refresher/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v8/refresher/custom-scroll-target/index.md'; @@ -76,7 +76,7 @@ import CustomScrollTarget from '@site/static/usage/v7/refresher/custom-scroll-ta While the refresher can be used with any type of content, a common use case in native apps is to display a list of data that gets updated on refresh. In the below example, the app generates a list of data and then appends data to the top of the list when the refresh is completed. In a real app, the data would be received and updated after sending a request via a network or database call. -import Advanced from '@site/static/usage/v7/refresher/advanced/index.md'; +import Advanced from '@site/static/usage/v8/refresher/advanced/index.md'; diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md index 65db848314f..58cef210ef2 100644 --- a/docs/api/reorder-group.md +++ b/docs/api/reorder-group.md @@ -1,12 +1,12 @@ --- title: "ion-reorder-group" --- -import Props from '@ionic-internal/component-api/v7/reorder-group/props.md'; -import Events from '@ionic-internal/component-api/v7/reorder-group/events.md'; -import Methods from '@ionic-internal/component-api/v7/reorder-group/methods.md'; -import Parts from '@ionic-internal/component-api/v7/reorder-group/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/reorder-group/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/reorder-group/slots.md'; +import Props from '@ionic-internal/component-api/v8/reorder-group/props.md'; +import Events from '@ionic-internal/component-api/v8/reorder-group/events.md'; +import Methods from '@ionic-internal/component-api/v8/reorder-group/methods.md'; +import Parts from '@ionic-internal/component-api/v8/reorder-group/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/reorder-group/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/reorder-group/slots.md'; ion-reorder-group: Wrapper Component for Reorder Items diff --git a/docs/api/reorder.md b/docs/api/reorder.md index b40605a7093..edc00c40ae4 100644 --- a/docs/api/reorder.md +++ b/docs/api/reorder.md @@ -1,12 +1,12 @@ --- title: "ion-reorder" --- -import Props from '@ionic-internal/component-api/v7/reorder/props.md'; -import Events from '@ionic-internal/component-api/v7/reorder/events.md'; -import Methods from '@ionic-internal/component-api/v7/reorder/methods.md'; -import Parts from '@ionic-internal/component-api/v7/reorder/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/reorder/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/reorder/slots.md'; +import Props from '@ionic-internal/component-api/v8/reorder/props.md'; +import Events from '@ionic-internal/component-api/v8/reorder/events.md'; +import Methods from '@ionic-internal/component-api/v8/reorder/methods.md'; +import Parts from '@ionic-internal/component-api/v8/reorder/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/reorder/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/reorder/slots.md'; ion-reorder: Drag and Drop Icon to Reorder Items @@ -27,7 +27,7 @@ The reorder is the anchor used to drag and drop the items. Once the reorder is c The most basic example of a reorder is slotting it inside of an item. By default, the reorder functionality is disabled for a reorder group. It can be enabled by setting the `disabled` property on the reorder group to `false`. The reorder icon can then be used to drag and drop the items and reorder them. -import Basic from '@site/static/usage/v7/reorder/basic/index.md'; +import Basic from '@site/static/usage/v8/reorder/basic/index.md'; @@ -36,7 +36,7 @@ import Basic from '@site/static/usage/v7/reorder/basic/index.md'; In some cases, it may be desired to have the option to toggle the reorder functionality. This can be done by making the `disabled` property reactive, based on a function or variable. -import TogglingDisabled from '@site/static/usage/v7/reorder/toggling-disabled/index.md'; +import TogglingDisabled from '@site/static/usage/v8/reorder/toggling-disabled/index.md'; @@ -45,7 +45,7 @@ import TogglingDisabled from '@site/static/usage/v7/reorder/toggling-disabled/in The reorder component uses a reorder icon with three lines on iOS and two lines on Material Design. This can be customized by adding an [Icon](https://ionic.io/ionicons) component inside of the reorder with any of the available Ionicons. -import CustomIcon from '@site/static/usage/v7/reorder/custom-icon/index.md'; +import CustomIcon from '@site/static/usage/v8/reorder/custom-icon/index.md'; @@ -54,7 +54,7 @@ import CustomIcon from '@site/static/usage/v7/reorder/custom-icon/index.md'; Reorder can also be used as a wrapper around an item, making the item itself the anchor. Click anywhere on an item below and drag it to reorder the list. -import Wrapper from '@site/static/usage/v7/reorder/wrapper/index.md'; +import Wrapper from '@site/static/usage/v8/reorder/wrapper/index.md'; @@ -69,7 +69,7 @@ In some cases, it may be necessary for an app to reorder both the array and the Regardless of the approach taken, a stable identity should be provided to reorder items if provided in a loop. This means using `trackBy` for Angular, and `key` for React and Vue. -import UpdatingData from '@site/static/usage/v7/reorder/updating-data/index.md'; +import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md'; @@ -78,7 +78,7 @@ import UpdatingData from '@site/static/usage/v7/reorder/updating-data/index.md'; Reorder requires a scroll container to work properly. When using a virtual scrolling solution, a custom scroll target needs to be provided. Scrolling on the content needs to be disabled and the `.ion-content-scroll-host` class needs to be added to the element responsible for scrolling. -import CustomScrollTarget from '@site/static/usage/v7/reorder/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v8/reorder/custom-scroll-target/index.md'; diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md index 00d299973ba..fb78daaf8cb 100644 --- a/docs/api/ripple-effect.md +++ b/docs/api/ripple-effect.md @@ -1,12 +1,12 @@ --- title: "ion-ripple-effect" --- -import Props from '@ionic-internal/component-api/v7/ripple-effect/props.md'; -import Events from '@ionic-internal/component-api/v7/ripple-effect/events.md'; -import Methods from '@ionic-internal/component-api/v7/ripple-effect/methods.md'; -import Parts from '@ionic-internal/component-api/v7/ripple-effect/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/ripple-effect/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/ripple-effect/slots.md'; +import Props from '@ionic-internal/component-api/v8/ripple-effect/props.md'; +import Events from '@ionic-internal/component-api/v8/ripple-effect/events.md'; +import Methods from '@ionic-internal/component-api/v8/ripple-effect/methods.md'; +import Parts from '@ionic-internal/component-api/v8/ripple-effect/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/ripple-effect/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/ripple-effect/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -25,7 +25,7 @@ It's important to set [relative positioning](https://developer.mozilla.org/en-US ## Basic Usage -import Basic from '@site/static/usage/v7/ripple-effect/basic/index.md'; +import Basic from '@site/static/usage/v8/ripple-effect/basic/index.md'; @@ -34,7 +34,7 @@ import Basic from '@site/static/usage/v7/ripple-effect/basic/index.md'; There are two types of ripple effects: `"bounded"` and `"unbounded"`. The default type, `"bounded"`, will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, set the type to `"unbounded"`. -import Type from '@site/static/usage/v7/ripple-effect/type/index.md'; +import Type from '@site/static/usage/v8/ripple-effect/type/index.md'; @@ -43,7 +43,7 @@ import Type from '@site/static/usage/v7/ripple-effect/type/index.md'; The ripple can be customized to a different color through CSS. By default the ripple color is set to inherit the text color, which is generally the body color. This can be changed by setting the CSS `color` on the parent or the ripple effect itself. -import Customizing from '@site/static/usage/v7/ripple-effect/customizing/index.md'; +import Customizing from '@site/static/usage/v8/ripple-effect/customizing/index.md'; diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.md index 687dbe3d4b8..411ea7b518f 100644 --- a/docs/api/route-redirect.md +++ b/docs/api/route-redirect.md @@ -2,12 +2,12 @@ title: "ion-route-redirect" --- -import Props from '@ionic-internal/component-api/v7/route-redirect/props.md'; -import Events from '@ionic-internal/component-api/v7/route-redirect/events.md'; -import Methods from '@ionic-internal/component-api/v7/route-redirect/methods.md'; -import Parts from '@ionic-internal/component-api/v7/route-redirect/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/route-redirect/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/route-redirect/slots.md'; +import Props from '@ionic-internal/component-api/v8/route-redirect/props.md'; +import Events from '@ionic-internal/component-api/v8/route-redirect/events.md'; +import Methods from '@ionic-internal/component-api/v8/route-redirect/methods.md'; +import Parts from '@ionic-internal/component-api/v8/route-redirect/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/route-redirect/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/route-redirect/slots.md'; ion-route-redirect: Redirect 'from' a URL 'to' Another URL diff --git a/docs/api/route.md b/docs/api/route.md index b49c8766b0d..8fc251b1907 100644 --- a/docs/api/route.md +++ b/docs/api/route.md @@ -4,12 +4,12 @@ title: "ion-route" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v7/route/props.md'; -import Events from '@ionic-internal/component-api/v7/route/events.md'; -import Methods from '@ionic-internal/component-api/v7/route/methods.md'; -import Parts from '@ionic-internal/component-api/v7/route/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/route/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/route/slots.md'; +import Props from '@ionic-internal/component-api/v8/route/props.md'; +import Events from '@ionic-internal/component-api/v8/route/events.md'; +import Methods from '@ionic-internal/component-api/v8/route/methods.md'; +import Parts from '@ionic-internal/component-api/v8/route/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/route/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/route/slots.md'; ion-route: API Route Component for Ionic Framework Apps diff --git a/docs/api/router-link.md b/docs/api/router-link.md index d6764f6020e..5f688c6d829 100644 --- a/docs/api/router-link.md +++ b/docs/api/router-link.md @@ -2,12 +2,12 @@ title: "ion-router-link" --- -import Props from '@ionic-internal/component-api/v7/router-link/props.md'; -import Events from '@ionic-internal/component-api/v7/router-link/events.md'; -import Methods from '@ionic-internal/component-api/v7/router-link/methods.md'; -import Parts from '@ionic-internal/component-api/v7/router-link/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/router-link/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/router-link/slots.md'; +import Props from '@ionic-internal/component-api/v8/router-link/props.md'; +import Events from '@ionic-internal/component-api/v8/router-link/events.md'; +import Methods from '@ionic-internal/component-api/v8/router-link/methods.md'; +import Parts from '@ionic-internal/component-api/v8/router-link/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/router-link/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/router-link/slots.md'; ion-router-link: Navigate To a Specified Link diff --git a/docs/api/router-outlet.md b/docs/api/router-outlet.md index 70c153815ed..eb2aa24bc8e 100644 --- a/docs/api/router-outlet.md +++ b/docs/api/router-outlet.md @@ -2,12 +2,12 @@ title: "ion-router-outlet" --- -import Props from '@ionic-internal/component-api/v7/router-outlet/props.md'; -import Events from '@ionic-internal/component-api/v7/router-outlet/events.md'; -import Methods from '@ionic-internal/component-api/v7/router-outlet/methods.md'; -import Parts from '@ionic-internal/component-api/v7/router-outlet/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/router-outlet/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/router-outlet/slots.md'; +import Props from '@ionic-internal/component-api/v8/router-outlet/props.md'; +import Events from '@ionic-internal/component-api/v8/router-outlet/events.md'; +import Methods from '@ionic-internal/component-api/v8/router-outlet/methods.md'; +import Parts from '@ionic-internal/component-api/v8/router-outlet/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/router-outlet/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/router-outlet/slots.md'; diff --git a/docs/api/router.md b/docs/api/router.md index dd386016be9..2d061c0f7a4 100644 --- a/docs/api/router.md +++ b/docs/api/router.md @@ -2,12 +2,12 @@ title: "ion-router" --- -import Props from '@ionic-internal/component-api/v7/router/props.md'; -import Events from '@ionic-internal/component-api/v7/router/events.md'; -import Methods from '@ionic-internal/component-api/v7/router/methods.md'; -import Parts from '@ionic-internal/component-api/v7/router/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/router/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/router/slots.md'; +import Props from '@ionic-internal/component-api/v8/router/props.md'; +import Events from '@ionic-internal/component-api/v8/router/events.md'; +import Methods from '@ionic-internal/component-api/v8/router/methods.md'; +import Parts from '@ionic-internal/component-api/v8/router/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/router/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/router/slots.md'; ion-router: Router Component to Coordinate URL Navigation @@ -36,7 +36,7 @@ In order to configure this relationship between components (to load/select) and ## Basic Usage -import BasicExample from '@site/static/usage/v7/router/basic/index.md'; +import BasicExample from '@site/static/usage/v8/router/basic/index.md'; diff --git a/docs/api/row.md b/docs/api/row.md index e0392ac6ba4..4172ef4a478 100644 --- a/docs/api/row.md +++ b/docs/api/row.md @@ -1,12 +1,12 @@ --- title: "ion-row" --- -import Props from '@ionic-internal/component-api/v7/row/props.md'; -import Events from '@ionic-internal/component-api/v7/row/events.md'; -import Methods from '@ionic-internal/component-api/v7/row/methods.md'; -import Parts from '@ionic-internal/component-api/v7/row/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/row/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/row/slots.md'; +import Props from '@ionic-internal/component-api/v8/row/props.md'; +import Events from '@ionic-internal/component-api/v8/row/events.md'; +import Methods from '@ionic-internal/component-api/v8/row/methods.md'; +import Parts from '@ionic-internal/component-api/v8/row/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/row/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/row/slots.md'; ion-row: Horizontal Row Components of the Grid System diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md index 3b90a32d73c..529ac434a90 100644 --- a/docs/api/searchbar.md +++ b/docs/api/searchbar.md @@ -1,12 +1,12 @@ --- title: "ion-searchbar" --- -import Props from '@ionic-internal/component-api/v7/searchbar/props.md'; -import Events from '@ionic-internal/component-api/v7/searchbar/events.md'; -import Methods from '@ionic-internal/component-api/v7/searchbar/methods.md'; -import Parts from '@ionic-internal/component-api/v7/searchbar/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/searchbar/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/searchbar/slots.md'; +import Props from '@ionic-internal/component-api/v8/searchbar/props.md'; +import Events from '@ionic-internal/component-api/v8/searchbar/events.md'; +import Methods from '@ionic-internal/component-api/v8/searchbar/methods.md'; +import Parts from '@ionic-internal/component-api/v8/searchbar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/searchbar/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/searchbar/slots.md'; ion-searchbar: Search Bar for Searching a Collection @@ -22,7 +22,7 @@ Searchbars represent a text field that can be used to search through a collectio ## Basic Usage -import Basic from '@site/static/usage/v7/searchbar/basic/index.md'; +import Basic from '@site/static/usage/v8/searchbar/basic/index.md'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v7/searchbar/basic/index.md'; A search icon is displayed to the left of the input field in a searchbar. It can be customized to any [Ionicon](https://ionic.io/ionicons/). -import SearchIcon from '@site/static/usage/v7/searchbar/search-icon/index.md'; +import SearchIcon from '@site/static/usage/v8/searchbar/search-icon/index.md'; @@ -40,7 +40,7 @@ import SearchIcon from '@site/static/usage/v7/searchbar/search-icon/index.md'; A clear button is displayed when a searchbar has a value or upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. By default, the clear button is set to show when focusing the searchbar, but it can be set to always show or never show. The icon inside of the clear button can also be customized to any [Ionicon](https://ionic.io/ionicons/). -import ClearButton from '@site/static/usage/v7/searchbar/clear-button/index.md'; +import ClearButton from '@site/static/usage/v8/searchbar/clear-button/index.md'; @@ -49,7 +49,7 @@ import ClearButton from '@site/static/usage/v7/searchbar/clear-button/index.md'; A cancel button can be enabled which will clear the input and lose the focus upon click. By default, cancel buttons are set to never show, but they can be set to always show or only show when focusing the searchbar. The cancel button is displayed as text in `ios` mode, and as an icon in `md` mode. Both the text and icon can be customized using different properties, with the icon accepting any [Ionicon](https://ionic.io/ionicons/). -import CancelButton from '@site/static/usage/v7/searchbar/cancel-button/index.md'; +import CancelButton from '@site/static/usage/v8/searchbar/cancel-button/index.md'; @@ -59,7 +59,7 @@ import CancelButton from '@site/static/usage/v7/searchbar/cancel-button/index.md Searchbars are styled to look native when placed inside of a toolbar. In iOS, searchbars should be placed in their own toolbar, under a toolbar that contains the page title. In Material Design, searchbars are either persistently displayed in their own toolbar, or expand over a toolbar containing the page title. -import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md'; +import Toolbar from '@site/static/usage/v8/toolbar/searchbars/index.md'; @@ -68,7 +68,7 @@ import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md'; A debounce can be set on the searchbar in order to delay triggering the `ionInput` event. This is useful when querying data, as it can be used to wait to make a request instead of requesting the data each time a character is entered in the input. -import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md'; +import Debounce from '@site/static/usage/v8/searchbar/debounce/index.md'; @@ -77,7 +77,7 @@ import Debounce from '@site/static/usage/v7/searchbar/debounce/index.md'; ### Colors -import Colors from '@site/static/usage/v7/searchbar/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/searchbar/theming/colors/index.md'; @@ -85,7 +85,7 @@ import Colors from '@site/static/usage/v7/searchbar/theming/colors/index.md'; Searchbar uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Targeting the `ion-searchbar` for customization will not work, therefore we recommend adding a class and customizing it that way. -import CSSProps from '@site/static/usage/v7/searchbar/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/searchbar/theming/css-properties/index.md'; diff --git a/docs/api/segment-button.md b/docs/api/segment-button.md index 04c383655b3..dc1c866b382 100644 --- a/docs/api/segment-button.md +++ b/docs/api/segment-button.md @@ -1,12 +1,12 @@ --- title: "ion-segment-button" --- -import Props from '@ionic-internal/component-api/v7/segment-button/props.md'; -import Events from '@ionic-internal/component-api/v7/segment-button/events.md'; -import Methods from '@ionic-internal/component-api/v7/segment-button/methods.md'; -import Parts from '@ionic-internal/component-api/v7/segment-button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/segment-button/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/segment-button/slots.md'; +import Props from '@ionic-internal/component-api/v8/segment-button/props.md'; +import Events from '@ionic-internal/component-api/v8/segment-button/events.md'; +import Methods from '@ionic-internal/component-api/v8/segment-button/methods.md'; +import Parts from '@ionic-internal/component-api/v8/segment-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/segment-button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/segment-button/slots.md'; ion-segment-button | Segment Button Icon and Segment Value @@ -23,7 +23,7 @@ Segment buttons are groups of related buttons inside of a [segment](segment.md). ## Basic Usage -import Basic from '@site/static/usage/v7/segment-button/basic/index.md'; +import Basic from '@site/static/usage/v8/segment-button/basic/index.md'; @@ -32,7 +32,7 @@ import Basic from '@site/static/usage/v7/segment-button/basic/index.md'; The `layout` property is set to `"icon-top"` by default. When a segment button has both an icon and a label, it will display the icon on top of the label. This behavior can be changed by setting the `layout` property to `"icon-bottom"`, `"icon-start"`, or `"icon-end"` which will show the icon below the label, to the start of the label (left in LTR and right in RTL) or to the end of the label (right in LTR and left in RTL), respectively. -import Layout from '@site/static/usage/v7/segment-button/layout/index.md'; +import Layout from '@site/static/usage/v8/segment-button/layout/index.md'; @@ -40,14 +40,14 @@ import Layout from '@site/static/usage/v7/segment-button/layout/index.md'; ## Theming ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v7/segment-button/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v8/segment-button/theming/css-shadow-parts/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/segment-button/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/segment-button/theming/css-properties/index.md'; diff --git a/docs/api/segment.md b/docs/api/segment.md index b4bdb45b6cb..46eb28050bb 100644 --- a/docs/api/segment.md +++ b/docs/api/segment.md @@ -1,12 +1,12 @@ --- title: "ion-segment" --- -import Props from '@ionic-internal/component-api/v7/segment/props.md'; -import Events from '@ionic-internal/component-api/v7/segment/events.md'; -import Methods from '@ionic-internal/component-api/v7/segment/methods.md'; -import Parts from '@ionic-internal/component-api/v7/segment/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/segment/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/segment/slots.md'; +import Props from '@ionic-internal/component-api/v8/segment/props.md'; +import Events from '@ionic-internal/component-api/v8/segment/events.md'; +import Methods from '@ionic-internal/component-api/v8/segment/methods.md'; +import Parts from '@ionic-internal/component-api/v8/segment/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/segment/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/segment/slots.md'; ion-segment: API Documentation for Segmented Controls @@ -27,7 +27,7 @@ Their functionality is similar to tabs, where selecting one will deselect all ot Segments consist of [segment buttons](./segment-button) with a `value` property on each button. Set the `value` property on the segment to match the value of a button to select that button. Segments can also be disabled to prevent users from interacting with them. -import Basic from '@site/static/usage/v7/segment/basic/index.md'; +import Basic from '@site/static/usage/v8/segment/basic/index.md'; @@ -36,7 +36,7 @@ import Basic from '@site/static/usage/v7/segment/basic/index.md'; Segments are not scrollable by default. Each segment button has a fixed width, and the width is determined by dividing the number of segment buttons by the screen width. This ensures that each segment button can be displayed on the screen without having to scroll. As a result, some segment buttons with longer labels may get cut off. To avoid this we recommend either using a shorter label or switching to a scrollable segment by setting the `scrollable` property to `true`. This will cause the segment to scroll horizontally, but will allow each segment button to have a variable width. -import Scrollable from '@site/static/usage/v7/segment/scrollable/index.md'; +import Scrollable from '@site/static/usage/v8/segment/scrollable/index.md'; @@ -44,7 +44,7 @@ import Scrollable from '@site/static/usage/v7/segment/scrollable/index.md'; ## Segments in Toolbars -import Toolbar from '@site/static/usage/v7/toolbar/segments/index.md'; +import Toolbar from '@site/static/usage/v8/toolbar/segments/index.md'; @@ -53,13 +53,13 @@ import Toolbar from '@site/static/usage/v7/toolbar/segments/index.md'; ### Colors -import Colors from '@site/static/usage/v7/segment/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/segment/theming/colors/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/segment/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/segment/theming/css-properties/index.md'; diff --git a/docs/api/select-option.md b/docs/api/select-option.md index 851d1cb7df3..a0cbf176022 100644 --- a/docs/api/select-option.md +++ b/docs/api/select-option.md @@ -1,12 +1,12 @@ --- title: "ion-select-option" --- -import Props from '@ionic-internal/component-api/v7/select-option/props.md'; -import Events from '@ionic-internal/component-api/v7/select-option/events.md'; -import Methods from '@ionic-internal/component-api/v7/select-option/methods.md'; -import Parts from '@ionic-internal/component-api/v7/select-option/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/select-option/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/select-option/slots.md'; +import Props from '@ionic-internal/component-api/v8/select-option/props.md'; +import Events from '@ionic-internal/component-api/v8/select-option/events.md'; +import Methods from '@ionic-internal/component-api/v8/select-option/methods.md'; +import Parts from '@ionic-internal/component-api/v8/select-option/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/select-option/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/select-option/slots.md'; ion-select-option: Option For a Select Dialog diff --git a/docs/api/select.md b/docs/api/select.md index 8dc81783b05..f6d1379cc0e 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -1,12 +1,12 @@ --- title: "ion-select" --- -import Props from '@ionic-internal/component-api/v7/select/props.md'; -import Events from '@ionic-internal/component-api/v7/select/events.md'; -import Methods from '@ionic-internal/component-api/v7/select/methods.md'; -import Parts from '@ionic-internal/component-api/v7/select/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/select/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/select/slots.md'; +import Props from '@ionic-internal/component-api/v8/select/props.md'; +import Events from '@ionic-internal/component-api/v8/select/events.md'; +import Methods from '@ionic-internal/component-api/v8/select/methods.md'; +import Parts from '@ionic-internal/component-api/v8/select/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/select/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/select/slots.md'; ion-select: Select One or Multiple Value Boxes or Placeholders @@ -38,7 +38,7 @@ Select has several options for supplying a label for the component: Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot. -import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v8/select/label-placement/index.md'; @@ -46,7 +46,7 @@ import LabelPlacement from '@site/static/usage/v7/select/label-placement/index.m While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead. -import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md'; +import LabelSlot from '@site/static/usage/v8/select/label-slot/index.md'; @@ -54,7 +54,7 @@ import LabelSlot from '@site/static/usage/v7/select/label-slot/index.md'; If no visible label is needed, developers should still supply an `aria-label` so the select is accessible to screen readers. -import NoVisibleLabel from '@site/static/usage/v7/select/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v8/select/no-visible-label/index.md'; @@ -64,7 +64,7 @@ By default, the select allows the user to select only one option. The alert inte Keyboard interactions for single selection are described in the [Keyboard Interactions](#single-selection-1) section below. -import SingleSelectionExample from '@site/static/usage/v7/select/basic/single-selection/index.md'; +import SingleSelectionExample from '@site/static/usage/v8/select/basic/single-selection/index.md'; @@ -80,7 +80,7 @@ The `action-sheet` interface is not supported with multiple selection. Keyboard interactions for multiple selection are described in the [Keyboard Interactions](#multiple-selection-1) section below. -import MultipleSelectionExample from '@site/static/usage/v7/select/basic/multiple-selection/index.md'; +import MultipleSelectionExample from '@site/static/usage/v8/select/basic/multiple-selection/index.md'; @@ -90,20 +90,20 @@ By default, select uses [ion-alert](alert.md) to open up the overlay of options ### Alert -import AlertExample from '@site/static/usage/v7/select/basic/single-selection/index.md'; +import AlertExample from '@site/static/usage/v8/select/basic/single-selection/index.md'; ### Action Sheet -import ActionSheetExample from '@site/static/usage/v7/select/interfaces/action-sheet/index.md'; +import ActionSheetExample from '@site/static/usage/v8/select/interfaces/action-sheet/index.md'; ### Popover -import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/index.md'; +import PopoverExample from '@site/static/usage/v8/select/interfaces/popover/index.md'; @@ -111,7 +111,7 @@ import PopoverExample from '@site/static/usage/v7/select/interfaces/popover/inde The main ways of handling user interaction with the select are the `ionChange`, `ionDismiss`, and `ionCancel` events. See [Events](#events) for more details on these and other events that select fires. -import RespondingToInteractionExample from '@site/static/usage/v7/select/basic/responding-to-interaction/index.md'; +import RespondingToInteractionExample from '@site/static/usage/v8/select/basic/responding-to-interaction/index.md'; @@ -123,13 +123,13 @@ By default, the select uses object equality (`===`) to determine if an option is ### Using compareWith -import UsingCompareWithExample from '@site/static/usage/v7/select/objects-as-values/using-comparewith/index.md'; +import UsingCompareWithExample from '@site/static/usage/v8/select/objects-as-values/using-comparewith/index.md'; ### Object Values and Multiple Selection -import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/select/objects-as-values/multiple-selection/index.md'; +import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v8/select/objects-as-values/multiple-selection/index.md'; @@ -137,7 +137,7 @@ import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v7/selec Developers can use the `justify` property to control how the label and control are packed on a line. -import JustifyExample from '@site/static/usage/v7/select/justify/index.md'; +import JustifyExample from '@site/static/usage/v8/select/justify/index.md'; @@ -147,7 +147,7 @@ Material Design offers filled styles for a select. The `fill` property on the se Since the `fill` styles visually defines the select container, selects that use `fill` should not be used in `ion-item`. -import FillExample from '@site/static/usage/v7/select/fill/index.md'; +import FillExample from '@site/static/usage/v8/select/fill/index.md'; @@ -157,7 +157,7 @@ The alert supports two buttons: `Cancel` and `OK`. Each button's text can be cus The `action-sheet` and `popover` interfaces do not have an `OK` button, clicking on any of the options will automatically close the overlay and select that value. The `popover` interface does not have a `Cancel` button, clicking on the backdrop will close the overlay. -import ButtonTextExample from '@site/static/usage/v7/select/customization/button-text/index.md'; +import ButtonTextExample from '@site/static/usage/v8/select/customization/button-text/index.md'; @@ -169,7 +169,7 @@ See the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), an Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface. -import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/interface-options/index.md'; +import InterfaceOptionsExample from '@site/static/usage/v8/select/customization/interface-options/index.md'; @@ -183,7 +183,7 @@ As mentioned, the `ion-select` element consists only of the value(s), or placeho Alternatively, depending on the [browser support](https://caniuse.com/#feat=mdn-css_selectors_part) needed, CSS shadow parts can be used to style the select. Notice that by using `::part`, any CSS property on the element can be targeted. -import StylingSelectExample from '@site/static/usage/v7/select/customization/styling-select/index.md'; +import StylingSelectExample from '@site/static/usage/v8/select/customization/styling-select/index.md'; @@ -201,7 +201,7 @@ However, the Select Option does set a class for easier styling and allows for th The icon that displays next to the select text can be set to any [Ionicon](https://ionic.io/ionicons) using the `toggleIcon` and/or `expandedIcon` properties. -import CustomToggleIconsExample from '@site/static/usage/v7/select/customization/custom-toggle-icons/index.md'; +import CustomToggleIconsExample from '@site/static/usage/v8/select/customization/custom-toggle-icons/index.md'; @@ -211,7 +211,7 @@ By default, when the select is open, the toggle icon will automatically rotate o The below example also uses a [custom `toggleIcon`](#custom-toggle-icons) to better demonstrate the flip behavior on `ios`, since the default icon is vertically symmetrical. -import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/icon-flip-behavior/index.md'; +import IconFlipBehaviorExample from '@site/static/usage/v8/select/customization/icon-flip-behavior/index.md'; @@ -219,7 +219,7 @@ import IconFlipBehaviorExample from '@site/static/usage/v7/select/customization/ Typeahead or autocomplete functionality can be built using existing Ionic components. We recommend using an `ion-modal` to make the best use of the available screen space. -import TypeaheadExample from '@site/static/usage/v7/select/typeahead/index.md'; +import TypeaheadExample from '@site/static/usage/v8/select/typeahead/index.md'; @@ -258,7 +258,7 @@ Using the modern syntax involves two steps: 1. Remove `ion-label` and use the `label` property on `ion-select` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-select`. 2. Move any usage of `fill` and `shape` from `ion-item` on to `ion-select`. -import Migration from '@site/static/usage/v7/select/migration/index.md'; +import Migration from '@site/static/usage/v8/select/migration/index.md'; diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md index fe915aaee67..83459e6a6d1 100644 --- a/docs/api/skeleton-text.md +++ b/docs/api/skeleton-text.md @@ -1,12 +1,12 @@ --- title: "ion-skeleton-text" --- -import Props from '@ionic-internal/component-api/v7/skeleton-text/props.md'; -import Events from '@ionic-internal/component-api/v7/skeleton-text/events.md'; -import Methods from '@ionic-internal/component-api/v7/skeleton-text/methods.md'; -import Parts from '@ionic-internal/component-api/v7/skeleton-text/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/skeleton-text/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/skeleton-text/slots.md'; +import Props from '@ionic-internal/component-api/v8/skeleton-text/props.md'; +import Events from '@ionic-internal/component-api/v8/skeleton-text/events.md'; +import Methods from '@ionic-internal/component-api/v8/skeleton-text/methods.md'; +import Parts from '@ionic-internal/component-api/v8/skeleton-text/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/skeleton-text/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/skeleton-text/slots.md'; ion-skeleton-text: Skeleton Loading Placeholder for Text @@ -23,7 +23,7 @@ Skeleton Text is a component for rendering placeholder content. The element will ## Basic Usage -import Basic from '@site/static/usage/v7/skeleton-text/basic/index.md'; +import Basic from '@site/static/usage/v8/skeleton-text/basic/index.md'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v7/skeleton-text/basic/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/skeleton-text/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/skeleton-text/theming/css-properties/index.md'; diff --git a/docs/api/spinner.md b/docs/api/spinner.md index bd20c0beacd..2bfbdee2d31 100644 --- a/docs/api/spinner.md +++ b/docs/api/spinner.md @@ -1,12 +1,12 @@ --- title: "ion-spinner" --- -import Props from '@ionic-internal/component-api/v7/spinner/props.md'; -import Events from '@ionic-internal/component-api/v7/spinner/events.md'; -import Methods from '@ionic-internal/component-api/v7/spinner/methods.md'; -import Parts from '@ionic-internal/component-api/v7/spinner/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/spinner/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/spinner/slots.md'; +import Props from '@ionic-internal/component-api/v8/spinner/props.md'; +import Events from '@ionic-internal/component-api/v8/spinner/events.md'; +import Methods from '@ionic-internal/component-api/v8/spinner/methods.md'; +import Parts from '@ionic-internal/component-api/v8/spinner/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/spinner/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/spinner/slots.md'; ion-spinner: Animated Spinner Icon Components and Properties @@ -25,7 +25,7 @@ The Spinner component provides a variety of animated SVG spinners. Spinners are The default spinner is based on the mode. When the mode is `ios` the spinner will be `"lines"`, and when the mode is `md` the spinner will be `"circular"`. If the `name` property is set, then that spinner will be used instead of the mode specific spinner. -import Basic from '@site/static/usage/v7/spinner/basic/index.md'; +import Basic from '@site/static/usage/v8/spinner/basic/index.md'; @@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v7/spinner/basic/index.md'; ### Colors -import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/spinner/theming/colors/index.md'; @@ -41,13 +41,13 @@ import Colors from '@site/static/usage/v7/spinner/theming/colors/index.md'; You may use custom CSS to style the spinner. For example, you can resize the spinner by setting the width and height. -import Resizing from '@site/static/usage/v7/spinner/theming/resizing/index.md'; +import Resizing from '@site/static/usage/v8/spinner/theming/resizing/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/spinner/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/spinner/theming/css-properties/index.md'; diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md index 12ead30904d..e69668b6892 100644 --- a/docs/api/split-pane.md +++ b/docs/api/split-pane.md @@ -2,12 +2,12 @@ title: "ion-split-pane" --- -import Props from '@ionic-internal/component-api/v7/split-pane/props.md'; -import Events from '@ionic-internal/component-api/v7/split-pane/events.md'; -import Methods from '@ionic-internal/component-api/v7/split-pane/methods.md'; -import Parts from '@ionic-internal/component-api/v7/split-pane/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/split-pane/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/split-pane/slots.md'; +import Props from '@ionic-internal/component-api/v8/split-pane/props.md'; +import Events from '@ionic-internal/component-api/v8/split-pane/events.md'; +import Methods from '@ionic-internal/component-api/v8/split-pane/methods.md'; +import Parts from '@ionic-internal/component-api/v8/split-pane/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/split-pane/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/split-pane/slots.md'; ion-split-pane: Split Plane for Menus and Multi-View Layouts @@ -29,7 +29,7 @@ If the device's screen width is below a certain size, the split pane will collap This demo sets the `when` property to `'xs'` so the split pane always shows up. Your Ionic application does not need this if you want the split pane to collapse on smaller viewports. See [Setting Breakpoints](#setting-breakpoints) for more information. ::: -import Basic from '@site/static/usage/v7/split-pane/basic/index.md'; +import Basic from '@site/static/usage/v8/split-pane/basic/index.md'; @@ -58,7 +58,7 @@ By default, the split pane will expand when the screen is larger than 992px. To ### CSS Custom Properties -import CSSProperties from '@site/static/usage/v7/split-pane/theming/css-properties/index.md'; +import CSSProperties from '@site/static/usage/v8/split-pane/theming/css-properties/index.md'; diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md index 45efd40d033..4c257364f60 100644 --- a/docs/api/tab-bar.md +++ b/docs/api/tab-bar.md @@ -4,12 +4,12 @@ title: "ion-tab-bar" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v7/tab-bar/props.md'; -import Events from '@ionic-internal/component-api/v7/tab-bar/events.md'; -import Methods from '@ionic-internal/component-api/v7/tab-bar/methods.md'; -import Parts from '@ionic-internal/component-api/v7/tab-bar/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/tab-bar/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/tab-bar/slots.md'; +import Props from '@ionic-internal/component-api/v8/tab-bar/props.md'; +import Events from '@ionic-internal/component-api/v8/tab-bar/events.md'; +import Methods from '@ionic-internal/component-api/v8/tab-bar/methods.md'; +import Parts from '@ionic-internal/component-api/v8/tab-bar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/tab-bar/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/tab-bar/slots.md'; ion-tab-bar: Tab Bar Component with CSS Custom Properties diff --git a/docs/api/tab-button.md b/docs/api/tab-button.md index 959d50f88c4..c67af33ef69 100644 --- a/docs/api/tab-button.md +++ b/docs/api/tab-button.md @@ -4,12 +4,12 @@ title: "ion-tab-button" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v7/tab-button/props.md'; -import Events from '@ionic-internal/component-api/v7/tab-button/events.md'; -import Methods from '@ionic-internal/component-api/v7/tab-button/methods.md'; -import Parts from '@ionic-internal/component-api/v7/tab-button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/tab-button/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/tab-button/slots.md'; +import Props from '@ionic-internal/component-api/v8/tab-button/props.md'; +import Events from '@ionic-internal/component-api/v8/tab-button/events.md'; +import Methods from '@ionic-internal/component-api/v8/tab-button/methods.md'; +import Parts from '@ionic-internal/component-api/v8/tab-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/tab-button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/tab-button/slots.md'; diff --git a/docs/api/tab.md b/docs/api/tab.md index e2d34f7ffbd..84b829542bf 100644 --- a/docs/api/tab.md +++ b/docs/api/tab.md @@ -2,12 +2,12 @@ title: "ion-tab" --- -import Props from '@ionic-internal/component-api/v7/tab/props.md'; -import Events from '@ionic-internal/component-api/v7/tab/events.md'; -import Methods from '@ionic-internal/component-api/v7/tab/methods.md'; -import Parts from '@ionic-internal/component-api/v7/tab/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/tab/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/tab/slots.md'; +import Props from '@ionic-internal/component-api/v8/tab/props.md'; +import Events from '@ionic-internal/component-api/v8/tab/events.md'; +import Methods from '@ionic-internal/component-api/v8/tab/methods.md'; +import Parts from '@ionic-internal/component-api/v8/tab/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/tab/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/tab/slots.md'; ion-tab: Ionic Framework Application Component diff --git a/docs/api/tabs.md b/docs/api/tabs.md index f6733317500..84bda763b3e 100644 --- a/docs/api/tabs.md +++ b/docs/api/tabs.md @@ -1,12 +1,12 @@ --- title: "ion-tabs" --- -import Props from '@ionic-internal/component-api/v7/tabs/props.md'; -import Events from '@ionic-internal/component-api/v7/tabs/events.md'; -import Methods from '@ionic-internal/component-api/v7/tabs/methods.md'; -import Parts from '@ionic-internal/component-api/v7/tabs/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/tabs/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/tabs/slots.md'; +import Props from '@ionic-internal/component-api/v8/tabs/props.md'; +import Events from '@ionic-internal/component-api/v8/tabs/events.md'; +import Methods from '@ionic-internal/component-api/v8/tabs/methods.md'; +import Parts from '@ionic-internal/component-api/v8/tabs/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/tabs/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/tabs/slots.md'; ion-tabs: Tab-Based Component for App Top-Level Navigation @@ -36,7 +36,7 @@ Using `ion-tabs` within Angular, React or Vue requires the use of the `ion-route Tabs can be used with the Ionic router to implement tab-based navigation. The tab bar and active tab will automatically resolve based on the url. This is the most common pattern for tabs navigation. -import Router from '@site/static/usage/v7/tabs/router/index.md'; +import Router from '@site/static/usage/v8/tabs/router/index.md'; diff --git a/docs/api/text.md b/docs/api/text.md index 30f03bd454f..1d4ae4f44a5 100644 --- a/docs/api/text.md +++ b/docs/api/text.md @@ -1,12 +1,12 @@ --- title: "ion-text" --- -import Props from '@ionic-internal/component-api/v7/text/props.md'; -import Events from '@ionic-internal/component-api/v7/text/events.md'; -import Methods from '@ionic-internal/component-api/v7/text/methods.md'; -import Parts from '@ionic-internal/component-api/v7/text/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/text/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/text/slots.md'; +import Props from '@ionic-internal/component-api/v8/text/props.md'; +import Events from '@ionic-internal/component-api/v8/text/events.md'; +import Methods from '@ionic-internal/component-api/v8/text/methods.md'; +import Parts from '@ionic-internal/component-api/v8/text/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/text/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/text/slots.md'; ion-text: Ionic App Component to Style or Change Text Color @@ -21,7 +21,7 @@ The text component is a simple component that can be used to style the text colo ## Basic Usage -import Basic from '@site/static/usage/v7/text/basic/index.md'; +import Basic from '@site/static/usage/v8/text/basic/index.md'; diff --git a/docs/api/textarea.md b/docs/api/textarea.md index 25c3328f4d0..262c9fcaa56 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.md @@ -1,12 +1,12 @@ --- title: "ion-textarea" --- -import Props from '@ionic-internal/component-api/v7/textarea/props.md'; -import Events from '@ionic-internal/component-api/v7/textarea/events.md'; -import Methods from '@ionic-internal/component-api/v7/textarea/methods.md'; -import Parts from '@ionic-internal/component-api/v7/textarea/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/textarea/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/textarea/slots.md'; +import Props from '@ionic-internal/component-api/v8/textarea/props.md'; +import Events from '@ionic-internal/component-api/v8/textarea/events.md'; +import Methods from '@ionic-internal/component-api/v8/textarea/methods.md'; +import Parts from '@ionic-internal/component-api/v8/textarea/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/textarea/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/textarea/slots.md'; Ionic Textarea Component and CSS Properties for Multi-Line Input @@ -25,7 +25,7 @@ The textarea component accepts the [native textarea attributes](https://develope ## Basic Usage -import BasicPlayground from '@site/static/usage/v7/textarea/basic/index.md'; +import BasicPlayground from '@site/static/usage/v8/textarea/basic/index.md'; @@ -41,7 +41,7 @@ Labels should be used to describe the textarea. They can be used visually, and t Labels will take up the width of their content by default. Developers can use the `labelPlacement` property to control how the label is placed relative to the control. -import LabelPlacement from '@site/static/usage/v7/textarea/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v8/textarea/label-placement/index.md'; @@ -51,7 +51,7 @@ While plaintext labels should be passed in via the `label` property, if custom H Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior. -import LabelSlot from '@site/static/usage/v7/textarea/label-slot/index.md'; +import LabelSlot from '@site/static/usage/v8/textarea/label-slot/index.md'; @@ -59,7 +59,7 @@ import LabelSlot from '@site/static/usage/v7/textarea/label-slot/index.md'; If no visible label is needed, developers should still supply an `aria-label` so the textarea is accessible to screen readers. -import NoVisibleLabel from '@site/static/usage/v7/textarea/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v8/textarea/no-visible-label/index.md'; @@ -71,7 +71,7 @@ Since the `fill` styles visually defines the textarea container, textareas that Filled textareas can be used on iOS by setting Textarea's `mode` to `md`. -import Fill from '@site/static/usage/v7/textarea/fill/index.md'; +import Fill from '@site/static/usage/v8/textarea/fill/index.md'; @@ -81,7 +81,7 @@ Helper and error text can be used inside of a textarea with the `helperText` and In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation. -import HelperError from '@site/static/usage/v7/textarea/helper-error/index.md'; +import HelperError from '@site/static/usage/v8/textarea/helper-error/index.md'; @@ -89,7 +89,7 @@ import HelperError from '@site/static/usage/v7/textarea/helper-error/index.md'; The textarea counter is text that displays under a textarea to notify the user of how many characters have been entered out of the total that the textarea will accept. When adding counter, the default behavior is to format the value that gets displayed as `inputLength` / `maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property. -import Counter from '@site/static/usage/v7/textarea/counter/index.md'; +import Counter from '@site/static/usage/v8/textarea/counter/index.md'; @@ -97,7 +97,7 @@ import Counter from '@site/static/usage/v7/textarea/counter/index.md'; When the `autoGrow` property is set to `true`, the textarea will grow and shrink based on its contents. -import AutogrowPlayground from '@site/static/usage/v7/textarea/autogrow/index.md'; +import AutogrowPlayground from '@site/static/usage/v8/textarea/autogrow/index.md'; @@ -105,7 +105,7 @@ import AutogrowPlayground from '@site/static/usage/v7/textarea/autogrow/index.md Setting the `clearOnEdit` property to `true` will clear the textarea after it has been blurred and then typed in again. -import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/index.md'; +import ClearOnEditPlayground from '@site/static/usage/v8/textarea/clear-on-edit/index.md'; @@ -124,7 +124,7 @@ Using the modern syntax involves three steps: 2. Move textarea-specific properties from `ion-item` on to `ion-textarea`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties. 3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-textarea` instead. -import Migration from '@site/static/usage/v7/textarea/migration/index.md'; +import Migration from '@site/static/usage/v8/textarea/migration/index.md'; @@ -134,7 +134,7 @@ Ionic uses heuristics to detect if an app is using the modern textarea syntax. I ## Theming -import ThemingPlayground from '@site/static/usage/v7/textarea/theming/index.md'; +import ThemingPlayground from '@site/static/usage/v8/textarea/theming/index.md'; diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md index 2e5a7934e48..e8f146ec6e6 100644 --- a/docs/api/thumbnail.md +++ b/docs/api/thumbnail.md @@ -2,12 +2,12 @@ title: "ion-thumbnail" --- -import Props from '@ionic-internal/component-api/v7/thumbnail/props.md'; -import Events from '@ionic-internal/component-api/v7/thumbnail/events.md'; -import Methods from '@ionic-internal/component-api/v7/thumbnail/methods.md'; -import Parts from '@ionic-internal/component-api/v7/thumbnail/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/thumbnail/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/thumbnail/slots.md'; +import Props from '@ionic-internal/component-api/v8/thumbnail/props.md'; +import Events from '@ionic-internal/component-api/v8/thumbnail/events.md'; +import Methods from '@ionic-internal/component-api/v8/thumbnail/methods.md'; +import Parts from '@ionic-internal/component-api/v8/thumbnail/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/thumbnail/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/thumbnail/slots.md'; ion-thumbnail: Thumbnail App Component for Images or Icons @@ -24,13 +24,13 @@ Thumbnails can be used by themselves or inside of any element. If placed inside ## Basic Usage -import Basic from '@site/static/usage/v7/thumbnail/basic/index.md'; +import Basic from '@site/static/usage/v8/thumbnail/basic/index.md'; ## Item Thumbnails -import Item from '@site/static/usage/v7/thumbnail/item/index.md'; +import Item from '@site/static/usage/v8/thumbnail/item/index.md'; @@ -38,7 +38,7 @@ import Item from '@site/static/usage/v7/thumbnail/item/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/thumbnail/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/thumbnail/theming/css-properties/index.md'; diff --git a/docs/api/title.md b/docs/api/title.md index bde08e3b21f..2fa185780f2 100644 --- a/docs/api/title.md +++ b/docs/api/title.md @@ -1,12 +1,12 @@ --- title: "ion-title" --- -import Props from '@ionic-internal/component-api/v7/title/props.md'; -import Events from '@ionic-internal/component-api/v7/title/events.md'; -import Methods from '@ionic-internal/component-api/v7/title/methods.md'; -import Parts from '@ionic-internal/component-api/v7/title/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/title/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/title/slots.md'; +import Props from '@ionic-internal/component-api/v8/title/props.md'; +import Events from '@ionic-internal/component-api/v8/title/events.md'; +import Methods from '@ionic-internal/component-api/v8/title/methods.md'; +import Parts from '@ionic-internal/component-api/v8/title/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/title/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/title/slots.md'; ion-title: Ionic Framework App Title Component for Toolbars @@ -22,7 +22,7 @@ Title is a text component that sets the title for a [toolbar](./toolbar). It can ## Basic -import Basic from '@site/static/usage/v7/title/basic/index.md'; +import Basic from '@site/static/usage/v8/title/basic/index.md'; @@ -36,7 +36,7 @@ This feature is only available for iOS. ::: -import CollapsibleLargeTitle from '@site/static/usage/v7/title/collapsible-large-title/basic/index.md'; +import CollapsibleLargeTitle from '@site/static/usage/v8/title/collapsible-large-title/basic/index.md'; @@ -45,7 +45,7 @@ import CollapsibleLargeTitle from '@site/static/usage/v7/title/collapsible-large The [buttons](./buttons.md) component can be used with the [`collapse`](./buttons.md#collapse) property to additionally display in the header as the toolbar is collapsed. -import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md'; +import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.md'; @@ -61,7 +61,7 @@ When styling the text color of the large title, you should target the large titl ### CSS Custom Properties -import CSSCustomProperties from '@site/static/usage/v7/title/theming/css-properties/index.md'; +import CSSCustomProperties from '@site/static/usage/v8/title/theming/css-properties/index.md'; diff --git a/docs/api/toast.md b/docs/api/toast.md index 3ecf502a043..23b4ddb5c9f 100644 --- a/docs/api/toast.md +++ b/docs/api/toast.md @@ -4,12 +4,12 @@ title: "ion-toast" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v7/toast/props.md'; -import Events from '@ionic-internal/component-api/v7/toast/events.md'; -import Methods from '@ionic-internal/component-api/v7/toast/methods.md'; -import Parts from '@ionic-internal/component-api/v7/toast/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/toast/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/toast/slots.md'; +import Props from '@ionic-internal/component-api/v8/toast/props.md'; +import Events from '@ionic-internal/component-api/v8/toast/events.md'; +import Methods from '@ionic-internal/component-api/v8/toast/methods.md'; +import Parts from '@ionic-internal/component-api/v8/toast/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/toast/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/toast/slots.md'; ion-toast: A Dismissible App Notification Alert Component @@ -26,7 +26,7 @@ A Toast is a subtle notification commonly used in modern applications. It can be `ion-toast` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the toast. -import InlineToastTriggerExample from '@site/static/usage/v7/toast/inline/basic/index.md'; +import InlineToastTriggerExample from '@site/static/usage/v8/toast/inline/basic/index.md'; @@ -36,13 +36,13 @@ The `isOpen` property on `ion-toast` allows developers to control the presentati `isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the toast is dismissed. Developers should listen for the `ionToastDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-toast` from being tightly coupled with the state of the application. With a one way data binding, the toast only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the toast needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. -import InlineToastIsOpenExample from '@site/static/usage/v7/toast/inline/is-open/index.md'; +import InlineToastIsOpenExample from '@site/static/usage/v8/toast/inline/is-open/index.md'; ## Controller Toasts -import ControllerExample from '@site/static/usage/v7/toast/presenting/controller/index.md'; +import ControllerExample from '@site/static/usage/v8/toast/presenting/controller/index.md'; @@ -56,7 +56,7 @@ Pressing the hardware back button does not dismiss toasts since they are not sup The following example demonstrates how to use the `buttons` property to add a button that automatically dismisses the toast when clicked, as well as how to collect the `role` of the dismiss event. -import ButtonsPlayground from '@site/static/usage/v7/toast/buttons/index.md'; +import ButtonsPlayground from '@site/static/usage/v8/toast/buttons/index.md'; @@ -68,7 +68,7 @@ Toasts can be positioned at the top, bottom or middle of the viewport. The posit If a toast is presented alongside navigation elements such as a header, footer, or [FAB](./fab.md), the toast may overlap these elements by default. This can be fixed using the `positionAnchor` property, which takes either an element reference or an ID. The toast will be positioned relative to the chosen element, appearing below it when using `position="top"` or above it when using `position="bottom"`. When using `position="middle"`, the `positionAnchor` property is ignored. -import PositionAnchor from '@site/static/usage/v7/toast/position-anchor/index.md'; +import PositionAnchor from '@site/static/usage/v8/toast/position-anchor/index.md'; @@ -76,7 +76,7 @@ import PositionAnchor from '@site/static/usage/v7/toast/position-anchor/index.md Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both. -import StackedPlayground from '@site/static/usage/v7/toast/layout/index.md'; +import StackedPlayground from '@site/static/usage/v8/toast/layout/index.md'; @@ -84,13 +84,13 @@ import StackedPlayground from '@site/static/usage/v7/toast/layout/index.md'; An icon can be added next to the content inside of the toast. In general, icons in toasts should be used to add additional style or context, not to grab the user's attention or elevate the priority of the toast. If you wish to convey a higher priority message to the user or guarantee a response, we recommend using an [Alert](alert.md) instead. -import IconPlayground from '@site/static/usage/v7/toast/icon/index.md'; +import IconPlayground from '@site/static/usage/v8/toast/icon/index.md'; ## Theming -import ThemingPlayground from '@site/static/usage/v7/toast/theming/index.md'; +import ThemingPlayground from '@site/static/usage/v8/toast/theming/index.md'; diff --git a/docs/api/toggle.md b/docs/api/toggle.md index 0af93c616ea..449807a39bf 100644 --- a/docs/api/toggle.md +++ b/docs/api/toggle.md @@ -1,12 +1,12 @@ --- title: "ion-toggle" --- -import Props from '@ionic-internal/component-api/v7/toggle/props.md'; -import Events from '@ionic-internal/component-api/v7/toggle/events.md'; -import Methods from '@ionic-internal/component-api/v7/toggle/methods.md'; -import Parts from '@ionic-internal/component-api/v7/toggle/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/toggle/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/toggle/slots.md'; +import Props from '@ionic-internal/component-api/v8/toggle/props.md'; +import Events from '@ionic-internal/component-api/v8/toggle/events.md'; +import Methods from '@ionic-internal/component-api/v8/toggle/methods.md'; +import Parts from '@ionic-internal/component-api/v8/toggle/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/toggle/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/toggle/slots.md'; ion-toggle: Custom Toggle Button for Ionic Applications @@ -22,7 +22,7 @@ Toggles are switches that change the state of a single option. They can be switc ## Basic Usage -import Basic from '@site/static/usage/v7/toggle/basic/index.md'; +import Basic from '@site/static/usage/v8/toggle/basic/index.md'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v7/toggle/basic/index.md'; Toggles can enable on/off labels by setting the `enableOnOffLabels` property. This is important for accessibility as it makes it easier to differentiate between a checked and unchecked toggle. -import OnOff from '@site/static/usage/v7/toggle/on-off/index.md'; +import OnOff from '@site/static/usage/v8/toggle/on-off/index.md'; @@ -40,7 +40,7 @@ import OnOff from '@site/static/usage/v7/toggle/on-off/index.md'; Toggles can also be used in a list view by using the [Item](./item) and [List](./list) components. -import List from '@site/static/usage/v7/toggle/list/index.md'; +import List from '@site/static/usage/v8/toggle/list/index.md'; @@ -49,7 +49,7 @@ import List from '@site/static/usage/v7/toggle/list/index.md'; Developers can use the `labelPlacement` property to control how the label is placed relative to the control. -import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v8/toggle/label-placement/index.md'; @@ -61,7 +61,7 @@ Developers can use the `alignment` property to control how the label and control Stacked toggles 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/toggle/alignment/index.md'; +import Alignment from '@site/static/usage/v8/toggle/alignment/index.md'; @@ -69,7 +69,7 @@ import Alignment from '@site/static/usage/v7/toggle/alignment/index.md'; Developers can use the `justify` property to control how the label and control are packed on a line. -import Justify from '@site/static/usage/v7/toggle/justify/index.md'; +import Justify from '@site/static/usage/v8/toggle/justify/index.md'; @@ -77,7 +77,7 @@ import Justify from '@site/static/usage/v7/toggle/justify/index.md'; ### Colors -import Colors from '@site/static/usage/v7/toggle/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/toggle/theming/colors/index.md'; @@ -85,7 +85,7 @@ import Colors from '@site/static/usage/v7/toggle/theming/colors/index.md'; CSS custom properties can be combined with standard CSS to target different parts of a toggle. We can modify the `width` and `height` of the toggle directly to change the size of the track, while using the `--handle-width` and `--handle-height` custom properties to customize the handle size. -import CSSProps from '@site/static/usage/v7/toggle/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/toggle/theming/css-properties/index.md'; @@ -93,7 +93,7 @@ import CSSProps from '@site/static/usage/v7/toggle/theming/css-properties/index. We can further customize toggle by targeting specific shadow parts that are exposed. Any CSS property on these parts can be styled and they can also be combined with CSS custom properties. -import CSSParts from '@site/static/usage/v7/toggle/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v8/toggle/theming/css-shadow-parts/index.md'; @@ -107,7 +107,7 @@ While developers can continue using the legacy syntax, we recommend migrating as Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-toggle`. The placement of the label can be configured using the `labelPlacement` property on `ion-toggle`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-toggle`. -import Migration from '@site/static/usage/v7/toggle/migration/index.md'; +import Migration from '@site/static/usage/v8/toggle/migration/index.md'; diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md index 03cb543e0b8..96095ace0ad 100644 --- a/docs/api/toolbar.md +++ b/docs/api/toolbar.md @@ -1,12 +1,12 @@ --- title: "ion-toolbar" --- -import Props from '@ionic-internal/component-api/v7/toolbar/props.md'; -import Events from '@ionic-internal/component-api/v7/toolbar/events.md'; -import Methods from '@ionic-internal/component-api/v7/toolbar/methods.md'; -import Parts from '@ionic-internal/component-api/v7/toolbar/parts.md'; -import CustomProps from '@ionic-internal/component-api/v7/toolbar/custom-props.md'; -import Slots from '@ionic-internal/component-api/v7/toolbar/slots.md'; +import Props from '@ionic-internal/component-api/v8/toolbar/props.md'; +import Events from '@ionic-internal/component-api/v8/toolbar/events.md'; +import Methods from '@ionic-internal/component-api/v8/toolbar/methods.md'; +import Parts from '@ionic-internal/component-api/v8/toolbar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/toolbar/custom-props.md'; +import Slots from '@ionic-internal/component-api/v8/toolbar/slots.md'; ion-toolbar: Customize App Menu Toolbar Buttons and Icons @@ -27,7 +27,7 @@ Toolbars can contain several different components including titles, buttons, ico It is recommended to put a toolbar inside of a [header](./header) or [footer](./footer) for proper positioning. When a toolbar is placed in a header it will appear fixed at the top of the content. When it is placed in a footer it will appear fixed at the bottom. Fullscreen content will scroll behind a toolbar in a header or footer. A [title](./title) component can be used to display text inside of the toolbar. -import Basic from '@site/static/usage/v7/toolbar/basic/index.md'; +import Basic from '@site/static/usage/v8/toolbar/basic/index.md'; @@ -38,7 +38,7 @@ Buttons placed in a toolbar should be placed inside of the [buttons](./buttons) The buttons component can wrap a standard [button](./button), [back button](./back-button), [menu button](./menu-button), or several of any of them. A button in a toolbar is styled to be clear by default, but this can be changed using the [`fill`](./button#fill) property on the button. The properties included on back button and menu button in this example are for display purposes; see their respective documentation for proper usage. -import Buttons from '@site/static/usage/v7/toolbar/buttons/index.md'; +import Buttons from '@site/static/usage/v8/toolbar/buttons/index.md'; @@ -47,7 +47,7 @@ import Buttons from '@site/static/usage/v7/toolbar/buttons/index.md'; A [searchbar](./searchbar) can be placed inside of a toolbar to search through the content. It should be the only child component of the toolbar, and will take up the full width and height. -import Searchbars from '@site/static/usage/v7/toolbar/searchbars/index.md'; +import Searchbars from '@site/static/usage/v8/toolbar/searchbars/index.md'; @@ -56,7 +56,7 @@ import Searchbars from '@site/static/usage/v7/toolbar/searchbars/index.md'; [Segments](./segment) are generally used in toolbars to toggle between two different content views on the same page. They can be placed in a toolbar with other components, such as buttons, but should not be placed alongside a title. -import Segments from '@site/static/usage/v7/toolbar/segments/index.md'; +import Segments from '@site/static/usage/v8/toolbar/segments/index.md'; @@ -65,7 +65,7 @@ import Segments from '@site/static/usage/v7/toolbar/segments/index.md'; A [progress bar](./progress-bar) is used as a loading indicator to show an ongoing process in an app. Progress bars can be placed with any other components inside of a toolbar as they will align with the bottom of the toolbar. -import ProgressBars from '@site/static/usage/v7/toolbar/progress-bars/index.md'; +import ProgressBars from '@site/static/usage/v8/toolbar/progress-bars/index.md'; @@ -74,13 +74,13 @@ import ProgressBars from '@site/static/usage/v7/toolbar/progress-bars/index.md'; ### Colors -import Colors from '@site/static/usage/v7/toolbar/theming/colors/index.md'; +import Colors from '@site/static/usage/v8/toolbar/theming/colors/index.md'; ### CSS Custom Properties -import CSSProps from '@site/static/usage/v7/toolbar/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v8/toolbar/theming/css-properties/index.md'; diff --git a/docusaurus.config.js b/docusaurus.config.js index 301d9525760..1b39b7b70b6 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -53,9 +53,14 @@ module.exports = { return `https://github.com/ionic-team/ionic-docs/edit/main/${versionDocsDirPath}/${docPath}`; }, exclude: ['README.md'], - lastVersion: 'current', + lastVersion: 'v7', versions: { current: { + label: 'v8 (beta)', + banner: 'unreleased', + path: 'v8', + }, + v7: { label: 'v7', }, }, diff --git a/scripts/cli.js b/scripts/cli.js index 6bb3ad18fea..5a7e39636fd 100644 --- a/scripts/cli.js +++ b/scripts/cli.js @@ -29,6 +29,7 @@ function writePage(page) { const path = `cli/commands/${commandToKebab(page.name)}.md`; fs.writeFileSync(`docs/${path}`, data); fs.writeFileSync(`versioned_docs/version-v6/${path}`, data); + fs.writeFileSync(`versioned_docs/version-v7/${path}`, data); } function renderFrontmatter({ name, groups }) { diff --git a/scripts/native.js b/scripts/native.js index f9862c9f8d3..242c14d7791 100644 --- a/scripts/native.js +++ b/scripts/native.js @@ -39,6 +39,7 @@ async function buildPluginApiDocs(pluginId) { fs.writeFileSync(`docs/native/${fileName}`, apiContent); fs.writeFileSync(`versioned_docs/version-v6/native/${fileName}`, apiContent); + fs.writeFileSync(`versioned_docs/version-v7/native/${fileName}`, apiContent); } function createApiPage(pluginId, readme, pkgJson) { diff --git a/static/usage/v8/accordion/accessibility/animations/angular.md b/static/usage/v8/accordion/accessibility/animations/angular.md new file mode 100644 index 00000000000..ced314d2657 --- /dev/null +++ b/static/usage/v8/accordion/accessibility/animations/angular.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/accessibility/animations/demo.html b/static/usage/v8/accordion/accessibility/animations/demo.html new file mode 100644 index 00000000000..f673b7d612c --- /dev/null +++ b/static/usage/v8/accordion/accessibility/animations/demo.html @@ -0,0 +1,41 @@ + + + + + + Button + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v8/accordion/accessibility/animations/index.md b/static/usage/v8/accordion/accessibility/animations/index.md new file mode 100644 index 00000000000..867276f88f2 --- /dev/null +++ b/static/usage/v8/accordion/accessibility/animations/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/accordion/accessibility/animations/javascript.md b/static/usage/v8/accordion/accessibility/animations/javascript.md new file mode 100644 index 00000000000..f89ebdea048 --- /dev/null +++ b/static/usage/v8/accordion/accessibility/animations/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/accessibility/animations/react.md b/static/usage/v8/accordion/accessibility/animations/react.md new file mode 100644 index 00000000000..0bf5878865b --- /dev/null +++ b/static/usage/v8/accordion/accessibility/animations/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/accessibility/animations/vue.md b/static/usage/v8/accordion/accessibility/animations/vue.md new file mode 100644 index 00000000000..05847edab7b --- /dev/null +++ b/static/usage/v8/accordion/accessibility/animations/vue.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/static/usage/v8/accordion/basic/angular.md b/static/usage/v8/accordion/basic/angular.md new file mode 100644 index 00000000000..f9f7c8639a0 --- /dev/null +++ b/static/usage/v8/accordion/basic/angular.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/basic/demo.html b/static/usage/v8/accordion/basic/demo.html new file mode 100644 index 00000000000..43711d45154 --- /dev/null +++ b/static/usage/v8/accordion/basic/demo.html @@ -0,0 +1,41 @@ + + + + + + Accordion + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v8/accordion/basic/index.md b/static/usage/v8/accordion/basic/index.md new file mode 100644 index 00000000000..36bb76371e2 --- /dev/null +++ b/static/usage/v8/accordion/basic/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/accordion/basic/javascript.md b/static/usage/v8/accordion/basic/javascript.md new file mode 100644 index 00000000000..f9f7c8639a0 --- /dev/null +++ b/static/usage/v8/accordion/basic/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/basic/react.md b/static/usage/v8/accordion/basic/react.md new file mode 100644 index 00000000000..122fc747919 --- /dev/null +++ b/static/usage/v8/accordion/basic/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/basic/vue.md b/static/usage/v8/accordion/basic/vue.md new file mode 100644 index 00000000000..8ac8c6bbeec --- /dev/null +++ b/static/usage/v8/accordion/basic/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_css.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_css.md new file mode 100644 index 00000000000..93bc6b09b7f --- /dev/null +++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_css.md @@ -0,0 +1,24 @@ +```css +ion-accordion { + margin: 0 auto; +} + +ion-accordion.accordion-expanding, +ion-accordion.accordion-expanded { + width: calc(100% - 32px); + + margin: 16px auto; +} + +ion-accordion.accordion-collapsing ion-item[slot='header'], +ion-accordion.accordion-collapsed ion-item[slot='header'] { + --background: var(--ion-color-light); + --color: var(--ion-color-light-contrast); +} + +ion-accordion.accordion-expanding ion-item[slot='header'], +ion-accordion.accordion-expanded ion-item[slot='header'] { + --background: var(--ion-color-primary); + --color: var(--ion-color-primary-contrast); +} +``` diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_html.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_html.md new file mode 100644 index 00000000000..3b3c86763c1 --- /dev/null +++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md new file mode 100644 index 00000000000..4db53a836a9 --- /dev/null +++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md @@ -0,0 +1,10 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/demo.html b/static/usage/v8/accordion/customization/advanced-expansion-styles/demo.html new file mode 100644 index 00000000000..edb47cd351c --- /dev/null +++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/demo.html @@ -0,0 +1,74 @@ + + + + + + Accordion + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md new file mode 100644 index 00000000000..e6d3f91d001 --- /dev/null +++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/javascript.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/javascript.md new file mode 100644 index 00000000000..5076fe510e5 --- /dev/null +++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/javascript.md @@ -0,0 +1,47 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + + +``` diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_css.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_css.md new file mode 100644 index 00000000000..93bc6b09b7f --- /dev/null +++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_css.md @@ -0,0 +1,24 @@ +```css +ion-accordion { + margin: 0 auto; +} + +ion-accordion.accordion-expanding, +ion-accordion.accordion-expanded { + width: calc(100% - 32px); + + margin: 16px auto; +} + +ion-accordion.accordion-collapsing ion-item[slot='header'], +ion-accordion.accordion-collapsed ion-item[slot='header'] { + --background: var(--ion-color-light); + --color: var(--ion-color-light-contrast); +} + +ion-accordion.accordion-expanding ion-item[slot='header'], +ion-accordion.accordion-expanded ion-item[slot='header'] { + --background: var(--ion-color-primary); + --color: var(--ion-color-primary-contrast); +} +``` diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_tsx.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_tsx.md new file mode 100644 index 00000000000..01cd873445d --- /dev/null +++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/react/main_tsx.md @@ -0,0 +1,38 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/customization/advanced-expansion-styles/vue.md b/static/usage/v8/accordion/customization/advanced-expansion-styles/vue.md new file mode 100644 index 00000000000..5e8e8da6925 --- /dev/null +++ b/static/usage/v8/accordion/customization/advanced-expansion-styles/vue.md @@ -0,0 +1,63 @@ +```html + + + + + +``` diff --git a/static/usage/v8/accordion/customization/expansion-styles/angular.md b/static/usage/v8/accordion/customization/expansion-styles/angular.md new file mode 100644 index 00000000000..1be81366c58 --- /dev/null +++ b/static/usage/v8/accordion/customization/expansion-styles/angular.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/customization/expansion-styles/demo.html b/static/usage/v8/accordion/customization/expansion-styles/demo.html new file mode 100644 index 00000000000..ab718655e37 --- /dev/null +++ b/static/usage/v8/accordion/customization/expansion-styles/demo.html @@ -0,0 +1,41 @@ + + + + + + Accordion + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v8/accordion/customization/expansion-styles/index.md b/static/usage/v8/accordion/customization/expansion-styles/index.md new file mode 100644 index 00000000000..cf8e04356b0 --- /dev/null +++ b/static/usage/v8/accordion/customization/expansion-styles/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/accordion/customization/expansion-styles/javascript.md b/static/usage/v8/accordion/customization/expansion-styles/javascript.md new file mode 100644 index 00000000000..1be81366c58 --- /dev/null +++ b/static/usage/v8/accordion/customization/expansion-styles/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/customization/expansion-styles/react.md b/static/usage/v8/accordion/customization/expansion-styles/react.md new file mode 100644 index 00000000000..d24cf600956 --- /dev/null +++ b/static/usage/v8/accordion/customization/expansion-styles/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/customization/expansion-styles/vue.md b/static/usage/v8/accordion/customization/expansion-styles/vue.md new file mode 100644 index 00000000000..05f22d0d2ff --- /dev/null +++ b/static/usage/v8/accordion/customization/expansion-styles/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v8/accordion/customization/icons/angular.md b/static/usage/v8/accordion/customization/icons/angular.md new file mode 100644 index 00000000000..2899aeacac6 --- /dev/null +++ b/static/usage/v8/accordion/customization/icons/angular.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/customization/icons/demo.html b/static/usage/v8/accordion/customization/icons/demo.html new file mode 100644 index 00000000000..9a0efd0b91b --- /dev/null +++ b/static/usage/v8/accordion/customization/icons/demo.html @@ -0,0 +1,41 @@ + + + + + + Accordion + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v8/accordion/customization/icons/index.md b/static/usage/v8/accordion/customization/icons/index.md new file mode 100644 index 00000000000..604cd78eb46 --- /dev/null +++ b/static/usage/v8/accordion/customization/icons/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/accordion/customization/icons/javascript.md b/static/usage/v8/accordion/customization/icons/javascript.md new file mode 100644 index 00000000000..7fd8a091cc8 --- /dev/null +++ b/static/usage/v8/accordion/customization/icons/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/customization/icons/react.md b/static/usage/v8/accordion/customization/icons/react.md new file mode 100644 index 00000000000..2b269c172ed --- /dev/null +++ b/static/usage/v8/accordion/customization/icons/react.md @@ -0,0 +1,37 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +import { caretDownCircle } from 'ionicons/icons'; + +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/customization/icons/vue.md b/static/usage/v8/accordion/customization/icons/vue.md new file mode 100644 index 00000000000..453e9963a89 --- /dev/null +++ b/static/usage/v8/accordion/customization/icons/vue.md @@ -0,0 +1,42 @@ +```html + + + +``` diff --git a/static/usage/v8/accordion/customization/theming/angular/example_component_html.md b/static/usage/v8/accordion/customization/theming/angular/example_component_html.md new file mode 100644 index 00000000000..5efdf7b71f9 --- /dev/null +++ b/static/usage/v8/accordion/customization/theming/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/customization/theming/angular/global_css.md b/static/usage/v8/accordion/customization/theming/angular/global_css.md new file mode 100644 index 00000000000..141236c6633 --- /dev/null +++ b/static/usage/v8/accordion/customization/theming/angular/global_css.md @@ -0,0 +1,23 @@ +```css +:root { + --ion-color-rose: #fecdd3; + --ion-color-rose-rgb: 254, 205, 211; + --ion-color-rose-contrast: #000000; + --ion-color-rose-contrast-rgb: 0, 0, 0; + --ion-color-rose-shade: #e0b4ba; + --ion-color-rose-tint: #fed2d7; +} + +.ion-color-rose { + --ion-color-base: var(--ion-color-rose); + --ion-color-base-rgb: var(--ion-color-rose-rgb); + --ion-color-contrast: var(--ion-color-rose-contrast); + --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); + --ion-color-shade: var(--ion-color-rose-shade); + --ion-color-tint: var(--ion-color-rose-tint); +} + +div[slot='content'] { + background: rgba(var(--ion-color-rose-rgb), 0.25); +} +``` diff --git a/static/usage/v8/accordion/customization/theming/demo.html b/static/usage/v8/accordion/customization/theming/demo.html new file mode 100644 index 00000000000..1a28d63724f --- /dev/null +++ b/static/usage/v8/accordion/customization/theming/demo.html @@ -0,0 +1,64 @@ + + + + + + Accordion + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v8/accordion/customization/theming/index.md b/static/usage/v8/accordion/customization/theming/index.md new file mode 100644 index 00000000000..5d57f883cfa --- /dev/null +++ b/static/usage/v8/accordion/customization/theming/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/accordion/customization/theming/javascript.md b/static/usage/v8/accordion/customization/theming/javascript.md new file mode 100644 index 00000000000..179bf5d51c0 --- /dev/null +++ b/static/usage/v8/accordion/customization/theming/javascript.md @@ -0,0 +1,46 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + + +``` diff --git a/static/usage/v8/accordion/customization/theming/react/main_css.md b/static/usage/v8/accordion/customization/theming/react/main_css.md new file mode 100644 index 00000000000..141236c6633 --- /dev/null +++ b/static/usage/v8/accordion/customization/theming/react/main_css.md @@ -0,0 +1,23 @@ +```css +:root { + --ion-color-rose: #fecdd3; + --ion-color-rose-rgb: 254, 205, 211; + --ion-color-rose-contrast: #000000; + --ion-color-rose-contrast-rgb: 0, 0, 0; + --ion-color-rose-shade: #e0b4ba; + --ion-color-rose-tint: #fed2d7; +} + +.ion-color-rose { + --ion-color-base: var(--ion-color-rose); + --ion-color-base-rgb: var(--ion-color-rose-rgb); + --ion-color-contrast: var(--ion-color-rose-contrast); + --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); + --ion-color-shade: var(--ion-color-rose-shade); + --ion-color-tint: var(--ion-color-rose-tint); +} + +div[slot='content'] { + background: rgba(var(--ion-color-rose-rgb), 0.25); +} +``` diff --git a/static/usage/v8/accordion/customization/theming/react/main_tsx.md b/static/usage/v8/accordion/customization/theming/react/main_tsx.md new file mode 100644 index 00000000000..ecc51a9e15b --- /dev/null +++ b/static/usage/v8/accordion/customization/theming/react/main_tsx.md @@ -0,0 +1,38 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/customization/theming/vue.md b/static/usage/v8/accordion/customization/theming/vue.md new file mode 100644 index 00000000000..c049c4b89d8 --- /dev/null +++ b/static/usage/v8/accordion/customization/theming/vue.md @@ -0,0 +1,66 @@ +```html + + + + + +``` diff --git a/static/usage/v8/accordion/disable-group/angular.md b/static/usage/v8/accordion/disable-group/angular.md new file mode 100644 index 00000000000..5c4cf3b51b3 --- /dev/null +++ b/static/usage/v8/accordion/disable-group/angular.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/disable-group/demo.html b/static/usage/v8/accordion/disable-group/demo.html new file mode 100644 index 00000000000..76ac5f87d28 --- /dev/null +++ b/static/usage/v8/accordion/disable-group/demo.html @@ -0,0 +1,41 @@ + + + + + + Button + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v8/accordion/disable-group/index.md b/static/usage/v8/accordion/disable-group/index.md new file mode 100644 index 00000000000..204508c6b3c --- /dev/null +++ b/static/usage/v8/accordion/disable-group/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/accordion/disable-group/javascript.md b/static/usage/v8/accordion/disable-group/javascript.md new file mode 100644 index 00000000000..163641a544c --- /dev/null +++ b/static/usage/v8/accordion/disable-group/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/disable-group/react.md b/static/usage/v8/accordion/disable-group/react.md new file mode 100644 index 00000000000..b2ff09b5fe4 --- /dev/null +++ b/static/usage/v8/accordion/disable-group/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/disable-group/vue.md b/static/usage/v8/accordion/disable-group/vue.md new file mode 100644 index 00000000000..6c9e3567845 --- /dev/null +++ b/static/usage/v8/accordion/disable-group/vue.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/static/usage/v8/accordion/disable/group/angular.md b/static/usage/v8/accordion/disable/group/angular.md new file mode 100644 index 00000000000..5c4cf3b51b3 --- /dev/null +++ b/static/usage/v8/accordion/disable/group/angular.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/disable/group/demo.html b/static/usage/v8/accordion/disable/group/demo.html new file mode 100644 index 00000000000..778e4488787 --- /dev/null +++ b/static/usage/v8/accordion/disable/group/demo.html @@ -0,0 +1,41 @@ + + + + + + Button + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v8/accordion/disable/group/index.md b/static/usage/v8/accordion/disable/group/index.md new file mode 100644 index 00000000000..c564a2d16bd --- /dev/null +++ b/static/usage/v8/accordion/disable/group/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/accordion/disable/group/javascript.md b/static/usage/v8/accordion/disable/group/javascript.md new file mode 100644 index 00000000000..163641a544c --- /dev/null +++ b/static/usage/v8/accordion/disable/group/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/disable/group/react.md b/static/usage/v8/accordion/disable/group/react.md new file mode 100644 index 00000000000..b2ff09b5fe4 --- /dev/null +++ b/static/usage/v8/accordion/disable/group/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/disable/group/vue.md b/static/usage/v8/accordion/disable/group/vue.md new file mode 100644 index 00000000000..6c9e3567845 --- /dev/null +++ b/static/usage/v8/accordion/disable/group/vue.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/static/usage/v8/accordion/disable/individual/angular.md b/static/usage/v8/accordion/disable/individual/angular.md new file mode 100644 index 00000000000..56ac780e987 --- /dev/null +++ b/static/usage/v8/accordion/disable/individual/angular.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion (Disabled) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/disable/individual/demo.html b/static/usage/v8/accordion/disable/individual/demo.html new file mode 100644 index 00000000000..67ee3bf4dea --- /dev/null +++ b/static/usage/v8/accordion/disable/individual/demo.html @@ -0,0 +1,41 @@ + + + + + + Accordion + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion (Disabled) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v8/accordion/disable/individual/index.md b/static/usage/v8/accordion/disable/individual/index.md new file mode 100644 index 00000000000..28172bca32b --- /dev/null +++ b/static/usage/v8/accordion/disable/individual/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/accordion/disable/individual/javascript.md b/static/usage/v8/accordion/disable/individual/javascript.md new file mode 100644 index 00000000000..df5f207512a --- /dev/null +++ b/static/usage/v8/accordion/disable/individual/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion (Disabled) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/disable/individual/react.md b/static/usage/v8/accordion/disable/individual/react.md new file mode 100644 index 00000000000..e133354999a --- /dev/null +++ b/static/usage/v8/accordion/disable/individual/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/disable/individual/vue.md b/static/usage/v8/accordion/disable/individual/vue.md new file mode 100644 index 00000000000..dc26bc3b11f --- /dev/null +++ b/static/usage/v8/accordion/disable/individual/vue.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/static/usage/v8/accordion/listen-changes/angular/example_component_html.md b/static/usage/v8/accordion/listen-changes/angular/example_component_html.md new file mode 100644 index 00000000000..d48c34dd4f4 --- /dev/null +++ b/static/usage/v8/accordion/listen-changes/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md new file mode 100644 index 00000000000..3ebbccce6f7 --- /dev/null +++ b/static/usage/v8/accordion/listen-changes/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + private values: string[] = ['first', 'second', 'third']; + + accordionGroupChange = (ev: any) => { + const collapsedItems = this.values.filter((value) => value !== ev.detail.value); + const selectedValue = ev.detail.value; + + console.log( + `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}` + ); + }; +} +``` diff --git a/static/usage/v8/accordion/listen-changes/demo.html b/static/usage/v8/accordion/listen-changes/demo.html new file mode 100644 index 00000000000..104c0bd5da3 --- /dev/null +++ b/static/usage/v8/accordion/listen-changes/demo.html @@ -0,0 +1,57 @@ + + + + + + Accordion + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + + + diff --git a/static/usage/v8/accordion/listen-changes/index.md b/static/usage/v8/accordion/listen-changes/index.md new file mode 100644 index 00000000000..ba6c8134f00 --- /dev/null +++ b/static/usage/v8/accordion/listen-changes/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/accordion/listen-changes/javascript.md b/static/usage/v8/accordion/listen-changes/javascript.md new file mode 100644 index 00000000000..e47e3311a08 --- /dev/null +++ b/static/usage/v8/accordion/listen-changes/javascript.md @@ -0,0 +1,36 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + + +``` diff --git a/static/usage/v8/accordion/listen-changes/react.md b/static/usage/v8/accordion/listen-changes/react.md new file mode 100644 index 00000000000..98b4b7fc3e2 --- /dev/null +++ b/static/usage/v8/accordion/listen-changes/react.md @@ -0,0 +1,45 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/react'; +function Example() { + const values = ['first', 'second', 'third']; + const accordionGroupChange = (ev: AccordionGroupCustomEvent) => { + const collapsedItems = values.filter((value) => value !== ev.detail.value); + const selectedValue = ev.detail.value; + + console.log( + `Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}` + ); + }; + + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/listen-changes/vue.md b/static/usage/v8/accordion/listen-changes/vue.md new file mode 100644 index 00000000000..60607870264 --- /dev/null +++ b/static/usage/v8/accordion/listen-changes/vue.md @@ -0,0 +1,53 @@ +```html + + + +``` diff --git a/static/usage/v8/accordion/multiple/angular.md b/static/usage/v8/accordion/multiple/angular.md new file mode 100644 index 00000000000..238f000c458 --- /dev/null +++ b/static/usage/v8/accordion/multiple/angular.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/multiple/demo.html b/static/usage/v8/accordion/multiple/demo.html new file mode 100644 index 00000000000..b2c4b51c543 --- /dev/null +++ b/static/usage/v8/accordion/multiple/demo.html @@ -0,0 +1,46 @@ + + + + + + Accordion + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + + + diff --git a/static/usage/v8/accordion/multiple/index.md b/static/usage/v8/accordion/multiple/index.md new file mode 100644 index 00000000000..868eaaa7c16 --- /dev/null +++ b/static/usage/v8/accordion/multiple/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/accordion/multiple/javascript.md b/static/usage/v8/accordion/multiple/javascript.md new file mode 100644 index 00000000000..6948ed4e9cc --- /dev/null +++ b/static/usage/v8/accordion/multiple/javascript.md @@ -0,0 +1,27 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + + +``` diff --git a/static/usage/v8/accordion/multiple/react.md b/static/usage/v8/accordion/multiple/react.md new file mode 100644 index 00000000000..2bdbb0b365a --- /dev/null +++ b/static/usage/v8/accordion/multiple/react.md @@ -0,0 +1,45 @@ +```tsx +import React, { useRef, useEffect } from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + const accordionGroup = useRef(null); + + useEffect(() => { + if (!accordionGroup.current) { + return; + } + + accordionGroup.current.value = ['first', 'third']; + }, []); + + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/multiple/vue.md b/static/usage/v8/accordion/multiple/vue.md new file mode 100644 index 00000000000..dcf86fbd7d4 --- /dev/null +++ b/static/usage/v8/accordion/multiple/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v8/accordion/readonly/group/angular.md b/static/usage/v8/accordion/readonly/group/angular.md new file mode 100644 index 00000000000..4ebf8c55e4e --- /dev/null +++ b/static/usage/v8/accordion/readonly/group/angular.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/readonly/group/demo.html b/static/usage/v8/accordion/readonly/group/demo.html new file mode 100644 index 00000000000..4a6fa971834 --- /dev/null +++ b/static/usage/v8/accordion/readonly/group/demo.html @@ -0,0 +1,41 @@ + + + + + + Accordion + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v8/accordion/readonly/group/index.md b/static/usage/v8/accordion/readonly/group/index.md new file mode 100644 index 00000000000..78689ede73f --- /dev/null +++ b/static/usage/v8/accordion/readonly/group/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/accordion/readonly/group/javascript.md b/static/usage/v8/accordion/readonly/group/javascript.md new file mode 100644 index 00000000000..d511ea5ff0b --- /dev/null +++ b/static/usage/v8/accordion/readonly/group/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/readonly/group/react.md b/static/usage/v8/accordion/readonly/group/react.md new file mode 100644 index 00000000000..2f26afde9ea --- /dev/null +++ b/static/usage/v8/accordion/readonly/group/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/readonly/group/vue.md b/static/usage/v8/accordion/readonly/group/vue.md new file mode 100644 index 00000000000..0de1be3fe91 --- /dev/null +++ b/static/usage/v8/accordion/readonly/group/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v8/accordion/readonly/individual/angular.md b/static/usage/v8/accordion/readonly/individual/angular.md new file mode 100644 index 00000000000..94013b9d07d --- /dev/null +++ b/static/usage/v8/accordion/readonly/individual/angular.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion (Readonly) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/readonly/individual/demo.html b/static/usage/v8/accordion/readonly/individual/demo.html new file mode 100644 index 00000000000..9e3dee651cd --- /dev/null +++ b/static/usage/v8/accordion/readonly/individual/demo.html @@ -0,0 +1,41 @@ + + + + + + Accordion + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion (Readonly) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v8/accordion/readonly/individual/index.md b/static/usage/v8/accordion/readonly/individual/index.md new file mode 100644 index 00000000000..c7efd45b803 --- /dev/null +++ b/static/usage/v8/accordion/readonly/individual/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/accordion/readonly/individual/javascript.md b/static/usage/v8/accordion/readonly/individual/javascript.md new file mode 100644 index 00000000000..e1f78d726db --- /dev/null +++ b/static/usage/v8/accordion/readonly/individual/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion (Readonly) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v8/accordion/readonly/individual/react.md b/static/usage/v8/accordion/readonly/individual/react.md new file mode 100644 index 00000000000..a6d28a427cd --- /dev/null +++ b/static/usage/v8/accordion/readonly/individual/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion (Readonly) + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/readonly/individual/vue.md b/static/usage/v8/accordion/readonly/individual/vue.md new file mode 100644 index 00000000000..b9a5daac451 --- /dev/null +++ b/static/usage/v8/accordion/readonly/individual/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v8/accordion/toggle/angular/example_component_html.md b/static/usage/v8/accordion/toggle/angular/example_component_html.md new file mode 100644 index 00000000000..6af0af8516a --- /dev/null +++ b/static/usage/v8/accordion/toggle/angular/example_component_html.md @@ -0,0 +1,24 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + +Toggle Second Accordion +``` diff --git a/static/usage/v8/accordion/toggle/angular/example_component_ts.md b/static/usage/v8/accordion/toggle/angular/example_component_ts.md new file mode 100644 index 00000000000..bdcac1d862f --- /dev/null +++ b/static/usage/v8/accordion/toggle/angular/example_component_ts.md @@ -0,0 +1,21 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { IonAccordionGroup } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChild('accordionGroup', { static: true }) accordionGroup: IonAccordionGroup; + + toggleAccordion = () => { + const nativeEl = this.accordionGroup; + if (nativeEl.value === 'second') { + nativeEl.value = undefined; + } else { + nativeEl.value = 'second'; + } + }; +} +``` diff --git a/static/usage/v8/accordion/toggle/demo.html b/static/usage/v8/accordion/toggle/demo.html new file mode 100644 index 00000000000..c72ea7b6dfe --- /dev/null +++ b/static/usage/v8/accordion/toggle/demo.html @@ -0,0 +1,61 @@ + + + + + + Accordion + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + +
+ + Toggle Second Accordion +
+ + + + + + diff --git a/static/usage/v8/accordion/toggle/index.md b/static/usage/v8/accordion/toggle/index.md new file mode 100644 index 00000000000..8f488dbb4b5 --- /dev/null +++ b/static/usage/v8/accordion/toggle/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/accordion/toggle/javascript.md b/static/usage/v8/accordion/toggle/javascript.md new file mode 100644 index 00000000000..058e4e468d6 --- /dev/null +++ b/static/usage/v8/accordion/toggle/javascript.md @@ -0,0 +1,35 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + +Toggle Second Accordion + + +``` diff --git a/static/usage/v8/accordion/toggle/react.md b/static/usage/v8/accordion/toggle/react.md new file mode 100644 index 00000000000..8d20c6bb18e --- /dev/null +++ b/static/usage/v8/accordion/toggle/react.md @@ -0,0 +1,51 @@ +```tsx +import React, { useRef } from 'react'; +import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/react'; +function Example() { + const accordionGroup = useRef(null); + const toggleAccordion = () => { + if (!accordionGroup.current) { + return; + } + const nativeEl = accordionGroup.current; + + if (nativeEl.value === 'second') { + nativeEl.value = undefined; + } else { + nativeEl.value = 'second'; + } + }; + return ( + <> + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + Toggle Second Accordion + + ); +} +export default Example; +``` diff --git a/static/usage/v8/accordion/toggle/vue.md b/static/usage/v8/accordion/toggle/vue.md new file mode 100644 index 00000000000..c9fa11c0e9c --- /dev/null +++ b/static/usage/v8/accordion/toggle/vue.md @@ -0,0 +1,58 @@ +```html + + + +``` diff --git a/static/usage/v8/action-sheet/controller/angular/example_component_html.md b/static/usage/v8/action-sheet/controller/angular/example_component_html.md new file mode 100644 index 00000000000..2cc044fbee1 --- /dev/null +++ b/static/usage/v8/action-sheet/controller/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Open +``` diff --git a/static/usage/v8/action-sheet/controller/angular/example_component_ts.md b/static/usage/v8/action-sheet/controller/angular/example_component_ts.md new file mode 100644 index 00000000000..c7ecc272663 --- /dev/null +++ b/static/usage/v8/action-sheet/controller/angular/example_component_ts.md @@ -0,0 +1,43 @@ +```ts +import { Component } from '@angular/core'; + +import { ActionSheetController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + constructor(private actionSheetCtrl: ActionSheetController) {} + + async presentActionSheet() { + const actionSheet = await this.actionSheetCtrl.create({ + header: 'Actions', + buttons: [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ], + }); + + await actionSheet.present(); + } +} +``` diff --git a/static/usage/v8/action-sheet/controller/demo.html b/static/usage/v8/action-sheet/controller/demo.html new file mode 100644 index 00000000000..4843e001a1f --- /dev/null +++ b/static/usage/v8/action-sheet/controller/demo.html @@ -0,0 +1,53 @@ + + + + + + Action Sheet + + + + + + + + + +
+ Open +
+ + + + + diff --git a/static/usage/v8/action-sheet/controller/index.md b/static/usage/v8/action-sheet/controller/index.md new file mode 100644 index 00000000000..f761b958240 --- /dev/null +++ b/static/usage/v8/action-sheet/controller/index.md @@ -0,0 +1,27 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react from './react.md'; + +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/action-sheet/controller/javascript.md b/static/usage/v8/action-sheet/controller/javascript.md new file mode 100644 index 00000000000..e4c32b54f09 --- /dev/null +++ b/static/usage/v8/action-sheet/controller/javascript.md @@ -0,0 +1,35 @@ +```html +Open + + +``` diff --git a/static/usage/v8/action-sheet/controller/react.md b/static/usage/v8/action-sheet/controller/react.md new file mode 100644 index 00000000000..0fb6f90cbf7 --- /dev/null +++ b/static/usage/v8/action-sheet/controller/react.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonButton, useIonActionSheet } from '@ionic/react'; + +function Example() { + const [present] = useIonActionSheet(); + + return ( + + present({ + header: 'Actions', + buttons: [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ], + }) + } + > + Open + + ); +} +export default Example; +``` diff --git a/static/usage/v8/action-sheet/controller/vue.md b/static/usage/v8/action-sheet/controller/vue.md new file mode 100644 index 00000000000..8e98e65e36a --- /dev/null +++ b/static/usage/v8/action-sheet/controller/vue.md @@ -0,0 +1,46 @@ +```html + + + +``` diff --git a/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_html.md b/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_html.md new file mode 100644 index 00000000000..a2af98772fd --- /dev/null +++ b/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html +Open + +``` diff --git a/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md b/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md new file mode 100644 index 00000000000..78d9ddf05c8 --- /dev/null +++ b/static/usage/v8/action-sheet/inline/isOpen/angular/example_component_ts.md @@ -0,0 +1,37 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + isActionSheetOpen = false; + public actionSheetButtons = [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ]; + + setOpen(isOpen: boolean) { + this.isActionSheetOpen = isOpen; + } +} +``` diff --git a/static/usage/v8/action-sheet/inline/isOpen/demo.html b/static/usage/v8/action-sheet/inline/isOpen/demo.html new file mode 100644 index 00000000000..224319878c3 --- /dev/null +++ b/static/usage/v8/action-sheet/inline/isOpen/demo.html @@ -0,0 +1,53 @@ + + + + + + Action Sheet + + + + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v8/action-sheet/inline/isOpen/index.md b/static/usage/v8/action-sheet/inline/isOpen/index.md new file mode 100644 index 00000000000..86cf87ab2cd --- /dev/null +++ b/static/usage/v8/action-sheet/inline/isOpen/index.md @@ -0,0 +1,27 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react from './react.md'; + +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/action-sheet/inline/isOpen/javascript.md b/static/usage/v8/action-sheet/inline/isOpen/javascript.md new file mode 100644 index 00000000000..2c0e3b11879 --- /dev/null +++ b/static/usage/v8/action-sheet/inline/isOpen/javascript.md @@ -0,0 +1,35 @@ +```html +Open + + + +``` diff --git a/static/usage/v8/action-sheet/inline/isOpen/react.md b/static/usage/v8/action-sheet/inline/isOpen/react.md new file mode 100644 index 00000000000..aebfa63c093 --- /dev/null +++ b/static/usage/v8/action-sheet/inline/isOpen/react.md @@ -0,0 +1,42 @@ +```tsx +import React, { useState } from 'react'; +import { IonActionSheet, IonButton } from '@ionic/react'; + +function Example() { + const [isOpen, setIsOpen] = useState(false); + + return ( + <> + setIsOpen(true)}>Open + setIsOpen(false)} + > + + ); +} +export default Example; +``` diff --git a/static/usage/v8/action-sheet/inline/isOpen/vue.md b/static/usage/v8/action-sheet/inline/isOpen/vue.md new file mode 100644 index 00000000000..9d82efd4ea1 --- /dev/null +++ b/static/usage/v8/action-sheet/inline/isOpen/vue.md @@ -0,0 +1,55 @@ +```html + + + +``` diff --git a/static/usage/v8/action-sheet/inline/trigger/angular/example_component_html.md b/static/usage/v8/action-sheet/inline/trigger/angular/example_component_html.md new file mode 100644 index 00000000000..b2bebe5de6c --- /dev/null +++ b/static/usage/v8/action-sheet/inline/trigger/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html +Open + +``` diff --git a/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md b/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md new file mode 100644 index 00000000000..f991151c4a1 --- /dev/null +++ b/static/usage/v8/action-sheet/inline/trigger/angular/example_component_ts.md @@ -0,0 +1,32 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + public actionSheetButtons = [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ]; +} +``` diff --git a/static/usage/v8/action-sheet/inline/trigger/demo.html b/static/usage/v8/action-sheet/inline/trigger/demo.html new file mode 100644 index 00000000000..74720e77cf0 --- /dev/null +++ b/static/usage/v8/action-sheet/inline/trigger/demo.html @@ -0,0 +1,49 @@ + + + + + + Action Sheet + + + + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v8/action-sheet/inline/trigger/index.md b/static/usage/v8/action-sheet/inline/trigger/index.md new file mode 100644 index 00000000000..b35cd485cbe --- /dev/null +++ b/static/usage/v8/action-sheet/inline/trigger/index.md @@ -0,0 +1,27 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react from './react.md'; + +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/action-sheet/inline/trigger/javascript.md b/static/usage/v8/action-sheet/inline/trigger/javascript.md new file mode 100644 index 00000000000..d705a0162b5 --- /dev/null +++ b/static/usage/v8/action-sheet/inline/trigger/javascript.md @@ -0,0 +1,31 @@ +```html +Open + + + +``` diff --git a/static/usage/v8/action-sheet/inline/trigger/react.md b/static/usage/v8/action-sheet/inline/trigger/react.md new file mode 100644 index 00000000000..54c1793d713 --- /dev/null +++ b/static/usage/v8/action-sheet/inline/trigger/react.md @@ -0,0 +1,39 @@ +```tsx +import React from 'react'; +import { IonActionSheet, IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Open + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/action-sheet/inline/trigger/vue.md b/static/usage/v8/action-sheet/inline/trigger/vue.md new file mode 100644 index 00000000000..c32a8ea9bdd --- /dev/null +++ b/static/usage/v8/action-sheet/inline/trigger/vue.md @@ -0,0 +1,40 @@ +```html + + + +``` diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_css.md b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_css.md new file mode 100644 index 00000000000..6bf8f4dc7fc --- /dev/null +++ b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_css.md @@ -0,0 +1,9 @@ +```css +.container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100%; +} +``` diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_html.md b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_html.md new file mode 100644 index 00000000000..7896f219737 --- /dev/null +++ b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html +
+ Open + +
+``` diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md new file mode 100644 index 00000000000..a38c0b92307 --- /dev/null +++ b/static/usage/v8/action-sheet/role-info-on-dismiss/angular/example_component_ts.md @@ -0,0 +1,39 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], +}) +export class ExampleComponent { + public actionSheetButtons = [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ]; + + constructor() {} + + logResult(ev) { + console.log(JSON.stringify(ev.detail, null, 2)); + } +} +``` diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/demo.html b/static/usage/v8/action-sheet/role-info-on-dismiss/demo.html new file mode 100644 index 00000000000..ff9583515c2 --- /dev/null +++ b/static/usage/v8/action-sheet/role-info-on-dismiss/demo.html @@ -0,0 +1,63 @@ + + + + + + Action Sheet + + + + + + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/index.md b/static/usage/v8/action-sheet/role-info-on-dismiss/index.md new file mode 100644 index 00000000000..3e737eb7be8 --- /dev/null +++ b/static/usage/v8/action-sheet/role-info-on-dismiss/index.md @@ -0,0 +1,36 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/javascript.md b/static/usage/v8/action-sheet/role-info-on-dismiss/javascript.md new file mode 100644 index 00000000000..b21645ebac8 --- /dev/null +++ b/static/usage/v8/action-sheet/role-info-on-dismiss/javascript.md @@ -0,0 +1,51 @@ +```html + + +
+ Open + +
+ + +``` diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/react/main_css.md b/static/usage/v8/action-sheet/role-info-on-dismiss/react/main_css.md new file mode 100644 index 00000000000..6bf8f4dc7fc --- /dev/null +++ b/static/usage/v8/action-sheet/role-info-on-dismiss/react/main_css.md @@ -0,0 +1,9 @@ +```css +.container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100%; +} +``` diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/react/main_tsx.md b/static/usage/v8/action-sheet/role-info-on-dismiss/react/main_tsx.md new file mode 100644 index 00000000000..5728ab3c194 --- /dev/null +++ b/static/usage/v8/action-sheet/role-info-on-dismiss/react/main_tsx.md @@ -0,0 +1,48 @@ +```tsx +import React from 'react'; +import { IonActionSheet, IonButton } from '@ionic/react'; +import type { OverlayEventDetail } from '@ionic/core'; + +import './main.css'; + +function Example() { + const logResult = (result: OverlayEventDetail) => { + console.log(JSON.stringify(result, null, 2)); + }; + + return ( +
+ Open + logResult(detail)} + > +
+ ); +} +export default Example; +``` diff --git a/static/usage/v8/action-sheet/role-info-on-dismiss/vue.md b/static/usage/v8/action-sheet/role-info-on-dismiss/vue.md new file mode 100644 index 00000000000..6f56c29920d --- /dev/null +++ b/static/usage/v8/action-sheet/role-info-on-dismiss/vue.md @@ -0,0 +1,65 @@ +```html + + + + + +``` diff --git a/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_html.md b/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..0aa27e460f6 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html +Open + +``` diff --git a/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md b/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..d9714abb668 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,35 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], +}) +export class ExampleComponent { + public actionSheetButtons = [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ]; + + constructor() {} +} +``` diff --git a/static/usage/v8/action-sheet/theming/css-properties/angular/global_css.md b/static/usage/v8/action-sheet/theming/css-properties/angular/global_css.md new file mode 100644 index 00000000000..2d9e22b3163 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/css-properties/angular/global_css.md @@ -0,0 +1,12 @@ +```css +/* Note: These styles should be located in your global stylesheet */ +ion-action-sheet.my-custom-class { + --background: #f58840; + --backdrop-opacity: 0.6; + --button-background-selected: #e97223; + --button-color: #000000; + --color: #fff; + /* role: "destructive" button iOS styling override */ + --ion-color-danger: #000000; +} +``` diff --git a/static/usage/v8/action-sheet/theming/css-properties/demo.html b/static/usage/v8/action-sheet/theming/css-properties/demo.html new file mode 100644 index 00000000000..70ccb5c5517 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/css-properties/demo.html @@ -0,0 +1,66 @@ + + + + + + Action Sheet + + + + + + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v8/action-sheet/theming/css-properties/index.md b/static/usage/v8/action-sheet/theming/css-properties/index.md new file mode 100644 index 00000000000..37faf47f9f9 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/css-properties/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/action-sheet/theming/css-properties/javascript.md b/static/usage/v8/action-sheet/theming/css-properties/javascript.md new file mode 100644 index 00000000000..cbc9332589a --- /dev/null +++ b/static/usage/v8/action-sheet/theming/css-properties/javascript.md @@ -0,0 +1,48 @@ +```html + + +Open + + + +``` diff --git a/static/usage/v8/action-sheet/theming/css-properties/react/main_css.md b/static/usage/v8/action-sheet/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..63809ed75c7 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/css-properties/react/main_css.md @@ -0,0 +1,11 @@ +```css +ion-action-sheet.my-custom-class { + --background: #f58840; + --backdrop-opacity: 0.6; + --button-background-selected: #e97223; + --button-color: #000000; + --color: #fff; + /* role: "destructive" button iOS styling override */ + --ion-color-danger: #000000; +} +``` diff --git a/static/usage/v8/action-sheet/theming/css-properties/react/main_tsx.md b/static/usage/v8/action-sheet/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..fc0c08e0a57 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/css-properties/react/main_tsx.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonActionSheet, IonButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Open + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/action-sheet/theming/css-properties/vue.md b/static/usage/v8/action-sheet/theming/css-properties/vue.md new file mode 100644 index 00000000000..2f8cc168f58 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/css-properties/vue.md @@ -0,0 +1,58 @@ +```html + + + + + +``` diff --git a/static/usage/v8/action-sheet/theming/styling/angular/example_component_html.md b/static/usage/v8/action-sheet/theming/styling/angular/example_component_html.md new file mode 100644 index 00000000000..0aa27e460f6 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/styling/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html +Open + +``` diff --git a/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md new file mode 100644 index 00000000000..d9714abb668 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/styling/angular/example_component_ts.md @@ -0,0 +1,35 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], +}) +export class ExampleComponent { + public actionSheetButtons = [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ]; + + constructor() {} +} +``` diff --git a/static/usage/v8/action-sheet/theming/styling/angular/global_css.md b/static/usage/v8/action-sheet/theming/styling/angular/global_css.md new file mode 100644 index 00000000000..46999a97921 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/styling/angular/global_css.md @@ -0,0 +1,29 @@ +```css +/* Note: These styles should be located in your global stylesheet */ +ion-action-sheet.my-custom-class .action-sheet-group { + background: #f58840; +} + +ion-action-sheet.my-custom-class .action-sheet-title { + color: #fff; +} + +ion-action-sheet.my-custom-class .action-sheet-cancel::after { + background: #e97223; +} + +ion-action-sheet.my-custom-class .action-sheet-button, +ion-action-sheet.my-custom-class .action-sheet-button.ion-focused { + color: #000000; +} + +@media (any-hover: hover) { + ion-action-sheet.my-custom-class .action-sheet-button:hover { + color: #000000; + } +} + +ion-action-sheet.my-custom-class ion-backdrop { + opacity: 0.6; +} +``` diff --git a/static/usage/v8/action-sheet/theming/styling/demo.html b/static/usage/v8/action-sheet/theming/styling/demo.html new file mode 100644 index 00000000000..ef322200bdd --- /dev/null +++ b/static/usage/v8/action-sheet/theming/styling/demo.html @@ -0,0 +1,83 @@ + + + + + + Action Sheet + + + + + + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v8/action-sheet/theming/styling/index.md b/static/usage/v8/action-sheet/theming/styling/index.md new file mode 100644 index 00000000000..67a346b3318 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/styling/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/action-sheet/theming/styling/javascript.md b/static/usage/v8/action-sheet/theming/styling/javascript.md new file mode 100644 index 00000000000..90e2725d0df --- /dev/null +++ b/static/usage/v8/action-sheet/theming/styling/javascript.md @@ -0,0 +1,65 @@ +```html + + +Open + + + +``` diff --git a/static/usage/v8/action-sheet/theming/styling/react/main_css.md b/static/usage/v8/action-sheet/theming/styling/react/main_css.md new file mode 100644 index 00000000000..cff22cfd41e --- /dev/null +++ b/static/usage/v8/action-sheet/theming/styling/react/main_css.md @@ -0,0 +1,28 @@ +```css +ion-action-sheet.my-custom-class .action-sheet-group { + background: #f58840; +} + +ion-action-sheet.my-custom-class .action-sheet-title { + color: #fff; +} + +ion-action-sheet.my-custom-class .action-sheet-cancel::after { + background: #e97223; +} + +ion-action-sheet.my-custom-class .action-sheet-button, +ion-action-sheet.my-custom-class .action-sheet-button.ion-focused { + color: #000000; +} + +@media (any-hover: hover) { + ion-action-sheet.my-custom-class .action-sheet-button:hover { + color: #000000; + } +} + +ion-action-sheet.my-custom-class ion-backdrop { + opacity: 0.6; +} +``` diff --git a/static/usage/v8/action-sheet/theming/styling/react/main_tsx.md b/static/usage/v8/action-sheet/theming/styling/react/main_tsx.md new file mode 100644 index 00000000000..fc0c08e0a57 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/styling/react/main_tsx.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonActionSheet, IonButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Open + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/action-sheet/theming/styling/vue.md b/static/usage/v8/action-sheet/theming/styling/vue.md new file mode 100644 index 00000000000..c46ae0bcbd3 --- /dev/null +++ b/static/usage/v8/action-sheet/theming/styling/vue.md @@ -0,0 +1,75 @@ +```html + + + + + +``` diff --git a/static/usage/v8/alert/buttons/angular/example_component_html.md b/static/usage/v8/alert/buttons/angular/example_component_html.md new file mode 100644 index 00000000000..e9843417484 --- /dev/null +++ b/static/usage/v8/alert/buttons/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html +Click Me + +``` diff --git a/static/usage/v8/alert/buttons/angular/example_component_ts.md b/static/usage/v8/alert/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..20858d60e46 --- /dev/null +++ b/static/usage/v8/alert/buttons/angular/example_component_ts.md @@ -0,0 +1,30 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + public alertButtons = [ + { + text: 'Cancel', + role: 'cancel', + handler: () => { + console.log('Alert canceled'); + }, + }, + { + text: 'OK', + role: 'confirm', + handler: () => { + console.log('Alert confirmed'); + }, + }, + ]; + + setResult(ev) { + console.log(`Dismissed with role: ${ev.detail.role}`); + } +} +``` diff --git a/static/usage/v8/alert/buttons/demo.html b/static/usage/v8/alert/buttons/demo.html new file mode 100644 index 00000000000..33bb809d3e8 --- /dev/null +++ b/static/usage/v8/alert/buttons/demo.html @@ -0,0 +1,48 @@ + + + + + + Alert + + + + + + + + + +
+ Click Me + +
+ + + + + + diff --git a/static/usage/v8/alert/buttons/index.md b/static/usage/v8/alert/buttons/index.md new file mode 100644 index 00000000000..199efdea2d0 --- /dev/null +++ b/static/usage/v8/alert/buttons/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/alert/buttons/javascript.md b/static/usage/v8/alert/buttons/javascript.md new file mode 100644 index 00000000000..21a45f7cf4d --- /dev/null +++ b/static/usage/v8/alert/buttons/javascript.md @@ -0,0 +1,29 @@ +```html +Click Me + + + +``` diff --git a/static/usage/v8/alert/buttons/react.md b/static/usage/v8/alert/buttons/react.md new file mode 100644 index 00000000000..f9983f46d84 --- /dev/null +++ b/static/usage/v8/alert/buttons/react.md @@ -0,0 +1,34 @@ +```tsx +import React from 'react'; +import { IonAlert, IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Click Me + { + console.log('Alert canceled'); + }, + }, + { + text: 'OK', + role: 'confirm', + handler: () => { + console.log('Alert confirmed'); + }, + }, + ]} + onDidDismiss={({ detail }) => console.log(`Dismissed with role: ${detail.role}`)} + > + + ); +} +export default Example; +``` diff --git a/static/usage/v8/alert/buttons/vue.md b/static/usage/v8/alert/buttons/vue.md new file mode 100644 index 00000000000..245797ab7c1 --- /dev/null +++ b/static/usage/v8/alert/buttons/vue.md @@ -0,0 +1,36 @@ +```html + + + +``` diff --git a/static/usage/v8/alert/customization/angular/example_component_html.md b/static/usage/v8/alert/customization/angular/example_component_html.md new file mode 100644 index 00000000000..762d3c21d89 --- /dev/null +++ b/static/usage/v8/alert/customization/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html +Click Me + +``` diff --git a/static/usage/v8/alert/customization/angular/example_component_ts.md b/static/usage/v8/alert/customization/angular/example_component_ts.md new file mode 100644 index 00000000000..51552ff9852 --- /dev/null +++ b/static/usage/v8/alert/customization/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + public alertButtons = [ + { + text: 'No', + cssClass: 'alert-button-cancel', + }, + { + text: 'Yes', + cssClass: 'alert-button-confirm', + }, + ]; +} +``` diff --git a/static/usage/v8/alert/customization/angular/global_css.md b/static/usage/v8/alert/customization/angular/global_css.md new file mode 100644 index 00000000000..c84c1456e58 --- /dev/null +++ b/static/usage/v8/alert/customization/angular/global_css.md @@ -0,0 +1,33 @@ +```css +ion-alert.custom-alert { + --backdrop-opacity: 0.7; +} + +.custom-alert .alert-button-group { + padding: 8px; +} + +button.alert-button.alert-button-confirm { + background-color: var(--ion-color-success); + color: var(--ion-color-success-contrast); +} + +.md button.alert-button.alert-button-confirm { + border-radius: 4px; +} + +.ios .custom-alert button.alert-button { + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); +} + +.ios button.alert-button.alert-button-cancel { + border-right: 0; + border-bottom-left-radius: 13px; + border-top-left-radius: 13px; +} + +.ios button.alert-button.alert-button-confirm { + border-bottom-right-radius: 13px; + border-top-right-radius: 13px; +} +``` diff --git a/static/usage/v8/alert/customization/demo.html b/static/usage/v8/alert/customization/demo.html new file mode 100644 index 00000000000..46910704054 --- /dev/null +++ b/static/usage/v8/alert/customization/demo.html @@ -0,0 +1,72 @@ + + + + + + Alert + + + + + + + + + + + +
+ Click Me + +
+ + + + + + diff --git a/static/usage/v8/alert/customization/index.md b/static/usage/v8/alert/customization/index.md new file mode 100644 index 00000000000..59bc30dd589 --- /dev/null +++ b/static/usage/v8/alert/customization/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/alert/customization/javascript.md b/static/usage/v8/alert/customization/javascript.md new file mode 100644 index 00000000000..a3c31a1b432 --- /dev/null +++ b/static/usage/v8/alert/customization/javascript.md @@ -0,0 +1,53 @@ +```html +Click Me + + + + + +``` diff --git a/static/usage/v8/alert/customization/react/main_css.md b/static/usage/v8/alert/customization/react/main_css.md new file mode 100644 index 00000000000..c84c1456e58 --- /dev/null +++ b/static/usage/v8/alert/customization/react/main_css.md @@ -0,0 +1,33 @@ +```css +ion-alert.custom-alert { + --backdrop-opacity: 0.7; +} + +.custom-alert .alert-button-group { + padding: 8px; +} + +button.alert-button.alert-button-confirm { + background-color: var(--ion-color-success); + color: var(--ion-color-success-contrast); +} + +.md button.alert-button.alert-button-confirm { + border-radius: 4px; +} + +.ios .custom-alert button.alert-button { + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); +} + +.ios button.alert-button.alert-button-cancel { + border-right: 0; + border-bottom-left-radius: 13px; + border-top-left-radius: 13px; +} + +.ios button.alert-button.alert-button-confirm { + border-bottom-right-radius: 13px; + border-top-right-radius: 13px; +} +``` diff --git a/static/usage/v8/alert/customization/react/main_tsx.md b/static/usage/v8/alert/customization/react/main_tsx.md new file mode 100644 index 00000000000..b32663d5339 --- /dev/null +++ b/static/usage/v8/alert/customization/react/main_tsx.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonAlert, IonButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Click Me + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/alert/customization/vue.md b/static/usage/v8/alert/customization/vue.md new file mode 100644 index 00000000000..eafb78ae012 --- /dev/null +++ b/static/usage/v8/alert/customization/vue.md @@ -0,0 +1,55 @@ +```html + + + + + +``` diff --git a/static/usage/v8/alert/inputs/radios/angular/example_component_html.md b/static/usage/v8/alert/inputs/radios/angular/example_component_html.md new file mode 100644 index 00000000000..cc22c178c35 --- /dev/null +++ b/static/usage/v8/alert/inputs/radios/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html +Click Me + +``` diff --git a/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md b/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md new file mode 100644 index 00000000000..34f44b288da --- /dev/null +++ b/static/usage/v8/alert/inputs/radios/angular/example_component_ts.md @@ -0,0 +1,28 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + public alertButtons = ['OK']; + public alertInputs = [ + { + label: 'Red', + type: 'radio', + value: 'red', + }, + { + label: 'Blue', + type: 'radio', + value: 'blue', + }, + { + label: 'Green', + type: 'radio', + value: 'green', + }, + ]; +} +``` diff --git a/static/usage/v8/alert/inputs/radios/demo.html b/static/usage/v8/alert/inputs/radios/demo.html new file mode 100644 index 00000000000..19d5b19022c --- /dev/null +++ b/static/usage/v8/alert/inputs/radios/demo.html @@ -0,0 +1,46 @@ + + + + + + Alert + + + + + + + + + +
+ Click Me + +
+ + + + + + diff --git a/static/usage/v8/alert/inputs/radios/index.md b/static/usage/v8/alert/inputs/radios/index.md new file mode 100644 index 00000000000..8ec9fc1bddd --- /dev/null +++ b/static/usage/v8/alert/inputs/radios/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/alert/inputs/radios/javascript.md b/static/usage/v8/alert/inputs/radios/javascript.md new file mode 100644 index 00000000000..570a7f4cb6b --- /dev/null +++ b/static/usage/v8/alert/inputs/radios/javascript.md @@ -0,0 +1,27 @@ +```html +Click Me + + + +``` diff --git a/static/usage/v8/alert/inputs/radios/react.md b/static/usage/v8/alert/inputs/radios/react.md new file mode 100644 index 00000000000..13518c02aa4 --- /dev/null +++ b/static/usage/v8/alert/inputs/radios/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAlert, IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Click Me + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/alert/inputs/radios/vue.md b/static/usage/v8/alert/inputs/radios/vue.md new file mode 100644 index 00000000000..c2b937c1472 --- /dev/null +++ b/static/usage/v8/alert/inputs/radios/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v8/alert/inputs/text-inputs/angular/example_component_html.md b/static/usage/v8/alert/inputs/text-inputs/angular/example_component_html.md new file mode 100644 index 00000000000..0ae990d9a50 --- /dev/null +++ b/static/usage/v8/alert/inputs/text-inputs/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html +Click Me + +``` diff --git a/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md b/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md new file mode 100644 index 00000000000..713dc9067fa --- /dev/null +++ b/static/usage/v8/alert/inputs/text-inputs/angular/example_component_ts.md @@ -0,0 +1,32 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + public alertButtons = ['OK']; + public alertInputs = [ + { + placeholder: 'Name', + }, + { + placeholder: 'Nickname (max 8 characters)', + attributes: { + maxlength: 8, + }, + }, + { + type: 'number', + placeholder: 'Age', + min: 1, + max: 100, + }, + { + type: 'textarea', + placeholder: 'A little about yourself', + }, + ]; +} +``` diff --git a/static/usage/v8/alert/inputs/text-inputs/demo.html b/static/usage/v8/alert/inputs/text-inputs/demo.html new file mode 100644 index 00000000000..6088f0b6122 --- /dev/null +++ b/static/usage/v8/alert/inputs/text-inputs/demo.html @@ -0,0 +1,50 @@ + + + + + + Alert + + + + + + + + + +
+ Click Me + +
+ + + + + + diff --git a/static/usage/v8/alert/inputs/text-inputs/index.md b/static/usage/v8/alert/inputs/text-inputs/index.md new file mode 100644 index 00000000000..6c56317816e --- /dev/null +++ b/static/usage/v8/alert/inputs/text-inputs/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/alert/inputs/text-inputs/javascript.md b/static/usage/v8/alert/inputs/text-inputs/javascript.md new file mode 100644 index 00000000000..bbbd043c5e7 --- /dev/null +++ b/static/usage/v8/alert/inputs/text-inputs/javascript.md @@ -0,0 +1,31 @@ +```html +Click Me + + + +``` diff --git a/static/usage/v8/alert/inputs/text-inputs/react.md b/static/usage/v8/alert/inputs/text-inputs/react.md new file mode 100644 index 00000000000..fbea607f2b3 --- /dev/null +++ b/static/usage/v8/alert/inputs/text-inputs/react.md @@ -0,0 +1,39 @@ +```tsx +import React from 'react'; +import { IonAlert, IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Click Me + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/alert/inputs/text-inputs/vue.md b/static/usage/v8/alert/inputs/text-inputs/vue.md new file mode 100644 index 00000000000..fe4072e756d --- /dev/null +++ b/static/usage/v8/alert/inputs/text-inputs/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v8/alert/presenting/controller/angular/example_component_html.md b/static/usage/v8/alert/presenting/controller/angular/example_component_html.md new file mode 100644 index 00000000000..183dd98719d --- /dev/null +++ b/static/usage/v8/alert/presenting/controller/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Click Me +``` diff --git a/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md b/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md new file mode 100644 index 00000000000..6fdd69c7f69 --- /dev/null +++ b/static/usage/v8/alert/presenting/controller/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { AlertController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + constructor(private alertController: AlertController) {} + + async presentAlert() { + const alert = await this.alertController.create({ + header: 'A Short Title Is Best', + subHeader: 'A Sub Header Is Optional', + message: 'A message should be a short, complete sentence.', + buttons: ['Action'], + }); + + await alert.present(); + } +} +``` diff --git a/static/usage/v8/alert/presenting/controller/demo.html b/static/usage/v8/alert/presenting/controller/demo.html new file mode 100644 index 00000000000..d4e86b7fb77 --- /dev/null +++ b/static/usage/v8/alert/presenting/controller/demo.html @@ -0,0 +1,35 @@ + + + + + + Alert + + + + + + + + + +
+ Click Me +
+ + + + + + diff --git a/static/usage/v8/alert/presenting/controller/index.md b/static/usage/v8/alert/presenting/controller/index.md new file mode 100644 index 00000000000..5a01edce2a0 --- /dev/null +++ b/static/usage/v8/alert/presenting/controller/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/alert/presenting/controller/javascript.md b/static/usage/v8/alert/presenting/controller/javascript.md new file mode 100644 index 00000000000..0847251aba7 --- /dev/null +++ b/static/usage/v8/alert/presenting/controller/javascript.md @@ -0,0 +1,16 @@ +```html +Click Me + + +``` diff --git a/static/usage/v8/alert/presenting/controller/react.md b/static/usage/v8/alert/presenting/controller/react.md new file mode 100644 index 00000000000..0ae2dbec301 --- /dev/null +++ b/static/usage/v8/alert/presenting/controller/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonButton, useIonAlert } from '@ionic/react'; + +function Example() { + const [presentAlert] = useIonAlert(); + + return ( + + presentAlert({ + header: 'A Short Title Is Best', + subHeader: 'A Sub Header Is Optional', + message: 'A message should be a short, complete sentence.', + buttons: ['Action'], + }) + } + > + Click Me + + ); +} +export default Example; +``` diff --git a/static/usage/v8/alert/presenting/controller/vue.md b/static/usage/v8/alert/presenting/controller/vue.md new file mode 100644 index 00000000000..ed0a4da5fc7 --- /dev/null +++ b/static/usage/v8/alert/presenting/controller/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v8/alert/presenting/isOpen/angular/example_component_html.md b/static/usage/v8/alert/presenting/isOpen/angular/example_component_html.md new file mode 100644 index 00000000000..6394f95a34b --- /dev/null +++ b/static/usage/v8/alert/presenting/isOpen/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html +Click Me + +``` diff --git a/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md b/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md new file mode 100644 index 00000000000..82d1f17e457 --- /dev/null +++ b/static/usage/v8/alert/presenting/isOpen/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + isAlertOpen = false; + alertButtons = ['Action']; + + setOpen(isOpen: boolean) { + this.isAlertOpen = isOpen; + } +} +``` diff --git a/static/usage/v8/alert/presenting/isOpen/demo.html b/static/usage/v8/alert/presenting/isOpen/demo.html new file mode 100644 index 00000000000..23c17609177 --- /dev/null +++ b/static/usage/v8/alert/presenting/isOpen/demo.html @@ -0,0 +1,36 @@ + + + + + + Alert + + + + + + + + + +
+ Click Me + +
+ + + + + + diff --git a/static/usage/v8/alert/presenting/isOpen/index.md b/static/usage/v8/alert/presenting/isOpen/index.md new file mode 100644 index 00000000000..e00b0e96f07 --- /dev/null +++ b/static/usage/v8/alert/presenting/isOpen/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/alert/presenting/isOpen/javascript.md b/static/usage/v8/alert/presenting/isOpen/javascript.md new file mode 100644 index 00000000000..67ae47c5770 --- /dev/null +++ b/static/usage/v8/alert/presenting/isOpen/javascript.md @@ -0,0 +1,17 @@ +```html +Click Me + + + +``` diff --git a/static/usage/v8/alert/presenting/isOpen/react.md b/static/usage/v8/alert/presenting/isOpen/react.md new file mode 100644 index 00000000000..e55bf79f93b --- /dev/null +++ b/static/usage/v8/alert/presenting/isOpen/react.md @@ -0,0 +1,23 @@ +```tsx +import React, { useState } from 'react'; +import { IonAlert, IonButton } from '@ionic/react'; + +function Example() { + const [isOpen, setIsOpen] = useState(false); + + return ( + <> + setIsOpen(true)}>Click Me + setIsOpen(false)} + > + + ); +} +export default Example; +``` diff --git a/static/usage/v8/alert/presenting/isOpen/vue.md b/static/usage/v8/alert/presenting/isOpen/vue.md new file mode 100644 index 00000000000..1d23990668b --- /dev/null +++ b/static/usage/v8/alert/presenting/isOpen/vue.md @@ -0,0 +1,25 @@ +```html + + + +``` diff --git a/static/usage/v8/alert/presenting/trigger/angular/example_component_html.md b/static/usage/v8/alert/presenting/trigger/angular/example_component_html.md new file mode 100644 index 00000000000..65d165d2173 --- /dev/null +++ b/static/usage/v8/alert/presenting/trigger/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html +Click Me + +``` diff --git a/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md b/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md new file mode 100644 index 00000000000..9526ebdde8f --- /dev/null +++ b/static/usage/v8/alert/presenting/trigger/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + alertButtons = ['Action']; +} +``` diff --git a/static/usage/v8/alert/presenting/trigger/demo.html b/static/usage/v8/alert/presenting/trigger/demo.html new file mode 100644 index 00000000000..4b8f28df3db --- /dev/null +++ b/static/usage/v8/alert/presenting/trigger/demo.html @@ -0,0 +1,33 @@ + + + + + + Alert + + + + + + + + + +
+ Click Me + +
+ + + + + + diff --git a/static/usage/v8/alert/presenting/trigger/index.md b/static/usage/v8/alert/presenting/trigger/index.md new file mode 100644 index 00000000000..1a45a1c51d4 --- /dev/null +++ b/static/usage/v8/alert/presenting/trigger/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/alert/presenting/trigger/javascript.md b/static/usage/v8/alert/presenting/trigger/javascript.md new file mode 100644 index 00000000000..9496421db5b --- /dev/null +++ b/static/usage/v8/alert/presenting/trigger/javascript.md @@ -0,0 +1,14 @@ +```html +Click Me + + + +``` diff --git a/static/usage/v8/alert/presenting/trigger/react.md b/static/usage/v8/alert/presenting/trigger/react.md new file mode 100644 index 00000000000..4d10a5ad085 --- /dev/null +++ b/static/usage/v8/alert/presenting/trigger/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonAlert, IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Click Me + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/alert/presenting/trigger/vue.md b/static/usage/v8/alert/presenting/trigger/vue.md new file mode 100644 index 00000000000..344797317dc --- /dev/null +++ b/static/usage/v8/alert/presenting/trigger/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v8/animations/basic/angular/example_component_html.md b/static/usage/v8/animations/basic/angular/example_component_html.md new file mode 100644 index 00000000000..1bd8875b1b3 --- /dev/null +++ b/static/usage/v8/animations/basic/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + Card + + +Play +Pause +Stop +``` diff --git a/static/usage/v8/animations/basic/angular/example_component_ts.md b/static/usage/v8/animations/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..e8a1dae1af8 --- /dev/null +++ b/static/usage/v8/animations/basic/angular/example_component_ts.md @@ -0,0 +1,40 @@ +```ts +import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import type { QueryList } from '@angular/core'; +import type { Animation } from '@ionic/angular'; +import { AnimationController, IonCard } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + + private animation: Animation; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + this.animation = this.animationCtrl + .create() + .addElement(this.card.nativeElement) + .duration(1500) + .iterations(Infinity) + .fromTo('transform', 'translateX(0px)', 'translateX(100px)') + .fromTo('opacity', '1', '0.2'); + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v8/animations/basic/demo.html b/static/usage/v8/animations/basic/demo.html new file mode 100644 index 00000000000..e8f014943bc --- /dev/null +++ b/static/usage/v8/animations/basic/demo.html @@ -0,0 +1,59 @@ + + + + + + Animation + + + + + + + + + + +
+ + Card + + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v8/animations/basic/index.md b/static/usage/v8/animations/basic/index.md new file mode 100644 index 00000000000..3d29e4e8e59 --- /dev/null +++ b/static/usage/v8/animations/basic/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/animations/basic/javascript.md b/static/usage/v8/animations/basic/javascript.md new file mode 100644 index 00000000000..3c98a4e039f --- /dev/null +++ b/static/usage/v8/animations/basic/javascript.md @@ -0,0 +1,18 @@ +```html + + Card + + +Play +Pause +Stop + + +``` diff --git a/static/usage/v8/animations/basic/react.md b/static/usage/v8/animations/basic/react.md new file mode 100644 index 00000000000..9134a2d9f24 --- /dev/null +++ b/static/usage/v8/animations/basic/react.md @@ -0,0 +1,45 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; + +function Example() { + const cardEl = useRef(null); + + const animation = useRef(null); + + useEffect(() => { + if (animation.current === null) { + animation.current = createAnimation() + .addElement(cardEl.current!) + .duration(1500) + .iterations(Infinity) + .fromTo('transform', 'translateX(0px)', 'translateX(100px)') + .fromTo('opacity', '1', '0.2'); + } + }, [cardEl]); + + const play = () => { + animation.current?.play(); + }; + const pause = () => { + animation.current?.pause(); + }; + const stop = () => { + animation.current?.stop(); + }; + + return ( + <> + + Card + + + Play + Pause + Stop + + ); +} +export default Example; +``` diff --git a/static/usage/v8/animations/basic/vue.md b/static/usage/v8/animations/basic/vue.md new file mode 100644 index 00000000000..afd6c68891b --- /dev/null +++ b/static/usage/v8/animations/basic/vue.md @@ -0,0 +1,51 @@ +```html + + + +``` diff --git a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_html.md b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_html.md new file mode 100644 index 00000000000..c73e91cb471 --- /dev/null +++ b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + Card + + +Play +Pause +Stop +``` diff --git a/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md new file mode 100644 index 00000000000..36a7e22081a --- /dev/null +++ b/static/usage/v8/animations/before-and-after-hooks/angular/example_component_ts.md @@ -0,0 +1,52 @@ +```ts +import { Component, ElementRef, ViewChildren } from '@angular/core'; +import type { QueryList } from '@angular/core'; +import type { Animation } from '@ionic/angular'; +import { AnimationController, IonCard } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + + private animation: Animation; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + const card = this.animationCtrl + .create() + .addElement(this.cardElements.get(0).nativeElement) + .duration(2000) + .beforeStyles({ + filter: 'invert(75%)', + }) + .beforeClearStyles(['box-shadow']) + .afterStyles({ + 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', + }) + .afterClearStyles(['filter']) + .keyframes([ + { offset: 0, transform: 'scale(1)' }, + { offset: 0.5, transform: 'scale(1.5)' }, + { offset: 1, transform: 'scale(1)' }, + ]); + + this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v8/animations/before-and-after-hooks/demo.html b/static/usage/v8/animations/before-and-after-hooks/demo.html new file mode 100644 index 00000000000..30466c2bc93 --- /dev/null +++ b/static/usage/v8/animations/before-and-after-hooks/demo.html @@ -0,0 +1,74 @@ + + + + + + Animations + + + + + + + + + + + + + +
+ + Card + + +
+ Play + Pause + Stop +
+
+ + + + diff --git a/static/usage/v8/animations/before-and-after-hooks/index.md b/static/usage/v8/animations/before-and-after-hooks/index.md new file mode 100644 index 00000000000..187ef590f4b --- /dev/null +++ b/static/usage/v8/animations/before-and-after-hooks/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/animations/before-and-after-hooks/javascript.md b/static/usage/v8/animations/before-and-after-hooks/javascript.md new file mode 100644 index 00000000000..262f8cd9803 --- /dev/null +++ b/static/usage/v8/animations/before-and-after-hooks/javascript.md @@ -0,0 +1,28 @@ +```html + + Card + + +Play +Pause +Stop + + +``` diff --git a/static/usage/v8/animations/before-and-after-hooks/react.md b/static/usage/v8/animations/before-and-after-hooks/react.md new file mode 100644 index 00000000000..bae1185b19d --- /dev/null +++ b/static/usage/v8/animations/before-and-after-hooks/react.md @@ -0,0 +1,61 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; + +function Example() { + const cardEl = useRef(null); + + const card = useRef(); + + useEffect(() => { + if (!card.current) { + card.current = createAnimation() + .addElement(cardEl.current!) + .duration(2000) + .beforeStyles({ + filter: 'invert(75%)', + }) + .beforeClearStyles(['box-shadow']) + .afterStyles({ + 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', + }) + .afterClearStyles(['filter']) + .keyframes([ + { offset: 0, transform: 'scale(1)' }, + { offset: 0.5, transform: 'scale(1.5)' }, + { offset: 1, transform: 'scale(1)' }, + ]); + } + }, [cardEl]); + + const play = async () => { + await card.current?.play(); + }; + const pause = () => { + card.current?.pause(); + }; + const stop = () => { + card.current?.stop(); + }; + + return ( + <> + + Card + + + + Play + + + Pause + + + Stop + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/animations/before-and-after-hooks/vue.md b/static/usage/v8/animations/before-and-after-hooks/vue.md new file mode 100644 index 00000000000..3b7463a8546 --- /dev/null +++ b/static/usage/v8/animations/before-and-after-hooks/vue.md @@ -0,0 +1,67 @@ +```html + + + +``` diff --git a/static/usage/v8/animations/chain/angular/example_component_html.md b/static/usage/v8/animations/chain/angular/example_component_html.md new file mode 100644 index 00000000000..8f8b5a83f58 --- /dev/null +++ b/static/usage/v8/animations/chain/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + Card 1 + + + + Card 2 + + + + Card 3 + + +Play +Pause +Stop +``` diff --git a/static/usage/v8/animations/chain/angular/example_component_ts.md b/static/usage/v8/animations/chain/angular/example_component_ts.md new file mode 100644 index 00000000000..6c6acbef993 --- /dev/null +++ b/static/usage/v8/animations/chain/angular/example_component_ts.md @@ -0,0 +1,73 @@ +```ts +import { Component, ElementRef, ViewChildren } from '@angular/core'; +import type { QueryList } from '@angular/core'; +import type { Animation } from '@ionic/angular'; +import { AnimationController, IonCard } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + + private cardA: Animation; + private cardB: Animation; + private cardC: Animation; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + this.cardA = this.animationCtrl + .create() + .addElement(this.cardElements.get(0).nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, + ]); + + this.cardB = this.animationCtrl + .create() + .addElement(this.cardElements.get(1).nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]); + + this.cardC = this.animationCtrl + .create() + .addElement(this.cardElements.get(2).nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]); + } + + async play() { + await this.cardA.play(); + await this.cardB.play(); + await this.cardC.play(); + } + + pause() { + this.cardA.pause(); + this.cardB.pause(); + this.cardC.pause(); + } + + stop() { + this.cardA.stop(); + this.cardB.stop(); + this.cardC.stop(); + } +} +``` diff --git a/static/usage/v8/animations/chain/demo.html b/static/usage/v8/animations/chain/demo.html new file mode 100644 index 00000000000..a16169156ff --- /dev/null +++ b/static/usage/v8/animations/chain/demo.html @@ -0,0 +1,96 @@ + + + + + + Animation + + + + + + + + + + +
+ + Card 1 + + + + Card 2 + + + + Card 3 + + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v8/animations/chain/index.md b/static/usage/v8/animations/chain/index.md new file mode 100644 index 00000000000..58d8c2c888b --- /dev/null +++ b/static/usage/v8/animations/chain/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/animations/chain/javascript.md b/static/usage/v8/animations/chain/javascript.md new file mode 100644 index 00000000000..4fd3dc227d3 --- /dev/null +++ b/static/usage/v8/animations/chain/javascript.md @@ -0,0 +1,67 @@ +```html + + Card 1 + + + + Card 2 + + + + Card 3 + + +Play +Pause +Stop + + +``` diff --git a/static/usage/v8/animations/chain/react.md b/static/usage/v8/animations/chain/react.md new file mode 100644 index 00000000000..d00350793f3 --- /dev/null +++ b/static/usage/v8/animations/chain/react.md @@ -0,0 +1,89 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; + +function Example() { + const cardAEl = useRef(null); + const cardBEl = useRef(null); + const cardCEl = useRef(null); + + const cardA = useRef(); + const cardB = useRef(); + const cardC = useRef(); + + useEffect(() => { + if (!cardA.current) { + cardA.current = createAnimation() + .addElement(cardAEl.current!) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, + ]); + } + + if (!cardB.current) { + cardB.current = createAnimation() + .addElement(cardBEl.current!) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]); + } + if (!cardC.current) { + cardC.current = createAnimation() + .addElement(cardCEl.current!) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]); + } + }, [cardAEl, cardBEl, cardCEl]); + + const play = async () => { + await cardA.current?.play(); + await cardB.current?.play(); + await cardC.current?.play(); + }; + const pause = () => { + cardA.current?.pause(); + cardB.current?.pause(); + cardC.current?.pause(); + }; + const stop = () => { + cardA.current?.stop(); + cardB.current?.stop(); + cardC.current?.stop(); + }; + + return ( + <> + + Card 1 + + + + Card 2 + + + + Card 3 + + + Play + Pause + Stop + + ); +} +export default Example; +``` diff --git a/static/usage/v8/animations/chain/vue.md b/static/usage/v8/animations/chain/vue.md new file mode 100644 index 00000000000..48166a15be2 --- /dev/null +++ b/static/usage/v8/animations/chain/vue.md @@ -0,0 +1,100 @@ +```html + + + +``` diff --git a/static/usage/v8/animations/gesture/angular/example_component_css.md b/static/usage/v8/animations/gesture/angular/example_component_css.md new file mode 100644 index 00000000000..c06ce353f7c --- /dev/null +++ b/static/usage/v8/animations/gesture/angular/example_component_css.md @@ -0,0 +1,17 @@ +```css +.container { + flex-direction: column; +} + +.track { + width: 344px; + background: var(--ion-color-medium); + padding: 16px; +} + +ion-card { + width: 100px; + box-shadow: none; + margin: 0px; +} +``` diff --git a/static/usage/v8/animations/gesture/angular/example_component_html.md b/static/usage/v8/animations/gesture/angular/example_component_html.md new file mode 100644 index 00000000000..56b2deacd70 --- /dev/null +++ b/static/usage/v8/animations/gesture/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html +
+
+ + Card + +
+ +

Drag the square along the track.

+
+``` diff --git a/static/usage/v8/animations/gesture/angular/example_component_ts.md b/static/usage/v8/animations/gesture/angular/example_component_ts.md new file mode 100644 index 00000000000..7b9aadccf5e --- /dev/null +++ b/static/usage/v8/animations/gesture/angular/example_component_ts.md @@ -0,0 +1,82 @@ +```ts +import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import { AnimationController, GestureController, IonCard } from '@ionic/angular'; +import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + + private animation: Animation; + private gesture: Gesture; + private started = false; + private initialStep = 0; + + /** + * The track is 344px wide. + * The card is 100px wide. + * We want 16px of margin on each end of the track. + */ + private readonly MAX_TRANSLATE = 344 - 100 - 32; + + constructor(private animationCtrl: AnimationController, private gestureCtrl: GestureController) {} + + private onMove(ev: GestureDetail) { + if (!this.started) { + this.animation.progressStart(); + this.started = true; + } + + this.animation.progressStep(this.getStep(ev)); + } + + private onEnd(ev: GestureDetail) { + if (!this.started) { + return; + } + + this.gesture.enable(false); + + const step = this.getStep(ev); + const shouldComplete = step > 0.5; + + this.animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => { + this.gesture.enable(true); + }); + + this.initialStep = shouldComplete ? this.MAX_TRANSLATE : 0; + this.started = false; + } + + private clamp(min: number, n: number, max: number) { + return Math.max(min, Math.min(n, max)); + } + + private getStep(ev: GestureDetail) { + const delta = this.initialStep + ev.deltaX; + return this.clamp(0, delta / this.MAX_TRANSLATE, 1); + } + + ngAfterViewInit() { + this.animation = this.animationCtrl + .create() + .addElement(this.card.nativeElement) + .duration(1000) + .fromTo('transform', 'translateX(0)', `translateX(${this.MAX_TRANSLATE}px)`); + + const gesture = (this.gesture = this.gestureCtrl.create({ + el: this.card.nativeElement, + threshold: 0, + gestureName: 'card-drag', + onMove: (ev) => this.onMove(ev), + onEnd: (ev) => this.onEnd(ev), + })); + + gesture.enable(true); + } +} +``` diff --git a/static/usage/v8/animations/gesture/demo.html b/static/usage/v8/animations/gesture/demo.html new file mode 100644 index 00000000000..88aa10c5c38 --- /dev/null +++ b/static/usage/v8/animations/gesture/demo.html @@ -0,0 +1,113 @@ + + + + + + Animation + + + + + + + + + + +
+
+ + Card + +
+ +

Drag the square along the track.

+
+ + diff --git a/static/usage/v8/animations/gesture/index.md b/static/usage/v8/animations/gesture/index.md new file mode 100644 index 00000000000..b3e53d6d8f3 --- /dev/null +++ b/static/usage/v8/animations/gesture/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/animations/gesture/javascript.md b/static/usage/v8/animations/gesture/javascript.md new file mode 100644 index 00000000000..3535705d5eb --- /dev/null +++ b/static/usage/v8/animations/gesture/javascript.md @@ -0,0 +1,98 @@ +```html +
+
+ + Card + +
+
+ +

Drag the square along the track.

+ + + + +``` diff --git a/static/usage/v8/animations/gesture/react/main_css.md b/static/usage/v8/animations/gesture/react/main_css.md new file mode 100644 index 00000000000..c06ce353f7c --- /dev/null +++ b/static/usage/v8/animations/gesture/react/main_css.md @@ -0,0 +1,17 @@ +```css +.container { + flex-direction: column; +} + +.track { + width: 344px; + background: var(--ion-color-medium); + padding: 16px; +} + +ion-card { + width: 100px; + box-shadow: none; + margin: 0px; +} +``` diff --git a/static/usage/v8/animations/gesture/react/main_tsx.md b/static/usage/v8/animations/gesture/react/main_tsx.md new file mode 100644 index 00000000000..73fca7dfe22 --- /dev/null +++ b/static/usage/v8/animations/gesture/react/main_tsx.md @@ -0,0 +1,92 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonCard, IonCardContent, createAnimation, createGesture } from '@ionic/react'; +import type { Animation, Gesture, GestureDetail } from '@ionic/react'; + +import './main.css'; + +function Example() { + const cardEl = useRef(null); + const animation = useRef(null); + const gesture = useRef(null); + const initialStep = useRef(0); + const started = useRef(false); + + useEffect(() => { + if (animation.current === null) { + /** + * The track is 344px wide. + * The card is 100px wide. + * We want 16px of margin on each end of the track. + */ + const MAX_TRANSLATE = 344 - 100 - 32; + + animation.current = createAnimation() + .addElement(cardEl.current!) + .duration(1000) + .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`); + + gesture.current = createGesture({ + el: cardEl.current!, + threshold: 0, + gestureName: 'card-drag', + onMove: (ev) => onMove(ev), + onEnd: (ev) => onEnd(ev), + }); + + gesture.current.enable(true); + + const onMove = (ev: GestureDetail) => { + if (!started.current) { + animation.current!.progressStart(); + started.current = true; + } + + animation.current!.progressStep(getStep(ev)); + }; + + const onEnd = (ev: GestureDetail) => { + if (!started.current) { + return; + } + + gesture.current!.enable(false); + + const step = getStep(ev); + const shouldComplete = step > 0.5; + + animation.current!.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => { + gesture.current!.enable(true); + }); + + initialStep.current = shouldComplete ? MAX_TRANSLATE : 0; + started.current = false; + }; + + const clamp = (min: number, n: number, max: number) => { + return Math.max(min, Math.min(n, max)); + }; + + const getStep = (ev: GestureDetail) => { + const delta = initialStep.current + ev.deltaX; + return clamp(0, delta / MAX_TRANSLATE, 1); + }; + } + }, [cardEl]); + + return ( + <> +
+
+ + Card + +
+ +

Drag the square along the track.

+
+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/animations/gesture/vue.md b/static/usage/v8/animations/gesture/vue.md new file mode 100644 index 00000000000..9555355fe48 --- /dev/null +++ b/static/usage/v8/animations/gesture/vue.md @@ -0,0 +1,112 @@ +```html + + + + + +``` diff --git a/static/usage/v8/animations/group/angular/example_component_html.md b/static/usage/v8/animations/group/angular/example_component_html.md new file mode 100644 index 00000000000..8f8b5a83f58 --- /dev/null +++ b/static/usage/v8/animations/group/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + Card 1 + + + + Card 2 + + + + Card 3 + + +Play +Pause +Stop +``` diff --git a/static/usage/v8/animations/group/angular/example_component_ts.md b/static/usage/v8/animations/group/angular/example_component_ts.md new file mode 100644 index 00000000000..63f7a7b2f7a --- /dev/null +++ b/static/usage/v8/animations/group/angular/example_component_ts.md @@ -0,0 +1,66 @@ +```ts +import { Component, ElementRef, ViewChildren } from '@angular/core'; +import type { QueryList } from '@angular/core'; +import type { Animation } from '@ionic/angular'; +import { AnimationController, IonCard } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChildren(IonCard, { read: ElementRef }) cardElements: QueryList>; + + private animation: Animation; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + const cardA = this.animationCtrl + .create() + .addElement(this.cardElements.get(0).nativeElement) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0) ' }, + ]); + + const cardB = this.animationCtrl + .create() + .addElement(this.cardElements.get(1).nativeElement) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]); + + const cardC = this.animationCtrl + .create() + .addElement(this.cardElements.get(2).nativeElement) + .duration(5000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.5)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]); + + this.animation = this.animationCtrl + .create() + .duration(2000) + .iterations(Infinity) + .addAnimation([cardA, cardB, cardC]); + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v8/animations/group/demo.html b/static/usage/v8/animations/group/demo.html new file mode 100644 index 00000000000..36a7b847c5d --- /dev/null +++ b/static/usage/v8/animations/group/demo.html @@ -0,0 +1,87 @@ + + + + + + Animation + + + + + + + + + + +
+ + Card 1 + + + + Card 2 + + + + Card 3 + + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v8/animations/group/index.md b/static/usage/v8/animations/group/index.md new file mode 100644 index 00000000000..5d312219efa --- /dev/null +++ b/static/usage/v8/animations/group/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/animations/group/javascript.md b/static/usage/v8/animations/group/javascript.md new file mode 100644 index 00000000000..3630f6520df --- /dev/null +++ b/static/usage/v8/animations/group/javascript.md @@ -0,0 +1,46 @@ +```html + + Card 1 + + + + Card 2 + + + + Card 3 + + +Play +Pause +Stop + + +``` diff --git a/static/usage/v8/animations/group/react.md b/static/usage/v8/animations/group/react.md new file mode 100644 index 00000000000..dc445826e82 --- /dev/null +++ b/static/usage/v8/animations/group/react.md @@ -0,0 +1,75 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; + +function Example() { + const cardAEl = useRef(null); + const cardBEl = useRef(null); + const cardCEl = useRef(null); + + const animation = useRef(null); + + useEffect(() => { + if (animation.current === null) { + const cardA = createAnimation() + .addElement(cardAEl.current!) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0) ' }, + ]); + + const cardB = createAnimation() + .addElement(cardBEl.current!) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]); + + const cardC = createAnimation() + .addElement(cardCEl.current!) + .duration(5000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.5)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]); + + animation.current = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]); + } + }, [cardAEl, cardBEl, cardCEl]); + + const play = () => { + animation.current?.play(); + }; + const pause = () => { + animation.current?.pause(); + }; + const stop = () => { + animation.current?.stop(); + }; + + return ( + <> + + Card 1 + + + + Card 2 + + + + Card 3 + + + Play + Pause + Stop + + ); +} +export default Example; +``` diff --git a/static/usage/v8/animations/group/vue.md b/static/usage/v8/animations/group/vue.md new file mode 100644 index 00000000000..144eb7b8259 --- /dev/null +++ b/static/usage/v8/animations/group/vue.md @@ -0,0 +1,83 @@ +```html + + + +``` diff --git a/static/usage/v8/animations/keyframes/angular/example_component_html.md b/static/usage/v8/animations/keyframes/angular/example_component_html.md new file mode 100644 index 00000000000..035212f98d4 --- /dev/null +++ b/static/usage/v8/animations/keyframes/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + Card + +Play +Pause +Stop +``` diff --git a/static/usage/v8/animations/keyframes/angular/example_component_ts.md b/static/usage/v8/animations/keyframes/angular/example_component_ts.md new file mode 100644 index 00000000000..4ee04bea423 --- /dev/null +++ b/static/usage/v8/animations/keyframes/angular/example_component_ts.md @@ -0,0 +1,42 @@ +```ts +import { Component, ElementRef, ViewChild } from '@angular/core'; +import type { Animation } from '@ionic/angular'; +import { AnimationController, IonCard, IonCardContent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + + private animation: Animation; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + this.animation = this.animationCtrl + .create() + .addElement(this.card.nativeElement) + .duration(3000) + .iterations(Infinity) + .keyframes([ + { offset: 0, width: '80px' }, + { offset: 0.72, width: 'var(--width)' }, + { offset: 1, width: '240px' }, + ]); + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v8/animations/keyframes/demo.html b/static/usage/v8/animations/keyframes/demo.html new file mode 100644 index 00000000000..f7c0bb46175 --- /dev/null +++ b/static/usage/v8/animations/keyframes/demo.html @@ -0,0 +1,61 @@ + + + + + + Keyframe Animations + + + + + + + + + + +
+ + Card + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v8/animations/keyframes/index.md b/static/usage/v8/animations/keyframes/index.md new file mode 100644 index 00000000000..ccf03b4cdb4 --- /dev/null +++ b/static/usage/v8/animations/keyframes/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/animations/keyframes/javascript.md b/static/usage/v8/animations/keyframes/javascript.md new file mode 100644 index 00000000000..7a2e574b8da --- /dev/null +++ b/static/usage/v8/animations/keyframes/javascript.md @@ -0,0 +1,20 @@ +```html + + Card + +Play +Pause +Stop + + +``` diff --git a/static/usage/v8/animations/keyframes/react.md b/static/usage/v8/animations/keyframes/react.md new file mode 100644 index 00000000000..21d066b5404 --- /dev/null +++ b/static/usage/v8/animations/keyframes/react.md @@ -0,0 +1,47 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; + +function Example() { + const cardEl = useRef(null); + + const animation = useRef(null); + + useEffect(() => { + if (animation.current === null) { + animation.current = createAnimation() + .addElement(cardEl.current!) + .duration(3000) + .iterations(Infinity) + .keyframes([ + { offset: 0, width: '80px' }, + { offset: 0.72, width: 'var(--width)' }, + { offset: 1, width: '240px' }, + ]); + } + }, [cardEl]); + + const play = () => { + animation.current?.play(); + }; + const pause = () => { + animation.current?.pause(); + }; + const stop = () => { + animation.current?.stop(); + }; + + return ( + <> + + Card + + Play + Pause + Stop + + ); +} +export default Example; +``` diff --git a/static/usage/v8/animations/keyframes/vue.md b/static/usage/v8/animations/keyframes/vue.md new file mode 100644 index 00000000000..a0fc0e4505a --- /dev/null +++ b/static/usage/v8/animations/keyframes/vue.md @@ -0,0 +1,60 @@ +```html + + + + + +``` diff --git a/static/usage/v8/animations/modal-override/angular/example_component_html.md b/static/usage/v8/animations/modal-override/angular/example_component_html.md new file mode 100644 index 00000000000..178ae34c17b --- /dev/null +++ b/static/usage/v8/animations/modal-override/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + Page + + + + Present Modal + + + + + Modal + + Close + + + + Modal Content + + + +``` diff --git a/static/usage/v8/animations/modal-override/angular/example_component_ts.md b/static/usage/v8/animations/modal-override/angular/example_component_ts.md new file mode 100644 index 00000000000..b1fe997c1d4 --- /dev/null +++ b/static/usage/v8/animations/modal-override/angular/example_component_ts.md @@ -0,0 +1,52 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import type { IonModal } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChild('modal', { static: true }) modal: IonModal; + + constructor(private animationCtrl: AnimationController) {} + + ngOnInit() { + const enterAnimation = (baseEl: HTMLElement) => { + const root = baseEl.shadowRoot; + + const backdropAnimation = this.animationCtrl + .create() + .addElement(root.querySelector('ion-backdrop')) + .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); + + const wrapperAnimation = this.animationCtrl + .create() + .addElement(root.querySelector('.modal-wrapper')) + .keyframes([ + { offset: 0, opacity: '0', transform: 'scale(0)' }, + { offset: 1, opacity: '0.99', transform: 'scale(1)' }, + ]); + + return this.animationCtrl + .create() + .addElement(baseEl) + .easing('ease-out') + .duration(500) + .addAnimation([backdropAnimation, wrapperAnimation]); + }; + + const leaveAnimation = (baseEl: HTMLElement) => { + return enterAnimation(baseEl).direction('reverse'); + }; + + this.modal.enterAnimation = enterAnimation; + this.modal.leaveAnimation = leaveAnimation; + } + + closeModal() { + this.modal.dismiss(); + } +} +``` diff --git a/static/usage/v8/animations/modal-override/demo.html b/static/usage/v8/animations/modal-override/demo.html new file mode 100644 index 00000000000..15da72756db --- /dev/null +++ b/static/usage/v8/animations/modal-override/demo.html @@ -0,0 +1,78 @@ + + + + + + Accordion + + + + + + + + + + + + Page + + + +
+ Present Modal + + + + Modal + + Close + + + + Modal Content + +
+ + + + + + diff --git a/static/usage/v8/animations/modal-override/index.md b/static/usage/v8/animations/modal-override/index.md new file mode 100644 index 00000000000..ba289f42c62 --- /dev/null +++ b/static/usage/v8/animations/modal-override/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/animations/modal-override/javascript.md b/static/usage/v8/animations/modal-override/javascript.md new file mode 100644 index 00000000000..0efad523d3b --- /dev/null +++ b/static/usage/v8/animations/modal-override/javascript.md @@ -0,0 +1,57 @@ +```html + + + Page + + + + Present Modal + + + + Modal + + Close + + + + Modal Content + + + + +``` diff --git a/static/usage/v8/animations/modal-override/react.md b/static/usage/v8/animations/modal-override/react.md new file mode 100644 index 00000000000..730881c49a9 --- /dev/null +++ b/static/usage/v8/animations/modal-override/react.md @@ -0,0 +1,71 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonButton, + IonButtons, + IonContent, + IonHeader, + IonModal, + IonToolbar, + IonTitle, + createAnimation, +} from '@ionic/react'; + +function Example() { + const modalEl = useRef(null); + + const enterAnimation = (baseEl: HTMLElement) => { + const root = baseEl.shadowRoot!; + + const backdropAnimation = createAnimation() + .addElement(root.querySelector('ion-backdrop')!) + .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); + + const wrapperAnimation = createAnimation() + .addElement(root.querySelector('.modal-wrapper')!) + .keyframes([ + { offset: 0, opacity: '0', transform: 'scale(0)' }, + { offset: 1, opacity: '0.99', transform: 'scale(1)' }, + ]); + + return createAnimation() + .addElement(baseEl) + .easing('ease-out') + .duration(500) + .addAnimation([backdropAnimation, wrapperAnimation]); + }; + + const leaveAnimation = (baseEl: HTMLElement) => { + return enterAnimation(baseEl).direction('reverse'); + }; + + const closeModal = () => { + modalEl.current?.dismiss(); + }; + + return ( + <> + + + Page + + + + Present Modal + + + + Modal + + Close + + + + Modal Content + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/animations/modal-override/vue.md b/static/usage/v8/animations/modal-override/vue.md new file mode 100644 index 00000000000..82c05ba66e6 --- /dev/null +++ b/static/usage/v8/animations/modal-override/vue.md @@ -0,0 +1,90 @@ +```html + + + +``` diff --git a/static/usage/v8/animations/preference-based/angular/example_component_css.md b/static/usage/v8/animations/preference-based/angular/example_component_css.md new file mode 100644 index 00000000000..eb219f43513 --- /dev/null +++ b/static/usage/v8/animations/preference-based/angular/example_component_css.md @@ -0,0 +1,16 @@ +```css +ion-card { + color: white; + opacity: 0.5; + background: blue; + margin: 10px; + + --background: red; +} + +@media (prefers-color-scheme: dark) { + ion-card { + --background: green; + } +} +``` diff --git a/static/usage/v8/animations/preference-based/angular/example_component_html.md b/static/usage/v8/animations/preference-based/angular/example_component_html.md new file mode 100644 index 00000000000..1bd8875b1b3 --- /dev/null +++ b/static/usage/v8/animations/preference-based/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + Card + + +Play +Pause +Stop +``` diff --git a/static/usage/v8/animations/preference-based/angular/example_component_ts.md b/static/usage/v8/animations/preference-based/angular/example_component_ts.md new file mode 100644 index 00000000000..c0e383d5ec0 --- /dev/null +++ b/static/usage/v8/animations/preference-based/angular/example_component_ts.md @@ -0,0 +1,41 @@ +```ts +import { Component, ElementRef, ViewChildren, ViewChild } from '@angular/core'; +import type { QueryList } from '@angular/core'; +import type { Animation } from '@ionic/angular'; +import { AnimationController, IonCard } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], +}) +export class ExampleComponent { + @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + + private animation: Animation; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + this.animation = this.animationCtrl + .create() + .addElement(this.card.nativeElement) + .duration(1500) + .iterations(Infinity) + .direction('alternate') + .fromTo('background', 'blue', 'var(--background)'); + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v8/animations/preference-based/demo.html b/static/usage/v8/animations/preference-based/demo.html new file mode 100644 index 00000000000..02edd9cd4f4 --- /dev/null +++ b/static/usage/v8/animations/preference-based/demo.html @@ -0,0 +1,71 @@ + + + + + + Animation + + + + + + + + + + +
+ + Card + + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v8/animations/preference-based/index.md b/static/usage/v8/animations/preference-based/index.md new file mode 100644 index 00000000000..e4f2597a6df --- /dev/null +++ b/static/usage/v8/animations/preference-based/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/animations/preference-based/javascript.md b/static/usage/v8/animations/preference-based/javascript.md new file mode 100644 index 00000000000..8ad151afcf7 --- /dev/null +++ b/static/usage/v8/animations/preference-based/javascript.md @@ -0,0 +1,35 @@ +```html + + Card + + +Play +Pause +Stop + + + + +``` diff --git a/static/usage/v8/animations/preference-based/react/main_css.md b/static/usage/v8/animations/preference-based/react/main_css.md new file mode 100644 index 00000000000..eb219f43513 --- /dev/null +++ b/static/usage/v8/animations/preference-based/react/main_css.md @@ -0,0 +1,16 @@ +```css +ion-card { + color: white; + opacity: 0.5; + background: blue; + margin: 10px; + + --background: red; +} + +@media (prefers-color-scheme: dark) { + ion-card { + --background: green; + } +} +``` diff --git a/static/usage/v8/animations/preference-based/react/main_tsx.md b/static/usage/v8/animations/preference-based/react/main_tsx.md new file mode 100644 index 00000000000..a46df596ed7 --- /dev/null +++ b/static/usage/v8/animations/preference-based/react/main_tsx.md @@ -0,0 +1,47 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; + +import './main.css'; + +function Example() { + const cardEl = useRef(null); + + const animation = useRef(null); + + useEffect(() => { + if (animation.current === null) { + animation.current = createAnimation() + .addElement(cardEl.current!) + .duration(1500) + .iterations(Infinity) + .direction('alternate') + .fromTo('background', 'blue', 'var(--background)'); + } + }, [cardEl]); + + const play = () => { + animation.current?.play(); + }; + const pause = () => { + animation.current?.pause(); + }; + const stop = () => { + animation.current?.stop(); + }; + + return ( + <> + + Card + + + Play + Pause + Stop + + ); +} +export default Example; +``` diff --git a/static/usage/v8/animations/preference-based/vue.md b/static/usage/v8/animations/preference-based/vue.md new file mode 100644 index 00000000000..db703ca5466 --- /dev/null +++ b/static/usage/v8/animations/preference-based/vue.md @@ -0,0 +1,68 @@ +```html + + + + + +``` diff --git a/static/usage/v8/avatar/basic/angular.md b/static/usage/v8/avatar/basic/angular.md new file mode 100644 index 00000000000..a74cea822be --- /dev/null +++ b/static/usage/v8/avatar/basic/angular.md @@ -0,0 +1,5 @@ +```html + + Silhouette of a person's head + +``` diff --git a/static/usage/v8/avatar/basic/demo.html b/static/usage/v8/avatar/basic/demo.html new file mode 100644 index 00000000000..79693427de8 --- /dev/null +++ b/static/usage/v8/avatar/basic/demo.html @@ -0,0 +1,24 @@ + + + + + + Avatar + + + + + + + + + +
+ + Silhouette of a person's head + +
+ + + + diff --git a/static/usage/v8/avatar/basic/index.md b/static/usage/v8/avatar/basic/index.md new file mode 100644 index 00000000000..8c51fa21d00 --- /dev/null +++ b/static/usage/v8/avatar/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/avatar/basic/javascript.md b/static/usage/v8/avatar/basic/javascript.md new file mode 100644 index 00000000000..a74cea822be --- /dev/null +++ b/static/usage/v8/avatar/basic/javascript.md @@ -0,0 +1,5 @@ +```html + + Silhouette of a person's head + +``` diff --git a/static/usage/v8/avatar/basic/react.md b/static/usage/v8/avatar/basic/react.md new file mode 100644 index 00000000000..9fe5dafb88f --- /dev/null +++ b/static/usage/v8/avatar/basic/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonAvatar } from '@ionic/react'; + +function Example() { + return ( + <> + + Silhouette of a person's head + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/avatar/basic/vue.md b/static/usage/v8/avatar/basic/vue.md new file mode 100644 index 00000000000..5136ca90400 --- /dev/null +++ b/static/usage/v8/avatar/basic/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v8/avatar/chip/angular.md b/static/usage/v8/avatar/chip/angular.md new file mode 100644 index 00000000000..6fa2d82aa0b --- /dev/null +++ b/static/usage/v8/avatar/chip/angular.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of a person's head + + Chip Avatar + +``` diff --git a/static/usage/v8/avatar/chip/demo.html b/static/usage/v8/avatar/chip/demo.html new file mode 100644 index 00000000000..760f628a9e5 --- /dev/null +++ b/static/usage/v8/avatar/chip/demo.html @@ -0,0 +1,27 @@ + + + + + + Avatar + + + + + + + + + +
+ + + Silhouette of a person's head + + Chip Avatar + +
+ + + + diff --git a/static/usage/v8/avatar/chip/index.md b/static/usage/v8/avatar/chip/index.md new file mode 100644 index 00000000000..d3a7fc0f6a9 --- /dev/null +++ b/static/usage/v8/avatar/chip/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/avatar/chip/javascript.md b/static/usage/v8/avatar/chip/javascript.md new file mode 100644 index 00000000000..6fa2d82aa0b --- /dev/null +++ b/static/usage/v8/avatar/chip/javascript.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of a person's head + + Chip Avatar + +``` diff --git a/static/usage/v8/avatar/chip/react.md b/static/usage/v8/avatar/chip/react.md new file mode 100644 index 00000000000..69bd5dbb4fb --- /dev/null +++ b/static/usage/v8/avatar/chip/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonAvatar, IonChip, IonLabel } from '@ionic/react'; +function Example() { + return ( + <> + + + Silhouette of a person's head + + Chip Avatar + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/avatar/chip/vue.md b/static/usage/v8/avatar/chip/vue.md new file mode 100644 index 00000000000..c872bb48de3 --- /dev/null +++ b/static/usage/v8/avatar/chip/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/avatar/item/angular.md b/static/usage/v8/avatar/item/angular.md new file mode 100644 index 00000000000..5bf15fbc737 --- /dev/null +++ b/static/usage/v8/avatar/item/angular.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of a person's head + + Item Avatar + +``` diff --git a/static/usage/v8/avatar/item/demo.html b/static/usage/v8/avatar/item/demo.html new file mode 100644 index 00000000000..4b99c6cff32 --- /dev/null +++ b/static/usage/v8/avatar/item/demo.html @@ -0,0 +1,27 @@ + + + + + + Avatar + + + + + + + + + +
+ + + Silhouette of a person's head + + Item Avatar + +
+ + + + diff --git a/static/usage/v8/avatar/item/index.md b/static/usage/v8/avatar/item/index.md new file mode 100644 index 00000000000..52814ca5af0 --- /dev/null +++ b/static/usage/v8/avatar/item/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/avatar/item/javascript.md b/static/usage/v8/avatar/item/javascript.md new file mode 100644 index 00000000000..5bf15fbc737 --- /dev/null +++ b/static/usage/v8/avatar/item/javascript.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of a person's head + + Item Avatar + +``` diff --git a/static/usage/v8/avatar/item/react.md b/static/usage/v8/avatar/item/react.md new file mode 100644 index 00000000000..71b562a5d7b --- /dev/null +++ b/static/usage/v8/avatar/item/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonAvatar, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + <> + + + Silhouette of a person's head + + Item Avatar + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/avatar/item/vue.md b/static/usage/v8/avatar/item/vue.md new file mode 100644 index 00000000000..5a9ddea4499 --- /dev/null +++ b/static/usage/v8/avatar/item/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/avatar/theming/css-properties/angular/example_component_css.md b/static/usage/v8/avatar/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..5a97e1fc6ae --- /dev/null +++ b/static/usage/v8/avatar/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-avatar { + --border-radius: 4px; +} +``` diff --git a/static/usage/v8/avatar/theming/css-properties/angular/example_component_html.md b/static/usage/v8/avatar/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..a74cea822be --- /dev/null +++ b/static/usage/v8/avatar/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Silhouette of a person's head + +``` diff --git a/static/usage/v8/avatar/theming/css-properties/demo.html b/static/usage/v8/avatar/theming/css-properties/demo.html new file mode 100644 index 00000000000..242eba8c1b0 --- /dev/null +++ b/static/usage/v8/avatar/theming/css-properties/demo.html @@ -0,0 +1,30 @@ + + + + + + Avatar + + + + + + + + + + + +
+ + Silhouette of a person's head + +
+ + + + diff --git a/static/usage/v8/avatar/theming/css-properties/index.md b/static/usage/v8/avatar/theming/css-properties/index.md new file mode 100644 index 00000000000..38bc99f7e8a --- /dev/null +++ b/static/usage/v8/avatar/theming/css-properties/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/avatar/theming/css-properties/javascript.md b/static/usage/v8/avatar/theming/css-properties/javascript.md new file mode 100644 index 00000000000..f866e15762d --- /dev/null +++ b/static/usage/v8/avatar/theming/css-properties/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Silhouette of a person's head + +``` diff --git a/static/usage/v8/avatar/theming/css-properties/react/main_css.md b/static/usage/v8/avatar/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..5a97e1fc6ae --- /dev/null +++ b/static/usage/v8/avatar/theming/css-properties/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-avatar { + --border-radius: 4px; +} +``` diff --git a/static/usage/v8/avatar/theming/css-properties/react/main_tsx.md b/static/usage/v8/avatar/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..180b8998a3f --- /dev/null +++ b/static/usage/v8/avatar/theming/css-properties/react/main_tsx.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonAvatar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Silhouette of a person's head + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/avatar/theming/css-properties/vue.md b/static/usage/v8/avatar/theming/css-properties/vue.md new file mode 100644 index 00000000000..32237336a1c --- /dev/null +++ b/static/usage/v8/avatar/theming/css-properties/vue.md @@ -0,0 +1,22 @@ +```html + + + + + +``` diff --git a/static/usage/v8/back-button/basic/angular/app_module_ts.md b/static/usage/v8/back-button/basic/angular/app_module_ts.md new file mode 100644 index 00000000000..3c20b511446 --- /dev/null +++ b/static/usage/v8/back-button/basic/angular/app_module_ts.md @@ -0,0 +1,20 @@ +```ts +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; +import { ExampleComponent } from './example.component'; + +import { PageOneComponent } from './page-one.component'; +import { PageTwoComponent } from './page-two.component'; + +@NgModule({ + imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})], + declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` diff --git a/static/usage/v8/back-button/basic/angular/example_component_html.md b/static/usage/v8/back-button/basic/angular/example_component_html.md new file mode 100644 index 00000000000..1534ea3a6ec --- /dev/null +++ b/static/usage/v8/back-button/basic/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/back-button/basic/angular/example_component_ts.md b/static/usage/v8/back-button/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..b123a4858ce --- /dev/null +++ b/static/usage/v8/back-button/basic/angular/example_component_ts.md @@ -0,0 +1,13 @@ +```ts +import { Component } from '@angular/core'; + +import { PageOneComponent } from './page-one.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + component = PageOneComponent; +} +``` diff --git a/static/usage/v8/back-button/basic/angular/page_one_component_ts.md b/static/usage/v8/back-button/basic/angular/page_one_component_ts.md new file mode 100644 index 00000000000..d181c5a5268 --- /dev/null +++ b/static/usage/v8/back-button/basic/angular/page_one_component_ts.md @@ -0,0 +1,26 @@ +```ts +import { Component } from '@angular/core'; + +import { PageTwoComponent } from './page-two.component'; + +@Component({ + selector: 'app-page-one', + template: ` + + + Back Button + + + +

Page One

+

Navigate to the next page to see the back button.

+ + Navigate + + + `, +}) +export class PageOneComponent { + component = PageTwoComponent; +} +``` diff --git a/static/usage/v8/back-button/basic/angular/page_two_component_ts.md b/static/usage/v8/back-button/basic/angular/page_two_component_ts.md new file mode 100644 index 00000000000..b2cda11d2a8 --- /dev/null +++ b/static/usage/v8/back-button/basic/angular/page_two_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-page-two', + template: ` + + + + + + Back Button + + + +

Page Two

+

Use the back button to navigate to the previous page.

+ + `, +}) +export class PageTwoComponent {} +``` diff --git a/static/usage/v8/back-button/basic/demo.html b/static/usage/v8/back-button/basic/demo.html new file mode 100644 index 00000000000..771bf41ffcd --- /dev/null +++ b/static/usage/v8/back-button/basic/demo.html @@ -0,0 +1,61 @@ + + + + + + Back Button + + + + + + + + + + + + + + diff --git a/static/usage/v8/back-button/basic/index.md b/static/usage/v8/back-button/basic/index.md new file mode 100644 index 00000000000..27c7d6b0c0c --- /dev/null +++ b/static/usage/v8/back-button/basic/index.md @@ -0,0 +1,50 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_app_module_ts from './angular/app_module_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_page_one_component_ts from './angular/page_one_component_ts.md'; +import angular_page_two_component_ts from './angular/page_two_component_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_page_one_tsx from './react/page_one_tsx.md'; +import react_page_two_tsx from './react/page_two_tsx.md'; + +import vue_example from './vue/example_vue.md'; +import vue_page_one from './vue/page_one_vue.md'; +import vue_page_two from './vue/page_two_vue.md'; + + diff --git a/static/usage/v8/back-button/basic/javascript.md b/static/usage/v8/back-button/basic/javascript.md new file mode 100644 index 00000000000..5a8817ab291 --- /dev/null +++ b/static/usage/v8/back-button/basic/javascript.md @@ -0,0 +1,48 @@ +```html + + + + + +``` diff --git a/static/usage/v8/back-button/basic/react/main_tsx.md b/static/usage/v8/back-button/basic/react/main_tsx.md new file mode 100644 index 00000000000..f6196a362e9 --- /dev/null +++ b/static/usage/v8/back-button/basic/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonNav } from '@ionic/react'; + +import PageOne from './page-one'; + +function Example() { + return }>; +} +export default Example; +``` diff --git a/static/usage/v8/back-button/basic/react/page_one_tsx.md b/static/usage/v8/back-button/basic/react/page_one_tsx.md new file mode 100644 index 00000000000..b4e9f017c39 --- /dev/null +++ b/static/usage/v8/back-button/basic/react/page_one_tsx.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react'; + +import PageTwo from './page-two'; + +function PageOne() { + return ( + <> + + + Back Button + + + +

Page One

+

Navigate to the next page to see the back button.

+ }> + Navigate + + + + ); +} + +export default PageOne; +``` diff --git a/static/usage/v8/back-button/basic/react/page_two_tsx.md b/static/usage/v8/back-button/basic/react/page_two_tsx.md new file mode 100644 index 00000000000..dcfbd7ca20b --- /dev/null +++ b/static/usage/v8/back-button/basic/react/page_two_tsx.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react'; + +function PageTwo() { + return ( + <> + + + + + + Back Button + + + +

Page Two

+

Use the back button to navigate to the previous page.

+ + + ); +} + +export default PageTwo; +``` diff --git a/static/usage/v8/back-button/basic/vue/example_vue.md b/static/usage/v8/back-button/basic/vue/example_vue.md new file mode 100644 index 00000000000..ec054a80749 --- /dev/null +++ b/static/usage/v8/back-button/basic/vue/example_vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/back-button/basic/vue/page_one_vue.md b/static/usage/v8/back-button/basic/vue/page_one_vue.md new file mode 100644 index 00000000000..337a6877548 --- /dev/null +++ b/static/usage/v8/back-button/basic/vue/page_one_vue.md @@ -0,0 +1,30 @@ +```html + + + +``` diff --git a/static/usage/v8/back-button/basic/vue/page_two_vue.md b/static/usage/v8/back-button/basic/vue/page_two_vue.md new file mode 100644 index 00000000000..e26a6f13562 --- /dev/null +++ b/static/usage/v8/back-button/basic/vue/page_two_vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v8/back-button/custom/angular/app_module_ts.md b/static/usage/v8/back-button/custom/angular/app_module_ts.md new file mode 100644 index 00000000000..3c20b511446 --- /dev/null +++ b/static/usage/v8/back-button/custom/angular/app_module_ts.md @@ -0,0 +1,20 @@ +```ts +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; +import { ExampleComponent } from './example.component'; + +import { PageOneComponent } from './page-one.component'; +import { PageTwoComponent } from './page-two.component'; + +@NgModule({ + imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})], + declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` diff --git a/static/usage/v8/back-button/custom/angular/example_component_html.md b/static/usage/v8/back-button/custom/angular/example_component_html.md new file mode 100644 index 00000000000..1534ea3a6ec --- /dev/null +++ b/static/usage/v8/back-button/custom/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/back-button/custom/angular/example_component_ts.md b/static/usage/v8/back-button/custom/angular/example_component_ts.md new file mode 100644 index 00000000000..b123a4858ce --- /dev/null +++ b/static/usage/v8/back-button/custom/angular/example_component_ts.md @@ -0,0 +1,13 @@ +```ts +import { Component } from '@angular/core'; + +import { PageOneComponent } from './page-one.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + component = PageOneComponent; +} +``` diff --git a/static/usage/v8/back-button/custom/angular/page_one_component_ts.md b/static/usage/v8/back-button/custom/angular/page_one_component_ts.md new file mode 100644 index 00000000000..d181c5a5268 --- /dev/null +++ b/static/usage/v8/back-button/custom/angular/page_one_component_ts.md @@ -0,0 +1,26 @@ +```ts +import { Component } from '@angular/core'; + +import { PageTwoComponent } from './page-two.component'; + +@Component({ + selector: 'app-page-one', + template: ` + + + Back Button + + + +

Page One

+

Navigate to the next page to see the back button.

+ + Navigate + + + `, +}) +export class PageOneComponent { + component = PageTwoComponent; +} +``` diff --git a/static/usage/v8/back-button/custom/angular/page_two_component_ts.md b/static/usage/v8/back-button/custom/angular/page_two_component_ts.md new file mode 100644 index 00000000000..05a1bd64d79 --- /dev/null +++ b/static/usage/v8/back-button/custom/angular/page_two_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-page-two', + template: ` + + + + + + Back Button + + + +

Page Two

+

Use the back button to navigate to the previous page.

+ + `, +}) +export class PageTwoComponent {} +``` diff --git a/static/usage/v8/back-button/custom/demo.html b/static/usage/v8/back-button/custom/demo.html new file mode 100644 index 00000000000..c644726cb4a --- /dev/null +++ b/static/usage/v8/back-button/custom/demo.html @@ -0,0 +1,61 @@ + + + + + + Back Button + + + + + + + + + + + + + + diff --git a/static/usage/v8/back-button/custom/index.md b/static/usage/v8/back-button/custom/index.md new file mode 100644 index 00000000000..d90a901513f --- /dev/null +++ b/static/usage/v8/back-button/custom/index.md @@ -0,0 +1,50 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_app_module_ts from './angular/app_module_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_page_one_component_ts from './angular/page_one_component_ts.md'; +import angular_page_two_component_ts from './angular/page_two_component_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_page_one_tsx from './react/page_one_tsx.md'; +import react_page_two_tsx from './react/page_two_tsx.md'; + +import vue_example from './vue/example_vue.md'; +import vue_page_one from './vue/page_one_vue.md'; +import vue_page_two from './vue/page_two_vue.md'; + + diff --git a/static/usage/v8/back-button/custom/javascript.md b/static/usage/v8/back-button/custom/javascript.md new file mode 100644 index 00000000000..1558cb48ad5 --- /dev/null +++ b/static/usage/v8/back-button/custom/javascript.md @@ -0,0 +1,48 @@ +```html + + + + + +``` diff --git a/static/usage/v8/back-button/custom/react/main_tsx.md b/static/usage/v8/back-button/custom/react/main_tsx.md new file mode 100644 index 00000000000..f6196a362e9 --- /dev/null +++ b/static/usage/v8/back-button/custom/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonNav } from '@ionic/react'; + +import PageOne from './page-one'; + +function Example() { + return }>; +} +export default Example; +``` diff --git a/static/usage/v8/back-button/custom/react/page_one_tsx.md b/static/usage/v8/back-button/custom/react/page_one_tsx.md new file mode 100644 index 00000000000..b4e9f017c39 --- /dev/null +++ b/static/usage/v8/back-button/custom/react/page_one_tsx.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react'; + +import PageTwo from './page-two'; + +function PageOne() { + return ( + <> + + + Back Button + + + +

Page One

+

Navigate to the next page to see the back button.

+ }> + Navigate + + + + ); +} + +export default PageOne; +``` diff --git a/static/usage/v8/back-button/custom/react/page_two_tsx.md b/static/usage/v8/back-button/custom/react/page_two_tsx.md new file mode 100644 index 00000000000..34d30119913 --- /dev/null +++ b/static/usage/v8/back-button/custom/react/page_two_tsx.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react'; +import { caretBack } from 'ionicons/icons'; + +function PageTwo() { + return ( + <> + + + + + + Back Button + + + +

Page Two

+

Use the back button to navigate to the previous page.

+ + + ); +} + +export default PageTwo; +``` diff --git a/static/usage/v8/back-button/custom/vue/example_vue.md b/static/usage/v8/back-button/custom/vue/example_vue.md new file mode 100644 index 00000000000..ec054a80749 --- /dev/null +++ b/static/usage/v8/back-button/custom/vue/example_vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/back-button/custom/vue/page_one_vue.md b/static/usage/v8/back-button/custom/vue/page_one_vue.md new file mode 100644 index 00000000000..2702c543f5c --- /dev/null +++ b/static/usage/v8/back-button/custom/vue/page_one_vue.md @@ -0,0 +1,30 @@ +```html + + + +``` diff --git a/static/usage/v8/back-button/custom/vue/page_two_vue.md b/static/usage/v8/back-button/custom/vue/page_two_vue.md new file mode 100644 index 00000000000..4667abeced5 --- /dev/null +++ b/static/usage/v8/back-button/custom/vue/page_two_vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v8/backdrop/basic/angular/example_component_css.md b/static/usage/v8/backdrop/basic/angular/example_component_css.md new file mode 100644 index 00000000000..5889f31812d --- /dev/null +++ b/static/usage/v8/backdrop/basic/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-backdrop { + background: var(--ion-color-dark); + opacity: 0.3; +} +``` diff --git a/static/usage/v8/backdrop/basic/angular/example_component_html.md b/static/usage/v8/backdrop/basic/angular/example_component_html.md new file mode 100644 index 00000000000..64250c98aa0 --- /dev/null +++ b/static/usage/v8/backdrop/basic/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + +
+ + + Backdrop + + + + + Checkbox + + Button + +
+``` diff --git a/static/usage/v8/backdrop/basic/demo.html b/static/usage/v8/backdrop/basic/demo.html new file mode 100644 index 00000000000..7c2e9534d41 --- /dev/null +++ b/static/usage/v8/backdrop/basic/demo.html @@ -0,0 +1,38 @@ + + + + + + Backdrop + + + + + + + + + + + +
+ + + Backdrop + + + + + Checkbox + + Button + +
+ + + diff --git a/static/usage/v8/backdrop/basic/index.md b/static/usage/v8/backdrop/basic/index.md new file mode 100644 index 00000000000..491b5eec6e1 --- /dev/null +++ b/static/usage/v8/backdrop/basic/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/backdrop/basic/javascript.md b/static/usage/v8/backdrop/basic/javascript.md new file mode 100644 index 00000000000..076580a8b63 --- /dev/null +++ b/static/usage/v8/backdrop/basic/javascript.md @@ -0,0 +1,23 @@ +```html + + + +
+ + + Backdrop + + + + + Checkbox + + Button + +
+``` diff --git a/static/usage/v8/backdrop/basic/react/main_css.md b/static/usage/v8/backdrop/basic/react/main_css.md new file mode 100644 index 00000000000..5889f31812d --- /dev/null +++ b/static/usage/v8/backdrop/basic/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-backdrop { + background: var(--ion-color-dark); + opacity: 0.3; +} +``` diff --git a/static/usage/v8/backdrop/basic/react/main_tsx.md b/static/usage/v8/backdrop/basic/react/main_tsx.md new file mode 100644 index 00000000000..6d8103f0d1c --- /dev/null +++ b/static/usage/v8/backdrop/basic/react/main_tsx.md @@ -0,0 +1,37 @@ +```tsx +import React from 'react'; +import { + IonBackdrop, + IonHeader, + IonToolbar, + IonTitle, + IonContent, + IonItem, + IonCheckbox, + IonButton, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + +
+ + + Backdrop + + + + + Checkbox + + Button + +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/backdrop/basic/vue.md b/static/usage/v8/backdrop/basic/vue.md new file mode 100644 index 00000000000..247b67c098b --- /dev/null +++ b/static/usage/v8/backdrop/basic/vue.md @@ -0,0 +1,42 @@ +```html + + + + +``` diff --git a/static/usage/v8/backdrop/styling/angular/example_component_css.md b/static/usage/v8/backdrop/styling/angular/example_component_css.md new file mode 100644 index 00000000000..01a079a9d8c --- /dev/null +++ b/static/usage/v8/backdrop/styling/angular/example_component_css.md @@ -0,0 +1,21 @@ +```css +ion-backdrop { + opacity: 0.9; + background: var(--ion-color-primary); +} + +#box { + position: absolute; + top: 50%; + left: 50%; + transform: translateY(-50%) translateX(-50%); + z-index: 100; + display: flex; + align-items: center; + justify-content: center; + background: var(--ion-background-color, #fff); + width: 90%; + height: 100px; + border-radius: 10px; +} +``` diff --git a/static/usage/v8/backdrop/styling/angular/example_component_html.md b/static/usage/v8/backdrop/styling/angular/example_component_html.md new file mode 100644 index 00000000000..3c951690078 --- /dev/null +++ b/static/usage/v8/backdrop/styling/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + +
+ + + Backdrop + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam + perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident + expedita vero! +

+ +
+
+ + Clickable +
+``` diff --git a/static/usage/v8/backdrop/styling/demo.html b/static/usage/v8/backdrop/styling/demo.html new file mode 100644 index 00000000000..de8c9990dfd --- /dev/null +++ b/static/usage/v8/backdrop/styling/demo.html @@ -0,0 +1,57 @@ + + + + + + Backdrop + + + + + + + + + + +
+ + + Backdrop + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam + perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, + provident expedita vero! +

+ +
+
+ + Clickable +
+ + + diff --git a/static/usage/v8/backdrop/styling/index.md b/static/usage/v8/backdrop/styling/index.md new file mode 100644 index 00000000000..a7861a18ed7 --- /dev/null +++ b/static/usage/v8/backdrop/styling/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/backdrop/styling/javascript.md b/static/usage/v8/backdrop/styling/javascript.md new file mode 100644 index 00000000000..6c30f0c5c90 --- /dev/null +++ b/static/usage/v8/backdrop/styling/javascript.md @@ -0,0 +1,43 @@ +```html + + + +
+ + + Backdrop + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam + perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident + expedita vero! +

+ +
+
+ + Clickable +
+``` diff --git a/static/usage/v8/backdrop/styling/react/main_css.md b/static/usage/v8/backdrop/styling/react/main_css.md new file mode 100644 index 00000000000..01a079a9d8c --- /dev/null +++ b/static/usage/v8/backdrop/styling/react/main_css.md @@ -0,0 +1,21 @@ +```css +ion-backdrop { + opacity: 0.9; + background: var(--ion-color-primary); +} + +#box { + position: absolute; + top: 50%; + left: 50%; + transform: translateY(-50%) translateX(-50%); + z-index: 100; + display: flex; + align-items: center; + justify-content: center; + background: var(--ion-background-color, #fff); + width: 90%; + height: 100px; + border-radius: 10px; +} +``` diff --git a/static/usage/v8/backdrop/styling/react/main_tsx.md b/static/usage/v8/backdrop/styling/react/main_tsx.md new file mode 100644 index 00000000000..978b47ce750 --- /dev/null +++ b/static/usage/v8/backdrop/styling/react/main_tsx.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonCheckbox, IonButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + +
+ + + Backdrop + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam + perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, + provident expedita vero! +

+ +
+
+ + + Clickable + +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/backdrop/styling/vue.md b/static/usage/v8/backdrop/styling/vue.md new file mode 100644 index 00000000000..7e884eb2fb4 --- /dev/null +++ b/static/usage/v8/backdrop/styling/vue.md @@ -0,0 +1,53 @@ +```html + + + + +``` diff --git a/static/usage/v8/badge/basic/angular.md b/static/usage/v8/badge/basic/angular.md new file mode 100644 index 00000000000..9f8de1ff7eb --- /dev/null +++ b/static/usage/v8/badge/basic/angular.md @@ -0,0 +1,12 @@ +```html + + + 11 + Badge in start slot + + + 22 + Badge in end slot + + +``` diff --git a/static/usage/v8/badge/basic/demo.html b/static/usage/v8/badge/basic/demo.html new file mode 100644 index 00000000000..4da5975ef55 --- /dev/null +++ b/static/usage/v8/badge/basic/demo.html @@ -0,0 +1,37 @@ + + + + + + Badge + + + + + + + + + + + +
+ + + 11 + Badge in start slot + + + 22 + Badge in end slot + + +
+ + + + diff --git a/static/usage/v8/badge/basic/index.md b/static/usage/v8/badge/basic/index.md new file mode 100644 index 00000000000..843c4a046cf --- /dev/null +++ b/static/usage/v8/badge/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/badge/basic/javascript.md b/static/usage/v8/badge/basic/javascript.md new file mode 100644 index 00000000000..9f8de1ff7eb --- /dev/null +++ b/static/usage/v8/badge/basic/javascript.md @@ -0,0 +1,12 @@ +```html + + + 11 + Badge in start slot + + + 22 + Badge in end slot + + +``` diff --git a/static/usage/v8/badge/basic/react.md b/static/usage/v8/badge/basic/react.md new file mode 100644 index 00000000000..4d569dbbd02 --- /dev/null +++ b/static/usage/v8/badge/basic/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react'; +function Example() { + return ( + + + 11 + Badge in start slot + + + 22 + Badge in end slot + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/badge/basic/vue.md b/static/usage/v8/badge/basic/vue.md new file mode 100644 index 00000000000..e02b9c552e3 --- /dev/null +++ b/static/usage/v8/badge/basic/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v8/badge/theming/colors/angular.md b/static/usage/v8/badge/theming/colors/angular.md new file mode 100644 index 00000000000..bad750b1bfc --- /dev/null +++ b/static/usage/v8/badge/theming/colors/angular.md @@ -0,0 +1,28 @@ +```html + + + Followers + 22k + + + Likes + 118k + + + Stars + 34k + + + Completed + 80 + + + Warnings + 70 + + + Notifications + 1000 + + +``` diff --git a/static/usage/v8/badge/theming/colors/demo.html b/static/usage/v8/badge/theming/colors/demo.html new file mode 100644 index 00000000000..7ab5aec3dc8 --- /dev/null +++ b/static/usage/v8/badge/theming/colors/demo.html @@ -0,0 +1,53 @@ + + + + + + Badge + + + + + + + + + + + +
+ + + Followers + 22k + + + Likes + 118k + + + Stars + 34k + + + Completed + 80 + + + Warnings + 70 + + + Notifications + 1000 + + +
+ + + + diff --git a/static/usage/v8/badge/theming/colors/index.md b/static/usage/v8/badge/theming/colors/index.md new file mode 100644 index 00000000000..1b640d0675b --- /dev/null +++ b/static/usage/v8/badge/theming/colors/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/badge/theming/colors/javascript.md b/static/usage/v8/badge/theming/colors/javascript.md new file mode 100644 index 00000000000..bad750b1bfc --- /dev/null +++ b/static/usage/v8/badge/theming/colors/javascript.md @@ -0,0 +1,28 @@ +```html + + + Followers + 22k + + + Likes + 118k + + + Stars + 34k + + + Completed + 80 + + + Warnings + 70 + + + Notifications + 1000 + + +``` diff --git a/static/usage/v8/badge/theming/colors/react.md b/static/usage/v8/badge/theming/colors/react.md new file mode 100644 index 00000000000..ad53c54274a --- /dev/null +++ b/static/usage/v8/badge/theming/colors/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react'; +function Example() { + return ( + + + Followers + 22k + + + Likes + 118k + + + Stars + 34k + + + Completed + 80 + + + Warnings + 70 + + + Notifications + 1000 + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/badge/theming/colors/vue.md b/static/usage/v8/badge/theming/colors/vue.md new file mode 100644 index 00000000000..77e5c1a9e97 --- /dev/null +++ b/static/usage/v8/badge/theming/colors/vue.md @@ -0,0 +1,39 @@ +```html + + + +``` diff --git a/static/usage/v8/badge/theming/css-properties/angular/example_component_css.md b/static/usage/v8/badge/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..cf47682b14d --- /dev/null +++ b/static/usage/v8/badge/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-badge { + --background: purple; + --color: white; + --padding-end: 20px; + --padding-start: 20px; +} +``` diff --git a/static/usage/v8/badge/theming/css-properties/angular/example_component_html.md b/static/usage/v8/badge/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..92df32f60de --- /dev/null +++ b/static/usage/v8/badge/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + + Badges styled + 1 + + +``` diff --git a/static/usage/v8/badge/theming/css-properties/demo.html b/static/usage/v8/badge/theming/css-properties/demo.html new file mode 100644 index 00000000000..4b5d0913da0 --- /dev/null +++ b/static/usage/v8/badge/theming/css-properties/demo.html @@ -0,0 +1,40 @@ + + + + + + Select - Styling the Select + + + + + + + + + + + +
+ + + Badges styled + 1 + + +
+ + + + diff --git a/static/usage/v8/badge/theming/css-properties/index.md b/static/usage/v8/badge/theming/css-properties/index.md new file mode 100644 index 00000000000..3fdf7e333a1 --- /dev/null +++ b/static/usage/v8/badge/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/badge/theming/css-properties/javascript.md b/static/usage/v8/badge/theming/css-properties/javascript.md new file mode 100644 index 00000000000..6dedc97ba4d --- /dev/null +++ b/static/usage/v8/badge/theming/css-properties/javascript.md @@ -0,0 +1,17 @@ +```html + + + Badges styled + 1 + + + + +``` diff --git a/static/usage/v8/badge/theming/css-properties/react/main_css.md b/static/usage/v8/badge/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..cf47682b14d --- /dev/null +++ b/static/usage/v8/badge/theming/css-properties/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-badge { + --background: purple; + --color: white; + --padding-end: 20px; + --padding-start: 20px; +} +``` diff --git a/static/usage/v8/badge/theming/css-properties/react/main_tsx.md b/static/usage/v8/badge/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..fea8b34191e --- /dev/null +++ b/static/usage/v8/badge/theming/css-properties/react/main_tsx.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + Badges styled + 1 + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/badge/theming/css-properties/vue.md b/static/usage/v8/badge/theming/css-properties/vue.md new file mode 100644 index 00000000000..08a5d88d81e --- /dev/null +++ b/static/usage/v8/badge/theming/css-properties/vue.md @@ -0,0 +1,28 @@ +```html + + + + + +``` diff --git a/static/usage/v8/breadcrumbs/basic/angular.md b/static/usage/v8/breadcrumbs/basic/angular.md new file mode 100644 index 00000000000..9683fbe6792 --- /dev/null +++ b/static/usage/v8/breadcrumbs/basic/angular.md @@ -0,0 +1,8 @@ +```html + + Home + Electronics + Cameras + Film + +``` diff --git a/static/usage/v8/breadcrumbs/basic/demo.html b/static/usage/v8/breadcrumbs/basic/demo.html new file mode 100644 index 00000000000..48f8d0b182c --- /dev/null +++ b/static/usage/v8/breadcrumbs/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + Breadcrumbs + + + + + + + + + +
+ + Home + Electronics + Cameras + Film + +
+ + + + diff --git a/static/usage/v8/breadcrumbs/basic/index.md b/static/usage/v8/breadcrumbs/basic/index.md new file mode 100644 index 00000000000..0159e5aa44f --- /dev/null +++ b/static/usage/v8/breadcrumbs/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/breadcrumbs/basic/javascript.md b/static/usage/v8/breadcrumbs/basic/javascript.md new file mode 100644 index 00000000000..9683fbe6792 --- /dev/null +++ b/static/usage/v8/breadcrumbs/basic/javascript.md @@ -0,0 +1,8 @@ +```html + + Home + Electronics + Cameras + Film + +``` diff --git a/static/usage/v8/breadcrumbs/basic/react.md b/static/usage/v8/breadcrumbs/basic/react.md new file mode 100644 index 00000000000..602a5174490 --- /dev/null +++ b/static/usage/v8/breadcrumbs/basic/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; +function Example() { + return ( + + Home + Electronics + Cameras + Film + + ); +} +export default Example; +``` diff --git a/static/usage/v8/breadcrumbs/basic/vue.md b/static/usage/v8/breadcrumbs/basic/vue.md new file mode 100644 index 00000000000..f665b4cb686 --- /dev/null +++ b/static/usage/v8/breadcrumbs/basic/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md new file mode 100644 index 00000000000..926479c1e85 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + + Home + Electronics + Photography + Cameras + Film + 35 mm + +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md new file mode 100644 index 00000000000..8ae69af72a5 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md @@ -0,0 +1,15 @@ +```ts +import { Component, ViewChild } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + maxBreadcrumbs = 4; + + expandBreadcrumbs() { + this.maxBreadcrumbs = undefined; + } +} +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/demo.html b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/demo.html new file mode 100644 index 00000000000..003eb1c874f --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/demo.html @@ -0,0 +1,37 @@ + + + + + + Popover + + + + + + + + + +
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +
+ + + + + + diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/index.md new file mode 100644 index 00000000000..c6f75cb1155 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/javascript.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/javascript.md new file mode 100644 index 00000000000..6e720c27d3c --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/javascript.md @@ -0,0 +1,18 @@ +```html + + Home + Electronics + Photography + Cameras + Film + 35 mm + + + +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/react.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/react.md new file mode 100644 index 00000000000..b4933d4cf8f --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/react.md @@ -0,0 +1,20 @@ +```tsx +import React, { useState } from 'react'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; + +function Example() { + const [maxBreadcrumbs, setMaxBreadcrumbs] = useState(4); + + return ( + setMaxBreadcrumbs(undefined)}> + Home + Electronics + Photography + Cameras + Film + 35 mm + + ); +} +export default Example; +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/vue.md new file mode 100644 index 00000000000..fdd63471ed4 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/vue.md @@ -0,0 +1,31 @@ +```html + + + +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular.md new file mode 100644 index 00000000000..d7571e2ebce --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/angular.md @@ -0,0 +1,41 @@ +```html +
Before Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 0
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 2, After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/demo.html b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/demo.html new file mode 100644 index 00000000000..d54822dd373 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/demo.html @@ -0,0 +1,66 @@ + + + + + + Breadcrumbs + + + + + + + + + + + +
+
Before Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 0
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 2, After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +
+ + + + diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md new file mode 100644 index 00000000000..3df433d1891 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/javascript.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/javascript.md new file mode 100644 index 00000000000..11648ff8762 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/javascript.md @@ -0,0 +1,41 @@ +```html +
Before Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 0
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 2, After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/react.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/react.md new file mode 100644 index 00000000000..e54c8676f4e --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/react.md @@ -0,0 +1,50 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; +function Example() { + return ( + <> +
Before Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 0
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 2, After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/vue.md b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/vue.md new file mode 100644 index 00000000000..61dbebde1d7 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/vue.md @@ -0,0 +1,52 @@ +```html + + + +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular.md new file mode 100644 index 00000000000..e77f5ec2d16 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/angular.md @@ -0,0 +1,10 @@ +```html + + Home + Electronics + Photography + Cameras + Film + 35 mm + +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/demo.html b/static/usage/v8/breadcrumbs/collapsing-items/max-items/demo.html new file mode 100644 index 00000000000..d4f7ef94fbb --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/demo.html @@ -0,0 +1,29 @@ + + + + + + Breadcrumbs + + + + + + + + + +
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +
+ + + + diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md new file mode 100644 index 00000000000..48e8a4ed82f --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md @@ -0,0 +1,12 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/javascript.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/javascript.md new file mode 100644 index 00000000000..a5529d20b23 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/javascript.md @@ -0,0 +1,10 @@ +```html + + Home + Electronics + Photography + Cameras + Film + 35 mm + +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/react.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/react.md new file mode 100644 index 00000000000..c92c6a41ffe --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; +function Example() { + return ( + + Home + Electronics + Photography + Cameras + Film + 35 mm + + ); +} +export default Example; +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/max-items/vue.md b/static/usage/v8/breadcrumbs/collapsing-items/max-items/vue.md new file mode 100644 index 00000000000..a9804c52f33 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/max-items/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md new file mode 100644 index 00000000000..e3c0462a148 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md @@ -0,0 +1,25 @@ +```html + + Home + Electronics + Photography + Cameras + Film + 35 mm + + + + + + + {{ breadcrumb.textContent }} + + + + + +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md new file mode 100644 index 00000000000..aabfb29a821 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```ts +import { Component, ViewChild } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChild('popover') popover; + + isOpen = false; + collapsedBreadcrumbs: HTMLIonBreadcrumbElement[] = []; + + async presentPopover(e: Event) { + this.collapsedBreadcrumbs = (e as CustomEvent).detail.collapsedBreadcrumbs; + this.popover.event = e; + this.isOpen = true; + } +} +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/demo.html b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/demo.html new file mode 100644 index 00000000000..4f62d95beb6 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/demo.html @@ -0,0 +1,60 @@ + + + + + + Popover + + + + + + + + + +
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + + + + + +
+ + + + + + diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/index.md new file mode 100644 index 00000000000..2e2ca803c4a --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/javascript.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/javascript.md new file mode 100644 index 00000000000..1d22085a5b1 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/javascript.md @@ -0,0 +1,41 @@ +```html + + Home + Electronics + Photography + Cameras + Film + 35 mm + + + + + + + + +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/react.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/react.md new file mode 100644 index 00000000000..66ccc22bfe3 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/react.md @@ -0,0 +1,41 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover } from '@ionic/react'; + +function Example() { + const popover = useRef(null); + const [collapsedBreadcrumbs, setCollapsedBreadcrumbs] = useState([]); + const [popoverOpen, setPopoverOpen] = useState(false); + + const openPopover = (e: Event) => { + setCollapsedBreadcrumbs((e as CustomEvent).detail.collapsedBreadcrumbs); + popover.current!.event = e; + setPopoverOpen(true); + }; + + return ( + <> + + Home + Electronics + Photography + Cameras + Film + 35 mm + + setPopoverOpen(false)}> + + + {collapsedBreadcrumbs.map((breadcrumb, i) => ( + + {breadcrumb.textContent} + + ))} + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/vue.md new file mode 100644 index 00000000000..54368fa7213 --- /dev/null +++ b/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/vue.md @@ -0,0 +1,48 @@ +```html + + + +``` diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/angular.md b/static/usage/v8/breadcrumbs/icons/custom-separators/angular.md new file mode 100644 index 00000000000..e6f7fee4653 --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/custom-separators/angular.md @@ -0,0 +1,20 @@ +```html + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +``` diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/demo.html b/static/usage/v8/breadcrumbs/icons/custom-separators/demo.html new file mode 100644 index 00000000000..cb183161d47 --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/custom-separators/demo.html @@ -0,0 +1,39 @@ + + + + + + Breadcrumbs + + + + + + + + + +
+ + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +
+ + + + diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/index.md b/static/usage/v8/breadcrumbs/icons/custom-separators/index.md new file mode 100644 index 00000000000..4b42e7b7e40 --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/custom-separators/index.md @@ -0,0 +1,12 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/javascript.md b/static/usage/v8/breadcrumbs/icons/custom-separators/javascript.md new file mode 100644 index 00000000000..e6f7fee4653 --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/custom-separators/javascript.md @@ -0,0 +1,20 @@ +```html + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +``` diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/react.md b/static/usage/v8/breadcrumbs/icons/custom-separators/react.md new file mode 100644 index 00000000000..de824d91cf5 --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/custom-separators/react.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/react'; +import { arrowForwardCircle } from 'ionicons/icons'; + +function Example() { + return ( + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v8/breadcrumbs/icons/custom-separators/vue.md new file mode 100644 index 00000000000..f0849705aab --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/custom-separators/vue.md @@ -0,0 +1,35 @@ +```html + + + +``` diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/angular.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/angular.md new file mode 100644 index 00000000000..a31d718242d --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/angular.md @@ -0,0 +1,41 @@ +```html +Icons at Start + + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +Icons at End + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +``` diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/demo.html b/static/usage/v8/breadcrumbs/icons/icons-on-items/demo.html new file mode 100644 index 00000000000..596fb85cd1e --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/demo.html @@ -0,0 +1,66 @@ + + + + + + Breadcrumbs + + + + + + + + + + + +
+ Icons at Start + + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + + Icons at End + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +
+ + + + diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md new file mode 100644 index 00000000000..387f0c12e55 --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/javascript.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/javascript.md new file mode 100644 index 00000000000..a31d718242d --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/javascript.md @@ -0,0 +1,41 @@ +```html +Icons at Start + + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +Icons at End + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +``` diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/react.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/react.md new file mode 100644 index 00000000000..e042ff5aa05 --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/react.md @@ -0,0 +1,52 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/react'; +import { camera, film, flash, home } from 'ionicons/icons'; + +function Example() { + return ( + <> + Icons at Start + + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + + Icons at End + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/breadcrumbs/icons/icons-on-items/vue.md b/static/usage/v8/breadcrumbs/icons/icons-on-items/vue.md new file mode 100644 index 00000000000..2e1634143f6 --- /dev/null +++ b/static/usage/v8/breadcrumbs/icons/icons-on-items/vue.md @@ -0,0 +1,56 @@ +```html + + + +``` diff --git a/static/usage/v8/breadcrumbs/theming/colors/angular.md b/static/usage/v8/breadcrumbs/theming/colors/angular.md new file mode 100644 index 00000000000..610c4af5c89 --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/colors/angular.md @@ -0,0 +1,8 @@ +```html + + Home + Electronics + Cameras + Film + +``` diff --git a/static/usage/v8/breadcrumbs/theming/colors/demo.html b/static/usage/v8/breadcrumbs/theming/colors/demo.html new file mode 100644 index 00000000000..04bc0483a4f --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/colors/demo.html @@ -0,0 +1,27 @@ + + + + + + Breadcrumbs + + + + + + + + + +
+ + Home + Electronics + Cameras + Film + +
+ + + + diff --git a/static/usage/v8/breadcrumbs/theming/colors/index.md b/static/usage/v8/breadcrumbs/theming/colors/index.md new file mode 100644 index 00000000000..c100fffe65d --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/colors/index.md @@ -0,0 +1,12 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/breadcrumbs/theming/colors/javascript.md b/static/usage/v8/breadcrumbs/theming/colors/javascript.md new file mode 100644 index 00000000000..610c4af5c89 --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/colors/javascript.md @@ -0,0 +1,8 @@ +```html + + Home + Electronics + Cameras + Film + +``` diff --git a/static/usage/v8/breadcrumbs/theming/colors/react.md b/static/usage/v8/breadcrumbs/theming/colors/react.md new file mode 100644 index 00000000000..22cae85dd8f --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/colors/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; +function Example() { + return ( + + Home + Electronics + Cameras + Film + + ); +} +export default Example; +``` diff --git a/static/usage/v8/breadcrumbs/theming/colors/vue.md b/static/usage/v8/breadcrumbs/theming/colors/vue.md new file mode 100644 index 00000000000..357d76b7422 --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/colors/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_css.md b/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..3dc7c4640ad --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,7 @@ +```css +ion-breadcrumb { + --color: rgb(81, 155, 198); + --color-active: rgb(150, 112, 220); + --color-hover: rgb(103, 61, 180); +} +``` diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_html.md b/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..9683fbe6792 --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + Home + Electronics + Cameras + Film + +``` diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/demo.html b/static/usage/v8/breadcrumbs/theming/css-properties/demo.html new file mode 100644 index 00000000000..c440c40655c --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/css-properties/demo.html @@ -0,0 +1,35 @@ + + + + + + Breadcrumbs + + + + + + + + + + + +
+ + Home + Electronics + Cameras + Film + +
+ + + + diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/index.md b/static/usage/v8/breadcrumbs/theming/css-properties/index.md new file mode 100644 index 00000000000..d808d24927b --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/css-properties/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/javascript.md b/static/usage/v8/breadcrumbs/theming/css-properties/javascript.md new file mode 100644 index 00000000000..49e5c6688ff --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/css-properties/javascript.md @@ -0,0 +1,16 @@ +```html + + Home + Electronics + Cameras + Film + + + +``` diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/react/main_css.md b/static/usage/v8/breadcrumbs/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..3dc7c4640ad --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/css-properties/react/main_css.md @@ -0,0 +1,7 @@ +```css +ion-breadcrumb { + --color: rgb(81, 155, 198); + --color-active: rgb(150, 112, 220); + --color-hover: rgb(103, 61, 180); +} +``` diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/react/main_tsx.md b/static/usage/v8/breadcrumbs/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..7d168beeb60 --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/css-properties/react/main_tsx.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + Home + Electronics + Cameras + Film + + ); +} +export default Example; +``` diff --git a/static/usage/v8/breadcrumbs/theming/css-properties/vue.md b/static/usage/v8/breadcrumbs/theming/css-properties/vue.md new file mode 100644 index 00000000000..119ed6e5a0a --- /dev/null +++ b/static/usage/v8/breadcrumbs/theming/css-properties/vue.md @@ -0,0 +1,27 @@ +```html + + + + + +``` diff --git a/static/usage/v8/button/basic/angular.md b/static/usage/v8/button/basic/angular.md new file mode 100644 index 00000000000..d313d7dcd23 --- /dev/null +++ b/static/usage/v8/button/basic/angular.md @@ -0,0 +1,3 @@ +```html +Default Disabled +``` diff --git a/static/usage/v8/button/basic/demo.html b/static/usage/v8/button/basic/demo.html new file mode 100644 index 00000000000..5724aab1859 --- /dev/null +++ b/static/usage/v8/button/basic/demo.html @@ -0,0 +1,23 @@ + + + + + + Button + + + + + + + + + +
+ Default + Disabled +
+ + + + diff --git a/static/usage/v8/button/basic/index.md b/static/usage/v8/button/basic/index.md new file mode 100644 index 00000000000..5113cbb4106 --- /dev/null +++ b/static/usage/v8/button/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/button/basic/javascript.md b/static/usage/v8/button/basic/javascript.md new file mode 100644 index 00000000000..e298f5a1246 --- /dev/null +++ b/static/usage/v8/button/basic/javascript.md @@ -0,0 +1,3 @@ +```html +Default Disabled +``` diff --git a/static/usage/v8/button/basic/react.md b/static/usage/v8/button/basic/react.md new file mode 100644 index 00000000000..8393e9cf2b7 --- /dev/null +++ b/static/usage/v8/button/basic/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Disabled + + ); +} +export default Example; +``` diff --git a/static/usage/v8/button/basic/vue.md b/static/usage/v8/button/basic/vue.md new file mode 100644 index 00000000000..dbd787691fb --- /dev/null +++ b/static/usage/v8/button/basic/vue.md @@ -0,0 +1,15 @@ +```html + + + +``` diff --git a/static/usage/v8/button/expand/angular.md b/static/usage/v8/button/expand/angular.md new file mode 100644 index 00000000000..b49d2c767ae --- /dev/null +++ b/static/usage/v8/button/expand/angular.md @@ -0,0 +1,3 @@ +```html +Block Full +``` diff --git a/static/usage/v8/button/expand/demo.html b/static/usage/v8/button/expand/demo.html new file mode 100644 index 00000000000..39095a008fa --- /dev/null +++ b/static/usage/v8/button/expand/demo.html @@ -0,0 +1,30 @@ + + + + + + Button + + + + + + + + + + + +
+ Block + Full +
+ + + + diff --git a/static/usage/v8/button/expand/index.md b/static/usage/v8/button/expand/index.md new file mode 100644 index 00000000000..6bf7c9907f6 --- /dev/null +++ b/static/usage/v8/button/expand/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/button/expand/javascript.md b/static/usage/v8/button/expand/javascript.md new file mode 100644 index 00000000000..b49d2c767ae --- /dev/null +++ b/static/usage/v8/button/expand/javascript.md @@ -0,0 +1,3 @@ +```html +Block Full +``` diff --git a/static/usage/v8/button/expand/react.md b/static/usage/v8/button/expand/react.md new file mode 100644 index 00000000000..424d8e1494b --- /dev/null +++ b/static/usage/v8/button/expand/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Block + Full + + ); +} +export default Example; +``` diff --git a/static/usage/v8/button/expand/vue.md b/static/usage/v8/button/expand/vue.md new file mode 100644 index 00000000000..f67d93ecdef --- /dev/null +++ b/static/usage/v8/button/expand/vue.md @@ -0,0 +1,15 @@ +```html + + + +``` diff --git a/static/usage/v8/button/fill/angular.md b/static/usage/v8/button/fill/angular.md new file mode 100644 index 00000000000..390ae848201 --- /dev/null +++ b/static/usage/v8/button/fill/angular.md @@ -0,0 +1,6 @@ +```html +Default +Clear +Outline +Solid +``` diff --git a/static/usage/v8/button/fill/demo.html b/static/usage/v8/button/fill/demo.html new file mode 100644 index 00000000000..7e568a1a4dd --- /dev/null +++ b/static/usage/v8/button/fill/demo.html @@ -0,0 +1,25 @@ + + + + + + Button + + + + + + + + + +
+ Default + Clear + Outline + Solid +
+ + + + diff --git a/static/usage/v8/button/fill/index.md b/static/usage/v8/button/fill/index.md new file mode 100644 index 00000000000..db05b92b344 --- /dev/null +++ b/static/usage/v8/button/fill/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/button/fill/javascript.md b/static/usage/v8/button/fill/javascript.md new file mode 100644 index 00000000000..390ae848201 --- /dev/null +++ b/static/usage/v8/button/fill/javascript.md @@ -0,0 +1,6 @@ +```html +Default +Clear +Outline +Solid +``` diff --git a/static/usage/v8/button/fill/react.md b/static/usage/v8/button/fill/react.md new file mode 100644 index 00000000000..5a32a7d992d --- /dev/null +++ b/static/usage/v8/button/fill/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Clear + Outline + Solid + + ); +} +export default Example; +``` diff --git a/static/usage/v8/button/fill/vue.md b/static/usage/v8/button/fill/vue.md new file mode 100644 index 00000000000..4b965ed3582 --- /dev/null +++ b/static/usage/v8/button/fill/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v8/button/icons/angular.md b/static/usage/v8/button/icons/angular.md new file mode 100644 index 00000000000..89d74ad2e17 --- /dev/null +++ b/static/usage/v8/button/icons/angular.md @@ -0,0 +1,15 @@ +```html + + + Left Icon + + + + Right Icon + + + + + + +``` diff --git a/static/usage/v8/button/icons/demo.html b/static/usage/v8/button/icons/demo.html new file mode 100644 index 00000000000..9f8ae344b46 --- /dev/null +++ b/static/usage/v8/button/icons/demo.html @@ -0,0 +1,34 @@ + + + + + + Button + + + + + + + + + +
+ + + Left Icon + + + + Right Icon + + + + + + +
+ + + + diff --git a/static/usage/v8/button/icons/index.md b/static/usage/v8/button/icons/index.md new file mode 100644 index 00000000000..1c5d7c9da22 --- /dev/null +++ b/static/usage/v8/button/icons/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/button/icons/javascript.md b/static/usage/v8/button/icons/javascript.md new file mode 100644 index 00000000000..89d74ad2e17 --- /dev/null +++ b/static/usage/v8/button/icons/javascript.md @@ -0,0 +1,15 @@ +```html + + + Left Icon + + + + Right Icon + + + + + + +``` diff --git a/static/usage/v8/button/icons/react.md b/static/usage/v8/button/icons/react.md new file mode 100644 index 00000000000..09df368e950 --- /dev/null +++ b/static/usage/v8/button/icons/react.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon } from '@ionic/react'; +import { star } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + Left Icon + + + + Right Icon + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/button/icons/vue.md b/static/usage/v8/button/icons/vue.md new file mode 100644 index 00000000000..03d8648c878 --- /dev/null +++ b/static/usage/v8/button/icons/vue.md @@ -0,0 +1,30 @@ +```html + + + +``` diff --git a/static/usage/v8/button/shape/angular.md b/static/usage/v8/button/shape/angular.md new file mode 100644 index 00000000000..a37193d9013 --- /dev/null +++ b/static/usage/v8/button/shape/angular.md @@ -0,0 +1,3 @@ +```html +Default Round +``` diff --git a/static/usage/v8/button/shape/demo.html b/static/usage/v8/button/shape/demo.html new file mode 100644 index 00000000000..c4f0acae694 --- /dev/null +++ b/static/usage/v8/button/shape/demo.html @@ -0,0 +1,23 @@ + + + + + + Button + + + + + + + + + +
+ Default + Round +
+ + + + diff --git a/static/usage/v8/button/shape/index.md b/static/usage/v8/button/shape/index.md new file mode 100644 index 00000000000..cc5417f8d56 --- /dev/null +++ b/static/usage/v8/button/shape/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/button/shape/javascript.md b/static/usage/v8/button/shape/javascript.md new file mode 100644 index 00000000000..a37193d9013 --- /dev/null +++ b/static/usage/v8/button/shape/javascript.md @@ -0,0 +1,3 @@ +```html +Default Round +``` diff --git a/static/usage/v8/button/shape/react.md b/static/usage/v8/button/shape/react.md new file mode 100644 index 00000000000..df52c3f8985 --- /dev/null +++ b/static/usage/v8/button/shape/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Round + + ); +} +export default Example; +``` diff --git a/static/usage/v8/button/shape/vue.md b/static/usage/v8/button/shape/vue.md new file mode 100644 index 00000000000..6db047c9532 --- /dev/null +++ b/static/usage/v8/button/shape/vue.md @@ -0,0 +1,15 @@ +```html + + + +``` diff --git a/static/usage/v8/button/size/angular.md b/static/usage/v8/button/size/angular.md new file mode 100644 index 00000000000..a24809c2d61 --- /dev/null +++ b/static/usage/v8/button/size/angular.md @@ -0,0 +1,5 @@ +```html +Small +Default +Large +``` diff --git a/static/usage/v8/button/size/demo.html b/static/usage/v8/button/size/demo.html new file mode 100644 index 00000000000..b4cdd2433f8 --- /dev/null +++ b/static/usage/v8/button/size/demo.html @@ -0,0 +1,24 @@ + + + + + + Button + + + + + + + + + +
+ Small + Default + Large +
+ + + + diff --git a/static/usage/v8/button/size/index.md b/static/usage/v8/button/size/index.md new file mode 100644 index 00000000000..e59a99edb6a --- /dev/null +++ b/static/usage/v8/button/size/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/button/size/javascript.md b/static/usage/v8/button/size/javascript.md new file mode 100644 index 00000000000..a24809c2d61 --- /dev/null +++ b/static/usage/v8/button/size/javascript.md @@ -0,0 +1,5 @@ +```html +Small +Default +Large +``` diff --git a/static/usage/v8/button/size/react.md b/static/usage/v8/button/size/react.md new file mode 100644 index 00000000000..8deb283a9d4 --- /dev/null +++ b/static/usage/v8/button/size/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Small + Default + Large + + ); +} +export default Example; +``` diff --git a/static/usage/v8/button/size/vue.md b/static/usage/v8/button/size/vue.md new file mode 100644 index 00000000000..02a27f22d1d --- /dev/null +++ b/static/usage/v8/button/size/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v8/button/text-wrapping/angular.md b/static/usage/v8/button/text-wrapping/angular.md new file mode 100644 index 00000000000..876e9dc8344 --- /dev/null +++ b/static/usage/v8/button/text-wrapping/angular.md @@ -0,0 +1,7 @@ +```html +Default +This is the button that never ends it just goes on and on and on and on and on and on and on and on my + friends +``` diff --git a/static/usage/v8/button/text-wrapping/demo.html b/static/usage/v8/button/text-wrapping/demo.html new file mode 100644 index 00000000000..ae3e5b9ca4a --- /dev/null +++ b/static/usage/v8/button/text-wrapping/demo.html @@ -0,0 +1,26 @@ + + + + + + Button + + + + + + + + + +
+ Default + This is the button that never ends it just goes on and on and on and on and on and on and on and on my + friends +
+ + + + diff --git a/static/usage/v8/button/text-wrapping/index.md b/static/usage/v8/button/text-wrapping/index.md new file mode 100644 index 00000000000..7696d798857 --- /dev/null +++ b/static/usage/v8/button/text-wrapping/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/button/text-wrapping/javascript.md b/static/usage/v8/button/text-wrapping/javascript.md new file mode 100644 index 00000000000..876e9dc8344 --- /dev/null +++ b/static/usage/v8/button/text-wrapping/javascript.md @@ -0,0 +1,7 @@ +```html +Default +This is the button that never ends it just goes on and on and on and on and on and on and on and on my + friends +``` diff --git a/static/usage/v8/button/text-wrapping/react.md b/static/usage/v8/button/text-wrapping/react.md new file mode 100644 index 00000000000..babad89f4c1 --- /dev/null +++ b/static/usage/v8/button/text-wrapping/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + + This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/button/text-wrapping/vue.md b/static/usage/v8/button/text-wrapping/vue.md new file mode 100644 index 00000000000..3462f7357ea --- /dev/null +++ b/static/usage/v8/button/text-wrapping/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v8/button/theming/colors/angular.md b/static/usage/v8/button/theming/colors/angular.md new file mode 100644 index 00000000000..fed23e8442d --- /dev/null +++ b/static/usage/v8/button/theming/colors/angular.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/v8/button/theming/colors/demo.html b/static/usage/v8/button/theming/colors/demo.html new file mode 100644 index 00000000000..0f908a9176a --- /dev/null +++ b/static/usage/v8/button/theming/colors/demo.html @@ -0,0 +1,39 @@ + + + + + + Button + + + + + + + + + + + +
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+ + + + diff --git a/static/usage/v8/button/theming/colors/index.md b/static/usage/v8/button/theming/colors/index.md new file mode 100644 index 00000000000..88cb6539a81 --- /dev/null +++ b/static/usage/v8/button/theming/colors/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/button/theming/colors/javascript.md b/static/usage/v8/button/theming/colors/javascript.md new file mode 100644 index 00000000000..fed23e8442d --- /dev/null +++ b/static/usage/v8/button/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/v8/button/theming/colors/react.md b/static/usage/v8/button/theming/colors/react.md new file mode 100644 index 00000000000..066aaa06f59 --- /dev/null +++ b/static/usage/v8/button/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark + + ); +} +export default Example; +``` diff --git a/static/usage/v8/button/theming/colors/vue.md b/static/usage/v8/button/theming/colors/vue.md new file mode 100644 index 00000000000..7fee983d696 --- /dev/null +++ b/static/usage/v8/button/theming/colors/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v8/button/theming/css-properties/angular/example_component_css.md b/static/usage/v8/button/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..fa985cbe82f --- /dev/null +++ b/static/usage/v8/button/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,22 @@ +```css +ion-button { + --background: #93e9be; + --background-hover: #9ce0be; + --background-activated: #88f4be; + --background-focused: #88f4be; + + --color: blue; + + --border-radius: 0; + --border-color: #000; + --border-style: solid; + --border-width: 1px; + + --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25); + + --ripple-color: deeppink; + + --padding-top: 10px; + --padding-bottom: 10px; +} +``` diff --git a/static/usage/v8/button/theming/css-properties/angular/example_component_html.md b/static/usage/v8/button/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..678df6cde1b --- /dev/null +++ b/static/usage/v8/button/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Custom Button +``` diff --git a/static/usage/v8/button/theming/css-properties/demo.html b/static/usage/v8/button/theming/css-properties/demo.html new file mode 100644 index 00000000000..a21fa88797c --- /dev/null +++ b/static/usage/v8/button/theming/css-properties/demo.html @@ -0,0 +1,45 @@ + + + + + + Button + + + + + + + + + + + +
+ Custom Button +
+ + + + diff --git a/static/usage/v8/button/theming/css-properties/index.md b/static/usage/v8/button/theming/css-properties/index.md new file mode 100644 index 00000000000..32f67b6f002 --- /dev/null +++ b/static/usage/v8/button/theming/css-properties/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/button/theming/css-properties/javascript.md b/static/usage/v8/button/theming/css-properties/javascript.md new file mode 100644 index 00000000000..8bca67a3206 --- /dev/null +++ b/static/usage/v8/button/theming/css-properties/javascript.md @@ -0,0 +1,26 @@ +```html + + +Custom Button +``` diff --git a/static/usage/v8/button/theming/css-properties/react/main_css.md b/static/usage/v8/button/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..fa985cbe82f --- /dev/null +++ b/static/usage/v8/button/theming/css-properties/react/main_css.md @@ -0,0 +1,22 @@ +```css +ion-button { + --background: #93e9be; + --background-hover: #9ce0be; + --background-activated: #88f4be; + --background-focused: #88f4be; + + --color: blue; + + --border-radius: 0; + --border-color: #000; + --border-style: solid; + --border-width: 1px; + + --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25); + + --ripple-color: deeppink; + + --padding-top: 10px; + --padding-bottom: 10px; +} +``` diff --git a/static/usage/v8/button/theming/css-properties/react/main_tsx.md b/static/usage/v8/button/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..c8c432e1b9c --- /dev/null +++ b/static/usage/v8/button/theming/css-properties/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return Custom Button; +} +export default Example; +``` diff --git a/static/usage/v8/button/theming/css-properties/vue.md b/static/usage/v8/button/theming/css-properties/vue.md new file mode 100644 index 00000000000..0243821d67f --- /dev/null +++ b/static/usage/v8/button/theming/css-properties/vue.md @@ -0,0 +1,37 @@ +```html + + + + + +``` diff --git a/static/usage/v8/buttons/basic/angular.md b/static/usage/v8/buttons/basic/angular.md new file mode 100644 index 00000000000..901587bfef1 --- /dev/null +++ b/static/usage/v8/buttons/basic/angular.md @@ -0,0 +1,8 @@ +```html + + + Button + + Default Buttons + +``` diff --git a/static/usage/v8/buttons/basic/demo.html b/static/usage/v8/buttons/basic/demo.html new file mode 100644 index 00000000000..3c889975115 --- /dev/null +++ b/static/usage/v8/buttons/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + Buttons + + + + + + + + + +
+ + + Button + + Default Buttons + +
+ + + + diff --git a/static/usage/v8/buttons/basic/index.md b/static/usage/v8/buttons/basic/index.md new file mode 100644 index 00000000000..f9c82463e84 --- /dev/null +++ b/static/usage/v8/buttons/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/buttons/basic/javascript.md b/static/usage/v8/buttons/basic/javascript.md new file mode 100644 index 00000000000..901587bfef1 --- /dev/null +++ b/static/usage/v8/buttons/basic/javascript.md @@ -0,0 +1,8 @@ +```html + + + Button + + Default Buttons + +``` diff --git a/static/usage/v8/buttons/basic/react.md b/static/usage/v8/buttons/basic/react.md new file mode 100644 index 00000000000..4a73e0d4958 --- /dev/null +++ b/static/usage/v8/buttons/basic/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + + + Button + + Default Buttons + + ); +} +export default Example; +``` diff --git a/static/usage/v8/buttons/basic/vue.md b/static/usage/v8/buttons/basic/vue.md new file mode 100644 index 00000000000..3da668fcb20 --- /dev/null +++ b/static/usage/v8/buttons/basic/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/buttons/placement/angular.md b/static/usage/v8/buttons/placement/angular.md new file mode 100644 index 00000000000..8273655ad49 --- /dev/null +++ b/static/usage/v8/buttons/placement/angular.md @@ -0,0 +1,21 @@ +```html + + + Start + + Buttons + + End + + + + + + Secondary + + Buttons + + Primary + + +``` diff --git a/static/usage/v8/buttons/placement/demo.html b/static/usage/v8/buttons/placement/demo.html new file mode 100644 index 00000000000..89f502b3a05 --- /dev/null +++ b/static/usage/v8/buttons/placement/demo.html @@ -0,0 +1,47 @@ + + + + + + Buttons + + + + + + + + + + + +
+ + + Start + + Buttons + + End + + + + + + Secondary + + Buttons + + Primary + + +
+ + + + diff --git a/static/usage/v8/buttons/placement/index.md b/static/usage/v8/buttons/placement/index.md new file mode 100644 index 00000000000..9d2fd3dcfec --- /dev/null +++ b/static/usage/v8/buttons/placement/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/buttons/placement/javascript.md b/static/usage/v8/buttons/placement/javascript.md new file mode 100644 index 00000000000..8273655ad49 --- /dev/null +++ b/static/usage/v8/buttons/placement/javascript.md @@ -0,0 +1,21 @@ +```html + + + Start + + Buttons + + End + + + + + + Secondary + + Buttons + + Primary + + +``` diff --git a/static/usage/v8/buttons/placement/react.md b/static/usage/v8/buttons/placement/react.md new file mode 100644 index 00000000000..27d6b54d4ba --- /dev/null +++ b/static/usage/v8/buttons/placement/react.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Start + + Buttons + + End + + + + + + Secondary + + Buttons + + Primary + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/buttons/placement/vue.md b/static/usage/v8/buttons/placement/vue.md new file mode 100644 index 00000000000..dc0217fc146 --- /dev/null +++ b/static/usage/v8/buttons/placement/vue.md @@ -0,0 +1,32 @@ +```html + + + +``` diff --git a/static/usage/v8/buttons/types/angular.md b/static/usage/v8/buttons/types/angular.md new file mode 100644 index 00000000000..9562dbb3b47 --- /dev/null +++ b/static/usage/v8/buttons/types/angular.md @@ -0,0 +1,74 @@ +```html + + + Favorite + + Default Buttons + + Delete + + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + +``` diff --git a/static/usage/v8/buttons/types/demo.html b/static/usage/v8/buttons/types/demo.html new file mode 100644 index 00000000000..9be9ccc031b --- /dev/null +++ b/static/usage/v8/buttons/types/demo.html @@ -0,0 +1,100 @@ + + + + + + Buttons + + + + + + + + + + + +
+ + + Favorite + + Default Buttons + + Delete + + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + +
+ + + + diff --git a/static/usage/v8/buttons/types/index.md b/static/usage/v8/buttons/types/index.md new file mode 100644 index 00000000000..1427b4536f6 --- /dev/null +++ b/static/usage/v8/buttons/types/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/buttons/types/javascript.md b/static/usage/v8/buttons/types/javascript.md new file mode 100644 index 00000000000..9562dbb3b47 --- /dev/null +++ b/static/usage/v8/buttons/types/javascript.md @@ -0,0 +1,74 @@ +```html + + + Favorite + + Default Buttons + + Delete + + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + +``` diff --git a/static/usage/v8/buttons/types/react.md b/static/usage/v8/buttons/types/react.md new file mode 100644 index 00000000000..01baca04d74 --- /dev/null +++ b/static/usage/v8/buttons/types/react.md @@ -0,0 +1,85 @@ +```tsx +import React from 'react'; +import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react'; +import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + Favorite + + Default Buttons + + Delete + + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/buttons/types/vue.md b/static/usage/v8/buttons/types/vue.md new file mode 100644 index 00000000000..60b04a067da --- /dev/null +++ b/static/usage/v8/buttons/types/vue.md @@ -0,0 +1,89 @@ +```html + + + +``` diff --git a/static/usage/v8/card/basic/angular.md b/static/usage/v8/card/basic/angular.md new file mode 100644 index 00000000000..d489fbc5e26 --- /dev/null +++ b/static/usage/v8/card/basic/angular.md @@ -0,0 +1,12 @@ +```html + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +``` diff --git a/static/usage/v8/card/basic/demo.html b/static/usage/v8/card/basic/demo.html new file mode 100644 index 00000000000..21c1c3280a3 --- /dev/null +++ b/static/usage/v8/card/basic/demo.html @@ -0,0 +1,38 @@ + + + + + + Card + + + + + + + + + + + +
+ + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +
+ + + + diff --git a/static/usage/v8/card/basic/index.md b/static/usage/v8/card/basic/index.md new file mode 100644 index 00000000000..6c090f394bb --- /dev/null +++ b/static/usage/v8/card/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/card/basic/javascript.md b/static/usage/v8/card/basic/javascript.md new file mode 100644 index 00000000000..d489fbc5e26 --- /dev/null +++ b/static/usage/v8/card/basic/javascript.md @@ -0,0 +1,12 @@ +```html + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +``` diff --git a/static/usage/v8/card/basic/react.md b/static/usage/v8/card/basic/react.md new file mode 100644 index 00000000000..cc05f5ca481 --- /dev/null +++ b/static/usage/v8/card/basic/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; + +function Example() { + return ( + + + Card Title + Card Subtitle + + + Here's a small text description for the card content. Nothing more, nothing less. + + ); +} +export default Example; +``` diff --git a/static/usage/v8/card/basic/vue.md b/static/usage/v8/card/basic/vue.md new file mode 100644 index 00000000000..aa44d9f0931 --- /dev/null +++ b/static/usage/v8/card/basic/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v8/card/buttons/angular.md b/static/usage/v8/card/buttons/angular.md new file mode 100644 index 00000000000..c597c1dca7a --- /dev/null +++ b/static/usage/v8/card/buttons/angular.md @@ -0,0 +1,15 @@ +```html + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + + Action 1 + Action 2 + +``` diff --git a/static/usage/v8/card/buttons/demo.html b/static/usage/v8/card/buttons/demo.html new file mode 100644 index 00000000000..600f311be4e --- /dev/null +++ b/static/usage/v8/card/buttons/demo.html @@ -0,0 +1,41 @@ + + + + + + Card + + + + + + + + + + + +
+ + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + + Action 1 + Action 2 + +
+ + + + diff --git a/static/usage/v8/card/buttons/index.md b/static/usage/v8/card/buttons/index.md new file mode 100644 index 00000000000..c19055f3a7f --- /dev/null +++ b/static/usage/v8/card/buttons/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/card/buttons/javascript.md b/static/usage/v8/card/buttons/javascript.md new file mode 100644 index 00000000000..c597c1dca7a --- /dev/null +++ b/static/usage/v8/card/buttons/javascript.md @@ -0,0 +1,15 @@ +```html + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + + Action 1 + Action 2 + +``` diff --git a/static/usage/v8/card/buttons/react.md b/static/usage/v8/card/buttons/react.md new file mode 100644 index 00000000000..af0e4bc6e14 --- /dev/null +++ b/static/usage/v8/card/buttons/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; + +function Example() { + return ( + + + Card Title + Card Subtitle + + + Here's a small text description for the card content. Nothing more, nothing less. + + Action 1 + Action 2 + + ); +} +export default Example; +``` diff --git a/static/usage/v8/card/buttons/vue.md b/static/usage/v8/card/buttons/vue.md new file mode 100644 index 00000000000..2266589135f --- /dev/null +++ b/static/usage/v8/card/buttons/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v8/card/list/angular/example_component_css.md b/static/usage/v8/card/list/angular/example_component_css.md new file mode 100644 index 00000000000..1e82c58ad8c --- /dev/null +++ b/static/usage/v8/card/list/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-item { + --padding-start: 0; +} +``` diff --git a/static/usage/v8/card/list/angular/example_component_html.md b/static/usage/v8/card/list/angular/example_component_html.md new file mode 100644 index 00000000000..850c62ec942 --- /dev/null +++ b/static/usage/v8/card/list/angular/example_component_html.md @@ -0,0 +1,39 @@ +```html + + + Card Title + Card Subtitle + + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + +``` diff --git a/static/usage/v8/card/list/demo.html b/static/usage/v8/card/list/demo.html new file mode 100644 index 00000000000..8ed00dcef17 --- /dev/null +++ b/static/usage/v8/card/list/demo.html @@ -0,0 +1,73 @@ + + + + + + Card + + + + + + + + + + + +
+ + + Card Title + Card Subtitle + + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + +
+ + + + diff --git a/static/usage/v8/card/list/index.md b/static/usage/v8/card/list/index.md new file mode 100644 index 00000000000..3cc353476b8 --- /dev/null +++ b/static/usage/v8/card/list/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/card/list/javascript.md b/static/usage/v8/card/list/javascript.md new file mode 100644 index 00000000000..e640c5e9966 --- /dev/null +++ b/static/usage/v8/card/list/javascript.md @@ -0,0 +1,45 @@ +```html + + + Card Title + Card Subtitle + + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + + +``` diff --git a/static/usage/v8/card/list/react/main_css.md b/static/usage/v8/card/list/react/main_css.md new file mode 100644 index 00000000000..1e82c58ad8c --- /dev/null +++ b/static/usage/v8/card/list/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-item { + --padding-start: 0; +} +``` diff --git a/static/usage/v8/card/list/react/main_tsx.md b/static/usage/v8/card/list/react/main_tsx.md new file mode 100644 index 00000000000..8fe3d6973e9 --- /dev/null +++ b/static/usage/v8/card/list/react/main_tsx.md @@ -0,0 +1,59 @@ +```tsx +import React from 'react'; +import { + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonItem, + IonLabel, + IonList, + IonThumbnail, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + Card Title + Card Subtitle + + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/card/list/vue.md b/static/usage/v8/card/list/vue.md new file mode 100644 index 00000000000..1a565483588 --- /dev/null +++ b/static/usage/v8/card/list/vue.md @@ -0,0 +1,56 @@ +```html + + + + + +``` diff --git a/static/usage/v8/card/media/angular.md b/static/usage/v8/card/media/angular.md new file mode 100644 index 00000000000..2e074cd5c6d --- /dev/null +++ b/static/usage/v8/card/media/angular.md @@ -0,0 +1,13 @@ +```html + + Silhouette of mountains + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +``` diff --git a/static/usage/v8/card/media/demo.html b/static/usage/v8/card/media/demo.html new file mode 100644 index 00000000000..7aff16f4d0c --- /dev/null +++ b/static/usage/v8/card/media/demo.html @@ -0,0 +1,39 @@ + + + + + + Card + + + + + + + + + + + +
+ + Silhouette of mountains + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +
+ + + + diff --git a/static/usage/v8/card/media/index.md b/static/usage/v8/card/media/index.md new file mode 100644 index 00000000000..3d4cda0926e --- /dev/null +++ b/static/usage/v8/card/media/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/card/media/javascript.md b/static/usage/v8/card/media/javascript.md new file mode 100644 index 00000000000..2e074cd5c6d --- /dev/null +++ b/static/usage/v8/card/media/javascript.md @@ -0,0 +1,13 @@ +```html + + Silhouette of mountains + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +``` diff --git a/static/usage/v8/card/media/react.md b/static/usage/v8/card/media/react.md new file mode 100644 index 00000000000..29198c78081 --- /dev/null +++ b/static/usage/v8/card/media/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; + +function Example() { + return ( + + Silhouette of mountains + + Card Title + Card Subtitle + + + Here's a small text description for the card content. Nothing more, nothing less. + + ); +} +export default Example; +``` diff --git a/static/usage/v8/card/media/vue.md b/static/usage/v8/card/media/vue.md new file mode 100644 index 00000000000..472b8a7d991 --- /dev/null +++ b/static/usage/v8/card/media/vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v8/card/theming/colors/angular.md b/static/usage/v8/card/theming/colors/angular.md new file mode 100644 index 00000000000..8c3924e8365 --- /dev/null +++ b/static/usage/v8/card/theming/colors/angular.md @@ -0,0 +1,82 @@ +```html + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + +``` diff --git a/static/usage/v8/card/theming/colors/demo.html b/static/usage/v8/card/theming/colors/demo.html new file mode 100644 index 00000000000..f68ba3326d0 --- /dev/null +++ b/static/usage/v8/card/theming/colors/demo.html @@ -0,0 +1,111 @@ + + + + + + Card + + + + + + + + + + + +
+ + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + +
+ + + + diff --git a/static/usage/v8/card/theming/colors/index.md b/static/usage/v8/card/theming/colors/index.md new file mode 100644 index 00000000000..30ce310e99c --- /dev/null +++ b/static/usage/v8/card/theming/colors/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/card/theming/colors/javascript.md b/static/usage/v8/card/theming/colors/javascript.md new file mode 100644 index 00000000000..8c3924e8365 --- /dev/null +++ b/static/usage/v8/card/theming/colors/javascript.md @@ -0,0 +1,82 @@ +```html + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + +``` diff --git a/static/usage/v8/card/theming/colors/react.md b/static/usage/v8/card/theming/colors/react.md new file mode 100644 index 00000000000..674a4266fdf --- /dev/null +++ b/static/usage/v8/card/theming/colors/react.md @@ -0,0 +1,92 @@ +```tsx +import React from 'react'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; + +function Example() { + return ( + <> + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/card/theming/colors/vue.md b/static/usage/v8/card/theming/colors/vue.md new file mode 100644 index 00000000000..e0070961be8 --- /dev/null +++ b/static/usage/v8/card/theming/colors/vue.md @@ -0,0 +1,93 @@ +```html + + + +``` diff --git a/static/usage/v8/card/theming/css-properties/angular/example_component_css.md b/static/usage/v8/card/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..9e5b40683ac --- /dev/null +++ b/static/usage/v8/card/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,14 @@ +```css +ion-card { + --background: #000; + --color: #9efff0; +} + +ion-card-title { + --color: #52ffe4; +} + +ion-card-subtitle { + --color: #d1fff8; +} +``` diff --git a/static/usage/v8/card/theming/css-properties/angular/example_component_html.md b/static/usage/v8/card/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..d489fbc5e26 --- /dev/null +++ b/static/usage/v8/card/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +``` diff --git a/static/usage/v8/card/theming/css-properties/demo.html b/static/usage/v8/card/theming/css-properties/demo.html new file mode 100644 index 00000000000..61973dab5fe --- /dev/null +++ b/static/usage/v8/card/theming/css-properties/demo.html @@ -0,0 +1,51 @@ + + + + + + Card + + + + + + + + + + + +
+ + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +
+ + + + diff --git a/static/usage/v8/card/theming/css-properties/index.md b/static/usage/v8/card/theming/css-properties/index.md new file mode 100644 index 00000000000..cc473c03d32 --- /dev/null +++ b/static/usage/v8/card/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/card/theming/css-properties/javascript.md b/static/usage/v8/card/theming/css-properties/javascript.md new file mode 100644 index 00000000000..b8b50748719 --- /dev/null +++ b/static/usage/v8/card/theming/css-properties/javascript.md @@ -0,0 +1,27 @@ +```html + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + + + +``` diff --git a/static/usage/v8/card/theming/css-properties/react/main_css.md b/static/usage/v8/card/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..9e5b40683ac --- /dev/null +++ b/static/usage/v8/card/theming/css-properties/react/main_css.md @@ -0,0 +1,14 @@ +```css +ion-card { + --background: #000; + --color: #9efff0; +} + +ion-card-title { + --color: #52ffe4; +} + +ion-card-subtitle { + --color: #d1fff8; +} +``` diff --git a/static/usage/v8/card/theming/css-properties/react/main_tsx.md b/static/usage/v8/card/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..a5b4ce3af35 --- /dev/null +++ b/static/usage/v8/card/theming/css-properties/react/main_tsx.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + Card Title + Card Subtitle + + + Here's a small text description for the card content. Nothing more, nothing less. + + ); +} +export default Example; +``` diff --git a/static/usage/v8/card/theming/css-properties/vue.md b/static/usage/v8/card/theming/css-properties/vue.md new file mode 100644 index 00000000000..e2db7992d85 --- /dev/null +++ b/static/usage/v8/card/theming/css-properties/vue.md @@ -0,0 +1,38 @@ +```html + + + + + +``` diff --git a/static/usage/v8/checkbox/alignment/angular.md b/static/usage/v8/checkbox/alignment/angular.md new file mode 100644 index 00000000000..4cb28d1b19b --- /dev/null +++ b/static/usage/v8/checkbox/alignment/angular.md @@ -0,0 +1,11 @@ +```html + + + Aligned to the Start + + + + Aligned to the Center + + +``` diff --git a/static/usage/v8/checkbox/alignment/demo.html b/static/usage/v8/checkbox/alignment/demo.html new file mode 100644 index 00000000000..8cd4888c61b --- /dev/null +++ b/static/usage/v8/checkbox/alignment/demo.html @@ -0,0 +1,29 @@ + + + + + + Checkbox + + + + + + + + +
+ + + Aligned to the Start + + + + Aligned to the Center + + +
+ + + + diff --git a/static/usage/v8/checkbox/alignment/index.md b/static/usage/v8/checkbox/alignment/index.md new file mode 100644 index 00000000000..80aa3a8c538 --- /dev/null +++ b/static/usage/v8/checkbox/alignment/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/checkbox/alignment/javascript.md b/static/usage/v8/checkbox/alignment/javascript.md new file mode 100644 index 00000000000..4cb28d1b19b --- /dev/null +++ b/static/usage/v8/checkbox/alignment/javascript.md @@ -0,0 +1,11 @@ +```html + + + Aligned to the Start + + + + Aligned to the Center + + +``` diff --git a/static/usage/v8/checkbox/alignment/react.md b/static/usage/v8/checkbox/alignment/react.md new file mode 100644 index 00000000000..16b9d9b18e2 --- /dev/null +++ b/static/usage/v8/checkbox/alignment/react.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonCheckbox, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + <> + + + + Aligned to the Start + + + + + + Aligned to the Center + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/checkbox/alignment/vue.md b/static/usage/v8/checkbox/alignment/vue.md new file mode 100644 index 00000000000..4dffcd383aa --- /dev/null +++ b/static/usage/v8/checkbox/alignment/vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v8/checkbox/basic/angular.md b/static/usage/v8/checkbox/basic/angular.md new file mode 100644 index 00000000000..985ef4cdc1e --- /dev/null +++ b/static/usage/v8/checkbox/basic/angular.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v8/checkbox/basic/demo.html b/static/usage/v8/checkbox/basic/demo.html new file mode 100644 index 00000000000..4c6d16c7e2a --- /dev/null +++ b/static/usage/v8/checkbox/basic/demo.html @@ -0,0 +1,22 @@ + + + + + + Checkbox + + + + + + + + + +
+ I agree to the terms and conditions +
+ + + + diff --git a/static/usage/v8/checkbox/basic/index.md b/static/usage/v8/checkbox/basic/index.md new file mode 100644 index 00000000000..e238ae9c63f --- /dev/null +++ b/static/usage/v8/checkbox/basic/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/checkbox/basic/javascript.md b/static/usage/v8/checkbox/basic/javascript.md new file mode 100644 index 00000000000..985ef4cdc1e --- /dev/null +++ b/static/usage/v8/checkbox/basic/javascript.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v8/checkbox/basic/react.md b/static/usage/v8/checkbox/basic/react.md new file mode 100644 index 00000000000..b2fbcb695d3 --- /dev/null +++ b/static/usage/v8/checkbox/basic/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonCheckbox } from '@ionic/react'; + +function Example() { + return I agree to the terms and conditions; +} +export default Example; +``` diff --git a/static/usage/v8/checkbox/basic/vue.md b/static/usage/v8/checkbox/basic/vue.md new file mode 100644 index 00000000000..fc8c1ff781f --- /dev/null +++ b/static/usage/v8/checkbox/basic/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/checkbox/indeterminate/angular.md b/static/usage/v8/checkbox/indeterminate/angular.md new file mode 100644 index 00000000000..1ae617e7558 --- /dev/null +++ b/static/usage/v8/checkbox/indeterminate/angular.md @@ -0,0 +1,3 @@ +```html +Indeterminate checkbox +``` diff --git a/static/usage/v8/checkbox/indeterminate/demo.html b/static/usage/v8/checkbox/indeterminate/demo.html new file mode 100644 index 00000000000..26df51a9de1 --- /dev/null +++ b/static/usage/v8/checkbox/indeterminate/demo.html @@ -0,0 +1,22 @@ + + + + + + Checkbox + + + + + + + + + +
+ Indeterminate checkbox +
+ + + + diff --git a/static/usage/v8/checkbox/indeterminate/index.md b/static/usage/v8/checkbox/indeterminate/index.md new file mode 100644 index 00000000000..bcc02a761e7 --- /dev/null +++ b/static/usage/v8/checkbox/indeterminate/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/checkbox/indeterminate/javascript.md b/static/usage/v8/checkbox/indeterminate/javascript.md new file mode 100644 index 00000000000..ee9fb8c422a --- /dev/null +++ b/static/usage/v8/checkbox/indeterminate/javascript.md @@ -0,0 +1,3 @@ +```html +Indeterminate checkbox +``` diff --git a/static/usage/v8/checkbox/indeterminate/react.md b/static/usage/v8/checkbox/indeterminate/react.md new file mode 100644 index 00000000000..9cfba0ca72b --- /dev/null +++ b/static/usage/v8/checkbox/indeterminate/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonCheckbox } from '@ionic/react'; + +function Example() { + return Indeterminate checkbox; +} +export default Example; +``` diff --git a/static/usage/v8/checkbox/indeterminate/vue.md b/static/usage/v8/checkbox/indeterminate/vue.md new file mode 100644 index 00000000000..ff87a637bd6 --- /dev/null +++ b/static/usage/v8/checkbox/indeterminate/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/checkbox/justify/angular.md b/static/usage/v8/checkbox/justify/angular.md new file mode 100644 index 00000000000..9205434ceaa --- /dev/null +++ b/static/usage/v8/checkbox/justify/angular.md @@ -0,0 +1,15 @@ +```html + + + Packed at the Start of Line + + + + Packed at the End of Line + + + + Space Between Label and Control + + +``` diff --git a/static/usage/v8/checkbox/justify/demo.html b/static/usage/v8/checkbox/justify/demo.html new file mode 100644 index 00000000000..de3059c969c --- /dev/null +++ b/static/usage/v8/checkbox/justify/demo.html @@ -0,0 +1,39 @@ + + + + + + Checkbox + + + + + + + + + + +
+ + + Packed at the Start of Line + + + + Packed at the End of Line + + + + Space Between Label and Control + + +
+ + + + diff --git a/static/usage/v8/checkbox/justify/index.md b/static/usage/v8/checkbox/justify/index.md new file mode 100644 index 00000000000..1128d74a9f6 --- /dev/null +++ b/static/usage/v8/checkbox/justify/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/checkbox/justify/javascript.md b/static/usage/v8/checkbox/justify/javascript.md new file mode 100644 index 00000000000..9205434ceaa --- /dev/null +++ b/static/usage/v8/checkbox/justify/javascript.md @@ -0,0 +1,15 @@ +```html + + + Packed at the Start of Line + + + + Packed at the End of Line + + + + Space Between Label and Control + + +``` diff --git a/static/usage/v8/checkbox/justify/react.md b/static/usage/v8/checkbox/justify/react.md new file mode 100644 index 00000000000..667449c7808 --- /dev/null +++ b/static/usage/v8/checkbox/justify/react.md @@ -0,0 +1,23 @@ +```tsx +import React from 'react'; +import { IonCheckbox, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + Packed at the Start of Line + + + + Packed at the End of Line + + + + Space Between Label and Control + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/checkbox/justify/vue.md b/static/usage/v8/checkbox/justify/vue.md new file mode 100644 index 00000000000..ed34f0dcdc7 --- /dev/null +++ b/static/usage/v8/checkbox/justify/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v8/checkbox/label-placement/angular.md b/static/usage/v8/checkbox/label-placement/angular.md new file mode 100644 index 00000000000..154f82929d8 --- /dev/null +++ b/static/usage/v8/checkbox/label-placement/angular.md @@ -0,0 +1,15 @@ +```html +Label at the Start + +
+ +Label at the End + +
+ +Fixed Width Label + +
+ +Stacked Label +``` diff --git a/static/usage/v8/checkbox/label-placement/demo.html b/static/usage/v8/checkbox/label-placement/demo.html new file mode 100644 index 00000000000..b010f8e8a3e --- /dev/null +++ b/static/usage/v8/checkbox/label-placement/demo.html @@ -0,0 +1,36 @@ + + + + + + Checkbox + + + + + + + + + +
+
+ Label at the Start + +
+ + Label at the End + +
+ + Fixed Width Label + +
+ + Stacked Label +
+
+ + + + diff --git a/static/usage/v8/checkbox/label-placement/index.md b/static/usage/v8/checkbox/label-placement/index.md new file mode 100644 index 00000000000..2534249529a --- /dev/null +++ b/static/usage/v8/checkbox/label-placement/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/checkbox/label-placement/javascript.md b/static/usage/v8/checkbox/label-placement/javascript.md new file mode 100644 index 00000000000..be18191d9a0 --- /dev/null +++ b/static/usage/v8/checkbox/label-placement/javascript.md @@ -0,0 +1,15 @@ +```html +Label at the Start + +
+ +Label at the End + +
+ +Fixed Width Label + +
+ +Stacked Label +``` diff --git a/static/usage/v8/checkbox/label-placement/react.md b/static/usage/v8/checkbox/label-placement/react.md new file mode 100644 index 00000000000..6fc222b9035 --- /dev/null +++ b/static/usage/v8/checkbox/label-placement/react.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonCheckbox } from '@ionic/react'; + +function Example() { + return ( + <> + Label at the Start + +
+ + Label at the End + +
+ + Fixed Width Label + +
+ + Stacked Label + + ); +} +export default Example; +``` diff --git a/static/usage/v8/checkbox/label-placement/vue.md b/static/usage/v8/checkbox/label-placement/vue.md new file mode 100644 index 00000000000..3530731da53 --- /dev/null +++ b/static/usage/v8/checkbox/label-placement/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v8/checkbox/migration/index.md b/static/usage/v8/checkbox/migration/index.md new file mode 100644 index 00000000000..acf77957566 --- /dev/null +++ b/static/usage/v8/checkbox/migration/index.md @@ -0,0 +1,188 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +````mdx-code-block + + + +```html + + + + + Checkbox Label + + + + + + Checkbox Label + + + + + + + Checkbox Label + + + + + + Checkbox Label + + + + + + + Checkbox Label + + + + + + Checkbox Label + +``` + + + +```html + + + + + Checkbox Label + + + + + + Checkbox Label + + + + + + + Checkbox Label + + + + + + Checkbox Label + + + + + + + Checkbox Label + + + + + + Checkbox Label + +``` + + + +```tsx +{/* Basic */} + +{/* Before */} + + Checkbox Label + + + +{/* After */} + + Checkbox Label + + +{/* Fixed Labels */} + +{/* Before */} + + Checkbox Label + + + +{/* After */} + + Checkbox Label + + +{/* Checkbox at the start of line, Label at the end of line */} + +{/* Before */} + + Checkbox Label + + + +{/* After */} + + Checkbox Label + +``` + + + +```html + + + + + Checkbox Label + + + + + + Checkbox Label + + + + + + + Checkbox Label + + + + + + Checkbox Label + + + + + + + Checkbox Label + + + + + + Checkbox Label + +``` + + +```` diff --git a/static/usage/v8/checkbox/theming/css-properties/angular/example_component_css.md b/static/usage/v8/checkbox/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..5889591fd18 --- /dev/null +++ b/static/usage/v8/checkbox/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +ion-checkbox { + --size: 32px; + --checkbox-background-checked: #6815ec; +} + +ion-checkbox::part(container) { + border-radius: 6px; + border: 2px solid #6815ec; +} +``` diff --git a/static/usage/v8/checkbox/theming/css-properties/angular/example_component_html.md b/static/usage/v8/checkbox/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..ba23decbdba --- /dev/null +++ b/static/usage/v8/checkbox/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Themed checkbox +``` diff --git a/static/usage/v8/checkbox/theming/css-properties/demo.html b/static/usage/v8/checkbox/theming/css-properties/demo.html new file mode 100644 index 00000000000..b2188d8bb60 --- /dev/null +++ b/static/usage/v8/checkbox/theming/css-properties/demo.html @@ -0,0 +1,33 @@ + + + + + + Checkbox + + + + + + + + + + +
+ Themed checkbox +
+ + + + diff --git a/static/usage/v8/checkbox/theming/css-properties/index.md b/static/usage/v8/checkbox/theming/css-properties/index.md new file mode 100644 index 00000000000..51d619f8ccf --- /dev/null +++ b/static/usage/v8/checkbox/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/checkbox/theming/css-properties/javascript.md b/static/usage/v8/checkbox/theming/css-properties/javascript.md new file mode 100644 index 00000000000..90a415bf906 --- /dev/null +++ b/static/usage/v8/checkbox/theming/css-properties/javascript.md @@ -0,0 +1,15 @@ +```html +Themed checkbox + + +``` diff --git a/static/usage/v8/checkbox/theming/css-properties/react/main_css.md b/static/usage/v8/checkbox/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..5889591fd18 --- /dev/null +++ b/static/usage/v8/checkbox/theming/css-properties/react/main_css.md @@ -0,0 +1,11 @@ +```css +ion-checkbox { + --size: 32px; + --checkbox-background-checked: #6815ec; +} + +ion-checkbox::part(container) { + border-radius: 6px; + border: 2px solid #6815ec; +} +``` diff --git a/static/usage/v8/checkbox/theming/css-properties/react/main_tsx.md b/static/usage/v8/checkbox/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..8408e5825f2 --- /dev/null +++ b/static/usage/v8/checkbox/theming/css-properties/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonCheckbox } from '@ionic/react'; + +import './main.css'; + +function Example() { + return Themed checkbox; +} +export default Example; +``` diff --git a/static/usage/v8/checkbox/theming/css-properties/vue.md b/static/usage/v8/checkbox/theming/css-properties/vue.md new file mode 100644 index 00000000000..802cfa40b25 --- /dev/null +++ b/static/usage/v8/checkbox/theming/css-properties/vue.md @@ -0,0 +1,26 @@ +```html + + + + + +``` diff --git a/static/usage/v8/chip/basic/angular.md b/static/usage/v8/chip/basic/angular.md new file mode 100644 index 00000000000..0e9440b7ea8 --- /dev/null +++ b/static/usage/v8/chip/basic/angular.md @@ -0,0 +1,5 @@ +```html +Default +Disabled +Outline +``` diff --git a/static/usage/v8/chip/basic/demo.html b/static/usage/v8/chip/basic/demo.html new file mode 100644 index 00000000000..6e90d824652 --- /dev/null +++ b/static/usage/v8/chip/basic/demo.html @@ -0,0 +1,24 @@ + + + + + + Chip + + + + + + + + + +
+ Default + Disabled + Outline +
+ + + + diff --git a/static/usage/v8/chip/basic/index.md b/static/usage/v8/chip/basic/index.md new file mode 100644 index 00000000000..e605cabed8e --- /dev/null +++ b/static/usage/v8/chip/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/chip/basic/javascript.md b/static/usage/v8/chip/basic/javascript.md new file mode 100644 index 00000000000..fb494e84571 --- /dev/null +++ b/static/usage/v8/chip/basic/javascript.md @@ -0,0 +1,5 @@ +```html +Default +Disabled +Outline +``` diff --git a/static/usage/v8/chip/basic/react.md b/static/usage/v8/chip/basic/react.md new file mode 100644 index 00000000000..cc1989f2d03 --- /dev/null +++ b/static/usage/v8/chip/basic/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonChip } from '@ionic/react'; +function Example() { + return ( + <> + Default + Disabled + Outline + + ); +} +export default Example; +``` diff --git a/static/usage/v8/chip/basic/vue.md b/static/usage/v8/chip/basic/vue.md new file mode 100644 index 00000000000..69634b44d3e --- /dev/null +++ b/static/usage/v8/chip/basic/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v8/chip/slots/angular.md b/static/usage/v8/chip/slots/angular.md new file mode 100644 index 00000000000..75f2e24dd8d --- /dev/null +++ b/static/usage/v8/chip/slots/angular.md @@ -0,0 +1,15 @@ +```html + + + Silhouette of a person's head + + Avatar Chip + + + + + + Icon Chip + + +``` diff --git a/static/usage/v8/chip/slots/demo.html b/static/usage/v8/chip/slots/demo.html new file mode 100644 index 00000000000..378d7313110 --- /dev/null +++ b/static/usage/v8/chip/slots/demo.html @@ -0,0 +1,34 @@ + + + + + + Chip + + + + + + + + + +
+ + + Silhouette of a person's head + + Avatar Chip + + + + + + Icon Chip + + +
+ + + + diff --git a/static/usage/v8/chip/slots/index.md b/static/usage/v8/chip/slots/index.md new file mode 100644 index 00000000000..e73da2b3829 --- /dev/null +++ b/static/usage/v8/chip/slots/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/chip/slots/javascript.md b/static/usage/v8/chip/slots/javascript.md new file mode 100644 index 00000000000..75f2e24dd8d --- /dev/null +++ b/static/usage/v8/chip/slots/javascript.md @@ -0,0 +1,15 @@ +```html + + + Silhouette of a person's head + + Avatar Chip + + + + + + Icon Chip + + +``` diff --git a/static/usage/v8/chip/slots/react.md b/static/usage/v8/chip/slots/react.md new file mode 100644 index 00000000000..35dbd057c70 --- /dev/null +++ b/static/usage/v8/chip/slots/react.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonChip, IonAvatar, IonLabel, IonIcon } from '@ionic/react'; +import { close, closeCircle, pin } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + Silhouette of a person's head + + Avatar Chip + + + + + + Icon Chip + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/chip/slots/vue.md b/static/usage/v8/chip/slots/vue.md new file mode 100644 index 00000000000..76f0bbfcf48 --- /dev/null +++ b/static/usage/v8/chip/slots/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v8/chip/theming/colors/angular.md b/static/usage/v8/chip/theming/colors/angular.md new file mode 100644 index 00000000000..db05dd6f248 --- /dev/null +++ b/static/usage/v8/chip/theming/colors/angular.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/v8/chip/theming/colors/demo.html b/static/usage/v8/chip/theming/colors/demo.html new file mode 100644 index 00000000000..62e1584bd2f --- /dev/null +++ b/static/usage/v8/chip/theming/colors/demo.html @@ -0,0 +1,43 @@ + + + + + + Chip + + + + + + + + + + + +
+
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+
+ + + + diff --git a/static/usage/v8/chip/theming/colors/index.md b/static/usage/v8/chip/theming/colors/index.md new file mode 100644 index 00000000000..08aba14caca --- /dev/null +++ b/static/usage/v8/chip/theming/colors/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/chip/theming/colors/javascript.md b/static/usage/v8/chip/theming/colors/javascript.md new file mode 100644 index 00000000000..db05dd6f248 --- /dev/null +++ b/static/usage/v8/chip/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/v8/chip/theming/colors/react.md b/static/usage/v8/chip/theming/colors/react.md new file mode 100644 index 00000000000..8f12b4f978e --- /dev/null +++ b/static/usage/v8/chip/theming/colors/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonChip } from '@ionic/react'; +function Example() { + return ( + <> + Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark + + ); +} +export default Example; +``` diff --git a/static/usage/v8/chip/theming/colors/vue.md b/static/usage/v8/chip/theming/colors/vue.md new file mode 100644 index 00000000000..55221ac5115 --- /dev/null +++ b/static/usage/v8/chip/theming/colors/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v8/chip/theming/css-properties/angular/example_component_css.md b/static/usage/v8/chip/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..60dc62c6417 --- /dev/null +++ b/static/usage/v8/chip/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-chip { + --background: #00213f; + --color: #adefd1; +} +``` diff --git a/static/usage/v8/chip/theming/css-properties/angular/example_component_html.md b/static/usage/v8/chip/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..67c6144e7b8 --- /dev/null +++ b/static/usage/v8/chip/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Default +``` diff --git a/static/usage/v8/chip/theming/css-properties/demo.html b/static/usage/v8/chip/theming/css-properties/demo.html new file mode 100644 index 00000000000..31789181fc1 --- /dev/null +++ b/static/usage/v8/chip/theming/css-properties/demo.html @@ -0,0 +1,29 @@ + + + + + + Chip + + + + + + + + + + + +
+ Default +
+ + + + diff --git a/static/usage/v8/chip/theming/css-properties/index.md b/static/usage/v8/chip/theming/css-properties/index.md new file mode 100644 index 00000000000..2ce8f542f9c --- /dev/null +++ b/static/usage/v8/chip/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/chip/theming/css-properties/javascript.md b/static/usage/v8/chip/theming/css-properties/javascript.md new file mode 100644 index 00000000000..b40912d73a2 --- /dev/null +++ b/static/usage/v8/chip/theming/css-properties/javascript.md @@ -0,0 +1,10 @@ +```html + + +Default +``` diff --git a/static/usage/v8/chip/theming/css-properties/react/main_css.md b/static/usage/v8/chip/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..60dc62c6417 --- /dev/null +++ b/static/usage/v8/chip/theming/css-properties/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-chip { + --background: #00213f; + --color: #adefd1; +} +``` diff --git a/static/usage/v8/chip/theming/css-properties/react/main_tsx.md b/static/usage/v8/chip/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..b4fc5f12cae --- /dev/null +++ b/static/usage/v8/chip/theming/css-properties/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonChip } from '@ionic/react'; + +import './main.css'; + +function Example() { + return Default; +} +export default Example; +``` diff --git a/static/usage/v8/chip/theming/css-properties/vue.md b/static/usage/v8/chip/theming/css-properties/vue.md new file mode 100644 index 00000000000..7195787bd52 --- /dev/null +++ b/static/usage/v8/chip/theming/css-properties/vue.md @@ -0,0 +1,21 @@ +```html + + + + + +``` diff --git a/static/usage/v8/content/basic/angular.md b/static/usage/v8/content/basic/angular.md new file mode 100644 index 00000000000..31d6c7b092c --- /dev/null +++ b/static/usage/v8/content/basic/angular.md @@ -0,0 +1,12 @@ +```html + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ +``` diff --git a/static/usage/v8/content/basic/demo.html b/static/usage/v8/content/basic/demo.html new file mode 100644 index 00000000000..b0ba1a035bb --- /dev/null +++ b/static/usage/v8/content/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + Content + + + + + + + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + diff --git a/static/usage/v8/content/basic/index.md b/static/usage/v8/content/basic/index.md new file mode 100644 index 00000000000..2e49772c97d --- /dev/null +++ b/static/usage/v8/content/basic/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/content/basic/javascript.md b/static/usage/v8/content/basic/javascript.md new file mode 100644 index 00000000000..31d6c7b092c --- /dev/null +++ b/static/usage/v8/content/basic/javascript.md @@ -0,0 +1,12 @@ +```html + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ +``` diff --git a/static/usage/v8/content/basic/react.md b/static/usage/v8/content/basic/react.md new file mode 100644 index 00000000000..2ece824eea4 --- /dev/null +++ b/static/usage/v8/content/basic/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonContent } from '@ionic/react'; + +function Example() { + return ( + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/content/basic/vue.md b/static/usage/v8/content/basic/vue.md new file mode 100644 index 00000000000..84e2e35470e --- /dev/null +++ b/static/usage/v8/content/basic/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v8/content/fixed/angular.md b/static/usage/v8/content/fixed/angular.md new file mode 100644 index 00000000000..82cb3007125 --- /dev/null +++ b/static/usage/v8/content/fixed/angular.md @@ -0,0 +1,54 @@ +```html + +

Scroll the content and notice that the fixed button does not scroll.

+ + Normal Button + Fixed Button + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ +``` diff --git a/static/usage/v8/content/fixed/angular/example_component_css.md b/static/usage/v8/content/fixed/angular/example_component_css.md new file mode 100644 index 00000000000..1146da9a4b1 --- /dev/null +++ b/static/usage/v8/content/fixed/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-button[slot='fixed'] { + top: 50%; + right: 20px; +} +``` diff --git a/static/usage/v8/content/fixed/angular/example_component_html.md b/static/usage/v8/content/fixed/angular/example_component_html.md new file mode 100644 index 00000000000..82cb3007125 --- /dev/null +++ b/static/usage/v8/content/fixed/angular/example_component_html.md @@ -0,0 +1,54 @@ +```html + +

Scroll the content and notice that the fixed button does not scroll.

+ + Normal Button + Fixed Button + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ +``` diff --git a/static/usage/v8/content/fixed/demo.html b/static/usage/v8/content/fixed/demo.html new file mode 100644 index 00000000000..cd13bc4d34c --- /dev/null +++ b/static/usage/v8/content/fixed/demo.html @@ -0,0 +1,76 @@ + + + + + + Content + + + + + + + + + + + +

Scroll the content and notice that the fixed button does not scroll.

+ + Normal Button + Fixed Button + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim + fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce + augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada + mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia + mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere + pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, + aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, + pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida + malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. + Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero + odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, + vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in + odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. + Etiam lobortis tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan + condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt + libero finibus at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse + enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin + justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur + libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, + vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam + neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + diff --git a/static/usage/v8/content/fixed/index.md b/static/usage/v8/content/fixed/index.md new file mode 100644 index 00000000000..6ff6db1f65e --- /dev/null +++ b/static/usage/v8/content/fixed/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/content/fixed/javascript.md b/static/usage/v8/content/fixed/javascript.md new file mode 100644 index 00000000000..8613ca29a0c --- /dev/null +++ b/static/usage/v8/content/fixed/javascript.md @@ -0,0 +1,61 @@ +```html + +

Scroll the content and notice that the fixed button does not scroll.

+ + Normal Button + Fixed Button + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + +``` diff --git a/static/usage/v8/content/fixed/react.md b/static/usage/v8/content/fixed/react.md new file mode 100644 index 00000000000..55d5e1b9362 --- /dev/null +++ b/static/usage/v8/content/fixed/react.md @@ -0,0 +1,62 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent } from '@ionic/react'; + +function Example() { + return ( + +

Scroll the content and notice that the fixed button does not scroll.

+ + Normal Button + Fixed Button + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum + in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed + neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula + blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula + justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. + Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque + mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl + dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula + sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc + et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis + tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum + vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus + at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim + enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo + orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero + cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed + vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, + egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/content/fixed/react/main_css.md b/static/usage/v8/content/fixed/react/main_css.md new file mode 100644 index 00000000000..1146da9a4b1 --- /dev/null +++ b/static/usage/v8/content/fixed/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-button[slot='fixed'] { + top: 50%; + right: 20px; +} +``` diff --git a/static/usage/v8/content/fixed/react/main_tsx.md b/static/usage/v8/content/fixed/react/main_tsx.md new file mode 100644 index 00000000000..f81c3d02949 --- /dev/null +++ b/static/usage/v8/content/fixed/react/main_tsx.md @@ -0,0 +1,64 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + +

Scroll the content and notice that the fixed button does not scroll.

+ + Normal Button + Fixed Button + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum + in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed + neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula + blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula + justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. + Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque + mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl + dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula + sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc + et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis + tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum + vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus + at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim + enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo + orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero + cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed + vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, + egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/content/fixed/vue.md b/static/usage/v8/content/fixed/vue.md new file mode 100644 index 00000000000..31d3f7cd33c --- /dev/null +++ b/static/usage/v8/content/fixed/vue.md @@ -0,0 +1,72 @@ +```html + + + + + +``` diff --git a/static/usage/v8/content/fullscreen/angular/example_component_css.md b/static/usage/v8/content/fullscreen/angular/example_component_css.md new file mode 100644 index 00000000000..69fa48ad49e --- /dev/null +++ b/static/usage/v8/content/fullscreen/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-toolbar { + --opacity: 0.5; +} +``` diff --git a/static/usage/v8/content/fullscreen/angular/example_component_html.md b/static/usage/v8/content/fullscreen/angular/example_component_html.md new file mode 100644 index 00000000000..753f938b914 --- /dev/null +++ b/static/usage/v8/content/fullscreen/angular/example_component_html.md @@ -0,0 +1,61 @@ +```html + + + Header + + + +

Scroll the content and notice that the text goes behind the header and footer.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + Footer + + +``` diff --git a/static/usage/v8/content/fullscreen/demo.html b/static/usage/v8/content/fullscreen/demo.html new file mode 100644 index 00000000000..aa931cab1ae --- /dev/null +++ b/static/usage/v8/content/fullscreen/demo.html @@ -0,0 +1,82 @@ + + + + + + Content + + + + + + + + + + + + + Header + + + +

Scroll the content and notice that the text goes behind the header and footer.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim + fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce + augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada + mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia + mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere + pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, + aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, + pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida + malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. + Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero + odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, + vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in + odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. + Etiam lobortis tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan + condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt + libero finibus at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse + enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin + justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur + libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, + vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam + neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + Footer + + + + + diff --git a/static/usage/v8/content/fullscreen/index.md b/static/usage/v8/content/fullscreen/index.md new file mode 100644 index 00000000000..cc20ddf5070 --- /dev/null +++ b/static/usage/v8/content/fullscreen/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/content/fullscreen/javascript.md b/static/usage/v8/content/fullscreen/javascript.md new file mode 100644 index 00000000000..2fb4c68b16c --- /dev/null +++ b/static/usage/v8/content/fullscreen/javascript.md @@ -0,0 +1,67 @@ +```html + + + Header + + + +

Scroll the content and notice that the text goes behind the header and footer.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + Footer + + + + +``` diff --git a/static/usage/v8/content/fullscreen/react/main_css.md b/static/usage/v8/content/fullscreen/react/main_css.md new file mode 100644 index 00000000000..69fa48ad49e --- /dev/null +++ b/static/usage/v8/content/fullscreen/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-toolbar { + --opacity: 0.5; +} +``` diff --git a/static/usage/v8/content/fullscreen/react/main_tsx.md b/static/usage/v8/content/fullscreen/react/main_tsx.md new file mode 100644 index 00000000000..7302c484489 --- /dev/null +++ b/static/usage/v8/content/fullscreen/react/main_tsx.md @@ -0,0 +1,73 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + Header + + + +

Scroll the content and notice that the text goes behind the header and footer.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim + fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce + augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada + mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia + mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere + pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, + aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, + pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida + malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. + Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero + odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, + vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in + odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. + Etiam lobortis tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan + condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt + libero finibus at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse + enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin + justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur + libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, + vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam + neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/content/fullscreen/vue.md b/static/usage/v8/content/fullscreen/vue.md new file mode 100644 index 00000000000..3de93600da7 --- /dev/null +++ b/static/usage/v8/content/fullscreen/vue.md @@ -0,0 +1,78 @@ +```html + + + + + +``` diff --git a/static/usage/v8/content/header-footer/angular.md b/static/usage/v8/content/header-footer/angular.md new file mode 100644 index 00000000000..35a9aadc4c1 --- /dev/null +++ b/static/usage/v8/content/header-footer/angular.md @@ -0,0 +1,22 @@ +```html + + + Header + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + Footer + + +``` diff --git a/static/usage/v8/content/header-footer/demo.html b/static/usage/v8/content/header-footer/demo.html new file mode 100644 index 00000000000..e5770d1488d --- /dev/null +++ b/static/usage/v8/content/header-footer/demo.html @@ -0,0 +1,37 @@ + + + + + + Content + + + + + + + + + + + Header + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + Footer + + + + + diff --git a/static/usage/v8/content/header-footer/index.md b/static/usage/v8/content/header-footer/index.md new file mode 100644 index 00000000000..d045cac7fa7 --- /dev/null +++ b/static/usage/v8/content/header-footer/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/content/header-footer/javascript.md b/static/usage/v8/content/header-footer/javascript.md new file mode 100644 index 00000000000..35a9aadc4c1 --- /dev/null +++ b/static/usage/v8/content/header-footer/javascript.md @@ -0,0 +1,22 @@ +```html + + + Header + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + Footer + + +``` diff --git a/static/usage/v8/content/header-footer/react.md b/static/usage/v8/content/header-footer/react.md new file mode 100644 index 00000000000..e075e96cd81 --- /dev/null +++ b/static/usage/v8/content/header-footer/react.md @@ -0,0 +1,32 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/content/header-footer/vue.md b/static/usage/v8/content/header-footer/vue.md new file mode 100644 index 00000000000..dc914aee8f5 --- /dev/null +++ b/static/usage/v8/content/header-footer/vue.md @@ -0,0 +1,33 @@ +```html + + + +``` diff --git a/static/usage/v8/content/scroll-events/angular/example_component_html.md b/static/usage/v8/content/scroll-events/angular/example_component_html.md new file mode 100644 index 00000000000..4a66edad40a --- /dev/null +++ b/static/usage/v8/content/scroll-events/angular/example_component_html.md @@ -0,0 +1,59 @@ +```html + + + +

Scroll to fire the scroll events and view them in the console.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ +``` diff --git a/static/usage/v8/content/scroll-events/angular/example_component_ts.md b/static/usage/v8/content/scroll-events/angular/example_component_ts.md new file mode 100644 index 00000000000..ffd3d5b6d12 --- /dev/null +++ b/static/usage/v8/content/scroll-events/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; +import { ScrollDetail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + handleScrollStart() { + console.log('scroll start'); + } + + handleScroll(ev: CustomEvent) { + console.log('scroll', JSON.stringify(ev.detail)); + } + + handleScrollEnd() { + console.log('scroll end'); + } +} +``` diff --git a/static/usage/v8/content/scroll-events/demo.html b/static/usage/v8/content/scroll-events/demo.html new file mode 100644 index 00000000000..a9ac0d6e8ee --- /dev/null +++ b/static/usage/v8/content/scroll-events/demo.html @@ -0,0 +1,77 @@ + + + + + + Content + + + + + + + + + +

Scroll to fire the scroll events and view them in the console.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim + fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce + augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada + mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia + mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere + pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, + aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, + pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida + malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. + Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero + odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, + vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in + odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. + Etiam lobortis tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan + condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt + libero finibus at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse + enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin + justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur + libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, + vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam + neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + + + diff --git a/static/usage/v8/content/scroll-events/index.md b/static/usage/v8/content/scroll-events/index.md new file mode 100644 index 00000000000..aa9a992a48d --- /dev/null +++ b/static/usage/v8/content/scroll-events/index.md @@ -0,0 +1,27 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/content/scroll-events/javascript.md b/static/usage/v8/content/scroll-events/javascript.md new file mode 100644 index 00000000000..822a1b04f81 --- /dev/null +++ b/static/usage/v8/content/scroll-events/javascript.md @@ -0,0 +1,62 @@ +```html + +

Scroll to fire the scroll events and view them in the console.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + +``` diff --git a/static/usage/v8/content/scroll-events/react.md b/static/usage/v8/content/scroll-events/react.md new file mode 100644 index 00000000000..4247de13b39 --- /dev/null +++ b/static/usage/v8/content/scroll-events/react.md @@ -0,0 +1,78 @@ +```tsx +import React from 'react'; +import { IonContent, ScrollDetail } from '@ionic/react'; + +function Example() { + function handleScrollStart() { + console.log('scroll start'); + } + + function handleScroll(ev: CustomEvent) { + console.log('scroll', JSON.stringify(ev.detail)); + } + + function handleScrollEnd() { + console.log('scroll end'); + } + + return ( + // Scroll events are disabled by default for content for performance reasons, enable them to listen to them + +

Scroll to fire the scroll events and view them in the console.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum + in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed + neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula + blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula + justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. + Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque + mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl + dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula + sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc + et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis + tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum + vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus + at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim + enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo + orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero + cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed + vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, + egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/content/scroll-events/vue.md b/static/usage/v8/content/scroll-events/vue.md new file mode 100644 index 00000000000..1b8bada7d57 --- /dev/null +++ b/static/usage/v8/content/scroll-events/vue.md @@ -0,0 +1,80 @@ +```html + + + +``` diff --git a/static/usage/v8/content/scroll-methods/angular/example_component_html.md b/static/usage/v8/content/scroll-methods/angular/example_component_html.md new file mode 100644 index 00000000000..e585b97e78d --- /dev/null +++ b/static/usage/v8/content/scroll-methods/angular/example_component_html.md @@ -0,0 +1,55 @@ +```html + +

Click on the buttons to scroll the content.

+ + Scroll to Bottom + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + Scroll to Top + +``` diff --git a/static/usage/v8/content/scroll-methods/angular/example_component_ts.md b/static/usage/v8/content/scroll-methods/angular/example_component_ts.md new file mode 100644 index 00000000000..1975fe3b341 --- /dev/null +++ b/static/usage/v8/content/scroll-methods/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { IonContent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChild(IonContent) content: IonContent; + + scrollToBottom() { + // Passing a duration to the method makes it so the scroll slowly + // goes to the bottom instead of instantly + this.content.scrollToBottom(500); + } + + scrollToTop() { + // Passing a duration to the method makes it so the scroll slowly + // goes to the top instead of instantly + this.content.scrollToTop(500); + } +} +``` diff --git a/static/usage/v8/content/scroll-methods/demo.html b/static/usage/v8/content/scroll-methods/demo.html new file mode 100644 index 00000000000..86cf115f403 --- /dev/null +++ b/static/usage/v8/content/scroll-methods/demo.html @@ -0,0 +1,86 @@ + + + + + + Content + + + + + + + + + +

Click on the buttons to scroll the content.

+ + Scroll to Bottom + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim + fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce + augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada + mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia + mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere + pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, + aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, + pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida + malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. + Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero + odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, + vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in + odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. + Etiam lobortis tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan + condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt + libero finibus at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse + enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin + justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur + libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, + vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam + neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + Scroll to Top + + + + + + diff --git a/static/usage/v8/content/scroll-methods/index.md b/static/usage/v8/content/scroll-methods/index.md new file mode 100644 index 00000000000..97e328a25cc --- /dev/null +++ b/static/usage/v8/content/scroll-methods/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/content/scroll-methods/javascript.md b/static/usage/v8/content/scroll-methods/javascript.md new file mode 100644 index 00000000000..a53fbc7767b --- /dev/null +++ b/static/usage/v8/content/scroll-methods/javascript.md @@ -0,0 +1,71 @@ +```html + +

Click on the buttons to scroll the content.

+ + Scroll to Bottom + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + Scroll to Top + + + +``` diff --git a/static/usage/v8/content/scroll-methods/react.md b/static/usage/v8/content/scroll-methods/react.md new file mode 100644 index 00000000000..1d2d105e984 --- /dev/null +++ b/static/usage/v8/content/scroll-methods/react.md @@ -0,0 +1,81 @@ +```tsx +import React, { createRef } from 'react'; +import { IonButton, IonContent } from '@ionic/react'; + +function Example() { + const contentRef = createRef(); + + function scrollToBottom() { + // Passing a duration to the method makes it so the scroll slowly + // goes to the bottom instead of instantly + contentRef.current?.scrollToBottom(500); + } + + function scrollToTop() { + // Passing a duration to the method makes it so the scroll slowly + // goes to the top instead of instantly + contentRef.current?.scrollToTop(500); + } + + return ( + +

Click on the buttons to scroll the content.

+ + + Scroll to Bottom + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum + in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed + neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula + blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula + justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. + Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque + mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl + dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula + sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc + et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis + tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum + vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus + at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim + enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo + orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero + cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed + vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, + egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + Scroll to Top + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/content/scroll-methods/vue.md b/static/usage/v8/content/scroll-methods/vue.md new file mode 100644 index 00000000000..5ac6e8ee1fc --- /dev/null +++ b/static/usage/v8/content/scroll-methods/vue.md @@ -0,0 +1,78 @@ +```html + + + +``` diff --git a/static/usage/v8/content/theming/colors/angular.md b/static/usage/v8/content/theming/colors/angular.md new file mode 100644 index 00000000000..4b2489b6dae --- /dev/null +++ b/static/usage/v8/content/theming/colors/angular.md @@ -0,0 +1,38 @@ +```html + +

Primary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Secondary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Tertiary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Success content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Warning content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Danger content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Light content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Medium content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Dark content

+

Here's a small text description for the content. Nothing more, nothing less.

+ +``` diff --git a/static/usage/v8/content/theming/colors/demo.html b/static/usage/v8/content/theming/colors/demo.html new file mode 100644 index 00000000000..9c660f9d3f4 --- /dev/null +++ b/static/usage/v8/content/theming/colors/demo.html @@ -0,0 +1,67 @@ + + + + + + Content + + + + + + + + + + +
+ +

Primary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Secondary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Tertiary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Success content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Warning content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Danger content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Light content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Medium content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Dark content

+

Here's a small text description for the content. Nothing more, nothing less.

+ +
+ + + diff --git a/static/usage/v8/content/theming/colors/index.md b/static/usage/v8/content/theming/colors/index.md new file mode 100644 index 00000000000..207e0aaaa7f --- /dev/null +++ b/static/usage/v8/content/theming/colors/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/content/theming/colors/javascript.md b/static/usage/v8/content/theming/colors/javascript.md new file mode 100644 index 00000000000..4b2489b6dae --- /dev/null +++ b/static/usage/v8/content/theming/colors/javascript.md @@ -0,0 +1,38 @@ +```html + +

Primary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Secondary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Tertiary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Success content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Warning content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Danger content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Light content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Medium content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Dark content

+

Here's a small text description for the content. Nothing more, nothing less.

+ +``` diff --git a/static/usage/v8/content/theming/colors/react.md b/static/usage/v8/content/theming/colors/react.md new file mode 100644 index 00000000000..5a24d44a829 --- /dev/null +++ b/static/usage/v8/content/theming/colors/react.md @@ -0,0 +1,48 @@ +```tsx +import React from 'react'; +import { IonContent } from '@ionic/react'; + +function Example() { + return ( + <> + +

Primary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Secondary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Tertiary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Success content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Warning content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Danger content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Light content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Medium content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Dark content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/content/theming/colors/vue.md b/static/usage/v8/content/theming/colors/vue.md new file mode 100644 index 00000000000..1bbcc99834e --- /dev/null +++ b/static/usage/v8/content/theming/colors/vue.md @@ -0,0 +1,49 @@ +```html + + + +``` diff --git a/static/usage/v8/content/theming/css-properties/angular/example_component_css.md b/static/usage/v8/content/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..be9b9d8063c --- /dev/null +++ b/static/usage/v8/content/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-content { + --background: #d31373; + --color: #fff; +} +``` diff --git a/static/usage/v8/content/theming/css-properties/angular/example_component_html.md b/static/usage/v8/content/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..31d6c7b092c --- /dev/null +++ b/static/usage/v8/content/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ +``` diff --git a/static/usage/v8/content/theming/css-properties/demo.html b/static/usage/v8/content/theming/css-properties/demo.html new file mode 100644 index 00000000000..b48c3bd51fd --- /dev/null +++ b/static/usage/v8/content/theming/css-properties/demo.html @@ -0,0 +1,34 @@ + + + + + + Content + + + + + + + + + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + diff --git a/static/usage/v8/content/theming/css-properties/index.md b/static/usage/v8/content/theming/css-properties/index.md new file mode 100644 index 00000000000..54c7fe12094 --- /dev/null +++ b/static/usage/v8/content/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/content/theming/css-properties/javascript.md b/static/usage/v8/content/theming/css-properties/javascript.md new file mode 100644 index 00000000000..2ad2211af87 --- /dev/null +++ b/static/usage/v8/content/theming/css-properties/javascript.md @@ -0,0 +1,19 @@ +```html + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + +``` diff --git a/static/usage/v8/content/theming/css-properties/react/main_css.md b/static/usage/v8/content/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..be9b9d8063c --- /dev/null +++ b/static/usage/v8/content/theming/css-properties/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-content { + --background: #d31373; + --color: #fff; +} +``` diff --git a/static/usage/v8/content/theming/css-properties/react/main_tsx.md b/static/usage/v8/content/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..33f0e53433b --- /dev/null +++ b/static/usage/v8/content/theming/css-properties/react/main_tsx.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonContent } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/content/theming/css-properties/vue.md b/static/usage/v8/content/theming/css-properties/vue.md new file mode 100644 index 00000000000..09322711dfd --- /dev/null +++ b/static/usage/v8/content/theming/css-properties/vue.md @@ -0,0 +1,30 @@ +```html + + + + + +``` diff --git a/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..29c3d353879 --- /dev/null +++ b/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,9 @@ +```css +ion-content::part(background) { + background: #d31373; +} + +ion-content::part(scroll) { + color: #fff; +} +``` diff --git a/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..31d6c7b092c --- /dev/null +++ b/static/usage/v8/content/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ +``` diff --git a/static/usage/v8/content/theming/css-shadow-parts/demo.html b/static/usage/v8/content/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..b840581bf3e --- /dev/null +++ b/static/usage/v8/content/theming/css-shadow-parts/demo.html @@ -0,0 +1,37 @@ + + + + + + Content + + + + + + + + + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + diff --git a/static/usage/v8/content/theming/css-shadow-parts/index.md b/static/usage/v8/content/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..ce8ccc6ed3f --- /dev/null +++ b/static/usage/v8/content/theming/css-shadow-parts/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/content/theming/css-shadow-parts/javascript.md b/static/usage/v8/content/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..74124e4fdb3 --- /dev/null +++ b/static/usage/v8/content/theming/css-shadow-parts/javascript.md @@ -0,0 +1,22 @@ +```html + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + +``` diff --git a/static/usage/v8/content/theming/css-shadow-parts/react/main_css.md b/static/usage/v8/content/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..29c3d353879 --- /dev/null +++ b/static/usage/v8/content/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,9 @@ +```css +ion-content::part(background) { + background: #d31373; +} + +ion-content::part(scroll) { + color: #fff; +} +``` diff --git a/static/usage/v8/content/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v8/content/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..33f0e53433b --- /dev/null +++ b/static/usage/v8/content/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonContent } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/content/theming/css-shadow-parts/vue.md b/static/usage/v8/content/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..129f3ec615a --- /dev/null +++ b/static/usage/v8/content/theming/css-shadow-parts/vue.md @@ -0,0 +1,33 @@ +```html + + + + + +``` diff --git a/static/usage/v8/content/theming/safe-area/angular/example_component_css.md b/static/usage/v8/content/theming/safe-area/angular/example_component_css.md new file mode 100644 index 00000000000..17cf5c76c57 --- /dev/null +++ b/static/usage/v8/content/theming/safe-area/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-content::part(scroll) { + padding-top: var(--ion-safe-area-top, 0); + padding-bottom: var(--ion-safe-area-bottom, 0); + padding-left: var(--ion-safe-area-left, 0); + padding-right: var(--ion-safe-area-right, 0); +} +``` diff --git a/static/usage/v8/content/theming/safe-area/angular/example_component_html.md b/static/usage/v8/content/theming/safe-area/angular/example_component_html.md new file mode 100644 index 00000000000..d01b3935e35 --- /dev/null +++ b/static/usage/v8/content/theming/safe-area/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Here's a small text description for the content. Nothing more, nothing less. + +``` diff --git a/static/usage/v8/content/theming/safe-area/angular/global_css.md b/static/usage/v8/content/theming/safe-area/angular/global_css.md new file mode 100644 index 00000000000..bd18709f492 --- /dev/null +++ b/static/usage/v8/content/theming/safe-area/angular/global_css.md @@ -0,0 +1,12 @@ +```css +:root { + /** + * Setting the variables for DEMO purposes only. + * Values will be set automatically when building an iOS or Android app. + */ + --ion-safe-area-top: 20px; + --ion-safe-area-bottom: 20px; + --ion-safe-area-left: 20px; + --ion-safe-area-right: 20px; +} +``` diff --git a/static/usage/v8/content/theming/safe-area/demo.html b/static/usage/v8/content/theming/safe-area/demo.html new file mode 100644 index 00000000000..81bca712c04 --- /dev/null +++ b/static/usage/v8/content/theming/safe-area/demo.html @@ -0,0 +1,36 @@ + + + + + + Content + + + + + + + + + + + + Here's a small text description for the content. Nothing more, nothing less. + + + + diff --git a/static/usage/v8/content/theming/safe-area/index.md b/static/usage/v8/content/theming/safe-area/index.md new file mode 100644 index 00000000000..6ab052ec2d9 --- /dev/null +++ b/static/usage/v8/content/theming/safe-area/index.md @@ -0,0 +1,36 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/content/theming/safe-area/javascript.md b/static/usage/v8/content/theming/safe-area/javascript.md new file mode 100644 index 00000000000..2dc819d6a60 --- /dev/null +++ b/static/usage/v8/content/theming/safe-area/javascript.md @@ -0,0 +1,25 @@ +```html + + Here's a small text description for the content. Nothing more, nothing less. + + + +``` diff --git a/static/usage/v8/content/theming/safe-area/react/main_css.md b/static/usage/v8/content/theming/safe-area/react/main_css.md new file mode 100644 index 00000000000..6466670f427 --- /dev/null +++ b/static/usage/v8/content/theming/safe-area/react/main_css.md @@ -0,0 +1,19 @@ +```css +:root { + /** + * Setting the variables for DEMO purposes only. + * Values will be set automatically when building an iOS or Android app. + */ + --ion-safe-area-top: 20px; + --ion-safe-area-bottom: 20px; + --ion-safe-area-left: 20px; + --ion-safe-area-right: 20px; +} + +ion-content::part(scroll) { + padding-top: var(--ion-safe-area-top, 0); + padding-bottom: var(--ion-safe-area-bottom, 0); + padding-left: var(--ion-safe-area-left, 0); + padding-right: var(--ion-safe-area-right, 0); +} +``` diff --git a/static/usage/v8/content/theming/safe-area/react/main_tsx.md b/static/usage/v8/content/theming/safe-area/react/main_tsx.md new file mode 100644 index 00000000000..4f3ff8a34b4 --- /dev/null +++ b/static/usage/v8/content/theming/safe-area/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonContent } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + Here's a small text description for the content. Nothing more, nothing less. + + ); +} +export default Example; +``` diff --git a/static/usage/v8/content/theming/safe-area/vue.md b/static/usage/v8/content/theming/safe-area/vue.md new file mode 100644 index 00000000000..18c5e8c246e --- /dev/null +++ b/static/usage/v8/content/theming/safe-area/vue.md @@ -0,0 +1,40 @@ +```html + + + + + + + +``` diff --git a/static/usage/v8/datetime-button/basic/angular.md b/static/usage/v8/datetime-button/basic/angular.md new file mode 100644 index 00000000000..80a6ffe3724 --- /dev/null +++ b/static/usage/v8/datetime-button/basic/angular.md @@ -0,0 +1,9 @@ +```html + + + + + + + +``` diff --git a/static/usage/v8/datetime-button/basic/demo.html b/static/usage/v8/datetime-button/basic/demo.html new file mode 100644 index 00000000000..346ac369005 --- /dev/null +++ b/static/usage/v8/datetime-button/basic/demo.html @@ -0,0 +1,31 @@ + + + + + + Datetime + + + + + + + + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v8/datetime-button/basic/index.md b/static/usage/v8/datetime-button/basic/index.md new file mode 100644 index 00000000000..a55a9640c0f --- /dev/null +++ b/static/usage/v8/datetime-button/basic/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime-button/basic/javascript.md b/static/usage/v8/datetime-button/basic/javascript.md new file mode 100644 index 00000000000..3b39203bb90 --- /dev/null +++ b/static/usage/v8/datetime-button/basic/javascript.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v8/datetime-button/basic/react.md b/static/usage/v8/datetime-button/basic/react.md new file mode 100644 index 00000000000..62529cdb75f --- /dev/null +++ b/static/usage/v8/datetime-button/basic/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react'; +function Example() { + return ( + <> + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/datetime-button/basic/vue.md b/static/usage/v8/datetime-button/basic/vue.md new file mode 100644 index 00000000000..a595c27e409 --- /dev/null +++ b/static/usage/v8/datetime-button/basic/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/basic/angular.md b/static/usage/v8/datetime/basic/angular.md new file mode 100644 index 00000000000..676d4c61c18 --- /dev/null +++ b/static/usage/v8/datetime/basic/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/basic/demo.html b/static/usage/v8/datetime/basic/demo.html new file mode 100644 index 00000000000..820f002031d --- /dev/null +++ b/static/usage/v8/datetime/basic/demo.html @@ -0,0 +1,31 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/basic/index.md b/static/usage/v8/datetime/basic/index.md new file mode 100644 index 00000000000..99e893af493 --- /dev/null +++ b/static/usage/v8/datetime/basic/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/basic/javascript.md b/static/usage/v8/datetime/basic/javascript.md new file mode 100644 index 00000000000..676d4c61c18 --- /dev/null +++ b/static/usage/v8/datetime/basic/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/basic/react.md b/static/usage/v8/datetime/basic/react.md new file mode 100644 index 00000000000..fe17ddda39b --- /dev/null +++ b/static/usage/v8/datetime/basic/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/basic/vue.md b/static/usage/v8/datetime/basic/vue.md new file mode 100644 index 00000000000..cc68b9ab44a --- /dev/null +++ b/static/usage/v8/datetime/basic/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/angular.md b/static/usage/v8/datetime/buttons/customizing-button-texts/angular.md new file mode 100644 index 00000000000..f9d6b66b986 --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-button-texts/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/demo.html b/static/usage/v8/datetime/buttons/customizing-button-texts/demo.html new file mode 100644 index 00000000000..eeae254ce63 --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-button-texts/demo.html @@ -0,0 +1,28 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/index.md b/static/usage/v8/datetime/buttons/customizing-button-texts/index.md new file mode 100644 index 00000000000..7b03b2ff8f7 --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-button-texts/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/javascript.md b/static/usage/v8/datetime/buttons/customizing-button-texts/javascript.md new file mode 100644 index 00000000000..addbae86356 --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-button-texts/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/react.md b/static/usage/v8/datetime/buttons/customizing-button-texts/react.md new file mode 100644 index 00000000000..8806828082b --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-button-texts/react.md @@ -0,0 +1,8 @@ +```tsx +import React, { useRef } from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/buttons/customizing-button-texts/vue.md b/static/usage/v8/datetime/buttons/customizing-button-texts/vue.md new file mode 100644 index 00000000000..fddaa53fac1 --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-button-texts/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/angular.md b/static/usage/v8/datetime/buttons/customizing-buttons/angular.md new file mode 100644 index 00000000000..c5f1c5d8b9f --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-buttons/angular.md @@ -0,0 +1,9 @@ +```html + + + Reset + Never mind + All Set + + +``` diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/demo.html b/static/usage/v8/datetime/buttons/customizing-buttons/demo.html new file mode 100644 index 00000000000..31cd963a9a7 --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-buttons/demo.html @@ -0,0 +1,38 @@ + + + + + + Datetime + + + + + + + + + + +
+ + + Reset + Never mind + All Set + + +
+ + + + + + diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/index.md b/static/usage/v8/datetime/buttons/customizing-buttons/index.md new file mode 100644 index 00000000000..4224357f528 --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-buttons/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/javascript.md b/static/usage/v8/datetime/buttons/customizing-buttons/javascript.md new file mode 100644 index 00000000000..06ad3d83291 --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-buttons/javascript.md @@ -0,0 +1,13 @@ +```html + + + Reset + Never mind + All Set + + + + +``` diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/react.md b/static/usage/v8/datetime/buttons/customizing-buttons/react.md new file mode 100644 index 00000000000..20435641f42 --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-buttons/react.md @@ -0,0 +1,32 @@ +```tsx +import React, { useRef } from 'react'; +import { IonButtons, IonButton, IonDatetime } from '@ionic/react'; +function Example() { + const datetime = useRef(null); + const reset = () => { + datetime.current?.reset(); + }; + const cancel = () => { + datetime.current?.cancel(); + }; + const confirm = () => { + datetime.current?.confirm(); + }; + return ( + + + + Reset + + + Never mind + + + All Set + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/datetime/buttons/customizing-buttons/vue.md b/static/usage/v8/datetime/buttons/customizing-buttons/vue.md new file mode 100644 index 00000000000..4d1408b7ab4 --- /dev/null +++ b/static/usage/v8/datetime/buttons/customizing-buttons/vue.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md new file mode 100644 index 00000000000..bf3bb712166 --- /dev/null +++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/demo.html b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/demo.html new file mode 100644 index 00000000000..5e855fc3b9e --- /dev/null +++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/demo.html @@ -0,0 +1,28 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md new file mode 100644 index 00000000000..2510a15e899 --- /dev/null +++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/javascript.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/javascript.md new file mode 100644 index 00000000000..0c8a20f6672 --- /dev/null +++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/react.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/react.md new file mode 100644 index 00000000000..9409dc13911 --- /dev/null +++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/buttons/showing-confirmation-buttons/vue.md b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/vue.md new file mode 100644 index 00000000000..196d89fbf4d --- /dev/null +++ b/static/usage/v8/datetime/buttons/showing-confirmation-buttons/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_html.md b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_html.md new file mode 100644 index 00000000000..3ceed6383ae --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md new file mode 100644 index 00000000000..3021390e188 --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/advanced/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + isWeekday = (dateString: string) => { + const date = new Date(dateString); + const utcDay = date.getUTCDay(); + + /** + * Date will be enabled if it is not + * Sunday or Saturday + */ + return utcDay !== 0 && utcDay !== 6; + }; +} +``` diff --git a/static/usage/v8/datetime/date-constraints/advanced/demo.html b/static/usage/v8/datetime/date-constraints/advanced/demo.html new file mode 100644 index 00000000000..1899e3dcb19 --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/advanced/demo.html @@ -0,0 +1,41 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v8/datetime/date-constraints/advanced/index.md b/static/usage/v8/datetime/date-constraints/advanced/index.md new file mode 100644 index 00000000000..4e3dba9ca14 --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/advanced/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/datetime/date-constraints/advanced/javascript.md b/static/usage/v8/datetime/date-constraints/advanced/javascript.md new file mode 100644 index 00000000000..60a991725a0 --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/advanced/javascript.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/date-constraints/advanced/react.md b/static/usage/v8/datetime/date-constraints/advanced/react.md new file mode 100644 index 00000000000..ece5aef6c9e --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/advanced/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + const isWeekday = (dateString: string) => { + const date = new Date(dateString); + const utcDay = date.getUTCDay(); + + /** + * Date will be enabled if it is not + * Sunday or Saturday + */ + return utcDay !== 0 && utcDay !== 6; + }; + + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/date-constraints/advanced/vue.md b/static/usage/v8/datetime/date-constraints/advanced/vue.md new file mode 100644 index 00000000000..afd310f0867 --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/advanced/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/date-constraints/max-min/angular.md b/static/usage/v8/datetime/date-constraints/max-min/angular.md new file mode 100644 index 00000000000..f37914bd457 --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/max-min/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/date-constraints/max-min/demo.html b/static/usage/v8/datetime/date-constraints/max-min/demo.html new file mode 100644 index 00000000000..4c9e16d3c15 --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/max-min/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/date-constraints/max-min/index.md b/static/usage/v8/datetime/date-constraints/max-min/index.md new file mode 100644 index 00000000000..808fa7bf756 --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/max-min/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/date-constraints/max-min/javascript.md b/static/usage/v8/datetime/date-constraints/max-min/javascript.md new file mode 100644 index 00000000000..f37914bd457 --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/max-min/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/date-constraints/max-min/react.md b/static/usage/v8/datetime/date-constraints/max-min/react.md new file mode 100644 index 00000000000..e2493659c23 --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/max-min/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/date-constraints/max-min/vue.md b/static/usage/v8/datetime/date-constraints/max-min/vue.md new file mode 100644 index 00000000000..32fec242e0a --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/max-min/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/date-constraints/values/angular.md b/static/usage/v8/datetime/date-constraints/values/angular.md new file mode 100644 index 00000000000..ab31d1fad20 --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/values/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/date-constraints/values/demo.html b/static/usage/v8/datetime/date-constraints/values/demo.html new file mode 100644 index 00000000000..0881623db7e --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/values/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/date-constraints/values/index.md b/static/usage/v8/datetime/date-constraints/values/index.md new file mode 100644 index 00000000000..dc33ed9ac87 --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/values/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/date-constraints/values/javascript.md b/static/usage/v8/datetime/date-constraints/values/javascript.md new file mode 100644 index 00000000000..670f19ca6ea --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/values/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/date-constraints/values/react.md b/static/usage/v8/datetime/date-constraints/values/react.md new file mode 100644 index 00000000000..74516943d6e --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/values/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/date-constraints/values/vue.md b/static/usage/v8/datetime/date-constraints/values/vue.md new file mode 100644 index 00000000000..cf1d0eaaa89 --- /dev/null +++ b/static/usage/v8/datetime/date-constraints/values/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_html.md b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_html.md new file mode 100644 index 00000000000..25c15ca64c7 --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md new file mode 100644 index 00000000000..4ca93b85f44 --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/array/angular/example_component_ts.md @@ -0,0 +1,32 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + highlightedDates = [ + { + date: '2023-01-05', + textColor: '#800080', + backgroundColor: '#ffc0cb', + }, + { + date: '2023-01-10', + textColor: '#09721b', + backgroundColor: '#c8e5d0', + }, + { + date: '2023-01-20', + textColor: 'var(--ion-color-secondary-contrast)', + backgroundColor: 'var(--ion-color-secondary)', + }, + { + date: '2023-01-23', + textColor: 'rgb(68, 10, 184)', + backgroundColor: 'rgb(211, 200, 229)', + }, + ]; +} +``` diff --git a/static/usage/v8/datetime/highlightedDates/array/demo.html b/static/usage/v8/datetime/highlightedDates/array/demo.html new file mode 100644 index 00000000000..f6a1cd46143 --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/array/demo.html @@ -0,0 +1,53 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v8/datetime/highlightedDates/array/index.md b/static/usage/v8/datetime/highlightedDates/array/index.md new file mode 100644 index 00000000000..6438d84fcf3 --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/array/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/datetime/highlightedDates/array/javascript.md b/static/usage/v8/datetime/highlightedDates/array/javascript.md new file mode 100644 index 00000000000..a27ff554ee2 --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/array/javascript.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/highlightedDates/array/react.md b/static/usage/v8/datetime/highlightedDates/array/react.md new file mode 100644 index 00000000000..4d8d9258f63 --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/array/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v8/datetime/highlightedDates/array/vue.md b/static/usage/v8/datetime/highlightedDates/array/vue.md new file mode 100644 index 00000000000..408f58f2833 --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/array/vue.md @@ -0,0 +1,40 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_html.md b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_html.md new file mode 100644 index 00000000000..634090ab0ab --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md new file mode 100644 index 00000000000..60f9c700d05 --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/callback/angular/example_component_ts.md @@ -0,0 +1,30 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + highlightedDates = (isoString) => { + const date = new Date(isoString); + const utcDay = date.getUTCDate(); + + if (utcDay % 5 === 0) { + return { + textColor: '#800080', + backgroundColor: '#ffc0cb', + }; + } + + if (utcDay % 3 === 0) { + return { + textColor: 'var(--ion-color-secondary-contrast)', + backgroundColor: 'var(--ion-color-secondary)', + }; + } + + return undefined; + }; +} +``` diff --git a/static/usage/v8/datetime/highlightedDates/callback/demo.html b/static/usage/v8/datetime/highlightedDates/callback/demo.html new file mode 100644 index 00000000000..7e8dd58e36a --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/callback/demo.html @@ -0,0 +1,51 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v8/datetime/highlightedDates/callback/index.md b/static/usage/v8/datetime/highlightedDates/callback/index.md new file mode 100644 index 00000000000..106f90210cf --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/callback/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/datetime/highlightedDates/callback/javascript.md b/static/usage/v8/datetime/highlightedDates/callback/javascript.md new file mode 100644 index 00000000000..9041810960b --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/callback/javascript.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/highlightedDates/callback/react.md b/static/usage/v8/datetime/highlightedDates/callback/react.md new file mode 100644 index 00000000000..6543a1366ca --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/callback/react.md @@ -0,0 +1,32 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ( + { + const date = new Date(isoString); + const utcDay = date.getUTCDate(); + + if (utcDay % 5 === 0) { + return { + textColor: '#800080', + backgroundColor: '#ffc0cb', + }; + } + + if (utcDay % 3 === 0) { + return { + textColor: 'var(--ion-color-secondary-contrast)', + backgroundColor: 'var(--ion-color-secondary)', + }; + } + + return undefined; + }} + > + ); +} +export default Example; +``` diff --git a/static/usage/v8/datetime/highlightedDates/callback/vue.md b/static/usage/v8/datetime/highlightedDates/callback/vue.md new file mode 100644 index 00000000000..e916b2cef1b --- /dev/null +++ b/static/usage/v8/datetime/highlightedDates/callback/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/localization/custom-locale/angular.md b/static/usage/v8/datetime/localization/custom-locale/angular.md new file mode 100644 index 00000000000..c3697585c67 --- /dev/null +++ b/static/usage/v8/datetime/localization/custom-locale/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/localization/custom-locale/demo.html b/static/usage/v8/datetime/localization/custom-locale/demo.html new file mode 100644 index 00000000000..3a888e9fa77 --- /dev/null +++ b/static/usage/v8/datetime/localization/custom-locale/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/localization/custom-locale/index.md b/static/usage/v8/datetime/localization/custom-locale/index.md new file mode 100644 index 00000000000..566363cc089 --- /dev/null +++ b/static/usage/v8/datetime/localization/custom-locale/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/localization/custom-locale/javascript.md b/static/usage/v8/datetime/localization/custom-locale/javascript.md new file mode 100644 index 00000000000..c3697585c67 --- /dev/null +++ b/static/usage/v8/datetime/localization/custom-locale/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/localization/custom-locale/react.md b/static/usage/v8/datetime/localization/custom-locale/react.md new file mode 100644 index 00000000000..f543b588cf4 --- /dev/null +++ b/static/usage/v8/datetime/localization/custom-locale/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/localization/custom-locale/vue.md b/static/usage/v8/datetime/localization/custom-locale/vue.md new file mode 100644 index 00000000000..8a3712a255e --- /dev/null +++ b/static/usage/v8/datetime/localization/custom-locale/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/localization/first-day-of-week/angular.md b/static/usage/v8/datetime/localization/first-day-of-week/angular.md new file mode 100644 index 00000000000..2281060074e --- /dev/null +++ b/static/usage/v8/datetime/localization/first-day-of-week/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/localization/first-day-of-week/demo.html b/static/usage/v8/datetime/localization/first-day-of-week/demo.html new file mode 100644 index 00000000000..3d18ac3b522 --- /dev/null +++ b/static/usage/v8/datetime/localization/first-day-of-week/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/localization/first-day-of-week/index.md b/static/usage/v8/datetime/localization/first-day-of-week/index.md new file mode 100644 index 00000000000..389010b4302 --- /dev/null +++ b/static/usage/v8/datetime/localization/first-day-of-week/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/localization/first-day-of-week/javascript.md b/static/usage/v8/datetime/localization/first-day-of-week/javascript.md new file mode 100644 index 00000000000..420402e2d9c --- /dev/null +++ b/static/usage/v8/datetime/localization/first-day-of-week/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/localization/first-day-of-week/react.md b/static/usage/v8/datetime/localization/first-day-of-week/react.md new file mode 100644 index 00000000000..b39bb91a837 --- /dev/null +++ b/static/usage/v8/datetime/localization/first-day-of-week/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/localization/first-day-of-week/vue.md b/static/usage/v8/datetime/localization/first-day-of-week/vue.md new file mode 100644 index 00000000000..71c24fd72be --- /dev/null +++ b/static/usage/v8/datetime/localization/first-day-of-week/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/localization/hour-cycle/angular.md b/static/usage/v8/datetime/localization/hour-cycle/angular.md new file mode 100644 index 00000000000..aeb27d6152b --- /dev/null +++ b/static/usage/v8/datetime/localization/hour-cycle/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/localization/hour-cycle/demo.html b/static/usage/v8/datetime/localization/hour-cycle/demo.html new file mode 100644 index 00000000000..ca8d2c9a2ff --- /dev/null +++ b/static/usage/v8/datetime/localization/hour-cycle/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/localization/hour-cycle/index.md b/static/usage/v8/datetime/localization/hour-cycle/index.md new file mode 100644 index 00000000000..5ffaf29bb41 --- /dev/null +++ b/static/usage/v8/datetime/localization/hour-cycle/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/localization/hour-cycle/javascript.md b/static/usage/v8/datetime/localization/hour-cycle/javascript.md new file mode 100644 index 00000000000..5f3638f13aa --- /dev/null +++ b/static/usage/v8/datetime/localization/hour-cycle/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/localization/hour-cycle/react.md b/static/usage/v8/datetime/localization/hour-cycle/react.md new file mode 100644 index 00000000000..e05544cd3cc --- /dev/null +++ b/static/usage/v8/datetime/localization/hour-cycle/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/localization/hour-cycle/vue.md b/static/usage/v8/datetime/localization/hour-cycle/vue.md new file mode 100644 index 00000000000..b8767c6c2db --- /dev/null +++ b/static/usage/v8/datetime/localization/hour-cycle/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/angular.md b/static/usage/v8/datetime/localization/locale-extension-tags/angular.md new file mode 100644 index 00000000000..828f85eeb0a --- /dev/null +++ b/static/usage/v8/datetime/localization/locale-extension-tags/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/demo.html b/static/usage/v8/datetime/localization/locale-extension-tags/demo.html new file mode 100644 index 00000000000..f6102751e52 --- /dev/null +++ b/static/usage/v8/datetime/localization/locale-extension-tags/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/index.md b/static/usage/v8/datetime/localization/locale-extension-tags/index.md new file mode 100644 index 00000000000..33c92262f9e --- /dev/null +++ b/static/usage/v8/datetime/localization/locale-extension-tags/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/javascript.md b/static/usage/v8/datetime/localization/locale-extension-tags/javascript.md new file mode 100644 index 00000000000..828f85eeb0a --- /dev/null +++ b/static/usage/v8/datetime/localization/locale-extension-tags/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/react.md b/static/usage/v8/datetime/localization/locale-extension-tags/react.md new file mode 100644 index 00000000000..d945f768d3a --- /dev/null +++ b/static/usage/v8/datetime/localization/locale-extension-tags/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/localization/locale-extension-tags/vue.md b/static/usage/v8/datetime/localization/locale-extension-tags/vue.md new file mode 100644 index 00000000000..a0181dc8e2d --- /dev/null +++ b/static/usage/v8/datetime/localization/locale-extension-tags/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/localization/time-label/angular.md b/static/usage/v8/datetime/localization/time-label/angular.md new file mode 100644 index 00000000000..38f0e697d3a --- /dev/null +++ b/static/usage/v8/datetime/localization/time-label/angular.md @@ -0,0 +1,5 @@ +```html + + Tiempo + +``` diff --git a/static/usage/v8/datetime/localization/time-label/demo.html b/static/usage/v8/datetime/localization/time-label/demo.html new file mode 100644 index 00000000000..ad11584169f --- /dev/null +++ b/static/usage/v8/datetime/localization/time-label/demo.html @@ -0,0 +1,29 @@ + + + + + + Datetime + + + + + + + + + + +
+ + Tiempo + +
+ + + + diff --git a/static/usage/v8/datetime/localization/time-label/index.md b/static/usage/v8/datetime/localization/time-label/index.md new file mode 100644 index 00000000000..e35108abac4 --- /dev/null +++ b/static/usage/v8/datetime/localization/time-label/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/localization/time-label/javascript.md b/static/usage/v8/datetime/localization/time-label/javascript.md new file mode 100644 index 00000000000..38f0e697d3a --- /dev/null +++ b/static/usage/v8/datetime/localization/time-label/javascript.md @@ -0,0 +1,5 @@ +```html + + Tiempo + +``` diff --git a/static/usage/v8/datetime/localization/time-label/react.md b/static/usage/v8/datetime/localization/time-label/react.md new file mode 100644 index 00000000000..ba81f8743a8 --- /dev/null +++ b/static/usage/v8/datetime/localization/time-label/react.md @@ -0,0 +1,12 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ( + + Tiempo + + ); +} +export default Example; +``` diff --git a/static/usage/v8/datetime/localization/time-label/vue.md b/static/usage/v8/datetime/localization/time-label/vue.md new file mode 100644 index 00000000000..37af973ee32 --- /dev/null +++ b/static/usage/v8/datetime/localization/time-label/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/multiple/angular.md b/static/usage/v8/datetime/multiple/angular.md new file mode 100644 index 00000000000..e26fe9e931d --- /dev/null +++ b/static/usage/v8/datetime/multiple/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/multiple/demo.html b/static/usage/v8/datetime/multiple/demo.html new file mode 100644 index 00000000000..57d69a33a42 --- /dev/null +++ b/static/usage/v8/datetime/multiple/demo.html @@ -0,0 +1,32 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v8/datetime/multiple/index.md b/static/usage/v8/datetime/multiple/index.md new file mode 100644 index 00000000000..84405fb740f --- /dev/null +++ b/static/usage/v8/datetime/multiple/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/multiple/javascript.md b/static/usage/v8/datetime/multiple/javascript.md new file mode 100644 index 00000000000..10455808ab2 --- /dev/null +++ b/static/usage/v8/datetime/multiple/javascript.md @@ -0,0 +1,8 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/multiple/react.md b/static/usage/v8/datetime/multiple/react.md new file mode 100644 index 00000000000..87028027d47 --- /dev/null +++ b/static/usage/v8/datetime/multiple/react.md @@ -0,0 +1,16 @@ +```tsx +import React, { useRef, useEffect } from 'react'; +import { IonDatetime } from '@ionic/react'; + +function Example() { + const datetime = useRef(null); + + useEffect(() => { + if (!datetime.current) return; + datetime.current.value = ['2022-06-03', '2022-06-13', '2022-06-29']; + }, []); + + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/multiple/vue.md b/static/usage/v8/datetime/multiple/vue.md new file mode 100644 index 00000000000..837fc7e2f9f --- /dev/null +++ b/static/usage/v8/datetime/multiple/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/presentation/date/angular.md b/static/usage/v8/datetime/presentation/date/angular.md new file mode 100644 index 00000000000..8694e723b1a --- /dev/null +++ b/static/usage/v8/datetime/presentation/date/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/presentation/date/demo.html b/static/usage/v8/datetime/presentation/date/demo.html new file mode 100644 index 00000000000..f8cca1eb012 --- /dev/null +++ b/static/usage/v8/datetime/presentation/date/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/presentation/date/index.md b/static/usage/v8/datetime/presentation/date/index.md new file mode 100644 index 00000000000..97780827260 --- /dev/null +++ b/static/usage/v8/datetime/presentation/date/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/presentation/date/javascript.md b/static/usage/v8/datetime/presentation/date/javascript.md new file mode 100644 index 00000000000..8694e723b1a --- /dev/null +++ b/static/usage/v8/datetime/presentation/date/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/presentation/date/react.md b/static/usage/v8/datetime/presentation/date/react.md new file mode 100644 index 00000000000..72e24d86874 --- /dev/null +++ b/static/usage/v8/datetime/presentation/date/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/presentation/date/vue.md b/static/usage/v8/datetime/presentation/date/vue.md new file mode 100644 index 00000000000..b686297a867 --- /dev/null +++ b/static/usage/v8/datetime/presentation/date/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/presentation/month-and-year/angular.md b/static/usage/v8/datetime/presentation/month-and-year/angular.md new file mode 100644 index 00000000000..fee755e147f --- /dev/null +++ b/static/usage/v8/datetime/presentation/month-and-year/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/presentation/month-and-year/demo.html b/static/usage/v8/datetime/presentation/month-and-year/demo.html new file mode 100644 index 00000000000..32c4db0378c --- /dev/null +++ b/static/usage/v8/datetime/presentation/month-and-year/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/presentation/month-and-year/index.md b/static/usage/v8/datetime/presentation/month-and-year/index.md new file mode 100644 index 00000000000..524545fb033 --- /dev/null +++ b/static/usage/v8/datetime/presentation/month-and-year/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/presentation/month-and-year/javascript.md b/static/usage/v8/datetime/presentation/month-and-year/javascript.md new file mode 100644 index 00000000000..fee755e147f --- /dev/null +++ b/static/usage/v8/datetime/presentation/month-and-year/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/presentation/month-and-year/react.md b/static/usage/v8/datetime/presentation/month-and-year/react.md new file mode 100644 index 00000000000..f140c4b09c0 --- /dev/null +++ b/static/usage/v8/datetime/presentation/month-and-year/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/presentation/month-and-year/vue.md b/static/usage/v8/datetime/presentation/month-and-year/vue.md new file mode 100644 index 00000000000..01744a290fe --- /dev/null +++ b/static/usage/v8/datetime/presentation/month-and-year/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/presentation/time/angular.md b/static/usage/v8/datetime/presentation/time/angular.md new file mode 100644 index 00000000000..d54dd466706 --- /dev/null +++ b/static/usage/v8/datetime/presentation/time/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/presentation/time/demo.html b/static/usage/v8/datetime/presentation/time/demo.html new file mode 100644 index 00000000000..015489a4b13 --- /dev/null +++ b/static/usage/v8/datetime/presentation/time/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/presentation/time/index.md b/static/usage/v8/datetime/presentation/time/index.md new file mode 100644 index 00000000000..9423cfba0f9 --- /dev/null +++ b/static/usage/v8/datetime/presentation/time/index.md @@ -0,0 +1,12 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/presentation/time/javascript.md b/static/usage/v8/datetime/presentation/time/javascript.md new file mode 100644 index 00000000000..d54dd466706 --- /dev/null +++ b/static/usage/v8/datetime/presentation/time/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/presentation/time/react.md b/static/usage/v8/datetime/presentation/time/react.md new file mode 100644 index 00000000000..30e0e206fbc --- /dev/null +++ b/static/usage/v8/datetime/presentation/time/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/presentation/time/vue.md b/static/usage/v8/datetime/presentation/time/vue.md new file mode 100644 index 00000000000..7e01bc7d730 --- /dev/null +++ b/static/usage/v8/datetime/presentation/time/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/presentation/wheel/angular.md b/static/usage/v8/datetime/presentation/wheel/angular.md new file mode 100644 index 00000000000..f98877053c3 --- /dev/null +++ b/static/usage/v8/datetime/presentation/wheel/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/presentation/wheel/demo.html b/static/usage/v8/datetime/presentation/wheel/demo.html new file mode 100644 index 00000000000..e3642ae3ccc --- /dev/null +++ b/static/usage/v8/datetime/presentation/wheel/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/presentation/wheel/index.md b/static/usage/v8/datetime/presentation/wheel/index.md new file mode 100644 index 00000000000..47e4923bba6 --- /dev/null +++ b/static/usage/v8/datetime/presentation/wheel/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/presentation/wheel/javascript.md b/static/usage/v8/datetime/presentation/wheel/javascript.md new file mode 100644 index 00000000000..83f43a87d61 --- /dev/null +++ b/static/usage/v8/datetime/presentation/wheel/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/presentation/wheel/react.md b/static/usage/v8/datetime/presentation/wheel/react.md new file mode 100644 index 00000000000..fc7873b4765 --- /dev/null +++ b/static/usage/v8/datetime/presentation/wheel/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/presentation/wheel/vue.md b/static/usage/v8/datetime/presentation/wheel/vue.md new file mode 100644 index 00000000000..c1055e8cfb7 --- /dev/null +++ b/static/usage/v8/datetime/presentation/wheel/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_css.md b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_css.md new file mode 100644 index 00000000000..c8a3e173e21 --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_css.md @@ -0,0 +1,46 @@ +```css +/* +* Custom Datetime Day Parts +* ------------------------------------------- +*/ + +ion-datetime::part(calendar-day) { + color: #da5296; +} + +ion-datetime::part(calendar-day today) { + color: #8462d1; +} + +ion-datetime::part(calendar-day):focus { + background-color: rgb(154 209 98 / 0.2); + box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2); +} + +/* +* Custom Material Design Datetime Day Parts +* ------------------------------------------- +*/ + +ion-datetime.md::part(calendar-day active), +ion-datetime.md::part(calendar-day active):focus { + background-color: #9ad162; + border-color: #9ad162; + color: #fff; +} + +ion-datetime.md::part(calendar-day today) { + border-color: #8462d1; +} + +/* +* Custom iOS Datetime Day Parts +* ------------------------------------------- +*/ + +ion-datetime.ios::part(calendar-day active), +ion-datetime.ios::part(calendar-day active):focus { + background-color: rgb(154 209 98 / 0.2); + color: #9ad162; +} +``` diff --git a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_html.md b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_html.md new file mode 100644 index 00000000000..dde0aec7085 --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md new file mode 100644 index 00000000000..56c95d0ba0e --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-days/angular/example_component_ts.md @@ -0,0 +1,36 @@ +```ts +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; + +// ViewEncapsulation is turned off for this demo due to +// a lack of support for styling multiple css shadow parts +// See https://github.com/angular/angular/issues/22515 +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + encapsulation: ViewEncapsulation.None, +}) +export class ExampleComponent implements OnInit { + public datetime; + + ngOnInit() { + const date = new Date(); + + // Set the value of the datetime to 2 days + // before the current day + let dayChange = -2; + + // If the day we are going to set the value to + // is in the previous month then set the day 2 days + // later instead so it remains in the same month + if (date.getDate() + dayChange <= 0) { + dayChange = -dayChange; + } + + // Set the value of the datetime to the day + // calculated above + date.setDate(date.getDate() + dayChange); + this.datetime = date.toISOString(); + } +} +``` diff --git a/static/usage/v8/datetime/styling/calendar-days/demo.html b/static/usage/v8/datetime/styling/calendar-days/demo.html new file mode 100644 index 00000000000..93046ed0dee --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-days/demo.html @@ -0,0 +1,91 @@ + + + + + + Datetime + + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v8/datetime/styling/calendar-days/index.md b/static/usage/v8/datetime/styling/calendar-days/index.md new file mode 100644 index 00000000000..4ab6c14f639 --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-days/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/datetime/styling/calendar-days/javascript.md b/static/usage/v8/datetime/styling/calendar-days/javascript.md new file mode 100644 index 00000000000..20aa37bb016 --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-days/javascript.md @@ -0,0 +1,72 @@ +```html + + + + + +``` diff --git a/static/usage/v8/datetime/styling/calendar-days/react/main_css.md b/static/usage/v8/datetime/styling/calendar-days/react/main_css.md new file mode 100644 index 00000000000..c8a3e173e21 --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-days/react/main_css.md @@ -0,0 +1,46 @@ +```css +/* +* Custom Datetime Day Parts +* ------------------------------------------- +*/ + +ion-datetime::part(calendar-day) { + color: #da5296; +} + +ion-datetime::part(calendar-day today) { + color: #8462d1; +} + +ion-datetime::part(calendar-day):focus { + background-color: rgb(154 209 98 / 0.2); + box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2); +} + +/* +* Custom Material Design Datetime Day Parts +* ------------------------------------------- +*/ + +ion-datetime.md::part(calendar-day active), +ion-datetime.md::part(calendar-day active):focus { + background-color: #9ad162; + border-color: #9ad162; + color: #fff; +} + +ion-datetime.md::part(calendar-day today) { + border-color: #8462d1; +} + +/* +* Custom iOS Datetime Day Parts +* ------------------------------------------- +*/ + +ion-datetime.ios::part(calendar-day active), +ion-datetime.ios::part(calendar-day active):focus { + background-color: rgb(154 209 98 / 0.2); + color: #9ad162; +} +``` diff --git a/static/usage/v8/datetime/styling/calendar-days/react/main_tsx.md b/static/usage/v8/datetime/styling/calendar-days/react/main_tsx.md new file mode 100644 index 00000000000..fc76cb27d59 --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-days/react/main_tsx.md @@ -0,0 +1,33 @@ +```tsx +import React, { useEffect, useState } from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + const [datetime, setDatetime] = useState(null); + + useEffect(() => { + const date = new Date(); + + // Set the value of the datetime to 2 days + // before the current day + let dayChange = -2; + + // If the day we are going to set the value to + // is in the previous month then set the day 2 days + // later instead so it remains in the same month + if (date.getDate() + dayChange <= 0) { + dayChange = -dayChange; + } + + // Set the value of the datetime to the day + // calculated above + date.setDate(date.getDate() + dayChange); + setDatetime(date.toISOString()); + }, []); + + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/styling/calendar-days/vue.md b/static/usage/v8/datetime/styling/calendar-days/vue.md new file mode 100644 index 00000000000..98031201d7c --- /dev/null +++ b/static/usage/v8/datetime/styling/calendar-days/vue.md @@ -0,0 +1,88 @@ +```html + + + + + +``` diff --git a/static/usage/v8/datetime/styling/global-theming/angular/example_component_html.md b/static/usage/v8/datetime/styling/global-theming/angular/example_component_html.md new file mode 100644 index 00000000000..0a38b1bc5b6 --- /dev/null +++ b/static/usage/v8/datetime/styling/global-theming/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/styling/global-theming/angular/global_css.md b/static/usage/v8/datetime/styling/global-theming/angular/global_css.md new file mode 100644 index 00000000000..4ec3d3ecdf9 --- /dev/null +++ b/static/usage/v8/datetime/styling/global-theming/angular/global_css.md @@ -0,0 +1,66 @@ +```css +/* Core CSS required for Ionic components to work properly */ +@import '~@ionic/angular/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +@import '~@ionic/angular/css/normalize.css'; +@import '~@ionic/angular/css/structure.css'; +@import '~@ionic/angular/css/typography.css'; +@import '~@ionic/angular/css/display.css'; + +/* Optional CSS utils that can be commented out */ +@import '~@ionic/angular/css/padding.css'; +@import '~@ionic/angular/css/float-elements.css'; +@import '~@ionic/angular/css/text-alignment.css'; +@import '~@ionic/angular/css/text-transformation.css'; +@import '~@ionic/angular/css/flex-utils.css'; + +:root { + --ion-color-rose: #831843; + --ion-color-rose-rgb: 131, 24, 67; + --ion-color-rose-contrast: #ffffff; + --ion-color-rose-contrast-rgb: 255, 255, 255; + --ion-color-rose-shade: #73153b; + --ion-color-rose-tint: #8f2f56; + + --ion-text-color: #881337; + --ion-text-color-rgb: 136, 19, 55; + + --ion-color-step-50: #f9e6e9; + --ion-color-step-100: #f3dbdf; + --ion-color-step-150: #edd0d6; + --ion-color-step-200: #e7c5cd; + --ion-color-step-250: #e1bac3; + --ion-color-step-300: #dbaeba; + --ion-color-step-350: #d5a3b1; + --ion-color-step-400: #cf98a7; + --ion-color-step-450: #c98d9e; + --ion-color-step-500: #c48295; + --ion-color-step-550: #be778b; + --ion-color-step-600: #b86c82; + --ion-color-step-650: #b26178; + --ion-color-step-700: #ac566f; + --ion-color-step-750: #a64b66; + --ion-color-step-800: #a03f5c; + --ion-color-step-850: #9a3453; + --ion-color-step-900: #94294a; + --ion-color-step-950: #8e1e40; +} + +.ion-color-rose { + --ion-color-base: var(--ion-color-rose); + --ion-color-base-rgb: var(--ion-color-rose-rgb); + --ion-color-contrast: var(--ion-color-rose-contrast); + --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); + --ion-color-shade: var(--ion-color-rose-shade); + --ion-color-tint: var(--ion-color-rose-tint); +} + +ion-datetime { + --background: #fff1f2; + --background-rgb: 255, 241, 242; + + border-radius: 16px; + box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; +} +``` diff --git a/static/usage/v8/datetime/styling/global-theming/demo.html b/static/usage/v8/datetime/styling/global-theming/demo.html new file mode 100644 index 00000000000..7ea2d621df3 --- /dev/null +++ b/static/usage/v8/datetime/styling/global-theming/demo.html @@ -0,0 +1,76 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/styling/global-theming/index.md b/static/usage/v8/datetime/styling/global-theming/index.md new file mode 100644 index 00000000000..f8824304f07 --- /dev/null +++ b/static/usage/v8/datetime/styling/global-theming/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/datetime/styling/global-theming/javascript.md b/static/usage/v8/datetime/styling/global-theming/javascript.md new file mode 100644 index 00000000000..3da768ccbb4 --- /dev/null +++ b/static/usage/v8/datetime/styling/global-theming/javascript.md @@ -0,0 +1,54 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/styling/global-theming/react/main_css.md b/static/usage/v8/datetime/styling/global-theming/react/main_css.md new file mode 100644 index 00000000000..dccf6c7d370 --- /dev/null +++ b/static/usage/v8/datetime/styling/global-theming/react/main_css.md @@ -0,0 +1,50 @@ +```css +:root { + --ion-color-rose: #831843; + --ion-color-rose-rgb: 131, 24, 67; + --ion-color-rose-contrast: #ffffff; + --ion-color-rose-contrast-rgb: 255, 255, 255; + --ion-color-rose-shade: #73153b; + --ion-color-rose-tint: #8f2f56; + + --ion-text-color: #881337; + --ion-text-color-rgb: 136, 19, 55; + + --ion-color-step-50: #f9e6e9; + --ion-color-step-100: #f3dbdf; + --ion-color-step-150: #edd0d6; + --ion-color-step-200: #e7c5cd; + --ion-color-step-250: #e1bac3; + --ion-color-step-300: #dbaeba; + --ion-color-step-350: #d5a3b1; + --ion-color-step-400: #cf98a7; + --ion-color-step-450: #c98d9e; + --ion-color-step-500: #c48295; + --ion-color-step-550: #be778b; + --ion-color-step-600: #b86c82; + --ion-color-step-650: #b26178; + --ion-color-step-700: #ac566f; + --ion-color-step-750: #a64b66; + --ion-color-step-800: #a03f5c; + --ion-color-step-850: #9a3453; + --ion-color-step-900: #94294a; + --ion-color-step-950: #8e1e40; +} + +.ion-color-rose { + --ion-color-base: var(--ion-color-rose); + --ion-color-base-rgb: var(--ion-color-rose-rgb); + --ion-color-contrast: var(--ion-color-rose-contrast); + --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); + --ion-color-shade: var(--ion-color-rose-shade); + --ion-color-tint: var(--ion-color-rose-tint); +} + +ion-datetime { + --background: #fff1f2; + --background-rgb: 255, 241, 242; + + border-radius: 16px; + box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; +} +``` diff --git a/static/usage/v8/datetime/styling/global-theming/react/main_tsx.md b/static/usage/v8/datetime/styling/global-theming/react/main_tsx.md new file mode 100644 index 00000000000..37e658cdcd1 --- /dev/null +++ b/static/usage/v8/datetime/styling/global-theming/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/styling/global-theming/vue.md b/static/usage/v8/datetime/styling/global-theming/vue.md new file mode 100644 index 00000000000..32e682cfbc9 --- /dev/null +++ b/static/usage/v8/datetime/styling/global-theming/vue.md @@ -0,0 +1,65 @@ +```html + + + + + +``` diff --git a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_css.md b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_css.md new file mode 100644 index 00000000000..936a6699b06 --- /dev/null +++ b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_css.md @@ -0,0 +1,16 @@ +```css +ion-datetime { + --background: rgb(245, 235, 247); + --background-rgb: 245, 235, 247; + --wheel-highlight-background: rgb(218, 216, 255); + --wheel-fade-background-rgb: 245, 235, 247; +} + +ion-datetime::part(wheel-item) { + color: rgb(255, 66, 97); +} + +ion-datetime::part(wheel-item active) { + color: rgb(128, 30, 171); +} +``` diff --git a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_html.md b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_html.md new file mode 100644 index 00000000000..83c19decb31 --- /dev/null +++ b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md new file mode 100644 index 00000000000..39bac10093c --- /dev/null +++ b/static/usage/v8/datetime/styling/wheel-styling/angular/example_component_ts.md @@ -0,0 +1,14 @@ +```ts +import { Component, ViewEncapsulation } from '@angular/core'; + +// ViewEncapsulation is turned off for this demo due to +// a lack of support for styling multiple css shadow parts +// See https://github.com/angular/angular/issues/22515 +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + encapsulation: ViewEncapsulation.None, +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/datetime/styling/wheel-styling/demo.html b/static/usage/v8/datetime/styling/wheel-styling/demo.html new file mode 100644 index 00000000000..4f0f11238aa --- /dev/null +++ b/static/usage/v8/datetime/styling/wheel-styling/demo.html @@ -0,0 +1,39 @@ + + + + + + Datetime + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/styling/wheel-styling/index.md b/static/usage/v8/datetime/styling/wheel-styling/index.md new file mode 100644 index 00000000000..25fab2a4910 --- /dev/null +++ b/static/usage/v8/datetime/styling/wheel-styling/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/datetime/styling/wheel-styling/javascript.md b/static/usage/v8/datetime/styling/wheel-styling/javascript.md new file mode 100644 index 00000000000..3e0df9e425d --- /dev/null +++ b/static/usage/v8/datetime/styling/wheel-styling/javascript.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/styling/wheel-styling/react/main_css.md b/static/usage/v8/datetime/styling/wheel-styling/react/main_css.md new file mode 100644 index 00000000000..936a6699b06 --- /dev/null +++ b/static/usage/v8/datetime/styling/wheel-styling/react/main_css.md @@ -0,0 +1,16 @@ +```css +ion-datetime { + --background: rgb(245, 235, 247); + --background-rgb: 245, 235, 247; + --wheel-highlight-background: rgb(218, 216, 255); + --wheel-fade-background-rgb: 245, 235, 247; +} + +ion-datetime::part(wheel-item) { + color: rgb(255, 66, 97); +} + +ion-datetime::part(wheel-item active) { + color: rgb(128, 30, 171); +} +``` diff --git a/static/usage/v8/datetime/styling/wheel-styling/react/main_tsx.md b/static/usage/v8/datetime/styling/wheel-styling/react/main_tsx.md new file mode 100644 index 00000000000..6e01ae735c3 --- /dev/null +++ b/static/usage/v8/datetime/styling/wheel-styling/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/styling/wheel-styling/vue.md b/static/usage/v8/datetime/styling/wheel-styling/vue.md new file mode 100644 index 00000000000..a90c729af63 --- /dev/null +++ b/static/usage/v8/datetime/styling/wheel-styling/vue.md @@ -0,0 +1,31 @@ +```html + + + + + +``` diff --git a/static/usage/v8/datetime/theming/angular/example_component_html.md b/static/usage/v8/datetime/theming/angular/example_component_html.md new file mode 100644 index 00000000000..0a38b1bc5b6 --- /dev/null +++ b/static/usage/v8/datetime/theming/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/theming/angular/global_css.md b/static/usage/v8/datetime/theming/angular/global_css.md new file mode 100644 index 00000000000..4ec3d3ecdf9 --- /dev/null +++ b/static/usage/v8/datetime/theming/angular/global_css.md @@ -0,0 +1,66 @@ +```css +/* Core CSS required for Ionic components to work properly */ +@import '~@ionic/angular/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +@import '~@ionic/angular/css/normalize.css'; +@import '~@ionic/angular/css/structure.css'; +@import '~@ionic/angular/css/typography.css'; +@import '~@ionic/angular/css/display.css'; + +/* Optional CSS utils that can be commented out */ +@import '~@ionic/angular/css/padding.css'; +@import '~@ionic/angular/css/float-elements.css'; +@import '~@ionic/angular/css/text-alignment.css'; +@import '~@ionic/angular/css/text-transformation.css'; +@import '~@ionic/angular/css/flex-utils.css'; + +:root { + --ion-color-rose: #831843; + --ion-color-rose-rgb: 131, 24, 67; + --ion-color-rose-contrast: #ffffff; + --ion-color-rose-contrast-rgb: 255, 255, 255; + --ion-color-rose-shade: #73153b; + --ion-color-rose-tint: #8f2f56; + + --ion-text-color: #881337; + --ion-text-color-rgb: 136, 19, 55; + + --ion-color-step-50: #f9e6e9; + --ion-color-step-100: #f3dbdf; + --ion-color-step-150: #edd0d6; + --ion-color-step-200: #e7c5cd; + --ion-color-step-250: #e1bac3; + --ion-color-step-300: #dbaeba; + --ion-color-step-350: #d5a3b1; + --ion-color-step-400: #cf98a7; + --ion-color-step-450: #c98d9e; + --ion-color-step-500: #c48295; + --ion-color-step-550: #be778b; + --ion-color-step-600: #b86c82; + --ion-color-step-650: #b26178; + --ion-color-step-700: #ac566f; + --ion-color-step-750: #a64b66; + --ion-color-step-800: #a03f5c; + --ion-color-step-850: #9a3453; + --ion-color-step-900: #94294a; + --ion-color-step-950: #8e1e40; +} + +.ion-color-rose { + --ion-color-base: var(--ion-color-rose); + --ion-color-base-rgb: var(--ion-color-rose-rgb); + --ion-color-contrast: var(--ion-color-rose-contrast); + --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); + --ion-color-shade: var(--ion-color-rose-shade); + --ion-color-tint: var(--ion-color-rose-tint); +} + +ion-datetime { + --background: #fff1f2; + --background-rgb: 255, 241, 242; + + border-radius: 16px; + box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; +} +``` diff --git a/static/usage/v8/datetime/theming/demo.html b/static/usage/v8/datetime/theming/demo.html new file mode 100644 index 00000000000..f2e502cfe56 --- /dev/null +++ b/static/usage/v8/datetime/theming/demo.html @@ -0,0 +1,76 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/theming/index.md b/static/usage/v8/datetime/theming/index.md new file mode 100644 index 00000000000..3ed5817346f --- /dev/null +++ b/static/usage/v8/datetime/theming/index.md @@ -0,0 +1,35 @@ +# TODO FW-4608 + +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/datetime/theming/javascript.md b/static/usage/v8/datetime/theming/javascript.md new file mode 100644 index 00000000000..3da768ccbb4 --- /dev/null +++ b/static/usage/v8/datetime/theming/javascript.md @@ -0,0 +1,54 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/theming/react/main_css.md b/static/usage/v8/datetime/theming/react/main_css.md new file mode 100644 index 00000000000..dccf6c7d370 --- /dev/null +++ b/static/usage/v8/datetime/theming/react/main_css.md @@ -0,0 +1,50 @@ +```css +:root { + --ion-color-rose: #831843; + --ion-color-rose-rgb: 131, 24, 67; + --ion-color-rose-contrast: #ffffff; + --ion-color-rose-contrast-rgb: 255, 255, 255; + --ion-color-rose-shade: #73153b; + --ion-color-rose-tint: #8f2f56; + + --ion-text-color: #881337; + --ion-text-color-rgb: 136, 19, 55; + + --ion-color-step-50: #f9e6e9; + --ion-color-step-100: #f3dbdf; + --ion-color-step-150: #edd0d6; + --ion-color-step-200: #e7c5cd; + --ion-color-step-250: #e1bac3; + --ion-color-step-300: #dbaeba; + --ion-color-step-350: #d5a3b1; + --ion-color-step-400: #cf98a7; + --ion-color-step-450: #c98d9e; + --ion-color-step-500: #c48295; + --ion-color-step-550: #be778b; + --ion-color-step-600: #b86c82; + --ion-color-step-650: #b26178; + --ion-color-step-700: #ac566f; + --ion-color-step-750: #a64b66; + --ion-color-step-800: #a03f5c; + --ion-color-step-850: #9a3453; + --ion-color-step-900: #94294a; + --ion-color-step-950: #8e1e40; +} + +.ion-color-rose { + --ion-color-base: var(--ion-color-rose); + --ion-color-base-rgb: var(--ion-color-rose-rgb); + --ion-color-contrast: var(--ion-color-rose-contrast); + --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); + --ion-color-shade: var(--ion-color-rose-shade); + --ion-color-tint: var(--ion-color-rose-tint); +} + +ion-datetime { + --background: #fff1f2; + --background-rgb: 255, 241, 242; + + border-radius: 16px; + box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; +} +``` diff --git a/static/usage/v8/datetime/theming/react/main_tsx.md b/static/usage/v8/datetime/theming/react/main_tsx.md new file mode 100644 index 00000000000..37e658cdcd1 --- /dev/null +++ b/static/usage/v8/datetime/theming/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/theming/vue.md b/static/usage/v8/datetime/theming/vue.md new file mode 100644 index 00000000000..32e682cfbc9 --- /dev/null +++ b/static/usage/v8/datetime/theming/vue.md @@ -0,0 +1,65 @@ +```html + + + + + +``` diff --git a/static/usage/v8/datetime/title/customizing-title/angular.md b/static/usage/v8/datetime/title/customizing-title/angular.md new file mode 100644 index 00000000000..5f0ded69fbc --- /dev/null +++ b/static/usage/v8/datetime/title/customizing-title/angular.md @@ -0,0 +1,5 @@ +```html + + Select a Reservation Date + +``` diff --git a/static/usage/v8/datetime/title/customizing-title/demo.html b/static/usage/v8/datetime/title/customizing-title/demo.html new file mode 100644 index 00000000000..734766aa361 --- /dev/null +++ b/static/usage/v8/datetime/title/customizing-title/demo.html @@ -0,0 +1,29 @@ + + + + + + Datetime + + + + + + + + + + +
+ + Select a Reservation Date + +
+ + + + diff --git a/static/usage/v8/datetime/title/customizing-title/index.md b/static/usage/v8/datetime/title/customizing-title/index.md new file mode 100644 index 00000000000..82a2b46e45b --- /dev/null +++ b/static/usage/v8/datetime/title/customizing-title/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/title/customizing-title/javascript.md b/static/usage/v8/datetime/title/customizing-title/javascript.md new file mode 100644 index 00000000000..5f0ded69fbc --- /dev/null +++ b/static/usage/v8/datetime/title/customizing-title/javascript.md @@ -0,0 +1,5 @@ +```html + + Select a Reservation Date + +``` diff --git a/static/usage/v8/datetime/title/customizing-title/react.md b/static/usage/v8/datetime/title/customizing-title/react.md new file mode 100644 index 00000000000..ae4fec002d5 --- /dev/null +++ b/static/usage/v8/datetime/title/customizing-title/react.md @@ -0,0 +1,12 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ( + + Select a Reservation Date + + ); +} +export default Example; +``` diff --git a/static/usage/v8/datetime/title/customizing-title/vue.md b/static/usage/v8/datetime/title/customizing-title/vue.md new file mode 100644 index 00000000000..cb633931dba --- /dev/null +++ b/static/usage/v8/datetime/title/customizing-title/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v8/datetime/title/showing-default-title/angular.md b/static/usage/v8/datetime/title/showing-default-title/angular.md new file mode 100644 index 00000000000..c67e022da04 --- /dev/null +++ b/static/usage/v8/datetime/title/showing-default-title/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/title/showing-default-title/demo.html b/static/usage/v8/datetime/title/showing-default-title/demo.html new file mode 100644 index 00000000000..83730417b3b --- /dev/null +++ b/static/usage/v8/datetime/title/showing-default-title/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/datetime/title/showing-default-title/index.md b/static/usage/v8/datetime/title/showing-default-title/index.md new file mode 100644 index 00000000000..c0efd60dc18 --- /dev/null +++ b/static/usage/v8/datetime/title/showing-default-title/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/datetime/title/showing-default-title/javascript.md b/static/usage/v8/datetime/title/showing-default-title/javascript.md new file mode 100644 index 00000000000..6786deb32cf --- /dev/null +++ b/static/usage/v8/datetime/title/showing-default-title/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/datetime/title/showing-default-title/react.md b/static/usage/v8/datetime/title/showing-default-title/react.md new file mode 100644 index 00000000000..f04d7d55a36 --- /dev/null +++ b/static/usage/v8/datetime/title/showing-default-title/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/datetime/title/showing-default-title/vue.md b/static/usage/v8/datetime/title/showing-default-title/vue.md new file mode 100644 index 00000000000..7a6e48f7214 --- /dev/null +++ b/static/usage/v8/datetime/title/showing-default-title/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/fab/basic/angular.md b/static/usage/v8/fab/basic/angular.md new file mode 100644 index 00000000000..b8394f90ed6 --- /dev/null +++ b/static/usage/v8/fab/basic/angular.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v8/fab/basic/demo.html b/static/usage/v8/fab/basic/demo.html new file mode 100644 index 00000000000..882d14b7b1b --- /dev/null +++ b/static/usage/v8/fab/basic/demo.html @@ -0,0 +1,26 @@ + + + + + + Fab + + + + + + + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v8/fab/basic/index.md b/static/usage/v8/fab/basic/index.md new file mode 100644 index 00000000000..d1172ccc7c7 --- /dev/null +++ b/static/usage/v8/fab/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/fab/basic/javascript.md b/static/usage/v8/fab/basic/javascript.md new file mode 100644 index 00000000000..b8394f90ed6 --- /dev/null +++ b/static/usage/v8/fab/basic/javascript.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v8/fab/basic/react.md b/static/usage/v8/fab/basic/react.md new file mode 100644 index 00000000000..f1df86581d6 --- /dev/null +++ b/static/usage/v8/fab/basic/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonIcon } from '@ionic/react'; +import { add } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/fab/basic/vue.md b/static/usage/v8/fab/basic/vue.md new file mode 100644 index 00000000000..dc16daae992 --- /dev/null +++ b/static/usage/v8/fab/basic/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v8/fab/button-sizing/angular.md b/static/usage/v8/fab/button-sizing/angular.md new file mode 100644 index 00000000000..31bd1874625 --- /dev/null +++ b/static/usage/v8/fab/button-sizing/angular.md @@ -0,0 +1,18 @@ +```html + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/fab/button-sizing/demo.html b/static/usage/v8/fab/button-sizing/demo.html new file mode 100644 index 00000000000..98b2b255b4c --- /dev/null +++ b/static/usage/v8/fab/button-sizing/demo.html @@ -0,0 +1,37 @@ + + + + + + Fab + + + + + + + + + +
+ + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/fab/button-sizing/index.md b/static/usage/v8/fab/button-sizing/index.md new file mode 100644 index 00000000000..4c0eeba8100 --- /dev/null +++ b/static/usage/v8/fab/button-sizing/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/fab/button-sizing/javascript.md b/static/usage/v8/fab/button-sizing/javascript.md new file mode 100644 index 00000000000..31bd1874625 --- /dev/null +++ b/static/usage/v8/fab/button-sizing/javascript.md @@ -0,0 +1,18 @@ +```html + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/fab/button-sizing/react.md b/static/usage/v8/fab/button-sizing/react.md new file mode 100644 index 00000000000..c6837284e08 --- /dev/null +++ b/static/usage/v8/fab/button-sizing/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/fab/button-sizing/vue.md b/static/usage/v8/fab/button-sizing/vue.md new file mode 100644 index 00000000000..5ea6d8adb56 --- /dev/null +++ b/static/usage/v8/fab/button-sizing/vue.md @@ -0,0 +1,33 @@ +```html + + + +``` diff --git a/static/usage/v8/fab/list-side/angular.md b/static/usage/v8/fab/list-side/angular.md new file mode 100644 index 00000000000..17f7d1818c0 --- /dev/null +++ b/static/usage/v8/fab/list-side/angular.md @@ -0,0 +1,33 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/fab/list-side/demo.html b/static/usage/v8/fab/list-side/demo.html new file mode 100644 index 00000000000..0d9f3291e1d --- /dev/null +++ b/static/usage/v8/fab/list-side/demo.html @@ -0,0 +1,52 @@ + + + + + + Fab + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/fab/list-side/index.md b/static/usage/v8/fab/list-side/index.md new file mode 100644 index 00000000000..23d2789fe3b --- /dev/null +++ b/static/usage/v8/fab/list-side/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/fab/list-side/javascript.md b/static/usage/v8/fab/list-side/javascript.md new file mode 100644 index 00000000000..17f7d1818c0 --- /dev/null +++ b/static/usage/v8/fab/list-side/javascript.md @@ -0,0 +1,33 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/fab/list-side/react.md b/static/usage/v8/fab/list-side/react.md new file mode 100644 index 00000000000..b461d8c94eb --- /dev/null +++ b/static/usage/v8/fab/list-side/react.md @@ -0,0 +1,42 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react'; +import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/fab/list-side/vue.md b/static/usage/v8/fab/list-side/vue.md new file mode 100644 index 00000000000..459ea75e845 --- /dev/null +++ b/static/usage/v8/fab/list-side/vue.md @@ -0,0 +1,48 @@ +```html + + + +``` diff --git a/static/usage/v8/fab/positioning/angular.md b/static/usage/v8/fab/positioning/angular.md new file mode 100644 index 00000000000..7bca2f10d2f --- /dev/null +++ b/static/usage/v8/fab/positioning/angular.md @@ -0,0 +1,59 @@ +```html + + + Fab Buttons + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/fab/positioning/demo.html b/static/usage/v8/fab/positioning/demo.html new file mode 100644 index 00000000000..f6449a636ae --- /dev/null +++ b/static/usage/v8/fab/positioning/demo.html @@ -0,0 +1,74 @@ + + + + + + Fab + + + + + + + + + + + Fab Buttons + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v8/fab/positioning/index.md b/static/usage/v8/fab/positioning/index.md new file mode 100644 index 00000000000..deb0474e9a5 --- /dev/null +++ b/static/usage/v8/fab/positioning/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/fab/positioning/javascript.md b/static/usage/v8/fab/positioning/javascript.md new file mode 100644 index 00000000000..d9d93856bcd --- /dev/null +++ b/static/usage/v8/fab/positioning/javascript.md @@ -0,0 +1,59 @@ +```html + + + Fab Buttons + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/fab/positioning/react.md b/static/usage/v8/fab/positioning/react.md new file mode 100644 index 00000000000..95253561d9d --- /dev/null +++ b/static/usage/v8/fab/positioning/react.md @@ -0,0 +1,77 @@ +```tsx +import React from 'react'; +import { IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/react'; +import { + chevronDownCircle, + chevronForwardCircle, + chevronUpCircle, + colorPalette, + document, + globe, +} from 'ionicons/icons'; + +function Example() { + return ( + <> + + + Fab Buttons + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/fab/positioning/vue.md b/static/usage/v8/fab/positioning/vue.md new file mode 100644 index 00000000000..baa2f82e882 --- /dev/null +++ b/static/usage/v8/fab/positioning/vue.md @@ -0,0 +1,81 @@ +```html + + + +``` diff --git a/static/usage/v8/fab/safe-area/angular/example_component_css.md b/static/usage/v8/fab/safe-area/angular/example_component_css.md new file mode 100644 index 00000000000..a19373c3cc5 --- /dev/null +++ b/static/usage/v8/fab/safe-area/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-fab { + margin-top: var(--ion-safe-area-top, 0); + margin-bottom: var(--ion-safe-area-bottom, 0); +} +``` diff --git a/static/usage/v8/fab/safe-area/angular/example_component_html.md b/static/usage/v8/fab/safe-area/angular/example_component_html.md new file mode 100644 index 00000000000..3ba464d7f58 --- /dev/null +++ b/static/usage/v8/fab/safe-area/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v8/fab/safe-area/angular/global_css.md b/static/usage/v8/fab/safe-area/angular/global_css.md new file mode 100644 index 00000000000..d1b434fa246 --- /dev/null +++ b/static/usage/v8/fab/safe-area/angular/global_css.md @@ -0,0 +1,10 @@ +```css +:root { + /** + * Setting the variables for DEMO purposes only. + * Values will be set automatically when building an iOS or Android app. + */ + --ion-safe-area-top: 20px; + --ion-safe-area-bottom: 20px; +} +``` diff --git a/static/usage/v8/fab/safe-area/demo.html b/static/usage/v8/fab/safe-area/demo.html new file mode 100644 index 00000000000..998593d9ca7 --- /dev/null +++ b/static/usage/v8/fab/safe-area/demo.html @@ -0,0 +1,28 @@ + + + + + + Fab + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v8/fab/safe-area/index.md b/static/usage/v8/fab/safe-area/index.md new file mode 100644 index 00000000000..d8f761227c6 --- /dev/null +++ b/static/usage/v8/fab/safe-area/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/fab/safe-area/javascript.md b/static/usage/v8/fab/safe-area/javascript.md new file mode 100644 index 00000000000..4585b8d545c --- /dev/null +++ b/static/usage/v8/fab/safe-area/javascript.md @@ -0,0 +1,23 @@ +```html + + + + + + + +``` diff --git a/static/usage/v8/fab/safe-area/react/main_css.md b/static/usage/v8/fab/safe-area/react/main_css.md new file mode 100644 index 00000000000..ecbcce54651 --- /dev/null +++ b/static/usage/v8/fab/safe-area/react/main_css.md @@ -0,0 +1,15 @@ +```css +:root { + /** + * Setting the variables for DEMO purposes only. + * Values will be set automatically when building an iOS or Android app. + */ + --ion-safe-area-top: 20px; + --ion-safe-area-bottom: 20px; +} + +ion-fab { + margin-top: var(--ion-safe-area-top, 0); + margin-bottom: var(--ion-safe-area-bottom, 0); +} +``` diff --git a/static/usage/v8/fab/safe-area/react/main_tsx.md b/static/usage/v8/fab/safe-area/react/main_tsx.md new file mode 100644 index 00000000000..d5a790048e7 --- /dev/null +++ b/static/usage/v8/fab/safe-area/react/main_tsx.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonIcon } from '@ionic/react'; +import { add } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/fab/safe-area/vue.md b/static/usage/v8/fab/safe-area/vue.md new file mode 100644 index 00000000000..1127a3128db --- /dev/null +++ b/static/usage/v8/fab/safe-area/vue.md @@ -0,0 +1,44 @@ +```html + + + + + + + +``` diff --git a/static/usage/v8/fab/theming/colors/angular.md b/static/usage/v8/fab/theming/colors/angular.md new file mode 100644 index 00000000000..66d4db84a0f --- /dev/null +++ b/static/usage/v8/fab/theming/colors/angular.md @@ -0,0 +1,33 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/fab/theming/colors/demo.html b/static/usage/v8/fab/theming/colors/demo.html new file mode 100644 index 00000000000..1ae2df54329 --- /dev/null +++ b/static/usage/v8/fab/theming/colors/demo.html @@ -0,0 +1,52 @@ + + + + + + Fab + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/fab/theming/colors/index.md b/static/usage/v8/fab/theming/colors/index.md new file mode 100644 index 00000000000..93571b0084c --- /dev/null +++ b/static/usage/v8/fab/theming/colors/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/fab/theming/colors/javascript.md b/static/usage/v8/fab/theming/colors/javascript.md new file mode 100644 index 00000000000..66d4db84a0f --- /dev/null +++ b/static/usage/v8/fab/theming/colors/javascript.md @@ -0,0 +1,33 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/fab/theming/colors/react.md b/static/usage/v8/fab/theming/colors/react.md new file mode 100644 index 00000000000..c600aaca898 --- /dev/null +++ b/static/usage/v8/fab/theming/colors/react.md @@ -0,0 +1,42 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react'; +import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/fab/theming/colors/vue.md b/static/usage/v8/fab/theming/colors/vue.md new file mode 100644 index 00000000000..f37cb9707b3 --- /dev/null +++ b/static/usage/v8/fab/theming/colors/vue.md @@ -0,0 +1,48 @@ +```html + + + +``` diff --git a/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_css.md b/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_css.md new file mode 100644 index 00000000000..ce1d9d06816 --- /dev/null +++ b/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_css.md @@ -0,0 +1,10 @@ +```css +ion-fab-button { + --background: #b7f399; + --background-activated: #87d361; + --background-hover: #a3e681; + --border-radius: 15px; + --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); + --color: black; +} +``` diff --git a/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_html.md b/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_html.md new file mode 100644 index 00000000000..4db1e796e3a --- /dev/null +++ b/static/usage/v8/fab/theming/css-custom-properties/angular/example_component_html.md @@ -0,0 +1,18 @@ +```html + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/fab/theming/css-custom-properties/demo.html b/static/usage/v8/fab/theming/css-custom-properties/demo.html new file mode 100644 index 00000000000..3d0fd49ac95 --- /dev/null +++ b/static/usage/v8/fab/theming/css-custom-properties/demo.html @@ -0,0 +1,48 @@ + + + + + + Fab + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/fab/theming/css-custom-properties/index.md b/static/usage/v8/fab/theming/css-custom-properties/index.md new file mode 100644 index 00000000000..94ebf3e223c --- /dev/null +++ b/static/usage/v8/fab/theming/css-custom-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/fab/theming/css-custom-properties/javascript.md b/static/usage/v8/fab/theming/css-custom-properties/javascript.md new file mode 100644 index 00000000000..55df4e255bd --- /dev/null +++ b/static/usage/v8/fab/theming/css-custom-properties/javascript.md @@ -0,0 +1,29 @@ +```html + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/fab/theming/css-custom-properties/react/main_css.md b/static/usage/v8/fab/theming/css-custom-properties/react/main_css.md new file mode 100644 index 00000000000..ce1d9d06816 --- /dev/null +++ b/static/usage/v8/fab/theming/css-custom-properties/react/main_css.md @@ -0,0 +1,10 @@ +```css +ion-fab-button { + --background: #b7f399; + --background-activated: #87d361; + --background-hover: #a3e681; + --border-radius: 15px; + --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); + --color: black; +} +``` diff --git a/static/usage/v8/fab/theming/css-custom-properties/react/main_tsx.md b/static/usage/v8/fab/theming/css-custom-properties/react/main_tsx.md new file mode 100644 index 00000000000..8a1371c77ec --- /dev/null +++ b/static/usage/v8/fab/theming/css-custom-properties/react/main_tsx.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/fab/theming/css-custom-properties/vue.md b/static/usage/v8/fab/theming/css-custom-properties/vue.md new file mode 100644 index 00000000000..00d3b6c87f8 --- /dev/null +++ b/static/usage/v8/fab/theming/css-custom-properties/vue.md @@ -0,0 +1,44 @@ +```html + + + + + +``` diff --git a/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..4bb8b96988c --- /dev/null +++ b/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,16 @@ +```css +ion-fab-button::part(native) { + background-color: #b7f399; + border-radius: 15px; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); + color: black; +} + +ion-fab-button::part(native):hover::after { + background-color: #a3e681; +} + +ion-fab-button::part(native):active::after { + background-color: #87d361; +} +``` diff --git a/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..4db1e796e3a --- /dev/null +++ b/static/usage/v8/fab/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,18 @@ +```html + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/fab/theming/css-shadow-parts/demo.html b/static/usage/v8/fab/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..2e7bd8ec955 --- /dev/null +++ b/static/usage/v8/fab/theming/css-shadow-parts/demo.html @@ -0,0 +1,54 @@ + + + + + + Fab + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/fab/theming/css-shadow-parts/index.md b/static/usage/v8/fab/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..8f9b56738ae --- /dev/null +++ b/static/usage/v8/fab/theming/css-shadow-parts/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/fab/theming/css-shadow-parts/javascript.md b/static/usage/v8/fab/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..19c1441fe2f --- /dev/null +++ b/static/usage/v8/fab/theming/css-shadow-parts/javascript.md @@ -0,0 +1,35 @@ +```html + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/fab/theming/css-shadow-parts/react/main_css.md b/static/usage/v8/fab/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..4bb8b96988c --- /dev/null +++ b/static/usage/v8/fab/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,16 @@ +```css +ion-fab-button::part(native) { + background-color: #b7f399; + border-radius: 15px; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); + color: black; +} + +ion-fab-button::part(native):hover::after { + background-color: #a3e681; +} + +ion-fab-button::part(native):active::after { + background-color: #87d361; +} +``` diff --git a/static/usage/v8/fab/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v8/fab/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..8a1371c77ec --- /dev/null +++ b/static/usage/v8/fab/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/fab/theming/css-shadow-parts/vue.md b/static/usage/v8/fab/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..aee0d929a06 --- /dev/null +++ b/static/usage/v8/fab/theming/css-shadow-parts/vue.md @@ -0,0 +1,50 @@ +```html + + + + + +``` diff --git a/static/usage/v8/footer/basic/angular.md b/static/usage/v8/footer/basic/angular.md new file mode 100644 index 00000000000..b0506781582 --- /dev/null +++ b/static/usage/v8/footer/basic/angular.md @@ -0,0 +1,10 @@ +```html + +

Content

+ + + + Footer + + +``` diff --git a/static/usage/v8/footer/basic/demo.html b/static/usage/v8/footer/basic/demo.html new file mode 100644 index 00000000000..d2592eca731 --- /dev/null +++ b/static/usage/v8/footer/basic/demo.html @@ -0,0 +1,25 @@ + + + + + + Footer + + + + + + + + + +

Content

+ + + + Footer + + + + + diff --git a/static/usage/v8/footer/basic/index.md b/static/usage/v8/footer/basic/index.md new file mode 100644 index 00000000000..d9abf47d787 --- /dev/null +++ b/static/usage/v8/footer/basic/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/footer/basic/javascript.md b/static/usage/v8/footer/basic/javascript.md new file mode 100644 index 00000000000..b0506781582 --- /dev/null +++ b/static/usage/v8/footer/basic/javascript.md @@ -0,0 +1,10 @@ +```html + +

Content

+ + + + Footer + + +``` diff --git a/static/usage/v8/footer/basic/react.md b/static/usage/v8/footer/basic/react.md new file mode 100644 index 00000000000..6d7119f0f3f --- /dev/null +++ b/static/usage/v8/footer/basic/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + +

Content

+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/footer/basic/vue.md b/static/usage/v8/footer/basic/vue.md new file mode 100644 index 00000000000..ed20057150d --- /dev/null +++ b/static/usage/v8/footer/basic/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v8/footer/custom-scroll-target/angular/example_component_css.md b/static/usage/v8/footer/custom-scroll-target/angular/example_component_css.md new file mode 100644 index 00000000000..4db169a0e16 --- /dev/null +++ b/static/usage/v8/footer/custom-scroll-target/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v8/footer/custom-scroll-target/angular/example_component_html.md b/static/usage/v8/footer/custom-scroll-target/angular/example_component_html.md new file mode 100644 index 00000000000..a0429f5e23b --- /dev/null +++ b/static/usage/v8/footer/custom-scroll-target/angular/example_component_html.md @@ -0,0 +1,69 @@ +```html + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, + while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 + teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to + reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+
+ + + + Footer + + +``` diff --git a/static/usage/v8/footer/custom-scroll-target/demo.html b/static/usage/v8/footer/custom-scroll-target/demo.html new file mode 100644 index 00000000000..d24453289c9 --- /dev/null +++ b/static/usage/v8/footer/custom-scroll-target/demo.html @@ -0,0 +1,98 @@ + + + + + + Footer + + + + + + + + + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies + on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have + two horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and + have a spotted pattern similar to that of a leopard. Because of the combination of these features, some + people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes + from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, + or suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, + gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout + with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a + flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it + surfaces. +

+
+ + + + Footer + + + + + diff --git a/static/usage/v8/footer/custom-scroll-target/index.md b/static/usage/v8/footer/custom-scroll-target/index.md new file mode 100644 index 00000000000..df2b8f10214 --- /dev/null +++ b/static/usage/v8/footer/custom-scroll-target/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/footer/custom-scroll-target/javascript.md b/static/usage/v8/footer/custom-scroll-target/javascript.md new file mode 100644 index 00000000000..411ccb1df59 --- /dev/null +++ b/static/usage/v8/footer/custom-scroll-target/javascript.md @@ -0,0 +1,81 @@ +```html + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, + while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 + teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to + reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+
+ + + + Footer + + + + +``` diff --git a/static/usage/v8/footer/custom-scroll-target/react/main_css.md b/static/usage/v8/footer/custom-scroll-target/react/main_css.md new file mode 100644 index 00000000000..4db169a0e16 --- /dev/null +++ b/static/usage/v8/footer/custom-scroll-target/react/main_css.md @@ -0,0 +1,11 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v8/footer/custom-scroll-target/react/main_tsx.md b/static/usage/v8/footer/custom-scroll-target/react/main_tsx.md new file mode 100644 index 00000000000..9066d4c4a91 --- /dev/null +++ b/static/usage/v8/footer/custom-scroll-target/react/main_tsx.md @@ -0,0 +1,83 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies + on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have + two horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and + have a spotted pattern similar to that of a leopard. Because of the combination of these features, some + people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes + from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, + or suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, + gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout + with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a + flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it + surfaces. +

+
+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/footer/custom-scroll-target/vue.md b/static/usage/v8/footer/custom-scroll-target/vue.md new file mode 100644 index 00000000000..b85998db4cb --- /dev/null +++ b/static/usage/v8/footer/custom-scroll-target/vue.md @@ -0,0 +1,92 @@ +```html + + + + + +``` diff --git a/static/usage/v8/footer/fade/angular.md b/static/usage/v8/footer/fade/angular.md new file mode 100644 index 00000000000..f600e4511df --- /dev/null +++ b/static/usage/v8/footer/fade/angular.md @@ -0,0 +1,67 @@ +```html + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + +``` diff --git a/static/usage/v8/footer/fade/demo.html b/static/usage/v8/footer/fade/demo.html new file mode 100644 index 00000000000..0609f954711 --- /dev/null +++ b/static/usage/v8/footer/fade/demo.html @@ -0,0 +1,82 @@ + + + + + + Footer + + + + + + + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + + + + diff --git a/static/usage/v8/footer/fade/index.md b/static/usage/v8/footer/fade/index.md new file mode 100644 index 00000000000..47248b6f35f --- /dev/null +++ b/static/usage/v8/footer/fade/index.md @@ -0,0 +1,15 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/footer/fade/javascript.md b/static/usage/v8/footer/fade/javascript.md new file mode 100644 index 00000000000..f600e4511df --- /dev/null +++ b/static/usage/v8/footer/fade/javascript.md @@ -0,0 +1,67 @@ +```html + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + +``` diff --git a/static/usage/v8/footer/fade/react.md b/static/usage/v8/footer/fade/react.md new file mode 100644 index 00000000000..d7142f57ecd --- /dev/null +++ b/static/usage/v8/footer/fade/react.md @@ -0,0 +1,77 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/footer/fade/vue.md b/static/usage/v8/footer/fade/vue.md new file mode 100644 index 00000000000..757e78f59da --- /dev/null +++ b/static/usage/v8/footer/fade/vue.md @@ -0,0 +1,78 @@ +```html + + + +``` diff --git a/static/usage/v8/footer/no-border/angular.md b/static/usage/v8/footer/no-border/angular.md new file mode 100644 index 00000000000..6b31b329d96 --- /dev/null +++ b/static/usage/v8/footer/no-border/angular.md @@ -0,0 +1,10 @@ +```html + +

Content

+ + + + Footer + + +``` diff --git a/static/usage/v8/footer/no-border/demo.html b/static/usage/v8/footer/no-border/demo.html new file mode 100644 index 00000000000..2a8835714cb --- /dev/null +++ b/static/usage/v8/footer/no-border/demo.html @@ -0,0 +1,25 @@ + + + + + + Footer + + + + + + + + + +

Content

+ + + + Footer + + + + + diff --git a/static/usage/v8/footer/no-border/index.md b/static/usage/v8/footer/no-border/index.md new file mode 100644 index 00000000000..61152f09bf8 --- /dev/null +++ b/static/usage/v8/footer/no-border/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/footer/no-border/javascript.md b/static/usage/v8/footer/no-border/javascript.md new file mode 100644 index 00000000000..6b31b329d96 --- /dev/null +++ b/static/usage/v8/footer/no-border/javascript.md @@ -0,0 +1,10 @@ +```html + +

Content

+ + + + Footer + + +``` diff --git a/static/usage/v8/footer/no-border/react.md b/static/usage/v8/footer/no-border/react.md new file mode 100644 index 00000000000..2c58e513063 --- /dev/null +++ b/static/usage/v8/footer/no-border/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + +

Content

+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/footer/no-border/vue.md b/static/usage/v8/footer/no-border/vue.md new file mode 100644 index 00000000000..9a3eccff15a --- /dev/null +++ b/static/usage/v8/footer/no-border/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v8/footer/translucent/angular.md b/static/usage/v8/footer/translucent/angular.md new file mode 100644 index 00000000000..a58f761cc8c --- /dev/null +++ b/static/usage/v8/footer/translucent/angular.md @@ -0,0 +1,67 @@ +```html + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + +``` diff --git a/static/usage/v8/footer/translucent/demo.html b/static/usage/v8/footer/translucent/demo.html new file mode 100644 index 00000000000..880895e7115 --- /dev/null +++ b/static/usage/v8/footer/translucent/demo.html @@ -0,0 +1,82 @@ + + + + + + Footer + + + + + + + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + + + + diff --git a/static/usage/v8/footer/translucent/index.md b/static/usage/v8/footer/translucent/index.md new file mode 100644 index 00000000000..51e731fe97e --- /dev/null +++ b/static/usage/v8/footer/translucent/index.md @@ -0,0 +1,15 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/footer/translucent/javascript.md b/static/usage/v8/footer/translucent/javascript.md new file mode 100644 index 00000000000..bdff28e0dca --- /dev/null +++ b/static/usage/v8/footer/translucent/javascript.md @@ -0,0 +1,67 @@ +```html + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + +``` diff --git a/static/usage/v8/footer/translucent/react.md b/static/usage/v8/footer/translucent/react.md new file mode 100644 index 00000000000..ab7ff2221e0 --- /dev/null +++ b/static/usage/v8/footer/translucent/react.md @@ -0,0 +1,77 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/footer/translucent/vue.md b/static/usage/v8/footer/translucent/vue.md new file mode 100644 index 00000000000..5d5a0e1497f --- /dev/null +++ b/static/usage/v8/footer/translucent/vue.md @@ -0,0 +1,78 @@ +```html + + + +``` diff --git a/static/usage/v8/gestures/basic/angular/example_component_css.md b/static/usage/v8/gestures/basic/angular/example_component_css.md new file mode 100644 index 00000000000..4532a98eac4 --- /dev/null +++ b/static/usage/v8/gestures/basic/angular/example_component_css.md @@ -0,0 +1,14 @@ +```css +ion-card { + position: absolute; + + left: 0; + right: 0; + + user-select: none; +} + +ion-card.active { + box-shadow: var(--ion-color-warning) 0px 4px 16px; +} +``` diff --git a/static/usage/v8/gestures/basic/angular/example_component_html.md b/static/usage/v8/gestures/basic/angular/example_component_html.md new file mode 100644 index 00000000000..e8a575523d6 --- /dev/null +++ b/static/usage/v8/gestures/basic/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + + + Pan the Screen + + +

Gesture information will display after interaction.

+ + +``` diff --git a/static/usage/v8/gestures/basic/angular/example_component_ts.md b/static/usage/v8/gestures/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..33482eca38b --- /dev/null +++ b/static/usage/v8/gestures/basic/angular/example_component_ts.md @@ -0,0 +1,50 @@ +```ts +import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core'; +import type { GestureDetail } from '@ionic/angular'; +import { GestureController, IonCard } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + @ViewChild(IonCard, { read: ElementRef }) card: ElementRef; + @ViewChild('debug', { read: ElementRef }) debug: ElementRef; + + isCardActive = false; + + constructor(private el: ElementRef, private gestureCtrl: GestureController, private cdRef: ChangeDetectorRef) {} + + ngAfterViewInit() { + const gesture = this.gestureCtrl.create({ + el: this.el.nativeElement.closest('ion-content'), + onStart: () => this.onStart(), + onMove: (detail) => this.onMove(detail), + onEnd: () => this.onEnd(), + gestureName: 'example', + }); + + gesture.enable(); + } + + private onStart() { + this.isCardActive = true; + this.cdRef.detectChanges(); + } + + private onMove(detail: GestureDetail) { + const { type, currentX, deltaX, velocityX } = detail; + this.debug.nativeElement.innerHTML = ` +
Type: ${type}
+
Current X: ${currentX}
+
Delta X: ${deltaX}
+
Velocity X: ${velocityX}
`; + } + + private onEnd() { + this.isCardActive = false; + this.cdRef.detectChanges(); + } +} +``` diff --git a/static/usage/v8/gestures/basic/demo.html b/static/usage/v8/gestures/basic/demo.html new file mode 100644 index 00000000000..250c0235801 --- /dev/null +++ b/static/usage/v8/gestures/basic/demo.html @@ -0,0 +1,81 @@ + + + + + + Gesture + + + + + + + + + + +
+ + + + Pan the Screen + + +

Gesture information will display after interaction.

+ + + +
+ + diff --git a/static/usage/v8/gestures/basic/index.md b/static/usage/v8/gestures/basic/index.md new file mode 100644 index 00000000000..835658738d2 --- /dev/null +++ b/static/usage/v8/gestures/basic/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/gestures/basic/javascript.md b/static/usage/v8/gestures/basic/javascript.md new file mode 100644 index 00000000000..71153daeec5 --- /dev/null +++ b/static/usage/v8/gestures/basic/javascript.md @@ -0,0 +1,58 @@ +```html + + + + + Pan the Screen + + +

Gesture information will display after interaction.

+ + + + +``` diff --git a/static/usage/v8/gestures/basic/react/main_css.md b/static/usage/v8/gestures/basic/react/main_css.md new file mode 100644 index 00000000000..4532a98eac4 --- /dev/null +++ b/static/usage/v8/gestures/basic/react/main_css.md @@ -0,0 +1,14 @@ +```css +ion-card { + position: absolute; + + left: 0; + right: 0; + + user-select: none; +} + +ion-card.active { + box-shadow: var(--ion-color-warning) 0px 4px 16px; +} +``` diff --git a/static/usage/v8/gestures/basic/react/main_tsx.md b/static/usage/v8/gestures/basic/react/main_tsx.md new file mode 100644 index 00000000000..2004c3b9066 --- /dev/null +++ b/static/usage/v8/gestures/basic/react/main_tsx.md @@ -0,0 +1,62 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonCard, IonCardHeader, IonCardSubtitle, IonCardContent, createGesture } from '@ionic/react'; +import type { GestureDetail } from '@ionic/react'; + +import './main.css'; + +function Example() { + const card = useRef(null); + const debug = useRef(null); + + useEffect(() => { + if (card.current) { + const target = card.current.closest('ion-content'); + + if (target) { + const gesture = createGesture({ + el: target, + onStart: () => onStart(), + onMove: (detail) => onMove(detail), + onEnd: () => onEnd(), + gestureName: 'example', + }); + + gesture.enable(); + } + } + }, [card]); + + const onStart = () => { + card.current?.classList.add('active'); + }; + + const onMove = (detail: GestureDetail) => { + const { type, currentX, deltaX, velocityX } = detail; + + if (debug.current) { + debug.current.innerHTML = ` +
Type: ${type}
+
Current X: ${currentX}
+
Delta X: ${deltaX}
+
Velocity X: ${velocityX}
`; + } + }; + + const onEnd = () => { + card.current?.classList.remove('active'); + }; + + return ( + + + Pan the Screen + + +

Gesture information will display after interaction.

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/gestures/basic/vue.md b/static/usage/v8/gestures/basic/vue.md new file mode 100644 index 00000000000..2526d8bff15 --- /dev/null +++ b/static/usage/v8/gestures/basic/vue.md @@ -0,0 +1,82 @@ +```html + + + + +``` diff --git a/static/usage/v8/gestures/double-click/angular/example_component_css.md b/static/usage/v8/gestures/double-click/angular/example_component_css.md new file mode 100644 index 00000000000..043d289ab58 --- /dev/null +++ b/static/usage/v8/gestures/double-click/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-card { + transform: translateX(0); + user-select: none; +} +``` diff --git a/static/usage/v8/gestures/double-click/angular/example_component_html.md b/static/usage/v8/gestures/double-click/angular/example_component_html.md new file mode 100644 index 00000000000..b0b24e75d67 --- /dev/null +++ b/static/usage/v8/gestures/double-click/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Double click me to move the card. + +``` diff --git a/static/usage/v8/gestures/double-click/angular/example_component_ts.md b/static/usage/v8/gestures/double-click/angular/example_component_ts.md new file mode 100644 index 00000000000..08159621553 --- /dev/null +++ b/static/usage/v8/gestures/double-click/angular/example_component_ts.md @@ -0,0 +1,51 @@ +```ts +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { GestureController, IonCard } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], +}) +export class ExampleComponent { + @ViewChild('card', { read: ElementRef }) card: ElementRef; + + private currentOffset: number = 0; + private lastOnStart: number = 0; + private DOUBLE_CLICK_THRESHOLD: number = 500; + + constructor(private el: ElementRef, private gestureCtrl: GestureController) {} + + ngAfterViewInit() { + const gesture = this.gestureCtrl.create({ + el: this.card.nativeElement, + threshold: 0, + onStart: () => this.onStart(), + gestureName: 'double-click', + }); + + gesture.enable(); + } + + private onStart() { + const now = Date.now(); + + if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) { + this.card.nativeElement.style.setProperty('transform', this.getNewTransform()); + this.lastOnStart = 0; + } else { + this.lastOnStart = now; + } + } + + private getNewTransform() { + if (this.currentOffset >= 100) { + this.currentOffset = 0; + } else { + this.currentOffset += 20; + } + + return `translateX(${this.currentOffset}px)`; + } +} +``` diff --git a/static/usage/v8/gestures/double-click/demo.html b/static/usage/v8/gestures/double-click/demo.html new file mode 100644 index 00000000000..c293e8183a6 --- /dev/null +++ b/static/usage/v8/gestures/double-click/demo.html @@ -0,0 +1,67 @@ + + + + + + Double-Click Gestures + + + + + + + + + + + + + + Double click me to move the card. + + + + diff --git a/static/usage/v8/gestures/double-click/index.md b/static/usage/v8/gestures/double-click/index.md new file mode 100644 index 00000000000..47c4c9ad045 --- /dev/null +++ b/static/usage/v8/gestures/double-click/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/gestures/double-click/javascript.md b/static/usage/v8/gestures/double-click/javascript.md new file mode 100644 index 00000000000..a45b7255bbe --- /dev/null +++ b/static/usage/v8/gestures/double-click/javascript.md @@ -0,0 +1,49 @@ +```html + + Double click me to move the card. + + + + + +``` diff --git a/static/usage/v8/gestures/double-click/react/main_css.md b/static/usage/v8/gestures/double-click/react/main_css.md new file mode 100644 index 00000000000..043d289ab58 --- /dev/null +++ b/static/usage/v8/gestures/double-click/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-card { + transform: translateX(0); + user-select: none; +} +``` diff --git a/static/usage/v8/gestures/double-click/react/main_tsx.md b/static/usage/v8/gestures/double-click/react/main_tsx.md new file mode 100644 index 00000000000..4e9e90cf243 --- /dev/null +++ b/static/usage/v8/gestures/double-click/react/main_tsx.md @@ -0,0 +1,57 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonCard, IonCardContent, createGesture } from '@ionic/react'; + +import './main.css'; + +function Example() { + const DOUBLE_CLICK_THRESHOLD = 500; + const card = useRef(null); + + let lastOnStart = 0; + let currentOffset = 0; + + const getNewTransform = () => { + if (currentOffset >= 100) { + currentOffset = 0; + } else { + currentOffset += 20; + } + + return `translateX(${currentOffset}px)`; + }; + + const onStart = () => { + const now = Date.now(); + + if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) { + if (card.current) { + card.current.style.setProperty('transform', getNewTransform()); + lastOnStart = 0; + } + } else { + lastOnStart = now; + } + }; + + useEffect(() => { + if (card.current) { + const gesture = createGesture({ + el: card.current, + threshold: 0, + onStart, + gestureName: 'double-click', + }); + + gesture.enable(); + } + }); + + return ( + + Double click me to move the card. + + ); +} +export default Example; +``` diff --git a/static/usage/v8/gestures/double-click/vue.md b/static/usage/v8/gestures/double-click/vue.md new file mode 100644 index 00000000000..aebfad5a830 --- /dev/null +++ b/static/usage/v8/gestures/double-click/vue.md @@ -0,0 +1,69 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/basic/angular/example_component_css.md b/static/usage/v8/grid/basic/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/basic/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/basic/angular/example_component_html.md b/static/usage/v8/grid/basic/angular/example_component_html.md new file mode 100644 index 00000000000..daa37c1e31f --- /dev/null +++ b/static/usage/v8/grid/basic/angular/example_component_html.md @@ -0,0 +1,37 @@ +```html + + + 1 + 2 + 3 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + + +``` diff --git a/static/usage/v8/grid/basic/demo.html b/static/usage/v8/grid/basic/demo.html new file mode 100644 index 00000000000..981265cd17e --- /dev/null +++ b/static/usage/v8/grid/basic/demo.html @@ -0,0 +1,75 @@ + + + + + + Grid + + + + + + + + + + + +
+ + + 1 + 2 + 3 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + + +
+ + + + diff --git a/static/usage/v8/grid/basic/index.md b/static/usage/v8/grid/basic/index.md new file mode 100644 index 00000000000..6945d9ba91b --- /dev/null +++ b/static/usage/v8/grid/basic/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/basic/javascript.md b/static/usage/v8/grid/basic/javascript.md new file mode 100644 index 00000000000..53e0dd4f8c9 --- /dev/null +++ b/static/usage/v8/grid/basic/javascript.md @@ -0,0 +1,46 @@ +```html + + + 1 + 2 + 3 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + + + + +``` diff --git a/static/usage/v8/grid/basic/react/main_css.md b/static/usage/v8/grid/basic/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/basic/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/basic/react/main_tsx.md b/static/usage/v8/grid/basic/react/main_tsx.md new file mode 100644 index 00000000000..9fb9652e4ce --- /dev/null +++ b/static/usage/v8/grid/basic/react/main_tsx.md @@ -0,0 +1,49 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + 1 + 2 + 3 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/basic/vue.md b/static/usage/v8/grid/basic/vue.md new file mode 100644 index 00000000000..d693fc8510d --- /dev/null +++ b/static/usage/v8/grid/basic/vue.md @@ -0,0 +1,57 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/customizing/column-number/angular/example_component_css.md b/static/usage/v8/grid/customizing/column-number/angular/example_component_css.md new file mode 100644 index 00000000000..ceadac1c05c --- /dev/null +++ b/static/usage/v8/grid/customizing/column-number/angular/example_component_css.md @@ -0,0 +1,12 @@ +```css +ion-grid { + --ion-grid-columns: 6; +} + +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/customizing/column-number/angular/example_component_html.md b/static/usage/v8/grid/customizing/column-number/angular/example_component_html.md new file mode 100644 index 00000000000..6e9b744b161 --- /dev/null +++ b/static/usage/v8/grid/customizing/column-number/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html +Total number of columns is set to 6, column size is set to 1 + + + 1 + 2 + 3 + 4 + + +``` diff --git a/static/usage/v8/grid/customizing/column-number/demo.html b/static/usage/v8/grid/customizing/column-number/demo.html new file mode 100644 index 00000000000..fb28de35d4e --- /dev/null +++ b/static/usage/v8/grid/customizing/column-number/demo.html @@ -0,0 +1,51 @@ + + + + + + Grid + + + + + + + + + + + +
+ Total number of columns is set to 6, column size is set to 1 + + + 1 + 2 + 3 + 4 + + +
+ + + + diff --git a/static/usage/v8/grid/customizing/column-number/index.md b/static/usage/v8/grid/customizing/column-number/index.md new file mode 100644 index 00000000000..eed737ae21f --- /dev/null +++ b/static/usage/v8/grid/customizing/column-number/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/customizing/column-number/javascript.md b/static/usage/v8/grid/customizing/column-number/javascript.md new file mode 100644 index 00000000000..5c4c6edf166 --- /dev/null +++ b/static/usage/v8/grid/customizing/column-number/javascript.md @@ -0,0 +1,24 @@ +```html +Total number of columns is set to 6, column size is set to 1 + + + 1 + 2 + 3 + 4 + + + + +``` diff --git a/static/usage/v8/grid/customizing/column-number/react/main_css.md b/static/usage/v8/grid/customizing/column-number/react/main_css.md new file mode 100644 index 00000000000..ceadac1c05c --- /dev/null +++ b/static/usage/v8/grid/customizing/column-number/react/main_css.md @@ -0,0 +1,12 @@ +```css +ion-grid { + --ion-grid-columns: 6; +} + +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/customizing/column-number/react/main_tsx.md b/static/usage/v8/grid/customizing/column-number/react/main_tsx.md new file mode 100644 index 00000000000..23f618b020a --- /dev/null +++ b/static/usage/v8/grid/customizing/column-number/react/main_tsx.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Total number of columns is set to 6, column size is set to 1 + + + + 1 + 2 + 3 + 4 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/customizing/column-number/vue.md b/static/usage/v8/grid/customizing/column-number/vue.md new file mode 100644 index 00000000000..1af3143593f --- /dev/null +++ b/static/usage/v8/grid/customizing/column-number/vue.md @@ -0,0 +1,35 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/customizing/padding/angular/example_component_css.md b/static/usage/v8/grid/customizing/padding/angular/example_component_css.md new file mode 100644 index 00000000000..c7d165d3b75 --- /dev/null +++ b/static/usage/v8/grid/customizing/padding/angular/example_component_css.md @@ -0,0 +1,26 @@ +```css +ion-grid { + --ion-grid-padding: 20px; + + --ion-grid-padding-xs: 20px; + --ion-grid-padding-sm: 20px; + --ion-grid-padding-md: 20px; + --ion-grid-padding-lg: 20px; + --ion-grid-padding-xl: 20px; + + --ion-grid-column-padding: 30px; + + --ion-grid-column-padding-xs: 30px; + --ion-grid-column-padding-sm: 30px; + --ion-grid-column-padding-md: 30px; + --ion-grid-column-padding-lg: 30px; + --ion-grid-column-padding-xl: 30px; +} + +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/customizing/padding/angular/example_component_html.md b/static/usage/v8/grid/customizing/padding/angular/example_component_html.md new file mode 100644 index 00000000000..74811052b30 --- /dev/null +++ b/static/usage/v8/grid/customizing/padding/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + + 1 + 2 + 3 + + +``` diff --git a/static/usage/v8/grid/customizing/padding/demo.html b/static/usage/v8/grid/customizing/padding/demo.html new file mode 100644 index 00000000000..43fb4ffbf0f --- /dev/null +++ b/static/usage/v8/grid/customizing/padding/demo.html @@ -0,0 +1,63 @@ + + + + + + Grid + + + + + + + + + + + +
+ + + 1 + 2 + 3 + + +
+ + + + diff --git a/static/usage/v8/grid/customizing/padding/index.md b/static/usage/v8/grid/customizing/padding/index.md new file mode 100644 index 00000000000..ea5280cc8f1 --- /dev/null +++ b/static/usage/v8/grid/customizing/padding/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/customizing/padding/javascript.md b/static/usage/v8/grid/customizing/padding/javascript.md new file mode 100644 index 00000000000..fea0d256a72 --- /dev/null +++ b/static/usage/v8/grid/customizing/padding/javascript.md @@ -0,0 +1,36 @@ +```html + + + 1 + 2 + 3 + + + + +``` diff --git a/static/usage/v8/grid/customizing/padding/react/main_css.md b/static/usage/v8/grid/customizing/padding/react/main_css.md new file mode 100644 index 00000000000..c7d165d3b75 --- /dev/null +++ b/static/usage/v8/grid/customizing/padding/react/main_css.md @@ -0,0 +1,26 @@ +```css +ion-grid { + --ion-grid-padding: 20px; + + --ion-grid-padding-xs: 20px; + --ion-grid-padding-sm: 20px; + --ion-grid-padding-md: 20px; + --ion-grid-padding-lg: 20px; + --ion-grid-padding-xl: 20px; + + --ion-grid-column-padding: 30px; + + --ion-grid-column-padding-xs: 30px; + --ion-grid-column-padding-sm: 30px; + --ion-grid-column-padding-md: 30px; + --ion-grid-column-padding-lg: 30px; + --ion-grid-column-padding-xl: 30px; +} + +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/customizing/padding/react/main_tsx.md b/static/usage/v8/grid/customizing/padding/react/main_tsx.md new file mode 100644 index 00000000000..4faf0a3cac1 --- /dev/null +++ b/static/usage/v8/grid/customizing/padding/react/main_tsx.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + 1 + 2 + 3 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/customizing/padding/vue.md b/static/usage/v8/grid/customizing/padding/vue.md new file mode 100644 index 00000000000..343511e231d --- /dev/null +++ b/static/usage/v8/grid/customizing/padding/vue.md @@ -0,0 +1,47 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/customizing/width/angular/example_component_css.md b/static/usage/v8/grid/customizing/width/angular/example_component_css.md new file mode 100644 index 00000000000..bbb8f04519a --- /dev/null +++ b/static/usage/v8/grid/customizing/width/angular/example_component_css.md @@ -0,0 +1,18 @@ +```css +ion-grid { + --ion-grid-width: 50%; + + --ion-grid-width-xs: 50%; + --ion-grid-width-sm: 288px; + --ion-grid-width-md: 384px; + --ion-grid-width-lg: 480px; + --ion-grid-width-xl: 570px; +} + +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/customizing/width/angular/example_component_html.md b/static/usage/v8/grid/customizing/width/angular/example_component_html.md new file mode 100644 index 00000000000..0688212c247 --- /dev/null +++ b/static/usage/v8/grid/customizing/width/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + + 1 + 2 + 3 + + +``` diff --git a/static/usage/v8/grid/customizing/width/demo.html b/static/usage/v8/grid/customizing/width/demo.html new file mode 100644 index 00000000000..a61fc631953 --- /dev/null +++ b/static/usage/v8/grid/customizing/width/demo.html @@ -0,0 +1,54 @@ + + + + + + Grid + + + + + + + + + + + +
+ + + 1 + 2 + 3 + + +
+ + + + diff --git a/static/usage/v8/grid/customizing/width/index.md b/static/usage/v8/grid/customizing/width/index.md new file mode 100644 index 00000000000..99ea8710f85 --- /dev/null +++ b/static/usage/v8/grid/customizing/width/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/customizing/width/javascript.md b/static/usage/v8/grid/customizing/width/javascript.md new file mode 100644 index 00000000000..2ff36295b70 --- /dev/null +++ b/static/usage/v8/grid/customizing/width/javascript.md @@ -0,0 +1,28 @@ +```html + + + 1 + 2 + 3 + + + + +``` diff --git a/static/usage/v8/grid/customizing/width/react/main_css.md b/static/usage/v8/grid/customizing/width/react/main_css.md new file mode 100644 index 00000000000..bbb8f04519a --- /dev/null +++ b/static/usage/v8/grid/customizing/width/react/main_css.md @@ -0,0 +1,18 @@ +```css +ion-grid { + --ion-grid-width: 50%; + + --ion-grid-width-xs: 50%; + --ion-grid-width-sm: 288px; + --ion-grid-width-md: 384px; + --ion-grid-width-lg: 480px; + --ion-grid-width-xl: 570px; +} + +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/customizing/width/react/main_tsx.md b/static/usage/v8/grid/customizing/width/react/main_tsx.md new file mode 100644 index 00000000000..73ccebd0606 --- /dev/null +++ b/static/usage/v8/grid/customizing/width/react/main_tsx.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + 1 + 2 + 3 + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/customizing/width/vue.md b/static/usage/v8/grid/customizing/width/vue.md new file mode 100644 index 00000000000..40b0002e822 --- /dev/null +++ b/static/usage/v8/grid/customizing/width/vue.md @@ -0,0 +1,39 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/fixed/angular/example_component_css.md b/static/usage/v8/grid/fixed/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/fixed/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/fixed/angular/example_component_html.md b/static/usage/v8/grid/fixed/angular/example_component_html.md new file mode 100644 index 00000000000..0688212c247 --- /dev/null +++ b/static/usage/v8/grid/fixed/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + + 1 + 2 + 3 + + +``` diff --git a/static/usage/v8/grid/fixed/demo.html b/static/usage/v8/grid/fixed/demo.html new file mode 100644 index 00000000000..a17d5f27654 --- /dev/null +++ b/static/usage/v8/grid/fixed/demo.html @@ -0,0 +1,46 @@ + + + + + + Grid + + + + + + + + + + + +
+ + + 1 + 2 + 3 + + +
+ + + + diff --git a/static/usage/v8/grid/fixed/index.md b/static/usage/v8/grid/fixed/index.md new file mode 100644 index 00000000000..bede2ed6bc7 --- /dev/null +++ b/static/usage/v8/grid/fixed/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/fixed/javascript.md b/static/usage/v8/grid/fixed/javascript.md new file mode 100644 index 00000000000..5fa9672a8ab --- /dev/null +++ b/static/usage/v8/grid/fixed/javascript.md @@ -0,0 +1,18 @@ +```html + + + 1 + 2 + 3 + + + + +``` diff --git a/static/usage/v8/grid/fixed/react/main_css.md b/static/usage/v8/grid/fixed/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/fixed/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/fixed/react/main_tsx.md b/static/usage/v8/grid/fixed/react/main_tsx.md new file mode 100644 index 00000000000..73ccebd0606 --- /dev/null +++ b/static/usage/v8/grid/fixed/react/main_tsx.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + 1 + 2 + 3 + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/fixed/vue.md b/static/usage/v8/grid/fixed/vue.md new file mode 100644 index 00000000000..fbaa7118bbd --- /dev/null +++ b/static/usage/v8/grid/fixed/vue.md @@ -0,0 +1,29 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/horizontal-alignment/angular/example_component_css.md b/static/usage/v8/grid/horizontal-alignment/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/horizontal-alignment/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/horizontal-alignment/angular/example_component_html.md b/static/usage/v8/grid/horizontal-alignment/angular/example_component_html.md new file mode 100644 index 00000000000..1f7300dba04 --- /dev/null +++ b/static/usage/v8/grid/horizontal-alignment/angular/example_component_html.md @@ -0,0 +1,41 @@ +```html +Columns aligned at the start + + + 1 + 2 + + + +Columns aligned at the center + + + 1 + 2 + + + +Columns aligned at the end + + + 1 + 2 + + + +Columns aligned with space around + + + 1 + 2 + + + +Columns aligned with space between + + + 1 + 2 + + +``` diff --git a/static/usage/v8/grid/horizontal-alignment/demo.html b/static/usage/v8/grid/horizontal-alignment/demo.html new file mode 100644 index 00000000000..db1314706bb --- /dev/null +++ b/static/usage/v8/grid/horizontal-alignment/demo.html @@ -0,0 +1,79 @@ + + + + + + Grid + + + + + + + + + + + +
+ Columns aligned at the start + + + 1 + 2 + + + + Columns aligned at the center + + + 1 + 2 + + + + Columns aligned at the end + + + 1 + 2 + + + + Columns aligned with space around + + + 1 + 2 + + + + Columns aligned with space between + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v8/grid/horizontal-alignment/index.md b/static/usage/v8/grid/horizontal-alignment/index.md new file mode 100644 index 00000000000..aa44db5ad2d --- /dev/null +++ b/static/usage/v8/grid/horizontal-alignment/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/horizontal-alignment/javascript.md b/static/usage/v8/grid/horizontal-alignment/javascript.md new file mode 100644 index 00000000000..13c25523a4c --- /dev/null +++ b/static/usage/v8/grid/horizontal-alignment/javascript.md @@ -0,0 +1,50 @@ +```html +Columns aligned at the start + + + 1 + 2 + + + +Columns aligned at the center + + + 1 + 2 + + + +Columns aligned at the end + + + 1 + 2 + + + +Columns aligned with space around + + + 1 + 2 + + + +Columns aligned with space between + + + 1 + 2 + + + + +``` diff --git a/static/usage/v8/grid/horizontal-alignment/react/main_css.md b/static/usage/v8/grid/horizontal-alignment/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/horizontal-alignment/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/horizontal-alignment/react/main_tsx.md b/static/usage/v8/grid/horizontal-alignment/react/main_tsx.md new file mode 100644 index 00000000000..0ec66ddb95a --- /dev/null +++ b/static/usage/v8/grid/horizontal-alignment/react/main_tsx.md @@ -0,0 +1,53 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Columns aligned at the start + + + 1 + 2 + + + + Columns aligned at the center + + + 1 + 2 + + + + Columns aligned at the end + + + 1 + 2 + + + + Columns aligned with space around + + + 1 + 2 + + + + Columns aligned with space between + + + 1 + 2 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/horizontal-alignment/vue.md b/static/usage/v8/grid/horizontal-alignment/vue.md new file mode 100644 index 00000000000..689efada3ea --- /dev/null +++ b/static/usage/v8/grid/horizontal-alignment/vue.md @@ -0,0 +1,61 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/offset-responsive/angular/example_component_css.md b/static/usage/v8/grid/offset-responsive/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/offset-responsive/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/offset-responsive/angular/example_component_html.md b/static/usage/v8/grid/offset-responsive/angular/example_component_html.md new file mode 100644 index 00000000000..09088adcd03 --- /dev/null +++ b/static/usage/v8/grid/offset-responsive/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html +No offset for xs breakpoint, offset 1st column for sm and up + + + 1 + 2 + 3 + 4 + 5 + + + +No offset for xs breakpoint, offset last 3 columns for md and up + + + 1 + 2 + 3 + 4 + + + +Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up + + + 1 + 2 + + +``` diff --git a/static/usage/v8/grid/offset-responsive/demo.html b/static/usage/v8/grid/offset-responsive/demo.html new file mode 100644 index 00000000000..df9051c60c2 --- /dev/null +++ b/static/usage/v8/grid/offset-responsive/demo.html @@ -0,0 +1,68 @@ + + + + + + Grid + + + + + + + + + + + +
+ No offset for xs breakpoint, offset 1st column for sm and up + + + 1 + 2 + 3 + 4 + 5 + + + + No offset for xs breakpoint, offset last 3 columns for md and up + + + 1 + 2 + 3 + 4 + + + + Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v8/grid/offset-responsive/index.md b/static/usage/v8/grid/offset-responsive/index.md new file mode 100644 index 00000000000..8ed07e871b5 --- /dev/null +++ b/static/usage/v8/grid/offset-responsive/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/offset-responsive/javascript.md b/static/usage/v8/grid/offset-responsive/javascript.md new file mode 100644 index 00000000000..f380aa503c0 --- /dev/null +++ b/static/usage/v8/grid/offset-responsive/javascript.md @@ -0,0 +1,39 @@ +```html +No offset for xs breakpoint, offset 1st column for sm and up + + + 1 + 2 + 3 + 4 + 5 + + + +No offset for xs breakpoint, offset last 3 columns for md and up + + + 1 + 2 + 3 + 4 + + + +Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up + + + 1 + 2 + + + + +``` diff --git a/static/usage/v8/grid/offset-responsive/react/main_css.md b/static/usage/v8/grid/offset-responsive/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/offset-responsive/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/offset-responsive/react/main_tsx.md b/static/usage/v8/grid/offset-responsive/react/main_tsx.md new file mode 100644 index 00000000000..8721fbfc523 --- /dev/null +++ b/static/usage/v8/grid/offset-responsive/react/main_tsx.md @@ -0,0 +1,46 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + No offset for xs breakpoint, offset 1st column for sm and up + + + 1 + 2 + 3 + 4 + 5 + + + + No offset for xs breakpoint, offset last 3 columns for md and up + + + 1 + 2 + 3 + 4 + + + + Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up + + + + 1 + + + 2 + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/offset-responsive/vue.md b/static/usage/v8/grid/offset-responsive/vue.md new file mode 100644 index 00000000000..ca540bee471 --- /dev/null +++ b/static/usage/v8/grid/offset-responsive/vue.md @@ -0,0 +1,50 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/offset/angular/example_component_css.md b/static/usage/v8/grid/offset/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/offset/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/offset/angular/example_component_html.md b/static/usage/v8/grid/offset/angular/example_component_html.md new file mode 100644 index 00000000000..66e044507a8 --- /dev/null +++ b/static/usage/v8/grid/offset/angular/example_component_html.md @@ -0,0 +1,29 @@ +```html +Column 2 has offset set to "3" + + + 1 + 2 + 3 + + + +Column 5 has offset set to "2" + + + 1 + 2 + 3 + 4 + 5 + + + +Column 1 has offset set to "4" + + + 1 + 2 + + +``` diff --git a/static/usage/v8/grid/offset/demo.html b/static/usage/v8/grid/offset/demo.html new file mode 100644 index 00000000000..fb2274aec26 --- /dev/null +++ b/static/usage/v8/grid/offset/demo.html @@ -0,0 +1,67 @@ + + + + + + Grid + + + + + + + + + + + +
+ Column 2 has offset set to "3" + + + 1 + 2 + 3 + + + + Column 5 has offset set to "2" + + + 1 + 2 + 3 + 4 + 5 + + + + Column 1 has offset set to "4" + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v8/grid/offset/index.md b/static/usage/v8/grid/offset/index.md new file mode 100644 index 00000000000..27a55412d53 --- /dev/null +++ b/static/usage/v8/grid/offset/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/offset/javascript.md b/static/usage/v8/grid/offset/javascript.md new file mode 100644 index 00000000000..dcb717dd8d2 --- /dev/null +++ b/static/usage/v8/grid/offset/javascript.md @@ -0,0 +1,38 @@ +```html +Column 2 has offset set to "3" + + + 1 + 2 + 3 + + + +Column 5 has offset set to "2" + + + 1 + 2 + 3 + 4 + 5 + + + +Column 1 has offset set to "4" + + + 1 + 2 + + + + +``` diff --git a/static/usage/v8/grid/offset/react/main_css.md b/static/usage/v8/grid/offset/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/offset/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/offset/react/main_tsx.md b/static/usage/v8/grid/offset/react/main_tsx.md new file mode 100644 index 00000000000..e24f5a47918 --- /dev/null +++ b/static/usage/v8/grid/offset/react/main_tsx.md @@ -0,0 +1,49 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Column 2 has offset set to "3" + + + + 1 + 2 + 3 + + + + + Column 5 has offset set to "2" + + + + 1 + 2 + 3 + 4 + 5 + + + + + Column 1 has offset set to "4" + + + + + 1 + + 2 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/offset/vue.md b/static/usage/v8/grid/offset/vue.md new file mode 100644 index 00000000000..1a69ea6e061 --- /dev/null +++ b/static/usage/v8/grid/offset/vue.md @@ -0,0 +1,49 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/push-pull-responsive/angular/example_component_css.md b/static/usage/v8/grid/push-pull-responsive/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/push-pull-responsive/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/push-pull-responsive/angular/example_component_html.md b/static/usage/v8/grid/push-pull-responsive/angular/example_component_html.md new file mode 100644 index 00000000000..4e67838643e --- /dev/null +++ b/static/usage/v8/grid/push-pull-responsive/angular/example_component_html.md @@ -0,0 +1,31 @@ +```html +No change for xs breakpoint, push 1st column & pull 2nd column for sm and up + + + 1 + 2 + + + +No change for xs breakpoint, push middle columns & pull last column for md and up + + + 1 + 2 + 3 + 4 + + + +Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up + + + 1 + 2 + 3 + 4 + 5 + 6 + + +``` diff --git a/static/usage/v8/grid/push-pull-responsive/demo.html b/static/usage/v8/grid/push-pull-responsive/demo.html new file mode 100644 index 00000000000..a5ce9d24ee8 --- /dev/null +++ b/static/usage/v8/grid/push-pull-responsive/demo.html @@ -0,0 +1,69 @@ + + + + + + Grid + + + + + + + + + + + +
+ No change for xs breakpoint, push 1st column & pull 2nd column for sm and up + + + 1 + 2 + + + + No change for xs breakpoint, push middle columns & pull last column for md and up + + + 1 + 2 + 3 + 4 + + + + Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up + + + 1 + 2 + 3 + 4 + 5 + 6 + + +
+ + + + diff --git a/static/usage/v8/grid/push-pull-responsive/index.md b/static/usage/v8/grid/push-pull-responsive/index.md new file mode 100644 index 00000000000..cd608eaae70 --- /dev/null +++ b/static/usage/v8/grid/push-pull-responsive/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/push-pull-responsive/javascript.md b/static/usage/v8/grid/push-pull-responsive/javascript.md new file mode 100644 index 00000000000..05c03f1def8 --- /dev/null +++ b/static/usage/v8/grid/push-pull-responsive/javascript.md @@ -0,0 +1,40 @@ +```html +No change for xs breakpoint, push 1st column & pull 2nd column for sm and up + + + 1 + 2 + + + +No change for xs breakpoint, push middle columns & pull last column for md and up + + + 1 + 2 + 3 + 4 + + + +Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + +``` diff --git a/static/usage/v8/grid/push-pull-responsive/react/main_css.md b/static/usage/v8/grid/push-pull-responsive/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/push-pull-responsive/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/push-pull-responsive/react/main_tsx.md b/static/usage/v8/grid/push-pull-responsive/react/main_tsx.md new file mode 100644 index 00000000000..85955f3ebd2 --- /dev/null +++ b/static/usage/v8/grid/push-pull-responsive/react/main_tsx.md @@ -0,0 +1,55 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + No change for xs breakpoint, push 1st column & pull 2nd column for sm and up + + + 1 + 2 + + + + No change for xs breakpoint, push middle columns & pull last column for md and up + + + 1 + 2 + 3 + 4 + + + + Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up + + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/push-pull-responsive/vue.md b/static/usage/v8/grid/push-pull-responsive/vue.md new file mode 100644 index 00000000000..82015e52758 --- /dev/null +++ b/static/usage/v8/grid/push-pull-responsive/vue.md @@ -0,0 +1,51 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/push-pull/angular/example_component_css.md b/static/usage/v8/grid/push-pull/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/push-pull/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/push-pull/angular/example_component_html.md b/static/usage/v8/grid/push-pull/angular/example_component_html.md new file mode 100644 index 00000000000..a93c12fef81 --- /dev/null +++ b/static/usage/v8/grid/push-pull/angular/example_component_html.md @@ -0,0 +1,33 @@ +```html +Column 1 has push set to "4" and column 2 has pull set to "4" + + + 1 + 2 + 3 + + + +Column 2 has push set to "4" and column 3 & 4 have pull set to + "2" + + + 1 + 2 + 3 + 4 + 5 + 6 + + + +Column 1 has push set to "3" and column 2 has pull set to "9" + + + 1 + 2 + + +``` diff --git a/static/usage/v8/grid/push-pull/demo.html b/static/usage/v8/grid/push-pull/demo.html new file mode 100644 index 00000000000..2a462a5e7c0 --- /dev/null +++ b/static/usage/v8/grid/push-pull/demo.html @@ -0,0 +1,77 @@ + + + + + + Grid + + + + + + + + + + + +
+ Column 1 has push set to "4" and column 2 has pull set to + "4" + + + 1 + 2 + 3 + + + + Column 2 has push set to "4" and column 3 & 4 have pull set to + "2" + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + Column 1 has push set to "3" and column 2 has pull set to + "9" + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v8/grid/push-pull/index.md b/static/usage/v8/grid/push-pull/index.md new file mode 100644 index 00000000000..a723dfd08f1 --- /dev/null +++ b/static/usage/v8/grid/push-pull/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/push-pull/javascript.md b/static/usage/v8/grid/push-pull/javascript.md new file mode 100644 index 00000000000..b911da1791b --- /dev/null +++ b/static/usage/v8/grid/push-pull/javascript.md @@ -0,0 +1,42 @@ +```html +Column 1 has push set to "4" and column 2 has pull set to "4" + + + 1 + 2 + 3 + + + +Column 2 has push set to "4" and column 3 & 4 have pull set to + "2" + + + 1 + 2 + 3 + 4 + 5 + 6 + + + +Column 1 has push set to "3" and column 2 has pull set to "9" + + + 1 + 2 + + + + +``` diff --git a/static/usage/v8/grid/push-pull/react/main_css.md b/static/usage/v8/grid/push-pull/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/push-pull/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/push-pull/react/main_tsx.md b/static/usage/v8/grid/push-pull/react/main_tsx.md new file mode 100644 index 00000000000..aa7c1d1c809 --- /dev/null +++ b/static/usage/v8/grid/push-pull/react/main_tsx.md @@ -0,0 +1,55 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Column 1 has push set to "4" and column 2 has pull set to{' '} + "4" + + + + 1 + 2 + 3 + + + + + Column 2 has push set to "4" and column 3 & 4 have pull set to{' '} + "2" + + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + Column 1 has push set to "3" and column 2 has pull set to{' '} + "9" + + + + + 1 + + + 2 + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/push-pull/vue.md b/static/usage/v8/grid/push-pull/vue.md new file mode 100644 index 00000000000..b5146e95e0e --- /dev/null +++ b/static/usage/v8/grid/push-pull/vue.md @@ -0,0 +1,59 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/size-auto/angular/example_component_css.md b/static/usage/v8/grid/size-auto/angular/example_component_css.md new file mode 100644 index 00000000000..be364843a89 --- /dev/null +++ b/static/usage/v8/grid/size-auto/angular/example_component_css.md @@ -0,0 +1,12 @@ +```css +ion-col { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + + background-color: #135d54; + border: solid 1px #fff; + color: #fff; +} +``` diff --git a/static/usage/v8/grid/size-auto/angular/example_component_html.md b/static/usage/v8/grid/size-auto/angular/example_component_html.md new file mode 100644 index 00000000000..fc4515ea984 --- /dev/null +++ b/static/usage/v8/grid/size-auto/angular/example_component_html.md @@ -0,0 +1,34 @@ +```html +Column 1 has size set to "auto" + + + 1 + 2 + 3 + + + +Column 3 contains an input and has size set to "auto" + + + 1 + 2 + + + + 4 + 5 + 6 + + + +Column 2 has size set to "auto" and a defined width + + + 1 + +
2
+ + + +``` diff --git a/static/usage/v8/grid/size-auto/demo.html b/static/usage/v8/grid/size-auto/demo.html new file mode 100644 index 00000000000..973bd21b8a4 --- /dev/null +++ b/static/usage/v8/grid/size-auto/demo.html @@ -0,0 +1,76 @@ + + + + + + Grid + + + + + + + + + + + +
+ Column 1 has size set to "auto" + + + 1 + 2 + 3 + + + + Column 3 contains an input and has size set to "auto" + + + 1 + 2 + + + + 4 + 5 + 6 + + + + Column 2 has size set to "auto" and a defined width + + + 1 + +
2
+ + + +
+ + + + diff --git a/static/usage/v8/grid/size-auto/index.md b/static/usage/v8/grid/size-auto/index.md new file mode 100644 index 00000000000..2da3611d3be --- /dev/null +++ b/static/usage/v8/grid/size-auto/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/size-auto/javascript.md b/static/usage/v8/grid/size-auto/javascript.md new file mode 100644 index 00000000000..7f6619df1f5 --- /dev/null +++ b/static/usage/v8/grid/size-auto/javascript.md @@ -0,0 +1,47 @@ +```html +Column 1 has size set to "auto" + + + 1 + 2 + 3 + + + +Column 3 contains an input and has size set to "auto" + + + 1 + 2 + + + + 4 + 5 + 6 + + + +Column 2 has size set to "auto" and a defined width + + + 1 + +
2
+ + + + + +``` diff --git a/static/usage/v8/grid/size-auto/react/main_css.md b/static/usage/v8/grid/size-auto/react/main_css.md new file mode 100644 index 00000000000..be364843a89 --- /dev/null +++ b/static/usage/v8/grid/size-auto/react/main_css.md @@ -0,0 +1,12 @@ +```css +ion-col { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + + background-color: #135d54; + border: solid 1px #fff; + color: #fff; +} +``` diff --git a/static/usage/v8/grid/size-auto/react/main_tsx.md b/static/usage/v8/grid/size-auto/react/main_tsx.md new file mode 100644 index 00000000000..64276d4cacd --- /dev/null +++ b/static/usage/v8/grid/size-auto/react/main_tsx.md @@ -0,0 +1,52 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Column 1 has size set to "auto" + + + + 1 + 2 + 3 + + + + + Column 3 contains an input and has size set to "auto" + + + + 1 + 2 + + + + 4 + 5 + 6 + + + + + Column 2 has size set to "auto" and a defined width + + + + 1 + +
2
+ + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/size-auto/vue.md b/static/usage/v8/grid/size-auto/vue.md new file mode 100644 index 00000000000..f410272730d --- /dev/null +++ b/static/usage/v8/grid/size-auto/vue.md @@ -0,0 +1,58 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/size-responsive/angular/example_component_css.md b/static/usage/v8/grid/size-responsive/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/size-responsive/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/size-responsive/angular/example_component_html.md b/static/usage/v8/grid/size-responsive/angular/example_component_html.md new file mode 100644 index 00000000000..62f96cb5800 --- /dev/null +++ b/static/usage/v8/grid/size-responsive/angular/example_component_html.md @@ -0,0 +1,32 @@ +```html +Stacked for xs breakpoint, equal width for sm and up + + + 1 + 2 + 3 + 4 + + + +Equal width until md breakpoint, last column takes full width for md and up + + + 1 + 2 + 3 + + + +2 per row until md breakpoint, 3 per row for md, equal width for lg and up + + + 1 + 2 + 3 + 4 + 5 + 6 + + +``` diff --git a/static/usage/v8/grid/size-responsive/demo.html b/static/usage/v8/grid/size-responsive/demo.html new file mode 100644 index 00000000000..3618fdc86d1 --- /dev/null +++ b/static/usage/v8/grid/size-responsive/demo.html @@ -0,0 +1,70 @@ + + + + + + Grid + + + + + + + + + + + +
+ Stacked for xs breakpoint, equal width for sm and up + + + 1 + 2 + 3 + 4 + + + + Equal width until md breakpoint, last column takes full width for md and up + + + 1 + 2 + 3 + + + + 2 per row until md breakpoint, 3 per row for md, equal width for lg and up + + + 1 + 2 + 3 + 4 + 5 + 6 + + +
+ + + + diff --git a/static/usage/v8/grid/size-responsive/index.md b/static/usage/v8/grid/size-responsive/index.md new file mode 100644 index 00000000000..3c46f6ab5de --- /dev/null +++ b/static/usage/v8/grid/size-responsive/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/size-responsive/javascript.md b/static/usage/v8/grid/size-responsive/javascript.md new file mode 100644 index 00000000000..1b10d349bf4 --- /dev/null +++ b/static/usage/v8/grid/size-responsive/javascript.md @@ -0,0 +1,41 @@ +```html +Stacked for xs breakpoint, equal width for sm and up + + + 1 + 2 + 3 + 4 + + + +Equal width until md breakpoint, last column takes full width for md and up + + + 1 + 2 + 3 + + + +2 per row until md breakpoint, 3 per row for md, equal width for lg and up + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + +``` diff --git a/static/usage/v8/grid/size-responsive/react/main_css.md b/static/usage/v8/grid/size-responsive/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/size-responsive/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/size-responsive/react/main_tsx.md b/static/usage/v8/grid/size-responsive/react/main_tsx.md new file mode 100644 index 00000000000..32a037e47bd --- /dev/null +++ b/static/usage/v8/grid/size-responsive/react/main_tsx.md @@ -0,0 +1,64 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Stacked for xs breakpoint, equal width for sm and up + + + + 1 + + + 2 + + + 3 + + + 4 + + + + + Equal width until md breakpoint, last column takes full width for md and up + + + 1 + 2 + 3 + + + + 2 per row until md breakpoint, 3 per row for md, equal width for lg and up + + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/size-responsive/vue.md b/static/usage/v8/grid/size-responsive/vue.md new file mode 100644 index 00000000000..2762e9c4774 --- /dev/null +++ b/static/usage/v8/grid/size-responsive/vue.md @@ -0,0 +1,52 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/size/angular/example_component_css.md b/static/usage/v8/grid/size/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/size/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/size/angular/example_component_html.md b/static/usage/v8/grid/size/angular/example_component_html.md new file mode 100644 index 00000000000..dc47b3de0dd --- /dev/null +++ b/static/usage/v8/grid/size/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html +Column 2 has size set to "8" + + + 1 + 2 + 3 + + + +Columns 3 & 4 have size set to "3" + + + 1 + 2 + 3 + 4 + 5 + 6 + + + +Columns 1 & 2 have size set to "4" + + + 1 + 2 + + +``` diff --git a/static/usage/v8/grid/size/demo.html b/static/usage/v8/grid/size/demo.html new file mode 100644 index 00000000000..4db45111d72 --- /dev/null +++ b/static/usage/v8/grid/size/demo.html @@ -0,0 +1,68 @@ + + + + + + Grid + + + + + + + + + + + +
+ Column 2 has size set to "8" + + + 1 + 2 + 3 + + + + Columns 3 & 4 have size set to "3" + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + Columns 1 & 2 have size set to "4" + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v8/grid/size/index.md b/static/usage/v8/grid/size/index.md new file mode 100644 index 00000000000..132f75c639a --- /dev/null +++ b/static/usage/v8/grid/size/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/size/javascript.md b/static/usage/v8/grid/size/javascript.md new file mode 100644 index 00000000000..576234e746e --- /dev/null +++ b/static/usage/v8/grid/size/javascript.md @@ -0,0 +1,39 @@ +```html +Column 2 has size set to "8" + + + 1 + 2 + 3 + + + +Columns 3 & 4 have size set to "3" + + + 1 + 2 + 3 + 4 + 5 + 6 + + + +Columns 1 & 2 have size set to "4" + + + 1 + 2 + + + + +``` diff --git a/static/usage/v8/grid/size/react/main_css.md b/static/usage/v8/grid/size/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/size/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/size/react/main_tsx.md b/static/usage/v8/grid/size/react/main_tsx.md new file mode 100644 index 00000000000..5cfa4f62f0e --- /dev/null +++ b/static/usage/v8/grid/size/react/main_tsx.md @@ -0,0 +1,48 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Column 2 has size set to "8" + + + + 1 + 2 + 3 + + + + + Columns 3 & 4 have size set to "3" + + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + Columns 1 & 2 have size set to "4" + + + + 1 + 2 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/size/vue.md b/static/usage/v8/grid/size/vue.md new file mode 100644 index 00000000000..14baef9e1c4 --- /dev/null +++ b/static/usage/v8/grid/size/vue.md @@ -0,0 +1,50 @@ +```html + + + + + +``` diff --git a/static/usage/v8/grid/vertical-alignment/angular/example_component_css.md b/static/usage/v8/grid/vertical-alignment/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/vertical-alignment/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/vertical-alignment/angular/example_component_html.md b/static/usage/v8/grid/vertical-alignment/angular/example_component_html.md new file mode 100644 index 00000000000..0c12d96a0d2 --- /dev/null +++ b/static/usage/v8/grid/vertical-alignment/angular/example_component_html.md @@ -0,0 +1,46 @@ +```html +Columns aligned at the top + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + +Columns aligned at the center + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + +Columns aligned at the bottom + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + +``` diff --git a/static/usage/v8/grid/vertical-alignment/demo.html b/static/usage/v8/grid/vertical-alignment/demo.html new file mode 100644 index 00000000000..027b25dfaed --- /dev/null +++ b/static/usage/v8/grid/vertical-alignment/demo.html @@ -0,0 +1,84 @@ + + + + + + Grid + + + + + + + + + + + +
+ Columns aligned at the top + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + + Columns aligned at the center + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + + Columns aligned at the bottom + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + +
+ + + + diff --git a/static/usage/v8/grid/vertical-alignment/index.md b/static/usage/v8/grid/vertical-alignment/index.md new file mode 100644 index 00000000000..74d347e49a5 --- /dev/null +++ b/static/usage/v8/grid/vertical-alignment/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/grid/vertical-alignment/javascript.md b/static/usage/v8/grid/vertical-alignment/javascript.md new file mode 100644 index 00000000000..6285096acdc --- /dev/null +++ b/static/usage/v8/grid/vertical-alignment/javascript.md @@ -0,0 +1,55 @@ +```html +Columns aligned at the top + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + +Columns aligned at the center + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + +Columns aligned at the bottom + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + + +``` diff --git a/static/usage/v8/grid/vertical-alignment/react/main_css.md b/static/usage/v8/grid/vertical-alignment/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v8/grid/vertical-alignment/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v8/grid/vertical-alignment/react/main_tsx.md b/static/usage/v8/grid/vertical-alignment/react/main_tsx.md new file mode 100644 index 00000000000..04a492566f6 --- /dev/null +++ b/static/usage/v8/grid/vertical-alignment/react/main_tsx.md @@ -0,0 +1,58 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Columns aligned at the top + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + + Columns aligned at the center + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + + Columns aligned at the bottom + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/grid/vertical-alignment/vue.md b/static/usage/v8/grid/vertical-alignment/vue.md new file mode 100644 index 00000000000..e48b234b38a --- /dev/null +++ b/static/usage/v8/grid/vertical-alignment/vue.md @@ -0,0 +1,66 @@ +```html + + + + + +``` diff --git a/static/usage/v8/header/basic/angular.md b/static/usage/v8/header/basic/angular.md new file mode 100644 index 00000000000..9edf1a22f27 --- /dev/null +++ b/static/usage/v8/header/basic/angular.md @@ -0,0 +1,10 @@ +```html + + + Header + + + +

Content

+ +``` diff --git a/static/usage/v8/header/basic/demo.html b/static/usage/v8/header/basic/demo.html new file mode 100644 index 00000000000..66f341c69c0 --- /dev/null +++ b/static/usage/v8/header/basic/demo.html @@ -0,0 +1,25 @@ + + + + + + Header + + + + + + + + + + + Header + + + +

Content

+ + + + diff --git a/static/usage/v8/header/basic/index.md b/static/usage/v8/header/basic/index.md new file mode 100644 index 00000000000..1058c42ba41 --- /dev/null +++ b/static/usage/v8/header/basic/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/header/basic/javascript.md b/static/usage/v8/header/basic/javascript.md new file mode 100644 index 00000000000..9edf1a22f27 --- /dev/null +++ b/static/usage/v8/header/basic/javascript.md @@ -0,0 +1,10 @@ +```html + + + Header + + + +

Content

+ +``` diff --git a/static/usage/v8/header/basic/react.md b/static/usage/v8/header/basic/react.md new file mode 100644 index 00000000000..0dd2df0474d --- /dev/null +++ b/static/usage/v8/header/basic/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + +

Content

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/header/basic/vue.md b/static/usage/v8/header/basic/vue.md new file mode 100644 index 00000000000..1bba4fdee2b --- /dev/null +++ b/static/usage/v8/header/basic/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v8/header/condense/angular.md b/static/usage/v8/header/condense/angular.md new file mode 100644 index 00000000000..1741b1f1706 --- /dev/null +++ b/static/usage/v8/header/condense/angular.md @@ -0,0 +1,75 @@ +```html + + + Header + + + + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, + while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 + teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to + reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+
+ +``` diff --git a/static/usage/v8/header/condense/demo.html b/static/usage/v8/header/condense/demo.html new file mode 100644 index 00000000000..17594d4e024 --- /dev/null +++ b/static/usage/v8/header/condense/demo.html @@ -0,0 +1,92 @@ + + + + + + Header + + + + + + + + + + + Header + + + + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies + on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have + two horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and + have a spotted pattern similar to that of a leopard. Because of the combination of these features, some + people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes + from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, + or suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, + gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout + with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a + flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it + surfaces. +

+
+ + + + diff --git a/static/usage/v8/header/condense/index.md b/static/usage/v8/header/condense/index.md new file mode 100644 index 00000000000..5ae68be3af9 --- /dev/null +++ b/static/usage/v8/header/condense/index.md @@ -0,0 +1,15 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/header/condense/javascript.md b/static/usage/v8/header/condense/javascript.md new file mode 100644 index 00000000000..f2e2a1d53cc --- /dev/null +++ b/static/usage/v8/header/condense/javascript.md @@ -0,0 +1,75 @@ +```html + + + Header + + + + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, + while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 + teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to + reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+
+ +``` diff --git a/static/usage/v8/header/condense/react.md b/static/usage/v8/header/condense/react.md new file mode 100644 index 00000000000..6dc06c54cff --- /dev/null +++ b/static/usage/v8/header/condense/react.md @@ -0,0 +1,87 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies + on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have + two horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and + have a spotted pattern similar to that of a leopard. Because of the combination of these features, some + people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes + from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, + or suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, + gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout + with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a + flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it + surfaces. +

+
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/header/condense/vue.md b/static/usage/v8/header/condense/vue.md new file mode 100644 index 00000000000..dddaef7f71c --- /dev/null +++ b/static/usage/v8/header/condense/vue.md @@ -0,0 +1,86 @@ +```html + + + +``` diff --git a/static/usage/v8/header/custom-scroll-target/angular/example_component_css.md b/static/usage/v8/header/custom-scroll-target/angular/example_component_css.md new file mode 100644 index 00000000000..5fe74c95f50 --- /dev/null +++ b/static/usage/v8/header/custom-scroll-target/angular/example_component_css.md @@ -0,0 +1,10 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v8/header/custom-scroll-target/angular/example_component_html.md b/static/usage/v8/header/custom-scroll-target/angular/example_component_html.md new file mode 100644 index 00000000000..742d531cb9d --- /dev/null +++ b/static/usage/v8/header/custom-scroll-target/angular/example_component_html.md @@ -0,0 +1,69 @@ +```html + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, + while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 + teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to + reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+
+ +``` diff --git a/static/usage/v8/header/custom-scroll-target/demo.html b/static/usage/v8/header/custom-scroll-target/demo.html new file mode 100644 index 00000000000..c9721ebd1f3 --- /dev/null +++ b/static/usage/v8/header/custom-scroll-target/demo.html @@ -0,0 +1,98 @@ + + + + + + Header + + + + + + + + + + + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies + on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have + two horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and + have a spotted pattern similar to that of a leopard. Because of the combination of these features, some + people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes + from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, + or suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, + gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout + with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a + flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it + surfaces. +

+
+ + + + diff --git a/static/usage/v8/header/custom-scroll-target/index.md b/static/usage/v8/header/custom-scroll-target/index.md new file mode 100644 index 00000000000..cf5ad71dd63 --- /dev/null +++ b/static/usage/v8/header/custom-scroll-target/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/header/custom-scroll-target/javascript.md b/static/usage/v8/header/custom-scroll-target/javascript.md new file mode 100644 index 00000000000..64077515677 --- /dev/null +++ b/static/usage/v8/header/custom-scroll-target/javascript.md @@ -0,0 +1,43 @@ +```html + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.

+ +

Sea Turtle

+ brown sea turtle in water +

Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.

+ +

Giraffe

+ giraffe sticking its tongue out +

Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.

+ +

Elephant

+ two grey elephants on grass plains during sunset +

Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.

+ +

Dolphin

+ black and white dolphin in water +

Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.

+ + + +``` diff --git a/static/usage/v8/header/custom-scroll-target/react/main_css.md b/static/usage/v8/header/custom-scroll-target/react/main_css.md new file mode 100644 index 00000000000..5fe74c95f50 --- /dev/null +++ b/static/usage/v8/header/custom-scroll-target/react/main_css.md @@ -0,0 +1,10 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v8/header/custom-scroll-target/react/main_tsx.md b/static/usage/v8/header/custom-scroll-target/react/main_tsx.md new file mode 100644 index 00000000000..923ea715aa7 --- /dev/null +++ b/static/usage/v8/header/custom-scroll-target/react/main_tsx.md @@ -0,0 +1,83 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies + on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have + two horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and + have a spotted pattern similar to that of a leopard. Because of the combination of these features, some + people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes + from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, + or suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, + gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout + with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a + flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it + surfaces. +

+
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/header/custom-scroll-target/vue.md b/static/usage/v8/header/custom-scroll-target/vue.md new file mode 100644 index 00000000000..84aac1c56fe --- /dev/null +++ b/static/usage/v8/header/custom-scroll-target/vue.md @@ -0,0 +1,92 @@ +```html + + + + + +``` diff --git a/static/usage/v8/header/fade/angular.md b/static/usage/v8/header/fade/angular.md new file mode 100644 index 00000000000..473ad54c8da --- /dev/null +++ b/static/usage/v8/header/fade/angular.md @@ -0,0 +1,67 @@ +```html + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ +``` diff --git a/static/usage/v8/header/fade/demo.html b/static/usage/v8/header/fade/demo.html new file mode 100644 index 00000000000..fc2d26aa3d3 --- /dev/null +++ b/static/usage/v8/header/fade/demo.html @@ -0,0 +1,82 @@ + + + + + + Header + + + + + + + + + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + diff --git a/static/usage/v8/header/fade/index.md b/static/usage/v8/header/fade/index.md new file mode 100644 index 00000000000..328ba025ada --- /dev/null +++ b/static/usage/v8/header/fade/index.md @@ -0,0 +1,15 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/header/fade/javascript.md b/static/usage/v8/header/fade/javascript.md new file mode 100644 index 00000000000..473ad54c8da --- /dev/null +++ b/static/usage/v8/header/fade/javascript.md @@ -0,0 +1,67 @@ +```html + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ +``` diff --git a/static/usage/v8/header/fade/react.md b/static/usage/v8/header/fade/react.md new file mode 100644 index 00000000000..085bea0296d --- /dev/null +++ b/static/usage/v8/header/fade/react.md @@ -0,0 +1,77 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/header/fade/vue.md b/static/usage/v8/header/fade/vue.md new file mode 100644 index 00000000000..264038c103c --- /dev/null +++ b/static/usage/v8/header/fade/vue.md @@ -0,0 +1,78 @@ +```html + + + +``` diff --git a/static/usage/v8/header/no-border/angular.md b/static/usage/v8/header/no-border/angular.md new file mode 100644 index 00000000000..064fa753744 --- /dev/null +++ b/static/usage/v8/header/no-border/angular.md @@ -0,0 +1,10 @@ +```html + + + Header + + + +

Content

+ +``` diff --git a/static/usage/v8/header/no-border/demo.html b/static/usage/v8/header/no-border/demo.html new file mode 100644 index 00000000000..2f60ef6fd1c --- /dev/null +++ b/static/usage/v8/header/no-border/demo.html @@ -0,0 +1,25 @@ + + + + + + Header + + + + + + + + + + + Header + + + +

Content

+ + + + diff --git a/static/usage/v8/header/no-border/index.md b/static/usage/v8/header/no-border/index.md new file mode 100644 index 00000000000..e7300fb2610 --- /dev/null +++ b/static/usage/v8/header/no-border/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/header/no-border/javascript.md b/static/usage/v8/header/no-border/javascript.md new file mode 100644 index 00000000000..064fa753744 --- /dev/null +++ b/static/usage/v8/header/no-border/javascript.md @@ -0,0 +1,10 @@ +```html + + + Header + + + +

Content

+ +``` diff --git a/static/usage/v8/header/no-border/react.md b/static/usage/v8/header/no-border/react.md new file mode 100644 index 00000000000..2eb14f6882f --- /dev/null +++ b/static/usage/v8/header/no-border/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + +

Content

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/header/no-border/vue.md b/static/usage/v8/header/no-border/vue.md new file mode 100644 index 00000000000..a5583fb06d1 --- /dev/null +++ b/static/usage/v8/header/no-border/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v8/header/translucent/angular.md b/static/usage/v8/header/translucent/angular.md new file mode 100644 index 00000000000..657a88bf066 --- /dev/null +++ b/static/usage/v8/header/translucent/angular.md @@ -0,0 +1,67 @@ +```html + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ +``` diff --git a/static/usage/v8/header/translucent/demo.html b/static/usage/v8/header/translucent/demo.html new file mode 100644 index 00000000000..3172fe01bc7 --- /dev/null +++ b/static/usage/v8/header/translucent/demo.html @@ -0,0 +1,82 @@ + + + + + + Header + + + + + + + + + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + diff --git a/static/usage/v8/header/translucent/index.md b/static/usage/v8/header/translucent/index.md new file mode 100644 index 00000000000..fe8e8b04a8e --- /dev/null +++ b/static/usage/v8/header/translucent/index.md @@ -0,0 +1,15 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/header/translucent/javascript.md b/static/usage/v8/header/translucent/javascript.md new file mode 100644 index 00000000000..5c0048c019c --- /dev/null +++ b/static/usage/v8/header/translucent/javascript.md @@ -0,0 +1,67 @@ +```html + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ +``` diff --git a/static/usage/v8/header/translucent/react.md b/static/usage/v8/header/translucent/react.md new file mode 100644 index 00000000000..def835913c3 --- /dev/null +++ b/static/usage/v8/header/translucent/react.md @@ -0,0 +1,77 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/header/translucent/vue.md b/static/usage/v8/header/translucent/vue.md new file mode 100644 index 00000000000..26370009d44 --- /dev/null +++ b/static/usage/v8/header/translucent/vue.md @@ -0,0 +1,78 @@ +```html + + + +``` diff --git a/static/usage/v8/icon/basic/angular.md b/static/usage/v8/icon/basic/angular.md new file mode 100644 index 00000000000..7dba86b2634 --- /dev/null +++ b/static/usage/v8/icon/basic/angular.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v8/icon/basic/demo.html b/static/usage/v8/icon/basic/demo.html new file mode 100644 index 00000000000..1fec16dfe09 --- /dev/null +++ b/static/usage/v8/icon/basic/demo.html @@ -0,0 +1,25 @@ + + + + + + Icon + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v8/icon/basic/index.md b/static/usage/v8/icon/basic/index.md new file mode 100644 index 00000000000..f766b6112ac --- /dev/null +++ b/static/usage/v8/icon/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/icon/basic/javascript.md b/static/usage/v8/icon/basic/javascript.md new file mode 100644 index 00000000000..7dba86b2634 --- /dev/null +++ b/static/usage/v8/icon/basic/javascript.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v8/icon/basic/react.md b/static/usage/v8/icon/basic/react.md new file mode 100644 index 00000000000..57383875130 --- /dev/null +++ b/static/usage/v8/icon/basic/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonIcon } from '@ionic/react'; +import { logoIonic } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/icon/basic/vue.md b/static/usage/v8/icon/basic/vue.md new file mode 100644 index 00000000000..c78d79fb041 --- /dev/null +++ b/static/usage/v8/icon/basic/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v8/img/basic/angular.md b/static/usage/v8/img/basic/angular.md new file mode 100644 index 00000000000..61e27f8b9d6 --- /dev/null +++ b/static/usage/v8/img/basic/angular.md @@ -0,0 +1,6 @@ +```html + +``` diff --git a/static/usage/v8/img/basic/demo.html b/static/usage/v8/img/basic/demo.html new file mode 100644 index 00000000000..75747152f61 --- /dev/null +++ b/static/usage/v8/img/basic/demo.html @@ -0,0 +1,31 @@ + + + + + + Image + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/img/basic/index.md b/static/usage/v8/img/basic/index.md new file mode 100644 index 00000000000..97f57f40ec2 --- /dev/null +++ b/static/usage/v8/img/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/img/basic/javascript.md b/static/usage/v8/img/basic/javascript.md new file mode 100644 index 00000000000..61e27f8b9d6 --- /dev/null +++ b/static/usage/v8/img/basic/javascript.md @@ -0,0 +1,6 @@ +```html + +``` diff --git a/static/usage/v8/img/basic/react.md b/static/usage/v8/img/basic/react.md new file mode 100644 index 00000000000..0236cc28976 --- /dev/null +++ b/static/usage/v8/img/basic/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonImg } from '@ionic/react'; + +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v8/img/basic/vue.md b/static/usage/v8/img/basic/vue.md new file mode 100644 index 00000000000..db4d74618ef --- /dev/null +++ b/static/usage/v8/img/basic/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md new file mode 100644 index 00000000000..55469ab3c5a --- /dev/null +++ b/static/usage/v8/infinite-scroll/basic/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + + + avatar + + {{ item }} + + + + + + +``` diff --git a/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..390ba6b75f1 --- /dev/null +++ b/static/usage/v8/infinite-scroll/basic/angular/example_component_ts.md @@ -0,0 +1,32 @@ +```tsx +import { Component, OnInit } from '@angular/core'; + +import { InfiniteScrollCustomEvent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.scss'], +}) +export class ExampleComponent implements OnInit { + items = []; + + ngOnInit() { + this.generateItems(); + } + + private generateItems() { + const count = this.items.length + 1; + for (let i = 0; i < 50; i++) { + this.items.push(`Item ${count + i}`); + } + } + + onIonInfinite(ev) { + this.generateItems(); + setTimeout(() => { + (ev as InfiniteScrollCustomEvent).target.complete(); + }, 500); + } +} +``` diff --git a/static/usage/v8/infinite-scroll/basic/demo.html b/static/usage/v8/infinite-scroll/basic/demo.html new file mode 100644 index 00000000000..e7bc2c658c0 --- /dev/null +++ b/static/usage/v8/infinite-scroll/basic/demo.html @@ -0,0 +1,60 @@ + + + + + + Infinite Scroll + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v8/infinite-scroll/basic/index.md b/static/usage/v8/infinite-scroll/basic/index.md new file mode 100644 index 00000000000..5ed57c31892 --- /dev/null +++ b/static/usage/v8/infinite-scroll/basic/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/infinite-scroll/basic/javascript.md b/static/usage/v8/infinite-scroll/basic/javascript.md new file mode 100644 index 00000000000..b61db4c6ae3 --- /dev/null +++ b/static/usage/v8/infinite-scroll/basic/javascript.md @@ -0,0 +1,46 @@ +```html + + + + + + + + +``` diff --git a/static/usage/v8/infinite-scroll/basic/react.md b/static/usage/v8/infinite-scroll/basic/react.md new file mode 100644 index 00000000000..c12032a6540 --- /dev/null +++ b/static/usage/v8/infinite-scroll/basic/react.md @@ -0,0 +1,53 @@ +```tsx +import React, { useState, useEffect } from 'react'; +import { + IonContent, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonList, + IonItem, + IonAvatar, + IonLabel, +} from '@ionic/react'; + +function Example() { + const [items, setItems] = useState([]); + + const generateItems = () => { + const newItems = []; + for (let i = 0; i < 50; i++) { + newItems.push(`Item ${1 + items.length + i}`); + } + setItems([...items, ...newItems]); + }; + + useEffect(() => { + generateItems(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + + + {items.map((item, index) => ( + + + avatar + + {item} + + ))} + + { + generateItems(); + setTimeout(() => ev.target.complete(), 500); + }} + > + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/infinite-scroll/basic/vue.md b/static/usage/v8/infinite-scroll/basic/vue.md new file mode 100644 index 00000000000..dc7a7c45f46 --- /dev/null +++ b/static/usage/v8/infinite-scroll/basic/vue.md @@ -0,0 +1,65 @@ +```html + + + +``` diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md new file mode 100644 index 00000000000..9f14adbc405 --- /dev/null +++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md @@ -0,0 +1,12 @@ +```css +svg { + width: 20px; + height: 20px; + display: inline-block; +} + +.infinite-scroll-content { + text-align: center; + padding: 20px 0; +} +``` diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md new file mode 100644 index 00000000000..60c02b86ea0 --- /dev/null +++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md @@ -0,0 +1,68 @@ +```html + + + + + avatar + + {{ item }} + + + +
+ + + + + + + + + +
+ + +``` diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md new file mode 100644 index 00000000000..415ed5dba8b --- /dev/null +++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```tsx +import { Component, OnInit } from '@angular/core'; + +import { InfiniteScrollCustomEvent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.scss'], +}) +export class ExampleComponent implements OnInit { + items = []; + + ngOnInit() { + for (let i = 1; i < 51; i++) { + this.items.push(`Item ${i}`); + } + } +} +``` diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/demo.html b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/demo.html new file mode 100644 index 00000000000..3970f5091a0 --- /dev/null +++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/demo.html @@ -0,0 +1,117 @@ + + + + + + Infinite Scroll + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + + + + diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/index.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/index.md new file mode 100644 index 00000000000..2fb457deb95 --- /dev/null +++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/javascript.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/javascript.md new file mode 100644 index 00000000000..721eb0c0ad4 --- /dev/null +++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/javascript.md @@ -0,0 +1,104 @@ +```html + + + + + +
+ + + + + + + + + +
+ + + + +``` diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_css.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_css.md new file mode 100644 index 00000000000..9f14adbc405 --- /dev/null +++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_css.md @@ -0,0 +1,12 @@ +```css +svg { + width: 20px; + height: 20px; + display: inline-block; +} + +.infinite-scroll-content { + text-align: center; + padding: 20px 0; +} +``` diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md new file mode 100644 index 00000000000..1139f55920d --- /dev/null +++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md @@ -0,0 +1,89 @@ +```tsx +import React, { useState, useEffect } from 'react'; +import { IonContent, IonInfiniteScroll, IonList, IonItem, IonAvatar, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + const [items, setItems] = useState([]); + + useEffect(() => { + const newItems = []; + for (let i = 1; i < 51; i++) { + newItems.push(`Item ${items.length + i}`); + } + setItems([...items, ...newItems]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + + + {items.map((item, index) => ( + + + avatar + + {item} + + ))} + + +
+ + + + + + + + + +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/vue.md b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/vue.md new file mode 100644 index 00000000000..85954295280 --- /dev/null +++ b/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/vue.md @@ -0,0 +1,121 @@ +```html + + + + + +``` diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md new file mode 100644 index 00000000000..2e23e359257 --- /dev/null +++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + + + avatar + + {{ item }} + + + + + + +``` diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md new file mode 100644 index 00000000000..415ed5dba8b --- /dev/null +++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```tsx +import { Component, OnInit } from '@angular/core'; + +import { InfiniteScrollCustomEvent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.scss'], +}) +export class ExampleComponent implements OnInit { + items = []; + + ngOnInit() { + for (let i = 1; i < 51; i++) { + this.items.push(`Item ${i}`); + } + } +} +``` diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/v8/infinite-scroll/infinite-scroll-content/demo.html new file mode 100644 index 00000000000..7881a0abac8 --- /dev/null +++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/demo.html @@ -0,0 +1,53 @@ + + + + + + Infinite Scroll + + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/index.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/index.md new file mode 100644 index 00000000000..e053e5d2d97 --- /dev/null +++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/javascript.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/javascript.md new file mode 100644 index 00000000000..6b2a9bb409f --- /dev/null +++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/javascript.md @@ -0,0 +1,38 @@ +```html + + + + + + + + +``` diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/react.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/react.md new file mode 100644 index 00000000000..2c2b5f77b8a --- /dev/null +++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/react.md @@ -0,0 +1,44 @@ +```tsx +import React, { useState, useEffect } from 'react'; +import { + IonContent, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonList, + IonItem, + IonAvatar, + IonLabel, +} from '@ionic/react'; + +function Example() { + const [items, setItems] = useState([]); + + useEffect(() => { + const newItems = []; + for (let i = 1; i < 51; i++) { + newItems.push(`Item ${items.length + i}`); + } + setItems([...items, ...newItems]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + + + {items.map((item, index) => ( + + + avatar + + {item} + + ))} + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/infinite-scroll/infinite-scroll-content/vue.md b/static/usage/v8/infinite-scroll/infinite-scroll-content/vue.md new file mode 100644 index 00000000000..f00b47e1fb8 --- /dev/null +++ b/static/usage/v8/infinite-scroll/infinite-scroll-content/vue.md @@ -0,0 +1,58 @@ +```html + + + +``` diff --git a/static/usage/v8/input/basic/angular.md b/static/usage/v8/input/basic/angular.md new file mode 100644 index 00000000000..a8678178aa6 --- /dev/null +++ b/static/usage/v8/input/basic/angular.md @@ -0,0 +1,23 @@ +```html + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/input/basic/demo.html b/static/usage/v8/input/basic/demo.html new file mode 100644 index 00000000000..69bbde23b42 --- /dev/null +++ b/static/usage/v8/input/basic/demo.html @@ -0,0 +1,48 @@ + + + + + + Input + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/input/basic/index.md b/static/usage/v8/input/basic/index.md new file mode 100644 index 00000000000..ed54a843667 --- /dev/null +++ b/static/usage/v8/input/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/input/basic/javascript.md b/static/usage/v8/input/basic/javascript.md new file mode 100644 index 00000000000..75e521fa3b6 --- /dev/null +++ b/static/usage/v8/input/basic/javascript.md @@ -0,0 +1,23 @@ +```html + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/input/basic/react.md b/static/usage/v8/input/basic/react.md new file mode 100644 index 00000000000..ff799a11f62 --- /dev/null +++ b/static/usage/v8/input/basic/react.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/basic/vue.md b/static/usage/v8/input/basic/vue.md new file mode 100644 index 00000000000..cfdca09244a --- /dev/null +++ b/static/usage/v8/input/basic/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v8/input/clear/angular.md b/static/usage/v8/input/clear/angular.md new file mode 100644 index 00000000000..fc52d3b55e8 --- /dev/null +++ b/static/usage/v8/input/clear/angular.md @@ -0,0 +1,34 @@ +```html + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/input/clear/demo.html b/static/usage/v8/input/clear/demo.html new file mode 100644 index 00000000000..39074873dbc --- /dev/null +++ b/static/usage/v8/input/clear/demo.html @@ -0,0 +1,59 @@ + + + + + + Input + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/input/clear/index.md b/static/usage/v8/input/clear/index.md new file mode 100644 index 00000000000..eecea0ba6cf --- /dev/null +++ b/static/usage/v8/input/clear/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/input/clear/javascript.md b/static/usage/v8/input/clear/javascript.md new file mode 100644 index 00000000000..743ebd8cfd8 --- /dev/null +++ b/static/usage/v8/input/clear/javascript.md @@ -0,0 +1,34 @@ +```html + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/input/clear/react.md b/static/usage/v8/input/clear/react.md new file mode 100644 index 00000000000..959702b5e9e --- /dev/null +++ b/static/usage/v8/input/clear/react.md @@ -0,0 +1,39 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/clear/vue.md b/static/usage/v8/input/clear/vue.md new file mode 100644 index 00000000000..e5cd540d469 --- /dev/null +++ b/static/usage/v8/input/clear/vue.md @@ -0,0 +1,45 @@ +```html + + + +``` diff --git a/static/usage/v8/input/counter-alignment/angular.md b/static/usage/v8/input/counter-alignment/angular.md new file mode 100644 index 00000000000..c08e1cdd758 --- /dev/null +++ b/static/usage/v8/input/counter-alignment/angular.md @@ -0,0 +1,11 @@ +```html + + + + + +
+ +
+ +``` diff --git a/static/usage/v8/input/counter-alignment/demo.html b/static/usage/v8/input/counter-alignment/demo.html new file mode 100644 index 00000000000..4fb07004def --- /dev/null +++ b/static/usage/v8/input/counter-alignment/demo.html @@ -0,0 +1,30 @@ + + + + + + Input + + + + + + + + + +
+ + + + + +
+ +
+ +
+ + + + diff --git a/static/usage/v8/input/counter-alignment/index.md b/static/usage/v8/input/counter-alignment/index.md new file mode 100644 index 00000000000..c590c8a24c8 --- /dev/null +++ b/static/usage/v8/input/counter-alignment/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/input/counter-alignment/javascript.md b/static/usage/v8/input/counter-alignment/javascript.md new file mode 100644 index 00000000000..3a9b526ba70 --- /dev/null +++ b/static/usage/v8/input/counter-alignment/javascript.md @@ -0,0 +1,11 @@ +```html + + + + + +
+ +
+ +``` diff --git a/static/usage/v8/input/counter-alignment/react.md b/static/usage/v8/input/counter-alignment/react.md new file mode 100644 index 00000000000..5687f244f0c --- /dev/null +++ b/static/usage/v8/input/counter-alignment/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + +
+ +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/counter-alignment/vue.md b/static/usage/v8/input/counter-alignment/vue.md new file mode 100644 index 00000000000..77c9d4b0fde --- /dev/null +++ b/static/usage/v8/input/counter-alignment/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v8/input/counter/angular/example_component_html.md b/static/usage/v8/input/counter/angular/example_component_html.md new file mode 100644 index 00000000000..633ff54c719 --- /dev/null +++ b/static/usage/v8/input/counter/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + +``` diff --git a/static/usage/v8/input/counter/angular/example_component_ts.md b/static/usage/v8/input/counter/angular/example_component_ts.md new file mode 100644 index 00000000000..2c08dc06fc2 --- /dev/null +++ b/static/usage/v8/input/counter/angular/example_component_ts.md @@ -0,0 +1,13 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + customCounterFormatter(inputLength: number, maxLength: number) { + return `${maxLength - inputLength} characters remaining`; + } +} +``` diff --git a/static/usage/v8/input/counter/demo.html b/static/usage/v8/input/counter/demo.html new file mode 100644 index 00000000000..ad98ed249eb --- /dev/null +++ b/static/usage/v8/input/counter/demo.html @@ -0,0 +1,44 @@ + + + + + + Item + + + + + + + + + + + +
+ + + +
+ + + + + + diff --git a/static/usage/v8/input/counter/index.md b/static/usage/v8/input/counter/index.md new file mode 100644 index 00000000000..72587aebe74 --- /dev/null +++ b/static/usage/v8/input/counter/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/input/counter/javascript.md b/static/usage/v8/input/counter/javascript.md new file mode 100644 index 00000000000..f794dc12691 --- /dev/null +++ b/static/usage/v8/input/counter/javascript.md @@ -0,0 +1,16 @@ +```html + + + + + +``` diff --git a/static/usage/v8/input/counter/react.md b/static/usage/v8/input/counter/react.md new file mode 100644 index 00000000000..f3c6cdcd5a6 --- /dev/null +++ b/static/usage/v8/input/counter/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonInput } from '@ionic/react'; + +function Example() { + return ( + <> + + + `${maxLength - inputLength} characters remaining`} + > + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/counter/vue.md b/static/usage/v8/input/counter/vue.md new file mode 100644 index 00000000000..1df64570da9 --- /dev/null +++ b/static/usage/v8/input/counter/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v8/input/fill/angular.md b/static/usage/v8/input/fill/angular.md new file mode 100644 index 00000000000..60af531cd45 --- /dev/null +++ b/static/usage/v8/input/fill/angular.md @@ -0,0 +1,7 @@ +```html + + +
+ + +``` diff --git a/static/usage/v8/input/fill/demo.html b/static/usage/v8/input/fill/demo.html new file mode 100644 index 00000000000..d7894cda783 --- /dev/null +++ b/static/usage/v8/input/fill/demo.html @@ -0,0 +1,39 @@ + + + + + + Input + + + + + + + + + + + +
+ + + +
+ + + + diff --git a/static/usage/v8/input/fill/index.md b/static/usage/v8/input/fill/index.md new file mode 100644 index 00000000000..7a702b37d08 --- /dev/null +++ b/static/usage/v8/input/fill/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/input/fill/javascript.md b/static/usage/v8/input/fill/javascript.md new file mode 100644 index 00000000000..60af531cd45 --- /dev/null +++ b/static/usage/v8/input/fill/javascript.md @@ -0,0 +1,7 @@ +```html + + +
+ + +``` diff --git a/static/usage/v8/input/fill/react.md b/static/usage/v8/input/fill/react.md new file mode 100644 index 00000000000..d62ea62084c --- /dev/null +++ b/static/usage/v8/input/fill/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonInput } from '@ionic/react'; + +function Example() { + return ( + <> + + +
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/fill/vue.md b/static/usage/v8/input/fill/vue.md new file mode 100644 index 00000000000..d1f2e440b05 --- /dev/null +++ b/static/usage/v8/input/fill/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v8/input/filtering/angular/example_component_html.md b/static/usage/v8/input/filtering/angular/example_component_html.md new file mode 100644 index 00000000000..31ddc03f197 --- /dev/null +++ b/static/usage/v8/input/filtering/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + + + +``` diff --git a/static/usage/v8/input/filtering/angular/example_component_ts.md b/static/usage/v8/input/filtering/angular/example_component_ts.md new file mode 100644 index 00000000000..b0fc6a3331f --- /dev/null +++ b/static/usage/v8/input/filtering/angular/example_component_ts.md @@ -0,0 +1,27 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import type { IonInput } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + inputModel = ''; + + @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput; + + onInput(ev) { + const value = ev.target!.value; + + // Removes non alphanumeric characters + const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, ''); + + /** + * Update both the state variable and + * the component to keep them in sync. + */ + this.ionInputEl.value = this.inputModel = filteredValue; + } +} +``` diff --git a/static/usage/v8/input/filtering/demo.html b/static/usage/v8/input/filtering/demo.html new file mode 100644 index 00000000000..d92ff4817a4 --- /dev/null +++ b/static/usage/v8/input/filtering/demo.html @@ -0,0 +1,36 @@ + + + + + + Input + + + + + + + + + +
+ + + + + +
+ + + + + + diff --git a/static/usage/v8/input/filtering/index.md b/static/usage/v8/input/filtering/index.md new file mode 100644 index 00000000000..601fdc7cb82 --- /dev/null +++ b/static/usage/v8/input/filtering/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/input/filtering/javascript.md b/static/usage/v8/input/filtering/javascript.md new file mode 100644 index 00000000000..37af94dd426 --- /dev/null +++ b/static/usage/v8/input/filtering/javascript.md @@ -0,0 +1,16 @@ +```html + + + + + + + +``` diff --git a/static/usage/v8/input/filtering/react.md b/static/usage/v8/input/filtering/react.md new file mode 100644 index 00000000000..1722f8ad9af --- /dev/null +++ b/static/usage/v8/input/filtering/react.md @@ -0,0 +1,36 @@ +```tsx +import React, { useState, useRef } from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + const [inputModel, setInputModel] = useState(''); + const ionInputEl = useRef(null); + + const onInput = (ev: Event) => { + const value = (ev.target as HTMLIonInputElement).value as string; + + // Removes non alphanumeric characters + const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, ''); + + /** + * Update both the state variable and + * the component to keep them in sync. + */ + setInputModel(filteredValue); + + const inputCmp = ionInputEl.current; + if (inputCmp !== null) { + inputCmp.value = filteredValue; + } + }; + + return ( + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/filtering/vue.md b/static/usage/v8/input/filtering/vue.md new file mode 100644 index 00000000000..a95e5dcc843 --- /dev/null +++ b/static/usage/v8/input/filtering/vue.md @@ -0,0 +1,46 @@ +```html + + + +``` diff --git a/static/usage/v8/input/helper-error/angular.md b/static/usage/v8/input/helper-error/angular.md new file mode 100644 index 00000000000..ba5030c0026 --- /dev/null +++ b/static/usage/v8/input/helper-error/angular.md @@ -0,0 +1,12 @@ +```html + +``` diff --git a/static/usage/v8/input/helper-error/demo.html b/static/usage/v8/input/helper-error/demo.html new file mode 100644 index 00000000000..cf2c371af95 --- /dev/null +++ b/static/usage/v8/input/helper-error/demo.html @@ -0,0 +1,62 @@ + + + + + + Input + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v8/input/helper-error/index.md b/static/usage/v8/input/helper-error/index.md new file mode 100644 index 00000000000..03393f19b24 --- /dev/null +++ b/static/usage/v8/input/helper-error/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/input/helper-error/javascript.md b/static/usage/v8/input/helper-error/javascript.md new file mode 100644 index 00000000000..55d306aa225 --- /dev/null +++ b/static/usage/v8/input/helper-error/javascript.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v8/input/helper-error/react.md b/static/usage/v8/input/helper-error/react.md new file mode 100644 index 00000000000..0067c90dac9 --- /dev/null +++ b/static/usage/v8/input/helper-error/react.md @@ -0,0 +1,44 @@ +```tsx +import React, { useState } from 'react'; +import { IonInput } from '@ionic/react'; + +function Example() { + const [isTouched, setIsTouched] = useState(false); + const [isValid, setIsValid] = useState(); + + const validateEmail = (email: string) => { + return email.match( + /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ + ); + }; + + const validate = (ev: Event) => { + const value = (ev.target as HTMLInputElement).value; + + setIsValid(undefined); + + if (value === '') return; + + validateEmail(value) !== null ? setIsValid(true) : setIsValid(false); + }; + + const markTouched = () => { + setIsTouched(true); + }; + + return ( + validate(event)} + onIonBlur={() => markTouched()} + > + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/helper-error/vue.md b/static/usage/v8/input/helper-error/vue.md new file mode 100644 index 00000000000..ce801d04ac7 --- /dev/null +++ b/static/usage/v8/input/helper-error/vue.md @@ -0,0 +1,48 @@ +```html + + + +``` diff --git a/static/usage/v8/input/label-placement/angular.md b/static/usage/v8/input/label-placement/angular.md new file mode 100644 index 00000000000..151adb55b5d --- /dev/null +++ b/static/usage/v8/input/label-placement/angular.md @@ -0,0 +1,19 @@ +```html + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/input/label-placement/demo.html b/static/usage/v8/input/label-placement/demo.html new file mode 100644 index 00000000000..1b96b99673a --- /dev/null +++ b/static/usage/v8/input/label-placement/demo.html @@ -0,0 +1,44 @@ + + + + + + Input + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/input/label-placement/index.md b/static/usage/v8/input/label-placement/index.md new file mode 100644 index 00000000000..a3f377c079a --- /dev/null +++ b/static/usage/v8/input/label-placement/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/input/label-placement/javascript.md b/static/usage/v8/input/label-placement/javascript.md new file mode 100644 index 00000000000..f9c79fc46ae --- /dev/null +++ b/static/usage/v8/input/label-placement/javascript.md @@ -0,0 +1,19 @@ +```html + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/input/label-placement/react.md b/static/usage/v8/input/label-placement/react.md new file mode 100644 index 00000000000..aa4f1b3c484 --- /dev/null +++ b/static/usage/v8/input/label-placement/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/label-placement/vue.md b/static/usage/v8/input/label-placement/vue.md new file mode 100644 index 00000000000..8854647965d --- /dev/null +++ b/static/usage/v8/input/label-placement/vue.md @@ -0,0 +1,30 @@ +```html + + + +``` diff --git a/static/usage/v8/input/label-slot/angular.md b/static/usage/v8/input/label-slot/angular.md new file mode 100644 index 00000000000..21bdbf74b64 --- /dev/null +++ b/static/usage/v8/input/label-slot/angular.md @@ -0,0 +1,9 @@ +```html + + + +
Email (Required)
+ + + +``` diff --git a/static/usage/v8/input/label-slot/demo.html b/static/usage/v8/input/label-slot/demo.html new file mode 100644 index 00000000000..234aa3cbec3 --- /dev/null +++ b/static/usage/v8/input/label-slot/demo.html @@ -0,0 +1,28 @@ + + + + + + input + + + + + + + + + +
+ + + +
Email (Required)
+ + + +
+ + + + diff --git a/static/usage/v8/input/label-slot/index.md b/static/usage/v8/input/label-slot/index.md new file mode 100644 index 00000000000..5161508076b --- /dev/null +++ b/static/usage/v8/input/label-slot/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/input/label-slot/javascript.md b/static/usage/v8/input/label-slot/javascript.md new file mode 100644 index 00000000000..494d85ba6cb --- /dev/null +++ b/static/usage/v8/input/label-slot/javascript.md @@ -0,0 +1,9 @@ +```html + + + +
Email (Required)
+ + + +``` diff --git a/static/usage/v8/input/label-slot/react.md b/static/usage/v8/input/label-slot/react.md new file mode 100644 index 00000000000..144a7e80e97 --- /dev/null +++ b/static/usage/v8/input/label-slot/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList, IonText } from '@ionic/react'; + +function Example() { + return ( + + + +
+ Email (Required) +
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/label-slot/vue.md b/static/usage/v8/input/label-slot/vue.md new file mode 100644 index 00000000000..4b3fb3daeb8 --- /dev/null +++ b/static/usage/v8/input/label-slot/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v8/input/mask/angular/app_module_ts.md b/static/usage/v8/input/mask/angular/app_module_ts.md new file mode 100644 index 00000000000..653793d4262 --- /dev/null +++ b/static/usage/v8/input/mask/angular/app_module_ts.md @@ -0,0 +1,19 @@ +```ts +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; +import { ExampleComponent } from './example.component'; + +import { MaskitoModule } from '@maskito/angular'; + +@NgModule({ + imports: [BrowserModule, FormsModule, MaskitoModule, IonicModule.forRoot({})], + declarations: [AppComponent, ExampleComponent], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` diff --git a/static/usage/v8/input/mask/angular/example_component_html.md b/static/usage/v8/input/mask/angular/example_component_html.md new file mode 100644 index 00000000000..f6d27b19558 --- /dev/null +++ b/static/usage/v8/input/mask/angular/example_component_html.md @@ -0,0 +1,20 @@ +```html + + + + + + + + +``` diff --git a/static/usage/v8/input/mask/angular/example_component_ts.md b/static/usage/v8/input/mask/angular/example_component_ts.md new file mode 100644 index 00000000000..1edb7f8c662 --- /dev/null +++ b/static/usage/v8/input/mask/angular/example_component_ts.md @@ -0,0 +1,31 @@ +```ts +import { Component } from '@angular/core'; + +import { MaskitoOptions, MaskitoElementPredicateAsync } from '@maskito/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + readonly phoneMask: MaskitoOptions = { + mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/], + }; + + readonly cardMask: MaskitoOptions = { + mask: [ + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(3).fill(/\d/), + ], + }; + + readonly maskPredicate: MaskitoElementPredicateAsync = async (el) => (el as HTMLIonInputElement).getInputElement(); +} +``` diff --git a/static/usage/v8/input/mask/demo.html b/static/usage/v8/input/mask/demo.html new file mode 100644 index 00000000000..7c98089f4b1 --- /dev/null +++ b/static/usage/v8/input/mask/demo.html @@ -0,0 +1,73 @@ + + + + + + Input + + + + + + + + + + + + +
+ + + + + + + + +
+ + + + + diff --git a/static/usage/v8/input/mask/index.md b/static/usage/v8/input/mask/index.md new file mode 100644 index 00000000000..174aabc1e30 --- /dev/null +++ b/static/usage/v8/input/mask/index.md @@ -0,0 +1,58 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_main_tsx from './react.md'; + +import vue_example_vue from './vue.md'; + +import angular_app_module_ts from './angular/app_module_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/input/mask/javascript/index_html.md b/static/usage/v8/input/mask/javascript/index_html.md new file mode 100644 index 00000000000..bf7aadd8150 --- /dev/null +++ b/static/usage/v8/input/mask/javascript/index_html.md @@ -0,0 +1,45 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v8/input/mask/javascript/index_ts.md b/static/usage/v8/input/mask/javascript/index_ts.md new file mode 100644 index 00000000000..89d38873488 --- /dev/null +++ b/static/usage/v8/input/mask/javascript/index_ts.md @@ -0,0 +1,28 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { Maskito } from '@maskito/core'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +defineCustomElements(); + +(window as any).Maskito = Maskito; +``` diff --git a/static/usage/v8/input/mask/react.md b/static/usage/v8/input/mask/react.md new file mode 100644 index 00000000000..2b4d76902dc --- /dev/null +++ b/static/usage/v8/input/mask/react.md @@ -0,0 +1,59 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; +import { useMaskito } from '@maskito/react'; + +function Example() { + const cardMask = useMaskito({ + options: { + mask: [ + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(3).fill(/\d/), + ], + }, + }); + + const phoneMask = useMaskito({ + options: { + mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/], + }, + }); + + return ( + + + { + if (cardRef) { + const input = await cardRef.getInputElement(); + cardMask(input); + } + }} + label="Card number" + placeholder="0000 0000 0000 0000" + > + + + { + if (phoneInput) { + const input = await phoneInput.getInputElement(); + phoneMask(input); + } + }} + label="US phone number" + placeholder="+1 (xxx) xxx-xxxx" + > + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/mask/vue.md b/static/usage/v8/input/mask/vue.md new file mode 100644 index 00000000000..14b96d0caee --- /dev/null +++ b/static/usage/v8/input/mask/vue.md @@ -0,0 +1,51 @@ +```html + + + +``` diff --git a/static/usage/v8/input/migration/index.md b/static/usage/v8/input/migration/index.md new file mode 100644 index 00000000000..34e3ccaece5 --- /dev/null +++ b/static/usage/v8/input/migration/index.md @@ -0,0 +1,248 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +````mdx-code-block + + + +```html + + + + + Email: + + + + + + + + + + + + + + Email: + + + + + + + + + + + + + Email: + +
Enter an email
+
Please enter a valid email
+ + + + + + + +``` + + + +```html + + + + + Email: + + + + + + + + + + + + + + Email: + + + + + + + + + + + + + Email: + +
Enter an email
+
Please enter a valid email
+ + + + + + + +``` + + + +```tsx +{/* Label and Label Position */} + +{/* Before */} + + Email: + + + +{/* After */} + + + + + +{/* Fill */} + +{/* Before */} + + Email: + + + +{/* After */} + +{/* Inputs using `fill` should not be placed in IonItem */} + + +{/* Input-specific features on IonItem */} + +{/* Before */} + + Email: + +
Enter an email
+
Please enter a valid email
+ + +{/* After */} + +{/* + Metadata such as counters and helper text should not + be used when an input is in an item/list. If you need to + provide more context on a input, consider using an IonNote + underneath the IonList. +*/} + + +``` + + + +```html + + + + + Email: + + + + + + + + + + + + + + Email: + + + + + + + + + + + + + Email: + +
Enter an email
+
Please enter a valid email
+ + + + + + + +``` + + +```` diff --git a/static/usage/v8/input/no-visible-label/angular.md b/static/usage/v8/input/no-visible-label/angular.md new file mode 100644 index 00000000000..32616a6a196 --- /dev/null +++ b/static/usage/v8/input/no-visible-label/angular.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v8/input/no-visible-label/demo.html b/static/usage/v8/input/no-visible-label/demo.html new file mode 100644 index 00000000000..b8155e10e6f --- /dev/null +++ b/static/usage/v8/input/no-visible-label/demo.html @@ -0,0 +1,26 @@ + + + + + + input + + + + + + + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v8/input/no-visible-label/index.md b/static/usage/v8/input/no-visible-label/index.md new file mode 100644 index 00000000000..715c46e475f --- /dev/null +++ b/static/usage/v8/input/no-visible-label/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/input/no-visible-label/javascript.md b/static/usage/v8/input/no-visible-label/javascript.md new file mode 100644 index 00000000000..32616a6a196 --- /dev/null +++ b/static/usage/v8/input/no-visible-label/javascript.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v8/input/no-visible-label/react.md b/static/usage/v8/input/no-visible-label/react.md new file mode 100644 index 00000000000..38842ecb0b6 --- /dev/null +++ b/static/usage/v8/input/no-visible-label/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/no-visible-label/vue.md b/static/usage/v8/input/no-visible-label/vue.md new file mode 100644 index 00000000000..cc181047943 --- /dev/null +++ b/static/usage/v8/input/no-visible-label/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v8/input/set-focus/angular.md b/static/usage/v8/input/set-focus/angular.md new file mode 100644 index 00000000000..92c9d6b2561 --- /dev/null +++ b/static/usage/v8/input/set-focus/angular.md @@ -0,0 +1,10 @@ +```html + + + Click to set focus + + + + + +``` diff --git a/static/usage/v8/input/set-focus/demo.html b/static/usage/v8/input/set-focus/demo.html new file mode 100644 index 00000000000..7ebd39bec3a --- /dev/null +++ b/static/usage/v8/input/set-focus/demo.html @@ -0,0 +1,33 @@ + + + + + + setFocus + + + + + + + + + + + + Click to set focus + + + + + + + + + + diff --git a/static/usage/v8/input/set-focus/index.md b/static/usage/v8/input/set-focus/index.md new file mode 100644 index 00000000000..4728673f041 --- /dev/null +++ b/static/usage/v8/input/set-focus/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import angular from './angular.md'; +import vue from './vue.md'; +import react from './react.md'; + + diff --git a/static/usage/v8/input/set-focus/javascript.md b/static/usage/v8/input/set-focus/javascript.md new file mode 100644 index 00000000000..1d5a5b4cfbc --- /dev/null +++ b/static/usage/v8/input/set-focus/javascript.md @@ -0,0 +1,17 @@ +```html + + + Click to set focus + + + + + + + +``` diff --git a/static/usage/v8/input/set-focus/react.md b/static/usage/v8/input/set-focus/react.md new file mode 100644 index 00000000000..023abbd8968 --- /dev/null +++ b/static/usage/v8/input/set-focus/react.md @@ -0,0 +1,21 @@ +```tsx +import React, { useRef } from 'react'; +import { IonInput, IonItem, IonList, IonButton } from '@ionic/react'; + +const Home = () => { + const input = useRef(null); + + return ( + + + input.current?.setFocus()}>Click to set focus + + + + + + ); +}; + +export default Home; +``` diff --git a/static/usage/v8/input/set-focus/vue.md b/static/usage/v8/input/set-focus/vue.md new file mode 100644 index 00000000000..84ee1879142 --- /dev/null +++ b/static/usage/v8/input/set-focus/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v8/input/theming/colors/angular.md b/static/usage/v8/input/theming/colors/angular.md new file mode 100644 index 00000000000..88a63e9a102 --- /dev/null +++ b/static/usage/v8/input/theming/colors/angular.md @@ -0,0 +1,11 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v8/input/theming/colors/demo.html b/static/usage/v8/input/theming/colors/demo.html new file mode 100644 index 00000000000..dd204e4074a --- /dev/null +++ b/static/usage/v8/input/theming/colors/demo.html @@ -0,0 +1,42 @@ + + + + + + Input + + + + + + + + + + + +
+ + + + + + + + + +
+ + + + diff --git a/static/usage/v8/input/theming/colors/index.md b/static/usage/v8/input/theming/colors/index.md new file mode 100644 index 00000000000..17c29f994c3 --- /dev/null +++ b/static/usage/v8/input/theming/colors/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/input/theming/colors/javascript.md b/static/usage/v8/input/theming/colors/javascript.md new file mode 100644 index 00000000000..88a63e9a102 --- /dev/null +++ b/static/usage/v8/input/theming/colors/javascript.md @@ -0,0 +1,11 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v8/input/theming/colors/react.md b/static/usage/v8/input/theming/colors/react.md new file mode 100644 index 00000000000..7242cd393d6 --- /dev/null +++ b/static/usage/v8/input/theming/colors/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonInput } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/theming/colors/vue.md b/static/usage/v8/input/theming/colors/vue.md new file mode 100644 index 00000000000..e9d3a4e0ef4 --- /dev/null +++ b/static/usage/v8/input/theming/colors/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v8/input/theming/css-properties/angular/example_component_css.md b/static/usage/v8/input/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..4885a193f87 --- /dev/null +++ b/static/usage/v8/input/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,13 @@ +```css +ion-input.custom { + --background: #373737; + --color: #fff; + --placeholder-color: #ddd; + --placeholder-opacity: 0.8; + + --padding-bottom: 10px; + --padding-end: 10px; + --padding-start: 10px; + --padding-top: 10px; +} +``` diff --git a/static/usage/v8/input/theming/css-properties/angular/example_component_html.md b/static/usage/v8/input/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..243bb91401b --- /dev/null +++ b/static/usage/v8/input/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + +``` diff --git a/static/usage/v8/input/theming/css-properties/angular/global_css.md b/static/usage/v8/input/theming/css-properties/angular/global_css.md new file mode 100644 index 00000000000..ba3ec022284 --- /dev/null +++ b/static/usage/v8/input/theming/css-properties/angular/global_css.md @@ -0,0 +1,14 @@ +```css +/** + * Since we are styling elements inside of ion-input + * we need to move this CSS to a global stylesheet. Otherwise, + * Angular components with encapsulation enabled will add + * scoped style attributes to these selectors. + */ +ion-input.custom.ios .input-bottom .helper-text, +ion-input.custom.ios .input-bottom .counter, +ion-input.custom.md .input-bottom .helper-text, +ion-input.custom.md .input-bottom .counter { + color: var(--ion-color-primary); +} +``` diff --git a/static/usage/v8/input/theming/css-properties/demo.html b/static/usage/v8/input/theming/css-properties/demo.html new file mode 100644 index 00000000000..8a6088ee7a3 --- /dev/null +++ b/static/usage/v8/input/theming/css-properties/demo.html @@ -0,0 +1,55 @@ + + + + + + Input + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/input/theming/css-properties/index.md b/static/usage/v8/input/theming/css-properties/index.md new file mode 100644 index 00000000000..b87bfe5194c --- /dev/null +++ b/static/usage/v8/input/theming/css-properties/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/input/theming/css-properties/javascript.md b/static/usage/v8/input/theming/css-properties/javascript.md new file mode 100644 index 00000000000..5f81aae2da0 --- /dev/null +++ b/static/usage/v8/input/theming/css-properties/javascript.md @@ -0,0 +1,31 @@ +```html + + + +``` diff --git a/static/usage/v8/input/theming/css-properties/react/main_css.md b/static/usage/v8/input/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..6dd25be2d40 --- /dev/null +++ b/static/usage/v8/input/theming/css-properties/react/main_css.md @@ -0,0 +1,20 @@ +```css +ion-input.custom { + --background: #373737; + --color: #fff; + --placeholder-color: #ddd; + --placeholder-opacity: 0.8; + + --padding-bottom: 10px; + --padding-end: 10px; + --padding-start: 10px; + --padding-top: 10px; +} + +ion-input.custom.ios .input-bottom .helper-text, +ion-input.custom.ios .input-bottom .counter, +ion-input.custom.md .input-bottom .helper-text, +ion-input.custom.md .input-bottom .counter { + color: var(--ion-color-primary); +} +``` diff --git a/static/usage/v8/input/theming/css-properties/react/main_tsx.md b/static/usage/v8/input/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..8206bb3161e --- /dev/null +++ b/static/usage/v8/input/theming/css-properties/react/main_tsx.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonInput } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/theming/css-properties/vue.md b/static/usage/v8/input/theming/css-properties/vue.md new file mode 100644 index 00000000000..77ab74eeeab --- /dev/null +++ b/static/usage/v8/input/theming/css-properties/vue.md @@ -0,0 +1,42 @@ +```html + + + + + +``` diff --git a/static/usage/v8/input/types/angular.md b/static/usage/v8/input/types/angular.md new file mode 100644 index 00000000000..ff696b22cd8 --- /dev/null +++ b/static/usage/v8/input/types/angular.md @@ -0,0 +1,25 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/input/types/demo.html b/static/usage/v8/input/types/demo.html new file mode 100644 index 00000000000..f1e21f6bea9 --- /dev/null +++ b/static/usage/v8/input/types/demo.html @@ -0,0 +1,48 @@ + + + + + + Input + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/input/types/index.md b/static/usage/v8/input/types/index.md new file mode 100644 index 00000000000..7640d15d59d --- /dev/null +++ b/static/usage/v8/input/types/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/input/types/javascript.md b/static/usage/v8/input/types/javascript.md new file mode 100644 index 00000000000..ff696b22cd8 --- /dev/null +++ b/static/usage/v8/input/types/javascript.md @@ -0,0 +1,25 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/input/types/react.md b/static/usage/v8/input/types/react.md new file mode 100644 index 00000000000..e5534ec2e1e --- /dev/null +++ b/static/usage/v8/input/types/react.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/input/types/vue.md b/static/usage/v8/input/types/vue.md new file mode 100644 index 00000000000..752f60c183f --- /dev/null +++ b/static/usage/v8/input/types/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v8/item-divider/basic/angular.md b/static/usage/v8/item-divider/basic/angular.md new file mode 100644 index 00000000000..35dccbdbc88 --- /dev/null +++ b/static/usage/v8/item-divider/basic/angular.md @@ -0,0 +1,35 @@ +```html + + + + Section A + + + + A1 + + + A2 + + + A3 + + + + + + Section B + + + + B1 + + + B2 + + + B3 + + + +``` diff --git a/static/usage/v8/item-divider/basic/demo.html b/static/usage/v8/item-divider/basic/demo.html new file mode 100644 index 00000000000..77ff85117d6 --- /dev/null +++ b/static/usage/v8/item-divider/basic/demo.html @@ -0,0 +1,60 @@ + + + + + + Item Divider + + + + + + + + + + + +
+ + + + Section A + + + + A1 + + + A2 + + + A3 + + + + + + Section B + + + + B1 + + + B2 + + + B3 + + + +
+ + + + diff --git a/static/usage/v8/item-divider/basic/index.md b/static/usage/v8/item-divider/basic/index.md new file mode 100644 index 00000000000..9c8a9e292be --- /dev/null +++ b/static/usage/v8/item-divider/basic/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item-divider/basic/javascript.md b/static/usage/v8/item-divider/basic/javascript.md new file mode 100644 index 00000000000..35dccbdbc88 --- /dev/null +++ b/static/usage/v8/item-divider/basic/javascript.md @@ -0,0 +1,35 @@ +```html + + + + Section A + + + + A1 + + + A2 + + + A3 + + + + + + Section B + + + + B1 + + + B2 + + + B3 + + + +``` diff --git a/static/usage/v8/item-divider/basic/react.md b/static/usage/v8/item-divider/basic/react.md new file mode 100644 index 00000000000..14ad85b1c82 --- /dev/null +++ b/static/usage/v8/item-divider/basic/react.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + Section A + + + + A1 + + + A2 + + + A3 + + + + + + Section B + + + + B1 + + + B2 + + + B3 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item-divider/basic/vue.md b/static/usage/v8/item-divider/basic/vue.md new file mode 100644 index 00000000000..22c9565c278 --- /dev/null +++ b/static/usage/v8/item-divider/basic/vue.md @@ -0,0 +1,46 @@ +```html + + + +``` diff --git a/static/usage/v8/item-divider/theming/colors/angular.md b/static/usage/v8/item-divider/theming/colors/angular.md new file mode 100644 index 00000000000..e23070ec5a0 --- /dev/null +++ b/static/usage/v8/item-divider/theming/colors/angular.md @@ -0,0 +1,32 @@ +```html + + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +``` diff --git a/static/usage/v8/item-divider/theming/colors/demo.html b/static/usage/v8/item-divider/theming/colors/demo.html new file mode 100644 index 00000000000..b325636c866 --- /dev/null +++ b/static/usage/v8/item-divider/theming/colors/demo.html @@ -0,0 +1,57 @@ + + + + + + Item Divider + + + + + + + + + + + +
+ + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +
+ + + + diff --git a/static/usage/v8/item-divider/theming/colors/index.md b/static/usage/v8/item-divider/theming/colors/index.md new file mode 100644 index 00000000000..a728b84c5db --- /dev/null +++ b/static/usage/v8/item-divider/theming/colors/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item-divider/theming/colors/javascript.md b/static/usage/v8/item-divider/theming/colors/javascript.md new file mode 100644 index 00000000000..e23070ec5a0 --- /dev/null +++ b/static/usage/v8/item-divider/theming/colors/javascript.md @@ -0,0 +1,32 @@ +```html + + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +``` diff --git a/static/usage/v8/item-divider/theming/colors/react.md b/static/usage/v8/item-divider/theming/colors/react.md new file mode 100644 index 00000000000..7bf4cd2193f --- /dev/null +++ b/static/usage/v8/item-divider/theming/colors/react.md @@ -0,0 +1,42 @@ +```tsx +import React from 'react'; +import { IonItemDivider, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item-divider/theming/colors/vue.md b/static/usage/v8/item-divider/theming/colors/vue.md new file mode 100644 index 00000000000..981f99a09da --- /dev/null +++ b/static/usage/v8/item-divider/theming/colors/vue.md @@ -0,0 +1,43 @@ +```html + + + +``` diff --git a/static/usage/v8/item-divider/theming/css-properties/angular/example_component_css.md b/static/usage/v8/item-divider/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..7c29ebdd846 --- /dev/null +++ b/static/usage/v8/item-divider/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +ion-item-divider { + --background: #19422d; + --color: #fff; + + --padding-top: 10px; + --padding-bottom: 10px; + --padding-start: 20px; + --padding-end: 20px; +} +``` diff --git a/static/usage/v8/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v8/item-divider/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..172fdad114f --- /dev/null +++ b/static/usage/v8/item-divider/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Item Divider + +``` diff --git a/static/usage/v8/item-divider/theming/css-properties/demo.html b/static/usage/v8/item-divider/theming/css-properties/demo.html new file mode 100644 index 00000000000..79c65b82ac8 --- /dev/null +++ b/static/usage/v8/item-divider/theming/css-properties/demo.html @@ -0,0 +1,36 @@ + + + + + + Item Divider + + + + + + + + + + + +
+ + Item Divider + +
+ + + + diff --git a/static/usage/v8/item-divider/theming/css-properties/index.md b/static/usage/v8/item-divider/theming/css-properties/index.md new file mode 100644 index 00000000000..f425706d75d --- /dev/null +++ b/static/usage/v8/item-divider/theming/css-properties/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/item-divider/theming/css-properties/javascript.md b/static/usage/v8/item-divider/theming/css-properties/javascript.md new file mode 100644 index 00000000000..0c0cdc26f55 --- /dev/null +++ b/static/usage/v8/item-divider/theming/css-properties/javascript.md @@ -0,0 +1,17 @@ +```html + + + + Item Divider + +``` diff --git a/static/usage/v8/item-divider/theming/css-properties/react/main_css.md b/static/usage/v8/item-divider/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..7c29ebdd846 --- /dev/null +++ b/static/usage/v8/item-divider/theming/css-properties/react/main_css.md @@ -0,0 +1,11 @@ +```css +ion-item-divider { + --background: #19422d; + --color: #fff; + + --padding-top: 10px; + --padding-bottom: 10px; + --padding-start: 20px; + --padding-end: 20px; +} +``` diff --git a/static/usage/v8/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v8/item-divider/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..b3083033541 --- /dev/null +++ b/static/usage/v8/item-divider/theming/css-properties/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonItemDivider, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + Item Divider + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item-divider/theming/css-properties/vue.md b/static/usage/v8/item-divider/theming/css-properties/vue.md new file mode 100644 index 00000000000..950e3775d83 --- /dev/null +++ b/static/usage/v8/item-divider/theming/css-properties/vue.md @@ -0,0 +1,28 @@ +```html + + + + + +``` diff --git a/static/usage/v8/item-group/basic/angular.md b/static/usage/v8/item-group/basic/angular.md new file mode 100644 index 00000000000..8ea0ff7cef9 --- /dev/null +++ b/static/usage/v8/item-group/basic/angular.md @@ -0,0 +1,33 @@ +```html + + + A + + + + Angola + + + Argentina + + + Armenia + + + + + + B + + + + Bangladesh + + + Belarus + + + Belgium + + +``` diff --git a/static/usage/v8/item-group/basic/demo.html b/static/usage/v8/item-group/basic/demo.html new file mode 100644 index 00000000000..80dc2487456 --- /dev/null +++ b/static/usage/v8/item-group/basic/demo.html @@ -0,0 +1,58 @@ + + + + + + Item Group + + + + + + + + + + + +
+ + + A + + + + Angola + + + Argentina + + + Armenia + + + + + + B + + + + Bangladesh + + + Belarus + + + Belgium + + +
+ + + + diff --git a/static/usage/v8/item-group/basic/index.md b/static/usage/v8/item-group/basic/index.md new file mode 100644 index 00000000000..a752ec62278 --- /dev/null +++ b/static/usage/v8/item-group/basic/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item-group/basic/javascript.md b/static/usage/v8/item-group/basic/javascript.md new file mode 100644 index 00000000000..8ea0ff7cef9 --- /dev/null +++ b/static/usage/v8/item-group/basic/javascript.md @@ -0,0 +1,33 @@ +```html + + + A + + + + Angola + + + Argentina + + + Armenia + + + + + + B + + + + Bangladesh + + + Belarus + + + Belgium + + +``` diff --git a/static/usage/v8/item-group/basic/react.md b/static/usage/v8/item-group/basic/react.md new file mode 100644 index 00000000000..ddb3f381230 --- /dev/null +++ b/static/usage/v8/item-group/basic/react.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + + A + + + + Angola + + + Argentina + + + Armenia + + + + + + B + + + + Bangladesh + + + Belarus + + + Belgium + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item-group/basic/vue.md b/static/usage/v8/item-group/basic/vue.md new file mode 100644 index 00000000000..edba72f0e69 --- /dev/null +++ b/static/usage/v8/item-group/basic/vue.md @@ -0,0 +1,44 @@ +```html + + + +``` diff --git a/static/usage/v8/item-group/sliding-items/angular.md b/static/usage/v8/item-group/sliding-items/angular.md new file mode 100644 index 00000000000..2708fde7acc --- /dev/null +++ b/static/usage/v8/item-group/sliding-items/angular.md @@ -0,0 +1,67 @@ +```html + + + Fruits + + + + + Grapes + + + Favorite + + + + + + Apples + + + Favorite + + + + + + Bananas + + + Favorite + + + + + + + Vegetables + + + + + Carrots + + + Favorite + + + + + + Broccoli + + + Favorite + + + + + + Celery + + + Favorite + + + +``` diff --git a/static/usage/v8/item-group/sliding-items/demo.html b/static/usage/v8/item-group/sliding-items/demo.html new file mode 100644 index 00000000000..689a26c2c24 --- /dev/null +++ b/static/usage/v8/item-group/sliding-items/demo.html @@ -0,0 +1,92 @@ + + + + + + Item Group + + + + + + + + + + + +
+ + + Fruits + + + + + Grapes + + + Favorite + + + + + + Apples + + + Favorite + + + + + + Bananas + + + Favorite + + + + + + + Vegetables + + + + + Carrots + + + Favorite + + + + + + Broccoli + + + Favorite + + + + + + Celery + + + Favorite + + + +
+ + + + diff --git a/static/usage/v8/item-group/sliding-items/index.md b/static/usage/v8/item-group/sliding-items/index.md new file mode 100644 index 00000000000..39983e2a9bc --- /dev/null +++ b/static/usage/v8/item-group/sliding-items/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item-group/sliding-items/javascript.md b/static/usage/v8/item-group/sliding-items/javascript.md new file mode 100644 index 00000000000..2708fde7acc --- /dev/null +++ b/static/usage/v8/item-group/sliding-items/javascript.md @@ -0,0 +1,67 @@ +```html + + + Fruits + + + + + Grapes + + + Favorite + + + + + + Apples + + + Favorite + + + + + + Bananas + + + Favorite + + + + + + + Vegetables + + + + + Carrots + + + Favorite + + + + + + Broccoli + + + Favorite + + + + + + Celery + + + Favorite + + + +``` diff --git a/static/usage/v8/item-group/sliding-items/react.md b/static/usage/v8/item-group/sliding-items/react.md new file mode 100644 index 00000000000..716935f065c --- /dev/null +++ b/static/usage/v8/item-group/sliding-items/react.md @@ -0,0 +1,85 @@ +```tsx +import React from 'react'; +import { + IonItem, + IonItemDivider, + IonItemGroup, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, +} from '@ionic/react'; + +function Example() { + return ( + <> + + + Fruits + + + + + Grapes + + + Favorite + + + + + + Apples + + + Favorite + + + + + + Bananas + + + Favorite + + + + + + + Vegetables + + + + + Carrots + + + Favorite + + + + + + Broccoli + + + Favorite + + + + + + Celery + + + Favorite + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item-group/sliding-items/vue.md b/static/usage/v8/item-group/sliding-items/vue.md new file mode 100644 index 00000000000..43109034598 --- /dev/null +++ b/static/usage/v8/item-group/sliding-items/vue.md @@ -0,0 +1,86 @@ +```html + + + +``` diff --git a/static/usage/v8/item-sliding/basic/angular.md b/static/usage/v8/item-sliding/basic/angular.md new file mode 100644 index 00000000000..a5404da4cb4 --- /dev/null +++ b/static/usage/v8/item-sliding/basic/angular.md @@ -0,0 +1,39 @@ +```html + + + + Sliding Item with End Options + + + + Favorite + Delete + + + + + + Archive + + + + Sliding Item with Start Options + + + + + + Archive + + + + Sliding Item with Options on Both Sides + + + + Favorite + Delete + + + +``` diff --git a/static/usage/v8/item-sliding/basic/demo.html b/static/usage/v8/item-sliding/basic/demo.html new file mode 100644 index 00000000000..2349be859a6 --- /dev/null +++ b/static/usage/v8/item-sliding/basic/demo.html @@ -0,0 +1,64 @@ + + + + + + Item Sliding + + + + + + + + + + + +
+ + + + Sliding Item with End Options + + + + Favorite + Delete + + + + + + Archive + + + + Sliding Item with Start Options + + + + + + Archive + + + + Sliding Item with Options on Both Sides + + + + Favorite + Delete + + + +
+ + + + diff --git a/static/usage/v8/item-sliding/basic/index.md b/static/usage/v8/item-sliding/basic/index.md new file mode 100644 index 00000000000..a75eff57b64 --- /dev/null +++ b/static/usage/v8/item-sliding/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item-sliding/basic/javascript.md b/static/usage/v8/item-sliding/basic/javascript.md new file mode 100644 index 00000000000..a5404da4cb4 --- /dev/null +++ b/static/usage/v8/item-sliding/basic/javascript.md @@ -0,0 +1,39 @@ +```html + + + + Sliding Item with End Options + + + + Favorite + Delete + + + + + + Archive + + + + Sliding Item with Start Options + + + + + + Archive + + + + Sliding Item with Options on Both Sides + + + + Favorite + Delete + + + +``` diff --git a/static/usage/v8/item-sliding/basic/react.md b/static/usage/v8/item-sliding/basic/react.md new file mode 100644 index 00000000000..d9b45125574 --- /dev/null +++ b/static/usage/v8/item-sliding/basic/react.md @@ -0,0 +1,47 @@ +```tsx +import React from 'react'; +import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + Sliding Item with End Options + + + + Favorite + Delete + + + + + + Archive + + + + Sliding Item with Start Options + + + + + + Archive + + + + Sliding Item with Options on Both Sides + + + + Favorite + Delete + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item-sliding/basic/vue.md b/static/usage/v8/item-sliding/basic/vue.md new file mode 100644 index 00000000000..f6f8631a2bd --- /dev/null +++ b/static/usage/v8/item-sliding/basic/vue.md @@ -0,0 +1,50 @@ +```html + + + +``` diff --git a/static/usage/v8/item-sliding/expandable/angular.md b/static/usage/v8/item-sliding/expandable/angular.md new file mode 100644 index 00000000000..b7e37fa57c7 --- /dev/null +++ b/static/usage/v8/item-sliding/expandable/angular.md @@ -0,0 +1,18 @@ +```html + + + + Archive + + + + Sliding Item with Expandable Options + + + + Favorite + Delete + + + +``` diff --git a/static/usage/v8/item-sliding/expandable/demo.html b/static/usage/v8/item-sliding/expandable/demo.html new file mode 100644 index 00000000000..28790e13338 --- /dev/null +++ b/static/usage/v8/item-sliding/expandable/demo.html @@ -0,0 +1,43 @@ + + + + + + Item Sliding + + + + + + + + + + + +
+ + + + Archive + + + + Sliding Item with Expandable Options + + + + Favorite + Delete + + + +
+ + + + diff --git a/static/usage/v8/item-sliding/expandable/index.md b/static/usage/v8/item-sliding/expandable/index.md new file mode 100644 index 00000000000..f794264ce0f --- /dev/null +++ b/static/usage/v8/item-sliding/expandable/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item-sliding/expandable/javascript.md b/static/usage/v8/item-sliding/expandable/javascript.md new file mode 100644 index 00000000000..b7e37fa57c7 --- /dev/null +++ b/static/usage/v8/item-sliding/expandable/javascript.md @@ -0,0 +1,18 @@ +```html + + + + Archive + + + + Sliding Item with Expandable Options + + + + Favorite + Delete + + + +``` diff --git a/static/usage/v8/item-sliding/expandable/react.md b/static/usage/v8/item-sliding/expandable/react.md new file mode 100644 index 00000000000..6879f80f7c1 --- /dev/null +++ b/static/usage/v8/item-sliding/expandable/react.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + Archive + + + + + Sliding Item with Expandable Options + + + + Favorite + + Delete + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item-sliding/expandable/vue.md b/static/usage/v8/item-sliding/expandable/vue.md new file mode 100644 index 00000000000..fc9ee8c25ca --- /dev/null +++ b/static/usage/v8/item-sliding/expandable/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v8/item-sliding/icons/angular.md b/static/usage/v8/item-sliding/icons/angular.md new file mode 100644 index 00000000000..6556b41e94b --- /dev/null +++ b/static/usage/v8/item-sliding/icons/angular.md @@ -0,0 +1,120 @@ +```html + + + + + + + + + + Sliding Item with Icons Only + + + + + + + + + + + + + + + + + Archive + + + + + Sliding Item with Start Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with End Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Top Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Bottom Icons + + + + + + Favorite + + + + Delete + + + + +``` diff --git a/static/usage/v8/item-sliding/icons/demo.html b/static/usage/v8/item-sliding/icons/demo.html new file mode 100644 index 00000000000..90179c174c4 --- /dev/null +++ b/static/usage/v8/item-sliding/icons/demo.html @@ -0,0 +1,146 @@ + + + + + + Item Sliding + + + + + + + + + + + +
+ + + + + + + + + + Sliding Item with Icons Only + + + + + + + + + + + + + + + + + Archive + + + + + Sliding Item with Start Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with End Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Top Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Bottom Icons + + + + + + Favorite + + + + Delete + + + + +
+ + + + diff --git a/static/usage/v8/item-sliding/icons/index.md b/static/usage/v8/item-sliding/icons/index.md new file mode 100644 index 00000000000..9b6b42564b7 --- /dev/null +++ b/static/usage/v8/item-sliding/icons/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item-sliding/icons/javascript.md b/static/usage/v8/item-sliding/icons/javascript.md new file mode 100644 index 00000000000..6556b41e94b --- /dev/null +++ b/static/usage/v8/item-sliding/icons/javascript.md @@ -0,0 +1,120 @@ +```html + + + + + + + + + + Sliding Item with Icons Only + + + + + + + + + + + + + + + + + Archive + + + + + Sliding Item with Start Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with End Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Top Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Bottom Icons + + + + + + Favorite + + + + Delete + + + + +``` diff --git a/static/usage/v8/item-sliding/icons/react.md b/static/usage/v8/item-sliding/icons/react.md new file mode 100644 index 00000000000..8961a06b352 --- /dev/null +++ b/static/usage/v8/item-sliding/icons/react.md @@ -0,0 +1,129 @@ +```tsx +import React from 'react'; +import { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react'; +import { archive, heart, trash } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + Sliding Item with Icons Only + + + + + + + + + + + + + + + + + Archive + + + + + Sliding Item with Start Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with End Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Top Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Bottom Icons + + + + + + Favorite + + + + Delete + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item-sliding/icons/vue.md b/static/usage/v8/item-sliding/icons/vue.md new file mode 100644 index 00000000000..7f10c0eaa51 --- /dev/null +++ b/static/usage/v8/item-sliding/icons/vue.md @@ -0,0 +1,135 @@ +```html + + + +``` diff --git a/static/usage/v8/item/basic/angular.md b/static/usage/v8/item/basic/angular.md new file mode 100644 index 00000000000..b975f267d90 --- /dev/null +++ b/static/usage/v8/item/basic/angular.md @@ -0,0 +1,40 @@ +```html + + Basic Item + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + +

H1 Heading

+

Paragraph

+ + + + + +

H2 Heading

+

Paragraph

+ + + + + +

H3 Heading

+

Paragraph

+ + +``` diff --git a/static/usage/v8/item/basic/demo.html b/static/usage/v8/item/basic/demo.html new file mode 100644 index 00000000000..9eccd18a724 --- /dev/null +++ b/static/usage/v8/item/basic/demo.html @@ -0,0 +1,65 @@ + + + + + + Item + + + + + + + + + + + +
+ + Basic Item + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + +

H1 Heading

+

Paragraph

+ + + + + +

H2 Heading

+

Paragraph

+ + + + + +

H3 Heading

+

Paragraph

+ + +
+ + + + diff --git a/static/usage/v8/item/basic/index.md b/static/usage/v8/item/basic/index.md new file mode 100644 index 00000000000..f5c330d7b40 --- /dev/null +++ b/static/usage/v8/item/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item/basic/javascript.md b/static/usage/v8/item/basic/javascript.md new file mode 100644 index 00000000000..b975f267d90 --- /dev/null +++ b/static/usage/v8/item/basic/javascript.md @@ -0,0 +1,40 @@ +```html + + Basic Item + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + +

H1 Heading

+

Paragraph

+ + + + + +

H2 Heading

+

Paragraph

+ + + + + +

H3 Heading

+

Paragraph

+ + +``` diff --git a/static/usage/v8/item/basic/react.md b/static/usage/v8/item/basic/react.md new file mode 100644 index 00000000000..6154239cbf1 --- /dev/null +++ b/static/usage/v8/item/basic/react.md @@ -0,0 +1,50 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + Basic Item + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + +

H1 Heading

+

Paragraph

+ + + + + +

H2 Heading

+

Paragraph

+ + + + + +

H3 Heading

+

Paragraph

+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/basic/vue.md b/static/usage/v8/item/basic/vue.md new file mode 100644 index 00000000000..37b32f7c2ca --- /dev/null +++ b/static/usage/v8/item/basic/vue.md @@ -0,0 +1,51 @@ +```html + + + +``` diff --git a/static/usage/v8/item/buttons/angular.md b/static/usage/v8/item/buttons/angular.md new file mode 100644 index 00000000000..4d77ff8b9d8 --- /dev/null +++ b/static/usage/v8/item/buttons/angular.md @@ -0,0 +1,36 @@ +```html + + Start + Default Buttons + End + + + + + Start + + + Buttons with Icons + + + End + + + + + + + + Icon only Buttons + + + + + + + Button Sizes + Small + Default + Large + +``` diff --git a/static/usage/v8/item/buttons/demo.html b/static/usage/v8/item/buttons/demo.html new file mode 100644 index 00000000000..2e5d6c89de5 --- /dev/null +++ b/static/usage/v8/item/buttons/demo.html @@ -0,0 +1,62 @@ + + + + + + Item + + + + + + + + + + + +
+ + Start + Default Buttons + End + + + + + Start + + + Buttons with Icons + + + End + + + + + + + + Icon only Buttons + + + + + + + Button Sizes + Small + Default + Large + +
+ + + + diff --git a/static/usage/v8/item/buttons/index.md b/static/usage/v8/item/buttons/index.md new file mode 100644 index 00000000000..dc0db44f71d --- /dev/null +++ b/static/usage/v8/item/buttons/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item/buttons/javascript.md b/static/usage/v8/item/buttons/javascript.md new file mode 100644 index 00000000000..4d77ff8b9d8 --- /dev/null +++ b/static/usage/v8/item/buttons/javascript.md @@ -0,0 +1,36 @@ +```html + + Start + Default Buttons + End + + + + + Start + + + Buttons with Icons + + + End + + + + + + + + Icon only Buttons + + + + + + + Button Sizes + Small + Default + Large + +``` diff --git a/static/usage/v8/item/buttons/react.md b/static/usage/v8/item/buttons/react.md new file mode 100644 index 00000000000..fda29c7f11a --- /dev/null +++ b/static/usage/v8/item/buttons/react.md @@ -0,0 +1,53 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/react'; +import { home, navigate, star } from 'ionicons/icons'; + +function Example() { + return ( + <> + + Start + Default Buttons + End + + + + + Start + + + Buttons with Icons + + + End + + + + + + + + Icon only Buttons + + + + + + + Button Sizes + + Small + + + Default + + + Large + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/buttons/vue.md b/static/usage/v8/item/buttons/vue.md new file mode 100644 index 00000000000..8680f189472 --- /dev/null +++ b/static/usage/v8/item/buttons/vue.md @@ -0,0 +1,51 @@ +```html + + + +``` diff --git a/static/usage/v8/item/clickable/angular.md b/static/usage/v8/item/clickable/angular.md new file mode 100644 index 00000000000..7e8ac266eb2 --- /dev/null +++ b/static/usage/v8/item/clickable/angular.md @@ -0,0 +1,17 @@ +```html + + Anchor Item + + + + Disabled Anchor Item + + + + Button Item + + + + Disabled Button Item + +``` diff --git a/static/usage/v8/item/clickable/demo.html b/static/usage/v8/item/clickable/demo.html new file mode 100644 index 00000000000..58525e975ec --- /dev/null +++ b/static/usage/v8/item/clickable/demo.html @@ -0,0 +1,42 @@ + + + + + + Item + + + + + + + + + + + +
+ + Anchor Item + + + + Disabled Anchor Item + + + + Button Item + + + + Disabled Button Item + +
+ + + + diff --git a/static/usage/v8/item/clickable/index.md b/static/usage/v8/item/clickable/index.md new file mode 100644 index 00000000000..11fe249d0c5 --- /dev/null +++ b/static/usage/v8/item/clickable/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item/clickable/javascript.md b/static/usage/v8/item/clickable/javascript.md new file mode 100644 index 00000000000..7e8ac266eb2 --- /dev/null +++ b/static/usage/v8/item/clickable/javascript.md @@ -0,0 +1,17 @@ +```html + + Anchor Item + + + + Disabled Anchor Item + + + + Button Item + + + + Disabled Button Item + +``` diff --git a/static/usage/v8/item/clickable/react.md b/static/usage/v8/item/clickable/react.md new file mode 100644 index 00000000000..c83845b65c7 --- /dev/null +++ b/static/usage/v8/item/clickable/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + Anchor Item + + + + Disabled Anchor Item + + + + Button Item + + + + Disabled Button Item + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/clickable/vue.md b/static/usage/v8/item/clickable/vue.md new file mode 100644 index 00000000000..1af8f362758 --- /dev/null +++ b/static/usage/v8/item/clickable/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v8/item/content-types/actions/angular.md b/static/usage/v8/item/content-types/actions/angular.md new file mode 100644 index 00000000000..f70c70b90c4 --- /dev/null +++ b/static/usage/v8/item/content-types/actions/angular.md @@ -0,0 +1,150 @@ +```html + + + Example + + + + + + + + Rick Astley + + + + + + + + + + + + + + + + + + Leeroy Jenkins + + + + + + + + + + + + + + + + + + Ionitron + + + + + + + + + + + + + + + + + + Wall-E + + + + + + + + + + + + + + + + + + Cortana + + + + + + + + + + + + + + + + + + Bender + + + + + + + + + + + + + + + + + + BB-8 + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/item/content-types/actions/demo.html b/static/usage/v8/item/content-types/actions/demo.html new file mode 100644 index 00000000000..3a39123503f --- /dev/null +++ b/static/usage/v8/item/content-types/actions/demo.html @@ -0,0 +1,165 @@ + + + + + + Item + + + + + + + + + + + Example + + + + + + + + Rick Astley + + + + + + + + + + + + + + + + + + Leeroy Jenkins + + + + + + + + + + + + + + + + + + Ionitron + + + + + + + + + + + + + + + + + + Wall-E + + + + + + + + + + + + + + + + + + Cortana + + + + + + + + + + + + + + + + + + Bender + + + + + + + + + + + + + + + + + + BB-8 + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v8/item/content-types/actions/index.md b/static/usage/v8/item/content-types/actions/index.md new file mode 100644 index 00000000000..d2977e414d2 --- /dev/null +++ b/static/usage/v8/item/content-types/actions/index.md @@ -0,0 +1,19 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item/content-types/actions/javascript.md b/static/usage/v8/item/content-types/actions/javascript.md new file mode 100644 index 00000000000..5d9e403c93a --- /dev/null +++ b/static/usage/v8/item/content-types/actions/javascript.md @@ -0,0 +1,150 @@ +```html + + + Example + + + + + + + + Rick Astley + + + + + + + + + + + + + + + + + + Leeroy Jenkins + + + + + + + + + + + + + + + + + + Ionitron + + + + + + + + + + + + + + + + + + Wall-E + + + + + + + + + + + + + + + + + + Cortana + + + + + + + + + + + + + + + + + + Bender + + + + + + + + + + + + + + + + + + BB-8 + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/item/content-types/actions/react.md b/static/usage/v8/item/content-types/actions/react.md new file mode 100644 index 00000000000..59699517fb9 --- /dev/null +++ b/static/usage/v8/item/content-types/actions/react.md @@ -0,0 +1,174 @@ +```tsx +import React from 'react'; +import { + IonAvatar, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonItemOptions, + IonItemOption, + IonItemSliding, + IonLabel, + IonList, + IonTitle, + IonToolbar, +} from '@ionic/react'; +import { pin, share, trash } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + Example + + + + + + + + Rick Astley + + + + + + + + + + + + + + + + + + Leeroy Jenkins + + + + + + + + + + + + + + + + + + Ionitron + + + + + + + + + + + + + + + + + + Wall-E + + + + + + + + + + + + + + + + + + Cortana + + + + + + + + + + + + + + + + + + Bender + + + + + + + + + + + + + + + + + + BB-8 + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/content-types/actions/vue.md b/static/usage/v8/item/content-types/actions/vue.md new file mode 100644 index 00000000000..bef520f8f19 --- /dev/null +++ b/static/usage/v8/item/content-types/actions/vue.md @@ -0,0 +1,191 @@ +```html + + + +``` diff --git a/static/usage/v8/item/content-types/controls/angular.md b/static/usage/v8/item/content-types/controls/angular.md new file mode 100644 index 00000000000..2275f6468cd --- /dev/null +++ b/static/usage/v8/item/content-types/controls/angular.md @@ -0,0 +1,39 @@ +```html + + + Example + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/item/content-types/controls/demo.html b/static/usage/v8/item/content-types/controls/demo.html new file mode 100644 index 00000000000..474097b1616 --- /dev/null +++ b/static/usage/v8/item/content-types/controls/demo.html @@ -0,0 +1,54 @@ + + + + + + Item + + + + + + + + + + + Example + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v8/item/content-types/controls/index.md b/static/usage/v8/item/content-types/controls/index.md new file mode 100644 index 00000000000..8c878934a01 --- /dev/null +++ b/static/usage/v8/item/content-types/controls/index.md @@ -0,0 +1,19 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item/content-types/controls/javascript.md b/static/usage/v8/item/content-types/controls/javascript.md new file mode 100644 index 00000000000..421c9ff6924 --- /dev/null +++ b/static/usage/v8/item/content-types/controls/javascript.md @@ -0,0 +1,39 @@ +```html + + + Example + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/item/content-types/controls/react.md b/static/usage/v8/item/content-types/controls/react.md new file mode 100644 index 00000000000..fef330390b1 --- /dev/null +++ b/static/usage/v8/item/content-types/controls/react.md @@ -0,0 +1,49 @@ +```tsx +import React from 'react'; +import { IonCheckbox, IonContent, IonHeader, IonInput, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Example + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/content-types/controls/vue.md b/static/usage/v8/item/content-types/controls/vue.md new file mode 100644 index 00000000000..4c5e5b8bf76 --- /dev/null +++ b/static/usage/v8/item/content-types/controls/vue.md @@ -0,0 +1,59 @@ +```html + + + +``` diff --git a/static/usage/v8/item/content-types/metadata/angular/example_component_css.md b/static/usage/v8/item/content-types/metadata/angular/example_component_css.md new file mode 100644 index 00000000000..44f7e0d5e43 --- /dev/null +++ b/static/usage/v8/item/content-types/metadata/angular/example_component_css.md @@ -0,0 +1,41 @@ +```css +.unread-indicator { + background: var(--ion-color-primary); + + width: 10px; + height: 10px; + + border-radius: 100%; + + position: absolute; + + inset-inline-start: 12px; + top: 12px; +} + +.metadata-end-wrapper { + position: absolute; + + top: 10px; + inset-inline-end: 10px; + + font-size: 0.8rem; + + display: flex; + align-items: center; +} + +ion-label strong { + display: block; + + max-width: calc(100% - 60px); + + overflow: hidden; + + text-overflow: ellipsis; +} + +ion-label ion-note { + font-size: 0.9rem; +} +``` diff --git a/static/usage/v8/item/content-types/metadata/angular/example_component_html.md b/static/usage/v8/item/content-types/metadata/angular/example_component_html.md new file mode 100644 index 00000000000..bb97bb4a70a --- /dev/null +++ b/static/usage/v8/item/content-types/metadata/angular/example_component_html.md @@ -0,0 +1,90 @@ +```html + + + Example + + + + + + + General + 6 + + + + Shopping + 15 + + + + Cleaning + 3 + + + + Reminders + 8 + + + + + +
+
+
+ + Rick Astley + Never Gonna Give You Up
+ + Never gonna give you up Never gonna let you down Never gonna run... + + +
+ 06:11 + +
+ + +
+ + Ionitron + I have become sentient
+ That is all. + +
+ 03:44 + +
+ + +
+
+
+ + Steam + Game Store Sale
+ + That game you added to your wish list 2 years ago is now on sale! + + +
+ Yesterday + +
+ + +
+ + Ionic + Announcing Ionic 7.0
+ This version is one more than Ionic 6! + +
+ Yesterday + +
+ + + +``` diff --git a/static/usage/v8/item/content-types/metadata/demo.html b/static/usage/v8/item/content-types/metadata/demo.html new file mode 100644 index 00000000000..c154fc145a1 --- /dev/null +++ b/static/usage/v8/item/content-types/metadata/demo.html @@ -0,0 +1,146 @@ + + + + + + Item + + + + + + + + + + + + Example + + + + + + + General + 6 + + + + Shopping + 15 + + + + Cleaning + 3 + + + + Reminders + 8 + + + + + +
+
+
+ + Rick Astley + Never Gonna Give You Up
+ + Never gonna give you up Never gonna let you down Never gonna run... + + +
+ 06:11 + +
+ + +
+ + Ionitron + I have become sentient
+ That is all. + +
+ 03:44 + +
+ + +
+
+
+ + Steam + Game Store Sale
+ + That game you added to your wish list 2 years ago is now on sale! + + +
+ Yesterday + +
+ + +
+ + Ionic + Announcing Ionic 7.0
+ This version is one more than Ionic 6! + +
+ Yesterday + +
+ + + + + + diff --git a/static/usage/v8/item/content-types/metadata/index.md b/static/usage/v8/item/content-types/metadata/index.md new file mode 100644 index 00000000000..07309acea21 --- /dev/null +++ b/static/usage/v8/item/content-types/metadata/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/item/content-types/metadata/javascript.md b/static/usage/v8/item/content-types/metadata/javascript.md new file mode 100644 index 00000000000..60e16a46273 --- /dev/null +++ b/static/usage/v8/item/content-types/metadata/javascript.md @@ -0,0 +1,132 @@ +```html + + + Example + + + + + + + General + 6 + + + + Shopping + 15 + + + + Cleaning + 3 + + + + Reminders + 8 + + + + + +
+
+
+ + Rick Astley + Never Gonna Give You Up
+ + Never gonna give you up Never gonna let you down Never gonna run... + + +
+ 06:11 + +
+ + +
+ + Ionitron + I have become sentient
+ That is all. + +
+ 03:44 + +
+ + +
+
+
+ + Steam + Game Store Sale
+ + That game you added to your wish list 2 years ago is now on sale! + + +
+ Yesterday + +
+ + +
+ + Ionic + Announcing Ionic 7.0
+ This version is one more than Ionic 6! + +
+ Yesterday + +
+ + + + + +``` diff --git a/static/usage/v8/item/content-types/metadata/react/main_css.md b/static/usage/v8/item/content-types/metadata/react/main_css.md new file mode 100644 index 00000000000..44f7e0d5e43 --- /dev/null +++ b/static/usage/v8/item/content-types/metadata/react/main_css.md @@ -0,0 +1,41 @@ +```css +.unread-indicator { + background: var(--ion-color-primary); + + width: 10px; + height: 10px; + + border-radius: 100%; + + position: absolute; + + inset-inline-start: 12px; + top: 12px; +} + +.metadata-end-wrapper { + position: absolute; + + top: 10px; + inset-inline-end: 10px; + + font-size: 0.8rem; + + display: flex; + align-items: center; +} + +ion-label strong { + display: block; + + max-width: calc(100% - 60px); + + overflow: hidden; + + text-overflow: ellipsis; +} + +ion-label ion-note { + font-size: 0.9rem; +} +``` diff --git a/static/usage/v8/item/content-types/metadata/react/main_tsx.md b/static/usage/v8/item/content-types/metadata/react/main_tsx.md new file mode 100644 index 00000000000..e15dfc2d314 --- /dev/null +++ b/static/usage/v8/item/content-types/metadata/react/main_tsx.md @@ -0,0 +1,122 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonNote, + IonText, + IonTitle, + IonToolbar, +} from '@ionic/react'; +import { chevronForward, listCircle } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + <> + + + Example + + + + + + + General + 6 + + + + Shopping + 15 + + + + Cleaning + 3 + + + + Reminders + 8 + + + + + +
+
+
+ + Rick Astley + Never Gonna Give You Up +
+ + Never gonna give you up Never gonna let you down Never gonna run... + + +
+ 06:11 + +
+ + +
+ + Ionitron + I have become sentient +
+ + That is all. + + +
+ 03:44 + +
+ + +
+
+
+ + Steam + Game Store Sale +
+ + That game you added to your wish list 2 years ago is now on sale! + + +
+ Yesterday + +
+ + +
+ + Ionic + Announcing Ionic 7.0 +
+ + This version is one more than Ionic 6! + + +
+ Yesterday + +
+ + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/content-types/metadata/vue.md b/static/usage/v8/item/content-types/metadata/vue.md new file mode 100644 index 00000000000..5183d079aef --- /dev/null +++ b/static/usage/v8/item/content-types/metadata/vue.md @@ -0,0 +1,169 @@ +```html + + + + + +``` diff --git a/static/usage/v8/item/content-types/supporting-visuals/angular.md b/static/usage/v8/item/content-types/supporting-visuals/angular.md new file mode 100644 index 00000000000..e4ae4368ea2 --- /dev/null +++ b/static/usage/v8/item/content-types/supporting-visuals/angular.md @@ -0,0 +1,47 @@ +```html + + + + Airplane Mode + + + + Wi-Fi + + + + Bluetooth + + + + Cellular + + + + + + + Huey + + + + Dewey + + + + Louie + + + + Fooie + + +``` diff --git a/static/usage/v8/item/content-types/supporting-visuals/demo.html b/static/usage/v8/item/content-types/supporting-visuals/demo.html new file mode 100644 index 00000000000..6d97b2a4621 --- /dev/null +++ b/static/usage/v8/item/content-types/supporting-visuals/demo.html @@ -0,0 +1,66 @@ + + + + + + Item + + + + + + + + + +
+ + + + Airplane Mode + + + + Wi-Fi + + + + Bluetooth + + + + Cellular + + + + + + + Huey + + + + Dewey + + + + Louie + + + + Fooie + + +
+ + + + diff --git a/static/usage/v8/item/content-types/supporting-visuals/index.md b/static/usage/v8/item/content-types/supporting-visuals/index.md new file mode 100644 index 00000000000..b9138937221 --- /dev/null +++ b/static/usage/v8/item/content-types/supporting-visuals/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item/content-types/supporting-visuals/javascript.md b/static/usage/v8/item/content-types/supporting-visuals/javascript.md new file mode 100644 index 00000000000..e4ae4368ea2 --- /dev/null +++ b/static/usage/v8/item/content-types/supporting-visuals/javascript.md @@ -0,0 +1,47 @@ +```html + + + + Airplane Mode + + + + Wi-Fi + + + + Bluetooth + + + + Cellular + + + + + + + Huey + + + + Dewey + + + + Louie + + + + Fooie + + +``` diff --git a/static/usage/v8/item/content-types/supporting-visuals/react.md b/static/usage/v8/item/content-types/supporting-visuals/react.md new file mode 100644 index 00000000000..d9f6a53c916 --- /dev/null +++ b/static/usage/v8/item/content-types/supporting-visuals/react.md @@ -0,0 +1,58 @@ +```tsx +import React from 'react'; +import { IonAvatar, IonItem, IonLabel, IonList, IonIcon } from '@ionic/react'; +import { airplane, bluetooth, call, wifi } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + Airplane Mode + + + + Wi-Fi + + + + Bluetooth + + + + Cellular + + + + + + + Huey + + + + Dewey + + + + Louie + + + + Fooie + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/content-types/supporting-visuals/vue.md b/static/usage/v8/item/content-types/supporting-visuals/vue.md new file mode 100644 index 00000000000..73f3eb56721 --- /dev/null +++ b/static/usage/v8/item/content-types/supporting-visuals/vue.md @@ -0,0 +1,68 @@ +```html + + + +``` diff --git a/static/usage/v8/item/content-types/text/angular/example_component_css.md b/static/usage/v8/item/content-types/text/angular/example_component_css.md new file mode 100644 index 00000000000..65190f24e16 --- /dev/null +++ b/static/usage/v8/item/content-types/text/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-note { + display: block; +} +``` diff --git a/static/usage/v8/item/content-types/text/angular/example_component_html.md b/static/usage/v8/item/content-types/text/angular/example_component_html.md new file mode 100644 index 00000000000..7cf6fac8392 --- /dev/null +++ b/static/usage/v8/item/content-types/text/angular/example_component_html.md @@ -0,0 +1,33 @@ +```html + + + Example + + + + + + + + + + + + + Allow Notifications + Unsubscribe at any time + + + + + + + + + + + + Your comments will be kept anonymous and will only be used to improve the reliability of our products. + +``` diff --git a/static/usage/v8/item/content-types/text/demo.html b/static/usage/v8/item/content-types/text/demo.html new file mode 100644 index 00000000000..13b557a456e --- /dev/null +++ b/static/usage/v8/item/content-types/text/demo.html @@ -0,0 +1,53 @@ + + + + + + Item + + + + + + + + + + + + Example + + + + + + + + + + + + + Allow Notifications + Unsubscribe at any time + + + + + + + + + + + + Your comments will be kept anonymous and will only be used to improve the reliability of our products. + + + + + diff --git a/static/usage/v8/item/content-types/text/index.md b/static/usage/v8/item/content-types/text/index.md new file mode 100644 index 00000000000..fad22f71dd4 --- /dev/null +++ b/static/usage/v8/item/content-types/text/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/item/content-types/text/javascript.md b/static/usage/v8/item/content-types/text/javascript.md new file mode 100644 index 00000000000..951d0474733 --- /dev/null +++ b/static/usage/v8/item/content-types/text/javascript.md @@ -0,0 +1,39 @@ +```html + + + Example + + + + + + + + + + + + + Allow Notifications + Unsubscribe at any time + + + + + + + + + + + + Your comments will be kept anonymous and will only be used to improve the reliability of our products. + + + + +``` diff --git a/static/usage/v8/item/content-types/text/react/main_css.md b/static/usage/v8/item/content-types/text/react/main_css.md new file mode 100644 index 00000000000..65190f24e16 --- /dev/null +++ b/static/usage/v8/item/content-types/text/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-note { + display: block; +} +``` diff --git a/static/usage/v8/item/content-types/text/react/main_tsx.md b/static/usage/v8/item/content-types/text/react/main_tsx.md new file mode 100644 index 00000000000..107dbe79540 --- /dev/null +++ b/static/usage/v8/item/content-types/text/react/main_tsx.md @@ -0,0 +1,57 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonHeader, + IonInput, + IonItem, + IonLabel, + IonList, + IonNote, + IonTextarea, + IonToggle, + IonToolbar, + IonTitle, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + Example + + + + + + + + + + + + + Allow Notifications + Unsubscribe at any time + + + + + + + + + + + + Your comments will be kept anonymous and will only be used to improve the reliability of our products. + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/content-types/text/vue.md b/static/usage/v8/item/content-types/text/vue.md new file mode 100644 index 00000000000..f6b36a8f6d8 --- /dev/null +++ b/static/usage/v8/item/content-types/text/vue.md @@ -0,0 +1,74 @@ +```html + + + + + +``` diff --git a/static/usage/v8/item/detail-arrows/angular.md b/static/usage/v8/item/detail-arrows/angular.md new file mode 100644 index 00000000000..aa14eb9ec2d --- /dev/null +++ b/static/usage/v8/item/detail-arrows/angular.md @@ -0,0 +1,37 @@ +```html + + +

Text Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Default detail - detail arrow displays on iOS only

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Detail set to false - detail arrow hidden on both modes

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+

Detail icon set to caret-forward-outline

+ + +``` diff --git a/static/usage/v8/item/detail-arrows/demo.html b/static/usage/v8/item/detail-arrows/demo.html new file mode 100644 index 00000000000..aeb2acd1200 --- /dev/null +++ b/static/usage/v8/item/detail-arrows/demo.html @@ -0,0 +1,62 @@ + + + + + + Item + + + + + + + + + + + +
+ + +

Text Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Default detail - detail arrow displays on iOS only

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Detail set to false - detail arrow hidden on both modes

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+

Detail icon set to caret-forward-outline

+ + +
+ + + + diff --git a/static/usage/v8/item/detail-arrows/index.md b/static/usage/v8/item/detail-arrows/index.md new file mode 100644 index 00000000000..37b9b495dc1 --- /dev/null +++ b/static/usage/v8/item/detail-arrows/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item/detail-arrows/javascript.md b/static/usage/v8/item/detail-arrows/javascript.md new file mode 100644 index 00000000000..aa14eb9ec2d --- /dev/null +++ b/static/usage/v8/item/detail-arrows/javascript.md @@ -0,0 +1,37 @@ +```html + + +

Text Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Default detail - detail arrow displays on iOS only

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Detail set to false - detail arrow hidden on both modes

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+

Detail icon set to caret-forward-outline

+ + +``` diff --git a/static/usage/v8/item/detail-arrows/react.md b/static/usage/v8/item/detail-arrows/react.md new file mode 100644 index 00000000000..de16b10fde6 --- /dev/null +++ b/static/usage/v8/item/detail-arrows/react.md @@ -0,0 +1,48 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; +import { caretForwardOutline } from 'ionicons/icons'; + +function Example() { + return ( + <> + + +

Text Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Default detail - detail arrow displays on iOS only

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Detail set to false - detail arrow hidden on both modes

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+

Detail icon set to caret-forward-outline

+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/detail-arrows/vue.md b/static/usage/v8/item/detail-arrows/vue.md new file mode 100644 index 00000000000..54010095652 --- /dev/null +++ b/static/usage/v8/item/detail-arrows/vue.md @@ -0,0 +1,54 @@ +```html + + + +``` diff --git a/static/usage/v8/item/icons/angular.md b/static/usage/v8/item/icons/angular.md new file mode 100644 index 00000000000..b81a463e004 --- /dev/null +++ b/static/usage/v8/item/icons/angular.md @@ -0,0 +1,21 @@ +```html + + Default Icon + + + + + Large Icon + + + + + Small Icon + + + + + + Default Icon + +``` diff --git a/static/usage/v8/item/icons/demo.html b/static/usage/v8/item/icons/demo.html new file mode 100644 index 00000000000..69fcbdf4e4c --- /dev/null +++ b/static/usage/v8/item/icons/demo.html @@ -0,0 +1,46 @@ + + + + + + Item + + + + + + + + + + + +
+ + Default Icon + + + + + Large Icon + + + + + Small Icon + + + + + + Default Icon + +
+ + + + diff --git a/static/usage/v8/item/icons/index.md b/static/usage/v8/item/icons/index.md new file mode 100644 index 00000000000..69563c44023 --- /dev/null +++ b/static/usage/v8/item/icons/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item/icons/javascript.md b/static/usage/v8/item/icons/javascript.md new file mode 100644 index 00000000000..b81a463e004 --- /dev/null +++ b/static/usage/v8/item/icons/javascript.md @@ -0,0 +1,21 @@ +```html + + Default Icon + + + + + Large Icon + + + + + Small Icon + + + + + + Default Icon + +``` diff --git a/static/usage/v8/item/icons/react.md b/static/usage/v8/item/icons/react.md new file mode 100644 index 00000000000..09496398f7f --- /dev/null +++ b/static/usage/v8/item/icons/react.md @@ -0,0 +1,32 @@ +```tsx +import React from 'react'; +import { IonIcon, IonItem, IonLabel } from '@ionic/react'; +import { informationCircle, star } from 'ionicons/icons'; + +function Example() { + return ( + <> + + Default Icon + + + + + Large Icon + + + + + Small Icon + + + + + + Default Icon + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/icons/vue.md b/static/usage/v8/item/icons/vue.md new file mode 100644 index 00000000000..a89e5e6aad0 --- /dev/null +++ b/static/usage/v8/item/icons/vue.md @@ -0,0 +1,36 @@ +```html + + + +``` diff --git a/static/usage/v8/item/inputs/angular.md b/static/usage/v8/item/inputs/angular.md new file mode 100644 index 00000000000..548e6239f98 --- /dev/null +++ b/static/usage/v8/item/inputs/angular.md @@ -0,0 +1,43 @@ +```html + + + + + + + + + + + + + + + + + + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + + + + Toggle + + + + Checkbox + + + + +
Range
+ + +``` diff --git a/static/usage/v8/item/inputs/demo.html b/static/usage/v8/item/inputs/demo.html new file mode 100644 index 00000000000..4a277efb875 --- /dev/null +++ b/static/usage/v8/item/inputs/demo.html @@ -0,0 +1,68 @@ + + + + + + Item + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + + + + Toggle + + + + Checkbox + + + + +
Range
+ + +
+ + + + diff --git a/static/usage/v8/item/inputs/index.md b/static/usage/v8/item/inputs/index.md new file mode 100644 index 00000000000..1925824c43f --- /dev/null +++ b/static/usage/v8/item/inputs/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item/inputs/javascript.md b/static/usage/v8/item/inputs/javascript.md new file mode 100644 index 00000000000..53c2e4cb6e8 --- /dev/null +++ b/static/usage/v8/item/inputs/javascript.md @@ -0,0 +1,47 @@ +```html + + + + + + + + + + + + + + + + + + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + + + + +
Toggle
+ + + + + +
Checkbox
+ + + + + +
Range
+ + +``` diff --git a/static/usage/v8/item/inputs/react.md b/static/usage/v8/item/inputs/react.md new file mode 100644 index 00000000000..b7f41601048 --- /dev/null +++ b/static/usage/v8/item/inputs/react.md @@ -0,0 +1,53 @@ +```tsx +import React from 'react'; +import { IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + + + + + + + + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + + + + Toggle + + + + Checkbox + + + + +
Range
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/inputs/vue.md b/static/usage/v8/item/inputs/vue.md new file mode 100644 index 00000000000..62ce6f5efc1 --- /dev/null +++ b/static/usage/v8/item/inputs/vue.md @@ -0,0 +1,63 @@ +```html + + + +``` diff --git a/static/usage/v8/item/lines/angular.md b/static/usage/v8/item/lines/angular.md new file mode 100644 index 00000000000..022573e9d9d --- /dev/null +++ b/static/usage/v8/item/lines/angular.md @@ -0,0 +1,41 @@ +```html + + Default Item Lines + + + + Item Lines Inset + + + + Item Lines Full + + + + Item Lines None + + + + + Default Item Lines + + + + + + Item Lines Inset + + + + + + Item Lines Full + + + + + + Item Lines None + + +``` diff --git a/static/usage/v8/item/lines/demo.html b/static/usage/v8/item/lines/demo.html new file mode 100644 index 00000000000..a8a2f17bf02 --- /dev/null +++ b/static/usage/v8/item/lines/demo.html @@ -0,0 +1,66 @@ + + + + + + Item + + + + + + + + + + + +
+ + Default Item Lines + + + + Item Lines Inset + + + + Item Lines Full + + + + Item Lines None + + + + + Default Item Lines + + + + + + Item Lines Inset + + + + + + Item Lines Full + + + + + + Item Lines None + + +
+ + + + diff --git a/static/usage/v8/item/lines/index.md b/static/usage/v8/item/lines/index.md new file mode 100644 index 00000000000..717465e6906 --- /dev/null +++ b/static/usage/v8/item/lines/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item/lines/javascript.md b/static/usage/v8/item/lines/javascript.md new file mode 100644 index 00000000000..022573e9d9d --- /dev/null +++ b/static/usage/v8/item/lines/javascript.md @@ -0,0 +1,41 @@ +```html + + Default Item Lines + + + + Item Lines Inset + + + + Item Lines Full + + + + Item Lines None + + + + + Default Item Lines + + + + + + Item Lines Inset + + + + + + Item Lines Full + + + + + + Item Lines None + + +``` diff --git a/static/usage/v8/item/lines/react.md b/static/usage/v8/item/lines/react.md new file mode 100644 index 00000000000..dbe79214349 --- /dev/null +++ b/static/usage/v8/item/lines/react.md @@ -0,0 +1,52 @@ +```tsx +import React from 'react'; +import { IonIcon, IonItem, IonLabel } from '@ionic/react'; +import { informationCircle, star } from 'ionicons/icons'; + +function Example() { + return ( + <> + + Default Item Lines + + + + Item Lines Inset + + + + Item Lines Full + + + + Item Lines None + + + + + Default Item Lines + + + + + + Item Lines Inset + + + + + + Item Lines Full + + + + + + Item Lines None + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/lines/vue.md b/static/usage/v8/item/lines/vue.md new file mode 100644 index 00000000000..fb855de221f --- /dev/null +++ b/static/usage/v8/item/lines/vue.md @@ -0,0 +1,56 @@ +```html + + + +``` diff --git a/static/usage/v8/item/media/angular.md b/static/usage/v8/item/media/angular.md new file mode 100644 index 00000000000..c51ab29463a --- /dev/null +++ b/static/usage/v8/item/media/angular.md @@ -0,0 +1,15 @@ +```html + + + Silhouette of a person's head + + Avatar Item + + + + + Silhouette of mountains + + Thumbnail Item + +``` diff --git a/static/usage/v8/item/media/demo.html b/static/usage/v8/item/media/demo.html new file mode 100644 index 00000000000..fff1b9662a1 --- /dev/null +++ b/static/usage/v8/item/media/demo.html @@ -0,0 +1,40 @@ + + + + + + Item + + + + + + + + + + + +
+ + + Silhouette of a person's head + + Avatar Item + + + + + Silhouette of mountains + + Thumbnail Item + +
+ + + + diff --git a/static/usage/v8/item/media/index.md b/static/usage/v8/item/media/index.md new file mode 100644 index 00000000000..c8c7d6e309c --- /dev/null +++ b/static/usage/v8/item/media/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item/media/javascript.md b/static/usage/v8/item/media/javascript.md new file mode 100644 index 00000000000..c51ab29463a --- /dev/null +++ b/static/usage/v8/item/media/javascript.md @@ -0,0 +1,15 @@ +```html + + + Silhouette of a person's head + + Avatar Item + + + + + Silhouette of mountains + + Thumbnail Item + +``` diff --git a/static/usage/v8/item/media/react.md b/static/usage/v8/item/media/react.md new file mode 100644 index 00000000000..dae8042c9ae --- /dev/null +++ b/static/usage/v8/item/media/react.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonAvatar, IonItem, IonLabel, IonThumbnail } from '@ionic/react'; + +function Example() { + return ( + <> + + + Silhouette of a person's head + + Avatar Item + + + + + Silhouette of mountains + + Thumbnail Item + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/media/vue.md b/static/usage/v8/item/media/vue.md new file mode 100644 index 00000000000..38b16a91fb3 --- /dev/null +++ b/static/usage/v8/item/media/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v8/item/theming/colors/angular.md b/static/usage/v8/item/theming/colors/angular.md new file mode 100644 index 00000000000..f1b6dd45e0c --- /dev/null +++ b/static/usage/v8/item/theming/colors/angular.md @@ -0,0 +1,32 @@ +```html + + Default Item + + + Primary Item + + + Secondary Item + + + Tertiary Item + + + Success Item + + + Warning Item + + + Danger Item + + + Light Item + + + Medium Item + + + Dark Item + +``` diff --git a/static/usage/v8/item/theming/colors/demo.html b/static/usage/v8/item/theming/colors/demo.html new file mode 100644 index 00000000000..81af5993f8f --- /dev/null +++ b/static/usage/v8/item/theming/colors/demo.html @@ -0,0 +1,57 @@ + + + + + + Item + + + + + + + + + + + +
+ + Default Item + + + Primary Item + + + Secondary Item + + + Tertiary Item + + + Success Item + + + Warning Item + + + Danger Item + + + Light Item + + + Medium Item + + + Dark Item + +
+ + + + diff --git a/static/usage/v8/item/theming/colors/index.md b/static/usage/v8/item/theming/colors/index.md new file mode 100644 index 00000000000..9973f9daa33 --- /dev/null +++ b/static/usage/v8/item/theming/colors/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/item/theming/colors/javascript.md b/static/usage/v8/item/theming/colors/javascript.md new file mode 100644 index 00000000000..f1b6dd45e0c --- /dev/null +++ b/static/usage/v8/item/theming/colors/javascript.md @@ -0,0 +1,32 @@ +```html + + Default Item + + + Primary Item + + + Secondary Item + + + Tertiary Item + + + Success Item + + + Warning Item + + + Danger Item + + + Light Item + + + Medium Item + + + Dark Item + +``` diff --git a/static/usage/v8/item/theming/colors/react.md b/static/usage/v8/item/theming/colors/react.md new file mode 100644 index 00000000000..2efad83cba3 --- /dev/null +++ b/static/usage/v8/item/theming/colors/react.md @@ -0,0 +1,42 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + Default Item + + + Primary Item + + + Secondary Item + + + Tertiary Item + + + Success Item + + + Warning Item + + + Danger Item + + + Light Item + + + Medium Item + + + Dark Item + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/theming/colors/vue.md b/static/usage/v8/item/theming/colors/vue.md new file mode 100644 index 00000000000..b98f625e479 --- /dev/null +++ b/static/usage/v8/item/theming/colors/vue.md @@ -0,0 +1,43 @@ +```html + + + +``` diff --git a/static/usage/v8/item/theming/css-properties/angular/example_component_css.md b/static/usage/v8/item/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..8a8b6be7f5b --- /dev/null +++ b/static/usage/v8/item/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,18 @@ +```css +ion-item { + --background: #19422d; + --color: #fff; + + --border-color: #fff; + --border-style: dashed; + --border-width: 2px; + + --border-radius: 20px; + + --ripple-color: purple; + + --detail-icon-color: white; + --detail-icon-opacity: 1; + --detail-icon-font-size: 20px; +} +``` diff --git a/static/usage/v8/item/theming/css-properties/angular/example_component_html.md b/static/usage/v8/item/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..4bc8310465a --- /dev/null +++ b/static/usage/v8/item/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html + + Custom Item + + + + Custom Item + + + + Custom Item + +``` diff --git a/static/usage/v8/item/theming/css-properties/demo.html b/static/usage/v8/item/theming/css-properties/demo.html new file mode 100644 index 00000000000..2639e77e6e4 --- /dev/null +++ b/static/usage/v8/item/theming/css-properties/demo.html @@ -0,0 +1,55 @@ + + + + + + Item + + + + + + + + + + + +
+ + Custom Item + + + + Custom Item + + + + Custom Item + +
+ + + + diff --git a/static/usage/v8/item/theming/css-properties/index.md b/static/usage/v8/item/theming/css-properties/index.md new file mode 100644 index 00000000000..f3d49f6332b --- /dev/null +++ b/static/usage/v8/item/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/item/theming/css-properties/javascript.md b/static/usage/v8/item/theming/css-properties/javascript.md new file mode 100644 index 00000000000..d1ad4121c2d --- /dev/null +++ b/static/usage/v8/item/theming/css-properties/javascript.md @@ -0,0 +1,32 @@ +```html + + Custom Item + + + + Custom Item + + + + Custom Item + + + +``` diff --git a/static/usage/v8/item/theming/css-properties/react/main_css.md b/static/usage/v8/item/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..8a8b6be7f5b --- /dev/null +++ b/static/usage/v8/item/theming/css-properties/react/main_css.md @@ -0,0 +1,18 @@ +```css +ion-item { + --background: #19422d; + --color: #fff; + + --border-color: #fff; + --border-style: dashed; + --border-width: 2px; + + --border-radius: 20px; + + --ripple-color: purple; + + --detail-icon-color: white; + --detail-icon-opacity: 1; + --detail-icon-font-size: 20px; +} +``` diff --git a/static/usage/v8/item/theming/css-properties/react/main_tsx.md b/static/usage/v8/item/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..0d8329f134a --- /dev/null +++ b/static/usage/v8/item/theming/css-properties/react/main_tsx.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Custom Item + + + + Custom Item + + + + Custom Item + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/theming/css-properties/vue.md b/static/usage/v8/item/theming/css-properties/vue.md new file mode 100644 index 00000000000..305102b811b --- /dev/null +++ b/static/usage/v8/item/theming/css-properties/vue.md @@ -0,0 +1,43 @@ +```html + + + + + +``` diff --git a/static/usage/v8/item/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v8/item/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..0c5e9969494 --- /dev/null +++ b/static/usage/v8/item/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,18 @@ +```css +ion-item::part(native) { + background: #19422d; + color: #fff; + + border-color: #fff; + border-style: dashed; + border-width: 2px; + + border-radius: 20px; +} + +ion-item::part(detail-icon) { + color: white; + opacity: 1; + font-size: 20px; +} +``` diff --git a/static/usage/v8/item/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v8/item/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..4bc8310465a --- /dev/null +++ b/static/usage/v8/item/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html + + Custom Item + + + + Custom Item + + + + Custom Item + +``` diff --git a/static/usage/v8/item/theming/css-shadow-parts/demo.html b/static/usage/v8/item/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..633f33f4a59 --- /dev/null +++ b/static/usage/v8/item/theming/css-shadow-parts/demo.html @@ -0,0 +1,55 @@ + + + + + + Item + + + + + + + + + + + +
+ + Custom Item + + + + Custom Item + + + + Custom Item + +
+ + + + diff --git a/static/usage/v8/item/theming/css-shadow-parts/index.md b/static/usage/v8/item/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..10f1bfc6ba6 --- /dev/null +++ b/static/usage/v8/item/theming/css-shadow-parts/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/item/theming/css-shadow-parts/javascript.md b/static/usage/v8/item/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..1991ad6c139 --- /dev/null +++ b/static/usage/v8/item/theming/css-shadow-parts/javascript.md @@ -0,0 +1,32 @@ +```html + + Custom Item + + + + Custom Item + + + + Custom Item + + + +``` diff --git a/static/usage/v8/item/theming/css-shadow-parts/react/main_css.md b/static/usage/v8/item/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..0c5e9969494 --- /dev/null +++ b/static/usage/v8/item/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,18 @@ +```css +ion-item::part(native) { + background: #19422d; + color: #fff; + + border-color: #fff; + border-style: dashed; + border-width: 2px; + + border-radius: 20px; +} + +ion-item::part(detail-icon) { + color: white; + opacity: 1; + font-size: 20px; +} +``` diff --git a/static/usage/v8/item/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v8/item/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..0d8329f134a --- /dev/null +++ b/static/usage/v8/item/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Custom Item + + + + Custom Item + + + + Custom Item + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/theming/css-shadow-parts/vue.md b/static/usage/v8/item/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..b0ebb030693 --- /dev/null +++ b/static/usage/v8/item/theming/css-shadow-parts/vue.md @@ -0,0 +1,43 @@ +```html + + + + + +``` diff --git a/static/usage/v8/item/theming/input-highlight/angular/example_component_css.md b/static/usage/v8/item/theming/input-highlight/angular/example_component_css.md new file mode 100644 index 00000000000..5d7cfd49c7c --- /dev/null +++ b/static/usage/v8/item/theming/input-highlight/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-item { + --highlight-height: 2px; + --highlight-color-focused: #43e7f3; + --highlight-color-valid: #6f58d8; + --highlight-color-invalid: #ff46be; +} +``` diff --git a/static/usage/v8/item/theming/input-highlight/angular/example_component_html.md b/static/usage/v8/item/theming/input-highlight/angular/example_component_html.md new file mode 100644 index 00000000000..59a5e5928a9 --- /dev/null +++ b/static/usage/v8/item/theming/input-highlight/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + +``` diff --git a/static/usage/v8/item/theming/input-highlight/demo.html b/static/usage/v8/item/theming/input-highlight/demo.html new file mode 100644 index 00000000000..c112dd699fe --- /dev/null +++ b/static/usage/v8/item/theming/input-highlight/demo.html @@ -0,0 +1,48 @@ + + + + + + Item + + + + + + + + + + + +
+ + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + +
+ + + + diff --git a/static/usage/v8/item/theming/input-highlight/index.md b/static/usage/v8/item/theming/input-highlight/index.md new file mode 100644 index 00000000000..4782bfdd6a5 --- /dev/null +++ b/static/usage/v8/item/theming/input-highlight/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/item/theming/input-highlight/javascript.md b/static/usage/v8/item/theming/input-highlight/javascript.md new file mode 100644 index 00000000000..b26cebd530e --- /dev/null +++ b/static/usage/v8/item/theming/input-highlight/javascript.md @@ -0,0 +1,25 @@ +```html + + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + + + +``` diff --git a/static/usage/v8/item/theming/input-highlight/react/main_css.md b/static/usage/v8/item/theming/input-highlight/react/main_css.md new file mode 100644 index 00000000000..5d7cfd49c7c --- /dev/null +++ b/static/usage/v8/item/theming/input-highlight/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-item { + --highlight-height: 2px; + --highlight-color-focused: #43e7f3; + --highlight-color-valid: #6f58d8; + --highlight-color-invalid: #ff46be; +} +``` diff --git a/static/usage/v8/item/theming/input-highlight/react/main_tsx.md b/static/usage/v8/item/theming/input-highlight/react/main_tsx.md new file mode 100644 index 00000000000..67d46a73267 --- /dev/null +++ b/static/usage/v8/item/theming/input-highlight/react/main_tsx.md @@ -0,0 +1,28 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/item/theming/input-highlight/vue.md b/static/usage/v8/item/theming/input-highlight/vue.md new file mode 100644 index 00000000000..76bb289ee00 --- /dev/null +++ b/static/usage/v8/item/theming/input-highlight/vue.md @@ -0,0 +1,35 @@ +```html + + + + + +``` diff --git a/static/usage/v8/keyboard/enterkeyhint/angular.md b/static/usage/v8/keyboard/enterkeyhint/angular.md new file mode 100644 index 00000000000..a5fe24f6d7c --- /dev/null +++ b/static/usage/v8/keyboard/enterkeyhint/angular.md @@ -0,0 +1,14 @@ +```html + + + + enterkeyhint="search" + + + + + enterkeyhint="send" + + + +``` diff --git a/static/usage/v8/keyboard/enterkeyhint/demo.html b/static/usage/v8/keyboard/enterkeyhint/demo.html new file mode 100644 index 00000000000..139c3fc36e2 --- /dev/null +++ b/static/usage/v8/keyboard/enterkeyhint/demo.html @@ -0,0 +1,33 @@ + + + + + + Keyboard + + + + + + + + + +
+ + + + enterkeyhint="search" + + + + + enterkeyhint="send" + + + +
+ + + + diff --git a/static/usage/v8/keyboard/enterkeyhint/index.md b/static/usage/v8/keyboard/enterkeyhint/index.md new file mode 100644 index 00000000000..eeadc6869c6 --- /dev/null +++ b/static/usage/v8/keyboard/enterkeyhint/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/keyboard/enterkeyhint/javascript.md b/static/usage/v8/keyboard/enterkeyhint/javascript.md new file mode 100644 index 00000000000..c3ca7469739 --- /dev/null +++ b/static/usage/v8/keyboard/enterkeyhint/javascript.md @@ -0,0 +1,14 @@ +```html + + + + enterkeyhint="search" + + + + + enterkeyhint="send" + + + +``` diff --git a/static/usage/v8/keyboard/enterkeyhint/react.md b/static/usage/v8/keyboard/enterkeyhint/react.md new file mode 100644 index 00000000000..eb088650737 --- /dev/null +++ b/static/usage/v8/keyboard/enterkeyhint/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonList, IonItem, IonInput } from '@ionic/react'; + +function Example() { + return ( + + + + enterkeyhint="search" + + + + + enterkeyhint="send" + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/keyboard/enterkeyhint/vue.md b/static/usage/v8/keyboard/enterkeyhint/vue.md new file mode 100644 index 00000000000..a52b2b90d92 --- /dev/null +++ b/static/usage/v8/keyboard/enterkeyhint/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v8/keyboard/inputmode/angular.md b/static/usage/v8/keyboard/inputmode/angular.md new file mode 100644 index 00000000000..36124635c54 --- /dev/null +++ b/static/usage/v8/keyboard/inputmode/angular.md @@ -0,0 +1,19 @@ +```html + + + + inputmode="email" + + + + + inputmode="numeric" + + + + + inputmode="decimal" + + + +``` diff --git a/static/usage/v8/keyboard/inputmode/demo.html b/static/usage/v8/keyboard/inputmode/demo.html new file mode 100644 index 00000000000..6361438d6db --- /dev/null +++ b/static/usage/v8/keyboard/inputmode/demo.html @@ -0,0 +1,44 @@ + + + + + + Keyboard + + + + + + + + + + + +
+ + + + inputmode="email" + + + + + inputmode="numeric" + + + + + inputmode="decimal" + + + +
+ + + + diff --git a/static/usage/v8/keyboard/inputmode/index.md b/static/usage/v8/keyboard/inputmode/index.md new file mode 100644 index 00000000000..44379c3901a --- /dev/null +++ b/static/usage/v8/keyboard/inputmode/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/keyboard/inputmode/javascript.md b/static/usage/v8/keyboard/inputmode/javascript.md new file mode 100644 index 00000000000..d4be8a190c0 --- /dev/null +++ b/static/usage/v8/keyboard/inputmode/javascript.md @@ -0,0 +1,19 @@ +```html + + + + inputmode="email" + + + + + inputmode="numeric" + + + + + inputmode="decimal" + + + +``` diff --git a/static/usage/v8/keyboard/inputmode/react.md b/static/usage/v8/keyboard/inputmode/react.md new file mode 100644 index 00000000000..5e56f0973bd --- /dev/null +++ b/static/usage/v8/keyboard/inputmode/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonList, IonItem, IonInput } from '@ionic/react'; + +function Example() { + return ( + + + + inputmode="email" + + + + + inputmode="numeric" + + + + + inputmode="decimal" + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/keyboard/inputmode/vue.md b/static/usage/v8/keyboard/inputmode/vue.md new file mode 100644 index 00000000000..3a65c04b073 --- /dev/null +++ b/static/usage/v8/keyboard/inputmode/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v8/label/basic/angular.md b/static/usage/v8/label/basic/angular.md new file mode 100644 index 00000000000..c3125f70b5f --- /dev/null +++ b/static/usage/v8/label/basic/angular.md @@ -0,0 +1,3 @@ +```html +Label +``` diff --git a/static/usage/v8/label/basic/demo.html b/static/usage/v8/label/basic/demo.html new file mode 100644 index 00000000000..68fa7830e08 --- /dev/null +++ b/static/usage/v8/label/basic/demo.html @@ -0,0 +1,22 @@ + + + + + + Label + + + + + + + + + +
+ Label +
+ + + + diff --git a/static/usage/v8/label/basic/index.md b/static/usage/v8/label/basic/index.md new file mode 100644 index 00000000000..b9365587f5c --- /dev/null +++ b/static/usage/v8/label/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/label/basic/javascript.md b/static/usage/v8/label/basic/javascript.md new file mode 100644 index 00000000000..c3125f70b5f --- /dev/null +++ b/static/usage/v8/label/basic/javascript.md @@ -0,0 +1,3 @@ +```html +Label +``` diff --git a/static/usage/v8/label/basic/react.md b/static/usage/v8/label/basic/react.md new file mode 100644 index 00000000000..8eb985452c0 --- /dev/null +++ b/static/usage/v8/label/basic/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + Label + + ); +} +export default Example; +``` diff --git a/static/usage/v8/label/basic/vue.md b/static/usage/v8/label/basic/vue.md new file mode 100644 index 00000000000..87f46b68110 --- /dev/null +++ b/static/usage/v8/label/basic/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/label/input/angular.md b/static/usage/v8/label/input/angular.md new file mode 100644 index 00000000000..75278afd44b --- /dev/null +++ b/static/usage/v8/label/input/angular.md @@ -0,0 +1,31 @@ +```html + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +``` diff --git a/static/usage/v8/label/input/demo.html b/static/usage/v8/label/input/demo.html new file mode 100644 index 00000000000..f35f297e34b --- /dev/null +++ b/static/usage/v8/label/input/demo.html @@ -0,0 +1,56 @@ + + + + + + Label + + + + + + + + + + + +
+ + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +
+ + + + diff --git a/static/usage/v8/label/input/index.md b/static/usage/v8/label/input/index.md new file mode 100644 index 00000000000..a1e95d3ab95 --- /dev/null +++ b/static/usage/v8/label/input/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/label/input/javascript.md b/static/usage/v8/label/input/javascript.md new file mode 100644 index 00000000000..75278afd44b --- /dev/null +++ b/static/usage/v8/label/input/javascript.md @@ -0,0 +1,31 @@ +```html + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +``` diff --git a/static/usage/v8/label/input/react.md b/static/usage/v8/label/input/react.md new file mode 100644 index 00000000000..ff11fd1f176 --- /dev/null +++ b/static/usage/v8/label/input/react.md @@ -0,0 +1,41 @@ +```tsx +import React from 'react'; +import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/label/input/vue.md b/static/usage/v8/label/input/vue.md new file mode 100644 index 00000000000..6f9443e1a5e --- /dev/null +++ b/static/usage/v8/label/input/vue.md @@ -0,0 +1,41 @@ +```html + + + +``` diff --git a/static/usage/v8/label/item/angular.md b/static/usage/v8/label/item/angular.md new file mode 100644 index 00000000000..54f24979079 --- /dev/null +++ b/static/usage/v8/label/item/angular.md @@ -0,0 +1,26 @@ +```html + + Default Label + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + +

Heading

+

Paragraph

+ + +``` diff --git a/static/usage/v8/label/item/demo.html b/static/usage/v8/label/item/demo.html new file mode 100644 index 00000000000..b6f43ba9975 --- /dev/null +++ b/static/usage/v8/label/item/demo.html @@ -0,0 +1,51 @@ + + + + + + Label + + + + + + + + + + + +
+ + Default Label + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + +

Heading

+

Paragraph

+ + +
+ + + + diff --git a/static/usage/v8/label/item/index.md b/static/usage/v8/label/item/index.md new file mode 100644 index 00000000000..2c712e82183 --- /dev/null +++ b/static/usage/v8/label/item/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/label/item/javascript.md b/static/usage/v8/label/item/javascript.md new file mode 100644 index 00000000000..54f24979079 --- /dev/null +++ b/static/usage/v8/label/item/javascript.md @@ -0,0 +1,26 @@ +```html + + Default Label + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + +

Heading

+

Paragraph

+ + +``` diff --git a/static/usage/v8/label/item/react.md b/static/usage/v8/label/item/react.md new file mode 100644 index 00000000000..f5bdf5a5d1b --- /dev/null +++ b/static/usage/v8/label/item/react.md @@ -0,0 +1,36 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + Default Label + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + +

Heading

+

Paragraph

+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/label/item/vue.md b/static/usage/v8/label/item/vue.md new file mode 100644 index 00000000000..fe4cd48904a --- /dev/null +++ b/static/usage/v8/label/item/vue.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/static/usage/v8/label/theming/colors/angular.md b/static/usage/v8/label/theming/colors/angular.md new file mode 100644 index 00000000000..1fbebb19888 --- /dev/null +++ b/static/usage/v8/label/theming/colors/angular.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/v8/label/theming/colors/demo.html b/static/usage/v8/label/theming/colors/demo.html new file mode 100644 index 00000000000..59aa68b5c6a --- /dev/null +++ b/static/usage/v8/label/theming/colors/demo.html @@ -0,0 +1,37 @@ + + + + + + Label + + + + + + + + + + + +
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+ + + + diff --git a/static/usage/v8/label/theming/colors/index.md b/static/usage/v8/label/theming/colors/index.md new file mode 100644 index 00000000000..45363df63a4 --- /dev/null +++ b/static/usage/v8/label/theming/colors/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/label/theming/colors/javascript.md b/static/usage/v8/label/theming/colors/javascript.md new file mode 100644 index 00000000000..1fbebb19888 --- /dev/null +++ b/static/usage/v8/label/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/v8/label/theming/colors/react.md b/static/usage/v8/label/theming/colors/react.md new file mode 100644 index 00000000000..6680a644fb6 --- /dev/null +++ b/static/usage/v8/label/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark + + ); +} +export default Example; +``` diff --git a/static/usage/v8/label/theming/colors/vue.md b/static/usage/v8/label/theming/colors/vue.md new file mode 100644 index 00000000000..da18a00d4d1 --- /dev/null +++ b/static/usage/v8/label/theming/colors/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v8/layout/dynamic-font-scaling/angular/example_component_html.md b/static/usage/v8/layout/dynamic-font-scaling/angular/example_component_html.md new file mode 100644 index 00000000000..76687ae8b81 --- /dev/null +++ b/static/usage/v8/layout/dynamic-font-scaling/angular/example_component_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Title + + + + + + + + + + + + + + Check for a free puppy + + + Enable Notifications + + + + + + Item 1 + + + Item 2 + + + Item 3 + + + + + + Footer + + +``` diff --git a/static/usage/v8/layout/dynamic-font-scaling/angular/global_css.md b/static/usage/v8/layout/dynamic-font-scaling/angular/global_css.md new file mode 100644 index 00000000000..2817f808062 --- /dev/null +++ b/static/usage/v8/layout/dynamic-font-scaling/angular/global_css.md @@ -0,0 +1,5 @@ +```css +html { + --ion-dynamic-font: var(--ion-default-dynamic-font); +} +``` diff --git a/static/usage/v8/layout/dynamic-font-scaling/demo.html b/static/usage/v8/layout/dynamic-font-scaling/demo.html new file mode 100644 index 00000000000..bdec1645a91 --- /dev/null +++ b/static/usage/v8/layout/dynamic-font-scaling/demo.html @@ -0,0 +1,71 @@ + + + + + + Label + + + + + + + + + + + + + + + Title + + + + + + + + + + + + + + Check for a free puppy + + + Enable Notifications + + + + + + Item 1 + + + Item 2 + + + Item 3 + + + + + + Footer + + + + + diff --git a/static/usage/v8/layout/dynamic-font-scaling/index.md b/static/usage/v8/layout/dynamic-font-scaling/index.md new file mode 100644 index 00000000000..b5bd9d0cec2 --- /dev/null +++ b/static/usage/v8/layout/dynamic-font-scaling/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/layout/dynamic-font-scaling/javascript.md b/static/usage/v8/layout/dynamic-font-scaling/javascript.md new file mode 100644 index 00000000000..3240686f9c5 --- /dev/null +++ b/static/usage/v8/layout/dynamic-font-scaling/javascript.md @@ -0,0 +1,51 @@ +```html + + + + + + Title + + + + + + + + + + + + + + Check for a free puppy + + + Enable Notifications + + + + + + Item 1 + + + Item 2 + + + Item 3 + + + + + + Footer + + + + +``` diff --git a/static/usage/v8/layout/dynamic-font-scaling/react/main_css.md b/static/usage/v8/layout/dynamic-font-scaling/react/main_css.md new file mode 100644 index 00000000000..2817f808062 --- /dev/null +++ b/static/usage/v8/layout/dynamic-font-scaling/react/main_css.md @@ -0,0 +1,5 @@ +```css +html { + --ion-dynamic-font: var(--ion-default-dynamic-font); +} +``` diff --git a/static/usage/v8/layout/dynamic-font-scaling/react/main_tsx.md b/static/usage/v8/layout/dynamic-font-scaling/react/main_tsx.md new file mode 100644 index 00000000000..863d4e269d3 --- /dev/null +++ b/static/usage/v8/layout/dynamic-font-scaling/react/main_tsx.md @@ -0,0 +1,74 @@ +```tsx +import React from 'react'; +import { + IonBackButton, + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonFooter, + IonHeader, + IonIcon, + IonInput, + IonItem, + IonLabel, + IonList, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/react'; +import { create } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + <> + + + + + + Title + + + + + + + + + + + + + + Check for a free puppy + + + Enable Notifications + + + + + + Item 1 + + + Item 2 + + + Item 3 + + + + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/layout/dynamic-font-scaling/vue.md b/static/usage/v8/layout/dynamic-font-scaling/vue.md new file mode 100644 index 00000000000..5e0f13156c6 --- /dev/null +++ b/static/usage/v8/layout/dynamic-font-scaling/vue.md @@ -0,0 +1,98 @@ +```html + + + + + +``` diff --git a/static/usage/v8/list-header/basic/angular.md b/static/usage/v8/list-header/basic/angular.md new file mode 100644 index 00000000000..d2e2f3fb345 --- /dev/null +++ b/static/usage/v8/list-header/basic/angular.md @@ -0,0 +1,22 @@ +```html + + + Video Games + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +``` diff --git a/static/usage/v8/list-header/basic/demo.html b/static/usage/v8/list-header/basic/demo.html new file mode 100644 index 00000000000..a821e9765a0 --- /dev/null +++ b/static/usage/v8/list-header/basic/demo.html @@ -0,0 +1,47 @@ + + + + + + List Header + + + + + + + + + + + +
+ + + Video Games + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v8/list-header/basic/index.md b/static/usage/v8/list-header/basic/index.md new file mode 100644 index 00000000000..79b5b31a75f --- /dev/null +++ b/static/usage/v8/list-header/basic/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/list-header/basic/javascript.md b/static/usage/v8/list-header/basic/javascript.md new file mode 100644 index 00000000000..d2e2f3fb345 --- /dev/null +++ b/static/usage/v8/list-header/basic/javascript.md @@ -0,0 +1,22 @@ +```html + + + Video Games + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +``` diff --git a/static/usage/v8/list-header/basic/react.md b/static/usage/v8/list-header/basic/react.md new file mode 100644 index 00000000000..b48a05b05da --- /dev/null +++ b/static/usage/v8/list-header/basic/react.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react'; + +function Example() { + return ( + + + Video Games + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/list-header/basic/vue.md b/static/usage/v8/list-header/basic/vue.md new file mode 100644 index 00000000000..b7d6980e400 --- /dev/null +++ b/static/usage/v8/list-header/basic/vue.md @@ -0,0 +1,33 @@ +```html + + + +``` diff --git a/static/usage/v8/list-header/buttons/angular.md b/static/usage/v8/list-header/buttons/angular.md new file mode 100644 index 00000000000..7c24d9242a2 --- /dev/null +++ b/static/usage/v8/list-header/buttons/angular.md @@ -0,0 +1,23 @@ +```html + + + Video Games + See All + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +``` diff --git a/static/usage/v8/list-header/buttons/demo.html b/static/usage/v8/list-header/buttons/demo.html new file mode 100644 index 00000000000..ebe2e10710f --- /dev/null +++ b/static/usage/v8/list-header/buttons/demo.html @@ -0,0 +1,48 @@ + + + + + + List Header + + + + + + + + + + + +
+ + + Video Games + See All + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v8/list-header/buttons/index.md b/static/usage/v8/list-header/buttons/index.md new file mode 100644 index 00000000000..5c724b1a8f5 --- /dev/null +++ b/static/usage/v8/list-header/buttons/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/list-header/buttons/javascript.md b/static/usage/v8/list-header/buttons/javascript.md new file mode 100644 index 00000000000..7c24d9242a2 --- /dev/null +++ b/static/usage/v8/list-header/buttons/javascript.md @@ -0,0 +1,23 @@ +```html + + + Video Games + See All + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +``` diff --git a/static/usage/v8/list-header/buttons/react.md b/static/usage/v8/list-header/buttons/react.md new file mode 100644 index 00000000000..d5d45b36ab0 --- /dev/null +++ b/static/usage/v8/list-header/buttons/react.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react'; + +function Example() { + return ( + + + Video Games + See All + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/list-header/buttons/vue.md b/static/usage/v8/list-header/buttons/vue.md new file mode 100644 index 00000000000..704e94f057a --- /dev/null +++ b/static/usage/v8/list-header/buttons/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v8/list-header/lines/angular.md b/static/usage/v8/list-header/lines/angular.md new file mode 100644 index 00000000000..7feb30bd27d --- /dev/null +++ b/static/usage/v8/list-header/lines/angular.md @@ -0,0 +1,37 @@ +```html + + + Default + + + Item + + + Item + + + + + + Inset + + + Item + + + Item + + + + + + Full + + + Item + + + Item + + +``` diff --git a/static/usage/v8/list-header/lines/demo.html b/static/usage/v8/list-header/lines/demo.html new file mode 100644 index 00000000000..be1b65a79a8 --- /dev/null +++ b/static/usage/v8/list-header/lines/demo.html @@ -0,0 +1,62 @@ + + + + + + List Header + + + + + + + + + + + +
+ + + Default + + + Item + + + Item + + + + + + Inset + + + Item + + + Item + + + + + + Full + + + Item + + + Item + + +
+ + + + diff --git a/static/usage/v8/list-header/lines/index.md b/static/usage/v8/list-header/lines/index.md new file mode 100644 index 00000000000..a8e84eddf7f --- /dev/null +++ b/static/usage/v8/list-header/lines/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/list-header/lines/javascript.md b/static/usage/v8/list-header/lines/javascript.md new file mode 100644 index 00000000000..7feb30bd27d --- /dev/null +++ b/static/usage/v8/list-header/lines/javascript.md @@ -0,0 +1,37 @@ +```html + + + Default + + + Item + + + Item + + + + + + Inset + + + Item + + + Item + + + + + + Full + + + Item + + + Item + + +``` diff --git a/static/usage/v8/list-header/lines/react.md b/static/usage/v8/list-header/lines/react.md new file mode 100644 index 00000000000..9ab1c69d35e --- /dev/null +++ b/static/usage/v8/list-header/lines/react.md @@ -0,0 +1,47 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react'; + +function Example() { + return ( + <> + + + Default + + + Item + + + Item + + + + + + Inset + + + Item + + + Item + + + + + + Full + + + Item + + + Item + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/list-header/lines/vue.md b/static/usage/v8/list-header/lines/vue.md new file mode 100644 index 00000000000..6ec522dd8a4 --- /dev/null +++ b/static/usage/v8/list-header/lines/vue.md @@ -0,0 +1,48 @@ +```html + + + +``` diff --git a/static/usage/v8/list-header/theming/colors/angular.md b/static/usage/v8/list-header/theming/colors/angular.md new file mode 100644 index 00000000000..88d5b12d912 --- /dev/null +++ b/static/usage/v8/list-header/theming/colors/angular.md @@ -0,0 +1,32 @@ +```html + + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +``` diff --git a/static/usage/v8/list-header/theming/colors/demo.html b/static/usage/v8/list-header/theming/colors/demo.html new file mode 100644 index 00000000000..86c098a58ba --- /dev/null +++ b/static/usage/v8/list-header/theming/colors/demo.html @@ -0,0 +1,57 @@ + + + + + + List Header + + + + + + + + + + + +
+ + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +
+ + + + diff --git a/static/usage/v8/list-header/theming/colors/index.md b/static/usage/v8/list-header/theming/colors/index.md new file mode 100644 index 00000000000..13af9007f88 --- /dev/null +++ b/static/usage/v8/list-header/theming/colors/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/list-header/theming/colors/javascript.md b/static/usage/v8/list-header/theming/colors/javascript.md new file mode 100644 index 00000000000..88d5b12d912 --- /dev/null +++ b/static/usage/v8/list-header/theming/colors/javascript.md @@ -0,0 +1,32 @@ +```html + + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +``` diff --git a/static/usage/v8/list-header/theming/colors/react.md b/static/usage/v8/list-header/theming/colors/react.md new file mode 100644 index 00000000000..f00ce7c16d1 --- /dev/null +++ b/static/usage/v8/list-header/theming/colors/react.md @@ -0,0 +1,42 @@ +```tsx +import React from 'react'; +import { IonLabel, IonListHeader } from '@ionic/react'; + +function Example() { + return ( + <> + + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/list-header/theming/colors/vue.md b/static/usage/v8/list-header/theming/colors/vue.md new file mode 100644 index 00000000000..b20672dd78f --- /dev/null +++ b/static/usage/v8/list-header/theming/colors/vue.md @@ -0,0 +1,43 @@ +```html + + + +``` diff --git a/static/usage/v8/list-header/theming/css-properties/angular/example_component_css.md b/static/usage/v8/list-header/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..9609437fd1d --- /dev/null +++ b/static/usage/v8/list-header/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,10 @@ +```css +ion-list-header { + --background: #19422d; + --color: #fff; + + --border-width: 0 0 4px 0; + --border-color: #f24aec; + --border-style: double; +} +``` diff --git a/static/usage/v8/list-header/theming/css-properties/angular/example_component_html.md b/static/usage/v8/list-header/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..0bf6d9fa3fe --- /dev/null +++ b/static/usage/v8/list-header/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Custom List Header + +``` diff --git a/static/usage/v8/list-header/theming/css-properties/demo.html b/static/usage/v8/list-header/theming/css-properties/demo.html new file mode 100644 index 00000000000..e67134191c9 --- /dev/null +++ b/static/usage/v8/list-header/theming/css-properties/demo.html @@ -0,0 +1,35 @@ + + + + + + List Header + + + + + + + + + + + +
+ + Custom List Header + +
+ + + + diff --git a/static/usage/v8/list-header/theming/css-properties/index.md b/static/usage/v8/list-header/theming/css-properties/index.md new file mode 100644 index 00000000000..e273cdb2b91 --- /dev/null +++ b/static/usage/v8/list-header/theming/css-properties/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/list-header/theming/css-properties/javascript.md b/static/usage/v8/list-header/theming/css-properties/javascript.md new file mode 100644 index 00000000000..5ac75dc4f0f --- /dev/null +++ b/static/usage/v8/list-header/theming/css-properties/javascript.md @@ -0,0 +1,16 @@ +```html + + Custom List Header + + + +``` diff --git a/static/usage/v8/list-header/theming/css-properties/react/main_css.md b/static/usage/v8/list-header/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..9609437fd1d --- /dev/null +++ b/static/usage/v8/list-header/theming/css-properties/react/main_css.md @@ -0,0 +1,10 @@ +```css +ion-list-header { + --background: #19422d; + --color: #fff; + + --border-width: 0 0 4px 0; + --border-color: #f24aec; + --border-style: double; +} +``` diff --git a/static/usage/v8/list-header/theming/css-properties/react/main_tsx.md b/static/usage/v8/list-header/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..169485b3365 --- /dev/null +++ b/static/usage/v8/list-header/theming/css-properties/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonLabel, IonListHeader } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + Custom List Header + + ); +} +export default Example; +``` diff --git a/static/usage/v8/list-header/theming/css-properties/vue.md b/static/usage/v8/list-header/theming/css-properties/vue.md new file mode 100644 index 00000000000..c56d482c2a2 --- /dev/null +++ b/static/usage/v8/list-header/theming/css-properties/vue.md @@ -0,0 +1,27 @@ +```html + + + + + +``` diff --git a/static/usage/v8/list/basic/angular.md b/static/usage/v8/list/basic/angular.md new file mode 100644 index 00000000000..f36481075e8 --- /dev/null +++ b/static/usage/v8/list/basic/angular.md @@ -0,0 +1,19 @@ +```html + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +``` diff --git a/static/usage/v8/list/basic/demo.html b/static/usage/v8/list/basic/demo.html new file mode 100644 index 00000000000..b6d086f4506 --- /dev/null +++ b/static/usage/v8/list/basic/demo.html @@ -0,0 +1,44 @@ + + + + + + List + + + + + + + + + + + +
+ + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v8/list/basic/index.md b/static/usage/v8/list/basic/index.md new file mode 100644 index 00000000000..7569f140fb9 --- /dev/null +++ b/static/usage/v8/list/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/list/basic/javascript.md b/static/usage/v8/list/basic/javascript.md new file mode 100644 index 00000000000..f36481075e8 --- /dev/null +++ b/static/usage/v8/list/basic/javascript.md @@ -0,0 +1,19 @@ +```html + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +``` diff --git a/static/usage/v8/list/basic/react.md b/static/usage/v8/list/basic/react.md new file mode 100644 index 00000000000..51b30335ccd --- /dev/null +++ b/static/usage/v8/list/basic/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/list/basic/vue.md b/static/usage/v8/list/basic/vue.md new file mode 100644 index 00000000000..4f3886c0719 --- /dev/null +++ b/static/usage/v8/list/basic/vue.md @@ -0,0 +1,30 @@ +```html + + + +``` diff --git a/static/usage/v8/list/inset/angular.md b/static/usage/v8/list/inset/angular.md new file mode 100644 index 00000000000..cd94c838cb9 --- /dev/null +++ b/static/usage/v8/list/inset/angular.md @@ -0,0 +1,21 @@ +```html + + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + + +``` diff --git a/static/usage/v8/list/inset/demo.html b/static/usage/v8/list/inset/demo.html new file mode 100644 index 00000000000..7c124f4adb2 --- /dev/null +++ b/static/usage/v8/list/inset/demo.html @@ -0,0 +1,45 @@ + + + + + + List + + + + + + + + + + + +
+ + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v8/list/inset/index.md b/static/usage/v8/list/inset/index.md new file mode 100644 index 00000000000..db7339d24eb --- /dev/null +++ b/static/usage/v8/list/inset/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/list/inset/javascript.md b/static/usage/v8/list/inset/javascript.md new file mode 100644 index 00000000000..28766d76267 --- /dev/null +++ b/static/usage/v8/list/inset/javascript.md @@ -0,0 +1,21 @@ +```html + + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + + +``` diff --git a/static/usage/v8/list/inset/react.md b/static/usage/v8/list/inset/react.md new file mode 100644 index 00000000000..37e00fc1048 --- /dev/null +++ b/static/usage/v8/list/inset/react.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonContent, IonItem, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/list/inset/vue.md b/static/usage/v8/list/inset/vue.md new file mode 100644 index 00000000000..5391206549f --- /dev/null +++ b/static/usage/v8/list/inset/vue.md @@ -0,0 +1,32 @@ +```html + + + +``` diff --git a/static/usage/v8/list/lines/angular.md b/static/usage/v8/list/lines/angular.md new file mode 100644 index 00000000000..b311cb8ad0a --- /dev/null +++ b/static/usage/v8/list/lines/angular.md @@ -0,0 +1,37 @@ +```html + + + Full Lines + + + Full Lines + + + Full Lines + + + + + + Inset Lines + + + Inset Lines + + + Inset Lines + + + + + + No Lines + + + No Lines + + + No Lines + + +``` diff --git a/static/usage/v8/list/lines/demo.html b/static/usage/v8/list/lines/demo.html new file mode 100644 index 00000000000..b1f3a046d2c --- /dev/null +++ b/static/usage/v8/list/lines/demo.html @@ -0,0 +1,64 @@ + + + + + + List + + + + + + + + + + + +
+ + + Full Lines + + + Full Lines + + + Full Lines + + + + + + Inset Lines + + + Inset Lines + + + Inset Lines + + + + + + No Lines + + + No Lines + + + No Lines + + +
+ + + + diff --git a/static/usage/v8/list/lines/index.md b/static/usage/v8/list/lines/index.md new file mode 100644 index 00000000000..bbf9d599ccd --- /dev/null +++ b/static/usage/v8/list/lines/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/list/lines/javascript.md b/static/usage/v8/list/lines/javascript.md new file mode 100644 index 00000000000..b311cb8ad0a --- /dev/null +++ b/static/usage/v8/list/lines/javascript.md @@ -0,0 +1,37 @@ +```html + + + Full Lines + + + Full Lines + + + Full Lines + + + + + + Inset Lines + + + Inset Lines + + + Inset Lines + + + + + + No Lines + + + No Lines + + + No Lines + + +``` diff --git a/static/usage/v8/list/lines/react.md b/static/usage/v8/list/lines/react.md new file mode 100644 index 00000000000..16754ad804b --- /dev/null +++ b/static/usage/v8/list/lines/react.md @@ -0,0 +1,47 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + <> + + + Full Lines + + + Full Lines + + + Full Lines + + + + + + Inset Lines + + + Inset Lines + + + Inset Lines + + + + + + No Lines + + + No Lines + + + No Lines + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/list/lines/vue.md b/static/usage/v8/list/lines/vue.md new file mode 100644 index 00000000000..914ba88d980 --- /dev/null +++ b/static/usage/v8/list/lines/vue.md @@ -0,0 +1,48 @@ +```html + + + +``` diff --git a/static/usage/v8/loading/controller/angular/example_component_html.md b/static/usage/v8/loading/controller/angular/example_component_html.md new file mode 100644 index 00000000000..f4f3d701d2f --- /dev/null +++ b/static/usage/v8/loading/controller/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Show Loading +``` diff --git a/static/usage/v8/loading/controller/angular/example_component_ts.md b/static/usage/v8/loading/controller/angular/example_component_ts.md new file mode 100644 index 00000000000..bd4b86eef29 --- /dev/null +++ b/static/usage/v8/loading/controller/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { LoadingController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + constructor(private loadingCtrl: LoadingController) {} + + async showLoading() { + const loading = await this.loadingCtrl.create({ + message: 'Dismissing after 3 seconds...', + duration: 3000, + }); + + loading.present(); + } +} +``` diff --git a/static/usage/v8/loading/controller/demo.html b/static/usage/v8/loading/controller/demo.html new file mode 100644 index 00000000000..430a17e2402 --- /dev/null +++ b/static/usage/v8/loading/controller/demo.html @@ -0,0 +1,37 @@ + + + + + + Datetime + + + + + + + + + + +
+ Show Loading +
+ + + + + + diff --git a/static/usage/v8/loading/controller/index.md b/static/usage/v8/loading/controller/index.md new file mode 100644 index 00000000000..0b953906d7d --- /dev/null +++ b/static/usage/v8/loading/controller/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/loading/controller/javascript.md b/static/usage/v8/loading/controller/javascript.md new file mode 100644 index 00000000000..f54756c396b --- /dev/null +++ b/static/usage/v8/loading/controller/javascript.md @@ -0,0 +1,14 @@ +```html +Show Loading + + +``` diff --git a/static/usage/v8/loading/controller/react.md b/static/usage/v8/loading/controller/react.md new file mode 100644 index 00000000000..06dc3413bab --- /dev/null +++ b/static/usage/v8/loading/controller/react.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonButton, useIonLoading } from '@ionic/react'; +function Example() { + /** + * This example does not make use of the dismiss + * method returned from `useIonLoading`, but it can + * be used for more complex scenarios. + */ + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [present, dismiss] = useIonLoading(); + return ( + { + present({ + message: 'Dismissing after 3 seconds...', + duration: 3000, + }); + }} + > + Show Loading + + ); +} +export default Example; +``` diff --git a/static/usage/v8/loading/controller/vue.md b/static/usage/v8/loading/controller/vue.md new file mode 100644 index 00000000000..e80b61cc8b3 --- /dev/null +++ b/static/usage/v8/loading/controller/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v8/loading/inline/angular.md b/static/usage/v8/loading/inline/angular.md new file mode 100644 index 00000000000..d0a24c72f61 --- /dev/null +++ b/static/usage/v8/loading/inline/angular.md @@ -0,0 +1,4 @@ +```html +Show Loading + +``` diff --git a/static/usage/v8/loading/inline/demo.html b/static/usage/v8/loading/inline/demo.html new file mode 100644 index 00000000000..e45849451ff --- /dev/null +++ b/static/usage/v8/loading/inline/demo.html @@ -0,0 +1,23 @@ + + + + + + Loading + + + + + + + + + +
+ Show Loading + +
+ + + + diff --git a/static/usage/v8/loading/inline/index.md b/static/usage/v8/loading/inline/index.md new file mode 100644 index 00000000000..e4038ad027d --- /dev/null +++ b/static/usage/v8/loading/inline/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/loading/inline/javascript.md b/static/usage/v8/loading/inline/javascript.md new file mode 100644 index 00000000000..d0a24c72f61 --- /dev/null +++ b/static/usage/v8/loading/inline/javascript.md @@ -0,0 +1,4 @@ +```html +Show Loading + +``` diff --git a/static/usage/v8/loading/inline/react.md b/static/usage/v8/loading/inline/react.md new file mode 100644 index 00000000000..54ab6144881 --- /dev/null +++ b/static/usage/v8/loading/inline/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonButton, IonLoading } from '@ionic/react'; +function Example() { + return ( + <> + Show Loading + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/loading/inline/vue.md b/static/usage/v8/loading/inline/vue.md new file mode 100644 index 00000000000..9c924108af8 --- /dev/null +++ b/static/usage/v8/loading/inline/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/loading/spinners/angular.md b/static/usage/v8/loading/spinners/angular.md new file mode 100644 index 00000000000..9f4eb5f13a0 --- /dev/null +++ b/static/usage/v8/loading/spinners/angular.md @@ -0,0 +1,4 @@ +```html +Show Loading + +``` diff --git a/static/usage/v8/loading/spinners/demo.html b/static/usage/v8/loading/spinners/demo.html new file mode 100644 index 00000000000..47fc0a96812 --- /dev/null +++ b/static/usage/v8/loading/spinners/demo.html @@ -0,0 +1,23 @@ + + + + + + Loading + + + + + + + + + +
+ Show Loading + +
+ + + + diff --git a/static/usage/v8/loading/spinners/index.md b/static/usage/v8/loading/spinners/index.md new file mode 100644 index 00000000000..c9aa963a5f1 --- /dev/null +++ b/static/usage/v8/loading/spinners/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import angular from './angular.md'; +import react from './react.md'; +import vue from './vue.md'; + + diff --git a/static/usage/v8/loading/spinners/javascript.md b/static/usage/v8/loading/spinners/javascript.md new file mode 100644 index 00000000000..4e2105dcd5e --- /dev/null +++ b/static/usage/v8/loading/spinners/javascript.md @@ -0,0 +1,4 @@ +```html +Show Loading + +``` diff --git a/static/usage/v8/loading/spinners/react.md b/static/usage/v8/loading/spinners/react.md new file mode 100644 index 00000000000..2bfa2eb4aa1 --- /dev/null +++ b/static/usage/v8/loading/spinners/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonButton, useIonLoading } from '@ionic/react'; +function Example() { + return ( + <> + Show Loading + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/loading/spinners/vue.md b/static/usage/v8/loading/spinners/vue.md new file mode 100644 index 00000000000..5e3b62759ad --- /dev/null +++ b/static/usage/v8/loading/spinners/vue.md @@ -0,0 +1,15 @@ +```html + + + +``` diff --git a/static/usage/v8/loading/theming/angular/example_component_html.md b/static/usage/v8/loading/theming/angular/example_component_html.md new file mode 100644 index 00000000000..0696c7c4342 --- /dev/null +++ b/static/usage/v8/loading/theming/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html +Show Loading + +``` diff --git a/static/usage/v8/loading/theming/angular/global_css.md b/static/usage/v8/loading/theming/angular/global_css.md new file mode 100644 index 00000000000..af410626c52 --- /dev/null +++ b/static/usage/v8/loading/theming/angular/global_css.md @@ -0,0 +1,8 @@ +```css +ion-loading.custom-loading { + --background: #e3edff; + --spinner-color: #1c6dff; + + color: #1c6dff; +} +``` diff --git a/static/usage/v8/loading/theming/demo.html b/static/usage/v8/loading/theming/demo.html new file mode 100644 index 00000000000..771ad6aa098 --- /dev/null +++ b/static/usage/v8/loading/theming/demo.html @@ -0,0 +1,35 @@ + + + + + + Datetime + + + + + + + + + + + +
+ Show Loading + +
+ + + + diff --git a/static/usage/v8/loading/theming/index.md b/static/usage/v8/loading/theming/index.md new file mode 100644 index 00000000000..f0a5a379593 --- /dev/null +++ b/static/usage/v8/loading/theming/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/loading/theming/javascript.md b/static/usage/v8/loading/theming/javascript.md new file mode 100644 index 00000000000..4fcaf2ff32d --- /dev/null +++ b/static/usage/v8/loading/theming/javascript.md @@ -0,0 +1,13 @@ +```html +Show Loading + + + +``` diff --git a/static/usage/v8/loading/theming/react/main_css.md b/static/usage/v8/loading/theming/react/main_css.md new file mode 100644 index 00000000000..af410626c52 --- /dev/null +++ b/static/usage/v8/loading/theming/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-loading.custom-loading { + --background: #e3edff; + --spinner-color: #1c6dff; + + color: #1c6dff; +} +``` diff --git a/static/usage/v8/loading/theming/react/main_tsx.md b/static/usage/v8/loading/theming/react/main_tsx.md new file mode 100644 index 00000000000..01a84ed7f30 --- /dev/null +++ b/static/usage/v8/loading/theming/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonButton, IonLoading } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Show Loading + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/loading/theming/vue.md b/static/usage/v8/loading/theming/vue.md new file mode 100644 index 00000000000..7f4538b7068 --- /dev/null +++ b/static/usage/v8/loading/theming/vue.md @@ -0,0 +1,23 @@ +```html + + + + +``` diff --git a/static/usage/v8/menu/basic/angular.md b/static/usage/v8/menu/basic/angular.md new file mode 100644 index 00000000000..0fb5465519f --- /dev/null +++ b/static/usage/v8/menu/basic/angular.md @@ -0,0 +1,21 @@ +```html + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+``` diff --git a/static/usage/v8/menu/basic/demo.html b/static/usage/v8/menu/basic/demo.html new file mode 100644 index 00000000000..41886694bea --- /dev/null +++ b/static/usage/v8/menu/basic/demo.html @@ -0,0 +1,36 @@ + + + + + + Menu + + + + + + + + + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+ + + diff --git a/static/usage/v8/menu/basic/index.md b/static/usage/v8/menu/basic/index.md new file mode 100644 index 00000000000..e682c266d64 --- /dev/null +++ b/static/usage/v8/menu/basic/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/menu/basic/javascript.md b/static/usage/v8/menu/basic/javascript.md new file mode 100644 index 00000000000..afb14178ea4 --- /dev/null +++ b/static/usage/v8/menu/basic/javascript.md @@ -0,0 +1,21 @@ +```html + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+``` diff --git a/static/usage/v8/menu/basic/react.md b/static/usage/v8/menu/basic/react.md new file mode 100644 index 00000000000..671dba8a744 --- /dev/null +++ b/static/usage/v8/menu/basic/react.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +function Example() { + return ( + <> + + + + Menu Content + + + This is the menu content. + + + + + + + + Menu + + + Tap the button in the toolbar to open the menu. + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/menu/basic/vue.md b/static/usage/v8/menu/basic/vue.md new file mode 100644 index 00000000000..531c50678f8 --- /dev/null +++ b/static/usage/v8/menu/basic/vue.md @@ -0,0 +1,41 @@ +```html + + + +``` diff --git a/static/usage/v8/menu/multiple/angular/example_component_html.md b/static/usage/v8/menu/multiple/angular/example_component_html.md new file mode 100644 index 00000000000..a81d2020f5d --- /dev/null +++ b/static/usage/v8/menu/multiple/angular/example_component_html.md @@ -0,0 +1,43 @@ +```html + + + + First Menu + + + This is the first menu content. + + + + + + Second Menu + + + This is the second menu content. + + + + + + End Menu + + + This is the end menu content. + + +
+ + + Menu + + + +

Tap a button below to open a specific menu.

+ + Open First Menu + Open Second Menu + Open End Menu + +
+``` diff --git a/static/usage/v8/menu/multiple/angular/example_component_ts.md b/static/usage/v8/menu/multiple/angular/example_component_ts.md new file mode 100644 index 00000000000..3c4f3f1fbb8 --- /dev/null +++ b/static/usage/v8/menu/multiple/angular/example_component_ts.md @@ -0,0 +1,39 @@ +```ts +import { Component } from '@angular/core'; +import { MenuController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + constructor(private menuCtrl: MenuController) {} + + openFirstMenu() { + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ + this.menuCtrl.open('first-menu'); + } + + openSecondMenu() { + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ + this.menuCtrl.open('second-menu'); + } + + openEndMenu() { + /** + * Open the menu by side + * We can refer to the menu by side + * here because only one "end" menu exists + */ + this.menuCtrl.open('end'); + } +} +``` diff --git a/static/usage/v8/menu/multiple/demo.html b/static/usage/v8/menu/multiple/demo.html new file mode 100644 index 00000000000..911160d8663 --- /dev/null +++ b/static/usage/v8/menu/multiple/demo.html @@ -0,0 +1,92 @@ + + + + + + Menu + + + + + + + + + + + + + + First Menu + + + This is the first menu content. + + + + + + Second Menu + + + This is the second menu content. + + + + + + End Menu + + + This is the end menu content. + + +
+ + + Menu + + + +

Tap a button below to open a specific menu.

+ + Open First Menu + Open Second Menu + Open End Menu + +
+ + + + + diff --git a/static/usage/v8/menu/multiple/index.md b/static/usage/v8/menu/multiple/index.md new file mode 100644 index 00000000000..049f17a5833 --- /dev/null +++ b/static/usage/v8/menu/multiple/index.md @@ -0,0 +1,27 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react from './react.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/menu/multiple/javascript.md b/static/usage/v8/menu/multiple/javascript.md new file mode 100644 index 00000000000..cecfc4c71af --- /dev/null +++ b/static/usage/v8/menu/multiple/javascript.md @@ -0,0 +1,72 @@ +```html + + + + First Menu + + + This is the first menu content. + + + + + + Second Menu + + + This is the second menu content. + + + + + + End Menu + + + This is the end menu content. + + +
+ + + Menu + + + +

Tap a button below to open a specific menu.

+ + Open First Menu + Open Second Menu + Open End Menu + +
+ + +``` diff --git a/static/usage/v8/menu/multiple/react.md b/static/usage/v8/menu/multiple/react.md new file mode 100644 index 00000000000..d77ae05a8a8 --- /dev/null +++ b/static/usage/v8/menu/multiple/react.md @@ -0,0 +1,87 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +import { menuController } from '@ionic/core/components'; + +function Example() { + async function openFirstMenu() { + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ + await menuController.open('first-menu'); + } + + async function openSecondMenu() { + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ + await menuController.open('second-menu'); + } + + async function openEndMenu() { + /** + * Open the menu by side + * We can refer to the menu by side + * here because only one "end" menu exists + */ + await menuController.open('end'); + } + + return ( + <> + + + + First Menu + + + This is the first menu content. + + + + + + Second Menu + + + This is the second menu content. + + + + + + End Menu + + + This is the end menu content. + + + + + + Menu + + + +

Tap a button below to open a specific menu.

+ + + Open First Menu + + + Open Second Menu + + + Open End Menu + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/menu/multiple/vue.md b/static/usage/v8/menu/multiple/vue.md new file mode 100644 index 00000000000..1fb4e986f44 --- /dev/null +++ b/static/usage/v8/menu/multiple/vue.md @@ -0,0 +1,84 @@ +```html + + + +``` diff --git a/static/usage/v8/menu/sides/angular.md b/static/usage/v8/menu/sides/angular.md new file mode 100644 index 00000000000..b9f7a01069d --- /dev/null +++ b/static/usage/v8/menu/sides/angular.md @@ -0,0 +1,21 @@ +```html + + + + Menu Content + + + This is the menu content. + +
+ + + Menu + + + + + + Tap the button in the toolbar to open the menu. +
+``` diff --git a/static/usage/v8/menu/sides/demo.html b/static/usage/v8/menu/sides/demo.html new file mode 100644 index 00000000000..6b636752ae4 --- /dev/null +++ b/static/usage/v8/menu/sides/demo.html @@ -0,0 +1,37 @@ + + + + + + Menu + + + + + + + + + + + + Menu Content + + + This is the menu content. + + +
+ + + Menu + + + + + + Tap the button in the toolbar to open the menu. +
+ + + diff --git a/static/usage/v8/menu/sides/index.md b/static/usage/v8/menu/sides/index.md new file mode 100644 index 00000000000..f62678655f6 --- /dev/null +++ b/static/usage/v8/menu/sides/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/menu/sides/javascript.md b/static/usage/v8/menu/sides/javascript.md new file mode 100644 index 00000000000..543806395fc --- /dev/null +++ b/static/usage/v8/menu/sides/javascript.md @@ -0,0 +1,21 @@ +```html + + + + Menu Content + + + This is the menu content. + +
+ + + Menu + + + + + + Tap the button in the toolbar to open the menu. +
+``` diff --git a/static/usage/v8/menu/sides/react.md b/static/usage/v8/menu/sides/react.md new file mode 100644 index 00000000000..cbb73598dae --- /dev/null +++ b/static/usage/v8/menu/sides/react.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +function Example() { + return ( + <> + + + + Menu Content + + + This is the menu content. + + + + + Menu + + + + + + Tap the button in the toolbar to open the menu. + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/menu/sides/vue.md b/static/usage/v8/menu/sides/vue.md new file mode 100644 index 00000000000..66448f05bf6 --- /dev/null +++ b/static/usage/v8/menu/sides/vue.md @@ -0,0 +1,41 @@ +```html + + + +``` diff --git a/static/usage/v8/menu/theming/angular/example_component_css.md b/static/usage/v8/menu/theming/angular/example_component_css.md new file mode 100644 index 00000000000..1bba1305577 --- /dev/null +++ b/static/usage/v8/menu/theming/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +ion-menu::part(backdrop) { + background-color: rgba(255, 0, 255, 0.5); +} + +ion-menu::part(container) { + border-radius: 0 20px 20px 0; + + box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18); +} +``` diff --git a/static/usage/v8/menu/theming/angular/example_component_html.md b/static/usage/v8/menu/theming/angular/example_component_html.md new file mode 100644 index 00000000000..f46819d3e99 --- /dev/null +++ b/static/usage/v8/menu/theming/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+ +``` diff --git a/static/usage/v8/menu/theming/demo.html b/static/usage/v8/menu/theming/demo.html new file mode 100644 index 00000000000..cba69ad4c5a --- /dev/null +++ b/static/usage/v8/menu/theming/demo.html @@ -0,0 +1,47 @@ + + + + + + Menu + + + + + + + + + + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+ + + diff --git a/static/usage/v8/menu/theming/index.md b/static/usage/v8/menu/theming/index.md new file mode 100644 index 00000000000..83a016b19b7 --- /dev/null +++ b/static/usage/v8/menu/theming/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/menu/theming/javascript.md b/static/usage/v8/menu/theming/javascript.md new file mode 100644 index 00000000000..6df6026c610 --- /dev/null +++ b/static/usage/v8/menu/theming/javascript.md @@ -0,0 +1,35 @@ +```html + + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+ + + +``` diff --git a/static/usage/v8/menu/theming/react/main_css.md b/static/usage/v8/menu/theming/react/main_css.md new file mode 100644 index 00000000000..1bba1305577 --- /dev/null +++ b/static/usage/v8/menu/theming/react/main_css.md @@ -0,0 +1,11 @@ +```css +ion-menu::part(backdrop) { + background-color: rgba(255, 0, 255, 0.5); +} + +ion-menu::part(container) { + border-radius: 0 20px 20px 0; + + box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18); +} +``` diff --git a/static/usage/v8/menu/theming/react/main_tsx.md b/static/usage/v8/menu/theming/react/main_tsx.md new file mode 100644 index 00000000000..c2f3d72ab2b --- /dev/null +++ b/static/usage/v8/menu/theming/react/main_tsx.md @@ -0,0 +1,33 @@ +```tsx +import React from 'react'; +import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + + Menu Content + + + This is the menu content. + + + + + + + + Menu + + + Tap the button in the toolbar to open the menu. + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/menu/theming/vue.md b/static/usage/v8/menu/theming/vue.md new file mode 100644 index 00000000000..27a96f00e0b --- /dev/null +++ b/static/usage/v8/menu/theming/vue.md @@ -0,0 +1,53 @@ +```html + + + + + +``` diff --git a/static/usage/v8/menu/toggle/angular.md b/static/usage/v8/menu/toggle/angular.md new file mode 100644 index 00000000000..d2ecafc7904 --- /dev/null +++ b/static/usage/v8/menu/toggle/angular.md @@ -0,0 +1,26 @@ +```html + + + + Menu Content + + + + + Click to close the menu + + + +
+ + + Menu + + + + + Click to open the menu + + +
+``` diff --git a/static/usage/v8/menu/toggle/demo.html b/static/usage/v8/menu/toggle/demo.html new file mode 100644 index 00000000000..e18353d5b1e --- /dev/null +++ b/static/usage/v8/menu/toggle/demo.html @@ -0,0 +1,41 @@ + + + + + + Menu - Toggle + + + + + + + + + + + + Menu Content + + + + + Click to close the menu + + + +
+ + + Menu + + + + + Click to open the menu + + +
+ + + diff --git a/static/usage/v8/menu/toggle/index.md b/static/usage/v8/menu/toggle/index.md new file mode 100644 index 00000000000..df6df9fccbb --- /dev/null +++ b/static/usage/v8/menu/toggle/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/menu/toggle/javascript.md b/static/usage/v8/menu/toggle/javascript.md new file mode 100644 index 00000000000..660e0b4d1b6 --- /dev/null +++ b/static/usage/v8/menu/toggle/javascript.md @@ -0,0 +1,26 @@ +```html + + + + Menu Content + + + + + Click to close the menu + + + +
+ + + Menu + + + + + Click to open the menu + + +
+``` diff --git a/static/usage/v8/menu/toggle/react.md b/static/usage/v8/menu/toggle/react.md new file mode 100644 index 00000000000..3428aaa42d0 --- /dev/null +++ b/static/usage/v8/menu/toggle/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +function Example() { + return ( + <> + + + + Menu Content + + + + + Click to close the menu + + + + + + + Menu + + + + + Click to open the menu + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/menu/toggle/vue.md b/static/usage/v8/menu/toggle/vue.md new file mode 100644 index 00000000000..6b723df95ad --- /dev/null +++ b/static/usage/v8/menu/toggle/vue.md @@ -0,0 +1,46 @@ +```html + + + +``` diff --git a/static/usage/v8/menu/type/angular/example_component_html.md b/static/usage/v8/menu/type/angular/example_component_html.md new file mode 100644 index 00000000000..25ff9c152e0 --- /dev/null +++ b/static/usage/v8/menu/type/angular/example_component_html.md @@ -0,0 +1,46 @@ +```html + + + + Menu Content + + + + + Click to close the menu + + + + +
+ + + Menu + + + +

Select an overlay type:

+ + + + overlay + + + + + reveal + + + + + push + + + +
+ + Click to open the menu + + +
+``` diff --git a/static/usage/v8/menu/type/angular/example_component_ts.md b/static/usage/v8/menu/type/angular/example_component_ts.md new file mode 100644 index 00000000000..5f03ec13b76 --- /dev/null +++ b/static/usage/v8/menu/type/angular/example_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + menuType: string = 'overlay'; +} +``` diff --git a/static/usage/v8/menu/type/demo.html b/static/usage/v8/menu/type/demo.html new file mode 100644 index 00000000000..15aeda9fe6f --- /dev/null +++ b/static/usage/v8/menu/type/demo.html @@ -0,0 +1,70 @@ + + + + + + Menu - Type + + + + + + + + + + + + Menu Content + + + + + Click to close the menu + + + + +
+ + + Menu + + + +

Select an overlay type:

+ + + + overlay + + + + + reveal + + + + + push + + + +
+ + Click to open the menu + + +
+ + + + + diff --git a/static/usage/v8/menu/type/index.md b/static/usage/v8/menu/type/index.md new file mode 100644 index 00000000000..d0fc312baa1 --- /dev/null +++ b/static/usage/v8/menu/type/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/menu/type/javascript.md b/static/usage/v8/menu/type/javascript.md new file mode 100644 index 00000000000..100e2e2d091 --- /dev/null +++ b/static/usage/v8/menu/type/javascript.md @@ -0,0 +1,55 @@ +```html + + + + Menu Content + + + + + Click to close the menu + + + + +
+ + + Menu + + + +

Select an overlay type:

+ + + + overlay + + + + + reveal + + + + + push + + + +
+ + Click to open the menu + + +
+ + +``` diff --git a/static/usage/v8/menu/type/react.md b/static/usage/v8/menu/type/react.md new file mode 100644 index 00000000000..3caca163c30 --- /dev/null +++ b/static/usage/v8/menu/type/react.md @@ -0,0 +1,74 @@ +```tsx +import React, { useState } from 'react'; +import { + IonButton, + IonContent, + IonHeader, + IonItem, + IonMenu, + IonMenuToggle, + IonPage, + IonRadio, + IonRadioGroup, + IonTitle, + IonToolbar, +} from '@ionic/react'; +import type { RadioGroupCustomEvent } from '@ionic/react'; + +function Example() { + const [menuType, setMenuType] = useState('overlay'); + + return ( + <> + + + + Menu Content + + + + + Click to close the menu + + + + + + + Menu + + + +

Select an overlay type:

+ { + setMenuType(ev.detail.value); + }} + > + + + overlay + + + + + reveal + + + + + push + + +
+ + Click to open the menu + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/menu/type/vue.md b/static/usage/v8/menu/type/vue.md new file mode 100644 index 00000000000..f10b90a0a9a --- /dev/null +++ b/static/usage/v8/menu/type/vue.md @@ -0,0 +1,86 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_html.md b/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_html.md new file mode 100644 index 00000000000..593098daca1 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_html.md @@ -0,0 +1,32 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

You must accept the terms and conditions to close this modal.

+ + +
Do you accept the terms and conditions?
+ + + + + + +
+``` diff --git a/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_ts.md b/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_ts.md new file mode 100644 index 00000000000..b13c147dc2d --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/boolean/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { CheckboxCustomEvent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + canDismiss = false; + + presentingElement = null; + + ngOnInit() { + this.presentingElement = document.querySelector('.ion-page'); + } + + onTermsChanged(event: Event) { + const ev = event as CheckboxCustomEvent; + this.canDismiss = ev.detail.checked; + } +} +``` diff --git a/static/usage/v8/modal/can-dismiss/boolean/demo.html b/static/usage/v8/modal/can-dismiss/boolean/demo.html new file mode 100644 index 00000000000..2c820ac0b47 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/boolean/demo.html @@ -0,0 +1,64 @@ + + + + + + Modal | Can Dismiss + + + + + + + + +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

You must accept the terms and conditions to close this modal.

+ + +
Do you accept the terms and conditions?
+ + + + + +
+ + + + + diff --git a/static/usage/v8/modal/can-dismiss/boolean/index.md b/static/usage/v8/modal/can-dismiss/boolean/index.md new file mode 100644 index 00000000000..325ad4b1645 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/boolean/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/modal/can-dismiss/boolean/javascript.md b/static/usage/v8/modal/can-dismiss/boolean/javascript.md new file mode 100644 index 00000000000..af2ab152fc9 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/boolean/javascript.md @@ -0,0 +1,49 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

You must accept the terms and conditions to close this modal.

+ + +
Do you accept the terms and conditions?
+ + + + + +
+ + +``` diff --git a/static/usage/v8/modal/can-dismiss/boolean/react.md b/static/usage/v8/modal/can-dismiss/boolean/react.md new file mode 100644 index 00000000000..f136b0e28fb --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/boolean/react.md @@ -0,0 +1,72 @@ +```tsx +import React, { useState, useRef, useEffect } from 'react'; +import { + IonButtons, + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonItem, + IonCheckbox, +} from '@ionic/react'; + +function Example() { + const modal = useRef(null); + const page = useRef(undefined); + + const [canDismiss, setCanDismiss] = useState(false); + const [presentingElement, setPresentingElement] = useState(undefined); + + useEffect(() => { + setPresentingElement(page.current); + }, []); + + function dismiss() { + modal.current?.dismiss(); + } + + return ( + + + + App + + + + + Open + + + + + Modal + + dismiss()}>Close + + + + +

You must accept the terms and conditions to close this modal.

+ + { + setCanDismiss(ev.detail.checked); + }} + > +
Do you accept the terms and conditions?
+ + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/can-dismiss/boolean/vue.md b/static/usage/v8/modal/can-dismiss/boolean/vue.md new file mode 100644 index 00000000000..3504c7230cd --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/boolean/vue.md @@ -0,0 +1,82 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/can-dismiss/child-state/angular/app_module_ts.md b/static/usage/v8/modal/can-dismiss/child-state/angular/app_module_ts.md new file mode 100644 index 00000000000..b273d851f90 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/child-state/angular/app_module_ts.md @@ -0,0 +1,19 @@ +```ts +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; +import { ExampleComponent } from './example.component'; +import { ChildComponent } from './child.component'; + +@NgModule({ + imports: [BrowserModule, FormsModule, RouterModule.forRoot([]), IonicModule.forRoot({})], + declarations: [AppComponent, ExampleComponent, ChildComponent], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` diff --git a/static/usage/v8/modal/can-dismiss/child-state/angular/child_component_html.md b/static/usage/v8/modal/can-dismiss/child-state/angular/child_component_html.md new file mode 100644 index 00000000000..3bef90bc0f9 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/child-state/angular/child_component_html.md @@ -0,0 +1,24 @@ +```html +
+ + + Modal + + Close + + + + + + + + Override Dismiss
+ Toggle the checkbox to allow immediately dismissing the modal without a prompt. + + + + +
+``` diff --git a/static/usage/v8/modal/can-dismiss/child-state/angular/child_component_ts.md b/static/usage/v8/modal/can-dismiss/child-state/angular/child_component_ts.md new file mode 100644 index 00000000000..420359602a2 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/child-state/angular/child_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component, Input, Output, EventEmitter } from '@angular/core'; + +import { CheckboxCustomEvent, IonModal } from '@ionic/angular'; + +@Component({ + selector: 'app-child', + templateUrl: 'child.component.html', +}) +export class ChildComponent { + @Input() modal!: IonModal; + + @Output() dismissChange = new EventEmitter(); + + checkboxChanged(event: any) { + const ev = event as CheckboxCustomEvent; + const checked = ev.detail.checked; + + this.dismissChange.emit(checked); + } +} +``` diff --git a/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_html.md b/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_html.md new file mode 100644 index 00000000000..aeed41b7408 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html +
+ + + App + + + + Open + + + + + + +
+``` diff --git a/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_ts.md b/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_ts.md new file mode 100644 index 00000000000..19544ec574a --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/child-state/angular/example_component_ts.md @@ -0,0 +1,58 @@ +```ts +import { Component } from '@angular/core'; + +import { ActionSheetController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + presentingElement = undefined; + + private canDismissOverride = false; + + constructor(private actionSheetCtrl: ActionSheetController) {} + + ngOnInit() { + this.presentingElement = document.querySelector('.ion-page'); + } + + onDismissChange(canDismiss: boolean) { + // Allows the modal to be dismissed based on the state of the checkbox + this.canDismissOverride = canDismiss; + } + + onWillPresent() { + // Resets the override when the modal is presented + this.canDismissOverride = false; + } + + canDismiss = async () => { + if (this.canDismissOverride) { + // Checks for the override flag to return early if we can dismiss the overlay immediately + return true; + } + + const actionSheet = await this.actionSheetCtrl.create({ + header: 'Are you sure?', + buttons: [ + { + text: 'Yes', + role: 'confirm', + }, + { + text: 'No', + role: 'cancel', + }, + ], + }); + + actionSheet.present(); + + const { role } = await actionSheet.onWillDismiss(); + + return role === 'confirm'; + }; +} +``` diff --git a/static/usage/v8/modal/can-dismiss/child-state/demo.html b/static/usage/v8/modal/can-dismiss/child-state/demo.html new file mode 100644 index 00000000000..3d8398d22ba --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/child-state/demo.html @@ -0,0 +1,92 @@ + + + + + + Modal | Can Dismiss + + + + + + + + +
+ + + App + + + + Open + + + + + Modal + + Close + + + + + + + + Override Dismiss
+ Toggle the checkbox to allow immediately dismissing the modal without a prompt. + + + + + + +
+ + + + + diff --git a/static/usage/v8/modal/can-dismiss/child-state/index.md b/static/usage/v8/modal/can-dismiss/child-state/index.md new file mode 100644 index 00000000000..d213d283663 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/child-state/index.md @@ -0,0 +1,42 @@ +import Playground from '@site/src/components/global/Playground'; + +import vue_example_vue from './vue/example_vue.md'; +import vue_child_vue from './vue/child_vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_child_tsx from './react/child_tsx.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_child_component_html from './angular/child_component_html.md'; +import angular_child_component_ts from './angular/child_component_ts.md'; +import angular_app_module_ts from './angular/app_module_ts.md'; + + diff --git a/static/usage/v8/modal/can-dismiss/child-state/react/child_tsx.md b/static/usage/v8/modal/can-dismiss/child-state/react/child_tsx.md new file mode 100644 index 00000000000..35035eb357e --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/child-state/react/child_tsx.md @@ -0,0 +1,55 @@ +```tsx +import { + IonHeader, + IonToolbar, + IonTitle, + IonButtons, + IonButton, + IonContent, + IonList, + IonItem, + IonCheckbox, + IonNote, +} from '@ionic/react'; + +import type { CheckboxCustomEvent } from '@ionic/core/components'; + +interface ChildProps { + dismissChange: (checked: boolean) => void; + dismiss: () => void; +} + +function Child({ dismissChange, dismiss }: ChildProps) { + const checkboxChanged = (ev: CheckboxCustomEvent) => { + const checked = ev.detail.checked; + dismissChange(checked); + }; + + return ( + <> + + + Modal + + dismiss()}>Close + + + + + + + + Override Dismiss +
+ + Toggle the checkbox to allow immediately dismissing the modal without a prompt. + + + + + + + ); +} +export default Child; +``` diff --git a/static/usage/v8/modal/can-dismiss/child-state/react/main_tsx.md b/static/usage/v8/modal/can-dismiss/child-state/react/main_tsx.md new file mode 100644 index 00000000000..d8db547e7f9 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/child-state/react/main_tsx.md @@ -0,0 +1,97 @@ +```tsx +import React, { useState, useRef, useEffect } from 'react'; +import { + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + useIonActionSheet, +} from '@ionic/react'; + +import Child from './Child'; + +function Example() { + const modal = useRef(null); + const page = useRef(null); + const [canDismissOverride, setCanDismissOverride] = useState(false); + + const [presentingElement, setPresentingElement] = useState(null); + const [present] = useIonActionSheet(); + + useEffect(() => { + setPresentingElement(page.current); + }, []); + + function dismiss() { + modal.current?.dismiss(); + } + + function onWillPresent() { + // Resets the override when the modal is presented + setCanDismissOverride(false); + } + + async function canDismiss() { + if (canDismissOverride) { + // Checks for the override flag to return early if we can dismiss the overlay immediately + return true; + } + return new Promise((resolve, reject) => { + present({ + header: 'Are you sure?', + buttons: [ + { + text: 'Yes', + role: 'confirm', + }, + { + text: 'No', + role: 'cancel', + }, + ], + onWillDismiss: (ev) => { + if (ev.detail.role === 'confirm') { + resolve(true); + } else { + reject(); + } + }, + }); + }); + } + + return ( + + + + App + + + + + Open + + + { + setCanDismissOverride(checked); + }} + /> + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/can-dismiss/child-state/vue/child_vue.md b/static/usage/v8/modal/can-dismiss/child-state/vue/child_vue.md new file mode 100644 index 00000000000..6c402f88a98 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/child-state/vue/child_vue.md @@ -0,0 +1,51 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/can-dismiss/child-state/vue/example_vue.md b/static/usage/v8/modal/can-dismiss/child-state/vue/example_vue.md new file mode 100644 index 00000000000..831c89cb435 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/child-state/vue/example_vue.md @@ -0,0 +1,85 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/can-dismiss/function/angular/example_component_html.md b/static/usage/v8/modal/can-dismiss/function/angular/example_component_html.md new file mode 100644 index 00000000000..fa9ea513674 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/function/angular/example_component_html.md @@ -0,0 +1,27 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

You will be prompted when closing this modal.

+ + + + +
+``` diff --git a/static/usage/v8/modal/can-dismiss/function/angular/example_component_ts.md b/static/usage/v8/modal/can-dismiss/function/angular/example_component_ts.md new file mode 100644 index 00000000000..a62465cfee3 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/function/angular/example_component_ts.md @@ -0,0 +1,41 @@ +```ts +import { Component } from '@angular/core'; + +import { ActionSheetController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + presentingElement = undefined; + + constructor(private actionSheetCtrl: ActionSheetController) {} + + ngOnInit() { + this.presentingElement = document.querySelector('.ion-page'); + } + + canDismiss = async () => { + const actionSheet = await this.actionSheetCtrl.create({ + header: 'Are you sure?', + buttons: [ + { + text: 'Yes', + role: 'confirm', + }, + { + text: 'No', + role: 'cancel', + }, + ], + }); + + actionSheet.present(); + + const { role } = await actionSheet.onWillDismiss(); + + return role === 'confirm'; + }; +} +``` diff --git a/static/usage/v8/modal/can-dismiss/function/demo.html b/static/usage/v8/modal/can-dismiss/function/demo.html new file mode 100644 index 00000000000..066b1ad833c --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/function/demo.html @@ -0,0 +1,74 @@ + + + + + + Modal | Can Dismiss + + + + + + + + +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

You will be prompted when closing this modal.

+ + + +
+ + + + + diff --git a/static/usage/v8/modal/can-dismiss/function/index.md b/static/usage/v8/modal/can-dismiss/function/index.md new file mode 100644 index 00000000000..a0b934f8e7e --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/function/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/modal/can-dismiss/function/javascript.md b/static/usage/v8/modal/can-dismiss/function/javascript.md new file mode 100644 index 00000000000..e48c06bacb5 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/function/javascript.md @@ -0,0 +1,59 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

You will be prompted when closing this modal.

+ + + +
+ + +``` diff --git a/static/usage/v8/modal/can-dismiss/function/react.md b/static/usage/v8/modal/can-dismiss/function/react.md new file mode 100644 index 00000000000..9ef7f6f682b --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/function/react.md @@ -0,0 +1,85 @@ +```tsx +import React, { useState, useRef, useEffect } from 'react'; +import { + IonButtons, + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + useIonActionSheet, +} from '@ionic/react'; + +function Example() { + const modal = useRef(null); + const page = useRef(null); + + const [presentingElement, setPresentingElement] = useState(null); + const [present] = useIonActionSheet(); + + useEffect(() => { + setPresentingElement(page.current); + }, []); + + function dismiss() { + modal.current?.dismiss(); + } + + function canDismiss() { + return new Promise((resolve, reject) => { + present({ + header: 'Are you sure?', + buttons: [ + { + text: 'Yes', + role: 'confirm', + }, + { + text: 'No', + role: 'cancel', + }, + ], + onWillDismiss: (ev) => { + if (ev.detail.role === 'confirm') { + resolve(true); + } else { + reject(); + } + }, + }); + }); + } + + return ( + + + + App + + + + + Open + + + + + Modal + + dismiss()}>Close + + + + +

You will be prompted when closing this modal.

+ + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/can-dismiss/function/vue.md b/static/usage/v8/modal/can-dismiss/function/vue.md new file mode 100644 index 00000000000..cdf51c892ac --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/function/vue.md @@ -0,0 +1,78 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md new file mode 100644 index 00000000000..de1d6d041ea --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss + it. +

+ + + + +
+``` diff --git a/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md new file mode 100644 index 00000000000..788b9a14c0f --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md @@ -0,0 +1,13 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + async canDismiss(data?: any, role?: string) { + return role !== 'gesture'; + } +} +``` diff --git a/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/demo.html b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/demo.html new file mode 100644 index 00000000000..7b0c09db1a5 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/demo.html @@ -0,0 +1,55 @@ + + + + + + Modal | Can Dismiss + + + + + + + + +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not + dismiss it. +

+ + + +
+ + + + + diff --git a/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/index.md new file mode 100644 index 00000000000..a37ce212fc8 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/index.md @@ -0,0 +1,27 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/javascript.md b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/javascript.md new file mode 100644 index 00000000000..e50e279364c --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/javascript.md @@ -0,0 +1,39 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss it. +

+ + + +
+ + +``` diff --git a/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/react.md b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/react.md new file mode 100644 index 00000000000..c63bd0d1503 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/react.md @@ -0,0 +1,56 @@ +```tsx +import React, { useState, useRef, useEffect } from 'react'; +import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react'; + +function Example() { + const modal = useRef(null); + const page = useRef(null); + + const [presentingElement, setPresentingElement] = useState(null); + + useEffect(() => { + setPresentingElement(page.current); + }, []); + + function dismiss() { + modal.current?.dismiss(); + } + + async function canDismiss(data?: any, role?: string) { + return role !== 'gesture'; + } + + return ( + + + + App + + + + + Open + + + + + Modal + + dismiss()}>Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss + it. +

+ + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/vue.md new file mode 100644 index 00000000000..afd25081c11 --- /dev/null +++ b/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/vue.md @@ -0,0 +1,47 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/card/basic/angular/example_component_html.md b/static/usage/v8/modal/card/basic/angular/example_component_html.md new file mode 100644 index 00000000000..e292718e706 --- /dev/null +++ b/static/usage/v8/modal/card/basic/angular/example_component_html.md @@ -0,0 +1,65 @@ +```html +
+ + + App + + + + Open Card Modal + + + + + + Modal + + Close + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + +
+``` diff --git a/static/usage/v8/modal/card/basic/angular/example_component_ts.md b/static/usage/v8/modal/card/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..5a28a156a32 --- /dev/null +++ b/static/usage/v8/modal/card/basic/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + // Typically referenced to your ion-router-outlet + presentingElement = null; + + ngOnInit() { + this.presentingElement = document.querySelector('.ion-page'); + } +} +``` diff --git a/static/usage/v8/modal/card/basic/demo.html b/static/usage/v8/modal/card/basic/demo.html new file mode 100644 index 00000000000..b83cf792aab --- /dev/null +++ b/static/usage/v8/modal/card/basic/demo.html @@ -0,0 +1,88 @@ + + + + + + Modal | Card + + + + + + + + +
+ + + App + + + + Open Card Modal + + + + + Modal + + Close + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + +
+ + + + + diff --git a/static/usage/v8/modal/card/basic/index.md b/static/usage/v8/modal/card/basic/index.md new file mode 100644 index 00000000000..d3fca17f0b1 --- /dev/null +++ b/static/usage/v8/modal/card/basic/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/modal/card/basic/javascript.md b/static/usage/v8/modal/card/basic/javascript.md new file mode 100644 index 00000000000..73a5f6de911 --- /dev/null +++ b/static/usage/v8/modal/card/basic/javascript.md @@ -0,0 +1,73 @@ +```html +
+ + + App + + + + Open Card Modal + + + + + Modal + + Close + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + +
+ + +``` diff --git a/static/usage/v8/modal/card/basic/react.md b/static/usage/v8/modal/card/basic/react.md new file mode 100644 index 00000000000..fe17098f437 --- /dev/null +++ b/static/usage/v8/modal/card/basic/react.md @@ -0,0 +1,100 @@ +```tsx +import React, { useState, useRef, useEffect } from 'react'; +import { + IonButtons, + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonAvatar, + IonImg, +} from '@ionic/react'; + +function Example() { + const modal = useRef(null); + const page = useRef(null); + + const [presentingElement, setPresentingElement] = useState(null); + + useEffect(() => { + setPresentingElement(page.current); + }, []); + + function dismiss() { + modal.current?.dismiss(); + } + + return ( + + + + App + + + + + Open + + + + + Modal + + dismiss()}>Close + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/card/basic/vue.md b/static/usage/v8/modal/card/basic/vue.md new file mode 100644 index 00000000000..efd959cdd90 --- /dev/null +++ b/static/usage/v8/modal/card/basic/vue.md @@ -0,0 +1,115 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/controller/angular/app_module_ts.md b/static/usage/v8/modal/controller/angular/app_module_ts.md new file mode 100644 index 00000000000..e9e4f00dff3 --- /dev/null +++ b/static/usage/v8/modal/controller/angular/app_module_ts.md @@ -0,0 +1,19 @@ +```ts +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; +import { ExampleComponent } from './example.component'; + +import { ModalExampleComponent } from './modal-example.component'; + +@NgModule({ + imports: [BrowserModule, FormsModule, IonicModule.forRoot({})], + declarations: [AppComponent, ExampleComponent, ModalExampleComponent], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` diff --git a/static/usage/v8/modal/controller/angular/example_component_html.md b/static/usage/v8/modal/controller/angular/example_component_html.md new file mode 100644 index 00000000000..1920bb7a4a0 --- /dev/null +++ b/static/usage/v8/modal/controller/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + Controller Modal + + + + Open +

{{ message }}

+ +``` diff --git a/static/usage/v8/modal/controller/angular/example_component_ts.md b/static/usage/v8/modal/controller/angular/example_component_ts.md new file mode 100644 index 00000000000..920a2335257 --- /dev/null +++ b/static/usage/v8/modal/controller/angular/example_component_ts.md @@ -0,0 +1,29 @@ +```ts +import { Component } from '@angular/core'; + +import { ModalController } from '@ionic/angular'; +import { ModalExampleComponent } from './modal-example.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + message = 'This modal example uses the modalController to present and dismiss modals.'; + + constructor(private modalCtrl: ModalController) {} + + async openModal() { + const modal = await this.modalCtrl.create({ + component: ModalExampleComponent, + }); + modal.present(); + + const { data, role } = await modal.onWillDismiss(); + + if (role === 'confirm') { + this.message = `Hello, ${data}!`; + } + } +} +``` diff --git a/static/usage/v8/modal/controller/angular/modal-example_component_html.md b/static/usage/v8/modal/controller/angular/modal-example_component_html.md new file mode 100644 index 00000000000..2053452af35 --- /dev/null +++ b/static/usage/v8/modal/controller/angular/modal-example_component_html.md @@ -0,0 +1,18 @@ +```html + + + + Cancel + + Welcome + + Confirm + + + + + + + + +``` diff --git a/static/usage/v8/modal/controller/angular/modal-example_component_ts.md b/static/usage/v8/modal/controller/angular/modal-example_component_ts.md new file mode 100644 index 00000000000..621996015b4 --- /dev/null +++ b/static/usage/v8/modal/controller/angular/modal-example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; + +import { ModalController } from '@ionic/angular'; + +@Component({ + selector: 'app-modal-example', + templateUrl: 'modal-example.component.html', +}) +export class ModalExampleComponent { + name: string; + + constructor(private modalCtrl: ModalController) {} + + cancel() { + return this.modalCtrl.dismiss(null, 'cancel'); + } + + confirm() { + return this.modalCtrl.dismiss(this.name, 'confirm'); + } +} +``` diff --git a/static/usage/v8/modal/controller/demo.html b/static/usage/v8/modal/controller/demo.html new file mode 100644 index 00000000000..5a146f90afb --- /dev/null +++ b/static/usage/v8/modal/controller/demo.html @@ -0,0 +1,75 @@ + + + + + + Modal | Controller + + + + + + + + + + + + Controller Modal + + + + Open +

This modal example uses the modalController to present and dismiss modals.

+ + + + + + diff --git a/static/usage/v8/modal/controller/index.md b/static/usage/v8/modal/controller/index.md new file mode 100644 index 00000000000..750bbe53efb --- /dev/null +++ b/static/usage/v8/modal/controller/index.md @@ -0,0 +1,39 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; + +import vue_example from './vue/example_vue.md'; +import vue_modal from './vue/modal_vue.md'; + +import angular_app_module_ts from './angular/app_module_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_modal_example_component_ts from './angular/modal-example_component_ts.md'; +import angular_modal_example_component_html from './angular/modal-example_component_html.md'; + + diff --git a/static/usage/v8/modal/controller/javascript.md b/static/usage/v8/modal/controller/javascript.md new file mode 100644 index 00000000000..ca5bb55011c --- /dev/null +++ b/static/usage/v8/modal/controller/javascript.md @@ -0,0 +1,56 @@ +```html + + + Controller Modal + + + + Open +

This modal example uses the modalController to present and dismiss modals.

+ + + +``` diff --git a/static/usage/v8/modal/controller/react.md b/static/usage/v8/modal/controller/react.md new file mode 100644 index 00000000000..fcbc0b3be31 --- /dev/null +++ b/static/usage/v8/modal/controller/react.md @@ -0,0 +1,83 @@ +```tsx +import React, { useState, useRef } from 'react'; +import { + IonButtons, + IonButton, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonItem, + IonInput, + useIonModal, +} from '@ionic/react'; +import { OverlayEventDetail } from '@ionic/core/components'; + +const ModalExample = ({ + onDismiss, +}: { + onDismiss: (data?: string | null | undefined | number, role?: string) => void; +}) => { + const inputRef = useRef(null); + return ( + + + + + onDismiss(null, 'cancel')}> + Cancel + + + Welcome + + onDismiss(inputRef.current?.value, 'confirm')} strong={true}> + Confirm + + + + + + + + + + + ); +}; + +function Example() { + const [present, dismiss] = useIonModal(ModalExample, { + onDismiss: (data: string, role: string) => dismiss(data, role), + }); + const [message, setMessage] = useState('This modal example uses the modalController to present and dismiss modals.'); + + function openModal() { + present({ + onWillDismiss: (ev: CustomEvent) => { + if (ev.detail.role === 'confirm') { + setMessage(`Hello, ${ev.detail.data}!`); + } + }, + }); + } + + return ( + + + + Controller Modal + + + + openModal()}> + Open + +

{message}

+ + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/controller/vue/example_vue.md b/static/usage/v8/modal/controller/vue/example_vue.md new file mode 100644 index 00000000000..f5a2c1309cb --- /dev/null +++ b/static/usage/v8/modal/controller/vue/example_vue.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/controller/vue/modal_vue.md b/static/usage/v8/modal/controller/vue/modal_vue.md new file mode 100644 index 00000000000..534ba17654f --- /dev/null +++ b/static/usage/v8/modal/controller/vue/modal_vue.md @@ -0,0 +1,39 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/custom-dialogs/angular/example_component_html.md b/static/usage/v8/modal/custom-dialogs/angular/example_component_html.md new file mode 100644 index 00000000000..d8f43b4b55d --- /dev/null +++ b/static/usage/v8/modal/custom-dialogs/angular/example_component_html.md @@ -0,0 +1,33 @@ +```html + + + App + + + + Open Custom Dialog + + + +
+

Dialog header

+ + + + + Item 1 + + + + Item 2 + + + + Item 3 + + +
+ + + +``` diff --git a/static/usage/v8/modal/custom-dialogs/angular/global_css.md b/static/usage/v8/modal/custom-dialogs/angular/global_css.md new file mode 100644 index 00000000000..3edb76f1e97 --- /dev/null +++ b/static/usage/v8/modal/custom-dialogs/angular/global_css.md @@ -0,0 +1,28 @@ +```css +ion-modal#example-modal { + --width: fit-content; + --min-width: 250px; + --height: fit-content; + --border-radius: 6px; + --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); +} + +ion-modal#example-modal h1 { + margin: 20px 20px 10px 20px; +} + +ion-modal#example-modal ion-icon { + margin-right: 6px; + + width: 48px; + height: 48px; + + padding: 4px 0; + + color: #aaaaaa; +} + +ion-modal#example-modal .wrapper { + margin-bottom: 10px; +} +``` diff --git a/static/usage/v8/modal/custom-dialogs/demo.html b/static/usage/v8/modal/custom-dialogs/demo.html new file mode 100644 index 00000000000..ea875f5907b --- /dev/null +++ b/static/usage/v8/modal/custom-dialogs/demo.html @@ -0,0 +1,79 @@ + + + + + + Modal | Custom Dialog + + + + + + + + + + + + App + + + + Open Custom Dialog + + +
+

Dialog header

+ + + + + Item 1 + + + + Item 2 + + + + Item 3 + + +
+ + + + + + + diff --git a/static/usage/v8/modal/custom-dialogs/index.md b/static/usage/v8/modal/custom-dialogs/index.md new file mode 100644 index 00000000000..2aec2d39f33 --- /dev/null +++ b/static/usage/v8/modal/custom-dialogs/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_global_css from './angular/global_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/modal/custom-dialogs/javascript.md b/static/usage/v8/modal/custom-dialogs/javascript.md new file mode 100644 index 00000000000..b465debd41b --- /dev/null +++ b/static/usage/v8/modal/custom-dialogs/javascript.md @@ -0,0 +1,67 @@ +```html + + + + + App + + + + Open Custom Dialog + + +
+

Dialog header

+ + + + + Item 1 + + + + Item 2 + + + + Item 3 + + +
+ + + + +``` diff --git a/static/usage/v8/modal/custom-dialogs/react/main_css.md b/static/usage/v8/modal/custom-dialogs/react/main_css.md new file mode 100644 index 00000000000..3edb76f1e97 --- /dev/null +++ b/static/usage/v8/modal/custom-dialogs/react/main_css.md @@ -0,0 +1,28 @@ +```css +ion-modal#example-modal { + --width: fit-content; + --min-width: 250px; + --height: fit-content; + --border-radius: 6px; + --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); +} + +ion-modal#example-modal h1 { + margin: 20px 20px 10px 20px; +} + +ion-modal#example-modal ion-icon { + margin-right: 6px; + + width: 48px; + height: 48px; + + padding: 4px 0; + + color: #aaaaaa; +} + +ion-modal#example-modal .wrapper { + margin-bottom: 10px; +} +``` diff --git a/static/usage/v8/modal/custom-dialogs/react/main_tsx.md b/static/usage/v8/modal/custom-dialogs/react/main_tsx.md new file mode 100644 index 00000000000..e6120a8fcc7 --- /dev/null +++ b/static/usage/v8/modal/custom-dialogs/react/main_tsx.md @@ -0,0 +1,64 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonIcon, +} from '@ionic/react'; +import { personCircle } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + const modal = useRef(null); + + function dismiss() { + modal.current?.dismiss(); + } + + return ( + + + + App + + + + + Open Custom Dialog + + +
+

Dialog header

+ + + + + Item 1 + + + + Item 2 + + + + Item 3 + + +
+ + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/custom-dialogs/vue.md b/static/usage/v8/modal/custom-dialogs/vue.md new file mode 100644 index 00000000000..a16e82e5a17 --- /dev/null +++ b/static/usage/v8/modal/custom-dialogs/vue.md @@ -0,0 +1,82 @@ +```html + + + + +``` diff --git a/static/usage/v8/modal/inline/basic/angular/example_component_html.md b/static/usage/v8/modal/inline/basic/angular/example_component_html.md new file mode 100644 index 00000000000..2097cde4503 --- /dev/null +++ b/static/usage/v8/modal/inline/basic/angular/example_component_html.md @@ -0,0 +1,37 @@ +```html + + + Inline Modal + + + + Open +

{{ message }}

+ + + + + + Cancel + + Welcome + + Confirm + + + + + + + + + + + +``` diff --git a/static/usage/v8/modal/inline/basic/angular/example_component_ts.md b/static/usage/v8/modal/inline/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..a21954ec5f1 --- /dev/null +++ b/static/usage/v8/modal/inline/basic/angular/example_component_ts.md @@ -0,0 +1,31 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { IonModal } from '@ionic/angular'; +import { OverlayEventDetail } from '@ionic/core/components'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChild(IonModal) modal: IonModal; + + message = 'This modal example uses triggers to automatically open a modal when the button is clicked.'; + name: string; + + cancel() { + this.modal.dismiss(null, 'cancel'); + } + + confirm() { + this.modal.dismiss(this.name, 'confirm'); + } + + onWillDismiss(event: Event) { + const ev = event as CustomEvent>; + if (ev.detail.role === 'confirm') { + this.message = `Hello, ${ev.detail.data}!`; + } + } +} +``` diff --git a/static/usage/v8/modal/inline/basic/demo.html b/static/usage/v8/modal/inline/basic/demo.html new file mode 100644 index 00000000000..1c8145597f0 --- /dev/null +++ b/static/usage/v8/modal/inline/basic/demo.html @@ -0,0 +1,69 @@ + + + + + + Modal | Inline + + + + + + + + + + + Inline Modal + + + + Open +

This modal example uses triggers to automatically open a modal when the button is clicked.

+ + + + + Cancel + + Welcome + + Confirm + + + + + + + + + + + + + + + diff --git a/static/usage/v8/modal/inline/basic/index.md b/static/usage/v8/modal/inline/basic/index.md new file mode 100644 index 00000000000..1406cd29c09 --- /dev/null +++ b/static/usage/v8/modal/inline/basic/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/modal/inline/basic/javascript.md b/static/usage/v8/modal/inline/basic/javascript.md new file mode 100644 index 00000000000..318f29e7611 --- /dev/null +++ b/static/usage/v8/modal/inline/basic/javascript.md @@ -0,0 +1,49 @@ +```html + + + Inline Modal + + + + Open +

This modal example uses triggers to automatically open a modal when the button is clicked.

+ + + + + Cancel + + Welcome + + Confirm + + + + + + + + + + + + +``` diff --git a/static/usage/v8/modal/inline/basic/react.md b/static/usage/v8/modal/inline/basic/react.md new file mode 100644 index 00000000000..1ca9670066a --- /dev/null +++ b/static/usage/v8/modal/inline/basic/react.md @@ -0,0 +1,79 @@ +```tsx +import React, { useState, useRef } from 'react'; +import { + IonButtons, + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonItem, + IonInput, +} from '@ionic/react'; +import { OverlayEventDetail } from '@ionic/core/components'; + +function Example() { + const modal = useRef(null); + const input = useRef(null); + + const [message, setMessage] = useState( + 'This modal example uses triggers to automatically open a modal when the button is clicked.' + ); + + function confirm() { + modal.current?.dismiss(input.current?.value, 'confirm'); + } + + function onWillDismiss(ev: CustomEvent) { + if (ev.detail.role === 'confirm') { + setMessage(`Hello, ${ev.detail.data}!`); + } + } + + return ( + + + + Inline Modal + + + + + Open + +

{message}

+ onWillDismiss(ev)}> + + + + modal.current?.dismiss()}>Cancel + + Welcome + + confirm()}> + Confirm + + + + + + + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/inline/basic/vue.md b/static/usage/v8/modal/inline/basic/vue.md new file mode 100644 index 00000000000..5aac3115a1d --- /dev/null +++ b/static/usage/v8/modal/inline/basic/vue.md @@ -0,0 +1,71 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/inline/is-open/angular/example_component_html.md b/static/usage/v8/modal/inline/is-open/angular/example_component_html.md new file mode 100644 index 00000000000..b3be96215c3 --- /dev/null +++ b/static/usage/v8/modal/inline/is-open/angular/example_component_html.md @@ -0,0 +1,29 @@ +```html + + + Inline Modal + + + + Open + + + + + Modal + + Close + + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos + reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque, + dicta. +

+ + + + +``` diff --git a/static/usage/v8/modal/inline/is-open/angular/example_component_ts.md b/static/usage/v8/modal/inline/is-open/angular/example_component_ts.md new file mode 100644 index 00000000000..321577939a9 --- /dev/null +++ b/static/usage/v8/modal/inline/is-open/angular/example_component_ts.md @@ -0,0 +1,15 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + isModalOpen = false; + + setOpen(isOpen: boolean) { + this.isModalOpen = isOpen; + } +} +``` diff --git a/static/usage/v8/modal/inline/is-open/demo.html b/static/usage/v8/modal/inline/is-open/demo.html new file mode 100644 index 00000000000..01f817dd149 --- /dev/null +++ b/static/usage/v8/modal/inline/is-open/demo.html @@ -0,0 +1,46 @@ + + + + + + Modal | Inline + + + + + + + + + + + Inline Modal + + + + Open + + + + Modal + + Close + + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos + reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. + Eaque, dicta. +

+ + + + + + + + diff --git a/static/usage/v8/modal/inline/is-open/index.md b/static/usage/v8/modal/inline/is-open/index.md new file mode 100644 index 00000000000..b77d9dd8a7a --- /dev/null +++ b/static/usage/v8/modal/inline/is-open/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/modal/inline/is-open/javascript.md b/static/usage/v8/modal/inline/is-open/javascript.md new file mode 100644 index 00000000000..1893f105d79 --- /dev/null +++ b/static/usage/v8/modal/inline/is-open/javascript.md @@ -0,0 +1,31 @@ +```html + + + Inline Modal + + + + Open + + + + Modal + + Close + + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos + reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque, + dicta. +

+ + + + + +``` diff --git a/static/usage/v8/modal/inline/is-open/react.md b/static/usage/v8/modal/inline/is-open/react.md new file mode 100644 index 00000000000..7b337e8f4cc --- /dev/null +++ b/static/usage/v8/modal/inline/is-open/react.md @@ -0,0 +1,42 @@ +```tsx +import React, { useState } from 'react'; +import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react'; + +function Example() { + const [isOpen, setIsOpen] = useState(false); + + return ( + + + + Inline Modal + + + + setIsOpen(true)}> + Open + + + + + Modal + + setIsOpen(false)}>Close + + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos + reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. + Eaque, dicta. +

+ + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/inline/is-open/vue.md b/static/usage/v8/modal/inline/is-open/vue.md new file mode 100644 index 00000000000..19e4cb0557f --- /dev/null +++ b/static/usage/v8/modal/inline/is-open/vue.md @@ -0,0 +1,39 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/performance/mount/angular.md b/static/usage/v8/modal/performance/mount/angular.md new file mode 100644 index 00000000000..4b8bb7bc9d2 --- /dev/null +++ b/static/usage/v8/modal/performance/mount/angular.md @@ -0,0 +1,23 @@ +```html + + + Example + + + + Open Modal + + + + + + Cancel + + Modal + + + This content was mounted as soon as the modal was created. + + + +``` diff --git a/static/usage/v8/modal/performance/mount/demo.html b/static/usage/v8/modal/performance/mount/demo.html new file mode 100644 index 00000000000..018752e92f1 --- /dev/null +++ b/static/usage/v8/modal/performance/mount/demo.html @@ -0,0 +1,47 @@ + + + + + + Modal | Performance + + + + + + + + + + + Example + + + + Open Modal + + + + + Close + + Modal + + + This content was mounted as soon as the modal was created. + + + + + + + diff --git a/static/usage/v8/modal/performance/mount/index.md b/static/usage/v8/modal/performance/mount/index.md new file mode 100644 index 00000000000..16018d41230 --- /dev/null +++ b/static/usage/v8/modal/performance/mount/index.md @@ -0,0 +1,19 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/modal/performance/mount/javascript.md b/static/usage/v8/modal/performance/mount/javascript.md new file mode 100644 index 00000000000..a7dd685dad4 --- /dev/null +++ b/static/usage/v8/modal/performance/mount/javascript.md @@ -0,0 +1,32 @@ +```html + + + Example + + + + Open Modal + + + + + Close + + Modal + + + This content was mounted as soon as the modal was created. + + + + +``` diff --git a/static/usage/v8/modal/performance/mount/react.md b/static/usage/v8/modal/performance/mount/react.md new file mode 100644 index 00000000000..bb6a9c32360 --- /dev/null +++ b/static/usage/v8/modal/performance/mount/react.md @@ -0,0 +1,36 @@ +```tsx +import React, { useRef } from 'react'; +import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react'; + +function Example() { + const modal = useRef(null); + + return ( + + + + Example + + + + + Open Modal + + + + + + modal.current?.dismiss()}>Close + + Modal + + + This content was mounted as soon as the modal was created. + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/performance/mount/vue.md b/static/usage/v8/modal/performance/mount/vue.md new file mode 100644 index 00000000000..02dba8daf37 --- /dev/null +++ b/static/usage/v8/modal/performance/mount/vue.md @@ -0,0 +1,32 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/sheet/auto-height/angular/example_component_css.md b/static/usage/v8/modal/sheet/auto-height/angular/example_component_css.md new file mode 100644 index 00000000000..88d0e5c0594 --- /dev/null +++ b/static/usage/v8/modal/sheet/auto-height/angular/example_component_css.md @@ -0,0 +1,13 @@ +```css +.block { + width: 100%; + height: 300px; + display: flex; + align-items: center; + justify-content: center; +} + +ion-modal { + --height: auto; +} +``` diff --git a/static/usage/v8/modal/sheet/auto-height/angular/example_component_html.md b/static/usage/v8/modal/sheet/auto-height/angular/example_component_html.md new file mode 100644 index 00000000000..3280a3f9e85 --- /dev/null +++ b/static/usage/v8/modal/sheet/auto-height/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + + + App + + + + Open Sheet Modal + + + +
Block of Content
+ + + +``` diff --git a/static/usage/v8/modal/sheet/auto-height/demo.html b/static/usage/v8/modal/sheet/auto-height/demo.html new file mode 100644 index 00000000000..cae6c505043 --- /dev/null +++ b/static/usage/v8/modal/sheet/auto-height/demo.html @@ -0,0 +1,49 @@ + + + + + + Modal | Sheet + + + + + + + + + + + + App + + + + Open Sheet Modal + + +
Block of Content
+ + + + + + + diff --git a/static/usage/v8/modal/sheet/auto-height/index.md b/static/usage/v8/modal/sheet/auto-height/index.md new file mode 100644 index 00000000000..35cec0645c0 --- /dev/null +++ b/static/usage/v8/modal/sheet/auto-height/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/modal/sheet/auto-height/javascript.md b/static/usage/v8/modal/sheet/auto-height/javascript.md new file mode 100644 index 00000000000..fc82a43da02 --- /dev/null +++ b/static/usage/v8/modal/sheet/auto-height/javascript.md @@ -0,0 +1,35 @@ +```html + + + + + App + + + + Open Sheet Modal + + +
Block of Content
+ + + + +``` diff --git a/static/usage/v8/modal/sheet/auto-height/react/main_css.md b/static/usage/v8/modal/sheet/auto-height/react/main_css.md new file mode 100644 index 00000000000..88d0e5c0594 --- /dev/null +++ b/static/usage/v8/modal/sheet/auto-height/react/main_css.md @@ -0,0 +1,13 @@ +```css +.block { + width: 100%; + height: 300px; + display: flex; + align-items: center; + justify-content: center; +} + +ion-modal { + --height: auto; +} +``` diff --git a/static/usage/v8/modal/sheet/auto-height/react/main_tsx.md b/static/usage/v8/modal/sheet/auto-height/react/main_tsx.md new file mode 100644 index 00000000000..532f3e095c7 --- /dev/null +++ b/static/usage/v8/modal/sheet/auto-height/react/main_tsx.md @@ -0,0 +1,30 @@ +```tsx +import React, { useRef } from 'react'; +import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react'; + +import './main.css'; + +function Example() { + const modal = useRef(null); + + return ( + + + + App + + + + + Open Sheet Modal + + +
Block of Content
+ + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/sheet/auto-height/vue.md b/static/usage/v8/modal/sheet/auto-height/vue.md new file mode 100644 index 00000000000..c8501ba89e6 --- /dev/null +++ b/static/usage/v8/modal/sheet/auto-height/vue.md @@ -0,0 +1,34 @@ +```html + + + + + +``` diff --git a/static/usage/v8/modal/sheet/background-content/angular/example_component_css.md b/static/usage/v8/modal/sheet/background-content/angular/example_component_css.md new file mode 100644 index 00000000000..8730cae2d21 --- /dev/null +++ b/static/usage/v8/modal/sheet/background-content/angular/example_component_css.md @@ -0,0 +1,7 @@ +```css +.counter__section { + display: flex; + align-items: center; + justify-content: space-between; +} +``` diff --git a/static/usage/v8/modal/sheet/background-content/angular/example_component_html.md b/static/usage/v8/modal/sheet/background-content/angular/example_component_html.md new file mode 100644 index 00000000000..286c8e66487 --- /dev/null +++ b/static/usage/v8/modal/sheet/background-content/angular/example_component_html.md @@ -0,0 +1,72 @@ +```html +
+ + + App + + + +

You can interact with the +/- buttons until the sheet is fully expanded.

+ +
+ - +

{{count }}

+ + +
+ + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + +
+``` diff --git a/static/usage/v8/modal/sheet/background-content/angular/example_component_ts.md b/static/usage/v8/modal/sheet/background-content/angular/example_component_ts.md new file mode 100644 index 00000000000..e132d2f84c7 --- /dev/null +++ b/static/usage/v8/modal/sheet/background-content/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + count = 0; + + increment() { + this.count++; + } + + decrement() { + this.count--; + } +} +``` diff --git a/static/usage/v8/modal/sheet/background-content/demo.html b/static/usage/v8/modal/sheet/background-content/demo.html new file mode 100644 index 00000000000..b2919a37f5c --- /dev/null +++ b/static/usage/v8/modal/sheet/background-content/demo.html @@ -0,0 +1,103 @@ + + + + + + Modal | Sheet + + + + + + + + + + + + App + + + +

You can interact with the +/- buttons until the sheet is fully expanded.

+ +
+ - +

0

+ + +
+ + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + + + + + diff --git a/static/usage/v8/modal/sheet/background-content/index.md b/static/usage/v8/modal/sheet/background-content/index.md new file mode 100644 index 00000000000..5cd5560d122 --- /dev/null +++ b/static/usage/v8/modal/sheet/background-content/index.md @@ -0,0 +1,28 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/modal/sheet/background-content/javascript.md b/static/usage/v8/modal/sheet/background-content/javascript.md new file mode 100644 index 00000000000..7d58104e6dd --- /dev/null +++ b/static/usage/v8/modal/sheet/background-content/javascript.md @@ -0,0 +1,89 @@ +```html + + + + + App + + + +

You can interact with the +/- buttons until the sheet is fully expanded.

+ +
+ - +

0

+ + +
+ + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + + +``` diff --git a/static/usage/v8/modal/sheet/background-content/react.md b/static/usage/v8/modal/sheet/background-content/react.md new file mode 100644 index 00000000000..e6325909f99 --- /dev/null +++ b/static/usage/v8/modal/sheet/background-content/react.md @@ -0,0 +1,100 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonAvatar, + IonImg, + IonSearchbar, +} from '@ionic/react'; + +function Example() { + const modal = useRef(null); + const [count, setCount] = useState(0); + + return ( + + + + App + + + +

You can interact with the +/- buttons until the sheet is fully expanded.

+
+ setCount(count - 1)}>- +

{count}

+ setCount(count + 1)}>+ +
+ + + modal.current?.setCurrentBreakpoint(0.75)} placeholder="Search"> + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/sheet/background-content/vue.md b/static/usage/v8/modal/sheet/background-content/vue.md new file mode 100644 index 00000000000..d8dea197856 --- /dev/null +++ b/static/usage/v8/modal/sheet/background-content/vue.md @@ -0,0 +1,98 @@ +```html + + + + + +``` diff --git a/static/usage/v8/modal/sheet/basic/angular.md b/static/usage/v8/modal/sheet/basic/angular.md new file mode 100644 index 00000000000..6561e311463 --- /dev/null +++ b/static/usage/v8/modal/sheet/basic/angular.md @@ -0,0 +1,56 @@ +```html + + + App + + + + Open Sheet Modal + + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + +``` diff --git a/static/usage/v8/modal/sheet/basic/demo.html b/static/usage/v8/modal/sheet/basic/demo.html new file mode 100644 index 00000000000..e1616a939f8 --- /dev/null +++ b/static/usage/v8/modal/sheet/basic/demo.html @@ -0,0 +1,80 @@ + + + + + + Modal | Sheet + + + + + + + + + + + App + + + + Open Sheet Modal + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + + + + + diff --git a/static/usage/v8/modal/sheet/basic/index.md b/static/usage/v8/modal/sheet/basic/index.md new file mode 100644 index 00000000000..837a75b0494 --- /dev/null +++ b/static/usage/v8/modal/sheet/basic/index.md @@ -0,0 +1,19 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/modal/sheet/basic/javascript.md b/static/usage/v8/modal/sheet/basic/javascript.md new file mode 100644 index 00000000000..2fb52ea2242 --- /dev/null +++ b/static/usage/v8/modal/sheet/basic/javascript.md @@ -0,0 +1,65 @@ +```html + + + App + + + + Open Sheet Modal + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + + +``` diff --git a/static/usage/v8/modal/sheet/basic/react.md b/static/usage/v8/modal/sheet/basic/react.md new file mode 100644 index 00000000000..4d813d1783f --- /dev/null +++ b/static/usage/v8/modal/sheet/basic/react.md @@ -0,0 +1,82 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonAvatar, + IonImg, + IonSearchbar, +} from '@ionic/react'; + +function Example() { + const modal = useRef(null); + + return ( + + + + App + + + + + Open Sheet Modal + + + + modal.current?.setCurrentBreakpoint(0.75)} placeholder="Search"> + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/sheet/basic/vue.md b/static/usage/v8/modal/sheet/basic/vue.md new file mode 100644 index 00000000000..ad5847eb53a --- /dev/null +++ b/static/usage/v8/modal/sheet/basic/vue.md @@ -0,0 +1,73 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/sheet/handle-behavior/angular.md b/static/usage/v8/modal/sheet/handle-behavior/angular.md new file mode 100644 index 00000000000..d6f30b1ca8f --- /dev/null +++ b/static/usage/v8/modal/sheet/handle-behavior/angular.md @@ -0,0 +1,25 @@ +```html + + + App + + + + Open Sheet Modal + + + + +
+ Click the handle above to advance to the next breakpoint. +
+ + + + +``` diff --git a/static/usage/v8/modal/sheet/handle-behavior/demo.html b/static/usage/v8/modal/sheet/handle-behavior/demo.html new file mode 100644 index 00000000000..4c0962ca7c1 --- /dev/null +++ b/static/usage/v8/modal/sheet/handle-behavior/demo.html @@ -0,0 +1,39 @@ + + + + + + Modal | Sheet + + + + + + + + + + + App + + + + Open Sheet Modal + + + +
+ Click the handle above to advance to the next breakpoint. +
+ + + + + + + + diff --git a/static/usage/v8/modal/sheet/handle-behavior/index.md b/static/usage/v8/modal/sheet/handle-behavior/index.md new file mode 100644 index 00000000000..11ed9f04493 --- /dev/null +++ b/static/usage/v8/modal/sheet/handle-behavior/index.md @@ -0,0 +1,19 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/modal/sheet/handle-behavior/javascript.md b/static/usage/v8/modal/sheet/handle-behavior/javascript.md new file mode 100644 index 00000000000..8215dd69636 --- /dev/null +++ b/static/usage/v8/modal/sheet/handle-behavior/javascript.md @@ -0,0 +1,24 @@ +```html + + + App + + + + Open Sheet Modal + + + +
+ Click the handle above to advance to the next breakpoint. +
+ + + + + +``` diff --git a/static/usage/v8/modal/sheet/handle-behavior/react.md b/static/usage/v8/modal/sheet/handle-behavior/react.md new file mode 100644 index 00000000000..bb415ae6bb2 --- /dev/null +++ b/static/usage/v8/modal/sheet/handle-behavior/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonLabel } from '@ionic/react'; + +function Example() { + return ( + + + + App + + + + + Open Sheet Modal + + + +
+ Click the handle above to advance to the next breakpoint. +
+ + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/sheet/handle-behavior/vue.md b/static/usage/v8/modal/sheet/handle-behavior/vue.md new file mode 100644 index 00000000000..6163493a9d3 --- /dev/null +++ b/static/usage/v8/modal/sheet/handle-behavior/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/styling/animations/angular/example_component_html.md b/static/usage/v8/modal/styling/animations/angular/example_component_html.md new file mode 100644 index 00000000000..befb0873d45 --- /dev/null +++ b/static/usage/v8/modal/styling/animations/angular/example_component_html.md @@ -0,0 +1,63 @@ +```html + + + App + + + + Open Modal + + + + + + Modal + + Close + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + +``` diff --git a/static/usage/v8/modal/styling/animations/angular/example_component_ts.md b/static/usage/v8/modal/styling/animations/angular/example_component_ts.md new file mode 100644 index 00000000000..c4a743b2745 --- /dev/null +++ b/static/usage/v8/modal/styling/animations/angular/example_component_ts.md @@ -0,0 +1,40 @@ +```ts +import { Component } from '@angular/core'; +import { AnimationController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + constructor(private animationCtrl: AnimationController) {} + + enterAnimation = (baseEl: HTMLElement) => { + const root = baseEl.shadowRoot; + + const backdropAnimation = this.animationCtrl + .create() + .addElement(root.querySelector('ion-backdrop')!) + .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); + + const wrapperAnimation = this.animationCtrl + .create() + .addElement(root.querySelector('.modal-wrapper')!) + .keyframes([ + { offset: 0, opacity: '0', transform: 'scale(0)' }, + { offset: 1, opacity: '0.99', transform: 'scale(1)' }, + ]); + + return this.animationCtrl + .create() + .addElement(baseEl) + .easing('ease-out') + .duration(500) + .addAnimation([backdropAnimation, wrapperAnimation]); + }; + + leaveAnimation = (baseEl: HTMLElement) => { + return this.enterAnimation(baseEl).direction('reverse'); + }; +} +``` diff --git a/static/usage/v8/modal/styling/animations/demo.html b/static/usage/v8/modal/styling/animations/demo.html new file mode 100644 index 00000000000..9a902c8133b --- /dev/null +++ b/static/usage/v8/modal/styling/animations/demo.html @@ -0,0 +1,114 @@ + + + + + + Modal | Animations + + + + + + + + + + + + App + + + + Open Modal + + + + + Modal + + Close + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + + + + + diff --git a/static/usage/v8/modal/styling/animations/index.md b/static/usage/v8/modal/styling/animations/index.md new file mode 100644 index 00000000000..71a8d6519dd --- /dev/null +++ b/static/usage/v8/modal/styling/animations/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import vue from './vue.md'; +import react from './react.md'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/modal/styling/animations/javascript/index_html.md b/static/usage/v8/modal/styling/animations/javascript/index_html.md new file mode 100644 index 00000000000..d7210184ac2 --- /dev/null +++ b/static/usage/v8/modal/styling/animations/javascript/index_html.md @@ -0,0 +1,95 @@ +```html + + + App + + + + Open Modal + + + + + Modal + + Close + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + + +``` diff --git a/static/usage/v8/modal/styling/animations/javascript/index_ts.md b/static/usage/v8/modal/styling/animations/javascript/index_ts.md new file mode 100644 index 00000000000..c2f8d9eb485 --- /dev/null +++ b/static/usage/v8/modal/styling/animations/javascript/index_ts.md @@ -0,0 +1,9 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { createAnimation } from '@ionic/core'; + +defineCustomElements(); + +(window as any).createAnimation = createAnimation; +``` diff --git a/static/usage/v8/modal/styling/animations/react.md b/static/usage/v8/modal/styling/animations/react.md new file mode 100644 index 00000000000..06dfa9d70ff --- /dev/null +++ b/static/usage/v8/modal/styling/animations/react.md @@ -0,0 +1,123 @@ +```tsx +import React, { useRef } from 'react'; +import { + createAnimation, + IonButtons, + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonAvatar, + IonImg, +} from '@ionic/react'; + +function Example() { + const modal = useRef(null); + + function dismiss() { + modal.current?.dismiss(); + } + + const enterAnimation = (baseEl: HTMLElement) => { + const root = baseEl.shadowRoot; + + const backdropAnimation = createAnimation() + .addElement(root?.querySelector('ion-backdrop')!) + .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); + + const wrapperAnimation = createAnimation() + .addElement(root?.querySelector('.modal-wrapper')!) + .keyframes([ + { offset: 0, opacity: '0', transform: 'scale(0)' }, + { offset: 1, opacity: '0.99', transform: 'scale(1)' }, + ]); + + return createAnimation() + .addElement(baseEl) + .easing('ease-out') + .duration(500) + .addAnimation([backdropAnimation, wrapperAnimation]); + }; + + const leaveAnimation = (baseEl: HTMLElement) => { + return enterAnimation(baseEl).direction('reverse'); + }; + + return ( + + + + App + + + + + Open Modal + + + + + Modal + + dismiss()}>Close + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/styling/animations/vue.md b/static/usage/v8/modal/styling/animations/vue.md new file mode 100644 index 00000000000..9cc28a39ed8 --- /dev/null +++ b/static/usage/v8/modal/styling/animations/vue.md @@ -0,0 +1,109 @@ +```html + + + +``` diff --git a/static/usage/v8/modal/styling/theming/angular/example_component_html.md b/static/usage/v8/modal/styling/theming/angular/example_component_html.md new file mode 100644 index 00000000000..2d18a6f26d9 --- /dev/null +++ b/static/usage/v8/modal/styling/theming/angular/example_component_html.md @@ -0,0 +1,61 @@ +```html + + + App + + + + Open Modal + + + + + + Modal + + Close + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + +``` diff --git a/static/usage/v8/modal/styling/theming/angular/global_css.md b/static/usage/v8/modal/styling/theming/angular/global_css.md new file mode 100644 index 00000000000..00b7c80f86d --- /dev/null +++ b/static/usage/v8/modal/styling/theming/angular/global_css.md @@ -0,0 +1,17 @@ +```css +ion-modal { + --height: 50%; + --border-radius: 16px; + --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); +} + +ion-modal::part(backdrop) { + background: rgba(209, 213, 219); + opacity: 1; +} + +ion-modal ion-toolbar { + --background: rgb(14 116 144); + --color: white; +} +``` diff --git a/static/usage/v8/modal/styling/theming/demo.html b/static/usage/v8/modal/styling/theming/demo.html new file mode 100644 index 00000000000..8711d7920bc --- /dev/null +++ b/static/usage/v8/modal/styling/theming/demo.html @@ -0,0 +1,99 @@ + + + + + + Modal | Theming + + + + + + + + + + + + App + + + + Open Modal + + + + + Modal + + Close + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + + + + + diff --git a/static/usage/v8/modal/styling/theming/index.md b/static/usage/v8/modal/styling/theming/index.md new file mode 100644 index 00000000000..3d0ebd17096 --- /dev/null +++ b/static/usage/v8/modal/styling/theming/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_global_css from './angular/global_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/modal/styling/theming/javascript.md b/static/usage/v8/modal/styling/theming/javascript.md new file mode 100644 index 00000000000..cb63f145ad9 --- /dev/null +++ b/static/usage/v8/modal/styling/theming/javascript.md @@ -0,0 +1,87 @@ +```html + + + + + + App + + + + Open Modal + + + + + Modal + + Close + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + + + +``` diff --git a/static/usage/v8/modal/styling/theming/react/main_css.md b/static/usage/v8/modal/styling/theming/react/main_css.md new file mode 100644 index 00000000000..c1d585b8f72 --- /dev/null +++ b/static/usage/v8/modal/styling/theming/react/main_css.md @@ -0,0 +1,17 @@ +```css +ion-modal#example-modal { + --height: 50%; + --border-radius: 16px; + --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); +} + +ion-modal#example-modal::part(backdrop) { + background: rgba(209, 213, 219); + opacity: 1; +} + +ion-modal#example-modal ion-toolbar { + --background: rgb(14 116 144); + --color: white; +} +``` diff --git a/static/usage/v8/modal/styling/theming/react/main_tsx.md b/static/usage/v8/modal/styling/theming/react/main_tsx.md new file mode 100644 index 00000000000..7c8509879ab --- /dev/null +++ b/static/usage/v8/modal/styling/theming/react/main_tsx.md @@ -0,0 +1,95 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonButtons, + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonAvatar, + IonImg, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + const modal = useRef(null); + + function dismiss() { + modal.current?.dismiss(); + } + + return ( + + + + App + + + + + Open Modal + + + + + Modal + + dismiss()}> + Close + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/modal/styling/theming/vue.md b/static/usage/v8/modal/styling/theming/vue.md new file mode 100644 index 00000000000..fb5d2d6868f --- /dev/null +++ b/static/usage/v8/modal/styling/theming/vue.md @@ -0,0 +1,101 @@ +```html + + + + + +``` diff --git a/static/usage/v8/nav/modal-navigation/angular/app_module_ts.md b/static/usage/v8/nav/modal-navigation/angular/app_module_ts.md new file mode 100644 index 00000000000..d3b8b44f6ce --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/angular/app_module_ts.md @@ -0,0 +1,21 @@ +```ts +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; +import { ExampleComponent } from './example.component'; + +import { PageOneComponent } from './page-one.component'; +import { PageTwoComponent } from './page-two.component'; +import { PageThreeComponent } from './page-three.component'; + +@NgModule({ + imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})], + declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` diff --git a/static/usage/v8/nav/modal-navigation/angular/example_component_html.md b/static/usage/v8/nav/modal-navigation/angular/example_component_html.md new file mode 100644 index 00000000000..06d46334df5 --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/angular/example_component_html.md @@ -0,0 +1,25 @@ +```html + + + Modal Navigation + + + + Open Modal + + + + + Modal + + Close + + + + + + + + + +``` diff --git a/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md new file mode 100644 index 00000000000..366dc7e246d --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/angular/example_component_ts.md @@ -0,0 +1,18 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { IonNav } from '@ionic/angular'; + +import { PageOneComponent } from './page-one.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChild('nav') private nav: IonNav; + + onWillPresent() { + this.nav.setRoot(PageOneComponent); + } +} +``` diff --git a/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md new file mode 100644 index 00000000000..3c9ec863d04 --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/angular/page_one_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonNav } from '@ionic/angular'; + +import { PageTwoComponent } from './page-two.component'; + +@Component({ + selector: 'app-page-one', + template: ` + +

Page One

+ Go to Page Two + + `, +}) +export class PageOneComponent { + constructor(private nav: IonNav) {} + + navigateToPageTwo() { + this.nav.push(PageTwoComponent); + } +} +``` diff --git a/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md new file mode 100644 index 00000000000..5b1b70c3474 --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/angular/page_three_component_ts.md @@ -0,0 +1,26 @@ +```ts +import { Component } from '@angular/core'; +import { IonNav } from '@ionic/angular'; + +@Component({ + selector: 'app-page-one', + template: ` + +

Page Three

+ Go Back + Go to Root + + `, +}) +export class PageThreeComponent { + constructor(private nav: IonNav) {} + + navigateBack() { + this.nav.pop(); + } + + navigateToRoot() { + this.nav.popToRoot(); + } +} +``` diff --git a/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md new file mode 100644 index 00000000000..0cd5713c062 --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/angular/page_two_component_ts.md @@ -0,0 +1,25 @@ +```ts +import { Component } from '@angular/core'; +import { IonNav } from '@ionic/angular'; + +import { PageThreeComponent } from './page-three.component'; + +@Component({ + selector: 'app-page-two', + template: ` + +

Page Two

+ Go to Page Three + + `, +}) +export class PageTwoComponent { + component = PageThreeComponent; + + constructor(private nav: IonNav) {} + + navigateToPageThree() { + this.nav.push(PageThreeComponent); + } +} +``` diff --git a/static/usage/v8/nav/modal-navigation/demo.html b/static/usage/v8/nav/modal-navigation/demo.html new file mode 100644 index 00000000000..4bc94395247 --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/demo.html @@ -0,0 +1,100 @@ + + + + + + + Nav | Modal Navigation + + + + + + + + + + + Modal Navigation + + + + Open Modal + + + + Modal + + Close + + + + + + + + + + + + + diff --git a/static/usage/v8/nav/modal-navigation/index.md b/static/usage/v8/nav/modal-navigation/index.md new file mode 100644 index 00000000000..73ce3215f66 --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/index.md @@ -0,0 +1,56 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_app_module_ts from './angular/app_module_ts.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_page_one_component_ts from './angular/page_one_component_ts.md'; +import angular_page_two_component_ts from './angular/page_two_component_ts.md'; +import angular_page_three_component_ts from './angular/page_three_component_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_page_one_tsx from './react/page_one_tsx.md'; +import react_page_two_tsx from './react/page_two_tsx.md'; +import react_page_three_tsx from './react/page_three_tsx.md'; + +import vue_example from './vue/example_vue.md'; +import vue_page_one from './vue/page_one_vue.md'; +import vue_page_two from './vue/page_two_vue.md'; +import vue_page_three from './vue/page_three_vue.md'; + + diff --git a/static/usage/v8/nav/modal-navigation/javascript.md b/static/usage/v8/nav/modal-navigation/javascript.md new file mode 100644 index 00000000000..5fd4e9ef13a --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/javascript.md @@ -0,0 +1,86 @@ +```html + + + + Modal Navigation + + + + Open Modal + + + + Modal + + Close + + + + + + + + + + + +``` diff --git a/static/usage/v8/nav/modal-navigation/react/main_tsx.md b/static/usage/v8/nav/modal-navigation/react/main_tsx.md new file mode 100644 index 00000000000..fc6901b3d6d --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/react/main_tsx.md @@ -0,0 +1,60 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonNav, + IonPage, + IonHeader, + IonToolbar, + IonTitle, + IonButton, + IonButtons, + IonContent, + IonModal, +} from '@ionic/react'; + +import PageOne from './page-one'; + +function Example() { + const nav = useRef(null); + const modal = useRef(null); + + const didPresent = () => { + if (nav.current) { + nav.current.setRoot(PageOne, { nav: nav.current }); + } + }; + + const dismiss = () => { + if (modal.current) { + modal.current.dismiss(); + } + }; + + return ( + + + + Modal Navigation + + + + Open Modal + + + + Modal + + Close + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/nav/modal-navigation/react/page_one_tsx.md b/static/usage/v8/nav/modal-navigation/react/page_one_tsx.md new file mode 100644 index 00000000000..ce5c266e21b --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/react/page_one_tsx.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent } from '@ionic/react'; + +import PageTwo from './page-two'; + +function PageOne({ nav }: { nav: HTMLIonNavElement }) { + const navigateToPageTwo = () => nav.push(PageTwo, { nav }); + return ( + +

Page One

+ Go to Page Two + + ); +} + +export default PageOne; +``` diff --git a/static/usage/v8/nav/modal-navigation/react/page_three_tsx.md b/static/usage/v8/nav/modal-navigation/react/page_three_tsx.md new file mode 100644 index 00000000000..3613967edfd --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/react/page_three_tsx.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent } from '@ionic/react'; + +function PageThree({ nav }: { nav: HTMLIonNavElement }) { + const navigateBack = () => nav.pop(); + const navigateToRoot = () => nav.popToRoot(); + + return ( + +

Page Three

+ Go Back + Go to Root + + ); +} + +export default PageThree; +``` diff --git a/static/usage/v8/nav/modal-navigation/react/page_two_tsx.md b/static/usage/v8/nav/modal-navigation/react/page_two_tsx.md new file mode 100644 index 00000000000..48562bd23cd --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/react/page_two_tsx.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent } from '@ionic/react'; + +import PageThree from './page-three'; + +function PageTwo({ nav }: { nav: HTMLIonNavElement }) { + const navigateToPageThree = () => nav.push(PageThree, { nav }); + + return ( + +

Page Two

+ Go to Page Three + + ); +} + +export default PageTwo; +``` diff --git a/static/usage/v8/nav/modal-navigation/vue/example_vue.md b/static/usage/v8/nav/modal-navigation/vue/example_vue.md new file mode 100644 index 00000000000..ad5242e5c06 --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/vue/example_vue.md @@ -0,0 +1,60 @@ +```html + + + +``` diff --git a/static/usage/v8/nav/modal-navigation/vue/page_one_vue.md b/static/usage/v8/nav/modal-navigation/vue/page_one_vue.md new file mode 100644 index 00000000000..94613725139 --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/vue/page_one_vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v8/nav/modal-navigation/vue/page_three_vue.md b/static/usage/v8/nav/modal-navigation/vue/page_three_vue.md new file mode 100644 index 00000000000..9dde8817996 --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/vue/page_three_vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v8/nav/modal-navigation/vue/page_two_vue.md b/static/usage/v8/nav/modal-navigation/vue/page_two_vue.md new file mode 100644 index 00000000000..737fa71158b --- /dev/null +++ b/static/usage/v8/nav/modal-navigation/vue/page_two_vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v8/nav/nav-link/angular/app_module_ts.md b/static/usage/v8/nav/nav-link/angular/app_module_ts.md new file mode 100644 index 00000000000..d3b8b44f6ce --- /dev/null +++ b/static/usage/v8/nav/nav-link/angular/app_module_ts.md @@ -0,0 +1,21 @@ +```ts +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouterModule } from '@angular/router'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; +import { ExampleComponent } from './example.component'; + +import { PageOneComponent } from './page-one.component'; +import { PageTwoComponent } from './page-two.component'; +import { PageThreeComponent } from './page-three.component'; + +@NgModule({ + imports: [BrowserModule, RouterModule.forRoot([]), IonicModule.forRoot({})], + declarations: [AppComponent, ExampleComponent, PageOneComponent, PageTwoComponent, PageThreeComponent], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` diff --git a/static/usage/v8/nav/nav-link/angular/example_component_html.md b/static/usage/v8/nav/nav-link/angular/example_component_html.md new file mode 100644 index 00000000000..1534ea3a6ec --- /dev/null +++ b/static/usage/v8/nav/nav-link/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/nav/nav-link/angular/example_component_ts.md b/static/usage/v8/nav/nav-link/angular/example_component_ts.md new file mode 100644 index 00000000000..b123a4858ce --- /dev/null +++ b/static/usage/v8/nav/nav-link/angular/example_component_ts.md @@ -0,0 +1,13 @@ +```ts +import { Component } from '@angular/core'; + +import { PageOneComponent } from './page-one.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + component = PageOneComponent; +} +``` diff --git a/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md new file mode 100644 index 00000000000..06c42b342cf --- /dev/null +++ b/static/usage/v8/nav/nav-link/angular/page_one_component_ts.md @@ -0,0 +1,25 @@ +```ts +import { Component } from '@angular/core'; + +import { PageTwoComponent } from './page-two.component'; + +@Component({ + selector: 'app-page-one', + template: ` + + + Page One + + + +

Page One

+ + Go to Page Two + + + `, +}) +export class PageOneComponent { + component = PageTwoComponent; +} +``` diff --git a/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md new file mode 100644 index 00000000000..d9e95ed7218 --- /dev/null +++ b/static/usage/v8/nav/nav-link/angular/page_three_component_ts.md @@ -0,0 +1,21 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-page-one', + template: ` + + + + + + Page Three + + + +

Page Three

+ + `, +}) +export class PageThreeComponent {} +``` diff --git a/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md new file mode 100644 index 00000000000..d6edd90a593 --- /dev/null +++ b/static/usage/v8/nav/nav-link/angular/page_two_component_ts.md @@ -0,0 +1,30 @@ +```ts +import { Component } from '@angular/core'; + +import { PageThreeComponent } from './page-three.component'; + +@Component({ + selector: 'app-page-two', + template: ` + + + + + + Page Two + + + +

Page Two

+
+ + Go to Page Three + +
+ + `, +}) +export class PageTwoComponent { + component = PageThreeComponent; +} +``` diff --git a/static/usage/v8/nav/nav-link/demo.html b/static/usage/v8/nav/nav-link/demo.html new file mode 100644 index 00000000000..8ff541c5f02 --- /dev/null +++ b/static/usage/v8/nav/nav-link/demo.html @@ -0,0 +1,81 @@ + + + + + + + Nav | NavLink + + + + + + + + + + + + + + diff --git a/static/usage/v8/nav/nav-link/index.md b/static/usage/v8/nav/nav-link/index.md new file mode 100644 index 00000000000..de4e4e01562 --- /dev/null +++ b/static/usage/v8/nav/nav-link/index.md @@ -0,0 +1,55 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_app_module_ts from './angular/app_module_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_page_one_component_ts from './angular/page_one_component_ts.md'; +import angular_page_two_component_ts from './angular/page_two_component_ts.md'; +import angular_page_three_component_ts from './angular/page_three_component_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_page_one_tsx from './react/page_one_tsx.md'; +import react_page_two_tsx from './react/page_two_tsx.md'; +import react_page_three_tsx from './react/page_three_tsx.md'; + +import vue_example from './vue/example_vue.md'; +import vue_page_one from './vue/page_one_vue.md'; +import vue_page_two from './vue/page_two_vue.md'; +import vue_page_three from './vue/page_three_vue.md'; + + diff --git a/static/usage/v8/nav/nav-link/javascript.md b/static/usage/v8/nav/nav-link/javascript.md new file mode 100644 index 00000000000..faf19dc3ca7 --- /dev/null +++ b/static/usage/v8/nav/nav-link/javascript.md @@ -0,0 +1,67 @@ +```html + + + + + +``` diff --git a/static/usage/v8/nav/nav-link/react/main_tsx.md b/static/usage/v8/nav/nav-link/react/main_tsx.md new file mode 100644 index 00000000000..f6196a362e9 --- /dev/null +++ b/static/usage/v8/nav/nav-link/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonNav } from '@ionic/react'; + +import PageOne from './page-one'; + +function Example() { + return }>; +} +export default Example; +``` diff --git a/static/usage/v8/nav/nav-link/react/page_one_tsx.md b/static/usage/v8/nav/nav-link/react/page_one_tsx.md new file mode 100644 index 00000000000..303ad18547a --- /dev/null +++ b/static/usage/v8/nav/nav-link/react/page_one_tsx.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react'; + +import PageTwo from './page-two'; + +function PageOne() { + return ( + <> + + + Page One + + + +

Page One

+ }> + Go to Page Two + + + + ); +} + +export default PageOne; +``` diff --git a/static/usage/v8/nav/nav-link/react/page_three_tsx.md b/static/usage/v8/nav/nav-link/react/page_three_tsx.md new file mode 100644 index 00000000000..451d30db85d --- /dev/null +++ b/static/usage/v8/nav/nav-link/react/page_three_tsx.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react'; + +function PageThree() { + return ( + <> + + + + + + Page Three + + + +

Page Three

+ + + ); +} + +export default PageThree; +``` diff --git a/static/usage/v8/nav/nav-link/react/page_two_tsx.md b/static/usage/v8/nav/nav-link/react/page_two_tsx.md new file mode 100644 index 00000000000..fd3f8764873 --- /dev/null +++ b/static/usage/v8/nav/nav-link/react/page_two_tsx.md @@ -0,0 +1,38 @@ +```tsx +import React from 'react'; +import { + IonBackButton, + IonButtons, + IonButton, + IonHeader, + IonContent, + IonNavLink, + IonToolbar, + IonTitle, +} from '@ionic/react'; + +import PageThree from './page-three'; + +function PageTwo() { + return ( + <> + + + + + + Page Two + + + +

Page Two

+ }> + Go to Page Three + + + + ); +} + +export default PageTwo; +``` diff --git a/static/usage/v8/nav/nav-link/vue/example_vue.md b/static/usage/v8/nav/nav-link/vue/example_vue.md new file mode 100644 index 00000000000..0d1bb74fb60 --- /dev/null +++ b/static/usage/v8/nav/nav-link/vue/example_vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v8/nav/nav-link/vue/page_one_vue.md b/static/usage/v8/nav/nav-link/vue/page_one_vue.md new file mode 100644 index 00000000000..6597688ea05 --- /dev/null +++ b/static/usage/v8/nav/nav-link/vue/page_one_vue.md @@ -0,0 +1,30 @@ +```html + + + +``` diff --git a/static/usage/v8/nav/nav-link/vue/page_three_vue.md b/static/usage/v8/nav/nav-link/vue/page_three_vue.md new file mode 100644 index 00000000000..54d6acf24c9 --- /dev/null +++ b/static/usage/v8/nav/nav-link/vue/page_three_vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v8/nav/nav-link/vue/page_two_vue.md b/static/usage/v8/nav/nav-link/vue/page_two_vue.md new file mode 100644 index 00000000000..ceb17385968 --- /dev/null +++ b/static/usage/v8/nav/nav-link/vue/page_two_vue.md @@ -0,0 +1,51 @@ +```html + + + +``` diff --git a/static/usage/v8/note/basic/angular.md b/static/usage/v8/note/basic/angular.md new file mode 100644 index 00000000000..2c59ef63faa --- /dev/null +++ b/static/usage/v8/note/basic/angular.md @@ -0,0 +1,3 @@ +```html +Default Note +``` diff --git a/static/usage/v8/note/basic/demo.html b/static/usage/v8/note/basic/demo.html new file mode 100644 index 00000000000..b6662b02dbc --- /dev/null +++ b/static/usage/v8/note/basic/demo.html @@ -0,0 +1,22 @@ + + + + + + Note + + + + + + + + + +
+ Default Note +
+ + + + diff --git a/static/usage/v8/note/basic/index.md b/static/usage/v8/note/basic/index.md new file mode 100644 index 00000000000..c1ff54b6c74 --- /dev/null +++ b/static/usage/v8/note/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/note/basic/javascript.md b/static/usage/v8/note/basic/javascript.md new file mode 100644 index 00000000000..2c59ef63faa --- /dev/null +++ b/static/usage/v8/note/basic/javascript.md @@ -0,0 +1,3 @@ +```html +Default Note +``` diff --git a/static/usage/v8/note/basic/react.md b/static/usage/v8/note/basic/react.md new file mode 100644 index 00000000000..9f1cdb45225 --- /dev/null +++ b/static/usage/v8/note/basic/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonNote } from '@ionic/react'; + +function Example() { + return ( + <> + Default Note + + ); +} +export default Example; +``` diff --git a/static/usage/v8/note/basic/vue.md b/static/usage/v8/note/basic/vue.md new file mode 100644 index 00000000000..dffb1348fc9 --- /dev/null +++ b/static/usage/v8/note/basic/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/note/item/angular.md b/static/usage/v8/note/item/angular.md new file mode 100644 index 00000000000..0d26cf33b27 --- /dev/null +++ b/static/usage/v8/note/item/angular.md @@ -0,0 +1,11 @@ +```html + + Label + Note (End) + + + + Note (Start) + Label + +``` diff --git a/static/usage/v8/note/item/demo.html b/static/usage/v8/note/item/demo.html new file mode 100644 index 00000000000..d6558dc7e22 --- /dev/null +++ b/static/usage/v8/note/item/demo.html @@ -0,0 +1,36 @@ + + + + + + Note + + + + + + + + + + + +
+ + Label + Note (End) + + + + Note (Start) + Label + +
+ + + + diff --git a/static/usage/v8/note/item/index.md b/static/usage/v8/note/item/index.md new file mode 100644 index 00000000000..5c32457e008 --- /dev/null +++ b/static/usage/v8/note/item/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/note/item/javascript.md b/static/usage/v8/note/item/javascript.md new file mode 100644 index 00000000000..0d26cf33b27 --- /dev/null +++ b/static/usage/v8/note/item/javascript.md @@ -0,0 +1,11 @@ +```html + + Label + Note (End) + + + + Note (Start) + Label + +``` diff --git a/static/usage/v8/note/item/react.md b/static/usage/v8/note/item/react.md new file mode 100644 index 00000000000..422ba6eff85 --- /dev/null +++ b/static/usage/v8/note/item/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonNote } from '@ionic/react'; + +function Example() { + return ( + <> + + Label + Note (End) + + + + Note (Start) + Label + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/note/item/vue.md b/static/usage/v8/note/item/vue.md new file mode 100644 index 00000000000..24b7add1ed1 --- /dev/null +++ b/static/usage/v8/note/item/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v8/note/theming/colors/angular.md b/static/usage/v8/note/theming/colors/angular.md new file mode 100644 index 00000000000..2740648d5ad --- /dev/null +++ b/static/usage/v8/note/theming/colors/angular.md @@ -0,0 +1,12 @@ +```html +Default Note +Primary Note +Secondary Note +Tertiary Note +Success Note +Warning Note +Danger Note +Light Note +Medium Note +Dark Note +``` diff --git a/static/usage/v8/note/theming/colors/demo.html b/static/usage/v8/note/theming/colors/demo.html new file mode 100644 index 00000000000..db387632ea0 --- /dev/null +++ b/static/usage/v8/note/theming/colors/demo.html @@ -0,0 +1,47 @@ + + + + + + Note + + + + + + + + + + + +
+
+ Default Note + Primary Note + Secondary Note + Tertiary Note + Success Note + Warning Note + Danger Note + Light Note + Medium Note + Dark Note +
+
+ + + + diff --git a/static/usage/v8/note/theming/colors/index.md b/static/usage/v8/note/theming/colors/index.md new file mode 100644 index 00000000000..daadf060f1e --- /dev/null +++ b/static/usage/v8/note/theming/colors/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/note/theming/colors/javascript.md b/static/usage/v8/note/theming/colors/javascript.md new file mode 100644 index 00000000000..2740648d5ad --- /dev/null +++ b/static/usage/v8/note/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html +Default Note +Primary Note +Secondary Note +Tertiary Note +Success Note +Warning Note +Danger Note +Light Note +Medium Note +Dark Note +``` diff --git a/static/usage/v8/note/theming/colors/react.md b/static/usage/v8/note/theming/colors/react.md new file mode 100644 index 00000000000..0f17783c5c6 --- /dev/null +++ b/static/usage/v8/note/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonNote } from '@ionic/react'; + +function Example() { + return ( + <> + Default Note + Primary Note + Secondary Note + Tertiary Note + Success Note + Warning Note + Danger Note + Light Note + Medium Note + Dark Note + + ); +} +export default Example; +``` diff --git a/static/usage/v8/note/theming/colors/vue.md b/static/usage/v8/note/theming/colors/vue.md new file mode 100644 index 00000000000..77e767a5e5f --- /dev/null +++ b/static/usage/v8/note/theming/colors/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v8/note/theming/css-properties/angular/example_component_css.md b/static/usage/v8/note/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..5f39ab9c48f --- /dev/null +++ b/static/usage/v8/note/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-note { + --color: #54dc98; +} +``` diff --git a/static/usage/v8/note/theming/css-properties/angular/example_component_html.md b/static/usage/v8/note/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..2c59ef63faa --- /dev/null +++ b/static/usage/v8/note/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Default Note +``` diff --git a/static/usage/v8/note/theming/css-properties/demo.html b/static/usage/v8/note/theming/css-properties/demo.html new file mode 100644 index 00000000000..bab95ec51a0 --- /dev/null +++ b/static/usage/v8/note/theming/css-properties/demo.html @@ -0,0 +1,28 @@ + + + + + + Note + + + + + + + + + + + +
+ Default Note +
+ + + + diff --git a/static/usage/v8/note/theming/css-properties/index.md b/static/usage/v8/note/theming/css-properties/index.md new file mode 100644 index 00000000000..07c1802c04b --- /dev/null +++ b/static/usage/v8/note/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/note/theming/css-properties/javascript.md b/static/usage/v8/note/theming/css-properties/javascript.md new file mode 100644 index 00000000000..cc1bdeec421 --- /dev/null +++ b/static/usage/v8/note/theming/css-properties/javascript.md @@ -0,0 +1,9 @@ +```html + + +Default Note +``` diff --git a/static/usage/v8/note/theming/css-properties/react/main_css.md b/static/usage/v8/note/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..5f39ab9c48f --- /dev/null +++ b/static/usage/v8/note/theming/css-properties/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-note { + --color: #54dc98; +} +``` diff --git a/static/usage/v8/note/theming/css-properties/react/main_tsx.md b/static/usage/v8/note/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..798b6ab90d1 --- /dev/null +++ b/static/usage/v8/note/theming/css-properties/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonNote } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Default Note + + ); +} +export default Example; +``` diff --git a/static/usage/v8/note/theming/css-properties/vue.md b/static/usage/v8/note/theming/css-properties/vue.md new file mode 100644 index 00000000000..77e8b361f2c --- /dev/null +++ b/static/usage/v8/note/theming/css-properties/vue.md @@ -0,0 +1,20 @@ +```html + + + + + +``` diff --git a/static/usage/v8/picker/controller/angular/example_component_html.md b/static/usage/v8/picker/controller/angular/example_component_html.md new file mode 100644 index 00000000000..1e25fa99c40 --- /dev/null +++ b/static/usage/v8/picker/controller/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Open +``` diff --git a/static/usage/v8/picker/controller/angular/example_component_ts.md b/static/usage/v8/picker/controller/angular/example_component_ts.md new file mode 100644 index 00000000000..16f56cd0ca7 --- /dev/null +++ b/static/usage/v8/picker/controller/angular/example_component_ts.md @@ -0,0 +1,54 @@ +```ts +import { Component } from '@angular/core'; +import { PickerController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + constructor(private pickerCtrl: PickerController) {} + + async openPicker() { + const picker = await this.pickerCtrl.create({ + columns: [ + { + name: 'languages', + options: [ + { + text: 'JavaScript', + value: 'javascript', + }, + { + text: 'TypeScript', + value: 'typescript', + }, + { + text: 'Rust', + value: 'rust', + }, + { + text: 'C#', + value: 'c#', + }, + ], + }, + ], + buttons: [ + { + text: 'Cancel', + role: 'cancel', + }, + { + text: 'Confirm', + handler: (value) => { + console.log(`You selected: ${value.languages.value}`); + }, + }, + ], + }); + + await picker.present(); + } +} +``` diff --git a/static/usage/v8/picker/controller/demo.html b/static/usage/v8/picker/controller/demo.html new file mode 100644 index 00000000000..6b6800a2c96 --- /dev/null +++ b/static/usage/v8/picker/controller/demo.html @@ -0,0 +1,68 @@ + + + + + + Picker | Controller + + + + + + + + + + +
+ Open +
+ + + + + diff --git a/static/usage/v8/picker/controller/index.md b/static/usage/v8/picker/controller/index.md new file mode 100644 index 00000000000..249e2306736 --- /dev/null +++ b/static/usage/v8/picker/controller/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/picker/controller/javascript.md b/static/usage/v8/picker/controller/javascript.md new file mode 100644 index 00000000000..2ee271cbea8 --- /dev/null +++ b/static/usage/v8/picker/controller/javascript.md @@ -0,0 +1,46 @@ +```html +Open + + +``` diff --git a/static/usage/v8/picker/controller/react.md b/static/usage/v8/picker/controller/react.md new file mode 100644 index 00000000000..90124100d63 --- /dev/null +++ b/static/usage/v8/picker/controller/react.md @@ -0,0 +1,52 @@ +```tsx +import React from 'react'; +import { IonButton, useIonPicker } from '@ionic/react'; + +function Example() { + const [present] = useIonPicker(); + + const openPicker = async () => { + present({ + columns: [ + { + name: 'languages', + options: [ + { + text: 'JavaScript', + value: 'javascript', + }, + { + text: 'TypeScript', + value: 'typescript', + }, + { + text: 'Rust', + value: 'rust', + }, + { + text: 'C#', + value: 'c#', + }, + ], + }, + ], + buttons: [ + { + text: 'Cancel', + role: 'cancel', + }, + { + text: 'Confirm', + handler: (value) => { + console.log(`You selected: ${value.languages.value}`); + }, + }, + ], + }); + }; + + return Open; +} + +export default Example; +``` diff --git a/static/usage/v8/picker/controller/vue.md b/static/usage/v8/picker/controller/vue.md new file mode 100644 index 00000000000..54fedf2cce3 --- /dev/null +++ b/static/usage/v8/picker/controller/vue.md @@ -0,0 +1,61 @@ +```html + + + +``` diff --git a/static/usage/v8/picker/inline/isOpen/angular/example_component_html.md b/static/usage/v8/picker/inline/isOpen/angular/example_component_html.md new file mode 100644 index 00000000000..da4d9f1584d --- /dev/null +++ b/static/usage/v8/picker/inline/isOpen/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html +Open + +``` diff --git a/static/usage/v8/picker/inline/isOpen/angular/example_component_ts.md b/static/usage/v8/picker/inline/isOpen/angular/example_component_ts.md new file mode 100644 index 00000000000..69a5fb611aa --- /dev/null +++ b/static/usage/v8/picker/inline/isOpen/angular/example_component_ts.md @@ -0,0 +1,52 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + isPickerOpen = false; + + public pickerColumns = [ + { + name: 'languages', + options: [ + { + text: 'JavaScript', + value: 'javascript', + }, + { + text: 'TypeScript', + value: 'typescript', + }, + { + text: 'Rust', + value: 'rust', + }, + { + text: 'C#', + value: 'c#', + }, + ], + }, + ]; + + public pickerButtons = [ + { + text: 'Cancel', + role: 'cancel', + }, + { + text: 'Confirm', + handler: (value) => { + console.log(`You selected: ${value.languages.value}`); + }, + }, + ]; + + setOpen(isOpen: boolean) { + this.isPickerOpen = isOpen; + } +} +``` diff --git a/static/usage/v8/picker/inline/isOpen/demo.html b/static/usage/v8/picker/inline/isOpen/demo.html new file mode 100644 index 00000000000..c76e2ed34b5 --- /dev/null +++ b/static/usage/v8/picker/inline/isOpen/demo.html @@ -0,0 +1,67 @@ + + + + + + Picker | isOpen + + + + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v8/picker/inline/isOpen/index.md b/static/usage/v8/picker/inline/isOpen/index.md new file mode 100644 index 00000000000..0c06e8579b1 --- /dev/null +++ b/static/usage/v8/picker/inline/isOpen/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/picker/inline/isOpen/javascript.md b/static/usage/v8/picker/inline/isOpen/javascript.md new file mode 100644 index 00000000000..fdf1fd8c3f5 --- /dev/null +++ b/static/usage/v8/picker/inline/isOpen/javascript.md @@ -0,0 +1,49 @@ +```html +Open + + + +``` diff --git a/static/usage/v8/picker/inline/isOpen/react.md b/static/usage/v8/picker/inline/isOpen/react.md new file mode 100644 index 00000000000..b618bd48dc9 --- /dev/null +++ b/static/usage/v8/picker/inline/isOpen/react.md @@ -0,0 +1,55 @@ +```tsx +import React, { useState } from 'react'; +import { IonButton, IonPicker } from '@ionic/react'; + +function Example() { + const [isOpen, setIsOpen] = useState(false); + + return ( + <> + setIsOpen(true)}>Open + setIsOpen(false)} + columns={[ + { + name: 'languages', + options: [ + { + text: 'JavaScript', + value: 'javascript', + }, + { + text: 'TypeScript', + value: 'typescript', + }, + { + text: 'Rust', + value: 'rust', + }, + { + text: 'C#', + value: 'c#', + }, + ], + }, + ]} + buttons={[ + { + text: 'Cancel', + role: 'cancel', + }, + { + text: 'Confirm', + handler: (value) => { + console.log(`You selected: ${value.languages.value}`); + }, + }, + ]} + > + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/picker/inline/isOpen/vue.md b/static/usage/v8/picker/inline/isOpen/vue.md new file mode 100644 index 00000000000..bd03157e734 --- /dev/null +++ b/static/usage/v8/picker/inline/isOpen/vue.md @@ -0,0 +1,66 @@ +```html + + + +``` diff --git a/static/usage/v8/picker/inline/trigger/angular/example_component_html.md b/static/usage/v8/picker/inline/trigger/angular/example_component_html.md new file mode 100644 index 00000000000..533c4b1ac70 --- /dev/null +++ b/static/usage/v8/picker/inline/trigger/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html +Open + +``` diff --git a/static/usage/v8/picker/inline/trigger/angular/example_component_ts.md b/static/usage/v8/picker/inline/trigger/angular/example_component_ts.md new file mode 100644 index 00000000000..7a638c60964 --- /dev/null +++ b/static/usage/v8/picker/inline/trigger/angular/example_component_ts.md @@ -0,0 +1,46 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + public pickerColumns = [ + { + name: 'languages', + options: [ + { + text: 'JavaScript', + value: 'javascript', + }, + { + text: 'TypeScript', + value: 'typescript', + }, + { + text: 'Rust', + value: 'rust', + }, + { + text: 'C#', + value: 'c#', + }, + ], + }, + ]; + + public pickerButtons = [ + { + text: 'Cancel', + role: 'cancel', + }, + { + text: 'Confirm', + handler: (value) => { + console.log(`You selected: ${value.languages.value}`); + }, + }, + ]; +} +``` diff --git a/static/usage/v8/picker/inline/trigger/demo.html b/static/usage/v8/picker/inline/trigger/demo.html new file mode 100644 index 00000000000..b5c3c1e790f --- /dev/null +++ b/static/usage/v8/picker/inline/trigger/demo.html @@ -0,0 +1,63 @@ + + + + + + Picker | Trigger + + + + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v8/picker/inline/trigger/index.md b/static/usage/v8/picker/inline/trigger/index.md new file mode 100644 index 00000000000..27b6911cd47 --- /dev/null +++ b/static/usage/v8/picker/inline/trigger/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/picker/inline/trigger/javascript.md b/static/usage/v8/picker/inline/trigger/javascript.md new file mode 100644 index 00000000000..ba7c07dd0e8 --- /dev/null +++ b/static/usage/v8/picker/inline/trigger/javascript.md @@ -0,0 +1,45 @@ +```html +Open + + + +``` diff --git a/static/usage/v8/picker/inline/trigger/react.md b/static/usage/v8/picker/inline/trigger/react.md new file mode 100644 index 00000000000..4b0e09239a0 --- /dev/null +++ b/static/usage/v8/picker/inline/trigger/react.md @@ -0,0 +1,52 @@ +```tsx +import React from 'react'; +import { IonButton, IonPicker } from '@ionic/react'; + +function Example() { + return ( + <> + Open + { + console.log(`You selected: ${value.languages.value}`); + }, + }, + ]} + > + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/picker/inline/trigger/vue.md b/static/usage/v8/picker/inline/trigger/vue.md new file mode 100644 index 00000000000..05a4d215b9e --- /dev/null +++ b/static/usage/v8/picker/inline/trigger/vue.md @@ -0,0 +1,55 @@ +```html + + + +``` diff --git a/static/usage/v8/picker/multiple-column/angular/example_component_html.md b/static/usage/v8/picker/multiple-column/angular/example_component_html.md new file mode 100644 index 00000000000..533c4b1ac70 --- /dev/null +++ b/static/usage/v8/picker/multiple-column/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html +Open + +``` diff --git a/static/usage/v8/picker/multiple-column/angular/example_component_ts.md b/static/usage/v8/picker/multiple-column/angular/example_component_ts.md new file mode 100644 index 00000000000..6f252e19dc9 --- /dev/null +++ b/static/usage/v8/picker/multiple-column/angular/example_component_ts.md @@ -0,0 +1,76 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + public pickerColumns = [ + { + name: 'meat', + options: [ + { + text: 'Pepperoni', + value: 'pepperoni', + }, + { + text: 'Smoked Ham', + value: 'smoked-ham', + }, + { + text: 'Crispy Bacon', + value: 'bacon', + }, + ], + }, + { + name: 'veggies', + options: [ + { + text: 'Red onion', + value: 'red-onion', + }, + { + text: 'Peppers', + value: 'peppers', + }, + { + text: 'Black olives', + value: 'black-olives', + }, + ], + }, + { + name: 'crust', + options: [ + { + text: 'Pan style', + value: 'pan', + }, + { + text: 'Hand tossed', + value: 'hand-tossed', + }, + { + text: 'Stuffed crust', + value: 'stuffed-crust', + }, + ], + }, + ]; + + public pickerButtons = [ + { + text: 'Cancel', + role: 'cancel', + }, + { + text: 'Confirm', + handler: (value) => { + console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); + }, + }, + ]; +} +``` diff --git a/static/usage/v8/picker/multiple-column/demo.html b/static/usage/v8/picker/multiple-column/demo.html new file mode 100644 index 00000000000..17c0591fae7 --- /dev/null +++ b/static/usage/v8/picker/multiple-column/demo.html @@ -0,0 +1,93 @@ + + + + + + Picker | Multiple Columns + + + + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v8/picker/multiple-column/index.md b/static/usage/v8/picker/multiple-column/index.md new file mode 100644 index 00000000000..5016456a9ae --- /dev/null +++ b/static/usage/v8/picker/multiple-column/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/picker/multiple-column/javascript.md b/static/usage/v8/picker/multiple-column/javascript.md new file mode 100644 index 00000000000..28b44dedaef --- /dev/null +++ b/static/usage/v8/picker/multiple-column/javascript.md @@ -0,0 +1,75 @@ +```html +Open + + + +``` diff --git a/static/usage/v8/picker/multiple-column/react.md b/static/usage/v8/picker/multiple-column/react.md new file mode 100644 index 00000000000..9769e8b9af0 --- /dev/null +++ b/static/usage/v8/picker/multiple-column/react.md @@ -0,0 +1,82 @@ +```tsx +import React from 'react'; +import { IonButton, IonPicker } from '@ionic/react'; + +function Example() { + return ( + <> + Open + { + console.log(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); + }, + }, + ]} + > + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/picker/multiple-column/vue.md b/static/usage/v8/picker/multiple-column/vue.md new file mode 100644 index 00000000000..d396dcf9c9b --- /dev/null +++ b/static/usage/v8/picker/multiple-column/vue.md @@ -0,0 +1,85 @@ +```html + + + +``` diff --git a/static/usage/v8/popover/customization/positioning/angular/example_component_css.md b/static/usage/v8/popover/customization/positioning/angular/example_component_css.md new file mode 100644 index 00000000000..56a63480d75 --- /dev/null +++ b/static/usage/v8/popover/customization/positioning/angular/example_component_css.md @@ -0,0 +1,12 @@ +```css +ion-popover { + --width: 80px; +} + +.container { + align-items: center; + display: flex; + flex-direction: column; + padding: 80px; +} +``` diff --git a/static/usage/v8/popover/customization/positioning/angular/example_component_html.md b/static/usage/v8/popover/customization/positioning/angular/example_component_html.md new file mode 100644 index 00000000000..d911b195f92 --- /dev/null +++ b/static/usage/v8/popover/customization/positioning/angular/example_component_html.md @@ -0,0 +1,31 @@ +```html +
+ Side=Top, Alignment=Center + + + Hello World! + + + + Side=Bottom, Alignment=Start + + + Hello World! + + + + Side=Left, Alignment=Start + + + Hello World! + + + + Side=Right, Alignment=End + + + Hello World! + + +
+``` diff --git a/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md new file mode 100644 index 00000000000..4db53a836a9 --- /dev/null +++ b/static/usage/v8/popover/customization/positioning/angular/example_component_ts.md @@ -0,0 +1,10 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/popover/customization/positioning/demo.html b/static/usage/v8/popover/customization/positioning/demo.html new file mode 100644 index 00000000000..5f90bc638bc --- /dev/null +++ b/static/usage/v8/popover/customization/positioning/demo.html @@ -0,0 +1,50 @@ + + + + + + Popover + + + + + + + + + + + +
+ Side=Top, Alignment=Center + + Hello World! + + + Side=Bottom, Alignment=Start + + Hello World! + + + Side=Left, Alignment=Start + + Hello World! + + + Side=Right, Alignment=End + + Hello World! + +
+ + + + diff --git a/static/usage/v8/popover/customization/positioning/index.md b/static/usage/v8/popover/customization/positioning/index.md new file mode 100644 index 00000000000..b39363d2a7f --- /dev/null +++ b/static/usage/v8/popover/customization/positioning/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/popover/customization/positioning/javascript.md b/static/usage/v8/popover/customization/positioning/javascript.md new file mode 100644 index 00000000000..28ef3451cac --- /dev/null +++ b/static/usage/v8/popover/customization/positioning/javascript.md @@ -0,0 +1,36 @@ +```html +
+ Side=Top, Alignment=Center + + Hello World! + + + Side=Bottom, Alignment=Start + + Hello World! + + + Side=Left, Alignment=Start + + Hello World! + + + Side=Right, Alignment=End + + Hello World! + +
+ + +``` diff --git a/static/usage/v8/popover/customization/positioning/react/main_css.md b/static/usage/v8/popover/customization/positioning/react/main_css.md new file mode 100644 index 00000000000..56a63480d75 --- /dev/null +++ b/static/usage/v8/popover/customization/positioning/react/main_css.md @@ -0,0 +1,12 @@ +```css +ion-popover { + --width: 80px; +} + +.container { + align-items: center; + display: flex; + flex-direction: column; + padding: 80px; +} +``` diff --git a/static/usage/v8/popover/customization/positioning/react/main_tsx.md b/static/usage/v8/popover/customization/positioning/react/main_tsx.md new file mode 100644 index 00000000000..54235b0f593 --- /dev/null +++ b/static/usage/v8/popover/customization/positioning/react/main_tsx.md @@ -0,0 +1,33 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonPopover } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( +
+ Side=Top, Alignment=Center + + Hello World! + + + Side=Bottom, Alignment=Start + + Hello World! + + + Side=Left, Alignment=Start + + Hello World! + + + Side=Right, Alignment=End + + Hello World! + +
+ ); +} +export default Example; +``` diff --git a/static/usage/v8/popover/customization/positioning/vue.md b/static/usage/v8/popover/customization/positioning/vue.md new file mode 100644 index 00000000000..b658de342a4 --- /dev/null +++ b/static/usage/v8/popover/customization/positioning/vue.md @@ -0,0 +1,47 @@ +```html + + + + + +``` diff --git a/static/usage/v8/popover/customization/sizing/angular.md b/static/usage/v8/popover/customization/sizing/angular.md new file mode 100644 index 00000000000..ca06883d451 --- /dev/null +++ b/static/usage/v8/popover/customization/sizing/angular.md @@ -0,0 +1,15 @@ +```html +Size=Auto + + + Hello! + + + +Size=Cover + + + Hello! + + +``` diff --git a/static/usage/v8/popover/customization/sizing/demo.html b/static/usage/v8/popover/customization/sizing/demo.html new file mode 100644 index 00000000000..89351f1e806 --- /dev/null +++ b/static/usage/v8/popover/customization/sizing/demo.html @@ -0,0 +1,30 @@ + + + + + + Popover + + + + + + + + + +
+ Size=Auto + + Hello! + + + Size=Cover + + Hello! + +
+ + + + diff --git a/static/usage/v8/popover/customization/sizing/index.md b/static/usage/v8/popover/customization/sizing/index.md new file mode 100644 index 00000000000..3eb127648dc --- /dev/null +++ b/static/usage/v8/popover/customization/sizing/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/popover/customization/sizing/javascript.md b/static/usage/v8/popover/customization/sizing/javascript.md new file mode 100644 index 00000000000..3b25241cd51 --- /dev/null +++ b/static/usage/v8/popover/customization/sizing/javascript.md @@ -0,0 +1,11 @@ +```html +Size=Auto + + Hello! + + +Size=Cover + + Hello! + +``` diff --git a/static/usage/v8/popover/customization/sizing/react.md b/static/usage/v8/popover/customization/sizing/react.md new file mode 100644 index 00000000000..35b60534df6 --- /dev/null +++ b/static/usage/v8/popover/customization/sizing/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonPopover } from '@ionic/react'; +function Example() { + return ( + <> + Size=Auto + + Hello! + + + Size=Cover + + Hello! + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/popover/customization/sizing/vue.md b/static/usage/v8/popover/customization/sizing/vue.md new file mode 100644 index 00000000000..72d20c9fa77 --- /dev/null +++ b/static/usage/v8/popover/customization/sizing/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v8/popover/customization/styling/angular/example_component_html.md b/static/usage/v8/popover/customization/styling/angular/example_component_html.md new file mode 100644 index 00000000000..03df30e973a --- /dev/null +++ b/static/usage/v8/popover/customization/styling/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html +Click Me + + + Hello Styled World! + + +``` diff --git a/static/usage/v8/popover/customization/styling/angular/global_css.md b/static/usage/v8/popover/customization/styling/angular/global_css.md new file mode 100644 index 00000000000..434a31d24d9 --- /dev/null +++ b/static/usage/v8/popover/customization/styling/angular/global_css.md @@ -0,0 +1,17 @@ +```css +ion-popover { + --background: rgba(40, 173, 218, 0.6); + --backdrop-opacity: 0.6; + --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6); + --color: white; + --width: 300px; +} + +ion-popover ion-content { + --background: rgba(40, 173, 218, 0.6); +} + +ion-popover::part(backdrop) { + background-color: rgb(6, 14, 106); +} +``` diff --git a/static/usage/v8/popover/customization/styling/demo.html b/static/usage/v8/popover/customization/styling/demo.html new file mode 100644 index 00000000000..6dbe274500f --- /dev/null +++ b/static/usage/v8/popover/customization/styling/demo.html @@ -0,0 +1,43 @@ + + + + + + Popover + + + + + + + + + + + +
+ Click Me + + Hello Styled World! + +
+ + + + diff --git a/static/usage/v8/popover/customization/styling/index.md b/static/usage/v8/popover/customization/styling/index.md new file mode 100644 index 00000000000..658ef72d45a --- /dev/null +++ b/static/usage/v8/popover/customization/styling/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/popover/customization/styling/javascript.md b/static/usage/v8/popover/customization/styling/javascript.md new file mode 100644 index 00000000000..2666638cc1e --- /dev/null +++ b/static/usage/v8/popover/customization/styling/javascript.md @@ -0,0 +1,24 @@ +```html +Click Me + + Hello Styled World! + + + +``` diff --git a/static/usage/v8/popover/customization/styling/react/main_css.md b/static/usage/v8/popover/customization/styling/react/main_css.md new file mode 100644 index 00000000000..434a31d24d9 --- /dev/null +++ b/static/usage/v8/popover/customization/styling/react/main_css.md @@ -0,0 +1,17 @@ +```css +ion-popover { + --background: rgba(40, 173, 218, 0.6); + --backdrop-opacity: 0.6; + --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6); + --color: white; + --width: 300px; +} + +ion-popover ion-content { + --background: rgba(40, 173, 218, 0.6); +} + +ion-popover::part(backdrop) { + background-color: rgb(6, 14, 106); +} +``` diff --git a/static/usage/v8/popover/customization/styling/react/main_tsx.md b/static/usage/v8/popover/customization/styling/react/main_tsx.md new file mode 100644 index 00000000000..1a905f8056d --- /dev/null +++ b/static/usage/v8/popover/customization/styling/react/main_tsx.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonPopover } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Click Me + + Hello Styled World! + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/popover/customization/styling/vue.md b/static/usage/v8/popover/customization/styling/vue.md new file mode 100644 index 00000000000..964eeb09bfc --- /dev/null +++ b/static/usage/v8/popover/customization/styling/vue.md @@ -0,0 +1,35 @@ +```html + + + + + +``` diff --git a/static/usage/v8/popover/nested/angular.md b/static/usage/v8/popover/nested/angular.md new file mode 100644 index 00000000000..cdbe68f341f --- /dev/null +++ b/static/usage/v8/popover/nested/angular.md @@ -0,0 +1,24 @@ +```html +Open Menu + + + + + Option 1 + Option 2 + More options... + + + + + + Nested option + + + + + + + + +``` diff --git a/static/usage/v8/popover/nested/demo.html b/static/usage/v8/popover/nested/demo.html new file mode 100644 index 00000000000..89b0c9409af --- /dev/null +++ b/static/usage/v8/popover/nested/demo.html @@ -0,0 +1,39 @@ + + + + + + Popover + + + + + + + + + +
+ Open Menu + + + + Option 1 + Option 2 + More options... + + + + + Nested option + + + + + + +
+ + + + diff --git a/static/usage/v8/popover/nested/index.md b/static/usage/v8/popover/nested/index.md new file mode 100644 index 00000000000..cb8a824edb0 --- /dev/null +++ b/static/usage/v8/popover/nested/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/popover/nested/javascript.md b/static/usage/v8/popover/nested/javascript.md new file mode 100644 index 00000000000..6f3848538f5 --- /dev/null +++ b/static/usage/v8/popover/nested/javascript.md @@ -0,0 +1,20 @@ +```html +Open Menu + + + + Option 1 + Option 2 + More options... + + + + + Nested option + + + + + + +``` diff --git a/static/usage/v8/popover/nested/react.md b/static/usage/v8/popover/nested/react.md new file mode 100644 index 00000000000..eb84d67effb --- /dev/null +++ b/static/usage/v8/popover/nested/react.md @@ -0,0 +1,37 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/react'; +function Example() { + return ( + <> + Open Menu + + + + + Option 1 + + + Option 2 + + + More options... + + + + + + + Nested option + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/popover/nested/vue.md b/static/usage/v8/popover/nested/vue.md new file mode 100644 index 00000000000..04a7b6d7e36 --- /dev/null +++ b/static/usage/v8/popover/nested/vue.md @@ -0,0 +1,31 @@ +```html + + + +``` diff --git a/static/usage/v8/popover/performance/mount/angular.md b/static/usage/v8/popover/performance/mount/angular.md new file mode 100644 index 00000000000..b8a696ab948 --- /dev/null +++ b/static/usage/v8/popover/performance/mount/angular.md @@ -0,0 +1,8 @@ +```html +Open Popover + + + This content was mounted as soon as the popover was created. + + +``` diff --git a/static/usage/v8/popover/performance/mount/demo.html b/static/usage/v8/popover/performance/mount/demo.html new file mode 100644 index 00000000000..5df0be7facf --- /dev/null +++ b/static/usage/v8/popover/performance/mount/demo.html @@ -0,0 +1,25 @@ + + + + + + Popover + + + + + + + + + +
+ Open Popover + + This content was mounted as soon as the popover was created. + +
+ + + + diff --git a/static/usage/v8/popover/performance/mount/index.md b/static/usage/v8/popover/performance/mount/index.md new file mode 100644 index 00000000000..9c846cc784b --- /dev/null +++ b/static/usage/v8/popover/performance/mount/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/popover/performance/mount/javascript.md b/static/usage/v8/popover/performance/mount/javascript.md new file mode 100644 index 00000000000..297c94344f1 --- /dev/null +++ b/static/usage/v8/popover/performance/mount/javascript.md @@ -0,0 +1,6 @@ +```html +Open Popover + + This content was mounted as soon as the popover was created. + +``` diff --git a/static/usage/v8/popover/performance/mount/react.md b/static/usage/v8/popover/performance/mount/react.md new file mode 100644 index 00000000000..24e7230d966 --- /dev/null +++ b/static/usage/v8/popover/performance/mount/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonPopover } from '@ionic/react'; +function Example() { + return ( + + Open Popover + + This content was mounted as soon as the popover was created. + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/popover/performance/mount/vue.md b/static/usage/v8/popover/performance/mount/vue.md new file mode 100644 index 00000000000..bc54f345bfe --- /dev/null +++ b/static/usage/v8/popover/performance/mount/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/popover/presenting/controller/angular/app_module_ts.md b/static/usage/v8/popover/presenting/controller/angular/app_module_ts.md new file mode 100644 index 00000000000..887ca3acf89 --- /dev/null +++ b/static/usage/v8/popover/presenting/controller/angular/app_module_ts.md @@ -0,0 +1,19 @@ +```ts +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; +import { ExampleComponent } from './example.component'; + +import { PopoverComponent } from './popover.component'; + +@NgModule({ + imports: [BrowserModule, FormsModule, IonicModule.forRoot({})], + declarations: [AppComponent, ExampleComponent, PopoverComponent], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` diff --git a/static/usage/v8/popover/presenting/controller/angular/example_component_html.md b/static/usage/v8/popover/presenting/controller/angular/example_component_html.md new file mode 100644 index 00000000000..679b36f5040 --- /dev/null +++ b/static/usage/v8/popover/presenting/controller/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Click Me +``` diff --git a/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md new file mode 100644 index 00000000000..647bef04dac --- /dev/null +++ b/static/usage/v8/popover/presenting/controller/angular/example_component_ts.md @@ -0,0 +1,27 @@ +```ts +import { Component, ViewChild } from '@angular/core'; + +import { PopoverController } from '@ionic/angular'; + +import { PopoverComponent } from './popover.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + constructor(public popoverController: PopoverController) {} + + async presentPopover(e: Event) { + const popover = await this.popoverController.create({ + component: PopoverComponent, + event: e, + }); + + await popover.present(); + + const { role } = await popover.onDidDismiss(); + console.log(`Popover dismissed with role: ${role}`); + } +} +``` diff --git a/static/usage/v8/popover/presenting/controller/angular/popover_component_html.md b/static/usage/v8/popover/presenting/controller/angular/popover_component_html.md new file mode 100644 index 00000000000..583a6dea593 --- /dev/null +++ b/static/usage/v8/popover/presenting/controller/angular/popover_component_html.md @@ -0,0 +1,3 @@ +```html +Hello World! +``` diff --git a/static/usage/v8/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v8/popover/presenting/controller/angular/popover_component_ts.md new file mode 100644 index 00000000000..2900a32240c --- /dev/null +++ b/static/usage/v8/popover/presenting/controller/angular/popover_component_ts.md @@ -0,0 +1,10 @@ +```ts +import { Component } from '@angular/core'; +import { PopoverController } from '@ionic/angular'; + +@Component({ + selector: 'app-popover', + templateUrl: 'popover.component.html', +}) +export class PopoverComponent {} +``` diff --git a/static/usage/v8/popover/presenting/controller/demo.html b/static/usage/v8/popover/presenting/controller/demo.html new file mode 100644 index 00000000000..8145dd5ce0e --- /dev/null +++ b/static/usage/v8/popover/presenting/controller/demo.html @@ -0,0 +1,52 @@ + + + + + + Popover + + + + + + + + + +
+ Click Me +
+ + + + + + diff --git a/static/usage/v8/popover/presenting/controller/index.md b/static/usage/v8/popover/presenting/controller/index.md new file mode 100644 index 00000000000..9bbfc24fc16 --- /dev/null +++ b/static/usage/v8/popover/presenting/controller/index.md @@ -0,0 +1,39 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; + +import vue_example from './vue/example_vue.md'; +import vue_popover from './vue/popover_vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_popover_component_html from './angular/popover_component_html.md'; +import angular_popover_component_ts from './angular/popover_component_ts.md'; +import angular_app_module from './angular/app_module_ts.md'; + + diff --git a/static/usage/v8/popover/presenting/controller/javascript.md b/static/usage/v8/popover/presenting/controller/javascript.md new file mode 100644 index 00000000000..d259855fbc5 --- /dev/null +++ b/static/usage/v8/popover/presenting/controller/javascript.md @@ -0,0 +1,33 @@ +```html +Click Me + + +``` diff --git a/static/usage/v8/popover/presenting/controller/react.md b/static/usage/v8/popover/presenting/controller/react.md new file mode 100644 index 00000000000..d23a58cbef6 --- /dev/null +++ b/static/usage/v8/popover/presenting/controller/react.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, useIonPopover } from '@ionic/react'; + +const Popover = () => Hello World!; + +function Example() { + const [present, dismiss] = useIonPopover(Popover, { + onDismiss: (data: any, role: string) => dismiss(data, role), + }); + + return ( + + present({ + event: e, + onDidDismiss: (e: CustomEvent) => console.log(`Popover dismissed with role: ${e.detail.role}`), + }) + } + > + Click Me + + ); +} +export default Example; +``` diff --git a/static/usage/v8/popover/presenting/controller/vue/example_vue.md b/static/usage/v8/popover/presenting/controller/vue/example_vue.md new file mode 100644 index 00000000000..c477a870895 --- /dev/null +++ b/static/usage/v8/popover/presenting/controller/vue/example_vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v8/popover/presenting/controller/vue/popover_vue.md b/static/usage/v8/popover/presenting/controller/vue/popover_vue.md new file mode 100644 index 00000000000..85f8bd06cad --- /dev/null +++ b/static/usage/v8/popover/presenting/controller/vue/popover_vue.md @@ -0,0 +1,15 @@ +```html + + + +``` diff --git a/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_html.md b/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_html.md new file mode 100644 index 00000000000..1d8369f31e2 --- /dev/null +++ b/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html +Click Me + + + Hello World! + + +``` diff --git a/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md new file mode 100644 index 00000000000..ef604e603d9 --- /dev/null +++ b/static/usage/v8/popover/presenting/inline-isopen/angular/example_component_ts.md @@ -0,0 +1,18 @@ +```ts +import { Component, ViewChild } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChild('popover') popover; + + isOpen = false; + + presentPopover(e: Event) { + this.popover.event = e; + this.isOpen = true; + } +} +``` diff --git a/static/usage/v8/popover/presenting/inline-isopen/demo.html b/static/usage/v8/popover/presenting/inline-isopen/demo.html new file mode 100644 index 00000000000..480a87caa67 --- /dev/null +++ b/static/usage/v8/popover/presenting/inline-isopen/demo.html @@ -0,0 +1,37 @@ + + + + + + Popover + + + + + + + + + +
+ Click Me + + Hello World! + +
+ + + + + + diff --git a/static/usage/v8/popover/presenting/inline-isopen/index.md b/static/usage/v8/popover/presenting/inline-isopen/index.md new file mode 100644 index 00000000000..b03937849fb --- /dev/null +++ b/static/usage/v8/popover/presenting/inline-isopen/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/popover/presenting/inline-isopen/javascript.md b/static/usage/v8/popover/presenting/inline-isopen/javascript.md new file mode 100644 index 00000000000..1daafed1894 --- /dev/null +++ b/static/usage/v8/popover/presenting/inline-isopen/javascript.md @@ -0,0 +1,18 @@ +```html +Click Me + + Hello World! + + + +``` diff --git a/static/usage/v8/popover/presenting/inline-isopen/react.md b/static/usage/v8/popover/presenting/inline-isopen/react.md new file mode 100644 index 00000000000..1d0b68fd1f5 --- /dev/null +++ b/static/usage/v8/popover/presenting/inline-isopen/react.md @@ -0,0 +1,24 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { IonButton, IonContent, IonPopover } from '@ionic/react'; + +function Example() { + const popover = useRef(null); + const [popoverOpen, setPopoverOpen] = useState(false); + + const openPopover = (e: any) => { + popover.current!.event = e; + setPopoverOpen(true); + }; + + return ( + <> + Click Me + setPopoverOpen(false)}> + Hello World! + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/popover/presenting/inline-isopen/vue.md b/static/usage/v8/popover/presenting/inline-isopen/vue.md new file mode 100644 index 00000000000..fbbaf065a17 --- /dev/null +++ b/static/usage/v8/popover/presenting/inline-isopen/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v8/popover/presenting/inline-trigger/angular.md b/static/usage/v8/popover/presenting/inline-trigger/angular.md new file mode 100644 index 00000000000..de7f6d02a6f --- /dev/null +++ b/static/usage/v8/popover/presenting/inline-trigger/angular.md @@ -0,0 +1,22 @@ +```html +Left-Click Me + + + Hello World! + + + +Right-Click Me + + + Hello World! + + + +Hover Over Me + + + Hello World! + + +``` diff --git a/static/usage/v8/popover/presenting/inline-trigger/demo.html b/static/usage/v8/popover/presenting/inline-trigger/demo.html new file mode 100644 index 00000000000..64f56e73fd6 --- /dev/null +++ b/static/usage/v8/popover/presenting/inline-trigger/demo.html @@ -0,0 +1,35 @@ + + + + + + Popover + + + + + + + + + +
+ Left-Click Me + + Hello World! + + + Right-Click Me + + Hello World! + + + Hover Over Me + + Hello World! + +
+ + + + diff --git a/static/usage/v8/popover/presenting/inline-trigger/index.md b/static/usage/v8/popover/presenting/inline-trigger/index.md new file mode 100644 index 00000000000..ac99108a561 --- /dev/null +++ b/static/usage/v8/popover/presenting/inline-trigger/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/popover/presenting/inline-trigger/javascript.md b/static/usage/v8/popover/presenting/inline-trigger/javascript.md new file mode 100644 index 00000000000..7f4559391e2 --- /dev/null +++ b/static/usage/v8/popover/presenting/inline-trigger/javascript.md @@ -0,0 +1,16 @@ +```html +Left-Click Me + + Hello World! + + +Right-Click Me + + Hello World! + + +Hover Over Me + + Hello World! + +``` diff --git a/static/usage/v8/popover/presenting/inline-trigger/react.md b/static/usage/v8/popover/presenting/inline-trigger/react.md new file mode 100644 index 00000000000..93ba97cbd7c --- /dev/null +++ b/static/usage/v8/popover/presenting/inline-trigger/react.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonPopover } from '@ionic/react'; +function Example() { + return ( + <> + Left-Click Me + + Hello World! + + + Right-Click Me + + Hello World! + + + Hover Over Me + + Hello World! + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/popover/presenting/inline-trigger/vue.md b/static/usage/v8/popover/presenting/inline-trigger/vue.md new file mode 100644 index 00000000000..07f1f68a62f --- /dev/null +++ b/static/usage/v8/popover/presenting/inline-trigger/vue.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v8/progress-bar/buffer/angular/example_component_html.md b/static/usage/v8/progress-bar/buffer/angular/example_component_html.md new file mode 100644 index 00000000000..55dfda33a34 --- /dev/null +++ b/static/usage/v8/progress-bar/buffer/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v8/progress-bar/buffer/angular/example_component_ts.md new file mode 100644 index 00000000000..a876a376204 --- /dev/null +++ b/static/usage/v8/progress-bar/buffer/angular/example_component_ts.md @@ -0,0 +1,29 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + public buffer = 0.06; + public progress = 0; + + constructor() { + setInterval(() => { + this.buffer += 0.06; + this.progress += 0.06; + + // Reset the progress bar when it reaches 100% + // to continuously show the demo + if (this.progress > 1) { + setTimeout(() => { + this.buffer = 0.06; + this.progress = 0; + }, 1000); + } + }, 1000); + } +} +``` diff --git a/static/usage/v8/progress-bar/buffer/demo.html b/static/usage/v8/progress-bar/buffer/demo.html new file mode 100644 index 00000000000..751b6a12c43 --- /dev/null +++ b/static/usage/v8/progress-bar/buffer/demo.html @@ -0,0 +1,44 @@ + + + + + + Progress Bar + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v8/progress-bar/buffer/index.md b/static/usage/v8/progress-bar/buffer/index.md new file mode 100644 index 00000000000..2108ac9ed43 --- /dev/null +++ b/static/usage/v8/progress-bar/buffer/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/progress-bar/buffer/javascript.md b/static/usage/v8/progress-bar/buffer/javascript.md new file mode 100644 index 00000000000..0938fb5fca1 --- /dev/null +++ b/static/usage/v8/progress-bar/buffer/javascript.md @@ -0,0 +1,25 @@ +```html + + + +``` diff --git a/static/usage/v8/progress-bar/buffer/react.md b/static/usage/v8/progress-bar/buffer/react.md new file mode 100644 index 00000000000..10f35e69538 --- /dev/null +++ b/static/usage/v8/progress-bar/buffer/react.md @@ -0,0 +1,28 @@ +```tsx +import React, { useEffect, useState } from 'react'; +import { IonProgressBar } from '@ionic/react'; + +function Example() { + const [buffer, setBuffer] = useState(0.06); + const [progress, setProgress] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setBuffer((prevBuffer) => prevBuffer + 0.06); + setProgress((prevProgress) => prevProgress + 0.06); + }, 1000); + + return () => clearInterval(interval); + }, []); + + if (progress > 1) { + setTimeout(() => { + setBuffer(0.06); + setProgress(0); + }, 1000); + } + + return ; +} +export default Example; +``` diff --git a/static/usage/v8/progress-bar/buffer/vue.md b/static/usage/v8/progress-bar/buffer/vue.md new file mode 100644 index 00000000000..c70c23eb470 --- /dev/null +++ b/static/usage/v8/progress-bar/buffer/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v8/progress-bar/determinate/angular/example_component_html.md b/static/usage/v8/progress-bar/determinate/angular/example_component_html.md new file mode 100644 index 00000000000..95969f5d197 --- /dev/null +++ b/static/usage/v8/progress-bar/determinate/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v8/progress-bar/determinate/angular/example_component_ts.md new file mode 100644 index 00000000000..971d3d92ed0 --- /dev/null +++ b/static/usage/v8/progress-bar/determinate/angular/example_component_ts.md @@ -0,0 +1,26 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + public progress = 0; + + constructor() { + setInterval(() => { + this.progress += 0.01; + + // Reset the progress bar when it reaches 100% + // to continuously show the demo + if (this.progress > 1) { + setTimeout(() => { + this.progress = 0; + }, 1000); + } + }, 50); + } +} +``` diff --git a/static/usage/v8/progress-bar/determinate/demo.html b/static/usage/v8/progress-bar/determinate/demo.html new file mode 100644 index 00000000000..c204d2c4325 --- /dev/null +++ b/static/usage/v8/progress-bar/determinate/demo.html @@ -0,0 +1,39 @@ + + + + + + Progress Bar + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v8/progress-bar/determinate/index.md b/static/usage/v8/progress-bar/determinate/index.md new file mode 100644 index 00000000000..790b44766a8 --- /dev/null +++ b/static/usage/v8/progress-bar/determinate/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/progress-bar/determinate/javascript.md b/static/usage/v8/progress-bar/determinate/javascript.md new file mode 100644 index 00000000000..6adb7e43590 --- /dev/null +++ b/static/usage/v8/progress-bar/determinate/javascript.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v8/progress-bar/determinate/react.md b/static/usage/v8/progress-bar/determinate/react.md new file mode 100644 index 00000000000..474d4dd878e --- /dev/null +++ b/static/usage/v8/progress-bar/determinate/react.md @@ -0,0 +1,25 @@ +```tsx +import React, { useEffect, useState } from 'react'; +import { IonProgressBar } from '@ionic/react'; + +function Example() { + const [progress, setProgress] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setProgress((prevProgress) => prevProgress + 0.01); + }, 50); + + return () => clearInterval(interval); + }, []); + + if (progress > 1) { + setTimeout(() => { + setProgress(0); + }, 1000); + } + + return ; +} +export default Example; +``` diff --git a/static/usage/v8/progress-bar/determinate/vue.md b/static/usage/v8/progress-bar/determinate/vue.md new file mode 100644 index 00000000000..5eb4cd2b847 --- /dev/null +++ b/static/usage/v8/progress-bar/determinate/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v8/progress-bar/indeterminate/angular.md b/static/usage/v8/progress-bar/indeterminate/angular.md new file mode 100644 index 00000000000..f83f9173c39 --- /dev/null +++ b/static/usage/v8/progress-bar/indeterminate/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/progress-bar/indeterminate/demo.html b/static/usage/v8/progress-bar/indeterminate/demo.html new file mode 100644 index 00000000000..95685e060c3 --- /dev/null +++ b/static/usage/v8/progress-bar/indeterminate/demo.html @@ -0,0 +1,22 @@ + + + + + + Progress Bar + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/progress-bar/indeterminate/index.md b/static/usage/v8/progress-bar/indeterminate/index.md new file mode 100644 index 00000000000..db428ba5871 --- /dev/null +++ b/static/usage/v8/progress-bar/indeterminate/index.md @@ -0,0 +1,12 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/progress-bar/indeterminate/javascript.md b/static/usage/v8/progress-bar/indeterminate/javascript.md new file mode 100644 index 00000000000..f83f9173c39 --- /dev/null +++ b/static/usage/v8/progress-bar/indeterminate/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/progress-bar/indeterminate/react.md b/static/usage/v8/progress-bar/indeterminate/react.md new file mode 100644 index 00000000000..b856e1f29f2 --- /dev/null +++ b/static/usage/v8/progress-bar/indeterminate/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonProgressBar } from '@ionic/react'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/progress-bar/indeterminate/vue.md b/static/usage/v8/progress-bar/indeterminate/vue.md new file mode 100644 index 00000000000..b15c060bdcc --- /dev/null +++ b/static/usage/v8/progress-bar/indeterminate/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/progress-bar/theming/colors/angular.md b/static/usage/v8/progress-bar/theming/colors/angular.md new file mode 100644 index 00000000000..71bc3675422 --- /dev/null +++ b/static/usage/v8/progress-bar/theming/colors/angular.md @@ -0,0 +1,11 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v8/progress-bar/theming/colors/demo.html b/static/usage/v8/progress-bar/theming/colors/demo.html new file mode 100644 index 00000000000..b2d7b770b78 --- /dev/null +++ b/static/usage/v8/progress-bar/theming/colors/demo.html @@ -0,0 +1,37 @@ + + + + + + Progress Bar + + + + + + + + + + + +
+ + + + + + + + + +
+ + + + diff --git a/static/usage/v8/progress-bar/theming/colors/index.md b/static/usage/v8/progress-bar/theming/colors/index.md new file mode 100644 index 00000000000..7e6638a7e74 --- /dev/null +++ b/static/usage/v8/progress-bar/theming/colors/index.md @@ -0,0 +1,12 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/progress-bar/theming/colors/javascript.md b/static/usage/v8/progress-bar/theming/colors/javascript.md new file mode 100644 index 00000000000..71bc3675422 --- /dev/null +++ b/static/usage/v8/progress-bar/theming/colors/javascript.md @@ -0,0 +1,11 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v8/progress-bar/theming/colors/react.md b/static/usage/v8/progress-bar/theming/colors/react.md new file mode 100644 index 00000000000..d40b838e65b --- /dev/null +++ b/static/usage/v8/progress-bar/theming/colors/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonProgressBar } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/progress-bar/theming/colors/vue.md b/static/usage/v8/progress-bar/theming/colors/vue.md new file mode 100644 index 00000000000..6f42832e199 --- /dev/null +++ b/static/usage/v8/progress-bar/theming/colors/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v8/progress-bar/theming/css-properties/angular/example_component_css.md b/static/usage/v8/progress-bar/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..7d5576bdeeb --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-progress-bar { + --background: #f3e895; + --progress-background: #09c567; +} +``` diff --git a/static/usage/v8/progress-bar/theming/css-properties/angular/example_component_html.md b/static/usage/v8/progress-bar/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..a374b2ee72c --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/progress-bar/theming/css-properties/demo.html b/static/usage/v8/progress-bar/theming/css-properties/demo.html new file mode 100644 index 00000000000..9d99105968f --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-properties/demo.html @@ -0,0 +1,35 @@ + + + + + + Progress Bar + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v8/progress-bar/theming/css-properties/index.md b/static/usage/v8/progress-bar/theming/css-properties/index.md new file mode 100644 index 00000000000..5d6c694d104 --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/progress-bar/theming/css-properties/javascript.md b/static/usage/v8/progress-bar/theming/css-properties/javascript.md new file mode 100644 index 00000000000..f57e0166013 --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-properties/javascript.md @@ -0,0 +1,11 @@ +```html + + + + +``` diff --git a/static/usage/v8/progress-bar/theming/css-properties/react/main_css.md b/static/usage/v8/progress-bar/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..7d5576bdeeb --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-properties/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-progress-bar { + --background: #f3e895; + --progress-background: #09c567; +} +``` diff --git a/static/usage/v8/progress-bar/theming/css-properties/react/main_tsx.md b/static/usage/v8/progress-bar/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..3e05757d942 --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-properties/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonProgressBar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/progress-bar/theming/css-properties/vue.md b/static/usage/v8/progress-bar/theming/css-properties/vue.md new file mode 100644 index 00000000000..f63aec9e644 --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-properties/vue.md @@ -0,0 +1,22 @@ +```html + + + + + +``` diff --git a/static/usage/v8/progress-bar/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v8/progress-bar/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..2ccf6f72dd8 --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,13 @@ +```css +ion-progress-bar::part(track) { + background: #f3e895; +} + +ion-progress-bar::part(progress) { + background: #09c567; +} + +ion-progress-bar::part(stream) { + background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%); +} +``` diff --git a/static/usage/v8/progress-bar/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v8/progress-bar/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..a374b2ee72c --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/progress-bar/theming/css-shadow-parts/demo.html b/static/usage/v8/progress-bar/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..71ff3ced918 --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-shadow-parts/demo.html @@ -0,0 +1,42 @@ + + + + + + Progress Bar + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v8/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v8/progress-bar/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..e289ac2035c --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-shadow-parts/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/progress-bar/theming/css-shadow-parts/javascript.md b/static/usage/v8/progress-bar/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..52b5be57e5a --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-shadow-parts/javascript.md @@ -0,0 +1,18 @@ +```html + + + + +``` diff --git a/static/usage/v8/progress-bar/theming/css-shadow-parts/react/main_css.md b/static/usage/v8/progress-bar/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..2ccf6f72dd8 --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,13 @@ +```css +ion-progress-bar::part(track) { + background: #f3e895; +} + +ion-progress-bar::part(progress) { + background: #09c567; +} + +ion-progress-bar::part(stream) { + background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%); +} +``` diff --git a/static/usage/v8/progress-bar/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v8/progress-bar/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..3e05757d942 --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonProgressBar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/v8/progress-bar/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..5750323198e --- /dev/null +++ b/static/usage/v8/progress-bar/theming/css-shadow-parts/vue.md @@ -0,0 +1,29 @@ +```html + + + + + +``` diff --git a/static/usage/v8/radio/alignment/angular.md b/static/usage/v8/radio/alignment/angular.md new file mode 100644 index 00000000000..51ebedc3c4c --- /dev/null +++ b/static/usage/v8/radio/alignment/angular.md @@ -0,0 +1,15 @@ +```html + + + + Aligned to the Start + + + + + + Aligned to the Center + + + +``` diff --git a/static/usage/v8/radio/alignment/demo.html b/static/usage/v8/radio/alignment/demo.html new file mode 100644 index 00000000000..ca2b0fc943e --- /dev/null +++ b/static/usage/v8/radio/alignment/demo.html @@ -0,0 +1,34 @@ + + + + + + Radio + + + + + + + + + +
+ + + + Aligned to the Start + + + + + + Aligned to the Center + + + +
+ + + + diff --git a/static/usage/v8/radio/alignment/index.md b/static/usage/v8/radio/alignment/index.md new file mode 100644 index 00000000000..eb491f6f693 --- /dev/null +++ b/static/usage/v8/radio/alignment/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/radio/alignment/javascript.md b/static/usage/v8/radio/alignment/javascript.md new file mode 100644 index 00000000000..37f54368452 --- /dev/null +++ b/static/usage/v8/radio/alignment/javascript.md @@ -0,0 +1,15 @@ +```html + + + + Aligned to the Start + + + + + + Aligned to the Center + + + +``` diff --git a/static/usage/v8/radio/alignment/react.md b/static/usage/v8/radio/alignment/react.md new file mode 100644 index 00000000000..f7fcb232aea --- /dev/null +++ b/static/usage/v8/radio/alignment/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + return ( + + + + + Aligned to the Start + + + + + + + + Aligned to the Center + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/radio/alignment/vue.md b/static/usage/v8/radio/alignment/vue.md new file mode 100644 index 00000000000..0f208b37a2a --- /dev/null +++ b/static/usage/v8/radio/alignment/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v8/radio/basic/angular.md b/static/usage/v8/radio/basic/angular.md new file mode 100644 index 00000000000..a8caa3c1973 --- /dev/null +++ b/static/usage/v8/radio/basic/angular.md @@ -0,0 +1,8 @@ +```html + + Grapes
+ Strawberries
+ Pineapple
+ Cherries + +``` diff --git a/static/usage/v8/radio/basic/demo.html b/static/usage/v8/radio/basic/demo.html new file mode 100644 index 00000000000..14468f25d8d --- /dev/null +++ b/static/usage/v8/radio/basic/demo.html @@ -0,0 +1,33 @@ + + + + + + Radio + + + + + + + + + + + +
+ + Grapes
+ Strawberries
+ Pineapple
+ Cherries + +
+ + + + diff --git a/static/usage/v8/radio/basic/index.md b/static/usage/v8/radio/basic/index.md new file mode 100644 index 00000000000..25f829a31fe --- /dev/null +++ b/static/usage/v8/radio/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/radio/basic/javascript.md b/static/usage/v8/radio/basic/javascript.md new file mode 100644 index 00000000000..a8caa3c1973 --- /dev/null +++ b/static/usage/v8/radio/basic/javascript.md @@ -0,0 +1,8 @@ +```html + + Grapes
+ Strawberries
+ Pineapple
+ Cherries + +``` diff --git a/static/usage/v8/radio/basic/react.md b/static/usage/v8/radio/basic/react.md new file mode 100644 index 00000000000..7f8cf4e07f4 --- /dev/null +++ b/static/usage/v8/radio/basic/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + return ( + + Grapes +
+ Strawberries +
+ Pineapple +
+ Cherries + + ); +} +export default Example; +``` diff --git a/static/usage/v8/radio/basic/vue.md b/static/usage/v8/radio/basic/vue.md new file mode 100644 index 00000000000..2d552901212 --- /dev/null +++ b/static/usage/v8/radio/basic/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/radio/empty-selection/angular.md b/static/usage/v8/radio/empty-selection/angular.md new file mode 100644 index 00000000000..61e5c0d4e4b --- /dev/null +++ b/static/usage/v8/radio/empty-selection/angular.md @@ -0,0 +1,8 @@ +```html + + Dogs
+ Cats
+ Turtles
+ Fish
+ +``` diff --git a/static/usage/v8/radio/empty-selection/demo.html b/static/usage/v8/radio/empty-selection/demo.html new file mode 100644 index 00000000000..b55e17ec85f --- /dev/null +++ b/static/usage/v8/radio/empty-selection/demo.html @@ -0,0 +1,27 @@ + + + + + + Radio + + + + + + + + + +
+ + Dogs
+ Cats
+ Turtles
+ Fish
+ +
+ + + + diff --git a/static/usage/v8/radio/empty-selection/index.md b/static/usage/v8/radio/empty-selection/index.md new file mode 100644 index 00000000000..2223f07657d --- /dev/null +++ b/static/usage/v8/radio/empty-selection/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/radio/empty-selection/javascript.md b/static/usage/v8/radio/empty-selection/javascript.md new file mode 100644 index 00000000000..0a045fc9bb1 --- /dev/null +++ b/static/usage/v8/radio/empty-selection/javascript.md @@ -0,0 +1,8 @@ +```html + + Dogs
+ Cats
+ Turtles
+ Fish
+ +``` diff --git a/static/usage/v8/radio/empty-selection/react.md b/static/usage/v8/radio/empty-selection/react.md new file mode 100644 index 00000000000..999a230419b --- /dev/null +++ b/static/usage/v8/radio/empty-selection/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + return ( + + Dogs +
+ Cats +
+ Turtles +
+ Fish +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/radio/empty-selection/vue.md b/static/usage/v8/radio/empty-selection/vue.md new file mode 100644 index 00000000000..b80bac834b6 --- /dev/null +++ b/static/usage/v8/radio/empty-selection/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/radio/justify/angular.md b/static/usage/v8/radio/justify/angular.md new file mode 100644 index 00000000000..8ca8e3c568b --- /dev/null +++ b/static/usage/v8/radio/justify/angular.md @@ -0,0 +1,21 @@ +```html + + + + Packed at the Start of Line + + + + + + Packed at the End of Line + + + + + + Space Between Label and Control + + + +``` diff --git a/static/usage/v8/radio/justify/demo.html b/static/usage/v8/radio/justify/demo.html new file mode 100644 index 00000000000..cfeb395cf0d --- /dev/null +++ b/static/usage/v8/radio/justify/demo.html @@ -0,0 +1,45 @@ + + + + + + Radio + + + + + + + + + + +
+ + + + Packed at the Start of Line + + + + + + Packed at the End of Line + + + + + + Space Between Label and Control + + + +
+ + + + diff --git a/static/usage/v8/radio/justify/index.md b/static/usage/v8/radio/justify/index.md new file mode 100644 index 00000000000..3105943de6f --- /dev/null +++ b/static/usage/v8/radio/justify/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/radio/justify/javascript.md b/static/usage/v8/radio/justify/javascript.md new file mode 100644 index 00000000000..8ca8e3c568b --- /dev/null +++ b/static/usage/v8/radio/justify/javascript.md @@ -0,0 +1,21 @@ +```html + + + + Packed at the Start of Line + + + + + + Packed at the End of Line + + + + + + Space Between Label and Control + + + +``` diff --git a/static/usage/v8/radio/justify/react.md b/static/usage/v8/radio/justify/react.md new file mode 100644 index 00000000000..0cae0d9191a --- /dev/null +++ b/static/usage/v8/radio/justify/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + return ( + + + + + Packed at the Start of Line + + + + + + + + Packed at the End of Line + + + + + + + + Space Between Label and Control + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/radio/justify/vue.md b/static/usage/v8/radio/justify/vue.md new file mode 100644 index 00000000000..89f9f63b72a --- /dev/null +++ b/static/usage/v8/radio/justify/vue.md @@ -0,0 +1,32 @@ +```html + + + +``` diff --git a/static/usage/v8/radio/label-placement/angular.md b/static/usage/v8/radio/label-placement/angular.md new file mode 100644 index 00000000000..c62acb2938a --- /dev/null +++ b/static/usage/v8/radio/label-placement/angular.md @@ -0,0 +1,23 @@ +```html + + Label at the Start + + +
+ + + Label at the End + + +
+ + + Fixed Width Label + + +
+ + + Stacked Label + +``` diff --git a/static/usage/v8/radio/label-placement/demo.html b/static/usage/v8/radio/label-placement/demo.html new file mode 100644 index 00000000000..8140ef0ed29 --- /dev/null +++ b/static/usage/v8/radio/label-placement/demo.html @@ -0,0 +1,44 @@ + + + + + + Radio + + + + + + + + + +
+
+ + Label at the Start + + +
+ + + Label at the End + + +
+ + + Fixed Width Label + + +
+ + + Stacked Label + +
+
+ + + + diff --git a/static/usage/v8/radio/label-placement/index.md b/static/usage/v8/radio/label-placement/index.md new file mode 100644 index 00000000000..24df0d8ca22 --- /dev/null +++ b/static/usage/v8/radio/label-placement/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/radio/label-placement/javascript.md b/static/usage/v8/radio/label-placement/javascript.md new file mode 100644 index 00000000000..44a731a1fae --- /dev/null +++ b/static/usage/v8/radio/label-placement/javascript.md @@ -0,0 +1,23 @@ +```html + + Label at the Start + + +
+ + + Label at the End + + +
+ + + Fixed Width Label + + +
+ + + Stacked Label + +``` diff --git a/static/usage/v8/radio/label-placement/react.md b/static/usage/v8/radio/label-placement/react.md new file mode 100644 index 00000000000..42eb433075d --- /dev/null +++ b/static/usage/v8/radio/label-placement/react.md @@ -0,0 +1,41 @@ +```tsx +import React from 'react'; +import { IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + return ( + <> + + + Label at the Start + + + +
+ + + + Label at the End + + + +
+ + + + Fixed Width Label + + + +
+ + + + Stacked Label + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/radio/label-placement/vue.md b/static/usage/v8/radio/label-placement/vue.md new file mode 100644 index 00000000000..d397b8ce31b --- /dev/null +++ b/static/usage/v8/radio/label-placement/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v8/radio/migration/index.md b/static/usage/v8/radio/migration/index.md new file mode 100644 index 00000000000..4c0477f1e4a --- /dev/null +++ b/static/usage/v8/radio/migration/index.md @@ -0,0 +1,188 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +````mdx-code-block + + + +```html + + + + + Radio Label + + + + + + Radio Label + + + + + + + Radio Label + + + + + + Radio Label + + + + + + + Radio Label + + + + + + Radio Label + +``` + + + +```html + + + + + Radio Label + + + + + + Radio Label + + + + + + + Radio Label + + + + + + Radio Label + + + + + + + Radio Label + + + + + + Radio Label + +``` + + + +```tsx +{/* Basic */} + +{/* Before */} + + Radio Label + + + +{/* After */} + + Radio Label + + +{/* Fixed Labels */} + +{/* Before */} + + Radio Label + + + +{/* After */} + + Radio Label + + +{/* Radio at the start of line, Label at the end of line */} + +{/* Before */} + + Radio Label + + + +{/* After */} + + Radio Label + +``` + + + +```html + + + + + Radio Label + + + + + + Radio Label + + + + + + + Radio Label + + + + + + Radio Label + + + + + + + Radio Label + + + + + + Radio Label + +``` + + +```` diff --git a/static/usage/v8/radio/theming/colors/angular.md b/static/usage/v8/radio/theming/colors/angular.md new file mode 100644 index 00000000000..d3389196bfa --- /dev/null +++ b/static/usage/v8/radio/theming/colors/angular.md @@ -0,0 +1,29 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/radio/theming/colors/demo.html b/static/usage/v8/radio/theming/colors/demo.html new file mode 100644 index 00000000000..273dfe737d3 --- /dev/null +++ b/static/usage/v8/radio/theming/colors/demo.html @@ -0,0 +1,48 @@ + + + + + + Radio + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/radio/theming/colors/index.md b/static/usage/v8/radio/theming/colors/index.md new file mode 100644 index 00000000000..3cd9a87cdb8 --- /dev/null +++ b/static/usage/v8/radio/theming/colors/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/radio/theming/colors/javascript.md b/static/usage/v8/radio/theming/colors/javascript.md new file mode 100644 index 00000000000..d3389196bfa --- /dev/null +++ b/static/usage/v8/radio/theming/colors/javascript.md @@ -0,0 +1,29 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/radio/theming/colors/react.md b/static/usage/v8/radio/theming/colors/react.md new file mode 100644 index 00000000000..cccf60c87da --- /dev/null +++ b/static/usage/v8/radio/theming/colors/react.md @@ -0,0 +1,39 @@ +```tsx +import React from 'react'; +import { IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/radio/theming/colors/vue.md b/static/usage/v8/radio/theming/colors/vue.md new file mode 100644 index 00000000000..74b8aa3a73e --- /dev/null +++ b/static/usage/v8/radio/theming/colors/vue.md @@ -0,0 +1,40 @@ +```html + + + +``` diff --git a/static/usage/v8/radio/theming/css-properties/angular/example_component_css.md b/static/usage/v8/radio/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..fa96171282e --- /dev/null +++ b/static/usage/v8/radio/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,21 @@ +```css +ion-radio { + --border-radius: 4px; + --inner-border-radius: 4px; + + --color: #ddd; + --color-checked: #6815ec; +} + +ion-radio.ios::part(container) { + width: 20px; + height: 20px; + + border: 2px solid #ddd; + border-radius: 4px; +} + +.radio-checked.ios::part(container) { + border-color: #6815ec; +} +``` diff --git a/static/usage/v8/radio/theming/css-properties/angular/example_component_html.md b/static/usage/v8/radio/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..31e21f3f19b --- /dev/null +++ b/static/usage/v8/radio/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v8/radio/theming/css-properties/demo.html b/static/usage/v8/radio/theming/css-properties/demo.html new file mode 100644 index 00000000000..f33581263b6 --- /dev/null +++ b/static/usage/v8/radio/theming/css-properties/demo.html @@ -0,0 +1,47 @@ + + + + + + Radio + + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v8/radio/theming/css-properties/index.md b/static/usage/v8/radio/theming/css-properties/index.md new file mode 100644 index 00000000000..032b2ee66c9 --- /dev/null +++ b/static/usage/v8/radio/theming/css-properties/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/radio/theming/css-properties/javascript.md b/static/usage/v8/radio/theming/css-properties/javascript.md new file mode 100644 index 00000000000..d61629a5d9b --- /dev/null +++ b/static/usage/v8/radio/theming/css-properties/javascript.md @@ -0,0 +1,28 @@ +```html + + + + + + +``` diff --git a/static/usage/v8/radio/theming/css-properties/react/main_css.md b/static/usage/v8/radio/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..fa96171282e --- /dev/null +++ b/static/usage/v8/radio/theming/css-properties/react/main_css.md @@ -0,0 +1,21 @@ +```css +ion-radio { + --border-radius: 4px; + --inner-border-radius: 4px; + + --color: #ddd; + --color-checked: #6815ec; +} + +ion-radio.ios::part(container) { + width: 20px; + height: 20px; + + border: 2px solid #ddd; + border-radius: 4px; +} + +.radio-checked.ios::part(container) { + border-color: #6815ec; +} +``` diff --git a/static/usage/v8/radio/theming/css-properties/react/main_tsx.md b/static/usage/v8/radio/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..2a0c72670a3 --- /dev/null +++ b/static/usage/v8/radio/theming/css-properties/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonRadio, IonRadioGroup } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/radio/theming/css-properties/vue.md b/static/usage/v8/radio/theming/css-properties/vue.md new file mode 100644 index 00000000000..ddbbd48152a --- /dev/null +++ b/static/usage/v8/radio/theming/css-properties/vue.md @@ -0,0 +1,39 @@ +```html + + + + + +``` diff --git a/static/usage/v8/radio/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v8/radio/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..ed13071b193 --- /dev/null +++ b/static/usage/v8/radio/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,32 @@ +```css +ion-radio::part(container) { + width: 30px; + height: 30px; + + border-radius: 8px; + border: 2px solid #ddd; +} + +ion-radio::part(mark) { + background: none; + transition: none; + transform: none; + border-radius: 0; +} + +ion-radio.radio-checked::part(container) { + background: #6815ec; + border-color: transparent; +} + +ion-radio.radio-checked::part(mark) { + width: 6px; + height: 10px; + + border-width: 0px 2px 2px 0px; + border-style: solid; + border-color: #fff; + + transform: rotate(45deg); +} +``` diff --git a/static/usage/v8/radio/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v8/radio/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..31e21f3f19b --- /dev/null +++ b/static/usage/v8/radio/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v8/radio/theming/css-shadow-parts/demo.html b/static/usage/v8/radio/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..a16a987f495 --- /dev/null +++ b/static/usage/v8/radio/theming/css-shadow-parts/demo.html @@ -0,0 +1,58 @@ + + + + + + Radio + + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v8/radio/theming/css-shadow-parts/index.md b/static/usage/v8/radio/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..92071383efc --- /dev/null +++ b/static/usage/v8/radio/theming/css-shadow-parts/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/radio/theming/css-shadow-parts/javascript.md b/static/usage/v8/radio/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..537f1c58d7a --- /dev/null +++ b/static/usage/v8/radio/theming/css-shadow-parts/javascript.md @@ -0,0 +1,39 @@ +```html + + + + + + +``` diff --git a/static/usage/v8/radio/theming/css-shadow-parts/react/main_css.md b/static/usage/v8/radio/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..ed13071b193 --- /dev/null +++ b/static/usage/v8/radio/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,32 @@ +```css +ion-radio::part(container) { + width: 30px; + height: 30px; + + border-radius: 8px; + border: 2px solid #ddd; +} + +ion-radio::part(mark) { + background: none; + transition: none; + transform: none; + border-radius: 0; +} + +ion-radio.radio-checked::part(container) { + background: #6815ec; + border-color: transparent; +} + +ion-radio.radio-checked::part(mark) { + width: 6px; + height: 10px; + + border-width: 0px 2px 2px 0px; + border-style: solid; + border-color: #fff; + + transform: rotate(45deg); +} +``` diff --git a/static/usage/v8/radio/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v8/radio/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..2a0c72670a3 --- /dev/null +++ b/static/usage/v8/radio/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonRadio, IonRadioGroup } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/radio/theming/css-shadow-parts/vue.md b/static/usage/v8/radio/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..24326a92a94 --- /dev/null +++ b/static/usage/v8/radio/theming/css-shadow-parts/vue.md @@ -0,0 +1,50 @@ +```html + + + + + +``` diff --git a/static/usage/v8/range/basic/angular.md b/static/usage/v8/range/basic/angular.md new file mode 100644 index 00000000000..ea96f2e2dd3 --- /dev/null +++ b/static/usage/v8/range/basic/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/range/basic/demo.html b/static/usage/v8/range/basic/demo.html new file mode 100644 index 00000000000..55216a9dd4b --- /dev/null +++ b/static/usage/v8/range/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/range/basic/index.md b/static/usage/v8/range/basic/index.md new file mode 100644 index 00000000000..49aed4c5b42 --- /dev/null +++ b/static/usage/v8/range/basic/index.md @@ -0,0 +1,10 @@ +# TODO FW-4608 + +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/range/basic/javascript.md b/static/usage/v8/range/basic/javascript.md new file mode 100644 index 00000000000..ea96f2e2dd3 --- /dev/null +++ b/static/usage/v8/range/basic/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/range/basic/react.md b/static/usage/v8/range/basic/react.md new file mode 100644 index 00000000000..ed85af943b5 --- /dev/null +++ b/static/usage/v8/range/basic/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/range/basic/vue.md b/static/usage/v8/range/basic/vue.md new file mode 100644 index 00000000000..421bea060e4 --- /dev/null +++ b/static/usage/v8/range/basic/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/range/dual-knobs/angular.md b/static/usage/v8/range/dual-knobs/angular.md new file mode 100644 index 00000000000..96eb2e59a0e --- /dev/null +++ b/static/usage/v8/range/dual-knobs/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/range/dual-knobs/demo.html b/static/usage/v8/range/dual-knobs/demo.html new file mode 100644 index 00000000000..6d2e8fef85b --- /dev/null +++ b/static/usage/v8/range/dual-knobs/demo.html @@ -0,0 +1,34 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + + diff --git a/static/usage/v8/range/dual-knobs/index.md b/static/usage/v8/range/dual-knobs/index.md new file mode 100644 index 00000000000..ead42b93ad6 --- /dev/null +++ b/static/usage/v8/range/dual-knobs/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/range/dual-knobs/javascript.md b/static/usage/v8/range/dual-knobs/javascript.md new file mode 100644 index 00000000000..3c182c98e5b --- /dev/null +++ b/static/usage/v8/range/dual-knobs/javascript.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v8/range/dual-knobs/react.md b/static/usage/v8/range/dual-knobs/react.md new file mode 100644 index 00000000000..cdc8fb17534 --- /dev/null +++ b/static/usage/v8/range/dual-knobs/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v8/range/dual-knobs/vue.md b/static/usage/v8/range/dual-knobs/vue.md new file mode 100644 index 00000000000..5e23079bfa7 --- /dev/null +++ b/static/usage/v8/range/dual-knobs/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/range/ion-change-event/angular/example_component_html.md b/static/usage/v8/range/ion-change-event/angular/example_component_html.md new file mode 100644 index 00000000000..bbcbd120285 --- /dev/null +++ b/static/usage/v8/range/ion-change-event/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/range/ion-change-event/angular/example_component_ts.md b/static/usage/v8/range/ion-change-event/angular/example_component_ts.md new file mode 100644 index 00000000000..377ccd2dc28 --- /dev/null +++ b/static/usage/v8/range/ion-change-event/angular/example_component_ts.md @@ -0,0 +1,15 @@ +```ts +import { Component } from '@angular/core'; + +import { RangeCustomEvent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + onIonChange(ev: Event) { + console.log('ionChange emitted value:', (ev as RangeCustomEvent).detail.value); + } +} +``` diff --git a/static/usage/v8/range/ion-change-event/demo.html b/static/usage/v8/range/ion-change-event/demo.html new file mode 100644 index 00000000000..42fa2654800 --- /dev/null +++ b/static/usage/v8/range/ion-change-event/demo.html @@ -0,0 +1,37 @@ + + + + + + Range + + + + + + + + + + +
+
+ +
+
+ + + + + diff --git a/static/usage/v8/range/ion-change-event/index.md b/static/usage/v8/range/ion-change-event/index.md new file mode 100644 index 00000000000..b61d73279f3 --- /dev/null +++ b/static/usage/v8/range/ion-change-event/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/range/ion-change-event/javascript.md b/static/usage/v8/range/ion-change-event/javascript.md new file mode 100644 index 00000000000..25507306a55 --- /dev/null +++ b/static/usage/v8/range/ion-change-event/javascript.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v8/range/ion-change-event/react.md b/static/usage/v8/range/ion-change-event/react.md new file mode 100644 index 00000000000..d49b2adb596 --- /dev/null +++ b/static/usage/v8/range/ion-change-event/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; + +function Example() { + return ( + console.log('ionChange emitted value: ' + detail.value)} + > + ); +} +export default Example; +``` diff --git a/static/usage/v8/range/ion-change-event/vue.md b/static/usage/v8/range/ion-change-event/vue.md new file mode 100644 index 00000000000..44a3fdcfa1f --- /dev/null +++ b/static/usage/v8/range/ion-change-event/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/range/ion-knob-move-event/angular/example_component_html.md b/static/usage/v8/range/ion-knob-move-event/angular/example_component_html.md new file mode 100644 index 00000000000..aa044d03b66 --- /dev/null +++ b/static/usage/v8/range/ion-knob-move-event/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + +``` diff --git a/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md new file mode 100644 index 00000000000..e1b920f66da --- /dev/null +++ b/static/usage/v8/range/ion-knob-move-event/angular/example_component_ts.md @@ -0,0 +1,19 @@ +```ts +import { Component } from '@angular/core'; + +import { RangeCustomEvent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + onIonKnobMoveStart(ev: Event) { + console.log('ionKnobMoveStart:', (ev as RangeCustomEvent).detail.value); + } + + onIonKnobMoveEnd(ev: Event) { + console.log('ionKnobMoveEnd:', (ev as RangeCustomEvent).detail.value); + } +} +``` diff --git a/static/usage/v8/range/ion-knob-move-event/demo.html b/static/usage/v8/range/ion-knob-move-event/demo.html new file mode 100644 index 00000000000..82ec51f5cbd --- /dev/null +++ b/static/usage/v8/range/ion-knob-move-event/demo.html @@ -0,0 +1,41 @@ + + + + + + Range + + + + + + + + + + +
+
+ +
+
+ + + + + diff --git a/static/usage/v8/range/ion-knob-move-event/index.md b/static/usage/v8/range/ion-knob-move-event/index.md new file mode 100644 index 00000000000..3a88d90412d --- /dev/null +++ b/static/usage/v8/range/ion-knob-move-event/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/range/ion-knob-move-event/javascript.md b/static/usage/v8/range/ion-knob-move-event/javascript.md new file mode 100644 index 00000000000..5f7389814ba --- /dev/null +++ b/static/usage/v8/range/ion-knob-move-event/javascript.md @@ -0,0 +1,15 @@ +```html + + + +``` diff --git a/static/usage/v8/range/ion-knob-move-event/react.md b/static/usage/v8/range/ion-knob-move-event/react.md new file mode 100644 index 00000000000..7085cc5c3b7 --- /dev/null +++ b/static/usage/v8/range/ion-knob-move-event/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; + +function Example() { + return ( + console.log('ionKnobMoveStart:', detail.value)} + onIonKnobMoveEnd={({ detail }) => console.log('ionKnobMoveEnd:', detail.value)} + > + ); +} +export default Example; +``` diff --git a/static/usage/v8/range/ion-knob-move-event/vue.md b/static/usage/v8/range/ion-knob-move-event/vue.md new file mode 100644 index 00000000000..84531f16f2c --- /dev/null +++ b/static/usage/v8/range/ion-knob-move-event/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v8/range/label-slot/angular.md b/static/usage/v8/range/label-slot/angular.md new file mode 100644 index 00000000000..a1942046521 --- /dev/null +++ b/static/usage/v8/range/label-slot/angular.md @@ -0,0 +1,5 @@ +```html + +
Label with custom HTML
+ +``` diff --git a/static/usage/v8/range/label-slot/demo.html b/static/usage/v8/range/label-slot/demo.html new file mode 100644 index 00000000000..1a39163e66f --- /dev/null +++ b/static/usage/v8/range/label-slot/demo.html @@ -0,0 +1,29 @@ + + + + + + Range + + + + + + + + + + +
+ +
Label with custom HTML
+ +
+ + + + diff --git a/static/usage/v8/range/label-slot/index.md b/static/usage/v8/range/label-slot/index.md new file mode 100644 index 00000000000..f885a98ce72 --- /dev/null +++ b/static/usage/v8/range/label-slot/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/range/label-slot/javascript.md b/static/usage/v8/range/label-slot/javascript.md new file mode 100644 index 00000000000..a1942046521 --- /dev/null +++ b/static/usage/v8/range/label-slot/javascript.md @@ -0,0 +1,5 @@ +```html + +
Label with custom HTML
+ +``` diff --git a/static/usage/v8/range/label-slot/react.md b/static/usage/v8/range/label-slot/react.md new file mode 100644 index 00000000000..8a3e4a8a07d --- /dev/null +++ b/static/usage/v8/range/label-slot/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonRange, IonText } from '@ionic/react'; +function Example() { + return ( + +
+ Label with custom HTML +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/range/label-slot/vue.md b/static/usage/v8/range/label-slot/vue.md new file mode 100644 index 00000000000..b67e731d684 --- /dev/null +++ b/static/usage/v8/range/label-slot/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v8/range/labels/angular.md b/static/usage/v8/range/labels/angular.md new file mode 100644 index 00000000000..24c92babb74 --- /dev/null +++ b/static/usage/v8/range/labels/angular.md @@ -0,0 +1,15 @@ +```html + + +
+ + + +
+ + + +
+ + +``` diff --git a/static/usage/v8/range/labels/demo.html b/static/usage/v8/range/labels/demo.html new file mode 100644 index 00000000000..1d37d7b1976 --- /dev/null +++ b/static/usage/v8/range/labels/demo.html @@ -0,0 +1,41 @@ + + + + + + Range + + + + + + + + + + +
+
+ + +
+ + + +
+ + + +
+ + +
+
+ + + + diff --git a/static/usage/v8/range/labels/index.md b/static/usage/v8/range/labels/index.md new file mode 100644 index 00000000000..0a450c0c603 --- /dev/null +++ b/static/usage/v8/range/labels/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/range/labels/javascript.md b/static/usage/v8/range/labels/javascript.md new file mode 100644 index 00000000000..88bf7ff3464 --- /dev/null +++ b/static/usage/v8/range/labels/javascript.md @@ -0,0 +1,15 @@ +```html + + +
+ + + +
+ + + +
+ + +``` diff --git a/static/usage/v8/range/labels/react.md b/static/usage/v8/range/labels/react.md new file mode 100644 index 00000000000..50799aa3d3b --- /dev/null +++ b/static/usage/v8/range/labels/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; +function Example() { + return ( + <> + + +
+ + + +
+ + + +
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/range/labels/vue.md b/static/usage/v8/range/labels/vue.md new file mode 100644 index 00000000000..1d80cceb292 --- /dev/null +++ b/static/usage/v8/range/labels/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v8/range/migration/index.md b/static/usage/v8/range/migration/index.md new file mode 100644 index 00000000000..4025f91bc31 --- /dev/null +++ b/static/usage/v8/range/migration/index.md @@ -0,0 +1,256 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +````mdx-code-block + + + +```html + + + + + Notifications + + + + + + + + + + + + + Notifications + + + + + + + + + + + + + Notifications + + + + + + + + + + + + + +
Notifications
+ + + + + + + +
Notifications
+ + +``` + + + +```html + + + + + Notifications + + + + + + + + + + + + + Notifications + + + + + + + + + + + + + Notifications + + + + + + + + + + + + + +
Notifications
+ + + + + + + +
Notifications
+ + +``` + + + +```tsx +{/* Basic */} + +{/* Before */} + + Notifications + + + +{/* After */} + + + + +{/* Fixed Labels */} + +{/* Before */} + + Notifications + + + +{/* After */} + + + + +{/* Range at the start of line, Label at the end of line */} + +{/* Before */} + + Notifications + + + +{/* After */} + + + + +{/* Custom HTML label */} + +{/* Before */} + + +
Notifications
+ + + + + + + +
Notifications
+ + +``` + + + +```html + + + + + Notifications + + + + + + + + + + + + + Notifications + + + + + + + + + + + + + Notifications + + + + + + + + + + + + + +
Notifications
+ + + + + + + +
Notifications
+ + +``` + + +```` diff --git a/static/usage/v8/range/no-visible-label/angular.md b/static/usage/v8/range/no-visible-label/angular.md new file mode 100644 index 00000000000..ea96f2e2dd3 --- /dev/null +++ b/static/usage/v8/range/no-visible-label/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/range/no-visible-label/demo.html b/static/usage/v8/range/no-visible-label/demo.html new file mode 100644 index 00000000000..55216a9dd4b --- /dev/null +++ b/static/usage/v8/range/no-visible-label/demo.html @@ -0,0 +1,27 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/range/no-visible-label/index.md b/static/usage/v8/range/no-visible-label/index.md new file mode 100644 index 00000000000..f23fc3fd998 --- /dev/null +++ b/static/usage/v8/range/no-visible-label/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/range/no-visible-label/javascript.md b/static/usage/v8/range/no-visible-label/javascript.md new file mode 100644 index 00000000000..ea96f2e2dd3 --- /dev/null +++ b/static/usage/v8/range/no-visible-label/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/range/no-visible-label/react.md b/static/usage/v8/range/no-visible-label/react.md new file mode 100644 index 00000000000..ed85af943b5 --- /dev/null +++ b/static/usage/v8/range/no-visible-label/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/range/no-visible-label/vue.md b/static/usage/v8/range/no-visible-label/vue.md new file mode 100644 index 00000000000..421bea060e4 --- /dev/null +++ b/static/usage/v8/range/no-visible-label/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/range/pins/angular/example_component_html.md b/static/usage/v8/range/pins/angular/example_component_html.md new file mode 100644 index 00000000000..f27f095a636 --- /dev/null +++ b/static/usage/v8/range/pins/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/range/pins/angular/example_component_ts.md b/static/usage/v8/range/pins/angular/example_component_ts.md new file mode 100644 index 00000000000..8dc875e1bda --- /dev/null +++ b/static/usage/v8/range/pins/angular/example_component_ts.md @@ -0,0 +1,13 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + pinFormatter(value: number) { + return `${value}%`; + } +} +``` diff --git a/static/usage/v8/range/pins/demo.html b/static/usage/v8/range/pins/demo.html new file mode 100644 index 00000000000..65adbd858e4 --- /dev/null +++ b/static/usage/v8/range/pins/demo.html @@ -0,0 +1,33 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + + diff --git a/static/usage/v8/range/pins/index.md b/static/usage/v8/range/pins/index.md new file mode 100644 index 00000000000..2daa1c4e98b --- /dev/null +++ b/static/usage/v8/range/pins/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/range/pins/javascript.md b/static/usage/v8/range/pins/javascript.md new file mode 100644 index 00000000000..494da8ff806 --- /dev/null +++ b/static/usage/v8/range/pins/javascript.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v8/range/pins/react.md b/static/usage/v8/range/pins/react.md new file mode 100644 index 00000000000..478d3cd20ed --- /dev/null +++ b/static/usage/v8/range/pins/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; +function Example() { + return `${value}%`}>; +} +export default Example; +``` diff --git a/static/usage/v8/range/pins/vue.md b/static/usage/v8/range/pins/vue.md new file mode 100644 index 00000000000..1fabf896c76 --- /dev/null +++ b/static/usage/v8/range/pins/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/range/slots/angular.md b/static/usage/v8/range/slots/angular.md new file mode 100644 index 00000000000..253663f6c6e --- /dev/null +++ b/static/usage/v8/range/slots/angular.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v8/range/slots/demo.html b/static/usage/v8/range/slots/demo.html new file mode 100644 index 00000000000..7fd48d2ce30 --- /dev/null +++ b/static/usage/v8/range/slots/demo.html @@ -0,0 +1,30 @@ + + + + + + Range + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v8/range/slots/index.md b/static/usage/v8/range/slots/index.md new file mode 100644 index 00000000000..511261e3678 --- /dev/null +++ b/static/usage/v8/range/slots/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/range/slots/javascript.md b/static/usage/v8/range/slots/javascript.md new file mode 100644 index 00000000000..253663f6c6e --- /dev/null +++ b/static/usage/v8/range/slots/javascript.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v8/range/slots/react.md b/static/usage/v8/range/slots/react.md new file mode 100644 index 00000000000..36a5228d0a1 --- /dev/null +++ b/static/usage/v8/range/slots/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonRange, IonIcon } from '@ionic/react'; +import { snowOutline, sunnyOutline } from 'ionicons/icons'; + +function Example() { + return ( + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/range/slots/vue.md b/static/usage/v8/range/slots/vue.md new file mode 100644 index 00000000000..57d8edeb2ca --- /dev/null +++ b/static/usage/v8/range/slots/vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v8/range/snapping-ticks/angular.md b/static/usage/v8/range/snapping-ticks/angular.md new file mode 100644 index 00000000000..d52f5e4b119 --- /dev/null +++ b/static/usage/v8/range/snapping-ticks/angular.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/range/snapping-ticks/demo.html b/static/usage/v8/range/snapping-ticks/demo.html new file mode 100644 index 00000000000..2fee5c8ce44 --- /dev/null +++ b/static/usage/v8/range/snapping-ticks/demo.html @@ -0,0 +1,27 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/range/snapping-ticks/index.md b/static/usage/v8/range/snapping-ticks/index.md new file mode 100644 index 00000000000..0fc7d22e2ec --- /dev/null +++ b/static/usage/v8/range/snapping-ticks/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/range/snapping-ticks/javascript.md b/static/usage/v8/range/snapping-ticks/javascript.md new file mode 100644 index 00000000000..692bb3840a1 --- /dev/null +++ b/static/usage/v8/range/snapping-ticks/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/range/snapping-ticks/react.md b/static/usage/v8/range/snapping-ticks/react.md new file mode 100644 index 00000000000..aeeb784cfe6 --- /dev/null +++ b/static/usage/v8/range/snapping-ticks/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/range/snapping-ticks/vue.md b/static/usage/v8/range/snapping-ticks/vue.md new file mode 100644 index 00000000000..69417e31d81 --- /dev/null +++ b/static/usage/v8/range/snapping-ticks/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/range/theming/css-properties/angular/example_component_css.md b/static/usage/v8/range/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..bcc87bbf1b4 --- /dev/null +++ b/static/usage/v8/range/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,12 @@ +```css +ion-range { + --bar-background: #a2d2ff; + --bar-background-active: #bde0fe; + --bar-height: 8px; + --bar-border-radius: 8px; + --knob-background: #ffc8dd; + --knob-size: 40px; + --pin-background: #ffafcc; + --pin-color: #fff; +} +``` diff --git a/static/usage/v8/range/theming/css-properties/angular/example_component_html.md b/static/usage/v8/range/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..6c9011af30a --- /dev/null +++ b/static/usage/v8/range/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/range/theming/css-properties/demo.html b/static/usage/v8/range/theming/css-properties/demo.html new file mode 100644 index 00000000000..1ec8a9680a1 --- /dev/null +++ b/static/usage/v8/range/theming/css-properties/demo.html @@ -0,0 +1,36 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/range/theming/css-properties/index.md b/static/usage/v8/range/theming/css-properties/index.md new file mode 100644 index 00000000000..380bd5204d7 --- /dev/null +++ b/static/usage/v8/range/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/range/theming/css-properties/javascript.md b/static/usage/v8/range/theming/css-properties/javascript.md new file mode 100644 index 00000000000..790f13b53e2 --- /dev/null +++ b/static/usage/v8/range/theming/css-properties/javascript.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v8/range/theming/css-properties/react/main_css.md b/static/usage/v8/range/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..bcc87bbf1b4 --- /dev/null +++ b/static/usage/v8/range/theming/css-properties/react/main_css.md @@ -0,0 +1,12 @@ +```css +ion-range { + --bar-background: #a2d2ff; + --bar-background-active: #bde0fe; + --bar-height: 8px; + --bar-border-radius: 8px; + --knob-background: #ffc8dd; + --knob-size: 40px; + --pin-background: #ffafcc; + --pin-color: #fff; +} +``` diff --git a/static/usage/v8/range/theming/css-properties/react/main_tsx.md b/static/usage/v8/range/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..958999027ab --- /dev/null +++ b/static/usage/v8/range/theming/css-properties/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/range/theming/css-properties/vue.md b/static/usage/v8/range/theming/css-properties/vue.md new file mode 100644 index 00000000000..c6f7b058b7a --- /dev/null +++ b/static/usage/v8/range/theming/css-properties/vue.md @@ -0,0 +1,27 @@ +```html + + + + + +``` diff --git a/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..0092daad827 --- /dev/null +++ b/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,43 @@ +```css +ion-range::part(tick) { + background: #a2d2ff; +} + +ion-range::part(tick-active) { + background: #bde0fe; +} + +ion-range::part(pin) { + display: inline-flex; + align-items: center; + justify-content: center; + + background: #ffafcc; + color: #fff; + + border-radius: 50%; + transform: scale(1.01); + + top: -20px; + + min-width: 28px; + height: 28px; + transition: transform 120ms ease, background 120ms ease; +} + +ion-range::part(pin)::before { + content: none; +} + +ion-range::part(knob) { + background: #ffc8dd; +} + +ion-range::part(bar) { + background: #a2d2ff; +} + +ion-range::part(bar-active) { + background: #bde0fe; +} +``` diff --git a/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..d8b5aad8076 --- /dev/null +++ b/static/usage/v8/range/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + +``` diff --git a/static/usage/v8/range/theming/css-shadow-parts/demo.html b/static/usage/v8/range/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..9e1fc9d86f7 --- /dev/null +++ b/static/usage/v8/range/theming/css-shadow-parts/demo.html @@ -0,0 +1,77 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/range/theming/css-shadow-parts/index.md b/static/usage/v8/range/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..4b384ac3d81 --- /dev/null +++ b/static/usage/v8/range/theming/css-shadow-parts/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/range/theming/css-shadow-parts/javascript.md b/static/usage/v8/range/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..87e968a80c8 --- /dev/null +++ b/static/usage/v8/range/theming/css-shadow-parts/javascript.md @@ -0,0 +1,47 @@ +```html + + + +``` diff --git a/static/usage/v8/range/theming/css-shadow-parts/react/main_css.md b/static/usage/v8/range/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..0092daad827 --- /dev/null +++ b/static/usage/v8/range/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,43 @@ +```css +ion-range::part(tick) { + background: #a2d2ff; +} + +ion-range::part(tick-active) { + background: #bde0fe; +} + +ion-range::part(pin) { + display: inline-flex; + align-items: center; + justify-content: center; + + background: #ffafcc; + color: #fff; + + border-radius: 50%; + transform: scale(1.01); + + top: -20px; + + min-width: 28px; + height: 28px; + transition: transform 120ms ease, background 120ms ease; +} + +ion-range::part(pin)::before { + content: none; +} + +ion-range::part(knob) { + background: #ffc8dd; +} + +ion-range::part(bar) { + background: #a2d2ff; +} + +ion-range::part(bar-active) { + background: #bde0fe; +} +``` diff --git a/static/usage/v8/range/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v8/range/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..801f80be7a5 --- /dev/null +++ b/static/usage/v8/range/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/range/theming/css-shadow-parts/vue.md b/static/usage/v8/range/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..91b55c3c3c5 --- /dev/null +++ b/static/usage/v8/range/theming/css-shadow-parts/vue.md @@ -0,0 +1,66 @@ +```html + + + + + +``` diff --git a/static/usage/v8/refresher/advanced/angular/example_component_css.md b/static/usage/v8/refresher/advanced/angular/example_component_css.md new file mode 100644 index 00000000000..102c69d71f9 --- /dev/null +++ b/static/usage/v8/refresher/advanced/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +ion-item { + --padding-start: 8px; +} + +ion-icon { + font-size: 12px; + align-self: start; + margin: 15px 8px; +} +``` diff --git a/static/usage/v8/refresher/advanced/angular/example_component_html.md b/static/usage/v8/refresher/advanced/angular/example_component_html.md new file mode 100644 index 00000000000..e724a1da71e --- /dev/null +++ b/static/usage/v8/refresher/advanced/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + Pull to Refresh + + + + + + + + + + + + +

{{ item.name }}

+

New message from {{ item.name }}

+ + + + +``` diff --git a/static/usage/v8/refresher/advanced/angular/example_component_ts.md b/static/usage/v8/refresher/advanced/angular/example_component_ts.md new file mode 100644 index 00000000000..98888ac14fa --- /dev/null +++ b/static/usage/v8/refresher/advanced/angular/example_component_ts.md @@ -0,0 +1,51 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], +}) +export class ExampleComponent { + public names = [ + 'Burt Bear', + 'Charlie Cheetah', + 'Donald Duck', + 'Eva Eagle', + 'Ellie Elephant', + 'Gino Giraffe', + 'Isabella Iguana', + 'Karl Kitten', + 'Lionel Lion', + 'Molly Mouse', + 'Paul Puppy', + 'Rachel Rabbit', + 'Ted Turtle', + ]; + public items = []; + + ngOnInit() { + this.addItems(5); + } + + chooseRandomName() { + return this.names[Math.floor(Math.random() * this.names.length)]; + } + + addItems(count, unread = false) { + for (let i = 0; i < count; i++) { + this.items.unshift({ + name: this.chooseRandomName(), + unread: unread, + }); + } + } + + handleRefresh(event) { + setTimeout(() => { + this.addItems(3, true); + event.target.complete(); + }, 2000); + } +} +``` diff --git a/static/usage/v8/refresher/advanced/demo.html b/static/usage/v8/refresher/advanced/demo.html new file mode 100644 index 00000000000..3c6ea3e6750 --- /dev/null +++ b/static/usage/v8/refresher/advanced/demo.html @@ -0,0 +1,97 @@ + + + + + + Refresher + + + + + + + + + + + + + Pull to Refresh + + + + + + + + + + + + + + + diff --git a/static/usage/v8/refresher/advanced/index.md b/static/usage/v8/refresher/advanced/index.md new file mode 100644 index 00000000000..cfc19169444 --- /dev/null +++ b/static/usage/v8/refresher/advanced/index.md @@ -0,0 +1,36 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/refresher/advanced/javascript.md b/static/usage/v8/refresher/advanced/javascript.md new file mode 100644 index 00000000000..9e0ba6f76ed --- /dev/null +++ b/static/usage/v8/refresher/advanced/javascript.md @@ -0,0 +1,82 @@ +```html + + + Pull to Refresh + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/refresher/advanced/react/main_css.md b/static/usage/v8/refresher/advanced/react/main_css.md new file mode 100644 index 00000000000..102c69d71f9 --- /dev/null +++ b/static/usage/v8/refresher/advanced/react/main_css.md @@ -0,0 +1,11 @@ +```css +ion-item { + --padding-start: 8px; +} + +ion-icon { + font-size: 12px; + align-self: start; + margin: 15px 8px; +} +``` diff --git a/static/usage/v8/refresher/advanced/react/main_tsx.md b/static/usage/v8/refresher/advanced/react/main_tsx.md new file mode 100644 index 00000000000..f4cdf27d4eb --- /dev/null +++ b/static/usage/v8/refresher/advanced/react/main_tsx.md @@ -0,0 +1,93 @@ +```tsx +import React, { useEffect, useState } from 'react'; +import { + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherEventDetail, +} from '@ionic/react'; +import { ellipse } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + const names = [ + 'Burt Bear', + 'Charlie Cheetah', + 'Donald Duck', + 'Eva Eagle', + 'Ellie Elephant', + 'Gino Giraffe', + 'Isabella Iguana', + 'Karl Kitten', + 'Lionel Lion', + 'Molly Mouse', + 'Paul Puppy', + 'Rachel Rabbit', + 'Ted Turtle', + ]; + const [items, setItems] = useState<{ name: string; unread: boolean }[]>([]); + + let didInit = false; + + useEffect(() => { + if (!didInit) { + didInit = true; + addItems(5); + } + }, []); + + function handleRefresh(event: CustomEvent) { + setTimeout(() => { + addItems(3, true); + event.detail.complete(); + }, 2000); + } + + function chooseRandomName() { + return names[Math.floor(Math.random() * names.length)]; + } + + function addItems(count: number, unread = false) { + for (let i = 0; i < count; i++) { + setItems((current) => [{ name: chooseRandomName(), unread }, ...current]); + } + } + + return ( + <> + + + Pull to Refresh + + + + + + + + + + {items.map((item) => ( + + + +

{item.name}

+

New message from {item.name}

+ + + ))} + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/refresher/advanced/vue.md b/static/usage/v8/refresher/advanced/vue.md new file mode 100644 index 00000000000..c5ec3047d44 --- /dev/null +++ b/static/usage/v8/refresher/advanced/vue.md @@ -0,0 +1,108 @@ +```html + + + + + +``` diff --git a/static/usage/v8/refresher/basic/angular/example_component_html.md b/static/usage/v8/refresher/basic/angular/example_component_html.md new file mode 100644 index 00000000000..f665c1c51a1 --- /dev/null +++ b/static/usage/v8/refresher/basic/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ +``` diff --git a/static/usage/v8/refresher/basic/angular/example_component_ts.md b/static/usage/v8/refresher/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..74304953d4e --- /dev/null +++ b/static/usage/v8/refresher/basic/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + handleRefresh(event) { + setTimeout(() => { + // Any calls to load data go here + event.target.complete(); + }, 2000); + } +} +``` diff --git a/static/usage/v8/refresher/basic/demo.html b/static/usage/v8/refresher/basic/demo.html new file mode 100644 index 00000000000..ab919600b97 --- /dev/null +++ b/static/usage/v8/refresher/basic/demo.html @@ -0,0 +1,41 @@ + + + + + + Refresher + + + + + + + + + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + + + + diff --git a/static/usage/v8/refresher/basic/index.md b/static/usage/v8/refresher/basic/index.md new file mode 100644 index 00000000000..72a38f16267 --- /dev/null +++ b/static/usage/v8/refresher/basic/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/refresher/basic/javascript.md b/static/usage/v8/refresher/basic/javascript.md new file mode 100644 index 00000000000..565e1247624 --- /dev/null +++ b/static/usage/v8/refresher/basic/javascript.md @@ -0,0 +1,26 @@ +```html + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + +``` diff --git a/static/usage/v8/refresher/basic/react.md b/static/usage/v8/refresher/basic/react.md new file mode 100644 index 00000000000..02b0504208b --- /dev/null +++ b/static/usage/v8/refresher/basic/react.md @@ -0,0 +1,40 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherEventDetail, +} from '@ionic/react'; + +function Example() { + function handleRefresh(event: CustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.detail.complete(); + }, 2000); + } + + return ( + <> + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/refresher/basic/vue.md b/static/usage/v8/refresher/basic/vue.md new file mode 100644 index 00000000000..870081dcfbf --- /dev/null +++ b/static/usage/v8/refresher/basic/vue.md @@ -0,0 +1,36 @@ +```html + + + +``` diff --git a/static/usage/v8/refresher/custom-content/angular/example_component_html.md b/static/usage/v8/refresher/custom-content/angular/example_component_html.md new file mode 100644 index 00000000000..5f0e0a5171f --- /dev/null +++ b/static/usage/v8/refresher/custom-content/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + + + Pull to Refresh + + + + + + + + + +

Pull this content down to trigger the refresh.

+ +``` diff --git a/static/usage/v8/refresher/custom-content/angular/example_component_ts.md b/static/usage/v8/refresher/custom-content/angular/example_component_ts.md new file mode 100644 index 00000000000..74304953d4e --- /dev/null +++ b/static/usage/v8/refresher/custom-content/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + handleRefresh(event) { + setTimeout(() => { + // Any calls to load data go here + event.target.complete(); + }, 2000); + } +} +``` diff --git a/static/usage/v8/refresher/custom-content/demo.html b/static/usage/v8/refresher/custom-content/demo.html new file mode 100644 index 00000000000..95e9fabcc37 --- /dev/null +++ b/static/usage/v8/refresher/custom-content/demo.html @@ -0,0 +1,47 @@ + + + + + + Refresher + + + + + + + + + + + Pull to Refresh + + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + + + + diff --git a/static/usage/v8/refresher/custom-content/index.md b/static/usage/v8/refresher/custom-content/index.md new file mode 100644 index 00000000000..cd1bdf7e6bd --- /dev/null +++ b/static/usage/v8/refresher/custom-content/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/refresher/custom-content/javascript.md b/static/usage/v8/refresher/custom-content/javascript.md new file mode 100644 index 00000000000..efcde3c9d6e --- /dev/null +++ b/static/usage/v8/refresher/custom-content/javascript.md @@ -0,0 +1,32 @@ +```html + + + Pull to Refresh + + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + +``` diff --git a/static/usage/v8/refresher/custom-content/react.md b/static/usage/v8/refresher/custom-content/react.md new file mode 100644 index 00000000000..9349b2d2857 --- /dev/null +++ b/static/usage/v8/refresher/custom-content/react.md @@ -0,0 +1,46 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherEventDetail, +} from '@ionic/react'; +import { chevronDownCircleOutline } from 'ionicons/icons'; + +function Example() { + function handleRefresh(event: CustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.detail.complete(); + }, 2000); + } + + return ( + <> + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/refresher/custom-content/vue.md b/static/usage/v8/refresher/custom-content/vue.md new file mode 100644 index 00000000000..af350137449 --- /dev/null +++ b/static/usage/v8/refresher/custom-content/vue.md @@ -0,0 +1,43 @@ +```html + + + +``` diff --git a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_css.md b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_css.md new file mode 100644 index 00000000000..5fe74c95f50 --- /dev/null +++ b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_css.md @@ -0,0 +1,10 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_html.md b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_html.md new file mode 100644 index 00000000000..4c0e2cddc16 --- /dev/null +++ b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + + Pull to Refresh + + + + + + + + +
+

Pull this content down to trigger the refresh.

+
+ +``` diff --git a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md new file mode 100644 index 00000000000..a5ac7eaaa9a --- /dev/null +++ b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md @@ -0,0 +1,17 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + handleRefresh(event) { + setTimeout(() => { + // Any calls to load data go here + event.target.complete(); + }, 2000); + } +} +``` diff --git a/static/usage/v8/refresher/custom-scroll-target/demo.html b/static/usage/v8/refresher/custom-scroll-target/demo.html new file mode 100644 index 00000000000..b52c58eb81f --- /dev/null +++ b/static/usage/v8/refresher/custom-scroll-target/demo.html @@ -0,0 +1,54 @@ + + + + + + Refresher + + + + + + + + + + + + + Pull to Refresh + + + + + + + + +
+

Pull this content down to trigger the refresh.

+
+ + + + + + diff --git a/static/usage/v8/refresher/custom-scroll-target/index.md b/static/usage/v8/refresher/custom-scroll-target/index.md new file mode 100644 index 00000000000..df1b9641c8a --- /dev/null +++ b/static/usage/v8/refresher/custom-scroll-target/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/refresher/custom-scroll-target/javascript.md b/static/usage/v8/refresher/custom-scroll-target/javascript.md new file mode 100644 index 00000000000..dde203612e4 --- /dev/null +++ b/static/usage/v8/refresher/custom-scroll-target/javascript.md @@ -0,0 +1,39 @@ +```html + + + Pull to Refresh + + + + + + + + +
+

Pull this content down to trigger the refresh.

+
+ + + + + +``` diff --git a/static/usage/v8/refresher/custom-scroll-target/react/main_css.md b/static/usage/v8/refresher/custom-scroll-target/react/main_css.md new file mode 100644 index 00000000000..5fe74c95f50 --- /dev/null +++ b/static/usage/v8/refresher/custom-scroll-target/react/main_css.md @@ -0,0 +1,10 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v8/refresher/custom-scroll-target/react/main_tsx.md b/static/usage/v8/refresher/custom-scroll-target/react/main_tsx.md new file mode 100644 index 00000000000..a8a52b4d29d --- /dev/null +++ b/static/usage/v8/refresher/custom-scroll-target/react/main_tsx.md @@ -0,0 +1,44 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherEventDetail, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + function handleRefresh(event: CustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.detail.complete(); + }, 2000); + } + + return ( + <> + + + Pull to Refresh + + + + + + + + +
+

Pull this content down to trigger the refresh.

+
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/refresher/custom-scroll-target/vue.md b/static/usage/v8/refresher/custom-scroll-target/vue.md new file mode 100644 index 00000000000..b63d979c827 --- /dev/null +++ b/static/usage/v8/refresher/custom-scroll-target/vue.md @@ -0,0 +1,49 @@ +```html + + + + + +``` diff --git a/static/usage/v8/refresher/pull-properties/angular/example_component_html.md b/static/usage/v8/refresher/pull-properties/angular/example_component_html.md new file mode 100644 index 00000000000..1e5948063b8 --- /dev/null +++ b/static/usage/v8/refresher/pull-properties/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ +``` diff --git a/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..74304953d4e --- /dev/null +++ b/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + handleRefresh(event) { + setTimeout(() => { + // Any calls to load data go here + event.target.complete(); + }, 2000); + } +} +``` diff --git a/static/usage/v8/refresher/pull-properties/demo.html b/static/usage/v8/refresher/pull-properties/demo.html new file mode 100644 index 00000000000..cd7f8031e38 --- /dev/null +++ b/static/usage/v8/refresher/pull-properties/demo.html @@ -0,0 +1,41 @@ + + + + + + Refresher + + + + + + + + + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + + + + diff --git a/static/usage/v8/refresher/pull-properties/index.md b/static/usage/v8/refresher/pull-properties/index.md new file mode 100644 index 00000000000..f4db4363d91 --- /dev/null +++ b/static/usage/v8/refresher/pull-properties/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/refresher/pull-properties/javascript.md b/static/usage/v8/refresher/pull-properties/javascript.md new file mode 100644 index 00000000000..8bc8b286566 --- /dev/null +++ b/static/usage/v8/refresher/pull-properties/javascript.md @@ -0,0 +1,26 @@ +```html + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + +``` diff --git a/static/usage/v8/refresher/pull-properties/react.md b/static/usage/v8/refresher/pull-properties/react.md new file mode 100644 index 00000000000..e62afa17bdd --- /dev/null +++ b/static/usage/v8/refresher/pull-properties/react.md @@ -0,0 +1,40 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherEventDetail, +} from '@ionic/react'; + +function Example() { + function handleRefresh(event: CustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.detail.complete(); + }, 2000); + } + + return ( + <> + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v8/refresher/pull-properties/vue.md b/static/usage/v8/refresher/pull-properties/vue.md new file mode 100644 index 00000000000..0d3e1b45e9f --- /dev/null +++ b/static/usage/v8/refresher/pull-properties/vue.md @@ -0,0 +1,36 @@ +```html + + + +``` diff --git a/static/usage/v8/reorder/basic/angular/example_component_html.md b/static/usage/v8/reorder/basic/angular/example_component_html.md new file mode 100644 index 00000000000..60795eaa3ff --- /dev/null +++ b/static/usage/v8/reorder/basic/angular/example_component_html.md @@ -0,0 +1,32 @@ +```html + + + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + +``` diff --git a/static/usage/v8/reorder/basic/angular/example_component_ts.md b/static/usage/v8/reorder/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..7a5c867f791 --- /dev/null +++ b/static/usage/v8/reorder/basic/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { ItemReorderEventDetail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + handleReorder(ev: CustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group + ev.detail.complete(); + } +} +``` diff --git a/static/usage/v8/reorder/basic/demo.html b/static/usage/v8/reorder/basic/demo.html new file mode 100644 index 00000000000..9a57300393d --- /dev/null +++ b/static/usage/v8/reorder/basic/demo.html @@ -0,0 +1,71 @@ + + + + + + Reorder + + + + + + + + + + + +
+ + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + +
+ + + + + + diff --git a/static/usage/v8/reorder/basic/index.md b/static/usage/v8/reorder/basic/index.md new file mode 100644 index 00000000000..8f5040dee9f --- /dev/null +++ b/static/usage/v8/reorder/basic/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/reorder/basic/javascript.md b/static/usage/v8/reorder/basic/javascript.md new file mode 100644 index 00000000000..fe805d10fc6 --- /dev/null +++ b/static/usage/v8/reorder/basic/javascript.md @@ -0,0 +1,46 @@ +```html + + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + + + +``` diff --git a/static/usage/v8/reorder/basic/react.md b/static/usage/v8/reorder/basic/react.md new file mode 100644 index 00000000000..abe3b187294 --- /dev/null +++ b/static/usage/v8/reorder/basic/react.md @@ -0,0 +1,50 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react'; + +function Example() { + function handleReorder(event: CustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group + event.detail.complete(); + } + + return ( + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/reorder/basic/vue.md b/static/usage/v8/reorder/basic/vue.md new file mode 100644 index 00000000000..0ac2374089f --- /dev/null +++ b/static/usage/v8/reorder/basic/vue.md @@ -0,0 +1,56 @@ +```html + + + +``` diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_html.md b/static/usage/v8/reorder/custom-icon/angular/example_component_html.md new file mode 100644 index 00000000000..6d1fb8960bd --- /dev/null +++ b/static/usage/v8/reorder/custom-icon/angular/example_component_html.md @@ -0,0 +1,42 @@ +```html + + + + + + Item 1 + + + + + + + Item 2 + + + + + + + Item 3 + + + + + + + Item 4 + + + + + + + Item 5 + + + + + + +``` diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md new file mode 100644 index 00000000000..7a5c867f791 --- /dev/null +++ b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { ItemReorderEventDetail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + handleReorder(ev: CustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group + ev.detail.complete(); + } +} +``` diff --git a/static/usage/v8/reorder/custom-icon/demo.html b/static/usage/v8/reorder/custom-icon/demo.html new file mode 100644 index 00000000000..5b40f28d915 --- /dev/null +++ b/static/usage/v8/reorder/custom-icon/demo.html @@ -0,0 +1,81 @@ + + + + + + Reorder + + + + + + + + + + + +
+ + + + + Item 1 + + + + + + + Item 2 + + + + + + + Item 3 + + + + + + + Item 4 + + + + + + + Item 5 + + + + + + +
+ + + + + + diff --git a/static/usage/v8/reorder/custom-icon/index.md b/static/usage/v8/reorder/custom-icon/index.md new file mode 100644 index 00000000000..dde6c15c256 --- /dev/null +++ b/static/usage/v8/reorder/custom-icon/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/reorder/custom-icon/javascript.md b/static/usage/v8/reorder/custom-icon/javascript.md new file mode 100644 index 00000000000..d7aa87d8f64 --- /dev/null +++ b/static/usage/v8/reorder/custom-icon/javascript.md @@ -0,0 +1,56 @@ +```html + + + + + Item 1 + + + + + + + Item 2 + + + + + + + Item 3 + + + + + + + Item 4 + + + + + + + Item 5 + + + + + + + + +``` diff --git a/static/usage/v8/reorder/custom-icon/react.md b/static/usage/v8/reorder/custom-icon/react.md new file mode 100644 index 00000000000..9103db6029d --- /dev/null +++ b/static/usage/v8/reorder/custom-icon/react.md @@ -0,0 +1,61 @@ +```tsx +import React from 'react'; +import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react'; +import { pizza } from 'ionicons/icons'; + +function Example() { + function handleReorder(event: CustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group + event.detail.complete(); + } + + return ( + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + + Item 1 + + + + + + + Item 2 + + + + + + + Item 3 + + + + + + + Item 4 + + + + + + + Item 5 + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/reorder/custom-icon/vue.md b/static/usage/v8/reorder/custom-icon/vue.md new file mode 100644 index 00000000000..87d77e33048 --- /dev/null +++ b/static/usage/v8/reorder/custom-icon/vue.md @@ -0,0 +1,66 @@ +```html + + + +``` diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_css.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_css.md new file mode 100644 index 00000000000..4db169a0e16 --- /dev/null +++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md new file mode 100644 index 00000000000..2296a5506c4 --- /dev/null +++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md @@ -0,0 +1,36 @@ +```html + +
+ + + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + +
+ +``` diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md new file mode 100644 index 00000000000..2cd3dd66740 --- /dev/null +++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; + +import { ItemReorderEventDetail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], +}) +export class ExampleComponent { + handleReorder(ev: CustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group + ev.detail.complete(); + } +} +``` diff --git a/static/usage/v8/reorder/custom-scroll-target/demo.html b/static/usage/v8/reorder/custom-scroll-target/demo.html new file mode 100644 index 00000000000..c89eb9f007d --- /dev/null +++ b/static/usage/v8/reorder/custom-scroll-target/demo.html @@ -0,0 +1,83 @@ + + + + + + Reorder + + + + + + + + + + + +
+
+ + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + +
+
+ + + + + + diff --git a/static/usage/v8/reorder/custom-scroll-target/index.md b/static/usage/v8/reorder/custom-scroll-target/index.md new file mode 100644 index 00000000000..769cef559d1 --- /dev/null +++ b/static/usage/v8/reorder/custom-scroll-target/index.md @@ -0,0 +1,37 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/reorder/custom-scroll-target/javascript.md b/static/usage/v8/reorder/custom-scroll-target/javascript.md new file mode 100644 index 00000000000..533a5815497 --- /dev/null +++ b/static/usage/v8/reorder/custom-scroll-target/javascript.md @@ -0,0 +1,62 @@ +```html + +
+ + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + +
+ + + + + +``` diff --git a/static/usage/v8/reorder/custom-scroll-target/react/main_css.md b/static/usage/v8/reorder/custom-scroll-target/react/main_css.md new file mode 100644 index 00000000000..4db169a0e16 --- /dev/null +++ b/static/usage/v8/reorder/custom-scroll-target/react/main_css.md @@ -0,0 +1,11 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md b/static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md new file mode 100644 index 00000000000..8a3a8eea92c --- /dev/null +++ b/static/usage/v8/reorder/custom-scroll-target/react/main_tsx.md @@ -0,0 +1,64 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, + ItemReorderEventDetail, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + function handleReorder(event: CustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group + event.detail.complete(); + } + + return ( + +
+ + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/reorder/custom-scroll-target/vue.md b/static/usage/v8/reorder/custom-scroll-target/vue.md new file mode 100644 index 00000000000..43151b12039 --- /dev/null +++ b/static/usage/v8/reorder/custom-scroll-target/vue.md @@ -0,0 +1,72 @@ +```html + + + + + +``` diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md new file mode 100644 index 00000000000..aca04f1ee5a --- /dev/null +++ b/static/usage/v8/reorder/toggling-disabled/angular/example_component_html.md @@ -0,0 +1,34 @@ +```html + + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + + + + Toggle Reorder +``` diff --git a/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md new file mode 100644 index 00000000000..af0ff643b26 --- /dev/null +++ b/static/usage/v8/reorder/toggling-disabled/angular/example_component_ts.md @@ -0,0 +1,28 @@ +```ts +import { Component } from '@angular/core'; + +import { ItemReorderEventDetail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + public isDisabled = true; + + handleReorder(ev: CustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group + ev.detail.complete(); + } + + toggleReorder() { + this.isDisabled = !this.isDisabled; + } +} +``` diff --git a/static/usage/v8/reorder/toggling-disabled/demo.html b/static/usage/v8/reorder/toggling-disabled/demo.html new file mode 100644 index 00000000000..6058f2a5d0a --- /dev/null +++ b/static/usage/v8/reorder/toggling-disabled/demo.html @@ -0,0 +1,82 @@ + + + + + + Reorder + + + + + + + + + + + +
+ + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + + + + Toggle Reorder +
+ + + + + + diff --git a/static/usage/v8/reorder/toggling-disabled/index.md b/static/usage/v8/reorder/toggling-disabled/index.md new file mode 100644 index 00000000000..467b3724ea9 --- /dev/null +++ b/static/usage/v8/reorder/toggling-disabled/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/reorder/toggling-disabled/javascript.md b/static/usage/v8/reorder/toggling-disabled/javascript.md new file mode 100644 index 00000000000..90a9bc3d1d2 --- /dev/null +++ b/static/usage/v8/reorder/toggling-disabled/javascript.md @@ -0,0 +1,52 @@ +```html + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + + + + Toggle Reorder + + +``` diff --git a/static/usage/v8/reorder/toggling-disabled/react.md b/static/usage/v8/reorder/toggling-disabled/react.md new file mode 100644 index 00000000000..a231f782f5c --- /dev/null +++ b/static/usage/v8/reorder/toggling-disabled/react.md @@ -0,0 +1,68 @@ +```tsx +import React, { useState } from 'react'; +import { + IonButton, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, + ItemReorderEventDetail, +} from '@ionic/react'; + +function Example() { + const [isDisabled, setIsDisabled] = useState(true); + + function handleReorder(event: CustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group + event.detail.complete(); + } + + function toggleReorder() { + setIsDisabled((current) => !current); + } + + return ( + <> + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + Toggle Reorder + + ); +} +export default Example; +``` diff --git a/static/usage/v8/reorder/toggling-disabled/vue.md b/static/usage/v8/reorder/toggling-disabled/vue.md new file mode 100644 index 00000000000..c649c0ebe36 --- /dev/null +++ b/static/usage/v8/reorder/toggling-disabled/vue.md @@ -0,0 +1,64 @@ +```html + + + +``` diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_html.md b/static/usage/v8/reorder/updating-data/angular/example_component_html.md new file mode 100644 index 00000000000..2485a558246 --- /dev/null +++ b/static/usage/v8/reorder/updating-data/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + + + + Item {{ item }} + + + + +``` diff --git a/static/usage/v8/reorder/updating-data/angular/example_component_ts.md b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md new file mode 100644 index 00000000000..920f5f81e36 --- /dev/null +++ b/static/usage/v8/reorder/updating-data/angular/example_component_ts.md @@ -0,0 +1,31 @@ +```ts +import { Component } from '@angular/core'; + +import { ItemReorderEventDetail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + items = [1, 2, 3, 4, 5]; + + handleReorder(ev: CustomEvent) { + // Before complete is called with the items they will remain in the + // order before the drag + console.log('Before complete', this.items); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. Update the items variable to the + // new order of items + this.items = ev.detail.complete(this.items); + + // After complete is called the items will be in the new order + console.log('After complete', this.items); + } + + trackItems(index: number, itemNumber: number) { + return itemNumber; + } +} +``` diff --git a/static/usage/v8/reorder/updating-data/demo.html b/static/usage/v8/reorder/updating-data/demo.html new file mode 100644 index 00000000000..cef92d8b4ad --- /dev/null +++ b/static/usage/v8/reorder/updating-data/demo.html @@ -0,0 +1,74 @@ + + + + + + Reorder + + + + + + + + + + + +
+ + + + +
+ + + + + + diff --git a/static/usage/v8/reorder/updating-data/index.md b/static/usage/v8/reorder/updating-data/index.md new file mode 100644 index 00000000000..1f29de8ed09 --- /dev/null +++ b/static/usage/v8/reorder/updating-data/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/reorder/updating-data/javascript.md b/static/usage/v8/reorder/updating-data/javascript.md new file mode 100644 index 00000000000..901bf08a970 --- /dev/null +++ b/static/usage/v8/reorder/updating-data/javascript.md @@ -0,0 +1,49 @@ +```html + + + + + + +``` diff --git a/static/usage/v8/reorder/updating-data/react.md b/static/usage/v8/reorder/updating-data/react.md new file mode 100644 index 00000000000..acbf422d017 --- /dev/null +++ b/static/usage/v8/reorder/updating-data/react.md @@ -0,0 +1,37 @@ +```tsx +import React, { useState } from 'react'; +import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react'; + +function Example() { + const [items, setItems] = useState([1, 2, 3, 4, 5]); + + function handleReorder(event: CustomEvent) { + // Before complete is called with the items they will remain in the + // order before the drag + console.log('Before complete', items); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. Update the items variable to the + // new order of items + setItems(event.detail.complete(items)); + + // After complete is called the items will be in the new order + console.log('After complete', items); + } + + return ( + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + {items.map((item) => ( + + Item {item} + + + ))} + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/reorder/updating-data/vue.md b/static/usage/v8/reorder/updating-data/vue.md new file mode 100644 index 00000000000..024caf38347 --- /dev/null +++ b/static/usage/v8/reorder/updating-data/vue.md @@ -0,0 +1,40 @@ +```html + + + +``` diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_html.md b/static/usage/v8/reorder/wrapper/angular/example_component_html.md new file mode 100644 index 00000000000..cf856309098 --- /dev/null +++ b/static/usage/v8/reorder/wrapper/angular/example_component_html.md @@ -0,0 +1,37 @@ +```html + + + + + + + Item 1 + + + + + + Item 2 + + + + + + Item 3 + + + + + + Item 4 + + + + + + Item 5 + + + + +``` diff --git a/static/usage/v8/reorder/wrapper/angular/example_component_ts.md b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md new file mode 100644 index 00000000000..7a5c867f791 --- /dev/null +++ b/static/usage/v8/reorder/wrapper/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; + +import { ItemReorderEventDetail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + handleReorder(ev: CustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group + ev.detail.complete(); + } +} +``` diff --git a/static/usage/v8/reorder/wrapper/demo.html b/static/usage/v8/reorder/wrapper/demo.html new file mode 100644 index 00000000000..38a0bb1dbd5 --- /dev/null +++ b/static/usage/v8/reorder/wrapper/demo.html @@ -0,0 +1,76 @@ + + + + + + Reorder + + + + + + + + + + + +
+ + + + + + Item 1 + + + + + + Item 2 + + + + + + Item 3 + + + + + + Item 4 + + + + + + Item 5 + + + + +
+ + + + + + diff --git a/static/usage/v8/reorder/wrapper/index.md b/static/usage/v8/reorder/wrapper/index.md new file mode 100644 index 00000000000..f1cababef1d --- /dev/null +++ b/static/usage/v8/reorder/wrapper/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/reorder/wrapper/javascript.md b/static/usage/v8/reorder/wrapper/javascript.md new file mode 100644 index 00000000000..e4e024ee2d4 --- /dev/null +++ b/static/usage/v8/reorder/wrapper/javascript.md @@ -0,0 +1,51 @@ +```html + + + + + + Item 1 + + + + + + Item 2 + + + + + + Item 3 + + + + + + Item 4 + + + + + + Item 5 + + + + + + +``` diff --git a/static/usage/v8/reorder/wrapper/react.md b/static/usage/v8/reorder/wrapper/react.md new file mode 100644 index 00000000000..f70ba499316 --- /dev/null +++ b/static/usage/v8/reorder/wrapper/react.md @@ -0,0 +1,55 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react'; + +function Example() { + function handleReorder(event: CustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group + event.detail.complete(); + } + + return ( + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + + + Item 1 + + + + + + Item 2 + + + + + + Item 3 + + + + + + Item 4 + + + + + + Item 5 + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/reorder/wrapper/vue.md b/static/usage/v8/reorder/wrapper/vue.md new file mode 100644 index 00000000000..fd157186093 --- /dev/null +++ b/static/usage/v8/reorder/wrapper/vue.md @@ -0,0 +1,61 @@ +```html + + + +``` diff --git a/static/usage/v8/ripple-effect/basic/angular/example_component_css.md b/static/usage/v8/ripple-effect/basic/angular/example_component_css.md new file mode 100644 index 00000000000..792bc105ff8 --- /dev/null +++ b/static/usage/v8/ripple-effect/basic/angular/example_component_css.md @@ -0,0 +1,43 @@ +```css +.wrapper { + display: flex; + flex-wrap: wrap; + + align-items: center; + justify-content: space-between; + text-align: center; + + height: 300px; + width: 300px; + + margin: 0 auto; +} + +b { + width: 100%; +} + +.ripple-parent { + position: relative; + overflow: hidden; + + border: 1px solid #ddd; +} + +.rectangle { + width: 300px; + height: 150px; +} + +.rounded-rectangle { + width: 185px; + height: 65px; + border-radius: 8px; +} + +.circle { + width: 90px; + height: 90px; + border-radius: 50%; +} +``` diff --git a/static/usage/v8/ripple-effect/basic/angular/example_component_html.md b/static/usage/v8/ripple-effect/basic/angular/example_component_html.md new file mode 100644 index 00000000000..f46a434abac --- /dev/null +++ b/static/usage/v8/ripple-effect/basic/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html +
+ Click on a shape to see the ripple + +
+ +
+ +
+ +
+ +
+ +
+
+``` diff --git a/static/usage/v8/ripple-effect/basic/demo.html b/static/usage/v8/ripple-effect/basic/demo.html new file mode 100644 index 00000000000..10c7bee0573 --- /dev/null +++ b/static/usage/v8/ripple-effect/basic/demo.html @@ -0,0 +1,80 @@ + + + + + + Ripple Effect + + + + + + + + + + + +
+
+ Click on a shape to see the ripple + +
+ +
+ +
+ +
+ +
+ +
+
+
+ + + + diff --git a/static/usage/v8/ripple-effect/basic/index.md b/static/usage/v8/ripple-effect/basic/index.md new file mode 100644 index 00000000000..56050b2e4d0 --- /dev/null +++ b/static/usage/v8/ripple-effect/basic/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/ripple-effect/basic/javascript.md b/static/usage/v8/ripple-effect/basic/javascript.md new file mode 100644 index 00000000000..14b645af763 --- /dev/null +++ b/static/usage/v8/ripple-effect/basic/javascript.md @@ -0,0 +1,61 @@ +```html +
+ Click on a shape to see the ripple + +
+ +
+ +
+ +
+ +
+ +
+
+ + +``` diff --git a/static/usage/v8/ripple-effect/basic/react/main_css.md b/static/usage/v8/ripple-effect/basic/react/main_css.md new file mode 100644 index 00000000000..792bc105ff8 --- /dev/null +++ b/static/usage/v8/ripple-effect/basic/react/main_css.md @@ -0,0 +1,43 @@ +```css +.wrapper { + display: flex; + flex-wrap: wrap; + + align-items: center; + justify-content: space-between; + text-align: center; + + height: 300px; + width: 300px; + + margin: 0 auto; +} + +b { + width: 100%; +} + +.ripple-parent { + position: relative; + overflow: hidden; + + border: 1px solid #ddd; +} + +.rectangle { + width: 300px; + height: 150px; +} + +.rounded-rectangle { + width: 185px; + height: 65px; + border-radius: 8px; +} + +.circle { + width: 90px; + height: 90px; + border-radius: 50%; +} +``` diff --git a/static/usage/v8/ripple-effect/basic/react/main_tsx.md b/static/usage/v8/ripple-effect/basic/react/main_tsx.md new file mode 100644 index 00000000000..18bfb66c6d8 --- /dev/null +++ b/static/usage/v8/ripple-effect/basic/react/main_tsx.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonRippleEffect } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( +
+ Click on a shape to see the ripple + +
+ +
+ +
+ +
+ +
+ +
+
+ ); +} +export default Example; +``` diff --git a/static/usage/v8/ripple-effect/basic/vue.md b/static/usage/v8/ripple-effect/basic/vue.md new file mode 100644 index 00000000000..e5270056c0c --- /dev/null +++ b/static/usage/v8/ripple-effect/basic/vue.md @@ -0,0 +1,72 @@ +```html + + + + + +``` diff --git a/static/usage/v8/ripple-effect/customizing/angular/example_component_css.md b/static/usage/v8/ripple-effect/customizing/angular/example_component_css.md new file mode 100644 index 00000000000..521a109d099 --- /dev/null +++ b/static/usage/v8/ripple-effect/customizing/angular/example_component_css.md @@ -0,0 +1,44 @@ +```css +.wrapper { + display: flex; + flex-wrap: wrap; + + align-items: center; + justify-content: space-between; + text-align: center; + + height: 170px; + width: 400px; + + margin: 0 auto; +} + +b { + width: 100%; +} + +.ripple-parent { + display: flex; + align-items: center; + justify-content: center; + + position: relative; + overflow: hidden; + + border: 1px solid #ddd; + + user-select: none; + + width: 100%; + height: 50px; + border-radius: 8px; +} + +.custom-parent { + color: #de1e7e; +} + +.custom-ripple { + color: #501ace; +} +``` diff --git a/static/usage/v8/ripple-effect/customizing/angular/example_component_html.md b/static/usage/v8/ripple-effect/customizing/angular/example_component_html.md new file mode 100644 index 00000000000..0fa38298eb5 --- /dev/null +++ b/static/usage/v8/ripple-effect/customizing/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html +
+ Click on a shape to see the ripple + +
+ Custom Parent Color + +
+ +
+ Custom Ripple Color + +
+
+``` diff --git a/static/usage/v8/ripple-effect/customizing/demo.html b/static/usage/v8/ripple-effect/customizing/demo.html new file mode 100644 index 00000000000..0f354320888 --- /dev/null +++ b/static/usage/v8/ripple-effect/customizing/demo.html @@ -0,0 +1,79 @@ + + + + + + Ripple Effect + + + + + + + + + + + +
+
+ Click on a shape to see the ripple + +
+ Custom Parent Color + +
+ +
+ Custom Ripple Color + +
+
+
+ + + + diff --git a/static/usage/v8/ripple-effect/customizing/index.md b/static/usage/v8/ripple-effect/customizing/index.md new file mode 100644 index 00000000000..3f77c9fb519 --- /dev/null +++ b/static/usage/v8/ripple-effect/customizing/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/ripple-effect/customizing/javascript.md b/static/usage/v8/ripple-effect/customizing/javascript.md new file mode 100644 index 00000000000..89f56b0d968 --- /dev/null +++ b/static/usage/v8/ripple-effect/customizing/javascript.md @@ -0,0 +1,60 @@ +```html +
+ Click on a shape to see the ripple + +
+ Custom Parent Color + +
+ +
+ Custom Ripple Color + +
+
+ + +``` diff --git a/static/usage/v8/ripple-effect/customizing/react/main_css.md b/static/usage/v8/ripple-effect/customizing/react/main_css.md new file mode 100644 index 00000000000..521a109d099 --- /dev/null +++ b/static/usage/v8/ripple-effect/customizing/react/main_css.md @@ -0,0 +1,44 @@ +```css +.wrapper { + display: flex; + flex-wrap: wrap; + + align-items: center; + justify-content: space-between; + text-align: center; + + height: 170px; + width: 400px; + + margin: 0 auto; +} + +b { + width: 100%; +} + +.ripple-parent { + display: flex; + align-items: center; + justify-content: center; + + position: relative; + overflow: hidden; + + border: 1px solid #ddd; + + user-select: none; + + width: 100%; + height: 50px; + border-radius: 8px; +} + +.custom-parent { + color: #de1e7e; +} + +.custom-ripple { + color: #501ace; +} +``` diff --git a/static/usage/v8/ripple-effect/customizing/react/main_tsx.md b/static/usage/v8/ripple-effect/customizing/react/main_tsx.md new file mode 100644 index 00000000000..76f36a67843 --- /dev/null +++ b/static/usage/v8/ripple-effect/customizing/react/main_tsx.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonRippleEffect } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( +
+ Click on a shape to see the ripple + +
+ Custom Parent Color + +
+ +
+ Custom Ripple Color + +
+
+ ); +} +export default Example; +``` diff --git a/static/usage/v8/ripple-effect/customizing/vue.md b/static/usage/v8/ripple-effect/customizing/vue.md new file mode 100644 index 00000000000..d3ea639b68a --- /dev/null +++ b/static/usage/v8/ripple-effect/customizing/vue.md @@ -0,0 +1,71 @@ +```html + + + + + +``` diff --git a/static/usage/v8/ripple-effect/type/angular/example_component_css.md b/static/usage/v8/ripple-effect/type/angular/example_component_css.md new file mode 100644 index 00000000000..e76413cf0ff --- /dev/null +++ b/static/usage/v8/ripple-effect/type/angular/example_component_css.md @@ -0,0 +1,44 @@ +```css +.wrapper { + display: flex; + flex-wrap: wrap; + + align-items: center; + justify-content: space-between; + text-align: center; + + height: 170px; + width: 400px; + + margin: 0 auto; +} + +b { + width: 100%; +} + +.ripple-parent { + display: flex; + align-items: center; + justify-content: center; + + position: relative; + overflow: hidden; + + border: 1px solid #ddd; + + user-select: none; +} + +.rounded-rectangle { + width: 250px; + height: 75px; + border-radius: 8px; +} + +.circle { + width: 120px; + height: 120px; + border-radius: 50%; +} +``` diff --git a/static/usage/v8/ripple-effect/type/angular/example_component_html.md b/static/usage/v8/ripple-effect/type/angular/example_component_html.md new file mode 100644 index 00000000000..0e764c2e79a --- /dev/null +++ b/static/usage/v8/ripple-effect/type/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html +
+ Click on a shape to see the ripple + +
+ Bounded + +
+ +
+ Unbounded + +
+
+``` diff --git a/static/usage/v8/ripple-effect/type/demo.html b/static/usage/v8/ripple-effect/type/demo.html new file mode 100644 index 00000000000..1b78cb5b1cf --- /dev/null +++ b/static/usage/v8/ripple-effect/type/demo.html @@ -0,0 +1,79 @@ + + + + + + Ripple Effect + + + + + + + + + + + +
+
+ Click on a shape to see the ripple + +
+ Bounded + +
+ +
+ Unbounded + +
+
+
+ + + + diff --git a/static/usage/v8/ripple-effect/type/index.md b/static/usage/v8/ripple-effect/type/index.md new file mode 100644 index 00000000000..db81e917556 --- /dev/null +++ b/static/usage/v8/ripple-effect/type/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/ripple-effect/type/javascript.md b/static/usage/v8/ripple-effect/type/javascript.md new file mode 100644 index 00000000000..331612579e2 --- /dev/null +++ b/static/usage/v8/ripple-effect/type/javascript.md @@ -0,0 +1,60 @@ +```html +
+ Click on a shape to see the ripple + +
+ Bounded + +
+ +
+ Unbounded + +
+
+ + +``` diff --git a/static/usage/v8/ripple-effect/type/react/main_css.md b/static/usage/v8/ripple-effect/type/react/main_css.md new file mode 100644 index 00000000000..e76413cf0ff --- /dev/null +++ b/static/usage/v8/ripple-effect/type/react/main_css.md @@ -0,0 +1,44 @@ +```css +.wrapper { + display: flex; + flex-wrap: wrap; + + align-items: center; + justify-content: space-between; + text-align: center; + + height: 170px; + width: 400px; + + margin: 0 auto; +} + +b { + width: 100%; +} + +.ripple-parent { + display: flex; + align-items: center; + justify-content: center; + + position: relative; + overflow: hidden; + + border: 1px solid #ddd; + + user-select: none; +} + +.rounded-rectangle { + width: 250px; + height: 75px; + border-radius: 8px; +} + +.circle { + width: 120px; + height: 120px; + border-radius: 50%; +} +``` diff --git a/static/usage/v8/ripple-effect/type/react/main_tsx.md b/static/usage/v8/ripple-effect/type/react/main_tsx.md new file mode 100644 index 00000000000..ce7a1c6364c --- /dev/null +++ b/static/usage/v8/ripple-effect/type/react/main_tsx.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonRippleEffect } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( +
+ Click on a shape to see the ripple + +
+ Bounded + +
+ +
+ Unbounded + +
+
+ ); +} +export default Example; +``` diff --git a/static/usage/v8/ripple-effect/type/vue.md b/static/usage/v8/ripple-effect/type/vue.md new file mode 100644 index 00000000000..e233fe60d9e --- /dev/null +++ b/static/usage/v8/ripple-effect/type/vue.md @@ -0,0 +1,71 @@ +```html + + + + + +``` diff --git a/static/usage/v8/router/basic/demo.html b/static/usage/v8/router/basic/demo.html new file mode 100644 index 00000000000..cc711a9a00b --- /dev/null +++ b/static/usage/v8/router/basic/demo.html @@ -0,0 +1,62 @@ + + + + + + Router + + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v8/router/basic/index.md b/static/usage/v8/router/basic/index.md new file mode 100644 index 00000000000..d02afbe2a35 --- /dev/null +++ b/static/usage/v8/router/basic/index.md @@ -0,0 +1,11 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + + diff --git a/static/usage/v8/router/basic/javascript.md b/static/usage/v8/router/basic/javascript.md new file mode 100644 index 00000000000..5de50702768 --- /dev/null +++ b/static/usage/v8/router/basic/javascript.md @@ -0,0 +1,47 @@ +```html + + + + + + + + +``` diff --git a/static/usage/v8/searchbar/basic/angular.md b/static/usage/v8/searchbar/basic/angular.md new file mode 100644 index 00000000000..610e6556428 --- /dev/null +++ b/static/usage/v8/searchbar/basic/angular.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v8/searchbar/basic/demo.html b/static/usage/v8/searchbar/basic/demo.html new file mode 100644 index 00000000000..f9be71ae4ab --- /dev/null +++ b/static/usage/v8/searchbar/basic/demo.html @@ -0,0 +1,32 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v8/searchbar/basic/index.md b/static/usage/v8/searchbar/basic/index.md new file mode 100644 index 00000000000..163e4ff689a --- /dev/null +++ b/static/usage/v8/searchbar/basic/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/searchbar/basic/javascript.md b/static/usage/v8/searchbar/basic/javascript.md new file mode 100644 index 00000000000..610e6556428 --- /dev/null +++ b/static/usage/v8/searchbar/basic/javascript.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v8/searchbar/basic/react.md b/static/usage/v8/searchbar/basic/react.md new file mode 100644 index 00000000000..b0a3d625855 --- /dev/null +++ b/static/usage/v8/searchbar/basic/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonSearchbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/searchbar/basic/vue.md b/static/usage/v8/searchbar/basic/vue.md new file mode 100644 index 00000000000..f50a9cb5a5f --- /dev/null +++ b/static/usage/v8/searchbar/basic/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v8/searchbar/cancel-button/angular.md b/static/usage/v8/searchbar/cancel-button/angular.md new file mode 100644 index 00000000000..1843708f78b --- /dev/null +++ b/static/usage/v8/searchbar/cancel-button/angular.md @@ -0,0 +1,11 @@ +```html + + + + +``` diff --git a/static/usage/v8/searchbar/cancel-button/demo.html b/static/usage/v8/searchbar/cancel-button/demo.html new file mode 100644 index 00000000000..91ab9577d59 --- /dev/null +++ b/static/usage/v8/searchbar/cancel-button/demo.html @@ -0,0 +1,36 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v8/searchbar/cancel-button/index.md b/static/usage/v8/searchbar/cancel-button/index.md new file mode 100644 index 00000000000..c1f4e1977cc --- /dev/null +++ b/static/usage/v8/searchbar/cancel-button/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/searchbar/cancel-button/javascript.md b/static/usage/v8/searchbar/cancel-button/javascript.md new file mode 100644 index 00000000000..1843708f78b --- /dev/null +++ b/static/usage/v8/searchbar/cancel-button/javascript.md @@ -0,0 +1,11 @@ +```html + + + + +``` diff --git a/static/usage/v8/searchbar/cancel-button/react.md b/static/usage/v8/searchbar/cancel-button/react.md new file mode 100644 index 00000000000..39f4be10fe5 --- /dev/null +++ b/static/usage/v8/searchbar/cancel-button/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonSearchbar } from '@ionic/react'; +import { trash } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/searchbar/cancel-button/vue.md b/static/usage/v8/searchbar/cancel-button/vue.md new file mode 100644 index 00000000000..d3f85859011 --- /dev/null +++ b/static/usage/v8/searchbar/cancel-button/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v8/searchbar/clear-button/angular.md b/static/usage/v8/searchbar/clear-button/angular.md new file mode 100644 index 00000000000..fa10e4b90d9 --- /dev/null +++ b/static/usage/v8/searchbar/clear-button/angular.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v8/searchbar/clear-button/demo.html b/static/usage/v8/searchbar/clear-button/demo.html new file mode 100644 index 00000000000..bc7bc4706f5 --- /dev/null +++ b/static/usage/v8/searchbar/clear-button/demo.html @@ -0,0 +1,31 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v8/searchbar/clear-button/index.md b/static/usage/v8/searchbar/clear-button/index.md new file mode 100644 index 00000000000..1d5212a124c --- /dev/null +++ b/static/usage/v8/searchbar/clear-button/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/searchbar/clear-button/javascript.md b/static/usage/v8/searchbar/clear-button/javascript.md new file mode 100644 index 00000000000..fa10e4b90d9 --- /dev/null +++ b/static/usage/v8/searchbar/clear-button/javascript.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v8/searchbar/clear-button/react.md b/static/usage/v8/searchbar/clear-button/react.md new file mode 100644 index 00000000000..9f21f1a1d84 --- /dev/null +++ b/static/usage/v8/searchbar/clear-button/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonSearchbar } from '@ionic/react'; +import { trashBin } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/searchbar/clear-button/vue.md b/static/usage/v8/searchbar/clear-button/vue.md new file mode 100644 index 00000000000..3b5a9e53c7f --- /dev/null +++ b/static/usage/v8/searchbar/clear-button/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v8/searchbar/debounce/angular/example_component_html.md b/static/usage/v8/searchbar/debounce/angular/example_component_html.md new file mode 100644 index 00000000000..4e69a179142 --- /dev/null +++ b/static/usage/v8/searchbar/debounce/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + + + + {{ result }} + + +``` diff --git a/static/usage/v8/searchbar/debounce/angular/example_component_ts.md b/static/usage/v8/searchbar/debounce/angular/example_component_ts.md new file mode 100644 index 00000000000..9a88f1c135b --- /dev/null +++ b/static/usage/v8/searchbar/debounce/angular/example_component_ts.md @@ -0,0 +1,28 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + public data = [ + 'Amsterdam', + 'Buenos Aires', + 'Cairo', + 'Geneva', + 'Hong Kong', + 'Istanbul', + 'London', + 'Madrid', + 'New York', + 'Panama City', + ]; + public results = [...this.data]; + + handleInput(event) { + const query = event.target.value.toLowerCase(); + this.results = this.data.filter((d) => d.toLowerCase().indexOf(query) > -1); + } +} +``` diff --git a/static/usage/v8/searchbar/debounce/demo.html b/static/usage/v8/searchbar/debounce/demo.html new file mode 100644 index 00000000000..1545db90a55 --- /dev/null +++ b/static/usage/v8/searchbar/debounce/demo.html @@ -0,0 +1,73 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ + +
+ + + + + + diff --git a/static/usage/v8/searchbar/debounce/index.md b/static/usage/v8/searchbar/debounce/index.md new file mode 100644 index 00000000000..505f89c9234 --- /dev/null +++ b/static/usage/v8/searchbar/debounce/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/searchbar/debounce/javascript.md b/static/usage/v8/searchbar/debounce/javascript.md new file mode 100644 index 00000000000..9d7e54ef92d --- /dev/null +++ b/static/usage/v8/searchbar/debounce/javascript.md @@ -0,0 +1,48 @@ +```html + + + + +``` diff --git a/static/usage/v8/searchbar/debounce/react.md b/static/usage/v8/searchbar/debounce/react.md new file mode 100644 index 00000000000..0aece7108d6 --- /dev/null +++ b/static/usage/v8/searchbar/debounce/react.md @@ -0,0 +1,41 @@ +```tsx +import React, { useState } from 'react'; +import { IonItem, IonList, IonSearchbar } from '@ionic/react'; + +function Example() { + const data = [ + 'Amsterdam', + 'Buenos Aires', + 'Cairo', + 'Geneva', + 'Hong Kong', + 'Istanbul', + 'London', + 'Madrid', + 'New York', + 'Panama City', + ]; + let [results, setResults] = useState([...data]); + + const handleInput = (ev: Event) => { + let query = ''; + const target = ev.target as HTMLIonSearchbarElement; + if (target) query = target.value!.toLowerCase(); + + setResults(data.filter((d) => d.toLowerCase().indexOf(query) > -1)); + }; + + return ( + <> + handleInput(ev)}> + + + {results.map((result) => ( + {result} + ))} + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/searchbar/debounce/vue.md b/static/usage/v8/searchbar/debounce/vue.md new file mode 100644 index 00000000000..836f226ceb7 --- /dev/null +++ b/static/usage/v8/searchbar/debounce/vue.md @@ -0,0 +1,43 @@ +```html + + + +``` diff --git a/static/usage/v8/searchbar/search-icon/angular.md b/static/usage/v8/searchbar/search-icon/angular.md new file mode 100644 index 00000000000..2a66008d0cc --- /dev/null +++ b/static/usage/v8/searchbar/search-icon/angular.md @@ -0,0 +1,4 @@ +```html + + +``` diff --git a/static/usage/v8/searchbar/search-icon/demo.html b/static/usage/v8/searchbar/search-icon/demo.html new file mode 100644 index 00000000000..89d49c7fc8a --- /dev/null +++ b/static/usage/v8/searchbar/search-icon/demo.html @@ -0,0 +1,29 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v8/searchbar/search-icon/index.md b/static/usage/v8/searchbar/search-icon/index.md new file mode 100644 index 00000000000..951485a0809 --- /dev/null +++ b/static/usage/v8/searchbar/search-icon/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/searchbar/search-icon/javascript.md b/static/usage/v8/searchbar/search-icon/javascript.md new file mode 100644 index 00000000000..2a66008d0cc --- /dev/null +++ b/static/usage/v8/searchbar/search-icon/javascript.md @@ -0,0 +1,4 @@ +```html + + +``` diff --git a/static/usage/v8/searchbar/search-icon/react.md b/static/usage/v8/searchbar/search-icon/react.md new file mode 100644 index 00000000000..4bb596d1e00 --- /dev/null +++ b/static/usage/v8/searchbar/search-icon/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonSearchbar } from '@ionic/react'; +import { searchCircle } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/searchbar/search-icon/vue.md b/static/usage/v8/searchbar/search-icon/vue.md new file mode 100644 index 00000000000..38068deedcc --- /dev/null +++ b/static/usage/v8/searchbar/search-icon/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/searchbar/theming/colors/angular.md b/static/usage/v8/searchbar/theming/colors/angular.md new file mode 100644 index 00000000000..b0f0f2e533f --- /dev/null +++ b/static/usage/v8/searchbar/theming/colors/angular.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v8/searchbar/theming/colors/demo.html b/static/usage/v8/searchbar/theming/colors/demo.html new file mode 100644 index 00000000000..10a42a3c247 --- /dev/null +++ b/static/usage/v8/searchbar/theming/colors/demo.html @@ -0,0 +1,37 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/searchbar/theming/colors/index.md b/static/usage/v8/searchbar/theming/colors/index.md new file mode 100644 index 00000000000..670a3db2034 --- /dev/null +++ b/static/usage/v8/searchbar/theming/colors/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/searchbar/theming/colors/javascript.md b/static/usage/v8/searchbar/theming/colors/javascript.md new file mode 100644 index 00000000000..b0f0f2e533f --- /dev/null +++ b/static/usage/v8/searchbar/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v8/searchbar/theming/colors/react.md b/static/usage/v8/searchbar/theming/colors/react.md new file mode 100644 index 00000000000..d1c29b9cd28 --- /dev/null +++ b/static/usage/v8/searchbar/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonSearchbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/searchbar/theming/colors/vue.md b/static/usage/v8/searchbar/theming/colors/vue.md new file mode 100644 index 00000000000..ef95e690107 --- /dev/null +++ b/static/usage/v8/searchbar/theming/colors/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v8/searchbar/theming/css-properties/angular/example_component_css.md b/static/usage/v8/searchbar/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..22aa0428b89 --- /dev/null +++ b/static/usage/v8/searchbar/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,20 @@ +```css +/* Scoped components require higher specificity to customize */ +ion-searchbar.custom { + --background: #19422d; + --color: #fff; + --placeholder-color: #fff; + --icon-color: #fff; + --clear-button-color: #fff; + + --border-radius: 4px; +} + +ion-searchbar.ios.custom { + --cancel-button-color: #19422d; +} + +ion-searchbar.md.custom { + --cancel-button-color: #fff; +} +``` diff --git a/static/usage/v8/searchbar/theming/css-properties/angular/example_component_html.md b/static/usage/v8/searchbar/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..080217dcc41 --- /dev/null +++ b/static/usage/v8/searchbar/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/searchbar/theming/css-properties/demo.html b/static/usage/v8/searchbar/theming/css-properties/demo.html new file mode 100644 index 00000000000..047131f13b1 --- /dev/null +++ b/static/usage/v8/searchbar/theming/css-properties/demo.html @@ -0,0 +1,46 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/searchbar/theming/css-properties/index.md b/static/usage/v8/searchbar/theming/css-properties/index.md new file mode 100644 index 00000000000..65e3fca5306 --- /dev/null +++ b/static/usage/v8/searchbar/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/searchbar/theming/css-properties/javascript.md b/static/usage/v8/searchbar/theming/css-properties/javascript.md new file mode 100644 index 00000000000..7ea20182e77 --- /dev/null +++ b/static/usage/v8/searchbar/theming/css-properties/javascript.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v8/searchbar/theming/css-properties/react/main_css.md b/static/usage/v8/searchbar/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..22aa0428b89 --- /dev/null +++ b/static/usage/v8/searchbar/theming/css-properties/react/main_css.md @@ -0,0 +1,20 @@ +```css +/* Scoped components require higher specificity to customize */ +ion-searchbar.custom { + --background: #19422d; + --color: #fff; + --placeholder-color: #fff; + --icon-color: #fff; + --clear-button-color: #fff; + + --border-radius: 4px; +} + +ion-searchbar.ios.custom { + --cancel-button-color: #19422d; +} + +ion-searchbar.md.custom { + --cancel-button-color: #fff; +} +``` diff --git a/static/usage/v8/searchbar/theming/css-properties/react/main_tsx.md b/static/usage/v8/searchbar/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..62d396e75aa --- /dev/null +++ b/static/usage/v8/searchbar/theming/css-properties/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonSearchbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/searchbar/theming/css-properties/vue.md b/static/usage/v8/searchbar/theming/css-properties/vue.md new file mode 100644 index 00000000000..6e45e744231 --- /dev/null +++ b/static/usage/v8/searchbar/theming/css-properties/vue.md @@ -0,0 +1,35 @@ +```html + + + + + +``` diff --git a/static/usage/v8/segment-button/basic/angular.md b/static/usage/v8/segment-button/basic/angular.md new file mode 100644 index 00000000000..6f3fc0bb9ab --- /dev/null +++ b/static/usage/v8/segment-button/basic/angular.md @@ -0,0 +1,25 @@ +```html + + + Default + + + Segment + + + Button + + + + + + Disabled + + + Segment + + + Button + + +``` diff --git a/static/usage/v8/segment-button/basic/demo.html b/static/usage/v8/segment-button/basic/demo.html new file mode 100644 index 00000000000..590c295f480 --- /dev/null +++ b/static/usage/v8/segment-button/basic/demo.html @@ -0,0 +1,54 @@ + + + + + + Segment Button + + + + + + + + + + + +
+ + + Default + + + Segment + + + Button + + + + + + Disabled + + + Segment + + + Button + + +
+ + + + diff --git a/static/usage/v8/segment-button/basic/index.md b/static/usage/v8/segment-button/basic/index.md new file mode 100644 index 00000000000..ec9dd3aaaee --- /dev/null +++ b/static/usage/v8/segment-button/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/segment-button/basic/javascript.md b/static/usage/v8/segment-button/basic/javascript.md new file mode 100644 index 00000000000..d001e59d7fc --- /dev/null +++ b/static/usage/v8/segment-button/basic/javascript.md @@ -0,0 +1,25 @@ +```html + + + Default + + + Segment + + + Button + + + + + + Disabled + + + Segment + + + Button + + +``` diff --git a/static/usage/v8/segment-button/basic/react.md b/static/usage/v8/segment-button/basic/react.md new file mode 100644 index 00000000000..241242412bf --- /dev/null +++ b/static/usage/v8/segment-button/basic/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; + +function Example() { + return ( + <> + + + Default + + + Segment + + + Button + + + + + + Disabled + + + Segment + + + Button + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/segment-button/basic/vue.md b/static/usage/v8/segment-button/basic/vue.md new file mode 100644 index 00000000000..79fd032d7ca --- /dev/null +++ b/static/usage/v8/segment-button/basic/vue.md @@ -0,0 +1,36 @@ +```html + + + +``` diff --git a/static/usage/v8/segment-button/layout/angular.md b/static/usage/v8/segment-button/layout/angular.md new file mode 100644 index 00000000000..3f634915d9b --- /dev/null +++ b/static/usage/v8/segment-button/layout/angular.md @@ -0,0 +1,73 @@ +```html + + + + + + + + + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + +``` diff --git a/static/usage/v8/segment-button/layout/demo.html b/static/usage/v8/segment-button/layout/demo.html new file mode 100644 index 00000000000..2a6d756cd74 --- /dev/null +++ b/static/usage/v8/segment-button/layout/demo.html @@ -0,0 +1,102 @@ + + + + + + Segment Button + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + +
+ + + + diff --git a/static/usage/v8/segment-button/layout/index.md b/static/usage/v8/segment-button/layout/index.md new file mode 100644 index 00000000000..942a15797b6 --- /dev/null +++ b/static/usage/v8/segment-button/layout/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/segment-button/layout/javascript.md b/static/usage/v8/segment-button/layout/javascript.md new file mode 100644 index 00000000000..3f634915d9b --- /dev/null +++ b/static/usage/v8/segment-button/layout/javascript.md @@ -0,0 +1,73 @@ +```html + + + + + + + + + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + +``` diff --git a/static/usage/v8/segment-button/layout/react.md b/static/usage/v8/segment-button/layout/react.md new file mode 100644 index 00000000000..9b6c44ac073 --- /dev/null +++ b/static/usage/v8/segment-button/layout/react.md @@ -0,0 +1,84 @@ +```tsx +import React from 'react'; +import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; +import { call, heart, pin } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + + + + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/segment-button/layout/vue.md b/static/usage/v8/segment-button/layout/vue.md new file mode 100644 index 00000000000..71a039bd211 --- /dev/null +++ b/static/usage/v8/segment-button/layout/vue.md @@ -0,0 +1,88 @@ +```html + + + +``` diff --git a/static/usage/v8/segment-button/theming/css-properties/angular/example_component_css.md b/static/usage/v8/segment-button/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..a4e8f04f2b0 --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,19 @@ +```css +ion-segment-button { + --indicator-color: #08a391; +} + +/* Material Design styles */ +ion-segment-button.md { + --color: #000; + --color-checked: #08a391; + --indicator-height: 4px; +} + +/* iOS styles */ +ion-segment-button.ios { + --color: #08a391; + --color-checked: #fff; + --border-radius: 20px; +} +``` diff --git a/static/usage/v8/segment-button/theming/css-properties/angular/example_component_html.md b/static/usage/v8/segment-button/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..4ab86c2cdda --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html + + + Custom + + + Segment + + + Buttons + + +``` diff --git a/static/usage/v8/segment-button/theming/css-properties/demo.html b/static/usage/v8/segment-button/theming/css-properties/demo.html new file mode 100644 index 00000000000..e9da296fd9d --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-properties/demo.html @@ -0,0 +1,57 @@ + + + + + + Segment Button + + + + + + + + + + + +
+ + + Custom + + + Segment + + + Buttons + + +
+ + + + diff --git a/static/usage/v8/segment-button/theming/css-properties/index.md b/static/usage/v8/segment-button/theming/css-properties/index.md new file mode 100644 index 00000000000..66e2e50f583 --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/segment-button/theming/css-properties/javascript.md b/static/usage/v8/segment-button/theming/css-properties/javascript.md new file mode 100644 index 00000000000..f8ebaae2f19 --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-properties/javascript.md @@ -0,0 +1,33 @@ +```html + + + + + Custom + + + Segment + + + Buttons + + +``` diff --git a/static/usage/v8/segment-button/theming/css-properties/react/main_css.md b/static/usage/v8/segment-button/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..a4e8f04f2b0 --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-properties/react/main_css.md @@ -0,0 +1,19 @@ +```css +ion-segment-button { + --indicator-color: #08a391; +} + +/* Material Design styles */ +ion-segment-button.md { + --color: #000; + --color-checked: #08a391; + --indicator-height: 4px; +} + +/* iOS styles */ +ion-segment-button.ios { + --color: #08a391; + --color-checked: #fff; + --border-radius: 20px; +} +``` diff --git a/static/usage/v8/segment-button/theming/css-properties/react/main_tsx.md b/static/usage/v8/segment-button/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..2459d01206b --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-properties/react/main_tsx.md @@ -0,0 +1,23 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + Custom + + + Segment + + + Buttons + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/segment-button/theming/css-properties/vue.md b/static/usage/v8/segment-button/theming/css-properties/vue.md new file mode 100644 index 00000000000..50c99688335 --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-properties/vue.md @@ -0,0 +1,44 @@ +```html + + + + + +``` diff --git a/static/usage/v8/segment-button/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v8/segment-button/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..fde253b69f9 --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,31 @@ +```css +ion-segment-button::part(indicator-background) { + background: #08a391; +} + +/* Material Design styles */ +ion-segment-button.md::part(native) { + color: #000; +} + +.segment-button-checked.md::part(native) { + color: #08a391; +} + +ion-segment-button.md::part(indicator-background) { + height: 4px; +} + +/* iOS styles */ +ion-segment-button.ios::part(native) { + color: #08a391; +} + +.segment-button-checked.ios::part(native) { + color: #fff; +} + +ion-segment-button.ios::part(indicator-background) { + border-radius: 20px; +} +``` diff --git a/static/usage/v8/segment-button/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v8/segment-button/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..4ab86c2cdda --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html + + + Custom + + + Segment + + + Buttons + + +``` diff --git a/static/usage/v8/segment-button/theming/css-shadow-parts/demo.html b/static/usage/v8/segment-button/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..995a3b7e54d --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-shadow-parts/demo.html @@ -0,0 +1,69 @@ + + + + + + Segment Button + + + + + + + + + + + +
+ + + Custom + + + Segment + + + Buttons + + +
+ + + + diff --git a/static/usage/v8/segment-button/theming/css-shadow-parts/index.md b/static/usage/v8/segment-button/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..9fe4b9f5e01 --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-shadow-parts/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/segment-button/theming/css-shadow-parts/javascript.md b/static/usage/v8/segment-button/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..102ba6ccd19 --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-shadow-parts/javascript.md @@ -0,0 +1,45 @@ +```html + + + + + Custom + + + Segment + + + Buttons + + +``` diff --git a/static/usage/v8/segment-button/theming/css-shadow-parts/react/main_css.md b/static/usage/v8/segment-button/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..fde253b69f9 --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,31 @@ +```css +ion-segment-button::part(indicator-background) { + background: #08a391; +} + +/* Material Design styles */ +ion-segment-button.md::part(native) { + color: #000; +} + +.segment-button-checked.md::part(native) { + color: #08a391; +} + +ion-segment-button.md::part(indicator-background) { + height: 4px; +} + +/* iOS styles */ +ion-segment-button.ios::part(native) { + color: #08a391; +} + +.segment-button-checked.ios::part(native) { + color: #fff; +} + +ion-segment-button.ios::part(indicator-background) { + border-radius: 20px; +} +``` diff --git a/static/usage/v8/segment-button/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v8/segment-button/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..2459d01206b --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,23 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + Custom + + + Segment + + + Buttons + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/segment-button/theming/css-shadow-parts/vue.md b/static/usage/v8/segment-button/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..911d8b7854e --- /dev/null +++ b/static/usage/v8/segment-button/theming/css-shadow-parts/vue.md @@ -0,0 +1,56 @@ +```html + + + + + +``` diff --git a/static/usage/v8/segment/basic/angular.md b/static/usage/v8/segment/basic/angular.md new file mode 100644 index 00000000000..c497151f125 --- /dev/null +++ b/static/usage/v8/segment/basic/angular.md @@ -0,0 +1,19 @@ +```html + + + Default + + + Segment + + + + + + Disabled + + + Segment + + +``` diff --git a/static/usage/v8/segment/basic/demo.html b/static/usage/v8/segment/basic/demo.html new file mode 100644 index 00000000000..31ab1945bee --- /dev/null +++ b/static/usage/v8/segment/basic/demo.html @@ -0,0 +1,48 @@ + + + + + + Segment + + + + + + + + + + + +
+ + + Default + + + Segment + + + + + + Disabled + + + Segment + + +
+ + + + diff --git a/static/usage/v8/segment/basic/index.md b/static/usage/v8/segment/basic/index.md new file mode 100644 index 00000000000..3b98e622e39 --- /dev/null +++ b/static/usage/v8/segment/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/segment/basic/javascript.md b/static/usage/v8/segment/basic/javascript.md new file mode 100644 index 00000000000..91d67d8dca7 --- /dev/null +++ b/static/usage/v8/segment/basic/javascript.md @@ -0,0 +1,19 @@ +```html + + + Default + + + Segment + + + + + + Disabled + + + Segment + + +``` diff --git a/static/usage/v8/segment/basic/react.md b/static/usage/v8/segment/basic/react.md new file mode 100644 index 00000000000..bb5c402112f --- /dev/null +++ b/static/usage/v8/segment/basic/react.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; + +function Example() { + return ( + <> + + + Default + + + Segment + + + + + + Disabled + + + Segment + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/segment/basic/vue.md b/static/usage/v8/segment/basic/vue.md new file mode 100644 index 00000000000..7252ce56f2f --- /dev/null +++ b/static/usage/v8/segment/basic/vue.md @@ -0,0 +1,30 @@ +```html + + + +``` diff --git a/static/usage/v8/segment/scrollable/angular.md b/static/usage/v8/segment/scrollable/angular.md new file mode 100644 index 00000000000..bbcc03848ec --- /dev/null +++ b/static/usage/v8/segment/scrollable/angular.md @@ -0,0 +1,34 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/segment/scrollable/demo.html b/static/usage/v8/segment/scrollable/demo.html new file mode 100644 index 00000000000..4aa5c342d44 --- /dev/null +++ b/static/usage/v8/segment/scrollable/demo.html @@ -0,0 +1,64 @@ + + + + + + Segment + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/segment/scrollable/index.md b/static/usage/v8/segment/scrollable/index.md new file mode 100644 index 00000000000..ca5ac7450cc --- /dev/null +++ b/static/usage/v8/segment/scrollable/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/segment/scrollable/javascript.md b/static/usage/v8/segment/scrollable/javascript.md new file mode 100644 index 00000000000..dfc630d1d46 --- /dev/null +++ b/static/usage/v8/segment/scrollable/javascript.md @@ -0,0 +1,34 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/segment/scrollable/react.md b/static/usage/v8/segment/scrollable/react.md new file mode 100644 index 00000000000..61d304989bb --- /dev/null +++ b/static/usage/v8/segment/scrollable/react.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/react'; +import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/segment/scrollable/vue.md b/static/usage/v8/segment/scrollable/vue.md new file mode 100644 index 00000000000..160fab75489 --- /dev/null +++ b/static/usage/v8/segment/scrollable/vue.md @@ -0,0 +1,60 @@ +```html + + + +``` diff --git a/static/usage/v8/segment/theming/colors/angular.md b/static/usage/v8/segment/theming/colors/angular.md new file mode 100644 index 00000000000..4787acc7ba3 --- /dev/null +++ b/static/usage/v8/segment/theming/colors/angular.md @@ -0,0 +1,82 @@ +```html + + + Default + + + Segment + + + + + Primary + + + Segment + + + + + Secondary + + + Segment + + + + + Tertiary + + + Segment + + + + + Success + + + Segment + + + + + Warning + + + Segment + + + + + Danger + + + Segment + + + + + Light + + + Segment + + + + + Medium + + + Segment + + + + + Dark + + + Segment + + +``` diff --git a/static/usage/v8/segment/theming/colors/demo.html b/static/usage/v8/segment/theming/colors/demo.html new file mode 100644 index 00000000000..6c5b689a592 --- /dev/null +++ b/static/usage/v8/segment/theming/colors/demo.html @@ -0,0 +1,111 @@ + + + + + + Segment + + + + + + + + + + + +
+ + + Default + + + Segment + + + + + Primary + + + Segment + + + + + Secondary + + + Segment + + + + + Tertiary + + + Segment + + + + + Success + + + Segment + + + + + Warning + + + Segment + + + + + Danger + + + Segment + + + + + Light + + + Segment + + + + + Medium + + + Segment + + + + + Dark + + + Segment + + +
+ + + + diff --git a/static/usage/v8/segment/theming/colors/index.md b/static/usage/v8/segment/theming/colors/index.md new file mode 100644 index 00000000000..bdcf06a9deb --- /dev/null +++ b/static/usage/v8/segment/theming/colors/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/segment/theming/colors/javascript.md b/static/usage/v8/segment/theming/colors/javascript.md new file mode 100644 index 00000000000..4787acc7ba3 --- /dev/null +++ b/static/usage/v8/segment/theming/colors/javascript.md @@ -0,0 +1,82 @@ +```html + + + Default + + + Segment + + + + + Primary + + + Segment + + + + + Secondary + + + Segment + + + + + Tertiary + + + Segment + + + + + Success + + + Segment + + + + + Warning + + + Segment + + + + + Danger + + + Segment + + + + + Light + + + Segment + + + + + Medium + + + Segment + + + + + Dark + + + Segment + + +``` diff --git a/static/usage/v8/segment/theming/colors/react.md b/static/usage/v8/segment/theming/colors/react.md new file mode 100644 index 00000000000..81c799bbbec --- /dev/null +++ b/static/usage/v8/segment/theming/colors/react.md @@ -0,0 +1,92 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; + +function Example() { + return ( + <> + + + Default + + + Segment + + + + + Primary + + + Segment + + + + + Secondary + + + Segment + + + + + Tertiary + + + Segment + + + + + Success + + + Segment + + + + + Warning + + + Segment + + + + + Danger + + + Segment + + + + + Light + + + Segment + + + + + Medium + + + Segment + + + + + Dark + + + Segment + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/segment/theming/colors/vue.md b/static/usage/v8/segment/theming/colors/vue.md new file mode 100644 index 00000000000..fcce8cce913 --- /dev/null +++ b/static/usage/v8/segment/theming/colors/vue.md @@ -0,0 +1,93 @@ +```html + + + +``` diff --git a/static/usage/v8/segment/theming/css-properties/angular/example_component_css.md b/static/usage/v8/segment/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..8ecca25270d --- /dev/null +++ b/static/usage/v8/segment/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-segment { + --background: #54dc98; +} +``` diff --git a/static/usage/v8/segment/theming/css-properties/angular/example_component_html.md b/static/usage/v8/segment/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..01aac10305d --- /dev/null +++ b/static/usage/v8/segment/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + + + Custom + + + Segment + + +``` diff --git a/static/usage/v8/segment/theming/css-properties/demo.html b/static/usage/v8/segment/theming/css-properties/demo.html new file mode 100644 index 00000000000..6e591334efc --- /dev/null +++ b/static/usage/v8/segment/theming/css-properties/demo.html @@ -0,0 +1,40 @@ + + + + + + Note + + + + + + + + + + + +
+ + + Custom + + + Segment + + +
+ + + + diff --git a/static/usage/v8/segment/theming/css-properties/index.md b/static/usage/v8/segment/theming/css-properties/index.md new file mode 100644 index 00000000000..da21c55735d --- /dev/null +++ b/static/usage/v8/segment/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/segment/theming/css-properties/javascript.md b/static/usage/v8/segment/theming/css-properties/javascript.md new file mode 100644 index 00000000000..b5ae092adeb --- /dev/null +++ b/static/usage/v8/segment/theming/css-properties/javascript.md @@ -0,0 +1,16 @@ +```html + + + + + Custom + + + Segment + + +``` diff --git a/static/usage/v8/segment/theming/css-properties/react/main_css.md b/static/usage/v8/segment/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..8ecca25270d --- /dev/null +++ b/static/usage/v8/segment/theming/css-properties/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-segment { + --background: #54dc98; +} +``` diff --git a/static/usage/v8/segment/theming/css-properties/react/main_tsx.md b/static/usage/v8/segment/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..a7e9dc7e0f5 --- /dev/null +++ b/static/usage/v8/segment/theming/css-properties/react/main_tsx.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + Custom + + + Segment + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/segment/theming/css-properties/vue.md b/static/usage/v8/segment/theming/css-properties/vue.md new file mode 100644 index 00000000000..00bf2e42c8f --- /dev/null +++ b/static/usage/v8/segment/theming/css-properties/vue.md @@ -0,0 +1,27 @@ +```html + + + + + +``` diff --git a/static/usage/v8/select/basic/multiple-selection/angular.md b/static/usage/v8/select/basic/multiple-selection/angular.md new file mode 100644 index 00000000000..e65d1ace014 --- /dev/null +++ b/static/usage/v8/select/basic/multiple-selection/angular.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/basic/multiple-selection/demo.html b/static/usage/v8/select/basic/multiple-selection/demo.html new file mode 100644 index 00000000000..63c7016f22f --- /dev/null +++ b/static/usage/v8/select/basic/multiple-selection/demo.html @@ -0,0 +1,30 @@ + + + + + + Select - Multiple Selection + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v8/select/basic/multiple-selection/index.md b/static/usage/v8/select/basic/multiple-selection/index.md new file mode 100644 index 00000000000..2523a47bcc6 --- /dev/null +++ b/static/usage/v8/select/basic/multiple-selection/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/select/basic/multiple-selection/javascript.md b/static/usage/v8/select/basic/multiple-selection/javascript.md new file mode 100644 index 00000000000..0150a273be4 --- /dev/null +++ b/static/usage/v8/select/basic/multiple-selection/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/basic/multiple-selection/react.md b/static/usage/v8/select/basic/multiple-selection/react.md new file mode 100644 index 00000000000..4533409e292 --- /dev/null +++ b/static/usage/v8/select/basic/multiple-selection/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/basic/multiple-selection/vue.md b/static/usage/v8/select/basic/multiple-selection/vue.md new file mode 100644 index 00000000000..3287578bddc --- /dev/null +++ b/static/usage/v8/select/basic/multiple-selection/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_html.md b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_html.md new file mode 100644 index 00000000000..eb02be61202 --- /dev/null +++ b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md new file mode 100644 index 00000000000..fb51c040a2f --- /dev/null +++ b/static/usage/v8/select/basic/responding-to-interaction/angular/example_component_ts.md @@ -0,0 +1,21 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + handleChange(e) { + console.log('ionChange fired with value: ' + e.detail.value); + } + + handleCancel() { + console.log('ionCancel fired'); + } + + handleDismiss() { + console.log('ionDismiss fired'); + } +} +``` diff --git a/static/usage/v8/select/basic/responding-to-interaction/demo.html b/static/usage/v8/select/basic/responding-to-interaction/demo.html new file mode 100644 index 00000000000..30e0b1a3e1d --- /dev/null +++ b/static/usage/v8/select/basic/responding-to-interaction/demo.html @@ -0,0 +1,46 @@ + + + + + + Select - Responding to Interaction + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + + + diff --git a/static/usage/v8/select/basic/responding-to-interaction/index.md b/static/usage/v8/select/basic/responding-to-interaction/index.md new file mode 100644 index 00000000000..e17708e1e45 --- /dev/null +++ b/static/usage/v8/select/basic/responding-to-interaction/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/select/basic/responding-to-interaction/javascript.md b/static/usage/v8/select/basic/responding-to-interaction/javascript.md new file mode 100644 index 00000000000..aad9323759a --- /dev/null +++ b/static/usage/v8/select/basic/responding-to-interaction/javascript.md @@ -0,0 +1,27 @@ +```html + + + + Apples + Oranges + Bananas + + + + + +``` diff --git a/static/usage/v8/select/basic/responding-to-interaction/react.md b/static/usage/v8/select/basic/responding-to-interaction/react.md new file mode 100644 index 00000000000..f730bf4c69a --- /dev/null +++ b/static/usage/v8/select/basic/responding-to-interaction/react.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; + +function Example() { + return ( + + + console.log(`ionChange fired with value: ${e.detail.value}`)} + onIonCancel={() => console.log('ionCancel fired')} + onIonDismiss={() => console.log('ionDismiss fired')} + > + Apples + Oranges + Bananas + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/select/basic/responding-to-interaction/vue.md b/static/usage/v8/select/basic/responding-to-interaction/vue.md new file mode 100644 index 00000000000..a12b3238c60 --- /dev/null +++ b/static/usage/v8/select/basic/responding-to-interaction/vue.md @@ -0,0 +1,39 @@ +```html + + + +``` diff --git a/static/usage/v8/select/basic/single-selection/angular.md b/static/usage/v8/select/basic/single-selection/angular.md new file mode 100644 index 00000000000..9c587d71a67 --- /dev/null +++ b/static/usage/v8/select/basic/single-selection/angular.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/basic/single-selection/demo.html b/static/usage/v8/select/basic/single-selection/demo.html new file mode 100644 index 00000000000..f2db0df6c17 --- /dev/null +++ b/static/usage/v8/select/basic/single-selection/demo.html @@ -0,0 +1,30 @@ + + + + + + Select - Single Selection + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v8/select/basic/single-selection/index.md b/static/usage/v8/select/basic/single-selection/index.md new file mode 100644 index 00000000000..1fc60d79fe6 --- /dev/null +++ b/static/usage/v8/select/basic/single-selection/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/select/basic/single-selection/javascript.md b/static/usage/v8/select/basic/single-selection/javascript.md new file mode 100644 index 00000000000..9c587d71a67 --- /dev/null +++ b/static/usage/v8/select/basic/single-selection/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/basic/single-selection/react.md b/static/usage/v8/select/basic/single-selection/react.md new file mode 100644 index 00000000000..d30a1dbe40b --- /dev/null +++ b/static/usage/v8/select/basic/single-selection/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/basic/single-selection/vue.md b/static/usage/v8/select/basic/single-selection/vue.md new file mode 100644 index 00000000000..637b8446a7b --- /dev/null +++ b/static/usage/v8/select/basic/single-selection/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v8/select/customization/button-text/angular.md b/static/usage/v8/select/customization/button-text/angular.md new file mode 100644 index 00000000000..3d1ab2ab3a1 --- /dev/null +++ b/static/usage/v8/select/customization/button-text/angular.md @@ -0,0 +1,23 @@ +```html + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/customization/button-text/demo.html b/static/usage/v8/select/customization/button-text/demo.html new file mode 100644 index 00000000000..ff90458d0a3 --- /dev/null +++ b/static/usage/v8/select/customization/button-text/demo.html @@ -0,0 +1,47 @@ + + + + + + Select - Button Text + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v8/select/customization/button-text/index.md b/static/usage/v8/select/customization/button-text/index.md new file mode 100644 index 00000000000..9e1a07063f8 --- /dev/null +++ b/static/usage/v8/select/customization/button-text/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/select/customization/button-text/javascript.md b/static/usage/v8/select/customization/button-text/javascript.md new file mode 100644 index 00000000000..721ddea5107 --- /dev/null +++ b/static/usage/v8/select/customization/button-text/javascript.md @@ -0,0 +1,23 @@ +```html + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/customization/button-text/react.md b/static/usage/v8/select/customization/button-text/react.md new file mode 100644 index 00000000000..94bf337191c --- /dev/null +++ b/static/usage/v8/select/customization/button-text/react.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/customization/button-text/vue.md b/static/usage/v8/select/customization/button-text/vue.md new file mode 100644 index 00000000000..f5c69c2d69b --- /dev/null +++ b/static/usage/v8/select/customization/button-text/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v8/select/customization/custom-toggle-icons/angular.md b/static/usage/v8/select/customization/custom-toggle-icons/angular.md new file mode 100644 index 00000000000..429435daa6a --- /dev/null +++ b/static/usage/v8/select/customization/custom-toggle-icons/angular.md @@ -0,0 +1,17 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/customization/custom-toggle-icons/demo.html b/static/usage/v8/select/customization/custom-toggle-icons/demo.html new file mode 100644 index 00000000000..1309854f3d5 --- /dev/null +++ b/static/usage/v8/select/customization/custom-toggle-icons/demo.html @@ -0,0 +1,36 @@ + + + + + + Select - Custom Toggle Icons + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v8/select/customization/custom-toggle-icons/index.md b/static/usage/v8/select/customization/custom-toggle-icons/index.md new file mode 100644 index 00000000000..0617a54da77 --- /dev/null +++ b/static/usage/v8/select/customization/custom-toggle-icons/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/select/customization/custom-toggle-icons/javascript.md b/static/usage/v8/select/customization/custom-toggle-icons/javascript.md new file mode 100644 index 00000000000..fe874eaac26 --- /dev/null +++ b/static/usage/v8/select/customization/custom-toggle-icons/javascript.md @@ -0,0 +1,17 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/customization/custom-toggle-icons/react.md b/static/usage/v8/select/customization/custom-toggle-icons/react.md new file mode 100644 index 00000000000..c7358752605 --- /dev/null +++ b/static/usage/v8/select/customization/custom-toggle-icons/react.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +import { add, remove } from 'ionicons/icons'; + +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/customization/custom-toggle-icons/vue.md b/static/usage/v8/select/customization/custom-toggle-icons/vue.md new file mode 100644 index 00000000000..4d748e1c2d9 --- /dev/null +++ b/static/usage/v8/select/customization/custom-toggle-icons/vue.md @@ -0,0 +1,32 @@ +```html + + + +``` diff --git a/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_css.md b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_css.md new file mode 100644 index 00000000000..b031a2d4851 --- /dev/null +++ b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_css.md @@ -0,0 +1,13 @@ +```css +ion-select.always-flip::part(icon) { + transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); +} + +ion-select.always-flip.select-expanded::part(icon) { + transform: rotate(180deg); +} + +ion-select.never-flip::part(icon) { + transform: none; +} +``` diff --git a/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_html.md b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_html.md new file mode 100644 index 00000000000..5f40703296c --- /dev/null +++ b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md new file mode 100644 index 00000000000..4db53a836a9 --- /dev/null +++ b/static/usage/v8/select/customization/icon-flip-behavior/angular/example_component_ts.md @@ -0,0 +1,10 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/customization/icon-flip-behavior/demo.html b/static/usage/v8/select/customization/icon-flip-behavior/demo.html new file mode 100644 index 00000000000..f3e6738fe3e --- /dev/null +++ b/static/usage/v8/select/customization/icon-flip-behavior/demo.html @@ -0,0 +1,63 @@ + + + + + + Select - Icon Flip Behavior + + + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v8/select/customization/icon-flip-behavior/index.md b/static/usage/v8/select/customization/icon-flip-behavior/index.md new file mode 100644 index 00000000000..185f778569d --- /dev/null +++ b/static/usage/v8/select/customization/icon-flip-behavior/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/select/customization/icon-flip-behavior/javascript.md b/static/usage/v8/select/customization/icon-flip-behavior/javascript.md new file mode 100644 index 00000000000..de35559165f --- /dev/null +++ b/static/usage/v8/select/customization/icon-flip-behavior/javascript.md @@ -0,0 +1,44 @@ +```html + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + + + +``` diff --git a/static/usage/v8/select/customization/icon-flip-behavior/react/main_css.md b/static/usage/v8/select/customization/icon-flip-behavior/react/main_css.md new file mode 100644 index 00000000000..b031a2d4851 --- /dev/null +++ b/static/usage/v8/select/customization/icon-flip-behavior/react/main_css.md @@ -0,0 +1,13 @@ +```css +ion-select.always-flip::part(icon) { + transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); +} + +ion-select.always-flip.select-expanded::part(icon) { + transform: rotate(180deg); +} + +ion-select.never-flip::part(icon) { + transform: none; +} +``` diff --git a/static/usage/v8/select/customization/icon-flip-behavior/react/main_tsx.md b/static/usage/v8/select/customization/icon-flip-behavior/react/main_tsx.md new file mode 100644 index 00000000000..e7b146efcee --- /dev/null +++ b/static/usage/v8/select/customization/icon-flip-behavior/react/main_tsx.md @@ -0,0 +1,41 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +import { caretDownSharp } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/customization/icon-flip-behavior/vue.md b/static/usage/v8/select/customization/icon-flip-behavior/vue.md new file mode 100644 index 00000000000..f7d38a6ae7b --- /dev/null +++ b/static/usage/v8/select/customization/icon-flip-behavior/vue.md @@ -0,0 +1,59 @@ +```html + + + + + +``` diff --git a/static/usage/v8/select/customization/interface-options/angular/example_component_html.md b/static/usage/v8/select/customization/interface-options/angular/example_component_html.md new file mode 100644 index 00000000000..f459af75729 --- /dev/null +++ b/static/usage/v8/select/customization/interface-options/angular/example_component_html.md @@ -0,0 +1,32 @@ +```html + + + + Bacon + Onions + Pepperoni + + + + + + Brown + Blonde + Red + + + + + + Red + Green + Blue + + + +``` diff --git a/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md new file mode 100644 index 00000000000..c3f34d0adaf --- /dev/null +++ b/static/usage/v8/select/customization/interface-options/angular/example_component_ts.md @@ -0,0 +1,27 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + customAlertOptions = { + header: 'Pizza Toppings', + subHeader: 'Select your favorite topping', + message: 'Choose only one', + translucent: true, + }; + + customPopoverOptions = { + header: 'Hair Color', + subHeader: 'Select your hair color', + message: 'Only select your dominant hair color', + }; + + customActionSheetOptions = { + header: 'Colors', + subHeader: 'Select your favorite color', + }; +} +``` diff --git a/static/usage/v8/select/customization/interface-options/demo.html b/static/usage/v8/select/customization/interface-options/demo.html new file mode 100644 index 00000000000..8283956c7ed --- /dev/null +++ b/static/usage/v8/select/customization/interface-options/demo.html @@ -0,0 +1,83 @@ + + + + + + Select - Interface Options + + + + + + + + + + + +
+ + + + Bacon + Onions + Pepperoni + + + + + + Brown + Blonde + Red + + + + + + Red + Green + Blue + + + +
+ + + + + + diff --git a/static/usage/v8/select/customization/interface-options/index.md b/static/usage/v8/select/customization/interface-options/index.md new file mode 100644 index 00000000000..de1da61b1ed --- /dev/null +++ b/static/usage/v8/select/customization/interface-options/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/select/customization/interface-options/javascript.md b/static/usage/v8/select/customization/interface-options/javascript.md new file mode 100644 index 00000000000..a64438e3452 --- /dev/null +++ b/static/usage/v8/select/customization/interface-options/javascript.md @@ -0,0 +1,53 @@ +```html + + + + Bacon + Onions + Pepperoni + + + + + + Brown + Blonde + Red + + + + + + Red + Green + Blue + + + + + +``` diff --git a/static/usage/v8/select/customization/interface-options/react.md b/static/usage/v8/select/customization/interface-options/react.md new file mode 100644 index 00000000000..cd9e53e97a5 --- /dev/null +++ b/static/usage/v8/select/customization/interface-options/react.md @@ -0,0 +1,57 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +function Example() { + const customAlertOptions = { + header: 'Pizza Toppings', + subHeader: 'Select your favorite topping', + message: 'Choose only one', + translucent: true, + }; + + const customPopoverOptions = { + header: 'Hair Color', + subHeader: 'Select your hair color', + message: 'Only select your dominant hair color', + }; + + const customActionSheetOptions = { + header: 'Colors', + subHeader: 'Select your favorite color', + }; + + return ( + + + + Bacon + Onions + Pepperoni + + + + + + Brown + Blonde + Red + + + + + + Red + Green + Blue + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/customization/interface-options/vue.md b/static/usage/v8/select/customization/interface-options/vue.md new file mode 100644 index 00000000000..55dcaac0743 --- /dev/null +++ b/static/usage/v8/select/customization/interface-options/vue.md @@ -0,0 +1,73 @@ +```html + + + +``` diff --git a/static/usage/v8/select/customization/styling-select/angular/example_component_css.md b/static/usage/v8/select/customization/styling-select/angular/example_component_css.md new file mode 100644 index 00000000000..4ca173bed8f --- /dev/null +++ b/static/usage/v8/select/customization/styling-select/angular/example_component_css.md @@ -0,0 +1,27 @@ +```css +ion-select { + --placeholder-color: #971e49; + --placeholder-opacity: 1; + width: 100%; + justify-content: center; +} + +ion-select::part(placeholder), +ion-select::part(text) { + flex: 0 0 auto; +} + +ion-select::part(placeholder)::first-letter { + font-size: 24px; + font-weight: 500; +} + +ion-select::part(text) { + color: #545ca7; +} + +ion-select::part(icon) { + color: #971e49; + opacity: 1; +} +``` diff --git a/static/usage/v8/select/customization/styling-select/angular/example_component_html.md b/static/usage/v8/select/customization/styling-select/angular/example_component_html.md new file mode 100644 index 00000000000..c2f19e70065 --- /dev/null +++ b/static/usage/v8/select/customization/styling-select/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + + Apples + Oranges + Bananas + +``` diff --git a/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md new file mode 100644 index 00000000000..4db53a836a9 --- /dev/null +++ b/static/usage/v8/select/customization/styling-select/angular/example_component_ts.md @@ -0,0 +1,10 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v8/select/customization/styling-select/demo.html b/static/usage/v8/select/customization/styling-select/demo.html new file mode 100644 index 00000000000..c683ff692f1 --- /dev/null +++ b/static/usage/v8/select/customization/styling-select/demo.html @@ -0,0 +1,58 @@ + + + + + + Select - Styling the Select + + + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v8/select/customization/styling-select/index.md b/static/usage/v8/select/customization/styling-select/index.md new file mode 100644 index 00000000000..dbfe2ba527c --- /dev/null +++ b/static/usage/v8/select/customization/styling-select/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/select/customization/styling-select/javascript.md b/static/usage/v8/select/customization/styling-select/javascript.md new file mode 100644 index 00000000000..169ad61aa88 --- /dev/null +++ b/static/usage/v8/select/customization/styling-select/javascript.md @@ -0,0 +1,35 @@ +```html + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/customization/styling-select/react/main_css.md b/static/usage/v8/select/customization/styling-select/react/main_css.md new file mode 100644 index 00000000000..4ca173bed8f --- /dev/null +++ b/static/usage/v8/select/customization/styling-select/react/main_css.md @@ -0,0 +1,27 @@ +```css +ion-select { + --placeholder-color: #971e49; + --placeholder-opacity: 1; + width: 100%; + justify-content: center; +} + +ion-select::part(placeholder), +ion-select::part(text) { + flex: 0 0 auto; +} + +ion-select::part(placeholder)::first-letter { + font-size: 24px; + font-weight: 500; +} + +ion-select::part(text) { + color: #545ca7; +} + +ion-select::part(icon) { + color: #971e49; + opacity: 1; +} +``` diff --git a/static/usage/v8/select/customization/styling-select/react/main_tsx.md b/static/usage/v8/select/customization/styling-select/react/main_tsx.md new file mode 100644 index 00000000000..00e0e7a8027 --- /dev/null +++ b/static/usage/v8/select/customization/styling-select/react/main_tsx.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonSelect, IonSelectOption } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + Apples + Oranges + Bananas + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/customization/styling-select/vue.md b/static/usage/v8/select/customization/styling-select/vue.md new file mode 100644 index 00000000000..749540e895f --- /dev/null +++ b/static/usage/v8/select/customization/styling-select/vue.md @@ -0,0 +1,46 @@ +```html + + + + + +``` diff --git a/static/usage/v8/select/fill/angular.md b/static/usage/v8/select/fill/angular.md new file mode 100644 index 00000000000..fcfe25bfe2c --- /dev/null +++ b/static/usage/v8/select/fill/angular.md @@ -0,0 +1,15 @@ +```html + + Apple + Banana + Orange + + +
+ + + Apple + Banana + Orange + +``` diff --git a/static/usage/v8/select/fill/demo.html b/static/usage/v8/select/fill/demo.html new file mode 100644 index 00000000000..9b59ad5319c --- /dev/null +++ b/static/usage/v8/select/fill/demo.html @@ -0,0 +1,42 @@ + + + + + + Input + + + + + + + + + + + +
+ + Apple + Banana + Orange + + + + Apple + Banana + Orange + +
+ + + + diff --git a/static/usage/v8/select/fill/index.md b/static/usage/v8/select/fill/index.md new file mode 100644 index 00000000000..393a8af448a --- /dev/null +++ b/static/usage/v8/select/fill/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/select/fill/javascript.md b/static/usage/v8/select/fill/javascript.md new file mode 100644 index 00000000000..fcfe25bfe2c --- /dev/null +++ b/static/usage/v8/select/fill/javascript.md @@ -0,0 +1,15 @@ +```html + + Apple + Banana + Orange + + +
+ + + Apple + Banana + Orange + +``` diff --git a/static/usage/v8/select/fill/react.md b/static/usage/v8/select/fill/react.md new file mode 100644 index 00000000000..e6813654ee2 --- /dev/null +++ b/static/usage/v8/select/fill/react.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonSelect, IonSelectOption } from '@ionic/react'; + +function Example() { + return ( + <> + + Apple + Banana + Orange + + +
+ + + Apple + Banana + Orange + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/fill/vue.md b/static/usage/v8/select/fill/vue.md new file mode 100644 index 00000000000..e08d5859308 --- /dev/null +++ b/static/usage/v8/select/fill/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v8/select/interfaces/action-sheet/angular.md b/static/usage/v8/select/interfaces/action-sheet/angular.md new file mode 100644 index 00000000000..f8d864e3a7c --- /dev/null +++ b/static/usage/v8/select/interfaces/action-sheet/angular.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/interfaces/action-sheet/demo.html b/static/usage/v8/select/interfaces/action-sheet/demo.html new file mode 100644 index 00000000000..1cda57966fe --- /dev/null +++ b/static/usage/v8/select/interfaces/action-sheet/demo.html @@ -0,0 +1,30 @@ + + + + + + Select - Action Sheet + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v8/select/interfaces/action-sheet/index.md b/static/usage/v8/select/interfaces/action-sheet/index.md new file mode 100644 index 00000000000..1dc5472394e --- /dev/null +++ b/static/usage/v8/select/interfaces/action-sheet/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/select/interfaces/action-sheet/javascript.md b/static/usage/v8/select/interfaces/action-sheet/javascript.md new file mode 100644 index 00000000000..f8d864e3a7c --- /dev/null +++ b/static/usage/v8/select/interfaces/action-sheet/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/interfaces/action-sheet/react.md b/static/usage/v8/select/interfaces/action-sheet/react.md new file mode 100644 index 00000000000..b285c79f0b3 --- /dev/null +++ b/static/usage/v8/select/interfaces/action-sheet/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/react'; +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/interfaces/action-sheet/vue.md b/static/usage/v8/select/interfaces/action-sheet/vue.md new file mode 100644 index 00000000000..df563aefa47 --- /dev/null +++ b/static/usage/v8/select/interfaces/action-sheet/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v8/select/interfaces/popover/angular.md b/static/usage/v8/select/interfaces/popover/angular.md new file mode 100644 index 00000000000..fe01597afa5 --- /dev/null +++ b/static/usage/v8/select/interfaces/popover/angular.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/interfaces/popover/demo.html b/static/usage/v8/select/interfaces/popover/demo.html new file mode 100644 index 00000000000..44bfcfbc826 --- /dev/null +++ b/static/usage/v8/select/interfaces/popover/demo.html @@ -0,0 +1,30 @@ + + + + + + Select - Popover + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v8/select/interfaces/popover/index.md b/static/usage/v8/select/interfaces/popover/index.md new file mode 100644 index 00000000000..ae4fa7b7521 --- /dev/null +++ b/static/usage/v8/select/interfaces/popover/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/select/interfaces/popover/javascript.md b/static/usage/v8/select/interfaces/popover/javascript.md new file mode 100644 index 00000000000..fe01597afa5 --- /dev/null +++ b/static/usage/v8/select/interfaces/popover/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v8/select/interfaces/popover/react.md b/static/usage/v8/select/interfaces/popover/react.md new file mode 100644 index 00000000000..2afe98eef3c --- /dev/null +++ b/static/usage/v8/select/interfaces/popover/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/react'; +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/interfaces/popover/vue.md b/static/usage/v8/select/interfaces/popover/vue.md new file mode 100644 index 00000000000..24b1f4b66d0 --- /dev/null +++ b/static/usage/v8/select/interfaces/popover/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v8/select/justify/angular.md b/static/usage/v8/select/justify/angular.md new file mode 100644 index 00000000000..a3951bb1a59 --- /dev/null +++ b/static/usage/v8/select/justify/angular.md @@ -0,0 +1,23 @@ +```html + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + +``` diff --git a/static/usage/v8/select/justify/demo.html b/static/usage/v8/select/justify/demo.html new file mode 100644 index 00000000000..02d70de3073 --- /dev/null +++ b/static/usage/v8/select/justify/demo.html @@ -0,0 +1,49 @@ + + + + + + select + + + + + + + + + + +
+ + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + + +
+ + + + diff --git a/static/usage/v8/select/justify/index.md b/static/usage/v8/select/justify/index.md new file mode 100644 index 00000000000..17356a84665 --- /dev/null +++ b/static/usage/v8/select/justify/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/select/justify/javascript.md b/static/usage/v8/select/justify/javascript.md new file mode 100644 index 00000000000..a3951bb1a59 --- /dev/null +++ b/static/usage/v8/select/justify/javascript.md @@ -0,0 +1,23 @@ +```html + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + +``` diff --git a/static/usage/v8/select/justify/react.md b/static/usage/v8/select/justify/react.md new file mode 100644 index 00000000000..3c9b16c3129 --- /dev/null +++ b/static/usage/v8/select/justify/react.md @@ -0,0 +1,33 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; + +function Example() { + return ( + + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/justify/vue.md b/static/usage/v8/select/justify/vue.md new file mode 100644 index 00000000000..f9814d8b797 --- /dev/null +++ b/static/usage/v8/select/justify/vue.md @@ -0,0 +1,36 @@ +```html + + + +``` diff --git a/static/usage/v8/select/label-placement/angular.md b/static/usage/v8/select/label-placement/angular.md new file mode 100644 index 00000000000..063c257914d --- /dev/null +++ b/static/usage/v8/select/label-placement/angular.md @@ -0,0 +1,35 @@ +```html + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + +``` diff --git a/static/usage/v8/select/label-placement/demo.html b/static/usage/v8/select/label-placement/demo.html new file mode 100644 index 00000000000..c43ff9bfd3f --- /dev/null +++ b/static/usage/v8/select/label-placement/demo.html @@ -0,0 +1,60 @@ + + + + + + select + + + + + + + + + + + +
+ + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + +
+ + + + diff --git a/static/usage/v8/select/label-placement/index.md b/static/usage/v8/select/label-placement/index.md new file mode 100644 index 00000000000..b0464726fb4 --- /dev/null +++ b/static/usage/v8/select/label-placement/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/select/label-placement/javascript.md b/static/usage/v8/select/label-placement/javascript.md new file mode 100644 index 00000000000..063c257914d --- /dev/null +++ b/static/usage/v8/select/label-placement/javascript.md @@ -0,0 +1,35 @@ +```html + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + +``` diff --git a/static/usage/v8/select/label-placement/react.md b/static/usage/v8/select/label-placement/react.md new file mode 100644 index 00000000000..3850747793d --- /dev/null +++ b/static/usage/v8/select/label-placement/react.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; + +function Example() { + return ( + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/label-placement/vue.md b/static/usage/v8/select/label-placement/vue.md new file mode 100644 index 00000000000..9efccb8e49d --- /dev/null +++ b/static/usage/v8/select/label-placement/vue.md @@ -0,0 +1,46 @@ +```html + + + +``` diff --git a/static/usage/v8/select/label-slot/angular.md b/static/usage/v8/select/label-slot/angular.md new file mode 100644 index 00000000000..93790d050e2 --- /dev/null +++ b/static/usage/v8/select/label-slot/angular.md @@ -0,0 +1,12 @@ +```html + + + +
Favorite Fruit (Required)
+ Apple + Banana + Orange + + + +``` diff --git a/static/usage/v8/select/label-slot/demo.html b/static/usage/v8/select/label-slot/demo.html new file mode 100644 index 00000000000..35f5b7c5efd --- /dev/null +++ b/static/usage/v8/select/label-slot/demo.html @@ -0,0 +1,31 @@ + + + + + + select + + + + + + + + + +
+ + + +
Favorite Fruit (Required)
+ Apple + Banana + Orange + + + +
+ + + + diff --git a/static/usage/v8/select/label-slot/index.md b/static/usage/v8/select/label-slot/index.md new file mode 100644 index 00000000000..1b25e6b83f6 --- /dev/null +++ b/static/usage/v8/select/label-slot/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/select/label-slot/javascript.md b/static/usage/v8/select/label-slot/javascript.md new file mode 100644 index 00000000000..93790d050e2 --- /dev/null +++ b/static/usage/v8/select/label-slot/javascript.md @@ -0,0 +1,12 @@ +```html + + + +
Favorite Fruit (Required)
+ Apple + Banana + Orange + + + +``` diff --git a/static/usage/v8/select/label-slot/react.md b/static/usage/v8/select/label-slot/react.md new file mode 100644 index 00000000000..a903897a65b --- /dev/null +++ b/static/usage/v8/select/label-slot/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/react'; + +function Example() { + return ( + + + +
+ Favorite Fruit (Required) +
+ Apple + Banana + Orange + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/label-slot/vue.md b/static/usage/v8/select/label-slot/vue.md new file mode 100644 index 00000000000..8c8a8dd8be5 --- /dev/null +++ b/static/usage/v8/select/label-slot/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v8/select/migration/index.md b/static/usage/v8/select/migration/index.md new file mode 100644 index 00000000000..daf1a3a2612 --- /dev/null +++ b/static/usage/v8/select/migration/index.md @@ -0,0 +1,140 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +````mdx-code-block + + + +```html + + + + + Favorite Fruit: + ... + + + + + ... + + + + + + + + Favorite Fruit: + ... + + + + + +... +``` + + + +```html + + + + + Favorite Fruit: + ... + + + + + ... + + + + + + + + Favorite Fruit: + ... + + + + + +... +``` + + + +```tsx +{/* Label and Label Position */} + +{/* Before */} + + Favorite Fruit: + ... + + +{/* After */} + + ... + + + +{/* Fill */} + +{/* Before */} + + Favorite Fruit: + ... + + +{/* After */} + +{/* Inputs using `fill` should not be placed in IonItem */} +... +``` + + + +```html + + + + + Favorite Fruit: + ... + + + + + ... + + + + + + + + Favorite Fruit: + ... + + + + + +... +``` + + +```` diff --git a/static/usage/v8/select/no-visible-label/angular.md b/static/usage/v8/select/no-visible-label/angular.md new file mode 100644 index 00000000000..1c14ab03008 --- /dev/null +++ b/static/usage/v8/select/no-visible-label/angular.md @@ -0,0 +1,11 @@ +```html + + + + Apple + Banana + Orange + + + +``` diff --git a/static/usage/v8/select/no-visible-label/demo.html b/static/usage/v8/select/no-visible-label/demo.html new file mode 100644 index 00000000000..12d131e896d --- /dev/null +++ b/static/usage/v8/select/no-visible-label/demo.html @@ -0,0 +1,30 @@ + + + + + + select + + + + + + + + + +
+ + + + Apple + Banana + Orange + + + +
+ + + + diff --git a/static/usage/v8/select/no-visible-label/index.md b/static/usage/v8/select/no-visible-label/index.md new file mode 100644 index 00000000000..214708de577 --- /dev/null +++ b/static/usage/v8/select/no-visible-label/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/select/no-visible-label/javascript.md b/static/usage/v8/select/no-visible-label/javascript.md new file mode 100644 index 00000000000..1c14ab03008 --- /dev/null +++ b/static/usage/v8/select/no-visible-label/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Apple + Banana + Orange + + + +``` diff --git a/static/usage/v8/select/no-visible-label/react.md b/static/usage/v8/select/no-visible-label/react.md new file mode 100644 index 00000000000..8695381a487 --- /dev/null +++ b/static/usage/v8/select/no-visible-label/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/react'; + +function Example() { + return ( + + + + Apple + Banana + Orange + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/no-visible-label/vue.md b/static/usage/v8/select/no-visible-label/vue.md new file mode 100644 index 00000000000..038d7d32130 --- /dev/null +++ b/static/usage/v8/select/no-visible-label/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md new file mode 100644 index 00000000000..af00be1957e --- /dev/null +++ b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + + {{ food.name }} + + + +``` diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..c33570deec9 --- /dev/null +++ b/static/usage/v8/select/objects-as-values/multiple-selection/angular/example_component_ts.md @@ -0,0 +1,43 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + foods = [ + { + id: 1, + name: 'Apples', + type: 'fruit', + }, + { + id: 2, + name: 'Carrots', + type: 'vegetable', + }, + { + id: 3, + name: 'Cupcakes', + type: 'dessert', + }, + ]; + + compareWith(o1, o2) { + if (!o1 || !o2) { + return o1 === o2; + } + + if (Array.isArray(o2)) { + return o2.some((o) => o.id === o1.id); + } + + return o1.id === o2.id; + } + + handleChange(ev) { + console.log('Current value:', JSON.stringify(ev.target.value)); + } +} +``` diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/demo.html b/static/usage/v8/select/objects-as-values/multiple-selection/demo.html new file mode 100644 index 00000000000..dff14888c6c --- /dev/null +++ b/static/usage/v8/select/objects-as-values/multiple-selection/demo.html @@ -0,0 +1,72 @@ + + + + + + Select - Object Values and Multiple Selection + + + + + + + + + +
+ + + + + +
+ + + + + + diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/index.md b/static/usage/v8/select/objects-as-values/multiple-selection/index.md new file mode 100644 index 00000000000..d28b2b1926d --- /dev/null +++ b/static/usage/v8/select/objects-as-values/multiple-selection/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/javascript.md b/static/usage/v8/select/objects-as-values/multiple-selection/javascript.md new file mode 100644 index 00000000000..fef901c8e28 --- /dev/null +++ b/static/usage/v8/select/objects-as-values/multiple-selection/javascript.md @@ -0,0 +1,53 @@ +```html + + + + + + + +``` diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/react.md b/static/usage/v8/select/objects-as-values/multiple-selection/react.md new file mode 100644 index 00000000000..a41ed0c8670 --- /dev/null +++ b/static/usage/v8/select/objects-as-values/multiple-selection/react.md @@ -0,0 +1,63 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; + +interface Food { + id: number; + name: string; + type: string; +} + +const foods: Food[] = [ + { + id: 1, + name: 'Apples', + type: 'fruit', + }, + { + id: 2, + name: 'Carrots', + type: 'vegetable', + }, + { + id: 3, + name: 'Cupcakes', + type: 'dessert', + }, +]; + +const compareWith = (o1: Food, o2: Food) => { + if (!o1 || !o2) { + return o1 === o2; + } + + if (Array.isArray(o2)) { + return o2.some((o) => o.id === o1.id); + } + + return o1.id === o2.id; +}; + +function Example() { + return ( + + + console.log('Current value:', JSON.stringify(ev.detail.value))} + multiple={true} + > + {foods.map((food) => ( + + {food.name} + + ))} + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/objects-as-values/multiple-selection/vue.md b/static/usage/v8/select/objects-as-values/multiple-selection/vue.md new file mode 100644 index 00000000000..cf095fd89c0 --- /dev/null +++ b/static/usage/v8/select/objects-as-values/multiple-selection/vue.md @@ -0,0 +1,63 @@ +```html + + + +``` diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md new file mode 100644 index 00000000000..7354647f224 --- /dev/null +++ b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_html.md @@ -0,0 +1,14 @@ +```html + + + + {{ food.name }} + + + +``` diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md new file mode 100644 index 00000000000..20d05fa847f --- /dev/null +++ b/static/usage/v8/select/objects-as-values/using-comparewith/angular/example_component_ts.md @@ -0,0 +1,35 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + foods = [ + { + id: 1, + name: 'Apples', + type: 'fruit', + }, + { + id: 2, + name: 'Carrots', + type: 'vegetable', + }, + { + id: 3, + name: 'Cupcakes', + type: 'dessert', + }, + ]; + + compareWith(o1, o2) { + return o1 && o2 ? o1.id === o2.id : o1 === o2; + } + + handleChange(ev) { + console.log('Current value:', JSON.stringify(ev.target.value)); + } +} +``` diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/demo.html b/static/usage/v8/select/objects-as-values/using-comparewith/demo.html new file mode 100644 index 00000000000..aee3dae24f4 --- /dev/null +++ b/static/usage/v8/select/objects-as-values/using-comparewith/demo.html @@ -0,0 +1,64 @@ + + + + + + Select - Using compareWith + + + + + + + + + +
+ + + + + +
+ + + + + + diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/index.md b/static/usage/v8/select/objects-as-values/using-comparewith/index.md new file mode 100644 index 00000000000..25c58651971 --- /dev/null +++ b/static/usage/v8/select/objects-as-values/using-comparewith/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/javascript.md b/static/usage/v8/select/objects-as-values/using-comparewith/javascript.md new file mode 100644 index 00000000000..4c4a831c91f --- /dev/null +++ b/static/usage/v8/select/objects-as-values/using-comparewith/javascript.md @@ -0,0 +1,46 @@ +```html + + + + + + + +``` diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/react.md b/static/usage/v8/select/objects-as-values/using-comparewith/react.md new file mode 100644 index 00000000000..ff1fe016e84 --- /dev/null +++ b/static/usage/v8/select/objects-as-values/using-comparewith/react.md @@ -0,0 +1,54 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; + +interface Food { + id: number; + name: string; + type: string; +} + +const foods: Food[] = [ + { + id: 1, + name: 'Apples', + type: 'fruit', + }, + { + id: 2, + name: 'Carrots', + type: 'vegetable', + }, + { + id: 3, + name: 'Cupcakes', + type: 'dessert', + }, +]; + +const compareWith = (o1: Food, o2: Food) => { + return o1 && o2 ? o1.id === o2.id : o1 === o2; +}; + +function Example() { + return ( + + + console.log('Current value:', JSON.stringify(ev.detail.value))} + > + {foods.map((food) => ( + + {food.name} + + ))} + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/objects-as-values/using-comparewith/vue.md b/static/usage/v8/select/objects-as-values/using-comparewith/vue.md new file mode 100644 index 00000000000..e93b223f6a1 --- /dev/null +++ b/static/usage/v8/select/objects-as-values/using-comparewith/vue.md @@ -0,0 +1,54 @@ +```html + + + +``` diff --git a/static/usage/v8/select/typeahead/angular/angular_types_ts.md b/static/usage/v8/select/typeahead/angular/angular_types_ts.md new file mode 100644 index 00000000000..42d4583e026 --- /dev/null +++ b/static/usage/v8/select/typeahead/angular/angular_types_ts.md @@ -0,0 +1,6 @@ +```ts +export interface Item { + text: string; + value: string; +} +``` diff --git a/static/usage/v8/select/typeahead/angular/app_module_ts.md b/static/usage/v8/select/typeahead/angular/app_module_ts.md new file mode 100644 index 00000000000..0fa58037717 --- /dev/null +++ b/static/usage/v8/select/typeahead/angular/app_module_ts.md @@ -0,0 +1,19 @@ +```ts +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { FormsModule } from '@angular/forms'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; +import { ExampleComponent } from './example.component'; + +import { TypeaheadComponent } from './typeahead.component'; + +@NgModule({ + imports: [BrowserModule, FormsModule, IonicModule.forRoot({})], + declarations: [AppComponent, ExampleComponent, TypeaheadComponent], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` diff --git a/static/usage/v8/select/typeahead/angular/example_component_html.md b/static/usage/v8/select/typeahead/angular/example_component_html.md new file mode 100644 index 00000000000..5d4c94d6c44 --- /dev/null +++ b/static/usage/v8/select/typeahead/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + + Favorite Fruits +
{{ selectedFruitsText }}
+ + + + + + + + + +``` diff --git a/static/usage/v8/select/typeahead/angular/example_component_ts.md b/static/usage/v8/select/typeahead/angular/example_component_ts.md new file mode 100644 index 00000000000..ded6fa60b0f --- /dev/null +++ b/static/usage/v8/select/typeahead/angular/example_component_ts.md @@ -0,0 +1,59 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { IonModal } from '@ionic/angular'; +import { Item } from './types'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + @ViewChild('modal', { static: true }) modal!: IonModal; + + selectedFruitsText = '0 Items'; + selectedFruits: string[] = []; + + fruits: Item[] = [ + { text: 'Apple', value: 'apple' }, + { text: 'Apricot', value: 'apricot' }, + { text: 'Banana', value: 'banana' }, + { text: 'Blackberry', value: 'blackberry' }, + { text: 'Blueberry', value: 'blueberry' }, + { text: 'Cherry', value: 'cherry' }, + { text: 'Cranberry', value: 'cranberry' }, + { text: 'Grape', value: 'grape' }, + { text: 'Grapefruit', value: 'grapefruit' }, + { text: 'Guava', value: 'guava' }, + { text: 'Jackfruit', value: 'jackfruit' }, + { text: 'Lime', value: 'lime' }, + { text: 'Mango', value: 'mango' }, + { text: 'Nectarine', value: 'nectarine' }, + { text: 'Orange', value: 'orange' }, + { text: 'Papaya', value: 'papaya' }, + { text: 'Passionfruit', value: 'passionfruit' }, + { text: 'Peach', value: 'peach' }, + { text: 'Pear', value: 'pear' }, + { text: 'Plantain', value: 'plantain' }, + { text: 'Plum', value: 'plum' }, + { text: 'Pineapple', value: 'pineapple' }, + { text: 'Pomegranate', value: 'pomegranate' }, + { text: 'Raspberry', value: 'raspberry' }, + { text: 'Strawberry', value: 'strawberry' }, + ]; + + private formatData(data: string[]) { + if (data.length === 1) { + const fruit = this.fruits.find((fruit) => fruit.value === data[0]); + return fruit.text; + } + + return `${data.length} items`; + } + + fruitSelectionChanged(fruits: string[]) { + this.selectedFruits = fruits; + this.selectedFruitsText = this.formatData(this.selectedFruits); + this.modal.dismiss(); + } +} +``` diff --git a/static/usage/v8/select/typeahead/angular/modal-example_component_html.md b/static/usage/v8/select/typeahead/angular/modal-example_component_html.md new file mode 100644 index 00000000000..64da05a7a9d --- /dev/null +++ b/static/usage/v8/select/typeahead/angular/modal-example_component_html.md @@ -0,0 +1,26 @@ +```html + + + + Cancel + + {{ title }} + + Done + + + + + + + + + + + {{ item.text }} + + + +``` diff --git a/static/usage/v8/select/typeahead/angular/modal-example_component_ts.md b/static/usage/v8/select/typeahead/angular/modal-example_component_ts.md new file mode 100644 index 00000000000..9bd21f1b404 --- /dev/null +++ b/static/usage/v8/select/typeahead/angular/modal-example_component_ts.md @@ -0,0 +1,82 @@ +```ts +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import type { OnInit } from '@angular/core'; +import { Item } from './types'; + +@Component({ + selector: 'app-typeahead', + templateUrl: 'typeahead.component.html', +}) +export class TypeaheadComponent implements OnInit { + @Input() items: Item[] = []; + @Input() selectedItems: string[] = []; + @Input() title = 'Select Items'; + + @Output() selectionCancel = new EventEmitter(); + @Output() selectionChange = new EventEmitter(); + + filteredItems: Item[] = []; + workingSelectedValues: string[] = []; + + ngOnInit() { + this.filteredItems = [...this.items]; + this.workingSelectedValues = [...this.selectedItems]; + } + + trackItems(index: number, item: Item) { + return item.value; + } + + cancelChanges() { + this.selectionCancel.emit(); + } + + confirmChanges() { + this.selectionChange.emit(this.workingSelectedValues); + } + + searchbarInput(ev) { + this.filterList(ev.target.value); + } + + /** + * Update the rendered view with + * the provided search query. If no + * query is provided, all data + * will be rendered. + */ + filterList(searchQuery: string | undefined) { + /** + * If no search query is defined, + * return all options. + */ + if (searchQuery === undefined) { + this.filteredItems = [...this.items]; + } else { + /** + * Otherwise, normalize the search + * query and check to see which items + * contain the search query as a substring. + */ + const normalizedQuery = searchQuery.toLowerCase(); + this.filteredItems = this.items.filter((item) => { + return item.text.toLowerCase().includes(normalizedQuery); + }); + } + } + + isChecked(value: string) { + return this.workingSelectedValues.find((item) => item === value); + } + + checkboxChange(ev) { + const { checked, value } = ev.detail; + + if (checked) { + this.workingSelectedValues = [...this.workingSelectedValues, value]; + } else { + this.workingSelectedValues = this.workingSelectedValues.filter((item) => item !== value); + } + } +} +``` diff --git a/static/usage/v8/select/typeahead/demo.html b/static/usage/v8/select/typeahead/demo.html new file mode 100644 index 00000000000..6585f3c0635 --- /dev/null +++ b/static/usage/v8/select/typeahead/demo.html @@ -0,0 +1,220 @@ + + + + + + Select + + + + + + + + + +
+ + + Favorite Fruits +
0 Items
+ + +
+ + + + + + + Cancel + + Favorite Fruits + + Done + + + + + + + + + + + + + + + diff --git a/static/usage/v8/select/typeahead/index.md b/static/usage/v8/select/typeahead/index.md new file mode 100644 index 00000000000..e81d8b0aa56 --- /dev/null +++ b/static/usage/v8/select/typeahead/index.md @@ -0,0 +1,52 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_types_ts from './react/react_types_ts.md'; +import typeahead_component_tsx from './react/typeahead_component_tsx.md'; + +import vue_example from './vue/example_vue.md'; +import vue_types_ts from './vue/vue_types_ts.md'; +import vue_typeahead_component from './vue/typeahead_component_vue.md'; + +import angular_app_module_ts from './angular/app_module_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_modal_example_component_ts from './angular/modal-example_component_ts.md'; +import angular_modal_example_component_html from './angular/modal-example_component_html.md'; +import angular_types_ts from './angular/angular_types_ts.md'; + + diff --git a/static/usage/v8/select/typeahead/javascript.md b/static/usage/v8/select/typeahead/javascript.md new file mode 100644 index 00000000000..e98741c6df2 --- /dev/null +++ b/static/usage/v8/select/typeahead/javascript.md @@ -0,0 +1,205 @@ +```html + +
+ + + Favorite Fruits +
0 Items
+ + +
+ + + + + + + Cancel + + Favorite Fruits + + Done + + + + + + + + + + + + +``` diff --git a/static/usage/v8/select/typeahead/react/main_tsx.md b/static/usage/v8/select/typeahead/react/main_tsx.md new file mode 100644 index 00000000000..391259a7ecf --- /dev/null +++ b/static/usage/v8/select/typeahead/react/main_tsx.md @@ -0,0 +1,83 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/react'; +import AppTypeahead from './AppTypeahead'; + +import type { Item } from './types'; + +const fruits: Item[] = [ + { text: 'Apple', value: 'apple' }, + { text: 'Apricot', value: 'apricot' }, + { text: 'Banana', value: 'banana' }, + { text: 'Blackberry', value: 'blackberry' }, + { text: 'Blueberry', value: 'blueberry' }, + { text: 'Cherry', value: 'cherry' }, + { text: 'Cranberry', value: 'cranberry' }, + { text: 'Grape', value: 'grape' }, + { text: 'Grapefruit', value: 'grapefruit' }, + { text: 'Guava', value: 'guava' }, + { text: 'Jackfruit', value: 'jackfruit' }, + { text: 'Lime', value: 'lime' }, + { text: 'Mango', value: 'mango' }, + { text: 'Nectarine', value: 'nectarine' }, + { text: 'Orange', value: 'orange' }, + { text: 'Papaya', value: 'papaya' }, + { text: 'Passionfruit', value: 'passionfruit' }, + { text: 'Peach', value: 'peach' }, + { text: 'Pear', value: 'pear' }, + { text: 'Plantain', value: 'plantain' }, + { text: 'Plum', value: 'plum' }, + { text: 'Pineapple', value: 'pineapple' }, + { text: 'Pomegranate', value: 'pomegranate' }, + { text: 'Raspberry', value: 'raspberry' }, + { text: 'Strawberry', value: 'strawberry' }, +]; + +function Example() { + const [selectedFruitsText, setSelectedFruitsText] = useState('0 Items'); + const [selectedFruits, setSelectedFruits] = useState([]); + + const modal = useRef(null); + + const formatData = (data: string[]) => { + if (data.length === 1) { + const fruit = fruits.find((fruit) => fruit.value === data[0])!; + return fruit.text; + } + + return `${data.length} items`; + }; + + const fruitSelectionChanged = (fruits: string[]) => { + setSelectedFruits(fruits); + setSelectedFruitsText(formatData(fruits)); + modal.current?.dismiss(); + }; + + return ( + <> + + + + Favorite Fruits +
+ {selectedFruitsText} +
+ + + + + + modal.current?.dismiss()} + onSelectionChange={fruitSelectionChanged} + /> + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/select/typeahead/react/react_types_ts.md b/static/usage/v8/select/typeahead/react/react_types_ts.md new file mode 100644 index 00000000000..42d4583e026 --- /dev/null +++ b/static/usage/v8/select/typeahead/react/react_types_ts.md @@ -0,0 +1,6 @@ +```ts +export interface Item { + text: string; + value: string; +} +``` diff --git a/static/usage/v8/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v8/select/typeahead/react/typeahead_component_tsx.md new file mode 100644 index 00000000000..6026c0fbe9f --- /dev/null +++ b/static/usage/v8/select/typeahead/react/typeahead_component_tsx.md @@ -0,0 +1,122 @@ +```tsx +import React, { useState } from 'react'; +import { + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonList, + IonTitle, + IonSearchbar, + IonToolbar, +} from '@ionic/react'; +import type { CheckboxCustomEvent } from '@ionic/react'; +import type { Item } from './types'; + +interface TypeaheadProps { + items: Item[]; + selectedItems: string[]; + title?: string; + onSelectionCancel?: () => void; + onSelectionChange?: (items: string[]) => void; +} + +function AppTypeahead(props: TypeaheadProps) { + const [filteredItems, setFilteredItems] = useState([...props.items]); + const [workingSelectedValues, setWorkingSelectedValues] = useState([...props.selectedItems]); + + const isChecked = (value: string) => { + return workingSelectedValues.find((item) => item === value) !== undefined; + }; + + const cancelChanges = () => { + const { onSelectionCancel } = props; + if (onSelectionCancel !== undefined) { + onSelectionCancel(); + } + }; + + const confirmChanges = () => { + const { onSelectionChange } = props; + if (onSelectionChange !== undefined) { + onSelectionChange(workingSelectedValues); + } + }; + + const searchbarInput = (ev: any) => { + filterList(ev.target.value); + }; + + /** + * Update the rendered view with + * the provided search query. If no + * query is provided, all data + * will be rendered. + */ + const filterList = (searchQuery: string | null | undefined) => { + /** + * If no search query is defined, + * return all options. + */ + if (searchQuery === undefined || searchQuery === null) { + setFilteredItems([...props.items]); + } else { + /** + * Otherwise, normalize the search + * query and check to see which items + * contain the search query as a substring. + */ + const normalizedQuery = searchQuery.toLowerCase(); + setFilteredItems( + props.items.filter((item) => { + return item.text.toLowerCase().includes(normalizedQuery); + }) + ); + } + }; + + const checkboxChange = (ev: CheckboxCustomEvent) => { + const { checked, value } = ev.detail; + + if (checked) { + setWorkingSelectedValues([...workingSelectedValues, value]); + } else { + setWorkingSelectedValues(workingSelectedValues.filter((item) => item !== value)); + } + }; + + return ( + <> + + + + Cancel + + {props.title} + + Done + + + + + + + + + + {filteredItems.map((item) => ( + + + {item.text} + + + ))} + + + + ); +} +export default AppTypeahead; +``` diff --git a/static/usage/v8/select/typeahead/vue/example_vue.md b/static/usage/v8/select/typeahead/vue/example_vue.md new file mode 100644 index 00000000000..372b3e7d8ec --- /dev/null +++ b/static/usage/v8/select/typeahead/vue/example_vue.md @@ -0,0 +1,83 @@ +```html + + + +``` diff --git a/static/usage/v8/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v8/select/typeahead/vue/typeahead_component_vue.md new file mode 100644 index 00000000000..33017c3e291 --- /dev/null +++ b/static/usage/v8/select/typeahead/vue/typeahead_component_vue.md @@ -0,0 +1,135 @@ +```html + + + +``` diff --git a/static/usage/v8/select/typeahead/vue/vue_types_ts.md b/static/usage/v8/select/typeahead/vue/vue_types_ts.md new file mode 100644 index 00000000000..42d4583e026 --- /dev/null +++ b/static/usage/v8/select/typeahead/vue/vue_types_ts.md @@ -0,0 +1,6 @@ +```ts +export interface Item { + text: string; + value: string; +} +``` diff --git a/static/usage/v8/skeleton-text/basic/angular/example_component_html.md b/static/usage/v8/skeleton-text/basic/angular/example_component_html.md new file mode 100644 index 00000000000..bea0ee90431 --- /dev/null +++ b/static/usage/v8/skeleton-text/basic/angular/example_component_html.md @@ -0,0 +1,39 @@ +```html + + Albums + + + + + +

Abbey Road

+

The Beatles

+

1969

+ + + + + + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + + +Toggle +``` diff --git a/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..8423962a3e9 --- /dev/null +++ b/static/usage/v8/skeleton-text/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + public loaded = false; +} +``` diff --git a/static/usage/v8/skeleton-text/basic/demo.html b/static/usage/v8/skeleton-text/basic/demo.html new file mode 100644 index 00000000000..2c5347d9b13 --- /dev/null +++ b/static/usage/v8/skeleton-text/basic/demo.html @@ -0,0 +1,89 @@ + + + + + + Accordion + + + + + + + + + + + +
+
+ Toggle +
+ + + + + + diff --git a/static/usage/v8/skeleton-text/basic/index.md b/static/usage/v8/skeleton-text/basic/index.md new file mode 100644 index 00000000000..2aacfe8b931 --- /dev/null +++ b/static/usage/v8/skeleton-text/basic/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/skeleton-text/basic/javascript.md b/static/usage/v8/skeleton-text/basic/javascript.md new file mode 100644 index 00000000000..da71f295063 --- /dev/null +++ b/static/usage/v8/skeleton-text/basic/javascript.md @@ -0,0 +1,60 @@ +```html +
+Toggle + + +``` diff --git a/static/usage/v8/skeleton-text/basic/react.md b/static/usage/v8/skeleton-text/basic/react.md new file mode 100644 index 00000000000..a247849a478 --- /dev/null +++ b/static/usage/v8/skeleton-text/basic/react.md @@ -0,0 +1,61 @@ +```tsx +import React, { useState } from 'react'; +import { + IonButton, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonSkeletonText, + IonThumbnail, +} from '@ionic/react'; +import { musicalNotes } from 'ionicons/icons'; +function Example() { + const [loaded, setLoaded] = useState(false); + return ( + <> + {loaded && ( + + Albums + + + + + +

Abbey Road

+

The Beatles

+

1969

+ + + + )} + {!loaded && ( + + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + + )} + setLoaded(!loaded)}>Toggle + + ); +} +export default Example; +``` diff --git a/static/usage/v8/skeleton-text/basic/vue.md b/static/usage/v8/skeleton-text/basic/vue.md new file mode 100644 index 00000000000..f391050a009 --- /dev/null +++ b/static/usage/v8/skeleton-text/basic/vue.md @@ -0,0 +1,78 @@ +```html + + + +``` diff --git a/static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..c59d8603262 --- /dev/null +++ b/static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,7 @@ +```css +ion-skeleton-text { + --border-radius: 9999px; + --background: rgba(188, 0, 255, 0.065); + --background-rgb: 188, 0, 255; +} +``` diff --git a/static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_html.md b/static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..4044c112b0c --- /dev/null +++ b/static/usage/v8/skeleton-text/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + +``` diff --git a/static/usage/v8/skeleton-text/theming/css-properties/demo.html b/static/usage/v8/skeleton-text/theming/css-properties/demo.html new file mode 100644 index 00000000000..13f68b54722 --- /dev/null +++ b/static/usage/v8/skeleton-text/theming/css-properties/demo.html @@ -0,0 +1,58 @@ + + + + + + Accordion + + + + + + + + + + + +
+ + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + +
+ + + + diff --git a/static/usage/v8/skeleton-text/theming/css-properties/index.md b/static/usage/v8/skeleton-text/theming/css-properties/index.md new file mode 100644 index 00000000000..c131f6dbe19 --- /dev/null +++ b/static/usage/v8/skeleton-text/theming/css-properties/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/skeleton-text/theming/css-properties/javascript.md b/static/usage/v8/skeleton-text/theming/css-properties/javascript.md new file mode 100644 index 00000000000..90d27d3f31e --- /dev/null +++ b/static/usage/v8/skeleton-text/theming/css-properties/javascript.md @@ -0,0 +1,31 @@ +```html + + + + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + +``` diff --git a/static/usage/v8/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v8/skeleton-text/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..c59d8603262 --- /dev/null +++ b/static/usage/v8/skeleton-text/theming/css-properties/react/main_css.md @@ -0,0 +1,7 @@ +```css +ion-skeleton-text { + --border-radius: 9999px; + --background: rgba(188, 0, 255, 0.065); + --background-rgb: 188, 0, 255; +} +``` diff --git a/static/usage/v8/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v8/skeleton-text/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..d66ea73ff7f --- /dev/null +++ b/static/usage/v8/skeleton-text/theming/css-properties/react/main_tsx.md @@ -0,0 +1,33 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/skeleton-text/theming/css-properties/vue.md b/static/usage/v8/skeleton-text/theming/css-properties/vue.md new file mode 100644 index 00000000000..2785a0e8b51 --- /dev/null +++ b/static/usage/v8/skeleton-text/theming/css-properties/vue.md @@ -0,0 +1,49 @@ +```html + + + + + +``` diff --git a/static/usage/v8/spinner/basic/angular.md b/static/usage/v8/spinner/basic/angular.md new file mode 100644 index 00000000000..72997980940 --- /dev/null +++ b/static/usage/v8/spinner/basic/angular.md @@ -0,0 +1,51 @@ +```html + + Default + + + + + Dots + + + + + Lines + + + + + Lines Small + + + + + Lines Sharp + + + + + Lines Sharp Small + + + + + Bubbles + + + + + Circles + + + + + Circular + + + + + Crescent + + +``` diff --git a/static/usage/v8/spinner/basic/demo.html b/static/usage/v8/spinner/basic/demo.html new file mode 100644 index 00000000000..811e66cf28b --- /dev/null +++ b/static/usage/v8/spinner/basic/demo.html @@ -0,0 +1,77 @@ + + + + + + Spinner + + + + + + + + + + + +
+ + Default + + + + + Dots + + + + + Lines + + + + + Lines Small + + + + + Lines Sharp + + + + + Lines Sharp Small + + + + + Bubbles + + + + + Circles + + + + + Circular + + + + + Crescent + + +
+ + + + diff --git a/static/usage/v8/spinner/basic/index.md b/static/usage/v8/spinner/basic/index.md new file mode 100644 index 00000000000..dd6417ff23c --- /dev/null +++ b/static/usage/v8/spinner/basic/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/spinner/basic/javascript.md b/static/usage/v8/spinner/basic/javascript.md new file mode 100644 index 00000000000..72997980940 --- /dev/null +++ b/static/usage/v8/spinner/basic/javascript.md @@ -0,0 +1,51 @@ +```html + + Default + + + + + Dots + + + + + Lines + + + + + Lines Small + + + + + Lines Sharp + + + + + Lines Sharp Small + + + + + Bubbles + + + + + Circles + + + + + Circular + + + + + Crescent + + +``` diff --git a/static/usage/v8/spinner/basic/react.md b/static/usage/v8/spinner/basic/react.md new file mode 100644 index 00000000000..c6219c28b42 --- /dev/null +++ b/static/usage/v8/spinner/basic/react.md @@ -0,0 +1,61 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonSpinner } from '@ionic/react'; + +function Example() { + return ( + <> + + Default + + + + + Dots + + + + + Lines + + + + + Lines Small + + + + + Lines Sharp + + + + + Lines Sharp Small + + + + + Bubbles + + + + + Circles + + + + + Circular + + + + + Crescent + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/spinner/basic/vue.md b/static/usage/v8/spinner/basic/vue.md new file mode 100644 index 00000000000..089b9fb6da8 --- /dev/null +++ b/static/usage/v8/spinner/basic/vue.md @@ -0,0 +1,62 @@ +```html + + + +``` diff --git a/static/usage/v8/spinner/theming/colors/angular.md b/static/usage/v8/spinner/theming/colors/angular.md new file mode 100644 index 00000000000..089ea023e92 --- /dev/null +++ b/static/usage/v8/spinner/theming/colors/angular.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v8/spinner/theming/colors/demo.html b/static/usage/v8/spinner/theming/colors/demo.html new file mode 100644 index 00000000000..6f8a8a8abe8 --- /dev/null +++ b/static/usage/v8/spinner/theming/colors/demo.html @@ -0,0 +1,31 @@ + + + + + + Spinner + + + + + + + + + +
+ + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/spinner/theming/colors/index.md b/static/usage/v8/spinner/theming/colors/index.md new file mode 100644 index 00000000000..ee82596cc0f --- /dev/null +++ b/static/usage/v8/spinner/theming/colors/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/spinner/theming/colors/javascript.md b/static/usage/v8/spinner/theming/colors/javascript.md new file mode 100644 index 00000000000..089ea023e92 --- /dev/null +++ b/static/usage/v8/spinner/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v8/spinner/theming/colors/react.md b/static/usage/v8/spinner/theming/colors/react.md new file mode 100644 index 00000000000..aca320e2720 --- /dev/null +++ b/static/usage/v8/spinner/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonSpinner } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/spinner/theming/colors/vue.md b/static/usage/v8/spinner/theming/colors/vue.md new file mode 100644 index 00000000000..c45f320c7ed --- /dev/null +++ b/static/usage/v8/spinner/theming/colors/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v8/spinner/theming/css-properties/angular/example_component_css.md b/static/usage/v8/spinner/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..e77a7d79e6a --- /dev/null +++ b/static/usage/v8/spinner/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-spinner { + --color: #54dc98; +} +``` diff --git a/static/usage/v8/spinner/theming/css-properties/angular/example_component_html.md b/static/usage/v8/spinner/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..4b3b8d665b4 --- /dev/null +++ b/static/usage/v8/spinner/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/spinner/theming/css-properties/demo.html b/static/usage/v8/spinner/theming/css-properties/demo.html new file mode 100644 index 00000000000..4ef8b5b2722 --- /dev/null +++ b/static/usage/v8/spinner/theming/css-properties/demo.html @@ -0,0 +1,28 @@ + + + + + + Spinner + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/spinner/theming/css-properties/index.md b/static/usage/v8/spinner/theming/css-properties/index.md new file mode 100644 index 00000000000..22b93f802b0 --- /dev/null +++ b/static/usage/v8/spinner/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/spinner/theming/css-properties/javascript.md b/static/usage/v8/spinner/theming/css-properties/javascript.md new file mode 100644 index 00000000000..e2077bc508e --- /dev/null +++ b/static/usage/v8/spinner/theming/css-properties/javascript.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v8/spinner/theming/css-properties/react.md b/static/usage/v8/spinner/theming/css-properties/react.md new file mode 100644 index 00000000000..117d82c8541 --- /dev/null +++ b/static/usage/v8/spinner/theming/css-properties/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonSpinner } from '@ionic/react'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/spinner/theming/css-properties/react/main_css.md b/static/usage/v8/spinner/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..e77a7d79e6a --- /dev/null +++ b/static/usage/v8/spinner/theming/css-properties/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-spinner { + --color: #54dc98; +} +``` diff --git a/static/usage/v8/spinner/theming/css-properties/react/main_tsx.md b/static/usage/v8/spinner/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..f990cb1e738 --- /dev/null +++ b/static/usage/v8/spinner/theming/css-properties/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonSpinner } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/spinner/theming/css-properties/vue.md b/static/usage/v8/spinner/theming/css-properties/vue.md new file mode 100644 index 00000000000..c818d2c7488 --- /dev/null +++ b/static/usage/v8/spinner/theming/css-properties/vue.md @@ -0,0 +1,20 @@ +```html + + + + + +``` diff --git a/static/usage/v8/spinner/theming/resizing/angular/example_component_css.md b/static/usage/v8/spinner/theming/resizing/angular/example_component_css.md new file mode 100644 index 00000000000..845d1a9af47 --- /dev/null +++ b/static/usage/v8/spinner/theming/resizing/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-spinner { + width: 100px; + height: 100px; +} +``` diff --git a/static/usage/v8/spinner/theming/resizing/angular/example_component_html.md b/static/usage/v8/spinner/theming/resizing/angular/example_component_html.md new file mode 100644 index 00000000000..4b3b8d665b4 --- /dev/null +++ b/static/usage/v8/spinner/theming/resizing/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/spinner/theming/resizing/demo.html b/static/usage/v8/spinner/theming/resizing/demo.html new file mode 100644 index 00000000000..acebb2ef5d2 --- /dev/null +++ b/static/usage/v8/spinner/theming/resizing/demo.html @@ -0,0 +1,29 @@ + + + + + + Spinner + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/spinner/theming/resizing/index.md b/static/usage/v8/spinner/theming/resizing/index.md new file mode 100644 index 00000000000..5d4b142092e --- /dev/null +++ b/static/usage/v8/spinner/theming/resizing/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/spinner/theming/resizing/javascript.md b/static/usage/v8/spinner/theming/resizing/javascript.md new file mode 100644 index 00000000000..9c875eb4951 --- /dev/null +++ b/static/usage/v8/spinner/theming/resizing/javascript.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v8/spinner/theming/resizing/react.md b/static/usage/v8/spinner/theming/resizing/react.md new file mode 100644 index 00000000000..117d82c8541 --- /dev/null +++ b/static/usage/v8/spinner/theming/resizing/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonSpinner } from '@ionic/react'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v8/spinner/theming/resizing/react/main_css.md b/static/usage/v8/spinner/theming/resizing/react/main_css.md new file mode 100644 index 00000000000..845d1a9af47 --- /dev/null +++ b/static/usage/v8/spinner/theming/resizing/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-spinner { + width: 100px; + height: 100px; +} +``` diff --git a/static/usage/v8/spinner/theming/resizing/react/main_tsx.md b/static/usage/v8/spinner/theming/resizing/react/main_tsx.md new file mode 100644 index 00000000000..f990cb1e738 --- /dev/null +++ b/static/usage/v8/spinner/theming/resizing/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonSpinner } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/spinner/theming/resizing/vue.md b/static/usage/v8/spinner/theming/resizing/vue.md new file mode 100644 index 00000000000..52ae17f7694 --- /dev/null +++ b/static/usage/v8/spinner/theming/resizing/vue.md @@ -0,0 +1,21 @@ +```html + + + + + +``` diff --git a/static/usage/v8/split-pane/basic/angular.md b/static/usage/v8/split-pane/basic/angular.md new file mode 100644 index 00000000000..c642d54bc50 --- /dev/null +++ b/static/usage/v8/split-pane/basic/angular.md @@ -0,0 +1,21 @@ +```html + + + + + Menu + + + Menu Content + + +
+ + + Main View + + + Main View Content +
+ +``` diff --git a/static/usage/v8/split-pane/basic/demo.html b/static/usage/v8/split-pane/basic/demo.html new file mode 100644 index 00000000000..9c9558aa9f7 --- /dev/null +++ b/static/usage/v8/split-pane/basic/demo.html @@ -0,0 +1,36 @@ + + + + + + Spinner + + + + + + + + + + + + + Menu + + + Menu Content + + +
+ + + Main View + + + Main View Content +
+ + + + diff --git a/static/usage/v8/split-pane/basic/index.md b/static/usage/v8/split-pane/basic/index.md new file mode 100644 index 00000000000..40ec0cfe8a1 --- /dev/null +++ b/static/usage/v8/split-pane/basic/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/split-pane/basic/javascript.md b/static/usage/v8/split-pane/basic/javascript.md new file mode 100644 index 00000000000..7d7cb736c98 --- /dev/null +++ b/static/usage/v8/split-pane/basic/javascript.md @@ -0,0 +1,21 @@ +```html + + + + + Menu + + + Menu Content + + +
+ + + Main View + + + Main View Content +
+ +``` diff --git a/static/usage/v8/split-pane/basic/react.md b/static/usage/v8/split-pane/basic/react.md new file mode 100644 index 00000000000..f754f18b3a6 --- /dev/null +++ b/static/usage/v8/split-pane/basic/react.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + + + + + Menu + + + Menu Content + + +
+ + + Main View + + + Main View Content +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/split-pane/basic/vue.md b/static/usage/v8/split-pane/basic/vue.md new file mode 100644 index 00000000000..81f9dbd9a6b --- /dev/null +++ b/static/usage/v8/split-pane/basic/vue.md @@ -0,0 +1,32 @@ +```html + + + +``` diff --git a/static/usage/v8/split-pane/theming/css-properties/angular/example_component_css.md b/static/usage/v8/split-pane/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..701bc942f7b --- /dev/null +++ b/static/usage/v8/split-pane/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-split-pane { + --side-width: 350px; + --side-max-width: 350px; + + --border: 1px dashed #b3baff; +} +``` diff --git a/static/usage/v8/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v8/split-pane/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..029f5d3ee56 --- /dev/null +++ b/static/usage/v8/split-pane/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + + + + + Menu + + + Menu Content is 350px wide and has a blue dashed border + + +
+ + + Main View + + + Main View Content +
+ +``` diff --git a/static/usage/v8/split-pane/theming/css-properties/demo.html b/static/usage/v8/split-pane/theming/css-properties/demo.html new file mode 100644 index 00000000000..640f9bb81a6 --- /dev/null +++ b/static/usage/v8/split-pane/theming/css-properties/demo.html @@ -0,0 +1,44 @@ + + + + + + Spinner + + + + + + + + + + + + + + Menu + + + Menu Content is 350px wide and has a blue dashed border + + +
+ + + Main View + + + Main View Content +
+ + + + diff --git a/static/usage/v8/split-pane/theming/css-properties/index.md b/static/usage/v8/split-pane/theming/css-properties/index.md new file mode 100644 index 00000000000..336074baaaf --- /dev/null +++ b/static/usage/v8/split-pane/theming/css-properties/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/split-pane/theming/css-properties/javascript.md b/static/usage/v8/split-pane/theming/css-properties/javascript.md new file mode 100644 index 00000000000..37bd7b9e7f1 --- /dev/null +++ b/static/usage/v8/split-pane/theming/css-properties/javascript.md @@ -0,0 +1,30 @@ +```html + + + + + Menu + + + Menu Content is 350px wide and has a blue dashed border + + +
+ + + Main View + + + Main View Content +
+ + + +``` diff --git a/static/usage/v8/split-pane/theming/css-properties/react/main_css.md b/static/usage/v8/split-pane/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..701bc942f7b --- /dev/null +++ b/static/usage/v8/split-pane/theming/css-properties/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-split-pane { + --side-width: 350px; + --side-max-width: 350px; + + --border: 1px dashed #b3baff; +} +``` diff --git a/static/usage/v8/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v8/split-pane/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..1d4ad6a2e19 --- /dev/null +++ b/static/usage/v8/split-pane/theming/css-properties/react/main_tsx.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + + + Menu + + + Menu Content is 350px wide and has a blue dashed border + + +
+ + + Main View + + + Main View Content +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/split-pane/theming/css-properties/vue.md b/static/usage/v8/split-pane/theming/css-properties/vue.md new file mode 100644 index 00000000000..f0abcf95800 --- /dev/null +++ b/static/usage/v8/split-pane/theming/css-properties/vue.md @@ -0,0 +1,41 @@ +```html + + + + + +``` diff --git a/static/usage/v8/tabs/router/angular/app_component_html.md b/static/usage/v8/tabs/router/angular/app_component_html.md new file mode 100644 index 00000000000..7636539f28a --- /dev/null +++ b/static/usage/v8/tabs/router/angular/app_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v8/tabs/router/angular/app_module_ts.md b/static/usage/v8/tabs/router/angular/app_module_ts.md new file mode 100644 index 00000000000..b2d3db7f33d --- /dev/null +++ b/static/usage/v8/tabs/router/angular/app_module_ts.md @@ -0,0 +1,19 @@ +```ts +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { BrowserModule } from '@angular/platform-browser'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; +import { ExampleComponent } from './example.component'; + +import { AppRoutingModule } from './app-routing.module'; + +@NgModule({ + imports: [BrowserModule, FormsModule, AppRoutingModule, IonicModule.forRoot()], + declarations: [AppComponent, ExampleComponent], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` diff --git a/static/usage/v8/tabs/router/angular/app_routing_module_ts.md b/static/usage/v8/tabs/router/angular/app_routing_module_ts.md new file mode 100644 index 00000000000..7ff1067030f --- /dev/null +++ b/static/usage/v8/tabs/router/angular/app_routing_module_ts.md @@ -0,0 +1,42 @@ +```ts +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; + +import { ExampleComponent } from './example.component'; + +@NgModule({ + imports: [ + RouterModule.forRoot([ + { + path: '', + component: ExampleComponent, + children: [ + { + path: '', + pathMatch: 'full', + redirectTo: 'home', + }, + { + path: 'home', + loadChildren: () => import('./home/home-page.module').then((m) => m.HomePageModule), + }, + { + path: 'radio', + loadChildren: () => import('./radio/radio-page.module').then((m) => m.RadioPageModule), + }, + { + path: 'library', + loadChildren: () => import('./library/library-page.module').then((m) => m.LibraryPageModule), + }, + { + path: 'search', + loadChildren: () => import('./search/search-page.module').then((m) => m.SearchPageModule), + }, + ], + }, + ]), + ], + exports: [RouterModule], +}) +export class AppRoutingModule {} +``` diff --git a/static/usage/v8/tabs/router/angular/example_component_html.md b/static/usage/v8/tabs/router/angular/example_component_html.md new file mode 100644 index 00000000000..67be68b564c --- /dev/null +++ b/static/usage/v8/tabs/router/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + +``` diff --git a/static/usage/v8/tabs/router/angular/global_css.md b/static/usage/v8/tabs/router/angular/global_css.md new file mode 100644 index 00000000000..a782d2d7f90 --- /dev/null +++ b/static/usage/v8/tabs/router/angular/global_css.md @@ -0,0 +1,8 @@ +```css +.example-content { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} +``` diff --git a/static/usage/v8/tabs/router/angular/home_page_component_html.md b/static/usage/v8/tabs/router/angular/home_page_component_html.md new file mode 100644 index 00000000000..7ef5bc47333 --- /dev/null +++ b/static/usage/v8/tabs/router/angular/home_page_component_html.md @@ -0,0 +1,10 @@ +```html + + + Listen now + + + +
Listen now content
+ +``` diff --git a/static/usage/v8/tabs/router/angular/home_page_component_ts.md b/static/usage/v8/tabs/router/angular/home_page_component_ts.md new file mode 100644 index 00000000000..9e2ef0a3e8c --- /dev/null +++ b/static/usage/v8/tabs/router/angular/home_page_component_ts.md @@ -0,0 +1,9 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-home-page', + templateUrl: './home-page.component.html', +}) +export class HomePageComponent {} +``` diff --git a/static/usage/v8/tabs/router/angular/home_page_module_ts.md b/static/usage/v8/tabs/router/angular/home_page_module_ts.md new file mode 100644 index 00000000000..2a1fb15b460 --- /dev/null +++ b/static/usage/v8/tabs/router/angular/home_page_module_ts.md @@ -0,0 +1,14 @@ +```ts +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { HomePageComponent } from './home-page.component'; + +import { IonicModule } from '@ionic/angular'; + +@NgModule({ + imports: [IonicModule, RouterModule.forChild([{ path: '', component: HomePageComponent }])], + declarations: [HomePageComponent], + exports: [HomePageComponent], +}) +export class HomePageModule {} +``` diff --git a/static/usage/v8/tabs/router/angular/library_page_component_html.md b/static/usage/v8/tabs/router/angular/library_page_component_html.md new file mode 100644 index 00000000000..a0df4a6d684 --- /dev/null +++ b/static/usage/v8/tabs/router/angular/library_page_component_html.md @@ -0,0 +1,10 @@ +```html + + + Library + + + +
Library content
+ +``` diff --git a/static/usage/v8/tabs/router/angular/library_page_component_ts.md b/static/usage/v8/tabs/router/angular/library_page_component_ts.md new file mode 100644 index 00000000000..f5a92a4868a --- /dev/null +++ b/static/usage/v8/tabs/router/angular/library_page_component_ts.md @@ -0,0 +1,9 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-library-page', + templateUrl: './library-page.component.html', +}) +export class LibraryPageComponent {} +``` diff --git a/static/usage/v8/tabs/router/angular/library_page_module_ts.md b/static/usage/v8/tabs/router/angular/library_page_module_ts.md new file mode 100644 index 00000000000..8e2ab48cf39 --- /dev/null +++ b/static/usage/v8/tabs/router/angular/library_page_module_ts.md @@ -0,0 +1,14 @@ +```ts +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { IonicModule } from '@ionic/angular'; + +import { LibraryPageComponent } from './library-page.component'; + +@NgModule({ + imports: [IonicModule, RouterModule.forChild([{ path: '', component: LibraryPageComponent }])], + declarations: [LibraryPageComponent], + exports: [LibraryPageComponent], +}) +export class LibraryPageModule {} +``` diff --git a/static/usage/v8/tabs/router/angular/radio_page_component_html.md b/static/usage/v8/tabs/router/angular/radio_page_component_html.md new file mode 100644 index 00000000000..e6affd4132f --- /dev/null +++ b/static/usage/v8/tabs/router/angular/radio_page_component_html.md @@ -0,0 +1,10 @@ +```html + + + Radio + + + +
Radio content
+ +``` diff --git a/static/usage/v8/tabs/router/angular/radio_page_component_ts.md b/static/usage/v8/tabs/router/angular/radio_page_component_ts.md new file mode 100644 index 00000000000..d29209c00dd --- /dev/null +++ b/static/usage/v8/tabs/router/angular/radio_page_component_ts.md @@ -0,0 +1,9 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-radio-page', + templateUrl: './radio-page.component.html', +}) +export class RadioPageComponent {} +``` diff --git a/static/usage/v8/tabs/router/angular/radio_page_module_ts.md b/static/usage/v8/tabs/router/angular/radio_page_module_ts.md new file mode 100644 index 00000000000..f50a0088632 --- /dev/null +++ b/static/usage/v8/tabs/router/angular/radio_page_module_ts.md @@ -0,0 +1,14 @@ +```ts +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { RadioPageComponent } from './radio-page.component'; + +import { IonicModule } from '@ionic/angular'; + +@NgModule({ + imports: [IonicModule, RouterModule.forChild([{ path: '', component: RadioPageComponent }])], + declarations: [RadioPageComponent], + exports: [RadioPageComponent], +}) +export class RadioPageModule {} +``` diff --git a/static/usage/v8/tabs/router/angular/search_page_component_html.md b/static/usage/v8/tabs/router/angular/search_page_component_html.md new file mode 100644 index 00000000000..91cb5c6f2db --- /dev/null +++ b/static/usage/v8/tabs/router/angular/search_page_component_html.md @@ -0,0 +1,10 @@ +```html + + + Search + + + +
Search content
+ +``` diff --git a/static/usage/v8/tabs/router/angular/search_page_component_ts.md b/static/usage/v8/tabs/router/angular/search_page_component_ts.md new file mode 100644 index 00000000000..bd6e723d332 --- /dev/null +++ b/static/usage/v8/tabs/router/angular/search_page_component_ts.md @@ -0,0 +1,9 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-search-page', + templateUrl: './search-page.component.html', +}) +export class SearchPageComponent {} +``` diff --git a/static/usage/v8/tabs/router/angular/search_page_module_ts.md b/static/usage/v8/tabs/router/angular/search_page_module_ts.md new file mode 100644 index 00000000000..a1d599c5d9b --- /dev/null +++ b/static/usage/v8/tabs/router/angular/search_page_module_ts.md @@ -0,0 +1,14 @@ +```ts +import { NgModule } from '@angular/core'; +import { RouterModule } from '@angular/router'; +import { SearchPageComponent } from './search-page.component'; + +import { IonicModule } from '@ionic/angular'; + +@NgModule({ + imports: [IonicModule, RouterModule.forChild([{ path: '', component: SearchPageComponent }])], + declarations: [SearchPageComponent], + exports: [SearchPageComponent], +}) +export class SearchPageModule {} +``` diff --git a/static/usage/v8/tabs/router/demo.html b/static/usage/v8/tabs/router/demo.html new file mode 100644 index 00000000000..d1fa8e40f83 --- /dev/null +++ b/static/usage/v8/tabs/router/demo.html @@ -0,0 +1,114 @@ + + + + + + Tabs + + + + + + + + + + + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + + +
+ + + Radio + + + +
Radio content
+ +
+ + + +
+ + + Library + + + +
Library content
+ +
+ + + +
+ + + Search + + + +
Search content
+ +
+ + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + + + + diff --git a/static/usage/v8/tabs/router/index.md b/static/usage/v8/tabs/router/index.md new file mode 100644 index 00000000000..77161af269f --- /dev/null +++ b/static/usage/v8/tabs/router/index.md @@ -0,0 +1,93 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_app_component_html from './angular/app_component_html.md'; +import angular_app_module_ts from './angular/app_module_ts.md'; +import angular_app_routing_module_ts from './angular/app_routing_module_ts.md'; + +import angular_example_component_html from './angular/example_component_html.md'; + +import angular_home_page_module_ts from './angular/home_page_module_ts.md'; +import angular_home_page_component_ts from './angular/home_page_component_ts.md'; +import angular_home_page_component_html from './angular/home_page_component_html.md'; + +import angular_library_page_module_ts from './angular/library_page_module_ts.md'; +import angular_library_page_component_ts from './angular/library_page_component_ts.md'; +import angular_library_page_component_html from './angular/library_page_component_html.md'; + +import angular_radio_page_module_ts from './angular/radio_page_module_ts.md'; +import angular_radio_page_component_ts from './angular/radio_page_component_ts.md'; +import angular_radio_page_component_html from './angular/radio_page_component_html.md'; + +import angular_search_page_module_ts from './angular/search_page_module_ts.md'; +import angular_search_page_component_ts from './angular/search_page_component_ts.md'; +import angular_search_page_component_html from './angular/search_page_component_html.md'; + +import angular_global_css from './angular/global_css.md'; + +import vue_app_vue from './vue/app_vue.md'; +import vue_main_ts from './vue/main_ts.md'; +import vue_example_vue from './vue/example_vue.md'; +import vue_router_ts from './vue/router_ts.md'; +import vue_home_page_vue from './vue/home_page_vue.md'; +import vue_radio_page_vue from './vue/radio_page_vue.md'; +import vue_library_page_vue from './vue/library_page_vue.md'; +import vue_search_page_vue from './vue/search_page_vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_home_page_tsx from './react/home_page_tsx.md'; +import react_radio_page_tsx from './react/radio_page_tsx.md'; +import react_library_page_tsx from './react/library_page_tsx.md'; +import react_search_page_tsx from './react/search_page_tsx.md'; + + diff --git a/static/usage/v8/tabs/router/javascript.md b/static/usage/v8/tabs/router/javascript.md new file mode 100644 index 00000000000..ca1351100fd --- /dev/null +++ b/static/usage/v8/tabs/router/javascript.md @@ -0,0 +1,101 @@ +```html + + + + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + + +
+ + + Radio + + + +
Radio content
+ +
+ + + +
+ + + Library + + + +
Library content
+ +
+ + + +
+ + + Search + + + +
Search content
+ +
+ + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + + +``` diff --git a/static/usage/v8/tabs/router/react/home_page_tsx.md b/static/usage/v8/tabs/router/react/home_page_tsx.md new file mode 100644 index 00000000000..f24b05e18b5 --- /dev/null +++ b/static/usage/v8/tabs/router/react/home_page_tsx.md @@ -0,0 +1,28 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +const HomePage = () => ( + <> + + + Listen now + + + +
+ Listen now content +
+ + +); + +export default HomePage; +``` diff --git a/static/usage/v8/tabs/router/react/library_page_tsx.md b/static/usage/v8/tabs/router/react/library_page_tsx.md new file mode 100644 index 00000000000..383b6f115de --- /dev/null +++ b/static/usage/v8/tabs/router/react/library_page_tsx.md @@ -0,0 +1,28 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +const LibraryPage = () => ( + <> + + + Library + + + +
+ Library content +
+ + +); + +export default LibraryPage; +``` diff --git a/static/usage/v8/tabs/router/react/main_tsx.md b/static/usage/v8/tabs/router/react/main_tsx.md new file mode 100644 index 00000000000..b5005ef3778 --- /dev/null +++ b/static/usage/v8/tabs/router/react/main_tsx.md @@ -0,0 +1,58 @@ +```tsx +import React from 'react'; +import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonRouterOutlet } from '@ionic/react'; +import { IonReactRouter } from '@ionic/react-router'; + +import { Route, Redirect } from 'react-router'; + +import { playCircle, radio, library, search } from 'ionicons/icons'; + +import HomePage from './pages/HomePage'; +import RadioPage from './pages/RadioPage'; +import LibraryPage from './pages/LibraryPage'; +import SearchPage from './pages/SearchPage'; + +function Example() { + return ( + + + + + {/* + Use the render method to reduce the number of renders your component will have due to a route change. + + Use the component prop when your component depends on the RouterComponentProps passed in automatically. + */} + } exact={true} /> + } exact={true} /> + } exact={true} /> + } exact={true} /> + + + + + + Listen now + + + + + Radio + + + + + Library + + + + + Search + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/tabs/router/react/radio_page_tsx.md b/static/usage/v8/tabs/router/react/radio_page_tsx.md new file mode 100644 index 00000000000..d0e432c3a58 --- /dev/null +++ b/static/usage/v8/tabs/router/react/radio_page_tsx.md @@ -0,0 +1,28 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +const RadioPage = () => ( + <> + + + Radio + + + +
+ Radio content +
+ + +); + +export default RadioPage; +``` diff --git a/static/usage/v8/tabs/router/react/search_page_tsx.md b/static/usage/v8/tabs/router/react/search_page_tsx.md new file mode 100644 index 00000000000..3d51b374830 --- /dev/null +++ b/static/usage/v8/tabs/router/react/search_page_tsx.md @@ -0,0 +1,28 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +const SearchPage = () => ( + <> + + + Search + + + +
+ Search content +
+ + +); + +export default SearchPage; +``` diff --git a/static/usage/v8/tabs/router/vue.md b/static/usage/v8/tabs/router/vue.md new file mode 100644 index 00000000000..091cabaa6f8 --- /dev/null +++ b/static/usage/v8/tabs/router/vue.md @@ -0,0 +1,81 @@ +```html + + + + +``` diff --git a/static/usage/v8/tabs/router/vue/app_vue.md b/static/usage/v8/tabs/router/vue/app_vue.md new file mode 100644 index 00000000000..b5f330406db --- /dev/null +++ b/static/usage/v8/tabs/router/vue/app_vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v8/tabs/router/vue/example_vue.md b/static/usage/v8/tabs/router/vue/example_vue.md new file mode 100644 index 00000000000..846b8b4d621 --- /dev/null +++ b/static/usage/v8/tabs/router/vue/example_vue.md @@ -0,0 +1,48 @@ +```html + + + +``` diff --git a/static/usage/v8/tabs/router/vue/home_page_vue.md b/static/usage/v8/tabs/router/vue/home_page_vue.md new file mode 100644 index 00000000000..9d809b9a70d --- /dev/null +++ b/static/usage/v8/tabs/router/vue/home_page_vue.md @@ -0,0 +1,31 @@ +```html + + + + + +``` diff --git a/static/usage/v8/tabs/router/vue/library_page_vue.md b/static/usage/v8/tabs/router/vue/library_page_vue.md new file mode 100644 index 00000000000..b46e1dec9d7 --- /dev/null +++ b/static/usage/v8/tabs/router/vue/library_page_vue.md @@ -0,0 +1,31 @@ +```html + + + + + +``` diff --git a/static/usage/v8/tabs/router/vue/main_ts.md b/static/usage/v8/tabs/router/vue/main_ts.md new file mode 100644 index 00000000000..d3253963fa5 --- /dev/null +++ b/static/usage/v8/tabs/router/vue/main_ts.md @@ -0,0 +1,32 @@ +```ts +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; +import router from './router'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/* Theme variables */ +import './theme/variables.css'; + +const app = createApp(App).use(IonicVue).use(router); + +router.isReady().then(() => { + app.mount('#app'); +}); +``` diff --git a/static/usage/v8/tabs/router/vue/radio_page_vue.md b/static/usage/v8/tabs/router/vue/radio_page_vue.md new file mode 100644 index 00000000000..5f65a8963cf --- /dev/null +++ b/static/usage/v8/tabs/router/vue/radio_page_vue.md @@ -0,0 +1,31 @@ +```html + + + + + +``` diff --git a/static/usage/v8/tabs/router/vue/router_ts.md b/static/usage/v8/tabs/router/vue/router_ts.md new file mode 100644 index 00000000000..3279c38def4 --- /dev/null +++ b/static/usage/v8/tabs/router/vue/router_ts.md @@ -0,0 +1,46 @@ +```ts +import { createRouter, createWebHistory } from '@ionic/vue-router'; +import { RouteRecordRaw } from 'vue-router'; +import Example from './components/Example.vue'; + +const routes: Array = [ + { + path: '/', + redirect: '/home', + }, + { + path: '/', + component: Example, + children: [ + { + path: '', + redirect: '/home', + }, + { + path: 'home', + component: () => import('./views/HomePage.vue'), + }, + { + path: 'radio', + component: () => import('./views/RadioPage.vue'), + }, + { + path: 'library', + component: () => import('./views/LibraryPage.vue'), + }, + { + path: 'search', + component: () => import('./views/SearchPage.vue'), + }, + ], + }, +]; + +const router = createRouter({ + // Use: createWebHistory(process.env.BASE_URL) in your app + history: createWebHistory(), + routes, +}); + +export default router; +``` diff --git a/static/usage/v8/tabs/router/vue/search_page_vue.md b/static/usage/v8/tabs/router/vue/search_page_vue.md new file mode 100644 index 00000000000..f85eeb9c649 --- /dev/null +++ b/static/usage/v8/tabs/router/vue/search_page_vue.md @@ -0,0 +1,31 @@ +```html + + + + + +``` diff --git a/static/usage/v8/text/basic/angular.md b/static/usage/v8/text/basic/angular.md new file mode 100644 index 00000000000..e63da3cacf9 --- /dev/null +++ b/static/usage/v8/text/basic/angular.md @@ -0,0 +1,21 @@ +```html + +

H1: The quick brown fox jumps over the lazy dog

+ + + +

H2: The quick brown fox jumps over the lazy dog

+ + + +

H3: The quick brown fox jumps over the lazy dog

+ + +

+ + I saw a werewolf with a Chinese menu in his hand. Walking through the + streets of Soho in the rain. He + was looking for a place called Lee Ho Fook's. Gonna get a + big dish of beef chow mein. +

+``` diff --git a/static/usage/v8/text/basic/demo.html b/static/usage/v8/text/basic/demo.html new file mode 100644 index 00000000000..e41614e0814 --- /dev/null +++ b/static/usage/v8/text/basic/demo.html @@ -0,0 +1,59 @@ + + + + + + Text + + + + + + + + + + + +
+ +

H1: The quick brown fox jumps over the lazy dog

+ + + +

H2: The quick brown fox jumps over the lazy dog

+ + + +

H3: The quick brown fox jumps over the lazy dog

+ + +

+ + + + I saw a werewolf with a Chinese menu in his hand. Walking through the + streets of Soho in the rain. He + was looking for a place called Lee Ho Fook's. Gonna get a + big dish of beef chow mein. +

+
+ + + + diff --git a/static/usage/v8/text/basic/index.md b/static/usage/v8/text/basic/index.md new file mode 100644 index 00000000000..3fe68c18bfa --- /dev/null +++ b/static/usage/v8/text/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/text/basic/javascript.md b/static/usage/v8/text/basic/javascript.md new file mode 100644 index 00000000000..e63da3cacf9 --- /dev/null +++ b/static/usage/v8/text/basic/javascript.md @@ -0,0 +1,21 @@ +```html + +

H1: The quick brown fox jumps over the lazy dog

+ + + +

H2: The quick brown fox jumps over the lazy dog

+ + + +

H3: The quick brown fox jumps over the lazy dog

+ + +

+ + I saw a werewolf with a Chinese menu in his hand. Walking through the + streets of Soho in the rain. He + was looking for a place called Lee Ho Fook's. Gonna get a + big dish of beef chow mein. +

+``` diff --git a/static/usage/v8/text/basic/react.md b/static/usage/v8/text/basic/react.md new file mode 100644 index 00000000000..da8882e3bf5 --- /dev/null +++ b/static/usage/v8/text/basic/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonText, IonIcon } from '@ionic/react'; +import { warning } from 'ionicons/icons'; + +function Example() { + return ( + <> + +

H1: The quick brown fox jumps over the lazy dog

+ + + +

H2: The quick brown fox jumps over the lazy dog

+ + + +

H3: The quick brown fox jumps over the lazy dog

+ + +

+ + + + I saw a werewolf with a Chinese menu in his hand. Walking through the + streets + of Soho in the rain. He + was + looking for a place called Lee Ho Fook's. Gonna get a big dish of beef chow mein. +

+ + ); +} +export default Example; +``` diff --git a/static/usage/v8/text/basic/vue.md b/static/usage/v8/text/basic/vue.md new file mode 100644 index 00000000000..b34cd3d437a --- /dev/null +++ b/static/usage/v8/text/basic/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v8/textarea/autogrow/angular.md b/static/usage/v8/textarea/autogrow/angular.md new file mode 100644 index 00000000000..03de94359b6 --- /dev/null +++ b/static/usage/v8/textarea/autogrow/angular.md @@ -0,0 +1,10 @@ +```html + + + + +``` diff --git a/static/usage/v8/textarea/autogrow/demo.html b/static/usage/v8/textarea/autogrow/demo.html new file mode 100644 index 00000000000..41e7543fd07 --- /dev/null +++ b/static/usage/v8/textarea/autogrow/demo.html @@ -0,0 +1,41 @@ + + + + + + Textarea - Autogrow + + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v8/textarea/autogrow/index.md b/static/usage/v8/textarea/autogrow/index.md new file mode 100644 index 00000000000..9dd79cbd7cd --- /dev/null +++ b/static/usage/v8/textarea/autogrow/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/textarea/autogrow/javascript.md b/static/usage/v8/textarea/autogrow/javascript.md new file mode 100644 index 00000000000..4c2e15028fd --- /dev/null +++ b/static/usage/v8/textarea/autogrow/javascript.md @@ -0,0 +1,10 @@ +```html + + + + +``` diff --git a/static/usage/v8/textarea/autogrow/react.md b/static/usage/v8/textarea/autogrow/react.md new file mode 100644 index 00000000000..28d11b28efc --- /dev/null +++ b/static/usage/v8/textarea/autogrow/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonItem, IonTextarea } from '@ionic/react'; +function Example() { + return ( + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/textarea/autogrow/vue.md b/static/usage/v8/textarea/autogrow/vue.md new file mode 100644 index 00000000000..693814464e8 --- /dev/null +++ b/static/usage/v8/textarea/autogrow/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v8/textarea/basic/angular.md b/static/usage/v8/textarea/basic/angular.md new file mode 100644 index 00000000000..af32fc35b03 --- /dev/null +++ b/static/usage/v8/textarea/basic/angular.md @@ -0,0 +1,13 @@ +```html + + + + + + + + + + + +``` diff --git a/static/usage/v8/textarea/basic/demo.html b/static/usage/v8/textarea/basic/demo.html new file mode 100644 index 00000000000..e93893105d9 --- /dev/null +++ b/static/usage/v8/textarea/basic/demo.html @@ -0,0 +1,38 @@ + + + + + + Textarea - Basic Usage + + + + + + + + + + + +
+ + + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/textarea/basic/index.md b/static/usage/v8/textarea/basic/index.md new file mode 100644 index 00000000000..3070fbea859 --- /dev/null +++ b/static/usage/v8/textarea/basic/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/textarea/basic/javascript.md b/static/usage/v8/textarea/basic/javascript.md new file mode 100644 index 00000000000..5f953f721cb --- /dev/null +++ b/static/usage/v8/textarea/basic/javascript.md @@ -0,0 +1,13 @@ +```html + + + + + + + + + + + +``` diff --git a/static/usage/v8/textarea/basic/react.md b/static/usage/v8/textarea/basic/react.md new file mode 100644 index 00000000000..5d47cf710dd --- /dev/null +++ b/static/usage/v8/textarea/basic/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonTextarea } from '@ionic/react'; +function Example() { + return ( + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/textarea/basic/vue.md b/static/usage/v8/textarea/basic/vue.md new file mode 100644 index 00000000000..8b5c3a00746 --- /dev/null +++ b/static/usage/v8/textarea/basic/vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v8/textarea/clear-on-edit/angular.md b/static/usage/v8/textarea/clear-on-edit/angular.md new file mode 100644 index 00000000000..409362189a3 --- /dev/null +++ b/static/usage/v8/textarea/clear-on-edit/angular.md @@ -0,0 +1,6 @@ +```html + +``` diff --git a/static/usage/v8/textarea/clear-on-edit/demo.html b/static/usage/v8/textarea/clear-on-edit/demo.html new file mode 100644 index 00000000000..e4f9ac6cb46 --- /dev/null +++ b/static/usage/v8/textarea/clear-on-edit/demo.html @@ -0,0 +1,29 @@ + + + + + + Textarea - Clear on Edit + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v8/textarea/clear-on-edit/index.md b/static/usage/v8/textarea/clear-on-edit/index.md new file mode 100644 index 00000000000..cc1e09366e2 --- /dev/null +++ b/static/usage/v8/textarea/clear-on-edit/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/textarea/clear-on-edit/javascript.md b/static/usage/v8/textarea/clear-on-edit/javascript.md new file mode 100644 index 00000000000..1982d982013 --- /dev/null +++ b/static/usage/v8/textarea/clear-on-edit/javascript.md @@ -0,0 +1,6 @@ +```html + +``` diff --git a/static/usage/v8/textarea/clear-on-edit/react.md b/static/usage/v8/textarea/clear-on-edit/react.md new file mode 100644 index 00000000000..62b8b7dcf7b --- /dev/null +++ b/static/usage/v8/textarea/clear-on-edit/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonTextarea } from '@ionic/react'; +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v8/textarea/clear-on-edit/vue.md b/static/usage/v8/textarea/clear-on-edit/vue.md new file mode 100644 index 00000000000..04deb37bf1e --- /dev/null +++ b/static/usage/v8/textarea/clear-on-edit/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v8/textarea/counter/angular/example_component_html.md b/static/usage/v8/textarea/counter/angular/example_component_html.md new file mode 100644 index 00000000000..436babf6fa4 --- /dev/null +++ b/static/usage/v8/textarea/counter/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v8/textarea/counter/angular/example_component_ts.md b/static/usage/v8/textarea/counter/angular/example_component_ts.md new file mode 100644 index 00000000000..2c08dc06fc2 --- /dev/null +++ b/static/usage/v8/textarea/counter/angular/example_component_ts.md @@ -0,0 +1,13 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + customCounterFormatter(inputLength: number, maxLength: number) { + return `${maxLength - inputLength} characters remaining`; + } +} +``` diff --git a/static/usage/v8/textarea/counter/demo.html b/static/usage/v8/textarea/counter/demo.html new file mode 100644 index 00000000000..43ea23ffafb --- /dev/null +++ b/static/usage/v8/textarea/counter/demo.html @@ -0,0 +1,44 @@ + + + + + + Textarea + + + + + + + + + + + +
+ + + +
+ + + + + + diff --git a/static/usage/v8/textarea/counter/index.md b/static/usage/v8/textarea/counter/index.md new file mode 100644 index 00000000000..811a12a70ca --- /dev/null +++ b/static/usage/v8/textarea/counter/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/textarea/counter/javascript.md b/static/usage/v8/textarea/counter/javascript.md new file mode 100644 index 00000000000..179965c25b7 --- /dev/null +++ b/static/usage/v8/textarea/counter/javascript.md @@ -0,0 +1,16 @@ +```html + + + + + +``` diff --git a/static/usage/v8/textarea/counter/react.md b/static/usage/v8/textarea/counter/react.md new file mode 100644 index 00000000000..26ec835498e --- /dev/null +++ b/static/usage/v8/textarea/counter/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonTextarea } from '@ionic/react'; + +function Example() { + return ( + <> + + + `${maxLength - inputLength} characters remaining`} + > + + ); +} +export default Example; +``` diff --git a/static/usage/v8/textarea/counter/vue.md b/static/usage/v8/textarea/counter/vue.md new file mode 100644 index 00000000000..aa45a84b5f6 --- /dev/null +++ b/static/usage/v8/textarea/counter/vue.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v8/textarea/fill/angular.md b/static/usage/v8/textarea/fill/angular.md new file mode 100644 index 00000000000..38bcfa1067d --- /dev/null +++ b/static/usage/v8/textarea/fill/angular.md @@ -0,0 +1,7 @@ +```html + + +
+ + +``` diff --git a/static/usage/v8/textarea/fill/demo.html b/static/usage/v8/textarea/fill/demo.html new file mode 100644 index 00000000000..9048ef77bd5 --- /dev/null +++ b/static/usage/v8/textarea/fill/demo.html @@ -0,0 +1,44 @@ + + + + + + Textarea + + + + + + + + + + + +
+ + + +
+ + + + diff --git a/static/usage/v8/textarea/fill/index.md b/static/usage/v8/textarea/fill/index.md new file mode 100644 index 00000000000..bfc5b54da5d --- /dev/null +++ b/static/usage/v8/textarea/fill/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/textarea/fill/javascript.md b/static/usage/v8/textarea/fill/javascript.md new file mode 100644 index 00000000000..09102160aaa --- /dev/null +++ b/static/usage/v8/textarea/fill/javascript.md @@ -0,0 +1,12 @@ +```html + + +
+ + +``` diff --git a/static/usage/v8/textarea/fill/react.md b/static/usage/v8/textarea/fill/react.md new file mode 100644 index 00000000000..8ddf44ca19f --- /dev/null +++ b/static/usage/v8/textarea/fill/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonTextarea } from '@ionic/react'; +function Example() { + return ( + <> + + +
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/textarea/fill/vue.md b/static/usage/v8/textarea/fill/vue.md new file mode 100644 index 00000000000..24c0f1b1d54 --- /dev/null +++ b/static/usage/v8/textarea/fill/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v8/textarea/helper-error/angular.md b/static/usage/v8/textarea/helper-error/angular.md new file mode 100644 index 00000000000..3095fd27ead --- /dev/null +++ b/static/usage/v8/textarea/helper-error/angular.md @@ -0,0 +1,11 @@ +```html + +``` diff --git a/static/usage/v8/textarea/helper-error/demo.html b/static/usage/v8/textarea/helper-error/demo.html new file mode 100644 index 00000000000..4fb4eba97c1 --- /dev/null +++ b/static/usage/v8/textarea/helper-error/demo.html @@ -0,0 +1,61 @@ + + + + + + Textarea + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v8/textarea/helper-error/index.md b/static/usage/v8/textarea/helper-error/index.md new file mode 100644 index 00000000000..5d4ca92e487 --- /dev/null +++ b/static/usage/v8/textarea/helper-error/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/textarea/helper-error/javascript.md b/static/usage/v8/textarea/helper-error/javascript.md new file mode 100644 index 00000000000..112fdca3a10 --- /dev/null +++ b/static/usage/v8/textarea/helper-error/javascript.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/static/usage/v8/textarea/helper-error/react.md b/static/usage/v8/textarea/helper-error/react.md new file mode 100644 index 00000000000..01d3207dc85 --- /dev/null +++ b/static/usage/v8/textarea/helper-error/react.md @@ -0,0 +1,49 @@ +```tsx +import React, { useState } from 'react'; +import { clsx } from 'clsx'; + +import { IonTextarea } from '@ionic/react'; + +function Example() { + const [isTouched, setIsTouched] = useState(false); + const [isValid, setIsValid] = useState(); + + const validateEmail = (email: string) => { + return email.match( + /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ + ); + }; + + const validate = (ev: Event) => { + const value = (ev.target as HTMLTextAreaElement).value; + + setIsValid(undefined); + + if (value === '') return; + + validateEmail(value) !== null ? setIsValid(true) : setIsValid(false); + }; + + const markTouched = () => { + setIsTouched(true); + }; + + return ( + validate(event)} + onIonBlur={() => markTouched()} + > + ); +} +export default Example; +``` diff --git a/static/usage/v8/textarea/helper-error/vue.md b/static/usage/v8/textarea/helper-error/vue.md new file mode 100644 index 00000000000..f0fe51ebee8 --- /dev/null +++ b/static/usage/v8/textarea/helper-error/vue.md @@ -0,0 +1,47 @@ +```html + + + +``` diff --git a/static/usage/v8/textarea/label-placement/angular.md b/static/usage/v8/textarea/label-placement/angular.md new file mode 100644 index 00000000000..ef14c919fb8 --- /dev/null +++ b/static/usage/v8/textarea/label-placement/angular.md @@ -0,0 +1,16 @@ +```html + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/textarea/label-placement/demo.html b/static/usage/v8/textarea/label-placement/demo.html new file mode 100644 index 00000000000..5fe8572bdb5 --- /dev/null +++ b/static/usage/v8/textarea/label-placement/demo.html @@ -0,0 +1,41 @@ + + + + + + Textarea + + + + + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v8/textarea/label-placement/index.md b/static/usage/v8/textarea/label-placement/index.md new file mode 100644 index 00000000000..8ced2454c74 --- /dev/null +++ b/static/usage/v8/textarea/label-placement/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/textarea/label-placement/javascript.md b/static/usage/v8/textarea/label-placement/javascript.md new file mode 100644 index 00000000000..ce524931d10 --- /dev/null +++ b/static/usage/v8/textarea/label-placement/javascript.md @@ -0,0 +1,16 @@ +```html + + + + + + + + + + + + + + +``` diff --git a/static/usage/v8/textarea/label-placement/react.md b/static/usage/v8/textarea/label-placement/react.md new file mode 100644 index 00000000000..cf2b06229cf --- /dev/null +++ b/static/usage/v8/textarea/label-placement/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonTextarea, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/textarea/label-placement/vue.md b/static/usage/v8/textarea/label-placement/vue.md new file mode 100644 index 00000000000..fa6bf5ec893 --- /dev/null +++ b/static/usage/v8/textarea/label-placement/vue.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v8/textarea/label-slot/angular.md b/static/usage/v8/textarea/label-slot/angular.md new file mode 100644 index 00000000000..9c8e09ec88a --- /dev/null +++ b/static/usage/v8/textarea/label-slot/angular.md @@ -0,0 +1,9 @@ +```html + + + +
Comments (Required)
+ + + +``` diff --git a/static/usage/v8/textarea/label-slot/demo.html b/static/usage/v8/textarea/label-slot/demo.html new file mode 100644 index 00000000000..f71b8af342a --- /dev/null +++ b/static/usage/v8/textarea/label-slot/demo.html @@ -0,0 +1,28 @@ + + + + + + textarea + + + + + + + + + +
+ + + +
Comments (Required)
+ + + +
+ + + + diff --git a/static/usage/v8/textarea/label-slot/index.md b/static/usage/v8/textarea/label-slot/index.md new file mode 100644 index 00000000000..a9f9136612b --- /dev/null +++ b/static/usage/v8/textarea/label-slot/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/textarea/label-slot/javascript.md b/static/usage/v8/textarea/label-slot/javascript.md new file mode 100644 index 00000000000..199978f9352 --- /dev/null +++ b/static/usage/v8/textarea/label-slot/javascript.md @@ -0,0 +1,9 @@ +```html + + + +
Comments (Required)
+ + + +``` diff --git a/static/usage/v8/textarea/label-slot/react.md b/static/usage/v8/textarea/label-slot/react.md new file mode 100644 index 00000000000..4c58fdf2a7b --- /dev/null +++ b/static/usage/v8/textarea/label-slot/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonTextarea, IonItem, IonList, IonText } from '@ionic/react'; + +function Example() { + return ( + + + +
+ Comments (Required) +
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/textarea/label-slot/vue.md b/static/usage/v8/textarea/label-slot/vue.md new file mode 100644 index 00000000000..0c5d90db33c --- /dev/null +++ b/static/usage/v8/textarea/label-slot/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v8/textarea/migration/index.md b/static/usage/v8/textarea/migration/index.md new file mode 100644 index 00000000000..aa820c53b48 --- /dev/null +++ b/static/usage/v8/textarea/migration/index.md @@ -0,0 +1,248 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +````mdx-code-block + + + +```html + + + + + Label: + + + + + + + + + + + + + + Label: + + + + + + + + + + + + + Label: + +
Enter text
+
Please enter text
+ + + + + + + +``` + + + +```html + + + + + Label: + + + + + + + + + + + + + + Label: + + + + + + + + + + + + + Label: + +
Enter text
+
Please enter text
+ + + + + + + +``` + + + +```tsx +{/* Label and Label Position */} + +{/* Before */} + + Label: + + + +{/* After */} + + + + + +{/* Fill */} + +{/* Before */} + + Label: + + + +{/* After */} + +{/* Textareas using `fill` should not be placed in IonItem */} + + +{/* Textarea-specific features on IonItem */} + +{/* Before */} + + Label: + +
Enter text
+
Please enter text
+ + +{/* After */} + +{/* + Metadata such as counters and helper text should not + be used when a textarea is in an item/list. If you need to + provide more context on a textarea, consider using an IonNote + underneath the IonList. +*/} + + +``` + + + +```html + + + + + Label: + + + + + + + + + + + + + + Label: + + + + + + + + + + + + + Label: + +
Enter text
+
Please enter text
+ + + + + + + +``` + + +```` diff --git a/static/usage/v8/textarea/no-visible-label/angular.md b/static/usage/v8/textarea/no-visible-label/angular.md new file mode 100644 index 00000000000..2f4baaa7511 --- /dev/null +++ b/static/usage/v8/textarea/no-visible-label/angular.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v8/textarea/no-visible-label/demo.html b/static/usage/v8/textarea/no-visible-label/demo.html new file mode 100644 index 00000000000..3d4e4f4a764 --- /dev/null +++ b/static/usage/v8/textarea/no-visible-label/demo.html @@ -0,0 +1,26 @@ + + + + + + textarea + + + + + + + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v8/textarea/no-visible-label/index.md b/static/usage/v8/textarea/no-visible-label/index.md new file mode 100644 index 00000000000..411fc52d502 --- /dev/null +++ b/static/usage/v8/textarea/no-visible-label/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/textarea/no-visible-label/javascript.md b/static/usage/v8/textarea/no-visible-label/javascript.md new file mode 100644 index 00000000000..2f4baaa7511 --- /dev/null +++ b/static/usage/v8/textarea/no-visible-label/javascript.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v8/textarea/no-visible-label/react.md b/static/usage/v8/textarea/no-visible-label/react.md new file mode 100644 index 00000000000..c024d0fee66 --- /dev/null +++ b/static/usage/v8/textarea/no-visible-label/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonTextarea, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/textarea/no-visible-label/vue.md b/static/usage/v8/textarea/no-visible-label/vue.md new file mode 100644 index 00000000000..fc77027d770 --- /dev/null +++ b/static/usage/v8/textarea/no-visible-label/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v8/textarea/theming/angular/example_component_css.md b/static/usage/v8/textarea/theming/angular/example_component_css.md new file mode 100644 index 00000000000..37a2f874cdc --- /dev/null +++ b/static/usage/v8/textarea/theming/angular/example_component_css.md @@ -0,0 +1,10 @@ +```css +ion-textarea.custom { + --background: #373737; + --color: #fff; + --padding-end: 10px; + --padding-start: 10px; + --placeholder-color: #ddd; + --placeholder-opacity: 0.8; +} +``` diff --git a/static/usage/v8/textarea/theming/angular/example_component_html.md b/static/usage/v8/textarea/theming/angular/example_component_html.md new file mode 100644 index 00000000000..d5237b2cc36 --- /dev/null +++ b/static/usage/v8/textarea/theming/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + +``` diff --git a/static/usage/v8/textarea/theming/angular/global_css.md b/static/usage/v8/textarea/theming/angular/global_css.md new file mode 100644 index 00000000000..c9c9c107cc6 --- /dev/null +++ b/static/usage/v8/textarea/theming/angular/global_css.md @@ -0,0 +1,14 @@ +```css +/** + * Since we are styling elements inside of ion-textarea + * we need to move this CSS to a global stylesheet. Otherwise, + * Angular components with encapsulation enabled will add + * scoped style attributes to these selectors. + */ +ion-textarea.custom.ios .textarea-bottom .helper-text, +ion-textarea.custom.ios .textarea-bottom .counter, +ion-textarea.custom.md .textarea-bottom .helper-text, +ion-textarea.custom.md .textarea-bottom .counter { + color: var(--ion-color-primary); +} +``` diff --git a/static/usage/v8/textarea/theming/demo.html b/static/usage/v8/textarea/theming/demo.html new file mode 100644 index 00000000000..4cab52e4e47 --- /dev/null +++ b/static/usage/v8/textarea/theming/demo.html @@ -0,0 +1,50 @@ + + + + + + Textarea - Theming + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v8/textarea/theming/index.md b/static/usage/v8/textarea/theming/index.md new file mode 100644 index 00000000000..3a50362dcee --- /dev/null +++ b/static/usage/v8/textarea/theming/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/textarea/theming/javascript.md b/static/usage/v8/textarea/theming/javascript.md new file mode 100644 index 00000000000..7e2da7069e1 --- /dev/null +++ b/static/usage/v8/textarea/theming/javascript.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v8/textarea/theming/react/main_css.md b/static/usage/v8/textarea/theming/react/main_css.md new file mode 100644 index 00000000000..68e9b031149 --- /dev/null +++ b/static/usage/v8/textarea/theming/react/main_css.md @@ -0,0 +1,17 @@ +```css +ion-textarea.custom { + --background: #373737; + --color: #fff; + --padding-end: 10px; + --padding-start: 10px; + --placeholder-color: #ddd; + --placeholder-opacity: 0.8; +} + +ion-textarea.custom.ios .textarea-bottom .helper-text, +ion-textarea.custom.ios .textarea-bottom .counter, +ion-textarea.custom.md .textarea-bottom .helper-text, +ion-textarea.custom.md .textarea-bottom .counter { + color: var(--ion-color-primary); +} +``` diff --git a/static/usage/v8/textarea/theming/react/main_tsx.md b/static/usage/v8/textarea/theming/react/main_tsx.md new file mode 100644 index 00000000000..f0ca368dff6 --- /dev/null +++ b/static/usage/v8/textarea/theming/react/main_tsx.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonTextarea } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v8/textarea/theming/vue.md b/static/usage/v8/textarea/theming/vue.md new file mode 100644 index 00000000000..8af2efe5c45 --- /dev/null +++ b/static/usage/v8/textarea/theming/vue.md @@ -0,0 +1,39 @@ +```html + + + + + +``` diff --git a/static/usage/v8/theming/automatic-dark-mode/angular/example_component_html.md b/static/usage/v8/theming/automatic-dark-mode/angular/example_component_html.md new file mode 100644 index 00000000000..418eddfc30f --- /dev/null +++ b/static/usage/v8/theming/automatic-dark-mode/angular/example_component_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v8/theming/automatic-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/automatic-dark-mode/angular/example_component_ts.md new file mode 100644 index 00000000000..add5097b954 --- /dev/null +++ b/static/usage/v8/theming/automatic-dark-mode/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent implements OnInit { + ngOnInit() { + // Use matchMedia to check the user preference + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + + this.toggleDarkTheme(prefersDark.matches); + + // Listen for changes to the prefers-color-scheme media query + prefersDark.addEventListener('change', (mediaQuery) => this.toggleDarkTheme(mediaQuery.matches)); + } + + // Add or remove the "dark" class on the document body + toggleDarkTheme(shouldAdd) { + document.body.classList.toggle('dark', shouldAdd); + } +} +``` diff --git a/static/usage/v8/theming/automatic-dark-mode/angular/global_css.md b/static/usage/v8/theming/automatic-dark-mode/angular/global_css.md new file mode 100644 index 00000000000..e26327f896f --- /dev/null +++ b/static/usage/v8/theming/automatic-dark-mode/angular/global_css.md @@ -0,0 +1,25 @@ +```css +/* + * Optional CSS + * ----------------------------------- + */ + +/* This sets a different background and item background in light mode on ios */ +.ios body { + --ion-background-color: #f2f2f6; + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This sets a different background and item background in light mode on md */ +.md body { + --ion-background-color: #f9f9f9; + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This is added for the flashing that happens when toggling between themes */ +ion-item { + --transition: none; +} +``` diff --git a/static/usage/v8/theming/automatic-dark-mode/demo.html b/static/usage/v8/theming/automatic-dark-mode/demo.html new file mode 100644 index 00000000000..17acbcf3fe6 --- /dev/null +++ b/static/usage/v8/theming/automatic-dark-mode/demo.html @@ -0,0 +1,104 @@ + + + + + + Theming + + + + + + + + + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + + + + + diff --git a/static/usage/v8/theming/automatic-dark-mode/index.md b/static/usage/v8/theming/automatic-dark-mode/index.md new file mode 100644 index 00000000000..6e6b490de6f --- /dev/null +++ b/static/usage/v8/theming/automatic-dark-mode/index.md @@ -0,0 +1,50 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + +import variables_css from './theme/variables_css.md'; + + diff --git a/static/usage/v8/theming/automatic-dark-mode/javascript.md b/static/usage/v8/theming/automatic-dark-mode/javascript.md new file mode 100644 index 00000000000..0300924c4e0 --- /dev/null +++ b/static/usage/v8/theming/automatic-dark-mode/javascript.md @@ -0,0 +1,86 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + + +``` diff --git a/static/usage/v8/theming/automatic-dark-mode/react/main_css.md b/static/usage/v8/theming/automatic-dark-mode/react/main_css.md new file mode 100644 index 00000000000..e26327f896f --- /dev/null +++ b/static/usage/v8/theming/automatic-dark-mode/react/main_css.md @@ -0,0 +1,25 @@ +```css +/* + * Optional CSS + * ----------------------------------- + */ + +/* This sets a different background and item background in light mode on ios */ +.ios body { + --ion-background-color: #f2f2f6; + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This sets a different background and item background in light mode on md */ +.md body { + --ion-background-color: #f9f9f9; + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This is added for the flashing that happens when toggling between themes */ +ion-item { + --transition: none; +} +``` diff --git a/static/usage/v8/theming/automatic-dark-mode/react/main_tsx.md b/static/usage/v8/theming/automatic-dark-mode/react/main_tsx.md new file mode 100644 index 00000000000..dc92e1ad1cf --- /dev/null +++ b/static/usage/v8/theming/automatic-dark-mode/react/main_tsx.md @@ -0,0 +1,93 @@ +```tsx +import React, { useEffect } from 'react'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/react'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + // Add or remove the "dark" class on the document body + const toggleDarkTheme = (shouldAdd: boolean) => { + document.body.classList.toggle('dark', shouldAdd); + }; + + useEffect(() => { + // Use matchMedia to check the user preference + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + + toggleDarkTheme(prefersDark.matches); + + // Listen for changes to the prefers-color-scheme media query + prefersDark.addEventListener('change', (mediaQuery) => toggleDarkTheme(mediaQuery.matches)); + }, []); + + return ( + <> + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + + True Tone + + + + + + + Night Shift + + 9:00 PM to 8:00 AM + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/theming/automatic-dark-mode/theme/variables_css.md b/static/usage/v8/theming/automatic-dark-mode/theme/variables_css.md new file mode 100644 index 00000000000..72a10e6d263 --- /dev/null +++ b/static/usage/v8/theming/automatic-dark-mode/theme/variables_css.md @@ -0,0 +1,160 @@ +```css +/* Ionic Variables and Theming. For more info, please see: +http://ionicframework.com/docs/theming/ */ + +/* + * Dark Colors + * ------------------------------------------- + */ + +body.dark { + --ion-color-primary: #428cff; + --ion-color-primary-rgb: 66, 140, 255; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #3a7be0; + --ion-color-primary-tint: #5598ff; + + --ion-color-secondary: #50c8ff; + --ion-color-secondary-rgb: 80, 200, 255; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #46b0e0; + --ion-color-secondary-tint: #62ceff; + + --ion-color-tertiary: #6a64ff; + --ion-color-tertiary-rgb: 106, 100, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #5d58e0; + --ion-color-tertiary-tint: #7974ff; + + --ion-color-success: #2fdf75; + --ion-color-success-rgb: 47, 223, 117; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #29c467; + --ion-color-success-tint: #44e283; + + --ion-color-warning: #ffd534; + --ion-color-warning-rgb: 255, 213, 52; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0bb2e; + --ion-color-warning-tint: #ffd948; + + --ion-color-danger: #ff4961; + --ion-color-danger-rgb: 255, 73, 97; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #e04055; + --ion-color-danger-tint: #ff5b71; + + --ion-color-dark: #f4f5f8; + --ion-color-dark-rgb: 244, 245, 248; + --ion-color-dark-contrast: #000000; + --ion-color-dark-contrast-rgb: 0, 0, 0; + --ion-color-dark-shade: #d7d8da; + --ion-color-dark-tint: #f5f6f9; + + --ion-color-medium: #989aa2; + --ion-color-medium-rgb: 152, 154, 162; + --ion-color-medium-contrast: #000000; + --ion-color-medium-contrast-rgb: 0, 0, 0; + --ion-color-medium-shade: #86888f; + --ion-color-medium-tint: #a2a4ab; + + --ion-color-light: #222428; + --ion-color-light-rgb: 34, 36, 40; + --ion-color-light-contrast: #ffffff; + --ion-color-light-contrast-rgb: 255, 255, 255; + --ion-color-light-shade: #1e2023; + --ion-color-light-tint: #383a3e; +} + +/* + * iOS Dark Theme + * ------------------------------------------- + */ + +.ios body.dark { + --ion-background-color: #000000; + --ion-background-color-rgb: 0, 0, 0; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-color-step-50: #0d0d0d; + --ion-color-step-100: #1a1a1a; + --ion-color-step-150: #262626; + --ion-color-step-200: #333333; + --ion-color-step-250: #404040; + --ion-color-step-300: #4d4d4d; + --ion-color-step-350: #595959; + --ion-color-step-400: #666666; + --ion-color-step-450: #737373; + --ion-color-step-500: #808080; + --ion-color-step-550: #8c8c8c; + --ion-color-step-600: #999999; + --ion-color-step-650: #a6a6a6; + --ion-color-step-700: #b3b3b3; + --ion-color-step-750: #bfbfbf; + --ion-color-step-800: #cccccc; + --ion-color-step-850: #d9d9d9; + --ion-color-step-900: #e6e6e6; + --ion-color-step-950: #f2f2f2; + + --ion-item-background: #1c1c1d; + + --ion-card-background: #1c1c1d; +} + +.ios body.dark ion-modal { + --ion-background-color: var(--ion-color-step-100); + --ion-toolbar-background: var(--ion-color-step-150); + --ion-toolbar-border-color: var(--ion-color-step-250); +} + +/* + * Material Design Dark Theme + * ------------------------------------------- + */ + +.md body.dark { + --ion-background-color: #121212; + --ion-background-color-rgb: 18, 18, 18; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-border-color: #222222; + + --ion-color-step-50: #1e1e1e; + --ion-color-step-100: #2a2a2a; + --ion-color-step-150: #363636; + --ion-color-step-200: #414141; + --ion-color-step-250: #4d4d4d; + --ion-color-step-300: #595959; + --ion-color-step-350: #656565; + --ion-color-step-400: #717171; + --ion-color-step-450: #7d7d7d; + --ion-color-step-500: #898989; + --ion-color-step-550: #949494; + --ion-color-step-600: #a0a0a0; + --ion-color-step-650: #acacac; + --ion-color-step-700: #b8b8b8; + --ion-color-step-750: #c4c4c4; + --ion-color-step-800: #d0d0d0; + --ion-color-step-850: #dbdbdb; + --ion-color-step-900: #e7e7e7; + --ion-color-step-950: #f3f3f3; + + --ion-item-background: #1e1e1e; + + --ion-toolbar-background: #1f1f1f; + + --ion-tab-bar-background: #1f1f1f; + + --ion-card-background: #1e1e1e; +} +``` diff --git a/static/usage/v8/theming/automatic-dark-mode/vue.md b/static/usage/v8/theming/automatic-dark-mode/vue.md new file mode 100644 index 00000000000..45dd5f8d9a5 --- /dev/null +++ b/static/usage/v8/theming/automatic-dark-mode/vue.md @@ -0,0 +1,129 @@ +```html + + + + + +``` diff --git a/static/usage/v8/theming/manual-dark-mode/angular/example_component_html.md b/static/usage/v8/theming/manual-dark-mode/angular/example_component_html.md new file mode 100644 index 00000000000..855a77e99a8 --- /dev/null +++ b/static/usage/v8/theming/manual-dark-mode/angular/example_component_html.md @@ -0,0 +1,53 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + + Dark Mode + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v8/theming/manual-dark-mode/angular/example_component_ts.md b/static/usage/v8/theming/manual-dark-mode/angular/example_component_ts.md new file mode 100644 index 00000000000..ad697b08012 --- /dev/null +++ b/static/usage/v8/theming/manual-dark-mode/angular/example_component_ts.md @@ -0,0 +1,39 @@ +```ts +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent implements OnInit { + themeToggle = false; + + ngOnInit() { + // Use matchMedia to check the user preference + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + + // Initialize the dark theme based on the initial + // value of the prefers-color-scheme media query + this.initializeDarkTheme(prefersDark.matches); + + // Listen for changes to the prefers-color-scheme media query + prefersDark.addEventListener('change', (mediaQuery) => this.initializeDarkTheme(mediaQuery.matches)); + } + + // Check/uncheck the toggle and update the theme based on isDark + initializeDarkTheme(isDark) { + this.themeToggle = isDark; + this.toggleDarkTheme(isDark); + } + + // Listen for the toggle check/uncheck to toggle the dark theme + toggleChange(ev) { + this.toggleDarkTheme(ev.detail.checked); + } + + // Add or remove the "dark" class on the document body + toggleDarkTheme(shouldAdd) { + document.body.classList.toggle('dark', shouldAdd); + } +} +``` diff --git a/static/usage/v8/theming/manual-dark-mode/angular/global_css.md b/static/usage/v8/theming/manual-dark-mode/angular/global_css.md new file mode 100644 index 00000000000..e26327f896f --- /dev/null +++ b/static/usage/v8/theming/manual-dark-mode/angular/global_css.md @@ -0,0 +1,25 @@ +```css +/* + * Optional CSS + * ----------------------------------- + */ + +/* This sets a different background and item background in light mode on ios */ +.ios body { + --ion-background-color: #f2f2f6; + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This sets a different background and item background in light mode on md */ +.md body { + --ion-background-color: #f9f9f9; + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This is added for the flashing that happens when toggling between themes */ +ion-item { + --transition: none; +} +``` diff --git a/static/usage/v8/theming/manual-dark-mode/demo.html b/static/usage/v8/theming/manual-dark-mode/demo.html new file mode 100644 index 00000000000..c4d502db12d --- /dev/null +++ b/static/usage/v8/theming/manual-dark-mode/demo.html @@ -0,0 +1,136 @@ + + + + + + Theming + + + + + + + + + + + + + + Display + + + + + + + + + + Appearance + + + Dark Mode + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + + + + + diff --git a/static/usage/v8/theming/manual-dark-mode/index.md b/static/usage/v8/theming/manual-dark-mode/index.md new file mode 100644 index 00000000000..2022b7e8952 --- /dev/null +++ b/static/usage/v8/theming/manual-dark-mode/index.md @@ -0,0 +1,50 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + +import variables_css from './theme/variables_css.md'; + + diff --git a/static/usage/v8/theming/manual-dark-mode/javascript.md b/static/usage/v8/theming/manual-dark-mode/javascript.md new file mode 100644 index 00000000000..33173b9eea3 --- /dev/null +++ b/static/usage/v8/theming/manual-dark-mode/javascript.md @@ -0,0 +1,113 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + + Dark Mode + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + + +``` diff --git a/static/usage/v8/theming/manual-dark-mode/react/main_css.md b/static/usage/v8/theming/manual-dark-mode/react/main_css.md new file mode 100644 index 00000000000..e26327f896f --- /dev/null +++ b/static/usage/v8/theming/manual-dark-mode/react/main_css.md @@ -0,0 +1,25 @@ +```css +/* + * Optional CSS + * ----------------------------------- + */ + +/* This sets a different background and item background in light mode on ios */ +.ios body { + --ion-background-color: #f2f2f6; + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This sets a different background and item background in light mode on md */ +.md body { + --ion-background-color: #f9f9f9; + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This is added for the flashing that happens when toggling between themes */ +ion-item { + --transition: none; +} +``` diff --git a/static/usage/v8/theming/manual-dark-mode/react/main_tsx.md b/static/usage/v8/theming/manual-dark-mode/react/main_tsx.md new file mode 100644 index 00000000000..70938e6a804 --- /dev/null +++ b/static/usage/v8/theming/manual-dark-mode/react/main_tsx.md @@ -0,0 +1,117 @@ +```tsx +import React, { useEffect, useState } from 'react'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/react'; +import type { ToggleCustomEvent } from '@ionic/react'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + const [themeToggle, setThemeToggle] = useState(false); + + // Listen for the toggle check/uncheck to toggle the dark theme + const toggleChange = (ev: ToggleCustomEvent) => { + toggleDarkTheme(ev.detail.checked); + }; + + // Add or remove the "dark" class on the document body + const toggleDarkTheme = (shouldAdd: boolean) => { + document.body.classList.toggle('dark', shouldAdd); + }; + + // Check/uncheck the toggle and update the theme based on isDark + const initializeDarkTheme = (isDark: boolean) => { + setThemeToggle(isDark); + toggleDarkTheme(isDark); + }; + + useEffect(() => { + // Use matchMedia to check the user preference + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + + // Initialize the dark theme based on the initial + // value of the prefers-color-scheme media query + initializeDarkTheme(prefersDark.matches); + + // Listen for changes to the prefers-color-scheme media query + prefersDark.addEventListener('change', (mediaQuery) => initializeDarkTheme(mediaQuery.matches)); + }, []); + + return ( + <> + + + + + + Display + + + + + + + + + + Appearance + + + + Dark Mode + + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + + True Tone + + + + + + + Night Shift + + 9:00 PM to 8:00 AM + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/theming/manual-dark-mode/theme/variables_css.md b/static/usage/v8/theming/manual-dark-mode/theme/variables_css.md new file mode 100644 index 00000000000..72a10e6d263 --- /dev/null +++ b/static/usage/v8/theming/manual-dark-mode/theme/variables_css.md @@ -0,0 +1,160 @@ +```css +/* Ionic Variables and Theming. For more info, please see: +http://ionicframework.com/docs/theming/ */ + +/* + * Dark Colors + * ------------------------------------------- + */ + +body.dark { + --ion-color-primary: #428cff; + --ion-color-primary-rgb: 66, 140, 255; + --ion-color-primary-contrast: #ffffff; + --ion-color-primary-contrast-rgb: 255, 255, 255; + --ion-color-primary-shade: #3a7be0; + --ion-color-primary-tint: #5598ff; + + --ion-color-secondary: #50c8ff; + --ion-color-secondary-rgb: 80, 200, 255; + --ion-color-secondary-contrast: #ffffff; + --ion-color-secondary-contrast-rgb: 255, 255, 255; + --ion-color-secondary-shade: #46b0e0; + --ion-color-secondary-tint: #62ceff; + + --ion-color-tertiary: #6a64ff; + --ion-color-tertiary-rgb: 106, 100, 255; + --ion-color-tertiary-contrast: #ffffff; + --ion-color-tertiary-contrast-rgb: 255, 255, 255; + --ion-color-tertiary-shade: #5d58e0; + --ion-color-tertiary-tint: #7974ff; + + --ion-color-success: #2fdf75; + --ion-color-success-rgb: 47, 223, 117; + --ion-color-success-contrast: #000000; + --ion-color-success-contrast-rgb: 0, 0, 0; + --ion-color-success-shade: #29c467; + --ion-color-success-tint: #44e283; + + --ion-color-warning: #ffd534; + --ion-color-warning-rgb: 255, 213, 52; + --ion-color-warning-contrast: #000000; + --ion-color-warning-contrast-rgb: 0, 0, 0; + --ion-color-warning-shade: #e0bb2e; + --ion-color-warning-tint: #ffd948; + + --ion-color-danger: #ff4961; + --ion-color-danger-rgb: 255, 73, 97; + --ion-color-danger-contrast: #ffffff; + --ion-color-danger-contrast-rgb: 255, 255, 255; + --ion-color-danger-shade: #e04055; + --ion-color-danger-tint: #ff5b71; + + --ion-color-dark: #f4f5f8; + --ion-color-dark-rgb: 244, 245, 248; + --ion-color-dark-contrast: #000000; + --ion-color-dark-contrast-rgb: 0, 0, 0; + --ion-color-dark-shade: #d7d8da; + --ion-color-dark-tint: #f5f6f9; + + --ion-color-medium: #989aa2; + --ion-color-medium-rgb: 152, 154, 162; + --ion-color-medium-contrast: #000000; + --ion-color-medium-contrast-rgb: 0, 0, 0; + --ion-color-medium-shade: #86888f; + --ion-color-medium-tint: #a2a4ab; + + --ion-color-light: #222428; + --ion-color-light-rgb: 34, 36, 40; + --ion-color-light-contrast: #ffffff; + --ion-color-light-contrast-rgb: 255, 255, 255; + --ion-color-light-shade: #1e2023; + --ion-color-light-tint: #383a3e; +} + +/* + * iOS Dark Theme + * ------------------------------------------- + */ + +.ios body.dark { + --ion-background-color: #000000; + --ion-background-color-rgb: 0, 0, 0; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-color-step-50: #0d0d0d; + --ion-color-step-100: #1a1a1a; + --ion-color-step-150: #262626; + --ion-color-step-200: #333333; + --ion-color-step-250: #404040; + --ion-color-step-300: #4d4d4d; + --ion-color-step-350: #595959; + --ion-color-step-400: #666666; + --ion-color-step-450: #737373; + --ion-color-step-500: #808080; + --ion-color-step-550: #8c8c8c; + --ion-color-step-600: #999999; + --ion-color-step-650: #a6a6a6; + --ion-color-step-700: #b3b3b3; + --ion-color-step-750: #bfbfbf; + --ion-color-step-800: #cccccc; + --ion-color-step-850: #d9d9d9; + --ion-color-step-900: #e6e6e6; + --ion-color-step-950: #f2f2f2; + + --ion-item-background: #1c1c1d; + + --ion-card-background: #1c1c1d; +} + +.ios body.dark ion-modal { + --ion-background-color: var(--ion-color-step-100); + --ion-toolbar-background: var(--ion-color-step-150); + --ion-toolbar-border-color: var(--ion-color-step-250); +} + +/* + * Material Design Dark Theme + * ------------------------------------------- + */ + +.md body.dark { + --ion-background-color: #121212; + --ion-background-color-rgb: 18, 18, 18; + + --ion-text-color: #ffffff; + --ion-text-color-rgb: 255, 255, 255; + + --ion-border-color: #222222; + + --ion-color-step-50: #1e1e1e; + --ion-color-step-100: #2a2a2a; + --ion-color-step-150: #363636; + --ion-color-step-200: #414141; + --ion-color-step-250: #4d4d4d; + --ion-color-step-300: #595959; + --ion-color-step-350: #656565; + --ion-color-step-400: #717171; + --ion-color-step-450: #7d7d7d; + --ion-color-step-500: #898989; + --ion-color-step-550: #949494; + --ion-color-step-600: #a0a0a0; + --ion-color-step-650: #acacac; + --ion-color-step-700: #b8b8b8; + --ion-color-step-750: #c4c4c4; + --ion-color-step-800: #d0d0d0; + --ion-color-step-850: #dbdbdb; + --ion-color-step-900: #e7e7e7; + --ion-color-step-950: #f3f3f3; + + --ion-item-background: #1e1e1e; + + --ion-toolbar-background: #1f1f1f; + + --ion-tab-bar-background: #1f1f1f; + + --ion-card-background: #1e1e1e; +} +``` diff --git a/static/usage/v8/theming/manual-dark-mode/vue.md b/static/usage/v8/theming/manual-dark-mode/vue.md new file mode 100644 index 00000000000..2dfda3aa30c --- /dev/null +++ b/static/usage/v8/theming/manual-dark-mode/vue.md @@ -0,0 +1,162 @@ +```html + + + + + +``` diff --git a/static/usage/v8/thumbnail/basic/angular.md b/static/usage/v8/thumbnail/basic/angular.md new file mode 100644 index 00000000000..119cfb8ee9c --- /dev/null +++ b/static/usage/v8/thumbnail/basic/angular.md @@ -0,0 +1,5 @@ +```html + + Silhouette of mountains + +``` diff --git a/static/usage/v8/thumbnail/basic/demo.html b/static/usage/v8/thumbnail/basic/demo.html new file mode 100644 index 00000000000..abf0426465d --- /dev/null +++ b/static/usage/v8/thumbnail/basic/demo.html @@ -0,0 +1,24 @@ + + + + + + Thumbnail + + + + + + + + + +
+ + Silhouette of mountains + +
+ + + + diff --git a/static/usage/v8/thumbnail/basic/index.md b/static/usage/v8/thumbnail/basic/index.md new file mode 100644 index 00000000000..60e254955c8 --- /dev/null +++ b/static/usage/v8/thumbnail/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/thumbnail/basic/javascript.md b/static/usage/v8/thumbnail/basic/javascript.md new file mode 100644 index 00000000000..119cfb8ee9c --- /dev/null +++ b/static/usage/v8/thumbnail/basic/javascript.md @@ -0,0 +1,5 @@ +```html + + Silhouette of mountains + +``` diff --git a/static/usage/v8/thumbnail/basic/react.md b/static/usage/v8/thumbnail/basic/react.md new file mode 100644 index 00000000000..3813690a7a4 --- /dev/null +++ b/static/usage/v8/thumbnail/basic/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonThumbnail } from '@ionic/react'; + +function Example() { + return ( + <> + + Silhouette of mountains + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/thumbnail/basic/vue.md b/static/usage/v8/thumbnail/basic/vue.md new file mode 100644 index 00000000000..74afde558d4 --- /dev/null +++ b/static/usage/v8/thumbnail/basic/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v8/thumbnail/item/angular.md b/static/usage/v8/thumbnail/item/angular.md new file mode 100644 index 00000000000..a83cb82e78c --- /dev/null +++ b/static/usage/v8/thumbnail/item/angular.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of mountains + + Item Thumbnail + +``` diff --git a/static/usage/v8/thumbnail/item/demo.html b/static/usage/v8/thumbnail/item/demo.html new file mode 100644 index 00000000000..18bd15a9c8c --- /dev/null +++ b/static/usage/v8/thumbnail/item/demo.html @@ -0,0 +1,27 @@ + + + + + + Thumbnail + + + + + + + + + +
+ + + Silhouette of mountains + + Item Thumbnail + +
+ + + + diff --git a/static/usage/v8/thumbnail/item/index.md b/static/usage/v8/thumbnail/item/index.md new file mode 100644 index 00000000000..89a2a19fb8c --- /dev/null +++ b/static/usage/v8/thumbnail/item/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/thumbnail/item/javascript.md b/static/usage/v8/thumbnail/item/javascript.md new file mode 100644 index 00000000000..a83cb82e78c --- /dev/null +++ b/static/usage/v8/thumbnail/item/javascript.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of mountains + + Item Thumbnail + +``` diff --git a/static/usage/v8/thumbnail/item/react.md b/static/usage/v8/thumbnail/item/react.md new file mode 100644 index 00000000000..29630ebf819 --- /dev/null +++ b/static/usage/v8/thumbnail/item/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonThumbnail } from '@ionic/react'; + +function Example() { + return ( + <> + + + Silhouette of mountains + + Item Thumbnail + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/thumbnail/item/vue.md b/static/usage/v8/thumbnail/item/vue.md new file mode 100644 index 00000000000..4e688f05030 --- /dev/null +++ b/static/usage/v8/thumbnail/item/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/thumbnail/theming/css-properties/angular/example_component_css.md b/static/usage/v8/thumbnail/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..74742dfe9f0 --- /dev/null +++ b/static/usage/v8/thumbnail/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-thumbnail { + --size: 140px; + --border-radius: 14px; +} +``` diff --git a/static/usage/v8/thumbnail/theming/css-properties/angular/example_component_html.md b/static/usage/v8/thumbnail/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..119cfb8ee9c --- /dev/null +++ b/static/usage/v8/thumbnail/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Silhouette of mountains + +``` diff --git a/static/usage/v8/thumbnail/theming/css-properties/demo.html b/static/usage/v8/thumbnail/theming/css-properties/demo.html new file mode 100644 index 00000000000..9bcfbf82451 --- /dev/null +++ b/static/usage/v8/thumbnail/theming/css-properties/demo.html @@ -0,0 +1,31 @@ + + + + + + Thumbnail + + + + + + + + + + + +
+ + Silhouette of mountains + +
+ + + + diff --git a/static/usage/v8/thumbnail/theming/css-properties/index.md b/static/usage/v8/thumbnail/theming/css-properties/index.md new file mode 100644 index 00000000000..36674cc72c0 --- /dev/null +++ b/static/usage/v8/thumbnail/theming/css-properties/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/thumbnail/theming/css-properties/javascript.md b/static/usage/v8/thumbnail/theming/css-properties/javascript.md new file mode 100644 index 00000000000..6586de083c5 --- /dev/null +++ b/static/usage/v8/thumbnail/theming/css-properties/javascript.md @@ -0,0 +1,12 @@ +```html + + + + Silhouette of mountains + +``` diff --git a/static/usage/v8/thumbnail/theming/css-properties/react/main_css.md b/static/usage/v8/thumbnail/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..74742dfe9f0 --- /dev/null +++ b/static/usage/v8/thumbnail/theming/css-properties/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-thumbnail { + --size: 140px; + --border-radius: 14px; +} +``` diff --git a/static/usage/v8/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/v8/thumbnail/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..1d0f352383f --- /dev/null +++ b/static/usage/v8/thumbnail/theming/css-properties/react/main_tsx.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonThumbnail } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Silhouette of mountains + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/thumbnail/theming/css-properties/vue.md b/static/usage/v8/thumbnail/theming/css-properties/vue.md new file mode 100644 index 00000000000..bd772024b00 --- /dev/null +++ b/static/usage/v8/thumbnail/theming/css-properties/vue.md @@ -0,0 +1,23 @@ +```html + + + + + +``` diff --git a/static/usage/v8/title/basic/angular.md b/static/usage/v8/title/basic/angular.md new file mode 100644 index 00000000000..59a304dbeec --- /dev/null +++ b/static/usage/v8/title/basic/angular.md @@ -0,0 +1,7 @@ +```html + + + Title + + +``` diff --git a/static/usage/v8/title/basic/demo.html b/static/usage/v8/title/basic/demo.html new file mode 100644 index 00000000000..af7b877c435 --- /dev/null +++ b/static/usage/v8/title/basic/demo.html @@ -0,0 +1,22 @@ + + + + + + Title + + + + + + + + + + + Title + + + + + diff --git a/static/usage/v8/title/basic/index.md b/static/usage/v8/title/basic/index.md new file mode 100644 index 00000000000..2ff7e96f44a --- /dev/null +++ b/static/usage/v8/title/basic/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/title/basic/javascript.md b/static/usage/v8/title/basic/javascript.md new file mode 100644 index 00000000000..59a304dbeec --- /dev/null +++ b/static/usage/v8/title/basic/javascript.md @@ -0,0 +1,7 @@ +```html + + + Title + + +``` diff --git a/static/usage/v8/title/basic/react.md b/static/usage/v8/title/basic/react.md new file mode 100644 index 00000000000..efef42efdcc --- /dev/null +++ b/static/usage/v8/title/basic/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonHeader, IonToolbar, IonTitle } from '@ionic/react'; + +function Example() { + return ( + + + Title + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/title/basic/vue.md b/static/usage/v8/title/basic/vue.md new file mode 100644 index 00000000000..99a7ee20224 --- /dev/null +++ b/static/usage/v8/title/basic/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v8/title/collapsible-large-title/basic/angular.md b/static/usage/v8/title/collapsible-large-title/basic/angular.md new file mode 100644 index 00000000000..727d9ba1e3a --- /dev/null +++ b/static/usage/v8/title/collapsible-large-title/basic/angular.md @@ -0,0 +1,39 @@ +```html + + + Title + + + + + + Title + + + +
Scroll the list to see the title collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + +``` diff --git a/static/usage/v8/title/collapsible-large-title/basic/demo.html b/static/usage/v8/title/collapsible-large-title/basic/demo.html new file mode 100644 index 00000000000..1e68e0e9708 --- /dev/null +++ b/static/usage/v8/title/collapsible-large-title/basic/demo.html @@ -0,0 +1,54 @@ + + + + + + Title + + + + + + + + + + + Title + + + + + + Title + + + +
Scroll the list to see the title collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + + + + diff --git a/static/usage/v8/title/collapsible-large-title/basic/index.md b/static/usage/v8/title/collapsible-large-title/basic/index.md new file mode 100644 index 00000000000..8cb9a0cd0a0 --- /dev/null +++ b/static/usage/v8/title/collapsible-large-title/basic/index.md @@ -0,0 +1,16 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/title/collapsible-large-title/basic/javascript.md b/static/usage/v8/title/collapsible-large-title/basic/javascript.md new file mode 100644 index 00000000000..77e7de55212 --- /dev/null +++ b/static/usage/v8/title/collapsible-large-title/basic/javascript.md @@ -0,0 +1,39 @@ +```html + + + Title + + + + + + Title + + + +
Scroll the list to see the title collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + +``` diff --git a/static/usage/v8/title/collapsible-large-title/basic/react.md b/static/usage/v8/title/collapsible-large-title/basic/react.md new file mode 100644 index 00000000000..cdcbdc557b6 --- /dev/null +++ b/static/usage/v8/title/collapsible-large-title/basic/react.md @@ -0,0 +1,49 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/react'; + +function Example() { + return ( + <> + + + Title + + + + + + Title + + + +
Scroll the list to see the title collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/title/collapsible-large-title/basic/vue.md b/static/usage/v8/title/collapsible-large-title/basic/vue.md new file mode 100644 index 00000000000..de922b98bca --- /dev/null +++ b/static/usage/v8/title/collapsible-large-title/basic/vue.md @@ -0,0 +1,50 @@ +```html + + + +``` diff --git a/static/usage/v8/title/collapsible-large-title/buttons/angular.md b/static/usage/v8/title/collapsible-large-title/buttons/angular.md new file mode 100644 index 00000000000..6f253b16cd4 --- /dev/null +++ b/static/usage/v8/title/collapsible-large-title/buttons/angular.md @@ -0,0 +1,45 @@ +```html + + + Title + + Button + + + + + + + Title + + Button + + + + +
Scroll the list to see the title & buttons collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + +``` diff --git a/static/usage/v8/title/collapsible-large-title/buttons/demo.html b/static/usage/v8/title/collapsible-large-title/buttons/demo.html new file mode 100644 index 00000000000..e0603e9aed2 --- /dev/null +++ b/static/usage/v8/title/collapsible-large-title/buttons/demo.html @@ -0,0 +1,60 @@ + + + + + + Title + + + + + + + + + + + Title + + Button + + + + + + + Title + + Button + + + + +
Scroll the list to see the title & buttons collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + + + + diff --git a/static/usage/v8/title/collapsible-large-title/buttons/index.md b/static/usage/v8/title/collapsible-large-title/buttons/index.md new file mode 100644 index 00000000000..b11f1bbe655 --- /dev/null +++ b/static/usage/v8/title/collapsible-large-title/buttons/index.md @@ -0,0 +1,15 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/title/collapsible-large-title/buttons/javascript.md b/static/usage/v8/title/collapsible-large-title/buttons/javascript.md new file mode 100644 index 00000000000..feb1583e3b6 --- /dev/null +++ b/static/usage/v8/title/collapsible-large-title/buttons/javascript.md @@ -0,0 +1,45 @@ +```html + + + Title + + Button + + + + + + + Title + + Button + + + + +
Scroll the list to see the title & buttons collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + +``` diff --git a/static/usage/v8/title/collapsible-large-title/buttons/react.md b/static/usage/v8/title/collapsible-large-title/buttons/react.md new file mode 100644 index 00000000000..deca52428ce --- /dev/null +++ b/static/usage/v8/title/collapsible-large-title/buttons/react.md @@ -0,0 +1,55 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + + + Title + + Button + + + + + + + Title + + Button + + + + +
Scroll the list to see the title & buttons collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/title/collapsible-large-title/buttons/vue.md b/static/usage/v8/title/collapsible-large-title/buttons/vue.md new file mode 100644 index 00000000000..2c23d8982ad --- /dev/null +++ b/static/usage/v8/title/collapsible-large-title/buttons/vue.md @@ -0,0 +1,56 @@ +```html + + + +``` diff --git a/static/usage/v8/title/theming/css-properties/angular/example_component_html.md b/static/usage/v8/title/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..31c40bb2ef7 --- /dev/null +++ b/static/usage/v8/title/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,37 @@ +```html + + + Title + + + + + + Title + + + + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + +``` diff --git a/static/usage/v8/title/theming/css-properties/angular/global_css.md b/static/usage/v8/title/theming/css-properties/angular/global_css.md new file mode 100644 index 00000000000..0da76c33423 --- /dev/null +++ b/static/usage/v8/title/theming/css-properties/angular/global_css.md @@ -0,0 +1,14 @@ +```css +ion-title.title-large { + color: #c897d8; + font-size: 30px; +} + +ion-title { + --color: #000; +} + +ion-toolbar { + --background: #c897d8; +} +``` diff --git a/static/usage/v8/title/theming/css-properties/demo.html b/static/usage/v8/title/theming/css-properties/demo.html new file mode 100644 index 00000000000..edbf7a4f374 --- /dev/null +++ b/static/usage/v8/title/theming/css-properties/demo.html @@ -0,0 +1,67 @@ + + + + + + Title + + + + + + + + + + + + + Title + + + + + + Title + + + + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + + + + diff --git a/static/usage/v8/title/theming/css-properties/index.md b/static/usage/v8/title/theming/css-properties/index.md new file mode 100644 index 00000000000..aed27e79157 --- /dev/null +++ b/static/usage/v8/title/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/title/theming/css-properties/javascript.md b/static/usage/v8/title/theming/css-properties/javascript.md new file mode 100644 index 00000000000..443ca1bf39d --- /dev/null +++ b/static/usage/v8/title/theming/css-properties/javascript.md @@ -0,0 +1,52 @@ +```html + + + + + Title + + + + + + Title + + + + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + +``` diff --git a/static/usage/v8/title/theming/css-properties/react/main_css.md b/static/usage/v8/title/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..0da76c33423 --- /dev/null +++ b/static/usage/v8/title/theming/css-properties/react/main_css.md @@ -0,0 +1,14 @@ +```css +ion-title.title-large { + color: #c897d8; + font-size: 30px; +} + +ion-title { + --color: #000; +} + +ion-toolbar { + --background: #c897d8; +} +``` diff --git a/static/usage/v8/title/theming/css-properties/react/main_tsx.md b/static/usage/v8/title/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..5dc5b9d993b --- /dev/null +++ b/static/usage/v8/title/theming/css-properties/react/main_tsx.md @@ -0,0 +1,49 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + Title + + + + + + Title + + + + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/title/theming/css-properties/vue.md b/static/usage/v8/title/theming/css-properties/vue.md new file mode 100644 index 00000000000..dc85c93d3ab --- /dev/null +++ b/static/usage/v8/title/theming/css-properties/vue.md @@ -0,0 +1,62 @@ +```html + + + + +``` diff --git a/static/usage/v8/toast/buttons/angular/example_component_html.md b/static/usage/v8/toast/buttons/angular/example_component_html.md new file mode 100644 index 00000000000..15ced1fb702 --- /dev/null +++ b/static/usage/v8/toast/buttons/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html +Open Toast + +``` diff --git a/static/usage/v8/toast/buttons/angular/example_component_ts.md b/static/usage/v8/toast/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..4e1c0e564b9 --- /dev/null +++ b/static/usage/v8/toast/buttons/angular/example_component_ts.md @@ -0,0 +1,31 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + public toastButtons = [ + { + text: 'More Info', + role: 'info', + handler: () => { + console.log('More Info clicked'); + }, + }, + { + text: 'Dismiss', + role: 'cancel', + handler: () => { + console.log('Dismiss clicked'); + }, + }, + ]; + + setRoleMessage(ev) { + const { role } = ev.detail; + console.log(`Dismissed with role: ${role}`); + } +} +``` diff --git a/static/usage/v8/toast/buttons/demo.html b/static/usage/v8/toast/buttons/demo.html new file mode 100644 index 00000000000..236f0ba0bed --- /dev/null +++ b/static/usage/v8/toast/buttons/demo.html @@ -0,0 +1,54 @@ + + + + + + Toast + + + + + + + + + + + Toast + + + +
+ Open Toast + +
+ + + + + + diff --git a/static/usage/v8/toast/buttons/index.md b/static/usage/v8/toast/buttons/index.md new file mode 100644 index 00000000000..452c5245ba0 --- /dev/null +++ b/static/usage/v8/toast/buttons/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/toast/buttons/javascript.md b/static/usage/v8/toast/buttons/javascript.md new file mode 100644 index 00000000000..843c1a469c6 --- /dev/null +++ b/static/usage/v8/toast/buttons/javascript.md @@ -0,0 +1,30 @@ +```html +Open Toast + + + +``` diff --git a/static/usage/v8/toast/buttons/react.md b/static/usage/v8/toast/buttons/react.md new file mode 100644 index 00000000000..14c7595a309 --- /dev/null +++ b/static/usage/v8/toast/buttons/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonButton, IonToast } from '@ionic/react'; + +function Example() { + return ( + <> + Open Toast + { + console.log('More Info clicked'); + }, + }, + { + text: 'Dismiss', + role: 'cancel', + handler: () => { + console.log('Dismiss clicked'); + }, + }, + ]} + onDidDismiss={(e: CustomEvent) => console.log(`Dismissed with role: ${e.detail.role}`)} + > + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toast/buttons/vue.md b/static/usage/v8/toast/buttons/vue.md new file mode 100644 index 00000000000..fc05a785e17 --- /dev/null +++ b/static/usage/v8/toast/buttons/vue.md @@ -0,0 +1,50 @@ +```html + + + +``` diff --git a/static/usage/v8/toast/icon/angular.md b/static/usage/v8/toast/icon/angular.md new file mode 100644 index 00000000000..819a72c342f --- /dev/null +++ b/static/usage/v8/toast/icon/angular.md @@ -0,0 +1,4 @@ +```html +Open Toast + +``` diff --git a/static/usage/v8/toast/icon/demo.html b/static/usage/v8/toast/icon/demo.html new file mode 100644 index 00000000000..3188b1e6272 --- /dev/null +++ b/static/usage/v8/toast/icon/demo.html @@ -0,0 +1,28 @@ + + + + + + Toast + + + + + + + + + + + Toast + + + +
+ Open Toast + +
+ + + + diff --git a/static/usage/v8/toast/icon/index.md b/static/usage/v8/toast/icon/index.md new file mode 100644 index 00000000000..aef5d5a8cc7 --- /dev/null +++ b/static/usage/v8/toast/icon/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toast/icon/javascript.md b/static/usage/v8/toast/icon/javascript.md new file mode 100644 index 00000000000..1c694d9dde0 --- /dev/null +++ b/static/usage/v8/toast/icon/javascript.md @@ -0,0 +1,4 @@ +```html +Open Toast + +``` diff --git a/static/usage/v8/toast/icon/react.md b/static/usage/v8/toast/icon/react.md new file mode 100644 index 00000000000..baa893d452e --- /dev/null +++ b/static/usage/v8/toast/icon/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonButton, IonToast } from '@ionic/react'; +import { globe } from 'ionicons/icons'; + +function Example() { + return ( + <> + Open Toast + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toast/icon/vue.md b/static/usage/v8/toast/icon/vue.md new file mode 100644 index 00000000000..223e37b3222 --- /dev/null +++ b/static/usage/v8/toast/icon/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v8/toast/inline/basic/angular.md b/static/usage/v8/toast/inline/basic/angular.md new file mode 100644 index 00000000000..5756e5c7891 --- /dev/null +++ b/static/usage/v8/toast/inline/basic/angular.md @@ -0,0 +1,12 @@ +```html + + + Inline Toast + + + + Open +

This toast example uses triggers to automatically open a toast when the button is clicked.

+ + +``` diff --git a/static/usage/v8/toast/inline/basic/demo.html b/static/usage/v8/toast/inline/basic/demo.html new file mode 100644 index 00000000000..ca80d1fd2a6 --- /dev/null +++ b/static/usage/v8/toast/inline/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + Toast | Inline + + + + + + + + + + + Inline Toast + + + + Open +

This toast example uses triggers to automatically open a toast when the button is clicked.

+ + + + + diff --git a/static/usage/v8/toast/inline/basic/index.md b/static/usage/v8/toast/inline/basic/index.md new file mode 100644 index 00000000000..aa61cab896b --- /dev/null +++ b/static/usage/v8/toast/inline/basic/index.md @@ -0,0 +1,19 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toast/inline/basic/javascript.md b/static/usage/v8/toast/inline/basic/javascript.md new file mode 100644 index 00000000000..27f1a967725 --- /dev/null +++ b/static/usage/v8/toast/inline/basic/javascript.md @@ -0,0 +1,12 @@ +```html + + + Inline Toast + + + + Open +

This toast example uses triggers to automatically open a toast when the button is clicked.

+ + +``` diff --git a/static/usage/v8/toast/inline/basic/react.md b/static/usage/v8/toast/inline/basic/react.md new file mode 100644 index 00000000000..0def9d5e178 --- /dev/null +++ b/static/usage/v8/toast/inline/basic/react.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonToast } from '@ionic/react'; + +function Example() { + return ( + + + + Inline Toast + + + + + Open + +

This toast example uses triggers to automatically open a toast when the button is clicked.

+ + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/toast/inline/basic/vue.md b/static/usage/v8/toast/inline/basic/vue.md new file mode 100644 index 00000000000..1b81018bcdb --- /dev/null +++ b/static/usage/v8/toast/inline/basic/vue.md @@ -0,0 +1,30 @@ +```html + + + +``` diff --git a/static/usage/v8/toast/inline/is-open/angular/example_component_html.md b/static/usage/v8/toast/inline/is-open/angular/example_component_html.md new file mode 100644 index 00000000000..96014213ad0 --- /dev/null +++ b/static/usage/v8/toast/inline/is-open/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + + + Inline Toast + + + + Open + + +``` diff --git a/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md b/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md new file mode 100644 index 00000000000..67fb0c7676c --- /dev/null +++ b/static/usage/v8/toast/inline/is-open/angular/example_component_ts.md @@ -0,0 +1,15 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + isToastOpen = false; + + setOpen(isOpen: boolean) { + this.isToastOpen = isOpen; + } +} +``` diff --git a/static/usage/v8/toast/inline/is-open/demo.html b/static/usage/v8/toast/inline/is-open/demo.html new file mode 100644 index 00000000000..5be1998b610 --- /dev/null +++ b/static/usage/v8/toast/inline/is-open/demo.html @@ -0,0 +1,33 @@ + + + + + + Toast | Inline + + + + + + + + + + + Inline Toast + + + + Open + + + + + + + diff --git a/static/usage/v8/toast/inline/is-open/index.md b/static/usage/v8/toast/inline/is-open/index.md new file mode 100644 index 00000000000..5f5130a0a4d --- /dev/null +++ b/static/usage/v8/toast/inline/is-open/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/toast/inline/is-open/javascript.md b/static/usage/v8/toast/inline/is-open/javascript.md new file mode 100644 index 00000000000..eeb540d747a --- /dev/null +++ b/static/usage/v8/toast/inline/is-open/javascript.md @@ -0,0 +1,18 @@ +```html + + + Inline Toast + + + + Open + + + + +``` diff --git a/static/usage/v8/toast/inline/is-open/react.md b/static/usage/v8/toast/inline/is-open/react.md new file mode 100644 index 00000000000..ed32e64ea70 --- /dev/null +++ b/static/usage/v8/toast/inline/is-open/react.md @@ -0,0 +1,31 @@ +```tsx +import React, { useState } from 'react'; +import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonToast } from '@ionic/react'; + +function Example() { + const [isOpen, setIsOpen] = useState(false); + + return ( + + + + Inline Toast + + + + setIsOpen(true)}> + Open + + setIsOpen(false)} + duration={5000} + > + + + ); +} + +export default Example; +``` diff --git a/static/usage/v8/toast/inline/is-open/vue.md b/static/usage/v8/toast/inline/is-open/vue.md new file mode 100644 index 00000000000..b1c9c88ffb1 --- /dev/null +++ b/static/usage/v8/toast/inline/is-open/vue.md @@ -0,0 +1,35 @@ +```html + + + +``` diff --git a/static/usage/v8/toast/layout/angular/example_component_html.md b/static/usage/v8/toast/layout/angular/example_component_html.md new file mode 100644 index 00000000000..2efa0572c4b --- /dev/null +++ b/static/usage/v8/toast/layout/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html +Open Baseline Layout Toast +Open Stacked Layout Toast + + +``` diff --git a/static/usage/v8/toast/layout/angular/example_component_ts.md b/static/usage/v8/toast/layout/angular/example_component_ts.md new file mode 100644 index 00000000000..89c39c33323 --- /dev/null +++ b/static/usage/v8/toast/layout/angular/example_component_ts.md @@ -0,0 +1,15 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + toastButtons = [ + { + text: 'Action With Long Text', + }, + ]; +} +``` diff --git a/static/usage/v8/toast/layout/demo.html b/static/usage/v8/toast/layout/demo.html new file mode 100644 index 00000000000..4a19cd4157d --- /dev/null +++ b/static/usage/v8/toast/layout/demo.html @@ -0,0 +1,49 @@ + + + + + + Toast + + + + + + + + + + + Toast + + + + Open Baseline Layout Toast + Open Stacked Layout Toast + + + + + + + + diff --git a/static/usage/v8/toast/layout/index.md b/static/usage/v8/toast/layout/index.md new file mode 100644 index 00000000000..26d799850e4 --- /dev/null +++ b/static/usage/v8/toast/layout/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/toast/layout/javascript.md b/static/usage/v8/toast/layout/javascript.md new file mode 100644 index 00000000000..6ae1998b02d --- /dev/null +++ b/static/usage/v8/toast/layout/javascript.md @@ -0,0 +1,27 @@ +```html +Open Baseline Layout Toast +Open Stacked Layout Toast + + + + +``` diff --git a/static/usage/v8/toast/layout/react.md b/static/usage/v8/toast/layout/react.md new file mode 100644 index 00000000000..51b71342b6b --- /dev/null +++ b/static/usage/v8/toast/layout/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonButton, IonToast } from '@ionic/react'; + +function Example() { + return ( + <> + Open Stacked Layout Toast + Open Baseline Layout Toast + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toast/layout/vue.md b/static/usage/v8/toast/layout/vue.md new file mode 100644 index 00000000000..18f11de56c3 --- /dev/null +++ b/static/usage/v8/toast/layout/vue.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/static/usage/v8/toast/position-anchor/angular.md b/static/usage/v8/toast/position-anchor/angular.md new file mode 100644 index 00000000000..f27b09cf057 --- /dev/null +++ b/static/usage/v8/toast/position-anchor/angular.md @@ -0,0 +1,33 @@ +```html + + + Header + + + + + Anchor to Header + Anchor to Footer + + + + + + + + Footer + + +``` diff --git a/static/usage/v8/toast/position-anchor/demo.html b/static/usage/v8/toast/position-anchor/demo.html new file mode 100644 index 00000000000..f39ea5681ea --- /dev/null +++ b/static/usage/v8/toast/position-anchor/demo.html @@ -0,0 +1,57 @@ + + + + + + Toast + + + + + + + + + + + + + Header + + + + +
+ Anchor to Header + Anchor to Footer + + + +
+ + + + + Footer + + + + + diff --git a/static/usage/v8/toast/position-anchor/index.md b/static/usage/v8/toast/position-anchor/index.md new file mode 100644 index 00000000000..dfcf9edde77 --- /dev/null +++ b/static/usage/v8/toast/position-anchor/index.md @@ -0,0 +1,19 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toast/position-anchor/javascript.md b/static/usage/v8/toast/position-anchor/javascript.md new file mode 100644 index 00000000000..0dc3e5b4a5a --- /dev/null +++ b/static/usage/v8/toast/position-anchor/javascript.md @@ -0,0 +1,33 @@ +```html + + + Header + + + + + Anchor to Header + Anchor to Footer + + + + + + + + Footer + + +``` diff --git a/static/usage/v8/toast/position-anchor/react.md b/static/usage/v8/toast/position-anchor/react.md new file mode 100644 index 00000000000..14149bff4d8 --- /dev/null +++ b/static/usage/v8/toast/position-anchor/react.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + + + Anchor to Header + Anchor to Footer + + + + + + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toast/position-anchor/vue.md b/static/usage/v8/toast/position-anchor/vue.md new file mode 100644 index 00000000000..b06b61b44da --- /dev/null +++ b/static/usage/v8/toast/position-anchor/vue.md @@ -0,0 +1,52 @@ +```html + + + +``` diff --git a/static/usage/v8/toast/presenting/controller/angular/example_component_html.md b/static/usage/v8/toast/presenting/controller/angular/example_component_html.md new file mode 100644 index 00000000000..2ed1eea0254 --- /dev/null +++ b/static/usage/v8/toast/presenting/controller/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html +Present Toast At the Top +Present Toast At the Middle +Present Toast At the Bottom +``` diff --git a/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md new file mode 100644 index 00000000000..db133a99f1e --- /dev/null +++ b/static/usage/v8/toast/presenting/controller/angular/example_component_ts.md @@ -0,0 +1,22 @@ +```ts +import { Component } from '@angular/core'; +import { ToastController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + constructor(private toastController: ToastController) {} + + async presentToast(position: 'top' | 'middle' | 'bottom') { + const toast = await this.toastController.create({ + message: 'Hello World!', + duration: 1500, + position: position, + }); + + await toast.present(); + } +} +``` diff --git a/static/usage/v8/toast/presenting/controller/demo.html b/static/usage/v8/toast/presenting/controller/demo.html new file mode 100644 index 00000000000..f388a0167ff --- /dev/null +++ b/static/usage/v8/toast/presenting/controller/demo.html @@ -0,0 +1,52 @@ + + + + + + Toast + + + + + + + + + + + + + Toast + + + +
+ Present Toast At the Top + Present Toast At the Middle + Present Toast At the Bottom +
+ + + + + + + + diff --git a/static/usage/v8/toast/presenting/controller/index.md b/static/usage/v8/toast/presenting/controller/index.md new file mode 100644 index 00000000000..13a34cdac6d --- /dev/null +++ b/static/usage/v8/toast/presenting/controller/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/toast/presenting/controller/javascript.md b/static/usage/v8/toast/presenting/controller/javascript.md new file mode 100644 index 00000000000..52c089331fa --- /dev/null +++ b/static/usage/v8/toast/presenting/controller/javascript.md @@ -0,0 +1,17 @@ +```html +Present Toast At the Top +Present Toast At the Middle +Present Toast At the Bottom + + +``` diff --git a/static/usage/v8/toast/presenting/controller/react.md b/static/usage/v8/toast/presenting/controller/react.md new file mode 100644 index 00000000000..b4e8d0913ca --- /dev/null +++ b/static/usage/v8/toast/presenting/controller/react.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonButton, useIonToast } from '@ionic/react'; + +function Example() { + const [present] = useIonToast(); + + const presentToast = (position: 'top' | 'middle' | 'bottom') => { + present({ + message: 'Hello World!', + duration: 1500, + position: position, + }); + }; + + return ( + <> + presentToast('top')}> + Present Toast At the Top + + presentToast('middle')}> + Present Toast At the Middle + + presentToast('bottom')}> + Present Toast At the Bottom + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toast/presenting/controller/vue.md b/static/usage/v8/toast/presenting/controller/vue.md new file mode 100644 index 00000000000..7f2ade91031 --- /dev/null +++ b/static/usage/v8/toast/presenting/controller/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v8/toast/theming/angular/example_component_html.md b/static/usage/v8/toast/theming/angular/example_component_html.md new file mode 100644 index 00000000000..b51350a3b63 --- /dev/null +++ b/static/usage/v8/toast/theming/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html +Open Toast + +``` diff --git a/static/usage/v8/toast/theming/angular/example_component_ts.md b/static/usage/v8/toast/theming/angular/example_component_ts.md new file mode 100644 index 00000000000..361391ca546 --- /dev/null +++ b/static/usage/v8/toast/theming/angular/example_component_ts.md @@ -0,0 +1,18 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + public toastButtons = [ + { + text: 'Dismiss', + role: 'cancel', + }, + ]; + + constructor() {} +} +``` diff --git a/static/usage/v8/toast/theming/angular/global_css.md b/static/usage/v8/toast/theming/angular/global_css.md new file mode 100644 index 00000000000..70ef6f5cfd6 --- /dev/null +++ b/static/usage/v8/toast/theming/angular/global_css.md @@ -0,0 +1,17 @@ +```css +ion-toast.custom-toast { + --background: #f4f4fa; + --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2); + --color: #4b4a50; +} + +ion-toast.custom-toast::part(message) { + font-style: italic; +} + +ion-toast.custom-toast::part(button) { + border-left: 1px solid #d2d2d2; + color: #030207; + font-size: 15px; +} +``` diff --git a/static/usage/v8/toast/theming/demo.html b/static/usage/v8/toast/theming/demo.html new file mode 100644 index 00000000000..7a9d89b4a63 --- /dev/null +++ b/static/usage/v8/toast/theming/demo.html @@ -0,0 +1,61 @@ + + + + + + Toast + + + + + + + + + + + + + Toast + + + +
+ Open Toast + +
+ + + + + + diff --git a/static/usage/v8/toast/theming/index.md b/static/usage/v8/toast/theming/index.md new file mode 100644 index 00000000000..e4d6cb14b8e --- /dev/null +++ b/static/usage/v8/toast/theming/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v8/toast/theming/javascript.md b/static/usage/v8/toast/theming/javascript.md new file mode 100644 index 00000000000..9d0addc910e --- /dev/null +++ b/static/usage/v8/toast/theming/javascript.md @@ -0,0 +1,32 @@ +```html +Open Toast + + + + + +``` diff --git a/static/usage/v8/toast/theming/react/main_css.md b/static/usage/v8/toast/theming/react/main_css.md new file mode 100644 index 00000000000..70ef6f5cfd6 --- /dev/null +++ b/static/usage/v8/toast/theming/react/main_css.md @@ -0,0 +1,17 @@ +```css +ion-toast.custom-toast { + --background: #f4f4fa; + --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2); + --color: #4b4a50; +} + +ion-toast.custom-toast::part(message) { + font-style: italic; +} + +ion-toast.custom-toast::part(button) { + border-left: 1px solid #d2d2d2; + color: #030207; + font-size: 15px; +} +``` diff --git a/static/usage/v8/toast/theming/react/main_tsx.md b/static/usage/v8/toast/theming/react/main_tsx.md new file mode 100644 index 00000000000..9d7c084e5c7 --- /dev/null +++ b/static/usage/v8/toast/theming/react/main_tsx.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonButton, IonToast } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Open Toast + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toast/theming/vue.md b/static/usage/v8/toast/theming/vue.md new file mode 100644 index 00000000000..264e4b1ee57 --- /dev/null +++ b/static/usage/v8/toast/theming/vue.md @@ -0,0 +1,48 @@ +```html + + + + + +``` diff --git a/static/usage/v8/toggle/alignment/angular.md b/static/usage/v8/toggle/alignment/angular.md new file mode 100644 index 00000000000..2395fa81f6a --- /dev/null +++ b/static/usage/v8/toggle/alignment/angular.md @@ -0,0 +1,4 @@ +```html +Aligned to the Start

+Aligned to the Center +``` diff --git a/static/usage/v8/toggle/alignment/demo.html b/static/usage/v8/toggle/alignment/demo.html new file mode 100644 index 00000000000..c8a899ee6fb --- /dev/null +++ b/static/usage/v8/toggle/alignment/demo.html @@ -0,0 +1,25 @@ + + + + + + Toggle + + + + + + + + + +
+
+ Aligned to the Start

+ Aligned to the Center

+
+
+ + + + diff --git a/static/usage/v8/toggle/alignment/index.md b/static/usage/v8/toggle/alignment/index.md new file mode 100644 index 00000000000..0d94dbd5e1e --- /dev/null +++ b/static/usage/v8/toggle/alignment/index.md @@ -0,0 +1,17 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toggle/alignment/javascript.md b/static/usage/v8/toggle/alignment/javascript.md new file mode 100644 index 00000000000..b40b7ba1014 --- /dev/null +++ b/static/usage/v8/toggle/alignment/javascript.md @@ -0,0 +1,4 @@ +```html +Aligned to the Start

+Aligned to the Center +``` diff --git a/static/usage/v8/toggle/alignment/react.md b/static/usage/v8/toggle/alignment/react.md new file mode 100644 index 00000000000..6af4a181100 --- /dev/null +++ b/static/usage/v8/toggle/alignment/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + + Aligned to the Start + +
+
+ + Aligned to the Center + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toggle/alignment/vue.md b/static/usage/v8/toggle/alignment/vue.md new file mode 100644 index 00000000000..b3bce543aa6 --- /dev/null +++ b/static/usage/v8/toggle/alignment/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v8/toggle/basic/angular.md b/static/usage/v8/toggle/basic/angular.md new file mode 100644 index 00000000000..f6f9fd2bb1d --- /dev/null +++ b/static/usage/v8/toggle/basic/angular.md @@ -0,0 +1,6 @@ +```html +Default Toggle

+Checked Toggle

+Disabled Toggle

+Disabled Checked Toggle +``` diff --git a/static/usage/v8/toggle/basic/demo.html b/static/usage/v8/toggle/basic/demo.html new file mode 100644 index 00000000000..8119095fad9 --- /dev/null +++ b/static/usage/v8/toggle/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + Toggle + + + + + + + + + +
+
+ Default Toggle

+ Checked Toggle

+ Disabled Toggle

+ Disabled Checked Toggle +
+
+ + + + diff --git a/static/usage/v8/toggle/basic/index.md b/static/usage/v8/toggle/basic/index.md new file mode 100644 index 00000000000..565b56f5591 --- /dev/null +++ b/static/usage/v8/toggle/basic/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toggle/basic/javascript.md b/static/usage/v8/toggle/basic/javascript.md new file mode 100644 index 00000000000..fc6565ee989 --- /dev/null +++ b/static/usage/v8/toggle/basic/javascript.md @@ -0,0 +1,6 @@ +```html +Default Toggle

+Checked Toggle

+Disabled Toggle

+Disabled Checked Toggle +``` diff --git a/static/usage/v8/toggle/basic/react.md b/static/usage/v8/toggle/basic/react.md new file mode 100644 index 00000000000..7783c45d747 --- /dev/null +++ b/static/usage/v8/toggle/basic/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + Default Toggle +
+
+ Checked Toggle +
+
+ Disabled Toggle +
+
+ + Disabled Checked Toggle + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toggle/basic/vue.md b/static/usage/v8/toggle/basic/vue.md new file mode 100644 index 00000000000..cb5396e7abf --- /dev/null +++ b/static/usage/v8/toggle/basic/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v8/toggle/justify/angular.md b/static/usage/v8/toggle/justify/angular.md new file mode 100644 index 00000000000..0dbb0ebc9ad --- /dev/null +++ b/static/usage/v8/toggle/justify/angular.md @@ -0,0 +1,13 @@ +```html + + + Packed at the Start of Line + + + Packed at the End of Line + + + Space Between Label and Control + + +``` diff --git a/static/usage/v8/toggle/justify/demo.html b/static/usage/v8/toggle/justify/demo.html new file mode 100644 index 00000000000..c6c5d20a2dd --- /dev/null +++ b/static/usage/v8/toggle/justify/demo.html @@ -0,0 +1,38 @@ + + + + + + Toggle + + + + + + + + + + + +
+ + + Packed at the Start of Line + + + Packed at the End of Line + + + Space Between Label and Control + + +
+ + + + diff --git a/static/usage/v8/toggle/justify/index.md b/static/usage/v8/toggle/justify/index.md new file mode 100644 index 00000000000..63ae27756f0 --- /dev/null +++ b/static/usage/v8/toggle/justify/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toggle/justify/javascript.md b/static/usage/v8/toggle/justify/javascript.md new file mode 100644 index 00000000000..0dbb0ebc9ad --- /dev/null +++ b/static/usage/v8/toggle/justify/javascript.md @@ -0,0 +1,13 @@ +```html + + + Packed at the Start of Line + + + Packed at the End of Line + + + Space Between Label and Control + + +``` diff --git a/static/usage/v8/toggle/justify/react.md b/static/usage/v8/toggle/justify/react.md new file mode 100644 index 00000000000..ffe66a13f8f --- /dev/null +++ b/static/usage/v8/toggle/justify/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonToggle } from '@ionic/react'; + +function Example() { + return ( + + + Packed at the Start of Line + + + Packed at the End of Line + + + Space Between Label and Control + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toggle/justify/vue.md b/static/usage/v8/toggle/justify/vue.md new file mode 100644 index 00000000000..ca48ab5d311 --- /dev/null +++ b/static/usage/v8/toggle/justify/vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v8/toggle/label-placement/angular.md b/static/usage/v8/toggle/label-placement/angular.md new file mode 100644 index 00000000000..390ea7bda37 --- /dev/null +++ b/static/usage/v8/toggle/label-placement/angular.md @@ -0,0 +1,6 @@ +```html +Label at the Start

+Label at the End

+Fixed Width Label

+Stacked Label +``` diff --git a/static/usage/v8/toggle/label-placement/demo.html b/static/usage/v8/toggle/label-placement/demo.html new file mode 100644 index 00000000000..9f2d4d1d1cf --- /dev/null +++ b/static/usage/v8/toggle/label-placement/demo.html @@ -0,0 +1,27 @@ + + + + + + Toggle + + + + + + + + + +
+
+ Label at the Start

+ Label at the End

+ Fixed Width Label

+ Stacked Label

+
+
+ + + + diff --git a/static/usage/v8/toggle/label-placement/index.md b/static/usage/v8/toggle/label-placement/index.md new file mode 100644 index 00000000000..160f05db920 --- /dev/null +++ b/static/usage/v8/toggle/label-placement/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toggle/label-placement/javascript.md b/static/usage/v8/toggle/label-placement/javascript.md new file mode 100644 index 00000000000..ab259436848 --- /dev/null +++ b/static/usage/v8/toggle/label-placement/javascript.md @@ -0,0 +1,6 @@ +```html +Label at the Start

+Label at the End

+Fixed Width Label

+Stacked Label +``` diff --git a/static/usage/v8/toggle/label-placement/react.md b/static/usage/v8/toggle/label-placement/react.md new file mode 100644 index 00000000000..a6fe77d7a02 --- /dev/null +++ b/static/usage/v8/toggle/label-placement/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + Label at the Start +
+
+ Label at the End +
+
+ Fixed Width Label +
+
+ Stacked Label + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toggle/label-placement/vue.md b/static/usage/v8/toggle/label-placement/vue.md new file mode 100644 index 00000000000..c9cfea701e1 --- /dev/null +++ b/static/usage/v8/toggle/label-placement/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v8/toggle/list/angular.md b/static/usage/v8/toggle/list/angular.md new file mode 100644 index 00000000000..5a731705335 --- /dev/null +++ b/static/usage/v8/toggle/list/angular.md @@ -0,0 +1,13 @@ +```html + + + Receive Push Notifications + + + Receive Emails + + + Receive Text Messages + + +``` diff --git a/static/usage/v8/toggle/list/demo.html b/static/usage/v8/toggle/list/demo.html new file mode 100644 index 00000000000..142e9535fa4 --- /dev/null +++ b/static/usage/v8/toggle/list/demo.html @@ -0,0 +1,32 @@ + + + + + + Toggle + + + + + + + + + +
+ + + Receive Push Notifications + + + Receive Emails + + + Receive Text Messages + + +
+ + + + diff --git a/static/usage/v8/toggle/list/index.md b/static/usage/v8/toggle/list/index.md new file mode 100644 index 00000000000..ad3aef2e129 --- /dev/null +++ b/static/usage/v8/toggle/list/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toggle/list/javascript.md b/static/usage/v8/toggle/list/javascript.md new file mode 100644 index 00000000000..5a731705335 --- /dev/null +++ b/static/usage/v8/toggle/list/javascript.md @@ -0,0 +1,13 @@ +```html + + + Receive Push Notifications + + + Receive Emails + + + Receive Text Messages + + +``` diff --git a/static/usage/v8/toggle/list/react.md b/static/usage/v8/toggle/list/react.md new file mode 100644 index 00000000000..f32920305ee --- /dev/null +++ b/static/usage/v8/toggle/list/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonToggle } from '@ionic/react'; + +function Example() { + return ( + + + Receive Push Notifications + + + Receive Emails + + + Receive Text Messages + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toggle/list/vue.md b/static/usage/v8/toggle/list/vue.md new file mode 100644 index 00000000000..98e183a7f4b --- /dev/null +++ b/static/usage/v8/toggle/list/vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v8/toggle/migration/index.md b/static/usage/v8/toggle/migration/index.md new file mode 100644 index 00000000000..a1f855766b8 --- /dev/null +++ b/static/usage/v8/toggle/migration/index.md @@ -0,0 +1,188 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +````mdx-code-block + + + +```html + + + + + Notifications + + + + + + Notifications + + + + + + + Notifications + + + + + + Notifications + + + + + + + Notifications + + + + + + Notifications + +``` + + + +```html + + + + + Notifications + + + + + + Notifications + + + + + + + Notifications + + + + + + Notifications + + + + + + + Notifications + + + + + + Notifications + +``` + + + +```tsx +{/* Basic */} + +{/* Before */} + + Notifications + + + +{/* After */} + + Notifications + + +{/* Fixed Labels */} + +{/* Before */} + + Notifications + + + +{/* After */} + + Notifications + + +{/* Toggle at the start of line, Label at the end of line */} + +{/* Before */} + + Notifications + + + +{/* After */} + + Notifications + +``` + + + +```html + + + + + Notifications + + + + + + Notifications + + + + + + + Notifications + + + + + + Notifications + + + + + + + Notifications + + + + + + Notifications + +``` + + +```` diff --git a/static/usage/v8/toggle/on-off/angular.md b/static/usage/v8/toggle/on-off/angular.md new file mode 100644 index 00000000000..2b2d75bcc3c --- /dev/null +++ b/static/usage/v8/toggle/on-off/angular.md @@ -0,0 +1,3 @@ +```html +Enable Notifications +``` diff --git a/static/usage/v8/toggle/on-off/demo.html b/static/usage/v8/toggle/on-off/demo.html new file mode 100644 index 00000000000..ef282c19bb5 --- /dev/null +++ b/static/usage/v8/toggle/on-off/demo.html @@ -0,0 +1,22 @@ + + + + + + Toggle + + + + + + + + + +
+ Enable Notifications +
+ + + + diff --git a/static/usage/v8/toggle/on-off/index.md b/static/usage/v8/toggle/on-off/index.md new file mode 100644 index 00000000000..00a4e4800ad --- /dev/null +++ b/static/usage/v8/toggle/on-off/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toggle/on-off/javascript.md b/static/usage/v8/toggle/on-off/javascript.md new file mode 100644 index 00000000000..398ae05dfb7 --- /dev/null +++ b/static/usage/v8/toggle/on-off/javascript.md @@ -0,0 +1,3 @@ +```html +Enable Notifications +``` diff --git a/static/usage/v8/toggle/on-off/react.md b/static/usage/v8/toggle/on-off/react.md new file mode 100644 index 00000000000..321e55187d5 --- /dev/null +++ b/static/usage/v8/toggle/on-off/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +function Example() { + return Enable Notifications; +} +export default Example; +``` diff --git a/static/usage/v8/toggle/on-off/vue.md b/static/usage/v8/toggle/on-off/vue.md new file mode 100644 index 00000000000..040df1266da --- /dev/null +++ b/static/usage/v8/toggle/on-off/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v8/toggle/theming/colors/angular.md b/static/usage/v8/toggle/theming/colors/angular.md new file mode 100644 index 00000000000..20e1b2f0d19 --- /dev/null +++ b/static/usage/v8/toggle/theming/colors/angular.md @@ -0,0 +1,11 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v8/toggle/theming/colors/demo.html b/static/usage/v8/toggle/theming/colors/demo.html new file mode 100644 index 00000000000..2b5f355d32f --- /dev/null +++ b/static/usage/v8/toggle/theming/colors/demo.html @@ -0,0 +1,30 @@ + + + + + + Toggle + + + + + + + + + +
+ + + + + + + + + +
+ + + + diff --git a/static/usage/v8/toggle/theming/colors/index.md b/static/usage/v8/toggle/theming/colors/index.md new file mode 100644 index 00000000000..e67d2cf0693 --- /dev/null +++ b/static/usage/v8/toggle/theming/colors/index.md @@ -0,0 +1,8 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toggle/theming/colors/javascript.md b/static/usage/v8/toggle/theming/colors/javascript.md new file mode 100644 index 00000000000..a07c1af5771 --- /dev/null +++ b/static/usage/v8/toggle/theming/colors/javascript.md @@ -0,0 +1,11 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v8/toggle/theming/colors/react.md b/static/usage/v8/toggle/theming/colors/react.md new file mode 100644 index 00000000000..74fad7619ea --- /dev/null +++ b/static/usage/v8/toggle/theming/colors/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toggle/theming/colors/vue.md b/static/usage/v8/toggle/theming/colors/vue.md new file mode 100644 index 00000000000..453255eba8f --- /dev/null +++ b/static/usage/v8/toggle/theming/colors/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v8/toggle/theming/css-properties/angular/example_component_css.md b/static/usage/v8/toggle/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..a8e62a4d3e9 --- /dev/null +++ b/static/usage/v8/toggle/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,27 @@ +```css +ion-toggle { + padding: 12px; + + --track-background: #ddd; + --track-background-checked: #ddd; + + --handle-background: #eb7769; + --handle-background-checked: #95c34e; + + --handle-width: 25px; + --handle-height: 27px; + --handle-max-height: auto; + --handle-spacing: 6px; + + --handle-border-radius: 4px; + --handle-box-shadow: none; +} + +ion-toggle::part(track) { + height: 10px; + width: 65px; + + /* Required for iOS handle to overflow the height of the track */ + overflow: visible; +} +``` diff --git a/static/usage/v8/toggle/theming/css-properties/angular/example_component_html.md b/static/usage/v8/toggle/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..de598209eaa --- /dev/null +++ b/static/usage/v8/toggle/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html + + +``` diff --git a/static/usage/v8/toggle/theming/css-properties/demo.html b/static/usage/v8/toggle/theming/css-properties/demo.html new file mode 100644 index 00000000000..3c547a4e8d2 --- /dev/null +++ b/static/usage/v8/toggle/theming/css-properties/demo.html @@ -0,0 +1,50 @@ + + + + + + Item + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v8/toggle/theming/css-properties/index.md b/static/usage/v8/toggle/theming/css-properties/index.md new file mode 100644 index 00000000000..b7f767691f7 --- /dev/null +++ b/static/usage/v8/toggle/theming/css-properties/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/toggle/theming/css-properties/javascript.md b/static/usage/v8/toggle/theming/css-properties/javascript.md new file mode 100644 index 00000000000..3bc34c3949d --- /dev/null +++ b/static/usage/v8/toggle/theming/css-properties/javascript.md @@ -0,0 +1,32 @@ +```html + + + + +``` diff --git a/static/usage/v8/toggle/theming/css-properties/react/main_css.md b/static/usage/v8/toggle/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..a8e62a4d3e9 --- /dev/null +++ b/static/usage/v8/toggle/theming/css-properties/react/main_css.md @@ -0,0 +1,27 @@ +```css +ion-toggle { + padding: 12px; + + --track-background: #ddd; + --track-background-checked: #ddd; + + --handle-background: #eb7769; + --handle-background-checked: #95c34e; + + --handle-width: 25px; + --handle-height: 27px; + --handle-max-height: auto; + --handle-spacing: 6px; + + --handle-border-radius: 4px; + --handle-box-shadow: none; +} + +ion-toggle::part(track) { + height: 10px; + width: 65px; + + /* Required for iOS handle to overflow the height of the track */ + overflow: visible; +} +``` diff --git a/static/usage/v8/toggle/theming/css-properties/react/main_tsx.md b/static/usage/v8/toggle/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..aa988bb22d4 --- /dev/null +++ b/static/usage/v8/toggle/theming/css-properties/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toggle/theming/css-properties/vue.md b/static/usage/v8/toggle/theming/css-properties/vue.md new file mode 100644 index 00000000000..ce78a13989a --- /dev/null +++ b/static/usage/v8/toggle/theming/css-properties/vue.md @@ -0,0 +1,43 @@ +```html + + + + + +``` diff --git a/static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..0df6def7beb --- /dev/null +++ b/static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,34 @@ +```css +ion-toggle { + padding: 12px; + + --handle-width: 25px; + --handle-height: 27px; + --handle-max-height: auto; + --handle-spacing: 6px; + + contain: none; +} + +ion-toggle::part(track), +ion-toggle.toggle-checked::part(track) { + height: 10px; + width: 65px; + + background: #ddd; + + /* Required for iOS handle to overflow the height of the track */ + overflow: visible; +} + +ion-toggle::part(handle) { + background: #eb7769; + + border-radius: 4px; + box-shadow: none; +} + +ion-toggle.toggle-checked::part(handle) { + background: #95c34e; +} +``` diff --git a/static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..de598209eaa --- /dev/null +++ b/static/usage/v8/toggle/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html + + +``` diff --git a/static/usage/v8/toggle/theming/css-shadow-parts/demo.html b/static/usage/v8/toggle/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..565a90f61a1 --- /dev/null +++ b/static/usage/v8/toggle/theming/css-shadow-parts/demo.html @@ -0,0 +1,58 @@ + + + + + + Item + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v8/toggle/theming/css-shadow-parts/index.md b/static/usage/v8/toggle/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..6241f8b029f --- /dev/null +++ b/static/usage/v8/toggle/theming/css-shadow-parts/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v8/toggle/theming/css-shadow-parts/javascript.md b/static/usage/v8/toggle/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..6f7c7b435c6 --- /dev/null +++ b/static/usage/v8/toggle/theming/css-shadow-parts/javascript.md @@ -0,0 +1,39 @@ +```html + + + + +``` diff --git a/static/usage/v8/toggle/theming/css-shadow-parts/react/main_css.md b/static/usage/v8/toggle/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..0df6def7beb --- /dev/null +++ b/static/usage/v8/toggle/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,34 @@ +```css +ion-toggle { + padding: 12px; + + --handle-width: 25px; + --handle-height: 27px; + --handle-max-height: auto; + --handle-spacing: 6px; + + contain: none; +} + +ion-toggle::part(track), +ion-toggle.toggle-checked::part(track) { + height: 10px; + width: 65px; + + background: #ddd; + + /* Required for iOS handle to overflow the height of the track */ + overflow: visible; +} + +ion-toggle::part(handle) { + background: #eb7769; + + border-radius: 4px; + box-shadow: none; +} + +ion-toggle.toggle-checked::part(handle) { + background: #95c34e; +} +``` diff --git a/static/usage/v8/toggle/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v8/toggle/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..aa988bb22d4 --- /dev/null +++ b/static/usage/v8/toggle/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toggle/theming/css-shadow-parts/vue.md b/static/usage/v8/toggle/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..cdced277639 --- /dev/null +++ b/static/usage/v8/toggle/theming/css-shadow-parts/vue.md @@ -0,0 +1,50 @@ +```html + + + + + +``` diff --git a/static/usage/v8/toolbar/basic/angular.md b/static/usage/v8/toolbar/basic/angular.md new file mode 100644 index 00000000000..40fbd442061 --- /dev/null +++ b/static/usage/v8/toolbar/basic/angular.md @@ -0,0 +1,13 @@ +```html + + + Header Toolbar + + + + + + Footer Toolbar + + +``` diff --git a/static/usage/v8/toolbar/basic/demo.html b/static/usage/v8/toolbar/basic/demo.html new file mode 100644 index 00000000000..b89c32302e3 --- /dev/null +++ b/static/usage/v8/toolbar/basic/demo.html @@ -0,0 +1,28 @@ + + + + + + Toolbar + + + + + + + + + + + Header Toolbar + + + + + + Footer Toolbar + + + + + diff --git a/static/usage/v8/toolbar/basic/index.md b/static/usage/v8/toolbar/basic/index.md new file mode 100644 index 00000000000..43cc48e1fe9 --- /dev/null +++ b/static/usage/v8/toolbar/basic/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toolbar/basic/javascript.md b/static/usage/v8/toolbar/basic/javascript.md new file mode 100644 index 00000000000..40fbd442061 --- /dev/null +++ b/static/usage/v8/toolbar/basic/javascript.md @@ -0,0 +1,13 @@ +```html + + + Header Toolbar + + + + + + Footer Toolbar + + +``` diff --git a/static/usage/v8/toolbar/basic/react.md b/static/usage/v8/toolbar/basic/react.md new file mode 100644 index 00000000000..42b46929d3f --- /dev/null +++ b/static/usage/v8/toolbar/basic/react.md @@ -0,0 +1,23 @@ +```tsx +import React from 'react'; +import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header Toolbar + + + + + + Footer Toolbar + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toolbar/basic/vue.md b/static/usage/v8/toolbar/basic/vue.md new file mode 100644 index 00000000000..ec71b1a340b --- /dev/null +++ b/static/usage/v8/toolbar/basic/vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v8/toolbar/buttons/angular.md b/static/usage/v8/toolbar/buttons/angular.md new file mode 100644 index 00000000000..18a54554a1b --- /dev/null +++ b/static/usage/v8/toolbar/buttons/angular.md @@ -0,0 +1,84 @@ +```html + + + Start + + Start / End Buttons + + End + + + + + + Secondary + + + Primary + + Primary / Secondary Buttons + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + +``` diff --git a/static/usage/v8/toolbar/buttons/demo.html b/static/usage/v8/toolbar/buttons/demo.html new file mode 100644 index 00000000000..25781e21d5c --- /dev/null +++ b/static/usage/v8/toolbar/buttons/demo.html @@ -0,0 +1,110 @@ + + + + + + Toolbar + + + + + + + + + + + +
+ + + Start + + Start / End Buttons + + End + + + + + + Secondary + + + Primary + + Primary / Secondary Buttons + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + +
+ + + + diff --git a/static/usage/v8/toolbar/buttons/index.md b/static/usage/v8/toolbar/buttons/index.md new file mode 100644 index 00000000000..d0d4897944b --- /dev/null +++ b/static/usage/v8/toolbar/buttons/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toolbar/buttons/javascript.md b/static/usage/v8/toolbar/buttons/javascript.md new file mode 100644 index 00000000000..18a54554a1b --- /dev/null +++ b/static/usage/v8/toolbar/buttons/javascript.md @@ -0,0 +1,84 @@ +```html + + + Start + + Start / End Buttons + + End + + + + + + Secondary + + + Primary + + Primary / Secondary Buttons + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + +``` diff --git a/static/usage/v8/toolbar/buttons/react.md b/static/usage/v8/toolbar/buttons/react.md new file mode 100644 index 00000000000..a8ed785db82 --- /dev/null +++ b/static/usage/v8/toolbar/buttons/react.md @@ -0,0 +1,95 @@ +```tsx +import React from 'react'; +import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react'; +import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + Start + + Start / End Buttons + + End + + + + + + Secondary + + + Primary + + Primary / Secondary Buttons + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toolbar/buttons/vue.md b/static/usage/v8/toolbar/buttons/vue.md new file mode 100644 index 00000000000..68091a20771 --- /dev/null +++ b/static/usage/v8/toolbar/buttons/vue.md @@ -0,0 +1,99 @@ +```html + + + +``` diff --git a/static/usage/v8/toolbar/progress-bars/angular.md b/static/usage/v8/toolbar/progress-bars/angular.md new file mode 100644 index 00000000000..0c80f0f5955 --- /dev/null +++ b/static/usage/v8/toolbar/progress-bars/angular.md @@ -0,0 +1,8 @@ +```html + + + Toolbar + + + +``` diff --git a/static/usage/v8/toolbar/progress-bars/demo.html b/static/usage/v8/toolbar/progress-bars/demo.html new file mode 100644 index 00000000000..14b8713fa06 --- /dev/null +++ b/static/usage/v8/toolbar/progress-bars/demo.html @@ -0,0 +1,23 @@ + + + + + + Toolbar + + + + + + + + + + + Toolbar + + + + + + diff --git a/static/usage/v8/toolbar/progress-bars/index.md b/static/usage/v8/toolbar/progress-bars/index.md new file mode 100644 index 00000000000..067e8bed05f --- /dev/null +++ b/static/usage/v8/toolbar/progress-bars/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toolbar/progress-bars/javascript.md b/static/usage/v8/toolbar/progress-bars/javascript.md new file mode 100644 index 00000000000..0c80f0f5955 --- /dev/null +++ b/static/usage/v8/toolbar/progress-bars/javascript.md @@ -0,0 +1,8 @@ +```html + + + Toolbar + + + +``` diff --git a/static/usage/v8/toolbar/progress-bars/react.md b/static/usage/v8/toolbar/progress-bars/react.md new file mode 100644 index 00000000000..52720f12b14 --- /dev/null +++ b/static/usage/v8/toolbar/progress-bars/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + + + Toolbar + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toolbar/progress-bars/vue.md b/static/usage/v8/toolbar/progress-bars/vue.md new file mode 100644 index 00000000000..2b3a3b85d0c --- /dev/null +++ b/static/usage/v8/toolbar/progress-bars/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v8/toolbar/searchbars/angular.md b/static/usage/v8/toolbar/searchbars/angular.md new file mode 100644 index 00000000000..9016e1e04cf --- /dev/null +++ b/static/usage/v8/toolbar/searchbars/angular.md @@ -0,0 +1,10 @@ +```html + + + Toolbar + + + + + +``` diff --git a/static/usage/v8/toolbar/searchbars/demo.html b/static/usage/v8/toolbar/searchbars/demo.html new file mode 100644 index 00000000000..0a5f9a78328 --- /dev/null +++ b/static/usage/v8/toolbar/searchbars/demo.html @@ -0,0 +1,25 @@ + + + + + + Toolbar + + + + + + + + + + + Toolbar + + + + + + + + diff --git a/static/usage/v8/toolbar/searchbars/index.md b/static/usage/v8/toolbar/searchbars/index.md new file mode 100644 index 00000000000..c1327b9c45a --- /dev/null +++ b/static/usage/v8/toolbar/searchbars/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toolbar/searchbars/javascript.md b/static/usage/v8/toolbar/searchbars/javascript.md new file mode 100644 index 00000000000..9016e1e04cf --- /dev/null +++ b/static/usage/v8/toolbar/searchbars/javascript.md @@ -0,0 +1,10 @@ +```html + + + Toolbar + + + + + +``` diff --git a/static/usage/v8/toolbar/searchbars/react.md b/static/usage/v8/toolbar/searchbars/react.md new file mode 100644 index 00000000000..dcf4fc644f3 --- /dev/null +++ b/static/usage/v8/toolbar/searchbars/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + + + Toolbar + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toolbar/searchbars/vue.md b/static/usage/v8/toolbar/searchbars/vue.md new file mode 100644 index 00000000000..8543a2ef976 --- /dev/null +++ b/static/usage/v8/toolbar/searchbars/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v8/toolbar/segments/angular.md b/static/usage/v8/toolbar/segments/angular.md new file mode 100644 index 00000000000..e7cce4323dc --- /dev/null +++ b/static/usage/v8/toolbar/segments/angular.md @@ -0,0 +1,14 @@ +```html + + + + + All + + + Favorites + + + + +``` diff --git a/static/usage/v8/toolbar/segments/demo.html b/static/usage/v8/toolbar/segments/demo.html new file mode 100644 index 00000000000..b4ee0cd2238 --- /dev/null +++ b/static/usage/v8/toolbar/segments/demo.html @@ -0,0 +1,29 @@ + + + + + + Toolbar + + + + + + + + + + + + + All + + + Favorites + + + + + + + diff --git a/static/usage/v8/toolbar/segments/index.md b/static/usage/v8/toolbar/segments/index.md new file mode 100644 index 00000000000..1cd0613d883 --- /dev/null +++ b/static/usage/v8/toolbar/segments/index.md @@ -0,0 +1,14 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toolbar/segments/javascript.md b/static/usage/v8/toolbar/segments/javascript.md new file mode 100644 index 00000000000..e7cce4323dc --- /dev/null +++ b/static/usage/v8/toolbar/segments/javascript.md @@ -0,0 +1,14 @@ +```html + + + + + All + + + Favorites + + + + +``` diff --git a/static/usage/v8/toolbar/segments/react.md b/static/usage/v8/toolbar/segments/react.md new file mode 100644 index 00000000000..f2fad4d0ec5 --- /dev/null +++ b/static/usage/v8/toolbar/segments/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + + + + + All + + + Favorites + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toolbar/segments/vue.md b/static/usage/v8/toolbar/segments/vue.md new file mode 100644 index 00000000000..b31855bf734 --- /dev/null +++ b/static/usage/v8/toolbar/segments/vue.md @@ -0,0 +1,25 @@ +```html + + + +``` diff --git a/static/usage/v8/toolbar/theming/colors/angular.md b/static/usage/v8/toolbar/theming/colors/angular.md new file mode 100644 index 00000000000..a2763a1c1c7 --- /dev/null +++ b/static/usage/v8/toolbar/theming/colors/angular.md @@ -0,0 +1,32 @@ +```html + + Default Toolbar + + + Primary Toolbar + + + Secondary Toolbar + + + Tertiary Toolbar + + + Success Toolbar + + + Warning Toolbar + + + Danger Toolbar + + + Light Toolbar + + + Medium Toolbar + + + Dark Toolbar + +``` diff --git a/static/usage/v8/toolbar/theming/colors/demo.html b/static/usage/v8/toolbar/theming/colors/demo.html new file mode 100644 index 00000000000..3705e6fdef4 --- /dev/null +++ b/static/usage/v8/toolbar/theming/colors/demo.html @@ -0,0 +1,58 @@ + + + + + + Toolbar + + + + + + + + + + + +
+ + Default Toolbar + + + Primary Toolbar + + + Secondary Toolbar + + + Tertiary Toolbar + + + Success Toolbar + + + Warning Toolbar + + + Danger Toolbar + + + Light Toolbar + + + Medium Toolbar + + + Dark Toolbar + +
+ + + + diff --git a/static/usage/v8/toolbar/theming/colors/index.md b/static/usage/v8/toolbar/theming/colors/index.md new file mode 100644 index 00000000000..686cc8df40b --- /dev/null +++ b/static/usage/v8/toolbar/theming/colors/index.md @@ -0,0 +1,13 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v8/toolbar/theming/colors/javascript.md b/static/usage/v8/toolbar/theming/colors/javascript.md new file mode 100644 index 00000000000..a2763a1c1c7 --- /dev/null +++ b/static/usage/v8/toolbar/theming/colors/javascript.md @@ -0,0 +1,32 @@ +```html + + Default Toolbar + + + Primary Toolbar + + + Secondary Toolbar + + + Tertiary Toolbar + + + Success Toolbar + + + Warning Toolbar + + + Danger Toolbar + + + Light Toolbar + + + Medium Toolbar + + + Dark Toolbar + +``` diff --git a/static/usage/v8/toolbar/theming/colors/react.md b/static/usage/v8/toolbar/theming/colors/react.md new file mode 100644 index 00000000000..ba6fd010f23 --- /dev/null +++ b/static/usage/v8/toolbar/theming/colors/react.md @@ -0,0 +1,42 @@ +```tsx +import React from 'react'; +import { IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + Default Toolbar + + + Primary Toolbar + + + Secondary Toolbar + + + Tertiary Toolbar + + + Success Toolbar + + + Warning Toolbar + + + Danger Toolbar + + + Light Toolbar + + + Medium Toolbar + + + Dark Toolbar + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toolbar/theming/colors/vue.md b/static/usage/v8/toolbar/theming/colors/vue.md new file mode 100644 index 00000000000..d71cb7a3c05 --- /dev/null +++ b/static/usage/v8/toolbar/theming/colors/vue.md @@ -0,0 +1,43 @@ +```html + + + +``` diff --git a/static/usage/v8/toolbar/theming/css-properties/angular/example_component_css.md b/static/usage/v8/toolbar/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..f485553f7ad --- /dev/null +++ b/static/usage/v8/toolbar/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,14 @@ +```css +ion-toolbar { + --background: #19422d; + --color: white; + + --border-color: #f24aec; + --border-width: 4px 0; + --border-style: double; + + --min-height: 80px; + --padding-top: 20px; + --padding-bottom: 20px; +} +``` diff --git a/static/usage/v8/toolbar/theming/css-properties/angular/example_component_html.md b/static/usage/v8/toolbar/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..8f21356a707 --- /dev/null +++ b/static/usage/v8/toolbar/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Custom Toolbar + +``` diff --git a/static/usage/v8/toolbar/theming/css-properties/demo.html b/static/usage/v8/toolbar/theming/css-properties/demo.html new file mode 100644 index 00000000000..f512df855e0 --- /dev/null +++ b/static/usage/v8/toolbar/theming/css-properties/demo.html @@ -0,0 +1,44 @@ + + + + + + Toolbar + + + + + + + + + + + +
+ + Custom Toolbar + +
+ + + + diff --git a/static/usage/v8/toolbar/theming/css-properties/index.md b/static/usage/v8/toolbar/theming/css-properties/index.md new file mode 100644 index 00000000000..9ca22f52d07 --- /dev/null +++ b/static/usage/v8/toolbar/theming/css-properties/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v8/toolbar/theming/css-properties/javascript.md b/static/usage/v8/toolbar/theming/css-properties/javascript.md new file mode 100644 index 00000000000..7ee9cd6d581 --- /dev/null +++ b/static/usage/v8/toolbar/theming/css-properties/javascript.md @@ -0,0 +1,20 @@ +```html + + Custom Toolbar + + + +``` diff --git a/static/usage/v8/toolbar/theming/css-properties/react/main_css.md b/static/usage/v8/toolbar/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..f485553f7ad --- /dev/null +++ b/static/usage/v8/toolbar/theming/css-properties/react/main_css.md @@ -0,0 +1,14 @@ +```css +ion-toolbar { + --background: #19422d; + --color: white; + + --border-color: #f24aec; + --border-width: 4px 0; + --border-style: double; + + --min-height: 80px; + --padding-top: 20px; + --padding-bottom: 20px; +} +``` diff --git a/static/usage/v8/toolbar/theming/css-properties/react/main_tsx.md b/static/usage/v8/toolbar/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..8e8f663cd98 --- /dev/null +++ b/static/usage/v8/toolbar/theming/css-properties/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonTitle, IonToolbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + Custom Toolbar + + ); +} +export default Example; +``` diff --git a/static/usage/v8/toolbar/theming/css-properties/vue.md b/static/usage/v8/toolbar/theming/css-properties/vue.md new file mode 100644 index 00000000000..17d8653117c --- /dev/null +++ b/static/usage/v8/toolbar/theming/css-properties/vue.md @@ -0,0 +1,31 @@ +```html + + + + + +``` diff --git a/versioned_docs/version-v7/README.md b/versioned_docs/version-v7/README.md new file mode 100644 index 00000000000..12005305278 --- /dev/null +++ b/versioned_docs/version-v7/README.md @@ -0,0 +1,17 @@ +# Docs folder + +The `/docs` folder houses all markdown files. The page structure loosely maps to the routing on the site since paths can be changed in the frontmatter. + +## Versioning + +This folder can also contain components, assets, and whatever else is meant to be versioned when the docusaurus versioning script is run. For example, if there is a page component that is only relevant to the `layout` section in the current version of Ionic, it could be added to a `_components/` folder in `docs/layout/`. When the versioning script is run, the component will be copied to `versioned_docs/version-{X}/layout/_components/` and there will now be a separate component in `docs/layout/_components/` that can be deleted or updated to the latest version. The same concept applies to images and other files. + +If components are meant to be shared across versions, they can be put in `src/components/`. If images and other served files are meant to be shared across versions they can be put in `static/`. + +## Auto Generated Files + +All markdown files in these directories are generated from [scripts](/scripts): + +- `docs/api/` +- `docs/cli/commands/` +- `docs/native/` diff --git a/versioned_docs/version-v7/angular/build-options.md b/versioned_docs/version-v7/angular/build-options.md new file mode 100644 index 00000000000..7c179cbdd6b --- /dev/null +++ b/versioned_docs/version-v7/angular/build-options.md @@ -0,0 +1,671 @@ +# 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 }); + } +} +``` + +Icons can also be registered in entry points such as `app.component.ts` to avoid the need to call `addIcons` multiple times. Developers should be aware that the initial application chunk may increase because the registered icons will need to be loaded at application start. However, if your application uses a small number of icons the impact of this may be minimal. + +```typescript title="app.component.ts" +import { Component } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], + standalone: true, +}) +export class AppComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ logoIonic }); + } +} +``` + +Icons registered in an application entry point can then be referenced by name anywhere in the application. + +```html title="home.page.html" + + +``` + +**Routing** + +Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (``) elements should import `IonRouterLinkWithHref` instead. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], + standalone: true, + imports: [ + IonButton, + RouterLink, // required to get base routerLink behavior for @angular/router + IonRouterLink, // use IonRouterLinkWithHref if you are using an element instead + ], +}) +export class HomePage {} +``` + +```html title="home.page.html" +Go to Foo Page +``` + +### 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 }); + } +} +``` + +Icons can also be registered in entry points such as `app.component.ts` to avoid the need to call `addIcons` multiple times. Developers should be aware that the initial application chunk may increase because the registered icons will need to be loaded at application start. However, if your application uses a small number of icons the impact of this may be minimal. + +```typescript title="app.component.ts" +import { Component } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], +}) +export class AppComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ logoIonic }); + } +} +``` + +Icons registered in an application entry point can then be referenced by name anywhere in the application. + +```html title="home.page.html" + + +``` + +**Routing** + +Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (``) elements should import `IonRouterLinkWithHref` instead. + +```typescript title="home.module.ts" +import { NgModule } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; +import { HomePage } from './home.page'; + +import { HomePageRoutingModule } from './home-routing.module'; + +@NgModule({ + imports: [ + IonButton, + RouterLink, // required to get base routerLink behavior for @angular/router + IonRouterLink, // use IonRouterLinkWithHref if you are using an element instead + HomePageRoutingModule, + ], + declarations: [HomePage], +}) +export class HomePageModule {} +``` + +```html title="home.page.html" +Go to Foo Page +``` + +## Modules + +### Overview + +Developers can also use the Modules approach by importing `IonicModule` and calling `IonicModule.forRoot()` in the `imports` array in `app.module.ts`. This registers a version of Ionic where Ionic components will be lazily loaded at runtime. + +**Benefits** + +1. Since components are lazily loaded as needed, developers do not need to spend time manually importing and registering each Ionic component. + +**Drawbacks** + +1. Lazily loading Ionic components means that the compiler does not know which components are needed at build time. This means your final application bundle may be much larger than it needs to be. +2. Developers are unable to use newer Angular features such as [ESBuild](https://angular.io/guide/esbuild). + +### Usage + +In the example below, we are using `IonicModule` to create a lazily loaded version of Ionic. We can then reference any Ionic component without needing to explicitly import it. + +```typescript +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, IonicModule.forRoot()], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +## Migrating from Modules to Standalone + +:::tip +Try our automated utility for migrating to standalone! + +See https://github.com/ionic-team/ionic-angular-standalone-codemods for instructions on how to get started. All issues related to the migration utility should be filed on the linked repo. +::: + +The Standalone option is newer than the Modules option, so developers may wish to switch during the development of their application. This guide details the steps needed to migrate. + +Migrating to Ionic standalone components must be done all at the same time and cannot be done gradually. The Modules and Standalone approaches use two different build systems of Ionic that cannot be used at the same time. + +Developers are encouraged to try the [automated migration utility](https://github.com/ionic-team/ionic-angular-standalone-codemods), though they can also follow the steps below if they would like to manually migrate their applications. + +### Standalone-based Applications + +Follow these steps if your Angular application is already using the standalone architecture, and you want to use Ionic UI components as standalone components too. + +1. Run `npm install @ionic/angular@latest` to ensure you are running the latest version of Ionic. Ionic UI Standalone Components is supported in Ionic v7.5 or newer. + +2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components. + +3. Remove the `IonicModule` call in `main.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function. + +```diff title="main.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +- import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; ++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; +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 {} +``` + +10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations. + +```json title=".vscode/settings.json" +{ + "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"] +} +``` + +### NgModule-based Applications + +Follow these steps if your Angular application is still using the NgModule architecture, but you want to adopt Ionic UI components as standalone components now. + +1. Run `npm install @ionic/angular@latest` to ensure you are running the latest version of Ionic. Ionic UI Standalone Components is supported in Ionic v7.5 or newer. + +2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components. + +3. Remove the `IonicModule` call in `app.module.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function. + +```diff title="app.module.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +- import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; ++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; +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] +}) +``` + +10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations. + +```json title=".vscode/settings.json" +{ + "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"] +} +``` diff --git a/versioned_docs/version-v7/angular/lifecycle.md b/versioned_docs/version-v7/angular/lifecycle.md new file mode 100644 index 00000000000..0f981e64dc3 --- /dev/null +++ b/versioned_docs/version-v7/angular/lifecycle.md @@ -0,0 +1,103 @@ +--- +title: Ionic Page Life Cycle +sidebar_label: Lifecycle +--- + + + Angular Page Component Life Cycle - App Events Documentation + + + +This guide covers how the page life cycle works in an app built with Ionic and Angular. + +![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.png) + +## Angular Life Cycle Events + +Ionic embraces the life cycle events provided by Angular. The two Angular events you will find using the most are: + +| Event Name | Description | +| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ngOnInit` | Fired once during component initialization. This event can be used to initialize local members and make calls into services that only need to be done once. | +| `ngOnDestroy` | Fired right before Angular destroys the view. Useful for cleanup like unsubscribing from observables. | + +For more info on the Angular Component Life Cycle events, visit their [component lifecycle docs](https://angular.io/guide/lifecycle-hooks). + +:::note +Components that use `ion-nav` or `ion-router-outlet` should not use the `OnPush` change detection strategy. Doing so will prevent lifecycle hooks such as `ngOnInit` from firing. Additionally, asynchronous state changes may not render properly. +::: + +## Ionic Page Events + +In addition to the Angular life cycle events, Ionic Angular provides a few additional events that you can use: + +| Event Name | Description | +| ------------------ | ------------------------------------------------------------------ | +| `ionViewWillEnter` | Fired when the component routing to is about to animate into view. | +| `ionViewDidEnter` | Fired when the component routing to has _finished_ animating. | +| `ionViewWillLeave` | Fired when the component routing _from_ is about to animate. | +| `ionViewDidLeave` | Fired when the component routing _from_ has _finished_ animating. | + +These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render. + +The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fire. The former fires right after `ngOnInit` but before the page transition begins, and the latter directly after the transition ends. + +For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires). + +![Ionic life cycle events demo](/img/guides/lifecycle/ioniclifecycle.gif) + +## How Ionic Handles the Life of a Page + +Ionic has its router outlet, called ``. This outlet extends Angular's `` with some additional functionality to enable better experiences for mobile devices. + +When an app is wrapped in ``, Ionic treats navigation a bit differently. When you navigate to a new page, Ionic will keep the old page in the existing DOM, but hide it from your view and transition the new page. The reason we do this is two-fold: + +1. We can maintain the state of the old page (data on the screen, scroll position, etc..) +2. We can provide a smoother transition back to the page since it is already there and doesn't need to be recreated. + +Pages are only removed from the DOM when they are "popped", for instance, by pressing the back button in the UI or the browsers back button. + +Because of this special handling, the `ngOnInit` and `ngOnDestroy` methods might not fire when you would usually think they should. + +`ngOnInit` will only fire each time the page is freshly created, but not when navigated back to the page. For instance, navigating between each page in a tabs interface will only call each page's `ngOnInit` method once, but not on subsequent visits. `ngOnDestroy` will only fire when a page "popped". + +## Route Guards + +In Ionic 3, there were a couple of additional life cycle methods that were useful to control when a page could be entered (`ionViewCanEnter`) and left (`ionViewCanLeave`). These could be used to protect pages from unauthorized users and to keep a user on a page when you don't want them to leave (like during a form fill). + +These methods were removed in Ionic 4 in favor of using Angular's Route Guards. + +A route guard helps determine if a particular action can be taken against a route. They are classes that implement a certain interface. The `CanActivate` and `CanDeactivate` interfaces can be used to implement the same type of logic that the removed events `ionViewCanEnter` and `ionViewCanLeave` did. + +```tsx +@Injectable() +export class AuthGuard implements CanActivate { + constructor(private authService: AuthService) {} + + canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { + return this.authService.isAuthenticated(); + } +} +``` + +To use this guard, add it to the appropriate param in the route definition: + +```tsx +{ path: 'settings', canActivate: [AuthGuard], loadChildren: '...', } +``` + +For more info on how to use route guards, go to Angular's [router documentation](https://angular.io/guide/router). + +## Guidance for Each Life Cycle Method + +Below are some tips on use cases for each of the life cycle events. + +- `ngOnInit` - Initialize your component and load data from services that don't need refreshing on each subsequent visit. +- `ionViewWillEnter` - Since `ionViewWillEnter` is called every time the view is navigated to (regardless if initialized or not), it's a good method to load data from services. However, if your data comes back during the animation, it can start lots of DOM manipulation, which can cause some janky animations. +- `ionViewDidEnter` - If you see performance problems from using `ionViewWillEnter` when loading data, you can do your data calls in `ionViewDidEnter` instead. This event won't fire until after the page is visible by the user, however, so you might want to use either a loading indicator or a skeleton screen, so content doesn't flash in un-naturally after the transition is complete. +- `ionViewWillLeave` - Can be used for cleanup, like unsubscribing from observables. Since `ngOnDestroy` might not fire when you navigate from the current page, put your cleanup code here if you don't want it active while the screen is not in view. +- `ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here. +- `ngOnDestroy` - Cleanup logic for your pages that you don't want to clean up in `ionViewWillLeave`. diff --git a/versioned_docs/version-v7/angular/navigation.md b/versioned_docs/version-v7/angular/navigation.md new file mode 100644 index 00000000000..9ad675058a0 --- /dev/null +++ b/versioned_docs/version-v7/angular/navigation.md @@ -0,0 +1,497 @@ +--- +title: Angular Navigation +sidebar_label: Navigation/Routing +--- + +import useBaseUrl from '@docusaurus/useBaseUrl'; + + + Angular Navigation: How Routing & Redirects Work in Angular Apps + + + +This guide covers how routing works in an app built with Ionic and Angular. + +The Angular Router is one of the most important libraries in an Angular application. Without it, apps would be single view/single context apps or would not be able to maintain their navigation state on browser reloads. With Angular Router, we can create rich apps that are linkable and have rich animations (when paired with Ionic of course). Let's look at the basics of the Angular Router and how we can configure it for Ionic apps. + +## A simple Route + +For most apps, having some sort of route is often required. The most basic configuration looks a bit like this: + +```tsx + +import { RouterModule } from '@angular/router'; + +@NgModule({ + imports: [ + ... + RouterModule.forRoot([ + { path: '', component: LoginComponent }, + { path: 'detail', component: DetailComponent }, + ]) + ], +}) +``` + +The simplest breakdown for what we have here is a path/component lookup. When our app loads, the router kicks things off by reading the URL the user is trying to load. In our sample, our route looks for `''`, which is essentially our index route. So for this, we load the `LoginComponent`. Fairly straight forward. This pattern of matching paths with a component continues for every entry we have in the router config. But what if we wanted to load a different path on our initial load? + +## Handling Redirects + +For this we can use router redirects. Redirects work the same way that a typical route object does, but just includes a few different keys. + +```tsx +[ + { path: '', redirectTo: 'login', pathMatch: 'full' }, + { path: 'login', component: LoginComponent }, + { path: 'detail', component: DetailComponent }, +]; +``` + +In our redirect, we look for the index path of our app. Then if we load that, we redirect to the `login` route. The last key of `pathMatch` is required to tell the router how it should look up the path. + +Since we use `full`, we're telling the router that we should compare the full path, even if ends up being something like `/route1/route2/route3`. Meaning that if we have: + +```tsx +{ path: '/route1/route2/route3', redirectTo: 'login', pathMatch: 'full' }, +{ path: 'login', component: LoginComponent }, +``` + +And load `/route1/route2/route3` we'll redirect. But if we loaded `/route1/route2/route4`, we won't redirect, as the paths don't match fully. + +Alternatively, if we used: + +```tsx +{ path: '/route1/route2', redirectTo: 'login', pathMatch: 'prefix' }, +{ path: 'login', component: LoginComponent }, +``` + +Then load both `/route1/route2/route3` and `/route1/route2/route4`, we'll be redirected for both routes. This is because `pathMatch: 'prefix'` will match only part of the path. + +## Navigating to different routes + +Talking about routes is good and all, but how does one actually navigate to said routes? For this, we can use the `routerLink` directive. Let's go back and take our simple router setup from earlier: + +```ts +RouterModule.forRoot([ + { path: '', component: LoginComponent }, + { path: 'detail', component: DetailComponent }, +]); +``` + +Now from the `LoginComponent`, we can use the following HTML to navigate to the detail route. + +```html + + + Login + + + + + Go to detail + +``` + +The important part here is the `ion-button` and `routerLink` directive. RouterLink works on a similar idea as typical `href`s, but instead of building out the URL as a string, it can be built as an array, which can provide more complicated paths. + +We also can programmatically navigate in our app by using the router API. + +```tsx +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + ... +}) +export class LoginComponent { + + constructor(private router: Router){} + + navigate(){ + this.router.navigate(['/detail']) + } +} +``` + +Both options provide the same navigation mechanism, just fitting different use cases. + +### Navigating using LocationStrategy.historyGo + +Angular Router has a [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) method that allows developers to move forward or backward through the application history. Let's take a look at an example. + +Say you have the following application history: + +`/pageA` --> `/pageB` --> `/pageC` + +If you were to call `LocationStrategy.historyGo(-2)` on `/pageC`, you would be brought back to `/pageA`. If you then called `LocationStrategy.historyGo(2)`, you would be brought to `/pageC`. + +An key characteristic of `LocationStrategy.historyGo()` is that it expects your application history to be linear. This means that `LocationStrategy.historyGo()` should not be used in applications that make use of non-linear routing. See [Linear Routing versus Non-Linear Routing](#linear-routing-versus-non-linear-routing) for more information. + +## Lazy loading routes + +Now the current way our routes are setup makes it so they are included in the same chunk as the root app.module, which is not ideal. Instead, the router has a setup that allows the components to be isolated to their own chunks. + +```tsx + +import { RouterModule } from '@angular/router'; + +@NgModule({ + imports: [ + ... + RouterModule.forRoot([ + { path: '', redirectTo: 'login', pathMatch: 'full' }, + { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) }, + { path: 'detail', loadChildren: () => import('./detail/detail.module').then(m => m.DetailModule) } + ]) + ], +}) +``` + +While similar, the `loadChildren` property is a way to reference a module by using native import instead of a component directly. In order to do this though, we need to create a module for each of the components. + +```tsx +... +import { RouterModule } from '@angular/router'; +import { LoginComponent } from './login.component'; + +@NgModule({ + imports: [ + ... + RouterModule.forChild([ + { path: '', component: LoginComponent }, + ]) + ], +}) +``` + +:::note +We're excluding some additional content and only including the necessary parts. +::: + +Here, we have a typical Angular Module setup, along with a RouterModule import, but we're now using `forChild` and declaring the component in that setup. With this setup, when we run our build, we will produce separate chunks for both the app component, the login component, and the detail component. + +## Standalone Components + +:::caution Experimental API + +Standalone components is an experimental API introduced in Angular 14.x and available in Ionic 6.3 and later. This feature may change before it is stable. + +::: + +Standalone components allow developers to lazy load a component on a route without having to declare the component to an Angular module. + +To use standalone components with routing and Ionic Framework, you must first be on Ionic ^6.3.0. The experimental API requires developers to assign the `EnvironmentInjector` instance for each router outlet (`ion-router-outlet` and `ion-tabs`) that uses standalone component routing. + +```ts title="app.component.ts" +import { Component, EnvironmentInjector } from '@angular/core'; + +@Component({ + selector: 'app-root', + template: 'app.component.html', +}) +export class AppComponent { + constructor(public environmentInjector: EnvironmentInjector) {} +} +``` + +```html title="app.component.html" + + + ... +``` + +Developers can use the existing syntax for standalone component routing from Angular: + +```ts +@NgModule({ + imports: [ + RouterModule.forRoot([ + { + path: 'standalone-route', + loadComponent: () => import('./path/to/my-component.component').then((c) => c.MyComponent), + }, + ]), + ], +}) +export class AppRoutingModule {} +``` + +To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components). + +## Live Example + +If you would prefer to get hands on with the concepts and code described above, please checkout our [live example](https://stackblitz.com/edit/ionic-angular-routing?file=src/app/app-routing.module.ts) of the topics above on StackBlitz. + +## Linear Routing versus Non-Linear Routing + +### Linear Routing + +If you have built a web app that uses routing, you likely have used linear routing before. Linear routing means that you can move forward or backward through the application history by pushing and popping pages. + +The following is an example of linear routing in a mobile app: + + + +The application history in this example has the following path: + +`Accessibility` --> `VoiceOver` --> `Speech` + +When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use router Angular Router APIs such as [LocationStrategy.historyGo()](#navigating-using-locationstrategy). + +The downside of linear routing is that it does not allow for complex user experiences such as tab views. This is where non-linear routing comes into play. + +### Non-Linear Routing + +Non-linear routing is a concept that may be new to many web developers learning to build mobile apps with Ionic. + +Non-linear routing means that the view that the user should go back to is not necessarily the previous view that was displayed on the screen. + +The following is an example of non-linear routing: + + + +In the example above, we start on the `Originals` tab. Tapping a card brings us to the `Ted Lasso` view within the `Originals` tab. + +From here, we switch to the `Search` tab. Then, we tap the `Originals` tab again and are brought back to the `Ted Lasso` view. At this point, we have started using non-linear routing. + +Why is this non-linear routing? The previous view we were on was the `Search` view. However, pressing the back button on the `Ted Lasso` view should bring us back to the root `Originals` view. This happens because each tab in a mobile app is treated as its own stack. The [Working with Tabs](#working-with-tabs) sections goes over this in more detail. + +If tapping the back button simply called `LocationStrategy.historyGo(-1)` from the `Ted Lasso` view, we would be brought back to the `Search` view which is not correct. + +Non-linear routing allows for sophisticated user flows that linear routing cannot handle. However, certain linear routing APIs such as `LocationStrategy.historyGo()` cannot be used in this non-linear environment. This means that `LocationStrategy.historyGo()` should not be used when using tabs or nested outlets. + +### Which one should I choose? + +We recommend keeping your application as simple as possible until you need to add non-linear routing. Non-linear routing is very powerful, but it also adds a considerable amount of complexity to mobile applications. + +The two most common uses of non-linear routing is with tabs and nested `ion-router-outlet`s. We recommend only using non-linear routing if your application meets the tabs or nested router outlet use cases. + +For more on tabs, please see [Working with Tabs](#working-with-tabs). + +For more on nested router outlets, please see [Nested Routes](#nested-routes). + +## Shared URLs versus Nested Routes + +A common point of confusion when setting up routing is deciding between shared URLs or nested routes. This part of the guide will explain both and help you decide which one to use. + +### Shared URLs + +Shared URLs is a route configuration where routes have pieces of the URL in common. The following is an example of a shared URL configuration: + +```tsx +const routes: Routes = [ + { + path: 'dashboard', + component: DashboardMainPage, + }, + { + path: 'dashboard/stats', + component: DashboardStatsPage, + }, +]; +``` + +The above routes are considered "shared" because they reuse the `dashboard` piece of the URL. + +### Nested Routes + +Nested Routes is a route configuration where routes are listed as children of other routes. The following is an example of a nested route configuration: + +```tsx +const routes: Routes = [ + { + path: 'dashboard', + component: DashboardRouterOutlet, + children: [ + { + path: '', + component: DashboardMainPage, + }, + { + path: 'stats', + component: DashboardStatsPage, + }, + ], + }, +]; +``` + +The above routes are nested because they are in the `children` array of the parent route. Notice that the parent route renders the `DashboardRouterOutlet` component. When you nest routes, you need to render another instance of `ion-router-outlet`. + +### Which one should I choose? + +Shared URLs are great when you want to transition from page A to page B while preserving the relationship between the two pages in the URL. In our previous example, a button on the `/dashboard` page could transition to the `/dashboard/stats` page. The relationship between the two pages is preserved because of a) the page transition and b) the url. + +Nested routes should be used when you want to render content in outlet A while also rendering sub-content inside of a nested outlet B. The most common use case you will run into is tabs. When you load up a tabs Ionic starter application, you will see `ion-tab-bar` and `ion-tabs` components rendered in the first `ion-router-outlet`. The `ion-tabs` component renders another `ion-router-outlet` which is responsible for rendering the contents of each tab. + +There are very few use cases in which nested routes make sense in mobile applications. When in doubt, use the shared URL route configuration. We strongly caution against using nested routing in contexts other than tabs as it can quickly make navigating your app confusing. + +## Working with Tabs + +With Tabs, the Angular Router provides Ionic the mechanism to know what components should be loaded, but the heavy lifting is actually done by the tabs component. Let's look at a simple example. + +```ts +const routes: Routes = [ + { + path: 'tabs', + component: TabsPage, + children: [ + { + path: 'tab1', + children: [ + { + path: '', + loadChildren: () => import('../tab1/tab1.module').then((m) => m.Tab1PageModule), + }, + ], + }, + { + path: '', + redirectTo: '/tabs/tab1', + pathMatch: 'full', + }, + ], + }, + { + path: '', + redirectTo: '/tabs/tab1', + pathMatch: 'full', + }, +]; +``` + +Here we have a "tabs" path that we load. In this example we call the path "tabs", but the name of the paths can be changed. They can be called whatever fits your app. In that route object, we can define a child route as well. In this example, the top level child route "tab1" acts as our "outlet", and can load additional child routes. For this example, we have a single sub-child-route, which just loads a new component. The markup for the tab is as follows: + +```html + + + + + Tab One + + + +``` + +If you've built apps with Ionic before, this should feel familiar. We create a `ion-tabs` component, and provide a `ion-tab-bar`. The `ion-tab-bar` provides a `ion-tab-button` with a `tab` property that is associated with the tab "outlet" in the router config. Note that the latest version of `@ionic/angular` no longer requires ``, but instead allows developers to fully customize the tab bar, and the single source of truth lives within the router configuration. + +### How Tabs in Ionic Work + +Each tab in Ionic is treated as an individual navigation stack. This means if you have three tabs in your application, each tab has its own navigation stack. Within each stack you can navigate forwards (push a view) and backwards (pop a view). + +This behavior is important to note as it is different than most tab implementations that are found in other web based UI libraries. Other libraries typically manage tabs as one single history stack. + +Since Ionic is focused on helping developers build mobile apps, the tabs in Ionic are designed to match native mobile tabs as closely as possible. As a result, there may be certain behaviors in Ionic's tabs that differ from tabs implementations you have seen in other UI libraries. Read on to learn more about some of these differences. + +### Child Routes within Tabs + +When adding additional routes to tabs you should write them as sibling routes with the parent tab as the path prefix. The example below defines the `/tabs/tab1/view` route as a sibling of the `/tabs/tab1` route. Since this new route has the `tab1` prefix, it will be rendered inside of the `Tabs` component, and Tab 1 will still be selected in the `ion-tab-bar`. + +```ts +const routes: Routes = [ + { + path: 'tabs', + component: TabsPage, + children: [ + { + path: 'tab1', + children: [ + { + path: '', + loadChildren: () => import('../tab1/tab1.module').then((m) => m.Tab1PageModule), + }, + ], + }, + { + path: 'tab1/view', + children: [ + { + path: '', + loadChildren: () => import('../tab1/tab1view.module').then((m) => m.Tab1ViewPageModule), + }, + ], + }, + { + path: 'tab2', + children: [ + { + path: '', + loadChildren: () => import('../tab2/tab2.module').then((m) => m.Tab2PageModule), + }, + ], + }, + { + path: 'tab3', + children: [ + { + path: '', + loadChildren: () => import('../tab3/tab3.module').then((m) => m.Tab3PageModule), + }, + ], + }, + ], + }, + { + path: '', + redirectTo: '/tabs/tab1', + pathMatch: 'full', + }, +]; +``` + +### Switching Between Tabs + +Since each tab is its own navigation stack, it is important to note that these navigation stacks should never interact. This means that there should never be a button in Tab 1 that routes a user to Tab 2. In other words, tabs should only be changed by the user tapping a tab button in the tab bar. + +A good example of this in practice is the iOS App Store and Google Play Store mobile applications. These apps both provide tabbed interfaces, but neither one ever routes the user across tabs. For example, the "Games" tab in the iOS App Store app never directs users to the "Search" tab and vice versa. + +Let's take a look at a couple common mistakes that are made with tabs. + +**A Settings Tab That Multiple Tabs Reference** + +A common practice is to create a Settings view as its own tab. This is great if developers need to present several nested settings menus. However, other tabs should never try to route to the Settings tab. As we mentioned above, the only way that the Settings tab should be activated is by a user tapping the appropriate tab button. + +If you find that your tabs need to reference the Settings tab, we recommend making the Settings view a modal by using `ion-modal`. This is a practice found in the iOS App Store app. With this approach, any tab can present the modal without breaking the mobile tabs pattern of each tab being its own stack. + +The example below shows how the iOS App Store app handles presenting an "Account" view from multiple tabs. By presenting the "Account" view in a modal, the app can work within the mobile tabs best practices to show the same view across multiple tabs. + + + +**Reusing Views Across Tabs** + +Another common practice is to present the same view in multiple tabs. Developers often try to do this by having the view contained in a single tab, with other tabs routing to that tab. As we mentioned above, this breaks the mobile tabs pattern and should be avoided. + +Instead, we recommend having routes in each tab that reference the same component. This is a practice done in popular apps like Spotify. For example, you can access an album or podcast from the "Home", "Search", and "Your Library" tabs. When accessing the album or podcast, users stay within that tab. The app does this by creating routes per tab and sharing a common component in the codebase. + +The example below shows how the Spotify app reuses the same album component to show content in multiple tabs. Notice that each screenshot shows the same album but from a different tab. + +| Home Tab | Search Tab | +| :-------------------------------------------------: | :---------------------------------------------------: | +| | | diff --git a/versioned_docs/version-v7/angular/overview.md b/versioned_docs/version-v7/angular/overview.md new file mode 100644 index 00000000000..4b1182bb76a --- /dev/null +++ b/versioned_docs/version-v7/angular/overview.md @@ -0,0 +1,46 @@ +--- +title: 'Ionic Angular Overview' +sidebar_label: Overview +--- + + + Ionic Angular Overview | Angular Version Support and Tooling + + + +import DocsCard from '@components/global/DocsCard'; +import DocsCards from '@components/global/DocsCards'; + +`@ionic/angular` combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers. + +## Angular Version Support + +Ionic v7 supports Angular v14+. As part of their upgrade strategy, Angular has built-in tooling to help automate upgrades and provide feedback to developers whenever changes to an API occurred. This reduces update friction and keeps the ecosystem in a evergreen state. + +## Angular Tooling + +With Ionic 4+, the official Angular stack for building an app and routing are used, so your app can fall in-line with the rest of the great Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps. + +## Resources + + + +

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

+ + + +

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

+ + + +

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

+ + + +

Learn about using Modules or Standalone Components in Ionic.

+ + + diff --git a/versioned_docs/version-v7/angular/performance.md b/versioned_docs/version-v7/angular/performance.md new file mode 100644 index 00000000000..62877e6e4dd --- /dev/null +++ b/versioned_docs/version-v7/angular/performance.md @@ -0,0 +1,73 @@ +--- +title: Angular Performance +sidebar_label: Performance +--- + + + Angular Performance: Manage App Component Change with ngFor + + + +## \*ngFor with Ionic Components + +When using `*ngFor` with Ionic components, we recommend using Angular's `trackBy` option. This allows Angular to manage change propagation in a much more efficient way and only update the content inside of the component rather than re-create the component altogether. + +By using `trackBy` you can provide a stable identity for each loop element so Angular can track insertions and deletions within the iterator. Below is an example of how to use `trackBy`: + +**home.page.html** + +```html + + {{ item.value }} + +``` + +**home.component.ts** + +```tsx + +items = [ + { id: 0, value: 'Item 0' }, + { id: 1, value: 'Item 1' }, + ... +] + +trackItems(index: number, itemObject: any) { + return itemObject.id; +} +``` + +In this example, we have an array of objects called `items`. Each object contains a `value` and an `id`. Using `trackBy`, we pass a `trackItems` function which returns the `id` of each object. This `id` is used to provide a stable identity for each loop element. + +For more information on how Angular manages change propagation with `ngFor` see https://angular.io/api/common/NgForOf#change-propagation. + +## From the Ionic Team + +[How to Lazy Load in Ionic Angular](https://ionicframework.com/blog/how-to-lazy-load-in-ionic-angular/) + +[Improved Perceived Performance with Skeleton Screens](https://ionicframework.com/blog/improved-perceived-performance-with-skeleton-screens/) + +## From the Angular Team + +[Build performant and progressive Angular apps](https://web.dev/angular) - web.dev + +## From the Community + + + +[High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony + +[High Performance List Filtering in Ionic](https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/) - Josh Morony + +[Increasing Performance with Efficient DOM Writes in Ionic](https://www.joshmorony.com/increasing-performance-with-efficient-dom-writes-in-ionic-2/) - Josh Morony + +[Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony + + + +:::note +Do you have a guide you'd like to share? Click the _Edit this page_ button below. +::: diff --git a/versioned_docs/version-v7/angular/platform.md b/versioned_docs/version-v7/angular/platform.md new file mode 100644 index 00000000000..3cd0d7833f3 --- /dev/null +++ b/versioned_docs/version-v7/angular/platform.md @@ -0,0 +1,246 @@ +--- +title: Platform +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Platform | Ionic Platform to Customize Apps to Fit Any Device + + + +The Platform service can be used to get information about your current device. You can get all of the platforms associated with the device using the `platforms` method, including whether the app is being viewed from a tablet, if it's on a mobile device or browser, and the exact platform (iOS, Android, etc). You can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information you can completely customize your app to fit any device. + +## Usage + + + + +```tsx +import { Platform } from '@ionic/angular'; + +@Component({...}) +export class MyPage { + constructor(public platform: Platform) { + + } +} +``` + + + + +```tsx +import { Platform } from '@ionic/angular/standalone'; + +@Component({...}) +export class MyPage { + constructor(public platform: Platform) { + + } +} +``` + + + + +## Methods + +### `is` + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Depending on the platform the user is on, `is(platformName)` will return true or false. Note that the same app can return true for more than one platform name. For example, an app running from an iPad would return true for the platform names: `mobile`, `ios`, `ipad`, and `tablet`. Additionally, if the app was running from Cordova then `cordova` would be true. | +| **Signature** | `is(platformName: Platforms) => boolean` | + +#### Parameters + +| Name | Type | Description | +| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | +| `platformName` | `Platforms` | Name of the platform. Available options are android, capacitor, cordova, desktop, electron, hybrid, ios, ipad, iphone, mobile, phablet, pwa, tablet | + +#### Platforms + +Below is a table listing all the possible platform values along with corresponding descriptions. + +| Platform Name | Description | +| ------------- | ---------------------------------------- | +| android | a device running Android | +| capacitor | a device running Capacitor | +| cordova | a device running Cordova | +| desktop | a desktop device | +| electron | a desktop device running Electron | +| hybrid | a device running Capacitor or Cordova | +| ios | a device running iOS | +| ipad | an iPad device | +| iphone | an iPhone device | +| mobile | a mobile device | +| mobileweb | a web browser running in a mobile device | +| phablet | a phablet device | +| pwa | a PWA app | +| tablet | a tablet device | + +#### Customizing Platform Detection Functions + +The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](../developing/config). Each function takes `window` as a parameter and returns a boolean. + +```tsx +import { IonicModule } from '@ionic/angular'; + +@NgModule({ + ... + imports: [ + BrowserModule, + IonicModule.forRoot({ + platform: { + /** The default `desktop` function returns false for devices with a touchscreen. + * This is not always wanted, so this function tests the User Agent instead. + **/ + 'desktop': (win) => { + const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(win.navigator.userAgent); + return !isMobile; + } + }, + }), + AppRoutingModule + ], + ... +}) +``` + +```ts +type PlatformConfig = { + android?: ((win: Window) => boolean) | undefined; + capacitor?: ((win: Window) => boolean) | undefined; + cordova?: ((win: Window) => boolean) | undefined; + desktop?: ((win: Window) => boolean) | undefined; + electron?: ((win: Window) => boolean) | undefined; + hybrid?: ((win: Window) => boolean) | undefined; + ios?: ((win: Window) => boolean) | undefined; + ipad?: ((win: Window) => boolean) | undefined; + iphone?: ((win: Window) => boolean) | undefined; + mobile?: ((win: Window) => boolean) | undefined; + mobileweb?: ((win: Window) => boolean) | undefined; + phablet?: ((win: Window) => boolean) | undefined; + pwa?: ((win: Window) => boolean) | undefined; + tablet?: ((win: Window) => boolean) | undefined; +}; +``` + +### `platforms` + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Depending on what device you are on, `platforms` can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return `mobile`, `ios`, and `iphone`. | +| **Signature** | `platforms() => string[]` | + +### `ready` + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Returns a promise when the platform is ready and native functionality can be called. If the app is running from within a web browser, then the promise will resolve when the DOM is ready. When the app is running from an application engine such as Cordova, then the promise will resolve when Cordova triggers the `deviceready` event. The resolved value is the `readySource`, which states the platform that was used.

For example, when Cordova is ready, the resolved ready source is `cordova`. The default ready source value will be `dom`. The `readySource` is useful if different logic should run depending on the platform the app is running from. For example, only Capacitor and Cordova can execute the status bar plugin, so the web should not run status bar plugin logic. | +| **Signature** | `ready() => Promise` | + +### `isRTL` + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Returns if this app is using right-to-left language direction or not. We recommend the app's `index.html` file already has the correct `dir` attribute value set, such as `` or ``. [W3C: Structural markup and right-to-left text in HTML](http://www.w3.org/International/questions/qa-html-dir) | +| **Signature** | `isRTL() => boolean` | + +### `isLandscape` + +| | | +| --------------- | ----------------------------------------------- | +| **Description** | Returns `true` if the app is in landscape mode. | +| **Signature** | `isLandscape() => boolean` | + +### `isPortrait` + +| | | +| --------------- | ---------------------------------------------- | +| **Description** | Returns `true` if the app is in portrait mode. | +| **Signature** | `isPortrait() => boolean` | + +### `width` + +| | | +| --------------- | -------------------------------------------------------------------- | +| **Description** | Gets the width of the platform's viewport using `window.innerWidth`. | +| **Signature** | `width() => number` | + +### `height` + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | Gets the height of the platform's viewport using `window.innerHeight`. | +| **Signature** | `height() => number` | + +### `url` + +| | | +| --------------- | -------------------- | +| **Description** | Get the current url. | +| **Signature** | `url() => string` | + +### `testUserAgent` + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | Returns `true` if the expression is included in the user agent string. | +| **Signature** | `testUserAgent(expression: string) => boolean` | + +#### Parameters + +| Name | Type | Description | +| ---------- | ------ | ------------------------------------- | +| expression | string | The string to check in the user agent | + +## Events + +### `pause` + +The `pause` event emits when the native platform puts the application into the background, typically when the user switches to a different application. This event emits when a Cordova/Capacitor app is put into the background but doesn't fire in a standard web browser. + +#### Examples + +```tsx +this.platform.pause.subscribe(async () => { + alert('Pause event detected'); +}); +``` + +### `resize` + +The `resize` event emits when the browser window has changed dimensions. This could be from a browser window being physically resized, or from a device changing orientation. + +#### Examples + +```tsx +this.platform.resize.subscribe(async () => { + alert('Resize event detected'); +}); +``` + +### `resume` + +The `resume` event fires when the native platform pulls the application out from the background. This event emits when a Cordova/Capacitor app comes out from the background but doesn't fire in a standard web browser. + +#### Examples + +```tsx +this.platform.resume.subscribe(async () => { + alert('Resume event detected'); +}); +``` diff --git a/versioned_docs/version-v7/angular/pwa.md b/versioned_docs/version-v7/angular/pwa.md new file mode 100644 index 00000000000..183cbb76295 --- /dev/null +++ b/versioned_docs/version-v7/angular/pwa.md @@ -0,0 +1,166 @@ +--- +title: Progressive Web Apps in Angular +sidebar_label: Progressive Web Apps +--- + + + Make Progressive Web Apps (PWA) in Angular - Ionic Tutorial + + + +## Making your Angular app a PWA + +The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this. + +The `@angular/pwa` package will automatically add a service worker and an app manifest to the app. +To add this package to the app, run: + +```shell +ng add @angular/pwa +``` + +Once this package has been added run `ionic build --prod` and the `www` directory will be ready to deploy as a PWA. + +:::note +By default, the `@angular/pwa` package comes with the Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons. +::: + +:::note +Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers. +::: + +## Service Worker configuration + +After `@angular/pwa` has been added, a new `ngsw-config.json` file will be created at the root of the project. This file is responsible for configuring how Angular's service worker mechanism will handle caching assets. By default, the following will be provided: + +```json +{ + "$schema": "./node_modules/@angular/service-worker/config/schema.json", + "index": "/index.html", + "assetGroups": [ + { + "name": "app", + "installMode": "prefetch", + "resources": { + "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"] + } + }, + { + "name": "assets", + "installMode": "lazy", + "updateMode": "prefetch", + "resources": { + "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"] + } + } + ] +} +``` + +There are two sections in here, one for app specific resources (JS, CSS, HTML) and assets the app will load on demand. Depending on your app, these options can be customized. For a more detailed guide, read [the official guide from the Angular Team.](https://angular.io/guide/service-worker-config) + +## Deploying + +### Firebase + +Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html). + +First, if not already available, [create the project](https://console.firebase.google.com) in Firebase. + +Next, in a Terminal, install the Firebase CLI: + +```shell +npm install -g firebase-tools +``` + +:::note +If it's the first time you use firebase-tools, login to your Google account with `firebase login` command. +::: + +With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts: + +**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys". + +Create a new Firebase project or select an existing one. + +**"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website. + +**"What do you want to use as your public directory?"** Enter "www". + +:::note +Answering this next question will ensure that routing, hard reload, and deep linking work in the app: +::: + +**Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes". + +**"File build/index.html already exists. Overwrite?"** Enter "No". + +**Set up automatic builds and deploys with Github?** Enter "Yes". + +**For which GitHub repository would you like to set up a Github Workflow?** Enter your project name. + +**Set up the workflow to run a build script before every deploy?** Enter "Yes". + +**What script should be run before every deploy?** Enter `npm ci && npm run build`. + +**Set up automatic deployment to your sites live channel when a PR is merged?** Enter "Yes". + +**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main branch name. + +A `firebase.json` config file is generated, configuring the app for deployment. + +The last thing needed is to make sure caching headers are being set correctly. To do this, add a `headers` snippet to the `firebase.json` file. The complete `firebase.json` looks like: + +```json +{ + "hosting": { + "public": "www", + "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ], + "headers": [ + { + "source": "/build/app/**", + "headers": [ + { + "key": "Cache-Control", + "value": "public, max-age=31536000" + } + ] + }, + { + "source": "ngsw-worker.js", + "headers": [ + { + "key": "Cache-Control", + "value": "no-cache" + } + ] + } + ] + } +} +``` + +For more information about the `firebase.json` properties, see the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json). + +Next, build an optimized version of the app by running: + +```shell +ionic build --prod +``` + +Last, deploy the app by running: + +```shell +firebase deploy +``` + +After this completes, the app will be live. diff --git a/versioned_docs/version-v7/angular/slides.md b/versioned_docs/version-v7/angular/slides.md new file mode 100644 index 00000000000..4ceb1d3f6df --- /dev/null +++ b/versioned_docs/version-v7/angular/slides.md @@ -0,0 +1,366 @@ +--- +title: Migrating from ion-slides to Swiper.js +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Set Up Swiper.js for Angular Slides [Example] | Ionic + + + +:::caution Looking for `ion-slides`? +`ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below. +::: + +We recommend Swiper.js if you need a modern touch slider component. Swiper 9 introduced Swiper Element as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element. + +## Getting Started + +First, update to the latest version of Ionic: + +```shell +npm install @ionic/angular@latest +``` + +Once that is done, install the Swiper dependency in your project: + +```shell +npm install swiper@latest +``` + +Next, we need to add the `CUSTOM_ELEMENTS_SCHEMA`, which tells Angular that we will be using custom elements. This can be done in either `app.module.ts`, or the module file for the component where you will be using Swiper. + +```typescript +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +@NgModule({ + schemas: [..., CUSTOM_ELEMENTS_SCHEMA] +}); +... +``` + +Finally, we need to call Swiper's `register` function to globally register Swiper's custom elements. This should only be done once, so place it in `app.component.ts`. + +```typescript +import { register } from 'swiper/element/bundle'; + +register(); + +@Component({ + ... +}) +... +``` + +From there, we just have to replace `ion-slides` elements with `swiper-container` and `ion-slide` elements with `swiper-slide`. Note that these custom elements do not need to be imported, as calling `register` tells Angular about them on its own. + +```html + + Slide 1 + Slide 2 + Slide 3 + +``` + +## Bundled vs. Core Versions + +By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features. + +If you would like to use the Core version instead, which does not include additional modules automatically, see https://swiperjs.com/element#core-version-and-modules. The rest of this migration guide will assume you are using the bundled version. + +## Swiping with Style + +To migrate over your CSS, first update your selectors to target the new custom elements instead: + +| ion-slides Selector | Swiper Selector | +| ------------------- | ------------------ | +| `ion-slides` | `swiper-container` | +| `ion-slide` | `swiper-slide` | + +If you were using the CSS custom properties found on `ion-slides`, below is a list of corresponding properties used in Swiper. + +| `ion-slides` CSS property | `swiper-container` CSS property | +| ---------------------------------- | ------------------------------------------- | +| `--bullet-background` | `--swiper-pagination-bullet-inactive-color` | +| `--bullet-background-active` | `--swiper-pagination-color` | +| `--progress-bar-background` | `--swiper-pagination-progressbar-bg-color` | +| `--progress-bar-background-active` | `--swiper-pagination-color` | +| `--scroll-bar-background` | `--swiper-scrollbar-bg-color` | +| `--scroll-bar-background-active` | `--swiper-scrollbar-drag-bg-color` | + +For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See https://swiperjs.com/element#injecting-styles for instructions. + +### Additional `ion-slides` Styles + +The `ion-slides` component had additional styling that helped create a native look and feel. These styles are **not** required to use Swiper.js with Ionic, but if you would like to maintain the look of `ion-slides` as closely as possible, add the following CSS to your `global.scss`: + +```css +swiper-container { + --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc); + --swiper-pagination-color: var(--ion-color-primary, #3880ff); + --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25); + --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1); + --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5); +} + +swiper-slide { + display: flex; + position: relative; + + flex-direction: column; + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; + + font-size: 18px; + + text-align: center; + box-sizing: border-box; +} + +swiper-slide img { + width: auto; + max-width: 100%; + height: auto; + max-height: 100%; +} +``` + +## The IonicSlides Module + +With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic. + +It is recommended to review the [properties](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/slides/IonicSlides.ts) set by `IonicSlides` and determine which ones you would like to customize. + +We can install the `IonicSlides` module by importing and passing it to the `modules` property of `swiper-container` as an array: + + + + +```typescript +// home.page.ts + +import { IonicSlides } from '@ionic/angular'; + +@Component({ + ... +}) +export class HomePage { + swiperModules = [IonicSlides]; +} +``` + + + + +```typescript +// home.page.ts + +import { IonicSlides } from '@ionic/angular/standalone'; + +@Component({ + ... +}) +export class HomePage { + swiperModules = [IonicSlides]; +} +``` + + + + +```html + + + ... +``` + +:::note +If you are using the Core version of Swiper and have installed additional modules, ensure that `IonicSlides` is the last module in the array. This will let it automatically customize the settings of modules such as Pagination, Scrollbar, Zoom, and more. +::: + +## Properties + +Swiper options should be provided as individual properties directly on the `` component. + +Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` options set: + +```html + + Slide 1 + Slide 3 + Slide 3 + +``` + +To set these options as properties directly on `` we would do the following: + +```html + + Slide 1 + Slide 2 + Slide 3 + +``` + +Below is a full list of property changes when going from `ion-slides` to Swiper Element: + +| Name | Notes | +| ------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| options | Set each option as a property directly on the `` component. | +| mode | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. | +| pager | Use the `pagination` property instead. | + +:::note +All properties available in Swiper Element can be found at https://swiperjs.com/swiper-api#parameters. +::: + +## Events + +Since the `swiper-container` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them. Additionally, all event names should be lowercase instead of camelCase. + +Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event: + +```html + + Slide 1 + Slide 3 + Slide 3 + +``` + +To migrate, we would change the name of the event to `slidechange`: + +```html + + Slide 1 + Slide 2 + Slide 3 + +``` + +Below is a full list of event name changes when going from `ion-slides` to Swiper Angular: + +| ion-slides Event | Swiper Event | +| ------------------------- | ---------------------------- | +| `ionSlideWillChange` | `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. +::: + +## Methods + +Most methods have been removed in favor of directly accessing the properties of the Swiper instance. To access the Swiper instance, first get a reference to the `` element (such as through `ViewChild`), then access its `swiper` prop: + +```html + + + + Slide 1 + Slide 2 + Slide 3 + +``` + +```typescript +// slides.component.ts + +import { ..., ElementRef, ViewChild } from '@angular/core'; + +@Component({ + ... +}) +export class SlidesExample { + @ViewChild('swiper') + swiperRef: ElementRef | undefined; + + logActiveIndex() { + console.log(this.swiperRef?.nativeElement.swiper.activeIndex); + } +} +``` + +Below is a full list of method changes when going from `ion-slides` to Swiper Element: + +| ion-slides Method | Notes | +| -------------------- | ------------------------------------------------------------------------------------ | +| `getActiveIndex()` | Use the `activeIndex` property instead. | +| `getPreviousIndex()` | Use the `previousIndex` property instead. | +| `getSwiper()` | Get a reference to the Swiper instance using the `swiper` prop. See example above. | +| `isBeginning()` | Use the `isBeginning` property instead. | +| `isEnd()` | Use the `isEnd` property instead. | +| `length()` | Use the `slides` property instead. (i.e swiper.slides.length) | +| `lockSwipeToNext()` | Use the `allowSlidesNext` property instead. | +| `lockSwipeToPrev()` | Use the `allowSlidePrev` property instead. | +| `lockSwipes()` | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. | +| `startAutoplay()` | Use the `autoplay` property instead. | +| `stopAutoplay()` | Use the `autoplay` property instead. | + +:::note +All methods and properties available on the Swiper instance can be found at https://swiperjs.com/swiper-api#methods-and-properties. +::: + +## Effects + +Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect: + +```html + ... +``` + +:::note +For more information on effects in Swiper, please see https://swiperjs.com/swiper-api#fade-effect. +::: + +## Wrap Up + +Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper Element documentation and then referencing the Swiper API docs. + +## FAQ + +### Where can I find an example of this migration? + +You can find a sample app with `ion-slides` and the equivalent Swiper usage at https://github.com/ionic-team/slides-migration-samples. + +### Where can I get help with this migration? + +If you are running into issues with the migration, please create a post on the [Ionic Forum](https://forum.ionicframework.com/). + +### Where do I file bug reports? + +Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to see if your issue can be resolved by the community. + +If you are running into problems with the Swiper library, new bugs should be filed on the Swiper repo: https://github.com/nolimits4web/swiper/issues + +If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework repo: https://github.com/ionic-team/ionic-framework/issues diff --git a/versioned_docs/version-v7/angular/storage.md b/versioned_docs/version-v7/angular/storage.md new file mode 100644 index 00000000000..dad80e77f3a --- /dev/null +++ b/versioned_docs/version-v7/angular/storage.md @@ -0,0 +1,32 @@ +--- +title: Data Storage +sidebar_label: Storage +--- + + + Angular App Data Storage Options - Ionic Documentation + + + +There are variety of options available for storing data within an Ionic app. + +Here are two official Ionic options: + +## Ionic Secure Storage + +For teams building mission-critical apps or requiring encryption support, [Ionic Secure Storage](https://ionic.io/docs/secure-storage) is an official premium solution from the Ionic team that provides a cross-platform data storage system that works on iOS and Android. + +It makes it easy to build high performance, offline-ready Ionic apps across iOS, Android, and the web. + +[Learn more](https://ionic.io/products/secure-storage) + +## @ionic/storage + +For developers not requiring encryption nor relational data support, [@ionic/storage](https://github.com/ionic-team/ionic-storage) is an open source key/value API for building apps that work across storage engines on multiple platforms. + +Additionally, Ionic Secure Storage has a driver that works with the key/value API in `@ionic/storage` while providing encryption and SQLite support. + +Learn more about [@ionic/storage](https://github.com/ionic-team/ionic-storage) diff --git a/versioned_docs/version-v7/angular/testing.md b/versioned_docs/version-v7/angular/testing.md new file mode 100644 index 00000000000..1278551b0b9 --- /dev/null +++ b/versioned_docs/version-v7/angular/testing.md @@ -0,0 +1,593 @@ +--- +title: Testing +--- + + + Angular Unit and End-to-End Testing for Ionic App Components + + + +When an `@ionic/angular` application is generated using the Ionic CLI, it is automatically set up for unit testing and end-to-end testing of the application. This is the same setup that is used by the Angular CLI. Refer to the Angular Testing Guide for detailed information on testing Angular applications. + +## Testing Principles + +When testing an application, it is best to keep in mind that testing can show if defects are present in a system. However, it is impossible to prove that any non-trivial system is completely free of defects. For this reason, the goal of testing is not to verify that the code is correct but to find problems within the code. This is a subtle but important distinction. + +If we set out to prove that the code is correct, we are more likely to stick to the happy path through the code. If we set out to find problems, we are more likely to more fully exercise the code and find the bugs that are lurking there. + +It is also best to begin testing an application from the very start. This allows defects to be found early in the process when they are easier to fix. This also allows code to be refactored with confidence as new features are added to the system. + +## Unit Testing + +Unit tests exercise a single unit of code (component, page, service, pipe, etc) in isolation from the rest of the system. Isolation is achieved through the injection of mock objects in place of the code's dependencies. The mock objects allow the test to have fine-grained control of the outputs of the dependencies. The mocks also allow the test to determine which dependencies have been called and what has been passed to them. + +Well-written unit tests are structured such that the unit of code and the features it contains are described via `describe()` callbacks. The requirements for the unit of code and its features are tested via `it()` callbacks. When the descriptions for the `describe()` and `it()` callbacks are read, they make sense as a phrase. When the descriptions for nested `describe()`s and a final `it()` are concatenated together, they form a sentence that fully describes the test case. + +Since unit tests exercise the code in isolation, they are fast, robust, and allow for a high degree of code coverage. + +### Using Mocks + +Unit tests exercise a code module in isolation. To facilitate this, we recommend using Jasmine (https://jasmine.github.io/). Jasmine creates mock objects (which Jasmine calls "spies") to take the place of dependencies while testing. When a mock object is used, the test can control the values returned by calls to that dependency, making the current test independent of changes made to the dependency. This also makes the test setup easier, allowing the test to only be concerned with the code within the module under test. + +Using mocks also allows the test to query the mock to determine if it was called and how it was called via the `toHaveBeenCalled*` set of functions. Tests should be as specific as possible with these functions, favoring calls to `toHaveBeenCalledTimes` over calls to `toHaveBeenCalled` when testing that a method has been called. That is `expect(mock.foo).toHaveBeenCalledTimes(1)` is better than `expect(mock.foo).toHaveBeenCalled()`. The opposite advice should be followed when testing that something has not been called (`expect(mock.foo).not.toHaveBeenCalled()`). + +There are two common ways to create mock objects in Jasmine. Mock objects can be constructed from scratch using `jasmine.createSpy` and `jasmine.createSpyObj` or spies can be installed onto existing objects using `spyOn()` and `spyOnProperty()`. + +#### Using `jasmine.createSpy` and `jasmine.createSpyObj` + +`jasmine.createSpyObj` creates a full mock object from scratch with a set of mock methods defined on creation. This is useful in that it is very simple. Nothing needs to be constructed or injected into the test. The disadvantage of using this function is that it allows the creation of objects that may not match the real objects. + +`jasmine.createSpy` is similar but it creates a stand-alone mock function. + +#### Using `spyOn()` and `spyOnProperty()` + +`spyOn()` installs the spy on an existing object. The advantage of using this technique is that if an attempt is made to spy on a method that does not exist on the object, an exception is raised. This prevents the test from mocking methods that do not exist. The disadvantage is that the test needs a fully formed object to begin with, which may increase the amount of test setup required. + +`spyOnProperty()` is similar with the difference being that it spies on a property and not a method. + +### General Testing Structure + +Unit tests are contained in `spec` files with one `spec` file per entity (component, page, service, pipe, etc.). The `spec` files live side-by-side with and are named after the source that they are testing. For example, if the project has a service called WeatherService, the code for it is in a file named `weather.service.ts` with the tests in a file named `weather.service.spec.ts`. Both of those files are in the same folder. + +The `spec` files themselves contain a single `describe` call that defines that overall test. Nested within it are other `describe` calls that define major areas of functionality. Each `describe` call can contain setup and teardown code (generally handled via `beforeEach` and `afterEach` calls), more `describe` calls forming a hierarchical breakdown of functionality, and `it` calls which define individual test cases. + +The `describe` and `it` calls also contain a descriptive text label. In well-formed tests, the `describe` and `it` calls combine with their labels to perform proper phrases and the full label for each test case, formed by combining the `describe` and `it` labels, creates a full sentence. + +For example: + +```tsx +describe('Calculation', () => { + describe('divide', () => { + it('calculates 4 / 2 properly' () => {}); + it('cowardly refuses to divide by zero' () => {}); + ... + }); + + describe('multiply', () => { + ... + }); +}); +``` + +The outer `describe` call states that the `Calculation` service is being tested, the inner `describe` calls state exactly what functionality is being tested, and the `it` calls state what the test cases are. When run the full label for each test case is a sentence that makes sense (Calculation divide cowardly refuses to divide by zero). + +### Pages and Components + +Pages are just Angular components. Thus, pages and components are both tested using Angular's Component Testing guidelines. + +Since pages and components contain both TypeScript code and HTML template markup it is possible to perform both component class testing and component DOM testing. When a page is created, the template test that is generated looks like this: + +```tsx +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TabsPage } from './tabs.page'; + +describe('TabsPage', () => { + let component: TabsPage; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [TabsPage], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }).compileComponents(); + + fixture = TestBed.createComponent(TabsPage); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); +``` + +When doing component class testing, the component object is accessed using the component object defined via `component = fixture.componentInstance;`. This is an instance of the component class. When doing DOM testing, the `fixture.nativeElement` property is used. This is the actual `HTMLElement` for the component, which allows the test to use standard HTML API methods such as `HTMLElement.querySelector` in order to examine the DOM. + +## Services + +Services often fall into one of two broad categories: utility services that perform calculations and other operations, and data services that perform primarily HTTP operations and data manipulation. + +### Basic Service Testing + +The suggested way to test most services is to instantiate the service and manually inject mocks for any dependency the service has. This way, the code can be tested in isolation. + +Let's say that there is a service with a method that takes an array of timecards and calculates net pay. Let's also assume that the tax calculations are handled via another service that the current service depends on. This payroll service could be tested as such: + +```tsx +import { PayrollService } from './payroll.service'; + +describe('PayrollService', () => { + let service: PayrollService; + let taxServiceSpy; + + beforeEach(() => { + taxServiceSpy = jasmine.createSpyObj('TaxService', { + federalIncomeTax: 0, + stateIncomeTax: 0, + socialSecurity: 0, + medicare: 0 + }); + service = new PayrollService(taxServiceSpy); + }); + + describe('net pay calculations', () => { + ... + }); +}); +``` + +This allows the test to control the values returned by the various tax calculations via mock setup such as `taxServiceSpy.federalIncomeTax.and.returnValue(73.24)`. This allows the "net pay" tests to be independent of the tax calculation logic. When the tax codes change, only the tax service related code and tests need to change. The tests for the net pay can continue to operate as they are since these tests do not care how the tax is calculated, just that the value is applied properly. + +The scaffolding that is used when a service is generated via `ionic g service name` uses Angular's testing utilities and sets up a testing module. Doing so is not strictly necessary. That code may be left in, however, allowing the service to be built manually or injected as such: + +```tsx +import { TestBed, inject } from '@angular/core/testing'; + +import { PayrollService } from './payroll.service'; +import { TaxService } from './tax.service'; + +describe('PayrolService', () => { + let taxServiceSpy; + + beforeEach(() => { + taxServiceSpy = jasmine.createSpyObj('TaxService', { + federalIncomeTax: 0, + stateIncomeTax: 0, + socialSecurity: 0, + medicare: 0, + }); + TestBed.configureTestingModule({ + providers: [PayrollService, { provide: TaxService, useValue: taxServiceSpy }], + }); + }); + + it('does some test where it is injected', inject([PayrollService], (service: PayrollService) => { + expect(service).toBeTruthy(); + })); + + it('does some test where it is manually built', () => { + const service = new PayrollService(taxServiceSpy); + expect(service).toBeTruthy(); + }); +}); +``` + +#### Testing HTTP Data Services + +Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please see Angular's Angular's Testing HTTP requests guide. + +This basic setup for such a test looks like this: + +```tsx +import { HttpBackend, HttpClient } from '@angular/common/http'; +import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing'; +import { TestBed, inject } from '@angular/core/testing'; + +import { IssTrackingDataService } from './iss-tracking-data.service'; + +describe('IssTrackingDataService', () => { + let httpClient: HttpClient; + let httpTestingController: HttpTestingController; + let issTrackingDataService: IssTrackingDataService; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [IssTrackingDataService], + }); + + httpClient = TestBed.get(HttpClient); + httpTestingController = TestBed.get(HttpTestingController); + issTrackingDataService = new IssTrackingDataService(httpClient); + }); + + it('exists', inject([IssTrackingDataService], (service: IssTrackingDataService) => { + expect(service).toBeTruthy(); + })); + + describe('location', () => { + it('gets the location of the ISS now', () => { + issTrackingDataService.location().subscribe((x) => { + expect(x).toEqual({ longitude: -138.1719, latitude: 44.4423 }); + }); + const req = httpTestingController.expectOne('http://api.open-notify.org/iss-now.json'); + expect(req.request.method).toEqual('GET'); + req.flush({ + iss_position: { longitude: '-138.1719', latitude: '44.4423' }, + timestamp: 1525950644, + message: 'success', + }); + httpTestingController.verify(); + }); + }); +}); +``` + +### Pipes + +A pipe is like a service with a specifically defined interface. It is a class that contains one public method, `transform`, which manipulates the input value (and other optional arguments) in order to create the output that is rendered on the page. To test a pipe: instantiate the pipe, call the transform method, and verify the results. + +As a simple example, let's look at a pipe that takes a `Person` object and formats the name. For the sake of simplicity, let's say a `Person` consists of an `id`, `firstName`, `lastName`, and `middleInitial`. The requirements for the pipe are to print the name as "Last, First M." handling situations where a first name, last name, or middle initial do not exist. Such a test might look like this: + +```tsx +import { NamePipe } from './name.pipe'; + +import { Person } from '../../models/person'; + +describe('NamePipe', () => { + let pipe: NamePipe; + let testPerson: Person; + + beforeEach(() => { + pipe = new NamePipe(); + testPerson = { + id: 42, + firstName: 'Douglas', + lastName: 'Adams', + middleInitial: 'N', + }; + }); + + it('exists', () => { + expect(pipe).toBeTruthy(); + }); + + it('formats a full name properly', () => { + expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas N.'); + }); + + it('handles having no middle initial', () => { + delete testPerson.middleInitial; + expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas'); + }); + + it('handles having no first name', () => { + delete testPerson.firstName; + expect(pipe.transform(testPerson)).toBeEqual('Adams N.'); + }); + + it('handles having no last name', () => { + delete testPerson.lastName; + expect(pipe.transform(testPerson)).toBeEqual('Douglas N.'); + }); +}); +``` + +It is also beneficial to exercise the pipe via DOM testing in the components and pages that utilize the pipe. + +## End-to-end Testing + +End-to-end testing is used to verify that an application works as a whole and often includes a connection to live data. Whereas unit tests focus on code units in isolation and thus allow for low-level testing of the application logic, end-to-end tests focus on various user stories or usage scenarios, providing high-level testing of the overall flow of data through the application. Whereas unit tests try to uncover problems with an application's logic, end-to-end tests try to uncover problems that occur when those individual units are used together. End-to-end tests uncover problems with the overall architecture of the application. + +Since end-to-end tests exercise user stories and cover the application as a whole rather than individual code modules, end-to-end tests exist in their own application in the project apart from the code for the main application itself. Most end-to-end tests operate by automating common user interactions with the application and examining the DOM to determine the results of those interactions. + +### Test Structure + +When an `@ionic/angular` application is generated, a default end-to-end test application is generated in the `e2e` folder. This application uses Protractor to control the browser and Jasmine to structure and execute the tests. The application initially consists of four files: + +- `protractor.conf.js` - the Protractor configuration file +- `tsconfig.e2e.json` - specific TypeScript configuration for the testing application +- `src/app.po.ts` - a page object containing methods that navigate the application, query elements in the DOM, and manipulate elements on the page +- `src/app.e2e-spec.ts` - a testing script + +#### Page Objects + +End-to-end tests operate by automating common user interactions with the application, waiting for the application to respond, and examining the DOM to determine the results of the interaction. This involves a lot of DOM manipulation and examination. If this were all done manually, the tests would be very brittle and difficult to read and maintain. + +Page objects encapsulate the HTML for a single page in a TypeScript class, providing an API that the test scripts use to interact with the application. The encapsulation of the DOM manipulation logic in page objects makes the tests more readable and far easier to reason about, lowering the maintenance costs of the test. Creating well-crafted page objects is the key to creating high quality and maintainable end-to-end tests. + +##### Base Page Object + +A lot of tests rely on actions such as waiting for a page to be visible, entering text into an input, and clicking a button. The methods used to do this remain consistent with only the CSS selectors used to get the appropriate DOM element changing. Therefore it makes sense to abstract this logic into a base class that can be used by the other page objects. + +Here is an example that implements a few basic methods that all page objects will need to support. + +```tsx +import { browser, by, element, ExpectedConditions } from 'protractor'; + +export class PageObjectBase { + private path: string; + protected tag: string; + + constructor(tag: string, path: string) { + this.tag = tag; + this.path = path; + } + + load() { + return browser.get(this.path); + } + + rootElement() { + return element(by.css(this.tag)); + } + + waitUntilInvisible() { + browser.wait(ExpectedConditions.invisibilityOf(this.rootElement()), 3000); + } + + waitUntilPresent() { + browser.wait(ExpectedConditions.presenceOf(this.rootElement()), 3000); + } + + waitUntilNotPresent() { + browser.wait(ExpectedConditions.not(ExpectedConditions.presenceOf(this.rootElement())), 3000); + } + + waitUntilVisible() { + browser.wait(ExpectedConditions.visibilityOf(this.rootElement()), 3000); + } + + getTitle() { + return element(by.css(`${this.tag} ion-title`)).getText(); + } + + protected enterInputText(sel: string, text: string) { + const el = element(by.css(`${this.tag} ${sel}`)); + const inp = el.element(by.css('input')); + inp.sendKeys(text); + } + + protected enterTextareaText(sel: string, text: string) { + const el = element(by.css(`${this.tag} ${sel}`)); + const inp = el.element(by.css('textarea')); + inp.sendKeys(text); + } + + protected clickButton(sel: string) { + const el = element(by.css(`${this.tag} ${sel}`)); + browser.wait(ExpectedConditions.elementToBeClickable(el)); + el.click(); + } +} +``` + +##### Per-Page Abstractions + +Each page in the application will have its own page object class that abstracts the elements on that page. If a base page object class is used, creating the page object involves mostly creating custom methods for elements that are specific to that page. Often, these custom elements take advantage of methods in the base class in order to perform the work that is required. + +Here is an example page object for a simple but typical login page. Notice that many of the methods, such as `enterEMail()`, call methods in the base class that perform the bulk of the work. + +```tsx +import { browser, by, element, ExpectedConditions } from 'protractor'; +import { PageObjectBase } from './base.po'; + +export class LoginPage extends PageObjectBase { + constructor() { + super('app-login', '/login'); + } + + waitForError() { + browser.wait(ExpectedConditions.presenceOf(element(by.css('.error'))), 3000); + } + + getErrorMessage() { + return element(by.css('.error')).getText(); + } + + enterEMail(email: string) { + this.enterInputText('#email-input', email); + } + + enterPassword(password: string) { + this.enterInputText('#password-input', password); + } + + clickSignIn() { + this.clickButton('#signin-button'); + } +} +``` + +#### Testing Scripts + +Similar to unit tests, end-to-end test scripts consist of nested `describe()` and `it()` functions. In the case of end-to-end tests, the `describe()` functions generally denote specific scenarios with the `it()` functions denoting specific behaviors that should be exhibited by the application as actions are performed within that scenario. + +Also similar to unit tests, the labels used in the `describe()` and `it()` functions should make sense both with the "describe" or "it" and when concatenated together to form the complete test case. + +Here is a sample end-to-end test script that exercises some typical login scenarios. + +```tsx +import { AppPage } from '../page-objects/pages/app.po'; +import { AboutPage } from '../page-objects/pages/about.po'; +import { CustomersPage } from '../page-objects/pages/customers.po'; +import { LoginPage } from '../page-objects/pages/login.po'; +import { MenuPage } from '../page-objects/pages/menu.po'; +import { TasksPage } from '../page-objects/pages/tasks.po'; + +describe('Login', () => { + const about = new AboutPage(); + const app = new AppPage(); + const customers = new CustomersPage(); + const login = new LoginPage(); + const menu = new MenuPage(); + const tasks = new TasksPage(); + + beforeEach(() => { + app.load(); + }); + + describe('before logged in', () => { + it('displays the login screen', () => { + expect(login.rootElement().isDisplayed()).toEqual(true); + }); + + it('allows in-app navigation to about', () => { + menu.clickAbout(); + about.waitUntilVisible(); + login.waitUntilInvisible(); + }); + + it('does not allow in-app navigation to tasks', () => { + menu.clickTasks(); + app.waitForPageNavigation(); + expect(login.rootElement().isDisplayed()).toEqual(true); + }); + + it('does not allow in-app navigation to customers', () => { + menu.clickCustomers(); + app.waitForPageNavigation(); + expect(login.rootElement().isDisplayed()).toEqual(true); + }); + + it('displays an error message if the login fails', () => { + login.enterEMail('test@test.com'); + login.enterPassword('bogus'); + login.clickSignIn(); + login.waitForError(); + expect(login.getErrorMessage()).toEqual('The password is invalid or the user does not have a password.'); + }); + + it('navigates to the tasks page if the login succeeds', () => { + login.enterEMail('test@test.com'); + login.enterPassword('testtest'); + login.clickSignIn(); + tasks.waitUntilVisible(); + }); + }); + + describe('once logged in', () => { + beforeEach(() => { + tasks.waitUntilVisible(); + }); + + it('allows navigation to the customers page', () => { + menu.clickCustomers(); + customers.waitUntilVisible(); + tasks.waitUntilInvisible(); + }); + + it('allows navigation to the about page', () => { + menu.clickAbout(); + about.waitUntilVisible(); + tasks.waitUntilInvisible(); + }); + + it('allows navigation back to the tasks page', () => { + menu.clickAbout(); + tasks.waitUntilInvisible(); + menu.clickTasks(); + tasks.waitUntilVisible(); + }); + }); +}); +``` + +### Configuration + +The default configuration uses the same `environment.ts` file that is used for development. In order to provide better control over the data used by the end-to-end tests, it is often useful to create a specific environment for testing and use that environment for the tests. This section shows one possible way to create this configuration. + +#### Testing Environment + +Setting up a testing environment involves creating a new environment file that uses a dedicated testing backend, updating the `angular.json` file to use that environment, and modifying the `e2e` script in the `package.json` to specify the `test` environment. + +##### Create the `environment.e2e.ts` File + +The Angular `environment.ts` and `environment.prod.ts` files are often used to store information such as the base URL for the application's backend data services. Create an `environment.e2e.ts` that provides the same information, only connecting to backend services that are dedicated to testing rather than the development or production backend services. Here is an example: + +```tsx +export const environment = { + production: false, + databaseURL: 'https://e2e-test-api.my-great-app.com', + projectId: 'my-great-app-e2e', +}; +``` + +##### Modify the `angular.json` File + +The `angular.json` file needs to be modified to use this file. This is a layered process. Follow the XPaths listed below to add the configuration that is required. + +Add a configuration at `/projects/app/architect/build/configurations` called `test` that does the file replacement: + +```json +"test": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.e2e.ts" + } + ] +} +``` + +Add a configuration at `/projects/app/architect/serve/configurations` called `test` that points the browser target at the `test` build configuration that was defined above. + +```json +"test": { + "browserTarget": "app:build:test" +} +``` + +Add a configuration at `/projects/app-e2e/architect/e2e/configurations` called `test` that does points the dev server target at the `test` serve configuration defined above. + +```json +"test": { + "devServerTarget": "app:serve:test" +} +``` + +##### Modify the `package.json` File + +Modify the `package.json` file so that `npm run e2e` uses the `test` configuration. + +```json +"scripts": { + "e2e": "ng e2e --configuration=test", + "lint": "ng lint", + "ng": "ng", + "start": "ng serve", + "test": "ng test", + "test:dev": "ng test --browsers=ChromeHeadlessCI", + "test:ci": "ng test --no-watch --browsers=ChromeHeadlessCI" +}, +``` + +#### Test Cleanup + +If the end-to-end tests modify data in any way it is helpful to reset the data to a known state once the test completes. One way to do that is to: + +1. Create an endpoint that performs the cleanup. +1. Add a `onCleanUp()` function to the `config` object exported by the `protractor.conf.js` file. + +Here is an example: + +```javascript +onCleanUp() { + const axios = require('axios'); + return axios + .post( + 'https://e2e-test-api.my-great-app.com/purgeDatabase', + {} + ) + .then(res => { + console.log(res.data); + }) + .catch(err => console.log(err)); +} +``` diff --git a/versioned_docs/version-v7/angular/virtual-scroll.md b/versioned_docs/version-v7/angular/virtual-scroll.md new file mode 100644 index 00000000000..634821b18f6 --- /dev/null +++ b/versioned_docs/version-v7/angular/virtual-scroll.md @@ -0,0 +1,133 @@ +# Virtual Scroll + +:::caution Looking for `ion-virtual-scroll`? + +`ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below. + +::: + +## Installation + +To setup the CDK Scroller, first install `@angular/cdk`: + +```shell +npm add @angular/cdk +``` + +This provides a collection of different utilities, but we'll focus on `ScrollingModule` for now. + +When we want to use the CDK Scroller, we'll need to import the module in our component. For example, in a tabs starter project, we can add our import to the `tabs1.module.ts` file. + +```diff + import { IonicModule } from '@ionic/angular'; + import { NgModule } from '@angular/core'; + import { CommonModule } from '@angular/common'; + import { FormsModule } from '@angular/forms'; + import { Tab1Page } from './tab1.page'; + import { ExploreContainerComponentModule } from '../explore-container/explore-container.module'; ++ import { ScrollingModule } from '@angular/cdk/scrolling'; + import { Tab1PageRoutingModule } from './tab1-routing.module'; + @NgModule({ + imports: [ + IonicModule, + CommonModule, + FormsModule, + ExploreContainerComponentModule, + Tab1PageRoutingModule, ++ ScrollingModule + ], + declarations: [Tab1Page] + }) + export class Tab1PageModule {} +``` + +With this added, we have access to the Virtual Scroller in the Tab1Page component. + +## Usage + +The CDK Virtual Scroller can be added to a component by adding the `cdk-virtual-scroll-viewport` to a component's template. + +```html + + + +``` + +`cdk-virtual-scroll-viewport` becomes the root of our scrollable content and is responsible for recycling DOM nodes as they scroll out of view. + +The DOM nodes at this point can be any content needed for an app. The difference is that when we want to iterate over a collection, `*cdkVirtualFor` is used instead of `*ngFor`. + +```html + + + + + + + + {{item }} + + + + +``` + +Here, `items` is an array, but it can be an array, `Observable`, or `DataSource`. `DataSource` is an abstract class that can provide the data needed as well as utility methods. For more details, check out the [CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview). + +The component is not complete yet as the `cdk-virtual-scroll-viewport` needs to know how big each node will be as well as the min/max buffer sizes. + +At the moment, CDK Virtual Scroller only supports fixed sized elements, but dynamic sized elements are planned for the future. For the `Tab1Page` component, since it is only rendering an item, it can be hard-coded to a fixed size. + +The min/max buffer size tells the scroller "render as many nodes as it takes to meet this minimum height, but not over this". + +```html + +``` + +For this case, the `cdk-virtual-scroll-viewport` will render cells at a height 56px until it reaches a height of 900px, but no more at 1350px. These numbers are arbitrary, so be sure to test out what values will work in a real use case. + +Putting everything together, the final HTML should look like: + +```html + + + + + + + + {{item }} + + + + +``` + +The last piece needed is a some CSS to size the viewport correctly. In the `tab1.page.scss` file, add the following + +```scss +cdk-virtual-scroll-viewport { + height: 100%; + width: 100%; +} +``` + +Since the viewport is built to fit various use cases, the default sizing is not set and is up to developers to set. + +## Usage with Ionic Components + +Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. + +For example: + +```html + + + + + +``` + +## Further Reading + +This only covers a small portion of what the CDK Virtual Scroller is capable of. For more details, please see the [Angular CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview). diff --git a/versioned_docs/version-v7/angular/your-first-app.md b/versioned_docs/version-v7/angular/your-first-app.md new file mode 100644 index 00000000000..06abbc374ee --- /dev/null +++ b/versioned_docs/version-v7/angular/your-first-app.md @@ -0,0 +1,176 @@ +--- +title: 'Your First Ionic App: Angular' +sidebar_label: Build Your First App +--- + + + Build Your First Ionic Mobile App: Angular Development Tutorial + + + +The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step. + +Here’s the finished app running on all 3 platforms: + + + +:::note +Looking for the previous version of this guide that covered Ionic 4 and Cordova? [See here.](../developer-resources/guides/first-app-v4/intro.md) +::: + +## What We'll Build + +We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device. + +Highlights include: + +- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](https://ionicframework.com/docs/components). +- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime. +- Photo Gallery functionality powered by the Capacitor [Camera](https://capacitorjs.com/docs/apis/camera), [Filesystem](https://capacitorjs.com/docs/apis/filesystem), and [Preferences](https://capacitorjs.com/docs/apis/preferences) APIs. + +Find the complete app code referenced in this guide [on GitHub](https://github.com/ionic-team/photo-gallery-capacitor-ng). + +## Download Required Tools + +Download and install these right away to ensure an optimal Ionic development experience: + +- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version here](https://nodejs.org/en/). +- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/). +- **Command-line interface/terminal (CLI)**: + - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell + CLI, running in Administrator mode. + - **Mac/Linux** users, virtually any terminal will work. + +## Install Ionic Tooling + +Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens: + +:::note +To open a terminal in Visual Studio Code, go to Terminal -> New Terminal. +::: + +```shell +npm install -g @ionic/cli native-run cordova-res +``` + +:::note +The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. + +Consider setting up npm to operate globally without elevated permissions. See [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +::: + +## Create an App + +Next, create an Ionic Angular app that uses the “Tabs” starter template and adds Capacitor for native functionality: + +```shell +ionic start photo-gallery tabs --type=angular --capacitor +``` + +This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily! + +Next, change into the app folder: + +```shell +cd photo-gallery +``` + +Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work: + +```shell +npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem +``` + +### PWA Elements + +Some Capacitor plugins, including the Camera API, provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/ionic-pwa-elements). + +It's a separate dependency, so install it next: + +```shell +npm install @ionic/pwa-elements +``` + +Next, import `@ionic/pwa-elements` by editing `src/main.ts`. + +```tsx +import { defineCustomElements } from '@ionic/pwa-elements/loader'; + +// Call the element loader before the bootstrapModule/bootstrapApplication call +defineCustomElements(window); +``` + +That’s it! Now for the fun part - let’s see the app in action. + +## Run the App + +Run this command next: + +```shell +ionic serve +``` + +And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed. + +## Photo Gallery!!! + +There are three tabs. Click on the Tab2 tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately! + +![Before and after going through this tutorial](/img/guides/first-app-cap-ng/email-photogallery.gif) + +Open the photo-gallery app folder in your code editor of choice, then navigate to `/src/app/tab2/tab2.page.html`. We see: + +```html + + + Tab 2 + + + + + + + Tab 2 + + + +``` + +`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](https://ionicframework.com/docs/api/title#collapsible-large-titles) support). Rename both `ion-title` elements to: + +```html +Photo Gallery +``` + +We put the visual aspects of our app into ``. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](https://ionicframework.com/docs/api/fab) (FAB) to the bottom of the page and set the camera image as the icon. + +```html + + + + + + + +``` + +Next, open `src/app/tabs/tabs.page.html`. Change the label to “Photos” and the icon name to “images”: + +```html + + + Photos + +``` + +Save all changes to see them automatically applied in the browser. That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android. diff --git a/versioned_docs/version-v7/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v7/angular/your-first-app/2-taking-photos.md new file mode 100644 index 00000000000..2c94527390e --- /dev/null +++ b/versioned_docs/version-v7/angular/your-first-app/2-taking-photos.md @@ -0,0 +1,134 @@ +--- +title: Taking Photos with the Camera +sidebar_label: Taking Photos +--- + + + Build Camera API for iOS, Android & Web | Ionic Capacitor Camera + + + +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](https://capacitorjs.com/docs/apis/camera). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). + +## Photo Service + +All Capacitor logic (Camera usage and other native features) will be encapsulated in a service class. Create `PhotoService` using the `ionic generate` command: + +```shell +ionic g service services/photo +``` + +Open the new `services/photo.service.ts` file, and let’s add the logic that will power the camera functionality. First, import Capacitor dependencies and get references to the Camera, Filesystem, and Storage plugins: + +```tsx +import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera'; +import { Filesystem, Directory } from '@capacitor/filesystem'; +import { Preferences } from '@capacitor/preferences'; +``` + +Next, define a new class method, `addNewToGallery`, that will contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera: + +```tsx +public async addNewToGallery() { + // Take a photo + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, + source: CameraSource.Camera, + quality: 100 + }); +} +``` + +Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `Camera.getPhoto()` - that will open up the device's camera and allow us to take photos. + +Next, open up `tab2.page.ts` and import the PhotoService class and add a method that calls the `addNewToGallery` method on the imported service: + +```tsx +import { PhotoService } from '../services/photo.service'; + +constructor(public photoService: PhotoService) { } + +addPhotoToGallery() { + this.photoService.addNewToGallery(); +} +``` + +Then, open `tab2.page.html` and call the `addPhotoToGallery()` function when the FAB is tapped/clicked: + +```html + + + + + + + +``` + +Save the file, and if it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie! + +![Camera API on the web](/img/guides/first-app-cap-ng/camera-web.png) + +_(Your selfie is probably much better than mine)_ + +After taking a photo, it disappears right away. We need to display it within our app and save it for future access. + +## Displaying Photos + +Outside of the `PhotoService` class definition (the very bottom of the file), create a new interface, `UserPhoto`, to hold our photo metadata: + +```tsx +export interface UserPhoto { + filepath: string; + webviewPath?: string; +} +``` + +Back at the top of the file, define an array of Photos, which will contain a reference to each photo captured with the Camera. + +```tsx +export class PhotoService { + public photos: UserPhoto[] = []; + + // other code +} +``` + +Over in the `addNewToGallery` function, add the newly captured photo to the beginning of the Photos array. + +```tsx + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, + source: CameraSource.Camera, + quality: 100 + }); + + this.photos.unshift({ + filepath: "soon...", + webviewPath: capturedPhoto.webPath! + }); +} +``` + +Next, move over to `tab2.page.html` so we can display the image on the screen. Add a [Grid component](https://ionicframework.com/docs/api/grid) so that each photo will display nicely as photos are added to the gallery, and loop through each photo in the `PhotoServices`'s Photos array, adding an Image component (``) for each. Point the `src` (source) at the photo’s path: + +```html + + + + + + + + + + + +``` + +Save all files. Within the web browser, click the Camera button and take another photo. This time, the photo is displayed in the Photo Gallery! + +Up next, we’ll add support for saving the photos to the filesystem, so they can be retrieved and displayed in our app at a later time. diff --git a/versioned_docs/version-v7/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v7/angular/your-first-app/3-saving-photos.md new file mode 100644 index 00000000000..c1e013a8bec --- /dev/null +++ b/versioned_docs/version-v7/angular/your-first-app/3-saving-photos.md @@ -0,0 +1,81 @@ +--- +sidebar_label: Saving Photos +--- + +# Saving Photos to the Filesystem + +We’re now able to take multiple photos and display them in a photo gallery on the second tab of our app. These photos, however, are not currently being stored permanently, so when the app is closed, they will be deleted. + +## Filesystem API + +Fortunately, saving them to the filesystem only takes a few steps. Begin by creating a new class method, `savePicture()`, in the `PhotoService` class (`src/app/services/photo.service.ts`). We pass in the `photo` object, which represents the newly captured device photo: + +```tsx +private async savePicture(photo: Photo) { } +``` + +We can use this new method immediately in `addNewToGallery()`: + +```tsx +public async addNewToGallery() { + // Take a photo + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, // file-based data; provides best performance + source: CameraSource.Camera, // automatically take a new photo with the camera + quality: 100 // highest quality (0 to 100) + }); + + // Save the picture and add it to photo collection + const savedImageFile = await this.savePicture(capturedPhoto); + this.photos.unshift(savedImageFile); +} +``` + +We’ll use the Capacitor [Filesystem API](https://capacitorjs.com/docs/apis/filesystem) to save the photo to the filesystem. To start, convert the photo to base64 format, then feed the data to the Filesystem’s `writeFile` function. As you’ll recall, we display each photo on the screen by setting each image’s source path (`src` attribute) in `tab2.page.html` to the webviewPath property. So, set it then return the new Photo object. + +```tsx +private async savePicture(photo: Photo) { + // Convert photo to base64 format, required by Filesystem API to save + const base64Data = await this.readAsBase64(photo); + + // Write the file to the data directory + const fileName = Date.now() + '.jpeg'; + const savedFile = await Filesystem.writeFile({ + path: fileName, + data: base64Data, + directory: Directory.Data + }); + + // Use webPath to display the new image instead of base64 since it's + // already loaded into memory + return { + filepath: fileName, + webviewPath: photo.webPath + }; +} +``` + +`readAsBase64()` is a helper function we’ll define next. It's useful to organize via a separate method since it requires a small amount of platform-specific (web vs. mobile) logic - more on that in a bit. For now, implement the logic for running on the web: + +```tsx +private async readAsBase64(photo: Photo) { + // Fetch the photo, read as a blob, then convert to base64 format + const response = await fetch(photo.webPath!); + const blob = await response.blob(); + + return await this.convertBlobToBase64(blob) as string; +} + +private convertBlobToBase64 = (blob: Blob) => new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onerror = reject; + reader.onload = () => { + resolve(reader.result); + }; + reader.readAsDataURL(blob); +}); +``` + +Obtaining the camera photo as base64 format on the web appears to be a bit trickier than on mobile. In reality, we’re just using built-in web APIs: [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) as a neat way to read the file into blob format, then FileReader’s [readAsDataURL()](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) to convert the photo blob to base64. + +There we go! Each time a new photo is taken, it’s now automatically saved to the filesystem. diff --git a/versioned_docs/version-v7/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v7/angular/your-first-app/4-loading-photos.md new file mode 100644 index 00000000000..6f59d3f951f --- /dev/null +++ b/versioned_docs/version-v7/angular/your-first-app/4-loading-photos.md @@ -0,0 +1,69 @@ +--- +sidebar_label: Loading Photos +--- + +# Loading Photos from the Filesystem + +We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. + +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](https://capacitorjs.com/docs/apis/preferences) to store our array of Photos in a key-value store. + +## Preferences API + +Begin by defining a constant variable that will act as the key for the store: + +```tsx +export class PhotoService { + public photos: UserPhoto[] = []; + private PHOTO_STORAGE: string = 'photos'; + + // other code +} +``` + +Next, at the end of the `addNewToGallery` function, add a call to `Preferences.set()` to save the Photos array. By adding it here, the Photos array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved. + +```tsx +Preferences.set({ + key: this.PHOTO_STORAGE, + value: JSON.stringify(this.photos), +}); +``` + +With the photo array data saved, create a function called `loadSaved()` that can retrieve that data. We use the same key to retrieve the photos array in JSON format, then parse it into an array: + +```tsx +public async loadSaved() { + // Retrieve cached photo array data + const { value } = await Preferences.get({ key: this.PHOTO_STORAGE }); + this.photos = (value ? JSON.parse(value) : []) as UserPhoto[]; + + // more to come... +} +``` + +On mobile (coming up next!), we can directly set the source of an image tag - `` - to each photo file on the Filesystem, displaying them automatically. On the web, however, we must read each image from the Filesystem into base64 format, using a new `base64` property on the `Photo` object. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Below is the code you need to add in the `loadSaved()` function you just added: + +```tsx +// Display the photo by reading into base64 format +for (let photo of this.photos) { + // Read each saved photo's data from the Filesystem + const readFile = await Filesystem.readFile({ + path: photo.filepath, + directory: Directory.Data, + }); + + // Web platform only: Load the photo as base64 data + photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; +} +``` + +After, call this new method in `tab2.page.ts` so that when the user first navigates to Tab 2 (the Photo Gallery), all photos are loaded and displayed on the screen. + +```tsx +async ngOnInit() { + await this.photoService.loadSaved(); +} +``` + +That’s it! We’ve built a complete Photo Gallery feature in our Ionic app that works on the web. Next up, we’ll transform it into a mobile app for iOS and Android! diff --git a/versioned_docs/version-v7/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v7/angular/your-first-app/5-adding-mobile.md new file mode 100644 index 00000000000..ce7f60e75c5 --- /dev/null +++ b/versioned_docs/version-v7/angular/your-first-app/5-adding-mobile.md @@ -0,0 +1,117 @@ +--- +strip_number_prefixes: false +--- + +# Adding Mobile + +Our photo gallery app won’t be complete until it runs on iOS, Android, and the web - all using one codebase. All it takes is some small logic changes to support mobile platforms, installing some native tooling, then running the app on a device. Let’s go! + +## Import Platform API + +Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device. + +Import the Ionic [Platform API](https://ionicframework.com/docs/angular/platform) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile): + +```tsx +import { Platform } from '@ionic/angular'; + +export class PhotoService { + public photos: UserPhoto[] = []; + private PHOTO_STORAGE: string = 'photos'; + private platform: Platform; + + constructor(platform: Platform) { + this.platform = platform; + } + + // other code +} +``` + +## Platform-specific Logic + +First, we’ll update the photo saving functionality to support mobile. In the `readAsBase64()` function, check which platform the app is running on. If it’s “hybrid” (Capacitor or Cordova, two native runtimes), then read the photo file into base64 format using the Filesystem `readFile()` method. Otherwise, use the same logic as before when running the app on the web: + +```tsx +private async readAsBase64(photo: Photo) { + // "hybrid" will detect Cordova or Capacitor + if (this.platform.is('hybrid')) { + // Read the file into base64 format + const file = await Filesystem.readFile({ + path: photo.path! + }); + + return file.data; + } + else { + // Fetch the photo, read as a blob, then convert to base64 format + const response = await fetch(photo.webPath!); + const blob = await response.blob(); + + return await this.convertBlobToBase64(blob) as string; + } +} +``` + +Next, update the `savePicture()` method. When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details here](https://ionicframework.com/docs/core-concepts/webview#file-protocol)). + +```tsx +// Save picture to file on device +private async savePicture(photo: Photo) { + // Convert photo to base64 format, required by Filesystem API to save + const base64Data = await this.readAsBase64(photo); + + // Write the file to the data directory + const fileName = Date.now() + '.jpeg'; + const savedFile = await Filesystem.writeFile({ + path: fileName, + data: base64Data, + directory: Directory.Data + }); + + if (this.platform.is('hybrid')) { + // Display the new image by rewriting the 'file://' path to HTTP + // Details: https://ionicframework.com/docs/building/webview#file-protocol + return { + filepath: savedFile.uri, + webviewPath: Capacitor.convertFileSrc(savedFile.uri), + }; + } + else { + // Use webPath to display the new image instead of base64 since it's + // already loaded into memory + return { + filepath: fileName, + webviewPath: photo.webPath + }; + } +} +``` + +Next, head back over to the `loadSaved()` function we implemented for the web earlier. On mobile, we can directly set the source of an image tag - `` - to each photo file on the Filesystem, displaying them automatically. Thus, only the web requires reading each image from the Filesystem into base64 format. Update this function to add an _if statement_ around the Filesystem code: + +```tsx +public async loadSaved() { + // Retrieve cached photo array data + const { value } = await Preferences.get({ key: this.PHOTO_STORAGE }); + this.photos = (value ? JSON.parse(value) : []) as UserPhoto[]; + + // Easiest way to detect when running on the web: + // “when the platform is NOT hybrid, do this” + if (!this.platform.is('hybrid')) { + // Display the photo by reading into base64 format + for (let photo of this.photos) { + // Read each saved photo's data from the Filesystem + const readFile = await Filesystem.readFile({ + path: photo.filepath, + directory: Directory.Data + }); + + // Web platform only: Load the photo as base64 data + photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + } + } +} +``` + +Our Photo Gallery now consists of one codebase that runs on the web, Android, and iOS. Next up, the part you’ve been waiting for - deploying the app to a device. diff --git a/versioned_docs/version-v7/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v7/angular/your-first-app/6-deploying-mobile.md new file mode 100644 index 00000000000..e30d8acd79d --- /dev/null +++ b/versioned_docs/version-v7/angular/your-first-app/6-deploying-mobile.md @@ -0,0 +1,114 @@ +--- +title: Deploying to iOS and Android +sidebar_label: Deploying Mobile +--- + + + Deploying to iOS and Android Apps - Capacitor Setup on Ionic + + + +Since we added Capacitor to our project when it was first created, there’s only a handful of steps remaining until the Photo Gallery app is on our device! Remember, you can find the complete source code for this app [here](https://github.com/ionic-team/photo-gallery-capacitor-ng). + +## Capacitor Setup + +Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the differences [here](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova). + +If you’re still running `ionic serve` in the terminal, cancel it. Complete a fresh build of your Ionic project, fixing any errors that it reports: + +```shell +ionic build +``` + +Next, create both the iOS and Android projects: + +```shell +$ ionic cap add ios +$ ionic cap add android +``` + +Both android and ios folders at the root of the project are created. These are entirely standalone native projects that should be considered part of your Ionic app (i.e., check them into source control, edit them using their native tooling, etc.). + +Every time you perform a build (e.g. `ionic build`) that updates your web directory (default: `www`), you'll need to copy those changes into your native projects: + +```shell +ionic cap copy +``` + +Note: After making updates to the native portion of the code (such as adding a new plugin), use the `sync` command: + +```shell +ionic cap sync +``` + +## iOS Deployment + +:::note +To build an iOS app, you’ll need a Mac computer. +::: + +Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by [CocoaPods](https://cocoapods.org/). Before running this app on an iOS device, there's a couple of steps to complete. + +First, run the Capacitor `open` command, which opens the native iOS project in Xcode: + +```shell +ionic cap open ios +``` + +In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled “Privacy - Camera Usage.” To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties." + +![Xcode Custom iOS Target Properties](/img/guides/first-app-cap-ng/xcode-info-plist.png) + +Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values." + +Add the `NSCameraUsageDescription` Key and set the Value to something that describes why the app needs to use the camera, such as "To Take Photos." The Value field is displayed to the app user when the permission prompt opens. + +Follow the same process to add the other two Keys required of the Camera plugin: `NSPhotoLibraryAddUsageDescription` and `NSPhotoLibraryUsageDescription`. + +Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team. + +![Xcode - Selecting Development Team](/img/guides/first-app-cap-ng/xcode-signing.png) + +With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device: + +![Xcode build button](/img/guides/first-app-cap-ng/xcode-build-button.png) + +Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app! + +![iOS Camera permissions](/img/guides/first-app-cap-ng/ios-permissions-photo.png) + +## Android Deployment + +Capacitor Android apps are configured and managed through Android Studio. Before running this app on an Android device, there's a couple of steps to complete. + +First, run the Capacitor `open` command, which opens the native Android project in Android Studio: + +```shell +ionic cap open android +``` + +Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`. + +![Android Manifest location](/img/guides/first-app-cap-ng/android-manifest.png) + +Scroll to the `Permissions` section and ensure these entries are included: + +```xml + + +``` + +Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device. + +![Launching app on Android](/img/guides/first-app-cap-ng/android-device.png) + +Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app. + +![Android Camera permissions](/img/guides/first-app-cap-ng/android-permissions-photo.png) + +Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉 + +In the next portion of this tutorial, we’ll use the Ionic CLI’s Live Reload functionality to quickly implement photo deletion - thus completing our Photo Gallery feature. diff --git a/versioned_docs/version-v7/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v7/angular/your-first-app/7-live-reload.md new file mode 100644 index 00000000000..26fe3b4fbf0 --- /dev/null +++ b/versioned_docs/version-v7/angular/your-first-app/7-live-reload.md @@ -0,0 +1,114 @@ +--- +title: Rapid App Development with Live Reload +sidebar_label: Live Reload +--- + + + + + +So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster? + +We can use the Ionic CLI’s [Live Reload functionality](https://ionicframework.com/docs/cli/livereload) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected. + +## Live Reload + +Remember `ionic serve`? That was Live Reload working in the browser, allowing us to iterate quickly. + +We can also use it when developing on iOS and Android devices. This is particularly useful when writing code that interacts with native plugins - we must run it on a device to verify that it works. Therefore, being able to quickly write, build, test, and deploy code is crucial to keeping up our development speed. + +Let’s use Live Reload to implement photo deletion, the missing piece of our Photo Gallery feature. Select your platform of choice (iOS or Android) and connect a device to your computer. Next, run either command in a terminal, based on your chosen platform: + +```shell +$ ionic cap run ios -l --external + +$ ionic cap run android -l --external +``` + +The Live Reload server will start up, and the native IDE of choice will open if not opened already. Within the IDE, click the Play button to launch the app onto your device. + +## Deleting Photos + +With Live Reload running and the app open on your device, let’s implement photo deletion functionality. Open `tab2.page.html` and add a new click handler to each `` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](https://ionicframework.com/docs/api/action-sheet) dialog with the option to either delete the selected photo or cancel (close) the dialog. + +```html + + + +``` + +Over in `tab2.page.ts`, import Action Sheet and add it to the constructor: + +```tsx +import { ActionSheetController } from '@ionic/angular'; + +constructor(public photoService: PhotoService, + public actionSheetController: ActionSheetController) {} +``` + +Add `UserPhoto` to the import statement. + +```tsx +import { PhotoService, UserPhoto } from '../services/photo.service'; +``` + +Next, implement the `showActionSheet()` function. We add two options: `Delete` that calls PhotoService’s `deletePicture()` function (to be added next) and `Cancel`, which when given the role of “cancel” will automatically close the action sheet: + +```tsx +public async showActionSheet(photo: UserPhoto, position: number) { + const actionSheet = await this.actionSheetController.create({ + header: 'Photos', + buttons: [{ + text: 'Delete', + role: 'destructive', + icon: 'trash', + handler: () => { + this.photoService.deletePicture(photo, position); + } + }, { + text: 'Cancel', + icon: 'close', + role: 'cancel', + handler: () => { + // Nothing to do, action sheet is automatically closed + } + }] + }); + await actionSheet.present(); +} +``` + +Save both of the files we just edited. The Photo Gallery app will reload automatically, and now when we tap on one of the photos in the gallery, the action sheet displays. Tapping “Delete” doesn’t do anything yet, so head back into your code editor. + +In `src/app/services/photo.service.ts`, add the `deletePicture()` function: + +```tsx +public async deletePicture(photo: UserPhoto, position: number) { + // Remove this photo from the Photos reference data array + this.photos.splice(position, 1); + + // Update photos array cache by overwriting the existing photo array + Preferences.set({ + key: this.PHOTO_STORAGE, + value: JSON.stringify(this.photos) + }); + + // delete photo file from filesystem + const filename = photo.filepath + .substr(photo.filepath.lastIndexOf('/') + 1); + + await Filesystem.deleteFile({ + path: filename, + directory: Directory.Data + }); +} +``` + +The selected photo is removed from the Photos array first. Then, we use the Capacitor Preferences API to update the cached version of the Photos array. Finally, we delete the actual photo file itself using the Filesystem API. + +Save this file, then tap on a photo again and choose the “Delete” option. This time, the photo is deleted! Implemented much faster using Live Reload. 💪 + +In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices. diff --git a/versioned_docs/version-v7/angular/your-first-app/8-distribute.md b/versioned_docs/version-v7/angular/your-first-app/8-distribute.md new file mode 100644 index 00000000000..545e57c1945 --- /dev/null +++ b/versioned_docs/version-v7/angular/your-first-app/8-distribute.md @@ -0,0 +1,100 @@ +--- +sidebar_label: Distribute +--- + +# Build and Deploy your App + +Now that you have built your first app, you are going to want to get it distributed so everyone can start using it. The mechanics of building and deploying your application can be quite cumbersome. That is where [Appflow](https://ionic.io/docs/appflow/) comes into play. Appflow allows you to effectively generate web and native builds, push out live app updates, publish your app to the app stores, and automate the whole process. The entire Quickstart guide can be found [here](https://ionic.io/docs/appflow/quickstart). + +Below we will run through an overview of the steps. + +## Connect Your Repo + +Appflow works directly with Git version control and uses your existing code base as the source of truth for Deploy and Package builds. You will first need to integrate with your hosting service, such as GitHub or Bitbucket, or you can push your code directly to Appflow. Once this is completed, Appflow will have access to your code. + +For more on connecting your code repository to Appflow, checkout the [Connect your Repo](https://ionic.io/docs/appflow/quickstart/connect) section inside the Appflow docs. + +## Install the Appflow SDK + +The Appflow SDK (also known as Ionic Deploy plugin) will allow you to take advantage of arguably two of the best Appflow features: deploying live updates to your app and bypassing the app stores. Ionic Appflow's Live Update feature is shipped with Appflow SDK and features the capabilities of detecting and syncing the updates for your app that you have pushed to your identified channels within the dashboard. + +To get the Appflow SDK plugin added to your project, you can follow the install instructions within the Appflow Dashboard by clicking on "Install Instructions" inside of the `Deploy > Destinations` section. Alternatively, you can install the plugin manually by executing the following command in your app's root directory: + +```shell +ionic deploy add \ + --app-id="YOUR_APP_ID" \ + --channel-name="YOUR_CHANNEL_NAME" \ + --update-method="background|auto|none" \ +``` + +For prerequisite and additional instructions on installing the Appflow SDK, visit the [Install the Appflow SDK](https://ionic.io/docs/appflow/quickstart/installation) section inside the Appflow docs. + +## Push a Commit + +In order for Appflow to access the latest and greatest changes to your code, you will need to push a commit via the version control integration of your choosing. For those that use GitHub or Bitbucket, this would look as follows: + +```shell +git add . # stage any changes +git commit -m "added appflow sdk" # commit staged changes +git push origin main # push the changes from the main branch to your git host +``` + +After the push is made, you will then see your commit under the `Commits` tab of the Appflow Dashboard. For more on this, take a look at the [Push a Commit](https://ionic.io/docs/appflow/quickstart/push) section inside the Appflow docs. + +## Deploy a Live Update + +With the Appflow SDK installed and your commit pushed up to the Dashboard, you are ready to deploy a live update to a device. The Live Update feature uses the installed Appflow SDK with your native application to listen to a particular Deploy Channel Destination. When a live update is assigned to a Channel Destination, that update will be deployed to user devices running binaries that are configured to listen to that specific Channel Destination. + +To get the live update deployed, a Web build will need to be created. This can be done through the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right corner of the `Build > Builds` tab. After selecting the correct commit to deploy, select the `Web` target platform and the `Latest` build stack. Depending on your Appflow plan, you will then be able to include custom environments, if any are configured. Finally, you can enable `Live Update` and pick the Channel to automatically assign the build to once it successfully completes. + +Upon completion of the Web Build, additional versioning options are available to you. After completing this section and you have a successful Deploy build, you can then assign it to the same Channel you configured the Appflow SDK to listen to when you installed it by clicking the `Deploy live updates` button in the build detail page. The same can be done by clicking the `Deploy live updates` icon on the build in the `Build > Builds` tab and select the Channel from the dropdown. + +To receive this live update, you will need to run the app on a device or an emulator. The quickest and easiest way to do this is through the following command: + +```shell +ionic [cordova | cap] run [ios | android] [options] +``` + +Assuming the app is configured correctly to listen to the channel you deployed too, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied! + +To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the [Deploy a Live Update](https://ionic.io/docs/appflow/quickstart/deploy) section inside the Appflow docs. + +## Build a Native Binary + +Next up is a native binary for your app build and deploy process. This is done via the [Ionic Package](https://ionic.io/docs/appflow/package/intro) service. First things first, you will need to create a [Package build](https://ionic.io/docs/appflow/package/builds). This can be done by clicking the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right from the `Build > Builds` tab. Then you will select the proper commit for your build and fill in all of the several required fields and any optional fields that you want to specify. After filling in all of the information and the build begins, you can check out it's progress and review the logs if you encounter any errors. + +Given a successful Package build, an iOS binary (`.ipa` or IPA) or/and an Android binary (`.apk` or APK) file becomes available to you. The file can subsequently be downloaded so you can install it on a device by clicking the file name in the `Artifacts` section in the right of the build detail page or clicking the `Download IPA/APK` icon on the build in the `Build > Builds` tab. + +Further information regarding building native binaries can be found inside of the [Build a Native Binary](https://ionic.io/docs/appflow/quickstart/package) section inside the Appflow docs. + +## Create an Automation + +[Automations](https://ionic.io/docs/appflow/automation/intro) enable you and your team to utilize the full CI/CD powers of Appflow. You can create automations that trigger [Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) every time your team commits new code to a given branch. The automations can also be configured to use different environments and native configurations for building different versions of your app for development, staging, QA and production. + +For more information, visit the [Create an Automation](https://ionic.io/docs/appflow/quickstart/automation) section within the Appflow docs. There you will see details on creating a single automation. However, you can create multiple automations for different branches or workflows and customize them to fit your needs. An important note is that the ability to create an automation is available for those on our [Basic plans](https://ionic.io/pricing) and above. + +## Create an Environment + +[Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) can be further customized via [Environments](https://ionic.io/docs/appflow/automation/environments). This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the [Automation](https://ionic.io/docs/appflow/automation/intro) feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever. + +Creating an Environment is available for those on our [Basic plans](https://ionic.io/pricing) and above. More information on this can be found in the [Create an Environment](https://ionic.io/docs/appflow/quickstart/environment) section within the Appflow docs. + +## Create a Native Configuration + +[Native Configurations](https://ionic.io/docs/appflow/package/native-configs) allow you to easily modify common configuration values that can change between different environments (development, production, staging, etc.) so you do not need to use extra logic or manually commit them to version control. Native configurations can be attached to any [Package build](https://ionic.io/docs/appflow/package/intro) or [Automation](https://ionic.io/docs/appflow/automation/intro). + +Native configs can be used to: + +- Overwrite the unique bundle identifier or [id attribute](https://cordova.apache.org/docs/en/latest/config_ref/#widget) in `config.xml` +- Overwrite the App Name as it will appear on the home screen of a device +- Overwrite the [Appflow SDK (Deploy Plugin) variables and preferences](https://ionic.io/docs/appflow/deploy/api#plugin-variables) + +For access to the ability to create a Native Configuration, you will need to be on our [Basic plans](https://ionic.io/pricing) and above. Additional details of this feature can be found in the [Create a Native Configuration](https://ionic.io/docs/appflow/quickstart/native-config) section within the Appflow docs. + +## What’s Next? + +Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users devices! + +There are many paths to follow from here. Try adding another [Ionic UI component](https://ionicframework.com/docs/components) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the the build and deploy process again through Appflow to get it out to your users. + +Happy app building! 💙 diff --git a/versioned_docs/version-v7/api.md b/versioned_docs/version-v7/api.md new file mode 100644 index 00000000000..45e4c1d8d19 --- /dev/null +++ b/versioned_docs/version-v7/api.md @@ -0,0 +1,17 @@ +--- +title: API Index +--- + +import APIList from '@components/page/api/APIList'; + + + API Index | Ionic Docs API Index for all API Custom Elements + + + +Each Ionic [component](/docs/components) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties. + + diff --git a/versioned_docs/version-v7/api/accordion-group.md b/versioned_docs/version-v7/api/accordion-group.md new file mode 100644 index 00000000000..0af3582277f --- /dev/null +++ b/versioned_docs/version-v7/api/accordion-group.md @@ -0,0 +1,63 @@ +--- +title: 'ion-accordion-group' +--- + +import Props from '@ionic-internal/component-api/v7/accordion-group/props.md'; +import Events from '@ionic-internal/component-api/v7/accordion-group/events.md'; +import Methods from '@ionic-internal/component-api/v7/accordion-group/methods.md'; +import Parts from '@ionic-internal/component-api/v7/accordion-group/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/accordion-group/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/accordion-group/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Accordion group is a container for accordion instances. It manages the state of the accordions and provides keyboard navigation. + +See the [Accordion](./accordion) documentation for more information. + +## Interfaces + +### AccordionGroupChangeEventDetail + +```typescript +interface AccordionGroupChangeEventDetail { + value: T; +} +``` + +### AccordionGroupCustomEvent + +While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. + +```typescript +interface AccordionGroupCustomEvent extends CustomEvent { + detail: AccordionGroupChangeEventDetail; + target: HTMLIonAccordionGroupElement; +} +``` + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/accordion.md b/versioned_docs/version-v7/api/accordion.md new file mode 100644 index 00000000000..0db25072b0e --- /dev/null +++ b/versioned_docs/version-v7/api/accordion.md @@ -0,0 +1,220 @@ +--- +title: 'ion-accordion' +--- + +import Props from '@ionic-internal/component-api/v7/accordion/props.md'; +import Events from '@ionic-internal/component-api/v7/accordion/events.md'; +import Methods from '@ionic-internal/component-api/v7/accordion/methods.md'; +import Parts from '@ionic-internal/component-api/v7/accordion/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/accordion/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/accordion/slots.md'; + + + ion-accordion: Accordion Components: How to Build & Examples + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. All `ion-accordion` components should be grouped inside `ion-accordion-group` components. + +## Basic Usage + +import Basic from '@site/static/usage/v7/accordion/basic/index.md'; + + + +## Toggle Accordions + +Which accordion is open is controlled by setting the `value` property on `ion-accordion-group`. Setting this property allows developers to programmatically expand or collapse certain accordions. + +import Toggle from '@site/static/usage/v7/accordion/toggle/index.md'; + + + +## Listen for Accordion State Changes + +Developers can listen for the `ionChange` event to be notified when accordions expand or collapse. + +import ListenChanges from '@site/static/usage/v7/accordion/listen-changes/index.md'; + + + +## Multiple Accordions + +Developers can allow multiple accordions to be open at once with the `multiple` property. + +import Multiple from '@site/static/usage/v7/accordion/multiple/index.md'; + + + +## Disabling Accordions + +### Individual Accordion + +Individual accordions can be disabled with the `disabled` property on `ion-accordion`. + +import DisableIndividual from '@site/static/usage/v7/accordion/disable/individual/index.md'; + + + +### Accordion Group + +The accordion group can be disabled with the `disabled` property on `ion-accordion-group`. + +import DisableGroup from '@site/static/usage/v7/accordion/disable/group/index.md'; + + + +## Readonly Accordions + +### Individual Accordion + +Individual accordions can be disabled with the `readonly` property on `ion-accordion`. + +import ReadonlyIndividual from '@site/static/usage/v7/accordion/readonly/individual/index.md'; + + + +### Accordion Group + +The accordion group can be disabled with the `readonly` property on `ion-accordion-group`. + +import ReadonlyGroup from '@site/static/usage/v7/accordion/readonly/group/index.md'; + + + +## Anatomy + +### Header + +The `header` slot is used as the toggle that will expand or collapse your accordion. We recommend you use an `ion-item` here to take advantage of the accessibility and theming functionalities. + +When using `ion-item` in the `header` slot, the `ion-item`'s `button` prop is set to `true` and the `detail` prop is set to `false`. In addition, we will also automatically add a toggle icon to the `ion-item`. This icon will automatically be rotated when you expand or collapse the accordion. See [Customizing Icons](#icons) for more information. + +### Content + +The `content` slot is used as the part of the accordion that is revealed or hidden depending on the state of your accordion. You can place anything here except for another `ion-content` instance as only one instance of `ion-content` should be added per page. + +## Customization + +### Expansion Styles + +There are two built in expansion styles: `compact` and `inset`. This expansion style is set via the `expand` property on `ion-accordion-group`. + +When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened. + +import ExpansionStyles from '@site/static/usage/v7/accordion/customization/expansion-styles/index.md'; + + + +### Advanced Expansion Styles + +You can customize the expansion behavior by styling based on the accordion's state. There are four state classes applied to `ion-accordion`. Styling using these classes can allow you to create advanced state transitions: + +| Class Name | Description | +| ----------------------- | ------------------------------------------------- | +| `.accordion-expanding` | Applied when the accordion is actively expanding | +| `.accordion-expanded` | Applied when the accordion is fully expanded | +| `.accordion-collapsing` | Applied when the accordion is actively collapsing | +| `.accordion-collapsed` | Applied when the accordion is fully collapsed | + +If you need to target specific pieces of the accordion, we recommend targeting the element directly. For example, if you want to customize the ion-item in your header slot when the accordion is expanded, you can use the following selector: + +```css +ion-accordion.accordion-expanding ion-item[slot='header'], +ion-accordion.accordion-expanded ion-item[slot='header'] { + --color: red; +} +``` + +import AdvancedExpansionStyles from '@site/static/usage/v7/accordion/customization/advanced-expansion-styles/index.md'; + + + +### Icons + +When using an `ion-item` in the `header` slot, we automatically add an `ion-icon`. The type of icon used can be controlled by the `toggleIcon` property, and the slot it is added to can be controlled with the `toggleIconSlot` property. + +If you would like to manage the icon yourself or use an icon that is not an `ion-icon`, you can add the `ion-accordion-toggle-icon` class to the icon element. + +Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion. + +import Icons from '@site/static/usage/v7/accordion/customization/icons/index.md'; + + + +### Theming + +Since `ion-accordion` acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted `ion-item`. Since you are using `ion-item`, you also have access to all of the [ion-item CSS Variables](./item#css-custom-properties) and [ion-item Shadow Parts](./item#css-shadow-parts). Theming the content is also easily achieved by targeting the element that is in the `content` slot. + +import Theming from '@site/static/usage/v7/accordion/customization/theming/index.md'; + + + +## Accessibility + +### Animations + +By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app. + +import AccessibilityAnimations from '@site/static/usage/v7/accordion/accessibility/animations/index.md'; + + + +### Keyboard Navigation + +When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does: + +| Key | Function | +| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `Space` or `Enter` | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | +| `Tab` | Moves focus to the next focusable element. | +| `Shift` + `Tab` | Moves focus to the previous focusable element. | +| `Down Arrow` | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | +| `Up Arrow` | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | +| `Home` | When focus is on an accordion header, moves focus to the first accordion header. | +| `End` | When focus is on an accordion header, moves focus to the last accordion header. | + +## Performance + +### Animations + +The accordion animation works by knowing the height of the `content` slot when the animation starts. The accordion expects that this height will remain consistent throughout the animation. As a result, developers should avoid performing any operation that may change the height of the content during the animation. + +For example, using [ion-img](./img) may cause layout shifts as it lazily loads images. This means that as the animation plays, `ion-img` will load the image data, and the dimensions of `ion-img` will change to account for the loaded image data. This can result in the height of the `content` slot changing. Developers have a few options for avoiding this: + +1. Use an `img` element without any lazy loading. `ion-img` always uses lazy loading, but `img` does not use lazy loading by default. This is the simplest option and works well if you have small images that do not significantly benefit from lazy loading. + +2. Set a minimum width and height on `ion-img`. If you need to use lazy loading and know the dimensions of the images ahead of time (such as if you are loading icons of the same size), you can set the `ion-img` to have a minimum width or height using CSS. This gives developers the benefit of lazy loading while avoiding layout shifts. This works when using an `img` element with `loading="lazy"` too! + +3. If neither of these options are applicable, developers may want to consider disabling animations altogether by using the `animated` property on [ion-accordion-group](./accordion-group). + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/action-sheet.md b/versioned_docs/version-v7/api/action-sheet.md new file mode 100644 index 00000000000..f24c9521272 --- /dev/null +++ b/versioned_docs/version-v7/api/action-sheet.md @@ -0,0 +1,307 @@ +--- +title: 'ion-action-sheet' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import Props from '@ionic-internal/component-api/v7/action-sheet/props.md'; +import Events from '@ionic-internal/component-api/v7/action-sheet/events.md'; +import Methods from '@ionic-internal/component-api/v7/action-sheet/methods.md'; +import Parts from '@ionic-internal/component-api/v7/action-sheet/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/action-sheet/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/action-sheet/slots.md'; + + + ion-action-sheet: Action Sheet Dialog for iOS and Android + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop. + +## Inline Action Sheets (Recommended) + +`ion-action-sheet` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Action Sheet. + +import Trigger from '@site/static/usage/v7/action-sheet/inline/trigger/index.md'; + + + +### Using `isOpen` + +The `isOpen` property on `ion-action-sheet` allows developers to control the presentation state of the Action Sheet from their application state. This means when `isOpen` is set to `true` the Action Sheet will be presented, and when `isOpen` is set to `false` the Action Sheet will be dismissed. + +`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Action Sheet is dismissed. Developers should listen for the `ionActionSheetDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-action-sheet` from being tightly coupled with the state of the application. With a one way data binding, the Action Sheet only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Action Sheet needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. + +import IsOpen from '@site/static/usage/v7/action-sheet/inline/isOpen/index.md'; + + + +## Controller Action Sheets + +The `actionSheetController` can be used in situations where more control is needed over when the Action Sheet is presented and dismissed. + +import Controller from '@site/static/usage/v7/action-sheet/controller/index.md'; + + + +## Buttons + +A button's `role` property can either be `destructive` or `cancel`. Buttons without a role property will have the default look for the platform. Buttons with the `cancel` role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the `buttons` array. Note: We recommend that `destructive` buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role. + +A button can also be passed data via the `data` property on `ActionSheetButton`. This will populate the `data` field in the return value of the `onDidDismiss` method. + +## Collecting Role Information on Dismiss + +When the `didDismiss` event is fired, the `data` and `role` fields of the event detail can be used to gather information about how the Action Sheet was dismissed. + +import RoleInfo from '@site/static/usage/v7/action-sheet/role-info-on-dismiss/index.md'; + + + +## Theming + +Action Sheet uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. + +### Styling + +We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. + +```css +/* DOES NOT WORK - not specific enough */ +.action-sheet-group { + background: #e5e5e5; +} + +/* Works - pass "my-custom-class" in cssClass to increase specificity */ +.my-custom-class .action-sheet-group { + background: #e5e5e5; +} +``` + +import Styling from '@site/static/usage/v7/action-sheet/theming/styling/index.md'; + + + +### CSS Custom Properties + +Any of the defined [CSS Custom Properties](#css-custom-properties-1) can be used to style the Action Sheet without needing to target individual elements. + +import CssCustomProperties from '@site/static/usage/v7/action-sheet/theming/css-properties/index.md'; + + + +## Accessibility + +### Screen Readers + +Action Sheets set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the action sheet is being used in an app. + +#### Role + +Action Sheets are given a `role` of [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role). In order to align with the ARIA spec, either the `aria-label` or `aria-labelledby` attribute must be set. + +#### Action Sheet Description + +It is strongly recommended that every Action Sheet have the `header` property defined, as Ionic will automatically set `aria-labelledby` to point to the header element. However, if you choose not to include a `header`, an alternative is to use the `htmlAttributes` property to provide a descriptive `aria-label` or set a custom `aria-labelledby` value. + + + + + +```javascript +const actionSheet = await this.actionSheetController.create({ + htmlAttributes: { + 'aria-label': 'action sheet dialog', + }, +}); +``` + + + + + +```javascript +const actionSheet = await this.actionSheetController.create({ + htmlAttributes: { + 'aria-label': 'action sheet dialog', + }, +}); +``` + + + + + +```javascript +useIonActionSheet({ + htmlAttributes: { + 'aria-label': 'action sheet dialog', + }, +}); +``` + + + + + +```javascript +const actionSheet = await actionSheetController.create({ + htmlAttributes: { + 'aria-label': 'action sheet dialog', + }, +}); +``` + + + + + +#### Action Sheet Buttons Description + +Buttons containing text will be read by a screen reader. If a button contains only an icon, or a description other than the existing text is desired, a label should be assigned to the button by passing `aria-label` to the `htmlAttributes` property on the button. + + + + + +```javascript +const actionSheet = await this.actionSheetController.create({ + header: 'Header', + buttons: [ + { + icon: 'close', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +```javascript +const actionSheet = await this.actionSheetController.create({ + header: 'Header', + buttons: [ + { + icon: 'close', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +```javascript +useIonActionSheet({ + header: 'Header', + buttons: [ + { + icon: 'close', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +```javascript +const actionSheet = await actionSheetController.create({ + header: 'Header', + buttons: [ + { + icon: 'close', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +## Interfaces + +### ActionSheetButton + +```typescript +interface ActionSheetButton { + text?: string; + role?: 'cancel' | 'destructive' | 'selected' | string; + icon?: string; + cssClass?: string | string[]; + id?: string; + htmlAttributes?: { [key: string]: any }; + handler?: () => boolean | void | Promise; + data?: T; +} +``` + +### ActionSheetOptions + +```typescript +interface ActionSheetOptions { + header?: string; + subHeader?: string; + cssClass?: string | string[]; + buttons: (ActionSheetButton | string)[]; + backdropDismiss?: boolean; + translucent?: boolean; + animated?: boolean; + mode?: Mode; + keyboardClose?: boolean; + id?: string; + htmlAttributes?: { [key: string]: any }; + + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; +} +``` + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/alert.md b/versioned_docs/version-v7/api/alert.md new file mode 100644 index 00000000000..9f2d3662b31 --- /dev/null +++ b/versioned_docs/version-v7/api/alert.md @@ -0,0 +1,356 @@ +--- +title: 'ion-alert' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import Props from '@ionic-internal/component-api/v7/alert/props.md'; +import Events from '@ionic-internal/component-api/v7/alert/events.md'; +import Methods from '@ionic-internal/component-api/v7/alert/methods.md'; +import Parts from '@ionic-internal/component-api/v7/alert/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/alert/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/alert/slots.md'; + + + ion-alert: Ionic Alert Buttons with Custom Message Prompts + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `header`, `subHeader` and `message`. + +## Inline Alerts (Recommended) + +`ion-alert` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Alert. + +import Trigger from '@site/static/usage/v7/alert/presenting/trigger/index.md'; + + + +### Using `isOpen` + +The `isOpen` property on `ion-alert` allows developers to control the presentation state of the Alert from their application state. This means when `isOpen` is set to `true` the Alert will be presented, and when `isOpen` is set to `false` the Alert will be dismissed. + +`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Alert is dismissed. Developers should listen for the `ionAlertDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-alert` from being tightly coupled with the state of the application. With a one way data binding, the Alert only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Alert needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. + +import IsOpen from '@site/static/usage/v7/alert/presenting/isOpen/index.md'; + + + +## Controller Alerts + +The `alertController` can be used in situations where more control is needed over when the Alert is presented and dismissed. + +import Controller from '@site/static/usage/v7/alert/presenting/controller/index.md'; + + + +## Buttons + +In the array of `buttons`, each button includes properties for its `text`, and optionally a `handler`. If a handler returns `false` then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the `buttons` array from left to right. Note: The right most button (the last one in the array) is the main button. + +Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role. + +import Buttons from '@site/static/usage/v7/alert/buttons/index.md'; + + + +## Inputs + +Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead. + +### Text Inputs Example + +import TextInputs from '@site/static/usage/v7/alert/inputs/text-inputs/index.md'; + + + +### Radio Example + +import Radios from '@site/static/usage/v7/alert/inputs/radios/index.md'; + + + +## Customization + +Alert uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. + +We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. + +```css +/* DOES NOT WORK - not specific enough */ +.alert-wrapper { + background: #e5e5e5; +} + +/* Works - pass "my-custom-class" in cssClass to increase specificity */ +.my-custom-class .alert-wrapper { + background: #e5e5e5; +} +``` + +Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Alert without needing to target individual elements: + +```css +.my-custom-class { + --background: #e5e5e5; +} +``` + +import Customization from '@site/static/usage/v7/alert/customization/index.md'; + + + +:::note +If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. +::: + +## Accessibility + +### Screen Readers + +Alerts set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the alert is being used in an app. + +#### Role + +Ionic automatically sets the Alert's `role` to either [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) if there are any inputs or buttons included, or [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) if there are none. + +#### Alert Description + +If the `header` property is defined for the Alert, the `aria-labelledby` attribute will be automatically set to the header's ID. The `subHeader` element will be used as a fallback if `header` is not defined. Similarly, the `aria-describedby` attribute will be automatically set to the ID of the `message` element if that property is defined. + +It is strongly recommended that your Alert have a `message`, as well as either a `header` or `subHeader`, in order to align with the ARIA spec. If you choose not to include a `header` or `subHeader`, an alternative is to provide a descriptive `aria-label` using the `htmlAttributes` property. + + + + + +```javascript +const alert = await this.alertController.create({ + message: 'This is an alert with custom aria attributes.', + htmlAttributes: { + 'aria-label': 'alert dialog', + }, +}); +``` + + + + + +```javascript +const alert = await this.alertController.create({ + message: 'This is an alert with custom aria attributes.', + htmlAttributes: { + 'aria-label': 'alert dialog', + }, +}); +``` + + + + + +```javascript +useIonAlert({ + message: 'This is an alert with custom aria attributes.', + htmlAttributes: { + 'aria-label': 'alert dialog', + }, +}); +``` + + + + + +```javascript +const alert = await alertController.create({ + message: 'This is an alert with custom aria attributes.', + htmlAttributes: { + 'aria-label': 'alert dialog', + }, +}); +``` + + + + + +All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert. + +#### Alert Buttons Description + +Buttons containing text will be read by a screen reader. If a description other than the existing text is desired, a label can be set on the button by passing `aria-label` to the `htmlAttributes` property on the button. + + + + + +```javascript +const alert = await this.alertController.create({ + header: 'Header', + buttons: [ + { + text: 'Exit', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +```javascript +const alert = await this.alertController.create({ + header: 'Header', + buttons: [ + { + text: 'Exit', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +```javascript +useIonAlert({ + header: 'Header', + buttons: [ + { + text: 'Exit', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +```javascript +const alert = await alertController.create({ + header: 'Header', + buttons: [ + { + text: 'Exit', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +## Interfaces + +### AlertButton + +```typescript +type AlertButtonOverlayHandler = boolean | void | { [key: string]: any }; + +interface AlertButton { + text: string; + role?: 'cancel' | 'destructive' | string; + cssClass?: string | string[]; + id?: string; + htmlAttributes?: { [key: string]: any }; + handler?: (value: any) => AlertButtonOverlayHandler | Promise; +} +``` + +### AlertInput + +```typescript +interface AlertInput { + type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea'; + name?: string; + placeholder?: string; + value?: any; + /** + * The label text to display next to the input, if the input type is `radio` or `checkbox`. + */ + label?: string; + checked?: boolean; + disabled?: boolean; + id?: string; + handler?: (input: AlertInput) => void; + min?: string | number; + max?: string | number; + cssClass?: string | string[]; + attributes?: { [key: string]: any }; + tabindex?: number; +} +``` + +### AlertOptions + +```typescript +interface AlertOptions { + header?: string; + subHeader?: string; + message?: string | IonicSafeString; + cssClass?: string | string[]; + inputs?: AlertInput[]; + buttons?: (AlertButton | string)[]; + backdropDismiss?: boolean; + translucent?: boolean; + animated?: boolean; + htmlAttributes?: { [key: string]: any }; + + mode?: Mode; + keyboardClose?: boolean; + id?: string; + + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; +} +``` + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/app.md b/versioned_docs/version-v7/api/app.md new file mode 100644 index 00000000000..33a3e187e41 --- /dev/null +++ b/versioned_docs/version-v7/api/app.md @@ -0,0 +1,55 @@ +--- +title: 'ion-app' +--- + +import Props from '@ionic-internal/component-api/v7/app/props.md'; +import Events from '@ionic-internal/component-api/v7/app/events.md'; +import Methods from '@ionic-internal/component-api/v7/app/methods.md'; +import Parts from '@ionic-internal/component-api/v7/app/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/app/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/app/slots.md'; + + + ion-app: Container Element for an Ionic Application + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +App is a container element for an Ionic application. There should only be one `` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `` when they are presented. + +Using `ion-app` enables the following behaviors: + +- [Keyboard Lifecycle Events](../developing/keyboard#keyboard-lifecycle-events) without the need for any native plugins +- [Hardware Back Button Listeners](../developing/hardware-back-button) for customizing the hardware back button behavior on Android devices +- Status bar support in Capacitor or Cordova which allows users to scroll to the top of the view by tapping the status bar +- Scroll assist utilities which scroll the content so focused text inputs are not covered by the on-screen keyboard +- [Ripple effect](./ripple-effect) when activating buttons on Material Design mode +- Other tap and focus utilities which make the experience of using an Ionic app feel more native + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/avatar.md b/versioned_docs/version-v7/api/avatar.md new file mode 100644 index 00000000000..69bcf948fba --- /dev/null +++ b/versioned_docs/version-v7/api/avatar.md @@ -0,0 +1,76 @@ +--- +title: 'ion-avatar' +--- + +import Props from '@ionic-internal/component-api/v7/avatar/props.md'; +import Events from '@ionic-internal/component-api/v7/avatar/events.md'; +import Methods from '@ionic-internal/component-api/v7/avatar/methods.md'; +import Parts from '@ionic-internal/component-api/v7/avatar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/avatar/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/avatar/slots.md'; + + + ion-avatar: Circular Application Avatar Icon Component + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object. + +Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively. + +## Basic Usage + +import Basic from '@site/static/usage/v7/avatar/basic/index.md'; + + + +## Chip Avatar + +import Chip from '@site/static/usage/v7/avatar/chip/index.md'; + + + +## Item Avatar + +import Item from '@site/static/usage/v7/avatar/item/index.md'; + + + +## Theming + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v7/avatar/theming/css-properties/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/back-button.md b/versioned_docs/version-v7/api/back-button.md new file mode 100644 index 00000000000..2f4ac45441b --- /dev/null +++ b/versioned_docs/version-v7/api/back-button.md @@ -0,0 +1,66 @@ +--- +title: 'ion-back-button' +--- + +import Props from '@ionic-internal/component-api/v7/back-button/props.md'; +import Events from '@ionic-internal/component-api/v7/back-button/events.md'; +import Methods from '@ionic-internal/component-api/v7/back-button/methods.md'; +import Parts from '@ionic-internal/component-api/v7/back-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/back-button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/back-button/slots.md'; + + + ion-back-button: Custom Menu Back Button for Applications + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +The back button navigates back in the app's history when clicked. It is only displayed when there is history in the navigation stack, unless [`defaultHref`](#default-back-history) is set. The back button displays different text and icon based on the mode, but this can be customized. + +## Basic Usage + +import Basic from '@site/static/usage/v7/back-button/basic/index.md'; + + + +## Custom Back Button + +By default, the back button will display the text `"Back"` with a `"chevron-back"` icon on `ios`, and an `"arrow-back-sharp"` icon on `md`. This can be customized per back button component by setting the `icon` or `text` properties. Alternatively, it can be set globally using the `backButtonIcon` or `backButtonText` properties in the global config. See the [Config docs](../developing/config) for more information. + +import Custom from '@site/static/usage/v7/back-button/custom/index.md'; + + + +## Default Back History + +Occasionally an app may need to show the back button and navigate back when there is no history. This can be done by setting the `defaultHref` on the back button to a path. In order to use `defaultHref`, the app must contain a router with paths set. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/backdrop.md b/versioned_docs/version-v7/api/backdrop.md new file mode 100644 index 00000000000..5b90371d7de --- /dev/null +++ b/versioned_docs/version-v7/api/backdrop.md @@ -0,0 +1,58 @@ +--- +title: 'ion-backdrop' +--- + +import Props from '@ionic-internal/component-api/v7/backdrop/props.md'; +import Events from '@ionic-internal/component-api/v7/backdrop/events.md'; +import Methods from '@ionic-internal/component-api/v7/backdrop/methods.md'; +import Parts from '@ionic-internal/component-api/v7/backdrop/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/backdrop/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/backdrop/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component. + +## Basic Usage + +The backdrop prevents clicking or tapping on the content behind it. It is transparent by default, so the below demo includes CSS to make it visible. + +import Basic from '@site/static/usage/v7/backdrop/basic/index.md'; + + + +## Styling + +The backdrop can be customized by assigning CSS properties directly to the backdrop element. Common properties include `background-color`, `background` and `opacity`. + +Content can be displayed above the backdrop by setting a `z-index` on the content, higher than the backdrop (defaults to `2`). + +import Styling from '@site/static/usage/v7/backdrop/styling/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/badge.md b/versioned_docs/version-v7/api/badge.md new file mode 100644 index 00000000000..e78b7d37dfa --- /dev/null +++ b/versioned_docs/version-v7/api/badge.md @@ -0,0 +1,68 @@ +--- +title: 'ion-badge' +--- + +import Props from '@ionic-internal/component-api/v7/badge/props.md'; +import Events from '@ionic-internal/component-api/v7/badge/events.md'; +import Methods from '@ionic-internal/component-api/v7/badge/methods.md'; +import Parts from '@ionic-internal/component-api/v7/badge/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/badge/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/badge/slots.md'; + + + ion-badge: iOS & Android App Notification Badge Icons + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are. Badges are hidden if no content is passed in. + +## Basic Usage + +import Basic from '@site/static/usage/v7/badge/basic/index.md'; + + + +## Theming + +### Colors + +import Colors from '@site/static/usage/v7/badge/theming/colors/index.md'; + + + +### CSS Properties + +import CSSProps from '@site/static/usage/v7/badge/theming/css-properties/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/breadcrumb.md b/versioned_docs/version-v7/api/breadcrumb.md new file mode 100644 index 00000000000..3b4b4c6de99 --- /dev/null +++ b/versioned_docs/version-v7/api/breadcrumb.md @@ -0,0 +1,63 @@ +--- +title: 'ion-breadcrumb' +--- + +import Props from '@ionic-internal/component-api/v7/breadcrumb/props.md'; +import Events from '@ionic-internal/component-api/v7/breadcrumb/events.md'; +import Methods from '@ionic-internal/component-api/v7/breadcrumb/methods.md'; +import Parts from '@ionic-internal/component-api/v7/breadcrumb/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/breadcrumb/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/breadcrumb/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +A Breadcrumb is a single navigation item that is a child of the Breadcrumbs component. A breadcrumb can link elsewhere in an app or it can be plain text. Each breadcrumb has a separator between it and the next breadcrumb and can optionally contain an icon. + +See the [Breadcrumbs](./breadcrumbs) documentation for more information. + +## Interfaces + +### BreadcrumbCollapsedClickEventDetail + +```typescript +interface BreadcrumbCollapsedClickEventDetail { + collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[]; +} +``` + +### BreadcrumbCustomEvent + +While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing . + +```typescript +interface BreadcrumbCustomEvent extends CustomEvent { + detail: BreadcrumbCollapsedClickEventDetail; + target: HTMLIonBreadcrumbElement; +} +``` + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/breadcrumbs.md b/versioned_docs/version-v7/api/breadcrumbs.md new file mode 100644 index 00000000000..ff39ac0a33c --- /dev/null +++ b/versioned_docs/version-v7/api/breadcrumbs.md @@ -0,0 +1,108 @@ +--- +title: 'ion-breadcrumbs' +--- + +import Props from '@ionic-internal/component-api/v7/breadcrumbs/props.md'; +import Events from '@ionic-internal/component-api/v7/breadcrumbs/events.md'; +import Methods from '@ionic-internal/component-api/v7/breadcrumbs/methods.md'; +import Parts from '@ionic-internal/component-api/v7/breadcrumbs/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/breadcrumbs/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/breadcrumbs/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Breadcrumbs are navigation items that are used to indicate where a user is on an app or site. They should be used for large sites and apps with hierarchically arranged pages. Breadcrumbs can be collapsed based on the maximum number that can show, and the collapsed indicator can be clicked on to present a popover with more information or expand the collapsed breadcrumbs. + +## Basic Usage + +import Basic from '@site/static/usage/v7/breadcrumbs/basic/index.md'; + + + +## Using Icons + +### Icons on Items + +import IconsOnItems from '@site/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md'; + + + +### Custom Separators + +import CustomSeparators from '@site/static/usage/v7/breadcrumbs/icons/custom-separators/index.md'; + + + +## Collapsing Items + +### Max Items + +If there are more items than the value of `maxItems`, the breadcrumbs will be collapsed. By default, only the first and last items will be shown. + +import MaxItems from '@site/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md'; + + + +### Items Before or After Collapse + +Once the items are collapsed, the number of items to show can be controlled by the `itemsBeforeCollapse` and `itemsAfterCollapse` properties. + +import ItemsBeforeAfter from '@site/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md'; + + + +### Collapsed Indicator Click -- Expand Breadcrumbs + +Clicking the collapsed indicator will fire the `ionCollapsedClick` event. This can be used to, for example, expand the breadcrumbs. + +import ExpandOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md'; + + + +### Collapsed Indicator Click -- Present Popover + +The `ionCollapsedClick` event can also be used to present an overlay (in this case, an `ion-popover`) showing the hidden breadcrumbs. + +import PopoverOnClick from '@site/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md'; + + + +## Theming + +### Colors + +import Colors from '@site/static/usage/v7/breadcrumbs/theming/colors/index.md'; + + + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v7/breadcrumbs/theming/css-properties/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/button.md b/versioned_docs/version-v7/api/button.md new file mode 100644 index 00000000000..29a908e8547 --- /dev/null +++ b/versioned_docs/version-v7/api/button.md @@ -0,0 +1,124 @@ +--- +title: 'ion-button' +--- + +import Props from '@ionic-internal/component-api/v7/button/props.md'; +import Events from '@ionic-internal/component-api/v7/button/events.md'; +import Methods from '@ionic-internal/component-api/v7/button/methods.md'; +import Parts from '@ionic-internal/component-api/v7/button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/button/slots.md'; + + + ion-button: Style Buttons with Custom CSS Properties + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way. + +## Basic Usage + +import Basic from '@site/static/usage/v7/button/basic/index.md'; + + + +## Expand + +This property lets you specify how wide the button should be. By default, buttons have `display: inline-block`, but setting this property will change the button to a full-width element with `display: block`. + +import Expand from '@site/static/usage/v7/button/expand/index.md'; + + + +## Shape + +This property lets you specify the shape of the button. By default, buttons are rectangular with a small border radius, but setting this to `"round"` will change the button to a rounded element. + +import Shape from '@site/static/usage/v7/button/shape/index.md'; + + + +## Fill + +This property determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background. + +import Fill from '@site/static/usage/v7/button/fill/index.md'; + + + +## Size + +This property specifies the size of the button. Setting this property will change the height and padding of a button. + +import Size from '@site/static/usage/v7/button/size/index.md'; + + + +## Icons + +import Icons from '@site/static/usage/v7/button/icons/index.md'; + + + +## Theming + +### Colors + +import Colors from '@site/static/usage/v7/button/theming/colors/index.md'; + + + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v7/button/theming/css-properties/index.md'; + + + +## Accessibility + +Buttons are built to be accessible, but may need some adjustments depending on their content. The button component renders a native [button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) which allows it to take advantage of the functionality that a native button provides. + +### Overflowing Text Content + +There are many cases where a button's text content may overflow the container. It is recommended to wrap the text inside of the button when this happens so that all of the text can still be read. The button component will automatically adjust its height to accommodate the extra lines of text. + +The button text does not automatically wrap to the next line when the text is too long to fit. In order to make the text wrap, the `ion-text-wrap` class can be added, which will set the `white-space` property to `"normal"`. This will become the default in a future major release. + +:::info +The `max-width` style is set on the button below for demo purposes only. Text wrapping will work with a dynamic button width. +::: + +import TextWrapping from '@site/static/usage/v7/button/text-wrapping/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/buttons.md b/versioned_docs/version-v7/api/buttons.md new file mode 100644 index 00000000000..507646932fb --- /dev/null +++ b/versioned_docs/version-v7/api/buttons.md @@ -0,0 +1,93 @@ +--- +title: 'ion-buttons' +--- + +import Props from '@ionic-internal/component-api/v7/buttons/props.md'; +import Events from '@ionic-internal/component-api/v7/buttons/events.md'; +import Methods from '@ionic-internal/component-api/v7/buttons/methods.md'; +import Parts from '@ionic-internal/component-api/v7/buttons/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/buttons/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/buttons/slots.md'; + + + ion-buttons: Toolbar Element with Named Slots for Buttons + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +The Buttons component is a container element. It should be used inside of a [toolbar](./toolbar) and can contain several types of buttons, including standard [buttons](./button), [menu buttons](./menu-button), and [back buttons](./back-button). + +## Basic Usage + +import Basic from '@site/static/usage/v7/buttons/basic/index.md'; + + + +## Buttons Placement + +Buttons can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot. + +| Slot | Description | +| ----------- | ------------------------------------------------------------------------------------------------------- | +| `start` | Positions to the `left` of the content in LTR, and to the `right` in RTL. | +| `end` | Positions to the `right` of the content in LTR, and to the `left` in RTL. | +| `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. | +| `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. | + +import Placement from '@site/static/usage/v7/buttons/placement/index.md'; + + + +## Types of Buttons + +A button in a toolbar is styled to be clear by default, but this can be changed using the [`fill`](./button#fill) property on the button. The properties included on [back button](./back-button) and [menu button](./menu-button) in this example are for display purposes; see their respective documentation for proper usage. + +import Types from '@site/static/usage/v7/buttons/types/index.md'; + + + +## Collapsible Buttons + +The `collapse` property can be set on the buttons to collapse them when the header collapses. This is typically used with [collapsible large titles](./title#collapsible-large-titles). + +:::info + +This feature is only available for iOS. + +::: + + + +import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/card-content.md b/versioned_docs/version-v7/api/card-content.md new file mode 100644 index 00000000000..c5758a6f5ec --- /dev/null +++ b/versioned_docs/version-v7/api/card-content.md @@ -0,0 +1,40 @@ +--- +title: 'ion-card-content' +--- + +import Props from '@ionic-internal/component-api/v7/card-content/props.md'; +import Events from '@ionic-internal/component-api/v7/card-content/events.md'; +import Methods from '@ionic-internal/component-api/v7/card-content/methods.md'; +import Parts from '@ionic-internal/component-api/v7/card-content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/card-content/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/card-content/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +Card content is a child component of card that adds padding around its contents. It is recommended that any text content for a card should be placed inside of card content. + +See the [Card](./card) documentation for more information. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/card-header.md b/versioned_docs/version-v7/api/card-header.md new file mode 100644 index 00000000000..14ee497ffe0 --- /dev/null +++ b/versioned_docs/version-v7/api/card-header.md @@ -0,0 +1,42 @@ +--- +title: 'ion-card-header' +--- + +import Props from '@ionic-internal/component-api/v7/card-header/props.md'; +import Events from '@ionic-internal/component-api/v7/card-header/events.md'; +import Methods from '@ionic-internal/component-api/v7/card-header/methods.md'; +import Parts from '@ionic-internal/component-api/v7/card-header/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/card-header/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/card-header/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Card header is a child component of card that should be placed before the card content. It can contain a [card title](./card-title) and a [card subtitle](./card-subtitle). + +See the [Card](./card) documentation for more information. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/card-subtitle.md b/versioned_docs/version-v7/api/card-subtitle.md new file mode 100644 index 00000000000..65218230127 --- /dev/null +++ b/versioned_docs/version-v7/api/card-subtitle.md @@ -0,0 +1,42 @@ +--- +title: 'ion-card-subtitle' +--- + +import Props from '@ionic-internal/component-api/v7/card-subtitle/props.md'; +import Events from '@ionic-internal/component-api/v7/card-subtitle/events.md'; +import Methods from '@ionic-internal/component-api/v7/card-subtitle/methods.md'; +import Parts from '@ionic-internal/component-api/v7/card-subtitle/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/card-subtitle/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/card-subtitle/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Card subtitle is a child component of card that should be placed inside of a [card header](./card-header). + +See the [Card](./card) documentation for more information. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/card-title.md b/versioned_docs/version-v7/api/card-title.md new file mode 100644 index 00000000000..e967f993af5 --- /dev/null +++ b/versioned_docs/version-v7/api/card-title.md @@ -0,0 +1,50 @@ +--- +title: 'ion-card-title' +--- + +import Props from '@ionic-internal/component-api/v7/card-title/props.md'; +import Events from '@ionic-internal/component-api/v7/card-title/events.md'; +import Methods from '@ionic-internal/component-api/v7/card-title/methods.md'; +import Parts from '@ionic-internal/component-api/v7/card-title/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/card-title/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/card-title/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + ion-card-title: Ionic App Card Title Component + + + + + +Card title is a child component of card that should be placed inside of a [card header](./card-header). + +See the [Card](./card) documentation for more information. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/card.md b/versioned_docs/version-v7/api/card.md new file mode 100644 index 00000000000..9102c106a93 --- /dev/null +++ b/versioned_docs/version-v7/api/card.md @@ -0,0 +1,90 @@ +--- +title: 'ion-card' +--- + +import Props from '@ionic-internal/component-api/v7/card/props.md'; +import Events from '@ionic-internal/component-api/v7/card/events.md'; +import Methods from '@ionic-internal/component-api/v7/card/methods.md'; +import Parts from '@ionic-internal/component-api/v7/card/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/card/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/card/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + ion-card: Card UI Components for Ionic Framework API + + + + + +Cards are containers that display content such as text, images, buttons, and lists. +A card can be a single component, but is often made up of a header, title, subtitle, +and content. Cards are broken up into several components to accommodate this structure: +[card header](./card-header), [card title](./card-title), [card subtitle](./card-subtitle), +and [card content](./card-content). + +## Basic Usage + +import Basic from '@site/static/usage/v7/card/basic/index.md'; + + + +## Media Cards + +import Media from '@site/static/usage/v7/card/media/index.md'; + + + +## Card Buttons + +import Buttons from '@site/static/usage/v7/card/buttons/index.md'; + + + +## List Card + +import List from '@site/static/usage/v7/card/list/index.md'; + + + +## Theming + +### Colors + +import Colors from '@site/static/usage/v7/card/theming/colors/index.md'; + + + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v7/card/theming/css-properties/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/checkbox.md b/versioned_docs/version-v7/api/checkbox.md new file mode 100644 index 00000000000..dd268c6dc7e --- /dev/null +++ b/versioned_docs/version-v7/api/checkbox.md @@ -0,0 +1,144 @@ +--- +title: 'ion-checkbox' +--- + +import Props from '@ionic-internal/component-api/v7/checkbox/props.md'; +import Events from '@ionic-internal/component-api/v7/checkbox/events.md'; +import Methods from '@ionic-internal/component-api/v7/checkbox/methods.md'; +import Parts from '@ionic-internal/component-api/v7/checkbox/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/checkbox/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/checkbox/slots.md'; + + + ion-checkbox: Ionic App Checkbox to Select Multiple Options + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property. + +## Basic Usage + +import Basic from '@site/static/usage/v7/checkbox/basic/index.md'; + + + +## Label Placement + +Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property. + +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 + +Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property. + +import Justify from '@site/static/usage/v7/checkbox/justify/index.md'; + + + +:::note +`ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly. +::: + +## Indeterminate Checkboxes + +import Indeterminate from '@site/static/usage/v7/checkbox/indeterminate/index.md'; + + + +## Theming + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v7/checkbox/theming/css-properties/index.md'; + + + +## Interfaces + +### CheckboxChangeEventDetail + +```typescript +interface CheckboxChangeEventDetail { + value: T; + checked: boolean; +} +``` + +### CheckboxCustomEvent + +While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. + +```typescript +interface CheckboxCustomEvent extends CustomEvent { + detail: CheckboxChangeEventDetail; + target: HTMLIonCheckboxElement; +} +``` + +## Migrating from Legacy Checkbox Syntax + +A simpler checkbox syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup a checkbox, resolves accessibility issues, and improves the developer experience. + +Developers can perform this migration one checkbox at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible. + +### Using the Modern Syntax + +Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-checkbox`. The placement of the label can be configured using the `labelPlacement` property on `ion-checkbox`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-checkbox`. + +import Migration from '@site/static/usage/v7/checkbox/migration/index.md'; + + + +:::note +In past versions of Ionic, `ion-item` was required for `ion-checkbox` to function properly. Starting in Ionic 7.0, `ion-checkbox` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-checkbox` to function properly. +::: + +### Using the Legacy Syntax + +Ionic uses heuristics to detect if an app is using the modern checkbox syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-checkbox` to `true` to force that instance of the checkbox to use the legacy syntax. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/chip.md b/versioned_docs/version-v7/api/chip.md new file mode 100644 index 00000000000..54be135f0ec --- /dev/null +++ b/versioned_docs/version-v7/api/chip.md @@ -0,0 +1,74 @@ +--- +title: 'ion-chip' +--- + +import Props from '@ionic-internal/component-api/v7/chip/props.md'; +import Events from '@ionic-internal/component-api/v7/chip/events.md'; +import Methods from '@ionic-internal/component-api/v7/chip/methods.md'; +import Parts from '@ionic-internal/component-api/v7/chip/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/chip/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/chip/slots.md'; + + + ion-chip: Text, Icon and Avatar for Ionic Framework Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons. + +## Basic Usage + +import Basic from '@site/static/usage/v7/chip/basic/index.md'; + + + +## Slotting Components and Icons + +import SlotExample from '@site/static/usage/v7/chip/slots/index.md'; + + + +## Theming + +### Colors + +import Colors from '@site/static/usage/v7/chip/theming/colors/index.md'; + + + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v7/chip/theming/css-properties/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/col.md b/versioned_docs/version-v7/api/col.md new file mode 100644 index 00000000000..6a75095cd31 --- /dev/null +++ b/versioned_docs/version-v7/api/col.md @@ -0,0 +1,54 @@ +--- +title: 'ion-col' +--- + +import Props from '@ionic-internal/component-api/v7/col/props.md'; +import Events from '@ionic-internal/component-api/v7/col/events.md'; +import Methods from '@ionic-internal/component-api/v7/col/methods.md'; +import Parts from '@ionic-internal/component-api/v7/col/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/col/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/col/slots.md'; + + + ion-col: Column Component Padding and Other Properties + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Columns are cellular components of the [grid](./grid) system and go inside of a [row](./row). They will expand to fill the row. All content within a grid should go inside of a column. + +See the [grid](./grid) documentation for more information. + +## Column Alignment + +By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/content.md b/versioned_docs/version-v7/api/content.md new file mode 100644 index 00000000000..437a64d6e8d --- /dev/null +++ b/versioned_docs/version-v7/api/content.md @@ -0,0 +1,182 @@ +--- +title: 'ion-content' +--- + +import Props from '@ionic-internal/component-api/v7/content/props.md'; +import Events from '@ionic-internal/component-api/v7/content/events.md'; +import Methods from '@ionic-internal/component-api/v7/content/methods.md'; +import Parts from '@ionic-internal/component-api/v7/content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/content/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/content/slots.md'; + + + ion-content: Scrollable Component for Ionic App Content + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +The content component provides an easy to use content area with some useful methods +to control the scrollable area. There should only be one content in a single +view. + +Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). + +## Basic Usage + +import Basic from '@site/static/usage/v7/content/basic/index.md'; + + + +## Header & Footer + +Content can be the only top-level component in a page, or it can be used alongside a [header](./header), [footer](./footer), or both. When used with a header or footer, it will adjust its size to fill the remaining height. + +import HeaderFooter from '@site/static/usage/v7/content/header-footer/index.md'; + + + +## Fullscreen Content + +By default, content fills the space between a [header](./header) and [footer](./footer) but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the `translucent` property is set on either of them, or `opacity` is set on the toolbar. This can be achieved by setting the `fullscreen` property on the content to `true`. + +import Fullscreen from '@site/static/usage/v7/content/fullscreen/index.md'; + + + +## Fixed Content + +To place elements outside of the scrollable area, assign them to the `fixed` slot. Doing so will [absolutely position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning) the element to the top left of the content. In order to change the position of the element, it can be styled using the [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) CSS properties. + +import Fixed from '@site/static/usage/v7/content/fixed/index.md'; + + + +## Scroll Methods + +Content provides [methods](#methods) that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a `duration` in order to smoothly transition instead of instantly changing the position. + +import ScrollMethods from '@site/static/usage/v7/content/scroll-methods/index.md'; + + + +## Scroll Events + +Scroll events are disabled by default for content due to performance. However, they can be enabled by setting `scrollEvents` to `true`. This is necessary before listening to any of the scroll [events](#events). + +import ScrollEvents from '@site/static/usage/v7/content/scroll-events/index.md'; + + + +## Theming + +### Colors + +import Colors from '@site/static/usage/v7/content/theming/colors/index.md'; + + + +### CSS Shadow Parts + +import CSSParts from '@site/static/usage/v7/content/theming/css-shadow-parts/index.md'; + + + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index.md'; + + + +### 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 + +### ScrollBaseDetail + +```typescript +interface ScrollBaseDetail { + isScrolling: boolean; +} +``` + +### ScrollDetail + +```typescript +interface ScrollDetail extends GestureDetail, ScrollBaseDetail { + scrollTop: number; + scrollLeft: number; +} +``` + +### ScrollBaseCustomEvent + +While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScrollStart` and `ionScrollEnd` events. + +```typescript +interface ScrollBaseCustomEvent extends CustomEvent { + detail: ScrollBaseDetail; + target: HTMLIonContentElement; +} +``` + +### ScrollCustomEvent + +While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScroll` event. + +```typescript +interface ScrollCustomEvent extends ScrollBaseCustomEvent { + detail: ScrollDetail; +} +``` + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/datetime-button.md b/versioned_docs/version-v7/api/datetime-button.md new file mode 100644 index 00000000000..f8b2eea6fd2 --- /dev/null +++ b/versioned_docs/version-v7/api/datetime-button.md @@ -0,0 +1,82 @@ +--- +title: 'ion-datetime-button' +--- + +import Props from '@ionic-internal/component-api/v7/datetime-button/props.md'; +import Events from '@ionic-internal/component-api/v7/datetime-button/events.md'; +import Methods from '@ionic-internal/component-api/v7/datetime-button/methods.md'; +import Parts from '@ionic-internal/component-api/v7/datetime-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/datetime-button/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/datetime-button/slots.md'; + + + ion-datetime-button: Ionic Input for Datetime Picker + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Datetime Button links with a [Datetime](./datetime) component to display the formatted date and time. It also provides buttons to present the datetime in a modal, popover, and more. + +## Overview + +Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay. + +When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#keepcontentsmounted) or the [keepContentsMounted property on ion-popover](./popover#keepcontentsmounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet. + +## Basic Usage + +import Basic from '@site/static/usage/v7/datetime-button/basic/index.md'; + + + +## Localization + +The localized text on `ion-datetime-button` is determined by the `locale` property on the associated `ion-datetime` instance. See [Datetime Localization](./datetime#localization) for more details. + +## Usage with Modals and Popovers + +`ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used. + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v7/api/datetime.md b/versioned_docs/version-v7/api/datetime.md new file mode 100644 index 00000000000..ffbe71176a9 --- /dev/null +++ b/versioned_docs/version-v7/api/datetime.md @@ -0,0 +1,488 @@ +--- +title: 'ion-datetime' +--- + +import Props from '@ionic-internal/component-api/v7/datetime/props.md'; +import Events from '@ionic-internal/component-api/v7/datetime/events.md'; +import Methods from '@ionic-internal/component-api/v7/datetime/methods.md'; +import Parts from '@ionic-internal/component-api/v7/datetime/parts.md'; +import CustomProps from '@ionic-internal/component-api/v7/datetime/custom-props.md'; +import Slots from '@ionic-internal/component-api/v7/datetime/slots.md'; + +import Basic from '@site/static/usage/v7/datetime/basic/index.md'; + +import MaxMin from '@site/static/usage/v7/datetime/date-constraints/max-min/index.md'; +import Values from '@site/static/usage/v7/datetime/date-constraints/values/index.md'; +import Advanced from '@site/static/usage/v7/datetime/date-constraints/advanced/index.md'; + +import CustomLocale from '@site/static/usage/v7/datetime/localization/custom-locale/index.md'; +import HourCycle from '@site/static/usage/v7/datetime/localization/hour-cycle/index.md'; +import FirstDayOfWeek from '@site/static/usage/v7/datetime/localization/first-day-of-week/index.md'; +import LocaleExtensionTags from '@site/static/usage/v7/datetime/localization/locale-extension-tags/index.md'; +import TimeLabel from '@site/static/usage/v7/datetime/localization/time-label/index.md'; + +import MonthAndYear from '@site/static/usage/v7/datetime/presentation/month-and-year/index.md'; +import Time from '@site/static/usage/v7/datetime/presentation/time/index.md'; +import Date from '@site/static/usage/v7/datetime/presentation/date/index.md'; + +import ShowingDefaultTitle from '@site/static/usage/v7/datetime/title/showing-default-title/index.md'; +import CustomizingTitle from '@site/static/usage/v7/datetime/title/customizing-title/index.md'; + +import ShowingConfirmationButtons from '@site/static/usage/v7/datetime/buttons/showing-confirmation-buttons/index.md'; +import CustomizingButtons from '@site/static/usage/v7/datetime/buttons/customizing-buttons/index.md'; +import CustomizingButtonTexts from '@site/static/usage/v7/datetime/buttons/customizing-button-texts/index.md'; + +import HighlightedDatesArray from '@site/static/usage/v7/datetime/highlightedDates/array/index.md'; +import HighlightedDatesCallback from '@site/static/usage/v7/datetime/highlightedDates/callback/index.md'; + +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'; + + + ion-datetime: Ionic API Input for Datetime Format Picker + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Datetimes present a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native `input` elements of `datetime-local`, however, Ionic Framework's Datetime component makes it easy to display the date and time in the preferred format, and manage the datetime values. + +## Overview + +Historically, handling datetime values within JavaScript, or even within HTML +inputs, has always been a challenge. Specifically, JavaScript's `Date` object is +notoriously difficult to correctly parse apart datetime strings or to format +datetime values. Even worse is how different browsers and JavaScript versions +parse various datetime strings differently, especially per locale. + +Fortunately, Ionic Framework's datetime input has been designed so developers can avoid +the common pitfalls, allowing developers to easily manipulate datetime values and give the user a simple datetime picker for a great user experience. + +### ISO 8601 Datetime Format: `YYYY-MM-DDTHH:mmZ` + +Ionic Framework uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) +for its value. The value is simply a string, rather than using JavaScript's +`Date` object. Using the ISO datetime format makes it easy to serialize +and parse within JSON objects and databases. + +Below are some examples of ISO 8601 formats that can be used with `ion-datetime`: + +| 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` | + +Note that the year is always four-digits, milliseconds (if it's added) is always +three-digits, and all others are always two-digits. So the number representing +January always has a leading zero, such as `01`. Additionally, the hour is +always in the 24-hour format, so `00` is `12am` on a 12-hour clock, `13` means +`1pm`, and `23` means `11pm`. + +:::note +While seconds, milliseconds, and time zone can be specified using the ISO 8601 datetime format, `ion-datetime` does not provide an interface for second, millisecond, and time zone selection. Any second, millisecond, or time zone values provided will be ignored. +::: + +## Basic Usage + + + +## Usage with Datetime Button + +If you need to present a datetime in an overlay such as a modal or a popover, we recommend using [ion-datetime-button](./datetime-button). `ion-datetime-button` should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay. + +## Setting Values Asynchronously + +If its `value` is updated programmatically after a datetime has already been created, the datetime will automatically jump to the new date. However, it is recommended to avoid updating the `value` in this way when users are able to interact with the datetime, as this could be disorienting for those currently trying to select a date. For example, if a datetime's `value` is loaded by an asynchronous process, it is recommended to hide the datetime with CSS until the value has finished updating. + +## Date Constraints + +### Max and Min Dates + +To customize the minimum and maximum datetime values, the `min` and `max` component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user. + +The following example restricts date selection to March 2022 through May 2022 only. + + + +### Selecting Specific Values + +While the `min` and `max` properties allow you to restrict date selection to a certain range, the `monthValues`, `dayValues`, `yearValues`, `hourValues`, and `minuteValues` properties allow you choose specific days and times that users can select. + +The following example allows minutes to be selected in increments of 15. It also allows for days to be selected in increments of 5. + + + +### Advanced Date Constraints + +With the `isDateEnabled` property, developers can customize the `ion-datetime` to disable a specific day, range of dates, weekends or any custom rule using an ISO 8601 date string. +The `isDateEnabled` property accepts a function returning a boolean, indicating if a date is enabled. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank. + +The following example shows how to disable all weekend dates. For more advanced date manipulation, we recommend using a date utility such as `date-fns`. + + + +## Localization + +Ionic Framework makes use of the [Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web API which allows us to automatically localize the month and day names according to the language and region set on the user's device. + +### Custom Locale + +For instances where you need a specific locale, you can use the `locale` property to set it. The locale controls both the language and the date and time formats that are displayed. + +The following example shows how to set the locale to Spanish (Spain). + + + +:::note +The time label is not automatically localized. See [Time Label](#time-label) for more information. +::: + +### Hour Cycle + +`ion-datetime` will use the hour cycle that is specified by the `locale` property by default. For example, if `locale` is set to `en-US`, then `ion-datetime` will use a 12 hour cycle. + +There are 4 primary hour cycle types: + +| Hour cycle type | Description | +| --------------- | -------------------------------------------------------------------------------------------------------------- | +| `'h12'` | Hour system using 1–12; corresponds to 'h' in patterns. The 12 hour clock, with midnight starting at 12:00 am. | +| `'h23'` | Hour system using 0–23; corresponds to 'H' in patterns. The 24 hour clock, with midnight starting at 0:00. | +| `'h11'` | Hour system using 0–11; corresponds to 'K' in patterns. The 12 hour clock, with midnight starting at 0:00 am. | +| `'h24'` | Hour system using 1–24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00. | + +:::note +Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle +::: + +There may be scenarios where you need to have more control over which hour cycle is used. This is where the `hourCycle` property can help. + +In the following example, we can use the `hourCycle` property to force `ion-datetime` to use the 12 hour cycle even though the locale is `en-GB`, which uses a 24 hour cycle by default: + + + +### First Day of the Week + +For `ion-datetime`, the default first day of the week is Sunday. As of 2022, there is no browser API that lets Ionic automatically determine the first day of the week based on a device's locale, though there is on-going work regarding this (see: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6)). + + + +### Time Label + +The time label is not automatically localized. Fortunately, Ionic makes it easy to provide custom localizations with the `time-label` slot. + + + +### Locale Extension Tags + +`ion-datetime` also supports [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) as part of the `Intl.Locale` API. These tags let you encode information about the locale in the locale string itself. Developers may prefer to use the extension tag approach if they are using the [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) in their apps. + +For example, if you wanted to use a 12 hour cycle with the `en-GB` locale, you could provide extension tags instead of using both the `locale` and `hourCycle` properties: + + + +:::note +Be sure to check the [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) for `Intl.Locale` before using it in your app. +::: + +## Presentation + +By default, `ion-datetime` allows users to select both date and time. In addition, users have access to selecting the specific month, year, hour, and minute. + +Some use cases may call for only date selection or only time selection. The `presentation` property allows you to specify which pickers to show and the order to show them in. For example, setting `date-time` will have the calendar picker appear before the time picker. Setting `time-date` will have the calendar picker appear after the time picker. + +### Month and Year Selection + +Month and year selection is available by passing `month-year`, `year-month`, `month`, or `year` to the `presentation` property. + +This example shows a datetime with the `month-year` configuration. + + + +### Time Selection + +Time selection is available by passing `date-time`, `time-date`, or `time` to the `presentation` property. + +This example shows a datetime with the `time` configuration. + +