Comments (6)
One problem with the attribute directive method is that you would have to add it to every ion-header in the whole app, which wouldn't be hard but it's not ideal. On the plus side, you could add it to any element you wanted this fade effect on.
Another method would be to only slide the ion-content block instead of the whole nav page and have everything else at the top level of the page's dom, like ion-header and ion-footer or anything else, do an opacity transition. I know you currently use a div that is super wide to hold all the pages so it would require some re-working of that.
Ionic already does this effect pretty well with the back swipe from one page to another, perhaps that should be how it works for tabs too.
from ionic-super-tabs.
Good ideas.
When I designed this module, my intention was to use it as demonstrated in many Google apps and the Material guidelines here: https://material.io/guidelines/components/tabs.html#tabs-types-of-tabs
As you can see in the guidelines and in some apps, swipeable tabs only change the content of the page, not the header. The page title stays the same across all the tabs since all the tabs belong to the same page/category/...etc.
The ideas you mentioned are worth investigating, it's nice to cover more use cases. Ionic Framework's iOS header animation is possible, but that means there will be more things animating as you swipe through the tabs.
I already find the current animations slow in this module. So, until I figure out a way to increase their performance, I think it's better to not add more animations.
from ionic-super-tabs.
Thanks. I can make it work as is for now, or maybe move some of the icons down into the page and move the header up out of the tabs.
from ionic-super-tabs.
would be very useful. also how to make the tabs below the header? like shown in the material design specs?
from ionic-super-tabs.
@ihadeed any idea when this is coming?
from ionic-super-tabs.
Indeed a great plugin and saves a lot of time.
Is it possible to achieve like this?? Check here in scrolling section-> https://material.io/design/components/tabs.html#behavior
You may check while scrolling the content only the HEADER hides and the TABS sticks to the top. Is it possible to achieve the same?? I also tried to use a directive header scroller but not working in super-tabs page.
The code I brought from the below link
ionic-team/ionic-framework#1381 (comment)
from ionic-super-tabs.
Related Issues (20)
- tab indicator is not located correctly in firefox when padding exists
- ReIndexTabs undefined issue renders the tab blank HOT 2
- Super Tabs Toolbar pushed up when keyboard is activated HOT 1
- Need help on Super tab containing Table with horizontal scrollbar and fixed column HOT 2
- How to place super-tabs inside ion-toolbar HOT 2
- Framework Delegate is Missing Zone <root> (ion-nav root component not showing in browser) HOT 2
- When i prefetched new tabs list and concat it to the current tabs list the tab toolbar scrolls back to the last selected tab.
- How to change color from indicator and icon on the app?
- in 7.0.8 Version - Its throwing error as Can not read Property 'TransitionDuration' of Undefined. HOT 1
- Angular 10 || 11 and Ionic 5: Generic type 'ModuleWithProviders<T>' requires 1 type argument(s) error HOT 1
- Change tab programmatically. activeTabIndex not work.
- There isn't any props to disable ion-ripple-effect HOT 6
- Lazy loadingn not working - unloadWhenInvisible doing nothing HOT 2
- Tab content become empty when change tabs. Happens only on iOS 14.5 upwards
- super-tab-button animation slides from top on load
- Super Tabs - how to pass page to [root] correctly? HOT 1
- Having two supertabs pages, how to go from first page to second page programmatically?
- ion-refresher doesn't work in multiple tabs
- *ngIf and *ngOf directives not working
- not working on latest ionic v7.1.1 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ionic-super-tabs.