Skip to content

Commit 40177e3

Browse files
committed
chore: update readme for gesture
1 parent 78456d4 commit 40177e3

File tree

1 file changed

+26
-26
lines changed

1 file changed

+26
-26
lines changed

README.md

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -81,13 +81,37 @@ ion-textarea label.textarea-wrapper {
8181
}
8282
```
8383

84-
### Additional Customization
84+
### Additional Design
8585

86-
To achieve higher fidelity to iOS26 design, you can implement additional customizations provided by this library. For more details, please visit:
86+
To achieve higher fidelity to iOS26 design, you can implement additional design provided by this library. For more details, please visit:
8787

8888
https://ionic-theme-ios26.netlify.app/main/docs
8989

9090

91+
### Experimental: Using Gesture Animation with `ion-tab-button` / `ion-segment-button`
92+
93+
__This feature is experimental. The library can be used without this feature.__
94+
95+
By registering `ion-tab-bar` / `ion-segment`, you can display animation effects on `ion-tab-button` / `ion-segment-button`
96+
97+
```js
98+
import { registerTabBarEffect, registerSegmentEffect } from '@rdlabo/ionic-theme-ios26';
99+
100+
const registeredTabBarEffect = registerTabBarEffect(document.querySelector<HTMLElement>('ion-tab-bar'));
101+
const registeredSegmentEffect = registerSegmentEffect(document.querySelector<HTMLElement>('ion-segment'));
102+
103+
const destroy = () => {
104+
/**
105+
* If the registered DOM element is removed (e.g., due to page navigation),
106+
* make sure to destroy the gesture and animation. This will also remove the event listeners.
107+
* You can re-register them if needed.
108+
*/
109+
registeredTabBarEffect?.destroy();
110+
registeredSegmentEffect?.destroy();
111+
}
112+
```
113+
114+
91115
## Important Notes
92116
93117
### Using `ion-item-group`
@@ -131,30 +155,6 @@ You can see the difference in the following video. The first example shows `ion-
131155
This is a known issue that has been shared with the Ionic team. We will update this library accordingly once Ionic Core addresses it.
132156
133157
134-
### Experimental: Using Gesture Animation with IonTabButton / IonSegmentButton
135-
136-
__This feature is experimental. The library can be used without this feature.__
137-
138-
By registering IonTabBar / IonSegment, you can display animation effects on IonTabButton / IonSegmentButton.
139-
140-
```js
141-
import { registerTabBarEffect, registerSegmentEffect } from '@rdlabo/ionic-theme-ios26';
142-
143-
const registeredTabBarEffect = registerTabBarEffect(document.querySelector<HTMLElement>('ion-tab-bar'));
144-
const registeredSegmentEffect = registerSegmentEffect(document.querySelector<HTMLElement>('ion-segment'));
145-
146-
const destroy = () => {
147-
/**
148-
* If the registered DOM element is removed (e.g., due to page navigation),
149-
* make sure to destroy the gesture and animation. This will also remove the event listeners.
150-
* You can re-register them if needed.
151-
*/
152-
registeredTabBarEffect?.destroy();
153-
registeredSegmentEffect?.destroy();
154-
}
155-
```
156-
157-
158158
## Migration Support
159159
160160
For gradual migration, you can selectively apply the iOS26 theme by importing individual components instead of the full theme file.

0 commit comments

Comments
 (0)