From 389dbbeb45ea289cf385be9b435d572989bd398e Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 1 May 2023 14:20:47 -0400 Subject: [PATCH 01/11] chore: lint html files --- static/demos/api/alert/index.html | 3 +- static/demos/api/card/index.html | 4 +- static/demos/api/datetime/index.html | 4 +- static/demos/api/menu/index.html | 4 +- .../accessibility/animations/demo.html | 84 +++-- static/usage/v6/accordion/basic/demo.html | 84 +++-- .../advanced-expansion-styles/demo.html | 138 ++++---- .../customization/expansion-styles/demo.html | 84 +++-- .../accordion/customization/icons/demo.html | 84 +++-- .../accordion/customization/theming/demo.html | 126 ++++---- .../v6/accordion/disable-group/demo.html | 84 +++-- .../v6/accordion/disable/group/demo.html | 84 +++-- .../v6/accordion/disable/individual/demo.html | 84 +++-- .../v6/accordion/listen-changes/demo.html | 119 ++++--- static/usage/v6/accordion/multiple/demo.html | 92 +++--- .../v6/accordion/readonly/group/demo.html | 84 +++-- .../accordion/readonly/individual/demo.html | 84 +++-- static/usage/v6/accordion/toggle/demo.html | 118 ++++--- static/usage/v6/action-sheet/basic/demo.html | 124 ++++---- .../theming/css-properties/demo.html | 124 ++++---- .../v6/action-sheet/theming/styling/demo.html | 144 ++++----- static/usage/v6/alert/buttons/demo.html | 112 +++---- static/usage/v6/alert/customization/demo.html | 132 ++++---- static/usage/v6/alert/inputs/radios/demo.html | 92 +++--- .../v6/alert/inputs/text-inputs/demo.html | 100 +++--- .../v6/alert/presenting/controller/demo.html | 62 ++-- static/usage/v6/avatar/basic/demo.html | 45 ++- static/usage/v6/avatar/chip/demo.html | 51 ++- static/usage/v6/avatar/item/demo.html | 51 ++- .../avatar/theming/css-properties/demo.html | 54 ++-- static/usage/v6/back-button/basic/demo.html | 55 ++-- static/usage/v6/back-button/custom/demo.html | 55 ++-- static/usage/v6/backdrop/basic/demo.html | 61 ++-- static/usage/v6/backdrop/styling/demo.html | 106 +++---- static/usage/v6/badge/basic/demo.html | 68 ++-- .../usage/v6/badge/theming/colors/demo.html | 100 +++--- .../v6/badge/theming/css-properties/demo.html | 72 ++--- static/usage/v6/breadcrumbs/basic/demo.html | 50 ++- .../expand-on-click/demo.html | 66 ++-- .../items-before-after/demo.html | 120 ++++--- .../collapsing-items/max-items/demo.html | 54 ++-- .../popover-on-click/demo.html | 96 +++--- .../icons/custom-separators/demo.html | 74 +++-- .../icons/icons-on-items/demo.html | 124 ++++---- .../v6/breadcrumbs/theming/colors/demo.html | 50 ++- .../theming/css-properties/demo.html | 64 ++-- static/usage/v6/button/basic/demo.html | 43 ++- static/usage/v6/button/expand/demo.html | 54 ++-- static/usage/v6/button/fill/demo.html | 47 ++- static/usage/v6/button/icons/demo.html | 61 ++-- static/usage/v6/button/shape/demo.html | 43 ++- static/usage/v6/button/size/demo.html | 45 ++- .../usage/v6/button/theming/colors/demo.html | 72 ++--- .../button/theming/css-properties/demo.html | 88 +++--- static/usage/v6/buttons/basic/demo.html | 50 ++- static/usage/v6/buttons/placement/demo.html | 86 +++-- static/usage/v6/buttons/types/demo.html | 188 ++++++----- static/usage/v6/card/basic/demo.html | 78 +++-- static/usage/v6/card/buttons/demo.html | 82 +++-- static/usage/v6/card/list/demo.html | 140 ++++---- static/usage/v6/card/media/demo.html | 80 +++-- static/usage/v6/card/theming/colors/demo.html | 250 +++++++-------- .../v6/card/theming/css-properties/demo.html | 112 ++++--- static/usage/v6/checkbox/basic/demo.html | 46 ++- .../usage/v6/checkbox/indeterminate/demo.html | 46 ++- .../checkbox/theming/css-properties/demo.html | 66 ++-- static/usage/v6/chip/basic/demo.html | 45 ++- static/usage/v6/chip/slots/demo.html | 63 ++-- static/usage/v6/chip/theming/colors/demo.html | 78 +++-- .../v6/chip/theming/css-properties/demo.html | 53 ++-- static/usage/v6/content/basic/demo.html | 48 ++- static/usage/v6/content/fixed/demo.html | 132 ++++---- static/usage/v6/content/fullscreen/demo.html | 150 ++++----- .../usage/v6/content/header-footer/demo.html | 72 ++--- .../usage/v6/content/scroll-events/demo.html | 134 ++++---- .../usage/v6/content/scroll-methods/demo.html | 146 +++++---- .../usage/v6/content/theming/colors/demo.html | 126 ++++---- .../content/theming/css-properties/demo.html | 60 ++-- .../theming/css-shadow-parts/demo.html | 64 ++-- .../usage/v6/datetime-button/basic/demo.html | 56 ++-- static/usage/v6/datetime/basic/demo.html | 56 ++-- .../customizing-button-texts/demo.html | 52 ++- .../buttons/customizing-buttons/demo.html | 70 ++-- .../showing-confirmation-buttons/demo.html | 52 ++- .../date-constraints/advanced/demo.html | 74 +++-- .../date-constraints/max-min/demo.html | 50 ++- .../date-constraints/values/demo.html | 50 ++- .../datetime/highlightedDates/array/demo.html | 106 ++++--- .../highlightedDates/callback/demo.html | 96 +++--- .../localization/custom-locale/demo.html | 50 ++- .../localization/first-day-of-week/demo.html | 50 ++- .../localization/hour-cycle/demo.html | 50 ++- .../locale-extension-tags/demo.html | 50 ++- .../localization/time-label/demo.html | 54 ++-- static/usage/v6/datetime/multiple/demo.html | 58 ++-- .../v6/datetime/presentation/date/demo.html | 50 ++- .../presentation/month-and-year/demo.html | 50 ++- .../v6/datetime/presentation/time/demo.html | 50 ++- .../v6/datetime/presentation/wheel/demo.html | 50 ++- static/usage/v6/datetime/theming/demo.html | 136 ++++---- .../title/customizing-title/demo.html | 54 ++-- .../title/showing-default-title/demo.html | 50 ++- static/usage/v6/fab/basic/demo.html | 49 ++- static/usage/v6/fab/button-sizing/demo.html | 69 ++-- static/usage/v6/fab/list-side/demo.html | 97 +++--- static/usage/v6/fab/positioning/demo.html | 129 ++++---- static/usage/v6/fab/theming/colors/demo.html | 99 +++--- .../theming/css-custom-properties/demo.html | 86 +++-- .../v6/fab/theming/css-shadow-parts/demo.html | 94 +++--- static/usage/v6/footer/basic/demo.html | 47 ++- .../v6/footer/custom-scroll-target/demo.html | 156 +++++---- static/usage/v6/footer/fade/demo.html | 131 ++++---- static/usage/v6/footer/no-border/demo.html | 47 ++- static/usage/v6/footer/translucent/demo.html | 131 ++++---- static/usage/v6/grid/basic/demo.html | 136 ++++---- .../grid/customizing/column-number/demo.html | 90 +++--- .../v6/grid/customizing/padding/demo.html | 124 ++++---- .../usage/v6/grid/customizing/width/demo.html | 106 +++---- static/usage/v6/grid/fixed/demo.html | 82 +++-- .../usage/v6/grid/offset-responsive/demo.html | 122 ++++--- static/usage/v6/grid/offset/demo.html | 120 ++++--- .../v6/grid/push-pull-responsive/demo.html | 124 ++++---- static/usage/v6/grid/push-pull/demo.html | 134 ++++---- static/usage/v6/grid/size-auto/demo.html | 136 ++++---- .../usage/v6/grid/size-responsive/demo.html | 126 ++++---- static/usage/v6/grid/size/demo.html | 122 ++++--- static/usage/v6/header/basic/demo.html | 47 ++- static/usage/v6/header/condense/demo.html | 141 +++++---- .../v6/header/custom-scroll-target/demo.html | 156 +++++---- static/usage/v6/header/fade/demo.html | 131 ++++---- static/usage/v6/header/no-border/demo.html | 47 ++- static/usage/v6/header/translucent/demo.html | 131 ++++---- static/usage/v6/icon/basic/demo.html | 47 ++- static/usage/v6/img/basic/demo.html | 52 +-- .../usage/v6/infinite-scroll/basic/demo.html | 115 ++++--- .../custom-infinite-scroll-content/demo.html | 175 ++++++---- .../infinite-scroll-content/demo.html | 101 +++--- static/usage/v6/input/basic/demo.html | 104 +++--- static/usage/v6/input/clear/demo.html | 82 +++-- static/usage/v6/input/fill/demo.html | 74 +++-- static/usage/v6/input/filtering/demo.html | 64 ++-- static/usage/v6/input/labels/demo.html | 84 +++-- .../usage/v6/input/theming/colors/demo.html | 76 +++-- .../v6/input/theming/css-properties/demo.html | 72 ++--- static/usage/v6/input/types/demo.html | 104 +++--- static/usage/v6/item-divider/basic/demo.html | 112 ++++--- .../v6/item-divider/theming/colors/demo.html | 108 ++++--- .../theming/css-properties/demo.html | 66 ++-- static/usage/v6/item-group/basic/demo.html | 104 +++--- .../v6/item-group/sliding-items/demo.html | 192 +++++------ static/usage/v6/item-sliding/basic/demo.html | 110 ++++--- .../v6/item-sliding/expandable/demo.html | 76 +++-- static/usage/v6/item-sliding/icons/demo.html | 298 +++++++++--------- static/usage/v6/item/basic/demo.html | 116 ++++--- static/usage/v6/item/buttons/demo.html | 122 ++++--- static/usage/v6/item/clickable/demo.html | 72 ++--- static/usage/v6/item/counter/demo.html | 78 +++-- static/usage/v6/item/detail-arrows/demo.html | 122 ++++--- static/usage/v6/item/helper-error/demo.html | 108 +++---- static/usage/v6/item/icons/demo.html | 88 +++--- static/usage/v6/item/inputs/demo.html | 144 +++++---- static/usage/v6/item/lines/demo.html | 114 ++++--- static/usage/v6/item/media/demo.html | 76 ++--- static/usage/v6/item/theming/colors/demo.html | 108 ++++--- .../v6/item/theming/css-properties/demo.html | 108 ++++--- .../item/theming/css-shadow-parts/demo.html | 108 ++++--- .../v6/item/theming/input-highlight/demo.html | 84 +++-- static/usage/v6/label/basic/demo.html | 40 ++- .../usage/v6/label/theming/colors/demo.html | 68 ++-- static/usage/v6/list-header/basic/demo.html | 88 +++--- static/usage/v6/list-header/buttons/demo.html | 90 +++--- static/usage/v6/list-header/lines/demo.html | 114 ++++--- .../v6/list-header/theming/colors/demo.html | 108 ++++--- .../theming/css-properties/demo.html | 62 ++-- static/usage/v6/list/basic/demo.html | 82 +++-- static/usage/v6/list/inset/demo.html | 90 +++--- static/usage/v6/list/lines/demo.html | 118 ++++--- static/usage/v6/loading/controller/demo.html | 68 ++-- static/usage/v6/loading/spinners/demo.html | 70 ++-- static/usage/v6/loading/theming/demo.html | 84 +++-- static/usage/v6/menu/basic/demo.html | 70 ++-- static/usage/v6/menu/theming/demo.html | 88 +++--- static/usage/v6/menu/toggle/demo.html | 78 +++-- static/usage/v6/menu/type/demo.html | 135 ++++---- .../v6/modal/can-dismiss/boolean/demo.html | 124 ++++---- .../v6/modal/can-dismiss/function/demo.html | 126 ++++---- .../prevent-swipe-to-close/demo.html | 108 ++++--- static/usage/v6/modal/card/basic/demo.html | 164 +++++----- static/usage/v6/modal/controller/demo.html | 98 +++--- .../usage/v6/modal/custom-dialogs/demo.html | 144 ++++----- .../usage/v6/modal/inline/is-open/demo.html | 84 ++--- .../v6/modal/performance/mount/demo.html | 94 +++--- .../modal/sheet/background-content/demo.html | 189 ++++++----- static/usage/v6/modal/sheet/basic/demo.html | 148 +++++---- .../v6/modal/sheet/handle-behavior/demo.html | 68 ++-- .../v6/modal/styling/animations/demo.html | 207 ++++++------ .../usage/v6/nav/modal-navigation/demo.html | 156 +++++---- static/usage/v6/nav/nav-link/demo.html | 67 ++-- static/usage/v6/note/basic/demo.html | 41 ++- static/usage/v6/note/item/demo.html | 64 ++-- static/usage/v6/note/theming/colors/demo.html | 84 +++-- .../v6/note/theming/css-properties/demo.html | 50 ++- .../usage/v6/picker/multiple-column/demo.html | 178 ++++++----- .../usage/v6/picker/single-column/demo.html | 125 ++++---- .../customization/positioning/demo.html | 98 +++--- .../v6/popover/customization/sizing/demo.html | 54 ++-- .../popover/customization/styling/demo.html | 76 +++-- static/usage/v6/popover/nested/demo.html | 72 ++--- .../v6/popover/performance/mount/demo.html | 46 ++- .../popover/presenting/controller/demo.html | 106 +++---- .../presenting/inline-isopen/demo.html | 64 ++-- .../presenting/inline-trigger/demo.html | 62 ++-- static/usage/v6/progress-bar/buffer/demo.html | 87 +++-- .../v6/progress-bar/determinate/demo.html | 69 ++-- .../v6/progress-bar/indeterminate/demo.html | 41 ++- .../v6/progress-bar/theming/colors/demo.html | 68 ++-- .../theming/css-properties/demo.html | 62 ++-- .../theming/css-shadow-parts/demo.html | 72 ++--- static/usage/v6/radio/basic/demo.html | 88 +++--- .../usage/v6/radio/empty-selection/demo.html | 88 +++--- .../usage/v6/radio/theming/colors/demo.html | 96 +++--- .../v6/radio/theming/css-properties/demo.html | 92 +++--- .../radio/theming/css-shadow-parts/demo.html | 118 ++++--- static/usage/v6/range/basic/demo.html | 50 ++- static/usage/v6/range/dual-knobs/demo.html | 64 ++-- static/usage/v6/range/pins/demo.html | 62 ++-- static/usage/v6/range/slots/demo.html | 56 ++-- .../usage/v6/range/snapping-ticks/demo.html | 50 ++- .../v6/range/theming/css-properties/demo.html | 66 ++-- .../range/theming/css-shadow-parts/demo.html | 112 ++++--- static/usage/v6/refresher/advanced/demo.html | 152 +++++---- static/usage/v6/refresher/basic/demo.html | 70 ++-- .../v6/refresher/custom-content/demo.html | 78 ++--- .../refresher/custom-scroll-target/demo.html | 106 +++---- .../v6/refresher/pull-properties/demo.html | 70 ++-- static/usage/v6/reorder/basic/demo.html | 132 ++++---- static/usage/v6/reorder/custom-icon/demo.html | 152 ++++----- .../v6/reorder/custom-scroll-target/demo.html | 150 ++++----- .../v6/reorder/toggling-disabled/demo.html | 150 ++++----- .../usage/v6/reorder/updating-data/demo.html | 108 ++++--- static/usage/v6/reorder/wrapper/demo.html | 142 ++++----- static/usage/v6/ripple-effect/basic/demo.html | 154 +++++---- .../v6/ripple-effect/customizing/demo.html | 152 +++++---- static/usage/v6/ripple-effect/type/demo.html | 152 +++++---- static/usage/v6/router/basic/demo.html | 69 ++-- static/usage/v6/searchbar/basic/demo.html | 58 ++-- .../v6/searchbar/cancel-button/demo.html | 62 ++-- .../usage/v6/searchbar/clear-button/demo.html | 56 ++-- static/usage/v6/searchbar/debounce/demo.html | 105 +++--- .../usage/v6/searchbar/search-icon/demo.html | 52 ++- .../v6/searchbar/theming/colors/demo.html | 68 ++-- .../theming/css-properties/demo.html | 90 +++--- .../usage/v6/segment-button/basic/demo.html | 98 +++--- .../usage/v6/segment-button/layout/demo.html | 188 ++++++----- .../theming/css-properties/demo.html | 102 +++--- .../theming/css-shadow-parts/demo.html | 118 ++++--- static/usage/v6/segment/basic/demo.html | 86 +++-- static/usage/v6/segment/scrollable/demo.html | 120 ++++--- .../usage/v6/segment/theming/colors/demo.html | 214 +++++++------ .../segment/theming/css-properties/demo.html | 72 ++--- .../select/basic/multiple-selection/demo.html | 56 ++-- .../basic/responding-to-interaction/demo.html | 116 ++++--- .../select/basic/single-selection/demo.html | 56 ++-- .../customization/button-text/demo.html | 74 +++-- .../customization/interface-options/demo.html | 146 +++++---- .../customization/styling-select/demo.html | 114 ++++--- .../select/interfaces/action-sheet/demo.html | 56 ++-- .../v6/select/interfaces/popover/demo.html | 56 ++-- .../multiple-selection/demo.html | 156 +++++---- .../using-comparewith/demo.html | 138 ++++---- static/usage/v6/select/typeahead/demo.html | 32 +- static/usage/v6/skeleton-text/basic/demo.html | 97 +++--- .../theming/css-properties/demo.html | 106 +++---- static/usage/v6/spinner/basic/demo.html | 130 ++++---- .../usage/v6/spinner/theming/colors/demo.html | 58 ++-- .../spinner/theming/css-properties/demo.html | 50 ++- static/usage/v6/split-pane/basic/demo.html | 70 ++-- .../theming/css-properties/demo.html | 84 +++-- static/usage/v6/tabs/router/demo.html | 225 +++++++------ static/usage/v6/text/basic/demo.html | 108 ++++--- static/usage/v6/textarea/autogrow/demo.html | 67 ++-- static/usage/v6/textarea/basic/demo.html | 76 +++-- .../usage/v6/textarea/clear-on-edit/demo.html | 52 ++- static/usage/v6/textarea/theming/demo.html | 66 ++-- static/usage/v6/thumbnail/basic/demo.html | 45 ++- static/usage/v6/thumbnail/item/demo.html | 51 ++- .../theming/css-properties/demo.html | 56 ++-- static/usage/v6/title/basic/demo.html | 41 ++- .../collapsible-large-title/basic/demo.html | 97 +++--- .../collapsible-large-title/buttons/demo.html | 103 +++--- .../v6/title/theming/css-properties/demo.html | 116 ++++--- static/usage/v6/toast/buttons/demo.html | 132 ++++---- static/usage/v6/toast/icon/demo.html | 78 +++-- static/usage/v6/toast/layout/demo.html | 112 ++++--- .../v6/toast/presenting/controller/demo.html | 92 +++--- static/usage/v6/toast/theming/demo.html | 120 ++++--- static/usage/v6/toggle/basic/demo.html | 84 +++-- static/usage/v6/toggle/on-off/demo.html | 41 ++- .../usage/v6/toggle/theming/colors/demo.html | 57 ++-- .../toggle/theming/css-properties/demo.html | 98 +++--- .../toggle/theming/css-shadow-parts/demo.html | 112 ++++--- static/usage/v6/toolbar/basic/demo.html | 51 ++- static/usage/v6/toolbar/buttons/demo.html | 210 ++++++------ .../usage/v6/toolbar/progress-bars/demo.html | 43 ++- static/usage/v6/toolbar/searchbars/demo.html | 47 ++- static/usage/v6/toolbar/segments/demo.html | 53 ++-- .../usage/v6/toolbar/theming/colors/demo.html | 110 ++++--- .../toolbar/theming/css-properties/demo.html | 76 +++-- .../accessibility/animations/demo.html | 84 +++-- static/usage/v7/accordion/basic/demo.html | 84 +++-- .../advanced-expansion-styles/demo.html | 138 ++++---- .../customization/expansion-styles/demo.html | 84 +++-- .../accordion/customization/icons/demo.html | 84 +++-- .../accordion/customization/theming/demo.html | 126 ++++---- .../v7/accordion/disable-group/demo.html | 84 +++-- .../v7/accordion/disable/group/demo.html | 84 +++-- .../v7/accordion/disable/individual/demo.html | 84 +++-- .../v7/accordion/listen-changes/demo.html | 119 ++++--- static/usage/v7/accordion/multiple/demo.html | 92 +++--- .../v7/accordion/readonly/group/demo.html | 84 +++-- .../accordion/readonly/individual/demo.html | 84 +++-- static/usage/v7/accordion/toggle/demo.html | 118 ++++--- .../v7/action-sheet/controller/demo.html | 98 +++--- .../v7/action-sheet/inline/isOpen/demo.html | 98 +++--- .../v7/action-sheet/inline/trigger/demo.html | 95 +++--- .../role-info-on-dismiss/demo.html | 126 ++++---- .../theming/css-properties/demo.html | 124 ++++---- .../v7/action-sheet/theming/styling/demo.html | 140 ++++---- static/usage/v7/alert/buttons/demo.html | 114 +++---- static/usage/v7/alert/customization/demo.html | 122 ++++--- static/usage/v7/alert/inputs/radios/demo.html | 84 +++-- .../v7/alert/inputs/text-inputs/demo.html | 92 +++--- .../v7/alert/presenting/controller/demo.html | 62 ++-- .../v7/alert/presenting/isOpen/demo.html | 60 ++-- .../v7/alert/presenting/trigger/demo.html | 60 ++-- static/usage/v7/avatar/basic/demo.html | 45 ++- static/usage/v7/avatar/chip/demo.html | 51 ++- static/usage/v7/avatar/item/demo.html | 51 ++- .../avatar/theming/css-properties/demo.html | 54 ++-- static/usage/v7/back-button/basic/demo.html | 55 ++-- static/usage/v7/back-button/custom/demo.html | 55 ++-- static/usage/v7/backdrop/basic/demo.html | 61 ++-- static/usage/v7/backdrop/styling/demo.html | 106 +++---- static/usage/v7/badge/basic/demo.html | 68 ++-- .../usage/v7/badge/theming/colors/demo.html | 100 +++--- .../v7/badge/theming/css-properties/demo.html | 72 ++--- static/usage/v7/breadcrumbs/basic/demo.html | 50 ++- .../expand-on-click/demo.html | 66 ++-- .../items-before-after/demo.html | 120 ++++--- .../collapsing-items/max-items/demo.html | 54 ++-- .../popover-on-click/demo.html | 96 +++--- .../icons/custom-separators/demo.html | 74 +++-- .../icons/icons-on-items/demo.html | 124 ++++---- .../v7/breadcrumbs/theming/colors/demo.html | 50 ++- .../theming/css-properties/demo.html | 64 ++-- static/usage/v7/button/basic/demo.html | 43 ++- static/usage/v7/button/expand/demo.html | 54 ++-- static/usage/v7/button/fill/demo.html | 47 ++- static/usage/v7/button/icons/demo.html | 61 ++-- static/usage/v7/button/shape/demo.html | 43 ++- static/usage/v7/button/size/demo.html | 45 ++- .../usage/v7/button/theming/colors/demo.html | 72 ++--- .../button/theming/css-properties/demo.html | 88 +++--- static/usage/v7/buttons/basic/demo.html | 50 ++- static/usage/v7/buttons/placement/demo.html | 86 +++-- static/usage/v7/buttons/types/demo.html | 188 ++++++----- static/usage/v7/card/basic/demo.html | 68 ++-- static/usage/v7/card/buttons/demo.html | 72 ++--- static/usage/v7/card/list/demo.html | 130 ++++---- static/usage/v7/card/media/demo.html | 70 ++-- static/usage/v7/card/theming/colors/demo.html | 238 +++++++------- .../v7/card/theming/css-properties/demo.html | 100 +++--- static/usage/v7/checkbox/basic/demo.html | 38 ++- .../usage/v7/checkbox/indeterminate/demo.html | 38 ++- static/usage/v7/checkbox/justify/demo.html | 29 +- .../v7/checkbox/label-placement/demo.html | 48 ++- .../checkbox/theming/css-properties/demo.html | 58 ++-- static/usage/v7/chip/basic/demo.html | 45 ++- static/usage/v7/chip/slots/demo.html | 63 ++-- static/usage/v7/chip/theming/colors/demo.html | 78 +++-- .../v7/chip/theming/css-properties/demo.html | 53 ++-- static/usage/v7/content/basic/demo.html | 48 ++- static/usage/v7/content/fixed/demo.html | 132 ++++---- static/usage/v7/content/fullscreen/demo.html | 150 ++++----- .../usage/v7/content/header-footer/demo.html | 72 ++--- .../usage/v7/content/scroll-events/demo.html | 134 ++++---- .../usage/v7/content/scroll-methods/demo.html | 146 +++++---- .../usage/v7/content/theming/colors/demo.html | 126 ++++---- .../content/theming/css-properties/demo.html | 60 ++-- .../theming/css-shadow-parts/demo.html | 64 ++-- .../usage/v7/datetime-button/basic/demo.html | 56 ++-- static/usage/v7/datetime/basic/demo.html | 54 ++-- .../customizing-button-texts/demo.html | 52 ++- .../buttons/customizing-buttons/demo.html | 70 ++-- .../showing-confirmation-buttons/demo.html | 52 ++- .../date-constraints/advanced/demo.html | 74 +++-- .../date-constraints/max-min/demo.html | 50 ++- .../date-constraints/values/demo.html | 50 ++- .../datetime/highlightedDates/array/demo.html | 100 +++--- .../highlightedDates/callback/demo.html | 90 +++--- .../localization/custom-locale/demo.html | 50 ++- .../localization/first-day-of-week/demo.html | 50 ++- .../localization/hour-cycle/demo.html | 50 ++- .../locale-extension-tags/demo.html | 50 ++- .../localization/time-label/demo.html | 54 ++-- static/usage/v7/datetime/multiple/demo.html | 58 ++-- .../v7/datetime/presentation/date/demo.html | 50 ++- .../presentation/month-and-year/demo.html | 50 ++- .../v7/datetime/presentation/time/demo.html | 50 ++- .../v7/datetime/presentation/wheel/demo.html | 50 ++- static/usage/v7/datetime/theming/demo.html | 136 ++++---- .../title/customizing-title/demo.html | 54 ++-- .../title/showing-default-title/demo.html | 50 ++- static/usage/v7/fab/basic/demo.html | 49 ++- static/usage/v7/fab/button-sizing/demo.html | 69 ++-- static/usage/v7/fab/list-side/demo.html | 97 +++--- static/usage/v7/fab/positioning/demo.html | 129 ++++---- static/usage/v7/fab/theming/colors/demo.html | 99 +++--- .../theming/css-custom-properties/demo.html | 86 +++-- .../v7/fab/theming/css-shadow-parts/demo.html | 94 +++--- static/usage/v7/footer/basic/demo.html | 47 ++- .../v7/footer/custom-scroll-target/demo.html | 156 +++++---- static/usage/v7/footer/fade/demo.html | 131 ++++---- static/usage/v7/footer/no-border/demo.html | 47 ++- static/usage/v7/footer/translucent/demo.html | 131 ++++---- static/usage/v7/grid/basic/demo.html | 136 ++++---- .../grid/customizing/column-number/demo.html | 90 +++--- .../v7/grid/customizing/padding/demo.html | 124 ++++---- .../usage/v7/grid/customizing/width/demo.html | 106 +++---- static/usage/v7/grid/fixed/demo.html | 82 +++-- .../usage/v7/grid/offset-responsive/demo.html | 122 ++++--- static/usage/v7/grid/offset/demo.html | 120 ++++--- .../v7/grid/push-pull-responsive/demo.html | 124 ++++---- static/usage/v7/grid/push-pull/demo.html | 134 ++++---- static/usage/v7/grid/size-auto/demo.html | 136 ++++---- .../usage/v7/grid/size-responsive/demo.html | 126 ++++---- static/usage/v7/grid/size/demo.html | 122 ++++--- static/usage/v7/header/basic/demo.html | 47 ++- static/usage/v7/header/condense/demo.html | 141 +++++---- .../v7/header/custom-scroll-target/demo.html | 156 +++++---- static/usage/v7/header/fade/demo.html | 131 ++++---- static/usage/v7/header/no-border/demo.html | 47 ++- static/usage/v7/header/translucent/demo.html | 131 ++++---- static/usage/v7/icon/basic/demo.html | 47 ++- static/usage/v7/img/basic/demo.html | 54 ++-- .../usage/v7/infinite-scroll/basic/demo.html | 115 ++++--- .../custom-infinite-scroll-content/demo.html | 175 ++++++---- .../infinite-scroll-content/demo.html | 101 +++--- static/usage/v7/input/basic/demo.html | 92 +++--- static/usage/v7/input/clear/demo.html | 93 +++--- static/usage/v7/input/counter/demo.html | 69 ++-- static/usage/v7/input/fill/demo.html | 61 ++-- static/usage/v7/input/filtering/demo.html | 62 ++-- static/usage/v7/input/helper-error/demo.html | 112 +++---- .../usage/v7/input/label-placement/demo.html | 74 +++-- .../usage/v7/input/theming/colors/demo.html | 74 +++-- .../v7/input/theming/css-properties/demo.html | 92 +++--- static/usage/v7/input/types/demo.html | 92 +++--- static/usage/v7/item-divider/basic/demo.html | 112 ++++--- .../v7/item-divider/theming/colors/demo.html | 108 ++++--- .../theming/css-properties/demo.html | 66 ++-- static/usage/v7/item-group/basic/demo.html | 104 +++--- .../v7/item-group/sliding-items/demo.html | 192 +++++------ static/usage/v7/item-sliding/basic/demo.html | 110 ++++--- .../v7/item-sliding/expandable/demo.html | 76 +++-- static/usage/v7/item-sliding/icons/demo.html | 298 +++++++++--------- static/usage/v7/item/basic/demo.html | 116 ++++--- static/usage/v7/item/buttons/demo.html | 122 ++++--- static/usage/v7/item/clickable/demo.html | 72 ++--- static/usage/v7/item/detail-arrows/demo.html | 122 ++++--- static/usage/v7/item/icons/demo.html | 88 +++--- static/usage/v7/item/inputs/demo.html | 142 ++++----- static/usage/v7/item/lines/demo.html | 114 ++++--- static/usage/v7/item/media/demo.html | 76 ++--- static/usage/v7/item/theming/colors/demo.html | 108 ++++--- .../v7/item/theming/css-properties/demo.html | 108 ++++--- .../item/theming/css-shadow-parts/demo.html | 108 ++++--- .../v7/item/theming/input-highlight/demo.html | 84 +++-- static/usage/v7/label/basic/demo.html | 40 ++- .../usage/v7/label/theming/colors/demo.html | 68 ++-- static/usage/v7/list-header/basic/demo.html | 88 +++--- static/usage/v7/list-header/buttons/demo.html | 90 +++--- static/usage/v7/list-header/lines/demo.html | 114 ++++--- .../v7/list-header/theming/colors/demo.html | 108 ++++--- .../theming/css-properties/demo.html | 62 ++-- static/usage/v7/list/basic/demo.html | 82 +++-- static/usage/v7/list/inset/demo.html | 90 +++--- static/usage/v7/list/lines/demo.html | 118 ++++--- static/usage/v7/loading/controller/demo.html | 68 ++-- static/usage/v7/loading/inline/demo.html | 41 ++- static/usage/v7/loading/spinners/demo.html | 40 ++- static/usage/v7/loading/theming/demo.html | 62 ++-- static/usage/v7/menu/basic/demo.html | 70 ++-- static/usage/v7/menu/theming/demo.html | 88 +++--- static/usage/v7/menu/toggle/demo.html | 78 +++-- static/usage/v7/menu/type/demo.html | 135 ++++---- .../v7/modal/can-dismiss/boolean/demo.html | 124 ++++---- .../v7/modal/can-dismiss/function/demo.html | 126 ++++---- .../prevent-swipe-to-close/demo.html | 108 ++++--- static/usage/v7/modal/card/basic/demo.html | 164 +++++----- static/usage/v7/modal/controller/demo.html | 98 +++--- .../usage/v7/modal/custom-dialogs/demo.html | 136 ++++---- .../usage/v7/modal/inline/is-open/demo.html | 84 ++--- .../v7/modal/performance/mount/demo.html | 86 +++-- .../v7/modal/sheet/auto-height/demo.html | 84 +++-- .../modal/sheet/background-content/demo.html | 189 ++++++----- static/usage/v7/modal/sheet/basic/demo.html | 148 +++++---- .../v7/modal/sheet/handle-behavior/demo.html | 68 ++-- .../v7/modal/styling/animations/demo.html | 207 ++++++------ .../usage/v7/nav/modal-navigation/demo.html | 156 +++++---- static/usage/v7/nav/nav-link/demo.html | 67 ++-- static/usage/v7/note/basic/demo.html | 41 ++- static/usage/v7/note/item/demo.html | 64 ++-- static/usage/v7/note/theming/colors/demo.html | 84 +++-- .../v7/note/theming/css-properties/demo.html | 50 ++- static/usage/v7/picker/controller/demo.html | 125 ++++---- .../usage/v7/picker/inline/isOpen/demo.html | 117 +++---- .../usage/v7/picker/inline/trigger/demo.html | 111 +++---- .../usage/v7/picker/multiple-column/demo.html | 162 +++++----- .../customization/positioning/demo.html | 98 +++--- .../v7/popover/customization/sizing/demo.html | 54 ++-- .../popover/customization/styling/demo.html | 76 +++-- static/usage/v7/popover/nested/demo.html | 72 ++--- .../v7/popover/performance/mount/demo.html | 46 ++- .../popover/presenting/controller/demo.html | 106 +++---- .../presenting/inline-isopen/demo.html | 64 ++-- .../presenting/inline-trigger/demo.html | 62 ++-- static/usage/v7/progress-bar/buffer/demo.html | 87 +++-- .../v7/progress-bar/determinate/demo.html | 69 ++-- .../v7/progress-bar/indeterminate/demo.html | 41 ++- .../v7/progress-bar/theming/colors/demo.html | 68 ++-- .../theming/css-properties/demo.html | 62 ++-- .../theming/css-shadow-parts/demo.html | 72 ++--- static/usage/v7/radio/basic/demo.html | 58 ++-- .../usage/v7/radio/empty-selection/demo.html | 48 ++- static/usage/v7/radio/justify/demo.html | 29 +- .../usage/v7/radio/label-placement/demo.html | 60 ++-- .../usage/v7/radio/theming/colors/demo.html | 90 +++--- .../v7/radio/theming/css-properties/demo.html | 90 +++--- .../radio/theming/css-shadow-parts/demo.html | 112 ++++--- static/usage/v7/range/basic/demo.html | 48 ++- static/usage/v7/range/dual-knobs/demo.html | 62 ++-- static/usage/v7/range/labels/demo.html | 70 ++-- static/usage/v7/range/pins/demo.html | 60 ++-- static/usage/v7/range/slots/demo.html | 54 ++-- .../usage/v7/range/snapping-ticks/demo.html | 48 ++- .../v7/range/theming/css-properties/demo.html | 64 ++-- .../range/theming/css-shadow-parts/demo.html | 118 +++---- static/usage/v7/refresher/advanced/demo.html | 152 +++++---- static/usage/v7/refresher/basic/demo.html | 70 ++-- .../v7/refresher/custom-content/demo.html | 78 ++--- .../refresher/custom-scroll-target/demo.html | 106 +++---- .../v7/refresher/pull-properties/demo.html | 70 ++-- static/usage/v7/reorder/basic/demo.html | 132 ++++---- static/usage/v7/reorder/custom-icon/demo.html | 152 ++++----- .../v7/reorder/custom-scroll-target/demo.html | 150 ++++----- .../v7/reorder/toggling-disabled/demo.html | 150 ++++----- .../usage/v7/reorder/updating-data/demo.html | 108 ++++--- static/usage/v7/reorder/wrapper/demo.html | 142 ++++----- static/usage/v7/ripple-effect/basic/demo.html | 154 +++++---- .../v7/ripple-effect/customizing/demo.html | 152 +++++---- static/usage/v7/ripple-effect/type/demo.html | 152 +++++---- static/usage/v7/router/basic/demo.html | 69 ++-- static/usage/v7/searchbar/basic/demo.html | 58 ++-- .../v7/searchbar/cancel-button/demo.html | 62 ++-- .../usage/v7/searchbar/clear-button/demo.html | 56 ++-- static/usage/v7/searchbar/debounce/demo.html | 103 +++--- .../usage/v7/searchbar/search-icon/demo.html | 52 ++- .../v7/searchbar/theming/colors/demo.html | 68 ++-- .../theming/css-properties/demo.html | 90 +++--- .../usage/v7/segment-button/basic/demo.html | 98 +++--- .../usage/v7/segment-button/layout/demo.html | 188 ++++++----- .../theming/css-properties/demo.html | 102 +++--- .../theming/css-shadow-parts/demo.html | 118 ++++--- static/usage/v7/segment/basic/demo.html | 86 +++-- static/usage/v7/segment/scrollable/demo.html | 120 ++++--- .../usage/v7/segment/theming/colors/demo.html | 214 +++++++------ .../segment/theming/css-properties/demo.html | 72 ++--- .../select/basic/multiple-selection/demo.html | 54 ++-- .../basic/responding-to-interaction/demo.html | 114 ++++--- .../select/basic/single-selection/demo.html | 54 ++-- .../customization/button-text/demo.html | 78 +++-- .../customization/interface-options/demo.html | 143 +++++---- .../customization/styling-select/demo.html | 112 ++++--- static/usage/v7/select/fill/demo.html | 72 ++--- .../select/interfaces/action-sheet/demo.html | 54 ++-- .../v7/select/interfaces/popover/demo.html | 54 ++-- static/usage/v7/select/justify/demo.html | 29 +- .../usage/v7/select/label-placement/demo.html | 106 +++---- .../multiple-selection/demo.html | 154 +++++---- .../using-comparewith/demo.html | 136 ++++---- static/usage/v7/select/typeahead/demo.html | 32 +- static/usage/v7/skeleton-text/basic/demo.html | 97 +++--- .../theming/css-properties/demo.html | 106 +++---- static/usage/v7/spinner/basic/demo.html | 130 ++++---- .../usage/v7/spinner/theming/colors/demo.html | 58 ++-- .../spinner/theming/css-properties/demo.html | 50 ++- static/usage/v7/split-pane/basic/demo.html | 70 ++-- .../theming/css-properties/demo.html | 84 +++-- static/usage/v7/tabs/router/demo.html | 225 +++++++------ static/usage/v7/text/basic/demo.html | 108 ++++--- static/usage/v7/textarea/autogrow/demo.html | 67 ++-- static/usage/v7/textarea/basic/demo.html | 68 ++-- .../usage/v7/textarea/clear-on-edit/demo.html | 52 ++- static/usage/v7/textarea/counter/demo.html | 69 ++-- static/usage/v7/textarea/fill/demo.html | 68 ++-- .../usage/v7/textarea/helper-error/demo.html | 111 +++---- .../v7/textarea/label-placement/demo.html | 74 +++-- static/usage/v7/textarea/theming/demo.html | 86 +++-- static/usage/v7/thumbnail/basic/demo.html | 45 ++- static/usage/v7/thumbnail/item/demo.html | 51 ++- .../theming/css-properties/demo.html | 56 ++-- static/usage/v7/title/basic/demo.html | 41 ++- .../collapsible-large-title/basic/demo.html | 97 +++--- .../collapsible-large-title/buttons/demo.html | 103 +++--- .../v7/title/theming/css-properties/demo.html | 116 ++++--- static/usage/v7/toast/buttons/demo.html | 116 +++---- static/usage/v7/toast/icon/demo.html | 50 ++- static/usage/v7/toast/inline/basic/demo.html | 48 ++- .../usage/v7/toast/inline/is-open/demo.html | 58 ++-- static/usage/v7/toast/layout/demo.html | 79 ++--- .../v7/toast/presenting/controller/demo.html | 92 +++--- static/usage/v7/toast/theming/demo.html | 103 +++--- static/usage/v7/toggle/basic/demo.html | 46 ++- static/usage/v7/toggle/justify/demo.html | 68 ++-- .../usage/v7/toggle/label-placement/demo.html | 44 ++- static/usage/v7/toggle/list/demo.html | 59 ++-- static/usage/v7/toggle/on-off/demo.html | 39 ++- .../usage/v7/toggle/theming/colors/demo.html | 55 ++-- .../toggle/theming/css-properties/demo.html | 96 +++--- .../toggle/theming/css-shadow-parts/demo.html | 112 ++++--- static/usage/v7/toolbar/basic/demo.html | 51 ++- static/usage/v7/toolbar/buttons/demo.html | 210 ++++++------ .../usage/v7/toolbar/progress-bars/demo.html | 43 ++- static/usage/v7/toolbar/searchbars/demo.html | 47 ++- static/usage/v7/toolbar/segments/demo.html | 53 ++-- .../usage/v7/toolbar/theming/colors/demo.html | 110 ++++--- .../toolbar/theming/css-properties/demo.html | 76 +++-- 638 files changed, 28080 insertions(+), 29315 deletions(-) diff --git a/static/demos/api/alert/index.html b/static/demos/api/alert/index.html index a96775bd53e..0a00e884647 100644 --- a/static/demos/api/alert/index.html +++ b/static/demos/api/alert/index.html @@ -16,7 +16,8 @@ 5 + + 5 diff --git a/static/demos/api/card/index.html b/static/demos/api/card/index.html index e733820c113..43b11609254 100644 --- a/static/demos/api/card/index.html +++ b/static/demos/api/card/index.html @@ -19,8 +19,8 @@ Card - + + diff --git a/static/demos/api/datetime/index.html b/static/demos/api/datetime/index.html index faf3e78c693..a21b295927a 100644 --- a/static/demos/api/datetime/index.html +++ b/static/demos/api/datetime/index.html @@ -46,8 +46,8 @@ DateTime - - , + , diff --git a/static/demos/api/menu/index.html b/static/demos/api/menu/index.html index 8b85ff3c4c1..029a55e7e2d 100644 --- a/static/demos/api/menu/index.html +++ b/static/demos/api/menu/index.html @@ -55,7 +55,7 @@ - +
@@ -70,7 +70,7 @@
- + + + + - - - - Button - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v6/accordion/basic/demo.html b/static/usage/v6/accordion/basic/demo.html index ae833b5f61d..2c5d87b7409 100644 --- a/static/usage/v6/accordion/basic/demo.html +++ b/static/usage/v6/accordion/basic/demo.html @@ -1,49 +1,41 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html b/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html index 2e78783b984..a56c6df0455 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/demo.html @@ -1,82 +1,74 @@ + + + + Accordion + + + + + + - ion-accordion-group { - width: 100%; - } - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v6/accordion/customization/expansion-styles/demo.html b/static/usage/v6/accordion/customization/expansion-styles/demo.html index f445c54ac11..d4e0c8a1bc1 100644 --- a/static/usage/v6/accordion/customization/expansion-styles/demo.html +++ b/static/usage/v6/accordion/customization/expansion-styles/demo.html @@ -1,49 +1,41 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v6/accordion/customization/icons/demo.html b/static/usage/v6/accordion/customization/icons/demo.html index b4f7385876a..ba238098881 100644 --- a/static/usage/v6/accordion/customization/icons/demo.html +++ b/static/usage/v6/accordion/customization/icons/demo.html @@ -1,49 +1,41 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v6/accordion/customization/theming/demo.html b/static/usage/v6/accordion/customization/theming/demo.html index 9b771545a49..8522ccae537 100644 --- a/static/usage/v6/accordion/customization/theming/demo.html +++ b/static/usage/v6/accordion/customization/theming/demo.html @@ -1,72 +1,64 @@ + + + + Accordion + + + + + + - div[slot="content"] { - background: rgba(var(--ion-color-rose-rgb), 0.25) - } - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v6/accordion/disable-group/demo.html b/static/usage/v6/accordion/disable-group/demo.html index bbe38628365..379104761ba 100644 --- a/static/usage/v6/accordion/disable-group/demo.html +++ b/static/usage/v6/accordion/disable-group/demo.html @@ -1,49 +1,41 @@ + + + + Button + + + + + - - - - Button - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v6/accordion/disable/group/demo.html b/static/usage/v6/accordion/disable/group/demo.html index 357470c9cb2..1bb933671fd 100644 --- a/static/usage/v6/accordion/disable/group/demo.html +++ b/static/usage/v6/accordion/disable/group/demo.html @@ -1,49 +1,41 @@ + + + + Button + + + + + - - - - Button - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v6/accordion/disable/individual/demo.html b/static/usage/v6/accordion/disable/individual/demo.html index 33d7caf6f65..3a37f10ecb2 100644 --- a/static/usage/v6/accordion/disable/individual/demo.html +++ b/static/usage/v6/accordion/disable/individual/demo.html @@ -1,49 +1,41 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion (Disabled) - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion (Disabled) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v6/accordion/listen-changes/demo.html b/static/usage/v6/accordion/listen-changes/demo.html index 986aba59eb6..43a8d41f610 100644 --- a/static/usage/v6/accordion/listen-changes/demo.html +++ b/static/usage/v6/accordion/listen-changes/demo.html @@ -1,73 +1,64 @@ + + + + Accordion + + + + + + - - - - Accordion - - - - - - + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - +

+
+ + -

-

-
- - + - - - \ No newline at end of file + `; + }); + + + diff --git a/static/usage/v6/accordion/multiple/demo.html b/static/usage/v6/accordion/multiple/demo.html index d7dbbfae658..b2eaf11c019 100644 --- a/static/usage/v6/accordion/multiple/demo.html +++ b/static/usage/v6/accordion/multiple/demo.html @@ -1,54 +1,46 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v6/accordion/readonly/group/demo.html b/static/usage/v6/accordion/readonly/group/demo.html index 7b67c1ce83c..612431a7c69 100644 --- a/static/usage/v6/accordion/readonly/group/demo.html +++ b/static/usage/v6/accordion/readonly/group/demo.html @@ -1,49 +1,41 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v6/accordion/readonly/individual/demo.html b/static/usage/v6/accordion/readonly/individual/demo.html index 65b7efbc355..0a892fb87c6 100644 --- a/static/usage/v6/accordion/readonly/individual/demo.html +++ b/static/usage/v6/accordion/readonly/individual/demo.html @@ -1,49 +1,41 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion (Readonly) - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion (Readonly) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v6/accordion/toggle/demo.html b/static/usage/v6/accordion/toggle/demo.html index d230e1e35e0..ea0be18bdd5 100644 --- a/static/usage/v6/accordion/toggle/demo.html +++ b/static/usage/v6/accordion/toggle/demo.html @@ -1,69 +1,61 @@ + + + + Accordion + + + + + + - - - - Accordion - - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - - -
+ + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + - Toggle Second Accordion -
- - +
- - + Toggle Second Accordion +
+ + - \ No newline at end of file + + + diff --git a/static/usage/v6/action-sheet/basic/demo.html b/static/usage/v6/action-sheet/basic/demo.html index b41118e24ab..c3205dc1cd2 100644 --- a/static/usage/v6/action-sheet/basic/demo.html +++ b/static/usage/v6/action-sheet/basic/demo.html @@ -1,70 +1,70 @@ + + + + Action Sheet + + + + - - - - Action Sheet - - - - + + - code { - white-space: pre-wrap; - } - - + + + +
+ Open + +
+ + + - - - \ No newline at end of file + const result = await actionSheet.onDidDismiss(); + action.innerText = JSON.stringify(result, null, 2); + } + + + diff --git a/static/usage/v6/action-sheet/theming/css-properties/demo.html b/static/usage/v6/action-sheet/theming/css-properties/demo.html index 86df5261230..ea98ecc0190 100644 --- a/static/usage/v6/action-sheet/theming/css-properties/demo.html +++ b/static/usage/v6/action-sheet/theming/css-properties/demo.html @@ -1,67 +1,67 @@ + + + + Action Sheet + + + + - - - - Action Sheet - - - - + + - - + + + +
+ Open +
+ + + - - - \ No newline at end of file + document.body.appendChild(actionSheet); + await actionSheet.present(); + } + + + diff --git a/static/usage/v6/action-sheet/theming/styling/demo.html b/static/usage/v6/action-sheet/theming/styling/demo.html index df397d1220f..b828af2269a 100644 --- a/static/usage/v6/action-sheet/theming/styling/demo.html +++ b/static/usage/v6/action-sheet/theming/styling/demo.html @@ -1,84 +1,84 @@ + + + + Action Sheet + + + + - - - - Action Sheet - - - - - - - - - - -
- Open -
- - - - + ion-action-sheet.my-custom-class ion-backdrop { + opacity: 0.6; + } + + + + + + +
+ Open +
+ + + + + diff --git a/static/usage/v6/alert/buttons/demo.html b/static/usage/v6/alert/buttons/demo.html index bd5f4eb4367..40505615a1f 100644 --- a/static/usage/v6/alert/buttons/demo.html +++ b/static/usage/v6/alert/buttons/demo.html @@ -1,64 +1,66 @@ + + + + Alert + + + + - - - - Alert - - - - + + - .container p { - margin-bottom: 0; - } - - + + + +
+ Click Me +

+

+
+ + - - - -
- Click Me -

-

-
- - + - - - \ No newline at end of file + const { role } = await alert.onDidDismiss(); + roleOutput.innerText = `Dismissed with role: ${role}`; + } + + + diff --git a/static/usage/v6/alert/customization/demo.html b/static/usage/v6/alert/customization/demo.html index a17881c7825..f20aad58be3 100644 --- a/static/usage/v6/alert/customization/demo.html +++ b/static/usage/v6/alert/customization/demo.html @@ -1,79 +1,77 @@ + + + + Alert + + + + - - - - Alert - - - - + + - .ios button.alert-button.alert-button-confirm { - border-bottom-right-radius: 13px; - border-top-right-radius: 13px; - } - - + + + +
+ Click Me +
+ + - - - -
- Click Me -
- - + - - - \ No newline at end of file + document.body.appendChild(alert); + await alert.present(); + } + + + diff --git a/static/usage/v6/alert/inputs/radios/demo.html b/static/usage/v6/alert/inputs/radios/demo.html index 5f5ebb0e8b9..0784bf5bd2c 100644 --- a/static/usage/v6/alert/inputs/radios/demo.html +++ b/static/usage/v6/alert/inputs/radios/demo.html @@ -1,52 +1,50 @@ + + + + Alert + + + + + - - - - Alert - - - - - + + + +
+ Click Me +
+ + - - - -
- Click Me -
- - + - - - \ No newline at end of file + document.body.appendChild(alert); + await alert.present(); + } + + + diff --git a/static/usage/v6/alert/inputs/text-inputs/demo.html b/static/usage/v6/alert/inputs/text-inputs/demo.html index d2badb8c851..f0165590628 100644 --- a/static/usage/v6/alert/inputs/text-inputs/demo.html +++ b/static/usage/v6/alert/inputs/text-inputs/demo.html @@ -1,56 +1,54 @@ + + + + Alert + + + + + - - - - Alert - - - - - + + + +
+ Click Me +
+ + - - - -
- Click Me -
- - + - - - \ No newline at end of file + document.body.appendChild(alert); + await alert.present(); + } + + + diff --git a/static/usage/v6/alert/presenting/controller/demo.html b/static/usage/v6/alert/presenting/controller/demo.html index fed8c84f369..8925c588135 100644 --- a/static/usage/v6/alert/presenting/controller/demo.html +++ b/static/usage/v6/alert/presenting/controller/demo.html @@ -1,37 +1,35 @@ + + + + Alert + + + + + - - - - Alert - - - - - + + + +
+ Click Me +
+ + - - - -
- Click Me -
- - + - - - \ No newline at end of file + document.body.appendChild(alert); + await alert.present(); + } + + + diff --git a/static/usage/v6/avatar/basic/demo.html b/static/usage/v6/avatar/basic/demo.html index 46fbedfd2d3..5d92af4860e 100644 --- a/static/usage/v6/avatar/basic/demo.html +++ b/static/usage/v6/avatar/basic/demo.html @@ -1,27 +1,24 @@ + + + + Avatar + + + + + - - - - Avatar - - - - - - - - - - -
- - Silhouette of a person's head - -
- - - - - \ No newline at end of file + + + +
+ + Silhouette of a person's head + +
+ + + + diff --git a/static/usage/v6/avatar/chip/demo.html b/static/usage/v6/avatar/chip/demo.html index d06475bb40f..dbe0858522d 100644 --- a/static/usage/v6/avatar/chip/demo.html +++ b/static/usage/v6/avatar/chip/demo.html @@ -1,30 +1,27 @@ + + + + Avatar + + + + + - - - - Avatar - - - - - - - - - - -
- - - Silhouette of a person's head - - Chip Avatar - -
- - - - - \ No newline at end of file + + + +
+ + + Silhouette of a person's head + + Chip Avatar + +
+ + + + diff --git a/static/usage/v6/avatar/item/demo.html b/static/usage/v6/avatar/item/demo.html index d51279cdb34..97c53124109 100644 --- a/static/usage/v6/avatar/item/demo.html +++ b/static/usage/v6/avatar/item/demo.html @@ -1,30 +1,27 @@ + + + + Avatar + + + + + - - - - Avatar - - - - - - - - - - -
- - - Silhouette of a person's head - - Item Avatar - -
- - - - - \ No newline at end of file + + + +
+ + + Silhouette of a person's head + + Item Avatar + +
+ + + + diff --git a/static/usage/v6/avatar/theming/css-properties/demo.html b/static/usage/v6/avatar/theming/css-properties/demo.html index 3419617edfa..7ba32840e17 100644 --- a/static/usage/v6/avatar/theming/css-properties/demo.html +++ b/static/usage/v6/avatar/theming/css-properties/demo.html @@ -1,32 +1,30 @@ + + + + Avatar + + + + - - - - Avatar - - - - + + - - - - - - -
- - Silhouette of a person's head - -
- - - - - \ No newline at end of file + + + +
+ + Silhouette of a person's head + +
+ + + + diff --git a/static/usage/v6/back-button/basic/demo.html b/static/usage/v6/back-button/basic/demo.html index 0ae16403ab7..14bd424cda6 100644 --- a/static/usage/v6/back-button/basic/demo.html +++ b/static/usage/v6/back-button/basic/demo.html @@ -1,26 +1,24 @@ + + + + Back Button + + + + + - - - - Back Button - - - - + + + + - - - - - - - - - + customElements.define('page-one', PageOne); + customElements.define('page-two', PageTwo); + + diff --git a/static/usage/v6/back-button/custom/demo.html b/static/usage/v6/back-button/custom/demo.html index 6ffc58dc997..0864a9b61cf 100644 --- a/static/usage/v6/back-button/custom/demo.html +++ b/static/usage/v6/back-button/custom/demo.html @@ -1,26 +1,24 @@ + + + + Back Button + + + + + - - - - Back Button - - - - + + + + - - - - - - - - - + customElements.define('page-one', PageOne); + customElements.define('page-two', PageTwo); + + diff --git a/static/usage/v6/backdrop/basic/demo.html b/static/usage/v6/backdrop/basic/demo.html index ed5a79768e8..55d867c270d 100644 --- a/static/usage/v6/backdrop/basic/demo.html +++ b/static/usage/v6/backdrop/basic/demo.html @@ -1,35 +1,32 @@ + + + + Backdrop + + + + + - - - - Backdrop - - - - - - - - - - -
- - - Backdrop - - - - - - Checkbox - - Button - -
- - - - \ No newline at end of file + + + +
+ + + Backdrop + + + + + + Checkbox + + Button + +
+ + + diff --git a/static/usage/v6/backdrop/styling/demo.html b/static/usage/v6/backdrop/styling/demo.html index 8b28987c937..94382996c65 100644 --- a/static/usage/v6/backdrop/styling/demo.html +++ b/static/usage/v6/backdrop/styling/demo.html @@ -1,57 +1,57 @@ + + + + Backdrop + + + + + + - #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; - } - - - - - - -
- - - 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 -
- - - - \ No newline at end of file + + + +
+ + + 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/v6/badge/basic/demo.html b/static/usage/v6/badge/basic/demo.html index a560f74b87b..e8559f30a57 100644 --- a/static/usage/v6/badge/basic/demo.html +++ b/static/usage/v6/badge/basic/demo.html @@ -1,39 +1,37 @@ + + + + Badge + + + + - - - - Badge - - - - + + - - - - - - -
- - - 11 - Badge in start slot - - - 22 - Badge in end slot - - -
- - - - - \ No newline at end of file + + + +
+ + + 11 + Badge in start slot + + + 22 + Badge in end slot + + +
+ + + + diff --git a/static/usage/v6/badge/theming/colors/demo.html b/static/usage/v6/badge/theming/colors/demo.html index a81103de32b..1655a17e1cc 100644 --- a/static/usage/v6/badge/theming/colors/demo.html +++ b/static/usage/v6/badge/theming/colors/demo.html @@ -1,55 +1,53 @@ + + + + Badge + + + + - - - - Badge - - - - + + - - - - - - -
- - - Followers - 22k - - - Likes - 118k - - - Stars - 34k - - - Completed - 80 - - - Warnings - 70 - - - Notifications - 1000 - - -
- - - - - \ No newline at end of file + + + +
+ + + Followers + 22k + + + Likes + 118k + + + Stars + 34k + + + Completed + 80 + + + Warnings + 70 + + + Notifications + 1000 + + +
+ + + + diff --git a/static/usage/v6/badge/theming/css-properties/demo.html b/static/usage/v6/badge/theming/css-properties/demo.html index f942c2d83e6..1c73cc0dd6f 100644 --- a/static/usage/v6/badge/theming/css-properties/demo.html +++ b/static/usage/v6/badge/theming/css-properties/demo.html @@ -1,42 +1,40 @@ + + + + Select - Styling the Select + + + + - - - - Select - Styling the Select - - - - + + - ion-badge { - --background: purple; - --color: white; - --padding-end: 20px; - --padding-start: 20px; - } - - - - - - -
- - - Badges styled - 1 - - -
- - - - - \ No newline at end of file + + + +
+ + + Badges styled + 1 + + +
+ + + + diff --git a/static/usage/v6/breadcrumbs/basic/demo.html b/static/usage/v6/breadcrumbs/basic/demo.html index f230752bad0..094919df3eb 100644 --- a/static/usage/v6/breadcrumbs/basic/demo.html +++ b/static/usage/v6/breadcrumbs/basic/demo.html @@ -1,29 +1,27 @@ + + + + Breadcrumbs + + + + + - - - - Breadcrumbs - - - - - - - - - -
- - Home - Electronics - Cameras - Film - -
- - - - - \ No newline at end of file + + + +
+ + Home + Electronics + Cameras + Film + +
+ + + + diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/demo.html b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/demo.html index a6977cb29bf..f2311a089cd 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/demo.html +++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/demo.html @@ -1,39 +1,37 @@ + + + + Popover + + + + + - - - - Popover - - - - - + + + +
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +
+ + - - - -
- - Home - Electronics - Photography - Cameras - Film - 35 mm - -
- - + - - - \ No newline at end of file + breadcrumbs.addEventListener('ionCollapsedClick', () => { + breadcrumbs.maxItems = undefined; + }); + + + diff --git a/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/demo.html b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/demo.html index 96d8ae72cd0..9576e922566 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/demo.html +++ b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/demo.html @@ -1,68 +1,66 @@ + + + + Breadcrumbs + + + + - - - - Breadcrumbs - - - - + + - - + + + +
+
Before Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + - - - -
-
Before Collapse = 2
- - Home - Electronics - Photography - Cameras - Film - 35 mm - +
Before Collapse = 0
+ + 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 + -
After Collapse = 2
- - Home - Electronics - Photography - Cameras - Film - 35 mm - - -
Before Collapse = 2, After Collapse = 2
- - Home - Electronics - Photography - Cameras - Film - 35 mm - -
- - - - - \ No newline at end of file +
Before Collapse = 2, After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +
+ + + + diff --git a/static/usage/v6/breadcrumbs/collapsing-items/max-items/demo.html b/static/usage/v6/breadcrumbs/collapsing-items/max-items/demo.html index 6b2ac36c51c..56a530bcbe9 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/max-items/demo.html +++ b/static/usage/v6/breadcrumbs/collapsing-items/max-items/demo.html @@ -1,31 +1,29 @@ + + + + Breadcrumbs + + + + + - - - - Breadcrumbs - - - - - - - - - -
- - Home - Electronics - Photography - Cameras - Film - 35 mm - -
- - - - - \ No newline at end of file + + + +
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +
+ + + + diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/demo.html b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/demo.html index fdeba83b336..75575d96290 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/demo.html +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/demo.html @@ -1,62 +1,60 @@ + + + + Popover + + + + + - - - - Popover - - - - - + + + +
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + + + + + +
+ + - - - -
- - Home - Electronics - Photography - Cameras - Film - 35 mm - - - - - - -
- - + - + popoverList.innerHTML = listHTML; + popover.event = e; + popover.isOpen = true; + }); - \ No newline at end of file + popover.addEventListener('didDismiss', () => (popover.isOpen = false)); + + + diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/demo.html b/static/usage/v6/breadcrumbs/icons/custom-separators/demo.html index a6db3ad12c6..46d87ec12b3 100644 --- a/static/usage/v6/breadcrumbs/icons/custom-separators/demo.html +++ b/static/usage/v6/breadcrumbs/icons/custom-separators/demo.html @@ -1,41 +1,39 @@ + + + + Breadcrumbs + + + + + - - - - Breadcrumbs - - - - - - - - - -
- - - Home - - - - Electronics - - - - Cameras - - - - Film - - - -
- - - - - \ No newline at end of file + + + +
+ + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +
+ + + + diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/demo.html b/static/usage/v6/breadcrumbs/icons/icons-on-items/demo.html index 1a1a9adbe3f..1a09b306b2c 100644 --- a/static/usage/v6/breadcrumbs/icons/icons-on-items/demo.html +++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/demo.html @@ -1,68 +1,66 @@ + + + + Breadcrumbs + + + + - - - - Breadcrumbs - - - - + + - - + + + +
+ Icons at Start + + + + Home + + + + Electronics + + + + Cameras + + + + Film + + - - - -
- Icons at Start - - - - Home - - - - Electronics - - - - Cameras - - - - Film - - - - Icons at End - - - Home - - - - Electronics - - - - Cameras - - - - Film - - - -
- - - - - \ No newline at end of file + Icons at End + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +
+ + + + diff --git a/static/usage/v6/breadcrumbs/theming/colors/demo.html b/static/usage/v6/breadcrumbs/theming/colors/demo.html index 3746b4ad79d..e4bbf3ea91b 100644 --- a/static/usage/v6/breadcrumbs/theming/colors/demo.html +++ b/static/usage/v6/breadcrumbs/theming/colors/demo.html @@ -1,29 +1,27 @@ + + + + Breadcrumbs + + + + + - - - - Breadcrumbs - - - - - - - - - -
- - Home - Electronics - Cameras - Film - -
- - - - - \ No newline at end of file + + + +
+ + Home + Electronics + Cameras + Film + +
+ + + + diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/demo.html b/static/usage/v6/breadcrumbs/theming/css-properties/demo.html index 9c888d5344d..57bd5606728 100644 --- a/static/usage/v6/breadcrumbs/theming/css-properties/demo.html +++ b/static/usage/v6/breadcrumbs/theming/css-properties/demo.html @@ -1,37 +1,35 @@ + + + + Breadcrumbs + + + + - - - - Breadcrumbs - - - - + + - - - - - - -
- - Home - Electronics - Cameras - Film - -
- - - - - \ No newline at end of file + + + +
+ + Home + Electronics + Cameras + Film + +
+ + + + diff --git a/static/usage/v6/button/basic/demo.html b/static/usage/v6/button/basic/demo.html index 2302dbff2ba..a64c9f521ca 100644 --- a/static/usage/v6/button/basic/demo.html +++ b/static/usage/v6/button/basic/demo.html @@ -1,26 +1,23 @@ + + + + Button + + + + + - - - - Button - - - - - - - - - - -
- Default - Disabled -
- - - - - \ No newline at end of file + + + +
+ Default + Disabled +
+ + + + diff --git a/static/usage/v6/button/expand/demo.html b/static/usage/v6/button/expand/demo.html index 90421eefaf3..af5a86d6f4c 100644 --- a/static/usage/v6/button/expand/demo.html +++ b/static/usage/v6/button/expand/demo.html @@ -1,32 +1,30 @@ + + + + Button + + + + - - - - Button - - - - + + - - - - - - -
- Block - Full -
- - - - - \ No newline at end of file + + + +
+ Block + Full +
+ + + + diff --git a/static/usage/v6/button/fill/demo.html b/static/usage/v6/button/fill/demo.html index 6e405f68b24..abfcdad88e5 100644 --- a/static/usage/v6/button/fill/demo.html +++ b/static/usage/v6/button/fill/demo.html @@ -1,28 +1,25 @@ + + + + Button + + + + + - - - - Button - - - - - - - - - - -
- Default - Clear - Outline - Solid -
- - - - - \ No newline at end of file + + + +
+ Default + Clear + Outline + Solid +
+ + + + diff --git a/static/usage/v6/button/icons/demo.html b/static/usage/v6/button/icons/demo.html index e3594ca1f83..dfc1f985e6b 100644 --- a/static/usage/v6/button/icons/demo.html +++ b/static/usage/v6/button/icons/demo.html @@ -1,37 +1,34 @@ + + + + Button + + + + + - - - - Button - - - - + + + +
+ + + Left Icon + - + + Right Icon + + - - - -
- - - Left Icon - - - - Right Icon - - - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + diff --git a/static/usage/v6/button/shape/demo.html b/static/usage/v6/button/shape/demo.html index 7cedc61e4c7..b6572e48999 100644 --- a/static/usage/v6/button/shape/demo.html +++ b/static/usage/v6/button/shape/demo.html @@ -1,26 +1,23 @@ + + + + Button + + + + + - - - - Button - - - - - - - - - - -
- Default - Round -
- - - - - \ No newline at end of file + + + +
+ Default + Round +
+ + + + diff --git a/static/usage/v6/button/size/demo.html b/static/usage/v6/button/size/demo.html index 4aba9947d6e..9e83d5c9688 100644 --- a/static/usage/v6/button/size/demo.html +++ b/static/usage/v6/button/size/demo.html @@ -1,27 +1,24 @@ + + + + Button + + + + + - - - - Button - - - - - - - - - - -
- Small - Default - Large -
- - - - - \ No newline at end of file + + + +
+ Small + Default + Large +
+ + + + diff --git a/static/usage/v6/button/theming/colors/demo.html b/static/usage/v6/button/theming/colors/demo.html index 9be8d6d0f8b..0103ba17270 100644 --- a/static/usage/v6/button/theming/colors/demo.html +++ b/static/usage/v6/button/theming/colors/demo.html @@ -1,41 +1,39 @@ + + + + Button + + + + - - - - Button - - - - + + - - - - - - -
- Default - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark -
- - - - - \ No newline at end of file + + + +
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+ + + + diff --git a/static/usage/v6/button/theming/css-properties/demo.html b/static/usage/v6/button/theming/css-properties/demo.html index 9fd0e65c096..f6a05ed4551 100644 --- a/static/usage/v6/button/theming/css-properties/demo.html +++ b/static/usage/v6/button/theming/css-properties/demo.html @@ -1,47 +1,45 @@ - - - - - Button - - - - - - - - - - - -
- Custom Button -
- - - - - \ No newline at end of file + + + + Button + + + + + + + + + + + +
+ Custom Button +
+ + + + diff --git a/static/usage/v6/buttons/basic/demo.html b/static/usage/v6/buttons/basic/demo.html index f74d9eb0eca..d47e801f460 100644 --- a/static/usage/v6/buttons/basic/demo.html +++ b/static/usage/v6/buttons/basic/demo.html @@ -1,29 +1,27 @@ + + + + Buttons + + + + + - - - - Buttons - - - - - - - - - -
- - - Button - - Default Buttons - -
- - - - - \ No newline at end of file + + + +
+ + + Button + + Default Buttons + +
+ + + + diff --git a/static/usage/v6/buttons/placement/demo.html b/static/usage/v6/buttons/placement/demo.html index 2c51099331c..5b7c095a876 100644 --- a/static/usage/v6/buttons/placement/demo.html +++ b/static/usage/v6/buttons/placement/demo.html @@ -1,49 +1,47 @@ + + + + Buttons + + + + - - - - Buttons - - - - + + - - + + + +
+ + + Start + + Buttons + + End + + - - - -
- - - Start - - Buttons - - End - - - - - - Secondary - - Buttons - - Primary - - -
- - - - - \ No newline at end of file + + + Secondary + + Buttons + + Primary + + +
+ + + + diff --git a/static/usage/v6/buttons/types/demo.html b/static/usage/v6/buttons/types/demo.html index 46288e45f1a..784f0be9401 100644 --- a/static/usage/v6/buttons/types/demo.html +++ b/static/usage/v6/buttons/types/demo.html @@ -1,106 +1,100 @@ + + + + Buttons + + + + - - - - Buttons - - - - + + - - + + + +
+ + + Favorite + + Default Buttons + + Delete + + - - - -
- - - - Favorite - - - Default Buttons - - - Delete - - - + + + + + + + + + + + + + + + Icon Buttons + - - - - - - - - - - - - - - - Icon Buttons - + + + + + Contact + + + + + Help + + + + Solid Buttons + - - - - - Contact - - - - - Help - - - - Solid Buttons - + + + + + Star + + + + + Edit + + + + Outline Buttons + - - - - - Star - - - - - Edit - - - - Outline Buttons - + + + + + Back Button + - - - - - Back Button - - - - - - - Menu Button - -
- - - - - \ No newline at end of file + + + + + Menu Button + +
+ + + + diff --git a/static/usage/v6/card/basic/demo.html b/static/usage/v6/card/basic/demo.html index e6464c335a9..706cdda5230 100644 --- a/static/usage/v6/card/basic/demo.html +++ b/static/usage/v6/card/basic/demo.html @@ -1,46 +1,44 @@ + + + + Card + + + + - - - - Card - - - - + + - /* iOS places the subtitle above the title */ - ion-card-header.ios { - display: flex; - flex-flow: column-reverse; - } - - + + + +
+ + + Card Title + Card Subtitle + - - - -
- - - Card Title - Card Subtitle - - - - Here's a small text description for the card content. Nothing more, nothing less. - - -
- - - - - \ No newline at end of file + + Here's a small text description for the card content. Nothing more, nothing less. + + +
+ + + + diff --git a/static/usage/v6/card/buttons/demo.html b/static/usage/v6/card/buttons/demo.html index 012bbc31321..ef10f826c16 100644 --- a/static/usage/v6/card/buttons/demo.html +++ b/static/usage/v6/card/buttons/demo.html @@ -1,49 +1,47 @@ + + + + Card + + + + - - - - Card - - - - + + - /* iOS places the subtitle above the title */ - ion-card-header.ios { - display: flex; - flex-flow: column-reverse; - } - - + + + +
+ + + Card Title + Card Subtitle + - - - -
- - - Card Title - Card Subtitle - + + Here's a small text description for the card content. Nothing more, nothing less. + - - Here's a small text description for the card content. Nothing more, nothing less. - - - Action 1 - Action 2 - -
- - - - - \ No newline at end of file + Action 1 + Action 2 + +
+ + + + diff --git a/static/usage/v6/card/list/demo.html b/static/usage/v6/card/list/demo.html index 123db8876cf..6fd6ffa6ca2 100644 --- a/static/usage/v6/card/list/demo.html +++ b/static/usage/v6/card/list/demo.html @@ -1,81 +1,79 @@ + + + + Card + + + + - - - - Card - - - - + + - /* iOS places the subtitle above the title */ - ion-card-header.ios { - display: flex; - flex-flow: column-reverse; - } - - + + + +
+ + + Card Title + Card Subtitle + + + + + + Silhouette of mountains + + Item + - - - -
- - - Card Title - Card Subtitle - - - - - - Silhouette of mountains - - Item - + + + Silhouette of mountains + + Item + - - - Silhouette of mountains - - Item - + + + Silhouette of mountains + + Item + - - - Silhouette of mountains - - Item - - - - - Silhouette of mountains - - Item - - - - -
- - - - - \ No newline at end of file + + + Silhouette of mountains + + Item + + + + +
+ + + + diff --git a/static/usage/v6/card/media/demo.html b/static/usage/v6/card/media/demo.html index edc1a4b75a1..7de1ee7b507 100644 --- a/static/usage/v6/card/media/demo.html +++ b/static/usage/v6/card/media/demo.html @@ -1,47 +1,45 @@ + + + + Card + + + + - - - - Card - - - - + + - /* iOS places the subtitle above the title */ - ion-card-header.ios { - display: flex; - flex-flow: column-reverse; - } - - + + + +
+ + Silhouette of mountains + + Card Title + Card Subtitle + - - - -
- - Silhouette of mountains - - Card Title - Card Subtitle - - - - Here's a small text description for the card content. Nothing more, nothing less. - - -
- - - - - \ No newline at end of file + + Here's a small text description for the card content. Nothing more, nothing less. + + +
+ + + + diff --git a/static/usage/v6/card/theming/colors/demo.html b/static/usage/v6/card/theming/colors/demo.html index c0e5f88d827..faca172d938 100644 --- a/static/usage/v6/card/theming/colors/demo.html +++ b/static/usage/v6/card/theming/colors/demo.html @@ -1,137 +1,117 @@ - - - - - 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 - - -
- - - - - \ No newline at end of file + + + + 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/v6/card/theming/css-properties/demo.html b/static/usage/v6/card/theming/css-properties/demo.html index dc131842db3..9f3e707118e 100644 --- a/static/usage/v6/card/theming/css-properties/demo.html +++ b/static/usage/v6/card/theming/css-properties/demo.html @@ -1,59 +1,57 @@ - - - - - Card - - - - - - - - - - - -
- - - Card Title - Card Subtitle - - - - Here's a small text description for the card content. Nothing more, nothing less. - - -
- - - - - \ No newline at end of file + + + + Card + + + + + + + + + + + +
+ + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +
+ + + + diff --git a/static/usage/v6/checkbox/basic/demo.html b/static/usage/v6/checkbox/basic/demo.html index 2df0497c4fe..b24833c06c8 100644 --- a/static/usage/v6/checkbox/basic/demo.html +++ b/static/usage/v6/checkbox/basic/demo.html @@ -1,27 +1,25 @@ + + + + Checkbox + + + + + - - - - Checkbox - - - - - - - - - -
- - - I agree to the terms and conditions - -
- - - - - \ No newline at end of file + + + +
+ + + I agree to the terms and conditions + +
+ + + + diff --git a/static/usage/v6/checkbox/indeterminate/demo.html b/static/usage/v6/checkbox/indeterminate/demo.html index 4e726022577..44a8923c852 100644 --- a/static/usage/v6/checkbox/indeterminate/demo.html +++ b/static/usage/v6/checkbox/indeterminate/demo.html @@ -1,27 +1,25 @@ + + + + Checkbox + + + + + - - - - Checkbox - - - - - - - - - -
- - - Indeterminate checkbox - -
- - - - - \ No newline at end of file + + + +
+ + + Indeterminate checkbox + +
+ + + + diff --git a/static/usage/v6/checkbox/theming/css-properties/demo.html b/static/usage/v6/checkbox/theming/css-properties/demo.html index b75f12c0655..83f3ef39712 100644 --- a/static/usage/v6/checkbox/theming/css-properties/demo.html +++ b/static/usage/v6/checkbox/theming/css-properties/demo.html @@ -1,38 +1,36 @@ + + + + Checkbox + + + + + + - ion-checkbox::part(container) { - border-radius: 6px; - border: 2px solid #6815ec; - } - - - - - - -
- - - Themed checkbox - -
- - - - - \ No newline at end of file + + + +
+ + + Themed checkbox + +
+ + + + diff --git a/static/usage/v6/chip/basic/demo.html b/static/usage/v6/chip/basic/demo.html index df4c6569a13..7e8901caaa7 100644 --- a/static/usage/v6/chip/basic/demo.html +++ b/static/usage/v6/chip/basic/demo.html @@ -1,27 +1,24 @@ + + + + Chip + + + + + - - - - Chip - - - - - - - - - - -
- Default - Disabled - Outline -
- - - - - \ No newline at end of file + + + +
+ Default + Disabled + Outline +
+ + + + diff --git a/static/usage/v6/chip/slots/demo.html b/static/usage/v6/chip/slots/demo.html index bbf70b2e82f..5ba5790d641 100644 --- a/static/usage/v6/chip/slots/demo.html +++ b/static/usage/v6/chip/slots/demo.html @@ -1,37 +1,34 @@ + + + + Chip + + + + + - - - - Chip - - - - + + + +
+ + + Silhouette of a person's head + + Avatar Chip + + - - - - - -
- - - Silhouette of a person's head - - Avatar Chip - - - - - - Icon Chip - - -
- - - - - \ No newline at end of file + + + Icon Chip + + +
+ + + + diff --git a/static/usage/v6/chip/theming/colors/demo.html b/static/usage/v6/chip/theming/colors/demo.html index ecdbe97a047..97bb1de26d5 100644 --- a/static/usage/v6/chip/theming/colors/demo.html +++ b/static/usage/v6/chip/theming/colors/demo.html @@ -1,45 +1,43 @@ + + + + Chip + + + + - - - - Chip - - - - + + - - - - - - -
-
- Default - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark + + + +
+
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
-
- - - - - \ No newline at end of file + + + + diff --git a/static/usage/v6/chip/theming/css-properties/demo.html b/static/usage/v6/chip/theming/css-properties/demo.html index b0621dace2d..326aa3304de 100644 --- a/static/usage/v6/chip/theming/css-properties/demo.html +++ b/static/usage/v6/chip/theming/css-properties/demo.html @@ -1,32 +1,29 @@ + + + + Chip + + + + - - - - Chip - - - - + + - - - - - - - -
- Default -
- - - - - \ No newline at end of file + + + +
+ Default +
+ + + + diff --git a/static/usage/v6/content/basic/demo.html b/static/usage/v6/content/basic/demo.html index 14dbe3f5e7d..13640925b9d 100644 --- a/static/usage/v6/content/basic/demo.html +++ b/static/usage/v6/content/basic/demo.html @@ -1,29 +1,27 @@ + + + + Content + + + + + - - - - Content - - - - - + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
- - - -

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.

- - - - - \ No newline at end of file +

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

+ + + + diff --git a/static/usage/v6/content/fixed/demo.html b/static/usage/v6/content/fixed/demo.html index 9ea56f755e2..67aee23feaf 100644 --- a/static/usage/v6/content/fixed/demo.html +++ b/static/usage/v6/content/fixed/demo.html @@ -1,68 +1,76 @@ + + + + Content + + + + - - - - Content - - - - + + - - + + + +

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

- - - -

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

+ Normal Button + Fixed Button - 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.

- - - - - \ No newline at end of file +

+ 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/v6/content/fullscreen/demo.html b/static/usage/v6/content/fullscreen/demo.html index 9bf752950d5..f5dbd171da8 100644 --- a/static/usage/v6/content/fullscreen/demo.html +++ b/static/usage/v6/content/fullscreen/demo.html @@ -1,78 +1,82 @@ + + + + Content + + + + - - - - Content - - - - + + - - + + + + + Header + + + +

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

- - - - - - 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 - - - - - - - \ No newline at end of file +

+ 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/v6/content/header-footer/demo.html b/static/usage/v6/content/header-footer/demo.html index 0a39f7a5fa8..2f9b9e8a864 100644 --- a/static/usage/v6/content/header-footer/demo.html +++ b/static/usage/v6/content/header-footer/demo.html @@ -1,43 +1,37 @@ + + + + Content + + + + + - - - - Content - - - - - + + + + + Header + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
- - - - - - 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 - - - - - - - \ No newline at end of file +

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

+ + + + Footer + + + + + diff --git a/static/usage/v6/content/scroll-events/demo.html b/static/usage/v6/content/scroll-events/demo.html index 1db71ff8972..d00095bb2d4 100644 --- a/static/usage/v6/content/scroll-events/demo.html +++ b/static/usage/v6/content/scroll-events/demo.html @@ -1,69 +1,77 @@ + + + + Content + + + + + - - - - Content - - - - - + + + +

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

- - - -

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. +

+ + -

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.

- - + - - - \ No newline at end of file + content.addEventListener('ionScrollStart', () => console.log('scroll start')); + content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail)); + content.addEventListener('ionScrollEnd', () => console.log('scroll end')); + + + diff --git a/static/usage/v6/content/scroll-methods/demo.html b/static/usage/v6/content/scroll-methods/demo.html index c72c5300ff5..a1ae0d0da91 100644 --- a/static/usage/v6/content/scroll-methods/demo.html +++ b/static/usage/v6/content/scroll-methods/demo.html @@ -1,78 +1,86 @@ + + + + Content + + + + + - - - - Content - - - - - + + + +

Click on the buttons to scroll the content.

- - - -

Click on the buttons to scroll the content.

+ Scroll to Bottom - 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. +

-

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 + + - Scroll to Top - - + - - - \ No newline at end of file + function scrollToTop() { + // Passing a duration to the method makes it so the scroll slowly + // goes to the top instead of instantly + content.scrollToTop(500); + } + + + diff --git a/static/usage/v6/content/theming/colors/demo.html b/static/usage/v6/content/theming/colors/demo.html index 7e9409ec13e..12a49a59fca 100644 --- a/static/usage/v6/content/theming/colors/demo.html +++ b/static/usage/v6/content/theming/colors/demo.html @@ -1,69 +1,67 @@ + + + + Content + + + + - - - - Content - - - - + + - ion-content { - flex: 1 1 33%; - height: 250px; - } - - - - - -
- -

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.

- -
- - - - \ No newline at end of file + + +
+ +

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/v6/content/theming/css-properties/demo.html b/static/usage/v6/content/theming/css-properties/demo.html index aeab8bee49b..b1e69c6d3f0 100644 --- a/static/usage/v6/content/theming/css-properties/demo.html +++ b/static/usage/v6/content/theming/css-properties/demo.html @@ -1,36 +1,34 @@ + + + + Content + + + + - - - - Content - - - - + + - - + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
- - - -

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.

- - - - - \ No newline at end of file +

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

+ + + + diff --git a/static/usage/v6/content/theming/css-shadow-parts/demo.html b/static/usage/v6/content/theming/css-shadow-parts/demo.html index 9b15b01757d..b0f6e9fd909 100644 --- a/static/usage/v6/content/theming/css-shadow-parts/demo.html +++ b/static/usage/v6/content/theming/css-shadow-parts/demo.html @@ -1,39 +1,37 @@ + + + + Content + + + + - - - - Content - - - - + + - ion-content::part(scroll) { - color: #fff; - } - - + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
- - - -

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.

- - - - - \ No newline at end of file +

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

+ + + + diff --git a/static/usage/v6/datetime-button/basic/demo.html b/static/usage/v6/datetime-button/basic/demo.html index 73f3f9b1ab7..2a5722cc437 100644 --- a/static/usage/v6/datetime-button/basic/demo.html +++ b/static/usage/v6/datetime-button/basic/demo.html @@ -1,33 +1,31 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - + + + +
+ - - - -
- - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + diff --git a/static/usage/v6/datetime/basic/demo.html b/static/usage/v6/datetime/basic/demo.html index bcd958a1058..180320e07b1 100644 --- a/static/usage/v6/datetime/basic/demo.html +++ b/static/usage/v6/datetime/basic/demo.html @@ -1,33 +1,31 @@ + + + + Datetime + + + + + + - .container { - align-items: flex-start; - } - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/buttons/customizing-button-texts/demo.html b/static/usage/v6/datetime/buttons/customizing-button-texts/demo.html index 44074047aca..3e600107060 100644 --- a/static/usage/v6/datetime/buttons/customizing-button-texts/demo.html +++ b/static/usage/v6/datetime/buttons/customizing-button-texts/demo.html @@ -1,30 +1,28 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/buttons/customizing-buttons/demo.html b/static/usage/v6/datetime/buttons/customizing-buttons/demo.html index d0ce780da3d..4c54697a8db 100644 --- a/static/usage/v6/datetime/buttons/customizing-buttons/demo.html +++ b/static/usage/v6/datetime/buttons/customizing-buttons/demo.html @@ -1,40 +1,38 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - + + + +
+ + + Reset + Never mind + All Set + + +
+ + - - - -
- - - Reset - Never mind - All Set - - -
- - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html index 54b26b53f90..8816ed76dfc 100644 --- a/static/usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html +++ b/static/usage/v6/datetime/buttons/showing-confirmation-buttons/demo.html @@ -1,30 +1,28 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/date-constraints/advanced/demo.html b/static/usage/v6/datetime/date-constraints/advanced/demo.html index b7650f3740d..66626d946ce 100644 --- a/static/usage/v6/datetime/date-constraints/advanced/demo.html +++ b/static/usage/v6/datetime/date-constraints/advanced/demo.html @@ -1,43 +1,41 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - + + + +
+ +
+ + - - - -
- -
- - + - - - \ No newline at end of file + /** + * Date will be enabled if it is not + * Sunday or Saturday + */ + return utcDay !== 0 && utcDay !== 6; + }; + + + diff --git a/static/usage/v6/datetime/date-constraints/max-min/demo.html b/static/usage/v6/datetime/date-constraints/max-min/demo.html index b1f9e57810d..a2a30cef0c3 100644 --- a/static/usage/v6/datetime/date-constraints/max-min/demo.html +++ b/static/usage/v6/datetime/date-constraints/max-min/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/date-constraints/values/demo.html b/static/usage/v6/datetime/date-constraints/values/demo.html index ba560da4969..5c551153b99 100644 --- a/static/usage/v6/datetime/date-constraints/values/demo.html +++ b/static/usage/v6/datetime/date-constraints/values/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/highlightedDates/array/demo.html b/static/usage/v6/datetime/highlightedDates/array/demo.html index d8faeba5b8b..ee40688e121 100644 --- a/static/usage/v6/datetime/highlightedDates/array/demo.html +++ b/static/usage/v6/datetime/highlightedDates/array/demo.html @@ -1,55 +1,59 @@ - - - - - Datetime - - - - - - - - - - -
- -
- - - - + + + + + + + + +
+ +
+ + - \ No newline at end of file + + + diff --git a/static/usage/v6/datetime/highlightedDates/callback/demo.html b/static/usage/v6/datetime/highlightedDates/callback/demo.html index 50c62e09c5f..b9528578167 100644 --- a/static/usage/v6/datetime/highlightedDates/callback/demo.html +++ b/static/usage/v6/datetime/highlightedDates/callback/demo.html @@ -1,53 +1,57 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - + + + +
+ +
+ + - - + if (utcDay % 3 === 0) { + return { + textColor: 'var(--ion-color-secondary-contrast)', + backgroundColor: 'var(--ion-color-secondary)', + }; + } - \ No newline at end of file + return undefined; + }; + + + diff --git a/static/usage/v6/datetime/localization/custom-locale/demo.html b/static/usage/v6/datetime/localization/custom-locale/demo.html index 70e266f3402..80b07292725 100644 --- a/static/usage/v6/datetime/localization/custom-locale/demo.html +++ b/static/usage/v6/datetime/localization/custom-locale/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/localization/first-day-of-week/demo.html b/static/usage/v6/datetime/localization/first-day-of-week/demo.html index ce555ed4b74..1cd91488d6c 100644 --- a/static/usage/v6/datetime/localization/first-day-of-week/demo.html +++ b/static/usage/v6/datetime/localization/first-day-of-week/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/localization/hour-cycle/demo.html b/static/usage/v6/datetime/localization/hour-cycle/demo.html index db65b072c82..16b05daf24e 100644 --- a/static/usage/v6/datetime/localization/hour-cycle/demo.html +++ b/static/usage/v6/datetime/localization/hour-cycle/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/localization/locale-extension-tags/demo.html b/static/usage/v6/datetime/localization/locale-extension-tags/demo.html index 6d7328eddf6..2b5bfc90535 100644 --- a/static/usage/v6/datetime/localization/locale-extension-tags/demo.html +++ b/static/usage/v6/datetime/localization/locale-extension-tags/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/localization/time-label/demo.html b/static/usage/v6/datetime/localization/time-label/demo.html index 8ad93461f78..0088962b7b1 100644 --- a/static/usage/v6/datetime/localization/time-label/demo.html +++ b/static/usage/v6/datetime/localization/time-label/demo.html @@ -1,31 +1,29 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- - Tiempo - -
- - - - - \ No newline at end of file + + + +
+ + Tiempo + +
+ + + + diff --git a/static/usage/v6/datetime/multiple/demo.html b/static/usage/v6/datetime/multiple/demo.html index 43edb188016..e63a3f28d22 100644 --- a/static/usage/v6/datetime/multiple/demo.html +++ b/static/usage/v6/datetime/multiple/demo.html @@ -1,34 +1,32 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - + + + +
+ +
+ + - - - -
- -
- - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v6/datetime/presentation/date/demo.html b/static/usage/v6/datetime/presentation/date/demo.html index ca76bcec306..912ea84b01a 100644 --- a/static/usage/v6/datetime/presentation/date/demo.html +++ b/static/usage/v6/datetime/presentation/date/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/presentation/month-and-year/demo.html b/static/usage/v6/datetime/presentation/month-and-year/demo.html index 58fa960c863..77b0a7d3b54 100644 --- a/static/usage/v6/datetime/presentation/month-and-year/demo.html +++ b/static/usage/v6/datetime/presentation/month-and-year/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/presentation/time/demo.html b/static/usage/v6/datetime/presentation/time/demo.html index 7ea21d3f4d5..a8413b6fde8 100644 --- a/static/usage/v6/datetime/presentation/time/demo.html +++ b/static/usage/v6/datetime/presentation/time/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/presentation/wheel/demo.html b/static/usage/v6/datetime/presentation/wheel/demo.html index 5b2028d4a6b..dd37eccbbd2 100644 --- a/static/usage/v6/datetime/presentation/wheel/demo.html +++ b/static/usage/v6/datetime/presentation/wheel/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/theming/demo.html b/static/usage/v6/datetime/theming/demo.html index e50a5576c63..872c50f1659 100644 --- a/static/usage/v6/datetime/theming/demo.html +++ b/static/usage/v6/datetime/theming/demo.html @@ -1,78 +1,76 @@ + + + + Datetime + + + + + + - border-radius: 16px; - box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; - } - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/datetime/title/customizing-title/demo.html b/static/usage/v6/datetime/title/customizing-title/demo.html index ab7ead5aca6..fad01ac953d 100644 --- a/static/usage/v6/datetime/title/customizing-title/demo.html +++ b/static/usage/v6/datetime/title/customizing-title/demo.html @@ -1,31 +1,29 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- - Select a Reservation Date - -
- - - - - \ No newline at end of file + + + +
+ + Select a Reservation Date + +
+ + + + diff --git a/static/usage/v6/datetime/title/showing-default-title/demo.html b/static/usage/v6/datetime/title/showing-default-title/demo.html index 3d725f9eb92..7feec34a0ff 100644 --- a/static/usage/v6/datetime/title/showing-default-title/demo.html +++ b/static/usage/v6/datetime/title/showing-default-title/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/fab/basic/demo.html b/static/usage/v6/fab/basic/demo.html index bf3ddf18220..8ce2cca42ed 100644 --- a/static/usage/v6/fab/basic/demo.html +++ b/static/usage/v6/fab/basic/demo.html @@ -1,29 +1,26 @@ + + + + Fab + + + + + - - - - Fab - - - - - - - - - - -
- - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v6/fab/button-sizing/demo.html b/static/usage/v6/fab/button-sizing/demo.html index e3595399219..afa6580839f 100644 --- a/static/usage/v6/fab/button-sizing/demo.html +++ b/static/usage/v6/fab/button-sizing/demo.html @@ -1,40 +1,37 @@ + + + + Fab + + + + + - - - - Fab - - - - - - - - - - -
- - - - - - - - - - + + + +
+ + + - - - - - -
- - - - - \ No newline at end of file + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v6/fab/list-side/demo.html b/static/usage/v6/fab/list-side/demo.html index 2b24622135a..8418e06d55e 100644 --- a/static/usage/v6/fab/list-side/demo.html +++ b/static/usage/v6/fab/list-side/demo.html @@ -1,55 +1,52 @@ + + + + Fab + + + + + - - - - Fab - - - - - - - - - - -
- - - - - - - - - - + + + +
+ - + - - - - - - - - - - - - - - - - - - -
- - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v6/fab/positioning/demo.html b/static/usage/v6/fab/positioning/demo.html index bb00b1cfdc4..b2d599be436 100644 --- a/static/usage/v6/fab/positioning/demo.html +++ b/static/usage/v6/fab/positioning/demo.html @@ -1,77 +1,74 @@ + + + + Fab + + + + + - - - - Fab - - - - - - - - - - - - Fab Buttons - - - - - - - - - - - + + + + + Fab Buttons + + + + - + - - - - - + + + + + + + + + + + + - - - - - - - - + - + - - - - - + + + + + + + + + + + + - - - - - - - - + - + - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + diff --git a/static/usage/v6/fab/theming/colors/demo.html b/static/usage/v6/fab/theming/colors/demo.html index 7f1b059484c..eaa7d470781 100644 --- a/static/usage/v6/fab/theming/colors/demo.html +++ b/static/usage/v6/fab/theming/colors/demo.html @@ -1,55 +1,52 @@ + + + + Fab + + + + + - - - - Fab - - - - - - - - - - -
- - - - - - - - - - - - - - - + + + +
+ + + - - - - - - - - - - - - - - - -
- - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v6/fab/theming/css-custom-properties/demo.html b/static/usage/v6/fab/theming/css-custom-properties/demo.html index 90b398450b3..d18012d652e 100644 --- a/static/usage/v6/fab/theming/css-custom-properties/demo.html +++ b/static/usage/v6/fab/theming/css-custom-properties/demo.html @@ -1,50 +1,48 @@ + + + + Fab + + + + - - - - Fab - - - - + + - - - - - - -
- - - - - - - - + + + +
+ - + - - - - - -
- - - - - \ No newline at end of file + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v6/fab/theming/css-shadow-parts/demo.html b/static/usage/v6/fab/theming/css-shadow-parts/demo.html index 40c416ab32c..86695bb5aed 100644 --- a/static/usage/v6/fab/theming/css-shadow-parts/demo.html +++ b/static/usage/v6/fab/theming/css-shadow-parts/demo.html @@ -1,56 +1,54 @@ + + + + Fab + + + + - - - - Fab - - - - + + - ion-fab-button::part(native):active::after { - background-color: #87d361; - } - - - - - - -
- - - - - - - - + + + +
+ - + - - - - - -
- - - - - \ No newline at end of file + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v6/footer/basic/demo.html b/static/usage/v6/footer/basic/demo.html index 205a6543d4b..890648bbd25 100644 --- a/static/usage/v6/footer/basic/demo.html +++ b/static/usage/v6/footer/basic/demo.html @@ -1,28 +1,25 @@ + + + + Footer + + + + + - - - - Footer - - - - - - - - - - -

Content

- - - - Footer - - - - - - \ No newline at end of file + + + +

Content

+ + + + Footer + + + + + diff --git a/static/usage/v6/footer/custom-scroll-target/demo.html b/static/usage/v6/footer/custom-scroll-target/demo.html index f9349b02086..e81480fe8ec 100644 --- a/static/usage/v6/footer/custom-scroll-target/demo.html +++ b/static/usage/v6/footer/custom-scroll-target/demo.html @@ -1,78 +1,98 @@ + + + + Footer + + + + - - - - Footer - - - - + + - height: 100%; - width: 100%; - overflow-y: auto; - } - - + + + +
+

Animal Facts

- - - -
-

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. +

-

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. +

-

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. +

-

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. +

-

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 - - - - - - \ No newline at end of file +

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/v6/footer/fade/demo.html b/static/usage/v6/footer/fade/demo.html index 75ed07ea1bf..77b3c499000 100644 --- a/static/usage/v6/footer/fade/demo.html +++ b/static/usage/v6/footer/fade/demo.html @@ -1,65 +1,82 @@ + + + + Footer + + + + + - - - - 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. +

- - - -

Animal Facts

+

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. +

-

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.

+

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. +

-

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.

+

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. +

-

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 - - - - - - \ No newline at end of file +

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/v6/footer/no-border/demo.html b/static/usage/v6/footer/no-border/demo.html index 8050b2a7bcd..bf9d1f0a479 100644 --- a/static/usage/v6/footer/no-border/demo.html +++ b/static/usage/v6/footer/no-border/demo.html @@ -1,28 +1,25 @@ + + + + Footer + + + + + - - - - Footer - - - - - - - - - - -

Content

- - - - Footer - - - - - - \ No newline at end of file + + + +

Content

+ + + + Footer + + + + + diff --git a/static/usage/v6/footer/translucent/demo.html b/static/usage/v6/footer/translucent/demo.html index b04fd24bddc..4446e1b3c68 100644 --- a/static/usage/v6/footer/translucent/demo.html +++ b/static/usage/v6/footer/translucent/demo.html @@ -1,65 +1,82 @@ + + + + Footer + + + + + - - - - 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. +

- - - -

Animal Facts

+

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. +

-

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.

+

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. +

-

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.

+

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. +

-

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 - - - - - - \ No newline at end of file +

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/v6/grid/basic/demo.html b/static/usage/v6/grid/basic/demo.html index 36ef496f817..06a2c76df7b 100644 --- a/static/usage/v6/grid/basic/demo.html +++ b/static/usage/v6/grid/basic/demo.html @@ -1,77 +1,75 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ + + 1 + 2 + 3 + + - - - -
- - - 1 - 2 - 3 - - + + + 1 + 2 + 3 + 4 + 5 + 6 + + - - - 1 - 2 - 3 - 4 - 5 - 6 - - - - - - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - - -
- - - - - \ No newline at end of file + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + + +
+ + + + diff --git a/static/usage/v6/grid/customizing/column-number/demo.html b/static/usage/v6/grid/customizing/column-number/demo.html index ee0550437e5..a60cffd72e0 100644 --- a/static/usage/v6/grid/customizing/column-number/demo.html +++ b/static/usage/v6/grid/customizing/column-number/demo.html @@ -1,53 +1,51 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - - - - - -
- Total number of columns is set to 6, column size is set to 1 - - - 1 - 2 - 3 - 4 - - -
- - - - - \ No newline at end of file + + + +
+ Total number of columns is set to 6, column size is set to 1 + + + 1 + 2 + 3 + 4 + + +
+ + + + diff --git a/static/usage/v6/grid/customizing/padding/demo.html b/static/usage/v6/grid/customizing/padding/demo.html index 38dae06af73..380c8899f23 100644 --- a/static/usage/v6/grid/customizing/padding/demo.html +++ b/static/usage/v6/grid/customizing/padding/demo.html @@ -1,65 +1,63 @@ - - - - - Grid - - - - - - - - - - - -
- - - 1 - 2 - 3 - - -
- - - - - \ No newline at end of file + + + + Grid + + + + + + + + + + + +
+ + + 1 + 2 + 3 + + +
+ + + + diff --git a/static/usage/v6/grid/customizing/width/demo.html b/static/usage/v6/grid/customizing/width/demo.html index 09527dca430..1032ff7bc91 100644 --- a/static/usage/v6/grid/customizing/width/demo.html +++ b/static/usage/v6/grid/customizing/width/demo.html @@ -1,56 +1,54 @@ - - - - - Grid - - - - - - - - - - - -
- - - 1 - 2 - 3 - - -
- - - - - \ No newline at end of file + + + + Grid + + + + + + + + + + + +
+ + + 1 + 2 + 3 + + +
+ + + + diff --git a/static/usage/v6/grid/fixed/demo.html b/static/usage/v6/grid/fixed/demo.html index 9dcc3781d7c..67c19e8b5d8 100644 --- a/static/usage/v6/grid/fixed/demo.html +++ b/static/usage/v6/grid/fixed/demo.html @@ -1,48 +1,46 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - - - - - -
- - - 1 - 2 - 3 - - -
- - - - - \ No newline at end of file + + + +
+ + + 1 + 2 + 3 + + +
+ + + + diff --git a/static/usage/v6/grid/offset-responsive/demo.html b/static/usage/v6/grid/offset-responsive/demo.html index 07c5cdca37b..b6484411722 100644 --- a/static/usage/v6/grid/offset-responsive/demo.html +++ b/static/usage/v6/grid/offset-responsive/demo.html @@ -1,70 +1,68 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ No offset for xs breakpoint, offset 1st column for sm and up + + + 1 + 2 + 3 + 4 + 5 + + - - - -
- 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 + + - 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 - - -
- - - - - \ No newline at end of file + 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/v6/grid/offset/demo.html b/static/usage/v6/grid/offset/demo.html index 876e4f9acf1..2c8009fa7da 100644 --- a/static/usage/v6/grid/offset/demo.html +++ b/static/usage/v6/grid/offset/demo.html @@ -1,69 +1,67 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ Column 2 has offset set to "3" + + + 1 + 2 + 3 + + - - - -
- Column 2 has offset set to "3" - - - 1 - 2 - 3 - - + Column 5 has offset set to "2" + + + 1 + 2 + 3 + 4 + 5 + + - Column 5 has offset set to "2" - - - 1 - 2 - 3 - 4 - 5 - - - - Column 1 has offset set to "4" - - - 1 - 2 - - -
- - - - - \ No newline at end of file + Column 1 has offset set to "4" + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v6/grid/push-pull-responsive/demo.html b/static/usage/v6/grid/push-pull-responsive/demo.html index aa956b2c1b0..e2e46ed72b2 100644 --- a/static/usage/v6/grid/push-pull-responsive/demo.html +++ b/static/usage/v6/grid/push-pull-responsive/demo.html @@ -1,71 +1,69 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ No change for xs breakpoint, push 1st column & pull 2nd column for sm and up + + + 1 + 2 + + - - - -
- 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 + + - 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 - - -
- - - - - \ No newline at end of file + 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/v6/grid/push-pull/demo.html b/static/usage/v6/grid/push-pull/demo.html index b34be1bb39d..06108080241 100644 --- a/static/usage/v6/grid/push-pull/demo.html +++ b/static/usage/v6/grid/push-pull/demo.html @@ -1,73 +1,77 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ Column 1 has push set to "4" and column 2 has pull set to + "4" + + + 1 + 2 + 3 + + - - - -
- 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 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 - - -
- - - - - \ No newline at end of file + Column 1 has push set to "3" and column 2 has pull set to + "9" + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v6/grid/size-auto/demo.html b/static/usage/v6/grid/size-auto/demo.html index 364d5db3c9a..a41856605d5 100644 --- a/static/usage/v6/grid/size-auto/demo.html +++ b/static/usage/v6/grid/size-auto/demo.html @@ -1,78 +1,76 @@ + + + + Grid + + + + - - - - Grid - - - - + + - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - } - - + + + +
+ Column 1 has size set to "auto" + + + 1 + 2 + 3 + + - - - -
- 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 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
- - - -
- - - - - \ No newline at end of file + Column 2 has size set to "auto" and a defined width + + + 1 + +
2
+ + + +
+ + + + diff --git a/static/usage/v6/grid/size-responsive/demo.html b/static/usage/v6/grid/size-responsive/demo.html index 9176b7070a6..0f5eb97b2a2 100644 --- a/static/usage/v6/grid/size-responsive/demo.html +++ b/static/usage/v6/grid/size-responsive/demo.html @@ -1,72 +1,70 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ Stacked for xs breakpoint, equal width for sm and up + + + 1 + 2 + 3 + 4 + + - - - -
- 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 + + - 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 - - -
- - - - - \ No newline at end of file + 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/v6/grid/size/demo.html b/static/usage/v6/grid/size/demo.html index 4d16f74065e..751c844725c 100644 --- a/static/usage/v6/grid/size/demo.html +++ b/static/usage/v6/grid/size/demo.html @@ -1,70 +1,68 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ Column 2 has size set to "8" + + + 1 + 2 + 3 + + - - - -
- 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 3 & 4 have size set to "3" - - - 1 - 2 - 3 - 4 - 5 - 6 - - - - Columns 1 & 2 have size set to "4" - - - 1 - 2 - - -
- - - - - \ No newline at end of file + Columns 1 & 2 have size set to "4" + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v6/header/basic/demo.html b/static/usage/v6/header/basic/demo.html index a6752caddb9..d060a4bef8f 100644 --- a/static/usage/v6/header/basic/demo.html +++ b/static/usage/v6/header/basic/demo.html @@ -1,28 +1,25 @@ + + + + Header + + + + + - - - - Header - - - - - - - - - - - - Header - - - -

Content

- - - - - \ No newline at end of file + + + + + Header + + + +

Content

+ + + + diff --git a/static/usage/v6/header/condense/demo.html b/static/usage/v6/header/condense/demo.html index caed21b4dcd..6319cffd904 100644 --- a/static/usage/v6/header/condense/demo.html +++ b/static/usage/v6/header/condense/demo.html @@ -1,73 +1,92 @@ + + + + Header + + + + + - - - - Header - - - - - - - - - - - - Header - - - - + + + - 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.

+
+

Animal Facts

-

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.

+

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. +

-

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.

+

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. +

-

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.

+

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. +

-

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.

-
- - - +

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. +

- \ No newline at end of file +

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/v6/header/custom-scroll-target/demo.html b/static/usage/v6/header/custom-scroll-target/demo.html index 337bd2ece48..0ab86141dcf 100644 --- a/static/usage/v6/header/custom-scroll-target/demo.html +++ b/static/usage/v6/header/custom-scroll-target/demo.html @@ -1,78 +1,98 @@ + + + + Header + + + + - - - - Header - - - - + + - height: 100%; - width: 100%; - overflow-y: auto; - } - - + + + + + Header + + + +
+

Animal Facts

- - - - - 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. +

-

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. +

-

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. +

-

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. +

-

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.

-
- - - - - \ No newline at end of file +

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/v6/header/fade/demo.html b/static/usage/v6/header/fade/demo.html index 06b24cc2eb4..9f955b15f86 100644 --- a/static/usage/v6/header/fade/demo.html +++ b/static/usage/v6/header/fade/demo.html @@ -1,65 +1,82 @@ + + + + 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. +

- - - - - Header - - - -

Animal Facts

+

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. +

-

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.

+

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. +

-

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.

+

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. +

-

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.

- - - - - \ No newline at end of file +

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/v6/header/no-border/demo.html b/static/usage/v6/header/no-border/demo.html index 9e8356fe253..48283da6657 100644 --- a/static/usage/v6/header/no-border/demo.html +++ b/static/usage/v6/header/no-border/demo.html @@ -1,28 +1,25 @@ + + + + Header + + + + + - - - - Header - - - - - - - - - - - - Header - - - -

Content

- - - - - \ No newline at end of file + + + + + Header + + + +

Content

+ + + + diff --git a/static/usage/v6/header/translucent/demo.html b/static/usage/v6/header/translucent/demo.html index bea9d3ecba1..1993a5ee100 100644 --- a/static/usage/v6/header/translucent/demo.html +++ b/static/usage/v6/header/translucent/demo.html @@ -1,65 +1,82 @@ + + + + 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. +

- - - - - Header - - - -

Animal Facts

+

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. +

-

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.

+

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. +

-

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.

+

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. +

-

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.

- - - - - \ No newline at end of file +

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/v6/icon/basic/demo.html b/static/usage/v6/icon/basic/demo.html index f2284770ab9..43596c28068 100644 --- a/static/usage/v6/icon/basic/demo.html +++ b/static/usage/v6/icon/basic/demo.html @@ -1,28 +1,25 @@ + + + + Icon + + + + + - - - - Icon - - - - - - - - - - -
- - - - -
- - - - - \ No newline at end of file + + + +
+ + + + +
+ + + + diff --git a/static/usage/v6/img/basic/demo.html b/static/usage/v6/img/basic/demo.html index 8b292725825..b6544e6d832 100644 --- a/static/usage/v6/img/basic/demo.html +++ b/static/usage/v6/img/basic/demo.html @@ -1,31 +1,31 @@ + + + + Image + + + + - - - - Image - - - - - - - - - - - -
- -
- - - + + + + + +
+ +
+ + + diff --git a/static/usage/v6/infinite-scroll/basic/demo.html b/static/usage/v6/infinite-scroll/basic/demo.html index ea12f54b686..2c20f6ecf0e 100644 --- a/static/usage/v6/infinite-scroll/basic/demo.html +++ b/static/usage/v6/infinite-scroll/basic/demo.html @@ -1,63 +1,60 @@ - - - - - Infinite Scroll - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - \ No newline at end of file + generateItems(); + + + diff --git a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html index b56e952cfe7..4b062494764 100644 --- a/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html +++ b/static/usage/v6/infinite-scroll/custom-infinite-scroll-content/demo.html @@ -1,82 +1,117 @@ + + + + Infinite Scroll + + + + + - + .infinite-scroll-content { + text-align: center; + padding: 20px 0; + } + + - - - - - -
- - - - - - - - - -
- - - - - - \ No newline at end of file + generateItems(); + + + diff --git a/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html index 46016207432..82734aa87af 100644 --- a/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html +++ b/static/usage/v6/infinite-scroll/infinite-scroll-content/demo.html @@ -1,56 +1,53 @@ - - - - - Infinite Scroll - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - \ No newline at end of file + generateItems(); + + + diff --git a/static/usage/v6/input/basic/demo.html b/static/usage/v6/input/basic/demo.html index 264bbaa75e6..6a963b5d9f1 100644 --- a/static/usage/v6/input/basic/demo.html +++ b/static/usage/v6/input/basic/demo.html @@ -1,55 +1,53 @@ - - - - - Input - - - - - - - - - - - -
- - - Default input - - - - - Input with placeholder - - - - - Input with value - - - - - Readonly input - - - - - Disabled input - - - -
- - - - - \ No newline at end of file + + + + Input + + + + + + + + + + + +
+ + + Default input + + + + + Input with placeholder + + + + + Input with value + + + + + Readonly input + + + + + Disabled input + + + +
+ + + + diff --git a/static/usage/v6/input/clear/demo.html b/static/usage/v6/input/clear/demo.html index e46c310a3a4..17a1f680668 100644 --- a/static/usage/v6/input/clear/demo.html +++ b/static/usage/v6/input/clear/demo.html @@ -1,48 +1,46 @@ + + + + Input + + + + - - - - Input - - - - + + - - + + + +
+ + + Input with clear button + + + - - - -
- - - Input with clear button - - - + + Input with clear on edit + + + - - Input with clear on edit - - - - - - Password input - - - - -
- - - - - \ No newline at end of file + + Password input + + + + +
+ + + + diff --git a/static/usage/v6/input/fill/demo.html b/static/usage/v6/input/fill/demo.html index a7afe6c8d13..e56efdfe97b 100644 --- a/static/usage/v6/input/fill/demo.html +++ b/static/usage/v6/input/fill/demo.html @@ -1,44 +1,42 @@ + + + + Input + + + + - - - - Input - - - - + + - - + + + +
+ + Default input + + - - - -
- - Default input - - + + Solid input + + - - Solid input - - - - - Outline input - - -
- - - - - \ No newline at end of file + + Outline input + + +
+ + + + diff --git a/static/usage/v6/input/filtering/demo.html b/static/usage/v6/input/filtering/demo.html index ae4cb5381f9..899657dddcc 100644 --- a/static/usage/v6/input/filtering/demo.html +++ b/static/usage/v6/input/filtering/demo.html @@ -1,39 +1,37 @@ + + + + Input + + + + + - - - - Input - - - - - + + + +
+ + + Alphanumeric Characters + + + +
+ + - - - -
- - - Alphanumeric Characters - - - -
- - - - - + + diff --git a/static/usage/v6/input/labels/demo.html b/static/usage/v6/input/labels/demo.html index ea089a533e8..5f3c13209fd 100644 --- a/static/usage/v6/input/labels/demo.html +++ b/static/usage/v6/input/labels/demo.html @@ -1,50 +1,48 @@ + + + + Input + + + + - - - - Input - - - - + + - - + + + +
+ + + Default label + + - - - -
- - - Default label - - + + Fixed label + + - - Fixed label - - + + Stacked label + + - - Stacked label - - - - - Floating label - - - -
- - - - - \ No newline at end of file + + Floating label + + + +
+ + + + diff --git a/static/usage/v6/input/theming/colors/demo.html b/static/usage/v6/input/theming/colors/demo.html index c0c93908ac6..e3549da53d7 100644 --- a/static/usage/v6/input/theming/colors/demo.html +++ b/static/usage/v6/input/theming/colors/demo.html @@ -1,44 +1,42 @@ + + + + Input + + + + - - - - Input - - - - + + - .container ion-input { - flex: 1 1 33%; - } - - - - - - -
- - - - - - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + + + + + +
+ + + + diff --git a/static/usage/v6/input/theming/css-properties/demo.html b/static/usage/v6/input/theming/css-properties/demo.html index 4414ead7bf6..432e25dfdd5 100644 --- a/static/usage/v6/input/theming/css-properties/demo.html +++ b/static/usage/v6/input/theming/css-properties/demo.html @@ -1,43 +1,41 @@ + + + + Input + + + + - - - - Input - - - - + + - --padding-bottom: 10px; - --padding-end: 10px; - --padding-start: 10px; - --padding-top: 10px; - } - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/input/types/demo.html b/static/usage/v6/input/types/demo.html index 5955051f78f..11cda792b5d 100644 --- a/static/usage/v6/input/types/demo.html +++ b/static/usage/v6/input/types/demo.html @@ -1,55 +1,53 @@ - - - - - Input - - - - - - - - - - - -
- - - Text input - - - - - Number input - - - - - Password input - - - - - Email input - - - - - Telephone input - - - -
- - - - - \ No newline at end of file + + + + Input + + + + + + + + + + + +
+ + + Text input + + + + + Number input + + + + + Password input + + + + + Email input + + + + + Telephone input + + + +
+ + + + diff --git a/static/usage/v6/item-divider/basic/demo.html b/static/usage/v6/item-divider/basic/demo.html index d99c52d65af..fd6dce5d010 100644 --- a/static/usage/v6/item-divider/basic/demo.html +++ b/static/usage/v6/item-divider/basic/demo.html @@ -1,66 +1,60 @@ + + + + Item Divider + + + + - - - - Item Divider - - - - + + - - + + + +
+ + + + Section A + - - - -
- - - - - Section A - - + + A1 + + + A2 + + + A3 + + - - A1 - - - A2 - - - A3 - - + + + Section B + - - - - Section B - - - - - B1 - - - B2 - - - B3 - - - -
- - - - - \ No newline at end of file + + B1 + + + B2 + + + B3 + + + +
+ + + + diff --git a/static/usage/v6/item-divider/theming/colors/demo.html b/static/usage/v6/item-divider/theming/colors/demo.html index 354ab9096e8..0f88e6a8e46 100644 --- a/static/usage/v6/item-divider/theming/colors/demo.html +++ b/static/usage/v6/item-divider/theming/colors/demo.html @@ -1,59 +1,57 @@ + + + + Item Divider + + + + - - - - Item Divider - - - - + + - - - - - - -
- - Default - - - Primary - - - Secondary - - - Tertiary - - - Success - - - Warning - - - Danger - - - Light - - - Medium - - - Dark - -
- - - - - \ No newline at end of file + + + +
+ + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +
+ + + + diff --git a/static/usage/v6/item-divider/theming/css-properties/demo.html b/static/usage/v6/item-divider/theming/css-properties/demo.html index 9223767446d..df0c09642ff 100644 --- a/static/usage/v6/item-divider/theming/css-properties/demo.html +++ b/static/usage/v6/item-divider/theming/css-properties/demo.html @@ -1,40 +1,36 @@ + + + + Item Divider + + + + - - - - Item Divider - - - - + + - --padding-top: 10px; - --padding-bottom: 10px; - --padding-start: 20px; - --padding-end: 20px; - } - - - - - - -
- - - Item Divider - - -
- - - - - \ No newline at end of file + + + +
+ + Item Divider + +
+ + + + diff --git a/static/usage/v6/item-group/basic/demo.html b/static/usage/v6/item-group/basic/demo.html index eaf062c371d..bddb3655228 100644 --- a/static/usage/v6/item-group/basic/demo.html +++ b/static/usage/v6/item-group/basic/demo.html @@ -1,60 +1,58 @@ + + + + Item Group + + + + - - - - Item Group - - - - + + - - + + + +
+ + + A + - - - -
- - - A - + + Angola + + + Argentina + + + Armenia + + - - Angola - - - Argentina - - - Armenia - - + + + B + - - - B - - - - Bangladesh - - - Belarus - - - Belgium - - -
- - - - - \ No newline at end of file + + Bangladesh + + + Belarus + + + Belgium + + +
+ + + + diff --git a/static/usage/v6/item-group/sliding-items/demo.html b/static/usage/v6/item-group/sliding-items/demo.html index 87c87870df4..6ac967fb051 100644 --- a/static/usage/v6/item-group/sliding-items/demo.html +++ b/static/usage/v6/item-group/sliding-items/demo.html @@ -1,122 +1,92 @@ + + + + Item Group + + + + - - - - Item Group - - - - + + - - + + + +
+ + + Fruits + - - - -
- - - - Fruits - - + + + Grapes + + + Favorite + + - - - - Grapes - - - - - Favorite - - - + + + Apples + + + Favorite + + - - - - Apples - - - - - Favorite - - - + + + Bananas + + + Favorite + + + - - - - Bananas - - - - - Favorite - - - - + + + Vegetables + - - - - Vegetables - - + + + Carrots + + + Favorite + + - - - - Carrots - - - - - Favorite - - - + + + Broccoli + + + Favorite + + - - - - Broccoli - - - - - Favorite - - - - - - - - Celery - - - - - Favorite - - - - -
- - - - - \ No newline at end of file + + + Celery + + + Favorite + + + +
+ + + + diff --git a/static/usage/v6/item-sliding/basic/demo.html b/static/usage/v6/item-sliding/basic/demo.html index 00e4bc82f99..a7bb911b9c8 100644 --- a/static/usage/v6/item-sliding/basic/demo.html +++ b/static/usage/v6/item-sliding/basic/demo.html @@ -1,66 +1,64 @@ + + + + Item Sliding + + + + - - - - Item Sliding - - - - + + - - + + + +
+ + + + Sliding Item with End Options + - - - -
- - - - Sliding Item with End Options - + + Favorite + Delete + + - - Favorite - Delete - - + + + Archive + - - - Archive - + + Sliding Item with Start Options + + - - Sliding Item with Start Options - - + + + Archive + - - - Archive - + + Sliding Item with Options on Both Sides + - - Sliding Item with Options on Both Sides - - - - Favorite - Delete - - - -
- - - - - \ No newline at end of file + + Favorite + Delete + + + +
+ + + + diff --git a/static/usage/v6/item-sliding/expandable/demo.html b/static/usage/v6/item-sliding/expandable/demo.html index bfdb1ef5884..a48559243bc 100644 --- a/static/usage/v6/item-sliding/expandable/demo.html +++ b/static/usage/v6/item-sliding/expandable/demo.html @@ -1,45 +1,43 @@ + + + + Item Sliding + + + + - - - - Item Sliding - - - - + + - - + + + +
+ + + + Archive + - - - -
- - - - Archive - + + Sliding Item with Expandable Options + - - Sliding Item with Expandable Options - - - - Favorite - Delete - - - -
- - - - - \ No newline at end of file + + Favorite + Delete + + + +
+ + + + diff --git a/static/usage/v6/item-sliding/icons/demo.html b/static/usage/v6/item-sliding/icons/demo.html index 6bc01e42837..5e1171456fd 100644 --- a/static/usage/v6/item-sliding/icons/demo.html +++ b/static/usage/v6/item-sliding/icons/demo.html @@ -1,156 +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 - - - - -
- - - - - \ No newline at end of file + + + + 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/v6/item/basic/demo.html b/static/usage/v6/item/basic/demo.html index 55e5fe17a30..b7cb114e8ca 100644 --- a/static/usage/v6/item/basic/demo.html +++ b/static/usage/v6/item/basic/demo.html @@ -1,69 +1,65 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + Basic 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 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. + + - - - 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

+ + - - -

H1 Heading

-

Paragraph

- - + + +

H2 Heading

+

Paragraph

+ + - - -

H2 Heading

-

Paragraph

- - - - - -

H3 Heading

-

Paragraph

- - -
- - - - - \ No newline at end of file + + +

H3 Heading

+

Paragraph

+ + +
+ + + + diff --git a/static/usage/v6/item/buttons/demo.html b/static/usage/v6/item/buttons/demo.html index 08847fb4fff..adbc05b5a2e 100644 --- a/static/usage/v6/item/buttons/demo.html +++ b/static/usage/v6/item/buttons/demo.html @@ -1,74 +1,62 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + Start + Default Buttons + End + - - - -
- - - Start - - Default Buttons - - End - - + + + Start + + + Buttons with Icons + + + End + + - - - Start - - - Buttons with Icons - - - End - - + + + + + Icon only Buttons + + + + - - - - - Icon only Buttons - - - - - - - Button Sizes - - Small - - - Default - - - Large - - -
- - - - - \ No newline at end of file + + Button Sizes + Small + Default + Large + +
+ + + + diff --git a/static/usage/v6/item/clickable/demo.html b/static/usage/v6/item/clickable/demo.html index 189cbffbd35..16b5c4d312c 100644 --- a/static/usage/v6/item/clickable/demo.html +++ b/static/usage/v6/item/clickable/demo.html @@ -1,44 +1,42 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + Anchor Item + - - - -
- - Anchor Item - + + Disabled Anchor Item + - - Disabled Anchor Item - + + Button Item + - - Button Item - - - - Disabled Button Item - -
- - - - - \ No newline at end of file + + Disabled Button Item + +
+ + + + diff --git a/static/usage/v6/item/counter/demo.html b/static/usage/v6/item/counter/demo.html index cb68d350bc2..46dcb8e542e 100644 --- a/static/usage/v6/item/counter/demo.html +++ b/static/usage/v6/item/counter/demo.html @@ -1,47 +1,45 @@ + + + + Item + + + + - - - - Item - - - - + + - ion-item { - width: 100%; - } - - + + + +
+ + Default Counter + + - - - -
- - Default Counter - - + + Custom Counter Format + + +
+ + + - - Custom Counter Format - - -
- - - - - - - \ No newline at end of file + + diff --git a/static/usage/v6/item/detail-arrows/demo.html b/static/usage/v6/item/detail-arrows/demo.html index 1cc1c907045..85c79083d9f 100644 --- a/static/usage/v6/item/detail-arrows/demo.html +++ b/static/usage/v6/item/detail-arrows/demo.html @@ -1,64 +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

- - -
- - - - - \ No newline at end of file + + + + 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/v6/item/helper-error/demo.html b/static/usage/v6/item/helper-error/demo.html index 399f66d1270..5a495cdd6cc 100644 --- a/static/usage/v6/item/helper-error/demo.html +++ b/static/usage/v6/item/helper-error/demo.html @@ -1,56 +1,56 @@ - - - - - Item - - - - - - - - - -
- - Email - - Enter a valid email - Invalid email - -
- - - - - - - \ No newline at end of file + + + + Item + + + + + + + + + +
+ + Email + + Enter a valid email + Invalid email + +
+ + + + + + diff --git a/static/usage/v6/item/icons/demo.html b/static/usage/v6/item/icons/demo.html index 6cbd9d1b2a9..28809e7b711 100644 --- a/static/usage/v6/item/icons/demo.html +++ b/static/usage/v6/item/icons/demo.html @@ -1,56 +1,46 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + Default Icon + + - - - -
- - - Default Icon - - - + + Large Icon + + - - - Large Icon - - - + + Small Icon + + - - - Small Icon - - - - - - - - Default Icon - - -
- - - - - \ No newline at end of file + + + Default Icon + +
+ + + + diff --git a/static/usage/v6/item/inputs/demo.html b/static/usage/v6/item/inputs/demo.html index 4ab92196b2e..9b91ee5b96a 100644 --- a/static/usage/v6/item/inputs/demo.html +++ b/static/usage/v6/item/inputs/demo.html @@ -1,86 +1,84 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + Default Input + + - - - -
- - Default Input - - + + Fixed Input + + - - Fixed Input - - + + Stacked Input + + - - Stacked Input - - + + Floating Input + + - - Floating Input - - + + Floating Input: Outline (MD only) + + - - Floating Input: Outline (MD only) - - + + Floating Input: Solid (MD only) + + - - Floating Input: Solid (MD only) - - + + Select + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + - - Select - - No Game Console - NES - Nintendo64 - PlayStation - Sega Genesis - Sega Saturn - SNES - - + + Toggle + + - - Toggle - - + + Checkbox + + - - Checkbox - - - - - Range - - -
- - - - - \ No newline at end of file + + Range + + +
+ + + + diff --git a/static/usage/v6/item/lines/demo.html b/static/usage/v6/item/lines/demo.html index 79cb3ce7933..6e86afd7dd4 100644 --- a/static/usage/v6/item/lines/demo.html +++ b/static/usage/v6/item/lines/demo.html @@ -1,70 +1,66 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + Default Item Lines + - - - -
- - - Default Item Lines - - + + Item Lines Inset + - - Item Lines Inset - + + Item Lines Full + - - Item Lines Full - + + Item Lines None + - - Item Lines None - + + + Default Item Lines + + - - - Default Item Lines - - + + + Item Lines Inset + + - - - Item Lines Inset - - + + + Item Lines Full + + - - - Item Lines Full - - - - - - Item Lines None - - -
- - - - - \ No newline at end of file + + + Item Lines None + + +
+ + + + diff --git a/static/usage/v6/item/media/demo.html b/static/usage/v6/item/media/demo.html index 451c5d6eaf1..67dd1f096b6 100644 --- a/static/usage/v6/item/media/demo.html +++ b/static/usage/v6/item/media/demo.html @@ -1,46 +1,40 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + + Silhouette of a person's head + + Avatar Item + - - - -
- - - Silhouette of a person's head - - - Avatar Item - - - - - - Silhouette of mountains - - - Thumbnail Item - - -
- - - - - \ No newline at end of file + + + Silhouette of mountains + + Thumbnail Item + +
+ + + + diff --git a/static/usage/v6/item/theming/colors/demo.html b/static/usage/v6/item/theming/colors/demo.html index fbd225c988b..f4f73219337 100644 --- a/static/usage/v6/item/theming/colors/demo.html +++ b/static/usage/v6/item/theming/colors/demo.html @@ -1,59 +1,57 @@ + + + + Item + + + + - - - - Item - - - - + + - - - - - - -
- - Default Item - - - Primary Item - - - Secondary Item - - - Tertiary Item - - - Success Item - - - Warning Item - - - Danger Item - - - Light Item - - - Medium Item - - - Dark Item - -
- - - - - \ No newline at end of file + + + +
+ + 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/v6/item/theming/css-properties/demo.html b/static/usage/v6/item/theming/css-properties/demo.html index c255a677199..e40ce993ece 100644 --- a/static/usage/v6/item/theming/css-properties/demo.html +++ b/static/usage/v6/item/theming/css-properties/demo.html @@ -1,57 +1,55 @@ - - - - - Item - - - - - - - - - - - -
- - Custom Item - - - - Custom Item - - - - Custom Item - -
- - - - - \ No newline at end of file + + + + Item + + + + + + + + + + + +
+ + Custom Item + + + + Custom Item + + + + Custom Item + +
+ + + + diff --git a/static/usage/v6/item/theming/css-shadow-parts/demo.html b/static/usage/v6/item/theming/css-shadow-parts/demo.html index 132c0900cb8..89792ed7ca3 100644 --- a/static/usage/v6/item/theming/css-shadow-parts/demo.html +++ b/static/usage/v6/item/theming/css-shadow-parts/demo.html @@ -1,57 +1,55 @@ - - - - - Item - - - - - - - - - - - -
- - Custom Item - - - - Custom Item - - - - Custom Item - -
- - - - - \ No newline at end of file + + + + Item + + + + + + + + + + + +
+ + Custom Item + + + + Custom Item + + + + Custom Item + +
+ + + + diff --git a/static/usage/v6/item/theming/input-highlight/demo.html b/static/usage/v6/item/theming/input-highlight/demo.html index 2094539141e..9a95d3cdde4 100644 --- a/static/usage/v6/item/theming/input-highlight/demo.html +++ b/static/usage/v6/item/theming/input-highlight/demo.html @@ -1,50 +1,48 @@ + + + + Item + + + + - - - - Item - - - - + + - ion-item { - --highlight-height: 2px; - --highlight-color-focused: #43e7f3; - --highlight-color-valid: #6f58d8; - --highlight-color-invalid: #ff46be; - } - - + + + +
+ + Custom Input Highlight: Focused + + - - - -
- - Custom Input Highlight: Focused - - + + Custom Input Highlight: Focused & Valid + + - - Custom Input Highlight: Focused & Valid - - - - - Custom Input Highlight: Focused & Invalid - - -
- - - - - \ No newline at end of file + + Custom Input Highlight: Focused & Invalid + + +
+ + + + diff --git a/static/usage/v6/label/basic/demo.html b/static/usage/v6/label/basic/demo.html index a6bad98959e..5af936881c5 100644 --- a/static/usage/v6/label/basic/demo.html +++ b/static/usage/v6/label/basic/demo.html @@ -1,24 +1,22 @@ + + + + Label + + + + + - - - - Label - - - - - - - - - -
- Label -
- - - - - \ No newline at end of file + + + +
+ Label +
+ + + + diff --git a/static/usage/v6/label/theming/colors/demo.html b/static/usage/v6/label/theming/colors/demo.html index 3444d3c2da9..c168364f9b4 100644 --- a/static/usage/v6/label/theming/colors/demo.html +++ b/static/usage/v6/label/theming/colors/demo.html @@ -1,39 +1,37 @@ + + + + Label + + + + - - - - Label - - - - + + - - - - - - -
- Default - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark -
- - - - - \ No newline at end of file + + + +
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+ + + + diff --git a/static/usage/v6/list-header/basic/demo.html b/static/usage/v6/list-header/basic/demo.html index dae3477fac9..c44ca9a3d3d 100644 --- a/static/usage/v6/list-header/basic/demo.html +++ b/static/usage/v6/list-header/basic/demo.html @@ -1,49 +1,47 @@ + + + + List Header + + + + - - - - List Header - - - - + + - - - - - - -
- - - Video Games - - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - -
- - - - - \ No newline at end of file + + + +
+ + + Video Games + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v6/list-header/buttons/demo.html b/static/usage/v6/list-header/buttons/demo.html index 19ecb87a9a2..9a8778e10e0 100644 --- a/static/usage/v6/list-header/buttons/demo.html +++ b/static/usage/v6/list-header/buttons/demo.html @@ -1,50 +1,48 @@ + + + + List Header + + + + - - - - List Header - - - - + + - - - - - - -
- - - Video Games - See All - - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - -
- - - - - \ No newline at end of file + + + +
+ + + Video Games + See All + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v6/list-header/lines/demo.html b/static/usage/v6/list-header/lines/demo.html index dad3ebc17cb..5b87be8940f 100644 --- a/static/usage/v6/list-header/lines/demo.html +++ b/static/usage/v6/list-header/lines/demo.html @@ -1,64 +1,62 @@ + + + + List Header + + + + - - - - List Header - - - - + + - - + + + +
+ + + Default + + + Item + + + Item + + - - - -
- - - Default - - - Item - - - Item - - + + + Inset + + + Item + + + Item + + - - - Inset - - - Item - - - Item - - - - - - Full - - - Item - - - Item - - -
- - - - - \ No newline at end of file + + + Full + + + Item + + + Item + + +
+ + + + diff --git a/static/usage/v6/list-header/theming/colors/demo.html b/static/usage/v6/list-header/theming/colors/demo.html index fa36d9b0a9a..16e8d5ef111 100644 --- a/static/usage/v6/list-header/theming/colors/demo.html +++ b/static/usage/v6/list-header/theming/colors/demo.html @@ -1,59 +1,57 @@ + + + + List Header + + + + - - - - List Header - - - - + + - - - - - - -
- - Default - - - Primary - - - Secondary - - - Tertiary - - - Success - - - Warning - - - Danger - - - Light - - - Medium - - - Dark - -
- - - - - \ No newline at end of file + + + +
+ + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +
+ + + + diff --git a/static/usage/v6/list-header/theming/css-properties/demo.html b/static/usage/v6/list-header/theming/css-properties/demo.html index 133c2d8f994..1fe6e1de395 100644 --- a/static/usage/v6/list-header/theming/css-properties/demo.html +++ b/static/usage/v6/list-header/theming/css-properties/demo.html @@ -1,37 +1,35 @@ + + + + List Header + + + + - - - - List Header - - - - + + - --border-width: 0 0 4px 0; - --border-color: #f24aec; - --border-style: double; - } - - - - - - -
- - Custom List Header - -
- - - - - \ No newline at end of file + + + +
+ + Custom List Header + +
+ + + + diff --git a/static/usage/v6/list/basic/demo.html b/static/usage/v6/list/basic/demo.html index 86ed4981f63..a29da0b96c9 100644 --- a/static/usage/v6/list/basic/demo.html +++ b/static/usage/v6/list/basic/demo.html @@ -1,46 +1,44 @@ + + + + List + + + + - - - - List - - - - + + - - - - - - -
- - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - -
- - - - - \ No newline at end of file + + + +
+ + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v6/list/inset/demo.html b/static/usage/v6/list/inset/demo.html index b2cbacc4e11..5d8520d0ebb 100644 --- a/static/usage/v6/list/inset/demo.html +++ b/static/usage/v6/list/inset/demo.html @@ -1,51 +1,49 @@ + + + + List + + + + - - - - List - - - - + + - .container { - flex-flow: column; - align-items: stretch; - } - - - - - - -
- - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - -
- - - - - \ No newline at end of file + + + +
+ + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v6/list/lines/demo.html b/static/usage/v6/list/lines/demo.html index 259465266e1..0e922f56516 100644 --- a/static/usage/v6/list/lines/demo.html +++ b/static/usage/v6/list/lines/demo.html @@ -1,66 +1,64 @@ + + + + List + + + + - - - - List - - - - + + - - + + + +
+ + + Full Lines + + + Full Lines + + + Full Lines + + - - - -
- - - Full Lines - - - Full Lines - - - Full Lines - - + + + Inset Lines + + + Inset Lines + + + Inset Lines + + - - - Inset Lines - - - Inset Lines - - - Inset Lines - - - - - - No Lines - - - No Lines - - - No Lines - - -
- - - - - \ No newline at end of file + + + No Lines + + + No Lines + + + No Lines + + +
+ + + + diff --git a/static/usage/v6/loading/controller/demo.html b/static/usage/v6/loading/controller/demo.html index 9a3385f7307..3fe1cc4140b 100644 --- a/static/usage/v6/loading/controller/demo.html +++ b/static/usage/v6/loading/controller/demo.html @@ -1,39 +1,37 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - + + + +
+ Show Loading +
+ + - - - -
- Show Loading -
- - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v6/loading/spinners/demo.html b/static/usage/v6/loading/spinners/demo.html index 01929a4e1f2..2b441d8c068 100644 --- a/static/usage/v6/loading/spinners/demo.html +++ b/static/usage/v6/loading/spinners/demo.html @@ -1,40 +1,38 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - + + + +
+ Show Loading +
+ + - - - -
- Show Loading -
- - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v6/loading/theming/demo.html b/static/usage/v6/loading/theming/demo.html index d901557c331..8e609b364ef 100644 --- a/static/usage/v6/loading/theming/demo.html +++ b/static/usage/v6/loading/theming/demo.html @@ -1,48 +1,46 @@ + + + + Datetime + + + + + + + - color: #1c6dff; - } - - + + + +
+ Show Loading +
+ + - - - -
- Show Loading -
- - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v6/menu/basic/demo.html b/static/usage/v6/menu/basic/demo.html index 83f3f3ac7c4..ec99a3d894e 100644 --- a/static/usage/v6/menu/basic/demo.html +++ b/static/usage/v6/menu/basic/demo.html @@ -1,40 +1,36 @@ + + + + Menu + + + + + - - - - Menu - - - - - - - - - - - - Menu Content - - - This is the menu content. - -
- - - - - - Menu - - - - Tap the button in the toolbar to open the menu. - -
- - - - \ No newline at end of file + + + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+ + + diff --git a/static/usage/v6/menu/theming/demo.html b/static/usage/v6/menu/theming/demo.html index e3d7c78a20f..e5f8f127c54 100644 --- a/static/usage/v6/menu/theming/demo.html +++ b/static/usage/v6/menu/theming/demo.html @@ -1,51 +1,47 @@ + + + + Menu + + + + + + - box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18); - } - - - - - - - - - Menu Content - - - This is the menu content. - -
- - - - - - Menu - - - - Tap the button in the toolbar to open the menu. - -
- - - - \ No newline at end of file + + + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+ + + diff --git a/static/usage/v6/menu/toggle/demo.html b/static/usage/v6/menu/toggle/demo.html index 6a760b44aa3..3d8b391136b 100644 --- a/static/usage/v6/menu/toggle/demo.html +++ b/static/usage/v6/menu/toggle/demo.html @@ -1,43 +1,41 @@ + + + + Menu - Toggle + + + + + - - - - Menu - Toggle - - - - - - - - - - - - Menu Content - - - - - Click to close the menu - - - -
- - - Menu - - - - - Click to open the menu - - -
- - - - \ No newline at end of file + + + + + + Menu Content + + + + + Click to close the menu + + + +
+ + + Menu + + + + + Click to open the menu + + +
+ + + diff --git a/static/usage/v6/menu/type/demo.html b/static/usage/v6/menu/type/demo.html index 7dbfe39cffa..227dc831560 100644 --- a/static/usage/v6/menu/type/demo.html +++ b/static/usage/v6/menu/type/demo.html @@ -1,74 +1,73 @@ + + + + Menu - Type + + + + + - - - - Menu - Type - - - - - + + + + + + Menu Content + + + + + Click to close the menu + + + - - - - - - Menu Content - - - - - Click to close the menu - - - +
+ + + Menu + + + +

Select an overlay type:

+ + + + overlay + + + + + + reveal + + + + + + push + + + + +
+ + Click to open the menu + + +
+ -
- - - Menu - - - -

Select an overlay type:

- - - - overlay - - - - - - reveal - - - - - - push - - - -
- - Click to open the menu - - -
- + - - - \ No newline at end of file + radioGroup.addEventListener('ionChange', (ev) => { + menu.type = ev.detail.value; + }); + + + diff --git a/static/usage/v6/modal/can-dismiss/boolean/demo.html b/static/usage/v6/modal/can-dismiss/boolean/demo.html index d548f1c9e61..b22908839fb 100644 --- a/static/usage/v6/modal/can-dismiss/boolean/demo.html +++ b/static/usage/v6/modal/can-dismiss/boolean/demo.html @@ -1,67 +1,63 @@ - - - - - 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? - - - - - -
- - - + + + + + + +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

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

+ + Do you accept the terms and conditions? + + + + + +
+ + + - - - \ No newline at end of file + + + diff --git a/static/usage/v6/modal/can-dismiss/function/demo.html b/static/usage/v6/modal/can-dismiss/function/demo.html index 0f97193113f..bba95c509b6 100644 --- a/static/usage/v6/modal/can-dismiss/function/demo.html +++ b/static/usage/v6/modal/can-dismiss/function/demo.html @@ -1,74 +1,74 @@ + + + + Modal | Can Dismiss + + + + + - - - - Modal | Can Dismiss - - - - + + +
+ + + App + + + + Open - + + + + Modal + + Close + + + + +

You will be prompted when closing this modal.

+ + + +
+ - - -
- - - App - - - - Open + - - - \ No newline at end of file + return role === 'confirm'; + } + + + diff --git a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html index 620cf48cb9d..dcbf4d94020 100644 --- a/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html +++ b/static/usage/v6/modal/can-dismiss/prevent-swipe-to-close/demo.html @@ -1,57 +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.

- - - -
- - - - - - \ No newline at end of file + + + + 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/v6/modal/card/basic/demo.html b/static/usage/v6/modal/card/basic/demo.html index ea2200494f8..3b9c5c7cdd8 100644 --- a/static/usage/v6/modal/card/basic/demo.html +++ b/static/usage/v6/modal/card/basic/demo.html @@ -1,90 +1,88 @@ + + + + Modal | Card + + + + + - - - - Modal | Card - - - - - + + +
+ + + App + + + + Open Card Modal - - -
- - - App - - - - Open Card Modal + + + + Modal + + Close + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + +
+ - - - - Modal - - Close - - - - - - - - - - -

Connor Smith

-

Sales Rep

- - - - - - - -

Daniel Smith

-

Product Designer

- - - - - - - -

Greg Smith

-

Director of Operations

- - - - - - - -

Zoey Smith

-

CEO

- - - - - - -
- + - - - \ No newline at end of file + function dismiss() { + modal.dismiss(); + } + + + diff --git a/static/usage/v6/modal/controller/demo.html b/static/usage/v6/modal/controller/demo.html index 643eeb66ccc..d857c0c9e3b 100644 --- a/static/usage/v6/modal/controller/demo.html +++ b/static/usage/v6/modal/controller/demo.html @@ -1,37 +1,36 @@ + + + + Modal | Controller + + + + + + - - - - Modal | Controller - - - - - - - - - - - - Controller Modal - - - - Open -

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

- - + + + + + Controller Modal + + + + Open +

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

+ + - - + function cancel() { + modalController.dismiss(null, 'cancel'); + } - \ No newline at end of file + function confirm() { + const input = document.querySelector('ion-input'); + modalController.dismiss(input.value, 'confirm'); + } + + + diff --git a/static/usage/v6/modal/custom-dialogs/demo.html b/static/usage/v6/modal/custom-dialogs/demo.html index 95149828ba7..d51538669db 100644 --- a/static/usage/v6/modal/custom-dialogs/demo.html +++ b/static/usage/v6/modal/custom-dialogs/demo.html @@ -1,83 +1,85 @@ + + + + Modal | Custom Dialog + + + + + + - ion-modal .wrapper { - margin-bottom: 10px; - } - - + + + + + App + + + + Open Custom Dialog - - - - - App - - - - Open Custom Dialog + +
+

Dialog header

- -
-

Dialog header

+ + + + Item 1 + + + + Item 2 + + + + Item 3 + + +
+ + + - - - - Item 1 - - - - Item 2 - - - - Item 3 - - -
- - - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v6/modal/inline/is-open/demo.html b/static/usage/v6/modal/inline/is-open/demo.html index ed5f3494869..0772f0a9703 100644 --- a/static/usage/v6/modal/inline/is-open/demo.html +++ b/static/usage/v6/modal/inline/is-open/demo.html @@ -1,46 +1,46 @@ + + + + Modal | Inline + + + + + - - - - 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. +

+ + + + - - - - - 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.

- - - - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v6/modal/performance/mount/demo.html b/static/usage/v6/modal/performance/mount/demo.html index 03d47899733..59e4987f6db 100644 --- a/static/usage/v6/modal/performance/mount/demo.html +++ b/static/usage/v6/modal/performance/mount/demo.html @@ -1,55 +1,51 @@ + + + + Modal | Performance + + + + + + - - - - Modal | Performance - - - - - - + + + + + Example + + + + Open Modal + + + + + Close + + Modal + + + This content was mounted as soon as the modal was created. + + + - - - - - Example - - - - Open Modal - - - - - Close - - Modal - - - - This content was mounted as soon as the modal was created. - - - - + - - - \ No newline at end of file + const close = () => { + modal.dismiss(); + }; + + + diff --git a/static/usage/v6/modal/sheet/background-content/demo.html b/static/usage/v6/modal/sheet/background-content/demo.html index 9ba868a9e1e..41a04f1f7f7 100644 --- a/static/usage/v6/modal/sheet/background-content/demo.html +++ b/static/usage/v6/modal/sheet/background-content/demo.html @@ -1,106 +1,103 @@ + + + + Modal | Sheet + + + + + + - - - - Modal | Sheet - - - - - - + + + + + App + + + +

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

- - - - - App - - - +
+ - +

0

+ + +
-

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

+ + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + -
- - -

0

- + -
+ - - - \ No newline at end of file + function decrement() { + const counter = document.querySelector('#counter'); + counter.innerHTML = parseInt(counter.innerText) - 1; + } + + + diff --git a/static/usage/v6/modal/sheet/basic/demo.html b/static/usage/v6/modal/sheet/basic/demo.html index 65be6a2ceab..49d762f4c1a 100644 --- a/static/usage/v6/modal/sheet/basic/demo.html +++ b/static/usage/v6/modal/sheet/basic/demo.html @@ -1,82 +1,80 @@ + + + + Modal | Sheet + + + + + - - - - Modal | Sheet - - - - - + + + + + App + + + + Open Sheet Modal - - - - - App - - - - Open Sheet Modal + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + - - - - - - - - - -

Connor Smith

-

Sales Rep

- - - - - - - -

Daniel Smith

-

Product Designer

- - - - - - - -

Greg Smith

-

Director of Operations

- - - - - - - -

Zoey Smith

-

CEO

- - - - - - - + - - - \ No newline at end of file + searchBar.addEventListener('click', () => { + modal.setCurrentBreakpoint(0.75); + }); + + + diff --git a/static/usage/v6/modal/sheet/handle-behavior/demo.html b/static/usage/v6/modal/sheet/handle-behavior/demo.html index c89417e7ecf..809938509d1 100644 --- a/static/usage/v6/modal/sheet/handle-behavior/demo.html +++ b/static/usage/v6/modal/sheet/handle-behavior/demo.html @@ -1,41 +1,39 @@ + + + + Modal | Sheet + + + + + - - - - Modal | Sheet - - - - - + + + + + App + + + + Open Sheet Modal - - - - - App - - - - Open Sheet Modal + + +
+ Click the handle above to advance to the next breakpoint. +
+ + + + - - -
- Click the handle above to advance to the next breakpoint. -
- - - - + - - - \ No newline at end of file + modal.breakpoints = [0, 0.25, 0.5, 0.75]; + + + diff --git a/static/usage/v6/modal/styling/animations/demo.html b/static/usage/v6/modal/styling/animations/demo.html index 555667996c4..92a00cbff7c 100644 --- a/static/usage/v6/modal/styling/animations/demo.html +++ b/static/usage/v6/modal/styling/animations/demo.html @@ -1,117 +1,114 @@ + + + + Modal | Animations + + + + + + - - - - Modal | Animations - - - - - + + + + + App + + + + Open Modal - + + + + Modal + + Close + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + - - - - - App - - - - Open Modal + - - - \ No newline at end of file + function dismiss() { + modal.dismiss(); + } + + + diff --git a/static/usage/v6/nav/modal-navigation/demo.html b/static/usage/v6/nav/modal-navigation/demo.html index 0d099f1e3cc..4d696e6e174 100644 --- a/static/usage/v6/nav/modal-navigation/demo.html +++ b/static/usage/v6/nav/modal-navigation/demo.html @@ -1,106 +1,100 @@ - - - - - Nav | Modal Navigation - - - - - - - - - - - Modal Navigation - - - - Open Modal - - - - Modal - - - Close - - - - - - - - - - - - + + + + + + + + + Modal Navigation + + + + Open Modal + + + + Modal + + Close + + + + + + + + + + + - - - \ No newline at end of file + customElements.define('page-one', PageOne); + customElements.define('page-two', PageTwo); + customElements.define('page-three', PageThree); + + + diff --git a/static/usage/v6/nav/nav-link/demo.html b/static/usage/v6/nav/nav-link/demo.html index 9d8aa06c58f..e965cf24540 100644 --- a/static/usage/v6/nav/nav-link/demo.html +++ b/static/usage/v6/nav/nav-link/demo.html @@ -1,26 +1,25 @@ + + + + Nav | NavLink + + + + + - - - - Nav | NavLink - - - - - + + + + - - - - - - - - - - \ No newline at end of file + customElements.define('page-one', PageOne); + customElements.define('page-two', PageTwo); + customElements.define('page-three', PageThree); + + + diff --git a/static/usage/v6/note/basic/demo.html b/static/usage/v6/note/basic/demo.html index ae5b7ce7f04..9af121ee5b4 100644 --- a/static/usage/v6/note/basic/demo.html +++ b/static/usage/v6/note/basic/demo.html @@ -1,25 +1,22 @@ + + + + Note + + + + + - - - - Note - - - - - - - - - - -
- Default Note -
- - - - - \ No newline at end of file + + + +
+ Default Note +
+ + + + diff --git a/static/usage/v6/note/item/demo.html b/static/usage/v6/note/item/demo.html index 3aea8507aa8..7d6b2d51601 100644 --- a/static/usage/v6/note/item/demo.html +++ b/static/usage/v6/note/item/demo.html @@ -1,38 +1,36 @@ + + + + Note + + + + - - - - Note - - - - + + - - + + + +
+ + Label + Note (End) + - - - -
- - Label - Note (End) - - - - Note (Start) - Label - -
- - - - - \ No newline at end of file + + Note (Start) + Label + +
+ + + + diff --git a/static/usage/v6/note/theming/colors/demo.html b/static/usage/v6/note/theming/colors/demo.html index 2564a686b1a..c7659ea9e69 100644 --- a/static/usage/v6/note/theming/colors/demo.html +++ b/static/usage/v6/note/theming/colors/demo.html @@ -1,49 +1,47 @@ + + + + Note + + + + - - - - Note - - - - + + - ion-note { - margin: 0 2px; - } - - - - - - -
-
- Default Note - Primary Note - Secondary Note - Tertiary Note - Success Note - Warning Note - Danger Note - Light Note - Medium Note - Dark Note + + + +
+
+ Default Note + Primary Note + Secondary Note + Tertiary Note + Success Note + Warning Note + Danger Note + Light Note + Medium Note + Dark Note +
-
- - - - - \ No newline at end of file + + + + diff --git a/static/usage/v6/note/theming/css-properties/demo.html b/static/usage/v6/note/theming/css-properties/demo.html index 400d4bf0b10..c48e2540525 100644 --- a/static/usage/v6/note/theming/css-properties/demo.html +++ b/static/usage/v6/note/theming/css-properties/demo.html @@ -1,30 +1,28 @@ + + + + Note + + + + - - - - Note - - - - + + - - - - - - -
- Default Note -
- - - - - \ No newline at end of file + + + +
+ Default Note +
+ + + + diff --git a/static/usage/v6/picker/multiple-column/demo.html b/static/usage/v6/picker/multiple-column/demo.html index 50b673172e2..d8614d0fb8b 100644 --- a/static/usage/v6/picker/multiple-column/demo.html +++ b/static/usage/v6/picker/multiple-column/demo.html @@ -1,90 +1,100 @@ + + + + Picker | Multiple Columns + + + + + + - - - - Picker | Multiple Columns - - - - - - - - - - -
- Open -
- - - - - - \ No newline at end of file + name: 'crust', + options: [ + { + text: 'Pan style', + value: 'pan', + }, + { + text: 'Hand tossed', + value: 'hand-tossed', + }, + { + text: 'Stuffed crust', + value: 'stuffed-crust', + }, + ], + }, + ], + buttons: [ + { + text: 'Cancel', + role: 'cancel', + }, + { + text: 'Confirm', + handler: (value) => { + window.alert( + `You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}` + ); + }, + }, + ], + }); + await picker.present(); + } + + + diff --git a/static/usage/v6/picker/single-column/demo.html b/static/usage/v6/picker/single-column/demo.html index 6f81b1c6e8f..96ccdcb31c5 100644 --- a/static/usage/v6/picker/single-column/demo.html +++ b/static/usage/v6/picker/single-column/demo.html @@ -1,65 +1,68 @@ + + + + Picker | Single Column + + + + + + - - - - Picker | Single Column - - - - - - - - - - -
- Open -
- - - - - - \ No newline at end of file + 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) => { + window.alert(`You selected: ${value.languages.value}`); + }, + }, + ], + }); + await picker.present(); + } + + + diff --git a/static/usage/v6/popover/customization/positioning/demo.html b/static/usage/v6/popover/customization/positioning/demo.html index 71a74fb45e9..f6cd7b1d3dd 100644 --- a/static/usage/v6/popover/customization/positioning/demo.html +++ b/static/usage/v6/popover/customization/positioning/demo.html @@ -1,52 +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! - -
- - - - - \ No newline at end of file + + + + 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/v6/popover/customization/sizing/demo.html b/static/usage/v6/popover/customization/sizing/demo.html index b85d71034f8..bdba35fa601 100644 --- a/static/usage/v6/popover/customization/sizing/demo.html +++ b/static/usage/v6/popover/customization/sizing/demo.html @@ -1,32 +1,30 @@ + + + + Popover + + + + + - - - - Popover - - - - - + + + +
+ Size=Auto + + Hello! + - - - -
- Size=Auto - - Hello! - - - Size=Cover - - Hello! - -
- - - - - \ No newline at end of file + Size=Cover + + Hello! + +
+ + + + diff --git a/static/usage/v6/popover/customization/styling/demo.html b/static/usage/v6/popover/customization/styling/demo.html index 6d858b14659..dafd212d445 100644 --- a/static/usage/v6/popover/customization/styling/demo.html +++ b/static/usage/v6/popover/customization/styling/demo.html @@ -1,45 +1,43 @@ + + + + Popover + + + + - - - - Popover - - - - + + - ion-popover::part(backdrop) { - background-color: rgb(6, 14, 106); - } - - - - - - -
- Click Me - - Hello Styled World! - -
- - - - - \ No newline at end of file + + + +
+ Click Me + + Hello Styled World! + +
+ + + + diff --git a/static/usage/v6/popover/nested/demo.html b/static/usage/v6/popover/nested/demo.html index ab52c1d5540..6a6f6806105 100644 --- a/static/usage/v6/popover/nested/demo.html +++ b/static/usage/v6/popover/nested/demo.html @@ -1,41 +1,39 @@ + + + + Popover + + + + + - - - - Popover - - - - - + + + +
+ Open Menu + + + + Option 1 + Option 2 + More options... - - - -
- Open Menu - - - - Option 1 - Option 2 - More options... - - - - - Nested option - - - - - - -
- - - - - \ No newline at end of file + + + + Nested option + + + + + + +
+ + + + diff --git a/static/usage/v6/popover/performance/mount/demo.html b/static/usage/v6/popover/performance/mount/demo.html index 053883d5e75..11532648266 100644 --- a/static/usage/v6/popover/performance/mount/demo.html +++ b/static/usage/v6/popover/performance/mount/demo.html @@ -1,27 +1,25 @@ + + + + Popover + + + + + - - - - Popover - - - - - - - - - -
- Open Popover - - This content was mounted as soon as the popover was created. - -
- - - - - \ No newline at end of file + + + +
+ Open Popover + + This content was mounted as soon as the popover was created. + +
+ + + + diff --git a/static/usage/v6/popover/presenting/controller/demo.html b/static/usage/v6/popover/presenting/controller/demo.html index 0a235d3c41d..96df8ae552c 100644 --- a/static/usage/v6/popover/presenting/controller/demo.html +++ b/static/usage/v6/popover/presenting/controller/demo.html @@ -1,63 +1,61 @@ - - - - - Popover - - - - - - - - - - - -
- Click Me -

-
- - - - + + + + + + + + + +
+ Click Me +

+
+ + + + - + const { role } = await popover.onDidDismiss(); + output.innerText = `Popover dismissed with role: ${role}`; + } - \ No newline at end of file + const button = document.querySelector('ion-button'); + button.addEventListener('click', presentPopover); + + + diff --git a/static/usage/v6/popover/presenting/inline-isopen/demo.html b/static/usage/v6/popover/presenting/inline-isopen/demo.html index 4180760c005..6d2307b6c56 100644 --- a/static/usage/v6/popover/presenting/inline-isopen/demo.html +++ b/static/usage/v6/popover/presenting/inline-isopen/demo.html @@ -1,39 +1,37 @@ + + + + Popover + + + + + - - - - Popover - - - - - + + + +
+ Click Me + + Hello World! + +
+ + - - - -
- Click Me - - Hello World! - -
- - + - - - \ No newline at end of file + popover.addEventListener('didDismiss', () => (popover.isOpen = false)); + + + diff --git a/static/usage/v6/popover/presenting/inline-trigger/demo.html b/static/usage/v6/popover/presenting/inline-trigger/demo.html index d1b2020e454..aef01c4d100 100644 --- a/static/usage/v6/popover/presenting/inline-trigger/demo.html +++ b/static/usage/v6/popover/presenting/inline-trigger/demo.html @@ -1,37 +1,35 @@ + + + + Popover + + + + + - - - - Popover - - - - - + + + +
+ Left-Click Me + + Hello World! + - - - -
- Left-Click Me - - Hello World! - + Right-Click Me + + Hello World! + - Right-Click Me - - Hello World! - - - Hover Over Me - - Hello World! - -
- - - - - \ No newline at end of file + Hover Over Me + + Hello World! + +
+ + + + diff --git a/static/usage/v6/progress-bar/buffer/demo.html b/static/usage/v6/progress-bar/buffer/demo.html index 023c907ed39..d1e3ba6fe58 100644 --- a/static/usage/v6/progress-bar/buffer/demo.html +++ b/static/usage/v6/progress-bar/buffer/demo.html @@ -1,47 +1,44 @@ - - - - - Progress Bar - - - - - - - - - - -
- -
- - - - - - - \ No newline at end of file + + + + Progress Bar + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v6/progress-bar/determinate/demo.html b/static/usage/v6/progress-bar/determinate/demo.html index 2f09a3ad5cd..2da05e6aa19 100644 --- a/static/usage/v6/progress-bar/determinate/demo.html +++ b/static/usage/v6/progress-bar/determinate/demo.html @@ -1,42 +1,39 @@ + + + + Progress Bar + + + + + - - - - Progress Bar - - - - + + + +
+ +
+ + + - + - - \ No newline at end of file + // Reset the progress bar when it reaches 100% + // to continuously show the demo + if (progress > 1) { + setTimeout(() => { + progressBar.value = progress = 0; + }, 1000); + } + }, 50); + + diff --git a/static/usage/v6/progress-bar/indeterminate/demo.html b/static/usage/v6/progress-bar/indeterminate/demo.html index 46c9cdd7254..7561efa5910 100644 --- a/static/usage/v6/progress-bar/indeterminate/demo.html +++ b/static/usage/v6/progress-bar/indeterminate/demo.html @@ -1,25 +1,22 @@ + + + + Progress Bar + + + + + - - - - Progress Bar - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/progress-bar/theming/colors/demo.html b/static/usage/v6/progress-bar/theming/colors/demo.html index 2ecac2e80fa..118156608e6 100644 --- a/static/usage/v6/progress-bar/theming/colors/demo.html +++ b/static/usage/v6/progress-bar/theming/colors/demo.html @@ -1,39 +1,37 @@ + + + + Progress Bar + + + + - - - - Progress Bar - - - - + + - - - - - - -
- - - - - - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + + + + + +
+ + + + diff --git a/static/usage/v6/progress-bar/theming/css-properties/demo.html b/static/usage/v6/progress-bar/theming/css-properties/demo.html index 5d60e67fbc5..32bbd4baee1 100644 --- a/static/usage/v6/progress-bar/theming/css-properties/demo.html +++ b/static/usage/v6/progress-bar/theming/css-properties/demo.html @@ -1,37 +1,35 @@ + + + + Progress Bar + + + + - - - - Progress Bar - - - - + + - ion-progress-bar { - --background: #f3e895; - --progress-background: #09c567; - } - - - - - - -
- - -
- - - - - \ No newline at end of file + + + +
+ + +
+ + + + diff --git a/static/usage/v6/progress-bar/theming/css-shadow-parts/demo.html b/static/usage/v6/progress-bar/theming/css-shadow-parts/demo.html index 7ccd266e946..d3e53a62ede 100644 --- a/static/usage/v6/progress-bar/theming/css-shadow-parts/demo.html +++ b/static/usage/v6/progress-bar/theming/css-shadow-parts/demo.html @@ -1,44 +1,42 @@ + + + + Progress Bar + + + + - - - - Progress Bar - - - - + + - ion-progress-bar::part(stream) { - background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%); - } - - - - - - -
- - -
- - - - - \ No newline at end of file + + + +
+ + +
+ + + + diff --git a/static/usage/v6/radio/basic/demo.html b/static/usage/v6/radio/basic/demo.html index 896041e948e..f74a7d89b9f 100644 --- a/static/usage/v6/radio/basic/demo.html +++ b/static/usage/v6/radio/basic/demo.html @@ -1,52 +1,50 @@ + + + + Radio + + + + - - - - Radio - - - - + + - - + + + +
+ + + + Grapes + + - - - -
- - - - Grapes - - + + Strawberries + + - - Strawberries - - + + Pineapple + + - - Pineapple - - - - - Cherries (Disabled) - - - - -
- - - - - \ No newline at end of file + + Cherries (Disabled) + + + + +
+ + + + diff --git a/static/usage/v6/radio/empty-selection/demo.html b/static/usage/v6/radio/empty-selection/demo.html index 29731178d61..e75e16699b7 100644 --- a/static/usage/v6/radio/empty-selection/demo.html +++ b/static/usage/v6/radio/empty-selection/demo.html @@ -1,52 +1,50 @@ + + + + Radio + + + + - - - - Radio - - - - + + - - + + + +
+ + + + Dogs + + - - - -
- - - - Dogs - - + + Cats + + - - Cats - - + + Turtles + + - - Turtles - - - - - Fish - - - - -
- - - - - \ No newline at end of file + + Fish + + + + +
+ + + + diff --git a/static/usage/v6/radio/theming/colors/demo.html b/static/usage/v6/radio/theming/colors/demo.html index aa122b5f0ec..6c47a18c05c 100644 --- a/static/usage/v6/radio/theming/colors/demo.html +++ b/static/usage/v6/radio/theming/colors/demo.html @@ -1,54 +1,50 @@ + + + + Radio + + + + - - - - Radio - - - - + + - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v6/radio/theming/css-properties/demo.html b/static/usage/v6/radio/theming/css-properties/demo.html index 8d2a07e5df6..53fc3c2d693 100644 --- a/static/usage/v6/radio/theming/css-properties/demo.html +++ b/static/usage/v6/radio/theming/css-properties/demo.html @@ -1,49 +1,47 @@ - - - - - Radio - - - - - - - - - - - -
- - - - -
- - - - - \ No newline at end of file + + + + Radio + + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v6/radio/theming/css-shadow-parts/demo.html b/static/usage/v6/radio/theming/css-shadow-parts/demo.html index f2bc280fb83..38f11e3619b 100644 --- a/static/usage/v6/radio/theming/css-shadow-parts/demo.html +++ b/static/usage/v6/radio/theming/css-shadow-parts/demo.html @@ -1,62 +1,60 @@ - - - - - Radio - - - - - - - - - - - -
- - - - -
- - - - - \ No newline at end of file + + + + Radio + + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v6/range/basic/demo.html b/static/usage/v6/range/basic/demo.html index 2580a0cda5e..55983322169 100644 --- a/static/usage/v6/range/basic/demo.html +++ b/static/usage/v6/range/basic/demo.html @@ -1,29 +1,27 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/range/dual-knobs/demo.html b/static/usage/v6/range/dual-knobs/demo.html index 2c324f0eb57..c89b02eff98 100644 --- a/static/usage/v6/range/dual-knobs/demo.html +++ b/static/usage/v6/range/dual-knobs/demo.html @@ -1,36 +1,34 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
- -
- - - - - - \ No newline at end of file + + + +
+ +
+ + + + + diff --git a/static/usage/v6/range/pins/demo.html b/static/usage/v6/range/pins/demo.html index 032a649d14d..747c1e28d9e 100644 --- a/static/usage/v6/range/pins/demo.html +++ b/static/usage/v6/range/pins/demo.html @@ -1,35 +1,33 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
- -
- - - - - - \ No newline at end of file + + + +
+ +
+ + + + + diff --git a/static/usage/v6/range/slots/demo.html b/static/usage/v6/range/slots/demo.html index a6c24e8da62..e5530fe103f 100644 --- a/static/usage/v6/range/slots/demo.html +++ b/static/usage/v6/range/slots/demo.html @@ -1,32 +1,30 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
- - - - -
- - - - - \ No newline at end of file + + + +
+ + + + +
+ + + + diff --git a/static/usage/v6/range/snapping-ticks/demo.html b/static/usage/v6/range/snapping-ticks/demo.html index 8b0ada20488..592b5be9e92 100644 --- a/static/usage/v6/range/snapping-ticks/demo.html +++ b/static/usage/v6/range/snapping-ticks/demo.html @@ -1,29 +1,27 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/range/theming/css-properties/demo.html b/static/usage/v6/range/theming/css-properties/demo.html index 2bbf61e793b..7338d590d72 100644 --- a/static/usage/v6/range/theming/css-properties/demo.html +++ b/static/usage/v6/range/theming/css-properties/demo.html @@ -1,38 +1,36 @@ + + + + Range + + + + + + - max-width: 320px; - } - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/range/theming/css-shadow-parts/demo.html b/static/usage/v6/range/theming/css-shadow-parts/demo.html index 8469ebda0a8..8553b55da66 100644 --- a/static/usage/v6/range/theming/css-shadow-parts/demo.html +++ b/static/usage/v6/range/theming/css-shadow-parts/demo.html @@ -1,71 +1,69 @@ + + + + Range + + + + + + - ion-range::part(bar-active) { - background: #bde0fe; - } - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/refresher/advanced/demo.html b/static/usage/v6/refresher/advanced/demo.html index 8f0b2fbbe52..76c3260f914 100644 --- a/static/usage/v6/refresher/advanced/demo.html +++ b/static/usage/v6/refresher/advanced/demo.html @@ -1,89 +1,88 @@ + + + + Refresher + + + + - - - - Refresher - - - - - - - + ion-icon { + font-size: 12px; + align-self: start; + margin: 15px 8px; + } + + - - - - - Pull to Refresh - - + + + + + Pull to Refresh + + - - - - + + + + - - - + + + - - - - \ No newline at end of file + return item; + } + + + diff --git a/static/usage/v6/refresher/basic/demo.html b/static/usage/v6/refresher/basic/demo.html index 9c378cad03e..0321562f6e7 100644 --- a/static/usage/v6/refresher/basic/demo.html +++ b/static/usage/v6/refresher/basic/demo.html @@ -1,43 +1,41 @@ + + + + Refresher + + + + + - - - - Refresher - - - - - + + + + + Pull to Refresh + + - - - - - Pull to Refresh - - + + + + - - - - +

Pull this content down to trigger the refresh.

+ + -

Pull this content down to trigger the refresh.

- - + - - - \ No newline at end of file + refresher.addEventListener('ionRefresh', () => { + setTimeout(() => { + // Any calls to load data go here + refresher.complete(); + }, 2000); + }); + + + diff --git a/static/usage/v6/refresher/custom-content/demo.html b/static/usage/v6/refresher/custom-content/demo.html index 084ad40e10d..b39a0e6918e 100644 --- a/static/usage/v6/refresher/custom-content/demo.html +++ b/static/usage/v6/refresher/custom-content/demo.html @@ -1,45 +1,47 @@ + + + + Refresher + + + + + - - - - Refresher - - - - - + + + + + Pull to Refresh + + - - - - - Pull to Refresh - - + + + + + - - - - - +

Pull this content down to trigger the refresh.

+ + -

Pull this content down to trigger the refresh.

- - + - - - \ No newline at end of file + refresher.addEventListener('ionRefresh', () => { + setTimeout(() => { + // Any calls to load data go here + refresher.complete(); + }, 2000); + }); + + + diff --git a/static/usage/v6/refresher/custom-scroll-target/demo.html b/static/usage/v6/refresher/custom-scroll-target/demo.html index 0adad651d65..93b1e649cc3 100644 --- a/static/usage/v6/refresher/custom-scroll-target/demo.html +++ b/static/usage/v6/refresher/custom-scroll-target/demo.html @@ -1,56 +1,54 @@ - - - - - Refresher - - - - - - - - - - - - - Pull to Refresh - - - - - - - - -
-

Pull this content down to trigger the refresh.

-
- - - - - - - \ No newline at end of file + + + + Refresher + + + + + + + + + + + + + Pull to Refresh + + + + + + + + +
+

Pull this content down to trigger the refresh.

+
+ + + + + + diff --git a/static/usage/v6/refresher/pull-properties/demo.html b/static/usage/v6/refresher/pull-properties/demo.html index 3d8e940a636..d493a41fd9d 100644 --- a/static/usage/v6/refresher/pull-properties/demo.html +++ b/static/usage/v6/refresher/pull-properties/demo.html @@ -1,43 +1,41 @@ + + + + Refresher + + + + + - - - - Refresher - - - - - + + + + + Pull to Refresh + + - - - - - Pull to Refresh - - + + + + - - - - +

Pull this content down to trigger the refresh.

+ + -

Pull this content down to trigger the refresh.

- - + - - - \ No newline at end of file + refresher.addEventListener('ionRefresh', () => { + setTimeout(() => { + // Any calls to load data go here + refresher.complete(); + }, 2000); + }); + + + diff --git a/static/usage/v6/reorder/basic/demo.html b/static/usage/v6/reorder/basic/demo.html index 7d721cc2790..4bd02ab3284 100644 --- a/static/usage/v6/reorder/basic/demo.html +++ b/static/usage/v6/reorder/basic/demo.html @@ -1,83 +1,71 @@ + + + + Reorder + + + + - - - - Reorder - - - - + + - - + + + +
+ + + + + Item 1 + + - - - -
- - - - - - Item 1 - - - + + Item 2 + + - - - Item 2 - - - + + Item 3 + + - - - Item 3 - - - + + Item 4 + + - - - Item 4 - - - + + Item 5 + + + + +
+ + - - - Item 5 - - - - - -
- - + - - - \ No newline at end of file + // 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 + detail.complete(); + }); + + + diff --git a/static/usage/v6/reorder/custom-icon/demo.html b/static/usage/v6/reorder/custom-icon/demo.html index 1d9ad3dd39e..e982d341e29 100644 --- a/static/usage/v6/reorder/custom-icon/demo.html +++ b/static/usage/v6/reorder/custom-icon/demo.html @@ -1,93 +1,81 @@ + + + + Reorder + + + + - - - - Reorder - - - - + + - - + + + +
+ + + + + Item 1 + + + + - - - -
- - - - - - Item 1 - - - - - + + Item 2 + + + + - - - Item 2 - - - - - + + Item 3 + + + + - - - Item 3 - - - - - + + Item 4 + + + + - - - Item 4 - - - - - + + Item 5 + + + + + + +
+ + - - - Item 5 - - - - - - - -
- - + - - - \ No newline at end of file + // 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 + detail.complete(); + }); + + + diff --git a/static/usage/v6/reorder/custom-scroll-target/demo.html b/static/usage/v6/reorder/custom-scroll-target/demo.html index 8a94ae5d8e6..afa35f1035d 100644 --- a/static/usage/v6/reorder/custom-scroll-target/demo.html +++ b/static/usage/v6/reorder/custom-scroll-target/demo.html @@ -1,95 +1,83 @@ + + + + Reorder + + + + - - - - Reorder - - - - + + - height: 100%; - width: 100%; - overflow-y: auto; - } - - + + + +
+
+ + + + + Item 1 + + - - - -
-
- - - - - - Item 1 - - - + + Item 2 + + - - - Item 2 - - - + + Item 3 + + - - - Item 3 - - - + + Item 4 + + - - - Item 4 - - - - - - - Item 5 - - - - - + + Item 5 + + + + +
-
- - - - - + reorderGroup.addEventListener('ionItemReorder', ({ detail }) => { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', detail.from, 'to', detail.to); - \ No newline at end of file + // 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 + detail.complete(); + }); + + + diff --git a/static/usage/v6/reorder/toggling-disabled/demo.html b/static/usage/v6/reorder/toggling-disabled/demo.html index 1eb8cba120b..38e1279ef5b 100644 --- a/static/usage/v6/reorder/toggling-disabled/demo.html +++ b/static/usage/v6/reorder/toggling-disabled/demo.html @@ -1,96 +1,82 @@ + + + + Reorder + + + + - - - - Reorder - - - - + + - ion-list { - width: 100%; - } - - + + + +
+ + + + Item 1 + + - - - -
- - - - - Item 1 - - - + + Item 2 + + - - - Item 2 - - - + + Item 3 + + - - - Item 3 - - - + + Item 4 + + - - - Item 4 - - - + + Item 5 + + + + - - - Item 5 - - - - - + + Toggle Reorder +
+ + - - - Toggle Reorder - -
- - + - - - \ No newline at end of file + function toggleReorder() { + reorderGroup.disabled = !reorderGroup.disabled; + } + + + diff --git a/static/usage/v6/reorder/updating-data/demo.html b/static/usage/v6/reorder/updating-data/demo.html index bf7d175f937..b55fe80a47e 100644 --- a/static/usage/v6/reorder/updating-data/demo.html +++ b/static/usage/v6/reorder/updating-data/demo.html @@ -1,64 +1,63 @@ + + + + Reorder + + + + - - - - Reorder - - - - - - - + + - - - -
- - - - -
- - + + + +
+ + + + +
+ + - - + } - \ No newline at end of file + reorderGroup.innerHTML = reordered; + } + + + diff --git a/static/usage/v6/reorder/wrapper/demo.html b/static/usage/v6/reorder/wrapper/demo.html index 6bf8b66760b..81f3f981162 100644 --- a/static/usage/v6/reorder/wrapper/demo.html +++ b/static/usage/v6/reorder/wrapper/demo.html @@ -1,88 +1,76 @@ + + + + Reorder + + + + - - - - Reorder - - - - + + - - + + + +
+ + + + + + Item 1 + + - - - -
- - - - - - - Item 1 - - - + + + Item 2 + + - - - - Item 2 - - - + + + Item 3 + + - - - - Item 3 - - - + + + Item 4 + + - - - - Item 4 - - - + + + Item 5 + + + + +
+ + - - - - Item 5 - - - - - -
- - + - - - \ No newline at end of file + // 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 + detail.complete(); + }); + + + diff --git a/static/usage/v6/ripple-effect/basic/demo.html b/static/usage/v6/ripple-effect/basic/demo.html index fd593291421..ac5a5d3e912 100644 --- a/static/usage/v6/ripple-effect/basic/demo.html +++ b/static/usage/v6/ripple-effect/basic/demo.html @@ -1,82 +1,80 @@ - - - - - Ripple Effect - - - - - - - - - - - -
-
- Click on a shape to see the ripple - -
- -
- -
- -
- -
- + + + + Ripple Effect + + + + + + + + + + + +
+
+ Click on a shape to see the ripple + +
+ +
+ +
+ +
+ +
+ +
-
- - - - - \ No newline at end of file + + + + diff --git a/static/usage/v6/ripple-effect/customizing/demo.html b/static/usage/v6/ripple-effect/customizing/demo.html index 6ce7f376ed1..ffd5c634eb6 100644 --- a/static/usage/v6/ripple-effect/customizing/demo.html +++ b/static/usage/v6/ripple-effect/customizing/demo.html @@ -1,81 +1,79 @@ - - - - - Ripple Effect - - - - - - - - - - - -
-
- Click on a shape to see the ripple - -
- Custom Parent Color - -
- -
- Custom Ripple Color - + + + + Ripple Effect + + + + + + + + + + + +
+
+ Click on a shape to see the ripple + +
+ Custom Parent Color + +
+ +
+ Custom Ripple Color + +
-
- - - - - \ No newline at end of file + + + + diff --git a/static/usage/v6/ripple-effect/type/demo.html b/static/usage/v6/ripple-effect/type/demo.html index cfaa115fac9..8a47442c246 100644 --- a/static/usage/v6/ripple-effect/type/demo.html +++ b/static/usage/v6/ripple-effect/type/demo.html @@ -1,81 +1,79 @@ - - - - - Ripple Effect - - - - - - - - - - - -
-
- Click on a shape to see the ripple - -
- Bounded - -
- -
- Unbounded - + + + + Ripple Effect + + + + + + + + + + + +
+
+ Click on a shape to see the ripple + +
+ Bounded + +
+ +
+ Unbounded + +
-
- - - - - \ No newline at end of file + + + + diff --git a/static/usage/v6/router/basic/demo.html b/static/usage/v6/router/basic/demo.html index 9dac309e25c..854fc847f40 100644 --- a/static/usage/v6/router/basic/demo.html +++ b/static/usage/v6/router/basic/demo.html @@ -1,30 +1,28 @@ - - - - - Router - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - + customElements.define('page-one', PageOne); + customElements.define('page-two', PageTwo); + + + diff --git a/static/usage/v6/searchbar/basic/demo.html b/static/usage/v6/searchbar/basic/demo.html index e4d6f94b532..36d1f15846e 100644 --- a/static/usage/v6/searchbar/basic/demo.html +++ b/static/usage/v6/searchbar/basic/demo.html @@ -1,34 +1,32 @@ + + + + Searchbar + + + + - - - - Searchbar - - - - + + - - - - - - -
- - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v6/searchbar/cancel-button/demo.html b/static/usage/v6/searchbar/cancel-button/demo.html index ebfef12609b..81c5a841123 100644 --- a/static/usage/v6/searchbar/cancel-button/demo.html +++ b/static/usage/v6/searchbar/cancel-button/demo.html @@ -1,34 +1,36 @@ + + + + Searchbar + + + + - - - - Searchbar - - - - + + - - - - - - -
- - - - -
- - - - - \ No newline at end of file + + + +
+ + + + +
+ + + + diff --git a/static/usage/v6/searchbar/clear-button/demo.html b/static/usage/v6/searchbar/clear-button/demo.html index e85b497b349..1f8c62a5dac 100644 --- a/static/usage/v6/searchbar/clear-button/demo.html +++ b/static/usage/v6/searchbar/clear-button/demo.html @@ -1,33 +1,31 @@ + + + + Searchbar + + + + - - - - Searchbar - - - - + + - - - - - - -
- - - - -
- - - - - \ No newline at end of file + + + +
+ + + + +
+ + + + diff --git a/static/usage/v6/searchbar/debounce/demo.html b/static/usage/v6/searchbar/debounce/demo.html index ac43a663b20..2f400305d1f 100644 --- a/static/usage/v6/searchbar/debounce/demo.html +++ b/static/usage/v6/searchbar/debounce/demo.html @@ -1,64 +1,73 @@ + + + + Searchbar + + + + - - - - Searchbar - - - - + + - - - - - - -
- - -
- - - + + + +
+ + +
+ + + - - - \ No newline at end of file + list.innerHTML = items; + } + + diff --git a/static/usage/v6/searchbar/search-icon/demo.html b/static/usage/v6/searchbar/search-icon/demo.html index 33e2793d25d..b26d7833da2 100644 --- a/static/usage/v6/searchbar/search-icon/demo.html +++ b/static/usage/v6/searchbar/search-icon/demo.html @@ -1,31 +1,29 @@ + + + + Searchbar + + + + - - - - Searchbar - - - - + + - - - - - - -
- - -
- - - - - \ No newline at end of file + + + +
+ + +
+ + + + diff --git a/static/usage/v6/searchbar/theming/colors/demo.html b/static/usage/v6/searchbar/theming/colors/demo.html index 5701010c08b..ecda885f204 100644 --- a/static/usage/v6/searchbar/theming/colors/demo.html +++ b/static/usage/v6/searchbar/theming/colors/demo.html @@ -1,39 +1,37 @@ + + + + Searchbar + + + + - - - - Searchbar - - - - + + - - - - - - -
- - - - - - - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + + + + + + +
+ + + + diff --git a/static/usage/v6/searchbar/theming/css-properties/demo.html b/static/usage/v6/searchbar/theming/css-properties/demo.html index bd168970198..afb1a91f39b 100644 --- a/static/usage/v6/searchbar/theming/css-properties/demo.html +++ b/static/usage/v6/searchbar/theming/css-properties/demo.html @@ -1,48 +1,46 @@ - - - - - Searchbar - - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + + Searchbar + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v6/segment-button/basic/demo.html b/static/usage/v6/segment-button/basic/demo.html index 280022dbc91..e9f2c891df3 100644 --- a/static/usage/v6/segment-button/basic/demo.html +++ b/static/usage/v6/segment-button/basic/demo.html @@ -1,56 +1,54 @@ + + + + Segment Button + + + + - - - - Segment Button - - - - + + - max-width: 400px; - margin: 0 auto; - } - - + + + +
+ + + Default + + + Segment + + + Button + + - - - -
- - - Default - - - Segment - - - Button - - - - - - Disabled - - - Segment - - - Button - - -
- - - - - \ No newline at end of file + + + Disabled + + + Segment + + + Button + + +
+ + + + diff --git a/static/usage/v6/segment-button/layout/demo.html b/static/usage/v6/segment-button/layout/demo.html index 83bd89fd250..e82040f7388 100644 --- a/static/usage/v6/segment-button/layout/demo.html +++ b/static/usage/v6/segment-button/layout/demo.html @@ -1,104 +1,102 @@ + + + + Segment Button + + + + - - - - Segment Button - - - - + + - max-width: 400px; - margin: 0 auto; - } - - + + + +
+ + + + + + + + + + + - - - -
- - - - - - - - - - - + + + Call + + + + Heart + + + + Pin + + + - - - Call - - - - Heart - - - - Pin - - - + + + Call + + + + Heart + + + + Pin + + + - - - Call - - - - Heart - - - - Pin - - - + + + Call + + + + Heart + + + + Pin + + + - - - Call - - - - Heart - - - - Pin - - - - - - - Call - - - - Heart - - - - Pin - - - -
- - - - - \ No newline at end of file + + + Call + + + + Heart + + + + Pin + + + +
+ + + + diff --git a/static/usage/v6/segment-button/theming/css-properties/demo.html b/static/usage/v6/segment-button/theming/css-properties/demo.html index 144ecaa5639..122019c5f15 100644 --- a/static/usage/v6/segment-button/theming/css-properties/demo.html +++ b/static/usage/v6/segment-button/theming/css-properties/demo.html @@ -1,59 +1,57 @@ + + + + Segment Button + + + + - - - - Segment Button - - - - + + - /* iOS styles */ - ion-segment-button.ios { - --color: #08a391; - --color-checked: #fff; - --border-radius: 20px; - } - - - - - - -
- - - Custom - - - Segment - - - Buttons - - -
- - - - - \ No newline at end of file + + + +
+ + + Custom + + + Segment + + + Buttons + + +
+ + + + diff --git a/static/usage/v6/segment-button/theming/css-shadow-parts/demo.html b/static/usage/v6/segment-button/theming/css-shadow-parts/demo.html index c81886b5b20..f85d086806a 100644 --- a/static/usage/v6/segment-button/theming/css-shadow-parts/demo.html +++ b/static/usage/v6/segment-button/theming/css-shadow-parts/demo.html @@ -1,71 +1,69 @@ + + + + Segment Button + + + + - - - - Segment Button - - - - + + - ion-segment-button.ios::part(indicator-background) { - border-radius: 20px; - } - - - - - - -
- - - Custom - - - Segment - - - Buttons - - -
- - - - - \ No newline at end of file + + + +
+ + + Custom + + + Segment + + + Buttons + + +
+ + + + diff --git a/static/usage/v6/segment/basic/demo.html b/static/usage/v6/segment/basic/demo.html index 886c2aafef7..5d1e409dab5 100644 --- a/static/usage/v6/segment/basic/demo.html +++ b/static/usage/v6/segment/basic/demo.html @@ -1,50 +1,48 @@ + + + + Segment + + + + - - - - Segment - - - - + + - max-width: 400px; - margin: 0 auto; - } - - + + + +
+ + + Default + + + Segment + + - - - -
- - - Default - - - Segment - - - - - - Disabled - - - Segment - - -
- - - - - \ No newline at end of file + + + Disabled + + + Segment + + +
+ + + + diff --git a/static/usage/v6/segment/scrollable/demo.html b/static/usage/v6/segment/scrollable/demo.html index b8f90118667..00a52676811 100644 --- a/static/usage/v6/segment/scrollable/demo.html +++ b/static/usage/v6/segment/scrollable/demo.html @@ -1,66 +1,64 @@ + + + + Segment + + + + - - - - Segment - - - - + + - ion-segment { - width: 400px; - margin: 0 auto; - } - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v6/segment/theming/colors/demo.html b/static/usage/v6/segment/theming/colors/demo.html index 0f7579af2cd..a34f7ab872a 100644 --- a/static/usage/v6/segment/theming/colors/demo.html +++ b/static/usage/v6/segment/theming/colors/demo.html @@ -1,113 +1,111 @@ + + + + Segment + + + + - - - - Segment - - - - + + - max-width: 400px; - margin: 0 auto; - } - - - - - - -
- - - Default - - - Segment - - - - - Primary - - - Segment - - - - - Secondary - - - Segment - - - - - Tertiary - - - Segment - - - - - Success - - - Segment - - - - - Warning - - - Segment - - - - - Danger - - - Segment - - - - - Light - - - Segment - - - - - Medium - - - Segment - - - - - Dark - - - Segment - - -
- - - - - \ No newline at end of file + + + +
+ + + 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/v6/segment/theming/css-properties/demo.html b/static/usage/v6/segment/theming/css-properties/demo.html index d6d92fbd835..255b86bb513 100644 --- a/static/usage/v6/segment/theming/css-properties/demo.html +++ b/static/usage/v6/segment/theming/css-properties/demo.html @@ -1,42 +1,40 @@ + + + + Note + + + + - - - - Note - - - - + + - ion-segment { - --background: #54dc98; - } - - - - - - -
- - - Custom - - - Segment - - -
- - - - - \ No newline at end of file + + + +
+ + + Custom + + + Segment + + +
+ + + + diff --git a/static/usage/v6/select/basic/multiple-selection/demo.html b/static/usage/v6/select/basic/multiple-selection/demo.html index 9847cfa382b..1ff3a55787b 100644 --- a/static/usage/v6/select/basic/multiple-selection/demo.html +++ b/static/usage/v6/select/basic/multiple-selection/demo.html @@ -1,32 +1,30 @@ + + + + Select - Multiple Selection + + + + + - - - - Select - Multiple Selection - - - - - - - - - -
- - - - Apples - Oranges - Bananas - - - -
- - - - - \ No newline at end of file + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v6/select/basic/responding-to-interaction/demo.html b/static/usage/v6/select/basic/responding-to-interaction/demo.html index dbea5d3b8df..0048a85754b 100644 --- a/static/usage/v6/select/basic/responding-to-interaction/demo.html +++ b/static/usage/v6/select/basic/responding-to-interaction/demo.html @@ -1,62 +1,60 @@ - - - - - Select - Responding to Interaction - - - - - - - - - - - -
-
- - - - Apples - Oranges - Bananas - - - - -
+ + + + Select - Responding to Interaction + + + + + + + + + + + +
+
+ + + + Apples + Oranges + Bananas + + + + +
+
-
- - - - - - - \ No newline at end of file + + + + + + diff --git a/static/usage/v6/select/basic/single-selection/demo.html b/static/usage/v6/select/basic/single-selection/demo.html index a8fb4f13e0a..65ad76e7c64 100644 --- a/static/usage/v6/select/basic/single-selection/demo.html +++ b/static/usage/v6/select/basic/single-selection/demo.html @@ -1,32 +1,30 @@ + + + + Select - Single Selection + + + + + - - - - Select - Single Selection - - - - - - - - - -
- - - - Apples - Oranges - Bananas - - - -
- - - - - \ No newline at end of file + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v6/select/customization/button-text/demo.html b/static/usage/v6/select/customization/button-text/demo.html index 1eb72b8dda5..e0d20a63b47 100644 --- a/static/usage/v6/select/customization/button-text/demo.html +++ b/static/usage/v6/select/customization/button-text/demo.html @@ -1,41 +1,39 @@ + + + + Select - Button Text + + + + + - - - - Select - Button Text - - - - - - - - - -
- - - Alert Interface - - Apples - Oranges - Bananas - - - - Action Sheet Interface - - Apples - Oranges - Bananas - - - -
- - - - - \ No newline at end of file + + + +
+ + + Alert Interface + + Apples + Oranges + Bananas + + + + Action Sheet Interface + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v6/select/customization/interface-options/demo.html b/static/usage/v6/select/customization/interface-options/demo.html index 8cff7c7bbf0..66dc0547561 100644 --- a/static/usage/v6/select/customization/interface-options/demo.html +++ b/static/usage/v6/select/customization/interface-options/demo.html @@ -1,83 +1,81 @@ + + + + Select - Interface Options + + + + - - - - Select - Interface Options - - - - + + - - + + + +
+ + + Alert + + Bacon + Onions + Pepperoni + + - - - -
- - - Alert - - Bacon - Onions - Pepperoni - - + + Popover + + Brown + Blonde + Red + + - - Popover - - Brown - Blonde - Red - - + + Action Sheet + + Red + Green + Blue + + + +
+ + - - Action Sheet - - Red - Green - Blue - - - -
- - + - - - \ No newline at end of file + const customActionSheetSelect = document.getElementById('customActionSheetSelect'); + const customActionSheetOptions = { + header: 'Colors', + subHeader: 'Select your favorite color', + }; + customActionSheetSelect.interfaceOptions = customActionSheetOptions; + + + diff --git a/static/usage/v6/select/customization/styling-select/demo.html b/static/usage/v6/select/customization/styling-select/demo.html index 429beab68c4..8c72865f576 100644 --- a/static/usage/v6/select/customization/styling-select/demo.html +++ b/static/usage/v6/select/customization/styling-select/demo.html @@ -1,60 +1,58 @@ - - - - - Select - Styling the Select - - - - - - - - - - - -
- - - - Apples - Oranges - Bananas - - - -
- - - - - \ No newline at end of file + + + + Select - Styling the Select + + + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v6/select/interfaces/action-sheet/demo.html b/static/usage/v6/select/interfaces/action-sheet/demo.html index bd1dd427e85..e0320dab055 100644 --- a/static/usage/v6/select/interfaces/action-sheet/demo.html +++ b/static/usage/v6/select/interfaces/action-sheet/demo.html @@ -1,32 +1,30 @@ + + + + Select - Action Sheet + + + + + - - - - Select - Action Sheet - - - - - - - - - -
- - - - Apples - Oranges - Bananas - - - -
- - - - - \ No newline at end of file + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v6/select/interfaces/popover/demo.html b/static/usage/v6/select/interfaces/popover/demo.html index 9656b8e303d..141d5954bf7 100644 --- a/static/usage/v6/select/interfaces/popover/demo.html +++ b/static/usage/v6/select/interfaces/popover/demo.html @@ -1,32 +1,30 @@ + + + + Select - Popover + + + + + - - - - Select - Popover - - - - - - - - - -
- - - - Apples - Oranges - Bananas - - - -
- - - - - \ No newline at end of file + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v6/select/objects-as-values/multiple-selection/demo.html b/static/usage/v6/select/objects-as-values/multiple-selection/demo.html index 2c3dc70038b..cc56e47e440 100644 --- a/static/usage/v6/select/objects-as-values/multiple-selection/demo.html +++ b/static/usage/v6/select/objects-as-values/multiple-selection/demo.html @@ -1,91 +1,89 @@ + + + + Select - Object Values and Multiple Selection + + + + - - - - Select - Object Values and Multiple Selection - - - - - - - - - - - -
- - - - - - - Current value: - - - - -
- - - - - + foods.forEach((option, i) => { + const selectOption = document.createElement('ion-select-option'); + selectOption.value = option; + selectOption.textContent = option.name; + selectEl.appendChild(selectOption); + }); - \ No newline at end of file + const valueLabel = document.querySelector('ion-text'); + selectEl.addEventListener('ionChange', () => { + valueLabel.innerHTML = JSON.stringify(selectEl.value); + }); + + + diff --git a/static/usage/v6/select/objects-as-values/using-comparewith/demo.html b/static/usage/v6/select/objects-as-values/using-comparewith/demo.html index ca59d32afb2..6945ee6f708 100644 --- a/static/usage/v6/select/objects-as-values/using-comparewith/demo.html +++ b/static/usage/v6/select/objects-as-values/using-comparewith/demo.html @@ -1,79 +1,77 @@ + + + + Select - Using compareWith + + + + - - - - Select - Using compareWith - - - - - - - - - - - -
- - - - - - - Current value: - - - - -
- - - - - + foods.forEach((option, i) => { + const selectOption = document.createElement('ion-select-option'); + selectOption.value = option; + selectOption.textContent = option.name; + selectEl.appendChild(selectOption); + }); - \ No newline at end of file + const valueLabel = document.querySelector('ion-text'); + selectEl.addEventListener('ionChange', () => { + valueLabel.innerHTML = JSON.stringify(selectEl.value); + }); + + + diff --git a/static/usage/v6/select/typeahead/demo.html b/static/usage/v6/select/typeahead/demo.html index f4687ec9959..69fe01982c4 100644 --- a/static/usage/v6/select/typeahead/demo.html +++ b/static/usage/v6/select/typeahead/demo.html @@ -39,8 +39,7 @@ - - + @@ -75,7 +74,7 @@ { text: 'Pineapple', value: 'pineapple' }, { text: 'Pomegranate', value: 'pomegranate' }, { text: 'Raspberry', value: 'raspberry' }, - { text: 'Strawberry', value: 'strawberry' } + { text: 'Strawberry', value: 'strawberry' }, ]; /** @@ -108,8 +107,8 @@ const normalizedQuery = searchQuery.toLowerCase(); - return fruits.filter(fruit => fruit.text.toLowerCase().includes(normalizedQuery)); - } + return fruits.filter((fruit) => fruit.text.toLowerCase().includes(normalizedQuery)); + }; /** * Render a filtered list of fruits @@ -127,11 +126,11 @@ ${item.text} - ` + `; }); list.innerHTML = template; - } + }; /** * Formats the selected fruits in @@ -143,12 +142,12 @@ */ const formatData = (data) => { if (data.length === 1) { - const fruit = fruits.find(fruit => fruit.value === data[0]) + const fruit = fruits.find((fruit) => fruit.value === data[0]); return fruit.text; } return `${data.length} items`; - } + }; /** * Reset any working changes @@ -157,7 +156,7 @@ const cancelChanges = () => { workingSelectedFruits = [...selectedFruits]; modal.dismiss(undefined, 'cancel'); - } + }; /** * Return the selected @@ -165,22 +164,21 @@ */ const confirmChanges = () => { selectedFruits = [...workingSelectedFruits]; - modal.dismiss(selectedFruits) + modal.dismiss(selectedFruits); }; // Listen for all ionChange events from the checkbox modal.addEventListener('ionChange', (ev) => { - if (ev.target.tagName !== 'ION-CHECKBOX') { return; } + if (ev.target.tagName !== 'ION-CHECKBOX') { + return; + } const { checked, value } = ev.detail; if (checked) { - workingSelectedFruits = [ - ...workingSelectedFruits, - value - ] + workingSelectedFruits = [...workingSelectedFruits, value]; } else { - workingSelectedFruits = workingSelectedFruits.filter(fruit => fruit !== value); + workingSelectedFruits = workingSelectedFruits.filter((fruit) => fruit !== value); } }); diff --git a/static/usage/v6/skeleton-text/basic/demo.html b/static/usage/v6/skeleton-text/basic/demo.html index a1cbc3f4f12..e67e173e15f 100644 --- a/static/usage/v6/skeleton-text/basic/demo.html +++ b/static/usage/v6/skeleton-text/basic/demo.html @@ -1,51 +1,50 @@ + + + + Accordion + + + + - - - - Accordion - - - - - - - + .container { + flex-direction: column; + } + + - - - -
-
- Toggle -
- - + + + +
+
+ Toggle +
+ + - - + }; - \ No newline at end of file + setSkeletonText(); + + + diff --git a/static/usage/v6/skeleton-text/theming/css-properties/demo.html b/static/usage/v6/skeleton-text/theming/css-properties/demo.html index 6a84c2b7943..c78f798b396 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/demo.html +++ b/static/usage/v6/skeleton-text/theming/css-properties/demo.html @@ -1,60 +1,58 @@ + + + + Accordion + + + + - - - - Accordion - - - - + + - ion-skeleton-text { - --border-radius: 9999px; - --background: rgba(188, 0, 255, 0.065); - --background-rgb: 188, 0, 255; - } - - - - - - -
- - - - - - - - - -

- -

-

- -

-

- -

- - - -
- - - - - \ No newline at end of file + + + +
+ + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + +
+ + + + diff --git a/static/usage/v6/spinner/basic/demo.html b/static/usage/v6/spinner/basic/demo.html index cf495c8bd07..525a6219143 100644 --- a/static/usage/v6/spinner/basic/demo.html +++ b/static/usage/v6/spinner/basic/demo.html @@ -1,79 +1,77 @@ + + + + Spinner + + + + - - - - Spinner - - - - + + - - + + + +
+ + Default + + - - - -
- - Default - - + + Dots + + - - Dots - - + + Lines + + - - Lines - - + + Lines Small + + - - Lines Small - - + + Lines Sharp + + - - Lines Sharp - - + + Lines Sharp Small + + - - Lines Sharp Small - - + + Bubbles + + - - Bubbles - - + + Circles + + - - Circles - - + + Circular + + - - Circular - - - - - Crescent - - -
- - - - - \ No newline at end of file + + Crescent + + +
+ + + + diff --git a/static/usage/v6/spinner/theming/colors/demo.html b/static/usage/v6/spinner/theming/colors/demo.html index 387a56e38d4..02842144ff9 100644 --- a/static/usage/v6/spinner/theming/colors/demo.html +++ b/static/usage/v6/spinner/theming/colors/demo.html @@ -1,33 +1,31 @@ + + + + Spinner + + + + + - - - - Spinner - - - - - - - - - -
- - - - - - - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + + + + + + +
+ + + + diff --git a/static/usage/v6/spinner/theming/css-properties/demo.html b/static/usage/v6/spinner/theming/css-properties/demo.html index 6c369bd71fd..2b1c205f158 100644 --- a/static/usage/v6/spinner/theming/css-properties/demo.html +++ b/static/usage/v6/spinner/theming/css-properties/demo.html @@ -1,30 +1,28 @@ + + + + Spinner + + + + - - - - Spinner - - - - + + - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/split-pane/basic/demo.html b/static/usage/v6/split-pane/basic/demo.html index c514ebd1dbc..7570fe2438f 100644 --- a/static/usage/v6/split-pane/basic/demo.html +++ b/static/usage/v6/split-pane/basic/demo.html @@ -1,42 +1,36 @@ + + + + Spinner + + + + + - - - - Spinner - - - - - + + + + + + + Menu + + + Menu Content + - - - - - - - Menu - - - - Menu Content - - - -
- - - Main View - - - - Main View Content - -
- - - - - \ No newline at end of file +
+ + + Main View + + + Main View Content +
+ + + + diff --git a/static/usage/v6/split-pane/theming/css-properties/demo.html b/static/usage/v6/split-pane/theming/css-properties/demo.html index 83353796a32..1ca55348094 100644 --- a/static/usage/v6/split-pane/theming/css-properties/demo.html +++ b/static/usage/v6/split-pane/theming/css-properties/demo.html @@ -1,50 +1,44 @@ + + + + Spinner + + + + + + - --border: 1px dashed #b3baff; - } - - + + + + + + + Menu + + + Menu Content is 350px wide and has a blue dashed border + - - - - - - - Menu - - - - Menu Content is 350px wide and has a blue dashed border - - - -
- - - Main View - - - - Main View Content - -
- - - - - \ No newline at end of file +
+ + + Main View + + + Main View Content +
+ + + + diff --git a/static/usage/v6/tabs/router/demo.html b/static/usage/v6/tabs/router/demo.html index 335bdccc86f..f7f5a4ad1a2 100644 --- a/static/usage/v6/tabs/router/demo.html +++ b/static/usage/v6/tabs/router/demo.html @@ -1,125 +1,114 @@ + + + + Tabs + + + + + + - - - - Tabs - - - - - - + + + + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + + +
+ + + Radio + + + +
Radio content
+ +
+ + + +
+ + + Library + + + +
Library content
+ +
+ + + +
+ + + Search + + + +
Search content
+ +
+ + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + + - + const libraryNav = document.querySelector('#library-nav'); + const libraryPage = document.querySelector('#library-page'); + libraryNav.root = libraryPage; + const searchNav = document.querySelector('#search-nav'); + const searchPage = document.querySelector('#search-page'); + searchNav.root = searchPage; + + diff --git a/static/usage/v6/text/basic/demo.html b/static/usage/v6/text/basic/demo.html index 7dda6c901cb..18f08b30027 100644 --- a/static/usage/v6/text/basic/demo.html +++ b/static/usage/v6/text/basic/demo.html @@ -1,61 +1,59 @@ + + + + Text + + + + + + + + + + + +
+ +

H1: The quick brown fox jumps over the lazy dog

+ - - - - 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

- + +

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. -

-
- - - - \ No newline at end of file +

+ + + + 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/v6/textarea/autogrow/demo.html b/static/usage/v6/textarea/autogrow/demo.html index 07434619b22..c46003317cd 100644 --- a/static/usage/v6/textarea/autogrow/demo.html +++ b/static/usage/v6/textarea/autogrow/demo.html @@ -1,38 +1,39 @@ + + + + Textarea - Autogrow + + + + - - - - Textarea - Autogrow - - - - + + - ion-item { - width: 100%; - } - - - - - - -
- - - - -
- - - - - \ No newline at end of file + + + +
+ + + + +
+ + + + diff --git a/static/usage/v6/textarea/basic/demo.html b/static/usage/v6/textarea/basic/demo.html index 54d2bee2efb..d907b75af9d 100644 --- a/static/usage/v6/textarea/basic/demo.html +++ b/static/usage/v6/textarea/basic/demo.html @@ -1,43 +1,41 @@ + + + + Textarea - Basic Usage + + + + - - - - Textarea - Basic Usage - - - - + + - - - - - - -
- - - Regular textarea - - - - Readonly textarea - - - - Disabled textarea - - - -
- - - - - \ No newline at end of file + + + +
+ + + Regular textarea + + + + Readonly textarea + + + + Disabled textarea + + + +
+ + + + diff --git a/static/usage/v6/textarea/clear-on-edit/demo.html b/static/usage/v6/textarea/clear-on-edit/demo.html index 253bc7a2bc9..f4d6b0a0fb9 100644 --- a/static/usage/v6/textarea/clear-on-edit/demo.html +++ b/static/usage/v6/textarea/clear-on-edit/demo.html @@ -1,31 +1,29 @@ + + + + Textarea - Clear on Edit + + + + - - - - Textarea - Clear on Edit - - - - + + - - - - - - -
- - -
- - - - - \ No newline at end of file + + + +
+ + +
+ + + + diff --git a/static/usage/v6/textarea/theming/demo.html b/static/usage/v6/textarea/theming/demo.html index 556000b9591..9b5e49da5fa 100644 --- a/static/usage/v6/textarea/theming/demo.html +++ b/static/usage/v6/textarea/theming/demo.html @@ -1,38 +1,36 @@ + + + + Textarea - Theming + + + + + + - ion-textarea.custom-textarea { - --background: #373737; - --color: #fff; - --padding-end: 10px; - --padding-start: 10px; - --placeholder-color: #ddd; - --placeholder-opacity: 0.8; - } - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/thumbnail/basic/demo.html b/static/usage/v6/thumbnail/basic/demo.html index e3aabdff4c2..b5c546b048b 100644 --- a/static/usage/v6/thumbnail/basic/demo.html +++ b/static/usage/v6/thumbnail/basic/demo.html @@ -1,27 +1,24 @@ + + + + Thumbnail + + + + + - - - - Thumbnail - - - - - - - - - - -
- - Silhouette of mountains - -
- - - - - \ No newline at end of file + + + +
+ + Silhouette of mountains + +
+ + + + diff --git a/static/usage/v6/thumbnail/item/demo.html b/static/usage/v6/thumbnail/item/demo.html index 3e8c739fd73..5b23bccdf46 100644 --- a/static/usage/v6/thumbnail/item/demo.html +++ b/static/usage/v6/thumbnail/item/demo.html @@ -1,30 +1,27 @@ + + + + Thumbnail + + + + + - - - - Thumbnail - - - - - - - - - - -
- - - Silhouette of mountains - - Item Thumbnail - -
- - - - - \ No newline at end of file + + + +
+ + + Silhouette of mountains + + Item Thumbnail + +
+ + + + diff --git a/static/usage/v6/thumbnail/theming/css-properties/demo.html b/static/usage/v6/thumbnail/theming/css-properties/demo.html index 1abdceda339..0378c8c20b4 100644 --- a/static/usage/v6/thumbnail/theming/css-properties/demo.html +++ b/static/usage/v6/thumbnail/theming/css-properties/demo.html @@ -1,33 +1,31 @@ + + + + Thumbnail + + + + - - - - Thumbnail - - - - + + - - - - - - -
- - Silhouette of mountains - -
- - - - - \ No newline at end of file + + + +
+ + Silhouette of mountains + +
+ + + + diff --git a/static/usage/v6/title/basic/demo.html b/static/usage/v6/title/basic/demo.html index 13b1b317ce0..4999c7d9988 100644 --- a/static/usage/v6/title/basic/demo.html +++ b/static/usage/v6/title/basic/demo.html @@ -1,25 +1,22 @@ + + + + Title + + + + + - - - - Title - - - - - - - - - - - - Title - - - - - - \ No newline at end of file + + + + + Title + + + + + diff --git a/static/usage/v6/title/collapsible-large-title/basic/demo.html b/static/usage/v6/title/collapsible-large-title/basic/demo.html index e67c7bd3a33..9cc86ca76e6 100644 --- a/static/usage/v6/title/collapsible-large-title/basic/demo.html +++ b/static/usage/v6/title/collapsible-large-title/basic/demo.html @@ -1,59 +1,54 @@ + + + + Title + + + + + - - - - Title - - - - - - - - - - - - Title - - - - + + + - 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 - - - - +
Scroll the list to see the title collapse.
- \ No newline at end of file + + 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/v6/title/collapsible-large-title/buttons/demo.html b/static/usage/v6/title/collapsible-large-title/buttons/demo.html index ecf88cf5305..dda08d3edd2 100644 --- a/static/usage/v6/title/collapsible-large-title/buttons/demo.html +++ b/static/usage/v6/title/collapsible-large-title/buttons/demo.html @@ -1,65 +1,60 @@ + + + + Title + + + + + - - - - Title - - - - - - - - - - - - Title - - Button - - - - - + + + - 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 - - - - +
Scroll the list to see the title & buttons collapse.
- \ No newline at end of file + + 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/v6/title/theming/css-properties/demo.html b/static/usage/v6/title/theming/css-properties/demo.html index 202131c46ac..f052d4d78be 100644 --- a/static/usage/v6/title/theming/css-properties/demo.html +++ b/static/usage/v6/title/theming/css-properties/demo.html @@ -1,69 +1,67 @@ + + + + Title + + + + - - - - Title - - - - + + - ion-toolbar { - --background: #C897D8; - } - - - - - - - - Title - - - - + + + - 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 - - - - - - \ No newline at end of file + + 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/v6/toast/buttons/demo.html b/static/usage/v6/toast/buttons/demo.html index 261a6e53cc7..92be4be89de 100644 --- a/static/usage/v6/toast/buttons/demo.html +++ b/static/usage/v6/toast/buttons/demo.html @@ -1,75 +1,77 @@ + + + + Toast + + + + - - - - Toast - - - - + + - .container p { - margin-bottom: 0; - } - - + + + + + Toast + + + +
+ Click Me +

+

+
+ + - - - - - Toast - - - -
- Click Me -

-

-
- - + - + - - - \ No newline at end of file + const { role } = await toast.onDidDismiss(); + roleOutput.innerText = `Dismissed with role: ${role}`; + } + + + diff --git a/static/usage/v6/toast/icon/demo.html b/static/usage/v6/toast/icon/demo.html index efecadbf937..4e948a33fb5 100644 --- a/static/usage/v6/toast/icon/demo.html +++ b/static/usage/v6/toast/icon/demo.html @@ -1,46 +1,44 @@ + + + + Toast + + + + + - - - - Toast - - - - - + + + + + Toast + + + +
+ Click Me +
+ + - - - - - Toast - - - -
- Click Me -
- - + - + - - - \ No newline at end of file + await toast.present(); + } + + + diff --git a/static/usage/v6/toast/layout/demo.html b/static/usage/v6/toast/layout/demo.html index 79942ae2484..6a9c9deeabb 100644 --- a/static/usage/v6/toast/layout/demo.html +++ b/static/usage/v6/toast/layout/demo.html @@ -1,62 +1,56 @@ - - - - - Toast - - - - - - - - - - - Toast - - - - Open Baseline Layout Toast - Click Stacked Layout Toast - - - - - - - - + + + + Toast + + + + + + + + + + + Toast + + + + Open Baseline Layout Toast + Click Stacked Layout Toast + + + + + + + diff --git a/static/usage/v6/toast/presenting/controller/demo.html b/static/usage/v6/toast/presenting/controller/demo.html index 24cc1fcb8d0..dee337f7eb2 100644 --- a/static/usage/v6/toast/presenting/controller/demo.html +++ b/static/usage/v6/toast/presenting/controller/demo.html @@ -1,54 +1,52 @@ + + + + Toast + + + + - - - - Toast - - - - + + - - + + + + + Toast + + + +
+ Present Toast At the Top + Present Toast At the Middle + Present Toast At the Bottom +
+ + - - - - - Toast - - - -
- Present Toast At the Top - Present Toast At the Middle - Present Toast At the Bottom -
- - + - + - - - \ No newline at end of file + await toast.present(); + } + + + diff --git a/static/usage/v6/toast/theming/demo.html b/static/usage/v6/toast/theming/demo.html index cdbffb5541c..91107733a35 100644 --- a/static/usage/v6/toast/theming/demo.html +++ b/static/usage/v6/toast/theming/demo.html @@ -1,70 +1,68 @@ + + + + Toast + + + + - - - - Toast - - - - + + - ion-toast.custom-toast::part(button) { - border-left: 1px solid #d2d2d2; - color: #030207; - font-size: 15px; - } - - + + + + + Toast + + + +
+ Click Me +
+ + - - - - - Toast - - - -
- Click Me -
- - + - + - - - \ No newline at end of file + await toast.present(); + } + + + diff --git a/static/usage/v6/toggle/basic/demo.html b/static/usage/v6/toggle/basic/demo.html index 5e45931c3b4..ddbaf236ce1 100644 --- a/static/usage/v6/toggle/basic/demo.html +++ b/static/usage/v6/toggle/basic/demo.html @@ -1,47 +1,45 @@ + + + + Toggle + + + + - - - - Toggle - - - - + + - - - - - - -
- - - Default Toggle - - - - Checked Toggle - - - - Disabled Toggle - - - - Disabled Checked Toggle - - - -
- - - - - \ No newline at end of file + + + +
+ + + Default Toggle + + + + Checked Toggle + + + + Disabled Toggle + + + + Disabled Checked Toggle + + + +
+ + + + diff --git a/static/usage/v6/toggle/on-off/demo.html b/static/usage/v6/toggle/on-off/demo.html index 7622a018101..fbcb571db11 100644 --- a/static/usage/v6/toggle/on-off/demo.html +++ b/static/usage/v6/toggle/on-off/demo.html @@ -1,25 +1,22 @@ + + + + Toggle + + + + + - - - - Toggle - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v6/toggle/theming/colors/demo.html b/static/usage/v6/toggle/theming/colors/demo.html index e2e115e84bf..93206a1b375 100644 --- a/static/usage/v6/toggle/theming/colors/demo.html +++ b/static/usage/v6/toggle/theming/colors/demo.html @@ -1,33 +1,30 @@ + + + + Toggle + + + + + - - - - Toggle - - - - - - - - - - -
- - - - - - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + + + + + +
+ + + + diff --git a/static/usage/v6/toggle/theming/css-properties/demo.html b/static/usage/v6/toggle/theming/css-properties/demo.html index b357ff59b4a..7adc3c3ba7f 100644 --- a/static/usage/v6/toggle/theming/css-properties/demo.html +++ b/static/usage/v6/toggle/theming/css-properties/demo.html @@ -1,52 +1,50 @@ - - - - - Item - - - - - - - - - - - -
- - -
- - - - - \ No newline at end of file + + + + Item + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v6/toggle/theming/css-shadow-parts/demo.html b/static/usage/v6/toggle/theming/css-shadow-parts/demo.html index 5647327547a..f895b6cb9c4 100644 --- a/static/usage/v6/toggle/theming/css-shadow-parts/demo.html +++ b/static/usage/v6/toggle/theming/css-shadow-parts/demo.html @@ -1,59 +1,57 @@ - - - - - Item - - - - - - - - - - - -
- - -
- - - - - \ No newline at end of file + + + + Item + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v6/toolbar/basic/demo.html b/static/usage/v6/toolbar/basic/demo.html index bc598f63d22..8cf6d25b75a 100644 --- a/static/usage/v6/toolbar/basic/demo.html +++ b/static/usage/v6/toolbar/basic/demo.html @@ -1,31 +1,28 @@ + + + + Toolbar + + + + + - - - - Toolbar - - - - + + + + + Header Toolbar + + - - - - - - - Header Toolbar - - - - - - Footer Toolbar - - - - - - \ No newline at end of file + + + Footer Toolbar + + + + + diff --git a/static/usage/v6/toolbar/buttons/demo.html b/static/usage/v6/toolbar/buttons/demo.html index 55941b2c348..d187ed5712e 100644 --- a/static/usage/v6/toolbar/buttons/demo.html +++ b/static/usage/v6/toolbar/buttons/demo.html @@ -1,120 +1,110 @@ + + + + Toolbar + + + + - - - - Toolbar - - - - + + - - + + + +
+ + + Start + + Start / End Buttons + + End + + - - - -
- - - - Start - - - Start / End Buttons - - - End - - - + + + Secondary + + + Primary + + Primary / Secondary Buttons + - - - - Secondary - - - - - Primary - - - Primary / Secondary Buttons - + + + + + + + + + + + + + + + Icon Buttons + - - - - - - - - - - - - - - - Icon Buttons - + + + + + Contact + + + + + Help + + + + Solid Buttons + - - - - - Contact - - - - - Help - - - - Solid Buttons - + + + + + Star + + + + + Edit + + + + Outline Buttons + - - - - - Star - - - - - Edit - - - - Outline Buttons - + + + + + Back Button + - - - - - Back Button - - - - - - - Menu Button - -
- - - - - \ No newline at end of file + + + + + Menu Button + +
+ + + + diff --git a/static/usage/v6/toolbar/progress-bars/demo.html b/static/usage/v6/toolbar/progress-bars/demo.html index 58ddadffe72..c3607e6da3e 100644 --- a/static/usage/v6/toolbar/progress-bars/demo.html +++ b/static/usage/v6/toolbar/progress-bars/demo.html @@ -1,26 +1,23 @@ + + + + Toolbar + + + + + - - - - Toolbar - - - - - - - - - - - - Toolbar - - - - - - - \ No newline at end of file + + + + + Toolbar + + + + + + diff --git a/static/usage/v6/toolbar/searchbars/demo.html b/static/usage/v6/toolbar/searchbars/demo.html index a75cf4e6483..23fd2b5de5f 100644 --- a/static/usage/v6/toolbar/searchbars/demo.html +++ b/static/usage/v6/toolbar/searchbars/demo.html @@ -1,28 +1,25 @@ + + + + Toolbar + + + + + - - - - Toolbar - - - - - - - - - - - - Toolbar - - - - - - - - - \ No newline at end of file + + + + + Toolbar + + + + + + + + diff --git a/static/usage/v6/toolbar/segments/demo.html b/static/usage/v6/toolbar/segments/demo.html index 42452b90dd8..25127af9034 100644 --- a/static/usage/v6/toolbar/segments/demo.html +++ b/static/usage/v6/toolbar/segments/demo.html @@ -1,32 +1,29 @@ + + + + Toolbar + + + + + - - - - Toolbar - - - - - - - - - - - - - - All - - - Favorites - - - - - - - + + + + + + + All + + + Favorites + + + + + + diff --git a/static/usage/v6/toolbar/theming/colors/demo.html b/static/usage/v6/toolbar/theming/colors/demo.html index f8c44dcd8e2..a9f150d69bf 100644 --- a/static/usage/v6/toolbar/theming/colors/demo.html +++ b/static/usage/v6/toolbar/theming/colors/demo.html @@ -1,60 +1,58 @@ + + + + Toolbar + + + + - - - - Toolbar - - - - + + - - - - - - -
- - Default Toolbar - - - Primary Toolbar - - - Secondary Toolbar - - - Tertiary Toolbar - - - Success Toolbar - - - Warning Toolbar - - - Danger Toolbar - - - Light Toolbar - - - Medium Toolbar - - - Dark Toolbar - -
- - - - - \ No newline at end of file + + + +
+ + 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/v6/toolbar/theming/css-properties/demo.html b/static/usage/v6/toolbar/theming/css-properties/demo.html index dca3fea437d..bca64c552c5 100644 --- a/static/usage/v6/toolbar/theming/css-properties/demo.html +++ b/static/usage/v6/toolbar/theming/css-properties/demo.html @@ -1,46 +1,44 @@ + + + + Toolbar + + + + - - - - Toolbar - - - - + + - --min-height: 80px; - --padding-top: 20px; - --padding-bottom: 20px; - } - - - - - - -
- - Custom Toolbar - -
- - - - - \ No newline at end of file + + + +
+ + Custom Toolbar + +
+ + + + diff --git a/static/usage/v7/accordion/accessibility/animations/demo.html b/static/usage/v7/accordion/accessibility/animations/demo.html index 3fdee04e4f7..f673b7d612c 100644 --- a/static/usage/v7/accordion/accessibility/animations/demo.html +++ b/static/usage/v7/accordion/accessibility/animations/demo.html @@ -1,49 +1,41 @@ + + + + Button + + + + + - - - - Button - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v7/accordion/basic/demo.html b/static/usage/v7/accordion/basic/demo.html index 6ccc994401f..43711d45154 100644 --- a/static/usage/v7/accordion/basic/demo.html +++ b/static/usage/v7/accordion/basic/demo.html @@ -1,49 +1,41 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html b/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html index 8a56e9557f2..edb47cd351c 100644 --- a/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html +++ b/static/usage/v7/accordion/customization/advanced-expansion-styles/demo.html @@ -1,82 +1,74 @@ + + + + Accordion + + + + + + - ion-accordion-group { - width: 100%; - } - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v7/accordion/customization/expansion-styles/demo.html b/static/usage/v7/accordion/customization/expansion-styles/demo.html index 77756cc378e..ab718655e37 100644 --- a/static/usage/v7/accordion/customization/expansion-styles/demo.html +++ b/static/usage/v7/accordion/customization/expansion-styles/demo.html @@ -1,49 +1,41 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v7/accordion/customization/icons/demo.html b/static/usage/v7/accordion/customization/icons/demo.html index 38d70177e4d..9a0efd0b91b 100644 --- a/static/usage/v7/accordion/customization/icons/demo.html +++ b/static/usage/v7/accordion/customization/icons/demo.html @@ -1,49 +1,41 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v7/accordion/customization/theming/demo.html b/static/usage/v7/accordion/customization/theming/demo.html index 0a520db4e1d..1a28d63724f 100644 --- a/static/usage/v7/accordion/customization/theming/demo.html +++ b/static/usage/v7/accordion/customization/theming/demo.html @@ -1,72 +1,64 @@ + + + + Accordion + + + + + + - div[slot="content"] { - background: rgba(var(--ion-color-rose-rgb), 0.25) - } - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v7/accordion/disable-group/demo.html b/static/usage/v7/accordion/disable-group/demo.html index 245af23f3fd..76ac5f87d28 100644 --- a/static/usage/v7/accordion/disable-group/demo.html +++ b/static/usage/v7/accordion/disable-group/demo.html @@ -1,49 +1,41 @@ + + + + Button + + + + + - - - - Button - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v7/accordion/disable/group/demo.html b/static/usage/v7/accordion/disable/group/demo.html index b5331cef469..778e4488787 100644 --- a/static/usage/v7/accordion/disable/group/demo.html +++ b/static/usage/v7/accordion/disable/group/demo.html @@ -1,49 +1,41 @@ + + + + Button + + + + + - - - - Button - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v7/accordion/disable/individual/demo.html b/static/usage/v7/accordion/disable/individual/demo.html index b7446872d54..67ee3bf4dea 100644 --- a/static/usage/v7/accordion/disable/individual/demo.html +++ b/static/usage/v7/accordion/disable/individual/demo.html @@ -1,49 +1,41 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion (Disabled) - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion (Disabled) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v7/accordion/listen-changes/demo.html b/static/usage/v7/accordion/listen-changes/demo.html index dd5269e0834..bbf4c5bfcab 100644 --- a/static/usage/v7/accordion/listen-changes/demo.html +++ b/static/usage/v7/accordion/listen-changes/demo.html @@ -1,73 +1,64 @@ + + + + Accordion + + + + + + - - - - Accordion - - - - - - + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - +

+
+ + -

-

-
- - + - - - \ No newline at end of file + `; + }); + + + diff --git a/static/usage/v7/accordion/multiple/demo.html b/static/usage/v7/accordion/multiple/demo.html index 01068461446..b2c4b51c543 100644 --- a/static/usage/v7/accordion/multiple/demo.html +++ b/static/usage/v7/accordion/multiple/demo.html @@ -1,54 +1,46 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v7/accordion/readonly/group/demo.html b/static/usage/v7/accordion/readonly/group/demo.html index 3ddabf35042..4a6fa971834 100644 --- a/static/usage/v7/accordion/readonly/group/demo.html +++ b/static/usage/v7/accordion/readonly/group/demo.html @@ -1,49 +1,41 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v7/accordion/readonly/individual/demo.html b/static/usage/v7/accordion/readonly/individual/demo.html index d8adf8fa10c..9e3dee651cd 100644 --- a/static/usage/v7/accordion/readonly/individual/demo.html +++ b/static/usage/v7/accordion/readonly/individual/demo.html @@ -1,49 +1,41 @@ + + + + Accordion + + + + + - - - - Accordion - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion (Readonly) - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - -
- - - - - \ No newline at end of file + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion (Readonly) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v7/accordion/toggle/demo.html b/static/usage/v7/accordion/toggle/demo.html index d58cf36bcfd..c72ea7b6dfe 100644 --- a/static/usage/v7/accordion/toggle/demo.html +++ b/static/usage/v7/accordion/toggle/demo.html @@ -1,69 +1,61 @@ + + + + Accordion + + + + + + - - - - Accordion - - - - - - - - - - -
- - - - First Accordion - -
- First Content -
- - - - Second Accordion - -
- Second Content -
- - - - Third Accordion - -
- Third Content -
- - - -
+ + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + - Toggle Second Accordion -
- - +
- - + Toggle Second Accordion +
+ + - \ No newline at end of file + + + diff --git a/static/usage/v7/action-sheet/controller/demo.html b/static/usage/v7/action-sheet/controller/demo.html index a4635ade676..4843e001a1f 100644 --- a/static/usage/v7/action-sheet/controller/demo.html +++ b/static/usage/v7/action-sheet/controller/demo.html @@ -1,53 +1,53 @@ + + + + Action Sheet + + + + + - - - - Action Sheet - - - - - + + + +
+ Open +
+ + + - - - \ No newline at end of file + document.body.appendChild(actionSheet); + await actionSheet.present(); + } + + + diff --git a/static/usage/v7/action-sheet/inline/isOpen/demo.html b/static/usage/v7/action-sheet/inline/isOpen/demo.html index d39cb7d670e..224319878c3 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/demo.html +++ b/static/usage/v7/action-sheet/inline/isOpen/demo.html @@ -1,55 +1,53 @@ + + + + Action Sheet + + + + + - - - - Action Sheet - - - - - + + + +
+ Open + +
+ + + - - - \ No newline at end of file + actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => { + actionSheet.isOpen = false; + }); + + + diff --git a/static/usage/v7/action-sheet/inline/trigger/demo.html b/static/usage/v7/action-sheet/inline/trigger/demo.html index e7d0e43b07e..74720e77cf0 100644 --- a/static/usage/v7/action-sheet/inline/trigger/demo.html +++ b/static/usage/v7/action-sheet/inline/trigger/demo.html @@ -1,54 +1,49 @@ + + + + Action Sheet + + + + + - - - - Action Sheet - - - - - + + + +
+ Open + +
+ + + - - - \ No newline at end of file + actionSheet.buttons = [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ]; + + + diff --git a/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html index d8775124a89..f458e0f2aaa 100644 --- a/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html +++ b/static/usage/v7/action-sheet/role-info-on-dismiss/demo.html @@ -1,72 +1,70 @@ + + + + Action Sheet + + + + - - - - Action Sheet - - - - - - - + + - -
- - - - + actionSheet.buttons = [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ]; - \ No newline at end of file + actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => { + action.innerText = JSON.stringify(ev.detail, null, 2); + }); + + + diff --git a/static/usage/v7/action-sheet/theming/css-properties/demo.html b/static/usage/v7/action-sheet/theming/css-properties/demo.html index fd3a274c25b..70ccb5c5517 100644 --- a/static/usage/v7/action-sheet/theming/css-properties/demo.html +++ b/static/usage/v7/action-sheet/theming/css-properties/demo.html @@ -1,68 +1,66 @@ + + + + Action Sheet + + + + - - - - Action Sheet - - - - - - - - - - - -
- Open - -
- - - - + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v7/action-sheet/theming/styling/demo.html b/static/usage/v7/action-sheet/theming/styling/demo.html index d3bafd2b68e..ef322200bdd 100644 --- a/static/usage/v7/action-sheet/theming/styling/demo.html +++ b/static/usage/v7/action-sheet/theming/styling/demo.html @@ -1,81 +1,83 @@ + + + + Action Sheet + + + + - - - - Action Sheet - - - - - - - - - - -
- Open - -
- - - - - \ No newline at end of file + ion-action-sheet.my-custom-class ion-backdrop { + opacity: 0.6; + } + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v7/alert/buttons/demo.html b/static/usage/v7/alert/buttons/demo.html index e679f8d6c98..61c4f22f73c 100644 --- a/static/usage/v7/alert/buttons/demo.html +++ b/static/usage/v7/alert/buttons/demo.html @@ -1,60 +1,62 @@ - - - - - Alert - - - - - - - - - - - -
- Click Me - -

-

-
- - - - + + + + + + + + + +
+ Click Me + +

+

+
+ + + + + + diff --git a/static/usage/v7/alert/customization/demo.html b/static/usage/v7/alert/customization/demo.html index 2e8fa7043a8..46910704054 100644 --- a/static/usage/v7/alert/customization/demo.html +++ b/static/usage/v7/alert/customization/demo.html @@ -1,74 +1,72 @@ + + + + Alert + + + + - - - - Alert - - - - - - - + .ios button.alert-button.alert-button-cancel { + border-right: 0; + border-bottom-left-radius: 13px; + border-top-left-radius: 13px; + } - - - -
- Click Me - -
- - + .ios button.alert-button.alert-button-confirm { + border-bottom-right-radius: 13px; + border-top-right-radius: 13px; + } + + - - + + + diff --git a/static/usage/v7/alert/inputs/radios/demo.html b/static/usage/v7/alert/inputs/radios/demo.html index 3f9b171d413..19d5b19022c 100644 --- a/static/usage/v7/alert/inputs/radios/demo.html +++ b/static/usage/v7/alert/inputs/radios/demo.html @@ -1,48 +1,46 @@ + + + + Alert + + + + + - - - - Alert - - - - - + + + +
+ Click Me + +
+ + - - - -
- Click Me - -
- - + - - - \ No newline at end of file + alert.buttons = ['OK']; + alert.inputs = [ + { + label: 'Red', + type: 'radio', + value: 'red', + }, + { + label: 'Blue', + type: 'radio', + value: 'blue', + }, + { + label: 'Green', + type: 'radio', + value: 'green', + }, + ]; + + + diff --git a/static/usage/v7/alert/inputs/text-inputs/demo.html b/static/usage/v7/alert/inputs/text-inputs/demo.html index 0b63be2a826..6088f0b6122 100644 --- a/static/usage/v7/alert/inputs/text-inputs/demo.html +++ b/static/usage/v7/alert/inputs/text-inputs/demo.html @@ -1,52 +1,50 @@ + + + + Alert + + + + + - - - - Alert - - - - - + + + +
+ Click Me + +
+ + - - - -
- Click Me - -
- - + - - - \ No newline at end of file + alert.buttons = ['OK']; + alert.inputs = [ + { + 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/v7/alert/presenting/controller/demo.html b/static/usage/v7/alert/presenting/controller/demo.html index f461595624f..62efcb2413c 100644 --- a/static/usage/v7/alert/presenting/controller/demo.html +++ b/static/usage/v7/alert/presenting/controller/demo.html @@ -1,37 +1,35 @@ + + + + Alert + + + + + - - - - Alert - - - - - + + + +
+ Click Me +
+ + - - - -
- Click Me -
- - + - - - \ No newline at end of file + document.body.appendChild(alert); + await alert.present(); + } + + + diff --git a/static/usage/v7/alert/presenting/isOpen/demo.html b/static/usage/v7/alert/presenting/isOpen/demo.html index e3c8ee20f0b..ef694832be4 100644 --- a/static/usage/v7/alert/presenting/isOpen/demo.html +++ b/static/usage/v7/alert/presenting/isOpen/demo.html @@ -1,38 +1,32 @@ + + + + Alert + + + + + - - - - Alert - - - - - + + + +
+ Click Me + +
+ + - - - -
- Click Me - -
- - + - - - \ No newline at end of file + alert.buttons = ['OK']; + alert.addEventListener('ionAlertDidDismiss', () => { + alert.isOpen = false; + }); + + + diff --git a/static/usage/v7/alert/presenting/trigger/demo.html b/static/usage/v7/alert/presenting/trigger/demo.html index 572514716f4..f2a52d21568 100644 --- a/static/usage/v7/alert/presenting/trigger/demo.html +++ b/static/usage/v7/alert/presenting/trigger/demo.html @@ -1,35 +1,33 @@ + + + + Alert + + + + + - - - - Alert - - - - - + + + +
+ Click Me + +
+ + - - - -
- Click Me - -
- - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v7/avatar/basic/demo.html b/static/usage/v7/avatar/basic/demo.html index 64fa695c703..79693427de8 100644 --- a/static/usage/v7/avatar/basic/demo.html +++ b/static/usage/v7/avatar/basic/demo.html @@ -1,27 +1,24 @@ + + + + Avatar + + + + + - - - - Avatar - - - - - - - - - - -
- - Silhouette of a person's head - -
- - - - - \ No newline at end of file + + + +
+ + Silhouette of a person's head + +
+ + + + diff --git a/static/usage/v7/avatar/chip/demo.html b/static/usage/v7/avatar/chip/demo.html index dc15f9a616b..760f628a9e5 100644 --- a/static/usage/v7/avatar/chip/demo.html +++ b/static/usage/v7/avatar/chip/demo.html @@ -1,30 +1,27 @@ + + + + Avatar + + + + + - - - - Avatar - - - - - - - - - - -
- - - Silhouette of a person's head - - Chip Avatar - -
- - - - - \ No newline at end of file + + + +
+ + + Silhouette of a person's head + + Chip Avatar + +
+ + + + diff --git a/static/usage/v7/avatar/item/demo.html b/static/usage/v7/avatar/item/demo.html index 3061c23751d..4b99c6cff32 100644 --- a/static/usage/v7/avatar/item/demo.html +++ b/static/usage/v7/avatar/item/demo.html @@ -1,30 +1,27 @@ + + + + Avatar + + + + + - - - - Avatar - - - - - - - - - - -
- - - Silhouette of a person's head - - Item Avatar - -
- - - - - \ No newline at end of file + + + +
+ + + Silhouette of a person's head + + Item Avatar + +
+ + + + diff --git a/static/usage/v7/avatar/theming/css-properties/demo.html b/static/usage/v7/avatar/theming/css-properties/demo.html index ca9c814a75e..242eba8c1b0 100644 --- a/static/usage/v7/avatar/theming/css-properties/demo.html +++ b/static/usage/v7/avatar/theming/css-properties/demo.html @@ -1,32 +1,30 @@ + + + + Avatar + + + + - - - - Avatar - - - - + + - - - - - - -
- - Silhouette of a person's head - -
- - - - - \ No newline at end of file + + + +
+ + Silhouette of a person's head + +
+ + + + diff --git a/static/usage/v7/back-button/basic/demo.html b/static/usage/v7/back-button/basic/demo.html index 89b2e87535c..771bf41ffcd 100644 --- a/static/usage/v7/back-button/basic/demo.html +++ b/static/usage/v7/back-button/basic/demo.html @@ -1,26 +1,24 @@ + + + + Back Button + + + + + - - - - Back Button - - - - + + + + - - - - - - - - - + customElements.define('page-one', PageOne); + customElements.define('page-two', PageTwo); + + diff --git a/static/usage/v7/back-button/custom/demo.html b/static/usage/v7/back-button/custom/demo.html index 750cb8ef168..c644726cb4a 100644 --- a/static/usage/v7/back-button/custom/demo.html +++ b/static/usage/v7/back-button/custom/demo.html @@ -1,26 +1,24 @@ + + + + Back Button + + + + + - - - - Back Button - - - - + + + + - - - - - - - - - + customElements.define('page-one', PageOne); + customElements.define('page-two', PageTwo); + + diff --git a/static/usage/v7/backdrop/basic/demo.html b/static/usage/v7/backdrop/basic/demo.html index 5bdc07959c9..383542a21da 100644 --- a/static/usage/v7/backdrop/basic/demo.html +++ b/static/usage/v7/backdrop/basic/demo.html @@ -1,35 +1,32 @@ + + + + Backdrop + + + + + - - - - Backdrop - - - - - - - - - - -
- - - Backdrop - - - - - - Checkbox - - Button - -
- - - - \ No newline at end of file + + + +
+ + + Backdrop + + + + + + Checkbox + + Button + +
+ + + diff --git a/static/usage/v7/backdrop/styling/demo.html b/static/usage/v7/backdrop/styling/demo.html index 1dce05e6c37..de8c9990dfd 100644 --- a/static/usage/v7/backdrop/styling/demo.html +++ b/static/usage/v7/backdrop/styling/demo.html @@ -1,57 +1,57 @@ + + + + Backdrop + + + + + + - #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; - } - - - - - - -
- - - 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 -
- - - - \ No newline at end of file + + + +
+ + + 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/v7/badge/basic/demo.html b/static/usage/v7/badge/basic/demo.html index 8a6514b89b7..4da5975ef55 100644 --- a/static/usage/v7/badge/basic/demo.html +++ b/static/usage/v7/badge/basic/demo.html @@ -1,39 +1,37 @@ + + + + Badge + + + + - - - - Badge - - - - + + - - - - - - -
- - - 11 - Badge in start slot - - - 22 - Badge in end slot - - -
- - - - - \ No newline at end of file + + + +
+ + + 11 + Badge in start slot + + + 22 + Badge in end slot + + +
+ + + + diff --git a/static/usage/v7/badge/theming/colors/demo.html b/static/usage/v7/badge/theming/colors/demo.html index b7eaef9a56f..7ab5aec3dc8 100644 --- a/static/usage/v7/badge/theming/colors/demo.html +++ b/static/usage/v7/badge/theming/colors/demo.html @@ -1,55 +1,53 @@ + + + + Badge + + + + - - - - Badge - - - - + + - - - - - - -
- - - Followers - 22k - - - Likes - 118k - - - Stars - 34k - - - Completed - 80 - - - Warnings - 70 - - - Notifications - 1000 - - -
- - - - - \ No newline at end of file + + + +
+ + + Followers + 22k + + + Likes + 118k + + + Stars + 34k + + + Completed + 80 + + + Warnings + 70 + + + Notifications + 1000 + + +
+ + + + diff --git a/static/usage/v7/badge/theming/css-properties/demo.html b/static/usage/v7/badge/theming/css-properties/demo.html index 870b2604c56..4b5d0913da0 100644 --- a/static/usage/v7/badge/theming/css-properties/demo.html +++ b/static/usage/v7/badge/theming/css-properties/demo.html @@ -1,42 +1,40 @@ + + + + Select - Styling the Select + + + + - - - - Select - Styling the Select - - - - + + - ion-badge { - --background: purple; - --color: white; - --padding-end: 20px; - --padding-start: 20px; - } - - - - - - -
- - - Badges styled - 1 - - -
- - - - - \ No newline at end of file + + + +
+ + + Badges styled + 1 + + +
+ + + + diff --git a/static/usage/v7/breadcrumbs/basic/demo.html b/static/usage/v7/breadcrumbs/basic/demo.html index 53cb2009b23..48f8d0b182c 100644 --- a/static/usage/v7/breadcrumbs/basic/demo.html +++ b/static/usage/v7/breadcrumbs/basic/demo.html @@ -1,29 +1,27 @@ + + + + Breadcrumbs + + + + + - - - - Breadcrumbs - - - - - - - - - -
- - Home - Electronics - Cameras - Film - -
- - - - - \ No newline at end of file + + + +
+ + Home + Electronics + Cameras + Film + +
+ + + + diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html index eede9901f26..003eb1c874f 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html +++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/demo.html @@ -1,39 +1,37 @@ + + + + Popover + + + + + - - - - Popover - - - - - + + + +
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +
+ + - - - -
- - Home - Electronics - Photography - Cameras - Film - 35 mm - -
- - + - - - \ No newline at end of file + breadcrumbs.addEventListener('ionCollapsedClick', () => { + breadcrumbs.maxItems = undefined; + }); + + + diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html index 755824f0ece..d54822dd373 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html +++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/demo.html @@ -1,68 +1,66 @@ + + + + Breadcrumbs + + + + - - - - Breadcrumbs - - - - + + - - + + + +
+
Before Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + - - - -
-
Before Collapse = 2
- - Home - Electronics - Photography - Cameras - Film - 35 mm - +
Before Collapse = 0
+ + 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 + -
After Collapse = 2
- - Home - Electronics - Photography - Cameras - Film - 35 mm - - -
Before Collapse = 2, After Collapse = 2
- - Home - Electronics - Photography - Cameras - Film - 35 mm - -
- - - - - \ No newline at end of file +
Before Collapse = 2, After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +
+ + + + diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html index dd665060960..d4f7ef94fbb 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html +++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/demo.html @@ -1,31 +1,29 @@ + + + + Breadcrumbs + + + + + - - - - Breadcrumbs - - - - - - - - - -
- - Home - Electronics - Photography - Cameras - Film - 35 mm - -
- - - - - \ No newline at end of file + + + +
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +
+ + + + diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html index 97a8d83827f..4f62d95beb6 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/demo.html @@ -1,62 +1,60 @@ + + + + Popover + + + + + - - - - Popover - - - - - + + + +
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + + + + + +
+ + - - - -
- - Home - Electronics - Photography - Cameras - Film - 35 mm - - - - - - -
- - + - + popoverList.innerHTML = listHTML; + popover.event = e; + popover.isOpen = true; + }); - \ No newline at end of file + popover.addEventListener('didDismiss', () => (popover.isOpen = false)); + + + diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html b/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html index 845ab797ec0..cb183161d47 100644 --- a/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html +++ b/static/usage/v7/breadcrumbs/icons/custom-separators/demo.html @@ -1,41 +1,39 @@ + + + + Breadcrumbs + + + + + - - - - Breadcrumbs - - - - - - - - - -
- - - Home - - - - Electronics - - - - Cameras - - - - Film - - - -
- - - - - \ No newline at end of file + + + +
+ + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +
+ + + + diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html b/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html index 65c2fc84713..596fb85cd1e 100644 --- a/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html +++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/demo.html @@ -1,68 +1,66 @@ + + + + Breadcrumbs + + + + - - - - Breadcrumbs - - - - + + - - + + + +
+ Icons at Start + + + + Home + + + + Electronics + + + + Cameras + + + + Film + + - - - -
- Icons at Start - - - - Home - - - - Electronics - - - - Cameras - - - - Film - - - - Icons at End - - - Home - - - - Electronics - - - - Cameras - - - - Film - - - -
- - - - - \ No newline at end of file + Icons at End + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +
+ + + + diff --git a/static/usage/v7/breadcrumbs/theming/colors/demo.html b/static/usage/v7/breadcrumbs/theming/colors/demo.html index 1734d9dad7c..04bc0483a4f 100644 --- a/static/usage/v7/breadcrumbs/theming/colors/demo.html +++ b/static/usage/v7/breadcrumbs/theming/colors/demo.html @@ -1,29 +1,27 @@ + + + + Breadcrumbs + + + + + - - - - Breadcrumbs - - - - - - - - - -
- - Home - Electronics - Cameras - Film - -
- - - - - \ No newline at end of file + + + +
+ + Home + Electronics + Cameras + Film + +
+ + + + diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/demo.html b/static/usage/v7/breadcrumbs/theming/css-properties/demo.html index 342106810c0..c440c40655c 100644 --- a/static/usage/v7/breadcrumbs/theming/css-properties/demo.html +++ b/static/usage/v7/breadcrumbs/theming/css-properties/demo.html @@ -1,37 +1,35 @@ + + + + Breadcrumbs + + + + - - - - Breadcrumbs - - - - + + - - - - - - -
- - Home - Electronics - Cameras - Film - -
- - - - - \ No newline at end of file + + + +
+ + Home + Electronics + Cameras + Film + +
+ + + + diff --git a/static/usage/v7/button/basic/demo.html b/static/usage/v7/button/basic/demo.html index 19481e4a0c9..5724aab1859 100644 --- a/static/usage/v7/button/basic/demo.html +++ b/static/usage/v7/button/basic/demo.html @@ -1,26 +1,23 @@ + + + + Button + + + + + - - - - Button - - - - - - - - - - -
- Default - Disabled -
- - - - - \ No newline at end of file + + + +
+ Default + Disabled +
+ + + + diff --git a/static/usage/v7/button/expand/demo.html b/static/usage/v7/button/expand/demo.html index d636c653713..39095a008fa 100644 --- a/static/usage/v7/button/expand/demo.html +++ b/static/usage/v7/button/expand/demo.html @@ -1,32 +1,30 @@ + + + + Button + + + + - - - - Button - - - - + + - - - - - - -
- Block - Full -
- - - - - \ No newline at end of file + + + +
+ Block + Full +
+ + + + diff --git a/static/usage/v7/button/fill/demo.html b/static/usage/v7/button/fill/demo.html index 651fe0853e6..7e568a1a4dd 100644 --- a/static/usage/v7/button/fill/demo.html +++ b/static/usage/v7/button/fill/demo.html @@ -1,28 +1,25 @@ + + + + Button + + + + + - - - - Button - - - - - - - - - - -
- Default - Clear - Outline - Solid -
- - - - - \ No newline at end of file + + + +
+ Default + Clear + Outline + Solid +
+ + + + diff --git a/static/usage/v7/button/icons/demo.html b/static/usage/v7/button/icons/demo.html index 4cf763ae93b..9f8ae344b46 100644 --- a/static/usage/v7/button/icons/demo.html +++ b/static/usage/v7/button/icons/demo.html @@ -1,37 +1,34 @@ + + + + Button + + + + + - - - - Button - - - - + + + +
+ + + Left Icon + - + + Right Icon + + - - - -
- - - Left Icon - - - - Right Icon - - - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + diff --git a/static/usage/v7/button/shape/demo.html b/static/usage/v7/button/shape/demo.html index 5d87ac91cbe..c4f0acae694 100644 --- a/static/usage/v7/button/shape/demo.html +++ b/static/usage/v7/button/shape/demo.html @@ -1,26 +1,23 @@ + + + + Button + + + + + - - - - Button - - - - - - - - - - -
- Default - Round -
- - - - - \ No newline at end of file + + + +
+ Default + Round +
+ + + + diff --git a/static/usage/v7/button/size/demo.html b/static/usage/v7/button/size/demo.html index 1a86485233a..b4cdd2433f8 100644 --- a/static/usage/v7/button/size/demo.html +++ b/static/usage/v7/button/size/demo.html @@ -1,27 +1,24 @@ + + + + Button + + + + + - - - - Button - - - - - - - - - - -
- Small - Default - Large -
- - - - - \ No newline at end of file + + + +
+ Small + Default + Large +
+ + + + diff --git a/static/usage/v7/button/theming/colors/demo.html b/static/usage/v7/button/theming/colors/demo.html index f5363dbfc4e..0f908a9176a 100644 --- a/static/usage/v7/button/theming/colors/demo.html +++ b/static/usage/v7/button/theming/colors/demo.html @@ -1,41 +1,39 @@ + + + + Button + + + + - - - - Button - - - - + + - - - - - - -
- Default - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark -
- - - - - \ No newline at end of file + + + +
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+ + + + diff --git a/static/usage/v7/button/theming/css-properties/demo.html b/static/usage/v7/button/theming/css-properties/demo.html index d3508c26436..a21fa88797c 100644 --- a/static/usage/v7/button/theming/css-properties/demo.html +++ b/static/usage/v7/button/theming/css-properties/demo.html @@ -1,47 +1,45 @@ - - - - - Button - - - - - - - - - - - -
- Custom Button -
- - - - - \ No newline at end of file + + + + Button + + + + + + + + + + + +
+ Custom Button +
+ + + + diff --git a/static/usage/v7/buttons/basic/demo.html b/static/usage/v7/buttons/basic/demo.html index e66ffdfaa3a..3c889975115 100644 --- a/static/usage/v7/buttons/basic/demo.html +++ b/static/usage/v7/buttons/basic/demo.html @@ -1,29 +1,27 @@ + + + + Buttons + + + + + - - - - Buttons - - - - - - - - - -
- - - Button - - Default Buttons - -
- - - - - \ No newline at end of file + + + +
+ + + Button + + Default Buttons + +
+ + + + diff --git a/static/usage/v7/buttons/placement/demo.html b/static/usage/v7/buttons/placement/demo.html index 34c1f5504f2..89f502b3a05 100644 --- a/static/usage/v7/buttons/placement/demo.html +++ b/static/usage/v7/buttons/placement/demo.html @@ -1,49 +1,47 @@ + + + + Buttons + + + + - - - - Buttons - - - - + + - - + + + +
+ + + Start + + Buttons + + End + + - - - -
- - - Start - - Buttons - - End - - - - - - Secondary - - Buttons - - Primary - - -
- - - - - \ No newline at end of file + + + Secondary + + Buttons + + Primary + + +
+ + + + diff --git a/static/usage/v7/buttons/types/demo.html b/static/usage/v7/buttons/types/demo.html index 38924b0ddc5..9be9ccc031b 100644 --- a/static/usage/v7/buttons/types/demo.html +++ b/static/usage/v7/buttons/types/demo.html @@ -1,106 +1,100 @@ + + + + Buttons + + + + - - - - Buttons - - - - + + - - + + + +
+ + + Favorite + + Default Buttons + + Delete + + - - - -
- - - - Favorite - - - Default Buttons - - - Delete - - - + + + + + + + + + + + + + + + Icon Buttons + - - - - - - - - - - - - - - - Icon Buttons - + + + + + Contact + + + + + Help + + + + Solid Buttons + - - - - - Contact - - - - - Help - - - - Solid Buttons - + + + + + Star + + + + + Edit + + + + Outline Buttons + - - - - - Star - - - - - Edit - - - - Outline Buttons - + + + + + Back Button + - - - - - Back Button - - - - - - - Menu Button - -
- - - - - \ No newline at end of file + + + + + Menu Button + +
+ + + + diff --git a/static/usage/v7/card/basic/demo.html b/static/usage/v7/card/basic/demo.html index 2c94d6d3b6f..21c1c3280a3 100644 --- a/static/usage/v7/card/basic/demo.html +++ b/static/usage/v7/card/basic/demo.html @@ -1,40 +1,38 @@ + + + + Card + + + + - - - - Card - - - - + + - - + + + +
+ + + Card Title + Card Subtitle + - - - -
- - - Card Title - Card Subtitle - - - - Here's a small text description for the card content. Nothing more, nothing less. - - -
- - - - - \ No newline at end of file + + Here's a small text description for the card content. Nothing more, nothing less. + + +
+ + + + diff --git a/static/usage/v7/card/buttons/demo.html b/static/usage/v7/card/buttons/demo.html index f80f67a1cbd..600f311be4e 100644 --- a/static/usage/v7/card/buttons/demo.html +++ b/static/usage/v7/card/buttons/demo.html @@ -1,43 +1,41 @@ + + + + Card + + + + - - - - Card - - - - + + - - + + + +
+ + + Card Title + Card Subtitle + - - - -
- - - Card Title - Card Subtitle - + + Here's a small text description for the card content. Nothing more, nothing less. + - - Here's a small text description for the card content. Nothing more, nothing less. - - - Action 1 - Action 2 - -
- - - - - \ No newline at end of file + Action 1 + Action 2 + +
+ + + + diff --git a/static/usage/v7/card/list/demo.html b/static/usage/v7/card/list/demo.html index c0dfd617f91..8ed00dcef17 100644 --- a/static/usage/v7/card/list/demo.html +++ b/static/usage/v7/card/list/demo.html @@ -1,75 +1,73 @@ + + + + Card + + + + - - - - Card - - - - + + - ion-item { - --padding-start: 0; - } - - + + + +
+ + + Card Title + Card Subtitle + + + + + + Silhouette of mountains + + Item + - - - -
- - - Card Title - Card Subtitle - - - - - - Silhouette of mountains - - Item - + + + Silhouette of mountains + + Item + - - - Silhouette of mountains - - Item - + + + Silhouette of mountains + + Item + - - - Silhouette of mountains - - Item - - - - - Silhouette of mountains - - Item - - - - -
- - - - - \ No newline at end of file + + + Silhouette of mountains + + Item + + + + +
+ + + + diff --git a/static/usage/v7/card/media/demo.html b/static/usage/v7/card/media/demo.html index a375172a45f..7aff16f4d0c 100644 --- a/static/usage/v7/card/media/demo.html +++ b/static/usage/v7/card/media/demo.html @@ -1,41 +1,39 @@ + + + + Card + + + + - - - - Card - - - - + + - - + + + +
+ + Silhouette of mountains + + Card Title + Card Subtitle + - - - -
- - Silhouette of mountains - - Card Title - Card Subtitle - - - - Here's a small text description for the card content. Nothing more, nothing less. - - -
- - - - - \ No newline at end of file + + Here's a small text description for the card content. Nothing more, nothing less. + + +
+ + + + diff --git a/static/usage/v7/card/theming/colors/demo.html b/static/usage/v7/card/theming/colors/demo.html index 934d55754d3..f68ba3326d0 100644 --- a/static/usage/v7/card/theming/colors/demo.html +++ b/static/usage/v7/card/theming/colors/demo.html @@ -1,131 +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 - - -
- - - - - \ No newline at end of file + + + + 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/v7/card/theming/css-properties/demo.html b/static/usage/v7/card/theming/css-properties/demo.html index 142e99dba71..61973dab5fe 100644 --- a/static/usage/v7/card/theming/css-properties/demo.html +++ b/static/usage/v7/card/theming/css-properties/demo.html @@ -1,53 +1,51 @@ - - - - - Card - - - - - - - - - - - -
- - - Card Title - Card Subtitle - - - - Here's a small text description for the card content. Nothing more, nothing less. - - -
- - - - - \ No newline at end of file + + + + Card + + + + + + + + + + + +
+ + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +
+ + + + diff --git a/static/usage/v7/checkbox/basic/demo.html b/static/usage/v7/checkbox/basic/demo.html index 746ac8f75fe..4c6d16c7e2a 100644 --- a/static/usage/v7/checkbox/basic/demo.html +++ b/static/usage/v7/checkbox/basic/demo.html @@ -1,24 +1,22 @@ + + + + Checkbox + + + + + - - - - Checkbox - - - - - - - - - -
- I agree to the terms and conditions -
- - - - + + + +
+ I agree to the terms and conditions +
+ + + diff --git a/static/usage/v7/checkbox/indeterminate/demo.html b/static/usage/v7/checkbox/indeterminate/demo.html index d04574e0499..26df51a9de1 100644 --- a/static/usage/v7/checkbox/indeterminate/demo.html +++ b/static/usage/v7/checkbox/indeterminate/demo.html @@ -1,24 +1,22 @@ + + + + Checkbox + + + + + - - - - Checkbox - - - - - - - - - -
- Indeterminate checkbox -
- - - - + + + +
+ Indeterminate checkbox +
+ + + diff --git a/static/usage/v7/checkbox/justify/demo.html b/static/usage/v7/checkbox/justify/demo.html index 06f66515f71..de3059c969c 100644 --- a/static/usage/v7/checkbox/justify/demo.html +++ b/static/usage/v7/checkbox/justify/demo.html @@ -1,21 +1,20 @@ + + + + Checkbox + + + + - - - - Checkbox - - - - - - - + + diff --git a/static/usage/v7/checkbox/label-placement/demo.html b/static/usage/v7/checkbox/label-placement/demo.html index eb11903d1eb..68f4256f4c1 100644 --- a/static/usage/v7/checkbox/label-placement/demo.html +++ b/static/usage/v7/checkbox/label-placement/demo.html @@ -1,34 +1,32 @@ + + + + Checkbox + + + + + - - - - Checkbox - - - - - + + + +
+
+ Label at the Start - - - -
-
- Label at the Start +
-
+ Label at the End - Label at the End +
-
- - Fixed Width Label + Fixed Width Label +
-
- - - - + + + diff --git a/static/usage/v7/checkbox/theming/css-properties/demo.html b/static/usage/v7/checkbox/theming/css-properties/demo.html index 63c8660d87d..b2188d8bb60 100644 --- a/static/usage/v7/checkbox/theming/css-properties/demo.html +++ b/static/usage/v7/checkbox/theming/css-properties/demo.html @@ -1,35 +1,33 @@ + + + + Checkbox + + + + + - - - - - -
- Themed checkbox -
- - - + ion-checkbox::part(container) { + border-radius: 6px; + border: 2px solid #6815ec; + } + + + + + +
+ Themed checkbox +
+ + + diff --git a/static/usage/v7/chip/basic/demo.html b/static/usage/v7/chip/basic/demo.html index 7bdbe50277e..6e90d824652 100644 --- a/static/usage/v7/chip/basic/demo.html +++ b/static/usage/v7/chip/basic/demo.html @@ -1,27 +1,24 @@ + + + + Chip + + + + + - - - - Chip - - - - - - - - - - -
- Default - Disabled - Outline -
- - - - - \ No newline at end of file + + + +
+ Default + Disabled + Outline +
+ + + + diff --git a/static/usage/v7/chip/slots/demo.html b/static/usage/v7/chip/slots/demo.html index 428f38a56b3..378d7313110 100644 --- a/static/usage/v7/chip/slots/demo.html +++ b/static/usage/v7/chip/slots/demo.html @@ -1,37 +1,34 @@ + + + + Chip + + + + + - - - - Chip - - - - + + + +
+ + + Silhouette of a person's head + + Avatar Chip + + - - - - - -
- - - Silhouette of a person's head - - Avatar Chip - - - - - - Icon Chip - - -
- - - - - \ No newline at end of file + + + Icon Chip + + +
+ + + + diff --git a/static/usage/v7/chip/theming/colors/demo.html b/static/usage/v7/chip/theming/colors/demo.html index f037cfb4eb3..62e1584bd2f 100644 --- a/static/usage/v7/chip/theming/colors/demo.html +++ b/static/usage/v7/chip/theming/colors/demo.html @@ -1,45 +1,43 @@ + + + + Chip + + + + - - - - Chip - - - - + + - - - - - - -
-
- Default - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark + + + +
+
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
-
- - - - - \ No newline at end of file + + + + diff --git a/static/usage/v7/chip/theming/css-properties/demo.html b/static/usage/v7/chip/theming/css-properties/demo.html index 3310b65a8cb..31789181fc1 100644 --- a/static/usage/v7/chip/theming/css-properties/demo.html +++ b/static/usage/v7/chip/theming/css-properties/demo.html @@ -1,32 +1,29 @@ + + + + Chip + + + + - - - - Chip - - - - + + - - - - - - - -
- Default -
- - - - - \ No newline at end of file + + + +
+ Default +
+ + + + diff --git a/static/usage/v7/content/basic/demo.html b/static/usage/v7/content/basic/demo.html index c5aca89699d..b0ba1a035bb 100644 --- a/static/usage/v7/content/basic/demo.html +++ b/static/usage/v7/content/basic/demo.html @@ -1,29 +1,27 @@ + + + + Content + + + + + - - - - Content - - - - - + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
- - - -

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.

- - - - - \ No newline at end of file +

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

+ + + + diff --git a/static/usage/v7/content/fixed/demo.html b/static/usage/v7/content/fixed/demo.html index 7503103ea39..cd13bc4d34c 100644 --- a/static/usage/v7/content/fixed/demo.html +++ b/static/usage/v7/content/fixed/demo.html @@ -1,68 +1,76 @@ + + + + Content + + + + - - - - Content - - - - + + - - + + + +

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

- - - -

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

+ Normal Button + Fixed Button - 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.

- - - - - \ No newline at end of file +

+ 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/v7/content/fullscreen/demo.html b/static/usage/v7/content/fullscreen/demo.html index ff8431d4b08..aa931cab1ae 100644 --- a/static/usage/v7/content/fullscreen/demo.html +++ b/static/usage/v7/content/fullscreen/demo.html @@ -1,78 +1,82 @@ + + + + Content + + + + - - - - Content - - - - + + - - + + + + + Header + + + +

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

- - - - - - 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 - - - - - - - \ No newline at end of file +

+ 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/v7/content/header-footer/demo.html b/static/usage/v7/content/header-footer/demo.html index c94bb1f5b30..e5770d1488d 100644 --- a/static/usage/v7/content/header-footer/demo.html +++ b/static/usage/v7/content/header-footer/demo.html @@ -1,43 +1,37 @@ + + + + Content + + + + + - - - - Content - - - - - + + + + + Header + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
- - - - - - 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 - - - - - - - \ No newline at end of file +

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

+ + + + Footer + + + + + diff --git a/static/usage/v7/content/scroll-events/demo.html b/static/usage/v7/content/scroll-events/demo.html index 7688ad4afbc..956aeb3079c 100644 --- a/static/usage/v7/content/scroll-events/demo.html +++ b/static/usage/v7/content/scroll-events/demo.html @@ -1,69 +1,77 @@ + + + + Content + + + + + - - - - Content - - - - - + + + +

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

- - - -

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. +

+ + -

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.

- - + - - - \ No newline at end of file + content.addEventListener('ionScrollStart', () => console.log('scroll start')); + content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail)); + content.addEventListener('ionScrollEnd', () => console.log('scroll end')); + + + diff --git a/static/usage/v7/content/scroll-methods/demo.html b/static/usage/v7/content/scroll-methods/demo.html index 3b864d3e980..86cf115f403 100644 --- a/static/usage/v7/content/scroll-methods/demo.html +++ b/static/usage/v7/content/scroll-methods/demo.html @@ -1,78 +1,86 @@ + + + + Content + + + + + - - - - Content - - - - - + + + +

Click on the buttons to scroll the content.

- - - -

Click on the buttons to scroll the content.

+ Scroll to Bottom - 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. +

-

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 + + - Scroll to Top - - + - - - \ No newline at end of file + function scrollToTop() { + // Passing a duration to the method makes it so the scroll slowly + // goes to the top instead of instantly + content.scrollToTop(500); + } + + + diff --git a/static/usage/v7/content/theming/colors/demo.html b/static/usage/v7/content/theming/colors/demo.html index bdf97b549bb..9c660f9d3f4 100644 --- a/static/usage/v7/content/theming/colors/demo.html +++ b/static/usage/v7/content/theming/colors/demo.html @@ -1,69 +1,67 @@ + + + + Content + + + + - - - - Content - - - - + + - ion-content { - flex: 1 1 33%; - height: 250px; - } - - - - - -
- -

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.

- -
- - - - \ No newline at end of file + + +
+ +

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/v7/content/theming/css-properties/demo.html b/static/usage/v7/content/theming/css-properties/demo.html index c9bfa0dfdc6..b48c3bd51fd 100644 --- a/static/usage/v7/content/theming/css-properties/demo.html +++ b/static/usage/v7/content/theming/css-properties/demo.html @@ -1,36 +1,34 @@ + + + + Content + + + + - - - - Content - - - - + + - - + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
- - - -

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.

- - - - - \ No newline at end of file +

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

+ + + + diff --git a/static/usage/v7/content/theming/css-shadow-parts/demo.html b/static/usage/v7/content/theming/css-shadow-parts/demo.html index 3bc6859c66f..b840581bf3e 100644 --- a/static/usage/v7/content/theming/css-shadow-parts/demo.html +++ b/static/usage/v7/content/theming/css-shadow-parts/demo.html @@ -1,39 +1,37 @@ + + + + Content + + + + - - - - Content - - - - + + - ion-content::part(scroll) { - color: #fff; - } - - + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
- - - -

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.

- - - - - \ No newline at end of file +

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

+ + + + diff --git a/static/usage/v7/datetime-button/basic/demo.html b/static/usage/v7/datetime-button/basic/demo.html index 1e7cce74cae..346ac369005 100644 --- a/static/usage/v7/datetime-button/basic/demo.html +++ b/static/usage/v7/datetime-button/basic/demo.html @@ -1,33 +1,31 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - + + + +
+ - - - -
- - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + diff --git a/static/usage/v7/datetime/basic/demo.html b/static/usage/v7/datetime/basic/demo.html index 9d58e952ed0..820f002031d 100644 --- a/static/usage/v7/datetime/basic/demo.html +++ b/static/usage/v7/datetime/basic/demo.html @@ -1,33 +1,31 @@ + + + + Datetime + + + + + - - - - - -
- -
- - - + .container { + align-items: flex-start; + } + + + + + +
+ +
+ + + diff --git a/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html b/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html index b0a5a405fe7..eeae254ce63 100644 --- a/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html +++ b/static/usage/v7/datetime/buttons/customizing-button-texts/demo.html @@ -1,30 +1,28 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/buttons/customizing-buttons/demo.html b/static/usage/v7/datetime/buttons/customizing-buttons/demo.html index 5d82337b791..31cd963a9a7 100644 --- a/static/usage/v7/datetime/buttons/customizing-buttons/demo.html +++ b/static/usage/v7/datetime/buttons/customizing-buttons/demo.html @@ -1,40 +1,38 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - + + + +
+ + + Reset + Never mind + All Set + + +
+ + - - - -
- - - Reset - Never mind - All Set - - -
- - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html index 4a50281c218..5e855fc3b9e 100644 --- a/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html +++ b/static/usage/v7/datetime/buttons/showing-confirmation-buttons/demo.html @@ -1,30 +1,28 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/date-constraints/advanced/demo.html b/static/usage/v7/datetime/date-constraints/advanced/demo.html index 5f85f08fd26..1899e3dcb19 100644 --- a/static/usage/v7/datetime/date-constraints/advanced/demo.html +++ b/static/usage/v7/datetime/date-constraints/advanced/demo.html @@ -1,43 +1,41 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - + + + +
+ +
+ + - - - -
- -
- - + - - - \ No newline at end of file + /** + * Date will be enabled if it is not + * Sunday or Saturday + */ + return utcDay !== 0 && utcDay !== 6; + }; + + + diff --git a/static/usage/v7/datetime/date-constraints/max-min/demo.html b/static/usage/v7/datetime/date-constraints/max-min/demo.html index 6965a74db91..4c9e16d3c15 100644 --- a/static/usage/v7/datetime/date-constraints/max-min/demo.html +++ b/static/usage/v7/datetime/date-constraints/max-min/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/date-constraints/values/demo.html b/static/usage/v7/datetime/date-constraints/values/demo.html index 3c341df059f..0881623db7e 100644 --- a/static/usage/v7/datetime/date-constraints/values/demo.html +++ b/static/usage/v7/datetime/date-constraints/values/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/highlightedDates/array/demo.html b/static/usage/v7/datetime/highlightedDates/array/demo.html index 428678d3dbe..f6a1cd46143 100644 --- a/static/usage/v7/datetime/highlightedDates/array/demo.html +++ b/static/usage/v7/datetime/highlightedDates/array/demo.html @@ -1,55 +1,53 @@ - - - - - Datetime - - - - - - - - - - -
- -
- - - - + + + + + + + + +
+ +
+ + - \ No newline at end of file + + + diff --git a/static/usage/v7/datetime/highlightedDates/callback/demo.html b/static/usage/v7/datetime/highlightedDates/callback/demo.html index af82c083c02..7e8dd58e36a 100644 --- a/static/usage/v7/datetime/highlightedDates/callback/demo.html +++ b/static/usage/v7/datetime/highlightedDates/callback/demo.html @@ -1,53 +1,51 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - + + + +
+ +
+ + - - + if (utcDay % 3 === 0) { + return { + textColor: 'var(--ion-color-secondary-contrast)', + backgroundColor: 'var(--ion-color-secondary)', + }; + } - \ No newline at end of file + return undefined; + }; + + + diff --git a/static/usage/v7/datetime/localization/custom-locale/demo.html b/static/usage/v7/datetime/localization/custom-locale/demo.html index dada357f09c..3a888e9fa77 100644 --- a/static/usage/v7/datetime/localization/custom-locale/demo.html +++ b/static/usage/v7/datetime/localization/custom-locale/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/localization/first-day-of-week/demo.html b/static/usage/v7/datetime/localization/first-day-of-week/demo.html index d1ad1198d0c..3d18ac3b522 100644 --- a/static/usage/v7/datetime/localization/first-day-of-week/demo.html +++ b/static/usage/v7/datetime/localization/first-day-of-week/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/localization/hour-cycle/demo.html b/static/usage/v7/datetime/localization/hour-cycle/demo.html index 08b5da3eb6a..ca8d2c9a2ff 100644 --- a/static/usage/v7/datetime/localization/hour-cycle/demo.html +++ b/static/usage/v7/datetime/localization/hour-cycle/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/localization/locale-extension-tags/demo.html b/static/usage/v7/datetime/localization/locale-extension-tags/demo.html index 6e68e123b55..f6102751e52 100644 --- a/static/usage/v7/datetime/localization/locale-extension-tags/demo.html +++ b/static/usage/v7/datetime/localization/locale-extension-tags/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/localization/time-label/demo.html b/static/usage/v7/datetime/localization/time-label/demo.html index 3e7d56c00b3..ad11584169f 100644 --- a/static/usage/v7/datetime/localization/time-label/demo.html +++ b/static/usage/v7/datetime/localization/time-label/demo.html @@ -1,31 +1,29 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- - Tiempo - -
- - - - - \ No newline at end of file + + + +
+ + Tiempo + +
+ + + + diff --git a/static/usage/v7/datetime/multiple/demo.html b/static/usage/v7/datetime/multiple/demo.html index 20aea12dbe5..57d69a33a42 100644 --- a/static/usage/v7/datetime/multiple/demo.html +++ b/static/usage/v7/datetime/multiple/demo.html @@ -1,34 +1,32 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - + + + +
+ +
+ + - - - -
- -
- - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v7/datetime/presentation/date/demo.html b/static/usage/v7/datetime/presentation/date/demo.html index 17d9f95fe97..f8cca1eb012 100644 --- a/static/usage/v7/datetime/presentation/date/demo.html +++ b/static/usage/v7/datetime/presentation/date/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/presentation/month-and-year/demo.html b/static/usage/v7/datetime/presentation/month-and-year/demo.html index 2ea2e639089..32c4db0378c 100644 --- a/static/usage/v7/datetime/presentation/month-and-year/demo.html +++ b/static/usage/v7/datetime/presentation/month-and-year/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/presentation/time/demo.html b/static/usage/v7/datetime/presentation/time/demo.html index 506c15adb83..015489a4b13 100644 --- a/static/usage/v7/datetime/presentation/time/demo.html +++ b/static/usage/v7/datetime/presentation/time/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/presentation/wheel/demo.html b/static/usage/v7/datetime/presentation/wheel/demo.html index 704c463874d..e3642ae3ccc 100644 --- a/static/usage/v7/datetime/presentation/wheel/demo.html +++ b/static/usage/v7/datetime/presentation/wheel/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/theming/demo.html b/static/usage/v7/datetime/theming/demo.html index f78309fe0b5..f2e502cfe56 100644 --- a/static/usage/v7/datetime/theming/demo.html +++ b/static/usage/v7/datetime/theming/demo.html @@ -1,78 +1,76 @@ + + + + Datetime + + + + + + - border-radius: 16px; - box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; - } - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/datetime/title/customizing-title/demo.html b/static/usage/v7/datetime/title/customizing-title/demo.html index c8818884ed2..734766aa361 100644 --- a/static/usage/v7/datetime/title/customizing-title/demo.html +++ b/static/usage/v7/datetime/title/customizing-title/demo.html @@ -1,31 +1,29 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- - Select a Reservation Date - -
- - - - - \ No newline at end of file + + + +
+ + Select a Reservation Date + +
+ + + + diff --git a/static/usage/v7/datetime/title/showing-default-title/demo.html b/static/usage/v7/datetime/title/showing-default-title/demo.html index 64138302db2..83730417b3b 100644 --- a/static/usage/v7/datetime/title/showing-default-title/demo.html +++ b/static/usage/v7/datetime/title/showing-default-title/demo.html @@ -1,29 +1,27 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/fab/basic/demo.html b/static/usage/v7/fab/basic/demo.html index 3581f6e15da..882d14b7b1b 100644 --- a/static/usage/v7/fab/basic/demo.html +++ b/static/usage/v7/fab/basic/demo.html @@ -1,29 +1,26 @@ + + + + Fab + + + + + - - - - Fab - - - - - - - - - - -
- - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v7/fab/button-sizing/demo.html b/static/usage/v7/fab/button-sizing/demo.html index 486331c856d..98b2b255b4c 100644 --- a/static/usage/v7/fab/button-sizing/demo.html +++ b/static/usage/v7/fab/button-sizing/demo.html @@ -1,40 +1,37 @@ + + + + Fab + + + + + - - - - Fab - - - - - - - - - - -
- - - - - - - - - - + + + +
+ + + - - - - - -
- - - - - \ No newline at end of file + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v7/fab/list-side/demo.html b/static/usage/v7/fab/list-side/demo.html index ce22e5462a5..0d9f3291e1d 100644 --- a/static/usage/v7/fab/list-side/demo.html +++ b/static/usage/v7/fab/list-side/demo.html @@ -1,55 +1,52 @@ + + + + Fab + + + + + - - - - Fab - - - - - - - - - - -
- - - - - - - - - - + + + +
+ - + - - - - - - - - - - - - - - - - - - -
- - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v7/fab/positioning/demo.html b/static/usage/v7/fab/positioning/demo.html index 4c741044b04..f6449a636ae 100644 --- a/static/usage/v7/fab/positioning/demo.html +++ b/static/usage/v7/fab/positioning/demo.html @@ -1,77 +1,74 @@ + + + + Fab + + + + + - - - - Fab - - - - - - - - - - - - Fab Buttons - - - - - - - - - - - + + + + + Fab Buttons + + + + - + - - - - - + + + + + + + + + + + + - - - - - - - - + - + - - - - - + + + + + + + + + + + + - - - - - - - - + - + - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + + diff --git a/static/usage/v7/fab/theming/colors/demo.html b/static/usage/v7/fab/theming/colors/demo.html index d07b1d7fc7b..1ae2df54329 100644 --- a/static/usage/v7/fab/theming/colors/demo.html +++ b/static/usage/v7/fab/theming/colors/demo.html @@ -1,55 +1,52 @@ + + + + Fab + + + + + - - - - Fab - - - - - - - - - - -
- - - - - - - - - - - - - - - + + + +
+ + + - - - - - - - - - - - - - - - -
- - - - - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v7/fab/theming/css-custom-properties/demo.html b/static/usage/v7/fab/theming/css-custom-properties/demo.html index f921890486c..3d0fd49ac95 100644 --- a/static/usage/v7/fab/theming/css-custom-properties/demo.html +++ b/static/usage/v7/fab/theming/css-custom-properties/demo.html @@ -1,50 +1,48 @@ + + + + Fab + + + + - - - - Fab - - - - + + - - - - - - -
- - - - - - - - + + + +
+ - + - - - - - -
- - - - - \ No newline at end of file + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v7/fab/theming/css-shadow-parts/demo.html b/static/usage/v7/fab/theming/css-shadow-parts/demo.html index c56ea30c714..2e7bd8ec955 100644 --- a/static/usage/v7/fab/theming/css-shadow-parts/demo.html +++ b/static/usage/v7/fab/theming/css-shadow-parts/demo.html @@ -1,56 +1,54 @@ + + + + Fab + + + + - - - - Fab - - - - + + - ion-fab-button::part(native):active::after { - background-color: #87d361; - } - - - - - - -
- - - - - - - - + + + +
+ - + - - - - - -
- - - - - \ No newline at end of file + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v7/footer/basic/demo.html b/static/usage/v7/footer/basic/demo.html index 8716a5a4736..d2592eca731 100644 --- a/static/usage/v7/footer/basic/demo.html +++ b/static/usage/v7/footer/basic/demo.html @@ -1,28 +1,25 @@ + + + + Footer + + + + + - - - - Footer - - - - - - - - - - -

Content

- - - - Footer - - - - - - \ No newline at end of file + + + +

Content

+ + + + Footer + + + + + diff --git a/static/usage/v7/footer/custom-scroll-target/demo.html b/static/usage/v7/footer/custom-scroll-target/demo.html index 1db37f90065..d24453289c9 100644 --- a/static/usage/v7/footer/custom-scroll-target/demo.html +++ b/static/usage/v7/footer/custom-scroll-target/demo.html @@ -1,78 +1,98 @@ + + + + Footer + + + + - - - - Footer - - - - + + - height: 100%; - width: 100%; - overflow-y: auto; - } - - + + + +
+

Animal Facts

- - - -
-

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. +

-

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. +

-

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. +

-

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. +

-

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 - - - - - - \ No newline at end of file +

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/v7/footer/fade/demo.html b/static/usage/v7/footer/fade/demo.html index 19ef77d93a1..0609f954711 100644 --- a/static/usage/v7/footer/fade/demo.html +++ b/static/usage/v7/footer/fade/demo.html @@ -1,65 +1,82 @@ + + + + Footer + + + + + - - - - 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. +

- - - -

Animal Facts

+

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. +

-

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.

+

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. +

-

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.

+

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. +

-

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 - - - - - - \ No newline at end of file +

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/v7/footer/no-border/demo.html b/static/usage/v7/footer/no-border/demo.html index e0c34f1841c..2a8835714cb 100644 --- a/static/usage/v7/footer/no-border/demo.html +++ b/static/usage/v7/footer/no-border/demo.html @@ -1,28 +1,25 @@ + + + + Footer + + + + + - - - - Footer - - - - - - - - - - -

Content

- - - - Footer - - - - - - \ No newline at end of file + + + +

Content

+ + + + Footer + + + + + diff --git a/static/usage/v7/footer/translucent/demo.html b/static/usage/v7/footer/translucent/demo.html index 9449c00c072..880895e7115 100644 --- a/static/usage/v7/footer/translucent/demo.html +++ b/static/usage/v7/footer/translucent/demo.html @@ -1,65 +1,82 @@ + + + + Footer + + + + + - - - - 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. +

- - - -

Animal Facts

+

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. +

-

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.

+

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. +

-

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.

+

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. +

-

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 - - - - - - \ No newline at end of file +

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/v7/grid/basic/demo.html b/static/usage/v7/grid/basic/demo.html index 4343eb0c54b..981265cd17e 100644 --- a/static/usage/v7/grid/basic/demo.html +++ b/static/usage/v7/grid/basic/demo.html @@ -1,77 +1,75 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ + + 1 + 2 + 3 + + - - - -
- - - 1 - 2 - 3 - - + + + 1 + 2 + 3 + 4 + 5 + 6 + + - - - 1 - 2 - 3 - 4 - 5 - 6 - - - - - - 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - - -
- - - - - \ No newline at end of file + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + + +
+ + + + diff --git a/static/usage/v7/grid/customizing/column-number/demo.html b/static/usage/v7/grid/customizing/column-number/demo.html index 0d8f098eeda..fb28de35d4e 100644 --- a/static/usage/v7/grid/customizing/column-number/demo.html +++ b/static/usage/v7/grid/customizing/column-number/demo.html @@ -1,53 +1,51 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - - - - - -
- Total number of columns is set to 6, column size is set to 1 - - - 1 - 2 - 3 - 4 - - -
- - - - - \ No newline at end of file + + + +
+ Total number of columns is set to 6, column size is set to 1 + + + 1 + 2 + 3 + 4 + + +
+ + + + diff --git a/static/usage/v7/grid/customizing/padding/demo.html b/static/usage/v7/grid/customizing/padding/demo.html index c56798590b8..43fb4ffbf0f 100644 --- a/static/usage/v7/grid/customizing/padding/demo.html +++ b/static/usage/v7/grid/customizing/padding/demo.html @@ -1,65 +1,63 @@ - - - - - Grid - - - - - - - - - - - -
- - - 1 - 2 - 3 - - -
- - - - - \ No newline at end of file + + + + Grid + + + + + + + + + + + +
+ + + 1 + 2 + 3 + + +
+ + + + diff --git a/static/usage/v7/grid/customizing/width/demo.html b/static/usage/v7/grid/customizing/width/demo.html index ec5302b1be7..a61fc631953 100644 --- a/static/usage/v7/grid/customizing/width/demo.html +++ b/static/usage/v7/grid/customizing/width/demo.html @@ -1,56 +1,54 @@ - - - - - Grid - - - - - - - - - - - -
- - - 1 - 2 - 3 - - -
- - - - - \ No newline at end of file + + + + Grid + + + + + + + + + + + +
+ + + 1 + 2 + 3 + + +
+ + + + diff --git a/static/usage/v7/grid/fixed/demo.html b/static/usage/v7/grid/fixed/demo.html index f9181e05e1b..a17d5f27654 100644 --- a/static/usage/v7/grid/fixed/demo.html +++ b/static/usage/v7/grid/fixed/demo.html @@ -1,48 +1,46 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - - - - - -
- - - 1 - 2 - 3 - - -
- - - - - \ No newline at end of file + + + +
+ + + 1 + 2 + 3 + + +
+ + + + diff --git a/static/usage/v7/grid/offset-responsive/demo.html b/static/usage/v7/grid/offset-responsive/demo.html index b100572eb92..df9051c60c2 100644 --- a/static/usage/v7/grid/offset-responsive/demo.html +++ b/static/usage/v7/grid/offset-responsive/demo.html @@ -1,70 +1,68 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ No offset for xs breakpoint, offset 1st column for sm and up + + + 1 + 2 + 3 + 4 + 5 + + - - - -
- 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 + + - 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 - - -
- - - - - \ No newline at end of file + 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/v7/grid/offset/demo.html b/static/usage/v7/grid/offset/demo.html index f465321f61b..fb2274aec26 100644 --- a/static/usage/v7/grid/offset/demo.html +++ b/static/usage/v7/grid/offset/demo.html @@ -1,69 +1,67 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ Column 2 has offset set to "3" + + + 1 + 2 + 3 + + - - - -
- Column 2 has offset set to "3" - - - 1 - 2 - 3 - - + Column 5 has offset set to "2" + + + 1 + 2 + 3 + 4 + 5 + + - Column 5 has offset set to "2" - - - 1 - 2 - 3 - 4 - 5 - - - - Column 1 has offset set to "4" - - - 1 - 2 - - -
- - - - - \ No newline at end of file + Column 1 has offset set to "4" + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v7/grid/push-pull-responsive/demo.html b/static/usage/v7/grid/push-pull-responsive/demo.html index 924f47f862f..a5ce9d24ee8 100644 --- a/static/usage/v7/grid/push-pull-responsive/demo.html +++ b/static/usage/v7/grid/push-pull-responsive/demo.html @@ -1,71 +1,69 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ No change for xs breakpoint, push 1st column & pull 2nd column for sm and up + + + 1 + 2 + + - - - -
- 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 + + - 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 - - -
- - - - - \ No newline at end of file + 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/v7/grid/push-pull/demo.html b/static/usage/v7/grid/push-pull/demo.html index 32baee94430..2a462a5e7c0 100644 --- a/static/usage/v7/grid/push-pull/demo.html +++ b/static/usage/v7/grid/push-pull/demo.html @@ -1,73 +1,77 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ Column 1 has push set to "4" and column 2 has pull set to + "4" + + + 1 + 2 + 3 + + - - - -
- 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 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 - - -
- - - - - \ No newline at end of file + Column 1 has push set to "3" and column 2 has pull set to + "9" + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v7/grid/size-auto/demo.html b/static/usage/v7/grid/size-auto/demo.html index d5c5bcc80f9..973bd21b8a4 100644 --- a/static/usage/v7/grid/size-auto/demo.html +++ b/static/usage/v7/grid/size-auto/demo.html @@ -1,78 +1,76 @@ + + + + Grid + + + + - - - - Grid - - - - + + - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - } - - + + + +
+ Column 1 has size set to "auto" + + + 1 + 2 + 3 + + - - - -
- 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 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
- - - -
- - - - - \ No newline at end of file + Column 2 has size set to "auto" and a defined width + + + 1 + +
2
+ + + +
+ + + + diff --git a/static/usage/v7/grid/size-responsive/demo.html b/static/usage/v7/grid/size-responsive/demo.html index 77592878d13..3618fdc86d1 100644 --- a/static/usage/v7/grid/size-responsive/demo.html +++ b/static/usage/v7/grid/size-responsive/demo.html @@ -1,72 +1,70 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ Stacked for xs breakpoint, equal width for sm and up + + + 1 + 2 + 3 + 4 + + - - - -
- 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 + + - 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 - - -
- - - - - \ No newline at end of file + 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/v7/grid/size/demo.html b/static/usage/v7/grid/size/demo.html index 127f2285643..4db45111d72 100644 --- a/static/usage/v7/grid/size/demo.html +++ b/static/usage/v7/grid/size/demo.html @@ -1,70 +1,68 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ Column 2 has size set to "8" + + + 1 + 2 + 3 + + - - - -
- 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 3 & 4 have size set to "3" - - - 1 - 2 - 3 - 4 - 5 - 6 - - - - Columns 1 & 2 have size set to "4" - - - 1 - 2 - - -
- - - - - \ No newline at end of file + Columns 1 & 2 have size set to "4" + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v7/header/basic/demo.html b/static/usage/v7/header/basic/demo.html index ef36c88c176..66f341c69c0 100644 --- a/static/usage/v7/header/basic/demo.html +++ b/static/usage/v7/header/basic/demo.html @@ -1,28 +1,25 @@ + + + + Header + + + + + - - - - Header - - - - - - - - - - - - Header - - - -

Content

- - - - - \ No newline at end of file + + + + + Header + + + +

Content

+ + + + diff --git a/static/usage/v7/header/condense/demo.html b/static/usage/v7/header/condense/demo.html index bbfd48664aa..17594d4e024 100644 --- a/static/usage/v7/header/condense/demo.html +++ b/static/usage/v7/header/condense/demo.html @@ -1,73 +1,92 @@ + + + + Header + + + + + - - - - Header - - - - - - - - - - - - Header - - - - + + + - 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.

+
+

Animal Facts

-

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.

+

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. +

-

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.

+

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. +

-

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.

+

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. +

-

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.

-
- - - +

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. +

- \ No newline at end of file +

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/v7/header/custom-scroll-target/demo.html b/static/usage/v7/header/custom-scroll-target/demo.html index 4c56d609f51..c9721ebd1f3 100644 --- a/static/usage/v7/header/custom-scroll-target/demo.html +++ b/static/usage/v7/header/custom-scroll-target/demo.html @@ -1,78 +1,98 @@ + + + + Header + + + + - - - - Header - - - - + + - height: 100%; - width: 100%; - overflow-y: auto; - } - - + + + + + Header + + + +
+

Animal Facts

- - - - - 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. +

-

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. +

-

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. +

-

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. +

-

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.

-
- - - - - \ No newline at end of file +

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/v7/header/fade/demo.html b/static/usage/v7/header/fade/demo.html index 08c9859a796..fc2d26aa3d3 100644 --- a/static/usage/v7/header/fade/demo.html +++ b/static/usage/v7/header/fade/demo.html @@ -1,65 +1,82 @@ + + + + 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. +

- - - - - Header - - - -

Animal Facts

+

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. +

-

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.

+

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. +

-

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.

+

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. +

-

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.

- - - - - \ No newline at end of file +

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/v7/header/no-border/demo.html b/static/usage/v7/header/no-border/demo.html index 8f671bb39f2..2f60ef6fd1c 100644 --- a/static/usage/v7/header/no-border/demo.html +++ b/static/usage/v7/header/no-border/demo.html @@ -1,28 +1,25 @@ + + + + Header + + + + + - - - - Header - - - - - - - - - - - - Header - - - -

Content

- - - - - \ No newline at end of file + + + + + Header + + + +

Content

+ + + + diff --git a/static/usage/v7/header/translucent/demo.html b/static/usage/v7/header/translucent/demo.html index 4d9332e1047..3172fe01bc7 100644 --- a/static/usage/v7/header/translucent/demo.html +++ b/static/usage/v7/header/translucent/demo.html @@ -1,65 +1,82 @@ + + + + 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. +

- - - - - Header - - - -

Animal Facts

+

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. +

-

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.

+

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. +

-

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.

+

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. +

-

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.

- - - - - \ No newline at end of file +

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/v7/icon/basic/demo.html b/static/usage/v7/icon/basic/demo.html index 841eecd5bae..1fec16dfe09 100644 --- a/static/usage/v7/icon/basic/demo.html +++ b/static/usage/v7/icon/basic/demo.html @@ -1,28 +1,25 @@ + + + + Icon + + + + + - - - - Icon - - - - - - - - - - -
- - - - -
- - - - - \ No newline at end of file + + + +
+ + + + +
+ + + + diff --git a/static/usage/v7/img/basic/demo.html b/static/usage/v7/img/basic/demo.html index 46c58790131..75747152f61 100644 --- a/static/usage/v7/img/basic/demo.html +++ b/static/usage/v7/img/basic/demo.html @@ -1,31 +1,31 @@ + + + + Image + + + + - - - - Image - - - - + + - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/infinite-scroll/basic/demo.html b/static/usage/v7/infinite-scroll/basic/demo.html index d9a9aa8a765..e7bc2c658c0 100644 --- a/static/usage/v7/infinite-scroll/basic/demo.html +++ b/static/usage/v7/infinite-scroll/basic/demo.html @@ -1,63 +1,60 @@ - - - - - Infinite Scroll - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - \ No newline at end of file + generateItems(); + + + diff --git a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html index 84ea18af65a..3970f5091a0 100644 --- a/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html +++ b/static/usage/v7/infinite-scroll/custom-infinite-scroll-content/demo.html @@ -1,82 +1,117 @@ + + + + Infinite Scroll + + + + + - + .infinite-scroll-content { + text-align: center; + padding: 20px 0; + } + + - - - - - -
- - - - - - - - - -
- - - - - - \ No newline at end of file + generateItems(); + + + diff --git a/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html index d7848616e34..7881a0abac8 100644 --- a/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html +++ b/static/usage/v7/infinite-scroll/infinite-scroll-content/demo.html @@ -1,56 +1,53 @@ - - - - - Infinite Scroll - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - \ No newline at end of file + generateItems(); + + + diff --git a/static/usage/v7/input/basic/demo.html b/static/usage/v7/input/basic/demo.html index 84ee93d2ba5..69bbde23b42 100644 --- a/static/usage/v7/input/basic/demo.html +++ b/static/usage/v7/input/basic/demo.html @@ -1,50 +1,48 @@ - - - - - Input - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - -
- - - - + + + + Input + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/static/usage/v7/input/clear/demo.html b/static/usage/v7/input/clear/demo.html index 90c0083be5e..39074873dbc 100644 --- a/static/usage/v7/input/clear/demo.html +++ b/static/usage/v7/input/clear/demo.html @@ -1,48 +1,59 @@ + + + + Input + + + + - - - - Input - - - - + + - - + + + +
+ + + + + - - - -
- - - - - - - - - - - - - - - - -
- - - + + + + + + + + + +
+ + + diff --git a/static/usage/v7/input/counter/demo.html b/static/usage/v7/input/counter/demo.html index 05e11d1b739..ad98ed249eb 100644 --- a/static/usage/v7/input/counter/demo.html +++ b/static/usage/v7/input/counter/demo.html @@ -1,41 +1,44 @@ + + + + Item + + + + - - - - Item - - - - + + - width: 300px; - margin: 0 auto; - } - - + + + +
+ - - - -
- - - -
- - - - - + +
+ + + + diff --git a/static/usage/v7/input/fill/demo.html b/static/usage/v7/input/fill/demo.html index 43ca4194ff3..d7894cda783 100644 --- a/static/usage/v7/input/fill/demo.html +++ b/static/usage/v7/input/fill/demo.html @@ -1,36 +1,39 @@ + + + + Input + + + + - - - - Input - - - - + + - width: 300px; - margin: 0 auto; - } - - - - - - -
- - - -
- - - + + + +
+ + +
+ + + diff --git a/static/usage/v7/input/filtering/demo.html b/static/usage/v7/input/filtering/demo.html index e915340712d..d92ff4817a4 100644 --- a/static/usage/v7/input/filtering/demo.html +++ b/static/usage/v7/input/filtering/demo.html @@ -1,38 +1,36 @@ + + + + Input + + + + + - - - - Input - - - - - + + + +
+ + + + + +
+ + - - - -
- - - - - -
- - - - - + + diff --git a/static/usage/v7/input/helper-error/demo.html b/static/usage/v7/input/helper-error/demo.html index 6cc21cf8492..cf2c371af95 100644 --- a/static/usage/v7/input/helper-error/demo.html +++ b/static/usage/v7/input/helper-error/demo.html @@ -1,56 +1,62 @@ - - - - - Input - - - - - - - - - - -
- -
- - - - - - + + + + Input + + + + + + + + + + +
+ +
+ + + + + diff --git a/static/usage/v7/input/label-placement/demo.html b/static/usage/v7/input/label-placement/demo.html index ca7f2ff1d65..1b96b99673a 100644 --- a/static/usage/v7/input/label-placement/demo.html +++ b/static/usage/v7/input/label-placement/demo.html @@ -1,46 +1,44 @@ + + + + Input + + + + - - - - Input - - - - + + - - + + + +
+ + + + - - - -
- - - - + + + - - - - - - - - - - - - -
- - - + + + + + + + +
+ + + diff --git a/static/usage/v7/input/theming/colors/demo.html b/static/usage/v7/input/theming/colors/demo.html index 3723e443ae0..dd204e4074a 100644 --- a/static/usage/v7/input/theming/colors/demo.html +++ b/static/usage/v7/input/theming/colors/demo.html @@ -1,44 +1,42 @@ + + + + Input + + + + - - - - Input - - - - + - - - - - -
- - - - - - - - - -
- - - + .container ion-input { + flex: 1 1 33%; + } + + + + + +
+ + + + + + + + + +
+ + + diff --git a/static/usage/v7/input/theming/css-properties/demo.html b/static/usage/v7/input/theming/css-properties/demo.html index 5cd06f9e4a0..9acf641e5ff 100644 --- a/static/usage/v7/input/theming/css-properties/demo.html +++ b/static/usage/v7/input/theming/css-properties/demo.html @@ -1,55 +1,53 @@ + + + + Input + + + + - - - - Input - - - - + - - - - - -
- -
- - - + ion-input.custom .helper-text, + ion-input.custom .counter { + color: var(--ion-color-step-700, #373737); + } + + + + + +
+ +
+ + + diff --git a/static/usage/v7/input/types/demo.html b/static/usage/v7/input/types/demo.html index 68b043daa52..f1e21f6bea9 100644 --- a/static/usage/v7/input/types/demo.html +++ b/static/usage/v7/input/types/demo.html @@ -1,50 +1,48 @@ - - - - - Input - - - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - -
- - - - + + + + Input + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/static/usage/v7/item-divider/basic/demo.html b/static/usage/v7/item-divider/basic/demo.html index c1159861489..77ff85117d6 100644 --- a/static/usage/v7/item-divider/basic/demo.html +++ b/static/usage/v7/item-divider/basic/demo.html @@ -1,66 +1,60 @@ + + + + Item Divider + + + + - - - - Item Divider - - - - + + - - + + + +
+ + + + Section A + - - - -
- - - - - Section A - - + + A1 + + + A2 + + + A3 + + - - A1 - - - A2 - - - A3 - - + + + Section B + - - - - Section B - - - - - B1 - - - B2 - - - B3 - - - -
- - - - - \ No newline at end of file + + B1 + + + B2 + + + B3 + + + +
+ + + + diff --git a/static/usage/v7/item-divider/theming/colors/demo.html b/static/usage/v7/item-divider/theming/colors/demo.html index c48614ce69d..b325636c866 100644 --- a/static/usage/v7/item-divider/theming/colors/demo.html +++ b/static/usage/v7/item-divider/theming/colors/demo.html @@ -1,59 +1,57 @@ + + + + Item Divider + + + + - - - - Item Divider - - - - + + - - - - - - -
- - Default - - - Primary - - - Secondary - - - Tertiary - - - Success - - - Warning - - - Danger - - - Light - - - Medium - - - Dark - -
- - - - - \ No newline at end of file + + + +
+ + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +
+ + + + diff --git a/static/usage/v7/item-divider/theming/css-properties/demo.html b/static/usage/v7/item-divider/theming/css-properties/demo.html index 44d9d92e0ec..79c65b82ac8 100644 --- a/static/usage/v7/item-divider/theming/css-properties/demo.html +++ b/static/usage/v7/item-divider/theming/css-properties/demo.html @@ -1,40 +1,36 @@ + + + + Item Divider + + + + - - - - Item Divider - - - - + + - --padding-top: 10px; - --padding-bottom: 10px; - --padding-start: 20px; - --padding-end: 20px; - } - - - - - - -
- - - Item Divider - - -
- - - - - \ No newline at end of file + + + +
+ + Item Divider + +
+ + + + diff --git a/static/usage/v7/item-group/basic/demo.html b/static/usage/v7/item-group/basic/demo.html index e46bc1a8cef..80dc2487456 100644 --- a/static/usage/v7/item-group/basic/demo.html +++ b/static/usage/v7/item-group/basic/demo.html @@ -1,60 +1,58 @@ + + + + Item Group + + + + - - - - Item Group - - - - + + - - + + + +
+ + + A + - - - -
- - - A - + + Angola + + + Argentina + + + Armenia + + - - Angola - - - Argentina - - - Armenia - - + + + B + - - - B - - - - Bangladesh - - - Belarus - - - Belgium - - -
- - - - - \ No newline at end of file + + Bangladesh + + + Belarus + + + Belgium + + +
+ + + + diff --git a/static/usage/v7/item-group/sliding-items/demo.html b/static/usage/v7/item-group/sliding-items/demo.html index 7994b575b79..689a26c2c24 100644 --- a/static/usage/v7/item-group/sliding-items/demo.html +++ b/static/usage/v7/item-group/sliding-items/demo.html @@ -1,122 +1,92 @@ + + + + Item Group + + + + - - - - Item Group - - - - + + - - + + + +
+ + + Fruits + - - - -
- - - - Fruits - - + + + Grapes + + + Favorite + + - - - - Grapes - - - - - Favorite - - - + + + Apples + + + Favorite + + - - - - Apples - - - - - Favorite - - - + + + Bananas + + + Favorite + + + - - - - Bananas - - - - - Favorite - - - - + + + Vegetables + - - - - Vegetables - - + + + Carrots + + + Favorite + + - - - - Carrots - - - - - Favorite - - - + + + Broccoli + + + Favorite + + - - - - Broccoli - - - - - Favorite - - - - - - - - Celery - - - - - Favorite - - - - -
- - - - - \ No newline at end of file + + + Celery + + + Favorite + + + +
+ + + + diff --git a/static/usage/v7/item-sliding/basic/demo.html b/static/usage/v7/item-sliding/basic/demo.html index f0b445d8063..2349be859a6 100644 --- a/static/usage/v7/item-sliding/basic/demo.html +++ b/static/usage/v7/item-sliding/basic/demo.html @@ -1,66 +1,64 @@ + + + + Item Sliding + + + + - - - - Item Sliding - - - - + + - - + + + +
+ + + + Sliding Item with End Options + - - - -
- - - - Sliding Item with End Options - + + Favorite + Delete + + - - Favorite - Delete - - + + + Archive + - - - Archive - + + Sliding Item with Start Options + + - - Sliding Item with Start Options - - + + + Archive + - - - Archive - + + Sliding Item with Options on Both Sides + - - Sliding Item with Options on Both Sides - - - - Favorite - Delete - - - -
- - - - - \ No newline at end of file + + Favorite + Delete + + + +
+ + + + diff --git a/static/usage/v7/item-sliding/expandable/demo.html b/static/usage/v7/item-sliding/expandable/demo.html index 5f8534da2f6..28790e13338 100644 --- a/static/usage/v7/item-sliding/expandable/demo.html +++ b/static/usage/v7/item-sliding/expandable/demo.html @@ -1,45 +1,43 @@ + + + + Item Sliding + + + + - - - - Item Sliding - - - - + + - - + + + +
+ + + + Archive + - - - -
- - - - Archive - + + Sliding Item with Expandable Options + - - Sliding Item with Expandable Options - - - - Favorite - Delete - - - -
- - - - - \ No newline at end of file + + Favorite + Delete + + + +
+ + + + diff --git a/static/usage/v7/item-sliding/icons/demo.html b/static/usage/v7/item-sliding/icons/demo.html index b2cc8b3c100..90179c174c4 100644 --- a/static/usage/v7/item-sliding/icons/demo.html +++ b/static/usage/v7/item-sliding/icons/demo.html @@ -1,156 +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 - - - - -
- - - - - \ No newline at end of file + + + + 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/v7/item/basic/demo.html b/static/usage/v7/item/basic/demo.html index 337645b0eac..9eccd18a724 100644 --- a/static/usage/v7/item/basic/demo.html +++ b/static/usage/v7/item/basic/demo.html @@ -1,69 +1,65 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + Basic 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 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. + + - - - 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

+ + - - -

H1 Heading

-

Paragraph

- - + + +

H2 Heading

+

Paragraph

+ + - - -

H2 Heading

-

Paragraph

- - - - - -

H3 Heading

-

Paragraph

- - -
- - - - - \ No newline at end of file + + +

H3 Heading

+

Paragraph

+ + +
+ + + + diff --git a/static/usage/v7/item/buttons/demo.html b/static/usage/v7/item/buttons/demo.html index 219d9b30ea4..2e5d6c89de5 100644 --- a/static/usage/v7/item/buttons/demo.html +++ b/static/usage/v7/item/buttons/demo.html @@ -1,74 +1,62 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + Start + Default Buttons + End + - - - -
- - - Start - - Default Buttons - - End - - + + + Start + + + Buttons with Icons + + + End + + - - - Start - - - Buttons with Icons - - - End - - + + + + + Icon only Buttons + + + + - - - - - Icon only Buttons - - - - - - - Button Sizes - - Small - - - Default - - - Large - - -
- - - - - \ No newline at end of file + + Button Sizes + Small + Default + Large + +
+ + + + diff --git a/static/usage/v7/item/clickable/demo.html b/static/usage/v7/item/clickable/demo.html index 8d77b13c541..58525e975ec 100644 --- a/static/usage/v7/item/clickable/demo.html +++ b/static/usage/v7/item/clickable/demo.html @@ -1,44 +1,42 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + Anchor Item + - - - -
- - Anchor Item - + + Disabled Anchor Item + - - Disabled Anchor Item - + + Button Item + - - Button Item - - - - Disabled Button Item - -
- - - - - \ No newline at end of file + + Disabled Button Item + +
+ + + + diff --git a/static/usage/v7/item/detail-arrows/demo.html b/static/usage/v7/item/detail-arrows/demo.html index 07aa3e65bc7..aeb2acd1200 100644 --- a/static/usage/v7/item/detail-arrows/demo.html +++ b/static/usage/v7/item/detail-arrows/demo.html @@ -1,64 +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

- - -
- - - - - \ No newline at end of file + + + + 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/v7/item/icons/demo.html b/static/usage/v7/item/icons/demo.html index 2fa9068224f..69fcbdf4e4c 100644 --- a/static/usage/v7/item/icons/demo.html +++ b/static/usage/v7/item/icons/demo.html @@ -1,56 +1,46 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + Default Icon + + - - - -
- - - Default Icon - - - + + Large Icon + + - - - Large Icon - - - + + Small Icon + + - - - Small Icon - - - - - - - - Default Icon - - -
- - - - - \ No newline at end of file + + + Default Icon + +
+ + + + diff --git a/static/usage/v7/item/inputs/demo.html b/static/usage/v7/item/inputs/demo.html index 32951b2e970..b4021dbc714 100644 --- a/static/usage/v7/item/inputs/demo.html +++ b/static/usage/v7/item/inputs/demo.html @@ -1,84 +1,84 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + + - - - -
- - - + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + - - - No Game Console - NES - Nintendo64 - PlayStation - Sega Genesis - Sega Saturn - SNES - - + + Toggle + - - - Toggle - - + + Checkbox + - - - Checkbox - - - - - -
Range
- - -
- - - - - \ No newline at end of file + + +
Range
+ + +
+ + + + diff --git a/static/usage/v7/item/lines/demo.html b/static/usage/v7/item/lines/demo.html index 8d273b1d037..a8a2f17bf02 100644 --- a/static/usage/v7/item/lines/demo.html +++ b/static/usage/v7/item/lines/demo.html @@ -1,70 +1,66 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + Default Item Lines + - - - -
- - - Default Item Lines - - + + Item Lines Inset + - - Item Lines Inset - + + Item Lines Full + - - Item Lines Full - + + Item Lines None + - - Item Lines None - + + + Default Item Lines + + - - - Default Item Lines - - + + + Item Lines Inset + + - - - Item Lines Inset - - + + + Item Lines Full + + - - - Item Lines Full - - - - - - Item Lines None - - -
- - - - - \ No newline at end of file + + + Item Lines None + + +
+ + + + diff --git a/static/usage/v7/item/media/demo.html b/static/usage/v7/item/media/demo.html index 201ee60d906..fff1b9662a1 100644 --- a/static/usage/v7/item/media/demo.html +++ b/static/usage/v7/item/media/demo.html @@ -1,46 +1,40 @@ + + + + Item + + + + - - - - Item - - - - + + - - + + + +
+ + + Silhouette of a person's head + + Avatar Item + - - - -
- - - Silhouette of a person's head - - - Avatar Item - - - - - - Silhouette of mountains - - - Thumbnail Item - - -
- - - - - \ No newline at end of file + + + Silhouette of mountains + + Thumbnail Item + +
+ + + + diff --git a/static/usage/v7/item/theming/colors/demo.html b/static/usage/v7/item/theming/colors/demo.html index 606fb8e829e..81af5993f8f 100644 --- a/static/usage/v7/item/theming/colors/demo.html +++ b/static/usage/v7/item/theming/colors/demo.html @@ -1,59 +1,57 @@ + + + + Item + + + + - - - - Item - - - - + + - - - - - - -
- - Default Item - - - Primary Item - - - Secondary Item - - - Tertiary Item - - - Success Item - - - Warning Item - - - Danger Item - - - Light Item - - - Medium Item - - - Dark Item - -
- - - - - \ No newline at end of file + + + +
+ + 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/v7/item/theming/css-properties/demo.html b/static/usage/v7/item/theming/css-properties/demo.html index a5dba2f3187..2639e77e6e4 100644 --- a/static/usage/v7/item/theming/css-properties/demo.html +++ b/static/usage/v7/item/theming/css-properties/demo.html @@ -1,57 +1,55 @@ - - - - - Item - - - - - - - - - - - -
- - Custom Item - - - - Custom Item - - - - Custom Item - -
- - - - - \ No newline at end of file + + + + Item + + + + + + + + + + + +
+ + Custom Item + + + + Custom Item + + + + Custom Item + +
+ + + + diff --git a/static/usage/v7/item/theming/css-shadow-parts/demo.html b/static/usage/v7/item/theming/css-shadow-parts/demo.html index a05b86c294f..633f33f4a59 100644 --- a/static/usage/v7/item/theming/css-shadow-parts/demo.html +++ b/static/usage/v7/item/theming/css-shadow-parts/demo.html @@ -1,57 +1,55 @@ - - - - - Item - - - - - - - - - - - -
- - Custom Item - - - - Custom Item - - - - Custom Item - -
- - - - - \ No newline at end of file + + + + Item + + + + + + + + + + + +
+ + Custom Item + + + + Custom Item + + + + Custom Item + +
+ + + + diff --git a/static/usage/v7/item/theming/input-highlight/demo.html b/static/usage/v7/item/theming/input-highlight/demo.html index 88073d0e422..c112dd699fe 100644 --- a/static/usage/v7/item/theming/input-highlight/demo.html +++ b/static/usage/v7/item/theming/input-highlight/demo.html @@ -1,50 +1,48 @@ + + + + Item + + + + - - - - Item - - - - + + - ion-item { - --highlight-height: 2px; - --highlight-color-focused: #43e7f3; - --highlight-color-valid: #6f58d8; - --highlight-color-invalid: #ff46be; - } - - + + + +
+ + Custom Input Highlight: Focused + + - - - -
- - Custom Input Highlight: Focused - - + + Custom Input Highlight: Focused & Valid + + - - Custom Input Highlight: Focused & Valid - - - - - Custom Input Highlight: Focused & Invalid - - -
- - - - - \ No newline at end of file + + Custom Input Highlight: Focused & Invalid + + +
+ + + + diff --git a/static/usage/v7/label/basic/demo.html b/static/usage/v7/label/basic/demo.html index 6e1a59b37bd..68fa7830e08 100644 --- a/static/usage/v7/label/basic/demo.html +++ b/static/usage/v7/label/basic/demo.html @@ -1,24 +1,22 @@ + + + + Label + + + + + - - - - Label - - - - - - - - - -
- Label -
- - - - - \ No newline at end of file + + + +
+ Label +
+ + + + diff --git a/static/usage/v7/label/theming/colors/demo.html b/static/usage/v7/label/theming/colors/demo.html index ed2b8069d9c..59aa68b5c6a 100644 --- a/static/usage/v7/label/theming/colors/demo.html +++ b/static/usage/v7/label/theming/colors/demo.html @@ -1,39 +1,37 @@ + + + + Label + + + + - - - - Label - - - - + + - - - - - - -
- Default - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark -
- - - - - \ No newline at end of file + + + +
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+ + + + diff --git a/static/usage/v7/list-header/basic/demo.html b/static/usage/v7/list-header/basic/demo.html index 848d0422f07..a821e9765a0 100644 --- a/static/usage/v7/list-header/basic/demo.html +++ b/static/usage/v7/list-header/basic/demo.html @@ -1,49 +1,47 @@ + + + + List Header + + + + - - - - List Header - - - - + + - - - - - - -
- - - Video Games - - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - -
- - - - - \ No newline at end of file + + + +
+ + + Video Games + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v7/list-header/buttons/demo.html b/static/usage/v7/list-header/buttons/demo.html index 5689e35d157..ebe2e10710f 100644 --- a/static/usage/v7/list-header/buttons/demo.html +++ b/static/usage/v7/list-header/buttons/demo.html @@ -1,50 +1,48 @@ + + + + List Header + + + + - - - - List Header - - - - + + - - - - - - -
- - - Video Games - See All - - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - -
- - - - - \ No newline at end of file + + + +
+ + + Video Games + See All + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v7/list-header/lines/demo.html b/static/usage/v7/list-header/lines/demo.html index 12904d120c5..be1b65a79a8 100644 --- a/static/usage/v7/list-header/lines/demo.html +++ b/static/usage/v7/list-header/lines/demo.html @@ -1,64 +1,62 @@ + + + + List Header + + + + - - - - List Header - - - - + + - - + + + +
+ + + Default + + + Item + + + Item + + - - - -
- - - Default - - - Item - - - Item - - + + + Inset + + + Item + + + Item + + - - - Inset - - - Item - - - Item - - - - - - Full - - - Item - - - Item - - -
- - - - - \ No newline at end of file + + + Full + + + Item + + + Item + + +
+ + + + diff --git a/static/usage/v7/list-header/theming/colors/demo.html b/static/usage/v7/list-header/theming/colors/demo.html index 9f2b1c01745..86c098a58ba 100644 --- a/static/usage/v7/list-header/theming/colors/demo.html +++ b/static/usage/v7/list-header/theming/colors/demo.html @@ -1,59 +1,57 @@ + + + + List Header + + + + - - - - List Header - - - - + + - - - - - - -
- - Default - - - Primary - - - Secondary - - - Tertiary - - - Success - - - Warning - - - Danger - - - Light - - - Medium - - - Dark - -
- - - - - \ No newline at end of file + + + +
+ + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +
+ + + + diff --git a/static/usage/v7/list-header/theming/css-properties/demo.html b/static/usage/v7/list-header/theming/css-properties/demo.html index 6aad9464229..e67134191c9 100644 --- a/static/usage/v7/list-header/theming/css-properties/demo.html +++ b/static/usage/v7/list-header/theming/css-properties/demo.html @@ -1,37 +1,35 @@ + + + + List Header + + + + - - - - List Header - - - - + + - --border-width: 0 0 4px 0; - --border-color: #f24aec; - --border-style: double; - } - - - - - - -
- - Custom List Header - -
- - - - - \ No newline at end of file + + + +
+ + Custom List Header + +
+ + + + diff --git a/static/usage/v7/list/basic/demo.html b/static/usage/v7/list/basic/demo.html index 6189885bce9..b6d086f4506 100644 --- a/static/usage/v7/list/basic/demo.html +++ b/static/usage/v7/list/basic/demo.html @@ -1,46 +1,44 @@ + + + + List + + + + - - - - List - - - - + + - - - - - - -
- - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - -
- - - - - \ No newline at end of file + + + +
+ + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v7/list/inset/demo.html b/static/usage/v7/list/inset/demo.html index eb342ccc056..546fb33e456 100644 --- a/static/usage/v7/list/inset/demo.html +++ b/static/usage/v7/list/inset/demo.html @@ -1,51 +1,49 @@ + + + + List + + + + - - - - List - - - - + + - .container { - flex-flow: column; - align-items: stretch; - } - - - - - - -
- - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - -
- - - - - \ No newline at end of file + + + +
+ + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v7/list/lines/demo.html b/static/usage/v7/list/lines/demo.html index 55b1190b9fb..b1f3a046d2c 100644 --- a/static/usage/v7/list/lines/demo.html +++ b/static/usage/v7/list/lines/demo.html @@ -1,66 +1,64 @@ + + + + List + + + + - - - - List - - - - + + - - + + + +
+ + + Full Lines + + + Full Lines + + + Full Lines + + - - - -
- - - Full Lines - - - Full Lines - - - Full Lines - - + + + Inset Lines + + + Inset Lines + + + Inset Lines + + - - - Inset Lines - - - Inset Lines - - - Inset Lines - - - - - - No Lines - - - No Lines - - - No Lines - - -
- - - - - \ No newline at end of file + + + No Lines + + + No Lines + + + No Lines + + +
+ + + + diff --git a/static/usage/v7/loading/controller/demo.html b/static/usage/v7/loading/controller/demo.html index eeb6f187b0a..430a17e2402 100644 --- a/static/usage/v7/loading/controller/demo.html +++ b/static/usage/v7/loading/controller/demo.html @@ -1,39 +1,37 @@ + + + + Datetime + + + + + + - - - - Datetime - - - - - - + + + +
+ Show Loading +
+ + - - - -
- Show Loading -
- - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v7/loading/inline/demo.html b/static/usage/v7/loading/inline/demo.html index 47d572b18d0..e45849451ff 100644 --- a/static/usage/v7/loading/inline/demo.html +++ b/static/usage/v7/loading/inline/demo.html @@ -1,26 +1,23 @@ + + + + Loading + + + + + - - - - Loading - - - - - - - - - -
- Show Loading - -
- - - - - + + + +
+ Show Loading + +
+ + + diff --git a/static/usage/v7/loading/spinners/demo.html b/static/usage/v7/loading/spinners/demo.html index a54c53cdb67..47fc0a96812 100644 --- a/static/usage/v7/loading/spinners/demo.html +++ b/static/usage/v7/loading/spinners/demo.html @@ -1,25 +1,23 @@ + + + + Loading + + + + + - - - - Loading - - - - - - - - - -
- Show Loading - -
- - - - + + + +
+ Show Loading + +
+ + + diff --git a/static/usage/v7/loading/theming/demo.html b/static/usage/v7/loading/theming/demo.html index 868f0964c21..771ad6aa098 100644 --- a/static/usage/v7/loading/theming/demo.html +++ b/static/usage/v7/loading/theming/demo.html @@ -1,37 +1,35 @@ + + + + Datetime + + + + + + - - - - - -
- Show Loading - -
- - - + color: #1c6dff; + } + + + + + +
+ Show Loading + +
+ + + diff --git a/static/usage/v7/menu/basic/demo.html b/static/usage/v7/menu/basic/demo.html index 5aef69baa92..41886694bea 100644 --- a/static/usage/v7/menu/basic/demo.html +++ b/static/usage/v7/menu/basic/demo.html @@ -1,40 +1,36 @@ + + + + Menu + + + + + - - - - Menu - - - - - - - - - - - - Menu Content - - - This is the menu content. - -
- - - - - - Menu - - - - Tap the button in the toolbar to open the menu. - -
- - - - \ No newline at end of file + + + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+ + + diff --git a/static/usage/v7/menu/theming/demo.html b/static/usage/v7/menu/theming/demo.html index 5b665efff50..cba69ad4c5a 100644 --- a/static/usage/v7/menu/theming/demo.html +++ b/static/usage/v7/menu/theming/demo.html @@ -1,51 +1,47 @@ + + + + Menu + + + + + + - box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18); - } - - - - - - - - - Menu Content - - - This is the menu content. - -
- - - - - - Menu - - - - Tap the button in the toolbar to open the menu. - -
- - - - \ No newline at end of file + + + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+ + + diff --git a/static/usage/v7/menu/toggle/demo.html b/static/usage/v7/menu/toggle/demo.html index f101eb3ea4d..e18353d5b1e 100644 --- a/static/usage/v7/menu/toggle/demo.html +++ b/static/usage/v7/menu/toggle/demo.html @@ -1,43 +1,41 @@ + + + + Menu - Toggle + + + + + - - - - Menu - Toggle - - - - - - - - - - - - Menu Content - - - - - Click to close the menu - - - -
- - - Menu - - - - - Click to open the menu - - -
- - - - \ No newline at end of file + + + + + + Menu Content + + + + + Click to close the menu + + + +
+ + + Menu + + + + + Click to open the menu + + +
+ + + diff --git a/static/usage/v7/menu/type/demo.html b/static/usage/v7/menu/type/demo.html index 4ab10b4b2df..cecfb27d688 100644 --- a/static/usage/v7/menu/type/demo.html +++ b/static/usage/v7/menu/type/demo.html @@ -1,74 +1,73 @@ + + + + Menu - Type + + + + + - - - - Menu - Type - - - - - + + + + + + Menu Content + + + + + Click to close the menu + + + - - - - - - Menu Content - - - - - Click to close the menu - - - +
+ + + Menu + + + +

Select an overlay type:

+ + + + overlay + + + + + + reveal + + + + + + push + + + + +
+ + Click to open the menu + + +
+ -
- - - Menu - - - -

Select an overlay type:

- - - - overlay - - - - - - reveal - - - - - - push - - - -
- - Click to open the menu - - -
- + - - - \ No newline at end of file + radioGroup.addEventListener('ionChange', (ev) => { + menu.type = ev.detail.value; + }); + + + diff --git a/static/usage/v7/modal/can-dismiss/boolean/demo.html b/static/usage/v7/modal/can-dismiss/boolean/demo.html index 0e4eba1b41e..284005eda4c 100644 --- a/static/usage/v7/modal/can-dismiss/boolean/demo.html +++ b/static/usage/v7/modal/can-dismiss/boolean/demo.html @@ -1,67 +1,63 @@ - - - - - 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? - - - - - -
- - - + + + + + + +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

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

+ + Do you accept the terms and conditions? + + + + + +
+ + + - - - \ No newline at end of file + + + diff --git a/static/usage/v7/modal/can-dismiss/function/demo.html b/static/usage/v7/modal/can-dismiss/function/demo.html index 594e6d45c28..066b1ad833c 100644 --- a/static/usage/v7/modal/can-dismiss/function/demo.html +++ b/static/usage/v7/modal/can-dismiss/function/demo.html @@ -1,74 +1,74 @@ + + + + Modal | Can Dismiss + + + + + - - - - Modal | Can Dismiss - - - - + + +
+ + + App + + + + Open - + + + + Modal + + Close + + + + +

You will be prompted when closing this modal.

+ + + +
+ - - -
- - - App - - - - Open + - - - \ No newline at end of file + return role === 'confirm'; + } + + + diff --git a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html index 1940f56c143..7b0c09db1a5 100644 --- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html +++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/demo.html @@ -1,57 +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.

- - - -
- - - - - - \ No newline at end of file + + + + 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/v7/modal/card/basic/demo.html b/static/usage/v7/modal/card/basic/demo.html index 49fe5bd279a..b83cf792aab 100644 --- a/static/usage/v7/modal/card/basic/demo.html +++ b/static/usage/v7/modal/card/basic/demo.html @@ -1,90 +1,88 @@ + + + + Modal | Card + + + + + - - - - Modal | Card - - - - - + + +
+ + + App + + + + Open Card Modal - - -
- - - App - - - - Open Card Modal + + + + Modal + + Close + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + +
+ - - - - Modal - - Close - - - - - - - - - - -

Connor Smith

-

Sales Rep

- - - - - - - -

Daniel Smith

-

Product Designer

- - - - - - - -

Greg Smith

-

Director of Operations

- - - - - - - -

Zoey Smith

-

CEO

- - - - - - -
- + - - - \ No newline at end of file + function dismiss() { + modal.dismiss(); + } + + + diff --git a/static/usage/v7/modal/controller/demo.html b/static/usage/v7/modal/controller/demo.html index e840abcf4da..5a146f90afb 100644 --- a/static/usage/v7/modal/controller/demo.html +++ b/static/usage/v7/modal/controller/demo.html @@ -1,37 +1,36 @@ + + + + Modal | Controller + + + + + + - - - - Modal | Controller - - - - - - - - - - - - Controller Modal - - - - Open -

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

- - + + + + + Controller Modal + + + + Open +

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

+ + - - + function cancel() { + modalController.dismiss(null, 'cancel'); + } - \ No newline at end of file + function confirm() { + const input = document.querySelector('ion-input'); + modalController.dismiss(input.value, 'confirm'); + } + + + diff --git a/static/usage/v7/modal/custom-dialogs/demo.html b/static/usage/v7/modal/custom-dialogs/demo.html index a83ce102f6b..ea875f5907b 100644 --- a/static/usage/v7/modal/custom-dialogs/demo.html +++ b/static/usage/v7/modal/custom-dialogs/demo.html @@ -1,81 +1,79 @@ + + + + Modal | Custom Dialog + + + + + + - ion-modal .wrapper { - margin-bottom: 10px; - } - - + + + + + App + + + + Open Custom Dialog - - - - - App - - - - Open Custom Dialog + +
+

Dialog header

- -
-

Dialog header

+ + + + Item 1 + + + + Item 2 + + + + Item 3 + + +
+ + + - - - - Item 1 - - - - Item 2 - - - - Item 3 - - -
- - - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v7/modal/inline/is-open/demo.html b/static/usage/v7/modal/inline/is-open/demo.html index 33256b1f4d7..01f817dd149 100644 --- a/static/usage/v7/modal/inline/is-open/demo.html +++ b/static/usage/v7/modal/inline/is-open/demo.html @@ -1,46 +1,46 @@ + + + + Modal | Inline + + + + + - - - - 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. +

+ + + + - - - - - 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.

- - - - - - - - - \ No newline at end of file + + + diff --git a/static/usage/v7/modal/performance/mount/demo.html b/static/usage/v7/modal/performance/mount/demo.html index 50ef54a637f..018752e92f1 100644 --- a/static/usage/v7/modal/performance/mount/demo.html +++ b/static/usage/v7/modal/performance/mount/demo.html @@ -1,51 +1,47 @@ + + + + Modal | Performance + + + + + - - - - Modal | Performance - - - - - + + + + + Example + + + + Open Modal + + + + + Close + + Modal + + + This content was mounted as soon as the modal was created. + + + - - - - - Example - - - - Open Modal - - - - - Close - - Modal - - - - This content was mounted as soon as the modal was created. - - - - + - - - \ No newline at end of file + const close = () => { + modal.dismiss(); + }; + + + diff --git a/static/usage/v7/modal/sheet/auto-height/demo.html b/static/usage/v7/modal/sheet/auto-height/demo.html index ae6eb5ff6d7..cae6c505043 100644 --- a/static/usage/v7/modal/sheet/auto-height/demo.html +++ b/static/usage/v7/modal/sheet/auto-height/demo.html @@ -1,51 +1,49 @@ + + + + Modal | Sheet + + + + + + - ion-modal { - --height: auto; - } - - + + + + + App + + + + Open Sheet Modal - - - - - App - - - - Open Sheet Modal + +
Block of Content
+ + + - -
Block of Content
- - - - - - + + diff --git a/static/usage/v7/modal/sheet/background-content/demo.html b/static/usage/v7/modal/sheet/background-content/demo.html index 389f7799b59..b2919a37f5c 100644 --- a/static/usage/v7/modal/sheet/background-content/demo.html +++ b/static/usage/v7/modal/sheet/background-content/demo.html @@ -1,106 +1,103 @@ + + + + Modal | Sheet + + + + + + - - - - Modal | Sheet - - - - - - + + + + + App + + + +

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

- - - - - App - - - +
+ - +

0

+ + +
-

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

+ + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + -
- - -

0

- + -
+ - - - \ No newline at end of file + function decrement() { + const counter = document.querySelector('#counter'); + counter.innerHTML = parseInt(counter.innerText) - 1; + } + + + diff --git a/static/usage/v7/modal/sheet/basic/demo.html b/static/usage/v7/modal/sheet/basic/demo.html index f164bb1e617..e1616a939f8 100644 --- a/static/usage/v7/modal/sheet/basic/demo.html +++ b/static/usage/v7/modal/sheet/basic/demo.html @@ -1,82 +1,80 @@ + + + + Modal | Sheet + + + + + - - - - Modal | Sheet - - - - - + + + + + App + + + + Open Sheet Modal - - - - - App - - - - Open Sheet Modal + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + - - - - - - - - - -

Connor Smith

-

Sales Rep

- - - - - - - -

Daniel Smith

-

Product Designer

- - - - - - - -

Greg Smith

-

Director of Operations

- - - - - - - -

Zoey Smith

-

CEO

- - - - - - - + - - - \ No newline at end of file + searchBar.addEventListener('click', () => { + modal.setCurrentBreakpoint(0.75); + }); + + + diff --git a/static/usage/v7/modal/sheet/handle-behavior/demo.html b/static/usage/v7/modal/sheet/handle-behavior/demo.html index d1ef3a70769..4c0962ca7c1 100644 --- a/static/usage/v7/modal/sheet/handle-behavior/demo.html +++ b/static/usage/v7/modal/sheet/handle-behavior/demo.html @@ -1,41 +1,39 @@ + + + + Modal | Sheet + + + + + - - - - Modal | Sheet - - - - - + + + + + App + + + + Open Sheet Modal - - - - - App - - - - Open Sheet Modal + + +
+ Click the handle above to advance to the next breakpoint. +
+ + + + - - -
- Click the handle above to advance to the next breakpoint. -
- - - - + - - - \ No newline at end of file + modal.breakpoints = [0, 0.25, 0.5, 0.75]; + + + diff --git a/static/usage/v7/modal/styling/animations/demo.html b/static/usage/v7/modal/styling/animations/demo.html index aefd300a85f..9a902c8133b 100644 --- a/static/usage/v7/modal/styling/animations/demo.html +++ b/static/usage/v7/modal/styling/animations/demo.html @@ -1,117 +1,114 @@ + + + + Modal | Animations + + + + + + - - - - Modal | Animations - - - - - + + + + + App + + + + Open Modal - + + + + Modal + + Close + + + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + - - - - - App - - - - Open Modal + - - - \ No newline at end of file + function dismiss() { + modal.dismiss(); + } + + + diff --git a/static/usage/v7/nav/modal-navigation/demo.html b/static/usage/v7/nav/modal-navigation/demo.html index 85dc011b83f..4bc94395247 100644 --- a/static/usage/v7/nav/modal-navigation/demo.html +++ b/static/usage/v7/nav/modal-navigation/demo.html @@ -1,106 +1,100 @@ - - - - - Nav | Modal Navigation - - - - - - - - - - - Modal Navigation - - - - Open Modal - - - - Modal - - - Close - - - - - - - - - - - - + + + + + + + + + Modal Navigation + + + + Open Modal + + + + Modal + + Close + + + + + + + + + + + - - - \ No newline at end of file + customElements.define('page-one', PageOne); + customElements.define('page-two', PageTwo); + customElements.define('page-three', PageThree); + + + diff --git a/static/usage/v7/nav/nav-link/demo.html b/static/usage/v7/nav/nav-link/demo.html index f34ceefe4a2..8ff541c5f02 100644 --- a/static/usage/v7/nav/nav-link/demo.html +++ b/static/usage/v7/nav/nav-link/demo.html @@ -1,26 +1,25 @@ + + + + Nav | NavLink + + + + + - - - - Nav | NavLink - - - - - + + + + - - - - - - - - - - \ No newline at end of file + customElements.define('page-one', PageOne); + customElements.define('page-two', PageTwo); + customElements.define('page-three', PageThree); + + + diff --git a/static/usage/v7/note/basic/demo.html b/static/usage/v7/note/basic/demo.html index b5fb2b35894..b6662b02dbc 100644 --- a/static/usage/v7/note/basic/demo.html +++ b/static/usage/v7/note/basic/demo.html @@ -1,25 +1,22 @@ + + + + Note + + + + + - - - - Note - - - - - - - - - - -
- Default Note -
- - - - - \ No newline at end of file + + + +
+ Default Note +
+ + + + diff --git a/static/usage/v7/note/item/demo.html b/static/usage/v7/note/item/demo.html index 9daedeed4ce..d6558dc7e22 100644 --- a/static/usage/v7/note/item/demo.html +++ b/static/usage/v7/note/item/demo.html @@ -1,38 +1,36 @@ + + + + Note + + + + - - - - Note - - - - + + - - + + + +
+ + Label + Note (End) + - - - -
- - Label - Note (End) - - - - Note (Start) - Label - -
- - - - - \ No newline at end of file + + Note (Start) + Label + +
+ + + + diff --git a/static/usage/v7/note/theming/colors/demo.html b/static/usage/v7/note/theming/colors/demo.html index 02e2949c699..db387632ea0 100644 --- a/static/usage/v7/note/theming/colors/demo.html +++ b/static/usage/v7/note/theming/colors/demo.html @@ -1,49 +1,47 @@ + + + + Note + + + + - - - - Note - - - - + + - ion-note { - margin: 0 2px; - } - - - - - - -
-
- Default Note - Primary Note - Secondary Note - Tertiary Note - Success Note - Warning Note - Danger Note - Light Note - Medium Note - Dark Note + + + +
+
+ Default Note + Primary Note + Secondary Note + Tertiary Note + Success Note + Warning Note + Danger Note + Light Note + Medium Note + Dark Note +
-
- - - - - \ No newline at end of file + + + + diff --git a/static/usage/v7/note/theming/css-properties/demo.html b/static/usage/v7/note/theming/css-properties/demo.html index 7c33f048643..bab95ec51a0 100644 --- a/static/usage/v7/note/theming/css-properties/demo.html +++ b/static/usage/v7/note/theming/css-properties/demo.html @@ -1,30 +1,28 @@ + + + + Note + + + + - - - - Note - - - - + + - - - - - - -
- Default Note -
- - - - - \ No newline at end of file + + + +
+ Default Note +
+ + + + diff --git a/static/usage/v7/picker/controller/demo.html b/static/usage/v7/picker/controller/demo.html index 32a92e0cecd..ea0ea153593 100644 --- a/static/usage/v7/picker/controller/demo.html +++ b/static/usage/v7/picker/controller/demo.html @@ -1,65 +1,68 @@ + + + + Picker | Controller + + + + + + - - - - Picker | Controller - - - - - - - - - - -
- Open -
- - - - - - \ No newline at end of file + 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) => { + window.alert(`You selected: ${value.languages.value}`); + }, + }, + ], + }); + await picker.present(); + } + + + diff --git a/static/usage/v7/picker/inline/isOpen/demo.html b/static/usage/v7/picker/inline/isOpen/demo.html index 1c52fd7428e..1ea9a11c35a 100644 --- a/static/usage/v7/picker/inline/isOpen/demo.html +++ b/static/usage/v7/picker/inline/isOpen/demo.html @@ -1,64 +1,67 @@ + + + + Picker | isOpen + + + + + - - - - Picker | isOpen - - - - - + + + +
+ Open + +
+ + + - + picker.buttons = [ + { + text: 'Cancel', + role: 'cancel', + }, + { + text: 'Confirm', + handler: (value) => { + window.alert(`You selected: ${value.languages.value}`); + }, + }, + ]; - \ No newline at end of file + picker.addEventListener('ionPickerDidDismiss', (ev) => { + picker.isOpen = false; + }); + + + diff --git a/static/usage/v7/picker/inline/trigger/demo.html b/static/usage/v7/picker/inline/trigger/demo.html index 378111eee06..4a0f14c6c05 100644 --- a/static/usage/v7/picker/inline/trigger/demo.html +++ b/static/usage/v7/picker/inline/trigger/demo.html @@ -1,60 +1,63 @@ + + + + Picker | Trigger + + + + + - - - - Picker | Trigger - - - - - + + + +
+ Open + +
+ + + - + name: 'languages', + options: [ + { + text: 'JavaScript', + value: 'javascript', + }, + { + text: 'TypeScript', + value: 'typescript', + }, + { + text: 'Rust', + value: 'rust', + }, + { + text: 'C#', + value: 'c#', + }, + ], + }, + ]; - \ No newline at end of file + picker.buttons = [ + { + text: 'Cancel', + role: 'cancel', + }, + { + text: 'Confirm', + handler: (value) => { + window.alert(`You selected: ${value.languages.value}`); + }, + }, + ]; + + + diff --git a/static/usage/v7/picker/multiple-column/demo.html b/static/usage/v7/picker/multiple-column/demo.html index 8e886c58a69..142618d1061 100644 --- a/static/usage/v7/picker/multiple-column/demo.html +++ b/static/usage/v7/picker/multiple-column/demo.html @@ -1,85 +1,93 @@ + + + + Picker | Multiple Columns + + + + + - - - - Picker | Multiple Columns - - - - - + + + +
+ Open + +
+ + + - + name: 'crust', + options: [ + { + text: 'Pan style', + value: 'pan', + }, + { + text: 'Hand tossed', + value: 'hand-tossed', + }, + { + text: 'Stuffed crust', + value: 'stuffed-crust', + }, + ], + }, + ]; - \ No newline at end of file + picker.buttons = [ + { + text: 'Cancel', + role: 'cancel', + }, + { + text: 'Confirm', + handler: (value) => { + window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); + }, + }, + ]; + + + diff --git a/static/usage/v7/popover/customization/positioning/demo.html b/static/usage/v7/popover/customization/positioning/demo.html index 576ea36ad34..5f90bc638bc 100644 --- a/static/usage/v7/popover/customization/positioning/demo.html +++ b/static/usage/v7/popover/customization/positioning/demo.html @@ -1,52 +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! - -
- - - - - \ No newline at end of file + + + + 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/v7/popover/customization/sizing/demo.html b/static/usage/v7/popover/customization/sizing/demo.html index 7f53aa23bd5..89351f1e806 100644 --- a/static/usage/v7/popover/customization/sizing/demo.html +++ b/static/usage/v7/popover/customization/sizing/demo.html @@ -1,32 +1,30 @@ + + + + Popover + + + + + - - - - Popover - - - - - + + + +
+ Size=Auto + + Hello! + - - - -
- Size=Auto - - Hello! - - - Size=Cover - - Hello! - -
- - - - - \ No newline at end of file + Size=Cover + + Hello! + +
+ + + + diff --git a/static/usage/v7/popover/customization/styling/demo.html b/static/usage/v7/popover/customization/styling/demo.html index 35a88342fb0..6dbe274500f 100644 --- a/static/usage/v7/popover/customization/styling/demo.html +++ b/static/usage/v7/popover/customization/styling/demo.html @@ -1,45 +1,43 @@ + + + + Popover + + + + - - - - Popover - - - - + + - ion-popover::part(backdrop) { - background-color: rgb(6, 14, 106); - } - - - - - - -
- Click Me - - Hello Styled World! - -
- - - - - \ No newline at end of file + + + +
+ Click Me + + Hello Styled World! + +
+ + + + diff --git a/static/usage/v7/popover/nested/demo.html b/static/usage/v7/popover/nested/demo.html index f40dadc60c6..89b0c9409af 100644 --- a/static/usage/v7/popover/nested/demo.html +++ b/static/usage/v7/popover/nested/demo.html @@ -1,41 +1,39 @@ + + + + Popover + + + + + - - - - Popover - - - - - + + + +
+ Open Menu + + + + Option 1 + Option 2 + More options... - - - -
- Open Menu - - - - Option 1 - Option 2 - More options... - - - - - Nested option - - - - - - -
- - - - - \ No newline at end of file + + + + Nested option + + + + + + +
+ + + + diff --git a/static/usage/v7/popover/performance/mount/demo.html b/static/usage/v7/popover/performance/mount/demo.html index ebcc9a53e18..5df0be7facf 100644 --- a/static/usage/v7/popover/performance/mount/demo.html +++ b/static/usage/v7/popover/performance/mount/demo.html @@ -1,27 +1,25 @@ + + + + Popover + + + + + - - - - Popover - - - - - - - - - -
- Open Popover - - This content was mounted as soon as the popover was created. - -
- - - - - \ No newline at end of file + + + +
+ Open Popover + + This content was mounted as soon as the popover was created. + +
+ + + + diff --git a/static/usage/v7/popover/presenting/controller/demo.html b/static/usage/v7/popover/presenting/controller/demo.html index 22a76cc9eb0..25db62b4be8 100644 --- a/static/usage/v7/popover/presenting/controller/demo.html +++ b/static/usage/v7/popover/presenting/controller/demo.html @@ -1,63 +1,61 @@ - - - - - Popover - - - - - - - - - - - -
- Click Me -

-
- - - - + + + + + + + + + +
+ Click Me +

+
+ + + + - + const { role } = await popover.onDidDismiss(); + output.innerText = `Popover dismissed with role: ${role}`; + } - \ No newline at end of file + const button = document.querySelector('ion-button'); + button.addEventListener('click', presentPopover); + + + diff --git a/static/usage/v7/popover/presenting/inline-isopen/demo.html b/static/usage/v7/popover/presenting/inline-isopen/demo.html index 6b85ee6fc42..480a87caa67 100644 --- a/static/usage/v7/popover/presenting/inline-isopen/demo.html +++ b/static/usage/v7/popover/presenting/inline-isopen/demo.html @@ -1,39 +1,37 @@ + + + + Popover + + + + + - - - - Popover - - - - - + + + +
+ Click Me + + Hello World! + +
+ + - - - -
- Click Me - - Hello World! - -
- - + - - - \ No newline at end of file + popover.addEventListener('didDismiss', () => (popover.isOpen = false)); + + + diff --git a/static/usage/v7/popover/presenting/inline-trigger/demo.html b/static/usage/v7/popover/presenting/inline-trigger/demo.html index f05008cc1b8..64f56e73fd6 100644 --- a/static/usage/v7/popover/presenting/inline-trigger/demo.html +++ b/static/usage/v7/popover/presenting/inline-trigger/demo.html @@ -1,37 +1,35 @@ + + + + Popover + + + + + - - - - Popover - - - - - + + + +
+ Left-Click Me + + Hello World! + - - - -
- Left-Click Me - - Hello World! - + Right-Click Me + + Hello World! + - Right-Click Me - - Hello World! - - - Hover Over Me - - Hello World! - -
- - - - - \ No newline at end of file + Hover Over Me + + Hello World! + +
+ + + + diff --git a/static/usage/v7/progress-bar/buffer/demo.html b/static/usage/v7/progress-bar/buffer/demo.html index 901c0ddc01c..751b6a12c43 100644 --- a/static/usage/v7/progress-bar/buffer/demo.html +++ b/static/usage/v7/progress-bar/buffer/demo.html @@ -1,47 +1,44 @@ - - - - - Progress Bar - - - - - - - - - - -
- -
- - - - - - - \ No newline at end of file + + + + Progress Bar + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v7/progress-bar/determinate/demo.html b/static/usage/v7/progress-bar/determinate/demo.html index e70f12debec..c204d2c4325 100644 --- a/static/usage/v7/progress-bar/determinate/demo.html +++ b/static/usage/v7/progress-bar/determinate/demo.html @@ -1,42 +1,39 @@ + + + + Progress Bar + + + + + - - - - Progress Bar - - - - + + + +
+ +
+ + + - + - - \ No newline at end of file + // Reset the progress bar when it reaches 100% + // to continuously show the demo + if (progress > 1) { + setTimeout(() => { + progressBar.value = progress = 0; + }, 1000); + } + }, 50); + + diff --git a/static/usage/v7/progress-bar/indeterminate/demo.html b/static/usage/v7/progress-bar/indeterminate/demo.html index 70b7649c38f..95685e060c3 100644 --- a/static/usage/v7/progress-bar/indeterminate/demo.html +++ b/static/usage/v7/progress-bar/indeterminate/demo.html @@ -1,25 +1,22 @@ + + + + Progress Bar + + + + + - - - - Progress Bar - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/progress-bar/theming/colors/demo.html b/static/usage/v7/progress-bar/theming/colors/demo.html index 1eeae1f7946..b2d7b770b78 100644 --- a/static/usage/v7/progress-bar/theming/colors/demo.html +++ b/static/usage/v7/progress-bar/theming/colors/demo.html @@ -1,39 +1,37 @@ + + + + Progress Bar + + + + - - - - Progress Bar - - - - + + - - - - - - -
- - - - - - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + + + + + +
+ + + + diff --git a/static/usage/v7/progress-bar/theming/css-properties/demo.html b/static/usage/v7/progress-bar/theming/css-properties/demo.html index 1b853603fba..9d99105968f 100644 --- a/static/usage/v7/progress-bar/theming/css-properties/demo.html +++ b/static/usage/v7/progress-bar/theming/css-properties/demo.html @@ -1,37 +1,35 @@ + + + + Progress Bar + + + + - - - - Progress Bar - - - - + + - ion-progress-bar { - --background: #f3e895; - --progress-background: #09c567; - } - - - - - - -
- - -
- - - - - \ No newline at end of file + + + +
+ + +
+ + + + diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html b/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html index 6e3163e6c60..71ff3ced918 100644 --- a/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html +++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/demo.html @@ -1,44 +1,42 @@ + + + + Progress Bar + + + + - - - - Progress Bar - - - - + + - ion-progress-bar::part(stream) { - background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%); - } - - - - - - -
- - -
- - - - - \ No newline at end of file + + + +
+ + +
+ + + + diff --git a/static/usage/v7/radio/basic/demo.html b/static/usage/v7/radio/basic/demo.html index 45ab91c7562..14468f25d8d 100644 --- a/static/usage/v7/radio/basic/demo.html +++ b/static/usage/v7/radio/basic/demo.html @@ -1,35 +1,33 @@ + + + + Radio + + + + - - - - Radio - - - - - - - - - - - -
- - Grapes
- Strawberries
- Pineapple
- Cherries - -
- - - + + + + + +
+ + Grapes
+ Strawberries
+ Pineapple
+ Cherries + +
+ + + diff --git a/static/usage/v7/radio/empty-selection/demo.html b/static/usage/v7/radio/empty-selection/demo.html index 8a2cc7b98ab..b55e17ec85f 100644 --- a/static/usage/v7/radio/empty-selection/demo.html +++ b/static/usage/v7/radio/empty-selection/demo.html @@ -1,29 +1,27 @@ + + + + Radio + + + + + - - - - Radio - - - - - - - - - -
- - Dogs
- Cats
- Turtles
- Fish
- -
- - - - + + + +
+ + Dogs
+ Cats
+ Turtles
+ Fish
+ +
+ + + diff --git a/static/usage/v7/radio/justify/demo.html b/static/usage/v7/radio/justify/demo.html index 7a26120183a..cfeb395cf0d 100644 --- a/static/usage/v7/radio/justify/demo.html +++ b/static/usage/v7/radio/justify/demo.html @@ -1,21 +1,20 @@ + + + + Radio + + + + - - - - Radio - - - - - - - + + diff --git a/static/usage/v7/radio/label-placement/demo.html b/static/usage/v7/radio/label-placement/demo.html index 066be21484c..b038df4eb0e 100644 --- a/static/usage/v7/radio/label-placement/demo.html +++ b/static/usage/v7/radio/label-placement/demo.html @@ -1,40 +1,38 @@ + + + + Radio + + + + + - - - - Radio - - - - - + + + +
+
+ + Label at the Start + - - - -
-
- - Label at the Start - +
-
+ + Label at the End + - - Label at the End - +
-
- - - Fixed Width Label - + + Fixed Width Label + +
-
- - - - + + + diff --git a/static/usage/v7/radio/theming/colors/demo.html b/static/usage/v7/radio/theming/colors/demo.html index 12b247ea98b..273dfe737d3 100644 --- a/static/usage/v7/radio/theming/colors/demo.html +++ b/static/usage/v7/radio/theming/colors/demo.html @@ -1,50 +1,48 @@ + + + + Radio + + + + + - - - - Radio - - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/static/usage/v7/radio/theming/css-properties/demo.html b/static/usage/v7/radio/theming/css-properties/demo.html index 663f27404f1..f33581263b6 100644 --- a/static/usage/v7/radio/theming/css-properties/demo.html +++ b/static/usage/v7/radio/theming/css-properties/demo.html @@ -1,49 +1,47 @@ - - - - - Radio - - - - - - - - - - - -
- - - - -
- - - - + + + + Radio + + + + + + + + + + + +
+ + + + +
+ + + diff --git a/static/usage/v7/radio/theming/css-shadow-parts/demo.html b/static/usage/v7/radio/theming/css-shadow-parts/demo.html index dafabb5b149..a16a987f495 100644 --- a/static/usage/v7/radio/theming/css-shadow-parts/demo.html +++ b/static/usage/v7/radio/theming/css-shadow-parts/demo.html @@ -1,60 +1,58 @@ - - - - - Radio - - - - - - - - - - - -
- - - - -
- - - - + + + + Radio + + + + + + + + + + + +
+ + + + +
+ + + diff --git a/static/usage/v7/range/basic/demo.html b/static/usage/v7/range/basic/demo.html index b8cbcf4f9b8..55216a9dd4b 100644 --- a/static/usage/v7/range/basic/demo.html +++ b/static/usage/v7/range/basic/demo.html @@ -1,29 +1,27 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
- -
- - - - + + + +
+ +
+ + + diff --git a/static/usage/v7/range/dual-knobs/demo.html b/static/usage/v7/range/dual-knobs/demo.html index 391740906c3..6d2e8fef85b 100644 --- a/static/usage/v7/range/dual-knobs/demo.html +++ b/static/usage/v7/range/dual-knobs/demo.html @@ -1,36 +1,34 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
- -
- - - - - + + + +
+ +
+ + + + diff --git a/static/usage/v7/range/labels/demo.html b/static/usage/v7/range/labels/demo.html index cfb8134a91f..e4e1e0c57a4 100644 --- a/static/usage/v7/range/labels/demo.html +++ b/static/usage/v7/range/labels/demo.html @@ -1,45 +1,43 @@ + + + + Range + + + + + + - - - - Range - - - - - - + + + +
+
+ +
Label at the Start
+ - - - -
-
- -
Label at the Start
- +
-
+ +
Label at the End
+ - -
Label at the End
- +
-
- - -
Fixed Width Label
- + +
Fixed Width Label
+ +
-
- - - - + + + diff --git a/static/usage/v7/range/pins/demo.html b/static/usage/v7/range/pins/demo.html index 3c785be7d25..65adbd858e4 100644 --- a/static/usage/v7/range/pins/demo.html +++ b/static/usage/v7/range/pins/demo.html @@ -1,35 +1,33 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
- -
- - - - - + + + +
+ +
+ + + + diff --git a/static/usage/v7/range/slots/demo.html b/static/usage/v7/range/slots/demo.html index cd1bb37e7b2..7fd48d2ce30 100644 --- a/static/usage/v7/range/slots/demo.html +++ b/static/usage/v7/range/slots/demo.html @@ -1,32 +1,30 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
- - - - -
- - - - + + + +
+ + + + +
+ + + diff --git a/static/usage/v7/range/snapping-ticks/demo.html b/static/usage/v7/range/snapping-ticks/demo.html index 447f1dd586a..2fee5c8ce44 100644 --- a/static/usage/v7/range/snapping-ticks/demo.html +++ b/static/usage/v7/range/snapping-ticks/demo.html @@ -1,29 +1,27 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
- -
- - - - + + + +
+ +
+ + + diff --git a/static/usage/v7/range/theming/css-properties/demo.html b/static/usage/v7/range/theming/css-properties/demo.html index 4c3c7264033..1ec8a9680a1 100644 --- a/static/usage/v7/range/theming/css-properties/demo.html +++ b/static/usage/v7/range/theming/css-properties/demo.html @@ -1,38 +1,36 @@ + + + + Range + + + + + - - - - - -
- -
- - - + max-width: 320px; + } + + + + + +
+ +
+ + + diff --git a/static/usage/v7/range/theming/css-shadow-parts/demo.html b/static/usage/v7/range/theming/css-shadow-parts/demo.html index 76db3121d3b..9e1fc9d86f7 100644 --- a/static/usage/v7/range/theming/css-shadow-parts/demo.html +++ b/static/usage/v7/range/theming/css-shadow-parts/demo.html @@ -1,71 +1,77 @@ + + + + Range + + + + + - - - - - -
- -
- - - + ion-range::part(bar-active) { + background: #bde0fe; + } + + + + + +
+ +
+ + + diff --git a/static/usage/v7/refresher/advanced/demo.html b/static/usage/v7/refresher/advanced/demo.html index 7fccf08dd40..3c6ea3e6750 100644 --- a/static/usage/v7/refresher/advanced/demo.html +++ b/static/usage/v7/refresher/advanced/demo.html @@ -1,89 +1,88 @@ + + + + Refresher + + + + - - - - Refresher - - - - - - - + ion-icon { + font-size: 12px; + align-self: start; + margin: 15px 8px; + } + + - - - - - Pull to Refresh - - + + + + + Pull to Refresh + + - - - - + + + + - - - + + + - - - - \ No newline at end of file + return item; + } + + + diff --git a/static/usage/v7/refresher/basic/demo.html b/static/usage/v7/refresher/basic/demo.html index 028c03eeac4..ab919600b97 100644 --- a/static/usage/v7/refresher/basic/demo.html +++ b/static/usage/v7/refresher/basic/demo.html @@ -1,43 +1,41 @@ + + + + Refresher + + + + + - - - - Refresher - - - - - + + + + + Pull to Refresh + + - - - - - Pull to Refresh - - + + + + - - - - +

Pull this content down to trigger the refresh.

+ + -

Pull this content down to trigger the refresh.

- - + - - - \ No newline at end of file + refresher.addEventListener('ionRefresh', () => { + setTimeout(() => { + // Any calls to load data go here + refresher.complete(); + }, 2000); + }); + + + diff --git a/static/usage/v7/refresher/custom-content/demo.html b/static/usage/v7/refresher/custom-content/demo.html index 8159df0cc2c..95e9fabcc37 100644 --- a/static/usage/v7/refresher/custom-content/demo.html +++ b/static/usage/v7/refresher/custom-content/demo.html @@ -1,45 +1,47 @@ + + + + Refresher + + + + + - - - - Refresher - - - - - + + + + + Pull to Refresh + + - - - - - Pull to Refresh - - + + + + + - - - - - +

Pull this content down to trigger the refresh.

+ + -

Pull this content down to trigger the refresh.

- - + - - - \ No newline at end of file + refresher.addEventListener('ionRefresh', () => { + setTimeout(() => { + // Any calls to load data go here + refresher.complete(); + }, 2000); + }); + + + diff --git a/static/usage/v7/refresher/custom-scroll-target/demo.html b/static/usage/v7/refresher/custom-scroll-target/demo.html index 9c004f37a19..b52c58eb81f 100644 --- a/static/usage/v7/refresher/custom-scroll-target/demo.html +++ b/static/usage/v7/refresher/custom-scroll-target/demo.html @@ -1,56 +1,54 @@ - - - - - Refresher - - - - - - - - - - - - - Pull to Refresh - - - - - - - - -
-

Pull this content down to trigger the refresh.

-
- - - - - - - \ No newline at end of file + + + + Refresher + + + + + + + + + + + + + Pull to Refresh + + + + + + + + +
+

Pull this content down to trigger the refresh.

+
+ + + + + + diff --git a/static/usage/v7/refresher/pull-properties/demo.html b/static/usage/v7/refresher/pull-properties/demo.html index af549ec23a6..cd7f8031e38 100644 --- a/static/usage/v7/refresher/pull-properties/demo.html +++ b/static/usage/v7/refresher/pull-properties/demo.html @@ -1,43 +1,41 @@ + + + + Refresher + + + + + - - - - Refresher - - - - - + + + + + Pull to Refresh + + - - - - - Pull to Refresh - - + + + + - - - - +

Pull this content down to trigger the refresh.

+ + -

Pull this content down to trigger the refresh.

- - + - - - \ No newline at end of file + refresher.addEventListener('ionRefresh', () => { + setTimeout(() => { + // Any calls to load data go here + refresher.complete(); + }, 2000); + }); + + + diff --git a/static/usage/v7/reorder/basic/demo.html b/static/usage/v7/reorder/basic/demo.html index bda0f81d78e..9a57300393d 100644 --- a/static/usage/v7/reorder/basic/demo.html +++ b/static/usage/v7/reorder/basic/demo.html @@ -1,83 +1,71 @@ + + + + Reorder + + + + - - - - Reorder - - - - + + - - + + + +
+ + + + + Item 1 + + - - - -
- - - - - - Item 1 - - - + + Item 2 + + - - - Item 2 - - - + + Item 3 + + - - - Item 3 - - - + + Item 4 + + - - - Item 4 - - - + + Item 5 + + + + +
+ + - - - Item 5 - - - - - -
- - + - - - \ No newline at end of file + // 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 + detail.complete(); + }); + + + diff --git a/static/usage/v7/reorder/custom-icon/demo.html b/static/usage/v7/reorder/custom-icon/demo.html index 651718ee419..5b40f28d915 100644 --- a/static/usage/v7/reorder/custom-icon/demo.html +++ b/static/usage/v7/reorder/custom-icon/demo.html @@ -1,93 +1,81 @@ + + + + Reorder + + + + - - - - Reorder - - - - + + - - + + + +
+ + + + + Item 1 + + + + - - - -
- - - - - - Item 1 - - - - - + + Item 2 + + + + - - - Item 2 - - - - - + + Item 3 + + + + - - - Item 3 - - - - - + + Item 4 + + + + - - - Item 4 - - - - - + + Item 5 + + + + + + +
+ + - - - Item 5 - - - - - - - -
- - + - - - \ No newline at end of file + // 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 + detail.complete(); + }); + + + diff --git a/static/usage/v7/reorder/custom-scroll-target/demo.html b/static/usage/v7/reorder/custom-scroll-target/demo.html index d564a236a83..c89eb9f007d 100644 --- a/static/usage/v7/reorder/custom-scroll-target/demo.html +++ b/static/usage/v7/reorder/custom-scroll-target/demo.html @@ -1,95 +1,83 @@ + + + + Reorder + + + + - - - - Reorder - - - - + + - height: 100%; - width: 100%; - overflow-y: auto; - } - - + + + +
+
+ + + + + Item 1 + + - - - -
-
- - - - - - Item 1 - - - + + Item 2 + + - - - Item 2 - - - + + Item 3 + + - - - Item 3 - - - + + Item 4 + + - - - Item 4 - - - - - - - Item 5 - - - - - + + Item 5 + + + + +
-
- - - - - + reorderGroup.addEventListener('ionItemReorder', ({ detail }) => { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', detail.from, 'to', detail.to); - \ No newline at end of file + // 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 + detail.complete(); + }); + + + diff --git a/static/usage/v7/reorder/toggling-disabled/demo.html b/static/usage/v7/reorder/toggling-disabled/demo.html index c87b1a18fcb..6058f2a5d0a 100644 --- a/static/usage/v7/reorder/toggling-disabled/demo.html +++ b/static/usage/v7/reorder/toggling-disabled/demo.html @@ -1,96 +1,82 @@ + + + + Reorder + + + + - - - - Reorder - - - - + + - ion-list { - width: 100%; - } - - + + + +
+ + + + Item 1 + + - - - -
- - - - - Item 1 - - - + + Item 2 + + - - - Item 2 - - - + + Item 3 + + - - - Item 3 - - - + + Item 4 + + - - - Item 4 - - - + + Item 5 + + + + - - - Item 5 - - - - - + + Toggle Reorder +
+ + - - - Toggle Reorder - -
- - + - - - \ No newline at end of file + function toggleReorder() { + reorderGroup.disabled = !reorderGroup.disabled; + } + + + diff --git a/static/usage/v7/reorder/updating-data/demo.html b/static/usage/v7/reorder/updating-data/demo.html index d61f9fac473..cef92d8b4ad 100644 --- a/static/usage/v7/reorder/updating-data/demo.html +++ b/static/usage/v7/reorder/updating-data/demo.html @@ -1,64 +1,63 @@ + + + + Reorder + + + + - - - - Reorder - - - - - - - + + - - - -
- - - - -
- - + + + +
+ + + + +
+ + - - + } - \ No newline at end of file + reorderGroup.innerHTML = reordered; + } + + + diff --git a/static/usage/v7/reorder/wrapper/demo.html b/static/usage/v7/reorder/wrapper/demo.html index 6896fec2f2f..38a0bb1dbd5 100644 --- a/static/usage/v7/reorder/wrapper/demo.html +++ b/static/usage/v7/reorder/wrapper/demo.html @@ -1,88 +1,76 @@ + + + + Reorder + + + + - - - - Reorder - - - - + + - - + + + +
+ + + + + + Item 1 + + - - - -
- - - - - - - Item 1 - - - + + + Item 2 + + - - - - Item 2 - - - + + + Item 3 + + - - - - Item 3 - - - + + + Item 4 + + - - - - Item 4 - - - + + + Item 5 + + + + +
+ + - - - - Item 5 - - - - - -
- - + - - - \ No newline at end of file + // 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 + detail.complete(); + }); + + + diff --git a/static/usage/v7/ripple-effect/basic/demo.html b/static/usage/v7/ripple-effect/basic/demo.html index 999604925ee..10c7bee0573 100644 --- a/static/usage/v7/ripple-effect/basic/demo.html +++ b/static/usage/v7/ripple-effect/basic/demo.html @@ -1,82 +1,80 @@ - - - - - Ripple Effect - - - - - - - - - - - -
-
- Click on a shape to see the ripple - -
- -
- -
- -
- -
- + + + + Ripple Effect + + + + + + + + + + + +
+
+ Click on a shape to see the ripple + +
+ +
+ +
+ +
+ +
+ +
-
- - - - - \ No newline at end of file + + + + diff --git a/static/usage/v7/ripple-effect/customizing/demo.html b/static/usage/v7/ripple-effect/customizing/demo.html index 4884fc86018..0f354320888 100644 --- a/static/usage/v7/ripple-effect/customizing/demo.html +++ b/static/usage/v7/ripple-effect/customizing/demo.html @@ -1,81 +1,79 @@ - - - - - Ripple Effect - - - - - - - - - - - -
-
- Click on a shape to see the ripple - -
- Custom Parent Color - -
- -
- Custom Ripple Color - + + + + Ripple Effect + + + + + + + + + + + +
+
+ Click on a shape to see the ripple + +
+ Custom Parent Color + +
+ +
+ Custom Ripple Color + +
-
- - - - - \ No newline at end of file + + + + diff --git a/static/usage/v7/ripple-effect/type/demo.html b/static/usage/v7/ripple-effect/type/demo.html index 60f1ccf811b..1b78cb5b1cf 100644 --- a/static/usage/v7/ripple-effect/type/demo.html +++ b/static/usage/v7/ripple-effect/type/demo.html @@ -1,81 +1,79 @@ - - - - - Ripple Effect - - - - - - - - - - - -
-
- Click on a shape to see the ripple - -
- Bounded - -
- -
- Unbounded - + + + + Ripple Effect + + + + + + + + + + + +
+
+ Click on a shape to see the ripple + +
+ Bounded + +
+ +
+ Unbounded + +
-
- - - - - \ No newline at end of file + + + + diff --git a/static/usage/v7/router/basic/demo.html b/static/usage/v7/router/basic/demo.html index e76ea61b5ab..cc711a9a00b 100644 --- a/static/usage/v7/router/basic/demo.html +++ b/static/usage/v7/router/basic/demo.html @@ -1,30 +1,28 @@ - - - - - Router - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + - - + customElements.define('page-one', PageOne); + customElements.define('page-two', PageTwo); + + + diff --git a/static/usage/v7/searchbar/basic/demo.html b/static/usage/v7/searchbar/basic/demo.html index 4fd310f4db9..f9be71ae4ab 100644 --- a/static/usage/v7/searchbar/basic/demo.html +++ b/static/usage/v7/searchbar/basic/demo.html @@ -1,34 +1,32 @@ + + + + Searchbar + + + + - - - - Searchbar - - - - + + - - - - - - -
- - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v7/searchbar/cancel-button/demo.html b/static/usage/v7/searchbar/cancel-button/demo.html index 4b11f43db7c..91ab9577d59 100644 --- a/static/usage/v7/searchbar/cancel-button/demo.html +++ b/static/usage/v7/searchbar/cancel-button/demo.html @@ -1,34 +1,36 @@ + + + + Searchbar + + + + - - - - Searchbar - - - - + + - - - - - - -
- - - - -
- - - - - \ No newline at end of file + + + +
+ + + + +
+ + + + diff --git a/static/usage/v7/searchbar/clear-button/demo.html b/static/usage/v7/searchbar/clear-button/demo.html index 72784ade987..bc7bc4706f5 100644 --- a/static/usage/v7/searchbar/clear-button/demo.html +++ b/static/usage/v7/searchbar/clear-button/demo.html @@ -1,33 +1,31 @@ + + + + Searchbar + + + + - - - - Searchbar - - - - + + - - - - - - -
- - - - -
- - - - - \ No newline at end of file + + + +
+ + + + +
+ + + + diff --git a/static/usage/v7/searchbar/debounce/demo.html b/static/usage/v7/searchbar/debounce/demo.html index e00c272091b..1545db90a55 100644 --- a/static/usage/v7/searchbar/debounce/demo.html +++ b/static/usage/v7/searchbar/debounce/demo.html @@ -1,64 +1,73 @@ + + + + Searchbar + + + + - - - - Searchbar - - - - + + - - - - - - -
- - -
- - - + + + +
+ + +
+ + + - + } + list.innerHTML = items; + } + diff --git a/static/usage/v7/searchbar/search-icon/demo.html b/static/usage/v7/searchbar/search-icon/demo.html index 8cfd4632e85..89d49c7fc8a 100644 --- a/static/usage/v7/searchbar/search-icon/demo.html +++ b/static/usage/v7/searchbar/search-icon/demo.html @@ -1,31 +1,29 @@ + + + + Searchbar + + + + - - - - Searchbar - - - - + + - - - - - - -
- - -
- - - - - \ No newline at end of file + + + +
+ + +
+ + + + diff --git a/static/usage/v7/searchbar/theming/colors/demo.html b/static/usage/v7/searchbar/theming/colors/demo.html index 4ea47eb381f..10a42a3c247 100644 --- a/static/usage/v7/searchbar/theming/colors/demo.html +++ b/static/usage/v7/searchbar/theming/colors/demo.html @@ -1,39 +1,37 @@ + + + + Searchbar + + + + - - - - Searchbar - - - - + + - - - - - - -
- - - - - - - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + + + + + + +
+ + + + diff --git a/static/usage/v7/searchbar/theming/css-properties/demo.html b/static/usage/v7/searchbar/theming/css-properties/demo.html index 848b2b6f024..047131f13b1 100644 --- a/static/usage/v7/searchbar/theming/css-properties/demo.html +++ b/static/usage/v7/searchbar/theming/css-properties/demo.html @@ -1,48 +1,46 @@ - - - - - Searchbar - - - - - - - - - - - -
- -
- - - - - \ No newline at end of file + + + + Searchbar + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v7/segment-button/basic/demo.html b/static/usage/v7/segment-button/basic/demo.html index 6877ae4645d..590c295f480 100644 --- a/static/usage/v7/segment-button/basic/demo.html +++ b/static/usage/v7/segment-button/basic/demo.html @@ -1,56 +1,54 @@ + + + + Segment Button + + + + - - - - Segment Button - - - - + + - max-width: 400px; - margin: 0 auto; - } - - + + + +
+ + + Default + + + Segment + + + Button + + - - - -
- - - Default - - - Segment - - - Button - - - - - - Disabled - - - Segment - - - Button - - -
- - - - - \ No newline at end of file + + + Disabled + + + Segment + + + Button + + +
+ + + + diff --git a/static/usage/v7/segment-button/layout/demo.html b/static/usage/v7/segment-button/layout/demo.html index 1fcc16cf0b5..2a6d756cd74 100644 --- a/static/usage/v7/segment-button/layout/demo.html +++ b/static/usage/v7/segment-button/layout/demo.html @@ -1,104 +1,102 @@ + + + + Segment Button + + + + - - - - Segment Button - - - - + + - max-width: 400px; - margin: 0 auto; - } - - + + + +
+ + + + + + + + + + + - - - -
- - - - - - - - - - - + + + Call + + + + Heart + + + + Pin + + + - - - Call - - - - Heart - - - - Pin - - - + + + Call + + + + Heart + + + + Pin + + + - - - Call - - - - Heart - - - - Pin - - - + + + Call + + + + Heart + + + + Pin + + + - - - Call - - - - Heart - - - - Pin - - - - - - - Call - - - - Heart - - - - Pin - - - -
- - - - - \ No newline at end of file + + + Call + + + + Heart + + + + Pin + + + +
+ + + + diff --git a/static/usage/v7/segment-button/theming/css-properties/demo.html b/static/usage/v7/segment-button/theming/css-properties/demo.html index 15b6663ed6a..e9da296fd9d 100644 --- a/static/usage/v7/segment-button/theming/css-properties/demo.html +++ b/static/usage/v7/segment-button/theming/css-properties/demo.html @@ -1,59 +1,57 @@ + + + + Segment Button + + + + - - - - Segment Button - - - - + + - /* iOS styles */ - ion-segment-button.ios { - --color: #08a391; - --color-checked: #fff; - --border-radius: 20px; - } - - - - - - -
- - - Custom - - - Segment - - - Buttons - - -
- - - - - \ No newline at end of file + + + +
+ + + Custom + + + Segment + + + Buttons + + +
+ + + + diff --git a/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html b/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html index 765f38cec01..995a3b7e54d 100644 --- a/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html +++ b/static/usage/v7/segment-button/theming/css-shadow-parts/demo.html @@ -1,71 +1,69 @@ + + + + Segment Button + + + + - - - - Segment Button - - - - + + - ion-segment-button.ios::part(indicator-background) { - border-radius: 20px; - } - - - - - - -
- - - Custom - - - Segment - - - Buttons - - -
- - - - - \ No newline at end of file + + + +
+ + + Custom + + + Segment + + + Buttons + + +
+ + + + diff --git a/static/usage/v7/segment/basic/demo.html b/static/usage/v7/segment/basic/demo.html index c13af1fd749..31ab1945bee 100644 --- a/static/usage/v7/segment/basic/demo.html +++ b/static/usage/v7/segment/basic/demo.html @@ -1,50 +1,48 @@ + + + + Segment + + + + - - - - Segment - - - - + + - max-width: 400px; - margin: 0 auto; - } - - + + + +
+ + + Default + + + Segment + + - - - -
- - - Default - - - Segment - - - - - - Disabled - - - Segment - - -
- - - - - \ No newline at end of file + + + Disabled + + + Segment + + +
+ + + + diff --git a/static/usage/v7/segment/scrollable/demo.html b/static/usage/v7/segment/scrollable/demo.html index d9dee70d2cb..4aa5c342d44 100644 --- a/static/usage/v7/segment/scrollable/demo.html +++ b/static/usage/v7/segment/scrollable/demo.html @@ -1,66 +1,64 @@ + + + + Segment + + + + - - - - Segment - - - - + + - ion-segment { - width: 400px; - margin: 0 auto; - } - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v7/segment/theming/colors/demo.html b/static/usage/v7/segment/theming/colors/demo.html index cb662fb009a..6c5b689a592 100644 --- a/static/usage/v7/segment/theming/colors/demo.html +++ b/static/usage/v7/segment/theming/colors/demo.html @@ -1,113 +1,111 @@ + + + + Segment + + + + - - - - Segment - - - - + + - max-width: 400px; - margin: 0 auto; - } - - - - - - -
- - - Default - - - Segment - - - - - Primary - - - Segment - - - - - Secondary - - - Segment - - - - - Tertiary - - - Segment - - - - - Success - - - Segment - - - - - Warning - - - Segment - - - - - Danger - - - Segment - - - - - Light - - - Segment - - - - - Medium - - - Segment - - - - - Dark - - - Segment - - -
- - - - - \ No newline at end of file + + + +
+ + + 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/v7/segment/theming/css-properties/demo.html b/static/usage/v7/segment/theming/css-properties/demo.html index 6cc5c5a46ab..6e591334efc 100644 --- a/static/usage/v7/segment/theming/css-properties/demo.html +++ b/static/usage/v7/segment/theming/css-properties/demo.html @@ -1,42 +1,40 @@ + + + + Note + + + + - - - - Note - - - - + + - ion-segment { - --background: #54dc98; - } - - - - - - -
- - - Custom - - - Segment - - -
- - - - - \ No newline at end of file + + + +
+ + + Custom + + + Segment + + +
+ + + + diff --git a/static/usage/v7/select/basic/multiple-selection/demo.html b/static/usage/v7/select/basic/multiple-selection/demo.html index 1cc58839a36..63c7016f22f 100644 --- a/static/usage/v7/select/basic/multiple-selection/demo.html +++ b/static/usage/v7/select/basic/multiple-selection/demo.html @@ -1,32 +1,30 @@ + + + + Select - Multiple Selection + + + + + - - - - Select - Multiple Selection - - - - - - - - - -
- - - - Apples - Oranges - Bananas - - - -
- - - - + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + diff --git a/static/usage/v7/select/basic/responding-to-interaction/demo.html b/static/usage/v7/select/basic/responding-to-interaction/demo.html index e8499787112..c5b7b540799 100644 --- a/static/usage/v7/select/basic/responding-to-interaction/demo.html +++ b/static/usage/v7/select/basic/responding-to-interaction/demo.html @@ -1,62 +1,60 @@ - - - - - Select - Responding to Interaction - - - - - - - - - - - -
-
- - - - Apples - Oranges - Bananas - - - - -
+ + + + Select - Responding to Interaction + + + + + + + + + + + +
+
+ + + + Apples + Oranges + Bananas + + + + +
+
-
- - - - - - + + + + + diff --git a/static/usage/v7/select/basic/single-selection/demo.html b/static/usage/v7/select/basic/single-selection/demo.html index e6de08c9e15..f2db0df6c17 100644 --- a/static/usage/v7/select/basic/single-selection/demo.html +++ b/static/usage/v7/select/basic/single-selection/demo.html @@ -1,32 +1,30 @@ + + + + Select - Single Selection + + + + + - - - - Select - Single Selection - - - - - - - - - -
- - - - Apples - Oranges - Bananas - - - -
- - - - + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + diff --git a/static/usage/v7/select/customization/button-text/demo.html b/static/usage/v7/select/customization/button-text/demo.html index 98096c7cbe5..ff90458d0a3 100644 --- a/static/usage/v7/select/customization/button-text/demo.html +++ b/static/usage/v7/select/customization/button-text/demo.html @@ -1,39 +1,47 @@ + + + + Select - Button Text + + + + + - - - - Select - Button Text - - - - - - - - - -
- - - - Apples - Oranges - Bananas - - - - - Apples - Oranges - Bananas - - - -
- - - - + + + +
+ + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + +
+ + + diff --git a/static/usage/v7/select/customization/interface-options/demo.html b/static/usage/v7/select/customization/interface-options/demo.html index 18aa06c18bf..8283956c7ed 100644 --- a/static/usage/v7/select/customization/interface-options/demo.html +++ b/static/usage/v7/select/customization/interface-options/demo.html @@ -1,80 +1,83 @@ + + + + Select - Interface Options + + + + - - - - Select - Interface Options - - - - + + - - + + + +
+ + + + Bacon + Onions + Pepperoni + + - - - -
- - - - Bacon - Onions - Pepperoni - - + + + Brown + Blonde + Red + + - - - Brown - Blonde - Red - - + + + Red + Green + Blue + + + +
+ + - - - Red - Green - Blue - - - -
- - + - + const customPopoverSelect = document.getElementById('customPopoverSelect'); + const customPopoverOptions = { + header: 'Hair Color', + subHeader: 'Select your hair color', + message: 'Only select your dominant hair color', + }; + customPopoverSelect.interfaceOptions = customPopoverOptions; + const customActionSheetSelect = document.getElementById('customActionSheetSelect'); + const customActionSheetOptions = { + header: 'Colors', + subHeader: 'Select your favorite color', + }; + customActionSheetSelect.interfaceOptions = customActionSheetOptions; + + diff --git a/static/usage/v7/select/customization/styling-select/demo.html b/static/usage/v7/select/customization/styling-select/demo.html index fa813bfde1e..c683ff692f1 100644 --- a/static/usage/v7/select/customization/styling-select/demo.html +++ b/static/usage/v7/select/customization/styling-select/demo.html @@ -1,60 +1,58 @@ - - - - - Select - Styling the Select - - - - - - - - - - - -
- - - - Apples - Oranges - Bananas - - - -
- - - - + + + + Select - Styling the Select + + + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + diff --git a/static/usage/v7/select/fill/demo.html b/static/usage/v7/select/fill/demo.html index 2543e2fccf5..9b59ad5319c 100644 --- a/static/usage/v7/select/fill/demo.html +++ b/static/usage/v7/select/fill/demo.html @@ -1,44 +1,42 @@ + + + + Input + + + + - - - - Input - - - - + + - width: 300px; - margin: 0 auto; - } - - - - - - -
- - Apple - Banana - Orange - - - - Apple - Banana - Orange - -
- - - + + + +
+ + Apple + Banana + Orange + + + Apple + Banana + Orange + +
+ + + diff --git a/static/usage/v7/select/interfaces/action-sheet/demo.html b/static/usage/v7/select/interfaces/action-sheet/demo.html index 0e53b22ca92..1cda57966fe 100644 --- a/static/usage/v7/select/interfaces/action-sheet/demo.html +++ b/static/usage/v7/select/interfaces/action-sheet/demo.html @@ -1,32 +1,30 @@ + + + + Select - Action Sheet + + + + + - - - - Select - Action Sheet - - - - - - - - - -
- - - - Apples - Oranges - Bananas - - - -
- - - - + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + diff --git a/static/usage/v7/select/interfaces/popover/demo.html b/static/usage/v7/select/interfaces/popover/demo.html index 968bd204074..44bfcfbc826 100644 --- a/static/usage/v7/select/interfaces/popover/demo.html +++ b/static/usage/v7/select/interfaces/popover/demo.html @@ -1,32 +1,30 @@ + + + + Select - Popover + + + + + - - - - Select - Popover - - - - - - - - - -
- - - - Apples - Oranges - Bananas - - - -
- - - - + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + diff --git a/static/usage/v7/select/justify/demo.html b/static/usage/v7/select/justify/demo.html index 41c241f4961..02d70de3073 100644 --- a/static/usage/v7/select/justify/demo.html +++ b/static/usage/v7/select/justify/demo.html @@ -1,21 +1,20 @@ + + + + select + + + + - - - - select - - - - - - - + + diff --git a/static/usage/v7/select/label-placement/demo.html b/static/usage/v7/select/label-placement/demo.html index 68b8e6b179d..c43ff9bfd3f 100644 --- a/static/usage/v7/select/label-placement/demo.html +++ b/static/usage/v7/select/label-placement/demo.html @@ -1,62 +1,60 @@ + + + + select + + + + - - - - select - - - - + + - - + + + +
+ + + + Apple + Banana + Orange + + - - - -
- - - - Apple - Banana - Orange - - + + + Apple + Banana + Orange + + - - - Apple - Banana - Orange - - - - - - Apple - Banana - Orange - - - - - - Apple - Banana - Orange - - - -
- - - + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + + +
+ + + diff --git a/static/usage/v7/select/objects-as-values/multiple-selection/demo.html b/static/usage/v7/select/objects-as-values/multiple-selection/demo.html index 390a32eaec1..d9b3f071f7c 100644 --- a/static/usage/v7/select/objects-as-values/multiple-selection/demo.html +++ b/static/usage/v7/select/objects-as-values/multiple-selection/demo.html @@ -1,91 +1,89 @@ + + + + Select - Object Values and Multiple Selection + + + + - - - - Select - Object Values and Multiple Selection - - - - - - - - - - - -
- - - - - - - Current value: - - - - -
- - - - - + foods.forEach((option, i) => { + const selectOption = document.createElement('ion-select-option'); + selectOption.value = option; + selectOption.textContent = option.name; + selectEl.appendChild(selectOption); + }); + const valueLabel = document.querySelector('ion-text'); + selectEl.addEventListener('ionChange', () => { + valueLabel.innerHTML = JSON.stringify(selectEl.value); + }); + + diff --git a/static/usage/v7/select/objects-as-values/using-comparewith/demo.html b/static/usage/v7/select/objects-as-values/using-comparewith/demo.html index b68d3ab7ff9..0c59bae8ce0 100644 --- a/static/usage/v7/select/objects-as-values/using-comparewith/demo.html +++ b/static/usage/v7/select/objects-as-values/using-comparewith/demo.html @@ -1,79 +1,77 @@ + + + + Select - Using compareWith + + + + - - - - Select - Using compareWith - - - - - - - - - - - -
- - - - - - - Current value: - - - - -
- - - - - + foods.forEach((option, i) => { + const selectOption = document.createElement('ion-select-option'); + selectOption.value = option; + selectOption.textContent = option.name; + selectEl.appendChild(selectOption); + }); + const valueLabel = document.querySelector('ion-text'); + selectEl.addEventListener('ionChange', () => { + valueLabel.innerHTML = JSON.stringify(selectEl.value); + }); + + diff --git a/static/usage/v7/select/typeahead/demo.html b/static/usage/v7/select/typeahead/demo.html index 2551d58694f..6585f3c0635 100644 --- a/static/usage/v7/select/typeahead/demo.html +++ b/static/usage/v7/select/typeahead/demo.html @@ -39,8 +39,7 @@ - - + @@ -75,7 +74,7 @@ { text: 'Pineapple', value: 'pineapple' }, { text: 'Pomegranate', value: 'pomegranate' }, { text: 'Raspberry', value: 'raspberry' }, - { text: 'Strawberry', value: 'strawberry' } + { text: 'Strawberry', value: 'strawberry' }, ]; /** @@ -108,8 +107,8 @@ const normalizedQuery = searchQuery.toLowerCase(); - return fruits.filter(fruit => fruit.text.toLowerCase().includes(normalizedQuery)); - } + return fruits.filter((fruit) => fruit.text.toLowerCase().includes(normalizedQuery)); + }; /** * Render a filtered list of fruits @@ -126,11 +125,11 @@ ${item.text} - ` + `; }); list.innerHTML = template; - } + }; /** * Formats the selected fruits in @@ -142,12 +141,12 @@ */ const formatData = (data) => { if (data.length === 1) { - const fruit = fruits.find(fruit => fruit.value === data[0]) + const fruit = fruits.find((fruit) => fruit.value === data[0]); return fruit.text; } return `${data.length} items`; - } + }; /** * Reset any working changes @@ -156,7 +155,7 @@ const cancelChanges = () => { workingSelectedFruits = [...selectedFruits]; modal.dismiss(undefined, 'cancel'); - } + }; /** * Return the selected @@ -164,22 +163,21 @@ */ const confirmChanges = () => { selectedFruits = [...workingSelectedFruits]; - modal.dismiss(selectedFruits) + modal.dismiss(selectedFruits); }; // Listen for all ionChange events from the checkbox modal.addEventListener('ionChange', (ev) => { - if (ev.target.tagName !== 'ION-CHECKBOX') { return; } + if (ev.target.tagName !== 'ION-CHECKBOX') { + return; + } const { checked, value } = ev.detail; if (checked) { - workingSelectedFruits = [ - ...workingSelectedFruits, - value - ] + workingSelectedFruits = [...workingSelectedFruits, value]; } else { - workingSelectedFruits = workingSelectedFruits.filter(fruit => fruit !== value); + workingSelectedFruits = workingSelectedFruits.filter((fruit) => fruit !== value); } }); diff --git a/static/usage/v7/skeleton-text/basic/demo.html b/static/usage/v7/skeleton-text/basic/demo.html index b42500e9e44..2c5347d9b13 100644 --- a/static/usage/v7/skeleton-text/basic/demo.html +++ b/static/usage/v7/skeleton-text/basic/demo.html @@ -1,51 +1,50 @@ + + + + Accordion + + + + - - - - Accordion - - - - - - - + .container { + flex-direction: column; + } + + - - - -
-
- Toggle -
- - + + + +
+
+ Toggle +
+ + - - + }; - \ No newline at end of file + setSkeletonText(); + + + diff --git a/static/usage/v7/skeleton-text/theming/css-properties/demo.html b/static/usage/v7/skeleton-text/theming/css-properties/demo.html index b84ffc4c317..13f68b54722 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/demo.html +++ b/static/usage/v7/skeleton-text/theming/css-properties/demo.html @@ -1,60 +1,58 @@ + + + + Accordion + + + + - - - - Accordion - - - - + + - ion-skeleton-text { - --border-radius: 9999px; - --background: rgba(188, 0, 255, 0.065); - --background-rgb: 188, 0, 255; - } - - - - - - -
- - - - - - - - - -

- -

-

- -

-

- -

- - - -
- - - - - \ No newline at end of file + + + +
+ + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + +
+ + + + diff --git a/static/usage/v7/spinner/basic/demo.html b/static/usage/v7/spinner/basic/demo.html index f900d6f461f..811e66cf28b 100644 --- a/static/usage/v7/spinner/basic/demo.html +++ b/static/usage/v7/spinner/basic/demo.html @@ -1,79 +1,77 @@ + + + + Spinner + + + + - - - - Spinner - - - - + + - - + + + +
+ + Default + + - - - -
- - Default - - + + Dots + + - - Dots - - + + Lines + + - - Lines - - + + Lines Small + + - - Lines Small - - + + Lines Sharp + + - - Lines Sharp - - + + Lines Sharp Small + + - - Lines Sharp Small - - + + Bubbles + + - - Bubbles - - + + Circles + + - - Circles - - + + Circular + + - - Circular - - - - - Crescent - - -
- - - - - \ No newline at end of file + + Crescent + + +
+ + + + diff --git a/static/usage/v7/spinner/theming/colors/demo.html b/static/usage/v7/spinner/theming/colors/demo.html index b3984b8c59a..6f8a8a8abe8 100644 --- a/static/usage/v7/spinner/theming/colors/demo.html +++ b/static/usage/v7/spinner/theming/colors/demo.html @@ -1,33 +1,31 @@ + + + + Spinner + + + + + - - - - Spinner - - - - - - - - - -
- - - - - - - - - - -
- - - - - \ No newline at end of file + + + +
+ + + + + + + + + + +
+ + + + diff --git a/static/usage/v7/spinner/theming/css-properties/demo.html b/static/usage/v7/spinner/theming/css-properties/demo.html index 88a7fb6a49c..4ef8b5b2722 100644 --- a/static/usage/v7/spinner/theming/css-properties/demo.html +++ b/static/usage/v7/spinner/theming/css-properties/demo.html @@ -1,30 +1,28 @@ + + + + Spinner + + + + - - - - Spinner - - - - + + - - - - - - -
- -
- - - - - \ No newline at end of file + + + +
+ +
+ + + + diff --git a/static/usage/v7/split-pane/basic/demo.html b/static/usage/v7/split-pane/basic/demo.html index 4c8fce4946f..9c9558aa9f7 100644 --- a/static/usage/v7/split-pane/basic/demo.html +++ b/static/usage/v7/split-pane/basic/demo.html @@ -1,42 +1,36 @@ + + + + Spinner + + + + + - - - - Spinner - - - - - + + + + + + + Menu + + + Menu Content + - - - - - - - Menu - - - - Menu Content - - - -
- - - Main View - - - - Main View Content - -
- - - - - \ No newline at end of file +
+ + + Main View + + + Main View Content +
+ + + + diff --git a/static/usage/v7/split-pane/theming/css-properties/demo.html b/static/usage/v7/split-pane/theming/css-properties/demo.html index dcd6445a0a2..640f9bb81a6 100644 --- a/static/usage/v7/split-pane/theming/css-properties/demo.html +++ b/static/usage/v7/split-pane/theming/css-properties/demo.html @@ -1,50 +1,44 @@ + + + + Spinner + + + + + + - --border: 1px dashed #b3baff; - } - - + + + + + + + Menu + + + Menu Content is 350px wide and has a blue dashed border + - - - - - - - Menu - - - - Menu Content is 350px wide and has a blue dashed border - - - -
- - - Main View - - - - Main View Content - -
- - - - - \ No newline at end of file +
+ + + Main View + + + Main View Content +
+ + + + diff --git a/static/usage/v7/tabs/router/demo.html b/static/usage/v7/tabs/router/demo.html index 0628eab458a..d1fa8e40f83 100644 --- a/static/usage/v7/tabs/router/demo.html +++ b/static/usage/v7/tabs/router/demo.html @@ -1,125 +1,114 @@ + + + + Tabs + + + + + + - - - - Tabs - - - - - - + + + + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + + +
+ + + Radio + + + +
Radio content
+ +
+ + + +
+ + + Library + + + +
Library content
+ +
+ + + +
+ + + Search + + + +
Search content
+ +
+ + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + + - + const libraryNav = document.querySelector('#library-nav'); + const libraryPage = document.querySelector('#library-page'); + libraryNav.root = libraryPage; + const searchNav = document.querySelector('#search-nav'); + const searchPage = document.querySelector('#search-page'); + searchNav.root = searchPage; + + diff --git a/static/usage/v7/text/basic/demo.html b/static/usage/v7/text/basic/demo.html index d7485b4396f..e41614e0814 100644 --- a/static/usage/v7/text/basic/demo.html +++ b/static/usage/v7/text/basic/demo.html @@ -1,61 +1,59 @@ + + + + Text + + + + + + + + + + + +
+ +

H1: The quick brown fox jumps over the lazy dog

+ - - - - 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

- + +

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. -

-
- - - - \ No newline at end of file +

+ + + + 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/v7/textarea/autogrow/demo.html b/static/usage/v7/textarea/autogrow/demo.html index 15bf541e9d6..bccc88fbd8f 100644 --- a/static/usage/v7/textarea/autogrow/demo.html +++ b/static/usage/v7/textarea/autogrow/demo.html @@ -1,38 +1,39 @@ + + + + Textarea - Autogrow + + + + - - - - Textarea - Autogrow - - - - + + - ion-item { - width: 100%; - } - - - - - - -
- - - - -
- - - - - \ No newline at end of file + + + +
+ + + + +
+ + + + diff --git a/static/usage/v7/textarea/basic/demo.html b/static/usage/v7/textarea/basic/demo.html index 726165a8987..e93893105d9 100644 --- a/static/usage/v7/textarea/basic/demo.html +++ b/static/usage/v7/textarea/basic/demo.html @@ -1,40 +1,38 @@ + + + + Textarea - Basic Usage + + + + - - - - Textarea - Basic Usage - - - - - - - - - - - -
- - - - - - - - - - - -
- - - + + + + + +
+ + + + + + + + + + + +
+ + + diff --git a/static/usage/v7/textarea/clear-on-edit/demo.html b/static/usage/v7/textarea/clear-on-edit/demo.html index 5cf49403444..e4f9ac6cb46 100644 --- a/static/usage/v7/textarea/clear-on-edit/demo.html +++ b/static/usage/v7/textarea/clear-on-edit/demo.html @@ -1,31 +1,29 @@ + + + + Textarea - Clear on Edit + + + + - - - - Textarea - Clear on Edit - - - - + + - - - - - - -
- - -
- - - - - \ No newline at end of file + + + +
+ + +
+ + + + diff --git a/static/usage/v7/textarea/counter/demo.html b/static/usage/v7/textarea/counter/demo.html index e175ee00e30..43ea23ffafb 100644 --- a/static/usage/v7/textarea/counter/demo.html +++ b/static/usage/v7/textarea/counter/demo.html @@ -1,41 +1,44 @@ + + + + Textarea + + + + - - - - Textarea - - - - + + - width: 300px; - margin: 0 auto; - } - - + + + +
+ - - - -
- - - -
- - - - - + +
+ + + + diff --git a/static/usage/v7/textarea/fill/demo.html b/static/usage/v7/textarea/fill/demo.html index f24a5bf8691..9048ef77bd5 100644 --- a/static/usage/v7/textarea/fill/demo.html +++ b/static/usage/v7/textarea/fill/demo.html @@ -1,38 +1,44 @@ + + + + Textarea + + + + - - - - Textarea - - - - + + - width: 300px; - margin: 0 auto; - } - - - - - - -
- - - -
- - - + + + +
+ + +
+ + + diff --git a/static/usage/v7/textarea/helper-error/demo.html b/static/usage/v7/textarea/helper-error/demo.html index 75e5568ed77..4fb4eba97c1 100644 --- a/static/usage/v7/textarea/helper-error/demo.html +++ b/static/usage/v7/textarea/helper-error/demo.html @@ -1,56 +1,61 @@ - - - - - Textarea - - - - - - - - - - -
- -
- - - - - - + + + + Textarea + + + + + + + + + + +
+ +
+ + + + + diff --git a/static/usage/v7/textarea/label-placement/demo.html b/static/usage/v7/textarea/label-placement/demo.html index 66d7adc9459..5fe8572bdb5 100644 --- a/static/usage/v7/textarea/label-placement/demo.html +++ b/static/usage/v7/textarea/label-placement/demo.html @@ -1,43 +1,41 @@ + + + + Textarea + + + + - - - - Textarea - - - - - - - - - - - -
- - - - - - - - - - - - - - -
- - - + + + + + +
+ + + + + + + + + + + + + + +
+ + + diff --git a/static/usage/v7/textarea/theming/demo.html b/static/usage/v7/textarea/theming/demo.html index 0976460f00a..4a0f043efb4 100644 --- a/static/usage/v7/textarea/theming/demo.html +++ b/static/usage/v7/textarea/theming/demo.html @@ -1,50 +1,48 @@ + + + + Textarea - Theming + + + + + - - - - - -
- -
- - - + ion-textarea.custom .helper-text, + ion-textarea.custom .counter { + color: #373737; + } + + + + + +
+ +
+ + + diff --git a/static/usage/v7/thumbnail/basic/demo.html b/static/usage/v7/thumbnail/basic/demo.html index d86ab646cbe..abf0426465d 100644 --- a/static/usage/v7/thumbnail/basic/demo.html +++ b/static/usage/v7/thumbnail/basic/demo.html @@ -1,27 +1,24 @@ + + + + Thumbnail + + + + + - - - - Thumbnail - - - - - - - - - - -
- - Silhouette of mountains - -
- - - - - \ No newline at end of file + + + +
+ + Silhouette of mountains + +
+ + + + diff --git a/static/usage/v7/thumbnail/item/demo.html b/static/usage/v7/thumbnail/item/demo.html index e264f894790..18bd15a9c8c 100644 --- a/static/usage/v7/thumbnail/item/demo.html +++ b/static/usage/v7/thumbnail/item/demo.html @@ -1,30 +1,27 @@ + + + + Thumbnail + + + + + - - - - Thumbnail - - - - - - - - - - -
- - - Silhouette of mountains - - Item Thumbnail - -
- - - - - \ No newline at end of file + + + +
+ + + Silhouette of mountains + + Item Thumbnail + +
+ + + + diff --git a/static/usage/v7/thumbnail/theming/css-properties/demo.html b/static/usage/v7/thumbnail/theming/css-properties/demo.html index d50eb4eaa90..9bcfbf82451 100644 --- a/static/usage/v7/thumbnail/theming/css-properties/demo.html +++ b/static/usage/v7/thumbnail/theming/css-properties/demo.html @@ -1,33 +1,31 @@ + + + + Thumbnail + + + + - - - - Thumbnail - - - - + + - - - - - - -
- - Silhouette of mountains - -
- - - - - \ No newline at end of file + + + +
+ + Silhouette of mountains + +
+ + + + diff --git a/static/usage/v7/title/basic/demo.html b/static/usage/v7/title/basic/demo.html index 8bad261fe81..af7b877c435 100644 --- a/static/usage/v7/title/basic/demo.html +++ b/static/usage/v7/title/basic/demo.html @@ -1,25 +1,22 @@ + + + + Title + + + + + - - - - Title - - - - - - - - - - - - Title - - - - - - \ No newline at end of file + + + + + Title + + + + + diff --git a/static/usage/v7/title/collapsible-large-title/basic/demo.html b/static/usage/v7/title/collapsible-large-title/basic/demo.html index 5fc4f3a6d73..1e68e0e9708 100644 --- a/static/usage/v7/title/collapsible-large-title/basic/demo.html +++ b/static/usage/v7/title/collapsible-large-title/basic/demo.html @@ -1,59 +1,54 @@ + + + + Title + + + + + - - - - Title - - - - - - - - - - - - Title - - - - + + + - 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 - - - - +
Scroll the list to see the title collapse.
- \ No newline at end of file + + 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/v7/title/collapsible-large-title/buttons/demo.html b/static/usage/v7/title/collapsible-large-title/buttons/demo.html index ddc79b8e515..e0603e9aed2 100644 --- a/static/usage/v7/title/collapsible-large-title/buttons/demo.html +++ b/static/usage/v7/title/collapsible-large-title/buttons/demo.html @@ -1,65 +1,60 @@ + + + + Title + + + + + - - - - Title - - - - - - - - - - - - Title - - Button - - - - - + + + - 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 - - - - +
Scroll the list to see the title & buttons collapse.
- \ No newline at end of file + + 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/v7/title/theming/css-properties/demo.html b/static/usage/v7/title/theming/css-properties/demo.html index 18c3e6c4efc..edbf7a4f374 100644 --- a/static/usage/v7/title/theming/css-properties/demo.html +++ b/static/usage/v7/title/theming/css-properties/demo.html @@ -1,69 +1,67 @@ + + + + Title + + + + - - - - Title - - - - + + - ion-toolbar { - --background: #C897D8; - } - - - - - - - - Title - - - - + + + - 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 - - - - - - \ No newline at end of file + + 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/v7/toast/buttons/demo.html b/static/usage/v7/toast/buttons/demo.html index 01e703fc189..d2b2341e230 100644 --- a/static/usage/v7/toast/buttons/demo.html +++ b/static/usage/v7/toast/buttons/demo.html @@ -1,66 +1,68 @@ + + + + Toast + + + + - - - - Toast - - - - - - - + + - - + toast.buttons = [ + { + text: 'More Info', + role: 'info', + handler: () => { + handlerOutput.innerText = 'More Info clicked'; + }, + }, + { + text: 'Dismiss', + role: 'cancel', + handler: () => { + handlerOutput.innerText = 'Dismiss clicked'; + }, + }, + ]; + toast.addEventListener('ionToastDidDismiss', (ev) => { + const { role } = ev.detail; + roleOutput.innerText = `Dismissed with role: ${role}`; + }); + + diff --git a/static/usage/v7/toast/icon/demo.html b/static/usage/v7/toast/icon/demo.html index 39bff537544..3188b1e6272 100644 --- a/static/usage/v7/toast/icon/demo.html +++ b/static/usage/v7/toast/icon/demo.html @@ -1,30 +1,28 @@ + + + + Toast + + + + + - - - - Toast - - - - - - - - - - - Toast - - - -
- Open Toast - -
- - - - + + + + + Toast + + + +
+ Open Toast + +
+ + + diff --git a/static/usage/v7/toast/inline/basic/demo.html b/static/usage/v7/toast/inline/basic/demo.html index 7a1e5a193b0..ca80d1fd2a6 100644 --- a/static/usage/v7/toast/inline/basic/demo.html +++ b/static/usage/v7/toast/inline/basic/demo.html @@ -1,29 +1,27 @@ + + + + Toast | Inline + + + + + - - - - Toast | Inline - - - - - - - - - - - Inline Toast - - - - Open -

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

- - - - - + + + + + Inline Toast + + + + Open +

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

+ + + + diff --git a/static/usage/v7/toast/inline/is-open/demo.html b/static/usage/v7/toast/inline/is-open/demo.html index 291d57158b1..5be1998b610 100644 --- a/static/usage/v7/toast/inline/is-open/demo.html +++ b/static/usage/v7/toast/inline/is-open/demo.html @@ -1,35 +1,33 @@ + + + + Toast | Inline + + + + + - - - - Toast | Inline - - - - - - - - - - - Inline Toast - - - - Open - - - - - - + + + + + Inline Toast + + + + Open + + + + + diff --git a/static/usage/v7/toast/layout/demo.html b/static/usage/v7/toast/layout/demo.html index 9b66c2f2e13..4a19cd4157d 100644 --- a/static/usage/v7/toast/layout/demo.html +++ b/static/usage/v7/toast/layout/demo.html @@ -1,42 +1,49 @@ + + + + Toast + + + + + - - - - Toast - - - - - + + + + + Toast + + + + Open Baseline Layout Toast + Open Stacked Layout Toast + + + + - - - - - Toast - - - - Open Baseline Layout Toast - Open Stacked Layout Toast - - - - - - - + + diff --git a/static/usage/v7/toast/presenting/controller/demo.html b/static/usage/v7/toast/presenting/controller/demo.html index df07f510890..f388a0167ff 100644 --- a/static/usage/v7/toast/presenting/controller/demo.html +++ b/static/usage/v7/toast/presenting/controller/demo.html @@ -1,54 +1,52 @@ + + + + Toast + + + + - - - - Toast - - - - + + - - + + + + + Toast + + + +
+ Present Toast At the Top + Present Toast At the Middle + Present Toast At the Bottom +
+ + - - - - - Toast - - - -
- Present Toast At the Top - Present Toast At the Middle - Present Toast At the Bottom -
- - + - + - - - \ No newline at end of file + await toast.present(); + } + + + diff --git a/static/usage/v7/toast/theming/demo.html b/static/usage/v7/toast/theming/demo.html index 8fa80d50736..7a9d89b4a63 100644 --- a/static/usage/v7/toast/theming/demo.html +++ b/static/usage/v7/toast/theming/demo.html @@ -1,58 +1,61 @@ + + + + Toast + + + + - - - - Toast - - - - - - - + + + + + + + + Toast + + + +
+ Open Toast + +
+ + + + diff --git a/static/usage/v7/toggle/basic/demo.html b/static/usage/v7/toggle/basic/demo.html index 6e2147fe50d..8119095fad9 100644 --- a/static/usage/v7/toggle/basic/demo.html +++ b/static/usage/v7/toggle/basic/demo.html @@ -1,29 +1,27 @@ + + + + Toggle + + + + + - - - - Toggle - - - - - - - - - -
-
- Default Toggle

- Checked Toggle

- Disabled Toggle

- Disabled Checked Toggle + + + +
+
+ Default Toggle

+ Checked Toggle

+ Disabled Toggle

+ Disabled Checked Toggle +
-
- - - - + + + diff --git a/static/usage/v7/toggle/justify/demo.html b/static/usage/v7/toggle/justify/demo.html index cb14e211de2..c6c5d20a2dd 100644 --- a/static/usage/v7/toggle/justify/demo.html +++ b/static/usage/v7/toggle/justify/demo.html @@ -1,40 +1,38 @@ + + + + Toggle + + + + - - - - Toggle - - - - - - - - - - - -
- - - Packed at the Start of Line - - - Packed at the End of Line - - - Space Between Label and Control - - -
- - - + + + + + +
+ + + Packed at the Start of Line + + + Packed at the End of Line + + + Space Between Label and Control + + +
+ + + diff --git a/static/usage/v7/toggle/label-placement/demo.html b/static/usage/v7/toggle/label-placement/demo.html index 133f8eb7c3a..915b4677bc9 100644 --- a/static/usage/v7/toggle/label-placement/demo.html +++ b/static/usage/v7/toggle/label-placement/demo.html @@ -1,28 +1,26 @@ + + + + Toggle + + + + + - - - - Toggle - - - - - - - - - -
-
- Label at the Start

- Label at the End

- Fixed Width Label

+ + + +
+
+ Label at the Start

+ Label at the End

+ Fixed Width Label

+
-
- - - - + + + diff --git a/static/usage/v7/toggle/list/demo.html b/static/usage/v7/toggle/list/demo.html index d536a146946..142e9535fa4 100644 --- a/static/usage/v7/toggle/list/demo.html +++ b/static/usage/v7/toggle/list/demo.html @@ -1,35 +1,32 @@ + + + + Toggle + + + + + - - - - Toggle - - - - - - - - - - -
- - - Receive Push Notifications - - - Receive Emails - - - Receive Text Messages - - -
- - - - + + + +
+ + + Receive Push Notifications + + + Receive Emails + + + Receive Text Messages + + +
+ + + diff --git a/static/usage/v7/toggle/on-off/demo.html b/static/usage/v7/toggle/on-off/demo.html index af44c9c2b86..ef282c19bb5 100644 --- a/static/usage/v7/toggle/on-off/demo.html +++ b/static/usage/v7/toggle/on-off/demo.html @@ -1,25 +1,22 @@ + + + + Toggle + + + + + - - - - Toggle - - - - - - - - - - -
- Enable Notifications -
- - - - + + + +
+ Enable Notifications +
+ + + diff --git a/static/usage/v7/toggle/theming/colors/demo.html b/static/usage/v7/toggle/theming/colors/demo.html index 9ee17e3bdc4..2b5f355d32f 100644 --- a/static/usage/v7/toggle/theming/colors/demo.html +++ b/static/usage/v7/toggle/theming/colors/demo.html @@ -1,33 +1,30 @@ + + + + Toggle + + + + + - - - - Toggle - - - - - - - - - - -
- - - - - - - - - -
- - - - + + + +
+ + + + + + + + + +
+ + + diff --git a/static/usage/v7/toggle/theming/css-properties/demo.html b/static/usage/v7/toggle/theming/css-properties/demo.html index 7cb99b40e56..3c547a4e8d2 100644 --- a/static/usage/v7/toggle/theming/css-properties/demo.html +++ b/static/usage/v7/toggle/theming/css-properties/demo.html @@ -1,52 +1,50 @@ - - - - - Item - - - - - - - - - - - -
- - -
- - - - + + + + Item + + + + + + + + + + + +
+ + +
+ + + diff --git a/static/usage/v7/toggle/theming/css-shadow-parts/demo.html b/static/usage/v7/toggle/theming/css-shadow-parts/demo.html index d1daaa4698c..565a90f61a1 100644 --- a/static/usage/v7/toggle/theming/css-shadow-parts/demo.html +++ b/static/usage/v7/toggle/theming/css-shadow-parts/demo.html @@ -1,60 +1,58 @@ - - - - - Item - - - - - - - - - - - -
- - -
- - - - + + + + Item + + + + + + + + + + + +
+ + +
+ + + diff --git a/static/usage/v7/toolbar/basic/demo.html b/static/usage/v7/toolbar/basic/demo.html index 5f1879bee39..b89c32302e3 100644 --- a/static/usage/v7/toolbar/basic/demo.html +++ b/static/usage/v7/toolbar/basic/demo.html @@ -1,31 +1,28 @@ + + + + Toolbar + + + + + - - - - Toolbar - - - - + + + + + Header Toolbar + + - - - - - - - Header Toolbar - - - - - - Footer Toolbar - - - - - - \ No newline at end of file + + + Footer Toolbar + + + + + diff --git a/static/usage/v7/toolbar/buttons/demo.html b/static/usage/v7/toolbar/buttons/demo.html index d5d62d9c486..25781e21d5c 100644 --- a/static/usage/v7/toolbar/buttons/demo.html +++ b/static/usage/v7/toolbar/buttons/demo.html @@ -1,120 +1,110 @@ + + + + Toolbar + + + + - - - - Toolbar - - - - + + - - + + + +
+ + + Start + + Start / End Buttons + + End + + - - - -
- - - - Start - - - Start / End Buttons - - - End - - - + + + Secondary + + + Primary + + Primary / Secondary Buttons + - - - - Secondary - - - - - Primary - - - Primary / Secondary Buttons - + + + + + + + + + + + + + + + Icon Buttons + - - - - - - - - - - - - - - - Icon Buttons - + + + + + Contact + + + + + Help + + + + Solid Buttons + - - - - - Contact - - - - - Help - - - - Solid Buttons - + + + + + Star + + + + + Edit + + + + Outline Buttons + - - - - - Star - - - - - Edit - - - - Outline Buttons - + + + + + Back Button + - - - - - Back Button - - - - - - - Menu Button - -
- - - - - \ No newline at end of file + + + + + Menu Button + +
+ + + + diff --git a/static/usage/v7/toolbar/progress-bars/demo.html b/static/usage/v7/toolbar/progress-bars/demo.html index 7f7aebd9cff..14b8713fa06 100644 --- a/static/usage/v7/toolbar/progress-bars/demo.html +++ b/static/usage/v7/toolbar/progress-bars/demo.html @@ -1,26 +1,23 @@ + + + + Toolbar + + + + + - - - - Toolbar - - - - - - - - - - - - Toolbar - - - - - - - \ No newline at end of file + + + + + Toolbar + + + + + + diff --git a/static/usage/v7/toolbar/searchbars/demo.html b/static/usage/v7/toolbar/searchbars/demo.html index c1dcdd42359..0a5f9a78328 100644 --- a/static/usage/v7/toolbar/searchbars/demo.html +++ b/static/usage/v7/toolbar/searchbars/demo.html @@ -1,28 +1,25 @@ + + + + Toolbar + + + + + - - - - Toolbar - - - - - - - - - - - - Toolbar - - - - - - - - - \ No newline at end of file + + + + + Toolbar + + + + + + + + diff --git a/static/usage/v7/toolbar/segments/demo.html b/static/usage/v7/toolbar/segments/demo.html index b240baa1386..b4ee0cd2238 100644 --- a/static/usage/v7/toolbar/segments/demo.html +++ b/static/usage/v7/toolbar/segments/demo.html @@ -1,32 +1,29 @@ + + + + Toolbar + + + + + - - - - Toolbar - - - - - - - - - - - - - - All - - - Favorites - - - - - - - + + + + + + + All + + + Favorites + + + + + + diff --git a/static/usage/v7/toolbar/theming/colors/demo.html b/static/usage/v7/toolbar/theming/colors/demo.html index c3c87cd738d..3705e6fdef4 100644 --- a/static/usage/v7/toolbar/theming/colors/demo.html +++ b/static/usage/v7/toolbar/theming/colors/demo.html @@ -1,60 +1,58 @@ + + + + Toolbar + + + + - - - - Toolbar - - - - + + - - - - - - -
- - Default Toolbar - - - Primary Toolbar - - - Secondary Toolbar - - - Tertiary Toolbar - - - Success Toolbar - - - Warning Toolbar - - - Danger Toolbar - - - Light Toolbar - - - Medium Toolbar - - - Dark Toolbar - -
- - - - - \ No newline at end of file + + + +
+ + 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/v7/toolbar/theming/css-properties/demo.html b/static/usage/v7/toolbar/theming/css-properties/demo.html index 700f63f501d..f512df855e0 100644 --- a/static/usage/v7/toolbar/theming/css-properties/demo.html +++ b/static/usage/v7/toolbar/theming/css-properties/demo.html @@ -1,46 +1,44 @@ + + + + Toolbar + + + + - - - - Toolbar - - - - + + - --min-height: 80px; - --padding-top: 20px; - --padding-bottom: 20px; - } - - - - - - -
- - Custom Toolbar - -
- - - - - \ No newline at end of file + + + +
+ + Custom Toolbar + +
+ + + + From 14aa12a59ca0f45b6164c7c154b117bf73828895 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 1 May 2023 14:23:09 -0400 Subject: [PATCH 02/11] chore: lint ts, tsx, js, jsx files --- scripts/api-ja.js | 4 +- scripts/release-notes.js | 15 +- sidebars.js | 26 +-- src/components/global/Playground/index.tsx | 21 ++- .../global/Playground/stackblitz.utils.ts | 156 ++++++++++-------- .../global/PlaygroundTabs/index.tsx | 8 +- .../native/NativeEnterpriseCard/index.tsx | 10 +- .../page/theming/ColorAccordion/index.tsx | 6 +- 8 files changed, 131 insertions(+), 115 deletions(-) diff --git a/scripts/api-ja.js b/scripts/api-ja.js index fbf9001f67c..81291d19fa7 100644 --- a/scripts/api-ja.js +++ b/scripts/api-ja.js @@ -8,7 +8,9 @@ const DEMOS_PATH = path.resolve('static/demos'); let COMPONENT_LINK_REGEXP; (async function () { - const response = await fetch('https://raw.githubusercontent.com/ionic-team/ionic-docs/translation/jp/scripts/data/translated-api.json'); + const response = await fetch( + 'https://raw.githubusercontent.com/ionic-team/ionic-docs/translation/jp/scripts/data/translated-api.json' + ); const { components } = await response.json(); const names = components.map((component) => component.tag.slice(4)); diff --git a/scripts/release-notes.js b/scripts/release-notes.js index 22e5ca7335c..e7358189f83 100644 --- a/scripts/release-notes.js +++ b/scripts/release-notes.js @@ -23,14 +23,11 @@ const OUTPUT_PATH = resolve(__dirname, '../src/components/page/reference/Release // https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating-with-saml-single-sign-on/authorizing-a-personal-access-token-for-use-with-saml-single-sign-on const getReleases = async () => { try { - const request = await fetch( - new URL('repos/ionic-team/ionic/releases', 'https://api.github.com'), - { - headers: { - Authorization: process.env.GITHUB_TOKEN !== undefined ? `token ${process.env.GITHUB_TOKEN}` : '', - }, - } - ); + const request = await fetch(new URL('repos/ionic-team/ionic/releases', 'https://api.github.com'), { + headers: { + Authorization: process.env.GITHUB_TOKEN !== undefined ? `token ${process.env.GITHUB_TOKEN}` : '', + }, + }); const releases = await request.json(); @@ -64,7 +61,7 @@ const getReleases = async () => { return -semver.compare(a.tag_name, b.tag_name); }); } else { - console.error("There was an issue getting releases:", releases); + console.error('There was an issue getting releases:', releases); return []; } } catch (error) { diff --git a/sidebars.js b/sidebars.js index 2e7f6c563f1..c08a43ada8f 100644 --- a/sidebars.js +++ b/sidebars.js @@ -10,12 +10,7 @@ module.exports = { type: 'category', label: 'Upgrade Guides', collapsed: false, - items: [ - 'updating/7-0', - 'updating/6-0', - 'updating/5-0', - 'updating/4-0' - ] + items: ['updating/7-0', 'updating/6-0', 'updating/5-0', 'updating/4-0'], }, { type: 'category', @@ -30,7 +25,7 @@ module.exports = { 'developing/tips', 'developing/hardware-back-button', 'developing/keyboard', - 'developing/config' + 'developing/config', ], }, { @@ -45,7 +40,7 @@ module.exports = { href: '/docs/api/grid', }, 'layout/global-stylesheets', - 'layout/css-utilities' + 'layout/css-utilities', ], }, { @@ -229,7 +224,7 @@ module.exports = { href: 'https://github.com/ionic-team/ionic/blob/master/CHANGELOG.md', }, 'reference/support', - 'reference/browser-support' + 'reference/browser-support', ], }, ], @@ -362,12 +357,7 @@ module.exports = { type: 'category', label: 'Media', collapsed: false, - items: [ - 'api/avatar', - 'api/icon', - 'api/img', - 'api/thumbnail', - ], + items: ['api/avatar', 'api/icon', 'api/img', 'api/thumbnail'], }, { type: 'category', @@ -520,11 +510,7 @@ module.exports = { type: 'category', label: 'Getting Started', collapsed: false, - items: [ - 'native', - 'native-setup', - 'native-faq', - ], + items: ['native', 'native-setup', 'native-faq'], }, { type: 'category', diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index 6de23298974..541e510b51e 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -155,7 +155,7 @@ export default function Playground({ // Otherwise, default to the first target passed. return Object.keys(code)[0]; - } + }; /** * Developers can set a predefined size @@ -436,7 +436,6 @@ export default function Playground({
{sortedUsageTargets.map((lang) => { - /** * If code was not passed for this target * then we should disable the button. @@ -444,14 +443,14 @@ export default function Playground({ const langValue = UsageTarget[lang]; const hasCode = code[langValue] !== undefined; return ( - ) - ; + /> + ); })}
@@ -577,12 +576,20 @@ export default function Playground({ */} {devicePreview ? [ -
+
, -
+
diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts index 2b597c52a49..1fe697a350f 100644 --- a/src/components/global/Playground/stackblitz.utils.ts +++ b/src/components/global/Playground/stackblitz.utils.ts @@ -5,7 +5,6 @@ const DEFAULT_EDITOR_TITLE = 'Ionic Docs Example'; // The default description to use for Stackblitz examples (when not overwritten) const DEFAULT_EDITOR_DESCRIPTION = ''; - export interface EditorOptions { /** * The title of the Stackblitz example. @@ -18,7 +17,7 @@ export interface EditorOptions { files?: { [key: string]: string; - } + }; /** * `true` if `ion-app` and `ion-content` should automatically be injected into the @@ -36,29 +35,34 @@ export interface EditorOptions { const loadSourceFiles = async (files: string[], version: number) => { const versionDir = `v${version}`; - const sourceFiles = await Promise.all(files.map(f => fetch(`/docs/code/stackblitz/${versionDir}/${f}`))); - return (await Promise.all(sourceFiles.map(res => res.text()))); -} + const sourceFiles = await Promise.all(files.map((f) => fetch(`/docs/code/stackblitz/${versionDir}/${f}`))); + return await Promise.all(sourceFiles.map((res) => res.text())); +}; const openHtmlEditor = async (code: string, options?: EditorOptions) => { - const defaultFiles = await loadSourceFiles([ - 'html/index.ts', - options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html', - 'html/variables.css', - 'html/package.json' - ], options.version); + const defaultFiles = await loadSourceFiles( + [ + 'html/index.ts', + options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html', + 'html/variables.css', + 'html/package.json', + ], + options.version + ); const indexHtml = 'index.html'; const files = { 'index.ts': defaultFiles[0], [indexHtml]: defaultFiles[1], 'theme/variables.css': defaultFiles[2], - ...options?.files + ...options?.files, }; const package_json = defaultFiles[3]; - files[indexHtml] = files[indexHtml].replace(/{{ TEMPLATE }}/g, code).replace('', ` + files[indexHtml] = files[indexHtml].replace(/{{ TEMPLATE }}/g, code).replace( + '', + ` -`); +` + ); let dependencies = {}; try { dependencies = { ...dependencies, - ...JSON.parse(package_json).dependencies - } + ...JSON.parse(package_json).dependencies, + }; } catch (e) { console.error('Failed to parse package.json contents', e); } @@ -84,25 +89,28 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => { title: options?.title ?? DEFAULT_EDITOR_TITLE, description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION, files, - dependencies - }) -} + dependencies, + }); +}; const openAngularEditor = async (code: string, options?: EditorOptions) => { - const defaultFiles = await loadSourceFiles([ - 'angular/main.ts', - 'angular/app.module.ts', - 'angular/app.component.ts', - 'angular/app.component.css', - options?.includeIonContent ? 'angular/app.component.withContent.html' : 'angular/app.component.html', - 'angular/example.component.ts', - 'angular/styles.css', - 'angular/global.css', - 'angular/variables.css', - 'angular/angular.json', - 'angular/tsconfig.json', - 'angular/package.json' - ], options.version); + const defaultFiles = await loadSourceFiles( + [ + 'angular/main.ts', + 'angular/app.module.ts', + 'angular/app.component.ts', + 'angular/app.component.css', + options?.includeIonContent ? 'angular/app.component.withContent.html' : 'angular/app.component.html', + 'angular/example.component.ts', + 'angular/styles.css', + 'angular/global.css', + 'angular/variables.css', + 'angular/angular.json', + 'angular/tsconfig.json', + 'angular/package.json', + ], + options.version + ); const appModule = 'src/app/app.module.ts'; const files = { @@ -121,19 +129,22 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => { 'src/theme/variables.css': defaultFiles[8], 'angular.json': defaultFiles[9], 'tsconfig.json': defaultFiles[10], - ...options?.files + ...options?.files, }; const package_json = defaultFiles[11]; - files[appModule] = files[appModule].replace('IonicModule.forRoot({})', `IonicModule.forRoot({ mode: '${options?.mode}' })`); + files[appModule] = files[appModule].replace( + 'IonicModule.forRoot({})', + `IonicModule.forRoot({ mode: '${options?.mode}' })` + ); let dependencies = {}; try { dependencies = { ...dependencies, - ...JSON.parse(package_json).dependencies - } + ...JSON.parse(package_json).dependencies, + }; } catch (e) { console.error('Failed to parse package.json contents', e); } @@ -143,20 +154,23 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => { title: options?.title ?? DEFAULT_EDITOR_TITLE, description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION, files, - dependencies + dependencies, }); -} +}; const openReactEditor = async (code: string, options?: EditorOptions) => { - const defaultFiles = await loadSourceFiles([ - 'react/index.tsx', - options?.includeIonContent ? 'react/app.withContent.tsx' : 'react/app.tsx', - 'react/variables.css', - 'react/tsconfig.json', - 'react/package.json', - 'react/package-lock.json', - 'react/index.html', - ], options.version); + const defaultFiles = await loadSourceFiles( + [ + 'react/index.tsx', + options?.includeIonContent ? 'react/app.withContent.tsx' : 'react/app.tsx', + 'react/variables.css', + 'react/tsconfig.json', + 'react/package.json', + 'react/package-lock.json', + 'react/index.html', + ], + options.version + ); const appTsx = 'src/App.tsx'; const files = { @@ -171,7 +185,7 @@ const openReactEditor = async (code: string, options?: EditorOptions) => { ...options?.files, '.stackblitzrc': `{ "startCommand": "yarn run start" -}` +}`, }; files[appTsx] = files[appTsx].replace('setupIonicReact()', `setupIonicReact({ mode: '${options?.mode}' })`); @@ -180,23 +194,26 @@ const openReactEditor = async (code: string, options?: EditorOptions) => { template: 'node', title: options?.title ?? DEFAULT_EDITOR_TITLE, description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION, - files + files, }); -} +}; const openVueEditor = async (code: string, options?: EditorOptions) => { - const defaultFiles = await loadSourceFiles([ - 'vue/package.json', - 'vue/package-lock.json', - 'vue/index.html', - 'vue/variables.css', - 'vue/vite.config.ts', - 'vue/main.ts', - options?.includeIonContent ? 'vue/App.withContent.vue' : 'vue/App.vue', - 'vue/tsconfig.json', - 'vue/tsconfig.node.json', - 'vue/env.d.ts' - ], options.version); + const defaultFiles = await loadSourceFiles( + [ + 'vue/package.json', + 'vue/package-lock.json', + 'vue/index.html', + 'vue/variables.css', + 'vue/vite.config.ts', + 'vue/main.ts', + options?.includeIonContent ? 'vue/App.withContent.vue' : 'vue/App.vue', + 'vue/tsconfig.json', + 'vue/tsconfig.node.json', + 'vue/env.d.ts', + ], + options.version + ); const mainTs = 'src/main.ts'; const files = { @@ -214,12 +231,15 @@ const openVueEditor = async (code: string, options?: EditorOptions) => { ...options?.files, '.stackblitzrc': `{ "startCommand": "yarn run dev" -}` +}`, }; - files[mainTs] = files[mainTs].replace('.use(IonicVue)', `.use(IonicVue, { + files[mainTs] = files[mainTs].replace( + '.use(IonicVue)', + `.use(IonicVue, { mode: '${options?.mode}' -})`); +})` + ); /** * We have to use Stackblitz web containers here (node template), due @@ -231,8 +251,8 @@ const openVueEditor = async (code: string, options?: EditorOptions) => { template: 'node', title: options?.title ?? DEFAULT_EDITOR_TITLE, description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION, - files + files, }); -} +}; export { openAngularEditor, openHtmlEditor, openReactEditor, openVueEditor }; diff --git a/src/components/global/PlaygroundTabs/index.tsx b/src/components/global/PlaygroundTabs/index.tsx index da7b45b84e8..73d958c5681 100644 --- a/src/components/global/PlaygroundTabs/index.tsx +++ b/src/components/global/PlaygroundTabs/index.tsx @@ -113,13 +113,13 @@ function TabsComponent(props: Props): JSX.Element { /** * If the selected value is not in the available tabs, fall back to the first tab. * This can happen if the tab children are changed after the initial render. - * + * * Note that actually updating selectedValue (for example, when defaultValue or the * children are changed) would defer the fallback selection to the next render cycle, * adding flicker. */ - const useFallback = values.find(item => item.value === selectedValue) === undefined; - const isTabSelected = (value: string) => useFallback ? value === values[0].value : value === selectedValue; + const useFallback = values.find((item) => item.value === selectedValue) === undefined; + const isTabSelected = (value: string) => (useFallback ? value === values[0].value : value === selectedValue); return (
@@ -185,7 +185,7 @@ function TabsComponent(props: Props): JSX.Element { {icon && {icon}} {label ?? value} - ) + ); })} {rightNavVisible && (
diff --git a/src/components/page/native/NativeEnterpriseCard/index.tsx b/src/components/page/native/NativeEnterpriseCard/index.tsx index 28bfe3371e9..d188069a790 100644 --- a/src/components/page/native/NativeEnterpriseCard/index.tsx +++ b/src/components/page/native/NativeEnterpriseCard/index.tsx @@ -6,7 +6,11 @@ import styles from './index.module.scss'; export default function NativeEnterpriseCard(props) { return ( - +
@@ -14,8 +18,8 @@ export default function NativeEnterpriseCard(props) {
Ionic Enterprise SDK

- Premium, supported plugins, third-party integrations, and pre-built native solutions for - building enterprise-grade apps. + Premium, supported plugins, third-party integrations, and pre-built native solutions for building + enterprise-grade apps.

diff --git a/src/components/page/theming/ColorAccordion/index.tsx b/src/components/page/theming/ColorAccordion/index.tsx index 5e2ee0ab501..26575e37117 100755 --- a/src/components/page/theming/ColorAccordion/index.tsx +++ b/src/components/page/theming/ColorAccordion/index.tsx @@ -45,7 +45,7 @@ export default function ColorAccordion({ ...props }) { })} style={ { - 'backgroundColor': `var(--ion-color-${color})`, + backgroundColor: `var(--ion-color-${color})`, color: `var(--ion-color-${color}-contrast)`, } as any } @@ -85,7 +85,7 @@ export default function ColorAccordion({ ...props }) { className={styles.colorSubmenuItem} style={ { - 'backgroundColor': `var(--ion-color-${color}-shade)`, + backgroundColor: `var(--ion-color-${color}-shade)`, color: `var(--ion-color-${color}-contrast)`, } as any } @@ -99,7 +99,7 @@ export default function ColorAccordion({ ...props }) { className={styles.colorSubmenuItem} style={ { - 'backgroundColor': `var(--ion-color-${color}-tint)`, + backgroundColor: `var(--ion-color-${color}-tint)`, color: `var(--ion-color-${color}-contrast)`, } as any } From 9dd15bbe34335bcca26b1b2b82b37df38e1d402b Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 1 May 2023 14:24:46 -0400 Subject: [PATCH 03/11] chore: lint md files --- docs/angular/navigation.md | 33 +++--- docs/angular/slides.md | 20 ++-- docs/cli/livereload.md | 3 +- .../guides/first-app-v4/intro.md | 2 +- docs/developing/config.md | 85 +++++++------- docs/developing/config/global/index.md | 36 +++--- docs/developing/config/per-component/index.md | 42 ++++--- .../config/per-platform-fallback/index.md | 42 +++---- .../config/per-platform-overrides/index.md | 26 +++-- docs/developing/config/per-platform/index.md | 25 ++-- docs/developing/hardware-back-button.md | 8 +- docs/index.md | 20 ++-- docs/layout/css-utilities.md | 9 +- docs/layout/structure.md | 4 - docs/native-faq.md | 9 +- docs/native.md | 4 - docs/react.md | 8 +- docs/react/navigation.md | 61 +++++----- docs/react/quickstart.md | 2 +- docs/reference/browser-support.md | 11 +- docs/reference/support.md | 42 +++---- docs/updating/6-0.md | 69 ++++++----- docs/vue/navigation.md | 39 ++++--- docs/vue/pwa.md | 13 +-- docs/vue/quickstart.md | 33 +++++- docs/vue/slides.md | 2 +- docs/vue/your-first-app.md | 2 +- docs/vue/your-first-app/2-taking-photos.md | 2 +- .../accessibility/animations/index.md | 6 +- .../accessibility/animations/javascript.md | 46 ++++---- static/usage/v6/accordion/basic/angular.md | 12 +- static/usage/v6/accordion/basic/index.md | 8 +- static/usage/v6/accordion/basic/javascript.md | 12 +- static/usage/v6/accordion/basic/react.md | 7 +- static/usage/v6/accordion/basic/vue.md | 25 ++-- .../angular/example_component_css.md | 10 +- .../angular/example_component_html.md | 12 +- .../advanced-expansion-styles/index.md | 8 +- .../advanced-expansion-styles/javascript.md | 20 ++-- .../react/main_css.md | 10 +- .../advanced-expansion-styles/vue.md | 39 +++---- .../customization/expansion-styles/angular.md | 12 +- .../customization/expansion-styles/index.md | 8 +- .../expansion-styles/javascript.md | 12 +- .../customization/expansion-styles/react.md | 7 +- .../customization/expansion-styles/vue.md | 25 ++-- .../v6/accordion/customization/icons/index.md | 8 +- .../customization/icons/javascript.md | 12 +- .../v6/accordion/customization/icons/react.md | 7 +- .../v6/accordion/customization/icons/vue.md | 29 ++--- .../theming/angular/example_component_html.md | 12 +- .../theming/angular/global_css.md | 10 +- .../accordion/customization/theming/index.md | 8 +- .../customization/theming/javascript.md | 24 ++-- .../customization/theming/react/main_css.md | 10 +- .../customization/theming/react/main_tsx.md | 7 +- .../v6/accordion/customization/theming/vue.md | 41 +++---- .../usage/v6/accordion/disable-group/index.md | 6 +- .../usage/v6/accordion/disable/group/index.md | 6 +- .../v6/accordion/disable/individual/index.md | 8 +- .../v6/accordion/listen-changes/index.md | 8 +- static/usage/v6/accordion/multiple/index.md | 8 +- .../v6/accordion/readonly/group/angular.md | 12 +- .../v6/accordion/readonly/group/index.md | 8 +- .../v6/accordion/readonly/group/javascript.md | 12 +- .../v6/accordion/readonly/group/react.md | 7 +- .../usage/v6/accordion/readonly/group/vue.md | 25 ++-- .../accordion/readonly/individual/angular.md | 12 +- .../v6/accordion/readonly/individual/index.md | 6 +- .../readonly/individual/javascript.md | 12 +- .../v6/accordion/readonly/individual/react.md | 7 +- .../v6/accordion/readonly/individual/vue.md | 25 ++-- static/usage/v6/accordion/toggle/index.md | 8 +- static/usage/v6/action-sheet/basic/index.md | 8 +- .../theming/css-properties/index.md | 8 +- .../v6/action-sheet/theming/styling/index.md | 8 +- .../buttons/angular/example_component_html.md | 2 +- static/usage/v6/alert/buttons/index.md | 8 +- static/usage/v6/alert/buttons/javascript.md | 10 +- .../alert/customization/angular/global_css.md | 4 +- static/usage/v6/alert/customization/index.md | 8 +- .../v6/alert/customization/javascript.md | 8 +- .../v6/alert/customization/react/main_css.md | 4 +- .../radios/angular/example_component_html.md | 2 +- static/usage/v6/alert/inputs/radios/index.md | 8 +- .../v6/alert/inputs/radios/javascript.md | 8 +- .../angular/example_component_html.md | 2 +- .../v6/alert/inputs/text-inputs/index.md | 8 +- .../v6/alert/inputs/text-inputs/javascript.md | 12 +- .../angular/example_component_html.md | 2 +- .../v6/alert/presenting/controller/index.md | 8 +- static/usage/v6/avatar/chip/vue.md | 2 +- static/usage/v6/avatar/item/vue.md | 2 +- .../v6/avatar/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_tsx.md | 1 - .../v6/avatar/theming/css-properties/vue.md | 2 +- .../basic/angular/page_two_component_ts.md | 4 +- static/usage/v6/back-button/basic/index.md | 10 +- .../v6/back-button/basic/vue/page_two_vue.md | 2 +- .../custom/angular/page_two_component_ts.md | 4 +- static/usage/v6/back-button/custom/index.md | 10 +- .../v6/back-button/custom/vue/page_two_vue.md | 4 +- static/usage/v6/backdrop/basic/index.md | 8 +- static/usage/v6/backdrop/styling/index.md | 8 +- static/usage/v6/badge/theming/colors/index.md | 8 +- .../angular/example_component_css.md | 2 +- .../v6/badge/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../collapsing-items/expand-on-click/index.md | 6 +- .../collapsing-items/expand-on-click/vue.md | 8 +- .../items-before-after/index.md | 8 +- .../collapsing-items/max-items/index.md | 6 +- .../angular/example_component_html.md | 2 +- .../popover-on-click/index.md | 8 +- .../popover-on-click/javascript.md | 6 +- .../popover-on-click/react.md | 5 +- .../collapsing-items/popover-on-click/vue.md | 40 +++---- .../icons/custom-separators/index.md | 6 +- .../icons/custom-separators/vue.md | 2 +- .../breadcrumbs/icons/icons-on-items/index.md | 8 +- .../v6/breadcrumbs/theming/colors/index.md | 6 +- .../angular/example_component_css.md | 2 +- .../theming/css-properties/index.md | 6 +- .../theming/css-properties/react/main_css.md | 2 +- static/usage/v6/button/basic/angular.md | 3 +- static/usage/v6/button/basic/javascript.md | 3 +- static/usage/v6/button/expand/angular.md | 3 +- static/usage/v6/button/expand/javascript.md | 3 +- static/usage/v6/button/icons/vue.md | 4 +- static/usage/v6/button/shape/angular.md | 3 +- static/usage/v6/button/shape/javascript.md | 3 +- .../v6/button/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_css.md | 1 - .../theming/css-properties/react/main_tsx.md | 4 +- static/usage/v6/buttons/types/angular.md | 8 +- static/usage/v6/buttons/types/index.md | 8 +- static/usage/v6/buttons/types/javascript.md | 8 +- static/usage/v6/buttons/types/react.md | 9 +- static/usage/v6/buttons/types/vue.md | 10 +- static/usage/v6/card/basic/index.md | 6 +- static/usage/v6/card/basic/react/main_tsx.md | 4 +- static/usage/v6/card/buttons/index.md | 8 +- .../usage/v6/card/buttons/react/main_tsx.md | 4 +- static/usage/v6/card/list/index.md | 8 +- static/usage/v6/card/list/react/main_tsx.md | 12 +- static/usage/v6/card/media/index.md | 8 +- static/usage/v6/card/media/react/main_tsx.md | 4 +- .../colors/angular/example_component_html.md | 36 ++---- static/usage/v6/card/theming/colors/index.md | 8 +- .../v6/card/theming/colors/javascript.md | 36 ++---- .../v6/card/theming/colors/react/main_tsx.md | 36 ++---- static/usage/v6/card/theming/colors/vue.md | 36 ++---- .../v6/card/theming/css-properties/index.md | 6 +- .../theming/css-properties/react/main_tsx.md | 4 +- static/usage/v6/checkbox/basic/index.md | 6 +- static/usage/v6/checkbox/basic/react.md | 8 +- static/usage/v6/checkbox/basic/vue.md | 10 +- .../usage/v6/checkbox/indeterminate/index.md | 6 +- .../usage/v6/checkbox/indeterminate/react.md | 8 +- static/usage/v6/checkbox/indeterminate/vue.md | 10 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../checkbox/theming/css-properties/index.md | 6 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 8 +- .../v6/checkbox/theming/css-properties/vue.md | 12 +- .../v6/chip/theming/css-properties/index.md | 6 +- static/usage/v6/content/basic/index.md | 10 +- static/usage/v6/content/fixed/angular.md | 50 +++++++- .../fixed/angular/example_component_css.md | 2 +- .../fixed/angular/example_component_html.md | 50 +++++++- static/usage/v6/content/fixed/index.md | 10 +- static/usage/v6/content/fixed/javascript.md | 52 ++++++++- static/usage/v6/content/fixed/react.md | 50 +++++++- .../usage/v6/content/fixed/react/main_css.md | 2 +- .../usage/v6/content/fixed/react/main_tsx.md | 50 +++++++- static/usage/v6/content/fixed/vue.md | 52 ++++++++- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 58 +++++++-- static/usage/v6/content/fullscreen/index.md | 10 +- .../usage/v6/content/fullscreen/javascript.md | 60 ++++++++-- .../v6/content/fullscreen/react/main_css.md | 2 +- .../v6/content/fullscreen/react/main_tsx.md | 58 +++++++-- static/usage/v6/content/fullscreen/vue.md | 60 ++++++++-- .../usage/v6/content/header-footer/angular.md | 8 +- .../usage/v6/content/header-footer/index.md | 10 +- .../v6/content/header-footer/javascript.md | 8 +- .../usage/v6/content/header-footer/react.md | 8 +- static/usage/v6/content/header-footer/vue.md | 8 +- .../angular/example_component_html.md | 53 ++++++++- .../usage/v6/content/scroll-events/index.md | 10 +- .../v6/content/scroll-events/javascript.md | 50 +++++++- .../usage/v6/content/scroll-events/react.md | 53 ++++++++- static/usage/v6/content/scroll-events/vue.md | 57 +++++++-- .../angular/example_component_html.md | 50 +++++++- .../usage/v6/content/scroll-methods/index.md | 10 +- .../v6/content/scroll-methods/javascript.md | 50 +++++++- .../usage/v6/content/scroll-methods/react.md | 58 +++++++-- static/usage/v6/content/scroll-methods/vue.md | 52 ++++++++- .../usage/v6/content/theming/colors/index.md | 10 +- .../content/theming/css-properties/index.md | 10 +- .../content/theming/css-shadow-parts/index.md | 10 +- .../usage/v6/datetime-button/basic/index.md | 8 +- .../usage/v6/datetime-button/basic/react.md | 2 +- static/usage/v6/datetime-button/basic/vue.md | 2 +- static/usage/v6/datetime/basic/index.md | 8 +- .../customizing-button-texts/angular.md | 7 +- .../buttons/customizing-button-texts/index.md | 8 +- .../customizing-button-texts/javascript.md | 6 +- .../buttons/customizing-button-texts/react.md | 9 +- .../buttons/customizing-button-texts/vue.md | 8 +- .../buttons/customizing-buttons/index.md | 8 +- .../buttons/customizing-buttons/react.md | 18 ++- .../buttons/customizing-buttons/vue.md | 4 +- .../showing-confirmation-buttons/index.md | 8 +- .../showing-confirmation-buttons/react.md | 4 +- .../date-constraints/advanced/index.md | 8 +- .../date-constraints/advanced/javascript.md | 2 +- .../date-constraints/advanced/react.md | 8 +- .../datetime/date-constraints/advanced/vue.md | 10 +- .../date-constraints/max-min/angular.md | 6 +- .../date-constraints/max-min/index.md | 8 +- .../date-constraints/max-min/javascript.md | 6 +- .../date-constraints/max-min/react.md | 8 +- .../datetime/date-constraints/max-min/vue.md | 6 +- .../date-constraints/values/angular.md | 5 +- .../datetime/date-constraints/values/index.md | 8 +- .../date-constraints/values/javascript.md | 5 +- .../datetime/date-constraints/values/react.md | 7 +- .../datetime/date-constraints/values/vue.md | 5 +- .../array/angular/example_component_html.md | 6 +- .../array/angular/example_component_ts.md | 4 +- .../datetime/highlightedDates/array/index.md | 8 +- .../highlightedDates/array/javascript.md | 4 +- .../datetime/highlightedDates/array/react.md | 4 +- .../v6/datetime/highlightedDates/array/vue.md | 16 +-- .../callback/angular/example_component_ts.md | 4 +- .../highlightedDates/callback/index.md | 8 +- .../highlightedDates/callback/javascript.md | 4 +- .../highlightedDates/callback/react.md | 4 +- .../datetime/highlightedDates/callback/vue.md | 8 +- .../localization/custom-locale/index.md | 8 +- .../localization/custom-locale/react.md | 4 +- .../localization/first-day-of-week/index.md | 8 +- .../localization/first-day-of-week/react.md | 4 +- .../datetime/localization/hour-cycle/index.md | 8 +- .../datetime/localization/hour-cycle/react.md | 4 +- .../locale-extension-tags/index.md | 8 +- .../locale-extension-tags/react.md | 4 +- .../datetime/localization/time-label/index.md | 8 +- static/usage/v6/datetime/multiple/angular.md | 6 +- static/usage/v6/datetime/multiple/index.md | 8 +- static/usage/v6/datetime/multiple/react.md | 8 +- static/usage/v6/datetime/multiple/vue.md | 6 +- .../v6/datetime/presentation/date/index.md | 8 +- .../v6/datetime/presentation/date/react.md | 4 +- .../presentation/month-and-year/index.md | 8 +- .../presentation/month-and-year/react.md | 4 +- .../v6/datetime/presentation/time/index.md | 6 +- .../v6/datetime/presentation/time/react.md | 4 +- .../v6/datetime/presentation/wheel/index.md | 8 +- .../v6/datetime/presentation/wheel/react.md | 4 +- static/usage/v6/datetime/theming/index.md | 8 +- .../usage/v6/datetime/theming/javascript.md | 18 +-- .../v6/datetime/theming/react/main_css.md | 12 +- static/usage/v6/datetime/theming/vue.md | 18 +-- .../datetime/title/customizing-title/index.md | 8 +- .../title/showing-default-title/index.md | 8 +- .../title/showing-default-title/react.md | 4 +- static/usage/v6/fab/basic/vue.md | 4 +- static/usage/v6/fab/button-sizing/vue.md | 4 +- static/usage/v6/fab/list-side/vue.md | 4 +- static/usage/v6/fab/positioning/angular.md | 2 +- static/usage/v6/fab/positioning/index.md | 10 +- static/usage/v6/fab/positioning/javascript.md | 2 +- static/usage/v6/fab/positioning/react.md | 11 +- static/usage/v6/fab/positioning/vue.md | 15 ++- static/usage/v6/fab/theming/colors/vue.md | 4 +- .../angular/example_component_css.md | 4 +- .../theming/css-custom-properties/index.md | 6 +- .../css-custom-properties/javascript.md | 2 +- .../css-custom-properties/react/main_css.md | 4 +- .../fab/theming/css-custom-properties/vue.md | 6 +- .../angular/example_component_css.md | 6 +- .../v6/fab/theming/css-shadow-parts/index.md | 6 +- .../theming/css-shadow-parts/javascript.md | 4 +- .../css-shadow-parts/react/main_css.md | 6 +- .../v6/fab/theming/css-shadow-parts/vue.md | 8 +- static/usage/v6/footer/basic/index.md | 10 +- .../angular/example_component_html.md | 57 +++++++-- .../v6/footer/custom-scroll-target/index.md | 12 +- .../footer/custom-scroll-target/javascript.md | 57 +++++++-- .../custom-scroll-target/react/main_tsx.md | 59 ++++++++-- .../v6/footer/custom-scroll-target/vue.md | 57 +++++++-- static/usage/v6/footer/fade/angular.md | 57 +++++++-- static/usage/v6/footer/fade/index.md | 12 +- static/usage/v6/footer/fade/javascript.md | 57 +++++++-- static/usage/v6/footer/fade/react.md | 57 +++++++-- static/usage/v6/footer/fade/vue.md | 57 +++++++-- static/usage/v6/footer/no-border/index.md | 10 +- static/usage/v6/footer/translucent/angular.md | 57 +++++++-- static/usage/v6/footer/translucent/index.md | 12 +- .../usage/v6/footer/translucent/javascript.md | 57 +++++++-- static/usage/v6/footer/translucent/react.md | 57 +++++++-- static/usage/v6/footer/translucent/vue.md | 57 +++++++-- static/usage/v6/grid/basic/index.md | 8 +- .../grid/customizing/column-number/index.md | 8 +- .../column-number/react/main_tsx.md | 4 +- .../v6/grid/customizing/padding/index.md | 8 +- .../usage/v6/grid/customizing/width/index.md | 8 +- static/usage/v6/grid/fixed/index.md | 8 +- .../angular/example_component_html.md | 40 ++----- .../v6/grid/horizontal-alignment/index.md | 8 +- .../grid/horizontal-alignment/javascript.md | 40 ++----- .../horizontal-alignment/react/main_tsx.md | 40 ++----- .../usage/v6/grid/horizontal-alignment/vue.md | 40 ++----- .../usage/v6/grid/offset-responsive/index.md | 8 +- .../grid/offset-responsive/react/main_tsx.md | 8 +- static/usage/v6/grid/offset/index.md | 8 +- static/usage/v6/grid/offset/react/main_tsx.md | 16 ++- .../v6/grid/push-pull-responsive/index.md | 8 +- .../push-pull-responsive/react/main_tsx.md | 24 +++- .../angular/example_component_html.md | 5 +- static/usage/v6/grid/push-pull/index.md | 8 +- static/usage/v6/grid/push-pull/javascript.md | 5 +- .../usage/v6/grid/push-pull/react/main_tsx.md | 23 +++- static/usage/v6/grid/push-pull/vue.md | 15 ++- static/usage/v6/grid/size-auto/index.md | 8 +- .../usage/v6/grid/size-auto/react/main_tsx.md | 14 ++- static/usage/v6/grid/size-responsive/index.md | 8 +- .../v6/grid/size-responsive/react/main_tsx.md | 40 +++++-- static/usage/v6/grid/size/index.md | 8 +- static/usage/v6/grid/size/react/main_tsx.md | 12 +- .../angular/example_component_html.md | 36 ++---- .../usage/v6/grid/vertical-alignment/index.md | 8 +- .../v6/grid/vertical-alignment/javascript.md | 36 ++---- .../grid/vertical-alignment/react/main_tsx.md | 36 ++---- .../usage/v6/grid/vertical-alignment/vue.md | 36 ++---- static/usage/v6/header/basic/index.md | 10 +- static/usage/v6/header/condense/angular.md | 57 +++++++-- static/usage/v6/header/condense/index.md | 12 +- static/usage/v6/header/condense/javascript.md | 57 +++++++-- static/usage/v6/header/condense/react.md | 59 ++++++++-- static/usage/v6/header/condense/vue.md | 57 +++++++-- .../angular/example_component_html.md | 57 +++++++-- .../v6/header/custom-scroll-target/index.md | 12 +- .../custom-scroll-target/react/main_tsx.md | 59 ++++++++-- .../v6/header/custom-scroll-target/vue.md | 57 +++++++-- static/usage/v6/header/fade/angular.md | 57 +++++++-- static/usage/v6/header/fade/index.md | 12 +- static/usage/v6/header/fade/javascript.md | 57 +++++++-- static/usage/v6/header/fade/react.md | 57 +++++++-- static/usage/v6/header/fade/vue.md | 57 +++++++-- static/usage/v6/header/no-border/index.md | 10 +- static/usage/v6/header/translucent/angular.md | 57 +++++++-- static/usage/v6/header/translucent/index.md | 12 +- .../usage/v6/header/translucent/javascript.md | 57 +++++++-- static/usage/v6/header/translucent/react.md | 57 +++++++-- static/usage/v6/header/translucent/vue.md | 57 +++++++-- static/usage/v6/icon/basic/index.md | 8 +- static/usage/v6/img/basic/angular.md | 5 +- static/usage/v6/img/basic/javascript.md | 5 +- static/usage/v6/img/basic/react.md | 5 +- static/usage/v6/img/basic/vue.md | 5 +- .../usage/v6/infinite-scroll/basic/index.md | 6 +- .../custom-infinite-scroll-content/index.md | 6 +- .../infinite-scroll-content/index.md | 6 +- static/usage/v6/input/clear/vue.md | 5 +- static/usage/v6/input/fill/index.md | 10 +- .../angular/example_component_html.md | 6 +- .../filtering/angular/example_component_ts.md | 10 +- static/usage/v6/input/filtering/index.md | 6 +- static/usage/v6/input/filtering/javascript.md | 4 +- static/usage/v6/input/filtering/react.md | 22 ++-- static/usage/v6/input/filtering/vue.md | 20 ++-- static/usage/v6/input/theming/colors/index.md | 8 +- .../angular/example_component_css.md | 2 +- .../v6/input/theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 4 +- .../v6/input/theming/css-properties/vue.md | 2 +- static/usage/v6/item-divider/basic/angular.md | 8 +- static/usage/v6/item-divider/basic/index.md | 8 +- .../usage/v6/item-divider/basic/javascript.md | 8 +- static/usage/v6/item-divider/basic/react.md | 8 +- static/usage/v6/item-divider/basic/vue.md | 8 +- .../v6/item-divider/theming/colors/index.md | 8 +- .../angular/example_component_html.md | 4 +- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 4 +- .../theming/css-properties/react/main_tsx.md | 5 +- .../theming/css-properties/vue.md | 6 +- static/usage/v6/item-group/basic/index.md | 8 +- .../v6/item-group/sliding-items/angular.md | 56 +++------ .../v6/item-group/sliding-items/index.md | 8 +- .../v6/item-group/sliding-items/javascript.md | 56 +++------ .../v6/item-group/sliding-items/react.md | 66 ++++------- .../usage/v6/item-group/sliding-items/vue.md | 66 ++++------- .../usage/v6/item-sliding/expandable/index.md | 8 +- .../usage/v6/item-sliding/expandable/react.md | 8 +- static/usage/v6/item-sliding/icons/angular.md | 16 +-- static/usage/v6/item-sliding/icons/index.md | 8 +- .../usage/v6/item-sliding/icons/javascript.md | 16 +-- static/usage/v6/item-sliding/icons/react.md | 16 +-- static/usage/v6/item-sliding/icons/vue.md | 20 +--- static/usage/v6/item/basic/angular.md | 10 +- static/usage/v6/item/basic/javascript.md | 10 +- static/usage/v6/item/basic/react.md | 6 +- static/usage/v6/item/basic/vue.md | 8 +- static/usage/v6/item/buttons/angular.md | 20 +--- static/usage/v6/item/buttons/javascript.md | 20 +--- static/usage/v6/item/buttons/react.md | 8 +- static/usage/v6/item/buttons/vue.md | 24 ++-- static/usage/v6/item/counter/index.md | 6 +- static/usage/v6/item/counter/react.md | 5 +- static/usage/v6/item/counter/vue.md | 4 +- static/usage/v6/item/detail-arrows/index.md | 8 +- static/usage/v6/item/detail-arrows/vue.md | 1 + static/usage/v6/item/helper-error/index.md | 8 +- .../usage/v6/item/helper-error/javascript.md | 10 +- static/usage/v6/item/helper-error/react.md | 5 +- static/usage/v6/item/helper-error/vue.md | 8 +- static/usage/v6/item/icons/angular.md | 16 +-- static/usage/v6/item/icons/javascript.md | 16 +-- static/usage/v6/item/icons/react.md | 16 +-- static/usage/v6/item/icons/vue.md | 20 +--- static/usage/v6/item/inputs/react.md | 11 +- static/usage/v6/item/inputs/vue.md | 11 +- static/usage/v6/item/lines/angular.md | 4 +- static/usage/v6/item/lines/javascript.md | 4 +- static/usage/v6/item/lines/react.md | 4 +- static/usage/v6/item/lines/vue.md | 6 +- static/usage/v6/item/media/angular.md | 8 +- static/usage/v6/item/media/javascript.md | 8 +- static/usage/v6/item/media/react.md | 8 +- static/usage/v6/item/media/vue.md | 8 +- static/usage/v6/item/theming/colors/index.md | 8 +- .../v6/item/theming/css-properties/index.md | 6 +- .../v6/item/theming/css-shadow-parts/index.md | 6 +- .../v6/item/theming/input-highlight/index.md | 8 +- static/usage/v6/label/item/angular.md | 10 +- static/usage/v6/label/item/javascript.md | 10 +- static/usage/v6/label/item/react.md | 6 +- static/usage/v6/label/item/vue.md | 8 +- static/usage/v6/list-header/basic/index.md | 8 +- static/usage/v6/list-header/buttons/index.md | 8 +- static/usage/v6/list-header/lines/index.md | 8 +- .../v6/list-header/theming/colors/index.md | 8 +- .../theming/css-properties/index.md | 8 +- static/usage/v6/loading/controller/index.md | 6 +- .../usage/v6/loading/controller/javascript.md | 16 +-- static/usage/v6/loading/controller/react.md | 15 +-- static/usage/v6/loading/controller/vue.md | 12 +- static/usage/v6/loading/spinners/index.md | 6 +- .../usage/v6/loading/spinners/javascript.md | 18 +-- static/usage/v6/loading/spinners/react.md | 17 +-- static/usage/v6/loading/spinners/vue.md | 12 +- .../v6/loading/theming/angular/global_css.md | 2 +- static/usage/v6/loading/theming/index.md | 6 +- static/usage/v6/loading/theming/javascript.md | 28 ++--- static/usage/v6/loading/theming/react.md | 17 +-- .../v6/loading/theming/react/main_css.md | 2 +- .../v6/loading/theming/react/main_tsx.md | 17 +-- static/usage/v6/loading/theming/vue.md | 12 +- static/usage/v6/menu/basic/angular.md | 4 +- static/usage/v6/menu/basic/index.md | 8 +- static/usage/v6/menu/basic/javascript.md | 4 +- static/usage/v6/menu/basic/react.md | 15 +-- static/usage/v6/menu/basic/vue.md | 17 +-- .../theming/angular/example_component_css.md | 2 +- .../theming/angular/example_component_html.md | 4 +- static/usage/v6/menu/theming/index.md | 8 +- static/usage/v6/menu/theming/javascript.md | 4 +- .../usage/v6/menu/theming/react/main_css.md | 2 +- .../usage/v6/menu/theming/react/main_tsx.md | 15 +-- static/usage/v6/menu/theming/vue.md | 17 +-- static/usage/v6/menu/toggle/index.md | 8 +- static/usage/v6/menu/toggle/react.md | 13 +-- static/usage/v6/menu/toggle/vue.md | 13 +-- .../type/angular/example_component_html.md | 5 +- static/usage/v6/menu/type/index.md | 8 +- static/usage/v6/menu/type/javascript.md | 3 +- static/usage/v6/menu/type/react.md | 6 +- static/usage/v6/menu/type/vue.md | 13 ++- .../v6/modal/can-dismiss/boolean/index.md | 8 +- .../v6/modal/can-dismiss/function/index.md | 8 +- .../prevent-swipe-to-close/index.md | 10 +- static/usage/v6/modal/card/basic/index.md | 10 +- static/usage/v6/modal/controller/index.md | 10 +- static/usage/v6/modal/custom-dialogs/index.md | 10 +- .../v6/modal/custom-dialogs/react/main_tsx.md | 2 +- static/usage/v6/modal/custom-dialogs/vue.md | 18 +-- static/usage/v6/modal/inline/basic/index.md | 10 +- static/usage/v6/modal/inline/is-open/index.md | 10 +- .../v6/modal/performance/mount/angular.md | 4 +- .../usage/v6/modal/performance/mount/index.md | 10 +- .../usage/v6/modal/performance/mount/react.md | 15 +-- .../usage/v6/modal/performance/mount/vue.md | 14 +-- .../modal/sheet/background-content/index.md | 10 +- static/usage/v6/modal/sheet/basic/index.md | 10 +- .../v6/modal/sheet/handle-behavior/index.md | 10 +- .../v6/modal/styling/animations/index.md | 10 +- .../usage/v6/modal/styling/theming/index.md | 10 +- static/usage/v6/nav/modal-navigation/index.md | 10 +- static/usage/v6/nav/nav-link/index.md | 8 +- .../v6/note/theming/css-properties/index.md | 6 +- .../usage/v6/picker/multiple-column/index.md | 8 +- static/usage/v6/picker/single-column/index.md | 8 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../customization/positioning/index.md | 8 +- .../positioning/react/main_css.md | 2 +- .../v6/popover/customization/sizing/index.md | 8 +- .../styling/angular/global_css.md | 2 +- .../v6/popover/customization/styling/index.md | 8 +- .../customization/styling/react/main_css.md | 2 +- static/usage/v6/popover/nested/index.md | 8 +- .../v6/popover/performance/mount/index.md | 8 +- .../popover/performance/mount/javascript.md | 2 +- .../angular/example_component_html.md | 2 +- .../angular/popover_component_html.md | 2 +- .../v6/popover/presenting/controller/index.md | 8 +- .../presenting/controller/javascript.md | 2 +- .../presenting/controller/vue/popover_vue.md | 14 +-- .../angular/example_component_html.md | 2 +- .../popover/presenting/inline-isopen/index.md | 8 +- .../presenting/inline-isopen/javascript.md | 4 +- .../presenting/inline-trigger/index.md | 8 +- .../buffer/angular/example_component_ts.md | 2 +- static/usage/v6/progress-bar/buffer/index.md | 6 +- static/usage/v6/progress-bar/buffer/react.md | 4 +- static/usage/v6/progress-bar/buffer/vue.md | 4 +- .../angular/example_component_ts.md | 2 +- .../v6/progress-bar/determinate/index.md | 6 +- .../v6/progress-bar/determinate/react.md | 4 +- .../usage/v6/progress-bar/determinate/vue.md | 4 +- .../v6/progress-bar/indeterminate/index.md | 6 +- .../v6/progress-bar/indeterminate/react.md | 4 +- .../v6/progress-bar/theming/colors/index.md | 6 +- .../angular/example_component_html.md | 3 +- .../theming/css-properties/index.md | 6 +- .../theming/css-properties/react/main_tsx.md | 3 +- .../theming/css-properties/vue.md | 2 +- .../angular/example_component_html.md | 3 +- .../theming/css-shadow-parts/index.md | 6 +- .../css-shadow-parts/react/main_tsx.md | 3 +- .../theming/css-shadow-parts/vue.md | 2 +- .../usage/v6/radio/empty-selection/index.md | 8 +- static/usage/v6/radio/theming/colors/index.md | 8 +- .../v6/radio/theming/css-properties/index.md | 8 +- .../radio/theming/css-shadow-parts/index.md | 8 +- .../usage/v6/range/ion-change-event/index.md | 6 +- .../v6/range/ion-knob-move-event/index.md | 6 +- static/usage/v6/range/pins/index.md | 6 +- .../v6/range/theming/css-properties/index.md | 6 +- .../range/theming/css-shadow-parts/index.md | 6 +- .../advanced/angular/example_component_ts.md | 20 +++- static/usage/v6/refresher/advanced/index.md | 10 +- .../usage/v6/refresher/advanced/javascript.md | 16 ++- .../v6/refresher/advanced/react/main_tsx.md | 40 +++++-- static/usage/v6/refresher/advanced/vue.md | 44 ++++++- .../basic/angular/example_component_ts.md | 2 +- static/usage/v6/refresher/basic/index.md | 10 +- static/usage/v6/refresher/basic/react.md | 11 +- .../angular/example_component_html.md | 3 +- .../angular/example_component_ts.md | 2 +- .../v6/refresher/custom-content/index.md | 10 +- .../v6/refresher/custom-content/javascript.md | 3 +- .../v6/refresher/custom-content/react.md | 15 ++- .../usage/v6/refresher/custom-content/vue.md | 3 +- .../angular/example_component_ts.md | 2 +- .../refresher/custom-scroll-target/index.md | 10 +- .../custom-scroll-target/react/main_tsx.md | 11 +- .../angular/example_component_ts.md | 2 +- .../v6/refresher/pull-properties/index.md | 10 +- .../v6/refresher/pull-properties/react.md | 11 +- .../basic/angular/example_component_html.md | 20 +--- .../basic/angular/example_component_ts.md | 2 +- static/usage/v6/reorder/basic/index.md | 8 +- static/usage/v6/reorder/basic/javascript.md | 22 +--- static/usage/v6/reorder/basic/react.md | 20 +--- static/usage/v6/reorder/basic/vue.md | 26 ++--- .../angular/example_component_html.md | 20 +--- .../angular/example_component_ts.md | 2 +- static/usage/v6/reorder/custom-icon/index.md | 8 +- .../v6/reorder/custom-icon/javascript.md | 22 +--- static/usage/v6/reorder/custom-icon/react.md | 20 +--- static/usage/v6/reorder/custom-icon/vue.md | 26 ++--- .../angular/example_component_html.md | 20 +--- .../v6/reorder/custom-scroll-target/index.md | 10 +- .../custom-scroll-target/javascript.md | 22 +--- .../custom-scroll-target/react/main_tsx.md | 30 +++-- .../v6/reorder/custom-scroll-target/vue.md | 28 ++--- .../angular/example_component_html.md | 24 +--- .../angular/example_component_ts.md | 2 +- .../v6/reorder/toggling-disabled/index.md | 8 +- .../reorder/toggling-disabled/javascript.md | 26 ++--- .../v6/reorder/toggling-disabled/react.md | 36 +++--- .../usage/v6/reorder/toggling-disabled/vue.md | 32 ++--- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 2 +- .../usage/v6/reorder/updating-data/index.md | 8 +- .../v6/reorder/updating-data/javascript.md | 2 +- .../usage/v6/reorder/updating-data/react.md | 8 +- static/usage/v6/reorder/updating-data/vue.md | 10 +- .../wrapper/angular/example_component_html.md | 20 +--- .../wrapper/angular/example_component_ts.md | 2 +- static/usage/v6/reorder/wrapper/index.md | 8 +- static/usage/v6/reorder/wrapper/javascript.md | 22 +--- static/usage/v6/reorder/wrapper/react.md | 20 +--- static/usage/v6/reorder/wrapper/vue.md | 26 ++--- static/usage/v6/ripple-effect/basic/index.md | 8 +- .../v6/ripple-effect/customizing/index.md | 8 +- static/usage/v6/ripple-effect/type/index.md | 8 +- static/usage/v6/router/basic/index.md | 10 +- static/usage/v6/searchbar/basic/index.md | 8 +- .../v6/searchbar/cancel-button/angular.md | 7 +- .../usage/v6/searchbar/cancel-button/index.md | 8 +- .../v6/searchbar/cancel-button/javascript.md | 7 +- .../usage/v6/searchbar/cancel-button/react.md | 7 +- .../usage/v6/searchbar/cancel-button/vue.md | 9 +- .../usage/v6/searchbar/clear-button/index.md | 8 +- static/usage/v6/searchbar/clear-button/vue.md | 2 +- .../debounce/angular/example_component_ts.md | 15 ++- static/usage/v6/searchbar/debounce/index.md | 8 +- .../usage/v6/searchbar/debounce/javascript.md | 15 ++- static/usage/v6/searchbar/debounce/react.md | 23 +++- static/usage/v6/searchbar/debounce/vue.md | 15 ++- static/usage/v6/searchbar/search-icon/vue.md | 2 +- .../v6/searchbar/theming/colors/index.md | 8 +- .../searchbar/theming/css-properties/index.md | 6 +- .../theming/css-properties/javascript.md | 30 ++--- .../theming/css-properties/react/main_tsx.md | 4 +- .../usage/v6/segment-button/layout/index.md | 8 +- static/usage/v6/segment-button/layout/vue.md | 2 +- .../theming/css-properties/index.md | 6 +- .../theming/css-shadow-parts/index.md | 6 +- static/usage/v6/segment/scrollable/index.md | 8 +- static/usage/v6/segment/scrollable/vue.md | 15 ++- .../usage/v6/segment/theming/colors/index.md | 8 +- .../segment/theming/css-properties/index.md | 6 +- .../select/basic/multiple-selection/index.md | 8 +- .../angular/example_component_html.md | 2 +- .../basic/responding-to-interaction/index.md | 8 +- .../responding-to-interaction/javascript.md | 2 +- .../basic/responding-to-interaction/vue.md | 8 +- .../v6/select/basic/single-selection/index.md | 8 +- .../select/customization/button-text/index.md | 8 +- .../angular/example_component_html.md | 6 +- .../customization/interface-options/index.md | 8 +- .../interface-options/javascript.md | 12 +- .../customization/interface-options/react.md | 12 +- .../customization/interface-options/vue.md | 18 +-- .../angular/example_component_css.md | 2 +- .../customization/styling-select/index.md | 8 +- .../styling-select/javascript.md | 42 +++---- .../styling-select/react/main_css.md | 2 +- .../select/interfaces/action-sheet/index.md | 8 +- .../v6/select/interfaces/popover/index.md | 8 +- .../angular/example_component_html.md | 2 +- .../multiple-selection/index.md | 8 +- .../multiple-selection/javascript.md | 18 +-- .../multiple-selection/vue.md | 28 ++--- .../angular/example_component_html.md | 8 +- .../using-comparewith/index.md | 8 +- .../using-comparewith/javascript.md | 14 +-- .../using-comparewith/vue.md | 24 ++-- .../typeahead/angular/angular_types_ts.md | 2 +- .../angular/example_component_html.md | 2 +- .../typeahead/angular/example_component_ts.md | 16 +-- .../angular/modal-example_component_html.md | 2 +- .../angular/modal-example_component_ts.md | 31 +++-- static/usage/v6/select/typeahead/index.md | 18 +-- .../usage/v6/select/typeahead/javascript.md | 26 ++--- .../v6/select/typeahead/react/main_tsx.md | 20 ++-- .../select/typeahead/react/react_types_ts.md | 2 +- .../react/typeahead_component_tsx.md | 58 +++++---- .../v6/select/typeahead/vue/example_vue.md | 22 ++-- .../typeahead/vue/typeahead_component_vue.md | 102 +++++++++------- .../v6/select/typeahead/vue/vue_types_ts.md | 2 +- .../basic/angular/example_component_ts.md | 5 +- static/usage/v6/skeleton-text/basic/index.md | 8 +- .../v6/skeleton-text/basic/javascript.md | 1 - static/usage/v6/skeleton-text/basic/react.md | 22 ++-- static/usage/v6/skeleton-text/basic/vue.md | 14 +-- .../angular/example_component_css.md | 2 +- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 19 +-- .../theming/css-properties/vue.md | 13 +-- static/usage/v6/spinner/basic/index.md | 8 +- .../usage/v6/spinner/theming/colors/index.md | 8 +- .../spinner/theming/css-properties/index.md | 6 +- .../spinner/theming/css-properties/react.md | 4 +- static/usage/v6/split-pane/basic/angular.md | 8 +- static/usage/v6/split-pane/basic/index.md | 8 +- .../usage/v6/split-pane/basic/javascript.md | 8 +- static/usage/v6/split-pane/basic/react.md | 10 +- static/usage/v6/split-pane/basic/vue.md | 12 +- .../angular/example_component_html.md | 8 +- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 10 +- .../theming/css-properties/react/main_tsx.md | 10 +- .../split-pane/theming/css-properties/vue.md | 14 +-- static/usage/v6/tabs/router/index.md | 8 +- static/usage/v6/text/basic/angular.md | 8 +- static/usage/v6/text/basic/javascript.md | 8 +- static/usage/v6/text/basic/react.md | 13 ++- static/usage/v6/text/basic/vue.md | 8 +- static/usage/v6/textarea/autogrow/angular.md | 7 +- static/usage/v6/textarea/autogrow/index.md | 8 +- .../usage/v6/textarea/autogrow/javascript.md | 7 +- static/usage/v6/textarea/autogrow/vue.md | 7 +- static/usage/v6/textarea/basic/index.md | 8 +- .../usage/v6/textarea/clear-on-edit/index.md | 8 +- static/usage/v6/textarea/theming/index.md | 8 +- .../angular/example_component_css.md | 1 - .../angular/example_component_html.md | 1 - .../thumbnail/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_tsx.md | 1 - static/usage/v6/title/basic/index.md | 10 +- .../collapsible-large-title/basic/index.md | 14 +-- .../collapsible-large-title/buttons/index.md | 12 +- .../v6/title/theming/css-properties/index.md | 10 +- .../buttons/angular/example_component_html.md | 2 +- .../buttons/angular/example_component_ts.md | 14 ++- static/usage/v6/toast/buttons/index.md | 8 +- static/usage/v6/toast/buttons/javascript.md | 12 +- static/usage/v6/toast/buttons/react.md | 14 ++- static/usage/v6/toast/buttons/vue.md | 12 +- .../icon/angular/example_component_html.md | 2 +- .../icon/angular/example_component_ts.md | 4 +- static/usage/v6/toast/icon/index.md | 8 +- static/usage/v6/toast/icon/javascript.md | 4 +- static/usage/v6/toast/icon/react.md | 4 +- static/usage/v6/toast/icon/vue.md | 2 +- .../layout/angular/example_component_html.md | 2 +- .../layout/angular/example_component_ts.md | 25 ++-- static/usage/v6/toast/layout/index.md | 8 +- static/usage/v6/toast/layout/javascript.md | 20 ++-- static/usage/v6/toast/layout/react.md | 18 ++- static/usage/v6/toast/layout/vue.md | 32 +++-- .../angular/example_component_html.md | 2 +- .../angular/example_component_ts.md | 4 +- .../v6/toast/presenting/controller/index.md | 8 +- .../toast/presenting/controller/javascript.md | 2 +- .../v6/toast/presenting/controller/react.md | 14 ++- .../v6/toast/presenting/controller/vue.md | 2 +- .../theming/angular/example_component_ts.md | 4 +- .../v6/toast/theming/angular/global_css.md | 6 +- static/usage/v6/toast/theming/index.md | 8 +- static/usage/v6/toast/theming/javascript.md | 8 +- .../usage/v6/toast/theming/react/main_css.md | 6 +- .../usage/v6/toast/theming/react/main_tsx.md | 4 +- static/usage/v6/toast/theming/vue.md | 8 +- static/usage/v6/toggle/on-off/react.md | 4 +- .../angular/example_component_html.md | 3 +- .../v6/toggle/theming/css-properties/index.md | 6 +- .../angular/example_component_html.md | 3 +- .../toggle/theming/css-shadow-parts/index.md | 6 +- static/usage/v6/toolbar/basic/index.md | 10 +- static/usage/v6/toolbar/buttons/angular.md | 16 +-- static/usage/v6/toolbar/buttons/index.md | 8 +- static/usage/v6/toolbar/buttons/javascript.md | 16 +-- static/usage/v6/toolbar/buttons/react.md | 16 +-- static/usage/v6/toolbar/buttons/vue.md | 16 +-- .../usage/v6/toolbar/progress-bars/index.md | 10 +- static/usage/v6/toolbar/searchbars/index.md | 10 +- static/usage/v6/toolbar/segments/index.md | 10 +- .../usage/v6/toolbar/theming/colors/index.md | 8 +- .../toolbar/theming/css-properties/index.md | 8 +- .../accessibility/animations/index.md | 6 +- .../accessibility/animations/javascript.md | 46 ++++---- static/usage/v7/accordion/basic/angular.md | 12 +- static/usage/v7/accordion/basic/index.md | 8 +- static/usage/v7/accordion/basic/javascript.md | 12 +- static/usage/v7/accordion/basic/react.md | 7 +- static/usage/v7/accordion/basic/vue.md | 25 ++-- .../angular/example_component_css.md | 10 +- .../angular/example_component_html.md | 12 +- .../advanced-expansion-styles/index.md | 8 +- .../advanced-expansion-styles/javascript.md | 20 ++-- .../react/main_css.md | 10 +- .../advanced-expansion-styles/vue.md | 39 +++---- .../customization/expansion-styles/angular.md | 12 +- .../customization/expansion-styles/index.md | 8 +- .../expansion-styles/javascript.md | 12 +- .../customization/expansion-styles/react.md | 7 +- .../customization/expansion-styles/vue.md | 25 ++-- .../v7/accordion/customization/icons/index.md | 8 +- .../customization/icons/javascript.md | 12 +- .../v7/accordion/customization/icons/react.md | 7 +- .../v7/accordion/customization/icons/vue.md | 29 ++--- .../theming/angular/example_component_html.md | 12 +- .../theming/angular/global_css.md | 10 +- .../accordion/customization/theming/index.md | 8 +- .../customization/theming/javascript.md | 24 ++-- .../customization/theming/react/main_css.md | 10 +- .../customization/theming/react/main_tsx.md | 7 +- .../v7/accordion/customization/theming/vue.md | 41 +++---- .../usage/v7/accordion/disable-group/index.md | 6 +- .../usage/v7/accordion/disable/group/index.md | 6 +- .../v7/accordion/disable/individual/index.md | 8 +- .../v7/accordion/listen-changes/index.md | 8 +- static/usage/v7/accordion/multiple/index.md | 8 +- .../v7/accordion/readonly/group/angular.md | 12 +- .../v7/accordion/readonly/group/index.md | 8 +- .../v7/accordion/readonly/group/javascript.md | 12 +- .../v7/accordion/readonly/group/react.md | 7 +- .../usage/v7/accordion/readonly/group/vue.md | 25 ++-- .../accordion/readonly/individual/angular.md | 12 +- .../v7/accordion/readonly/individual/index.md | 6 +- .../readonly/individual/javascript.md | 12 +- .../v7/accordion/readonly/individual/react.md | 7 +- .../v7/accordion/readonly/individual/vue.md | 25 ++-- static/usage/v7/accordion/toggle/index.md | 8 +- .../usage/v7/action-sheet/controller/index.md | 8 +- .../isOpen/angular/example_component_ts.md | 16 +-- .../v7/action-sheet/inline/isOpen/index.md | 8 +- .../action-sheet/inline/isOpen/javascript.md | 14 +-- .../v7/action-sheet/inline/isOpen/react.md | 14 +-- .../v7/action-sheet/inline/isOpen/vue.md | 2 +- .../trigger/angular/example_component_html.md | 6 +- .../trigger/angular/example_component_ts.md | 14 +-- .../v7/action-sheet/inline/trigger/index.md | 8 +- .../action-sheet/inline/trigger/javascript.md | 19 ++- .../v7/action-sheet/inline/trigger/react.md | 14 +-- .../v7/action-sheet/inline/trigger/vue.md | 6 +- .../angular/example_component_ts.md | 14 +-- .../role-info-on-dismiss/index.md | 8 +- .../role-info-on-dismiss/javascript.md | 14 +-- .../role-info-on-dismiss/react/main_tsx.md | 14 +-- .../action-sheet/role-info-on-dismiss/vue.md | 2 +- .../angular/example_component_ts.md | 14 +-- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 14 +-- .../theming/css-properties/react/main_tsx.md | 14 +-- .../styling/angular/example_component_ts.md | 14 +-- .../v7/action-sheet/theming/styling/index.md | 8 +- .../theming/styling/javascript.md | 14 +-- .../theming/styling/react/main_tsx.md | 14 +-- .../buttons/angular/example_component_html.md | 2 +- .../buttons/angular/example_component_ts.md | 10 +- static/usage/v7/alert/buttons/index.md | 8 +- static/usage/v7/alert/buttons/javascript.md | 10 +- static/usage/v7/alert/buttons/vue.md | 4 +- .../angular/example_component_html.md | 7 +- .../alert/customization/angular/global_css.md | 4 +- static/usage/v7/alert/customization/index.md | 8 +- .../v7/alert/customization/javascript.md | 8 +- .../v7/alert/customization/react/main_css.md | 4 +- static/usage/v7/alert/customization/vue.md | 7 +- .../radios/angular/example_component_html.md | 2 +- static/usage/v7/alert/inputs/radios/index.md | 8 +- .../v7/alert/inputs/radios/javascript.md | 8 +- .../angular/example_component_html.md | 2 +- .../v7/alert/inputs/text-inputs/index.md | 8 +- .../v7/alert/inputs/text-inputs/javascript.md | 12 +- .../angular/example_component_html.md | 2 +- .../v7/alert/presenting/controller/index.md | 8 +- .../isOpen/angular/example_component_html.md | 2 +- .../usage/v7/alert/presenting/isOpen/index.md | 8 +- .../v7/alert/presenting/isOpen/javascript.md | 6 +- .../trigger/angular/example_component_html.md | 2 +- .../v7/alert/presenting/trigger/index.md | 8 +- static/usage/v7/avatar/chip/vue.md | 2 +- static/usage/v7/avatar/item/vue.md | 2 +- .../v7/avatar/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_tsx.md | 1 - .../v7/avatar/theming/css-properties/vue.md | 2 +- .../basic/angular/page_two_component_ts.md | 4 +- static/usage/v7/back-button/basic/index.md | 10 +- .../v7/back-button/basic/vue/page_two_vue.md | 2 +- .../custom/angular/page_two_component_ts.md | 4 +- static/usage/v7/back-button/custom/index.md | 10 +- .../v7/back-button/custom/vue/page_two_vue.md | 4 +- static/usage/v7/backdrop/basic/index.md | 8 +- static/usage/v7/backdrop/styling/index.md | 8 +- static/usage/v7/badge/theming/colors/index.md | 8 +- .../angular/example_component_css.md | 2 +- .../v7/badge/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../collapsing-items/expand-on-click/index.md | 6 +- .../collapsing-items/expand-on-click/vue.md | 8 +- .../items-before-after/index.md | 8 +- .../collapsing-items/max-items/index.md | 6 +- .../angular/example_component_html.md | 2 +- .../popover-on-click/index.md | 8 +- .../popover-on-click/javascript.md | 6 +- .../popover-on-click/react.md | 5 +- .../collapsing-items/popover-on-click/vue.md | 40 +++---- .../icons/custom-separators/index.md | 6 +- .../icons/custom-separators/vue.md | 2 +- .../breadcrumbs/icons/icons-on-items/index.md | 8 +- .../v7/breadcrumbs/theming/colors/index.md | 6 +- .../angular/example_component_css.md | 2 +- .../theming/css-properties/index.md | 6 +- .../theming/css-properties/react/main_css.md | 2 +- static/usage/v7/button/basic/angular.md | 3 +- static/usage/v7/button/basic/javascript.md | 3 +- static/usage/v7/button/expand/angular.md | 3 +- static/usage/v7/button/expand/javascript.md | 3 +- static/usage/v7/button/icons/vue.md | 4 +- static/usage/v7/button/shape/angular.md | 3 +- static/usage/v7/button/shape/javascript.md | 3 +- .../v7/button/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_css.md | 1 - .../theming/css-properties/react/main_tsx.md | 4 +- static/usage/v7/buttons/types/angular.md | 8 +- static/usage/v7/buttons/types/index.md | 8 +- static/usage/v7/buttons/types/javascript.md | 8 +- static/usage/v7/buttons/types/react.md | 9 +- static/usage/v7/buttons/types/vue.md | 10 +- static/usage/v7/card/basic/index.md | 6 +- static/usage/v7/card/basic/react.md | 4 +- static/usage/v7/card/buttons/index.md | 8 +- static/usage/v7/card/buttons/react.md | 4 +- static/usage/v7/card/list/index.md | 8 +- static/usage/v7/card/list/react/main_tsx.md | 12 +- static/usage/v7/card/media/index.md | 8 +- static/usage/v7/card/media/react.md | 4 +- .../usage/v7/card/theming/colors/angular.md | 36 ++---- static/usage/v7/card/theming/colors/index.md | 8 +- .../v7/card/theming/colors/javascript.md | 36 ++---- static/usage/v7/card/theming/colors/react.md | 36 ++---- static/usage/v7/card/theming/colors/vue.md | 36 ++---- .../v7/card/theming/css-properties/index.md | 6 +- .../theming/css-properties/react/main_tsx.md | 4 +- static/usage/v7/checkbox/basic/index.md | 6 +- static/usage/v7/checkbox/basic/react.md | 6 +- static/usage/v7/checkbox/basic/vue.md | 2 +- .../usage/v7/checkbox/indeterminate/index.md | 6 +- .../usage/v7/checkbox/indeterminate/react.md | 6 +- static/usage/v7/checkbox/indeterminate/vue.md | 2 +- static/usage/v7/checkbox/justify/angular.md | 4 +- .../usage/v7/checkbox/justify/javascript.md | 4 +- static/usage/v7/checkbox/justify/react.md | 4 +- static/usage/v7/checkbox/justify/vue.md | 4 +- .../v7/checkbox/label-placement/react.md | 8 +- .../usage/v7/checkbox/label-placement/vue.md | 8 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../checkbox/theming/css-properties/index.md | 6 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 6 +- .../v7/checkbox/theming/css-properties/vue.md | 4 +- .../v7/chip/theming/css-properties/index.md | 6 +- static/usage/v7/content/basic/index.md | 10 +- static/usage/v7/content/fixed/angular.md | 50 +++++++- .../fixed/angular/example_component_css.md | 2 +- .../fixed/angular/example_component_html.md | 50 +++++++- static/usage/v7/content/fixed/index.md | 10 +- static/usage/v7/content/fixed/javascript.md | 52 ++++++++- static/usage/v7/content/fixed/react.md | 50 +++++++- .../usage/v7/content/fixed/react/main_css.md | 2 +- .../usage/v7/content/fixed/react/main_tsx.md | 50 +++++++- static/usage/v7/content/fixed/vue.md | 52 ++++++++- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 58 +++++++-- static/usage/v7/content/fullscreen/index.md | 10 +- .../usage/v7/content/fullscreen/javascript.md | 60 ++++++++-- .../v7/content/fullscreen/react/main_css.md | 2 +- .../v7/content/fullscreen/react/main_tsx.md | 58 +++++++-- static/usage/v7/content/fullscreen/vue.md | 60 ++++++++-- .../usage/v7/content/header-footer/angular.md | 8 +- .../usage/v7/content/header-footer/index.md | 10 +- .../v7/content/header-footer/javascript.md | 8 +- .../usage/v7/content/header-footer/react.md | 8 +- static/usage/v7/content/header-footer/vue.md | 8 +- .../angular/example_component_html.md | 53 ++++++++- .../usage/v7/content/scroll-events/index.md | 10 +- .../v7/content/scroll-events/javascript.md | 50 +++++++- .../usage/v7/content/scroll-events/react.md | 53 ++++++++- static/usage/v7/content/scroll-events/vue.md | 57 +++++++-- .../angular/example_component_html.md | 50 +++++++- .../usage/v7/content/scroll-methods/index.md | 10 +- .../v7/content/scroll-methods/javascript.md | 50 +++++++- .../usage/v7/content/scroll-methods/react.md | 58 +++++++-- static/usage/v7/content/scroll-methods/vue.md | 52 ++++++++- .../usage/v7/content/theming/colors/index.md | 10 +- .../content/theming/css-properties/index.md | 10 +- .../content/theming/css-shadow-parts/index.md | 10 +- .../usage/v7/datetime-button/basic/index.md | 8 +- .../usage/v7/datetime-button/basic/react.md | 2 +- static/usage/v7/datetime-button/basic/vue.md | 2 +- static/usage/v7/datetime/basic/index.md | 8 +- .../customizing-button-texts/angular.md | 7 +- .../buttons/customizing-button-texts/index.md | 8 +- .../customizing-button-texts/javascript.md | 6 +- .../buttons/customizing-button-texts/react.md | 9 +- .../buttons/customizing-button-texts/vue.md | 8 +- .../buttons/customizing-buttons/index.md | 8 +- .../buttons/customizing-buttons/react.md | 18 ++- .../buttons/customizing-buttons/vue.md | 4 +- .../showing-confirmation-buttons/index.md | 8 +- .../showing-confirmation-buttons/react.md | 4 +- .../date-constraints/advanced/index.md | 8 +- .../date-constraints/advanced/javascript.md | 2 +- .../date-constraints/advanced/react.md | 8 +- .../datetime/date-constraints/advanced/vue.md | 10 +- .../date-constraints/max-min/angular.md | 6 +- .../date-constraints/max-min/index.md | 8 +- .../date-constraints/max-min/javascript.md | 6 +- .../date-constraints/max-min/react.md | 8 +- .../datetime/date-constraints/max-min/vue.md | 6 +- .../date-constraints/values/angular.md | 5 +- .../datetime/date-constraints/values/index.md | 8 +- .../date-constraints/values/javascript.md | 5 +- .../datetime/date-constraints/values/react.md | 7 +- .../datetime/date-constraints/values/vue.md | 5 +- .../array/angular/example_component_html.md | 6 +- .../array/angular/example_component_ts.md | 4 +- .../datetime/highlightedDates/array/index.md | 8 +- .../highlightedDates/array/javascript.md | 4 +- .../datetime/highlightedDates/array/react.md | 4 +- .../v7/datetime/highlightedDates/array/vue.md | 16 +-- .../callback/angular/example_component_ts.md | 4 +- .../highlightedDates/callback/index.md | 8 +- .../highlightedDates/callback/javascript.md | 4 +- .../highlightedDates/callback/react.md | 4 +- .../datetime/highlightedDates/callback/vue.md | 8 +- .../localization/custom-locale/index.md | 8 +- .../localization/custom-locale/react.md | 4 +- .../localization/first-day-of-week/index.md | 8 +- .../localization/first-day-of-week/react.md | 4 +- .../datetime/localization/hour-cycle/index.md | 8 +- .../datetime/localization/hour-cycle/react.md | 4 +- .../locale-extension-tags/index.md | 8 +- .../locale-extension-tags/react.md | 4 +- .../datetime/localization/time-label/index.md | 8 +- static/usage/v7/datetime/multiple/angular.md | 6 +- static/usage/v7/datetime/multiple/index.md | 8 +- static/usage/v7/datetime/multiple/react.md | 8 +- static/usage/v7/datetime/multiple/vue.md | 6 +- .../v7/datetime/presentation/date/index.md | 8 +- .../v7/datetime/presentation/date/react.md | 4 +- .../presentation/month-and-year/index.md | 8 +- .../presentation/month-and-year/react.md | 4 +- .../v7/datetime/presentation/time/index.md | 6 +- .../v7/datetime/presentation/time/react.md | 4 +- .../v7/datetime/presentation/wheel/index.md | 8 +- .../v7/datetime/presentation/wheel/react.md | 4 +- static/usage/v7/datetime/theming/index.md | 8 +- .../usage/v7/datetime/theming/javascript.md | 18 +-- .../v7/datetime/theming/react/main_css.md | 12 +- static/usage/v7/datetime/theming/vue.md | 18 +-- .../datetime/title/customizing-title/index.md | 8 +- .../title/showing-default-title/index.md | 8 +- .../title/showing-default-title/react.md | 4 +- static/usage/v7/fab/basic/vue.md | 4 +- static/usage/v7/fab/button-sizing/vue.md | 4 +- static/usage/v7/fab/list-side/vue.md | 4 +- static/usage/v7/fab/positioning/angular.md | 2 +- static/usage/v7/fab/positioning/index.md | 10 +- static/usage/v7/fab/positioning/javascript.md | 2 +- static/usage/v7/fab/positioning/react.md | 11 +- static/usage/v7/fab/positioning/vue.md | 15 ++- static/usage/v7/fab/theming/colors/vue.md | 4 +- .../angular/example_component_css.md | 4 +- .../theming/css-custom-properties/index.md | 6 +- .../css-custom-properties/javascript.md | 2 +- .../css-custom-properties/react/main_css.md | 4 +- .../fab/theming/css-custom-properties/vue.md | 6 +- .../angular/example_component_css.md | 6 +- .../v7/fab/theming/css-shadow-parts/index.md | 6 +- .../theming/css-shadow-parts/javascript.md | 4 +- .../css-shadow-parts/react/main_css.md | 6 +- .../v7/fab/theming/css-shadow-parts/vue.md | 8 +- static/usage/v7/footer/basic/index.md | 10 +- .../angular/example_component_html.md | 57 +++++++-- .../v7/footer/custom-scroll-target/index.md | 12 +- .../footer/custom-scroll-target/javascript.md | 57 +++++++-- .../custom-scroll-target/react/main_tsx.md | 59 ++++++++-- .../v7/footer/custom-scroll-target/vue.md | 57 +++++++-- static/usage/v7/footer/fade/angular.md | 57 +++++++-- static/usage/v7/footer/fade/index.md | 12 +- static/usage/v7/footer/fade/javascript.md | 57 +++++++-- static/usage/v7/footer/fade/react.md | 57 +++++++-- static/usage/v7/footer/fade/vue.md | 57 +++++++-- static/usage/v7/footer/no-border/index.md | 10 +- static/usage/v7/footer/translucent/angular.md | 57 +++++++-- static/usage/v7/footer/translucent/index.md | 12 +- .../usage/v7/footer/translucent/javascript.md | 57 +++++++-- static/usage/v7/footer/translucent/react.md | 57 +++++++-- static/usage/v7/footer/translucent/vue.md | 57 +++++++-- static/usage/v7/grid/basic/index.md | 8 +- .../grid/customizing/column-number/index.md | 8 +- .../column-number/react/main_tsx.md | 4 +- .../v7/grid/customizing/padding/index.md | 8 +- .../usage/v7/grid/customizing/width/index.md | 8 +- static/usage/v7/grid/fixed/index.md | 8 +- .../angular/example_component_html.md | 40 ++----- .../v7/grid/horizontal-alignment/index.md | 8 +- .../grid/horizontal-alignment/javascript.md | 40 ++----- .../horizontal-alignment/react/main_tsx.md | 40 ++----- .../usage/v7/grid/horizontal-alignment/vue.md | 40 ++----- .../usage/v7/grid/offset-responsive/index.md | 8 +- .../grid/offset-responsive/react/main_tsx.md | 8 +- static/usage/v7/grid/offset/index.md | 8 +- static/usage/v7/grid/offset/react/main_tsx.md | 16 ++- .../v7/grid/push-pull-responsive/index.md | 8 +- .../push-pull-responsive/react/main_tsx.md | 24 +++- .../angular/example_component_html.md | 5 +- static/usage/v7/grid/push-pull/index.md | 8 +- static/usage/v7/grid/push-pull/javascript.md | 5 +- .../usage/v7/grid/push-pull/react/main_tsx.md | 23 +++- static/usage/v7/grid/push-pull/vue.md | 15 ++- static/usage/v7/grid/size-auto/index.md | 8 +- .../usage/v7/grid/size-auto/react/main_tsx.md | 14 ++- static/usage/v7/grid/size-responsive/index.md | 8 +- .../v7/grid/size-responsive/react/main_tsx.md | 40 +++++-- static/usage/v7/grid/size/index.md | 8 +- static/usage/v7/grid/size/react/main_tsx.md | 12 +- .../angular/example_component_html.md | 36 ++---- .../usage/v7/grid/vertical-alignment/index.md | 8 +- .../v7/grid/vertical-alignment/javascript.md | 36 ++---- .../grid/vertical-alignment/react/main_tsx.md | 36 ++---- .../usage/v7/grid/vertical-alignment/vue.md | 36 ++---- static/usage/v7/header/basic/index.md | 10 +- static/usage/v7/header/condense/angular.md | 57 +++++++-- static/usage/v7/header/condense/index.md | 12 +- static/usage/v7/header/condense/javascript.md | 57 +++++++-- static/usage/v7/header/condense/react.md | 59 ++++++++-- static/usage/v7/header/condense/vue.md | 57 +++++++-- .../angular/example_component_html.md | 57 +++++++-- .../v7/header/custom-scroll-target/index.md | 12 +- .../custom-scroll-target/react/main_tsx.md | 59 ++++++++-- .../v7/header/custom-scroll-target/vue.md | 57 +++++++-- static/usage/v7/header/fade/angular.md | 57 +++++++-- static/usage/v7/header/fade/index.md | 12 +- static/usage/v7/header/fade/javascript.md | 57 +++++++-- static/usage/v7/header/fade/react.md | 57 +++++++-- static/usage/v7/header/fade/vue.md | 57 +++++++-- static/usage/v7/header/no-border/index.md | 10 +- static/usage/v7/header/translucent/angular.md | 57 +++++++-- static/usage/v7/header/translucent/index.md | 12 +- .../usage/v7/header/translucent/javascript.md | 57 +++++++-- static/usage/v7/header/translucent/react.md | 57 +++++++-- static/usage/v7/header/translucent/vue.md | 57 +++++++-- static/usage/v7/icon/basic/index.md | 8 +- static/usage/v7/img/basic/angular.md | 5 +- static/usage/v7/img/basic/javascript.md | 5 +- static/usage/v7/img/basic/react.md | 5 +- static/usage/v7/img/basic/vue.md | 5 +- .../usage/v7/infinite-scroll/basic/index.md | 6 +- .../custom-infinite-scroll-content/index.md | 6 +- .../infinite-scroll-content/index.md | 6 +- static/usage/v7/input/clear/angular.md | 22 +++- static/usage/v7/input/clear/javascript.md | 22 +++- static/usage/v7/input/clear/react.md | 22 +++- static/usage/v7/input/clear/vue.md | 26 ++++- .../counter/angular/example_component_html.md | 9 +- static/usage/v7/input/counter/index.md | 6 +- static/usage/v7/input/counter/javascript.md | 8 +- static/usage/v7/input/counter/react.md | 11 +- static/usage/v7/input/counter/vue.md | 15 ++- static/usage/v7/input/fill/index.md | 12 +- static/usage/v7/input/fill/react.md | 4 +- static/usage/v7/input/fill/vue.md | 4 +- .../angular/example_component_html.md | 2 +- .../filtering/angular/example_component_ts.md | 10 +- static/usage/v7/input/filtering/index.md | 6 +- static/usage/v7/input/filtering/javascript.md | 4 +- static/usage/v7/input/filtering/react.md | 23 ++-- static/usage/v7/input/filtering/vue.md | 16 +-- static/usage/v7/input/helper-error/angular.md | 2 +- static/usage/v7/input/helper-error/index.md | 8 +- .../usage/v7/input/helper-error/javascript.md | 10 +- static/usage/v7/input/helper-error/vue.md | 8 +- .../usage/v7/input/label-placement/angular.md | 6 +- .../v7/input/label-placement/javascript.md | 6 +- .../usage/v7/input/label-placement/react.md | 6 +- static/usage/v7/input/label-placement/vue.md | 6 +- static/usage/v7/input/migration/index.md | 18 +-- static/usage/v7/input/theming/colors/index.md | 8 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 6 +- .../v7/input/theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 8 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 4 +- .../v7/input/theming/css-properties/vue.md | 8 +- static/usage/v7/input/types/angular.md | 8 +- static/usage/v7/input/types/javascript.md | 8 +- static/usage/v7/input/types/react.md | 8 +- static/usage/v7/input/types/vue.md | 8 +- static/usage/v7/item-divider/basic/angular.md | 8 +- static/usage/v7/item-divider/basic/index.md | 8 +- .../usage/v7/item-divider/basic/javascript.md | 8 +- static/usage/v7/item-divider/basic/react.md | 8 +- static/usage/v7/item-divider/basic/vue.md | 8 +- .../v7/item-divider/theming/colors/index.md | 8 +- .../angular/example_component_html.md | 4 +- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 4 +- .../theming/css-properties/react/main_tsx.md | 5 +- .../theming/css-properties/vue.md | 6 +- static/usage/v7/item-group/basic/index.md | 8 +- .../v7/item-group/sliding-items/angular.md | 56 +++------ .../v7/item-group/sliding-items/index.md | 8 +- .../v7/item-group/sliding-items/javascript.md | 56 +++------ .../v7/item-group/sliding-items/react.md | 66 ++++------- .../usage/v7/item-group/sliding-items/vue.md | 66 ++++------- .../usage/v7/item-sliding/expandable/index.md | 8 +- .../usage/v7/item-sliding/expandable/react.md | 8 +- static/usage/v7/item-sliding/icons/angular.md | 16 +-- static/usage/v7/item-sliding/icons/index.md | 8 +- .../usage/v7/item-sliding/icons/javascript.md | 16 +-- static/usage/v7/item-sliding/icons/react.md | 16 +-- static/usage/v7/item-sliding/icons/vue.md | 20 +--- static/usage/v7/item/basic/angular.md | 10 +- static/usage/v7/item/basic/javascript.md | 10 +- static/usage/v7/item/basic/react.md | 6 +- static/usage/v7/item/basic/vue.md | 8 +- static/usage/v7/item/buttons/angular.md | 20 +--- static/usage/v7/item/buttons/javascript.md | 20 +--- static/usage/v7/item/buttons/react.md | 8 +- static/usage/v7/item/buttons/vue.md | 24 ++-- static/usage/v7/item/detail-arrows/index.md | 8 +- static/usage/v7/item/detail-arrows/vue.md | 1 + static/usage/v7/item/icons/angular.md | 16 +-- static/usage/v7/item/icons/javascript.md | 16 +-- static/usage/v7/item/icons/react.md | 16 +-- static/usage/v7/item/icons/vue.md | 20 +--- static/usage/v7/item/lines/angular.md | 4 +- static/usage/v7/item/lines/javascript.md | 4 +- static/usage/v7/item/lines/react.md | 4 +- static/usage/v7/item/lines/vue.md | 6 +- static/usage/v7/item/media/angular.md | 8 +- static/usage/v7/item/media/javascript.md | 8 +- static/usage/v7/item/media/react.md | 8 +- static/usage/v7/item/media/vue.md | 8 +- static/usage/v7/item/theming/colors/index.md | 8 +- .../v7/item/theming/css-properties/index.md | 6 +- .../v7/item/theming/css-shadow-parts/index.md | 6 +- .../v7/item/theming/input-highlight/index.md | 8 +- static/usage/v7/label/item/angular.md | 10 +- static/usage/v7/label/item/javascript.md | 10 +- static/usage/v7/label/item/react.md | 6 +- static/usage/v7/label/item/vue.md | 8 +- static/usage/v7/list-header/basic/index.md | 8 +- static/usage/v7/list-header/buttons/index.md | 8 +- static/usage/v7/list-header/lines/index.md | 8 +- .../v7/list-header/theming/colors/index.md | 8 +- .../theming/css-properties/index.md | 8 +- static/usage/v7/loading/controller/index.md | 6 +- .../usage/v7/loading/controller/javascript.md | 16 +-- static/usage/v7/loading/controller/react.md | 15 +-- static/usage/v7/loading/controller/vue.md | 12 +- static/usage/v7/loading/inline/index.md | 6 +- static/usage/v7/loading/spinners/index.md | 6 +- .../v7/loading/theming/angular/global_css.md | 2 +- static/usage/v7/loading/theming/index.md | 6 +- .../v7/loading/theming/react/main_css.md | 2 +- static/usage/v7/menu/basic/angular.md | 4 +- static/usage/v7/menu/basic/index.md | 8 +- static/usage/v7/menu/basic/javascript.md | 4 +- static/usage/v7/menu/basic/react.md | 15 +-- static/usage/v7/menu/basic/vue.md | 17 +-- .../theming/angular/example_component_css.md | 2 +- .../theming/angular/example_component_html.md | 4 +- static/usage/v7/menu/theming/index.md | 8 +- static/usage/v7/menu/theming/javascript.md | 4 +- .../usage/v7/menu/theming/react/main_css.md | 2 +- .../usage/v7/menu/theming/react/main_tsx.md | 15 +-- static/usage/v7/menu/theming/vue.md | 17 +-- static/usage/v7/menu/toggle/index.md | 8 +- static/usage/v7/menu/toggle/react.md | 13 +-- static/usage/v7/menu/toggle/vue.md | 13 +-- .../type/angular/example_component_html.md | 5 +- static/usage/v7/menu/type/index.md | 8 +- static/usage/v7/menu/type/javascript.md | 3 +- static/usage/v7/menu/type/react.md | 6 +- static/usage/v7/menu/type/vue.md | 13 ++- .../v7/modal/can-dismiss/boolean/index.md | 8 +- .../v7/modal/can-dismiss/function/index.md | 8 +- .../prevent-swipe-to-close/index.md | 10 +- static/usage/v7/modal/card/basic/index.md | 10 +- static/usage/v7/modal/controller/index.md | 10 +- static/usage/v7/modal/custom-dialogs/index.md | 10 +- .../v7/modal/custom-dialogs/react/main_tsx.md | 2 +- static/usage/v7/modal/custom-dialogs/vue.md | 18 +-- static/usage/v7/modal/inline/basic/index.md | 10 +- static/usage/v7/modal/inline/is-open/index.md | 10 +- .../v7/modal/performance/mount/angular.md | 4 +- .../usage/v7/modal/performance/mount/index.md | 10 +- .../usage/v7/modal/performance/mount/react.md | 15 +-- .../usage/v7/modal/performance/mount/vue.md | 14 +-- .../usage/v7/modal/sheet/auto-height/index.md | 10 +- .../v7/modal/sheet/auto-height/javascript.md | 2 +- .../modal/sheet/auto-height/react/main_css.md | 2 +- .../modal/sheet/auto-height/react/main_tsx.md | 19 +-- .../usage/v7/modal/sheet/auto-height/vue.md | 11 +- .../modal/sheet/background-content/index.md | 10 +- static/usage/v7/modal/sheet/basic/index.md | 10 +- .../v7/modal/sheet/handle-behavior/index.md | 10 +- .../v7/modal/styling/animations/index.md | 10 +- .../usage/v7/modal/styling/theming/index.md | 10 +- static/usage/v7/nav/modal-navigation/index.md | 10 +- static/usage/v7/nav/nav-link/index.md | 8 +- .../v7/note/theming/css-properties/index.md | 6 +- static/usage/v7/picker/controller/index.md | 8 +- .../isOpen/angular/example_component_ts.md | 47 ++++---- static/usage/v7/picker/inline/isOpen/index.md | 8 +- .../v7/picker/inline/isOpen/javascript.md | 47 ++++---- static/usage/v7/picker/inline/isOpen/react.md | 35 +++--- static/usage/v7/picker/inline/isOpen/vue.md | 51 ++++---- .../trigger/angular/example_component_html.md | 6 +- .../trigger/angular/example_component_ts.md | 47 ++++---- .../usage/v7/picker/inline/trigger/index.md | 8 +- .../v7/picker/inline/trigger/javascript.md | 47 ++++---- .../usage/v7/picker/inline/trigger/react.md | 35 +++--- static/usage/v7/picker/inline/trigger/vue.md | 55 ++++----- .../angular/example_component_html.md | 6 +- .../angular/example_component_ts.md | 102 ++++++++-------- .../usage/v7/picker/multiple-column/index.md | 8 +- .../v7/picker/multiple-column/javascript.md | 102 ++++++++-------- .../usage/v7/picker/multiple-column/react.md | 72 +++++++----- static/usage/v7/picker/multiple-column/vue.md | 110 +++++++++--------- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../customization/positioning/index.md | 8 +- .../positioning/react/main_css.md | 2 +- .../v7/popover/customization/sizing/index.md | 8 +- .../styling/angular/global_css.md | 2 +- .../v7/popover/customization/styling/index.md | 8 +- .../customization/styling/react/main_css.md | 2 +- static/usage/v7/popover/nested/index.md | 8 +- .../v7/popover/performance/mount/index.md | 8 +- .../popover/performance/mount/javascript.md | 2 +- .../angular/example_component_html.md | 2 +- .../angular/popover_component_html.md | 2 +- .../v7/popover/presenting/controller/index.md | 8 +- .../presenting/controller/javascript.md | 2 +- .../presenting/controller/vue/popover_vue.md | 14 +-- .../angular/example_component_html.md | 2 +- .../popover/presenting/inline-isopen/index.md | 8 +- .../presenting/inline-isopen/javascript.md | 4 +- .../presenting/inline-trigger/index.md | 8 +- .../buffer/angular/example_component_ts.md | 2 +- static/usage/v7/progress-bar/buffer/index.md | 6 +- static/usage/v7/progress-bar/buffer/react.md | 4 +- static/usage/v7/progress-bar/buffer/vue.md | 4 +- .../angular/example_component_ts.md | 2 +- .../v7/progress-bar/determinate/index.md | 6 +- .../v7/progress-bar/determinate/react.md | 4 +- .../usage/v7/progress-bar/determinate/vue.md | 4 +- .../v7/progress-bar/indeterminate/index.md | 6 +- .../v7/progress-bar/indeterminate/react.md | 4 +- .../v7/progress-bar/theming/colors/index.md | 6 +- .../angular/example_component_html.md | 3 +- .../theming/css-properties/index.md | 6 +- .../theming/css-properties/react/main_tsx.md | 3 +- .../theming/css-properties/vue.md | 2 +- .../angular/example_component_html.md | 3 +- .../theming/css-shadow-parts/index.md | 6 +- .../css-shadow-parts/react/main_tsx.md | 3 +- .../theming/css-shadow-parts/vue.md | 2 +- static/usage/v7/radio/basic/angular.md | 2 +- static/usage/v7/radio/basic/javascript.md | 2 +- static/usage/v7/radio/basic/react.md | 9 +- static/usage/v7/radio/basic/vue.md | 2 +- .../usage/v7/radio/empty-selection/index.md | 6 +- .../usage/v7/radio/empty-selection/react.md | 12 +- static/usage/v7/radio/justify/react.md | 16 ++- static/usage/v7/radio/justify/vue.md | 4 +- .../usage/v7/radio/label-placement/react.md | 20 ++-- static/usage/v7/radio/label-placement/vue.md | 8 +- static/usage/v7/radio/theming/colors/index.md | 8 +- .../v7/radio/theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 8 +- .../v7/radio/theming/css-properties/vue.md | 8 +- .../angular/example_component_css.md | 2 +- .../radio/theming/css-shadow-parts/index.md | 8 +- .../theming/css-shadow-parts/javascript.md | 2 +- .../css-shadow-parts/react/main_css.md | 2 +- .../usage/v7/range/ion-change-event/index.md | 6 +- .../usage/v7/range/ion-change-event/react.md | 5 +- .../angular/example_component_html.md | 6 +- .../v7/range/ion-knob-move-event/index.md | 6 +- .../usage/v7/range/ion-knob-move-event/vue.md | 6 +- static/usage/v7/range/labels/react.md | 10 +- static/usage/v7/range/labels/vue.md | 8 +- static/usage/v7/range/migration/index.md | 2 +- static/usage/v7/range/pins/index.md | 6 +- .../v7/range/theming/css-properties/index.md | 6 +- .../angular/example_component_html.md | 10 +- .../range/theming/css-shadow-parts/index.md | 6 +- .../css-shadow-parts/react/main_tsx.md | 4 +- .../v7/range/theming/css-shadow-parts/vue.md | 10 +- .../advanced/angular/example_component_ts.md | 20 +++- static/usage/v7/refresher/advanced/index.md | 10 +- .../usage/v7/refresher/advanced/javascript.md | 16 ++- .../v7/refresher/advanced/react/main_tsx.md | 40 +++++-- static/usage/v7/refresher/advanced/vue.md | 44 ++++++- .../basic/angular/example_component_ts.md | 2 +- static/usage/v7/refresher/basic/index.md | 10 +- static/usage/v7/refresher/basic/react.md | 11 +- .../angular/example_component_html.md | 3 +- .../angular/example_component_ts.md | 2 +- .../v7/refresher/custom-content/index.md | 10 +- .../v7/refresher/custom-content/javascript.md | 3 +- .../v7/refresher/custom-content/react.md | 15 ++- .../usage/v7/refresher/custom-content/vue.md | 3 +- .../angular/example_component_ts.md | 2 +- .../refresher/custom-scroll-target/index.md | 10 +- .../custom-scroll-target/react/main_tsx.md | 11 +- .../angular/example_component_ts.md | 2 +- .../v7/refresher/pull-properties/index.md | 10 +- .../v7/refresher/pull-properties/react.md | 11 +- .../basic/angular/example_component_html.md | 20 +--- .../basic/angular/example_component_ts.md | 2 +- static/usage/v7/reorder/basic/index.md | 8 +- static/usage/v7/reorder/basic/javascript.md | 22 +--- static/usage/v7/reorder/basic/react.md | 20 +--- static/usage/v7/reorder/basic/vue.md | 26 ++--- .../angular/example_component_html.md | 20 +--- .../angular/example_component_ts.md | 2 +- static/usage/v7/reorder/custom-icon/index.md | 8 +- .../v7/reorder/custom-icon/javascript.md | 22 +--- static/usage/v7/reorder/custom-icon/react.md | 20 +--- static/usage/v7/reorder/custom-icon/vue.md | 26 ++--- .../angular/example_component_html.md | 20 +--- .../v7/reorder/custom-scroll-target/index.md | 10 +- .../custom-scroll-target/javascript.md | 22 +--- .../custom-scroll-target/react/main_tsx.md | 30 +++-- .../v7/reorder/custom-scroll-target/vue.md | 28 ++--- .../angular/example_component_html.md | 24 +--- .../angular/example_component_ts.md | 2 +- .../v7/reorder/toggling-disabled/index.md | 8 +- .../reorder/toggling-disabled/javascript.md | 26 ++--- .../v7/reorder/toggling-disabled/react.md | 36 +++--- .../usage/v7/reorder/toggling-disabled/vue.md | 32 ++--- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 2 +- .../usage/v7/reorder/updating-data/index.md | 8 +- .../v7/reorder/updating-data/javascript.md | 2 +- .../usage/v7/reorder/updating-data/react.md | 8 +- static/usage/v7/reorder/updating-data/vue.md | 10 +- .../wrapper/angular/example_component_html.md | 20 +--- .../wrapper/angular/example_component_ts.md | 2 +- static/usage/v7/reorder/wrapper/index.md | 8 +- static/usage/v7/reorder/wrapper/javascript.md | 22 +--- static/usage/v7/reorder/wrapper/react.md | 20 +--- static/usage/v7/reorder/wrapper/vue.md | 26 ++--- static/usage/v7/ripple-effect/basic/index.md | 8 +- .../v7/ripple-effect/customizing/index.md | 8 +- static/usage/v7/ripple-effect/type/index.md | 8 +- static/usage/v7/router/basic/index.md | 10 +- static/usage/v7/searchbar/basic/index.md | 8 +- .../v7/searchbar/cancel-button/angular.md | 7 +- .../usage/v7/searchbar/cancel-button/index.md | 8 +- .../v7/searchbar/cancel-button/javascript.md | 7 +- .../usage/v7/searchbar/cancel-button/react.md | 7 +- .../usage/v7/searchbar/cancel-button/vue.md | 9 +- .../usage/v7/searchbar/clear-button/index.md | 8 +- static/usage/v7/searchbar/clear-button/vue.md | 2 +- .../debounce/angular/example_component_ts.md | 15 ++- static/usage/v7/searchbar/debounce/index.md | 8 +- .../usage/v7/searchbar/debounce/javascript.md | 15 ++- static/usage/v7/searchbar/debounce/react.md | 23 +++- static/usage/v7/searchbar/debounce/vue.md | 15 ++- static/usage/v7/searchbar/search-icon/vue.md | 2 +- .../v7/searchbar/theming/colors/index.md | 8 +- .../searchbar/theming/css-properties/index.md | 6 +- .../theming/css-properties/javascript.md | 30 ++--- .../theming/css-properties/react/main_tsx.md | 4 +- .../usage/v7/segment-button/layout/index.md | 8 +- static/usage/v7/segment-button/layout/vue.md | 2 +- .../theming/css-properties/index.md | 6 +- .../theming/css-shadow-parts/index.md | 6 +- static/usage/v7/segment/scrollable/index.md | 8 +- static/usage/v7/segment/scrollable/vue.md | 15 ++- .../usage/v7/segment/theming/colors/index.md | 8 +- .../segment/theming/css-properties/index.md | 6 +- .../select/basic/multiple-selection/index.md | 8 +- .../angular/example_component_html.md | 2 +- .../basic/responding-to-interaction/index.md | 8 +- .../responding-to-interaction/javascript.md | 2 +- .../basic/responding-to-interaction/vue.md | 8 +- .../v7/select/basic/single-selection/index.md | 8 +- .../customization/button-text/angular.md | 7 +- .../select/customization/button-text/index.md | 8 +- .../customization/button-text/javascript.md | 7 +- .../select/customization/button-text/react.md | 7 +- .../select/customization/button-text/vue.md | 7 +- .../angular/example_component_html.md | 13 ++- .../customization/interface-options/index.md | 8 +- .../interface-options/javascript.md | 12 +- .../customization/interface-options/react.md | 19 +-- .../customization/interface-options/vue.md | 32 +++-- .../angular/example_component_css.md | 2 +- .../customization/styling-select/index.md | 8 +- .../styling-select/javascript.md | 42 +++---- .../styling-select/react/main_css.md | 2 +- static/usage/v7/select/fill/index.md | 10 +- static/usage/v7/select/fill/react.md | 4 +- static/usage/v7/select/fill/vue.md | 4 +- .../select/interfaces/action-sheet/index.md | 8 +- .../v7/select/interfaces/popover/index.md | 8 +- .../usage/v7/select/label-placement/react.md | 6 +- static/usage/v7/select/label-placement/vue.md | 6 +- static/usage/v7/select/migration/index.md | 2 +- .../angular/example_component_html.md | 2 +- .../multiple-selection/index.md | 8 +- .../multiple-selection/javascript.md | 18 +-- .../multiple-selection/vue.md | 28 ++--- .../angular/example_component_html.md | 2 +- .../using-comparewith/index.md | 8 +- .../using-comparewith/javascript.md | 14 +-- .../using-comparewith/vue.md | 24 ++-- .../typeahead/angular/angular_types_ts.md | 2 +- .../angular/example_component_html.md | 2 +- .../typeahead/angular/example_component_ts.md | 16 +-- .../angular/modal-example_component_html.md | 8 +- .../angular/modal-example_component_ts.md | 31 +++-- static/usage/v7/select/typeahead/index.md | 18 +-- .../usage/v7/select/typeahead/javascript.md | 26 ++--- .../v7/select/typeahead/react/main_tsx.md | 20 ++-- .../select/typeahead/react/react_types_ts.md | 2 +- .../react/typeahead_component_tsx.md | 65 ++++++----- .../v7/select/typeahead/vue/example_vue.md | 22 ++-- .../typeahead/vue/typeahead_component_vue.md | 106 +++++++++-------- .../v7/select/typeahead/vue/vue_types_ts.md | 2 +- .../basic/angular/example_component_ts.md | 5 +- static/usage/v7/skeleton-text/basic/index.md | 8 +- .../v7/skeleton-text/basic/javascript.md | 1 - static/usage/v7/skeleton-text/basic/react.md | 22 ++-- static/usage/v7/skeleton-text/basic/vue.md | 14 +-- .../angular/example_component_css.md | 2 +- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 19 +-- .../theming/css-properties/vue.md | 13 +-- static/usage/v7/spinner/basic/index.md | 8 +- .../usage/v7/spinner/theming/colors/index.md | 8 +- .../spinner/theming/css-properties/index.md | 6 +- .../spinner/theming/css-properties/react.md | 4 +- static/usage/v7/split-pane/basic/angular.md | 8 +- static/usage/v7/split-pane/basic/index.md | 8 +- .../usage/v7/split-pane/basic/javascript.md | 8 +- static/usage/v7/split-pane/basic/react.md | 10 +- static/usage/v7/split-pane/basic/vue.md | 12 +- .../angular/example_component_html.md | 8 +- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 10 +- .../theming/css-properties/react/main_tsx.md | 10 +- .../split-pane/theming/css-properties/vue.md | 14 +-- static/usage/v7/tabs/router/index.md | 8 +- static/usage/v7/text/basic/angular.md | 8 +- static/usage/v7/text/basic/javascript.md | 8 +- static/usage/v7/text/basic/react.md | 13 ++- static/usage/v7/text/basic/vue.md | 8 +- static/usage/v7/textarea/autogrow/angular.md | 7 +- static/usage/v7/textarea/autogrow/index.md | 8 +- .../usage/v7/textarea/autogrow/javascript.md | 7 +- static/usage/v7/textarea/autogrow/vue.md | 7 +- static/usage/v7/textarea/basic/index.md | 8 +- .../usage/v7/textarea/clear-on-edit/index.md | 8 +- static/usage/v7/textarea/counter/index.md | 8 +- static/usage/v7/textarea/fill/index.md | 10 +- .../usage/v7/textarea/helper-error/index.md | 8 +- .../v7/textarea/label-placement/index.md | 8 +- static/usage/v7/textarea/migration/index.md | 18 +-- static/usage/v7/textarea/theming/index.md | 8 +- .../usage/v7/textarea/theming/javascript.md | 2 +- static/usage/v7/textarea/theming/vue.md | 2 +- .../angular/example_component_css.md | 1 - .../angular/example_component_html.md | 1 - .../thumbnail/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_tsx.md | 1 - static/usage/v7/title/basic/index.md | 10 +- .../collapsible-large-title/basic/index.md | 14 +-- .../collapsible-large-title/buttons/index.md | 12 +- .../v7/title/theming/css-properties/index.md | 10 +- .../buttons/angular/example_component_html.md | 6 +- .../buttons/angular/example_component_ts.md | 14 ++- static/usage/v7/toast/buttons/index.md | 8 +- static/usage/v7/toast/buttons/javascript.md | 14 ++- static/usage/v7/toast/buttons/react.md | 10 +- static/usage/v7/toast/buttons/vue.md | 30 ++--- static/usage/v7/toast/icon/angular.md | 2 +- static/usage/v7/toast/icon/index.md | 8 +- static/usage/v7/toast/icon/vue.md | 4 +- static/usage/v7/toast/inline/basic/index.md | 10 +- static/usage/v7/toast/inline/basic/react.md | 10 +- static/usage/v7/toast/inline/basic/vue.md | 9 +- static/usage/v7/toast/inline/is-open/index.md | 10 +- static/usage/v7/toast/inline/is-open/vue.md | 4 +- .../layout/angular/example_component_html.md | 10 +- .../layout/angular/example_component_ts.md | 4 +- static/usage/v7/toast/layout/index.md | 8 +- static/usage/v7/toast/layout/javascript.md | 15 ++- static/usage/v7/toast/layout/react.md | 4 +- static/usage/v7/toast/layout/vue.md | 8 +- .../angular/example_component_html.md | 2 +- .../angular/example_component_ts.md | 4 +- .../v7/toast/presenting/controller/index.md | 8 +- .../toast/presenting/controller/javascript.md | 2 +- .../v7/toast/presenting/controller/react.md | 14 ++- .../v7/toast/presenting/controller/vue.md | 2 +- .../theming/angular/example_component_html.md | 8 +- .../theming/angular/example_component_ts.md | 4 +- .../v7/toast/theming/angular/global_css.md | 6 +- static/usage/v7/toast/theming/index.md | 8 +- static/usage/v7/toast/theming/javascript.md | 8 +- .../usage/v7/toast/theming/react/main_css.md | 6 +- .../usage/v7/toast/theming/react/main_tsx.md | 10 +- static/usage/v7/toast/theming/vue.md | 20 ++-- static/usage/v7/toggle/basic/react.md | 16 ++- .../usage/v7/toggle/label-placement/react.md | 12 +- static/usage/v7/toggle/on-off/react.md | 4 +- .../v7/toggle/theming/css-properties/index.md | 6 +- .../theming/css-properties/javascript.md | 12 +- .../v7/toggle/theming/css-properties/vue.md | 12 +- .../toggle/theming/css-shadow-parts/index.md | 6 +- .../theming/css-shadow-parts/javascript.md | 10 +- .../v7/toggle/theming/css-shadow-parts/vue.md | 10 +- static/usage/v7/toolbar/basic/index.md | 10 +- static/usage/v7/toolbar/buttons/angular.md | 16 +-- static/usage/v7/toolbar/buttons/index.md | 8 +- static/usage/v7/toolbar/buttons/javascript.md | 16 +-- static/usage/v7/toolbar/buttons/react.md | 16 +-- static/usage/v7/toolbar/buttons/vue.md | 16 +-- .../usage/v7/toolbar/progress-bars/index.md | 10 +- static/usage/v7/toolbar/searchbars/index.md | 10 +- static/usage/v7/toolbar/segments/index.md | 10 +- .../usage/v7/toolbar/theming/colors/index.md | 8 +- .../toolbar/theming/css-properties/index.md | 8 +- versioned_docs/version-v5/api/item.md | 12 +- versioned_docs/version-v5/api/select.md | 2 +- .../guides/first-app-v4/intro.md | 2 +- .../version-v5/developing/android.md | 6 +- versioned_docs/version-v5/index.md | 20 ++-- versioned_docs/version-v5/react.md | 8 +- .../version-v5/reference/migration.md | 2 +- .../version-v6/angular/navigation.md | 37 +++--- versioned_docs/version-v6/angular/slides.md | 20 ++-- .../version-v6/angular/virtual-scroll.md | 2 +- versioned_docs/version-v6/api/icon.md | 2 +- versioned_docs/version-v6/api/nav.md | 2 +- .../guides/first-app-v4/intro.md | 2 +- .../version-v6/developing/config.md | 85 +++++++------- .../developing/config/global/index.md | 36 +++--- .../developing/config/per-component/index.md | 42 ++++--- .../config/per-platform-fallback/index.md | 42 +++---- .../config/per-platform-overrides/index.md | 26 +++-- .../developing/config/per-platform/index.md | 25 ++-- .../developing/hardware-back-button.md | 8 +- versioned_docs/version-v6/index.md | 20 ++-- .../version-v6/intro/upgrading-to-ionic-6.md | 73 ++++++------ versioned_docs/version-v6/native-faq.md | 9 +- versioned_docs/version-v6/native.md | 8 +- versioned_docs/version-v6/react.md | 8 +- versioned_docs/version-v6/react/navigation.md | 57 +++++---- versioned_docs/version-v6/react/slides.md | 2 +- .../version-v6/react/virtual-scroll.md | 6 +- .../version-v6/reference/browser-support.md | 1 - .../version-v6/reference/migration.md | 2 +- .../version-v6/reference/support.md | 16 +-- versioned_docs/version-v6/vue/navigation.md | 39 ++++--- versioned_docs/version-v6/vue/quickstart.md | 33 +++++- versioned_docs/version-v6/vue/slides.md | 2 +- .../version-v6/vue/virtual-scroll.md | 2 +- 1671 files changed, 11991 insertions(+), 9941 deletions(-) diff --git a/docs/angular/navigation.md b/docs/angular/navigation.md index eb05502309c..9aedd78ceee 100644 --- a/docs/angular/navigation.md +++ b/docs/angular/navigation.md @@ -238,14 +238,15 @@ If you have built a web app that uses routing, you likely have used linear routi The following is an example of linear routing in a mobile app: +width="400" +src={useBaseUrl('video/linear-routing-demo.mp4')} +controls + +> The application history in this example has the following path: @@ -264,14 +265,15 @@ Non-linear routing means that the view that the user should go back to is not ne The following is an example of non-linear routing: +width="400" +src={useBaseUrl('video/non-linear-routing-demo.mp4')} +controls + +> In the example above, we start on the `Originals` tab. Tapping a card brings us to the `Ted Lasso` view within the `Originals` tab. @@ -479,14 +481,15 @@ If you find that your tabs need to reference the Settings tab, we recommend maki 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. +width="400" +src={useBaseUrl('video/tabs-account-demo.mp4')} +controls + +> **Reusing Views Across Tabs** diff --git a/docs/angular/slides.md b/docs/angular/slides.md index f294bcc351c..7f40b012881 100644 --- a/docs/angular/slides.md +++ b/docs/angular/slides.md @@ -75,7 +75,7 @@ If you would like to use the Core version instead, which does not include additi To migrate over your CSS, first update your selectors to target the new custom elements instead: | ion-slides Selector | Swiper Selector | -| ------------------- | ------------------ | +| ------------------- | ------------------ | | `ion-slides` | `swiper-container` | | `ion-slide` | `swiper-slide` | @@ -155,9 +155,7 @@ export class HomePage { ```html - - ... - + ... ``` :::note @@ -190,11 +188,11 @@ To set these options as properties directly on `` we would do Below is a full list of property changes when going from `ion-slides` to Swiper Element: -| Name | Notes | -| --------- | --------------------------------------------------------------------------------------------------------------------------------------- | -| options | Set each option as a property directly on the `` component. | -| mode | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. | -| pager | Use the `pagination` property instead. | +| Name | Notes | +| ------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| options | Set each option as a property directly on the `` component. | +| mode | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. | +| pager | Use the `pagination` property instead. | :::note All properties available in Swiper Element can be found at https://swiperjs.com/swiper-api#parameters. @@ -306,9 +304,7 @@ All methods and properties available on the Swiper instance can be found at - ... - + ... ``` :::note diff --git a/docs/cli/livereload.md b/docs/cli/livereload.md index 23703954a9e..4d2d160ee78 100644 --- a/docs/cli/livereload.md +++ b/docs/cli/livereload.md @@ -64,8 +64,9 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl Live reload will use HTTP by default which will cause web APIs that require a secure context (like [web crypto](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)) to fail. To establish a secure context you can use the `--ssl` argument to use HTTPS. For example, with an Angular application you can run the following to pass a certificate and private key and serve your app with HTTPS: + ```shell ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key' ``` -Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623). \ No newline at end of file +Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623). diff --git a/docs/developer-resources/guides/first-app-v4/intro.md b/docs/developer-resources/guides/first-app-v4/intro.md index bffc7ea9c28..8e07c5bfb07 100644 --- a/docs/developer-resources/guides/first-app-v4/intro.md +++ b/docs/developer-resources/guides/first-app-v4/intro.md @@ -16,7 +16,7 @@ Download/install these right away to ensure an optimal Ionic development experie - A code editor for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/). - Command-line terminal (CLI): FYI Windows users, for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode. For - Mac/Linux + Mac/Linux users, virtually any terminal will work. ## Install Ionic and Cordova diff --git a/docs/developing/config.md b/docs/developing/config.md index 10ad73cec8d..aaaf2066bd4 100644 --- a/docs/developing/config.md +++ b/docs/developing/config.md @@ -21,7 +21,7 @@ Ionic Config is not reactive. Updating the config's value after the component ha import PerComponentExample from '@site/docs/developing/config/per-component/index.md'; - + ## Per-Platform Config @@ -33,7 +33,6 @@ import PerPlatformExample from '@site/docs/developing/config/per-platform/index. - ### Fallbacks The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match: @@ -59,7 +58,7 @@ Ionic Angular provides a `Config` provider for accessing the Ionic Config. | | | | --------------- | -------------------------------------------------------------------------------- | | **Description** | Returns a config value as an `any`. Returns `null` if the config is not defined. | -| **Signature** | `get(key: string, fallback?: any) => any` | +| **Signature** | `get(key: string, fallback?: any) => any` | #### Examples @@ -79,7 +78,7 @@ class AppComponent { | | | | --------------- | ------------------------------------------------------------------------------------ | | **Description** | Returns a config value as a `boolean`. Returns `false` if the config is not defined. | -| **Signature** | `getBoolean(key: string, fallback?: boolean) => boolean` | +| **Signature** | `getBoolean(key: string, fallback?: boolean) => boolean` | #### Examples @@ -99,7 +98,7 @@ class AppComponent { | | | | --------------- | ------------------------------------------------------------------------------- | | **Description** | Returns a config value as a `number`. Returns `0` if the config is not defined. | -| **Signature** | `getNumber(key: string, fallback?: number) => number` | +| **Signature** | `getNumber(key: string, fallback?: number) => number` | ## Interfaces @@ -107,41 +106,41 @@ class AppComponent { Below are the config options that Ionic uses. -| Config | Type | Description | -| ------------------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | -| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | -| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | -| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | -| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | -| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | -| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | -| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | -| `backButtonText` | `string` | Overrides the default text in all `` components. | -| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | -| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | -| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | -| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | -| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | -| `menuIcon` | `string` | Overrides the default icon in all `` components. | -| `menuType` | `string` | Overrides the default menu type for all `` components. | -| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | -| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | -| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | -| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | -| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | -| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | -| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | -| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | -| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | -| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | -| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | -| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | -| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | -| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | -| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | -| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | -| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | -| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | -| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | +| Config | Type | Description | +| --------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | +| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | +| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | +| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | +| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | +| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | +| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | +| `backButtonText` | `string` | Overrides the default text in all `` components. | +| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | +| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | +| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | +| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | +| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | +| `menuIcon` | `string` | Overrides the default icon in all `` components. | +| `menuType` | `string` | Overrides the default menu type for all `` components. | +| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | +| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | +| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | +| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | +| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | +| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | +| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | +| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | +| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | +| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | +| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | +| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | +| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | +| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | +| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | +| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | +| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | +| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | +| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | diff --git a/docs/developing/config/global/index.md b/docs/developing/config/global/index.md index bbfbaa83a71..be83e8eda23 100644 --- a/docs/developing/config/global/index.md +++ b/docs/developing/config/global/index.md @@ -2,25 +2,26 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; - +groupId="global-config" +defaultValue="javascript" +values={[ +{ value: 'javascript', label: 'JavaScript' }, +{ value: 'angular', label: 'Angular' }, +{ value: 'react', label: 'React' }, +{ value: 'vue', label: 'Vue' }, +]} + +> ```javascript title="example.js" window.Ionic = { config: { rippleEffect: false, - mode: 'md' - } -} + mode: 'md', + }, +}; ``` + @@ -38,10 +39,12 @@ import { IonicModule } from '@ionic/angular'; ... }) ``` + The `setupIonicReact` function must be called before rendering any Ionic components (including `IonApp`). + ```tsx title="App.tsx" import { setupIonicReact } from '@ionic/react'; @@ -50,18 +53,19 @@ setupIonicReact({ mode: 'md', }); ``` + ```tsx title="main.ts" - import { IonicVue } from '@ionic/vue'; import { createApp } from 'vue'; - + createApp(App).use(IonicVue, { rippleEffect: false, mode: 'md', }); ``` + - \ No newline at end of file + diff --git a/docs/developing/config/per-component/index.md b/docs/developing/config/per-component/index.md index 64b868a70ee..28680069d49 100644 --- a/docs/developing/config/per-component/index.md +++ b/docs/developing/config/per-component/index.md @@ -2,16 +2,16 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; - +groupId="per-component-config" +defaultValue="javascript" +values={[ +{ value: 'javascript', label: 'JavaScript' }, +{ value: 'angular', label: 'Angular' }, +{ value: 'react', label: 'React' }, +{ value: 'vue', label: 'Vue' }, +]} + +> **Not recommended** @@ -19,9 +19,9 @@ import TabItem from '@theme/TabItem'; window.Ionic = { config: { // Not recommended when your app requires reactive values - backButtonText: 'Go Back' - } -} + backButtonText: 'Go Back', + }, +}; ``` **Recommended** @@ -31,7 +31,7 @@ window.Ionic = { ``` + @@ -75,6 +76,7 @@ class MyComponent { backButtonText = 'Go Back'; } ``` + @@ -85,7 +87,7 @@ import { setupIonicReact } from '@ionic/react'; setupIonicReact({ // Not recommended when your app requires reactive values - backButtonText: 'Go Back' + backButtonText: 'Go Back', }); ``` @@ -106,6 +108,7 @@ const ExampleComponent = () => { ) } ``` + @@ -114,10 +117,10 @@ const ExampleComponent = () => { ```ts import { IonicVue } from '@ionic/vue'; import { createApp } from 'vue'; - - // Not recommended when your app requires reactive values + +// Not recommended when your app requires reactive values createApp(App).use(IonicVue, { - backButtonText: 'Go Back' + backButtonText: 'Go Back', }); ``` @@ -139,5 +142,6 @@ createApp(App).use(IonicVue, { const backButtonText = ref('Go Back'); ``` + - \ No newline at end of file + diff --git a/docs/developing/config/per-platform-fallback/index.md b/docs/developing/config/per-platform-fallback/index.md index 02a5f27a3c0..34d2dd67f05 100644 --- a/docs/developing/config/per-platform-fallback/index.md +++ b/docs/developing/config/per-platform-fallback/index.md @@ -2,15 +2,15 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; - +groupId="per-platform-fallback-config" +defaultValue="angular" +values={[ +{ value: 'angular', label: 'Angular' }, +{ value: 'react', label: 'React' }, +{ value: 'vue', label: 'Vue' }, +]} + +> ```ts title="app.module.ts" import { isPlatform, IonicModule } from '@ionic/angular'; @@ -34,6 +34,7 @@ const getConfig = () => { ... }); ``` + @@ -43,18 +44,18 @@ import { isPlatform, setupIonicReact } from '@ionic/react'; const getConfig = () => { if (isPlatform('hybrid')) { return { - tabButtonLayout: 'label-hide' - } + tabButtonLayout: 'label-hide', + }; } - + return { - tabButtonLayout: 'icon-top' + tabButtonLayout: 'icon-top', }; }; setupIonicReact(getConfig()); - ``` + @@ -64,16 +65,17 @@ import { IonicVue, isPlatform } from '@ionic/vue'; const getConfig = () => { if (isPlatform('hybrid')) { return { - tabButtonLayout: 'label-hide' - } + tabButtonLayout: 'label-hide', + }; } - + return { - tabButtonLayout: 'icon-top' + tabButtonLayout: 'icon-top', }; }; createApp(App).use(IonicVue, getConfig()); -```` +``` + - \ No newline at end of file + diff --git a/docs/developing/config/per-platform-overrides/index.md b/docs/developing/config/per-platform-overrides/index.md index 243cfa9c2fc..3745855f6da 100644 --- a/docs/developing/config/per-platform-overrides/index.md +++ b/docs/developing/config/per-platform-overrides/index.md @@ -2,15 +2,15 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; - +groupId="per-platform-fallback-config" +defaultValue="angular" +values={[ +{ value: 'angular', label: 'Angular' }, +{ value: 'react', label: 'React' }, +{ value: 'vue', label: 'Vue' }, +]} + +> ```ts title="app.module.ts" import { isPlatform, IonicModule } from '@ionic/angular'; @@ -37,6 +37,7 @@ const getConfig = () => { ... }); ``` + @@ -59,8 +60,8 @@ const getConfig = () => { }; setupIonicReact(getConfig()); - ``` + @@ -83,6 +84,7 @@ const getConfig = () => { }; createApp(App).use(IonicVue, getConfig()); -```` +``` + - \ No newline at end of file + diff --git a/docs/developing/config/per-platform/index.md b/docs/developing/config/per-platform/index.md index 7d17299d0f8..ef4892aecc7 100644 --- a/docs/developing/config/per-platform/index.md +++ b/docs/developing/config/per-platform/index.md @@ -2,15 +2,15 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; - +groupId="per-platform-config" +defaultValue="angular" +values={[ +{ value: 'angular', label: 'Angular' }, +{ value: 'react', label: 'React' }, +{ value: 'vue', label: 'Vue' }, +]} + +> :::note Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. @@ -31,6 +31,7 @@ import { isPlatform, IonicModule } from '@ionic/angular'; ... }) ``` + @@ -45,6 +46,7 @@ setupIonicReact({ animated: !isPlatform('mobileweb'), }); ``` + @@ -58,6 +60,7 @@ import { IonicVue, isPlatform } from '@ionic/vue'; createApp(App).use(IonicVue, { animated: !isPlatform('mobileweb'), }); -```` +``` + - \ No newline at end of file + diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md index 2f3271613dc..6813f9b4ceb 100644 --- a/docs/developing/hardware-back-button.md +++ b/docs/developing/hardware-back-button.md @@ -338,8 +338,8 @@ It is recommended to check whether or not the user is on the root page prior to The table below lists all of the internal hardware back button event handlers that Ionic Framework uses. The `Propagates` column notes whether or not that particular handler tells Ionic Framework to call the next back button handler. -| Handler | Priority | Propagates | Description | -| ---------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- | +| Handler | Priority | Propagates | Description | +| ---------- | -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- | | Overlays | 100 | No | Applies to overlay components `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-popover`, and `ion-picker`. | -| Menu | 99 | No | Applies to `ion-menu`. | -| Navigation | 0 | Yes | Applies to routing navigation (i.e. Angular Routing). | +| Menu | 99 | No | Applies to `ion-menu`. | +| Navigation | 0 | Yes | Applies to routing navigation (i.e. Angular Routing). | diff --git a/docs/index.md b/docs/index.md index 5a5909b1b3e..d25f1c87439 100644 --- a/docs/index.md +++ b/docs/index.md @@ -34,20 +34,24 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First +

Dive into Ionic beautifully designed UI component library.

 +

Integrate native device plugins, like Bluetooth, Maps, HealthKit, and more.

 diff --git a/docs/layout/css-utilities.md b/docs/layout/css-utilities.md index d23ea52b4b4..05bb0a88aaa 100644 --- a/docs/layout/css-utilities.md +++ b/docs/layout/css-utilities.md @@ -141,8 +141,7 @@ The float CSS property specifies that an element should be placed along the left src="https://ionicframework.com/docs/img/demos/avatar.svg" height="50px" /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac - vehicula lorem. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.

float-left

@@ -152,8 +151,7 @@ The float CSS property specifies that an element should be placed along the left height="50px" class="ion-float-left" /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac - vehicula lorem. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.

float-right

@@ -163,8 +161,7 @@ The float CSS property specifies that an element should be placed along the left height="50px" class="ion-float-right" /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac - vehicula lorem. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. diff --git a/docs/layout/structure.md b/docs/layout/structure.md index 5315d0cd9de..700e77372fa 100644 --- a/docs/layout/structure.md +++ b/docs/layout/structure.md @@ -34,17 +34,14 @@ import Footer from '@site/static/usage/v7/footer/basic/index.md';
- ## Tabs Layout A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md). - import Tabs from '@site/static/usage/v7/tabs/router/index.md'; - ## Menu Layout A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content. @@ -53,7 +50,6 @@ import Menu from '@site/static/usage/v7/menu/basic/index.md'; - ## Split Pane Layout A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden. diff --git a/docs/native-faq.md b/docs/native-faq.md index ceaf06b6d38..a74c967ba41 100644 --- a/docs/native-faq.md +++ b/docs/native-faq.md @@ -5,9 +5,9 @@ slug: /native/faq # Frequently Asked Question -## What is Capacitor? +## What is Capacitor? -Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library. +Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library. ## Permission Issues @@ -17,9 +17,8 @@ If you're using a plugin, it may require adding additional permissions to your n - `NSPhotoLibraryAddUsageDescription` (`Privacy - Photo Library Additions Usage Description`) - `NSPhotoLibraryUsageDescription` (`Privacy - Photo Library Usage Description`) -You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail. - +You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail. ## Unexpected behaviour -If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved. \ No newline at end of file +If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved. diff --git a/docs/native.md b/docs/native.md index c863908c42f..13818c296ad 100644 --- a/docs/native.md +++ b/docs/native.md @@ -23,14 +23,10 @@ import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard'; - Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install the core packages and easily add them to your project. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. All of this is powered by a unified TypeScript API that automatically handles platform differences. While the core features of Capacitor are free and open source, some enterprises might find themselves needing more features or custom third-party integrations. If you need such additional features, check out the [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk). - - - > Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/) diff --git a/docs/react.md b/docs/react.md index 82da9dfb8be..20481087345 100644 --- a/docs/react.md +++ b/docs/react.md @@ -127,10 +127,12 @@ $ ionic serve █ +

Use individual components or the complete app experience.

 diff --git a/docs/react/navigation.md b/docs/react/navigation.md index c24d363256b..614bd9e3fa9 100644 --- a/docs/react/navigation.md +++ b/docs/react/navigation.md @@ -275,14 +275,15 @@ If you have built a web app that uses routing, you likely have used linear routi The following is an example of linear routing in a mobile app: +width="400" +src={useBaseUrl('video/linear-routing-demo.mp4')} +controls + +> The application history in this example has the following path: @@ -301,14 +302,15 @@ Non-linear routing means that the view that the user should go back to is not ne The following is an example of non-linear routing: +width="400" +src={useBaseUrl('video/non-linear-routing-demo.mp4')} +controls + +> In the example above, we start on the `Originals` tab. Tapping a card brings us to the `Ted Lasso` view within the `Originals` tab. @@ -351,8 +353,8 @@ const App: React.FC = () => { - -} + ; +}; ``` The above routes are considered "shared" because they reuse the `dashboard` piece of the URL. @@ -372,7 +374,7 @@ const App: React.FC = () => ( -) +); const DashboardRouterOutlet: React.FC = () => ( @@ -383,7 +385,7 @@ const DashboardRouterOutlet: React.FC = () => ( -) +); ``` 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 `IonRouterOutlet`. @@ -420,15 +422,7 @@ Let's start by taking a look at our `Tabs` component: ```tsx import { Redirect, Route } from 'react-router-dom'; -import { - IonContent, - IonIcon, - IonLabel, - IonRouterOutlet, - IonTabBar, - IonTabButton, - IonTabs -} from '@ionic/react'; +import { IonContent, IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react'; import { IonReactRouter } from '@ionic/react-router'; import { ellipse, square, triangle } from 'ionicons/icons'; import Tab1 from './pages/Tab1'; @@ -481,7 +475,7 @@ If you have worked with Ionic Framework before, this should feel familiar. We cr 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 @@ -542,14 +536,15 @@ If you find that your tabs need to reference the Settings tab, we recommend maki 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. +width="400" +src={useBaseUrl('video/tabs-account-demo.mp4')} +controls + +> **Reusing Views Across Tabs** @@ -559,8 +554,8 @@ Instead, we recommend having routes in each tab that reference the same componen 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 | -| :------: | :--------: | +| Home Tab | Search Tab | +| :-------------------------------------------------: | :---------------------------------------------------: | | | | ## Live Example @@ -634,7 +629,6 @@ type UseIonRouterResult = { The following example shows how to use `useIonRouter`: - ```tsx import { useIonRouter } from '@ionic/react'; @@ -643,13 +637,12 @@ const MyComponent: React.FC = () => { const goToPage = () => { router.push('/my-page', 'root', 'replace'); }; - + ... } ``` - ## More Information For more info on routing in React using React Router, check out their docs at [https://reacttraining.com/react-router/web](https://reacttraining.com/react-router/web). diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md index b4121ce03ea..bb9f77e8cc0 100644 --- a/docs/react/quickstart.md +++ b/docs/react/quickstart.md @@ -235,7 +235,7 @@ import { add } from ‘ionicons/icons’; On our main `IonFab`, we're setting its positioning with the vertical and horizontal attributes. We're also setting the render location to "fixed" with the slot attribute. This will tell `IonFab` to render outside of the scrollable content in `IonContent`. -Now let's wire up a click handler to this. What we want to do is when we click the button, we'll navigate to a new page (which we'll create in a moment). To do this, we'll need to get access to React Router's `useHistory` hook API. Thankfully the `useHistory` hook makes this easy since it can be imported from the react-router package. +Now let's wire up a click handler to this. What we want to do is when we click the button, we'll navigate to a new page (which we'll create in a moment). To do this, we'll need to get access to React Router's `useHistory` hook API. Thankfully the `useHistory` hook makes this easy since it can be imported from the react-router package. ```tsx import { add } from 'ionicons/icons'; diff --git a/docs/reference/browser-support.md b/docs/reference/browser-support.md index fe10d28861b..12a79e474b5 100644 --- a/docs/reference/browser-support.md +++ b/docs/reference/browser-support.md @@ -39,9 +39,8 @@ Because Ionic is based on web technologies, it works just as well on desktop bro | Browser | Ionic v7 | Ionic v6 | Ionic v5 | Ionic v4 | | :---------: | :------: | :------: | :------: | :------: | -| **Chrome** | 79+ | 60+ | ✔ | ✔ | -| **Safari** | 14+ | 13+ | ✔ | ✔ | -| **Edge** | 79+ | 79+ | 79+ | ✔ | -| **Firefox** | 70+ | 63+ | ✔ | ✔ | -| **IE 11** | **X** | **X** | **X** | **X** | - +| **Chrome** | 79+ | 60+ | ✔ | ✔ | +| **Safari** | 14+ | 13+ | ✔ | ✔ | +| **Edge** | 79+ | 79+ | 79+ | ✔ | +| **Firefox** | 70+ | 63+ | ✔ | ✔ | +| **IE 11** | **X** | **X** | **X** | **X** | diff --git a/docs/reference/support.md b/docs/reference/support.md index c21749e5a4f..76c8b2306e1 100644 --- a/docs/reference/support.md +++ b/docs/reference/support.md @@ -20,15 +20,15 @@ Given the reality of time and resource constraints as well as the desire to keep The current status of each Ionic Framework version is: -| Version | Status | Released | Maintenance Ends | Ext. Support Ends | -| :-----: | :-------------------: | :----------: | :--------------: | :---------------: | -| V7 | **Active** | Mar 29, 2023 | TBD | TBD | -| V6 | Maintenance | Dec 8, 2021 | Sep 29, 2023 | Mar 29, 2024 | -| V5 | End of Support | Feb 11, 2020 | June 8, 2022 | Dec 8, 2022 | -| V4 | End of Support | Jan 23, 2019 | Aug 11, 2020 | Sept 30, 2022 | -| V3 | End of Support | Apr 5, 2017 | Oct 30, 2019 | Aug 11, 2020 | -| V2 | End of Support | Jan 25, 2017 | Apr 5, 2017 | Apr 5, 2017 | -| V1 | End of Support | May 12, 2015 | Jan 25, 2017 | Jan 25, 2017 | +| Version | Status | Released | Maintenance Ends | Ext. Support Ends | +| :-----: | :------------: | :----------: | :--------------: | :---------------: | +| V7 | **Active** | Mar 29, 2023 | TBD | TBD | +| V6 | Maintenance | Dec 8, 2021 | Sep 29, 2023 | Mar 29, 2024 | +| V5 | End of Support | Feb 11, 2020 | June 8, 2022 | Dec 8, 2022 | +| V4 | End of Support | Jan 23, 2019 | Aug 11, 2020 | Sept 30, 2022 | +| V3 | End of Support | Apr 5, 2017 | Oct 30, 2019 | Aug 11, 2020 | +| V2 | End of Support | Jan 25, 2017 | Apr 5, 2017 | Apr 5, 2017 | +| V1 | End of Support | May 12, 2015 | Jan 25, 2017 | Jan 25, 2017 | - **Maintenance**: Only critical bug and security fixes. No major feature improvements. - **Extended Support**: For teams and organizations that require additional long term support, Ionic has extended support options available. To learn more, see our [Enterprise offerings](https://ionicframework.com/enterprise). @@ -43,11 +43,11 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo | Framework | Minimum Angular Version | Maximum Angular Version | TypeScript | | :-------: | :---------------------: | :---------------------: | :--------: | -| v7 | v14 | v15.x^ | 4.6+ | -| v6 | v12 | v15.x^ | 4.0+ | -| v5 | v8.2 | v12.x | 3.5+ | -| v4 | v8.2 | v11.x | 3.5+ | -| v3 | v5.2.11 | v5.2.11 | 2.6.2 | +| v7 | v14 | v15.x^ | 4.6+ | +| v6 | v12 | v15.x^ | 4.0+ | +| v5 | v8.2 | v12.x | 3.5+ | +| v4 | v8.2 | v11.x | 3.5+ | +| v3 | v5.2.11 | v5.2.11 | 2.6.2 | > ^ Angular 14.x supported starting in Ionic v6.1.9. Angular 15.x supported starting in Ionic v6.3.6. @@ -61,18 +61,18 @@ Note that later versions of Ionic do not support iOS 13; see [mobile support tab | Framework | Required React Version | TypeScript | | :-------: | :--------------------: | :--------: | -| v7 | v17+ | 3.7+ | -| v6 | v17+ | 3.7+ | -| v5 | v16.8+ | 3.7+ | -| v4 | v16.8+ | 3.7+ | +| v7 | v17+ | 3.7+ | +| v6 | v17+ | 3.7+ | +| v5 | v16.8+ | 3.7+ | +| v4 | v16.8+ | 3.7+ | #### Ionic Vue | Framework | Required Vue Version | TypeScript | | :-------: | :------------------: | :--------: | -| v7 | v3.0.6+ | 3.9+ | -| v6 | v3.0.6+ | 3.9+ | -| v5 | v3.0+ | 3.9+ | +| v7 | v3.0.6+ | 3.9+ | +| v6 | v3.0.6+ | 3.9+ | +| v5 | v3.0+ | 3.9+ | ### Native Bridges diff --git a/docs/updating/6-0.md b/docs/updating/6-0.md index 073705c7540..7c70f0b8d22 100644 --- a/docs/updating/6-0.md +++ b/docs/updating/6-0.md @@ -58,6 +58,7 @@ npm install @ionic/react@6 @ionic/react-router@6 4. Import and call `setupIonicReact` in your `App` component file. If you are also using `setupConfig`, pass your config to `setupIonicReact` instead: **Before** + ```tsx title="App.tsx" import { setupConfig } from '@ionic/react'; @@ -69,6 +70,7 @@ setupConfig({ ``` **After** + ```tsx title="App.tsx" import { setupIonicReact } from '@ionic/react'; @@ -88,11 +90,13 @@ See the [React Config Documentation](../developing/config) for more examples. 5. Update all controller imports from `@ionic/core` to `@ionic/core/components`. As an example, here is a migration for `menuController`: **Before** + ```tsx import { menuController } from '@ionic/core'; ``` **After** + ```tsx import { menuController } from '@ionic/core/components'; ``` @@ -152,6 +156,7 @@ See the [Testing section below](#testing) for more information. 8. Rename any overlay event listeners to use the new format: **Before** + ```html - - ... - + ... ``` **After** + ```html - - ... - + ... ``` @@ -223,6 +227,7 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io 10. Additional routes inside of tabs should be re-written as sibling routes instead of child routes: **Before** + ```ts const routes: Array = [ { @@ -261,11 +266,12 @@ const routes: Array = [ ``` **After** + ```ts const routes: Array = [ { path: '/', - redirect: '/tabs/tab1' + redirect: '/tabs/tab1', }, { path: '/tabs/', @@ -273,27 +279,27 @@ const routes: Array = [ children: [ { path: '', - redirect: 'tab1' + redirect: 'tab1', }, { path: 'tab1', - component: () => import('@/views/Tab1.vue') + component: () => import('@/views/Tab1.vue'), }, { path: 'tab1/view', - component: () => import('@/views/Tab1View.vue') + component: () => import('@/views/Tab1View.vue'), }, { path: 'tab2', - component: () => import('@/views/Tab2.vue') + component: () => import('@/views/Tab2.vue'), }, { path: 'tab3', - component: () => import('@/views/Tab3.vue') - } - ] - } -] + component: () => import('@/views/Tab3.vue'), + }, + ], + }, +]; ``` ### Core @@ -335,24 +341,26 @@ Ensure `null` is not passed in as a value to the `placeholder` property. We reco `ion-modal` now uses the Shadow DOM. Update any styles targeting the internals of `ion-modal` to use either the [ion-modal CSS Variables](../api/modal#css-custom-properties) or the [ion-modal CSS Shadow Parts](../api/modal#css-shadow-parts): **Before** + ```css ion-modal .modal-wrapper { - ... + ...; } ion-modal ion-backdrop { - ... + ...; } ``` **After** + ```css ion-modal::part(content) { - ... + ...; } ion-modal::part(backdrop) { - ... + ...; } ``` @@ -360,34 +368,35 @@ ion-modal::part(backdrop) { `ion-popover` now uses the Shadow DOM. Update any styles targeting the internals of `ion-popover` to use either [ion-popover CSS Variables](../api/popover#css-custom-properties) or the [ion-popover CSS Shadow Parts](../api/popover#css-shadow-parts): - **Before** + ```css ion-popover .popover-arrow { - ... + ...; } ion-popover ion-backdrop { - ... + ...; } ion-popover .popover-content { - ... + ...; } ``` **After** + ```css ion-popover::part(arrow) { - ... + ...; } ion-popover::part(backdrop) { - ... + ...; } ion-popover::part(content) { - ... + ...; } ``` @@ -417,7 +426,6 @@ Safari >=13 iOS >=13 ``` - ### Testing Ionic 6 now ships as ES Modules. ES Modules are supported in all major browsers and bring developer experience and code maintenance improvements. Developers testing with Jest will need to update their Jest configuration as Jest does not have full support for ES Modules as of Jest 27. @@ -468,4 +476,3 @@ If you are still running into issues, here are a couple things to try: Be sure to look at the [Ionic 6 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md). There were several changes to default property and CSS Variable values that developers may need to be aware of. Only the breaking changes that required user action are listed on this page. If you need help upgrading, please post a thread on the [Ionic Forum](https://forum.ionicframework.com/). - diff --git a/docs/vue/navigation.md b/docs/vue/navigation.md index 4ad77014489..63769deb59b 100644 --- a/docs/vue/navigation.md +++ b/docs/vue/navigation.md @@ -240,14 +240,15 @@ If you have built a web app that uses routing, you likely have used linear routi The following is an example of linear routing in a mobile app: +width="400" +src={useBaseUrl('video/linear-routing-demo.mp4')} +controls + +> The application history in this example has the following path: @@ -266,14 +267,15 @@ Non-linear routing means that the view that the user should go back to is not ne The following is an example of non-linear routing: +width="400" +src={useBaseUrl('video/non-linear-routing-demo.mp4')} +controls + +> In the example above, we start on the `Originals` tab. Tapping a card brings us to the `Ted Lasso` view within the `Originals` tab. @@ -460,7 +462,7 @@ If you have worked with Ionic Framework before, this should feel familiar. We cr 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 @@ -519,14 +521,15 @@ If you find that your tabs need to reference the Settings tab, we recommend maki 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. +width="400" +src={useBaseUrl('video/tabs-account-demo.mp4')} +controls + +> **Reusing Views Across Tabs** @@ -536,8 +539,8 @@ Instead, we recommend having routes in each tab that reference the same componen 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 | -| :------: | :--------: | +| Home Tab | Search Tab | +| :-------------------------------------------------: | :---------------------------------------------------: | | | | ## Components diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md index 7e85935bd9f..b17db3e2ea2 100644 --- a/docs/vue/pwa.md +++ b/docs/vue/pwa.md @@ -24,16 +24,13 @@ npm install -D vite-plugin-pwa Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`: ```javascript -import { defineConfig } from 'vite' -import vue from '@vitejs/plugin-vue' -import { VitePWA } from 'vite-plugin-pwa' +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; +import { VitePWA } from 'vite-plugin-pwa'; export default defineConfig({ - plugins: [ - vue(), - VitePWA({ registerType: 'autoUpdate' }) - ], -}) + plugins: [vue(), VitePWA({ registerType: 'autoUpdate' })], +}); ``` This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build. diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md index bf6c36e621d..16a4ca28556 100644 --- a/docs/vue/quickstart.md +++ b/docs/vue/quickstart.md @@ -102,7 +102,7 @@ Let's break it down, starting with the imports. ```tsx ``` @@ -289,7 +289,19 @@ For brevity, we are excluding repeating parts of our component, like the functio ``` @@ -326,7 +338,22 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto ``` diff --git a/docs/vue/slides.md b/docs/vue/slides.md index 854c845d6d0..1ee72d337bc 100644 --- a/docs/vue/slides.md +++ b/docs/vue/slides.md @@ -433,7 +433,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper Vu | isBeginning() | Use the `isBeginning` property instead. | | isEnd() | Use the `isEnd` property instead. | | length() | Use the `slides` property instead. (i.e swiperRef.slides.length) | -| lockSwipeToNext() | Use the `allowSlideNext` property instead. | +| lockSwipeToNext() | Use the `allowSlideNext` property instead. | | lockSwipeToPrev() | Use the `allowSlidePrev` property instead. | | lockSwipes() | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. | | startAutoplay() | Use the `autoplay` property instead. | diff --git a/docs/vue/your-first-app.md b/docs/vue/your-first-app.md index 006d719f400..c792cb40193 100644 --- a/docs/vue/your-first-app.md +++ b/docs/vue/your-first-app.md @@ -168,7 +168,7 @@ Next, remove the `ExploreContainer` node from the HTML markup in the `template`. ``` -We'll replace it with a [floating action button](https://ionicframework.com/docs/api/fab) (FAB). First, update the imports within the ` diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md index 21189b83ce7..93bc6b09b7f 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md @@ -10,15 +10,15 @@ ion-accordion.accordion-expanded { margin: 16px auto; } -ion-accordion.accordion-collapsing ion-item[slot="header"], -ion-accordion.accordion-collapsed ion-item[slot="header"] { +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"] { +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); } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md index c0da98e5ee8..3b3c86763c1 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md index 32e5cc12ce2..7fac4c977d1 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md @@ -12,8 +12,8 @@ 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/v6/accordion/customization/advanced-expansion-styles/javascript.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/javascript.md index 863d92d374f..5076fe510e5 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/javascript.md +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/javascript.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 @@ -38,14 +32,14 @@ margin: 16px auto; } - ion-accordion.accordion-collapsing ion-item[slot="header"], - ion-accordion.accordion-collapsed ion-item[slot="header"] { + 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"] { + 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/v6/accordion/customization/advanced-expansion-styles/react/main_css.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_css.md index 21189b83ce7..93bc6b09b7f 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_css.md +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_css.md @@ -10,15 +10,15 @@ ion-accordion.accordion-expanded { margin: 16px auto; } -ion-accordion.accordion-collapsing ion-item[slot="header"], -ion-accordion.accordion-collapsed ion-item[slot="header"] { +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"] { +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); } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/vue.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/vue.md index 738797ba44f..5e8e8da6925 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/vue.md +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/vue.md @@ -5,44 +5,33 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 @@ -55,18 +44,18 @@ 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"] { + + 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"] { + + 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/v6/accordion/customization/expansion-styles/angular.md b/static/usage/v6/accordion/customization/expansion-styles/angular.md index 39a3f97b6be..1be81366c58 100644 --- a/static/usage/v6/accordion/customization/expansion-styles/angular.md +++ b/static/usage/v6/accordion/customization/expansion-styles/angular.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/customization/expansion-styles/index.md b/static/usage/v6/accordion/customization/expansion-styles/index.md index 1b08eaa20c5..f44265846f5 100644 --- a/static/usage/v6/accordion/customization/expansion-styles/index.md +++ b/static/usage/v6/accordion/customization/expansion-styles/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/customization/expansion-styles/javascript.md b/static/usage/v6/accordion/customization/expansion-styles/javascript.md index 39a3f97b6be..1be81366c58 100644 --- a/static/usage/v6/accordion/customization/expansion-styles/javascript.md +++ b/static/usage/v6/accordion/customization/expansion-styles/javascript.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/customization/expansion-styles/react.md b/static/usage/v6/accordion/customization/expansion-styles/react.md index 1067c80acb7..d24cf600956 100644 --- a/static/usage/v6/accordion/customization/expansion-styles/react.md +++ b/static/usage/v6/accordion/customization/expansion-styles/react.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v6/accordion/customization/expansion-styles/vue.md b/static/usage/v6/accordion/customization/expansion-styles/vue.md index a6bcdcbde5e..05f22d0d2ff 100644 --- a/static/usage/v6/accordion/customization/expansion-styles/vue.md +++ b/static/usage/v6/accordion/customization/expansion-styles/vue.md @@ -5,44 +5,33 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 diff --git a/static/usage/v6/accordion/customization/icons/index.md b/static/usage/v6/accordion/customization/icons/index.md index 691d4b933b1..0aea3f5df3d 100644 --- a/static/usage/v6/accordion/customization/icons/index.md +++ b/static/usage/v6/accordion/customization/icons/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/customization/icons/javascript.md b/static/usage/v6/accordion/customization/icons/javascript.md index 7d937e511de..7fd8a091cc8 100644 --- a/static/usage/v6/accordion/customization/icons/javascript.md +++ b/static/usage/v6/accordion/customization/icons/javascript.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/customization/icons/react.md b/static/usage/v6/accordion/customization/icons/react.md index cca6fbf0af1..2b269c172ed 100644 --- a/static/usage/v6/accordion/customization/icons/react.md +++ b/static/usage/v6/accordion/customization/icons/react.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; import { caretDownCircle } from 'ionicons/icons'; function Example() { diff --git a/static/usage/v6/accordion/customization/icons/vue.md b/static/usage/v6/accordion/customization/icons/vue.md index 760bab7520b..453e9963a89 100644 --- a/static/usage/v6/accordion/customization/icons/vue.md +++ b/static/usage/v6/accordion/customization/icons/vue.md @@ -5,49 +5,38 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/customization/theming/angular/example_component_html.md b/static/usage/v6/accordion/customization/theming/angular/example_component_html.md index 9af8534259c..5efdf7b71f9 100644 --- a/static/usage/v6/accordion/customization/theming/angular/example_component_html.md +++ b/static/usage/v6/accordion/customization/theming/angular/example_component_html.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/customization/theming/angular/global_css.md b/static/usage/v6/accordion/customization/theming/angular/global_css.md index 6054219017a..141236c6633 100644 --- a/static/usage/v6/accordion/customization/theming/angular/global_css.md +++ b/static/usage/v6/accordion/customization/theming/angular/global_css.md @@ -1,9 +1,9 @@ ```css :root { --ion-color-rose: #fecdd3; - --ion-color-rose-rgb: 254,205,211; + --ion-color-rose-rgb: 254, 205, 211; --ion-color-rose-contrast: #000000; - --ion-color-rose-contrast-rgb: 0,0,0; + --ion-color-rose-contrast-rgb: 0, 0, 0; --ion-color-rose-shade: #e0b4ba; --ion-color-rose-tint: #fed2d7; } @@ -17,7 +17,7 @@ --ion-color-tint: var(--ion-color-rose-tint); } -div[slot="content"] { - background: rgba(var(--ion-color-rose-rgb), 0.25) +div[slot='content'] { + background: rgba(var(--ion-color-rose-rgb), 0.25); } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/accordion/customization/theming/index.md b/static/usage/v6/accordion/customization/theming/index.md index eba76679a03..f184a84848b 100644 --- a/static/usage/v6/accordion/customization/theming/index.md +++ b/static/usage/v6/accordion/customization/theming/index.md @@ -11,8 +11,8 @@ 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/v6/accordion/customization/theming/javascript.md b/static/usage/v6/accordion/customization/theming/javascript.md index d35f6dbb6b9..179bf5d51c0 100644 --- a/static/usage/v6/accordion/customization/theming/javascript.md +++ b/static/usage/v6/accordion/customization/theming/javascript.md @@ -4,38 +4,32 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/customization/theming/react/main_css.md b/static/usage/v6/accordion/customization/theming/react/main_css.md index 6054219017a..141236c6633 100644 --- a/static/usage/v6/accordion/customization/theming/react/main_css.md +++ b/static/usage/v6/accordion/customization/theming/react/main_css.md @@ -1,9 +1,9 @@ ```css :root { --ion-color-rose: #fecdd3; - --ion-color-rose-rgb: 254,205,211; + --ion-color-rose-rgb: 254, 205, 211; --ion-color-rose-contrast: #000000; - --ion-color-rose-contrast-rgb: 0,0,0; + --ion-color-rose-contrast-rgb: 0, 0, 0; --ion-color-rose-shade: #e0b4ba; --ion-color-rose-tint: #fed2d7; } @@ -17,7 +17,7 @@ --ion-color-tint: var(--ion-color-rose-tint); } -div[slot="content"] { - background: rgba(var(--ion-color-rose-rgb), 0.25) +div[slot='content'] { + background: rgba(var(--ion-color-rose-rgb), 0.25); } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/accordion/customization/theming/react/main_tsx.md b/static/usage/v6/accordion/customization/theming/react/main_tsx.md index 348576ae0fe..ecc51a9e15b 100644 --- a/static/usage/v6/accordion/customization/theming/react/main_tsx.md +++ b/static/usage/v6/accordion/customization/theming/react/main_tsx.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; import './main.css'; diff --git a/static/usage/v6/accordion/customization/theming/vue.md b/static/usage/v6/accordion/customization/theming/vue.md index cf55542e739..c049c4b89d8 100644 --- a/static/usage/v6/accordion/customization/theming/vue.md +++ b/static/usage/v6/accordion/customization/theming/vue.md @@ -5,62 +5,51 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/disable-group/index.md b/static/usage/v6/accordion/disable-group/index.md index aaad754781f..1c620df74c6 100644 --- a/static/usage/v6/accordion/disable-group/index.md +++ b/static/usage/v6/accordion/disable-group/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/disable/group/index.md b/static/usage/v6/accordion/disable/group/index.md index beb29908e79..43e4daae2ed 100644 --- a/static/usage/v6/accordion/disable/group/index.md +++ b/static/usage/v6/accordion/disable/group/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/disable/individual/index.md b/static/usage/v6/accordion/disable/individual/index.md index 2323a1b3b15..1c866a3d0bc 100644 --- a/static/usage/v6/accordion/disable/individual/index.md +++ b/static/usage/v6/accordion/disable/individual/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/listen-changes/index.md b/static/usage/v6/accordion/listen-changes/index.md index 481f9f47795..4c3b1d9b0e8 100644 --- a/static/usage/v6/accordion/listen-changes/index.md +++ b/static/usage/v6/accordion/listen-changes/index.md @@ -8,8 +8,8 @@ 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/v6/accordion/multiple/index.md b/static/usage/v6/accordion/multiple/index.md index 6a56c3fe4fa..ca3d3552876 100644 --- a/static/usage/v6/accordion/multiple/index.md +++ b/static/usage/v6/accordion/multiple/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/readonly/group/angular.md b/static/usage/v6/accordion/readonly/group/angular.md index 99c084f8064..4ebf8c55e4e 100644 --- a/static/usage/v6/accordion/readonly/group/angular.md +++ b/static/usage/v6/accordion/readonly/group/angular.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/readonly/group/index.md b/static/usage/v6/accordion/readonly/group/index.md index 263e18eb79d..fcfa1291aab 100644 --- a/static/usage/v6/accordion/readonly/group/index.md +++ b/static/usage/v6/accordion/readonly/group/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/readonly/group/javascript.md b/static/usage/v6/accordion/readonly/group/javascript.md index 27f216fb4f9..d511ea5ff0b 100644 --- a/static/usage/v6/accordion/readonly/group/javascript.md +++ b/static/usage/v6/accordion/readonly/group/javascript.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/readonly/group/react.md b/static/usage/v6/accordion/readonly/group/react.md index 5383b732d96..2f26afde9ea 100644 --- a/static/usage/v6/accordion/readonly/group/react.md +++ b/static/usage/v6/accordion/readonly/group/react.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v6/accordion/readonly/group/vue.md b/static/usage/v6/accordion/readonly/group/vue.md index aa6a662a802..0de1be3fe91 100644 --- a/static/usage/v6/accordion/readonly/group/vue.md +++ b/static/usage/v6/accordion/readonly/group/vue.md @@ -5,44 +5,33 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 diff --git a/static/usage/v6/accordion/readonly/individual/angular.md b/static/usage/v6/accordion/readonly/individual/angular.md index 7f9f8f5bb2e..94013b9d07d 100644 --- a/static/usage/v6/accordion/readonly/individual/angular.md +++ b/static/usage/v6/accordion/readonly/individual/angular.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion (Readonly) -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/readonly/individual/index.md b/static/usage/v6/accordion/readonly/individual/index.md index 6a5f0d991f8..6745332c516 100644 --- a/static/usage/v6/accordion/readonly/individual/index.md +++ b/static/usage/v6/accordion/readonly/individual/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/readonly/individual/javascript.md b/static/usage/v6/accordion/readonly/individual/javascript.md index eec083da61a..e1f78d726db 100644 --- a/static/usage/v6/accordion/readonly/individual/javascript.md +++ b/static/usage/v6/accordion/readonly/individual/javascript.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion (Readonly) -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/readonly/individual/react.md b/static/usage/v6/accordion/readonly/individual/react.md index 7e94d274b32..a6d28a427cd 100644 --- a/static/usage/v6/accordion/readonly/individual/react.md +++ b/static/usage/v6/accordion/readonly/individual/react.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v6/accordion/readonly/individual/vue.md b/static/usage/v6/accordion/readonly/individual/vue.md index 2e02ebd3679..b9a5daac451 100644 --- a/static/usage/v6/accordion/readonly/individual/vue.md +++ b/static/usage/v6/accordion/readonly/individual/vue.md @@ -5,44 +5,33 @@ First Accordion -
- First Content -
+
First Content
Second Accordion (Readonly) -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 diff --git a/static/usage/v6/accordion/toggle/index.md b/static/usage/v6/accordion/toggle/index.md index fb5331bf14b..3e60958f8ef 100644 --- a/static/usage/v6/accordion/toggle/index.md +++ b/static/usage/v6/accordion/toggle/index.md @@ -8,8 +8,8 @@ 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/v6/action-sheet/basic/index.md b/static/usage/v6/action-sheet/basic/index.md index 25da44bf4c6..5c64bdf12bf 100644 --- a/static/usage/v6/action-sheet/basic/index.md +++ b/static/usage/v6/action-sheet/basic/index.md @@ -12,8 +12,8 @@ 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/v6/action-sheet/theming/css-properties/index.md b/static/usage/v6/action-sheet/theming/css-properties/index.md index 7d9eebab14a..d45c2ef54b3 100644 --- a/static/usage/v6/action-sheet/theming/css-properties/index.md +++ b/static/usage/v6/action-sheet/theming/css-properties/index.md @@ -12,8 +12,8 @@ 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/v6/action-sheet/theming/styling/index.md b/static/usage/v6/action-sheet/theming/styling/index.md index ef07b833a7c..b7059e637bf 100644 --- a/static/usage/v6/action-sheet/theming/styling/index.md +++ b/static/usage/v6/action-sheet/theming/styling/index.md @@ -12,8 +12,8 @@ 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/v6/alert/buttons/angular/example_component_html.md b/static/usage/v6/alert/buttons/angular/example_component_html.md index 5cddcd596ed..172b041a469 100644 --- a/static/usage/v6/alert/buttons/angular/example_component_html.md +++ b/static/usage/v6/alert/buttons/angular/example_component_html.md @@ -2,4 +2,4 @@ Click Me

{{ handlerMessage }}

{{ roleMessage }}

-``` \ No newline at end of file +``` diff --git a/static/usage/v6/alert/buttons/index.md b/static/usage/v6/alert/buttons/index.md index d0c16fbccaa..acbb428bf17 100644 --- a/static/usage/v6/alert/buttons/index.md +++ b/static/usage/v6/alert/buttons/index.md @@ -8,9 +8,9 @@ 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/v6/alert/buttons/javascript.md b/static/usage/v6/alert/buttons/javascript.md index 9550a72ca43..1de6de7fca4 100644 --- a/static/usage/v6/alert/buttons/javascript.md +++ b/static/usage/v6/alert/buttons/javascript.md @@ -14,13 +14,17 @@ { text: 'Cancel', role: 'cancel', - handler: () => { handlerOutput.innerText = 'Alert canceled'; } + handler: () => { + handlerOutput.innerText = 'Alert canceled'; + }, }, { text: 'OK', role: 'confirm', - handler: () => { handlerOutput.innerText = 'Alert confirmed'; } - } + handler: () => { + handlerOutput.innerText = 'Alert confirmed'; + }, + }, ]; document.body.appendChild(alert); diff --git a/static/usage/v6/alert/customization/angular/global_css.md b/static/usage/v6/alert/customization/angular/global_css.md index c4d1f859c34..c84c1456e58 100644 --- a/static/usage/v6/alert/customization/angular/global_css.md +++ b/static/usage/v6/alert/customization/angular/global_css.md @@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm { } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); } .ios button.alert-button.alert-button-cancel { @@ -30,4 +30,4 @@ button.alert-button.alert-button-confirm { border-bottom-right-radius: 13px; border-top-right-radius: 13px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/alert/customization/index.md b/static/usage/v6/alert/customization/index.md index 4da97de4af4..b2077daa8db 100644 --- a/static/usage/v6/alert/customization/index.md +++ b/static/usage/v6/alert/customization/index.md @@ -11,9 +11,9 @@ 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/v6/alert/customization/javascript.md b/static/usage/v6/alert/customization/javascript.md index f6280b08e3d..f14e68e1d95 100644 --- a/static/usage/v6/alert/customization/javascript.md +++ b/static/usage/v6/alert/customization/javascript.md @@ -9,12 +9,12 @@ alert.buttons = [ { text: 'No', - cssClass: 'alert-button-cancel' + cssClass: 'alert-button-cancel', }, { text: 'Yes', - cssClass: 'alert-button-confirm' - } + cssClass: 'alert-button-confirm', + }, ]; document.body.appendChild(alert); @@ -41,7 +41,7 @@ } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); } .ios button.alert-button.alert-button-cancel { diff --git a/static/usage/v6/alert/customization/react/main_css.md b/static/usage/v6/alert/customization/react/main_css.md index c4d1f859c34..c84c1456e58 100644 --- a/static/usage/v6/alert/customization/react/main_css.md +++ b/static/usage/v6/alert/customization/react/main_css.md @@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm { } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); } .ios button.alert-button.alert-button-cancel { @@ -30,4 +30,4 @@ button.alert-button.alert-button-confirm { border-bottom-right-radius: 13px; border-top-right-radius: 13px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/alert/inputs/radios/angular/example_component_html.md b/static/usage/v6/alert/inputs/radios/angular/example_component_html.md index e484d6c912d..183dd98719d 100644 --- a/static/usage/v6/alert/inputs/radios/angular/example_component_html.md +++ b/static/usage/v6/alert/inputs/radios/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` \ No newline at end of file +``` diff --git a/static/usage/v6/alert/inputs/radios/index.md b/static/usage/v6/alert/inputs/radios/index.md index d92d2862601..4c7a4265cd1 100644 --- a/static/usage/v6/alert/inputs/radios/index.md +++ b/static/usage/v6/alert/inputs/radios/index.md @@ -8,9 +8,9 @@ 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/v6/alert/inputs/radios/javascript.md b/static/usage/v6/alert/inputs/radios/javascript.md index 341bdf8b1eb..2992e1d25c4 100644 --- a/static/usage/v6/alert/inputs/radios/javascript.md +++ b/static/usage/v6/alert/inputs/radios/javascript.md @@ -10,18 +10,18 @@ { label: 'Red', type: 'radio', - value: 'red' + value: 'red', }, { label: 'Blue', type: 'radio', - value: 'blue' + value: 'blue', }, { label: 'Green', type: 'radio', - value: 'green' - } + value: 'green', + }, ]; document.body.appendChild(alert); diff --git a/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md index e484d6c912d..183dd98719d 100644 --- a/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md +++ b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` \ No newline at end of file +``` diff --git a/static/usage/v6/alert/inputs/text-inputs/index.md b/static/usage/v6/alert/inputs/text-inputs/index.md index 1e70ed5db98..2a942543ac1 100644 --- a/static/usage/v6/alert/inputs/text-inputs/index.md +++ b/static/usage/v6/alert/inputs/text-inputs/index.md @@ -8,9 +8,9 @@ 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/v6/alert/inputs/text-inputs/javascript.md b/static/usage/v6/alert/inputs/text-inputs/javascript.md index 84f96bf5f8d..21d36197c4a 100644 --- a/static/usage/v6/alert/inputs/text-inputs/javascript.md +++ b/static/usage/v6/alert/inputs/text-inputs/javascript.md @@ -8,24 +8,24 @@ alert.buttons = ['OK']; alert.inputs = [ { - placeholder: 'Name' + placeholder: 'Name', }, { placeholder: 'Nickname (max 8 characters)', attributes: { - maxlength: 8 - } + maxlength: 8, + }, }, { type: 'number', placeholder: 'Age', min: 1, - max: 100 + max: 100, }, { type: 'textarea', - placeholder: 'A little about yourself' - } + placeholder: 'A little about yourself', + }, ]; document.body.appendChild(alert); diff --git a/static/usage/v6/alert/presenting/controller/angular/example_component_html.md b/static/usage/v6/alert/presenting/controller/angular/example_component_html.md index e484d6c912d..183dd98719d 100644 --- a/static/usage/v6/alert/presenting/controller/angular/example_component_html.md +++ b/static/usage/v6/alert/presenting/controller/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` \ No newline at end of file +``` diff --git a/static/usage/v6/alert/presenting/controller/index.md b/static/usage/v6/alert/presenting/controller/index.md index de4bf3866ef..4828455359c 100644 --- a/static/usage/v6/alert/presenting/controller/index.md +++ b/static/usage/v6/alert/presenting/controller/index.md @@ -8,9 +8,9 @@ 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/v6/avatar/chip/vue.md b/static/usage/v6/avatar/chip/vue.md index 8ded7586040..c872bb48de3 100644 --- a/static/usage/v6/avatar/chip/vue.md +++ b/static/usage/v6/avatar/chip/vue.md @@ -13,7 +13,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar, IonChip, IonLabel } + components: { IonAvatar, IonChip, IonLabel }, }); ``` diff --git a/static/usage/v6/avatar/item/vue.md b/static/usage/v6/avatar/item/vue.md index 315af034426..5a9ddea4499 100644 --- a/static/usage/v6/avatar/item/vue.md +++ b/static/usage/v6/avatar/item/vue.md @@ -13,7 +13,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar, IonItem, IonLabel } + components: { IonAvatar, IonItem, IonLabel }, }); ``` diff --git a/static/usage/v6/avatar/theming/css-properties/index.md b/static/usage/v6/avatar/theming/css-properties/index.md index 4ff0ecd1679..6ff5e75617a 100644 --- a/static/usage/v6/avatar/theming/css-properties/index.md +++ b/static/usage/v6/avatar/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/avatar/theming/css-properties/react/main_tsx.md b/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md index f04d7f8fbe3..180b8998a3f 100644 --- a/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonAvatar } from '@ionic/react'; diff --git a/static/usage/v6/avatar/theming/css-properties/vue.md b/static/usage/v6/avatar/theming/css-properties/vue.md index affb7ccdecb..32237336a1c 100644 --- a/static/usage/v6/avatar/theming/css-properties/vue.md +++ b/static/usage/v6/avatar/theming/css-properties/vue.md @@ -10,7 +10,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar } + components: { IonAvatar }, }); diff --git a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md index 3c39508e72c..b2cda11d2a8 100644 --- a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md +++ b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md @@ -18,7 +18,5 @@ import { Component } from '@angular/core'; `, }) -export class PageTwoComponent { - -} +export class PageTwoComponent {} ``` diff --git a/static/usage/v6/back-button/basic/index.md b/static/usage/v6/back-button/basic/index.md index 6c29748fe6f..30c4b38a256 100644 --- a/static/usage/v6/back-button/basic/index.md +++ b/static/usage/v6/back-button/basic/index.md @@ -17,8 +17,8 @@ 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/v6/back-button/basic/vue/page_two_vue.md b/static/usage/v6/back-button/basic/vue/page_two_vue.md index 1192ca2936c..e26a6f13562 100644 --- a/static/usage/v6/back-button/basic/vue/page_two_vue.md +++ b/static/usage/v6/back-button/basic/vue/page_two_vue.md @@ -18,7 +18,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue'; export default { - components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } + components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar }, }; ``` diff --git a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md index 31f76ac219a..05a1bd64d79 100644 --- a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md +++ b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md @@ -18,7 +18,5 @@ import { Component } from '@angular/core'; `, }) -export class PageTwoComponent { - -} +export class PageTwoComponent {} ``` diff --git a/static/usage/v6/back-button/custom/index.md b/static/usage/v6/back-button/custom/index.md index 30f58541ecb..8bbcc6421f5 100644 --- a/static/usage/v6/back-button/custom/index.md +++ b/static/usage/v6/back-button/custom/index.md @@ -17,8 +17,8 @@ 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/v6/back-button/custom/vue/page_two_vue.md b/static/usage/v6/back-button/custom/vue/page_two_vue.md index 05de62654cb..4667abeced5 100644 --- a/static/usage/v6/back-button/custom/vue/page_two_vue.md +++ b/static/usage/v6/back-button/custom/vue/page_two_vue.md @@ -21,8 +21,8 @@ export default { components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton }, setup() { - return { caretBack } - } + return { caretBack }; + }, }; ``` diff --git a/static/usage/v6/backdrop/basic/index.md b/static/usage/v6/backdrop/basic/index.md index 63ff609c996..c55cd3835bd 100644 --- a/static/usage/v6/backdrop/basic/index.md +++ b/static/usage/v6/backdrop/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/backdrop/styling/index.md b/static/usage/v6/backdrop/styling/index.md index 7d3aad9224c..1c7e7966b8d 100644 --- a/static/usage/v6/backdrop/styling/index.md +++ b/static/usage/v6/backdrop/styling/index.md @@ -11,8 +11,8 @@ 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/v6/badge/theming/colors/index.md b/static/usage/v6/badge/theming/colors/index.md index 47aa8b9e1b4..60599ad223f 100644 --- a/static/usage/v6/badge/theming/colors/index.md +++ b/static/usage/v6/badge/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md b/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md index 950e96b4e80..cf47682b14d 100644 --- a/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md @@ -5,4 +5,4 @@ ion-badge { --padding-end: 20px; --padding-start: 20px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/badge/theming/css-properties/index.md b/static/usage/v6/badge/theming/css-properties/index.md index 711d4f0a38d..e09f2ea5f6a 100644 --- a/static/usage/v6/badge/theming/css-properties/index.md +++ b/static/usage/v6/badge/theming/css-properties/index.md @@ -10,9 +10,9 @@ 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/v6/badge/theming/css-properties/react/main_css.md b/static/usage/v6/badge/theming/css-properties/react/main_css.md index 950e96b4e80..cf47682b14d 100644 --- a/static/usage/v6/badge/theming/css-properties/react/main_css.md +++ b/static/usage/v6/badge/theming/css-properties/react/main_css.md @@ -5,4 +5,4 @@ ion-badge { --padding-end: 20px; --padding-start: 20px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md index 76a545d6a8e..926479c1e85 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md @@ -7,4 +7,4 @@ Film 35 mm -``` \ No newline at end of file +``` diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md index fc5c8a29061..b761f85ed5b 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md @@ -8,8 +8,8 @@ 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/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md index f88b8a6e322..fdd63471ed4 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md @@ -18,14 +18,14 @@ components: { IonBreadcrumb, IonBreadcrumbs }, data() { return { - maxBreadcrumbs: 4 - } + maxBreadcrumbs: 4, + }; }, methods: { expandBreadcrumbs() { this.maxBreadcrumbs = undefined; - } - } + }, + }, }); ``` diff --git a/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md index eccdbd8d512..15ee6fc4407 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md index 284c2a429a4..4a81d113c90 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md index 2c5ee51a9b7..e3c0462a148 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md @@ -22,4 +22,4 @@ -``` \ No newline at end of file +``` diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md index a0b924e8127..8b0a2476b4b 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md @@ -8,9 +8,9 @@ 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/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md index 007fb9a4a1e..1d22085a5b1 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md @@ -18,12 +18,12 @@ const popover = document.querySelector('ion-popover'); const popoverList = document.querySelector('ion-popover ion-list'); - breadcrumbs.addEventListener('ionCollapsedClick', e => { + breadcrumbs.addEventListener('ionCollapsedClick', (e) => { let listHTML = ``; e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => { listHTML += ` ${breadcrumb.textContent} @@ -36,6 +36,6 @@ popover.isOpen = true; }); - popover.addEventListener('didDismiss', () => popover.isOpen = false); + popover.addEventListener('didDismiss', () => (popover.isOpen = false)); ``` diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md index 72cc6520e3c..66ccc22bfe3 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md @@ -27,10 +27,7 @@ function Example() { {collapsedBreadcrumbs.map((breadcrumb, i) => ( - + {breadcrumb.textContent} ))} diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md index 318f64f8547..54368fa7213 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md @@ -24,25 +24,25 @@ -``` \ No newline at end of file +``` diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md index a9305b79feb..b0ca30f0e6f 100644 --- a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md +++ b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md index f836a85455f..f0849705aab 100644 --- a/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md +++ b/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md @@ -29,7 +29,7 @@ components: { IonBreadcrumb, IonBreadcrumbs, IonIcon }, setup() { return { arrowForwardCircle }; - } + }, }); ``` diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md index 0f2e9ac47cc..abcecf2686c 100644 --- a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md +++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/breadcrumbs/theming/colors/index.md b/static/usage/v6/breadcrumbs/theming/colors/index.md index 632b91c2cbb..20151756e82 100644 --- a/static/usage/v6/breadcrumbs/theming/colors/index.md +++ b/static/usage/v6/breadcrumbs/theming/colors/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md b/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md index 338babc9c79..3dc7c4640ad 100644 --- a/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md @@ -4,4 +4,4 @@ ion-breadcrumb { --color-active: rgb(150, 112, 220); --color-hover: rgb(103, 61, 180); } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/index.md b/static/usage/v6/breadcrumbs/theming/css-properties/index.md index 013c1e19024..12021d9925a 100644 --- a/static/usage/v6/breadcrumbs/theming/css-properties/index.md +++ b/static/usage/v6/breadcrumbs/theming/css-properties/index.md @@ -10,8 +10,8 @@ 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/v6/breadcrumbs/theming/css-properties/react/main_css.md b/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md index 338babc9c79..3dc7c4640ad 100644 --- a/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md +++ b/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md @@ -4,4 +4,4 @@ ion-breadcrumb { --color-active: rgb(150, 112, 220); --color-hover: rgb(103, 61, 180); } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/button/basic/angular.md b/static/usage/v6/button/basic/angular.md index 44ba5831426..d313d7dcd23 100644 --- a/static/usage/v6/button/basic/angular.md +++ b/static/usage/v6/button/basic/angular.md @@ -1,4 +1,3 @@ ```html -Default -Disabled +Default Disabled ``` diff --git a/static/usage/v6/button/basic/javascript.md b/static/usage/v6/button/basic/javascript.md index 8296ef7f42a..e298f5a1246 100644 --- a/static/usage/v6/button/basic/javascript.md +++ b/static/usage/v6/button/basic/javascript.md @@ -1,4 +1,3 @@ ```html -Default -Disabled +Default Disabled ``` diff --git a/static/usage/v6/button/expand/angular.md b/static/usage/v6/button/expand/angular.md index ca3f5093b84..b49d2c767ae 100644 --- a/static/usage/v6/button/expand/angular.md +++ b/static/usage/v6/button/expand/angular.md @@ -1,4 +1,3 @@ ```html -Block -Full +Block Full ``` diff --git a/static/usage/v6/button/expand/javascript.md b/static/usage/v6/button/expand/javascript.md index ca3f5093b84..b49d2c767ae 100644 --- a/static/usage/v6/button/expand/javascript.md +++ b/static/usage/v6/button/expand/javascript.md @@ -1,4 +1,3 @@ ```html -Block -Full +Block Full ``` diff --git a/static/usage/v6/button/icons/vue.md b/static/usage/v6/button/icons/vue.md index 356fc5617dc..03d8648c878 100644 --- a/static/usage/v6/button/icons/vue.md +++ b/static/usage/v6/button/icons/vue.md @@ -23,8 +23,8 @@ export default defineComponent({ components: { IonButton, IonIcon }, setup() { - return { star } - } + return { star }; + }, }); ``` diff --git a/static/usage/v6/button/shape/angular.md b/static/usage/v6/button/shape/angular.md index 97ed756261a..a37193d9013 100644 --- a/static/usage/v6/button/shape/angular.md +++ b/static/usage/v6/button/shape/angular.md @@ -1,4 +1,3 @@ ```html -Default -Round +Default Round ``` diff --git a/static/usage/v6/button/shape/javascript.md b/static/usage/v6/button/shape/javascript.md index 97ed756261a..a37193d9013 100644 --- a/static/usage/v6/button/shape/javascript.md +++ b/static/usage/v6/button/shape/javascript.md @@ -1,4 +1,3 @@ ```html -Default -Round +Default Round ``` diff --git a/static/usage/v6/button/theming/css-properties/index.md b/static/usage/v6/button/theming/css-properties/index.md index 06905de166a..6824c741628 100644 --- a/static/usage/v6/button/theming/css-properties/index.md +++ b/static/usage/v6/button/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/button/theming/css-properties/react/main_css.md b/static/usage/v6/button/theming/css-properties/react/main_css.md index 1fba4c49972..fa985cbe82f 100644 --- a/static/usage/v6/button/theming/css-properties/react/main_css.md +++ b/static/usage/v6/button/theming/css-properties/react/main_css.md @@ -1,4 +1,3 @@ - ```css ion-button { --background: #93e9be; diff --git a/static/usage/v6/button/theming/css-properties/react/main_tsx.md b/static/usage/v6/button/theming/css-properties/react/main_tsx.md index 6e0cddd9709..c8c432e1b9c 100644 --- a/static/usage/v6/button/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/button/theming/css-properties/react/main_tsx.md @@ -5,9 +5,7 @@ import { IonButton } from '@ionic/react'; import './main.css'; function Example() { - return ( - Custom Button - ); + return Custom Button; } export default Example; ``` diff --git a/static/usage/v6/buttons/types/angular.md b/static/usage/v6/buttons/types/angular.md index 183c70105b1..9562dbb3b47 100644 --- a/static/usage/v6/buttons/types/angular.md +++ b/static/usage/v6/buttons/types/angular.md @@ -1,15 +1,11 @@ ```html - - Favorite - + Favorite Default Buttons - - Delete - + Delete diff --git a/static/usage/v6/buttons/types/index.md b/static/usage/v6/buttons/types/index.md index f0bee55af1c..39be00f2b41 100644 --- a/static/usage/v6/buttons/types/index.md +++ b/static/usage/v6/buttons/types/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/buttons/types/javascript.md b/static/usage/v6/buttons/types/javascript.md index 183c70105b1..9562dbb3b47 100644 --- a/static/usage/v6/buttons/types/javascript.md +++ b/static/usage/v6/buttons/types/javascript.md @@ -1,15 +1,11 @@ ```html - - Favorite - + Favorite Default Buttons - - Delete - + Delete diff --git a/static/usage/v6/buttons/types/react.md b/static/usage/v6/buttons/types/react.md index 8d3b3edfe9e..01baca04d74 100644 --- a/static/usage/v6/buttons/types/react.md +++ b/static/usage/v6/buttons/types/react.md @@ -8,15 +8,11 @@ function Example() { <> - - Favorite - + Favorite Default Buttons - - Delete - + Delete @@ -86,5 +82,4 @@ function Example() { ); } export default Example; - ``` diff --git a/static/usage/v6/buttons/types/vue.md b/static/usage/v6/buttons/types/vue.md index 9a101caa402..60b04a067da 100644 --- a/static/usage/v6/buttons/types/vue.md +++ b/static/usage/v6/buttons/types/vue.md @@ -2,15 +2,11 @@ diff --git a/static/usage/v6/header/fade/angular.md b/static/usage/v6/header/fade/angular.md index 72e55ffc58c..473ad54c8da 100644 --- a/static/usage/v6/header/fade/angular.md +++ b/static/usage/v6/header/fade/angular.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/fade/index.md b/static/usage/v6/header/fade/index.md index eb5ba017071..db8b8134f1f 100644 --- a/static/usage/v6/header/fade/index.md +++ b/static/usage/v6/header/fade/index.md @@ -6,10 +6,10 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/header/fade/javascript.md b/static/usage/v6/header/fade/javascript.md index 72e55ffc58c..473ad54c8da 100644 --- a/static/usage/v6/header/fade/javascript.md +++ b/static/usage/v6/header/fade/javascript.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/fade/react.md b/static/usage/v6/header/fade/react.md index 453f32c4db4..085bea0296d 100644 --- a/static/usage/v6/header/fade/react.md +++ b/static/usage/v6/header/fade/react.md @@ -14,24 +14,61 @@ function Example() {

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/fade/vue.md b/static/usage/v6/header/fade/vue.md index 44327bf809c..264038c103c 100644 --- a/static/usage/v6/header/fade/vue.md +++ b/static/usage/v6/header/fade/vue.md @@ -9,24 +9,61 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/no-border/index.md b/static/usage/v6/header/no-border/index.md index 3cce680ca39..0e68a8a2f5d 100644 --- a/static/usage/v6/header/no-border/index.md +++ b/static/usage/v6/header/no-border/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/header/translucent/angular.md b/static/usage/v6/header/translucent/angular.md index f2779c7d5c9..657a88bf066 100644 --- a/static/usage/v6/header/translucent/angular.md +++ b/static/usage/v6/header/translucent/angular.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/translucent/index.md b/static/usage/v6/header/translucent/index.md index 5a0054584ca..898ffa17bc8 100644 --- a/static/usage/v6/header/translucent/index.md +++ b/static/usage/v6/header/translucent/index.md @@ -6,10 +6,10 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/header/translucent/javascript.md b/static/usage/v6/header/translucent/javascript.md index e03deeda2a5..5c0048c019c 100644 --- a/static/usage/v6/header/translucent/javascript.md +++ b/static/usage/v6/header/translucent/javascript.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/translucent/react.md b/static/usage/v6/header/translucent/react.md index 862211d839b..def835913c3 100644 --- a/static/usage/v6/header/translucent/react.md +++ b/static/usage/v6/header/translucent/react.md @@ -14,24 +14,61 @@ function Example() {

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/translucent/vue.md b/static/usage/v6/header/translucent/vue.md index 34a4c740014..26370009d44 100644 --- a/static/usage/v6/header/translucent/vue.md +++ b/static/usage/v6/header/translucent/vue.md @@ -9,24 +9,61 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/icon/basic/index.md b/static/usage/v6/icon/basic/index.md index ccb83aec3df..ff2ff032f32 100644 --- a/static/usage/v6/icon/basic/index.md +++ b/static/usage/v6/icon/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/img/basic/angular.md b/static/usage/v6/img/basic/angular.md index fc408402024..5a42aa9f765 100644 --- a/static/usage/v6/img/basic/angular.md +++ b/static/usage/v6/img/basic/angular.md @@ -1,3 +1,6 @@ ```html - + ``` diff --git a/static/usage/v6/img/basic/javascript.md b/static/usage/v6/img/basic/javascript.md index fc408402024..5a42aa9f765 100644 --- a/static/usage/v6/img/basic/javascript.md +++ b/static/usage/v6/img/basic/javascript.md @@ -1,3 +1,6 @@ ```html - + ``` diff --git a/static/usage/v6/img/basic/react.md b/static/usage/v6/img/basic/react.md index 6637dfacef0..a7e9b7d6646 100644 --- a/static/usage/v6/img/basic/react.md +++ b/static/usage/v6/img/basic/react.md @@ -4,7 +4,10 @@ import { IonImg } from '@ionic/react'; function Example() { return ( - + ); } export default Example; diff --git a/static/usage/v6/img/basic/vue.md b/static/usage/v6/img/basic/vue.md index a92ec67a3a5..2e6bdeb2e1a 100644 --- a/static/usage/v6/img/basic/vue.md +++ b/static/usage/v6/img/basic/vue.md @@ -1,6 +1,9 @@ ```html -``` \ No newline at end of file +``` diff --git a/static/usage/v6/input/filtering/react.md b/static/usage/v6/input/filtering/react.md index ae2df1a1cdd..765d1f24ba6 100644 --- a/static/usage/v6/input/filtering/react.md +++ b/static/usage/v6/input/filtering/react.md @@ -3,36 +3,32 @@ import React, { useState, useRef } from 'react'; import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react'; function Example() { - const [inputModel, setInputModel ] = useState(''); + 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,''); - + 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 ( Alphanumeric Characters - + ); diff --git a/static/usage/v6/input/filtering/vue.md b/static/usage/v6/input/filtering/vue.md index bfce3c9c58b..b9ff7e0acdd 100644 --- a/static/usage/v6/input/filtering/vue.md +++ b/static/usage/v6/input/filtering/vue.md @@ -3,11 +3,7 @@ Alphanumeric Characters - + @@ -23,24 +19,24 @@ const inputModel = ref(''); const onInput = (ev) => { const value = ev.target!.value; - + // Removes non alphanumeric characters - const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,''); - + const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, ''); + /** * Update both the state variable and * the component to keep them in sync. */ inputModel.value = filteredValue; - + const inputCmp = ionInputEl.value; if (inputCmp !== undefined) { inputCmp.$el.value = filteredValue; } - } - + }; + return { ionInputEl, inputModel, onInput }; - } + }, }); ``` diff --git a/static/usage/v6/input/theming/colors/index.md b/static/usage/v6/input/theming/colors/index.md index 9f3861e073b..91748fc1bc0 100644 --- a/static/usage/v6/input/theming/colors/index.md +++ b/static/usage/v6/input/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/input/theming/css-properties/angular/example_component_css.md b/static/usage/v6/input/theming/css-properties/angular/example_component_css.md index bede6457325..4885a193f87 100644 --- a/static/usage/v6/input/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/input/theming/css-properties/angular/example_component_css.md @@ -3,7 +3,7 @@ ion-input.custom { --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: .8; + --placeholder-opacity: 0.8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v6/input/theming/css-properties/index.md b/static/usage/v6/input/theming/css-properties/index.md index c67d8ddf1bc..e67cb3e34b0 100644 --- a/static/usage/v6/input/theming/css-properties/index.md +++ b/static/usage/v6/input/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/input/theming/css-properties/javascript.md b/static/usage/v6/input/theming/css-properties/javascript.md index 3b406ede42f..b08b2d704bb 100644 --- a/static/usage/v6/input/theming/css-properties/javascript.md +++ b/static/usage/v6/input/theming/css-properties/javascript.md @@ -6,7 +6,7 @@ --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: .8; + --placeholder-opacity: 0.8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v6/input/theming/css-properties/react/main_css.md b/static/usage/v6/input/theming/css-properties/react/main_css.md index bede6457325..4885a193f87 100644 --- a/static/usage/v6/input/theming/css-properties/react/main_css.md +++ b/static/usage/v6/input/theming/css-properties/react/main_css.md @@ -3,7 +3,7 @@ ion-input.custom { --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: .8; + --placeholder-opacity: 0.8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v6/input/theming/css-properties/react/main_tsx.md b/static/usage/v6/input/theming/css-properties/react/main_tsx.md index e4ec0fb134a..ea550a31e01 100644 --- a/static/usage/v6/input/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/input/theming/css-properties/react/main_tsx.md @@ -5,9 +5,7 @@ import { IonInput } from '@ionic/react'; import './main.css'; function Example() { - return ( - - ); + return ; } export default Example; ``` diff --git a/static/usage/v6/input/theming/css-properties/vue.md b/static/usage/v6/input/theming/css-properties/vue.md index 6d5d5fa41cc..574846aa285 100644 --- a/static/usage/v6/input/theming/css-properties/vue.md +++ b/static/usage/v6/input/theming/css-properties/vue.md @@ -17,7 +17,7 @@ --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: .8; + --placeholder-opacity: 0.8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v6/item-divider/basic/angular.md b/static/usage/v6/item-divider/basic/angular.md index d74e5b05549..35dccbdbc88 100644 --- a/static/usage/v6/item-divider/basic/angular.md +++ b/static/usage/v6/item-divider/basic/angular.md @@ -2,9 +2,7 @@ - - Section A - + Section A @@ -20,9 +18,7 @@ - - Section B - + Section B diff --git a/static/usage/v6/item-divider/basic/index.md b/static/usage/v6/item-divider/basic/index.md index c50ecfe1199..26348706e09 100644 --- a/static/usage/v6/item-divider/basic/index.md +++ b/static/usage/v6/item-divider/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item-divider/basic/javascript.md b/static/usage/v6/item-divider/basic/javascript.md index d74e5b05549..35dccbdbc88 100644 --- a/static/usage/v6/item-divider/basic/javascript.md +++ b/static/usage/v6/item-divider/basic/javascript.md @@ -2,9 +2,7 @@ - - Section A - + Section A @@ -20,9 +18,7 @@ - - Section B - + Section B diff --git a/static/usage/v6/item-divider/basic/react.md b/static/usage/v6/item-divider/basic/react.md index 289f1727c8d..14ad85b1c82 100644 --- a/static/usage/v6/item-divider/basic/react.md +++ b/static/usage/v6/item-divider/basic/react.md @@ -7,9 +7,7 @@ function Example() { - - Section A - + Section A @@ -25,9 +23,7 @@ function Example() { - - Section B - + Section B diff --git a/static/usage/v6/item-divider/basic/vue.md b/static/usage/v6/item-divider/basic/vue.md index 95f26ebc027..22c9565c278 100644 --- a/static/usage/v6/item-divider/basic/vue.md +++ b/static/usage/v6/item-divider/basic/vue.md @@ -3,9 +3,7 @@ - - Section A - + Section A @@ -21,9 +19,7 @@ - - Section B - + Section B diff --git a/static/usage/v6/item-divider/theming/colors/index.md b/static/usage/v6/item-divider/theming/colors/index.md index 912ef18df03..df84e718112 100644 --- a/static/usage/v6/item-divider/theming/colors/index.md +++ b/static/usage/v6/item-divider/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md index b3b1bb4da25..172fdad114f 100644 --- a/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md @@ -1,7 +1,5 @@ ```html - - Item Divider - + Item Divider ``` diff --git a/static/usage/v6/item-divider/theming/css-properties/index.md b/static/usage/v6/item-divider/theming/css-properties/index.md index 499d29749cc..dc9ad7ee551 100644 --- a/static/usage/v6/item-divider/theming/css-properties/index.md +++ b/static/usage/v6/item-divider/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/item-divider/theming/css-properties/javascript.md b/static/usage/v6/item-divider/theming/css-properties/javascript.md index 6622b6d7e3f..0c0cdc26f55 100644 --- a/static/usage/v6/item-divider/theming/css-properties/javascript.md +++ b/static/usage/v6/item-divider/theming/css-properties/javascript.md @@ -12,8 +12,6 @@ - - Item Divider - + Item Divider ``` diff --git a/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md index 6cd8d464d7e..b3083033541 100644 --- a/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonItemDivider, IonLabel } from '@ionic/react'; @@ -8,9 +7,7 @@ import './main.css'; function Example() { return ( - - Item Divider - + Item Divider ); } diff --git a/static/usage/v6/item-divider/theming/css-properties/vue.md b/static/usage/v6/item-divider/theming/css-properties/vue.md index 3589bcc7cd4..950e3775d83 100644 --- a/static/usage/v6/item-divider/theming/css-properties/vue.md +++ b/static/usage/v6/item-divider/theming/css-properties/vue.md @@ -1,9 +1,7 @@ ```html @@ -12,7 +10,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonItemDivider } + components: { IonItemDivider }, }); diff --git a/static/usage/v6/item-group/basic/index.md b/static/usage/v6/item-group/basic/index.md index d8486d97536..0325543f197 100644 --- a/static/usage/v6/item-group/basic/index.md +++ b/static/usage/v6/item-group/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item-group/sliding-items/angular.md b/static/usage/v6/item-group/sliding-items/angular.md index a451b58c9c4..2708fde7acc 100644 --- a/static/usage/v6/item-group/sliding-items/angular.md +++ b/static/usage/v6/item-group/sliding-items/angular.md @@ -1,94 +1,66 @@ ```html - - Fruits - + Fruits - - Grapes - + Grapes - - Favorite - + Favorite - - Apples - + Apples - - Favorite - + Favorite - - Bananas - + Bananas - - Favorite - + Favorite - - Vegetables - + Vegetables - - Carrots - + Carrots - - Favorite - + Favorite - - Broccoli - + Broccoli - - Favorite - + Favorite - - Celery - + Celery - - Favorite - + Favorite diff --git a/static/usage/v6/item-group/sliding-items/index.md b/static/usage/v6/item-group/sliding-items/index.md index c5d90b9bc8a..4e89ac96480 100644 --- a/static/usage/v6/item-group/sliding-items/index.md +++ b/static/usage/v6/item-group/sliding-items/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item-group/sliding-items/javascript.md b/static/usage/v6/item-group/sliding-items/javascript.md index a451b58c9c4..2708fde7acc 100644 --- a/static/usage/v6/item-group/sliding-items/javascript.md +++ b/static/usage/v6/item-group/sliding-items/javascript.md @@ -1,94 +1,66 @@ ```html - - Fruits - + Fruits - - Grapes - + Grapes - - Favorite - + Favorite - - Apples - + Apples - - Favorite - + Favorite - - Bananas - + Bananas - - Favorite - + Favorite - - Vegetables - + Vegetables - - Carrots - + Carrots - - Favorite - + Favorite - - Broccoli - + Broccoli - - Favorite - + Favorite - - Celery - + Celery - - Favorite - + Favorite diff --git a/static/usage/v6/item-group/sliding-items/react.md b/static/usage/v6/item-group/sliding-items/react.md index 2ca4d7ca380..716935f065c 100644 --- a/static/usage/v6/item-group/sliding-items/react.md +++ b/static/usage/v6/item-group/sliding-items/react.md @@ -1,100 +1,80 @@ ```tsx import React from 'react'; -import { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react'; +import { + IonItem, + IonItemDivider, + IonItemGroup, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, +} from '@ionic/react'; function Example() { return ( <> - - Fruits - + Fruits - - Grapes - + Grapes - - Favorite - + Favorite - - Apples - + Apples - - Favorite - + Favorite - - Bananas - + Bananas - - Favorite - + Favorite - - Vegetables - + Vegetables - - Carrots - + Carrots - - Favorite - + Favorite - - Broccoli - + Broccoli - - Favorite - + Favorite - - Celery - + Celery - - Favorite - + Favorite diff --git a/static/usage/v6/item-group/sliding-items/vue.md b/static/usage/v6/item-group/sliding-items/vue.md index 5110ba1abed..43109034598 100644 --- a/static/usage/v6/item-group/sliding-items/vue.md +++ b/static/usage/v6/item-group/sliding-items/vue.md @@ -2,101 +2,81 @@ ``` diff --git a/static/usage/v6/item/basic/angular.md b/static/usage/v6/item/basic/angular.md index f0b13250493..b975f267d90 100644 --- a/static/usage/v6/item/basic/angular.md +++ b/static/usage/v6/item/basic/angular.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v6/item/basic/javascript.md b/static/usage/v6/item/basic/javascript.md index f0b13250493..b975f267d90 100644 --- a/static/usage/v6/item/basic/javascript.md +++ b/static/usage/v6/item/basic/javascript.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v6/item/basic/react.md b/static/usage/v6/item/basic/react.md index dfed86af19e..6154239cbf1 100644 --- a/static/usage/v6/item/basic/react.md +++ b/static/usage/v6/item/basic/react.md @@ -11,16 +11,14 @@ function Example() { - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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, + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v6/item/basic/vue.md b/static/usage/v6/item/basic/vue.md index 479e90196a4..37b32f7c2ca 100644 --- a/static/usage/v6/item/basic/vue.md +++ b/static/usage/v6/item/basic/vue.md @@ -6,17 +6,15 @@ - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v6/item/buttons/angular.md b/static/usage/v6/item/buttons/angular.md index bf7069f48f7..4d77ff8b9d8 100644 --- a/static/usage/v6/item/buttons/angular.md +++ b/static/usage/v6/item/buttons/angular.md @@ -1,12 +1,8 @@ ```html - - Start - + Start Default Buttons - - End - + End @@ -33,14 +29,8 @@ Button Sizes - - Small - - - Default - - - Large - + Small + Default + Large ``` diff --git a/static/usage/v6/item/buttons/javascript.md b/static/usage/v6/item/buttons/javascript.md index bf7069f48f7..4d77ff8b9d8 100644 --- a/static/usage/v6/item/buttons/javascript.md +++ b/static/usage/v6/item/buttons/javascript.md @@ -1,12 +1,8 @@ ```html - - Start - + Start Default Buttons - - End - + End @@ -33,14 +29,8 @@ Button Sizes - - Small - - - Default - - - Large - + Small + Default + Large ``` diff --git a/static/usage/v6/item/buttons/react.md b/static/usage/v6/item/buttons/react.md index 8776e5215fb..fda29c7f11a 100644 --- a/static/usage/v6/item/buttons/react.md +++ b/static/usage/v6/item/buttons/react.md @@ -7,13 +7,9 @@ function Example() { return ( <> - - Start - + Start Default Buttons - - End - + End diff --git a/static/usage/v6/item/buttons/vue.md b/static/usage/v6/item/buttons/vue.md index 02de38e58ab..8680f189472 100644 --- a/static/usage/v6/item/buttons/vue.md +++ b/static/usage/v6/item/buttons/vue.md @@ -1,13 +1,9 @@ ```html @@ -54,8 +44,8 @@ export default defineComponent({ components: { IonButton, IonIcon, IonItem, IonLabel }, setup() { - return { home, navigate, star } - } + return { home, navigate, star }; + }, }); ``` diff --git a/static/usage/v6/item/counter/index.md b/static/usage/v6/item/counter/index.md index b06fb2ecf1a..abdebf2a9e2 100644 --- a/static/usage/v6/item/counter/index.md +++ b/static/usage/v6/item/counter/index.md @@ -8,8 +8,8 @@ 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/v6/item/counter/react.md b/static/usage/v6/item/counter/react.md index 435701d5b53..3d986aaf37e 100644 --- a/static/usage/v6/item/counter/react.md +++ b/static/usage/v6/item/counter/react.md @@ -10,7 +10,10 @@ function Example() { - `${maxLength - inputLength} characters remaining`}> + `${maxLength - inputLength} characters remaining`} + > Custom Counter Format diff --git a/static/usage/v6/item/counter/vue.md b/static/usage/v6/item/counter/vue.md index 3a97d40743a..84bf7ec643d 100644 --- a/static/usage/v6/item/counter/vue.md +++ b/static/usage/v6/item/counter/vue.md @@ -20,8 +20,8 @@ methods: { customFormatter(inputLength, maxLength) { return `${maxLength - inputLength} characters remaining`; - } - } + }, + }, }); ``` diff --git a/static/usage/v6/item/detail-arrows/index.md b/static/usage/v6/item/detail-arrows/index.md index 7ef7323e95e..5b361393b0b 100644 --- a/static/usage/v6/item/detail-arrows/index.md +++ b/static/usage/v6/item/detail-arrows/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item/detail-arrows/vue.md b/static/usage/v6/item/detail-arrows/vue.md index d341c004f15..54010095652 100644 --- a/static/usage/v6/item/detail-arrows/vue.md +++ b/static/usage/v6/item/detail-arrows/vue.md @@ -51,3 +51,4 @@ }, }); +``` diff --git a/static/usage/v6/item/helper-error/index.md b/static/usage/v6/item/helper-error/index.md index 021ea8858cf..449479b7d81 100644 --- a/static/usage/v6/item/helper-error/index.md +++ b/static/usage/v6/item/helper-error/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item/helper-error/javascript.md b/static/usage/v6/item/helper-error/javascript.md index eb0d43327d9..6d0772af984 100644 --- a/static/usage/v6/item/helper-error/javascript.md +++ b/static/usage/v6/item/helper-error/javascript.md @@ -14,7 +14,9 @@ input.addEventListener('ionBlur', () => markTouched()); const validateEmail = (email) => { - 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])?)*$/); + 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) => { @@ -23,13 +25,13 @@ item.classList.remove('ion-valid'); item.classList.remove('ion-invalid'); - if (value === "") return; + if (value === '') return; validateEmail(value) ? item.classList.add('ion-valid') : item.classList.add('ion-invalid'); - } + }; const markTouched = () => { item.classList.add('ion-touched'); - } + }; ``` diff --git a/static/usage/v6/item/helper-error/react.md b/static/usage/v6/item/helper-error/react.md index a1e0e1e1b25..84437995c01 100644 --- a/static/usage/v6/item/helper-error/react.md +++ b/static/usage/v6/item/helper-error/react.md @@ -27,7 +27,10 @@ function Example() { }; return ( - + Email validate(event)} onIonBlur={() => markTouched()}> Enter a valid email diff --git a/static/usage/v6/item/helper-error/vue.md b/static/usage/v6/item/helper-error/vue.md index 0febb45cfe4..04ed67af38e 100644 --- a/static/usage/v6/item/helper-error/vue.md +++ b/static/usage/v6/item/helper-error/vue.md @@ -16,7 +16,9 @@ components: { IonInput, IonItem, IonLabel, IonNote }, methods: { validateEmail(email) { - 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])?)*$/); + 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])?)*$/ + ); }, validate(ev) { @@ -33,8 +35,8 @@ }, markTouched() { - this.$refs.item.$el.classList.add('ion-touched') - } + this.$refs.item.$el.classList.add('ion-touched'); + }, }, }); diff --git a/static/usage/v6/item/icons/angular.md b/static/usage/v6/item/icons/angular.md index 49a1cc707e3..b81a463e004 100644 --- a/static/usage/v6/item/icons/angular.md +++ b/static/usage/v6/item/icons/angular.md @@ -1,29 +1,21 @@ ```html - - Default Icon - + Default Icon - - Large Icon - + Large Icon - - Small Icon - + Small Icon - - Default Icon - + Default Icon ``` diff --git a/static/usage/v6/item/icons/javascript.md b/static/usage/v6/item/icons/javascript.md index 49a1cc707e3..b81a463e004 100644 --- a/static/usage/v6/item/icons/javascript.md +++ b/static/usage/v6/item/icons/javascript.md @@ -1,29 +1,21 @@ ```html - - Default Icon - + Default Icon - - Large Icon - + Large Icon - - Small Icon - + Small Icon - - Default Icon - + Default Icon ``` diff --git a/static/usage/v6/item/icons/react.md b/static/usage/v6/item/icons/react.md index a5fc0ae6629..09496398f7f 100644 --- a/static/usage/v6/item/icons/react.md +++ b/static/usage/v6/item/icons/react.md @@ -7,31 +7,23 @@ function Example() { return ( <> - - Default Icon - + Default Icon - - Large Icon - + Large Icon - - Small Icon - + Small Icon - - Default Icon - + Default Icon ); diff --git a/static/usage/v6/item/icons/vue.md b/static/usage/v6/item/icons/vue.md index 82e09004fbe..a89e5e6aad0 100644 --- a/static/usage/v6/item/icons/vue.md +++ b/static/usage/v6/item/icons/vue.md @@ -1,31 +1,23 @@ ```html @@ -37,8 +29,8 @@ export default defineComponent({ components: { IonButton, IonIcon, IonItem, IonLabel }, setup() { - return { informationCircle, star } - } + return { informationCircle, star }; + }, }); ``` diff --git a/static/usage/v6/item/inputs/react.md b/static/usage/v6/item/inputs/react.md index 0cb6523f053..d1ef33c8b27 100644 --- a/static/usage/v6/item/inputs/react.md +++ b/static/usage/v6/item/inputs/react.md @@ -1,6 +1,15 @@ ```tsx import React from 'react'; -import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react'; +import { + IonCheckbox, + IonInput, + IonItem, + IonLabel, + IonRange, + IonSelect, + IonSelectOption, + IonToggle, +} from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v6/item/inputs/vue.md b/static/usage/v6/item/inputs/vue.md index 7dc085a7a4d..11f20443f99 100644 --- a/static/usage/v6/item/inputs/vue.md +++ b/static/usage/v6/item/inputs/vue.md @@ -60,7 +60,16 @@ ``` diff --git a/static/usage/v6/item/media/angular.md b/static/usage/v6/item/media/angular.md index 915969f127e..c51ab29463a 100644 --- a/static/usage/v6/item/media/angular.md +++ b/static/usage/v6/item/media/angular.md @@ -3,17 +3,13 @@ Silhouette of a person's head - - Avatar Item - + Avatar Item Silhouette of mountains - - Thumbnail Item - + Thumbnail Item ``` diff --git a/static/usage/v6/item/media/javascript.md b/static/usage/v6/item/media/javascript.md index 915969f127e..c51ab29463a 100644 --- a/static/usage/v6/item/media/javascript.md +++ b/static/usage/v6/item/media/javascript.md @@ -3,17 +3,13 @@ Silhouette of a person's head - - Avatar Item - + Avatar Item Silhouette of mountains - - Thumbnail Item - + Thumbnail Item ``` diff --git a/static/usage/v6/item/media/react.md b/static/usage/v6/item/media/react.md index 21ba7c98f65..dae8042c9ae 100644 --- a/static/usage/v6/item/media/react.md +++ b/static/usage/v6/item/media/react.md @@ -9,18 +9,14 @@ function Example() { Silhouette of a person's head - - Avatar Item - + Avatar Item Silhouette of mountains - - Thumbnail Item - + Thumbnail Item ); diff --git a/static/usage/v6/item/media/vue.md b/static/usage/v6/item/media/vue.md index 72dd55ef587..38b16a91fb3 100644 --- a/static/usage/v6/item/media/vue.md +++ b/static/usage/v6/item/media/vue.md @@ -4,18 +4,14 @@ Silhouette of a person's head - - Avatar Item - + Avatar Item Silhouette of mountains - - Thumbnail Item - + Thumbnail Item diff --git a/static/usage/v6/item/theming/colors/index.md b/static/usage/v6/item/theming/colors/index.md index c646ae03dbe..d9be998f8a5 100644 --- a/static/usage/v6/item/theming/colors/index.md +++ b/static/usage/v6/item/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item/theming/css-properties/index.md b/static/usage/v6/item/theming/css-properties/index.md index 5db040f5834..f8aa0c040c6 100644 --- a/static/usage/v6/item/theming/css-properties/index.md +++ b/static/usage/v6/item/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/item/theming/css-shadow-parts/index.md b/static/usage/v6/item/theming/css-shadow-parts/index.md index a0f2c064b09..dfd53961ac8 100644 --- a/static/usage/v6/item/theming/css-shadow-parts/index.md +++ b/static/usage/v6/item/theming/css-shadow-parts/index.md @@ -11,8 +11,8 @@ 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/v6/item/theming/input-highlight/index.md b/static/usage/v6/item/theming/input-highlight/index.md index e74a8267a28..4efce5d53db 100644 --- a/static/usage/v6/item/theming/input-highlight/index.md +++ b/static/usage/v6/item/theming/input-highlight/index.md @@ -11,8 +11,8 @@ 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/v6/label/item/angular.md b/static/usage/v6/label/item/angular.md index be252b899a0..54f24979079 100644 --- a/static/usage/v6/label/item/angular.md +++ b/static/usage/v6/label/item/angular.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v6/label/item/javascript.md b/static/usage/v6/label/item/javascript.md index be252b899a0..54f24979079 100644 --- a/static/usage/v6/label/item/javascript.md +++ b/static/usage/v6/label/item/javascript.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v6/label/item/react.md b/static/usage/v6/label/item/react.md index 88e4f904deb..f5bdf5a5d1b 100644 --- a/static/usage/v6/label/item/react.md +++ b/static/usage/v6/label/item/react.md @@ -11,16 +11,14 @@ function Example() { - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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, + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v6/label/item/vue.md b/static/usage/v6/label/item/vue.md index 99ec3ea3d40..fe4cd48904a 100644 --- a/static/usage/v6/label/item/vue.md +++ b/static/usage/v6/label/item/vue.md @@ -6,17 +6,15 @@ - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v6/list-header/basic/index.md b/static/usage/v6/list-header/basic/index.md index 78b84e21387..a32f3c30684 100644 --- a/static/usage/v6/list-header/basic/index.md +++ b/static/usage/v6/list-header/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/list-header/buttons/index.md b/static/usage/v6/list-header/buttons/index.md index 368b68089d1..0f66d21fc23 100644 --- a/static/usage/v6/list-header/buttons/index.md +++ b/static/usage/v6/list-header/buttons/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/list-header/lines/index.md b/static/usage/v6/list-header/lines/index.md index 53f77fb4ff3..80b2a2528f1 100644 --- a/static/usage/v6/list-header/lines/index.md +++ b/static/usage/v6/list-header/lines/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/list-header/theming/colors/index.md b/static/usage/v6/list-header/theming/colors/index.md index 828041239f3..519a294b6a2 100644 --- a/static/usage/v6/list-header/theming/colors/index.md +++ b/static/usage/v6/list-header/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/list-header/theming/css-properties/index.md b/static/usage/v6/list-header/theming/css-properties/index.md index 0a63f448d35..0c7710252f8 100644 --- a/static/usage/v6/list-header/theming/css-properties/index.md +++ b/static/usage/v6/list-header/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/loading/controller/index.md b/static/usage/v6/loading/controller/index.md index 43c62e88258..d51f525dcbf 100644 --- a/static/usage/v6/loading/controller/index.md +++ b/static/usage/v6/loading/controller/index.md @@ -8,8 +8,8 @@ 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/v6/loading/controller/javascript.md b/static/usage/v6/loading/controller/javascript.md index c5507d123af..f54756c396b 100644 --- a/static/usage/v6/loading/controller/javascript.md +++ b/static/usage/v6/loading/controller/javascript.md @@ -2,13 +2,13 @@ Show Loading ``` diff --git a/static/usage/v6/loading/controller/react.md b/static/usage/v6/loading/controller/react.md index 16280a1e91a..06dc3413bab 100644 --- a/static/usage/v6/loading/controller/react.md +++ b/static/usage/v6/loading/controller/react.md @@ -2,7 +2,6 @@ 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 @@ -11,12 +10,14 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Dismissing after 3 seconds...', - duration: 3000 - }) - }}> + { + present({ + message: 'Dismissing after 3 seconds...', + duration: 3000, + }); + }} + > Show Loading ); diff --git a/static/usage/v6/loading/controller/vue.md b/static/usage/v6/loading/controller/vue.md index 17b65b33af0..e80b61cc8b3 100644 --- a/static/usage/v6/loading/controller/vue.md +++ b/static/usage/v6/loading/controller/vue.md @@ -13,14 +13,14 @@ const showLoading = async () => { const loading = await loadingController.create({ message: 'Dismissing after 3 seconds...', - duration: 3000 + duration: 3000, }); - + loading.present(); - } - - return { showLoading } - } + }; + + return { showLoading }; + }, }); ``` diff --git a/static/usage/v6/loading/spinners/index.md b/static/usage/v6/loading/spinners/index.md index e29eca69331..4369f2b0664 100644 --- a/static/usage/v6/loading/spinners/index.md +++ b/static/usage/v6/loading/spinners/index.md @@ -8,8 +8,8 @@ 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/v6/loading/spinners/javascript.md b/static/usage/v6/loading/spinners/javascript.md index 09712e70a92..b16d6a849f0 100644 --- a/static/usage/v6/loading/spinners/javascript.md +++ b/static/usage/v6/loading/spinners/javascript.md @@ -2,14 +2,14 @@ Show Loading ``` diff --git a/static/usage/v6/loading/spinners/react.md b/static/usage/v6/loading/spinners/react.md index e2c492f1431..e90cbb4e555 100644 --- a/static/usage/v6/loading/spinners/react.md +++ b/static/usage/v6/loading/spinners/react.md @@ -2,7 +2,6 @@ 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 @@ -11,13 +10,15 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Loading...', - duration: 3000, - spinner: 'circles' - }) - }}> + { + present({ + message: 'Loading...', + duration: 3000, + spinner: 'circles', + }); + }} + > Show Loading ); diff --git a/static/usage/v6/loading/spinners/vue.md b/static/usage/v6/loading/spinners/vue.md index 4d01e7fc869..77719a4a704 100644 --- a/static/usage/v6/loading/spinners/vue.md +++ b/static/usage/v6/loading/spinners/vue.md @@ -14,14 +14,14 @@ const loading = await loadingController.create({ message: 'Loading...', duration: 3000, - spinner: 'circles' + spinner: 'circles', }); - + loading.present(); - } - - return { showLoading } - } + }; + + return { showLoading }; + }, }); ``` diff --git a/static/usage/v6/loading/theming/angular/global_css.md b/static/usage/v6/loading/theming/angular/global_css.md index 16bf7af3522..af410626c52 100644 --- a/static/usage/v6/loading/theming/angular/global_css.md +++ b/static/usage/v6/loading/theming/angular/global_css.md @@ -5,4 +5,4 @@ ion-loading.custom-loading { color: #1c6dff; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/loading/theming/index.md b/static/usage/v6/loading/theming/index.md index 61dc8c20be3..892443db6c4 100644 --- a/static/usage/v6/loading/theming/index.md +++ b/static/usage/v6/loading/theming/index.md @@ -12,8 +12,8 @@ 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/v6/loading/theming/javascript.md b/static/usage/v6/loading/theming/javascript.md index 68e0943cd3d..5c0258d1f9a 100644 --- a/static/usage/v6/loading/theming/javascript.md +++ b/static/usage/v6/loading/theming/javascript.md @@ -2,23 +2,23 @@ Show Loading ``` diff --git a/static/usage/v6/loading/theming/react.md b/static/usage/v6/loading/theming/react.md index e2c492f1431..e90cbb4e555 100644 --- a/static/usage/v6/loading/theming/react.md +++ b/static/usage/v6/loading/theming/react.md @@ -2,7 +2,6 @@ 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 @@ -11,13 +10,15 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Loading...', - duration: 3000, - spinner: 'circles' - }) - }}> + { + present({ + message: 'Loading...', + duration: 3000, + spinner: 'circles', + }); + }} + > Show Loading ); diff --git a/static/usage/v6/loading/theming/react/main_css.md b/static/usage/v6/loading/theming/react/main_css.md index 16bf7af3522..af410626c52 100644 --- a/static/usage/v6/loading/theming/react/main_css.md +++ b/static/usage/v6/loading/theming/react/main_css.md @@ -5,4 +5,4 @@ ion-loading.custom-loading { color: #1c6dff; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/loading/theming/react/main_tsx.md b/static/usage/v6/loading/theming/react/main_tsx.md index cc57cc1dce8..b92952e42b6 100644 --- a/static/usage/v6/loading/theming/react/main_tsx.md +++ b/static/usage/v6/loading/theming/react/main_tsx.md @@ -5,7 +5,6 @@ import { IonButton, useIonLoading } from '@ionic/react'; import './main.css'; function Example() { - /** * This example does not make use of the dismiss * method returned from `useIonLoading`, but it can @@ -14,13 +13,15 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Loading...', - duration: 3000, - cssClass: 'custom-loading' - }) - }}> + { + present({ + message: 'Loading...', + duration: 3000, + cssClass: 'custom-loading', + }); + }} + > Show Loading ); diff --git a/static/usage/v6/loading/theming/vue.md b/static/usage/v6/loading/theming/vue.md index 6f380da3f1f..5387b241463 100644 --- a/static/usage/v6/loading/theming/vue.md +++ b/static/usage/v6/loading/theming/vue.md @@ -14,14 +14,14 @@ const loading = await loadingController.create({ message: 'Loading...', duration: 3000, - cssClass: 'custom-loading' + cssClass: 'custom-loading', }); - + loading.present(); - } - - return { showLoading } - } + }; + + return { showLoading }; + }, }); ``` diff --git a/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md b/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md index 4b1b527952e..62d396e75aa 100644 --- a/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md @@ -5,9 +5,7 @@ import { IonSearchbar } from '@ionic/react'; import './main.css'; function Example() { - return ( - - ); + return ; } export default Example; ``` diff --git a/static/usage/v6/segment-button/layout/index.md b/static/usage/v6/segment-button/layout/index.md index 5ddcc6a17b8..597828749ce 100644 --- a/static/usage/v6/segment-button/layout/index.md +++ b/static/usage/v6/segment-button/layout/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/segment-button/layout/vue.md b/static/usage/v6/segment-button/layout/vue.md index d3c60a4004d..71a039bd211 100644 --- a/static/usage/v6/segment-button/layout/vue.md +++ b/static/usage/v6/segment-button/layout/vue.md @@ -82,7 +82,7 @@ components: { IonIcon, IonLabel, IonSegment, IonSegmentButton }, setup() { return { call, heart, pin }; - } + }, }); ``` diff --git a/static/usage/v6/segment-button/theming/css-properties/index.md b/static/usage/v6/segment-button/theming/css-properties/index.md index 3bfdd96bb1d..8bfa431d1c3 100644 --- a/static/usage/v6/segment-button/theming/css-properties/index.md +++ b/static/usage/v6/segment-button/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/segment-button/theming/css-shadow-parts/index.md b/static/usage/v6/segment-button/theming/css-shadow-parts/index.md index 7008dbc3c4c..ca040ebead9 100644 --- a/static/usage/v6/segment-button/theming/css-shadow-parts/index.md +++ b/static/usage/v6/segment-button/theming/css-shadow-parts/index.md @@ -11,8 +11,8 @@ 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/v6/segment/scrollable/index.md b/static/usage/v6/segment/scrollable/index.md index de206ca652a..83fdee16620 100644 --- a/static/usage/v6/segment/scrollable/index.md +++ b/static/usage/v6/segment/scrollable/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/segment/scrollable/vue.md b/static/usage/v6/segment/scrollable/vue.md index c3afaf67ba2..160fab75489 100644 --- a/static/usage/v6/segment/scrollable/vue.md +++ b/static/usage/v6/segment/scrollable/vue.md @@ -43,9 +43,18 @@ components: { IonIcon, IonSegment, IonSegmentButton }, setup() { return { - home, heart, pin, star, call, globe, basket, barbell, trash, person - } - } + home, + heart, + pin, + star, + call, + globe, + basket, + barbell, + trash, + person, + }; + }, }); ``` diff --git a/static/usage/v6/segment/theming/colors/index.md b/static/usage/v6/segment/theming/colors/index.md index 1896c85f8f3..4b54191ef52 100644 --- a/static/usage/v6/segment/theming/colors/index.md +++ b/static/usage/v6/segment/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/segment/theming/css-properties/index.md b/static/usage/v6/segment/theming/css-properties/index.md index f8dfa374ba9..fcafef44686 100644 --- a/static/usage/v6/segment/theming/css-properties/index.md +++ b/static/usage/v6/segment/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/select/basic/multiple-selection/index.md b/static/usage/v6/select/basic/multiple-selection/index.md index 57f3380c18f..0426c613225 100644 --- a/static/usage/v6/select/basic/multiple-selection/index.md +++ b/static/usage/v6/select/basic/multiple-selection/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md index de30bdc02d0..84f81cf5ecf 100644 --- a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md +++ b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md @@ -16,4 +16,4 @@

{{ log }}

-``` \ No newline at end of file +``` diff --git a/static/usage/v6/select/basic/responding-to-interaction/index.md b/static/usage/v6/select/basic/responding-to-interaction/index.md index 1e43625767a..3e95a4d3ac3 100644 --- a/static/usage/v6/select/basic/responding-to-interaction/index.md +++ b/static/usage/v6/select/basic/responding-to-interaction/index.md @@ -8,9 +8,9 @@ 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/v6/select/basic/responding-to-interaction/javascript.md b/static/usage/v6/select/basic/responding-to-interaction/javascript.md index 78ba1244101..a553e0b899b 100644 --- a/static/usage/v6/select/basic/responding-to-interaction/javascript.md +++ b/static/usage/v6/select/basic/responding-to-interaction/javascript.md @@ -14,7 +14,7 @@ const select = document.querySelector('ion-select'); const log = document.querySelector('#log'); - select.addEventListener('ionChange', e => { + select.addEventListener('ionChange', (e) => { log.insertAdjacentHTML('afterbegin', `

ionChange fired with value: ${e.detail.value}

`); }); diff --git a/static/usage/v6/select/basic/responding-to-interaction/vue.md b/static/usage/v6/select/basic/responding-to-interaction/vue.md index e8d2880e45e..7e62f53b0d4 100644 --- a/static/usage/v6/select/basic/responding-to-interaction/vue.md +++ b/static/usage/v6/select/basic/responding-to-interaction/vue.md @@ -27,14 +27,14 @@ components: { IonItem, IonList, IonSelect, IonSelectOption }, data() { return { - logs: [] - } + logs: [], + }; }, methods: { pushLog(msg) { this.logs.unshift(msg); - } - } + }, + }, }); ``` diff --git a/static/usage/v6/select/basic/single-selection/index.md b/static/usage/v6/select/basic/single-selection/index.md index b697188b540..8c5e56d680a 100644 --- a/static/usage/v6/select/basic/single-selection/index.md +++ b/static/usage/v6/select/basic/single-selection/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/select/customization/button-text/index.md b/static/usage/v6/select/customization/button-text/index.md index 06e014afb5c..86ad78d0640 100644 --- a/static/usage/v6/select/customization/button-text/index.md +++ b/static/usage/v6/select/customization/button-text/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/select/customization/interface-options/angular/example_component_html.md b/static/usage/v6/select/customization/interface-options/angular/example_component_html.md index e1093bdf292..ccaddb758e0 100644 --- a/static/usage/v6/select/customization/interface-options/angular/example_component_html.md +++ b/static/usage/v6/select/customization/interface-options/angular/example_component_html.md @@ -1,5 +1,5 @@ ```html - + Alert @@ -8,7 +8,7 @@ Pepperoni - + Popover @@ -17,7 +17,7 @@ Red - + Action Sheet diff --git a/static/usage/v6/select/customization/interface-options/index.md b/static/usage/v6/select/customization/interface-options/index.md index ac291deb492..5df93556be1 100644 --- a/static/usage/v6/select/customization/interface-options/index.md +++ b/static/usage/v6/select/customization/interface-options/index.md @@ -8,9 +8,9 @@ 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/v6/select/customization/interface-options/javascript.md b/static/usage/v6/select/customization/interface-options/javascript.md index 9f48ee33cf9..8c06ebd788a 100644 --- a/static/usage/v6/select/customization/interface-options/javascript.md +++ b/static/usage/v6/select/customization/interface-options/javascript.md @@ -1,5 +1,5 @@ ```html - + Alert @@ -8,7 +8,7 @@ Pepperoni - + Popover @@ -17,7 +17,7 @@ Red - + Action Sheet @@ -34,7 +34,7 @@ header: 'Pizza Toppings', subHeader: 'Select your favorite topping', message: 'Choose only one', - translucent: true + translucent: true, }; customAlertSelect.interfaceOptions = customAlertOptions; @@ -42,14 +42,14 @@ const customPopoverOptions = { header: 'Hair Color', subHeader: 'Select your hair color', - message: 'Only select your dominant hair color' + message: 'Only select your dominant hair color', }; customPopoverSelect.interfaceOptions = customPopoverOptions; const customActionSheetSelect = document.getElementById('customActionSheetSelect'); const customActionSheetOptions = { header: 'Colors', - subHeader: 'Select your favorite color' + subHeader: 'Select your favorite color', }; customActionSheetSelect.interfaceOptions = customActionSheetOptions; diff --git a/static/usage/v6/select/customization/interface-options/react.md b/static/usage/v6/select/customization/interface-options/react.md index 57cdc7a9c9a..7bc42d0a9f3 100644 --- a/static/usage/v6/select/customization/interface-options/react.md +++ b/static/usage/v6/select/customization/interface-options/react.md @@ -6,22 +6,22 @@ function Example() { header: 'Pizza Toppings', subHeader: 'Select your favorite topping', message: 'Choose only one', - translucent: true + translucent: true, }; const customPopoverOptions = { header: 'Hair Color', subHeader: 'Select your hair color', - message: 'Only select your dominant hair color' + message: 'Only select your dominant hair color', }; const customActionSheetOptions = { header: 'Colors', - subHeader: 'Select your favorite color' + subHeader: 'Select your favorite color', }; return ( - + Alert @@ -30,7 +30,7 @@ function Example() { Pepperoni - + Popover @@ -39,7 +39,7 @@ function Example() { Red - + Action Sheet diff --git a/static/usage/v6/select/customization/interface-options/vue.md b/static/usage/v6/select/customization/interface-options/vue.md index 7488095006d..573b33c2115 100644 --- a/static/usage/v6/select/customization/interface-options/vue.md +++ b/static/usage/v6/select/customization/interface-options/vue.md @@ -1,6 +1,6 @@ ```html -``` \ No newline at end of file +``` diff --git a/static/usage/v6/select/typeahead/vue/vue_types_ts.md b/static/usage/v6/select/typeahead/vue/vue_types_ts.md index bdf47c9d0ae..42d4583e026 100644 --- a/static/usage/v6/select/typeahead/vue/vue_types_ts.md +++ b/static/usage/v6/select/typeahead/vue/vue_types_ts.md @@ -2,5 +2,5 @@ export interface Item { text: string; value: string; -}; +} ``` diff --git a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md index 8b30337848c..8423962a3e9 100644 --- a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md +++ b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md @@ -4,10 +4,9 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.css'] + styleUrls: ['example.component.css'], }) export class ExampleComponent { public loaded = false; } - -``` \ No newline at end of file +``` diff --git a/static/usage/v6/skeleton-text/basic/index.md b/static/usage/v6/skeleton-text/basic/index.md index 2e3371fb890..dbb102eec55 100644 --- a/static/usage/v6/skeleton-text/basic/index.md +++ b/static/usage/v6/skeleton-text/basic/index.md @@ -8,8 +8,8 @@ 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/v6/skeleton-text/basic/javascript.md b/static/usage/v6/skeleton-text/basic/javascript.md index 5eefa7c1149..da71f295063 100644 --- a/static/usage/v6/skeleton-text/basic/javascript.md +++ b/static/usage/v6/skeleton-text/basic/javascript.md @@ -56,6 +56,5 @@ } setSkeletonText(); - ``` diff --git a/static/usage/v6/skeleton-text/basic/react.md b/static/usage/v6/skeleton-text/basic/react.md index 2ea377034c9..a247849a478 100644 --- a/static/usage/v6/skeleton-text/basic/react.md +++ b/static/usage/v6/skeleton-text/basic/react.md @@ -1,6 +1,6 @@ ```tsx import React, { useState } from 'react'; -import { +import { IonButton, IonIcon, IonItem, @@ -15,12 +15,12 @@ function Example() { const [loaded, setLoaded] = useState(false); return ( <> - {loaded && + {loaded && ( Albums - +

Abbey Road

@@ -29,11 +29,11 @@ function Example() { - } - {!loaded && + )} + {!loaded && ( - + @@ -41,21 +41,21 @@ function Example() {

- +

- +

- +

- } + )} setLoaded(!loaded)}>Toggle ); } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v6/skeleton-text/basic/vue.md b/static/usage/v6/skeleton-text/basic/vue.md index c03a518af19..f391050a009 100644 --- a/static/usage/v6/skeleton-text/basic/vue.md +++ b/static/usage/v6/skeleton-text/basic/vue.md @@ -13,7 +13,7 @@ - + @@ -35,7 +35,7 @@ - + Toggle @@ -50,7 +50,7 @@ IonSkeletonText, IonThumbnail, } from '@ionic/vue'; - import { musicalNotes } from 'ionicons/icons' + import { musicalNotes } from 'ionicons/icons'; import { defineComponent, ref } from 'vue'; export default defineComponent({ @@ -66,13 +66,13 @@ }, setup() { const loaded = ref(false); - const setLoaded = (state: boolean) => loaded.value = state; + const setLoaded = (state: boolean) => (loaded.value = state); return { loaded, musicalNotes, - setLoaded - } - } + setLoaded, + }; + }, }); ``` diff --git a/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md index 67761872c60..c59d8603262 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md @@ -4,4 +4,4 @@ ion-skeleton-text { --background: rgba(188, 0, 255, 0.065); --background-rgb: 188, 0, 255; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/skeleton-text/theming/css-properties/index.md b/static/usage/v6/skeleton-text/theming/css-properties/index.md index 4ff16bd3470..6a1ff3a4239 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/index.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/skeleton-text/theming/css-properties/javascript.md b/static/usage/v6/skeleton-text/theming/css-properties/javascript.md index 20463c6aba6..90d27d3f31e 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/javascript.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/javascript.md @@ -26,6 +26,6 @@

- + ``` diff --git a/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md index 67761872c60..c59d8603262 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md @@ -4,4 +4,4 @@ ion-skeleton-text { --background: rgba(188, 0, 255, 0.065); --background-rgb: 188, 0, 255; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md index 29e6e159f68..d66ea73ff7f 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md @@ -1,13 +1,6 @@ ```tsx import React from 'react'; -import { - IonItem, - IonLabel, - IonList, - IonListHeader, - IonSkeletonText, - IonThumbnail, -} from '@ionic/react'; +import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/react'; import './main.css'; @@ -15,7 +8,7 @@ function Example() { return ( - + @@ -23,13 +16,13 @@ function Example() {

- +

- +

- +

@@ -37,4 +30,4 @@ function Example() { ); } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v6/skeleton-text/theming/css-properties/vue.md b/static/usage/v6/skeleton-text/theming/css-properties/vue.md index 418a7ca610f..2785a0e8b51 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/vue.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/vue.md @@ -1,5 +1,5 @@ ```html - @@ -30,7 +26,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, + components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, }); ``` diff --git a/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md index 4772826c933..029f5d3ee56 100644 --- a/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md @@ -6,9 +6,7 @@ Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border
@@ -17,9 +15,7 @@ Main View - - Main View Content - + Main View Content
``` diff --git a/static/usage/v6/split-pane/theming/css-properties/index.md b/static/usage/v6/split-pane/theming/css-properties/index.md index d92888173f0..631972afc2b 100644 --- a/static/usage/v6/split-pane/theming/css-properties/index.md +++ b/static/usage/v6/split-pane/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/split-pane/theming/css-properties/javascript.md b/static/usage/v6/split-pane/theming/css-properties/javascript.md index 943993aa380..37bd7b9e7f1 100644 --- a/static/usage/v6/split-pane/theming/css-properties/javascript.md +++ b/static/usage/v6/split-pane/theming/css-properties/javascript.md @@ -6,9 +6,7 @@ Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border
@@ -17,9 +15,7 @@ Main View - - Main View Content - + Main View Content
@@ -27,7 +23,7 @@ ion-split-pane { --side-width: 350px; --side-max-width: 350px; - + --border: 1px dashed #b3baff; } diff --git a/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md index 7456a34359d..1d4ad6a2e19 100644 --- a/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md @@ -13,20 +13,16 @@ function Example() { Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border - +
Main View - - Main View Content - + Main View Content
); diff --git a/static/usage/v6/split-pane/theming/css-properties/vue.md b/static/usage/v6/split-pane/theming/css-properties/vue.md index cc891eaeda1..f0abcf95800 100644 --- a/static/usage/v6/split-pane/theming/css-properties/vue.md +++ b/static/usage/v6/split-pane/theming/css-properties/vue.md @@ -7,20 +7,16 @@ Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border - +
Main View - - Main View Content - + Main View Content
@@ -30,7 +26,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, + components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, }); @@ -38,7 +34,7 @@ ion-split-pane { --side-width: 350px; --side-max-width: 350px; - + --border: 1px dashed #b3baff; } diff --git a/static/usage/v6/tabs/router/index.md b/static/usage/v6/tabs/router/index.md index 92bdc7799fe..683c77b066a 100644 --- a/static/usage/v6/tabs/router/index.md +++ b/static/usage/v6/tabs/router/index.md @@ -42,8 +42,8 @@ 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/v6/text/basic/angular.md b/static/usage/v6/text/basic/angular.md index fb2f6064fba..e63da3cacf9 100644 --- a/static/usage/v6/text/basic/angular.md +++ b/static/usage/v6/text/basic/angular.md @@ -13,9 +13,9 @@

- 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. + 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/v6/text/basic/javascript.md b/static/usage/v6/text/basic/javascript.md index fb2f6064fba..e63da3cacf9 100644 --- a/static/usage/v6/text/basic/javascript.md +++ b/static/usage/v6/text/basic/javascript.md @@ -13,9 +13,9 @@

- 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. + 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/v6/text/basic/react.md b/static/usage/v6/text/basic/react.md index dac54e84471..da8882e3bf5 100644 --- a/static/usage/v6/text/basic/react.md +++ b/static/usage/v6/text/basic/react.md @@ -19,11 +19,14 @@ function Example() {

- - 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. + + + + 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/v6/text/basic/vue.md b/static/usage/v6/text/basic/vue.md index 742167bf9f1..b34cd3d437a 100644 --- a/static/usage/v6/text/basic/vue.md +++ b/static/usage/v6/text/basic/vue.md @@ -14,10 +14,10 @@

- 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. + 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/v6/textarea/autogrow/angular.md b/static/usage/v6/textarea/autogrow/angular.md index 5ff7394eec0..03de94359b6 100644 --- a/static/usage/v6/textarea/autogrow/angular.md +++ b/static/usage/v6/textarea/autogrow/angular.md @@ -1,7 +1,10 @@ ```html - + ``` diff --git a/static/usage/v6/textarea/autogrow/index.md b/static/usage/v6/textarea/autogrow/index.md index 9d0efc4679e..f09e447f5d1 100644 --- a/static/usage/v6/textarea/autogrow/index.md +++ b/static/usage/v6/textarea/autogrow/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/textarea/autogrow/javascript.md b/static/usage/v6/textarea/autogrow/javascript.md index bea62987f5e..4c2e15028fd 100644 --- a/static/usage/v6/textarea/autogrow/javascript.md +++ b/static/usage/v6/textarea/autogrow/javascript.md @@ -1,7 +1,10 @@ ```html - + ``` diff --git a/static/usage/v6/textarea/autogrow/vue.md b/static/usage/v6/textarea/autogrow/vue.md index 824ada24909..693814464e8 100644 --- a/static/usage/v6/textarea/autogrow/vue.md +++ b/static/usage/v6/textarea/autogrow/vue.md @@ -1,8 +1,11 @@ ```html diff --git a/static/usage/v6/textarea/basic/index.md b/static/usage/v6/textarea/basic/index.md index 3325f10b870..8de25b999ae 100644 --- a/static/usage/v6/textarea/basic/index.md +++ b/static/usage/v6/textarea/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/textarea/clear-on-edit/index.md b/static/usage/v6/textarea/clear-on-edit/index.md index 4bb42164650..d7c901468dc 100644 --- a/static/usage/v6/textarea/clear-on-edit/index.md +++ b/static/usage/v6/textarea/clear-on-edit/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/textarea/theming/index.md b/static/usage/v6/textarea/theming/index.md index 3570856f99e..6f5649a823d 100644 --- a/static/usage/v6/textarea/theming/index.md +++ b/static/usage/v6/textarea/theming/index.md @@ -11,9 +11,9 @@ 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/v6/thumbnail/theming/css-properties/angular/example_component_css.md b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md index 605855deb77..74742dfe9f0 100644 --- a/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md @@ -1,4 +1,3 @@ - ```css ion-thumbnail { --size: 140px; diff --git a/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md index 8ef97cae761..119cfb8ee9c 100644 --- a/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md @@ -1,4 +1,3 @@ - ```html Silhouette of mountains diff --git a/static/usage/v6/thumbnail/theming/css-properties/index.md b/static/usage/v6/thumbnail/theming/css-properties/index.md index af98370979e..a4de9d15171 100644 --- a/static/usage/v6/thumbnail/theming/css-properties/index.md +++ b/static/usage/v6/thumbnail/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md index 37f4796d763..1d0f352383f 100644 --- a/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonThumbnail } from '@ionic/react'; diff --git a/static/usage/v6/title/basic/index.md b/static/usage/v6/title/basic/index.md index 8348f2ab712..6e2e2fb4dbd 100644 --- a/static/usage/v6/title/basic/index.md +++ b/static/usage/v6/title/basic/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/title/collapsible-large-title/basic/index.md b/static/usage/v6/title/collapsible-large-title/basic/index.md index 11869e671e5..fa9df224418 100644 --- a/static/usage/v6/title/collapsible-large-title/basic/index.md +++ b/static/usage/v6/title/collapsible-large-title/basic/index.md @@ -6,11 +6,11 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/title/collapsible-large-title/buttons/index.md b/static/usage/v6/title/collapsible-large-title/buttons/index.md index f427df176fb..ba7e73a1c04 100644 --- a/static/usage/v6/title/collapsible-large-title/buttons/index.md +++ b/static/usage/v6/title/collapsible-large-title/buttons/index.md @@ -6,10 +6,10 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/title/theming/css-properties/index.md b/static/usage/v6/title/theming/css-properties/index.md index c08b16c85e7..7def080da5a 100644 --- a/static/usage/v6/title/theming/css-properties/index.md +++ b/static/usage/v6/title/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/toast/buttons/angular/example_component_html.md b/static/usage/v6/toast/buttons/angular/example_component_html.md index 5d457cdbf2f..4ce5b83bc18 100644 --- a/static/usage/v6/toast/buttons/angular/example_component_html.md +++ b/static/usage/v6/toast/buttons/angular/example_component_html.md @@ -2,4 +2,4 @@ Click Me

{{ handlerMessage }}

{{ roleMessage }}

-``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/buttons/angular/example_component_ts.md b/static/usage/v6/toast/buttons/angular/example_component_ts.md index 54dc88ac35c..faf1f33ed5b 100644 --- a/static/usage/v6/toast/buttons/angular/example_component_ts.md +++ b/static/usage/v6/toast/buttons/angular/example_component_ts.md @@ -20,14 +20,18 @@ export class ExampleComponent { { text: 'More Info', role: 'info', - handler: () => { this.handlerMessage = 'More Info clicked'; } + handler: () => { + this.handlerMessage = 'More Info clicked'; + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { this.handlerMessage = 'Dismiss clicked'; } - } - ] + handler: () => { + this.handlerMessage = 'Dismiss clicked'; + }, + }, + ], }); await toast.present(); @@ -36,4 +40,4 @@ export class ExampleComponent { this.roleMessage = `Dismissed with role: ${role}`; } } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/buttons/index.md b/static/usage/v6/toast/buttons/index.md index 5bd8e1f56ce..a493503ddea 100644 --- a/static/usage/v6/toast/buttons/index.md +++ b/static/usage/v6/toast/buttons/index.md @@ -8,9 +8,9 @@ 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/v6/toast/buttons/javascript.md b/static/usage/v6/toast/buttons/javascript.md index c5cea896bb3..521bb9a2aec 100644 --- a/static/usage/v6/toast/buttons/javascript.md +++ b/static/usage/v6/toast/buttons/javascript.md @@ -15,14 +15,18 @@ { text: 'More Info', role: 'info', - handler: () => { handlerOutput.innerText = 'More Info clicked'; } + handler: () => { + handlerOutput.innerText = 'More Info clicked'; + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { handlerOutput.innerText = 'Dismiss clicked'; } - } - ] + handler: () => { + handlerOutput.innerText = 'Dismiss clicked'; + }, + }, + ], }); await toast.present(); diff --git a/static/usage/v6/toast/buttons/react.md b/static/usage/v6/toast/buttons/react.md index ac08a9b543b..7f329e63ec7 100644 --- a/static/usage/v6/toast/buttons/react.md +++ b/static/usage/v6/toast/buttons/react.md @@ -19,15 +19,19 @@ function Example() { { text: 'More Info', role: 'info', - handler: () => { setHandlerMessage('More Info clicked'); } + handler: () => { + setHandlerMessage('More Info clicked'); + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { setHandlerMessage('Dismiss clicked'); } - } - ] - }) + handler: () => { + setHandlerMessage('Dismiss clicked'); + }, + }, + ], + }); }} > Click Me diff --git a/static/usage/v6/toast/buttons/vue.md b/static/usage/v6/toast/buttons/vue.md index ec7da81c54c..762aff51aa2 100644 --- a/static/usage/v6/toast/buttons/vue.md +++ b/static/usage/v6/toast/buttons/vue.md @@ -25,14 +25,18 @@ { text: 'More Info', role: 'info', - handler: () => { this.handlerMessage = 'More Info clicked'; } + handler: () => { + this.handlerMessage = 'More Info clicked'; + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { this.handlerMessage = 'Dismiss clicked'; } - } - ] + handler: () => { + this.handlerMessage = 'Dismiss clicked'; + }, + }, + ], }); await toast.present(); diff --git a/static/usage/v6/toast/icon/angular/example_component_html.md b/static/usage/v6/toast/icon/angular/example_component_html.md index 976194efc1e..91e6579dfa8 100644 --- a/static/usage/v6/toast/icon/angular/example_component_html.md +++ b/static/usage/v6/toast/icon/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/icon/angular/example_component_ts.md b/static/usage/v6/toast/icon/angular/example_component_ts.md index addffa2daf9..d72053bd950 100644 --- a/static/usage/v6/toast/icon/angular/example_component_ts.md +++ b/static/usage/v6/toast/icon/angular/example_component_ts.md @@ -13,10 +13,10 @@ export class ExampleComponent { const toast = await this.toastController.create({ message: 'Hello World!', duration: 1500, - icon: 'globe' + icon: 'globe', }); await toast.present(); } } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/icon/index.md b/static/usage/v6/toast/icon/index.md index d636c54d905..b6aea1ec824 100644 --- a/static/usage/v6/toast/icon/index.md +++ b/static/usage/v6/toast/icon/index.md @@ -8,9 +8,9 @@ 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/v6/toast/icon/javascript.md b/static/usage/v6/toast/icon/javascript.md index b63e8550ab3..685c496cc26 100644 --- a/static/usage/v6/toast/icon/javascript.md +++ b/static/usage/v6/toast/icon/javascript.md @@ -6,9 +6,9 @@ const toast = await this.toastController.create({ message: 'Hello World!', duration: 1500, - icon: 'globe' + icon: 'globe', }); - + await toast.present(); } diff --git a/static/usage/v6/toast/icon/react.md b/static/usage/v6/toast/icon/react.md index 25d758c16b6..8ccf5670d69 100644 --- a/static/usage/v6/toast/icon/react.md +++ b/static/usage/v6/toast/icon/react.md @@ -12,8 +12,8 @@ function Example() { presentToast({ message: 'Hello World!', duration: 1500, - icon: globe - }) + icon: globe, + }); }} > Click Me diff --git a/static/usage/v6/toast/icon/vue.md b/static/usage/v6/toast/icon/vue.md index d3a123f598b..4cbe7510e4b 100644 --- a/static/usage/v6/toast/icon/vue.md +++ b/static/usage/v6/toast/icon/vue.md @@ -14,7 +14,7 @@ const toast = await toastController.create({ message: 'Hello World!', duration: 1500, - icon: globe + icon: globe, }); await toast.present(); diff --git a/static/usage/v6/toast/layout/angular/example_component_html.md b/static/usage/v6/toast/layout/angular/example_component_html.md index 8bd086f7ba5..195a1841204 100644 --- a/static/usage/v6/toast/layout/angular/example_component_html.md +++ b/static/usage/v6/toast/layout/angular/example_component_html.md @@ -1,4 +1,4 @@ ```html Open Baseline Layout Toast Click Stacked Layout Toast -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md index 6e8c63a9b58..01636b04a97 100644 --- a/static/usage/v6/toast/layout/angular/example_component_ts.md +++ b/static/usage/v6/toast/layout/angular/example_component_ts.md @@ -8,34 +8,29 @@ import type { ToastOptions } from '@ionic/angular'; templateUrl: 'example.component.html', }) export class ExampleComponent { - constructor(private toastController: ToastController) {} - + async presentToast(opts: ToastOptions) { const toast = await this.toastController.create(opts); - + await toast.present(); } - + async presentBaselineToast() { await this.presentToast({ duration: 3000, - message: "This is a toast with a long message and a button that appears on the same line.", - buttons: [ - { text: 'Action With Long Text'} - ] + message: 'This is a toast with a long message and a button that appears on the same line.', + buttons: [{ text: 'Action With Long Text' }], }); } - + async presentStackedToast() { await this.presentToast({ duration: 3000, - message: "This is a toast with a long message and a button that appears on the next line.", - buttons: [ - { text: 'Action With Long Text'} - ], - layout: "stacked" + message: 'This is a toast with a long message and a button that appears on the next line.', + buttons: [{ text: 'Action With Long Text' }], + layout: 'stacked', }); } } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/layout/index.md b/static/usage/v6/toast/layout/index.md index 331eef6b0f5..2675f425f80 100644 --- a/static/usage/v6/toast/layout/index.md +++ b/static/usage/v6/toast/layout/index.md @@ -8,9 +8,9 @@ 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/v6/toast/layout/javascript.md b/static/usage/v6/toast/layout/javascript.md index 2350799f7e1..5d9a27392f9 100644 --- a/static/usage/v6/toast/layout/javascript.md +++ b/static/usage/v6/toast/layout/javascript.md @@ -5,28 +5,24 @@ diff --git a/static/usage/v6/toast/layout/react.md b/static/usage/v6/toast/layout/react.md index 68813f1eb1f..30f0b95da5a 100644 --- a/static/usage/v6/toast/layout/react.md +++ b/static/usage/v6/toast/layout/react.md @@ -11,11 +11,9 @@ function Example() { onClick={() => { presentToast({ duration: 3000, - message: "This is a toast with a long message and a button that appears on the next line.", - buttons: [ - { text: 'Action With Long Text'} - ] - }) + message: 'This is a toast with a long message and a button that appears on the next line.', + buttons: [{ text: 'Action With Long Text' }], + }); }} > Open Baseline Layout Toast @@ -24,12 +22,10 @@ function Example() { onClick={() => { presentToast({ duration: 3000, - message: "This is a toast with a long message and a button that appears on the next line.", - buttons: [ - { text: 'Action With Long Text'} - ], - layout: "stacked" - }) + message: 'This is a toast with a long message and a button that appears on the next line.', + buttons: [{ text: 'Action With Long Text' }], + layout: 'stacked', + }); }} > Open Stacked Layout Toast diff --git a/static/usage/v6/toast/layout/vue.md b/static/usage/v6/toast/layout/vue.md index 5b884ea7caf..ff3865c3b9c 100644 --- a/static/usage/v6/toast/layout/vue.md +++ b/static/usage/v6/toast/layout/vue.md @@ -14,33 +14,29 @@ setup() { const presentToast = async (opts: ToastOptions) => { const toast = await toastController.create(opts); - + await toast.present(); - } - + }; + const presentBaselineToast = async () => { await presentToast({ duration: 3000, - message: "This is a toast with a long message and a button that appears on the same line.", - buttons: [ - { text: 'Action With Long Text'} - ] + message: 'This is a toast with a long message and a button that appears on the same line.', + buttons: [{ text: 'Action With Long Text' }], }); - } - + }; + const presentStackedToast = async () => { await presentToast({ duration: 3000, - message: "This is a toast with a long message and a button that appears on the next line.", - buttons: [ - { text: 'Action With Long Text'} - ], - layout: "stacked" + message: 'This is a toast with a long message and a button that appears on the next line.', + buttons: [{ text: 'Action With Long Text' }], + layout: 'stacked', }); - } - - return { presentBaselineToast, presentStackedToast } - } + }; + + return { presentBaselineToast, presentStackedToast }; + }, }); ``` diff --git a/static/usage/v6/toast/presenting/controller/angular/example_component_html.md b/static/usage/v6/toast/presenting/controller/angular/example_component_html.md index 962fcd0e355..2ed1eea0254 100644 --- a/static/usage/v6/toast/presenting/controller/angular/example_component_html.md +++ b/static/usage/v6/toast/presenting/controller/angular/example_component_html.md @@ -2,4 +2,4 @@ Present Toast At the Top Present Toast At the Middle Present Toast At the Bottom -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md index c772728c3c1..db133a99f1e 100644 --- a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md +++ b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md @@ -13,10 +13,10 @@ export class ExampleComponent { const toast = await this.toastController.create({ message: 'Hello World!', duration: 1500, - position: position + position: position, }); await toast.present(); } } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/presenting/controller/index.md b/static/usage/v6/toast/presenting/controller/index.md index 492699916c0..dad0f52a79c 100644 --- a/static/usage/v6/toast/presenting/controller/index.md +++ b/static/usage/v6/toast/presenting/controller/index.md @@ -8,9 +8,9 @@ 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/v6/toast/presenting/controller/javascript.md b/static/usage/v6/toast/presenting/controller/javascript.md index 5260ba8d1a1..52c089331fa 100644 --- a/static/usage/v6/toast/presenting/controller/javascript.md +++ b/static/usage/v6/toast/presenting/controller/javascript.md @@ -8,7 +8,7 @@ const toast = await this.toastController.create({ message: 'Hello World!', duration: 1500, - position: position + position: position, }); await toast.present(); diff --git a/static/usage/v6/toast/presenting/controller/react.md b/static/usage/v6/toast/presenting/controller/react.md index 1dd38b3cd48..b4e8d0913ca 100644 --- a/static/usage/v6/toast/presenting/controller/react.md +++ b/static/usage/v6/toast/presenting/controller/react.md @@ -9,15 +9,21 @@ function Example() { present({ message: 'Hello World!', duration: 1500, - position: position + position: position, }); }; return ( <> - presentToast('top')}>Present Toast At the Top - presentToast('middle')}>Present Toast At the Middle - presentToast('bottom')}>Present Toast At the Bottom + presentToast('top')}> + Present Toast At the Top + + presentToast('middle')}> + Present Toast At the Middle + + presentToast('bottom')}> + Present Toast At the Bottom + ); } diff --git a/static/usage/v6/toast/presenting/controller/vue.md b/static/usage/v6/toast/presenting/controller/vue.md index ac520d0e7b9..7f2ade91031 100644 --- a/static/usage/v6/toast/presenting/controller/vue.md +++ b/static/usage/v6/toast/presenting/controller/vue.md @@ -15,7 +15,7 @@ const toast = await toastController.create({ message: 'Hello World!', duration: 1500, - position: position + position: position, }); await toast.present(); diff --git a/static/usage/v6/toast/theming/angular/example_component_ts.md b/static/usage/v6/toast/theming/angular/example_component_ts.md index 62c8151b0f4..7f490b9bacc 100644 --- a/static/usage/v6/toast/theming/angular/example_component_ts.md +++ b/static/usage/v6/toast/theming/angular/example_component_ts.md @@ -17,8 +17,8 @@ export class ExampleComponent { buttons: [ { text: 'Dismiss', - role: 'cancel' - } + role: 'cancel', + }, ], }); diff --git a/static/usage/v6/toast/theming/angular/global_css.md b/static/usage/v6/toast/theming/angular/global_css.md index 4d261622074..70ef6f5cfd6 100644 --- a/static/usage/v6/toast/theming/angular/global_css.md +++ b/static/usage/v6/toast/theming/angular/global_css.md @@ -1,10 +1,10 @@ ```css ion-toast.custom-toast { - --background: #F4F4FA; + --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; } @@ -14,4 +14,4 @@ ion-toast.custom-toast::part(button) { color: #030207; font-size: 15px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/theming/index.md b/static/usage/v6/toast/theming/index.md index 0e5b1b56e72..868ca8b9fe6 100644 --- a/static/usage/v6/toast/theming/index.md +++ b/static/usage/v6/toast/theming/index.md @@ -11,9 +11,9 @@ 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/v6/toast/theming/javascript.md b/static/usage/v6/toast/theming/javascript.md index b540eccaaf7..06a4f5d7b09 100644 --- a/static/usage/v6/toast/theming/javascript.md +++ b/static/usage/v6/toast/theming/javascript.md @@ -10,8 +10,8 @@ buttons: [ { text: 'Dismiss', - role: 'cancel' - } + role: 'cancel', + }, ], }); @@ -21,11 +21,11 @@ ``` diff --git a/static/usage/v7/accordion/customization/theming/react/main_css.md b/static/usage/v7/accordion/customization/theming/react/main_css.md index 6054219017a..141236c6633 100644 --- a/static/usage/v7/accordion/customization/theming/react/main_css.md +++ b/static/usage/v7/accordion/customization/theming/react/main_css.md @@ -1,9 +1,9 @@ ```css :root { --ion-color-rose: #fecdd3; - --ion-color-rose-rgb: 254,205,211; + --ion-color-rose-rgb: 254, 205, 211; --ion-color-rose-contrast: #000000; - --ion-color-rose-contrast-rgb: 0,0,0; + --ion-color-rose-contrast-rgb: 0, 0, 0; --ion-color-rose-shade: #e0b4ba; --ion-color-rose-tint: #fed2d7; } @@ -17,7 +17,7 @@ --ion-color-tint: var(--ion-color-rose-tint); } -div[slot="content"] { - background: rgba(var(--ion-color-rose-rgb), 0.25) +div[slot='content'] { + background: rgba(var(--ion-color-rose-rgb), 0.25); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/accordion/customization/theming/react/main_tsx.md b/static/usage/v7/accordion/customization/theming/react/main_tsx.md index 348576ae0fe..ecc51a9e15b 100644 --- a/static/usage/v7/accordion/customization/theming/react/main_tsx.md +++ b/static/usage/v7/accordion/customization/theming/react/main_tsx.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; import './main.css'; diff --git a/static/usage/v7/accordion/customization/theming/vue.md b/static/usage/v7/accordion/customization/theming/vue.md index cf55542e739..c049c4b89d8 100644 --- a/static/usage/v7/accordion/customization/theming/vue.md +++ b/static/usage/v7/accordion/customization/theming/vue.md @@ -5,62 +5,51 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v7/accordion/disable-group/index.md b/static/usage/v7/accordion/disable-group/index.md index 204508c6b3c..7bdae730833 100644 --- a/static/usage/v7/accordion/disable-group/index.md +++ b/static/usage/v7/accordion/disable-group/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/accordion/disable/group/index.md b/static/usage/v7/accordion/disable/group/index.md index c564a2d16bd..bedac447945 100644 --- a/static/usage/v7/accordion/disable/group/index.md +++ b/static/usage/v7/accordion/disable/group/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/accordion/disable/individual/index.md b/static/usage/v7/accordion/disable/individual/index.md index 28172bca32b..f9b3dd0e32e 100644 --- a/static/usage/v7/accordion/disable/individual/index.md +++ b/static/usage/v7/accordion/disable/individual/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/accordion/listen-changes/index.md b/static/usage/v7/accordion/listen-changes/index.md index a10dd609b4f..ae156ffc54f 100644 --- a/static/usage/v7/accordion/listen-changes/index.md +++ b/static/usage/v7/accordion/listen-changes/index.md @@ -8,8 +8,8 @@ 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/v7/accordion/multiple/index.md b/static/usage/v7/accordion/multiple/index.md index 868eaaa7c16..8dc1c9c4a25 100644 --- a/static/usage/v7/accordion/multiple/index.md +++ b/static/usage/v7/accordion/multiple/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/accordion/readonly/group/angular.md b/static/usage/v7/accordion/readonly/group/angular.md index 99c084f8064..4ebf8c55e4e 100644 --- a/static/usage/v7/accordion/readonly/group/angular.md +++ b/static/usage/v7/accordion/readonly/group/angular.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v7/accordion/readonly/group/index.md b/static/usage/v7/accordion/readonly/group/index.md index 78689ede73f..fcba0d9aa28 100644 --- a/static/usage/v7/accordion/readonly/group/index.md +++ b/static/usage/v7/accordion/readonly/group/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/accordion/readonly/group/javascript.md b/static/usage/v7/accordion/readonly/group/javascript.md index 27f216fb4f9..d511ea5ff0b 100644 --- a/static/usage/v7/accordion/readonly/group/javascript.md +++ b/static/usage/v7/accordion/readonly/group/javascript.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v7/accordion/readonly/group/react.md b/static/usage/v7/accordion/readonly/group/react.md index 5383b732d96..2f26afde9ea 100644 --- a/static/usage/v7/accordion/readonly/group/react.md +++ b/static/usage/v7/accordion/readonly/group/react.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v7/accordion/readonly/group/vue.md b/static/usage/v7/accordion/readonly/group/vue.md index aa6a662a802..0de1be3fe91 100644 --- a/static/usage/v7/accordion/readonly/group/vue.md +++ b/static/usage/v7/accordion/readonly/group/vue.md @@ -5,44 +5,33 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 diff --git a/static/usage/v7/accordion/readonly/individual/angular.md b/static/usage/v7/accordion/readonly/individual/angular.md index 7f9f8f5bb2e..94013b9d07d 100644 --- a/static/usage/v7/accordion/readonly/individual/angular.md +++ b/static/usage/v7/accordion/readonly/individual/angular.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion (Readonly) -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v7/accordion/readonly/individual/index.md b/static/usage/v7/accordion/readonly/individual/index.md index c7efd45b803..f0aab939939 100644 --- a/static/usage/v7/accordion/readonly/individual/index.md +++ b/static/usage/v7/accordion/readonly/individual/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/accordion/readonly/individual/javascript.md b/static/usage/v7/accordion/readonly/individual/javascript.md index eec083da61a..e1f78d726db 100644 --- a/static/usage/v7/accordion/readonly/individual/javascript.md +++ b/static/usage/v7/accordion/readonly/individual/javascript.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion (Readonly) -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v7/accordion/readonly/individual/react.md b/static/usage/v7/accordion/readonly/individual/react.md index 7e94d274b32..a6d28a427cd 100644 --- a/static/usage/v7/accordion/readonly/individual/react.md +++ b/static/usage/v7/accordion/readonly/individual/react.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v7/accordion/readonly/individual/vue.md b/static/usage/v7/accordion/readonly/individual/vue.md index 2e02ebd3679..b9a5daac451 100644 --- a/static/usage/v7/accordion/readonly/individual/vue.md +++ b/static/usage/v7/accordion/readonly/individual/vue.md @@ -5,44 +5,33 @@ First Accordion -
- First Content -
+
First Content
Second Accordion (Readonly) -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 diff --git a/static/usage/v7/accordion/toggle/index.md b/static/usage/v7/accordion/toggle/index.md index 8f488dbb4b5..84dc8bc9ed1 100644 --- a/static/usage/v7/accordion/toggle/index.md +++ b/static/usage/v7/accordion/toggle/index.md @@ -8,8 +8,8 @@ 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/v7/action-sheet/controller/index.md b/static/usage/v7/action-sheet/controller/index.md index f761b958240..c91c14bac7c 100644 --- a/static/usage/v7/action-sheet/controller/index.md +++ b/static/usage/v7/action-sheet/controller/index.md @@ -10,8 +10,8 @@ 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/v7/action-sheet/inline/isOpen/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md index 381691b1f0c..78d9ddf05c8 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md @@ -12,24 +12,24 @@ export class ExampleComponent { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]; - + setOpen(isOpen: boolean) { this.isActionSheetOpen = isOpen; } diff --git a/static/usage/v7/action-sheet/inline/isOpen/index.md b/static/usage/v7/action-sheet/inline/isOpen/index.md index 86cf87ab2cd..17f68db345d 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/index.md +++ b/static/usage/v7/action-sheet/inline/isOpen/index.md @@ -10,8 +10,8 @@ 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/v7/action-sheet/inline/isOpen/javascript.md b/static/usage/v7/action-sheet/inline/isOpen/javascript.md index 6557f4f4c50..2c0e3b11879 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/javascript.md +++ b/static/usage/v7/action-sheet/inline/isOpen/javascript.md @@ -10,22 +10,22 @@ text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]; actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => { diff --git a/static/usage/v7/action-sheet/inline/isOpen/react.md b/static/usage/v7/action-sheet/inline/isOpen/react.md index 5497ad7b574..aebfa63c093 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/react.md +++ b/static/usage/v7/action-sheet/inline/isOpen/react.md @@ -16,22 +16,22 @@ function Example() { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]} onDidDismiss={() => setIsOpen(false)} > diff --git a/static/usage/v7/action-sheet/inline/isOpen/vue.md b/static/usage/v7/action-sheet/inline/isOpen/vue.md index a3131033fff..9d82efd4ea1 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/vue.md +++ b/static/usage/v7/action-sheet/inline/isOpen/vue.md @@ -47,7 +47,7 @@ return { actionSheetButtons, isOpen, - setOpen + setOpen, }; }, }; diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md index bf4d4580341..b2bebe5de6c 100644 --- a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md +++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md @@ -1,8 +1,4 @@ ```html Open - + ``` diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md index 2834f65e3e3..f991151c4a1 100644 --- a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md @@ -11,22 +11,22 @@ export class ExampleComponent { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]; } ``` diff --git a/static/usage/v7/action-sheet/inline/trigger/index.md b/static/usage/v7/action-sheet/inline/trigger/index.md index b35cd485cbe..542d6d52c48 100644 --- a/static/usage/v7/action-sheet/inline/trigger/index.md +++ b/static/usage/v7/action-sheet/inline/trigger/index.md @@ -10,8 +10,8 @@ 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/v7/action-sheet/inline/trigger/javascript.md b/static/usage/v7/action-sheet/inline/trigger/javascript.md index 8e769fe0ed1..d705a0162b5 100644 --- a/static/usage/v7/action-sheet/inline/trigger/javascript.md +++ b/static/usage/v7/action-sheet/inline/trigger/javascript.md @@ -1,9 +1,6 @@ ```html Open - + ``` diff --git a/static/usage/v7/action-sheet/inline/trigger/react.md b/static/usage/v7/action-sheet/inline/trigger/react.md index 6890d0be7a8..54c1793d713 100644 --- a/static/usage/v7/action-sheet/inline/trigger/react.md +++ b/static/usage/v7/action-sheet/inline/trigger/react.md @@ -14,22 +14,22 @@ function Example() { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]} > diff --git a/static/usage/v7/action-sheet/inline/trigger/vue.md b/static/usage/v7/action-sheet/inline/trigger/vue.md index 4c681af50b6..c32a8ea9bdd 100644 --- a/static/usage/v7/action-sheet/inline/trigger/vue.md +++ b/static/usage/v7/action-sheet/inline/trigger/vue.md @@ -1,11 +1,7 @@ ```html ``` diff --git a/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md b/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md index d66211df842..fc0c08e0a57 100644 --- a/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md @@ -18,22 +18,22 @@ function Example() { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]} > diff --git a/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md index a23a02b2aca..d9714abb668 100644 --- a/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md @@ -12,22 +12,22 @@ export class ExampleComponent { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]; constructor() {} diff --git a/static/usage/v7/action-sheet/theming/styling/index.md b/static/usage/v7/action-sheet/theming/styling/index.md index 67a346b3318..57c0cd35e7f 100644 --- a/static/usage/v7/action-sheet/theming/styling/index.md +++ b/static/usage/v7/action-sheet/theming/styling/index.md @@ -12,8 +12,8 @@ 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/v7/action-sheet/theming/styling/javascript.md b/static/usage/v7/action-sheet/theming/styling/javascript.md index 8d578dbb51e..90e2725d0df 100644 --- a/static/usage/v7/action-sheet/theming/styling/javascript.md +++ b/static/usage/v7/action-sheet/theming/styling/javascript.md @@ -44,22 +44,22 @@ text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]; ``` diff --git a/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md b/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md index d66211df842..fc0c08e0a57 100644 --- a/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md +++ b/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md @@ -18,22 +18,22 @@ function Example() { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]} > diff --git a/static/usage/v7/alert/buttons/angular/example_component_html.md b/static/usage/v7/alert/buttons/angular/example_component_html.md index bd9fb37882c..5db8454f7b2 100644 --- a/static/usage/v7/alert/buttons/angular/example_component_html.md +++ b/static/usage/v7/alert/buttons/angular/example_component_html.md @@ -8,4 +8,4 @@ >

{{ handlerMessage }}

{{ roleMessage }}

-``` \ No newline at end of file +``` diff --git a/static/usage/v7/alert/buttons/angular/example_component_ts.md b/static/usage/v7/alert/buttons/angular/example_component_ts.md index 89b76aaed6a..e3038179e13 100644 --- a/static/usage/v7/alert/buttons/angular/example_component_ts.md +++ b/static/usage/v7/alert/buttons/angular/example_component_ts.md @@ -13,13 +13,17 @@ export class ExampleComponent { { text: 'Cancel', role: 'cancel', - handler: () => { this.handlerMessage = 'Alert canceled'; } + handler: () => { + this.handlerMessage = 'Alert canceled'; + }, }, { text: 'OK', role: 'confirm', - handler: () => { this.handlerMessage = 'Alert confirmed'; } - } + handler: () => { + this.handlerMessage = 'Alert confirmed'; + }, + }, ]; setResult(ev) { diff --git a/static/usage/v7/alert/buttons/index.md b/static/usage/v7/alert/buttons/index.md index 0da89f1f7bd..e675d03c07b 100644 --- a/static/usage/v7/alert/buttons/index.md +++ b/static/usage/v7/alert/buttons/index.md @@ -8,9 +8,9 @@ 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/v7/alert/buttons/javascript.md b/static/usage/v7/alert/buttons/javascript.md index 6f70843e204..292a5d30c2f 100644 --- a/static/usage/v7/alert/buttons/javascript.md +++ b/static/usage/v7/alert/buttons/javascript.md @@ -13,13 +13,17 @@ { text: 'Cancel', role: 'cancel', - handler: () => { handlerOutput.innerText = 'Alert canceled'; } + handler: () => { + handlerOutput.innerText = 'Alert canceled'; + }, }, { text: 'OK', role: 'confirm', - handler: () => { handlerOutput.innerText = 'Alert confirmed'; } - } + handler: () => { + handlerOutput.innerText = 'Alert confirmed'; + }, + }, ]; alert.addEventListener('ionAlertDidDismiss', (ev) => { diff --git a/static/usage/v7/alert/buttons/vue.md b/static/usage/v7/alert/buttons/vue.md index 50cf42bb5a3..cd126758598 100644 --- a/static/usage/v7/alert/buttons/vue.md +++ b/static/usage/v7/alert/buttons/vue.md @@ -40,13 +40,13 @@ const setResult = (ev: CustomEvent) => { roleMessage.value = `Dismissed with role: ${ev.detail.role}`; - } + }; return { handlerMessage, roleMessage, alertButtons, - setResult + setResult, }; }, }; diff --git a/static/usage/v7/alert/customization/angular/example_component_html.md b/static/usage/v7/alert/customization/angular/example_component_html.md index 0da962b2489..762d3c21d89 100644 --- a/static/usage/v7/alert/customization/angular/example_component_html.md +++ b/static/usage/v7/alert/customization/angular/example_component_html.md @@ -1,9 +1,4 @@ ```html Click Me - + ``` diff --git a/static/usage/v7/alert/customization/angular/global_css.md b/static/usage/v7/alert/customization/angular/global_css.md index c4d1f859c34..c84c1456e58 100644 --- a/static/usage/v7/alert/customization/angular/global_css.md +++ b/static/usage/v7/alert/customization/angular/global_css.md @@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm { } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); } .ios button.alert-button.alert-button-cancel { @@ -30,4 +30,4 @@ button.alert-button.alert-button-confirm { border-bottom-right-radius: 13px; border-top-right-radius: 13px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/alert/customization/index.md b/static/usage/v7/alert/customization/index.md index 59bc30dd589..9c683943e06 100644 --- a/static/usage/v7/alert/customization/index.md +++ b/static/usage/v7/alert/customization/index.md @@ -11,9 +11,9 @@ 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/v7/alert/customization/javascript.md b/static/usage/v7/alert/customization/javascript.md index f57e9958bfb..a3c31a1b432 100644 --- a/static/usage/v7/alert/customization/javascript.md +++ b/static/usage/v7/alert/customization/javascript.md @@ -8,12 +8,12 @@ alert.buttons = [ { text: 'No', - cssClass: 'alert-button-cancel' + cssClass: 'alert-button-cancel', }, { text: 'Yes', - cssClass: 'alert-button-confirm' - } + cssClass: 'alert-button-confirm', + }, ]; @@ -36,7 +36,7 @@ } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); } .ios button.alert-button.alert-button-cancel { diff --git a/static/usage/v7/alert/customization/react/main_css.md b/static/usage/v7/alert/customization/react/main_css.md index c4d1f859c34..c84c1456e58 100644 --- a/static/usage/v7/alert/customization/react/main_css.md +++ b/static/usage/v7/alert/customization/react/main_css.md @@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm { } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); } .ios button.alert-button.alert-button-cancel { @@ -30,4 +30,4 @@ button.alert-button.alert-button-confirm { border-bottom-right-radius: 13px; border-top-right-radius: 13px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/alert/customization/vue.md b/static/usage/v7/alert/customization/vue.md index 7bd279bd0c1..c526c93de8d 100644 --- a/static/usage/v7/alert/customization/vue.md +++ b/static/usage/v7/alert/customization/vue.md @@ -1,12 +1,7 @@ ```html ``` diff --git a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md index fec220f8ecc..0ae990d9a50 100644 --- a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md +++ b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md @@ -6,4 +6,4 @@ [buttons]="alertButtons" [inputs]="alertInputs" > -``` \ No newline at end of file +``` diff --git a/static/usage/v7/alert/inputs/text-inputs/index.md b/static/usage/v7/alert/inputs/text-inputs/index.md index 6c56317816e..0ad166cf9bf 100644 --- a/static/usage/v7/alert/inputs/text-inputs/index.md +++ b/static/usage/v7/alert/inputs/text-inputs/index.md @@ -8,9 +8,9 @@ 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/v7/alert/inputs/text-inputs/javascript.md b/static/usage/v7/alert/inputs/text-inputs/javascript.md index c75afba0a15..bbbd043c5e7 100644 --- a/static/usage/v7/alert/inputs/text-inputs/javascript.md +++ b/static/usage/v7/alert/inputs/text-inputs/javascript.md @@ -8,24 +8,24 @@ alert.buttons = ['OK']; alert.inputs = [ { - placeholder: 'Name' + placeholder: 'Name', }, { placeholder: 'Nickname (max 8 characters)', attributes: { - maxlength: 8 - } + maxlength: 8, + }, }, { type: 'number', placeholder: 'Age', min: 1, - max: 100 + max: 100, }, { type: 'textarea', - placeholder: 'A little about yourself' - } + placeholder: 'A little about yourself', + }, ]; ``` diff --git a/static/usage/v7/alert/presenting/controller/angular/example_component_html.md b/static/usage/v7/alert/presenting/controller/angular/example_component_html.md index e484d6c912d..183dd98719d 100644 --- a/static/usage/v7/alert/presenting/controller/angular/example_component_html.md +++ b/static/usage/v7/alert/presenting/controller/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` \ No newline at end of file +``` diff --git a/static/usage/v7/alert/presenting/controller/index.md b/static/usage/v7/alert/presenting/controller/index.md index 5a01edce2a0..78b0842c2d7 100644 --- a/static/usage/v7/alert/presenting/controller/index.md +++ b/static/usage/v7/alert/presenting/controller/index.md @@ -8,9 +8,9 @@ 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/v7/alert/presenting/isOpen/angular/example_component_html.md b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md index 6e4c36ec85b..504cb5b4863 100644 --- a/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md +++ b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md @@ -8,4 +8,4 @@ [buttons]="alertButtons" (didDismiss)="setOpen(false)" > -``` \ No newline at end of file +``` diff --git a/static/usage/v7/alert/presenting/isOpen/index.md b/static/usage/v7/alert/presenting/isOpen/index.md index e00b0e96f07..5d9d347fa2b 100644 --- a/static/usage/v7/alert/presenting/isOpen/index.md +++ b/static/usage/v7/alert/presenting/isOpen/index.md @@ -8,9 +8,9 @@ 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/v7/alert/presenting/isOpen/javascript.md b/static/usage/v7/alert/presenting/isOpen/javascript.md index f48b512c452..21f310c1904 100644 --- a/static/usage/v7/alert/presenting/isOpen/javascript.md +++ b/static/usage/v7/alert/presenting/isOpen/javascript.md @@ -1,10 +1,6 @@ ```html Click Me - + ``` diff --git a/static/usage/v7/avatar/item/vue.md b/static/usage/v7/avatar/item/vue.md index 315af034426..5a9ddea4499 100644 --- a/static/usage/v7/avatar/item/vue.md +++ b/static/usage/v7/avatar/item/vue.md @@ -13,7 +13,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar, IonItem, IonLabel } + components: { IonAvatar, IonItem, IonLabel }, }); ``` diff --git a/static/usage/v7/avatar/theming/css-properties/index.md b/static/usage/v7/avatar/theming/css-properties/index.md index 38bc99f7e8a..f6b6d6f371e 100644 --- a/static/usage/v7/avatar/theming/css-properties/index.md +++ b/static/usage/v7/avatar/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/avatar/theming/css-properties/react/main_tsx.md b/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md index f04d7f8fbe3..180b8998a3f 100644 --- a/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonAvatar } from '@ionic/react'; diff --git a/static/usage/v7/avatar/theming/css-properties/vue.md b/static/usage/v7/avatar/theming/css-properties/vue.md index affb7ccdecb..32237336a1c 100644 --- a/static/usage/v7/avatar/theming/css-properties/vue.md +++ b/static/usage/v7/avatar/theming/css-properties/vue.md @@ -10,7 +10,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar } + components: { IonAvatar }, }); diff --git a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md index 3c39508e72c..b2cda11d2a8 100644 --- a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md +++ b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md @@ -18,7 +18,5 @@ import { Component } from '@angular/core'; `, }) -export class PageTwoComponent { - -} +export class PageTwoComponent {} ``` diff --git a/static/usage/v7/back-button/basic/index.md b/static/usage/v7/back-button/basic/index.md index 27c7d6b0c0c..f870381f562 100644 --- a/static/usage/v7/back-button/basic/index.md +++ b/static/usage/v7/back-button/basic/index.md @@ -17,8 +17,8 @@ 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/v7/back-button/basic/vue/page_two_vue.md b/static/usage/v7/back-button/basic/vue/page_two_vue.md index 1192ca2936c..e26a6f13562 100644 --- a/static/usage/v7/back-button/basic/vue/page_two_vue.md +++ b/static/usage/v7/back-button/basic/vue/page_two_vue.md @@ -18,7 +18,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue'; export default { - components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } + components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar }, }; ``` diff --git a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md index 31f76ac219a..05a1bd64d79 100644 --- a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md +++ b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md @@ -18,7 +18,5 @@ import { Component } from '@angular/core'; `, }) -export class PageTwoComponent { - -} +export class PageTwoComponent {} ``` diff --git a/static/usage/v7/back-button/custom/index.md b/static/usage/v7/back-button/custom/index.md index d90a901513f..318fab845d2 100644 --- a/static/usage/v7/back-button/custom/index.md +++ b/static/usage/v7/back-button/custom/index.md @@ -17,8 +17,8 @@ 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/v7/back-button/custom/vue/page_two_vue.md b/static/usage/v7/back-button/custom/vue/page_two_vue.md index 05de62654cb..4667abeced5 100644 --- a/static/usage/v7/back-button/custom/vue/page_two_vue.md +++ b/static/usage/v7/back-button/custom/vue/page_two_vue.md @@ -21,8 +21,8 @@ export default { components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton }, setup() { - return { caretBack } - } + return { caretBack }; + }, }; ``` diff --git a/static/usage/v7/backdrop/basic/index.md b/static/usage/v7/backdrop/basic/index.md index adf0b9d8d5e..5cd96fe0476 100644 --- a/static/usage/v7/backdrop/basic/index.md +++ b/static/usage/v7/backdrop/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/backdrop/styling/index.md b/static/usage/v7/backdrop/styling/index.md index a7861a18ed7..6f83069ac38 100644 --- a/static/usage/v7/backdrop/styling/index.md +++ b/static/usage/v7/backdrop/styling/index.md @@ -11,8 +11,8 @@ 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/v7/badge/theming/colors/index.md b/static/usage/v7/badge/theming/colors/index.md index 1b640d0675b..bc2ca77c72b 100644 --- a/static/usage/v7/badge/theming/colors/index.md +++ b/static/usage/v7/badge/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md b/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md index 950e96b4e80..cf47682b14d 100644 --- a/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md @@ -5,4 +5,4 @@ ion-badge { --padding-end: 20px; --padding-start: 20px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/badge/theming/css-properties/index.md b/static/usage/v7/badge/theming/css-properties/index.md index 3fdf7e333a1..1e639aa34ff 100644 --- a/static/usage/v7/badge/theming/css-properties/index.md +++ b/static/usage/v7/badge/theming/css-properties/index.md @@ -10,9 +10,9 @@ 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/v7/badge/theming/css-properties/react/main_css.md b/static/usage/v7/badge/theming/css-properties/react/main_css.md index 950e96b4e80..cf47682b14d 100644 --- a/static/usage/v7/badge/theming/css-properties/react/main_css.md +++ b/static/usage/v7/badge/theming/css-properties/react/main_css.md @@ -5,4 +5,4 @@ ion-badge { --padding-end: 20px; --padding-start: 20px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md index 76a545d6a8e..926479c1e85 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md @@ -7,4 +7,4 @@ Film 35 mm -``` \ No newline at end of file +``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md index c6f75cb1155..f948400973a 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md @@ -8,8 +8,8 @@ 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/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md index f88b8a6e322..fdd63471ed4 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md @@ -18,14 +18,14 @@ components: { IonBreadcrumb, IonBreadcrumbs }, data() { return { - maxBreadcrumbs: 4 - } + maxBreadcrumbs: 4, + }; }, methods: { expandBreadcrumbs() { this.maxBreadcrumbs = undefined; - } - } + }, + }, }); ``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md index 3df433d1891..f34494aeeae 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md index 48e8a4ed82f..332d3fa32cd 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md index 2c5ee51a9b7..e3c0462a148 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md @@ -22,4 +22,4 @@ -``` \ No newline at end of file +``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md index 2e2ca803c4a..ad488a6cd6d 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md @@ -8,9 +8,9 @@ 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/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md index 007fb9a4a1e..1d22085a5b1 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md @@ -18,12 +18,12 @@ const popover = document.querySelector('ion-popover'); const popoverList = document.querySelector('ion-popover ion-list'); - breadcrumbs.addEventListener('ionCollapsedClick', e => { + breadcrumbs.addEventListener('ionCollapsedClick', (e) => { let listHTML = ``; e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => { listHTML += ` ${breadcrumb.textContent} @@ -36,6 +36,6 @@ popover.isOpen = true; }); - popover.addEventListener('didDismiss', () => popover.isOpen = false); + popover.addEventListener('didDismiss', () => (popover.isOpen = false)); ``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md index 72cc6520e3c..66ccc22bfe3 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md @@ -27,10 +27,7 @@ function Example() { {collapsedBreadcrumbs.map((breadcrumb, i) => ( - + {breadcrumb.textContent} ))} diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md index 318f64f8547..54368fa7213 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md @@ -24,25 +24,25 @@ -``` \ No newline at end of file +``` diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/index.md b/static/usage/v7/breadcrumbs/icons/custom-separators/index.md index 4b42e7b7e40..8feb0c84894 100644 --- a/static/usage/v7/breadcrumbs/icons/custom-separators/index.md +++ b/static/usage/v7/breadcrumbs/icons/custom-separators/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md index f836a85455f..f0849705aab 100644 --- a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md +++ b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md @@ -29,7 +29,7 @@ components: { IonBreadcrumb, IonBreadcrumbs, IonIcon }, setup() { return { arrowForwardCircle }; - } + }, }); ``` diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md index 387f0c12e55..b2035669ab2 100644 --- a/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md +++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/breadcrumbs/theming/colors/index.md b/static/usage/v7/breadcrumbs/theming/colors/index.md index c100fffe65d..399a1a2a020 100644 --- a/static/usage/v7/breadcrumbs/theming/colors/index.md +++ b/static/usage/v7/breadcrumbs/theming/colors/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md index 338babc9c79..3dc7c4640ad 100644 --- a/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md @@ -4,4 +4,4 @@ ion-breadcrumb { --color-active: rgb(150, 112, 220); --color-hover: rgb(103, 61, 180); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/index.md b/static/usage/v7/breadcrumbs/theming/css-properties/index.md index d808d24927b..27d163c3f2a 100644 --- a/static/usage/v7/breadcrumbs/theming/css-properties/index.md +++ b/static/usage/v7/breadcrumbs/theming/css-properties/index.md @@ -10,8 +10,8 @@ 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/v7/breadcrumbs/theming/css-properties/react/main_css.md b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md index 338babc9c79..3dc7c4640ad 100644 --- a/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md +++ b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md @@ -4,4 +4,4 @@ ion-breadcrumb { --color-active: rgb(150, 112, 220); --color-hover: rgb(103, 61, 180); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/button/basic/angular.md b/static/usage/v7/button/basic/angular.md index 44ba5831426..d313d7dcd23 100644 --- a/static/usage/v7/button/basic/angular.md +++ b/static/usage/v7/button/basic/angular.md @@ -1,4 +1,3 @@ ```html -Default -Disabled +Default Disabled ``` diff --git a/static/usage/v7/button/basic/javascript.md b/static/usage/v7/button/basic/javascript.md index 8296ef7f42a..e298f5a1246 100644 --- a/static/usage/v7/button/basic/javascript.md +++ b/static/usage/v7/button/basic/javascript.md @@ -1,4 +1,3 @@ ```html -Default -Disabled +Default Disabled ``` diff --git a/static/usage/v7/button/expand/angular.md b/static/usage/v7/button/expand/angular.md index ca3f5093b84..b49d2c767ae 100644 --- a/static/usage/v7/button/expand/angular.md +++ b/static/usage/v7/button/expand/angular.md @@ -1,4 +1,3 @@ ```html -Block -Full +Block Full ``` diff --git a/static/usage/v7/button/expand/javascript.md b/static/usage/v7/button/expand/javascript.md index ca3f5093b84..b49d2c767ae 100644 --- a/static/usage/v7/button/expand/javascript.md +++ b/static/usage/v7/button/expand/javascript.md @@ -1,4 +1,3 @@ ```html -Block -Full +Block Full ``` diff --git a/static/usage/v7/button/icons/vue.md b/static/usage/v7/button/icons/vue.md index 356fc5617dc..03d8648c878 100644 --- a/static/usage/v7/button/icons/vue.md +++ b/static/usage/v7/button/icons/vue.md @@ -23,8 +23,8 @@ export default defineComponent({ components: { IonButton, IonIcon }, setup() { - return { star } - } + return { star }; + }, }); ``` diff --git a/static/usage/v7/button/shape/angular.md b/static/usage/v7/button/shape/angular.md index 97ed756261a..a37193d9013 100644 --- a/static/usage/v7/button/shape/angular.md +++ b/static/usage/v7/button/shape/angular.md @@ -1,4 +1,3 @@ ```html -Default -Round +Default Round ``` diff --git a/static/usage/v7/button/shape/javascript.md b/static/usage/v7/button/shape/javascript.md index 97ed756261a..a37193d9013 100644 --- a/static/usage/v7/button/shape/javascript.md +++ b/static/usage/v7/button/shape/javascript.md @@ -1,4 +1,3 @@ ```html -Default -Round +Default Round ``` diff --git a/static/usage/v7/button/theming/css-properties/index.md b/static/usage/v7/button/theming/css-properties/index.md index 32f67b6f002..6f79f6e259d 100644 --- a/static/usage/v7/button/theming/css-properties/index.md +++ b/static/usage/v7/button/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/button/theming/css-properties/react/main_css.md b/static/usage/v7/button/theming/css-properties/react/main_css.md index 1fba4c49972..fa985cbe82f 100644 --- a/static/usage/v7/button/theming/css-properties/react/main_css.md +++ b/static/usage/v7/button/theming/css-properties/react/main_css.md @@ -1,4 +1,3 @@ - ```css ion-button { --background: #93e9be; diff --git a/static/usage/v7/button/theming/css-properties/react/main_tsx.md b/static/usage/v7/button/theming/css-properties/react/main_tsx.md index 6e0cddd9709..c8c432e1b9c 100644 --- a/static/usage/v7/button/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/button/theming/css-properties/react/main_tsx.md @@ -5,9 +5,7 @@ import { IonButton } from '@ionic/react'; import './main.css'; function Example() { - return ( - Custom Button - ); + return Custom Button; } export default Example; ``` diff --git a/static/usage/v7/buttons/types/angular.md b/static/usage/v7/buttons/types/angular.md index 183c70105b1..9562dbb3b47 100644 --- a/static/usage/v7/buttons/types/angular.md +++ b/static/usage/v7/buttons/types/angular.md @@ -1,15 +1,11 @@ ```html - - Favorite - + Favorite Default Buttons - - Delete - + Delete diff --git a/static/usage/v7/buttons/types/index.md b/static/usage/v7/buttons/types/index.md index 1427b4536f6..e6d680e5582 100644 --- a/static/usage/v7/buttons/types/index.md +++ b/static/usage/v7/buttons/types/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/buttons/types/javascript.md b/static/usage/v7/buttons/types/javascript.md index 183c70105b1..9562dbb3b47 100644 --- a/static/usage/v7/buttons/types/javascript.md +++ b/static/usage/v7/buttons/types/javascript.md @@ -1,15 +1,11 @@ ```html - - Favorite - + Favorite Default Buttons - - Delete - + Delete diff --git a/static/usage/v7/buttons/types/react.md b/static/usage/v7/buttons/types/react.md index 8d3b3edfe9e..01baca04d74 100644 --- a/static/usage/v7/buttons/types/react.md +++ b/static/usage/v7/buttons/types/react.md @@ -8,15 +8,11 @@ function Example() { <> - - Favorite - + Favorite Default Buttons - - Delete - + Delete @@ -86,5 +82,4 @@ function Example() { ); } export default Example; - ``` diff --git a/static/usage/v7/buttons/types/vue.md b/static/usage/v7/buttons/types/vue.md index 9a101caa402..60b04a067da 100644 --- a/static/usage/v7/buttons/types/vue.md +++ b/static/usage/v7/buttons/types/vue.md @@ -2,15 +2,11 @@ diff --git a/static/usage/v7/card/theming/css-properties/index.md b/static/usage/v7/card/theming/css-properties/index.md index cc473c03d32..e2190ad8f88 100644 --- a/static/usage/v7/card/theming/css-properties/index.md +++ b/static/usage/v7/card/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/card/theming/css-properties/react/main_tsx.md b/static/usage/v7/card/theming/css-properties/react/main_tsx.md index 251b18ce24d..a5b4ce3af35 100644 --- a/static/usage/v7/card/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/card/theming/css-properties/react/main_tsx.md @@ -12,9 +12,7 @@ function Example() { Card Subtitle - - Here's a small text description for the card content. Nothing more, nothing less. - + Here's a small text description for the card content. Nothing more, nothing less. ); } diff --git a/static/usage/v7/checkbox/basic/index.md b/static/usage/v7/checkbox/basic/index.md index e238ae9c63f..34068bb5a04 100644 --- a/static/usage/v7/checkbox/basic/index.md +++ b/static/usage/v7/checkbox/basic/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/checkbox/basic/react.md b/static/usage/v7/checkbox/basic/react.md index 2d4159efbb2..b2fbcb695d3 100644 --- a/static/usage/v7/checkbox/basic/react.md +++ b/static/usage/v7/checkbox/basic/react.md @@ -3,9 +3,7 @@ import React from 'react'; import { IonCheckbox } from '@ionic/react'; function Example() { - return ( - I agree to the terms and conditions - ); + return I agree to the terms and conditions; } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v7/checkbox/basic/vue.md b/static/usage/v7/checkbox/basic/vue.md index 9bc17fdb9ea..fc8c1ff781f 100644 --- a/static/usage/v7/checkbox/basic/vue.md +++ b/static/usage/v7/checkbox/basic/vue.md @@ -8,7 +8,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonCheckbox } + components: { IonCheckbox }, }); ``` diff --git a/static/usage/v7/checkbox/indeterminate/index.md b/static/usage/v7/checkbox/indeterminate/index.md index bcc02a761e7..ea3f73b30c0 100644 --- a/static/usage/v7/checkbox/indeterminate/index.md +++ b/static/usage/v7/checkbox/indeterminate/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/checkbox/indeterminate/react.md b/static/usage/v7/checkbox/indeterminate/react.md index 117af56bc35..9cfba0ca72b 100644 --- a/static/usage/v7/checkbox/indeterminate/react.md +++ b/static/usage/v7/checkbox/indeterminate/react.md @@ -3,9 +3,7 @@ import React from 'react'; import { IonCheckbox } from '@ionic/react'; function Example() { - return ( - Indeterminate checkbox - ); + return Indeterminate checkbox; } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v7/checkbox/indeterminate/vue.md b/static/usage/v7/checkbox/indeterminate/vue.md index 5d08480d9a3..ff87a637bd6 100644 --- a/static/usage/v7/checkbox/indeterminate/vue.md +++ b/static/usage/v7/checkbox/indeterminate/vue.md @@ -8,7 +8,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonCheckbox } + components: { IonCheckbox }, }); ``` diff --git a/static/usage/v7/checkbox/justify/angular.md b/static/usage/v7/checkbox/justify/angular.md index f253722afec..9205434ceaa 100644 --- a/static/usage/v7/checkbox/justify/angular.md +++ b/static/usage/v7/checkbox/justify/angular.md @@ -3,11 +3,11 @@ Packed at the Start of Line - + Packed at the End of Line - + Space Between Label and Control diff --git a/static/usage/v7/checkbox/justify/javascript.md b/static/usage/v7/checkbox/justify/javascript.md index f253722afec..9205434ceaa 100644 --- a/static/usage/v7/checkbox/justify/javascript.md +++ b/static/usage/v7/checkbox/justify/javascript.md @@ -3,11 +3,11 @@ Packed at the Start of Line - + Packed at the End of Line - + Space Between Label and Control diff --git a/static/usage/v7/checkbox/justify/react.md b/static/usage/v7/checkbox/justify/react.md index fd92e9f1fa0..667449c7808 100644 --- a/static/usage/v7/checkbox/justify/react.md +++ b/static/usage/v7/checkbox/justify/react.md @@ -8,11 +8,11 @@ function Example() { Packed at the Start of Line - + Packed at the End of Line - + Space Between Label and Control diff --git a/static/usage/v7/checkbox/justify/vue.md b/static/usage/v7/checkbox/justify/vue.md index 5659a826bc6..ed34f0dcdc7 100644 --- a/static/usage/v7/checkbox/justify/vue.md +++ b/static/usage/v7/checkbox/justify/vue.md @@ -4,11 +4,11 @@ Packed at the Start of Line - + Packed at the End of Line - + Space Between Label and Control diff --git a/static/usage/v7/checkbox/label-placement/react.md b/static/usage/v7/checkbox/label-placement/react.md index 42520178b60..7c9bf728131 100644 --- a/static/usage/v7/checkbox/label-placement/react.md +++ b/static/usage/v7/checkbox/label-placement/react.md @@ -6,13 +6,13 @@ function Example() { return ( <> Label at the Start - +
- + Label at the End - +
- + Fixed Width Label ); diff --git a/static/usage/v7/checkbox/label-placement/vue.md b/static/usage/v7/checkbox/label-placement/vue.md index 31697dd3694..942149628cd 100644 --- a/static/usage/v7/checkbox/label-placement/vue.md +++ b/static/usage/v7/checkbox/label-placement/vue.md @@ -1,13 +1,13 @@ ```html diff --git a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md index f5f63bf8c22..5889591fd18 100644 --- a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md @@ -8,4 +8,4 @@ ion-checkbox::part(container) { border-radius: 6px; border: 2px solid #6815ec; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md index 29d3d419b61..ba23decbdba 100644 --- a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Themed checkbox -``` \ No newline at end of file +``` diff --git a/static/usage/v7/checkbox/theming/css-properties/index.md b/static/usage/v7/checkbox/theming/css-properties/index.md index 51d619f8ccf..7320900989f 100644 --- a/static/usage/v7/checkbox/theming/css-properties/index.md +++ b/static/usage/v7/checkbox/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/checkbox/theming/css-properties/javascript.md b/static/usage/v7/checkbox/theming/css-properties/javascript.md index a247dee9a04..90a415bf906 100644 --- a/static/usage/v7/checkbox/theming/css-properties/javascript.md +++ b/static/usage/v7/checkbox/theming/css-properties/javascript.md @@ -6,7 +6,7 @@ --size: 32px; --checkbox-background-checked: #6815ec; } - + ion-checkbox::part(container) { border-radius: 6px; border: 2px solid #6815ec; diff --git a/static/usage/v7/checkbox/theming/css-properties/react/main_css.md b/static/usage/v7/checkbox/theming/css-properties/react/main_css.md index f5f63bf8c22..5889591fd18 100644 --- a/static/usage/v7/checkbox/theming/css-properties/react/main_css.md +++ b/static/usage/v7/checkbox/theming/css-properties/react/main_css.md @@ -8,4 +8,4 @@ ion-checkbox::part(container) { border-radius: 6px; border: 2px solid #6815ec; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md b/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md index 2fb46fb7ba5..8408e5825f2 100644 --- a/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md @@ -5,9 +5,7 @@ import { IonCheckbox } from '@ionic/react'; import './main.css'; function Example() { - return ( - Themed checkbox - ); + return Themed checkbox; } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v7/checkbox/theming/css-properties/vue.md b/static/usage/v7/checkbox/theming/css-properties/vue.md index 7c4f5fd698b..802cfa40b25 100644 --- a/static/usage/v7/checkbox/theming/css-properties/vue.md +++ b/static/usage/v7/checkbox/theming/css-properties/vue.md @@ -8,7 +8,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonCheckbox } + components: { IonCheckbox }, }); @@ -17,7 +17,7 @@ --size: 32px; --checkbox-background-checked: #6815ec; } - + ion-checkbox::part(container) { border-radius: 6px; border: 2px solid #6815ec; diff --git a/static/usage/v7/chip/theming/css-properties/index.md b/static/usage/v7/chip/theming/css-properties/index.md index 2ce8f542f9c..be9f519d2c1 100644 --- a/static/usage/v7/chip/theming/css-properties/index.md +++ b/static/usage/v7/chip/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/content/basic/index.md b/static/usage/v7/content/basic/index.md index 2e49772c97d..57db7581deb 100644 --- a/static/usage/v7/content/basic/index.md +++ b/static/usage/v7/content/basic/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/content/fixed/angular.md b/static/usage/v7/content/fixed/angular.md index 178d8338f25..82cb3007125 100644 --- a/static/usage/v7/content/fixed/angular.md +++ b/static/usage/v7/content/fixed/angular.md @@ -5,10 +5,50 @@ 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.

+

+ 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/v7/content/fixed/angular/example_component_css.md b/static/usage/v7/content/fixed/angular/example_component_css.md index e5931e4d94f..1146da9a4b1 100644 --- a/static/usage/v7/content/fixed/angular/example_component_css.md +++ b/static/usage/v7/content/fixed/angular/example_component_css.md @@ -1,5 +1,5 @@ ```css -ion-button[slot="fixed"] { +ion-button[slot='fixed'] { top: 50%; right: 20px; } diff --git a/static/usage/v7/content/fixed/angular/example_component_html.md b/static/usage/v7/content/fixed/angular/example_component_html.md index 178d8338f25..82cb3007125 100644 --- a/static/usage/v7/content/fixed/angular/example_component_html.md +++ b/static/usage/v7/content/fixed/angular/example_component_html.md @@ -5,10 +5,50 @@ 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.

+

+ 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/v7/content/fixed/index.md b/static/usage/v7/content/fixed/index.md index 6ff6db1f65e..90b5744b211 100644 --- a/static/usage/v7/content/fixed/index.md +++ b/static/usage/v7/content/fixed/index.md @@ -11,8 +11,8 @@ 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/v7/content/fixed/javascript.md b/static/usage/v7/content/fixed/javascript.md index 2a577f1d76a..8613ca29a0c 100644 --- a/static/usage/v7/content/fixed/javascript.md +++ b/static/usage/v7/content/fixed/javascript.md @@ -5,15 +5,55 @@ 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.

+

+ 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/v7/content/fullscreen/react/main_css.md b/static/usage/v7/content/fullscreen/react/main_css.md index a62d625ae0a..69fa48ad49e 100644 --- a/static/usage/v7/content/fullscreen/react/main_css.md +++ b/static/usage/v7/content/fullscreen/react/main_css.md @@ -1,5 +1,5 @@ ```css ion-toolbar { - --opacity: .5 + --opacity: 0.5; } ``` diff --git a/static/usage/v7/content/fullscreen/react/main_tsx.md b/static/usage/v7/content/fullscreen/react/main_tsx.md index ca324631897..7302c484489 100644 --- a/static/usage/v7/content/fullscreen/react/main_tsx.md +++ b/static/usage/v7/content/fullscreen/react/main_tsx.md @@ -9,25 +9,61 @@ function Example() { <> - - Header - + 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.

+

+ 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 - + Footer diff --git a/static/usage/v7/content/fullscreen/vue.md b/static/usage/v7/content/fullscreen/vue.md index e4bd0c3a59f..3de93600da7 100644 --- a/static/usage/v7/content/fullscreen/vue.md +++ b/static/usage/v7/content/fullscreen/vue.md @@ -2,25 +2,61 @@ @@ -36,7 +72,7 @@ ``` diff --git a/static/usage/v7/content/header-footer/angular.md b/static/usage/v7/content/header-footer/angular.md index 4a177d1d58f..35a9aadc4c1 100644 --- a/static/usage/v7/content/header-footer/angular.md +++ b/static/usage/v7/content/header-footer/angular.md @@ -1,9 +1,7 @@ ```html - - Header - + Header @@ -18,9 +16,7 @@ - - Footer - + Footer ``` diff --git a/static/usage/v7/content/header-footer/index.md b/static/usage/v7/content/header-footer/index.md index d045cac7fa7..24dc3fbed81 100644 --- a/static/usage/v7/content/header-footer/index.md +++ b/static/usage/v7/content/header-footer/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/content/header-footer/javascript.md b/static/usage/v7/content/header-footer/javascript.md index 4a177d1d58f..35a9aadc4c1 100644 --- a/static/usage/v7/content/header-footer/javascript.md +++ b/static/usage/v7/content/header-footer/javascript.md @@ -1,9 +1,7 @@ ```html - - Header - + Header @@ -18,9 +16,7 @@ - - Footer - + Footer ``` diff --git a/static/usage/v7/content/header-footer/react.md b/static/usage/v7/content/header-footer/react.md index 4ffff834f2a..e075e96cd81 100644 --- a/static/usage/v7/content/header-footer/react.md +++ b/static/usage/v7/content/header-footer/react.md @@ -7,9 +7,7 @@ function Example() { <> - - Header - + Header @@ -24,9 +22,7 @@ function Example() { - - Footer - + Footer diff --git a/static/usage/v7/content/header-footer/vue.md b/static/usage/v7/content/header-footer/vue.md index 8bd052a6460..dc914aee8f5 100644 --- a/static/usage/v7/content/header-footer/vue.md +++ b/static/usage/v7/content/header-footer/vue.md @@ -2,9 +2,7 @@ diff --git a/static/usage/v7/content/scroll-events/angular/example_component_html.md b/static/usage/v7/content/scroll-events/angular/example_component_html.md index a1c3aac558f..4a66edad40a 100644 --- a/static/usage/v7/content/scroll-events/angular/example_component_html.md +++ b/static/usage/v7/content/scroll-events/angular/example_component_html.md @@ -6,13 +6,54 @@ (ionScrollStart)="handleScrollStart()" (ionScroll)="handleScroll($any($event))" (ionScrollEnd)="handleScrollEnd()" - class="ion-padding"> + class="ion-padding" +>

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.

+

+ 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/v7/content/scroll-events/index.md b/static/usage/v7/content/scroll-events/index.md index d908468b2f5..56b0fafa069 100644 --- a/static/usage/v7/content/scroll-events/index.md +++ b/static/usage/v7/content/scroll-events/index.md @@ -8,8 +8,8 @@ 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/v7/content/scroll-events/javascript.md b/static/usage/v7/content/scroll-events/javascript.md index 5cc4e537dd6..ed54f080780 100644 --- a/static/usage/v7/content/scroll-events/javascript.md +++ b/static/usage/v7/content/scroll-events/javascript.md @@ -2,11 +2,51 @@

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.

+

+ 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/v7/content/scroll-methods/angular/example_component_html.md b/static/usage/v7/content/scroll-methods/angular/example_component_html.md index ffa8c913e3e..e585b97e78d 100644 --- a/static/usage/v7/content/scroll-methods/angular/example_component_html.md +++ b/static/usage/v7/content/scroll-methods/angular/example_component_html.md @@ -4,11 +4,51 @@ 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.

+

+ 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/v7/content/scroll-methods/index.md b/static/usage/v7/content/scroll-methods/index.md index 97e328a25cc..f1a9f03f45d 100644 --- a/static/usage/v7/content/scroll-methods/index.md +++ b/static/usage/v7/content/scroll-methods/index.md @@ -8,8 +8,8 @@ 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/v7/content/scroll-methods/javascript.md b/static/usage/v7/content/scroll-methods/javascript.md index b8f3bb1e13e..a53fbc7767b 100644 --- a/static/usage/v7/content/scroll-methods/javascript.md +++ b/static/usage/v7/content/scroll-methods/javascript.md @@ -4,11 +4,51 @@ 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.

+

+ 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/v7/content/scroll-methods/react.md b/static/usage/v7/content/scroll-methods/react.md index 9526a8884a4..1d2d105e984 100644 --- a/static/usage/v7/content/scroll-methods/react.md +++ b/static/usage/v7/content/scroll-methods/react.md @@ -21,15 +21,59 @@ function Example() {

Click on the buttons to scroll the content.

- Scroll to Bottom + + 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.

+

+ 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 + + Scroll to Top + ); } diff --git a/static/usage/v7/content/scroll-methods/vue.md b/static/usage/v7/content/scroll-methods/vue.md index c3e63abb721..5ac6e8ee1fc 100644 --- a/static/usage/v7/content/scroll-methods/vue.md +++ b/static/usage/v7/content/scroll-methods/vue.md @@ -5,11 +5,51 @@ 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.

+

+ 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 @@ -32,7 +72,7 @@ // goes to the top instead of instantly this.$refs.content.$el.scrollToTop(500); }, - } + }, }); ``` diff --git a/static/usage/v7/content/theming/colors/index.md b/static/usage/v7/content/theming/colors/index.md index 207e0aaaa7f..b54287eae68 100644 --- a/static/usage/v7/content/theming/colors/index.md +++ b/static/usage/v7/content/theming/colors/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/content/theming/css-properties/index.md b/static/usage/v7/content/theming/css-properties/index.md index 54c7fe12094..7bea2e18b1d 100644 --- a/static/usage/v7/content/theming/css-properties/index.md +++ b/static/usage/v7/content/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/content/theming/css-shadow-parts/index.md b/static/usage/v7/content/theming/css-shadow-parts/index.md index ce8ccc6ed3f..c44af4bf36a 100644 --- a/static/usage/v7/content/theming/css-shadow-parts/index.md +++ b/static/usage/v7/content/theming/css-shadow-parts/index.md @@ -11,8 +11,8 @@ 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/v7/datetime-button/basic/index.md b/static/usage/v7/datetime-button/basic/index.md index a55a9640c0f..eb6585878ed 100644 --- a/static/usage/v7/datetime-button/basic/index.md +++ b/static/usage/v7/datetime-button/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/datetime-button/basic/react.md b/static/usage/v7/datetime-button/basic/react.md index 90eaaba82af..62529cdb75f 100644 --- a/static/usage/v7/datetime-button/basic/react.md +++ b/static/usage/v7/datetime-button/basic/react.md @@ -5,7 +5,7 @@ function Example() { return ( <> - + diff --git a/static/usage/v7/datetime-button/basic/vue.md b/static/usage/v7/datetime-button/basic/vue.md index 1272d768b88..a595c27e409 100644 --- a/static/usage/v7/datetime-button/basic/vue.md +++ b/static/usage/v7/datetime-button/basic/vue.md @@ -1,7 +1,7 @@ ```html diff --git a/static/usage/v7/grid/offset-responsive/index.md b/static/usage/v7/grid/offset-responsive/index.md index 8ed07e871b5..c47287e0023 100644 --- a/static/usage/v7/grid/offset-responsive/index.md +++ b/static/usage/v7/grid/offset-responsive/index.md @@ -11,8 +11,8 @@ 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/v7/grid/offset-responsive/react/main_tsx.md b/static/usage/v7/grid/offset-responsive/react/main_tsx.md index 482f957cde8..8721fbfc523 100644 --- a/static/usage/v7/grid/offset-responsive/react/main_tsx.md +++ b/static/usage/v7/grid/offset-responsive/react/main_tsx.md @@ -31,8 +31,12 @@ function Example() { Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up - 1 - 2 + + 1 + + + 2 + diff --git a/static/usage/v7/grid/offset/index.md b/static/usage/v7/grid/offset/index.md index 27a55412d53..f9476caf18f 100644 --- a/static/usage/v7/grid/offset/index.md +++ b/static/usage/v7/grid/offset/index.md @@ -11,8 +11,8 @@ 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/v7/grid/offset/react/main_tsx.md b/static/usage/v7/grid/offset/react/main_tsx.md index 99add2f8a44..e24f5a47918 100644 --- a/static/usage/v7/grid/offset/react/main_tsx.md +++ b/static/usage/v7/grid/offset/react/main_tsx.md @@ -7,7 +7,9 @@ import './main.css'; function Example() { return ( <> - Column 2 has offset set to "3" + + Column 2 has offset set to "3" + 1 @@ -16,7 +18,9 @@ function Example() { - Column 5 has offset set to "2" + + Column 5 has offset set to "2" + 1 @@ -27,10 +31,14 @@ function Example() { - Column 1 has offset set to "4" + + Column 1 has offset set to "4" + - 1 + + 1 + 2 diff --git a/static/usage/v7/grid/push-pull-responsive/index.md b/static/usage/v7/grid/push-pull-responsive/index.md index cd608eaae70..ee29baff5ab 100644 --- a/static/usage/v7/grid/push-pull-responsive/index.md +++ b/static/usage/v7/grid/push-pull-responsive/index.md @@ -11,8 +11,8 @@ 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/v7/grid/push-pull-responsive/react/main_tsx.md b/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md index 3f6e2879e08..85955f3ebd2 100644 --- a/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md +++ b/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md @@ -28,12 +28,24 @@ function Example() { Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up - 1 - 2 - 3 - 4 - 5 - 6 + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + diff --git a/static/usage/v7/grid/push-pull/angular/example_component_html.md b/static/usage/v7/grid/push-pull/angular/example_component_html.md index cb8190ef9e9..a93c12fef81 100644 --- a/static/usage/v7/grid/push-pull/angular/example_component_html.md +++ b/static/usage/v7/grid/push-pull/angular/example_component_html.md @@ -8,7 +8,10 @@ -Column 2 has push set to "4" and column 3 & 4 have pull set to "2" +Column 2 has push set to "4" and column 3 & 4 have pull set to + "2" 1 diff --git a/static/usage/v7/grid/push-pull/index.md b/static/usage/v7/grid/push-pull/index.md index a723dfd08f1..03eac248909 100644 --- a/static/usage/v7/grid/push-pull/index.md +++ b/static/usage/v7/grid/push-pull/index.md @@ -11,8 +11,8 @@ 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/v7/grid/push-pull/javascript.md b/static/usage/v7/grid/push-pull/javascript.md index 6dca0e83ec4..b911da1791b 100644 --- a/static/usage/v7/grid/push-pull/javascript.md +++ b/static/usage/v7/grid/push-pull/javascript.md @@ -8,7 +8,10 @@ -Column 2 has push set to "4" and column 3 & 4 have pull set to "2" +Column 2 has push set to "4" and column 3 & 4 have pull set to + "2" 1 diff --git a/static/usage/v7/grid/push-pull/react/main_tsx.md b/static/usage/v7/grid/push-pull/react/main_tsx.md index 6b087b72b77..aa7c1d1c809 100644 --- a/static/usage/v7/grid/push-pull/react/main_tsx.md +++ b/static/usage/v7/grid/push-pull/react/main_tsx.md @@ -7,7 +7,10 @@ import './main.css'; function Example() { return ( <> - Column 1 has push set to "4" and column 2 has pull set to "4" + + Column 1 has push set to "4" and column 2 has pull set to{' '} + "4" + 1 @@ -16,7 +19,10 @@ function Example() { - Column 2 has push set to "4" and column 3 & 4 have pull set to "2" + + Column 2 has push set to "4" and column 3 & 4 have pull set to{' '} + "2" + 1 @@ -28,11 +34,18 @@ function Example() { - Column 1 has push set to "3" and column 2 has pull set to "9" + + Column 1 has push set to "3" and column 2 has pull set to{' '} + "9" + - 1 - 2 + + 1 + + + 2 + diff --git a/static/usage/v7/grid/push-pull/vue.md b/static/usage/v7/grid/push-pull/vue.md index 2775067f7a7..b5146e95e0e 100644 --- a/static/usage/v7/grid/push-pull/vue.md +++ b/static/usage/v7/grid/push-pull/vue.md @@ -1,6 +1,9 @@ ```html diff --git a/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md b/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md index b54ba9d2afa..742d531cb9d 100644 --- a/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md +++ b/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md @@ -9,24 +9,61 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/custom-scroll-target/index.md b/static/usage/v7/header/custom-scroll-target/index.md index cf5ad71dd63..ce4c89f9985 100644 --- a/static/usage/v7/header/custom-scroll-target/index.md +++ b/static/usage/v7/header/custom-scroll-target/index.md @@ -11,8 +11,8 @@ 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/v7/header/custom-scroll-target/react/main_tsx.md b/static/usage/v7/header/custom-scroll-target/react/main_tsx.md index bf6d13f26ec..923ea715aa7 100644 --- a/static/usage/v7/header/custom-scroll-target/react/main_tsx.md +++ b/static/usage/v7/header/custom-scroll-target/react/main_tsx.md @@ -17,24 +17,63 @@ function Example() {

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/custom-scroll-target/vue.md b/static/usage/v7/header/custom-scroll-target/vue.md index 73565d9ab18..84aac1c56fe 100644 --- a/static/usage/v7/header/custom-scroll-target/vue.md +++ b/static/usage/v7/header/custom-scroll-target/vue.md @@ -10,24 +10,61 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/fade/angular.md b/static/usage/v7/header/fade/angular.md index 72e55ffc58c..473ad54c8da 100644 --- a/static/usage/v7/header/fade/angular.md +++ b/static/usage/v7/header/fade/angular.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/fade/index.md b/static/usage/v7/header/fade/index.md index 328ba025ada..c478007a6b4 100644 --- a/static/usage/v7/header/fade/index.md +++ b/static/usage/v7/header/fade/index.md @@ -6,10 +6,10 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/header/fade/javascript.md b/static/usage/v7/header/fade/javascript.md index 72e55ffc58c..473ad54c8da 100644 --- a/static/usage/v7/header/fade/javascript.md +++ b/static/usage/v7/header/fade/javascript.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/fade/react.md b/static/usage/v7/header/fade/react.md index 453f32c4db4..085bea0296d 100644 --- a/static/usage/v7/header/fade/react.md +++ b/static/usage/v7/header/fade/react.md @@ -14,24 +14,61 @@ function Example() {

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/fade/vue.md b/static/usage/v7/header/fade/vue.md index 44327bf809c..264038c103c 100644 --- a/static/usage/v7/header/fade/vue.md +++ b/static/usage/v7/header/fade/vue.md @@ -9,24 +9,61 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/no-border/index.md b/static/usage/v7/header/no-border/index.md index e7300fb2610..7801be95092 100644 --- a/static/usage/v7/header/no-border/index.md +++ b/static/usage/v7/header/no-border/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/header/translucent/angular.md b/static/usage/v7/header/translucent/angular.md index f2779c7d5c9..657a88bf066 100644 --- a/static/usage/v7/header/translucent/angular.md +++ b/static/usage/v7/header/translucent/angular.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/translucent/index.md b/static/usage/v7/header/translucent/index.md index fe8e8b04a8e..44926cb52c9 100644 --- a/static/usage/v7/header/translucent/index.md +++ b/static/usage/v7/header/translucent/index.md @@ -6,10 +6,10 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/header/translucent/javascript.md b/static/usage/v7/header/translucent/javascript.md index e03deeda2a5..5c0048c019c 100644 --- a/static/usage/v7/header/translucent/javascript.md +++ b/static/usage/v7/header/translucent/javascript.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/translucent/react.md b/static/usage/v7/header/translucent/react.md index 862211d839b..def835913c3 100644 --- a/static/usage/v7/header/translucent/react.md +++ b/static/usage/v7/header/translucent/react.md @@ -14,24 +14,61 @@ function Example() {

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/translucent/vue.md b/static/usage/v7/header/translucent/vue.md index 34a4c740014..26370009d44 100644 --- a/static/usage/v7/header/translucent/vue.md +++ b/static/usage/v7/header/translucent/vue.md @@ -9,24 +9,61 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/icon/basic/index.md b/static/usage/v7/icon/basic/index.md index c26fa6e35ac..97de04da44c 100644 --- a/static/usage/v7/icon/basic/index.md +++ b/static/usage/v7/icon/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/img/basic/angular.md b/static/usage/v7/img/basic/angular.md index ce4d3d19e0d..61e27f8b9d6 100644 --- a/static/usage/v7/img/basic/angular.md +++ b/static/usage/v7/img/basic/angular.md @@ -1,3 +1,6 @@ ```html - + ``` diff --git a/static/usage/v7/img/basic/javascript.md b/static/usage/v7/img/basic/javascript.md index ce4d3d19e0d..61e27f8b9d6 100644 --- a/static/usage/v7/img/basic/javascript.md +++ b/static/usage/v7/img/basic/javascript.md @@ -1,3 +1,6 @@ ```html - + ``` diff --git a/static/usage/v7/img/basic/react.md b/static/usage/v7/img/basic/react.md index 04c4c086b15..0236cc28976 100644 --- a/static/usage/v7/img/basic/react.md +++ b/static/usage/v7/img/basic/react.md @@ -4,7 +4,10 @@ import { IonImg } from '@ionic/react'; function Example() { return ( - + ); } export default Example; diff --git a/static/usage/v7/img/basic/vue.md b/static/usage/v7/img/basic/vue.md index d8cb2cd2d7f..db4d74618ef 100644 --- a/static/usage/v7/img/basic/vue.md +++ b/static/usage/v7/img/basic/vue.md @@ -1,6 +1,9 @@ ```html ``` diff --git a/static/usage/v7/input/fill/index.md b/static/usage/v7/input/fill/index.md index 10fcef1cb28..e4a4dba5543 100644 --- a/static/usage/v7/input/fill/index.md +++ b/static/usage/v7/input/fill/index.md @@ -5,10 +5,10 @@ import react from './react.md'; import vue from './vue.md'; import angular from './angular.md'; - diff --git a/static/usage/v7/input/fill/react.md b/static/usage/v7/input/fill/react.md index 834ca7f96ea..d62ea62084c 100644 --- a/static/usage/v7/input/fill/react.md +++ b/static/usage/v7/input/fill/react.md @@ -6,9 +6,9 @@ function Example() { return ( <> - +
- + ); diff --git a/static/usage/v7/input/fill/vue.md b/static/usage/v7/input/fill/vue.md index f17fd6e151d..d1f2e440b05 100644 --- a/static/usage/v7/input/fill/vue.md +++ b/static/usage/v7/input/fill/vue.md @@ -1,9 +1,9 @@ ```html diff --git a/static/usage/v7/input/filtering/angular/example_component_html.md b/static/usage/v7/input/filtering/angular/example_component_html.md index da2f4776bd2..31ddc03f197 100644 --- a/static/usage/v7/input/filtering/angular/example_component_html.md +++ b/static/usage/v7/input/filtering/angular/example_component_html.md @@ -2,7 +2,7 @@ { const value = ev.target.value; // Removes non alphanumeric characters - input.value = value.replace(/[^a-zA-Z0-9]+/g,''); + input.value = value.replace(/[^a-zA-Z0-9]+/g, ''); }); -``` \ No newline at end of file +``` diff --git a/static/usage/v7/input/filtering/react.md b/static/usage/v7/input/filtering/react.md index 7218199a3d2..1722f8ad9af 100644 --- a/static/usage/v7/input/filtering/react.md +++ b/static/usage/v7/input/filtering/react.md @@ -3,36 +3,31 @@ import React, { useState, useRef } from 'react'; import { IonInput, IonItem, IonList } from '@ionic/react'; function Example() { - const [inputModel, setInputModel ] = useState(''); + 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,''); - + 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 ( - + ); diff --git a/static/usage/v7/input/filtering/vue.md b/static/usage/v7/input/filtering/vue.md index dd93e9bb2c7..a95e5dcc843 100644 --- a/static/usage/v7/input/filtering/vue.md +++ b/static/usage/v7/input/filtering/vue.md @@ -3,7 +3,7 @@ { const value = ev.target!.value; - + // Removes non alphanumeric characters - const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,''); - + const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, ''); + /** * Update both the state variable and * the component to keep them in sync. */ inputModel.value = filteredValue; - + const inputCmp = ionInputEl.value; if (inputCmp !== undefined) { inputCmp.$el.value = filteredValue; } - } - + }; + return { ionInputEl, inputModel, onInput }; - } + }, }); ``` diff --git a/static/usage/v7/input/helper-error/angular.md b/static/usage/v7/input/helper-error/angular.md index 9f75f6b070f..ba5030c0026 100644 --- a/static/usage/v7/input/helper-error/angular.md +++ b/static/usage/v7/input/helper-error/angular.md @@ -6,7 +6,7 @@ labelPlacement="floating" helperText="Enter a valid email" errorText="Invalid email" - ngModel + ngModel email > ``` diff --git a/static/usage/v7/input/helper-error/index.md b/static/usage/v7/input/helper-error/index.md index 03393f19b24..a0c95dfc139 100644 --- a/static/usage/v7/input/helper-error/index.md +++ b/static/usage/v7/input/helper-error/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/input/helper-error/javascript.md b/static/usage/v7/input/helper-error/javascript.md index 16cd161715d..55d306aa225 100644 --- a/static/usage/v7/input/helper-error/javascript.md +++ b/static/usage/v7/input/helper-error/javascript.md @@ -15,7 +15,9 @@ input.addEventListener('ionBlur', () => markTouched()); const validateEmail = (email) => { - 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])?)*$/); + 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) => { @@ -24,13 +26,13 @@ input.classList.remove('ion-valid'); input.classList.remove('ion-invalid'); - if (value === "") return; + if (value === '') return; validateEmail(value) ? input.classList.add('ion-valid') : input.classList.add('ion-invalid'); - } + }; const markTouched = () => { input.classList.add('ion-touched'); - } + }; ``` diff --git a/static/usage/v7/input/helper-error/vue.md b/static/usage/v7/input/helper-error/vue.md index 33934b31ae2..ce801d04ac7 100644 --- a/static/usage/v7/input/helper-error/vue.md +++ b/static/usage/v7/input/helper-error/vue.md @@ -21,7 +21,9 @@ components: { IonInput }, methods: { validateEmail(email) { - 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])?)*$/); + 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])?)*$/ + ); }, validate(ev) { @@ -38,8 +40,8 @@ }, markTouched() { - this.$refs.input.$el.classList.add('ion-touched') - } + this.$refs.input.$el.classList.add('ion-touched'); + }, }, }); diff --git a/static/usage/v7/input/label-placement/angular.md b/static/usage/v7/input/label-placement/angular.md index 1257ff9c641..151adb55b5d 100644 --- a/static/usage/v7/input/label-placement/angular.md +++ b/static/usage/v7/input/label-placement/angular.md @@ -3,15 +3,15 @@ - + - + - + diff --git a/static/usage/v7/input/label-placement/javascript.md b/static/usage/v7/input/label-placement/javascript.md index e08cf249e14..f9c79fc46ae 100644 --- a/static/usage/v7/input/label-placement/javascript.md +++ b/static/usage/v7/input/label-placement/javascript.md @@ -3,15 +3,15 @@ - + - + - + diff --git a/static/usage/v7/input/label-placement/react.md b/static/usage/v7/input/label-placement/react.md index 59a819eaab4..aa4f1b3c484 100644 --- a/static/usage/v7/input/label-placement/react.md +++ b/static/usage/v7/input/label-placement/react.md @@ -8,15 +8,15 @@ function Example() { - + - + - + diff --git a/static/usage/v7/input/label-placement/vue.md b/static/usage/v7/input/label-placement/vue.md index 782e77971c6..8854647965d 100644 --- a/static/usage/v7/input/label-placement/vue.md +++ b/static/usage/v7/input/label-placement/vue.md @@ -4,15 +4,15 @@ - + - + - + diff --git a/static/usage/v7/input/migration/index.md b/static/usage/v7/input/migration/index.md index e28bf81ce00..34e3ccaece5 100644 --- a/static/usage/v7/input/migration/index.md +++ b/static/usage/v7/input/migration/index.md @@ -55,8 +55,8 @@ import TabItem from '@theme/TabItem'; @@ -113,8 +113,8 @@ import TabItem from '@theme/TabItem'; @@ -171,8 +171,8 @@ import TabItem from '@theme/TabItem'; {/* After */} {/* - Metadata such as counters and helper text should not - be used when an input is in an item/list. If you need to + 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. */} @@ -229,8 +229,8 @@ import TabItem from '@theme/TabItem'; @@ -245,4 +245,4 @@ import TabItem from '@theme/TabItem'; ``` -```` \ No newline at end of file +```` diff --git a/static/usage/v7/input/theming/colors/index.md b/static/usage/v7/input/theming/colors/index.md index 17c29f994c3..329f0ceae56 100644 --- a/static/usage/v7/input/theming/colors/index.md +++ b/static/usage/v7/input/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/input/theming/css-properties/angular/example_component_css.md b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md index 154e20ad0cc..3aa7fddda86 100644 --- a/static/usage/v7/input/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md @@ -3,7 +3,7 @@ ion-input.custom { --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: .8; + --placeholder-opacity: 0.8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v7/input/theming/css-properties/angular/example_component_html.md b/static/usage/v7/input/theming/css-properties/angular/example_component_html.md index c3ffd4077fe..243bb91401b 100644 --- a/static/usage/v7/input/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/input/theming/css-properties/angular/example_component_html.md @@ -1,8 +1,8 @@ ```html diff --git a/static/usage/v7/input/theming/css-properties/javascript.md b/static/usage/v7/input/theming/css-properties/javascript.md index 4cbd6339c3f..168adce6d2d 100644 --- a/static/usage/v7/input/theming/css-properties/javascript.md +++ b/static/usage/v7/input/theming/css-properties/javascript.md @@ -1,7 +1,7 @@ ```html - + - + - + - + diff --git a/static/usage/v7/input/types/javascript.md b/static/usage/v7/input/types/javascript.md index 6506b2ca271..ff696b22cd8 100644 --- a/static/usage/v7/input/types/javascript.md +++ b/static/usage/v7/input/types/javascript.md @@ -4,19 +4,19 @@ - + - + - + - + diff --git a/static/usage/v7/input/types/react.md b/static/usage/v7/input/types/react.md index 7a90e30e81a..e5534ec2e1e 100644 --- a/static/usage/v7/input/types/react.md +++ b/static/usage/v7/input/types/react.md @@ -8,19 +8,19 @@ function Example() { - + - + - + - + diff --git a/static/usage/v7/input/types/vue.md b/static/usage/v7/input/types/vue.md index 2415bc71ea5..752f60c183f 100644 --- a/static/usage/v7/input/types/vue.md +++ b/static/usage/v7/input/types/vue.md @@ -4,19 +4,19 @@ - + - + - + - + diff --git a/static/usage/v7/item-divider/basic/angular.md b/static/usage/v7/item-divider/basic/angular.md index d74e5b05549..35dccbdbc88 100644 --- a/static/usage/v7/item-divider/basic/angular.md +++ b/static/usage/v7/item-divider/basic/angular.md @@ -2,9 +2,7 @@ - - Section A - + Section A @@ -20,9 +18,7 @@ - - Section B - + Section B diff --git a/static/usage/v7/item-divider/basic/index.md b/static/usage/v7/item-divider/basic/index.md index 9c8a9e292be..ff888fae905 100644 --- a/static/usage/v7/item-divider/basic/index.md +++ b/static/usage/v7/item-divider/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/item-divider/basic/javascript.md b/static/usage/v7/item-divider/basic/javascript.md index d74e5b05549..35dccbdbc88 100644 --- a/static/usage/v7/item-divider/basic/javascript.md +++ b/static/usage/v7/item-divider/basic/javascript.md @@ -2,9 +2,7 @@ - - Section A - + Section A @@ -20,9 +18,7 @@ - - Section B - + Section B diff --git a/static/usage/v7/item-divider/basic/react.md b/static/usage/v7/item-divider/basic/react.md index 289f1727c8d..14ad85b1c82 100644 --- a/static/usage/v7/item-divider/basic/react.md +++ b/static/usage/v7/item-divider/basic/react.md @@ -7,9 +7,7 @@ function Example() { - - Section A - + Section A @@ -25,9 +23,7 @@ function Example() { - - Section B - + Section B diff --git a/static/usage/v7/item-divider/basic/vue.md b/static/usage/v7/item-divider/basic/vue.md index 95f26ebc027..22c9565c278 100644 --- a/static/usage/v7/item-divider/basic/vue.md +++ b/static/usage/v7/item-divider/basic/vue.md @@ -3,9 +3,7 @@ - - Section A - + Section A @@ -21,9 +19,7 @@ - - Section B - + Section B diff --git a/static/usage/v7/item-divider/theming/colors/index.md b/static/usage/v7/item-divider/theming/colors/index.md index a728b84c5db..e39b5d93a5c 100644 --- a/static/usage/v7/item-divider/theming/colors/index.md +++ b/static/usage/v7/item-divider/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md index b3b1bb4da25..172fdad114f 100644 --- a/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md @@ -1,7 +1,5 @@ ```html - - Item Divider - + Item Divider ``` diff --git a/static/usage/v7/item-divider/theming/css-properties/index.md b/static/usage/v7/item-divider/theming/css-properties/index.md index f425706d75d..7d95b99dca5 100644 --- a/static/usage/v7/item-divider/theming/css-properties/index.md +++ b/static/usage/v7/item-divider/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/item-divider/theming/css-properties/javascript.md b/static/usage/v7/item-divider/theming/css-properties/javascript.md index 6622b6d7e3f..0c0cdc26f55 100644 --- a/static/usage/v7/item-divider/theming/css-properties/javascript.md +++ b/static/usage/v7/item-divider/theming/css-properties/javascript.md @@ -12,8 +12,6 @@ - - Item Divider - + Item Divider ``` diff --git a/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md index 6cd8d464d7e..b3083033541 100644 --- a/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonItemDivider, IonLabel } from '@ionic/react'; @@ -8,9 +7,7 @@ import './main.css'; function Example() { return ( - - Item Divider - + Item Divider ); } diff --git a/static/usage/v7/item-divider/theming/css-properties/vue.md b/static/usage/v7/item-divider/theming/css-properties/vue.md index 3589bcc7cd4..950e3775d83 100644 --- a/static/usage/v7/item-divider/theming/css-properties/vue.md +++ b/static/usage/v7/item-divider/theming/css-properties/vue.md @@ -1,9 +1,7 @@ ```html @@ -12,7 +10,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonItemDivider } + components: { IonItemDivider }, }); diff --git a/static/usage/v7/item-group/basic/index.md b/static/usage/v7/item-group/basic/index.md index a752ec62278..21fdcf02654 100644 --- a/static/usage/v7/item-group/basic/index.md +++ b/static/usage/v7/item-group/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/item-group/sliding-items/angular.md b/static/usage/v7/item-group/sliding-items/angular.md index a451b58c9c4..2708fde7acc 100644 --- a/static/usage/v7/item-group/sliding-items/angular.md +++ b/static/usage/v7/item-group/sliding-items/angular.md @@ -1,94 +1,66 @@ ```html - - Fruits - + Fruits - - Grapes - + Grapes - - Favorite - + Favorite - - Apples - + Apples - - Favorite - + Favorite - - Bananas - + Bananas - - Favorite - + Favorite - - Vegetables - + Vegetables - - Carrots - + Carrots - - Favorite - + Favorite - - Broccoli - + Broccoli - - Favorite - + Favorite - - Celery - + Celery - - Favorite - + Favorite diff --git a/static/usage/v7/item-group/sliding-items/index.md b/static/usage/v7/item-group/sliding-items/index.md index 39983e2a9bc..4f5f2169e5d 100644 --- a/static/usage/v7/item-group/sliding-items/index.md +++ b/static/usage/v7/item-group/sliding-items/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/item-group/sliding-items/javascript.md b/static/usage/v7/item-group/sliding-items/javascript.md index a451b58c9c4..2708fde7acc 100644 --- a/static/usage/v7/item-group/sliding-items/javascript.md +++ b/static/usage/v7/item-group/sliding-items/javascript.md @@ -1,94 +1,66 @@ ```html - - Fruits - + Fruits - - Grapes - + Grapes - - Favorite - + Favorite - - Apples - + Apples - - Favorite - + Favorite - - Bananas - + Bananas - - Favorite - + Favorite - - Vegetables - + Vegetables - - Carrots - + Carrots - - Favorite - + Favorite - - Broccoli - + Broccoli - - Favorite - + Favorite - - Celery - + Celery - - Favorite - + Favorite diff --git a/static/usage/v7/item-group/sliding-items/react.md b/static/usage/v7/item-group/sliding-items/react.md index 2ca4d7ca380..716935f065c 100644 --- a/static/usage/v7/item-group/sliding-items/react.md +++ b/static/usage/v7/item-group/sliding-items/react.md @@ -1,100 +1,80 @@ ```tsx import React from 'react'; -import { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react'; +import { + IonItem, + IonItemDivider, + IonItemGroup, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, +} from '@ionic/react'; function Example() { return ( <> - - Fruits - + Fruits - - Grapes - + Grapes - - Favorite - + Favorite - - Apples - + Apples - - Favorite - + Favorite - - Bananas - + Bananas - - Favorite - + Favorite - - Vegetables - + Vegetables - - Carrots - + Carrots - - Favorite - + Favorite - - Broccoli - + Broccoli - - Favorite - + Favorite - - Celery - + Celery - - Favorite - + Favorite diff --git a/static/usage/v7/item-group/sliding-items/vue.md b/static/usage/v7/item-group/sliding-items/vue.md index 5110ba1abed..43109034598 100644 --- a/static/usage/v7/item-group/sliding-items/vue.md +++ b/static/usage/v7/item-group/sliding-items/vue.md @@ -2,101 +2,81 @@ ``` diff --git a/static/usage/v7/item/basic/angular.md b/static/usage/v7/item/basic/angular.md index f0b13250493..b975f267d90 100644 --- a/static/usage/v7/item/basic/angular.md +++ b/static/usage/v7/item/basic/angular.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/item/basic/javascript.md b/static/usage/v7/item/basic/javascript.md index f0b13250493..b975f267d90 100644 --- a/static/usage/v7/item/basic/javascript.md +++ b/static/usage/v7/item/basic/javascript.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/item/basic/react.md b/static/usage/v7/item/basic/react.md index dfed86af19e..6154239cbf1 100644 --- a/static/usage/v7/item/basic/react.md +++ b/static/usage/v7/item/basic/react.md @@ -11,16 +11,14 @@ function Example() { - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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, + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v7/item/basic/vue.md b/static/usage/v7/item/basic/vue.md index 479e90196a4..37b32f7c2ca 100644 --- a/static/usage/v7/item/basic/vue.md +++ b/static/usage/v7/item/basic/vue.md @@ -6,17 +6,15 @@ - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/item/buttons/angular.md b/static/usage/v7/item/buttons/angular.md index bf7069f48f7..4d77ff8b9d8 100644 --- a/static/usage/v7/item/buttons/angular.md +++ b/static/usage/v7/item/buttons/angular.md @@ -1,12 +1,8 @@ ```html - - Start - + Start Default Buttons - - End - + End @@ -33,14 +29,8 @@ Button Sizes - - Small - - - Default - - - Large - + Small + Default + Large ``` diff --git a/static/usage/v7/item/buttons/javascript.md b/static/usage/v7/item/buttons/javascript.md index bf7069f48f7..4d77ff8b9d8 100644 --- a/static/usage/v7/item/buttons/javascript.md +++ b/static/usage/v7/item/buttons/javascript.md @@ -1,12 +1,8 @@ ```html - - Start - + Start Default Buttons - - End - + End @@ -33,14 +29,8 @@ Button Sizes - - Small - - - Default - - - Large - + Small + Default + Large ``` diff --git a/static/usage/v7/item/buttons/react.md b/static/usage/v7/item/buttons/react.md index 8776e5215fb..fda29c7f11a 100644 --- a/static/usage/v7/item/buttons/react.md +++ b/static/usage/v7/item/buttons/react.md @@ -7,13 +7,9 @@ function Example() { return ( <> - - Start - + Start Default Buttons - - End - + End diff --git a/static/usage/v7/item/buttons/vue.md b/static/usage/v7/item/buttons/vue.md index 02de38e58ab..8680f189472 100644 --- a/static/usage/v7/item/buttons/vue.md +++ b/static/usage/v7/item/buttons/vue.md @@ -1,13 +1,9 @@ ```html @@ -54,8 +44,8 @@ export default defineComponent({ components: { IonButton, IonIcon, IonItem, IonLabel }, setup() { - return { home, navigate, star } - } + return { home, navigate, star }; + }, }); ``` diff --git a/static/usage/v7/item/detail-arrows/index.md b/static/usage/v7/item/detail-arrows/index.md index 37b9b495dc1..d9cacd12e84 100644 --- a/static/usage/v7/item/detail-arrows/index.md +++ b/static/usage/v7/item/detail-arrows/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/item/detail-arrows/vue.md b/static/usage/v7/item/detail-arrows/vue.md index d341c004f15..54010095652 100644 --- a/static/usage/v7/item/detail-arrows/vue.md +++ b/static/usage/v7/item/detail-arrows/vue.md @@ -51,3 +51,4 @@ }, }); +``` diff --git a/static/usage/v7/item/icons/angular.md b/static/usage/v7/item/icons/angular.md index 49a1cc707e3..b81a463e004 100644 --- a/static/usage/v7/item/icons/angular.md +++ b/static/usage/v7/item/icons/angular.md @@ -1,29 +1,21 @@ ```html - - Default Icon - + Default Icon - - Large Icon - + Large Icon - - Small Icon - + Small Icon - - Default Icon - + Default Icon ``` diff --git a/static/usage/v7/item/icons/javascript.md b/static/usage/v7/item/icons/javascript.md index 49a1cc707e3..b81a463e004 100644 --- a/static/usage/v7/item/icons/javascript.md +++ b/static/usage/v7/item/icons/javascript.md @@ -1,29 +1,21 @@ ```html - - Default Icon - + Default Icon - - Large Icon - + Large Icon - - Small Icon - + Small Icon - - Default Icon - + Default Icon ``` diff --git a/static/usage/v7/item/icons/react.md b/static/usage/v7/item/icons/react.md index a5fc0ae6629..09496398f7f 100644 --- a/static/usage/v7/item/icons/react.md +++ b/static/usage/v7/item/icons/react.md @@ -7,31 +7,23 @@ function Example() { return ( <> - - Default Icon - + Default Icon - - Large Icon - + Large Icon - - Small Icon - + Small Icon - - Default Icon - + Default Icon ); diff --git a/static/usage/v7/item/icons/vue.md b/static/usage/v7/item/icons/vue.md index 82e09004fbe..a89e5e6aad0 100644 --- a/static/usage/v7/item/icons/vue.md +++ b/static/usage/v7/item/icons/vue.md @@ -1,31 +1,23 @@ ```html @@ -37,8 +29,8 @@ export default defineComponent({ components: { IonButton, IonIcon, IonItem, IonLabel }, setup() { - return { informationCircle, star } - } + return { informationCircle, star }; + }, }); ``` diff --git a/static/usage/v7/item/lines/angular.md b/static/usage/v7/item/lines/angular.md index b0700ae1a1b..022573e9d9d 100644 --- a/static/usage/v7/item/lines/angular.md +++ b/static/usage/v7/item/lines/angular.md @@ -1,8 +1,6 @@ ```html - - Default Item Lines - + Default Item Lines diff --git a/static/usage/v7/item/lines/javascript.md b/static/usage/v7/item/lines/javascript.md index b0700ae1a1b..022573e9d9d 100644 --- a/static/usage/v7/item/lines/javascript.md +++ b/static/usage/v7/item/lines/javascript.md @@ -1,8 +1,6 @@ ```html - - Default Item Lines - + Default Item Lines diff --git a/static/usage/v7/item/lines/react.md b/static/usage/v7/item/lines/react.md index c5e2cf3f55c..dbe79214349 100644 --- a/static/usage/v7/item/lines/react.md +++ b/static/usage/v7/item/lines/react.md @@ -7,9 +7,7 @@ function Example() { return ( <> - - Default Item Lines - + Default Item Lines diff --git a/static/usage/v7/item/lines/vue.md b/static/usage/v7/item/lines/vue.md index 37c6c432ca4..fb855de221f 100644 --- a/static/usage/v7/item/lines/vue.md +++ b/static/usage/v7/item/lines/vue.md @@ -1,9 +1,7 @@ ```html diff --git a/static/usage/v7/item/theming/colors/index.md b/static/usage/v7/item/theming/colors/index.md index 9973f9daa33..f348fc83731 100644 --- a/static/usage/v7/item/theming/colors/index.md +++ b/static/usage/v7/item/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/item/theming/css-properties/index.md b/static/usage/v7/item/theming/css-properties/index.md index f3d49f6332b..31b1ae0b13d 100644 --- a/static/usage/v7/item/theming/css-properties/index.md +++ b/static/usage/v7/item/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/item/theming/css-shadow-parts/index.md b/static/usage/v7/item/theming/css-shadow-parts/index.md index 10f1bfc6ba6..53c94048081 100644 --- a/static/usage/v7/item/theming/css-shadow-parts/index.md +++ b/static/usage/v7/item/theming/css-shadow-parts/index.md @@ -11,8 +11,8 @@ 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/v7/item/theming/input-highlight/index.md b/static/usage/v7/item/theming/input-highlight/index.md index 4782bfdd6a5..b2866f274cc 100644 --- a/static/usage/v7/item/theming/input-highlight/index.md +++ b/static/usage/v7/item/theming/input-highlight/index.md @@ -11,8 +11,8 @@ 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/v7/label/item/angular.md b/static/usage/v7/label/item/angular.md index be252b899a0..54f24979079 100644 --- a/static/usage/v7/label/item/angular.md +++ b/static/usage/v7/label/item/angular.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/label/item/javascript.md b/static/usage/v7/label/item/javascript.md index be252b899a0..54f24979079 100644 --- a/static/usage/v7/label/item/javascript.md +++ b/static/usage/v7/label/item/javascript.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/label/item/react.md b/static/usage/v7/label/item/react.md index 88e4f904deb..f5bdf5a5d1b 100644 --- a/static/usage/v7/label/item/react.md +++ b/static/usage/v7/label/item/react.md @@ -11,16 +11,14 @@ function Example() { - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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, + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v7/label/item/vue.md b/static/usage/v7/label/item/vue.md index 99ec3ea3d40..fe4cd48904a 100644 --- a/static/usage/v7/label/item/vue.md +++ b/static/usage/v7/label/item/vue.md @@ -6,17 +6,15 @@ - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/list-header/basic/index.md b/static/usage/v7/list-header/basic/index.md index 79b5b31a75f..e6e78fa997c 100644 --- a/static/usage/v7/list-header/basic/index.md +++ b/static/usage/v7/list-header/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/list-header/buttons/index.md b/static/usage/v7/list-header/buttons/index.md index 5c724b1a8f5..4841548982f 100644 --- a/static/usage/v7/list-header/buttons/index.md +++ b/static/usage/v7/list-header/buttons/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/list-header/lines/index.md b/static/usage/v7/list-header/lines/index.md index a8e84eddf7f..11f58d13e5b 100644 --- a/static/usage/v7/list-header/lines/index.md +++ b/static/usage/v7/list-header/lines/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/list-header/theming/colors/index.md b/static/usage/v7/list-header/theming/colors/index.md index 13af9007f88..5491fb58d18 100644 --- a/static/usage/v7/list-header/theming/colors/index.md +++ b/static/usage/v7/list-header/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/list-header/theming/css-properties/index.md b/static/usage/v7/list-header/theming/css-properties/index.md index e273cdb2b91..5c1f38c63b6 100644 --- a/static/usage/v7/list-header/theming/css-properties/index.md +++ b/static/usage/v7/list-header/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/loading/controller/index.md b/static/usage/v7/loading/controller/index.md index 0b953906d7d..af84a0862f4 100644 --- a/static/usage/v7/loading/controller/index.md +++ b/static/usage/v7/loading/controller/index.md @@ -8,8 +8,8 @@ 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/v7/loading/controller/javascript.md b/static/usage/v7/loading/controller/javascript.md index c5507d123af..f54756c396b 100644 --- a/static/usage/v7/loading/controller/javascript.md +++ b/static/usage/v7/loading/controller/javascript.md @@ -2,13 +2,13 @@ Show Loading ``` diff --git a/static/usage/v7/loading/controller/react.md b/static/usage/v7/loading/controller/react.md index 16280a1e91a..06dc3413bab 100644 --- a/static/usage/v7/loading/controller/react.md +++ b/static/usage/v7/loading/controller/react.md @@ -2,7 +2,6 @@ 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 @@ -11,12 +10,14 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Dismissing after 3 seconds...', - duration: 3000 - }) - }}> + { + present({ + message: 'Dismissing after 3 seconds...', + duration: 3000, + }); + }} + > Show Loading ); diff --git a/static/usage/v7/loading/controller/vue.md b/static/usage/v7/loading/controller/vue.md index 17b65b33af0..e80b61cc8b3 100644 --- a/static/usage/v7/loading/controller/vue.md +++ b/static/usage/v7/loading/controller/vue.md @@ -13,14 +13,14 @@ const showLoading = async () => { const loading = await loadingController.create({ message: 'Dismissing after 3 seconds...', - duration: 3000 + duration: 3000, }); - + loading.present(); - } - - return { showLoading } - } + }; + + return { showLoading }; + }, }); ``` diff --git a/static/usage/v7/loading/inline/index.md b/static/usage/v7/loading/inline/index.md index e4038ad027d..f028f7899c6 100644 --- a/static/usage/v7/loading/inline/index.md +++ b/static/usage/v7/loading/inline/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/loading/spinners/index.md b/static/usage/v7/loading/spinners/index.md index c9aa963a5f1..b274988725f 100644 --- a/static/usage/v7/loading/spinners/index.md +++ b/static/usage/v7/loading/spinners/index.md @@ -6,12 +6,12 @@ import react from './react.md'; import vue from './vue.md'; diff --git a/static/usage/v7/loading/theming/angular/global_css.md b/static/usage/v7/loading/theming/angular/global_css.md index 16bf7af3522..af410626c52 100644 --- a/static/usage/v7/loading/theming/angular/global_css.md +++ b/static/usage/v7/loading/theming/angular/global_css.md @@ -5,4 +5,4 @@ ion-loading.custom-loading { color: #1c6dff; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/loading/theming/index.md b/static/usage/v7/loading/theming/index.md index f0a5a379593..31027920779 100644 --- a/static/usage/v7/loading/theming/index.md +++ b/static/usage/v7/loading/theming/index.md @@ -11,8 +11,8 @@ 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/v7/loading/theming/react/main_css.md b/static/usage/v7/loading/theming/react/main_css.md index 16bf7af3522..af410626c52 100644 --- a/static/usage/v7/loading/theming/react/main_css.md +++ b/static/usage/v7/loading/theming/react/main_css.md @@ -5,4 +5,4 @@ ion-loading.custom-loading { color: #1c6dff; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/menu/basic/angular.md b/static/usage/v7/menu/basic/angular.md index c169f35f1f4..0fb5465519f 100644 --- a/static/usage/v7/menu/basic/angular.md +++ b/static/usage/v7/menu/basic/angular.md @@ -16,8 +16,6 @@ Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu.
``` diff --git a/static/usage/v7/menu/basic/index.md b/static/usage/v7/menu/basic/index.md index e682c266d64..bfdec39e324 100644 --- a/static/usage/v7/menu/basic/index.md +++ b/static/usage/v7/menu/basic/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/menu/basic/javascript.md b/static/usage/v7/menu/basic/javascript.md index 570c03c9512..afb14178ea4 100644 --- a/static/usage/v7/menu/basic/javascript.md +++ b/static/usage/v7/menu/basic/javascript.md @@ -16,8 +16,6 @@ Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu.
``` diff --git a/static/usage/v7/menu/basic/react.md b/static/usage/v7/menu/basic/react.md index 71abc258aef..671dba8a744 100644 --- a/static/usage/v7/menu/basic/react.md +++ b/static/usage/v7/menu/basic/react.md @@ -1,15 +1,6 @@ ```tsx import React from 'react'; -import { - IonButtons, - IonContent, - IonHeader, - IonMenu, - IonMenuButton, - IonPage, - IonTitle, - IonToolbar -} from '@ionic/react'; +import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react'; function Example() { return ( <> @@ -30,9 +21,7 @@ function Example() { Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu. ); diff --git a/static/usage/v7/menu/basic/vue.md b/static/usage/v7/menu/basic/vue.md index d6e3d73d648..531c50678f8 100644 --- a/static/usage/v7/menu/basic/vue.md +++ b/static/usage/v7/menu/basic/vue.md @@ -17,23 +17,12 @@ Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu. diff --git a/static/usage/v7/menu/theming/angular/example_component_css.md b/static/usage/v7/menu/theming/angular/example_component_css.md index 839c8f41df5..1bba1305577 100644 --- a/static/usage/v7/menu/theming/angular/example_component_css.md +++ b/static/usage/v7/menu/theming/angular/example_component_css.md @@ -8,4 +8,4 @@ ion-menu::part(container) { box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/menu/theming/angular/example_component_html.md b/static/usage/v7/menu/theming/angular/example_component_html.md index f630cf4c378..f46819d3e99 100644 --- a/static/usage/v7/menu/theming/angular/example_component_html.md +++ b/static/usage/v7/menu/theming/angular/example_component_html.md @@ -17,9 +17,7 @@ Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu.
``` diff --git a/static/usage/v7/menu/theming/index.md b/static/usage/v7/menu/theming/index.md index 83a016b19b7..b664766b0ba 100644 --- a/static/usage/v7/menu/theming/index.md +++ b/static/usage/v7/menu/theming/index.md @@ -11,8 +11,8 @@ 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/v7/menu/theming/javascript.md b/static/usage/v7/menu/theming/javascript.md index a147ef68090..6df6026c610 100644 --- a/static/usage/v7/menu/theming/javascript.md +++ b/static/usage/v7/menu/theming/javascript.md @@ -17,9 +17,7 @@ Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu.
diff --git a/static/usage/v7/menu/theming/react/main_css.md b/static/usage/v7/menu/theming/react/main_css.md index 839c8f41df5..1bba1305577 100644 --- a/static/usage/v7/menu/theming/react/main_css.md +++ b/static/usage/v7/menu/theming/react/main_css.md @@ -8,4 +8,4 @@ ion-menu::part(container) { box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/menu/theming/react/main_tsx.md b/static/usage/v7/menu/theming/react/main_tsx.md index c935fefb33f..c2f3d72ab2b 100644 --- a/static/usage/v7/menu/theming/react/main_tsx.md +++ b/static/usage/v7/menu/theming/react/main_tsx.md @@ -1,15 +1,6 @@ ```tsx import React from 'react'; -import { - IonButtons, - IonContent, - IonHeader, - IonMenu, - IonMenuButton, - IonPage, - IonTitle, - IonToolbar -} from '@ionic/react'; +import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react'; import './main.css'; @@ -33,9 +24,7 @@ function Example() { Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu. ); diff --git a/static/usage/v7/menu/theming/vue.md b/static/usage/v7/menu/theming/vue.md index b9d02e48b1f..27a96f00e0b 100644 --- a/static/usage/v7/menu/theming/vue.md +++ b/static/usage/v7/menu/theming/vue.md @@ -17,23 +17,12 @@ Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu. diff --git a/static/usage/v7/menu/toggle/index.md b/static/usage/v7/menu/toggle/index.md index df6df9fccbb..a6670116699 100644 --- a/static/usage/v7/menu/toggle/index.md +++ b/static/usage/v7/menu/toggle/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/menu/toggle/react.md b/static/usage/v7/menu/toggle/react.md index a940b83e4af..3428aaa42d0 100644 --- a/static/usage/v7/menu/toggle/react.md +++ b/static/usage/v7/menu/toggle/react.md @@ -1,15 +1,6 @@ ```tsx import React from 'react'; -import { - IonButton, - IonContent, - IonHeader, - IonMenu, - IonMenuToggle, - IonPage, - IonTitle, - IonToolbar -} from '@ionic/react'; +import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonPage, IonTitle, IonToolbar } from '@ionic/react'; function Example() { return ( <> @@ -22,7 +13,7 @@ function Example() { Click to close the menu - + diff --git a/static/usage/v7/menu/toggle/vue.md b/static/usage/v7/menu/toggle/vue.md index 2cc4807109e..6b723df95ad 100644 --- a/static/usage/v7/menu/toggle/vue.md +++ b/static/usage/v7/menu/toggle/vue.md @@ -27,16 +27,7 @@ diff --git a/static/usage/v7/menu/type/angular/example_component_html.md b/static/usage/v7/menu/type/angular/example_component_html.md index 7154c645660..fd995d7a32f 100644 --- a/static/usage/v7/menu/type/angular/example_component_html.md +++ b/static/usage/v7/menu/type/angular/example_component_html.md @@ -39,10 +39,11 @@ -
+ +
Click to open the menu
-``` \ No newline at end of file +``` diff --git a/static/usage/v7/menu/type/index.md b/static/usage/v7/menu/type/index.md index d0fc312baa1..cdbbf5e57df 100644 --- a/static/usage/v7/menu/type/index.md +++ b/static/usage/v7/menu/type/index.md @@ -8,8 +8,8 @@ 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/v7/menu/type/javascript.md b/static/usage/v7/menu/type/javascript.md index 24dc49cf906..c8b49975b84 100644 --- a/static/usage/v7/menu/type/javascript.md +++ b/static/usage/v7/menu/type/javascript.md @@ -39,7 +39,8 @@ -
+ +
Click to open the menu diff --git a/static/usage/v7/menu/type/react.md b/static/usage/v7/menu/type/react.md index 806e67e21a2..946707cba38 100644 --- a/static/usage/v7/menu/type/react.md +++ b/static/usage/v7/menu/type/react.md @@ -1,6 +1,6 @@ ```tsx import React, { useState } from 'react'; -import { +import { IonButton, IonContent, IonHeader, @@ -12,7 +12,7 @@ import { IonRadio, IonRadioGroup, IonTitle, - IonToolbar + IonToolbar, } from '@ionic/react'; import type { RadioGroupCustomEvent } from '@ionic/react'; @@ -30,7 +30,7 @@ function Example() { Click to close the menu - + diff --git a/static/usage/v7/menu/type/vue.md b/static/usage/v7/menu/type/vue.md index 2abcb137577..8277d7a3179 100644 --- a/static/usage/v7/menu/type/vue.md +++ b/static/usage/v7/menu/type/vue.md @@ -12,7 +12,7 @@ - +
@@ -40,7 +40,8 @@ -
+ +
Click to open the menu @@ -61,7 +62,7 @@ IonRadio, IonRadioGroup, IonTitle, - IonToolbar + IonToolbar, } from '@ionic/vue'; import { defineComponent, ref } from 'vue'; @@ -78,13 +79,13 @@ IonRadio, IonRadioGroup, IonTitle, - IonToolbar + IonToolbar, }, setup() { const menuType = ref('overlay'); - + return { menuType }; - } + }, }); ``` diff --git a/static/usage/v7/modal/can-dismiss/boolean/index.md b/static/usage/v7/modal/can-dismiss/boolean/index.md index 325ad4b1645..ebe902d0628 100644 --- a/static/usage/v7/modal/can-dismiss/boolean/index.md +++ b/static/usage/v7/modal/can-dismiss/boolean/index.md @@ -9,8 +9,8 @@ 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/v7/modal/can-dismiss/function/index.md b/static/usage/v7/modal/can-dismiss/function/index.md index a0b934f8e7e..f78fb9852ff 100644 --- a/static/usage/v7/modal/can-dismiss/function/index.md +++ b/static/usage/v7/modal/can-dismiss/function/index.md @@ -9,8 +9,8 @@ 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/v7/modal/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md index a37ce212fc8..3dc37bd79f4 100644 --- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md +++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md @@ -9,8 +9,8 @@ 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/v7/modal/card/basic/index.md b/static/usage/v7/modal/card/basic/index.md index d3fca17f0b1..ce295566ca8 100644 --- a/static/usage/v7/modal/card/basic/index.md +++ b/static/usage/v7/modal/card/basic/index.md @@ -8,8 +8,8 @@ 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/v7/modal/controller/index.md b/static/usage/v7/modal/controller/index.md index 750bbe53efb..f8f1dbb2fe2 100644 --- a/static/usage/v7/modal/controller/index.md +++ b/static/usage/v7/modal/controller/index.md @@ -13,8 +13,8 @@ import angular_modal_example_component_ts from './angular/modal-example_componen import angular_modal_example_component_html from './angular/modal-example_component_html.md'; diff --git a/static/usage/v7/modal/custom-dialogs/index.md b/static/usage/v7/modal/custom-dialogs/index.md index 2aec2d39f33..afd028dbce3 100644 --- a/static/usage/v7/modal/custom-dialogs/index.md +++ b/static/usage/v7/modal/custom-dialogs/index.md @@ -10,8 +10,8 @@ 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/v7/modal/custom-dialogs/react/main_tsx.md b/static/usage/v7/modal/custom-dialogs/react/main_tsx.md index b60d3f275ab..e6120a8fcc7 100644 --- a/static/usage/v7/modal/custom-dialogs/react/main_tsx.md +++ b/static/usage/v7/modal/custom-dialogs/react/main_tsx.md @@ -38,7 +38,7 @@ function Example() {

Dialog header

- + diff --git a/static/usage/v7/modal/custom-dialogs/vue.md b/static/usage/v7/modal/custom-dialogs/vue.md index f910bc061e4..57362d546fc 100644 --- a/static/usage/v7/modal/custom-dialogs/vue.md +++ b/static/usage/v7/modal/custom-dialogs/vue.md @@ -7,22 +7,22 @@ --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; } @@ -36,11 +36,11 @@ Open Custom Dialog - +

Dialog header

- + @@ -96,7 +96,7 @@ }, setup() { return { personCircle }; - } + }, }); ``` diff --git a/static/usage/v7/modal/inline/basic/index.md b/static/usage/v7/modal/inline/basic/index.md index 1406cd29c09..2de40ceb996 100644 --- a/static/usage/v7/modal/inline/basic/index.md +++ b/static/usage/v7/modal/inline/basic/index.md @@ -8,8 +8,8 @@ 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/v7/modal/inline/is-open/index.md b/static/usage/v7/modal/inline/is-open/index.md index b77d9dd8a7a..20c34b14771 100644 --- a/static/usage/v7/modal/inline/is-open/index.md +++ b/static/usage/v7/modal/inline/is-open/index.md @@ -8,8 +8,8 @@ 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/v7/modal/performance/mount/angular.md b/static/usage/v7/modal/performance/mount/angular.md index 3afd202d33b..4b8bb7bc9d2 100644 --- a/static/usage/v7/modal/performance/mount/angular.md +++ b/static/usage/v7/modal/performance/mount/angular.md @@ -16,9 +16,7 @@ Modal - - This content was mounted as soon as the modal was created. - + This content was mounted as soon as the modal was created. diff --git a/static/usage/v7/modal/performance/mount/index.md b/static/usage/v7/modal/performance/mount/index.md index 16018d41230..86245ede4bb 100644 --- a/static/usage/v7/modal/performance/mount/index.md +++ b/static/usage/v7/modal/performance/mount/index.md @@ -6,14 +6,14 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/modal/performance/mount/react.md b/static/usage/v7/modal/performance/mount/react.md index 5b50612291b..bb6a9c32360 100644 --- a/static/usage/v7/modal/performance/mount/react.md +++ b/static/usage/v7/modal/performance/mount/react.md @@ -1,15 +1,6 @@ ```tsx import React, { useRef } from 'react'; -import { - IonButtons, - IonButton, - IonModal, - IonHeader, - IonContent, - IonToolbar, - IonTitle, - IonPage, -} from '@ionic/react'; +import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react'; function Example() { const modal = useRef(null); @@ -34,9 +25,7 @@ function Example() { Modal - - This content was mounted as soon as the modal was created. - + This content was mounted as soon as the modal was created. diff --git a/static/usage/v7/modal/performance/mount/vue.md b/static/usage/v7/modal/performance/mount/vue.md index 515229dde25..0407ee98a4e 100644 --- a/static/usage/v7/modal/performance/mount/vue.md +++ b/static/usage/v7/modal/performance/mount/vue.md @@ -16,23 +16,13 @@ Modal - - This content was mounted as soon as the modal was created. - + This content was mounted as soon as the modal was created. ``` diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_html.md b/static/usage/v7/picker/inline/trigger/angular/example_component_html.md index af47368a129..533c4b1ac70 100644 --- a/static/usage/v7/picker/inline/trigger/angular/example_component_html.md +++ b/static/usage/v7/picker/inline/trigger/angular/example_component_html.md @@ -1,8 +1,4 @@ ```html Open - + ``` diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md index ebd914649f4..90413b31470 100644 --- a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md +++ b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md @@ -6,36 +6,41 @@ import { Component } from '@angular/core'; 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 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' + role: 'cancel', }, { text: 'Confirm', handler: (value) => { window.alert(`You selected: ${value.languages.value}`); - } - } + }, + }, ]; } ``` diff --git a/static/usage/v7/picker/inline/trigger/index.md b/static/usage/v7/picker/inline/trigger/index.md index 1bd0ab3950f..e08b0f9e0b1 100644 --- a/static/usage/v7/picker/inline/trigger/index.md +++ b/static/usage/v7/picker/inline/trigger/index.md @@ -8,8 +8,8 @@ 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/v7/picker/inline/trigger/javascript.md b/static/usage/v7/picker/inline/trigger/javascript.md index 2b7a20eb138..e02349631ba 100644 --- a/static/usage/v7/picker/inline/trigger/javascript.md +++ b/static/usage/v7/picker/inline/trigger/javascript.md @@ -5,36 +5,41 @@ ``` diff --git a/static/usage/v7/picker/inline/trigger/react.md b/static/usage/v7/picker/inline/trigger/react.md index ec20daef156..08506f7fb30 100644 --- a/static/usage/v7/picker/inline/trigger/react.md +++ b/static/usage/v7/picker/inline/trigger/react.md @@ -8,37 +8,40 @@ function Example() { Open { window.alert(`You selected: ${value.languages.value}`); - } - } + }, + }, ]} > diff --git a/static/usage/v7/picker/inline/trigger/vue.md b/static/usage/v7/picker/inline/trigger/vue.md index d4681ff66f6..07046c63cf7 100644 --- a/static/usage/v7/picker/inline/trigger/vue.md +++ b/static/usage/v7/picker/inline/trigger/vue.md @@ -1,11 +1,7 @@ ```html ``` diff --git a/static/usage/v7/picker/multiple-column/angular/example_component_html.md b/static/usage/v7/picker/multiple-column/angular/example_component_html.md index af47368a129..533c4b1ac70 100644 --- a/static/usage/v7/picker/multiple-column/angular/example_component_html.md +++ b/static/usage/v7/picker/multiple-column/angular/example_component_html.md @@ -1,8 +1,4 @@ ```html Open - + ``` diff --git a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md index 11cd65eb0fc..10790602bc8 100644 --- a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md +++ b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md @@ -6,61 +6,71 @@ import { Component } from '@angular/core'; 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 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' + role: 'cancel', }, { text: 'Confirm', handler: (value) => { window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); - } - } + }, + }, ]; } ``` diff --git a/static/usage/v7/picker/multiple-column/index.md b/static/usage/v7/picker/multiple-column/index.md index 48a6d1202fa..d8b5d5d7485 100644 --- a/static/usage/v7/picker/multiple-column/index.md +++ b/static/usage/v7/picker/multiple-column/index.md @@ -8,8 +8,8 @@ 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/v7/picker/multiple-column/javascript.md b/static/usage/v7/picker/multiple-column/javascript.md index ad8e838a8c0..9196a0dc7c7 100644 --- a/static/usage/v7/picker/multiple-column/javascript.md +++ b/static/usage/v7/picker/multiple-column/javascript.md @@ -5,61 +5,71 @@ ``` diff --git a/static/usage/v7/picker/multiple-column/react.md b/static/usage/v7/picker/multiple-column/react.md index cfa6465169e..cd01f4aa199 100644 --- a/static/usage/v7/picker/multiple-column/react.md +++ b/static/usage/v7/picker/multiple-column/react.md @@ -8,62 +8,72 @@ function Example() { Open { - window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); - } - } + window.alert( + `You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}` + ); + }, + }, ]} > diff --git a/static/usage/v7/picker/multiple-column/vue.md b/static/usage/v7/picker/multiple-column/vue.md index df54238bf66..16251372059 100644 --- a/static/usage/v7/picker/multiple-column/vue.md +++ b/static/usage/v7/picker/multiple-column/vue.md @@ -1,11 +1,7 @@ ```html ``` diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_css.md b/static/usage/v7/popover/customization/positioning/angular/example_component_css.md index c92d80212a7..56a63480d75 100644 --- a/static/usage/v7/popover/customization/positioning/angular/example_component_css.md +++ b/static/usage/v7/popover/customization/positioning/angular/example_component_css.md @@ -9,4 +9,4 @@ ion-popover { flex-direction: column; padding: 80px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_html.md b/static/usage/v7/popover/customization/positioning/angular/example_component_html.md index a0036bd9ef9..d911b195f92 100644 --- a/static/usage/v7/popover/customization/positioning/angular/example_component_html.md +++ b/static/usage/v7/popover/customization/positioning/angular/example_component_html.md @@ -16,7 +16,7 @@ Side=Left, Alignment=Start - + Hello World! diff --git a/static/usage/v7/popover/customization/positioning/index.md b/static/usage/v7/popover/customization/positioning/index.md index b39363d2a7f..a61a09a59ac 100644 --- a/static/usage/v7/popover/customization/positioning/index.md +++ b/static/usage/v7/popover/customization/positioning/index.md @@ -11,9 +11,9 @@ 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/v7/popover/customization/positioning/react/main_css.md b/static/usage/v7/popover/customization/positioning/react/main_css.md index c92d80212a7..56a63480d75 100644 --- a/static/usage/v7/popover/customization/positioning/react/main_css.md +++ b/static/usage/v7/popover/customization/positioning/react/main_css.md @@ -9,4 +9,4 @@ ion-popover { flex-direction: column; padding: 80px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/customization/sizing/index.md b/static/usage/v7/popover/customization/sizing/index.md index 3eb127648dc..862a77d4642 100644 --- a/static/usage/v7/popover/customization/sizing/index.md +++ b/static/usage/v7/popover/customization/sizing/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/popover/customization/styling/angular/global_css.md b/static/usage/v7/popover/customization/styling/angular/global_css.md index 25890b90538..434a31d24d9 100644 --- a/static/usage/v7/popover/customization/styling/angular/global_css.md +++ b/static/usage/v7/popover/customization/styling/angular/global_css.md @@ -14,4 +14,4 @@ ion-popover ion-content { ion-popover::part(backdrop) { background-color: rgb(6, 14, 106); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/customization/styling/index.md b/static/usage/v7/popover/customization/styling/index.md index 658ef72d45a..630c8e4db77 100644 --- a/static/usage/v7/popover/customization/styling/index.md +++ b/static/usage/v7/popover/customization/styling/index.md @@ -10,9 +10,9 @@ 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/v7/popover/customization/styling/react/main_css.md b/static/usage/v7/popover/customization/styling/react/main_css.md index 25890b90538..434a31d24d9 100644 --- a/static/usage/v7/popover/customization/styling/react/main_css.md +++ b/static/usage/v7/popover/customization/styling/react/main_css.md @@ -14,4 +14,4 @@ ion-popover ion-content { ion-popover::part(backdrop) { background-color: rgb(6, 14, 106); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/nested/index.md b/static/usage/v7/popover/nested/index.md index cb8a824edb0..74ea996d2a5 100644 --- a/static/usage/v7/popover/nested/index.md +++ b/static/usage/v7/popover/nested/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/popover/performance/mount/index.md b/static/usage/v7/popover/performance/mount/index.md index 9c846cc784b..4b6850749d5 100644 --- a/static/usage/v7/popover/performance/mount/index.md +++ b/static/usage/v7/popover/performance/mount/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/popover/performance/mount/javascript.md b/static/usage/v7/popover/performance/mount/javascript.md index 5dd5f8a624e..297c94344f1 100644 --- a/static/usage/v7/popover/performance/mount/javascript.md +++ b/static/usage/v7/popover/performance/mount/javascript.md @@ -3,4 +3,4 @@ This content was mounted as soon as the popover was created. -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/presenting/controller/angular/example_component_html.md b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md index da857f78745..f84fbf6fd80 100644 --- a/static/usage/v7/popover/presenting/controller/angular/example_component_html.md +++ b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md @@ -1,4 +1,4 @@ ```html Click Me

{{ roleMsg }}

-``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md b/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md index 74cbf83fec4..583a6dea593 100644 --- a/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md +++ b/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md @@ -1,3 +1,3 @@ ```html Hello World! -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/presenting/controller/index.md b/static/usage/v7/popover/presenting/controller/index.md index 65764b052ff..018e63a8352 100644 --- a/static/usage/v7/popover/presenting/controller/index.md +++ b/static/usage/v7/popover/presenting/controller/index.md @@ -13,9 +13,9 @@ 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/v7/popover/presenting/controller/javascript.md b/static/usage/v7/popover/presenting/controller/javascript.md index 896772b276b..078514628a8 100644 --- a/static/usage/v7/popover/presenting/controller/javascript.md +++ b/static/usage/v7/popover/presenting/controller/javascript.md @@ -20,7 +20,7 @@ async function presentPopover(e) { const popover = Object.assign(document.createElement('ion-popover'), { component: 'popover-page', - event: e + event: e, }); document.body.appendChild(popover); diff --git a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md index 1bc5738c6ad..85f8bd06cad 100644 --- a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md +++ b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md @@ -4,12 +4,12 @@ -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md index 80201dba3d2..1d8369f31e2 100644 --- a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md +++ b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md @@ -5,4 +5,4 @@ Hello World! -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/presenting/inline-isopen/index.md b/static/usage/v7/popover/presenting/inline-isopen/index.md index b03937849fb..a7a3073160f 100644 --- a/static/usage/v7/popover/presenting/inline-isopen/index.md +++ b/static/usage/v7/popover/presenting/inline-isopen/index.md @@ -8,9 +8,9 @@ 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/v7/popover/presenting/inline-isopen/javascript.md b/static/usage/v7/popover/presenting/inline-isopen/javascript.md index b780125ba1e..1daafed1894 100644 --- a/static/usage/v7/popover/presenting/inline-isopen/javascript.md +++ b/static/usage/v7/popover/presenting/inline-isopen/javascript.md @@ -8,11 +8,11 @@ const button = document.querySelector('ion-button'); const popover = document.querySelector('ion-popover'); - button.addEventListener('click', e => { + button.addEventListener('click', (e) => { popover.event = e; popover.isOpen = true; }); - popover.addEventListener('didDismiss', () => popover.isOpen = false); + popover.addEventListener('didDismiss', () => (popover.isOpen = false)); ``` diff --git a/static/usage/v7/popover/presenting/inline-trigger/index.md b/static/usage/v7/popover/presenting/inline-trigger/index.md index ac99108a561..b891d0856b2 100644 --- a/static/usage/v7/popover/presenting/inline-trigger/index.md +++ b/static/usage/v7/popover/presenting/inline-trigger/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md index 56e3d3a3b09..a876a376204 100644 --- a/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md +++ b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.css'] + styleUrls: ['example.component.css'], }) export class ExampleComponent { public buffer = 0.06; diff --git a/static/usage/v7/progress-bar/buffer/index.md b/static/usage/v7/progress-bar/buffer/index.md index 2108ac9ed43..1156cccd7fe 100644 --- a/static/usage/v7/progress-bar/buffer/index.md +++ b/static/usage/v7/progress-bar/buffer/index.md @@ -9,8 +9,8 @@ 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/v7/progress-bar/buffer/react.md b/static/usage/v7/progress-bar/buffer/react.md index 1fa8208ac3a..10f35e69538 100644 --- a/static/usage/v7/progress-bar/buffer/react.md +++ b/static/usage/v7/progress-bar/buffer/react.md @@ -22,9 +22,7 @@ function Example() { }, 1000); } - return ( - - ); + return ; } export default Example; ``` diff --git a/static/usage/v7/progress-bar/buffer/vue.md b/static/usage/v7/progress-bar/buffer/vue.md index 3edc59bdf6f..c70c23eb470 100644 --- a/static/usage/v7/progress-bar/buffer/vue.md +++ b/static/usage/v7/progress-bar/buffer/vue.md @@ -15,7 +15,7 @@ return { buffer, - progress + progress, }; }, mounted() { @@ -32,7 +32,7 @@ }, 1000); } }, 1000); - } + }, }); ``` diff --git a/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md index d8f8b690fc9..971d3d92ed0 100644 --- a/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md +++ b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.css'] + styleUrls: ['example.component.css'], }) export class ExampleComponent { public progress = 0; diff --git a/static/usage/v7/progress-bar/determinate/index.md b/static/usage/v7/progress-bar/determinate/index.md index 790b44766a8..4fea0db6823 100644 --- a/static/usage/v7/progress-bar/determinate/index.md +++ b/static/usage/v7/progress-bar/determinate/index.md @@ -9,8 +9,8 @@ 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/v7/progress-bar/determinate/react.md b/static/usage/v7/progress-bar/determinate/react.md index 9622be87f95..474d4dd878e 100644 --- a/static/usage/v7/progress-bar/determinate/react.md +++ b/static/usage/v7/progress-bar/determinate/react.md @@ -19,9 +19,7 @@ function Example() { }, 1000); } - return ( - - ); + return ; } export default Example; ``` diff --git a/static/usage/v7/progress-bar/determinate/vue.md b/static/usage/v7/progress-bar/determinate/vue.md index c22b3ead5d3..5eb4cd2b847 100644 --- a/static/usage/v7/progress-bar/determinate/vue.md +++ b/static/usage/v7/progress-bar/determinate/vue.md @@ -13,7 +13,7 @@ let progress = ref(0); return { - progress + progress, }; }, mounted() { @@ -28,7 +28,7 @@ }, 1000); } }, 50); - } + }, }); ``` diff --git a/static/usage/v7/progress-bar/indeterminate/index.md b/static/usage/v7/progress-bar/indeterminate/index.md index db428ba5871..4b98d2096cd 100644 --- a/static/usage/v7/progress-bar/indeterminate/index.md +++ b/static/usage/v7/progress-bar/indeterminate/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/progress-bar/indeterminate/react.md b/static/usage/v7/progress-bar/indeterminate/react.md index 45e74e79ce7..b856e1f29f2 100644 --- a/static/usage/v7/progress-bar/indeterminate/react.md +++ b/static/usage/v7/progress-bar/indeterminate/react.md @@ -3,9 +3,7 @@ import React from 'react'; import { IonProgressBar } from '@ionic/react'; function Example() { - return ( - - ); + return ; } export default Example; ``` diff --git a/static/usage/v7/progress-bar/theming/colors/index.md b/static/usage/v7/progress-bar/theming/colors/index.md index 7e6638a7e74..21c488b4cc4 100644 --- a/static/usage/v7/progress-bar/theming/colors/index.md +++ b/static/usage/v7/progress-bar/theming/colors/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md index d2c997037ad..a374b2ee72c 100644 --- a/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md @@ -1,4 +1,3 @@ ```html - - + ``` diff --git a/static/usage/v7/progress-bar/theming/css-properties/index.md b/static/usage/v7/progress-bar/theming/css-properties/index.md index 5d6c694d104..a50ad650aa6 100644 --- a/static/usage/v7/progress-bar/theming/css-properties/index.md +++ b/static/usage/v7/progress-bar/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/progress-bar/theming/css-properties/react/main_tsx.md b/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md index a4c5e382892..3e05757d942 100644 --- a/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonProgressBar } from '@ionic/react'; @@ -8,7 +7,7 @@ import './main.css'; function Example() { return ( <> - + ); diff --git a/static/usage/v7/progress-bar/theming/css-properties/vue.md b/static/usage/v7/progress-bar/theming/css-properties/vue.md index bfff4db7a1b..f63aec9e644 100644 --- a/static/usage/v7/progress-bar/theming/css-properties/vue.md +++ b/static/usage/v7/progress-bar/theming/css-properties/vue.md @@ -9,7 +9,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonProgressBar } + components: { IonProgressBar }, }); diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md index d2c997037ad..a374b2ee72c 100644 --- a/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md +++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md @@ -1,4 +1,3 @@ ```html - - + ``` diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md index e289ac2035c..7fe93d4ef05 100644 --- a/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md +++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md @@ -11,8 +11,8 @@ 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/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md index a4c5e382892..3e05757d942 100644 --- a/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md +++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonProgressBar } from '@ionic/react'; @@ -8,7 +7,7 @@ import './main.css'; function Example() { return ( <> - + ); diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md index a9ca62b2c4f..5750323198e 100644 --- a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md +++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md @@ -9,7 +9,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonProgressBar } + components: { IonProgressBar }, }); diff --git a/static/usage/v7/radio/basic/angular.md b/static/usage/v7/radio/basic/angular.md index 47f36bcad0e..a8caa3c1973 100644 --- a/static/usage/v7/radio/basic/angular.md +++ b/static/usage/v7/radio/basic/angular.md @@ -1,6 +1,6 @@ ```html - Grapes
+ Grapes
Strawberries
Pineapple
Cherries diff --git a/static/usage/v7/radio/basic/javascript.md b/static/usage/v7/radio/basic/javascript.md index 47f36bcad0e..a8caa3c1973 100644 --- a/static/usage/v7/radio/basic/javascript.md +++ b/static/usage/v7/radio/basic/javascript.md @@ -1,6 +1,6 @@ ```html - Grapes
+ Grapes
Strawberries
Pineapple
Cherries diff --git a/static/usage/v7/radio/basic/react.md b/static/usage/v7/radio/basic/react.md index f826499e307..7f8cf4e07f4 100644 --- a/static/usage/v7/radio/basic/react.md +++ b/static/usage/v7/radio/basic/react.md @@ -5,9 +5,12 @@ import { IonRadio, IonRadioGroup } from '@ionic/react'; function Example() { return ( - Grapes
- Strawberries
- Pineapple
+ Grapes +
+ Strawberries +
+ Pineapple +
Cherries ); diff --git a/static/usage/v7/radio/basic/vue.md b/static/usage/v7/radio/basic/vue.md index cf4878155af..2d552901212 100644 --- a/static/usage/v7/radio/basic/vue.md +++ b/static/usage/v7/radio/basic/vue.md @@ -1,7 +1,7 @@ ```html @@ -50,7 +50,7 @@ IonSkeletonText, IonThumbnail, } from '@ionic/vue'; - import { musicalNotes } from 'ionicons/icons' + import { musicalNotes } from 'ionicons/icons'; import { defineComponent, ref } from 'vue'; export default defineComponent({ @@ -66,13 +66,13 @@ }, setup() { const loaded = ref(false); - const setLoaded = (state: boolean) => loaded.value = state; + const setLoaded = (state: boolean) => (loaded.value = state); return { loaded, musicalNotes, - setLoaded - } - } + setLoaded, + }; + }, }); ``` diff --git a/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md index 67761872c60..c59d8603262 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md @@ -4,4 +4,4 @@ ion-skeleton-text { --background: rgba(188, 0, 255, 0.065); --background-rgb: 188, 0, 255; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/skeleton-text/theming/css-properties/index.md b/static/usage/v7/skeleton-text/theming/css-properties/index.md index c131f6dbe19..72e4c186acc 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/index.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/skeleton-text/theming/css-properties/javascript.md b/static/usage/v7/skeleton-text/theming/css-properties/javascript.md index 20463c6aba6..90d27d3f31e 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/javascript.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/javascript.md @@ -26,6 +26,6 @@

- + ``` diff --git a/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md index 67761872c60..c59d8603262 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md @@ -4,4 +4,4 @@ ion-skeleton-text { --background: rgba(188, 0, 255, 0.065); --background-rgb: 188, 0, 255; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md index 29e6e159f68..d66ea73ff7f 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md @@ -1,13 +1,6 @@ ```tsx import React from 'react'; -import { - IonItem, - IonLabel, - IonList, - IonListHeader, - IonSkeletonText, - IonThumbnail, -} from '@ionic/react'; +import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/react'; import './main.css'; @@ -15,7 +8,7 @@ function Example() { return ( - + @@ -23,13 +16,13 @@ function Example() {

- +

- +

- +

@@ -37,4 +30,4 @@ function Example() { ); } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v7/skeleton-text/theming/css-properties/vue.md b/static/usage/v7/skeleton-text/theming/css-properties/vue.md index 418a7ca610f..2785a0e8b51 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/vue.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/vue.md @@ -1,5 +1,5 @@ ```html - @@ -30,7 +26,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, + components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, }); ``` diff --git a/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md index 4772826c933..029f5d3ee56 100644 --- a/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md @@ -6,9 +6,7 @@ Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border
@@ -17,9 +15,7 @@ Main View - - Main View Content - + Main View Content
``` diff --git a/static/usage/v7/split-pane/theming/css-properties/index.md b/static/usage/v7/split-pane/theming/css-properties/index.md index 336074baaaf..09d6c8d4ec3 100644 --- a/static/usage/v7/split-pane/theming/css-properties/index.md +++ b/static/usage/v7/split-pane/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/split-pane/theming/css-properties/javascript.md b/static/usage/v7/split-pane/theming/css-properties/javascript.md index 943993aa380..37bd7b9e7f1 100644 --- a/static/usage/v7/split-pane/theming/css-properties/javascript.md +++ b/static/usage/v7/split-pane/theming/css-properties/javascript.md @@ -6,9 +6,7 @@ Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border
@@ -17,9 +15,7 @@ Main View - - Main View Content - + Main View Content
@@ -27,7 +23,7 @@ ion-split-pane { --side-width: 350px; --side-max-width: 350px; - + --border: 1px dashed #b3baff; } diff --git a/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md index 7456a34359d..1d4ad6a2e19 100644 --- a/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md @@ -13,20 +13,16 @@ function Example() { Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border - +
Main View - - Main View Content - + Main View Content
); diff --git a/static/usage/v7/split-pane/theming/css-properties/vue.md b/static/usage/v7/split-pane/theming/css-properties/vue.md index cc891eaeda1..f0abcf95800 100644 --- a/static/usage/v7/split-pane/theming/css-properties/vue.md +++ b/static/usage/v7/split-pane/theming/css-properties/vue.md @@ -7,20 +7,16 @@ Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border - +
Main View - - Main View Content - + Main View Content
@@ -30,7 +26,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, + components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, }); @@ -38,7 +34,7 @@ ion-split-pane { --side-width: 350px; --side-max-width: 350px; - + --border: 1px dashed #b3baff; } diff --git a/static/usage/v7/tabs/router/index.md b/static/usage/v7/tabs/router/index.md index c7e59ac79bc..ef0265caa09 100644 --- a/static/usage/v7/tabs/router/index.md +++ b/static/usage/v7/tabs/router/index.md @@ -42,8 +42,8 @@ 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/v7/text/basic/angular.md b/static/usage/v7/text/basic/angular.md index fb2f6064fba..e63da3cacf9 100644 --- a/static/usage/v7/text/basic/angular.md +++ b/static/usage/v7/text/basic/angular.md @@ -13,9 +13,9 @@

- 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. + 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/v7/text/basic/javascript.md b/static/usage/v7/text/basic/javascript.md index fb2f6064fba..e63da3cacf9 100644 --- a/static/usage/v7/text/basic/javascript.md +++ b/static/usage/v7/text/basic/javascript.md @@ -13,9 +13,9 @@

- 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. + 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/v7/text/basic/react.md b/static/usage/v7/text/basic/react.md index dac54e84471..da8882e3bf5 100644 --- a/static/usage/v7/text/basic/react.md +++ b/static/usage/v7/text/basic/react.md @@ -19,11 +19,14 @@ function Example() {

- - 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. + + + + 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/v7/text/basic/vue.md b/static/usage/v7/text/basic/vue.md index 742167bf9f1..b34cd3d437a 100644 --- a/static/usage/v7/text/basic/vue.md +++ b/static/usage/v7/text/basic/vue.md @@ -14,10 +14,10 @@

- 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. + 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/v7/textarea/autogrow/angular.md b/static/usage/v7/textarea/autogrow/angular.md index 5ff7394eec0..03de94359b6 100644 --- a/static/usage/v7/textarea/autogrow/angular.md +++ b/static/usage/v7/textarea/autogrow/angular.md @@ -1,7 +1,10 @@ ```html - + ``` diff --git a/static/usage/v7/textarea/autogrow/index.md b/static/usage/v7/textarea/autogrow/index.md index 9dd79cbd7cd..f230d844d08 100644 --- a/static/usage/v7/textarea/autogrow/index.md +++ b/static/usage/v7/textarea/autogrow/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/textarea/autogrow/javascript.md b/static/usage/v7/textarea/autogrow/javascript.md index bea62987f5e..4c2e15028fd 100644 --- a/static/usage/v7/textarea/autogrow/javascript.md +++ b/static/usage/v7/textarea/autogrow/javascript.md @@ -1,7 +1,10 @@ ```html - + ``` diff --git a/static/usage/v7/textarea/autogrow/vue.md b/static/usage/v7/textarea/autogrow/vue.md index 824ada24909..693814464e8 100644 --- a/static/usage/v7/textarea/autogrow/vue.md +++ b/static/usage/v7/textarea/autogrow/vue.md @@ -1,8 +1,11 @@ ```html diff --git a/static/usage/v7/textarea/basic/index.md b/static/usage/v7/textarea/basic/index.md index 3070fbea859..d0f7ce4c5e6 100644 --- a/static/usage/v7/textarea/basic/index.md +++ b/static/usage/v7/textarea/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/textarea/clear-on-edit/index.md b/static/usage/v7/textarea/clear-on-edit/index.md index cc1e09366e2..471b4f4317a 100644 --- a/static/usage/v7/textarea/clear-on-edit/index.md +++ b/static/usage/v7/textarea/clear-on-edit/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/textarea/counter/index.md b/static/usage/v7/textarea/counter/index.md index 811a12a70ca..a9112d0ec23 100644 --- a/static/usage/v7/textarea/counter/index.md +++ b/static/usage/v7/textarea/counter/index.md @@ -8,8 +8,8 @@ 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/v7/textarea/fill/index.md b/static/usage/v7/textarea/fill/index.md index bfc5b54da5d..7410c9669d8 100644 --- a/static/usage/v7/textarea/fill/index.md +++ b/static/usage/v7/textarea/fill/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/textarea/helper-error/index.md b/static/usage/v7/textarea/helper-error/index.md index 5d4ca92e487..c53d895546c 100644 --- a/static/usage/v7/textarea/helper-error/index.md +++ b/static/usage/v7/textarea/helper-error/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/textarea/label-placement/index.md b/static/usage/v7/textarea/label-placement/index.md index 8ced2454c74..05f8b50fa59 100644 --- a/static/usage/v7/textarea/label-placement/index.md +++ b/static/usage/v7/textarea/label-placement/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/textarea/migration/index.md b/static/usage/v7/textarea/migration/index.md index 6413224a286..aa820c53b48 100644 --- a/static/usage/v7/textarea/migration/index.md +++ b/static/usage/v7/textarea/migration/index.md @@ -55,8 +55,8 @@ import TabItem from '@theme/TabItem'; @@ -113,8 +113,8 @@ import TabItem from '@theme/TabItem'; @@ -170,9 +170,9 @@ import TabItem from '@theme/TabItem'; {/* After */} -{/* - Metadata such as counters and helper text should not - be used when a textarea is in an item/list. If you need to +{/* + 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. */} @@ -229,8 +229,8 @@ import TabItem from '@theme/TabItem'; diff --git a/static/usage/v7/textarea/theming/index.md b/static/usage/v7/textarea/theming/index.md index 9042fb29fa4..129b9dbb7d0 100644 --- a/static/usage/v7/textarea/theming/index.md +++ b/static/usage/v7/textarea/theming/index.md @@ -11,9 +11,9 @@ 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/v7/textarea/theming/javascript.md b/static/usage/v7/textarea/theming/javascript.md index ae34bb17a0f..c654ae883a9 100644 --- a/static/usage/v7/textarea/theming/javascript.md +++ b/static/usage/v7/textarea/theming/javascript.md @@ -17,7 +17,7 @@ --placeholder-color: #ddd; --placeholder-opacity: 0.8; } - + ion-textarea.custom .helper-text, ion-textarea.custom .counter { color: #373737; diff --git a/static/usage/v7/textarea/theming/vue.md b/static/usage/v7/textarea/theming/vue.md index be3ad556a62..c7cef62ba4a 100644 --- a/static/usage/v7/textarea/theming/vue.md +++ b/static/usage/v7/textarea/theming/vue.md @@ -8,7 +8,7 @@ --placeholder-color: #ddd; --placeholder-opacity: 0.8; } - + ion-textarea.custom .helper-text, ion-textarea.custom .counter { color: #373737; diff --git a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md index 605855deb77..74742dfe9f0 100644 --- a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md @@ -1,4 +1,3 @@ - ```css ion-thumbnail { --size: 140px; diff --git a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md index 8ef97cae761..119cfb8ee9c 100644 --- a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md @@ -1,4 +1,3 @@ - ```html Silhouette of mountains diff --git a/static/usage/v7/thumbnail/theming/css-properties/index.md b/static/usage/v7/thumbnail/theming/css-properties/index.md index 36674cc72c0..72b29ee4b5c 100644 --- a/static/usage/v7/thumbnail/theming/css-properties/index.md +++ b/static/usage/v7/thumbnail/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md index 37f4796d763..1d0f352383f 100644 --- a/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonThumbnail } from '@ionic/react'; diff --git a/static/usage/v7/title/basic/index.md b/static/usage/v7/title/basic/index.md index 2ff7e96f44a..4932392602d 100644 --- a/static/usage/v7/title/basic/index.md +++ b/static/usage/v7/title/basic/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/title/collapsible-large-title/basic/index.md b/static/usage/v7/title/collapsible-large-title/basic/index.md index 8cb9a0cd0a0..74250a387b6 100644 --- a/static/usage/v7/title/collapsible-large-title/basic/index.md +++ b/static/usage/v7/title/collapsible-large-title/basic/index.md @@ -6,11 +6,11 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/title/collapsible-large-title/buttons/index.md b/static/usage/v7/title/collapsible-large-title/buttons/index.md index b11f1bbe655..d89e29b9900 100644 --- a/static/usage/v7/title/collapsible-large-title/buttons/index.md +++ b/static/usage/v7/title/collapsible-large-title/buttons/index.md @@ -6,10 +6,10 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/title/theming/css-properties/index.md b/static/usage/v7/title/theming/css-properties/index.md index aed27e79157..e6adf5f71a5 100644 --- a/static/usage/v7/title/theming/css-properties/index.md +++ b/static/usage/v7/title/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/toast/buttons/angular/example_component_html.md b/static/usage/v7/toast/buttons/angular/example_component_html.md index 3245d44e8a4..36717f5eb9a 100644 --- a/static/usage/v7/toast/buttons/angular/example_component_html.md +++ b/static/usage/v7/toast/buttons/angular/example_component_html.md @@ -2,11 +2,11 @@ Open Toast

{{ handlerMessage }}

{{ roleMessage }}

-``` \ No newline at end of file +``` diff --git a/static/usage/v7/toast/buttons/angular/example_component_ts.md b/static/usage/v7/toast/buttons/angular/example_component_ts.md index 9adc2711591..dd34310e22d 100644 --- a/static/usage/v7/toast/buttons/angular/example_component_ts.md +++ b/static/usage/v7/toast/buttons/angular/example_component_ts.md @@ -10,20 +10,24 @@ export class ExampleComponent { { text: 'More Info', role: 'info', - handler: () => { this.handlerMessage = 'More Info clicked'; } + handler: () => { + this.handlerMessage = 'More Info clicked'; + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { this.handlerMessage = 'Dismiss clicked'; } - } + handler: () => { + this.handlerMessage = 'Dismiss clicked'; + }, + }, ]; handlerMessage = ''; roleMessage = ''; setRoleMessage(ev) { - const { role } = ev.detail + const { role } = ev.detail; this.roleMessage = `Dismissed with role: ${role}`; } } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/toast/buttons/index.md b/static/usage/v7/toast/buttons/index.md index 75d2d2c2a2e..a911ef84feb 100644 --- a/static/usage/v7/toast/buttons/index.md +++ b/static/usage/v7/toast/buttons/index.md @@ -8,9 +8,9 @@ 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/v7/toast/buttons/javascript.md b/static/usage/v7/toast/buttons/javascript.md index 86cf3cb0b68..f8dfa701d1d 100644 --- a/static/usage/v7/toast/buttons/javascript.md +++ b/static/usage/v7/toast/buttons/javascript.md @@ -8,20 +8,24 @@ const toast = document.querySelector('ion-toast'); const handlerOutput = document.querySelector('#handlerResult'); const roleOutput = document.querySelector('#roleResult'); - + toast.buttons = [ { text: 'More Info', role: 'info', - handler: () => { handlerOutput.innerText = 'More Info clicked'; } + handler: () => { + handlerOutput.innerText = 'More Info clicked'; + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { handlerOutput.innerText = 'Dismiss clicked'; } - } + handler: () => { + handlerOutput.innerText = 'Dismiss clicked'; + }, + }, ]; - + toast.addEventListener('ionToastDidDismiss', (ev) => { const { role } = ev.detail; roleOutput.innerText = `Dismissed with role: ${role}`; diff --git a/static/usage/v7/toast/buttons/react.md b/static/usage/v7/toast/buttons/react.md index fc8b603fa20..ac815c8c693 100644 --- a/static/usage/v7/toast/buttons/react.md +++ b/static/usage/v7/toast/buttons/react.md @@ -17,13 +17,17 @@ function Example() { { text: 'More Info', role: 'info', - handler: () => { setHandlerMessage('More Info clicked'); } + handler: () => { + setHandlerMessage('More Info clicked'); + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { setHandlerMessage('Dismiss clicked'); } - } + handler: () => { + setHandlerMessage('Dismiss clicked'); + }, + }, ]} onDidDismiss={(e: CustomEvent) => setRoleMessage(`Dismissed with role: ${e.detail.role}`)} > diff --git a/static/usage/v7/toast/buttons/vue.md b/static/usage/v7/toast/buttons/vue.md index 3ae653988f6..3f0c0e87848 100644 --- a/static/usage/v7/toast/buttons/vue.md +++ b/static/usage/v7/toast/buttons/vue.md @@ -3,8 +3,8 @@ Open Toast @@ -25,27 +25,31 @@ { text: 'More Info', role: 'info', - handler: () => { handlerMessage.value = 'More Info clicked'; } + handler: () => { + handlerMessage.value = 'More Info clicked'; + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { handlerMessage.value = 'Dismiss clicked'; } - } - ] + handler: () => { + handlerMessage.value = 'Dismiss clicked'; + }, + }, + ]; const setRoleMessage = (ev: CustomEvent) => { - const { role } = ev.detail - console.log('hi there') + const { role } = ev.detail; + console.log('hi there'); roleMessage.value = `Dismissed with role: ${role}`; - } - + }; + return { handlerMessage, roleMessage, toastButtons, - setRoleMessage - } - } + setRoleMessage, + }; + }, }); ``` diff --git a/static/usage/v7/toast/icon/angular.md b/static/usage/v7/toast/icon/angular.md index 2dc76a51fa6..819a72c342f 100644 --- a/static/usage/v7/toast/icon/angular.md +++ b/static/usage/v7/toast/icon/angular.md @@ -1,4 +1,4 @@ ```html Open Toast -``` \ No newline at end of file +``` diff --git a/static/usage/v7/toast/icon/index.md b/static/usage/v7/toast/icon/index.md index 1418e06b870..63cdd6ddaad 100644 --- a/static/usage/v7/toast/icon/index.md +++ b/static/usage/v7/toast/icon/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/toast/icon/vue.md b/static/usage/v7/toast/icon/vue.md index 634f18e7ff5..223e37b3222 100644 --- a/static/usage/v7/toast/icon/vue.md +++ b/static/usage/v7/toast/icon/vue.md @@ -7,14 +7,14 @@ ``` diff --git a/static/usage/v7/toast/inline/basic/index.md b/static/usage/v7/toast/inline/basic/index.md index ad7f55c6e1e..f26ade253e0 100644 --- a/static/usage/v7/toast/inline/basic/index.md +++ b/static/usage/v7/toast/inline/basic/index.md @@ -6,14 +6,14 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/toast/inline/basic/react.md b/static/usage/v7/toast/inline/basic/react.md index 898603a0516..0def9d5e178 100644 --- a/static/usage/v7/toast/inline/basic/react.md +++ b/static/usage/v7/toast/inline/basic/react.md @@ -1,14 +1,6 @@ ```tsx import React from 'react'; -import { - IonButton, - IonHeader, - IonContent, - IonToolbar, - IonTitle, - IonPage, - IonToast, -} from '@ionic/react'; +import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonToast } from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v7/toast/inline/basic/vue.md b/static/usage/v7/toast/inline/basic/vue.md index 48c07b16d95..1b81018bcdb 100644 --- a/static/usage/v7/toast/inline/basic/vue.md +++ b/static/usage/v7/toast/inline/basic/vue.md @@ -13,14 +13,7 @@ ``` diff --git a/static/usage/v7/toast/layout/angular/example_component_html.md b/static/usage/v7/toast/layout/angular/example_component_html.md index 6f33423b8a5..2efa0572c4b 100644 --- a/static/usage/v7/toast/layout/angular/example_component_html.md +++ b/static/usage/v7/toast/layout/angular/example_component_html.md @@ -1,17 +1,17 @@ ```html Open Baseline Layout Toast Open Stacked Layout Toast - -``` \ No newline at end of file +``` diff --git a/static/usage/v7/toast/layout/angular/example_component_ts.md b/static/usage/v7/toast/layout/angular/example_component_ts.md index 4070a210849..89c39c33323 100644 --- a/static/usage/v7/toast/layout/angular/example_component_ts.md +++ b/static/usage/v7/toast/layout/angular/example_component_ts.md @@ -9,7 +9,7 @@ export class ExampleComponent { toastButtons = [ { text: 'Action With Long Text', - } + }, ]; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/toast/layout/index.md b/static/usage/v7/toast/layout/index.md index 26d799850e4..b3fcc7be97c 100644 --- a/static/usage/v7/toast/layout/index.md +++ b/static/usage/v7/toast/layout/index.md @@ -8,9 +8,9 @@ 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/v7/toast/layout/javascript.md b/static/usage/v7/toast/layout/javascript.md index 1ac30c76931..6ae1998b02d 100644 --- a/static/usage/v7/toast/layout/javascript.md +++ b/static/usage/v7/toast/layout/javascript.md @@ -1,12 +1,21 @@ ```html Open Baseline Layout Toast Open Stacked Layout Toast - - + + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ Columns aligned at the start + + + 1 + 2 + + - - - -
- Columns aligned at the start - - - - 1 - - - 2 - - - + Columns aligned at the center + + + 1 + 2 + + - Columns aligned at the center - - - - 1 - - - 2 - - - + Columns aligned at the end + + + 1 + 2 + + - Columns aligned at the end - - - - 1 - - - 2 - - - + Columns aligned with space around + + + 1 + 2 + + - Columns aligned with space around - - - - 1 - - - 2 - - - - - Columns aligned with space between - - - - 1 - - - 2 - - - - - - - - \ No newline at end of file + Columns aligned with space between + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v6/grid/vertical-alignment/demo.html b/static/usage/v6/grid/vertical-alignment/demo.html index dd1388fcdbf..08b36d23cf4 100644 --- a/static/usage/v6/grid/vertical-alignment/demo.html +++ b/static/usage/v6/grid/vertical-alignment/demo.html @@ -1,103 +1,84 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ Columns aligned at the top + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + - - - -
- Columns aligned at the top - - - - 1 - - - 2 - - - 3 - - - 4
- #
- #
- #
- - - + Columns aligned at the center + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + - Columns aligned at the center - - - - 1 - - - 2 - - - 3 - - - 4
- #
- #
- #
- - - - - Columns aligned at the bottom - - - - 1 - - - 2 - - - 3 - - - 4
- #
- #
- #
- - - - - - - - \ No newline at end of file + Columns aligned at the bottom + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + +
+ + + + diff --git a/static/usage/v6/label/input/demo.html b/static/usage/v6/label/input/demo.html index d43bb5ba712..c352274c8d6 100644 --- a/static/usage/v6/label/input/demo.html +++ b/static/usage/v6/label/input/demo.html @@ -1,59 +1,56 @@ - - - - - Label - - - - - - - - - - - - -
- - Default Label - - - - - Fixed Label - - - - - Floating Label - - - - - Stacked Label - - - - - Toggle - - - - - - Checkbox - -
- - - - - \ No newline at end of file + + + + Label + + + + + + + + + + + +
+ + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +
+ + + + diff --git a/static/usage/v6/label/item/demo.html b/static/usage/v6/label/item/demo.html index 67dbf234345..c169bc73d8f 100644 --- a/static/usage/v6/label/item/demo.html +++ b/static/usage/v6/label/item/demo.html @@ -1,56 +1,51 @@ + + + + Label + + + + - - - - Label - - - - + + - - - + + + +
+ + Default 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 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. + + - - - 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

- - -
- - - - - \ No newline at end of file + + +

Heading

+

Paragraph

+ + +
+ + + + diff --git a/static/usage/v6/modal/inline/basic/demo.html b/static/usage/v6/modal/inline/basic/demo.html index 4007d9fc2be..03338a17a5a 100644 --- a/static/usage/v6/modal/inline/basic/demo.html +++ b/static/usage/v6/modal/inline/basic/demo.html @@ -1,67 +1,65 @@ + + + + Modal | Inline + + + + + - - - - Modal | Inline - - - - - + + + + + Inline Modal + + + + Open +

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

+ + + + + Cancel + + Welcome + + Confirm + + + + + + Enter your name + + + + + + - - - - - Inline Modal - - - - Open -

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

- - - - - Cancel - - Welcome - - Confirm - - - - - - Enter your name - - - - - - + - - \ No newline at end of file + modal.addEventListener('willDismiss', (ev) => { + if (ev.detail.role === 'confirm') { + const message = document.querySelector('#message'); + message.textContent = `Hello ${ev.detail.data}!`; + } + }); + + + diff --git a/static/usage/v6/modal/styling/theming/demo.html b/static/usage/v6/modal/styling/theming/demo.html index f0c3f00bbe4..fae5d8bb73d 100644 --- a/static/usage/v6/modal/styling/theming/demo.html +++ b/static/usage/v6/modal/styling/theming/demo.html @@ -1,101 +1,99 @@ + + + + Modal | Theming + + + + + + - ion-modal ion-toolbar { - --background: rgb(14 116 144); - --color: white; - } - - + + + + + App + + + + Open Modal - - - - - App - - - - Open Modal + + + + Modal + + Close + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + - - - - Modal - - Close - - - - - - - - -

Connor Smith

-

Sales Rep

- - - - - - - -

Daniel Smith

-

Product Designer

- - - - - - - -

Greg Smith

-

Director of Operations

- - - - - - - -

Zoey Smith

-

CEO

- - - - - - - + - - - \ No newline at end of file + function dismiss() { + modal.dismiss(); + } + + + diff --git a/static/usage/v6/range/ion-change-event/demo.html b/static/usage/v6/range/ion-change-event/demo.html index 93e35b59ba7..446085572d3 100644 --- a/static/usage/v6/range/ion-change-event/demo.html +++ b/static/usage/v6/range/ion-change-event/demo.html @@ -1,40 +1,39 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
-
- - ionChange emitted value: + + + +
+
+ + ionChange emitted value: +
- - - - + + + + + diff --git a/static/usage/v6/range/ion-knob-move-event/demo.html b/static/usage/v6/range/ion-knob-move-event/demo.html index 0522fd9b1ff..c1de1a7fa86 100644 --- a/static/usage/v6/range/ion-knob-move-event/demo.html +++ b/static/usage/v6/range/ion-knob-move-event/demo.html @@ -1,50 +1,49 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
-
- -
- ionKnobMoveStart: -
-
- ionKnobMoveEnd: + + + +
+
+ +
+ ionKnobMoveStart: +
+
+ ionKnobMoveEnd: +
- - - - + range.addEventListener('ionKnobMoveStart', ({ detail }) => { + moveStart.innerHTML = detail.value; + }); - \ No newline at end of file + range.addEventListener('ionKnobMoveEnd', ({ detail }) => { + moveEnd.innerHTML = detail.value; + }); + + + diff --git a/static/usage/v7/grid/horizontal-alignment/demo.html b/static/usage/v7/grid/horizontal-alignment/demo.html index ed5e66eef84..db1314706bb 100644 --- a/static/usage/v7/grid/horizontal-alignment/demo.html +++ b/static/usage/v7/grid/horizontal-alignment/demo.html @@ -1,100 +1,79 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ Columns aligned at the start + + + 1 + 2 + + - - - -
- Columns aligned at the start - - - - 1 - - - 2 - - - + Columns aligned at the center + + + 1 + 2 + + - Columns aligned at the center - - - - 1 - - - 2 - - - + Columns aligned at the end + + + 1 + 2 + + - Columns aligned at the end - - - - 1 - - - 2 - - - + Columns aligned with space around + + + 1 + 2 + + - Columns aligned with space around - - - - 1 - - - 2 - - - - - Columns aligned with space between - - - - 1 - - - 2 - - - - - - - - \ No newline at end of file + Columns aligned with space between + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v7/grid/vertical-alignment/demo.html b/static/usage/v7/grid/vertical-alignment/demo.html index 6831dd6faef..027b25dfaed 100644 --- a/static/usage/v7/grid/vertical-alignment/demo.html +++ b/static/usage/v7/grid/vertical-alignment/demo.html @@ -1,103 +1,84 @@ + + + + Grid + + + + - - - - Grid - - - - + + - ion-col { - background-color: #135d54; - border: solid 1px #fff; - color: #fff; - text-align: center; - } - - + + + +
+ Columns aligned at the top + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + - - - -
- Columns aligned at the top - - - - 1 - - - 2 - - - 3 - - - 4
- #
- #
- #
- - - + Columns aligned at the center + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + - Columns aligned at the center - - - - 1 - - - 2 - - - 3 - - - 4
- #
- #
- #
- - - - - Columns aligned at the bottom - - - - 1 - - - 2 - - - 3 - - - 4
- #
- #
- #
- - - - - - - - \ No newline at end of file + Columns aligned at the bottom + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + +
+ + + + diff --git a/static/usage/v7/label/input/demo.html b/static/usage/v7/label/input/demo.html index 673f3cb7f84..f35f297e34b 100644 --- a/static/usage/v7/label/input/demo.html +++ b/static/usage/v7/label/input/demo.html @@ -1,59 +1,56 @@ - - - - - Label - - - - - - - - - - - - -
- - Default Label - - - - - Fixed Label - - - - - Floating Label - - - - - Stacked Label - - - - - Toggle - - - - - - Checkbox - -
- - - - - \ No newline at end of file + + + + Label + + + + + + + + + + + +
+ + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +
+ + + + diff --git a/static/usage/v7/label/item/demo.html b/static/usage/v7/label/item/demo.html index 77791e5db37..b6f43ba9975 100644 --- a/static/usage/v7/label/item/demo.html +++ b/static/usage/v7/label/item/demo.html @@ -1,56 +1,51 @@ + + + + Label + + + + - - - - Label - - - - + + - - - + + + +
+ + Default 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 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. + + - - - 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

- - -
- - - - - \ No newline at end of file + + +

Heading

+

Paragraph

+ + +
+ + + + diff --git a/static/usage/v7/modal/inline/basic/demo.html b/static/usage/v7/modal/inline/basic/demo.html index 029b0d5d41c..9ea5eab1699 100644 --- a/static/usage/v7/modal/inline/basic/demo.html +++ b/static/usage/v7/modal/inline/basic/demo.html @@ -1,67 +1,65 @@ + + + + Modal | Inline + + + + + - - - - Modal | Inline - - - - - + + + + + Inline Modal + + + + Open +

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

+ + + + + Cancel + + Welcome + + Confirm + + + + + + Enter your name + + + + + + - - - - - Inline Modal - - - - Open -

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

- - - - - Cancel - - Welcome - - Confirm - - - - - - Enter your name - - - - - - + - - \ No newline at end of file + modal.addEventListener('willDismiss', (ev) => { + if (ev.detail.role === 'confirm') { + const message = document.querySelector('#message'); + message.textContent = `Hello ${ev.detail.data}!`; + } + }); + + + diff --git a/static/usage/v7/modal/styling/theming/demo.html b/static/usage/v7/modal/styling/theming/demo.html index 33d8805bd71..8711d7920bc 100644 --- a/static/usage/v7/modal/styling/theming/demo.html +++ b/static/usage/v7/modal/styling/theming/demo.html @@ -1,101 +1,99 @@ + + + + Modal | Theming + + + + + + - ion-modal ion-toolbar { - --background: rgb(14 116 144); - --color: white; - } - - + + + + + App + + + + Open Modal - - - - - App - - - - Open Modal + + + + Modal + + Close + + + + + + + + +

Connor Smith

+

Sales Rep

+ + + + + + + +

Daniel Smith

+

Product Designer

+ + + + + + + +

Greg Smith

+

Director of Operations

+ + + + + + + +

Zoey Smith

+

CEO

+ + + + + + + - - - - Modal - - Close - - - - - - - - -

Connor Smith

-

Sales Rep

- - - - - - - -

Daniel Smith

-

Product Designer

- - - - - - - -

Greg Smith

-

Director of Operations

- - - - - - - -

Zoey Smith

-

CEO

- - - - - - - + - - - \ No newline at end of file + function dismiss() { + modal.dismiss(); + } + + + diff --git a/static/usage/v7/range/ion-change-event/demo.html b/static/usage/v7/range/ion-change-event/demo.html index 2459de629cd..0c5f17d2875 100644 --- a/static/usage/v7/range/ion-change-event/demo.html +++ b/static/usage/v7/range/ion-change-event/demo.html @@ -1,40 +1,39 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
-
- - ionChange emitted value: + + + +
+
+ + ionChange emitted value: +
- - - - + + + + diff --git a/static/usage/v7/range/ion-knob-move-event/demo.html b/static/usage/v7/range/ion-knob-move-event/demo.html index d155682045f..c4c38f48f1c 100644 --- a/static/usage/v7/range/ion-knob-move-event/demo.html +++ b/static/usage/v7/range/ion-knob-move-event/demo.html @@ -1,50 +1,49 @@ + + + + Range + + + + + + - - - - Range - - - - - - - - - - -
-
- -
- ionKnobMoveStart: -
-
- ionKnobMoveEnd: + + + +
+
+ +
+ ionKnobMoveStart: +
+
+ ionKnobMoveEnd: +
- - - - + range.addEventListener('ionKnobMoveStart', ({ detail }) => { + moveStart.innerHTML = detail.value; + }); + range.addEventListener('ionKnobMoveEnd', ({ detail }) => { + moveEnd.innerHTML = detail.value; + }); + + From 5b95dca7e5f086936955cd95c6688b2a8a9a9183 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Mon, 1 May 2023 16:02:44 -0400 Subject: [PATCH 05/11] Revert "chore: lint md files" This reverts commit 9dd15bbe34335bcca26b1b2b82b37df38e1d402b. --- docs/angular/navigation.md | 33 +++--- docs/angular/slides.md | 20 ++-- docs/cli/livereload.md | 3 +- .../guides/first-app-v4/intro.md | 2 +- docs/developing/config.md | 85 +++++++------- docs/developing/config/global/index.md | 36 +++--- docs/developing/config/per-component/index.md | 42 +++---- .../config/per-platform-fallback/index.md | 42 ++++--- .../config/per-platform-overrides/index.md | 26 ++--- docs/developing/config/per-platform/index.md | 25 ++-- docs/developing/hardware-back-button.md | 8 +- docs/index.md | 20 ++-- docs/layout/css-utilities.md | 9 +- docs/layout/structure.md | 4 + docs/native-faq.md | 9 +- docs/native.md | 4 + docs/react.md | 8 +- docs/react/navigation.md | 61 +++++----- docs/react/quickstart.md | 2 +- docs/reference/browser-support.md | 11 +- docs/reference/support.md | 42 +++---- docs/updating/6-0.md | 69 +++++------ docs/vue/navigation.md | 39 +++---- docs/vue/pwa.md | 13 ++- docs/vue/quickstart.md | 33 +----- docs/vue/slides.md | 2 +- docs/vue/your-first-app.md | 2 +- docs/vue/your-first-app/2-taking-photos.md | 2 +- .../accessibility/animations/index.md | 6 +- .../accessibility/animations/javascript.md | 46 ++++---- static/usage/v6/accordion/basic/angular.md | 12 +- static/usage/v6/accordion/basic/index.md | 8 +- static/usage/v6/accordion/basic/javascript.md | 12 +- static/usage/v6/accordion/basic/react.md | 7 +- static/usage/v6/accordion/basic/vue.md | 25 ++-- .../angular/example_component_css.md | 10 +- .../angular/example_component_html.md | 12 +- .../advanced-expansion-styles/index.md | 8 +- .../advanced-expansion-styles/javascript.md | 20 ++-- .../react/main_css.md | 10 +- .../advanced-expansion-styles/vue.md | 39 ++++--- .../customization/expansion-styles/angular.md | 12 +- .../customization/expansion-styles/index.md | 8 +- .../expansion-styles/javascript.md | 12 +- .../customization/expansion-styles/react.md | 7 +- .../customization/expansion-styles/vue.md | 25 ++-- .../v6/accordion/customization/icons/index.md | 8 +- .../customization/icons/javascript.md | 12 +- .../v6/accordion/customization/icons/react.md | 7 +- .../v6/accordion/customization/icons/vue.md | 29 +++-- .../theming/angular/example_component_html.md | 12 +- .../theming/angular/global_css.md | 10 +- .../accordion/customization/theming/index.md | 8 +- .../customization/theming/javascript.md | 24 ++-- .../customization/theming/react/main_css.md | 10 +- .../customization/theming/react/main_tsx.md | 7 +- .../v6/accordion/customization/theming/vue.md | 41 ++++--- .../usage/v6/accordion/disable-group/index.md | 6 +- .../usage/v6/accordion/disable/group/index.md | 6 +- .../v6/accordion/disable/individual/index.md | 8 +- .../v6/accordion/listen-changes/index.md | 8 +- static/usage/v6/accordion/multiple/index.md | 8 +- .../v6/accordion/readonly/group/angular.md | 12 +- .../v6/accordion/readonly/group/index.md | 8 +- .../v6/accordion/readonly/group/javascript.md | 12 +- .../v6/accordion/readonly/group/react.md | 7 +- .../usage/v6/accordion/readonly/group/vue.md | 25 ++-- .../accordion/readonly/individual/angular.md | 12 +- .../v6/accordion/readonly/individual/index.md | 6 +- .../readonly/individual/javascript.md | 12 +- .../v6/accordion/readonly/individual/react.md | 7 +- .../v6/accordion/readonly/individual/vue.md | 25 ++-- static/usage/v6/accordion/toggle/index.md | 8 +- static/usage/v6/action-sheet/basic/index.md | 8 +- .../theming/css-properties/index.md | 8 +- .../v6/action-sheet/theming/styling/index.md | 8 +- .../buttons/angular/example_component_html.md | 2 +- static/usage/v6/alert/buttons/index.md | 8 +- static/usage/v6/alert/buttons/javascript.md | 10 +- .../alert/customization/angular/global_css.md | 4 +- static/usage/v6/alert/customization/index.md | 8 +- .../v6/alert/customization/javascript.md | 8 +- .../v6/alert/customization/react/main_css.md | 4 +- .../radios/angular/example_component_html.md | 2 +- static/usage/v6/alert/inputs/radios/index.md | 8 +- .../v6/alert/inputs/radios/javascript.md | 8 +- .../angular/example_component_html.md | 2 +- .../v6/alert/inputs/text-inputs/index.md | 8 +- .../v6/alert/inputs/text-inputs/javascript.md | 12 +- .../angular/example_component_html.md | 2 +- .../v6/alert/presenting/controller/index.md | 8 +- static/usage/v6/avatar/chip/vue.md | 2 +- static/usage/v6/avatar/item/vue.md | 2 +- .../v6/avatar/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_tsx.md | 1 + .../v6/avatar/theming/css-properties/vue.md | 2 +- .../basic/angular/page_two_component_ts.md | 4 +- static/usage/v6/back-button/basic/index.md | 10 +- .../v6/back-button/basic/vue/page_two_vue.md | 2 +- .../custom/angular/page_two_component_ts.md | 4 +- static/usage/v6/back-button/custom/index.md | 10 +- .../v6/back-button/custom/vue/page_two_vue.md | 4 +- static/usage/v6/backdrop/basic/index.md | 8 +- static/usage/v6/backdrop/styling/index.md | 8 +- static/usage/v6/badge/theming/colors/index.md | 8 +- .../angular/example_component_css.md | 2 +- .../v6/badge/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../collapsing-items/expand-on-click/index.md | 6 +- .../collapsing-items/expand-on-click/vue.md | 8 +- .../items-before-after/index.md | 8 +- .../collapsing-items/max-items/index.md | 6 +- .../angular/example_component_html.md | 2 +- .../popover-on-click/index.md | 8 +- .../popover-on-click/javascript.md | 6 +- .../popover-on-click/react.md | 5 +- .../collapsing-items/popover-on-click/vue.md | 40 +++---- .../icons/custom-separators/index.md | 6 +- .../icons/custom-separators/vue.md | 2 +- .../breadcrumbs/icons/icons-on-items/index.md | 8 +- .../v6/breadcrumbs/theming/colors/index.md | 6 +- .../angular/example_component_css.md | 2 +- .../theming/css-properties/index.md | 6 +- .../theming/css-properties/react/main_css.md | 2 +- static/usage/v6/button/basic/angular.md | 3 +- static/usage/v6/button/basic/javascript.md | 3 +- static/usage/v6/button/expand/angular.md | 3 +- static/usage/v6/button/expand/javascript.md | 3 +- static/usage/v6/button/icons/vue.md | 4 +- static/usage/v6/button/shape/angular.md | 3 +- static/usage/v6/button/shape/javascript.md | 3 +- .../v6/button/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_css.md | 1 + .../theming/css-properties/react/main_tsx.md | 4 +- static/usage/v6/buttons/types/angular.md | 8 +- static/usage/v6/buttons/types/index.md | 8 +- static/usage/v6/buttons/types/javascript.md | 8 +- static/usage/v6/buttons/types/react.md | 9 +- static/usage/v6/buttons/types/vue.md | 10 +- static/usage/v6/card/basic/index.md | 6 +- static/usage/v6/card/basic/react/main_tsx.md | 4 +- static/usage/v6/card/buttons/index.md | 8 +- .../usage/v6/card/buttons/react/main_tsx.md | 4 +- static/usage/v6/card/list/index.md | 8 +- static/usage/v6/card/list/react/main_tsx.md | 12 +- static/usage/v6/card/media/index.md | 8 +- static/usage/v6/card/media/react/main_tsx.md | 4 +- .../colors/angular/example_component_html.md | 36 ++++-- static/usage/v6/card/theming/colors/index.md | 8 +- .../v6/card/theming/colors/javascript.md | 36 ++++-- .../v6/card/theming/colors/react/main_tsx.md | 36 ++++-- static/usage/v6/card/theming/colors/vue.md | 36 ++++-- .../v6/card/theming/css-properties/index.md | 6 +- .../theming/css-properties/react/main_tsx.md | 4 +- static/usage/v6/checkbox/basic/index.md | 6 +- static/usage/v6/checkbox/basic/react.md | 8 +- static/usage/v6/checkbox/basic/vue.md | 10 +- .../usage/v6/checkbox/indeterminate/index.md | 6 +- .../usage/v6/checkbox/indeterminate/react.md | 8 +- static/usage/v6/checkbox/indeterminate/vue.md | 10 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../checkbox/theming/css-properties/index.md | 6 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 8 +- .../v6/checkbox/theming/css-properties/vue.md | 12 +- .../v6/chip/theming/css-properties/index.md | 6 +- static/usage/v6/content/basic/index.md | 10 +- static/usage/v6/content/fixed/angular.md | 50 +------- .../fixed/angular/example_component_css.md | 2 +- .../fixed/angular/example_component_html.md | 50 +------- static/usage/v6/content/fixed/index.md | 10 +- static/usage/v6/content/fixed/javascript.md | 52 +-------- static/usage/v6/content/fixed/react.md | 50 +------- .../usage/v6/content/fixed/react/main_css.md | 2 +- .../usage/v6/content/fixed/react/main_tsx.md | 50 +------- static/usage/v6/content/fixed/vue.md | 52 +-------- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 58 ++------- static/usage/v6/content/fullscreen/index.md | 10 +- .../usage/v6/content/fullscreen/javascript.md | 60 ++-------- .../v6/content/fullscreen/react/main_css.md | 2 +- .../v6/content/fullscreen/react/main_tsx.md | 58 ++------- static/usage/v6/content/fullscreen/vue.md | 60 ++-------- .../usage/v6/content/header-footer/angular.md | 8 +- .../usage/v6/content/header-footer/index.md | 10 +- .../v6/content/header-footer/javascript.md | 8 +- .../usage/v6/content/header-footer/react.md | 8 +- static/usage/v6/content/header-footer/vue.md | 8 +- .../angular/example_component_html.md | 53 +-------- .../usage/v6/content/scroll-events/index.md | 10 +- .../v6/content/scroll-events/javascript.md | 50 +------- .../usage/v6/content/scroll-events/react.md | 53 +-------- static/usage/v6/content/scroll-events/vue.md | 57 ++------- .../angular/example_component_html.md | 50 +------- .../usage/v6/content/scroll-methods/index.md | 10 +- .../v6/content/scroll-methods/javascript.md | 50 +------- .../usage/v6/content/scroll-methods/react.md | 58 ++------- static/usage/v6/content/scroll-methods/vue.md | 52 +-------- .../usage/v6/content/theming/colors/index.md | 10 +- .../content/theming/css-properties/index.md | 10 +- .../content/theming/css-shadow-parts/index.md | 10 +- .../usage/v6/datetime-button/basic/index.md | 8 +- .../usage/v6/datetime-button/basic/react.md | 2 +- static/usage/v6/datetime-button/basic/vue.md | 2 +- static/usage/v6/datetime/basic/index.md | 8 +- .../customizing-button-texts/angular.md | 7 +- .../buttons/customizing-button-texts/index.md | 8 +- .../customizing-button-texts/javascript.md | 6 +- .../buttons/customizing-button-texts/react.md | 9 +- .../buttons/customizing-button-texts/vue.md | 8 +- .../buttons/customizing-buttons/index.md | 8 +- .../buttons/customizing-buttons/react.md | 18 +-- .../buttons/customizing-buttons/vue.md | 4 +- .../showing-confirmation-buttons/index.md | 8 +- .../showing-confirmation-buttons/react.md | 4 +- .../date-constraints/advanced/index.md | 8 +- .../date-constraints/advanced/javascript.md | 2 +- .../date-constraints/advanced/react.md | 8 +- .../datetime/date-constraints/advanced/vue.md | 10 +- .../date-constraints/max-min/angular.md | 6 +- .../date-constraints/max-min/index.md | 8 +- .../date-constraints/max-min/javascript.md | 6 +- .../date-constraints/max-min/react.md | 8 +- .../datetime/date-constraints/max-min/vue.md | 6 +- .../date-constraints/values/angular.md | 5 +- .../datetime/date-constraints/values/index.md | 8 +- .../date-constraints/values/javascript.md | 5 +- .../datetime/date-constraints/values/react.md | 7 +- .../datetime/date-constraints/values/vue.md | 5 +- .../array/angular/example_component_html.md | 6 +- .../array/angular/example_component_ts.md | 4 +- .../datetime/highlightedDates/array/index.md | 8 +- .../highlightedDates/array/javascript.md | 4 +- .../datetime/highlightedDates/array/react.md | 4 +- .../v6/datetime/highlightedDates/array/vue.md | 16 ++- .../callback/angular/example_component_ts.md | 4 +- .../highlightedDates/callback/index.md | 8 +- .../highlightedDates/callback/javascript.md | 4 +- .../highlightedDates/callback/react.md | 4 +- .../datetime/highlightedDates/callback/vue.md | 8 +- .../localization/custom-locale/index.md | 8 +- .../localization/custom-locale/react.md | 4 +- .../localization/first-day-of-week/index.md | 8 +- .../localization/first-day-of-week/react.md | 4 +- .../datetime/localization/hour-cycle/index.md | 8 +- .../datetime/localization/hour-cycle/react.md | 4 +- .../locale-extension-tags/index.md | 8 +- .../locale-extension-tags/react.md | 4 +- .../datetime/localization/time-label/index.md | 8 +- static/usage/v6/datetime/multiple/angular.md | 6 +- static/usage/v6/datetime/multiple/index.md | 8 +- static/usage/v6/datetime/multiple/react.md | 8 +- static/usage/v6/datetime/multiple/vue.md | 6 +- .../v6/datetime/presentation/date/index.md | 8 +- .../v6/datetime/presentation/date/react.md | 4 +- .../presentation/month-and-year/index.md | 8 +- .../presentation/month-and-year/react.md | 4 +- .../v6/datetime/presentation/time/index.md | 6 +- .../v6/datetime/presentation/time/react.md | 4 +- .../v6/datetime/presentation/wheel/index.md | 8 +- .../v6/datetime/presentation/wheel/react.md | 4 +- static/usage/v6/datetime/theming/index.md | 8 +- .../usage/v6/datetime/theming/javascript.md | 18 +-- .../v6/datetime/theming/react/main_css.md | 12 +- static/usage/v6/datetime/theming/vue.md | 18 +-- .../datetime/title/customizing-title/index.md | 8 +- .../title/showing-default-title/index.md | 8 +- .../title/showing-default-title/react.md | 4 +- static/usage/v6/fab/basic/vue.md | 4 +- static/usage/v6/fab/button-sizing/vue.md | 4 +- static/usage/v6/fab/list-side/vue.md | 4 +- static/usage/v6/fab/positioning/angular.md | 2 +- static/usage/v6/fab/positioning/index.md | 10 +- static/usage/v6/fab/positioning/javascript.md | 2 +- static/usage/v6/fab/positioning/react.md | 11 +- static/usage/v6/fab/positioning/vue.md | 15 +-- static/usage/v6/fab/theming/colors/vue.md | 4 +- .../angular/example_component_css.md | 4 +- .../theming/css-custom-properties/index.md | 6 +- .../css-custom-properties/javascript.md | 2 +- .../css-custom-properties/react/main_css.md | 4 +- .../fab/theming/css-custom-properties/vue.md | 6 +- .../angular/example_component_css.md | 6 +- .../v6/fab/theming/css-shadow-parts/index.md | 6 +- .../theming/css-shadow-parts/javascript.md | 4 +- .../css-shadow-parts/react/main_css.md | 6 +- .../v6/fab/theming/css-shadow-parts/vue.md | 8 +- static/usage/v6/footer/basic/index.md | 10 +- .../angular/example_component_html.md | 57 ++------- .../v6/footer/custom-scroll-target/index.md | 12 +- .../footer/custom-scroll-target/javascript.md | 57 ++------- .../custom-scroll-target/react/main_tsx.md | 59 ++-------- .../v6/footer/custom-scroll-target/vue.md | 57 ++------- static/usage/v6/footer/fade/angular.md | 57 ++------- static/usage/v6/footer/fade/index.md | 12 +- static/usage/v6/footer/fade/javascript.md | 57 ++------- static/usage/v6/footer/fade/react.md | 57 ++------- static/usage/v6/footer/fade/vue.md | 57 ++------- static/usage/v6/footer/no-border/index.md | 10 +- static/usage/v6/footer/translucent/angular.md | 57 ++------- static/usage/v6/footer/translucent/index.md | 12 +- .../usage/v6/footer/translucent/javascript.md | 57 ++------- static/usage/v6/footer/translucent/react.md | 57 ++------- static/usage/v6/footer/translucent/vue.md | 57 ++------- static/usage/v6/grid/basic/index.md | 8 +- .../grid/customizing/column-number/index.md | 8 +- .../column-number/react/main_tsx.md | 4 +- .../v6/grid/customizing/padding/index.md | 8 +- .../usage/v6/grid/customizing/width/index.md | 8 +- static/usage/v6/grid/fixed/index.md | 8 +- .../angular/example_component_html.md | 40 +++++-- .../v6/grid/horizontal-alignment/index.md | 8 +- .../grid/horizontal-alignment/javascript.md | 40 +++++-- .../horizontal-alignment/react/main_tsx.md | 40 +++++-- .../usage/v6/grid/horizontal-alignment/vue.md | 40 +++++-- .../usage/v6/grid/offset-responsive/index.md | 8 +- .../grid/offset-responsive/react/main_tsx.md | 8 +- static/usage/v6/grid/offset/index.md | 8 +- static/usage/v6/grid/offset/react/main_tsx.md | 16 +-- .../v6/grid/push-pull-responsive/index.md | 8 +- .../push-pull-responsive/react/main_tsx.md | 24 +--- .../angular/example_component_html.md | 5 +- static/usage/v6/grid/push-pull/index.md | 8 +- static/usage/v6/grid/push-pull/javascript.md | 5 +- .../usage/v6/grid/push-pull/react/main_tsx.md | 23 +--- static/usage/v6/grid/push-pull/vue.md | 15 +-- static/usage/v6/grid/size-auto/index.md | 8 +- .../usage/v6/grid/size-auto/react/main_tsx.md | 14 +-- static/usage/v6/grid/size-responsive/index.md | 8 +- .../v6/grid/size-responsive/react/main_tsx.md | 40 ++----- static/usage/v6/grid/size/index.md | 8 +- static/usage/v6/grid/size/react/main_tsx.md | 12 +- .../angular/example_component_html.md | 36 ++++-- .../usage/v6/grid/vertical-alignment/index.md | 8 +- .../v6/grid/vertical-alignment/javascript.md | 36 ++++-- .../grid/vertical-alignment/react/main_tsx.md | 36 ++++-- .../usage/v6/grid/vertical-alignment/vue.md | 36 ++++-- static/usage/v6/header/basic/index.md | 10 +- static/usage/v6/header/condense/angular.md | 57 ++------- static/usage/v6/header/condense/index.md | 12 +- static/usage/v6/header/condense/javascript.md | 57 ++------- static/usage/v6/header/condense/react.md | 59 ++-------- static/usage/v6/header/condense/vue.md | 57 ++------- .../angular/example_component_html.md | 57 ++------- .../v6/header/custom-scroll-target/index.md | 12 +- .../custom-scroll-target/react/main_tsx.md | 59 ++-------- .../v6/header/custom-scroll-target/vue.md | 57 ++------- static/usage/v6/header/fade/angular.md | 57 ++------- static/usage/v6/header/fade/index.md | 12 +- static/usage/v6/header/fade/javascript.md | 57 ++------- static/usage/v6/header/fade/react.md | 57 ++------- static/usage/v6/header/fade/vue.md | 57 ++------- static/usage/v6/header/no-border/index.md | 10 +- static/usage/v6/header/translucent/angular.md | 57 ++------- static/usage/v6/header/translucent/index.md | 12 +- .../usage/v6/header/translucent/javascript.md | 57 ++------- static/usage/v6/header/translucent/react.md | 57 ++------- static/usage/v6/header/translucent/vue.md | 57 ++------- static/usage/v6/icon/basic/index.md | 8 +- static/usage/v6/img/basic/angular.md | 5 +- static/usage/v6/img/basic/javascript.md | 5 +- static/usage/v6/img/basic/react.md | 5 +- static/usage/v6/img/basic/vue.md | 5 +- .../usage/v6/infinite-scroll/basic/index.md | 6 +- .../custom-infinite-scroll-content/index.md | 6 +- .../infinite-scroll-content/index.md | 6 +- static/usage/v6/input/clear/vue.md | 5 +- static/usage/v6/input/fill/index.md | 10 +- .../angular/example_component_html.md | 6 +- .../filtering/angular/example_component_ts.md | 10 +- static/usage/v6/input/filtering/index.md | 6 +- static/usage/v6/input/filtering/javascript.md | 4 +- static/usage/v6/input/filtering/react.md | 22 ++-- static/usage/v6/input/filtering/vue.md | 20 ++-- static/usage/v6/input/theming/colors/index.md | 8 +- .../angular/example_component_css.md | 2 +- .../v6/input/theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 4 +- .../v6/input/theming/css-properties/vue.md | 2 +- static/usage/v6/item-divider/basic/angular.md | 8 +- static/usage/v6/item-divider/basic/index.md | 8 +- .../usage/v6/item-divider/basic/javascript.md | 8 +- static/usage/v6/item-divider/basic/react.md | 8 +- static/usage/v6/item-divider/basic/vue.md | 8 +- .../v6/item-divider/theming/colors/index.md | 8 +- .../angular/example_component_html.md | 4 +- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 4 +- .../theming/css-properties/react/main_tsx.md | 5 +- .../theming/css-properties/vue.md | 6 +- static/usage/v6/item-group/basic/index.md | 8 +- .../v6/item-group/sliding-items/angular.md | 56 ++++++--- .../v6/item-group/sliding-items/index.md | 8 +- .../v6/item-group/sliding-items/javascript.md | 56 ++++++--- .../v6/item-group/sliding-items/react.md | 66 +++++++---- .../usage/v6/item-group/sliding-items/vue.md | 66 +++++++---- .../usage/v6/item-sliding/expandable/index.md | 8 +- .../usage/v6/item-sliding/expandable/react.md | 8 +- static/usage/v6/item-sliding/icons/angular.md | 16 ++- static/usage/v6/item-sliding/icons/index.md | 8 +- .../usage/v6/item-sliding/icons/javascript.md | 16 ++- static/usage/v6/item-sliding/icons/react.md | 16 ++- static/usage/v6/item-sliding/icons/vue.md | 20 +++- static/usage/v6/item/basic/angular.md | 10 +- static/usage/v6/item/basic/javascript.md | 10 +- static/usage/v6/item/basic/react.md | 6 +- static/usage/v6/item/basic/vue.md | 8 +- static/usage/v6/item/buttons/angular.md | 20 +++- static/usage/v6/item/buttons/javascript.md | 20 +++- static/usage/v6/item/buttons/react.md | 8 +- static/usage/v6/item/buttons/vue.md | 24 ++-- static/usage/v6/item/counter/index.md | 6 +- static/usage/v6/item/counter/react.md | 5 +- static/usage/v6/item/counter/vue.md | 4 +- static/usage/v6/item/detail-arrows/index.md | 8 +- static/usage/v6/item/detail-arrows/vue.md | 1 - static/usage/v6/item/helper-error/index.md | 8 +- .../usage/v6/item/helper-error/javascript.md | 10 +- static/usage/v6/item/helper-error/react.md | 5 +- static/usage/v6/item/helper-error/vue.md | 8 +- static/usage/v6/item/icons/angular.md | 16 ++- static/usage/v6/item/icons/javascript.md | 16 ++- static/usage/v6/item/icons/react.md | 16 ++- static/usage/v6/item/icons/vue.md | 20 +++- static/usage/v6/item/inputs/react.md | 11 +- static/usage/v6/item/inputs/vue.md | 11 +- static/usage/v6/item/lines/angular.md | 4 +- static/usage/v6/item/lines/javascript.md | 4 +- static/usage/v6/item/lines/react.md | 4 +- static/usage/v6/item/lines/vue.md | 6 +- static/usage/v6/item/media/angular.md | 8 +- static/usage/v6/item/media/javascript.md | 8 +- static/usage/v6/item/media/react.md | 8 +- static/usage/v6/item/media/vue.md | 8 +- static/usage/v6/item/theming/colors/index.md | 8 +- .../v6/item/theming/css-properties/index.md | 6 +- .../v6/item/theming/css-shadow-parts/index.md | 6 +- .../v6/item/theming/input-highlight/index.md | 8 +- static/usage/v6/label/item/angular.md | 10 +- static/usage/v6/label/item/javascript.md | 10 +- static/usage/v6/label/item/react.md | 6 +- static/usage/v6/label/item/vue.md | 8 +- static/usage/v6/list-header/basic/index.md | 8 +- static/usage/v6/list-header/buttons/index.md | 8 +- static/usage/v6/list-header/lines/index.md | 8 +- .../v6/list-header/theming/colors/index.md | 8 +- .../theming/css-properties/index.md | 8 +- static/usage/v6/loading/controller/index.md | 6 +- .../usage/v6/loading/controller/javascript.md | 16 +-- static/usage/v6/loading/controller/react.md | 15 ++- static/usage/v6/loading/controller/vue.md | 12 +- static/usage/v6/loading/spinners/index.md | 6 +- .../usage/v6/loading/spinners/javascript.md | 18 +-- static/usage/v6/loading/spinners/react.md | 17 ++- static/usage/v6/loading/spinners/vue.md | 12 +- .../v6/loading/theming/angular/global_css.md | 2 +- static/usage/v6/loading/theming/index.md | 6 +- static/usage/v6/loading/theming/javascript.md | 28 ++--- static/usage/v6/loading/theming/react.md | 17 ++- .../v6/loading/theming/react/main_css.md | 2 +- .../v6/loading/theming/react/main_tsx.md | 17 ++- static/usage/v6/loading/theming/vue.md | 12 +- static/usage/v6/menu/basic/angular.md | 4 +- static/usage/v6/menu/basic/index.md | 8 +- static/usage/v6/menu/basic/javascript.md | 4 +- static/usage/v6/menu/basic/react.md | 15 ++- static/usage/v6/menu/basic/vue.md | 17 ++- .../theming/angular/example_component_css.md | 2 +- .../theming/angular/example_component_html.md | 4 +- static/usage/v6/menu/theming/index.md | 8 +- static/usage/v6/menu/theming/javascript.md | 4 +- .../usage/v6/menu/theming/react/main_css.md | 2 +- .../usage/v6/menu/theming/react/main_tsx.md | 15 ++- static/usage/v6/menu/theming/vue.md | 17 ++- static/usage/v6/menu/toggle/index.md | 8 +- static/usage/v6/menu/toggle/react.md | 13 ++- static/usage/v6/menu/toggle/vue.md | 13 ++- .../type/angular/example_component_html.md | 5 +- static/usage/v6/menu/type/index.md | 8 +- static/usage/v6/menu/type/javascript.md | 3 +- static/usage/v6/menu/type/react.md | 6 +- static/usage/v6/menu/type/vue.md | 13 +-- .../v6/modal/can-dismiss/boolean/index.md | 8 +- .../v6/modal/can-dismiss/function/index.md | 8 +- .../prevent-swipe-to-close/index.md | 10 +- static/usage/v6/modal/card/basic/index.md | 10 +- static/usage/v6/modal/controller/index.md | 10 +- static/usage/v6/modal/custom-dialogs/index.md | 10 +- .../v6/modal/custom-dialogs/react/main_tsx.md | 2 +- static/usage/v6/modal/custom-dialogs/vue.md | 18 +-- static/usage/v6/modal/inline/basic/index.md | 10 +- static/usage/v6/modal/inline/is-open/index.md | 10 +- .../v6/modal/performance/mount/angular.md | 4 +- .../usage/v6/modal/performance/mount/index.md | 10 +- .../usage/v6/modal/performance/mount/react.md | 15 ++- .../usage/v6/modal/performance/mount/vue.md | 14 ++- .../modal/sheet/background-content/index.md | 10 +- static/usage/v6/modal/sheet/basic/index.md | 10 +- .../v6/modal/sheet/handle-behavior/index.md | 10 +- .../v6/modal/styling/animations/index.md | 10 +- .../usage/v6/modal/styling/theming/index.md | 10 +- static/usage/v6/nav/modal-navigation/index.md | 10 +- static/usage/v6/nav/nav-link/index.md | 8 +- .../v6/note/theming/css-properties/index.md | 6 +- .../usage/v6/picker/multiple-column/index.md | 8 +- static/usage/v6/picker/single-column/index.md | 8 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../customization/positioning/index.md | 8 +- .../positioning/react/main_css.md | 2 +- .../v6/popover/customization/sizing/index.md | 8 +- .../styling/angular/global_css.md | 2 +- .../v6/popover/customization/styling/index.md | 8 +- .../customization/styling/react/main_css.md | 2 +- static/usage/v6/popover/nested/index.md | 8 +- .../v6/popover/performance/mount/index.md | 8 +- .../popover/performance/mount/javascript.md | 2 +- .../angular/example_component_html.md | 2 +- .../angular/popover_component_html.md | 2 +- .../v6/popover/presenting/controller/index.md | 8 +- .../presenting/controller/javascript.md | 2 +- .../presenting/controller/vue/popover_vue.md | 14 +-- .../angular/example_component_html.md | 2 +- .../popover/presenting/inline-isopen/index.md | 8 +- .../presenting/inline-isopen/javascript.md | 4 +- .../presenting/inline-trigger/index.md | 8 +- .../buffer/angular/example_component_ts.md | 2 +- static/usage/v6/progress-bar/buffer/index.md | 6 +- static/usage/v6/progress-bar/buffer/react.md | 4 +- static/usage/v6/progress-bar/buffer/vue.md | 4 +- .../angular/example_component_ts.md | 2 +- .../v6/progress-bar/determinate/index.md | 6 +- .../v6/progress-bar/determinate/react.md | 4 +- .../usage/v6/progress-bar/determinate/vue.md | 4 +- .../v6/progress-bar/indeterminate/index.md | 6 +- .../v6/progress-bar/indeterminate/react.md | 4 +- .../v6/progress-bar/theming/colors/index.md | 6 +- .../angular/example_component_html.md | 3 +- .../theming/css-properties/index.md | 6 +- .../theming/css-properties/react/main_tsx.md | 3 +- .../theming/css-properties/vue.md | 2 +- .../angular/example_component_html.md | 3 +- .../theming/css-shadow-parts/index.md | 6 +- .../css-shadow-parts/react/main_tsx.md | 3 +- .../theming/css-shadow-parts/vue.md | 2 +- .../usage/v6/radio/empty-selection/index.md | 8 +- static/usage/v6/radio/theming/colors/index.md | 8 +- .../v6/radio/theming/css-properties/index.md | 8 +- .../radio/theming/css-shadow-parts/index.md | 8 +- .../usage/v6/range/ion-change-event/index.md | 6 +- .../v6/range/ion-knob-move-event/index.md | 6 +- static/usage/v6/range/pins/index.md | 6 +- .../v6/range/theming/css-properties/index.md | 6 +- .../range/theming/css-shadow-parts/index.md | 6 +- .../advanced/angular/example_component_ts.md | 20 +--- static/usage/v6/refresher/advanced/index.md | 10 +- .../usage/v6/refresher/advanced/javascript.md | 16 +-- .../v6/refresher/advanced/react/main_tsx.md | 40 ++----- static/usage/v6/refresher/advanced/vue.md | 44 +------ .../basic/angular/example_component_ts.md | 2 +- static/usage/v6/refresher/basic/index.md | 10 +- static/usage/v6/refresher/basic/react.md | 11 +- .../angular/example_component_html.md | 3 +- .../angular/example_component_ts.md | 2 +- .../v6/refresher/custom-content/index.md | 10 +- .../v6/refresher/custom-content/javascript.md | 3 +- .../v6/refresher/custom-content/react.md | 15 +-- .../usage/v6/refresher/custom-content/vue.md | 3 +- .../angular/example_component_ts.md | 2 +- .../refresher/custom-scroll-target/index.md | 10 +- .../custom-scroll-target/react/main_tsx.md | 11 +- .../angular/example_component_ts.md | 2 +- .../v6/refresher/pull-properties/index.md | 10 +- .../v6/refresher/pull-properties/react.md | 11 +- .../basic/angular/example_component_html.md | 20 +++- .../basic/angular/example_component_ts.md | 2 +- static/usage/v6/reorder/basic/index.md | 8 +- static/usage/v6/reorder/basic/javascript.md | 22 +++- static/usage/v6/reorder/basic/react.md | 20 +++- static/usage/v6/reorder/basic/vue.md | 26 +++-- .../angular/example_component_html.md | 20 +++- .../angular/example_component_ts.md | 2 +- static/usage/v6/reorder/custom-icon/index.md | 8 +- .../v6/reorder/custom-icon/javascript.md | 22 +++- static/usage/v6/reorder/custom-icon/react.md | 20 +++- static/usage/v6/reorder/custom-icon/vue.md | 26 +++-- .../angular/example_component_html.md | 20 +++- .../v6/reorder/custom-scroll-target/index.md | 10 +- .../custom-scroll-target/javascript.md | 22 +++- .../custom-scroll-target/react/main_tsx.md | 30 ++--- .../v6/reorder/custom-scroll-target/vue.md | 28 +++-- .../angular/example_component_html.md | 24 +++- .../angular/example_component_ts.md | 2 +- .../v6/reorder/toggling-disabled/index.md | 8 +- .../reorder/toggling-disabled/javascript.md | 26 +++-- .../v6/reorder/toggling-disabled/react.md | 36 +++--- .../usage/v6/reorder/toggling-disabled/vue.md | 32 +++-- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 2 +- .../usage/v6/reorder/updating-data/index.md | 8 +- .../v6/reorder/updating-data/javascript.md | 2 +- .../usage/v6/reorder/updating-data/react.md | 8 +- static/usage/v6/reorder/updating-data/vue.md | 10 +- .../wrapper/angular/example_component_html.md | 20 +++- .../wrapper/angular/example_component_ts.md | 2 +- static/usage/v6/reorder/wrapper/index.md | 8 +- static/usage/v6/reorder/wrapper/javascript.md | 22 +++- static/usage/v6/reorder/wrapper/react.md | 20 +++- static/usage/v6/reorder/wrapper/vue.md | 26 +++-- static/usage/v6/ripple-effect/basic/index.md | 8 +- .../v6/ripple-effect/customizing/index.md | 8 +- static/usage/v6/ripple-effect/type/index.md | 8 +- static/usage/v6/router/basic/index.md | 10 +- static/usage/v6/searchbar/basic/index.md | 8 +- .../v6/searchbar/cancel-button/angular.md | 7 +- .../usage/v6/searchbar/cancel-button/index.md | 8 +- .../v6/searchbar/cancel-button/javascript.md | 7 +- .../usage/v6/searchbar/cancel-button/react.md | 7 +- .../usage/v6/searchbar/cancel-button/vue.md | 9 +- .../usage/v6/searchbar/clear-button/index.md | 8 +- static/usage/v6/searchbar/clear-button/vue.md | 2 +- .../debounce/angular/example_component_ts.md | 15 +-- static/usage/v6/searchbar/debounce/index.md | 8 +- .../usage/v6/searchbar/debounce/javascript.md | 15 +-- static/usage/v6/searchbar/debounce/react.md | 23 +--- static/usage/v6/searchbar/debounce/vue.md | 15 +-- static/usage/v6/searchbar/search-icon/vue.md | 2 +- .../v6/searchbar/theming/colors/index.md | 8 +- .../searchbar/theming/css-properties/index.md | 6 +- .../theming/css-properties/javascript.md | 30 ++--- .../theming/css-properties/react/main_tsx.md | 4 +- .../usage/v6/segment-button/layout/index.md | 8 +- static/usage/v6/segment-button/layout/vue.md | 2 +- .../theming/css-properties/index.md | 6 +- .../theming/css-shadow-parts/index.md | 6 +- static/usage/v6/segment/scrollable/index.md | 8 +- static/usage/v6/segment/scrollable/vue.md | 15 +-- .../usage/v6/segment/theming/colors/index.md | 8 +- .../segment/theming/css-properties/index.md | 6 +- .../select/basic/multiple-selection/index.md | 8 +- .../angular/example_component_html.md | 2 +- .../basic/responding-to-interaction/index.md | 8 +- .../responding-to-interaction/javascript.md | 2 +- .../basic/responding-to-interaction/vue.md | 8 +- .../v6/select/basic/single-selection/index.md | 8 +- .../select/customization/button-text/index.md | 8 +- .../angular/example_component_html.md | 6 +- .../customization/interface-options/index.md | 8 +- .../interface-options/javascript.md | 12 +- .../customization/interface-options/react.md | 12 +- .../customization/interface-options/vue.md | 18 +-- .../angular/example_component_css.md | 2 +- .../customization/styling-select/index.md | 8 +- .../styling-select/javascript.md | 42 +++---- .../styling-select/react/main_css.md | 2 +- .../select/interfaces/action-sheet/index.md | 8 +- .../v6/select/interfaces/popover/index.md | 8 +- .../angular/example_component_html.md | 2 +- .../multiple-selection/index.md | 8 +- .../multiple-selection/javascript.md | 18 +-- .../multiple-selection/vue.md | 28 ++--- .../angular/example_component_html.md | 8 +- .../using-comparewith/index.md | 8 +- .../using-comparewith/javascript.md | 14 +-- .../using-comparewith/vue.md | 24 ++-- .../typeahead/angular/angular_types_ts.md | 2 +- .../angular/example_component_html.md | 2 +- .../typeahead/angular/example_component_ts.md | 16 +-- .../angular/modal-example_component_html.md | 2 +- .../angular/modal-example_component_ts.md | 31 ++--- static/usage/v6/select/typeahead/index.md | 18 +-- .../usage/v6/select/typeahead/javascript.md | 26 +++-- .../v6/select/typeahead/react/main_tsx.md | 20 ++-- .../select/typeahead/react/react_types_ts.md | 2 +- .../react/typeahead_component_tsx.md | 58 ++++----- .../v6/select/typeahead/vue/example_vue.md | 22 ++-- .../typeahead/vue/typeahead_component_vue.md | 102 +++++++--------- .../v6/select/typeahead/vue/vue_types_ts.md | 2 +- .../basic/angular/example_component_ts.md | 5 +- static/usage/v6/skeleton-text/basic/index.md | 8 +- .../v6/skeleton-text/basic/javascript.md | 1 + static/usage/v6/skeleton-text/basic/react.md | 22 ++-- static/usage/v6/skeleton-text/basic/vue.md | 14 +-- .../angular/example_component_css.md | 2 +- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 19 ++- .../theming/css-properties/vue.md | 13 ++- static/usage/v6/spinner/basic/index.md | 8 +- .../usage/v6/spinner/theming/colors/index.md | 8 +- .../spinner/theming/css-properties/index.md | 6 +- .../spinner/theming/css-properties/react.md | 4 +- static/usage/v6/split-pane/basic/angular.md | 8 +- static/usage/v6/split-pane/basic/index.md | 8 +- .../usage/v6/split-pane/basic/javascript.md | 8 +- static/usage/v6/split-pane/basic/react.md | 10 +- static/usage/v6/split-pane/basic/vue.md | 12 +- .../angular/example_component_html.md | 8 +- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 10 +- .../theming/css-properties/react/main_tsx.md | 10 +- .../split-pane/theming/css-properties/vue.md | 14 ++- static/usage/v6/tabs/router/index.md | 8 +- static/usage/v6/text/basic/angular.md | 8 +- static/usage/v6/text/basic/javascript.md | 8 +- static/usage/v6/text/basic/react.md | 13 +-- static/usage/v6/text/basic/vue.md | 8 +- static/usage/v6/textarea/autogrow/angular.md | 7 +- static/usage/v6/textarea/autogrow/index.md | 8 +- .../usage/v6/textarea/autogrow/javascript.md | 7 +- static/usage/v6/textarea/autogrow/vue.md | 7 +- static/usage/v6/textarea/basic/index.md | 8 +- .../usage/v6/textarea/clear-on-edit/index.md | 8 +- static/usage/v6/textarea/theming/index.md | 8 +- .../angular/example_component_css.md | 1 + .../angular/example_component_html.md | 1 + .../thumbnail/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_tsx.md | 1 + static/usage/v6/title/basic/index.md | 10 +- .../collapsible-large-title/basic/index.md | 14 +-- .../collapsible-large-title/buttons/index.md | 12 +- .../v6/title/theming/css-properties/index.md | 10 +- .../buttons/angular/example_component_html.md | 2 +- .../buttons/angular/example_component_ts.md | 14 +-- static/usage/v6/toast/buttons/index.md | 8 +- static/usage/v6/toast/buttons/javascript.md | 12 +- static/usage/v6/toast/buttons/react.md | 14 +-- static/usage/v6/toast/buttons/vue.md | 12 +- .../icon/angular/example_component_html.md | 2 +- .../icon/angular/example_component_ts.md | 4 +- static/usage/v6/toast/icon/index.md | 8 +- static/usage/v6/toast/icon/javascript.md | 4 +- static/usage/v6/toast/icon/react.md | 4 +- static/usage/v6/toast/icon/vue.md | 2 +- .../layout/angular/example_component_html.md | 2 +- .../layout/angular/example_component_ts.md | 25 ++-- static/usage/v6/toast/layout/index.md | 8 +- static/usage/v6/toast/layout/javascript.md | 20 ++-- static/usage/v6/toast/layout/react.md | 18 +-- static/usage/v6/toast/layout/vue.md | 32 ++--- .../angular/example_component_html.md | 2 +- .../angular/example_component_ts.md | 4 +- .../v6/toast/presenting/controller/index.md | 8 +- .../toast/presenting/controller/javascript.md | 2 +- .../v6/toast/presenting/controller/react.md | 14 +-- .../v6/toast/presenting/controller/vue.md | 2 +- .../theming/angular/example_component_ts.md | 4 +- .../v6/toast/theming/angular/global_css.md | 6 +- static/usage/v6/toast/theming/index.md | 8 +- static/usage/v6/toast/theming/javascript.md | 8 +- .../usage/v6/toast/theming/react/main_css.md | 6 +- .../usage/v6/toast/theming/react/main_tsx.md | 4 +- static/usage/v6/toast/theming/vue.md | 8 +- static/usage/v6/toggle/on-off/react.md | 4 +- .../angular/example_component_html.md | 3 +- .../v6/toggle/theming/css-properties/index.md | 6 +- .../angular/example_component_html.md | 3 +- .../toggle/theming/css-shadow-parts/index.md | 6 +- static/usage/v6/toolbar/basic/index.md | 10 +- static/usage/v6/toolbar/buttons/angular.md | 16 ++- static/usage/v6/toolbar/buttons/index.md | 8 +- static/usage/v6/toolbar/buttons/javascript.md | 16 ++- static/usage/v6/toolbar/buttons/react.md | 16 ++- static/usage/v6/toolbar/buttons/vue.md | 16 ++- .../usage/v6/toolbar/progress-bars/index.md | 10 +- static/usage/v6/toolbar/searchbars/index.md | 10 +- static/usage/v6/toolbar/segments/index.md | 10 +- .../usage/v6/toolbar/theming/colors/index.md | 8 +- .../toolbar/theming/css-properties/index.md | 8 +- .../accessibility/animations/index.md | 6 +- .../accessibility/animations/javascript.md | 46 ++++---- static/usage/v7/accordion/basic/angular.md | 12 +- static/usage/v7/accordion/basic/index.md | 8 +- static/usage/v7/accordion/basic/javascript.md | 12 +- static/usage/v7/accordion/basic/react.md | 7 +- static/usage/v7/accordion/basic/vue.md | 25 ++-- .../angular/example_component_css.md | 10 +- .../angular/example_component_html.md | 12 +- .../advanced-expansion-styles/index.md | 8 +- .../advanced-expansion-styles/javascript.md | 20 ++-- .../react/main_css.md | 10 +- .../advanced-expansion-styles/vue.md | 39 ++++--- .../customization/expansion-styles/angular.md | 12 +- .../customization/expansion-styles/index.md | 8 +- .../expansion-styles/javascript.md | 12 +- .../customization/expansion-styles/react.md | 7 +- .../customization/expansion-styles/vue.md | 25 ++-- .../v7/accordion/customization/icons/index.md | 8 +- .../customization/icons/javascript.md | 12 +- .../v7/accordion/customization/icons/react.md | 7 +- .../v7/accordion/customization/icons/vue.md | 29 +++-- .../theming/angular/example_component_html.md | 12 +- .../theming/angular/global_css.md | 10 +- .../accordion/customization/theming/index.md | 8 +- .../customization/theming/javascript.md | 24 ++-- .../customization/theming/react/main_css.md | 10 +- .../customization/theming/react/main_tsx.md | 7 +- .../v7/accordion/customization/theming/vue.md | 41 ++++--- .../usage/v7/accordion/disable-group/index.md | 6 +- .../usage/v7/accordion/disable/group/index.md | 6 +- .../v7/accordion/disable/individual/index.md | 8 +- .../v7/accordion/listen-changes/index.md | 8 +- static/usage/v7/accordion/multiple/index.md | 8 +- .../v7/accordion/readonly/group/angular.md | 12 +- .../v7/accordion/readonly/group/index.md | 8 +- .../v7/accordion/readonly/group/javascript.md | 12 +- .../v7/accordion/readonly/group/react.md | 7 +- .../usage/v7/accordion/readonly/group/vue.md | 25 ++-- .../accordion/readonly/individual/angular.md | 12 +- .../v7/accordion/readonly/individual/index.md | 6 +- .../readonly/individual/javascript.md | 12 +- .../v7/accordion/readonly/individual/react.md | 7 +- .../v7/accordion/readonly/individual/vue.md | 25 ++-- static/usage/v7/accordion/toggle/index.md | 8 +- .../usage/v7/action-sheet/controller/index.md | 8 +- .../isOpen/angular/example_component_ts.md | 16 +-- .../v7/action-sheet/inline/isOpen/index.md | 8 +- .../action-sheet/inline/isOpen/javascript.md | 14 +-- .../v7/action-sheet/inline/isOpen/react.md | 14 +-- .../v7/action-sheet/inline/isOpen/vue.md | 2 +- .../trigger/angular/example_component_html.md | 6 +- .../trigger/angular/example_component_ts.md | 14 +-- .../v7/action-sheet/inline/trigger/index.md | 8 +- .../action-sheet/inline/trigger/javascript.md | 19 +-- .../v7/action-sheet/inline/trigger/react.md | 14 +-- .../v7/action-sheet/inline/trigger/vue.md | 6 +- .../angular/example_component_ts.md | 14 +-- .../role-info-on-dismiss/index.md | 8 +- .../role-info-on-dismiss/javascript.md | 14 +-- .../role-info-on-dismiss/react/main_tsx.md | 14 +-- .../action-sheet/role-info-on-dismiss/vue.md | 2 +- .../angular/example_component_ts.md | 14 +-- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 14 +-- .../theming/css-properties/react/main_tsx.md | 14 +-- .../styling/angular/example_component_ts.md | 14 +-- .../v7/action-sheet/theming/styling/index.md | 8 +- .../theming/styling/javascript.md | 14 +-- .../theming/styling/react/main_tsx.md | 14 +-- .../buttons/angular/example_component_html.md | 2 +- .../buttons/angular/example_component_ts.md | 10 +- static/usage/v7/alert/buttons/index.md | 8 +- static/usage/v7/alert/buttons/javascript.md | 10 +- static/usage/v7/alert/buttons/vue.md | 4 +- .../angular/example_component_html.md | 7 +- .../alert/customization/angular/global_css.md | 4 +- static/usage/v7/alert/customization/index.md | 8 +- .../v7/alert/customization/javascript.md | 8 +- .../v7/alert/customization/react/main_css.md | 4 +- static/usage/v7/alert/customization/vue.md | 7 +- .../radios/angular/example_component_html.md | 2 +- static/usage/v7/alert/inputs/radios/index.md | 8 +- .../v7/alert/inputs/radios/javascript.md | 8 +- .../angular/example_component_html.md | 2 +- .../v7/alert/inputs/text-inputs/index.md | 8 +- .../v7/alert/inputs/text-inputs/javascript.md | 12 +- .../angular/example_component_html.md | 2 +- .../v7/alert/presenting/controller/index.md | 8 +- .../isOpen/angular/example_component_html.md | 2 +- .../usage/v7/alert/presenting/isOpen/index.md | 8 +- .../v7/alert/presenting/isOpen/javascript.md | 6 +- .../trigger/angular/example_component_html.md | 2 +- .../v7/alert/presenting/trigger/index.md | 8 +- static/usage/v7/avatar/chip/vue.md | 2 +- static/usage/v7/avatar/item/vue.md | 2 +- .../v7/avatar/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_tsx.md | 1 + .../v7/avatar/theming/css-properties/vue.md | 2 +- .../basic/angular/page_two_component_ts.md | 4 +- static/usage/v7/back-button/basic/index.md | 10 +- .../v7/back-button/basic/vue/page_two_vue.md | 2 +- .../custom/angular/page_two_component_ts.md | 4 +- static/usage/v7/back-button/custom/index.md | 10 +- .../v7/back-button/custom/vue/page_two_vue.md | 4 +- static/usage/v7/backdrop/basic/index.md | 8 +- static/usage/v7/backdrop/styling/index.md | 8 +- static/usage/v7/badge/theming/colors/index.md | 8 +- .../angular/example_component_css.md | 2 +- .../v7/badge/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../collapsing-items/expand-on-click/index.md | 6 +- .../collapsing-items/expand-on-click/vue.md | 8 +- .../items-before-after/index.md | 8 +- .../collapsing-items/max-items/index.md | 6 +- .../angular/example_component_html.md | 2 +- .../popover-on-click/index.md | 8 +- .../popover-on-click/javascript.md | 6 +- .../popover-on-click/react.md | 5 +- .../collapsing-items/popover-on-click/vue.md | 40 +++---- .../icons/custom-separators/index.md | 6 +- .../icons/custom-separators/vue.md | 2 +- .../breadcrumbs/icons/icons-on-items/index.md | 8 +- .../v7/breadcrumbs/theming/colors/index.md | 6 +- .../angular/example_component_css.md | 2 +- .../theming/css-properties/index.md | 6 +- .../theming/css-properties/react/main_css.md | 2 +- static/usage/v7/button/basic/angular.md | 3 +- static/usage/v7/button/basic/javascript.md | 3 +- static/usage/v7/button/expand/angular.md | 3 +- static/usage/v7/button/expand/javascript.md | 3 +- static/usage/v7/button/icons/vue.md | 4 +- static/usage/v7/button/shape/angular.md | 3 +- static/usage/v7/button/shape/javascript.md | 3 +- .../v7/button/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_css.md | 1 + .../theming/css-properties/react/main_tsx.md | 4 +- static/usage/v7/buttons/types/angular.md | 8 +- static/usage/v7/buttons/types/index.md | 8 +- static/usage/v7/buttons/types/javascript.md | 8 +- static/usage/v7/buttons/types/react.md | 9 +- static/usage/v7/buttons/types/vue.md | 10 +- static/usage/v7/card/basic/index.md | 6 +- static/usage/v7/card/basic/react.md | 4 +- static/usage/v7/card/buttons/index.md | 8 +- static/usage/v7/card/buttons/react.md | 4 +- static/usage/v7/card/list/index.md | 8 +- static/usage/v7/card/list/react/main_tsx.md | 12 +- static/usage/v7/card/media/index.md | 8 +- static/usage/v7/card/media/react.md | 4 +- .../usage/v7/card/theming/colors/angular.md | 36 ++++-- static/usage/v7/card/theming/colors/index.md | 8 +- .../v7/card/theming/colors/javascript.md | 36 ++++-- static/usage/v7/card/theming/colors/react.md | 36 ++++-- static/usage/v7/card/theming/colors/vue.md | 36 ++++-- .../v7/card/theming/css-properties/index.md | 6 +- .../theming/css-properties/react/main_tsx.md | 4 +- static/usage/v7/checkbox/basic/index.md | 6 +- static/usage/v7/checkbox/basic/react.md | 6 +- static/usage/v7/checkbox/basic/vue.md | 2 +- .../usage/v7/checkbox/indeterminate/index.md | 6 +- .../usage/v7/checkbox/indeterminate/react.md | 6 +- static/usage/v7/checkbox/indeterminate/vue.md | 2 +- static/usage/v7/checkbox/justify/angular.md | 4 +- .../usage/v7/checkbox/justify/javascript.md | 4 +- static/usage/v7/checkbox/justify/react.md | 4 +- static/usage/v7/checkbox/justify/vue.md | 4 +- .../v7/checkbox/label-placement/react.md | 8 +- .../usage/v7/checkbox/label-placement/vue.md | 8 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../checkbox/theming/css-properties/index.md | 6 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 6 +- .../v7/checkbox/theming/css-properties/vue.md | 4 +- .../v7/chip/theming/css-properties/index.md | 6 +- static/usage/v7/content/basic/index.md | 10 +- static/usage/v7/content/fixed/angular.md | 50 +------- .../fixed/angular/example_component_css.md | 2 +- .../fixed/angular/example_component_html.md | 50 +------- static/usage/v7/content/fixed/index.md | 10 +- static/usage/v7/content/fixed/javascript.md | 52 +-------- static/usage/v7/content/fixed/react.md | 50 +------- .../usage/v7/content/fixed/react/main_css.md | 2 +- .../usage/v7/content/fixed/react/main_tsx.md | 50 +------- static/usage/v7/content/fixed/vue.md | 52 +-------- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 58 ++------- static/usage/v7/content/fullscreen/index.md | 10 +- .../usage/v7/content/fullscreen/javascript.md | 60 ++-------- .../v7/content/fullscreen/react/main_css.md | 2 +- .../v7/content/fullscreen/react/main_tsx.md | 58 ++------- static/usage/v7/content/fullscreen/vue.md | 60 ++-------- .../usage/v7/content/header-footer/angular.md | 8 +- .../usage/v7/content/header-footer/index.md | 10 +- .../v7/content/header-footer/javascript.md | 8 +- .../usage/v7/content/header-footer/react.md | 8 +- static/usage/v7/content/header-footer/vue.md | 8 +- .../angular/example_component_html.md | 53 +-------- .../usage/v7/content/scroll-events/index.md | 10 +- .../v7/content/scroll-events/javascript.md | 50 +------- .../usage/v7/content/scroll-events/react.md | 53 +-------- static/usage/v7/content/scroll-events/vue.md | 57 ++------- .../angular/example_component_html.md | 50 +------- .../usage/v7/content/scroll-methods/index.md | 10 +- .../v7/content/scroll-methods/javascript.md | 50 +------- .../usage/v7/content/scroll-methods/react.md | 58 ++------- static/usage/v7/content/scroll-methods/vue.md | 52 +-------- .../usage/v7/content/theming/colors/index.md | 10 +- .../content/theming/css-properties/index.md | 10 +- .../content/theming/css-shadow-parts/index.md | 10 +- .../usage/v7/datetime-button/basic/index.md | 8 +- .../usage/v7/datetime-button/basic/react.md | 2 +- static/usage/v7/datetime-button/basic/vue.md | 2 +- static/usage/v7/datetime/basic/index.md | 8 +- .../customizing-button-texts/angular.md | 7 +- .../buttons/customizing-button-texts/index.md | 8 +- .../customizing-button-texts/javascript.md | 6 +- .../buttons/customizing-button-texts/react.md | 9 +- .../buttons/customizing-button-texts/vue.md | 8 +- .../buttons/customizing-buttons/index.md | 8 +- .../buttons/customizing-buttons/react.md | 18 +-- .../buttons/customizing-buttons/vue.md | 4 +- .../showing-confirmation-buttons/index.md | 8 +- .../showing-confirmation-buttons/react.md | 4 +- .../date-constraints/advanced/index.md | 8 +- .../date-constraints/advanced/javascript.md | 2 +- .../date-constraints/advanced/react.md | 8 +- .../datetime/date-constraints/advanced/vue.md | 10 +- .../date-constraints/max-min/angular.md | 6 +- .../date-constraints/max-min/index.md | 8 +- .../date-constraints/max-min/javascript.md | 6 +- .../date-constraints/max-min/react.md | 8 +- .../datetime/date-constraints/max-min/vue.md | 6 +- .../date-constraints/values/angular.md | 5 +- .../datetime/date-constraints/values/index.md | 8 +- .../date-constraints/values/javascript.md | 5 +- .../datetime/date-constraints/values/react.md | 7 +- .../datetime/date-constraints/values/vue.md | 5 +- .../array/angular/example_component_html.md | 6 +- .../array/angular/example_component_ts.md | 4 +- .../datetime/highlightedDates/array/index.md | 8 +- .../highlightedDates/array/javascript.md | 4 +- .../datetime/highlightedDates/array/react.md | 4 +- .../v7/datetime/highlightedDates/array/vue.md | 16 ++- .../callback/angular/example_component_ts.md | 4 +- .../highlightedDates/callback/index.md | 8 +- .../highlightedDates/callback/javascript.md | 4 +- .../highlightedDates/callback/react.md | 4 +- .../datetime/highlightedDates/callback/vue.md | 8 +- .../localization/custom-locale/index.md | 8 +- .../localization/custom-locale/react.md | 4 +- .../localization/first-day-of-week/index.md | 8 +- .../localization/first-day-of-week/react.md | 4 +- .../datetime/localization/hour-cycle/index.md | 8 +- .../datetime/localization/hour-cycle/react.md | 4 +- .../locale-extension-tags/index.md | 8 +- .../locale-extension-tags/react.md | 4 +- .../datetime/localization/time-label/index.md | 8 +- static/usage/v7/datetime/multiple/angular.md | 6 +- static/usage/v7/datetime/multiple/index.md | 8 +- static/usage/v7/datetime/multiple/react.md | 8 +- static/usage/v7/datetime/multiple/vue.md | 6 +- .../v7/datetime/presentation/date/index.md | 8 +- .../v7/datetime/presentation/date/react.md | 4 +- .../presentation/month-and-year/index.md | 8 +- .../presentation/month-and-year/react.md | 4 +- .../v7/datetime/presentation/time/index.md | 6 +- .../v7/datetime/presentation/time/react.md | 4 +- .../v7/datetime/presentation/wheel/index.md | 8 +- .../v7/datetime/presentation/wheel/react.md | 4 +- static/usage/v7/datetime/theming/index.md | 8 +- .../usage/v7/datetime/theming/javascript.md | 18 +-- .../v7/datetime/theming/react/main_css.md | 12 +- static/usage/v7/datetime/theming/vue.md | 18 +-- .../datetime/title/customizing-title/index.md | 8 +- .../title/showing-default-title/index.md | 8 +- .../title/showing-default-title/react.md | 4 +- static/usage/v7/fab/basic/vue.md | 4 +- static/usage/v7/fab/button-sizing/vue.md | 4 +- static/usage/v7/fab/list-side/vue.md | 4 +- static/usage/v7/fab/positioning/angular.md | 2 +- static/usage/v7/fab/positioning/index.md | 10 +- static/usage/v7/fab/positioning/javascript.md | 2 +- static/usage/v7/fab/positioning/react.md | 11 +- static/usage/v7/fab/positioning/vue.md | 15 +-- static/usage/v7/fab/theming/colors/vue.md | 4 +- .../angular/example_component_css.md | 4 +- .../theming/css-custom-properties/index.md | 6 +- .../css-custom-properties/javascript.md | 2 +- .../css-custom-properties/react/main_css.md | 4 +- .../fab/theming/css-custom-properties/vue.md | 6 +- .../angular/example_component_css.md | 6 +- .../v7/fab/theming/css-shadow-parts/index.md | 6 +- .../theming/css-shadow-parts/javascript.md | 4 +- .../css-shadow-parts/react/main_css.md | 6 +- .../v7/fab/theming/css-shadow-parts/vue.md | 8 +- static/usage/v7/footer/basic/index.md | 10 +- .../angular/example_component_html.md | 57 ++------- .../v7/footer/custom-scroll-target/index.md | 12 +- .../footer/custom-scroll-target/javascript.md | 57 ++------- .../custom-scroll-target/react/main_tsx.md | 59 ++-------- .../v7/footer/custom-scroll-target/vue.md | 57 ++------- static/usage/v7/footer/fade/angular.md | 57 ++------- static/usage/v7/footer/fade/index.md | 12 +- static/usage/v7/footer/fade/javascript.md | 57 ++------- static/usage/v7/footer/fade/react.md | 57 ++------- static/usage/v7/footer/fade/vue.md | 57 ++------- static/usage/v7/footer/no-border/index.md | 10 +- static/usage/v7/footer/translucent/angular.md | 57 ++------- static/usage/v7/footer/translucent/index.md | 12 +- .../usage/v7/footer/translucent/javascript.md | 57 ++------- static/usage/v7/footer/translucent/react.md | 57 ++------- static/usage/v7/footer/translucent/vue.md | 57 ++------- static/usage/v7/grid/basic/index.md | 8 +- .../grid/customizing/column-number/index.md | 8 +- .../column-number/react/main_tsx.md | 4 +- .../v7/grid/customizing/padding/index.md | 8 +- .../usage/v7/grid/customizing/width/index.md | 8 +- static/usage/v7/grid/fixed/index.md | 8 +- .../angular/example_component_html.md | 40 +++++-- .../v7/grid/horizontal-alignment/index.md | 8 +- .../grid/horizontal-alignment/javascript.md | 40 +++++-- .../horizontal-alignment/react/main_tsx.md | 40 +++++-- .../usage/v7/grid/horizontal-alignment/vue.md | 40 +++++-- .../usage/v7/grid/offset-responsive/index.md | 8 +- .../grid/offset-responsive/react/main_tsx.md | 8 +- static/usage/v7/grid/offset/index.md | 8 +- static/usage/v7/grid/offset/react/main_tsx.md | 16 +-- .../v7/grid/push-pull-responsive/index.md | 8 +- .../push-pull-responsive/react/main_tsx.md | 24 +--- .../angular/example_component_html.md | 5 +- static/usage/v7/grid/push-pull/index.md | 8 +- static/usage/v7/grid/push-pull/javascript.md | 5 +- .../usage/v7/grid/push-pull/react/main_tsx.md | 23 +--- static/usage/v7/grid/push-pull/vue.md | 15 +-- static/usage/v7/grid/size-auto/index.md | 8 +- .../usage/v7/grid/size-auto/react/main_tsx.md | 14 +-- static/usage/v7/grid/size-responsive/index.md | 8 +- .../v7/grid/size-responsive/react/main_tsx.md | 40 ++----- static/usage/v7/grid/size/index.md | 8 +- static/usage/v7/grid/size/react/main_tsx.md | 12 +- .../angular/example_component_html.md | 36 ++++-- .../usage/v7/grid/vertical-alignment/index.md | 8 +- .../v7/grid/vertical-alignment/javascript.md | 36 ++++-- .../grid/vertical-alignment/react/main_tsx.md | 36 ++++-- .../usage/v7/grid/vertical-alignment/vue.md | 36 ++++-- static/usage/v7/header/basic/index.md | 10 +- static/usage/v7/header/condense/angular.md | 57 ++------- static/usage/v7/header/condense/index.md | 12 +- static/usage/v7/header/condense/javascript.md | 57 ++------- static/usage/v7/header/condense/react.md | 59 ++-------- static/usage/v7/header/condense/vue.md | 57 ++------- .../angular/example_component_html.md | 57 ++------- .../v7/header/custom-scroll-target/index.md | 12 +- .../custom-scroll-target/react/main_tsx.md | 59 ++-------- .../v7/header/custom-scroll-target/vue.md | 57 ++------- static/usage/v7/header/fade/angular.md | 57 ++------- static/usage/v7/header/fade/index.md | 12 +- static/usage/v7/header/fade/javascript.md | 57 ++------- static/usage/v7/header/fade/react.md | 57 ++------- static/usage/v7/header/fade/vue.md | 57 ++------- static/usage/v7/header/no-border/index.md | 10 +- static/usage/v7/header/translucent/angular.md | 57 ++------- static/usage/v7/header/translucent/index.md | 12 +- .../usage/v7/header/translucent/javascript.md | 57 ++------- static/usage/v7/header/translucent/react.md | 57 ++------- static/usage/v7/header/translucent/vue.md | 57 ++------- static/usage/v7/icon/basic/index.md | 8 +- static/usage/v7/img/basic/angular.md | 5 +- static/usage/v7/img/basic/javascript.md | 5 +- static/usage/v7/img/basic/react.md | 5 +- static/usage/v7/img/basic/vue.md | 5 +- .../usage/v7/infinite-scroll/basic/index.md | 6 +- .../custom-infinite-scroll-content/index.md | 6 +- .../infinite-scroll-content/index.md | 6 +- static/usage/v7/input/clear/angular.md | 22 +--- static/usage/v7/input/clear/javascript.md | 22 +--- static/usage/v7/input/clear/react.md | 22 +--- static/usage/v7/input/clear/vue.md | 26 +---- .../counter/angular/example_component_html.md | 9 +- static/usage/v7/input/counter/index.md | 6 +- static/usage/v7/input/counter/javascript.md | 8 +- static/usage/v7/input/counter/react.md | 11 +- static/usage/v7/input/counter/vue.md | 15 +-- static/usage/v7/input/fill/index.md | 12 +- static/usage/v7/input/fill/react.md | 4 +- static/usage/v7/input/fill/vue.md | 4 +- .../angular/example_component_html.md | 2 +- .../filtering/angular/example_component_ts.md | 10 +- static/usage/v7/input/filtering/index.md | 6 +- static/usage/v7/input/filtering/javascript.md | 4 +- static/usage/v7/input/filtering/react.md | 23 ++-- static/usage/v7/input/filtering/vue.md | 16 +-- static/usage/v7/input/helper-error/angular.md | 2 +- static/usage/v7/input/helper-error/index.md | 8 +- .../usage/v7/input/helper-error/javascript.md | 10 +- static/usage/v7/input/helper-error/vue.md | 8 +- .../usage/v7/input/label-placement/angular.md | 6 +- .../v7/input/label-placement/javascript.md | 6 +- .../usage/v7/input/label-placement/react.md | 6 +- static/usage/v7/input/label-placement/vue.md | 6 +- static/usage/v7/input/migration/index.md | 18 +-- static/usage/v7/input/theming/colors/index.md | 8 +- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 6 +- .../v7/input/theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 8 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 4 +- .../v7/input/theming/css-properties/vue.md | 8 +- static/usage/v7/input/types/angular.md | 8 +- static/usage/v7/input/types/javascript.md | 8 +- static/usage/v7/input/types/react.md | 8 +- static/usage/v7/input/types/vue.md | 8 +- static/usage/v7/item-divider/basic/angular.md | 8 +- static/usage/v7/item-divider/basic/index.md | 8 +- .../usage/v7/item-divider/basic/javascript.md | 8 +- static/usage/v7/item-divider/basic/react.md | 8 +- static/usage/v7/item-divider/basic/vue.md | 8 +- .../v7/item-divider/theming/colors/index.md | 8 +- .../angular/example_component_html.md | 4 +- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 4 +- .../theming/css-properties/react/main_tsx.md | 5 +- .../theming/css-properties/vue.md | 6 +- static/usage/v7/item-group/basic/index.md | 8 +- .../v7/item-group/sliding-items/angular.md | 56 ++++++--- .../v7/item-group/sliding-items/index.md | 8 +- .../v7/item-group/sliding-items/javascript.md | 56 ++++++--- .../v7/item-group/sliding-items/react.md | 66 +++++++---- .../usage/v7/item-group/sliding-items/vue.md | 66 +++++++---- .../usage/v7/item-sliding/expandable/index.md | 8 +- .../usage/v7/item-sliding/expandable/react.md | 8 +- static/usage/v7/item-sliding/icons/angular.md | 16 ++- static/usage/v7/item-sliding/icons/index.md | 8 +- .../usage/v7/item-sliding/icons/javascript.md | 16 ++- static/usage/v7/item-sliding/icons/react.md | 16 ++- static/usage/v7/item-sliding/icons/vue.md | 20 +++- static/usage/v7/item/basic/angular.md | 10 +- static/usage/v7/item/basic/javascript.md | 10 +- static/usage/v7/item/basic/react.md | 6 +- static/usage/v7/item/basic/vue.md | 8 +- static/usage/v7/item/buttons/angular.md | 20 +++- static/usage/v7/item/buttons/javascript.md | 20 +++- static/usage/v7/item/buttons/react.md | 8 +- static/usage/v7/item/buttons/vue.md | 24 ++-- static/usage/v7/item/detail-arrows/index.md | 8 +- static/usage/v7/item/detail-arrows/vue.md | 1 - static/usage/v7/item/icons/angular.md | 16 ++- static/usage/v7/item/icons/javascript.md | 16 ++- static/usage/v7/item/icons/react.md | 16 ++- static/usage/v7/item/icons/vue.md | 20 +++- static/usage/v7/item/lines/angular.md | 4 +- static/usage/v7/item/lines/javascript.md | 4 +- static/usage/v7/item/lines/react.md | 4 +- static/usage/v7/item/lines/vue.md | 6 +- static/usage/v7/item/media/angular.md | 8 +- static/usage/v7/item/media/javascript.md | 8 +- static/usage/v7/item/media/react.md | 8 +- static/usage/v7/item/media/vue.md | 8 +- static/usage/v7/item/theming/colors/index.md | 8 +- .../v7/item/theming/css-properties/index.md | 6 +- .../v7/item/theming/css-shadow-parts/index.md | 6 +- .../v7/item/theming/input-highlight/index.md | 8 +- static/usage/v7/label/item/angular.md | 10 +- static/usage/v7/label/item/javascript.md | 10 +- static/usage/v7/label/item/react.md | 6 +- static/usage/v7/label/item/vue.md | 8 +- static/usage/v7/list-header/basic/index.md | 8 +- static/usage/v7/list-header/buttons/index.md | 8 +- static/usage/v7/list-header/lines/index.md | 8 +- .../v7/list-header/theming/colors/index.md | 8 +- .../theming/css-properties/index.md | 8 +- static/usage/v7/loading/controller/index.md | 6 +- .../usage/v7/loading/controller/javascript.md | 16 +-- static/usage/v7/loading/controller/react.md | 15 ++- static/usage/v7/loading/controller/vue.md | 12 +- static/usage/v7/loading/inline/index.md | 6 +- static/usage/v7/loading/spinners/index.md | 6 +- .../v7/loading/theming/angular/global_css.md | 2 +- static/usage/v7/loading/theming/index.md | 6 +- .../v7/loading/theming/react/main_css.md | 2 +- static/usage/v7/menu/basic/angular.md | 4 +- static/usage/v7/menu/basic/index.md | 8 +- static/usage/v7/menu/basic/javascript.md | 4 +- static/usage/v7/menu/basic/react.md | 15 ++- static/usage/v7/menu/basic/vue.md | 17 ++- .../theming/angular/example_component_css.md | 2 +- .../theming/angular/example_component_html.md | 4 +- static/usage/v7/menu/theming/index.md | 8 +- static/usage/v7/menu/theming/javascript.md | 4 +- .../usage/v7/menu/theming/react/main_css.md | 2 +- .../usage/v7/menu/theming/react/main_tsx.md | 15 ++- static/usage/v7/menu/theming/vue.md | 17 ++- static/usage/v7/menu/toggle/index.md | 8 +- static/usage/v7/menu/toggle/react.md | 13 ++- static/usage/v7/menu/toggle/vue.md | 13 ++- .../type/angular/example_component_html.md | 5 +- static/usage/v7/menu/type/index.md | 8 +- static/usage/v7/menu/type/javascript.md | 3 +- static/usage/v7/menu/type/react.md | 6 +- static/usage/v7/menu/type/vue.md | 13 +-- .../v7/modal/can-dismiss/boolean/index.md | 8 +- .../v7/modal/can-dismiss/function/index.md | 8 +- .../prevent-swipe-to-close/index.md | 10 +- static/usage/v7/modal/card/basic/index.md | 10 +- static/usage/v7/modal/controller/index.md | 10 +- static/usage/v7/modal/custom-dialogs/index.md | 10 +- .../v7/modal/custom-dialogs/react/main_tsx.md | 2 +- static/usage/v7/modal/custom-dialogs/vue.md | 18 +-- static/usage/v7/modal/inline/basic/index.md | 10 +- static/usage/v7/modal/inline/is-open/index.md | 10 +- .../v7/modal/performance/mount/angular.md | 4 +- .../usage/v7/modal/performance/mount/index.md | 10 +- .../usage/v7/modal/performance/mount/react.md | 15 ++- .../usage/v7/modal/performance/mount/vue.md | 14 ++- .../usage/v7/modal/sheet/auto-height/index.md | 10 +- .../v7/modal/sheet/auto-height/javascript.md | 2 +- .../modal/sheet/auto-height/react/main_css.md | 2 +- .../modal/sheet/auto-height/react/main_tsx.md | 19 ++- .../usage/v7/modal/sheet/auto-height/vue.md | 11 +- .../modal/sheet/background-content/index.md | 10 +- static/usage/v7/modal/sheet/basic/index.md | 10 +- .../v7/modal/sheet/handle-behavior/index.md | 10 +- .../v7/modal/styling/animations/index.md | 10 +- .../usage/v7/modal/styling/theming/index.md | 10 +- static/usage/v7/nav/modal-navigation/index.md | 10 +- static/usage/v7/nav/nav-link/index.md | 8 +- .../v7/note/theming/css-properties/index.md | 6 +- static/usage/v7/picker/controller/index.md | 8 +- .../isOpen/angular/example_component_ts.md | 47 ++++---- static/usage/v7/picker/inline/isOpen/index.md | 8 +- .../v7/picker/inline/isOpen/javascript.md | 47 ++++---- static/usage/v7/picker/inline/isOpen/react.md | 35 +++--- static/usage/v7/picker/inline/isOpen/vue.md | 51 ++++---- .../trigger/angular/example_component_html.md | 6 +- .../trigger/angular/example_component_ts.md | 47 ++++---- .../usage/v7/picker/inline/trigger/index.md | 8 +- .../v7/picker/inline/trigger/javascript.md | 47 ++++---- .../usage/v7/picker/inline/trigger/react.md | 35 +++--- static/usage/v7/picker/inline/trigger/vue.md | 55 +++++---- .../angular/example_component_html.md | 6 +- .../angular/example_component_ts.md | 102 ++++++++-------- .../usage/v7/picker/multiple-column/index.md | 8 +- .../v7/picker/multiple-column/javascript.md | 102 ++++++++-------- .../usage/v7/picker/multiple-column/react.md | 72 +++++------- static/usage/v7/picker/multiple-column/vue.md | 110 +++++++++--------- .../angular/example_component_css.md | 2 +- .../angular/example_component_html.md | 2 +- .../customization/positioning/index.md | 8 +- .../positioning/react/main_css.md | 2 +- .../v7/popover/customization/sizing/index.md | 8 +- .../styling/angular/global_css.md | 2 +- .../v7/popover/customization/styling/index.md | 8 +- .../customization/styling/react/main_css.md | 2 +- static/usage/v7/popover/nested/index.md | 8 +- .../v7/popover/performance/mount/index.md | 8 +- .../popover/performance/mount/javascript.md | 2 +- .../angular/example_component_html.md | 2 +- .../angular/popover_component_html.md | 2 +- .../v7/popover/presenting/controller/index.md | 8 +- .../presenting/controller/javascript.md | 2 +- .../presenting/controller/vue/popover_vue.md | 14 +-- .../angular/example_component_html.md | 2 +- .../popover/presenting/inline-isopen/index.md | 8 +- .../presenting/inline-isopen/javascript.md | 4 +- .../presenting/inline-trigger/index.md | 8 +- .../buffer/angular/example_component_ts.md | 2 +- static/usage/v7/progress-bar/buffer/index.md | 6 +- static/usage/v7/progress-bar/buffer/react.md | 4 +- static/usage/v7/progress-bar/buffer/vue.md | 4 +- .../angular/example_component_ts.md | 2 +- .../v7/progress-bar/determinate/index.md | 6 +- .../v7/progress-bar/determinate/react.md | 4 +- .../usage/v7/progress-bar/determinate/vue.md | 4 +- .../v7/progress-bar/indeterminate/index.md | 6 +- .../v7/progress-bar/indeterminate/react.md | 4 +- .../v7/progress-bar/theming/colors/index.md | 6 +- .../angular/example_component_html.md | 3 +- .../theming/css-properties/index.md | 6 +- .../theming/css-properties/react/main_tsx.md | 3 +- .../theming/css-properties/vue.md | 2 +- .../angular/example_component_html.md | 3 +- .../theming/css-shadow-parts/index.md | 6 +- .../css-shadow-parts/react/main_tsx.md | 3 +- .../theming/css-shadow-parts/vue.md | 2 +- static/usage/v7/radio/basic/angular.md | 2 +- static/usage/v7/radio/basic/javascript.md | 2 +- static/usage/v7/radio/basic/react.md | 9 +- static/usage/v7/radio/basic/vue.md | 2 +- .../usage/v7/radio/empty-selection/index.md | 6 +- .../usage/v7/radio/empty-selection/react.md | 12 +- static/usage/v7/radio/justify/react.md | 16 +-- static/usage/v7/radio/justify/vue.md | 4 +- .../usage/v7/radio/label-placement/react.md | 20 ++-- static/usage/v7/radio/label-placement/vue.md | 8 +- static/usage/v7/radio/theming/colors/index.md | 8 +- .../v7/radio/theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 8 +- .../v7/radio/theming/css-properties/vue.md | 8 +- .../angular/example_component_css.md | 2 +- .../radio/theming/css-shadow-parts/index.md | 8 +- .../theming/css-shadow-parts/javascript.md | 2 +- .../css-shadow-parts/react/main_css.md | 2 +- .../usage/v7/range/ion-change-event/index.md | 6 +- .../usage/v7/range/ion-change-event/react.md | 5 +- .../angular/example_component_html.md | 6 +- .../v7/range/ion-knob-move-event/index.md | 6 +- .../usage/v7/range/ion-knob-move-event/vue.md | 6 +- static/usage/v7/range/labels/react.md | 10 +- static/usage/v7/range/labels/vue.md | 8 +- static/usage/v7/range/migration/index.md | 2 +- static/usage/v7/range/pins/index.md | 6 +- .../v7/range/theming/css-properties/index.md | 6 +- .../angular/example_component_html.md | 10 +- .../range/theming/css-shadow-parts/index.md | 6 +- .../css-shadow-parts/react/main_tsx.md | 4 +- .../v7/range/theming/css-shadow-parts/vue.md | 10 +- .../advanced/angular/example_component_ts.md | 20 +--- static/usage/v7/refresher/advanced/index.md | 10 +- .../usage/v7/refresher/advanced/javascript.md | 16 +-- .../v7/refresher/advanced/react/main_tsx.md | 40 ++----- static/usage/v7/refresher/advanced/vue.md | 44 +------ .../basic/angular/example_component_ts.md | 2 +- static/usage/v7/refresher/basic/index.md | 10 +- static/usage/v7/refresher/basic/react.md | 11 +- .../angular/example_component_html.md | 3 +- .../angular/example_component_ts.md | 2 +- .../v7/refresher/custom-content/index.md | 10 +- .../v7/refresher/custom-content/javascript.md | 3 +- .../v7/refresher/custom-content/react.md | 15 +-- .../usage/v7/refresher/custom-content/vue.md | 3 +- .../angular/example_component_ts.md | 2 +- .../refresher/custom-scroll-target/index.md | 10 +- .../custom-scroll-target/react/main_tsx.md | 11 +- .../angular/example_component_ts.md | 2 +- .../v7/refresher/pull-properties/index.md | 10 +- .../v7/refresher/pull-properties/react.md | 11 +- .../basic/angular/example_component_html.md | 20 +++- .../basic/angular/example_component_ts.md | 2 +- static/usage/v7/reorder/basic/index.md | 8 +- static/usage/v7/reorder/basic/javascript.md | 22 +++- static/usage/v7/reorder/basic/react.md | 20 +++- static/usage/v7/reorder/basic/vue.md | 26 +++-- .../angular/example_component_html.md | 20 +++- .../angular/example_component_ts.md | 2 +- static/usage/v7/reorder/custom-icon/index.md | 8 +- .../v7/reorder/custom-icon/javascript.md | 22 +++- static/usage/v7/reorder/custom-icon/react.md | 20 +++- static/usage/v7/reorder/custom-icon/vue.md | 26 +++-- .../angular/example_component_html.md | 20 +++- .../v7/reorder/custom-scroll-target/index.md | 10 +- .../custom-scroll-target/javascript.md | 22 +++- .../custom-scroll-target/react/main_tsx.md | 30 ++--- .../v7/reorder/custom-scroll-target/vue.md | 28 +++-- .../angular/example_component_html.md | 24 +++- .../angular/example_component_ts.md | 2 +- .../v7/reorder/toggling-disabled/index.md | 8 +- .../reorder/toggling-disabled/javascript.md | 26 +++-- .../v7/reorder/toggling-disabled/react.md | 36 +++--- .../usage/v7/reorder/toggling-disabled/vue.md | 32 +++-- .../angular/example_component_html.md | 4 +- .../angular/example_component_ts.md | 2 +- .../usage/v7/reorder/updating-data/index.md | 8 +- .../v7/reorder/updating-data/javascript.md | 2 +- .../usage/v7/reorder/updating-data/react.md | 8 +- static/usage/v7/reorder/updating-data/vue.md | 10 +- .../wrapper/angular/example_component_html.md | 20 +++- .../wrapper/angular/example_component_ts.md | 2 +- static/usage/v7/reorder/wrapper/index.md | 8 +- static/usage/v7/reorder/wrapper/javascript.md | 22 +++- static/usage/v7/reorder/wrapper/react.md | 20 +++- static/usage/v7/reorder/wrapper/vue.md | 26 +++-- static/usage/v7/ripple-effect/basic/index.md | 8 +- .../v7/ripple-effect/customizing/index.md | 8 +- static/usage/v7/ripple-effect/type/index.md | 8 +- static/usage/v7/router/basic/index.md | 10 +- static/usage/v7/searchbar/basic/index.md | 8 +- .../v7/searchbar/cancel-button/angular.md | 7 +- .../usage/v7/searchbar/cancel-button/index.md | 8 +- .../v7/searchbar/cancel-button/javascript.md | 7 +- .../usage/v7/searchbar/cancel-button/react.md | 7 +- .../usage/v7/searchbar/cancel-button/vue.md | 9 +- .../usage/v7/searchbar/clear-button/index.md | 8 +- static/usage/v7/searchbar/clear-button/vue.md | 2 +- .../debounce/angular/example_component_ts.md | 15 +-- static/usage/v7/searchbar/debounce/index.md | 8 +- .../usage/v7/searchbar/debounce/javascript.md | 15 +-- static/usage/v7/searchbar/debounce/react.md | 23 +--- static/usage/v7/searchbar/debounce/vue.md | 15 +-- static/usage/v7/searchbar/search-icon/vue.md | 2 +- .../v7/searchbar/theming/colors/index.md | 8 +- .../searchbar/theming/css-properties/index.md | 6 +- .../theming/css-properties/javascript.md | 30 ++--- .../theming/css-properties/react/main_tsx.md | 4 +- .../usage/v7/segment-button/layout/index.md | 8 +- static/usage/v7/segment-button/layout/vue.md | 2 +- .../theming/css-properties/index.md | 6 +- .../theming/css-shadow-parts/index.md | 6 +- static/usage/v7/segment/scrollable/index.md | 8 +- static/usage/v7/segment/scrollable/vue.md | 15 +-- .../usage/v7/segment/theming/colors/index.md | 8 +- .../segment/theming/css-properties/index.md | 6 +- .../select/basic/multiple-selection/index.md | 8 +- .../angular/example_component_html.md | 2 +- .../basic/responding-to-interaction/index.md | 8 +- .../responding-to-interaction/javascript.md | 2 +- .../basic/responding-to-interaction/vue.md | 8 +- .../v7/select/basic/single-selection/index.md | 8 +- .../customization/button-text/angular.md | 7 +- .../select/customization/button-text/index.md | 8 +- .../customization/button-text/javascript.md | 7 +- .../select/customization/button-text/react.md | 7 +- .../select/customization/button-text/vue.md | 7 +- .../angular/example_component_html.md | 13 +-- .../customization/interface-options/index.md | 8 +- .../interface-options/javascript.md | 12 +- .../customization/interface-options/react.md | 19 ++- .../customization/interface-options/vue.md | 32 ++--- .../angular/example_component_css.md | 2 +- .../customization/styling-select/index.md | 8 +- .../styling-select/javascript.md | 42 +++---- .../styling-select/react/main_css.md | 2 +- static/usage/v7/select/fill/index.md | 10 +- static/usage/v7/select/fill/react.md | 4 +- static/usage/v7/select/fill/vue.md | 4 +- .../select/interfaces/action-sheet/index.md | 8 +- .../v7/select/interfaces/popover/index.md | 8 +- .../usage/v7/select/label-placement/react.md | 6 +- static/usage/v7/select/label-placement/vue.md | 6 +- static/usage/v7/select/migration/index.md | 2 +- .../angular/example_component_html.md | 2 +- .../multiple-selection/index.md | 8 +- .../multiple-selection/javascript.md | 18 +-- .../multiple-selection/vue.md | 28 ++--- .../angular/example_component_html.md | 2 +- .../using-comparewith/index.md | 8 +- .../using-comparewith/javascript.md | 14 +-- .../using-comparewith/vue.md | 24 ++-- .../typeahead/angular/angular_types_ts.md | 2 +- .../angular/example_component_html.md | 2 +- .../typeahead/angular/example_component_ts.md | 16 +-- .../angular/modal-example_component_html.md | 8 +- .../angular/modal-example_component_ts.md | 31 ++--- static/usage/v7/select/typeahead/index.md | 18 +-- .../usage/v7/select/typeahead/javascript.md | 26 +++-- .../v7/select/typeahead/react/main_tsx.md | 20 ++-- .../select/typeahead/react/react_types_ts.md | 2 +- .../react/typeahead_component_tsx.md | 65 +++++------ .../v7/select/typeahead/vue/example_vue.md | 22 ++-- .../typeahead/vue/typeahead_component_vue.md | 106 ++++++++--------- .../v7/select/typeahead/vue/vue_types_ts.md | 2 +- .../basic/angular/example_component_ts.md | 5 +- static/usage/v7/skeleton-text/basic/index.md | 8 +- .../v7/skeleton-text/basic/javascript.md | 1 + static/usage/v7/skeleton-text/basic/react.md | 22 ++-- static/usage/v7/skeleton-text/basic/vue.md | 14 +-- .../angular/example_component_css.md | 2 +- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 2 +- .../theming/css-properties/react/main_css.md | 2 +- .../theming/css-properties/react/main_tsx.md | 19 ++- .../theming/css-properties/vue.md | 13 ++- static/usage/v7/spinner/basic/index.md | 8 +- .../usage/v7/spinner/theming/colors/index.md | 8 +- .../spinner/theming/css-properties/index.md | 6 +- .../spinner/theming/css-properties/react.md | 4 +- static/usage/v7/split-pane/basic/angular.md | 8 +- static/usage/v7/split-pane/basic/index.md | 8 +- .../usage/v7/split-pane/basic/javascript.md | 8 +- static/usage/v7/split-pane/basic/react.md | 10 +- static/usage/v7/split-pane/basic/vue.md | 12 +- .../angular/example_component_html.md | 8 +- .../theming/css-properties/index.md | 8 +- .../theming/css-properties/javascript.md | 10 +- .../theming/css-properties/react/main_tsx.md | 10 +- .../split-pane/theming/css-properties/vue.md | 14 ++- static/usage/v7/tabs/router/index.md | 8 +- static/usage/v7/text/basic/angular.md | 8 +- static/usage/v7/text/basic/javascript.md | 8 +- static/usage/v7/text/basic/react.md | 13 +-- static/usage/v7/text/basic/vue.md | 8 +- static/usage/v7/textarea/autogrow/angular.md | 7 +- static/usage/v7/textarea/autogrow/index.md | 8 +- .../usage/v7/textarea/autogrow/javascript.md | 7 +- static/usage/v7/textarea/autogrow/vue.md | 7 +- static/usage/v7/textarea/basic/index.md | 8 +- .../usage/v7/textarea/clear-on-edit/index.md | 8 +- static/usage/v7/textarea/counter/index.md | 8 +- static/usage/v7/textarea/fill/index.md | 10 +- .../usage/v7/textarea/helper-error/index.md | 8 +- .../v7/textarea/label-placement/index.md | 8 +- static/usage/v7/textarea/migration/index.md | 18 +-- static/usage/v7/textarea/theming/index.md | 8 +- .../usage/v7/textarea/theming/javascript.md | 2 +- static/usage/v7/textarea/theming/vue.md | 2 +- .../angular/example_component_css.md | 1 + .../angular/example_component_html.md | 1 + .../thumbnail/theming/css-properties/index.md | 8 +- .../theming/css-properties/react/main_tsx.md | 1 + static/usage/v7/title/basic/index.md | 10 +- .../collapsible-large-title/basic/index.md | 14 +-- .../collapsible-large-title/buttons/index.md | 12 +- .../v7/title/theming/css-properties/index.md | 10 +- .../buttons/angular/example_component_html.md | 6 +- .../buttons/angular/example_component_ts.md | 14 +-- static/usage/v7/toast/buttons/index.md | 8 +- static/usage/v7/toast/buttons/javascript.md | 14 +-- static/usage/v7/toast/buttons/react.md | 10 +- static/usage/v7/toast/buttons/vue.md | 30 +++-- static/usage/v7/toast/icon/angular.md | 2 +- static/usage/v7/toast/icon/index.md | 8 +- static/usage/v7/toast/icon/vue.md | 4 +- static/usage/v7/toast/inline/basic/index.md | 10 +- static/usage/v7/toast/inline/basic/react.md | 10 +- static/usage/v7/toast/inline/basic/vue.md | 9 +- static/usage/v7/toast/inline/is-open/index.md | 10 +- static/usage/v7/toast/inline/is-open/vue.md | 4 +- .../layout/angular/example_component_html.md | 10 +- .../layout/angular/example_component_ts.md | 4 +- static/usage/v7/toast/layout/index.md | 8 +- static/usage/v7/toast/layout/javascript.md | 15 +-- static/usage/v7/toast/layout/react.md | 4 +- static/usage/v7/toast/layout/vue.md | 8 +- .../angular/example_component_html.md | 2 +- .../angular/example_component_ts.md | 4 +- .../v7/toast/presenting/controller/index.md | 8 +- .../toast/presenting/controller/javascript.md | 2 +- .../v7/toast/presenting/controller/react.md | 14 +-- .../v7/toast/presenting/controller/vue.md | 2 +- .../theming/angular/example_component_html.md | 8 +- .../theming/angular/example_component_ts.md | 4 +- .../v7/toast/theming/angular/global_css.md | 6 +- static/usage/v7/toast/theming/index.md | 8 +- static/usage/v7/toast/theming/javascript.md | 8 +- .../usage/v7/toast/theming/react/main_css.md | 6 +- .../usage/v7/toast/theming/react/main_tsx.md | 10 +- static/usage/v7/toast/theming/vue.md | 20 ++-- static/usage/v7/toggle/basic/react.md | 16 +-- .../usage/v7/toggle/label-placement/react.md | 12 +- static/usage/v7/toggle/on-off/react.md | 4 +- .../v7/toggle/theming/css-properties/index.md | 6 +- .../theming/css-properties/javascript.md | 12 +- .../v7/toggle/theming/css-properties/vue.md | 12 +- .../toggle/theming/css-shadow-parts/index.md | 6 +- .../theming/css-shadow-parts/javascript.md | 10 +- .../v7/toggle/theming/css-shadow-parts/vue.md | 10 +- static/usage/v7/toolbar/basic/index.md | 10 +- static/usage/v7/toolbar/buttons/angular.md | 16 ++- static/usage/v7/toolbar/buttons/index.md | 8 +- static/usage/v7/toolbar/buttons/javascript.md | 16 ++- static/usage/v7/toolbar/buttons/react.md | 16 ++- static/usage/v7/toolbar/buttons/vue.md | 16 ++- .../usage/v7/toolbar/progress-bars/index.md | 10 +- static/usage/v7/toolbar/searchbars/index.md | 10 +- static/usage/v7/toolbar/segments/index.md | 10 +- .../usage/v7/toolbar/theming/colors/index.md | 8 +- .../toolbar/theming/css-properties/index.md | 8 +- versioned_docs/version-v5/api/item.md | 12 +- versioned_docs/version-v5/api/select.md | 2 +- .../guides/first-app-v4/intro.md | 2 +- .../version-v5/developing/android.md | 6 +- versioned_docs/version-v5/index.md | 20 ++-- versioned_docs/version-v5/react.md | 8 +- .../version-v5/reference/migration.md | 2 +- .../version-v6/angular/navigation.md | 37 +++--- versioned_docs/version-v6/angular/slides.md | 20 ++-- .../version-v6/angular/virtual-scroll.md | 2 +- versioned_docs/version-v6/api/icon.md | 2 +- versioned_docs/version-v6/api/nav.md | 2 +- .../guides/first-app-v4/intro.md | 2 +- .../version-v6/developing/config.md | 85 +++++++------- .../developing/config/global/index.md | 36 +++--- .../developing/config/per-component/index.md | 42 +++---- .../config/per-platform-fallback/index.md | 42 ++++--- .../config/per-platform-overrides/index.md | 26 ++--- .../developing/config/per-platform/index.md | 25 ++-- .../developing/hardware-back-button.md | 8 +- versioned_docs/version-v6/index.md | 20 ++-- .../version-v6/intro/upgrading-to-ionic-6.md | 73 ++++++------ versioned_docs/version-v6/native-faq.md | 9 +- versioned_docs/version-v6/native.md | 8 +- versioned_docs/version-v6/react.md | 8 +- versioned_docs/version-v6/react/navigation.md | 57 ++++----- versioned_docs/version-v6/react/slides.md | 2 +- .../version-v6/react/virtual-scroll.md | 6 +- .../version-v6/reference/browser-support.md | 1 + .../version-v6/reference/migration.md | 2 +- .../version-v6/reference/support.md | 16 +-- versioned_docs/version-v6/vue/navigation.md | 39 +++---- versioned_docs/version-v6/vue/quickstart.md | 33 +----- versioned_docs/version-v6/vue/slides.md | 2 +- .../version-v6/vue/virtual-scroll.md | 2 +- 1671 files changed, 9941 insertions(+), 11991 deletions(-) diff --git a/docs/angular/navigation.md b/docs/angular/navigation.md index 9aedd78ceee..eb05502309c 100644 --- a/docs/angular/navigation.md +++ b/docs/angular/navigation.md @@ -238,15 +238,14 @@ If you have built a web app that uses routing, you likely have used linear routi The following is an example of linear routing in a mobile app: + width="400" + src={useBaseUrl('video/linear-routing-demo.mp4')} + controls +> The application history in this example has the following path: @@ -265,15 +264,14 @@ Non-linear routing means that the view that the user should go back to is not ne The following is an example of non-linear routing: + width="400" + src={useBaseUrl('video/non-linear-routing-demo.mp4')} + controls +> In the example above, we start on the `Originals` tab. Tapping a card brings us to the `Ted Lasso` view within the `Originals` tab. @@ -481,15 +479,14 @@ If you find that your tabs need to reference the Settings tab, we recommend maki 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. + width="400" + src={useBaseUrl('video/tabs-account-demo.mp4')} + controls +> **Reusing Views Across Tabs** diff --git a/docs/angular/slides.md b/docs/angular/slides.md index 7f40b012881..f294bcc351c 100644 --- a/docs/angular/slides.md +++ b/docs/angular/slides.md @@ -75,7 +75,7 @@ If you would like to use the Core version instead, which does not include additi To migrate over your CSS, first update your selectors to target the new custom elements instead: | ion-slides Selector | Swiper Selector | -| ------------------- | ------------------ | +| ------------------- | ------------------ | | `ion-slides` | `swiper-container` | | `ion-slide` | `swiper-slide` | @@ -155,7 +155,9 @@ export class HomePage { ```html - ... + + ... + ``` :::note @@ -188,11 +190,11 @@ To set these options as properties directly on `` we would do Below is a full list of property changes when going from `ion-slides` to Swiper Element: -| Name | Notes | -| ------- | --------------------------------------------------------------------------------------------------------------------------------------- | -| options | Set each option as a property directly on the `` component. | -| mode | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. | -| pager | Use the `pagination` property instead. | +| Name | Notes | +| --------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| options | Set each option as a property directly on the `` component. | +| mode | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. | +| pager | Use the `pagination` property instead. | :::note All properties available in Swiper Element can be found at https://swiperjs.com/swiper-api#parameters. @@ -304,7 +306,9 @@ All methods and properties available on the Swiper instance can be found at ... + + ... + ``` :::note diff --git a/docs/cli/livereload.md b/docs/cli/livereload.md index 4d2d160ee78..23703954a9e 100644 --- a/docs/cli/livereload.md +++ b/docs/cli/livereload.md @@ -64,9 +64,8 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl Live reload will use HTTP by default which will cause web APIs that require a secure context (like [web crypto](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)) to fail. To establish a secure context you can use the `--ssl` argument to use HTTPS. For example, with an Angular application you can run the following to pass a certificate and private key and serve your app with HTTPS: - ```shell ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key' ``` -Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623). +Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623). \ No newline at end of file diff --git a/docs/developer-resources/guides/first-app-v4/intro.md b/docs/developer-resources/guides/first-app-v4/intro.md index 8e07c5bfb07..bffc7ea9c28 100644 --- a/docs/developer-resources/guides/first-app-v4/intro.md +++ b/docs/developer-resources/guides/first-app-v4/intro.md @@ -16,7 +16,7 @@ Download/install these right away to ensure an optimal Ionic development experie - A code editor for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/). - Command-line terminal (CLI): FYI Windows users, for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode. For - Mac/Linux + Mac/Linux users, virtually any terminal will work. ## Install Ionic and Cordova diff --git a/docs/developing/config.md b/docs/developing/config.md index aaaf2066bd4..10ad73cec8d 100644 --- a/docs/developing/config.md +++ b/docs/developing/config.md @@ -21,7 +21,7 @@ Ionic Config is not reactive. Updating the config's value after the component ha import PerComponentExample from '@site/docs/developing/config/per-component/index.md'; - + ## Per-Platform Config @@ -33,6 +33,7 @@ import PerPlatformExample from '@site/docs/developing/config/per-platform/index. + ### Fallbacks The next example allows you to set an entirely different configuration based upon the platform, falling back to a default config if no platforms match: @@ -58,7 +59,7 @@ Ionic Angular provides a `Config` provider for accessing the Ionic Config. | | | | --------------- | -------------------------------------------------------------------------------- | | **Description** | Returns a config value as an `any`. Returns `null` if the config is not defined. | -| **Signature** | `get(key: string, fallback?: any) => any` | +| **Signature** | `get(key: string, fallback?: any) => any` | #### Examples @@ -78,7 +79,7 @@ class AppComponent { | | | | --------------- | ------------------------------------------------------------------------------------ | | **Description** | Returns a config value as a `boolean`. Returns `false` if the config is not defined. | -| **Signature** | `getBoolean(key: string, fallback?: boolean) => boolean` | +| **Signature** | `getBoolean(key: string, fallback?: boolean) => boolean` | #### Examples @@ -98,7 +99,7 @@ class AppComponent { | | | | --------------- | ------------------------------------------------------------------------------- | | **Description** | Returns a config value as a `number`. Returns `0` if the config is not defined. | -| **Signature** | `getNumber(key: string, fallback?: number) => number` | +| **Signature** | `getNumber(key: string, fallback?: number) => number` | ## Interfaces @@ -106,41 +107,41 @@ class AppComponent { Below are the config options that Ionic uses. -| Config | Type | Description | -| --------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | -| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | -| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | -| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | -| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | -| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | -| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | -| `backButtonText` | `string` | Overrides the default text in all `` components. | -| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | -| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | -| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | -| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | -| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | -| `menuIcon` | `string` | Overrides the default icon in all `` components. | -| `menuType` | `string` | Overrides the default menu type for all `` components. | -| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | -| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | -| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | -| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | -| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | -| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | -| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | -| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | -| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | -| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | -| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | -| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | -| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | -| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | -| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | -| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | -| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | -| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | -| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | +| Config | Type | Description | +| ------------------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | +| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | +| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | +| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | +| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | +| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | +| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | +| `backButtonText` | `string` | Overrides the default text in all `` components. | +| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | +| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | +| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | +| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | +| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | +| `menuIcon` | `string` | Overrides the default icon in all `` components. | +| `menuType` | `string` | Overrides the default menu type for all `` components. | +| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | +| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | +| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | +| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | +| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | +| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | +| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | +| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | +| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | +| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | +| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | +| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | +| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | +| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | +| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | +| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | +| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | +| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | +| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | diff --git a/docs/developing/config/global/index.md b/docs/developing/config/global/index.md index be83e8eda23..bbfbaa83a71 100644 --- a/docs/developing/config/global/index.md +++ b/docs/developing/config/global/index.md @@ -2,26 +2,25 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; + groupId="global-config" + defaultValue="javascript" + values={[ + { value: 'javascript', label: 'JavaScript' }, + { value: 'angular', label: 'Angular' }, + { value: 'react', label: 'React' }, + { value: 'vue', label: 'Vue' }, + ]} +> + ```javascript title="example.js" window.Ionic = { config: { rippleEffect: false, - mode: 'md', - }, -}; + mode: 'md' + } +} ``` - @@ -39,12 +38,10 @@ import { IonicModule } from '@ionic/angular'; ... }) ``` - The `setupIonicReact` function must be called before rendering any Ionic components (including `IonApp`). - ```tsx title="App.tsx" import { setupIonicReact } from '@ionic/react'; @@ -53,19 +50,18 @@ setupIonicReact({ mode: 'md', }); ``` - ```tsx title="main.ts" + import { IonicVue } from '@ionic/vue'; import { createApp } from 'vue'; - + createApp(App).use(IonicVue, { rippleEffect: false, mode: 'md', }); ``` - - + \ No newline at end of file diff --git a/docs/developing/config/per-component/index.md b/docs/developing/config/per-component/index.md index 28680069d49..64b868a70ee 100644 --- a/docs/developing/config/per-component/index.md +++ b/docs/developing/config/per-component/index.md @@ -2,16 +2,16 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; + groupId="per-component-config" + defaultValue="javascript" + values={[ + { value: 'javascript', label: 'JavaScript' }, + { value: 'angular', label: 'Angular' }, + { value: 'react', label: 'React' }, + { value: 'vue', label: 'Vue' }, + ]} +> + **Not recommended** @@ -19,9 +19,9 @@ values={[ window.Ionic = { config: { // Not recommended when your app requires reactive values - backButtonText: 'Go Back', - }, -}; + backButtonText: 'Go Back' + } +} ``` **Recommended** @@ -31,7 +31,7 @@ window.Ionic = { ``` - @@ -76,7 +75,6 @@ class MyComponent { backButtonText = 'Go Back'; } ``` - @@ -87,7 +85,7 @@ import { setupIonicReact } from '@ionic/react'; setupIonicReact({ // Not recommended when your app requires reactive values - backButtonText: 'Go Back', + backButtonText: 'Go Back' }); ``` @@ -108,7 +106,6 @@ const ExampleComponent = () => { ) } ``` - @@ -117,10 +114,10 @@ const ExampleComponent = () => { ```ts import { IonicVue } from '@ionic/vue'; import { createApp } from 'vue'; - -// Not recommended when your app requires reactive values + + // Not recommended when your app requires reactive values createApp(App).use(IonicVue, { - backButtonText: 'Go Back', + backButtonText: 'Go Back' }); ``` @@ -142,6 +139,5 @@ createApp(App).use(IonicVue, { const backButtonText = ref('Go Back'); ``` - - + \ No newline at end of file diff --git a/docs/developing/config/per-platform-fallback/index.md b/docs/developing/config/per-platform-fallback/index.md index 34d2dd67f05..02a5f27a3c0 100644 --- a/docs/developing/config/per-platform-fallback/index.md +++ b/docs/developing/config/per-platform-fallback/index.md @@ -2,15 +2,15 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; + groupId="per-platform-fallback-config" + defaultValue="angular" + values={[ + { value: 'angular', label: 'Angular' }, + { value: 'react', label: 'React' }, + { value: 'vue', label: 'Vue' }, + ]} +> + ```ts title="app.module.ts" import { isPlatform, IonicModule } from '@ionic/angular'; @@ -34,7 +34,6 @@ const getConfig = () => { ... }); ``` - @@ -44,18 +43,18 @@ import { isPlatform, setupIonicReact } from '@ionic/react'; const getConfig = () => { if (isPlatform('hybrid')) { return { - tabButtonLayout: 'label-hide', - }; + tabButtonLayout: 'label-hide' + } } - + return { - tabButtonLayout: 'icon-top', + tabButtonLayout: 'icon-top' }; }; setupIonicReact(getConfig()); -``` +``` @@ -65,17 +64,16 @@ import { IonicVue, isPlatform } from '@ionic/vue'; const getConfig = () => { if (isPlatform('hybrid')) { return { - tabButtonLayout: 'label-hide', - }; + tabButtonLayout: 'label-hide' + } } - + return { - tabButtonLayout: 'icon-top', + tabButtonLayout: 'icon-top' }; }; createApp(App).use(IonicVue, getConfig()); -``` - +```` - + \ No newline at end of file diff --git a/docs/developing/config/per-platform-overrides/index.md b/docs/developing/config/per-platform-overrides/index.md index 3745855f6da..243cfa9c2fc 100644 --- a/docs/developing/config/per-platform-overrides/index.md +++ b/docs/developing/config/per-platform-overrides/index.md @@ -2,15 +2,15 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; + groupId="per-platform-fallback-config" + defaultValue="angular" + values={[ + { value: 'angular', label: 'Angular' }, + { value: 'react', label: 'React' }, + { value: 'vue', label: 'Vue' }, + ]} +> + ```ts title="app.module.ts" import { isPlatform, IonicModule } from '@ionic/angular'; @@ -37,7 +37,6 @@ const getConfig = () => { ... }); ``` - @@ -60,8 +59,8 @@ const getConfig = () => { }; setupIonicReact(getConfig()); -``` +``` @@ -84,7 +83,6 @@ const getConfig = () => { }; createApp(App).use(IonicVue, getConfig()); -``` - +```` - + \ No newline at end of file diff --git a/docs/developing/config/per-platform/index.md b/docs/developing/config/per-platform/index.md index ef4892aecc7..7d17299d0f8 100644 --- a/docs/developing/config/per-platform/index.md +++ b/docs/developing/config/per-platform/index.md @@ -2,15 +2,15 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; + groupId="per-platform-config" + defaultValue="angular" + values={[ + { value: 'angular', label: 'Angular' }, + { value: 'react', label: 'React' }, + { value: 'vue', label: 'Vue' }, + ]} +> + :::note Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. @@ -31,7 +31,6 @@ import { isPlatform, IonicModule } from '@ionic/angular'; ... }) ``` - @@ -46,7 +45,6 @@ setupIonicReact({ animated: !isPlatform('mobileweb'), }); ``` - @@ -60,7 +58,6 @@ import { IonicVue, isPlatform } from '@ionic/vue'; createApp(App).use(IonicVue, { animated: !isPlatform('mobileweb'), }); -``` - +```` - + \ No newline at end of file diff --git a/docs/developing/hardware-back-button.md b/docs/developing/hardware-back-button.md index 6813f9b4ceb..2f3271613dc 100644 --- a/docs/developing/hardware-back-button.md +++ b/docs/developing/hardware-back-button.md @@ -338,8 +338,8 @@ It is recommended to check whether or not the user is on the root page prior to The table below lists all of the internal hardware back button event handlers that Ionic Framework uses. The `Propagates` column notes whether or not that particular handler tells Ionic Framework to call the next back button handler. -| Handler | Priority | Propagates | Description | -| ---------- | -------- | ---------- | --------------------------------------------------------------------------------------------------------------------------- | +| Handler | Priority | Propagates | Description | +| ---------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | Overlays | 100 | No | Applies to overlay components `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-popover`, and `ion-picker`. | -| Menu | 99 | No | Applies to `ion-menu`. | -| Navigation | 0 | Yes | Applies to routing navigation (i.e. Angular Routing). | +| Menu | 99 | No | Applies to `ion-menu`. | +| Navigation | 0 | Yes | Applies to routing navigation (i.e. Angular Routing). | diff --git a/docs/index.md b/docs/index.md index d25f1c87439..5a5909b1b3e 100644 --- a/docs/index.md +++ b/docs/index.md @@ -34,24 +34,20 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First -

Dive into Ionic beautifully designed UI component library.

 -

Integrate native device plugins, like Bluetooth, Maps, HealthKit, and more.

 diff --git a/docs/layout/css-utilities.md b/docs/layout/css-utilities.md index 05bb0a88aaa..d23ea52b4b4 100644 --- a/docs/layout/css-utilities.md +++ b/docs/layout/css-utilities.md @@ -141,7 +141,8 @@ The float CSS property specifies that an element should be placed along the left src="https://ionicframework.com/docs/img/demos/avatar.svg" height="50px" /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac + vehicula lorem.

float-left

@@ -151,7 +152,8 @@ The float CSS property specifies that an element should be placed along the left height="50px" class="ion-float-left" /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac + vehicula lorem.

float-right

@@ -161,7 +163,8 @@ The float CSS property specifies that an element should be placed along the left height="50px" class="ion-float-right" /> - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem. + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac + vehicula lorem. diff --git a/docs/layout/structure.md b/docs/layout/structure.md index 700e77372fa..5315d0cd9de 100644 --- a/docs/layout/structure.md +++ b/docs/layout/structure.md @@ -34,14 +34,17 @@ import Footer from '@site/static/usage/v7/footer/basic/index.md';
+ ## Tabs Layout A layout consisting of horizontal [tabs](../api/tabs.md) can be used to let the user quickly change between content views. Each tab can contain static content or a navigation stack by using a [router outlet](../api/router-outlet.md) or [nav](../api/nav.md). + import Tabs from '@site/static/usage/v7/tabs/router/index.md'; + ## Menu Layout A standard layout among mobile apps includes the ability to toggle a side [menu](../api/menu.md) by clicking a button or swiping it open from the side. Side menus are generally used for navigation, but they can contain any content. @@ -50,6 +53,7 @@ import Menu from '@site/static/usage/v7/menu/basic/index.md'; + ## Split Pane Layout A [split pane](../api/split-pane.md) layout has a more complex structure because it can combine the previous layouts. It allows for multiple views to be displayed when the viewport is above a specified breakpoint. If the device's screen size is below a certain size, the split pane view will be hidden. diff --git a/docs/native-faq.md b/docs/native-faq.md index a74c967ba41..ceaf06b6d38 100644 --- a/docs/native-faq.md +++ b/docs/native-faq.md @@ -5,9 +5,9 @@ slug: /native/faq # Frequently Asked Question -## What is Capacitor? +## What is Capacitor? -Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library. +Capacitor a native runtime built by the Ionic team that offers web developers the ability to deploy their web apps to a native device. Capacitor also exposing native device capabilities through JavaScript so developers could access features like native location services, filesystem access, or notifications as if they are interacting with any other JavaScript library. ## Permission Issues @@ -17,8 +17,9 @@ If you're using a plugin, it may require adding additional permissions to your n - `NSPhotoLibraryAddUsageDescription` (`Privacy - Photo Library Additions Usage Description`) - `NSPhotoLibraryUsageDescription` (`Privacy - Photo Library Usage Description`) -You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail. +You need to manually add those permissions to the `info.plist` in your native project. Otherwise, calls to the native camera API will fail. + ## Unexpected behaviour -If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved. +If for some reason the plugin does not behave in a way that is unexpected, please [open an issue on our github repo](https://github.com/ionic-team/capacitor-plugins)! Providing a clear issue report along with a reproduction can help get your issue resolved. \ No newline at end of file diff --git a/docs/native.md b/docs/native.md index 13818c296ad..c863908c42f 100644 --- a/docs/native.md +++ b/docs/native.md @@ -23,10 +23,14 @@ import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard'; + Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install the core packages and easily add them to your project. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. All of this is powered by a unified TypeScript API that automatically handles platform differences. While the core features of Capacitor are free and open source, some enterprises might find themselves needing more features or custom third-party integrations. If you need such additional features, check out the [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk). + + + > Looking for older Cordova plugins? Visit their new home at [Awesome Cordova Plugins.](https://danielsogl.gitbook.io/awesome-cordova-plugins/) diff --git a/docs/react.md b/docs/react.md index 20481087345..82da9dfb8be 100644 --- a/docs/react.md +++ b/docs/react.md @@ -127,12 +127,10 @@ $ ionic serve █ -

Use individual components or the complete app experience.

 diff --git a/docs/react/navigation.md b/docs/react/navigation.md index 614bd9e3fa9..c24d363256b 100644 --- a/docs/react/navigation.md +++ b/docs/react/navigation.md @@ -275,15 +275,14 @@ If you have built a web app that uses routing, you likely have used linear routi The following is an example of linear routing in a mobile app: + width="400" + src={useBaseUrl('video/linear-routing-demo.mp4')} + controls +> The application history in this example has the following path: @@ -302,15 +301,14 @@ Non-linear routing means that the view that the user should go back to is not ne The following is an example of non-linear routing: + width="400" + src={useBaseUrl('video/non-linear-routing-demo.mp4')} + controls +> In the example above, we start on the `Originals` tab. Tapping a card brings us to the `Ted Lasso` view within the `Originals` tab. @@ -353,8 +351,8 @@ const App: React.FC = () => { - ; -}; + +} ``` The above routes are considered "shared" because they reuse the `dashboard` piece of the URL. @@ -374,7 +372,7 @@ const App: React.FC = () => ( -); +) const DashboardRouterOutlet: React.FC = () => ( @@ -385,7 +383,7 @@ const DashboardRouterOutlet: React.FC = () => ( -); +) ``` 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 `IonRouterOutlet`. @@ -422,7 +420,15 @@ Let's start by taking a look at our `Tabs` component: ```tsx import { Redirect, Route } from 'react-router-dom'; -import { IonContent, IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react'; +import { + IonContent, + IonIcon, + IonLabel, + IonRouterOutlet, + IonTabBar, + IonTabButton, + IonTabs +} from '@ionic/react'; import { IonReactRouter } from '@ionic/react-router'; import { ellipse, square, triangle } from 'ionicons/icons'; import Tab1 from './pages/Tab1'; @@ -475,7 +481,7 @@ If you have worked with Ionic Framework before, this should feel familiar. We cr 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 @@ -536,15 +542,14 @@ If you find that your tabs need to reference the Settings tab, we recommend maki 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. + width="400" + src={useBaseUrl('video/tabs-account-demo.mp4')} + controls +> **Reusing Views Across Tabs** @@ -554,8 +559,8 @@ Instead, we recommend having routes in each tab that reference the same componen 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 | -| :-------------------------------------------------: | :---------------------------------------------------: | +| Home Tab | Search Tab | +| :------: | :--------: | | | | ## Live Example @@ -629,6 +634,7 @@ type UseIonRouterResult = { The following example shows how to use `useIonRouter`: + ```tsx import { useIonRouter } from '@ionic/react'; @@ -637,12 +643,13 @@ const MyComponent: React.FC = () => { const goToPage = () => { router.push('/my-page', 'root', 'replace'); }; - + ... } ``` + ## More Information For more info on routing in React using React Router, check out their docs at [https://reacttraining.com/react-router/web](https://reacttraining.com/react-router/web). diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md index bb9f77e8cc0..b4121ce03ea 100644 --- a/docs/react/quickstart.md +++ b/docs/react/quickstart.md @@ -235,7 +235,7 @@ import { add } from ‘ionicons/icons’; On our main `IonFab`, we're setting its positioning with the vertical and horizontal attributes. We're also setting the render location to "fixed" with the slot attribute. This will tell `IonFab` to render outside of the scrollable content in `IonContent`. -Now let's wire up a click handler to this. What we want to do is when we click the button, we'll navigate to a new page (which we'll create in a moment). To do this, we'll need to get access to React Router's `useHistory` hook API. Thankfully the `useHistory` hook makes this easy since it can be imported from the react-router package. +Now let's wire up a click handler to this. What we want to do is when we click the button, we'll navigate to a new page (which we'll create in a moment). To do this, we'll need to get access to React Router's `useHistory` hook API. Thankfully the `useHistory` hook makes this easy since it can be imported from the react-router package. ```tsx import { add } from 'ionicons/icons'; diff --git a/docs/reference/browser-support.md b/docs/reference/browser-support.md index 12a79e474b5..fe10d28861b 100644 --- a/docs/reference/browser-support.md +++ b/docs/reference/browser-support.md @@ -39,8 +39,9 @@ Because Ionic is based on web technologies, it works just as well on desktop bro | Browser | Ionic v7 | Ionic v6 | Ionic v5 | Ionic v4 | | :---------: | :------: | :------: | :------: | :------: | -| **Chrome** | 79+ | 60+ | ✔ | ✔ | -| **Safari** | 14+ | 13+ | ✔ | ✔ | -| **Edge** | 79+ | 79+ | 79+ | ✔ | -| **Firefox** | 70+ | 63+ | ✔ | ✔ | -| **IE 11** | **X** | **X** | **X** | **X** | +| **Chrome** | 79+ | 60+ | ✔ | ✔ | +| **Safari** | 14+ | 13+ | ✔ | ✔ | +| **Edge** | 79+ | 79+ | 79+ | ✔ | +| **Firefox** | 70+ | 63+ | ✔ | ✔ | +| **IE 11** | **X** | **X** | **X** | **X** | + diff --git a/docs/reference/support.md b/docs/reference/support.md index 76c8b2306e1..c21749e5a4f 100644 --- a/docs/reference/support.md +++ b/docs/reference/support.md @@ -20,15 +20,15 @@ Given the reality of time and resource constraints as well as the desire to keep The current status of each Ionic Framework version is: -| Version | Status | Released | Maintenance Ends | Ext. Support Ends | -| :-----: | :------------: | :----------: | :--------------: | :---------------: | -| V7 | **Active** | Mar 29, 2023 | TBD | TBD | -| V6 | Maintenance | Dec 8, 2021 | Sep 29, 2023 | Mar 29, 2024 | -| V5 | End of Support | Feb 11, 2020 | June 8, 2022 | Dec 8, 2022 | -| V4 | End of Support | Jan 23, 2019 | Aug 11, 2020 | Sept 30, 2022 | -| V3 | End of Support | Apr 5, 2017 | Oct 30, 2019 | Aug 11, 2020 | -| V2 | End of Support | Jan 25, 2017 | Apr 5, 2017 | Apr 5, 2017 | -| V1 | End of Support | May 12, 2015 | Jan 25, 2017 | Jan 25, 2017 | +| Version | Status | Released | Maintenance Ends | Ext. Support Ends | +| :-----: | :-------------------: | :----------: | :--------------: | :---------------: | +| V7 | **Active** | Mar 29, 2023 | TBD | TBD | +| V6 | Maintenance | Dec 8, 2021 | Sep 29, 2023 | Mar 29, 2024 | +| V5 | End of Support | Feb 11, 2020 | June 8, 2022 | Dec 8, 2022 | +| V4 | End of Support | Jan 23, 2019 | Aug 11, 2020 | Sept 30, 2022 | +| V3 | End of Support | Apr 5, 2017 | Oct 30, 2019 | Aug 11, 2020 | +| V2 | End of Support | Jan 25, 2017 | Apr 5, 2017 | Apr 5, 2017 | +| V1 | End of Support | May 12, 2015 | Jan 25, 2017 | Jan 25, 2017 | - **Maintenance**: Only critical bug and security fixes. No major feature improvements. - **Extended Support**: For teams and organizations that require additional long term support, Ionic has extended support options available. To learn more, see our [Enterprise offerings](https://ionicframework.com/enterprise). @@ -43,11 +43,11 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo | Framework | Minimum Angular Version | Maximum Angular Version | TypeScript | | :-------: | :---------------------: | :---------------------: | :--------: | -| v7 | v14 | v15.x^ | 4.6+ | -| v6 | v12 | v15.x^ | 4.0+ | -| v5 | v8.2 | v12.x | 3.5+ | -| v4 | v8.2 | v11.x | 3.5+ | -| v3 | v5.2.11 | v5.2.11 | 2.6.2 | +| v7 | v14 | v15.x^ | 4.6+ | +| v6 | v12 | v15.x^ | 4.0+ | +| v5 | v8.2 | v12.x | 3.5+ | +| v4 | v8.2 | v11.x | 3.5+ | +| v3 | v5.2.11 | v5.2.11 | 2.6.2 | > ^ Angular 14.x supported starting in Ionic v6.1.9. Angular 15.x supported starting in Ionic v6.3.6. @@ -61,18 +61,18 @@ Note that later versions of Ionic do not support iOS 13; see [mobile support tab | Framework | Required React Version | TypeScript | | :-------: | :--------------------: | :--------: | -| v7 | v17+ | 3.7+ | -| v6 | v17+ | 3.7+ | -| v5 | v16.8+ | 3.7+ | -| v4 | v16.8+ | 3.7+ | +| v7 | v17+ | 3.7+ | +| v6 | v17+ | 3.7+ | +| v5 | v16.8+ | 3.7+ | +| v4 | v16.8+ | 3.7+ | #### Ionic Vue | Framework | Required Vue Version | TypeScript | | :-------: | :------------------: | :--------: | -| v7 | v3.0.6+ | 3.9+ | -| v6 | v3.0.6+ | 3.9+ | -| v5 | v3.0+ | 3.9+ | +| v7 | v3.0.6+ | 3.9+ | +| v6 | v3.0.6+ | 3.9+ | +| v5 | v3.0+ | 3.9+ | ### Native Bridges diff --git a/docs/updating/6-0.md b/docs/updating/6-0.md index 7c70f0b8d22..073705c7540 100644 --- a/docs/updating/6-0.md +++ b/docs/updating/6-0.md @@ -58,7 +58,6 @@ npm install @ionic/react@6 @ionic/react-router@6 4. Import and call `setupIonicReact` in your `App` component file. If you are also using `setupConfig`, pass your config to `setupIonicReact` instead: **Before** - ```tsx title="App.tsx" import { setupConfig } from '@ionic/react'; @@ -70,7 +69,6 @@ setupConfig({ ``` **After** - ```tsx title="App.tsx" import { setupIonicReact } from '@ionic/react'; @@ -90,13 +88,11 @@ See the [React Config Documentation](../developing/config) for more examples. 5. Update all controller imports from `@ionic/core` to `@ionic/core/components`. As an example, here is a migration for `menuController`: **Before** - ```tsx import { menuController } from '@ionic/core'; ``` **After** - ```tsx import { menuController } from '@ionic/core/components'; ``` @@ -156,7 +152,6 @@ See the [Testing section below](#testing) for more information. 8. Rename any overlay event listeners to use the new format: **Before** - ```html - ... + + ... + ``` **After** - ```html - ... + + ... + ``` @@ -227,7 +223,6 @@ This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `io 10. Additional routes inside of tabs should be re-written as sibling routes instead of child routes: **Before** - ```ts const routes: Array = [ { @@ -266,12 +261,11 @@ const routes: Array = [ ``` **After** - ```ts const routes: Array = [ { path: '/', - redirect: '/tabs/tab1', + redirect: '/tabs/tab1' }, { path: '/tabs/', @@ -279,27 +273,27 @@ const routes: Array = [ children: [ { path: '', - redirect: 'tab1', + redirect: 'tab1' }, { path: 'tab1', - component: () => import('@/views/Tab1.vue'), + component: () => import('@/views/Tab1.vue') }, { path: 'tab1/view', - component: () => import('@/views/Tab1View.vue'), + component: () => import('@/views/Tab1View.vue') }, { path: 'tab2', - component: () => import('@/views/Tab2.vue'), + component: () => import('@/views/Tab2.vue') }, { path: 'tab3', - component: () => import('@/views/Tab3.vue'), - }, - ], - }, -]; + component: () => import('@/views/Tab3.vue') + } + ] + } +] ``` ### Core @@ -341,26 +335,24 @@ Ensure `null` is not passed in as a value to the `placeholder` property. We reco `ion-modal` now uses the Shadow DOM. Update any styles targeting the internals of `ion-modal` to use either the [ion-modal CSS Variables](../api/modal#css-custom-properties) or the [ion-modal CSS Shadow Parts](../api/modal#css-shadow-parts): **Before** - ```css ion-modal .modal-wrapper { - ...; + ... } ion-modal ion-backdrop { - ...; + ... } ``` **After** - ```css ion-modal::part(content) { - ...; + ... } ion-modal::part(backdrop) { - ...; + ... } ``` @@ -368,35 +360,34 @@ ion-modal::part(backdrop) { `ion-popover` now uses the Shadow DOM. Update any styles targeting the internals of `ion-popover` to use either [ion-popover CSS Variables](../api/popover#css-custom-properties) or the [ion-popover CSS Shadow Parts](../api/popover#css-shadow-parts): -**Before** +**Before** ```css ion-popover .popover-arrow { - ...; + ... } ion-popover ion-backdrop { - ...; + ... } ion-popover .popover-content { - ...; + ... } ``` **After** - ```css ion-popover::part(arrow) { - ...; + ... } ion-popover::part(backdrop) { - ...; + ... } ion-popover::part(content) { - ...; + ... } ``` @@ -426,6 +417,7 @@ Safari >=13 iOS >=13 ``` + ### Testing Ionic 6 now ships as ES Modules. ES Modules are supported in all major browsers and bring developer experience and code maintenance improvements. Developers testing with Jest will need to update their Jest configuration as Jest does not have full support for ES Modules as of Jest 27. @@ -476,3 +468,4 @@ If you are still running into issues, here are a couple things to try: Be sure to look at the [Ionic 6 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md). There were several changes to default property and CSS Variable values that developers may need to be aware of. Only the breaking changes that required user action are listed on this page. If you need help upgrading, please post a thread on the [Ionic Forum](https://forum.ionicframework.com/). + diff --git a/docs/vue/navigation.md b/docs/vue/navigation.md index 63769deb59b..4ad77014489 100644 --- a/docs/vue/navigation.md +++ b/docs/vue/navigation.md @@ -240,15 +240,14 @@ If you have built a web app that uses routing, you likely have used linear routi The following is an example of linear routing in a mobile app: + width="400" + src={useBaseUrl('video/linear-routing-demo.mp4')} + controls +> The application history in this example has the following path: @@ -267,15 +266,14 @@ Non-linear routing means that the view that the user should go back to is not ne The following is an example of non-linear routing: + width="400" + src={useBaseUrl('video/non-linear-routing-demo.mp4')} + controls +> In the example above, we start on the `Originals` tab. Tapping a card brings us to the `Ted Lasso` view within the `Originals` tab. @@ -462,7 +460,7 @@ If you have worked with Ionic Framework before, this should feel familiar. We cr 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 @@ -521,15 +519,14 @@ If you find that your tabs need to reference the Settings tab, we recommend maki 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. + width="400" + src={useBaseUrl('video/tabs-account-demo.mp4')} + controls +> **Reusing Views Across Tabs** @@ -539,8 +536,8 @@ Instead, we recommend having routes in each tab that reference the same componen 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 | -| :-------------------------------------------------: | :---------------------------------------------------: | +| Home Tab | Search Tab | +| :------: | :--------: | | | | ## Components diff --git a/docs/vue/pwa.md b/docs/vue/pwa.md index b17db3e2ea2..7e85935bd9f 100644 --- a/docs/vue/pwa.md +++ b/docs/vue/pwa.md @@ -24,13 +24,16 @@ npm install -D vite-plugin-pwa Next, update your `vite.config.js` or `vite.config.ts` file and add `vite-plugin-pwa`: ```javascript -import { defineConfig } from 'vite'; -import vue from '@vitejs/plugin-vue'; -import { VitePWA } from 'vite-plugin-pwa'; +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' +import { VitePWA } from 'vite-plugin-pwa' export default defineConfig({ - plugins: [vue(), VitePWA({ registerType: 'autoUpdate' })], -}); + plugins: [ + vue(), + VitePWA({ registerType: 'autoUpdate' }) + ], +}) ``` This minimal configuration allows your application to generate the Web Application Manifest and Service Worker on build. diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md index 16a4ca28556..bf6c36e621d 100644 --- a/docs/vue/quickstart.md +++ b/docs/vue/quickstart.md @@ -102,7 +102,7 @@ Let's break it down, starting with the imports. ```tsx ``` @@ -289,19 +289,7 @@ For brevity, we are excluding repeating parts of our component, like the functio ``` @@ -338,22 +326,7 @@ Let's look at another component from Ionic Framework, FAB. Floating Action Butto ``` diff --git a/docs/vue/slides.md b/docs/vue/slides.md index 1ee72d337bc..854c845d6d0 100644 --- a/docs/vue/slides.md +++ b/docs/vue/slides.md @@ -433,7 +433,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper Vu | isBeginning() | Use the `isBeginning` property instead. | | isEnd() | Use the `isEnd` property instead. | | length() | Use the `slides` property instead. (i.e swiperRef.slides.length) | -| lockSwipeToNext() | Use the `allowSlideNext` property instead. | +| lockSwipeToNext() | Use the `allowSlideNext` property instead. | | lockSwipeToPrev() | Use the `allowSlidePrev` property instead. | | lockSwipes() | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. | | startAutoplay() | Use the `autoplay` property instead. | diff --git a/docs/vue/your-first-app.md b/docs/vue/your-first-app.md index c792cb40193..006d719f400 100644 --- a/docs/vue/your-first-app.md +++ b/docs/vue/your-first-app.md @@ -168,7 +168,7 @@ Next, remove the `ExploreContainer` node from the HTML markup in the `template`. ``` -We'll replace it with a [floating action button](https://ionicframework.com/docs/api/fab) (FAB). First, update the imports within the ` diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md index 93bc6b09b7f..21189b83ce7 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_css.md @@ -10,15 +10,15 @@ ion-accordion.accordion-expanded { margin: 16px auto; } -ion-accordion.accordion-collapsing ion-item[slot='header'], -ion-accordion.accordion-collapsed ion-item[slot='header'] { +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'] { +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); } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md index 3b3c86763c1..c0da98e5ee8 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/angular/example_component_html.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md index 7fac4c977d1..32e5cc12ce2 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/index.md @@ -12,8 +12,8 @@ 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/v6/accordion/customization/advanced-expansion-styles/javascript.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/javascript.md index 5076fe510e5..863d92d374f 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/javascript.md +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/javascript.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
@@ -32,14 +38,14 @@ margin: 16px auto; } - ion-accordion.accordion-collapsing ion-item[slot='header'], - ion-accordion.accordion-collapsed ion-item[slot='header'] { + 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'] { + 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/v6/accordion/customization/advanced-expansion-styles/react/main_css.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_css.md index 93bc6b09b7f..21189b83ce7 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_css.md +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/react/main_css.md @@ -10,15 +10,15 @@ ion-accordion.accordion-expanded { margin: 16px auto; } -ion-accordion.accordion-collapsing ion-item[slot='header'], -ion-accordion.accordion-collapsed ion-item[slot='header'] { +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'] { +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); } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/accordion/customization/advanced-expansion-styles/vue.md b/static/usage/v6/accordion/customization/advanced-expansion-styles/vue.md index 5e8e8da6925..738797ba44f 100644 --- a/static/usage/v6/accordion/customization/advanced-expansion-styles/vue.md +++ b/static/usage/v6/accordion/customization/advanced-expansion-styles/vue.md @@ -5,33 +5,44 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
@@ -44,18 +55,18 @@ 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'] { + + 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'] { + + 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/v6/accordion/customization/expansion-styles/angular.md b/static/usage/v6/accordion/customization/expansion-styles/angular.md index 1be81366c58..39a3f97b6be 100644 --- a/static/usage/v6/accordion/customization/expansion-styles/angular.md +++ b/static/usage/v6/accordion/customization/expansion-styles/angular.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v6/accordion/customization/expansion-styles/index.md b/static/usage/v6/accordion/customization/expansion-styles/index.md index f44265846f5..1b08eaa20c5 100644 --- a/static/usage/v6/accordion/customization/expansion-styles/index.md +++ b/static/usage/v6/accordion/customization/expansion-styles/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/customization/expansion-styles/javascript.md b/static/usage/v6/accordion/customization/expansion-styles/javascript.md index 1be81366c58..39a3f97b6be 100644 --- a/static/usage/v6/accordion/customization/expansion-styles/javascript.md +++ b/static/usage/v6/accordion/customization/expansion-styles/javascript.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v6/accordion/customization/expansion-styles/react.md b/static/usage/v6/accordion/customization/expansion-styles/react.md index d24cf600956..1067c80acb7 100644 --- a/static/usage/v6/accordion/customization/expansion-styles/react.md +++ b/static/usage/v6/accordion/customization/expansion-styles/react.md @@ -1,6 +1,11 @@ ```tsx import React from 'react'; -import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +import { + IonAccordion, + IonAccordionGroup, + IonItem, + IonLabel +} from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v6/accordion/customization/expansion-styles/vue.md b/static/usage/v6/accordion/customization/expansion-styles/vue.md index 05f22d0d2ff..a6bcdcbde5e 100644 --- a/static/usage/v6/accordion/customization/expansion-styles/vue.md +++ b/static/usage/v6/accordion/customization/expansion-styles/vue.md @@ -5,33 +5,44 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
diff --git a/static/usage/v6/accordion/customization/icons/index.md b/static/usage/v6/accordion/customization/icons/index.md index 0aea3f5df3d..691d4b933b1 100644 --- a/static/usage/v6/accordion/customization/icons/index.md +++ b/static/usage/v6/accordion/customization/icons/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/customization/icons/javascript.md b/static/usage/v6/accordion/customization/icons/javascript.md index 7fd8a091cc8..7d937e511de 100644 --- a/static/usage/v6/accordion/customization/icons/javascript.md +++ b/static/usage/v6/accordion/customization/icons/javascript.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v6/accordion/customization/icons/react.md b/static/usage/v6/accordion/customization/icons/react.md index 2b269c172ed..cca6fbf0af1 100644 --- a/static/usage/v6/accordion/customization/icons/react.md +++ b/static/usage/v6/accordion/customization/icons/react.md @@ -1,6 +1,11 @@ ```tsx import React from 'react'; -import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +import { + IonAccordion, + IonAccordionGroup, + IonItem, + IonLabel +} from '@ionic/react'; import { caretDownCircle } from 'ionicons/icons'; function Example() { diff --git a/static/usage/v6/accordion/customization/icons/vue.md b/static/usage/v6/accordion/customization/icons/vue.md index 453e9963a89..760bab7520b 100644 --- a/static/usage/v6/accordion/customization/icons/vue.md +++ b/static/usage/v6/accordion/customization/icons/vue.md @@ -5,38 +5,49 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v6/accordion/customization/theming/angular/example_component_html.md b/static/usage/v6/accordion/customization/theming/angular/example_component_html.md index 5efdf7b71f9..9af8534259c 100644 --- a/static/usage/v6/accordion/customization/theming/angular/example_component_html.md +++ b/static/usage/v6/accordion/customization/theming/angular/example_component_html.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v6/accordion/customization/theming/angular/global_css.md b/static/usage/v6/accordion/customization/theming/angular/global_css.md index 141236c6633..6054219017a 100644 --- a/static/usage/v6/accordion/customization/theming/angular/global_css.md +++ b/static/usage/v6/accordion/customization/theming/angular/global_css.md @@ -1,9 +1,9 @@ ```css :root { --ion-color-rose: #fecdd3; - --ion-color-rose-rgb: 254, 205, 211; + --ion-color-rose-rgb: 254,205,211; --ion-color-rose-contrast: #000000; - --ion-color-rose-contrast-rgb: 0, 0, 0; + --ion-color-rose-contrast-rgb: 0,0,0; --ion-color-rose-shade: #e0b4ba; --ion-color-rose-tint: #fed2d7; } @@ -17,7 +17,7 @@ --ion-color-tint: var(--ion-color-rose-tint); } -div[slot='content'] { - background: rgba(var(--ion-color-rose-rgb), 0.25); +div[slot="content"] { + background: rgba(var(--ion-color-rose-rgb), 0.25) } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/accordion/customization/theming/index.md b/static/usage/v6/accordion/customization/theming/index.md index f184a84848b..eba76679a03 100644 --- a/static/usage/v6/accordion/customization/theming/index.md +++ b/static/usage/v6/accordion/customization/theming/index.md @@ -11,8 +11,8 @@ 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/v6/accordion/customization/theming/javascript.md b/static/usage/v6/accordion/customization/theming/javascript.md index 179bf5d51c0..d35f6dbb6b9 100644 --- a/static/usage/v6/accordion/customization/theming/javascript.md +++ b/static/usage/v6/accordion/customization/theming/javascript.md @@ -4,32 +4,38 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v6/accordion/customization/theming/react/main_css.md b/static/usage/v6/accordion/customization/theming/react/main_css.md index 141236c6633..6054219017a 100644 --- a/static/usage/v6/accordion/customization/theming/react/main_css.md +++ b/static/usage/v6/accordion/customization/theming/react/main_css.md @@ -1,9 +1,9 @@ ```css :root { --ion-color-rose: #fecdd3; - --ion-color-rose-rgb: 254, 205, 211; + --ion-color-rose-rgb: 254,205,211; --ion-color-rose-contrast: #000000; - --ion-color-rose-contrast-rgb: 0, 0, 0; + --ion-color-rose-contrast-rgb: 0,0,0; --ion-color-rose-shade: #e0b4ba; --ion-color-rose-tint: #fed2d7; } @@ -17,7 +17,7 @@ --ion-color-tint: var(--ion-color-rose-tint); } -div[slot='content'] { - background: rgba(var(--ion-color-rose-rgb), 0.25); +div[slot="content"] { + background: rgba(var(--ion-color-rose-rgb), 0.25) } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/accordion/customization/theming/react/main_tsx.md b/static/usage/v6/accordion/customization/theming/react/main_tsx.md index ecc51a9e15b..348576ae0fe 100644 --- a/static/usage/v6/accordion/customization/theming/react/main_tsx.md +++ b/static/usage/v6/accordion/customization/theming/react/main_tsx.md @@ -1,6 +1,11 @@ ```tsx import React from 'react'; -import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +import { + IonAccordion, + IonAccordionGroup, + IonItem, + IonLabel +} from '@ionic/react'; import './main.css'; diff --git a/static/usage/v6/accordion/customization/theming/vue.md b/static/usage/v6/accordion/customization/theming/vue.md index c049c4b89d8..cf55542e739 100644 --- a/static/usage/v6/accordion/customization/theming/vue.md +++ b/static/usage/v6/accordion/customization/theming/vue.md @@ -5,51 +5,62 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v6/accordion/disable-group/index.md b/static/usage/v6/accordion/disable-group/index.md index 1c620df74c6..aaad754781f 100644 --- a/static/usage/v6/accordion/disable-group/index.md +++ b/static/usage/v6/accordion/disable-group/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/disable/group/index.md b/static/usage/v6/accordion/disable/group/index.md index 43e4daae2ed..beb29908e79 100644 --- a/static/usage/v6/accordion/disable/group/index.md +++ b/static/usage/v6/accordion/disable/group/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/disable/individual/index.md b/static/usage/v6/accordion/disable/individual/index.md index 1c866a3d0bc..2323a1b3b15 100644 --- a/static/usage/v6/accordion/disable/individual/index.md +++ b/static/usage/v6/accordion/disable/individual/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/listen-changes/index.md b/static/usage/v6/accordion/listen-changes/index.md index 4c3b1d9b0e8..481f9f47795 100644 --- a/static/usage/v6/accordion/listen-changes/index.md +++ b/static/usage/v6/accordion/listen-changes/index.md @@ -8,8 +8,8 @@ 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/v6/accordion/multiple/index.md b/static/usage/v6/accordion/multiple/index.md index ca3d3552876..6a56c3fe4fa 100644 --- a/static/usage/v6/accordion/multiple/index.md +++ b/static/usage/v6/accordion/multiple/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/readonly/group/angular.md b/static/usage/v6/accordion/readonly/group/angular.md index 4ebf8c55e4e..99c084f8064 100644 --- a/static/usage/v6/accordion/readonly/group/angular.md +++ b/static/usage/v6/accordion/readonly/group/angular.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v6/accordion/readonly/group/index.md b/static/usage/v6/accordion/readonly/group/index.md index fcfa1291aab..263e18eb79d 100644 --- a/static/usage/v6/accordion/readonly/group/index.md +++ b/static/usage/v6/accordion/readonly/group/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/readonly/group/javascript.md b/static/usage/v6/accordion/readonly/group/javascript.md index d511ea5ff0b..27f216fb4f9 100644 --- a/static/usage/v6/accordion/readonly/group/javascript.md +++ b/static/usage/v6/accordion/readonly/group/javascript.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v6/accordion/readonly/group/react.md b/static/usage/v6/accordion/readonly/group/react.md index 2f26afde9ea..5383b732d96 100644 --- a/static/usage/v6/accordion/readonly/group/react.md +++ b/static/usage/v6/accordion/readonly/group/react.md @@ -1,6 +1,11 @@ ```tsx import React from 'react'; -import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +import { + IonAccordion, + IonAccordionGroup, + IonItem, + IonLabel +} from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v6/accordion/readonly/group/vue.md b/static/usage/v6/accordion/readonly/group/vue.md index 0de1be3fe91..aa6a662a802 100644 --- a/static/usage/v6/accordion/readonly/group/vue.md +++ b/static/usage/v6/accordion/readonly/group/vue.md @@ -5,33 +5,44 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
diff --git a/static/usage/v6/accordion/readonly/individual/angular.md b/static/usage/v6/accordion/readonly/individual/angular.md index 94013b9d07d..7f9f8f5bb2e 100644 --- a/static/usage/v6/accordion/readonly/individual/angular.md +++ b/static/usage/v6/accordion/readonly/individual/angular.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion (Readonly) -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v6/accordion/readonly/individual/index.md b/static/usage/v6/accordion/readonly/individual/index.md index 6745332c516..6a5f0d991f8 100644 --- a/static/usage/v6/accordion/readonly/individual/index.md +++ b/static/usage/v6/accordion/readonly/individual/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/accordion/readonly/individual/javascript.md b/static/usage/v6/accordion/readonly/individual/javascript.md index e1f78d726db..eec083da61a 100644 --- a/static/usage/v6/accordion/readonly/individual/javascript.md +++ b/static/usage/v6/accordion/readonly/individual/javascript.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion (Readonly) -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v6/accordion/readonly/individual/react.md b/static/usage/v6/accordion/readonly/individual/react.md index a6d28a427cd..7e94d274b32 100644 --- a/static/usage/v6/accordion/readonly/individual/react.md +++ b/static/usage/v6/accordion/readonly/individual/react.md @@ -1,6 +1,11 @@ ```tsx import React from 'react'; -import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +import { + IonAccordion, + IonAccordionGroup, + IonItem, + IonLabel +} from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v6/accordion/readonly/individual/vue.md b/static/usage/v6/accordion/readonly/individual/vue.md index b9a5daac451..2e02ebd3679 100644 --- a/static/usage/v6/accordion/readonly/individual/vue.md +++ b/static/usage/v6/accordion/readonly/individual/vue.md @@ -5,33 +5,44 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion (Readonly) -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
diff --git a/static/usage/v6/accordion/toggle/index.md b/static/usage/v6/accordion/toggle/index.md index 3e60958f8ef..fb5331bf14b 100644 --- a/static/usage/v6/accordion/toggle/index.md +++ b/static/usage/v6/accordion/toggle/index.md @@ -8,8 +8,8 @@ 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/v6/action-sheet/basic/index.md b/static/usage/v6/action-sheet/basic/index.md index 5c64bdf12bf..25da44bf4c6 100644 --- a/static/usage/v6/action-sheet/basic/index.md +++ b/static/usage/v6/action-sheet/basic/index.md @@ -12,8 +12,8 @@ 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/v6/action-sheet/theming/css-properties/index.md b/static/usage/v6/action-sheet/theming/css-properties/index.md index d45c2ef54b3..7d9eebab14a 100644 --- a/static/usage/v6/action-sheet/theming/css-properties/index.md +++ b/static/usage/v6/action-sheet/theming/css-properties/index.md @@ -12,8 +12,8 @@ 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/v6/action-sheet/theming/styling/index.md b/static/usage/v6/action-sheet/theming/styling/index.md index b7059e637bf..ef07b833a7c 100644 --- a/static/usage/v6/action-sheet/theming/styling/index.md +++ b/static/usage/v6/action-sheet/theming/styling/index.md @@ -12,8 +12,8 @@ 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/v6/alert/buttons/angular/example_component_html.md b/static/usage/v6/alert/buttons/angular/example_component_html.md index 172b041a469..5cddcd596ed 100644 --- a/static/usage/v6/alert/buttons/angular/example_component_html.md +++ b/static/usage/v6/alert/buttons/angular/example_component_html.md @@ -2,4 +2,4 @@ Click Me

{{ handlerMessage }}

{{ roleMessage }}

-``` +``` \ No newline at end of file diff --git a/static/usage/v6/alert/buttons/index.md b/static/usage/v6/alert/buttons/index.md index acbb428bf17..d0c16fbccaa 100644 --- a/static/usage/v6/alert/buttons/index.md +++ b/static/usage/v6/alert/buttons/index.md @@ -8,9 +8,9 @@ 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/v6/alert/buttons/javascript.md b/static/usage/v6/alert/buttons/javascript.md index 1de6de7fca4..9550a72ca43 100644 --- a/static/usage/v6/alert/buttons/javascript.md +++ b/static/usage/v6/alert/buttons/javascript.md @@ -14,17 +14,13 @@ { text: 'Cancel', role: 'cancel', - handler: () => { - handlerOutput.innerText = 'Alert canceled'; - }, + handler: () => { handlerOutput.innerText = 'Alert canceled'; } }, { text: 'OK', role: 'confirm', - handler: () => { - handlerOutput.innerText = 'Alert confirmed'; - }, - }, + handler: () => { handlerOutput.innerText = 'Alert confirmed'; } + } ]; document.body.appendChild(alert); diff --git a/static/usage/v6/alert/customization/angular/global_css.md b/static/usage/v6/alert/customization/angular/global_css.md index c84c1456e58..c4d1f859c34 100644 --- a/static/usage/v6/alert/customization/angular/global_css.md +++ b/static/usage/v6/alert/customization/angular/global_css.md @@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm { } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) } .ios button.alert-button.alert-button-cancel { @@ -30,4 +30,4 @@ button.alert-button.alert-button-confirm { border-bottom-right-radius: 13px; border-top-right-radius: 13px; } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/alert/customization/index.md b/static/usage/v6/alert/customization/index.md index b2077daa8db..4da97de4af4 100644 --- a/static/usage/v6/alert/customization/index.md +++ b/static/usage/v6/alert/customization/index.md @@ -11,9 +11,9 @@ 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/v6/alert/customization/javascript.md b/static/usage/v6/alert/customization/javascript.md index f14e68e1d95..f6280b08e3d 100644 --- a/static/usage/v6/alert/customization/javascript.md +++ b/static/usage/v6/alert/customization/javascript.md @@ -9,12 +9,12 @@ alert.buttons = [ { text: 'No', - cssClass: 'alert-button-cancel', + cssClass: 'alert-button-cancel' }, { text: 'Yes', - cssClass: 'alert-button-confirm', - }, + cssClass: 'alert-button-confirm' + } ]; document.body.appendChild(alert); @@ -41,7 +41,7 @@ } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) } .ios button.alert-button.alert-button-cancel { diff --git a/static/usage/v6/alert/customization/react/main_css.md b/static/usage/v6/alert/customization/react/main_css.md index c84c1456e58..c4d1f859c34 100644 --- a/static/usage/v6/alert/customization/react/main_css.md +++ b/static/usage/v6/alert/customization/react/main_css.md @@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm { } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) } .ios button.alert-button.alert-button-cancel { @@ -30,4 +30,4 @@ button.alert-button.alert-button-confirm { border-bottom-right-radius: 13px; border-top-right-radius: 13px; } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/alert/inputs/radios/angular/example_component_html.md b/static/usage/v6/alert/inputs/radios/angular/example_component_html.md index 183dd98719d..e484d6c912d 100644 --- a/static/usage/v6/alert/inputs/radios/angular/example_component_html.md +++ b/static/usage/v6/alert/inputs/radios/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` +``` \ No newline at end of file diff --git a/static/usage/v6/alert/inputs/radios/index.md b/static/usage/v6/alert/inputs/radios/index.md index 4c7a4265cd1..d92d2862601 100644 --- a/static/usage/v6/alert/inputs/radios/index.md +++ b/static/usage/v6/alert/inputs/radios/index.md @@ -8,9 +8,9 @@ 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/v6/alert/inputs/radios/javascript.md b/static/usage/v6/alert/inputs/radios/javascript.md index 2992e1d25c4..341bdf8b1eb 100644 --- a/static/usage/v6/alert/inputs/radios/javascript.md +++ b/static/usage/v6/alert/inputs/radios/javascript.md @@ -10,18 +10,18 @@ { label: 'Red', type: 'radio', - value: 'red', + value: 'red' }, { label: 'Blue', type: 'radio', - value: 'blue', + value: 'blue' }, { label: 'Green', type: 'radio', - value: 'green', - }, + value: 'green' + } ]; document.body.appendChild(alert); diff --git a/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md index 183dd98719d..e484d6c912d 100644 --- a/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md +++ b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` +``` \ No newline at end of file diff --git a/static/usage/v6/alert/inputs/text-inputs/index.md b/static/usage/v6/alert/inputs/text-inputs/index.md index 2a942543ac1..1e70ed5db98 100644 --- a/static/usage/v6/alert/inputs/text-inputs/index.md +++ b/static/usage/v6/alert/inputs/text-inputs/index.md @@ -8,9 +8,9 @@ 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/v6/alert/inputs/text-inputs/javascript.md b/static/usage/v6/alert/inputs/text-inputs/javascript.md index 21d36197c4a..84f96bf5f8d 100644 --- a/static/usage/v6/alert/inputs/text-inputs/javascript.md +++ b/static/usage/v6/alert/inputs/text-inputs/javascript.md @@ -8,24 +8,24 @@ alert.buttons = ['OK']; alert.inputs = [ { - placeholder: 'Name', + placeholder: 'Name' }, { placeholder: 'Nickname (max 8 characters)', attributes: { - maxlength: 8, - }, + maxlength: 8 + } }, { type: 'number', placeholder: 'Age', min: 1, - max: 100, + max: 100 }, { type: 'textarea', - placeholder: 'A little about yourself', - }, + placeholder: 'A little about yourself' + } ]; document.body.appendChild(alert); diff --git a/static/usage/v6/alert/presenting/controller/angular/example_component_html.md b/static/usage/v6/alert/presenting/controller/angular/example_component_html.md index 183dd98719d..e484d6c912d 100644 --- a/static/usage/v6/alert/presenting/controller/angular/example_component_html.md +++ b/static/usage/v6/alert/presenting/controller/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` +``` \ No newline at end of file diff --git a/static/usage/v6/alert/presenting/controller/index.md b/static/usage/v6/alert/presenting/controller/index.md index 4828455359c..de4bf3866ef 100644 --- a/static/usage/v6/alert/presenting/controller/index.md +++ b/static/usage/v6/alert/presenting/controller/index.md @@ -8,9 +8,9 @@ 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/v6/avatar/chip/vue.md b/static/usage/v6/avatar/chip/vue.md index c872bb48de3..8ded7586040 100644 --- a/static/usage/v6/avatar/chip/vue.md +++ b/static/usage/v6/avatar/chip/vue.md @@ -13,7 +13,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar, IonChip, IonLabel }, + components: { IonAvatar, IonChip, IonLabel } }); ``` diff --git a/static/usage/v6/avatar/item/vue.md b/static/usage/v6/avatar/item/vue.md index 5a9ddea4499..315af034426 100644 --- a/static/usage/v6/avatar/item/vue.md +++ b/static/usage/v6/avatar/item/vue.md @@ -13,7 +13,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar, IonItem, IonLabel }, + components: { IonAvatar, IonItem, IonLabel } }); ``` diff --git a/static/usage/v6/avatar/theming/css-properties/index.md b/static/usage/v6/avatar/theming/css-properties/index.md index 6ff5e75617a..4ff0ecd1679 100644 --- a/static/usage/v6/avatar/theming/css-properties/index.md +++ b/static/usage/v6/avatar/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/avatar/theming/css-properties/react/main_tsx.md b/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md index 180b8998a3f..f04d7f8fbe3 100644 --- a/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md @@ -1,3 +1,4 @@ + ```tsx import React from 'react'; import { IonAvatar } from '@ionic/react'; diff --git a/static/usage/v6/avatar/theming/css-properties/vue.md b/static/usage/v6/avatar/theming/css-properties/vue.md index 32237336a1c..affb7ccdecb 100644 --- a/static/usage/v6/avatar/theming/css-properties/vue.md +++ b/static/usage/v6/avatar/theming/css-properties/vue.md @@ -10,7 +10,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar }, + components: { IonAvatar } }); diff --git a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md index b2cda11d2a8..3c39508e72c 100644 --- a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md +++ b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md @@ -18,5 +18,7 @@ import { Component } from '@angular/core'; `, }) -export class PageTwoComponent {} +export class PageTwoComponent { + +} ``` diff --git a/static/usage/v6/back-button/basic/index.md b/static/usage/v6/back-button/basic/index.md index 30c4b38a256..6c29748fe6f 100644 --- a/static/usage/v6/back-button/basic/index.md +++ b/static/usage/v6/back-button/basic/index.md @@ -17,8 +17,8 @@ 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/v6/back-button/basic/vue/page_two_vue.md b/static/usage/v6/back-button/basic/vue/page_two_vue.md index e26a6f13562..1192ca2936c 100644 --- a/static/usage/v6/back-button/basic/vue/page_two_vue.md +++ b/static/usage/v6/back-button/basic/vue/page_two_vue.md @@ -18,7 +18,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue'; export default { - components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar }, + components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } }; ``` diff --git a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md index 05a1bd64d79..31f76ac219a 100644 --- a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md +++ b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md @@ -18,5 +18,7 @@ import { Component } from '@angular/core'; `, }) -export class PageTwoComponent {} +export class PageTwoComponent { + +} ``` diff --git a/static/usage/v6/back-button/custom/index.md b/static/usage/v6/back-button/custom/index.md index 8bbcc6421f5..30f58541ecb 100644 --- a/static/usage/v6/back-button/custom/index.md +++ b/static/usage/v6/back-button/custom/index.md @@ -17,8 +17,8 @@ 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/v6/back-button/custom/vue/page_two_vue.md b/static/usage/v6/back-button/custom/vue/page_two_vue.md index 4667abeced5..05de62654cb 100644 --- a/static/usage/v6/back-button/custom/vue/page_two_vue.md +++ b/static/usage/v6/back-button/custom/vue/page_two_vue.md @@ -21,8 +21,8 @@ export default { components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton }, setup() { - return { caretBack }; - }, + return { caretBack } + } }; ``` diff --git a/static/usage/v6/backdrop/basic/index.md b/static/usage/v6/backdrop/basic/index.md index c55cd3835bd..63ff609c996 100644 --- a/static/usage/v6/backdrop/basic/index.md +++ b/static/usage/v6/backdrop/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/backdrop/styling/index.md b/static/usage/v6/backdrop/styling/index.md index 1c7e7966b8d..7d3aad9224c 100644 --- a/static/usage/v6/backdrop/styling/index.md +++ b/static/usage/v6/backdrop/styling/index.md @@ -11,8 +11,8 @@ 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/v6/badge/theming/colors/index.md b/static/usage/v6/badge/theming/colors/index.md index 60599ad223f..47aa8b9e1b4 100644 --- a/static/usage/v6/badge/theming/colors/index.md +++ b/static/usage/v6/badge/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md b/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md index cf47682b14d..950e96b4e80 100644 --- a/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md @@ -5,4 +5,4 @@ ion-badge { --padding-end: 20px; --padding-start: 20px; } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/badge/theming/css-properties/index.md b/static/usage/v6/badge/theming/css-properties/index.md index e09f2ea5f6a..711d4f0a38d 100644 --- a/static/usage/v6/badge/theming/css-properties/index.md +++ b/static/usage/v6/badge/theming/css-properties/index.md @@ -10,9 +10,9 @@ 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/v6/badge/theming/css-properties/react/main_css.md b/static/usage/v6/badge/theming/css-properties/react/main_css.md index cf47682b14d..950e96b4e80 100644 --- a/static/usage/v6/badge/theming/css-properties/react/main_css.md +++ b/static/usage/v6/badge/theming/css-properties/react/main_css.md @@ -5,4 +5,4 @@ ion-badge { --padding-end: 20px; --padding-start: 20px; } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md index 926479c1e85..76a545d6a8e 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md @@ -7,4 +7,4 @@ Film 35 mm -``` +``` \ No newline at end of file diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md index b761f85ed5b..fc5c8a29061 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/index.md @@ -8,8 +8,8 @@ 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/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md index fdd63471ed4..f88b8a6e322 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md @@ -18,14 +18,14 @@ components: { IonBreadcrumb, IonBreadcrumbs }, data() { return { - maxBreadcrumbs: 4, - }; + maxBreadcrumbs: 4 + } }, methods: { expandBreadcrumbs() { this.maxBreadcrumbs = undefined; - }, - }, + } + } }); ``` diff --git a/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md index 15ee6fc4407..eccdbd8d512 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/items-before-after/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md index 4a81d113c90..284c2a429a4 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/max-items/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md index e3c0462a148..2c5ee51a9b7 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md @@ -22,4 +22,4 @@ -``` +``` \ No newline at end of file diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md index 8b0a2476b4b..a0b924e8127 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/index.md @@ -8,9 +8,9 @@ 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/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md index 1d22085a5b1..007fb9a4a1e 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md @@ -18,12 +18,12 @@ const popover = document.querySelector('ion-popover'); const popoverList = document.querySelector('ion-popover ion-list'); - breadcrumbs.addEventListener('ionCollapsedClick', (e) => { + breadcrumbs.addEventListener('ionCollapsedClick', e => { let listHTML = ``; e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => { listHTML += ` ${breadcrumb.textContent} @@ -36,6 +36,6 @@ popover.isOpen = true; }); - popover.addEventListener('didDismiss', () => (popover.isOpen = false)); + popover.addEventListener('didDismiss', () => popover.isOpen = false); ``` diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md index 66ccc22bfe3..72cc6520e3c 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md @@ -27,7 +27,10 @@ function Example() { {collapsedBreadcrumbs.map((breadcrumb, i) => ( - + {breadcrumb.textContent} ))} diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md index 54368fa7213..318f64f8547 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md @@ -24,25 +24,25 @@ -``` +``` \ No newline at end of file diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md index b0ca30f0e6f..a9305b79feb 100644 --- a/static/usage/v6/breadcrumbs/icons/custom-separators/index.md +++ b/static/usage/v6/breadcrumbs/icons/custom-separators/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md index f0849705aab..f836a85455f 100644 --- a/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md +++ b/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md @@ -29,7 +29,7 @@ components: { IonBreadcrumb, IonBreadcrumbs, IonIcon }, setup() { return { arrowForwardCircle }; - }, + } }); ``` diff --git a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md index abcecf2686c..0f2e9ac47cc 100644 --- a/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md +++ b/static/usage/v6/breadcrumbs/icons/icons-on-items/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/breadcrumbs/theming/colors/index.md b/static/usage/v6/breadcrumbs/theming/colors/index.md index 20151756e82..632b91c2cbb 100644 --- a/static/usage/v6/breadcrumbs/theming/colors/index.md +++ b/static/usage/v6/breadcrumbs/theming/colors/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md b/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md index 3dc7c4640ad..338babc9c79 100644 --- a/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md @@ -4,4 +4,4 @@ ion-breadcrumb { --color-active: rgb(150, 112, 220); --color-hover: rgb(103, 61, 180); } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/index.md b/static/usage/v6/breadcrumbs/theming/css-properties/index.md index 12021d9925a..013c1e19024 100644 --- a/static/usage/v6/breadcrumbs/theming/css-properties/index.md +++ b/static/usage/v6/breadcrumbs/theming/css-properties/index.md @@ -10,8 +10,8 @@ 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/v6/breadcrumbs/theming/css-properties/react/main_css.md b/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md index 3dc7c4640ad..338babc9c79 100644 --- a/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md +++ b/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md @@ -4,4 +4,4 @@ ion-breadcrumb { --color-active: rgb(150, 112, 220); --color-hover: rgb(103, 61, 180); } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/button/basic/angular.md b/static/usage/v6/button/basic/angular.md index d313d7dcd23..44ba5831426 100644 --- a/static/usage/v6/button/basic/angular.md +++ b/static/usage/v6/button/basic/angular.md @@ -1,3 +1,4 @@ ```html -Default Disabled +Default +Disabled ``` diff --git a/static/usage/v6/button/basic/javascript.md b/static/usage/v6/button/basic/javascript.md index e298f5a1246..8296ef7f42a 100644 --- a/static/usage/v6/button/basic/javascript.md +++ b/static/usage/v6/button/basic/javascript.md @@ -1,3 +1,4 @@ ```html -Default Disabled +Default +Disabled ``` diff --git a/static/usage/v6/button/expand/angular.md b/static/usage/v6/button/expand/angular.md index b49d2c767ae..ca3f5093b84 100644 --- a/static/usage/v6/button/expand/angular.md +++ b/static/usage/v6/button/expand/angular.md @@ -1,3 +1,4 @@ ```html -Block Full +Block +Full ``` diff --git a/static/usage/v6/button/expand/javascript.md b/static/usage/v6/button/expand/javascript.md index b49d2c767ae..ca3f5093b84 100644 --- a/static/usage/v6/button/expand/javascript.md +++ b/static/usage/v6/button/expand/javascript.md @@ -1,3 +1,4 @@ ```html -Block Full +Block +Full ``` diff --git a/static/usage/v6/button/icons/vue.md b/static/usage/v6/button/icons/vue.md index 03d8648c878..356fc5617dc 100644 --- a/static/usage/v6/button/icons/vue.md +++ b/static/usage/v6/button/icons/vue.md @@ -23,8 +23,8 @@ export default defineComponent({ components: { IonButton, IonIcon }, setup() { - return { star }; - }, + return { star } + } }); ``` diff --git a/static/usage/v6/button/shape/angular.md b/static/usage/v6/button/shape/angular.md index a37193d9013..97ed756261a 100644 --- a/static/usage/v6/button/shape/angular.md +++ b/static/usage/v6/button/shape/angular.md @@ -1,3 +1,4 @@ ```html -Default Round +Default +Round ``` diff --git a/static/usage/v6/button/shape/javascript.md b/static/usage/v6/button/shape/javascript.md index a37193d9013..97ed756261a 100644 --- a/static/usage/v6/button/shape/javascript.md +++ b/static/usage/v6/button/shape/javascript.md @@ -1,3 +1,4 @@ ```html -Default Round +Default +Round ``` diff --git a/static/usage/v6/button/theming/css-properties/index.md b/static/usage/v6/button/theming/css-properties/index.md index 6824c741628..06905de166a 100644 --- a/static/usage/v6/button/theming/css-properties/index.md +++ b/static/usage/v6/button/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/button/theming/css-properties/react/main_css.md b/static/usage/v6/button/theming/css-properties/react/main_css.md index fa985cbe82f..1fba4c49972 100644 --- a/static/usage/v6/button/theming/css-properties/react/main_css.md +++ b/static/usage/v6/button/theming/css-properties/react/main_css.md @@ -1,3 +1,4 @@ + ```css ion-button { --background: #93e9be; diff --git a/static/usage/v6/button/theming/css-properties/react/main_tsx.md b/static/usage/v6/button/theming/css-properties/react/main_tsx.md index c8c432e1b9c..6e0cddd9709 100644 --- a/static/usage/v6/button/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/button/theming/css-properties/react/main_tsx.md @@ -5,7 +5,9 @@ import { IonButton } from '@ionic/react'; import './main.css'; function Example() { - return Custom Button; + return ( + Custom Button + ); } export default Example; ``` diff --git a/static/usage/v6/buttons/types/angular.md b/static/usage/v6/buttons/types/angular.md index 9562dbb3b47..183c70105b1 100644 --- a/static/usage/v6/buttons/types/angular.md +++ b/static/usage/v6/buttons/types/angular.md @@ -1,11 +1,15 @@ ```html - Favorite + + Favorite + Default Buttons - Delete + + Delete + diff --git a/static/usage/v6/buttons/types/index.md b/static/usage/v6/buttons/types/index.md index 39be00f2b41..f0bee55af1c 100644 --- a/static/usage/v6/buttons/types/index.md +++ b/static/usage/v6/buttons/types/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/buttons/types/javascript.md b/static/usage/v6/buttons/types/javascript.md index 9562dbb3b47..183c70105b1 100644 --- a/static/usage/v6/buttons/types/javascript.md +++ b/static/usage/v6/buttons/types/javascript.md @@ -1,11 +1,15 @@ ```html - Favorite + + Favorite + Default Buttons - Delete + + Delete + diff --git a/static/usage/v6/buttons/types/react.md b/static/usage/v6/buttons/types/react.md index 01baca04d74..8d3b3edfe9e 100644 --- a/static/usage/v6/buttons/types/react.md +++ b/static/usage/v6/buttons/types/react.md @@ -8,11 +8,15 @@ function Example() { <> - Favorite + + Favorite + Default Buttons - Delete + + Delete + @@ -82,4 +86,5 @@ function Example() { ); } export default Example; + ``` diff --git a/static/usage/v6/buttons/types/vue.md b/static/usage/v6/buttons/types/vue.md index 60b04a067da..9a101caa402 100644 --- a/static/usage/v6/buttons/types/vue.md +++ b/static/usage/v6/buttons/types/vue.md @@ -2,11 +2,15 @@ diff --git a/static/usage/v6/header/fade/angular.md b/static/usage/v6/header/fade/angular.md index 473ad54c8da..72e55ffc58c 100644 --- a/static/usage/v6/header/fade/angular.md +++ b/static/usage/v6/header/fade/angular.md @@ -8,60 +8,23 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v6/header/fade/index.md b/static/usage/v6/header/fade/index.md index db8b8134f1f..eb5ba017071 100644 --- a/static/usage/v6/header/fade/index.md +++ b/static/usage/v6/header/fade/index.md @@ -6,10 +6,10 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/header/fade/javascript.md b/static/usage/v6/header/fade/javascript.md index 473ad54c8da..72e55ffc58c 100644 --- a/static/usage/v6/header/fade/javascript.md +++ b/static/usage/v6/header/fade/javascript.md @@ -8,60 +8,23 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v6/header/fade/react.md b/static/usage/v6/header/fade/react.md index 085bea0296d..453f32c4db4 100644 --- a/static/usage/v6/header/fade/react.md +++ b/static/usage/v6/header/fade/react.md @@ -14,61 +14,24 @@ function Example() {

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v6/header/fade/vue.md b/static/usage/v6/header/fade/vue.md index 264038c103c..44327bf809c 100644 --- a/static/usage/v6/header/fade/vue.md +++ b/static/usage/v6/header/fade/vue.md @@ -9,61 +9,24 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v6/header/no-border/index.md b/static/usage/v6/header/no-border/index.md index 0e68a8a2f5d..3cce680ca39 100644 --- a/static/usage/v6/header/no-border/index.md +++ b/static/usage/v6/header/no-border/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/header/translucent/angular.md b/static/usage/v6/header/translucent/angular.md index 657a88bf066..f2779c7d5c9 100644 --- a/static/usage/v6/header/translucent/angular.md +++ b/static/usage/v6/header/translucent/angular.md @@ -8,60 +8,23 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v6/header/translucent/index.md b/static/usage/v6/header/translucent/index.md index 898ffa17bc8..5a0054584ca 100644 --- a/static/usage/v6/header/translucent/index.md +++ b/static/usage/v6/header/translucent/index.md @@ -6,10 +6,10 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/header/translucent/javascript.md b/static/usage/v6/header/translucent/javascript.md index 5c0048c019c..e03deeda2a5 100644 --- a/static/usage/v6/header/translucent/javascript.md +++ b/static/usage/v6/header/translucent/javascript.md @@ -8,60 +8,23 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v6/header/translucent/react.md b/static/usage/v6/header/translucent/react.md index def835913c3..862211d839b 100644 --- a/static/usage/v6/header/translucent/react.md +++ b/static/usage/v6/header/translucent/react.md @@ -14,61 +14,24 @@ function Example() {

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v6/header/translucent/vue.md b/static/usage/v6/header/translucent/vue.md index 26370009d44..34a4c740014 100644 --- a/static/usage/v6/header/translucent/vue.md +++ b/static/usage/v6/header/translucent/vue.md @@ -9,61 +9,24 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v6/icon/basic/index.md b/static/usage/v6/icon/basic/index.md index ff2ff032f32..ccb83aec3df 100644 --- a/static/usage/v6/icon/basic/index.md +++ b/static/usage/v6/icon/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/img/basic/angular.md b/static/usage/v6/img/basic/angular.md index 5a42aa9f765..fc408402024 100644 --- a/static/usage/v6/img/basic/angular.md +++ b/static/usage/v6/img/basic/angular.md @@ -1,6 +1,3 @@ ```html - + ``` diff --git a/static/usage/v6/img/basic/javascript.md b/static/usage/v6/img/basic/javascript.md index 5a42aa9f765..fc408402024 100644 --- a/static/usage/v6/img/basic/javascript.md +++ b/static/usage/v6/img/basic/javascript.md @@ -1,6 +1,3 @@ ```html - + ``` diff --git a/static/usage/v6/img/basic/react.md b/static/usage/v6/img/basic/react.md index a7e9b7d6646..6637dfacef0 100644 --- a/static/usage/v6/img/basic/react.md +++ b/static/usage/v6/img/basic/react.md @@ -4,10 +4,7 @@ import { IonImg } from '@ionic/react'; function Example() { return ( - + ); } export default Example; diff --git a/static/usage/v6/img/basic/vue.md b/static/usage/v6/img/basic/vue.md index 2e6bdeb2e1a..a92ec67a3a5 100644 --- a/static/usage/v6/img/basic/vue.md +++ b/static/usage/v6/img/basic/vue.md @@ -1,9 +1,6 @@ ```html -``` +``` \ No newline at end of file diff --git a/static/usage/v6/input/filtering/react.md b/static/usage/v6/input/filtering/react.md index 765d1f24ba6..ae2df1a1cdd 100644 --- a/static/usage/v6/input/filtering/react.md +++ b/static/usage/v6/input/filtering/react.md @@ -3,32 +3,36 @@ import React, { useState, useRef } from 'react'; import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react'; function Example() { - const [inputModel, setInputModel] = useState(''); + 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, ''); - + 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 ( Alphanumeric Characters - + ); diff --git a/static/usage/v6/input/filtering/vue.md b/static/usage/v6/input/filtering/vue.md index b9ff7e0acdd..bfce3c9c58b 100644 --- a/static/usage/v6/input/filtering/vue.md +++ b/static/usage/v6/input/filtering/vue.md @@ -3,7 +3,11 @@ Alphanumeric Characters - + @@ -19,24 +23,24 @@ const inputModel = ref(''); const onInput = (ev) => { const value = ev.target!.value; - + // Removes non alphanumeric characters - const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, ''); - + const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,''); + /** * Update both the state variable and * the component to keep them in sync. */ inputModel.value = filteredValue; - + const inputCmp = ionInputEl.value; if (inputCmp !== undefined) { inputCmp.$el.value = filteredValue; } - }; - + } + return { ionInputEl, inputModel, onInput }; - }, + } }); ``` diff --git a/static/usage/v6/input/theming/colors/index.md b/static/usage/v6/input/theming/colors/index.md index 91748fc1bc0..9f3861e073b 100644 --- a/static/usage/v6/input/theming/colors/index.md +++ b/static/usage/v6/input/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/input/theming/css-properties/angular/example_component_css.md b/static/usage/v6/input/theming/css-properties/angular/example_component_css.md index 4885a193f87..bede6457325 100644 --- a/static/usage/v6/input/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/input/theming/css-properties/angular/example_component_css.md @@ -3,7 +3,7 @@ ion-input.custom { --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: 0.8; + --placeholder-opacity: .8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v6/input/theming/css-properties/index.md b/static/usage/v6/input/theming/css-properties/index.md index e67cb3e34b0..c67d8ddf1bc 100644 --- a/static/usage/v6/input/theming/css-properties/index.md +++ b/static/usage/v6/input/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/input/theming/css-properties/javascript.md b/static/usage/v6/input/theming/css-properties/javascript.md index b08b2d704bb..3b406ede42f 100644 --- a/static/usage/v6/input/theming/css-properties/javascript.md +++ b/static/usage/v6/input/theming/css-properties/javascript.md @@ -6,7 +6,7 @@ --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: 0.8; + --placeholder-opacity: .8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v6/input/theming/css-properties/react/main_css.md b/static/usage/v6/input/theming/css-properties/react/main_css.md index 4885a193f87..bede6457325 100644 --- a/static/usage/v6/input/theming/css-properties/react/main_css.md +++ b/static/usage/v6/input/theming/css-properties/react/main_css.md @@ -3,7 +3,7 @@ ion-input.custom { --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: 0.8; + --placeholder-opacity: .8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v6/input/theming/css-properties/react/main_tsx.md b/static/usage/v6/input/theming/css-properties/react/main_tsx.md index ea550a31e01..e4ec0fb134a 100644 --- a/static/usage/v6/input/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/input/theming/css-properties/react/main_tsx.md @@ -5,7 +5,9 @@ import { IonInput } from '@ionic/react'; import './main.css'; function Example() { - return ; + return ( + + ); } export default Example; ``` diff --git a/static/usage/v6/input/theming/css-properties/vue.md b/static/usage/v6/input/theming/css-properties/vue.md index 574846aa285..6d5d5fa41cc 100644 --- a/static/usage/v6/input/theming/css-properties/vue.md +++ b/static/usage/v6/input/theming/css-properties/vue.md @@ -17,7 +17,7 @@ --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: 0.8; + --placeholder-opacity: .8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v6/item-divider/basic/angular.md b/static/usage/v6/item-divider/basic/angular.md index 35dccbdbc88..d74e5b05549 100644 --- a/static/usage/v6/item-divider/basic/angular.md +++ b/static/usage/v6/item-divider/basic/angular.md @@ -2,7 +2,9 @@ - Section A + + Section A + @@ -18,7 +20,9 @@ - Section B + + Section B + diff --git a/static/usage/v6/item-divider/basic/index.md b/static/usage/v6/item-divider/basic/index.md index 26348706e09..c50ecfe1199 100644 --- a/static/usage/v6/item-divider/basic/index.md +++ b/static/usage/v6/item-divider/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item-divider/basic/javascript.md b/static/usage/v6/item-divider/basic/javascript.md index 35dccbdbc88..d74e5b05549 100644 --- a/static/usage/v6/item-divider/basic/javascript.md +++ b/static/usage/v6/item-divider/basic/javascript.md @@ -2,7 +2,9 @@ - Section A + + Section A + @@ -18,7 +20,9 @@ - Section B + + Section B + diff --git a/static/usage/v6/item-divider/basic/react.md b/static/usage/v6/item-divider/basic/react.md index 14ad85b1c82..289f1727c8d 100644 --- a/static/usage/v6/item-divider/basic/react.md +++ b/static/usage/v6/item-divider/basic/react.md @@ -7,7 +7,9 @@ function Example() { - Section A + + Section A + @@ -23,7 +25,9 @@ function Example() { - Section B + + Section B + diff --git a/static/usage/v6/item-divider/basic/vue.md b/static/usage/v6/item-divider/basic/vue.md index 22c9565c278..95f26ebc027 100644 --- a/static/usage/v6/item-divider/basic/vue.md +++ b/static/usage/v6/item-divider/basic/vue.md @@ -3,7 +3,9 @@ - Section A + + Section A + @@ -19,7 +21,9 @@ - Section B + + Section B + diff --git a/static/usage/v6/item-divider/theming/colors/index.md b/static/usage/v6/item-divider/theming/colors/index.md index df84e718112..912ef18df03 100644 --- a/static/usage/v6/item-divider/theming/colors/index.md +++ b/static/usage/v6/item-divider/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md index 172fdad114f..b3b1bb4da25 100644 --- a/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md @@ -1,5 +1,7 @@ ```html - Item Divider + + Item Divider + ``` diff --git a/static/usage/v6/item-divider/theming/css-properties/index.md b/static/usage/v6/item-divider/theming/css-properties/index.md index dc9ad7ee551..499d29749cc 100644 --- a/static/usage/v6/item-divider/theming/css-properties/index.md +++ b/static/usage/v6/item-divider/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/item-divider/theming/css-properties/javascript.md b/static/usage/v6/item-divider/theming/css-properties/javascript.md index 0c0cdc26f55..6622b6d7e3f 100644 --- a/static/usage/v6/item-divider/theming/css-properties/javascript.md +++ b/static/usage/v6/item-divider/theming/css-properties/javascript.md @@ -12,6 +12,8 @@ - Item Divider + + Item Divider + ``` diff --git a/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md index b3083033541..6cd8d464d7e 100644 --- a/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md @@ -1,3 +1,4 @@ + ```tsx import React from 'react'; import { IonItemDivider, IonLabel } from '@ionic/react'; @@ -7,7 +8,9 @@ import './main.css'; function Example() { return ( - Item Divider + + Item Divider + ); } diff --git a/static/usage/v6/item-divider/theming/css-properties/vue.md b/static/usage/v6/item-divider/theming/css-properties/vue.md index 950e3775d83..3589bcc7cd4 100644 --- a/static/usage/v6/item-divider/theming/css-properties/vue.md +++ b/static/usage/v6/item-divider/theming/css-properties/vue.md @@ -1,7 +1,9 @@ ```html @@ -10,7 +12,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonItemDivider }, + components: { IonItemDivider } }); diff --git a/static/usage/v6/item-group/basic/index.md b/static/usage/v6/item-group/basic/index.md index 0325543f197..d8486d97536 100644 --- a/static/usage/v6/item-group/basic/index.md +++ b/static/usage/v6/item-group/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item-group/sliding-items/angular.md b/static/usage/v6/item-group/sliding-items/angular.md index 2708fde7acc..a451b58c9c4 100644 --- a/static/usage/v6/item-group/sliding-items/angular.md +++ b/static/usage/v6/item-group/sliding-items/angular.md @@ -1,66 +1,94 @@ ```html - Fruits + + Fruits + - Grapes + + Grapes + - Favorite + + Favorite + - Apples + + Apples + - Favorite + + Favorite + - Bananas + + Bananas + - Favorite + + Favorite + - Vegetables + + Vegetables + - Carrots + + Carrots + - Favorite + + Favorite + - Broccoli + + Broccoli + - Favorite + + Favorite + - Celery + + Celery + - Favorite + + Favorite + diff --git a/static/usage/v6/item-group/sliding-items/index.md b/static/usage/v6/item-group/sliding-items/index.md index 4e89ac96480..c5d90b9bc8a 100644 --- a/static/usage/v6/item-group/sliding-items/index.md +++ b/static/usage/v6/item-group/sliding-items/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item-group/sliding-items/javascript.md b/static/usage/v6/item-group/sliding-items/javascript.md index 2708fde7acc..a451b58c9c4 100644 --- a/static/usage/v6/item-group/sliding-items/javascript.md +++ b/static/usage/v6/item-group/sliding-items/javascript.md @@ -1,66 +1,94 @@ ```html - Fruits + + Fruits + - Grapes + + Grapes + - Favorite + + Favorite + - Apples + + Apples + - Favorite + + Favorite + - Bananas + + Bananas + - Favorite + + Favorite + - Vegetables + + Vegetables + - Carrots + + Carrots + - Favorite + + Favorite + - Broccoli + + Broccoli + - Favorite + + Favorite + - Celery + + Celery + - Favorite + + Favorite + diff --git a/static/usage/v6/item-group/sliding-items/react.md b/static/usage/v6/item-group/sliding-items/react.md index 716935f065c..2ca4d7ca380 100644 --- a/static/usage/v6/item-group/sliding-items/react.md +++ b/static/usage/v6/item-group/sliding-items/react.md @@ -1,80 +1,100 @@ ```tsx import React from 'react'; -import { - IonItem, - IonItemDivider, - IonItemGroup, - IonItemOption, - IonItemOptions, - IonItemSliding, - IonLabel, -} from '@ionic/react'; +import { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react'; function Example() { return ( <> - Fruits + + Fruits + - Grapes + + Grapes + - Favorite + + Favorite + - Apples + + Apples + - Favorite + + Favorite + - Bananas + + Bananas + - Favorite + + Favorite + - Vegetables + + Vegetables + - Carrots + + Carrots + - Favorite + + Favorite + - Broccoli + + Broccoli + - Favorite + + Favorite + - Celery + + Celery + - Favorite + + Favorite + diff --git a/static/usage/v6/item-group/sliding-items/vue.md b/static/usage/v6/item-group/sliding-items/vue.md index 43109034598..5110ba1abed 100644 --- a/static/usage/v6/item-group/sliding-items/vue.md +++ b/static/usage/v6/item-group/sliding-items/vue.md @@ -2,81 +2,101 @@ ``` diff --git a/static/usage/v6/item/basic/angular.md b/static/usage/v6/item/basic/angular.md index b975f267d90..f0b13250493 100644 --- a/static/usage/v6/item/basic/angular.md +++ b/static/usage/v6/item/basic/angular.md @@ -5,15 +5,17 @@ - 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 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. + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v6/item/basic/javascript.md b/static/usage/v6/item/basic/javascript.md index b975f267d90..f0b13250493 100644 --- a/static/usage/v6/item/basic/javascript.md +++ b/static/usage/v6/item/basic/javascript.md @@ -5,15 +5,17 @@ - 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 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. + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v6/item/basic/react.md b/static/usage/v6/item/basic/react.md index 6154239cbf1..dfed86af19e 100644 --- a/static/usage/v6/item/basic/react.md +++ b/static/usage/v6/item/basic/react.md @@ -11,14 +11,16 @@ function Example() { - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + 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, + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v6/item/basic/vue.md b/static/usage/v6/item/basic/vue.md index 37b32f7c2ca..479e90196a4 100644 --- a/static/usage/v6/item/basic/vue.md +++ b/static/usage/v6/item/basic/vue.md @@ -6,15 +6,17 @@ - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + 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. + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v6/item/buttons/angular.md b/static/usage/v6/item/buttons/angular.md index 4d77ff8b9d8..bf7069f48f7 100644 --- a/static/usage/v6/item/buttons/angular.md +++ b/static/usage/v6/item/buttons/angular.md @@ -1,8 +1,12 @@ ```html - Start + + Start + Default Buttons - End + + End + @@ -29,8 +33,14 @@ Button Sizes - Small - Default - Large + + Small + + + Default + + + Large + ``` diff --git a/static/usage/v6/item/buttons/javascript.md b/static/usage/v6/item/buttons/javascript.md index 4d77ff8b9d8..bf7069f48f7 100644 --- a/static/usage/v6/item/buttons/javascript.md +++ b/static/usage/v6/item/buttons/javascript.md @@ -1,8 +1,12 @@ ```html - Start + + Start + Default Buttons - End + + End + @@ -29,8 +33,14 @@ Button Sizes - Small - Default - Large + + Small + + + Default + + + Large + ``` diff --git a/static/usage/v6/item/buttons/react.md b/static/usage/v6/item/buttons/react.md index fda29c7f11a..8776e5215fb 100644 --- a/static/usage/v6/item/buttons/react.md +++ b/static/usage/v6/item/buttons/react.md @@ -7,9 +7,13 @@ function Example() { return ( <> - Start + + Start + Default Buttons - End + + End + diff --git a/static/usage/v6/item/buttons/vue.md b/static/usage/v6/item/buttons/vue.md index 8680f189472..02de38e58ab 100644 --- a/static/usage/v6/item/buttons/vue.md +++ b/static/usage/v6/item/buttons/vue.md @@ -1,9 +1,13 @@ ```html @@ -44,8 +54,8 @@ export default defineComponent({ components: { IonButton, IonIcon, IonItem, IonLabel }, setup() { - return { home, navigate, star }; - }, + return { home, navigate, star } + } }); ``` diff --git a/static/usage/v6/item/counter/index.md b/static/usage/v6/item/counter/index.md index abdebf2a9e2..b06fb2ecf1a 100644 --- a/static/usage/v6/item/counter/index.md +++ b/static/usage/v6/item/counter/index.md @@ -8,8 +8,8 @@ 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/v6/item/counter/react.md b/static/usage/v6/item/counter/react.md index 3d986aaf37e..435701d5b53 100644 --- a/static/usage/v6/item/counter/react.md +++ b/static/usage/v6/item/counter/react.md @@ -10,10 +10,7 @@ function Example() { - `${maxLength - inputLength} characters remaining`} - > + `${maxLength - inputLength} characters remaining`}> Custom Counter Format diff --git a/static/usage/v6/item/counter/vue.md b/static/usage/v6/item/counter/vue.md index 84bf7ec643d..3a97d40743a 100644 --- a/static/usage/v6/item/counter/vue.md +++ b/static/usage/v6/item/counter/vue.md @@ -20,8 +20,8 @@ methods: { customFormatter(inputLength, maxLength) { return `${maxLength - inputLength} characters remaining`; - }, - }, + } + } }); ``` diff --git a/static/usage/v6/item/detail-arrows/index.md b/static/usage/v6/item/detail-arrows/index.md index 5b361393b0b..7ef7323e95e 100644 --- a/static/usage/v6/item/detail-arrows/index.md +++ b/static/usage/v6/item/detail-arrows/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item/detail-arrows/vue.md b/static/usage/v6/item/detail-arrows/vue.md index 54010095652..d341c004f15 100644 --- a/static/usage/v6/item/detail-arrows/vue.md +++ b/static/usage/v6/item/detail-arrows/vue.md @@ -51,4 +51,3 @@ }, }); -``` diff --git a/static/usage/v6/item/helper-error/index.md b/static/usage/v6/item/helper-error/index.md index 449479b7d81..021ea8858cf 100644 --- a/static/usage/v6/item/helper-error/index.md +++ b/static/usage/v6/item/helper-error/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item/helper-error/javascript.md b/static/usage/v6/item/helper-error/javascript.md index 6d0772af984..eb0d43327d9 100644 --- a/static/usage/v6/item/helper-error/javascript.md +++ b/static/usage/v6/item/helper-error/javascript.md @@ -14,9 +14,7 @@ input.addEventListener('ionBlur', () => markTouched()); const validateEmail = (email) => { - 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])?)*$/ - ); + 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) => { @@ -25,13 +23,13 @@ item.classList.remove('ion-valid'); item.classList.remove('ion-invalid'); - if (value === '') return; + if (value === "") return; validateEmail(value) ? item.classList.add('ion-valid') : item.classList.add('ion-invalid'); - }; + } const markTouched = () => { item.classList.add('ion-touched'); - }; + } ``` diff --git a/static/usage/v6/item/helper-error/react.md b/static/usage/v6/item/helper-error/react.md index 84437995c01..a1e0e1e1b25 100644 --- a/static/usage/v6/item/helper-error/react.md +++ b/static/usage/v6/item/helper-error/react.md @@ -27,10 +27,7 @@ function Example() { }; return ( - + Email validate(event)} onIonBlur={() => markTouched()}> Enter a valid email diff --git a/static/usage/v6/item/helper-error/vue.md b/static/usage/v6/item/helper-error/vue.md index 04ed67af38e..0febb45cfe4 100644 --- a/static/usage/v6/item/helper-error/vue.md +++ b/static/usage/v6/item/helper-error/vue.md @@ -16,9 +16,7 @@ components: { IonInput, IonItem, IonLabel, IonNote }, methods: { validateEmail(email) { - 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])?)*$/ - ); + 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])?)*$/); }, validate(ev) { @@ -35,8 +33,8 @@ }, markTouched() { - this.$refs.item.$el.classList.add('ion-touched'); - }, + this.$refs.item.$el.classList.add('ion-touched') + } }, }); diff --git a/static/usage/v6/item/icons/angular.md b/static/usage/v6/item/icons/angular.md index b81a463e004..49a1cc707e3 100644 --- a/static/usage/v6/item/icons/angular.md +++ b/static/usage/v6/item/icons/angular.md @@ -1,21 +1,29 @@ ```html - Default Icon + + Default Icon + - Large Icon + + Large Icon + - Small Icon + + Small Icon + - Default Icon + + Default Icon + ``` diff --git a/static/usage/v6/item/icons/javascript.md b/static/usage/v6/item/icons/javascript.md index b81a463e004..49a1cc707e3 100644 --- a/static/usage/v6/item/icons/javascript.md +++ b/static/usage/v6/item/icons/javascript.md @@ -1,21 +1,29 @@ ```html - Default Icon + + Default Icon + - Large Icon + + Large Icon + - Small Icon + + Small Icon + - Default Icon + + Default Icon + ``` diff --git a/static/usage/v6/item/icons/react.md b/static/usage/v6/item/icons/react.md index 09496398f7f..a5fc0ae6629 100644 --- a/static/usage/v6/item/icons/react.md +++ b/static/usage/v6/item/icons/react.md @@ -7,23 +7,31 @@ function Example() { return ( <> - Default Icon + + Default Icon + - Large Icon + + Large Icon + - Small Icon + + Small Icon + - Default Icon + + Default Icon + ); diff --git a/static/usage/v6/item/icons/vue.md b/static/usage/v6/item/icons/vue.md index a89e5e6aad0..82e09004fbe 100644 --- a/static/usage/v6/item/icons/vue.md +++ b/static/usage/v6/item/icons/vue.md @@ -1,23 +1,31 @@ ```html @@ -29,8 +37,8 @@ export default defineComponent({ components: { IonButton, IonIcon, IonItem, IonLabel }, setup() { - return { informationCircle, star }; - }, + return { informationCircle, star } + } }); ``` diff --git a/static/usage/v6/item/inputs/react.md b/static/usage/v6/item/inputs/react.md index d1ef33c8b27..0cb6523f053 100644 --- a/static/usage/v6/item/inputs/react.md +++ b/static/usage/v6/item/inputs/react.md @@ -1,15 +1,6 @@ ```tsx import React from 'react'; -import { - IonCheckbox, - IonInput, - IonItem, - IonLabel, - IonRange, - IonSelect, - IonSelectOption, - IonToggle, -} from '@ionic/react'; +import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v6/item/inputs/vue.md b/static/usage/v6/item/inputs/vue.md index 11f20443f99..7dc085a7a4d 100644 --- a/static/usage/v6/item/inputs/vue.md +++ b/static/usage/v6/item/inputs/vue.md @@ -60,16 +60,7 @@ ``` diff --git a/static/usage/v6/item/media/angular.md b/static/usage/v6/item/media/angular.md index c51ab29463a..915969f127e 100644 --- a/static/usage/v6/item/media/angular.md +++ b/static/usage/v6/item/media/angular.md @@ -3,13 +3,17 @@ Silhouette of a person's head - Avatar Item + + Avatar Item + Silhouette of mountains - Thumbnail Item + + Thumbnail Item + ``` diff --git a/static/usage/v6/item/media/javascript.md b/static/usage/v6/item/media/javascript.md index c51ab29463a..915969f127e 100644 --- a/static/usage/v6/item/media/javascript.md +++ b/static/usage/v6/item/media/javascript.md @@ -3,13 +3,17 @@ Silhouette of a person's head - Avatar Item + + Avatar Item + Silhouette of mountains - Thumbnail Item + + Thumbnail Item + ``` diff --git a/static/usage/v6/item/media/react.md b/static/usage/v6/item/media/react.md index dae8042c9ae..21ba7c98f65 100644 --- a/static/usage/v6/item/media/react.md +++ b/static/usage/v6/item/media/react.md @@ -9,14 +9,18 @@ function Example() { Silhouette of a person's head - Avatar Item + + Avatar Item + Silhouette of mountains - Thumbnail Item + + Thumbnail Item + ); diff --git a/static/usage/v6/item/media/vue.md b/static/usage/v6/item/media/vue.md index 38b16a91fb3..72dd55ef587 100644 --- a/static/usage/v6/item/media/vue.md +++ b/static/usage/v6/item/media/vue.md @@ -4,14 +4,18 @@ Silhouette of a person's head - Avatar Item + + Avatar Item + Silhouette of mountains - Thumbnail Item + + Thumbnail Item + diff --git a/static/usage/v6/item/theming/colors/index.md b/static/usage/v6/item/theming/colors/index.md index d9be998f8a5..c646ae03dbe 100644 --- a/static/usage/v6/item/theming/colors/index.md +++ b/static/usage/v6/item/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/item/theming/css-properties/index.md b/static/usage/v6/item/theming/css-properties/index.md index f8aa0c040c6..5db040f5834 100644 --- a/static/usage/v6/item/theming/css-properties/index.md +++ b/static/usage/v6/item/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/item/theming/css-shadow-parts/index.md b/static/usage/v6/item/theming/css-shadow-parts/index.md index dfd53961ac8..a0f2c064b09 100644 --- a/static/usage/v6/item/theming/css-shadow-parts/index.md +++ b/static/usage/v6/item/theming/css-shadow-parts/index.md @@ -11,8 +11,8 @@ 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/v6/item/theming/input-highlight/index.md b/static/usage/v6/item/theming/input-highlight/index.md index 4efce5d53db..e74a8267a28 100644 --- a/static/usage/v6/item/theming/input-highlight/index.md +++ b/static/usage/v6/item/theming/input-highlight/index.md @@ -11,8 +11,8 @@ 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/v6/label/item/angular.md b/static/usage/v6/label/item/angular.md index 54f24979079..be252b899a0 100644 --- a/static/usage/v6/label/item/angular.md +++ b/static/usage/v6/label/item/angular.md @@ -5,15 +5,17 @@ - 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 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. + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v6/label/item/javascript.md b/static/usage/v6/label/item/javascript.md index 54f24979079..be252b899a0 100644 --- a/static/usage/v6/label/item/javascript.md +++ b/static/usage/v6/label/item/javascript.md @@ -5,15 +5,17 @@ - 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 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. + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v6/label/item/react.md b/static/usage/v6/label/item/react.md index f5bdf5a5d1b..88e4f904deb 100644 --- a/static/usage/v6/label/item/react.md +++ b/static/usage/v6/label/item/react.md @@ -11,14 +11,16 @@ function Example() { - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + 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, + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v6/label/item/vue.md b/static/usage/v6/label/item/vue.md index fe4cd48904a..99ec3ea3d40 100644 --- a/static/usage/v6/label/item/vue.md +++ b/static/usage/v6/label/item/vue.md @@ -6,15 +6,17 @@ - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + 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. + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v6/list-header/basic/index.md b/static/usage/v6/list-header/basic/index.md index a32f3c30684..78b84e21387 100644 --- a/static/usage/v6/list-header/basic/index.md +++ b/static/usage/v6/list-header/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/list-header/buttons/index.md b/static/usage/v6/list-header/buttons/index.md index 0f66d21fc23..368b68089d1 100644 --- a/static/usage/v6/list-header/buttons/index.md +++ b/static/usage/v6/list-header/buttons/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/list-header/lines/index.md b/static/usage/v6/list-header/lines/index.md index 80b2a2528f1..53f77fb4ff3 100644 --- a/static/usage/v6/list-header/lines/index.md +++ b/static/usage/v6/list-header/lines/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/list-header/theming/colors/index.md b/static/usage/v6/list-header/theming/colors/index.md index 519a294b6a2..828041239f3 100644 --- a/static/usage/v6/list-header/theming/colors/index.md +++ b/static/usage/v6/list-header/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/list-header/theming/css-properties/index.md b/static/usage/v6/list-header/theming/css-properties/index.md index 0c7710252f8..0a63f448d35 100644 --- a/static/usage/v6/list-header/theming/css-properties/index.md +++ b/static/usage/v6/list-header/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/loading/controller/index.md b/static/usage/v6/loading/controller/index.md index d51f525dcbf..43c62e88258 100644 --- a/static/usage/v6/loading/controller/index.md +++ b/static/usage/v6/loading/controller/index.md @@ -8,8 +8,8 @@ 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/v6/loading/controller/javascript.md b/static/usage/v6/loading/controller/javascript.md index f54756c396b..c5507d123af 100644 --- a/static/usage/v6/loading/controller/javascript.md +++ b/static/usage/v6/loading/controller/javascript.md @@ -2,13 +2,13 @@ Show Loading ``` diff --git a/static/usage/v6/loading/controller/react.md b/static/usage/v6/loading/controller/react.md index 06dc3413bab..16280a1e91a 100644 --- a/static/usage/v6/loading/controller/react.md +++ b/static/usage/v6/loading/controller/react.md @@ -2,6 +2,7 @@ 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 @@ -10,14 +11,12 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Dismissing after 3 seconds...', - duration: 3000, - }); - }} - > + { + present({ + message: 'Dismissing after 3 seconds...', + duration: 3000 + }) + }}> Show Loading ); diff --git a/static/usage/v6/loading/controller/vue.md b/static/usage/v6/loading/controller/vue.md index e80b61cc8b3..17b65b33af0 100644 --- a/static/usage/v6/loading/controller/vue.md +++ b/static/usage/v6/loading/controller/vue.md @@ -13,14 +13,14 @@ const showLoading = async () => { const loading = await loadingController.create({ message: 'Dismissing after 3 seconds...', - duration: 3000, + duration: 3000 }); - + loading.present(); - }; - - return { showLoading }; - }, + } + + return { showLoading } + } }); ``` diff --git a/static/usage/v6/loading/spinners/index.md b/static/usage/v6/loading/spinners/index.md index 4369f2b0664..e29eca69331 100644 --- a/static/usage/v6/loading/spinners/index.md +++ b/static/usage/v6/loading/spinners/index.md @@ -8,8 +8,8 @@ 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/v6/loading/spinners/javascript.md b/static/usage/v6/loading/spinners/javascript.md index b16d6a849f0..09712e70a92 100644 --- a/static/usage/v6/loading/spinners/javascript.md +++ b/static/usage/v6/loading/spinners/javascript.md @@ -2,14 +2,14 @@ Show Loading ``` diff --git a/static/usage/v6/loading/spinners/react.md b/static/usage/v6/loading/spinners/react.md index e90cbb4e555..e2c492f1431 100644 --- a/static/usage/v6/loading/spinners/react.md +++ b/static/usage/v6/loading/spinners/react.md @@ -2,6 +2,7 @@ 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 @@ -10,15 +11,13 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Loading...', - duration: 3000, - spinner: 'circles', - }); - }} - > + { + present({ + message: 'Loading...', + duration: 3000, + spinner: 'circles' + }) + }}> Show Loading ); diff --git a/static/usage/v6/loading/spinners/vue.md b/static/usage/v6/loading/spinners/vue.md index 77719a4a704..4d01e7fc869 100644 --- a/static/usage/v6/loading/spinners/vue.md +++ b/static/usage/v6/loading/spinners/vue.md @@ -14,14 +14,14 @@ const loading = await loadingController.create({ message: 'Loading...', duration: 3000, - spinner: 'circles', + spinner: 'circles' }); - + loading.present(); - }; - - return { showLoading }; - }, + } + + return { showLoading } + } }); ``` diff --git a/static/usage/v6/loading/theming/angular/global_css.md b/static/usage/v6/loading/theming/angular/global_css.md index af410626c52..16bf7af3522 100644 --- a/static/usage/v6/loading/theming/angular/global_css.md +++ b/static/usage/v6/loading/theming/angular/global_css.md @@ -5,4 +5,4 @@ ion-loading.custom-loading { color: #1c6dff; } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/loading/theming/index.md b/static/usage/v6/loading/theming/index.md index 892443db6c4..61dc8c20be3 100644 --- a/static/usage/v6/loading/theming/index.md +++ b/static/usage/v6/loading/theming/index.md @@ -12,8 +12,8 @@ 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/v6/loading/theming/javascript.md b/static/usage/v6/loading/theming/javascript.md index 5c0258d1f9a..68e0943cd3d 100644 --- a/static/usage/v6/loading/theming/javascript.md +++ b/static/usage/v6/loading/theming/javascript.md @@ -2,23 +2,23 @@ Show Loading ``` diff --git a/static/usage/v6/loading/theming/react.md b/static/usage/v6/loading/theming/react.md index e90cbb4e555..e2c492f1431 100644 --- a/static/usage/v6/loading/theming/react.md +++ b/static/usage/v6/loading/theming/react.md @@ -2,6 +2,7 @@ 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 @@ -10,15 +11,13 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Loading...', - duration: 3000, - spinner: 'circles', - }); - }} - > + { + present({ + message: 'Loading...', + duration: 3000, + spinner: 'circles' + }) + }}> Show Loading ); diff --git a/static/usage/v6/loading/theming/react/main_css.md b/static/usage/v6/loading/theming/react/main_css.md index af410626c52..16bf7af3522 100644 --- a/static/usage/v6/loading/theming/react/main_css.md +++ b/static/usage/v6/loading/theming/react/main_css.md @@ -5,4 +5,4 @@ ion-loading.custom-loading { color: #1c6dff; } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/loading/theming/react/main_tsx.md b/static/usage/v6/loading/theming/react/main_tsx.md index b92952e42b6..cc57cc1dce8 100644 --- a/static/usage/v6/loading/theming/react/main_tsx.md +++ b/static/usage/v6/loading/theming/react/main_tsx.md @@ -5,6 +5,7 @@ import { IonButton, useIonLoading } from '@ionic/react'; import './main.css'; function Example() { + /** * This example does not make use of the dismiss * method returned from `useIonLoading`, but it can @@ -13,15 +14,13 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Loading...', - duration: 3000, - cssClass: 'custom-loading', - }); - }} - > + { + present({ + message: 'Loading...', + duration: 3000, + cssClass: 'custom-loading' + }) + }}> Show Loading ); diff --git a/static/usage/v6/loading/theming/vue.md b/static/usage/v6/loading/theming/vue.md index 5387b241463..6f380da3f1f 100644 --- a/static/usage/v6/loading/theming/vue.md +++ b/static/usage/v6/loading/theming/vue.md @@ -14,14 +14,14 @@ const loading = await loadingController.create({ message: 'Loading...', duration: 3000, - cssClass: 'custom-loading', + cssClass: 'custom-loading' }); - + loading.present(); - }; - - return { showLoading }; - }, + } + + return { showLoading } + } }); ``` diff --git a/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md b/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md index 62d396e75aa..4b1b527952e 100644 --- a/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md @@ -5,7 +5,9 @@ import { IonSearchbar } from '@ionic/react'; import './main.css'; function Example() { - return ; + return ( + + ); } export default Example; ``` diff --git a/static/usage/v6/segment-button/layout/index.md b/static/usage/v6/segment-button/layout/index.md index 597828749ce..5ddcc6a17b8 100644 --- a/static/usage/v6/segment-button/layout/index.md +++ b/static/usage/v6/segment-button/layout/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/segment-button/layout/vue.md b/static/usage/v6/segment-button/layout/vue.md index 71a039bd211..d3c60a4004d 100644 --- a/static/usage/v6/segment-button/layout/vue.md +++ b/static/usage/v6/segment-button/layout/vue.md @@ -82,7 +82,7 @@ components: { IonIcon, IonLabel, IonSegment, IonSegmentButton }, setup() { return { call, heart, pin }; - }, + } }); ``` diff --git a/static/usage/v6/segment-button/theming/css-properties/index.md b/static/usage/v6/segment-button/theming/css-properties/index.md index 8bfa431d1c3..3bfdd96bb1d 100644 --- a/static/usage/v6/segment-button/theming/css-properties/index.md +++ b/static/usage/v6/segment-button/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/segment-button/theming/css-shadow-parts/index.md b/static/usage/v6/segment-button/theming/css-shadow-parts/index.md index ca040ebead9..7008dbc3c4c 100644 --- a/static/usage/v6/segment-button/theming/css-shadow-parts/index.md +++ b/static/usage/v6/segment-button/theming/css-shadow-parts/index.md @@ -11,8 +11,8 @@ 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/v6/segment/scrollable/index.md b/static/usage/v6/segment/scrollable/index.md index 83fdee16620..de206ca652a 100644 --- a/static/usage/v6/segment/scrollable/index.md +++ b/static/usage/v6/segment/scrollable/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/segment/scrollable/vue.md b/static/usage/v6/segment/scrollable/vue.md index 160fab75489..c3afaf67ba2 100644 --- a/static/usage/v6/segment/scrollable/vue.md +++ b/static/usage/v6/segment/scrollable/vue.md @@ -43,18 +43,9 @@ components: { IonIcon, IonSegment, IonSegmentButton }, setup() { return { - home, - heart, - pin, - star, - call, - globe, - basket, - barbell, - trash, - person, - }; - }, + home, heart, pin, star, call, globe, basket, barbell, trash, person + } + } }); ``` diff --git a/static/usage/v6/segment/theming/colors/index.md b/static/usage/v6/segment/theming/colors/index.md index 4b54191ef52..1896c85f8f3 100644 --- a/static/usage/v6/segment/theming/colors/index.md +++ b/static/usage/v6/segment/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/segment/theming/css-properties/index.md b/static/usage/v6/segment/theming/css-properties/index.md index fcafef44686..f8dfa374ba9 100644 --- a/static/usage/v6/segment/theming/css-properties/index.md +++ b/static/usage/v6/segment/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/select/basic/multiple-selection/index.md b/static/usage/v6/select/basic/multiple-selection/index.md index 0426c613225..57f3380c18f 100644 --- a/static/usage/v6/select/basic/multiple-selection/index.md +++ b/static/usage/v6/select/basic/multiple-selection/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md index 84f81cf5ecf..de30bdc02d0 100644 --- a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md +++ b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md @@ -16,4 +16,4 @@

{{ log }}

-``` +``` \ No newline at end of file diff --git a/static/usage/v6/select/basic/responding-to-interaction/index.md b/static/usage/v6/select/basic/responding-to-interaction/index.md index 3e95a4d3ac3..1e43625767a 100644 --- a/static/usage/v6/select/basic/responding-to-interaction/index.md +++ b/static/usage/v6/select/basic/responding-to-interaction/index.md @@ -8,9 +8,9 @@ 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/v6/select/basic/responding-to-interaction/javascript.md b/static/usage/v6/select/basic/responding-to-interaction/javascript.md index a553e0b899b..78ba1244101 100644 --- a/static/usage/v6/select/basic/responding-to-interaction/javascript.md +++ b/static/usage/v6/select/basic/responding-to-interaction/javascript.md @@ -14,7 +14,7 @@ const select = document.querySelector('ion-select'); const log = document.querySelector('#log'); - select.addEventListener('ionChange', (e) => { + select.addEventListener('ionChange', e => { log.insertAdjacentHTML('afterbegin', `

ionChange fired with value: ${e.detail.value}

`); }); diff --git a/static/usage/v6/select/basic/responding-to-interaction/vue.md b/static/usage/v6/select/basic/responding-to-interaction/vue.md index 7e62f53b0d4..e8d2880e45e 100644 --- a/static/usage/v6/select/basic/responding-to-interaction/vue.md +++ b/static/usage/v6/select/basic/responding-to-interaction/vue.md @@ -27,14 +27,14 @@ components: { IonItem, IonList, IonSelect, IonSelectOption }, data() { return { - logs: [], - }; + logs: [] + } }, methods: { pushLog(msg) { this.logs.unshift(msg); - }, - }, + } + } }); ``` diff --git a/static/usage/v6/select/basic/single-selection/index.md b/static/usage/v6/select/basic/single-selection/index.md index 8c5e56d680a..b697188b540 100644 --- a/static/usage/v6/select/basic/single-selection/index.md +++ b/static/usage/v6/select/basic/single-selection/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/select/customization/button-text/index.md b/static/usage/v6/select/customization/button-text/index.md index 86ad78d0640..06e014afb5c 100644 --- a/static/usage/v6/select/customization/button-text/index.md +++ b/static/usage/v6/select/customization/button-text/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/select/customization/interface-options/angular/example_component_html.md b/static/usage/v6/select/customization/interface-options/angular/example_component_html.md index ccaddb758e0..e1093bdf292 100644 --- a/static/usage/v6/select/customization/interface-options/angular/example_component_html.md +++ b/static/usage/v6/select/customization/interface-options/angular/example_component_html.md @@ -1,5 +1,5 @@ ```html - + Alert @@ -8,7 +8,7 @@ Pepperoni - + Popover @@ -17,7 +17,7 @@ Red - + Action Sheet diff --git a/static/usage/v6/select/customization/interface-options/index.md b/static/usage/v6/select/customization/interface-options/index.md index 5df93556be1..ac291deb492 100644 --- a/static/usage/v6/select/customization/interface-options/index.md +++ b/static/usage/v6/select/customization/interface-options/index.md @@ -8,9 +8,9 @@ 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/v6/select/customization/interface-options/javascript.md b/static/usage/v6/select/customization/interface-options/javascript.md index 8c06ebd788a..9f48ee33cf9 100644 --- a/static/usage/v6/select/customization/interface-options/javascript.md +++ b/static/usage/v6/select/customization/interface-options/javascript.md @@ -1,5 +1,5 @@ ```html - + Alert @@ -8,7 +8,7 @@ Pepperoni - + Popover @@ -17,7 +17,7 @@ Red - + Action Sheet @@ -34,7 +34,7 @@ header: 'Pizza Toppings', subHeader: 'Select your favorite topping', message: 'Choose only one', - translucent: true, + translucent: true }; customAlertSelect.interfaceOptions = customAlertOptions; @@ -42,14 +42,14 @@ const customPopoverOptions = { header: 'Hair Color', subHeader: 'Select your hair color', - message: 'Only select your dominant hair color', + message: 'Only select your dominant hair color' }; customPopoverSelect.interfaceOptions = customPopoverOptions; const customActionSheetSelect = document.getElementById('customActionSheetSelect'); const customActionSheetOptions = { header: 'Colors', - subHeader: 'Select your favorite color', + subHeader: 'Select your favorite color' }; customActionSheetSelect.interfaceOptions = customActionSheetOptions; diff --git a/static/usage/v6/select/customization/interface-options/react.md b/static/usage/v6/select/customization/interface-options/react.md index 7bc42d0a9f3..57cdc7a9c9a 100644 --- a/static/usage/v6/select/customization/interface-options/react.md +++ b/static/usage/v6/select/customization/interface-options/react.md @@ -6,22 +6,22 @@ function Example() { header: 'Pizza Toppings', subHeader: 'Select your favorite topping', message: 'Choose only one', - translucent: true, + translucent: true }; const customPopoverOptions = { header: 'Hair Color', subHeader: 'Select your hair color', - message: 'Only select your dominant hair color', + message: 'Only select your dominant hair color' }; const customActionSheetOptions = { header: 'Colors', - subHeader: 'Select your favorite color', + subHeader: 'Select your favorite color' }; return ( - + Alert @@ -30,7 +30,7 @@ function Example() { Pepperoni - + Popover @@ -39,7 +39,7 @@ function Example() { Red - + Action Sheet diff --git a/static/usage/v6/select/customization/interface-options/vue.md b/static/usage/v6/select/customization/interface-options/vue.md index 573b33c2115..7488095006d 100644 --- a/static/usage/v6/select/customization/interface-options/vue.md +++ b/static/usage/v6/select/customization/interface-options/vue.md @@ -1,6 +1,6 @@ ```html -``` +``` \ No newline at end of file diff --git a/static/usage/v6/select/typeahead/vue/vue_types_ts.md b/static/usage/v6/select/typeahead/vue/vue_types_ts.md index 42d4583e026..bdf47c9d0ae 100644 --- a/static/usage/v6/select/typeahead/vue/vue_types_ts.md +++ b/static/usage/v6/select/typeahead/vue/vue_types_ts.md @@ -2,5 +2,5 @@ export interface Item { text: string; value: string; -} +}; ``` diff --git a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md index 8423962a3e9..8b30337848c 100644 --- a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md +++ b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md @@ -4,9 +4,10 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.css'], + styleUrls: ['example.component.css'] }) export class ExampleComponent { public loaded = false; } -``` + +``` \ No newline at end of file diff --git a/static/usage/v6/skeleton-text/basic/index.md b/static/usage/v6/skeleton-text/basic/index.md index dbb102eec55..2e3371fb890 100644 --- a/static/usage/v6/skeleton-text/basic/index.md +++ b/static/usage/v6/skeleton-text/basic/index.md @@ -8,8 +8,8 @@ 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/v6/skeleton-text/basic/javascript.md b/static/usage/v6/skeleton-text/basic/javascript.md index da71f295063..5eefa7c1149 100644 --- a/static/usage/v6/skeleton-text/basic/javascript.md +++ b/static/usage/v6/skeleton-text/basic/javascript.md @@ -56,5 +56,6 @@ } setSkeletonText(); + ``` diff --git a/static/usage/v6/skeleton-text/basic/react.md b/static/usage/v6/skeleton-text/basic/react.md index a247849a478..2ea377034c9 100644 --- a/static/usage/v6/skeleton-text/basic/react.md +++ b/static/usage/v6/skeleton-text/basic/react.md @@ -1,6 +1,6 @@ ```tsx import React, { useState } from 'react'; -import { +import { IonButton, IonIcon, IonItem, @@ -15,12 +15,12 @@ function Example() { const [loaded, setLoaded] = useState(false); return ( <> - {loaded && ( + {loaded && Albums - +

Abbey Road

@@ -29,11 +29,11 @@ function Example() { - )} - {!loaded && ( + } + {!loaded && - + @@ -41,21 +41,21 @@ function Example() {

- +

- +

- +

- )} + } setLoaded(!loaded)}>Toggle ); } export default Example; -``` +``` \ No newline at end of file diff --git a/static/usage/v6/skeleton-text/basic/vue.md b/static/usage/v6/skeleton-text/basic/vue.md index f391050a009..c03a518af19 100644 --- a/static/usage/v6/skeleton-text/basic/vue.md +++ b/static/usage/v6/skeleton-text/basic/vue.md @@ -13,7 +13,7 @@ - + @@ -35,7 +35,7 @@ - + Toggle @@ -50,7 +50,7 @@ IonSkeletonText, IonThumbnail, } from '@ionic/vue'; - import { musicalNotes } from 'ionicons/icons'; + import { musicalNotes } from 'ionicons/icons' import { defineComponent, ref } from 'vue'; export default defineComponent({ @@ -66,13 +66,13 @@ }, setup() { const loaded = ref(false); - const setLoaded = (state: boolean) => (loaded.value = state); + const setLoaded = (state: boolean) => loaded.value = state; return { loaded, musicalNotes, - setLoaded, - }; - }, + setLoaded + } + } }); ``` diff --git a/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md index c59d8603262..67761872c60 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md @@ -4,4 +4,4 @@ ion-skeleton-text { --background: rgba(188, 0, 255, 0.065); --background-rgb: 188, 0, 255; } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/skeleton-text/theming/css-properties/index.md b/static/usage/v6/skeleton-text/theming/css-properties/index.md index 6a1ff3a4239..4ff16bd3470 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/index.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/skeleton-text/theming/css-properties/javascript.md b/static/usage/v6/skeleton-text/theming/css-properties/javascript.md index 90d27d3f31e..20463c6aba6 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/javascript.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/javascript.md @@ -26,6 +26,6 @@

- + ``` diff --git a/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md index c59d8603262..67761872c60 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md @@ -4,4 +4,4 @@ ion-skeleton-text { --background: rgba(188, 0, 255, 0.065); --background-rgb: 188, 0, 255; } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md index d66ea73ff7f..29e6e159f68 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md @@ -1,6 +1,13 @@ ```tsx import React from 'react'; -import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/react'; +import { + IonItem, + IonLabel, + IonList, + IonListHeader, + IonSkeletonText, + IonThumbnail, +} from '@ionic/react'; import './main.css'; @@ -8,7 +15,7 @@ function Example() { return ( - + @@ -16,13 +23,13 @@ function Example() {

- +

- +

- +

@@ -30,4 +37,4 @@ function Example() { ); } export default Example; -``` +``` \ No newline at end of file diff --git a/static/usage/v6/skeleton-text/theming/css-properties/vue.md b/static/usage/v6/skeleton-text/theming/css-properties/vue.md index 2785a0e8b51..418a7ca610f 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/vue.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/vue.md @@ -1,5 +1,5 @@ ```html - @@ -26,7 +30,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, + components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, }); ``` diff --git a/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md index 029f5d3ee56..4772826c933 100644 --- a/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md @@ -6,7 +6,9 @@ Menu - Menu Content is 350px wide and has a blue dashed border + + Menu Content is 350px wide and has a blue dashed border +
@@ -15,7 +17,9 @@ Main View - Main View Content + + Main View Content +
``` diff --git a/static/usage/v6/split-pane/theming/css-properties/index.md b/static/usage/v6/split-pane/theming/css-properties/index.md index 631972afc2b..d92888173f0 100644 --- a/static/usage/v6/split-pane/theming/css-properties/index.md +++ b/static/usage/v6/split-pane/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/split-pane/theming/css-properties/javascript.md b/static/usage/v6/split-pane/theming/css-properties/javascript.md index 37bd7b9e7f1..943993aa380 100644 --- a/static/usage/v6/split-pane/theming/css-properties/javascript.md +++ b/static/usage/v6/split-pane/theming/css-properties/javascript.md @@ -6,7 +6,9 @@ Menu - Menu Content is 350px wide and has a blue dashed border + + Menu Content is 350px wide and has a blue dashed border +
@@ -15,7 +17,9 @@ Main View - Main View Content + + Main View Content +
@@ -23,7 +27,7 @@ ion-split-pane { --side-width: 350px; --side-max-width: 350px; - + --border: 1px dashed #b3baff; } diff --git a/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md index 1d4ad6a2e19..7456a34359d 100644 --- a/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md @@ -13,16 +13,20 @@ function Example() { Menu - Menu Content is 350px wide and has a blue dashed border + + Menu Content is 350px wide and has a blue dashed border + - +
Main View - Main View Content + + Main View Content +
); diff --git a/static/usage/v6/split-pane/theming/css-properties/vue.md b/static/usage/v6/split-pane/theming/css-properties/vue.md index f0abcf95800..cc891eaeda1 100644 --- a/static/usage/v6/split-pane/theming/css-properties/vue.md +++ b/static/usage/v6/split-pane/theming/css-properties/vue.md @@ -7,16 +7,20 @@ Menu - Menu Content is 350px wide and has a blue dashed border + + Menu Content is 350px wide and has a blue dashed border + - +
Main View - Main View Content + + Main View Content +
@@ -26,7 +30,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, + components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, }); @@ -34,7 +38,7 @@ ion-split-pane { --side-width: 350px; --side-max-width: 350px; - + --border: 1px dashed #b3baff; } diff --git a/static/usage/v6/tabs/router/index.md b/static/usage/v6/tabs/router/index.md index 683c77b066a..92bdc7799fe 100644 --- a/static/usage/v6/tabs/router/index.md +++ b/static/usage/v6/tabs/router/index.md @@ -42,8 +42,8 @@ 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/v6/text/basic/angular.md b/static/usage/v6/text/basic/angular.md index e63da3cacf9..fb2f6064fba 100644 --- a/static/usage/v6/text/basic/angular.md +++ b/static/usage/v6/text/basic/angular.md @@ -13,9 +13,9 @@

- 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. + 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/v6/text/basic/javascript.md b/static/usage/v6/text/basic/javascript.md index e63da3cacf9..fb2f6064fba 100644 --- a/static/usage/v6/text/basic/javascript.md +++ b/static/usage/v6/text/basic/javascript.md @@ -13,9 +13,9 @@

- 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. + 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/v6/text/basic/react.md b/static/usage/v6/text/basic/react.md index da8882e3bf5..dac54e84471 100644 --- a/static/usage/v6/text/basic/react.md +++ b/static/usage/v6/text/basic/react.md @@ -19,14 +19,11 @@ function Example() {

- - - - 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. + + 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/v6/text/basic/vue.md b/static/usage/v6/text/basic/vue.md index b34cd3d437a..742167bf9f1 100644 --- a/static/usage/v6/text/basic/vue.md +++ b/static/usage/v6/text/basic/vue.md @@ -14,10 +14,10 @@

- 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. + 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/v6/textarea/autogrow/angular.md b/static/usage/v6/textarea/autogrow/angular.md index 03de94359b6..5ff7394eec0 100644 --- a/static/usage/v6/textarea/autogrow/angular.md +++ b/static/usage/v6/textarea/autogrow/angular.md @@ -1,10 +1,7 @@ ```html - + ``` diff --git a/static/usage/v6/textarea/autogrow/index.md b/static/usage/v6/textarea/autogrow/index.md index f09e447f5d1..9d0efc4679e 100644 --- a/static/usage/v6/textarea/autogrow/index.md +++ b/static/usage/v6/textarea/autogrow/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/textarea/autogrow/javascript.md b/static/usage/v6/textarea/autogrow/javascript.md index 4c2e15028fd..bea62987f5e 100644 --- a/static/usage/v6/textarea/autogrow/javascript.md +++ b/static/usage/v6/textarea/autogrow/javascript.md @@ -1,10 +1,7 @@ ```html - + ``` diff --git a/static/usage/v6/textarea/autogrow/vue.md b/static/usage/v6/textarea/autogrow/vue.md index 693814464e8..824ada24909 100644 --- a/static/usage/v6/textarea/autogrow/vue.md +++ b/static/usage/v6/textarea/autogrow/vue.md @@ -1,11 +1,8 @@ ```html diff --git a/static/usage/v6/textarea/basic/index.md b/static/usage/v6/textarea/basic/index.md index 8de25b999ae..3325f10b870 100644 --- a/static/usage/v6/textarea/basic/index.md +++ b/static/usage/v6/textarea/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/textarea/clear-on-edit/index.md b/static/usage/v6/textarea/clear-on-edit/index.md index d7c901468dc..4bb42164650 100644 --- a/static/usage/v6/textarea/clear-on-edit/index.md +++ b/static/usage/v6/textarea/clear-on-edit/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/textarea/theming/index.md b/static/usage/v6/textarea/theming/index.md index 6f5649a823d..3570856f99e 100644 --- a/static/usage/v6/textarea/theming/index.md +++ b/static/usage/v6/textarea/theming/index.md @@ -11,9 +11,9 @@ 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/v6/thumbnail/theming/css-properties/angular/example_component_css.md b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md index 74742dfe9f0..605855deb77 100644 --- a/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md @@ -1,3 +1,4 @@ + ```css ion-thumbnail { --size: 140px; diff --git a/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md index 119cfb8ee9c..8ef97cae761 100644 --- a/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md @@ -1,3 +1,4 @@ + ```html Silhouette of mountains diff --git a/static/usage/v6/thumbnail/theming/css-properties/index.md b/static/usage/v6/thumbnail/theming/css-properties/index.md index a4de9d15171..af98370979e 100644 --- a/static/usage/v6/thumbnail/theming/css-properties/index.md +++ b/static/usage/v6/thumbnail/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md index 1d0f352383f..37f4796d763 100644 --- a/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md @@ -1,3 +1,4 @@ + ```tsx import React from 'react'; import { IonThumbnail } from '@ionic/react'; diff --git a/static/usage/v6/title/basic/index.md b/static/usage/v6/title/basic/index.md index 6e2e2fb4dbd..8348f2ab712 100644 --- a/static/usage/v6/title/basic/index.md +++ b/static/usage/v6/title/basic/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/title/collapsible-large-title/basic/index.md b/static/usage/v6/title/collapsible-large-title/basic/index.md index fa9df224418..11869e671e5 100644 --- a/static/usage/v6/title/collapsible-large-title/basic/index.md +++ b/static/usage/v6/title/collapsible-large-title/basic/index.md @@ -6,11 +6,11 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/title/collapsible-large-title/buttons/index.md b/static/usage/v6/title/collapsible-large-title/buttons/index.md index ba7e73a1c04..f427df176fb 100644 --- a/static/usage/v6/title/collapsible-large-title/buttons/index.md +++ b/static/usage/v6/title/collapsible-large-title/buttons/index.md @@ -6,10 +6,10 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v6/title/theming/css-properties/index.md b/static/usage/v6/title/theming/css-properties/index.md index 7def080da5a..c08b16c85e7 100644 --- a/static/usage/v6/title/theming/css-properties/index.md +++ b/static/usage/v6/title/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v6/toast/buttons/angular/example_component_html.md b/static/usage/v6/toast/buttons/angular/example_component_html.md index 4ce5b83bc18..5d457cdbf2f 100644 --- a/static/usage/v6/toast/buttons/angular/example_component_html.md +++ b/static/usage/v6/toast/buttons/angular/example_component_html.md @@ -2,4 +2,4 @@ Click Me

{{ handlerMessage }}

{{ roleMessage }}

-``` +``` \ No newline at end of file diff --git a/static/usage/v6/toast/buttons/angular/example_component_ts.md b/static/usage/v6/toast/buttons/angular/example_component_ts.md index faf1f33ed5b..54dc88ac35c 100644 --- a/static/usage/v6/toast/buttons/angular/example_component_ts.md +++ b/static/usage/v6/toast/buttons/angular/example_component_ts.md @@ -20,18 +20,14 @@ export class ExampleComponent { { text: 'More Info', role: 'info', - handler: () => { - this.handlerMessage = 'More Info clicked'; - }, + handler: () => { this.handlerMessage = 'More Info clicked'; } }, { text: 'Dismiss', role: 'cancel', - handler: () => { - this.handlerMessage = 'Dismiss clicked'; - }, - }, - ], + handler: () => { this.handlerMessage = 'Dismiss clicked'; } + } + ] }); await toast.present(); @@ -40,4 +36,4 @@ export class ExampleComponent { this.roleMessage = `Dismissed with role: ${role}`; } } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/toast/buttons/index.md b/static/usage/v6/toast/buttons/index.md index a493503ddea..5bd8e1f56ce 100644 --- a/static/usage/v6/toast/buttons/index.md +++ b/static/usage/v6/toast/buttons/index.md @@ -8,9 +8,9 @@ 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/v6/toast/buttons/javascript.md b/static/usage/v6/toast/buttons/javascript.md index 521bb9a2aec..c5cea896bb3 100644 --- a/static/usage/v6/toast/buttons/javascript.md +++ b/static/usage/v6/toast/buttons/javascript.md @@ -15,18 +15,14 @@ { text: 'More Info', role: 'info', - handler: () => { - handlerOutput.innerText = 'More Info clicked'; - }, + handler: () => { handlerOutput.innerText = 'More Info clicked'; } }, { text: 'Dismiss', role: 'cancel', - handler: () => { - handlerOutput.innerText = 'Dismiss clicked'; - }, - }, - ], + handler: () => { handlerOutput.innerText = 'Dismiss clicked'; } + } + ] }); await toast.present(); diff --git a/static/usage/v6/toast/buttons/react.md b/static/usage/v6/toast/buttons/react.md index 7f329e63ec7..ac08a9b543b 100644 --- a/static/usage/v6/toast/buttons/react.md +++ b/static/usage/v6/toast/buttons/react.md @@ -19,19 +19,15 @@ function Example() { { text: 'More Info', role: 'info', - handler: () => { - setHandlerMessage('More Info clicked'); - }, + handler: () => { setHandlerMessage('More Info clicked'); } }, { text: 'Dismiss', role: 'cancel', - handler: () => { - setHandlerMessage('Dismiss clicked'); - }, - }, - ], - }); + handler: () => { setHandlerMessage('Dismiss clicked'); } + } + ] + }) }} > Click Me diff --git a/static/usage/v6/toast/buttons/vue.md b/static/usage/v6/toast/buttons/vue.md index 762aff51aa2..ec7da81c54c 100644 --- a/static/usage/v6/toast/buttons/vue.md +++ b/static/usage/v6/toast/buttons/vue.md @@ -25,18 +25,14 @@ { text: 'More Info', role: 'info', - handler: () => { - this.handlerMessage = 'More Info clicked'; - }, + handler: () => { this.handlerMessage = 'More Info clicked'; } }, { text: 'Dismiss', role: 'cancel', - handler: () => { - this.handlerMessage = 'Dismiss clicked'; - }, - }, - ], + handler: () => { this.handlerMessage = 'Dismiss clicked'; } + } + ] }); await toast.present(); diff --git a/static/usage/v6/toast/icon/angular/example_component_html.md b/static/usage/v6/toast/icon/angular/example_component_html.md index 91e6579dfa8..976194efc1e 100644 --- a/static/usage/v6/toast/icon/angular/example_component_html.md +++ b/static/usage/v6/toast/icon/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` +``` \ No newline at end of file diff --git a/static/usage/v6/toast/icon/angular/example_component_ts.md b/static/usage/v6/toast/icon/angular/example_component_ts.md index d72053bd950..addffa2daf9 100644 --- a/static/usage/v6/toast/icon/angular/example_component_ts.md +++ b/static/usage/v6/toast/icon/angular/example_component_ts.md @@ -13,10 +13,10 @@ export class ExampleComponent { const toast = await this.toastController.create({ message: 'Hello World!', duration: 1500, - icon: 'globe', + icon: 'globe' }); await toast.present(); } } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/toast/icon/index.md b/static/usage/v6/toast/icon/index.md index b6aea1ec824..d636c54d905 100644 --- a/static/usage/v6/toast/icon/index.md +++ b/static/usage/v6/toast/icon/index.md @@ -8,9 +8,9 @@ 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/v6/toast/icon/javascript.md b/static/usage/v6/toast/icon/javascript.md index 685c496cc26..b63e8550ab3 100644 --- a/static/usage/v6/toast/icon/javascript.md +++ b/static/usage/v6/toast/icon/javascript.md @@ -6,9 +6,9 @@ const toast = await this.toastController.create({ message: 'Hello World!', duration: 1500, - icon: 'globe', + icon: 'globe' }); - + await toast.present(); } diff --git a/static/usage/v6/toast/icon/react.md b/static/usage/v6/toast/icon/react.md index 8ccf5670d69..25d758c16b6 100644 --- a/static/usage/v6/toast/icon/react.md +++ b/static/usage/v6/toast/icon/react.md @@ -12,8 +12,8 @@ function Example() { presentToast({ message: 'Hello World!', duration: 1500, - icon: globe, - }); + icon: globe + }) }} > Click Me diff --git a/static/usage/v6/toast/icon/vue.md b/static/usage/v6/toast/icon/vue.md index 4cbe7510e4b..d3a123f598b 100644 --- a/static/usage/v6/toast/icon/vue.md +++ b/static/usage/v6/toast/icon/vue.md @@ -14,7 +14,7 @@ const toast = await toastController.create({ message: 'Hello World!', duration: 1500, - icon: globe, + icon: globe }); await toast.present(); diff --git a/static/usage/v6/toast/layout/angular/example_component_html.md b/static/usage/v6/toast/layout/angular/example_component_html.md index 195a1841204..8bd086f7ba5 100644 --- a/static/usage/v6/toast/layout/angular/example_component_html.md +++ b/static/usage/v6/toast/layout/angular/example_component_html.md @@ -1,4 +1,4 @@ ```html Open Baseline Layout Toast Click Stacked Layout Toast -``` +``` \ No newline at end of file diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md index 01636b04a97..6e8c63a9b58 100644 --- a/static/usage/v6/toast/layout/angular/example_component_ts.md +++ b/static/usage/v6/toast/layout/angular/example_component_ts.md @@ -8,29 +8,34 @@ import type { ToastOptions } from '@ionic/angular'; templateUrl: 'example.component.html', }) export class ExampleComponent { - constructor(private toastController: ToastController) {} + constructor(private toastController: ToastController) {} + async presentToast(opts: ToastOptions) { const toast = await this.toastController.create(opts); - + await toast.present(); } - + async presentBaselineToast() { await this.presentToast({ duration: 3000, - message: 'This is a toast with a long message and a button that appears on the same line.', - buttons: [{ text: 'Action With Long Text' }], + message: "This is a toast with a long message and a button that appears on the same line.", + buttons: [ + { text: 'Action With Long Text'} + ] }); } - + async presentStackedToast() { await this.presentToast({ duration: 3000, - message: 'This is a toast with a long message and a button that appears on the next line.', - buttons: [{ text: 'Action With Long Text' }], - layout: 'stacked', + message: "This is a toast with a long message and a button that appears on the next line.", + buttons: [ + { text: 'Action With Long Text'} + ], + layout: "stacked" }); } } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/toast/layout/index.md b/static/usage/v6/toast/layout/index.md index 2675f425f80..331eef6b0f5 100644 --- a/static/usage/v6/toast/layout/index.md +++ b/static/usage/v6/toast/layout/index.md @@ -8,9 +8,9 @@ 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/v6/toast/layout/javascript.md b/static/usage/v6/toast/layout/javascript.md index 5d9a27392f9..2350799f7e1 100644 --- a/static/usage/v6/toast/layout/javascript.md +++ b/static/usage/v6/toast/layout/javascript.md @@ -5,24 +5,28 @@ diff --git a/static/usage/v6/toast/layout/react.md b/static/usage/v6/toast/layout/react.md index 30f0b95da5a..68813f1eb1f 100644 --- a/static/usage/v6/toast/layout/react.md +++ b/static/usage/v6/toast/layout/react.md @@ -11,9 +11,11 @@ function Example() { onClick={() => { presentToast({ duration: 3000, - message: 'This is a toast with a long message and a button that appears on the next line.', - buttons: [{ text: 'Action With Long Text' }], - }); + message: "This is a toast with a long message and a button that appears on the next line.", + buttons: [ + { text: 'Action With Long Text'} + ] + }) }} > Open Baseline Layout Toast @@ -22,10 +24,12 @@ function Example() { onClick={() => { presentToast({ duration: 3000, - message: 'This is a toast with a long message and a button that appears on the next line.', - buttons: [{ text: 'Action With Long Text' }], - layout: 'stacked', - }); + message: "This is a toast with a long message and a button that appears on the next line.", + buttons: [ + { text: 'Action With Long Text'} + ], + layout: "stacked" + }) }} > Open Stacked Layout Toast diff --git a/static/usage/v6/toast/layout/vue.md b/static/usage/v6/toast/layout/vue.md index ff3865c3b9c..5b884ea7caf 100644 --- a/static/usage/v6/toast/layout/vue.md +++ b/static/usage/v6/toast/layout/vue.md @@ -14,29 +14,33 @@ setup() { const presentToast = async (opts: ToastOptions) => { const toast = await toastController.create(opts); - + await toast.present(); - }; - + } + const presentBaselineToast = async () => { await presentToast({ duration: 3000, - message: 'This is a toast with a long message and a button that appears on the same line.', - buttons: [{ text: 'Action With Long Text' }], + message: "This is a toast with a long message and a button that appears on the same line.", + buttons: [ + { text: 'Action With Long Text'} + ] }); - }; - + } + const presentStackedToast = async () => { await presentToast({ duration: 3000, - message: 'This is a toast with a long message and a button that appears on the next line.', - buttons: [{ text: 'Action With Long Text' }], - layout: 'stacked', + message: "This is a toast with a long message and a button that appears on the next line.", + buttons: [ + { text: 'Action With Long Text'} + ], + layout: "stacked" }); - }; - - return { presentBaselineToast, presentStackedToast }; - }, + } + + return { presentBaselineToast, presentStackedToast } + } }); ``` diff --git a/static/usage/v6/toast/presenting/controller/angular/example_component_html.md b/static/usage/v6/toast/presenting/controller/angular/example_component_html.md index 2ed1eea0254..962fcd0e355 100644 --- a/static/usage/v6/toast/presenting/controller/angular/example_component_html.md +++ b/static/usage/v6/toast/presenting/controller/angular/example_component_html.md @@ -2,4 +2,4 @@ Present Toast At the Top Present Toast At the Middle Present Toast At the Bottom -``` +``` \ No newline at end of file diff --git a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md index db133a99f1e..c772728c3c1 100644 --- a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md +++ b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md @@ -13,10 +13,10 @@ export class ExampleComponent { const toast = await this.toastController.create({ message: 'Hello World!', duration: 1500, - position: position, + position: position }); await toast.present(); } } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/toast/presenting/controller/index.md b/static/usage/v6/toast/presenting/controller/index.md index dad0f52a79c..492699916c0 100644 --- a/static/usage/v6/toast/presenting/controller/index.md +++ b/static/usage/v6/toast/presenting/controller/index.md @@ -8,9 +8,9 @@ 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/v6/toast/presenting/controller/javascript.md b/static/usage/v6/toast/presenting/controller/javascript.md index 52c089331fa..5260ba8d1a1 100644 --- a/static/usage/v6/toast/presenting/controller/javascript.md +++ b/static/usage/v6/toast/presenting/controller/javascript.md @@ -8,7 +8,7 @@ const toast = await this.toastController.create({ message: 'Hello World!', duration: 1500, - position: position, + position: position }); await toast.present(); diff --git a/static/usage/v6/toast/presenting/controller/react.md b/static/usage/v6/toast/presenting/controller/react.md index b4e8d0913ca..1dd38b3cd48 100644 --- a/static/usage/v6/toast/presenting/controller/react.md +++ b/static/usage/v6/toast/presenting/controller/react.md @@ -9,21 +9,15 @@ function Example() { present({ message: 'Hello World!', duration: 1500, - position: position, + position: position }); }; return ( <> - presentToast('top')}> - Present Toast At the Top - - presentToast('middle')}> - Present Toast At the Middle - - presentToast('bottom')}> - Present Toast At the Bottom - + presentToast('top')}>Present Toast At the Top + presentToast('middle')}>Present Toast At the Middle + presentToast('bottom')}>Present Toast At the Bottom ); } diff --git a/static/usage/v6/toast/presenting/controller/vue.md b/static/usage/v6/toast/presenting/controller/vue.md index 7f2ade91031..ac520d0e7b9 100644 --- a/static/usage/v6/toast/presenting/controller/vue.md +++ b/static/usage/v6/toast/presenting/controller/vue.md @@ -15,7 +15,7 @@ const toast = await toastController.create({ message: 'Hello World!', duration: 1500, - position: position, + position: position }); await toast.present(); diff --git a/static/usage/v6/toast/theming/angular/example_component_ts.md b/static/usage/v6/toast/theming/angular/example_component_ts.md index 7f490b9bacc..62c8151b0f4 100644 --- a/static/usage/v6/toast/theming/angular/example_component_ts.md +++ b/static/usage/v6/toast/theming/angular/example_component_ts.md @@ -17,8 +17,8 @@ export class ExampleComponent { buttons: [ { text: 'Dismiss', - role: 'cancel', - }, + role: 'cancel' + } ], }); diff --git a/static/usage/v6/toast/theming/angular/global_css.md b/static/usage/v6/toast/theming/angular/global_css.md index 70ef6f5cfd6..4d261622074 100644 --- a/static/usage/v6/toast/theming/angular/global_css.md +++ b/static/usage/v6/toast/theming/angular/global_css.md @@ -1,10 +1,10 @@ ```css ion-toast.custom-toast { - --background: #f4f4fa; + --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; } @@ -14,4 +14,4 @@ ion-toast.custom-toast::part(button) { color: #030207; font-size: 15px; } -``` +``` \ No newline at end of file diff --git a/static/usage/v6/toast/theming/index.md b/static/usage/v6/toast/theming/index.md index 868ca8b9fe6..0e5b1b56e72 100644 --- a/static/usage/v6/toast/theming/index.md +++ b/static/usage/v6/toast/theming/index.md @@ -11,9 +11,9 @@ 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/v6/toast/theming/javascript.md b/static/usage/v6/toast/theming/javascript.md index 06a4f5d7b09..b540eccaaf7 100644 --- a/static/usage/v6/toast/theming/javascript.md +++ b/static/usage/v6/toast/theming/javascript.md @@ -10,8 +10,8 @@ buttons: [ { text: 'Dismiss', - role: 'cancel', - }, + role: 'cancel' + } ], }); @@ -21,11 +21,11 @@ ``` diff --git a/static/usage/v7/accordion/customization/theming/react/main_css.md b/static/usage/v7/accordion/customization/theming/react/main_css.md index 141236c6633..6054219017a 100644 --- a/static/usage/v7/accordion/customization/theming/react/main_css.md +++ b/static/usage/v7/accordion/customization/theming/react/main_css.md @@ -1,9 +1,9 @@ ```css :root { --ion-color-rose: #fecdd3; - --ion-color-rose-rgb: 254, 205, 211; + --ion-color-rose-rgb: 254,205,211; --ion-color-rose-contrast: #000000; - --ion-color-rose-contrast-rgb: 0, 0, 0; + --ion-color-rose-contrast-rgb: 0,0,0; --ion-color-rose-shade: #e0b4ba; --ion-color-rose-tint: #fed2d7; } @@ -17,7 +17,7 @@ --ion-color-tint: var(--ion-color-rose-tint); } -div[slot='content'] { - background: rgba(var(--ion-color-rose-rgb), 0.25); +div[slot="content"] { + background: rgba(var(--ion-color-rose-rgb), 0.25) } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/accordion/customization/theming/react/main_tsx.md b/static/usage/v7/accordion/customization/theming/react/main_tsx.md index ecc51a9e15b..348576ae0fe 100644 --- a/static/usage/v7/accordion/customization/theming/react/main_tsx.md +++ b/static/usage/v7/accordion/customization/theming/react/main_tsx.md @@ -1,6 +1,11 @@ ```tsx import React from 'react'; -import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +import { + IonAccordion, + IonAccordionGroup, + IonItem, + IonLabel +} from '@ionic/react'; import './main.css'; diff --git a/static/usage/v7/accordion/customization/theming/vue.md b/static/usage/v7/accordion/customization/theming/vue.md index c049c4b89d8..cf55542e739 100644 --- a/static/usage/v7/accordion/customization/theming/vue.md +++ b/static/usage/v7/accordion/customization/theming/vue.md @@ -5,51 +5,62 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v7/accordion/disable-group/index.md b/static/usage/v7/accordion/disable-group/index.md index 7bdae730833..204508c6b3c 100644 --- a/static/usage/v7/accordion/disable-group/index.md +++ b/static/usage/v7/accordion/disable-group/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/accordion/disable/group/index.md b/static/usage/v7/accordion/disable/group/index.md index bedac447945..c564a2d16bd 100644 --- a/static/usage/v7/accordion/disable/group/index.md +++ b/static/usage/v7/accordion/disable/group/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/accordion/disable/individual/index.md b/static/usage/v7/accordion/disable/individual/index.md index f9b3dd0e32e..28172bca32b 100644 --- a/static/usage/v7/accordion/disable/individual/index.md +++ b/static/usage/v7/accordion/disable/individual/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/accordion/listen-changes/index.md b/static/usage/v7/accordion/listen-changes/index.md index ae156ffc54f..a10dd609b4f 100644 --- a/static/usage/v7/accordion/listen-changes/index.md +++ b/static/usage/v7/accordion/listen-changes/index.md @@ -8,8 +8,8 @@ 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/v7/accordion/multiple/index.md b/static/usage/v7/accordion/multiple/index.md index 8dc1c9c4a25..868eaaa7c16 100644 --- a/static/usage/v7/accordion/multiple/index.md +++ b/static/usage/v7/accordion/multiple/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/accordion/readonly/group/angular.md b/static/usage/v7/accordion/readonly/group/angular.md index 4ebf8c55e4e..99c084f8064 100644 --- a/static/usage/v7/accordion/readonly/group/angular.md +++ b/static/usage/v7/accordion/readonly/group/angular.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v7/accordion/readonly/group/index.md b/static/usage/v7/accordion/readonly/group/index.md index fcba0d9aa28..78689ede73f 100644 --- a/static/usage/v7/accordion/readonly/group/index.md +++ b/static/usage/v7/accordion/readonly/group/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/accordion/readonly/group/javascript.md b/static/usage/v7/accordion/readonly/group/javascript.md index d511ea5ff0b..27f216fb4f9 100644 --- a/static/usage/v7/accordion/readonly/group/javascript.md +++ b/static/usage/v7/accordion/readonly/group/javascript.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v7/accordion/readonly/group/react.md b/static/usage/v7/accordion/readonly/group/react.md index 2f26afde9ea..5383b732d96 100644 --- a/static/usage/v7/accordion/readonly/group/react.md +++ b/static/usage/v7/accordion/readonly/group/react.md @@ -1,6 +1,11 @@ ```tsx import React from 'react'; -import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +import { + IonAccordion, + IonAccordionGroup, + IonItem, + IonLabel +} from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v7/accordion/readonly/group/vue.md b/static/usage/v7/accordion/readonly/group/vue.md index 0de1be3fe91..aa6a662a802 100644 --- a/static/usage/v7/accordion/readonly/group/vue.md +++ b/static/usage/v7/accordion/readonly/group/vue.md @@ -5,33 +5,44 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
diff --git a/static/usage/v7/accordion/readonly/individual/angular.md b/static/usage/v7/accordion/readonly/individual/angular.md index 94013b9d07d..7f9f8f5bb2e 100644 --- a/static/usage/v7/accordion/readonly/individual/angular.md +++ b/static/usage/v7/accordion/readonly/individual/angular.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion (Readonly) -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v7/accordion/readonly/individual/index.md b/static/usage/v7/accordion/readonly/individual/index.md index f0aab939939..c7efd45b803 100644 --- a/static/usage/v7/accordion/readonly/individual/index.md +++ b/static/usage/v7/accordion/readonly/individual/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/accordion/readonly/individual/javascript.md b/static/usage/v7/accordion/readonly/individual/javascript.md index e1f78d726db..eec083da61a 100644 --- a/static/usage/v7/accordion/readonly/individual/javascript.md +++ b/static/usage/v7/accordion/readonly/individual/javascript.md @@ -4,19 +4,25 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion (Readonly) -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
``` diff --git a/static/usage/v7/accordion/readonly/individual/react.md b/static/usage/v7/accordion/readonly/individual/react.md index a6d28a427cd..7e94d274b32 100644 --- a/static/usage/v7/accordion/readonly/individual/react.md +++ b/static/usage/v7/accordion/readonly/individual/react.md @@ -1,6 +1,11 @@ ```tsx import React from 'react'; -import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +import { + IonAccordion, + IonAccordionGroup, + IonItem, + IonLabel +} from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v7/accordion/readonly/individual/vue.md b/static/usage/v7/accordion/readonly/individual/vue.md index b9a5daac451..2e02ebd3679 100644 --- a/static/usage/v7/accordion/readonly/individual/vue.md +++ b/static/usage/v7/accordion/readonly/individual/vue.md @@ -5,33 +5,44 @@ First Accordion -
First Content
+
+ First Content +
Second Accordion (Readonly) -
Second Content
+
+ Second Content +
Third Accordion -
Third Content
+
+ Third Content +
diff --git a/static/usage/v7/accordion/toggle/index.md b/static/usage/v7/accordion/toggle/index.md index 84dc8bc9ed1..8f488dbb4b5 100644 --- a/static/usage/v7/accordion/toggle/index.md +++ b/static/usage/v7/accordion/toggle/index.md @@ -8,8 +8,8 @@ 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/v7/action-sheet/controller/index.md b/static/usage/v7/action-sheet/controller/index.md index c91c14bac7c..f761b958240 100644 --- a/static/usage/v7/action-sheet/controller/index.md +++ b/static/usage/v7/action-sheet/controller/index.md @@ -10,8 +10,8 @@ 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/v7/action-sheet/inline/isOpen/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md index 78d9ddf05c8..381691b1f0c 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md @@ -12,24 +12,24 @@ export class ExampleComponent { text: 'Delete', role: 'destructive', data: { - action: 'delete', - }, + action: 'delete' + } }, { text: 'Share', data: { - action: 'share', - }, + action: 'share' + } }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel', - }, - }, + action: 'cancel' + } + } ]; - + setOpen(isOpen: boolean) { this.isActionSheetOpen = isOpen; } diff --git a/static/usage/v7/action-sheet/inline/isOpen/index.md b/static/usage/v7/action-sheet/inline/isOpen/index.md index 17f68db345d..86cf87ab2cd 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/index.md +++ b/static/usage/v7/action-sheet/inline/isOpen/index.md @@ -10,8 +10,8 @@ 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/v7/action-sheet/inline/isOpen/javascript.md b/static/usage/v7/action-sheet/inline/isOpen/javascript.md index 2c0e3b11879..6557f4f4c50 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/javascript.md +++ b/static/usage/v7/action-sheet/inline/isOpen/javascript.md @@ -10,22 +10,22 @@ text: 'Delete', role: 'destructive', data: { - action: 'delete', - }, + action: 'delete' + } }, { text: 'Share', data: { - action: 'share', - }, + action: 'share' + } }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel', - }, - }, + action: 'cancel' + } + } ]; actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => { diff --git a/static/usage/v7/action-sheet/inline/isOpen/react.md b/static/usage/v7/action-sheet/inline/isOpen/react.md index aebfa63c093..5497ad7b574 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/react.md +++ b/static/usage/v7/action-sheet/inline/isOpen/react.md @@ -16,22 +16,22 @@ function Example() { text: 'Delete', role: 'destructive', data: { - action: 'delete', - }, + action: 'delete' + } }, { text: 'Share', data: { - action: 'share', - }, + action: 'share' + } }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel', - }, - }, + action: 'cancel' + } + } ]} onDidDismiss={() => setIsOpen(false)} > diff --git a/static/usage/v7/action-sheet/inline/isOpen/vue.md b/static/usage/v7/action-sheet/inline/isOpen/vue.md index 9d82efd4ea1..a3131033fff 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/vue.md +++ b/static/usage/v7/action-sheet/inline/isOpen/vue.md @@ -47,7 +47,7 @@ return { actionSheetButtons, isOpen, - setOpen, + setOpen }; }, }; diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md index b2bebe5de6c..bf4d4580341 100644 --- a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md +++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md @@ -1,4 +1,8 @@ ```html Open - + ``` diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md index f991151c4a1..2834f65e3e3 100644 --- a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md @@ -11,22 +11,22 @@ export class ExampleComponent { text: 'Delete', role: 'destructive', data: { - action: 'delete', - }, + action: 'delete' + } }, { text: 'Share', data: { - action: 'share', - }, + action: 'share' + } }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel', - }, - }, + action: 'cancel' + } + } ]; } ``` diff --git a/static/usage/v7/action-sheet/inline/trigger/index.md b/static/usage/v7/action-sheet/inline/trigger/index.md index 542d6d52c48..b35cd485cbe 100644 --- a/static/usage/v7/action-sheet/inline/trigger/index.md +++ b/static/usage/v7/action-sheet/inline/trigger/index.md @@ -10,8 +10,8 @@ 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/v7/action-sheet/inline/trigger/javascript.md b/static/usage/v7/action-sheet/inline/trigger/javascript.md index d705a0162b5..8e769fe0ed1 100644 --- a/static/usage/v7/action-sheet/inline/trigger/javascript.md +++ b/static/usage/v7/action-sheet/inline/trigger/javascript.md @@ -1,6 +1,9 @@ ```html Open - + ``` diff --git a/static/usage/v7/action-sheet/inline/trigger/react.md b/static/usage/v7/action-sheet/inline/trigger/react.md index 54c1793d713..6890d0be7a8 100644 --- a/static/usage/v7/action-sheet/inline/trigger/react.md +++ b/static/usage/v7/action-sheet/inline/trigger/react.md @@ -14,22 +14,22 @@ function Example() { text: 'Delete', role: 'destructive', data: { - action: 'delete', - }, + action: 'delete' + } }, { text: 'Share', data: { - action: 'share', - }, + action: 'share' + } }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel', - }, - }, + action: 'cancel' + } + } ]} > diff --git a/static/usage/v7/action-sheet/inline/trigger/vue.md b/static/usage/v7/action-sheet/inline/trigger/vue.md index c32a8ea9bdd..4c681af50b6 100644 --- a/static/usage/v7/action-sheet/inline/trigger/vue.md +++ b/static/usage/v7/action-sheet/inline/trigger/vue.md @@ -1,7 +1,11 @@ ```html ``` diff --git a/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md b/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md index fc0c08e0a57..d66211df842 100644 --- a/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md @@ -18,22 +18,22 @@ function Example() { text: 'Delete', role: 'destructive', data: { - action: 'delete', - }, + action: 'delete' + } }, { text: 'Share', data: { - action: 'share', - }, + action: 'share' + } }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel', - }, - }, + action: 'cancel' + } + } ]} > diff --git a/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md index d9714abb668..a23a02b2aca 100644 --- a/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md @@ -12,22 +12,22 @@ export class ExampleComponent { text: 'Delete', role: 'destructive', data: { - action: 'delete', - }, + action: 'delete' + } }, { text: 'Share', data: { - action: 'share', - }, + action: 'share' + } }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel', - }, - }, + action: 'cancel' + } + } ]; constructor() {} diff --git a/static/usage/v7/action-sheet/theming/styling/index.md b/static/usage/v7/action-sheet/theming/styling/index.md index 57c0cd35e7f..67a346b3318 100644 --- a/static/usage/v7/action-sheet/theming/styling/index.md +++ b/static/usage/v7/action-sheet/theming/styling/index.md @@ -12,8 +12,8 @@ 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/v7/action-sheet/theming/styling/javascript.md b/static/usage/v7/action-sheet/theming/styling/javascript.md index 90e2725d0df..8d578dbb51e 100644 --- a/static/usage/v7/action-sheet/theming/styling/javascript.md +++ b/static/usage/v7/action-sheet/theming/styling/javascript.md @@ -44,22 +44,22 @@ text: 'Delete', role: 'destructive', data: { - action: 'delete', - }, + action: 'delete' + } }, { text: 'Share', data: { - action: 'share', - }, + action: 'share' + } }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel', - }, - }, + action: 'cancel' + } + } ]; ``` diff --git a/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md b/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md index fc0c08e0a57..d66211df842 100644 --- a/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md +++ b/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md @@ -18,22 +18,22 @@ function Example() { text: 'Delete', role: 'destructive', data: { - action: 'delete', - }, + action: 'delete' + } }, { text: 'Share', data: { - action: 'share', - }, + action: 'share' + } }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel', - }, - }, + action: 'cancel' + } + } ]} > diff --git a/static/usage/v7/alert/buttons/angular/example_component_html.md b/static/usage/v7/alert/buttons/angular/example_component_html.md index 5db8454f7b2..bd9fb37882c 100644 --- a/static/usage/v7/alert/buttons/angular/example_component_html.md +++ b/static/usage/v7/alert/buttons/angular/example_component_html.md @@ -8,4 +8,4 @@ >

{{ handlerMessage }}

{{ roleMessage }}

-``` +``` \ No newline at end of file diff --git a/static/usage/v7/alert/buttons/angular/example_component_ts.md b/static/usage/v7/alert/buttons/angular/example_component_ts.md index e3038179e13..89b76aaed6a 100644 --- a/static/usage/v7/alert/buttons/angular/example_component_ts.md +++ b/static/usage/v7/alert/buttons/angular/example_component_ts.md @@ -13,17 +13,13 @@ export class ExampleComponent { { text: 'Cancel', role: 'cancel', - handler: () => { - this.handlerMessage = 'Alert canceled'; - }, + handler: () => { this.handlerMessage = 'Alert canceled'; } }, { text: 'OK', role: 'confirm', - handler: () => { - this.handlerMessage = 'Alert confirmed'; - }, - }, + handler: () => { this.handlerMessage = 'Alert confirmed'; } + } ]; setResult(ev) { diff --git a/static/usage/v7/alert/buttons/index.md b/static/usage/v7/alert/buttons/index.md index e675d03c07b..0da89f1f7bd 100644 --- a/static/usage/v7/alert/buttons/index.md +++ b/static/usage/v7/alert/buttons/index.md @@ -8,9 +8,9 @@ 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/v7/alert/buttons/javascript.md b/static/usage/v7/alert/buttons/javascript.md index 292a5d30c2f..6f70843e204 100644 --- a/static/usage/v7/alert/buttons/javascript.md +++ b/static/usage/v7/alert/buttons/javascript.md @@ -13,17 +13,13 @@ { text: 'Cancel', role: 'cancel', - handler: () => { - handlerOutput.innerText = 'Alert canceled'; - }, + handler: () => { handlerOutput.innerText = 'Alert canceled'; } }, { text: 'OK', role: 'confirm', - handler: () => { - handlerOutput.innerText = 'Alert confirmed'; - }, - }, + handler: () => { handlerOutput.innerText = 'Alert confirmed'; } + } ]; alert.addEventListener('ionAlertDidDismiss', (ev) => { diff --git a/static/usage/v7/alert/buttons/vue.md b/static/usage/v7/alert/buttons/vue.md index cd126758598..50cf42bb5a3 100644 --- a/static/usage/v7/alert/buttons/vue.md +++ b/static/usage/v7/alert/buttons/vue.md @@ -40,13 +40,13 @@ const setResult = (ev: CustomEvent) => { roleMessage.value = `Dismissed with role: ${ev.detail.role}`; - }; + } return { handlerMessage, roleMessage, alertButtons, - setResult, + setResult }; }, }; diff --git a/static/usage/v7/alert/customization/angular/example_component_html.md b/static/usage/v7/alert/customization/angular/example_component_html.md index 762d3c21d89..0da962b2489 100644 --- a/static/usage/v7/alert/customization/angular/example_component_html.md +++ b/static/usage/v7/alert/customization/angular/example_component_html.md @@ -1,4 +1,9 @@ ```html Click Me - + ``` diff --git a/static/usage/v7/alert/customization/angular/global_css.md b/static/usage/v7/alert/customization/angular/global_css.md index c84c1456e58..c4d1f859c34 100644 --- a/static/usage/v7/alert/customization/angular/global_css.md +++ b/static/usage/v7/alert/customization/angular/global_css.md @@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm { } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) } .ios button.alert-button.alert-button-cancel { @@ -30,4 +30,4 @@ button.alert-button.alert-button-confirm { border-bottom-right-radius: 13px; border-top-right-radius: 13px; } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/alert/customization/index.md b/static/usage/v7/alert/customization/index.md index 9c683943e06..59bc30dd589 100644 --- a/static/usage/v7/alert/customization/index.md +++ b/static/usage/v7/alert/customization/index.md @@ -11,9 +11,9 @@ 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/v7/alert/customization/javascript.md b/static/usage/v7/alert/customization/javascript.md index a3c31a1b432..f57e9958bfb 100644 --- a/static/usage/v7/alert/customization/javascript.md +++ b/static/usage/v7/alert/customization/javascript.md @@ -8,12 +8,12 @@ alert.buttons = [ { text: 'No', - cssClass: 'alert-button-cancel', + cssClass: 'alert-button-cancel' }, { text: 'Yes', - cssClass: 'alert-button-confirm', - }, + cssClass: 'alert-button-confirm' + } ]; @@ -36,7 +36,7 @@ } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) } .ios button.alert-button.alert-button-cancel { diff --git a/static/usage/v7/alert/customization/react/main_css.md b/static/usage/v7/alert/customization/react/main_css.md index c84c1456e58..c4d1f859c34 100644 --- a/static/usage/v7/alert/customization/react/main_css.md +++ b/static/usage/v7/alert/customization/react/main_css.md @@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm { } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) } .ios button.alert-button.alert-button-cancel { @@ -30,4 +30,4 @@ button.alert-button.alert-button-confirm { border-bottom-right-radius: 13px; border-top-right-radius: 13px; } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/alert/customization/vue.md b/static/usage/v7/alert/customization/vue.md index c526c93de8d..7bd279bd0c1 100644 --- a/static/usage/v7/alert/customization/vue.md +++ b/static/usage/v7/alert/customization/vue.md @@ -1,7 +1,12 @@ ```html ``` diff --git a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md index 0ae990d9a50..fec220f8ecc 100644 --- a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md +++ b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md @@ -6,4 +6,4 @@ [buttons]="alertButtons" [inputs]="alertInputs" > -``` +``` \ No newline at end of file diff --git a/static/usage/v7/alert/inputs/text-inputs/index.md b/static/usage/v7/alert/inputs/text-inputs/index.md index 0ad166cf9bf..6c56317816e 100644 --- a/static/usage/v7/alert/inputs/text-inputs/index.md +++ b/static/usage/v7/alert/inputs/text-inputs/index.md @@ -8,9 +8,9 @@ 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/v7/alert/inputs/text-inputs/javascript.md b/static/usage/v7/alert/inputs/text-inputs/javascript.md index bbbd043c5e7..c75afba0a15 100644 --- a/static/usage/v7/alert/inputs/text-inputs/javascript.md +++ b/static/usage/v7/alert/inputs/text-inputs/javascript.md @@ -8,24 +8,24 @@ alert.buttons = ['OK']; alert.inputs = [ { - placeholder: 'Name', + placeholder: 'Name' }, { placeholder: 'Nickname (max 8 characters)', attributes: { - maxlength: 8, - }, + maxlength: 8 + } }, { type: 'number', placeholder: 'Age', min: 1, - max: 100, + max: 100 }, { type: 'textarea', - placeholder: 'A little about yourself', - }, + placeholder: 'A little about yourself' + } ]; ``` diff --git a/static/usage/v7/alert/presenting/controller/angular/example_component_html.md b/static/usage/v7/alert/presenting/controller/angular/example_component_html.md index 183dd98719d..e484d6c912d 100644 --- a/static/usage/v7/alert/presenting/controller/angular/example_component_html.md +++ b/static/usage/v7/alert/presenting/controller/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` +``` \ No newline at end of file diff --git a/static/usage/v7/alert/presenting/controller/index.md b/static/usage/v7/alert/presenting/controller/index.md index 78b0842c2d7..5a01edce2a0 100644 --- a/static/usage/v7/alert/presenting/controller/index.md +++ b/static/usage/v7/alert/presenting/controller/index.md @@ -8,9 +8,9 @@ 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/v7/alert/presenting/isOpen/angular/example_component_html.md b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md index 504cb5b4863..6e4c36ec85b 100644 --- a/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md +++ b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md @@ -8,4 +8,4 @@ [buttons]="alertButtons" (didDismiss)="setOpen(false)" > -``` +``` \ No newline at end of file diff --git a/static/usage/v7/alert/presenting/isOpen/index.md b/static/usage/v7/alert/presenting/isOpen/index.md index 5d9d347fa2b..e00b0e96f07 100644 --- a/static/usage/v7/alert/presenting/isOpen/index.md +++ b/static/usage/v7/alert/presenting/isOpen/index.md @@ -8,9 +8,9 @@ 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/v7/alert/presenting/isOpen/javascript.md b/static/usage/v7/alert/presenting/isOpen/javascript.md index 21f310c1904..f48b512c452 100644 --- a/static/usage/v7/alert/presenting/isOpen/javascript.md +++ b/static/usage/v7/alert/presenting/isOpen/javascript.md @@ -1,6 +1,10 @@ ```html Click Me - + ``` diff --git a/static/usage/v7/avatar/item/vue.md b/static/usage/v7/avatar/item/vue.md index 5a9ddea4499..315af034426 100644 --- a/static/usage/v7/avatar/item/vue.md +++ b/static/usage/v7/avatar/item/vue.md @@ -13,7 +13,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar, IonItem, IonLabel }, + components: { IonAvatar, IonItem, IonLabel } }); ``` diff --git a/static/usage/v7/avatar/theming/css-properties/index.md b/static/usage/v7/avatar/theming/css-properties/index.md index f6b6d6f371e..38bc99f7e8a 100644 --- a/static/usage/v7/avatar/theming/css-properties/index.md +++ b/static/usage/v7/avatar/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/avatar/theming/css-properties/react/main_tsx.md b/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md index 180b8998a3f..f04d7f8fbe3 100644 --- a/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md @@ -1,3 +1,4 @@ + ```tsx import React from 'react'; import { IonAvatar } from '@ionic/react'; diff --git a/static/usage/v7/avatar/theming/css-properties/vue.md b/static/usage/v7/avatar/theming/css-properties/vue.md index 32237336a1c..affb7ccdecb 100644 --- a/static/usage/v7/avatar/theming/css-properties/vue.md +++ b/static/usage/v7/avatar/theming/css-properties/vue.md @@ -10,7 +10,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar }, + components: { IonAvatar } }); diff --git a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md index b2cda11d2a8..3c39508e72c 100644 --- a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md +++ b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md @@ -18,5 +18,7 @@ import { Component } from '@angular/core'; `, }) -export class PageTwoComponent {} +export class PageTwoComponent { + +} ``` diff --git a/static/usage/v7/back-button/basic/index.md b/static/usage/v7/back-button/basic/index.md index f870381f562..27c7d6b0c0c 100644 --- a/static/usage/v7/back-button/basic/index.md +++ b/static/usage/v7/back-button/basic/index.md @@ -17,8 +17,8 @@ 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/v7/back-button/basic/vue/page_two_vue.md b/static/usage/v7/back-button/basic/vue/page_two_vue.md index e26a6f13562..1192ca2936c 100644 --- a/static/usage/v7/back-button/basic/vue/page_two_vue.md +++ b/static/usage/v7/back-button/basic/vue/page_two_vue.md @@ -18,7 +18,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue'; export default { - components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar }, + components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } }; ``` diff --git a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md index 05a1bd64d79..31f76ac219a 100644 --- a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md +++ b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md @@ -18,5 +18,7 @@ import { Component } from '@angular/core'; `, }) -export class PageTwoComponent {} +export class PageTwoComponent { + +} ``` diff --git a/static/usage/v7/back-button/custom/index.md b/static/usage/v7/back-button/custom/index.md index 318fab845d2..d90a901513f 100644 --- a/static/usage/v7/back-button/custom/index.md +++ b/static/usage/v7/back-button/custom/index.md @@ -17,8 +17,8 @@ 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/v7/back-button/custom/vue/page_two_vue.md b/static/usage/v7/back-button/custom/vue/page_two_vue.md index 4667abeced5..05de62654cb 100644 --- a/static/usage/v7/back-button/custom/vue/page_two_vue.md +++ b/static/usage/v7/back-button/custom/vue/page_two_vue.md @@ -21,8 +21,8 @@ export default { components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton }, setup() { - return { caretBack }; - }, + return { caretBack } + } }; ``` diff --git a/static/usage/v7/backdrop/basic/index.md b/static/usage/v7/backdrop/basic/index.md index 5cd96fe0476..adf0b9d8d5e 100644 --- a/static/usage/v7/backdrop/basic/index.md +++ b/static/usage/v7/backdrop/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/backdrop/styling/index.md b/static/usage/v7/backdrop/styling/index.md index 6f83069ac38..a7861a18ed7 100644 --- a/static/usage/v7/backdrop/styling/index.md +++ b/static/usage/v7/backdrop/styling/index.md @@ -11,8 +11,8 @@ 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/v7/badge/theming/colors/index.md b/static/usage/v7/badge/theming/colors/index.md index bc2ca77c72b..1b640d0675b 100644 --- a/static/usage/v7/badge/theming/colors/index.md +++ b/static/usage/v7/badge/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md b/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md index cf47682b14d..950e96b4e80 100644 --- a/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md @@ -5,4 +5,4 @@ ion-badge { --padding-end: 20px; --padding-start: 20px; } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/badge/theming/css-properties/index.md b/static/usage/v7/badge/theming/css-properties/index.md index 1e639aa34ff..3fdf7e333a1 100644 --- a/static/usage/v7/badge/theming/css-properties/index.md +++ b/static/usage/v7/badge/theming/css-properties/index.md @@ -10,9 +10,9 @@ 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/v7/badge/theming/css-properties/react/main_css.md b/static/usage/v7/badge/theming/css-properties/react/main_css.md index cf47682b14d..950e96b4e80 100644 --- a/static/usage/v7/badge/theming/css-properties/react/main_css.md +++ b/static/usage/v7/badge/theming/css-properties/react/main_css.md @@ -5,4 +5,4 @@ ion-badge { --padding-end: 20px; --padding-start: 20px; } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md index 926479c1e85..76a545d6a8e 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md @@ -7,4 +7,4 @@ Film 35 mm -``` +``` \ No newline at end of file diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md index f948400973a..c6f75cb1155 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/index.md @@ -8,8 +8,8 @@ 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/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md index fdd63471ed4..f88b8a6e322 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md @@ -18,14 +18,14 @@ components: { IonBreadcrumb, IonBreadcrumbs }, data() { return { - maxBreadcrumbs: 4, - }; + maxBreadcrumbs: 4 + } }, methods: { expandBreadcrumbs() { this.maxBreadcrumbs = undefined; - }, - }, + } + } }); ``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md index f34494aeeae..3df433d1891 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/items-before-after/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md index 332d3fa32cd..48e8a4ed82f 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/max-items/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md index e3c0462a148..2c5ee51a9b7 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md @@ -22,4 +22,4 @@ -``` +``` \ No newline at end of file diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md index ad488a6cd6d..2e2ca803c4a 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/index.md @@ -8,9 +8,9 @@ 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/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md index 1d22085a5b1..007fb9a4a1e 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md @@ -18,12 +18,12 @@ const popover = document.querySelector('ion-popover'); const popoverList = document.querySelector('ion-popover ion-list'); - breadcrumbs.addEventListener('ionCollapsedClick', (e) => { + breadcrumbs.addEventListener('ionCollapsedClick', e => { let listHTML = ``; e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => { listHTML += ` ${breadcrumb.textContent} @@ -36,6 +36,6 @@ popover.isOpen = true; }); - popover.addEventListener('didDismiss', () => (popover.isOpen = false)); + popover.addEventListener('didDismiss', () => popover.isOpen = false); ``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md index 66ccc22bfe3..72cc6520e3c 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md @@ -27,7 +27,10 @@ function Example() { {collapsedBreadcrumbs.map((breadcrumb, i) => ( - + {breadcrumb.textContent} ))} diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md index 54368fa7213..318f64f8547 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md @@ -24,25 +24,25 @@ -``` +``` \ No newline at end of file diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/index.md b/static/usage/v7/breadcrumbs/icons/custom-separators/index.md index 8feb0c84894..4b42e7b7e40 100644 --- a/static/usage/v7/breadcrumbs/icons/custom-separators/index.md +++ b/static/usage/v7/breadcrumbs/icons/custom-separators/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md index f0849705aab..f836a85455f 100644 --- a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md +++ b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md @@ -29,7 +29,7 @@ components: { IonBreadcrumb, IonBreadcrumbs, IonIcon }, setup() { return { arrowForwardCircle }; - }, + } }); ``` diff --git a/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md index b2035669ab2..387f0c12e55 100644 --- a/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md +++ b/static/usage/v7/breadcrumbs/icons/icons-on-items/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/breadcrumbs/theming/colors/index.md b/static/usage/v7/breadcrumbs/theming/colors/index.md index 399a1a2a020..c100fffe65d 100644 --- a/static/usage/v7/breadcrumbs/theming/colors/index.md +++ b/static/usage/v7/breadcrumbs/theming/colors/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md index 3dc7c4640ad..338babc9c79 100644 --- a/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md @@ -4,4 +4,4 @@ ion-breadcrumb { --color-active: rgb(150, 112, 220); --color-hover: rgb(103, 61, 180); } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/index.md b/static/usage/v7/breadcrumbs/theming/css-properties/index.md index 27d163c3f2a..d808d24927b 100644 --- a/static/usage/v7/breadcrumbs/theming/css-properties/index.md +++ b/static/usage/v7/breadcrumbs/theming/css-properties/index.md @@ -10,8 +10,8 @@ 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/v7/breadcrumbs/theming/css-properties/react/main_css.md b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md index 3dc7c4640ad..338babc9c79 100644 --- a/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md +++ b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md @@ -4,4 +4,4 @@ ion-breadcrumb { --color-active: rgb(150, 112, 220); --color-hover: rgb(103, 61, 180); } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/button/basic/angular.md b/static/usage/v7/button/basic/angular.md index d313d7dcd23..44ba5831426 100644 --- a/static/usage/v7/button/basic/angular.md +++ b/static/usage/v7/button/basic/angular.md @@ -1,3 +1,4 @@ ```html -Default Disabled +Default +Disabled ``` diff --git a/static/usage/v7/button/basic/javascript.md b/static/usage/v7/button/basic/javascript.md index e298f5a1246..8296ef7f42a 100644 --- a/static/usage/v7/button/basic/javascript.md +++ b/static/usage/v7/button/basic/javascript.md @@ -1,3 +1,4 @@ ```html -Default Disabled +Default +Disabled ``` diff --git a/static/usage/v7/button/expand/angular.md b/static/usage/v7/button/expand/angular.md index b49d2c767ae..ca3f5093b84 100644 --- a/static/usage/v7/button/expand/angular.md +++ b/static/usage/v7/button/expand/angular.md @@ -1,3 +1,4 @@ ```html -Block Full +Block +Full ``` diff --git a/static/usage/v7/button/expand/javascript.md b/static/usage/v7/button/expand/javascript.md index b49d2c767ae..ca3f5093b84 100644 --- a/static/usage/v7/button/expand/javascript.md +++ b/static/usage/v7/button/expand/javascript.md @@ -1,3 +1,4 @@ ```html -Block Full +Block +Full ``` diff --git a/static/usage/v7/button/icons/vue.md b/static/usage/v7/button/icons/vue.md index 03d8648c878..356fc5617dc 100644 --- a/static/usage/v7/button/icons/vue.md +++ b/static/usage/v7/button/icons/vue.md @@ -23,8 +23,8 @@ export default defineComponent({ components: { IonButton, IonIcon }, setup() { - return { star }; - }, + return { star } + } }); ``` diff --git a/static/usage/v7/button/shape/angular.md b/static/usage/v7/button/shape/angular.md index a37193d9013..97ed756261a 100644 --- a/static/usage/v7/button/shape/angular.md +++ b/static/usage/v7/button/shape/angular.md @@ -1,3 +1,4 @@ ```html -Default Round +Default +Round ``` diff --git a/static/usage/v7/button/shape/javascript.md b/static/usage/v7/button/shape/javascript.md index a37193d9013..97ed756261a 100644 --- a/static/usage/v7/button/shape/javascript.md +++ b/static/usage/v7/button/shape/javascript.md @@ -1,3 +1,4 @@ ```html -Default Round +Default +Round ``` diff --git a/static/usage/v7/button/theming/css-properties/index.md b/static/usage/v7/button/theming/css-properties/index.md index 6f79f6e259d..32f67b6f002 100644 --- a/static/usage/v7/button/theming/css-properties/index.md +++ b/static/usage/v7/button/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/button/theming/css-properties/react/main_css.md b/static/usage/v7/button/theming/css-properties/react/main_css.md index fa985cbe82f..1fba4c49972 100644 --- a/static/usage/v7/button/theming/css-properties/react/main_css.md +++ b/static/usage/v7/button/theming/css-properties/react/main_css.md @@ -1,3 +1,4 @@ + ```css ion-button { --background: #93e9be; diff --git a/static/usage/v7/button/theming/css-properties/react/main_tsx.md b/static/usage/v7/button/theming/css-properties/react/main_tsx.md index c8c432e1b9c..6e0cddd9709 100644 --- a/static/usage/v7/button/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/button/theming/css-properties/react/main_tsx.md @@ -5,7 +5,9 @@ import { IonButton } from '@ionic/react'; import './main.css'; function Example() { - return Custom Button; + return ( + Custom Button + ); } export default Example; ``` diff --git a/static/usage/v7/buttons/types/angular.md b/static/usage/v7/buttons/types/angular.md index 9562dbb3b47..183c70105b1 100644 --- a/static/usage/v7/buttons/types/angular.md +++ b/static/usage/v7/buttons/types/angular.md @@ -1,11 +1,15 @@ ```html - Favorite + + Favorite + Default Buttons - Delete + + Delete + diff --git a/static/usage/v7/buttons/types/index.md b/static/usage/v7/buttons/types/index.md index e6d680e5582..1427b4536f6 100644 --- a/static/usage/v7/buttons/types/index.md +++ b/static/usage/v7/buttons/types/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/buttons/types/javascript.md b/static/usage/v7/buttons/types/javascript.md index 9562dbb3b47..183c70105b1 100644 --- a/static/usage/v7/buttons/types/javascript.md +++ b/static/usage/v7/buttons/types/javascript.md @@ -1,11 +1,15 @@ ```html - Favorite + + Favorite + Default Buttons - Delete + + Delete + diff --git a/static/usage/v7/buttons/types/react.md b/static/usage/v7/buttons/types/react.md index 01baca04d74..8d3b3edfe9e 100644 --- a/static/usage/v7/buttons/types/react.md +++ b/static/usage/v7/buttons/types/react.md @@ -8,11 +8,15 @@ function Example() { <> - Favorite + + Favorite + Default Buttons - Delete + + Delete + @@ -82,4 +86,5 @@ function Example() { ); } export default Example; + ``` diff --git a/static/usage/v7/buttons/types/vue.md b/static/usage/v7/buttons/types/vue.md index 60b04a067da..9a101caa402 100644 --- a/static/usage/v7/buttons/types/vue.md +++ b/static/usage/v7/buttons/types/vue.md @@ -2,11 +2,15 @@ diff --git a/static/usage/v7/card/theming/css-properties/index.md b/static/usage/v7/card/theming/css-properties/index.md index e2190ad8f88..cc473c03d32 100644 --- a/static/usage/v7/card/theming/css-properties/index.md +++ b/static/usage/v7/card/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/card/theming/css-properties/react/main_tsx.md b/static/usage/v7/card/theming/css-properties/react/main_tsx.md index a5b4ce3af35..251b18ce24d 100644 --- a/static/usage/v7/card/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/card/theming/css-properties/react/main_tsx.md @@ -12,7 +12,9 @@ function Example() { Card Subtitle - Here's a small text description for the card content. Nothing more, nothing less. + + Here's a small text description for the card content. Nothing more, nothing less. + ); } diff --git a/static/usage/v7/checkbox/basic/index.md b/static/usage/v7/checkbox/basic/index.md index 34068bb5a04..e238ae9c63f 100644 --- a/static/usage/v7/checkbox/basic/index.md +++ b/static/usage/v7/checkbox/basic/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/checkbox/basic/react.md b/static/usage/v7/checkbox/basic/react.md index b2fbcb695d3..2d4159efbb2 100644 --- a/static/usage/v7/checkbox/basic/react.md +++ b/static/usage/v7/checkbox/basic/react.md @@ -3,7 +3,9 @@ import React from 'react'; import { IonCheckbox } from '@ionic/react'; function Example() { - return I agree to the terms and conditions; + return ( + I agree to the terms and conditions + ); } export default Example; -``` +``` \ No newline at end of file diff --git a/static/usage/v7/checkbox/basic/vue.md b/static/usage/v7/checkbox/basic/vue.md index fc8c1ff781f..9bc17fdb9ea 100644 --- a/static/usage/v7/checkbox/basic/vue.md +++ b/static/usage/v7/checkbox/basic/vue.md @@ -8,7 +8,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonCheckbox }, + components: { IonCheckbox } }); ``` diff --git a/static/usage/v7/checkbox/indeterminate/index.md b/static/usage/v7/checkbox/indeterminate/index.md index ea3f73b30c0..bcc02a761e7 100644 --- a/static/usage/v7/checkbox/indeterminate/index.md +++ b/static/usage/v7/checkbox/indeterminate/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/checkbox/indeterminate/react.md b/static/usage/v7/checkbox/indeterminate/react.md index 9cfba0ca72b..117af56bc35 100644 --- a/static/usage/v7/checkbox/indeterminate/react.md +++ b/static/usage/v7/checkbox/indeterminate/react.md @@ -3,7 +3,9 @@ import React from 'react'; import { IonCheckbox } from '@ionic/react'; function Example() { - return Indeterminate checkbox; + return ( + Indeterminate checkbox + ); } export default Example; -``` +``` \ No newline at end of file diff --git a/static/usage/v7/checkbox/indeterminate/vue.md b/static/usage/v7/checkbox/indeterminate/vue.md index ff87a637bd6..5d08480d9a3 100644 --- a/static/usage/v7/checkbox/indeterminate/vue.md +++ b/static/usage/v7/checkbox/indeterminate/vue.md @@ -8,7 +8,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonCheckbox }, + components: { IonCheckbox } }); ``` diff --git a/static/usage/v7/checkbox/justify/angular.md b/static/usage/v7/checkbox/justify/angular.md index 9205434ceaa..f253722afec 100644 --- a/static/usage/v7/checkbox/justify/angular.md +++ b/static/usage/v7/checkbox/justify/angular.md @@ -3,11 +3,11 @@ Packed at the Start of Line - + Packed at the End of Line - + Space Between Label and Control diff --git a/static/usage/v7/checkbox/justify/javascript.md b/static/usage/v7/checkbox/justify/javascript.md index 9205434ceaa..f253722afec 100644 --- a/static/usage/v7/checkbox/justify/javascript.md +++ b/static/usage/v7/checkbox/justify/javascript.md @@ -3,11 +3,11 @@ Packed at the Start of Line - + Packed at the End of Line - + Space Between Label and Control diff --git a/static/usage/v7/checkbox/justify/react.md b/static/usage/v7/checkbox/justify/react.md index 667449c7808..fd92e9f1fa0 100644 --- a/static/usage/v7/checkbox/justify/react.md +++ b/static/usage/v7/checkbox/justify/react.md @@ -8,11 +8,11 @@ function Example() { Packed at the Start of Line - + Packed at the End of Line - + Space Between Label and Control diff --git a/static/usage/v7/checkbox/justify/vue.md b/static/usage/v7/checkbox/justify/vue.md index ed34f0dcdc7..5659a826bc6 100644 --- a/static/usage/v7/checkbox/justify/vue.md +++ b/static/usage/v7/checkbox/justify/vue.md @@ -4,11 +4,11 @@ Packed at the Start of Line - + Packed at the End of Line - + Space Between Label and Control diff --git a/static/usage/v7/checkbox/label-placement/react.md b/static/usage/v7/checkbox/label-placement/react.md index 7c9bf728131..42520178b60 100644 --- a/static/usage/v7/checkbox/label-placement/react.md +++ b/static/usage/v7/checkbox/label-placement/react.md @@ -6,13 +6,13 @@ function Example() { return ( <> Label at the Start - +
- + Label at the End - +
- + Fixed Width Label ); diff --git a/static/usage/v7/checkbox/label-placement/vue.md b/static/usage/v7/checkbox/label-placement/vue.md index 942149628cd..31697dd3694 100644 --- a/static/usage/v7/checkbox/label-placement/vue.md +++ b/static/usage/v7/checkbox/label-placement/vue.md @@ -1,13 +1,13 @@ ```html diff --git a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md index 5889591fd18..f5f63bf8c22 100644 --- a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md @@ -8,4 +8,4 @@ ion-checkbox::part(container) { border-radius: 6px; border: 2px solid #6815ec; } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md index ba23decbdba..29d3d419b61 100644 --- a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Themed checkbox -``` +``` \ No newline at end of file diff --git a/static/usage/v7/checkbox/theming/css-properties/index.md b/static/usage/v7/checkbox/theming/css-properties/index.md index 7320900989f..51d619f8ccf 100644 --- a/static/usage/v7/checkbox/theming/css-properties/index.md +++ b/static/usage/v7/checkbox/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/checkbox/theming/css-properties/javascript.md b/static/usage/v7/checkbox/theming/css-properties/javascript.md index 90a415bf906..a247dee9a04 100644 --- a/static/usage/v7/checkbox/theming/css-properties/javascript.md +++ b/static/usage/v7/checkbox/theming/css-properties/javascript.md @@ -6,7 +6,7 @@ --size: 32px; --checkbox-background-checked: #6815ec; } - + ion-checkbox::part(container) { border-radius: 6px; border: 2px solid #6815ec; diff --git a/static/usage/v7/checkbox/theming/css-properties/react/main_css.md b/static/usage/v7/checkbox/theming/css-properties/react/main_css.md index 5889591fd18..f5f63bf8c22 100644 --- a/static/usage/v7/checkbox/theming/css-properties/react/main_css.md +++ b/static/usage/v7/checkbox/theming/css-properties/react/main_css.md @@ -8,4 +8,4 @@ ion-checkbox::part(container) { border-radius: 6px; border: 2px solid #6815ec; } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md b/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md index 8408e5825f2..2fb46fb7ba5 100644 --- a/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md @@ -5,7 +5,9 @@ import { IonCheckbox } from '@ionic/react'; import './main.css'; function Example() { - return Themed checkbox; + return ( + Themed checkbox + ); } export default Example; -``` +``` \ No newline at end of file diff --git a/static/usage/v7/checkbox/theming/css-properties/vue.md b/static/usage/v7/checkbox/theming/css-properties/vue.md index 802cfa40b25..7c4f5fd698b 100644 --- a/static/usage/v7/checkbox/theming/css-properties/vue.md +++ b/static/usage/v7/checkbox/theming/css-properties/vue.md @@ -8,7 +8,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonCheckbox }, + components: { IonCheckbox } }); @@ -17,7 +17,7 @@ --size: 32px; --checkbox-background-checked: #6815ec; } - + ion-checkbox::part(container) { border-radius: 6px; border: 2px solid #6815ec; diff --git a/static/usage/v7/chip/theming/css-properties/index.md b/static/usage/v7/chip/theming/css-properties/index.md index be9f519d2c1..2ce8f542f9c 100644 --- a/static/usage/v7/chip/theming/css-properties/index.md +++ b/static/usage/v7/chip/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/content/basic/index.md b/static/usage/v7/content/basic/index.md index 57db7581deb..2e49772c97d 100644 --- a/static/usage/v7/content/basic/index.md +++ b/static/usage/v7/content/basic/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/content/fixed/angular.md b/static/usage/v7/content/fixed/angular.md index 82cb3007125..178d8338f25 100644 --- a/static/usage/v7/content/fixed/angular.md +++ b/static/usage/v7/content/fixed/angular.md @@ -5,50 +5,10 @@ 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. -

+

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/v7/content/fixed/angular/example_component_css.md b/static/usage/v7/content/fixed/angular/example_component_css.md index 1146da9a4b1..e5931e4d94f 100644 --- a/static/usage/v7/content/fixed/angular/example_component_css.md +++ b/static/usage/v7/content/fixed/angular/example_component_css.md @@ -1,5 +1,5 @@ ```css -ion-button[slot='fixed'] { +ion-button[slot="fixed"] { top: 50%; right: 20px; } diff --git a/static/usage/v7/content/fixed/angular/example_component_html.md b/static/usage/v7/content/fixed/angular/example_component_html.md index 82cb3007125..178d8338f25 100644 --- a/static/usage/v7/content/fixed/angular/example_component_html.md +++ b/static/usage/v7/content/fixed/angular/example_component_html.md @@ -5,50 +5,10 @@ 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. -

+

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/v7/content/fixed/index.md b/static/usage/v7/content/fixed/index.md index 90b5744b211..6ff6db1f65e 100644 --- a/static/usage/v7/content/fixed/index.md +++ b/static/usage/v7/content/fixed/index.md @@ -11,8 +11,8 @@ 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/v7/content/fixed/javascript.md b/static/usage/v7/content/fixed/javascript.md index 8613ca29a0c..2a577f1d76a 100644 --- a/static/usage/v7/content/fixed/javascript.md +++ b/static/usage/v7/content/fixed/javascript.md @@ -5,55 +5,15 @@ 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. -

+

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/v7/content/fullscreen/react/main_css.md b/static/usage/v7/content/fullscreen/react/main_css.md index 69fa48ad49e..a62d625ae0a 100644 --- a/static/usage/v7/content/fullscreen/react/main_css.md +++ b/static/usage/v7/content/fullscreen/react/main_css.md @@ -1,5 +1,5 @@ ```css ion-toolbar { - --opacity: 0.5; + --opacity: .5 } ``` diff --git a/static/usage/v7/content/fullscreen/react/main_tsx.md b/static/usage/v7/content/fullscreen/react/main_tsx.md index 7302c484489..ca324631897 100644 --- a/static/usage/v7/content/fullscreen/react/main_tsx.md +++ b/static/usage/v7/content/fullscreen/react/main_tsx.md @@ -9,61 +9,25 @@ function Example() { <> - Header + + 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. -

+

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 + + Footer + diff --git a/static/usage/v7/content/fullscreen/vue.md b/static/usage/v7/content/fullscreen/vue.md index 3de93600da7..e4bd0c3a59f 100644 --- a/static/usage/v7/content/fullscreen/vue.md +++ b/static/usage/v7/content/fullscreen/vue.md @@ -2,61 +2,25 @@ @@ -72,7 +36,7 @@ ``` diff --git a/static/usage/v7/content/header-footer/angular.md b/static/usage/v7/content/header-footer/angular.md index 35a9aadc4c1..4a177d1d58f 100644 --- a/static/usage/v7/content/header-footer/angular.md +++ b/static/usage/v7/content/header-footer/angular.md @@ -1,7 +1,9 @@ ```html - Header + + Header + @@ -16,7 +18,9 @@ - Footer + + Footer + ``` diff --git a/static/usage/v7/content/header-footer/index.md b/static/usage/v7/content/header-footer/index.md index 24dc3fbed81..d045cac7fa7 100644 --- a/static/usage/v7/content/header-footer/index.md +++ b/static/usage/v7/content/header-footer/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/content/header-footer/javascript.md b/static/usage/v7/content/header-footer/javascript.md index 35a9aadc4c1..4a177d1d58f 100644 --- a/static/usage/v7/content/header-footer/javascript.md +++ b/static/usage/v7/content/header-footer/javascript.md @@ -1,7 +1,9 @@ ```html - Header + + Header + @@ -16,7 +18,9 @@ - Footer + + Footer + ``` diff --git a/static/usage/v7/content/header-footer/react.md b/static/usage/v7/content/header-footer/react.md index e075e96cd81..4ffff834f2a 100644 --- a/static/usage/v7/content/header-footer/react.md +++ b/static/usage/v7/content/header-footer/react.md @@ -7,7 +7,9 @@ function Example() { <> - Header + + Header + @@ -22,7 +24,9 @@ function Example() { - Footer + + Footer + diff --git a/static/usage/v7/content/header-footer/vue.md b/static/usage/v7/content/header-footer/vue.md index dc914aee8f5..8bd052a6460 100644 --- a/static/usage/v7/content/header-footer/vue.md +++ b/static/usage/v7/content/header-footer/vue.md @@ -2,7 +2,9 @@ diff --git a/static/usage/v7/content/scroll-events/angular/example_component_html.md b/static/usage/v7/content/scroll-events/angular/example_component_html.md index 4a66edad40a..a1c3aac558f 100644 --- a/static/usage/v7/content/scroll-events/angular/example_component_html.md +++ b/static/usage/v7/content/scroll-events/angular/example_component_html.md @@ -6,54 +6,13 @@ (ionScrollStart)="handleScrollStart()" (ionScroll)="handleScroll($any($event))" (ionScrollEnd)="handleScrollEnd()" - class="ion-padding" -> + class="ion-padding">

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. -

+

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/v7/content/scroll-events/index.md b/static/usage/v7/content/scroll-events/index.md index 56b0fafa069..d908468b2f5 100644 --- a/static/usage/v7/content/scroll-events/index.md +++ b/static/usage/v7/content/scroll-events/index.md @@ -8,8 +8,8 @@ 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/v7/content/scroll-events/javascript.md b/static/usage/v7/content/scroll-events/javascript.md index ed54f080780..5cc4e537dd6 100644 --- a/static/usage/v7/content/scroll-events/javascript.md +++ b/static/usage/v7/content/scroll-events/javascript.md @@ -2,51 +2,11 @@

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. -

+

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/v7/content/scroll-methods/angular/example_component_html.md b/static/usage/v7/content/scroll-methods/angular/example_component_html.md index e585b97e78d..ffa8c913e3e 100644 --- a/static/usage/v7/content/scroll-methods/angular/example_component_html.md +++ b/static/usage/v7/content/scroll-methods/angular/example_component_html.md @@ -4,51 +4,11 @@ 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. -

+

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/v7/content/scroll-methods/index.md b/static/usage/v7/content/scroll-methods/index.md index f1a9f03f45d..97e328a25cc 100644 --- a/static/usage/v7/content/scroll-methods/index.md +++ b/static/usage/v7/content/scroll-methods/index.md @@ -8,8 +8,8 @@ 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/v7/content/scroll-methods/javascript.md b/static/usage/v7/content/scroll-methods/javascript.md index a53fbc7767b..b8f3bb1e13e 100644 --- a/static/usage/v7/content/scroll-methods/javascript.md +++ b/static/usage/v7/content/scroll-methods/javascript.md @@ -4,51 +4,11 @@ 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. -

+

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/v7/content/scroll-methods/react.md b/static/usage/v7/content/scroll-methods/react.md index 1d2d105e984..9526a8884a4 100644 --- a/static/usage/v7/content/scroll-methods/react.md +++ b/static/usage/v7/content/scroll-methods/react.md @@ -21,59 +21,15 @@ function Example() {

Click on the buttons to scroll the content.

- - Scroll to Bottom - + 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. -

+

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 - + Scroll to Top ); } diff --git a/static/usage/v7/content/scroll-methods/vue.md b/static/usage/v7/content/scroll-methods/vue.md index 5ac6e8ee1fc..c3e63abb721 100644 --- a/static/usage/v7/content/scroll-methods/vue.md +++ b/static/usage/v7/content/scroll-methods/vue.md @@ -5,51 +5,11 @@ 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. -

+

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 @@ -72,7 +32,7 @@ // goes to the top instead of instantly this.$refs.content.$el.scrollToTop(500); }, - }, + } }); ``` diff --git a/static/usage/v7/content/theming/colors/index.md b/static/usage/v7/content/theming/colors/index.md index b54287eae68..207e0aaaa7f 100644 --- a/static/usage/v7/content/theming/colors/index.md +++ b/static/usage/v7/content/theming/colors/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/content/theming/css-properties/index.md b/static/usage/v7/content/theming/css-properties/index.md index 7bea2e18b1d..54c7fe12094 100644 --- a/static/usage/v7/content/theming/css-properties/index.md +++ b/static/usage/v7/content/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/content/theming/css-shadow-parts/index.md b/static/usage/v7/content/theming/css-shadow-parts/index.md index c44af4bf36a..ce8ccc6ed3f 100644 --- a/static/usage/v7/content/theming/css-shadow-parts/index.md +++ b/static/usage/v7/content/theming/css-shadow-parts/index.md @@ -11,8 +11,8 @@ 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/v7/datetime-button/basic/index.md b/static/usage/v7/datetime-button/basic/index.md index eb6585878ed..a55a9640c0f 100644 --- a/static/usage/v7/datetime-button/basic/index.md +++ b/static/usage/v7/datetime-button/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/datetime-button/basic/react.md b/static/usage/v7/datetime-button/basic/react.md index 62529cdb75f..90eaaba82af 100644 --- a/static/usage/v7/datetime-button/basic/react.md +++ b/static/usage/v7/datetime-button/basic/react.md @@ -5,7 +5,7 @@ function Example() { return ( <> - + diff --git a/static/usage/v7/datetime-button/basic/vue.md b/static/usage/v7/datetime-button/basic/vue.md index a595c27e409..1272d768b88 100644 --- a/static/usage/v7/datetime-button/basic/vue.md +++ b/static/usage/v7/datetime-button/basic/vue.md @@ -1,7 +1,7 @@ ```html diff --git a/static/usage/v7/grid/offset-responsive/index.md b/static/usage/v7/grid/offset-responsive/index.md index c47287e0023..8ed07e871b5 100644 --- a/static/usage/v7/grid/offset-responsive/index.md +++ b/static/usage/v7/grid/offset-responsive/index.md @@ -11,8 +11,8 @@ 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/v7/grid/offset-responsive/react/main_tsx.md b/static/usage/v7/grid/offset-responsive/react/main_tsx.md index 8721fbfc523..482f957cde8 100644 --- a/static/usage/v7/grid/offset-responsive/react/main_tsx.md +++ b/static/usage/v7/grid/offset-responsive/react/main_tsx.md @@ -31,12 +31,8 @@ function Example() { Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up - - 1 - - - 2 - + 1 + 2 diff --git a/static/usage/v7/grid/offset/index.md b/static/usage/v7/grid/offset/index.md index f9476caf18f..27a55412d53 100644 --- a/static/usage/v7/grid/offset/index.md +++ b/static/usage/v7/grid/offset/index.md @@ -11,8 +11,8 @@ 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/v7/grid/offset/react/main_tsx.md b/static/usage/v7/grid/offset/react/main_tsx.md index e24f5a47918..99add2f8a44 100644 --- a/static/usage/v7/grid/offset/react/main_tsx.md +++ b/static/usage/v7/grid/offset/react/main_tsx.md @@ -7,9 +7,7 @@ import './main.css'; function Example() { return ( <> - - Column 2 has offset set to "3" - + Column 2 has offset set to "3" 1 @@ -18,9 +16,7 @@ function Example() { - - Column 5 has offset set to "2" - + Column 5 has offset set to "2" 1 @@ -31,14 +27,10 @@ function Example() { - - Column 1 has offset set to "4" - + Column 1 has offset set to "4" - - 1 - + 1 2 diff --git a/static/usage/v7/grid/push-pull-responsive/index.md b/static/usage/v7/grid/push-pull-responsive/index.md index ee29baff5ab..cd608eaae70 100644 --- a/static/usage/v7/grid/push-pull-responsive/index.md +++ b/static/usage/v7/grid/push-pull-responsive/index.md @@ -11,8 +11,8 @@ 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/v7/grid/push-pull-responsive/react/main_tsx.md b/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md index 85955f3ebd2..3f6e2879e08 100644 --- a/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md +++ b/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md @@ -28,24 +28,12 @@ function Example() { Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up - - 1 - - - 2 - - - 3 - - - 4 - - - 5 - - - 6 - + 1 + 2 + 3 + 4 + 5 + 6 diff --git a/static/usage/v7/grid/push-pull/angular/example_component_html.md b/static/usage/v7/grid/push-pull/angular/example_component_html.md index a93c12fef81..cb8190ef9e9 100644 --- a/static/usage/v7/grid/push-pull/angular/example_component_html.md +++ b/static/usage/v7/grid/push-pull/angular/example_component_html.md @@ -8,10 +8,7 @@ -Column 2 has push set to "4" and column 3 & 4 have pull set to - "2" +Column 2 has push set to "4" and column 3 & 4 have pull set to "2" 1 diff --git a/static/usage/v7/grid/push-pull/index.md b/static/usage/v7/grid/push-pull/index.md index 03eac248909..a723dfd08f1 100644 --- a/static/usage/v7/grid/push-pull/index.md +++ b/static/usage/v7/grid/push-pull/index.md @@ -11,8 +11,8 @@ 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/v7/grid/push-pull/javascript.md b/static/usage/v7/grid/push-pull/javascript.md index b911da1791b..6dca0e83ec4 100644 --- a/static/usage/v7/grid/push-pull/javascript.md +++ b/static/usage/v7/grid/push-pull/javascript.md @@ -8,10 +8,7 @@ -Column 2 has push set to "4" and column 3 & 4 have pull set to - "2" +Column 2 has push set to "4" and column 3 & 4 have pull set to "2" 1 diff --git a/static/usage/v7/grid/push-pull/react/main_tsx.md b/static/usage/v7/grid/push-pull/react/main_tsx.md index aa7c1d1c809..6b087b72b77 100644 --- a/static/usage/v7/grid/push-pull/react/main_tsx.md +++ b/static/usage/v7/grid/push-pull/react/main_tsx.md @@ -7,10 +7,7 @@ import './main.css'; function Example() { return ( <> - - Column 1 has push set to "4" and column 2 has pull set to{' '} - "4" - + Column 1 has push set to "4" and column 2 has pull set to "4" 1 @@ -19,10 +16,7 @@ function Example() { - - Column 2 has push set to "4" and column 3 & 4 have pull set to{' '} - "2" - + Column 2 has push set to "4" and column 3 & 4 have pull set to "2" 1 @@ -34,18 +28,11 @@ function Example() { - - Column 1 has push set to "3" and column 2 has pull set to{' '} - "9" - + Column 1 has push set to "3" and column 2 has pull set to "9" - - 1 - - - 2 - + 1 + 2 diff --git a/static/usage/v7/grid/push-pull/vue.md b/static/usage/v7/grid/push-pull/vue.md index b5146e95e0e..2775067f7a7 100644 --- a/static/usage/v7/grid/push-pull/vue.md +++ b/static/usage/v7/grid/push-pull/vue.md @@ -1,9 +1,6 @@ ```html diff --git a/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md b/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md index 742d531cb9d..b54ba9d2afa 100644 --- a/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md +++ b/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md @@ -9,61 +9,24 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v7/header/custom-scroll-target/index.md b/static/usage/v7/header/custom-scroll-target/index.md index ce4c89f9985..cf5ad71dd63 100644 --- a/static/usage/v7/header/custom-scroll-target/index.md +++ b/static/usage/v7/header/custom-scroll-target/index.md @@ -11,8 +11,8 @@ 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/v7/header/custom-scroll-target/react/main_tsx.md b/static/usage/v7/header/custom-scroll-target/react/main_tsx.md index 923ea715aa7..bf6d13f26ec 100644 --- a/static/usage/v7/header/custom-scroll-target/react/main_tsx.md +++ b/static/usage/v7/header/custom-scroll-target/react/main_tsx.md @@ -17,63 +17,24 @@ function Example() {

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v7/header/custom-scroll-target/vue.md b/static/usage/v7/header/custom-scroll-target/vue.md index 84aac1c56fe..73565d9ab18 100644 --- a/static/usage/v7/header/custom-scroll-target/vue.md +++ b/static/usage/v7/header/custom-scroll-target/vue.md @@ -10,61 +10,24 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v7/header/fade/angular.md b/static/usage/v7/header/fade/angular.md index 473ad54c8da..72e55ffc58c 100644 --- a/static/usage/v7/header/fade/angular.md +++ b/static/usage/v7/header/fade/angular.md @@ -8,60 +8,23 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v7/header/fade/index.md b/static/usage/v7/header/fade/index.md index c478007a6b4..328ba025ada 100644 --- a/static/usage/v7/header/fade/index.md +++ b/static/usage/v7/header/fade/index.md @@ -6,10 +6,10 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/header/fade/javascript.md b/static/usage/v7/header/fade/javascript.md index 473ad54c8da..72e55ffc58c 100644 --- a/static/usage/v7/header/fade/javascript.md +++ b/static/usage/v7/header/fade/javascript.md @@ -8,60 +8,23 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v7/header/fade/react.md b/static/usage/v7/header/fade/react.md index 085bea0296d..453f32c4db4 100644 --- a/static/usage/v7/header/fade/react.md +++ b/static/usage/v7/header/fade/react.md @@ -14,61 +14,24 @@ function Example() {

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v7/header/fade/vue.md b/static/usage/v7/header/fade/vue.md index 264038c103c..44327bf809c 100644 --- a/static/usage/v7/header/fade/vue.md +++ b/static/usage/v7/header/fade/vue.md @@ -9,61 +9,24 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v7/header/no-border/index.md b/static/usage/v7/header/no-border/index.md index 7801be95092..e7300fb2610 100644 --- a/static/usage/v7/header/no-border/index.md +++ b/static/usage/v7/header/no-border/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/header/translucent/angular.md b/static/usage/v7/header/translucent/angular.md index 657a88bf066..f2779c7d5c9 100644 --- a/static/usage/v7/header/translucent/angular.md +++ b/static/usage/v7/header/translucent/angular.md @@ -8,60 +8,23 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v7/header/translucent/index.md b/static/usage/v7/header/translucent/index.md index 44926cb52c9..fe8e8b04a8e 100644 --- a/static/usage/v7/header/translucent/index.md +++ b/static/usage/v7/header/translucent/index.md @@ -6,10 +6,10 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/header/translucent/javascript.md b/static/usage/v7/header/translucent/javascript.md index 5c0048c019c..e03deeda2a5 100644 --- a/static/usage/v7/header/translucent/javascript.md +++ b/static/usage/v7/header/translucent/javascript.md @@ -8,60 +8,23 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v7/header/translucent/react.md b/static/usage/v7/header/translucent/react.md index def835913c3..862211d839b 100644 --- a/static/usage/v7/header/translucent/react.md +++ b/static/usage/v7/header/translucent/react.md @@ -14,61 +14,24 @@ function Example() {

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v7/header/translucent/vue.md b/static/usage/v7/header/translucent/vue.md index 26370009d44..34a4c740014 100644 --- a/static/usage/v7/header/translucent/vue.md +++ b/static/usage/v7/header/translucent/vue.md @@ -9,61 +9,24 @@

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. -

+ 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. -

+ 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. -

+ 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. -

+ 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. -

+ 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/v7/icon/basic/index.md b/static/usage/v7/icon/basic/index.md index 97de04da44c..c26fa6e35ac 100644 --- a/static/usage/v7/icon/basic/index.md +++ b/static/usage/v7/icon/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/img/basic/angular.md b/static/usage/v7/img/basic/angular.md index 61e27f8b9d6..ce4d3d19e0d 100644 --- a/static/usage/v7/img/basic/angular.md +++ b/static/usage/v7/img/basic/angular.md @@ -1,6 +1,3 @@ ```html - + ``` diff --git a/static/usage/v7/img/basic/javascript.md b/static/usage/v7/img/basic/javascript.md index 61e27f8b9d6..ce4d3d19e0d 100644 --- a/static/usage/v7/img/basic/javascript.md +++ b/static/usage/v7/img/basic/javascript.md @@ -1,6 +1,3 @@ ```html - + ``` diff --git a/static/usage/v7/img/basic/react.md b/static/usage/v7/img/basic/react.md index 0236cc28976..04c4c086b15 100644 --- a/static/usage/v7/img/basic/react.md +++ b/static/usage/v7/img/basic/react.md @@ -4,10 +4,7 @@ import { IonImg } from '@ionic/react'; function Example() { return ( - + ); } export default Example; diff --git a/static/usage/v7/img/basic/vue.md b/static/usage/v7/img/basic/vue.md index db4d74618ef..d8cb2cd2d7f 100644 --- a/static/usage/v7/img/basic/vue.md +++ b/static/usage/v7/img/basic/vue.md @@ -1,9 +1,6 @@ ```html ``` diff --git a/static/usage/v7/input/fill/index.md b/static/usage/v7/input/fill/index.md index e4a4dba5543..10fcef1cb28 100644 --- a/static/usage/v7/input/fill/index.md +++ b/static/usage/v7/input/fill/index.md @@ -5,10 +5,10 @@ import react from './react.md'; import vue from './vue.md'; import angular from './angular.md'; - diff --git a/static/usage/v7/input/fill/react.md b/static/usage/v7/input/fill/react.md index d62ea62084c..834ca7f96ea 100644 --- a/static/usage/v7/input/fill/react.md +++ b/static/usage/v7/input/fill/react.md @@ -6,9 +6,9 @@ function Example() { return ( <> - +
- + ); diff --git a/static/usage/v7/input/fill/vue.md b/static/usage/v7/input/fill/vue.md index d1f2e440b05..f17fd6e151d 100644 --- a/static/usage/v7/input/fill/vue.md +++ b/static/usage/v7/input/fill/vue.md @@ -1,9 +1,9 @@ ```html diff --git a/static/usage/v7/input/filtering/angular/example_component_html.md b/static/usage/v7/input/filtering/angular/example_component_html.md index 31ddc03f197..da2f4776bd2 100644 --- a/static/usage/v7/input/filtering/angular/example_component_html.md +++ b/static/usage/v7/input/filtering/angular/example_component_html.md @@ -2,7 +2,7 @@ { const value = ev.target.value; // Removes non alphanumeric characters - input.value = value.replace(/[^a-zA-Z0-9]+/g, ''); + input.value = value.replace(/[^a-zA-Z0-9]+/g,''); }); -``` +``` \ No newline at end of file diff --git a/static/usage/v7/input/filtering/react.md b/static/usage/v7/input/filtering/react.md index 1722f8ad9af..7218199a3d2 100644 --- a/static/usage/v7/input/filtering/react.md +++ b/static/usage/v7/input/filtering/react.md @@ -3,31 +3,36 @@ import React, { useState, useRef } from 'react'; import { IonInput, IonItem, IonList } from '@ionic/react'; function Example() { - const [inputModel, setInputModel] = useState(''); + 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, ''); - + 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 ( - + ); diff --git a/static/usage/v7/input/filtering/vue.md b/static/usage/v7/input/filtering/vue.md index a95e5dcc843..dd93e9bb2c7 100644 --- a/static/usage/v7/input/filtering/vue.md +++ b/static/usage/v7/input/filtering/vue.md @@ -3,7 +3,7 @@ { const value = ev.target!.value; - + // Removes non alphanumeric characters - const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, ''); - + const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,''); + /** * Update both the state variable and * the component to keep them in sync. */ inputModel.value = filteredValue; - + const inputCmp = ionInputEl.value; if (inputCmp !== undefined) { inputCmp.$el.value = filteredValue; } - }; - + } + return { ionInputEl, inputModel, onInput }; - }, + } }); ``` diff --git a/static/usage/v7/input/helper-error/angular.md b/static/usage/v7/input/helper-error/angular.md index ba5030c0026..9f75f6b070f 100644 --- a/static/usage/v7/input/helper-error/angular.md +++ b/static/usage/v7/input/helper-error/angular.md @@ -6,7 +6,7 @@ labelPlacement="floating" helperText="Enter a valid email" errorText="Invalid email" - ngModel + ngModel email > ``` diff --git a/static/usage/v7/input/helper-error/index.md b/static/usage/v7/input/helper-error/index.md index a0c95dfc139..03393f19b24 100644 --- a/static/usage/v7/input/helper-error/index.md +++ b/static/usage/v7/input/helper-error/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/input/helper-error/javascript.md b/static/usage/v7/input/helper-error/javascript.md index 55d306aa225..16cd161715d 100644 --- a/static/usage/v7/input/helper-error/javascript.md +++ b/static/usage/v7/input/helper-error/javascript.md @@ -15,9 +15,7 @@ input.addEventListener('ionBlur', () => markTouched()); const validateEmail = (email) => { - 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])?)*$/ - ); + 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) => { @@ -26,13 +24,13 @@ input.classList.remove('ion-valid'); input.classList.remove('ion-invalid'); - if (value === '') return; + if (value === "") return; validateEmail(value) ? input.classList.add('ion-valid') : input.classList.add('ion-invalid'); - }; + } const markTouched = () => { input.classList.add('ion-touched'); - }; + } ``` diff --git a/static/usage/v7/input/helper-error/vue.md b/static/usage/v7/input/helper-error/vue.md index ce801d04ac7..33934b31ae2 100644 --- a/static/usage/v7/input/helper-error/vue.md +++ b/static/usage/v7/input/helper-error/vue.md @@ -21,9 +21,7 @@ components: { IonInput }, methods: { validateEmail(email) { - 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])?)*$/ - ); + 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])?)*$/); }, validate(ev) { @@ -40,8 +38,8 @@ }, markTouched() { - this.$refs.input.$el.classList.add('ion-touched'); - }, + this.$refs.input.$el.classList.add('ion-touched') + } }, }); diff --git a/static/usage/v7/input/label-placement/angular.md b/static/usage/v7/input/label-placement/angular.md index 151adb55b5d..1257ff9c641 100644 --- a/static/usage/v7/input/label-placement/angular.md +++ b/static/usage/v7/input/label-placement/angular.md @@ -3,15 +3,15 @@ - + - + - + diff --git a/static/usage/v7/input/label-placement/javascript.md b/static/usage/v7/input/label-placement/javascript.md index f9c79fc46ae..e08cf249e14 100644 --- a/static/usage/v7/input/label-placement/javascript.md +++ b/static/usage/v7/input/label-placement/javascript.md @@ -3,15 +3,15 @@ - + - + - + diff --git a/static/usage/v7/input/label-placement/react.md b/static/usage/v7/input/label-placement/react.md index aa4f1b3c484..59a819eaab4 100644 --- a/static/usage/v7/input/label-placement/react.md +++ b/static/usage/v7/input/label-placement/react.md @@ -8,15 +8,15 @@ function Example() { - + - + - + diff --git a/static/usage/v7/input/label-placement/vue.md b/static/usage/v7/input/label-placement/vue.md index 8854647965d..782e77971c6 100644 --- a/static/usage/v7/input/label-placement/vue.md +++ b/static/usage/v7/input/label-placement/vue.md @@ -4,15 +4,15 @@ - + - + - + diff --git a/static/usage/v7/input/migration/index.md b/static/usage/v7/input/migration/index.md index 34e3ccaece5..e28bf81ce00 100644 --- a/static/usage/v7/input/migration/index.md +++ b/static/usage/v7/input/migration/index.md @@ -55,8 +55,8 @@ import TabItem from '@theme/TabItem'; @@ -113,8 +113,8 @@ import TabItem from '@theme/TabItem'; @@ -171,8 +171,8 @@ import TabItem from '@theme/TabItem'; {/* After */} {/* - Metadata such as counters and helper text should not - be used when an input is in an item/list. If you need to + 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. */} @@ -229,8 +229,8 @@ import TabItem from '@theme/TabItem'; @@ -245,4 +245,4 @@ import TabItem from '@theme/TabItem'; ``` -```` +```` \ No newline at end of file diff --git a/static/usage/v7/input/theming/colors/index.md b/static/usage/v7/input/theming/colors/index.md index 329f0ceae56..17c29f994c3 100644 --- a/static/usage/v7/input/theming/colors/index.md +++ b/static/usage/v7/input/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/input/theming/css-properties/angular/example_component_css.md b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md index 3aa7fddda86..154e20ad0cc 100644 --- a/static/usage/v7/input/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md @@ -3,7 +3,7 @@ ion-input.custom { --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: 0.8; + --placeholder-opacity: .8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v7/input/theming/css-properties/angular/example_component_html.md b/static/usage/v7/input/theming/css-properties/angular/example_component_html.md index 243bb91401b..c3ffd4077fe 100644 --- a/static/usage/v7/input/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/input/theming/css-properties/angular/example_component_html.md @@ -1,8 +1,8 @@ ```html diff --git a/static/usage/v7/input/theming/css-properties/javascript.md b/static/usage/v7/input/theming/css-properties/javascript.md index 168adce6d2d..4cbd6339c3f 100644 --- a/static/usage/v7/input/theming/css-properties/javascript.md +++ b/static/usage/v7/input/theming/css-properties/javascript.md @@ -1,7 +1,7 @@ ```html - + - + - + - + diff --git a/static/usage/v7/input/types/javascript.md b/static/usage/v7/input/types/javascript.md index ff696b22cd8..6506b2ca271 100644 --- a/static/usage/v7/input/types/javascript.md +++ b/static/usage/v7/input/types/javascript.md @@ -4,19 +4,19 @@ - + - + - + - + diff --git a/static/usage/v7/input/types/react.md b/static/usage/v7/input/types/react.md index e5534ec2e1e..7a90e30e81a 100644 --- a/static/usage/v7/input/types/react.md +++ b/static/usage/v7/input/types/react.md @@ -8,19 +8,19 @@ function Example() { - + - + - + - + diff --git a/static/usage/v7/input/types/vue.md b/static/usage/v7/input/types/vue.md index 752f60c183f..2415bc71ea5 100644 --- a/static/usage/v7/input/types/vue.md +++ b/static/usage/v7/input/types/vue.md @@ -4,19 +4,19 @@ - + - + - + - + diff --git a/static/usage/v7/item-divider/basic/angular.md b/static/usage/v7/item-divider/basic/angular.md index 35dccbdbc88..d74e5b05549 100644 --- a/static/usage/v7/item-divider/basic/angular.md +++ b/static/usage/v7/item-divider/basic/angular.md @@ -2,7 +2,9 @@ - Section A + + Section A + @@ -18,7 +20,9 @@ - Section B + + Section B + diff --git a/static/usage/v7/item-divider/basic/index.md b/static/usage/v7/item-divider/basic/index.md index ff888fae905..9c8a9e292be 100644 --- a/static/usage/v7/item-divider/basic/index.md +++ b/static/usage/v7/item-divider/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/item-divider/basic/javascript.md b/static/usage/v7/item-divider/basic/javascript.md index 35dccbdbc88..d74e5b05549 100644 --- a/static/usage/v7/item-divider/basic/javascript.md +++ b/static/usage/v7/item-divider/basic/javascript.md @@ -2,7 +2,9 @@ - Section A + + Section A + @@ -18,7 +20,9 @@ - Section B + + Section B + diff --git a/static/usage/v7/item-divider/basic/react.md b/static/usage/v7/item-divider/basic/react.md index 14ad85b1c82..289f1727c8d 100644 --- a/static/usage/v7/item-divider/basic/react.md +++ b/static/usage/v7/item-divider/basic/react.md @@ -7,7 +7,9 @@ function Example() { - Section A + + Section A + @@ -23,7 +25,9 @@ function Example() { - Section B + + Section B + diff --git a/static/usage/v7/item-divider/basic/vue.md b/static/usage/v7/item-divider/basic/vue.md index 22c9565c278..95f26ebc027 100644 --- a/static/usage/v7/item-divider/basic/vue.md +++ b/static/usage/v7/item-divider/basic/vue.md @@ -3,7 +3,9 @@ - Section A + + Section A + @@ -19,7 +21,9 @@ - Section B + + Section B + diff --git a/static/usage/v7/item-divider/theming/colors/index.md b/static/usage/v7/item-divider/theming/colors/index.md index e39b5d93a5c..a728b84c5db 100644 --- a/static/usage/v7/item-divider/theming/colors/index.md +++ b/static/usage/v7/item-divider/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md index 172fdad114f..b3b1bb4da25 100644 --- a/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md @@ -1,5 +1,7 @@ ```html - Item Divider + + Item Divider + ``` diff --git a/static/usage/v7/item-divider/theming/css-properties/index.md b/static/usage/v7/item-divider/theming/css-properties/index.md index 7d95b99dca5..f425706d75d 100644 --- a/static/usage/v7/item-divider/theming/css-properties/index.md +++ b/static/usage/v7/item-divider/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/item-divider/theming/css-properties/javascript.md b/static/usage/v7/item-divider/theming/css-properties/javascript.md index 0c0cdc26f55..6622b6d7e3f 100644 --- a/static/usage/v7/item-divider/theming/css-properties/javascript.md +++ b/static/usage/v7/item-divider/theming/css-properties/javascript.md @@ -12,6 +12,8 @@ - Item Divider + + Item Divider + ``` diff --git a/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md index b3083033541..6cd8d464d7e 100644 --- a/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md @@ -1,3 +1,4 @@ + ```tsx import React from 'react'; import { IonItemDivider, IonLabel } from '@ionic/react'; @@ -7,7 +8,9 @@ import './main.css'; function Example() { return ( - Item Divider + + Item Divider + ); } diff --git a/static/usage/v7/item-divider/theming/css-properties/vue.md b/static/usage/v7/item-divider/theming/css-properties/vue.md index 950e3775d83..3589bcc7cd4 100644 --- a/static/usage/v7/item-divider/theming/css-properties/vue.md +++ b/static/usage/v7/item-divider/theming/css-properties/vue.md @@ -1,7 +1,9 @@ ```html @@ -10,7 +12,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonItemDivider }, + components: { IonItemDivider } }); diff --git a/static/usage/v7/item-group/basic/index.md b/static/usage/v7/item-group/basic/index.md index 21fdcf02654..a752ec62278 100644 --- a/static/usage/v7/item-group/basic/index.md +++ b/static/usage/v7/item-group/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/item-group/sliding-items/angular.md b/static/usage/v7/item-group/sliding-items/angular.md index 2708fde7acc..a451b58c9c4 100644 --- a/static/usage/v7/item-group/sliding-items/angular.md +++ b/static/usage/v7/item-group/sliding-items/angular.md @@ -1,66 +1,94 @@ ```html - Fruits + + Fruits + - Grapes + + Grapes + - Favorite + + Favorite + - Apples + + Apples + - Favorite + + Favorite + - Bananas + + Bananas + - Favorite + + Favorite + - Vegetables + + Vegetables + - Carrots + + Carrots + - Favorite + + Favorite + - Broccoli + + Broccoli + - Favorite + + Favorite + - Celery + + Celery + - Favorite + + Favorite + diff --git a/static/usage/v7/item-group/sliding-items/index.md b/static/usage/v7/item-group/sliding-items/index.md index 4f5f2169e5d..39983e2a9bc 100644 --- a/static/usage/v7/item-group/sliding-items/index.md +++ b/static/usage/v7/item-group/sliding-items/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/item-group/sliding-items/javascript.md b/static/usage/v7/item-group/sliding-items/javascript.md index 2708fde7acc..a451b58c9c4 100644 --- a/static/usage/v7/item-group/sliding-items/javascript.md +++ b/static/usage/v7/item-group/sliding-items/javascript.md @@ -1,66 +1,94 @@ ```html - Fruits + + Fruits + - Grapes + + Grapes + - Favorite + + Favorite + - Apples + + Apples + - Favorite + + Favorite + - Bananas + + Bananas + - Favorite + + Favorite + - Vegetables + + Vegetables + - Carrots + + Carrots + - Favorite + + Favorite + - Broccoli + + Broccoli + - Favorite + + Favorite + - Celery + + Celery + - Favorite + + Favorite + diff --git a/static/usage/v7/item-group/sliding-items/react.md b/static/usage/v7/item-group/sliding-items/react.md index 716935f065c..2ca4d7ca380 100644 --- a/static/usage/v7/item-group/sliding-items/react.md +++ b/static/usage/v7/item-group/sliding-items/react.md @@ -1,80 +1,100 @@ ```tsx import React from 'react'; -import { - IonItem, - IonItemDivider, - IonItemGroup, - IonItemOption, - IonItemOptions, - IonItemSliding, - IonLabel, -} from '@ionic/react'; +import { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react'; function Example() { return ( <> - Fruits + + Fruits + - Grapes + + Grapes + - Favorite + + Favorite + - Apples + + Apples + - Favorite + + Favorite + - Bananas + + Bananas + - Favorite + + Favorite + - Vegetables + + Vegetables + - Carrots + + Carrots + - Favorite + + Favorite + - Broccoli + + Broccoli + - Favorite + + Favorite + - Celery + + Celery + - Favorite + + Favorite + diff --git a/static/usage/v7/item-group/sliding-items/vue.md b/static/usage/v7/item-group/sliding-items/vue.md index 43109034598..5110ba1abed 100644 --- a/static/usage/v7/item-group/sliding-items/vue.md +++ b/static/usage/v7/item-group/sliding-items/vue.md @@ -2,81 +2,101 @@ ``` diff --git a/static/usage/v7/item/basic/angular.md b/static/usage/v7/item/basic/angular.md index b975f267d90..f0b13250493 100644 --- a/static/usage/v7/item/basic/angular.md +++ b/static/usage/v7/item/basic/angular.md @@ -5,15 +5,17 @@ - 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 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. + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v7/item/basic/javascript.md b/static/usage/v7/item/basic/javascript.md index b975f267d90..f0b13250493 100644 --- a/static/usage/v7/item/basic/javascript.md +++ b/static/usage/v7/item/basic/javascript.md @@ -5,15 +5,17 @@ - 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 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. + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v7/item/basic/react.md b/static/usage/v7/item/basic/react.md index 6154239cbf1..dfed86af19e 100644 --- a/static/usage/v7/item/basic/react.md +++ b/static/usage/v7/item/basic/react.md @@ -11,14 +11,16 @@ function Example() { - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + 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, + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v7/item/basic/vue.md b/static/usage/v7/item/basic/vue.md index 37b32f7c2ca..479e90196a4 100644 --- a/static/usage/v7/item/basic/vue.md +++ b/static/usage/v7/item/basic/vue.md @@ -6,15 +6,17 @@ - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + 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. + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v7/item/buttons/angular.md b/static/usage/v7/item/buttons/angular.md index 4d77ff8b9d8..bf7069f48f7 100644 --- a/static/usage/v7/item/buttons/angular.md +++ b/static/usage/v7/item/buttons/angular.md @@ -1,8 +1,12 @@ ```html - Start + + Start + Default Buttons - End + + End + @@ -29,8 +33,14 @@ Button Sizes - Small - Default - Large + + Small + + + Default + + + Large + ``` diff --git a/static/usage/v7/item/buttons/javascript.md b/static/usage/v7/item/buttons/javascript.md index 4d77ff8b9d8..bf7069f48f7 100644 --- a/static/usage/v7/item/buttons/javascript.md +++ b/static/usage/v7/item/buttons/javascript.md @@ -1,8 +1,12 @@ ```html - Start + + Start + Default Buttons - End + + End + @@ -29,8 +33,14 @@ Button Sizes - Small - Default - Large + + Small + + + Default + + + Large + ``` diff --git a/static/usage/v7/item/buttons/react.md b/static/usage/v7/item/buttons/react.md index fda29c7f11a..8776e5215fb 100644 --- a/static/usage/v7/item/buttons/react.md +++ b/static/usage/v7/item/buttons/react.md @@ -7,9 +7,13 @@ function Example() { return ( <> - Start + + Start + Default Buttons - End + + End + diff --git a/static/usage/v7/item/buttons/vue.md b/static/usage/v7/item/buttons/vue.md index 8680f189472..02de38e58ab 100644 --- a/static/usage/v7/item/buttons/vue.md +++ b/static/usage/v7/item/buttons/vue.md @@ -1,9 +1,13 @@ ```html @@ -44,8 +54,8 @@ export default defineComponent({ components: { IonButton, IonIcon, IonItem, IonLabel }, setup() { - return { home, navigate, star }; - }, + return { home, navigate, star } + } }); ``` diff --git a/static/usage/v7/item/detail-arrows/index.md b/static/usage/v7/item/detail-arrows/index.md index d9cacd12e84..37b9b495dc1 100644 --- a/static/usage/v7/item/detail-arrows/index.md +++ b/static/usage/v7/item/detail-arrows/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/item/detail-arrows/vue.md b/static/usage/v7/item/detail-arrows/vue.md index 54010095652..d341c004f15 100644 --- a/static/usage/v7/item/detail-arrows/vue.md +++ b/static/usage/v7/item/detail-arrows/vue.md @@ -51,4 +51,3 @@ }, }); -``` diff --git a/static/usage/v7/item/icons/angular.md b/static/usage/v7/item/icons/angular.md index b81a463e004..49a1cc707e3 100644 --- a/static/usage/v7/item/icons/angular.md +++ b/static/usage/v7/item/icons/angular.md @@ -1,21 +1,29 @@ ```html - Default Icon + + Default Icon + - Large Icon + + Large Icon + - Small Icon + + Small Icon + - Default Icon + + Default Icon + ``` diff --git a/static/usage/v7/item/icons/javascript.md b/static/usage/v7/item/icons/javascript.md index b81a463e004..49a1cc707e3 100644 --- a/static/usage/v7/item/icons/javascript.md +++ b/static/usage/v7/item/icons/javascript.md @@ -1,21 +1,29 @@ ```html - Default Icon + + Default Icon + - Large Icon + + Large Icon + - Small Icon + + Small Icon + - Default Icon + + Default Icon + ``` diff --git a/static/usage/v7/item/icons/react.md b/static/usage/v7/item/icons/react.md index 09496398f7f..a5fc0ae6629 100644 --- a/static/usage/v7/item/icons/react.md +++ b/static/usage/v7/item/icons/react.md @@ -7,23 +7,31 @@ function Example() { return ( <> - Default Icon + + Default Icon + - Large Icon + + Large Icon + - Small Icon + + Small Icon + - Default Icon + + Default Icon + ); diff --git a/static/usage/v7/item/icons/vue.md b/static/usage/v7/item/icons/vue.md index a89e5e6aad0..82e09004fbe 100644 --- a/static/usage/v7/item/icons/vue.md +++ b/static/usage/v7/item/icons/vue.md @@ -1,23 +1,31 @@ ```html @@ -29,8 +37,8 @@ export default defineComponent({ components: { IonButton, IonIcon, IonItem, IonLabel }, setup() { - return { informationCircle, star }; - }, + return { informationCircle, star } + } }); ``` diff --git a/static/usage/v7/item/lines/angular.md b/static/usage/v7/item/lines/angular.md index 022573e9d9d..b0700ae1a1b 100644 --- a/static/usage/v7/item/lines/angular.md +++ b/static/usage/v7/item/lines/angular.md @@ -1,6 +1,8 @@ ```html - Default Item Lines + + Default Item Lines + diff --git a/static/usage/v7/item/lines/javascript.md b/static/usage/v7/item/lines/javascript.md index 022573e9d9d..b0700ae1a1b 100644 --- a/static/usage/v7/item/lines/javascript.md +++ b/static/usage/v7/item/lines/javascript.md @@ -1,6 +1,8 @@ ```html - Default Item Lines + + Default Item Lines + diff --git a/static/usage/v7/item/lines/react.md b/static/usage/v7/item/lines/react.md index dbe79214349..c5e2cf3f55c 100644 --- a/static/usage/v7/item/lines/react.md +++ b/static/usage/v7/item/lines/react.md @@ -7,7 +7,9 @@ function Example() { return ( <> - Default Item Lines + + Default Item Lines + diff --git a/static/usage/v7/item/lines/vue.md b/static/usage/v7/item/lines/vue.md index fb855de221f..37c6c432ca4 100644 --- a/static/usage/v7/item/lines/vue.md +++ b/static/usage/v7/item/lines/vue.md @@ -1,7 +1,9 @@ ```html diff --git a/static/usage/v7/item/theming/colors/index.md b/static/usage/v7/item/theming/colors/index.md index f348fc83731..9973f9daa33 100644 --- a/static/usage/v7/item/theming/colors/index.md +++ b/static/usage/v7/item/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/item/theming/css-properties/index.md b/static/usage/v7/item/theming/css-properties/index.md index 31b1ae0b13d..f3d49f6332b 100644 --- a/static/usage/v7/item/theming/css-properties/index.md +++ b/static/usage/v7/item/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/item/theming/css-shadow-parts/index.md b/static/usage/v7/item/theming/css-shadow-parts/index.md index 53c94048081..10f1bfc6ba6 100644 --- a/static/usage/v7/item/theming/css-shadow-parts/index.md +++ b/static/usage/v7/item/theming/css-shadow-parts/index.md @@ -11,8 +11,8 @@ 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/v7/item/theming/input-highlight/index.md b/static/usage/v7/item/theming/input-highlight/index.md index b2866f274cc..4782bfdd6a5 100644 --- a/static/usage/v7/item/theming/input-highlight/index.md +++ b/static/usage/v7/item/theming/input-highlight/index.md @@ -11,8 +11,8 @@ 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/v7/label/item/angular.md b/static/usage/v7/label/item/angular.md index 54f24979079..be252b899a0 100644 --- a/static/usage/v7/label/item/angular.md +++ b/static/usage/v7/label/item/angular.md @@ -5,15 +5,17 @@ - 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 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. + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v7/label/item/javascript.md b/static/usage/v7/label/item/javascript.md index 54f24979079..be252b899a0 100644 --- a/static/usage/v7/label/item/javascript.md +++ b/static/usage/v7/label/item/javascript.md @@ -5,15 +5,17 @@ - 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 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. + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v7/label/item/react.md b/static/usage/v7/label/item/react.md index f5bdf5a5d1b..88e4f904deb 100644 --- a/static/usage/v7/label/item/react.md +++ b/static/usage/v7/label/item/react.md @@ -11,14 +11,16 @@ function Example() { - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + 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, + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v7/label/item/vue.md b/static/usage/v7/label/item/vue.md index fe4cd48904a..99ec3ea3d40 100644 --- a/static/usage/v7/label/item/vue.md +++ b/static/usage/v7/label/item/vue.md @@ -6,15 +6,17 @@ - Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + 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. + Multi-line text that should wrap when it is too long + to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. diff --git a/static/usage/v7/list-header/basic/index.md b/static/usage/v7/list-header/basic/index.md index e6e78fa997c..79b5b31a75f 100644 --- a/static/usage/v7/list-header/basic/index.md +++ b/static/usage/v7/list-header/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/list-header/buttons/index.md b/static/usage/v7/list-header/buttons/index.md index 4841548982f..5c724b1a8f5 100644 --- a/static/usage/v7/list-header/buttons/index.md +++ b/static/usage/v7/list-header/buttons/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/list-header/lines/index.md b/static/usage/v7/list-header/lines/index.md index 11f58d13e5b..a8e84eddf7f 100644 --- a/static/usage/v7/list-header/lines/index.md +++ b/static/usage/v7/list-header/lines/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/list-header/theming/colors/index.md b/static/usage/v7/list-header/theming/colors/index.md index 5491fb58d18..13af9007f88 100644 --- a/static/usage/v7/list-header/theming/colors/index.md +++ b/static/usage/v7/list-header/theming/colors/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/list-header/theming/css-properties/index.md b/static/usage/v7/list-header/theming/css-properties/index.md index 5c1f38c63b6..e273cdb2b91 100644 --- a/static/usage/v7/list-header/theming/css-properties/index.md +++ b/static/usage/v7/list-header/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/loading/controller/index.md b/static/usage/v7/loading/controller/index.md index af84a0862f4..0b953906d7d 100644 --- a/static/usage/v7/loading/controller/index.md +++ b/static/usage/v7/loading/controller/index.md @@ -8,8 +8,8 @@ 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/v7/loading/controller/javascript.md b/static/usage/v7/loading/controller/javascript.md index f54756c396b..c5507d123af 100644 --- a/static/usage/v7/loading/controller/javascript.md +++ b/static/usage/v7/loading/controller/javascript.md @@ -2,13 +2,13 @@ Show Loading ``` diff --git a/static/usage/v7/loading/controller/react.md b/static/usage/v7/loading/controller/react.md index 06dc3413bab..16280a1e91a 100644 --- a/static/usage/v7/loading/controller/react.md +++ b/static/usage/v7/loading/controller/react.md @@ -2,6 +2,7 @@ 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 @@ -10,14 +11,12 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Dismissing after 3 seconds...', - duration: 3000, - }); - }} - > + { + present({ + message: 'Dismissing after 3 seconds...', + duration: 3000 + }) + }}> Show Loading ); diff --git a/static/usage/v7/loading/controller/vue.md b/static/usage/v7/loading/controller/vue.md index e80b61cc8b3..17b65b33af0 100644 --- a/static/usage/v7/loading/controller/vue.md +++ b/static/usage/v7/loading/controller/vue.md @@ -13,14 +13,14 @@ const showLoading = async () => { const loading = await loadingController.create({ message: 'Dismissing after 3 seconds...', - duration: 3000, + duration: 3000 }); - + loading.present(); - }; - - return { showLoading }; - }, + } + + return { showLoading } + } }); ``` diff --git a/static/usage/v7/loading/inline/index.md b/static/usage/v7/loading/inline/index.md index f028f7899c6..e4038ad027d 100644 --- a/static/usage/v7/loading/inline/index.md +++ b/static/usage/v7/loading/inline/index.md @@ -6,12 +6,12 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/loading/spinners/index.md b/static/usage/v7/loading/spinners/index.md index b274988725f..c9aa963a5f1 100644 --- a/static/usage/v7/loading/spinners/index.md +++ b/static/usage/v7/loading/spinners/index.md @@ -6,12 +6,12 @@ import react from './react.md'; import vue from './vue.md'; diff --git a/static/usage/v7/loading/theming/angular/global_css.md b/static/usage/v7/loading/theming/angular/global_css.md index af410626c52..16bf7af3522 100644 --- a/static/usage/v7/loading/theming/angular/global_css.md +++ b/static/usage/v7/loading/theming/angular/global_css.md @@ -5,4 +5,4 @@ ion-loading.custom-loading { color: #1c6dff; } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/loading/theming/index.md b/static/usage/v7/loading/theming/index.md index 31027920779..f0a5a379593 100644 --- a/static/usage/v7/loading/theming/index.md +++ b/static/usage/v7/loading/theming/index.md @@ -11,8 +11,8 @@ 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/v7/loading/theming/react/main_css.md b/static/usage/v7/loading/theming/react/main_css.md index af410626c52..16bf7af3522 100644 --- a/static/usage/v7/loading/theming/react/main_css.md +++ b/static/usage/v7/loading/theming/react/main_css.md @@ -5,4 +5,4 @@ ion-loading.custom-loading { color: #1c6dff; } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/menu/basic/angular.md b/static/usage/v7/menu/basic/angular.md index 0fb5465519f..c169f35f1f4 100644 --- a/static/usage/v7/menu/basic/angular.md +++ b/static/usage/v7/menu/basic/angular.md @@ -16,6 +16,8 @@ Menu - Tap the button in the toolbar to open the menu. + + Tap the button in the toolbar to open the menu. +
``` diff --git a/static/usage/v7/menu/basic/index.md b/static/usage/v7/menu/basic/index.md index bfdec39e324..e682c266d64 100644 --- a/static/usage/v7/menu/basic/index.md +++ b/static/usage/v7/menu/basic/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/menu/basic/javascript.md b/static/usage/v7/menu/basic/javascript.md index afb14178ea4..570c03c9512 100644 --- a/static/usage/v7/menu/basic/javascript.md +++ b/static/usage/v7/menu/basic/javascript.md @@ -16,6 +16,8 @@ Menu - Tap the button in the toolbar to open the menu. + + Tap the button in the toolbar to open the menu. +
``` diff --git a/static/usage/v7/menu/basic/react.md b/static/usage/v7/menu/basic/react.md index 671dba8a744..71abc258aef 100644 --- a/static/usage/v7/menu/basic/react.md +++ b/static/usage/v7/menu/basic/react.md @@ -1,6 +1,15 @@ ```tsx import React from 'react'; -import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +import { + IonButtons, + IonContent, + IonHeader, + IonMenu, + IonMenuButton, + IonPage, + IonTitle, + IonToolbar +} from '@ionic/react'; function Example() { return ( <> @@ -21,7 +30,9 @@ function Example() { Menu - Tap the button in the toolbar to open the menu. + + Tap the button in the toolbar to open the menu. + ); diff --git a/static/usage/v7/menu/basic/vue.md b/static/usage/v7/menu/basic/vue.md index 531c50678f8..d6e3d73d648 100644 --- a/static/usage/v7/menu/basic/vue.md +++ b/static/usage/v7/menu/basic/vue.md @@ -17,12 +17,23 @@ Menu - Tap the button in the toolbar to open the menu. + + Tap the button in the toolbar to open the menu. + diff --git a/static/usage/v7/menu/theming/angular/example_component_css.md b/static/usage/v7/menu/theming/angular/example_component_css.md index 1bba1305577..839c8f41df5 100644 --- a/static/usage/v7/menu/theming/angular/example_component_css.md +++ b/static/usage/v7/menu/theming/angular/example_component_css.md @@ -8,4 +8,4 @@ ion-menu::part(container) { box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18); } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/menu/theming/angular/example_component_html.md b/static/usage/v7/menu/theming/angular/example_component_html.md index f46819d3e99..f630cf4c378 100644 --- a/static/usage/v7/menu/theming/angular/example_component_html.md +++ b/static/usage/v7/menu/theming/angular/example_component_html.md @@ -17,7 +17,9 @@ Menu - Tap the button in the toolbar to open the menu. + + Tap the button in the toolbar to open the menu. +
``` diff --git a/static/usage/v7/menu/theming/index.md b/static/usage/v7/menu/theming/index.md index b664766b0ba..83a016b19b7 100644 --- a/static/usage/v7/menu/theming/index.md +++ b/static/usage/v7/menu/theming/index.md @@ -11,8 +11,8 @@ 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/v7/menu/theming/javascript.md b/static/usage/v7/menu/theming/javascript.md index 6df6026c610..a147ef68090 100644 --- a/static/usage/v7/menu/theming/javascript.md +++ b/static/usage/v7/menu/theming/javascript.md @@ -17,7 +17,9 @@ Menu - Tap the button in the toolbar to open the menu. + + Tap the button in the toolbar to open the menu. +
diff --git a/static/usage/v7/menu/theming/react/main_css.md b/static/usage/v7/menu/theming/react/main_css.md index 1bba1305577..839c8f41df5 100644 --- a/static/usage/v7/menu/theming/react/main_css.md +++ b/static/usage/v7/menu/theming/react/main_css.md @@ -8,4 +8,4 @@ ion-menu::part(container) { box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18); } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/menu/theming/react/main_tsx.md b/static/usage/v7/menu/theming/react/main_tsx.md index c2f3d72ab2b..c935fefb33f 100644 --- a/static/usage/v7/menu/theming/react/main_tsx.md +++ b/static/usage/v7/menu/theming/react/main_tsx.md @@ -1,6 +1,15 @@ ```tsx import React from 'react'; -import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +import { + IonButtons, + IonContent, + IonHeader, + IonMenu, + IonMenuButton, + IonPage, + IonTitle, + IonToolbar +} from '@ionic/react'; import './main.css'; @@ -24,7 +33,9 @@ function Example() { Menu - Tap the button in the toolbar to open the menu. + + Tap the button in the toolbar to open the menu. + ); diff --git a/static/usage/v7/menu/theming/vue.md b/static/usage/v7/menu/theming/vue.md index 27a96f00e0b..b9d02e48b1f 100644 --- a/static/usage/v7/menu/theming/vue.md +++ b/static/usage/v7/menu/theming/vue.md @@ -17,12 +17,23 @@ Menu - Tap the button in the toolbar to open the menu. + + Tap the button in the toolbar to open the menu. + diff --git a/static/usage/v7/menu/toggle/index.md b/static/usage/v7/menu/toggle/index.md index a6670116699..df6df9fccbb 100644 --- a/static/usage/v7/menu/toggle/index.md +++ b/static/usage/v7/menu/toggle/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/menu/toggle/react.md b/static/usage/v7/menu/toggle/react.md index 3428aaa42d0..a940b83e4af 100644 --- a/static/usage/v7/menu/toggle/react.md +++ b/static/usage/v7/menu/toggle/react.md @@ -1,6 +1,15 @@ ```tsx import React from 'react'; -import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +import { + IonButton, + IonContent, + IonHeader, + IonMenu, + IonMenuToggle, + IonPage, + IonTitle, + IonToolbar +} from '@ionic/react'; function Example() { return ( <> @@ -13,7 +22,7 @@ function Example() { Click to close the menu - + diff --git a/static/usage/v7/menu/toggle/vue.md b/static/usage/v7/menu/toggle/vue.md index 6b723df95ad..2cc4807109e 100644 --- a/static/usage/v7/menu/toggle/vue.md +++ b/static/usage/v7/menu/toggle/vue.md @@ -27,7 +27,16 @@ diff --git a/static/usage/v7/menu/type/angular/example_component_html.md b/static/usage/v7/menu/type/angular/example_component_html.md index fd995d7a32f..7154c645660 100644 --- a/static/usage/v7/menu/type/angular/example_component_html.md +++ b/static/usage/v7/menu/type/angular/example_component_html.md @@ -39,11 +39,10 @@ - -
+
Click to open the menu
-``` +``` \ No newline at end of file diff --git a/static/usage/v7/menu/type/index.md b/static/usage/v7/menu/type/index.md index cdbbf5e57df..d0fc312baa1 100644 --- a/static/usage/v7/menu/type/index.md +++ b/static/usage/v7/menu/type/index.md @@ -8,8 +8,8 @@ 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/v7/menu/type/javascript.md b/static/usage/v7/menu/type/javascript.md index c8b49975b84..24dc49cf906 100644 --- a/static/usage/v7/menu/type/javascript.md +++ b/static/usage/v7/menu/type/javascript.md @@ -39,8 +39,7 @@ - -
+
Click to open the menu diff --git a/static/usage/v7/menu/type/react.md b/static/usage/v7/menu/type/react.md index 946707cba38..806e67e21a2 100644 --- a/static/usage/v7/menu/type/react.md +++ b/static/usage/v7/menu/type/react.md @@ -1,6 +1,6 @@ ```tsx import React, { useState } from 'react'; -import { +import { IonButton, IonContent, IonHeader, @@ -12,7 +12,7 @@ import { IonRadio, IonRadioGroup, IonTitle, - IonToolbar, + IonToolbar } from '@ionic/react'; import type { RadioGroupCustomEvent } from '@ionic/react'; @@ -30,7 +30,7 @@ function Example() { Click to close the menu - + diff --git a/static/usage/v7/menu/type/vue.md b/static/usage/v7/menu/type/vue.md index 8277d7a3179..2abcb137577 100644 --- a/static/usage/v7/menu/type/vue.md +++ b/static/usage/v7/menu/type/vue.md @@ -12,7 +12,7 @@ - +
@@ -40,8 +40,7 @@ - -
+
Click to open the menu @@ -62,7 +61,7 @@ IonRadio, IonRadioGroup, IonTitle, - IonToolbar, + IonToolbar } from '@ionic/vue'; import { defineComponent, ref } from 'vue'; @@ -79,13 +78,13 @@ IonRadio, IonRadioGroup, IonTitle, - IonToolbar, + IonToolbar }, setup() { const menuType = ref('overlay'); - + return { menuType }; - }, + } }); ``` diff --git a/static/usage/v7/modal/can-dismiss/boolean/index.md b/static/usage/v7/modal/can-dismiss/boolean/index.md index ebe902d0628..325ad4b1645 100644 --- a/static/usage/v7/modal/can-dismiss/boolean/index.md +++ b/static/usage/v7/modal/can-dismiss/boolean/index.md @@ -9,8 +9,8 @@ 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/v7/modal/can-dismiss/function/index.md b/static/usage/v7/modal/can-dismiss/function/index.md index f78fb9852ff..a0b934f8e7e 100644 --- a/static/usage/v7/modal/can-dismiss/function/index.md +++ b/static/usage/v7/modal/can-dismiss/function/index.md @@ -9,8 +9,8 @@ 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/v7/modal/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md index 3dc37bd79f4..a37ce212fc8 100644 --- a/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md +++ b/static/usage/v7/modal/can-dismiss/prevent-swipe-to-close/index.md @@ -9,8 +9,8 @@ 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/v7/modal/card/basic/index.md b/static/usage/v7/modal/card/basic/index.md index ce295566ca8..d3fca17f0b1 100644 --- a/static/usage/v7/modal/card/basic/index.md +++ b/static/usage/v7/modal/card/basic/index.md @@ -8,8 +8,8 @@ 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/v7/modal/controller/index.md b/static/usage/v7/modal/controller/index.md index f8f1dbb2fe2..750bbe53efb 100644 --- a/static/usage/v7/modal/controller/index.md +++ b/static/usage/v7/modal/controller/index.md @@ -13,8 +13,8 @@ import angular_modal_example_component_ts from './angular/modal-example_componen import angular_modal_example_component_html from './angular/modal-example_component_html.md'; diff --git a/static/usage/v7/modal/custom-dialogs/index.md b/static/usage/v7/modal/custom-dialogs/index.md index afd028dbce3..2aec2d39f33 100644 --- a/static/usage/v7/modal/custom-dialogs/index.md +++ b/static/usage/v7/modal/custom-dialogs/index.md @@ -10,8 +10,8 @@ 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/v7/modal/custom-dialogs/react/main_tsx.md b/static/usage/v7/modal/custom-dialogs/react/main_tsx.md index e6120a8fcc7..b60d3f275ab 100644 --- a/static/usage/v7/modal/custom-dialogs/react/main_tsx.md +++ b/static/usage/v7/modal/custom-dialogs/react/main_tsx.md @@ -38,7 +38,7 @@ function Example() {

Dialog header

- + diff --git a/static/usage/v7/modal/custom-dialogs/vue.md b/static/usage/v7/modal/custom-dialogs/vue.md index 57362d546fc..f910bc061e4 100644 --- a/static/usage/v7/modal/custom-dialogs/vue.md +++ b/static/usage/v7/modal/custom-dialogs/vue.md @@ -7,22 +7,22 @@ --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; } @@ -36,11 +36,11 @@ Open Custom Dialog - +

Dialog header

- + @@ -96,7 +96,7 @@ }, setup() { return { personCircle }; - }, + } }); ``` diff --git a/static/usage/v7/modal/inline/basic/index.md b/static/usage/v7/modal/inline/basic/index.md index 2de40ceb996..1406cd29c09 100644 --- a/static/usage/v7/modal/inline/basic/index.md +++ b/static/usage/v7/modal/inline/basic/index.md @@ -8,8 +8,8 @@ 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/v7/modal/inline/is-open/index.md b/static/usage/v7/modal/inline/is-open/index.md index 20c34b14771..b77d9dd8a7a 100644 --- a/static/usage/v7/modal/inline/is-open/index.md +++ b/static/usage/v7/modal/inline/is-open/index.md @@ -8,8 +8,8 @@ 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/v7/modal/performance/mount/angular.md b/static/usage/v7/modal/performance/mount/angular.md index 4b8bb7bc9d2..3afd202d33b 100644 --- a/static/usage/v7/modal/performance/mount/angular.md +++ b/static/usage/v7/modal/performance/mount/angular.md @@ -16,7 +16,9 @@ Modal - This content was mounted as soon as the modal was created. + + This content was mounted as soon as the modal was created. + diff --git a/static/usage/v7/modal/performance/mount/index.md b/static/usage/v7/modal/performance/mount/index.md index 86245ede4bb..16018d41230 100644 --- a/static/usage/v7/modal/performance/mount/index.md +++ b/static/usage/v7/modal/performance/mount/index.md @@ -6,14 +6,14 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/modal/performance/mount/react.md b/static/usage/v7/modal/performance/mount/react.md index bb6a9c32360..5b50612291b 100644 --- a/static/usage/v7/modal/performance/mount/react.md +++ b/static/usage/v7/modal/performance/mount/react.md @@ -1,6 +1,15 @@ ```tsx import React, { useRef } from 'react'; -import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react'; +import { + IonButtons, + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, +} from '@ionic/react'; function Example() { const modal = useRef(null); @@ -25,7 +34,9 @@ function Example() { Modal - This content was mounted as soon as the modal was created. + + This content was mounted as soon as the modal was created. + diff --git a/static/usage/v7/modal/performance/mount/vue.md b/static/usage/v7/modal/performance/mount/vue.md index 0407ee98a4e..515229dde25 100644 --- a/static/usage/v7/modal/performance/mount/vue.md +++ b/static/usage/v7/modal/performance/mount/vue.md @@ -16,13 +16,23 @@ Modal - This content was mounted as soon as the modal was created. + + This content was mounted as soon as the modal was created. + ``` diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_html.md b/static/usage/v7/picker/inline/trigger/angular/example_component_html.md index 533c4b1ac70..af47368a129 100644 --- a/static/usage/v7/picker/inline/trigger/angular/example_component_html.md +++ b/static/usage/v7/picker/inline/trigger/angular/example_component_html.md @@ -1,4 +1,8 @@ ```html Open - + ``` diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md index 90413b31470..ebd914649f4 100644 --- a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md +++ b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md @@ -6,41 +6,36 @@ import { Component } from '@angular/core'; 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 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', + role: 'cancel' }, { text: 'Confirm', handler: (value) => { window.alert(`You selected: ${value.languages.value}`); - }, - }, + } + } ]; } ``` diff --git a/static/usage/v7/picker/inline/trigger/index.md b/static/usage/v7/picker/inline/trigger/index.md index e08b0f9e0b1..1bd0ab3950f 100644 --- a/static/usage/v7/picker/inline/trigger/index.md +++ b/static/usage/v7/picker/inline/trigger/index.md @@ -8,8 +8,8 @@ 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/v7/picker/inline/trigger/javascript.md b/static/usage/v7/picker/inline/trigger/javascript.md index e02349631ba..2b7a20eb138 100644 --- a/static/usage/v7/picker/inline/trigger/javascript.md +++ b/static/usage/v7/picker/inline/trigger/javascript.md @@ -5,41 +5,36 @@ ``` diff --git a/static/usage/v7/picker/inline/trigger/react.md b/static/usage/v7/picker/inline/trigger/react.md index 08506f7fb30..ec20daef156 100644 --- a/static/usage/v7/picker/inline/trigger/react.md +++ b/static/usage/v7/picker/inline/trigger/react.md @@ -8,40 +8,37 @@ function Example() { Open { window.alert(`You selected: ${value.languages.value}`); - }, - }, + } + } ]} > diff --git a/static/usage/v7/picker/inline/trigger/vue.md b/static/usage/v7/picker/inline/trigger/vue.md index 07046c63cf7..d4681ff66f6 100644 --- a/static/usage/v7/picker/inline/trigger/vue.md +++ b/static/usage/v7/picker/inline/trigger/vue.md @@ -1,7 +1,11 @@ ```html ``` diff --git a/static/usage/v7/picker/multiple-column/angular/example_component_html.md b/static/usage/v7/picker/multiple-column/angular/example_component_html.md index 533c4b1ac70..af47368a129 100644 --- a/static/usage/v7/picker/multiple-column/angular/example_component_html.md +++ b/static/usage/v7/picker/multiple-column/angular/example_component_html.md @@ -1,4 +1,8 @@ ```html Open - + ``` diff --git a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md index 10790602bc8..11cd65eb0fc 100644 --- a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md +++ b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md @@ -6,71 +6,61 @@ import { Component } from '@angular/core'; 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 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', + role: 'cancel' }, { text: 'Confirm', handler: (value) => { window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); - }, - }, + } + } ]; } ``` diff --git a/static/usage/v7/picker/multiple-column/index.md b/static/usage/v7/picker/multiple-column/index.md index d8b5d5d7485..48a6d1202fa 100644 --- a/static/usage/v7/picker/multiple-column/index.md +++ b/static/usage/v7/picker/multiple-column/index.md @@ -8,8 +8,8 @@ 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/v7/picker/multiple-column/javascript.md b/static/usage/v7/picker/multiple-column/javascript.md index 9196a0dc7c7..ad8e838a8c0 100644 --- a/static/usage/v7/picker/multiple-column/javascript.md +++ b/static/usage/v7/picker/multiple-column/javascript.md @@ -5,71 +5,61 @@ ``` diff --git a/static/usage/v7/picker/multiple-column/react.md b/static/usage/v7/picker/multiple-column/react.md index cd01f4aa199..cfa6465169e 100644 --- a/static/usage/v7/picker/multiple-column/react.md +++ b/static/usage/v7/picker/multiple-column/react.md @@ -8,72 +8,62 @@ function Example() { Open { - window.alert( - `You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}` - ); - }, - }, + window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); + } + } ]} > diff --git a/static/usage/v7/picker/multiple-column/vue.md b/static/usage/v7/picker/multiple-column/vue.md index 16251372059..df54238bf66 100644 --- a/static/usage/v7/picker/multiple-column/vue.md +++ b/static/usage/v7/picker/multiple-column/vue.md @@ -1,7 +1,11 @@ ```html ``` diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_css.md b/static/usage/v7/popover/customization/positioning/angular/example_component_css.md index 56a63480d75..c92d80212a7 100644 --- a/static/usage/v7/popover/customization/positioning/angular/example_component_css.md +++ b/static/usage/v7/popover/customization/positioning/angular/example_component_css.md @@ -9,4 +9,4 @@ ion-popover { flex-direction: column; padding: 80px; } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_html.md b/static/usage/v7/popover/customization/positioning/angular/example_component_html.md index d911b195f92..a0036bd9ef9 100644 --- a/static/usage/v7/popover/customization/positioning/angular/example_component_html.md +++ b/static/usage/v7/popover/customization/positioning/angular/example_component_html.md @@ -16,7 +16,7 @@ Side=Left, Alignment=Start - + Hello World! diff --git a/static/usage/v7/popover/customization/positioning/index.md b/static/usage/v7/popover/customization/positioning/index.md index a61a09a59ac..b39363d2a7f 100644 --- a/static/usage/v7/popover/customization/positioning/index.md +++ b/static/usage/v7/popover/customization/positioning/index.md @@ -11,9 +11,9 @@ 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/v7/popover/customization/positioning/react/main_css.md b/static/usage/v7/popover/customization/positioning/react/main_css.md index 56a63480d75..c92d80212a7 100644 --- a/static/usage/v7/popover/customization/positioning/react/main_css.md +++ b/static/usage/v7/popover/customization/positioning/react/main_css.md @@ -9,4 +9,4 @@ ion-popover { flex-direction: column; padding: 80px; } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/popover/customization/sizing/index.md b/static/usage/v7/popover/customization/sizing/index.md index 862a77d4642..3eb127648dc 100644 --- a/static/usage/v7/popover/customization/sizing/index.md +++ b/static/usage/v7/popover/customization/sizing/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/popover/customization/styling/angular/global_css.md b/static/usage/v7/popover/customization/styling/angular/global_css.md index 434a31d24d9..25890b90538 100644 --- a/static/usage/v7/popover/customization/styling/angular/global_css.md +++ b/static/usage/v7/popover/customization/styling/angular/global_css.md @@ -14,4 +14,4 @@ ion-popover ion-content { ion-popover::part(backdrop) { background-color: rgb(6, 14, 106); } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/popover/customization/styling/index.md b/static/usage/v7/popover/customization/styling/index.md index 630c8e4db77..658ef72d45a 100644 --- a/static/usage/v7/popover/customization/styling/index.md +++ b/static/usage/v7/popover/customization/styling/index.md @@ -10,9 +10,9 @@ 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/v7/popover/customization/styling/react/main_css.md b/static/usage/v7/popover/customization/styling/react/main_css.md index 434a31d24d9..25890b90538 100644 --- a/static/usage/v7/popover/customization/styling/react/main_css.md +++ b/static/usage/v7/popover/customization/styling/react/main_css.md @@ -14,4 +14,4 @@ ion-popover ion-content { ion-popover::part(backdrop) { background-color: rgb(6, 14, 106); } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/popover/nested/index.md b/static/usage/v7/popover/nested/index.md index 74ea996d2a5..cb8a824edb0 100644 --- a/static/usage/v7/popover/nested/index.md +++ b/static/usage/v7/popover/nested/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/popover/performance/mount/index.md b/static/usage/v7/popover/performance/mount/index.md index 4b6850749d5..9c846cc784b 100644 --- a/static/usage/v7/popover/performance/mount/index.md +++ b/static/usage/v7/popover/performance/mount/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/popover/performance/mount/javascript.md b/static/usage/v7/popover/performance/mount/javascript.md index 297c94344f1..5dd5f8a624e 100644 --- a/static/usage/v7/popover/performance/mount/javascript.md +++ b/static/usage/v7/popover/performance/mount/javascript.md @@ -3,4 +3,4 @@ This content was mounted as soon as the popover was created. -``` +``` \ No newline at end of file diff --git a/static/usage/v7/popover/presenting/controller/angular/example_component_html.md b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md index f84fbf6fd80..da857f78745 100644 --- a/static/usage/v7/popover/presenting/controller/angular/example_component_html.md +++ b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md @@ -1,4 +1,4 @@ ```html Click Me

{{ roleMsg }}

-``` +``` \ No newline at end of file diff --git a/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md b/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md index 583a6dea593..74cbf83fec4 100644 --- a/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md +++ b/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md @@ -1,3 +1,3 @@ ```html Hello World! -``` +``` \ No newline at end of file diff --git a/static/usage/v7/popover/presenting/controller/index.md b/static/usage/v7/popover/presenting/controller/index.md index 018e63a8352..65764b052ff 100644 --- a/static/usage/v7/popover/presenting/controller/index.md +++ b/static/usage/v7/popover/presenting/controller/index.md @@ -13,9 +13,9 @@ 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/v7/popover/presenting/controller/javascript.md b/static/usage/v7/popover/presenting/controller/javascript.md index 078514628a8..896772b276b 100644 --- a/static/usage/v7/popover/presenting/controller/javascript.md +++ b/static/usage/v7/popover/presenting/controller/javascript.md @@ -20,7 +20,7 @@ async function presentPopover(e) { const popover = Object.assign(document.createElement('ion-popover'), { component: 'popover-page', - event: e, + event: e }); document.body.appendChild(popover); diff --git a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md index 85f8bd06cad..1bc5738c6ad 100644 --- a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md +++ b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md @@ -4,12 +4,12 @@ -``` +``` \ No newline at end of file diff --git a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md index 1d8369f31e2..80201dba3d2 100644 --- a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md +++ b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md @@ -5,4 +5,4 @@ Hello World! -``` +``` \ No newline at end of file diff --git a/static/usage/v7/popover/presenting/inline-isopen/index.md b/static/usage/v7/popover/presenting/inline-isopen/index.md index a7a3073160f..b03937849fb 100644 --- a/static/usage/v7/popover/presenting/inline-isopen/index.md +++ b/static/usage/v7/popover/presenting/inline-isopen/index.md @@ -8,9 +8,9 @@ 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/v7/popover/presenting/inline-isopen/javascript.md b/static/usage/v7/popover/presenting/inline-isopen/javascript.md index 1daafed1894..b780125ba1e 100644 --- a/static/usage/v7/popover/presenting/inline-isopen/javascript.md +++ b/static/usage/v7/popover/presenting/inline-isopen/javascript.md @@ -8,11 +8,11 @@ const button = document.querySelector('ion-button'); const popover = document.querySelector('ion-popover'); - button.addEventListener('click', (e) => { + button.addEventListener('click', e => { popover.event = e; popover.isOpen = true; }); - popover.addEventListener('didDismiss', () => (popover.isOpen = false)); + popover.addEventListener('didDismiss', () => popover.isOpen = false); ``` diff --git a/static/usage/v7/popover/presenting/inline-trigger/index.md b/static/usage/v7/popover/presenting/inline-trigger/index.md index b891d0856b2..ac99108a561 100644 --- a/static/usage/v7/popover/presenting/inline-trigger/index.md +++ b/static/usage/v7/popover/presenting/inline-trigger/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md index a876a376204..56e3d3a3b09 100644 --- a/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md +++ b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.css'], + styleUrls: ['example.component.css'] }) export class ExampleComponent { public buffer = 0.06; diff --git a/static/usage/v7/progress-bar/buffer/index.md b/static/usage/v7/progress-bar/buffer/index.md index 1156cccd7fe..2108ac9ed43 100644 --- a/static/usage/v7/progress-bar/buffer/index.md +++ b/static/usage/v7/progress-bar/buffer/index.md @@ -9,8 +9,8 @@ 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/v7/progress-bar/buffer/react.md b/static/usage/v7/progress-bar/buffer/react.md index 10f35e69538..1fa8208ac3a 100644 --- a/static/usage/v7/progress-bar/buffer/react.md +++ b/static/usage/v7/progress-bar/buffer/react.md @@ -22,7 +22,9 @@ function Example() { }, 1000); } - return ; + return ( + + ); } export default Example; ``` diff --git a/static/usage/v7/progress-bar/buffer/vue.md b/static/usage/v7/progress-bar/buffer/vue.md index c70c23eb470..3edc59bdf6f 100644 --- a/static/usage/v7/progress-bar/buffer/vue.md +++ b/static/usage/v7/progress-bar/buffer/vue.md @@ -15,7 +15,7 @@ return { buffer, - progress, + progress }; }, mounted() { @@ -32,7 +32,7 @@ }, 1000); } }, 1000); - }, + } }); ``` diff --git a/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md index 971d3d92ed0..d8f8b690fc9 100644 --- a/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md +++ b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.css'], + styleUrls: ['example.component.css'] }) export class ExampleComponent { public progress = 0; diff --git a/static/usage/v7/progress-bar/determinate/index.md b/static/usage/v7/progress-bar/determinate/index.md index 4fea0db6823..790b44766a8 100644 --- a/static/usage/v7/progress-bar/determinate/index.md +++ b/static/usage/v7/progress-bar/determinate/index.md @@ -9,8 +9,8 @@ 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/v7/progress-bar/determinate/react.md b/static/usage/v7/progress-bar/determinate/react.md index 474d4dd878e..9622be87f95 100644 --- a/static/usage/v7/progress-bar/determinate/react.md +++ b/static/usage/v7/progress-bar/determinate/react.md @@ -19,7 +19,9 @@ function Example() { }, 1000); } - return ; + return ( + + ); } export default Example; ``` diff --git a/static/usage/v7/progress-bar/determinate/vue.md b/static/usage/v7/progress-bar/determinate/vue.md index 5eb4cd2b847..c22b3ead5d3 100644 --- a/static/usage/v7/progress-bar/determinate/vue.md +++ b/static/usage/v7/progress-bar/determinate/vue.md @@ -13,7 +13,7 @@ let progress = ref(0); return { - progress, + progress }; }, mounted() { @@ -28,7 +28,7 @@ }, 1000); } }, 50); - }, + } }); ``` diff --git a/static/usage/v7/progress-bar/indeterminate/index.md b/static/usage/v7/progress-bar/indeterminate/index.md index 4b98d2096cd..db428ba5871 100644 --- a/static/usage/v7/progress-bar/indeterminate/index.md +++ b/static/usage/v7/progress-bar/indeterminate/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/progress-bar/indeterminate/react.md b/static/usage/v7/progress-bar/indeterminate/react.md index b856e1f29f2..45e74e79ce7 100644 --- a/static/usage/v7/progress-bar/indeterminate/react.md +++ b/static/usage/v7/progress-bar/indeterminate/react.md @@ -3,7 +3,9 @@ import React from 'react'; import { IonProgressBar } from '@ionic/react'; function Example() { - return ; + return ( + + ); } export default Example; ``` diff --git a/static/usage/v7/progress-bar/theming/colors/index.md b/static/usage/v7/progress-bar/theming/colors/index.md index 21c488b4cc4..7e6638a7e74 100644 --- a/static/usage/v7/progress-bar/theming/colors/index.md +++ b/static/usage/v7/progress-bar/theming/colors/index.md @@ -6,7 +6,7 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md index a374b2ee72c..d2c997037ad 100644 --- a/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md @@ -1,3 +1,4 @@ ```html - + + ``` diff --git a/static/usage/v7/progress-bar/theming/css-properties/index.md b/static/usage/v7/progress-bar/theming/css-properties/index.md index a50ad650aa6..5d6c694d104 100644 --- a/static/usage/v7/progress-bar/theming/css-properties/index.md +++ b/static/usage/v7/progress-bar/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/progress-bar/theming/css-properties/react/main_tsx.md b/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md index 3e05757d942..a4c5e382892 100644 --- a/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md @@ -1,3 +1,4 @@ + ```tsx import React from 'react'; import { IonProgressBar } from '@ionic/react'; @@ -7,7 +8,7 @@ import './main.css'; function Example() { return ( <> - + ); diff --git a/static/usage/v7/progress-bar/theming/css-properties/vue.md b/static/usage/v7/progress-bar/theming/css-properties/vue.md index f63aec9e644..bfff4db7a1b 100644 --- a/static/usage/v7/progress-bar/theming/css-properties/vue.md +++ b/static/usage/v7/progress-bar/theming/css-properties/vue.md @@ -9,7 +9,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonProgressBar }, + components: { IonProgressBar } }); diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md index a374b2ee72c..d2c997037ad 100644 --- a/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md +++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md @@ -1,3 +1,4 @@ ```html - + + ``` diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md index 7fe93d4ef05..e289ac2035c 100644 --- a/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md +++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/index.md @@ -11,8 +11,8 @@ 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/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md index 3e05757d942..a4c5e382892 100644 --- a/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md +++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md @@ -1,3 +1,4 @@ + ```tsx import React from 'react'; import { IonProgressBar } from '@ionic/react'; @@ -7,7 +8,7 @@ import './main.css'; function Example() { return ( <> - + ); diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md index 5750323198e..a9ca62b2c4f 100644 --- a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md +++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md @@ -9,7 +9,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonProgressBar }, + components: { IonProgressBar } }); diff --git a/static/usage/v7/radio/basic/angular.md b/static/usage/v7/radio/basic/angular.md index a8caa3c1973..47f36bcad0e 100644 --- a/static/usage/v7/radio/basic/angular.md +++ b/static/usage/v7/radio/basic/angular.md @@ -1,6 +1,6 @@ ```html - Grapes
+ Grapes
Strawberries
Pineapple
Cherries diff --git a/static/usage/v7/radio/basic/javascript.md b/static/usage/v7/radio/basic/javascript.md index a8caa3c1973..47f36bcad0e 100644 --- a/static/usage/v7/radio/basic/javascript.md +++ b/static/usage/v7/radio/basic/javascript.md @@ -1,6 +1,6 @@ ```html - Grapes
+ Grapes
Strawberries
Pineapple
Cherries diff --git a/static/usage/v7/radio/basic/react.md b/static/usage/v7/radio/basic/react.md index 7f8cf4e07f4..f826499e307 100644 --- a/static/usage/v7/radio/basic/react.md +++ b/static/usage/v7/radio/basic/react.md @@ -5,12 +5,9 @@ import { IonRadio, IonRadioGroup } from '@ionic/react'; function Example() { return ( - Grapes -
- Strawberries -
- Pineapple -
+ Grapes
+ Strawberries
+ Pineapple
Cherries ); diff --git a/static/usage/v7/radio/basic/vue.md b/static/usage/v7/radio/basic/vue.md index 2d552901212..cf4878155af 100644 --- a/static/usage/v7/radio/basic/vue.md +++ b/static/usage/v7/radio/basic/vue.md @@ -1,7 +1,7 @@ ```html @@ -50,7 +50,7 @@ IonSkeletonText, IonThumbnail, } from '@ionic/vue'; - import { musicalNotes } from 'ionicons/icons'; + import { musicalNotes } from 'ionicons/icons' import { defineComponent, ref } from 'vue'; export default defineComponent({ @@ -66,13 +66,13 @@ }, setup() { const loaded = ref(false); - const setLoaded = (state: boolean) => (loaded.value = state); + const setLoaded = (state: boolean) => loaded.value = state; return { loaded, musicalNotes, - setLoaded, - }; - }, + setLoaded + } + } }); ``` diff --git a/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md index c59d8603262..67761872c60 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md @@ -4,4 +4,4 @@ ion-skeleton-text { --background: rgba(188, 0, 255, 0.065); --background-rgb: 188, 0, 255; } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/skeleton-text/theming/css-properties/index.md b/static/usage/v7/skeleton-text/theming/css-properties/index.md index 72e4c186acc..c131f6dbe19 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/index.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/skeleton-text/theming/css-properties/javascript.md b/static/usage/v7/skeleton-text/theming/css-properties/javascript.md index 90d27d3f31e..20463c6aba6 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/javascript.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/javascript.md @@ -26,6 +26,6 @@

- + ``` diff --git a/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md index c59d8603262..67761872c60 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md @@ -4,4 +4,4 @@ ion-skeleton-text { --background: rgba(188, 0, 255, 0.065); --background-rgb: 188, 0, 255; } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md index d66ea73ff7f..29e6e159f68 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md @@ -1,6 +1,13 @@ ```tsx import React from 'react'; -import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/react'; +import { + IonItem, + IonLabel, + IonList, + IonListHeader, + IonSkeletonText, + IonThumbnail, +} from '@ionic/react'; import './main.css'; @@ -8,7 +15,7 @@ function Example() { return ( - + @@ -16,13 +23,13 @@ function Example() {

- +

- +

- +

@@ -30,4 +37,4 @@ function Example() { ); } export default Example; -``` +``` \ No newline at end of file diff --git a/static/usage/v7/skeleton-text/theming/css-properties/vue.md b/static/usage/v7/skeleton-text/theming/css-properties/vue.md index 2785a0e8b51..418a7ca610f 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/vue.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/vue.md @@ -1,5 +1,5 @@ ```html - @@ -26,7 +30,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, + components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, }); ``` diff --git a/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md index 029f5d3ee56..4772826c933 100644 --- a/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md @@ -6,7 +6,9 @@ Menu - Menu Content is 350px wide and has a blue dashed border + + Menu Content is 350px wide and has a blue dashed border +
@@ -15,7 +17,9 @@ Main View - Main View Content + + Main View Content +
``` diff --git a/static/usage/v7/split-pane/theming/css-properties/index.md b/static/usage/v7/split-pane/theming/css-properties/index.md index 09d6c8d4ec3..336074baaaf 100644 --- a/static/usage/v7/split-pane/theming/css-properties/index.md +++ b/static/usage/v7/split-pane/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/split-pane/theming/css-properties/javascript.md b/static/usage/v7/split-pane/theming/css-properties/javascript.md index 37bd7b9e7f1..943993aa380 100644 --- a/static/usage/v7/split-pane/theming/css-properties/javascript.md +++ b/static/usage/v7/split-pane/theming/css-properties/javascript.md @@ -6,7 +6,9 @@ Menu - Menu Content is 350px wide and has a blue dashed border + + Menu Content is 350px wide and has a blue dashed border +
@@ -15,7 +17,9 @@ Main View - Main View Content + + Main View Content +
@@ -23,7 +27,7 @@ ion-split-pane { --side-width: 350px; --side-max-width: 350px; - + --border: 1px dashed #b3baff; } diff --git a/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md index 1d4ad6a2e19..7456a34359d 100644 --- a/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md @@ -13,16 +13,20 @@ function Example() { Menu - Menu Content is 350px wide and has a blue dashed border + + Menu Content is 350px wide and has a blue dashed border + - +
Main View - Main View Content + + Main View Content +
); diff --git a/static/usage/v7/split-pane/theming/css-properties/vue.md b/static/usage/v7/split-pane/theming/css-properties/vue.md index f0abcf95800..cc891eaeda1 100644 --- a/static/usage/v7/split-pane/theming/css-properties/vue.md +++ b/static/usage/v7/split-pane/theming/css-properties/vue.md @@ -7,16 +7,20 @@ Menu - Menu Content is 350px wide and has a blue dashed border + + Menu Content is 350px wide and has a blue dashed border + - +
Main View - Main View Content + + Main View Content +
@@ -26,7 +30,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, + components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, }); @@ -34,7 +38,7 @@ ion-split-pane { --side-width: 350px; --side-max-width: 350px; - + --border: 1px dashed #b3baff; } diff --git a/static/usage/v7/tabs/router/index.md b/static/usage/v7/tabs/router/index.md index ef0265caa09..c7e59ac79bc 100644 --- a/static/usage/v7/tabs/router/index.md +++ b/static/usage/v7/tabs/router/index.md @@ -42,8 +42,8 @@ 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/v7/text/basic/angular.md b/static/usage/v7/text/basic/angular.md index e63da3cacf9..fb2f6064fba 100644 --- a/static/usage/v7/text/basic/angular.md +++ b/static/usage/v7/text/basic/angular.md @@ -13,9 +13,9 @@

- 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. + 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/v7/text/basic/javascript.md b/static/usage/v7/text/basic/javascript.md index e63da3cacf9..fb2f6064fba 100644 --- a/static/usage/v7/text/basic/javascript.md +++ b/static/usage/v7/text/basic/javascript.md @@ -13,9 +13,9 @@

- 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. + 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/v7/text/basic/react.md b/static/usage/v7/text/basic/react.md index da8882e3bf5..dac54e84471 100644 --- a/static/usage/v7/text/basic/react.md +++ b/static/usage/v7/text/basic/react.md @@ -19,14 +19,11 @@ function Example() {

- - - - 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. + + 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/v7/text/basic/vue.md b/static/usage/v7/text/basic/vue.md index b34cd3d437a..742167bf9f1 100644 --- a/static/usage/v7/text/basic/vue.md +++ b/static/usage/v7/text/basic/vue.md @@ -14,10 +14,10 @@

- 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. + 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/v7/textarea/autogrow/angular.md b/static/usage/v7/textarea/autogrow/angular.md index 03de94359b6..5ff7394eec0 100644 --- a/static/usage/v7/textarea/autogrow/angular.md +++ b/static/usage/v7/textarea/autogrow/angular.md @@ -1,10 +1,7 @@ ```html - + ``` diff --git a/static/usage/v7/textarea/autogrow/index.md b/static/usage/v7/textarea/autogrow/index.md index f230d844d08..9dd79cbd7cd 100644 --- a/static/usage/v7/textarea/autogrow/index.md +++ b/static/usage/v7/textarea/autogrow/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/textarea/autogrow/javascript.md b/static/usage/v7/textarea/autogrow/javascript.md index 4c2e15028fd..bea62987f5e 100644 --- a/static/usage/v7/textarea/autogrow/javascript.md +++ b/static/usage/v7/textarea/autogrow/javascript.md @@ -1,10 +1,7 @@ ```html - + ``` diff --git a/static/usage/v7/textarea/autogrow/vue.md b/static/usage/v7/textarea/autogrow/vue.md index 693814464e8..824ada24909 100644 --- a/static/usage/v7/textarea/autogrow/vue.md +++ b/static/usage/v7/textarea/autogrow/vue.md @@ -1,11 +1,8 @@ ```html diff --git a/static/usage/v7/textarea/basic/index.md b/static/usage/v7/textarea/basic/index.md index d0f7ce4c5e6..3070fbea859 100644 --- a/static/usage/v7/textarea/basic/index.md +++ b/static/usage/v7/textarea/basic/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/textarea/clear-on-edit/index.md b/static/usage/v7/textarea/clear-on-edit/index.md index 471b4f4317a..cc1e09366e2 100644 --- a/static/usage/v7/textarea/clear-on-edit/index.md +++ b/static/usage/v7/textarea/clear-on-edit/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/textarea/counter/index.md b/static/usage/v7/textarea/counter/index.md index a9112d0ec23..811a12a70ca 100644 --- a/static/usage/v7/textarea/counter/index.md +++ b/static/usage/v7/textarea/counter/index.md @@ -8,8 +8,8 @@ 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/v7/textarea/fill/index.md b/static/usage/v7/textarea/fill/index.md index 7410c9669d8..bfc5b54da5d 100644 --- a/static/usage/v7/textarea/fill/index.md +++ b/static/usage/v7/textarea/fill/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/textarea/helper-error/index.md b/static/usage/v7/textarea/helper-error/index.md index c53d895546c..5d4ca92e487 100644 --- a/static/usage/v7/textarea/helper-error/index.md +++ b/static/usage/v7/textarea/helper-error/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/textarea/label-placement/index.md b/static/usage/v7/textarea/label-placement/index.md index 05f8b50fa59..8ced2454c74 100644 --- a/static/usage/v7/textarea/label-placement/index.md +++ b/static/usage/v7/textarea/label-placement/index.md @@ -6,8 +6,8 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/textarea/migration/index.md b/static/usage/v7/textarea/migration/index.md index aa820c53b48..6413224a286 100644 --- a/static/usage/v7/textarea/migration/index.md +++ b/static/usage/v7/textarea/migration/index.md @@ -55,8 +55,8 @@ import TabItem from '@theme/TabItem'; @@ -113,8 +113,8 @@ import TabItem from '@theme/TabItem'; @@ -170,9 +170,9 @@ import TabItem from '@theme/TabItem'; {/* After */} -{/* - Metadata such as counters and helper text should not - be used when a textarea is in an item/list. If you need to +{/* + 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. */} @@ -229,8 +229,8 @@ import TabItem from '@theme/TabItem'; diff --git a/static/usage/v7/textarea/theming/index.md b/static/usage/v7/textarea/theming/index.md index 129b9dbb7d0..9042fb29fa4 100644 --- a/static/usage/v7/textarea/theming/index.md +++ b/static/usage/v7/textarea/theming/index.md @@ -11,9 +11,9 @@ 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/v7/textarea/theming/javascript.md b/static/usage/v7/textarea/theming/javascript.md index c654ae883a9..ae34bb17a0f 100644 --- a/static/usage/v7/textarea/theming/javascript.md +++ b/static/usage/v7/textarea/theming/javascript.md @@ -17,7 +17,7 @@ --placeholder-color: #ddd; --placeholder-opacity: 0.8; } - + ion-textarea.custom .helper-text, ion-textarea.custom .counter { color: #373737; diff --git a/static/usage/v7/textarea/theming/vue.md b/static/usage/v7/textarea/theming/vue.md index c7cef62ba4a..be3ad556a62 100644 --- a/static/usage/v7/textarea/theming/vue.md +++ b/static/usage/v7/textarea/theming/vue.md @@ -8,7 +8,7 @@ --placeholder-color: #ddd; --placeholder-opacity: 0.8; } - + ion-textarea.custom .helper-text, ion-textarea.custom .counter { color: #373737; diff --git a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md index 74742dfe9f0..605855deb77 100644 --- a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md @@ -1,3 +1,4 @@ + ```css ion-thumbnail { --size: 140px; diff --git a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md index 119cfb8ee9c..8ef97cae761 100644 --- a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md @@ -1,3 +1,4 @@ + ```html Silhouette of mountains diff --git a/static/usage/v7/thumbnail/theming/css-properties/index.md b/static/usage/v7/thumbnail/theming/css-properties/index.md index 72b29ee4b5c..36674cc72c0 100644 --- a/static/usage/v7/thumbnail/theming/css-properties/index.md +++ b/static/usage/v7/thumbnail/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md index 1d0f352383f..37f4796d763 100644 --- a/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md @@ -1,3 +1,4 @@ + ```tsx import React from 'react'; import { IonThumbnail } from '@ionic/react'; diff --git a/static/usage/v7/title/basic/index.md b/static/usage/v7/title/basic/index.md index 4932392602d..2ff7e96f44a 100644 --- a/static/usage/v7/title/basic/index.md +++ b/static/usage/v7/title/basic/index.md @@ -6,9 +6,9 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/title/collapsible-large-title/basic/index.md b/static/usage/v7/title/collapsible-large-title/basic/index.md index 74250a387b6..8cb9a0cd0a0 100644 --- a/static/usage/v7/title/collapsible-large-title/basic/index.md +++ b/static/usage/v7/title/collapsible-large-title/basic/index.md @@ -6,11 +6,11 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/title/collapsible-large-title/buttons/index.md b/static/usage/v7/title/collapsible-large-title/buttons/index.md index d89e29b9900..b11f1bbe655 100644 --- a/static/usage/v7/title/collapsible-large-title/buttons/index.md +++ b/static/usage/v7/title/collapsible-large-title/buttons/index.md @@ -6,10 +6,10 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/title/theming/css-properties/index.md b/static/usage/v7/title/theming/css-properties/index.md index e6adf5f71a5..aed27e79157 100644 --- a/static/usage/v7/title/theming/css-properties/index.md +++ b/static/usage/v7/title/theming/css-properties/index.md @@ -11,8 +11,8 @@ 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/v7/toast/buttons/angular/example_component_html.md b/static/usage/v7/toast/buttons/angular/example_component_html.md index 36717f5eb9a..3245d44e8a4 100644 --- a/static/usage/v7/toast/buttons/angular/example_component_html.md +++ b/static/usage/v7/toast/buttons/angular/example_component_html.md @@ -2,11 +2,11 @@ Open Toast

{{ handlerMessage }}

{{ roleMessage }}

-``` +``` \ No newline at end of file diff --git a/static/usage/v7/toast/buttons/angular/example_component_ts.md b/static/usage/v7/toast/buttons/angular/example_component_ts.md index dd34310e22d..9adc2711591 100644 --- a/static/usage/v7/toast/buttons/angular/example_component_ts.md +++ b/static/usage/v7/toast/buttons/angular/example_component_ts.md @@ -10,24 +10,20 @@ export class ExampleComponent { { text: 'More Info', role: 'info', - handler: () => { - this.handlerMessage = 'More Info clicked'; - }, + handler: () => { this.handlerMessage = 'More Info clicked'; } }, { text: 'Dismiss', role: 'cancel', - handler: () => { - this.handlerMessage = 'Dismiss clicked'; - }, - }, + handler: () => { this.handlerMessage = 'Dismiss clicked'; } + } ]; handlerMessage = ''; roleMessage = ''; setRoleMessage(ev) { - const { role } = ev.detail; + const { role } = ev.detail this.roleMessage = `Dismissed with role: ${role}`; } } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/toast/buttons/index.md b/static/usage/v7/toast/buttons/index.md index a911ef84feb..75d2d2c2a2e 100644 --- a/static/usage/v7/toast/buttons/index.md +++ b/static/usage/v7/toast/buttons/index.md @@ -8,9 +8,9 @@ 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/v7/toast/buttons/javascript.md b/static/usage/v7/toast/buttons/javascript.md index f8dfa701d1d..86cf3cb0b68 100644 --- a/static/usage/v7/toast/buttons/javascript.md +++ b/static/usage/v7/toast/buttons/javascript.md @@ -8,24 +8,20 @@ const toast = document.querySelector('ion-toast'); const handlerOutput = document.querySelector('#handlerResult'); const roleOutput = document.querySelector('#roleResult'); - + toast.buttons = [ { text: 'More Info', role: 'info', - handler: () => { - handlerOutput.innerText = 'More Info clicked'; - }, + handler: () => { handlerOutput.innerText = 'More Info clicked'; } }, { text: 'Dismiss', role: 'cancel', - handler: () => { - handlerOutput.innerText = 'Dismiss clicked'; - }, - }, + handler: () => { handlerOutput.innerText = 'Dismiss clicked'; } + } ]; - + toast.addEventListener('ionToastDidDismiss', (ev) => { const { role } = ev.detail; roleOutput.innerText = `Dismissed with role: ${role}`; diff --git a/static/usage/v7/toast/buttons/react.md b/static/usage/v7/toast/buttons/react.md index ac815c8c693..fc8b603fa20 100644 --- a/static/usage/v7/toast/buttons/react.md +++ b/static/usage/v7/toast/buttons/react.md @@ -17,17 +17,13 @@ function Example() { { text: 'More Info', role: 'info', - handler: () => { - setHandlerMessage('More Info clicked'); - }, + handler: () => { setHandlerMessage('More Info clicked'); } }, { text: 'Dismiss', role: 'cancel', - handler: () => { - setHandlerMessage('Dismiss clicked'); - }, - }, + handler: () => { setHandlerMessage('Dismiss clicked'); } + } ]} onDidDismiss={(e: CustomEvent) => setRoleMessage(`Dismissed with role: ${e.detail.role}`)} > diff --git a/static/usage/v7/toast/buttons/vue.md b/static/usage/v7/toast/buttons/vue.md index 3f0c0e87848..3ae653988f6 100644 --- a/static/usage/v7/toast/buttons/vue.md +++ b/static/usage/v7/toast/buttons/vue.md @@ -3,8 +3,8 @@ Open Toast @@ -25,31 +25,27 @@ { text: 'More Info', role: 'info', - handler: () => { - handlerMessage.value = 'More Info clicked'; - }, + handler: () => { handlerMessage.value = 'More Info clicked'; } }, { text: 'Dismiss', role: 'cancel', - handler: () => { - handlerMessage.value = 'Dismiss clicked'; - }, - }, - ]; + handler: () => { handlerMessage.value = 'Dismiss clicked'; } + } + ] const setRoleMessage = (ev: CustomEvent) => { - const { role } = ev.detail; - console.log('hi there'); + const { role } = ev.detail + console.log('hi there') roleMessage.value = `Dismissed with role: ${role}`; - }; - + } + return { handlerMessage, roleMessage, toastButtons, - setRoleMessage, - }; - }, + setRoleMessage + } + } }); ``` diff --git a/static/usage/v7/toast/icon/angular.md b/static/usage/v7/toast/icon/angular.md index 819a72c342f..2dc76a51fa6 100644 --- a/static/usage/v7/toast/icon/angular.md +++ b/static/usage/v7/toast/icon/angular.md @@ -1,4 +1,4 @@ ```html Open Toast -``` +``` \ No newline at end of file diff --git a/static/usage/v7/toast/icon/index.md b/static/usage/v7/toast/icon/index.md index 63cdd6ddaad..1418e06b870 100644 --- a/static/usage/v7/toast/icon/index.md +++ b/static/usage/v7/toast/icon/index.md @@ -6,13 +6,13 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/toast/icon/vue.md b/static/usage/v7/toast/icon/vue.md index 223e37b3222..634f18e7ff5 100644 --- a/static/usage/v7/toast/icon/vue.md +++ b/static/usage/v7/toast/icon/vue.md @@ -7,14 +7,14 @@ ``` diff --git a/static/usage/v7/toast/inline/basic/index.md b/static/usage/v7/toast/inline/basic/index.md index f26ade253e0..ad7f55c6e1e 100644 --- a/static/usage/v7/toast/inline/basic/index.md +++ b/static/usage/v7/toast/inline/basic/index.md @@ -6,14 +6,14 @@ import vue from './vue.md'; import angular from './angular.md'; diff --git a/static/usage/v7/toast/inline/basic/react.md b/static/usage/v7/toast/inline/basic/react.md index 0def9d5e178..898603a0516 100644 --- a/static/usage/v7/toast/inline/basic/react.md +++ b/static/usage/v7/toast/inline/basic/react.md @@ -1,6 +1,14 @@ ```tsx import React from 'react'; -import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonToast } from '@ionic/react'; +import { + IonButton, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonToast, +} from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v7/toast/inline/basic/vue.md b/static/usage/v7/toast/inline/basic/vue.md index 1b81018bcdb..48c07b16d95 100644 --- a/static/usage/v7/toast/inline/basic/vue.md +++ b/static/usage/v7/toast/inline/basic/vue.md @@ -13,7 +13,14 @@ ``` diff --git a/static/usage/v7/toast/layout/angular/example_component_html.md b/static/usage/v7/toast/layout/angular/example_component_html.md index 2efa0572c4b..6f33423b8a5 100644 --- a/static/usage/v7/toast/layout/angular/example_component_html.md +++ b/static/usage/v7/toast/layout/angular/example_component_html.md @@ -1,17 +1,17 @@ ```html Open Baseline Layout Toast Open Stacked Layout Toast - -``` +``` \ No newline at end of file diff --git a/static/usage/v7/toast/layout/angular/example_component_ts.md b/static/usage/v7/toast/layout/angular/example_component_ts.md index 89c39c33323..4070a210849 100644 --- a/static/usage/v7/toast/layout/angular/example_component_ts.md +++ b/static/usage/v7/toast/layout/angular/example_component_ts.md @@ -9,7 +9,7 @@ export class ExampleComponent { toastButtons = [ { text: 'Action With Long Text', - }, + } ]; } -``` +``` \ No newline at end of file diff --git a/static/usage/v7/toast/layout/index.md b/static/usage/v7/toast/layout/index.md index b3fcc7be97c..26d799850e4 100644 --- a/static/usage/v7/toast/layout/index.md +++ b/static/usage/v7/toast/layout/index.md @@ -8,9 +8,9 @@ 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/v7/toast/layout/javascript.md b/static/usage/v7/toast/layout/javascript.md index 6ae1998b02d..1ac30c76931 100644 --- a/static/usage/v7/toast/layout/javascript.md +++ b/static/usage/v7/toast/layout/javascript.md @@ -1,21 +1,12 @@ ```html Open Baseline Layout Toast Open Stacked Layout Toast - - + + ``` diff --git a/static/usage/v6/accordion/customization/theming/react/main_css.md b/static/usage/v6/accordion/customization/theming/react/main_css.md index 6054219017a..141236c6633 100644 --- a/static/usage/v6/accordion/customization/theming/react/main_css.md +++ b/static/usage/v6/accordion/customization/theming/react/main_css.md @@ -1,9 +1,9 @@ ```css :root { --ion-color-rose: #fecdd3; - --ion-color-rose-rgb: 254,205,211; + --ion-color-rose-rgb: 254, 205, 211; --ion-color-rose-contrast: #000000; - --ion-color-rose-contrast-rgb: 0,0,0; + --ion-color-rose-contrast-rgb: 0, 0, 0; --ion-color-rose-shade: #e0b4ba; --ion-color-rose-tint: #fed2d7; } @@ -17,7 +17,7 @@ --ion-color-tint: var(--ion-color-rose-tint); } -div[slot="content"] { - background: rgba(var(--ion-color-rose-rgb), 0.25) +div[slot='content'] { + background: rgba(var(--ion-color-rose-rgb), 0.25); } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/accordion/customization/theming/react/main_tsx.md b/static/usage/v6/accordion/customization/theming/react/main_tsx.md index 348576ae0fe..ecc51a9e15b 100644 --- a/static/usage/v6/accordion/customization/theming/react/main_tsx.md +++ b/static/usage/v6/accordion/customization/theming/react/main_tsx.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; import './main.css'; diff --git a/static/usage/v6/accordion/customization/theming/vue.md b/static/usage/v6/accordion/customization/theming/vue.md index cf55542e739..c049c4b89d8 100644 --- a/static/usage/v6/accordion/customization/theming/vue.md +++ b/static/usage/v6/accordion/customization/theming/vue.md @@ -5,62 +5,51 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/readonly/group/angular.md b/static/usage/v6/accordion/readonly/group/angular.md index 99c084f8064..4ebf8c55e4e 100644 --- a/static/usage/v6/accordion/readonly/group/angular.md +++ b/static/usage/v6/accordion/readonly/group/angular.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/readonly/group/javascript.md b/static/usage/v6/accordion/readonly/group/javascript.md index 27f216fb4f9..d511ea5ff0b 100644 --- a/static/usage/v6/accordion/readonly/group/javascript.md +++ b/static/usage/v6/accordion/readonly/group/javascript.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/readonly/group/react.md b/static/usage/v6/accordion/readonly/group/react.md index 5383b732d96..2f26afde9ea 100644 --- a/static/usage/v6/accordion/readonly/group/react.md +++ b/static/usage/v6/accordion/readonly/group/react.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v6/accordion/readonly/group/vue.md b/static/usage/v6/accordion/readonly/group/vue.md index aa6a662a802..0de1be3fe91 100644 --- a/static/usage/v6/accordion/readonly/group/vue.md +++ b/static/usage/v6/accordion/readonly/group/vue.md @@ -5,44 +5,33 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 diff --git a/static/usage/v6/accordion/readonly/individual/angular.md b/static/usage/v6/accordion/readonly/individual/angular.md index 7f9f8f5bb2e..94013b9d07d 100644 --- a/static/usage/v6/accordion/readonly/individual/angular.md +++ b/static/usage/v6/accordion/readonly/individual/angular.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion (Readonly) -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/readonly/individual/javascript.md b/static/usage/v6/accordion/readonly/individual/javascript.md index eec083da61a..e1f78d726db 100644 --- a/static/usage/v6/accordion/readonly/individual/javascript.md +++ b/static/usage/v6/accordion/readonly/individual/javascript.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion (Readonly) -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v6/accordion/readonly/individual/react.md b/static/usage/v6/accordion/readonly/individual/react.md index 7e94d274b32..a6d28a427cd 100644 --- a/static/usage/v6/accordion/readonly/individual/react.md +++ b/static/usage/v6/accordion/readonly/individual/react.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v6/accordion/readonly/individual/vue.md b/static/usage/v6/accordion/readonly/individual/vue.md index 2e02ebd3679..b9a5daac451 100644 --- a/static/usage/v6/accordion/readonly/individual/vue.md +++ b/static/usage/v6/accordion/readonly/individual/vue.md @@ -5,44 +5,33 @@ First Accordion -
- First Content -
+
First Content
Second Accordion (Readonly) -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 diff --git a/static/usage/v6/alert/buttons/angular/example_component_html.md b/static/usage/v6/alert/buttons/angular/example_component_html.md index 5cddcd596ed..172b041a469 100644 --- a/static/usage/v6/alert/buttons/angular/example_component_html.md +++ b/static/usage/v6/alert/buttons/angular/example_component_html.md @@ -2,4 +2,4 @@ Click Me

{{ handlerMessage }}

{{ roleMessage }}

-``` \ No newline at end of file +``` diff --git a/static/usage/v6/alert/buttons/javascript.md b/static/usage/v6/alert/buttons/javascript.md index 9550a72ca43..1de6de7fca4 100644 --- a/static/usage/v6/alert/buttons/javascript.md +++ b/static/usage/v6/alert/buttons/javascript.md @@ -14,13 +14,17 @@ { text: 'Cancel', role: 'cancel', - handler: () => { handlerOutput.innerText = 'Alert canceled'; } + handler: () => { + handlerOutput.innerText = 'Alert canceled'; + }, }, { text: 'OK', role: 'confirm', - handler: () => { handlerOutput.innerText = 'Alert confirmed'; } - } + handler: () => { + handlerOutput.innerText = 'Alert confirmed'; + }, + }, ]; document.body.appendChild(alert); diff --git a/static/usage/v6/alert/customization/angular/global_css.md b/static/usage/v6/alert/customization/angular/global_css.md index c4d1f859c34..c84c1456e58 100644 --- a/static/usage/v6/alert/customization/angular/global_css.md +++ b/static/usage/v6/alert/customization/angular/global_css.md @@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm { } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); } .ios button.alert-button.alert-button-cancel { @@ -30,4 +30,4 @@ button.alert-button.alert-button-confirm { border-bottom-right-radius: 13px; border-top-right-radius: 13px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/alert/customization/javascript.md b/static/usage/v6/alert/customization/javascript.md index f6280b08e3d..f14e68e1d95 100644 --- a/static/usage/v6/alert/customization/javascript.md +++ b/static/usage/v6/alert/customization/javascript.md @@ -9,12 +9,12 @@ alert.buttons = [ { text: 'No', - cssClass: 'alert-button-cancel' + cssClass: 'alert-button-cancel', }, { text: 'Yes', - cssClass: 'alert-button-confirm' - } + cssClass: 'alert-button-confirm', + }, ]; document.body.appendChild(alert); @@ -41,7 +41,7 @@ } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); } .ios button.alert-button.alert-button-cancel { diff --git a/static/usage/v6/alert/customization/react/main_css.md b/static/usage/v6/alert/customization/react/main_css.md index c4d1f859c34..c84c1456e58 100644 --- a/static/usage/v6/alert/customization/react/main_css.md +++ b/static/usage/v6/alert/customization/react/main_css.md @@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm { } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); } .ios button.alert-button.alert-button-cancel { @@ -30,4 +30,4 @@ button.alert-button.alert-button-confirm { border-bottom-right-radius: 13px; border-top-right-radius: 13px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/alert/inputs/radios/angular/example_component_html.md b/static/usage/v6/alert/inputs/radios/angular/example_component_html.md index e484d6c912d..183dd98719d 100644 --- a/static/usage/v6/alert/inputs/radios/angular/example_component_html.md +++ b/static/usage/v6/alert/inputs/radios/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` \ No newline at end of file +``` diff --git a/static/usage/v6/alert/inputs/radios/javascript.md b/static/usage/v6/alert/inputs/radios/javascript.md index 341bdf8b1eb..2992e1d25c4 100644 --- a/static/usage/v6/alert/inputs/radios/javascript.md +++ b/static/usage/v6/alert/inputs/radios/javascript.md @@ -10,18 +10,18 @@ { label: 'Red', type: 'radio', - value: 'red' + value: 'red', }, { label: 'Blue', type: 'radio', - value: 'blue' + value: 'blue', }, { label: 'Green', type: 'radio', - value: 'green' - } + value: 'green', + }, ]; document.body.appendChild(alert); diff --git a/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md index e484d6c912d..183dd98719d 100644 --- a/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md +++ b/static/usage/v6/alert/inputs/text-inputs/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` \ No newline at end of file +``` diff --git a/static/usage/v6/alert/inputs/text-inputs/javascript.md b/static/usage/v6/alert/inputs/text-inputs/javascript.md index 84f96bf5f8d..21d36197c4a 100644 --- a/static/usage/v6/alert/inputs/text-inputs/javascript.md +++ b/static/usage/v6/alert/inputs/text-inputs/javascript.md @@ -8,24 +8,24 @@ alert.buttons = ['OK']; alert.inputs = [ { - placeholder: 'Name' + placeholder: 'Name', }, { placeholder: 'Nickname (max 8 characters)', attributes: { - maxlength: 8 - } + maxlength: 8, + }, }, { type: 'number', placeholder: 'Age', min: 1, - max: 100 + max: 100, }, { type: 'textarea', - placeholder: 'A little about yourself' - } + placeholder: 'A little about yourself', + }, ]; document.body.appendChild(alert); diff --git a/static/usage/v6/alert/presenting/controller/angular/example_component_html.md b/static/usage/v6/alert/presenting/controller/angular/example_component_html.md index e484d6c912d..183dd98719d 100644 --- a/static/usage/v6/alert/presenting/controller/angular/example_component_html.md +++ b/static/usage/v6/alert/presenting/controller/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` \ No newline at end of file +``` diff --git a/static/usage/v6/avatar/chip/vue.md b/static/usage/v6/avatar/chip/vue.md index 8ded7586040..c872bb48de3 100644 --- a/static/usage/v6/avatar/chip/vue.md +++ b/static/usage/v6/avatar/chip/vue.md @@ -13,7 +13,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar, IonChip, IonLabel } + components: { IonAvatar, IonChip, IonLabel }, }); ``` diff --git a/static/usage/v6/avatar/item/vue.md b/static/usage/v6/avatar/item/vue.md index 315af034426..5a9ddea4499 100644 --- a/static/usage/v6/avatar/item/vue.md +++ b/static/usage/v6/avatar/item/vue.md @@ -13,7 +13,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar, IonItem, IonLabel } + components: { IonAvatar, IonItem, IonLabel }, }); ``` diff --git a/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md b/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md index f04d7f8fbe3..180b8998a3f 100644 --- a/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/avatar/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonAvatar } from '@ionic/react'; diff --git a/static/usage/v6/avatar/theming/css-properties/vue.md b/static/usage/v6/avatar/theming/css-properties/vue.md index affb7ccdecb..32237336a1c 100644 --- a/static/usage/v6/avatar/theming/css-properties/vue.md +++ b/static/usage/v6/avatar/theming/css-properties/vue.md @@ -10,7 +10,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar } + components: { IonAvatar }, }); diff --git a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md index 3c39508e72c..b2cda11d2a8 100644 --- a/static/usage/v6/back-button/basic/angular/page_two_component_ts.md +++ b/static/usage/v6/back-button/basic/angular/page_two_component_ts.md @@ -18,7 +18,5 @@ import { Component } from '@angular/core'; `, }) -export class PageTwoComponent { - -} +export class PageTwoComponent {} ``` diff --git a/static/usage/v6/back-button/basic/vue/page_two_vue.md b/static/usage/v6/back-button/basic/vue/page_two_vue.md index 1192ca2936c..e26a6f13562 100644 --- a/static/usage/v6/back-button/basic/vue/page_two_vue.md +++ b/static/usage/v6/back-button/basic/vue/page_two_vue.md @@ -18,7 +18,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue'; export default { - components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } + components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar }, }; ``` diff --git a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md index 31f76ac219a..05a1bd64d79 100644 --- a/static/usage/v6/back-button/custom/angular/page_two_component_ts.md +++ b/static/usage/v6/back-button/custom/angular/page_two_component_ts.md @@ -18,7 +18,5 @@ import { Component } from '@angular/core'; `, }) -export class PageTwoComponent { - -} +export class PageTwoComponent {} ``` diff --git a/static/usage/v6/back-button/custom/vue/page_two_vue.md b/static/usage/v6/back-button/custom/vue/page_two_vue.md index 05de62654cb..4667abeced5 100644 --- a/static/usage/v6/back-button/custom/vue/page_two_vue.md +++ b/static/usage/v6/back-button/custom/vue/page_two_vue.md @@ -21,8 +21,8 @@ export default { components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton }, setup() { - return { caretBack } - } + return { caretBack }; + }, }; ``` diff --git a/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md b/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md index 950e96b4e80..cf47682b14d 100644 --- a/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/badge/theming/css-properties/angular/example_component_css.md @@ -5,4 +5,4 @@ ion-badge { --padding-end: 20px; --padding-start: 20px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/badge/theming/css-properties/react/main_css.md b/static/usage/v6/badge/theming/css-properties/react/main_css.md index 950e96b4e80..cf47682b14d 100644 --- a/static/usage/v6/badge/theming/css-properties/react/main_css.md +++ b/static/usage/v6/badge/theming/css-properties/react/main_css.md @@ -5,4 +5,4 @@ ion-badge { --padding-end: 20px; --padding-start: 20px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md index 76a545d6a8e..926479c1e85 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md @@ -7,4 +7,4 @@ Film 35 mm -``` \ No newline at end of file +``` diff --git a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md index f88b8a6e322..fdd63471ed4 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/expand-on-click/vue.md @@ -18,14 +18,14 @@ components: { IonBreadcrumb, IonBreadcrumbs }, data() { return { - maxBreadcrumbs: 4 - } + maxBreadcrumbs: 4, + }; }, methods: { expandBreadcrumbs() { this.maxBreadcrumbs = undefined; - } - } + }, + }, }); ``` diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md index 2c5ee51a9b7..e3c0462a148 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md @@ -22,4 +22,4 @@ -``` \ No newline at end of file +``` diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md index 007fb9a4a1e..1d22085a5b1 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/javascript.md @@ -18,12 +18,12 @@ const popover = document.querySelector('ion-popover'); const popoverList = document.querySelector('ion-popover ion-list'); - breadcrumbs.addEventListener('ionCollapsedClick', e => { + breadcrumbs.addEventListener('ionCollapsedClick', (e) => { let listHTML = ``; e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => { listHTML += ` ${breadcrumb.textContent} @@ -36,6 +36,6 @@ popover.isOpen = true; }); - popover.addEventListener('didDismiss', () => popover.isOpen = false); + popover.addEventListener('didDismiss', () => (popover.isOpen = false)); ``` diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md index 72cc6520e3c..66ccc22bfe3 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/react.md @@ -27,10 +27,7 @@ function Example() { {collapsedBreadcrumbs.map((breadcrumb, i) => ( - + {breadcrumb.textContent} ))} diff --git a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md index 318f64f8547..54368fa7213 100644 --- a/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md +++ b/static/usage/v6/breadcrumbs/collapsing-items/popover-on-click/vue.md @@ -24,25 +24,25 @@ -``` \ No newline at end of file +``` diff --git a/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md index f836a85455f..f0849705aab 100644 --- a/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md +++ b/static/usage/v6/breadcrumbs/icons/custom-separators/vue.md @@ -29,7 +29,7 @@ components: { IonBreadcrumb, IonBreadcrumbs, IonIcon }, setup() { return { arrowForwardCircle }; - } + }, }); ``` diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md b/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md index 338babc9c79..3dc7c4640ad 100644 --- a/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/breadcrumbs/theming/css-properties/angular/example_component_css.md @@ -4,4 +4,4 @@ ion-breadcrumb { --color-active: rgb(150, 112, 220); --color-hover: rgb(103, 61, 180); } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md b/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md index 338babc9c79..3dc7c4640ad 100644 --- a/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md +++ b/static/usage/v6/breadcrumbs/theming/css-properties/react/main_css.md @@ -4,4 +4,4 @@ ion-breadcrumb { --color-active: rgb(150, 112, 220); --color-hover: rgb(103, 61, 180); } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/button/basic/angular.md b/static/usage/v6/button/basic/angular.md index 44ba5831426..d313d7dcd23 100644 --- a/static/usage/v6/button/basic/angular.md +++ b/static/usage/v6/button/basic/angular.md @@ -1,4 +1,3 @@ ```html -Default -Disabled +Default Disabled ``` diff --git a/static/usage/v6/button/basic/javascript.md b/static/usage/v6/button/basic/javascript.md index 8296ef7f42a..e298f5a1246 100644 --- a/static/usage/v6/button/basic/javascript.md +++ b/static/usage/v6/button/basic/javascript.md @@ -1,4 +1,3 @@ ```html -Default -Disabled +Default Disabled ``` diff --git a/static/usage/v6/button/expand/angular.md b/static/usage/v6/button/expand/angular.md index ca3f5093b84..b49d2c767ae 100644 --- a/static/usage/v6/button/expand/angular.md +++ b/static/usage/v6/button/expand/angular.md @@ -1,4 +1,3 @@ ```html -Block -Full +Block Full ``` diff --git a/static/usage/v6/button/expand/javascript.md b/static/usage/v6/button/expand/javascript.md index ca3f5093b84..b49d2c767ae 100644 --- a/static/usage/v6/button/expand/javascript.md +++ b/static/usage/v6/button/expand/javascript.md @@ -1,4 +1,3 @@ ```html -Block -Full +Block Full ``` diff --git a/static/usage/v6/button/icons/vue.md b/static/usage/v6/button/icons/vue.md index 356fc5617dc..03d8648c878 100644 --- a/static/usage/v6/button/icons/vue.md +++ b/static/usage/v6/button/icons/vue.md @@ -23,8 +23,8 @@ export default defineComponent({ components: { IonButton, IonIcon }, setup() { - return { star } - } + return { star }; + }, }); ``` diff --git a/static/usage/v6/button/shape/angular.md b/static/usage/v6/button/shape/angular.md index 97ed756261a..a37193d9013 100644 --- a/static/usage/v6/button/shape/angular.md +++ b/static/usage/v6/button/shape/angular.md @@ -1,4 +1,3 @@ ```html -Default -Round +Default Round ``` diff --git a/static/usage/v6/button/shape/javascript.md b/static/usage/v6/button/shape/javascript.md index 97ed756261a..a37193d9013 100644 --- a/static/usage/v6/button/shape/javascript.md +++ b/static/usage/v6/button/shape/javascript.md @@ -1,4 +1,3 @@ ```html -Default -Round +Default Round ``` diff --git a/static/usage/v6/button/theming/css-properties/react/main_css.md b/static/usage/v6/button/theming/css-properties/react/main_css.md index 1fba4c49972..fa985cbe82f 100644 --- a/static/usage/v6/button/theming/css-properties/react/main_css.md +++ b/static/usage/v6/button/theming/css-properties/react/main_css.md @@ -1,4 +1,3 @@ - ```css ion-button { --background: #93e9be; diff --git a/static/usage/v6/button/theming/css-properties/react/main_tsx.md b/static/usage/v6/button/theming/css-properties/react/main_tsx.md index 6e0cddd9709..c8c432e1b9c 100644 --- a/static/usage/v6/button/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/button/theming/css-properties/react/main_tsx.md @@ -5,9 +5,7 @@ import { IonButton } from '@ionic/react'; import './main.css'; function Example() { - return ( - Custom Button - ); + return Custom Button; } export default Example; ``` diff --git a/static/usage/v6/buttons/types/angular.md b/static/usage/v6/buttons/types/angular.md index 183c70105b1..9562dbb3b47 100644 --- a/static/usage/v6/buttons/types/angular.md +++ b/static/usage/v6/buttons/types/angular.md @@ -1,15 +1,11 @@ ```html - - Favorite - + Favorite Default Buttons - - Delete - + Delete diff --git a/static/usage/v6/buttons/types/javascript.md b/static/usage/v6/buttons/types/javascript.md index 183c70105b1..9562dbb3b47 100644 --- a/static/usage/v6/buttons/types/javascript.md +++ b/static/usage/v6/buttons/types/javascript.md @@ -1,15 +1,11 @@ ```html - - Favorite - + Favorite Default Buttons - - Delete - + Delete diff --git a/static/usage/v6/buttons/types/react.md b/static/usage/v6/buttons/types/react.md index 8d3b3edfe9e..01baca04d74 100644 --- a/static/usage/v6/buttons/types/react.md +++ b/static/usage/v6/buttons/types/react.md @@ -8,15 +8,11 @@ function Example() { <> - - Favorite - + Favorite Default Buttons - - Delete - + Delete @@ -86,5 +82,4 @@ function Example() { ); } export default Example; - ``` diff --git a/static/usage/v6/buttons/types/vue.md b/static/usage/v6/buttons/types/vue.md index 9a101caa402..60b04a067da 100644 --- a/static/usage/v6/buttons/types/vue.md +++ b/static/usage/v6/buttons/types/vue.md @@ -2,15 +2,11 @@ diff --git a/static/usage/v6/header/fade/angular.md b/static/usage/v6/header/fade/angular.md index 72e55ffc58c..473ad54c8da 100644 --- a/static/usage/v6/header/fade/angular.md +++ b/static/usage/v6/header/fade/angular.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/fade/javascript.md b/static/usage/v6/header/fade/javascript.md index 72e55ffc58c..473ad54c8da 100644 --- a/static/usage/v6/header/fade/javascript.md +++ b/static/usage/v6/header/fade/javascript.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/fade/react.md b/static/usage/v6/header/fade/react.md index 453f32c4db4..085bea0296d 100644 --- a/static/usage/v6/header/fade/react.md +++ b/static/usage/v6/header/fade/react.md @@ -14,24 +14,61 @@ function Example() {

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/fade/vue.md b/static/usage/v6/header/fade/vue.md index 44327bf809c..264038c103c 100644 --- a/static/usage/v6/header/fade/vue.md +++ b/static/usage/v6/header/fade/vue.md @@ -9,24 +9,61 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/translucent/angular.md b/static/usage/v6/header/translucent/angular.md index f2779c7d5c9..657a88bf066 100644 --- a/static/usage/v6/header/translucent/angular.md +++ b/static/usage/v6/header/translucent/angular.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/translucent/javascript.md b/static/usage/v6/header/translucent/javascript.md index e03deeda2a5..5c0048c019c 100644 --- a/static/usage/v6/header/translucent/javascript.md +++ b/static/usage/v6/header/translucent/javascript.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/translucent/react.md b/static/usage/v6/header/translucent/react.md index 862211d839b..def835913c3 100644 --- a/static/usage/v6/header/translucent/react.md +++ b/static/usage/v6/header/translucent/react.md @@ -14,24 +14,61 @@ function Example() {

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/header/translucent/vue.md b/static/usage/v6/header/translucent/vue.md index 34a4c740014..26370009d44 100644 --- a/static/usage/v6/header/translucent/vue.md +++ b/static/usage/v6/header/translucent/vue.md @@ -9,24 +9,61 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v6/icon/basic/index.md b/static/usage/v6/icon/basic/index.md index ccb83aec3df..4dd4e6c27c9 100644 --- a/static/usage/v6/icon/basic/index.md +++ b/static/usage/v6/icon/basic/index.md @@ -5,9 +5,4 @@ import react from './react.md'; import vue from './vue.md'; import angular from './angular.md'; - + diff --git a/static/usage/v6/img/basic/angular.md b/static/usage/v6/img/basic/angular.md index fc408402024..5a42aa9f765 100644 --- a/static/usage/v6/img/basic/angular.md +++ b/static/usage/v6/img/basic/angular.md @@ -1,3 +1,6 @@ ```html - + ``` diff --git a/static/usage/v6/img/basic/javascript.md b/static/usage/v6/img/basic/javascript.md index fc408402024..5a42aa9f765 100644 --- a/static/usage/v6/img/basic/javascript.md +++ b/static/usage/v6/img/basic/javascript.md @@ -1,3 +1,6 @@ ```html - + ``` diff --git a/static/usage/v6/img/basic/react.md b/static/usage/v6/img/basic/react.md index 6637dfacef0..a7e9b7d6646 100644 --- a/static/usage/v6/img/basic/react.md +++ b/static/usage/v6/img/basic/react.md @@ -4,7 +4,10 @@ import { IonImg } from '@ionic/react'; function Example() { return ( - + ); } export default Example; diff --git a/static/usage/v6/img/basic/vue.md b/static/usage/v6/img/basic/vue.md index a92ec67a3a5..2e6bdeb2e1a 100644 --- a/static/usage/v6/img/basic/vue.md +++ b/static/usage/v6/img/basic/vue.md @@ -1,6 +1,9 @@ ```html -``` \ No newline at end of file +``` diff --git a/static/usage/v6/input/filtering/react.md b/static/usage/v6/input/filtering/react.md index ae2df1a1cdd..765d1f24ba6 100644 --- a/static/usage/v6/input/filtering/react.md +++ b/static/usage/v6/input/filtering/react.md @@ -3,36 +3,32 @@ import React, { useState, useRef } from 'react'; import { IonInput, IonItem, IonLabel, IonList } from '@ionic/react'; function Example() { - const [inputModel, setInputModel ] = useState(''); + 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,''); - + 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 ( Alphanumeric Characters - + ); diff --git a/static/usage/v6/input/filtering/vue.md b/static/usage/v6/input/filtering/vue.md index bfce3c9c58b..b9ff7e0acdd 100644 --- a/static/usage/v6/input/filtering/vue.md +++ b/static/usage/v6/input/filtering/vue.md @@ -3,11 +3,7 @@ Alphanumeric Characters - + @@ -23,24 +19,24 @@ const inputModel = ref(''); const onInput = (ev) => { const value = ev.target!.value; - + // Removes non alphanumeric characters - const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,''); - + const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, ''); + /** * Update both the state variable and * the component to keep them in sync. */ inputModel.value = filteredValue; - + const inputCmp = ionInputEl.value; if (inputCmp !== undefined) { inputCmp.$el.value = filteredValue; } - } - + }; + return { ionInputEl, inputModel, onInput }; - } + }, }); ``` diff --git a/static/usage/v6/input/theming/css-properties/angular/example_component_css.md b/static/usage/v6/input/theming/css-properties/angular/example_component_css.md index bede6457325..4885a193f87 100644 --- a/static/usage/v6/input/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/input/theming/css-properties/angular/example_component_css.md @@ -3,7 +3,7 @@ ion-input.custom { --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: .8; + --placeholder-opacity: 0.8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v6/input/theming/css-properties/javascript.md b/static/usage/v6/input/theming/css-properties/javascript.md index 3b406ede42f..b08b2d704bb 100644 --- a/static/usage/v6/input/theming/css-properties/javascript.md +++ b/static/usage/v6/input/theming/css-properties/javascript.md @@ -6,7 +6,7 @@ --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: .8; + --placeholder-opacity: 0.8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v6/input/theming/css-properties/react/main_css.md b/static/usage/v6/input/theming/css-properties/react/main_css.md index bede6457325..4885a193f87 100644 --- a/static/usage/v6/input/theming/css-properties/react/main_css.md +++ b/static/usage/v6/input/theming/css-properties/react/main_css.md @@ -3,7 +3,7 @@ ion-input.custom { --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: .8; + --placeholder-opacity: 0.8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v6/input/theming/css-properties/react/main_tsx.md b/static/usage/v6/input/theming/css-properties/react/main_tsx.md index e4ec0fb134a..ea550a31e01 100644 --- a/static/usage/v6/input/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/input/theming/css-properties/react/main_tsx.md @@ -5,9 +5,7 @@ import { IonInput } from '@ionic/react'; import './main.css'; function Example() { - return ( - - ); + return ; } export default Example; ``` diff --git a/static/usage/v6/input/theming/css-properties/vue.md b/static/usage/v6/input/theming/css-properties/vue.md index 6d5d5fa41cc..574846aa285 100644 --- a/static/usage/v6/input/theming/css-properties/vue.md +++ b/static/usage/v6/input/theming/css-properties/vue.md @@ -17,7 +17,7 @@ --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: .8; + --placeholder-opacity: 0.8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v6/item-divider/basic/angular.md b/static/usage/v6/item-divider/basic/angular.md index d74e5b05549..35dccbdbc88 100644 --- a/static/usage/v6/item-divider/basic/angular.md +++ b/static/usage/v6/item-divider/basic/angular.md @@ -2,9 +2,7 @@ - - Section A - + Section A @@ -20,9 +18,7 @@ - - Section B - + Section B diff --git a/static/usage/v6/item-divider/basic/javascript.md b/static/usage/v6/item-divider/basic/javascript.md index d74e5b05549..35dccbdbc88 100644 --- a/static/usage/v6/item-divider/basic/javascript.md +++ b/static/usage/v6/item-divider/basic/javascript.md @@ -2,9 +2,7 @@ - - Section A - + Section A @@ -20,9 +18,7 @@ - - Section B - + Section B diff --git a/static/usage/v6/item-divider/basic/react.md b/static/usage/v6/item-divider/basic/react.md index 289f1727c8d..14ad85b1c82 100644 --- a/static/usage/v6/item-divider/basic/react.md +++ b/static/usage/v6/item-divider/basic/react.md @@ -7,9 +7,7 @@ function Example() { - - Section A - + Section A @@ -25,9 +23,7 @@ function Example() { - - Section B - + Section B diff --git a/static/usage/v6/item-divider/basic/vue.md b/static/usage/v6/item-divider/basic/vue.md index 95f26ebc027..22c9565c278 100644 --- a/static/usage/v6/item-divider/basic/vue.md +++ b/static/usage/v6/item-divider/basic/vue.md @@ -3,9 +3,7 @@ - - Section A - + Section A @@ -21,9 +19,7 @@ - - Section B - + Section B diff --git a/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md index b3b1bb4da25..172fdad114f 100644 --- a/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v6/item-divider/theming/css-properties/angular/example_component_html.md @@ -1,7 +1,5 @@ ```html - - Item Divider - + Item Divider ``` diff --git a/static/usage/v6/item-divider/theming/css-properties/javascript.md b/static/usage/v6/item-divider/theming/css-properties/javascript.md index 6622b6d7e3f..0c0cdc26f55 100644 --- a/static/usage/v6/item-divider/theming/css-properties/javascript.md +++ b/static/usage/v6/item-divider/theming/css-properties/javascript.md @@ -12,8 +12,6 @@ - - Item Divider - + Item Divider ``` diff --git a/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md index 6cd8d464d7e..b3083033541 100644 --- a/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/item-divider/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonItemDivider, IonLabel } from '@ionic/react'; @@ -8,9 +7,7 @@ import './main.css'; function Example() { return ( - - Item Divider - + Item Divider ); } diff --git a/static/usage/v6/item-divider/theming/css-properties/vue.md b/static/usage/v6/item-divider/theming/css-properties/vue.md index 3589bcc7cd4..950e3775d83 100644 --- a/static/usage/v6/item-divider/theming/css-properties/vue.md +++ b/static/usage/v6/item-divider/theming/css-properties/vue.md @@ -1,9 +1,7 @@ ```html @@ -12,7 +10,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonItemDivider } + components: { IonItemDivider }, }); diff --git a/static/usage/v6/item-group/sliding-items/angular.md b/static/usage/v6/item-group/sliding-items/angular.md index a451b58c9c4..2708fde7acc 100644 --- a/static/usage/v6/item-group/sliding-items/angular.md +++ b/static/usage/v6/item-group/sliding-items/angular.md @@ -1,94 +1,66 @@ ```html - - Fruits - + Fruits - - Grapes - + Grapes - - Favorite - + Favorite - - Apples - + Apples - - Favorite - + Favorite - - Bananas - + Bananas - - Favorite - + Favorite - - Vegetables - + Vegetables - - Carrots - + Carrots - - Favorite - + Favorite - - Broccoli - + Broccoli - - Favorite - + Favorite - - Celery - + Celery - - Favorite - + Favorite diff --git a/static/usage/v6/item-group/sliding-items/javascript.md b/static/usage/v6/item-group/sliding-items/javascript.md index a451b58c9c4..2708fde7acc 100644 --- a/static/usage/v6/item-group/sliding-items/javascript.md +++ b/static/usage/v6/item-group/sliding-items/javascript.md @@ -1,94 +1,66 @@ ```html - - Fruits - + Fruits - - Grapes - + Grapes - - Favorite - + Favorite - - Apples - + Apples - - Favorite - + Favorite - - Bananas - + Bananas - - Favorite - + Favorite - - Vegetables - + Vegetables - - Carrots - + Carrots - - Favorite - + Favorite - - Broccoli - + Broccoli - - Favorite - + Favorite - - Celery - + Celery - - Favorite - + Favorite diff --git a/static/usage/v6/item-group/sliding-items/react.md b/static/usage/v6/item-group/sliding-items/react.md index 2ca4d7ca380..716935f065c 100644 --- a/static/usage/v6/item-group/sliding-items/react.md +++ b/static/usage/v6/item-group/sliding-items/react.md @@ -1,100 +1,80 @@ ```tsx import React from 'react'; -import { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react'; +import { + IonItem, + IonItemDivider, + IonItemGroup, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, +} from '@ionic/react'; function Example() { return ( <> - - Fruits - + Fruits - - Grapes - + Grapes - - Favorite - + Favorite - - Apples - + Apples - - Favorite - + Favorite - - Bananas - + Bananas - - Favorite - + Favorite - - Vegetables - + Vegetables - - Carrots - + Carrots - - Favorite - + Favorite - - Broccoli - + Broccoli - - Favorite - + Favorite - - Celery - + Celery - - Favorite - + Favorite diff --git a/static/usage/v6/item-group/sliding-items/vue.md b/static/usage/v6/item-group/sliding-items/vue.md index 5110ba1abed..43109034598 100644 --- a/static/usage/v6/item-group/sliding-items/vue.md +++ b/static/usage/v6/item-group/sliding-items/vue.md @@ -2,101 +2,81 @@ ``` diff --git a/static/usage/v6/item/basic/angular.md b/static/usage/v6/item/basic/angular.md index f0b13250493..b975f267d90 100644 --- a/static/usage/v6/item/basic/angular.md +++ b/static/usage/v6/item/basic/angular.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v6/item/basic/javascript.md b/static/usage/v6/item/basic/javascript.md index f0b13250493..b975f267d90 100644 --- a/static/usage/v6/item/basic/javascript.md +++ b/static/usage/v6/item/basic/javascript.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v6/item/basic/react.md b/static/usage/v6/item/basic/react.md index dfed86af19e..6154239cbf1 100644 --- a/static/usage/v6/item/basic/react.md +++ b/static/usage/v6/item/basic/react.md @@ -11,16 +11,14 @@ function Example() { - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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, + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v6/item/basic/vue.md b/static/usage/v6/item/basic/vue.md index 479e90196a4..37b32f7c2ca 100644 --- a/static/usage/v6/item/basic/vue.md +++ b/static/usage/v6/item/basic/vue.md @@ -6,17 +6,15 @@ - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v6/item/buttons/angular.md b/static/usage/v6/item/buttons/angular.md index bf7069f48f7..4d77ff8b9d8 100644 --- a/static/usage/v6/item/buttons/angular.md +++ b/static/usage/v6/item/buttons/angular.md @@ -1,12 +1,8 @@ ```html - - Start - + Start Default Buttons - - End - + End @@ -33,14 +29,8 @@ Button Sizes - - Small - - - Default - - - Large - + Small + Default + Large ``` diff --git a/static/usage/v6/item/buttons/javascript.md b/static/usage/v6/item/buttons/javascript.md index bf7069f48f7..4d77ff8b9d8 100644 --- a/static/usage/v6/item/buttons/javascript.md +++ b/static/usage/v6/item/buttons/javascript.md @@ -1,12 +1,8 @@ ```html - - Start - + Start Default Buttons - - End - + End @@ -33,14 +29,8 @@ Button Sizes - - Small - - - Default - - - Large - + Small + Default + Large ``` diff --git a/static/usage/v6/item/buttons/react.md b/static/usage/v6/item/buttons/react.md index 8776e5215fb..fda29c7f11a 100644 --- a/static/usage/v6/item/buttons/react.md +++ b/static/usage/v6/item/buttons/react.md @@ -7,13 +7,9 @@ function Example() { return ( <> - - Start - + Start Default Buttons - - End - + End diff --git a/static/usage/v6/item/buttons/vue.md b/static/usage/v6/item/buttons/vue.md index 02de38e58ab..8680f189472 100644 --- a/static/usage/v6/item/buttons/vue.md +++ b/static/usage/v6/item/buttons/vue.md @@ -1,13 +1,9 @@ ```html @@ -54,8 +44,8 @@ export default defineComponent({ components: { IonButton, IonIcon, IonItem, IonLabel }, setup() { - return { home, navigate, star } - } + return { home, navigate, star }; + }, }); ``` diff --git a/static/usage/v6/item/counter/react.md b/static/usage/v6/item/counter/react.md index 435701d5b53..3d986aaf37e 100644 --- a/static/usage/v6/item/counter/react.md +++ b/static/usage/v6/item/counter/react.md @@ -10,7 +10,10 @@ function Example() { - `${maxLength - inputLength} characters remaining`}> + `${maxLength - inputLength} characters remaining`} + > Custom Counter Format diff --git a/static/usage/v6/item/counter/vue.md b/static/usage/v6/item/counter/vue.md index 3a97d40743a..84bf7ec643d 100644 --- a/static/usage/v6/item/counter/vue.md +++ b/static/usage/v6/item/counter/vue.md @@ -20,8 +20,8 @@ methods: { customFormatter(inputLength, maxLength) { return `${maxLength - inputLength} characters remaining`; - } - } + }, + }, }); ``` diff --git a/static/usage/v6/item/detail-arrows/vue.md b/static/usage/v6/item/detail-arrows/vue.md index d341c004f15..54010095652 100644 --- a/static/usage/v6/item/detail-arrows/vue.md +++ b/static/usage/v6/item/detail-arrows/vue.md @@ -51,3 +51,4 @@ }, }); +``` diff --git a/static/usage/v6/item/helper-error/javascript.md b/static/usage/v6/item/helper-error/javascript.md index eb0d43327d9..6d0772af984 100644 --- a/static/usage/v6/item/helper-error/javascript.md +++ b/static/usage/v6/item/helper-error/javascript.md @@ -14,7 +14,9 @@ input.addEventListener('ionBlur', () => markTouched()); const validateEmail = (email) => { - 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])?)*$/); + 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) => { @@ -23,13 +25,13 @@ item.classList.remove('ion-valid'); item.classList.remove('ion-invalid'); - if (value === "") return; + if (value === '') return; validateEmail(value) ? item.classList.add('ion-valid') : item.classList.add('ion-invalid'); - } + }; const markTouched = () => { item.classList.add('ion-touched'); - } + }; ``` diff --git a/static/usage/v6/item/helper-error/react.md b/static/usage/v6/item/helper-error/react.md index a1e0e1e1b25..84437995c01 100644 --- a/static/usage/v6/item/helper-error/react.md +++ b/static/usage/v6/item/helper-error/react.md @@ -27,7 +27,10 @@ function Example() { }; return ( - + Email validate(event)} onIonBlur={() => markTouched()}> Enter a valid email diff --git a/static/usage/v6/item/helper-error/vue.md b/static/usage/v6/item/helper-error/vue.md index 0febb45cfe4..04ed67af38e 100644 --- a/static/usage/v6/item/helper-error/vue.md +++ b/static/usage/v6/item/helper-error/vue.md @@ -16,7 +16,9 @@ components: { IonInput, IonItem, IonLabel, IonNote }, methods: { validateEmail(email) { - 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])?)*$/); + 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])?)*$/ + ); }, validate(ev) { @@ -33,8 +35,8 @@ }, markTouched() { - this.$refs.item.$el.classList.add('ion-touched') - } + this.$refs.item.$el.classList.add('ion-touched'); + }, }, }); diff --git a/static/usage/v6/item/icons/angular.md b/static/usage/v6/item/icons/angular.md index 49a1cc707e3..b81a463e004 100644 --- a/static/usage/v6/item/icons/angular.md +++ b/static/usage/v6/item/icons/angular.md @@ -1,29 +1,21 @@ ```html - - Default Icon - + Default Icon - - Large Icon - + Large Icon - - Small Icon - + Small Icon - - Default Icon - + Default Icon ``` diff --git a/static/usage/v6/item/icons/javascript.md b/static/usage/v6/item/icons/javascript.md index 49a1cc707e3..b81a463e004 100644 --- a/static/usage/v6/item/icons/javascript.md +++ b/static/usage/v6/item/icons/javascript.md @@ -1,29 +1,21 @@ ```html - - Default Icon - + Default Icon - - Large Icon - + Large Icon - - Small Icon - + Small Icon - - Default Icon - + Default Icon ``` diff --git a/static/usage/v6/item/icons/react.md b/static/usage/v6/item/icons/react.md index a5fc0ae6629..09496398f7f 100644 --- a/static/usage/v6/item/icons/react.md +++ b/static/usage/v6/item/icons/react.md @@ -7,31 +7,23 @@ function Example() { return ( <> - - Default Icon - + Default Icon - - Large Icon - + Large Icon - - Small Icon - + Small Icon - - Default Icon - + Default Icon ); diff --git a/static/usage/v6/item/icons/vue.md b/static/usage/v6/item/icons/vue.md index 82e09004fbe..a89e5e6aad0 100644 --- a/static/usage/v6/item/icons/vue.md +++ b/static/usage/v6/item/icons/vue.md @@ -1,31 +1,23 @@ ```html @@ -37,8 +29,8 @@ export default defineComponent({ components: { IonButton, IonIcon, IonItem, IonLabel }, setup() { - return { informationCircle, star } - } + return { informationCircle, star }; + }, }); ``` diff --git a/static/usage/v6/item/inputs/react.md b/static/usage/v6/item/inputs/react.md index 0cb6523f053..d1ef33c8b27 100644 --- a/static/usage/v6/item/inputs/react.md +++ b/static/usage/v6/item/inputs/react.md @@ -1,6 +1,15 @@ ```tsx import React from 'react'; -import { IonCheckbox, IonInput, IonItem, IonLabel, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react'; +import { + IonCheckbox, + IonInput, + IonItem, + IonLabel, + IonRange, + IonSelect, + IonSelectOption, + IonToggle, +} from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v6/item/inputs/vue.md b/static/usage/v6/item/inputs/vue.md index 7dc085a7a4d..11f20443f99 100644 --- a/static/usage/v6/item/inputs/vue.md +++ b/static/usage/v6/item/inputs/vue.md @@ -60,7 +60,16 @@ ``` diff --git a/static/usage/v6/item/media/angular.md b/static/usage/v6/item/media/angular.md index 915969f127e..c51ab29463a 100644 --- a/static/usage/v6/item/media/angular.md +++ b/static/usage/v6/item/media/angular.md @@ -3,17 +3,13 @@ Silhouette of a person's head - - Avatar Item - + Avatar Item Silhouette of mountains - - Thumbnail Item - + Thumbnail Item ``` diff --git a/static/usage/v6/item/media/javascript.md b/static/usage/v6/item/media/javascript.md index 915969f127e..c51ab29463a 100644 --- a/static/usage/v6/item/media/javascript.md +++ b/static/usage/v6/item/media/javascript.md @@ -3,17 +3,13 @@ Silhouette of a person's head - - Avatar Item - + Avatar Item Silhouette of mountains - - Thumbnail Item - + Thumbnail Item ``` diff --git a/static/usage/v6/item/media/react.md b/static/usage/v6/item/media/react.md index 21ba7c98f65..dae8042c9ae 100644 --- a/static/usage/v6/item/media/react.md +++ b/static/usage/v6/item/media/react.md @@ -9,18 +9,14 @@ function Example() { Silhouette of a person's head - - Avatar Item - + Avatar Item Silhouette of mountains - - Thumbnail Item - + Thumbnail Item ); diff --git a/static/usage/v6/item/media/vue.md b/static/usage/v6/item/media/vue.md index 72dd55ef587..38b16a91fb3 100644 --- a/static/usage/v6/item/media/vue.md +++ b/static/usage/v6/item/media/vue.md @@ -4,18 +4,14 @@ Silhouette of a person's head - - Avatar Item - + Avatar Item Silhouette of mountains - - Thumbnail Item - + Thumbnail Item diff --git a/static/usage/v6/label/item/angular.md b/static/usage/v6/label/item/angular.md index be252b899a0..54f24979079 100644 --- a/static/usage/v6/label/item/angular.md +++ b/static/usage/v6/label/item/angular.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v6/label/item/javascript.md b/static/usage/v6/label/item/javascript.md index be252b899a0..54f24979079 100644 --- a/static/usage/v6/label/item/javascript.md +++ b/static/usage/v6/label/item/javascript.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v6/label/item/react.md b/static/usage/v6/label/item/react.md index 88e4f904deb..f5bdf5a5d1b 100644 --- a/static/usage/v6/label/item/react.md +++ b/static/usage/v6/label/item/react.md @@ -11,16 +11,14 @@ function Example() { - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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, + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v6/label/item/vue.md b/static/usage/v6/label/item/vue.md index 99ec3ea3d40..fe4cd48904a 100644 --- a/static/usage/v6/label/item/vue.md +++ b/static/usage/v6/label/item/vue.md @@ -6,17 +6,15 @@ - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v6/loading/controller/javascript.md b/static/usage/v6/loading/controller/javascript.md index c5507d123af..f54756c396b 100644 --- a/static/usage/v6/loading/controller/javascript.md +++ b/static/usage/v6/loading/controller/javascript.md @@ -2,13 +2,13 @@ Show Loading ``` diff --git a/static/usage/v6/loading/controller/react.md b/static/usage/v6/loading/controller/react.md index 16280a1e91a..06dc3413bab 100644 --- a/static/usage/v6/loading/controller/react.md +++ b/static/usage/v6/loading/controller/react.md @@ -2,7 +2,6 @@ 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 @@ -11,12 +10,14 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Dismissing after 3 seconds...', - duration: 3000 - }) - }}> + { + present({ + message: 'Dismissing after 3 seconds...', + duration: 3000, + }); + }} + > Show Loading ); diff --git a/static/usage/v6/loading/controller/vue.md b/static/usage/v6/loading/controller/vue.md index 17b65b33af0..e80b61cc8b3 100644 --- a/static/usage/v6/loading/controller/vue.md +++ b/static/usage/v6/loading/controller/vue.md @@ -13,14 +13,14 @@ const showLoading = async () => { const loading = await loadingController.create({ message: 'Dismissing after 3 seconds...', - duration: 3000 + duration: 3000, }); - + loading.present(); - } - - return { showLoading } - } + }; + + return { showLoading }; + }, }); ``` diff --git a/static/usage/v6/loading/spinners/javascript.md b/static/usage/v6/loading/spinners/javascript.md index 09712e70a92..b16d6a849f0 100644 --- a/static/usage/v6/loading/spinners/javascript.md +++ b/static/usage/v6/loading/spinners/javascript.md @@ -2,14 +2,14 @@ Show Loading ``` diff --git a/static/usage/v6/loading/spinners/react.md b/static/usage/v6/loading/spinners/react.md index e2c492f1431..e90cbb4e555 100644 --- a/static/usage/v6/loading/spinners/react.md +++ b/static/usage/v6/loading/spinners/react.md @@ -2,7 +2,6 @@ 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 @@ -11,13 +10,15 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Loading...', - duration: 3000, - spinner: 'circles' - }) - }}> + { + present({ + message: 'Loading...', + duration: 3000, + spinner: 'circles', + }); + }} + > Show Loading ); diff --git a/static/usage/v6/loading/spinners/vue.md b/static/usage/v6/loading/spinners/vue.md index 4d01e7fc869..77719a4a704 100644 --- a/static/usage/v6/loading/spinners/vue.md +++ b/static/usage/v6/loading/spinners/vue.md @@ -14,14 +14,14 @@ const loading = await loadingController.create({ message: 'Loading...', duration: 3000, - spinner: 'circles' + spinner: 'circles', }); - + loading.present(); - } - - return { showLoading } - } + }; + + return { showLoading }; + }, }); ``` diff --git a/static/usage/v6/loading/theming/angular/global_css.md b/static/usage/v6/loading/theming/angular/global_css.md index 16bf7af3522..af410626c52 100644 --- a/static/usage/v6/loading/theming/angular/global_css.md +++ b/static/usage/v6/loading/theming/angular/global_css.md @@ -5,4 +5,4 @@ ion-loading.custom-loading { color: #1c6dff; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/loading/theming/javascript.md b/static/usage/v6/loading/theming/javascript.md index 68e0943cd3d..5c0258d1f9a 100644 --- a/static/usage/v6/loading/theming/javascript.md +++ b/static/usage/v6/loading/theming/javascript.md @@ -2,23 +2,23 @@ Show Loading ``` diff --git a/static/usage/v6/loading/theming/react.md b/static/usage/v6/loading/theming/react.md index e2c492f1431..e90cbb4e555 100644 --- a/static/usage/v6/loading/theming/react.md +++ b/static/usage/v6/loading/theming/react.md @@ -2,7 +2,6 @@ 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 @@ -11,13 +10,15 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Loading...', - duration: 3000, - spinner: 'circles' - }) - }}> + { + present({ + message: 'Loading...', + duration: 3000, + spinner: 'circles', + }); + }} + > Show Loading ); diff --git a/static/usage/v6/loading/theming/react/main_css.md b/static/usage/v6/loading/theming/react/main_css.md index 16bf7af3522..af410626c52 100644 --- a/static/usage/v6/loading/theming/react/main_css.md +++ b/static/usage/v6/loading/theming/react/main_css.md @@ -5,4 +5,4 @@ ion-loading.custom-loading { color: #1c6dff; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/loading/theming/react/main_tsx.md b/static/usage/v6/loading/theming/react/main_tsx.md index cc57cc1dce8..b92952e42b6 100644 --- a/static/usage/v6/loading/theming/react/main_tsx.md +++ b/static/usage/v6/loading/theming/react/main_tsx.md @@ -5,7 +5,6 @@ import { IonButton, useIonLoading } from '@ionic/react'; import './main.css'; function Example() { - /** * This example does not make use of the dismiss * method returned from `useIonLoading`, but it can @@ -14,13 +13,15 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Loading...', - duration: 3000, - cssClass: 'custom-loading' - }) - }}> + { + present({ + message: 'Loading...', + duration: 3000, + cssClass: 'custom-loading', + }); + }} + > Show Loading ); diff --git a/static/usage/v6/loading/theming/vue.md b/static/usage/v6/loading/theming/vue.md index 6f380da3f1f..5387b241463 100644 --- a/static/usage/v6/loading/theming/vue.md +++ b/static/usage/v6/loading/theming/vue.md @@ -14,14 +14,14 @@ const loading = await loadingController.create({ message: 'Loading...', duration: 3000, - cssClass: 'custom-loading' + cssClass: 'custom-loading', }); - + loading.present(); - } - - return { showLoading } - } + }; + + return { showLoading }; + }, }); ``` diff --git a/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md b/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md index 4b1b527952e..62d396e75aa 100644 --- a/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/searchbar/theming/css-properties/react/main_tsx.md @@ -5,9 +5,7 @@ import { IonSearchbar } from '@ionic/react'; import './main.css'; function Example() { - return ( - - ); + return ; } export default Example; ``` diff --git a/static/usage/v6/segment-button/layout/vue.md b/static/usage/v6/segment-button/layout/vue.md index d3c60a4004d..71a039bd211 100644 --- a/static/usage/v6/segment-button/layout/vue.md +++ b/static/usage/v6/segment-button/layout/vue.md @@ -82,7 +82,7 @@ components: { IonIcon, IonLabel, IonSegment, IonSegmentButton }, setup() { return { call, heart, pin }; - } + }, }); ``` diff --git a/static/usage/v6/segment/scrollable/vue.md b/static/usage/v6/segment/scrollable/vue.md index c3afaf67ba2..160fab75489 100644 --- a/static/usage/v6/segment/scrollable/vue.md +++ b/static/usage/v6/segment/scrollable/vue.md @@ -43,9 +43,18 @@ components: { IonIcon, IonSegment, IonSegmentButton }, setup() { return { - home, heart, pin, star, call, globe, basket, barbell, trash, person - } - } + home, + heart, + pin, + star, + call, + globe, + basket, + barbell, + trash, + person, + }; + }, }); ``` diff --git a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md index de30bdc02d0..84f81cf5ecf 100644 --- a/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md +++ b/static/usage/v6/select/basic/responding-to-interaction/angular/example_component_html.md @@ -16,4 +16,4 @@

{{ log }}

-``` \ No newline at end of file +``` diff --git a/static/usage/v6/select/basic/responding-to-interaction/javascript.md b/static/usage/v6/select/basic/responding-to-interaction/javascript.md index 78ba1244101..a553e0b899b 100644 --- a/static/usage/v6/select/basic/responding-to-interaction/javascript.md +++ b/static/usage/v6/select/basic/responding-to-interaction/javascript.md @@ -14,7 +14,7 @@ const select = document.querySelector('ion-select'); const log = document.querySelector('#log'); - select.addEventListener('ionChange', e => { + select.addEventListener('ionChange', (e) => { log.insertAdjacentHTML('afterbegin', `

ionChange fired with value: ${e.detail.value}

`); }); diff --git a/static/usage/v6/select/basic/responding-to-interaction/vue.md b/static/usage/v6/select/basic/responding-to-interaction/vue.md index e8d2880e45e..7e62f53b0d4 100644 --- a/static/usage/v6/select/basic/responding-to-interaction/vue.md +++ b/static/usage/v6/select/basic/responding-to-interaction/vue.md @@ -27,14 +27,14 @@ components: { IonItem, IonList, IonSelect, IonSelectOption }, data() { return { - logs: [] - } + logs: [], + }; }, methods: { pushLog(msg) { this.logs.unshift(msg); - } - } + }, + }, }); ``` diff --git a/static/usage/v6/select/customization/interface-options/angular/example_component_html.md b/static/usage/v6/select/customization/interface-options/angular/example_component_html.md index e1093bdf292..ccaddb758e0 100644 --- a/static/usage/v6/select/customization/interface-options/angular/example_component_html.md +++ b/static/usage/v6/select/customization/interface-options/angular/example_component_html.md @@ -1,5 +1,5 @@ ```html - + Alert @@ -8,7 +8,7 @@ Pepperoni - + Popover @@ -17,7 +17,7 @@ Red - + Action Sheet diff --git a/static/usage/v6/select/customization/interface-options/javascript.md b/static/usage/v6/select/customization/interface-options/javascript.md index 9f48ee33cf9..8c06ebd788a 100644 --- a/static/usage/v6/select/customization/interface-options/javascript.md +++ b/static/usage/v6/select/customization/interface-options/javascript.md @@ -1,5 +1,5 @@ ```html - + Alert @@ -8,7 +8,7 @@ Pepperoni - + Popover @@ -17,7 +17,7 @@ Red - + Action Sheet @@ -34,7 +34,7 @@ header: 'Pizza Toppings', subHeader: 'Select your favorite topping', message: 'Choose only one', - translucent: true + translucent: true, }; customAlertSelect.interfaceOptions = customAlertOptions; @@ -42,14 +42,14 @@ const customPopoverOptions = { header: 'Hair Color', subHeader: 'Select your hair color', - message: 'Only select your dominant hair color' + message: 'Only select your dominant hair color', }; customPopoverSelect.interfaceOptions = customPopoverOptions; const customActionSheetSelect = document.getElementById('customActionSheetSelect'); const customActionSheetOptions = { header: 'Colors', - subHeader: 'Select your favorite color' + subHeader: 'Select your favorite color', }; customActionSheetSelect.interfaceOptions = customActionSheetOptions; diff --git a/static/usage/v6/select/customization/interface-options/react.md b/static/usage/v6/select/customization/interface-options/react.md index 57cdc7a9c9a..7bc42d0a9f3 100644 --- a/static/usage/v6/select/customization/interface-options/react.md +++ b/static/usage/v6/select/customization/interface-options/react.md @@ -6,22 +6,22 @@ function Example() { header: 'Pizza Toppings', subHeader: 'Select your favorite topping', message: 'Choose only one', - translucent: true + translucent: true, }; const customPopoverOptions = { header: 'Hair Color', subHeader: 'Select your hair color', - message: 'Only select your dominant hair color' + message: 'Only select your dominant hair color', }; const customActionSheetOptions = { header: 'Colors', - subHeader: 'Select your favorite color' + subHeader: 'Select your favorite color', }; return ( - + Alert @@ -30,7 +30,7 @@ function Example() { Pepperoni - + Popover @@ -39,7 +39,7 @@ function Example() { Red - + Action Sheet diff --git a/static/usage/v6/select/customization/interface-options/vue.md b/static/usage/v6/select/customization/interface-options/vue.md index 7488095006d..573b33c2115 100644 --- a/static/usage/v6/select/customization/interface-options/vue.md +++ b/static/usage/v6/select/customization/interface-options/vue.md @@ -1,6 +1,6 @@ ```html -``` \ No newline at end of file +``` diff --git a/static/usage/v6/select/typeahead/vue/vue_types_ts.md b/static/usage/v6/select/typeahead/vue/vue_types_ts.md index bdf47c9d0ae..42d4583e026 100644 --- a/static/usage/v6/select/typeahead/vue/vue_types_ts.md +++ b/static/usage/v6/select/typeahead/vue/vue_types_ts.md @@ -2,5 +2,5 @@ export interface Item { text: string; value: string; -}; +} ``` diff --git a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md index 8b30337848c..8423962a3e9 100644 --- a/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md +++ b/static/usage/v6/skeleton-text/basic/angular/example_component_ts.md @@ -4,10 +4,9 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.css'] + styleUrls: ['example.component.css'], }) export class ExampleComponent { public loaded = false; } - -``` \ No newline at end of file +``` diff --git a/static/usage/v6/skeleton-text/basic/javascript.md b/static/usage/v6/skeleton-text/basic/javascript.md index 5eefa7c1149..da71f295063 100644 --- a/static/usage/v6/skeleton-text/basic/javascript.md +++ b/static/usage/v6/skeleton-text/basic/javascript.md @@ -56,6 +56,5 @@ } setSkeletonText(); - ``` diff --git a/static/usage/v6/skeleton-text/basic/react.md b/static/usage/v6/skeleton-text/basic/react.md index 2ea377034c9..a247849a478 100644 --- a/static/usage/v6/skeleton-text/basic/react.md +++ b/static/usage/v6/skeleton-text/basic/react.md @@ -1,6 +1,6 @@ ```tsx import React, { useState } from 'react'; -import { +import { IonButton, IonIcon, IonItem, @@ -15,12 +15,12 @@ function Example() { const [loaded, setLoaded] = useState(false); return ( <> - {loaded && + {loaded && ( Albums - +

Abbey Road

@@ -29,11 +29,11 @@ function Example() { - } - {!loaded && + )} + {!loaded && ( - + @@ -41,21 +41,21 @@ function Example() {

- +

- +

- +

- } + )} setLoaded(!loaded)}>Toggle ); } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v6/skeleton-text/basic/vue.md b/static/usage/v6/skeleton-text/basic/vue.md index c03a518af19..f391050a009 100644 --- a/static/usage/v6/skeleton-text/basic/vue.md +++ b/static/usage/v6/skeleton-text/basic/vue.md @@ -13,7 +13,7 @@ - + @@ -35,7 +35,7 @@ - + Toggle @@ -50,7 +50,7 @@ IonSkeletonText, IonThumbnail, } from '@ionic/vue'; - import { musicalNotes } from 'ionicons/icons' + import { musicalNotes } from 'ionicons/icons'; import { defineComponent, ref } from 'vue'; export default defineComponent({ @@ -66,13 +66,13 @@ }, setup() { const loaded = ref(false); - const setLoaded = (state: boolean) => loaded.value = state; + const setLoaded = (state: boolean) => (loaded.value = state); return { loaded, musicalNotes, - setLoaded - } - } + setLoaded, + }; + }, }); ``` diff --git a/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md index 67761872c60..c59d8603262 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/angular/example_component_css.md @@ -4,4 +4,4 @@ ion-skeleton-text { --background: rgba(188, 0, 255, 0.065); --background-rgb: 188, 0, 255; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/skeleton-text/theming/css-properties/javascript.md b/static/usage/v6/skeleton-text/theming/css-properties/javascript.md index 20463c6aba6..90d27d3f31e 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/javascript.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/javascript.md @@ -26,6 +26,6 @@

- + ``` diff --git a/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md index 67761872c60..c59d8603262 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/react/main_css.md @@ -4,4 +4,4 @@ ion-skeleton-text { --background: rgba(188, 0, 255, 0.065); --background-rgb: 188, 0, 255; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md index 29e6e159f68..d66ea73ff7f 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/react/main_tsx.md @@ -1,13 +1,6 @@ ```tsx import React from 'react'; -import { - IonItem, - IonLabel, - IonList, - IonListHeader, - IonSkeletonText, - IonThumbnail, -} from '@ionic/react'; +import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/react'; import './main.css'; @@ -15,7 +8,7 @@ function Example() { return ( - + @@ -23,13 +16,13 @@ function Example() {

- +

- +

- +

@@ -37,4 +30,4 @@ function Example() { ); } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v6/skeleton-text/theming/css-properties/vue.md b/static/usage/v6/skeleton-text/theming/css-properties/vue.md index 418a7ca610f..2785a0e8b51 100644 --- a/static/usage/v6/skeleton-text/theming/css-properties/vue.md +++ b/static/usage/v6/skeleton-text/theming/css-properties/vue.md @@ -1,5 +1,5 @@ ```html - @@ -30,7 +26,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, + components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, }); ``` diff --git a/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md index 4772826c933..029f5d3ee56 100644 --- a/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v6/split-pane/theming/css-properties/angular/example_component_html.md @@ -6,9 +6,7 @@ Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border
@@ -17,9 +15,7 @@ Main View - - Main View Content - + Main View Content
``` diff --git a/static/usage/v6/split-pane/theming/css-properties/javascript.md b/static/usage/v6/split-pane/theming/css-properties/javascript.md index 943993aa380..37bd7b9e7f1 100644 --- a/static/usage/v6/split-pane/theming/css-properties/javascript.md +++ b/static/usage/v6/split-pane/theming/css-properties/javascript.md @@ -6,9 +6,7 @@ Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border
@@ -17,9 +15,7 @@ Main View - - Main View Content - + Main View Content
@@ -27,7 +23,7 @@ ion-split-pane { --side-width: 350px; --side-max-width: 350px; - + --border: 1px dashed #b3baff; } diff --git a/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md index 7456a34359d..1d4ad6a2e19 100644 --- a/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/split-pane/theming/css-properties/react/main_tsx.md @@ -13,20 +13,16 @@ function Example() { Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border - +
Main View - - Main View Content - + Main View Content
); diff --git a/static/usage/v6/split-pane/theming/css-properties/vue.md b/static/usage/v6/split-pane/theming/css-properties/vue.md index cc891eaeda1..f0abcf95800 100644 --- a/static/usage/v6/split-pane/theming/css-properties/vue.md +++ b/static/usage/v6/split-pane/theming/css-properties/vue.md @@ -7,20 +7,16 @@ Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border - +
Main View - - Main View Content - + Main View Content
@@ -30,7 +26,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, + components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, }); @@ -38,7 +34,7 @@ ion-split-pane { --side-width: 350px; --side-max-width: 350px; - + --border: 1px dashed #b3baff; } diff --git a/static/usage/v6/text/basic/angular.md b/static/usage/v6/text/basic/angular.md index fb2f6064fba..e63da3cacf9 100644 --- a/static/usage/v6/text/basic/angular.md +++ b/static/usage/v6/text/basic/angular.md @@ -13,9 +13,9 @@

- 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. + 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/v6/text/basic/javascript.md b/static/usage/v6/text/basic/javascript.md index fb2f6064fba..e63da3cacf9 100644 --- a/static/usage/v6/text/basic/javascript.md +++ b/static/usage/v6/text/basic/javascript.md @@ -13,9 +13,9 @@

- 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. + 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/v6/text/basic/react.md b/static/usage/v6/text/basic/react.md index dac54e84471..da8882e3bf5 100644 --- a/static/usage/v6/text/basic/react.md +++ b/static/usage/v6/text/basic/react.md @@ -19,11 +19,14 @@ function Example() {

- - 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. + + + + 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/v6/text/basic/vue.md b/static/usage/v6/text/basic/vue.md index 742167bf9f1..b34cd3d437a 100644 --- a/static/usage/v6/text/basic/vue.md +++ b/static/usage/v6/text/basic/vue.md @@ -14,10 +14,10 @@

- 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. + 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/v6/textarea/autogrow/angular.md b/static/usage/v6/textarea/autogrow/angular.md index 5ff7394eec0..03de94359b6 100644 --- a/static/usage/v6/textarea/autogrow/angular.md +++ b/static/usage/v6/textarea/autogrow/angular.md @@ -1,7 +1,10 @@ ```html - + ``` diff --git a/static/usage/v6/textarea/autogrow/javascript.md b/static/usage/v6/textarea/autogrow/javascript.md index bea62987f5e..4c2e15028fd 100644 --- a/static/usage/v6/textarea/autogrow/javascript.md +++ b/static/usage/v6/textarea/autogrow/javascript.md @@ -1,7 +1,10 @@ ```html - + ``` diff --git a/static/usage/v6/textarea/autogrow/vue.md b/static/usage/v6/textarea/autogrow/vue.md index 824ada24909..693814464e8 100644 --- a/static/usage/v6/textarea/autogrow/vue.md +++ b/static/usage/v6/textarea/autogrow/vue.md @@ -1,8 +1,11 @@ ```html diff --git a/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md index 605855deb77..74742dfe9f0 100644 --- a/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_css.md @@ -1,4 +1,3 @@ - ```css ion-thumbnail { --size: 140px; diff --git a/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md index 8ef97cae761..119cfb8ee9c 100644 --- a/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v6/thumbnail/theming/css-properties/angular/example_component_html.md @@ -1,4 +1,3 @@ - ```html Silhouette of mountains diff --git a/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md index 37f4796d763..1d0f352383f 100644 --- a/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md +++ b/static/usage/v6/thumbnail/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonThumbnail } from '@ionic/react'; diff --git a/static/usage/v6/toast/buttons/angular/example_component_html.md b/static/usage/v6/toast/buttons/angular/example_component_html.md index 5d457cdbf2f..4ce5b83bc18 100644 --- a/static/usage/v6/toast/buttons/angular/example_component_html.md +++ b/static/usage/v6/toast/buttons/angular/example_component_html.md @@ -2,4 +2,4 @@ Click Me

{{ handlerMessage }}

{{ roleMessage }}

-``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/buttons/angular/example_component_ts.md b/static/usage/v6/toast/buttons/angular/example_component_ts.md index 54dc88ac35c..faf1f33ed5b 100644 --- a/static/usage/v6/toast/buttons/angular/example_component_ts.md +++ b/static/usage/v6/toast/buttons/angular/example_component_ts.md @@ -20,14 +20,18 @@ export class ExampleComponent { { text: 'More Info', role: 'info', - handler: () => { this.handlerMessage = 'More Info clicked'; } + handler: () => { + this.handlerMessage = 'More Info clicked'; + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { this.handlerMessage = 'Dismiss clicked'; } - } - ] + handler: () => { + this.handlerMessage = 'Dismiss clicked'; + }, + }, + ], }); await toast.present(); @@ -36,4 +40,4 @@ export class ExampleComponent { this.roleMessage = `Dismissed with role: ${role}`; } } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/buttons/javascript.md b/static/usage/v6/toast/buttons/javascript.md index c5cea896bb3..521bb9a2aec 100644 --- a/static/usage/v6/toast/buttons/javascript.md +++ b/static/usage/v6/toast/buttons/javascript.md @@ -15,14 +15,18 @@ { text: 'More Info', role: 'info', - handler: () => { handlerOutput.innerText = 'More Info clicked'; } + handler: () => { + handlerOutput.innerText = 'More Info clicked'; + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { handlerOutput.innerText = 'Dismiss clicked'; } - } - ] + handler: () => { + handlerOutput.innerText = 'Dismiss clicked'; + }, + }, + ], }); await toast.present(); diff --git a/static/usage/v6/toast/buttons/react.md b/static/usage/v6/toast/buttons/react.md index ac08a9b543b..7f329e63ec7 100644 --- a/static/usage/v6/toast/buttons/react.md +++ b/static/usage/v6/toast/buttons/react.md @@ -19,15 +19,19 @@ function Example() { { text: 'More Info', role: 'info', - handler: () => { setHandlerMessage('More Info clicked'); } + handler: () => { + setHandlerMessage('More Info clicked'); + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { setHandlerMessage('Dismiss clicked'); } - } - ] - }) + handler: () => { + setHandlerMessage('Dismiss clicked'); + }, + }, + ], + }); }} > Click Me diff --git a/static/usage/v6/toast/buttons/vue.md b/static/usage/v6/toast/buttons/vue.md index ec7da81c54c..762aff51aa2 100644 --- a/static/usage/v6/toast/buttons/vue.md +++ b/static/usage/v6/toast/buttons/vue.md @@ -25,14 +25,18 @@ { text: 'More Info', role: 'info', - handler: () => { this.handlerMessage = 'More Info clicked'; } + handler: () => { + this.handlerMessage = 'More Info clicked'; + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { this.handlerMessage = 'Dismiss clicked'; } - } - ] + handler: () => { + this.handlerMessage = 'Dismiss clicked'; + }, + }, + ], }); await toast.present(); diff --git a/static/usage/v6/toast/icon/angular/example_component_html.md b/static/usage/v6/toast/icon/angular/example_component_html.md index 976194efc1e..91e6579dfa8 100644 --- a/static/usage/v6/toast/icon/angular/example_component_html.md +++ b/static/usage/v6/toast/icon/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/icon/angular/example_component_ts.md b/static/usage/v6/toast/icon/angular/example_component_ts.md index addffa2daf9..d72053bd950 100644 --- a/static/usage/v6/toast/icon/angular/example_component_ts.md +++ b/static/usage/v6/toast/icon/angular/example_component_ts.md @@ -13,10 +13,10 @@ export class ExampleComponent { const toast = await this.toastController.create({ message: 'Hello World!', duration: 1500, - icon: 'globe' + icon: 'globe', }); await toast.present(); } } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/icon/javascript.md b/static/usage/v6/toast/icon/javascript.md index b63e8550ab3..685c496cc26 100644 --- a/static/usage/v6/toast/icon/javascript.md +++ b/static/usage/v6/toast/icon/javascript.md @@ -6,9 +6,9 @@ const toast = await this.toastController.create({ message: 'Hello World!', duration: 1500, - icon: 'globe' + icon: 'globe', }); - + await toast.present(); } diff --git a/static/usage/v6/toast/icon/react.md b/static/usage/v6/toast/icon/react.md index 25d758c16b6..8ccf5670d69 100644 --- a/static/usage/v6/toast/icon/react.md +++ b/static/usage/v6/toast/icon/react.md @@ -12,8 +12,8 @@ function Example() { presentToast({ message: 'Hello World!', duration: 1500, - icon: globe - }) + icon: globe, + }); }} > Click Me diff --git a/static/usage/v6/toast/icon/vue.md b/static/usage/v6/toast/icon/vue.md index d3a123f598b..4cbe7510e4b 100644 --- a/static/usage/v6/toast/icon/vue.md +++ b/static/usage/v6/toast/icon/vue.md @@ -14,7 +14,7 @@ const toast = await toastController.create({ message: 'Hello World!', duration: 1500, - icon: globe + icon: globe, }); await toast.present(); diff --git a/static/usage/v6/toast/layout/angular/example_component_html.md b/static/usage/v6/toast/layout/angular/example_component_html.md index 8bd086f7ba5..195a1841204 100644 --- a/static/usage/v6/toast/layout/angular/example_component_html.md +++ b/static/usage/v6/toast/layout/angular/example_component_html.md @@ -1,4 +1,4 @@ ```html Open Baseline Layout Toast Click Stacked Layout Toast -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/layout/angular/example_component_ts.md b/static/usage/v6/toast/layout/angular/example_component_ts.md index 6e8c63a9b58..01636b04a97 100644 --- a/static/usage/v6/toast/layout/angular/example_component_ts.md +++ b/static/usage/v6/toast/layout/angular/example_component_ts.md @@ -8,34 +8,29 @@ import type { ToastOptions } from '@ionic/angular'; templateUrl: 'example.component.html', }) export class ExampleComponent { - constructor(private toastController: ToastController) {} - + async presentToast(opts: ToastOptions) { const toast = await this.toastController.create(opts); - + await toast.present(); } - + async presentBaselineToast() { await this.presentToast({ duration: 3000, - message: "This is a toast with a long message and a button that appears on the same line.", - buttons: [ - { text: 'Action With Long Text'} - ] + message: 'This is a toast with a long message and a button that appears on the same line.', + buttons: [{ text: 'Action With Long Text' }], }); } - + async presentStackedToast() { await this.presentToast({ duration: 3000, - message: "This is a toast with a long message and a button that appears on the next line.", - buttons: [ - { text: 'Action With Long Text'} - ], - layout: "stacked" + message: 'This is a toast with a long message and a button that appears on the next line.', + buttons: [{ text: 'Action With Long Text' }], + layout: 'stacked', }); } } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/layout/javascript.md b/static/usage/v6/toast/layout/javascript.md index 2350799f7e1..5d9a27392f9 100644 --- a/static/usage/v6/toast/layout/javascript.md +++ b/static/usage/v6/toast/layout/javascript.md @@ -5,28 +5,24 @@ diff --git a/static/usage/v6/toast/layout/react.md b/static/usage/v6/toast/layout/react.md index 68813f1eb1f..30f0b95da5a 100644 --- a/static/usage/v6/toast/layout/react.md +++ b/static/usage/v6/toast/layout/react.md @@ -11,11 +11,9 @@ function Example() { onClick={() => { presentToast({ duration: 3000, - message: "This is a toast with a long message and a button that appears on the next line.", - buttons: [ - { text: 'Action With Long Text'} - ] - }) + message: 'This is a toast with a long message and a button that appears on the next line.', + buttons: [{ text: 'Action With Long Text' }], + }); }} > Open Baseline Layout Toast @@ -24,12 +22,10 @@ function Example() { onClick={() => { presentToast({ duration: 3000, - message: "This is a toast with a long message and a button that appears on the next line.", - buttons: [ - { text: 'Action With Long Text'} - ], - layout: "stacked" - }) + message: 'This is a toast with a long message and a button that appears on the next line.', + buttons: [{ text: 'Action With Long Text' }], + layout: 'stacked', + }); }} > Open Stacked Layout Toast diff --git a/static/usage/v6/toast/layout/vue.md b/static/usage/v6/toast/layout/vue.md index 5b884ea7caf..ff3865c3b9c 100644 --- a/static/usage/v6/toast/layout/vue.md +++ b/static/usage/v6/toast/layout/vue.md @@ -14,33 +14,29 @@ setup() { const presentToast = async (opts: ToastOptions) => { const toast = await toastController.create(opts); - + await toast.present(); - } - + }; + const presentBaselineToast = async () => { await presentToast({ duration: 3000, - message: "This is a toast with a long message and a button that appears on the same line.", - buttons: [ - { text: 'Action With Long Text'} - ] + message: 'This is a toast with a long message and a button that appears on the same line.', + buttons: [{ text: 'Action With Long Text' }], }); - } - + }; + const presentStackedToast = async () => { await presentToast({ duration: 3000, - message: "This is a toast with a long message and a button that appears on the next line.", - buttons: [ - { text: 'Action With Long Text'} - ], - layout: "stacked" + message: 'This is a toast with a long message and a button that appears on the next line.', + buttons: [{ text: 'Action With Long Text' }], + layout: 'stacked', }); - } - - return { presentBaselineToast, presentStackedToast } - } + }; + + return { presentBaselineToast, presentStackedToast }; + }, }); ``` diff --git a/static/usage/v6/toast/presenting/controller/angular/example_component_html.md b/static/usage/v6/toast/presenting/controller/angular/example_component_html.md index 962fcd0e355..2ed1eea0254 100644 --- a/static/usage/v6/toast/presenting/controller/angular/example_component_html.md +++ b/static/usage/v6/toast/presenting/controller/angular/example_component_html.md @@ -2,4 +2,4 @@ Present Toast At the Top Present Toast At the Middle Present Toast At the Bottom -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md index c772728c3c1..db133a99f1e 100644 --- a/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md +++ b/static/usage/v6/toast/presenting/controller/angular/example_component_ts.md @@ -13,10 +13,10 @@ export class ExampleComponent { const toast = await this.toastController.create({ message: 'Hello World!', duration: 1500, - position: position + position: position, }); await toast.present(); } } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/presenting/controller/javascript.md b/static/usage/v6/toast/presenting/controller/javascript.md index 5260ba8d1a1..52c089331fa 100644 --- a/static/usage/v6/toast/presenting/controller/javascript.md +++ b/static/usage/v6/toast/presenting/controller/javascript.md @@ -8,7 +8,7 @@ const toast = await this.toastController.create({ message: 'Hello World!', duration: 1500, - position: position + position: position, }); await toast.present(); diff --git a/static/usage/v6/toast/presenting/controller/react.md b/static/usage/v6/toast/presenting/controller/react.md index 1dd38b3cd48..b4e8d0913ca 100644 --- a/static/usage/v6/toast/presenting/controller/react.md +++ b/static/usage/v6/toast/presenting/controller/react.md @@ -9,15 +9,21 @@ function Example() { present({ message: 'Hello World!', duration: 1500, - position: position + position: position, }); }; return ( <> - presentToast('top')}>Present Toast At the Top - presentToast('middle')}>Present Toast At the Middle - presentToast('bottom')}>Present Toast At the Bottom + presentToast('top')}> + Present Toast At the Top + + presentToast('middle')}> + Present Toast At the Middle + + presentToast('bottom')}> + Present Toast At the Bottom + ); } diff --git a/static/usage/v6/toast/presenting/controller/vue.md b/static/usage/v6/toast/presenting/controller/vue.md index ac520d0e7b9..7f2ade91031 100644 --- a/static/usage/v6/toast/presenting/controller/vue.md +++ b/static/usage/v6/toast/presenting/controller/vue.md @@ -15,7 +15,7 @@ const toast = await toastController.create({ message: 'Hello World!', duration: 1500, - position: position + position: position, }); await toast.present(); diff --git a/static/usage/v6/toast/theming/angular/example_component_ts.md b/static/usage/v6/toast/theming/angular/example_component_ts.md index 62c8151b0f4..7f490b9bacc 100644 --- a/static/usage/v6/toast/theming/angular/example_component_ts.md +++ b/static/usage/v6/toast/theming/angular/example_component_ts.md @@ -17,8 +17,8 @@ export class ExampleComponent { buttons: [ { text: 'Dismiss', - role: 'cancel' - } + role: 'cancel', + }, ], }); diff --git a/static/usage/v6/toast/theming/angular/global_css.md b/static/usage/v6/toast/theming/angular/global_css.md index 4d261622074..70ef6f5cfd6 100644 --- a/static/usage/v6/toast/theming/angular/global_css.md +++ b/static/usage/v6/toast/theming/angular/global_css.md @@ -1,10 +1,10 @@ ```css ion-toast.custom-toast { - --background: #F4F4FA; + --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; } @@ -14,4 +14,4 @@ ion-toast.custom-toast::part(button) { color: #030207; font-size: 15px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v6/toast/theming/javascript.md b/static/usage/v6/toast/theming/javascript.md index b540eccaaf7..06a4f5d7b09 100644 --- a/static/usage/v6/toast/theming/javascript.md +++ b/static/usage/v6/toast/theming/javascript.md @@ -10,8 +10,8 @@ buttons: [ { text: 'Dismiss', - role: 'cancel' - } + role: 'cancel', + }, ], }); @@ -21,11 +21,11 @@ ``` diff --git a/static/usage/v7/accordion/customization/theming/react/main_css.md b/static/usage/v7/accordion/customization/theming/react/main_css.md index 6054219017a..141236c6633 100644 --- a/static/usage/v7/accordion/customization/theming/react/main_css.md +++ b/static/usage/v7/accordion/customization/theming/react/main_css.md @@ -1,9 +1,9 @@ ```css :root { --ion-color-rose: #fecdd3; - --ion-color-rose-rgb: 254,205,211; + --ion-color-rose-rgb: 254, 205, 211; --ion-color-rose-contrast: #000000; - --ion-color-rose-contrast-rgb: 0,0,0; + --ion-color-rose-contrast-rgb: 0, 0, 0; --ion-color-rose-shade: #e0b4ba; --ion-color-rose-tint: #fed2d7; } @@ -17,7 +17,7 @@ --ion-color-tint: var(--ion-color-rose-tint); } -div[slot="content"] { - background: rgba(var(--ion-color-rose-rgb), 0.25) +div[slot='content'] { + background: rgba(var(--ion-color-rose-rgb), 0.25); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/accordion/customization/theming/react/main_tsx.md b/static/usage/v7/accordion/customization/theming/react/main_tsx.md index 348576ae0fe..ecc51a9e15b 100644 --- a/static/usage/v7/accordion/customization/theming/react/main_tsx.md +++ b/static/usage/v7/accordion/customization/theming/react/main_tsx.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; import './main.css'; diff --git a/static/usage/v7/accordion/customization/theming/vue.md b/static/usage/v7/accordion/customization/theming/vue.md index cf55542e739..c049c4b89d8 100644 --- a/static/usage/v7/accordion/customization/theming/vue.md +++ b/static/usage/v7/accordion/customization/theming/vue.md @@ -5,62 +5,51 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v7/accordion/readonly/group/angular.md b/static/usage/v7/accordion/readonly/group/angular.md index 99c084f8064..4ebf8c55e4e 100644 --- a/static/usage/v7/accordion/readonly/group/angular.md +++ b/static/usage/v7/accordion/readonly/group/angular.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v7/accordion/readonly/group/javascript.md b/static/usage/v7/accordion/readonly/group/javascript.md index 27f216fb4f9..d511ea5ff0b 100644 --- a/static/usage/v7/accordion/readonly/group/javascript.md +++ b/static/usage/v7/accordion/readonly/group/javascript.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v7/accordion/readonly/group/react.md b/static/usage/v7/accordion/readonly/group/react.md index 5383b732d96..2f26afde9ea 100644 --- a/static/usage/v7/accordion/readonly/group/react.md +++ b/static/usage/v7/accordion/readonly/group/react.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v7/accordion/readonly/group/vue.md b/static/usage/v7/accordion/readonly/group/vue.md index aa6a662a802..0de1be3fe91 100644 --- a/static/usage/v7/accordion/readonly/group/vue.md +++ b/static/usage/v7/accordion/readonly/group/vue.md @@ -5,44 +5,33 @@ First Accordion -
- First Content -
+
First Content
Second Accordion -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 diff --git a/static/usage/v7/accordion/readonly/individual/angular.md b/static/usage/v7/accordion/readonly/individual/angular.md index 7f9f8f5bb2e..94013b9d07d 100644 --- a/static/usage/v7/accordion/readonly/individual/angular.md +++ b/static/usage/v7/accordion/readonly/individual/angular.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion (Readonly) -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v7/accordion/readonly/individual/javascript.md b/static/usage/v7/accordion/readonly/individual/javascript.md index eec083da61a..e1f78d726db 100644 --- a/static/usage/v7/accordion/readonly/individual/javascript.md +++ b/static/usage/v7/accordion/readonly/individual/javascript.md @@ -4,25 +4,19 @@ First Accordion -
- First Content -
+
First Content
Second Accordion (Readonly) -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 ``` diff --git a/static/usage/v7/accordion/readonly/individual/react.md b/static/usage/v7/accordion/readonly/individual/react.md index 7e94d274b32..a6d28a427cd 100644 --- a/static/usage/v7/accordion/readonly/individual/react.md +++ b/static/usage/v7/accordion/readonly/individual/react.md @@ -1,11 +1,6 @@ ```tsx import React from 'react'; -import { - IonAccordion, - IonAccordionGroup, - IonItem, - IonLabel -} from '@ionic/react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v7/accordion/readonly/individual/vue.md b/static/usage/v7/accordion/readonly/individual/vue.md index 2e02ebd3679..b9a5daac451 100644 --- a/static/usage/v7/accordion/readonly/individual/vue.md +++ b/static/usage/v7/accordion/readonly/individual/vue.md @@ -5,44 +5,33 @@ First Accordion -
- First Content -
+
First Content
Second Accordion (Readonly) -
- Second Content -
+
Second Content
 Third Accordion -
- Third Content -
+
Third Content
 diff --git a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md index 381691b1f0c..78d9ddf05c8 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/inline/isOpen/angular/example_component_ts.md @@ -12,24 +12,24 @@ export class ExampleComponent { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]; - + setOpen(isOpen: boolean) { this.isActionSheetOpen = isOpen; } diff --git a/static/usage/v7/action-sheet/inline/isOpen/javascript.md b/static/usage/v7/action-sheet/inline/isOpen/javascript.md index 6557f4f4c50..2c0e3b11879 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/javascript.md +++ b/static/usage/v7/action-sheet/inline/isOpen/javascript.md @@ -10,22 +10,22 @@ text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]; actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => { diff --git a/static/usage/v7/action-sheet/inline/isOpen/react.md b/static/usage/v7/action-sheet/inline/isOpen/react.md index 5497ad7b574..aebfa63c093 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/react.md +++ b/static/usage/v7/action-sheet/inline/isOpen/react.md @@ -16,22 +16,22 @@ function Example() { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]} onDidDismiss={() => setIsOpen(false)} > diff --git a/static/usage/v7/action-sheet/inline/isOpen/vue.md b/static/usage/v7/action-sheet/inline/isOpen/vue.md index a3131033fff..9d82efd4ea1 100644 --- a/static/usage/v7/action-sheet/inline/isOpen/vue.md +++ b/static/usage/v7/action-sheet/inline/isOpen/vue.md @@ -47,7 +47,7 @@ return { actionSheetButtons, isOpen, - setOpen + setOpen, }; }, }; diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md index bf4d4580341..b2bebe5de6c 100644 --- a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md +++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_html.md @@ -1,8 +1,4 @@ ```html Open - + ``` diff --git a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md index 2834f65e3e3..f991151c4a1 100644 --- a/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/inline/trigger/angular/example_component_ts.md @@ -11,22 +11,22 @@ export class ExampleComponent { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]; } ``` diff --git a/static/usage/v7/action-sheet/inline/trigger/javascript.md b/static/usage/v7/action-sheet/inline/trigger/javascript.md index 8e769fe0ed1..d705a0162b5 100644 --- a/static/usage/v7/action-sheet/inline/trigger/javascript.md +++ b/static/usage/v7/action-sheet/inline/trigger/javascript.md @@ -1,9 +1,6 @@ ```html Open - + ``` diff --git a/static/usage/v7/action-sheet/inline/trigger/react.md b/static/usage/v7/action-sheet/inline/trigger/react.md index 6890d0be7a8..54c1793d713 100644 --- a/static/usage/v7/action-sheet/inline/trigger/react.md +++ b/static/usage/v7/action-sheet/inline/trigger/react.md @@ -14,22 +14,22 @@ function Example() { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]} > diff --git a/static/usage/v7/action-sheet/inline/trigger/vue.md b/static/usage/v7/action-sheet/inline/trigger/vue.md index 4c681af50b6..c32a8ea9bdd 100644 --- a/static/usage/v7/action-sheet/inline/trigger/vue.md +++ b/static/usage/v7/action-sheet/inline/trigger/vue.md @@ -1,11 +1,7 @@ ```html ``` diff --git a/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md b/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md index d66211df842..fc0c08e0a57 100644 --- a/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/action-sheet/theming/css-properties/react/main_tsx.md @@ -18,22 +18,22 @@ function Example() { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]} > diff --git a/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md index a23a02b2aca..d9714abb668 100644 --- a/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md +++ b/static/usage/v7/action-sheet/theming/styling/angular/example_component_ts.md @@ -12,22 +12,22 @@ export class ExampleComponent { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]; constructor() {} diff --git a/static/usage/v7/action-sheet/theming/styling/javascript.md b/static/usage/v7/action-sheet/theming/styling/javascript.md index 8d578dbb51e..90e2725d0df 100644 --- a/static/usage/v7/action-sheet/theming/styling/javascript.md +++ b/static/usage/v7/action-sheet/theming/styling/javascript.md @@ -44,22 +44,22 @@ text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]; ``` diff --git a/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md b/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md index d66211df842..fc0c08e0a57 100644 --- a/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md +++ b/static/usage/v7/action-sheet/theming/styling/react/main_tsx.md @@ -18,22 +18,22 @@ function Example() { text: 'Delete', role: 'destructive', data: { - action: 'delete' - } + action: 'delete', + }, }, { text: 'Share', data: { - action: 'share' - } + action: 'share', + }, }, { text: 'Cancel', role: 'cancel', data: { - action: 'cancel' - } - } + action: 'cancel', + }, + }, ]} > diff --git a/static/usage/v7/alert/buttons/angular/example_component_html.md b/static/usage/v7/alert/buttons/angular/example_component_html.md index bd9fb37882c..5db8454f7b2 100644 --- a/static/usage/v7/alert/buttons/angular/example_component_html.md +++ b/static/usage/v7/alert/buttons/angular/example_component_html.md @@ -8,4 +8,4 @@ >

{{ handlerMessage }}

{{ roleMessage }}

-``` \ No newline at end of file +``` diff --git a/static/usage/v7/alert/buttons/angular/example_component_ts.md b/static/usage/v7/alert/buttons/angular/example_component_ts.md index 89b76aaed6a..e3038179e13 100644 --- a/static/usage/v7/alert/buttons/angular/example_component_ts.md +++ b/static/usage/v7/alert/buttons/angular/example_component_ts.md @@ -13,13 +13,17 @@ export class ExampleComponent { { text: 'Cancel', role: 'cancel', - handler: () => { this.handlerMessage = 'Alert canceled'; } + handler: () => { + this.handlerMessage = 'Alert canceled'; + }, }, { text: 'OK', role: 'confirm', - handler: () => { this.handlerMessage = 'Alert confirmed'; } - } + handler: () => { + this.handlerMessage = 'Alert confirmed'; + }, + }, ]; setResult(ev) { diff --git a/static/usage/v7/alert/buttons/javascript.md b/static/usage/v7/alert/buttons/javascript.md index 6f70843e204..292a5d30c2f 100644 --- a/static/usage/v7/alert/buttons/javascript.md +++ b/static/usage/v7/alert/buttons/javascript.md @@ -13,13 +13,17 @@ { text: 'Cancel', role: 'cancel', - handler: () => { handlerOutput.innerText = 'Alert canceled'; } + handler: () => { + handlerOutput.innerText = 'Alert canceled'; + }, }, { text: 'OK', role: 'confirm', - handler: () => { handlerOutput.innerText = 'Alert confirmed'; } - } + handler: () => { + handlerOutput.innerText = 'Alert confirmed'; + }, + }, ]; alert.addEventListener('ionAlertDidDismiss', (ev) => { diff --git a/static/usage/v7/alert/buttons/vue.md b/static/usage/v7/alert/buttons/vue.md index 50cf42bb5a3..cd126758598 100644 --- a/static/usage/v7/alert/buttons/vue.md +++ b/static/usage/v7/alert/buttons/vue.md @@ -40,13 +40,13 @@ const setResult = (ev: CustomEvent) => { roleMessage.value = `Dismissed with role: ${ev.detail.role}`; - } + }; return { handlerMessage, roleMessage, alertButtons, - setResult + setResult, }; }, }; diff --git a/static/usage/v7/alert/customization/angular/example_component_html.md b/static/usage/v7/alert/customization/angular/example_component_html.md index 0da962b2489..762d3c21d89 100644 --- a/static/usage/v7/alert/customization/angular/example_component_html.md +++ b/static/usage/v7/alert/customization/angular/example_component_html.md @@ -1,9 +1,4 @@ ```html Click Me - + ``` diff --git a/static/usage/v7/alert/customization/angular/global_css.md b/static/usage/v7/alert/customization/angular/global_css.md index c4d1f859c34..c84c1456e58 100644 --- a/static/usage/v7/alert/customization/angular/global_css.md +++ b/static/usage/v7/alert/customization/angular/global_css.md @@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm { } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); } .ios button.alert-button.alert-button-cancel { @@ -30,4 +30,4 @@ button.alert-button.alert-button-confirm { border-bottom-right-radius: 13px; border-top-right-radius: 13px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/alert/customization/javascript.md b/static/usage/v7/alert/customization/javascript.md index f57e9958bfb..a3c31a1b432 100644 --- a/static/usage/v7/alert/customization/javascript.md +++ b/static/usage/v7/alert/customization/javascript.md @@ -8,12 +8,12 @@ alert.buttons = [ { text: 'No', - cssClass: 'alert-button-cancel' + cssClass: 'alert-button-cancel', }, { text: 'Yes', - cssClass: 'alert-button-confirm' - } + cssClass: 'alert-button-confirm', + }, ]; @@ -36,7 +36,7 @@ } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); } .ios button.alert-button.alert-button-cancel { diff --git a/static/usage/v7/alert/customization/react/main_css.md b/static/usage/v7/alert/customization/react/main_css.md index c4d1f859c34..c84c1456e58 100644 --- a/static/usage/v7/alert/customization/react/main_css.md +++ b/static/usage/v7/alert/customization/react/main_css.md @@ -17,7 +17,7 @@ button.alert-button.alert-button-confirm { } .ios .custom-alert button.alert-button { - border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2) + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); } .ios button.alert-button.alert-button-cancel { @@ -30,4 +30,4 @@ button.alert-button.alert-button-confirm { border-bottom-right-radius: 13px; border-top-right-radius: 13px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/alert/customization/vue.md b/static/usage/v7/alert/customization/vue.md index 7bd279bd0c1..c526c93de8d 100644 --- a/static/usage/v7/alert/customization/vue.md +++ b/static/usage/v7/alert/customization/vue.md @@ -1,12 +1,7 @@ ```html ``` diff --git a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md index fec220f8ecc..0ae990d9a50 100644 --- a/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md +++ b/static/usage/v7/alert/inputs/text-inputs/angular/example_component_html.md @@ -6,4 +6,4 @@ [buttons]="alertButtons" [inputs]="alertInputs" > -``` \ No newline at end of file +``` diff --git a/static/usage/v7/alert/inputs/text-inputs/javascript.md b/static/usage/v7/alert/inputs/text-inputs/javascript.md index c75afba0a15..bbbd043c5e7 100644 --- a/static/usage/v7/alert/inputs/text-inputs/javascript.md +++ b/static/usage/v7/alert/inputs/text-inputs/javascript.md @@ -8,24 +8,24 @@ alert.buttons = ['OK']; alert.inputs = [ { - placeholder: 'Name' + placeholder: 'Name', }, { placeholder: 'Nickname (max 8 characters)', attributes: { - maxlength: 8 - } + maxlength: 8, + }, }, { type: 'number', placeholder: 'Age', min: 1, - max: 100 + max: 100, }, { type: 'textarea', - placeholder: 'A little about yourself' - } + placeholder: 'A little about yourself', + }, ]; ``` diff --git a/static/usage/v7/alert/presenting/controller/angular/example_component_html.md b/static/usage/v7/alert/presenting/controller/angular/example_component_html.md index e484d6c912d..183dd98719d 100644 --- a/static/usage/v7/alert/presenting/controller/angular/example_component_html.md +++ b/static/usage/v7/alert/presenting/controller/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Click Me -``` \ No newline at end of file +``` diff --git a/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md index 6e4c36ec85b..504cb5b4863 100644 --- a/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md +++ b/static/usage/v7/alert/presenting/isOpen/angular/example_component_html.md @@ -8,4 +8,4 @@ [buttons]="alertButtons" (didDismiss)="setOpen(false)" > -``` \ No newline at end of file +``` diff --git a/static/usage/v7/alert/presenting/isOpen/javascript.md b/static/usage/v7/alert/presenting/isOpen/javascript.md index f48b512c452..21f310c1904 100644 --- a/static/usage/v7/alert/presenting/isOpen/javascript.md +++ b/static/usage/v7/alert/presenting/isOpen/javascript.md @@ -1,10 +1,6 @@ ```html Click Me - + ``` diff --git a/static/usage/v7/avatar/item/vue.md b/static/usage/v7/avatar/item/vue.md index 315af034426..5a9ddea4499 100644 --- a/static/usage/v7/avatar/item/vue.md +++ b/static/usage/v7/avatar/item/vue.md @@ -13,7 +13,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar, IonItem, IonLabel } + components: { IonAvatar, IonItem, IonLabel }, }); ``` diff --git a/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md b/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md index f04d7f8fbe3..180b8998a3f 100644 --- a/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/avatar/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonAvatar } from '@ionic/react'; diff --git a/static/usage/v7/avatar/theming/css-properties/vue.md b/static/usage/v7/avatar/theming/css-properties/vue.md index affb7ccdecb..32237336a1c 100644 --- a/static/usage/v7/avatar/theming/css-properties/vue.md +++ b/static/usage/v7/avatar/theming/css-properties/vue.md @@ -10,7 +10,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonAvatar } + components: { IonAvatar }, }); diff --git a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md index 3c39508e72c..b2cda11d2a8 100644 --- a/static/usage/v7/back-button/basic/angular/page_two_component_ts.md +++ b/static/usage/v7/back-button/basic/angular/page_two_component_ts.md @@ -18,7 +18,5 @@ import { Component } from '@angular/core'; `, }) -export class PageTwoComponent { - -} +export class PageTwoComponent {} ``` diff --git a/static/usage/v7/back-button/basic/vue/page_two_vue.md b/static/usage/v7/back-button/basic/vue/page_two_vue.md index 1192ca2936c..e26a6f13562 100644 --- a/static/usage/v7/back-button/basic/vue/page_two_vue.md +++ b/static/usage/v7/back-button/basic/vue/page_two_vue.md @@ -18,7 +18,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue'; export default { - components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } + components: { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar }, }; ``` diff --git a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md index 31f76ac219a..05a1bd64d79 100644 --- a/static/usage/v7/back-button/custom/angular/page_two_component_ts.md +++ b/static/usage/v7/back-button/custom/angular/page_two_component_ts.md @@ -18,7 +18,5 @@ import { Component } from '@angular/core'; `, }) -export class PageTwoComponent { - -} +export class PageTwoComponent {} ``` diff --git a/static/usage/v7/back-button/custom/vue/page_two_vue.md b/static/usage/v7/back-button/custom/vue/page_two_vue.md index 05de62654cb..4667abeced5 100644 --- a/static/usage/v7/back-button/custom/vue/page_two_vue.md +++ b/static/usage/v7/back-button/custom/vue/page_two_vue.md @@ -21,8 +21,8 @@ export default { components: { IonHeader, IonTitle, IonToolbar, IonContent, IonButtons, IonBackButton }, setup() { - return { caretBack } - } + return { caretBack }; + }, }; ``` diff --git a/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md b/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md index 950e96b4e80..cf47682b14d 100644 --- a/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/badge/theming/css-properties/angular/example_component_css.md @@ -5,4 +5,4 @@ ion-badge { --padding-end: 20px; --padding-start: 20px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/badge/theming/css-properties/react/main_css.md b/static/usage/v7/badge/theming/css-properties/react/main_css.md index 950e96b4e80..cf47682b14d 100644 --- a/static/usage/v7/badge/theming/css-properties/react/main_css.md +++ b/static/usage/v7/badge/theming/css-properties/react/main_css.md @@ -5,4 +5,4 @@ ion-badge { --padding-end: 20px; --padding-start: 20px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md index 76a545d6a8e..926479c1e85 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md @@ -7,4 +7,4 @@ Film 35 mm -``` \ No newline at end of file +``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md index f88b8a6e322..fdd63471ed4 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/expand-on-click/vue.md @@ -18,14 +18,14 @@ components: { IonBreadcrumb, IonBreadcrumbs }, data() { return { - maxBreadcrumbs: 4 - } + maxBreadcrumbs: 4, + }; }, methods: { expandBreadcrumbs() { this.maxBreadcrumbs = undefined; - } - } + }, + }, }); ``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md index 2c5ee51a9b7..e3c0462a148 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md @@ -22,4 +22,4 @@ -``` \ No newline at end of file +``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md index 007fb9a4a1e..1d22085a5b1 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/javascript.md @@ -18,12 +18,12 @@ const popover = document.querySelector('ion-popover'); const popoverList = document.querySelector('ion-popover ion-list'); - breadcrumbs.addEventListener('ionCollapsedClick', e => { + breadcrumbs.addEventListener('ionCollapsedClick', (e) => { let listHTML = ``; e.detail.collapsedBreadcrumbs.forEach((breadcrumb, i) => { listHTML += ` ${breadcrumb.textContent} @@ -36,6 +36,6 @@ popover.isOpen = true; }); - popover.addEventListener('didDismiss', () => popover.isOpen = false); + popover.addEventListener('didDismiss', () => (popover.isOpen = false)); ``` diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md index 72cc6520e3c..66ccc22bfe3 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/react.md @@ -27,10 +27,7 @@ function Example() { {collapsedBreadcrumbs.map((breadcrumb, i) => ( - + {breadcrumb.textContent} ))} diff --git a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md index 318f64f8547..54368fa7213 100644 --- a/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md +++ b/static/usage/v7/breadcrumbs/collapsing-items/popover-on-click/vue.md @@ -24,25 +24,25 @@ -``` \ No newline at end of file +``` diff --git a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md index f836a85455f..f0849705aab 100644 --- a/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md +++ b/static/usage/v7/breadcrumbs/icons/custom-separators/vue.md @@ -29,7 +29,7 @@ components: { IonBreadcrumb, IonBreadcrumbs, IonIcon }, setup() { return { arrowForwardCircle }; - } + }, }); ``` diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md index 338babc9c79..3dc7c4640ad 100644 --- a/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/breadcrumbs/theming/css-properties/angular/example_component_css.md @@ -4,4 +4,4 @@ ion-breadcrumb { --color-active: rgb(150, 112, 220); --color-hover: rgb(103, 61, 180); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md index 338babc9c79..3dc7c4640ad 100644 --- a/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md +++ b/static/usage/v7/breadcrumbs/theming/css-properties/react/main_css.md @@ -4,4 +4,4 @@ ion-breadcrumb { --color-active: rgb(150, 112, 220); --color-hover: rgb(103, 61, 180); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/button/basic/angular.md b/static/usage/v7/button/basic/angular.md index 44ba5831426..d313d7dcd23 100644 --- a/static/usage/v7/button/basic/angular.md +++ b/static/usage/v7/button/basic/angular.md @@ -1,4 +1,3 @@ ```html -Default -Disabled +Default Disabled ``` diff --git a/static/usage/v7/button/basic/javascript.md b/static/usage/v7/button/basic/javascript.md index 8296ef7f42a..e298f5a1246 100644 --- a/static/usage/v7/button/basic/javascript.md +++ b/static/usage/v7/button/basic/javascript.md @@ -1,4 +1,3 @@ ```html -Default -Disabled +Default Disabled ``` diff --git a/static/usage/v7/button/expand/angular.md b/static/usage/v7/button/expand/angular.md index ca3f5093b84..b49d2c767ae 100644 --- a/static/usage/v7/button/expand/angular.md +++ b/static/usage/v7/button/expand/angular.md @@ -1,4 +1,3 @@ ```html -Block -Full +Block Full ``` diff --git a/static/usage/v7/button/expand/javascript.md b/static/usage/v7/button/expand/javascript.md index ca3f5093b84..b49d2c767ae 100644 --- a/static/usage/v7/button/expand/javascript.md +++ b/static/usage/v7/button/expand/javascript.md @@ -1,4 +1,3 @@ ```html -Block -Full +Block Full ``` diff --git a/static/usage/v7/button/icons/vue.md b/static/usage/v7/button/icons/vue.md index 356fc5617dc..03d8648c878 100644 --- a/static/usage/v7/button/icons/vue.md +++ b/static/usage/v7/button/icons/vue.md @@ -23,8 +23,8 @@ export default defineComponent({ components: { IonButton, IonIcon }, setup() { - return { star } - } + return { star }; + }, }); ``` diff --git a/static/usage/v7/button/shape/angular.md b/static/usage/v7/button/shape/angular.md index 97ed756261a..a37193d9013 100644 --- a/static/usage/v7/button/shape/angular.md +++ b/static/usage/v7/button/shape/angular.md @@ -1,4 +1,3 @@ ```html -Default -Round +Default Round ``` diff --git a/static/usage/v7/button/shape/javascript.md b/static/usage/v7/button/shape/javascript.md index 97ed756261a..a37193d9013 100644 --- a/static/usage/v7/button/shape/javascript.md +++ b/static/usage/v7/button/shape/javascript.md @@ -1,4 +1,3 @@ ```html -Default -Round +Default Round ``` diff --git a/static/usage/v7/button/theming/css-properties/react/main_css.md b/static/usage/v7/button/theming/css-properties/react/main_css.md index 1fba4c49972..fa985cbe82f 100644 --- a/static/usage/v7/button/theming/css-properties/react/main_css.md +++ b/static/usage/v7/button/theming/css-properties/react/main_css.md @@ -1,4 +1,3 @@ - ```css ion-button { --background: #93e9be; diff --git a/static/usage/v7/button/theming/css-properties/react/main_tsx.md b/static/usage/v7/button/theming/css-properties/react/main_tsx.md index 6e0cddd9709..c8c432e1b9c 100644 --- a/static/usage/v7/button/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/button/theming/css-properties/react/main_tsx.md @@ -5,9 +5,7 @@ import { IonButton } from '@ionic/react'; import './main.css'; function Example() { - return ( - Custom Button - ); + return Custom Button; } export default Example; ``` diff --git a/static/usage/v7/buttons/types/angular.md b/static/usage/v7/buttons/types/angular.md index 183c70105b1..9562dbb3b47 100644 --- a/static/usage/v7/buttons/types/angular.md +++ b/static/usage/v7/buttons/types/angular.md @@ -1,15 +1,11 @@ ```html - - Favorite - + Favorite Default Buttons - - Delete - + Delete diff --git a/static/usage/v7/buttons/types/javascript.md b/static/usage/v7/buttons/types/javascript.md index 183c70105b1..9562dbb3b47 100644 --- a/static/usage/v7/buttons/types/javascript.md +++ b/static/usage/v7/buttons/types/javascript.md @@ -1,15 +1,11 @@ ```html - - Favorite - + Favorite Default Buttons - - Delete - + Delete diff --git a/static/usage/v7/buttons/types/react.md b/static/usage/v7/buttons/types/react.md index 8d3b3edfe9e..01baca04d74 100644 --- a/static/usage/v7/buttons/types/react.md +++ b/static/usage/v7/buttons/types/react.md @@ -8,15 +8,11 @@ function Example() { <> - - Favorite - + Favorite Default Buttons - - Delete - + Delete @@ -86,5 +82,4 @@ function Example() { ); } export default Example; - ``` diff --git a/static/usage/v7/buttons/types/vue.md b/static/usage/v7/buttons/types/vue.md index 9a101caa402..60b04a067da 100644 --- a/static/usage/v7/buttons/types/vue.md +++ b/static/usage/v7/buttons/types/vue.md @@ -2,15 +2,11 @@ diff --git a/static/usage/v7/card/theming/css-properties/react/main_tsx.md b/static/usage/v7/card/theming/css-properties/react/main_tsx.md index 251b18ce24d..a5b4ce3af35 100644 --- a/static/usage/v7/card/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/card/theming/css-properties/react/main_tsx.md @@ -12,9 +12,7 @@ function Example() { Card Subtitle - - Here's a small text description for the card content. Nothing more, nothing less. - + Here's a small text description for the card content. Nothing more, nothing less. ); } diff --git a/static/usage/v7/checkbox/basic/react.md b/static/usage/v7/checkbox/basic/react.md index 2d4159efbb2..b2fbcb695d3 100644 --- a/static/usage/v7/checkbox/basic/react.md +++ b/static/usage/v7/checkbox/basic/react.md @@ -3,9 +3,7 @@ import React from 'react'; import { IonCheckbox } from '@ionic/react'; function Example() { - return ( - I agree to the terms and conditions - ); + return I agree to the terms and conditions; } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v7/checkbox/basic/vue.md b/static/usage/v7/checkbox/basic/vue.md index 9bc17fdb9ea..fc8c1ff781f 100644 --- a/static/usage/v7/checkbox/basic/vue.md +++ b/static/usage/v7/checkbox/basic/vue.md @@ -8,7 +8,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonCheckbox } + components: { IonCheckbox }, }); ``` diff --git a/static/usage/v7/checkbox/indeterminate/react.md b/static/usage/v7/checkbox/indeterminate/react.md index 117af56bc35..9cfba0ca72b 100644 --- a/static/usage/v7/checkbox/indeterminate/react.md +++ b/static/usage/v7/checkbox/indeterminate/react.md @@ -3,9 +3,7 @@ import React from 'react'; import { IonCheckbox } from '@ionic/react'; function Example() { - return ( - Indeterminate checkbox - ); + return Indeterminate checkbox; } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v7/checkbox/indeterminate/vue.md b/static/usage/v7/checkbox/indeterminate/vue.md index 5d08480d9a3..ff87a637bd6 100644 --- a/static/usage/v7/checkbox/indeterminate/vue.md +++ b/static/usage/v7/checkbox/indeterminate/vue.md @@ -8,7 +8,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonCheckbox } + components: { IonCheckbox }, }); ``` diff --git a/static/usage/v7/checkbox/justify/angular.md b/static/usage/v7/checkbox/justify/angular.md index f253722afec..9205434ceaa 100644 --- a/static/usage/v7/checkbox/justify/angular.md +++ b/static/usage/v7/checkbox/justify/angular.md @@ -3,11 +3,11 @@ Packed at the Start of Line - + Packed at the End of Line - + Space Between Label and Control diff --git a/static/usage/v7/checkbox/justify/javascript.md b/static/usage/v7/checkbox/justify/javascript.md index f253722afec..9205434ceaa 100644 --- a/static/usage/v7/checkbox/justify/javascript.md +++ b/static/usage/v7/checkbox/justify/javascript.md @@ -3,11 +3,11 @@ Packed at the Start of Line - + Packed at the End of Line - + Space Between Label and Control diff --git a/static/usage/v7/checkbox/justify/react.md b/static/usage/v7/checkbox/justify/react.md index fd92e9f1fa0..667449c7808 100644 --- a/static/usage/v7/checkbox/justify/react.md +++ b/static/usage/v7/checkbox/justify/react.md @@ -8,11 +8,11 @@ function Example() { Packed at the Start of Line - + Packed at the End of Line - + Space Between Label and Control diff --git a/static/usage/v7/checkbox/justify/vue.md b/static/usage/v7/checkbox/justify/vue.md index 5659a826bc6..ed34f0dcdc7 100644 --- a/static/usage/v7/checkbox/justify/vue.md +++ b/static/usage/v7/checkbox/justify/vue.md @@ -4,11 +4,11 @@ Packed at the Start of Line - + Packed at the End of Line - + Space Between Label and Control diff --git a/static/usage/v7/checkbox/label-placement/react.md b/static/usage/v7/checkbox/label-placement/react.md index 42520178b60..7c9bf728131 100644 --- a/static/usage/v7/checkbox/label-placement/react.md +++ b/static/usage/v7/checkbox/label-placement/react.md @@ -6,13 +6,13 @@ function Example() { return ( <> Label at the Start - +
- + Label at the End - +
- + Fixed Width Label ); diff --git a/static/usage/v7/checkbox/label-placement/vue.md b/static/usage/v7/checkbox/label-placement/vue.md index 31697dd3694..942149628cd 100644 --- a/static/usage/v7/checkbox/label-placement/vue.md +++ b/static/usage/v7/checkbox/label-placement/vue.md @@ -1,13 +1,13 @@ ```html diff --git a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md index f5f63bf8c22..5889591fd18 100644 --- a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_css.md @@ -8,4 +8,4 @@ ion-checkbox::part(container) { border-radius: 6px; border: 2px solid #6815ec; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md index 29d3d419b61..ba23decbdba 100644 --- a/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/checkbox/theming/css-properties/angular/example_component_html.md @@ -1,3 +1,3 @@ ```html Themed checkbox -``` \ No newline at end of file +``` diff --git a/static/usage/v7/checkbox/theming/css-properties/javascript.md b/static/usage/v7/checkbox/theming/css-properties/javascript.md index a247dee9a04..90a415bf906 100644 --- a/static/usage/v7/checkbox/theming/css-properties/javascript.md +++ b/static/usage/v7/checkbox/theming/css-properties/javascript.md @@ -6,7 +6,7 @@ --size: 32px; --checkbox-background-checked: #6815ec; } - + ion-checkbox::part(container) { border-radius: 6px; border: 2px solid #6815ec; diff --git a/static/usage/v7/checkbox/theming/css-properties/react/main_css.md b/static/usage/v7/checkbox/theming/css-properties/react/main_css.md index f5f63bf8c22..5889591fd18 100644 --- a/static/usage/v7/checkbox/theming/css-properties/react/main_css.md +++ b/static/usage/v7/checkbox/theming/css-properties/react/main_css.md @@ -8,4 +8,4 @@ ion-checkbox::part(container) { border-radius: 6px; border: 2px solid #6815ec; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md b/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md index 2fb46fb7ba5..8408e5825f2 100644 --- a/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/checkbox/theming/css-properties/react/main_tsx.md @@ -5,9 +5,7 @@ import { IonCheckbox } from '@ionic/react'; import './main.css'; function Example() { - return ( - Themed checkbox - ); + return Themed checkbox; } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v7/checkbox/theming/css-properties/vue.md b/static/usage/v7/checkbox/theming/css-properties/vue.md index 7c4f5fd698b..802cfa40b25 100644 --- a/static/usage/v7/checkbox/theming/css-properties/vue.md +++ b/static/usage/v7/checkbox/theming/css-properties/vue.md @@ -8,7 +8,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonCheckbox } + components: { IonCheckbox }, }); @@ -17,7 +17,7 @@ --size: 32px; --checkbox-background-checked: #6815ec; } - + ion-checkbox::part(container) { border-radius: 6px; border: 2px solid #6815ec; diff --git a/static/usage/v7/content/fixed/angular.md b/static/usage/v7/content/fixed/angular.md index 178d8338f25..82cb3007125 100644 --- a/static/usage/v7/content/fixed/angular.md +++ b/static/usage/v7/content/fixed/angular.md @@ -5,10 +5,50 @@ 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.

+

+ 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/v7/content/fixed/angular/example_component_css.md b/static/usage/v7/content/fixed/angular/example_component_css.md index e5931e4d94f..1146da9a4b1 100644 --- a/static/usage/v7/content/fixed/angular/example_component_css.md +++ b/static/usage/v7/content/fixed/angular/example_component_css.md @@ -1,5 +1,5 @@ ```css -ion-button[slot="fixed"] { +ion-button[slot='fixed'] { top: 50%; right: 20px; } diff --git a/static/usage/v7/content/fixed/angular/example_component_html.md b/static/usage/v7/content/fixed/angular/example_component_html.md index 178d8338f25..82cb3007125 100644 --- a/static/usage/v7/content/fixed/angular/example_component_html.md +++ b/static/usage/v7/content/fixed/angular/example_component_html.md @@ -5,10 +5,50 @@ 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.

+

+ 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/v7/content/fixed/javascript.md b/static/usage/v7/content/fixed/javascript.md index 2a577f1d76a..8613ca29a0c 100644 --- a/static/usage/v7/content/fixed/javascript.md +++ b/static/usage/v7/content/fixed/javascript.md @@ -5,15 +5,55 @@ 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.

+

+ 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/v7/content/fullscreen/react/main_css.md b/static/usage/v7/content/fullscreen/react/main_css.md index a62d625ae0a..69fa48ad49e 100644 --- a/static/usage/v7/content/fullscreen/react/main_css.md +++ b/static/usage/v7/content/fullscreen/react/main_css.md @@ -1,5 +1,5 @@ ```css ion-toolbar { - --opacity: .5 + --opacity: 0.5; } ``` diff --git a/static/usage/v7/content/fullscreen/react/main_tsx.md b/static/usage/v7/content/fullscreen/react/main_tsx.md index ca324631897..7302c484489 100644 --- a/static/usage/v7/content/fullscreen/react/main_tsx.md +++ b/static/usage/v7/content/fullscreen/react/main_tsx.md @@ -9,25 +9,61 @@ function Example() { <> - - Header - + 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.

+

+ 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 - + Footer diff --git a/static/usage/v7/content/fullscreen/vue.md b/static/usage/v7/content/fullscreen/vue.md index e4bd0c3a59f..3de93600da7 100644 --- a/static/usage/v7/content/fullscreen/vue.md +++ b/static/usage/v7/content/fullscreen/vue.md @@ -2,25 +2,61 @@ @@ -36,7 +72,7 @@ ``` diff --git a/static/usage/v7/content/header-footer/angular.md b/static/usage/v7/content/header-footer/angular.md index 4a177d1d58f..35a9aadc4c1 100644 --- a/static/usage/v7/content/header-footer/angular.md +++ b/static/usage/v7/content/header-footer/angular.md @@ -1,9 +1,7 @@ ```html - - Header - + Header @@ -18,9 +16,7 @@ - - Footer - + Footer ``` diff --git a/static/usage/v7/content/header-footer/javascript.md b/static/usage/v7/content/header-footer/javascript.md index 4a177d1d58f..35a9aadc4c1 100644 --- a/static/usage/v7/content/header-footer/javascript.md +++ b/static/usage/v7/content/header-footer/javascript.md @@ -1,9 +1,7 @@ ```html - - Header - + Header @@ -18,9 +16,7 @@ - - Footer - + Footer ``` diff --git a/static/usage/v7/content/header-footer/react.md b/static/usage/v7/content/header-footer/react.md index 4ffff834f2a..e075e96cd81 100644 --- a/static/usage/v7/content/header-footer/react.md +++ b/static/usage/v7/content/header-footer/react.md @@ -7,9 +7,7 @@ function Example() { <> - - Header - + Header @@ -24,9 +22,7 @@ function Example() { - - Footer - + Footer diff --git a/static/usage/v7/content/header-footer/vue.md b/static/usage/v7/content/header-footer/vue.md index 8bd052a6460..dc914aee8f5 100644 --- a/static/usage/v7/content/header-footer/vue.md +++ b/static/usage/v7/content/header-footer/vue.md @@ -2,9 +2,7 @@ diff --git a/static/usage/v7/content/scroll-events/angular/example_component_html.md b/static/usage/v7/content/scroll-events/angular/example_component_html.md index a1c3aac558f..4a66edad40a 100644 --- a/static/usage/v7/content/scroll-events/angular/example_component_html.md +++ b/static/usage/v7/content/scroll-events/angular/example_component_html.md @@ -6,13 +6,54 @@ (ionScrollStart)="handleScrollStart()" (ionScroll)="handleScroll($any($event))" (ionScrollEnd)="handleScrollEnd()" - class="ion-padding"> + class="ion-padding" +>

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.

+

+ 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/v7/content/scroll-events/javascript.md b/static/usage/v7/content/scroll-events/javascript.md index 5cc4e537dd6..ed54f080780 100644 --- a/static/usage/v7/content/scroll-events/javascript.md +++ b/static/usage/v7/content/scroll-events/javascript.md @@ -2,11 +2,51 @@

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.

+

+ 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/v7/content/scroll-methods/angular/example_component_html.md b/static/usage/v7/content/scroll-methods/angular/example_component_html.md index ffa8c913e3e..e585b97e78d 100644 --- a/static/usage/v7/content/scroll-methods/angular/example_component_html.md +++ b/static/usage/v7/content/scroll-methods/angular/example_component_html.md @@ -4,11 +4,51 @@ 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.

+

+ 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/v7/content/scroll-methods/javascript.md b/static/usage/v7/content/scroll-methods/javascript.md index b8f3bb1e13e..a53fbc7767b 100644 --- a/static/usage/v7/content/scroll-methods/javascript.md +++ b/static/usage/v7/content/scroll-methods/javascript.md @@ -4,11 +4,51 @@ 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.

+

+ 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/v7/content/scroll-methods/react.md b/static/usage/v7/content/scroll-methods/react.md index 9526a8884a4..1d2d105e984 100644 --- a/static/usage/v7/content/scroll-methods/react.md +++ b/static/usage/v7/content/scroll-methods/react.md @@ -21,15 +21,59 @@ function Example() {

Click on the buttons to scroll the content.

- Scroll to Bottom + + 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.

+

+ 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 + + Scroll to Top + ); } diff --git a/static/usage/v7/content/scroll-methods/vue.md b/static/usage/v7/content/scroll-methods/vue.md index c3e63abb721..5ac6e8ee1fc 100644 --- a/static/usage/v7/content/scroll-methods/vue.md +++ b/static/usage/v7/content/scroll-methods/vue.md @@ -5,11 +5,51 @@ 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.

+

+ 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 @@ -32,7 +72,7 @@ // goes to the top instead of instantly this.$refs.content.$el.scrollToTop(500); }, - } + }, }); ``` diff --git a/static/usage/v7/datetime-button/basic/react.md b/static/usage/v7/datetime-button/basic/react.md index 90eaaba82af..62529cdb75f 100644 --- a/static/usage/v7/datetime-button/basic/react.md +++ b/static/usage/v7/datetime-button/basic/react.md @@ -5,7 +5,7 @@ function Example() { return ( <> - + diff --git a/static/usage/v7/datetime-button/basic/vue.md b/static/usage/v7/datetime-button/basic/vue.md index 1272d768b88..a595c27e409 100644 --- a/static/usage/v7/datetime-button/basic/vue.md +++ b/static/usage/v7/datetime-button/basic/vue.md @@ -1,7 +1,7 @@ ```html diff --git a/static/usage/v7/grid/offset-responsive/react/main_tsx.md b/static/usage/v7/grid/offset-responsive/react/main_tsx.md index 482f957cde8..8721fbfc523 100644 --- a/static/usage/v7/grid/offset-responsive/react/main_tsx.md +++ b/static/usage/v7/grid/offset-responsive/react/main_tsx.md @@ -31,8 +31,12 @@ function Example() { Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up - 1 - 2 + + 1 + + + 2 + diff --git a/static/usage/v7/grid/offset/react/main_tsx.md b/static/usage/v7/grid/offset/react/main_tsx.md index 99add2f8a44..e24f5a47918 100644 --- a/static/usage/v7/grid/offset/react/main_tsx.md +++ b/static/usage/v7/grid/offset/react/main_tsx.md @@ -7,7 +7,9 @@ import './main.css'; function Example() { return ( <> - Column 2 has offset set to "3" + + Column 2 has offset set to "3" + 1 @@ -16,7 +18,9 @@ function Example() { - Column 5 has offset set to "2" + + Column 5 has offset set to "2" + 1 @@ -27,10 +31,14 @@ function Example() { - Column 1 has offset set to "4" + + Column 1 has offset set to "4" + - 1 + + 1 + 2 diff --git a/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md b/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md index 3f6e2879e08..85955f3ebd2 100644 --- a/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md +++ b/static/usage/v7/grid/push-pull-responsive/react/main_tsx.md @@ -28,12 +28,24 @@ function Example() { Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up - 1 - 2 - 3 - 4 - 5 - 6 + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + diff --git a/static/usage/v7/grid/push-pull/angular/example_component_html.md b/static/usage/v7/grid/push-pull/angular/example_component_html.md index cb8190ef9e9..a93c12fef81 100644 --- a/static/usage/v7/grid/push-pull/angular/example_component_html.md +++ b/static/usage/v7/grid/push-pull/angular/example_component_html.md @@ -8,7 +8,10 @@ -Column 2 has push set to "4" and column 3 & 4 have pull set to "2" +Column 2 has push set to "4" and column 3 & 4 have pull set to + "2" 1 diff --git a/static/usage/v7/grid/push-pull/javascript.md b/static/usage/v7/grid/push-pull/javascript.md index 6dca0e83ec4..b911da1791b 100644 --- a/static/usage/v7/grid/push-pull/javascript.md +++ b/static/usage/v7/grid/push-pull/javascript.md @@ -8,7 +8,10 @@ -Column 2 has push set to "4" and column 3 & 4 have pull set to "2" +Column 2 has push set to "4" and column 3 & 4 have pull set to + "2" 1 diff --git a/static/usage/v7/grid/push-pull/react/main_tsx.md b/static/usage/v7/grid/push-pull/react/main_tsx.md index 6b087b72b77..aa7c1d1c809 100644 --- a/static/usage/v7/grid/push-pull/react/main_tsx.md +++ b/static/usage/v7/grid/push-pull/react/main_tsx.md @@ -7,7 +7,10 @@ import './main.css'; function Example() { return ( <> - Column 1 has push set to "4" and column 2 has pull set to "4" + + Column 1 has push set to "4" and column 2 has pull set to{' '} + "4" + 1 @@ -16,7 +19,10 @@ function Example() { - Column 2 has push set to "4" and column 3 & 4 have pull set to "2" + + Column 2 has push set to "4" and column 3 & 4 have pull set to{' '} + "2" + 1 @@ -28,11 +34,18 @@ function Example() { - Column 1 has push set to "3" and column 2 has pull set to "9" + + Column 1 has push set to "3" and column 2 has pull set to{' '} + "9" + - 1 - 2 + + 1 + + + 2 + diff --git a/static/usage/v7/grid/push-pull/vue.md b/static/usage/v7/grid/push-pull/vue.md index 2775067f7a7..b5146e95e0e 100644 --- a/static/usage/v7/grid/push-pull/vue.md +++ b/static/usage/v7/grid/push-pull/vue.md @@ -1,6 +1,9 @@ ```html diff --git a/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md b/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md index b54ba9d2afa..742d531cb9d 100644 --- a/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md +++ b/static/usage/v7/header/custom-scroll-target/angular/example_component_html.md @@ -9,24 +9,61 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/custom-scroll-target/react/main_tsx.md b/static/usage/v7/header/custom-scroll-target/react/main_tsx.md index bf6d13f26ec..923ea715aa7 100644 --- a/static/usage/v7/header/custom-scroll-target/react/main_tsx.md +++ b/static/usage/v7/header/custom-scroll-target/react/main_tsx.md @@ -17,24 +17,63 @@ function Example() {

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/custom-scroll-target/vue.md b/static/usage/v7/header/custom-scroll-target/vue.md index 73565d9ab18..84aac1c56fe 100644 --- a/static/usage/v7/header/custom-scroll-target/vue.md +++ b/static/usage/v7/header/custom-scroll-target/vue.md @@ -10,24 +10,61 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/fade/angular.md b/static/usage/v7/header/fade/angular.md index 72e55ffc58c..473ad54c8da 100644 --- a/static/usage/v7/header/fade/angular.md +++ b/static/usage/v7/header/fade/angular.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/fade/javascript.md b/static/usage/v7/header/fade/javascript.md index 72e55ffc58c..473ad54c8da 100644 --- a/static/usage/v7/header/fade/javascript.md +++ b/static/usage/v7/header/fade/javascript.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/fade/react.md b/static/usage/v7/header/fade/react.md index 453f32c4db4..085bea0296d 100644 --- a/static/usage/v7/header/fade/react.md +++ b/static/usage/v7/header/fade/react.md @@ -14,24 +14,61 @@ function Example() {

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/fade/vue.md b/static/usage/v7/header/fade/vue.md index 44327bf809c..264038c103c 100644 --- a/static/usage/v7/header/fade/vue.md +++ b/static/usage/v7/header/fade/vue.md @@ -9,24 +9,61 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/translucent/angular.md b/static/usage/v7/header/translucent/angular.md index f2779c7d5c9..657a88bf066 100644 --- a/static/usage/v7/header/translucent/angular.md +++ b/static/usage/v7/header/translucent/angular.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/translucent/javascript.md b/static/usage/v7/header/translucent/javascript.md index e03deeda2a5..5c0048c019c 100644 --- a/static/usage/v7/header/translucent/javascript.md +++ b/static/usage/v7/header/translucent/javascript.md @@ -8,23 +8,60 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/translucent/react.md b/static/usage/v7/header/translucent/react.md index 862211d839b..def835913c3 100644 --- a/static/usage/v7/header/translucent/react.md +++ b/static/usage/v7/header/translucent/react.md @@ -14,24 +14,61 @@ function Example() {

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/header/translucent/vue.md b/static/usage/v7/header/translucent/vue.md index 34a4c740014..26370009d44 100644 --- a/static/usage/v7/header/translucent/vue.md +++ b/static/usage/v7/header/translucent/vue.md @@ -9,24 +9,61 @@

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.

+ 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.

+ 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.

+ 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.

+ 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.

+ 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/v7/icon/basic/index.md b/static/usage/v7/icon/basic/index.md index c26fa6e35ac..f766b6112ac 100644 --- a/static/usage/v7/icon/basic/index.md +++ b/static/usage/v7/icon/basic/index.md @@ -5,9 +5,4 @@ import react from './react.md'; import vue from './vue.md'; import angular from './angular.md'; - + diff --git a/static/usage/v7/img/basic/angular.md b/static/usage/v7/img/basic/angular.md index ce4d3d19e0d..61e27f8b9d6 100644 --- a/static/usage/v7/img/basic/angular.md +++ b/static/usage/v7/img/basic/angular.md @@ -1,3 +1,6 @@ ```html - + ``` diff --git a/static/usage/v7/img/basic/javascript.md b/static/usage/v7/img/basic/javascript.md index ce4d3d19e0d..61e27f8b9d6 100644 --- a/static/usage/v7/img/basic/javascript.md +++ b/static/usage/v7/img/basic/javascript.md @@ -1,3 +1,6 @@ ```html - + ``` diff --git a/static/usage/v7/img/basic/react.md b/static/usage/v7/img/basic/react.md index 04c4c086b15..0236cc28976 100644 --- a/static/usage/v7/img/basic/react.md +++ b/static/usage/v7/img/basic/react.md @@ -4,7 +4,10 @@ import { IonImg } from '@ionic/react'; function Example() { return ( - + ); } export default Example; diff --git a/static/usage/v7/img/basic/vue.md b/static/usage/v7/img/basic/vue.md index d8cb2cd2d7f..db4d74618ef 100644 --- a/static/usage/v7/img/basic/vue.md +++ b/static/usage/v7/img/basic/vue.md @@ -1,6 +1,9 @@ ```html ``` diff --git a/static/usage/v7/input/fill/index.md b/static/usage/v7/input/fill/index.md index 10fcef1cb28..7a702b37d08 100644 --- a/static/usage/v7/input/fill/index.md +++ b/static/usage/v7/input/fill/index.md @@ -5,7 +5,7 @@ import react from './react.md'; import vue from './vue.md'; import angular from './angular.md'; - - +
- + ); diff --git a/static/usage/v7/input/fill/vue.md b/static/usage/v7/input/fill/vue.md index f17fd6e151d..d1f2e440b05 100644 --- a/static/usage/v7/input/fill/vue.md +++ b/static/usage/v7/input/fill/vue.md @@ -1,9 +1,9 @@ ```html diff --git a/static/usage/v7/input/filtering/angular/example_component_html.md b/static/usage/v7/input/filtering/angular/example_component_html.md index da2f4776bd2..31ddc03f197 100644 --- a/static/usage/v7/input/filtering/angular/example_component_html.md +++ b/static/usage/v7/input/filtering/angular/example_component_html.md @@ -2,7 +2,7 @@ + }} + src="usage/v7/input/filtering/demo.html" +/> diff --git a/static/usage/v7/input/filtering/javascript.md b/static/usage/v7/input/filtering/javascript.md index b70d42c6dd1..37af94dd426 100644 --- a/static/usage/v7/input/filtering/javascript.md +++ b/static/usage/v7/input/filtering/javascript.md @@ -10,7 +10,7 @@ input.addEventListener('ionInput', (ev) => { const value = ev.target.value; // Removes non alphanumeric characters - input.value = value.replace(/[^a-zA-Z0-9]+/g,''); + input.value = value.replace(/[^a-zA-Z0-9]+/g, ''); }); -``` \ No newline at end of file +``` diff --git a/static/usage/v7/input/filtering/react.md b/static/usage/v7/input/filtering/react.md index 7218199a3d2..1722f8ad9af 100644 --- a/static/usage/v7/input/filtering/react.md +++ b/static/usage/v7/input/filtering/react.md @@ -3,36 +3,31 @@ import React, { useState, useRef } from 'react'; import { IonInput, IonItem, IonList } from '@ionic/react'; function Example() { - const [inputModel, setInputModel ] = useState(''); + 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,''); - + 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 ( - + ); diff --git a/static/usage/v7/input/filtering/vue.md b/static/usage/v7/input/filtering/vue.md index dd93e9bb2c7..a95e5dcc843 100644 --- a/static/usage/v7/input/filtering/vue.md +++ b/static/usage/v7/input/filtering/vue.md @@ -3,7 +3,7 @@ { const value = ev.target!.value; - + // Removes non alphanumeric characters - const filteredValue = value.replace(/[^a-zA-Z0-9]+/g,''); - + const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, ''); + /** * Update both the state variable and * the component to keep them in sync. */ inputModel.value = filteredValue; - + const inputCmp = ionInputEl.value; if (inputCmp !== undefined) { inputCmp.$el.value = filteredValue; } - } - + }; + return { ionInputEl, inputModel, onInput }; - } + }, }); ``` diff --git a/static/usage/v7/input/helper-error/angular.md b/static/usage/v7/input/helper-error/angular.md index 9f75f6b070f..ba5030c0026 100644 --- a/static/usage/v7/input/helper-error/angular.md +++ b/static/usage/v7/input/helper-error/angular.md @@ -6,7 +6,7 @@ labelPlacement="floating" helperText="Enter a valid email" errorText="Invalid email" - ngModel + ngModel email > ``` diff --git a/static/usage/v7/input/helper-error/javascript.md b/static/usage/v7/input/helper-error/javascript.md index 16cd161715d..55d306aa225 100644 --- a/static/usage/v7/input/helper-error/javascript.md +++ b/static/usage/v7/input/helper-error/javascript.md @@ -15,7 +15,9 @@ input.addEventListener('ionBlur', () => markTouched()); const validateEmail = (email) => { - 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])?)*$/); + 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) => { @@ -24,13 +26,13 @@ input.classList.remove('ion-valid'); input.classList.remove('ion-invalid'); - if (value === "") return; + if (value === '') return; validateEmail(value) ? input.classList.add('ion-valid') : input.classList.add('ion-invalid'); - } + }; const markTouched = () => { input.classList.add('ion-touched'); - } + }; ``` diff --git a/static/usage/v7/input/helper-error/vue.md b/static/usage/v7/input/helper-error/vue.md index 33934b31ae2..ce801d04ac7 100644 --- a/static/usage/v7/input/helper-error/vue.md +++ b/static/usage/v7/input/helper-error/vue.md @@ -21,7 +21,9 @@ components: { IonInput }, methods: { validateEmail(email) { - 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])?)*$/); + 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])?)*$/ + ); }, validate(ev) { @@ -38,8 +40,8 @@ }, markTouched() { - this.$refs.input.$el.classList.add('ion-touched') - } + this.$refs.input.$el.classList.add('ion-touched'); + }, }, }); diff --git a/static/usage/v7/input/label-placement/angular.md b/static/usage/v7/input/label-placement/angular.md index 1257ff9c641..151adb55b5d 100644 --- a/static/usage/v7/input/label-placement/angular.md +++ b/static/usage/v7/input/label-placement/angular.md @@ -3,15 +3,15 @@ - + - + - + diff --git a/static/usage/v7/input/label-placement/index.md b/static/usage/v7/input/label-placement/index.md index ffc814dbec5..a3f377c079a 100644 --- a/static/usage/v7/input/label-placement/index.md +++ b/static/usage/v7/input/label-placement/index.md @@ -5,4 +5,9 @@ import react from './react.md'; import vue from './vue.md'; import angular from './angular.md'; - + diff --git a/static/usage/v7/input/label-placement/javascript.md b/static/usage/v7/input/label-placement/javascript.md index e08cf249e14..f9c79fc46ae 100644 --- a/static/usage/v7/input/label-placement/javascript.md +++ b/static/usage/v7/input/label-placement/javascript.md @@ -3,15 +3,15 @@ - + - + - + diff --git a/static/usage/v7/input/label-placement/react.md b/static/usage/v7/input/label-placement/react.md index 59a819eaab4..aa4f1b3c484 100644 --- a/static/usage/v7/input/label-placement/react.md +++ b/static/usage/v7/input/label-placement/react.md @@ -8,15 +8,15 @@ function Example() { - + - + - + diff --git a/static/usage/v7/input/label-placement/vue.md b/static/usage/v7/input/label-placement/vue.md index 782e77971c6..8854647965d 100644 --- a/static/usage/v7/input/label-placement/vue.md +++ b/static/usage/v7/input/label-placement/vue.md @@ -4,15 +4,15 @@ - + - + - + diff --git a/static/usage/v7/input/migration/index.md b/static/usage/v7/input/migration/index.md index e28bf81ce00..34e3ccaece5 100644 --- a/static/usage/v7/input/migration/index.md +++ b/static/usage/v7/input/migration/index.md @@ -55,8 +55,8 @@ import TabItem from '@theme/TabItem'; @@ -113,8 +113,8 @@ import TabItem from '@theme/TabItem'; @@ -171,8 +171,8 @@ import TabItem from '@theme/TabItem'; {/* After */} {/* - Metadata such as counters and helper text should not - be used when an input is in an item/list. If you need to + 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. */} @@ -229,8 +229,8 @@ import TabItem from '@theme/TabItem'; @@ -245,4 +245,4 @@ import TabItem from '@theme/TabItem'; ``` -```` \ No newline at end of file +```` diff --git a/static/usage/v7/input/theming/css-properties/angular/example_component_css.md b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md index 154e20ad0cc..3aa7fddda86 100644 --- a/static/usage/v7/input/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/input/theming/css-properties/angular/example_component_css.md @@ -3,7 +3,7 @@ ion-input.custom { --background: #373737; --color: #fff; --placeholder-color: #ddd; - --placeholder-opacity: .8; + --placeholder-opacity: 0.8; --padding-bottom: 10px; --padding-end: 10px; diff --git a/static/usage/v7/input/theming/css-properties/angular/example_component_html.md b/static/usage/v7/input/theming/css-properties/angular/example_component_html.md index c3ffd4077fe..243bb91401b 100644 --- a/static/usage/v7/input/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/input/theming/css-properties/angular/example_component_html.md @@ -1,8 +1,8 @@ ```html - + - + - + - + diff --git a/static/usage/v7/input/types/javascript.md b/static/usage/v7/input/types/javascript.md index 6506b2ca271..ff696b22cd8 100644 --- a/static/usage/v7/input/types/javascript.md +++ b/static/usage/v7/input/types/javascript.md @@ -4,19 +4,19 @@ - + - + - + - + diff --git a/static/usage/v7/input/types/react.md b/static/usage/v7/input/types/react.md index 7a90e30e81a..e5534ec2e1e 100644 --- a/static/usage/v7/input/types/react.md +++ b/static/usage/v7/input/types/react.md @@ -8,19 +8,19 @@ function Example() { - + - + - + - + diff --git a/static/usage/v7/input/types/vue.md b/static/usage/v7/input/types/vue.md index 2415bc71ea5..752f60c183f 100644 --- a/static/usage/v7/input/types/vue.md +++ b/static/usage/v7/input/types/vue.md @@ -4,19 +4,19 @@ - + - + - + - + diff --git a/static/usage/v7/item-divider/basic/angular.md b/static/usage/v7/item-divider/basic/angular.md index d74e5b05549..35dccbdbc88 100644 --- a/static/usage/v7/item-divider/basic/angular.md +++ b/static/usage/v7/item-divider/basic/angular.md @@ -2,9 +2,7 @@ - - Section A - + Section A @@ -20,9 +18,7 @@ - - Section B - + Section B diff --git a/static/usage/v7/item-divider/basic/javascript.md b/static/usage/v7/item-divider/basic/javascript.md index d74e5b05549..35dccbdbc88 100644 --- a/static/usage/v7/item-divider/basic/javascript.md +++ b/static/usage/v7/item-divider/basic/javascript.md @@ -2,9 +2,7 @@ - - Section A - + Section A @@ -20,9 +18,7 @@ - - Section B - + Section B diff --git a/static/usage/v7/item-divider/basic/react.md b/static/usage/v7/item-divider/basic/react.md index 289f1727c8d..14ad85b1c82 100644 --- a/static/usage/v7/item-divider/basic/react.md +++ b/static/usage/v7/item-divider/basic/react.md @@ -7,9 +7,7 @@ function Example() { - - Section A - + Section A @@ -25,9 +23,7 @@ function Example() { - - Section B - + Section B diff --git a/static/usage/v7/item-divider/basic/vue.md b/static/usage/v7/item-divider/basic/vue.md index 95f26ebc027..22c9565c278 100644 --- a/static/usage/v7/item-divider/basic/vue.md +++ b/static/usage/v7/item-divider/basic/vue.md @@ -3,9 +3,7 @@ - - Section A - + Section A @@ -21,9 +19,7 @@ - - Section B - + Section B diff --git a/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md index b3b1bb4da25..172fdad114f 100644 --- a/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/item-divider/theming/css-properties/angular/example_component_html.md @@ -1,7 +1,5 @@ ```html - - Item Divider - + Item Divider ``` diff --git a/static/usage/v7/item-divider/theming/css-properties/javascript.md b/static/usage/v7/item-divider/theming/css-properties/javascript.md index 6622b6d7e3f..0c0cdc26f55 100644 --- a/static/usage/v7/item-divider/theming/css-properties/javascript.md +++ b/static/usage/v7/item-divider/theming/css-properties/javascript.md @@ -12,8 +12,6 @@ - - Item Divider - + Item Divider ``` diff --git a/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md index 6cd8d464d7e..b3083033541 100644 --- a/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/item-divider/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonItemDivider, IonLabel } from '@ionic/react'; @@ -8,9 +7,7 @@ import './main.css'; function Example() { return ( - - Item Divider - + Item Divider ); } diff --git a/static/usage/v7/item-divider/theming/css-properties/vue.md b/static/usage/v7/item-divider/theming/css-properties/vue.md index 3589bcc7cd4..950e3775d83 100644 --- a/static/usage/v7/item-divider/theming/css-properties/vue.md +++ b/static/usage/v7/item-divider/theming/css-properties/vue.md @@ -1,9 +1,7 @@ ```html @@ -12,7 +10,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonItemDivider } + components: { IonItemDivider }, }); diff --git a/static/usage/v7/item-group/sliding-items/angular.md b/static/usage/v7/item-group/sliding-items/angular.md index a451b58c9c4..2708fde7acc 100644 --- a/static/usage/v7/item-group/sliding-items/angular.md +++ b/static/usage/v7/item-group/sliding-items/angular.md @@ -1,94 +1,66 @@ ```html - - Fruits - + Fruits - - Grapes - + Grapes - - Favorite - + Favorite - - Apples - + Apples - - Favorite - + Favorite - - Bananas - + Bananas - - Favorite - + Favorite - - Vegetables - + Vegetables - - Carrots - + Carrots - - Favorite - + Favorite - - Broccoli - + Broccoli - - Favorite - + Favorite - - Celery - + Celery - - Favorite - + Favorite diff --git a/static/usage/v7/item-group/sliding-items/javascript.md b/static/usage/v7/item-group/sliding-items/javascript.md index a451b58c9c4..2708fde7acc 100644 --- a/static/usage/v7/item-group/sliding-items/javascript.md +++ b/static/usage/v7/item-group/sliding-items/javascript.md @@ -1,94 +1,66 @@ ```html - - Fruits - + Fruits - - Grapes - + Grapes - - Favorite - + Favorite - - Apples - + Apples - - Favorite - + Favorite - - Bananas - + Bananas - - Favorite - + Favorite - - Vegetables - + Vegetables - - Carrots - + Carrots - - Favorite - + Favorite - - Broccoli - + Broccoli - - Favorite - + Favorite - - Celery - + Celery - - Favorite - + Favorite diff --git a/static/usage/v7/item-group/sliding-items/react.md b/static/usage/v7/item-group/sliding-items/react.md index 2ca4d7ca380..716935f065c 100644 --- a/static/usage/v7/item-group/sliding-items/react.md +++ b/static/usage/v7/item-group/sliding-items/react.md @@ -1,100 +1,80 @@ ```tsx import React from 'react'; -import { IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react'; +import { + IonItem, + IonItemDivider, + IonItemGroup, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, +} from '@ionic/react'; function Example() { return ( <> - - Fruits - + Fruits - - Grapes - + Grapes - - Favorite - + Favorite - - Apples - + Apples - - Favorite - + Favorite - - Bananas - + Bananas - - Favorite - + Favorite - - Vegetables - + Vegetables - - Carrots - + Carrots - - Favorite - + Favorite - - Broccoli - + Broccoli - - Favorite - + Favorite - - Celery - + Celery - - Favorite - + Favorite diff --git a/static/usage/v7/item-group/sliding-items/vue.md b/static/usage/v7/item-group/sliding-items/vue.md index 5110ba1abed..43109034598 100644 --- a/static/usage/v7/item-group/sliding-items/vue.md +++ b/static/usage/v7/item-group/sliding-items/vue.md @@ -2,101 +2,81 @@ ``` diff --git a/static/usage/v7/item/basic/angular.md b/static/usage/v7/item/basic/angular.md index f0b13250493..b975f267d90 100644 --- a/static/usage/v7/item/basic/angular.md +++ b/static/usage/v7/item/basic/angular.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/item/basic/javascript.md b/static/usage/v7/item/basic/javascript.md index f0b13250493..b975f267d90 100644 --- a/static/usage/v7/item/basic/javascript.md +++ b/static/usage/v7/item/basic/javascript.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/item/basic/react.md b/static/usage/v7/item/basic/react.md index dfed86af19e..6154239cbf1 100644 --- a/static/usage/v7/item/basic/react.md +++ b/static/usage/v7/item/basic/react.md @@ -11,16 +11,14 @@ function Example() { - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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, + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v7/item/basic/vue.md b/static/usage/v7/item/basic/vue.md index 479e90196a4..37b32f7c2ca 100644 --- a/static/usage/v7/item/basic/vue.md +++ b/static/usage/v7/item/basic/vue.md @@ -6,17 +6,15 @@ - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/item/buttons/angular.md b/static/usage/v7/item/buttons/angular.md index bf7069f48f7..4d77ff8b9d8 100644 --- a/static/usage/v7/item/buttons/angular.md +++ b/static/usage/v7/item/buttons/angular.md @@ -1,12 +1,8 @@ ```html - - Start - + Start Default Buttons - - End - + End @@ -33,14 +29,8 @@ Button Sizes - - Small - - - Default - - - Large - + Small + Default + Large ``` diff --git a/static/usage/v7/item/buttons/javascript.md b/static/usage/v7/item/buttons/javascript.md index bf7069f48f7..4d77ff8b9d8 100644 --- a/static/usage/v7/item/buttons/javascript.md +++ b/static/usage/v7/item/buttons/javascript.md @@ -1,12 +1,8 @@ ```html - - Start - + Start Default Buttons - - End - + End @@ -33,14 +29,8 @@ Button Sizes - - Small - - - Default - - - Large - + Small + Default + Large ``` diff --git a/static/usage/v7/item/buttons/react.md b/static/usage/v7/item/buttons/react.md index 8776e5215fb..fda29c7f11a 100644 --- a/static/usage/v7/item/buttons/react.md +++ b/static/usage/v7/item/buttons/react.md @@ -7,13 +7,9 @@ function Example() { return ( <> - - Start - + Start Default Buttons - - End - + End diff --git a/static/usage/v7/item/buttons/vue.md b/static/usage/v7/item/buttons/vue.md index 02de38e58ab..8680f189472 100644 --- a/static/usage/v7/item/buttons/vue.md +++ b/static/usage/v7/item/buttons/vue.md @@ -1,13 +1,9 @@ ```html @@ -54,8 +44,8 @@ export default defineComponent({ components: { IonButton, IonIcon, IonItem, IonLabel }, setup() { - return { home, navigate, star } - } + return { home, navigate, star }; + }, }); ``` diff --git a/static/usage/v7/item/detail-arrows/vue.md b/static/usage/v7/item/detail-arrows/vue.md index d341c004f15..54010095652 100644 --- a/static/usage/v7/item/detail-arrows/vue.md +++ b/static/usage/v7/item/detail-arrows/vue.md @@ -51,3 +51,4 @@ }, }); +``` diff --git a/static/usage/v7/item/icons/angular.md b/static/usage/v7/item/icons/angular.md index 49a1cc707e3..b81a463e004 100644 --- a/static/usage/v7/item/icons/angular.md +++ b/static/usage/v7/item/icons/angular.md @@ -1,29 +1,21 @@ ```html - - Default Icon - + Default Icon - - Large Icon - + Large Icon - - Small Icon - + Small Icon - - Default Icon - + Default Icon ``` diff --git a/static/usage/v7/item/icons/javascript.md b/static/usage/v7/item/icons/javascript.md index 49a1cc707e3..b81a463e004 100644 --- a/static/usage/v7/item/icons/javascript.md +++ b/static/usage/v7/item/icons/javascript.md @@ -1,29 +1,21 @@ ```html - - Default Icon - + Default Icon - - Large Icon - + Large Icon - - Small Icon - + Small Icon - - Default Icon - + Default Icon ``` diff --git a/static/usage/v7/item/icons/react.md b/static/usage/v7/item/icons/react.md index a5fc0ae6629..09496398f7f 100644 --- a/static/usage/v7/item/icons/react.md +++ b/static/usage/v7/item/icons/react.md @@ -7,31 +7,23 @@ function Example() { return ( <> - - Default Icon - + Default Icon - - Large Icon - + Large Icon - - Small Icon - + Small Icon - - Default Icon - + Default Icon ); diff --git a/static/usage/v7/item/icons/vue.md b/static/usage/v7/item/icons/vue.md index 82e09004fbe..a89e5e6aad0 100644 --- a/static/usage/v7/item/icons/vue.md +++ b/static/usage/v7/item/icons/vue.md @@ -1,31 +1,23 @@ ```html @@ -37,8 +29,8 @@ export default defineComponent({ components: { IonButton, IonIcon, IonItem, IonLabel }, setup() { - return { informationCircle, star } - } + return { informationCircle, star }; + }, }); ``` diff --git a/static/usage/v7/item/lines/angular.md b/static/usage/v7/item/lines/angular.md index b0700ae1a1b..022573e9d9d 100644 --- a/static/usage/v7/item/lines/angular.md +++ b/static/usage/v7/item/lines/angular.md @@ -1,8 +1,6 @@ ```html - - Default Item Lines - + Default Item Lines diff --git a/static/usage/v7/item/lines/javascript.md b/static/usage/v7/item/lines/javascript.md index b0700ae1a1b..022573e9d9d 100644 --- a/static/usage/v7/item/lines/javascript.md +++ b/static/usage/v7/item/lines/javascript.md @@ -1,8 +1,6 @@ ```html - - Default Item Lines - + Default Item Lines diff --git a/static/usage/v7/item/lines/react.md b/static/usage/v7/item/lines/react.md index c5e2cf3f55c..dbe79214349 100644 --- a/static/usage/v7/item/lines/react.md +++ b/static/usage/v7/item/lines/react.md @@ -7,9 +7,7 @@ function Example() { return ( <> - - Default Item Lines - + Default Item Lines diff --git a/static/usage/v7/item/lines/vue.md b/static/usage/v7/item/lines/vue.md index 37c6c432ca4..fb855de221f 100644 --- a/static/usage/v7/item/lines/vue.md +++ b/static/usage/v7/item/lines/vue.md @@ -1,9 +1,7 @@ ```html diff --git a/static/usage/v7/label/item/angular.md b/static/usage/v7/label/item/angular.md index be252b899a0..54f24979079 100644 --- a/static/usage/v7/label/item/angular.md +++ b/static/usage/v7/label/item/angular.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/label/item/javascript.md b/static/usage/v7/label/item/javascript.md index be252b899a0..54f24979079 100644 --- a/static/usage/v7/label/item/javascript.md +++ b/static/usage/v7/label/item/javascript.md @@ -5,17 +5,15 @@ - 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 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/label/item/react.md b/static/usage/v7/label/item/react.md index 88e4f904deb..f5bdf5a5d1b 100644 --- a/static/usage/v7/label/item/react.md +++ b/static/usage/v7/label/item/react.md @@ -11,16 +11,14 @@ function Example() { - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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, + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur adipiscing elit. diff --git a/static/usage/v7/label/item/vue.md b/static/usage/v7/label/item/vue.md index 99ec3ea3d40..fe4cd48904a 100644 --- a/static/usage/v7/label/item/vue.md +++ b/static/usage/v7/label/item/vue.md @@ -6,17 +6,15 @@ - Multi-line text that should ellipsis when it is too long - to fit on one line. Lorem ipsum dolor sit amet, + 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. + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. diff --git a/static/usage/v7/loading/controller/javascript.md b/static/usage/v7/loading/controller/javascript.md index c5507d123af..f54756c396b 100644 --- a/static/usage/v7/loading/controller/javascript.md +++ b/static/usage/v7/loading/controller/javascript.md @@ -2,13 +2,13 @@ Show Loading ``` diff --git a/static/usage/v7/loading/controller/react.md b/static/usage/v7/loading/controller/react.md index 16280a1e91a..06dc3413bab 100644 --- a/static/usage/v7/loading/controller/react.md +++ b/static/usage/v7/loading/controller/react.md @@ -2,7 +2,6 @@ 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 @@ -11,12 +10,14 @@ function Example() { // eslint-disable-next-line @typescript-eslint/no-unused-vars const [present, dismiss] = useIonLoading(); return ( - { - present({ - message: 'Dismissing after 3 seconds...', - duration: 3000 - }) - }}> + { + present({ + message: 'Dismissing after 3 seconds...', + duration: 3000, + }); + }} + > Show Loading ); diff --git a/static/usage/v7/loading/controller/vue.md b/static/usage/v7/loading/controller/vue.md index 17b65b33af0..e80b61cc8b3 100644 --- a/static/usage/v7/loading/controller/vue.md +++ b/static/usage/v7/loading/controller/vue.md @@ -13,14 +13,14 @@ const showLoading = async () => { const loading = await loadingController.create({ message: 'Dismissing after 3 seconds...', - duration: 3000 + duration: 3000, }); - + loading.present(); - } - - return { showLoading } - } + }; + + return { showLoading }; + }, }); ``` diff --git a/static/usage/v7/loading/theming/angular/global_css.md b/static/usage/v7/loading/theming/angular/global_css.md index 16bf7af3522..af410626c52 100644 --- a/static/usage/v7/loading/theming/angular/global_css.md +++ b/static/usage/v7/loading/theming/angular/global_css.md @@ -5,4 +5,4 @@ ion-loading.custom-loading { color: #1c6dff; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/loading/theming/react/main_css.md b/static/usage/v7/loading/theming/react/main_css.md index 16bf7af3522..af410626c52 100644 --- a/static/usage/v7/loading/theming/react/main_css.md +++ b/static/usage/v7/loading/theming/react/main_css.md @@ -5,4 +5,4 @@ ion-loading.custom-loading { color: #1c6dff; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/menu/basic/angular.md b/static/usage/v7/menu/basic/angular.md index c169f35f1f4..0fb5465519f 100644 --- a/static/usage/v7/menu/basic/angular.md +++ b/static/usage/v7/menu/basic/angular.md @@ -16,8 +16,6 @@ Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu.
``` diff --git a/static/usage/v7/menu/basic/javascript.md b/static/usage/v7/menu/basic/javascript.md index 570c03c9512..afb14178ea4 100644 --- a/static/usage/v7/menu/basic/javascript.md +++ b/static/usage/v7/menu/basic/javascript.md @@ -16,8 +16,6 @@ Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu.
``` diff --git a/static/usage/v7/menu/basic/react.md b/static/usage/v7/menu/basic/react.md index 71abc258aef..671dba8a744 100644 --- a/static/usage/v7/menu/basic/react.md +++ b/static/usage/v7/menu/basic/react.md @@ -1,15 +1,6 @@ ```tsx import React from 'react'; -import { - IonButtons, - IonContent, - IonHeader, - IonMenu, - IonMenuButton, - IonPage, - IonTitle, - IonToolbar -} from '@ionic/react'; +import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react'; function Example() { return ( <> @@ -30,9 +21,7 @@ function Example() { Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu. ); diff --git a/static/usage/v7/menu/basic/vue.md b/static/usage/v7/menu/basic/vue.md index d6e3d73d648..531c50678f8 100644 --- a/static/usage/v7/menu/basic/vue.md +++ b/static/usage/v7/menu/basic/vue.md @@ -17,23 +17,12 @@ Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu. diff --git a/static/usage/v7/menu/theming/angular/example_component_css.md b/static/usage/v7/menu/theming/angular/example_component_css.md index 839c8f41df5..1bba1305577 100644 --- a/static/usage/v7/menu/theming/angular/example_component_css.md +++ b/static/usage/v7/menu/theming/angular/example_component_css.md @@ -8,4 +8,4 @@ ion-menu::part(container) { box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/menu/theming/angular/example_component_html.md b/static/usage/v7/menu/theming/angular/example_component_html.md index f630cf4c378..f46819d3e99 100644 --- a/static/usage/v7/menu/theming/angular/example_component_html.md +++ b/static/usage/v7/menu/theming/angular/example_component_html.md @@ -17,9 +17,7 @@ Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu.
``` diff --git a/static/usage/v7/menu/theming/javascript.md b/static/usage/v7/menu/theming/javascript.md index a147ef68090..6df6026c610 100644 --- a/static/usage/v7/menu/theming/javascript.md +++ b/static/usage/v7/menu/theming/javascript.md @@ -17,9 +17,7 @@ Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu.
diff --git a/static/usage/v7/menu/theming/react/main_css.md b/static/usage/v7/menu/theming/react/main_css.md index 839c8f41df5..1bba1305577 100644 --- a/static/usage/v7/menu/theming/react/main_css.md +++ b/static/usage/v7/menu/theming/react/main_css.md @@ -8,4 +8,4 @@ ion-menu::part(container) { box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/menu/theming/react/main_tsx.md b/static/usage/v7/menu/theming/react/main_tsx.md index c935fefb33f..c2f3d72ab2b 100644 --- a/static/usage/v7/menu/theming/react/main_tsx.md +++ b/static/usage/v7/menu/theming/react/main_tsx.md @@ -1,15 +1,6 @@ ```tsx import React from 'react'; -import { - IonButtons, - IonContent, - IonHeader, - IonMenu, - IonMenuButton, - IonPage, - IonTitle, - IonToolbar -} from '@ionic/react'; +import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react'; import './main.css'; @@ -33,9 +24,7 @@ function Example() { Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu. ); diff --git a/static/usage/v7/menu/theming/vue.md b/static/usage/v7/menu/theming/vue.md index b9d02e48b1f..27a96f00e0b 100644 --- a/static/usage/v7/menu/theming/vue.md +++ b/static/usage/v7/menu/theming/vue.md @@ -17,23 +17,12 @@ Menu - - Tap the button in the toolbar to open the menu. - + Tap the button in the toolbar to open the menu. diff --git a/static/usage/v7/menu/toggle/react.md b/static/usage/v7/menu/toggle/react.md index a940b83e4af..3428aaa42d0 100644 --- a/static/usage/v7/menu/toggle/react.md +++ b/static/usage/v7/menu/toggle/react.md @@ -1,15 +1,6 @@ ```tsx import React from 'react'; -import { - IonButton, - IonContent, - IonHeader, - IonMenu, - IonMenuToggle, - IonPage, - IonTitle, - IonToolbar -} from '@ionic/react'; +import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonPage, IonTitle, IonToolbar } from '@ionic/react'; function Example() { return ( <> @@ -22,7 +13,7 @@ function Example() { Click to close the menu - + diff --git a/static/usage/v7/menu/toggle/vue.md b/static/usage/v7/menu/toggle/vue.md index 2cc4807109e..6b723df95ad 100644 --- a/static/usage/v7/menu/toggle/vue.md +++ b/static/usage/v7/menu/toggle/vue.md @@ -27,16 +27,7 @@ diff --git a/static/usage/v7/menu/type/angular/example_component_html.md b/static/usage/v7/menu/type/angular/example_component_html.md index 7154c645660..fd995d7a32f 100644 --- a/static/usage/v7/menu/type/angular/example_component_html.md +++ b/static/usage/v7/menu/type/angular/example_component_html.md @@ -39,10 +39,11 @@ -
+ +
Click to open the menu
-``` \ No newline at end of file +``` diff --git a/static/usage/v7/menu/type/javascript.md b/static/usage/v7/menu/type/javascript.md index 24dc49cf906..c8b49975b84 100644 --- a/static/usage/v7/menu/type/javascript.md +++ b/static/usage/v7/menu/type/javascript.md @@ -39,7 +39,8 @@ -
+ +
Click to open the menu diff --git a/static/usage/v7/menu/type/react.md b/static/usage/v7/menu/type/react.md index 806e67e21a2..946707cba38 100644 --- a/static/usage/v7/menu/type/react.md +++ b/static/usage/v7/menu/type/react.md @@ -1,6 +1,6 @@ ```tsx import React, { useState } from 'react'; -import { +import { IonButton, IonContent, IonHeader, @@ -12,7 +12,7 @@ import { IonRadio, IonRadioGroup, IonTitle, - IonToolbar + IonToolbar, } from '@ionic/react'; import type { RadioGroupCustomEvent } from '@ionic/react'; @@ -30,7 +30,7 @@ function Example() { Click to close the menu - + diff --git a/static/usage/v7/menu/type/vue.md b/static/usage/v7/menu/type/vue.md index 2abcb137577..8277d7a3179 100644 --- a/static/usage/v7/menu/type/vue.md +++ b/static/usage/v7/menu/type/vue.md @@ -12,7 +12,7 @@ - +
@@ -40,7 +40,8 @@ -
+ +
Click to open the menu @@ -61,7 +62,7 @@ IonRadio, IonRadioGroup, IonTitle, - IonToolbar + IonToolbar, } from '@ionic/vue'; import { defineComponent, ref } from 'vue'; @@ -78,13 +79,13 @@ IonRadio, IonRadioGroup, IonTitle, - IonToolbar + IonToolbar, }, setup() { const menuType = ref('overlay'); - + return { menuType }; - } + }, }); ``` diff --git a/static/usage/v7/modal/custom-dialogs/react/main_tsx.md b/static/usage/v7/modal/custom-dialogs/react/main_tsx.md index b60d3f275ab..e6120a8fcc7 100644 --- a/static/usage/v7/modal/custom-dialogs/react/main_tsx.md +++ b/static/usage/v7/modal/custom-dialogs/react/main_tsx.md @@ -38,7 +38,7 @@ function Example() {

Dialog header

- + diff --git a/static/usage/v7/modal/custom-dialogs/vue.md b/static/usage/v7/modal/custom-dialogs/vue.md index f910bc061e4..57362d546fc 100644 --- a/static/usage/v7/modal/custom-dialogs/vue.md +++ b/static/usage/v7/modal/custom-dialogs/vue.md @@ -7,22 +7,22 @@ --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; } @@ -36,11 +36,11 @@ Open Custom Dialog - +

Dialog header

- + @@ -96,7 +96,7 @@ }, setup() { return { personCircle }; - } + }, }); ``` diff --git a/static/usage/v7/modal/performance/mount/angular.md b/static/usage/v7/modal/performance/mount/angular.md index 3afd202d33b..4b8bb7bc9d2 100644 --- a/static/usage/v7/modal/performance/mount/angular.md +++ b/static/usage/v7/modal/performance/mount/angular.md @@ -16,9 +16,7 @@ Modal - - This content was mounted as soon as the modal was created. - + This content was mounted as soon as the modal was created. diff --git a/static/usage/v7/modal/performance/mount/react.md b/static/usage/v7/modal/performance/mount/react.md index 5b50612291b..bb6a9c32360 100644 --- a/static/usage/v7/modal/performance/mount/react.md +++ b/static/usage/v7/modal/performance/mount/react.md @@ -1,15 +1,6 @@ ```tsx import React, { useRef } from 'react'; -import { - IonButtons, - IonButton, - IonModal, - IonHeader, - IonContent, - IonToolbar, - IonTitle, - IonPage, -} from '@ionic/react'; +import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react'; function Example() { const modal = useRef(null); @@ -34,9 +25,7 @@ function Example() { Modal - - This content was mounted as soon as the modal was created. - + This content was mounted as soon as the modal was created. diff --git a/static/usage/v7/modal/performance/mount/vue.md b/static/usage/v7/modal/performance/mount/vue.md index 515229dde25..0407ee98a4e 100644 --- a/static/usage/v7/modal/performance/mount/vue.md +++ b/static/usage/v7/modal/performance/mount/vue.md @@ -16,23 +16,13 @@ Modal - - This content was mounted as soon as the modal was created. - + This content was mounted as soon as the modal was created. ``` diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_html.md b/static/usage/v7/picker/inline/trigger/angular/example_component_html.md index af47368a129..533c4b1ac70 100644 --- a/static/usage/v7/picker/inline/trigger/angular/example_component_html.md +++ b/static/usage/v7/picker/inline/trigger/angular/example_component_html.md @@ -1,8 +1,4 @@ ```html Open - + ``` diff --git a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md index ebd914649f4..90413b31470 100644 --- a/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md +++ b/static/usage/v7/picker/inline/trigger/angular/example_component_ts.md @@ -6,36 +6,41 @@ import { Component } from '@angular/core'; 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 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' + role: 'cancel', }, { text: 'Confirm', handler: (value) => { window.alert(`You selected: ${value.languages.value}`); - } - } + }, + }, ]; } ``` diff --git a/static/usage/v7/picker/inline/trigger/javascript.md b/static/usage/v7/picker/inline/trigger/javascript.md index 2b7a20eb138..e02349631ba 100644 --- a/static/usage/v7/picker/inline/trigger/javascript.md +++ b/static/usage/v7/picker/inline/trigger/javascript.md @@ -5,36 +5,41 @@ ``` diff --git a/static/usage/v7/picker/inline/trigger/react.md b/static/usage/v7/picker/inline/trigger/react.md index ec20daef156..08506f7fb30 100644 --- a/static/usage/v7/picker/inline/trigger/react.md +++ b/static/usage/v7/picker/inline/trigger/react.md @@ -8,37 +8,40 @@ function Example() { Open { window.alert(`You selected: ${value.languages.value}`); - } - } + }, + }, ]} > diff --git a/static/usage/v7/picker/inline/trigger/vue.md b/static/usage/v7/picker/inline/trigger/vue.md index d4681ff66f6..07046c63cf7 100644 --- a/static/usage/v7/picker/inline/trigger/vue.md +++ b/static/usage/v7/picker/inline/trigger/vue.md @@ -1,11 +1,7 @@ ```html ``` diff --git a/static/usage/v7/picker/multiple-column/angular/example_component_html.md b/static/usage/v7/picker/multiple-column/angular/example_component_html.md index af47368a129..533c4b1ac70 100644 --- a/static/usage/v7/picker/multiple-column/angular/example_component_html.md +++ b/static/usage/v7/picker/multiple-column/angular/example_component_html.md @@ -1,8 +1,4 @@ ```html Open - + ``` diff --git a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md index 11cd65eb0fc..10790602bc8 100644 --- a/static/usage/v7/picker/multiple-column/angular/example_component_ts.md +++ b/static/usage/v7/picker/multiple-column/angular/example_component_ts.md @@ -6,61 +6,71 @@ import { Component } from '@angular/core'; 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 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' + role: 'cancel', }, { text: 'Confirm', handler: (value) => { window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); - } - } + }, + }, ]; } ``` diff --git a/static/usage/v7/picker/multiple-column/javascript.md b/static/usage/v7/picker/multiple-column/javascript.md index ad8e838a8c0..9196a0dc7c7 100644 --- a/static/usage/v7/picker/multiple-column/javascript.md +++ b/static/usage/v7/picker/multiple-column/javascript.md @@ -5,61 +5,71 @@ ``` diff --git a/static/usage/v7/picker/multiple-column/react.md b/static/usage/v7/picker/multiple-column/react.md index cfa6465169e..cd01f4aa199 100644 --- a/static/usage/v7/picker/multiple-column/react.md +++ b/static/usage/v7/picker/multiple-column/react.md @@ -8,62 +8,72 @@ function Example() { Open { - window.alert(`You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}`); - } - } + window.alert( + `You selected a ${value.crust.text} pizza with ${value.meat.text} and ${value.veggies.text}` + ); + }, + }, ]} > diff --git a/static/usage/v7/picker/multiple-column/vue.md b/static/usage/v7/picker/multiple-column/vue.md index df54238bf66..16251372059 100644 --- a/static/usage/v7/picker/multiple-column/vue.md +++ b/static/usage/v7/picker/multiple-column/vue.md @@ -1,11 +1,7 @@ ```html ``` diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_css.md b/static/usage/v7/popover/customization/positioning/angular/example_component_css.md index c92d80212a7..56a63480d75 100644 --- a/static/usage/v7/popover/customization/positioning/angular/example_component_css.md +++ b/static/usage/v7/popover/customization/positioning/angular/example_component_css.md @@ -9,4 +9,4 @@ ion-popover { flex-direction: column; padding: 80px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/customization/positioning/angular/example_component_html.md b/static/usage/v7/popover/customization/positioning/angular/example_component_html.md index a0036bd9ef9..d911b195f92 100644 --- a/static/usage/v7/popover/customization/positioning/angular/example_component_html.md +++ b/static/usage/v7/popover/customization/positioning/angular/example_component_html.md @@ -16,7 +16,7 @@ Side=Left, Alignment=Start - + Hello World! diff --git a/static/usage/v7/popover/customization/positioning/react/main_css.md b/static/usage/v7/popover/customization/positioning/react/main_css.md index c92d80212a7..56a63480d75 100644 --- a/static/usage/v7/popover/customization/positioning/react/main_css.md +++ b/static/usage/v7/popover/customization/positioning/react/main_css.md @@ -9,4 +9,4 @@ ion-popover { flex-direction: column; padding: 80px; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/customization/styling/angular/global_css.md b/static/usage/v7/popover/customization/styling/angular/global_css.md index 25890b90538..434a31d24d9 100644 --- a/static/usage/v7/popover/customization/styling/angular/global_css.md +++ b/static/usage/v7/popover/customization/styling/angular/global_css.md @@ -14,4 +14,4 @@ ion-popover ion-content { ion-popover::part(backdrop) { background-color: rgb(6, 14, 106); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/customization/styling/react/main_css.md b/static/usage/v7/popover/customization/styling/react/main_css.md index 25890b90538..434a31d24d9 100644 --- a/static/usage/v7/popover/customization/styling/react/main_css.md +++ b/static/usage/v7/popover/customization/styling/react/main_css.md @@ -14,4 +14,4 @@ ion-popover ion-content { ion-popover::part(backdrop) { background-color: rgb(6, 14, 106); } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/performance/mount/javascript.md b/static/usage/v7/popover/performance/mount/javascript.md index 5dd5f8a624e..297c94344f1 100644 --- a/static/usage/v7/popover/performance/mount/javascript.md +++ b/static/usage/v7/popover/performance/mount/javascript.md @@ -3,4 +3,4 @@ This content was mounted as soon as the popover was created. -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/presenting/controller/angular/example_component_html.md b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md index da857f78745..f84fbf6fd80 100644 --- a/static/usage/v7/popover/presenting/controller/angular/example_component_html.md +++ b/static/usage/v7/popover/presenting/controller/angular/example_component_html.md @@ -1,4 +1,4 @@ ```html Click Me

{{ roleMsg }}

-``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md b/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md index 74cbf83fec4..583a6dea593 100644 --- a/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md +++ b/static/usage/v7/popover/presenting/controller/angular/popover_component_html.md @@ -1,3 +1,3 @@ ```html Hello World! -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/presenting/controller/javascript.md b/static/usage/v7/popover/presenting/controller/javascript.md index 896772b276b..078514628a8 100644 --- a/static/usage/v7/popover/presenting/controller/javascript.md +++ b/static/usage/v7/popover/presenting/controller/javascript.md @@ -20,7 +20,7 @@ async function presentPopover(e) { const popover = Object.assign(document.createElement('ion-popover'), { component: 'popover-page', - event: e + event: e, }); document.body.appendChild(popover); diff --git a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md index 1bc5738c6ad..85f8bd06cad 100644 --- a/static/usage/v7/popover/presenting/controller/vue/popover_vue.md +++ b/static/usage/v7/popover/presenting/controller/vue/popover_vue.md @@ -4,12 +4,12 @@ -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md index 80201dba3d2..1d8369f31e2 100644 --- a/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md +++ b/static/usage/v7/popover/presenting/inline-isopen/angular/example_component_html.md @@ -5,4 +5,4 @@ Hello World! -``` \ No newline at end of file +``` diff --git a/static/usage/v7/popover/presenting/inline-isopen/javascript.md b/static/usage/v7/popover/presenting/inline-isopen/javascript.md index b780125ba1e..1daafed1894 100644 --- a/static/usage/v7/popover/presenting/inline-isopen/javascript.md +++ b/static/usage/v7/popover/presenting/inline-isopen/javascript.md @@ -8,11 +8,11 @@ const button = document.querySelector('ion-button'); const popover = document.querySelector('ion-popover'); - button.addEventListener('click', e => { + button.addEventListener('click', (e) => { popover.event = e; popover.isOpen = true; }); - popover.addEventListener('didDismiss', () => popover.isOpen = false); + popover.addEventListener('didDismiss', () => (popover.isOpen = false)); ``` diff --git a/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md index 56e3d3a3b09..a876a376204 100644 --- a/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md +++ b/static/usage/v7/progress-bar/buffer/angular/example_component_ts.md @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.css'] + styleUrls: ['example.component.css'], }) export class ExampleComponent { public buffer = 0.06; diff --git a/static/usage/v7/progress-bar/buffer/react.md b/static/usage/v7/progress-bar/buffer/react.md index 1fa8208ac3a..10f35e69538 100644 --- a/static/usage/v7/progress-bar/buffer/react.md +++ b/static/usage/v7/progress-bar/buffer/react.md @@ -22,9 +22,7 @@ function Example() { }, 1000); } - return ( - - ); + return ; } export default Example; ``` diff --git a/static/usage/v7/progress-bar/buffer/vue.md b/static/usage/v7/progress-bar/buffer/vue.md index 3edc59bdf6f..c70c23eb470 100644 --- a/static/usage/v7/progress-bar/buffer/vue.md +++ b/static/usage/v7/progress-bar/buffer/vue.md @@ -15,7 +15,7 @@ return { buffer, - progress + progress, }; }, mounted() { @@ -32,7 +32,7 @@ }, 1000); } }, 1000); - } + }, }); ``` diff --git a/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md index d8f8b690fc9..971d3d92ed0 100644 --- a/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md +++ b/static/usage/v7/progress-bar/determinate/angular/example_component_ts.md @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - styleUrls: ['example.component.css'] + styleUrls: ['example.component.css'], }) export class ExampleComponent { public progress = 0; diff --git a/static/usage/v7/progress-bar/determinate/react.md b/static/usage/v7/progress-bar/determinate/react.md index 9622be87f95..474d4dd878e 100644 --- a/static/usage/v7/progress-bar/determinate/react.md +++ b/static/usage/v7/progress-bar/determinate/react.md @@ -19,9 +19,7 @@ function Example() { }, 1000); } - return ( - - ); + return ; } export default Example; ``` diff --git a/static/usage/v7/progress-bar/determinate/vue.md b/static/usage/v7/progress-bar/determinate/vue.md index c22b3ead5d3..5eb4cd2b847 100644 --- a/static/usage/v7/progress-bar/determinate/vue.md +++ b/static/usage/v7/progress-bar/determinate/vue.md @@ -13,7 +13,7 @@ let progress = ref(0); return { - progress + progress, }; }, mounted() { @@ -28,7 +28,7 @@ }, 1000); } }, 50); - } + }, }); ``` diff --git a/static/usage/v7/progress-bar/indeterminate/react.md b/static/usage/v7/progress-bar/indeterminate/react.md index 45e74e79ce7..b856e1f29f2 100644 --- a/static/usage/v7/progress-bar/indeterminate/react.md +++ b/static/usage/v7/progress-bar/indeterminate/react.md @@ -3,9 +3,7 @@ import React from 'react'; import { IonProgressBar } from '@ionic/react'; function Example() { - return ( - - ); + return ; } export default Example; ``` diff --git a/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md index d2c997037ad..a374b2ee72c 100644 --- a/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/progress-bar/theming/css-properties/angular/example_component_html.md @@ -1,4 +1,3 @@ ```html - - + ``` diff --git a/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md b/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md index a4c5e382892..3e05757d942 100644 --- a/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/progress-bar/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonProgressBar } from '@ionic/react'; @@ -8,7 +7,7 @@ import './main.css'; function Example() { return ( <> - + ); diff --git a/static/usage/v7/progress-bar/theming/css-properties/vue.md b/static/usage/v7/progress-bar/theming/css-properties/vue.md index bfff4db7a1b..f63aec9e644 100644 --- a/static/usage/v7/progress-bar/theming/css-properties/vue.md +++ b/static/usage/v7/progress-bar/theming/css-properties/vue.md @@ -9,7 +9,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonProgressBar } + components: { IonProgressBar }, }); diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md index d2c997037ad..a374b2ee72c 100644 --- a/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md +++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/angular/example_component_html.md @@ -1,4 +1,3 @@ ```html - - + ``` diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md index a4c5e382892..3e05757d942 100644 --- a/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md +++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonProgressBar } from '@ionic/react'; @@ -8,7 +7,7 @@ import './main.css'; function Example() { return ( <> - + ); diff --git a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md index a9ca62b2c4f..5750323198e 100644 --- a/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md +++ b/static/usage/v7/progress-bar/theming/css-shadow-parts/vue.md @@ -9,7 +9,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonProgressBar } + components: { IonProgressBar }, }); diff --git a/static/usage/v7/radio/basic/angular.md b/static/usage/v7/radio/basic/angular.md index 47f36bcad0e..a8caa3c1973 100644 --- a/static/usage/v7/radio/basic/angular.md +++ b/static/usage/v7/radio/basic/angular.md @@ -1,6 +1,6 @@ ```html - Grapes
+ Grapes
Strawberries
Pineapple
Cherries diff --git a/static/usage/v7/radio/basic/javascript.md b/static/usage/v7/radio/basic/javascript.md index 47f36bcad0e..a8caa3c1973 100644 --- a/static/usage/v7/radio/basic/javascript.md +++ b/static/usage/v7/radio/basic/javascript.md @@ -1,6 +1,6 @@ ```html - Grapes
+ Grapes
Strawberries
Pineapple
Cherries diff --git a/static/usage/v7/radio/basic/react.md b/static/usage/v7/radio/basic/react.md index f826499e307..7f8cf4e07f4 100644 --- a/static/usage/v7/radio/basic/react.md +++ b/static/usage/v7/radio/basic/react.md @@ -5,9 +5,12 @@ import { IonRadio, IonRadioGroup } from '@ionic/react'; function Example() { return ( - Grapes
- Strawberries
- Pineapple
+ Grapes +
+ Strawberries +
+ Pineapple +
Cherries ); diff --git a/static/usage/v7/radio/basic/vue.md b/static/usage/v7/radio/basic/vue.md index cf4878155af..2d552901212 100644 --- a/static/usage/v7/radio/basic/vue.md +++ b/static/usage/v7/radio/basic/vue.md @@ -1,7 +1,7 @@ ```html @@ -50,7 +50,7 @@ IonSkeletonText, IonThumbnail, } from '@ionic/vue'; - import { musicalNotes } from 'ionicons/icons' + import { musicalNotes } from 'ionicons/icons'; import { defineComponent, ref } from 'vue'; export default defineComponent({ @@ -66,13 +66,13 @@ }, setup() { const loaded = ref(false); - const setLoaded = (state: boolean) => loaded.value = state; + const setLoaded = (state: boolean) => (loaded.value = state); return { loaded, musicalNotes, - setLoaded - } - } + setLoaded, + }; + }, }); ``` diff --git a/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md index 67761872c60..c59d8603262 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/angular/example_component_css.md @@ -4,4 +4,4 @@ ion-skeleton-text { --background: rgba(188, 0, 255, 0.065); --background-rgb: 188, 0, 255; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/skeleton-text/theming/css-properties/javascript.md b/static/usage/v7/skeleton-text/theming/css-properties/javascript.md index 20463c6aba6..90d27d3f31e 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/javascript.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/javascript.md @@ -26,6 +26,6 @@

- + ``` diff --git a/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md index 67761872c60..c59d8603262 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/react/main_css.md @@ -4,4 +4,4 @@ ion-skeleton-text { --background: rgba(188, 0, 255, 0.065); --background-rgb: 188, 0, 255; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md index 29e6e159f68..d66ea73ff7f 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/react/main_tsx.md @@ -1,13 +1,6 @@ ```tsx import React from 'react'; -import { - IonItem, - IonLabel, - IonList, - IonListHeader, - IonSkeletonText, - IonThumbnail, -} from '@ionic/react'; +import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/react'; import './main.css'; @@ -15,7 +8,7 @@ function Example() { return ( - + @@ -23,13 +16,13 @@ function Example() {

- +

- +

- +

@@ -37,4 +30,4 @@ function Example() { ); } export default Example; -``` \ No newline at end of file +``` diff --git a/static/usage/v7/skeleton-text/theming/css-properties/vue.md b/static/usage/v7/skeleton-text/theming/css-properties/vue.md index 418a7ca610f..2785a0e8b51 100644 --- a/static/usage/v7/skeleton-text/theming/css-properties/vue.md +++ b/static/usage/v7/skeleton-text/theming/css-properties/vue.md @@ -1,5 +1,5 @@ ```html - @@ -30,7 +26,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, + components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, }); ``` diff --git a/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md index 4772826c933..029f5d3ee56 100644 --- a/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/split-pane/theming/css-properties/angular/example_component_html.md @@ -6,9 +6,7 @@ Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border
@@ -17,9 +15,7 @@ Main View - - Main View Content - + Main View Content
``` diff --git a/static/usage/v7/split-pane/theming/css-properties/javascript.md b/static/usage/v7/split-pane/theming/css-properties/javascript.md index 943993aa380..37bd7b9e7f1 100644 --- a/static/usage/v7/split-pane/theming/css-properties/javascript.md +++ b/static/usage/v7/split-pane/theming/css-properties/javascript.md @@ -6,9 +6,7 @@ Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border
@@ -17,9 +15,7 @@ Main View - - Main View Content - + Main View Content
@@ -27,7 +23,7 @@ ion-split-pane { --side-width: 350px; --side-max-width: 350px; - + --border: 1px dashed #b3baff; } diff --git a/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md index 7456a34359d..1d4ad6a2e19 100644 --- a/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/split-pane/theming/css-properties/react/main_tsx.md @@ -13,20 +13,16 @@ function Example() { Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border - +
Main View - - Main View Content - + Main View Content
); diff --git a/static/usage/v7/split-pane/theming/css-properties/vue.md b/static/usage/v7/split-pane/theming/css-properties/vue.md index cc891eaeda1..f0abcf95800 100644 --- a/static/usage/v7/split-pane/theming/css-properties/vue.md +++ b/static/usage/v7/split-pane/theming/css-properties/vue.md @@ -7,20 +7,16 @@ Menu - - Menu Content is 350px wide and has a blue dashed border - + Menu Content is 350px wide and has a blue dashed border - +
Main View - - Main View Content - + Main View Content
@@ -30,7 +26,7 @@ import { defineComponent } from 'vue'; export default defineComponent({ - components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, + components: { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar }, }); @@ -38,7 +34,7 @@ ion-split-pane { --side-width: 350px; --side-max-width: 350px; - + --border: 1px dashed #b3baff; } diff --git a/static/usage/v7/text/basic/angular.md b/static/usage/v7/text/basic/angular.md index fb2f6064fba..e63da3cacf9 100644 --- a/static/usage/v7/text/basic/angular.md +++ b/static/usage/v7/text/basic/angular.md @@ -13,9 +13,9 @@

- 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. + 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/v7/text/basic/javascript.md b/static/usage/v7/text/basic/javascript.md index fb2f6064fba..e63da3cacf9 100644 --- a/static/usage/v7/text/basic/javascript.md +++ b/static/usage/v7/text/basic/javascript.md @@ -13,9 +13,9 @@

- 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. + 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/v7/text/basic/react.md b/static/usage/v7/text/basic/react.md index dac54e84471..da8882e3bf5 100644 --- a/static/usage/v7/text/basic/react.md +++ b/static/usage/v7/text/basic/react.md @@ -19,11 +19,14 @@ function Example() {

- - 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. + + + + 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/v7/text/basic/vue.md b/static/usage/v7/text/basic/vue.md index 742167bf9f1..b34cd3d437a 100644 --- a/static/usage/v7/text/basic/vue.md +++ b/static/usage/v7/text/basic/vue.md @@ -14,10 +14,10 @@

- 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. + 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/v7/textarea/autogrow/angular.md b/static/usage/v7/textarea/autogrow/angular.md index 5ff7394eec0..03de94359b6 100644 --- a/static/usage/v7/textarea/autogrow/angular.md +++ b/static/usage/v7/textarea/autogrow/angular.md @@ -1,7 +1,10 @@ ```html - + ``` diff --git a/static/usage/v7/textarea/autogrow/javascript.md b/static/usage/v7/textarea/autogrow/javascript.md index bea62987f5e..4c2e15028fd 100644 --- a/static/usage/v7/textarea/autogrow/javascript.md +++ b/static/usage/v7/textarea/autogrow/javascript.md @@ -1,7 +1,10 @@ ```html - + ``` diff --git a/static/usage/v7/textarea/autogrow/vue.md b/static/usage/v7/textarea/autogrow/vue.md index 824ada24909..693814464e8 100644 --- a/static/usage/v7/textarea/autogrow/vue.md +++ b/static/usage/v7/textarea/autogrow/vue.md @@ -1,8 +1,11 @@ ```html diff --git a/static/usage/v7/textarea/migration/index.md b/static/usage/v7/textarea/migration/index.md index 6413224a286..aa820c53b48 100644 --- a/static/usage/v7/textarea/migration/index.md +++ b/static/usage/v7/textarea/migration/index.md @@ -55,8 +55,8 @@ import TabItem from '@theme/TabItem'; @@ -113,8 +113,8 @@ import TabItem from '@theme/TabItem'; @@ -170,9 +170,9 @@ import TabItem from '@theme/TabItem'; {/* After */} -{/* - Metadata such as counters and helper text should not - be used when a textarea is in an item/list. If you need to +{/* + 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. */} @@ -229,8 +229,8 @@ import TabItem from '@theme/TabItem'; diff --git a/static/usage/v7/textarea/theming/javascript.md b/static/usage/v7/textarea/theming/javascript.md index ae34bb17a0f..c654ae883a9 100644 --- a/static/usage/v7/textarea/theming/javascript.md +++ b/static/usage/v7/textarea/theming/javascript.md @@ -17,7 +17,7 @@ --placeholder-color: #ddd; --placeholder-opacity: 0.8; } - + ion-textarea.custom .helper-text, ion-textarea.custom .counter { color: #373737; diff --git a/static/usage/v7/textarea/theming/vue.md b/static/usage/v7/textarea/theming/vue.md index be3ad556a62..c7cef62ba4a 100644 --- a/static/usage/v7/textarea/theming/vue.md +++ b/static/usage/v7/textarea/theming/vue.md @@ -8,7 +8,7 @@ --placeholder-color: #ddd; --placeholder-opacity: 0.8; } - + ion-textarea.custom .helper-text, ion-textarea.custom .counter { color: #373737; diff --git a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md index 605855deb77..74742dfe9f0 100644 --- a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md +++ b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_css.md @@ -1,4 +1,3 @@ - ```css ion-thumbnail { --size: 140px; diff --git a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md index 8ef97cae761..119cfb8ee9c 100644 --- a/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md +++ b/static/usage/v7/thumbnail/theming/css-properties/angular/example_component_html.md @@ -1,4 +1,3 @@ - ```html Silhouette of mountains diff --git a/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md index 37f4796d763..1d0f352383f 100644 --- a/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md +++ b/static/usage/v7/thumbnail/theming/css-properties/react/main_tsx.md @@ -1,4 +1,3 @@ - ```tsx import React from 'react'; import { IonThumbnail } from '@ionic/react'; diff --git a/static/usage/v7/toast/buttons/angular/example_component_html.md b/static/usage/v7/toast/buttons/angular/example_component_html.md index 3245d44e8a4..36717f5eb9a 100644 --- a/static/usage/v7/toast/buttons/angular/example_component_html.md +++ b/static/usage/v7/toast/buttons/angular/example_component_html.md @@ -2,11 +2,11 @@ Open Toast

{{ handlerMessage }}

{{ roleMessage }}

-``` \ No newline at end of file +``` diff --git a/static/usage/v7/toast/buttons/angular/example_component_ts.md b/static/usage/v7/toast/buttons/angular/example_component_ts.md index 9adc2711591..dd34310e22d 100644 --- a/static/usage/v7/toast/buttons/angular/example_component_ts.md +++ b/static/usage/v7/toast/buttons/angular/example_component_ts.md @@ -10,20 +10,24 @@ export class ExampleComponent { { text: 'More Info', role: 'info', - handler: () => { this.handlerMessage = 'More Info clicked'; } + handler: () => { + this.handlerMessage = 'More Info clicked'; + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { this.handlerMessage = 'Dismiss clicked'; } - } + handler: () => { + this.handlerMessage = 'Dismiss clicked'; + }, + }, ]; handlerMessage = ''; roleMessage = ''; setRoleMessage(ev) { - const { role } = ev.detail + const { role } = ev.detail; this.roleMessage = `Dismissed with role: ${role}`; } } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/toast/buttons/javascript.md b/static/usage/v7/toast/buttons/javascript.md index 86cf3cb0b68..f8dfa701d1d 100644 --- a/static/usage/v7/toast/buttons/javascript.md +++ b/static/usage/v7/toast/buttons/javascript.md @@ -8,20 +8,24 @@ const toast = document.querySelector('ion-toast'); const handlerOutput = document.querySelector('#handlerResult'); const roleOutput = document.querySelector('#roleResult'); - + toast.buttons = [ { text: 'More Info', role: 'info', - handler: () => { handlerOutput.innerText = 'More Info clicked'; } + handler: () => { + handlerOutput.innerText = 'More Info clicked'; + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { handlerOutput.innerText = 'Dismiss clicked'; } - } + handler: () => { + handlerOutput.innerText = 'Dismiss clicked'; + }, + }, ]; - + toast.addEventListener('ionToastDidDismiss', (ev) => { const { role } = ev.detail; roleOutput.innerText = `Dismissed with role: ${role}`; diff --git a/static/usage/v7/toast/buttons/react.md b/static/usage/v7/toast/buttons/react.md index fc8b603fa20..ac815c8c693 100644 --- a/static/usage/v7/toast/buttons/react.md +++ b/static/usage/v7/toast/buttons/react.md @@ -17,13 +17,17 @@ function Example() { { text: 'More Info', role: 'info', - handler: () => { setHandlerMessage('More Info clicked'); } + handler: () => { + setHandlerMessage('More Info clicked'); + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { setHandlerMessage('Dismiss clicked'); } - } + handler: () => { + setHandlerMessage('Dismiss clicked'); + }, + }, ]} onDidDismiss={(e: CustomEvent) => setRoleMessage(`Dismissed with role: ${e.detail.role}`)} > diff --git a/static/usage/v7/toast/buttons/vue.md b/static/usage/v7/toast/buttons/vue.md index 3ae653988f6..3f0c0e87848 100644 --- a/static/usage/v7/toast/buttons/vue.md +++ b/static/usage/v7/toast/buttons/vue.md @@ -3,8 +3,8 @@ Open Toast @@ -25,27 +25,31 @@ { text: 'More Info', role: 'info', - handler: () => { handlerMessage.value = 'More Info clicked'; } + handler: () => { + handlerMessage.value = 'More Info clicked'; + }, }, { text: 'Dismiss', role: 'cancel', - handler: () => { handlerMessage.value = 'Dismiss clicked'; } - } - ] + handler: () => { + handlerMessage.value = 'Dismiss clicked'; + }, + }, + ]; const setRoleMessage = (ev: CustomEvent) => { - const { role } = ev.detail - console.log('hi there') + const { role } = ev.detail; + console.log('hi there'); roleMessage.value = `Dismissed with role: ${role}`; - } - + }; + return { handlerMessage, roleMessage, toastButtons, - setRoleMessage - } - } + setRoleMessage, + }; + }, }); ``` diff --git a/static/usage/v7/toast/icon/angular.md b/static/usage/v7/toast/icon/angular.md index 2dc76a51fa6..819a72c342f 100644 --- a/static/usage/v7/toast/icon/angular.md +++ b/static/usage/v7/toast/icon/angular.md @@ -1,4 +1,4 @@ ```html Open Toast -``` \ No newline at end of file +``` diff --git a/static/usage/v7/toast/icon/index.md b/static/usage/v7/toast/icon/index.md index 1418e06b870..aef5d5a8cc7 100644 --- a/static/usage/v7/toast/icon/index.md +++ b/static/usage/v7/toast/icon/index.md @@ -12,7 +12,7 @@ import angular from './angular.md'; javascript, react, vue, - angular + angular, }} src="usage/v7/toast/icon/demo.html" /> diff --git a/static/usage/v7/toast/icon/vue.md b/static/usage/v7/toast/icon/vue.md index 634f18e7ff5..223e37b3222 100644 --- a/static/usage/v7/toast/icon/vue.md +++ b/static/usage/v7/toast/icon/vue.md @@ -7,14 +7,14 @@ ``` diff --git a/static/usage/v7/toast/inline/basic/index.md b/static/usage/v7/toast/inline/basic/index.md index ad7f55c6e1e..aa61cab896b 100644 --- a/static/usage/v7/toast/inline/basic/index.md +++ b/static/usage/v7/toast/inline/basic/index.md @@ -11,7 +11,7 @@ import angular from './angular.md'; javascript, react, vue, - angular + angular, }} src="usage/v7/toast/inline/basic/demo.html" devicePreview diff --git a/static/usage/v7/toast/inline/basic/react.md b/static/usage/v7/toast/inline/basic/react.md index 898603a0516..0def9d5e178 100644 --- a/static/usage/v7/toast/inline/basic/react.md +++ b/static/usage/v7/toast/inline/basic/react.md @@ -1,14 +1,6 @@ ```tsx import React from 'react'; -import { - IonButton, - IonHeader, - IonContent, - IonToolbar, - IonTitle, - IonPage, - IonToast, -} from '@ionic/react'; +import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonToast } from '@ionic/react'; function Example() { return ( diff --git a/static/usage/v7/toast/inline/basic/vue.md b/static/usage/v7/toast/inline/basic/vue.md index 48c07b16d95..1b81018bcdb 100644 --- a/static/usage/v7/toast/inline/basic/vue.md +++ b/static/usage/v7/toast/inline/basic/vue.md @@ -13,14 +13,7 @@ ``` diff --git a/static/usage/v7/toast/layout/angular/example_component_html.md b/static/usage/v7/toast/layout/angular/example_component_html.md index 6f33423b8a5..2efa0572c4b 100644 --- a/static/usage/v7/toast/layout/angular/example_component_html.md +++ b/static/usage/v7/toast/layout/angular/example_component_html.md @@ -1,17 +1,17 @@ ```html Open Baseline Layout Toast Open Stacked Layout Toast - -``` \ No newline at end of file +``` diff --git a/static/usage/v7/toast/layout/angular/example_component_ts.md b/static/usage/v7/toast/layout/angular/example_component_ts.md index 4070a210849..89c39c33323 100644 --- a/static/usage/v7/toast/layout/angular/example_component_ts.md +++ b/static/usage/v7/toast/layout/angular/example_component_ts.md @@ -9,7 +9,7 @@ export class ExampleComponent { toastButtons = [ { text: 'Action With Long Text', - } + }, ]; } -``` \ No newline at end of file +``` diff --git a/static/usage/v7/toast/layout/javascript.md b/static/usage/v7/toast/layout/javascript.md index 1ac30c76931..6ae1998b02d 100644 --- a/static/usage/v7/toast/layout/javascript.md +++ b/static/usage/v7/toast/layout/javascript.md @@ -1,12 +1,21 @@ ```html Open Baseline Layout Toast Open Stacked Layout Toast - - + +