javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-14 16:52:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updated Utilities (markdown)

Liam DeBeasi
2021-09-28 13:38:50 -04:00
parent a1b3567ebc
commit 17f286bcfc
1 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
Utilities.md

@ -2,6 +2,18 @@ There are a number of utilities that help make Ionic Framework work better. If y
This guide will go over how each utility works and the role they play in making Ionic Framework function.
## Focus Visible
The focus visible utility can be found at `core/src/utils/focus-visible`. This utility serves to add a visual focus indicator to elements that have been focused with the keyboard. Given a collection `ion-item` buttons in an `ion-list`, tabbing through the list will add a visual indicator to the currently focused item. So why do we use this utility instead of `:focus`? The main reason here is mobile. Tapping a button on mobile also focuses the button. So if we relied on `:focus`, then the visual focused indicator would remain on the button even after removing your finger from the screen. There is a [:focus-visible CSS pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible) that can help us here, but it is not widely supported as of 2021. Eventually we will be able to rely on `:focus-visible`, but for now we use the `focus-visible` JavaScript utility.
There are two requirements to have an element participate in the `focus-visible` utility:
1. The element needs the `.ion-focusable` class set.
2. `<ion-app>` needs to be used on the page. This utility is automatically started when `<ion-app>` is used.
> Alternatively, you can import `startFocusVisible` and start the utility yourself. This is useful if you need this utility to run inside of the Shadow DOM. See https://github.com/ionic-team/ionic-framework/blob/next/core/src/components/datetime/datetime.tsx#L794 for a usage example.
## Tap Click
The tap click utility can be found at `core/src/utils/tap-click` and serves two purposes. The first purpose is to activate the ripple effect on Ionic components that use `<ion-ripple-effect>`. The second purpose is to add the `.ion-activated` class to Ionic components that have `.ion-activatable`. This gives the visual indication that a component is being pressed or clicked.