@@ -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
8888https://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-
131155This 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
160160For gradual migration, you can selectively apply the iOS26 theme by importing individual components instead of the full theme file.
0 commit comments