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 a96775bd53..0a00e88464 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 e733820c11..43b1160925 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 faf3e78c69..a21b295927 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 8b85ff3c4c..029a55e7e2 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 ae833b5f61..2c5d87b740 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 2e78783b98..a56c6df045 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 f445c54ac1..d4e0c8a1bc 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 b4f7385876..ba23809888 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 9b771545a4..8522ccae53 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 bbe3862836..379104761b 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 357470c9cb..1bb933671f 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 33d7caf6f6..3a37f10ecb 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 986aba59eb..43a8d41f61 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 d7dbbfae65..b2eaf11c01 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 7b67c1ce83..612431a7c6 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 65b7efbc35..0a892fb87c 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 d230e1e35e..ea0be18bdd 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 b41118e24a..c3205dc1cd 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 86df526123..ea98ecc019 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 df397d1220..b828af2269 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 bd5f4eb436..40505615a1 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 a17881c782..f20aad58be 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 5f5ebb0e8b..0784bf5bd2 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 d2badb8c85..f016559062 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 fed8c84f36..8925c58813 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 46fbedfd2d..5d92af4860 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 d06475bb40..dbe0858522 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 d51279cdb3..97c5312410 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 3419617edf..7ba32840e1 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 0ae16403ab..14bd424cda 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 6ffc58dc99..0864a9b61c 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 ed5a79768e..55d867c270 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 8b28987c93..94382996c6 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 a560f74b87..e8559f30a5 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 a81103de32..1655a17e1c 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 f942c2d83e..1c73cc0dd6 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 f230752bad..094919df3e 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 a6977cb29b..f2311a089c 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 96d8ae72cd..9576e92256 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 6b2ac36c51..56a530bcbe 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 fdeba83b33..75575d9629 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 a6db3ad12c..46d87ec12b 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 1a1a9adbe3..1a09b306b2 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 3746b4ad79..e4bbf3ea91 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 9c888d5344..57bd560672 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 2302dbff2b..a64c9f521c 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 90421eefaf..af5a86d6f4 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 6e405f68b2..abfcdad88e 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 e3594ca1f8..dfc1f985e6 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 7cedc61e4c..b6572e4899 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 4aba9947d6..9e83d5c968 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 9be8d6d0f8..0103ba1727 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 9fd0e65c09..f6a05ed455 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 f74d9eb0ec..d47e801f46 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 2c51099331..5b7c095a87 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 46288e45f1..784f0be940 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 e6464c335a..706cdda523 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 012bbc3132..ef10f826c1 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 123db8876c..6fd6ffa6ca 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 edc1a4b75a..7de1ee7b50 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 c0e5f88d82..faca172d93 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 dc131842db..9f3e707118 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 2df0497c4f..b24833c06c 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 4e72602257..44a8923c85 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 b75f12c065..83f3ef3971 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 df4c6569a1..7e8901caaa 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 bbf70b2e82..5ba5790d64 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 ecdbe97a04..97bb1de26d 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 b0621dace2..326aa3304d 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 14dbe3f5e7..13640925b9 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 9ea56f755e..67aee23fea 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 9bf752950d..f5dbd171da 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 0a39f7a5fa..2f9b9e8a86 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 1db71ff897..d00095bb2d 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 c72c5300ff..a1ae0d0da9 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 7e9409ec13..12a49a59fc 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 aeab8bee49..b1e69c6d3f 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 9b15b01757..b0f6e9fd90 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 73f3f9b1ab..2a5722cc43 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 bcd958a105..180320e07b 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 44074047ac..3e60010706 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 d0ce780da3..4c54697a8d 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 54b26b53f9..8816ed76df 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 b7650f3740..66626d946c 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 b1f9e57810..a2a30cef0c 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 ba560da496..5c551153b9 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 d8faeba5b8..ee40688e12 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 50c62e09c5..b952857816 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 70e266f340..80b0729272 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 ce555ed4b7..1cd91488d6 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 db65b072c8..16b05daf24 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 6d7328eddf..2b5bfc9053 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 8ad93461f7..0088962b7b 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 43edb18801..e63a3f28d2 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 ca76bcec30..912ea84b01 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 58fa960c86..77b0a7d3b5 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 7ea21d3f4d..a8413b6fde 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 5b2028d4a6..dd37eccbbd 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 e50a5576c6..872c50f165 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 ab7ead5aca..fad01ac953 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 3d725f9eb9..7feec34a0f 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 bf3ddf1822..8ce2cca42e 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 e359539921..afa6580839 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 2b24622135..8418e06d55 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 bb00b1cfdc..b2d599be43 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 7f1b059484..eaa7d47078 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 90b398450b..d18012d652 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 40c416ab32..86695bb5ae 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 205a6543d4..890648bbd2 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 f9349b0208..e81480fe8e 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 75ed07ea1b..77b3c49900 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 8050b2a7bc..bf9d1f0a47 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 b04fd24bdd..4446e1b3c6 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 36ef496f81..06a2c76df7 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 ee0550437e..a60cffd72e 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 38dae06af7..380c8899f2 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 09527dca43..1032ff7bc9 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 9dcc3781d7..67c19e8b5d 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 07c5cdca37..b648441172 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 876e4f9acf..2c8009fa7d 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 aa956b2c1b..e2e46ed72b 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 b34be1bb39..0610808024 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 364d5db3c9..a41856605d 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 9176b7070a..0f5eb97b2a 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 4d16f74065..751c844725 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 a6752caddb..d060a4bef8 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 caed21b4dc..6319cffd90 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 337bd2ece4..0ab86141dc 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 06b24cc2eb..9f955b15f8 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 9e8356fe25..48283da665 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 bea9d3ecba..1993a5ee10 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 f2284770ab..43596c2806 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 8b29272582..b6544e6d83 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 ea12f54b68..2c20f6ecf0 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 b56e952cfe..4b06249476 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 4601620743..82734aa87a 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 264bbaa75e..6a963b5d9f 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 e46c310a3a..17a1f68066 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 a7afe6c8d1..e56efdfe97 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 ae4cb5381f..899657dddc 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 ea089a533e..5f3c13209f 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 c0c93908ac..e3549da53d 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 4414ead7bf..432e25dfdd 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 5955051f78..11cda792b5 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 d99c52d65a..fd6dce5d01 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 354ab9096e..0f88e6a8e4 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 9223767446..df0c09642f 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 eaf062c371..bddb365522 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 87c87870df..6ac967fb05 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 00e4bc82f9..a7bb911b9c 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 bfdb1ef588..a48559243b 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 6bc01e4283..5e1171456f 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 55e5fe17a3..b7cb114e8c 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 08847fb4ff..adbc05b5a2 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 189cbffbd3..16b5c4d312 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 cb68d350bc..46dcb8e542 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 1cc1c90704..85c79083d9 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 399f66d127..5a495cdd6c 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 6cbd9d1b2a..28809e7b71 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 4ab92196b2..9b91ee5b96 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 79cb3ce793..6e86afd7dd 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 451c5d6eaf..67dd1f096b 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 fbd225c988..f4f7321933 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 c255a67719..e40ce993ec 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 132c0900cb..89792ed7ca 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 2094539141..9a95d3cdde 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 a6bad98959..5af936881c 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 3444d3c2da..c168364f9b 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 dae3477fac..c44ca9a3d3 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 19ecb87a9a..9a8778e10e 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 dad3ebc17c..5b87be8940 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 fa36d9b0a9..16e8d5ef11 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 133c2d8f99..1fe6e1de39 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 86ed4981f6..a29da0b96c 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 b2cbacc4e1..5d8520d0eb 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 259465266e..0e922f5651 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 9a3385f730..3fe1cc4140 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 01929a4e1f..2b441d8c06 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 d901557c33..8e609b364e 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 83f3f3ac7c..ec99a3d894 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 e3d7c78a20..e5f8f127c5 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 6a760b44aa..3d8b391136 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 7dbfe39cff..227dc83156 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 d548f1c9e6..b22908839f 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 0f97193113..bba95c509b 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 620cf48cb9..dcbf4d9402 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 ea2200494f..3b9c5c7cdd 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 643eeb66cc..d857c0c9e3 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 95149828ba..d51538669d 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 ed5f349486..0772f0a970 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 03d4789973..59e4987f6d 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 9ba868a9e1..41a04f1f7f 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 65be6a2cea..49d762f4c1 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 c89417e7ec..809938509d 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 555667996c..92a00cbff7 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 0d099f1e3c..4d696e6e17 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 9d8aa06c58..e965cf2454 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 ae5b7ce7f0..9af121ee5b 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 3aea8507aa..7d6b2d5160 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 2564a686b1..c7659ea9e6 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 400d4bf0b1..c48e254052 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 50b673172e..d8614d0fb8 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 6f81b1c6e8..96ccdcb31c 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 71a74fb45e..f6cd7b1d3d 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 b85d71034f..bdba35fa60 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 6d858b1465..dafd212d44 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 ab52c1d554..6a6f680610 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 053883d5e7..1153264826 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 0a235d3c41..96df8ae552 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 4180760c00..6d2307b6c5 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 d1b2020e45..aef01c4d10 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 023c907ed3..d1e3ba6fe5 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 2f09a3ad5c..2da05e6aa1 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 46c9cdd725..7561efa591 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 2ecac2e80f..118156608e 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 5d60e67fbc..32bbd4baee 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 7ccd266e94..d3e53a62ed 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 896041e948..f74a7d89b9 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 29731178d6..e75e16699b 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 aa122b5f0e..6c47a18c05 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 8d2a07e5df..53fc3c2d69 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 f2bc280fb8..38f11e3619 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 2580a0cda5..5598332216 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 2c324f0eb5..c89b02eff9 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 032a649d14..747c1e28d9 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 a6c24e8da6..e5530fe103 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 8b0ada2048..592b5be9e9 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 2bbf61e793..7338d590d7 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 8469ebda0a..8553b55da6 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 8f0b2fbbe5..76c3260f91 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 9c378cad03..0321562f6e 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 084ad40e10..b39a0e6918 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 0adad651d6..93b1e649cc 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 3d8e940a63..d493a41fd9 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 7d721cc279..4bd02ab328 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 1d9ad3dd39..e982d341e2 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 8a94ae5d8e..afa35f1035 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 1eb8cba120..38e1279ef5 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 bf7d175f93..b55fe80a47 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 6bf8b66760..81f3f98116 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 fd59329142..ac5a5d3e91 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 6ce7f376ed..ffd5c634eb 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 cfaa115fac..8a47442c24 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 9dac309e25..854fc847f4 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 e4d6f94b53..36d1f15846 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 ebfef12609..81c5a84112 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 e85b497b34..1f8c62a5da 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 ac43a663b2..2f400305d1 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 33e2793d25..b26d7833da 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 5701010c08..ecda885f20 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 bd16897019..afb1a91f39 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 280022dbc9..e9f2c891df 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 83bd89fd25..e82040f738 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 144ecaa563..122019c5f1 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 c81886b5b2..f85d086806 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 886c2aafef..5d1e409dab 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 b8f9011866..00a5267681 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 0f7579af2c..a34f7ab872 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 d6d92fbd83..255b86bb51 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 9847cfa382..1ff3a55787 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 dbea5d3b8d..0048a85754 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 a8fb4f13e0..65ad76e7c6 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 1eb72b8dda..e0d20a63b4 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 8cff7c7bbf..66dc054756 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 429beab68c..8c72865f57 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 bd1dd427e8..e0320dab05 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 9656b8e303..141d5954bf 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 2c3dc70038..cc56e47e44 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 ca59d32afb..6945ee6f70 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 f4687ec995..69fe01982c 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 a1cbc3f4f1..e67e173e15 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 6a84c2b794..c78f798b39 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 cf495c8bd0..525a621914 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 387a56e38d..02842144ff 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 6c369bd71f..2b1c205f15 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 c514ebd1db..7570fe2438 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 83353796a3..1ca5534809 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 335bdccc86..f7f5a4ad1a 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 7dda6c901c..18f08b3002 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 07434619b2..c46003317c 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 54d2bee2ef..d907b75af9 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 253bc7a2bc..f4d6b0a0fb 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 556000b959..9b5e49da5f 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 e3aabdff4c..b5c546b048 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 3e8c739fd7..5b23bccdf4 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 1abdceda33..0378c8c20b 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 13b1b317ce..4999c7d998 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 e67c7bd3a3..9cc86ca76e 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 ecf88cf530..dda08d3edd 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 202131c46a..f052d4d78b 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 261a6e53cc..92be4be89d 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 efecadbf93..4e948a33fb 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 79942ae248..6a9c9deeab 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 24cc1fcb8d..dee337f7eb 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 cdbffb5541..91107733a3 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 5e45931c3b..ddbaf236ce 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 7622a01810..fbcb571db1 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 e2e115e84b..93206a1b37 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 b357ff59b4..7adc3c3ba7 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 5647327547..f895b6cb9c 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 bc598f63d2..8cf6d25b75 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 55941b2c34..d187ed5712 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 58ddadffe7..c3607e6da3 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 a75cf4e648..23fd2b5de5 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 42452b90dd..25127af903 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 f8c44dcd8e..a9f150d69b 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 dca3fea437..bca64c552c 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 3fdee04e4f..f673b7d612 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 6ccc994401..43711d4515 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 8a56e9557f..edb47cd351 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 77756cc378..ab718655e3 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 38d70177e4..9a0efd0b91 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 0a520db4e1..1a28d63724 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 245af23f3f..76ac5f87d2 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 b5331cef46..778e448878 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 b7446872d5..67ee3bf4de 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 dd5269e083..bbf4c5bfca 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 0106846144..b2c4b51c54 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 3ddabf3504..4a6fa97183 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 d8adf8fa10..9e3dee651c 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 d58cf36bcf..c72ea7b6df 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 a4635ade67..4843e001a1 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 d39cb7d670..224319878c 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 e7d0e43b07..74720e77cf 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 d8775124a8..f458e0f2aa 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 fd3a274c25..70ccb5c551 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 d3bafd2b68..ef322200bd 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 e679f8d6c9..61c4f22f73 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 2e8fa7043a..4691070405 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 3f9b171d41..19d5b19022 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 0b63be2a82..6088f0b612 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 f461595624..62efcb2413 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 e3c8ee20f0..ef694832be 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 572514716f..f2a52d2156 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 64fa695c70..79693427de 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 dc15f9a616..760f628a9e 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 3061c23751..4b99c6cff3 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 ca9c814a75..242eba8c1b 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 89b2e87535..771bf41ffc 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 750cb8ef16..c644726cb4 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 5bdc07959c..383542a21d 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 1dce05e6c3..de8c9990df 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 8a6514b89b..4da5975ef5 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 b7eaef9a56..7ab5aec3dc 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 870b2604c5..4b5d0913da 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 53cb2009b2..48f8d0b182 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 eede9901f2..003eb1c874 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 755824f0ec..d54822dd37 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 dd66506096..d4f7ef94fb 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 97a8d83827..4f62d95beb 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 845ab797ec..cb183161d4 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 65c2fc8471..596fb85cd1 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 1734d9dad7..04bc0483a4 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 342106810c..c440c40655 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 19481e4a0c..5724aab185 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 d636c65371..39095a008f 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 651fe0853e..7e568a1a4d 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 4cf763ae93..9f8ae344b4 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 5d87ac91cb..c4f0acae69 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 1a86485233..b4cdd2433f 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 f5363dbfc4..0f908a9176 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 d3508c2643..a21fa88797 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 e66ffdfaa3..3c88997511 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 34c1f5504f..89f502b3a0 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 38924b0ddc..9be9ccc031 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 2c94d6d3b6..21c1c3280a 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 f80f67a1cb..600f311be4 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 c0dfd617f9..8ed00dcef1 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 a375172a45..7aff16f4d0 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 934d55754d..f68ba3326d 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 142e99dba7..61973dab5f 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 746ac8f75f..4c6d16c7e2 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 d04574e049..26df51a9de 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 06f66515f7..de3059c969 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 eb11903d1e..68f4256f4c 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 63c8660d87..b2188d8bb6 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 7bdbe50277..6e90d82465 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 428f38a56b..378d731311 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 f037cfb4eb..62e1584bd2 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 3310b65a8c..31789181fc 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 c5aca89699..b0ba1a035b 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 7503103ea3..cd13bc4d34 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 ff8431d4b0..aa931cab1a 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 c94bb1f5b3..e5770d1488 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 7688ad4afb..956aeb3079 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 3b864d3e98..86cf115f40 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 bdf97b549b..9c660f9d3f 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 c9bfa0dfdc..b48c3bd51f 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 3bc6859c66..b840581bf3 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 1e7cce74ca..346ac36900 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 9d58e952ed..820f002031 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 b0a5a405fe..eeae254ce6 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 5d82337b79..31cd963a9a 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 4a50281c21..5e855fc3b9 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 5f85f08fd2..1899e3dcb1 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 6965a74db9..4c9e16d3c1 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 3c341df059..0881623db7 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 428678d3db..f6a1cd4614 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 af82c083c0..7e8dd58e36 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 dada357f09..3a888e9fa7 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 d1ad1198d0..3d18ac3b52 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 08b5da3eb6..ca8d2c9a2f 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 6e68e123b5..f6102751e5 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 3e7d56c00b..ad11584169 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 20aea12dbe..57d69a33a4 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 17d9f95fe9..f8cca1eb01 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 2ea2e63908..32c4db0378 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 506c15adb8..015489a4b1 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 704c463874..e3642ae3cc 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 f78309fe0b..f2e502cfe5 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 c8818884ed..734766aa36 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 64138302db..83730417b3 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 3581f6e15d..882d14b7b1 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 486331c856..98b2b255b4 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 ce22e5462a..0d9f3291e1 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 4c741044b0..f6449a636a 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 d07b1d7fc7..1ae2df5432 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 f921890486..3d0fd49ac9 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 c56ea30c71..2e7bd8ec95 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 8716a5a473..d2592eca73 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 1db37f9006..d24453289c 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 19ef77d93a..0609f95471 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 e0c34f1841..2a8835714c 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 9449c00c07..880895e711 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 4343eb0c54..981265cd17 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 0d8f098eed..fb28de35d4 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 c56798590b..43fb4ffbf0 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 ec5302b1be..a61fc63195 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 f9181e05e1..a17d5f2765 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 b100572eb9..df9051c60c 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 f465321f61..fb2274aec2 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 924f47f862..a5ce9d24ee 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 32baee9443..2a462a5e7c 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 d5c5bcc80f..973bd21b8a 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 77592878d1..3618fdc86d 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 127f228564..4db45111d7 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 ef36c88c17..66f341c69c 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 bbfd48664a..17594d4e02 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 4c56d609f5..c9721ebd1f 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 08c9859a79..fc2d26aa3d 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 8f671bb39f..2f60ef6fd1 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 4d9332e104..3172fe01bc 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 841eecd5ba..1fec16dfe0 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 46c5879013..75747152f6 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 d9a9aa8a76..e7bc2c658c 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 84ea18af65..3970f5091a 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 d7848616e3..7881a0abac 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 84ee93d2ba..69bbde23b4 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 90c0083be5..39074873db 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 05e11d1b73..ad98ed249e 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 43ca4194ff..d7894cda78 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 e915340712..d92ff4817a 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 6cc21cf849..cf2c371af9 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 ca7f2ff1d6..1b96b99673 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 3723e443ae..dd204e4074 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 5cd06f9e4a..9acf641e5f 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 68b043daa5..f1e21f6bea 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 c115986148..77ff85117d 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 c48614ce69..b325636c86 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 44d9d92e0e..79c65b82ac 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 e46bc1a8ce..80dc248745 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 7994b575b7..689a26c2c2 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 f0b445d806..2349be859a 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 5f8534da2f..28790e1333 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 b2cc8b3c10..90179c174c 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 337645b0ea..9eccd18a72 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 219d9b30ea..2e5d6c89de 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 8d77b13c54..58525e975e 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 07aa3e65bc..aeb2acd120 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 2fa9068224..69fcbdf4e4 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 32951b2e97..b4021dbc71 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 8d273b1d03..a8a2f17bf0 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 201ee60d90..fff1b9662a 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 606fb8e829..81af5993f8 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 a5dba2f318..2639e77e6e 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 a05b86c294..633f33f4a5 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 88073d0e42..c112dd699f 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 6e1a59b37b..68fa7830e0 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 ed2b8069d9..59aa68b5c6 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 848d0422f0..a821e9765a 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 5689e35d15..ebe2e10710 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 12904d120c..be1b65a79a 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 9f2b1c0174..86c098a58b 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 6aad946422..e67134191c 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 6189885bce..b6d086f450 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 eb342ccc05..546fb33e45 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 55b1190b9f..b1f3a046d2 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 eeb6f187b0..430a17e240 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 47d572b18d..e45849451f 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 a54c53cdb6..47fc0a9681 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 868f0964c2..771ad6aa09 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 5aef69baa9..41886694be 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 5b665efff5..cba69ad4c5 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 f101eb3ea4..e18353d5b1 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 4ab10b4b2d..cecfb27d68 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 0e4eba1b41..284005eda4 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 594e6d45c2..066b1ad833 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 1940f56c14..7b0c09db1a 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 49fe5bd279..b83cf792aa 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 e840abcf4d..5a146f90af 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 a83ce102f6..ea875f5907 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 33256b1f4d..01f817dd14 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 50ef54a637..018752e92f 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 ae6eb5ff6d..cae6c50504 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 389f7799b5..b2919a37f5 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 f164bb1e61..e1616a939f 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 d1ef3a7076..4c0962ca7c 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 aefd300a85..9a902c8133 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 85dc011b83..4bc9439524 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 f34ceefe4a..8ff541c5f0 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 b5fb2b3589..b6662b02db 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 9daedeed4c..d6558dc7e2 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 02e2949c69..db387632ea 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 7c33f04864..bab95ec51a 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 32a92e0cec..ea0ea15359 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 1c52fd7428..1ea9a11c35 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 378111eee0..4a0f14c6c0 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 8e886c58a6..142618d106 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 576ea36ad3..5f90bc638b 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 7f53aa23bd..89351f1e80 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 35a88342fb..6dbe274500 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 f40dadc60c..89b0c9409a 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 ebcc9a53e1..5df0be7fac 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 22a76cc9eb..25db62b4be 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 6b85ee6fc4..480a87caa6 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 f05008cc1b..64f56e73fd 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 901c0ddc01..751b6a12c4 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 e70f12debe..c204d2c432 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 70b7649c38..95685e060c 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 1eeae1f794..b2d7b770b7 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 1b853603fb..9d99105968 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 6e3163e6c6..71ff3ced91 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 45ab91c756..14468f25d8 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 8a2cc7b98a..b55e17ec85 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 7a26120183..cfeb395cf0 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 066be21484..b038df4eb0 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 12b247ea98..273dfe737d 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 663f27404f..f33581263b 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 dafabb5b14..a16a987f49 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 b8cbcf4f9b..55216a9dd4 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 391740906c..6d2e8fef85 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 cfb8134a91..e4e1e0c57a 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 3c785be7d2..65adbd858e 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 cd1bb37e7b..7fd48d2ce3 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 447f1dd586..2fee5c8ce4 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 4c3c726403..1ec8a9680a 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 76db3121d3..9e1fc9d86f 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 7fccf08dd4..3c6ea3e675 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 028c03eeac..ab919600b9 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 8159df0cc2..95e9fabcc3 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 9c004f37a1..b52c58eb81 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 af549ec23a..cd7f8031e3 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 bda0f81d78..9a57300393 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 651718ee41..5b40f28d91 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 d564a236a8..c89eb9f007 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 c87b1a18fc..6058f2a5d0 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 d61f9fac47..cef92d8b4a 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 6896fec2f2..38a0bb1dbd 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 999604925e..10c7bee057 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 4884fc8601..0f35432088 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 60f1ccf811..1b78cb5b1c 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 e76ea61b5a..cc711a9a00 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 4fd310f4db..f9be71ae4a 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 4b11f43db7..91ab9577d5 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 72784ade98..bc7bc4706f 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 e00c272091..1545db90a5 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 8cfd4632e8..89d49c7fc8 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 4ea47eb381..10a42a3c24 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 848b2b6f02..047131f13b 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 6877ae4645..590c295f48 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 1fcc16cf0b..2a6d756cd7 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 15b6663ed6..e9da296fd9 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 765f38cec0..995a3b7e54 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 c13af1fd74..31ab1945be 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 d9dee70d2c..4aa5c342d4 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 cb662fb009..6c5b689a59 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 6cc5c5a46a..6e591334ef 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 1cc58839a3..63c7016f22 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 e849978711..c5b7b54079 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 e6de08c9e1..f2db0df6c1 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 98096c7cbe..ff90458d0a 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 18aa06c18b..8283956c7e 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 fa813bfde1..c683ff692f 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 2543e2fccf..9b59ad5319 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 0e53b22ca9..1cda57966f 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 968bd20407..44bfcfbc82 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 41c241f496..02d70de307 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 68b8e6b179..c43ff9bfd3 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 390a32eaec..d9b3f071f7 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 b68d3ab7ff..0c59bae8ce 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 2551d58694..6585f3c063 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 b42500e9e4..2c5347d9b1 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 b84ffc4c31..13f68b5472 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 f900d6f461..811e66cf28 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 b3984b8c59..6f8a8a8abe 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 88a7fb6a49..4ef8b5b272 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 4c8fce4946..9c9558aa9f 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 dcd6445a0a..640f9bb81a 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 0628eab458..d1fa8e40f8 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 d7485b4396..e41614e081 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 15bf541e9d..bccc88fbd8 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 726165a898..e93893105d 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 5cf4940344..e4f9ac6cb4 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 e175ee00e3..43ea23ffaf 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 f24a5bf869..9048ef77bd 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 75e5568ed7..4fb4eba97c 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 66d7adc945..5fe8572bdb 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 0976460f00..4a0f043efb 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 d86ab646cb..abf0426465 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 e264f89479..18bd15a9c8 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 d50eb4eaa9..9bcfbf8245 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 8bad261fe8..af7b877c43 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 5fc4f3a6d7..1e68e0e970 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 ddc79b8e51..e0603e9aed 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 18c3e6c4ef..edbf7a4f37 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 01e703fc18..d2b2341e23 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 39bff53754..3188b1e627 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 7a1e5a193b..ca80d1fd2a 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 291d57158b..5be1998b61 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 9b66c2f2e1..4a19cd4157 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 df07f51089..f388a0167f 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 8fa80d5073..7a9d89b4a6 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 6e2147fe50..8119095fad 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 cb14e211de..c6c5d20a2d 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 133f8eb7c3..915b4677bc 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 d536a14694..142e9535fa 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 af44c9c2b8..ef282c19bb 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 9ee17e3bdc..2b5f355d32 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 7cb99b40e5..3c547a4e8d 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 d1daaa4698..565a90f61a 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 5f1879bee3..b89c32302e 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 d5d62d9c48..25781e21d5 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 7f7aebd9cf..14b8713fa0 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 c1dcdd4235..0a5f9a7832 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 b240baa138..b4ee0cd223 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 c3c87cd738..3705e6fdef 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 700f63f501..f512df855e 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 fbf9001f67..81291d19fa 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 22e5ca7335..e7358189f8 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 2e7f6c563f..c08a43ada8 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 6de2329897..541e510b51 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 2b597c52a4..1fe697a350 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 da7b45b84e..73d958c568 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 28bfe3371e..d188069a79 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 5e2ee0ab50..26575e3711 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 eb05502309..9aedd78cee 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 f294bcc351..7f40b01288 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 23703954a9..4d2d160ee7 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 bffc7ea9c2..8e07c5bfb0 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 10ad73cec8..aaaf2066bd 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 bbfbaa83a7..be83e8eda2 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 64b868a70e..28680069d4 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 02a5f27a3c..34d2dd67f0 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 243cfa9c2f..3745855f6d 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 7d17299d0f..ef4892aecc 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 2f3271613d..6813f9b4ce 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 5a5909b1b3..d25f1c8743 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 d23ea52b4b..05bb0a88aa 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 5315d0cd9d..700e77372f 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 ceaf06b6d3..a74c967ba4 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 c863908c42..13818c296a 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 82da9dfb8b..2048108734 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 c24d363256..614bd9e3fa 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 b4121ce03e..bb9f77e8cc 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 fe10d28861..12a79e474b 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 c21749e5a4..76c8b2306e 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 073705c754..7c70f0b8d2 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 4ad7701448..63769deb59 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 7e85935bd9..b17db3e2ea 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 bf6c36e621..16a4ca2855 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 854c845d6d..1ee72d337b 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 006d719f40..c792cb4019 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 21189b83ce..93bc6b09b7 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 c0da98e5ee..3b3c86763c 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 32e5cc12ce..7fac4c977d 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 863d92d374..5076fe510e 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 21189b83ce..93bc6b09b7 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 738797ba44..5e8e8da692 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 39a3f97b6b..1be81366c5 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 1b08eaa20c..f44265846f 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 39a3f97b6b..1be81366c5 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 1067c80acb..d24cf60095 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 a6bcdcbde5..05f22d0d2f 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 691d4b933b..0aea3f5df3 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 7d937e511d..7fd8a091cc 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 cca6fbf0af..2b269c172e 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 760bab7520..453e9963a8 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 9af8534259..5efdf7b71f 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 6054219017..141236c663 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 eba76679a0..f184a84848 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 d35f6dbb6b..179bf5d51c 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 6054219017..141236c663 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 348576ae0f..ecc51a9e15 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 cf55542e73..c049c4b89d 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 aaad754781..1c620df74c 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 beb29908e7..43e4daae2e 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 2323a1b3b1..1c866a3d0b 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 481f9f4779..4c3b1d9b0e 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 6a56c3fe4f..ca3d355287 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 99c084f806..4ebf8c55e4 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 263e18eb79..fcfa1291aa 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 27f216fb4f..d511ea5ff0 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 5383b732d9..2f26afde9e 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 aa6a662a80..0de1be3fe9 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 7f9f8f5bb2..94013b9d07 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 6a5f0d991f..6745332c51 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 eec083da61..e1f78d726d 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 7e94d274b3..a6d28a427c 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 2e02ebd367..b9a5daac45 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 fb5331bf14..3e60958f8e 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 25da44bf4c..5c64bdf12b 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 7d9eebab14..d45c2ef54b 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 ef07b833a7..b7059e637b 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 5cddcd596e..172b041a46 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 d0c16fbcca..acbb428bf1 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 9550a72ca4..1de6de7fca 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 c4d1f859c3..c84c1456e5 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 4da97de4af..b2077daa8d 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 f6280b08e3..f14e68e1d9 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 c4d1f859c3..c84c1456e5 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 e484d6c912..183dd98719 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 d92d286260..4c7a4265cd 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 341bdf8b1e..2992e1d25c 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 e484d6c912..183dd98719 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 1e70ed5db9..2a942543ac 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 84f96bf5f8..21d36197c4 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 e484d6c912..183dd98719 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 de4bf3866e..4828455359 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 8ded758604..c872bb48de 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 315af03442..5a9ddea449 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 4ff0ecd167..6ff5e75617 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 f04d7f8fbe..180b8998a3 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 affb7ccdec..32237336a1 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 3c39508e72..b2cda11d2a 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 6c29748fe6..30c4b38a25 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 1192ca2936..e26a6f1356 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 31f76ac219..05a1bd64d7 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 30f58541ec..8bbcc6421f 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 05de62654c..4667abeced 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 63ff609c99..c55cd3835b 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 7d3aad9224..1c7e7966b8 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 47aa8b9e1b..60599ad223 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 950e96b4e8..cf47682b14 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 711d4f0a38..e09f2ea5f6 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 950e96b4e8..cf47682b14 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 76a545d6a8..926479c1e8 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 fc5c8a2906..b761f85ed5 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 f88b8a6e32..fdd63471ed 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 eccdbd8d51..15ee6fc440 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 284c2a429a..4a81d113c9 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 2c5ee51a9b..e3c0462a14 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 a0b924e812..8b0a2476b4 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 007fb9a4a1..1d22085a5b 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 72cc6520e3..66ccc22bfe 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 318f64f854..54368fa721 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 a9305b79fe..b0ca30f0e6 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 f836a85455..f0849705aa 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 0f2e9ac47c..abcecf2686 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 632b91c2cb..20151756e8 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 338babc9c7..3dc7c4640a 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 013c1e1902..12021d9925 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 338babc9c7..3dc7c4640a 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 44ba583142..d313d7dcd2 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 8296ef7f42..e298f5a124 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 ca3f5093b8..b49d2c767a 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 ca3f5093b8..b49d2c767a 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 356fc5617d..03d8648c87 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 97ed756261..a37193d901 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 97ed756261..a37193d901 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 06905de166..6824c74162 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 1fba4c4997..fa985cbe82 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 6e0cddd970..c8c432e1b9 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 183c70105b..9562dbb3b4 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 f0bee55af1..39be00f2b4 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 183c70105b..9562dbb3b4 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 8d3b3edfe9..01baca04d7 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 9a101caa40..60b04a067d 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 72e55ffc58..473ad54c8d 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 eb5ba01707..db8b8134f1 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 72e55ffc58..473ad54c8d 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 453f32c4db..085bea0296 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 44327bf809..264038c103 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 3cce680ca3..0e68a8a2f5 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 f2779c7d5c..657a88bf06 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 5a0054584c..898ffa17bc 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 e03deeda2a..5c0048c019 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 862211d839..def835913c 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 34a4c74001..26370009d4 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 ccb83aec3d..ff2ff032f3 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 fc40840202..5a42aa9f76 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 fc40840202..5a42aa9f76 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 6637dfacef..a7e9b7d664 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 a92ec67a3a..2e6bdeb2e1 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 ae2df1a1cd..765d1f24ba 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 bfce3c9c58..b9ff7e0acd 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 9f3861e073..91748fc1bc 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 bede645732..4885a193f8 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 c67d8ddf1b..e67cb3e34b 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 3b406ede42..b08b2d704b 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 bede645732..4885a193f8 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 e4ec0fb134..ea550a31e0 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 6d5d5fa41c..574846aa28 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 d74e5b0554..35dccbdbc8 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 c50ecfe119..26348706e0 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 d74e5b0554..35dccbdbc8 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 289f1727c8..14ad85b1c8 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 95f26ebc02..22c9565c27 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 912ef18df0..df84e71811 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 b3b1bb4da2..172fdad114 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 499d29749c..dc9ad7ee55 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 6622b6d7e3..0c0cdc26f5 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 6cd8d464d7..b308303354 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 3589bcc7cd..950e3775d8 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 d8486d9753..0325543f19 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 a451b58c9c..2708fde7ac 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 c5d90b9bc8..4e89ac9648 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 a451b58c9c..2708fde7ac 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 2ca4d7ca38..716935f065 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 5110ba1abe..4310903459 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 f0b1325049..b975f267d9 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 f0b1325049..b975f267d9 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 dfed86af19..6154239cbf 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 479e90196a..37b32f7c2c 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 bf7069f48f..4d77ff8b9d 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 bf7069f48f..4d77ff8b9d 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 8776e5215f..fda29c7f11 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 02de38e58a..8680f18947 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 b06fb2ecf1..abdebf2a9e 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 435701d5b5..3d986aaf37 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 3a97d40743..84bf7ec643 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 7ef7323e95..5b361393b0 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 d341c004f1..5401009565 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 021ea8858c..449479b7d8 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 eb0d43327d..6d0772af98 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 a1e0e1e1b2..84437995c0 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 0febb45cfe..04ed67af38 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 49a1cc707e..b81a463e00 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 49a1cc707e..b81a463e00 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 a5fc0ae662..09496398f7 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 82e09004fb..a89e5e6aad 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 0cb6523f05..d1ef33c8b2 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 7dc085a7a4..11f20443f9 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 915969f127..c51ab29463 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 915969f127..c51ab29463 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 21ba7c98f6..dae8042c9a 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 72dd55ef58..38b16a91fb 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 c646ae03db..d9be998f8a 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 5db040f583..f8aa0c040c 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 a0f2c064b0..dfd53961ac 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 e74a8267a2..4efce5d53d 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 be252b899a..54f2497907 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 be252b899a..54f2497907 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 88e4f904de..f5bdf5a5d1 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 99ec3ea3d4..fe4cd48904 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 78b84e2138..a32f3c3068 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 368b68089d..0f66d21fc2 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 53f77fb4ff..80b2a2528f 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 828041239f..519a294b6a 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 0a63f448d3..0c7710252f 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 43c62e8825..d51f525dcb 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 c5507d123a..f54756c396 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 16280a1e91..06dc3413ba 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 17b65b33af..e80b61cc8b 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 e29eca6933..4369f2b066 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 09712e70a9..b16d6a849f 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 e2c492f143..e90cbb4e55 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 4d01e7fc86..77719a4a70 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 16bf7af352..af410626c5 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 61dc8c20be..892443db6c 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 68e0943cd3..5c0258d1f9 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 e2c492f143..e90cbb4e55 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 16bf7af352..af410626c5 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 cc57cc1dce..b92952e42b 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 6f380da3f1..5387b24146 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 4b1b527952..62d396e75a 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 5ddcc6a17b..597828749c 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 d3c60a4004..71a039bd21 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 3bfdd96bb1..8bfa431d1c 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 7008dbc3c4..ca040ebead 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 de206ca652..83fdee1662 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 c3afaf67ba..160fab7548 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 1896c85f8f..4b54191ef5 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 f8dfa374ba..fcafef4468 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 57f3380c18..0426c61322 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 de30bdc02d..84f81cf5ec 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 1e43625767..3e95a4d3ac 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 78ba124410..a553e0b899 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 e8d2880e45..7e62f53b0d 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 b697188b54..8c5e56d680 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 06e014afb5..86ad78d064 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 e1093bdf29..ccaddb758e 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 ac291deb49..5df93556be 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 9f48ee33cf..8c06ebd788 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 57cdc7a9c9..7bc42d0a9f 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 7488095006..573b33c211 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 bdf47c9d0a..42d4583e02 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 8b30337848..8423962a3e 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 2e3371fb89..dbb102eec5 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 5eefa7c114..da71f29506 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 2ea377034c..a247849a47 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 c03a518af1..f391050a00 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 67761872c6..c59d860326 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 4ff16bd347..6a1ff3a423 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 20463c6aba..90d27d3f31 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 67761872c6..c59d860326 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 29e6e159f6..d66ea73ff7 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 418a7ca610..2785a0e8b5 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 4772826c93..029f5d3ee5 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 d92888173f..631972afc2 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 943993aa38..37bd7b9e7f 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 7456a34359..1d4ad6a2e1 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 cc891eaeda..f0abcf9580 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 92bdc7799f..683c77b066 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 fb2f6064fb..e63da3cacf 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 fb2f6064fb..e63da3cacf 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 dac54e8447..da8882e3bf 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 742167bf9f..b34cd3d437 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 5ff7394eec..03de94359b 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 9d0efc4679..f09e447f5d 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 bea62987f5..4c2e15028f 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 824ada2490..693814464e 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 3325f10b87..8de25b999a 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 4bb4216465..d7c901468d 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 3570856f99..6f5649a823 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 605855deb7..74742dfe9f 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 8ef97cae76..119cfb8ee9 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 af98370979..a4de9d1517 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 37f4796d76..1d0f352383 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 8348f2ab71..6e2e2fb4db 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 11869e671e..fa9df22441 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 f427df176f..ba7e73a1c0 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 c08b16c85e..7def080da5 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 5d457cdbf2..4ce5b83bc1 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 54dc88ac35..faf1f33ed5 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 5bd8e1f56c..a493503dde 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 c5cea896bb..521bb9a2ae 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 ac08a9b543..7f329e63ec 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 ec7da81c54..762aff51aa 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 976194efc1..91e6579dfa 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 addffa2daf..d72053bd95 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 d636c54d90..b6aea1ec82 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 b63e8550ab..685c496cc2 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 25d758c16b..8ccf5670d6 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 d3a123f598..4cbe7510e4 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 8bd086f7ba..195a184120 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 6e8c63a9b5..01636b04a9 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 331eef6b0f..2675f425f8 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 2350799f7e..5d9a27392f 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 68813f1eb1..30f0b95da5 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 5b884ea7ca..ff3865c3b9 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 962fcd0e35..2ed1eea025 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 c772728c3c..db133a99f1 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 492699916c..dad0f52a79 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 5260ba8d1a..52c089331f 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 1dd38b3cd4..b4e8d0913c 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 ac520d0e7b..7f2ade9103 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 62c8151b0f..7f490b9bac 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 4d26162207..70ef6f5cfd 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 0e5b1b56e7..868ca8b9fe 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 b540eccaaf..06a4f5d7b0 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 6054219017..141236c663 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 348576ae0f..ecc51a9e15 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 cf55542e73..c049c4b89d 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 204508c6b3..7bdae73083 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 c564a2d16b..bedac44794 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 28172bca32..f9b3dd0e32 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 a10dd609b4..ae156ffc54 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 868eaaa7c1..8dc1c9c4a2 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 99c084f806..4ebf8c55e4 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 78689ede73..fcba0d9aa2 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 27f216fb4f..d511ea5ff0 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 5383b732d9..2f26afde9e 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 aa6a662a80..0de1be3fe9 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 7f9f8f5bb2..94013b9d07 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 c7efd45b80..f0aab93993 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 eec083da61..e1f78d726d 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 7e94d274b3..a6d28a427c 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 2e02ebd367..b9a5daac45 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 8f488dbb4b..84dc8bc9ed 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 f761b95824..c91c14bac7 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 381691b1f0..78d9ddf05c 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 86cf87ab2c..17f68db345 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 6557f4f4c5..2c0e3b1187 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 5497ad7b57..aebfa63c09 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 a3131033ff..9d82efd4ea 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 bf4d458034..b2bebe5de6 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 2834f65e3e..f991151c4a 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 b35cd485cb..542d6d52c4 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 8e769fe0ed..d705a0162b 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 6890d0be7a..54c1793d71 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 4c681af50b..c32a8ea9bd 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 d66211df84..fc0c08e0a5 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 a23a02b2ac..d9714abb66 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 67a346b331..57c0cd35e7 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 8d578dbb51..90e2725d0d 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 d66211df84..fc0c08e0a5 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 bd9fb37882..5db8454f7b 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 89b76aaed6..e3038179e1 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 0da89f1f7b..e675d03c07 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 6f70843e20..292a5d30c2 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 50cf42bb5a..cd12675859 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 0da962b248..762d3c21d8 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 c4d1f859c3..c84c1456e5 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 59bc30dd58..9c683943e0 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 f57e9958bf..a3c31a1b43 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 c4d1f859c3..c84c1456e5 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 7bd279bd0c..c526c93de8 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 fec220f8ec..0ae990d9a5 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 6c56317816..0ad166cf9b 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 c75afba0a1..bbbd043c5e 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 e484d6c912..183dd98719 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 5a01edce2a..78b0842c2d 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 6e4c36ec85..504cb5b486 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 e00b0e96f0..5d9d347fa2 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 f48b512c45..21f310c190 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 315af03442..5a9ddea449 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 38bc99f7e8..f6b6d6f371 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 f04d7f8fbe..180b8998a3 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 affb7ccdec..32237336a1 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 3c39508e72..b2cda11d2a 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 27c7d6b0c0..f870381f56 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 1192ca2936..e26a6f1356 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 31f76ac219..05a1bd64d7 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 d90a901513..318fab845d 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 05de62654c..4667abeced 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 adf0b9d8d5..5cd96fe047 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 a7861a18ed..6f83069ac3 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 1b640d0675..bc2ca77c72 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 950e96b4e8..cf47682b14 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 3fdf7e333a..1e639aa34f 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 950e96b4e8..cf47682b14 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 76a545d6a8..926479c1e8 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 c6f75cb115..f948400973 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 f88b8a6e32..fdd63471ed 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 3df433d189..f34494aeea 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 48e8a4ed82..332d3fa32c 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 2c5ee51a9b..e3c0462a14 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 2e2ca803c4..ad488a6cd6 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 007fb9a4a1..1d22085a5b 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 72cc6520e3..66ccc22bfe 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 318f64f854..54368fa721 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 4b42e7b7e4..8feb0c8489 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 f836a85455..f0849705aa 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 387f0c12e5..b2035669ab 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 c100fffe65..399a1a2a02 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 338babc9c7..3dc7c4640a 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 d808d24927..27d163c3f2 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 338babc9c7..3dc7c4640a 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 44ba583142..d313d7dcd2 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 8296ef7f42..e298f5a124 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 ca3f5093b8..b49d2c767a 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 ca3f5093b8..b49d2c767a 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 356fc5617d..03d8648c87 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 97ed756261..a37193d901 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 97ed756261..a37193d901 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 32f67b6f00..6f79f6e259 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 1fba4c4997..fa985cbe82 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 6e0cddd970..c8c432e1b9 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 183c70105b..9562dbb3b4 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 1427b4536f..e6d680e558 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 183c70105b..9562dbb3b4 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 8d3b3edfe9..01baca04d7 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 9a101caa40..60b04a067d 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 cc473c03d3..e2190ad8f8 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 251b18ce24..a5b4ce3af3 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 e238ae9c63..34068bb5a0 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 2d4159efbb..b2fbcb695d 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 9bc17fdb9e..fc8c1ff781 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 bcc02a761e..ea3f73b30c 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 117af56bc3..9cfba0ca72 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 5d08480d9a..ff87a637bd 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 f253722afe..9205434cea 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 f253722afe..9205434cea 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 fd92e9f1fa..667449c780 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 5659a826bc..ed34f0dcdc 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 42520178b6..7c9bf72813 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 31697dd369..942149628c 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 f5f63bf8c2..5889591fd1 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 29d3d419b6..ba23decbdb 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 51d619f8cc..7320900989 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 a247dee9a0..90a415bf90 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 f5f63bf8c2..5889591fd1 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 2fb46fb7ba..8408e5825f 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 7c4f5fd698..802cfa40b2 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 2ce8f542f9..be9f519d2c 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 2e49772c97..57db7581de 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 178d8338f2..82cb300712 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 e5931e4d94..1146da9a4b 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 178d8338f2..82cb300712 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 6ff6db1f65..90b5744b21 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 2a577f1d76..8613ca29a0 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 a62d625ae0..69fa48ad49 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 ca32463189..7302c48448 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 e4bd0c3a59..3de93600da 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 4a177d1d58..35a9aadc4c 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 d045cac7fa..24dc3fbed8 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 4a177d1d58..35a9aadc4c 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 4ffff834f2..e075e96cd8 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 8bd052a646..dc914aee8f 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 a1c3aac558..4a66edad40 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 d908468b2f..56b0fafa06 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 5cc4e537dd..ed54f08078 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 ffa8c913e3..e585b97e78 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 97e328a25c..f1a9f03f45 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 b8f3bb1e13..a53fbc7767 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 9526a8884a..1d2d105e98 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 c3e63abb72..5ac6e8ee1f 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 207e0aaaa7..b54287eae6 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 54c7fe1209..7bea2e18b1 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 ce8ccc6ed3..c44af4bf36 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 a55a9640c0..eb6585878e 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 90eaaba82a..62529cdb75 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 1272d768b8..a595c27e40 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 8ed07e871b..c47287e002 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 482f957cde..8721fbfc52 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 27a55412d5..f9476caf18 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 99add2f8a4..e24f5a4791 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 cd608eaae7..ee29baff5a 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 3f6e2879e0..85955f3ebd 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 cb8190ef9e..a93c12fef8 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 a723dfd08f..03eac24890 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 6dca0e83ec..b911da1791 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 6b087b72b7..aa7c1d1c80 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 2775067f7a..b5146e95e0 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 b54ba9d2af..742d531cb9 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 cf5ad71dd6..ce4c89f998 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 bf6d13f26e..923ea715aa 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 73565d9ab1..84aac1c56f 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 72e55ffc58..473ad54c8d 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 328ba025ad..c478007a6b 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 72e55ffc58..473ad54c8d 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 453f32c4db..085bea0296 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 44327bf809..264038c103 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 e7300fb261..7801be9509 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 f2779c7d5c..657a88bf06 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 fe8e8b04a8..44926cb52c 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 e03deeda2a..5c0048c019 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 862211d839..def835913c 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 34a4c74001..26370009d4 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 c26fa6e35a..97de04da44 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 ce4d3d19e0..61e27f8b9d 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 ce4d3d19e0..61e27f8b9d 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 04c4c086b1..0236cc2897 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 d8cb2cd2d7..db4d74618e 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 10fcef1cb2..e4a4dba554 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 834ca7f96e..d62ea62084 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 f17fd6e151..d1f2e440b0 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 da2f4776bd..31ddc03f19 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 7218199a3d..1722f8ad9a 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 dd93e9bb2c..a95e5dcc84 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 9f75f6b070..ba5030c002 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 03393f19b2..a0c95dfc13 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 16cd161715..55d306aa22 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 33934b31ae..ce801d04ac 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 1257ff9c64..151adb55b5 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 e08cf249e1..f9c79fc46a 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 59a819eaab..aa4f1b3c48 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 782e77971c..8854647965 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 e28bf81ce0..34e3ccaece 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 17c29f994c..329f0ceae5 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 154e20ad0c..3aa7fddda8 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 c3ffd4077f..243bb91401 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 4cbd6339c3..168adce6d2 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 6506b2ca27..ff696b22cd 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 7a90e30e81..e5534ec2e1 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 2415bc71ea..752f60c183 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 d74e5b0554..35dccbdbc8 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 9c8a9e292b..ff888fae90 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 d74e5b0554..35dccbdbc8 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 289f1727c8..14ad85b1c8 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 95f26ebc02..22c9565c27 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 a728b84c5d..e39b5d93a5 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 b3b1bb4da2..172fdad114 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 f425706d75..7d95b99dca 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 6622b6d7e3..0c0cdc26f5 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 6cd8d464d7..b308303354 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 3589bcc7cd..950e3775d8 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 a752ec6227..21fdcf0265 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 a451b58c9c..2708fde7ac 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 39983e2a9b..4f5f2169e5 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 a451b58c9c..2708fde7ac 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 2ca4d7ca38..716935f065 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 5110ba1abe..4310903459 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 f0b1325049..b975f267d9 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 f0b1325049..b975f267d9 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 dfed86af19..6154239cbf 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 479e90196a..37b32f7c2c 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 bf7069f48f..4d77ff8b9d 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 bf7069f48f..4d77ff8b9d 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 8776e5215f..fda29c7f11 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 02de38e58a..8680f18947 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 37b9b495dc..d9cacd12e8 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 d341c004f1..5401009565 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 49a1cc707e..b81a463e00 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 49a1cc707e..b81a463e00 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 a5fc0ae662..09496398f7 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 82e09004fb..a89e5e6aad 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 b0700ae1a1..022573e9d9 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 b0700ae1a1..022573e9d9 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 c5e2cf3f55..dbe7921434 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 37c6c432ca..fb855de221 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 9973f9daa3..f348fc8373 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 f3d49f6332..31b1ae0b13 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 10f1bfc6ba..53c9404808 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 4782bfdd6a..b2866f274c 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 be252b899a..54f2497907 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 be252b899a..54f2497907 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 88e4f904de..f5bdf5a5d1 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 99ec3ea3d4..fe4cd48904 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 79b5b31a75..e6e78fa997 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 5c724b1a8f..4841548982 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 a8e84eddf7..11f58d13e5 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 13af9007f8..5491fb58d1 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 e273cdb2b9..5c1f38c63b 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 0b953906d7..af84a0862f 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 c5507d123a..f54756c396 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 16280a1e91..06dc3413ba 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 17b65b33af..e80b61cc8b 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 e4038ad027..f028f7899c 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 c9aa963a5f..b274988725 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 16bf7af352..af410626c5 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 f0a5a37959..3102792077 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 16bf7af352..af410626c5 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 c169f35f1f..0fb5465519 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 e682c266d6..bfdec39e32 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 570c03c951..afb14178ea 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 71abc258ae..671dba8a74 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 d6e3d73d64..531c50678f 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 839c8f41df..1bba130557 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 f630cf4c37..f46819d3e9 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 83a016b19b..b664766b0b 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 a147ef6809..6df6026c61 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 839c8f41df..1bba130557 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 c935fefb33..c2f3d72ab2 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 b9d02e48b1..27a96f00e0 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 df6df9fccb..a667011669 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 a940b83e4a..3428aaa42d 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 2cc4807109..6b723df95a 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 7154c64566..fd995d7a32 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 d0fc312baa..cdbbf5e57d 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 24dc49cf90..c8b49975b8 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 806e67e21a..946707cba3 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 2abcb13757..8277d7a317 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 325ad4b164..ebe902d062 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 a0b934f8e7..f78fb9852f 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 a37ce212fc..3dc37bd79f 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 d3fca17f0b..ce295566ca 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 750bbe53ef..f8f1dbb2fe 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 2aec2d39f3..afd028dbce 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 b60d3f275a..e6120a8fcc 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 f910bc061e..57362d546f 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 1406cd29c0..2de40ceb99 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 b77d9dd8a7..20c34b1477 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 3afd202d33..4b8bb7bc9d 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 16018d4123..86245ede4b 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 5b50612291..bb6a9c3236 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 515229dde2..0407ee98a4 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 af47368a12..533c4b1ac7 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 ebd914649f..90413b3147 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 1bd0ab3950..e08b0f9e0b 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 2b7a20eb13..e02349631b 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 ec20daef15..08506f7fb3 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 d4681ff66f..07046c63cf 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 af47368a12..533c4b1ac7 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 11cd65eb0f..10790602bc 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 48a6d1202f..d8b5d5d748 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 ad8e838a8c..9196a0dc7c 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 cfa6465169..cd01f4aa19 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 df54238bf6..1625137205 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 c92d80212a..56a63480d7 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 a0036bd9ef..d911b195f9 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 b39363d2a7..a61a09a59a 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 c92d80212a..56a63480d7 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 3eb127648d..862a77d464 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 25890b9053..434a31d24d 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 658ef72d45..630c8e4db7 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 25890b9053..434a31d24d 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 cb8a824edb..74ea996d2a 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 9c846cc784..4b6850749d 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 5dd5f8a624..297c94344f 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 da857f7874..f84fbf6fd8 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 74cbf83fec..583a6dea59 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 65764b052f..018e63a835 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 896772b276..078514628a 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 1bc5738c6a..85f8bd06ca 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 80201dba3d..1d8369f31e 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 b03937849f..a7a3073160 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 b780125ba1..1daafed189 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 ac99108a56..b891d0856b 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 56e3d3a3b0..a876a37620 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 2108ac9ed4..1156cccd7f 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 1fa8208ac3..10f35e6953 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 3edc59bdf6..c70c23eb47 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 d8f8b690fc..971d3d92ed 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 790b44766a..4fea0db682 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 9622be87f9..474d4dd878 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 c22b3ead5d..5eb4cd2b84 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 db428ba587..4b98d2096c 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 45e74e79ce..b856e1f29f 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 7e6638a7e7..21c488b4cc 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 d2c997037a..a374b2ee72 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 5d6c694d10..a50ad650aa 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 a4c5e38289..3e05757d94 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 bfff4db7a1..f63aec9e64 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 d2c997037a..a374b2ee72 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 e289ac2035..7fe93d4ef0 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 a4c5e38289..3e05757d94 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 a9ca62b2c4..5750323198 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 47f36bcad0..a8caa3c197 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 47f36bcad0..a8caa3c197 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 f826499e30..7f8cf4e07f 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 cf4878155a..2d55290121 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 67761872c6..c59d860326 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 c131f6dbe1..72e4c186ac 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 20463c6aba..90d27d3f31 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 67761872c6..c59d860326 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 29e6e159f6..d66ea73ff7 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 418a7ca610..2785a0e8b5 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 4772826c93..029f5d3ee5 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 336074baaa..09d6c8d4ec 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 943993aa38..37bd7b9e7f 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 7456a34359..1d4ad6a2e1 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 cc891eaeda..f0abcf9580 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 c7e59ac79b..ef0265caa0 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 fb2f6064fb..e63da3cacf 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 fb2f6064fb..e63da3cacf 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 dac54e8447..da8882e3bf 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 742167bf9f..b34cd3d437 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 5ff7394eec..03de94359b 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 9dd79cbd7c..f230d844d0 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 bea62987f5..4c2e15028f 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 824ada2490..693814464e 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 3070fbea85..d0f7ce4c5e 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 cc1e09366e..471b4f4317 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 811a12a70c..a9112d0ec2 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 bfc5b54da5..7410c9669d 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 5d4ca92e48..c53d895546 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 8ced2454c7..05f8b50fa5 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 6413224a28..aa820c53b4 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 9042fb29fa..129b9dbb7d 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 ae34bb17a0..c654ae883a 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 be3ad556a6..c7cef62ba4 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 605855deb7..74742dfe9f 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 8ef97cae76..119cfb8ee9 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 36674cc72c..72b29ee4b5 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 37f4796d76..1d0f352383 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 2ff7e96f44..4932392602 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 8cb9a0cd0a..74250a387b 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 b11f1bbe65..d89e29b990 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 aed27e7915..e6adf5f71a 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 3245d44e8a..36717f5eb9 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 9adc271159..dd34310e22 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 75d2d2c2a2..a911ef84fe 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 86cf3cb0b6..f8dfa701d1 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 fc8b603fa2..ac815c8c69 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 3ae653988f..3f0c0e8784 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 2dc76a51fa..819a72c342 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 1418e06b87..63cdd6ddaa 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 634f18e7ff..223e37b322 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 ad7f55c6e1..f26ade253e 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 898603a051..0def9d5e17 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 48c07b16d9..1b81018bcd 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 6f33423b8a..2efa0572c4 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 4070a21084..89c39c3332 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 26d799850e..b3fcc7be97 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 1ac30c7693..6ae1998b02 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 dd1388fcdb..08b36d23cf 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 d43bb5ba71..c352274c8d 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 67dbf23434..c169bc73d8 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 4007d9fc2b..03338a17a5 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 f0c3f00bbe..fae5d8bb73 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 93e35b59ba..446085572d 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 0522fd9b1f..c1de1a7fa8 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 ed5e66eef8..db1314706b 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 6831dd6fae..027b25dfae 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 673f3cb7f8..f35f297e34 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 77791e5db3..b6f43ba997 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 029b0d5d41..9ea5eab169 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 33d8805bd7..8711d7920b 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 2459de629c..0c5f17d287 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 d155682045..c4c38f48f1 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 9aedd78cee..eb05502309 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 7f40b01288..f294bcc351 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 4d2d160ee7..23703954a9 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 8e07c5bfb0..bffc7ea9c2 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 aaaf2066bd..10ad73cec8 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 be83e8eda2..bbfbaa83a7 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 28680069d4..64b868a70e 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 34d2dd67f0..02a5f27a3c 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 3745855f6d..243cfa9c2f 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 ef4892aecc..7d17299d0f 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 6813f9b4ce..2f3271613d 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 d25f1c8743..5a5909b1b3 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 05bb0a88aa..d23ea52b4b 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 700e77372f..5315d0cd9d 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 a74c967ba4..ceaf06b6d3 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 13818c296a..c863908c42 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 2048108734..82da9dfb8b 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 614bd9e3fa..c24d363256 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 bb9f77e8cc..b4121ce03e 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 12a79e474b..fe10d28861 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 76c8b2306e..c21749e5a4 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 7c70f0b8d2..073705c754 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 63769deb59..4ad7701448 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 b17db3e2ea..7e85935bd9 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 16a4ca2855..bf6c36e621 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 1ee72d337b..854c845d6d 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 c792cb4019..006d719f40 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 93bc6b09b7..21189b83ce 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 3b3c86763c..c0da98e5ee 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 7fac4c977d..32e5cc12ce 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 5076fe510e..863d92d374 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 93bc6b09b7..21189b83ce 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 5e8e8da692..738797ba44 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 1be81366c5..39a3f97b6b 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 f44265846f..1b08eaa20c 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 1be81366c5..39a3f97b6b 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 d24cf60095..1067c80acb 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 05f22d0d2f..a6bcdcbde5 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 0aea3f5df3..691d4b933b 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 7fd8a091cc..7d937e511d 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 2b269c172e..cca6fbf0af 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 453e9963a8..760bab7520 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 5efdf7b71f..9af8534259 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 141236c663..6054219017 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 f184a84848..eba76679a0 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 179bf5d51c..d35f6dbb6b 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 141236c663..6054219017 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 ecc51a9e15..348576ae0f 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 c049c4b89d..cf55542e73 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 1c620df74c..aaad754781 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 43e4daae2e..beb29908e7 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 1c866a3d0b..2323a1b3b1 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 4c3b1d9b0e..481f9f4779 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 ca3d355287..6a56c3fe4f 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 4ebf8c55e4..99c084f806 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 fcfa1291aa..263e18eb79 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 d511ea5ff0..27f216fb4f 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 2f26afde9e..5383b732d9 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 0de1be3fe9..aa6a662a80 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 94013b9d07..7f9f8f5bb2 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 6745332c51..6a5f0d991f 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 e1f78d726d..eec083da61 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 a6d28a427c..7e94d274b3 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 b9a5daac45..2e02ebd367 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 3e60958f8e..fb5331bf14 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 5c64bdf12b..25da44bf4c 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 d45c2ef54b..7d9eebab14 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 b7059e637b..ef07b833a7 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 172b041a46..5cddcd596e 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 acbb428bf1..d0c16fbcca 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 1de6de7fca..9550a72ca4 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 c84c1456e5..c4d1f859c3 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 b2077daa8d..4da97de4af 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 f14e68e1d9..f6280b08e3 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 c84c1456e5..c4d1f859c3 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 183dd98719..e484d6c912 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 4c7a4265cd..d92d286260 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 2992e1d25c..341bdf8b1e 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 183dd98719..e484d6c912 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 2a942543ac..1e70ed5db9 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 21d36197c4..84f96bf5f8 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 183dd98719..e484d6c912 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 4828455359..de4bf3866e 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 c872bb48de..8ded758604 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 5a9ddea449..315af03442 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 6ff5e75617..4ff0ecd167 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 180b8998a3..f04d7f8fbe 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 32237336a1..affb7ccdec 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 b2cda11d2a..3c39508e72 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 30c4b38a25..6c29748fe6 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 e26a6f1356..1192ca2936 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 05a1bd64d7..31f76ac219 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 8bbcc6421f..30f58541ec 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 4667abeced..05de62654c 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 c55cd3835b..63ff609c99 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 1c7e7966b8..7d3aad9224 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 60599ad223..47aa8b9e1b 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 cf47682b14..950e96b4e8 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 e09f2ea5f6..711d4f0a38 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 cf47682b14..950e96b4e8 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 926479c1e8..76a545d6a8 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 b761f85ed5..fc5c8a2906 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 fdd63471ed..f88b8a6e32 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 15ee6fc440..eccdbd8d51 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 4a81d113c9..284c2a429a 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 e3c0462a14..2c5ee51a9b 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 8b0a2476b4..a0b924e812 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 1d22085a5b..007fb9a4a1 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 66ccc22bfe..72cc6520e3 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 54368fa721..318f64f854 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 b0ca30f0e6..a9305b79fe 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 f0849705aa..f836a85455 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 abcecf2686..0f2e9ac47c 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 20151756e8..632b91c2cb 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 3dc7c4640a..338babc9c7 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 12021d9925..013c1e1902 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 3dc7c4640a..338babc9c7 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 d313d7dcd2..44ba583142 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 e298f5a124..8296ef7f42 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 b49d2c767a..ca3f5093b8 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 b49d2c767a..ca3f5093b8 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 03d8648c87..356fc5617d 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 a37193d901..97ed756261 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 a37193d901..97ed756261 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 6824c74162..06905de166 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 fa985cbe82..1fba4c4997 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 c8c432e1b9..6e0cddd970 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 9562dbb3b4..183c70105b 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 39be00f2b4..f0bee55af1 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 9562dbb3b4..183c70105b 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 01baca04d7..8d3b3edfe9 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 60b04a067d..9a101caa40 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 473ad54c8d..72e55ffc58 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 db8b8134f1..eb5ba01707 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 473ad54c8d..72e55ffc58 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 085bea0296..453f32c4db 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 264038c103..44327bf809 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 0e68a8a2f5..3cce680ca3 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 657a88bf06..f2779c7d5c 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 898ffa17bc..5a0054584c 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 5c0048c019..e03deeda2a 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 def835913c..862211d839 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 26370009d4..34a4c74001 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 ff2ff032f3..ccb83aec3d 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 5a42aa9f76..fc40840202 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 5a42aa9f76..fc40840202 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 a7e9b7d664..6637dfacef 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 2e6bdeb2e1..a92ec67a3a 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 765d1f24ba..ae2df1a1cd 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 b9ff7e0acd..bfce3c9c58 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 91748fc1bc..9f3861e073 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 4885a193f8..bede645732 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 e67cb3e34b..c67d8ddf1b 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 b08b2d704b..3b406ede42 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 4885a193f8..bede645732 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 ea550a31e0..e4ec0fb134 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 574846aa28..6d5d5fa41c 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 35dccbdbc8..d74e5b0554 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 26348706e0..c50ecfe119 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 35dccbdbc8..d74e5b0554 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 14ad85b1c8..289f1727c8 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 22c9565c27..95f26ebc02 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 df84e71811..912ef18df0 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 172fdad114..b3b1bb4da2 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 dc9ad7ee55..499d29749c 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 0c0cdc26f5..6622b6d7e3 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 b308303354..6cd8d464d7 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 950e3775d8..3589bcc7cd 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 0325543f19..d8486d9753 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 2708fde7ac..a451b58c9c 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 4e89ac9648..c5d90b9bc8 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 2708fde7ac..a451b58c9c 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 716935f065..2ca4d7ca38 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 4310903459..5110ba1abe 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 b975f267d9..f0b1325049 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 b975f267d9..f0b1325049 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 6154239cbf..dfed86af19 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 37b32f7c2c..479e90196a 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 4d77ff8b9d..bf7069f48f 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 4d77ff8b9d..bf7069f48f 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 fda29c7f11..8776e5215f 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 8680f18947..02de38e58a 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 abdebf2a9e..b06fb2ecf1 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 3d986aaf37..435701d5b5 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 84bf7ec643..3a97d40743 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 5b361393b0..7ef7323e95 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 5401009565..d341c004f1 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 449479b7d8..021ea8858c 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 6d0772af98..eb0d43327d 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 84437995c0..a1e0e1e1b2 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 04ed67af38..0febb45cfe 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 b81a463e00..49a1cc707e 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 b81a463e00..49a1cc707e 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 09496398f7..a5fc0ae662 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 a89e5e6aad..82e09004fb 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 d1ef33c8b2..0cb6523f05 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 11f20443f9..7dc085a7a4 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 c51ab29463..915969f127 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 c51ab29463..915969f127 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 dae8042c9a..21ba7c98f6 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 38b16a91fb..72dd55ef58 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 d9be998f8a..c646ae03db 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 f8aa0c040c..5db040f583 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 dfd53961ac..a0f2c064b0 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 4efce5d53d..e74a8267a2 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 54f2497907..be252b899a 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 54f2497907..be252b899a 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 f5bdf5a5d1..88e4f904de 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 fe4cd48904..99ec3ea3d4 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 a32f3c3068..78b84e2138 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 0f66d21fc2..368b68089d 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 80b2a2528f..53f77fb4ff 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 519a294b6a..828041239f 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 0c7710252f..0a63f448d3 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 d51f525dcb..43c62e8825 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 f54756c396..c5507d123a 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 06dc3413ba..16280a1e91 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 e80b61cc8b..17b65b33af 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 4369f2b066..e29eca6933 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 b16d6a849f..09712e70a9 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 e90cbb4e55..e2c492f143 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 77719a4a70..4d01e7fc86 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 af410626c5..16bf7af352 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 892443db6c..61dc8c20be 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 5c0258d1f9..68e0943cd3 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 e90cbb4e55..e2c492f143 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 af410626c5..16bf7af352 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 b92952e42b..cc57cc1dce 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 5387b24146..6f380da3f1 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 62d396e75a..4b1b527952 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 597828749c..5ddcc6a17b 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 71a039bd21..d3c60a4004 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 8bfa431d1c..3bfdd96bb1 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 ca040ebead..7008dbc3c4 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 83fdee1662..de206ca652 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 160fab7548..c3afaf67ba 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 4b54191ef5..1896c85f8f 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 fcafef4468..f8dfa374ba 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 0426c61322..57f3380c18 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 84f81cf5ec..de30bdc02d 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 3e95a4d3ac..1e43625767 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 a553e0b899..78ba124410 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 7e62f53b0d..e8d2880e45 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 8c5e56d680..b697188b54 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 86ad78d064..06e014afb5 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 ccaddb758e..e1093bdf29 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 5df93556be..ac291deb49 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 8c06ebd788..9f48ee33cf 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 7bc42d0a9f..57cdc7a9c9 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 573b33c211..7488095006 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 42d4583e02..bdf47c9d0a 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 8423962a3e..8b30337848 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 dbb102eec5..2e3371fb89 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 da71f29506..5eefa7c114 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 a247849a47..2ea377034c 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 f391050a00..c03a518af1 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 c59d860326..67761872c6 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 6a1ff3a423..4ff16bd347 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 90d27d3f31..20463c6aba 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 c59d860326..67761872c6 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 d66ea73ff7..29e6e159f6 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 2785a0e8b5..418a7ca610 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 029f5d3ee5..4772826c93 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 631972afc2..d92888173f 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 37bd7b9e7f..943993aa38 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 1d4ad6a2e1..7456a34359 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 f0abcf9580..cc891eaeda 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 683c77b066..92bdc7799f 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 e63da3cacf..fb2f6064fb 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 e63da3cacf..fb2f6064fb 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 da8882e3bf..dac54e8447 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 b34cd3d437..742167bf9f 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 03de94359b..5ff7394eec 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 f09e447f5d..9d0efc4679 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 4c2e15028f..bea62987f5 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 693814464e..824ada2490 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 8de25b999a..3325f10b87 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 d7c901468d..4bb4216465 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 6f5649a823..3570856f99 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 74742dfe9f..605855deb7 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 119cfb8ee9..8ef97cae76 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 a4de9d1517..af98370979 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 1d0f352383..37f4796d76 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 6e2e2fb4db..8348f2ab71 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 fa9df22441..11869e671e 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 ba7e73a1c0..f427df176f 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 7def080da5..c08b16c85e 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 4ce5b83bc1..5d457cdbf2 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 faf1f33ed5..54dc88ac35 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 a493503dde..5bd8e1f56c 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 521bb9a2ae..c5cea896bb 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 7f329e63ec..ac08a9b543 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 762aff51aa..ec7da81c54 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 91e6579dfa..976194efc1 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 d72053bd95..addffa2daf 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 b6aea1ec82..d636c54d90 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 685c496cc2..b63e8550ab 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 8ccf5670d6..25d758c16b 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 4cbe7510e4..d3a123f598 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 195a184120..8bd086f7ba 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 01636b04a9..6e8c63a9b5 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 2675f425f8..331eef6b0f 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 5d9a27392f..2350799f7e 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 30f0b95da5..68813f1eb1 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 ff3865c3b9..5b884ea7ca 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 2ed1eea025..962fcd0e35 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 db133a99f1..c772728c3c 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 dad0f52a79..492699916c 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 52c089331f..5260ba8d1a 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 b4e8d0913c..1dd38b3cd4 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 7f2ade9103..ac520d0e7b 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 7f490b9bac..62c8151b0f 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 70ef6f5cfd..4d26162207 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 868ca8b9fe..0e5b1b56e7 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 06a4f5d7b0..b540eccaaf 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 141236c663..6054219017 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 ecc51a9e15..348576ae0f 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 c049c4b89d..cf55542e73 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 7bdae73083..204508c6b3 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 bedac44794..c564a2d16b 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 f9b3dd0e32..28172bca32 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 ae156ffc54..a10dd609b4 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 8dc1c9c4a2..868eaaa7c1 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 4ebf8c55e4..99c084f806 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 fcba0d9aa2..78689ede73 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 d511ea5ff0..27f216fb4f 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 2f26afde9e..5383b732d9 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 0de1be3fe9..aa6a662a80 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 94013b9d07..7f9f8f5bb2 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 f0aab93993..c7efd45b80 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 e1f78d726d..eec083da61 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 a6d28a427c..7e94d274b3 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 b9a5daac45..2e02ebd367 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 84dc8bc9ed..8f488dbb4b 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 c91c14bac7..f761b95824 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 78d9ddf05c..381691b1f0 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 17f68db345..86cf87ab2c 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 2c0e3b1187..6557f4f4c5 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 aebfa63c09..5497ad7b57 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 9d82efd4ea..a3131033ff 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 b2bebe5de6..bf4d458034 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 f991151c4a..2834f65e3e 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 542d6d52c4..b35cd485cb 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 d705a0162b..8e769fe0ed 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 54c1793d71..6890d0be7a 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 c32a8ea9bd..4c681af50b 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 fc0c08e0a5..d66211df84 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 d9714abb66..a23a02b2ac 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 57c0cd35e7..67a346b331 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 90e2725d0d..8d578dbb51 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 fc0c08e0a5..d66211df84 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 5db8454f7b..bd9fb37882 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 e3038179e1..89b76aaed6 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 e675d03c07..0da89f1f7b 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 292a5d30c2..6f70843e20 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 cd12675859..50cf42bb5a 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 762d3c21d8..0da962b248 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 c84c1456e5..c4d1f859c3 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 9c683943e0..59bc30dd58 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 a3c31a1b43..f57e9958bf 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 c84c1456e5..c4d1f859c3 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 c526c93de8..7bd279bd0c 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 0ae990d9a5..fec220f8ec 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 0ad166cf9b..6c56317816 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 bbbd043c5e..c75afba0a1 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 183dd98719..e484d6c912 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 78b0842c2d..5a01edce2a 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 504cb5b486..6e4c36ec85 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 5d9d347fa2..e00b0e96f0 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 21f310c190..f48b512c45 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 5a9ddea449..315af03442 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 f6b6d6f371..38bc99f7e8 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 180b8998a3..f04d7f8fbe 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 32237336a1..affb7ccdec 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 b2cda11d2a..3c39508e72 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 f870381f56..27c7d6b0c0 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 e26a6f1356..1192ca2936 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 05a1bd64d7..31f76ac219 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 318fab845d..d90a901513 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 4667abeced..05de62654c 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 5cd96fe047..adf0b9d8d5 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 6f83069ac3..a7861a18ed 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 bc2ca77c72..1b640d0675 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 cf47682b14..950e96b4e8 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 1e639aa34f..3fdf7e333a 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 cf47682b14..950e96b4e8 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 926479c1e8..76a545d6a8 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 f948400973..c6f75cb115 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 fdd63471ed..f88b8a6e32 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 f34494aeea..3df433d189 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 332d3fa32c..48e8a4ed82 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 e3c0462a14..2c5ee51a9b 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 ad488a6cd6..2e2ca803c4 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 1d22085a5b..007fb9a4a1 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 66ccc22bfe..72cc6520e3 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 54368fa721..318f64f854 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 8feb0c8489..4b42e7b7e4 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 f0849705aa..f836a85455 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 b2035669ab..387f0c12e5 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 399a1a2a02..c100fffe65 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 3dc7c4640a..338babc9c7 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 27d163c3f2..d808d24927 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 3dc7c4640a..338babc9c7 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 d313d7dcd2..44ba583142 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 e298f5a124..8296ef7f42 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 b49d2c767a..ca3f5093b8 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 b49d2c767a..ca3f5093b8 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 03d8648c87..356fc5617d 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 a37193d901..97ed756261 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 a37193d901..97ed756261 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 6f79f6e259..32f67b6f00 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 fa985cbe82..1fba4c4997 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 c8c432e1b9..6e0cddd970 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 9562dbb3b4..183c70105b 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 e6d680e558..1427b4536f 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 9562dbb3b4..183c70105b 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 01baca04d7..8d3b3edfe9 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 60b04a067d..9a101caa40 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 e2190ad8f8..cc473c03d3 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 a5b4ce3af3..251b18ce24 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 34068bb5a0..e238ae9c63 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 b2fbcb695d..2d4159efbb 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 fc8c1ff781..9bc17fdb9e 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 ea3f73b30c..bcc02a761e 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 9cfba0ca72..117af56bc3 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 ff87a637bd..5d08480d9a 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 9205434cea..f253722afe 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 9205434cea..f253722afe 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 667449c780..fd92e9f1fa 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 ed34f0dcdc..5659a826bc 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 7c9bf72813..42520178b6 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 942149628c..31697dd369 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 5889591fd1..f5f63bf8c2 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 ba23decbdb..29d3d419b6 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 7320900989..51d619f8cc 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 90a415bf90..a247dee9a0 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 5889591fd1..f5f63bf8c2 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 8408e5825f..2fb46fb7ba 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 802cfa40b2..7c4f5fd698 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 be9f519d2c..2ce8f542f9 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 57db7581de..2e49772c97 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 82cb300712..178d8338f2 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 1146da9a4b..e5931e4d94 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 82cb300712..178d8338f2 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 90b5744b21..6ff6db1f65 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 8613ca29a0..2a577f1d76 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 69fa48ad49..a62d625ae0 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 7302c48448..ca32463189 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 3de93600da..e4bd0c3a59 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 35a9aadc4c..4a177d1d58 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 24dc3fbed8..d045cac7fa 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 35a9aadc4c..4a177d1d58 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 e075e96cd8..4ffff834f2 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 dc914aee8f..8bd052a646 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 4a66edad40..a1c3aac558 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 56b0fafa06..d908468b2f 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 ed54f08078..5cc4e537dd 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 e585b97e78..ffa8c913e3 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 f1a9f03f45..97e328a25c 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 a53fbc7767..b8f3bb1e13 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 1d2d105e98..9526a8884a 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 5ac6e8ee1f..c3e63abb72 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 b54287eae6..207e0aaaa7 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 7bea2e18b1..54c7fe1209 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 c44af4bf36..ce8ccc6ed3 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 eb6585878e..a55a9640c0 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 62529cdb75..90eaaba82a 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 a595c27e40..1272d768b8 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 c47287e002..8ed07e871b 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 8721fbfc52..482f957cde 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 f9476caf18..27a55412d5 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 e24f5a4791..99add2f8a4 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 ee29baff5a..cd608eaae7 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 85955f3ebd..3f6e2879e0 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 a93c12fef8..cb8190ef9e 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 03eac24890..a723dfd08f 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 b911da1791..6dca0e83ec 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 aa7c1d1c80..6b087b72b7 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 b5146e95e0..2775067f7a 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 742d531cb9..b54ba9d2af 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 ce4c89f998..cf5ad71dd6 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 923ea715aa..bf6d13f26e 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 84aac1c56f..73565d9ab1 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 473ad54c8d..72e55ffc58 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 c478007a6b..328ba025ad 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 473ad54c8d..72e55ffc58 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 085bea0296..453f32c4db 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 264038c103..44327bf809 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 7801be9509..e7300fb261 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 657a88bf06..f2779c7d5c 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 44926cb52c..fe8e8b04a8 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 5c0048c019..e03deeda2a 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 def835913c..862211d839 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 26370009d4..34a4c74001 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 97de04da44..c26fa6e35a 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 61e27f8b9d..ce4d3d19e0 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 61e27f8b9d..ce4d3d19e0 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 0236cc2897..04c4c086b1 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 db4d74618e..d8cb2cd2d7 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 e4a4dba554..10fcef1cb2 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 d62ea62084..834ca7f96e 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 d1f2e440b0..f17fd6e151 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 31ddc03f19..da2f4776bd 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 1722f8ad9a..7218199a3d 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 a95e5dcc84..dd93e9bb2c 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 ba5030c002..9f75f6b070 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 a0c95dfc13..03393f19b2 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 55d306aa22..16cd161715 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 ce801d04ac..33934b31ae 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 151adb55b5..1257ff9c64 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 f9c79fc46a..e08cf249e1 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 aa4f1b3c48..59a819eaab 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 8854647965..782e77971c 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 34e3ccaece..e28bf81ce0 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 329f0ceae5..17c29f994c 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 3aa7fddda8..154e20ad0c 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 243bb91401..c3ffd4077f 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 168adce6d2..4cbd6339c3 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 ff696b22cd..6506b2ca27 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 e5534ec2e1..7a90e30e81 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 752f60c183..2415bc71ea 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 35dccbdbc8..d74e5b0554 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 ff888fae90..9c8a9e292b 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 35dccbdbc8..d74e5b0554 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 14ad85b1c8..289f1727c8 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 22c9565c27..95f26ebc02 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 e39b5d93a5..a728b84c5d 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 172fdad114..b3b1bb4da2 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 7d95b99dca..f425706d75 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 0c0cdc26f5..6622b6d7e3 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 b308303354..6cd8d464d7 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 950e3775d8..3589bcc7cd 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 21fdcf0265..a752ec6227 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 2708fde7ac..a451b58c9c 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 4f5f2169e5..39983e2a9b 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 2708fde7ac..a451b58c9c 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 716935f065..2ca4d7ca38 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 4310903459..5110ba1abe 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 b975f267d9..f0b1325049 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 b975f267d9..f0b1325049 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 6154239cbf..dfed86af19 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 37b32f7c2c..479e90196a 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 4d77ff8b9d..bf7069f48f 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 4d77ff8b9d..bf7069f48f 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 fda29c7f11..8776e5215f 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 8680f18947..02de38e58a 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 d9cacd12e8..37b9b495dc 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 5401009565..d341c004f1 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 b81a463e00..49a1cc707e 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 b81a463e00..49a1cc707e 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 09496398f7..a5fc0ae662 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 a89e5e6aad..82e09004fb 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 022573e9d9..b0700ae1a1 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 022573e9d9..b0700ae1a1 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 dbe7921434..c5e2cf3f55 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 fb855de221..37c6c432ca 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 f348fc8373..9973f9daa3 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 31b1ae0b13..f3d49f6332 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 53c9404808..10f1bfc6ba 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 b2866f274c..4782bfdd6a 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 54f2497907..be252b899a 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 54f2497907..be252b899a 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 f5bdf5a5d1..88e4f904de 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 fe4cd48904..99ec3ea3d4 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 e6e78fa997..79b5b31a75 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 4841548982..5c724b1a8f 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 11f58d13e5..a8e84eddf7 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 5491fb58d1..13af9007f8 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 5c1f38c63b..e273cdb2b9 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 af84a0862f..0b953906d7 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 f54756c396..c5507d123a 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 06dc3413ba..16280a1e91 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 e80b61cc8b..17b65b33af 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 f028f7899c..e4038ad027 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 b274988725..c9aa963a5f 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 af410626c5..16bf7af352 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 3102792077..f0a5a37959 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 af410626c5..16bf7af352 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 0fb5465519..c169f35f1f 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 bfdec39e32..e682c266d6 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 afb14178ea..570c03c951 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 671dba8a74..71abc258ae 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 531c50678f..d6e3d73d64 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 1bba130557..839c8f41df 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 f46819d3e9..f630cf4c37 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 b664766b0b..83a016b19b 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 6df6026c61..a147ef6809 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 1bba130557..839c8f41df 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 c2f3d72ab2..c935fefb33 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 27a96f00e0..b9d02e48b1 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 a667011669..df6df9fccb 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 3428aaa42d..a940b83e4a 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 6b723df95a..2cc4807109 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 fd995d7a32..7154c64566 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 cdbbf5e57d..d0fc312baa 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 c8b49975b8..24dc49cf90 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 946707cba3..806e67e21a 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 8277d7a317..2abcb13757 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 ebe902d062..325ad4b164 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 f78fb9852f..a0b934f8e7 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 3dc37bd79f..a37ce212fc 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 ce295566ca..d3fca17f0b 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 f8f1dbb2fe..750bbe53ef 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 afd028dbce..2aec2d39f3 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 e6120a8fcc..b60d3f275a 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 57362d546f..f910bc061e 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 2de40ceb99..1406cd29c0 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 20c34b1477..b77d9dd8a7 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 4b8bb7bc9d..3afd202d33 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 86245ede4b..16018d4123 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 bb6a9c3236..5b50612291 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 0407ee98a4..515229dde2 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 533c4b1ac7..af47368a12 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 90413b3147..ebd914649f 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 e08b0f9e0b..1bd0ab3950 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 e02349631b..2b7a20eb13 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 08506f7fb3..ec20daef15 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 07046c63cf..d4681ff66f 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 533c4b1ac7..af47368a12 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 10790602bc..11cd65eb0f 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 d8b5d5d748..48a6d1202f 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 9196a0dc7c..ad8e838a8c 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 cd01f4aa19..cfa6465169 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 1625137205..df54238bf6 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 56a63480d7..c92d80212a 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 d911b195f9..a0036bd9ef 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 a61a09a59a..b39363d2a7 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 56a63480d7..c92d80212a 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 862a77d464..3eb127648d 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 434a31d24d..25890b9053 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 630c8e4db7..658ef72d45 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 434a31d24d..25890b9053 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 74ea996d2a..cb8a824edb 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 4b6850749d..9c846cc784 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 297c94344f..5dd5f8a624 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 f84fbf6fd8..da857f7874 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 583a6dea59..74cbf83fec 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 018e63a835..65764b052f 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 078514628a..896772b276 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 85f8bd06ca..1bc5738c6a 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 1d8369f31e..80201dba3d 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 a7a3073160..b03937849f 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 1daafed189..b780125ba1 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 b891d0856b..ac99108a56 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 a876a37620..56e3d3a3b0 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 1156cccd7f..2108ac9ed4 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 10f35e6953..1fa8208ac3 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 c70c23eb47..3edc59bdf6 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 971d3d92ed..d8f8b690fc 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 4fea0db682..790b44766a 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 474d4dd878..9622be87f9 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 5eb4cd2b84..c22b3ead5d 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 4b98d2096c..db428ba587 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 b856e1f29f..45e74e79ce 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 21c488b4cc..7e6638a7e7 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 a374b2ee72..d2c997037a 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 a50ad650aa..5d6c694d10 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 3e05757d94..a4c5e38289 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 f63aec9e64..bfff4db7a1 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 a374b2ee72..d2c997037a 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 7fe93d4ef0..e289ac2035 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 3e05757d94..a4c5e38289 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 5750323198..a9ca62b2c4 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 a8caa3c197..47f36bcad0 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 a8caa3c197..47f36bcad0 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 7f8cf4e07f..f826499e30 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 2d55290121..cf4878155a 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 c59d860326..67761872c6 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 72e4c186ac..c131f6dbe1 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 90d27d3f31..20463c6aba 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 c59d860326..67761872c6 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 d66ea73ff7..29e6e159f6 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 2785a0e8b5..418a7ca610 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 029f5d3ee5..4772826c93 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 09d6c8d4ec..336074baaa 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 37bd7b9e7f..943993aa38 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 1d4ad6a2e1..7456a34359 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 f0abcf9580..cc891eaeda 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 ef0265caa0..c7e59ac79b 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 e63da3cacf..fb2f6064fb 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 e63da3cacf..fb2f6064fb 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 da8882e3bf..dac54e8447 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 b34cd3d437..742167bf9f 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 03de94359b..5ff7394eec 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 f230d844d0..9dd79cbd7c 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 4c2e15028f..bea62987f5 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 693814464e..824ada2490 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 d0f7ce4c5e..3070fbea85 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 471b4f4317..cc1e09366e 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 a9112d0ec2..811a12a70c 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 7410c9669d..bfc5b54da5 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 c53d895546..5d4ca92e48 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 05f8b50fa5..8ced2454c7 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 aa820c53b4..6413224a28 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 129b9dbb7d..9042fb29fa 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 c654ae883a..ae34bb17a0 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 c7cef62ba4..be3ad556a6 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 74742dfe9f..605855deb7 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 119cfb8ee9..8ef97cae76 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 72b29ee4b5..36674cc72c 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 1d0f352383..37f4796d76 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 4932392602..2ff7e96f44 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 74250a387b..8cb9a0cd0a 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 d89e29b990..b11f1bbe65 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 e6adf5f71a..aed27e7915 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 36717f5eb9..3245d44e8a 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 dd34310e22..9adc271159 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 a911ef84fe..75d2d2c2a2 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 f8dfa701d1..86cf3cb0b6 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 ac815c8c69..fc8b603fa2 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 3f0c0e8784..3ae653988f 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 819a72c342..2dc76a51fa 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 63cdd6ddaa..1418e06b87 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 223e37b322..634f18e7ff 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 f26ade253e..ad7f55c6e1 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 0def9d5e17..898603a051 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 1b81018bcd..48c07b16d9 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 2efa0572c4..6f33423b8a 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 89c39c3332..4070a21084 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 b3fcc7be97..26d799850e 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 6ae1998b02..1ac30c7693 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 6054219017..141236c663 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 348576ae0f..ecc51a9e15 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 cf55542e73..c049c4b89d 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 99c084f806..4ebf8c55e4 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 27f216fb4f..d511ea5ff0 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 5383b732d9..2f26afde9e 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 aa6a662a80..0de1be3fe9 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 7f9f8f5bb2..94013b9d07 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 eec083da61..e1f78d726d 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 7e94d274b3..a6d28a427c 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 2e02ebd367..b9a5daac45 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 5cddcd596e..172b041a46 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 9550a72ca4..1de6de7fca 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 c4d1f859c3..c84c1456e5 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 f6280b08e3..f14e68e1d9 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 c4d1f859c3..c84c1456e5 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 e484d6c912..183dd98719 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 341bdf8b1e..2992e1d25c 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 e484d6c912..183dd98719 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 84f96bf5f8..21d36197c4 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 e484d6c912..183dd98719 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 8ded758604..c872bb48de 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 315af03442..5a9ddea449 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 f04d7f8fbe..180b8998a3 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 affb7ccdec..32237336a1 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 3c39508e72..b2cda11d2a 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 1192ca2936..e26a6f1356 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 31f76ac219..05a1bd64d7 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 05de62654c..4667abeced 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 950e96b4e8..cf47682b14 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 950e96b4e8..cf47682b14 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 76a545d6a8..926479c1e8 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 f88b8a6e32..fdd63471ed 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 2c5ee51a9b..e3c0462a14 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 007fb9a4a1..1d22085a5b 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 72cc6520e3..66ccc22bfe 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 318f64f854..54368fa721 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 f836a85455..f0849705aa 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 338babc9c7..3dc7c4640a 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 338babc9c7..3dc7c4640a 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 44ba583142..d313d7dcd2 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 8296ef7f42..e298f5a124 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 ca3f5093b8..b49d2c767a 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 ca3f5093b8..b49d2c767a 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 356fc5617d..03d8648c87 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 97ed756261..a37193d901 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 97ed756261..a37193d901 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 1fba4c4997..fa985cbe82 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 6e0cddd970..c8c432e1b9 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 183c70105b..9562dbb3b4 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 183c70105b..9562dbb3b4 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 8d3b3edfe9..01baca04d7 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 9a101caa40..60b04a067d 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 72e55ffc58..473ad54c8d 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 72e55ffc58..473ad54c8d 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 453f32c4db..085bea0296 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 44327bf809..264038c103 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 f2779c7d5c..657a88bf06 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 e03deeda2a..5c0048c019 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 862211d839..def835913c 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 34a4c74001..26370009d4 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 ccb83aec3d..4dd4e6c27c 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 fc40840202..5a42aa9f76 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 fc40840202..5a42aa9f76 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 6637dfacef..a7e9b7d664 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 a92ec67a3a..2e6bdeb2e1 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 ae2df1a1cd..765d1f24ba 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 bfce3c9c58..b9ff7e0acd 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 bede645732..4885a193f8 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 3b406ede42..b08b2d704b 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 bede645732..4885a193f8 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 e4ec0fb134..ea550a31e0 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 6d5d5fa41c..574846aa28 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 d74e5b0554..35dccbdbc8 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 d74e5b0554..35dccbdbc8 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 289f1727c8..14ad85b1c8 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 95f26ebc02..22c9565c27 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 b3b1bb4da2..172fdad114 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 6622b6d7e3..0c0cdc26f5 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 6cd8d464d7..b308303354 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 3589bcc7cd..950e3775d8 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 a451b58c9c..2708fde7ac 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 a451b58c9c..2708fde7ac 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 2ca4d7ca38..716935f065 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 5110ba1abe..4310903459 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 f0b1325049..b975f267d9 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 f0b1325049..b975f267d9 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 dfed86af19..6154239cbf 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 479e90196a..37b32f7c2c 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 bf7069f48f..4d77ff8b9d 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 bf7069f48f..4d77ff8b9d 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 8776e5215f..fda29c7f11 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 02de38e58a..8680f18947 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 435701d5b5..3d986aaf37 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 3a97d40743..84bf7ec643 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 d341c004f1..5401009565 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 eb0d43327d..6d0772af98 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 a1e0e1e1b2..84437995c0 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 0febb45cfe..04ed67af38 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 49a1cc707e..b81a463e00 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 49a1cc707e..b81a463e00 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 a5fc0ae662..09496398f7 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 82e09004fb..a89e5e6aad 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 0cb6523f05..d1ef33c8b2 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 7dc085a7a4..11f20443f9 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 915969f127..c51ab29463 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 915969f127..c51ab29463 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 21ba7c98f6..dae8042c9a 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 72dd55ef58..38b16a91fb 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 be252b899a..54f2497907 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 be252b899a..54f2497907 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 88e4f904de..f5bdf5a5d1 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 99ec3ea3d4..fe4cd48904 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 c5507d123a..f54756c396 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 16280a1e91..06dc3413ba 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 17b65b33af..e80b61cc8b 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 09712e70a9..b16d6a849f 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 e2c492f143..e90cbb4e55 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 4d01e7fc86..77719a4a70 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 16bf7af352..af410626c5 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 68e0943cd3..5c0258d1f9 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 e2c492f143..e90cbb4e55 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 16bf7af352..af410626c5 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 cc57cc1dce..b92952e42b 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 6f380da3f1..5387b24146 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 4b1b527952..62d396e75a 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 d3c60a4004..71a039bd21 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 c3afaf67ba..160fab7548 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 de30bdc02d..84f81cf5ec 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 78ba124410..a553e0b899 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 e8d2880e45..7e62f53b0d 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 e1093bdf29..ccaddb758e 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 9f48ee33cf..8c06ebd788 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 57cdc7a9c9..7bc42d0a9f 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 7488095006..573b33c211 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 bdf47c9d0a..42d4583e02 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 8b30337848..8423962a3e 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 5eefa7c114..da71f29506 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 2ea377034c..a247849a47 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 c03a518af1..f391050a00 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 67761872c6..c59d860326 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 20463c6aba..90d27d3f31 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 67761872c6..c59d860326 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 29e6e159f6..d66ea73ff7 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 418a7ca610..2785a0e8b5 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 4772826c93..029f5d3ee5 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 943993aa38..37bd7b9e7f 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 7456a34359..1d4ad6a2e1 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 cc891eaeda..f0abcf9580 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 fb2f6064fb..e63da3cacf 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 fb2f6064fb..e63da3cacf 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 dac54e8447..da8882e3bf 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 742167bf9f..b34cd3d437 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 5ff7394eec..03de94359b 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 bea62987f5..4c2e15028f 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 824ada2490..693814464e 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 605855deb7..74742dfe9f 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 8ef97cae76..119cfb8ee9 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 37f4796d76..1d0f352383 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 5d457cdbf2..4ce5b83bc1 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 54dc88ac35..faf1f33ed5 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 c5cea896bb..521bb9a2ae 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 ac08a9b543..7f329e63ec 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 ec7da81c54..762aff51aa 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 976194efc1..91e6579dfa 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 addffa2daf..d72053bd95 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 b63e8550ab..685c496cc2 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 25d758c16b..8ccf5670d6 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 d3a123f598..4cbe7510e4 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 8bd086f7ba..195a184120 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 6e8c63a9b5..01636b04a9 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 2350799f7e..5d9a27392f 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 68813f1eb1..30f0b95da5 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 5b884ea7ca..ff3865c3b9 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 962fcd0e35..2ed1eea025 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 c772728c3c..db133a99f1 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 5260ba8d1a..52c089331f 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 1dd38b3cd4..b4e8d0913c 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 ac520d0e7b..7f2ade9103 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 62c8151b0f..7f490b9bac 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 4d26162207..70ef6f5cfd 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 b540eccaaf..06a4f5d7b0 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 6054219017..141236c663 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 348576ae0f..ecc51a9e15 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 cf55542e73..c049c4b89d 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 99c084f806..4ebf8c55e4 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 27f216fb4f..d511ea5ff0 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 5383b732d9..2f26afde9e 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 aa6a662a80..0de1be3fe9 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 7f9f8f5bb2..94013b9d07 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 eec083da61..e1f78d726d 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 7e94d274b3..a6d28a427c 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 2e02ebd367..b9a5daac45 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 381691b1f0..78d9ddf05c 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 6557f4f4c5..2c0e3b1187 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 5497ad7b57..aebfa63c09 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 a3131033ff..9d82efd4ea 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 bf4d458034..b2bebe5de6 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 2834f65e3e..f991151c4a 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 8e769fe0ed..d705a0162b 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 6890d0be7a..54c1793d71 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 4c681af50b..c32a8ea9bd 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 d66211df84..fc0c08e0a5 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 a23a02b2ac..d9714abb66 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 8d578dbb51..90e2725d0d 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 d66211df84..fc0c08e0a5 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 bd9fb37882..5db8454f7b 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 89b76aaed6..e3038179e1 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 6f70843e20..292a5d30c2 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 50cf42bb5a..cd12675859 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 0da962b248..762d3c21d8 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 c4d1f859c3..c84c1456e5 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 f57e9958bf..a3c31a1b43 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 c4d1f859c3..c84c1456e5 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 7bd279bd0c..c526c93de8 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 fec220f8ec..0ae990d9a5 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 c75afba0a1..bbbd043c5e 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 e484d6c912..183dd98719 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 6e4c36ec85..504cb5b486 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 f48b512c45..21f310c190 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 315af03442..5a9ddea449 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 f04d7f8fbe..180b8998a3 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 affb7ccdec..32237336a1 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 3c39508e72..b2cda11d2a 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 1192ca2936..e26a6f1356 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 31f76ac219..05a1bd64d7 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 05de62654c..4667abeced 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 950e96b4e8..cf47682b14 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 950e96b4e8..cf47682b14 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 76a545d6a8..926479c1e8 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 f88b8a6e32..fdd63471ed 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 2c5ee51a9b..e3c0462a14 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 007fb9a4a1..1d22085a5b 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 72cc6520e3..66ccc22bfe 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 318f64f854..54368fa721 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 f836a85455..f0849705aa 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 338babc9c7..3dc7c4640a 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 338babc9c7..3dc7c4640a 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 44ba583142..d313d7dcd2 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 8296ef7f42..e298f5a124 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 ca3f5093b8..b49d2c767a 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 ca3f5093b8..b49d2c767a 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 356fc5617d..03d8648c87 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 97ed756261..a37193d901 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 97ed756261..a37193d901 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 1fba4c4997..fa985cbe82 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 6e0cddd970..c8c432e1b9 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 183c70105b..9562dbb3b4 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 183c70105b..9562dbb3b4 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 8d3b3edfe9..01baca04d7 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 9a101caa40..60b04a067d 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 251b18ce24..a5b4ce3af3 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 2d4159efbb..b2fbcb695d 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 9bc17fdb9e..fc8c1ff781 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 117af56bc3..9cfba0ca72 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 5d08480d9a..ff87a637bd 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 f253722afe..9205434cea 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 f253722afe..9205434cea 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 fd92e9f1fa..667449c780 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 5659a826bc..ed34f0dcdc 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 42520178b6..7c9bf72813 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 31697dd369..942149628c 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 f5f63bf8c2..5889591fd1 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 29d3d419b6..ba23decbdb 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 a247dee9a0..90a415bf90 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 f5f63bf8c2..5889591fd1 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 2fb46fb7ba..8408e5825f 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 7c4f5fd698..802cfa40b2 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 178d8338f2..82cb300712 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 e5931e4d94..1146da9a4b 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 178d8338f2..82cb300712 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 2a577f1d76..8613ca29a0 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 a62d625ae0..69fa48ad49 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 ca32463189..7302c48448 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 e4bd0c3a59..3de93600da 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 4a177d1d58..35a9aadc4c 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 4a177d1d58..35a9aadc4c 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 4ffff834f2..e075e96cd8 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 8bd052a646..dc914aee8f 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 a1c3aac558..4a66edad40 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 5cc4e537dd..ed54f08078 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 ffa8c913e3..e585b97e78 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 b8f3bb1e13..a53fbc7767 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 9526a8884a..1d2d105e98 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 c3e63abb72..5ac6e8ee1f 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 90eaaba82a..62529cdb75 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 1272d768b8..a595c27e40 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 482f957cde..8721fbfc52 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 99add2f8a4..e24f5a4791 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 3f6e2879e0..85955f3ebd 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 cb8190ef9e..a93c12fef8 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 6dca0e83ec..b911da1791 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 6b087b72b7..aa7c1d1c80 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 2775067f7a..b5146e95e0 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 b54ba9d2af..742d531cb9 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 bf6d13f26e..923ea715aa 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 73565d9ab1..84aac1c56f 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 72e55ffc58..473ad54c8d 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 72e55ffc58..473ad54c8d 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 453f32c4db..085bea0296 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 44327bf809..264038c103 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 f2779c7d5c..657a88bf06 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 e03deeda2a..5c0048c019 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 862211d839..def835913c 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 34a4c74001..26370009d4 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 c26fa6e35a..f766b6112a 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 ce4d3d19e0..61e27f8b9d 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 ce4d3d19e0..61e27f8b9d 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 04c4c086b1..0236cc2897 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 d8cb2cd2d7..db4d74618e 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 10fcef1cb2..7a702b37d0 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 f17fd6e151..d1f2e440b0 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 da2f4776bd..31ddc03f19 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 b70d42c6dd..37af94dd42 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 7218199a3d..1722f8ad9a 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 dd93e9bb2c..a95e5dcc84 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 9f75f6b070..ba5030c002 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 16cd161715..55d306aa22 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 33934b31ae..ce801d04ac 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 1257ff9c64..151adb55b5 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 ffc814dbec..a3f377c079 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 e08cf249e1..f9c79fc46a 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 59a819eaab..aa4f1b3c48 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 782e77971c..8854647965 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 e28bf81ce0..34e3ccaece 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 154e20ad0c..3aa7fddda8 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 c3ffd4077f..243bb91401 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 6506b2ca27..ff696b22cd 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 7a90e30e81..e5534ec2e1 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 2415bc71ea..752f60c183 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 d74e5b0554..35dccbdbc8 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 d74e5b0554..35dccbdbc8 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 289f1727c8..14ad85b1c8 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 95f26ebc02..22c9565c27 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 b3b1bb4da2..172fdad114 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 6622b6d7e3..0c0cdc26f5 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 6cd8d464d7..b308303354 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 3589bcc7cd..950e3775d8 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 a451b58c9c..2708fde7ac 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 a451b58c9c..2708fde7ac 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 2ca4d7ca38..716935f065 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 5110ba1abe..4310903459 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 f0b1325049..b975f267d9 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 f0b1325049..b975f267d9 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 dfed86af19..6154239cbf 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 479e90196a..37b32f7c2c 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 bf7069f48f..4d77ff8b9d 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 bf7069f48f..4d77ff8b9d 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 8776e5215f..fda29c7f11 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 02de38e58a..8680f18947 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 d341c004f1..5401009565 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 49a1cc707e..b81a463e00 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 49a1cc707e..b81a463e00 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 a5fc0ae662..09496398f7 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 82e09004fb..a89e5e6aad 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 b0700ae1a1..022573e9d9 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 b0700ae1a1..022573e9d9 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 c5e2cf3f55..dbe7921434 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 37c6c432ca..fb855de221 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 be252b899a..54f2497907 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 be252b899a..54f2497907 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 88e4f904de..f5bdf5a5d1 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 99ec3ea3d4..fe4cd48904 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 c5507d123a..f54756c396 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 16280a1e91..06dc3413ba 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 17b65b33af..e80b61cc8b 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 16bf7af352..af410626c5 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 16bf7af352..af410626c5 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 c169f35f1f..0fb5465519 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 570c03c951..afb14178ea 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 71abc258ae..671dba8a74 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 d6e3d73d64..531c50678f 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 839c8f41df..1bba130557 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 f630cf4c37..f46819d3e9 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 a147ef6809..6df6026c61 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 839c8f41df..1bba130557 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 c935fefb33..c2f3d72ab2 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 b9d02e48b1..27a96f00e0 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 a940b83e4a..3428aaa42d 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 2cc4807109..6b723df95a 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 7154c64566..fd995d7a32 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 24dc49cf90..c8b49975b8 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 806e67e21a..946707cba3 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 2abcb13757..8277d7a317 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 b60d3f275a..e6120a8fcc 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 f910bc061e..57362d546f 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 3afd202d33..4b8bb7bc9d 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 5b50612291..bb6a9c3236 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 515229dde2..0407ee98a4 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 af47368a12..533c4b1ac7 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 ebd914649f..90413b3147 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 2b7a20eb13..e02349631b 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 ec20daef15..08506f7fb3 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 d4681ff66f..07046c63cf 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 af47368a12..533c4b1ac7 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 11cd65eb0f..10790602bc 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 ad8e838a8c..9196a0dc7c 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 cfa6465169..cd01f4aa19 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 df54238bf6..1625137205 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 c92d80212a..56a63480d7 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 a0036bd9ef..d911b195f9 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 c92d80212a..56a63480d7 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 25890b9053..434a31d24d 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 25890b9053..434a31d24d 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 5dd5f8a624..297c94344f 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 da857f7874..f84fbf6fd8 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 74cbf83fec..583a6dea59 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 896772b276..078514628a 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 1bc5738c6a..85f8bd06ca 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 80201dba3d..1d8369f31e 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 b780125ba1..1daafed189 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 56e3d3a3b0..a876a37620 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 1fa8208ac3..10f35e6953 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 3edc59bdf6..c70c23eb47 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 d8f8b690fc..971d3d92ed 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 9622be87f9..474d4dd878 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 c22b3ead5d..5eb4cd2b84 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 45e74e79ce..b856e1f29f 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 d2c997037a..a374b2ee72 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 a4c5e38289..3e05757d94 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 bfff4db7a1..f63aec9e64 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 d2c997037a..a374b2ee72 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 a4c5e38289..3e05757d94 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 a9ca62b2c4..5750323198 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 47f36bcad0..a8caa3c197 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 47f36bcad0..a8caa3c197 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 f826499e30..7f8cf4e07f 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 cf4878155a..2d55290121 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 67761872c6..c59d860326 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 20463c6aba..90d27d3f31 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 67761872c6..c59d860326 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 29e6e159f6..d66ea73ff7 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 418a7ca610..2785a0e8b5 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 4772826c93..029f5d3ee5 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 943993aa38..37bd7b9e7f 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 7456a34359..1d4ad6a2e1 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 cc891eaeda..f0abcf9580 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 fb2f6064fb..e63da3cacf 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 fb2f6064fb..e63da3cacf 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 dac54e8447..da8882e3bf 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 742167bf9f..b34cd3d437 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 5ff7394eec..03de94359b 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 bea62987f5..4c2e15028f 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 824ada2490..693814464e 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 6413224a28..aa820c53b4 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 ae34bb17a0..c654ae883a 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 be3ad556a6..c7cef62ba4 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 605855deb7..74742dfe9f 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 8ef97cae76..119cfb8ee9 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 37f4796d76..1d0f352383 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 3245d44e8a..36717f5eb9 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 9adc271159..dd34310e22 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 86cf3cb0b6..f8dfa701d1 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 fc8b603fa2..ac815c8c69 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 3ae653988f..3f0c0e8784 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 2dc76a51fa..819a72c342 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 1418e06b87..aef5d5a8cc 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 634f18e7ff..223e37b322 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 ad7f55c6e1..aa61cab896 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 898603a051..0def9d5e17 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 48c07b16d9..1b81018bcd 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 6f33423b8a..2efa0572c4 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 4070a21084..89c39c3332 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 1ac30c7693..6ae1998b02 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 - - + +