diff --git a/docs/api/app.md b/docs/api/app.md index 30f22a6f860..5e20f74cd20 100644 --- a/docs/api/app.md +++ b/docs/api/app.md @@ -15,7 +15,6 @@ import Slots from '@ionic-internal/component-api/v8/app/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - 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. Using `ion-app` enables the following behaviors: @@ -27,6 +26,13 @@ Using `ion-app` enables the following behaviors: * [Ripple effect](./ripple-effect) when activating buttons on Material Design mode * Other tap and focus utilities which make the experience of using an Ionic app feel more native +## Programmatic Focus + +Ionic offers focus utilities for components with the `ion-focusable` class. These utilities automatically manage focus for components when certain keyboard keys, like Tab, are pressed. Components can also be programmatically focused in response to user actions using the `setFocus` method from `ion-app`. + +import SetFocus from '@site/static/usage/v8/app/set-focus/index.md'; + + ## Properties diff --git a/static/usage/v8/app/set-focus/angular/example_component_html.md b/static/usage/v8/app/set-focus/angular/example_component_html.md new file mode 100644 index 00000000000..877143505d3 --- /dev/null +++ b/static/usage/v8/app/set-focus/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html +Button + + + Radio + + +
+ +Focus Button +Focus Radio +``` diff --git a/static/usage/v8/app/set-focus/angular/example_component_ts.md b/static/usage/v8/app/set-focus/angular/example_component_ts.md new file mode 100644 index 00000000000..9970bf3e4dd --- /dev/null +++ b/static/usage/v8/app/set-focus/angular/example_component_ts.md @@ -0,0 +1,19 @@ +```ts +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], +}) +export class ExampleComponent { + focusElement(id: string) { + const el = document.querySelector(id) as HTMLElement; + + const app = el.closest('ion-app'); + if (app) { + app.setFocus([el]); + } + } +} +``` diff --git a/static/usage/v8/app/set-focus/demo.html b/static/usage/v8/app/set-focus/demo.html new file mode 100644 index 00000000000..780037033a2 --- /dev/null +++ b/static/usage/v8/app/set-focus/demo.html @@ -0,0 +1,49 @@ + + + + + + App + + + + + + + + + + + +
+ Button + + + Radio + + + Focus Button + Focus Radio +
+ + + + + + diff --git a/static/usage/v8/app/set-focus/index.md b/static/usage/v8/app/set-focus/index.md new file mode 100644 index 00000000000..8f33bf88f40 --- /dev/null +++ b/static/usage/v8/app/set-focus/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/app/set-focus/javascript.md b/static/usage/v8/app/set-focus/javascript.md new file mode 100644 index 00000000000..810c8b6ae0f --- /dev/null +++ b/static/usage/v8/app/set-focus/javascript.md @@ -0,0 +1,23 @@ +```html +Button + + + Radio + + +
+ +Focus Button +Focus Radio + + +``` diff --git a/static/usage/v8/app/set-focus/react.md b/static/usage/v8/app/set-focus/react.md new file mode 100644 index 00000000000..c550f8f7728 --- /dev/null +++ b/static/usage/v8/app/set-focus/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonButton, IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + function focusElement(id: string) { + const el = document.querySelector(id) as HTMLElement; + + const app = el.closest('ion-app'); + if (app) { + app.setFocus([el]); + } + } + + return ( + <> + + Button + + + + + Radio + + + +
+ + focusElement('#buttonToFocus')}>Focus Button + focusElement('#radioToFocus')}>Focus Radio + + ); +} +export default Example; +``` diff --git a/static/usage/v8/app/set-focus/vue.md b/static/usage/v8/app/set-focus/vue.md new file mode 100644 index 00000000000..4af15e195df --- /dev/null +++ b/static/usage/v8/app/set-focus/vue.md @@ -0,0 +1,33 @@ +```html + + + +```