diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md index b12332e9e2..0a7875ea79 100644 --- a/core/src/components/action-sheet/readme.md +++ b/core/src/components/action-sheet/readme.md @@ -6,6 +6,34 @@ An Action Sheet is a dialog that displays a set of options. It appears on top of A button's `role` property can either be `destructive` or `cancel`. Buttons without a role property will have the default look for the platform. Buttons with the `cancel` role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the `buttons` array. Note: We recommend that `destructive` buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role. +### Customization + +Action Sheet uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. + +We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the [Usage](#usage) section for an example of how to pass a class using `cssClass`. + +```css +/* DOES NOT WORK - not specific enough */ +.action-sheet-group { + background: #e5e5e5; +} + +/* Works - pass "my-custom-class" in cssClass to increase specificity */ +.my-custom-class .action-sheet-group { + background: #e5e5e5; +} +``` + +Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Action Sheet without needing to target individual elements: + +```css +.my-custom-class { + --background: #e5e5e5; +} +``` + +> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information. + @@ -30,6 +58,7 @@ export class ActionSheetExample { async presentActionSheet() { const actionSheet = await this.actionSheetController.create({ header: 'Albums', + cssClass: 'my-custom-class', buttons: [{ text: 'Delete', role: 'destructive', @@ -71,14 +100,19 @@ export class ActionSheetExample { ``` +### Style Placement + +In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Action Sheet can be presented from within a page, the `ion-action-sheet` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config). + + ### Javascript ```javascript async function presentActionSheet() { - const actionSheet = document.createElement('ion-action-sheet'); - actionSheet.header = "Albums"; + actionSheet.header = 'Albums'; + actionSheet.cssClass = 'my-custom-class'; actionSheet.buttons = [{ text: 'Delete', role: 'destructive', @@ -120,21 +154,23 @@ async function presentActionSheet() { ### React -```typescript +```tsx import React, { useState } from 'react'; import { IonActionSheet, IonContent, IonButton } from '@ionic/react'; import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons'; export const ActionSheetExample: React.FC = () => { - const [showActionSheet, setShowActionSheet] = useState(false); return ( - setShowActionSheet(true)} expand="block">Show Action Sheet + setShowActionSheet(true)} expand="block"> + Show Action Sheet + setShowActionSheet(false)} + cssClass='my-custom-class' buttons={[{ text: 'Delete', role: 'destructive', @@ -171,11 +207,8 @@ export const ActionSheetExample: React.FC = () => { > - ); - } - ``` @@ -194,6 +227,7 @@ export class ActionSheetExample { async presentActionSheet() { const actionSheet = await actionSheetController.create({ header: 'Albums', + cssClass: 'my-custom-class', buttons: [{ text: 'Delete', role: 'destructive', @@ -258,6 +292,7 @@ export default { return this.$ionic.actionSheetController .create({ header: 'Albums', + cssClass: 'my-custom-class', buttons: [ { text: 'Delete', diff --git a/core/src/components/action-sheet/usage/angular.md b/core/src/components/action-sheet/usage/angular.md index 926e54fa15..472efbddfc 100644 --- a/core/src/components/action-sheet/usage/angular.md +++ b/core/src/components/action-sheet/usage/angular.md @@ -14,6 +14,7 @@ export class ActionSheetExample { async presentActionSheet() { const actionSheet = await this.actionSheetController.create({ header: 'Albums', + cssClass: 'my-custom-class', buttons: [{ text: 'Delete', role: 'destructive', @@ -53,3 +54,8 @@ export class ActionSheetExample { } ``` + + +### Style Placement + +In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Action Sheet can be presented from within a page, the `ion-action-sheet` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config). diff --git a/core/src/components/action-sheet/usage/javascript.md b/core/src/components/action-sheet/usage/javascript.md index 6db3aaf3f3..1084c93aae 100644 --- a/core/src/components/action-sheet/usage/javascript.md +++ b/core/src/components/action-sheet/usage/javascript.md @@ -1,9 +1,9 @@ ```javascript async function presentActionSheet() { - const actionSheet = document.createElement('ion-action-sheet'); - actionSheet.header = "Albums"; + actionSheet.header = 'Albums'; + actionSheet.cssClass = 'my-custom-class'; actionSheet.buttons = [{ text: 'Delete', role: 'destructive', diff --git a/core/src/components/action-sheet/usage/react.md b/core/src/components/action-sheet/usage/react.md index 4f8323e149..ed9cc8505c 100644 --- a/core/src/components/action-sheet/usage/react.md +++ b/core/src/components/action-sheet/usage/react.md @@ -1,18 +1,20 @@ -```typescript +```tsx import React, { useState } from 'react'; import { IonActionSheet, IonContent, IonButton } from '@ionic/react'; import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons'; export const ActionSheetExample: React.FC = () => { - const [showActionSheet, setShowActionSheet] = useState(false); return ( - setShowActionSheet(true)} expand="block">Show Action Sheet + setShowActionSheet(true)} expand="block"> + Show Action Sheet + setShowActionSheet(false)} + cssClass='my-custom-class' buttons={[{ text: 'Delete', role: 'destructive', @@ -49,9 +51,6 @@ export const ActionSheetExample: React.FC = () => { > - ); - } - ``` diff --git a/core/src/components/action-sheet/usage/stencil.md b/core/src/components/action-sheet/usage/stencil.md index e71cd10886..489d22b498 100644 --- a/core/src/components/action-sheet/usage/stencil.md +++ b/core/src/components/action-sheet/usage/stencil.md @@ -11,6 +11,7 @@ export class ActionSheetExample { async presentActionSheet() { const actionSheet = await actionSheetController.create({ header: 'Albums', + cssClass: 'my-custom-class', buttons: [{ text: 'Delete', role: 'destructive', diff --git a/core/src/components/action-sheet/usage/vue.md b/core/src/components/action-sheet/usage/vue.md index af30358dcd..b0464508aa 100644 --- a/core/src/components/action-sheet/usage/vue.md +++ b/core/src/components/action-sheet/usage/vue.md @@ -12,6 +12,7 @@ export default { return this.$ionic.actionSheetController .create({ header: 'Albums', + cssClass: 'my-custom-class', buttons: [ { text: 'Delete', diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md index 317cd55520..f8b9b69ffd 100644 --- a/core/src/components/alert/readme.md +++ b/core/src/components/alert/readme.md @@ -13,6 +13,34 @@ Optionally, a `role` property can be added to a button, such as `cancel`. If a ` Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead. +### Customization + +Alert uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. + +We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the [Usage](#usage) section for an example of how to pass a class using `cssClass`. + +```css +/* DOES NOT WORK - not specific enough */ +.alert-wrapper { + background: #e5e5e5; +} + +/* Works - pass "my-custom-class" in cssClass to increase specificity */ +.my-custom-class .alert-wrapper { + background: #e5e5e5; +} +``` + +Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Alert without needing to target individual elements: + +```css +.my-custom-class { + --background: #e5e5e5; +} +``` + +> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information. + @@ -36,6 +64,7 @@ export class AlertExample { async presentAlert() { const alert = await this.alertController.create({ + cssClass: 'my-custom-class', header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', @@ -47,6 +76,7 @@ export class AlertExample { async presentAlertMultipleButtons() { const alert = await this.alertController.create({ + cssClass: 'my-custom-class', header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', @@ -58,6 +88,7 @@ export class AlertExample { async presentAlertConfirm() { const alert = await this.alertController.create({ + cssClass: 'my-custom-class', header: 'Confirm!', message: 'Message text!!!', buttons: [ @@ -82,6 +113,7 @@ export class AlertExample { async presentAlertPrompt() { const alert = await this.alertController.create({ + cssClass: 'my-custom-class', header: 'Prompt!', inputs: [ { @@ -154,6 +186,7 @@ export class AlertExample { async presentAlertRadio() { const alert = await this.alertController.create({ + cssClass: 'my-custom-class', header: 'Radio', inputs: [ { @@ -216,6 +249,7 @@ export class AlertExample { async presentAlertCheckbox() { const alert = await this.alertController.create({ + cssClass: 'my-custom-class', header: 'Checkbox', inputs: [ { @@ -280,16 +314,21 @@ export class AlertExample { await alert.present(); } - } ``` +### Style Placement + +In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Alert can be presented from within a page, the `ion-alert` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config). + + ### Javascript ```javascript function presentAlert() { const alert = document.createElement('ion-alert'); + alert.cssClass = 'my-custom-class'; alert.header = 'Alert'; alert.subHeader = 'Subtitle'; alert.message = 'This is an alert message.'; @@ -301,6 +340,7 @@ function presentAlert() { function presentAlertMultipleButtons() { const alert = document.createElement('ion-alert'); + alert.cssClass = 'my-custom-class'; alert.header = 'Alert'; alert.subHeader = 'Subtitle'; alert.message = 'This is an alert message.'; @@ -312,6 +352,7 @@ function presentAlertMultipleButtons() { function presentAlertConfirm() { const alert = document.createElement('ion-alert'); + alert.cssClass = 'my-custom-class'; alert.header = 'Confirm!'; alert.message = 'Message text!!!'; alert.buttons = [ @@ -336,6 +377,7 @@ function presentAlertConfirm() { function presentAlertPrompt() { const alert = document.createElement('ion-alert'); + alert.cssClass = 'my-custom-class'; alert.header = 'Prompt!'; alert.inputs = [ { @@ -405,6 +447,7 @@ function presentAlertPrompt() { function presentAlertRadio() { const alert = document.createElement('ion-alert'); + alert.cssClass = 'my-custom-class'; alert.header = 'Radio'; alert.inputs = [ { @@ -460,6 +503,7 @@ function presentAlertRadio() { function presentAlertCheckbox() { const alert = document.createElement('ion-alert'); + alert.cssClass = 'my-custom-class'; alert.header = 'Checkbox'; alert.inputs = [ { @@ -547,6 +591,7 @@ export const AlertExample: React.FC = () => { setShowAlert1(false)} + cssClass='my-custom-class' header={'Alert'} subHeader={'Subtitle'} message={'This is an alert message.'} @@ -556,6 +601,7 @@ export const AlertExample: React.FC = () => { setShowAlert2(false)} + cssClass='my-custom-class' header={'Alert'} subHeader={'Subtitle'} message={'This is an alert message.'} @@ -565,6 +611,7 @@ export const AlertExample: React.FC = () => { setShowAlert3(false)} + cssClass='my-custom-class' header={'Confirm!'} message={'Message text!!!'} buttons={[ @@ -588,6 +635,7 @@ export const AlertExample: React.FC = () => { setShowAlert4(false)} + cssClass='my-custom-class' header={'Prompt!'} inputs={[ { @@ -652,6 +700,7 @@ export const AlertExample: React.FC = () => { setShowAlert5(false)} + cssClass='my-custom-class' header={'Radio'} inputs={[ { @@ -713,6 +762,7 @@ export const AlertExample: React.FC = () => { setShowAlert6(false)} + cssClass='my-custom-class' header={'Checkbox'} inputs={[ { @@ -793,6 +843,7 @@ import { alertController } from '@ionic/core'; export class AlertExample { async presentAlert() { const alert = await alertController.create({ + cssClass: 'my-custom-class', header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', @@ -804,6 +855,7 @@ export class AlertExample { async presentAlertMultipleButtons() { const alert = await alertController.create({ + cssClass: 'my-custom-class', header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', @@ -815,6 +867,7 @@ export class AlertExample { async presentAlertConfirm() { const alert = await alertController.create({ + cssClass: 'my-custom-class', header: 'Confirm!', message: 'Message text!!!', buttons: [ @@ -839,6 +892,7 @@ export class AlertExample { async presentAlertPrompt() { const alert = await alertController.create({ + cssClass: 'my-custom-class', header: 'Prompt!', inputs: [ { @@ -911,6 +965,7 @@ export class AlertExample { async presentAlertRadio() { const alert = await alertController.create({ + cssClass: 'my-custom-class', header: 'Radio', inputs: [ { @@ -973,6 +1028,7 @@ export class AlertExample { async presentAlertCheckbox() { const alert = await alertController.create({ + cssClass: 'my-custom-class', header: 'Checkbox', inputs: [ { @@ -1075,6 +1131,7 @@ export default { presentAlert() { return this.$ionic.alertController .create({ + cssClass: 'my-custom-class', header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', @@ -1086,6 +1143,7 @@ export default { presentAlertMultipleButtons() { return this.$ionic.alertController .create({ + cssClass: 'my-custom-class', header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', @@ -1097,6 +1155,7 @@ export default { presentAlertConfirm() { return this.$ionic.alertController .create({ + cssClass: 'my-custom-class', header: 'Confirm!', message: 'Message text!!!', buttons: [ @@ -1122,6 +1181,7 @@ export default { presentAlertPrompt() { return this.$ionic.alertController .create({ + cssClass: 'my-custom-class', header: 'Prompt!', inputs: [ { @@ -1185,6 +1245,7 @@ export default { presentAlertRadio() { return this.$ionic.alertController .create({ + cssClass: 'my-custom-class', header: 'Radio', inputs: [ { @@ -1242,6 +1303,7 @@ export default { presentAlertCheckbox() { return this.$ionic.alertController .create({ + cssClass: 'my-custom-class', header: 'Checkbox', inputs: [ { diff --git a/core/src/components/alert/usage/angular.md b/core/src/components/alert/usage/angular.md index 14a8f06e3a..9855024095 100644 --- a/core/src/components/alert/usage/angular.md +++ b/core/src/components/alert/usage/angular.md @@ -13,6 +13,7 @@ export class AlertExample { async presentAlert() { const alert = await this.alertController.create({ + cssClass: 'my-custom-class', header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', @@ -24,6 +25,7 @@ export class AlertExample { async presentAlertMultipleButtons() { const alert = await this.alertController.create({ + cssClass: 'my-custom-class', header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', @@ -35,6 +37,7 @@ export class AlertExample { async presentAlertConfirm() { const alert = await this.alertController.create({ + cssClass: 'my-custom-class', header: 'Confirm!', message: 'Message text!!!', buttons: [ @@ -59,6 +62,7 @@ export class AlertExample { async presentAlertPrompt() { const alert = await this.alertController.create({ + cssClass: 'my-custom-class', header: 'Prompt!', inputs: [ { @@ -131,6 +135,7 @@ export class AlertExample { async presentAlertRadio() { const alert = await this.alertController.create({ + cssClass: 'my-custom-class', header: 'Radio', inputs: [ { @@ -193,6 +198,7 @@ export class AlertExample { async presentAlertCheckbox() { const alert = await this.alertController.create({ + cssClass: 'my-custom-class', header: 'Checkbox', inputs: [ { @@ -257,6 +263,10 @@ export class AlertExample { await alert.present(); } - } ``` + + +### Style Placement + +In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Alert can be presented from within a page, the `ion-alert` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config). \ No newline at end of file diff --git a/core/src/components/alert/usage/javascript.md b/core/src/components/alert/usage/javascript.md index 496d1ffdb5..b8805ce5a6 100644 --- a/core/src/components/alert/usage/javascript.md +++ b/core/src/components/alert/usage/javascript.md @@ -1,6 +1,7 @@ ```javascript function presentAlert() { const alert = document.createElement('ion-alert'); + alert.cssClass = 'my-custom-class'; alert.header = 'Alert'; alert.subHeader = 'Subtitle'; alert.message = 'This is an alert message.'; @@ -12,6 +13,7 @@ function presentAlert() { function presentAlertMultipleButtons() { const alert = document.createElement('ion-alert'); + alert.cssClass = 'my-custom-class'; alert.header = 'Alert'; alert.subHeader = 'Subtitle'; alert.message = 'This is an alert message.'; @@ -23,6 +25,7 @@ function presentAlertMultipleButtons() { function presentAlertConfirm() { const alert = document.createElement('ion-alert'); + alert.cssClass = 'my-custom-class'; alert.header = 'Confirm!'; alert.message = 'Message text!!!'; alert.buttons = [ @@ -47,6 +50,7 @@ function presentAlertConfirm() { function presentAlertPrompt() { const alert = document.createElement('ion-alert'); + alert.cssClass = 'my-custom-class'; alert.header = 'Prompt!'; alert.inputs = [ { @@ -116,6 +120,7 @@ function presentAlertPrompt() { function presentAlertRadio() { const alert = document.createElement('ion-alert'); + alert.cssClass = 'my-custom-class'; alert.header = 'Radio'; alert.inputs = [ { @@ -171,6 +176,7 @@ function presentAlertRadio() { function presentAlertCheckbox() { const alert = document.createElement('ion-alert'); + alert.cssClass = 'my-custom-class'; alert.header = 'Checkbox'; alert.inputs = [ { diff --git a/core/src/components/alert/usage/react.md b/core/src/components/alert/usage/react.md index 1f2eca5498..ca61db7034 100644 --- a/core/src/components/alert/usage/react.md +++ b/core/src/components/alert/usage/react.md @@ -22,6 +22,7 @@ export const AlertExample: React.FC = () => { setShowAlert1(false)} + cssClass='my-custom-class' header={'Alert'} subHeader={'Subtitle'} message={'This is an alert message.'} @@ -31,6 +32,7 @@ export const AlertExample: React.FC = () => { setShowAlert2(false)} + cssClass='my-custom-class' header={'Alert'} subHeader={'Subtitle'} message={'This is an alert message.'} @@ -40,6 +42,7 @@ export const AlertExample: React.FC = () => { setShowAlert3(false)} + cssClass='my-custom-class' header={'Confirm!'} message={'Message text!!!'} buttons={[ @@ -63,6 +66,7 @@ export const AlertExample: React.FC = () => { setShowAlert4(false)} + cssClass='my-custom-class' header={'Prompt!'} inputs={[ { @@ -127,6 +131,7 @@ export const AlertExample: React.FC = () => { setShowAlert5(false)} + cssClass='my-custom-class' header={'Radio'} inputs={[ { @@ -188,6 +193,7 @@ export const AlertExample: React.FC = () => { setShowAlert6(false)} + cssClass='my-custom-class' header={'Checkbox'} inputs={[ { diff --git a/core/src/components/alert/usage/stencil.md b/core/src/components/alert/usage/stencil.md index 371411496c..2c3e8e0067 100644 --- a/core/src/components/alert/usage/stencil.md +++ b/core/src/components/alert/usage/stencil.md @@ -10,6 +10,7 @@ import { alertController } from '@ionic/core'; export class AlertExample { async presentAlert() { const alert = await alertController.create({ + cssClass: 'my-custom-class', header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', @@ -21,6 +22,7 @@ export class AlertExample { async presentAlertMultipleButtons() { const alert = await alertController.create({ + cssClass: 'my-custom-class', header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', @@ -32,6 +34,7 @@ export class AlertExample { async presentAlertConfirm() { const alert = await alertController.create({ + cssClass: 'my-custom-class', header: 'Confirm!', message: 'Message text!!!', buttons: [ @@ -56,6 +59,7 @@ export class AlertExample { async presentAlertPrompt() { const alert = await alertController.create({ + cssClass: 'my-custom-class', header: 'Prompt!', inputs: [ { @@ -128,6 +132,7 @@ export class AlertExample { async presentAlertRadio() { const alert = await alertController.create({ + cssClass: 'my-custom-class', header: 'Radio', inputs: [ { @@ -190,6 +195,7 @@ export class AlertExample { async presentAlertCheckbox() { const alert = await alertController.create({ + cssClass: 'my-custom-class', header: 'Checkbox', inputs: [ { diff --git a/core/src/components/alert/usage/vue.md b/core/src/components/alert/usage/vue.md index b414f92ade..4d0b61c29d 100644 --- a/core/src/components/alert/usage/vue.md +++ b/core/src/components/alert/usage/vue.md @@ -16,6 +16,7 @@ export default { presentAlert() { return this.$ionic.alertController .create({ + cssClass: 'my-custom-class', header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', @@ -27,6 +28,7 @@ export default { presentAlertMultipleButtons() { return this.$ionic.alertController .create({ + cssClass: 'my-custom-class', header: 'Alert', subHeader: 'Subtitle', message: 'This is an alert message.', @@ -38,6 +40,7 @@ export default { presentAlertConfirm() { return this.$ionic.alertController .create({ + cssClass: 'my-custom-class', header: 'Confirm!', message: 'Message text!!!', buttons: [ @@ -63,6 +66,7 @@ export default { presentAlertPrompt() { return this.$ionic.alertController .create({ + cssClass: 'my-custom-class', header: 'Prompt!', inputs: [ { @@ -126,6 +130,7 @@ export default { presentAlertRadio() { return this.$ionic.alertController .create({ + cssClass: 'my-custom-class', header: 'Radio', inputs: [ { @@ -183,6 +188,7 @@ export default { presentAlertCheckbox() { return this.$ionic.alertController .create({ + cssClass: 'my-custom-class', header: 'Checkbox', inputs: [ { diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md index 4dba594281..a4bac0d5ab 100644 --- a/core/src/components/loading/readme.md +++ b/core/src/components/loading/readme.md @@ -6,6 +6,37 @@ An overlay that can be used to indicate activity while blocking user interaction The loading indicator can be dismissed automatically after a specific amount of time by passing the number of milliseconds to display it in the `duration` of the loading options. To dismiss the loading indicator after creation, call the `dismiss()` method on the loading instance. The `onDidDismiss` function can be called to perform an action after the loading indicator is dismissed. +### Customization + +Loading uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. + +We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the [Usage](#usage) section for an example of how to pass a class using `cssClass`. + +```css +/* DOES NOT WORK - not specific enough */ +ion-loading { + color: green; +} + +/* Works - pass "my-custom-class" in cssClass to increase specificity */ +.my-custom-class { + color: green; +} +``` + +Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Loading without needing to target individual elements: + +```css +.my-custom-class { + --background: #222; + --spinner-color: #fff; + + color: #fff; +} +``` + +> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information. + @@ -28,6 +59,7 @@ export class LoadingExample { async presentLoading() { const loading = await this.loadingController.create({ + cssClass: 'my-custom-class', message: 'Please wait...', duration: 2000 }); @@ -39,6 +71,7 @@ export class LoadingExample { async presentLoadingWithOptions() { const loading = await this.loadingController.create({ + cssClass: 'my-custom-class', spinner: null, duration: 5000, message: 'Click the backdrop to dismiss early...', @@ -55,11 +88,18 @@ export class LoadingExample { ``` +### Style Placement + +In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Loading can be presented from within a page, the `ion-loading` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config). + + ### Javascript ```javascript async function presentLoading() { const loading = document.createElement('ion-loading'); + + loading.cssClass = 'my-custom-class'; loading.message = 'Please wait...'; loading.duration = 2000; @@ -73,6 +113,7 @@ async function presentLoading() { async function presentLoadingWithOptions() { const loading = document.createElement('ion-loading'); + loading.cssClass = 'my-custom-class'; loading.spinner = null; loading.duration = 5000; loading.message = 'Click the backdrop to dismiss early...'; @@ -106,6 +147,7 @@ export const LoadingExample: React.FC = () => { setShowLoading(true)}>Show Loading setShowLoading(false)} message={'Please wait...'} @@ -131,6 +173,7 @@ import { loadingController } from '@ionic/core'; export class LoadingExample { async presentLoading() { const loading = await loadingController.create({ + cssClass: 'my-custom-class', message: 'Please wait...', duration: 2000 }); @@ -142,6 +185,7 @@ export class LoadingExample { async presentLoadingWithOptions() { const loading = await loadingController.create({ + cssClass: 'my-custom-class', spinner: null, duration: 5000, message: 'Click the backdrop to dismiss early...', @@ -187,6 +231,7 @@ export default { presentLoading() { return this.$ionic.loadingController .create({ + cssClass: 'my-custom-class', message: 'Please wait...', duration: this.timeout, }) @@ -200,6 +245,7 @@ export default { presentLoadingWithOptions() { return this.$ionic.loadingController .create({ + cssClass: 'my-custom-class', spinner: null, duration: this.timeout, message: 'Click the backdrop to dismiss early...', diff --git a/core/src/components/loading/usage/angular.md b/core/src/components/loading/usage/angular.md index 228fe72ada..fc2ac989e6 100644 --- a/core/src/components/loading/usage/angular.md +++ b/core/src/components/loading/usage/angular.md @@ -12,6 +12,7 @@ export class LoadingExample { async presentLoading() { const loading = await this.loadingController.create({ + cssClass: 'my-custom-class', message: 'Please wait...', duration: 2000 }); @@ -23,6 +24,7 @@ export class LoadingExample { async presentLoadingWithOptions() { const loading = await this.loadingController.create({ + cssClass: 'my-custom-class', spinner: null, duration: 5000, message: 'Click the backdrop to dismiss early...', @@ -37,3 +39,8 @@ export class LoadingExample { } } ``` + + +### Style Placement + +In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Loading can be presented from within a page, the `ion-loading` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config). diff --git a/core/src/components/loading/usage/javascript.md b/core/src/components/loading/usage/javascript.md index ed315a998b..cf7b5ef417 100644 --- a/core/src/components/loading/usage/javascript.md +++ b/core/src/components/loading/usage/javascript.md @@ -1,6 +1,8 @@ ```javascript async function presentLoading() { const loading = document.createElement('ion-loading'); + + loading.cssClass = 'my-custom-class'; loading.message = 'Please wait...'; loading.duration = 2000; @@ -14,6 +16,7 @@ async function presentLoading() { async function presentLoadingWithOptions() { const loading = document.createElement('ion-loading'); + loading.cssClass = 'my-custom-class'; loading.spinner = null; loading.duration = 5000; loading.message = 'Click the backdrop to dismiss early...'; diff --git a/core/src/components/loading/usage/react.md b/core/src/components/loading/usage/react.md index 3fb58fb969..102b5b730d 100644 --- a/core/src/components/loading/usage/react.md +++ b/core/src/components/loading/usage/react.md @@ -13,6 +13,7 @@ export const LoadingExample: React.FC = () => { setShowLoading(true)}>Show Loading setShowLoading(false)} message={'Please wait...'} diff --git a/core/src/components/loading/usage/stencil.md b/core/src/components/loading/usage/stencil.md index 26b1c7efc0..2cedc0d236 100644 --- a/core/src/components/loading/usage/stencil.md +++ b/core/src/components/loading/usage/stencil.md @@ -10,6 +10,7 @@ import { loadingController } from '@ionic/core'; export class LoadingExample { async presentLoading() { const loading = await loadingController.create({ + cssClass: 'my-custom-class', message: 'Please wait...', duration: 2000 }); @@ -21,6 +22,7 @@ export class LoadingExample { async presentLoadingWithOptions() { const loading = await loadingController.create({ + cssClass: 'my-custom-class', spinner: null, duration: 5000, message: 'Click the backdrop to dismiss early...', diff --git a/core/src/components/loading/usage/vue.md b/core/src/components/loading/usage/vue.md index d259fdb728..7f40ec25e5 100644 --- a/core/src/components/loading/usage/vue.md +++ b/core/src/components/loading/usage/vue.md @@ -16,6 +16,7 @@ export default { presentLoading() { return this.$ionic.loadingController .create({ + cssClass: 'my-custom-class', message: 'Please wait...', duration: this.timeout, }) @@ -29,6 +30,7 @@ export default { presentLoadingWithOptions() { return this.$ionic.loadingController .create({ + cssClass: 'my-custom-class', spinner: null, duration: this.timeout, message: 'Click the backdrop to dismiss early...', diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md index 6be90687a8..ecc19e1780 100644 --- a/core/src/components/modal/readme.md +++ b/core/src/components/modal/readme.md @@ -6,6 +6,33 @@ A Modal is a dialog that appears on top of the app's content, and must be dismis The modal can be dismissed after creation by calling the `dismiss()` method on the modal controller. The `onDidDismiss` function can be called to perform an action after the modal is dismissed. +### Customization + +Modal uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. + +We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the [Usage](#usage) section for an example of how to pass a class using `cssClass`. + +```css +/* DOES NOT WORK - not specific enough */ +.modal-wrapper { + background: #222; +} + +/* Works - pass "my-custom-class" in cssClass to increase specificity */ +.my-custom-class .modal-wrapper { + background: #222; +} +``` + +Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Modal without needing to target individual elements: + +```css +.my-custom-class { + --background: #222; +} +``` + +> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information. @@ -31,7 +58,8 @@ export class ModalExample { async presentModal() { const modal = await this.modalController.create({ - component: ModalPage + component: ModalPage, + cssClass: 'my-custom-class' }); return await modal.present(); } @@ -60,6 +88,7 @@ The previous example can be written to include data: async presentModal() { const modal = await this.modalController.create({ component: ModalPage, + cssClass: 'my-custom-class', componentProps: { 'firstName': 'Douglas', 'lastName': 'Adams', @@ -154,6 +183,7 @@ constructor(private routerOutlet: IonRouterOutlet) {} async presentModal() { const modal = await this.modalController.create({ component: ModalPage, + cssClass: 'my-custom-class', swipeToClose: true, presentingElement: this.routerOutlet.nativeEl }); @@ -171,6 +201,7 @@ constructor(private modalCtrl: ModalController) {} async presentModal() { const modal = await this.modalController.create({ component: ModalPage, + cssClass: 'my-custom-class', swipeToClose: true, presentingElement: await this.modalCtrl.getTop() // Get the top-most ion-modal }); @@ -179,6 +210,11 @@ async presentModal() { ``` +### Style Placement + +In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Modal can be presented from within a page, the `ion-modal` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config). + + ### Javascript ```javascript @@ -205,6 +241,7 @@ function presentModal() { // create the modal with the `modal-page` component const modalElement = document.createElement('ion-modal'); modalElement.component = 'modal-page'; + modalElement.cssClass = 'my-custom-class'; // present the modal document.body.appendChild(modalElement); @@ -219,6 +256,7 @@ During creation of a modal, data can be passed in through the `componentProps`. ```javascript const modalElement = document.createElement('ion-modal'); modalElement.component = 'modal-page'; +modalElement.cssClass = 'my-custom-class'; modalElement.componentProps = { 'firstName': 'Douglas', 'lastName': 'Adams', @@ -267,6 +305,7 @@ Modals in iOS mode have the ability to be presented in a card-style and swiped t ```javascript const modalElement = document.createElement('ion-modal'); modalElement.component = 'modal-page'; +modalElement.cssClass = 'my-custom-class'; modalElement.swipeToClose = true; modalElement.presentingElement = document.querySelector('ion-nav'); ``` @@ -276,6 +315,7 @@ In most scenarios, using the `ion-nav` element as the `presentingElement` is fin ```javascript const modalElement = document.createElement('ion-modal'); modalElement.component = 'modal-page'; +modalElement.cssClass = 'my-custom-class'; modalElement.swipeToClose = true; modalElement.presentingElement = await modalController.getTop(); // Get the top-most ion-modal ``` @@ -292,7 +332,7 @@ export const ModalExample: React.FC = () => { return ( - +

This is modal content

setShowModal(false)}>Close Modal @@ -307,10 +347,11 @@ export const ModalExample: React.FC = () => { Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped. ```tsx - setShowModal(false)}>

This is modal content

setShowModal(false)}>Close Modal @@ -320,19 +361,21 @@ Modals in iOS mode have the ability to be presented in a card-style and swiped t In most scenarios, setting a ref on `IonPage` and passing that ref's `current` value to `presentingElement` is fine. In cases where you are presenting a card-style modal from within another modal, you should pass in the top-most `ion-modal` ref as the `presentingElement`. ```tsx - setShowModal(false)}>

This is modal content

setShow2ndModal(true)}>Show 2nd Modal setShowModal(false)}>Close Modal - setShow2ndModal(false)}>

