javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 01:03:03 +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. 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 ## 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. 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.