diff --git a/packages/core/scripts/theme-builder/src/components/variable-selector/variable-selector.tsx b/packages/core/scripts/theme-builder/src/components/variable-selector/variable-selector.tsx index cc80d15bb6..dea827039a 100644 --- a/packages/core/scripts/theme-builder/src/components/variable-selector/variable-selector.tsx +++ b/packages/core/scripts/theme-builder/src/components/variable-selector/variable-selector.tsx @@ -17,7 +17,7 @@ export class VariableSelector { @Prop() property: string; @Prop() type: 'color' | 'percent'; @Prop() usedWith: string[]; - @Prop({mutable: true}) value: Color | string | number; + @Prop({ mutable: true }) value: Color | string | number; @Method() getProperty () { diff --git a/packages/core/src/components/badge/readme.md b/packages/core/src/components/badge/readme.md index 3639d09795..2ecdad13c9 100644 --- a/packages/core/src/components/badge/readme.md +++ b/packages/core/src/components/badge/readme.md @@ -12,18 +12,13 @@ Badges are inline block elements that usually appear near another element. Typic 44 55 66 -``` -```html - - - - 11 - My Item - 22 - - - + + + 11 + My Item + 22 + ``` diff --git a/packages/core/src/components/card-header/card-header.tsx b/packages/core/src/components/card-header/card-header.tsx index 7e8a661751..70a7563038 100644 --- a/packages/core/src/components/card-header/card-header.tsx +++ b/packages/core/src/components/card-header/card-header.tsx @@ -26,8 +26,7 @@ export class CardHeader { @Prop() mode: 'ios' | 'md'; /** - * If true, adds transparency to the card header. - * Only affects `ios` mode. Defaults to `false`. + * If true, the card header will be translucent. Defaults to `false`. */ @Prop() translucent = false; diff --git a/packages/core/src/components/card-header/readme.md b/packages/core/src/components/card-header/readme.md index f9cdb62e2b..eb92389904 100644 --- a/packages/core/src/components/card-header/readme.md +++ b/packages/core/src/components/card-header/readme.md @@ -27,8 +27,7 @@ Possible values are: `"ios"` or `"md"`. boolean -If true, adds transparency to the card header. -Only affects `ios` mode. Defaults to `false`. +If true, the card header will be translucent. Defaults to `false`. ## Attributes @@ -53,8 +52,7 @@ Possible values are: `"ios"` or `"md"`. boolean -If true, adds transparency to the card header. -Only affects `ios` mode. Defaults to `false`. +If true, the card header will be translucent. Defaults to `false`. diff --git a/packages/core/src/components/fab-button/fab-button.tsx b/packages/core/src/components/fab-button/fab-button.tsx index a98d3762ec..45aec7bc94 100755 --- a/packages/core/src/components/fab-button/fab-button.tsx +++ b/packages/core/src/components/fab-button/fab-button.tsx @@ -33,8 +33,7 @@ export class FabButton { @Prop() href: string; /** - * If true, adds transparency to the fab. - * Only affects `ios` mode. Defaults to `false`. + * If true, the fab button will be translucent. Defaults to `false`. */ @Prop() translucent = false; diff --git a/packages/core/src/components/fab-button/readme.md b/packages/core/src/components/fab-button/readme.md index 787c900aeb..a1e010bb98 100644 --- a/packages/core/src/components/fab-button/readme.md +++ b/packages/core/src/components/fab-button/readme.md @@ -90,8 +90,7 @@ boolean boolean -If true, adds transparency to the fab. -Only affects `ios` mode. Defaults to `false`. +If true, the fab button will be translucent. Defaults to `false`. ## Attributes @@ -148,8 +147,7 @@ boolean boolean -If true, adds transparency to the fab. -Only affects `ios` mode. Defaults to `false`. +If true, the fab button will be translucent. Defaults to `false`. diff --git a/packages/core/src/components/footer/footer.tsx b/packages/core/src/components/footer/footer.tsx index eba8e454d1..9ea977279a 100644 --- a/packages/core/src/components/footer/footer.tsx +++ b/packages/core/src/components/footer/footer.tsx @@ -17,10 +17,10 @@ export class Footer { color: string; /** - * If true, adds transparency to the footer. + * If true, the footer will be translucent. * Note: In order to scroll content behind the footer, the `fullscreen` * attribute needs to be set on the content. - * Only affects `ios` mode. Defaults to `false`. + * Defaults to `false`. */ @Prop() translucent = false; diff --git a/packages/core/src/components/footer/readme.md b/packages/core/src/components/footer/readme.md index b604afbb0f..4bf84574d0 100644 --- a/packages/core/src/components/footer/readme.md +++ b/packages/core/src/components/footer/readme.md @@ -11,10 +11,10 @@ boolean -If true, adds transparency to the footer. +If true, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. -Only affects `ios` mode. Defaults to `false`. +Defaults to `false`. ## Attributes @@ -23,10 +23,10 @@ Only affects `ios` mode. Defaults to `false`. boolean -If true, adds transparency to the footer. +If true, the footer will be translucent. Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. -Only affects `ios` mode. Defaults to `false`. +Defaults to `false`. diff --git a/packages/core/src/components/header/header.tsx b/packages/core/src/components/header/header.tsx index 2b2d1c2e1a..7b0b25cc3f 100644 --- a/packages/core/src/components/header/header.tsx +++ b/packages/core/src/components/header/header.tsx @@ -17,10 +17,10 @@ export class Header { color: string; /** - * If true, adds transparency to the header. + * If true, the header will be translucent. * Note: In order to scroll content behind the header, the `fullscreen` * attribute needs to be set on the content. - * Only affects `ios` mode. Defaults to `false`. + * Defaults to `false`. */ @Prop() translucent = false; diff --git a/packages/core/src/components/header/readme.md b/packages/core/src/components/header/readme.md index e60577bc64..86ed351d6f 100644 --- a/packages/core/src/components/header/readme.md +++ b/packages/core/src/components/header/readme.md @@ -11,10 +11,10 @@ boolean -If true, adds transparency to the header. +If true, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. -Only affects `ios` mode. Defaults to `false`. +Defaults to `false`. ## Attributes @@ -23,10 +23,10 @@ Only affects `ios` mode. Defaults to `false`. boolean -If true, adds transparency to the header. +If true, the header will be translucent. Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. -Only affects `ios` mode. Defaults to `false`. +Defaults to `false`. diff --git a/packages/core/src/components/ripple-effect/ripple-effect.tsx b/packages/core/src/components/ripple-effect/ripple-effect.tsx index a92a41f64d..bc574ff621 100644 --- a/packages/core/src/components/ripple-effect/ripple-effect.tsx +++ b/packages/core/src/components/ripple-effect/ripple-effect.tsx @@ -20,7 +20,7 @@ export class RippleEffect { @Prop({context: 'dom'}) dom: DomController; @Prop({context: 'enableListener'}) enableListener: EventListenerEnable; - @Prop({mutable: true}) useTapClick: boolean; + @Prop({ mutable: true }) useTapClick: boolean; @Watch('useTapClick') tapClickChanged(useTapClick: boolean) { this.enableListener(this, 'parent:ionActivated', useTapClick); diff --git a/packages/core/src/components/spinner/readme.md b/packages/core/src/components/spinner/readme.md index 05caf0ac67..a5bee1d524 100644 --- a/packages/core/src/components/spinner/readme.md +++ b/packages/core/src/components/spinner/readme.md @@ -49,7 +49,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app). number -Duration of the spinner animation in milliseconds. Default varies based on the spinner name. +Duration of the spinner animation in milliseconds. The default varies based on the spinner. #### mode @@ -92,7 +92,7 @@ For more information, see [Theming your App](/docs/theming/theming-your-app). number -Duration of the spinner animation in milliseconds. Default varies based on the spinner name. +Duration of the spinner animation in milliseconds. The default varies based on the spinner. #### mode diff --git a/packages/core/src/components/tab/readme.md b/packages/core/src/components/tab/readme.md index eb106cee8d..f2e144e262 100644 --- a/packages/core/src/components/tab/readme.md +++ b/packages/core/src/components/tab/readme.md @@ -59,7 +59,7 @@ boolean string -The badge for the tab button. +The badge for the tab. #### badgeStyle @@ -73,14 +73,12 @@ The badge color for the tab button. string -Set the root page for this tab. - #### component any -The badge for the tab button. +The component to display inside of the tab. #### delegate @@ -99,25 +97,28 @@ If true, the user cannot interact with the tab. Defaults to `false`. string -The icon for the tab button. +The icon for the tab. #### name string +The name of the tab. + #### selected boolean +If true, the tab will be selected. Defaults to `false`. + #### show boolean -If true, the tab button is visible within the -tabbar. Default: `true`. +If true, the tab button is visible within the tabbar. Defaults to `true`. #### tabsHideOnSubPages @@ -131,7 +132,7 @@ If true, hide the tabs on child pages. string -The title of the tab button. +The title of the tab. ## Attributes @@ -145,7 +146,7 @@ boolean string -The badge for the tab button. +The badge for the tab. #### badge-style @@ -159,14 +160,12 @@ The badge color for the tab button. string -Set the root page for this tab. - #### component any -The badge for the tab button. +The component to display inside of the tab. #### delegate @@ -185,25 +184,28 @@ If true, the user cannot interact with the tab. Defaults to `false`. string -The icon for the tab button. +The icon for the tab. #### name string +The name of the tab. + #### selected boolean +If true, the tab will be selected. Defaults to `false`. + #### show boolean -If true, the tab button is visible within the -tabbar. Default: `true`. +If true, the tab button is visible within the tabbar. Defaults to `true`. #### tabs-hide-on-sub-pages @@ -217,7 +219,7 @@ If true, hide the tabs on child pages. string -The title of the tab button. +The title of the tab. ## Events diff --git a/packages/core/src/components/tab/tab.tsx b/packages/core/src/components/tab/tab.tsx index b21a74103d..af98d185a7 100644 --- a/packages/core/src/components/tab/tab.tsx +++ b/packages/core/src/components/tab/tab.tsx @@ -14,47 +14,62 @@ export class Tab { @Element() el: HTMLElement; @State() init = false; - @Prop({mutable: true}) active = false; - /** - * Set the root page for this tab. - */ + @Prop() delegate: FrameworkDelegate; + + @Prop({ mutable: true }) active = false; + @Prop() btnId: string; /** - * The title of the tab button. + * The title of the tab. */ @Prop() title: string; /** - * The icon for the tab button. + * The icon for the tab. */ @Prop() icon: string; /** - * The badge for the tab button. + * The badge for the tab. */ @Prop() badge: string; - /** - * The badge for the tab button. - */ - @Prop() component: any; - @Prop() name: string; - /** * The badge color for the tab button. */ @Prop() badgeStyle = 'default'; + /** + * The component to display inside of the tab. + */ + @Prop() component: any; + + /** + * The name of the tab. + */ + @Prop() name: string; + /** * If true, the user cannot interact with the tab. Defaults to `false`. */ @Prop() disabled = false; /** - * If true, the tab button is visible within the - * tabbar. Default: `true`. + * If true, the tab will be selected. Defaults to `false`. + */ + @Prop({ mutable: true }) selected = false; + + @Watch('selected') + selectedChanged(selected: boolean) { + if (selected) { + this.ionSelect.emit(); + } + } + + /** + * If true, the tab button is visible within the tabbar. Defaults to `true`. */ @Prop() show = true; @@ -63,17 +78,6 @@ export class Tab { */ @Prop() tabsHideOnSubPages = false; - @Prop() delegate: FrameworkDelegate; - - @Prop({ mutable: true }) selected = false; - - - @Watch('selected') - selectedChanged(selected: boolean) { - if (selected) { - this.ionSelect.emit(); - } - } /** * Emitted when the current tab is selected. diff --git a/packages/core/src/components/tabbar/readme.md b/packages/core/src/components/tabbar/readme.md index f6bf86046e..e75c9e6ee8 100644 --- a/packages/core/src/components/tabbar/readme.md +++ b/packages/core/src/components/tabbar/readme.md @@ -41,6 +41,8 @@ string boolean +If true, the tabbar will be translucent. Defaults to `false`. + ## Attributes @@ -78,6 +80,8 @@ string boolean +If true, the tabbar will be translucent. Defaults to `false`. + ---------------------------------------------- diff --git a/packages/core/src/components/tabbar/tabbar.tsx b/packages/core/src/components/tabbar/tabbar.tsx index ddacaf14f9..9714f8dbb8 100644 --- a/packages/core/src/components/tabbar/tabbar.tsx +++ b/packages/core/src/components/tabbar/tabbar.tsx @@ -39,6 +39,10 @@ export class Tabbar { @Prop() layout = 'icon-top'; @Prop() highlight = false; + + /** + * If true, the tabbar will be translucent. Defaults to `false`. + */ @Prop() translucent = false; @Listen('body:keyboardWillHide') diff --git a/packages/core/src/components/tabs/readme.md b/packages/core/src/components/tabs/readme.md index dbdccbecee..b3e51dbc69 100644 --- a/packages/core/src/components/tabs/readme.md +++ b/packages/core/src/components/tabs/readme.md @@ -143,10 +143,10 @@ Set position of the tabbar: `top`, `bottom`. boolean -If true, adds transparency to the tabbar. -Note: In order to scroll content behind the tabbar, the `fullscreen` +If true, the tabs will be translucent. +Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. -Only affects `ios` mode. Defaults to `false`. +Defaults to `false`. ## Attributes @@ -204,10 +204,10 @@ Set position of the tabbar: `top`, `bottom`. boolean -If true, adds transparency to the tabbar. -Note: In order to scroll content behind the tabbar, the `fullscreen` +If true, the tabs will be translucent. +Note: In order to scroll content behind the tabs, the `fullscreen` attribute needs to be set on the content. -Only affects `ios` mode. Defaults to `false`. +Defaults to `false`. ## Events diff --git a/packages/core/src/components/tabs/tabs.tsx b/packages/core/src/components/tabs/tabs.tsx index 4d5e257065..895a218a27 100644 --- a/packages/core/src/components/tabs/tabs.tsx +++ b/packages/core/src/components/tabs/tabs.tsx @@ -54,10 +54,10 @@ export class Tabs implements NavOutlet { @Prop({ mutable: true }) tabbarHighlight: boolean; /** - * If true, adds transparency to the tabbar. - * Note: In order to scroll content behind the tabbar, the `fullscreen` + * If true, the tabs will be translucent. + * Note: In order to scroll content behind the tabs, the `fullscreen` * attribute needs to be set on the content. - * Only affects `ios` mode. Defaults to `false`. + * Defaults to `false`. */ @Prop() translucent = false; diff --git a/packages/core/src/components/toolbar/readme.md b/packages/core/src/components/toolbar/readme.md index 397144df13..d301f945cf 100644 --- a/packages/core/src/components/toolbar/readme.md +++ b/packages/core/src/components/toolbar/readme.md @@ -109,10 +109,10 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl boolean -If true, adds transparency to the header. -Note: In order to scroll content behind the header, the `fullscreen` +If true, the toolbar will be translucent. +Note: In order to scroll content behind the toolbar, the `fullscreen` attribute needs to be set on the content. -Only affects `ios` mode. Defaults to `false`. +Defaults to `false`. ## Attributes @@ -139,10 +139,10 @@ For more information, see [Platform Styles](/docs/theming/platform-specific-styl boolean -If true, adds transparency to the header. -Note: In order to scroll content behind the header, the `fullscreen` +If true, the toolbar will be translucent. +Note: In order to scroll content behind the toolbar, the `fullscreen` attribute needs to be set on the content. -Only affects `ios` mode. Defaults to `false`. +Defaults to `false`. diff --git a/packages/core/src/components/toolbar/toolbar.tsx b/packages/core/src/components/toolbar/toolbar.tsx index 9a34d42d46..662e34bc8f 100644 --- a/packages/core/src/components/toolbar/toolbar.tsx +++ b/packages/core/src/components/toolbar/toolbar.tsx @@ -33,10 +33,10 @@ export class Toolbar { @Prop() mode: 'ios' | 'md'; /** - * If true, adds transparency to the header. - * Note: In order to scroll content behind the header, the `fullscreen` + * If true, the toolbar will be translucent. + * Note: In order to scroll content behind the toolbar, the `fullscreen` * attribute needs to be set on the content. - * Only affects `ios` mode. Defaults to `false`. + * Defaults to `false`. */ @Prop() translucent = false;