This is more modal content

setShow2ndModal(false)}>Close Modal @@ -354,7 +397,8 @@ import { modalController } from '@ionic/core'; export class ModalExample { async presentModal() { const modal = await modalController.create({ - component: 'page-modal' + component: 'page-modal', + cssClass: 'my-custom-class' }); await modal.present(); } @@ -396,6 +440,7 @@ The previous example can be written to include data: async presentModal() { const modal = await modalController.create({ component: 'page-modal', + cssClass: 'my-custom-class', componentProps: { 'firstName': 'Douglas', 'lastName': 'Adams', @@ -466,6 +511,7 @@ export class ModalExample { async presentModal() { const modal = await modalController.create({ component: 'page-modal', + cssClass: 'my-custom-class', swipeToClose: true, presentingElement: this.el.closest('ion-router-outlet'), }); @@ -481,6 +527,7 @@ In most scenarios, using the `ion-router-outlet` element as the `presentingEleme async presentModal() { const modal = await modalController.create({ component: 'page-modal', + cssClass: 'my-custom-class', swipeToClose: true, presentingElement: await modalController.getTop() // Get the top-most ion-modal }); @@ -538,6 +585,7 @@ export default { return this.$ionic.modalController .create({ component: Modal, + cssClass: 'my-custom-class', componentProps: { data: { content: 'New Content', diff --git a/core/src/components/modal/usage/angular.md b/core/src/components/modal/usage/angular.md index 3998fb5464..98db404510 100644 --- a/core/src/components/modal/usage/angular.md +++ b/core/src/components/modal/usage/angular.md @@ -15,7 +15,8 @@ export class ModalExample { async presentModal() { const modal = await this.modalController.create({ - component: ModalPage + component: ModalPage, + cssClass: 'my-custom-class' }); return await modal.present(); } @@ -44,6 +45,7 @@ The previous example can be written to include data: async presentModal() { const modal = await this.modalController.create({ component: ModalPage, + cssClass: 'my-custom-class', componentProps: { 'firstName': 'Douglas', 'lastName': 'Adams', @@ -138,6 +140,7 @@ constructor(private routerOutlet: IonRouterOutlet) {} async presentModal() { const modal = await this.modalController.create({ component: ModalPage, + cssClass: 'my-custom-class', swipeToClose: true, presentingElement: this.routerOutlet.nativeEl }); @@ -155,9 +158,15 @@ constructor(private modalCtrl: ModalController) {} async presentModal() { const modal = await this.modalController.create({ component: ModalPage, + cssClass: 'my-custom-class', swipeToClose: true, presentingElement: await this.modalCtrl.getTop() // Get the top-most ion-modal }); return await modal.present(); } ``` + + +### Style Placement + +In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Modal can be presented from within a page, the `ion-modal` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config). diff --git a/core/src/components/modal/usage/javascript.md b/core/src/components/modal/usage/javascript.md index ada96b6150..ce0e7a6c82 100644 --- a/core/src/components/modal/usage/javascript.md +++ b/core/src/components/modal/usage/javascript.md @@ -23,6 +23,7 @@ function presentModal() { // create the modal with the `modal-page` component const modalElement = document.createElement('ion-modal'); modalElement.component = 'modal-page'; + modalElement.cssClass = 'my-custom-class'; // present the modal document.body.appendChild(modalElement); @@ -37,6 +38,7 @@ During creation of a modal, data can be passed in through the `componentProps`. ```javascript const modalElement = document.createElement('ion-modal'); modalElement.component = 'modal-page'; +modalElement.cssClass = 'my-custom-class'; modalElement.componentProps = { 'firstName': 'Douglas', 'lastName': 'Adams', @@ -85,6 +87,7 @@ Modals in iOS mode have the ability to be presented in a card-style and swiped t ```javascript const modalElement = document.createElement('ion-modal'); modalElement.component = 'modal-page'; +modalElement.cssClass = 'my-custom-class'; modalElement.swipeToClose = true; modalElement.presentingElement = document.querySelector('ion-nav'); ``` @@ -94,6 +97,7 @@ In most scenarios, using the `ion-nav` element as the `presentingElement` is fin ```javascript const modalElement = document.createElement('ion-modal'); modalElement.component = 'modal-page'; +modalElement.cssClass = 'my-custom-class'; modalElement.swipeToClose = true; modalElement.presentingElement = await modalController.getTop(); // Get the top-most ion-modal ``` diff --git a/core/src/components/modal/usage/react.md b/core/src/components/modal/usage/react.md index e4aaf7231a..85e70ddc95 100644 --- a/core/src/components/modal/usage/react.md +++ b/core/src/components/modal/usage/react.md @@ -7,7 +7,7 @@ export const ModalExample: React.FC = () => { return ( - +

This is modal content

setShowModal(false)}>Close Modal @@ -22,10 +22,11 @@ export const ModalExample: React.FC = () => { Modals in iOS mode have the ability to be presented in a card-style and swiped to close. The card-style presentation and swipe to close gesture are not mutually exclusive, meaning you can pick and choose which features you want to use. For example, you can have a card-style modal that cannot be swiped or a full sized modal that can be swiped. ```tsx - setShowModal(false)}>

This is modal content

setShowModal(false)}>Close Modal @@ -35,19 +36,21 @@ Modals in iOS mode have the ability to be presented in a card-style and swiped t In most scenarios, setting a ref on `IonPage` and passing that ref's `current` value to `presentingElement` is fine. In cases where you are presenting a card-style modal from within another modal, you should pass in the top-most `ion-modal` ref as the `presentingElement`. ```tsx - setShowModal(false)}>

This is modal content

setShow2ndModal(true)}>Show 2nd Modal setShowModal(false)}>Close Modal - setShow2ndModal(false)}>

This is more modal content

setShow2ndModal(false)}>Close Modal diff --git a/core/src/components/modal/usage/stencil.md b/core/src/components/modal/usage/stencil.md index aecf844a50..197b92bc40 100644 --- a/core/src/components/modal/usage/stencil.md +++ b/core/src/components/modal/usage/stencil.md @@ -10,7 +10,8 @@ import { modalController } from '@ionic/core'; export class ModalExample { async presentModal() { const modal = await modalController.create({ - component: 'page-modal' + component: 'page-modal', + cssClass: 'my-custom-class' }); await modal.present(); } @@ -52,6 +53,7 @@ The previous example can be written to include data: async presentModal() { const modal = await modalController.create({ component: 'page-modal', + cssClass: 'my-custom-class', componentProps: { 'firstName': 'Douglas', 'lastName': 'Adams', @@ -122,6 +124,7 @@ export class ModalExample { async presentModal() { const modal = await modalController.create({ component: 'page-modal', + cssClass: 'my-custom-class', swipeToClose: true, presentingElement: this.el.closest('ion-router-outlet'), }); @@ -137,6 +140,7 @@ In most scenarios, using the `ion-router-outlet` element as the `presentingEleme async presentModal() { const modal = await modalController.create({ component: 'page-modal', + cssClass: 'my-custom-class', swipeToClose: true, presentingElement: await modalController.getTop() // Get the top-most ion-modal }); diff --git a/core/src/components/modal/usage/vue.md b/core/src/components/modal/usage/vue.md index fec97ab5ce..79e7884e70 100644 --- a/core/src/components/modal/usage/vue.md +++ b/core/src/components/modal/usage/vue.md @@ -45,6 +45,7 @@ export default { return this.$ionic.modalController .create({ component: Modal, + cssClass: 'my-custom-class', componentProps: { data: { content: 'New Content', diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index 997680c687..7de1ca9bbb 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -6,6 +6,34 @@ A Popover is a dialog that appears on top of the current page. It can be used fo To present a popover, call the `present` method on a popover instance. In order to position the popover relative to the element clicked, a click event needs to be passed into the options of the the `present` method. If the event is not passed, the popover will be positioned in the center of the viewport. +### Customization + +Popover uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. + +We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. View the [Usage](#usage) section for an example of how to pass a class using `cssClass`. + +```css +/* DOES NOT WORK - not specific enough */ +.popover-content { + background: #222; +} + +/* Works - pass "my-custom-class" in cssClass to increase specificity */ +.my-custom-class .popover-content { + background: #222; +} +``` + +Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Popover without needing to target individual elements: + +```css +.my-custom-class { + --background: #222; +} +``` + +> If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information. + @@ -30,6 +58,7 @@ export class PopoverExample { async presentPopover(ev: any) { const popover = await this.popoverController.create({ component: PopoverComponent, + cssClass: 'my-custom-class', event: ev, translucent: true }); @@ -39,12 +68,18 @@ export class PopoverExample { ``` +### Style Placement + +In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Popover can be presented from within a page, the `ion-popover` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config). + + ### Javascript ```javascript function presentPopover(ev) { const popover = Object.assign(document.createElement('ion-popover'), { component: 'popover-example-page', + cssClass: 'my-custom-class', event: ev, translucent: true }); @@ -67,6 +102,7 @@ export const PopoverExample: React.FC = () => { <> setShowPopover(false)} >

This is popover content

@@ -93,6 +129,7 @@ export class PopoverExample { async presentPopover(ev: any) { const popover = await popoverController.create({ component: 'page-popover', + cssClass: 'my-custom-class', event: ev, translucent: true }); diff --git a/core/src/components/popover/usage/angular.md b/core/src/components/popover/usage/angular.md index 5e096f9938..4a8b082963 100644 --- a/core/src/components/popover/usage/angular.md +++ b/core/src/components/popover/usage/angular.md @@ -14,6 +14,7 @@ export class PopoverExample { async presentPopover(ev: any) { const popover = await this.popoverController.create({ component: PopoverComponent, + cssClass: 'my-custom-class', event: ev, translucent: true }); @@ -21,3 +22,8 @@ export class PopoverExample { } } ``` + + +### Style Placement + +In Angular, the CSS of a specific page is scoped only to elements of that page. Even though the Popover can be presented from within a page, the `ion-popover` element is appended outside of the current page. This means that any custom styles need to go in a global stylesheet file. In an Ionic Angular starter this can be the `src/global.scss` file or you can register a new global style file by [adding to the `styles` build option in `angular.json`](https://angular.io/guide/workspace-config#style-script-config). diff --git a/core/src/components/popover/usage/javascript.md b/core/src/components/popover/usage/javascript.md index bbce90a448..548a236399 100644 --- a/core/src/components/popover/usage/javascript.md +++ b/core/src/components/popover/usage/javascript.md @@ -2,6 +2,7 @@ function presentPopover(ev) { const popover = Object.assign(document.createElement('ion-popover'), { component: 'popover-example-page', + cssClass: 'my-custom-class', event: ev, translucent: true }); diff --git a/core/src/components/popover/usage/react.md b/core/src/components/popover/usage/react.md index 237f938a11..9cde980381 100644 --- a/core/src/components/popover/usage/react.md +++ b/core/src/components/popover/usage/react.md @@ -9,6 +9,7 @@ export const PopoverExample: React.FC = () => { <> setShowPopover(false)} >

This is popover content

diff --git a/core/src/components/popover/usage/stencil.md b/core/src/components/popover/usage/stencil.md index e1c7746656..ed43652236 100644 --- a/core/src/components/popover/usage/stencil.md +++ b/core/src/components/popover/usage/stencil.md @@ -11,6 +11,7 @@ export class PopoverExample { async presentPopover(ev: any) { const popover = await popoverController.create({ component: 'page-popover', + cssClass: 'my-custom-class', event: ev, translucent: true });