diff --git a/core/package.json b/core/package.json index d55ac94241..117c799d73 100644 --- a/core/package.json +++ b/core/package.json @@ -75,10 +75,9 @@ }, "scripts": { "prepublishOnly": "npm run build", - "build": "npm run clean && npm run build.css && stencil build --docs --es5 --docs-json dist/docs.json && npm run cdnloader", + "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json && npm run cdnloader", "build.css": "npm run css.sass && npm run css.minify", "build.debug": "npm run clean && stencil build --debug", - "build.docs": "stencil build --docs", "build.docs.json": "stencil build --docs-json dist/docs.json", "clean": "node scripts/clean.js", "cdnloader": "node scripts/copy-cdn-loader.js", diff --git a/core/src/components/accordion-group/readme.md b/core/src/components/accordion-group/readme.md deleted file mode 100644 index a09fae3d10..0000000000 --- a/core/src/components/accordion-group/readme.md +++ /dev/null @@ -1,53 +0,0 @@ -# ion-accordion-group - -Accordion group is a container for accordion instances. It manages the state of the accordions and provides keyboard navigation. - -For more information as well as usage, see the [Accordion Documentation](./accordion) - -## Interfaces - -### AccordionGroupChangeEventDetail - -```typescript -interface AccordionGroupChangeEventDetail { - value: T; -} -``` - -### AccordionGroupCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface AccordionGroupCustomEvent extends CustomEvent { - detail: AccordionGroupChangeEventDetail; - target: HTMLIonAccordionGroupElement; -} -``` - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, all accordions inside of the accordion group will animate when expanding or collapsing. | `boolean` | `true` | -| `disabled` | `disabled` | If `true`, the accordion group cannot be interacted with. | `boolean` | `false` | -| `expand` | `expand` | Describes the expansion behavior for each accordion. Possible values are `"compact"` and `"inset"`. Defaults to `"compact"`. | `"compact" \| "inset"` | `'compact'` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `multiple` | `multiple` | If `true`, the accordion group can have multiple accordion components expanded at the same time. | `boolean \| undefined` | `undefined` | -| `readonly` | `readonly` | If `true`, the accordion group cannot be interacted with, but does not alter the opacity. | `boolean` | `false` | -| `value` | `value` | The value of the accordion group. | `null \| string \| string[] \| undefined` | `undefined` | - - -## Events - -| Event | Description | Type | -| ----------- | -------------------------------------------- | --------------------------------------------------- | -| `ionChange` | Emitted when the value property has changed. | `CustomEvent>` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/accordion/readme.md b/core/src/components/accordion/readme.md deleted file mode 100644 index 1ae2ed7b35..0000000000 --- a/core/src/components/accordion/readme.md +++ /dev/null @@ -1,1666 +0,0 @@ -# ion-accordion - -Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. All `ion-accordion` components should be grouped inside `ion-accordion-group` components. - -## Anatomy - -### Header - -The `header` slot is used as the toggle that will expand or collapse your accordion. We recommend you use an `ion-item` here to take advantage of the accessibility and theming functionalities. - -When using `ion-item` in the `header` slot, the `ion-item`'s `button` prop is set to `true` and the `detail` prop is set to `false`. In addition, we will also automatically add a toggle icon to the `ion-item`. This icon will automatically be rotated when you expand or collapse the accordion. See [Customizing Icons](#customizing-icons) for more information. - -### Content - -The `content` slot is used as the part of the accordion that is revealed or hidden depending on the state of your accordion. You can place anything here except for another `ion-content` instance as only one instance of `ion-content` should be added per page. - -## Customizing Icons - -When using an `ion-item` in the `header` slot, we automatically add an `ion-icon`. The type of icon used can be controlled by the `toggleIcon` property, and the slot it is added to can be controlled with the `toggleIconSlot` property. - -If you would like to manage the icon yourself or use an icon that is not an `ion-icon`, you can add the `ion-accordion-toggle-icon` class to the icon element. - -Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion. - -## Expansion Styles - -### Built in Styles - -There are two built in expansion styles: `compact` and `inset`. This expansion style is set via the `expand` property on `ion-accordion-group`. When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened. - -### Custom Styles - -You can customize the expansion behavior by styling based on the accordion's state: - -```css -ion-accordion { - margin: 0 auto; -} - -ion-accordion.accordion-expanding, -ion-accordion.accordion-expanded { - width: calc(100% - 32px); - margin: 16px auto; -} -``` - -This example will cause an accordion to have its width shrink when it is opened. You can also style the accordion differently when it is closing by targeting the `.accordion-collapsing` and `.accordion-collapsed` classes. - -If you need to target specific pieces of the accordion, we recommend targeting the element directly. For example, if you want to customize the `ion-item` in your `header` slot when the accordion is expanded, you can use the following selector: - -```css -ion-accordion.accordion-expanding ion-item[slot="header"], -ion-accordion.accordion-expanded ion-item[slot="header"] { - --color: red; -} -``` - -This example will set the text color of the header `ion-item` to red when the accordion is expanded. - -## Accessibility - -### Animations - -By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app. - -### Keyboard Navigation - -When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does: - -| Key | Function | -| ------------------ | ------------------------------------------------------------ | -| `Space` or `Enter` | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | -| `Tab` | Moves focus to the next focusable element. | -| `Shift` + `Tab` | Moves focus to the previous focusable element. | -| `Down Arrow` | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | -| `Up Arrow` | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | -| `Home` | When focus is on an accordion header, moves focus to the first accordion header. | -| `End` | When focus is on an accordion header, moves focus to the last accordion header. | - - - - -## Usage - -### Angular - -```html - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - -``` - -**component.html** -```html - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - -Log Value of Accordion Group -Close All Accordions -``` - -**component.ts** -```typescript -import { Component, ViewChild } from '@angular/core'; -import { IonAccordionGroup } from '@ionic/angular'; - -@Component({…}) -export class MyComponent { - @ViewChild(IonAccordionGroup, { static: true }) accordionGroup: IonAccordionGroup; - constructor() {} - - logAccordionValue() { - console.log(this.accordionGroup.value); - } - - closeAccordion() { - this.accordionGroup.value = undefined; - } -} -``` - - -### Javascript - -```html - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - -Log Value of Accordion Group -Close All Accordions - - -``` - - -### React - -```tsx -import React, { useRef } from 'react'; - -import { IonContent, IonAccordionGroup, IonAccordion, IonItem, IonLabel, IonList, IonPage } from '@ionic/react'; -import { arrowDownCircle } from 'ionicons/icons'; - -export const AccordionExample: React.FC = () => { - const accordionGroupRef = useRef(null); - const logAccordionValue = () => { - if (accordionGroupRef.current) { - console.log(accordionGroupRef.current.value); - } - } - const closeAccordion = () => { - if (accordionGroupRef.current) { - accordionGroupRef.current.value = undefined; - } - } - - return ( - - - {/*-- Basic --*/} - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - {/*-- Custom Icon --*/} - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - {/*-- Open Accordion --*/} - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - {/*-- Multiple Accordions --*/} - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - {/*-- Getting and setting the state of the accordion group --*/} - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - logAccordionValue()}>Log Value of Accordion Group - closeAccordion()}>Close All Accordions - - - ) -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'accordion-example', - styleUrl: 'accordion-example.css' -}) -export const AccordionExample { - private accordionGroupRef?: HTMLIonAccordionGroupEl; - - private logAccordionValue = () => { - const { accordionGroupRef } = this; - if (accordionGroupRef) { - console.log(accordionGroupRef.value); - } - } - - private closeAccordion = () => { - const { accordionGroupRef } = this; - if (accordionGroupRef) { - accordionGroupRef.value = undefined; - } - } - - render() { - return [ - // Basic - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - , - - // Custom Icon - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - , - - // Open Accordion - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - , - - // Multiple Accordions - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - , - - {/* Getting and setting the state of the accordion group */} - this.accordionGroupRef = el}> - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - , - - logAccordionValue()}>Log Value of Accordion Group, - closeAccordion()}>Close All Accordions, - ]; - } -); -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------------- | ------------------ | ---------------------------------------------------------------------------------------------- | ------------------ | ----------------------------------- | -| `disabled` | `disabled` | If `true`, the accordion cannot be interacted with. | `boolean` | `false` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `readonly` | `readonly` | If `true`, the accordion cannot be interacted with, but does not alter the opacity. | `boolean` | `false` | -| `toggleIcon` | `toggle-icon` | The toggle icon to use. This icon will be rotated when the accordion is expanded or collapsed. | `string` | `chevronDown` | -| `toggleIconSlot` | `toggle-icon-slot` | The slot inside of `ion-item` to place the toggle icon. Defaults to `'end'`. | `"end" \| "start"` | `'end'` | -| `value` | `value` | The value of the accordion. Defaults to an autogenerated value. | `string` | ``ion-accordion-${accordionIds++}`` | - - -## Slots - -| Slot | Description | -| ----------- | ---------------------------------------------------------------------------------- | -| `"content"` | Content is placed below the header and is shown or hidden based on expanded state. | -| `"header"` | Content is placed at the top and is used to expand or collapse the accordion item. | - - -## Shadow Parts - -| Part | Description | -| ------------ | ------------------------------------------------------------------------------------------------------------------------ | -| `"content"` | The wrapper element for the content slot. | -| `"expanded"` | The expanded element. Can be used in combination with the `header` and `content` parts (i.e. `::part(header expanded)`). | -| `"header"` | The wrapper element for the header slot. | - - -## Dependencies - -### Depends on - -- ion-icon - -### Graph -```mermaid -graph TD; - ion-accordion --> ion-icon - style ion-accordion fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/accordion/usage/angular.md b/core/src/components/accordion/usage/angular.md deleted file mode 100644 index 4e3b36f648..0000000000 --- a/core/src/components/accordion/usage/angular.md +++ /dev/null @@ -1,302 +0,0 @@ -```html - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - -``` - -**component.html** -```html - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - -Log Value of Accordion Group -Close All Accordions -``` - -**component.ts** -```typescript -import { Component, ViewChild } from '@angular/core'; -import { IonAccordionGroup } from '@ionic/angular'; - -@Component({…}) -export class MyComponent { - @ViewChild(IonAccordionGroup, { static: true }) accordionGroup: IonAccordionGroup; - constructor() {} - - logAccordionValue() { - console.log(this.accordionGroup.value); - } - - closeAccordion() { - this.accordionGroup.value = undefined; - } -} -``` \ No newline at end of file diff --git a/core/src/components/accordion/usage/javascript.md b/core/src/components/accordion/usage/javascript.md deleted file mode 100644 index 6e8fd6db5b..0000000000 --- a/core/src/components/accordion/usage/javascript.md +++ /dev/null @@ -1,293 +0,0 @@ -```html - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - -Log Value of Accordion Group -Close All Accordions - - -``` diff --git a/core/src/components/accordion/usage/react.md b/core/src/components/accordion/usage/react.md deleted file mode 100644 index 5fe222413c..0000000000 --- a/core/src/components/accordion/usage/react.md +++ /dev/null @@ -1,304 +0,0 @@ -```tsx -import React, { useRef } from 'react'; - -import { IonContent, IonAccordionGroup, IonAccordion, IonItem, IonLabel, IonList, IonPage } from '@ionic/react'; -import { arrowDownCircle } from 'ionicons/icons'; - -export const AccordionExample: React.FC = () => { - const accordionGroupRef = useRef(null); - const logAccordionValue = () => { - if (accordionGroupRef.current) { - console.log(accordionGroupRef.current.value); - } - } - const closeAccordion = () => { - if (accordionGroupRef.current) { - accordionGroupRef.current.value = undefined; - } - } - - return ( - - - {/*-- Basic --*/} - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - {/*-- Custom Icon --*/} - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - {/*-- Open Accordion --*/} - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - {/*-- Multiple Accordions --*/} - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - {/*-- Getting and setting the state of the accordion group --*/} - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - - - logAccordionValue()}>Log Value of Accordion Group - closeAccordion()}>Close All Accordions - - - ) -); -``` diff --git a/core/src/components/accordion/usage/stencil.md b/core/src/components/accordion/usage/stencil.md deleted file mode 100644 index 749275000c..0000000000 --- a/core/src/components/accordion/usage/stencil.md +++ /dev/null @@ -1,307 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'accordion-example', - styleUrl: 'accordion-example.css' -}) -export const AccordionExample { - private accordionGroupRef?: HTMLIonAccordionGroupEl; - - private logAccordionValue = () => { - const { accordionGroupRef } = this; - if (accordionGroupRef) { - console.log(accordionGroupRef.value); - } - } - - private closeAccordion = () => { - const { accordionGroupRef } = this; - if (accordionGroupRef) { - accordionGroupRef.value = undefined; - } - } - - render() { - return [ - // Basic - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - , - - // Custom Icon - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - , - - // Open Accordion - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - , - - // Multiple Accordions - - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - , - - {/* Getting and setting the state of the accordion group */} - this.accordionGroupRef = el}> - - - Colors - - - - - Red - - - Green - - - Blue - - - - - - Shapes - - - - - Circle - - - Triangle - - - Square - - - - - - Numbers - - - - - 1 - - - 2 - - - 3 - - - - , - - logAccordionValue()}>Log Value of Accordion Group, - closeAccordion()}>Close All Accordions, - ]; - } -); -``` diff --git a/core/src/components/accordion/usage/vue.md b/core/src/components/accordion/usage/vue.md deleted file mode 100644 index 52055a561d..0000000000 --- a/core/src/components/accordion/usage/vue.md +++ /dev/null @@ -1,310 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md deleted file mode 100644 index d0051e663d..0000000000 --- a/core/src/components/action-sheet/readme.md +++ /dev/null @@ -1,680 +0,0 @@ -# ion-action-sheet - -An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop. - -## Buttons - -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. - -A button can also be passed data via the `data` property on `ActionSheetButton`. This will populate the `data` field in the return value of the `onDidDismiss` method. - -## 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. - -## Interfaces - -### ActionSheetButton - -```typescript -interface ActionSheetButton { - text?: string; - role?: 'cancel' | 'destructive' | 'selected' | string; - icon?: string; - cssClass?: string | string[]; - handler?: () => boolean | void | Promise; - data?: T; -} -``` - -### ActionSheetOptions - -```typescript -interface ActionSheetOptions { - header?: string; - subHeader?: string; - cssClass?: string | string[]; - buttons: (ActionSheetButton | string)[]; - backdropDismiss?: boolean; - translucent?: boolean; - animated?: boolean; - mode?: Mode; - keyboardClose?: boolean; - id?: string; - htmlAttributes?: { [key: string]: any }; - - enterAnimation?: AnimationBuilder; - leaveAnimation?: AnimationBuilder; -} -``` - - - - -## Usage - -### Angular - -```typescript -import { Component } from '@angular/core'; -import { ActionSheetController } from '@ionic/angular'; - -@Component({ - selector: 'action-sheet-example', - templateUrl: 'action-sheet-example.html', - styleUrls: ['./action-sheet-example.css'], -}) -export class ActionSheetExample { - - constructor(public actionSheetController: ActionSheetController) {} - - async presentActionSheet() { - const actionSheet = await this.actionSheetController.create({ - header: 'Albums', - cssClass: 'my-custom-class', - buttons: [{ - text: 'Delete', - role: 'destructive', - icon: 'trash', - id: 'delete-button', - data: { - type: 'delete' - }, - handler: () => { - console.log('Delete clicked'); - } - }, { - text: 'Share', - icon: 'share', - data: 10, - handler: () => { - console.log('Share clicked'); - } - }, { - text: 'Play (open modal)', - icon: 'caret-forward-circle', - data: 'Data value', - handler: () => { - console.log('Play clicked'); - } - }, { - text: 'Favorite', - icon: 'heart', - handler: () => { - console.log('Favorite clicked'); - } - }, { - text: 'Cancel', - icon: 'close', - role: 'cancel', - handler: () => { - console.log('Cancel clicked'); - } - }] - }); - await actionSheet.present(); - - const { role, data } = await actionSheet.onDidDismiss(); - console.log('onDidDismiss resolved with role and data', role, data); - } - -} -``` - - -### 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.cssClass = 'my-custom-class'; - actionSheet.buttons = [{ - text: 'Delete', - role: 'destructive', - icon: 'trash', - id: 'delete-button', - data: { - type: 'delete' - }, - handler: () => { - console.log('Delete clicked'); - } - }, { - text: 'Share', - icon: 'share', - data: 10, - handler: () => { - console.log('Share clicked'); - } - }, { - text: 'Play (open modal)', - icon: 'caret-forward-circle', - data: 'Data value', - handler: () => { - console.log('Play clicked'); - } - }, { - text: 'Favorite', - icon: 'heart', - handler: () => { - console.log('Favorite clicked'); - } - }, { - text: 'Cancel', - icon: 'close', - role: 'cancel', - handler: () => { - console.log('Cancel clicked'); - } - }]; - document.body.appendChild(actionSheet); - await actionSheet.present(); - - const { role, data } = await actionSheet.onDidDismiss(); - console.log('onDidDismiss resolved with role and data', role, data); -} -``` - - -### React - -```tsx -/* Using with useIonActionSheet Hook */ - -import React from 'react'; -import { - IonButton, - IonContent, - IonPage, - useIonActionSheet, -} from '@ionic/react'; - -const ActionSheetExample: React.FC = () => { - const [present, dismiss] = useIonActionSheet(); - - return ( - - - - present({ - buttons: [{ text: 'Ok' }, { text: 'Cancel' }], - header: 'Action Sheet' - }) - } - > - Show ActionSheet - - - present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet') - } - > - Show ActionSheet using params - - { - present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet'); - setTimeout(dismiss, 3000); - }} - > - Show ActionSheet, hide after 3 seconds - - - - ); -}; -``` - -```tsx -/* Using with IonActionSheet Component */ - -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(false)} - cssClass='my-custom-class' - buttons={[{ - text: 'Delete', - role: 'destructive', - icon: trash, - id: 'delete-button', - data: { - type: 'delete' - }, - handler: () => { - console.log('Delete clicked'); - } - }, { - text: 'Share', - icon: share, - data: 10, - handler: () => { - console.log('Share clicked'); - } - }, { - text: 'Play (open modal)', - icon: caretForwardCircle, - data: 'Data value', - handler: () => { - console.log('Play clicked'); - } - }, { - text: 'Favorite', - icon: heart, - handler: () => { - console.log('Favorite clicked'); - } - }, { - text: 'Cancel', - icon: close, - role: 'cancel', - handler: () => { - console.log('Cancel clicked'); - } - }]} - > - - - ); -} -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -import { actionSheetController } from '@ionic/core'; - -@Component({ - tag: 'action-sheet-example', - styleUrl: 'action-sheet-example.css' -}) -export class ActionSheetExample { - async presentActionSheet() { - const actionSheet = await actionSheetController.create({ - header: 'Albums', - cssClass: 'my-custom-class', - buttons: [{ - text: 'Delete', - role: 'destructive', - icon: 'trash', - id: 'delete-button', - data: { - type: 'delete' - }, - handler: () => { - console.log('Delete clicked'); - } - }, { - text: 'Share', - icon: 'share', - data: 10, - handler: () => { - console.log('Share clicked'); - } - }, { - text: 'Play (open modal)', - icon: 'caret-forward-circle', - data: 'Data value', - handler: () => { - console.log('Play clicked'); - } - }, { - text: 'Favorite', - icon: 'heart', - handler: () => { - console.log('Favorite clicked'); - } - }, { - text: 'Cancel', - icon: 'close', - role: 'cancel', - handler: () => { - console.log('Cancel clicked'); - } - }] - }); - await actionSheet.present(); - - const { role, data } = await actionSheet.onDidDismiss(); - console.log('onDidDismiss resolved with role and data', role, data); - } - - render() { - return [ - - this.presentActionSheet()}>Present Action Sheet - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - -Developers can also use this component directly in their template: - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the action sheet will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the action sheet will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `buttons` | -- | An array of buttons for the action sheet. | `(string \| ActionSheetButton)[]` | `[]` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `enterAnimation` | -- | Animation to use when the action sheet is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `header` | `header` | Title for the action sheet. | `string \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the action sheet. | `undefined \| { [key: string]: any; }` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the action sheet is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `subHeader` | `sub-header` | Subtitle for the action sheet. | `string \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the action sheet will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | - - -## Events - -| Event | Description | Type | -| --------------------------- | --------------------------------------- | -------------------------------------- | -| `ionActionSheetDidDismiss` | Emitted after the alert has dismissed. | `CustomEvent>` | -| `ionActionSheetDidPresent` | Emitted after the alert has presented. | `CustomEvent` | -| `ionActionSheetWillDismiss` | Emitted before the alert has dismissed. | `CustomEvent>` | -| `ionActionSheetWillPresent` | Emitted before the alert has presented. | `CustomEvent` | - - -## Methods - -### `dismiss(data?: any, role?: string | undefined) => Promise` - -Dismiss the action sheet overlay after it has been presented. - -#### Returns - -Type: `Promise` - - - -### `onDidDismiss() => Promise>` - -Returns a promise that resolves when the action sheet did dismiss. - -#### Returns - -Type: `Promise>` - - - -### `onWillDismiss() => Promise>` - -Returns a promise that resolves when the action sheet will dismiss. - -#### Returns - -Type: `Promise>` - - - -### `present() => Promise` - -Present the action sheet overlay after it has been created. - -#### Returns - -Type: `Promise` - - - - -## CSS Custom Properties - -| Name | Description | -| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- | -| `--backdrop-opacity` | Opacity of the backdrop | -| `--background` | Background of the action sheet group | -| `--button-background` | Background of the action sheet button | -| `--button-background-activated` | Background of the action sheet button when pressed. Note: setting this will interfere with the Material Design ripple. | -| `--button-background-activated-opacity` | Opacity of the action sheet button background when pressed | -| `--button-background-focused` | Background of the action sheet button when tabbed to | -| `--button-background-focused-opacity` | Opacity of the action sheet button background when tabbed to | -| `--button-background-hover` | Background of the action sheet button on hover | -| `--button-background-hover-opacity` | Opacity of the action sheet button background on hover | -| `--button-background-selected` | Background of the selected action sheet button | -| `--button-background-selected-opacity` | Opacity of the selected action sheet button background | -| `--button-color` | Color of the action sheet button | -| `--button-color-activated` | Color of the action sheet button when pressed | -| `--button-color-focused` | Color of the action sheet button when tabbed to | -| `--button-color-hover` | Color of the action sheet button on hover | -| `--button-color-selected` | Color of the selected action sheet button | -| `--color` | Color of the action sheet text | -| `--height` | height of the action sheet | -| `--max-height` | Maximum height of the action sheet | -| `--max-width` | Maximum width of the action sheet | -| `--min-height` | Minimum height of the action sheet | -| `--min-width` | Minimum width of the action sheet | -| `--width` | Width of the action sheet | - - -## Dependencies - -### Used by - - - [ion-select](../select) - -### Depends on - -- [ion-backdrop](../backdrop) -- ion-icon -- [ion-ripple-effect](../ripple-effect) - -### Graph -```mermaid -graph TD; - ion-action-sheet --> ion-backdrop - ion-action-sheet --> ion-icon - ion-action-sheet --> ion-ripple-effect - ion-select --> ion-action-sheet - style ion-action-sheet fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/action-sheet/usage/angular.md b/core/src/components/action-sheet/usage/angular.md deleted file mode 100644 index 5d549dd7a1..0000000000 --- a/core/src/components/action-sheet/usage/angular.md +++ /dev/null @@ -1,70 +0,0 @@ -```typescript -import { Component } from '@angular/core'; -import { ActionSheetController } from '@ionic/angular'; - -@Component({ - selector: 'action-sheet-example', - templateUrl: 'action-sheet-example.html', - styleUrls: ['./action-sheet-example.css'], -}) -export class ActionSheetExample { - - constructor(public actionSheetController: ActionSheetController) {} - - async presentActionSheet() { - const actionSheet = await this.actionSheetController.create({ - header: 'Albums', - cssClass: 'my-custom-class', - buttons: [{ - text: 'Delete', - role: 'destructive', - icon: 'trash', - id: 'delete-button', - data: { - type: 'delete' - }, - handler: () => { - console.log('Delete clicked'); - } - }, { - text: 'Share', - icon: 'share', - data: 10, - handler: () => { - console.log('Share clicked'); - } - }, { - text: 'Play (open modal)', - icon: 'caret-forward-circle', - data: 'Data value', - handler: () => { - console.log('Play clicked'); - } - }, { - text: 'Favorite', - icon: 'heart', - handler: () => { - console.log('Favorite clicked'); - } - }, { - text: 'Cancel', - icon: 'close', - role: 'cancel', - handler: () => { - console.log('Cancel clicked'); - } - }] - }); - await actionSheet.present(); - - const { role, data } = await actionSheet.onDidDismiss(); - console.log('onDidDismiss resolved with role and data', role, data); - } - -} -``` - - -### 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 deleted file mode 100644 index 57913c3ad6..0000000000 --- a/core/src/components/action-sheet/usage/javascript.md +++ /dev/null @@ -1,52 +0,0 @@ -```javascript -async function presentActionSheet() { - const actionSheet = document.createElement('ion-action-sheet'); - - actionSheet.header = 'Albums'; - actionSheet.cssClass = 'my-custom-class'; - actionSheet.buttons = [{ - text: 'Delete', - role: 'destructive', - icon: 'trash', - id: 'delete-button', - data: { - type: 'delete' - }, - handler: () => { - console.log('Delete clicked'); - } - }, { - text: 'Share', - icon: 'share', - data: 10, - handler: () => { - console.log('Share clicked'); - } - }, { - text: 'Play (open modal)', - icon: 'caret-forward-circle', - data: 'Data value', - handler: () => { - console.log('Play clicked'); - } - }, { - text: 'Favorite', - icon: 'heart', - handler: () => { - console.log('Favorite clicked'); - } - }, { - text: 'Cancel', - icon: 'close', - role: 'cancel', - handler: () => { - console.log('Cancel clicked'); - } - }]; - document.body.appendChild(actionSheet); - await actionSheet.present(); - - const { role, data } = await actionSheet.onDidDismiss(); - console.log('onDidDismiss resolved with role and data', role, data); -} -``` diff --git a/core/src/components/action-sheet/usage/react.md b/core/src/components/action-sheet/usage/react.md deleted file mode 100644 index 11ffb4c643..0000000000 --- a/core/src/components/action-sheet/usage/react.md +++ /dev/null @@ -1,115 +0,0 @@ -```tsx -/* Using with useIonActionSheet Hook */ - -import React from 'react'; -import { - IonButton, - IonContent, - IonPage, - useIonActionSheet, -} from '@ionic/react'; - -const ActionSheetExample: React.FC = () => { - const [present, dismiss] = useIonActionSheet(); - - return ( - - - - present({ - buttons: [{ text: 'Ok' }, { text: 'Cancel' }], - header: 'Action Sheet' - }) - } - > - Show ActionSheet - - - present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet') - } - > - Show ActionSheet using params - - { - present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet'); - setTimeout(dismiss, 3000); - }} - > - Show ActionSheet, hide after 3 seconds - - - - ); -}; -``` - -```tsx -/* Using with IonActionSheet Component */ - -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(false)} - cssClass='my-custom-class' - buttons={[{ - text: 'Delete', - role: 'destructive', - icon: trash, - id: 'delete-button', - data: { - type: 'delete' - }, - handler: () => { - console.log('Delete clicked'); - } - }, { - text: 'Share', - icon: share, - data: 10, - handler: () => { - console.log('Share clicked'); - } - }, { - text: 'Play (open modal)', - icon: caretForwardCircle, - data: 'Data value', - handler: () => { - console.log('Play clicked'); - } - }, { - text: 'Favorite', - icon: heart, - handler: () => { - console.log('Favorite clicked'); - } - }, { - text: 'Cancel', - icon: close, - role: 'cancel', - handler: () => { - console.log('Cancel clicked'); - } - }]} - > - - - ); -} -``` diff --git a/core/src/components/action-sheet/usage/stencil.md b/core/src/components/action-sheet/usage/stencil.md deleted file mode 100644 index 92b76ab94f..0000000000 --- a/core/src/components/action-sheet/usage/stencil.md +++ /dev/null @@ -1,69 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -import { actionSheetController } from '@ionic/core'; - -@Component({ - tag: 'action-sheet-example', - styleUrl: 'action-sheet-example.css' -}) -export class ActionSheetExample { - async presentActionSheet() { - const actionSheet = await actionSheetController.create({ - header: 'Albums', - cssClass: 'my-custom-class', - buttons: [{ - text: 'Delete', - role: 'destructive', - icon: 'trash', - id: 'delete-button', - data: { - type: 'delete' - }, - handler: () => { - console.log('Delete clicked'); - } - }, { - text: 'Share', - icon: 'share', - data: 10, - handler: () => { - console.log('Share clicked'); - } - }, { - text: 'Play (open modal)', - icon: 'caret-forward-circle', - data: 'Data value', - handler: () => { - console.log('Play clicked'); - } - }, { - text: 'Favorite', - icon: 'heart', - handler: () => { - console.log('Favorite clicked'); - } - }, { - text: 'Cancel', - icon: 'close', - role: 'cancel', - handler: () => { - console.log('Cancel clicked'); - } - }] - }); - await actionSheet.present(); - - const { role, data } = await actionSheet.onDidDismiss(); - console.log('onDidDismiss resolved with role and data', role, data); - } - - render() { - return [ - - this.presentActionSheet()}>Present Action Sheet - - ]; - } -} -``` diff --git a/core/src/components/action-sheet/usage/vue.md b/core/src/components/action-sheet/usage/vue.md deleted file mode 100644 index af67a46d36..0000000000 --- a/core/src/components/action-sheet/usage/vue.md +++ /dev/null @@ -1,149 +0,0 @@ -```html - - - -``` - -Developers can also use this component directly in their template: - -```html - - - -``` diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md deleted file mode 100644 index 151a1d39f8..0000000000 --- a/core/src/components/alert/readme.md +++ /dev/null @@ -1,1870 +0,0 @@ -# ion-alert - -An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `header`, `subHeader` and `message`. - -## Buttons - -In the array of `buttons`, each button includes properties for its `text`, and optionally a `handler`. If a handler returns `false` then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the `buttons` array from left to right. Note: The right most button (the last one in the array) is the main button. - -Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role. - - -## Inputs - -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. - -## Interfaces - -### AlertButton - -```typescript -interface AlertButton { - text: string; - role?: 'cancel' | 'destructive' | string; - cssClass?: string | string[]; - handler?: (value: any) => boolean | void | {[key: string]: any}; -} -``` - - -### AlertInput - -```typescript -interface AlertInput { - type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea'; - name?: string; - placeholder?: string; - value?: any; - label?: string; - checked?: boolean; - disabled?: boolean; - id?: string; - handler?: (input: AlertInput) => void; - min?: string | number; - max?: string | number; - cssClass?: string | string[]; - attributes?: { [key: string]: any }; - tabindex?: number; -} -``` - - -### AlertOptions - -```typescript -interface AlertOptions { - header?: string; - subHeader?: string; - message?: string | IonicSafeString; - cssClass?: string | string[]; - inputs?: AlertInput[]; - buttons?: (AlertButton | string)[]; - backdropDismiss?: boolean; - translucent?: boolean; - animated?: boolean; - htmlAttributes?: { [key: string]: any }; - - mode?: Mode; - keyboardClose?: boolean; - id?: string; - - enterAnimation?: AnimationBuilder; - leaveAnimation?: AnimationBuilder; -} -``` - - - - - -## Usage - -### Angular - -```typescript -import { Component } from '@angular/core'; -import { AlertController } from '@ionic/angular'; - -@Component({ - selector: 'alert-example', - templateUrl: 'alert-example.html', - styleUrls: ['./alert-example.css'], -}) -export class AlertExample { - - constructor(public alertController: AlertController) {} - - async presentAlert() { - const alert = await this.alertController.create({ - cssClass: 'my-custom-class', - header: 'Alert', - subHeader: 'Subtitle', - message: 'This is an alert message.', - buttons: ['OK'] - }); - - await alert.present(); - - const { role } = await alert.onDidDismiss(); - console.log('onDidDismiss resolved with role', role); - } - - async presentAlertMultipleButtons() { - const alert = await this.alertController.create({ - cssClass: 'my-custom-class', - header: 'Alert', - subHeader: 'Subtitle', - message: 'This is an alert message.', - buttons: ['Cancel', 'Open Modal', 'Delete'] - }); - - await alert.present(); - } - - async presentAlertConfirm() { - const alert = await this.alertController.create({ - cssClass: 'my-custom-class', - header: 'Confirm!', - message: 'Message text!!!', - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - id: 'cancel-button', - handler: (blah) => { - console.log('Confirm Cancel: blah'); - } - }, { - text: 'Okay', - id: 'confirm-button', - handler: () => { - console.log('Confirm Okay'); - } - } - ] - }); - - await alert.present(); - } - - async presentAlertPrompt() { - const alert = await this.alertController.create({ - cssClass: 'my-custom-class', - header: 'Prompt!', - inputs: [ - { - name: 'name1', - type: 'text', - placeholder: 'Placeholder 1' - }, - { - name: 'name2', - type: 'text', - id: 'name2-id', - value: 'hello', - placeholder: 'Placeholder 2' - }, - // multiline input. - { - name: 'paragraph', - id: 'paragraph', - type: 'textarea', - placeholder: 'Placeholder 3' - }, - { - name: 'name3', - value: 'http://ionicframework.com', - type: 'url', - placeholder: 'Favorite site ever' - }, - // input date with min & max - { - name: 'name4', - type: 'date', - min: '2017-03-01', - max: '2018-01-12' - }, - // input date without min nor max - { - name: 'name5', - type: 'date' - }, - { - name: 'name6', - type: 'number', - min: -5, - max: 10 - }, - { - name: 'name7', - type: 'number' - }, - { - name: 'name8', - type: 'password', - placeholder: 'Advanced Attributes', - cssClass: 'specialClass', - attributes: { - maxlength: 4, - inputmode: 'decimal' - } - } - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ] - }); - - await alert.present(); - } - - async presentAlertRadio() { - const alert = await this.alertController.create({ - cssClass: 'my-custom-class', - header: 'Radio', - inputs: [ - { - name: 'radio1', - type: 'radio', - label: 'Radio 1', - value: 'value1', - handler: () => { - console.log('Radio 1 selected'); - }, - checked: true - }, - { - name: 'radio2', - type: 'radio', - label: 'Radio 2', - value: 'value2', - handler: () => { - console.log('Radio 2 selected'); - } - }, - { - name: 'radio3', - type: 'radio', - label: 'Radio 3', - value: 'value3', - handler: () => { - console.log('Radio 3 selected'); - } - }, - { - name: 'radio4', - type: 'radio', - label: 'Radio 4', - value: 'value4', - handler: () => { - console.log('Radio 4 selected'); - } - }, - { - name: 'radio5', - type: 'radio', - label: 'Radio 5', - value: 'value5', - handler: () => { - console.log('Radio 5 selected'); - } - }, - { - name: 'radio6', - type: 'radio', - label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ', - value: 'value6', - handler: () => { - console.log('Radio 6 selected'); - } - } - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ] - }); - - await alert.present(); - } - - async presentAlertCheckbox() { - const alert = await this.alertController.create({ - cssClass: 'my-custom-class', - header: 'Checkbox', - inputs: [ - { - name: 'checkbox1', - type: 'checkbox', - label: 'Checkbox 1', - value: 'value1', - handler: () => { - console.log('Checkbox 1 selected'); - }, - checked: true - }, - - { - name: 'checkbox2', - type: 'checkbox', - label: 'Checkbox 2', - value: 'value2', - handler: () => { - console.log('Checkbox 2 selected'); - } - }, - - { - name: 'checkbox3', - type: 'checkbox', - label: 'Checkbox 3', - value: 'value3', - handler: () => { - console.log('Checkbox 3 selected'); - } - }, - - { - name: 'checkbox4', - type: 'checkbox', - label: 'Checkbox 4', - value: 'value4', - handler: () => { - console.log('Checkbox 4 selected'); - } - }, - - { - name: 'checkbox5', - type: 'checkbox', - label: 'Checkbox 5', - value: 'value5', - handler: () => { - console.log('Checkbox 5 selected'); - } - }, - - { - name: 'checkbox6', - type: 'checkbox', - label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6', - value: 'value6', - handler: () => { - console.log('Checkbox 6 selected'); - } - } - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ] - }); - - 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.'; - alert.buttons = ['OK']; - - document.body.appendChild(alert); - await alert.present(); - - const { role } = await alert.onDidDismiss(); - console.log('onDidDismiss resolved with role', role); -} - -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.'; - alert.buttons = ['Cancel', 'Open Modal', 'Delete']; - - document.body.appendChild(alert); - return alert.present(); -} - -function presentAlertConfirm() { - const alert = document.createElement('ion-alert'); - alert.cssClass = 'my-custom-class'; - alert.header = 'Confirm!'; - alert.message = 'Message text!!!'; - alert.buttons = [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - id: 'cancel-button', - handler: (blah) => { - console.log('Confirm Cancel: blah'); - } - }, { - text: 'Okay', - id: 'confirm-button', - handler: () => { - console.log('Confirm Okay') - } - } - ]; - - document.body.appendChild(alert); - return alert.present(); -} - -function presentAlertPrompt() { - const alert = document.createElement('ion-alert'); - alert.cssClass = 'my-custom-class'; - alert.header = 'Prompt!'; - alert.inputs = [ - { - placeholder: 'Placeholder 1' - }, - { - name: 'name2', - id: 'name2-id', - value: 'hello', - placeholder: 'Placeholder 2' - }, - // multiline input. - { - name: 'paragraph', - id: 'paragraph', - type: 'textarea', - placeholder: 'Placeholder 3' - }, - { - name: 'name3', - value: 'http://ionicframework.com', - type: 'url', - placeholder: 'Favorite site ever' - }, - // input date with min & max - { - name: 'name4', - type: 'date', - min: '2017-03-01', - max: '2018-01-12' - }, - // input date without min nor max - { - name: 'name5', - type: 'date' - }, - { - name: 'name6', - type: 'number', - min: -5, - max: 10 - }, - { - name: 'name7', - type: 'number' - }, - { - name: 'name8', - type: 'password', - placeholder: 'Advanced Attributes', - cssClass: 'specialClass', - attributes: { - maxlength: 4, - inputmode: 'decimal' - } - } - ]; - alert.buttons = [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel') - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok') - } - } - ]; - - document.body.appendChild(alert); - return alert.present(); -} - -function presentAlertRadio() { - const alert = document.createElement('ion-alert'); - alert.cssClass = 'my-custom-class'; - alert.header = 'Radio'; - alert.inputs = [ - { - type: 'radio', - label: 'Radio 1', - value: 'value1', - handler: () => { - console.log('Radio 1 selected'); - }, - checked: true - }, - { - type: 'radio', - label: 'Radio 2', - value: 'value2', - handler: () => { - console.log('Radio 2 selected'); - } - }, - { - type: 'radio', - label: 'Radio 3', - value: 'value3', - handler: () => { - console.log('Radio 3 selected'); - } - }, - { - type: 'radio', - label: 'Radio 4', - value: 'value4', - handler: () => { - console.log('Radio 4 selected'); - } - }, - { - type: 'radio', - label: 'Radio 5', - value: 'value5', - handler: () => { - console.log('Radio 5 selected'); - } - }, - { - type: 'radio', - label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ', - value: 'value6', - handler: () => { - console.log('Radio 6 selected'); - } - } - ]; - alert.buttons = [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel') - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok') - } - } - ]; - document.body.appendChild(alert); - return alert.present(); -} - -function presentAlertCheckbox() { - const alert = document.createElement('ion-alert'); - alert.cssClass = 'my-custom-class'; - alert.header = 'Checkbox'; - alert.inputs = [ - { - type: 'checkbox', - label: 'Checkbox 1', - value: 'value1', - handler: () => { - console.log('Checkbox 1 selected'); - }, - checked: true - }, - - { - type: 'checkbox', - label: 'Checkbox 2', - value: 'value2', - handler: () => { - console.log('Checkbox 2 selected'); - } - }, - - { - type: 'checkbox', - label: 'Checkbox 3', - value: 'value3', - handler: () => { - console.log('Checkbox 3 selected'); - } - }, - - { - type: 'checkbox', - label: 'Checkbox 4', - value: 'value4', - handler: () => { - console.log('Checkbox 4 selected'); - } - }, - - { - type: 'checkbox', - label: 'Checkbox 5', - value: 'value5', - handler: () => { - console.log('Checkbox 5 selected'); - } - }, - - { - type: 'checkbox', - label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6', - value: 'value6', - handler: () => { - console.log('Checkbox 6 selected'); - } - } - ]; - alert.buttons = [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel') - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok') - } - } - ]; - - document.body.appendChild(alert); - return alert.present(); -} -``` - - -### React - -```tsx -/* Using with useIonAlert Hook */ - -import React from 'react'; -import { IonButton, IonContent, IonPage, useIonAlert } from '@ionic/react'; - -const AlertExample: React.FC = () => { - const [present] = useIonAlert(); - return ( - - - - present({ - cssClass: 'my-css', - header: 'Alert', - message: 'alert from hook', - buttons: [ - 'Cancel', - { text: 'Ok', handler: (d) => console.log('ok pressed') }, - ], - onDidDismiss: (e) => console.log('did dismiss'), - }) - } - > - Show Alert - - present('hello with params', [{ text: 'Ok' }])} - > - Show Alert using params - - - - ); -}; -``` - -```tsx -/* Using with IonAlert Component */ - -import React, { useState } from 'react'; -import { IonAlert, IonButton, IonContent } from '@ionic/react'; - -export const AlertExample: React.FC = () => { - - const [showAlert1, setShowAlert1] = useState(false); - const [showAlert2, setShowAlert2] = useState(false); - const [showAlert3, setShowAlert3] = useState(false); - const [showAlert4, setShowAlert4] = useState(false); - const [showAlert5, setShowAlert5] = useState(false); - const [showAlert6, setShowAlert6] = useState(false); - - return ( - - setShowAlert1(true)} expand="block">Show Alert 1 - setShowAlert2(true)} expand="block">Show Alert 2 - setShowAlert3(true)} expand="block">Show Alert 3 - setShowAlert4(true)} expand="block">Show Alert 4 - setShowAlert5(true)} expand="block">Show Alert 5 - setShowAlert6(true)} expand="block">Show Alert 6 - setShowAlert1(false)} - cssClass='my-custom-class' - header={'Alert'} - subHeader={'Subtitle'} - message={'This is an alert message.'} - buttons={['OK']} - /> - - setShowAlert2(false)} - cssClass='my-custom-class' - header={'Alert'} - subHeader={'Subtitle'} - message={'This is an alert message.'} - buttons={['Cancel', 'Open Modal', 'Delete']} - /> - - setShowAlert3(false)} - cssClass='my-custom-class' - header={'Confirm!'} - message={'Message text!!!'} - buttons={[ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - id: 'cancel-button', - handler: blah => { - console.log('Confirm Cancel: blah'); - } - }, - { - text: 'Okay', - id: 'confirm-button', - handler: () => { - console.log('Confirm Okay'); - } - } - ]} - /> - - setShowAlert4(false)} - cssClass='my-custom-class' - header={'Prompt!'} - inputs={[ - { - name: 'name1', - type: 'text', - placeholder: 'Placeholder 1' - }, - { - name: 'name2', - type: 'text', - id: 'name2-id', - value: 'hello', - placeholder: 'Placeholder 2' - }, - { - name: 'name3', - value: 'http://ionicframework.com', - type: 'url', - placeholder: 'Favorite site ever' - }, - // input date with min & max - { - name: 'name4', - type: 'date', - min: '2017-03-01', - max: '2018-01-12' - }, - // input date without min nor max - { - name: 'name5', - type: 'date' - }, - { - name: 'name6', - type: 'number', - min: -5, - max: 10 - }, - { - name: 'name7', - type: 'number' - }, - { - name: 'name8', - type: 'password', - placeholder: 'Advanced Attributes', - cssClass: 'specialClass', - attributes: { - maxlength: 4, - inputmode: 'decimal' - } - } - ]} - buttons={[ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, - { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ]} - /> - - setShowAlert5(false)} - cssClass='my-custom-class' - header={'Radio'} - inputs={[ - { - name: 'radio1', - type: 'radio', - label: 'Radio 1', - value: 'value1', - handler: () => { - console.log('Radio 1 selected'); - }, - checked: true - }, - { - name: 'radio2', - type: 'radio', - label: 'Radio 2', - value: 'value2', - handler: () => { - console.log('Radio 2 selected'); - } - }, - { - name: 'radio3', - type: 'radio', - label: 'Radio 3', - value: 'value3', - handler: () => { - console.log('Radio 3 selected'); - } - }, - { - name: 'radio4', - type: 'radio', - label: 'Radio 4', - value: 'value4', - handler: () => { - console.log('Radio 4 selected'); - } - }, - { - name: 'radio5', - type: 'radio', - label: 'Radio 5', - value: 'value5', - handler: () => { - console.log('Radio 5 selected'); - } - }, - { - name: 'radio6', - type: 'radio', - label: 'Radio 6', - value: 'value6', - handler: () => { - console.log('Radio 6 selected'); - } - } - ]} - buttons={[ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, - { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ]} - /> - - setShowAlert6(false)} - cssClass='my-custom-class' - header={'Checkbox'} - inputs={[ - { - name: 'checkbox1', - type: 'checkbox', - label: 'Checkbox 1', - value: 'value1', - handler: () => { - console.log('Checkbox 1 selected'); - }, - checked: true - }, - { - name: 'checkbox2', - type: 'checkbox', - label: 'Checkbox 2', - value: 'value2', - handler: () => { - console.log('Checkbox 2 selected'); - } - }, - { - name: 'checkbox3', - type: 'checkbox', - label: 'Checkbox 3', - value: 'value3', - handler: () => { - console.log('Checkbox 3 selected'); - } - }, - { - name: 'checkbox4', - type: 'checkbox', - label: 'Checkbox 4', - value: 'value4', - handler: () => { - console.log('Checkbox 4 selected'); - } - }, - { - name: 'checkbox5', - type: 'checkbox', - label: 'Checkbox 5', - value: 'value5', - handler: () => { - console.log('Checkbox 5 selected'); - } - }, - { - name: 'checkbox6', - type: 'checkbox', - label: 'Checkbox 6', - value: 'value6', - handler: () => { - console.log('Checkbox 6 selected'); - } - } - ]} - buttons={[ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, - { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ]} - /> - - ); -} - -export default AlertExample; - -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -import { alertController } from '@ionic/core'; - -@Component({ - tag: 'alert-example', - styleUrl: 'alert-example.css' -}) -export class AlertExample { - async presentAlert() { - const alert = await alertController.create({ - cssClass: 'my-custom-class', - header: 'Alert', - subHeader: 'Subtitle', - message: 'This is an alert message.', - buttons: ['OK'] - }); - - await alert.present(); - - const { role } = await alert.onDidDismiss(); - console.log('onDidDismiss resolved with role', role); - } - - async presentAlertMultipleButtons() { - const alert = await alertController.create({ - cssClass: 'my-custom-class', - header: 'Alert', - subHeader: 'Subtitle', - message: 'This is an alert message.', - buttons: ['Cancel', 'Open Modal', 'Delete'] - }); - - await alert.present(); - } - - async presentAlertConfirm() { - const alert = await alertController.create({ - cssClass: 'my-custom-class', - header: 'Confirm!', - message: 'Message text!!!', - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - id: 'cancel-button', - handler: (blah) => { - console.log('Confirm Cancel: blah'); - } - }, { - text: 'Okay', - id: 'confirm-button', - handler: () => { - console.log('Confirm Okay'); - } - } - ] - }); - - await alert.present(); - } - - async presentAlertPrompt() { - const alert = await alertController.create({ - cssClass: 'my-custom-class', - header: 'Prompt!', - inputs: [ - { - name: 'name1', - type: 'text', - placeholder: 'Placeholder 1' - }, - { - name: 'name2', - type: 'text', - id: 'name2-id', - value: 'hello', - placeholder: 'Placeholder 2' - }, - // multiline input. - { - name: 'paragraph', - id: 'paragraph', - type: 'textarea', - placeholder: 'Placeholder 3' - }, - { - name: 'name3', - value: 'http://ionicframework.com', - type: 'url', - placeholder: 'Favorite site ever' - }, - // input date with min & max - { - name: 'name4', - type: 'date', - min: '2017-03-01', - max: '2018-01-12' - }, - // input date without min nor max - { - name: 'name5', - type: 'date' - }, - { - name: 'name6', - type: 'number', - min: -5, - max: 10 - }, - { - name: 'name7', - type: 'number' - }, - { - name: 'name8', - type: 'password', - placeholder: 'Advanced Attributes', - cssClass: 'specialClass', - attributes: { - maxlength: 4, - inputmode: 'decimal' - } - } - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ] - }); - - await alert.present(); - } - - async presentAlertRadio() { - const alert = await alertController.create({ - cssClass: 'my-custom-class', - header: 'Radio', - inputs: [ - { - name: 'radio1', - type: 'radio', - label: 'Radio 1', - value: 'value1', - handler: () => { - console.log('Radio 1 selected'); - }, - checked: true - }, - { - name: 'radio2', - type: 'radio', - label: 'Radio 2', - value: 'value2', - handler: () => { - console.log('Radio 2 selected'); - } - }, - { - name: 'radio3', - type: 'radio', - label: 'Radio 3', - value: 'value3', - handler: () => { - console.log('Radio 3 selected'); - } - }, - { - name: 'radio4', - type: 'radio', - label: 'Radio 4', - value: 'value4', - handler: () => { - console.log('Radio 4 selected'); - } - }, - { - name: 'radio5', - type: 'radio', - label: 'Radio 5', - value: 'value5', - handler: () => { - console.log('Radio 5 selected'); - } - }, - { - name: 'radio6', - type: 'radio', - label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ', - value: 'value6', - handler: () => { - console.log('Radio 6 selected'); - } - } - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ] - }); - - await alert.present(); - } - - async presentAlertCheckbox() { - const alert = await alertController.create({ - cssClass: 'my-custom-class', - header: 'Checkbox', - inputs: [ - { - name: 'checkbox1', - type: 'checkbox', - label: 'Checkbox 1', - value: 'value1', - handler: () => { - console.log('Checkbox 1 selected'); - }, - checked: true - }, - { - name: 'checkbox2', - type: 'checkbox', - label: 'Checkbox 2', - value: 'value2', - handler: () => { - console.log('Checkbox 2 selected'); - } - }, - - { - name: 'checkbox3', - type: 'checkbox', - label: 'Checkbox 3', - value: 'value3', - handler: () => { - console.log('Checkbox 3 selected'); - } - }, - - { - name: 'checkbox4', - type: 'checkbox', - label: 'Checkbox 4', - value: 'value4', - handler: () => { - console.log('Checkbox 4 selected'); - } - }, - - { - name: 'checkbox5', - type: 'checkbox', - label: 'Checkbox 5', - value: 'value5', - handler: () => { - console.log('Checkbox 5 selected'); - } - }, - - { - name: 'checkbox6', - type: 'checkbox', - label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6', - value: 'value6', - handler: () => { - console.log('Checkbox 6 selected'); - } - } - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ] - }); - - await alert.present(); - } - - - render() { - return [ - - this.presentAlert()}>Present Alert - this.presentAlertMultipleButtons()}>Present Alert: Multiple Buttons - this.presentAlertConfirm()}>Present Alert: Confirm - this.presentAlertPrompt()}>Present Alert: Prompt - this.presentAlertRadio()}>Present Alert: Radio - this.presentAlertCheckbox()}>Present Alert: Checkbox - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - -Developers can also use this component directly in their template: - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the alert will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the alert will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `buttons` | -- | Array of buttons to be added to the alert. | `(string \| AlertButton)[]` | `[]` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `enterAnimation` | -- | Animation to use when the alert is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `header` | `header` | The main title in the heading of the alert. | `string \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the alert. | `undefined \| { [key: string]: any; }` | `undefined` | -| `inputs` | -- | Array of input to show in the alert. | `AlertInput[]` | `[]` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the alert is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `message` | `message` | The main message to be displayed in the alert. `message` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `subHeader` | `sub-header` | The subtitle in the heading of the alert. Displayed under the title. | `string \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the alert will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | - - -## Events - -| Event | Description | Type | -| --------------------- | --------------------------------------- | -------------------------------------- | -| `ionAlertDidDismiss` | Emitted after the alert has dismissed. | `CustomEvent>` | -| `ionAlertDidPresent` | Emitted after the alert has presented. | `CustomEvent` | -| `ionAlertWillDismiss` | Emitted before the alert has dismissed. | `CustomEvent>` | -| `ionAlertWillPresent` | Emitted before the alert has presented. | `CustomEvent` | - - -## Methods - -### `dismiss(data?: any, role?: string | undefined) => Promise` - -Dismiss the alert overlay after it has been presented. - -#### Returns - -Type: `Promise` - - - -### `onDidDismiss() => Promise>` - -Returns a promise that resolves when the alert did dismiss. - -#### Returns - -Type: `Promise>` - - - -### `onWillDismiss() => Promise>` - -Returns a promise that resolves when the alert will dismiss. - -#### Returns - -Type: `Promise>` - - - -### `present() => Promise` - -Present the alert overlay after it has been created. - -#### Returns - -Type: `Promise` - - - - -## CSS Custom Properties - -| Name | Description | -| -------------------- | --------------------------- | -| `--backdrop-opacity` | Opacity of the backdrop | -| `--background` | Background of the alert | -| `--height` | Height of the alert | -| `--max-height` | Maximum height of the alert | -| `--max-width` | Maximum width of the alert | -| `--min-height` | Minimum height of the alert | -| `--min-width` | Minimum width of the alert | -| `--width` | Width of the alert | - - -## Dependencies - -### Used by - - - [ion-select](../select) - -### Depends on - -- [ion-ripple-effect](../ripple-effect) -- [ion-backdrop](../backdrop) - -### Graph -```mermaid -graph TD; - ion-alert --> ion-ripple-effect - ion-alert --> ion-backdrop - ion-select --> ion-alert - style ion-alert fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/alert/usage/angular.md b/core/src/components/alert/usage/angular.md deleted file mode 100644 index c70f0c944f..0000000000 --- a/core/src/components/alert/usage/angular.md +++ /dev/null @@ -1,323 +0,0 @@ -```typescript -import { Component } from '@angular/core'; -import { AlertController } from '@ionic/angular'; - -@Component({ - selector: 'alert-example', - templateUrl: 'alert-example.html', - styleUrls: ['./alert-example.css'], -}) -export class AlertExample { - - constructor(public alertController: AlertController) {} - - async presentAlert() { - const alert = await this.alertController.create({ - cssClass: 'my-custom-class', - header: 'Alert', - subHeader: 'Subtitle', - message: 'This is an alert message.', - buttons: ['OK'] - }); - - await alert.present(); - - const { role } = await alert.onDidDismiss(); - console.log('onDidDismiss resolved with role', role); - } - - async presentAlertMultipleButtons() { - const alert = await this.alertController.create({ - cssClass: 'my-custom-class', - header: 'Alert', - subHeader: 'Subtitle', - message: 'This is an alert message.', - buttons: ['Cancel', 'Open Modal', 'Delete'] - }); - - await alert.present(); - } - - async presentAlertConfirm() { - const alert = await this.alertController.create({ - cssClass: 'my-custom-class', - header: 'Confirm!', - message: 'Message text!!!', - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - id: 'cancel-button', - handler: (blah) => { - console.log('Confirm Cancel: blah'); - } - }, { - text: 'Okay', - id: 'confirm-button', - handler: () => { - console.log('Confirm Okay'); - } - } - ] - }); - - await alert.present(); - } - - async presentAlertPrompt() { - const alert = await this.alertController.create({ - cssClass: 'my-custom-class', - header: 'Prompt!', - inputs: [ - { - name: 'name1', - type: 'text', - placeholder: 'Placeholder 1' - }, - { - name: 'name2', - type: 'text', - id: 'name2-id', - value: 'hello', - placeholder: 'Placeholder 2' - }, - // multiline input. - { - name: 'paragraph', - id: 'paragraph', - type: 'textarea', - placeholder: 'Placeholder 3' - }, - { - name: 'name3', - value: 'http://ionicframework.com', - type: 'url', - placeholder: 'Favorite site ever' - }, - // input date with min & max - { - name: 'name4', - type: 'date', - min: '2017-03-01', - max: '2018-01-12' - }, - // input date without min nor max - { - name: 'name5', - type: 'date' - }, - { - name: 'name6', - type: 'number', - min: -5, - max: 10 - }, - { - name: 'name7', - type: 'number' - }, - { - name: 'name8', - type: 'password', - placeholder: 'Advanced Attributes', - cssClass: 'specialClass', - attributes: { - maxlength: 4, - inputmode: 'decimal' - } - } - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ] - }); - - await alert.present(); - } - - async presentAlertRadio() { - const alert = await this.alertController.create({ - cssClass: 'my-custom-class', - header: 'Radio', - inputs: [ - { - name: 'radio1', - type: 'radio', - label: 'Radio 1', - value: 'value1', - handler: () => { - console.log('Radio 1 selected'); - }, - checked: true - }, - { - name: 'radio2', - type: 'radio', - label: 'Radio 2', - value: 'value2', - handler: () => { - console.log('Radio 2 selected'); - } - }, - { - name: 'radio3', - type: 'radio', - label: 'Radio 3', - value: 'value3', - handler: () => { - console.log('Radio 3 selected'); - } - }, - { - name: 'radio4', - type: 'radio', - label: 'Radio 4', - value: 'value4', - handler: () => { - console.log('Radio 4 selected'); - } - }, - { - name: 'radio5', - type: 'radio', - label: 'Radio 5', - value: 'value5', - handler: () => { - console.log('Radio 5 selected'); - } - }, - { - name: 'radio6', - type: 'radio', - label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ', - value: 'value6', - handler: () => { - console.log('Radio 6 selected'); - } - } - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ] - }); - - await alert.present(); - } - - async presentAlertCheckbox() { - const alert = await this.alertController.create({ - cssClass: 'my-custom-class', - header: 'Checkbox', - inputs: [ - { - name: 'checkbox1', - type: 'checkbox', - label: 'Checkbox 1', - value: 'value1', - handler: () => { - console.log('Checkbox 1 selected'); - }, - checked: true - }, - - { - name: 'checkbox2', - type: 'checkbox', - label: 'Checkbox 2', - value: 'value2', - handler: () => { - console.log('Checkbox 2 selected'); - } - }, - - { - name: 'checkbox3', - type: 'checkbox', - label: 'Checkbox 3', - value: 'value3', - handler: () => { - console.log('Checkbox 3 selected'); - } - }, - - { - name: 'checkbox4', - type: 'checkbox', - label: 'Checkbox 4', - value: 'value4', - handler: () => { - console.log('Checkbox 4 selected'); - } - }, - - { - name: 'checkbox5', - type: 'checkbox', - label: 'Checkbox 5', - value: 'value5', - handler: () => { - console.log('Checkbox 5 selected'); - } - }, - - { - name: 'checkbox6', - type: 'checkbox', - label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6', - value: 'value6', - handler: () => { - console.log('Checkbox 6 selected'); - } - } - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ] - }); - - 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 deleted file mode 100644 index 7b8adc75b4..0000000000 --- a/core/src/components/alert/usage/javascript.md +++ /dev/null @@ -1,289 +0,0 @@ -```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.'; - alert.buttons = ['OK']; - - document.body.appendChild(alert); - await alert.present(); - - const { role } = await alert.onDidDismiss(); - console.log('onDidDismiss resolved with role', role); -} - -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.'; - alert.buttons = ['Cancel', 'Open Modal', 'Delete']; - - document.body.appendChild(alert); - return alert.present(); -} - -function presentAlertConfirm() { - const alert = document.createElement('ion-alert'); - alert.cssClass = 'my-custom-class'; - alert.header = 'Confirm!'; - alert.message = 'Message text!!!'; - alert.buttons = [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - id: 'cancel-button', - handler: (blah) => { - console.log('Confirm Cancel: blah'); - } - }, { - text: 'Okay', - id: 'confirm-button', - handler: () => { - console.log('Confirm Okay') - } - } - ]; - - document.body.appendChild(alert); - return alert.present(); -} - -function presentAlertPrompt() { - const alert = document.createElement('ion-alert'); - alert.cssClass = 'my-custom-class'; - alert.header = 'Prompt!'; - alert.inputs = [ - { - placeholder: 'Placeholder 1' - }, - { - name: 'name2', - id: 'name2-id', - value: 'hello', - placeholder: 'Placeholder 2' - }, - // multiline input. - { - name: 'paragraph', - id: 'paragraph', - type: 'textarea', - placeholder: 'Placeholder 3' - }, - { - name: 'name3', - value: 'http://ionicframework.com', - type: 'url', - placeholder: 'Favorite site ever' - }, - // input date with min & max - { - name: 'name4', - type: 'date', - min: '2017-03-01', - max: '2018-01-12' - }, - // input date without min nor max - { - name: 'name5', - type: 'date' - }, - { - name: 'name6', - type: 'number', - min: -5, - max: 10 - }, - { - name: 'name7', - type: 'number' - }, - { - name: 'name8', - type: 'password', - placeholder: 'Advanced Attributes', - cssClass: 'specialClass', - attributes: { - maxlength: 4, - inputmode: 'decimal' - } - } - ]; - alert.buttons = [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel') - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok') - } - } - ]; - - document.body.appendChild(alert); - return alert.present(); -} - -function presentAlertRadio() { - const alert = document.createElement('ion-alert'); - alert.cssClass = 'my-custom-class'; - alert.header = 'Radio'; - alert.inputs = [ - { - type: 'radio', - label: 'Radio 1', - value: 'value1', - handler: () => { - console.log('Radio 1 selected'); - }, - checked: true - }, - { - type: 'radio', - label: 'Radio 2', - value: 'value2', - handler: () => { - console.log('Radio 2 selected'); - } - }, - { - type: 'radio', - label: 'Radio 3', - value: 'value3', - handler: () => { - console.log('Radio 3 selected'); - } - }, - { - type: 'radio', - label: 'Radio 4', - value: 'value4', - handler: () => { - console.log('Radio 4 selected'); - } - }, - { - type: 'radio', - label: 'Radio 5', - value: 'value5', - handler: () => { - console.log('Radio 5 selected'); - } - }, - { - type: 'radio', - label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ', - value: 'value6', - handler: () => { - console.log('Radio 6 selected'); - } - } - ]; - alert.buttons = [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel') - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok') - } - } - ]; - document.body.appendChild(alert); - return alert.present(); -} - -function presentAlertCheckbox() { - const alert = document.createElement('ion-alert'); - alert.cssClass = 'my-custom-class'; - alert.header = 'Checkbox'; - alert.inputs = [ - { - type: 'checkbox', - label: 'Checkbox 1', - value: 'value1', - handler: () => { - console.log('Checkbox 1 selected'); - }, - checked: true - }, - - { - type: 'checkbox', - label: 'Checkbox 2', - value: 'value2', - handler: () => { - console.log('Checkbox 2 selected'); - } - }, - - { - type: 'checkbox', - label: 'Checkbox 3', - value: 'value3', - handler: () => { - console.log('Checkbox 3 selected'); - } - }, - - { - type: 'checkbox', - label: 'Checkbox 4', - value: 'value4', - handler: () => { - console.log('Checkbox 4 selected'); - } - }, - - { - type: 'checkbox', - label: 'Checkbox 5', - value: 'value5', - handler: () => { - console.log('Checkbox 5 selected'); - } - }, - - { - type: 'checkbox', - label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6', - value: 'value6', - handler: () => { - console.log('Checkbox 6 selected'); - } - } - ]; - alert.buttons = [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel') - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok') - } - } - ]; - - document.body.appendChild(alert); - return alert.present(); -} -``` diff --git a/core/src/components/alert/usage/react.md b/core/src/components/alert/usage/react.md deleted file mode 100644 index 2f851a1455..0000000000 --- a/core/src/components/alert/usage/react.md +++ /dev/null @@ -1,350 +0,0 @@ -```tsx -/* Using with useIonAlert Hook */ - -import React from 'react'; -import { IonButton, IonContent, IonPage, useIonAlert } from '@ionic/react'; - -const AlertExample: React.FC = () => { - const [present] = useIonAlert(); - return ( - - - - present({ - cssClass: 'my-css', - header: 'Alert', - message: 'alert from hook', - buttons: [ - 'Cancel', - { text: 'Ok', handler: (d) => console.log('ok pressed') }, - ], - onDidDismiss: (e) => console.log('did dismiss'), - }) - } - > - Show Alert - - present('hello with params', [{ text: 'Ok' }])} - > - Show Alert using params - - - - ); -}; -``` - -```tsx -/* Using with IonAlert Component */ - -import React, { useState } from 'react'; -import { IonAlert, IonButton, IonContent } from '@ionic/react'; - -export const AlertExample: React.FC = () => { - - const [showAlert1, setShowAlert1] = useState(false); - const [showAlert2, setShowAlert2] = useState(false); - const [showAlert3, setShowAlert3] = useState(false); - const [showAlert4, setShowAlert4] = useState(false); - const [showAlert5, setShowAlert5] = useState(false); - const [showAlert6, setShowAlert6] = useState(false); - - return ( - - setShowAlert1(true)} expand="block">Show Alert 1 - setShowAlert2(true)} expand="block">Show Alert 2 - setShowAlert3(true)} expand="block">Show Alert 3 - setShowAlert4(true)} expand="block">Show Alert 4 - setShowAlert5(true)} expand="block">Show Alert 5 - setShowAlert6(true)} expand="block">Show Alert 6 - setShowAlert1(false)} - cssClass='my-custom-class' - header={'Alert'} - subHeader={'Subtitle'} - message={'This is an alert message.'} - buttons={['OK']} - /> - - setShowAlert2(false)} - cssClass='my-custom-class' - header={'Alert'} - subHeader={'Subtitle'} - message={'This is an alert message.'} - buttons={['Cancel', 'Open Modal', 'Delete']} - /> - - setShowAlert3(false)} - cssClass='my-custom-class' - header={'Confirm!'} - message={'Message text!!!'} - buttons={[ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - id: 'cancel-button', - handler: blah => { - console.log('Confirm Cancel: blah'); - } - }, - { - text: 'Okay', - id: 'confirm-button', - handler: () => { - console.log('Confirm Okay'); - } - } - ]} - /> - - setShowAlert4(false)} - cssClass='my-custom-class' - header={'Prompt!'} - inputs={[ - { - name: 'name1', - type: 'text', - placeholder: 'Placeholder 1' - }, - { - name: 'name2', - type: 'text', - id: 'name2-id', - value: 'hello', - placeholder: 'Placeholder 2' - }, - { - name: 'name3', - value: 'http://ionicframework.com', - type: 'url', - placeholder: 'Favorite site ever' - }, - // input date with min & max - { - name: 'name4', - type: 'date', - min: '2017-03-01', - max: '2018-01-12' - }, - // input date without min nor max - { - name: 'name5', - type: 'date' - }, - { - name: 'name6', - type: 'number', - min: -5, - max: 10 - }, - { - name: 'name7', - type: 'number' - }, - { - name: 'name8', - type: 'password', - placeholder: 'Advanced Attributes', - cssClass: 'specialClass', - attributes: { - maxlength: 4, - inputmode: 'decimal' - } - } - ]} - buttons={[ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, - { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ]} - /> - - setShowAlert5(false)} - cssClass='my-custom-class' - header={'Radio'} - inputs={[ - { - name: 'radio1', - type: 'radio', - label: 'Radio 1', - value: 'value1', - handler: () => { - console.log('Radio 1 selected'); - }, - checked: true - }, - { - name: 'radio2', - type: 'radio', - label: 'Radio 2', - value: 'value2', - handler: () => { - console.log('Radio 2 selected'); - } - }, - { - name: 'radio3', - type: 'radio', - label: 'Radio 3', - value: 'value3', - handler: () => { - console.log('Radio 3 selected'); - } - }, - { - name: 'radio4', - type: 'radio', - label: 'Radio 4', - value: 'value4', - handler: () => { - console.log('Radio 4 selected'); - } - }, - { - name: 'radio5', - type: 'radio', - label: 'Radio 5', - value: 'value5', - handler: () => { - console.log('Radio 5 selected'); - } - }, - { - name: 'radio6', - type: 'radio', - label: 'Radio 6', - value: 'value6', - handler: () => { - console.log('Radio 6 selected'); - } - } - ]} - buttons={[ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, - { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ]} - /> - - setShowAlert6(false)} - cssClass='my-custom-class' - header={'Checkbox'} - inputs={[ - { - name: 'checkbox1', - type: 'checkbox', - label: 'Checkbox 1', - value: 'value1', - handler: () => { - console.log('Checkbox 1 selected'); - }, - checked: true - }, - { - name: 'checkbox2', - type: 'checkbox', - label: 'Checkbox 2', - value: 'value2', - handler: () => { - console.log('Checkbox 2 selected'); - } - }, - { - name: 'checkbox3', - type: 'checkbox', - label: 'Checkbox 3', - value: 'value3', - handler: () => { - console.log('Checkbox 3 selected'); - } - }, - { - name: 'checkbox4', - type: 'checkbox', - label: 'Checkbox 4', - value: 'value4', - handler: () => { - console.log('Checkbox 4 selected'); - } - }, - { - name: 'checkbox5', - type: 'checkbox', - label: 'Checkbox 5', - value: 'value5', - handler: () => { - console.log('Checkbox 5 selected'); - } - }, - { - name: 'checkbox6', - type: 'checkbox', - label: 'Checkbox 6', - value: 'value6', - handler: () => { - console.log('Checkbox 6 selected'); - } - } - ]} - buttons={[ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, - { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ]} - /> - - ); -} - -export default AlertExample; - -``` diff --git a/core/src/components/alert/usage/stencil.md b/core/src/components/alert/usage/stencil.md deleted file mode 100644 index 2f24b2a726..0000000000 --- a/core/src/components/alert/usage/stencil.md +++ /dev/null @@ -1,328 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -import { alertController } from '@ionic/core'; - -@Component({ - tag: 'alert-example', - styleUrl: 'alert-example.css' -}) -export class AlertExample { - async presentAlert() { - const alert = await alertController.create({ - cssClass: 'my-custom-class', - header: 'Alert', - subHeader: 'Subtitle', - message: 'This is an alert message.', - buttons: ['OK'] - }); - - await alert.present(); - - const { role } = await alert.onDidDismiss(); - console.log('onDidDismiss resolved with role', role); - } - - async presentAlertMultipleButtons() { - const alert = await alertController.create({ - cssClass: 'my-custom-class', - header: 'Alert', - subHeader: 'Subtitle', - message: 'This is an alert message.', - buttons: ['Cancel', 'Open Modal', 'Delete'] - }); - - await alert.present(); - } - - async presentAlertConfirm() { - const alert = await alertController.create({ - cssClass: 'my-custom-class', - header: 'Confirm!', - message: 'Message text!!!', - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - id: 'cancel-button', - handler: (blah) => { - console.log('Confirm Cancel: blah'); - } - }, { - text: 'Okay', - id: 'confirm-button', - handler: () => { - console.log('Confirm Okay'); - } - } - ] - }); - - await alert.present(); - } - - async presentAlertPrompt() { - const alert = await alertController.create({ - cssClass: 'my-custom-class', - header: 'Prompt!', - inputs: [ - { - name: 'name1', - type: 'text', - placeholder: 'Placeholder 1' - }, - { - name: 'name2', - type: 'text', - id: 'name2-id', - value: 'hello', - placeholder: 'Placeholder 2' - }, - // multiline input. - { - name: 'paragraph', - id: 'paragraph', - type: 'textarea', - placeholder: 'Placeholder 3' - }, - { - name: 'name3', - value: 'http://ionicframework.com', - type: 'url', - placeholder: 'Favorite site ever' - }, - // input date with min & max - { - name: 'name4', - type: 'date', - min: '2017-03-01', - max: '2018-01-12' - }, - // input date without min nor max - { - name: 'name5', - type: 'date' - }, - { - name: 'name6', - type: 'number', - min: -5, - max: 10 - }, - { - name: 'name7', - type: 'number' - }, - { - name: 'name8', - type: 'password', - placeholder: 'Advanced Attributes', - cssClass: 'specialClass', - attributes: { - maxlength: 4, - inputmode: 'decimal' - } - } - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ] - }); - - await alert.present(); - } - - async presentAlertRadio() { - const alert = await alertController.create({ - cssClass: 'my-custom-class', - header: 'Radio', - inputs: [ - { - name: 'radio1', - type: 'radio', - label: 'Radio 1', - value: 'value1', - handler: () => { - console.log('Radio 1 selected'); - }, - checked: true - }, - { - name: 'radio2', - type: 'radio', - label: 'Radio 2', - value: 'value2', - handler: () => { - console.log('Radio 2 selected'); - } - }, - { - name: 'radio3', - type: 'radio', - label: 'Radio 3', - value: 'value3', - handler: () => { - console.log('Radio 3 selected'); - } - }, - { - name: 'radio4', - type: 'radio', - label: 'Radio 4', - value: 'value4', - handler: () => { - console.log('Radio 4 selected'); - } - }, - { - name: 'radio5', - type: 'radio', - label: 'Radio 5', - value: 'value5', - handler: () => { - console.log('Radio 5 selected'); - } - }, - { - name: 'radio6', - type: 'radio', - label: 'Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 Radio 6 ', - value: 'value6', - handler: () => { - console.log('Radio 6 selected'); - } - } - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ] - }); - - await alert.present(); - } - - async presentAlertCheckbox() { - const alert = await alertController.create({ - cssClass: 'my-custom-class', - header: 'Checkbox', - inputs: [ - { - name: 'checkbox1', - type: 'checkbox', - label: 'Checkbox 1', - value: 'value1', - handler: () => { - console.log('Checkbox 1 selected'); - }, - checked: true - }, - { - name: 'checkbox2', - type: 'checkbox', - label: 'Checkbox 2', - value: 'value2', - handler: () => { - console.log('Checkbox 2 selected'); - } - }, - - { - name: 'checkbox3', - type: 'checkbox', - label: 'Checkbox 3', - value: 'value3', - handler: () => { - console.log('Checkbox 3 selected'); - } - }, - - { - name: 'checkbox4', - type: 'checkbox', - label: 'Checkbox 4', - value: 'value4', - handler: () => { - console.log('Checkbox 4 selected'); - } - }, - - { - name: 'checkbox5', - type: 'checkbox', - label: 'Checkbox 5', - value: 'value5', - handler: () => { - console.log('Checkbox 5 selected'); - } - }, - - { - name: 'checkbox6', - type: 'checkbox', - label: 'Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6 Checkbox 6', - value: 'value6', - handler: () => { - console.log('Checkbox 6 selected'); - } - } - ], - buttons: [ - { - text: 'Cancel', - role: 'cancel', - cssClass: 'secondary', - handler: () => { - console.log('Confirm Cancel'); - } - }, { - text: 'Ok', - handler: () => { - console.log('Confirm Ok'); - } - } - ] - }); - - await alert.present(); - } - - - render() { - return [ - - this.presentAlert()}>Present Alert - this.presentAlertMultipleButtons()}>Present Alert: Multiple Buttons - this.presentAlertConfirm()}>Present Alert: Confirm - this.presentAlertPrompt()}>Present Alert: Prompt - this.presentAlertRadio()}>Present Alert: Radio - this.presentAlertCheckbox()}>Present Alert: Checkbox - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/alert/usage/vue.md b/core/src/components/alert/usage/vue.md deleted file mode 100644 index 1d9c3a6cb6..0000000000 --- a/core/src/components/alert/usage/vue.md +++ /dev/null @@ -1,340 +0,0 @@ -```html - - - -``` - -Developers can also use this component directly in their template: - -```html - - - -``` diff --git a/core/src/components/app/readme.md b/core/src/components/app/readme.md deleted file mode 100644 index 23bdd72215..0000000000 --- a/core/src/components/app/readme.md +++ /dev/null @@ -1,10 +0,0 @@ -# ion-app - -App is a container element for an Ionic application. There should only be one `` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `` when they are presented. - - - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/avatar/readme.md b/core/src/components/avatar/readme.md deleted file mode 100644 index a2cea53c00..0000000000 --- a/core/src/components/avatar/readme.md +++ /dev/null @@ -1,145 +0,0 @@ -# ion-avatar - -Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object. - -Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively. - - - - - -## Usage - -### Angular / javascript - -```html - - - - - - - - - Chip Avatar - - - - - - - Item Avatar - -``` - - -### React - -```tsx -import React from 'react'; -import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react'; - -export const AvatarExample: React.FC = () => ( - - - - - - - - - - Chip Avatar - - - - - - - Item Avatar - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'avatar-example', - styleUrl: 'avatar-example.css' -}) -export class AvatarExample { - render() { - return [ - - - , - - - - - - Chip Avatar - , - - - - - - Item Avatar - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## CSS Custom Properties - -| Name | Description | -| ----------------- | ------------------------------------------- | -| `--border-radius` | Border radius of the avatar and inner image | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/avatar/usage/angular.md b/core/src/components/avatar/usage/angular.md deleted file mode 100644 index 6255ae3e9b..0000000000 --- a/core/src/components/avatar/usage/angular.md +++ /dev/null @@ -1,19 +0,0 @@ -```html - - - - - - - - - Chip Avatar - - - - - - - Item Avatar - -``` \ No newline at end of file diff --git a/core/src/components/avatar/usage/javascript.md b/core/src/components/avatar/usage/javascript.md deleted file mode 100644 index 6255ae3e9b..0000000000 --- a/core/src/components/avatar/usage/javascript.md +++ /dev/null @@ -1,19 +0,0 @@ -```html - - - - - - - - - Chip Avatar - - - - - - - Item Avatar - -``` \ No newline at end of file diff --git a/core/src/components/avatar/usage/react.md b/core/src/components/avatar/usage/react.md deleted file mode 100644 index db76f35b99..0000000000 --- a/core/src/components/avatar/usage/react.md +++ /dev/null @@ -1,26 +0,0 @@ -```tsx -import React from 'react'; -import { IonAvatar, IonChip, IonItem, IonLabel, IonContent } from '@ionic/react'; - -export const AvatarExample: React.FC = () => ( - - - - - - - - - - Chip Avatar - - - - - - - Item Avatar - - -); -``` \ No newline at end of file diff --git a/core/src/components/avatar/usage/stencil.md b/core/src/components/avatar/usage/stencil.md deleted file mode 100644 index 137e6c00db..0000000000 --- a/core/src/components/avatar/usage/stencil.md +++ /dev/null @@ -1,31 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'avatar-example', - styleUrl: 'avatar-example.css' -}) -export class AvatarExample { - render() { - return [ - - - , - - - - - - Chip Avatar - , - - - - - - Item Avatar - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/avatar/usage/vue.md b/core/src/components/avatar/usage/vue.md deleted file mode 100644 index db9c466af5..0000000000 --- a/core/src/components/avatar/usage/vue.md +++ /dev/null @@ -1,30 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md deleted file mode 100644 index 9c2433d675..0000000000 --- a/core/src/components/back-button/readme.md +++ /dev/null @@ -1,389 +0,0 @@ -# ion-back-button - -The back button navigates back in the app's history upon click. It is smart enough to know what to render based on the mode and when to show based on the navigation stack. - -To change what is displayed in the back button, use the `text` and `icon` properties. - - - - - -## Usage - -### Angular - -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - - -### Javascript - -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react'; - -export const BackButtonExample: React.FC = () => ( - - {/*-- Default back button --*/} - - - - - - - - - {/*-- Back button with a default href --*/} - - - - - - - - - {/*-- Back button with custom text and icon --*/} - - - - - - - - - {/*-- Back button with no text and custom icon --*/} - - - - - - - - - {/*-- Danger back button next to a menu button --*/} - - - - - - - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'back-button-example', - styleUrl: 'back-button-example.css' -}) -export class BackButtonExample { - render() { - const buttonText = "Custom"; - const buttonIcon = "add"; - - return [ - // Default back button - - - - - - - , - - // Back button with a default href - - - - - - - , - - // Back button with custom text and icon - - - - - - - - , - - // Back button with no text and custom icon - - - - - - - , - - // Danger back button next to a menu button - - - - - - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `defaultHref` | `default-href` | The url to navigate back to by default when there is no history. | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the button. | `boolean` | `false` | -| `icon` | `icon` | The built-in named SVG icon name or the exact `src` of an SVG file to use for the back button. | `null \| string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `text` | `text` | The text to display in the back button. | `null \| string \| undefined` | `undefined` | -| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | - - -## Shadow Parts - -| Part | Description | -| ---------- | ------------------------------------------------------------- | -| `"icon"` | The back button icon (uses ion-icon). | -| `"native"` | The native HTML button element that wraps all child elements. | -| `"text"` | The back button text. | - - -## CSS Custom Properties - -| Name | Description | -| ------------------------------ | -------------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the button | -| `--background-focused` | Background of the button when focused with the tab key | -| `--background-focused-opacity` | Opacity of the button background when focused with the tab key | -| `--background-hover` | Background of the button on hover | -| `--background-hover-opacity` | Opacity of the background on hover | -| `--border-radius` | Border radius of the button | -| `--color` | Text color of the button | -| `--color-focused` | Text color of the button when focused with the tab key | -| `--color-hover` | Text color of the button on hover | -| `--icon-font-size` | Font size of the button icon | -| `--icon-font-weight` | Font weight of the button icon | -| `--icon-margin-bottom` | Bottom margin of the button icon | -| `--icon-margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button icon | -| `--icon-margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button icon | -| `--icon-margin-top` | Top margin of the button icon | -| `--icon-padding-bottom` | Bottom padding of the button icon | -| `--icon-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button icon | -| `--icon-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button icon | -| `--icon-padding-top` | Top padding of the button icon | -| `--margin-bottom` | Bottom margin of the button | -| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the button | -| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the button | -| `--margin-top` | Top margin of the button | -| `--min-height` | Minimum height of the button | -| `--min-width` | Minimum width of the button | -| `--opacity` | Opacity of the button | -| `--padding-bottom` | Bottom padding of the button | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | -| `--padding-top` | Top padding of the button | -| `--ripple-color` | Color of the button ripple effect | -| `--transition` | Transition of the button | - - -## Dependencies - -### Depends on - -- ion-icon -- [ion-ripple-effect](../ripple-effect) - -### Graph -```mermaid -graph TD; - ion-back-button --> ion-icon - ion-back-button --> ion-ripple-effect - style ion-back-button fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/back-button/usage/angular.md b/core/src/components/back-button/usage/angular.md deleted file mode 100644 index fd13ee590f..0000000000 --- a/core/src/components/back-button/usage/angular.md +++ /dev/null @@ -1,50 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` \ No newline at end of file diff --git a/core/src/components/back-button/usage/javascript.md b/core/src/components/back-button/usage/javascript.md deleted file mode 100644 index 7283dcb73b..0000000000 --- a/core/src/components/back-button/usage/javascript.md +++ /dev/null @@ -1,47 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` \ No newline at end of file diff --git a/core/src/components/back-button/usage/react.md b/core/src/components/back-button/usage/react.md deleted file mode 100644 index 5770ac5382..0000000000 --- a/core/src/components/back-button/usage/react.md +++ /dev/null @@ -1,54 +0,0 @@ -```tsx -import React from 'react'; -import { IonBackButton, IonHeader, IonToolbar, IonButtons, IonMenuButton, IonContent } from '@ionic/react'; - -export const BackButtonExample: React.FC = () => ( - - {/*-- Default back button --*/} - - - - - - - - - {/*-- Back button with a default href --*/} - - - - - - - - - {/*-- Back button with custom text and icon --*/} - - - - - - - - - {/*-- Back button with no text and custom icon --*/} - - - - - - - - - {/*-- Danger back button next to a menu button --*/} - - - - - - - - - -); -``` \ No newline at end of file diff --git a/core/src/components/back-button/usage/stencil.md b/core/src/components/back-button/usage/stencil.md deleted file mode 100644 index 7948c2d7b5..0000000000 --- a/core/src/components/back-button/usage/stencil.md +++ /dev/null @@ -1,65 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'back-button-example', - styleUrl: 'back-button-example.css' -}) -export class BackButtonExample { - render() { - const buttonText = "Custom"; - const buttonIcon = "add"; - - return [ - // Default back button - - - - - - - , - - // Back button with a default href - - - - - - - , - - // Back button with custom text and icon - - - - - - - - , - - // Back button with no text and custom icon - - - - - - - , - - // Danger back button next to a menu button - - - - - - - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/back-button/usage/vue.md b/core/src/components/back-button/usage/vue.md deleted file mode 100644 index 8810ee6fbe..0000000000 --- a/core/src/components/back-button/usage/vue.md +++ /dev/null @@ -1,61 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md deleted file mode 100644 index 6bd5ac8e75..0000000000 --- a/core/src/components/backdrop/readme.md +++ /dev/null @@ -1,229 +0,0 @@ -# ion-backdrop - -Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component. - - - - - -## Usage - -### Angular - -```html - - - - - - - - - - - - - - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({ - selector: 'backdrop-example', - templateUrl: 'backdrop-example.html', - styleUrls: ['./backdrop-example.css'], -}) -export class BackdropExample { - enableBackdropDismiss = false; - showBackdrop = false; - shouldPropagate = false; -} -``` - - -### Javascript - -```html - - - - - - - - - - - - - - -``` - -```javascript -var backdrop = document.getElementById('customBackdrop'); -backdrop.visible = false; -backdrop.tappable = false; -backdrop.stopPropagation = false; -``` - - -### React - -```tsx -import React from 'react'; -import { IonBackdrop, IonContent } from '@ionic/react'; - -export const BackdropExample: React.FC = () => ( - - {/*-- Default backdrop --*/} - - - {/*-- Backdrop that is not tappable --*/} - - - {/*-- Backdrop that is not visible --*/} - - - {/*-- Backdrop with propagation --*/} - - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'backdrop-example', - styleUrl: 'backdrop-example.css' -}) -export class BackdropExample { - render() { - const enableBackdropDismiss = false; - const showBackdrop = false; - const shouldPropagate = false; - - return [ - // Default backdrop - , - - // Backdrop that is not tappable - , - - // Backdrop that is not visible - , - - // Backdrop with propagation - , - - // Backdrop that sets dynamic properties - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ------------------------------------------------------------------------------------- | --------- | ------- | -| `stopPropagation` | `stop-propagation` | If `true`, the backdrop will stop propagation on tap. | `boolean` | `true` | -| `tappable` | `tappable` | If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event. | `boolean` | `true` | -| `visible` | `visible` | If `true`, the backdrop will be visible. | `boolean` | `true` | - - -## Events - -| Event | Description | Type | -| ---------------- | ------------------------------------ | ------------------- | -| `ionBackdropTap` | Emitted when the backdrop is tapped. | `CustomEvent` | - - -## Dependencies - -### Used by - - - [ion-action-sheet](../action-sheet) - - [ion-alert](../alert) - - [ion-loading](../loading) - - [ion-menu](../menu) - - [ion-modal](../modal) - - [ion-picker](../picker) - - [ion-popover](../popover) - -### Graph -```mermaid -graph TD; - ion-action-sheet --> ion-backdrop - ion-alert --> ion-backdrop - ion-loading --> ion-backdrop - ion-menu --> ion-backdrop - ion-modal --> ion-backdrop - ion-picker --> ion-backdrop - ion-popover --> ion-backdrop - style ion-backdrop fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/backdrop/usage/angular.md b/core/src/components/backdrop/usage/angular.md deleted file mode 100644 index 8e454fe310..0000000000 --- a/core/src/components/backdrop/usage/angular.md +++ /dev/null @@ -1,35 +0,0 @@ -```html - - - - - - - - - - - - - - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({ - selector: 'backdrop-example', - templateUrl: 'backdrop-example.html', - styleUrls: ['./backdrop-example.css'], -}) -export class BackdropExample { - enableBackdropDismiss = false; - showBackdrop = false; - shouldPropagate = false; -} -``` diff --git a/core/src/components/backdrop/usage/javascript.md b/core/src/components/backdrop/usage/javascript.md deleted file mode 100644 index e77fa207d3..0000000000 --- a/core/src/components/backdrop/usage/javascript.md +++ /dev/null @@ -1,23 +0,0 @@ -```html - - - - - - - - - - - - - - -``` - -```javascript -var backdrop = document.getElementById('customBackdrop'); -backdrop.visible = false; -backdrop.tappable = false; -backdrop.stopPropagation = false; -``` \ No newline at end of file diff --git a/core/src/components/backdrop/usage/react.md b/core/src/components/backdrop/usage/react.md deleted file mode 100644 index 6ed31ad621..0000000000 --- a/core/src/components/backdrop/usage/react.md +++ /dev/null @@ -1,22 +0,0 @@ -```tsx -import React from 'react'; -import { IonBackdrop, IonContent } from '@ionic/react'; - -export const BackdropExample: React.FC = () => ( - - {/*-- Default backdrop --*/} - - - {/*-- Backdrop that is not tappable --*/} - - - {/*-- Backdrop that is not visible --*/} - - - {/*-- Backdrop with propagation --*/} - - - - -); -``` diff --git a/core/src/components/backdrop/usage/stencil.md b/core/src/components/backdrop/usage/stencil.md deleted file mode 100644 index 4c74219cbd..0000000000 --- a/core/src/components/backdrop/usage/stencil.md +++ /dev/null @@ -1,36 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'backdrop-example', - styleUrl: 'backdrop-example.css' -}) -export class BackdropExample { - render() { - const enableBackdropDismiss = false; - const showBackdrop = false; - const shouldPropagate = false; - - return [ - // Default backdrop - , - - // Backdrop that is not tappable - , - - // Backdrop that is not visible - , - - // Backdrop with propagation - , - - // Backdrop that sets dynamic properties - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/backdrop/usage/vue.md b/core/src/components/backdrop/usage/vue.md deleted file mode 100644 index 69b836eb57..0000000000 --- a/core/src/components/backdrop/usage/vue.md +++ /dev/null @@ -1,38 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/badge/readme.md b/core/src/components/badge/readme.md deleted file mode 100644 index b0930be0f5..0000000000 --- a/core/src/components/badge/readme.md +++ /dev/null @@ -1,168 +0,0 @@ -# ion-badge - -Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are. - - - - - -## Usage - -### Angular / javascript - -```html - -99 - - -11 -22 -33 -44 -55 -66 -77 -88 -99 - - - - 11 - My Item - 22 - -``` - - -### React - -```tsx -import React from 'react'; -import { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react'; - -export const BadgeExample: React.FC = () => ( - - {/*-- Default --*/} - 99 - - {/*-- Colors --*/} - 11 - 22 - 33 - 44 - 55 - 66 - 77 - 88 - 99 - - {/*-- Item with badge on left and right --*/} - - 11 - My Item - 22 - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'badge-example', - styleUrl: 'badge-example.css' -}) -export class BadgeExample { - render() { - return [ - // Default - 99, - - // Colors - 11, - 22, - 33, - 44, - 55, - 66, - 77, - 88, - 99, - - // Item with badge on left and right - - 11 - My Item - 22 - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | - - -## CSS Custom Properties - -| Name | Description | -| ------------------ | -------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the badge | -| `--color` | Text color of the badge | -| `--padding-bottom` | Bottom padding of the badge | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the badge | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the badge | -| `--padding-top` | Top padding of the badge | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/badge/usage/angular.md b/core/src/components/badge/usage/angular.md deleted file mode 100644 index 92e8dd5c44..0000000000 --- a/core/src/components/badge/usage/angular.md +++ /dev/null @@ -1,22 +0,0 @@ -```html - -99 - - -11 -22 -33 -44 -55 -66 -77 -88 -99 - - - - 11 - My Item - 22 - -``` \ No newline at end of file diff --git a/core/src/components/badge/usage/javascript.md b/core/src/components/badge/usage/javascript.md deleted file mode 100644 index 92e8dd5c44..0000000000 --- a/core/src/components/badge/usage/javascript.md +++ /dev/null @@ -1,22 +0,0 @@ -```html - -99 - - -11 -22 -33 -44 -55 -66 -77 -88 -99 - - - - 11 - My Item - 22 - -``` \ No newline at end of file diff --git a/core/src/components/badge/usage/react.md b/core/src/components/badge/usage/react.md deleted file mode 100644 index a494c8d059..0000000000 --- a/core/src/components/badge/usage/react.md +++ /dev/null @@ -1,29 +0,0 @@ -```tsx -import React from 'react'; -import { IonBadge, IonItem, IonLabel, IonContent } from '@ionic/react'; - -export const BadgeExample: React.FC = () => ( - - {/*-- Default --*/} - 99 - - {/*-- Colors --*/} - 11 - 22 - 33 - 44 - 55 - 66 - 77 - 88 - 99 - - {/*-- Item with badge on left and right --*/} - - 11 - My Item - 22 - - -); -``` diff --git a/core/src/components/badge/usage/stencil.md b/core/src/components/badge/usage/stencil.md deleted file mode 100644 index 862456d3b4..0000000000 --- a/core/src/components/badge/usage/stencil.md +++ /dev/null @@ -1,34 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'badge-example', - styleUrl: 'badge-example.css' -}) -export class BadgeExample { - render() { - return [ - // Default - 99, - - // Colors - 11, - 22, - 33, - 44, - 55, - 66, - 77, - 88, - 99, - - // Item with badge on left and right - - 11 - My Item - 22 - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/badge/usage/vue.md b/core/src/components/badge/usage/vue.md deleted file mode 100644 index 70ceddc2c3..0000000000 --- a/core/src/components/badge/usage/vue.md +++ /dev/null @@ -1,33 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/breadcrumb/readme.md b/core/src/components/breadcrumb/readme.md deleted file mode 100644 index a270df7152..0000000000 --- a/core/src/components/breadcrumb/readme.md +++ /dev/null @@ -1,90 +0,0 @@ -# ion-breadcrumb - -A Breadcrumb is a single navigation item that is a child of the Breadcrumbs component. A breadcrumb can link elsewhere in an app or it can be plain text. Each breadcrumb has a separator between it and the next breadcrumb and can optionally contain an icon. - -## Interfaces - -### BreadcrumbCollapsedClickEventDetail - -```typescript -interface BreadcrumbCollapsedClickEventDetail { - collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[]; -} -``` - -### BreadcrumbCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing . - -```typescript -interface BreadcrumbCustomEvent extends CustomEvent { - detail: BreadcrumbCollapsedClickEventDetail; - target: HTMLIonBreadcrumbElement; -} -``` - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| `active` | `active` | If `true`, the breadcrumb will take on a different look to show that it is the currently active breadcrumb. Defaults to `true` for the last breadcrumb if it is not set on any. | `boolean` | `false` | -| `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). | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the breadcrumb. | `boolean` | `false` | -| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` | -| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` | -| `separator` | `separator` | If true, show a separator between this breadcrumb and the next. Defaults to `true` for all breadcrumbs except the last. | `boolean \| undefined` | `undefined` | -| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | - - -## Events - -| Event | Description | Type | -| ---------- | ---------------------------------------- | ------------------- | -| `ionBlur` | Emitted when the breadcrumb loses focus. | `CustomEvent` | -| `ionFocus` | Emitted when the breadcrumb has focus. | `CustomEvent` | - - -## Shadow Parts - -| Part | Description | -| ----------------------- | -------------------------------------------------------------------- | -| `"collapsed-indicator"` | The indicator element that shows the breadcrumbs are collapsed. | -| `"native"` | The native HTML anchor or div element that wraps all child elements. | -| `"separator"` | The separator element between each breadcrumb. | - - -## CSS Custom Properties - -| Name | Description | -| ---------------------- | ----------------------------------------------- | -| `--background-focused` | Background color of the breadcrumb when focused | -| `--color` | Text color of the breadcrumb | -| `--color-active` | Text color of the active breadcrumb | -| `--color-focused` | Text color of the breadcrumb when focused | -| `--color-hover` | Text color of the breadcrumb on hover | - - -## Dependencies - -### Depends on - -- ion-icon - -### Graph -```mermaid -graph TD; - ion-breadcrumb --> ion-icon - style ion-breadcrumb fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/breadcrumbs/readme.md b/core/src/components/breadcrumbs/readme.md deleted file mode 100644 index 55ca0c9d7d..0000000000 --- a/core/src/components/breadcrumbs/readme.md +++ /dev/null @@ -1,2065 +0,0 @@ -# ion-breadcrumbs - -Breadcrumbs are navigation items that are used to indicate where a user is on an app or site. They should be used for large sites and apps with hierarchically arranged pages. Breadcrumbs can be collapsed based on the maximum number that can show, and the collapsed indicator can be clicked on to present a popover with more information or expand the collapsed breadcrumbs. - - - - - -## Usage - -### Angular - -### Default - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Colors - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Breadcrumbs with Icon - -```html - - - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - - - - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - - -``` - -### Custom Separator - -```html - - - - Home - | - - - Electronics - | - - - Photography - | - - - Cameras - | - - - Film - | - - - 35 mm - - - - - - - Home - - - - Electronics - - - - Photography - - - - Cameras - - - - Film - - - - 35 mm - - -``` - -### Max Items - -```html - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Items Before or After Collapse - -```html - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Expand on Collapsed Indicator Click - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({ - selector: 'breadcrumbs-example', - templateUrl: 'breadcrumbs-example.html', - styleUrls: ['./breadcrumbs-example.css'], -}) -export class BreadcrumbsExample { - maxBreadcrumbs = 4; - - expandBreadcrumbs() { - this.maxBreadcrumbs = undefined; - } -} -``` - -### Popover on Collapsed Indicator Click - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -```typescript -import { Component } from '@angular/core'; -import { PopoverController } from '@ionic/angular'; -import { PopoverComponent } from '../popover/popover.component'; - -@Component({ - selector: 'breadcrumbs-example', - templateUrl: 'breadcrumbs-example.html', - styleUrls: ['./breadcrumbs-example.css'] -}) -export class BreadcrumbsExample { - constructor(public popoverController: PopoverController) {} - - async presentPopover(ev: any) { - const popover = await this.popoverController.create({ - component: PopoverComponent, - componentProps: { - collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs - }, - event: ev - }); - await popover.present(); - } -} -``` - -```html - - - - {{ breadcrumb.textContent }} - - - -``` -```typescript -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'popover-component', -}) -export class PopoverComponent { - @Input() collapsedBreadcrumbs: HTMLElement[] = []; - - constructor() {} - -} -``` - - -### Javascript - -### Default - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Colors - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Breadcrumbs with Icon - -```html - - - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - - - - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - - -``` - -### Custom Separator - -```html - - - - Home - | - - - Electronics - | - - - Photography - | - - - Cameras - | - - - Film - | - - - 35 mm - - - - - - - Home - - - - Electronics - - - - Photography - - - - Cameras - - - - Film - - - - 35 mm - - -``` - -### Max Items - -```html - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Items Before or After Collapse - -```html - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Expand on Collapsed Indicator Click - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -```javascript -const breadcrumbs = document.querySelector('ion-breadcrumbs'); - -breadcrumbs.addEventListener('ionCollapsedClick', () => expandBreadcrumbs()); - -function expandBreadcrumbs() { - breadcrumbs.maxItems = undefined; -} -``` - -### Popover on Collapsed Indicator Click - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -```javascript -const breadcrumbs = document.querySelector('ion-breadcrumbs'); - -breadcrumbs.addEventListener('ionCollapsedClick', (ev) => presentPopover(ev)); - -class ListPopover extends HTMLElement { - constructor() { - super(); - } - - connectedCallback() { - let breadcrumbTemplate = ``; - this.collapsedBreadcrumbs.forEach(breadcrumb => { - breadcrumbTemplate += ` - - ${breadcrumb.textContent} - - `; - }) - this.innerHTML = ` - - - ${breadcrumbTemplate} - - - `; - } -} - -customElements.define('list-popover', ListPopover); - -async function presentPopover(ev) { - const popover = Object.assign(document.createElement('ion-popover'), { - component: 'list-popover', - componentProps: { - collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs - }, - event: ev - }); - document.body.appendChild(popover); - - await popover.present(); -} -``` - - -### React - -### Default - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; - -export const BreadcrumbsExample: React.FC = () => ( - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -); -``` - -### Colors - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; - -export const BreadcrumbsExample: React.FC = () => ( - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -); -``` - -### Breadcrumbs with Icon - - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/react'; -import { document, folder, home } from 'ionicons/icons'; - -export const BreadcrumbsExample: React.FC = () => ( - {/*-- Icon start --*/} - - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - , - - {/*-- Icon end --*/} - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - - -); -``` - -### Custom Separator - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/react'; -import { arrowForward } from 'ionicons/icons'; - -export const BreadcrumbsExample: React.FC = () => ( - {/*-- Custom separator text --*/} - - - Home - | - - - Electronics - | - - - Photography - | - - - Cameras - | - - - Film - | - - - 35 mm - - , - - {/*-- Custom separator icon --*/} - - - Home - - - - Electronics - - - - Photography - - - - Cameras - - - - Film - - - - 35 mm - - -); -``` - -### Max Items - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; - -export const BreadcrumbsExample: React.FC = () => ( - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -); -``` - - -### Items Before or After Collapse - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; - -export const BreadcrumbsExample: React.FC = () => ( - {/*-- Items before collapse --*/} - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - , - - {/*-- Items after collapse --*/} - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - , - - {/*-- Items before and after collapse --*/} - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -); -``` - -### Expand on Collapsed Indicator Click - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; - -export const BreadcrumbsExample: React.FC = () => { - const [maxBreadcrumbs, setMaxBreadcrumbs] = useState(4); - - const expandBreadcrumbs = () => { - setMaxBreadcrumbs(undefined); - } - - return ( - expandBreadcrumbs()}> - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ); -}; -``` - -### Popover on Collapsed Indicator Click - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, useIonPopover } from '@ionic/react'; - -const PopoverList: React.FC<{ - onHide: () => void; - collapsedBreadcrumbs: HTMLElement[] -}> = ({ onHide, collapsedBreadcrumbs }) => ( - - - {collapsedBreadcrumbs.map(breadcrumb => ( - - {breadcrumb.textContent} - - ))} - - -); - -export const BreadcrumbsExample: React.FC = () => { - const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() }); - - return ( - present({ event: e.nativeEvent })}> - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ); -}; -``` - - -### Stencil - -### Default - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - render() { - return [ - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ]; - } -} -``` - -### Colors - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - render() { - return [ - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ]; - } -} -``` - -### Breadcrumbs with Icon - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - render() { - return [ - // Icon start - - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - , - - // Icon end - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - - - ]; - } -} -``` - -### Custom Separator - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - render() { - return [ - // Custom separator text - - - Home - | - - - Electronics - | - - - Photography - | - - - Cameras - | - - - Film - | - - - 35 mm - - , - - // Custom separator icon - - - Home - - - - Electronics - - - - Photography - - - - Cameras - - - - Film - - - - 35 mm - - - ]; - } -} -``` - -### Max Items - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - render() { - return [ - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ]; - } -} -``` - - - -### Items Before or After Collapse - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - render() { - return [ - // Items before collapse - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - , - - // Items after collapse - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - , - - // Items before and after collapse - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ]; - } -} -``` - -### Expand on Collapsed Indicator Click - -```tsx -import { Component, State, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - @State() maxBreadcrumbs = 4; - - expandBreadcrumbs() { - maxBreadcrumbs = undefined; - } - - render() { - const { maxBreadcrumbs } = this; - - return [ - this.expandBreadcrumbs()}> - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ]; - } -} -``` - -### Popover on Collapsed Indicator Click - -```tsx -import { Component, h } from '@stencil/core'; - -import { popoverController } from '@ionic/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - async presentPopover(ev: any) { - const popover = await popoverController.create({ - component: 'list-popover', - componentProps: { - collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs - }, - event: ev - }); - await popover.present(); - } - - render() { - return [ - this.presentPopover(ev)}> - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ]; - } -} -``` - -```tsx -import { Component, h, Prop } from '@stencil/core'; - -@Component({ - tag: 'list-popover', - styleUrl: 'list-popover.css', -}) -export class ListPopover { - @Prop() collapsedBreadcrumbs: HTMLElement[] = []; - - render() { - return [ - - - {this.collapsedBreadcrumbs.map(breadcrumb => ( - - {breadcrumb.textContent} - - ))} - - - ]; - } -} -``` - - -### Vue - -### Default - -```html - - - -``` - -### Colors - -```html - - - -``` - -### Breadcrumbs with Icon - -```html - - - -``` - -### Custom Separator - -```html - - - -``` - -### Max Items - -```html - - - -``` - -### Items Before or After Collapse - -```html - - - -``` - -### Expand on Collapsed Indicator Click - -```html - - - -``` - - -### Popover on Collapsed Indicator Click - -```html - - - -``` - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| --------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `itemsAfterCollapse` | `items-after-collapse` | The number of breadcrumbs to show after the collapsed indicator. If this property exists `maxItems` will be ignored. | `number` | `1` | -| `itemsBeforeCollapse` | `items-before-collapse` | The number of breadcrumbs to show before the collapsed indicator. If this property exists `maxItems` will be ignored. | `number` | `1` | -| `maxItems` | `max-items` | The maximum number of breadcrumbs to show before collapsing. | `number \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | - - -## Events - -| Event | Description | Type | -| ------------------- | --------------------------------------------------- | -------------------------------------------------- | -| `ionCollapsedClick` | Emitted when the collapsed indicator is clicked on. | `CustomEvent` | - - -## CSS Custom Properties - -| Name | Description | -| -------------- | ----------------------------- | -| `--background` | Background of the breadcrumbs | -| `--color` | Text color of the breadcrumbs | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/breadcrumbs/usage/angular.md b/core/src/components/breadcrumbs/usage/angular.md deleted file mode 100644 index 571c25c7da..0000000000 --- a/core/src/components/breadcrumbs/usage/angular.md +++ /dev/null @@ -1,371 +0,0 @@ -### Default - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Colors - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Breadcrumbs with Icon - -```html - - - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - - - - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - - -``` - -### Custom Separator - -```html - - - - Home - | - - - Electronics - | - - - Photography - | - - - Cameras - | - - - Film - | - - - 35 mm - - - - - - - Home - - - - Electronics - - - - Photography - - - - Cameras - - - - Film - - - - 35 mm - - -``` - -### Max Items - -```html - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Items Before or After Collapse - -```html - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Expand on Collapsed Indicator Click - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({ - selector: 'breadcrumbs-example', - templateUrl: 'breadcrumbs-example.html', - styleUrls: ['./breadcrumbs-example.css'], -}) -export class BreadcrumbsExample { - maxBreadcrumbs = 4; - - expandBreadcrumbs() { - this.maxBreadcrumbs = undefined; - } -} -``` - -### Popover on Collapsed Indicator Click - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -```typescript -import { Component } from '@angular/core'; -import { PopoverController } from '@ionic/angular'; -import { PopoverComponent } from '../popover/popover.component'; - -@Component({ - selector: 'breadcrumbs-example', - templateUrl: 'breadcrumbs-example.html', - styleUrls: ['./breadcrumbs-example.css'] -}) -export class BreadcrumbsExample { - constructor(public popoverController: PopoverController) {} - - async presentPopover(ev: any) { - const popover = await this.popoverController.create({ - component: PopoverComponent, - componentProps: { - collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs - }, - event: ev - }); - await popover.present(); - } -} -``` - -```html - - - - {{ breadcrumb.textContent }} - - - -``` -```typescript -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'popover-component', -}) -export class PopoverComponent { - @Input() collapsedBreadcrumbs: HTMLElement[] = []; - - constructor() {} - -} -``` diff --git a/core/src/components/breadcrumbs/usage/javascript.md b/core/src/components/breadcrumbs/usage/javascript.md deleted file mode 100644 index 2d500725e7..0000000000 --- a/core/src/components/breadcrumbs/usage/javascript.md +++ /dev/null @@ -1,360 +0,0 @@ -### Default - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Colors - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Breadcrumbs with Icon - -```html - - - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - - - - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - - -``` - -### Custom Separator - -```html - - - - Home - | - - - Electronics - | - - - Photography - | - - - Cameras - | - - - Film - | - - - 35 mm - - - - - - - Home - - - - Electronics - - - - Photography - - - - Cameras - - - - Film - - - - 35 mm - - -``` - -### Max Items - -```html - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Items Before or After Collapse - -```html - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - - - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -### Expand on Collapsed Indicator Click - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -```javascript -const breadcrumbs = document.querySelector('ion-breadcrumbs'); - -breadcrumbs.addEventListener('ionCollapsedClick', () => expandBreadcrumbs()); - -function expandBreadcrumbs() { - breadcrumbs.maxItems = undefined; -} -``` - -### Popover on Collapsed Indicator Click - -```html - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -``` - -```javascript -const breadcrumbs = document.querySelector('ion-breadcrumbs'); - -breadcrumbs.addEventListener('ionCollapsedClick', (ev) => presentPopover(ev)); - -class ListPopover extends HTMLElement { - constructor() { - super(); - } - - connectedCallback() { - let breadcrumbTemplate = ``; - this.collapsedBreadcrumbs.forEach(breadcrumb => { - breadcrumbTemplate += ` - - ${breadcrumb.textContent} - - `; - }) - this.innerHTML = ` - - - ${breadcrumbTemplate} - - - `; - } -} - -customElements.define('list-popover', ListPopover); - -async function presentPopover(ev) { - const popover = Object.assign(document.createElement('ion-popover'), { - component: 'list-popover', - componentProps: { - collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs - }, - event: ev - }); - document.body.appendChild(popover); - - await popover.present(); -} -``` diff --git a/core/src/components/breadcrumbs/usage/react.md b/core/src/components/breadcrumbs/usage/react.md deleted file mode 100644 index ff242a3c1d..0000000000 --- a/core/src/components/breadcrumbs/usage/react.md +++ /dev/null @@ -1,375 +0,0 @@ -### Default - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; - -export const BreadcrumbsExample: React.FC = () => ( - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -); -``` - -### Colors - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; - -export const BreadcrumbsExample: React.FC = () => ( - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -); -``` - -### Breadcrumbs with Icon - - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/react'; -import { document, folder, home } from 'ionicons/icons'; - -export const BreadcrumbsExample: React.FC = () => ( - {/*-- Icon start --*/} - - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - , - - {/*-- Icon end --*/} - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - - -); -``` - -### Custom Separator - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/react'; -import { arrowForward } from 'ionicons/icons'; - -export const BreadcrumbsExample: React.FC = () => ( - {/*-- Custom separator text --*/} - - - Home - | - - - Electronics - | - - - Photography - | - - - Cameras - | - - - Film - | - - - 35 mm - - , - - {/*-- Custom separator icon --*/} - - - Home - - - - Electronics - - - - Photography - - - - Cameras - - - - Film - - - - 35 mm - - -); -``` - -### Max Items - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; - -export const BreadcrumbsExample: React.FC = () => ( - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -); -``` - - -### Items Before or After Collapse - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; - -export const BreadcrumbsExample: React.FC = () => ( - {/*-- Items before collapse --*/} - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - , - - {/*-- Items after collapse --*/} - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - , - - {/*-- Items before and after collapse --*/} - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - -); -``` - -### Expand on Collapsed Indicator Click - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; - -export const BreadcrumbsExample: React.FC = () => { - const [maxBreadcrumbs, setMaxBreadcrumbs] = useState(4); - - const expandBreadcrumbs = () => { - setMaxBreadcrumbs(undefined); - } - - return ( - expandBreadcrumbs()}> - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ); -}; -``` - -### Popover on Collapsed Indicator Click - -```tsx -import React from 'react'; -import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, useIonPopover } from '@ionic/react'; - -const PopoverList: React.FC<{ - onHide: () => void; - collapsedBreadcrumbs: HTMLElement[] -}> = ({ onHide, collapsedBreadcrumbs }) => ( - - - {collapsedBreadcrumbs.map(breadcrumb => ( - - {breadcrumb.textContent} - - ))} - - -); - -export const BreadcrumbsExample: React.FC = () => { - const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() }); - - return ( - present({ event: e.nativeEvent })}> - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ); -}; -``` diff --git a/core/src/components/breadcrumbs/usage/stencil.md b/core/src/components/breadcrumbs/usage/stencil.md deleted file mode 100644 index f14e6a10eb..0000000000 --- a/core/src/components/breadcrumbs/usage/stencil.md +++ /dev/null @@ -1,449 +0,0 @@ -### Default - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - render() { - return [ - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ]; - } -} -``` - -### Colors - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - render() { - return [ - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ]; - } -} -``` - -### Breadcrumbs with Icon - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - render() { - return [ - // Icon start - - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - , - - // Icon end - - - Home - - - - Files - - - - Projects - - - - User Research - - - - Survey.txt - - - - ]; - } -} -``` - -### Custom Separator - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - render() { - return [ - // Custom separator text - - - Home - | - - - Electronics - | - - - Photography - | - - - Cameras - | - - - Film - | - - - 35 mm - - , - - // Custom separator icon - - - Home - - - - Electronics - - - - Photography - - - - Cameras - - - - Film - - - - 35 mm - - - ]; - } -} -``` - -### Max Items - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - render() { - return [ - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ]; - } -} -``` - - - -### Items Before or After Collapse - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - render() { - return [ - // Items before collapse - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - , - - // Items after collapse - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - , - - // Items before and after collapse - - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ]; - } -} -``` - -### Expand on Collapsed Indicator Click - -```tsx -import { Component, State, h } from '@stencil/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - @State() maxBreadcrumbs = 4; - - expandBreadcrumbs() { - maxBreadcrumbs = undefined; - } - - render() { - const { maxBreadcrumbs } = this; - - return [ - this.expandBreadcrumbs()}> - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ]; - } -} -``` - -### Popover on Collapsed Indicator Click - -```tsx -import { Component, h } from '@stencil/core'; - -import { popoverController } from '@ionic/core'; - -@Component({ - tag: 'breadcrumbs-example', - styleUrl: 'breadcrumbs-example.css' -}) -export class BreadcrumbsExample { - async presentPopover(ev: any) { - const popover = await popoverController.create({ - component: 'list-popover', - componentProps: { - collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs - }, - event: ev - }); - await popover.present(); - } - - render() { - return [ - this.presentPopover(ev)}> - - Home - - - Electronics - - - Photography - - - Cameras - - - Film - - - 35 mm - - - ]; - } -} -``` - -```tsx -import { Component, h, Prop } from '@stencil/core'; - -@Component({ - tag: 'list-popover', - styleUrl: 'list-popover.css', -}) -export class ListPopover { - @Prop() collapsedBreadcrumbs: HTMLElement[] = []; - - render() { - return [ - - - {this.collapsedBreadcrumbs.map(breadcrumb => ( - - {breadcrumb.textContent} - - ))} - - - ]; - } -} -``` diff --git a/core/src/components/breadcrumbs/usage/vue.md b/core/src/components/breadcrumbs/usage/vue.md deleted file mode 100644 index 9cf1f66489..0000000000 --- a/core/src/components/breadcrumbs/usage/vue.md +++ /dev/null @@ -1,450 +0,0 @@ -### Default - -```html - - - -``` - -### Colors - -```html - - - -``` - -### Breadcrumbs with Icon - -```html - - - -``` - -### Custom Separator - -```html - - - -``` - -### Max Items - -```html - - - -``` - -### Items Before or After Collapse - -```html - - - -``` - -### Expand on Collapsed Indicator Click - -```html - - - -``` - - -### Popover on Collapsed Indicator Click - -```html - - - -``` - -```html - - - -``` diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md deleted file mode 100644 index d39d7eab3c..0000000000 --- a/core/src/components/button/readme.md +++ /dev/null @@ -1,386 +0,0 @@ -# ion-button - -Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way. - -## Expand - -This attribute lets you specify how wide the button should be. By default, buttons are inline blocks, but setting this attribute will change the button to a full-width block element. - -| Value | Details | -|----------------|------------------------------------------------------------------------------| -| `block` | Full-width button with rounded corners. | -| `full` | Full-width button with square corners and no border on the left or right. | - -## Fill - -This attribute determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background. - -| Value | Details | -|----------------|------------------------------------------------------------------------------| -| `clear` | Button with a transparent background that resembles a flat button. | -| `outline` | Button with a transparent background and a visible border. | -| `solid` | Button with a filled background. Useful for buttons in a toolbar. | - -## Size - -This attribute specifies the size of the button. Setting this attribute will change the height and padding of a button. - -| Value | Details | -|----------------|------------------------------------------------------------------------------| -| `small` | Button with less height and padding. Default for buttons in an item. | -| `default` | Button with the default height and padding. Useful for buttons in an item. | -| `large` | Button with more height and padding. | - - - - - -## Usage - -### Angular / javascript - -```html - -Default - - -Anchor - - -Primary -Secondary -Tertiary -Success -Warning -Danger -Light -Medium -Dark - - -Full Button -Block Button - - -Round Button - - -Outline + Full -Outline + Block -Outline + Round - - - - - Left Icon - - - - Right Icon - - - - - - - - -Large -Default -Small -``` - - -### React - -```tsx -import React from 'react'; - -import { IonButton, IonIcon, IonContent } from '@ionic/react'; -import { star } from 'ionicons/icons'; - -export const ButtonExample: React.FC = () => ( - - {/*-- Default --*/} - Default - - {/*-- Anchor --*/} - Anchor - - {/*-- Colors --*/} - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark - - {/*-- Expand --*/} - Full Button - Block Button - - {/*-- Round --*/} - Round Button - - {/*-- Fill --*/} - Outline + Full - Outline + Block - Outline + Round - - {/*-- Icons --*/} - - - Left Icon - - - - Right Icon - - - - - - - - {/*-- Sizes --*/} - Large - Default - Small - -); - -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'button-example', - styleUrl: 'button-example.css' -}) -export class ButtonExample { - render() { - return [ - // Default - Default, - - // Anchor - Anchor, - - // Colors - Primary, - Secondary, - Tertiary, - Success, - Warning, - Danger, - Light, - Medium, - Dark, - - // Expand - Full Button, - Block Button, - - // Round - Round Button, - - // Fill - Outline + Full, - Outline + Block, - Outline + Round, - - // Icons - - - Left Icon - , - - - Right Icon - - , - - - - , - - // Sizes - Large, - Default, - Small - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- | -| `buttonType` | `button-type` | The type of button. | `string` | `'button'` | -| `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). | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the button. | `boolean` | `false` | -| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` | -| `expand` | `expand` | Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. | `"block" \| "full" \| undefined` | `undefined` | -| `fill` | `fill` | Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. | `"clear" \| "default" \| "outline" \| "solid" \| undefined` | `undefined` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` | -| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` | -| `shape` | `shape` | The button shape. | `"round" \| undefined` | `undefined` | -| `size` | `size` | The button size. | `"default" \| "large" \| "small" \| undefined` | `undefined` | -| `strong` | `strong` | If `true`, activates a button with a heavier font weight. | `boolean` | `false` | -| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | -| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | - - -## Events - -| Event | Description | Type | -| ---------- | ------------------------------------ | ------------------- | -| `ionBlur` | Emitted when the button loses focus. | `CustomEvent` | -| `ionFocus` | Emitted when the button has focus. | `CustomEvent` | - - -## Slots - -| Slot | Description | -| ------------- | --------------------------------------------------------------------------------- | -| | Content is placed between the named slots if provided without a slot. | -| `"end"` | Content is placed to the right of the button text in LTR, and to the left in RTL. | -| `"icon-only"` | Should be used on an icon in a button that has no text. | -| `"start"` | Content is placed to the left of the button text in LTR, and to the right in RTL. | - - -## Shadow Parts - -| Part | Description | -| ---------- | ----------------------------------------------------------------------- | -| `"native"` | The native HTML button or anchor element that wraps all child elements. | - - -## CSS Custom Properties - -| Name | Description | -| -------------------------------- | --------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the button | -| `--background-activated` | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. | -| `--background-activated-opacity` | Opacity of the button when pressed | -| `--background-focused` | Background of the button when focused with the tab key | -| `--background-focused-opacity` | Opacity of the button when focused with the tab key | -| `--background-hover` | Background of the button on hover | -| `--background-hover-opacity` | Opacity of the background on hover | -| `--border-color` | Border color of the button | -| `--border-radius` | Border radius of the button | -| `--border-style` | Border style of the button | -| `--border-width` | Border width of the button | -| `--box-shadow` | Box shadow of the button | -| `--color` | Text color of the button | -| `--color-activated` | Text color of the button when pressed | -| `--color-focused` | Text color of the button when focused with the tab key | -| `--color-hover` | Text color of the button when hover | -| `--opacity` | Opacity of the button | -| `--padding-bottom` | Bottom padding of the button | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | -| `--padding-top` | Top padding of the button | -| `--ripple-color` | Color of the button ripple effect | -| `--transition` | Transition of the button | - - -## Dependencies - -### Used by - - - [ion-datetime](../datetime) - -### Depends on - -- [ion-ripple-effect](../ripple-effect) - -### Graph -```mermaid -graph TD; - ion-button --> ion-ripple-effect - ion-datetime --> ion-button - style ion-button fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/button/usage/angular.md b/core/src/components/button/usage/angular.md deleted file mode 100644 index b8e957e77d..0000000000 --- a/core/src/components/button/usage/angular.md +++ /dev/null @@ -1,51 +0,0 @@ - -```html - -Default - - -Anchor - - -Primary -Secondary -Tertiary -Success -Warning -Danger -Light -Medium -Dark - - -Full Button -Block Button - - -Round Button - - -Outline + Full -Outline + Block -Outline + Round - - - - - Left Icon - - - - Right Icon - - - - - - - - -Large -Default -Small -``` diff --git a/core/src/components/button/usage/javascript.md b/core/src/components/button/usage/javascript.md deleted file mode 100644 index b8e957e77d..0000000000 --- a/core/src/components/button/usage/javascript.md +++ /dev/null @@ -1,51 +0,0 @@ - -```html - -Default - - -Anchor - - -Primary -Secondary -Tertiary -Success -Warning -Danger -Light -Medium -Dark - - -Full Button -Block Button - - -Round Button - - -Outline + Full -Outline + Block -Outline + Round - - - - - Left Icon - - - - Right Icon - - - - - - - - -Large -Default -Small -``` diff --git a/core/src/components/button/usage/react.md b/core/src/components/button/usage/react.md deleted file mode 100644 index 165df3184e..0000000000 --- a/core/src/components/button/usage/react.md +++ /dev/null @@ -1,60 +0,0 @@ -```tsx -import React from 'react'; - -import { IonButton, IonIcon, IonContent } from '@ionic/react'; -import { star } from 'ionicons/icons'; - -export const ButtonExample: React.FC = () => ( - - {/*-- Default --*/} - Default - - {/*-- Anchor --*/} - Anchor - - {/*-- Colors --*/} - Primary - Secondary - Tertiary - Success - Warning - Danger - Light - Medium - Dark - - {/*-- Expand --*/} - Full Button - Block Button - - {/*-- Round --*/} - Round Button - - {/*-- Fill --*/} - Outline + Full - Outline + Block - Outline + Round - - {/*-- Icons --*/} - - - Left Icon - - - - Right Icon - - - - - - - - {/*-- Sizes --*/} - Large - Default - Small - -); - -``` diff --git a/core/src/components/button/usage/stencil.md b/core/src/components/button/usage/stencil.md deleted file mode 100644 index 82ced76b17..0000000000 --- a/core/src/components/button/usage/stencil.md +++ /dev/null @@ -1,62 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'button-example', - styleUrl: 'button-example.css' -}) -export class ButtonExample { - render() { - return [ - // Default - Default, - - // Anchor - Anchor, - - // Colors - Primary, - Secondary, - Tertiary, - Success, - Warning, - Danger, - Light, - Medium, - Dark, - - // Expand - Full Button, - Block Button, - - // Round - Round Button, - - // Fill - Outline + Full, - Outline + Block, - Outline + Round, - - // Icons - - - Left Icon - , - - - Right Icon - - , - - - - , - - // Sizes - Large, - Default, - Small - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/button/usage/vue.md b/core/src/components/button/usage/vue.md deleted file mode 100644 index b72a42d08a..0000000000 --- a/core/src/components/button/usage/vue.md +++ /dev/null @@ -1,61 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/buttons/readme.md b/core/src/components/buttons/readme.md deleted file mode 100644 index 8fa4b51a63..0000000000 --- a/core/src/components/buttons/readme.md +++ /dev/null @@ -1,340 +0,0 @@ -# ion-buttons - -The Buttons component is a container element. Buttons placed in a toolbar should be placed inside of the `` element. - -The `` element can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot. - -| Slot | Description | -|--------------|----------------------------------------------------------------------------------------------------------| -| `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. | -| `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. | -| `start` | Positions to the `left` of the content in LTR, and to the `right` in RTL. | -| `end` | Positions to the `right` of the content in LTR, and to the `left` in RTL. | - - - - - -## Usage - -### Angular - -```html - - - - - Back Button - - - - - - - - - - - - Default Buttons - - - - - - - - - - - - - - Right side menu toggle - - - - - - - - - - - - Collapsible Buttons - -``` - - -### Javascript - -```html - - - - - Back Button - - - - - - - - - - - - Default Buttons - - - - - - - - - - - - - - Right side menu toggle - - - - - - - - - - - - - - - - Collapsible Buttons - -``` - - -### React - -```tsx -import React from 'react'; -import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton, IonContent } from '@ionic/react'; -import { personCircle, search, star, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons'; - -export const ButtonsExample: React.FC = () => ( - - - - - - Back Button - - - - - - - - - - - - Default Buttons - - - - - - - - - - {}}> - - - - Right side menu toggle - - - - - - - - - - - - Collapsible Buttons - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'buttons-example', - styleUrl: 'buttons-example.css' -}) -export class ButtonsExample { - - clickedStar() { - console.log("Clicked star button"); - } - - render() { - return [ - - - - - Back Button - , - - - - - - - - - - - Default Buttons - - - - - - , - - - - this.clickedStar()}> - - - - Right side menu toggle - - - - , - - - - - - - - Collapsible Buttons - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- | -| `collapse` | `collapse` | If true, buttons will disappear when its parent toolbar has fully collapsed if the toolbar is not the first toolbar. If the toolbar is the first toolbar, the buttons will be hidden and will only be shown once all toolbars have fully collapsed. Only applies in `ios` mode with `collapse` set to `true` on `ion-header`. Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) | `boolean` | `false` | - - -## Dependencies - -### Used by - - - [ion-datetime](../datetime) - -### Graph -```mermaid -graph TD; - ion-datetime --> ion-buttons - style ion-buttons fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/buttons/usage/angular.md b/core/src/components/buttons/usage/angular.md deleted file mode 100644 index 3af3e63a4d..0000000000 --- a/core/src/components/buttons/usage/angular.md +++ /dev/null @@ -1,46 +0,0 @@ -```html - - - - - Back Button - - - - - - - - - - - - Default Buttons - - - - - - - - - - - - - - Right side menu toggle - - - - - - - - - - - - Collapsible Buttons - -``` \ No newline at end of file diff --git a/core/src/components/buttons/usage/javascript.md b/core/src/components/buttons/usage/javascript.md deleted file mode 100644 index 707cfc4e16..0000000000 --- a/core/src/components/buttons/usage/javascript.md +++ /dev/null @@ -1,50 +0,0 @@ -```html - - - - - Back Button - - - - - - - - - - - - Default Buttons - - - - - - - - - - - - - - Right side menu toggle - - - - - - - - - - - - - - - - Collapsible Buttons - -``` \ No newline at end of file diff --git a/core/src/components/buttons/usage/react.md b/core/src/components/buttons/usage/react.md deleted file mode 100644 index 12e2c1b416..0000000000 --- a/core/src/components/buttons/usage/react.md +++ /dev/null @@ -1,54 +0,0 @@ -```tsx -import React from 'react'; -import { IonButtons, IonToolbar, IonBackButton, IonTitle, IonButton, IonIcon, IonMenuButton, IonContent } from '@ionic/react'; -import { personCircle, search, star, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons'; - -export const ButtonsExample: React.FC = () => ( - - - - - - Back Button - - - - - - - - - - - - Default Buttons - - - - - - - - - - {}}> - - - - Right side menu toggle - - - - - - - - - - - - Collapsible Buttons - - -); -``` \ No newline at end of file diff --git a/core/src/components/buttons/usage/stencil.md b/core/src/components/buttons/usage/stencil.md deleted file mode 100644 index e684b0c7c7..0000000000 --- a/core/src/components/buttons/usage/stencil.md +++ /dev/null @@ -1,63 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'buttons-example', - styleUrl: 'buttons-example.css' -}) -export class ButtonsExample { - - clickedStar() { - console.log("Clicked star button"); - } - - render() { - return [ - - - - - Back Button - , - - - - - - - - - - - Default Buttons - - - - - - , - - - - this.clickedStar()}> - - - - Right side menu toggle - - - - , - - - - - - - - Collapsible Buttons - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/buttons/usage/vue.md b/core/src/components/buttons/usage/vue.md deleted file mode 100644 index 388007d785..0000000000 --- a/core/src/components/buttons/usage/vue.md +++ /dev/null @@ -1,64 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/card-content/readme.md b/core/src/components/card-content/readme.md deleted file mode 100644 index 583013e0fc..0000000000 --- a/core/src/components/card-content/readme.md +++ /dev/null @@ -1,19 +0,0 @@ -# ion-card-content - -`ion-card-content` is child component of `ion-card` that adds some content padding. -It is recommended that any text content for a card should be placed in an `ion-card-content`. - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ------------------------------------------------- | --------------- | ----------- | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/card-header/readme.md b/core/src/components/card-header/readme.md deleted file mode 100644 index 14b7f8828e..0000000000 --- a/core/src/components/card-header/readme.md +++ /dev/null @@ -1,20 +0,0 @@ -# ion-card-header - -`ion-card-header` is a header component for `ion-card`. - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `translucent` | `translucent` | If `true`, the card header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/card-subtitle/readme.md b/core/src/components/card-subtitle/readme.md deleted file mode 100644 index d39509c07d..0000000000 --- a/core/src/components/card-subtitle/readme.md +++ /dev/null @@ -1,25 +0,0 @@ -# ion-card-subtitle - -`ion-card-subtitle` is a child component of `ion-card` - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | - - -## CSS Custom Properties - -| Name | Description | -| --------- | -------------------------- | -| `--color` | Color of the card subtitle | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/card-title/readme.md b/core/src/components/card-title/readme.md deleted file mode 100644 index 715832ca2f..0000000000 --- a/core/src/components/card-title/readme.md +++ /dev/null @@ -1,26 +0,0 @@ -# ion-card-title - -`ion-card-title` is a child component of `ion-card` - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | - - -## CSS Custom Properties - -| Name | Description | -| --------- | ----------------------- | -| `--color` | Color of the card title | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/card/readme.md b/core/src/components/card/readme.md deleted file mode 100644 index 68f72bef44..0000000000 --- a/core/src/components/card/readme.md +++ /dev/null @@ -1,315 +0,0 @@ -# ion-card - -Cards are a standard piece of UI that serves as an entry point to more detailed -information. A card can be a single component, but is often made up of some -header, title, subtitle, and content. `ion-card` is broken up into several -sub-components to reflect this. Please see `ion-card-content`, -`ion-card-header`, `ion-card-title`, `ion-card-subtitle`. - - - - -## Usage - -### Angular / javascript - -```html - - - Card Subtitle - Card Title - - - - Keep close to Nature's heart... and break clear away, once in awhile, - and climb a mountain or spend a week in the woods. Wash your spirit clean. - - - - - - - ion-item in a card, icon left, button right - View - - - - This is content, without any paragraph or header tags, - within an ion-card-content element. - - - - - - - Card Link Item 1 activated - - - - - Card Link Item 2 - - - - - Card Button Item 1 activated - - - - - Card Button Item 2 - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react'; -import { pin, wifi, wine, warning, walk } from 'ionicons/icons'; - -export const CardExamples: React.FC = () => { - return ( - - - - CardExamples - - - - - - Card Subtitle - Card Title - - - - Keep close to Nature's heart... and break clear away, once in awhile, - and climb a mountain or spend a week in the woods. Wash your spirit clean. - - - - - - - ion-item in a card, icon left, button right - View - - - - This is content, without any paragraph or header tags, - within an ion-cardContent element. - - - - - - - Card Link Item 1 activated - - - - - Card Link Item 2 - - - - - Card Button Item 1 activated - - - - - Card Button Item 2 - - - - - ); -}; - -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'card-example', - styleUrl: 'card-example.css' -}) -export class CardExample { - render() { - return [ - - - Card Subtitle - Card Title - - - - Keep close to Nature's heart... and break clear away, once in awhile, - and climb a mountain or spend a week in the woods. Wash your spirit clean. - - , - - - - - ion-item in a card, icon left, button right - View - - - - This is content, without any paragraph or header tags, - within an ion-card-content element. - - , - - - - - Card Link Item 1 activated - - - - - Card Link Item 2 - - - - - Card Button Item 1 activated - - - - - Card Button Item 2 - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| `button` | `button` | If `true`, a button tag will be rendered and the card will be tappable. | `boolean` | `false` | -| `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). | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the card. | `boolean` | `false` | -| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` | -| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` | -| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | -| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` | - - -## Shadow Parts - -| Part | Description | -| ---------- | ----------------------------------------------------------------------------- | -| `"native"` | The native HTML button, anchor, or div element that wraps all child elements. | - - -## CSS Custom Properties - -| Name | Description | -| -------------- | ---------------------- | -| `--background` | Background of the card | -| `--color` | Color of the card | - - -## Dependencies - -### Depends on - -- [ion-ripple-effect](../ripple-effect) - -### Graph -```mermaid -graph TD; - ion-card --> ion-ripple-effect - style ion-card fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/card/usage/angular.md b/core/src/components/card/usage/angular.md deleted file mode 100644 index d867acb0d0..0000000000 --- a/core/src/components/card/usage/angular.md +++ /dev/null @@ -1,48 +0,0 @@ -```html - - - Card Subtitle - Card Title - - - - Keep close to Nature's heart... and break clear away, once in awhile, - and climb a mountain or spend a week in the woods. Wash your spirit clean. - - - - - - - ion-item in a card, icon left, button right - View - - - - This is content, without any paragraph or header tags, - within an ion-card-content element. - - - - - - - Card Link Item 1 activated - - - - - Card Link Item 2 - - - - - Card Button Item 1 activated - - - - - Card Button Item 2 - - -``` \ No newline at end of file diff --git a/core/src/components/card/usage/javascript.md b/core/src/components/card/usage/javascript.md deleted file mode 100644 index d867acb0d0..0000000000 --- a/core/src/components/card/usage/javascript.md +++ /dev/null @@ -1,48 +0,0 @@ -```html - - - Card Subtitle - Card Title - - - - Keep close to Nature's heart... and break clear away, once in awhile, - and climb a mountain or spend a week in the woods. Wash your spirit clean. - - - - - - - ion-item in a card, icon left, button right - View - - - - This is content, without any paragraph or header tags, - within an ion-card-content element. - - - - - - - Card Link Item 1 activated - - - - - Card Link Item 2 - - - - - Card Button Item 1 activated - - - - - Card Button Item 2 - - -``` \ No newline at end of file diff --git a/core/src/components/card/usage/react.md b/core/src/components/card/usage/react.md deleted file mode 100644 index f57ea06bb2..0000000000 --- a/core/src/components/card/usage/react.md +++ /dev/null @@ -1,66 +0,0 @@ -```tsx -import React from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCard, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCardContent, IonItem, IonIcon, IonLabel, IonButton } from '@ionic/react'; -import { pin, wifi, wine, warning, walk } from 'ionicons/icons'; - -export const CardExamples: React.FC = () => { - return ( - - - - CardExamples - - - - - - Card Subtitle - Card Title - - - - Keep close to Nature's heart... and break clear away, once in awhile, - and climb a mountain or spend a week in the woods. Wash your spirit clean. - - - - - - - ion-item in a card, icon left, button right - View - - - - This is content, without any paragraph or header tags, - within an ion-cardContent element. - - - - - - - Card Link Item 1 activated - - - - - Card Link Item 2 - - - - - Card Button Item 1 activated - - - - - Card Button Item 2 - - - - - ); -}; - -``` \ No newline at end of file diff --git a/core/src/components/card/usage/stencil.md b/core/src/components/card/usage/stencil.md deleted file mode 100644 index bb2b44e398..0000000000 --- a/core/src/components/card/usage/stencil.md +++ /dev/null @@ -1,60 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'card-example', - styleUrl: 'card-example.css' -}) -export class CardExample { - render() { - return [ - - - Card Subtitle - Card Title - - - - Keep close to Nature's heart... and break clear away, once in awhile, - and climb a mountain or spend a week in the woods. Wash your spirit clean. - - , - - - - - ion-item in a card, icon left, button right - View - - - - This is content, without any paragraph or header tags, - within an ion-card-content element. - - , - - - - - Card Link Item 1 activated - - - - - Card Link Item 2 - - - - - Card Button Item 1 activated - - - - - Card Button Item 2 - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/card/usage/vue.md b/core/src/components/card/usage/vue.md deleted file mode 100644 index d2375dd85f..0000000000 --- a/core/src/components/card/usage/vue.md +++ /dev/null @@ -1,63 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md deleted file mode 100644 index 547efc81d6..0000000000 --- a/core/src/components/checkbox/readme.md +++ /dev/null @@ -1,341 +0,0 @@ -# ion-checkbox - -Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property. - -## Interfaces - -### CheckboxChangeEventDetail - -```typescript -interface CheckboxChangeEventDetail { - value: T; - checked: boolean; -} -``` - -### CheckboxCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface CheckboxCustomEvent extends CustomEvent { - detail: CheckboxChangeEventDetail; - target: HTMLIonCheckboxElement; -} -``` - - - - - -## Usage - -### Angular - -```html - - - - - - - - - - - - - - - - - - - - {{entry.val}} - - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-page-home', - templateUrl: 'home.page.html', - styleUrls: ['home.page.scss'] -}) -export class HomePage { - public form = [ - { val: 'Pepperoni', isChecked: true }, - { val: 'Sausage', isChecked: false }, - { val: 'Mushroom', isChecked: false } - ]; -} -``` - - -### Javascript - -```html - - - - - - - - - - - - - - - - - - - - Pepperoni - - - - - Sausage - - - - - Mushrooms - - - -``` - - -### React - -```tsx -import React, { useState } from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react'; - -const checkboxList = [ - { val: 'Pepperoni', isChecked: true }, - { val: 'Sausage', isChecked: false }, - { val: 'Mushroom', isChecked: false } -]; - -export const CheckboxExamples: React.FC = () => { - - const [checked, setChecked] = useState(false); - - return ( - - - - CheckboxExamples - - - - - Default Checkbox - - Checked: {JSON.stringify(checked)} - setChecked(e.detail.checked)} /> - - - Disabled Checkbox - - - Checkbox Colors - - - - - - - - Checkboxes in a List - - {checkboxList.map(({ val, isChecked }, i) => ( - - {val} - - - ))} - - - - ); -}; -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'checkbox-example', - styleUrl: 'checkbox-example.css' -}) -export class CheckboxExample { - private form = [ - { val: 'Pepperoni', isChecked: true }, - { val: 'Sausage', isChecked: false }, - { val: 'Mushroom', isChecked: false } - ]; - - render() { - return [ - // Default Checkbox - , - - // Disabled Checkbox - , - - // Checked Checkbox - , - - // Checkbox Colors - , - , - , - , - , - - // Checkboxes in a List - - {this.form.map(entry => - - {entry.val} - - - )} - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| --------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------- | -| `checked` | `checked` | If `true`, the checkbox is selected. | `boolean` | `false` | -| `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). | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the checkbox. | `boolean` | `false` | -| `indeterminate` | `indeterminate` | If `true`, the checkbox will visually appear as indeterminate. | `boolean` | `false` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | -| `value` | `value` | The value of the checkbox does not mean if it's checked or not, use the `checked` property for that. The value of a checkbox is analogous to the value of an ``, it's only used when the checkbox participates in a native `
`. | `any` | `'on'` | - - -## Events - -| Event | Description | Type | -| ----------- | ---------------------------------------------- | --------------------------------------------- | -| `ionBlur` | Emitted when the checkbox loses focus. | `CustomEvent` | -| `ionChange` | Emitted when the checked property has changed. | `CustomEvent>` | -| `ionFocus` | Emitted when the checkbox has focus. | `CustomEvent` | - - -## Shadow Parts - -| Part | Description | -| ------------- | ------------------------------------------------- | -| `"container"` | The container for the checkbox mark. | -| `"mark"` | The checkmark used to indicate the checked state. | - - -## CSS Custom Properties - -| Name | Description | -| ------------------------ | ---------------------------------------------- | -| `--background` | Background of the checkbox icon | -| `--background-checked` | Background of the checkbox icon when checked | -| `--border-color` | Border color of the checkbox icon | -| `--border-color-checked` | Border color of the checkbox icon when checked | -| `--border-radius` | Border radius of the checkbox icon | -| `--border-style` | Border style of the checkbox icon | -| `--border-width` | Border width of the checkbox icon | -| `--checkmark-color` | Color of the checkbox checkmark when checked | -| `--checkmark-width` | Stroke width of the checkbox checkmark | -| `--size` | Size of the checkbox icon | -| `--transition` | Transition of the checkbox icon | - - -## Dependencies - -### Used by - - - ion-select-popover - -### Graph -```mermaid -graph TD; - ion-select-popover --> ion-checkbox - style ion-checkbox fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/checkbox/usage/angular.md b/core/src/components/checkbox/usage/angular.md deleted file mode 100644 index 496621b648..0000000000 --- a/core/src/components/checkbox/usage/angular.md +++ /dev/null @@ -1,42 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - {{entry.val}} - - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({ - selector: 'app-page-home', - templateUrl: 'home.page.html', - styleUrls: ['home.page.scss'] -}) -export class HomePage { - public form = [ - { val: 'Pepperoni', isChecked: true }, - { val: 'Sausage', isChecked: false }, - { val: 'Mushroom', isChecked: false } - ]; -} -``` diff --git a/core/src/components/checkbox/usage/javascript.md b/core/src/components/checkbox/usage/javascript.md deleted file mode 100644 index ec86e6d61b..0000000000 --- a/core/src/components/checkbox/usage/javascript.md +++ /dev/null @@ -1,35 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - Pepperoni - - - - - Sausage - - - - - Mushrooms - - - -``` diff --git a/core/src/components/checkbox/usage/react.md b/core/src/components/checkbox/usage/react.md deleted file mode 100644 index 1b53de6ef7..0000000000 --- a/core/src/components/checkbox/usage/react.md +++ /dev/null @@ -1,54 +0,0 @@ -```tsx -import React, { useState } from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonCheckbox, IonList, IonItem, IonLabel, IonItemDivider } from '@ionic/react'; - -const checkboxList = [ - { val: 'Pepperoni', isChecked: true }, - { val: 'Sausage', isChecked: false }, - { val: 'Mushroom', isChecked: false } -]; - -export const CheckboxExamples: React.FC = () => { - - const [checked, setChecked] = useState(false); - - return ( - - - - CheckboxExamples - - - - - Default Checkbox - - Checked: {JSON.stringify(checked)} - setChecked(e.detail.checked)} /> - - - Disabled Checkbox - - - Checkbox Colors - - - - - - - - Checkboxes in a List - - {checkboxList.map(({ val, isChecked }, i) => ( - - {val} - - - ))} - - - - ); -}; -``` \ No newline at end of file diff --git a/core/src/components/checkbox/usage/stencil.md b/core/src/components/checkbox/usage/stencil.md deleted file mode 100644 index 42599e313a..0000000000 --- a/core/src/components/checkbox/usage/stencil.md +++ /dev/null @@ -1,45 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'checkbox-example', - styleUrl: 'checkbox-example.css' -}) -export class CheckboxExample { - private form = [ - { val: 'Pepperoni', isChecked: true }, - { val: 'Sausage', isChecked: false }, - { val: 'Mushroom', isChecked: false } - ]; - - render() { - return [ - // Default Checkbox - , - - // Disabled Checkbox - , - - // Checked Checkbox - , - - // Checkbox Colors - , - , - , - , - , - - // Checkboxes in a List - - {this.form.map(entry => - - {entry.val} - - - )} - - ]; - } -} -``` diff --git a/core/src/components/checkbox/usage/vue.md b/core/src/components/checkbox/usage/vue.md deleted file mode 100644 index e11fe21342..0000000000 --- a/core/src/components/checkbox/usage/vue.md +++ /dev/null @@ -1,49 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/chip/readme.md b/core/src/components/chip/readme.md deleted file mode 100644 index 0890658c2f..0000000000 --- a/core/src/components/chip/readme.md +++ /dev/null @@ -1,336 +0,0 @@ -# ion-chip - -Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons. - - - - -## Usage - -### Angular - -```html - - Default - - - - Secondary Label - - - - Secondary w/ Dark label - - - - Disabled Chip - - - - - Default - - - - - Default - - - - Button Chip - - - - - - Icon Chip - - - - - - - - Avatar Chip - - -``` - - -### Javascript - -```html - - Default - - - - Secondary Label - - - - Secondary w/ Dark label - - - - Disabled Chip - - - - - Default - - - - - Default - - - - Button Chip - - - - - - Icon Chip - - - - - - - - Avatar Chip - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonChip, IonLabel, IonIcon, IonAvatar } from '@ionic/react'; -import { pin, heart, closeCircle, close } from 'ionicons/icons'; - -export const ChipExamples: React.FC = () => { - return ( - - - - ChipExamples - - - - - Default - - - - Secondary Label - - - - Secondary w/ Dark label - - - - Disabled Chip - - - - - Default - - - - - Default - - - - Button Chip - - - - - - Icon Chip - - - - - - - - Avatar Chip - - - - - ); -}; - -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'chip-example', - styleUrl: 'chip-example.css' -}) -export class ChipExample { - render() { - return [ - - Default - , - - - Secondary Label - , - - - Secondary w/ Dark label - , - - - - Default - , - - - - Default - , - - - Button Chip - - , - - - - Icon Chip - - , - - - - - - Avatar Chip - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the chip. | `boolean` | `false` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `outline` | `outline` | Display an outline style button. | `boolean` | `false` | - - -## CSS Custom Properties - -| Name | Description | -| -------------- | ---------------------- | -| `--background` | Background of the chip | -| `--color` | Color of the chip | - - -## Dependencies - -### Depends on - -- [ion-ripple-effect](../ripple-effect) - -### Graph -```mermaid -graph TD; - ion-chip --> ion-ripple-effect - style ion-chip fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/chip/usage/angular.md b/core/src/components/chip/usage/angular.md deleted file mode 100644 index 48f6e11bb3..0000000000 --- a/core/src/components/chip/usage/angular.md +++ /dev/null @@ -1,46 +0,0 @@ -```html - - Default - - - - Secondary Label - - - - Secondary w/ Dark label - - - - Disabled Chip - - - - - Default - - - - - Default - - - - Button Chip - - - - - - Icon Chip - - - - - - - - Avatar Chip - - -``` diff --git a/core/src/components/chip/usage/javascript.md b/core/src/components/chip/usage/javascript.md deleted file mode 100644 index 0a0d5ba2c3..0000000000 --- a/core/src/components/chip/usage/javascript.md +++ /dev/null @@ -1,46 +0,0 @@ -```html - - Default - - - - Secondary Label - - - - Secondary w/ Dark label - - - - Disabled Chip - - - - - Default - - - - - Default - - - - Button Chip - - - - - - Icon Chip - - - - - - - - Avatar Chip - - -``` diff --git a/core/src/components/chip/usage/react.md b/core/src/components/chip/usage/react.md deleted file mode 100644 index 9d049bbc72..0000000000 --- a/core/src/components/chip/usage/react.md +++ /dev/null @@ -1,64 +0,0 @@ -```tsx -import React from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonChip, IonLabel, IonIcon, IonAvatar } from '@ionic/react'; -import { pin, heart, closeCircle, close } from 'ionicons/icons'; - -export const ChipExamples: React.FC = () => { - return ( - - - - ChipExamples - - - - - Default - - - - Secondary Label - - - - Secondary w/ Dark label - - - - Disabled Chip - - - - - Default - - - - - Default - - - - Button Chip - - - - - - Icon Chip - - - - - - - - Avatar Chip - - - - - ); -}; - -``` diff --git a/core/src/components/chip/usage/stencil.md b/core/src/components/chip/usage/stencil.md deleted file mode 100644 index 79e9156813..0000000000 --- a/core/src/components/chip/usage/stencil.md +++ /dev/null @@ -1,54 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'chip-example', - styleUrl: 'chip-example.css' -}) -export class ChipExample { - render() { - return [ - - Default - , - - - Secondary Label - , - - - Secondary w/ Dark label - , - - - - Default - , - - - - Default - , - - - Button Chip - - , - - - - Icon Chip - - , - - - - - - Avatar Chip - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/chip/usage/vue.md b/core/src/components/chip/usage/vue.md deleted file mode 100644 index a6f6f2783d..0000000000 --- a/core/src/components/chip/usage/vue.md +++ /dev/null @@ -1,62 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/col/readme.md b/core/src/components/col/readme.md deleted file mode 100644 index ba3ec46303..0000000000 --- a/core/src/components/col/readme.md +++ /dev/null @@ -1,62 +0,0 @@ -# ion-col - -Columns are cellular components of the [grid](../grid) system and go inside of a [row](../row). -They will expand to fill their row. All content within a grid should go inside of a column. - -See [Grid Layout](/docs/layout/grid) for more information. - - -## Column Alignment - -By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior. - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- | -| `offset` | `offset` | The amount to offset the column, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` | -| `offsetLg` | `offset-lg` | The amount to offset the column for lg screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` | -| `offsetMd` | `offset-md` | The amount to offset the column for md screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` | -| `offsetSm` | `offset-sm` | The amount to offset the column for sm screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` | -| `offsetXl` | `offset-xl` | The amount to offset the column for xl screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` | -| `offsetXs` | `offset-xs` | The amount to offset the column for xs screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` | -| `pull` | `pull` | The amount to pull the column, in terms of how many columns it should shift to the start of the total available. | `string \| undefined` | `undefined` | -| `pullLg` | `pull-lg` | The amount to pull the column for lg screens, in terms of how many columns it should shift to the start of the total available. | `string \| undefined` | `undefined` | -| `pullMd` | `pull-md` | The amount to pull the column for md screens, in terms of how many columns it should shift to the start of the total available. | `string \| undefined` | `undefined` | -| `pullSm` | `pull-sm` | The amount to pull the column for sm screens, in terms of how many columns it should shift to the start of the total available. | `string \| undefined` | `undefined` | -| `pullXl` | `pull-xl` | The amount to pull the column for xl screens, in terms of how many columns it should shift to the start of the total available. | `string \| undefined` | `undefined` | -| `pullXs` | `pull-xs` | The amount to pull the column for xs screens, in terms of how many columns it should shift to the start of the total available. | `string \| undefined` | `undefined` | -| `push` | `push` | The amount to push the column, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` | -| `pushLg` | `push-lg` | The amount to push the column for lg screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` | -| `pushMd` | `push-md` | The amount to push the column for md screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` | -| `pushSm` | `push-sm` | The amount to push the column for sm screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` | -| `pushXl` | `push-xl` | The amount to push the column for xl screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` | -| `pushXs` | `push-xs` | The amount to push the column for xs screens, in terms of how many columns it should shift to the end of the total available. | `string \| undefined` | `undefined` | -| `size` | `size` | The size of the column, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` | -| `sizeLg` | `size-lg` | The size of the column for lg screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` | -| `sizeMd` | `size-md` | The size of the column for md screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` | -| `sizeSm` | `size-sm` | The size of the column for sm screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` | -| `sizeXl` | `size-xl` | The size of the column for xl screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` | -| `sizeXs` | `size-xs` | The size of the column for xs screens, in terms of how many columns it should take up out of the total available. If `"auto"` is passed, the column will be the size of its content. | `string \| undefined` | `undefined` | - - -## CSS Custom Properties - -| Name | Description | -| ------------------------------ | ------------------------------------------- | -| `--ion-grid-column-padding` | Padding for the Column | -| `--ion-grid-column-padding-lg` | Padding for the Column on lg screens and up | -| `--ion-grid-column-padding-md` | Padding for the Column on md screens and up | -| `--ion-grid-column-padding-sm` | Padding for the Column on sm screens and up | -| `--ion-grid-column-padding-xl` | Padding for the Column on xl screens and up | -| `--ion-grid-column-padding-xs` | Padding for the Column on xs screens and up | -| `--ion-grid-columns` | The number of total Columns in the Grid | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md deleted file mode 100644 index f1d3fe671f..0000000000 --- a/core/src/components/content/readme.md +++ /dev/null @@ -1,303 +0,0 @@ -# ion-content - -The content component provides an easy to use content area with some useful methods -to control the scrollable area. There should only be one content in a single -view. - -Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). - - -## Fixed Content - -In order to place elements outside of the scrollable area, `slot="fixed"` can be added to the element. This will absolutely position the element placing it in the top left. In order to place the element in a different position, style it using [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position). - -## Interfaces - -### ScrollBaseDetail - -```typescript -interface ScrollBaseDetail { - isScrolling: boolean; -} -``` - -### ScrollDetail - -```typescript -interface ScrollDetail extends GestureDetail, ScrollBaseDetail { - scrollTop: number; - scrollLeft: number; -} -``` - -### ScrollBaseCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScrollStart` and `ionScrollEnd` events. - -```typescript -interface ScrollBaseCustomEvent extends CustomEvent { - detail: ScrollBaseDetail; - target: HTMLIonContentElement; -} -``` - -### ScrollCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScroll` event. - -```typescript -interface ScrollCustomEvent extends ScrollBaseCustomEvent { - detail: ScrollDetail; -} -``` - - - - - -## Usage - -### Angular - -```html - -

Main Content

- -
-

Fixed Content

-
- -``` - - -### Javascript - -```html - -

Main Content

- -
-

Fixed Content

-
- -``` - -```javascript -var content = document.querySelector('ion-content'); -content.scrollEvents = true; -content.addEventListener('ionScrollStart', () => console.log('scroll start')); -content.addEventListener('ionScroll', (ev) => console.log('scroll', ev.detail)); -content.addEventListener('ionScrollEnd', () => console.log('scroll end')); -``` - - -### React - -```tsx -import React from 'react'; -import { IonContent } from '@ionic/react'; - -const ContentExample: React.FC = () => ( - {}} - onIonScroll={() => {}} - onIonScrollEnd={() => {}}> -

Main Content

- -
-

Fixed Content

-
- -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'content-example', - styleUrl: 'content-example.css' -}) -export class ContentExample { - logScrollStart() { - console.log('Scroll start'); - } - - logScrolling(ev) { - console.log('Scrolling', ev); - } - - logScrollEnd() { - console.log('Scroll end'); - } - - render() { - return [ - this.logScrollStart()} - onIonScroll={(ev) => this.logScrolling(ev)} - onIonScrollEnd={() => this.logScrollEnd()}> -

Main Content

- -
-

Fixed Content

-
- - ]; - } -} -``` - - -### Vue - -```html - - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `forceOverscroll` | `force-overscroll` | If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce. If the content exceeds the bounds of ionContent, nothing will change. Note, the does not disable the system bounce on iOS. That is an OS level setting. | `boolean \| undefined` | `undefined` | -| `fullscreen` | `fullscreen` | If `true`, the content will scroll behind the headers and footers. This effect can easily be seen by setting the toolbar to transparent. | `boolean` | `false` | -| `scrollEvents` | `scroll-events` | Because of performance reasons, ionScroll events are disabled by default, in order to enable them and start listening from (ionScroll), set this property to `true`. | `boolean` | `false` | -| `scrollX` | `scroll-x` | If you want to enable the content scrolling in the X axis, set this property to `true`. | `boolean` | `false` | -| `scrollY` | `scroll-y` | If you want to disable the content scrolling in the Y axis, set this property to `false`. | `boolean` | `true` | - - -## Events - -| Event | Description | Type | -| ---------------- | ------------------------------------------------------------------------------------------------ | ------------------------------- | -| `ionScroll` | Emitted while scrolling. This event is disabled by default. Look at the property: `scrollEvents` | `CustomEvent` | -| `ionScrollEnd` | Emitted when the scroll has ended. | `CustomEvent` | -| `ionScrollStart` | Emitted when the scroll has started. | `CustomEvent` | - - -## Methods - -### `getScrollElement() => Promise` - -Get the element where the actual scrolling takes place. -This element can be used to subscribe to `scroll` events or manually modify -`scrollTop`. However, it's recommended to use the API provided by `ion-content`: - -i.e. Using `ionScroll`, `ionScrollStart`, `ionScrollEnd` for scrolling events -and `scrollToPoint()` to scroll the content into a certain point. - -#### Returns - -Type: `Promise` - - - -### `scrollByPoint(x: number, y: number, duration: number) => Promise` - -Scroll by a specified X/Y distance in the component. - -#### Returns - -Type: `Promise` - - - -### `scrollToBottom(duration?: number) => Promise` - -Scroll to the bottom of the component. - -#### Returns - -Type: `Promise` - - - -### `scrollToPoint(x: number | undefined | null, y: number | undefined | null, duration?: number) => Promise` - -Scroll to a specified X/Y location in the component. - -#### Returns - -Type: `Promise` - - - -### `scrollToTop(duration?: number) => Promise` - -Scroll to the top of the component. - -#### Returns - -Type: `Promise` - - - - -## Slots - -| Slot | Description | -| --------- | -------------------------------------------------------------------- | -| | Content is placed in the scrollable area if provided without a slot. | -| `"fixed"` | Should be used for fixed content that should not scroll. | - - -## Shadow Parts - -| Part | Description | -| -------------- | ---------------------------------------- | -| `"background"` | The background of the content. | -| `"scroll"` | The scrollable container of the content. | - - -## CSS Custom Properties - -| Name | Description | -| ------------------- | ---------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the content | -| `--color` | Color of the content | -| `--keyboard-offset` | Keyboard offset of the content | -| `--offset-bottom` | Offset bottom of the content | -| `--offset-top` | Offset top of the content | -| `--padding-bottom` | Bottom padding of the content | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the content | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the content | -| `--padding-top` | Top padding of the content | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/content/usage/angular.md b/core/src/components/content/usage/angular.md deleted file mode 100644 index 70e89fc787..0000000000 --- a/core/src/components/content/usage/angular.md +++ /dev/null @@ -1,14 +0,0 @@ -```html - -

Main Content

- -
-

Fixed Content

-
- -``` - diff --git a/core/src/components/content/usage/javascript.md b/core/src/components/content/usage/javascript.md deleted file mode 100644 index a5bf238c15..0000000000 --- a/core/src/components/content/usage/javascript.md +++ /dev/null @@ -1,17 +0,0 @@ -```html - -

Main Content

- -
-

Fixed Content

-
- -``` - -```javascript -var content = document.querySelector('ion-content'); -content.scrollEvents = true; -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/core/src/components/content/usage/react.md b/core/src/components/content/usage/react.md deleted file mode 100644 index f023254a34..0000000000 --- a/core/src/components/content/usage/react.md +++ /dev/null @@ -1,18 +0,0 @@ -```tsx -import React from 'react'; -import { IonContent } from '@ionic/react'; - -const ContentExample: React.FC = () => ( - {}} - onIonScroll={() => {}} - onIonScrollEnd={() => {}}> -

Main Content

- -
-

Fixed Content

-
- -); -``` diff --git a/core/src/components/content/usage/stencil.md b/core/src/components/content/usage/stencil.md deleted file mode 100644 index e39a358cbb..0000000000 --- a/core/src/components/content/usage/stencil.md +++ /dev/null @@ -1,37 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'content-example', - styleUrl: 'content-example.css' -}) -export class ContentExample { - logScrollStart() { - console.log('Scroll start'); - } - - logScrolling(ev) { - console.log('Scrolling', ev); - } - - logScrollEnd() { - console.log('Scroll end'); - } - - render() { - return [ - this.logScrollStart()} - onIonScroll={(ev) => this.logScrolling(ev)} - onIonScrollEnd={() => this.logScrollEnd()}> -

Main Content

- -
-

Fixed Content

-
- - ]; - } -} -``` diff --git a/core/src/components/content/usage/vue.md b/core/src/components/content/usage/vue.md deleted file mode 100644 index 5c7bb00a1b..0000000000 --- a/core/src/components/content/usage/vue.md +++ /dev/null @@ -1,26 +0,0 @@ -```html - - - - -``` - diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md deleted file mode 100644 index 6a5d86d36c..0000000000 --- a/core/src/components/datetime/readme.md +++ /dev/null @@ -1,1151 +0,0 @@ -# ion-datetime - -Datetimes present a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native `input` elements of `datetime-local`, however, Ionic Framework's Datetime component makes it easy to display the date and time in the preferred format, and manage the datetime values. - -### Datetime Data - -Historically, handling datetime values within JavaScript, or even within HTML -inputs, has always been a challenge. Specifically, JavaScript's `Date` object is -notoriously difficult to correctly parse apart datetime strings or to format -datetime values. Even worse is how different browsers and JavaScript versions -parse various datetime strings differently, especially per locale. - -Fortunately, Ionic Framework's datetime input has been designed so developers can avoid -the common pitfalls, allowing developers to easily manipulate datetime values and give the user a simple datetime picker for a great user experience. - -##### ISO 8601 Datetime Format: YYYY-MM-DDTHH:mmZ - -Ionic Framework uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) -for its value. The value is simply a string, rather than using JavaScript's -`Date` object. Using the ISO datetime format makes it easy to serialize -and parse within JSON objects and databases. - -An ISO format can be used as a simple year, or just the hour and minute, or get -more detailed down to the millisecond and time zone. Any of the ISO formats below -can be used, and after a user selects a new value, Ionic Framework will continue to use -the same ISO format which datetime value was originally given as. - -| Description | Format | Datetime Value Example | -| -------------------- | ---------------------- | ---------------------------- | -| Year | YYYY | 1994 | -| Year and Month | YYYY-MM | 1994-12 | -| Complete Date | YYYY-MM-DD | 1994-12-15 | -| Date and Time | YYYY-MM-DDTHH:mm | 1994-12-15T13:47 | -| UTC Timezone | YYYY-MM-DDTHH:mm:ssZ | 1994-12-15T13:47:20Z | -| Timezone Offset | YYYY-MM-DDTHH:mm:ssTZD | 1994-12-15T13:47:20+05:00 | -| Hour and Minute | HH:mm | 13:47 | -| Hour, Minute, Second | HH:mm:ss | 13:47:20 | - -Note that the year is always four-digits, milliseconds (if it's added) is always -three-digits, and all others are always two-digits. So the number representing -January always has a leading zero, such as `01`. Additionally, the hour is -always in the 24-hour format, so `00` is `12am` on a 12-hour clock, `13` means -`1pm`, and `23` means `11pm`. - -## Min and Max Datetimes - -Dates are infinite in either direction, so for a user's selection there should be at least some form of restricting the dates that can be selected. By default, the maximum date is to the end of the current year, and the minimum date is from the beginning of the year that was 100 years ago. - -To customize the minimum and maximum datetime values, the `min` and `max` component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user. By passing `2016` to the `min` property and `2020-10-31` to the `max` property, the datetime will restrict the date selection between the beginning of `2016`, and `October 31st of 2020`. - -## Selecting Specific Values - -While the `min` and `max` properties allow you to restrict date selection to a certain range, the `monthValues`, `dayValues`, `yearValues`, `hourValues`, and `minuteValues` properties allow you choose specific days and times that you to have enabled. - -For example, if we wanted users to only select minutes in increments of 15, we could pass `"0,15,30,45"` to the `minuteValues` property. - -As another example, if we wanted users to only select from the month of October, we could pass `"10"` to the `monthValues` property. - -## Customizing Date and Time Presentation - -Some use cases may call for only date selection or only time selection. The `presentation` property allows you to specify which pickers to show and the order to show them in. For example, `presentation="time"` would only show the time picker. `presentation="time-date"` would show the time picker first and the date picker second, but `presentation="date-time"` would show the date picker first and the time picker second. - -## Reset and Cancel Buttons - -`ion-datetime` provides `cancel` and `reset` methods that you can call when clicking on custom buttons that you have provided in the `buttons` slot. The `reset` method also allows you to provide a date to reset the datetime to. - -## Confirming Selected Values - -By default, `ionChange` is emitted with the new datetime value whenever a new date is selected. To require user confirmation before emitting `ionChange`, you can either set the `showDefaultButtons` property to `true` or use the `buttons` slot to pass in a custom confirmation button. When passing in custom buttons, the confirm button must call the `confirm` method on `ion-datetime` for `ionChange` to be emitted. - -## Localization - -Ionic Framework makes use of the [Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web API which allows us to automatically localize the month and day names according to the language and region set on the user's device. - -For instances where you need a specific locale, you can use the `locale` property to set it. The following example sets the language to "French" and the region to "France": - -```html - -``` - -### Controlling the Hour Cycle - -`ion-datetime` will use the hour cycle that is specified by the `locale` property by default. For example, if `locale` is set to `en-US`, then `ion-datetime` will use a 12 hour cycle. - -There are 4 primary hour cycle types: - -| Hour cycle type | Description | -| --------------- | ------------------------------------------------------------ | -| `'h12` | Hour system using 1–12; corresponds to 'h' in patterns. The 12 hour clock, with midnight starting at 12:00 am. | -| `'h23'` | Hour system using 0–23; corresponds to 'H' in patterns. The 24 hour clock, with midnight starting at 0:00. | -| `'h11'` | Hour system using 0–11; corresponds to 'K' in patterns. The 12 hour clock, with midnight starting at 0:00 am. | -| `'h24'` | Hour system using 1–24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00. | - -> Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle - -There may be scenarios where you need to have more control over which hour cycle is used. This is where the `hourCycle` property can help. - -In the following example, we can use the `hourCycle` property to force `ion-datetime` to use the 12 hour cycle even though the locale is `en-GB`, which uses a 24 hour cycle by default: - -```html - -``` - -`ion-datetime` also supports [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale). These tags let you encode information about the locale in the locale string itself. Developers may prefer to use the extension tag approach if they are using the [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) in their apps. - -For example, if you wanted to use a 12 hour cycle with the `en-GB` locale, you could alternatively do: - -```html - -``` - -`ion-datetime` currently supports the `h12` and `h23` hour cycle types. Interested in seeing support for `h11` and `h24` added to `ion-datetime`? [Let us know!](https://github.com/ionic-team/ionic-framework/issues/23750) - -### Setting the First Day of the Week - -For `ion-datetime`, the default first day of the week is Sunday. As of 2021, there is no browser API that lets Ionic automatically determine the first day of the week based on a device's locale, though there is on-going work regarding this (see: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6)). - -To customize the first day of the week, developers can use the `firstDayOfWeek` property. This property takes in a number between `0` and `6` where `0` represents Sunday and `6` represents Saturday. - -For example, if you wanted to have the first day of the week be Monday, you could set `firstDayOfWeek` to `1`: - -```html - -``` - -## Time Zones - -Ionic's `ion-datetime` follows the [datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) behavior of not manipulating or setting the time zone inside of a datetime control. In other words, a time value of "07:00" will not be adjusted according to different time zones. - -We recommend using a library such as [date-fns-tz](https://github.com/marnusw/date-fns-tz) to convert a datetime value to the desired time zone. - -Below is an example of formatting an ISO-8601 string to display in the time zone set on a user's device: - -```typescript -import { format, utcToZonedTime } from 'date-fns-tz'; - -// Get the time zone set on the user's device -const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone; - -// Create a date object from a UTC date string -const date = new Date('2014-10-25T10:46:20Z'); - -// Use date-fns-tz to convert from UTC to a zoned time -const zonedTime = dateFnsTz.utcToZonedTime(date, userTimeZone); - -// Create a formatted string from the zoned time -format(zonedTime, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone: userTimeZone }); -``` - -### Parsing Date Values - -The `ionChange` event will emit the date value as an ISO-8601 string in the event payload. It is the developer's responsibility to format it based on their application needs. We recommend using [date-fns](https://date-fns.org) to format the date value. - -Below is an example of formatting an ISO-8601 string to display the month, date and year: - -```typescript -import { format, parseISO } from 'date-fns'; - -/** - * This is provided in the event - * payload from the `ionChange` event. - * - * The value is an ISO-8601 date string. - */ -const dateFromIonDatetime = '2021-06-04T14:23:00-04:00'; -const formattedString = format(parseISO(dateFromIonDatetime), 'MMM d, yyyy'); - -console.log(formattedString); // Jun 4, 2021 -``` - -See https://date-fns.org/docs/format for a list of all the valid format tokens. - -## Disabling Dates - -With the `isDateEnabled` property, developers can customize the `ion-datetime` to disable a specific day, range of dates, weekends or any custom rule using an ISO 8601 date string. - -The `isDateEnabled` property accepts a function returning a boolean, indicating if a date is enabled. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank. - -```html - - - -``` - -### Disabling a specific date - -```js -isDateEnabled(dateIsoString) { - const date = new Date(dateIsoString); - if (date.getUTCFullYear() === 2022 - && date.getUTCMonth() === 0 - && date.getUTCDate() === 1) { - // Disables January 1, 2022 - return false; - } - return true; -} -``` - -### Disabling weekends - -```js -isDateEnabled(dateIsoString) { - const date = new Date(dateIsoString); - if (date.getUTCDay() === 0 && date.getUTCDay() === 6) { - // Disables Saturday and Sunday - return false; - } - return true; -} -``` - -### Usage with date-fns - -Developers can also use the available functions from `date-fns` to disable dates. - -```ts -import { isMonday } from 'date-fns'; - -isDateEnabled(dateIsoString) { - if (isMonday(new Date(dateIsoString))) { - // Disables Monday - return false; - } - return true; -} -``` - -## Advanced Datetime Validation and Manipulation - -The datetime picker provides the simplicity of selecting an exact format, and -persists the datetime values as a string using the standardized [ISO 8601 -datetime format](https://www.w3.org/TR/NOTE-datetime). However, it's important -to note that `ion-datetime` does not attempt to solve all situations when -validating and manipulating datetime values. If datetime values need to be -parsed from a certain format, or manipulated (such as adding 5 days to a date, -subtracting 30 minutes, etc.), or even formatting data to a specific locale, -then we highly recommend using [date-fns](https://date-fns.org) to work with -dates in JavaScript. - -## Accessibility - -### Keyboard Navigation - -`ion-datetime` has full keyboard support for navigating between focusable elements inside of the component. The following table details what each key does: - -| Key | Function | -| ------------------ | ------------------------------------------------------------ | -| `Tab` | Moves focus to the next focusable element. | -| `Shift` + `Tab` | Moves focus to the previous focusable element. | -| `Space` or `Enter` | Clicks the focusable element. | - -#### Date Grid - -| Key | Function | -| ------------------ | ------------------------------------------------------------ | -| `ArrowUp` | Moves focus to the same day of the previous week. | -| `ArrowDown` | Moves focus to the same day of the next week. | -| `ArrowRight` | Moves focus to the next day. | -| `ArrowLeft` | Moves focus to the previous day. | -| `Home` | Moves focus to the first day of the current week. | -| `End` | Moves focus to the last day of the current week. | -| `PageUp` | Changes the grid of dates to the previous month. | -| `PageDown` | Changes the grid of dates to the next month. | -| `Shift` + `PageUp` | Changes the grid of dates to the previous year. | -| `Shift` + `PageDown` | Changes the grid of dates to the next year. | - -#### Time, Month, and Year Wheels - -When using the time wheel picker, you can use the number keys to select hour and minute values when the columns are focused. - -| Key | Function | -| ------------------ | ------------------------------------------------------------ | -| `ArrowUp` | Scroll to the previous item. | -| `ArrowDown` | Scroll to the next item. | -| `Home` | Scroll to the first item. | -| `End` | Scroll to the last item. | - -## Interfaces - -### DatetimeChangeEventDetail - -```typescript -interface DatetimeChangeEventDetail { - value?: string | null; -} -``` - -### DatetimeCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface DatetimeCustomEvent extends CustomEvent { - detail: DatetimeChangeEventDetail; - target: HTMLIonDatetimeElement; -} -``` - - - - -## Usage - -### Angular - -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
My Custom Title
- - - - - - - - - -Open Datetime Modal - - - - - - - - - - - - Good to go! - Reset - - - - - - Date - {{ dateValue }} - - - - - - - - - - - - - - - - - - - -``` - -```typescript -import { Component, ViewChild } from '@angular/core'; -import { IonDatetime } from '@ionic/angular'; -import { format, parseISO, getDate, getMonth, getYear } from 'date-fns'; - -@Component({…}) -export class MyComponent { - @ViewChild(IonDatetime, { static: true }) datetime: IonDatetime; - - dateValue = ''; - dateValue2 = ''; - - constructor() {} - - confirm() { - this.datetime.nativeEl.confirm(); - } - - reset() { - this.datetime.nativeEl.reset(); - } - - formatDate(value: string) { - return format(parseISO(value), 'MMM dd yyyy'); - } - - isDateEnabled(dateIsoString: string) { - const date = new Date(dateIsoString); - if (getDate(date) === 1 && getMonth(date) === 0 && getYear(date) === 2022) { - // Disables January 1, 2022. - return false; - } - return true; - } -} -``` - - -### Javascript - -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
My Custom Title
- - - - - - - - - Good to go! - Reset - - - - - - - -Open Datetime Modal - - - - - - - - - Date - - - - - - - - - - - - - - - - -``` - -```javascript -import { format, parseISO, getDate, getMonth, getYear } from 'date-fns'; - -const datetime = document.querySelector('#custom-datetime'); - -const confirm = () => { - datetime.confirm(); -}; - -const reset = () => { - datetime.reset(); -}; - -const formatDate = (value: string) => { - return format(parseISO(value), 'MMM dd yyyy'); -}; - -const isDateEnabled = (dateIsoString: string) => { - const date = new Date(dateIsoString); - if (getDate(date) === 1 && getMonth(date) === 0 && getYear(date) === 2022) { - // Disables January 1, 2022. - return false; - } - return true; -}; - -const disabledDateDatetime = document.querySelector('#disabled-date-datetime'); -disabledDateDatetime.isDateEnabled = isDateEnabled; - -const popoverDatetime = document.querySelector('#popover-datetime'); -const dateInput = document.querySelector('#date-input'); -popoverDatetime.addEventListener('ionChange', ev => dateInput.innerText = formatDate(ev.detail.value)); - -const popoverDatetime2 = document.querySelector('#popover-datetime-2'); -const dateInput2 = document.querySelector('#date-input-2'); -popoverDatetime2.addEventListener('ionChange', ev => dateInput2.value = formatDate(ev.detail.value)); -``` - - -### React - -```javascript -import React, { useState, useRef } from 'react'; -import { - IonButton, - IonButtons, - IonContent, - IonDatetime, - IonInput, - IonItem, - IonModal, - IonPage, - IonPopover -} from '@ionic/react'; -import { calendar } from 'ionicons/icons'; -import { format, parseISO, getDate, getMonth, getYear } from 'date-fns'; - -export const DateTimeExamples: React.FC = () => { - const [selectedDate, setSelectedDate] = useState('2012-12-15T13:47:20.789'); - const [popoverDate, setPopoverDate] = useState(''); - const [popoverDate2, setPopoverDate2] = useState(''); - - const customDatetime = useRef(); - const confirm = () => { - if (customDatetime === undefined) return; - - customDatetime.confirm(); - }; - - const reset = () => { - if (customDatetime === undefined) return; - - customDatetime.reset(); - }; - - const formatDate = (value: string) => { - return format(parseISO(value), 'MMM dd yyyy'); - }; - - return ( - - {/* Initial value */} - setSelectedDate(e.detail.value!)}> - - {/* Readonly */} - - - {/* Disabled */} - - - {/* Custom locale */} - - - {/* Max and min */} - - - {/* 15 minute increments */} - - - {/* Specific days/months/years */} - - - {/* Selecting time, no date */} - - - {/* Selecting time first, date second */} - - - {/* Full width size */} - - - {/* Custom Hour Cycle */} - - - {/* Custom first day of week */} - - - {/* Custom title */} - -
My Custom Title
- - - {/* Clear button */} - - - {/* Custom buttons */} - - - confirm()}>Good to go! - reset()}>Reset - - - - {/* Disable custom days */} - { - const date = new Date(dateIsoString); - if (getDate(date) === 1 && getMonth(date) === 0 && getYear(date) === 2022) { - // Disables January 1, 2022. - return false; - } - return true; - }}> - - {/* Datetime in overlay */} - Open Datetime Modal - - - - - - - {/* Datetime in popover with cover element */} - - Date - {popoverDate} - - setPopoverDate(formatDate(ev.detail.value!))} - /> - - - - {/* Datetime in popover with input */} - - - - - - - setPopoverDate2(formatDate(ev.detail.value!))} - /> - - - - ) -} -``` - - -### Stencil - -```javascript -import { Component, h } from '@stencil/core'; -import { format, parseISO, getDate, getMonth, getYear } from 'date-fns'; - -@Component({ - tag: 'datetime-example', - styleUrl: 'datetime-example.css' -}) -export class DatetimeExample { - private customDatetime?: HTMLElement; - private dateInput?: HTMLElement; - private dateInput2?: HTMLElement; - - private confirm() { - const { customDatetime } = this; - if (customDatetime === undefined) return; - - customDatetime.confirm(); - } - - private reset() { - const { customDatetime } = this; - if (customDatetime === undefined) return; - - customDatetime.reset(); - } - - private formatDate(value: string) { - return format(parseISO(value), 'MMM dd yyyy'); - } - - render() { - return [ - {/* Initial value */} - , - - {/* Readonly */} - , - - {/* Disabled */} - , - - {/* Custom locale */} - , - - {/* Max and min */} - , - - {/* 15 minute increments */} - , - - {/* Specific days/months/years */} - , - - {/* Selecting time, no date */} - , - - {/* Selecting time first, date second */} - , - - {/* Full width size */} - , - - {/* Custom Hour Cycle */} - , - - {/* Custom first day of week */} - , - - {/* Custom title */} - -
My Custom Title
- , - - {/* Clear button */} - - - {/* Custom buttons */} - this.customDatetime = el}> - - this.confirm()}>Good to go! - this.reset()}>Reset - - - - {/* Disable custom days */} - { - const date = new Date(dateIsoString); - if (getDate(date) === 1 && getMonth(date) === 0 && getYear(date) === 2022) { - // Disables January 1, 2022. - return false; - } - return true; - }}> - - {/* Datetime in overlay */} - Open Datetime Modal - - - - - - - {/* Datetime in popover with cover element */} - - Date - this.dateInput = el}> - - this.dateInput.innerText = formatDate(ev.detail.value)} - /> - - - - {/* Datetime in popover with input */} - - this.dateInput2 = el}> - - - - - this.dateInput2.value = formatDate(ev.detail.value)} - /> - - - ] - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------------------- | ------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | -------------- | -| `cancelText` | `cancel-text` | The text to display on the picker's cancel button. | `string` | `'Cancel'` | -| `clearText` | `clear-text` | The text to display on the picker's "Clear" button. | `string` | `'Clear'` | -| `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). | `string \| undefined` | `'primary'` | -| `dayValues` | `day-values` | Values used to create the list of selectable days. By default every day is shown for the given month. However, to control exactly which days of the month to display, the `dayValues` input can take a number, an array of numbers, or a string of comma separated numbers. Note that even if the array days have an invalid number for the selected month, like `31` in February, it will correctly not show days which are not valid for the selected month. | `number \| number[] \| string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the datetime. | `boolean` | `false` | -| `doneText` | `done-text` | The text to display on the picker's "Done" button. | `string` | `'Done'` | -| `firstDayOfWeek` | `first-day-of-week` | The first day of the week to use for `ion-datetime`. The default value is `0` and represents Sunday. | `number` | `0` | -| `hourCycle` | `hour-cycle` | The hour cycle of the `ion-datetime`. If no value is set, this is specified by the current locale. | `"h12" \| "h23" \| undefined` | `undefined` | -| `hourValues` | `hour-values` | Values used to create the list of selectable hours. By default the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, to control exactly which hours to display, the `hourValues` input can take a number, an array of numbers, or a string of comma separated numbers. | `number \| number[] \| string \| undefined` | `undefined` | -| `isDateEnabled` | -- | Returns if an individual date (calendar day) is enabled or disabled. If `true`, the day will be enabled/interactive. If `false`, the day will be disabled/non-interactive. The function accepts an ISO 8601 date string of a given day. By default, all days are enabled. Developers can use this function to write custom logic to disable certain days. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank. | `((dateIsoString: string) => boolean) \| undefined` | `undefined` | -| `locale` | `locale` | The locale to use for `ion-datetime`. This impacts month and day name formatting. The `'default'` value refers to the default locale set by your device. | `string` | `'default'` | -| `max` | `max` | The maximum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the maximum could just be the year, such as `1994`. Defaults to the end of this year. | `string \| undefined` | `undefined` | -| `min` | `min` | The minimum datetime allowed. Value must be a date string following the [ISO 8601 datetime format standard](https://www.w3.org/TR/NOTE-datetime), such as `1996-12-19`. The format does not have to be specific to an exact datetime. For example, the minimum could just be the year, such as `1994`. Defaults to the beginning of the year, 100 years ago from today. | `string \| undefined` | `undefined` | -| `minuteValues` | `minute-values` | Values used to create the list of selectable minutes. By default the minutes range from `0` to `59`. However, to control exactly which minutes to display, the `minuteValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if the minute selections should only be every 15 minutes, then this input value would be `minuteValues="0,15,30,45"`. | `number \| number[] \| string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `monthValues` | `month-values` | Values used to create the list of selectable months. By default the month values range from `1` to `12`. However, to control exactly which months to display, the `monthValues` input can take a number, an array of numbers, or a string of comma separated numbers. For example, if only summer months should be shown, then this input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a zero-based index, meaning January's value is `1`, and December's is `12`. | `number \| number[] \| string \| undefined` | `undefined` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | -| `presentation` | `presentation` | Which values you want to select. `'date'` will show a calendar picker to select the month, day, and year. `'time'` will show a time picker to select the hour, minute, and (optionally) AM/PM. `'date-time'` will show the date picker first and time picker second. `'time-date'` will show the time picker first and date picker second. | `"date" \| "date-time" \| "month" \| "month-year" \| "time" \| "time-date" \| "year"` | `'date-time'` | -| `readonly` | `readonly` | If `true`, the datetime appears normal but is not interactive. | `boolean` | `false` | -| `showClearButton` | `show-clear-button` | If `true`, a "Clear" button will be rendered alongside the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered. | `boolean` | `false` | -| `showDefaultButtons` | `show-default-buttons` | If `true`, the default "Cancel" and "OK" buttons will be rendered at the bottom of the `ion-datetime` component. Developers can also use the `button` slot if they want to customize these buttons. If custom buttons are set in the `button` slot then the default buttons will not be rendered. | `boolean` | `false` | -| `showDefaultTimeLabel` | `show-default-time-label` | If `true`, the default "Time" label will be rendered for the time selector of the `ion-datetime` component. Developers can also use the `time-label` slot if they want to customize this label. If a custom label is set in the `time-label` slot then the default label will not be rendered. | `boolean` | `true` | -| `showDefaultTitle` | `show-default-title` | If `true`, a header will be shown above the calendar picker. On `ios` mode this will include the slotted title, and on `md` mode this will include the slotted title and the selected date. | `boolean` | `false` | -| `size` | `size` | If `cover`, the `ion-datetime` will expand to cover the full width of its container. If `fixed`, the `ion-datetime` will have a fixed width. | `"cover" \| "fixed"` | `'fixed'` | -| `value` | `value` | The value of the datetime as a valid ISO 8601 datetime string. | `null \| string \| undefined` | `undefined` | -| `yearValues` | `year-values` | Values used to create the list of selectable years. By default the year values range between the `min` and `max` datetime inputs. However, to control exactly which years to display, the `yearValues` input can take a number, an array of numbers, or string of comma separated numbers. For example, to show upcoming and recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. | `number \| number[] \| string \| undefined` | `undefined` | - - -## Events - -| Event | Description | Type | -| ----------- | --------------------------------------------------- | ---------------------------------------- | -| `ionBlur` | Emitted when the datetime loses focus. | `CustomEvent` | -| `ionCancel` | Emitted when the datetime selection was cancelled. | `CustomEvent` | -| `ionChange` | Emitted when the value (selected date) has changed. | `CustomEvent` | -| `ionFocus` | Emitted when the datetime has focus. | `CustomEvent` | - - -## Methods - -### `cancel(closeOverlay?: boolean) => Promise` - -Emits the ionCancel event and -optionally closes the popover -or modal that the datetime was -presented in. - -#### Returns - -Type: `Promise` - - - -### `confirm(closeOverlay?: boolean) => Promise` - -Confirms the selected datetime value, updates the -`value` property, and optionally closes the popover -or modal that the datetime was presented in. - -#### Returns - -Type: `Promise` - - - -### `reset(startDate?: string | undefined) => Promise` - -Resets the internal state of the datetime but does not update the value. -Passing a valid ISO-8601 string will reset the state of the component to the provided date. -If no value is provided, the internal state will be reset to today. - -#### Returns - -Type: `Promise` - - - - -## Slots - -| Slot | Description | -| -------------- | ------------------------------------------------ | -| `"buttons"` | The buttons in the datetime. | -| `"time-label"` | The label for the time selector in the datetime. | -| `"title"` | The title of the datetime. | - - -## CSS Custom Properties - -| Name | Description | -| ------------------ | --------------------------------------------------------------- | -| `--background` | The primary background of the datetime component. | -| `--background-rgb` | The primary background of the datetime component in RGB format. | -| `--title-color` | The text color of the title. | - - -## Dependencies - -### Depends on - -- [ion-buttons](../buttons) -- [ion-button](../button) -- ion-picker-internal -- ion-picker-column-internal -- [ion-item](../item) -- [ion-label](../label) -- ion-icon -- [ion-popover](../popover) - -### Graph -```mermaid -graph TD; - ion-datetime --> ion-buttons - ion-datetime --> ion-button - ion-datetime --> ion-picker-internal - ion-datetime --> ion-picker-column-internal - ion-datetime --> ion-item - ion-datetime --> ion-label - ion-datetime --> ion-icon - ion-datetime --> ion-popover - ion-button --> ion-ripple-effect - ion-item --> ion-icon - ion-item --> ion-ripple-effect - ion-item --> ion-note - ion-popover --> ion-backdrop - style ion-datetime fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/datetime/usage/angular.md b/core/src/components/datetime/usage/angular.md deleted file mode 100644 index 87a2496df0..0000000000 --- a/core/src/components/datetime/usage/angular.md +++ /dev/null @@ -1,135 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
My Custom Title
- - - - - - - - - -Open Datetime Modal - - - - - - - - - - - - Good to go! - Reset - - - - - - Date - {{ dateValue }} - - - - - - - - - - - - - - - - - - - -``` - -```typescript -import { Component, ViewChild } from '@angular/core'; -import { IonDatetime } from '@ionic/angular'; -import { format, parseISO, getDate, getMonth, getYear } from 'date-fns'; - -@Component({…}) -export class MyComponent { - @ViewChild(IonDatetime, { static: true }) datetime: IonDatetime; - - dateValue = ''; - dateValue2 = ''; - - constructor() {} - - confirm() { - this.datetime.nativeEl.confirm(); - } - - reset() { - this.datetime.nativeEl.reset(); - } - - formatDate(value: string) { - return format(parseISO(value), 'MMM dd yyyy'); - } - - isDateEnabled(dateIsoString: string) { - const date = new Date(dateIsoString); - if (getDate(date) === 1 && getMonth(date) === 0 && getYear(date) === 2022) { - // Disables January 1, 2022. - return false; - } - return true; - } -} -``` \ No newline at end of file diff --git a/core/src/components/datetime/usage/javascript.md b/core/src/components/datetime/usage/javascript.md deleted file mode 100644 index f253125869..0000000000 --- a/core/src/components/datetime/usage/javascript.md +++ /dev/null @@ -1,122 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
My Custom Title
- - - - - - - - - Good to go! - Reset - - - - - - - -Open Datetime Modal - - - - - - - - - Date - - - - - - - - - - - - - - - - -``` - -```javascript -import { format, parseISO, getDate, getMonth, getYear } from 'date-fns'; - -const datetime = document.querySelector('#custom-datetime'); - -const confirm = () => { - datetime.confirm(); -}; - -const reset = () => { - datetime.reset(); -}; - -const formatDate = (value: string) => { - return format(parseISO(value), 'MMM dd yyyy'); -}; - -const isDateEnabled = (dateIsoString: string) => { - const date = new Date(dateIsoString); - if (getDate(date) === 1 && getMonth(date) === 0 && getYear(date) === 2022) { - // Disables January 1, 2022. - return false; - } - return true; -}; - -const disabledDateDatetime = document.querySelector('#disabled-date-datetime'); -disabledDateDatetime.isDateEnabled = isDateEnabled; - -const popoverDatetime = document.querySelector('#popover-datetime'); -const dateInput = document.querySelector('#date-input'); -popoverDatetime.addEventListener('ionChange', ev => dateInput.innerText = formatDate(ev.detail.value)); - -const popoverDatetime2 = document.querySelector('#popover-datetime-2'); -const dateInput2 = document.querySelector('#date-input-2'); -popoverDatetime2.addEventListener('ionChange', ev => dateInput2.value = formatDate(ev.detail.value)); -``` \ No newline at end of file diff --git a/core/src/components/datetime/usage/react.md b/core/src/components/datetime/usage/react.md deleted file mode 100644 index 878a9eaeb6..0000000000 --- a/core/src/components/datetime/usage/react.md +++ /dev/null @@ -1,139 +0,0 @@ -```javascript -import React, { useState, useRef } from 'react'; -import { - IonButton, - IonButtons, - IonContent, - IonDatetime, - IonInput, - IonItem, - IonModal, - IonPage, - IonPopover -} from '@ionic/react'; -import { calendar } from 'ionicons/icons'; -import { format, parseISO, getDate, getMonth, getYear } from 'date-fns'; - -export const DateTimeExamples: React.FC = () => { - const [selectedDate, setSelectedDate] = useState('2012-12-15T13:47:20.789'); - const [popoverDate, setPopoverDate] = useState(''); - const [popoverDate2, setPopoverDate2] = useState(''); - - const customDatetime = useRef(); - const confirm = () => { - if (customDatetime === undefined) return; - - customDatetime.confirm(); - }; - - const reset = () => { - if (customDatetime === undefined) return; - - customDatetime.reset(); - }; - - const formatDate = (value: string) => { - return format(parseISO(value), 'MMM dd yyyy'); - }; - - return ( - - {/* Initial value */} - setSelectedDate(e.detail.value!)}> - - {/* Readonly */} - - - {/* Disabled */} - - - {/* Custom locale */} - - - {/* Max and min */} - - - {/* 15 minute increments */} - - - {/* Specific days/months/years */} - - - {/* Selecting time, no date */} - - - {/* Selecting time first, date second */} - - - {/* Full width size */} - - - {/* Custom Hour Cycle */} - - - {/* Custom first day of week */} - - - {/* Custom title */} - -
My Custom Title
- - - {/* Clear button */} - - - {/* Custom buttons */} - - - confirm()}>Good to go! - reset()}>Reset - - - - {/* Disable custom days */} - { - const date = new Date(dateIsoString); - if (getDate(date) === 1 && getMonth(date) === 0 && getYear(date) === 2022) { - // Disables January 1, 2022. - return false; - } - return true; - }}> - - {/* Datetime in overlay */} - Open Datetime Modal - - - - - - - {/* Datetime in popover with cover element */} - - Date - {popoverDate} - - setPopoverDate(formatDate(ev.detail.value!))} - /> - - - - {/* Datetime in popover with input */} - - - - - - - setPopoverDate2(formatDate(ev.detail.value!))} - /> - - - - ) -} -``` \ No newline at end of file diff --git a/core/src/components/datetime/usage/stencil.md b/core/src/components/datetime/usage/stencil.md deleted file mode 100644 index 0253a8ac50..0000000000 --- a/core/src/components/datetime/usage/stencil.md +++ /dev/null @@ -1,132 +0,0 @@ -```javascript -import { Component, h } from '@stencil/core'; -import { format, parseISO, getDate, getMonth, getYear } from 'date-fns'; - -@Component({ - tag: 'datetime-example', - styleUrl: 'datetime-example.css' -}) -export class DatetimeExample { - private customDatetime?: HTMLElement; - private dateInput?: HTMLElement; - private dateInput2?: HTMLElement; - - private confirm() { - const { customDatetime } = this; - if (customDatetime === undefined) return; - - customDatetime.confirm(); - } - - private reset() { - const { customDatetime } = this; - if (customDatetime === undefined) return; - - customDatetime.reset(); - } - - private formatDate(value: string) { - return format(parseISO(value), 'MMM dd yyyy'); - } - - render() { - return [ - {/* Initial value */} - , - - {/* Readonly */} - , - - {/* Disabled */} - , - - {/* Custom locale */} - , - - {/* Max and min */} - , - - {/* 15 minute increments */} - , - - {/* Specific days/months/years */} - , - - {/* Selecting time, no date */} - , - - {/* Selecting time first, date second */} - , - - {/* Full width size */} - , - - {/* Custom Hour Cycle */} - , - - {/* Custom first day of week */} - , - - {/* Custom title */} - -
My Custom Title
- , - - {/* Clear button */} - - - {/* Custom buttons */} - this.customDatetime = el}> - - this.confirm()}>Good to go! - this.reset()}>Reset - - - - {/* Disable custom days */} - { - const date = new Date(dateIsoString); - if (getDate(date) === 1 && getMonth(date) === 0 && getYear(date) === 2022) { - // Disables January 1, 2022. - return false; - } - return true; - }}> - - {/* Datetime in overlay */} - Open Datetime Modal - - - - - - - {/* Datetime in popover with cover element */} - - Date - this.dateInput = el}> - - this.dateInput.innerText = formatDate(ev.detail.value)} - /> - - - - {/* Datetime in popover with input */} - - this.dateInput2 = el}> - - - - - this.dateInput2.value = formatDate(ev.detail.value)} - /> - - - ] - } -} -``` \ No newline at end of file diff --git a/core/src/components/datetime/usage/vue.md b/core/src/components/datetime/usage/vue.md deleted file mode 100644 index 8507ca7b35..0000000000 --- a/core/src/components/datetime/usage/vue.md +++ /dev/null @@ -1,157 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md deleted file mode 100644 index 1cc9c821fe..0000000000 --- a/core/src/components/fab-button/readme.md +++ /dev/null @@ -1,230 +0,0 @@ -# ion-fab-button - -Floating Action Buttons (FABs) represent the primary action in an application. By default, they have a circular shape. When pressed, the button may open more related actions. As the name suggests, FABs generally float over the content in a fixed position. This is not achieved exclusively by using an `FAB`. They need to be wrapped with an `` component in order to be fixed over the content. - -If the FAB button is not wrapped with ``, it will scroll with the content. FAB buttons have a default size, a mini size and can accept different colors: - - - - -## Usage - -### Angular / javascript - -```html - - - - - Button - - - - Default - - - Mini - - - Primary - Secondary - Danger - Light - Dark - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonContent, IonFab, IonFabButton } from '@ionic/react'; - -export const FabButtonExample: React.FC = () => ( - - {/*-- Fixed Floating Action Button that does not scroll with the content --*/} - - Button - - - {/*-- Default Floating Action Button that scrolls with the content.--*/} - Default - - {/*-- Mini --*/} - Mini - - {/*-- Colors --*/} - Primary - Secondary - Danger - Light - Dark - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'fab-button-example', - styleUrl: 'fab-button-example.css' -}) -export class FabButtonExample { - render() { - return [ - - - {/* Fixed Floating Action Button that does not scroll with the content */} - - Button - - - {/* Default Floating Action Button that scrolls with the content */} - Default - - {/* Mini */} - Mini - - {/* Colors */} - Primary - Secondary - Danger - Light - Dark - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| `activated` | `activated` | If `true`, the fab button will be show a close icon. | `boolean` | `false` | -| `closeIcon` | `close-icon` | The icon name to use for the close icon. This will appear when the fab button is pressed. Only applies if it is the main button inside of a fab containing a fab list. | `string` | `close` | -| `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). | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. | `boolean` | `false` | -| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` | -| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` | -| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` | -| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab button. | `"small" \| undefined` | `undefined` | -| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the fab button will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | -| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | - - -## Events - -| Event | Description | Type | -| ---------- | ------------------------------------ | ------------------- | -| `ionBlur` | Emitted when the button loses focus. | `CustomEvent` | -| `ionFocus` | Emitted when the button has focus. | `CustomEvent` | - - -## Shadow Parts - -| Part | Description | -| -------------- | ----------------------------------------------------------------------- | -| `"close-icon"` | The close icon that is displayed when a fab list opens (uses ion-icon). | -| `"native"` | The native HTML button or anchor element that wraps all child elements. | - - -## CSS Custom Properties - -| Name | Description | -| -------------------------------- | --------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the button | -| `--background-activated` | Background of the button when pressed. Note: setting this will interfere with the Material Design ripple. | -| `--background-activated-opacity` | Opacity of the button background when pressed | -| `--background-focused` | Background of the button when focused with the tab key | -| `--background-focused-opacity` | Opacity of the button background when focused with the tab key | -| `--background-hover` | Background of the button on hover | -| `--background-hover-opacity` | Opacity of the button background on hover | -| `--border-color` | Border color of the button | -| `--border-radius` | Border radius of the button | -| `--border-style` | Border style of the button | -| `--border-width` | Border width of the button | -| `--box-shadow` | Box shadow of the button | -| `--close-icon-font-size` | Font size of the close icon | -| `--color` | Text color of the button | -| `--color-activated` | Text color of the button when pressed | -| `--color-focused` | Text color of the button when focused with the tab key | -| `--color-hover` | Text color of the button on hover | -| `--padding-bottom` | Bottom padding of the button | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | -| `--padding-top` | Top padding of the button | -| `--ripple-color` | Color of the button ripple effect | -| `--transition` | Transition of the button | - - -## Dependencies - -### Depends on - -- ion-icon -- [ion-ripple-effect](../ripple-effect) - -### Graph -```mermaid -graph TD; - ion-fab-button --> ion-icon - ion-fab-button --> ion-ripple-effect - style ion-fab-button fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/fab-button/usage/angular.md b/core/src/components/fab-button/usage/angular.md deleted file mode 100644 index 03573bf6d4..0000000000 --- a/core/src/components/fab-button/usage/angular.md +++ /dev/null @@ -1,23 +0,0 @@ -```html - - - - - Button - - - - Default - - - Mini - - - Primary - Secondary - Danger - Light - Dark - - -``` diff --git a/core/src/components/fab-button/usage/javascript.md b/core/src/components/fab-button/usage/javascript.md deleted file mode 100644 index 03573bf6d4..0000000000 --- a/core/src/components/fab-button/usage/javascript.md +++ /dev/null @@ -1,23 +0,0 @@ -```html - - - - - Button - - - - Default - - - Mini - - - Primary - Secondary - Danger - Light - Dark - - -``` diff --git a/core/src/components/fab-button/usage/react.md b/core/src/components/fab-button/usage/react.md deleted file mode 100644 index fdd7f459b3..0000000000 --- a/core/src/components/fab-button/usage/react.md +++ /dev/null @@ -1,26 +0,0 @@ -```tsx -import React from 'react'; -import { IonContent, IonFab, IonFabButton } from '@ionic/react'; - -export const FabButtonExample: React.FC = () => ( - - {/*-- Fixed Floating Action Button that does not scroll with the content --*/} - - Button - - - {/*-- Default Floating Action Button that scrolls with the content.--*/} - Default - - {/*-- Mini --*/} - Mini - - {/*-- Colors --*/} - Primary - Secondary - Danger - Light - Dark - -); -``` \ No newline at end of file diff --git a/core/src/components/fab-button/usage/stencil.md b/core/src/components/fab-button/usage/stencil.md deleted file mode 100644 index 7318ed37f5..0000000000 --- a/core/src/components/fab-button/usage/stencil.md +++ /dev/null @@ -1,35 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'fab-button-example', - styleUrl: 'fab-button-example.css' -}) -export class FabButtonExample { - render() { - return [ - - - {/* Fixed Floating Action Button that does not scroll with the content */} - - Button - - - {/* Default Floating Action Button that scrolls with the content */} - Default - - {/* Mini */} - Mini - - {/* Colors */} - Primary - Secondary - Danger - Light - Dark - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/fab-button/usage/vue.md b/core/src/components/fab-button/usage/vue.md deleted file mode 100644 index 6a3b738b78..0000000000 --- a/core/src/components/fab-button/usage/vue.md +++ /dev/null @@ -1,34 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/fab-list/readme.md b/core/src/components/fab-list/readme.md deleted file mode 100644 index 8a567a1094..0000000000 --- a/core/src/components/fab-list/readme.md +++ /dev/null @@ -1,241 +0,0 @@ -# ion-fab-list - -The `ion-fab-list` element is a container for multiple fab buttons. This collection of fab buttons contains actions related to the main fab button and is flung out on click. To specify what side the buttons should appear on, set the `side` property to 'start', 'end', 'top', 'bottom' - - - - -## Usage - -### Angular / javascript - -```html - - Share - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react'; -import { logoFacebook, logoTwitter, logoYoutube, logoPwa, logoNpm, logoIonic, logoGithub, logoJavascript, logoAngular, logoVimeo, logoChrome, logoReact } from 'ionicons/icons'; - -export const FabListExample: React.FC = () => ( - - - Share - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'fab-list-example', - styleUrl: 'fab-list-example.css' -}) -export class FabListExample { - render() { - return [ - - Share - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------- | ----------- | ------------------------------------------------------------------- | --------------------------------------- | ---------- | -| `activated` | `activated` | If `true`, the fab list will show all fab buttons in the list. | `boolean` | `false` | -| `side` | `side` | The side the fab list will show on relative to the main fab button. | `"bottom" \| "end" \| "start" \| "top"` | `'bottom'` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/fab-list/usage/angular.md b/core/src/components/fab-list/usage/angular.md deleted file mode 100644 index e100f3c873..0000000000 --- a/core/src/components/fab-list/usage/angular.md +++ /dev/null @@ -1,52 +0,0 @@ -```html - - Share - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` diff --git a/core/src/components/fab-list/usage/javascript.md b/core/src/components/fab-list/usage/javascript.md deleted file mode 100644 index e100f3c873..0000000000 --- a/core/src/components/fab-list/usage/javascript.md +++ /dev/null @@ -1,52 +0,0 @@ -```html - - Share - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` diff --git a/core/src/components/fab-list/usage/react.md b/core/src/components/fab-list/usage/react.md deleted file mode 100644 index 89ac3668b1..0000000000 --- a/core/src/components/fab-list/usage/react.md +++ /dev/null @@ -1,61 +0,0 @@ -```tsx -import React from 'react'; -import { IonFab, IonFabButton, IonFabList, IonContent, IonIcon } from '@ionic/react'; -import { logoFacebook, logoTwitter, logoYoutube, logoPwa, logoNpm, logoIonic, logoGithub, logoJavascript, logoAngular, logoVimeo, logoChrome, logoReact } from 'ionicons/icons'; - -export const FabListExample: React.FC = () => ( - - - Share - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); - -``` \ No newline at end of file diff --git a/core/src/components/fab-list/usage/stencil.md b/core/src/components/fab-list/usage/stencil.md deleted file mode 100644 index 1c066f5cad..0000000000 --- a/core/src/components/fab-list/usage/stencil.md +++ /dev/null @@ -1,64 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'fab-list-example', - styleUrl: 'fab-list-example.css' -}) -export class FabListExample { - render() { - return [ - - Share - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/fab-list/usage/vue.md b/core/src/components/fab-list/usage/vue.md deleted file mode 100644 index 656644d6b8..0000000000 --- a/core/src/components/fab-list/usage/vue.md +++ /dev/null @@ -1,27 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md deleted file mode 100644 index 8cd0162856..0000000000 --- a/core/src/components/fab/readme.md +++ /dev/null @@ -1,505 +0,0 @@ -# ion-fab - -Fabs are container elements that contain one or more fab buttons. They should be placed in a fixed position that does not scroll with the content. Fab should have one main fab-button. Fabs can also contain fab-lists which contain related buttons that show when the main fab button is clicked. The same fab container can contain several [fab-list](../fab-list) elements with different side values. - - - - -## Usage - -### Angular / javascript - -```html - - - Header - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Footer - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonContent, IonHeader, IonFooter, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react'; -import { add, settings, share, person, arrowForwardCircle, arrowBackCircle, arrowUpCircle, logoVimeo, logoFacebook, logoInstagram, logoTwitter } from 'ionicons/icons'; - -export const FabExamples: React.FC = () => { - return ( - - - - Header - - - - {/*-- fab placed to the top end --*/} - - - - - - - {/*-- fab placed to the bottom end --*/} - - - - - - - {/*-- fab placed to the top start --*/} - - - - - - - {/*-- fab placed to the bottom start --*/} - - - - - - - {/*-- fab placed to the (vertical) center and start --*/} - - - - - - - {/*-- fab placed to the (vertical) center and end --*/} - - - - - - - {/*-- fab placed to the top and end and on the top edge of the content overlapping header --*/} - - - - - - - {/*-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right --*/} - - - - - - - - - - {/*-- fab placed in the center of the content with a list on each side --*/} - - - - - - - - - - - - - - - - - - - - - Footer - - - - ); -}; -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'fab-example', - styleUrl: 'fab-example.css' -}) -export class FabExample { - render() { - return [ - - - Header - - , - - - {/* fab placed to the top end */} - - - - - - - {/* fab placed to the bottom end */} - - - - - - - {/* fab placed to the top start */} - - - - - - - {/* fab placed to the bottom start */} - - - - - - - {/* fab placed to the (vertical) center and start */} - - - - - - - {/* fab placed to the (vertical) center and end */} - - - - - - - {/* fab placed to the top and end and on the top edge of the content overlapping header */} - - - - - - - {/* fab placed to the bottom and start and on the bottom edge of content overlapping footer with a list to the right */} - - - - - - - - - - {/* fab placed in the center of the content with a list on each side */} - - - - - - - - - - - - - - - - - - , - - - - - Footer - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ----------- | -| `activated` | `activated` | If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active. That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible. | `boolean` | `false` | -| `edge` | `edge` | If `true`, the fab will display on the edge of the header if `vertical` is `"top"`, and on the edge of the footer if it is `"bottom"`. Should be used with a `fixed` slot. | `boolean` | `false` | -| `horizontal` | `horizontal` | Where to align the fab horizontally in the viewport. | `"center" \| "end" \| "start" \| undefined` | `undefined` | -| `vertical` | `vertical` | Where to align the fab vertically in the viewport. | `"bottom" \| "center" \| "top" \| undefined` | `undefined` | - - -## Methods - -### `close() => Promise` - -Close an active FAB list container. - -#### Returns - -Type: `Promise` - - - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/fab/usage/angular.md b/core/src/components/fab/usage/angular.md deleted file mode 100644 index c52d793b6e..0000000000 --- a/core/src/components/fab/usage/angular.md +++ /dev/null @@ -1,93 +0,0 @@ -```html - - - Header - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Footer - - -``` diff --git a/core/src/components/fab/usage/javascript.md b/core/src/components/fab/usage/javascript.md deleted file mode 100644 index c52d793b6e..0000000000 --- a/core/src/components/fab/usage/javascript.md +++ /dev/null @@ -1,93 +0,0 @@ -```html - - - Header - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Footer - - -``` diff --git a/core/src/components/fab/usage/react.md b/core/src/components/fab/usage/react.md deleted file mode 100644 index 5209f4ca09..0000000000 --- a/core/src/components/fab/usage/react.md +++ /dev/null @@ -1,101 +0,0 @@ -```tsx -import React from 'react'; -import { IonContent, IonHeader, IonFooter, IonPage, IonTitle, IonToolbar, IonFab, IonFabButton, IonIcon, IonFabList } from '@ionic/react'; -import { add, settings, share, person, arrowForwardCircle, arrowBackCircle, arrowUpCircle, logoVimeo, logoFacebook, logoInstagram, logoTwitter } from 'ionicons/icons'; - -export const FabExamples: React.FC = () => { - return ( - - - - Header - - - - {/*-- fab placed to the top end --*/} - - - - - - - {/*-- fab placed to the bottom end --*/} - - - - - - - {/*-- fab placed to the top start --*/} - - - - - - - {/*-- fab placed to the bottom start --*/} - - - - - - - {/*-- fab placed to the (vertical) center and start --*/} - - - - - - - {/*-- fab placed to the (vertical) center and end --*/} - - - - - - - {/*-- fab placed to the top and end and on the top edge of the content overlapping header --*/} - - - - - - - {/*-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right --*/} - - - - - - - - - - {/*-- fab placed in the center of the content with a list on each side --*/} - - - - - - - - - - - - - - - - - - - - - Footer - - - - ); -}; -``` diff --git a/core/src/components/fab/usage/stencil.md b/core/src/components/fab/usage/stencil.md deleted file mode 100644 index 234e8af287..0000000000 --- a/core/src/components/fab/usage/stencil.md +++ /dev/null @@ -1,107 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'fab-example', - styleUrl: 'fab-example.css' -}) -export class FabExample { - render() { - return [ - - - Header - - , - - - {/* fab placed to the top end */} - - - - - - - {/* fab placed to the bottom end */} - - - - - - - {/* fab placed to the top start */} - - - - - - - {/* fab placed to the bottom start */} - - - - - - - {/* fab placed to the (vertical) center and start */} - - - - - - - {/* fab placed to the (vertical) center and end */} - - - - - - - {/* fab placed to the top and end and on the top edge of the content overlapping header */} - - - - - - - {/* fab placed to the bottom and start and on the bottom edge of content overlapping footer with a list to the right */} - - - - - - - - - - {/* fab placed in the center of the content with a list on each side */} - - - - - - - - - - - - - - - - - - , - - - - - Footer - - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/fab/usage/vue.md b/core/src/components/fab/usage/vue.md deleted file mode 100644 index f95bd18eed..0000000000 --- a/core/src/components/fab/usage/vue.md +++ /dev/null @@ -1,152 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/footer/readme.md b/core/src/components/footer/readme.md deleted file mode 100644 index 5e1864d336..0000000000 --- a/core/src/components/footer/readme.md +++ /dev/null @@ -1,182 +0,0 @@ -# ion-footer - -Footer is a root component of a page that sits at the bottom of the page. -Footer can be a wrapper for ion-toolbar to make sure the content area is sized correctly. - -## Fade Footer - -The `collapse` property can be set to `'fade'` on a page's `ion-footer` to have the background color of the toolbars fade in as users scroll. This provides the same fade effect that is found in many native iOS applications. - -### Usage with Virtual Scroll - -Fade footer requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target. - -```html - - - - - - - - Footer - - -``` - - - - -## Usage - -### Angular / javascript - -```html - - - - - - Footer - No Border - - - - - - Footer - - - - - - - Footer - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react'; - -export const FooterExample: React.FC = () => ( - <> - - - {/*-- Footer without a border --*/} - - - Footer - No Border - - - - - - Footer - - - - {/*-- Fade Footer --*/} - - - Footer - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'footer-example', - styleUrl: 'footer-example.css' -}) -export class FooterExample { - render() { - return [ - , - - {/*-- Footer without a border --*/} - - - Footer - No Border - - , - - - - Footer - - , - - {/*-- Fade Footer --*/} - - - Footer - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `collapse` | `collapse` | Describes the scroll effect that will be applied to the footer. Only applies in iOS mode. | `"fade" \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `translucent` | `translucent` | If `true`, the footer will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the footer, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/footer/usage/angular.md b/core/src/components/footer/usage/angular.md deleted file mode 100644 index ae8a6cc576..0000000000 --- a/core/src/components/footer/usage/angular.md +++ /dev/null @@ -1,23 +0,0 @@ -```html - - - - - - Footer - No Border - - - - - - Footer - - - - - - - Footer - - -``` diff --git a/core/src/components/footer/usage/javascript.md b/core/src/components/footer/usage/javascript.md deleted file mode 100644 index ae8a6cc576..0000000000 --- a/core/src/components/footer/usage/javascript.md +++ /dev/null @@ -1,23 +0,0 @@ -```html - - - - - - Footer - No Border - - - - - - Footer - - - - - - - Footer - - -``` diff --git a/core/src/components/footer/usage/react.md b/core/src/components/footer/usage/react.md deleted file mode 100644 index abaeadeff5..0000000000 --- a/core/src/components/footer/usage/react.md +++ /dev/null @@ -1,30 +0,0 @@ -```tsx -import React from 'react'; -import { IonContent, IonFooter, IonToolbar, IonTitle } from '@ionic/react'; - -export const FooterExample: React.FC = () => ( - <> - - - {/*-- Footer without a border --*/} - - - Footer - No Border - - - - - - Footer - - - - {/*-- Fade Footer --*/} - - - Footer - - - -); -``` diff --git a/core/src/components/footer/usage/stencil.md b/core/src/components/footer/usage/stencil.md deleted file mode 100644 index d399618fb0..0000000000 --- a/core/src/components/footer/usage/stencil.md +++ /dev/null @@ -1,35 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'footer-example', - styleUrl: 'footer-example.css' -}) -export class FooterExample { - render() { - return [ - , - - {/*-- Footer without a border --*/} - - - Footer - No Border - - , - - - - Footer - - , - - {/*-- Fade Footer --*/} - - - Footer - - - ]; - } -} -``` diff --git a/core/src/components/footer/usage/vue.md b/core/src/components/footer/usage/vue.md deleted file mode 100644 index a830b4b73d..0000000000 --- a/core/src/components/footer/usage/vue.md +++ /dev/null @@ -1,34 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md deleted file mode 100644 index 00141941fb..0000000000 --- a/core/src/components/grid/readme.md +++ /dev/null @@ -1,757 +0,0 @@ -# ion-grid - - -The grid is a powerful mobile-first flexbox system for building custom layouts. - -It is composed of three units — a grid, [row(s)](../row) and [column(s)](../col). Columns will expand to fill the row, and will resize to fit additional columns. It is based on a 12 column layout with different breakpoints based on the screen size. The number of columns can be customized using CSS. - -See the [Responsive Grid documentation](/docs/layout/grid) for more information. - - - - -## Usage - -### Angular / javascript - -```html - - - - ion-col - - - ion-col - - - ion-col - - - ion-col - - - - - - ion-col [size="6"] - - - ion-col - - - ion-col - - - - - - ion-col [size="3"] - - - ion-col - - - ion-col [size="3"] - - - - - - ion-col [size="3"] - - - ion-col [size="3"] [offset="3"] - - - - - - ion-col - - - ion-col -
# - - - ion-col -
# -
# - - - ion-col -
# -
# -
# - - - - - - ion-col [start] - - - ion-col [center] - - - ion-col [end] - - - ion-col -
# -
# - - - - - - [start] ion-col - - - [start] ion-col - - - [start] ion-col [end] - - - ion-col -
# -
# - - - - - - [center] ion-col - - - [center] ion-col - - - [center] ion-col - - - ion-col -
# -
# - - - - - - [end] ion-col - - - [end] ion-col [start] - - - [end] ion-col - - - ion-col -
# -
# - - - - - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - - - - - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - - - - - - ion-col [size="6"] [size-lg] [offset="3"] - - - ion-col [size="3"] [size-lg] - - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react'; - -export const GridExample: React.FC = () => ( - - - - ion-col - ion-col - ion-col - ion-col - - - - ion-col size="6" - ion-col - ion-col - - - - ion-col size="3" - ion-col - ion-col size="3" - - - - ion-col size="3" - - ion-col size="3" offset="3" - - - - - ion-col - - ion-col -
# - - - ion-col -
# -
# - - - ion-col -
# -
# -
# - - - - - ion-col start - ion-col center - ion-col end - - ion-col -
# -
# - - - - - start ion-col - start ion-col - start ion-col end - - ion-col -
# -
# - - - - - center ion-col - center ion-col - center ion-col - - ion-col -
# -
# - - - - - end ion-col - end ion-col start - end ion-col - - ion-col -
# -
# - - - - - - ion-col size="12" size-sm - - - ion-col size="12" size-sm - - - ion-col size="12" size-sm - - - ion-col size="12" size-sm - - - - - - ion-col size="12" size-md - - - ion-col size="12" size-md - - - ion-col size="12" size-md - - - ion-col size="12" size-md - - - - - - ion-col size="6" size-lg offset="3" - - - ion-col size="3" size-lg - - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'grid-example', - styleUrl: 'grid-example.css' -}) -export class GridExample { - render() { - return [ - - - - ion-col - - - ion-col - - - ion-col - - - ion-col - - - - - - ion-col [size="6"] - - - ion-col - - - ion-col - - - - - - ion-col [size="3"] - - - ion-col - - - ion-col [size="3"] - - - - - - ion-col [size="3"] - - - ion-col [size="3"] [offset="3"] - - - - - - ion-col - - - ion-col -
# - - - ion-col -
# -
# - - - ion-col -
# -
# -
# - - - - - - ion-col [start] - - - ion-col [center] - - - ion-col [end] - - - ion-col -
# -
# - - - - - - [start] ion-col - - - [start] ion-col - - - [start] ion-col [end] - - - ion-col -
# -
# - - - - - - [center] ion-col - - - [center] ion-col - - - [center] ion-col - - - ion-col -
# -
# - - - - - - [end] ion-col - - - [end] ion-col [start] - - - [end] ion-col - - - ion-col -
# -
# - - - - - - ion-col [size="12"] [sizeSm] - - - ion-col [size="12"] [sizeSm] - - - ion-col [size="12"] [sizeSm] - - - ion-col [size="12"] [sizeSm] - - - - - - ion-col [size="12"] [sizeMd] - - - ion-col [size="12"] [sizeMd] - - - ion-col [size="12"] [sizeMd] - - - ion-col [size="12"] [sizeMd] - - - - - - ion-col [size="6"] [sizeLg] [offset="3"] - - - ion-col [size="3"] [sizeLg] - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | --------------------------------------------------------------------- | --------- | ------- | -| `fixed` | `fixed` | If `true`, the grid will have a fixed width based on the screen size. | `boolean` | `false` | - - -## CSS Custom Properties - -| Name | Description | -| ----------------------- | ------------------------------------- | -| `--ion-grid-padding` | Padding for the Grid | -| `--ion-grid-padding-lg` | Padding for the Grid on lg screens | -| `--ion-grid-padding-md` | Padding for the Grid on md screens | -| `--ion-grid-padding-sm` | Padding for the Grid on sm screens | -| `--ion-grid-padding-xl` | Padding for the Grid on xl screens | -| `--ion-grid-padding-xs` | Padding for the Grid on xs screens | -| `--ion-grid-width` | Width of the fixed Grid | -| `--ion-grid-width-lg` | Width of the fixed Grid on lg screens | -| `--ion-grid-width-md` | Width of the fixed Grid on md screens | -| `--ion-grid-width-sm` | Width of the fixed Grid on sm screens | -| `--ion-grid-width-xl` | Width of the fixed Grid on xl screens | -| `--ion-grid-width-xs` | Width of the fixed Grid on xs screens | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/grid/usage/angular.md b/core/src/components/grid/usage/angular.md deleted file mode 100644 index 704c0a655b..0000000000 --- a/core/src/components/grid/usage/angular.md +++ /dev/null @@ -1,179 +0,0 @@ -```html - - - - ion-col - - - ion-col - - - ion-col - - - ion-col - - - - - - ion-col [size="6"] - - - ion-col - - - ion-col - - - - - - ion-col [size="3"] - - - ion-col - - - ion-col [size="3"] - - - - - - ion-col [size="3"] - - - ion-col [size="3"] [offset="3"] - - - - - - ion-col - - - ion-col -
# - - - ion-col -
# -
# - - - ion-col -
# -
# -
# - - - - - - ion-col [start] - - - ion-col [center] - - - ion-col [end] - - - ion-col -
# -
# - - - - - - [start] ion-col - - - [start] ion-col - - - [start] ion-col [end] - - - ion-col -
# -
# - - - - - - [center] ion-col - - - [center] ion-col - - - [center] ion-col - - - ion-col -
# -
# - - - - - - [end] ion-col - - - [end] ion-col [start] - - - [end] ion-col - - - ion-col -
# -
# - - - - - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - - - - - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - - - - - - ion-col [size="6"] [size-lg] [offset="3"] - - - ion-col [size="3"] [size-lg] - - - -``` \ No newline at end of file diff --git a/core/src/components/grid/usage/javascript.md b/core/src/components/grid/usage/javascript.md deleted file mode 100644 index 704c0a655b..0000000000 --- a/core/src/components/grid/usage/javascript.md +++ /dev/null @@ -1,179 +0,0 @@ -```html - - - - ion-col - - - ion-col - - - ion-col - - - ion-col - - - - - - ion-col [size="6"] - - - ion-col - - - ion-col - - - - - - ion-col [size="3"] - - - ion-col - - - ion-col [size="3"] - - - - - - ion-col [size="3"] - - - ion-col [size="3"] [offset="3"] - - - - - - ion-col - - - ion-col -
# - - - ion-col -
# -
# - - - ion-col -
# -
# -
# - - - - - - ion-col [start] - - - ion-col [center] - - - ion-col [end] - - - ion-col -
# -
# - - - - - - [start] ion-col - - - [start] ion-col - - - [start] ion-col [end] - - - ion-col -
# -
# - - - - - - [center] ion-col - - - [center] ion-col - - - [center] ion-col - - - ion-col -
# -
# - - - - - - [end] ion-col - - - [end] ion-col [start] - - - [end] ion-col - - - ion-col -
# -
# - - - - - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - - - ion-col [size="12"] [size-sm] - - - - - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - - - ion-col [size="12"] [size-md] - - - - - - ion-col [size="6"] [size-lg] [offset="3"] - - - ion-col [size="3"] [size-lg] - - - -``` \ No newline at end of file diff --git a/core/src/components/grid/usage/react.md b/core/src/components/grid/usage/react.md deleted file mode 100644 index 6b4c695090..0000000000 --- a/core/src/components/grid/usage/react.md +++ /dev/null @@ -1,138 +0,0 @@ -```tsx -import React from 'react'; -import { IonGrid, IonRow, IonCol, IonContent } from '@ionic/react'; - -export const GridExample: React.FC = () => ( - - - - ion-col - ion-col - ion-col - ion-col - - - - ion-col size="6" - ion-col - ion-col - - - - ion-col size="3" - ion-col - ion-col size="3" - - - - ion-col size="3" - - ion-col size="3" offset="3" - - - - - ion-col - - ion-col -
# - - - ion-col -
# -
# - - - ion-col -
# -
# -
# - - - - - ion-col start - ion-col center - ion-col end - - ion-col -
# -
# - - - - - start ion-col - start ion-col - start ion-col end - - ion-col -
# -
# - - - - - center ion-col - center ion-col - center ion-col - - ion-col -
# -
# - - - - - end ion-col - end ion-col start - end ion-col - - ion-col -
# -
# - - - - - - ion-col size="12" size-sm - - - ion-col size="12" size-sm - - - ion-col size="12" size-sm - - - ion-col size="12" size-sm - - - - - - ion-col size="12" size-md - - - ion-col size="12" size-md - - - ion-col size="12" size-md - - - ion-col size="12" size-md - - - - - - ion-col size="6" size-lg offset="3" - - - ion-col size="3" size-lg - - - - -); -``` \ No newline at end of file diff --git a/core/src/components/grid/usage/stencil.md b/core/src/components/grid/usage/stencil.md deleted file mode 100644 index 8b71ef5316..0000000000 --- a/core/src/components/grid/usage/stencil.md +++ /dev/null @@ -1,191 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'grid-example', - styleUrl: 'grid-example.css' -}) -export class GridExample { - render() { - return [ - - - - ion-col - - - ion-col - - - ion-col - - - ion-col - - - - - - ion-col [size="6"] - - - ion-col - - - ion-col - - - - - - ion-col [size="3"] - - - ion-col - - - ion-col [size="3"] - - - - - - ion-col [size="3"] - - - ion-col [size="3"] [offset="3"] - - - - - - ion-col - - - ion-col -
# - - - ion-col -
# -
# - - - ion-col -
# -
# -
# - - - - - - ion-col [start] - - - ion-col [center] - - - ion-col [end] - - - ion-col -
# -
# - - - - - - [start] ion-col - - - [start] ion-col - - - [start] ion-col [end] - - - ion-col -
# -
# - - - - - - [center] ion-col - - - [center] ion-col - - - [center] ion-col - - - ion-col -
# -
# - - - - - - [end] ion-col - - - [end] ion-col [start] - - - [end] ion-col - - - ion-col -
# -
# - - - - - - ion-col [size="12"] [sizeSm] - - - ion-col [size="12"] [sizeSm] - - - ion-col [size="12"] [sizeSm] - - - ion-col [size="12"] [sizeSm] - - - - - - ion-col [size="12"] [sizeMd] - - - ion-col [size="12"] [sizeMd] - - - ion-col [size="12"] [sizeMd] - - - ion-col [size="12"] [sizeMd] - - - - - - ion-col [size="6"] [sizeLg] [offset="3"] - - - ion-col [size="3"] [sizeLg] - - - - ]; - } -} -``` diff --git a/core/src/components/grid/usage/vue.md b/core/src/components/grid/usage/vue.md deleted file mode 100644 index 5f5cb84748..0000000000 --- a/core/src/components/grid/usage/vue.md +++ /dev/null @@ -1,190 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/header/readme.md b/core/src/components/header/readme.md deleted file mode 100644 index 23fcaa8bec..0000000000 --- a/core/src/components/header/readme.md +++ /dev/null @@ -1,335 +0,0 @@ -# ion-header - -Header is a parent component that holds the toolbar component. -It's important to note that ion-header needs to be the one of the three root elements of a page - -## Fade Header - -The `collapse` property can be set to `'fade'` on a page's main `ion-header` to have the background color of the toolbars fade in as users scroll. This provides the same fade effect that is found in many native iOS applications. - -This functionality can be combined with [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) as well. The `collapse="condense"` value should be set on the `ion-header` inside of your `ion-content`. The `collapse="fade"` value should be set on the `ion-header` outside of your `ion-content`. - -### Usage with Virtual Scroll - -Fade and collapsible large titles require a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target. - -```html - - - Header - - - - - - Header - - - - - - -``` - - - - -## Usage - -### Angular - -```html - - - - - - My Navigation Bar - - - - Subheader - - - - - - - Header - No Border - - - - - - - My Navigation Bar - - - - - - - - Header - - - - - - - Header - - - -``` - - -### Javascript - -```html - - - - - - My Navigation Bar - - - - Subheader - - - - - - - Header - No Border - - - - - - - My Navigation Bar - - - - - - - - Header - - - - - - - Header - - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react'; - -export const HeaderExample: React.FC = () => ( - <> - - - - - - My Navigation Bar - - - - Subheader - - - - {/*-- Header without a border --*/} - - - Header - No Border - - - - - - - My Navigation Bar - - - - - {/*-- Fade Header with collapse header --*/} - - - Header - - - - - - - Header - - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'header-example', - styleUrl: 'header-example.css' -}) -export class HeaderExample { - render() { - return [ - - - - - - My Navigation Bar - - - - Subheader - - , - - {/*-- Header without a border --*/} - - - Header - No Border - - , - - - - - My Navigation Bar - - - , - - {/*-- Fade Header with collapse header --*/} - - - Header - - - - - - - Header - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | ----------- | -| `collapse` | `collapse` | Describes the scroll effect that will be applied to the header. Only applies in iOS mode. Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles) | `"condense" \| "fade" \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `translucent` | `translucent` | If `true`, the header will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). Note: In order to scroll content behind the header, the `fullscreen` attribute needs to be set on the content. | `boolean` | `false` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/header/usage/angular.md b/core/src/components/header/usage/angular.md deleted file mode 100644 index e91326f263..0000000000 --- a/core/src/components/header/usage/angular.md +++ /dev/null @@ -1,44 +0,0 @@ -```html - - - - - - My Navigation Bar - - - - Subheader - - - - - - - Header - No Border - - - - - - - My Navigation Bar - - - - - - - - Header - - - - - - - Header - - - -``` diff --git a/core/src/components/header/usage/javascript.md b/core/src/components/header/usage/javascript.md deleted file mode 100644 index a78b678802..0000000000 --- a/core/src/components/header/usage/javascript.md +++ /dev/null @@ -1,44 +0,0 @@ -```html - - - - - - My Navigation Bar - - - - Subheader - - - - - - - Header - No Border - - - - - - - My Navigation Bar - - - - - - - - Header - - - - - - - Header - - - -``` diff --git a/core/src/components/header/usage/react.md b/core/src/components/header/usage/react.md deleted file mode 100644 index 219a7a713a..0000000000 --- a/core/src/components/header/usage/react.md +++ /dev/null @@ -1,51 +0,0 @@ -```tsx -import React from 'react'; -import { IonHeader, IonContent, IonToolbar, IonButtons, IonBackButton, IonTitle } from '@ionic/react'; - -export const HeaderExample: React.FC = () => ( - <> - - - - - - My Navigation Bar - - - - Subheader - - - - {/*-- Header without a border --*/} - - - Header - No Border - - - - - - - My Navigation Bar - - - - - {/*-- Fade Header with collapse header --*/} - - - Header - - - - - - - Header - - - - -); -``` \ No newline at end of file diff --git a/core/src/components/header/usage/stencil.md b/core/src/components/header/usage/stencil.md deleted file mode 100644 index 70b267a538..0000000000 --- a/core/src/components/header/usage/stencil.md +++ /dev/null @@ -1,56 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'header-example', - styleUrl: 'header-example.css' -}) -export class HeaderExample { - render() { - return [ - - - - - - My Navigation Bar - - - - Subheader - - , - - {/*-- Header without a border --*/} - - - Header - No Border - - , - - - - - My Navigation Bar - - - , - - {/*-- Fade Header with collapse header --*/} - - - Header - - - - - - - Header - - - - ]; - } -} -``` diff --git a/core/src/components/header/usage/vue.md b/core/src/components/header/usage/vue.md deleted file mode 100644 index 3f55a81c2d..0000000000 --- a/core/src/components/header/usage/vue.md +++ /dev/null @@ -1,69 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/icon/readme.md b/core/src/components/icon/readme.md deleted file mode 100644 index 11298adc30..0000000000 --- a/core/src/components/icon/readme.md +++ /dev/null @@ -1,40 +0,0 @@ - - -# ion-icon - -Icons can be used on their own as a standalone component, or inside of another component. - -By default, Ionicons will use the same icon for each platform (iOS or Material Design). In previous versions of Ionicons, icons would automatically update based on the platform. As of Ionicons 5.0, apps will have to handle this on a per-icon basis, if needed. - -To use different icons depending on platform, set the `ios` and `md` properties or attributes. In the example below, when the app has the `ios` mode applied, it will show the `logo-apple` icon. When using `md`, it will show the `logo-android` icon. - -```html - -``` - -For a full list of available icons and more usage explanations, please check out the [Ionicons documentation](https://ionicons.com/). - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- | -------------- | -| `ariaLabel` | `aria-label` | Specifies the label to use for accessibility. Defaults to the icon name. | `string \| undefined` | `undefined` | -| `color` | `color` | The color to use for the background of the item. | `string \| undefined` | `undefined` | -| `flipRtl` | `flip-rtl` | Specifies whether the icon should horizontally flip when `dir` is `"rtl"`. | `boolean \| undefined` | `undefined` | -| `icon` | `icon` | A combination of both `name` and `src`. If a `src` url is detected it will set the `src` property. Otherwise it assumes it's a built-in named SVG and set the `name` property. | `any` | `undefined` | -| `ios` | `ios` | Specifies which icon to use on `ios` mode. | `string \| undefined` | `undefined` | -| `lazy` | `lazy` | If enabled, ion-icon will be loaded lazily when it's visible in the viewport. Default, `false`. | `boolean` | `false` | -| `md` | `md` | Specifies which icon to use on `md` mode. | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `string` | `getIonMode()` | -| `name` | `name` | Specifies which icon to use from the built-in set of icons. | `string \| undefined` | `undefined` | -| `size` | `size` | The size of the icon. Available options are: `"small"` and `"large"`. | `string \| undefined` | `undefined` | -| `src` | `src` | Specifies the exact `src` of an SVG file to use. | `string \| undefined` | `undefined` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* \ No newline at end of file diff --git a/core/src/components/icon/usage/angular.md b/core/src/components/icon/usage/angular.md deleted file mode 100644 index 7ea7dbe54f..0000000000 --- a/core/src/components/icon/usage/angular.md +++ /dev/null @@ -1,14 +0,0 @@ -```html - - - - - - - - - - - - -``` diff --git a/core/src/components/icon/usage/javascript.md b/core/src/components/icon/usage/javascript.md deleted file mode 100644 index 7ea7dbe54f..0000000000 --- a/core/src/components/icon/usage/javascript.md +++ /dev/null @@ -1,14 +0,0 @@ -```html - - - - - - - - - - - - -``` diff --git a/core/src/components/icon/usage/react.md b/core/src/components/icon/usage/react.md deleted file mode 100644 index 7fd67ed5ee..0000000000 --- a/core/src/components/icon/usage/react.md +++ /dev/null @@ -1,25 +0,0 @@ -```tsx -import React from 'react'; - -import { IonIcon } from '@ionic/react'; -import { star, home, heart }; - -const Example: React.FC<{}> = () => ( - <> - {/*-- uses "star" icon for both modes --*/} - - - {/*-- explicitly set the icon for each mode --*/} - - - {/*-- use a custom svg icon --*/} - - - {/*-- set the icon size --*/} - - - -); - -export default Example; -``` diff --git a/core/src/components/icon/usage/stencil.md b/core/src/components/icon/usage/stencil.md deleted file mode 100644 index 9022f3132c..0000000000 --- a/core/src/components/icon/usage/stencil.md +++ /dev/null @@ -1,26 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'icon-example', - styleUrl: 'icon-example.css' -}) -export class IconExample { - render() { - return [ - // uses "star" icon for both modes - , - - // explicitly set the icon for each mode - , - - // use a custom svg icon - , - - // set the icon size - , - - ]; - } -} -``` diff --git a/core/src/components/icon/usage/vue.md b/core/src/components/icon/usage/vue.md deleted file mode 100644 index 99be20887e..0000000000 --- a/core/src/components/icon/usage/vue.md +++ /dev/null @@ -1,29 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/img/readme.md b/core/src/components/img/readme.md deleted file mode 100644 index e41584a3d0..0000000000 --- a/core/src/components/img/readme.md +++ /dev/null @@ -1,158 +0,0 @@ -# ion-img - -Img is a tag that will lazily load an image when ever the tag is in the viewport. This is extremely useful when generating a large list as images are only loaded when they're visible. The component uses [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) internally, which is supported in most modern browser, but falls back to a `setTimeout` when it is not supported. - - - - - -## Usage - -### Angular - -```html - - - - - - {{item.text}} - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonList, IonItem, IonThumbnail, IonImg, IonLabel, IonContent } from '@ionic/react'; - -type Item = { - src: string; - text: string; -}; -const items: Item[] = [{ src: 'http://placekitten.com/g/200/300', text: 'a picture of a cat' }]; - -export const ImgExample: React.FC = () => ( - - - {items.map((image, i) => ( - - - - - {image.text} - - ))} - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'img-example', - styleUrl: 'img-example.css' -}) -export class ImgExample { - private items = [{ - 'text': 'Item 1', - 'src': '/path/to/external/file.png' - }, { - 'text': 'Item 2', - 'src': '/path/to/external/file.png' - }, { - 'text': 'Item 3', - 'src': '/path/to/external/file.png' - }]; - - render() { - return [ - - {this.items.map(item => - - - - - {item.text} - - )} - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------- | ----------- | -| `alt` | `alt` | This attribute defines the alternative text describing the image. Users will see this text displayed if the image URL is wrong, the image is not in one of the supported formats, or if the image is not yet downloaded. | `string \| undefined` | `undefined` | -| `src` | `src` | The image URL. This attribute is mandatory for the `` element. | `string \| undefined` | `undefined` | - - -## Events - -| Event | Description | Type | -| ---------------- | ------------------------------------------- | ------------------- | -| `ionError` | Emitted when the img fails to load | `CustomEvent` | -| `ionImgDidLoad` | Emitted when the image has finished loading | `CustomEvent` | -| `ionImgWillLoad` | Emitted when the img src has been set | `CustomEvent` | - - -## Shadow Parts - -| Part | Description | -| --------- | ------------------------ | -| `"image"` | The inner `img` element. | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/img/usage/angular.md b/core/src/components/img/usage/angular.md deleted file mode 100644 index d2e1301082..0000000000 --- a/core/src/components/img/usage/angular.md +++ /dev/null @@ -1,10 +0,0 @@ -```html - - - - - - {{item.text}} - - -``` diff --git a/core/src/components/img/usage/react.md b/core/src/components/img/usage/react.md deleted file mode 100644 index a3668ea86b..0000000000 --- a/core/src/components/img/usage/react.md +++ /dev/null @@ -1,25 +0,0 @@ -```tsx -import React from 'react'; -import { IonList, IonItem, IonThumbnail, IonImg, IonLabel, IonContent } from '@ionic/react'; - -type Item = { - src: string; - text: string; -}; -const items: Item[] = [{ src: 'http://placekitten.com/g/200/300', text: 'a picture of a cat' }]; - -export const ImgExample: React.FC = () => ( - - - {items.map((image, i) => ( - - - - - {image.text} - - ))} - - -); -``` \ No newline at end of file diff --git a/core/src/components/img/usage/stencil.md b/core/src/components/img/usage/stencil.md deleted file mode 100644 index 2f14878da5..0000000000 --- a/core/src/components/img/usage/stencil.md +++ /dev/null @@ -1,35 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'img-example', - styleUrl: 'img-example.css' -}) -export class ImgExample { - private items = [{ - 'text': 'Item 1', - 'src': '/path/to/external/file.png' - }, { - 'text': 'Item 2', - 'src': '/path/to/external/file.png' - }, { - 'text': 'Item 3', - 'src': '/path/to/external/file.png' - }]; - - render() { - return [ - - {this.items.map(item => - - - - - {item.text} - - )} - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/img/usage/vue.md b/core/src/components/img/usage/vue.md deleted file mode 100644 index 9f20209c37..0000000000 --- a/core/src/components/img/usage/vue.md +++ /dev/null @@ -1,34 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/infinite-scroll-content/readme.md b/core/src/components/infinite-scroll-content/readme.md deleted file mode 100644 index f6d53bbf23..0000000000 --- a/core/src/components/infinite-scroll-content/readme.md +++ /dev/null @@ -1,143 +0,0 @@ -# ion-infinite-scroll-content - -The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties. - - - - -## Usage - -### Angular - -```html - - - - - - -``` - - -### Javascript - -```html - - - - - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonContent, IonInfiniteScroll, IonInfiniteScrollContent } from '@ionic/react'; - -export const InfiniteScrollExample: React.FC = () => ( - - - - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'infinite-scroll-content-example', - styleUrl: 'infinite-scroll-content-example.css' -}) -export class InfiniteScrollContentExample { - render() { - return [ - - - - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ---------- | -| `disabled` | `disabled` | If `true`, the infinite scroll will be hidden and scroll event listeners will be removed. Set this to true to disable the infinite scroll from actively trying to receive new data while scrolling. This is useful when it is known that there is no more data that can be added, and the infinite scroll is no longer needed. | `boolean` | `false` | -| `position` | `position` | The position of the infinite scroll element. The value can be either `top` or `bottom`. | `"bottom" \| "top"` | `'bottom'` | -| `threshold` | `threshold` | The threshold distance from the bottom of the content to call the `infinite` output event when scrolled. The threshold value can be either a percent, or in pixels. For example, use the value of `10%` for the `infinite` output event to get called when the user has scrolled 10% from the bottom of the page. Use the value `100px` when the scroll is within 100 pixels from the bottom of the page. | `string` | `'15%'` | - - -## Events - -| Event | Description | Type | -| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | -| `ionInfinite` | Emitted when the scroll reaches the threshold distance. From within your infinite handler, you must call the infinite scroll's `complete()` method when your async operation has completed. | `CustomEvent` | - - -## Methods - -### `complete() => Promise` - -Call `complete()` within the `ionInfinite` output event handler when -your async operation has completed. For example, the `loading` -state is while the app is performing an asynchronous operation, -such as receiving more data from an AJAX request to add more items -to a data list. Once the data has been received and UI updated, you -then call this method to signify that the loading has completed. -This method will change the infinite scroll's state from `loading` -to `enabled`. - -#### Returns - -Type: `Promise` - - - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/infinite-scroll/usage/angular.md b/core/src/components/infinite-scroll/usage/angular.md deleted file mode 100644 index 46cbe08e4a..0000000000 --- a/core/src/components/infinite-scroll/usage/angular.md +++ /dev/null @@ -1,49 +0,0 @@ -```html - - - Toggle Infinite Scroll - - - - - - - - - -``` - -```typescript -import { Component, ViewChild } from '@angular/core'; -import { IonInfiniteScroll } from '@ionic/angular'; - -@Component({ - selector: 'infinite-scroll-example', - templateUrl: 'infinite-scroll-example.html', - styleUrls: ['./infinite-scroll-example.css'] -}) -export class InfiniteScrollExample { - @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll; - - constructor() {} - - loadData(event) { - setTimeout(() => { - console.log('Done'); - event.target.complete(); - - // App logic to determine if all data is loaded - // and disable the infinite scroll - if (data.length === 1000) { - event.target.disabled = true; - } - }, 500); - } - - toggleInfiniteScroll() { - this.infiniteScroll.disabled = !this.infiniteScroll.disabled; - } -} -``` diff --git a/core/src/components/infinite-scroll/usage/javascript.md b/core/src/components/infinite-scroll/usage/javascript.md deleted file mode 100644 index 2027988dbd..0000000000 --- a/core/src/components/infinite-scroll/usage/javascript.md +++ /dev/null @@ -1,37 +0,0 @@ -```html - - - Toggle Infinite Scroll - - - - - - - - - -``` - -```javascript -const infiniteScroll = document.getElementById('infinite-scroll'); - -infiniteScroll.addEventListener('ionInfinite', function(event) { - setTimeout(function() { - console.log('Done'); - event.target.complete(); - - // App logic to determine if all data is loaded - // and disable the infinite scroll - if (data.length === 1000) { - event.target.disabled = true; - } - }, 500); -}); - -function toggleInfiniteScroll() { - infiniteScroll.disabled = !infiniteScroll.disabled; -} -``` diff --git a/core/src/components/infinite-scroll/usage/react.md b/core/src/components/infinite-scroll/usage/react.md deleted file mode 100644 index 15d33b654f..0000000000 --- a/core/src/components/infinite-scroll/usage/react.md +++ /dev/null @@ -1,94 +0,0 @@ -```tsx -import { - IonButton, - IonContent, - IonHeader, - IonInfiniteScroll, - IonInfiniteScrollContent, - IonItem, - IonLabel, - IonList, - IonPage, - IonTitle, - IonToolbar, - useIonViewWillEnter -} from '@ionic/react'; -import { useState } from 'react'; - -const InfiniteScrollExample: React.FC = () => { - const [data, setData] = useState([]); - const [isInfiniteDisabled, setInfiniteDisabled] = useState(false); - - const pushData = () => { - const max = data.length + 20; - const min = max - 20; - const newData = []; - for (let i = min; i < max; i++) { - newData.push('Item' + i); - } - - setData([ - ...data, - ...newData - ]); - } - const loadData = (ev: any) => { - setTimeout(() => { - pushData(); - console.log('Loaded data'); - ev.target.complete(); - if (data.length === 1000) { - setInfiniteDisabled(true); - } - }, 500); - } - - useIonViewWillEnter(() => { - pushData(); - }); - - return ( - - - - Blank - - - - - - Blank - - - - setInfiniteDisabled(!isInfiniteDisabled)} expand="block"> - Toggle Infinite Scroll - - - - {data.map((item, index) => { - return ( - - {item} - - ) - })} - - - - - - - - ); -}; - -export default InfiniteScrollExample; -``` \ No newline at end of file diff --git a/core/src/components/infinite-scroll/usage/stencil.md b/core/src/components/infinite-scroll/usage/stencil.md deleted file mode 100644 index 4092b65f05..0000000000 --- a/core/src/components/infinite-scroll/usage/stencil.md +++ /dev/null @@ -1,78 +0,0 @@ -```tsx -import { Component, State, h } from '@stencil/core'; - -@Component({ - tag: 'infinite-scroll-example', - styleUrl: 'infinite-scroll-example.css' -}) -export class InfiniteScrollExample { - private infiniteScroll: HTMLIonInfiniteScrollElement; - - @State() data = []; - - componentWillLoad() { - this.pushData(); - } - - pushData() { - const max = this.data.length + 20; - const min = max - 20; - - for (var i = min; i < max; i++) { - this.data.push('Item ' + i); - } - - // Stencil does not re-render when pushing to an array - // so create a new copy of the array - // https://stenciljs.com/docs/reactive-data#handling-arrays-and-objects - this.data = [ - ...this.data - ]; - } - - loadData(ev) { - setTimeout(() => { - this.pushData(); - console.log('Loaded data'); - ev.target.complete(); - - // App logic to determine if all data is loaded - // and disable the infinite scroll - if (this.data.length === 1000) { - ev.target.disabled = true; - } - }, 500); - } - - toggleInfiniteScroll() { - this.infiniteScroll.disabled = !this.infiniteScroll.disabled; - } - - render() { - return [ - - this.toggleInfiniteScroll()} expand="block"> - Toggle Infinite Scroll - - - - {this.data.map(item => - - {item} - - )} - - - this.infiniteScroll = el} - onIonInfinite={(ev) => this.loadData(ev)}> - - - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/infinite-scroll/usage/vue.md b/core/src/components/infinite-scroll/usage/vue.md deleted file mode 100644 index 7ebddd5ce4..0000000000 --- a/core/src/components/infinite-scroll/usage/vue.md +++ /dev/null @@ -1,95 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md deleted file mode 100644 index a3e74db9a9..0000000000 --- a/core/src/components/input/readme.md +++ /dev/null @@ -1,405 +0,0 @@ -# ion-input - -The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML input, but works great on desktop devices and integrates with the keyboard on mobile devices. - -It is meant for text `type` inputs only, such as `"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, and `"url"`. It supports all standard text input events including keyup, keydown, keypress, and more. - -## Interfaces - -### InputChangeEventDetail - -```typescript -interface InputChangeEventDetail { - value: string | undefined | null; -} -``` - -### InputCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface InputCustomEvent extends CustomEvent { - detail: InputChangeEventDetail; - target: HTMLIonInputElement; -} -``` - - - - -## Usage - -### Angular - -```html - - - - - - - - - - - - - - - - - - - - - - - - Default Label - - - - - Floating Label - - - - - Fixed Label - - - - - Stacked Label - - -``` - - -### Javascript - -```html - - - - - - - - - - - - - - - - - - - - - - - - Default Label - - - - - Floating Label - - - - - Fixed Label - - - - - Stacked Label - - -``` - - -### React - -```tsx -import React, { useState } from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonInput, IonItem, IonLabel, IonList, IonItemDivider } from '@ionic/react'; - -export const InputExamples: React.FC = () => { - - const [text, setText] = useState(); - const [number, setNumber] = useState(); - - return ( - - - - IonInput Examples - - - - - Default Input with Placeholder - - setText(e.detail.value!)}> - - - Input with clear button when there is a value - - setText(e.detail.value!)} clearInput> - - - Number type input - - setNumber(parseInt(e.detail.value!, 10))}> - - - Disabled input - - - - - Readonly input - - - - - Inputs with labels - - - Default Label - - - - - Floating Label - - - - - Fixed Label - - - - - Stacked Label - - - - - - ); -}; -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'input-example', - styleUrl: 'input-example.css' -}) -export class InputExample { - render() { - return [ - // Default Input - , - - // Input with value - , - - // Input with placeholder - , - - // Input with clear button when there is a value - , - - // Number type input - , - - // Disabled input - , - - // Readonly input - , - - // Inputs with labels - - Default Label - - , - - - Floating Label - - , - - - Fixed Label - - , - - - Stacked Label - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `accept` | `accept` | If the value of the type attribute is `"file"`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers. | `string \| undefined` | `undefined` | -| `autocapitalize` | `autocapitalize` | Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`. | `string` | `'off'` | -| `autocomplete` | `autocomplete` | Indicates whether the value of the control can be automatically completed by the browser. | `"off" \| "on" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | `'off'` | -| `autocorrect` | `autocorrect` | Whether auto correction should be enabled when the user is entering/editing the text value. | `"off" \| "on"` | `'off'` | -| `autofocus` | `autofocus` | This Boolean attribute lets you specify that a form control should have input focus when the page loads. | `boolean` | `false` | -| `clearInput` | `clear-input` | If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input. | `boolean` | `false` | -| `clearOnEdit` | `clear-on-edit` | If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `"password"`, `false` for all other types. | `boolean \| undefined` | `undefined` | -| `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). | `string \| undefined` | `undefined` | -| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. | `number` | `0` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` | -| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` | -| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | `undefined` | -| `max` | `max` | The maximum value, which must not be less than its minimum (min attribute) value. | `number \| string \| undefined` | `undefined` | -| `maxlength` | `maxlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters that the user can enter. | `number \| undefined` | `undefined` | -| `min` | `min` | The minimum value, which must not be greater than its maximum (max attribute) value. | `number \| string \| undefined` | `undefined` | -| `minlength` | `minlength` | If the value of the type attribute is `text`, `email`, `search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters that the user can enter. | `number \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `multiple` | `multiple` | If `true`, the user can enter more than one value. This attribute applies when the type attribute is set to `"email"` or `"file"`, otherwise it is ignored. | `boolean \| undefined` | `undefined` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | -| `pattern` | `pattern` | A regular expression that the value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, `"date"`, or `"password"`, otherwise it is ignored. When the type attribute is `"date"`, `pattern` will only be used in browsers that do not support the `"date"` input type natively. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date for more information. | `string \| undefined` | `undefined` | -| `placeholder` | `placeholder` | Instructional text that shows before the input has a value. This property applies only when the `type` property is set to `"email"`, `"number"`, `"password"`, `"search"`, `"tel"`, `"text"`, or `"url"`, otherwise it is ignored. | `string \| undefined` | `undefined` | -| `readonly` | `readonly` | If `true`, the user cannot modify the value. | `boolean` | `false` | -| `required` | `required` | If `true`, the user must fill in a value before submitting a form. | `boolean` | `false` | -| `size` | `size` | The initial size of the control. This value is in pixels unless the value of the type attribute is `"text"` or `"password"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `"text"`, `"search"`, `"tel"`, `"url"`, `"email"`, or `"password"`, otherwise it is ignored. | `number \| undefined` | `undefined` | -| `spellcheck` | `spellcheck` | If `true`, the element will have its spelling and grammar checked. | `boolean` | `false` | -| `step` | `step` | Works with the min and max attributes to limit the increments at which a value can be set. Possible values are: `"any"` or a positive floating point number. | `string \| undefined` | `undefined` | -| `type` | `type` | The type of control to display. The default type is text. | `"date" \| "datetime-local" \| "email" \| "month" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "time" \| "url" \| "week"` | `'text'` | -| `value` | `value` | The value of the input. | `null \| number \| string \| undefined` | `''` | - - -## Events - -| Event | Description | Type | -| ----------- | --------------------------------------- | ------------------------------------- | -| `ionBlur` | Emitted when the input loses focus. | `CustomEvent` | -| `ionChange` | Emitted when the value has changed. | `CustomEvent` | -| `ionFocus` | Emitted when the input has focus. | `CustomEvent` | -| `ionInput` | Emitted when a keyboard input occurred. | `CustomEvent` | - - -## Methods - -### `getInputElement() => Promise` - -Returns the native `` element used under the hood. - -#### Returns - -Type: `Promise` - - - -### `setFocus() => Promise` - -Sets focus on the native `input` in `ion-input`. Use this method instead of the global -`input.focus()`. - -#### Returns - -Type: `Promise` - - - - -## CSS Custom Properties - -| Name | Description | -| --------------------------- | -------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the input | -| `--color` | Color of the input text | -| `--padding-bottom` | Bottom padding of the input | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the input | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the input | -| `--padding-top` | Top padding of the input | -| `--placeholder-color` | Color of the input placeholder text | -| `--placeholder-font-style` | Font style of the input placeholder text | -| `--placeholder-font-weight` | Font weight of the input placeholder text | -| `--placeholder-opacity` | Opacity of the input placeholder text | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/input/usage/angular.md b/core/src/components/input/usage/angular.md deleted file mode 100644 index 06f4a6594a..0000000000 --- a/core/src/components/input/usage/angular.md +++ /dev/null @@ -1,43 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - - - - - Default Label - - - - - Floating Label - - - - - Fixed Label - - - - - Stacked Label - - -``` \ No newline at end of file diff --git a/core/src/components/input/usage/javascript.md b/core/src/components/input/usage/javascript.md deleted file mode 100644 index d6b7d9c63c..0000000000 --- a/core/src/components/input/usage/javascript.md +++ /dev/null @@ -1,43 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - - - - - Default Label - - - - - Floating Label - - - - - Fixed Label - - - - - Stacked Label - - -``` \ No newline at end of file diff --git a/core/src/components/input/usage/react.md b/core/src/components/input/usage/react.md deleted file mode 100644 index 325c1e5b84..0000000000 --- a/core/src/components/input/usage/react.md +++ /dev/null @@ -1,70 +0,0 @@ -```tsx -import React, { useState } from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonInput, IonItem, IonLabel, IonList, IonItemDivider } from '@ionic/react'; - -export const InputExamples: React.FC = () => { - - const [text, setText] = useState(); - const [number, setNumber] = useState(); - - return ( - - - - IonInput Examples - - - - - Default Input with Placeholder - - setText(e.detail.value!)}> - - - Input with clear button when there is a value - - setText(e.detail.value!)} clearInput> - - - Number type input - - setNumber(parseInt(e.detail.value!, 10))}> - - - Disabled input - - - - - Readonly input - - - - - Inputs with labels - - - Default Label - - - - - Floating Label - - - - - Fixed Label - - - - - Stacked Label - - - - - - ); -}; -``` \ No newline at end of file diff --git a/core/src/components/input/usage/stencil.md b/core/src/components/input/usage/stencil.md deleted file mode 100644 index 78982fb9ce..0000000000 --- a/core/src/components/input/usage/stencil.md +++ /dev/null @@ -1,55 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'input-example', - styleUrl: 'input-example.css' -}) -export class InputExample { - render() { - return [ - // Default Input - , - - // Input with value - , - - // Input with placeholder - , - - // Input with clear button when there is a value - , - - // Number type input - , - - // Disabled input - , - - // Readonly input - , - - // Inputs with labels - - Default Label - - , - - - Floating Label - - , - - - Fixed Label - - , - - - Stacked Label - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/input/usage/vue.md b/core/src/components/input/usage/vue.md deleted file mode 100644 index c802aa75e1..0000000000 --- a/core/src/components/input/usage/vue.md +++ /dev/null @@ -1,54 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/item-divider/readme.md b/core/src/components/item-divider/readme.md deleted file mode 100644 index d911137489..0000000000 --- a/core/src/components/item-divider/readme.md +++ /dev/null @@ -1,253 +0,0 @@ -# ion-item-divider - -Item Dividers are block elements that can be used to separate items in a list. They are similar to list headers, but instead of being placed at the top of a list, they should go in between groups of items. - - - - -## Usage - -### Angular / javascript - -```html - - - Basic Item Divider - - - - - - Secondary Item Divider - - - - - - - - Section A - - - - A1 - A2 - A3 - A4 - A5 - - - - Section B - - - - B1 - B2 - B3 - B4 - B5 - -``` - - -### React - -```tsx -import React from 'react'; -import { IonItemDivider, IonLabel, IonList, IonItem, IonContent } from '@ionic/react'; - -export const ItemDividerExample: React.FC = () => ( - - - - Basic Item Divider - - - - - - Secondary Item Divider - - - - {/*-- Item Dividers in a List --*/} - - - - Section A - - - - A1 - A2 - A3 - A4 - A5 - - - - Section B - - - - B1 - B2 - B3 - B4 - B5 - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-divider-example', - styleUrl: 'item-divider-example.css' -}) -export class ItemDividerExample { - render() { - return [ - - - Basic Item Divider - - , - - - - Secondary Item Divider - - , - - // Item Dividers in a List - - - - Section A - - - - A1 - A2 - A3 - A4 - A5 - - - - Section B - - - - B1 - B2 - B3 - B4 - B5 - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `sticky` | `sticky` | When it's set to `true`, the item-divider will stay visible when it reaches the top of the viewport until the next `ion-item-divider` replaces it. This feature relies in `position:sticky`: https://caniuse.com/#feat=css-sticky | `boolean` | `false` | - - -## Slots - -| Slot | Description | -| --------- | ---------------------------------------------------------------------------------- | -| | Content is placed between the named slots if provided without a slot. | -| `"end"` | Content is placed to the right of the divider text in LTR, and to the left in RTL. | -| `"start"` | Content is placed to the left of the divider text in LTR, and to the right in RTL. | - - -## CSS Custom Properties - -| Name | Description | -| ------------------------ | --------------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the item divider | -| `--color` | Color of the item divider | -| `--inner-padding-bottom` | Bottom inner padding of the item divider | -| `--inner-padding-end` | End inner padding of the item divider | -| `--inner-padding-start` | Start inner padding of the item divider | -| `--inner-padding-top` | Top inner padding of the item divider | -| `--padding-bottom` | Bottom padding of the item divider | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item divider | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item divider | -| `--padding-top` | Top padding of the item divider | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/item-divider/usage/angular.md b/core/src/components/item-divider/usage/angular.md deleted file mode 100644 index 0f5d7326fe..0000000000 --- a/core/src/components/item-divider/usage/angular.md +++ /dev/null @@ -1,40 +0,0 @@ -```html - - - Basic Item Divider - - - - - - Secondary Item Divider - - - - - - - - Section A - - - - A1 - A2 - A3 - A4 - A5 - - - - Section B - - - - B1 - B2 - B3 - B4 - B5 - -``` diff --git a/core/src/components/item-divider/usage/javascript.md b/core/src/components/item-divider/usage/javascript.md deleted file mode 100644 index 0f5d7326fe..0000000000 --- a/core/src/components/item-divider/usage/javascript.md +++ /dev/null @@ -1,40 +0,0 @@ -```html - - - Basic Item Divider - - - - - - Secondary Item Divider - - - - - - - - Section A - - - - A1 - A2 - A3 - A4 - A5 - - - - Section B - - - - B1 - B2 - B3 - B4 - B5 - -``` diff --git a/core/src/components/item-divider/usage/react.md b/core/src/components/item-divider/usage/react.md deleted file mode 100644 index 1d2aac53e4..0000000000 --- a/core/src/components/item-divider/usage/react.md +++ /dev/null @@ -1,47 +0,0 @@ -```tsx -import React from 'react'; -import { IonItemDivider, IonLabel, IonList, IonItem, IonContent } from '@ionic/react'; - -export const ItemDividerExample: React.FC = () => ( - - - - Basic Item Divider - - - - - - Secondary Item Divider - - - - {/*-- Item Dividers in a List --*/} - - - - Section A - - - - A1 - A2 - A3 - A4 - A5 - - - - Section B - - - - B1 - B2 - B3 - B4 - B5 - - -); -``` \ No newline at end of file diff --git a/core/src/components/item-divider/usage/stencil.md b/core/src/components/item-divider/usage/stencil.md deleted file mode 100644 index 16b26cf6d2..0000000000 --- a/core/src/components/item-divider/usage/stencil.md +++ /dev/null @@ -1,52 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-divider-example', - styleUrl: 'item-divider-example.css' -}) -export class ItemDividerExample { - render() { - return [ - - - Basic Item Divider - - , - - - - Secondary Item Divider - - , - - // Item Dividers in a List - - - - Section A - - - - A1 - A2 - A3 - A4 - A5 - - - - Section B - - - - B1 - B2 - B3 - B4 - B5 - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/item-divider/usage/vue.md b/core/src/components/item-divider/usage/vue.md deleted file mode 100644 index de4013afa0..0000000000 --- a/core/src/components/item-divider/usage/vue.md +++ /dev/null @@ -1,51 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/item-group/readme.md b/core/src/components/item-group/readme.md deleted file mode 100644 index 7d4eb32e62..0000000000 --- a/core/src/components/item-group/readme.md +++ /dev/null @@ -1,492 +0,0 @@ -# ion-item-group - -Item groups are containers that organize similar items together. They can contain item dividers to divide the items into multiple sections. They can also be used to group sliding items. - - - - - - - -## Usage - -### Angular / javascript - -```html - - - A - - - - Angola - - - Argentina - - - Armenia - - - - - - B - - - - Bangladesh - - - Belarus - - - Belgium - - - - - - - - - Fruits - - - - - - -

Grapes

- - - - - Favorite - - - - - - - -

Apples

- - - - - Favorite - - - - - - - - - Vegetables - - - - - - -

Carrots

- - - - - Favorite - - - - - - - -

Celery

- - - - - Favorite - - - - -``` - - -### React - -```tsx -import React from 'react'; - -import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react'; - -const Example: React.FC<{}> = () => ( - <> - - - A - - - - Angola - - - Argentina - - - Armenia - - - - - - B - - - - Bangladesh - - - Belarus - - - Belgium - - - - - {/*-- They can also be used to group sliding items --*/} - - - - Fruits - - - - - - -

Grapes

- - - - - Favorite - - - - - - - -

Apples

- - - - - Favorite - - - - - - - - - Vegetables - - - - - - -

Carrots

- - - - - Favorite - - - - - - - -

Celery

- - - - - Favorite - - - - - -); - -export default Example; -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-group-example', - styleUrl: 'item-group-example.css' -}) -export class ItemGroupExample { - render() { - return [ - - - A - - - - Angola - - - Argentina - - - Armenia - - - - - - B - - - - Bangladesh - - - Belarus - - - Belgium - - - - - // They can also be used to group sliding items - - - - Fruits - - - - - - -

Grapes

- - - - - Favorite - - - - - - - -

Apples

- - - - - Favorite - - - - - - - - - Vegetables - - - - - - -

Carrots

- - - - - Favorite - - - - - - - -

Celery

- - - - - Favorite - - - - - ]; - } -} -``` - - -### Vue - -```html - - -``` - - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/item-group/usage/angular.md b/core/src/components/item-group/usage/angular.md deleted file mode 100644 index 48932bae80..0000000000 --- a/core/src/components/item-group/usage/angular.md +++ /dev/null @@ -1,103 +0,0 @@ -```html - - - A - - - - Angola - - - Argentina - - - Armenia - - - - - - B - - - - Bangladesh - - - Belarus - - - Belgium - - - - - - - - - Fruits - - - - - - -

Grapes

- - - - - Favorite - - - - - - - -

Apples

- - - - - Favorite - - - - - - - - - Vegetables - - - - - - -

Carrots

- - - - - Favorite - - - - - - - -

Celery

- - - - - Favorite - - - - -``` diff --git a/core/src/components/item-group/usage/javascript.md b/core/src/components/item-group/usage/javascript.md deleted file mode 100644 index 48932bae80..0000000000 --- a/core/src/components/item-group/usage/javascript.md +++ /dev/null @@ -1,103 +0,0 @@ -```html - - - A - - - - Angola - - - Argentina - - - Armenia - - - - - - B - - - - Bangladesh - - - Belarus - - - Belgium - - - - - - - - - Fruits - - - - - - -

Grapes

- - - - - Favorite - - - - - - - -

Apples

- - - - - Favorite - - - - - - - - - Vegetables - - - - - - -

Carrots

- - - - - Favorite - - - - - - - -

Celery

- - - - - Favorite - - - - -``` diff --git a/core/src/components/item-group/usage/react.md b/core/src/components/item-group/usage/react.md deleted file mode 100644 index a7f1e655c1..0000000000 --- a/core/src/components/item-group/usage/react.md +++ /dev/null @@ -1,113 +0,0 @@ -```tsx -import React from 'react'; - -import { IonItemGroup, IonItemDivider, IonLabel, IonItem, IonItemSliding, IonItemOptions, IonItemOption } from '@ionic/react'; - -const Example: React.FC<{}> = () => ( - <> - - - A - - - - Angola - - - Argentina - - - Armenia - - - - - - B - - - - Bangladesh - - - Belarus - - - Belgium - - - - - {/*-- They can also be used to group sliding items --*/} - - - - Fruits - - - - - - -

Grapes

- - - - - Favorite - - - - - - - -

Apples

- - - - - Favorite - - - - - - - - - Vegetables - - - - - - -

Carrots

- - - - - Favorite - - - - - - - -

Celery

- - - - - Favorite - - - - - -); - -export default Example; -``` diff --git a/core/src/components/item-group/usage/stencil.md b/core/src/components/item-group/usage/stencil.md deleted file mode 100644 index e4cc2e435d..0000000000 --- a/core/src/components/item-group/usage/stencil.md +++ /dev/null @@ -1,115 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-group-example', - styleUrl: 'item-group-example.css' -}) -export class ItemGroupExample { - render() { - return [ - - - A - - - - Angola - - - Argentina - - - Armenia - - - - - - B - - - - Bangladesh - - - Belarus - - - Belgium - - - - - // They can also be used to group sliding items - - - - Fruits - - - - - - -

Grapes

- - - - - Favorite - - - - - - - -

Apples

- - - - - Favorite - - - - - - - - - Vegetables - - - - - - -

Carrots

- - - - - Favorite - - - - - - - -

Celery

- - - - - Favorite - - - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/item-group/usage/vue.md b/core/src/components/item-group/usage/vue.md deleted file mode 100644 index d831e47e73..0000000000 --- a/core/src/components/item-group/usage/vue.md +++ /dev/null @@ -1,129 +0,0 @@ -```html - - -``` diff --git a/core/src/components/item-option/readme.md b/core/src/components/item-option/readme.md deleted file mode 100644 index 931956756b..0000000000 --- a/core/src/components/item-option/readme.md +++ /dev/null @@ -1,67 +0,0 @@ -# ion-item-option - -The option button for an `ion-item-sliding`. Must be placed inside of an ``. -You can combine the `ionSwipe` event and the `expandable` directive to create a full swipe -action for the item. - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the item option. | `boolean` | `false` | -| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` | -| `expandable` | `expandable` | If `true`, the option will expand to take up the available width and cover any other options. | `boolean` | `false` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` | -| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | -| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | - - -## Slots - -| Slot | Description | -| ------------- | --------------------------------------------------------------------------------- | -| | Content is placed between the named slots if provided without a slot. | -| `"bottom"` | Content is placed below the option text. | -| `"end"` | Content is placed to the right of the option text in LTR, and to the left in RTL. | -| `"icon-only"` | Should be used on an icon in an option that has no text. | -| `"start"` | Content is placed to the left of the option text in LTR, and to the right in RTL. | -| `"top"` | Content is placed above the option text. | - - -## Shadow Parts - -| Part | Description | -| ---------- | ----------------------------------------------------------------------- | -| `"native"` | The native HTML button or anchor element that wraps all child elements. | - - -## CSS Custom Properties - -| Name | Description | -| -------------- | ----------------------------- | -| `--background` | Background of the item option | -| `--color` | Color of the item option | - - -## Dependencies - -### Depends on - -- [ion-ripple-effect](../ripple-effect) - -### Graph -```mermaid -graph TD; - ion-item-option --> ion-ripple-effect - style ion-item-option fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/item-options/readme.md b/core/src/components/item-options/readme.md deleted file mode 100644 index e66e8a6bce..0000000000 --- a/core/src/components/item-options/readme.md +++ /dev/null @@ -1,34 +0,0 @@ -# ion-item-options - -The option buttons for an `ion-item-sliding`. These buttons can be placed either on the [start or end side](#side-description). -You can combine the `ionSwipe` event plus the `expandable` directive to create a full swipe action for the item. - - -## Side Description - -| Side | Position | Swipe Direction | -|---------|-----------------------------------------------------------------|-------------------------------------------------------------------| -| `start` | To the `left` of the content in LTR, and to the `right` in RTL. | From `left` to `right` in LTR, and from `right` to `left` in RTL. | -| `end` | To the `right` of the content in LTR, and to the `left` in RTL. | From `right` to `left` in LTR, and from `left` to `right` in RTL. | - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------- | -| `side` | `side` | The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each. | `"end" \| "start"` | `'end'` | - - -## Events - -| Event | Description | Type | -| ---------- | -------------------------------------------- | ------------------ | -| `ionSwipe` | Emitted when the item has been fully swiped. | `CustomEvent` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md deleted file mode 100644 index 9a92a0a187..0000000000 --- a/core/src/components/item-sliding/readme.md +++ /dev/null @@ -1,931 +0,0 @@ -# ion-item-sliding - -A sliding item contains an item that can be dragged to reveal buttons. It requires an [item](../item) component as a child. All options to reveal should be placed in the [item options](../item-options) element. - - -## Swipe Direction - -By default, the buttons are placed on the `"end"` side. This means that options are revealed when the sliding item is swiped from end to start, i.e. from right to left in LTR, but from left to right in RTL. To place them on the opposite side, so that they are revealed when swiping in the opposite direction, set the `side` attribute to `"start"` on the [`ion-item-options`](../item-options) element. Up to two `ion-item-options` can be used at the same time in order to reveal two different sets of options depending on the swiping direction. - - -## Options Layout - -By default if an icon is placed with text in the [item option](../item-option), it will display the icon on top of the text, but the icon slot can be changed to any of the following to position it in the option. - -| Slot | Description | -| ----------- | ------------------------------------------------------------------------ | -| `start` | In LTR, start is the left side of the button, and in RTL it is the right | -| `top` | The icon is above the text | -| `icon-only` | The icon is the only content of the button | -| `bottom` | The icon is below the text | -| `end` | In LTR, end is the right side of the button, and in RTL it is the left | - - -## Expandable Options - -Options can be expanded to take up the full width of the item if you swipe past a certain point. This can be combined with the `ionSwipe` event to call methods on the class. - -## Interfaces - -### ItemSlidingCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface ItemSlidingCustomEvent extends CustomEvent { - target: HTMLIonItemSlidingElement; -} -``` - - - - - -## Usage - -### Angular - -```html - - - - - Favorite - Share - - - - Item Options - - - - Unread - - - - - - - - Delete - - - - - Expandable Options - - - - - Archive - - - - - - - - -

HubStruck Notifications

-

A new message in your network

-

Oceanic Next has joined your network

- - - 10:45 AM - - - - - - - - - - - - - - - - - - - - - - - - Sliding Item, Icons Start - - - - - - More - - - - Archive - - - - - - - - - Sliding Item, Icons End - - - - - - More - - - - Archive - - - - - - - - - Sliding Item, Icons Top - - - - - - More - - - - Archive - - - - - - - - - Sliding Item, Icons Bottom - - - - - - More - - - - Archive - - - - -``` - - -### Javascript - -```html - - - - - Favorite - Share - - - - Item Options - - - - Unread - - - - - - - - Delete - - - - - Expandable Options - - - - - Archive - - - - - - - - -

HubStruck Notifications

-

A new message in your network

-

Oceanic Next has joined your network

- - - 10:45 AM - - - - - - - - - - - - - - - - - - - - - - - - Sliding Item, Icons Start - - - - - - More - - - - Archive - - - - - - - - - Sliding Item, Icons End - - - - - - More - - - - Archive - - - - - - - - - Sliding Item, Icons Top - - - - - - More - - - - Archive - - - - - - - - - Sliding Item, Icons Bottom - - - - - - More - - - - Archive - - - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOption, IonIcon, IonNote } from '@ionic/react'; - -import { heart, trash, star, archive, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons'; - -export const ItemSlidingExample: React.FC = () => ( - - {/* Sliding item with text options on both sides */} - - - console.log('favorite clicked')}>Favorite - console.log('share clicked')}>Share - - - - Item Options - - - - console.log('unread clicked')}>Unread - - - - {/* Sliding item with expandable options on both sides */} - - - - Delete - - - - - Expandable Options - - - - - Archive - - - - - {/* Multi-line sliding item with icon options on both sides */} - - - -

HubStruck Notifications

-

A new message in your network

-

Oceanic Next has joined your network

- - - 10:45 AM - - - - - - - - - - - - - - - - - - - - {/* Sliding item with icon start options on end side */} - - - - Sliding Item, Icons Start - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon end options on end side */} - - - - Sliding Item, Icons End - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon top options on end side */} - - - - Sliding Item, Icons Top - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon bottom options on end side */} - - - - Sliding Item, Icons Bottom - - - - - - More - - - - Archive - - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-sliding-example', - styleUrl: 'item-sliding-example.css' -}) -export class ItemSlidingExample { - favorite(ev: any) { - console.log('Favorite clicked', ev); - } - - share(ev: any) { - console.log('Favorite clicked', ev); - } - - unread(ev: any) { - console.log('Favorite clicked', ev); - } - - render() { - return [ - - {/* Sliding item with text options on both sides */} - - - this.favorite(ev)}>Favorite - this.share(ev)}>Share - - - - Item Options - - - - this.unread(ev)}>Unread - - - - {/* Sliding item with expandable options on both sides */} - - - - Delete - - - - - Expandable Options - - - - - Archive - - - - - {/* Multi-line sliding item with icon options on both sides */} - - - -

HubStruck Notifications

-

A new message in your network

-

Oceanic Next has joined your network

- - - 10:45 AM - - - - - - - - - - - - - - - - - - - - {/* Sliding item with icon start options on end side */} - - - - Sliding Item, Icons Start - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon end options on end side */} - - - - Sliding Item, Icons End - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon top options on end side */} - - - - Sliding Item, Icons Top - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon bottom options on end side */} - - - - Sliding Item, Icons Bottom - - - - - - More - - - - Archive - - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ---------------------------------------------------------- | --------- | ------- | -| `disabled` | `disabled` | If `true`, the user cannot interact with the sliding item. | `boolean` | `false` | - - -## Events - -| Event | Description | Type | -| --------- | ------------------------------------------ | ------------------ | -| `ionDrag` | Emitted when the sliding position changes. | `CustomEvent` | - - -## Methods - -### `close() => Promise` - -Close the sliding item. Items can also be closed from the [List](./list). - -#### Returns - -Type: `Promise` - - - -### `closeOpened() => Promise` - -Close all of the sliding items in the list. Items can also be closed from the [List](./list). - -#### Returns - -Type: `Promise` - - - -### `getOpenAmount() => Promise` - -Get the amount the item is open in pixels. - -#### Returns - -Type: `Promise` - - - -### `getSlidingRatio() => Promise` - -Get the ratio of the open amount of the item compared to the width of the options. -If the number returned is positive, then the options on the right side are open. -If the number returned is negative, then the options on the left side are open. -If the absolute value of the number is greater than 1, the item is open more than -the width of the options. - -#### Returns - -Type: `Promise` - - - -### `open(side: Side | undefined) => Promise` - -Open the sliding item. - -#### Returns - -Type: `Promise` - - - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/item-sliding/usage/angular.md b/core/src/components/item-sliding/usage/angular.md deleted file mode 100644 index fae9330e64..0000000000 --- a/core/src/components/item-sliding/usage/angular.md +++ /dev/null @@ -1,143 +0,0 @@ -```html - - - - - Favorite - Share - - - - Item Options - - - - Unread - - - - - - - - Delete - - - - - Expandable Options - - - - - Archive - - - - - - - - -

HubStruck Notifications

-

A new message in your network

-

Oceanic Next has joined your network

- - - 10:45 AM - - - - - - - - - - - - - - - - - - - - - - - - Sliding Item, Icons Start - - - - - - More - - - - Archive - - - - - - - - - Sliding Item, Icons End - - - - - - More - - - - Archive - - - - - - - - - Sliding Item, Icons Top - - - - - - More - - - - Archive - - - - - - - - - Sliding Item, Icons Bottom - - - - - - More - - - - Archive - - - - -``` diff --git a/core/src/components/item-sliding/usage/javascript.md b/core/src/components/item-sliding/usage/javascript.md deleted file mode 100644 index abe68377d3..0000000000 --- a/core/src/components/item-sliding/usage/javascript.md +++ /dev/null @@ -1,143 +0,0 @@ -```html - - - - - Favorite - Share - - - - Item Options - - - - Unread - - - - - - - - Delete - - - - - Expandable Options - - - - - Archive - - - - - - - - -

HubStruck Notifications

-

A new message in your network

-

Oceanic Next has joined your network

- - - 10:45 AM - - - - - - - - - - - - - - - - - - - - - - - - Sliding Item, Icons Start - - - - - - More - - - - Archive - - - - - - - - - Sliding Item, Icons End - - - - - - More - - - - Archive - - - - - - - - - Sliding Item, Icons Top - - - - - - More - - - - Archive - - - - - - - - - Sliding Item, Icons Bottom - - - - - - More - - - - Archive - - - - -``` diff --git a/core/src/components/item-sliding/usage/react.md b/core/src/components/item-sliding/usage/react.md deleted file mode 100644 index d9fe0f0311..0000000000 --- a/core/src/components/item-sliding/usage/react.md +++ /dev/null @@ -1,150 +0,0 @@ -```tsx -import React from 'react'; -import { IonList, IonItemSliding, IonItem, IonLabel, IonItemOptions, IonItemOption, IonIcon, IonNote } from '@ionic/react'; - -import { heart, trash, star, archive, ellipsisHorizontal, ellipsisVertical } from 'ionicons/icons'; - -export const ItemSlidingExample: React.FC = () => ( - - {/* Sliding item with text options on both sides */} - - - console.log('favorite clicked')}>Favorite - console.log('share clicked')}>Share - - - - Item Options - - - - console.log('unread clicked')}>Unread - - - - {/* Sliding item with expandable options on both sides */} - - - - Delete - - - - - Expandable Options - - - - - Archive - - - - - {/* Multi-line sliding item with icon options on both sides */} - - - -

HubStruck Notifications

-

A new message in your network

-

Oceanic Next has joined your network

- - - 10:45 AM - - - - - - - - - - - - - - - - - - - - {/* Sliding item with icon start options on end side */} - - - - Sliding Item, Icons Start - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon end options on end side */} - - - - Sliding Item, Icons End - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon top options on end side */} - - - - Sliding Item, Icons Top - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon bottom options on end side */} - - - - Sliding Item, Icons Bottom - - - - - - More - - - - Archive - - - - -); -``` diff --git a/core/src/components/item-sliding/usage/stencil.md b/core/src/components/item-sliding/usage/stencil.md deleted file mode 100644 index e697083933..0000000000 --- a/core/src/components/item-sliding/usage/stencil.md +++ /dev/null @@ -1,167 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-sliding-example', - styleUrl: 'item-sliding-example.css' -}) -export class ItemSlidingExample { - favorite(ev: any) { - console.log('Favorite clicked', ev); - } - - share(ev: any) { - console.log('Favorite clicked', ev); - } - - unread(ev: any) { - console.log('Favorite clicked', ev); - } - - render() { - return [ - - {/* Sliding item with text options on both sides */} - - - this.favorite(ev)}>Favorite - this.share(ev)}>Share - - - - Item Options - - - - this.unread(ev)}>Unread - - - - {/* Sliding item with expandable options on both sides */} - - - - Delete - - - - - Expandable Options - - - - - Archive - - - - - {/* Multi-line sliding item with icon options on both sides */} - - - -

HubStruck Notifications

-

A new message in your network

-

Oceanic Next has joined your network

- - - 10:45 AM - - - - - - - - - - - - - - - - - - - - {/* Sliding item with icon start options on end side */} - - - - Sliding Item, Icons Start - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon end options on end side */} - - - - Sliding Item, Icons End - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon top options on end side */} - - - - Sliding Item, Icons Top - - - - - - More - - - - Archive - - - - - {/* Sliding item with icon bottom options on end side */} - - - - Sliding Item, Icons Bottom - - - - - - More - - - - Archive - - - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/item-sliding/usage/vue.md b/core/src/components/item-sliding/usage/vue.md deleted file mode 100644 index 181d2f8952..0000000000 --- a/core/src/components/item-sliding/usage/vue.md +++ /dev/null @@ -1,188 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md deleted file mode 100644 index ef1951465d..0000000000 --- a/core/src/components/item/readme.md +++ /dev/null @@ -1,2190 +0,0 @@ -# ion-item - -Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. Generally they are placed in a list with other items. Items can be swiped, deleted, reordered, edited, and more. - -## Clickable Items - -An item is considered "clickable" if it has an `href` or `button` property set. Clickable items have a few visual differences that indicate they can be interacted with. For example, a clickable item receives the ripple effect upon activation in `md` mode, has a highlight when activated in `ios` mode, and has a [detail arrow](#detail-arrows) by default in `ios` mode. - -## Detail Arrows - -By default [clickable items](#clickable-items) will display a right arrow icon on `ios` mode. To hide the right arrow icon on clickable elements, set the `detail` property to `false`. To show the right arrow icon on an item that doesn't display it naturally, set the `detail` property to `true`. - - - - -## Item Placement - -Item uses named [slots](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) in order to position content. This logic makes it possible to write a complex item with simple, understandable markup without having to worry about styling and positioning the elements. - -The below chart details the item slots and where it will place the element inside of the item: - -| Slot | Description | -|---------|-----------------------------------------------------------------------------| -| `start` | Placed to the left of all other content in LTR, and to the `right` in RTL. | -| `end` | Placed to the right of all other content in LTR, and to the `left` in RTL. | -| none | Placed inside of the input wrapper. | - - -### Text Alignment - -Items left align text and add an ellipsis when the text is wider than the item. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for classes that can be added to `` to transform the text. - - -## Input Highlight - -### Highlight Height - -Items containing an input will highlight the bottom border of the input with a different color when focused, valid, or invalid. By default, `md` items have a highlight with a height set to `2px` and `ios` has no highlight (technically the height is set to `0`). The height can be changed using the `--highlight-height` CSS property. To turn off the highlight, set this variable to `0`. For more information on setting CSS properties, see the [theming documentation](/docs/theming/css-variables). - -### Highlight Color - -The highlight color changes based on the item state, but all of the states use Ionic colors by default. When focused, the input highlight will use the `primary` color. If the input is valid it will use the `success` color, and invalid inputs will use the `danger` color. See the [CSS Custom Properties](#css-custom-properties) section below for the highlight color variables. - -### Counter Formatter - -When using `counter`, the default behavior is to format the value that gets displayed as `itemLength / maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property. See the [Usage](#usage) section for an example. - - - - - -## Usage - -### Angular - -```html - - - - Item - - - - - - - Button Item - - - - - - - Anchor Item - - - - - - Secondary Color Item - - -``` - -### Detail Arrows - -```html - - - Standard Item with Detail Arrow - - - - - - Button Item with Detail Arrow - - - - - - Anchor Item with no Detail Arrow - - -``` - -### List Items - -```html - - - - Item - - - - - - No Lines Item - - - - - - Multiline text that should wrap when it is too long - to fit on one line in the item. - - - - - - -

H3 Primary Title

- -

Paragraph line 1

- -

Paragraph line 2 secondary

- - - - - - - Item with Full Lines - - - - -``` - -### Item Lines - -```html - - - Item Lines Inset - - - - - Item Lines Full - - - - - Item Lines None - - - - - - Full Lines Item 1 - - - - Full Lines Item 2 - - - - - - - Inset Lines Item 1 - - - - Inset Lines Item 2 - - - - - - - No lines Item 1 - - - - No lines Item 2 - - - - No lines Item 3 - - -``` - - -### Media Items - -```html - - - - - - Avatar Start, Button Item - - - - - - Thumbnail End, Anchor Item - - - - - - - - - - - -

H2 Title Text

-

Button on right

- - View - - - - - - - -

H3 Title Text

-

Icon on right

- - - -``` - -### Buttons in Items - -```html - - - Start - - Button Start/End - - End - - - - - - Start Icon - - - Buttons with Icons - - - End Icon - - - - - - - - Icon only Buttons - - - - -``` - -### Icons in Items - -```html - - - Icon End - - - - - - - Large Icon End - - - - - - - Small Icon End - - - - - - - - Icon Start - - - - - - Two Icons End - - - - -``` - -### Item Inputs - -```html - - Datetime - - - - - Select - - No Game Console - NES - Nintendo64 - PlayStation - Sega Genesis - Sega Saturn - SNES - - - - - Toggle - - - - - Floating Input - - - - - Input (placeholder) - - - - - Input (Fill: Solid) - - - - - Input (Fill: Outline) - - - - - Helper and Error Text - - Helper Text - Error Text - - - - Checkbox - - - - - Range - - -``` - -### Item Counter - -```html - - Counter - - -``` - -### Item Counter Formatter - -```html - - Counter - - - -``` - -```typescript - -import { Component } from '@angular/core'; - -@Component({…}) -export class MyComponent { - - counterFormatter(inputLength: number, maxLength: number) { - return `${maxLength - inputLength} characters remaining`; - } -} - -``` - - -### Javascript - -```html - - - - Item - - - - - - - Button Item - - - - - - - Anchor Item - - - - - - Secondary Color Item - - -``` - -### Detail Arrows - -```html - - - Standard Item with Detail Arrow - - - - - - Button Item with Detail Arrow - - - - - - Anchor Item with no Detail Arrow - - -``` - -### List Items - -```html - - - - Item - - - - - - No Lines Item - - - - - - Multiline text that should wrap when it is too long - to fit on one line in the item. - - - - - - -

H3 Primary Title

- -

Paragraph line 1

- -

Paragraph line 2 secondary

- - - - - - - Item with Full Lines - - - - -``` - -### Item Lines - -```html - - - Item Lines Inset - - - - - Item Lines Full - - - - - Item Lines None - - - - - - Full Lines Item 1 - - - - Full Lines Item 2 - - - - - - - Inset Lines Item 1 - - - - Inset Lines Item 2 - - - - - - - No lines Item 1 - - - - No lines Item 2 - - - - No lines Item 3 - - -``` - - -### Media Items - -```html - - - - - - Avatar Start, Button Item - - - - - - Thumbnail End, Anchor Item - - - - - - - - - - - -

H2 Title Text

-

Button on right

- - View - - - - - - - -

H3 Title Text

-

Icon on right

- - - -``` - -### Buttons in Items - -```html - - - Start - - Button Start/End - - End - - - - - - Start Icon - - - Buttons with Icons - - - End Icon - - - - - - - - Icon only Buttons - - - - -``` - -### Icons in Items - -```html - - - Icon End - - - - - - - Large Icon End - - - - - - - Small Icon End - - - - - - - - Icon Start - - - - - - Two Icons End - - - - -``` - -### Item Inputs - -```html - - Datetime - - - - - Select - - No Game Console - NES - Nintendo64 - PlayStation - Sega Genesis - Sega Saturn - SNES - - - - - Toggle - - - - - Floating Input - - - - - Input (placeholder) - - - - - Input (Fill: Solid) - - - - - Input (Fill: Outline) - - - - - Helper and Error Text - - Helper Text - Error Text - - - - Checkbox - - - - - Range - - -``` - -### Item Counter - -```html - - Counter - - -``` - -### Item Counter Formatter - -```html - - Counter - - - - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonDatetime, IonSelect, IonSelectOption, IonToggle, IonInput, IonCheckbox, IonRange, IonNote } from '@ionic/react'; -import { closeCircle, home, star, navigate, informationCircle, checkmarkCircle, shuffle } from 'ionicons/icons'; - -export const ItemExamples: React.FC = () => { - return ( - - - - ItemExamples - - - - {/*-- Default Item --*/} - - - Item - - - - {/*-- Item as a Button --*/} - { }}> - - Button Item - - - - {/*-- Item as an Anchor --*/} - - - Anchor Item - - - - - - Secondary Color Item - - - - {/*-- Detail Arrows --*/} - - - Standard Item with Detail Arrow - - - - { }} detail> - - Button Item with Detail Arrow - - - - - - Anchor Item with no Detail Arrow - - - - - - - Item - - - - - - No Lines Item - - - - - - Multiline text that should wrap when it is too long - to fit on one line in the item. - - - - - - -

H3 Primary Title

- -

Paragraph line 1

- -

Paragraph line 2 secondary

- - - - - - - Item with Full Lines - - - - - {/*-- Item Inset Lines --*/} - - Item Lines Inset - - - {/*-- Item Full Lines --*/} - - Item Lines Full - - - {/*-- Item None Lines --*/} - - Item Lines None - - - {/*-- List Full Lines --*/} - - - Full Lines Item 1 - - - - Full Lines Item 2 - - - - {/*-- List Inset Lines --*/} - - - Inset Lines Item 1 - - - - Inset Lines Item 2 - - - - {/*-- List No Lines --*/} - - - No lines Item 1 - - - - No lines Item 2 - - - - No lines Item 3 - - - - { }}> - - - - - Avatar Start, Button Item - - - - - - Thumbnail End, Anchor Item - - - - - - - - - - - -

H2 Title Text

-

Button on right

- - View - - - { }}> - - - - -

H3 Title Text

-

Icon on right

- - - - - {/*-- Buttons in Items --*/} - - - Start - - Button Start/End - - End - - - - - - Start Icon - - - Buttons with Icons - - - End Icon - - - - - - - - Icon only Buttons - - - - - - - - Icon End - - - - - - - Large Icon End - - - - - - - Small Icon End - - - - - - - - Icon Start - - - - - - Two Icons End - - - - - - - Datetime - - - - - Select - - No Game Console - NES - Nintendo64 - PlayStation - Sega Genesis - Sega Saturn - SNES - - - - - Toggle - - - - - Floating Input - - - - - Input (placeholder) - - - - - Input (Fill: Solid) - - - - - Input (Fill: Outline) - - - - - Helper and Error Text - - Helper Text - Error Text - - - - Checkbox - - - - - Range - - - - {/*-- Item Counter --*/} - - Counter - - - - {/*-- Item Counter Formatter --*/} - `${maxLength - inputLength} characters remaining`}> - Counter - - - - - ); -}; -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - buttonClick() { - console.log('Clicked button'); - } - - render() { - return [ - // Default Item - - - Item - - , - - // Item as a Button - this.buttonClick()}> - - Button Item - - , - - // Item as an Anchor - - - Anchor Item - - , - - - - Secondary Color Item - - - ]; - } -} -``` - -### Detail Arrows - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - buttonClick() { - console.log('Clicked button'); - } - - render() { - return [ - - - Standard Item with Detail Arrow - - , - - this.buttonClick()} detail> - - Button Item with Detail Arrow - - , - - - - Anchor Item with no Detail Arrow - - - ]; - } -} -``` - -### List Items - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - - - - Item - - , - - - - No Lines Item - - , - - - - Multiline text that should wrap when it is too long - to fit on one line in the item. - - , - - - - -

H3 Primary Title

- -

Paragraph line 1

- -

Paragraph line 2 secondary

- - - , - - - - Item with Full Lines - - - - ]; - } -} -``` - -### Item Lines - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - // Item Inset Lines - - Item Lines Inset - , - - // Item Full Lines - - Item Lines Full - , - - // Item None Lines - - Item Lines None - , - - // List Full Lines - - - Full Lines Item 1 - - - - Full Lines Item 2 - - , - - // List Inset Lines - - - Inset Lines Item 1 - - - - Inset Lines Item 2 - - , - - // List No Lines - - - No lines Item 1 - - - - No lines Item 2 - - - - No lines Item 3 - - - ]; - } -} -``` - -### Media Items - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - testClick() { - console.log('Test click'); - } - - render() { - return [ - this.testClick()}> - - - - - Avatar Start, Button Item - - , - - - - Thumbnail End, Anchor Item - - - - - , - - - - - - -

H2 Title Text

-

Button on right

- - View - , - - this.testClick()}> - - - - -

H3 Title Text

-

Icon on right

- - - - ]; - } -} -``` - -### Buttons in Items - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - - - Start - - Button Start/End - - End - - , - - - - Start Icon - - - Buttons with Icons - - - End Icon - - , - - - - - - Icon only Buttons - - - - - ]; - } -} -``` - -### Icons in Items - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - - - Icon End - - - , - - - - Large Icon End - - - , - - - - Small Icon End - - - , - - - - - Icon Start - - , - - - - Two Icons End - - - - - ]; - } -} -``` - -### Item Inputs - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - - Datetime - - , - - - Select - - No Game Console - NES - Nintendo64 - PlayStation - Sega Genesis - Sega Saturn - SNES - - , - - - Toggle - - , - - - Floating Input - - , - - - Input (placeholder) - - , - - - Input (Fill: Solid) - - , - - - Input (Fill: Outline) - - , - - - Helper and Error Text - - Helper Text - Error Text - , - - - Checkbox - - , - - - Range - - - ]; - } -} -``` - -### Item Counter - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - - Counter - - - ]; - } -} -``` - -### Item Counter Formatter - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - `${maxLength - inputLength} characters remaining`}> - Counter - - - ]; - } -} -``` - - -### Vue - -```html - -``` - -### Detail Arrows - -```html - -``` - -### List Items - -```html - -``` - -### Item Lines - -```html - -``` - - -### Media Items - -```html - -``` - -### Buttons in Items - -```html - -``` - -### Icons in Items - -```html - -``` - -### Item Inputs - -```html - - - -``` - -### Item Counter - -```html - -``` - -### Item Counter Formatter - -```html - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------------- | -| `button` | `button` | If `true`, a button tag will be rendered and the item will be tappable. | `boolean` | `false` | -| `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). | `string \| undefined` | `undefined` | -| `counter` | `counter` | If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `ion-input` or `ion-textarea`. | `boolean` | `false` | -| `counterFormatter` | -- | A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength". | `((inputLength: number, maxLength: number) => string) \| undefined` | `undefined` | -| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present. | `boolean \| undefined` | `undefined` | -| `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. | `string` | `chevronForward` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the item. | `boolean` | `false` | -| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` | -| `fill` | `fill` | The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode. | `"outline" \| "solid" \| undefined` | `undefined` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | -| `lines` | `lines` | How the bottom border should be displayed on the item. | `"full" \| "inset" \| "none" \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` | -| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` | -| `shape` | `shape` | The shape of the item. If "round" it will have increased border radius. | `"round" \| undefined` | `undefined` | -| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | -| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` | - - -## Slots - -| Slot | Description | -| ---------- | ------------------------------------------------------------------------------- | -| | Content is placed between the named slots if provided without a slot. | -| `"end"` | Content is placed to the right of the item text in LTR, and to the left in RTL. | -| `"error"` | Content is placed under the item and displayed when an error is detected. | -| `"helper"` | Content is placed under the item and displayed when no error is detected. | -| `"start"` | Content is placed to the left of the item text in LTR, and to the right in RTL. | - - -## Shadow Parts - -| Part | Description | -| --------------- | ---------------------------------------------------------------------------- | -| `"detail-icon"` | The chevron icon for the item. Only applies when `detail="true"`. | -| `"native"` | The native HTML button, anchor or div element that wraps all child elements. | - - -## CSS Custom Properties - -| Name | Description | -| -------------------------------- | ------------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the item | -| `--background-activated` | Background of the item when pressed. Note: setting this will interfere with the Material Design ripple. | -| `--background-activated-opacity` | Opacity of the item background when pressed | -| `--background-focused` | Background of the item when focused with the tab key | -| `--background-focused-opacity` | Opacity of the item background when focused with the tab key | -| `--background-hover` | Background of the item on hover | -| `--background-hover-opacity` | Opacity of the background of the item on hover | -| `--border-color` | Color of the item border | -| `--border-radius` | Radius of the item border | -| `--border-style` | Style of the item border | -| `--border-width` | Width of the item border | -| `--color` | Color of the item | -| `--color-activated` | Color of the item when pressed | -| `--color-focused` | Color of the item when focused with the tab key | -| `--color-hover` | Color of the item on hover | -| `--detail-icon-color` | Color of the item detail icon | -| `--detail-icon-font-size` | Font size of the item detail icon | -| `--detail-icon-opacity` | Opacity of the item detail icon | -| `--highlight-color-focused` | The color of the highlight on the item when focused | -| `--highlight-color-invalid` | The color of the highlight on the item when invalid | -| `--highlight-color-valid` | The color of the highlight on the item when valid | -| `--highlight-height` | The height of the highlight on the item | -| `--inner-border-width` | Width of the item inner border | -| `--inner-box-shadow` | Box shadow of the item inner | -| `--inner-padding-bottom` | Bottom padding of the item inner | -| `--inner-padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item inner | -| `--inner-padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item inner | -| `--inner-padding-top` | Top padding of the item inner | -| `--min-height` | Minimum height of the item | -| `--padding-bottom` | Bottom padding of the item | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the item | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the item | -| `--padding-top` | Top padding of the item | -| `--ripple-color` | Color of the item ripple effect | -| `--transition` | Transition of the item | - - -## Dependencies - -### Used by - - - [ion-datetime](../datetime) - - ion-select-popover - -### Depends on - -- ion-icon -- [ion-ripple-effect](../ripple-effect) -- [ion-note](../note) - -### Graph -```mermaid -graph TD; - ion-item --> ion-icon - ion-item --> ion-ripple-effect - ion-item --> ion-note - ion-datetime --> ion-item - ion-select-popover --> ion-item - style ion-item fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/item/usage/angular.md b/core/src/components/item/usage/angular.md deleted file mode 100644 index 190ada7b09..0000000000 --- a/core/src/components/item/usage/angular.md +++ /dev/null @@ -1,368 +0,0 @@ -```html - - - - Item - - - - - - - Button Item - - - - - - - Anchor Item - - - - - - Secondary Color Item - - -``` - -### Detail Arrows - -```html - - - Standard Item with Detail Arrow - - - - - - Button Item with Detail Arrow - - - - - - Anchor Item with no Detail Arrow - - -``` - -### List Items - -```html - - - - Item - - - - - - No Lines Item - - - - - - Multiline text that should wrap when it is too long - to fit on one line in the item. - - - - - - -

H3 Primary Title

- -

Paragraph line 1

- -

Paragraph line 2 secondary

- - - - - - - Item with Full Lines - - - - -``` - -### Item Lines - -```html - - - Item Lines Inset - - - - - Item Lines Full - - - - - Item Lines None - - - - - - Full Lines Item 1 - - - - Full Lines Item 2 - - - - - - - Inset Lines Item 1 - - - - Inset Lines Item 2 - - - - - - - No lines Item 1 - - - - No lines Item 2 - - - - No lines Item 3 - - -``` - - -### Media Items - -```html - - - - - - Avatar Start, Button Item - - - - - - Thumbnail End, Anchor Item - - - - - - - - - - - -

H2 Title Text

-

Button on right

- - View - - - - - - - -

H3 Title Text

-

Icon on right

- - - -``` - -### Buttons in Items - -```html - - - Start - - Button Start/End - - End - - - - - - Start Icon - - - Buttons with Icons - - - End Icon - - - - - - - - Icon only Buttons - - - - -``` - -### Icons in Items - -```html - - - Icon End - - - - - - - Large Icon End - - - - - - - Small Icon End - - - - - - - - Icon Start - - - - - - Two Icons End - - - - -``` - -### Item Inputs - -```html - - Datetime - - - - - Select - - No Game Console - NES - Nintendo64 - PlayStation - Sega Genesis - Sega Saturn - SNES - - - - - Toggle - - - - - Floating Input - - - - - Input (placeholder) - - - - - Input (Fill: Solid) - - - - - Input (Fill: Outline) - - - - - Helper and Error Text - - Helper Text - Error Text - - - - Checkbox - - - - - Range - - -``` - -### Item Counter - -```html - - Counter - - -``` - -### Item Counter Formatter - -```html - - Counter - - - -``` - -```typescript - -import { Component } from '@angular/core'; - -@Component({…}) -export class MyComponent { - - counterFormatter(inputLength: number, maxLength: number) { - return `${maxLength - inputLength} characters remaining`; - } -} - -``` diff --git a/core/src/components/item/usage/javascript.md b/core/src/components/item/usage/javascript.md deleted file mode 100644 index 0f7df63a96..0000000000 --- a/core/src/components/item/usage/javascript.md +++ /dev/null @@ -1,359 +0,0 @@ -```html - - - - Item - - - - - - - Button Item - - - - - - - Anchor Item - - - - - - Secondary Color Item - - -``` - -### Detail Arrows - -```html - - - Standard Item with Detail Arrow - - - - - - Button Item with Detail Arrow - - - - - - Anchor Item with no Detail Arrow - - -``` - -### List Items - -```html - - - - Item - - - - - - No Lines Item - - - - - - Multiline text that should wrap when it is too long - to fit on one line in the item. - - - - - - -

H3 Primary Title

- -

Paragraph line 1

- -

Paragraph line 2 secondary

- - - - - - - Item with Full Lines - - - - -``` - -### Item Lines - -```html - - - Item Lines Inset - - - - - Item Lines Full - - - - - Item Lines None - - - - - - Full Lines Item 1 - - - - Full Lines Item 2 - - - - - - - Inset Lines Item 1 - - - - Inset Lines Item 2 - - - - - - - No lines Item 1 - - - - No lines Item 2 - - - - No lines Item 3 - - -``` - - -### Media Items - -```html - - - - - - Avatar Start, Button Item - - - - - - Thumbnail End, Anchor Item - - - - - - - - - - - -

H2 Title Text

-

Button on right

- - View - - - - - - - -

H3 Title Text

-

Icon on right

- - - -``` - -### Buttons in Items - -```html - - - Start - - Button Start/End - - End - - - - - - Start Icon - - - Buttons with Icons - - - End Icon - - - - - - - - Icon only Buttons - - - - -``` - -### Icons in Items - -```html - - - Icon End - - - - - - - Large Icon End - - - - - - - Small Icon End - - - - - - - - Icon Start - - - - - - Two Icons End - - - - -``` - -### Item Inputs - -```html - - Datetime - - - - - Select - - No Game Console - NES - Nintendo64 - PlayStation - Sega Genesis - Sega Saturn - SNES - - - - - Toggle - - - - - Floating Input - - - - - Input (placeholder) - - - - - Input (Fill: Solid) - - - - - Input (Fill: Outline) - - - - - Helper and Error Text - - Helper Text - Error Text - - - - Checkbox - - - - - Range - - -``` - -### Item Counter - -```html - - Counter - - -``` - -### Item Counter Formatter - -```html - - Counter - - - - - -``` \ No newline at end of file diff --git a/core/src/components/item/usage/react.md b/core/src/components/item/usage/react.md deleted file mode 100644 index 6d371571be..0000000000 --- a/core/src/components/item/usage/react.md +++ /dev/null @@ -1,336 +0,0 @@ -```tsx -import React from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonItem, IonLabel, IonList, IonText, IonAvatar, IonThumbnail, IonButton, IonIcon, IonDatetime, IonSelect, IonSelectOption, IonToggle, IonInput, IonCheckbox, IonRange, IonNote } from '@ionic/react'; -import { closeCircle, home, star, navigate, informationCircle, checkmarkCircle, shuffle } from 'ionicons/icons'; - -export const ItemExamples: React.FC = () => { - return ( - - - - ItemExamples - - - - {/*-- Default Item --*/} - - - Item - - - - {/*-- Item as a Button --*/} - { }}> - - Button Item - - - - {/*-- Item as an Anchor --*/} - - - Anchor Item - - - - - - Secondary Color Item - - - - {/*-- Detail Arrows --*/} - - - Standard Item with Detail Arrow - - - - { }} detail> - - Button Item with Detail Arrow - - - - - - Anchor Item with no Detail Arrow - - - - - - - Item - - - - - - No Lines Item - - - - - - Multiline text that should wrap when it is too long - to fit on one line in the item. - - - - - - -

H3 Primary Title

- -

Paragraph line 1

- -

Paragraph line 2 secondary

- - - - - - - Item with Full Lines - - - - - {/*-- Item Inset Lines --*/} - - Item Lines Inset - - - {/*-- Item Full Lines --*/} - - Item Lines Full - - - {/*-- Item None Lines --*/} - - Item Lines None - - - {/*-- List Full Lines --*/} - - - Full Lines Item 1 - - - - Full Lines Item 2 - - - - {/*-- List Inset Lines --*/} - - - Inset Lines Item 1 - - - - Inset Lines Item 2 - - - - {/*-- List No Lines --*/} - - - No lines Item 1 - - - - No lines Item 2 - - - - No lines Item 3 - - - - { }}> - - - - - Avatar Start, Button Item - - - - - - Thumbnail End, Anchor Item - - - - - - - - - - - -

H2 Title Text

-

Button on right

- - View - - - { }}> - - - - -

H3 Title Text

-

Icon on right

- - - - - {/*-- Buttons in Items --*/} - - - Start - - Button Start/End - - End - - - - - - Start Icon - - - Buttons with Icons - - - End Icon - - - - - - - - Icon only Buttons - - - - - - - - Icon End - - - - - - - Large Icon End - - - - - - - Small Icon End - - - - - - - - Icon Start - - - - - - Two Icons End - - - - - - - Datetime - - - - - Select - - No Game Console - NES - Nintendo64 - PlayStation - Sega Genesis - Sega Saturn - SNES - - - - - Toggle - - - - - Floating Input - - - - - Input (placeholder) - - - - - Input (Fill: Solid) - - - - - Input (Fill: Outline) - - - - - Helper and Error Text - - Helper Text - Error Text - - - - Checkbox - - - - - Range - - - - {/*-- Item Counter --*/} - - Counter - - - - {/*-- Item Counter Formatter --*/} - `${maxLength - inputLength} characters remaining`}> - Counter - - - - - ); -}; -``` diff --git a/core/src/components/item/usage/stencil.md b/core/src/components/item/usage/stencil.md deleted file mode 100644 index cb295f8a55..0000000000 --- a/core/src/components/item/usage/stencil.md +++ /dev/null @@ -1,483 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - buttonClick() { - console.log('Clicked button'); - } - - render() { - return [ - // Default Item - - - Item - - , - - // Item as a Button - this.buttonClick()}> - - Button Item - - , - - // Item as an Anchor - - - Anchor Item - - , - - - - Secondary Color Item - - - ]; - } -} -``` - -### Detail Arrows - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - buttonClick() { - console.log('Clicked button'); - } - - render() { - return [ - - - Standard Item with Detail Arrow - - , - - this.buttonClick()} detail> - - Button Item with Detail Arrow - - , - - - - Anchor Item with no Detail Arrow - - - ]; - } -} -``` - -### List Items - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - - - - Item - - , - - - - No Lines Item - - , - - - - Multiline text that should wrap when it is too long - to fit on one line in the item. - - , - - - - -

H3 Primary Title

- -

Paragraph line 1

- -

Paragraph line 2 secondary

- - - , - - - - Item with Full Lines - - - - ]; - } -} -``` - -### Item Lines - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - // Item Inset Lines - - Item Lines Inset - , - - // Item Full Lines - - Item Lines Full - , - - // Item None Lines - - Item Lines None - , - - // List Full Lines - - - Full Lines Item 1 - - - - Full Lines Item 2 - - , - - // List Inset Lines - - - Inset Lines Item 1 - - - - Inset Lines Item 2 - - , - - // List No Lines - - - No lines Item 1 - - - - No lines Item 2 - - - - No lines Item 3 - - - ]; - } -} -``` - -### Media Items - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - testClick() { - console.log('Test click'); - } - - render() { - return [ - this.testClick()}> - - - - - Avatar Start, Button Item - - , - - - - Thumbnail End, Anchor Item - - - - - , - - - - - - -

H2 Title Text

-

Button on right

- - View - , - - this.testClick()}> - - - - -

H3 Title Text

-

Icon on right

- - - - ]; - } -} -``` - -### Buttons in Items - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - - - Start - - Button Start/End - - End - - , - - - - Start Icon - - - Buttons with Icons - - - End Icon - - , - - - - - - Icon only Buttons - - - - - ]; - } -} -``` - -### Icons in Items - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - - - Icon End - - - , - - - - Large Icon End - - - , - - - - Small Icon End - - - , - - - - - Icon Start - - , - - - - Two Icons End - - - - - ]; - } -} -``` - -### Item Inputs - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - - Datetime - - , - - - Select - - No Game Console - NES - Nintendo64 - PlayStation - Sega Genesis - Sega Saturn - SNES - - , - - - Toggle - - , - - - Floating Input - - , - - - Input (placeholder) - - , - - - Input (Fill: Solid) - - , - - - Input (Fill: Outline) - - , - - - Helper and Error Text - - Helper Text - Error Text - , - - - Checkbox - - , - - - Range - - - ]; - } -} -``` - -### Item Counter - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - - Counter - - - ]; - } -} -``` - -### Item Counter Formatter - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'item-example', - styleUrl: 'item-example.css' -}) -export class ItemExample { - render() { - return [ - `${maxLength - inputLength} characters remaining`}> - Counter - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/item/usage/vue.md b/core/src/components/item/usage/vue.md deleted file mode 100644 index 1ce5168433..0000000000 --- a/core/src/components/item/usage/vue.md +++ /dev/null @@ -1,447 +0,0 @@ -```html - -``` - -### Detail Arrows - -```html - -``` - -### List Items - -```html - -``` - -### Item Lines - -```html - -``` - - -### Media Items - -```html - -``` - -### Buttons in Items - -```html - -``` - -### Icons in Items - -```html - -``` - -### Item Inputs - -```html - - - -``` - -### Item Counter - -```html - -``` - -### Item Counter Formatter - -```html - - -``` \ No newline at end of file diff --git a/core/src/components/label/readme.md b/core/src/components/label/readme.md deleted file mode 100644 index 78a4c49198..0000000000 --- a/core/src/components/label/readme.md +++ /dev/null @@ -1,319 +0,0 @@ -# ion-label - -Label is a wrapper element that can be used in combination with `ion-item`, `ion-input`, `ion-toggle`, and more. The position of the label inside of an item can be inline, fixed, stacked, or floating. - - - - - -## Usage - -### Angular / javascript - -```html - -Label - - -Primary Label -Secondary Label -Danger Label -Light Label -Dark Label - - - - Default Item - - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - - - - - Default Input - - - - - Fixed - - - - - Floating - - - - - Stacked - - - - - Toggle - - - - - - Checkbox - -``` - - -### React - -```tsx -import React from 'react'; -import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react'; - -export const LabelExample: React.FC = () => ( - - {/*-- Default Label --*/} - Label
- - {/*-- Label Colors --*/} - Primary Label
- Secondary Label
- Danger Label
- Light Label
- Dark Label
- - {/*-- Item Labels --*/} - - Default Item - - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - - - {/*-- Input Labels --*/} - - Default Input - - - - - Fixed - - - - - Floating - - - - - Stacked - - - - - Toggle - - - - - - Checkbox - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'label-example', - styleUrl: 'label-example.css' -}) -export class LabelExample { - render() { - return [ - // Default Label - Label, - - // Label Colors - Primary Label, - Secondary Label, - Danger Label, - Light Label, - Dark Label, - - // Item Labels - - Default Item - , - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - , - - // Input Labels - - Default Input - - , - - - Fixed - - , - - - Floating - - , - - - Stacked - - , - - - Toggle - - , - - - - Checkbox - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `position` | `position` | The position determines where and how the label behaves inside an item. | `"fixed" \| "floating" \| "stacked" \| undefined` | `undefined` | - - -## CSS Custom Properties - -| Name | Description | -| --------- | ------------------ | -| `--color` | Color of the label | - - -## Dependencies - -### Used by - - - [ion-datetime](../datetime) - - ion-select-popover - -### Graph -```mermaid -graph TD; - ion-datetime --> ion-label - ion-select-popover --> ion-label - style ion-label fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/label/usage/angular.md b/core/src/components/label/usage/angular.md deleted file mode 100644 index 7b0d1bda67..0000000000 --- a/core/src/components/label/usage/angular.md +++ /dev/null @@ -1,54 +0,0 @@ -```html - -Label - - -Primary Label -Secondary Label -Danger Label -Light Label -Dark Label - - - - Default Item - - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - - - - - Default Input - - - - - Fixed - - - - - Floating - - - - - Stacked - - - - - Toggle - - - - - - Checkbox - -``` diff --git a/core/src/components/label/usage/javascript.md b/core/src/components/label/usage/javascript.md deleted file mode 100644 index 7b0d1bda67..0000000000 --- a/core/src/components/label/usage/javascript.md +++ /dev/null @@ -1,54 +0,0 @@ -```html - -Label - - -Primary Label -Secondary Label -Danger Label -Light Label -Dark Label - - - - Default Item - - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - - - - - Default Input - - - - - Fixed - - - - - Floating - - - - - Stacked - - - - - Toggle - - - - - - Checkbox - -``` diff --git a/core/src/components/label/usage/react.md b/core/src/components/label/usage/react.md deleted file mode 100644 index 9188f94414..0000000000 --- a/core/src/components/label/usage/react.md +++ /dev/null @@ -1,61 +0,0 @@ -```tsx -import React from 'react'; -import { IonLabel, IonItem, IonInput, IonToggle, IonCheckbox, IonContent } from '@ionic/react'; - -export const LabelExample: React.FC = () => ( - - {/*-- Default Label --*/} - Label
- - {/*-- Label Colors --*/} - Primary Label
- Secondary Label
- Danger Label
- Light Label
- Dark Label
- - {/*-- Item Labels --*/} - - Default Item - - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - - - {/*-- Input Labels --*/} - - Default Input - - - - - Fixed - - - - - Floating - - - - - Stacked - - - - - Toggle - - - - - - Checkbox - - -); -``` diff --git a/core/src/components/label/usage/stencil.md b/core/src/components/label/usage/stencil.md deleted file mode 100644 index 50129df190..0000000000 --- a/core/src/components/label/usage/stencil.md +++ /dev/null @@ -1,66 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'label-example', - styleUrl: 'label-example.css' -}) -export class LabelExample { - render() { - return [ - // Default Label - Label, - - // Label Colors - Primary Label, - Secondary Label, - Danger Label, - Light Label, - Dark Label, - - // Item Labels - - Default Item - , - - - - Multi-line text that should wrap when it is too long - to fit on one line in the item. - - , - - // Input Labels - - Default Input - - , - - - Fixed - - , - - - Floating - - , - - - Stacked - - , - - - Toggle - - , - - - - Checkbox - - ]; - } -} -``` diff --git a/core/src/components/label/usage/vue.md b/core/src/components/label/usage/vue.md deleted file mode 100644 index 4b2b0ee510..0000000000 --- a/core/src/components/label/usage/vue.md +++ /dev/null @@ -1,77 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/list-header/readme.md b/core/src/components/list-header/readme.md deleted file mode 100644 index 8a4c52483e..0000000000 --- a/core/src/components/list-header/readme.md +++ /dev/null @@ -1,351 +0,0 @@ -# ion-list-header - -ListHeader a header component for a list. -Unlike ItemDivider, ListHeaders are styled to be stand-out from the rest of the list items. - - - - - -## Usage - -### Angular / javascript - -```html - - - List Header - - - - - New This Week - See All - - - - - New This Week - See All - - - - - New This Week - See All - - - - - New This Week - See All - - - - - - Recent - Clear - - - -

I got you babe

- - - - - - - Trending - - - -

harry styles

- - - - -

christmas

- - - - -

falling

- - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonButton, IonContent, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react'; - -export const ListHeaderExample: React.FC = () => ( - - {/*-- Default List Header --*/} - - List Header - - - {/*-- List Header with Button --*/} - - New This Week - See All - - - {/*-- List Header with Outline Button --*/} - - New This Week - See All - - - {/*-- List Header Full Lines --*/} - - New This Week - See All - - - {/*-- List Header Inset Lines --*/} - - New This Week - See All - - - {/*-- List Headers in Lists --*/} - - - Recent - Clear - - - -

I got you babe

- - - - - - - Trending - - - -

harry styles

- - - - -

christmas

- - - - -

falling

- - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'list-header-example', - styleUrl: 'list-header-example.css' -}) -export class ListHeaderExample { - render() { - return [ - // Default List Header - - List Header - , - - // List Header with Button - - New This Week - See All - , - - // List Header with Outline Button - - New This Week - See All - , - - // List Header Full Lines - - New This Week - See All - , - - // List Header Inset Lines - - New This Week - See All - , - - // List Headers in Lists - - - Recent - Clear - - - -

I got you babe

- - - , - - - - Trending - - - -

harry styles

- - - - -

christmas

- - - - -

falling

- - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `lines` | `lines` | How the bottom border should be displayed on the list header. | `"full" \| "inset" \| "none" \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | - - -## CSS Custom Properties - -| Name | Description | -| ---------------------- | ------------------------------------- | -| `--background` | Background of the list header | -| `--border-color` | Color of the list header border | -| `--border-style` | Style of the list header border | -| `--border-width` | Width of the list header border | -| `--color` | Color of the list header text | -| `--inner-border-width` | Width of the inner list header border | - - -## Dependencies - -### Used by - - - ion-select-popover - -### Graph -```mermaid -graph TD; - ion-select-popover --> ion-list-header - style ion-list-header fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/list-header/usage/angular.md b/core/src/components/list-header/usage/angular.md deleted file mode 100644 index 067dd0f6c0..0000000000 --- a/core/src/components/list-header/usage/angular.md +++ /dev/null @@ -1,64 +0,0 @@ -```html - - - List Header - - - - - New This Week - See All - - - - - New This Week - See All - - - - - New This Week - See All - - - - - New This Week - See All - - - - - - Recent - Clear - - - -

I got you babe

- - - - - - - Trending - - - -

harry styles

- - - - -

christmas

- - - - -

falling

- - - -``` diff --git a/core/src/components/list-header/usage/javascript.md b/core/src/components/list-header/usage/javascript.md deleted file mode 100644 index 067dd0f6c0..0000000000 --- a/core/src/components/list-header/usage/javascript.md +++ /dev/null @@ -1,64 +0,0 @@ -```html - - - List Header - - - - - New This Week - See All - - - - - New This Week - See All - - - - - New This Week - See All - - - - - New This Week - See All - - - - - - Recent - Clear - - - -

I got you babe

- - - - - - - Trending - - - -

harry styles

- - - - -

christmas

- - - - -

falling

- - - -``` diff --git a/core/src/components/list-header/usage/react.md b/core/src/components/list-header/usage/react.md deleted file mode 100644 index f8e2227d71..0000000000 --- a/core/src/components/list-header/usage/react.md +++ /dev/null @@ -1,71 +0,0 @@ -```tsx -import React from 'react'; -import { IonButton, IonContent, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react'; - -export const ListHeaderExample: React.FC = () => ( - - {/*-- Default List Header --*/} - - List Header - - - {/*-- List Header with Button --*/} - - New This Week - See All - - - {/*-- List Header with Outline Button --*/} - - New This Week - See All - - - {/*-- List Header Full Lines --*/} - - New This Week - See All - - - {/*-- List Header Inset Lines --*/} - - New This Week - See All - - - {/*-- List Headers in Lists --*/} - - - Recent - Clear - - - -

I got you babe

- - - - - - - Trending - - - -

harry styles

- - - - -

christmas

- - - - -

falling

- - - - -); -``` diff --git a/core/src/components/list-header/usage/stencil.md b/core/src/components/list-header/usage/stencil.md deleted file mode 100644 index 2c44087240..0000000000 --- a/core/src/components/list-header/usage/stencil.md +++ /dev/null @@ -1,76 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'list-header-example', - styleUrl: 'list-header-example.css' -}) -export class ListHeaderExample { - render() { - return [ - // Default List Header - - List Header - , - - // List Header with Button - - New This Week - See All - , - - // List Header with Outline Button - - New This Week - See All - , - - // List Header Full Lines - - New This Week - See All - , - - // List Header Inset Lines - - New This Week - See All - , - - // List Headers in Lists - - - Recent - Clear - - - -

I got you babe

- - - , - - - - Trending - - - -

harry styles

- - - - -

christmas

- - - - -

falling

- - - - ]; - } -} -``` diff --git a/core/src/components/list-header/usage/vue.md b/core/src/components/list-header/usage/vue.md deleted file mode 100644 index d7fbad1fa3..0000000000 --- a/core/src/components/list-header/usage/vue.md +++ /dev/null @@ -1,75 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/list/readme.md b/core/src/components/list/readme.md deleted file mode 100644 index f75160e0df..0000000000 --- a/core/src/components/list/readme.md +++ /dev/null @@ -1,436 +0,0 @@ -# ion-list - -Lists are made up of multiple rows of items which can contain text, buttons, toggles, -icons, thumbnails, and much more. Lists generally contain items with similar data content, such as images and text. - -Lists support several interactions including swiping items to reveal options, dragging to reorder items within the list, and deleting items. - - - - - -## Usage - -### Angular - -```html - - - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - - - - - - Input - - - - Toggle - - - - Radio - - - - Checkbox - - - - - - - - - Item - - - Unread - - - - - - Item - - - Unread - - - -``` - - -### Javascript - -```html - - - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - - - - - - Input - - - - Toggle - - - - Radio - - - - Checkbox - - - - - - - - - Item - - - Unread - - - - - - Item - - - Unread - - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions, IonContent } from '@ionic/react'; - -export const ListExample: React.FC = () => ( - - {/*-- List of Text Items --*/} - - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - - - {/*-- List of Input Items --*/} - - - Input - - - - Toggle - - - - Radio - - - - Checkbox - - - - - {/*-- List of Sliding Items --*/} - - - - Item - - - {}}>Unread - - - - - - Item - - - {}}>Unread - - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'list-example', - styleUrl: 'list-example.css' -}) -export class ListExample { - unread(ev: Event) { - console.log('Item is unread', ev); - } - - render() { - return [ - // List of Text Items - - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - , - - // List of Input Items - - - Input - - - - Toggle - - - - Radio - - - - Checkbox - - - , - - // List of Sliding Items - - - - Item - - - this.unread(ev)}>Unread - - - - - - Item - - - this.unread(ev)}>Unread - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ------------------------------------------------------------------- | ------------------------------------------ | ----------- | -| `inset` | `inset` | If `true`, the list will have margin around it and rounded corners. | `boolean` | `false` | -| `lines` | `lines` | How the bottom border should be displayed on all items. | `"full" \| "inset" \| "none" \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | - - -## Methods - -### `closeSlidingItems() => Promise` - -If `ion-item-sliding` are used inside the list, this method closes -any open sliding item. - -Returns `true` if an actual `ion-item-sliding` is closed. - -#### Returns - -Type: `Promise` - - - - -## Dependencies - -### Used by - - - ion-select-popover - -### Graph -```mermaid -graph TD; - ion-select-popover --> ion-list - style ion-list fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/list/usage/angular.md b/core/src/components/list/usage/angular.md deleted file mode 100644 index 5e6e134cd9..0000000000 --- a/core/src/components/list/usage/angular.md +++ /dev/null @@ -1,61 +0,0 @@ -```html - - - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - - - - - - Input - - - - Toggle - - - - Radio - - - - Checkbox - - - - - - - - - Item - - - Unread - - - - - - Item - - - Unread - - - -``` \ No newline at end of file diff --git a/core/src/components/list/usage/javascript.md b/core/src/components/list/usage/javascript.md deleted file mode 100644 index f746a07c7a..0000000000 --- a/core/src/components/list/usage/javascript.md +++ /dev/null @@ -1,61 +0,0 @@ -```html - - - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - - - - - - Input - - - - Toggle - - - - Radio - - - - Checkbox - - - - - - - - - Item - - - Unread - - - - - - Item - - - Unread - - - -``` \ No newline at end of file diff --git a/core/src/components/list/usage/react.md b/core/src/components/list/usage/react.md deleted file mode 100644 index 11ad2cf06d..0000000000 --- a/core/src/components/list/usage/react.md +++ /dev/null @@ -1,68 +0,0 @@ -```tsx -import React from 'react'; -import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions, IonContent } from '@ionic/react'; - -export const ListExample: React.FC = () => ( - - {/*-- List of Text Items --*/} - - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - - - {/*-- List of Input Items --*/} - - - Input - - - - Toggle - - - - Radio - - - - Checkbox - - - - - {/*-- List of Sliding Items --*/} - - - - Item - - - {}}>Unread - - - - - - Item - - - {}}>Unread - - - - -); -``` diff --git a/core/src/components/list/usage/stencil.md b/core/src/components/list/usage/stencil.md deleted file mode 100644 index 1556a16009..0000000000 --- a/core/src/components/list/usage/stencil.md +++ /dev/null @@ -1,77 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'list-example', - styleUrl: 'list-example.css' -}) -export class ListExample { - unread(ev: Event) { - console.log('Item is unread', ev); - } - - render() { - return [ - // List of Text Items - - - Pokémon Yellow - - - Mega Man X - - - The Legend of Zelda - - - Pac-Man - - - Super Mario World - - , - - // List of Input Items - - - Input - - - - Toggle - - - - Radio - - - - Checkbox - - - , - - // List of Sliding Items - - - - Item - - - this.unread(ev)}>Unread - - - - - - Item - - - this.unread(ev)}>Unread - - - - ]; - } -} -``` diff --git a/core/src/components/list/usage/vue.md b/core/src/components/list/usage/vue.md deleted file mode 100644 index eadb80c056..0000000000 --- a/core/src/components/list/usage/vue.md +++ /dev/null @@ -1,94 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md deleted file mode 100644 index 1d8af440fa..0000000000 --- a/core/src/components/loading/readme.md +++ /dev/null @@ -1,473 +0,0 @@ -# ion-loading - -An overlay that can be used to indicate activity while blocking user interaction. The loading indicator appears on top of the app's content, and can be dismissed by the app to resume user interaction with the app. It includes an optional backdrop, which can be disabled by setting `showBackdrop: false` upon creation. - -## Dismissing - -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. - -## Interfaces - -### LoadingOptions - -```typescript -interface LoadingOptions { - spinner?: SpinnerTypes | null; - message?: string | IonicSafeString; - cssClass?: string | string[]; - showBackdrop?: boolean; - duration?: number; - translucent?: boolean; - animated?: boolean; - backdropDismiss?: boolean; - mode?: Mode; - keyboardClose?: boolean; - id?: string; - htmlAttributes?: { [key: string]: any }; - - enterAnimation?: AnimationBuilder; - leaveAnimation?: AnimationBuilder; -} -``` - - - - - -## Usage - -### Angular - -```typescript -import { Component } from '@angular/core'; -import { LoadingController } from '@ionic/angular'; - -@Component({ - selector: 'loading-example', - templateUrl: 'loading-example.html', - styleUrls: ['./loading-example.css'] -}) -export class LoadingExample { - constructor(public loadingController: LoadingController) {} - - async presentLoading() { - const loading = await this.loadingController.create({ - cssClass: 'my-custom-class', - message: 'Please wait...', - duration: 2000 - }); - await loading.present(); - - const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed!'); - } - - async presentLoadingWithOptions() { - const loading = await this.loadingController.create({ - spinner: null, - duration: 5000, - message: 'Click the backdrop to dismiss early...', - translucent: true, - cssClass: 'custom-class custom-loading', - backdropDismiss: true - }); - await loading.present(); - - const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed with role:', role); - } -} -``` - - -### 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; - - document.body.appendChild(loading); - await loading.present(); - - const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed!'); -} - -async function presentLoadingWithOptions() { - const loading = document.createElement('ion-loading'); - - loading.spinner = null; - loading.duration = 5000; - loading.message = 'Click the backdrop to dismiss early...'; - loading.translucent = true; - loading.cssClass = 'custom-class custom-loading'; - loading.backdropDismiss = true; - - document.body.appendChild(loading); - await loading.present(); - - const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed with role:', role); -} -``` - - -### React - -```tsx -/* Using with useIonLoading Hook */ - -import React from 'react'; -import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react'; - -interface LoadingProps {} - -const LoadingExample: React.FC = () => { - const [present, dismiss] = useIonLoading(); - /** - * The recommended way of dismissing is to use the `dismiss` property - * on `IonLoading`, but the `dismiss` method returned from `useIonLoading` - * can be used for more complex scenarios. - */ - return ( - - - { - present({ - message: 'Loading...', - duration: 3000 - }) - }} - > - Show Loading - - present('Loading', 2000, 'dots')} - > - Show Loading using params - - - - ); -}; -``` - -```tsx -/* Using with IonLoading Component */ - -import React, { useState } from 'react'; -import { IonLoading, IonButton, IonContent } from '@ionic/react'; - -export const LoadingExample: React.FC = () => { - const [showLoading, setShowLoading] = useState(true); - - setTimeout(() => { - setShowLoading(false); - }, 2000); - - return ( - - setShowLoading(true)}>Show Loading - setShowLoading(false)} - message={'Please wait...'} - duration={5000} - /> - - ); -}; -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -import { loadingController } from '@ionic/core'; - -@Component({ - tag: 'loading-example', - styleUrl: 'loading-example.css' -}) -export class LoadingExample { - async presentLoading() { - const loading = await loadingController.create({ - cssClass: 'my-custom-class', - message: 'Please wait...', - duration: 2000 - }); - await loading.present(); - - const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed!', role, data); - } - - async presentLoadingWithOptions() { - const loading = await loadingController.create({ - spinner: null, - duration: 5000, - message: 'Click the backdrop to dismiss early...', - translucent: true, - cssClass: 'custom-class custom-loading', - backdropDismiss: true - }); - await loading.present(); - - const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed with role:', role, data); - } - - render() { - return [ - - this.presentLoading()}>Present Loading - this.presentLoadingWithOptions()}>Present Loading: Options - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - -Developers can also use this component directly in their template: - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the loading indicator will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the loading indicator will be dismissed when the backdrop is clicked. | `boolean` | `false` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `duration` | `duration` | Number of milliseconds to wait before dismissing the loading indicator. | `number` | `0` | -| `enterAnimation` | -- | Animation to use when the loading indicator is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the loader. | `undefined \| { [key: string]: any; }` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the loading indicator is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `message` | `message` | Optional text content to display in the loading indicator. | `IonicSafeString \| string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the loading indicator. | `boolean` | `true` | -| `spinner` | `spinner` | The name of the spinner to display. | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| null \| undefined` | `undefined` | -| `translucent` | `translucent` | If `true`, the loading indicator will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | - - -## Events - -| Event | Description | Type | -| ----------------------- | ----------------------------------------- | -------------------------------------- | -| `ionLoadingDidDismiss` | Emitted after the loading has dismissed. | `CustomEvent>` | -| `ionLoadingDidPresent` | Emitted after the loading has presented. | `CustomEvent` | -| `ionLoadingWillDismiss` | Emitted before the loading has dismissed. | `CustomEvent>` | -| `ionLoadingWillPresent` | Emitted before the loading has presented. | `CustomEvent` | - - -## Methods - -### `dismiss(data?: any, role?: string | undefined) => Promise` - -Dismiss the loading overlay after it has been presented. - -#### Returns - -Type: `Promise` - - - -### `onDidDismiss() => Promise>` - -Returns a promise that resolves when the loading did dismiss. - -#### Returns - -Type: `Promise>` - - - -### `onWillDismiss() => Promise>` - -Returns a promise that resolves when the loading will dismiss. - -#### Returns - -Type: `Promise>` - - - -### `present() => Promise` - -Present the loading overlay after it has been created. - -#### Returns - -Type: `Promise` - - - - -## CSS Custom Properties - -| Name | Description | -| -------------------- | ------------------------------------ | -| `--backdrop-opacity` | Opacity of the backdrop | -| `--background` | Background of the loading dialog | -| `--height` | Height of the loading dialog | -| `--max-height` | Maximum height of the loading dialog | -| `--max-width` | Maximum width of the loading dialog | -| `--min-height` | Minimum height of the loading dialog | -| `--min-width` | Minimum width of the loading dialog | -| `--spinner-color` | Color of the loading spinner | -| `--width` | Width of the loading dialog | - - -## Dependencies - -### Depends on - -- [ion-backdrop](../backdrop) -- [ion-spinner](../spinner) - -### Graph -```mermaid -graph TD; - ion-loading --> ion-backdrop - ion-loading --> ion-spinner - style ion-loading fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/loading/usage/angular.md b/core/src/components/loading/usage/angular.md deleted file mode 100644 index 4c3a939128..0000000000 --- a/core/src/components/loading/usage/angular.md +++ /dev/null @@ -1,45 +0,0 @@ -```typescript -import { Component } from '@angular/core'; -import { LoadingController } from '@ionic/angular'; - -@Component({ - selector: 'loading-example', - templateUrl: 'loading-example.html', - styleUrls: ['./loading-example.css'] -}) -export class LoadingExample { - constructor(public loadingController: LoadingController) {} - - async presentLoading() { - const loading = await this.loadingController.create({ - cssClass: 'my-custom-class', - message: 'Please wait...', - duration: 2000 - }); - await loading.present(); - - const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed!'); - } - - async presentLoadingWithOptions() { - const loading = await this.loadingController.create({ - spinner: null, - duration: 5000, - message: 'Click the backdrop to dismiss early...', - translucent: true, - cssClass: 'custom-class custom-loading', - backdropDismiss: true - }); - await loading.present(); - - const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed with role:', role); - } -} -``` - - -### 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 deleted file mode 100644 index b5f5afb183..0000000000 --- a/core/src/components/loading/usage/javascript.md +++ /dev/null @@ -1,32 +0,0 @@ -```javascript -async function presentLoading() { - const loading = document.createElement('ion-loading'); - - loading.cssClass = 'my-custom-class'; - loading.message = 'Please wait...'; - loading.duration = 2000; - - document.body.appendChild(loading); - await loading.present(); - - const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed!'); -} - -async function presentLoadingWithOptions() { - const loading = document.createElement('ion-loading'); - - loading.spinner = null; - loading.duration = 5000; - loading.message = 'Click the backdrop to dismiss early...'; - loading.translucent = true; - loading.cssClass = 'custom-class custom-loading'; - loading.backdropDismiss = true; - - document.body.appendChild(loading); - await loading.present(); - - const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed with role:', role); -} -``` diff --git a/core/src/components/loading/usage/react.md b/core/src/components/loading/usage/react.md deleted file mode 100644 index a9f65cb595..0000000000 --- a/core/src/components/loading/usage/react.md +++ /dev/null @@ -1,68 +0,0 @@ -```tsx -/* Using with useIonLoading Hook */ - -import React from 'react'; -import { IonButton, IonContent, IonPage, useIonLoading } from '@ionic/react'; - -interface LoadingProps {} - -const LoadingExample: React.FC = () => { - const [present, dismiss] = useIonLoading(); - /** - * The recommended way of dismissing is to use the `dismiss` property - * on `IonLoading`, but the `dismiss` method returned from `useIonLoading` - * can be used for more complex scenarios. - */ - return ( - - - { - present({ - message: 'Loading...', - duration: 3000 - }) - }} - > - Show Loading - - present('Loading', 2000, 'dots')} - > - Show Loading using params - - - - ); -}; -``` - -```tsx -/* Using with IonLoading Component */ - -import React, { useState } from 'react'; -import { IonLoading, IonButton, IonContent } from '@ionic/react'; - -export const LoadingExample: React.FC = () => { - const [showLoading, setShowLoading] = useState(true); - - setTimeout(() => { - setShowLoading(false); - }, 2000); - - return ( - - setShowLoading(true)}>Show Loading - setShowLoading(false)} - message={'Please wait...'} - duration={5000} - /> - - ); -}; -``` diff --git a/core/src/components/loading/usage/stencil.md b/core/src/components/loading/usage/stencil.md deleted file mode 100644 index 880290fd95..0000000000 --- a/core/src/components/loading/usage/stencil.md +++ /dev/null @@ -1,47 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -import { loadingController } from '@ionic/core'; - -@Component({ - tag: 'loading-example', - styleUrl: 'loading-example.css' -}) -export class LoadingExample { - async presentLoading() { - const loading = await loadingController.create({ - cssClass: 'my-custom-class', - message: 'Please wait...', - duration: 2000 - }); - await loading.present(); - - const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed!', role, data); - } - - async presentLoadingWithOptions() { - const loading = await loadingController.create({ - spinner: null, - duration: 5000, - message: 'Click the backdrop to dismiss early...', - translucent: true, - cssClass: 'custom-class custom-loading', - backdropDismiss: true - }); - await loading.present(); - - const { role, data } = await loading.onDidDismiss(); - console.log('Loading dismissed with role:', role, data); - } - - render() { - return [ - - this.presentLoading()}>Present Loading - this.presentLoadingWithOptions()}>Present Loading: Options - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/loading/usage/vue.md b/core/src/components/loading/usage/vue.md deleted file mode 100644 index ff9782307d..0000000000 --- a/core/src/components/loading/usage/vue.md +++ /dev/null @@ -1,86 +0,0 @@ -```html - - - -``` - -Developers can also use this component directly in their template: - -```html - - - -``` diff --git a/core/src/components/menu-button/readme.md b/core/src/components/menu-button/readme.md deleted file mode 100644 index 63049b69e7..0000000000 --- a/core/src/components/menu-button/readme.md +++ /dev/null @@ -1,65 +0,0 @@ -# ion-menu-button - -Menu Button is component that automatically creates the icon and functionality to open a menu on a page. - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | -| `autoHide` | `auto-hide` | Automatically hides the menu button when the corresponding menu is not active | `boolean` | `true` | -| `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). | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the menu button. | `boolean` | `false` | -| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | - - -## Shadow Parts - -| Part | Description | -| ---------- | ------------------------------------------------------------- | -| `"icon"` | The menu button icon (uses ion-icon). | -| `"native"` | The native HTML button element that wraps all child elements. | - - -## CSS Custom Properties - -| Name | Description | -| ------------------------------ | --------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the menu button | -| `--background-focused` | Background of the menu button when focused with the tab key | -| `--background-focused-opacity` | Opacity of the menu button background when focused with the tab key | -| `--background-hover` | Background of the menu button on hover | -| `--background-hover-opacity` | Opacity of the background on hover | -| `--border-radius` | Border radius of the menu button | -| `--color` | Color of the menu button | -| `--color-focused` | Color of the menu button when focused with the tab key | -| `--color-hover` | Color of the menu button on hover | -| `--padding-bottom` | Bottom padding of the button | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the button | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the button | -| `--padding-top` | Top padding of the button | - - -## Dependencies - -### Depends on - -- ion-icon -- [ion-ripple-effect](../ripple-effect) - -### Graph -```mermaid -graph TD; - ion-menu-button --> ion-icon - ion-menu-button --> ion-ripple-effect - style ion-menu-button fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/menu-toggle/readme.md b/core/src/components/menu-toggle/readme.md deleted file mode 100644 index 4d75a4bed8..0000000000 --- a/core/src/components/menu-toggle/readme.md +++ /dev/null @@ -1,175 +0,0 @@ -# ion-menu-toggle - -The MenuToggle component can be used to toggle a menu open or closed. - -By default, it's only visible when the selected menu is active. A menu is active when it can be opened/closed. If the menu is disabled or it's being presented as a split-pane, the menu is marked as non-active and ion-menu-toggle hides itself. - -In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` property can be set to `false`. - - - - -## Usage - -### Angular - -```html - - - - - Example Menu - - - - - Menu Item - - - -
- - - Toggle Menu - - -
- -``` - - -### Javascript - -```html - - - - - Example Menu - - - - - Menu Item - - - -
- - - Toggle Menu - - -
- -``` - - -### React - -```tsx -import React from 'react'; -import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonMenuToggle, IonButton, IonPage } from '@ionic/react'; - -export const MenuExample: React.FC = () => ( - <> - - - - Example Menu - - - - - Menu Item - - - - - - - Toggle Menu - - - - -); -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `autoHide` | `auto-hide` | Automatically hides the content when the corresponding menu is not active. By default, it's `true`. Change it to `false` in order to keep `ion-menu-toggle` always visible regardless the state of the menu. | `boolean` | `true` | -| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle. If this property is not used, `ion-menu-toggle` will toggle the first menu that is active. | `string \| undefined` | `undefined` | - - -## Slots - -| Slot | Description | -| ---- | --------------------------------------------------------------- | -| | Content is placed inside the toggle to act as the click target. | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/menu-toggle/usage/angular.md b/core/src/components/menu-toggle/usage/angular.md deleted file mode 100644 index b69f34b801..0000000000 --- a/core/src/components/menu-toggle/usage/angular.md +++ /dev/null @@ -1,24 +0,0 @@ -```html - - - - - Example Menu - - - - - Menu Item - - - -
- - - Toggle Menu - - -
- -``` - diff --git a/core/src/components/menu-toggle/usage/javascript.md b/core/src/components/menu-toggle/usage/javascript.md deleted file mode 100644 index 3886232349..0000000000 --- a/core/src/components/menu-toggle/usage/javascript.md +++ /dev/null @@ -1,24 +0,0 @@ -```html - - - - - Example Menu - - - - - Menu Item - - - -
- - - Toggle Menu - - -
- -``` - diff --git a/core/src/components/menu-toggle/usage/react.md b/core/src/components/menu-toggle/usage/react.md deleted file mode 100644 index f84a429667..0000000000 --- a/core/src/components/menu-toggle/usage/react.md +++ /dev/null @@ -1,28 +0,0 @@ -```tsx -import React from 'react'; -import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonMenuToggle, IonButton, IonPage } from '@ionic/react'; - -export const MenuExample: React.FC = () => ( - <> - - - - Example Menu - - - - - Menu Item - - - - - - - Toggle Menu - - - - -); -``` \ No newline at end of file diff --git a/core/src/components/menu-toggle/usage/vue.md b/core/src/components/menu-toggle/usage/vue.md deleted file mode 100644 index 307f0d9e4d..0000000000 --- a/core/src/components/menu-toggle/usage/vue.md +++ /dev/null @@ -1,53 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md deleted file mode 100644 index 922c77c00d..0000000000 --- a/core/src/components/menu/readme.md +++ /dev/null @@ -1,619 +0,0 @@ -# ion-menu - -The Menu component is a navigation drawer that slides in from the side of the current view. -By default, it slides in from the left, but the side can be overridden. -The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types. -The menu element should be a sibling to the root content element. -There can be any number of menus attached to the content. -These can be controlled from the templates, or programmatically using the MenuController. - -## Interfaces - -### MenuCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface MenuCustomEvent extends CustomEvent { - detail: T; - target: HTMLIonMenuElement; -} -``` - - - - -## Usage - -### Angular - -```html - - - - Start Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - - - - Custom Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - - - - End Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - -``` - -```typescript -import { Component } from '@angular/core'; -import { MenuController } from '@ionic/angular'; - -@Component({ - selector: 'menu-example', - templateUrl: 'menu-example.html', - styleUrls: ['./menu-example.css'], -}) -export class MenuExample { - -constructor(private menu: MenuController) { } - - openFirst() { - this.menu.enable(true, 'first'); - this.menu.open('first'); - } - - openEnd() { - this.menu.open('end'); - } - - openCustom() { - this.menu.enable(true, 'custom'); - this.menu.open('custom'); - } -} -``` - -```css -.my-custom-menu { - --width: 500px; -} -``` - - -### Javascript - -```html - - - - - Start Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - - - - Custom Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - - - - End Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - -
- - - Menu - Basic - - - - Open Start Menu - Open End Menu - Open Custom Menu - -
- - -``` - -```javascript - - - -``` - -```css -.my-custom-menu { - --width: 500px; -} -``` - - -### React - -```tsx -import React from 'react'; -import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react'; - -export const MenuExample: React.FC = () => ( - <> - - - - Start Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - - - - Custom Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - - - - End Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -import { menuController } from '@ionic/core'; - -@Component({ - tag: 'menu-example', - styleUrl: 'menu-example.css' -}) -export class MenuExample { - openFirst() { - menuController.enable(true, 'first'); - menuController.open('first'); - } - - openEnd() { - menuController.open('end'); - } - - openCustom() { - menuController.enable(true, 'custom'); - menuController.open('custom'); - } - - render() { - return [ - - - - Start Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - , - - - - - Custom Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - , - - - - - End Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - , - - // A router outlet can be placed here instead - - this.openFirst()}>Open Start Menu - this.openEnd()}>Open End Menu - this.openCustom()}>Open Custom Menu - - ]; - } -} -``` - -```css -.my-custom-menu { - --width: 500px; -} -``` - - -### Vue - -```html - - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `contentId` | `content-id` | The `id` of the main content. When using a router this is typically `ion-router-outlet`. When not using a router, this is typically your main view's `ion-content`. This is not the id of the `ion-content` inside of your `ion-menu`. | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the menu is disabled. | `boolean` | `false` | -| `maxEdgeStart` | `max-edge-start` | The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. | `number` | `50` | -| `menuId` | `menu-id` | An id for the menu. | `string \| undefined` | `undefined` | -| `side` | `side` | Which side of the view the menu should be placed. | `"end" \| "start"` | `'start'` | -| `swipeGesture` | `swipe-gesture` | If `true`, swiping the menu is enabled. | `boolean` | `true` | -| `type` | `type` | The display type of the menu. Available options: `"overlay"`, `"reveal"`, `"push"`. | `string \| undefined` | `undefined` | - - -## Events - -| Event | Description | Type | -| -------------- | -------------------------------------------- | ------------------- | -| `ionDidClose` | Emitted when the menu is closed. | `CustomEvent` | -| `ionDidOpen` | Emitted when the menu is open. | `CustomEvent` | -| `ionWillClose` | Emitted when the menu is about to be closed. | `CustomEvent` | -| `ionWillOpen` | Emitted when the menu is about to be opened. | `CustomEvent` | - - -## Methods - -### `close(animated?: boolean) => Promise` - -Closes the menu. If the menu is already closed or it can't be closed, -it returns `false`. - -#### Returns - -Type: `Promise` - - - -### `isActive() => Promise` - -Returns `true` is the menu is active. - -A menu is active when it can be opened or closed, meaning it's enabled -and it's not part of a `ion-split-pane`. - -#### Returns - -Type: `Promise` - - - -### `isOpen() => Promise` - -Returns `true` is the menu is open. - -#### Returns - -Type: `Promise` - - - -### `open(animated?: boolean) => Promise` - -Opens the menu. If the menu is already open or it can't be opened, -it returns `false`. - -#### Returns - -Type: `Promise` - - - -### `setOpen(shouldOpen: boolean, animated?: boolean) => Promise` - -Opens or closes the button. -If the operation can't be completed successfully, it returns `false`. - -#### Returns - -Type: `Promise` - - - -### `toggle(animated?: boolean) => Promise` - -Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. -If the operation can't be completed successfully, it returns `false`. - -#### Returns - -Type: `Promise` - - - - -## Shadow Parts - -| Part | Description | -| ------------- | ---------------------------------------------------------------------- | -| `"backdrop"` | The backdrop that appears over the main content when the menu is open. | -| `"container"` | The container for the menu content. | - - -## CSS Custom Properties - -| Name | Description | -| -------------- | -------------------------- | -| `--background` | Background of the menu | -| `--height` | Height of the menu | -| `--max-height` | Maximum height of the menu | -| `--max-width` | Maximum width of the menu | -| `--min-height` | Minimum height of the menu | -| `--min-width` | Minimum width of the menu | -| `--width` | Width of the menu | - - -## Dependencies - -### Depends on - -- [ion-backdrop](../backdrop) - -### Graph -```mermaid -graph TD; - ion-menu --> ion-backdrop - style ion-menu fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/menu/usage/angular.md b/core/src/components/menu/usage/angular.md deleted file mode 100644 index 9128229400..0000000000 --- a/core/src/components/menu/usage/angular.md +++ /dev/null @@ -1,89 +0,0 @@ -```html - - - - Start Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - - - - Custom Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - - - - End Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - -``` - -```typescript -import { Component } from '@angular/core'; -import { MenuController } from '@ionic/angular'; - -@Component({ - selector: 'menu-example', - templateUrl: 'menu-example.html', - styleUrls: ['./menu-example.css'], -}) -export class MenuExample { - -constructor(private menu: MenuController) { } - - openFirst() { - this.menu.enable(true, 'first'); - this.menu.open('first'); - } - - openEnd() { - this.menu.open('end'); - } - - openCustom() { - this.menu.enable(true, 'custom'); - this.menu.open('custom'); - } -} -``` - -```css -.my-custom-menu { - --width: 500px; -} -``` \ No newline at end of file diff --git a/core/src/components/menu/usage/javascript.md b/core/src/components/menu/usage/javascript.md deleted file mode 100644 index cb02cbb8ae..0000000000 --- a/core/src/components/menu/usage/javascript.md +++ /dev/null @@ -1,97 +0,0 @@ -```html - - - - - Start Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - - - - Custom Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - - - - End Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - -
- - - Menu - Basic - - - - Open Start Menu - Open End Menu - Open Custom Menu - -
- - -``` - -```javascript - - - -``` - -```css -.my-custom-menu { - --width: 500px; -} -``` \ No newline at end of file diff --git a/core/src/components/menu/usage/react.md b/core/src/components/menu/usage/react.md deleted file mode 100644 index 0cca2c05df..0000000000 --- a/core/src/components/menu/usage/react.md +++ /dev/null @@ -1,60 +0,0 @@ -```tsx -import React from 'react'; -import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react'; - -export const MenuExample: React.FC = () => ( - <> - - - - Start Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - - - - Custom Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - - - - End Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - - - -); -``` diff --git a/core/src/components/menu/usage/stencil.md b/core/src/components/menu/usage/stencil.md deleted file mode 100644 index d5bf61b915..0000000000 --- a/core/src/components/menu/usage/stencil.md +++ /dev/null @@ -1,93 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -import { menuController } from '@ionic/core'; - -@Component({ - tag: 'menu-example', - styleUrl: 'menu-example.css' -}) -export class MenuExample { - openFirst() { - menuController.enable(true, 'first'); - menuController.open('first'); - } - - openEnd() { - menuController.open('end'); - } - - openCustom() { - menuController.enable(true, 'custom'); - menuController.open('custom'); - } - - render() { - return [ - - - - Start Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - , - - - - - Custom Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - , - - - - - End Menu - - - - - Menu Item - Menu Item - Menu Item - Menu Item - Menu Item - - - , - - // A router outlet can be placed here instead - - this.openFirst()}>Open Start Menu - this.openEnd()}>Open End Menu - this.openCustom()}>Open Custom Menu - - ]; - } -} -``` - -```css -.my-custom-menu { - --width: 500px; -} -``` \ No newline at end of file diff --git a/core/src/components/menu/usage/vue.md b/core/src/components/menu/usage/vue.md deleted file mode 100644 index a2996e2a55..0000000000 --- a/core/src/components/menu/usage/vue.md +++ /dev/null @@ -1,102 +0,0 @@ -```html - - - - -``` \ No newline at end of file diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md deleted file mode 100644 index 2d2536bd13..0000000000 --- a/core/src/components/modal/readme.md +++ /dev/null @@ -1,1732 +0,0 @@ -# ion-modal - -A Modal is a dialog that appears on top of the app's content, and must be dismissed by the app before interaction can resume. It is useful as a select component when there are a lot of options to choose from, or when filtering items in a list, as well as many other use cases. - -## Presenting - -There are two ways to use `ion-modal`: inline or via the `modalController`. Each method comes with different considerations, so be sure to use the approach that best fits your use case. - -## Inline Modals - -`ion-modal` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the modal. See [Usage](#usage) for an example of how to write a modal inline. - -When using `ion-modal` with Angular, React, or Vue, the component you pass in will be destroyed when the modal is dismissed. As this functionality is provided by the JavaScript framework, using `ion-modal` without a JavaScript framework will not destroy the component you passed in. If this is a needed functionality, we recommend using the `modalController` instead. - -### Angular - -Since the component you passed in needs to be created when the modal is presented and destroyed when the modal is dismissed, we are unable to project the content using `` internally. Instead, we use `` which expects an `` to be passed in. As a result, when passing in your component you will need to wrap it in an ``: - -```html - - - - - -``` - -### When to use - -Using a modal inline is useful when you do not want to explicitly wire up click events to open the modal. For example, you can use the `is-open` property to easily present or dismiss a modal based on some state in your application. - -If you need fine grained control over when the modal is presented and dismissed, we recommend you use the `modalController`. - -## Controller Modals - -`ion-modal` can also be presented programmatically by using the `modalController` imported from Ionic Framework. This allows you to have complete control over when a modal is presented above and beyond the customization that inline modals give you. See [Usage](#usage) for an example of how to use the `modalController`. - -### When to use - -We typically recommend that you write your modals inline as it streamlines the amount of code in your application. You should only use the `modalController` for complex use cases where writing a modal inline is impractical. - -## Card Modal - -Developers can create a card modal effect where the modal appears as a card stacked on top of your app's main content. To create a card modal, developers need to set the `presentingElement` property and the `swipeToClose` properties on `ion-modal`. - -The `presentingElement` property accepts a reference to the element that should display under your modal. This is typically a reference to `ion-router-outlet`. - -The `swipeToClose` property can be used to control whether or not the card modal can be swiped to close. - -See [Usage](#usage) for examples on how to use the sheet modal. - -## Sheet Modal - -Developers can create a sheet modal effect similar to the drawer components available in maps applications. To create a sheet modal, developers need to set the `breakpoints` and `initialBreakpoint` properties on `ion-modal`. - -The `breakpoints` property accepts an array which states each breakpoint that the sheet can snap to when swiped. A `breakpoints` property of `[0, 0.5, 1]` would indicate that the sheet can be swiped to show 0% of the modal, 50% of the modal, and 100% of the modal. When the modal is swiped to 0%, the modal will be automatically dismissed. - -The `initialBreakpoint` property is required so that the sheet modal knows which breakpoint to start at when presenting. The `initialBreakpoint` value must also exist in the `breakpoints` array. Given a `breakpoints` value of `[0, 0.5, 1]`, an `initialBreakpoint` value of `0.5` would be valid as `0.5` is in the `breakpoints` array. An `initialBreakpoint` value of `0.25` would not be valid as `0.25` does not exist in the `breakpoints` array. - -The `backdropBreakpoint` property can be used to customize the point at which the `ion-backdrop` will begin to fade in. This is useful when creating interfaces that have content underneath the sheet that should remain interactive. A common use case is a sheet modal that overlays a map where the map is interactive until the sheet is fully expanded. - -See [Usage](#usage) for examples on how to use the sheet modal. - -> Note: The `swipeToClose` property has no effect when using a sheet modal as sheet modals must be swipeable in order to be usable. - -## Preventing a Modal from Dismissing - -When entering data into a modal, it is often desirable to have a way of preventing accidental data loss. The `canDismiss` property on `ion-modal` gives developers control over when a modal is allowed to dismiss. - -There are two different ways of using the `canDismiss` property. - -> Note: When using a sheet modal, `canDismiss` will not be checked on swipe if there is no `0` breakpoint set. However, it will still be checked when pressing `Esc` or the hardware back button. - -### Setting a boolean value - -Developers can set `canDismiss` to a boolean value. If `canDismiss` is `true`, then the modal will close when users attempt to dismiss the modal. If `canDismiss` is `false`, then the modal will not close when users attempt to dismiss the modal. - -Setting a boolean value should be used when you need to require a particular action to be taken prior to a modal being dismissed. For example, if developers want to require that a "Terms of Use" checkbox is checked prior to closing the modal, they could set `canDismiss` to `false` initially and update it to `true` when the checkbox is checked. - -### Setting a callback function - -Developers can set `canDismiss` to be a function. This function must return a `Promise` that resolves to either `true` or `false`. If the promise resolves to `true`, then the modal will dismiss. If the promise resolves to `false`, then the modal will not dismiss. - -Setting a callback function should be used when you have complex dismissing criteria such as showing a confirmation dialog prior to dismissing the modal. The option that users select in this dialog can then be used to determine whether or not the modal should proceed with dismissing. - -Note that setting a callback function will cause the swipe gesture to be interrupted when using a card or sheet modal. This is because Ionic does not know what your callback function will resolve to ahead of time. - -## Interfaces - -### ModalOptions - -Below you will find all of the options available to you when using the `modalController`. These options should be supplied when calling `modalController.create()`. - -```typescript -interface ModalOptions { - component: any; - componentProps?: { [key: string]: any }; - presentingElement?: HTMLElement; - showBackdrop?: boolean; - backdropDismiss?: boolean; - cssClass?: string | string[]; - animated?: boolean; - swipeToClose?: boolean; - - mode?: 'ios' | 'md'; - keyboardClose?: boolean; - id?: string; - - enterAnimation?: AnimationBuilder; - leaveAnimation?: AnimationBuilder; -} -``` -### ModalCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface ModalCustomEvent extends CustomEvent { - target: HTMLIonModalElement; -} -``` - -## Dismissing - -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. - -## Styling - -Modals are presented at the root of your application so they overlay your entire app. This behavior applies to both inline modals and modals presented from a controller. As a result, custom modal styles can not be scoped to a particular component as they will not apply to the modal. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient. - -> 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. - -> `ion-modal` works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of `0`. This is to avoid the effect of shadows and backdrops getting darker with each added modal. This can be changed by setting the `--box-shadow` and `--backdrop-opacity` CSS variables: -``` -ion-modal.stack-modal { - --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); - --backdrop-opacity: var(--ion-backdrop-opacity, 0.32); -} -``` - -## Interfaces - -### ModalOptions - -```typescript -interface ModalOptions { - component: T; - componentProps?: ComponentProps; - presentingElement?: HTMLElement; - showBackdrop?: boolean; - backdropDismiss?: boolean; - cssClass?: string | string[]; - animated?: boolean; - swipeToClose?: boolean; - - mode?: Mode; - keyboardClose?: boolean; - id?: string; - htmlAttributes?: { [key: string]: any }; - - enterAnimation?: AnimationBuilder; - leaveAnimation?: AnimationBuilder; - - breakpoints?: number[]; - initialBreakpoint?: number; - backdropBreakpoint?: number; - handle?: boolean; -} -``` - - -## Accessibility - -### Keyboard Navigation - -| Key | Function | -| ----- | ------------------- | -| `Esc` | Dismisses the modal | - -### Screen Readers - -Modals have the `aria-modal` attribute applied. This attribute can cause assistive technologies to limit navigation to the modal element's contents. As a result, using gestures that move to the next or previous items may not focus elements outside of the modal. This applies even when the backdrop is disabled in sheet modals using the `backdropBreakpoint` property. - -Assistive technologies will not limit navigation to the modal element's contents if developers manually move focus. However, manually moving focus outside of a modal is not supported in Ionic for modals that have focus trapping enabled. - -See https://w3c.github.io/aria/#aria-modal for more information. - -### Focus Trapping - -When a modal is presented, focus will be trapped inside of the presented modal. Users can focus other interactive elements inside the modal but will never be able to focus interactive elements outside the modal while the modal is presented. For applications that present multiple stacked modals, focus will be trapped on the modal that was presented last. - -Sheet modals that have had their backdrop disabled by the `backdropBreakpoint` property are not subject to focus trapping. - -### Sheet Modals - -Sheet modals allow users to interact with content behind the modal when the `backdropBreakpoint` property is used. The backdrop will be disabled up to and including the specified `backdropBreakpoint` and will be enabled after it. - -When the backdrop is disabled, users will be able to interact with elements outside the sheet modal using a pointer or keyboard. Assistive technologies may not focus outside the sheet modal by default due to the usage of `aria-modal`. We recommend avoiding features such as autofocus here as it can cause assistive technologies to jump between two interactive contexts without warning the user. - - - - -## Usage - -### Angular - -### Inline Modal - -```html - - - - Modal Content - - - - -Click to open modal - - - Modal Content - - - - - - - Modal Content - - - - - - - Modal Content - - - - - - - - - - - - - - Modal Content - - -``` - -```typescript -import { Component } from '@angular/core'; -import { IonRouterOutlet, ActionSheetController } from '@ionic/angular'; - -@Component({ - selector: 'modal-example', - templateUrl: 'modal-example.html', - styleUrls: ['./modal-example.css'] -}) -export class ModalExample { - constructor( - public routerOutlet: IonRouterOutlet, - private actionSheetCtrl: ActionSheetController - ) {} - - async canDismiss() { - const actionSheet = await this.actionSheetCtrl.create({ - header: 'Are you sure you want to discard your changes?', - buttons: [ - { - text: 'Discard Changes', - role: 'destructive' - }, - { - text: 'Keep Editing', - role: 'cancel' - } - ] - }); - - await actionSheet.present(); - - const { role } = await actionSheet.onDidDismiss(); - - if (role === 'destructive') { - return true; - } - - return false; - } -} -``` - -### Modal Controller - -```typescript -import { Component } from '@angular/core'; -import { ModalController } from '@ionic/angular'; -import { ModalPage } from '../modal/modal.page'; - -@Component({ - selector: 'modal-example', - templateUrl: 'modal-example.html', - styleUrls: ['./modal-example.css'] -}) -export class ModalExample { - // The `ion-modal` element reference. - modal: HTMLElement; - - constructor(public modalController: ModalController) {} - - async presentModal() { - const modal = await this.modalController.create({ - component: ModalPage, - cssClass: 'my-custom-class' - }); - return await modal.present(); - } -} -``` - -```typescript -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'modal-page', -}) -export class ModalPage { - - constructor() {} - -} -``` - -> If you need a wrapper element inside of your modal component, we recommend using a `
` so that the component dimensions are still computed properly. - -#### Passing Data - -During creation of a modal, data can be passed in through the `componentProps`. -The previous example can be written to include data: - -```typescript -async presentModal() { - const modal = await this.modalController.create({ - component: ModalPage, - cssClass: 'my-custom-class', - componentProps: { - 'firstName': 'Douglas', - 'lastName': 'Adams', - 'middleInitial': 'N' - } - }); - return await modal.present(); -} -``` - -To get the data passed into the `componentProps`, set it as an `@Input`: - -```typescript -export class ModalPage { - - // Data passed in by componentProps - @Input() firstName: string; - @Input() lastName: string; - @Input() middleInitial: string; - -} -``` - -#### Dismissing a Modal - -A modal can be dismissed by calling the dismiss method on the modal controller and optionally passing any data from the modal. - -```javascript -export class ModalPage { - ... - - dismiss() { - // using the injected ModalController this page - // can "dismiss" itself and optionally pass back data - this.modalController.dismiss({ - 'dismissed': true - }); - } -} -``` - -After being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation: - -```javascript -const { data } = await modal.onWillDismiss(); -console.log(data); -``` - -#### Accessing the Modal Element - -When opening a modal with the modal controller, Ionic will assign the modal HTML element reference to the `modal` property on your component's class instance. - -You can use this property to directly access the `ion-modal` element to add or remove classes or handle additional checks. - -```ts -export class ModalPage implements OnInit { - // The `ion-modal` element reference. - modal: HTMLElement; - - ngOnInit() { - console.log('The HTML ion-modal element', this.modal); // - } -} -``` - -#### Lazy Loading - -When lazy loading a modal, it's important to note that the modal will not be loaded when it is opened, but rather when the module that imports the modal's module is loaded. - -For example, say there exists a `CalendarComponent` and an `EventModal`. The modal is presented by clicking a button in the `CalendarComponent`. In Angular, the `EventModalModule` would need to be included in the `CalendarComponentModule` since the modal is created in the `CalendarComponent`: - -```typescript -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { IonicModule } from '@ionic/angular'; - -import { CalendarComponent } from './calendar.component'; -import { EventModalModule } from '../modals/event/event.module'; - -@NgModule({ - declarations: [ - CalendarComponent - ], - imports: [ - IonicModule, - CommonModule, - EventModalModule - ], - exports: [ - CalendarComponent - ] -}) - -export class CalendarComponentModule {} -``` - -#### Card Modals - -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. - -> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect. - -If you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens. - -```javascript -import { IonRouterOutlet } from '@ionic/angular'; - -constructor(private routerOutlet: IonRouterOutlet) {} - -async presentModal() { - const modal = await this.modalController.create({ - component: ModalPage, - cssClass: 'my-custom-class', - swipeToClose: true, - presentingElement: this.routerOutlet.nativeEl - }); - return await modal.present(); -} -``` - -In most scenarios, using the `ion-router-outlet` element as the `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` element as the `presentingElement`. - -```javascript -import { ModalController } from '@ionic/angular'; - -constructor(private modalController: ModalController) {} - -async presentModal() { - const modal = await this.modalController.create({ - component: ModalPage, - cssClass: 'my-custom-class', - swipeToClose: true, - presentingElement: await this.modalController.getTop() // Get the top-most ion-modal - }); - return await modal.present(); -} -``` - -#### Sheet Modals - -```javascript -import { IonRouterOutlet } from '@ionic/angular'; - -constructor(private routerOutlet: IonRouterOutlet) {} - -async presentModal() { - const modal = await this.modalController.create({ - component: ModalPage, - initialBreakpoint: 0.5, - breakpoints: [0, 0.5, 1] - }); - 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). - - -### Javascript - -### Inline Modal - -```html - - - - Modal Content - - - - Click to open modal - - Modal Content - - - - - Modal Content - - - - - Modal Content - - - - - Modal Content - - - - -``` - -### Using JavaScript - -```javascript -customElements.define('modal-page', class extends HTMLElement { - connectedCallback() { - this.innerHTML = ` - - - Modal Header - - - - - - - - - Modal Content -`; - } -}); - -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); - return modalElement.present(); -} -``` - -> If you need a wrapper element inside of your modal component, we recommend using a `
` so that the component dimensions are still computed properly. - -### Passing Data - -During creation of a modal, data can be passed in through the `componentProps`. The previous example can be written to include data: - -```javascript -const modalElement = document.createElement('ion-modal'); -modalElement.component = 'modal-page'; -modalElement.cssClass = 'my-custom-class'; -modalElement.componentProps = { - 'firstName': 'Douglas', - 'lastName': 'Adams', - 'middleInitial': 'N' -}; -``` - -To get the data passed into the `componentProps`, query for the modal in the `modal-page`: - -```js -customElements.define('modal-page', class extends HTMLElement { - connectedCallback() { - const modalElement = document.querySelector('ion-modal'); - console.log(modalElement.componentProps.firstName); - - ... - } -} -``` - - -### Dismissing a Modal - -A modal can be dismissed by calling the dismiss method and optionally passing any data from the modal. - -```javascript -async function dismissModal() { - await modal.dismiss({ - 'dismissed': true - }); -} -``` - -After being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation: - -```javascript -const { data } = await modalElement.onWillDismiss(); -console.log(data); -``` - - -### Card Modals - -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. - -> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect. - -```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'); -``` - -In most scenarios, using the `ion-nav` element as the `presentingElement` is fine. In cases where you are presenting a card-style modal from within a modal, you should pass in the top-most `ion-modal` element as the `presentingElement`. - -```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 -``` - -### Sheet Modals - -```javascript -const modalElement = document.createElement('ion-modal'); -modalElement.component = 'modal-page'; -modalElement.initialBreakpoint = 0.5; -modalElement.breakpoints = [0, 0.5, 1]; -``` - - -### React - -### Inline Modal - -```tsx -import { React, useRef } from 'react'; -const App: React.FC = () => { - const routerRef = useRef(null); - - return ( - - - - } exact={true} /> - - - - ) -}; - -... - -interface Props { - router: HTMLIonRouterOutletElement | null; -} - -import React from 'react'; -import AppReactComponent from './AppReactComponent'; -import { IonModal, IonContent, IonButton, useIonActionSheet } from '@ionic/react'; -export const ModalExample: React.FC = ({ router }) => { - const [present, dismiss] = useIonActionSheet(); - - const canDismiss = () => { - return new Promise(async (resolve) => { - await present({ - header: 'Are you sure you want to discard your changes?', - buttons: [ - { - text: 'Discard Changes', - role: 'destructive' - }, - { - text: 'Keep Editing', - role: 'cancel' - } - ], - onDidDismiss: (ev: CustomEvent) => { - const role = ev.detail.role; - - if (role === 'destructive') { - resolve(true); - } - - resolve(false); - } - }); - }); - }); - } - - return ( - <> - {/* Default */} - - Modal Content - - - {/* Use a trigger */} - Click to open modal - - Modal Content - - - {/* Sheet Modal */} - - Modal Content - - - {/* Card Modal */} - - Modal Content - - - {/* Passing Props */} - - - - - {/* Require Action Sheet confirmation before dismissing */} - - Modal Content - - - ); -}; -``` - - -### useIonModal Hook - -> `useIonModal` requires being a descendant of ``. If you need to use a modal outside of an ``, consider using the component method instead. - - -```tsx -/* Using with useIonModal Hook */ - -import React, { useState } from 'react'; -import { IonButton, IonContent, IonPage, useIonModal } from '@ionic/react'; - -const Body: React.FC<{ - count: number; - onDismiss: () => void; - onIncrement: () => void; -}> = ({ count, onDismiss, onIncrement }) => ( -
- count: {count} - onIncrement()}> - Increment Count - - onDismiss()}> - Close - -
-); - -const ModalExample: React.FC = () => { - const [count, setCount] = useState(0); - - const handleIncrement = () => { - setCount(count + 1); - }; - - const handleDismiss = () => { - dismiss(); - }; - - /** - * First parameter is the component to show, second is the props to pass - */ - const [present, dismiss] = useIonModal(Body, { - count, - onDismiss: handleDismiss, - onIncrement: handleIncrement, - }); - - return ( - - - { - present({ - cssClass: 'my-class', - }); - }} - > - Show Modal - -
Count: {count}
- - - ); -}; -``` - -```tsx -/* Using with IonModal Component */ - -import React, { useState } from 'react'; -import { IonModal, IonButton, IonContent } from '@ionic/react'; - -export const ModalExample: React.FC = () => { - const [showModal, setShowModal] = useState(false); - - return ( - - -

This is modal content

- setShowModal(false)}>Close Modal - - setShowModal(true)}>Show Modal - - ); -}; -``` - -#### Card Modals - -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. - -> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect. - -```tsx -const App: React.FC = () => { - const routerRef = useRef(null); - - return ( - - - - } exact={true} /> - - - - ) -}; - -... - -interface HomePageProps { - router: HTMLIonRouterOutletElement | null; -} - -const Home: React.FC = ({ router }) => { - const [showModal, setShowModal] = useState(false); - - return ( - - - setShowModal(false)}> -

This is modal content

- - - - ); -}; - -``` - -In most scenarios, setting a ref on `IonRouterOutlet` 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 `IonModal` 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 - -``` - - -#### Sheet Modals - -```tsx -const App: React.FC = () => { - const routerRef = useRef(null); - - return ( - - - - } exact={true} /> - - - - ) -}; - -... - -const Home: React.FC = () => { - const [showModal, setShowModal] = useState(false); - - return ( - - - setShowModal(false)}> -

This is modal content

- - - - ); -}; - -``` - - -### Stencil - -### Inline Modal - -```tsx -import { Component, Element, h } from '@stencil/core'; -import { actionSheetController } from '@ionic/core'; - -@Component({ - tag: 'modal-example', - styleUrl: 'modal-example.css' -}) -export class ModalExample { - @Element() el: any; - - componentDidLoad() { - this.routerOutlet = this.el.closest('ion-router-outlet'); - } - - async canDismiss() { - const actionSheet = await actionSheetController.create({ - header: 'Are you sure you want to discard your changes?', - buttons: [ - { - text: 'Discard Changes', - role: 'destructive' - }, - { - text: 'Keep Editing', - role: 'cancel' - } - ] - }); - - await actionSheet.present(); - - const { role } = await actionSheet.onDidDismiss(); - - if (role === 'destructive') { - return true; - } - - return false; - } - - render() { - return ( -
- {/* Default */} - - Modal Content - - - {/* Use a trigger */} - Click to open modal - - Modal Content - - - {/* Sheet Modal */} - - Modal Content - - - {/* Card Modal */} - - Modal Content - - - {/* Passing Props */} - - - - - {/* Require Action Sheet confirmation before dismissing */} - this.canDismiss()}> - Modal Content - -
- ) - } -} -``` - -### Modal Controller - -```tsx -import { Component, h } from '@stencil/core'; - -import { modalController } from '@ionic/core'; - -@Component({ - tag: 'modal-example', - styleUrl: 'modal-example.css' -}) -export class ModalExample { - async presentModal() { - const modal = await modalController.create({ - component: 'page-modal', - cssClass: 'my-custom-class' - }); - await modal.present(); - } -} -``` - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'page-modal', - styleUrl: 'page-modal.css', -}) -export class PageModal { - render() { - return [ - - - Documentation - - - Feedback - - - Settings - - - ]; - } -} -``` - -> If you need a wrapper element inside of your modal component, we recommend using a `
` so that the component dimensions are still computed properly. - -### Passing Data - -During creation of a modal, data can be passed in through the `componentProps`. -The previous example can be written to include data: - -```tsx -async presentModal() { - const modal = await modalController.create({ - component: 'page-modal', - cssClass: 'my-custom-class', - componentProps: { - 'firstName': 'Douglas', - 'lastName': 'Adams', - 'middleInitial': 'N' - } - }); - await modal.present(); -} -``` - -To get the data passed into the `componentProps`, set each one as a `@Prop`: - -```tsx -import { Component, Prop, h } from '@stencil/core'; - -@Component({ - tag: 'page-modal', - styleUrl: 'page-modal.css', -}) -export class PageModal { - // Data passed in by componentProps - @Prop() firstName: string; - @Prop() lastName: string; - @Prop() middleInitial: string; -} -``` - -### Dismissing a Modal - -A modal can be dismissed by calling the dismiss method on the modal controller and optionally passing any data from the modal. - -```tsx -export class ModalPage { - ... - - dismiss(data?: any) { - // dismiss the closest modal and optionally pass back data - (this.el.closest('ion-modal') as any).dismiss({ - 'dismissed': true - }); - } -} -``` - -After being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation: - -```tsx -const { data } = await modal.onWillDismiss(); -console.log(data); -``` - -### Card Modals - -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. - -> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect. - -```tsx -import { Component, Element, h } from '@stencil/core'; - -import { modalController } from '@ionic/core'; - -@Component({ - tag: 'modal-example', - styleUrl: 'modal-example.css' -}) -export class ModalExample { - @Element() el: any; - - async presentModal() { - const modal = await modalController.create({ - component: 'page-modal', - cssClass: 'my-custom-class', - swipeToClose: true, - presentingElement: this.el.closest('ion-router-outlet'), - }); - await modal.present(); - } - -} -``` - -In most scenarios, using the `ion-router-outlet` element as the `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` element as the `presentingElement`. - -```tsx -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 - }); - await modal.present(); -} -``` - - -### Sheet Modals - -**Controller** -```tsx -import { Component, Element, h } from '@stencil/core'; - -import { modalController } from '@ionic/core'; - -@Component({ - tag: 'modal-example', - styleUrl: 'modal-example.css' -}) -export class ModalExample { - @Element() el: any; - - async presentModal() { - const modal = await modalController.create({ - component: 'page-modal', - initialBreakpoint: 0.5, - breakpoints: [0, 0.5, 1] - - }); - await modal.present(); - } -} -``` - -**Inline** -```tsx -import { Component, State, h } from '@stencil/core'; - -@Component({ - tag: 'modal-example', - styleUrl: 'modal-example.css' -}) -export class ModalExample { - @State() isModalOpen: boolean = false; - - render() { - return [ - - - - ] - } -} -``` - - -### Vue - -### Inline Modal - -```html - - - Modal Content - - - -Click to open modal - - Modal Content - - - - - Modal Content - - - - - Modal Content - - - - - - - - - - Modal Content - - - -``` - -### Modal Controller - -```html - - - -``` - -```html - - - -``` - -Developers can also use this component directly in their template: - -```html - - - -``` - -> If you need a wrapper element inside of your modal component, we recommend using an `` so that the component dimensions are still computed properly. - -#### Card Modals - -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. - -> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect. - -```html - - - -``` - -#### Sheet Modals - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------------------- | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the modal will animate. | `boolean` | `true` | -| `backdropBreakpoint` | `backdrop-breakpoint` | A decimal value between 0 and 1 that indicates the point after which the backdrop will begin to fade in when using a sheet modal. Prior to this point, the backdrop will be hidden and the content underneath the sheet can be interacted with. This value is exclusive meaning the backdrop will become active after the value specified. | `number` | `0` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the modal will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `breakpoints` | -- | The breakpoints to use when creating a sheet modal. Each value in the array must be a decimal between 0 and 1 where 0 indicates the modal is fully closed and 1 indicates the modal is fully open. Values are relative to the height of the modal, not the height of the screen. One of the values in this array must be the value of the `initialBreakpoint` property. For example: [0, .25, .5, 1] | `number[] \| undefined` | `undefined` | -| `canDismiss` | `can-dismiss` | Determines whether or not a modal can dismiss when calling the `dismiss` method. If the value is `true` or the value's function returns `true`, the modal will close when trying to dismiss. If the value is `false` or the value's function returns `false`, the modal will not close when trying to dismiss. | `(() => Promise) \| boolean \| undefined` | `undefined` | -| `enterAnimation` | -- | Animation to use when the modal is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `handle` | `handle` | The horizontal line that displays at the top of a sheet modal. It is `true` by default when setting the `breakpoints` and `initialBreakpoint` properties. | `boolean \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the modal. | `undefined \| { [key: string]: any; }` | `undefined` | -| `initialBreakpoint` | `initial-breakpoint` | A decimal value between 0 and 1 that indicates the initial point the modal will open at when creating a sheet modal. This value must also be listed in the `breakpoints` array. | `number \| undefined` | `undefined` | -| `isOpen` | `is-open` | If `true`, the modal will open. If `false`, the modal will close. Use this if you need finer grained control over presentation, otherwise just use the modalController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the modal dismisses. You will need to do that in your code. | `boolean` | `false` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the modal is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `presentingElement` | -- | The element that presented the modal. This is used for card presentation effects and for stacking multiple modals on top of each other. Only applies in iOS mode. | `HTMLElement \| undefined` | `undefined` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the modal. | `boolean` | `true` | -| `swipeToClose` | `swipe-to-close` | **[DEPRECATED]** - To prevent modals from dismissing, use canDismiss instead.

If `true`, the modal can be swiped to dismiss. Only applies in iOS mode. | `boolean` | `false` | -| `trigger` | `trigger` | An ID corresponding to the trigger element that causes the modal to open when clicked. | `string \| undefined` | `undefined` | - - -## Events - -| Event | Description | Type | -| ------------------------ | -------------------------------------------------------------------------- | ----------------------------------------------- | -| `didDismiss` | Emitted after the modal has dismissed. Shorthand for ionModalDidDismiss. | `CustomEvent>` | -| `didPresent` | Emitted after the modal has presented. Shorthand for ionModalWillDismiss. | `CustomEvent` | -| `ionBreakpointDidChange` | Emitted after the modal breakpoint has changed. | `CustomEvent` | -| `ionModalDidDismiss` | Emitted after the modal has dismissed. | `CustomEvent>` | -| `ionModalDidPresent` | Emitted after the modal has presented. | `CustomEvent` | -| `ionModalWillDismiss` | Emitted before the modal has dismissed. | `CustomEvent>` | -| `ionModalWillPresent` | Emitted before the modal has presented. | `CustomEvent` | -| `willDismiss` | Emitted before the modal has dismissed. Shorthand for ionModalWillDismiss. | `CustomEvent>` | -| `willPresent` | Emitted before the modal has presented. Shorthand for ionModalWillPresent. | `CustomEvent` | - - -## Methods - -### `dismiss(data?: any, role?: string | undefined) => Promise` - -Dismiss the modal overlay after it has been presented. - -#### Returns - -Type: `Promise` - - - -### `getCurrentBreakpoint() => Promise` - -Returns the current breakpoint of a sheet style modal - -#### Returns - -Type: `Promise` - - - -### `onDidDismiss() => Promise>` - -Returns a promise that resolves when the modal did dismiss. - -#### Returns - -Type: `Promise>` - - - -### `onWillDismiss() => Promise>` - -Returns a promise that resolves when the modal will dismiss. - -#### Returns - -Type: `Promise>` - - - -### `present() => Promise` - -Present the modal overlay after it has been created. - -#### Returns - -Type: `Promise` - - - -### `setCurrentBreakpoint(breakpoint: number) => Promise` - -Move a sheet style modal to a specific breakpoint. The breakpoint value must -be a value defined in your `breakpoints` array. - -#### Returns - -Type: `Promise` - - - - -## Slots - -| Slot | Description | -| ---- | --------------------------------------------------------- | -| | Content is placed inside of the `.modal-content` element. | - - -## Shadow Parts - -| Part | Description | -| ------------ | -------------------------------------------------------------------------------- | -| `"backdrop"` | The `ion-backdrop` element. | -| `"content"` | The wrapper element for the default slot. | -| `"handle"` | The handle that is displayed at the top of the sheet modal when `handle="true"`. | - - -## CSS Custom Properties - -| Name | Description | -| -------------------- | ---------------------------------- | -| `--backdrop-opacity` | Opacity of the backdrop | -| `--background` | Background of the modal content | -| `--border-color` | Border color of the modal content | -| `--border-radius` | Border radius of the modal content | -| `--border-style` | Border style of the modal content | -| `--border-width` | Border width of the modal content | -| `--height` | Height of the modal | -| `--max-height` | Maximum height of the modal | -| `--max-width` | Maximum width of the modal | -| `--min-height` | Minimum height of the modal | -| `--min-width` | Minimum width of the modal | -| `--width` | Width of the modal | - - -## Dependencies - -### Depends on - -- [ion-backdrop](../backdrop) - -### Graph -```mermaid -graph TD; - ion-modal --> ion-backdrop - style ion-modal fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/modal/usage/angular.md b/core/src/components/modal/usage/angular.md deleted file mode 100644 index 331bcbbc92..0000000000 --- a/core/src/components/modal/usage/angular.md +++ /dev/null @@ -1,309 +0,0 @@ -### Inline Modal - -```html - - - - Modal Content - - - - -Click to open modal - - - Modal Content - - - - - - - Modal Content - - - - - - - Modal Content - - - - - - - - - - - - - - Modal Content - - -``` - -```typescript -import { Component } from '@angular/core'; -import { IonRouterOutlet, ActionSheetController } from '@ionic/angular'; - -@Component({ - selector: 'modal-example', - templateUrl: 'modal-example.html', - styleUrls: ['./modal-example.css'] -}) -export class ModalExample { - constructor( - public routerOutlet: IonRouterOutlet, - private actionSheetCtrl: ActionSheetController - ) {} - - async canDismiss() { - const actionSheet = await this.actionSheetCtrl.create({ - header: 'Are you sure you want to discard your changes?', - buttons: [ - { - text: 'Discard Changes', - role: 'destructive' - }, - { - text: 'Keep Editing', - role: 'cancel' - } - ] - }); - - await actionSheet.present(); - - const { role } = await actionSheet.onDidDismiss(); - - if (role === 'destructive') { - return true; - } - - return false; - } -} -``` - -### Modal Controller - -```typescript -import { Component } from '@angular/core'; -import { ModalController } from '@ionic/angular'; -import { ModalPage } from '../modal/modal.page'; - -@Component({ - selector: 'modal-example', - templateUrl: 'modal-example.html', - styleUrls: ['./modal-example.css'] -}) -export class ModalExample { - // The `ion-modal` element reference. - modal: HTMLElement; - - constructor(public modalController: ModalController) {} - - async presentModal() { - const modal = await this.modalController.create({ - component: ModalPage, - cssClass: 'my-custom-class' - }); - return await modal.present(); - } -} -``` - -```typescript -import { Component, Input } from '@angular/core'; - -@Component({ - selector: 'modal-page', -}) -export class ModalPage { - - constructor() {} - -} -``` - -> If you need a wrapper element inside of your modal component, we recommend using a `
` so that the component dimensions are still computed properly. - -#### Passing Data - -During creation of a modal, data can be passed in through the `componentProps`. -The previous example can be written to include data: - -```typescript -async presentModal() { - const modal = await this.modalController.create({ - component: ModalPage, - cssClass: 'my-custom-class', - componentProps: { - 'firstName': 'Douglas', - 'lastName': 'Adams', - 'middleInitial': 'N' - } - }); - return await modal.present(); -} -``` - -To get the data passed into the `componentProps`, set it as an `@Input`: - -```typescript -export class ModalPage { - - // Data passed in by componentProps - @Input() firstName: string; - @Input() lastName: string; - @Input() middleInitial: string; - -} -``` - -#### Dismissing a Modal - -A modal can be dismissed by calling the dismiss method on the modal controller and optionally passing any data from the modal. - -```javascript -export class ModalPage { - ... - - dismiss() { - // using the injected ModalController this page - // can "dismiss" itself and optionally pass back data - this.modalController.dismiss({ - 'dismissed': true - }); - } -} -``` - -After being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation: - -```javascript -const { data } = await modal.onWillDismiss(); -console.log(data); -``` - -#### Accessing the Modal Element - -When opening a modal with the modal controller, Ionic will assign the modal HTML element reference to the `modal` property on your component's class instance. - -You can use this property to directly access the `ion-modal` element to add or remove classes or handle additional checks. - -```ts -export class ModalPage implements OnInit { - // The `ion-modal` element reference. - modal: HTMLElement; - - ngOnInit() { - console.log('The HTML ion-modal element', this.modal); // - } -} -``` - -#### Lazy Loading - -When lazy loading a modal, it's important to note that the modal will not be loaded when it is opened, but rather when the module that imports the modal's module is loaded. - -For example, say there exists a `CalendarComponent` and an `EventModal`. The modal is presented by clicking a button in the `CalendarComponent`. In Angular, the `EventModalModule` would need to be included in the `CalendarComponentModule` since the modal is created in the `CalendarComponent`: - -```typescript -import { NgModule } from '@angular/core'; -import { CommonModule } from '@angular/common'; -import { IonicModule } from '@ionic/angular'; - -import { CalendarComponent } from './calendar.component'; -import { EventModalModule } from '../modals/event/event.module'; - -@NgModule({ - declarations: [ - CalendarComponent - ], - imports: [ - IonicModule, - CommonModule, - EventModalModule - ], - exports: [ - CalendarComponent - ] -}) - -export class CalendarComponentModule {} -``` - -#### Card Modals - -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. - -> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect. - -If you are creating an application that uses `ion-tabs`, it is recommended that you get the parent `ion-router-outlet` using `this.routerOutlet.parentOutlet.nativeEl`, otherwise the tabbar will not scale down when the modal opens. - -```javascript -import { IonRouterOutlet } from '@ionic/angular'; - -constructor(private routerOutlet: IonRouterOutlet) {} - -async presentModal() { - const modal = await this.modalController.create({ - component: ModalPage, - cssClass: 'my-custom-class', - swipeToClose: true, - presentingElement: this.routerOutlet.nativeEl - }); - return await modal.present(); -} -``` - -In most scenarios, using the `ion-router-outlet` element as the `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` element as the `presentingElement`. - -```javascript -import { ModalController } from '@ionic/angular'; - -constructor(private modalController: ModalController) {} - -async presentModal() { - const modal = await this.modalController.create({ - component: ModalPage, - cssClass: 'my-custom-class', - swipeToClose: true, - presentingElement: await this.modalController.getTop() // Get the top-most ion-modal - }); - return await modal.present(); -} -``` - -#### Sheet Modals - -```javascript -import { IonRouterOutlet } from '@ionic/angular'; - -constructor(private routerOutlet: IonRouterOutlet) {} - -async presentModal() { - const modal = await this.modalController.create({ - component: ModalPage, - initialBreakpoint: 0.5, - breakpoints: [0, 0.5, 1] - }); - 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). \ No newline at end of file diff --git a/core/src/components/modal/usage/javascript.md b/core/src/components/modal/usage/javascript.md deleted file mode 100644 index 0d6f742ef3..0000000000 --- a/core/src/components/modal/usage/javascript.md +++ /dev/null @@ -1,190 +0,0 @@ -### Inline Modal - -```html - - - - Modal Content - - - - Click to open modal - - Modal Content - - - - - Modal Content - - - - - Modal Content - - - - - Modal Content - - - - -``` - -### Using JavaScript - -```javascript -customElements.define('modal-page', class extends HTMLElement { - connectedCallback() { - this.innerHTML = ` - - - Modal Header - - - - - - - - - Modal Content -`; - } -}); - -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); - return modalElement.present(); -} -``` - -> If you need a wrapper element inside of your modal component, we recommend using a `
` so that the component dimensions are still computed properly. - -### Passing Data - -During creation of a modal, data can be passed in through the `componentProps`. The previous example can be written to include data: - -```javascript -const modalElement = document.createElement('ion-modal'); -modalElement.component = 'modal-page'; -modalElement.cssClass = 'my-custom-class'; -modalElement.componentProps = { - 'firstName': 'Douglas', - 'lastName': 'Adams', - 'middleInitial': 'N' -}; -``` - -To get the data passed into the `componentProps`, query for the modal in the `modal-page`: - -```js -customElements.define('modal-page', class extends HTMLElement { - connectedCallback() { - const modalElement = document.querySelector('ion-modal'); - console.log(modalElement.componentProps.firstName); - - ... - } -} -``` - - -### Dismissing a Modal - -A modal can be dismissed by calling the dismiss method and optionally passing any data from the modal. - -```javascript -async function dismissModal() { - await modal.dismiss({ - 'dismissed': true - }); -} -``` - -After being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation: - -```javascript -const { data } = await modalElement.onWillDismiss(); -console.log(data); -``` - - -### Card Modals - -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. - -> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect. - -```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'); -``` - -In most scenarios, using the `ion-nav` element as the `presentingElement` is fine. In cases where you are presenting a card-style modal from within a modal, you should pass in the top-most `ion-modal` element as the `presentingElement`. - -```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 -``` - -### Sheet Modals - -```javascript -const modalElement = document.createElement('ion-modal'); -modalElement.component = 'modal-page'; -modalElement.initialBreakpoint = 0.5; -modalElement.breakpoints = [0, 0.5, 1]; -``` \ No newline at end of file diff --git a/core/src/components/modal/usage/react.md b/core/src/components/modal/usage/react.md deleted file mode 100644 index 91194d92fb..0000000000 --- a/core/src/components/modal/usage/react.md +++ /dev/null @@ -1,304 +0,0 @@ -### Inline Modal - -```tsx -import { React, useRef } from 'react'; -const App: React.FC = () => { - const routerRef = useRef(null); - - return ( - - - - } exact={true} /> - - - - ) -}; - -... - -interface Props { - router: HTMLIonRouterOutletElement | null; -} - -import React from 'react'; -import AppReactComponent from './AppReactComponent'; -import { IonModal, IonContent, IonButton, useIonActionSheet } from '@ionic/react'; -export const ModalExample: React.FC = ({ router }) => { - const [present, dismiss] = useIonActionSheet(); - - const canDismiss = () => { - return new Promise(async (resolve) => { - await present({ - header: 'Are you sure you want to discard your changes?', - buttons: [ - { - text: 'Discard Changes', - role: 'destructive' - }, - { - text: 'Keep Editing', - role: 'cancel' - } - ], - onDidDismiss: (ev: CustomEvent) => { - const role = ev.detail.role; - - if (role === 'destructive') { - resolve(true); - } - - resolve(false); - } - }); - }); - }); - } - - return ( - <> - {/* Default */} - - Modal Content - - - {/* Use a trigger */} - Click to open modal - - Modal Content - - - {/* Sheet Modal */} - - Modal Content - - - {/* Card Modal */} - - Modal Content - - - {/* Passing Props */} - - - - - {/* Require Action Sheet confirmation before dismissing */} - - Modal Content - - - ); -}; -``` - - -### useIonModal Hook - -> `useIonModal` requires being a descendant of ``. If you need to use a modal outside of an ``, consider using the component method instead. - - -```tsx -/* Using with useIonModal Hook */ - -import React, { useState } from 'react'; -import { IonButton, IonContent, IonPage, useIonModal } from '@ionic/react'; - -const Body: React.FC<{ - count: number; - onDismiss: () => void; - onIncrement: () => void; -}> = ({ count, onDismiss, onIncrement }) => ( -
- count: {count} - onIncrement()}> - Increment Count - - onDismiss()}> - Close - -
-); - -const ModalExample: React.FC = () => { - const [count, setCount] = useState(0); - - const handleIncrement = () => { - setCount(count + 1); - }; - - const handleDismiss = () => { - dismiss(); - }; - - /** - * First parameter is the component to show, second is the props to pass - */ - const [present, dismiss] = useIonModal(Body, { - count, - onDismiss: handleDismiss, - onIncrement: handleIncrement, - }); - - return ( - - - { - present({ - cssClass: 'my-class', - }); - }} - > - Show Modal - -
Count: {count}
- - - ); -}; -``` - -```tsx -/* Using with IonModal Component */ - -import React, { useState } from 'react'; -import { IonModal, IonButton, IonContent } from '@ionic/react'; - -export const ModalExample: React.FC = () => { - const [showModal, setShowModal] = useState(false); - - return ( - - -

This is modal content

- setShowModal(false)}>Close Modal - - setShowModal(true)}>Show Modal - - ); -}; -``` - -#### Card Modals - -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. - -> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect. - -```tsx -const App: React.FC = () => { - const routerRef = useRef(null); - - return ( - - - - } exact={true} /> - - - - ) -}; - -... - -interface HomePageProps { - router: HTMLIonRouterOutletElement | null; -} - -const Home: React.FC = ({ router }) => { - const [showModal, setShowModal] = useState(false); - - return ( - - - setShowModal(false)}> -

This is modal content

- - - - ); -}; - -``` - -In most scenarios, setting a ref on `IonRouterOutlet` 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 `IonModal` 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 - -``` - - -#### Sheet Modals - -```tsx -const App: React.FC = () => { - const routerRef = useRef(null); - - return ( - - - - } exact={true} /> - - - - ) -}; - -... - -const Home: React.FC = () => { - const [showModal, setShowModal] = useState(false); - - return ( - - - setShowModal(false)}> -

This is modal content

- - - - ); -}; - -``` \ No newline at end of file diff --git a/core/src/components/modal/usage/stencil.md b/core/src/components/modal/usage/stencil.md deleted file mode 100644 index f67ff7aa1c..0000000000 --- a/core/src/components/modal/usage/stencil.md +++ /dev/null @@ -1,298 +0,0 @@ -### Inline Modal - -```tsx -import { Component, Element, h } from '@stencil/core'; -import { actionSheetController } from '@ionic/core'; - -@Component({ - tag: 'modal-example', - styleUrl: 'modal-example.css' -}) -export class ModalExample { - @Element() el: any; - - componentDidLoad() { - this.routerOutlet = this.el.closest('ion-router-outlet'); - } - - async canDismiss() { - const actionSheet = await actionSheetController.create({ - header: 'Are you sure you want to discard your changes?', - buttons: [ - { - text: 'Discard Changes', - role: 'destructive' - }, - { - text: 'Keep Editing', - role: 'cancel' - } - ] - }); - - await actionSheet.present(); - - const { role } = await actionSheet.onDidDismiss(); - - if (role === 'destructive') { - return true; - } - - return false; - } - - render() { - return ( -
- {/* Default */} - - Modal Content - - - {/* Use a trigger */} - Click to open modal - - Modal Content - - - {/* Sheet Modal */} - - Modal Content - - - {/* Card Modal */} - - Modal Content - - - {/* Passing Props */} - - - - - {/* Require Action Sheet confirmation before dismissing */} - this.canDismiss()}> - Modal Content - -
- ) - } -} -``` - -### Modal Controller - -```tsx -import { Component, h } from '@stencil/core'; - -import { modalController } from '@ionic/core'; - -@Component({ - tag: 'modal-example', - styleUrl: 'modal-example.css' -}) -export class ModalExample { - async presentModal() { - const modal = await modalController.create({ - component: 'page-modal', - cssClass: 'my-custom-class' - }); - await modal.present(); - } -} -``` - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'page-modal', - styleUrl: 'page-modal.css', -}) -export class PageModal { - render() { - return [ - - - Documentation - - - Feedback - - - Settings - - - ]; - } -} -``` - -> If you need a wrapper element inside of your modal component, we recommend using a `
` so that the component dimensions are still computed properly. - -### Passing Data - -During creation of a modal, data can be passed in through the `componentProps`. -The previous example can be written to include data: - -```tsx -async presentModal() { - const modal = await modalController.create({ - component: 'page-modal', - cssClass: 'my-custom-class', - componentProps: { - 'firstName': 'Douglas', - 'lastName': 'Adams', - 'middleInitial': 'N' - } - }); - await modal.present(); -} -``` - -To get the data passed into the `componentProps`, set each one as a `@Prop`: - -```tsx -import { Component, Prop, h } from '@stencil/core'; - -@Component({ - tag: 'page-modal', - styleUrl: 'page-modal.css', -}) -export class PageModal { - // Data passed in by componentProps - @Prop() firstName: string; - @Prop() lastName: string; - @Prop() middleInitial: string; -} -``` - -### Dismissing a Modal - -A modal can be dismissed by calling the dismiss method on the modal controller and optionally passing any data from the modal. - -```tsx -export class ModalPage { - ... - - dismiss(data?: any) { - // dismiss the closest modal and optionally pass back data - (this.el.closest('ion-modal') as any).dismiss({ - 'dismissed': true - }); - } -} -``` - -After being dismissed, the data can be read in through the `onWillDismiss` or `onDidDismiss` attached to the modal after creation: - -```tsx -const { data } = await modal.onWillDismiss(); -console.log(data); -``` - -### Card Modals - -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. - -> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect. - -```tsx -import { Component, Element, h } from '@stencil/core'; - -import { modalController } from '@ionic/core'; - -@Component({ - tag: 'modal-example', - styleUrl: 'modal-example.css' -}) -export class ModalExample { - @Element() el: any; - - async presentModal() { - const modal = await modalController.create({ - component: 'page-modal', - cssClass: 'my-custom-class', - swipeToClose: true, - presentingElement: this.el.closest('ion-router-outlet'), - }); - await modal.present(); - } - -} -``` - -In most scenarios, using the `ion-router-outlet` element as the `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` element as the `presentingElement`. - -```tsx -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 - }); - await modal.present(); -} -``` - - -### Sheet Modals - -**Controller** -```tsx -import { Component, Element, h } from '@stencil/core'; - -import { modalController } from '@ionic/core'; - -@Component({ - tag: 'modal-example', - styleUrl: 'modal-example.css' -}) -export class ModalExample { - @Element() el: any; - - async presentModal() { - const modal = await modalController.create({ - component: 'page-modal', - initialBreakpoint: 0.5, - breakpoints: [0, 0.5, 1] - - }); - await modal.present(); - } -} -``` - -**Inline** -```tsx -import { Component, State, h } from '@stencil/core'; - -@Component({ - tag: 'modal-example', - styleUrl: 'modal-example.css' -}) -export class ModalExample { - @State() isModalOpen: boolean = false; - - render() { - return [ - - - - ] - } -} -``` \ No newline at end of file diff --git a/core/src/components/modal/usage/vue.md b/core/src/components/modal/usage/vue.md deleted file mode 100644 index 8119634ad2..0000000000 --- a/core/src/components/modal/usage/vue.md +++ /dev/null @@ -1,255 +0,0 @@ -### Inline Modal - -```html - - - Modal Content - - - -Click to open modal - - Modal Content - - - - - Modal Content - - - - - Modal Content - - - - - - - - - - Modal Content - - - -``` - -### Modal Controller - -```html - - - -``` - -```html - - - -``` - -Developers can also use this component directly in their template: - -```html - - - -``` - -> If you need a wrapper element inside of your modal component, we recommend using an `` so that the component dimensions are still computed properly. - -#### Card Modals - -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. - -> Card style modals when running on iPhone-sized devices do not have backdrops. As a result, the `--backdrop-opacity` variable will not have any effect. - -```html - - - -``` - -#### Sheet Modals - -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/nav-link/readme.md b/core/src/components/nav-link/readme.md deleted file mode 100644 index c95e3a8f04..0000000000 --- a/core/src/components/nav-link/readme.md +++ /dev/null @@ -1,23 +0,0 @@ -# ion-nav-link - -A navigation link is used to navigate to a specified component. The component can be navigated to by going `forward`, `back` or as a `root` component. - -It is the element form of calling the `push()`, `pop()`, and `setRoot()` methods on the navigation controller. - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- | -| `component` | `component` | Component to navigate to. Only used if the `routerDirection` is `"forward"` or `"root"`. | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` | -| `componentProps` | -- | Data you want to pass to the component as props. Only used if the `"routerDirection"` is `"forward"` or `"root"`. | `undefined \| { [key: string]: any; }` | `undefined` | -| `routerAnimation` | -- | The transition animation when navigating to another page. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `routerDirection` | `router-direction` | The transition direction when navigating to another page. | `"back" \| "forward" \| "root"` | `'forward'` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/nav/readme.md b/core/src/components/nav/readme.md deleted file mode 100644 index 11a9ed73bc..0000000000 --- a/core/src/components/nav/readme.md +++ /dev/null @@ -1,185 +0,0 @@ -# ion-nav - -Nav is a standalone component for loading arbitrary components and pushing new components on to the stack. - -Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL. - -## Interfaces - -### NavCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface NavCustomEvent extends CustomEvent { - target: HTMLIonNavElement; -} -``` - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the nav should animate the transition of components. | `boolean` | `true` | -| `animation` | -- | By default `ion-nav` animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using `AnimateBuilder` functions. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `root` | `root` | Root NavComponent to load | `Function \| HTMLElement \| ViewController \| null \| string \| undefined` | `undefined` | -| `rootParams` | -- | Any parameters for the root component | `undefined \| { [key: string]: any; }` | `undefined` | -| `swipeGesture` | `swipe-gesture` | If the nav component should allow for swipe-to-go-back. | `boolean \| undefined` | `undefined` | - - -## Events - -| Event | Description | Type | -| ------------------ | ----------------------------------------------- | ------------------- | -| `ionNavDidChange` | Event fired when the nav has changed components | `CustomEvent` | -| `ionNavWillChange` | Event fired when the nav will change components | `CustomEvent` | - - -## Methods - -### `canGoBack(view?: ViewController | undefined) => Promise` - -Returns `true` if the current view can go back. - -#### Returns - -Type: `Promise` - - - -### `getActive() => Promise` - -Get the active view. - -#### Returns - -Type: `Promise` - - - -### `getByIndex(index: number) => Promise` - -Get the view at the specified index. - -#### Returns - -Type: `Promise` - - - -### `getPrevious(view?: ViewController | undefined) => Promise` - -Get the previous view. - -#### Returns - -Type: `Promise` - - - -### `insert(insertIndex: number, component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` - -Inserts a component into the navigation stack at the specified index. -This is useful to add a component at any point in the navigation stack. - -#### Returns - -Type: `Promise` - - - -### `insertPages(insertIndex: number, insertComponents: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` - -Inserts an array of components into the navigation stack at the specified index. -The last component in the array will become instantiated as a view, and animate -in to become the active view. - -#### Returns - -Type: `Promise` - - - -### `pop(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` - -Pop a component off of the navigation stack. Navigates back from the current -component. - -#### Returns - -Type: `Promise` - - - -### `popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` - -Pop to a specific index in the navigation stack. - -#### Returns - -Type: `Promise` - - - -### `popToRoot(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` - -Navigate back to the root of the stack, no matter how far back that is. - -#### Returns - -Type: `Promise` - - - -### `push(component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` - -Push a new component onto the current navigation stack. Pass any additional -information along as an object. This additional information is accessible -through NavParams. - -#### Returns - -Type: `Promise` - - - -### `removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` - -Removes a component from the navigation stack at the specified index. - -#### Returns - -Type: `Promise` - - - -### `setPages(views: NavComponent[] | NavComponentWithProps[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` - -Set the views of the current navigation stack and navigate to the last view. -By default animations are disabled, but they can be enabled by passing options -to the navigation controller. Navigation parameters can also be passed to the -individual pages in the array. - -#### Returns - -Type: `Promise` - - - -### `setRoot(component: T, componentProps?: ComponentProps | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise` - -Set the root for the current navigation stack to a component. - -#### Returns - -Type: `Promise` - - - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/note/readme.md b/core/src/components/note/readme.md deleted file mode 100644 index 74d5a5ddae..0000000000 --- a/core/src/components/note/readme.md +++ /dev/null @@ -1,184 +0,0 @@ -# ion-note - -Notes are text elements generally used as subtitles that provide more information. Notes are styled to appear grey by default. Notes can be used in an item as metadata text. - - - - - -## Usage - -### Angular / javascript - -```html - -Default Note - - -Primary Note -Secondary Note -Danger Note -Light Note -Dark Note - - - - - Note (End) - On - - - - Off - Note (Start) - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react'; - -export const NoteExample: React.FC = () => ( - - {/*-- Default Note --*/} - Default Note
- - {/*-- Note Colors --*/} - Primary Note
- Secondary Note
- Danger Note
- Light Note
- Dark Note
- - {/*-- Notes in a List --*/} - - - Note (End) - On - - - - Off - Note (Start) - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'note-example', - styleUrl: 'note-example.css' -}) -export class NoteExample { - render() { - return [ - // Default Note - Default Note, - - // Note Colors - Primary Note, - Secondary Note, - Danger Note, - Light Note, - Dark Note, - - // Notes in a List - - - Note (End) - On - - - - Off - Note (Start) - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | - - -## CSS Custom Properties - -| Name | Description | -| --------- | ----------------- | -| `--color` | Color of the note | - - -## Dependencies - -### Used by - - - [ion-item](../item) - -### Graph -```mermaid -graph TD; - ion-item --> ion-note - style ion-note fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/note/usage/angular.md b/core/src/components/note/usage/angular.md deleted file mode 100644 index fba5e5c859..0000000000 --- a/core/src/components/note/usage/angular.md +++ /dev/null @@ -1,24 +0,0 @@ -```html - -Default Note - - -Primary Note -Secondary Note -Danger Note -Light Note -Dark Note - - - - - Note (End) - On - - - - Off - Note (Start) - - -``` diff --git a/core/src/components/note/usage/javascript.md b/core/src/components/note/usage/javascript.md deleted file mode 100644 index fba5e5c859..0000000000 --- a/core/src/components/note/usage/javascript.md +++ /dev/null @@ -1,24 +0,0 @@ -```html - -Default Note - - -Primary Note -Secondary Note -Danger Note -Light Note -Dark Note - - - - - Note (End) - On - - - - Off - Note (Start) - - -``` diff --git a/core/src/components/note/usage/react.md b/core/src/components/note/usage/react.md deleted file mode 100644 index 2b10303bcd..0000000000 --- a/core/src/components/note/usage/react.md +++ /dev/null @@ -1,31 +0,0 @@ -```tsx -import React from 'react'; -import { IonNote, IonList, IonItem, IonLabel, IonContent } from '@ionic/react'; - -export const NoteExample: React.FC = () => ( - - {/*-- Default Note --*/} - Default Note
- - {/*-- Note Colors --*/} - Primary Note
- Secondary Note
- Danger Note
- Light Note
- Dark Note
- - {/*-- Notes in a List --*/} - - - Note (End) - On - - - - Off - Note (Start) - - - -); -``` \ No newline at end of file diff --git a/core/src/components/note/usage/stencil.md b/core/src/components/note/usage/stencil.md deleted file mode 100644 index 706f14f404..0000000000 --- a/core/src/components/note/usage/stencil.md +++ /dev/null @@ -1,36 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'note-example', - styleUrl: 'note-example.css' -}) -export class NoteExample { - render() { - return [ - // Default Note - Default Note, - - // Note Colors - Primary Note, - Secondary Note, - Danger Note, - Light Note, - Dark Note, - - // Notes in a List - - - Note (End) - On - - - - Off - Note (Start) - - - ]; - } -} -``` diff --git a/core/src/components/note/usage/vue.md b/core/src/components/note/usage/vue.md deleted file mode 100644 index f0a5e133a2..0000000000 --- a/core/src/components/note/usage/vue.md +++ /dev/null @@ -1,35 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/picker-column-internal/readme.md b/core/src/components/picker-column-internal/readme.md deleted file mode 100644 index 9c5f36769b..0000000000 --- a/core/src/components/picker-column-internal/readme.md +++ /dev/null @@ -1,40 +0,0 @@ -# ion-picker-column-internal - - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `items` | -- | A list of options to be displayed in the picker | `PickerColumnItem[]` | `[]` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `value` | `value` | The selected option in the picker. | `number \| string \| undefined` | `undefined` | - - -## Events - -| Event | Description | Type | -| ----------- | ----------------------------------- | ------------------------------- | -| `ionChange` | Emitted when the value has changed. | `CustomEvent` | - - -## Dependencies - -### Used by - - - [ion-datetime](../datetime) - -### Graph -```mermaid -graph TD; - ion-datetime --> ion-picker-column-internal - style ion-picker-column-internal fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/picker-column/readme.md b/core/src/components/picker-column/readme.md deleted file mode 100644 index b77c7bd070..0000000000 --- a/core/src/components/picker-column/readme.md +++ /dev/null @@ -1,17 +0,0 @@ -# ion-picker-column - - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ------------------ | -------------- | ----------- | -| `col` | -- | Picker column data | `PickerColumn` | `undefined` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/picker-internal/readme.md b/core/src/components/picker-internal/readme.md deleted file mode 100644 index f80a341007..0000000000 --- a/core/src/components/picker-internal/readme.md +++ /dev/null @@ -1,30 +0,0 @@ -# ion-picker-internal - - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ------------------------------------------------- | --------------- | ----------- | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | - - -## Dependencies - -### Used by - - - [ion-datetime](../datetime) - -### Graph -```mermaid -graph TD; - ion-datetime --> ion-picker-internal - style ion-picker-internal fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/picker/readme.md b/core/src/components/picker/readme.md deleted file mode 100644 index 7fedbad88d..0000000000 --- a/core/src/components/picker/readme.md +++ /dev/null @@ -1,339 +0,0 @@ -# ion-picker - -A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport. - -## Interfaces - -### PickerButton - -```typescript -interface PickerButton { - text?: string; - role?: string; - cssClass?: string | string[]; - handler?: (value: any) => boolean | void; -} -``` - -### PickerColumn - -```typescript -interface PickerColumn { - name: string; - align?: string; - selectedIndex?: number; - prevSelected?: number; - prefix?: string; - suffix?: string; - options: PickerColumnOption[]; - cssClass?: string | string[]; - columnWidth?: string; - prefixWidth?: string; - suffixWidth?: string; - optionsWidth?: string; - refresh?: () => void; -} -``` - -### PickerColumnOption - -```typescript -interface PickerColumnOption { - text?: string; - value?: any; - disabled?: boolean; - duration?: number; - transform?: string; - selected?: boolean; -} -``` - -### PickerOptions - -```typescript -interface PickerOptions { - columns: PickerColumn[]; - buttons?: PickerButton[]; - cssClass?: string | string[]; - showBackdrop?: boolean; - backdropDismiss?: boolean; - animated?: boolean; - - mode?: Mode; - keyboardClose?: boolean; - id?: string; - htmlAttributes?: { [key: string]: any }; - - enterAnimation?: AnimationBuilder; - leaveAnimation?: AnimationBuilder; -} -``` - - - - - -## Usage - -### React - -```tsx -/* Using with useIonPicker Hook */ - -import React, { useState } from 'react'; -import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react'; - -const PickerExample: React.FC = () => { - const [present] = useIonPicker(); - const [value, setValue] = useState(''); - return ( - - - - present({ - buttons: [ - { - text: 'Confirm', - handler: (selected) => { - setValue(selected.animal.value) - }, - }, - ], - columns: [ - { - name: 'animal', - options: [ - { text: 'Dog', value: 'dog' }, - { text: 'Cat', value: 'cat' }, - { text: 'Bird', value: 'bird' }, - ], - }, - ], - }) - } - > - Show Picker - - - present( - [ - { - name: 'animal', - options: [ - { text: 'Dog', value: 'dog' }, - { text: 'Cat', value: 'cat' }, - { text: 'Bird', value: 'bird' }, - ], - }, - { - name: 'vehicle', - options: [ - { text: 'Car', value: 'car' }, - { text: 'Truck', value: 'truck' }, - { text: 'Bike', value: 'bike' }, - ], - }, - ], - [ - { - text: 'Confirm', - handler: (selected) => { - setValue(`${selected.animal.value}, ${selected.vehicle.value}`) - }, - }, - ] - ) - } - > - Show Picker using params - - {value && ( -
Selected Value: {value}
- )} - - - ); -}; -``` - - -### Vue - -```vue - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| `animated` | `animated` | If `true`, the picker will animate. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the picker will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `buttons` | -- | Array of buttons to be displayed at the top of the picker. | `PickerButton[]` | `[]` | -| `columns` | -- | Array of columns to be displayed in the picker. | `PickerColumn[]` | `[]` | -| `cssClass` | `css-class` | Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | `string \| string[] \| undefined` | `undefined` | -| `duration` | `duration` | Number of milliseconds to wait before dismissing the picker. | `number` | `0` | -| `enterAnimation` | -- | Animation to use when the picker is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the picker. | `undefined \| { [key: string]: any; }` | `undefined` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the picker is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the picker. | `boolean` | `true` | - - -## Events - -| Event | Description | Type | -| ---------------------- | ---------------------------------------- | -------------------------------------- | -| `ionPickerDidDismiss` | Emitted after the picker has dismissed. | `CustomEvent>` | -| `ionPickerDidPresent` | Emitted after the picker has presented. | `CustomEvent` | -| `ionPickerWillDismiss` | Emitted before the picker has dismissed. | `CustomEvent>` | -| `ionPickerWillPresent` | Emitted before the picker has presented. | `CustomEvent` | - - -## Methods - -### `dismiss(data?: any, role?: string | undefined) => Promise` - -Dismiss the picker overlay after it has been presented. - -#### Returns - -Type: `Promise` - - - -### `getColumn(name: string) => Promise` - -Get the column that matches the specified name. - -#### Returns - -Type: `Promise` - - - -### `onDidDismiss() => Promise>` - -Returns a promise that resolves when the picker did dismiss. - -#### Returns - -Type: `Promise>` - - - -### `onWillDismiss() => Promise>` - -Returns a promise that resolves when the picker will dismiss. - -#### Returns - -Type: `Promise>` - - - -### `present() => Promise` - -Present the picker overlay after it has been created. - -#### Returns - -Type: `Promise` - - - - -## CSS Custom Properties - -| Name | Description | -| -------------------- | -------------------------------------- | -| `--backdrop-opacity` | Opacity of the backdrop | -| `--background` | Background of the picker | -| `--background-rgb` | Background of the picker in rgb format | -| `--border-color` | Border color of the picker | -| `--border-radius` | Border radius of the picker | -| `--border-style` | Border style of the picker | -| `--border-width` | Border width of the picker | -| `--height` | Height of the picker | -| `--max-height` | Maximum height of the picker | -| `--max-width` | Maximum width of the picker | -| `--min-height` | Minimum height of the picker | -| `--min-width` | Minimum width of the picker | -| `--width` | Width of the picker | - - -## Dependencies - -### Depends on - -- [ion-backdrop](../backdrop) -- ion-picker-column - -### Graph -```mermaid -graph TD; - ion-picker --> ion-backdrop - ion-picker --> ion-picker-column - style ion-picker fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/picker/usage/react.md b/core/src/components/picker/usage/react.md deleted file mode 100644 index 1d016decba..0000000000 --- a/core/src/components/picker/usage/react.md +++ /dev/null @@ -1,82 +0,0 @@ -```tsx -/* Using with useIonPicker Hook */ - -import React, { useState } from 'react'; -import { IonButton, IonContent, IonPage, useIonPicker } from '@ionic/react'; - -const PickerExample: React.FC = () => { - const [present] = useIonPicker(); - const [value, setValue] = useState(''); - return ( - - - - present({ - buttons: [ - { - text: 'Confirm', - handler: (selected) => { - setValue(selected.animal.value) - }, - }, - ], - columns: [ - { - name: 'animal', - options: [ - { text: 'Dog', value: 'dog' }, - { text: 'Cat', value: 'cat' }, - { text: 'Bird', value: 'bird' }, - ], - }, - ], - }) - } - > - Show Picker - - - present( - [ - { - name: 'animal', - options: [ - { text: 'Dog', value: 'dog' }, - { text: 'Cat', value: 'cat' }, - { text: 'Bird', value: 'bird' }, - ], - }, - { - name: 'vehicle', - options: [ - { text: 'Car', value: 'car' }, - { text: 'Truck', value: 'truck' }, - { text: 'Bike', value: 'bike' }, - ], - }, - ], - [ - { - text: 'Confirm', - handler: (selected) => { - setValue(`${selected.animal.value}, ${selected.vehicle.value}`) - }, - }, - ] - ) - } - > - Show Picker using params - - {value && ( -
Selected Value: {value}
- )} - - - ); -}; -``` \ No newline at end of file diff --git a/core/src/components/picker/usage/vue.md b/core/src/components/picker/usage/vue.md deleted file mode 100644 index 6383262d41..0000000000 --- a/core/src/components/picker/usage/vue.md +++ /dev/null @@ -1,53 +0,0 @@ -```vue - - - -``` diff --git a/core/src/components/platform/readme.md b/core/src/components/platform/readme.md deleted file mode 100644 index eef6f15bee..0000000000 --- a/core/src/components/platform/readme.md +++ /dev/null @@ -1,25 +0,0 @@ -# platform - -The Platform service can be used to get information about your current device. You can get all of the platforms associated with the device using the platforms method, including whether the app is being viewed from a tablet, if it's on a mobile device or browser, and the exact platform (iOS, Android, etc). You can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information you can completely customize your app to fit any device. - - - - -## Methods - -| Method | Description | -|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------| -| `is` | Returns `true`/false based on platform. Available options are android, cordova, core, ios, ipad, iphone, mobile, mobileweb, phablet, tablet, desktop, electron. | -| `platforms` | Returns an array of platforms that the current device matches. | -| `versions` | Returns an object that contains the major, minor, and patcher version of the current device. | -| `ready` | Returns a promise that resolves when the native bridge is ready in Cordova, or when the DOM is fully loaded in the browser. | -| `isLandscape` | Returns `true` of false if the device is in landscape. | -| `isPortrait` | Returns `true` of false if the device is in portrait. | - - - - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/platform/usage/angular.md b/core/src/components/platform/usage/angular.md deleted file mode 100644 index c7f07ee97a..0000000000 --- a/core/src/components/platform/usage/angular.md +++ /dev/null @@ -1,18 +0,0 @@ -```typescript -import { Component } from '@angular/core'; -import { Platform } from '@ionic/angular'; - -@Component({ - selector: 'platform-example', - templateUrl: 'platform-example.html', - styleUrls: ['./platform-example.css'] -}) -export class PlatformExample { - constructor(public plt: Platform) { - if (this.plt.is('ios')) { - // This will only print when on iOS - console.log('I am an iOS device!'); - } - } -} -``` diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md deleted file mode 100644 index 6d84a66a32..0000000000 --- a/core/src/components/popover/readme.md +++ /dev/null @@ -1,1089 +0,0 @@ -# ion-popover - -A Popover is a dialog that appears on top of the current page. It can be used for anything, but generally it is used for overflow actions that don't fit in the navigation bar. - -There are two ways to use `ion-popover`: inline or via the `popoverController`. Each method comes with different considerations, so be sure to use the approach that best fits your use case. - -## Inline Popovers - -`ion-popover` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the popover. See [Usage](#usage) for an example of how to write a popover inline. - -When using `ion-popover` with Angular, React, or Vue, the component you pass in will be destroyed when the popover is dismissed. As this functionality is provided by the JavaScript framework, using `ion-popover` without a JavaScript framework will not destroy the component you passed in. If this is a needed functionality, we recommend using the `popoverController` instead. - -### Angular - -Since the component you passed in needs to be created when the popover is presented and destroyed when the popover is dismissed, we are unable to project the content using `` internally. Instead, we use `` which expects an `` to be passed in. As a result, when passing in your component you will need to wrap it in an ``: - -```html - - - - - -``` - -### When to use - -Using a popover inline is useful when you do not want to explicitly wire up click events to open the popover. For example, you can use the `trigger` property to designate a button that should present the popover when clicked. You can also use the `trigger-action` property to customize whether the popover should be presented when the trigger is left clicked, right clicked, or hovered over. - -If you need fine grained control over when the popover is presented and dismissed, we recommend you use the `popoverController`. - -## Controller Popovers - -`ion-popover` can also be presented programmatically by using the `popoverController` imported from Ionic Framework. This allows you to have complete control over when a popover is presented above and beyond the customization that inline popovers give you. See [Usage](#usage) for an example of how to use the `popoverController`. - -### When to use - -We typically recommend that you write your popovers inline as it streamlines the amount of code in your application. You should only use the `popoverController` for complex use cases where writing a popover inline is impractical. When using a controller, your popover is not created ahead of time, so properties such as `trigger` and `trigger-action` are not applicable here. In addition, nested popovers are not compatible with the controller approach because the popover is automatically added to the root of your application when the `create` method is called. - - -## Styling - -Popovers are presented at the root of your application so they overlay your entire app. This behavior applies to both inline popovers and popovers presented from a controller. As a result, custom popover styles can not be scoped to a particular component as they will not apply to the popover. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient. - -> 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. - - -## Triggers - -A trigger for an `ion-popover` is the element that will open a popover when interacted with. The interaction behavior can be customized by setting the `trigger-action` property. Note that `trigger-action="context-menu"` will prevent your system's default context menu from opening. View the [Usage](#usage) section for an example of how to use triggers. - -> Triggers are not applicable when using the `popoverController` because the `ion-popover` is not created ahead of time. - -## Positioning - -### Reference - -When presenting a popover, Ionic Framework needs a reference point to present the popover relative to. With `reference="event"`, the popover will be presented relative to the x-y coordinates of the pointer event that was dispatched on your trigger element. With `reference="trigger"`, the popover will be presented relative to the bounding box of your trigger element. - -### Side - -Regardless of what you choose for your reference point, you can position a popover to the `top`, `right`, `left`, or `bottom` of your reference point by using the `side` property. You can also use the `start` or `end` values if you would like the side to switch based on LTR or RTL modes. - -### Alignment - -The `alignment` property allows you to line up an edge of your popover with a corresponding edge on your trigger element. The exact edge that is used depends on the value of the `side` property. - -### Offsets - -If you need finer grained control over the positioning of your popover you can use the `--offset-x` and `--offset-y` CSS Variables. For example, `--offset-x: 10px` will move your popover content to the right by `10px`. - -## Sizing - -When making dropdown menus, you may want to have the width of the popover match the width of the trigger element. Doing this without knowing the trigger width ahead of time is tricky. You can set the `size` property to `'cover'` and Ionic Framework will ensure that the width of the popover matches the width of your trigger element. If you are using the `popoverController`, you must provide an event via the `event` option and Ionic Framework will use `event.target` as the reference element. - -## Nested Popovers - -When using `ion-popover` inline, you can nested popovers to create nested dropdown menus. When doing this, only the backdrop on the first popover will appear so that the screen does not get progressively darker as you open more popovers. See the [Usage](./#usage) section for an example on how to write a nested popover. - -You can use the `dismissOnSelect` property to automatically close the popover when the popover content has been clicked. This behavior does not apply when clicking a trigger element for another popover. - -> Nested popovers cannot be created when using the `popoverController` because the popover is automatically added to the root of your application when the `create` method is called. - -## Interfaces - -Below you will find all of the options available to you when using the `popoverController`. These options should be supplied when calling `popoverController.create()`. - -```typescript -interface PopoverOptions { - component: any; - componentProps?: { [key: string]: any }; - showBackdrop?: boolean; - backdropDismiss?: boolean; - translucent?: boolean; - cssClass?: string | string[]; - event?: Event; - animated?: boolean; - - mode?: 'ios' | 'md'; - keyboardClose?: boolean; - id?: string; - htmlAttributes?: { [key: string]: any }; - - enterAnimation?: AnimationBuilder; - leaveAnimation?: AnimationBuilder; - - size?: PopoverSize; - dismissOnSelect?: boolean; - reference?: PositionReference; - side?: PositionSide; - alignment?: PositionAlign; - arrow?: boolean; -} -``` - - -## Types - -Below you will find all of the custom types for `ion-popover`: - -```typescript -type PopoverSize = 'cover' | 'auto'; -type TriggerAction = 'click' | 'hover' | 'context-menu'; -type PositionReference = 'trigger' | 'event'; -type PositionSide = 'top' | 'right' | 'bottom' | 'left' | 'start' | 'end'; -type PositionAlign = 'start' | 'center' | 'end'; -``` - -## Accessibility - -### Keyboard Navigation - -`ion-popover` has basic keyboard support for navigating between focusable elements inside of the popover. The following table details what each key does: - -| Key | Function | -| ------------------ | ------------------------------------------------------------ | -| `Tab` | Moves focus to the next focusable element. | -| `Shift` + `Tab` | Moves focus to the previous focusable element. | -| `Esc` | Closes the popover. | -| `Space` or `Enter` | Clicks the focusable element. | - - -`ion-popover` has full arrow key support for navigating between `ion-item` elements with the `button` property. The most common use case for this is as a dropdown menu in a desktop-focused application. In addition to the basic keyboard support, the following table details arrow key support for dropdown menus: - -| Key | Function | -| ------------------ | -------------------------------------------------------------- | -| `ArrowUp` | Moves focus to the previous focusable element. | -| `ArrowDown` | Moves focus to the next focusable element. | -| `Home` | Moves focus to the first focusable element. | -| `End` | Moves focus to the last focusable element. | -| `ArrowLeft` | When used in a child popover, closes the popover and returns focus to the parent popover. | -| `Space`, `Enter`, and `ArrowRight` | When focusing a trigger element, opens the associated popover. | - - - - -## Usage - -### Angular - -### Inline Popover - -```html - - - - Popover Content - - - - - - - Popover Content - - - - -Click to open popover - - - Popover Content - - - - -Hover to open popover - - - Popover Content - - - - -Click to open popover - - - Popover Content - - - - -Click to open popover - - - Popover Content - - - - -Click to open popover - - - Popover Content - - - - -Click to open popover - - - Popover Content - - - - -Click to open popover - - - - - - Option 1 - - - Option 2 - - - Option 3 - - - - - - - Nested Option - - - - - - - - -``` - -### Popover Controller - -```typescript -import { Component } from '@angular/core'; -import { PopoverController } from '@ionic/angular'; -import { PopoverComponent } from '../../component/popover/popover.component'; - -@Component({ - selector: 'popover-example', - templateUrl: 'popover-example.html', - styleUrls: ['./popover-example.css'] -}) -export class PopoverExample { - constructor(public popoverController: PopoverController) {} - - async presentPopover(ev: any) { - const popover = await this.popoverController.create({ - component: PopoverComponent, - cssClass: 'my-custom-class', - event: ev, - translucent: true - }); - await popover.present(); - - const { role } = await popover.onDidDismiss(); - console.log('onDidDismiss resolved with role', role); - } -} -``` - - -### 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 - -### Inline Popover - -```html - - - Popover Content - - - - - Popover Content - - - -Click to open popover - - Popover Content - - - -Hover to open popover - - Popover Content - - - -Click to open popover - - Popover Content - - - -Click to open popover - - Popover Content - - - -Click to open popover - - Popover Content - - - -Click to open popover - - Popover Content - - - -Click to open popover - - - - - Option 1 - - - Option 2 - - - Option 3 - - - - - - Nested Option - - - - - - -``` - -### Using JavaScript - -```javascript -class PopoverExamplePage extends HTMLElement { - constructor() { - super(); - } - - connectedCallback() { - this.innerHTML = ` - - - Ionic - Item 0 - Item 1 - Item 2 - Item 3 - - - `; - } -} - -customElements.define('popover-example-page', PopoverExamplePage); - -async function presentPopover(ev) { - const popover = Object.assign(document.createElement('ion-popover'), { - component: 'popover-example-page', - cssClass: 'my-custom-class', - event: ev, - translucent: true - }); - document.body.appendChild(popover); - - await popover.present(); - - const { role } = await popover.onDidDismiss(); - console.log('onDidDismiss resolved with role', role); -} -``` - - -### React - -### Inline Popover - -```tsx -import React, { useState } from 'react'; -import { IonPopover, IonContent, IonItem, IonLabel, IonButton } from '@ionic/react'; - -export const PopoverExample: React.FC = () => { - return ( - <> - {/* Default */} - - Popover Content - - - {/* No Arrow */} - - Popover Content - - - {/* Use a trigger */} - Click to open popover - - Popover Content - - - {/* Hover over trigger to open */} - Hover to open popover - - Popover Content - - - {/* Show popover above trigger */} - Click to open popover - - Popover Content - - - {/* Align popover to end of trigger */} - Click to open popover - - Popover Content - - - {/* Make popover the same size as the trigger */} - Click to open popover - - Popover Content - - - {/* Make popover show relative to click coordinates rather than trigger */} - Click to open popover - - Popover Content - - - {/* Nested Popover */} - Click to open popover - - - - - Option 1 - - - Option 2 - - - Option 3 - - - - - - Nested Option - - - - - - - - ); -}; -``` - -### Inline Popover with State - -```tsx -import React, { useState } from 'react'; -import { IonPopover, IonButton } from '@ionic/react'; - -export const PopoverExample: React.FC = () => { - const [popoverState, setShowPopover] = useState({ showPopover: false, event: undefined }); - - return ( - <> - setShowPopover({ showPopover: false, event: undefined })} - > -

This is popover content

- - { - e.persist(); - setShowPopover({ showPopover: true, event: e }) - }} - > - Show Popover - - - ); -}; -``` - -### useIonPopover Hook - -> `useIonPopover` requires being a descendant of ``. If you need to use a popover outside of an ``, consider using the component method instead. - -```tsx -import React from 'react'; -import { - IonButton, - IonContent, - IonItem, - IonList, - IonListHeader, - IonPage, - useIonPopover, -} from '@ionic/react'; - -const PopoverList: React.FC<{ - onHide: () => void; -}> = ({ onHide }) => ( - - Ionic - Learn Ionic - Documentation - Showcase - GitHub Repo - - Close - - -); - -const PopoverExample: React.FC = () => { - const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() }); - - return ( - - - - present({ - event: e.nativeEvent, - }) - } - > - Show Popover - - - - ); -}; -``` - - -### Stencil - -### Inline Popover - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'popover-example', - styleUrl: 'popover-example.css' -}) -export class PopoverExample { - render() { - return [ - - {/* Default */} - - Popover Content - - - {/* No Arrow */} - - Popover Content - - - {/* Use a trigger */} - Click to open popover - - Popover Content - - - {/* Hover over trigger to open */} - Hover to open popover - - Popover Content - - - {/* Show popover above trigger */} - Click to open popover - - Popover Content - - - {/* Align popover to end of trigger */} - Click to open popover - - Popover Content - - - {/* Make popover the same size as the trigger */} - Click to open popover - - Popover Content - - - {/* Make popover show relative to click coordinates rather than trigger */} - Click to open popover - - Popover Content - - - {/* Nested Popover */} - Click to open popover - - - - - Option 1 - - - Option 2 - - - Option 3 - - - - - - Nested Option - - - - - - - - ]; - } -} -``` - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'page-popover', - styleUrl: 'page-popover.css', -}) -export class PagePopover { - render() { - return [ - - - Documentation - - - Feedback - - - Settings - - - ]; - } -} -``` - -### Popover Controller - -```tsx -import { Component, h } from '@stencil/core'; - -import { popoverController } from '@ionic/core'; - -@Component({ - tag: 'popover-example', - styleUrl: 'popover-example.css' -}) -export class PopoverExample { - async presentPopover(ev: any) { - const popover = await popoverController.create({ - component: 'page-popover', - cssClass: 'my-custom-class', - event: ev, - translucent: true - }); - await popover.present(); - - const { role } = await popover.onDidDismiss(); - console.log('onDidDismiss resolved with role', role); - } - - render() { - return [ - - this.presentPopover(ev)}>Present Popover - - ]; - } -} -``` - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'page-popover', - styleUrl: 'page-popover.css', -}) -export class PagePopover { - render() { - return [ - - - Documentation - - - Feedback - - - Settings - - - ]; - } -} -``` - - -### Vue - -### Inline Popover - -```html - - - -``` - - -### Inline Popover with State - -```html - - - -``` - -### Popover Controller - -```html - - - -``` - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ----------- | -| `alignment` | `alignment` | Describes how to align the popover content with the `reference` point. Defaults to `'center'` for `ios` mode, and `'start'` for `md` mode. | `"center" \| "end" \| "start" \| undefined` | `undefined` | -| `animated` | `animated` | If `true`, the popover will animate. | `boolean` | `true` | -| `arrow` | `arrow` | If `true`, the popover will display an arrow that points at the `reference` when running in `ios` mode. Does not apply in `md` mode. | `boolean` | `true` | -| `backdropDismiss` | `backdrop-dismiss` | If `true`, the popover will be dismissed when the backdrop is clicked. | `boolean` | `true` | -| `component` | `component` | The component to display inside of the popover. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just slot your component inside of `ion-popover`. | `Function \| HTMLElement \| null \| string \| undefined` | `undefined` | -| `componentProps` | -- | The data to pass to the popover component. You only need to use this if you are not using a JavaScript framework. Otherwise, you can just set the props directly on your component. | `undefined \| { [key: string]: any; }` | `undefined` | -| `dismissOnSelect` | `dismiss-on-select` | If `true`, the popover will be automatically dismissed when the content has been clicked. | `boolean` | `false` | -| `enterAnimation` | -- | Animation to use when the popover is presented. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `event` | `event` | The event to pass to the popover animation. | `any` | `undefined` | -| `htmlAttributes` | -- | Additional attributes to pass to the popover. | `undefined \| { [key: string]: any; }` | `undefined` | -| `isOpen` | `is-open` | If `true`, the popover will open. If `false`, the popover will close. Use this if you need finer grained control over presentation, otherwise just use the popoverController or the `trigger` property. Note: `isOpen` will not automatically be set back to `false` when the popover dismisses. You will need to do that in your code. | `boolean` | `false` | -| `keyboardClose` | `keyboard-close` | If `true`, the keyboard will be automatically dismissed when the overlay is presented. | `boolean` | `true` | -| `leaveAnimation` | -- | Animation to use when the popover is dismissed. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `reference` | `reference` | Describes what to position the popover relative to. If `'trigger'`, the popover will be positioned relative to the trigger button. If passing in an event, this is determined via event.target. If `'event'`, the popover will be positioned relative to the x/y coordinates of the trigger action. If passing in an event, this is determined via event.clientX and event.clientY. | `"event" \| "trigger"` | `'trigger'` | -| `showBackdrop` | `show-backdrop` | If `true`, a backdrop will be displayed behind the popover. | `boolean` | `true` | -| `side` | `side` | Describes which side of the `reference` point to position the popover on. The `'start'` and `'end'` values are RTL-aware, and the `'left'` and `'right'` values are not. | `"bottom" \| "end" \| "left" \| "right" \| "start" \| "top"` | `'bottom'` | -| `size` | `size` | Describes how to calculate the popover width. If `'cover'`, the popover width will match the width of the trigger. If `'auto'`, the popover width will be determined by the content in the popover. | `"auto" \| "cover"` | `'auto'` | -| `translucent` | `translucent` | If `true`, the popover will be translucent. Only applies when the mode is `"ios"` and the device supports [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility). | `boolean` | `false` | -| `trigger` | `trigger` | An ID corresponding to the trigger element that causes the popover to open. Use the `trigger-action` property to customize the interaction that results in the popover opening. | `string \| undefined` | `undefined` | -| `triggerAction` | `trigger-action` | Describes what kind of interaction with the trigger that should cause the popover to open. Does not apply when the `trigger` property is `undefined`. If `'click'`, the popover will be presented when the trigger is left clicked. If `'hover'`, the popover will be presented when a pointer hovers over the trigger. If `'context-menu'`, the popover will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing. | `"click" \| "context-menu" \| "hover"` | `'click'` | - - -## Events - -| Event | Description | Type | -| ----------------------- | ------------------------------------------------------------------------------ | -------------------------------------- | -| `didDismiss` | Emitted after the popover has dismissed. Shorthand for ionPopoverDidDismiss. | `CustomEvent>` | -| `didPresent` | Emitted after the popover has presented. Shorthand for ionPopoverWillDismiss. | `CustomEvent` | -| `ionPopoverDidDismiss` | Emitted after the popover has dismissed. | `CustomEvent>` | -| `ionPopoverDidPresent` | Emitted after the popover has presented. | `CustomEvent` | -| `ionPopoverWillDismiss` | Emitted before the popover has dismissed. | `CustomEvent>` | -| `ionPopoverWillPresent` | Emitted before the popover has presented. | `CustomEvent` | -| `willDismiss` | Emitted before the popover has dismissed. Shorthand for ionPopoverWillDismiss. | `CustomEvent>` | -| `willPresent` | Emitted before the popover has presented. Shorthand for ionPopoverWillPresent. | `CustomEvent` | - - -## Methods - -### `dismiss(data?: any, role?: string | undefined, dismissParentPopover?: boolean) => Promise` - -Dismiss the popover overlay after it has been presented. - -#### Returns - -Type: `Promise` - - - -### `onDidDismiss() => Promise>` - -Returns a promise that resolves when the popover did dismiss. - -#### Returns - -Type: `Promise>` - - - -### `onWillDismiss() => Promise>` - -Returns a promise that resolves when the popover will dismiss. - -#### Returns - -Type: `Promise>` - - - -### `present(event?: MouseEvent | TouchEvent | PointerEvent | CustomEvent | undefined) => Promise` - -Present the popover overlay after it has been created. -Developers can pass a mouse, touch, or pointer event -to position the popover relative to where that event -was dispatched. - -#### Returns - -Type: `Promise` - - - - -## Slots - -| Slot | Description | -| ---- | ----------------------------------------------------------- | -| | Content is placed inside of the `.popover-content` element. | - - -## Shadow Parts - -| Part | Description | -| ------------ | --------------------------------------------------------------------------- | -| `"arrow"` | The arrow that points to the reference element. Only applies on `ios` mode. | -| `"backdrop"` | The `ion-backdrop` element. | -| `"content"` | The wrapper element for the default slot. | - - -## CSS Custom Properties - -| Name | Description | -| -------------------- | ----------------------------------------------- | -| `--backdrop-opacity` | Opacity of the backdrop | -| `--background` | Background of the popover | -| `--box-shadow` | Box shadow of the popover | -| `--height` | Height of the popover | -| `--max-height` | Maximum height of the popover | -| `--max-width` | Maximum width of the popover | -| `--min-height` | Minimum height of the popover | -| `--min-width` | Minimum width of the popover | -| `--offset-x` | The amount to move the popover by on the x-axis | -| `--offset-y` | The amount to move the popover by on the y-axis | -| `--width` | Width of the popover | - - -## Dependencies - -### Used by - - - [ion-datetime](../datetime) - - [ion-select](../select) - -### Depends on - -- [ion-backdrop](../backdrop) - -### Graph -```mermaid -graph TD; - ion-popover --> ion-backdrop - ion-datetime --> ion-popover - ion-select --> ion-popover - style ion-popover fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/popover/usage/angular.md b/core/src/components/popover/usage/angular.md deleted file mode 100644 index 7d0ec723b4..0000000000 --- a/core/src/components/popover/usage/angular.md +++ /dev/null @@ -1,130 +0,0 @@ -### Inline Popover - -```html - - - - Popover Content - - - - - - - Popover Content - - - - -Click to open popover - - - Popover Content - - - - -Hover to open popover - - - Popover Content - - - - -Click to open popover - - - Popover Content - - - - -Click to open popover - - - Popover Content - - - - -Click to open popover - - - Popover Content - - - - -Click to open popover - - - Popover Content - - - - -Click to open popover - - - - - - Option 1 - - - Option 2 - - - Option 3 - - - - - - - Nested Option - - - - - - - - -``` - -### Popover Controller - -```typescript -import { Component } from '@angular/core'; -import { PopoverController } from '@ionic/angular'; -import { PopoverComponent } from '../../component/popover/popover.component'; - -@Component({ - selector: 'popover-example', - templateUrl: 'popover-example.html', - styleUrls: ['./popover-example.css'] -}) -export class PopoverExample { - constructor(public popoverController: PopoverController) {} - - async presentPopover(ev: any) { - const popover = await this.popoverController.create({ - component: PopoverComponent, - cssClass: 'my-custom-class', - event: ev, - translucent: true - }); - await popover.present(); - - const { role } = await popover.onDidDismiss(); - console.log('onDidDismiss resolved with role', role); - } -} -``` - - -### 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 deleted file mode 100644 index dcf5b6c3ed..0000000000 --- a/core/src/components/popover/usage/javascript.md +++ /dev/null @@ -1,116 +0,0 @@ -### Inline Popover - -```html - - - Popover Content - - - - - Popover Content - - - -Click to open popover - - Popover Content - - - -Hover to open popover - - Popover Content - - - -Click to open popover - - Popover Content - - - -Click to open popover - - Popover Content - - - -Click to open popover - - Popover Content - - - -Click to open popover - - Popover Content - - - -Click to open popover - - - - - Option 1 - - - Option 2 - - - Option 3 - - - - - - Nested Option - - - - - - -``` - -### Using JavaScript - -```javascript -class PopoverExamplePage extends HTMLElement { - constructor() { - super(); - } - - connectedCallback() { - this.innerHTML = ` - - - Ionic - Item 0 - Item 1 - Item 2 - Item 3 - - - `; - } -} - -customElements.define('popover-example-page', PopoverExamplePage); - -async function presentPopover(ev) { - const popover = Object.assign(document.createElement('ion-popover'), { - component: 'popover-example-page', - cssClass: 'my-custom-class', - event: ev, - translucent: true - }); - document.body.appendChild(popover); - - await popover.present(); - - const { role } = await popover.onDidDismiss(); - console.log('onDidDismiss resolved with role', role); -} -``` diff --git a/core/src/components/popover/usage/react.md b/core/src/components/popover/usage/react.md deleted file mode 100644 index ab8dcace5c..0000000000 --- a/core/src/components/popover/usage/react.md +++ /dev/null @@ -1,169 +0,0 @@ -### Inline Popover - -```tsx -import React, { useState } from 'react'; -import { IonPopover, IonContent, IonItem, IonLabel, IonButton } from '@ionic/react'; - -export const PopoverExample: React.FC = () => { - return ( - <> - {/* Default */} - - Popover Content - - - {/* No Arrow */} - - Popover Content - - - {/* Use a trigger */} - Click to open popover - - Popover Content - - - {/* Hover over trigger to open */} - Hover to open popover - - Popover Content - - - {/* Show popover above trigger */} - Click to open popover - - Popover Content - - - {/* Align popover to end of trigger */} - Click to open popover - - Popover Content - - - {/* Make popover the same size as the trigger */} - Click to open popover - - Popover Content - - - {/* Make popover show relative to click coordinates rather than trigger */} - Click to open popover - - Popover Content - - - {/* Nested Popover */} - Click to open popover - - - - - Option 1 - - - Option 2 - - - Option 3 - - - - - - Nested Option - - - - - - - - ); -}; -``` - -### Inline Popover with State - -```tsx -import React, { useState } from 'react'; -import { IonPopover, IonButton } from '@ionic/react'; - -export const PopoverExample: React.FC = () => { - const [popoverState, setShowPopover] = useState({ showPopover: false, event: undefined }); - - return ( - <> - setShowPopover({ showPopover: false, event: undefined })} - > -

This is popover content

- - { - e.persist(); - setShowPopover({ showPopover: true, event: e }) - }} - > - Show Popover - - - ); -}; -``` - -### useIonPopover Hook - -> `useIonPopover` requires being a descendant of ``. If you need to use a popover outside of an ``, consider using the component method instead. - -```tsx -import React from 'react'; -import { - IonButton, - IonContent, - IonItem, - IonList, - IonListHeader, - IonPage, - useIonPopover, -} from '@ionic/react'; - -const PopoverList: React.FC<{ - onHide: () => void; -}> = ({ onHide }) => ( - - Ionic - Learn Ionic - Documentation - Showcase - GitHub Repo - - Close - - -); - -const PopoverExample: React.FC = () => { - const [present, dismiss] = useIonPopover(PopoverList, { onHide: () => dismiss() }); - - return ( - - - - present({ - event: e.nativeEvent, - }) - } - > - Show Popover - - - - ); -}; -``` \ No newline at end of file diff --git a/core/src/components/popover/usage/stencil.md b/core/src/components/popover/usage/stencil.md deleted file mode 100644 index 78cc5b8fb4..0000000000 --- a/core/src/components/popover/usage/stencil.md +++ /dev/null @@ -1,176 +0,0 @@ -### Inline Popover - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'popover-example', - styleUrl: 'popover-example.css' -}) -export class PopoverExample { - render() { - return [ - - {/* Default */} - - Popover Content - - - {/* No Arrow */} - - Popover Content - - - {/* Use a trigger */} - Click to open popover - - Popover Content - - - {/* Hover over trigger to open */} - Hover to open popover - - Popover Content - - - {/* Show popover above trigger */} - Click to open popover - - Popover Content - - - {/* Align popover to end of trigger */} - Click to open popover - - Popover Content - - - {/* Make popover the same size as the trigger */} - Click to open popover - - Popover Content - - - {/* Make popover show relative to click coordinates rather than trigger */} - Click to open popover - - Popover Content - - - {/* Nested Popover */} - Click to open popover - - - - - Option 1 - - - Option 2 - - - Option 3 - - - - - - Nested Option - - - - - - - - ]; - } -} -``` - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'page-popover', - styleUrl: 'page-popover.css', -}) -export class PagePopover { - render() { - return [ - - - Documentation - - - Feedback - - - Settings - - - ]; - } -} -``` - -### Popover Controller - -```tsx -import { Component, h } from '@stencil/core'; - -import { popoverController } from '@ionic/core'; - -@Component({ - tag: 'popover-example', - styleUrl: 'popover-example.css' -}) -export class PopoverExample { - async presentPopover(ev: any) { - const popover = await popoverController.create({ - component: 'page-popover', - cssClass: 'my-custom-class', - event: ev, - translucent: true - }); - await popover.present(); - - const { role } = await popover.onDidDismiss(); - console.log('onDidDismiss resolved with role', role); - } - - render() { - return [ - - this.presentPopover(ev)}>Present Popover - - ]; - } -} -``` - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'page-popover', - styleUrl: 'page-popover.css', -}) -export class PagePopover { - render() { - return [ - - - Documentation - - - Feedback - - - Settings - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/popover/usage/vue.md b/core/src/components/popover/usage/vue.md deleted file mode 100644 index 1e87d814f2..0000000000 --- a/core/src/components/popover/usage/vue.md +++ /dev/null @@ -1,177 +0,0 @@ -### Inline Popover - -```html - - - -``` - - -### Inline Popover with State - -```html - - - -``` - -### Popover Controller - -```html - - - -``` - -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/progress-bar/readme.md b/core/src/components/progress-bar/readme.md deleted file mode 100644 index 747082e1ee..0000000000 --- a/core/src/components/progress-bar/readme.md +++ /dev/null @@ -1,165 +0,0 @@ -# ion-progress-bar - -Progress bars inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. There are two types of progress bars: `determinate` and `indeterminate`. - -## Progress Type - -### Determinate - -Determinate is the default type. It should be used when the percentage of an operation is known. The progress is represented by setting the `value` property. This can be used to show the progress increasing from 0 to 100% of the track. - -If the `buffer` property is set, a buffer stream will show with animated circles to indicate activity. The value of the `buffer` property will also be represented by how much visible track there is. If the value of `buffer` is less than the `value` property, there will be no visible track. If `buffer` is equal to `1` then the buffer stream will be hidden. - -### Indeterminate - -The indeterminate type should be used when it is unknown how long the process will take. The progress bar is not tied to the `value`, instead it continually slides along the track until the process is complete. - - - - -## Usage - -### Angular / javascript - -```html - - - - - - - - - - - - - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonProgressBar, IonContent } from '@ionic/react'; - -export const ProgressbarExample: React.FC = () => ( - - {/*-- Default Progressbar --*/} -
- - {/*-- Default Progressbar with 50 percent --*/} -
- - {/*-- Colorize Progressbar --*/} -
-
- - {/*-- Other types --*/} -
-
-
- -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'progress-bar-example', - styleUrl: 'progress-bar-example.css' -}) -export class ProgressBarExample { - render() { - return [ - // Default Progressbar - , - - // Default Progressbar with 50 percent - , - - // Colorize Progressbar - , - , - - // Other types - , - , - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | --------------- | -| `buffer` | `buffer` | If the buffer and value are smaller than 1, the buffer circles will show. The buffer should be between [0, 1]. | `number` | `1` | -| `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). | `string \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `reversed` | `reversed` | If true, reverse the progress bar direction. | `boolean` | `false` | -| `type` | `type` | The state of the progress bar, based on if the time the process takes is known or not. Default options are: `"determinate"` (no animation), `"indeterminate"` (animate from left to right). | `"determinate" \| "indeterminate"` | `'determinate'` | -| `value` | `value` | The value determines how much of the active bar should display when the `type` is `"determinate"`. The value should be between [0, 1]. | `number` | `0` | - - -## Shadow Parts - -| Part | Description | -| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `"progress"` | The progress bar that shows the current value when `type` is `"determinate"` and slides back and forth when `type` is `"indeterminate"`. | -| `"stream"` | The animated circles that appear while buffering. This only shows when `buffer` is set and `type` is `"determinate"`. | -| `"track"` | The track bar behind the progress bar. If the `buffer` property is set and `type` is `"determinate"` the track will be the width of the `buffer` value. | - - -## CSS Custom Properties - -| Name | Description | -| ----------------------- | ---------------------------------------------------------------------- | -| `--background` | Background of the progress track, or the buffer bar if `buffer` is set | -| `--buffer-background` | DEPRECATED, use `--background` instead | -| `--progress-background` | Background of the progress bar representing the current value | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/progress-bar/usage/angular.md b/core/src/components/progress-bar/usage/angular.md deleted file mode 100644 index 976f5d44ac..0000000000 --- a/core/src/components/progress-bar/usage/angular.md +++ /dev/null @@ -1,16 +0,0 @@ -```html - - - - - - - - - - - - - - -``` diff --git a/core/src/components/progress-bar/usage/javascript.md b/core/src/components/progress-bar/usage/javascript.md deleted file mode 100644 index 976f5d44ac..0000000000 --- a/core/src/components/progress-bar/usage/javascript.md +++ /dev/null @@ -1,16 +0,0 @@ -```html - - - - - - - - - - - - - - -``` diff --git a/core/src/components/progress-bar/usage/react.md b/core/src/components/progress-bar/usage/react.md deleted file mode 100644 index b542b095bd..0000000000 --- a/core/src/components/progress-bar/usage/react.md +++ /dev/null @@ -1,23 +0,0 @@ -```tsx -import React from 'react'; -import { IonProgressBar, IonContent } from '@ionic/react'; - -export const ProgressbarExample: React.FC = () => ( - - {/*-- Default Progressbar --*/} -
- - {/*-- Default Progressbar with 50 percent --*/} -
- - {/*-- Colorize Progressbar --*/} -
-
- - {/*-- Other types --*/} -
-
-
- -); -``` diff --git a/core/src/components/progress-bar/usage/stencil.md b/core/src/components/progress-bar/usage/stencil.md deleted file mode 100644 index 423213df7d..0000000000 --- a/core/src/components/progress-bar/usage/stencil.md +++ /dev/null @@ -1,28 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'progress-bar-example', - styleUrl: 'progress-bar-example.css' -}) -export class ProgressBarExample { - render() { - return [ - // Default Progressbar - , - - // Default Progressbar with 50 percent - , - - // Colorize Progressbar - , - , - - // Other types - , - , - - ]; - } -} -``` diff --git a/core/src/components/progress-bar/usage/vue.md b/core/src/components/progress-bar/usage/vue.md deleted file mode 100644 index 85aa50e9ac..0000000000 --- a/core/src/components/progress-bar/usage/vue.md +++ /dev/null @@ -1,27 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/radio-group/readme.md b/core/src/components/radio-group/readme.md deleted file mode 100644 index f69168d1a7..0000000000 --- a/core/src/components/radio-group/readme.md +++ /dev/null @@ -1,270 +0,0 @@ -# ion-radio-group - -A radio group is a group of [radio buttons](../radio). It allows -a user to select at most one radio button from a set. Checking one radio -button that belongs to a radio group unchecks any previous checked -radio button within the same group. - -## Interfaces - -### RadioGroupChangeEventDetail - -```typescript -interface RadioGroupChangeEventDetail { - value: T; -} -``` - -### RadioGroupCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface RadioGroupCustomEvent extends CustomEvent { - detail: RadioGroupChangeEventDetail; - target: HTMLIonRadioGroupElement; -} -``` - - - - -## Usage - -### Angular / javascript - -```html - - - - - Auto Manufacturers - - - - - Cord - - - - - Duesenberg - - - - - Hudson - - - - - Packard - - - - - Studebaker - - - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem, IonContent } from '@ionic/react'; - -export const RadioGroupExample: React.FC = () => ( - - - - - - Auto Manufacturers - - - - - Cord - - - - - Duesenberg - - - - - Hudson - - - - - Packard - - - - - Studebaker - - - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'radio-group-example', - styleUrl: 'radio-group-example.css' -}) -export class RadioGroupExample { - render() { - return [ - - - - - Auto Manufacturers - - - - - Cord - - - - - Duesenberg - - - - - Hudson - - - - - Packard - - - - - Studebaker - - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| --------------------- | ----------------------- | --------------------------------------------------------------- | --------- | -------------- | -| `allowEmptySelection` | `allow-empty-selection` | If `true`, the radios can be deselected. | `boolean` | `false` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | -| `value` | `value` | the value of the radio group. | `any` | `undefined` | - - -## Events - -| Event | Description | Type | -| ----------- | ----------------------------------- | ----------------------------------------------- | -| `ionChange` | Emitted when the value has changed. | `CustomEvent>` | - - -## Dependencies - -### Used by - - - ion-select-popover - -### Graph -```mermaid -graph TD; - ion-select-popover --> ion-radio-group - style ion-radio-group fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/radio-group/usage/angular.md b/core/src/components/radio-group/usage/angular.md deleted file mode 100644 index 83fb5551cb..0000000000 --- a/core/src/components/radio-group/usage/angular.md +++ /dev/null @@ -1,36 +0,0 @@ -```html - - - - - Auto Manufacturers - - - - - Cord - - - - - Duesenberg - - - - - Hudson - - - - - Packard - - - - - Studebaker - - - - -``` diff --git a/core/src/components/radio-group/usage/javascript.md b/core/src/components/radio-group/usage/javascript.md deleted file mode 100644 index 83fb5551cb..0000000000 --- a/core/src/components/radio-group/usage/javascript.md +++ /dev/null @@ -1,36 +0,0 @@ -```html - - - - - Auto Manufacturers - - - - - Cord - - - - - Duesenberg - - - - - Hudson - - - - - Packard - - - - - Studebaker - - - - -``` diff --git a/core/src/components/radio-group/usage/react.md b/core/src/components/radio-group/usage/react.md deleted file mode 100644 index 5538988a67..0000000000 --- a/core/src/components/radio-group/usage/react.md +++ /dev/null @@ -1,43 +0,0 @@ -```tsx -import React from 'react'; -import { IonList, IonRadioGroup, IonListHeader, IonLabel, IonRadio, IonItem, IonContent } from '@ionic/react'; - -export const RadioGroupExample: React.FC = () => ( - - - - - - Auto Manufacturers - - - - - Cord - - - - - Duesenberg - - - - - Hudson - - - - - Packard - - - - - Studebaker - - - - - -); -``` \ No newline at end of file diff --git a/core/src/components/radio-group/usage/stencil.md b/core/src/components/radio-group/usage/stencil.md deleted file mode 100644 index 4d63ff7cff..0000000000 --- a/core/src/components/radio-group/usage/stencil.md +++ /dev/null @@ -1,48 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'radio-group-example', - styleUrl: 'radio-group-example.css' -}) -export class RadioGroupExample { - render() { - return [ - - - - - Auto Manufacturers - - - - - Cord - - - - - Duesenberg - - - - - Hudson - - - - - Packard - - - - - Studebaker - - - - - ]; - } -} -``` diff --git a/core/src/components/radio-group/usage/vue.md b/core/src/components/radio-group/usage/vue.md deleted file mode 100644 index 2312a39d85..0000000000 --- a/core/src/components/radio-group/usage/vue.md +++ /dev/null @@ -1,61 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/radio/readme.md b/core/src/components/radio/readme.md deleted file mode 100644 index 7682828189..0000000000 --- a/core/src/components/radio/readme.md +++ /dev/null @@ -1,236 +0,0 @@ -# ion-radio - -Radios should be used inside of an [`ion-radio-group`](../radio-group). Pressing on a radio will check it. They can also be checked programmatically by setting the value property of the parent `ion-radio-group` to the value of the radio. - -When radios are inside of a radio group, only one radio in the group will be checked at any time. Pressing a radio will check it and uncheck the previously selected radio, if there is one. If a radio is not in a group with another radio, then both radios will have the ability to be checked at the same time. - - - - - - - -## Usage - -### Angular / javascript - -```html - - - - Name - - - - Biff - - - - - Griff - - - - - Buford - - - - -``` - - -### React - -```tsx -import React, { useState } from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonItemDivider } from '@ionic/react'; - -export const RadioExamples: React.FC = () => { - const [selected, setSelected] = useState('biff'); - return ( - - - - Radio Examples - - - - - setSelected(e.detail.value)}> - - Name - - - - Biff - - - - - Griff - - - - - Buford - - - - Your Selection - {selected ?? '(none selected'} - - - - ); -}; -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'radio-example', - styleUrl: 'radio-example.css' -}) -export class RadioExample { - render() { - return [ - - - - Name - - - - Biff - - - - - Griff - - - - - Buford - - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------- | -| `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). | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the radio. | `boolean` | `false` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `this.inputId` | -| `value` | `value` | the value of the radio. | `any` | `undefined` | - - -## Events - -| Event | Description | Type | -| ---------- | ------------------------------------------ | ------------------- | -| `ionBlur` | Emitted when the radio button loses focus. | `CustomEvent` | -| `ionFocus` | Emitted when the radio button has focus. | `CustomEvent` | - - -## Shadow Parts - -| Part | Description | -| ------------- | -------------------------------------------------------- | -| `"container"` | The container for the radio mark. | -| `"mark"` | The checkmark or dot used to indicate the checked state. | - - -## CSS Custom Properties - -| Name | Description | -| ----------------------- | ---------------------------------------- | -| `--border-radius` | Border radius of the radio | -| `--color` | Color of the radio | -| `--color-checked` | Color of the checked radio | -| `--inner-border-radius` | Border radius of the inner checked radio | - - -## Dependencies - -### Used by - - - ion-select-popover - -### Graph -```mermaid -graph TD; - ion-select-popover --> ion-radio - style ion-radio fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/radio/usage/angular.md b/core/src/components/radio/usage/angular.md deleted file mode 100644 index 40be13a70e..0000000000 --- a/core/src/components/radio/usage/angular.md +++ /dev/null @@ -1,24 +0,0 @@ -```html - - - - Name - - - - Biff - - - - - Griff - - - - - Buford - - - - -``` diff --git a/core/src/components/radio/usage/javascript.md b/core/src/components/radio/usage/javascript.md deleted file mode 100644 index 40be13a70e..0000000000 --- a/core/src/components/radio/usage/javascript.md +++ /dev/null @@ -1,24 +0,0 @@ -```html - - - - Name - - - - Biff - - - - - Griff - - - - - Buford - - - - -``` diff --git a/core/src/components/radio/usage/react.md b/core/src/components/radio/usage/react.md deleted file mode 100644 index aa8e66d2b0..0000000000 --- a/core/src/components/radio/usage/react.md +++ /dev/null @@ -1,43 +0,0 @@ -```tsx -import React, { useState } from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonRadioGroup, IonListHeader, IonLabel, IonItem, IonRadio, IonItemDivider } from '@ionic/react'; - -export const RadioExamples: React.FC = () => { - const [selected, setSelected] = useState('biff'); - return ( - - - - Radio Examples - - - - - setSelected(e.detail.value)}> - - Name - - - - Biff - - - - - Griff - - - - - Buford - - - - Your Selection - {selected ?? '(none selected'} - - - - ); -}; -``` \ No newline at end of file diff --git a/core/src/components/radio/usage/stencil.md b/core/src/components/radio/usage/stencil.md deleted file mode 100644 index 817b837e13..0000000000 --- a/core/src/components/radio/usage/stencil.md +++ /dev/null @@ -1,36 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'radio-example', - styleUrl: 'radio-example.css' -}) -export class RadioExample { - render() { - return [ - - - - Name - - - - Biff - - - - - Griff - - - - - Buford - - - - - ]; - } -} -``` diff --git a/core/src/components/radio/usage/vue.md b/core/src/components/radio/usage/vue.md deleted file mode 100644 index a210a9e07a..0000000000 --- a/core/src/components/radio/usage/vue.md +++ /dev/null @@ -1,49 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md deleted file mode 100644 index 00ca549144..0000000000 --- a/core/src/components/range/readme.md +++ /dev/null @@ -1,435 +0,0 @@ -# ion-range - -The Range slider lets users select from a range of values by moving -the slider knob. It can accept dual knobs, but by default one knob -controls the value of the range. - -## Range Labels - -Labels can be placed on either side of the range by adding the -`slot="start"` or `slot="end"` to the element. The element doesn't have to -be an `ion-label`, it can be added to any element to place it to the -left or right of the range. - -## Custom Pin Formatters - -When using a pin, the default behavior is to round the value that gets displayed using `Math.round()`. This behavior can be customized by passing in a formatter function to the `pinFormatter` property. See the [Usage](#usage) section for an example. - -## Interfaces - -### RangeChangeEventDetail - -```typescript -interface RangeChangeEventDetail { - value: RangeValue; -} -``` - -### RangeKnobMoveStartEventDetail - -```typescript -interface RangeKnobMoveStartEventDetail { - value: RangeValue; -} -``` - -### RangeKnobMoveEndEventDetail - -```typescript -interface RangeKnobMoveEndEventDetail { - value: RangeValue; -} -``` - -### RangeCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface RangeCustomEvent extends CustomEvent { - detail: RangeChangeEventDetail; - target: HTMLIonRangeElement; -} -``` - -## Types - -### RangeValue - -```typescript -type RangeValue = number | { lower: number, upper: number }; -``` - - - - -## Usage - -### Angular - -```html - - - - - - - - -200 - 200 - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({…}) -export class MyComponent { - constructor() {} - - public customFormatter(value: number) { - return `${value}%` - } -} -``` - - -### Javascript - -```html - - - - - - - - -200 - 200 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - - -### React - -```tsx -import React, { useState } from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonRange, IonLabel, IonIcon, IonItemDivider } from '@ionic/react'; -import { sunny } from 'ionicons/icons'; -import { RangeValue } from '@ionic/core'; - -export const RangeExamples: React.FC = () => { - - const [value, setValue] = useState(0); - const [rangeValue, setRangeValue] = useState<{ - lower: number; - upper: number; - }>({ lower: 0, upper: 0 }); - - const customFormatter = (value: number) => `${value}%`; - - return ( - - - - IonRange Examples - - - - - Default - - setValue(e.detail.value as number)} /> - - - Value: {value} - - - Min & Max - - - -200 - 200 - - - - Icons - - - - - - - - With Snaps & Ticks - - - - - With Snaps & No Ticks - - - - - Dual Knobs - - setRangeValue(e.detail.value as any)} /> - - - Value: lower: {rangeValue.lower} upper: {rangeValue.upper} - - - - - - - - - ); -}; -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'range-example', - styleUrl: 'range-example.css' -}) -export class RangeExample { - private customFormatter = (value: number) => `${value}%`; - - render() { - return [ - - - - - - - - -200 - 200 - - - - - - - - - - - - - - - - - - - - - - - - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ---------------------------------------------- | -| `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). | `string \| undefined` | `undefined` | -| `debounce` | `debounce` | How long, in milliseconds, to wait to trigger the `ionChange` event after each change in the range value. This also impacts form bindings such as `ngModel` or `v-model`. | `number` | `0` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the range. | `boolean` | `false` | -| `dualKnobs` | `dual-knobs` | Show two knobs. | `boolean` | `false` | -| `max` | `max` | Maximum integer value of the range. | `number` | `100` | -| `min` | `min` | Minimum integer value of the range. | `number` | `0` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `name` | `name` | The name of the control, which is submitted with the form data. | `string` | `''` | -| `pin` | `pin` | If `true`, a pin with integer value is shown when the knob is pressed. | `boolean` | `false` | -| `pinFormatter` | -- | A callback used to format the pin text. By default the pin text is set to `Math.round(value)`. | `(value: number) => string \| number` | `(value: number): number => Math.round(value)` | -| `snaps` | `snaps` | If `true`, the knob snaps to tick marks evenly spaced based on the step property value. | `boolean` | `false` | -| `step` | `step` | Specifies the value granularity. | `number` | `1` | -| `ticks` | `ticks` | If `true`, tick marks are displayed based on the step value. Only applies when `snaps` is `true`. | `boolean` | `true` | -| `value` | `value` | the value of the range. | `number \| { lower: number; upper: number; }` | `0` | - - -## Events - -| Event | Description | Type | -| ------------------ | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | -| `ionBlur` | Emitted when the range loses focus. | `CustomEvent` | -| `ionChange` | Emitted when the value property has changed. | `CustomEvent` | -| `ionFocus` | Emitted when the range has focus. | `CustomEvent` | -| `ionKnobMoveEnd` | Emitted when the user finishes moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction. | `CustomEvent` | -| `ionKnobMoveStart` | Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction. | `CustomEvent` | - - -## Slots - -| Slot | Description | -| --------- | ---------------------------------------------------------------------------------- | -| `"end"` | Content is placed to the right of the range slider in LTR, and to the left in RTL. | -| `"start"` | Content is placed to the left of the range slider in LTR, and to the right in RTL. | - - -## Shadow Parts - -| Part | Description | -| --------------- | ------------------------------------------ | -| `"bar"` | The inactive part of the bar. | -| `"bar-active"` | The active part of the bar. | -| `"knob"` | The handle that is used to drag the range. | -| `"pin"` | The counter that appears above a knob. | -| `"tick"` | An inactive tick mark. | -| `"tick-active"` | An active tick mark. | - - -## CSS Custom Properties - -| Name | Description | -| ------------------------- | ---------------------------------- | -| `--bar-background` | Background of the range bar | -| `--bar-background-active` | Background of the active range bar | -| `--bar-border-radius` | Border radius of the range bar | -| `--bar-height` | Height of the range bar | -| `--height` | Height of the range | -| `--knob-background` | Background of the range knob | -| `--knob-border-radius` | Border radius of the range knob | -| `--knob-box-shadow` | Box shadow of the range knob | -| `--knob-size` | Size of the range knob | -| `--pin-background` | Background of the range pin | -| `--pin-color` | Color of the range pin | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/range/usage/angular.md b/core/src/components/range/usage/angular.md deleted file mode 100644 index 3933c8f1b5..0000000000 --- a/core/src/components/range/usage/angular.md +++ /dev/null @@ -1,50 +0,0 @@ -```html - - - - - - - - -200 - 200 - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({…}) -export class MyComponent { - constructor() {} - - public customFormatter(value: number) { - return `${value}%` - } -} -``` \ No newline at end of file diff --git a/core/src/components/range/usage/javascript.md b/core/src/components/range/usage/javascript.md deleted file mode 100644 index d98e14b735..0000000000 --- a/core/src/components/range/usage/javascript.md +++ /dev/null @@ -1,42 +0,0 @@ -```html - - - - - - - - -200 - 200 - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` diff --git a/core/src/components/range/usage/react.md b/core/src/components/range/usage/react.md deleted file mode 100644 index 0f91afb3f8..0000000000 --- a/core/src/components/range/usage/react.md +++ /dev/null @@ -1,76 +0,0 @@ -```tsx -import React, { useState } from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonList, IonItem, IonRange, IonLabel, IonIcon, IonItemDivider } from '@ionic/react'; -import { sunny } from 'ionicons/icons'; -import { RangeValue } from '@ionic/core'; - -export const RangeExamples: React.FC = () => { - - const [value, setValue] = useState(0); - const [rangeValue, setRangeValue] = useState<{ - lower: number; - upper: number; - }>({ lower: 0, upper: 0 }); - - const customFormatter = (value: number) => `${value}%`; - - return ( - - - - IonRange Examples - - - - - Default - - setValue(e.detail.value as number)} /> - - - Value: {value} - - - Min & Max - - - -200 - 200 - - - - Icons - - - - - - - - With Snaps & Ticks - - - - - With Snaps & No Ticks - - - - - Dual Knobs - - setRangeValue(e.detail.value as any)} /> - - - Value: lower: {rangeValue.lower} upper: {rangeValue.upper} - - - - - - - - - ); -}; -``` diff --git a/core/src/components/range/usage/stencil.md b/core/src/components/range/usage/stencil.md deleted file mode 100644 index 97134bf1e7..0000000000 --- a/core/src/components/range/usage/stencil.md +++ /dev/null @@ -1,51 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'range-example', - styleUrl: 'range-example.css' -}) -export class RangeExample { - private customFormatter = (value: number) => `${value}%`; - - render() { - return [ - - - - - - - - -200 - 200 - - - - - - - - - - - - - - - - - - - - - - - - - - - ]; - } -} -``` diff --git a/core/src/components/range/usage/vue.md b/core/src/components/range/usage/vue.md deleted file mode 100644 index fdfc4c631b..0000000000 --- a/core/src/components/range/usage/vue.md +++ /dev/null @@ -1,57 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/refresher-content/readme.md b/core/src/components/refresher-content/readme.md deleted file mode 100644 index 08043d8750..0000000000 --- a/core/src/components/refresher-content/readme.md +++ /dev/null @@ -1,37 +0,0 @@ -# ion-refresher-content - -The refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic provides the pulling icon and refreshing spinner based on the platform. However, the default icon, spinner, and text can be customized based on the state of the refresher. - - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -| `pullingIcon` | `pulling-icon` | A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices. | `null \| string \| undefined` | `undefined` | -| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | -| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-sharp" \| "lines-sharp-small" \| "lines-small" \| null \| undefined` | `undefined` | -| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `IonicSafeString \| string \| undefined` | `undefined` | - - -## Dependencies - -### Depends on - -- [ion-spinner](../spinner) -- ion-icon - -### Graph -```mermaid -graph TD; - ion-refresher-content --> ion-spinner - ion-refresher-content --> ion-icon - style ion-refresher-content fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/refresher/readme.md b/core/src/components/refresher/readme.md deleted file mode 100644 index f46d190fb1..0000000000 --- a/core/src/components/refresher/readme.md +++ /dev/null @@ -1,376 +0,0 @@ -# ion-refresher - -The refresher provides pull-to-refresh functionality on a content component. -The pull-to-refresh pattern lets a user pull down on a list of data using touch -in order to retrieve more data. - -Data should be modified during the refresher's output events. Once the async -operation has completed and the refreshing should end, call `complete()` on the -refresher. - -## Native Refreshers - -Both iOS and Android platforms provide refreshers that take advantage of properties exposed by their respective devices that give pull to refresh a fluid, native-like feel. - -Certain properties such as `pullMin` and `snapbackDuration` are not compatible because much of the native refreshers are scroll-based. See [Refresher Properties](#properties) for more information. - -### iOS Usage - -Using the iOS native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [Spinner Documentation](../spinner#properties) for accepted values. The `pullingIcon` defaults to the `lines` spinner on iOS. The spinner tick marks will be progressively shown as the user pulls down on the page. - -The iOS native `ion-refresher` relies on rubber band scrolling in order to work properly and is only compatible with iOS devices as a result. We provide a fallback refresher for apps running in iOS mode on devices that do not support rubber band scrolling. - -### Android Usage - -Using the MD native `ion-refresher` requires setting the `pullingIcon` property on `ion-refresher-content` to the value of one of the available spinners. See the [ion-spinner Documentation](../spinner#properties) for accepted values. `pullingIcon` defaults to the `circular` spinner on MD. - -### Virtual Scroll Usage - -Refresher requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target. - -```html - - - - - - - - -``` - -## Interfaces - -### RefresherEventDetail - -```typescript -interface RefresherEventDetail { - complete(): void; -} -``` - -### RefresherCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface RefresherCustomEvent extends CustomEvent { - detail: RefresherEventDetail; - target: HTMLIonRefresherElement; -} -``` - - - - -## Usage - -### Angular - -```html - - - - - - - - - - - - - - - - - - - - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({ - selector: 'refresher-example', - templateUrl: 'refresher-example.html', - styleUrls: ['./refresher-example.css'], -}) -export class RefresherExample { - constructor() {} - - doRefresh(event) { - console.log('Begin async operation'); - - setTimeout(() => { - console.log('Async operation has ended'); - event.target.complete(); - }, 2000); - } -} -``` - - -### Javascript - -```html - - - - - - - - - - - - - - - - - - - - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react'; -import { RefresherEventDetail } from '@ionic/core'; -import { chevronDownCircleOutline } from 'ionicons/icons'; - -function doRefresh(event: CustomEvent) { - console.log('Begin async operation'); - - setTimeout(() => { - console.log('Async operation has ended'); - event.detail.complete(); - }, 2000); -} - -export const RefresherExample: React.FC = () => ( - - {/*-- Default Refresher --*/} - - - - - - - {/*-- Custom Refresher Properties --*/} - - - - - - - {/*-- Custom Refresher Content --*/} - - - - - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'refresher-example', - styleUrl: 'refresher-example.css' -}) -export class RefresherExample { - doRefresh(ev: any) { - console.log('Begin async operation'); - - setTimeout(() => { - console.log('Async operation has ended'); - ev.target.complete(); - }, 2000); - } - - render() { - return [ - // Default Refresher - - this.doRefresh(ev)}> - - - , - - // Custom Refresher Properties - - - - - , - - // Custom Refresher Content - - this.doRefresh(ev)}> - - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- | -| `closeDuration` | `close-duration` | Time it takes to close the refresher. Does not apply when the refresher content uses a spinner, enabling the native refresher. | `string` | `'280ms'` | -| `disabled` | `disabled` | If `true`, the refresher will be hidden. | `boolean` | `false` | -| `pullFactor` | `pull-factor` | How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead. For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved. Does not apply when the refresher content uses a spinner, enabling the native refresher. | `number` | `1` | -| `pullMax` | `pull-max` | The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. Does not apply when the refresher content uses a spinner, enabling the native refresher. | `number` | `this.pullMin + 60` | -| `pullMin` | `pull-min` | The minimum distance the user must pull down until the refresher will go into the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher. | `number` | `60` | -| `snapbackDuration` | `snapback-duration` | Time it takes the refresher to snap back to the `refreshing` state. Does not apply when the refresher content uses a spinner, enabling the native refresher. | `string` | `'280ms'` | - - -## Events - -| Event | Description | Type | -| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- | -| `ionPull` | Emitted while the user is pulling down the content and exposing the refresher. | `CustomEvent` | -| `ionRefresh` | Emitted when the user lets go of the content and has pulled down further than the `pullMin` or pulls the content down and exceeds the pullMax. Updates the refresher state to `refreshing`. The `complete()` method should be called when the async operation has completed. | `CustomEvent` | -| `ionStart` | Emitted when the user begins to start pulling down. | `CustomEvent` | - - -## Methods - -### `cancel() => Promise` - -Changes the refresher's state from `refreshing` to `cancelling`. - -#### Returns - -Type: `Promise` - - - -### `complete() => Promise` - -Call `complete()` when your async operation has completed. -For example, the `refreshing` state is while the app is performing -an asynchronous operation, such as receiving more data from an -AJAX request. Once the data has been received, you then call this -method to signify that the refreshing has completed and to close -the refresher. This method also changes the refresher's state from -`refreshing` to `completing`. - -#### Returns - -Type: `Promise` - - - -### `getProgress() => Promise` - -A number representing how far down the user has pulled. -The number `0` represents the user hasn't pulled down at all. The -number `1`, and anything greater than `1`, represents that the user -has pulled far enough down that when they let go then the refresh will -happen. If they let go and the number is less than `1`, then the -refresh will not happen, and the content will return to it's original -position. - -#### Returns - -Type: `Promise` - - - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/refresher/usage/angular.md b/core/src/components/refresher/usage/angular.md deleted file mode 100644 index 73ef037952..0000000000 --- a/core/src/components/refresher/usage/angular.md +++ /dev/null @@ -1,49 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({ - selector: 'refresher-example', - templateUrl: 'refresher-example.html', - styleUrls: ['./refresher-example.css'], -}) -export class RefresherExample { - constructor() {} - - doRefresh(event) { - console.log('Begin async operation'); - - setTimeout(() => { - console.log('Async operation has ended'); - event.target.complete(); - }, 2000); - } -} -``` \ No newline at end of file diff --git a/core/src/components/refresher/usage/javascript.md b/core/src/components/refresher/usage/javascript.md deleted file mode 100644 index c5a40c8227..0000000000 --- a/core/src/components/refresher/usage/javascript.md +++ /dev/null @@ -1,27 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - - -``` \ No newline at end of file diff --git a/core/src/components/refresher/usage/react.md b/core/src/components/refresher/usage/react.md deleted file mode 100644 index ebcba0b210..0000000000 --- a/core/src/components/refresher/usage/react.md +++ /dev/null @@ -1,45 +0,0 @@ -```tsx -import React from 'react'; -import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/react'; -import { RefresherEventDetail } from '@ionic/core'; -import { chevronDownCircleOutline } from 'ionicons/icons'; - -function doRefresh(event: CustomEvent) { - console.log('Begin async operation'); - - setTimeout(() => { - console.log('Async operation has ended'); - event.detail.complete(); - }, 2000); -} - -export const RefresherExample: React.FC = () => ( - - {/*-- Default Refresher --*/} - - - - - - - {/*-- Custom Refresher Properties --*/} - - - - - - - {/*-- Custom Refresher Content --*/} - - - - - - - -); -``` \ No newline at end of file diff --git a/core/src/components/refresher/usage/stencil.md b/core/src/components/refresher/usage/stencil.md deleted file mode 100644 index 26af9bdbc6..0000000000 --- a/core/src/components/refresher/usage/stencil.md +++ /dev/null @@ -1,48 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'refresher-example', - styleUrl: 'refresher-example.css' -}) -export class RefresherExample { - doRefresh(ev: any) { - console.log('Begin async operation'); - - setTimeout(() => { - console.log('Async operation has ended'); - ev.target.complete(); - }, 2000); - } - - render() { - return [ - // Default Refresher - - this.doRefresh(ev)}> - - - , - - // Custom Refresher Properties - - - - - , - - // Custom Refresher Content - - this.doRefresh(ev)}> - - - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/refresher/usage/vue.md b/core/src/components/refresher/usage/vue.md deleted file mode 100644 index e7c94a0434..0000000000 --- a/core/src/components/refresher/usage/vue.md +++ /dev/null @@ -1,50 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/reorder-group/readme.md b/core/src/components/reorder-group/readme.md deleted file mode 100644 index 689dbc146b..0000000000 --- a/core/src/components/reorder-group/readme.md +++ /dev/null @@ -1,743 +0,0 @@ -# ion-reorder-group - -The reorder group is a wrapper component for items using the `ion-reorder` component. See the [Reorder documentation](../reorder/) for further information about the anchor component that is used to drag items within the `ion-reorder-group`. - -Once the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for it should be implemented that calls the `complete()` method. - -The `detail` property of the `ionItemReorder` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index. - -## Completing a Reorder - -When the `ionItemReorder` event is dispatched, developers have the option to call the `complete()` method on `ion-reorder-group`. This will complete the reorder operation. - -By default, the `complete()` method will re-order the DOM nodes inside of `ion-reorder-group`. - -For developers who need to sort an array based on the order of the items in `ion-reorder-group`, we recommend passing the array as a parameter in `complete()`. Ionic will sort and return the array so that it can be reassigned. - -In some cases, it may be necessary for an app to re-order both the array and the DOM nodes on its own. When this happens, it is recommended to pass `false` to the `complete()` method. This will prevent Ionic from re-ordering any DOM nodes inside of `ion-reorder-group`. - -## Usage with Virtual Scroll - -The reorder group requires a scroll container to function. When using a virtual scrolling solution, you will need to disable scrolling on the `ion-content` and indicate which element container is responsible for the scroll container with the `.ion-content-scroll-host` class target. - -```html - - - - - - Item 1 - - - - - - Item 2 - - - - - - -``` - -## Interfaces - -### ItemReorderEventDetail - -```typescript -interface ItemReorderEventDetail { - from: number; - to: number; - complete: (data?: boolean | any[]) => any; -} -``` - -### ItemReorderCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface ItemReorderCustomEvent extends CustomEvent { - detail: ItemReorderEventDetail; - target: HTMLIonReorderGroupElement; -} -``` - - - - -## Usage - -### Angular - -```html - - - - - - Item 1 - - - - - - - Item 2 - - - - - - - - - Item 3 - - - - - - - Item 4 - - - - - - - Item 5 - - - - - - - - - Item 6 - - - - - - - - - - - Item 7 - - - - - - - - Item 8 - - - - -``` - -```javascript -import { Component, ViewChild } from '@angular/core'; -import { IonReorderGroup } from '@ionic/angular'; -import { ItemReorderEventDetail } from '@ionic/core'; - -@Component({ - selector: 'reorder-group-example', - templateUrl: 'reorder-group-example.html', - styleUrls: ['./reorder-group-example.css'] -}) -export class ReorderGroupExample { - @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup; - - constructor() {} - - doReorder(ev: CustomEvent) { - // The `from` and `to` properties contain the index of the item - // when the drag started and ended, respectively - console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to); - - // 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 - ev.detail.complete(); - } - - toggleReorderGroup() { - this.reorderGroup.disabled = !this.reorderGroup.disabled; - } -} -``` - -### Updating Data - -```javascript -import { Component, ViewChild } from '@angular/core'; -import { IonReorderGroup } from '@ionic/angular'; -import { ItemReorderEventDetail } from '@ionic/core'; - -@Component({ - selector: 'reorder-group-example', - templateUrl: 'reorder-group-example.html', - styleUrls: ['./reorder-group-example.css'] -}) -export class ReorderGroupExample { - items = [1, 2, 3, 4, 5]; - - @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup; - - constructor() {} - - doReorder(ev: CustomEvent) { - // Before complete is called with the items they will remain in the - // order before the drag - console.log('Before complete', this.items); - - // Finish the reorder and position the item in the DOM based on - // where the gesture ended. Update the items variable to the - // new order of items - this.items = ev.detail.complete(this.items); - - // After complete is called the items will be in the new order - console.log('After complete', this.items); - } -} -``` - - -### Javascript - -```html - - - - - - Item 1 - - - - - - - Item 2 - - - - - - - - - Item 3 - - - - - - - Item 4 - - - - - - - Item 5 - - - - - - - - - Item 6 - - - - - - - - - - - Item 7 - - - - - - - - Item 8 - - - - -``` - -```javascript -const reorderGroup = document.querySelector('ion-reorder-group'); - -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); - - // 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(); -}); -``` - -### Updating Data - -```javascript -const items = [1, 2, 3, 4, 5]; -const reorderGroup = document.querySelector('ion-reorder-group'); - -reorderGroup.addEventListener('ionItemReorder', ({detail}) => { - // Before complete is called with the items they will remain in the - // order before the drag - console.log('Before complete', items); - - // Finish the reorder and position the item in the DOM based on - // where the gesture ended. Update the items variable to the - // new order of items - items = detail.complete(items); - - // After complete is called the items will be in the new order - console.log('After complete', items); -}); -``` - - -### React - -```tsx -import React from 'react'; -import { IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon, IonContent } from '@ionic/react'; -import { ItemReorderEventDetail } from '@ionic/core'; -import { pizza } from 'ionicons/icons'; - -function doReorder(event: CustomEvent) { - // The `from` and `to` properties contain the index of the item - // when the drag started and ended, respectively - console.log('Dragged from index', event.detail.from, 'to', event.detail.to); - - // 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 - event.detail.complete(); -} - -export const ReorderGroupExample: React.FC = () => ( - - {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/} - - {/*-- Default reorder icon, end aligned items --*/} - - Item 1 - - - - - Item 2 - - - - {/*-- Default reorder icon, start aligned items --*/} - - - Item 3 - - - - - Item 4 - - - {/*-- Custom reorder icon end items --*/} - - Item 5 - - - - - - - Item 6 - - - - - - {/*-- Items wrapped in a reorder, entire item can be dragged --*/} - - - Item 7 - - - - - - Item 8 - - - - -); -``` - -### Updating Data - -```tsx -const items = [1, 2, 3, 4, 5]; - -function doReorder(event: CustomEvent) { - // Before complete is called with the items they will remain in the - // order before the drag - console.log('Before complete', this.items); - - // Finish the reorder and position the item in the DOM based on - // where the gesture ended. Update the items variable to the - // new order of items - this.items = event.detail.complete(this.items); - - // After complete is called the items will be in the new order - console.log('After complete', this.items); -} -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'reorder-group-example', - styleUrl: 'reorder-group-example.css' -}) -export class ReorderGroupExample { - doReorder(ev: any) { - // The `from` and `to` properties contain the index of the item - // when the drag started and ended, respectively - console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to); - - // 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 - ev.detail.complete(); - } - - render() { - return [ - // The reorder gesture is disabled by default, enable it to drag and drop items - this.doReorder(ev)} disabled={false}> - {/* Default reorder icon, end aligned items */} - - - Item 1 - - - - - - - Item 2 - - - - - {/* Default reorder icon, start aligned items */} - - - - Item 3 - - - - - - - Item 4 - - - - {/* Custom reorder icon end items */} - - - Item 5 - - - - - - - - - Item 6 - - - - - - - {/* Items wrapped in a reorder, entire item can be dragged */} - - - - Item 7 - - - - - - - - Item 8 - - - - - ] - } -} -``` - -### Updating Data - -```tsx -import { Component, State, h } from '@stencil/core'; - -@Component({ - tag: 'reorder-group-example', - styleUrl: 'reorder-group-example.css' -}) -export class ReorderGroupExample { - @State() items = [1, 2, 3, 4, 5]; - - doReorder(ev: any) { - // Before complete is called with the items they will remain in the - // order before the drag - console.log('Before complete', this.items); - - // Finish the reorder and position the item in the DOM based on - // where the gesture ended. Update the items variable to the - // new order of items - this.items = ev.detail.complete(this.items); - - // After complete is called the items will be in the new order - console.log('After complete', this.items); - } - - render() { - return [ - // The reorder gesture is disabled by default, enable it to drag and drop items - this.doReorder(ev)} disabled={false}> - - {this.items.map(item => - - - Item { item } - - - - )} - - - ] - } -} -``` - - -### Vue - -```html - - - -``` - -### Updating Data - -```html - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | -------------------------------------- | --------- | ------- | -| `disabled` | `disabled` | If `true`, the reorder will be hidden. | `boolean` | `true` | - - -## Events - -| Event | Description | Type | -| ---------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | -| `ionItemReorder` | Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action. | `CustomEvent` | - - -## Methods - -### `complete(listOrReorder?: boolean | any[] | undefined) => Promise` - -Completes the reorder operation. Must be called by the `ionItemReorder` event. - -If a list of items is passed, the list will be reordered and returned in the -proper order. - -If no parameters are passed or if `true` is passed in, the reorder will complete -and the item will remain in the position it was dragged to. If `false` is passed, -the reorder will complete and the item will bounce back to its original position. - -#### Returns - -Type: `Promise` - - - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/reorder-group/usage/angular.md b/core/src/components/reorder-group/usage/angular.md deleted file mode 100644 index f5773e44fd..0000000000 --- a/core/src/components/reorder-group/usage/angular.md +++ /dev/null @@ -1,137 +0,0 @@ -```html - - - - - - Item 1 - - - - - - - Item 2 - - - - - - - - - Item 3 - - - - - - - Item 4 - - - - - - - Item 5 - - - - - - - - - Item 6 - - - - - - - - - - - Item 7 - - - - - - - - Item 8 - - - - -``` - -```javascript -import { Component, ViewChild } from '@angular/core'; -import { IonReorderGroup } from '@ionic/angular'; -import { ItemReorderEventDetail } from '@ionic/core'; - -@Component({ - selector: 'reorder-group-example', - templateUrl: 'reorder-group-example.html', - styleUrls: ['./reorder-group-example.css'] -}) -export class ReorderGroupExample { - @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup; - - constructor() {} - - doReorder(ev: CustomEvent) { - // The `from` and `to` properties contain the index of the item - // when the drag started and ended, respectively - console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to); - - // 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 - ev.detail.complete(); - } - - toggleReorderGroup() { - this.reorderGroup.disabled = !this.reorderGroup.disabled; - } -} -``` - -### Updating Data - -```javascript -import { Component, ViewChild } from '@angular/core'; -import { IonReorderGroup } from '@ionic/angular'; -import { ItemReorderEventDetail } from '@ionic/core'; - -@Component({ - selector: 'reorder-group-example', - templateUrl: 'reorder-group-example.html', - styleUrls: ['./reorder-group-example.css'] -}) -export class ReorderGroupExample { - items = [1, 2, 3, 4, 5]; - - @ViewChild(IonReorderGroup) reorderGroup: IonReorderGroup; - - constructor() {} - - doReorder(ev: CustomEvent) { - // Before complete is called with the items they will remain in the - // order before the drag - console.log('Before complete', this.items); - - // Finish the reorder and position the item in the DOM based on - // where the gesture ended. Update the items variable to the - // new order of items - this.items = ev.detail.complete(this.items); - - // After complete is called the items will be in the new order - console.log('After complete', this.items); - } -} -``` diff --git a/core/src/components/reorder-group/usage/javascript.md b/core/src/components/reorder-group/usage/javascript.md deleted file mode 100644 index 021df65310..0000000000 --- a/core/src/components/reorder-group/usage/javascript.md +++ /dev/null @@ -1,106 +0,0 @@ -```html - - - - - - Item 1 - - - - - - - Item 2 - - - - - - - - - Item 3 - - - - - - - Item 4 - - - - - - - Item 5 - - - - - - - - - Item 6 - - - - - - - - - - - Item 7 - - - - - - - - Item 8 - - - - -``` - -```javascript -const reorderGroup = document.querySelector('ion-reorder-group'); - -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); - - // 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(); -}); -``` - -### Updating Data - -```javascript -const items = [1, 2, 3, 4, 5]; -const reorderGroup = document.querySelector('ion-reorder-group'); - -reorderGroup.addEventListener('ionItemReorder', ({detail}) => { - // Before complete is called with the items they will remain in the - // order before the drag - console.log('Before complete', items); - - // Finish the reorder and position the item in the DOM based on - // where the gesture ended. Update the items variable to the - // new order of items - items = detail.complete(items); - - // After complete is called the items will be in the new order - console.log('After complete', items); -}); -``` diff --git a/core/src/components/reorder-group/usage/react.md b/core/src/components/reorder-group/usage/react.md deleted file mode 100644 index 8bfe6c2bbc..0000000000 --- a/core/src/components/reorder-group/usage/react.md +++ /dev/null @@ -1,94 +0,0 @@ -```tsx -import React from 'react'; -import { IonItem, IonLabel, IonReorder, IonReorderGroup, IonIcon, IonContent } from '@ionic/react'; -import { ItemReorderEventDetail } from '@ionic/core'; -import { pizza } from 'ionicons/icons'; - -function doReorder(event: CustomEvent) { - // The `from` and `to` properties contain the index of the item - // when the drag started and ended, respectively - console.log('Dragged from index', event.detail.from, 'to', event.detail.to); - - // 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 - event.detail.complete(); -} - -export const ReorderGroupExample: React.FC = () => ( - - {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/} - - {/*-- Default reorder icon, end aligned items --*/} - - Item 1 - - - - - Item 2 - - - - {/*-- Default reorder icon, start aligned items --*/} - - - Item 3 - - - - - Item 4 - - - {/*-- Custom reorder icon end items --*/} - - Item 5 - - - - - - - Item 6 - - - - - - {/*-- Items wrapped in a reorder, entire item can be dragged --*/} - - - Item 7 - - - - - - Item 8 - - - - -); -``` - -### Updating Data - -```tsx -const items = [1, 2, 3, 4, 5]; - -function doReorder(event: CustomEvent) { - // Before complete is called with the items they will remain in the - // order before the drag - console.log('Before complete', this.items); - - // Finish the reorder and position the item in the DOM based on - // where the gesture ended. Update the items variable to the - // new order of items - this.items = event.detail.complete(this.items); - - // After complete is called the items will be in the new order - console.log('After complete', this.items); -} -``` diff --git a/core/src/components/reorder-group/usage/stencil.md b/core/src/components/reorder-group/usage/stencil.md deleted file mode 100644 index cacc74f035..0000000000 --- a/core/src/components/reorder-group/usage/stencil.md +++ /dev/null @@ -1,139 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'reorder-group-example', - styleUrl: 'reorder-group-example.css' -}) -export class ReorderGroupExample { - doReorder(ev: any) { - // The `from` and `to` properties contain the index of the item - // when the drag started and ended, respectively - console.log('Dragged from index', ev.detail.from, 'to', ev.detail.to); - - // 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 - ev.detail.complete(); - } - - render() { - return [ - // The reorder gesture is disabled by default, enable it to drag and drop items - this.doReorder(ev)} disabled={false}> - {/* Default reorder icon, end aligned items */} - - - Item 1 - - - - - - - Item 2 - - - - - {/* Default reorder icon, start aligned items */} - - - - Item 3 - - - - - - - Item 4 - - - - {/* Custom reorder icon end items */} - - - Item 5 - - - - - - - - - Item 6 - - - - - - - {/* Items wrapped in a reorder, entire item can be dragged */} - - - - Item 7 - - - - - - - - Item 8 - - - - - ] - } -} -``` - -### Updating Data - -```tsx -import { Component, State, h } from '@stencil/core'; - -@Component({ - tag: 'reorder-group-example', - styleUrl: 'reorder-group-example.css' -}) -export class ReorderGroupExample { - @State() items = [1, 2, 3, 4, 5]; - - doReorder(ev: any) { - // Before complete is called with the items they will remain in the - // order before the drag - console.log('Before complete', this.items); - - // Finish the reorder and position the item in the DOM based on - // where the gesture ended. Update the items variable to the - // new order of items - this.items = ev.detail.complete(this.items); - - // After complete is called the items will be in the new order - console.log('After complete', this.items); - } - - render() { - return [ - // The reorder gesture is disabled by default, enable it to drag and drop items - this.doReorder(ev)} disabled={false}> - - {this.items.map(item => - - - Item { item } - - - - )} - - - ] - } -} -``` \ No newline at end of file diff --git a/core/src/components/reorder-group/usage/vue.md b/core/src/components/reorder-group/usage/vue.md deleted file mode 100644 index 7896b6d945..0000000000 --- a/core/src/components/reorder-group/usage/vue.md +++ /dev/null @@ -1,138 +0,0 @@ -```html - - - -``` - -### Updating Data - -```html - -``` diff --git a/core/src/components/reorder/readme.md b/core/src/components/reorder/readme.md deleted file mode 100644 index 1b77055ce7..0000000000 --- a/core/src/components/reorder/readme.md +++ /dev/null @@ -1,363 +0,0 @@ -# ion-reorder - -Reorder is a component that allows an item in a group of items to be dragged to change its order within that group. It must be used within an `ion-reorder-group` to provide a visual drag and drop interface. - -`ion-reorder` is the anchor used to drag and drop the items inside of the `ion-reorder-group`. See the [Reorder Group](../reorder-group) for more information on how to complete the reorder operation. - - - - - -## Usage - -### Angular / javascript - -```html - - - - - - Item 1 - - - - - - - Item 2 - - - - - - - - - Item 3 - - - - - - - Item 4 - - - - - - - Item 5 - - - - - - - - - Item 6 - - - - - - - - - - - Item 7 - - - - - - - - Item 8 - - - - -``` - - -### React - -```tsx -import React from 'react'; -import { IonIcon, IonItem, IonLabel, IonReorder, IonReorderGroup, IonContent } from '@ionic/react'; -import { pizza } from 'ionicons/icons'; - -export const ReorderExample: React.FC = () => ( - - {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/} - - {/*-- Default reorder icon, end aligned items --*/} - - Item 1 - - - - - Item 2 - - - - {/*-- Default reorder icon, start aligned items --*/} - - - Item 3 - - - - - Item 4 - - - {/*-- Custom reorder icon end items --*/} - - Item 5 - - - - - - - Item 6 - - - - - - {/*-- Items wrapped in a reorder, entire item can be dragged --*/} - - - Item 7 - - - - - - Item 8 - - - - -); -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'reorder-example', - styleUrl: 'reorder-example.css' -}) -export class ReorderExample { - render() { - return [ - // The reorder gesture is disabled by default, enable it to drag and drop items - - {/* Default reorder icon, end aligned items */} - - - Item 1 - - - - - - - Item 2 - - - - - {/* Default reorder icon, start aligned items */} - - - - Item 3 - - - - - - - Item 4 - - - - {/* Custom reorder icon end items */} - - - Item 5 - - - - - - - - - Item 6 - - - - - - - {/* Items wrapped in a reorder, entire item can be dragged */} - - - - Item 7 - - - - - - - - Item 8 - - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Shadow Parts - -| Part | Description | -| -------- | ----------------------------------------------- | -| `"icon"` | The icon of the reorder handle (uses ion-icon). | - - -## Dependencies - -### Depends on - -- ion-icon - -### Graph -```mermaid -graph TD; - ion-reorder --> ion-icon - style ion-reorder fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/reorder/usage/angular.md b/core/src/components/reorder/usage/angular.md deleted file mode 100644 index 3dac711521..0000000000 --- a/core/src/components/reorder/usage/angular.md +++ /dev/null @@ -1,71 +0,0 @@ - -```html - - - - - - Item 1 - - - - - - - Item 2 - - - - - - - - - Item 3 - - - - - - - Item 4 - - - - - - - Item 5 - - - - - - - - - Item 6 - - - - - - - - - - - Item 7 - - - - - - - - Item 8 - - - - -``` \ No newline at end of file diff --git a/core/src/components/reorder/usage/javascript.md b/core/src/components/reorder/usage/javascript.md deleted file mode 100644 index 3dac711521..0000000000 --- a/core/src/components/reorder/usage/javascript.md +++ /dev/null @@ -1,71 +0,0 @@ - -```html - - - - - - Item 1 - - - - - - - Item 2 - - - - - - - - - Item 3 - - - - - - - Item 4 - - - - - - - Item 5 - - - - - - - - - Item 6 - - - - - - - - - - - Item 7 - - - - - - - - Item 8 - - - - -``` \ No newline at end of file diff --git a/core/src/components/reorder/usage/react.md b/core/src/components/reorder/usage/react.md deleted file mode 100644 index 8da015872e..0000000000 --- a/core/src/components/reorder/usage/react.md +++ /dev/null @@ -1,62 +0,0 @@ -```tsx -import React from 'react'; -import { IonIcon, IonItem, IonLabel, IonReorder, IonReorderGroup, IonContent } from '@ionic/react'; -import { pizza } from 'ionicons/icons'; - -export const ReorderExample: React.FC = () => ( - - {/*-- The reorder gesture is disabled by default, enable it to drag and drop items --*/} - - {/*-- Default reorder icon, end aligned items --*/} - - Item 1 - - - - - Item 2 - - - - {/*-- Default reorder icon, start aligned items --*/} - - - Item 3 - - - - - Item 4 - - - {/*-- Custom reorder icon end items --*/} - - Item 5 - - - - - - - Item 6 - - - - - - {/*-- Items wrapped in a reorder, entire item can be dragged --*/} - - - Item 7 - - - - - - Item 8 - - - - -); -``` diff --git a/core/src/components/reorder/usage/stencil.md b/core/src/components/reorder/usage/stencil.md deleted file mode 100644 index 508c303687..0000000000 --- a/core/src/components/reorder/usage/stencil.md +++ /dev/null @@ -1,82 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'reorder-example', - styleUrl: 'reorder-example.css' -}) -export class ReorderExample { - render() { - return [ - // The reorder gesture is disabled by default, enable it to drag and drop items - - {/* Default reorder icon, end aligned items */} - - - Item 1 - - - - - - - Item 2 - - - - - {/* Default reorder icon, start aligned items */} - - - - Item 3 - - - - - - - Item 4 - - - - {/* Custom reorder icon end items */} - - - Item 5 - - - - - - - - - Item 6 - - - - - - - {/* Items wrapped in a reorder, entire item can be dragged */} - - - - Item 7 - - - - - - - - Item 8 - - - - - ]; - } -} -``` diff --git a/core/src/components/reorder/usage/vue.md b/core/src/components/reorder/usage/vue.md deleted file mode 100644 index f34a2a47f8..0000000000 --- a/core/src/components/reorder/usage/vue.md +++ /dev/null @@ -1,97 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md deleted file mode 100644 index 609a894c2a..0000000000 --- a/core/src/components/ripple-effect/readme.md +++ /dev/null @@ -1,247 +0,0 @@ -# ion-ripple-effect - -The ripple effect component adds the [Material Design ink ripple interaction effect](https://material.io/develop/web/supporting/ripple). This component can only be used inside of an `` and can be added to any component. - -It's important to note that the parent should have [relative positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position) because the ripple effect is absolutely positioned and will cover the closest parent with relative positioning. The parent element should also be given the `ion-activatable` class, which tells the ripple effect that the element is clickable. - -The default type, `"bounded"`, will expand the ripple effect from the click position outwards. To add a ripple effect that always starts in the center of the element and expands in a circle, add an `"unbounded"` type. It's recommended to add `overflow: hidden` to the parent element to avoid the ripple overflowing its container, especially with an unbounded ripple. - - - - -## Usage - -### Angular / javascript - -```html - - -
- A plain div with a bounded ripple effect - -
- - - -
- A plain div with an unbounded ripple effect - -
- - - - -``` - -```css -.ripple-parent { - position: relative; - overflow: hidden; -} -``` - - -### React - -```tsx -import React from 'react'; -import { IonApp, IonContent, IonRippleEffect } from '@ionic/react'; -import './RippleEffectExample.css'; - -export const RippleExample: React.FC = () => ( - - -
- A plain div with a bounded ripple effect - -
- - - -
- A plain div with an unbounded ripple effect - -
- - - - -); -``` - -```css -.ripple-parent { - position: relative; - overflow: hidden; -} -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'ripple-effect-example', - styleUrl: 'ripple-effect-example.css' -}) -export class RippleEffectExample { - render() { - return [ - - -
- A plain div with a bounded ripple effect - -
- - - -
- A plain div with an unbounded ripple effect - -
- - - - - ]; - } -} -``` - -```css -.ripple-parent { - position: relative; - overflow: hidden; -} -``` - - -### Vue - -```html - - - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| -------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- | ----------- | -| `type` | `type` | Sets the type of ripple-effect: - `bounded`: the ripple effect expands from the user's click position - `unbounded`: the ripple effect expands from the center of the button and overflows the container. NOTE: Surfaces for bounded ripples should have the overflow property set to hidden, while surfaces for unbounded ripples should have it set to visible. | `"bounded" \| "unbounded"` | `'bounded'` | - - -## Methods - -### `addRipple(x: number, y: number) => Promise<() => void>` - -Adds the ripple effect to the parent element. - -#### Returns - -Type: `Promise<() => void>` - - - - -## Dependencies - -### Used by - - - [ion-action-sheet](../action-sheet) - - [ion-alert](../alert) - - [ion-back-button](../back-button) - - [ion-button](../button) - - [ion-card](../card) - - [ion-chip](../chip) - - [ion-fab-button](../fab-button) - - [ion-item](../item) - - [ion-item-option](../item-option) - - [ion-menu-button](../menu-button) - - [ion-segment-button](../segment-button) - - [ion-tab-button](../tab-button) - - [ion-toast](../toast) - -### Graph -```mermaid -graph TD; - ion-action-sheet --> ion-ripple-effect - ion-alert --> ion-ripple-effect - ion-back-button --> ion-ripple-effect - ion-button --> ion-ripple-effect - ion-card --> ion-ripple-effect - ion-chip --> ion-ripple-effect - ion-fab-button --> ion-ripple-effect - ion-item --> ion-ripple-effect - ion-item-option --> ion-ripple-effect - ion-menu-button --> ion-ripple-effect - ion-segment-button --> ion-ripple-effect - ion-tab-button --> ion-ripple-effect - ion-toast --> ion-ripple-effect - style ion-ripple-effect fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/ripple-effect/usage/angular.md b/core/src/components/ripple-effect/usage/angular.md deleted file mode 100644 index 763f1518b0..0000000000 --- a/core/src/components/ripple-effect/usage/angular.md +++ /dev/null @@ -1,32 +0,0 @@ -```html - - -
- A plain div with a bounded ripple effect - -
- - - -
- A plain div with an unbounded ripple effect - -
- - - - -``` - -```css -.ripple-parent { - position: relative; - overflow: hidden; -} -``` \ No newline at end of file diff --git a/core/src/components/ripple-effect/usage/javascript.md b/core/src/components/ripple-effect/usage/javascript.md deleted file mode 100644 index 763f1518b0..0000000000 --- a/core/src/components/ripple-effect/usage/javascript.md +++ /dev/null @@ -1,32 +0,0 @@ -```html - - -
- A plain div with a bounded ripple effect - -
- - - -
- A plain div with an unbounded ripple effect - -
- - - - -``` - -```css -.ripple-parent { - position: relative; - overflow: hidden; -} -``` \ No newline at end of file diff --git a/core/src/components/ripple-effect/usage/react.md b/core/src/components/ripple-effect/usage/react.md deleted file mode 100644 index 6601adb6a2..0000000000 --- a/core/src/components/ripple-effect/usage/react.md +++ /dev/null @@ -1,38 +0,0 @@ -```tsx -import React from 'react'; -import { IonApp, IonContent, IonRippleEffect } from '@ionic/react'; -import './RippleEffectExample.css'; - -export const RippleExample: React.FC = () => ( - - -
- A plain div with a bounded ripple effect - -
- - - -
- A plain div with an unbounded ripple effect - -
- - - - -); -``` - -```css -.ripple-parent { - position: relative; - overflow: hidden; -} -``` \ No newline at end of file diff --git a/core/src/components/ripple-effect/usage/stencil.md b/core/src/components/ripple-effect/usage/stencil.md deleted file mode 100644 index 65586a2428..0000000000 --- a/core/src/components/ripple-effect/usage/stencil.md +++ /dev/null @@ -1,44 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'ripple-effect-example', - styleUrl: 'ripple-effect-example.css' -}) -export class RippleEffectExample { - render() { - return [ - - -
- A plain div with a bounded ripple effect - -
- - - -
- A plain div with an unbounded ripple effect - -
- - - - - ]; - } -} -``` - -```css -.ripple-parent { - position: relative; - overflow: hidden; -} -``` \ No newline at end of file diff --git a/core/src/components/ripple-effect/usage/vue.md b/core/src/components/ripple-effect/usage/vue.md deleted file mode 100644 index e4ead93e77..0000000000 --- a/core/src/components/ripple-effect/usage/vue.md +++ /dev/null @@ -1,43 +0,0 @@ -```html - - - - - -``` \ No newline at end of file diff --git a/core/src/components/route-redirect/readme.md b/core/src/components/route-redirect/readme.md deleted file mode 100644 index 26ad38bbc7..0000000000 --- a/core/src/components/route-redirect/readme.md +++ /dev/null @@ -1,100 +0,0 @@ -# ion-route-redirect - -A route redirect can only be used with an `ion-router` as a direct child of it. - -> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](../router-outlet) and the Angular router. - -The route redirect has two configurable properties: - - `from` - - `to` - -It redirects "from" a URL "to" another URL. When the defined `ion-route-redirect` rule matches, the router will redirect from the path specified in the `from` property to the path in the `to` property. In order for a redirect to occur the `from` path needs to be an exact match to the navigated URL. - - -## Multiple Route Redirects - -An arbitrary number of redirect routes can be defined inside an `ion-router`, but only one can match. - -A route redirect will never call another redirect after its own redirect, since this could lead to infinite loops. - -Take the following two redirects: - -```html - - - - -``` - -If the user navigates to `/admin` the router will redirect to `/login` and stop there. It will never evaluate more than one redirect. - - - - - -## Usage - -### Javascript - -```html - - - - - -``` - -### Route Redirects as Guards - -Redirection routes can work as guards to prevent users from navigating to certain areas of an application based on a given condition, such as if the user is authenticated or not. - -A route redirect can be added and removed dynamically to redirect (or guard) some routes from being accessed. In the following example, all urls `*` will be redirected to the `/login` url if `isLoggedIn` is `false`. - -```tsx -const isLoggedIn = false; - -const router = document.querySelector('ion-router'); -const routeRedirect = document.createElement('ion-route-redirect'); -routeRedirect.setAttribute('from', '*'); -routeRedirect.setAttribute('to', '/login'); - -if (!isLoggedIn) { - router.appendChild(routeRedirect); -} -``` - -Alternatively, the value of `to` can be modified based on a condition. In the following example, the route redirect will check if the user is logged in and redirect to the `/login` url if not. - -```html - -``` - -```javascript -const isLoggedIn = false; -const routeRedirect = document.querySelector('#tutorialRedirect'); - -routeRedirect.setAttribute('to', isLoggedIn ? undefined : '/login'); -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------- | ----------- | -| `from` _(required)_ | `from` | A redirect route, redirects "from" a URL "to" another URL. This property is that "from" URL. It needs to be an exact match of the navigated URL in order to apply. The path specified in this value is always an absolute path, even if the initial `/` slash is not specified. | `string` | `undefined` | -| `to` _(required)_ | `to` | A redirect route, redirects "from" a URL "to" another URL. This property is that "to" URL. When the defined `ion-route-redirect` rule matches, the router will redirect to the path specified in this property. The value of this property is always an absolute path inside the scope of routes defined in `ion-router` it can't be used with another router or to perform a redirection to a different domain. Note that this is a virtual redirect, it will not cause a real browser refresh, again, it's a redirect inside the context of ion-router. When this property is not specified or his value is `undefined` the whole redirect route is noop, even if the "from" value matches. | `null \| string \| undefined` | `undefined` | - - -## Events - -| Event | Description | Type | -| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -| `ionRouteRedirectChanged` | Internal event that fires when any value of this rule is added/removed from the DOM, or any of his public properties changes. `ion-router` captures this event in order to update his internal registry of router rules. | `CustomEvent` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/route-redirect/usage/javascript.md b/core/src/components/route-redirect/usage/javascript.md deleted file mode 100644 index ed82e5a385..0000000000 --- a/core/src/components/route-redirect/usage/javascript.md +++ /dev/null @@ -1,41 +0,0 @@ -```html - - - - - -``` - -### Route Redirects as Guards - -Redirection routes can work as guards to prevent users from navigating to certain areas of an application based on a given condition, such as if the user is authenticated or not. - -A route redirect can be added and removed dynamically to redirect (or guard) some routes from being accessed. In the following example, all urls `*` will be redirected to the `/login` url if `isLoggedIn` is `false`. - -```tsx -const isLoggedIn = false; - -const router = document.querySelector('ion-router'); -const routeRedirect = document.createElement('ion-route-redirect'); -routeRedirect.setAttribute('from', '*'); -routeRedirect.setAttribute('to', '/login'); - -if (!isLoggedIn) { - router.appendChild(routeRedirect); -} -``` - -Alternatively, the value of `to` can be modified based on a condition. In the following example, the route redirect will check if the user is logged in and redirect to the `/login` url if not. - -```html - -``` - -```javascript -const isLoggedIn = false; -const routeRedirect = document.querySelector('#tutorialRedirect'); - -routeRedirect.setAttribute('to', isLoggedIn ? undefined : '/login'); -``` \ No newline at end of file diff --git a/core/src/components/route/readme.md b/core/src/components/route/readme.md deleted file mode 100644 index 2ea61d05ac..0000000000 --- a/core/src/components/route/readme.md +++ /dev/null @@ -1,242 +0,0 @@ -# ion-route - -The route component takes a component and renders it when the Browser URL matches the url property. - -> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](../router-outlet) and the Angular router. - -## Navigation Hooks - -Navigation hooks can be used to perform tasks or act as navigation guards. Hooks are used by providing functions to the `beforeEnter` and `beforeLeave` properties on each `ion-route`. Returning `true` allows navigation to proceed, while returning `false` causes it to be cancelled. Returning an object of type `NavigationHookOptions` allows you to redirect navigation to another page. - -## Interfaces - -```typescript -interface NavigationHookOptions { - /** - * A valid path to redirect navigation to. - */ - redirect: string; -} -``` - - - - - -## Usage - -### Javascript - -```html - - - - - - -``` - -```javascript -const dashboardPage = document.querySelector('ion-route[url="/dashboard"]'); -dashboardPage.beforeEnter = isLoggedInGuard; - -const newMessagePage = document.querySelector('ion-route[url="/dashboard"]'); -newMessagePage.beforeLeave = hasUnsavedDataGuard; - -const isLoggedInGuard = async () => { - const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation - - if (isLoggedIn) { - return true; - } else { - return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page - } -} - -const hasUnsavedDataGuard = async () => { - const hasUnsavedData = await checkData(); // Replace this with actual validation - - if (hasUnsavedData) { - return await confirmDiscardChanges(); - } else { - return true; - } -} - -const confirmDiscardChanges = async () => { - const alert = document.createElement('ion-alert'); - alert.header = 'Discard Unsaved Changes?'; - alert.message = 'Are you sure you want to leave? Any unsaved changed will be lost.'; - alert.buttons = [ - { - text: 'Cancel', - role: 'Cancel', - }, - { - text: 'Discard', - role: 'destructive', - } - ]; - - document.body.appendChild(alert); - - await alert.present(); - - const { role } = await alert.onDidDismiss(); - - return (role === 'Cancel') ? false : true; -} -``` - - -### Stencil - -```typescript -import { Component, h } from '@stencil/core'; -import { alertController } from '@ionic/core'; - -@Component({ - tag: 'router-example', - styleUrl: 'router-example.css' -}) -export class RouterExample { - render() { - return ( - - - - - - - ) - } -} - -const isLoggedInGuard = async () => { - const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation - - if (isLoggedIn) { - return true; - } else { - return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page - } -} - -const hasUnsavedDataGuard = async () => { - const hasUnsavedData = await checkData(); // Replace this with actual validation - - if (hasUnsavedData) { - return await confirmDiscardChanges(); - } else { - return true; - } -} - -const confirmDiscardChanges = async () => { - const alert = await alertController.create({ - header: 'Discard Unsaved Changes?', - message: 'Are you sure you want to leave? Any unsaved changed will be lost.', - buttons: [ - { - text: 'Cancel', - role: 'Cancel', - }, - { - text: 'Discard', - role: 'destructive', - } - ] - }); - - await alert.present(); - - const { role } = await alert.onDidDismiss(); - - return (role === 'Cancel') ? false : true; -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----------- | -| `beforeEnter` | -- | A navigation hook that is fired when the route tries to enter. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified. | `(() => NavigationHookResult \| Promise) \| undefined` | `undefined` | -| `beforeLeave` | -- | A navigation hook that is fired when the route tries to leave. Returning `true` allows the navigation to proceed, while returning `false` causes it to be cancelled. Returning a `NavigationHookOptions` object causes the router to redirect to the path specified. | `(() => NavigationHookResult \| Promise) \| undefined` | `undefined` | -| `component` _(required)_ | `component` | Name of the component to load/select in the navigation outlet (`ion-tabs`, `ion-nav`) when the route matches. The value of this property is not always the tagname of the component to load, in `ion-tabs` it actually refers to the name of the `ion-tab` to select. | `string` | `undefined` | -| `componentProps` | -- | A key value `{ 'red': true, 'blue': 'white'}` containing props that should be passed to the defined component when rendered. | `undefined \| { [key: string]: any; }` | `undefined` | -| `url` | `url` | Relative path that needs to match in order for this route to apply. Accepts paths similar to expressjs so that you can define parameters in the url /foo/:bar where bar would be available in incoming props. | `string` | `''` | - - -## Events - -| Event | Description | Type | -| --------------------- | ------------------------------------------------------------------- | ------------------ | -| `ionRouteDataChanged` | Used internally by `ion-router` to know when this route did change. | `CustomEvent` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/route/usage/javascript.md b/core/src/components/route/usage/javascript.md deleted file mode 100644 index b5283442a9..0000000000 --- a/core/src/components/route/usage/javascript.md +++ /dev/null @@ -1,60 +0,0 @@ -```html - - - - - - -``` - -```javascript -const dashboardPage = document.querySelector('ion-route[url="/dashboard"]'); -dashboardPage.beforeEnter = isLoggedInGuard; - -const newMessagePage = document.querySelector('ion-route[url="/dashboard"]'); -newMessagePage.beforeLeave = hasUnsavedDataGuard; - -const isLoggedInGuard = async () => { - const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation - - if (isLoggedIn) { - return true; - } else { - return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page - } -} - -const hasUnsavedDataGuard = async () => { - const hasUnsavedData = await checkData(); // Replace this with actual validation - - if (hasUnsavedData) { - return await confirmDiscardChanges(); - } else { - return true; - } -} - -const confirmDiscardChanges = async () => { - const alert = document.createElement('ion-alert'); - alert.header = 'Discard Unsaved Changes?'; - alert.message = 'Are you sure you want to leave? Any unsaved changed will be lost.'; - alert.buttons = [ - { - text: 'Cancel', - role: 'Cancel', - }, - { - text: 'Discard', - role: 'destructive', - } - ]; - - document.body.appendChild(alert); - - await alert.present(); - - const { role } = await alert.onDidDismiss(); - - return (role === 'Cancel') ? false : true; -} -``` diff --git a/core/src/components/route/usage/stencil.md b/core/src/components/route/usage/stencil.md deleted file mode 100644 index 28fac38c6c..0000000000 --- a/core/src/components/route/usage/stencil.md +++ /dev/null @@ -1,64 +0,0 @@ -```typescript -import { Component, h } from '@stencil/core'; -import { alertController } from '@ionic/core'; - -@Component({ - tag: 'router-example', - styleUrl: 'router-example.css' -}) -export class RouterExample { - render() { - return ( - - - - - - - ) - } -} - -const isLoggedInGuard = async () => { - const isLoggedIn = await UserData.isLoggedIn(); // Replace this with actual login validation - - if (isLoggedIn) { - return true; - } else { - return { redirect: '/login' }; // If a user is not logged in, they will be redirected to the /login page - } -} - -const hasUnsavedDataGuard = async () => { - const hasUnsavedData = await checkData(); // Replace this with actual validation - - if (hasUnsavedData) { - return await confirmDiscardChanges(); - } else { - return true; - } -} - -const confirmDiscardChanges = async () => { - const alert = await alertController.create({ - header: 'Discard Unsaved Changes?', - message: 'Are you sure you want to leave? Any unsaved changed will be lost.', - buttons: [ - { - text: 'Cancel', - role: 'Cancel', - }, - { - text: 'Discard', - role: 'destructive', - } - ] - }); - - await alert.present(); - - const { role } = await alert.onDidDismiss(); - - return (role === 'Cancel') ? false : true; -} -``` diff --git a/core/src/components/route/usage/vue.md b/core/src/components/route/usage/vue.md deleted file mode 100644 index a0f810dcb8..0000000000 --- a/core/src/components/route/usage/vue.md +++ /dev/null @@ -1,57 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/router-link/readme.md b/core/src/components/router-link/readme.md deleted file mode 100644 index 6aca4e26fd..0000000000 --- a/core/src/components/router-link/readme.md +++ /dev/null @@ -1,32 +0,0 @@ -# ion-router-link - -The router link component is used for navigating to a specified link. Similar to the browser's anchor tag, it can accept a href for the location, and a direction for the transition animation. - -> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an `` and `routerLink` with the Angular router. - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` | -| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` | -| `routerAnimation` | -- | When using a router, it specifies the transition animation when navigating to another page using `href`. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` | -| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` | - - -## CSS Custom Properties - -| Name | Description | -| -------------- | ----------------------------- | -| `--background` | Background of the router link | -| `--color` | Text color of the router link | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/router-outlet/readme.md b/core/src/components/router-outlet/readme.md deleted file mode 100644 index f31a641c75..0000000000 --- a/core/src/components/router-outlet/readme.md +++ /dev/null @@ -1,39 +0,0 @@ -# ion-router-outlet - -The router outlet behaves in a similar way to Angular's built-in router outlet component and Vue's router view component, but contains the logic for providing a stacked navigation, and animating views in and out. - -Although router outlet has methods for navigating around, it's recommended to use the navigation methods in your framework's router. - -## Life Cycle Hooks - -Routes rendered in a Router Outlet have access to specific Ionic events that are wired up to animations - - -| Event Name | Trigger | -|--------------------|--------------------------------------------------------------------| -| `ionViewWillEnter` | Fired when the component routing to is about to animate into view. | -| `ionViewDidEnter` | Fired when the component routing to has finished animating. | -| `ionViewWillLeave` | Fired when the component routing from is about to animate. | -| `ionViewDidLeave` | Fired when the component routing to has finished animating. | - - -These event tie into Ionic's animation system and can be used to coordinate parts of your app when a Components is done with its animation. These events are not a replacement for your framework's own event system, but an addition. - -For handling Router Guards, the older `ionViewCanEnter` and `ionViewCanLeave` have been replaced with their framework specific equivalent. For Angular, there are [Router Guards](https://angular.io/guide/router#milestone-5-route-guards). - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------- | ---------- | -------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------------ | -| `animated` | `animated` | If `true`, the router-outlet should animate the transition of components. | `boolean` | `true` | -| `animation` | -- | This property allows to create custom transition using AnimateBuilder functions. | `((baseEl: any, opts?: any) => Animation) \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `getIonMode(this)` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/router/readme.md b/core/src/components/router/readme.md deleted file mode 100644 index a3a8d997b8..0000000000 --- a/core/src/components/router/readme.md +++ /dev/null @@ -1,116 +0,0 @@ -# ion-router - -The router is a component for handling routing inside vanilla and Stencil JavaScript projects. - -> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](../router-outlet) and the Angular router. - -Apps should have a single `ion-router` component in the codebase. -This component controls all interactions with the browser history and it aggregates updates through an event system. - -`ion-router` is just a URL coordinator for the navigation outlets of ionic: `ion-nav`, `ion-tabs`, and `ion-router-outlet`. - -That means the `ion-router` never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells `ion-nav`, `ion-tabs`, and `ion-router-outlet` what and when to "show" based on the browser's URL. - -In order to configure this relationship between components (to load/select) and URLs, `ion-router` uses a declarative syntax using JSX/HTML to define a tree of routes. - -## Interfaces - -### RouterEventDetail - -```typescript -interface RouterEventDetail { - from: string | null; - redirectedFrom: string | null; - to: string; -} -``` - -### RouterCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface RouterCustomEvent extends CustomEvent { - detail: RouterEventDetail; - target: HTMLIonRouterElement; -} -``` - - - - -## Usage - -### Javascript - -```html - - - - - - - - - - - - - - - - - - - - - - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| --------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- | -| `root` | `root` | The root path to use when matching URLs. By default, this is set to "/", but you can specify an alternate prefix for all URL paths. | `string` | `'/'` | -| `useHash` | `use-hash` | The router can work in two "modes": - With hash: `/index.html#/path/to/page` - Without hash: `/path/to/page` Using one or another might depend in the requirements of your app and/or where it's deployed. Usually "hash-less" navigation works better for SEO and it's more user friendly too, but it might requires additional server-side configuration in order to properly work. On the other side hash-navigation is much easier to deploy, it even works over the file protocol. By default, this property is `true`, change to `false` to allow hash-less URLs. | `boolean` | `true` | - - -## Events - -| Event | Description | Type | -| -------------------- | ----------------------------------------------- | -------------------------------- | -| `ionRouteDidChange` | Emitted when the route had changed | `CustomEvent` | -| `ionRouteWillChange` | Event emitted when the route is about to change | `CustomEvent` | - - -## Methods - -### `back() => Promise` - -Go back to previous page in the window.history. - -#### Returns - -Type: `Promise` - - - -### `push(path: string, direction?: RouterDirection, animation?: AnimationBuilder | undefined) => Promise` - -Navigate to the specified path. - -#### Returns - -Type: `Promise` - - - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/router/usage/javascript.md b/core/src/components/router/usage/javascript.md deleted file mode 100644 index 857de4c164..0000000000 --- a/core/src/components/router/usage/javascript.md +++ /dev/null @@ -1,26 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - - - - - -``` diff --git a/core/src/components/row/readme.md b/core/src/components/row/readme.md deleted file mode 100644 index fe882444f8..0000000000 --- a/core/src/components/row/readme.md +++ /dev/null @@ -1,19 +0,0 @@ -# ion-row - -Rows are horizontal components of the [grid](../grid) system and contain varying numbers of -[columns](../col). They ensure the columns are positioned properly. - -See [Grid Layout](/docs/layout/grid) for more information. - - -## Row Alignment - -By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/docs/layout/css-utilities#flex-container-properties) that can be applied to a row to customize this behavior. - - - - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md deleted file mode 100644 index 9192a4300f..0000000000 --- a/core/src/components/searchbar/readme.md +++ /dev/null @@ -1,425 +0,0 @@ -# ion-searchbar - -Searchbars represent a text field that can be used to search through a collection. They can be displayed inside of a toolbar or the main content. - -A Searchbar should be used instead of an input to search lists. A clear button is displayed upon entering input in the searchbar's text field. Clicking on the clear button will erase the text field and the input will remain focused. A cancel button can be enabled which will clear the input and lose the focus upon click. - -## Keyboard Display - -### Android - -By default, tapping the input will cause the keyboard to appear with a magnifying glass icon on the submit button. You can optionally set the `inputmode` property to `"search"`, which will change the icon from a magnifying glass to a carriage return. - -### iOS - -By default, tapping the input will cause the keyboard to appear with the text "return" on a gray submit button. You can optionally set the `inputmode` property to `"search"`, which will change the text from "return" to "go", and change the button color from gray to blue. Alternatively, you can wrap the `ion-searchbar` in a `form` element with an `action` property. This will cause the keyboard to appear with a blue submit button that says "search". - -## Interfaces - -### SearchbarChangeEventDetail - -```typescript -interface SearchbarChangeEventDetail { - value?: string; -} -``` - -### SearchbarCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface SearchbarCustomEvent extends CustomEvent { - detail: SearchbarChangeEventDetail; - target: HTMLIonSearchbarElement; -} -``` - - - - -## Usage - -### Angular - -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - - -### Javascript - -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - - -### React - -```tsx -import React, { useState } from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSearchbar, IonFooter } from '@ionic/react'; - -export const SearchBarExamples: React.FC = () => { - const [searchText, setSearchText] = useState(''); - return ( - - - - IonSearchBar Examples - - - -

Default Searchbar

- setSearchText(e.detail.value!)}> - -

Searchbar with cancel button always shown

- setSearchText(e.detail.value!)} showCancelButton="always"> - -

Searchbar with cancel button never shown

- setSearchText(e.detail.value!)} showCancelButton="never"> - -

Searchbar with cancel button shown on focus

- setSearchText(e.detail.value!)} showCancelButton="focus"> - -

Searchbar with danger color

- setSearchText(e.detail.value!)} color="danger"> - -

Searchbar with telephone type

- setSearchText(e.detail.value!)} type="tel"> - -

Searchbar with numeric inputmode

- setSearchText(e.detail.value!)} inputmode="numeric"> - -

Searchbar disabled

- setSearchText(e.detail.value!)} disabled={true}> - -

Searchbar with a cancel button and custom cancel button text

- setSearchText(e.detail.value!)} showCancelButton="focus" cancelButtonText="Custom Cancel"> - -

Searchbar with a custom debounce - Note: debounce only works on onIonChange event

- setSearchText(e.detail.value!)} debounce={1000}> - -

Animated Searchbar

- setSearchText(e.detail.value!)} animated> - -

Searchbar with a placeholder

- setSearchText(e.detail.value!)} placeholder="Filter Schedules"> - -

Searchbar in a Toolbar

- - setSearchText(e.detail.value!)}> - - - - - - Search Text: {searchText ?? '(none)'} - - - - ); -}; -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'searchbar-example', - styleUrl: 'searchbar-example.css' -}) -export class SearchbarExample { - render() { - return [ - // Default Searchbar - , - - // Searchbar with cancel button always shown - , - - // Searchbar with cancel button never shown - , - - // Searchbar with cancel button shown on focus - , - - // Searchbar with danger color - , - - // Searchbar with value - , - - // Searchbar with telephone type - , - - // Searchbar with numeric inputmode - , - - // Searchbar disabled - , - - // Searchbar with a cancel button and custom cancel button text - , - - // Searchbar with a custom debounce - , - - // Animated Searchbar - , - - // Searchbar with a placeholder - , - - // Searchbar in a Toolbar - - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ------------------ | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | -| `animated` | `animated` | If `true`, enable searchbar animation. | `boolean` | `false` | -| `autocomplete` | `autocomplete` | Set the input's autocomplete property. | `"off" \| "on" \| "name" \| "honorific-prefix" \| "given-name" \| "additional-name" \| "family-name" \| "honorific-suffix" \| "nickname" \| "email" \| "username" \| "new-password" \| "current-password" \| "one-time-code" \| "organization-title" \| "organization" \| "street-address" \| "address-line1" \| "address-line2" \| "address-line3" \| "address-level4" \| "address-level3" \| "address-level2" \| "address-level1" \| "country" \| "country-name" \| "postal-code" \| "cc-name" \| "cc-given-name" \| "cc-additional-name" \| "cc-family-name" \| "cc-number" \| "cc-exp" \| "cc-exp-month" \| "cc-exp-year" \| "cc-csc" \| "cc-type" \| "transaction-currency" \| "transaction-amount" \| "language" \| "bday" \| "bday-day" \| "bday-month" \| "bday-year" \| "sex" \| "tel" \| "tel-country-code" \| "tel-national" \| "tel-area-code" \| "tel-local" \| "tel-extension" \| "impp" \| "url" \| "photo"` | `'off'` | -| `autocorrect` | `autocorrect` | Set the input's autocorrect property. | `"off" \| "on"` | `'off'` | -| `cancelButtonIcon` | `cancel-button-icon` | Set the cancel button icon. Only applies to `md` mode. Defaults to `arrow-back-sharp`. | `string` | `config.get('backButtonIcon', arrowBackSharp) as string` | -| `cancelButtonText` | `cancel-button-text` | Set the the cancel button text. Only applies to `ios` mode. | `string` | `'Cancel'` | -| `clearIcon` | `clear-icon` | Set the clear icon. Defaults to `close-circle` for `ios` and `close-sharp` for `md`. | `string \| undefined` | `undefined` | -| `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). | `string \| undefined` | `undefined` | -| `debounce` | `debounce` | Set the amount of time, in milliseconds, to wait to trigger the `ionChange` event after each keystroke. This also impacts form bindings such as `ngModel` or `v-model`. | `number` | `250` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the input. | `boolean` | `false` | -| `enterkeyhint` | `enterkeyhint` | A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`. | `"done" \| "enter" \| "go" \| "next" \| "previous" \| "search" \| "send" \| undefined` | `undefined` | -| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`. | `"decimal" \| "email" \| "none" \| "numeric" \| "search" \| "tel" \| "text" \| "url" \| undefined` | `undefined` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `placeholder` | `placeholder` | Set the input's placeholder. `placeholder` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `` would become `<Ionic>` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string` | `'Search'` | -| `searchIcon` | `search-icon` | The icon to use as the search icon. Defaults to `search-outline` in `ios` mode and `search-sharp` in `md` mode. | `string \| undefined` | `undefined` | -| `showCancelButton` | `show-cancel-button` | Sets the behavior for the cancel button. Defaults to `"never"`. Setting to `"focus"` shows the cancel button on focus. Setting to `"never"` hides the cancel button. Setting to `"always"` shows the cancel button regardless of focus state. | `"always" \| "focus" \| "never"` | `'never'` | -| `showClearButton` | `show-clear-button` | Sets the behavior for the clear button. Defaults to `"focus"`. Setting to `"focus"` shows the clear button on focus if the input is not empty. Setting to `"never"` hides the clear button. Setting to `"always"` shows the clear button regardless of focus state, but only if the input is not empty. | `"always" \| "focus" \| "never"` | `'always'` | -| `spellcheck` | `spellcheck` | If `true`, enable spellcheck on the input. | `boolean` | `false` | -| `type` | `type` | Set the type of the input. | `"email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "url"` | `'search'` | -| `value` | `value` | the value of the searchbar. | `null \| string \| undefined` | `''` | - - -## Events - -| Event | Description | Type | -| ----------- | ----------------------------------------------- | ----------------------------------------- | -| `ionBlur` | Emitted when the input loses focus. | `CustomEvent` | -| `ionCancel` | Emitted when the cancel button is clicked. | `CustomEvent` | -| `ionChange` | Emitted when the value has changed. | `CustomEvent` | -| `ionClear` | Emitted when the clear input button is clicked. | `CustomEvent` | -| `ionFocus` | Emitted when the input has focus. | `CustomEvent` | -| `ionInput` | Emitted when a keyboard input occurred. | `CustomEvent` | - - -## Methods - -### `getInputElement() => Promise` - -Returns the native `` element used under the hood. - -#### Returns - -Type: `Promise` - - - -### `setFocus() => Promise` - -Sets focus on the specified `ion-searchbar`. Use this method instead of the global -`input.focus()`. - -#### Returns - -Type: `Promise` - - - - -## CSS Custom Properties - -| Name | Description | -| --------------------------- | ---------------------------------------- | -| `--background` | Background of the searchbar input | -| `--border-radius` | Border radius of the searchbar input | -| `--box-shadow` | Box shadow of the searchbar input | -| `--cancel-button-color` | Color of the searchbar cancel button | -| `--clear-button-color` | Color of the searchbar clear button | -| `--color` | Color of the searchbar text | -| `--icon-color` | Color of the searchbar icon | -| `--placeholder-color` | Color of the searchbar placeholder | -| `--placeholder-font-style` | Font style of the searchbar placeholder | -| `--placeholder-font-weight` | Font weight of the searchbar placeholder | -| `--placeholder-opacity` | Opacity of the searchbar placeholder | - - -## Dependencies - -### Depends on - -- ion-icon - -### Graph -```mermaid -graph TD; - ion-searchbar --> ion-icon - style ion-searchbar fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/searchbar/usage/angular.md b/core/src/components/searchbar/usage/angular.md deleted file mode 100644 index 274cdc4d4f..0000000000 --- a/core/src/components/searchbar/usage/angular.md +++ /dev/null @@ -1,45 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` \ No newline at end of file diff --git a/core/src/components/searchbar/usage/javascript.md b/core/src/components/searchbar/usage/javascript.md deleted file mode 100644 index 5b6b046343..0000000000 --- a/core/src/components/searchbar/usage/javascript.md +++ /dev/null @@ -1,45 +0,0 @@ -```html - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` \ No newline at end of file diff --git a/core/src/components/searchbar/usage/react.md b/core/src/components/searchbar/usage/react.md deleted file mode 100644 index b2065a416a..0000000000 --- a/core/src/components/searchbar/usage/react.md +++ /dev/null @@ -1,65 +0,0 @@ -```tsx -import React, { useState } from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSearchbar, IonFooter } from '@ionic/react'; - -export const SearchBarExamples: React.FC = () => { - const [searchText, setSearchText] = useState(''); - return ( - - - - IonSearchBar Examples - - - -

Default Searchbar

- setSearchText(e.detail.value!)}> - -

Searchbar with cancel button always shown

- setSearchText(e.detail.value!)} showCancelButton="always"> - -

Searchbar with cancel button never shown

- setSearchText(e.detail.value!)} showCancelButton="never"> - -

Searchbar with cancel button shown on focus

- setSearchText(e.detail.value!)} showCancelButton="focus"> - -

Searchbar with danger color

- setSearchText(e.detail.value!)} color="danger"> - -

Searchbar with telephone type

- setSearchText(e.detail.value!)} type="tel"> - -

Searchbar with numeric inputmode

- setSearchText(e.detail.value!)} inputmode="numeric"> - -

Searchbar disabled

- setSearchText(e.detail.value!)} disabled={true}> - -

Searchbar with a cancel button and custom cancel button text

- setSearchText(e.detail.value!)} showCancelButton="focus" cancelButtonText="Custom Cancel"> - -

Searchbar with a custom debounce - Note: debounce only works on onIonChange event

- setSearchText(e.detail.value!)} debounce={1000}> - -

Animated Searchbar

- setSearchText(e.detail.value!)} animated> - -

Searchbar with a placeholder

- setSearchText(e.detail.value!)} placeholder="Filter Schedules"> - -

Searchbar in a Toolbar

- - setSearchText(e.detail.value!)}> - - - - - - Search Text: {searchText ?? '(none)'} - - - - ); -}; -``` \ No newline at end of file diff --git a/core/src/components/searchbar/usage/stencil.md b/core/src/components/searchbar/usage/stencil.md deleted file mode 100644 index f80e605047..0000000000 --- a/core/src/components/searchbar/usage/stencil.md +++ /dev/null @@ -1,57 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'searchbar-example', - styleUrl: 'searchbar-example.css' -}) -export class SearchbarExample { - render() { - return [ - // Default Searchbar - , - - // Searchbar with cancel button always shown - , - - // Searchbar with cancel button never shown - , - - // Searchbar with cancel button shown on focus - , - - // Searchbar with danger color - , - - // Searchbar with value - , - - // Searchbar with telephone type - , - - // Searchbar with numeric inputmode - , - - // Searchbar disabled - , - - // Searchbar with a cancel button and custom cancel button text - , - - // Searchbar with a custom debounce - , - - // Animated Searchbar - , - - // Searchbar with a placeholder - , - - // Searchbar in a Toolbar - - - - ]; - } -} -``` diff --git a/core/src/components/searchbar/usage/vue.md b/core/src/components/searchbar/usage/vue.md deleted file mode 100644 index ba99c11ac2..0000000000 --- a/core/src/components/searchbar/usage/vue.md +++ /dev/null @@ -1,56 +0,0 @@ -```html - - - -``` \ No newline at end of file diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md deleted file mode 100644 index f2fb8f0c3d..0000000000 --- a/core/src/components/segment-button/readme.md +++ /dev/null @@ -1,868 +0,0 @@ -# ion-segment-button - -Segment buttons are groups of related buttons inside of a [Segment](../segment). They are displayed in a horizontal row. A segment button can be checked by default by setting the `value` of the segment to the `value` of the segment button. Only one segment button can be selected at a time. - - - - - -## Usage - -### Angular - -```html - - - - Friends - - - Enemies - - - - - - - Paid - - - Free - - - Top - - - - - - - - - - - - - - - - - Bookmarks - - - Reading List - - - Shared Links - - - - - - - Item One - - - Item Two - - - Item Three - - - - - - - - - - - - - - - - - - - - Item One - - - - Item Two - - - - Item Three - - - - - - - - - Item One - - - - Item Two - - - - Item Three - - - - - - - Item One - - - - Item Two - - - - Item Three - - - - - - - - - Item One - - - - Item Two - - - - Item Three - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({ - selector: 'segment-button-example', - templateUrl: 'segment-button-example.html', - styleUrls: ['./segment-button-example.css'], -}) -export class SegmentButtonExample { - segmentChanged(ev: any) { - console.log('Segment changed', ev); - } -} -``` - - -### Javascript - -```html - - - - Friends - - - Enemies - - - - - - - Paid - - - Free - - - Top - - - - - - - - - - - - - - - - - Bookmarks - - - Reading List - - - Shared Links - - - - - - - Item One - - - Item Two - - - Item Three - - - - - - - - - - - - - - - - - - - - Item One - - - - Item Two - - - - Item Three - - - - - - - - - Item One - - - - Item Two - - - - Item Three - - - - - - - Item One - - - - Item Two - - - - Item Three - - - - - - - - - Item One - - - - Item Two - - - - Item Three - - -``` - -```javascript -// Listen for ionChange on segment -const segment = document.querySelector('ion-segment'); -segment.addEventListener('ionChange', (ev) => { - console.log('Segment changed', ev); -}) -``` - - -### React - -```tsx -import React from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react'; -import { call, camera, bookmark, heart, pin } from 'ionicons/icons'; - -export const SegmentButtonExamples: React.FC = () => { - return ( - - - - SegmentButton - - - - {/*-- Segment buttons with text and click listener --*/} - console.log(`${e.detail.value} segment selected`)}> - - Friends - - - Enemies - - - - {/*-- Segment buttons with the first checked and the last disabled --*/} - - - Paid - - - Free - - - Top - - - - {/*-- Segment buttons with values and icons --*/} - - - - - - - - - - {/*-- Segment with a value that checks the last button --*/} - - - Bookmarks - - - Reading List - - - Shared Links - - - - {/*-- Label only --*/} - - - Item One - - - Item Two - - - Item Three - - - - {/*-- Icon only --*/} - - - - - - - - - - - - - {/*-- Icon top --*/} - - - Item One - - - - Item Two - - - - Item Three - - - - - {/*-- Icon bottom --*/} - - - - Item One - - - - Item Two - - - - Item Three - - - - {/*-- Icon start --*/} - - - Item One - - - - Item Two - - - - Item Three - - - - - {/*-- Icon end --*/} - - - - Item One - - - - Item Two - - - - Item Three - - - - - ); -}; -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'segment-button-example', - styleUrl: 'segment-button-example.css' -}) -export class SegmentButtonExample { - segmentChanged(ev: any) { - console.log('Segment changed', ev); - } - - render() { - return [ - // Segment buttons with text and click listener - this.segmentChanged(ev)}> - - Friends - - - Enemies - - , - - // Segment buttons with the first checked and the last disabled - - - Paid - - - Free - - - Top - - , - - // Segment buttons with values and icons - - - - - - - - , - - // Segment with a value that checks the last button - - - Bookmarks - - - Reading List - - - Shared Links - - , - - // Label only - - - Item One - - - Item Two - - - Item Three - - , - - // Icon only - - - - - - - - - - - , - - // Icon top - - - Item One - - - - Item Two - - - - Item Three - - - , - - // Icon bottom - - - - Item One - - - - Item Two - - - - Item Three - - , - - // Icon start - - - Item One - - - - Item Two - - - - Item Three - - - , - - // Icon end - - - - Item One - - - - Item Two - - - - Item Three - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- | ------------------- | -| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` | -| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` | -| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + ids++` | - - -## Shadow Parts - -| Part | Description | -| ------------------------ | --------------------------------------------------------------------------------- | -| `"indicator"` | The indicator displayed on the checked segment button. | -| `"indicator-background"` | The background element for the indicator displayed on the checked segment button. | -| `"native"` | The native HTML button element that wraps all child elements. | - - -## CSS Custom Properties - -| Name | Description | -| ------------------------------ | ----------------------------------------------------------------------------------------------------------------- | -| `--background` | Background of the segment button | -| `--background-checked` | Background of the checked segment button | -| `--background-focused` | Background of the segment button when focused with the tab key | -| `--background-focused-opacity` | Opacity of the segment button background when focused with the tab key | -| `--background-hover` | Background of the segment button on hover | -| `--background-hover-opacity` | Opacity of the segment button background on hover | -| `--border-color` | Color of the segment button border | -| `--border-radius` | Radius of the segment button border | -| `--border-style` | Style of the segment button border | -| `--border-width` | Width of the segment button border | -| `--color` | Color of the segment button | -| `--color-checked` | Color of the checked segment button | -| `--color-focused` | Color of the segment button when focused with the tab key | -| `--color-hover` | Color of the segment button on hover | -| `--indicator-box-shadow` | Box shadow on the indicator for the checked segment button | -| `--indicator-color` | Color of the indicator for the checked segment button | -| `--indicator-height` | Height of the indicator for the checked segment button | -| `--indicator-transform` | Transform of the indicator for the checked segment button | -| `--indicator-transition` | Transition of the indicator for the checked segment button | -| `--margin-bottom` | Bottom margin of the segment button | -| `--margin-end` | Right margin if direction is left-to-right, and left margin if direction is right-to-left of the segment button | -| `--margin-start` | Left margin if direction is left-to-right, and right margin if direction is right-to-left of the segment button | -| `--margin-top` | Top margin of the segment button | -| `--padding-bottom` | Bottom padding of the segment button | -| `--padding-end` | Right padding if direction is left-to-right, and left padding if direction is right-to-left of the segment button | -| `--padding-start` | Left padding if direction is left-to-right, and right padding if direction is right-to-left of the segment button | -| `--padding-top` | Top padding of the segment button | -| `--transition` | Transition of the segment button | - - -## Dependencies - -### Depends on - -- [ion-ripple-effect](../ripple-effect) - -### Graph -```mermaid -graph TD; - ion-segment-button --> ion-ripple-effect - style ion-segment-button fill:#f9f,stroke:#333,stroke-width:4px -``` - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/segment-button/usage/angular.md b/core/src/components/segment-button/usage/angular.md deleted file mode 100644 index 1d723d9b62..0000000000 --- a/core/src/components/segment-button/usage/angular.md +++ /dev/null @@ -1,152 +0,0 @@ -```html - - - - Friends - - - Enemies - - - - - - - Paid - - - Free - - - Top - - - - - - - - - - - - - - - - - Bookmarks - - - Reading List - - - Shared Links - - - - - - - Item One - - - Item Two - - - Item Three - - - - - - - - - - - - - - - - - - - - Item One - - - - Item Two - - - - Item Three - - - - - - - - - Item One - - - - Item Two - - - - Item Three - - - - - - - Item One - - - - Item Two - - - - Item Three - - - - - - - - - Item One - - - - Item Two - - - - Item Three - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({ - selector: 'segment-button-example', - templateUrl: 'segment-button-example.html', - styleUrls: ['./segment-button-example.css'], -}) -export class SegmentButtonExample { - segmentChanged(ev: any) { - console.log('Segment changed', ev); - } -} -``` \ No newline at end of file diff --git a/core/src/components/segment-button/usage/javascript.md b/core/src/components/segment-button/usage/javascript.md deleted file mode 100644 index bf6e8a23c5..0000000000 --- a/core/src/components/segment-button/usage/javascript.md +++ /dev/null @@ -1,145 +0,0 @@ -```html - - - - Friends - - - Enemies - - - - - - - Paid - - - Free - - - Top - - - - - - - - - - - - - - - - - Bookmarks - - - Reading List - - - Shared Links - - - - - - - Item One - - - Item Two - - - Item Three - - - - - - - - - - - - - - - - - - - - Item One - - - - Item Two - - - - Item Three - - - - - - - - - Item One - - - - Item Two - - - - Item Three - - - - - - - Item One - - - - Item Two - - - - Item Three - - - - - - - - - Item One - - - - Item Two - - - - Item Three - - -``` - -```javascript -// Listen for ionChange on segment -const segment = document.querySelector('ion-segment'); -segment.addEventListener('ionChange', (ev) => { - console.log('Segment changed', ev); -}) -``` \ No newline at end of file diff --git a/core/src/components/segment-button/usage/react.md b/core/src/components/segment-button/usage/react.md deleted file mode 100644 index 86f4c5ed3f..0000000000 --- a/core/src/components/segment-button/usage/react.md +++ /dev/null @@ -1,154 +0,0 @@ -```tsx -import React from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react'; -import { call, camera, bookmark, heart, pin } from 'ionicons/icons'; - -export const SegmentButtonExamples: React.FC = () => { - return ( - - - - SegmentButton - - - - {/*-- Segment buttons with text and click listener --*/} - console.log(`${e.detail.value} segment selected`)}> - - Friends - - - Enemies - - - - {/*-- Segment buttons with the first checked and the last disabled --*/} - - - Paid - - - Free - - - Top - - - - {/*-- Segment buttons with values and icons --*/} - - - - - - - - - - {/*-- Segment with a value that checks the last button --*/} - - - Bookmarks - - - Reading List - - - Shared Links - - - - {/*-- Label only --*/} - - - Item One - - - Item Two - - - Item Three - - - - {/*-- Icon only --*/} - - - - - - - - - - - - - {/*-- Icon top --*/} - - - Item One - - - - Item Two - - - - Item Three - - - - - {/*-- Icon bottom --*/} - - - - Item One - - - - Item Two - - - - Item Three - - - - {/*-- Icon start --*/} - - - Item One - - - - Item Two - - - - Item Three - - - - - {/*-- Icon end --*/} - - - - Item One - - - - Item Two - - - - Item Three - - - - - ); -}; -``` diff --git a/core/src/components/segment-button/usage/stencil.md b/core/src/components/segment-button/usage/stencil.md deleted file mode 100644 index 0d521fa710..0000000000 --- a/core/src/components/segment-button/usage/stencil.md +++ /dev/null @@ -1,153 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'segment-button-example', - styleUrl: 'segment-button-example.css' -}) -export class SegmentButtonExample { - segmentChanged(ev: any) { - console.log('Segment changed', ev); - } - - render() { - return [ - // Segment buttons with text and click listener - this.segmentChanged(ev)}> - - Friends - - - Enemies - - , - - // Segment buttons with the first checked and the last disabled - - - Paid - - - Free - - - Top - - , - - // Segment buttons with values and icons - - - - - - - - , - - // Segment with a value that checks the last button - - - Bookmarks - - - Reading List - - - Shared Links - - , - - // Label only - - - Item One - - - Item Two - - - Item Three - - , - - // Icon only - - - - - - - - - - - , - - // Icon top - - - Item One - - - - Item Two - - - - Item Three - - - , - - // Icon bottom - - - - Item One - - - - Item Two - - - - Item Three - - , - - // Icon start - - - Item One - - - - Item Two - - - - Item Three - - - , - - // Icon end - - - - Item One - - - - Item Two - - - - Item Three - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/segment-button/usage/vue.md b/core/src/components/segment-button/usage/vue.md deleted file mode 100644 index ae651c1f30..0000000000 --- a/core/src/components/segment-button/usage/vue.md +++ /dev/null @@ -1,163 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md deleted file mode 100644 index ba48ec3ec4..0000000000 --- a/core/src/components/segment/readme.md +++ /dev/null @@ -1,631 +0,0 @@ -# ion-segment - -Segments display a group of related buttons, sometimes known as segmented controls, in a horizontal row. They can be displayed inside of a toolbar or the main content. - -Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages. - -## Scrollable Segments - -Segments are not scrollable by default. Each segment button has a fixed width, and the width is determined by dividing the number of segment buttons by the screen width. This ensures that each segment button can be displayed on the screen without having to scroll. As a result, some segment buttons with longer labels may get cut off. To avoid this we recommend either using a shorter label or switching to a scrollable segment by setting the `scrollable` property to `true`. This will cause the segment to scroll horizontally, but will allow each segment button to have a variable width. - -## Accessibility - -### Keyboard Navigation - -The component has full keyboard support for navigating between and selecting `ion-segment-button` elements. By default, keyboard navigation will only focus `ion-segment-button` elements, but you can use the `selectOnFocus` property to ensure that they get selected on focus as well. The following table details what each key does: - -| Key | Function | -| ------------------ | -------------------------------------------------------------- | -| `ArrowRight` | Focuses the next focusable element. | -| `ArrowLeft` | Focuses the previous focusable element. | -| `Home` | Focuses the first focusable element. | -| `End` | Focuses the last focusable element. | -| `Space` or `Enter` | Selects the element that is currently focused. | - -## Interfaces - -### SegmentChangeEventDetail - -```typescript -interface SegmentChangeEventDetail { - value?: string; -} -``` - -### SegmentCustomEvent - -While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. - -```typescript -interface SegmentCustomEvent extends CustomEvent { - target: HTMLIonSegmentElement; - detail: SegmentChangeEventDetail; -} -``` - - - - -## Usage - -### Angular - -```html - - - - Friends - - - Enemies - - - - - - - Sunny - - - Rainy - - - - - - - Dogs - - - Cats - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Standard - - - Hybrid - - - Satellite - - - - - - - - - - - - - - - - - - - Python - - - Javascript - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({ - selector: 'segment-example', - templateUrl: 'segment-example.html', - styleUrls: ['./segment-example.css'], -}) -export class SegmentExample { - segmentChanged(ev: any) { - console.log('Segment changed', ev); - } -} -``` - - -### Javascript - -```html - - - - Friends - - - Enemies - - - - - - - Sunny - - - Rainy - - - - - - - Dogs - - - Cats - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Standard - - - Hybrid - - - Satellite - - - - - - - - - - - - - - - - - - - Python - - - Javascript - - -``` - -```javascript -// Listen for ionChange on all segments -const segments = document.querySelectorAll('ion-segment') -for (let i = 0; i < segments.length; i++) { - segments[i].addEventListener('ionChange', (ev) => { - console.log('Segment changed', ev); - }) -} -``` - - -### React - -```tsx -import React from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react'; -import { call, home, heart, pin, star, globe, basket, camera, bookmark } from 'ionicons/icons'; - -export const SegmentExamples: React.FC = () => { - return ( - - - - SegmentExamples - - - - {/*-- Default Segment --*/} - console.log('Segment selected', e.detail.value)}> - - Friends - - - Enemies - - - - {/*-- Disabled Segment --*/} - console.log('Segment selected', e.detail.value)} disabled value="sunny"> - - Sunny - - - Rainy - - - - {/*-- Segment with anchors --*/} - console.log('Segment selected', e.detail.value)}> - - Dogs - - - Cats - - - - {/*-- Scrollable Segment --*/} - - - - - - - - - - - - - - - - - - - - - - - - - {/*-- Segment with secondary color --*/} - console.log('Segment selected', e.detail.value)} color="secondary"> - - Standard - - - Hybrid - - - Satellite - - - - {/*-- Segment in a toolbar --*/} - - console.log('Segment selected', e.detail.value)}> - - - - - - - - - - {/*-- Segment with default selection --*/} - console.log('Segment selected', e.detail.value)} value="javascript"> - - Python - - - Javascript - - - - - ); -}; - -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'segment-example', - styleUrl: 'segment-example.css' -}) -export class SegmentExample { - segmentChanged(ev: any) { - console.log('Segment changed', ev); - } - - render() { - return [ - // Default Segment - this.segmentChanged(ev)}> - - Friends - - - Enemies - - , - - // Disabled Segment - this.segmentChanged(ev)} disabled={true} value="sunny"> - - Sunny - - - Rainy - - , - - // Segment with anchors - this.segmentChanged(ev)}> - - Dogs - - - Cats - - , - - // Scrollable Segment - - - - - - - - - - - - - - - - - - - - - - - , - - // Segment with secondary color - this.segmentChanged(ev)} color="secondary"> - - Standard - - - Hybrid - - - Satellite - - , - - // Segment in a toolbar - - this.segmentChanged(ev)}> - - - - - - - - , - - // Segment with default selection - this.segmentChanged(ev)} value="javascript"> - - Python - - - Javascript - - - ]; - } -} -``` - - -### Vue - -```html - - - -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| --------------- | ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ----------- | -| `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). | `string \| undefined` | `undefined` | -| `disabled` | `disabled` | If `true`, the user cannot interact with the segment. | `boolean` | `false` | -| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` | -| `scrollable` | `scrollable` | If `true`, the segment buttons will overflow and the user can swipe to see them. In addition, this will disable the gesture to drag the indicator between the buttons in order to swipe to see hidden buttons. | `boolean` | `false` | -| `selectOnFocus` | `select-on-focus` | If `true`, navigating to an `ion-segment-button` with the keyboard will focus and select the element. If `false`, keyboard navigation will only focus the `ion-segment-button` element. | `boolean` | `false` | -| `swipeGesture` | `swipe-gesture` | If `true`, users will be able to swipe between segment buttons to activate them. | `boolean` | `true` | -| `value` | `value` | the value of the segment. | `null \| string \| undefined` | `undefined` | - - -## Events - -| Event | Description | Type | -| ----------- | ---------------------------------------------------------------------------------------------------------- | --------------------------------------- | -| `ionChange` | Emitted when the value property has changed and any dragging pointer has been released from `ion-segment`. | `CustomEvent` | - - -## CSS Custom Properties - -| Name | Description | -| -------------- | -------------------------------- | -| `--background` | Background of the segment button | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/segment/usage/angular.md b/core/src/components/segment/usage/angular.md deleted file mode 100644 index 728ba73205..0000000000 --- a/core/src/components/segment/usage/angular.md +++ /dev/null @@ -1,106 +0,0 @@ -```html - - - - Friends - - - Enemies - - - - - - - Sunny - - - Rainy - - - - - - - Dogs - - - Cats - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Standard - - - Hybrid - - - Satellite - - - - - - - - - - - - - - - - - - - Python - - - Javascript - - -``` - -```typescript -import { Component } from '@angular/core'; - -@Component({ - selector: 'segment-example', - templateUrl: 'segment-example.html', - styleUrls: ['./segment-example.css'], -}) -export class SegmentExample { - segmentChanged(ev: any) { - console.log('Segment changed', ev); - } -} -``` diff --git a/core/src/components/segment/usage/javascript.md b/core/src/components/segment/usage/javascript.md deleted file mode 100644 index a815016a08..0000000000 --- a/core/src/components/segment/usage/javascript.md +++ /dev/null @@ -1,101 +0,0 @@ -```html - - - - Friends - - - Enemies - - - - - - - Sunny - - - Rainy - - - - - - - Dogs - - - Cats - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Standard - - - Hybrid - - - Satellite - - - - - - - - - - - - - - - - - - - Python - - - Javascript - - -``` - -```javascript -// Listen for ionChange on all segments -const segments = document.querySelectorAll('ion-segment') -for (let i = 0; i < segments.length; i++) { - segments[i].addEventListener('ionChange', (ev) => { - console.log('Segment changed', ev); - }) -} -``` \ No newline at end of file diff --git a/core/src/components/segment/usage/react.md b/core/src/components/segment/usage/react.md deleted file mode 100644 index 7a39f79c83..0000000000 --- a/core/src/components/segment/usage/react.md +++ /dev/null @@ -1,109 +0,0 @@ -```tsx -import React from 'react'; -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar, IonSegment, IonSegmentButton, IonLabel, IonIcon } from '@ionic/react'; -import { call, home, heart, pin, star, globe, basket, camera, bookmark } from 'ionicons/icons'; - -export const SegmentExamples: React.FC = () => { - return ( - - - - SegmentExamples - - - - {/*-- Default Segment --*/} - console.log('Segment selected', e.detail.value)}> - - Friends - - - Enemies - - - - {/*-- Disabled Segment --*/} - console.log('Segment selected', e.detail.value)} disabled value="sunny"> - - Sunny - - - Rainy - - - - {/*-- Segment with anchors --*/} - console.log('Segment selected', e.detail.value)}> - - Dogs - - - Cats - - - - {/*-- Scrollable Segment --*/} - - - - - - - - - - - - - - - - - - - - - - - - - {/*-- Segment with secondary color --*/} - console.log('Segment selected', e.detail.value)} color="secondary"> - - Standard - - - Hybrid - - - Satellite - - - - {/*-- Segment in a toolbar --*/} - - console.log('Segment selected', e.detail.value)}> - - - - - - - - - - {/*-- Segment with default selection --*/} - console.log('Segment selected', e.detail.value)} value="javascript"> - - Python - - - Javascript - - - - - ); -}; - -``` \ No newline at end of file diff --git a/core/src/components/segment/usage/stencil.md b/core/src/components/segment/usage/stencil.md deleted file mode 100644 index cade3c1fa2..0000000000 --- a/core/src/components/segment/usage/stencil.md +++ /dev/null @@ -1,107 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'segment-example', - styleUrl: 'segment-example.css' -}) -export class SegmentExample { - segmentChanged(ev: any) { - console.log('Segment changed', ev); - } - - render() { - return [ - // Default Segment - this.segmentChanged(ev)}> - - Friends - - - Enemies - - , - - // Disabled Segment - this.segmentChanged(ev)} disabled={true} value="sunny"> - - Sunny - - - Rainy - - , - - // Segment with anchors - this.segmentChanged(ev)}> - - Dogs - - - Cats - - , - - // Scrollable Segment - - - - - - - - - - - - - - - - - - - - - - - , - - // Segment with secondary color - this.segmentChanged(ev)} color="secondary"> - - Standard - - - Hybrid - - - Satellite - - , - - // Segment in a toolbar - - this.segmentChanged(ev)}> - - - - - - - - , - - // Segment with default selection - this.segmentChanged(ev)} value="javascript"> - - Python - - - Javascript - - - ]; - } -} -``` \ No newline at end of file diff --git a/core/src/components/segment/usage/vue.md b/core/src/components/segment/usage/vue.md deleted file mode 100644 index 3e9f467412..0000000000 --- a/core/src/components/segment/usage/vue.md +++ /dev/null @@ -1,107 +0,0 @@ -```html - - - -``` diff --git a/core/src/components/select-option/readme.md b/core/src/components/select-option/readme.md deleted file mode 100644 index 616f06a3f8..0000000000 --- a/core/src/components/select-option/readme.md +++ /dev/null @@ -1,683 +0,0 @@ -# ion-select-option - -Select Options are components that are child elements of a Select. Each option defined is passed and displayed in the Select dialog. For more information, see the [Select docs](../select). - -## Customization - -Each `ion-select-option` component that is added as a child of an `ion-select` is passed to the interface to display it in the dialog. It's important to note that the `ion-select-option` element itself is hidden from the view. This means that attempting to style it will not have any effect on the option in the dialog: - -```css -/* DOES NOT work */ -ion-select-option { - color: red; -} -``` - -Instead, each interface option has the class `.select-interface-option` which can be styled. Keep in mind that due to the overlays being scoped components the selector by itself will not work and a custom `cssClass` is recommended to be passed to the interface. - -```css -/* This will NOT work on its own */ -.select-interface-option { - color: red; -} - -/* - * "my-custom-interface" needs to be passed in through - * the cssClass of the interface options for this to work - */ -.my-custom-interface .select-interface-option { - color: red; -} -``` - -> Note: Some interfaces require more in depth styling due to how the options are rendered. See usage for expanded information on this. - -The options can be styled individually by adding your own class on the `ion-select-option` which gets passed to the interface option. See the [Usage](#usage) section below for examples of styling and setting individual classes on options. - - - - - -## Usage - -### Javascript - -```html - - Select - - Brown - Blonde - Black - Red - - -``` - -### Customizing Options - -```html - - Select: Alert Interface - - Brown - Blonde - Black - Red - - - - - Select: Alert Interface (Multiple Selection) - - Brown - Blonde - Black - Red - - - - - Select: Popover Interface - - Brown - Blonde - Black - Red - - - - - Select: Action Sheet Interface - - Brown - Blonde - Black - Red - - -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .select-interface-option { - --color: #971e49; - --color-hover: #79193b; -} - -/* Action Sheet Interface: set color for the action sheet using its button CSS variables */ -.my-custom-interface .select-interface-option { - --button-color: #971e49; - --button-color-hover: #79193b; -} - -/* Alert Interface: set color for alert options (single selection) */ -.my-custom-interface .select-interface-option .alert-radio-label { - color: #971e49; -} - -/* Alert Interface: set color for alert options (multiple selection) */ -.my-custom-interface .select-interface-option .alert-checkbox-label { - color: #971e49; -} - -/* Alert Interface: set color for checked alert options (single selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label { - color: #79193b; -} - -/* Alert Interface: set color for checked alert options (multiple selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label { - color: #79193b; -} -``` - -```javascript -// Pass a custom class to each select interface for styling -const selects = document.querySelectorAll('.custom-options'); - -for (var i = 0; i < selects.length; i++) { - selects[i].interfaceOptions = { - cssClass: 'my-custom-interface' - }; -}; -``` - -> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for. - -### Customizing Individual Options - -To customize an individual option, set a class on the `ion-select-option`: - -```html - - Select - - Brown - Blonde - Black - Red - - -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .brown-option { - --color: #5e3e2c; - --color-hover: #362419; -} -``` - -```javascript -// Pass a custom class to each select interface for styling -const select = document.querySelector('.custom-options'); -select.interfaceOptions = { - cssClass: 'my-custom-interface' -}; -``` - - -### React - -```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react'; - -export const SelectOptionExample: React.FC = () => { - return ( - - - - Select - - Brown - Blonde - Black - Red - - - - - ); -}; -``` - -### Customizing Options - -```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react'; - -const options = { - cssClass: 'my-custom-interface' -}; - -export const SelectOptionExample: React.FC = () => { - return ( - - - - Select: Alert Interface - - Brown - Blonde - Black - Red - - - - - Select: Alert Interface (Multiple Selection) - - Brown - Blonde - Black - Red - - - - - Select: Popover Interface - - Brown - Blonde - Black - Red - - - - - Select: Action Sheet Interface - - Brown - Blonde - Black - Red - - - - - ); -}; -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .select-interface-option { - --color: #971e49; - --color-hover: #79193b; -} - -/* Action Sheet Interface: set color for the action sheet using its button CSS variables */ -.my-custom-interface .select-interface-option { - --button-color: #971e49; - --button-color-hover: #79193b; -} - -/* Alert Interface: set color for alert options (single selection) */ -.my-custom-interface .select-interface-option .alert-radio-label { - color: #971e49; -} - -/* Alert Interface: set color for alert options (multiple selection) */ -.my-custom-interface .select-interface-option .alert-checkbox-label { - color: #971e49; -} - -/* Alert Interface: set color for checked alert options (single selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label { - color: #79193b; -} - -/* Alert Interface: set color for checked alert options (multiple selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label { - color: #79193b; -} -``` - -> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for. - - -### Customizing Individual Options - -To customize an individual option, set a class on the `ion-select-option`: - -```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react'; - -const options = { - cssClass: 'my-custom-interface' -}; - -export const SelectOptionExample: React.FC = () => { - return ( - - - - Select - - Brown - Blonde - Black - Red - - - - - ); -}; -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .brown-option { - --color: #5e3e2c; - --color-hover: #362419; -} -``` - - -### Stencil - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'select-option-example', - styleUrl: 'select-option-example.css' -}) -export class SelectOptionExample { - render() { - return [ - - Select - - Brown - Blonde - Black - Red - - - ]; - } -} -``` - -### Customizing Options - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'select-option-example', - styleUrl: 'select-option-example.css' -}) -export class SelectOptionExample { - options = { - cssClass: 'my-custom-interface' - }; - - render() { - return [ - - Select: Alert Interface - - Brown - Blonde - Black - Red - - , - - - Select: Alert Interface (Multiple Selection) - - Brown - Blonde - Black - Red - - , - - - Select: Popover Interface - - Brown - Blonde - Black - Red - - , - - - Select: Action Sheet Interface - - Brown - Blonde - Black - Red - - - ]; - } -} -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .select-interface-option { - --color: #971e49; - --color-hover: #79193b; -} - -/* Action Sheet Interface: set color for the action sheet using its button CSS variables */ -.my-custom-interface .select-interface-option { - --button-color: #971e49; - --button-color-hover: #79193b; -} - -/* Alert Interface: set color for alert options (single selection) */ -.my-custom-interface .select-interface-option .alert-radio-label { - color: #971e49; -} - -/* Alert Interface: set color for alert options (multiple selection) */ -.my-custom-interface .select-interface-option .alert-checkbox-label { - color: #971e49; -} - -/* Alert Interface: set color for checked alert options (single selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label { - color: #79193b; -} - -/* Alert Interface: set color for checked alert options (multiple selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label { - color: #79193b; -} -``` - -> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for. - -### Customizing Individual Options - -To customize an individual option, set a class on the `ion-select-option`: - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'select-option-example', - styleUrl: 'select-option-example.css' -}) -export class SelectOptionExample { - options = { - cssClass: 'my-custom-interface' - }; - - render() { - return [ - - Select - - Brown - Blonde - Black - Red - - - ]; - } -} -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .brown-option { - --color: #5e3e2c; - --color-hover: #362419; -} -``` - - -### Vue - -```html - - - -``` - -### Customizing Options - -```html - - - -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .select-interface-option { - --color: #971e49; - --color-hover: #79193b; -} - -/* Action Sheet Interface: set color for the action sheet using its button CSS variables */ -.my-custom-interface .select-interface-option { - --button-color: #971e49; - --button-color-hover: #79193b; -} - -/* Alert Interface: set color for alert options (single selection) */ -.my-custom-interface .select-interface-option .alert-radio-label { - color: #971e49; -} - -/* Alert Interface: set color for alert options (multiple selection) */ -.my-custom-interface .select-interface-option .alert-checkbox-label { - color: #971e49; -} - -/* Alert Interface: set color for checked alert options (single selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label { - color: #79193b; -} - -/* Alert Interface: set color for checked alert options (multiple selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label { - color: #79193b; -} -``` - -> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for. - - -### Customizing Individual Options - -To customize an individual option, set a class on the `ion-select-option`: - -```html - - - -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .brown-option { - --color: #5e3e2c; - --color-hover: #362419; -} -``` - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ----------- | -| `disabled` | `disabled` | If `true`, the user cannot interact with the select option. This property does not apply when `interface="action-sheet"` as `ion-action-sheet` does not allow for disabled buttons. | `boolean` | `false` | -| `value` | `value` | The text value of the option. | `any` | `undefined` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/select-option/usage/javascript.md b/core/src/components/select-option/usage/javascript.md deleted file mode 100644 index 02b75dcc2b..0000000000 --- a/core/src/components/select-option/usage/javascript.md +++ /dev/null @@ -1,134 +0,0 @@ -```html - - Select - - Brown - Blonde - Black - Red - - -``` - -### Customizing Options - -```html - - Select: Alert Interface - - Brown - Blonde - Black - Red - - - - - Select: Alert Interface (Multiple Selection) - - Brown - Blonde - Black - Red - - - - - Select: Popover Interface - - Brown - Blonde - Black - Red - - - - - Select: Action Sheet Interface - - Brown - Blonde - Black - Red - - -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .select-interface-option { - --color: #971e49; - --color-hover: #79193b; -} - -/* Action Sheet Interface: set color for the action sheet using its button CSS variables */ -.my-custom-interface .select-interface-option { - --button-color: #971e49; - --button-color-hover: #79193b; -} - -/* Alert Interface: set color for alert options (single selection) */ -.my-custom-interface .select-interface-option .alert-radio-label { - color: #971e49; -} - -/* Alert Interface: set color for alert options (multiple selection) */ -.my-custom-interface .select-interface-option .alert-checkbox-label { - color: #971e49; -} - -/* Alert Interface: set color for checked alert options (single selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label { - color: #79193b; -} - -/* Alert Interface: set color for checked alert options (multiple selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label { - color: #79193b; -} -``` - -```javascript -// Pass a custom class to each select interface for styling -const selects = document.querySelectorAll('.custom-options'); - -for (var i = 0; i < selects.length; i++) { - selects[i].interfaceOptions = { - cssClass: 'my-custom-interface' - }; -}; -``` - -> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for. - -### Customizing Individual Options - -To customize an individual option, set a class on the `ion-select-option`: - -```html - - Select - - Brown - Blonde - Black - Red - - -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .brown-option { - --color: #5e3e2c; - --color-hover: #362419; -} -``` - -```javascript -// Pass a custom class to each select interface for styling -const select = document.querySelector('.custom-options'); -select.interfaceOptions = { - cssClass: 'my-custom-interface' -}; -``` \ No newline at end of file diff --git a/core/src/components/select-option/usage/react.md b/core/src/components/select-option/usage/react.md deleted file mode 100644 index f3d09aa332..0000000000 --- a/core/src/components/select-option/usage/react.md +++ /dev/null @@ -1,157 +0,0 @@ -```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react'; - -export const SelectOptionExample: React.FC = () => { - return ( - - - - Select - - Brown - Blonde - Black - Red - - - - - ); -}; -``` - -### Customizing Options - -```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react'; - -const options = { - cssClass: 'my-custom-interface' -}; - -export const SelectOptionExample: React.FC = () => { - return ( - - - - Select: Alert Interface - - Brown - Blonde - Black - Red - - - - - Select: Alert Interface (Multiple Selection) - - Brown - Blonde - Black - Red - - - - - Select: Popover Interface - - Brown - Blonde - Black - Red - - - - - Select: Action Sheet Interface - - Brown - Blonde - Black - Red - - - - - ); -}; -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .select-interface-option { - --color: #971e49; - --color-hover: #79193b; -} - -/* Action Sheet Interface: set color for the action sheet using its button CSS variables */ -.my-custom-interface .select-interface-option { - --button-color: #971e49; - --button-color-hover: #79193b; -} - -/* Alert Interface: set color for alert options (single selection) */ -.my-custom-interface .select-interface-option .alert-radio-label { - color: #971e49; -} - -/* Alert Interface: set color for alert options (multiple selection) */ -.my-custom-interface .select-interface-option .alert-checkbox-label { - color: #971e49; -} - -/* Alert Interface: set color for checked alert options (single selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label { - color: #79193b; -} - -/* Alert Interface: set color for checked alert options (multiple selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label { - color: #79193b; -} -``` - -> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for. - - -### Customizing Individual Options - -To customize an individual option, set a class on the `ion-select-option`: - -```tsx -import React from 'react'; -import { IonContent, IonItem, IonLabel, IonSelect, IonSelectOption, IonPage } from '@ionic/react'; - -const options = { - cssClass: 'my-custom-interface' -}; - -export const SelectOptionExample: React.FC = () => { - return ( - - - - Select - - Brown - Blonde - Black - Red - - - - - ); -}; -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .brown-option { - --color: #5e3e2c; - --color-hover: #362419; -} -``` \ No newline at end of file diff --git a/core/src/components/select-option/usage/stencil.md b/core/src/components/select-option/usage/stencil.md deleted file mode 100644 index a17f0edd72..0000000000 --- a/core/src/components/select-option/usage/stencil.md +++ /dev/null @@ -1,159 +0,0 @@ -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'select-option-example', - styleUrl: 'select-option-example.css' -}) -export class SelectOptionExample { - render() { - return [ - - Select - - Brown - Blonde - Black - Red - - - ]; - } -} -``` - -### Customizing Options - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'select-option-example', - styleUrl: 'select-option-example.css' -}) -export class SelectOptionExample { - options = { - cssClass: 'my-custom-interface' - }; - - render() { - return [ - - Select: Alert Interface - - Brown - Blonde - Black - Red - - , - - - Select: Alert Interface (Multiple Selection) - - Brown - Blonde - Black - Red - - , - - - Select: Popover Interface - - Brown - Blonde - Black - Red - - , - - - Select: Action Sheet Interface - - Brown - Blonde - Black - Red - - - ]; - } -} -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .select-interface-option { - --color: #971e49; - --color-hover: #79193b; -} - -/* Action Sheet Interface: set color for the action sheet using its button CSS variables */ -.my-custom-interface .select-interface-option { - --button-color: #971e49; - --button-color-hover: #79193b; -} - -/* Alert Interface: set color for alert options (single selection) */ -.my-custom-interface .select-interface-option .alert-radio-label { - color: #971e49; -} - -/* Alert Interface: set color for alert options (multiple selection) */ -.my-custom-interface .select-interface-option .alert-checkbox-label { - color: #971e49; -} - -/* Alert Interface: set color for checked alert options (single selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label { - color: #79193b; -} - -/* Alert Interface: set color for checked alert options (multiple selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label { - color: #79193b; -} -``` - -> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for. - -### Customizing Individual Options - -To customize an individual option, set a class on the `ion-select-option`: - -```tsx -import { Component, h } from '@stencil/core'; - -@Component({ - tag: 'select-option-example', - styleUrl: 'select-option-example.css' -}) -export class SelectOptionExample { - options = { - cssClass: 'my-custom-interface' - }; - - render() { - return [ - - Select - - Brown - Blonde - Black - Red - - - ]; - } -} -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .brown-option { - --color: #5e3e2c; - --color-hover: #362419; -} -``` \ No newline at end of file diff --git a/core/src/components/select-option/usage/vue.md b/core/src/components/select-option/usage/vue.md deleted file mode 100644 index ea30ffd906..0000000000 --- a/core/src/components/select-option/usage/vue.md +++ /dev/null @@ -1,163 +0,0 @@ -```html - - - -``` - -### Customizing Options - -```html - - - -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .select-interface-option { - --color: #971e49; - --color-hover: #79193b; -} - -/* Action Sheet Interface: set color for the action sheet using its button CSS variables */ -.my-custom-interface .select-interface-option { - --button-color: #971e49; - --button-color-hover: #79193b; -} - -/* Alert Interface: set color for alert options (single selection) */ -.my-custom-interface .select-interface-option .alert-radio-label { - color: #971e49; -} - -/* Alert Interface: set color for alert options (multiple selection) */ -.my-custom-interface .select-interface-option .alert-checkbox-label { - color: #971e49; -} - -/* Alert Interface: set color for checked alert options (single selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-radio-label { - color: #79193b; -} - -/* Alert Interface: set color for checked alert options (multiple selection) */ -.my-custom-interface .select-interface-option[aria-checked=true] .alert-checkbox-label { - color: #79193b; -} -``` - -> Note: In the CSS examples, some of the selectors could be combined together, but are separated out in order to better explain what each selector is for. - - -### Customizing Individual Options - -To customize an individual option, set a class on the `ion-select-option`: - -```html - - - -``` - -```css -/* Popover Interface: set color for the popover using Item's CSS variables */ -.my-custom-interface .brown-option { - --color: #5e3e2c; - --color-hover: #362419; -} -``` diff --git a/core/src/components/select-popover/readme.md b/core/src/components/select-popover/readme.md deleted file mode 100644 index 00fbc1f19f..0000000000 --- a/core/src/components/select-popover/readme.md +++ /dev/null @@ -1,21 +0,0 @@ -# ion-select-popover - -The select popover is an internal component that is used to create the popover interface from a select component. - - - - - -## Properties - -| Property | Attribute | Description | Type | Default | -| ----------- | ------------ | -------------------------------- | ----------------------- | ----------- | -| `header` | `header` | Header text for the popover | `string \| undefined` | `undefined` | -| `message` | `message` | Text for popover body | `string \| undefined` | `undefined` | -| `options` | -- | Array of options for the popover | `SelectPopoverOption[]` | `[]` | -| `subHeader` | `sub-header` | Subheader text for the popover | `string \| undefined` | `undefined` | - - ----------------------------------------------- - -*Built with [StencilJS](https://stenciljs.com/)* diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md deleted file mode 100644 index 8564446143..0000000000 --- a/core/src/components/select/readme.md +++ /dev/null @@ -1,1469 +0,0 @@ -# ion-select - -Selects are form controls to select an option, or options, from a set of options, similar to a native `