diff --git a/core/README.md b/core/README.md index 41f4dc20f6..a2af898205 100644 --- a/core/README.md +++ b/core/README.md @@ -18,9 +18,14 @@ The Ionic Core package contains the Web Components that make up the reusable UI ## How to use +### Vanilla HTML + Easiest way to start using Ionic Core is by adding a script tag to the CDN: - +```html + + +``` Any Ionic component added to the webpage will automatically load. This includes writing the component tag directly in HTML, or using JavaScript such as `document.createElement('ion-toggle')`. diff --git a/core/scripts/update-readme.js b/core/scripts/update-readme.js index 219e9aeb52..9c6e81cdae 100644 --- a/core/scripts/update-readme.js +++ b/core/scripts/update-readme.js @@ -18,9 +18,8 @@ let readmeContent = fs.readFileSync(readmePath, 'utf-8'); // https://unpkg.com/@ionic/core@latest/dist/ionic.js readmeContent = readmeContent.replace( - /https\:\/\/unpkg.com\/@ionic\/core@(.+?)\/dist\/ionic\.js/, - 'https://unpkg.com/@ionic/core@' + version + '/dist/ionic.js' + /https\:\/\/unpkg.com\/@ionic\/core@(.+?)\//g, + 'https://unpkg.com/@ionic/core@' + version + '/' ); -fs fs.writeFileSync(readmePath, readmeContent); diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md index 2203f6ac88..b21311cd24 100644 --- a/core/src/components/popover/readme.md +++ b/core/src/components/popover/readme.md @@ -16,23 +16,22 @@ To present a popover, call the `present` method on a popover instance. In order ## Properties -| Property | Attribute | Description | Type | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- | -| `animated` | `animated` | If true, the popover will animate. Defaults to `true`. | `boolean` | -| `backdropDismiss` | `backdrop-dismiss` | If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` | -| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `Color` | -| `componentProps` | -- | The data to pass to the popover component. | `ComponentProps` | -| `component` | `component` | The component to display inside of the popover. | `ComponentRef` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` | -| `delegate` | -- | | `FrameworkDelegate` | -| `enterAnimation` | -- | Animation to use when the popover is presented. | `AnimationBuilder` | -| `event` | -- | The event to pass to the popover animation. | `any` | -| `keyboardClose` | `keyboard-close` | If true, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | -| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `AnimationBuilder` | -| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | -| `overlayIndex` | `overlay-index` | | `number` | -| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the popover. Defaults to `true`. | `boolean` | -| `translucent` | `translucent` | If true, the popover will be translucent. Defaults to `false`. | `boolean` | +| Property | Attribute | Description | Type | +| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | -------------------- | +| `animated` | `animated` | If true, the popover will animate. Defaults to `true`. | `boolean` | +| `backdropDismiss` | `backdrop-dismiss` | If true, the popover will be dismissed when the backdrop is clicked. Defaults to `true`. | `boolean` | +| `componentProps` | -- | The data to pass to the popover component. | `ComponentProps` | +| `component` | `component` | The component to display inside of the popover. | `ComponentRef` | +| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string`, `string[]` | +| `delegate` | -- | | `FrameworkDelegate` | +| `enterAnimation` | -- | Animation to use when the popover is presented. | `AnimationBuilder` | +| `event` | -- | The event to pass to the popover animation. | `any` | +| `keyboardClose` | `keyboard-close` | If true, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | +| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `AnimationBuilder` | +| `mode` | `mode` | The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. | `Mode` | +| `overlayIndex` | `overlay-index` | | `number` | +| `showBackdrop` | `show-backdrop` | If true, a backdrop will be displayed behind the popover. Defaults to `true`. | `boolean` | +| `translucent` | `translucent` | If true, the popover will be translucent. Defaults to `false`. | `boolean` | ## Events