-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Spec] TabView #7
Labels
t/enhancement ☀️
New feature or request
Comments
Moved to Xamarin.Forms. |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
TabView
We can have tabs using Shell. However, what happens if we want to have nested tabs within a specific section (Example: Grid)?, what if we want to fully customize each tab?. In these cases, we would need a Custom Renderer so far...
The TabView is a way to display a set of tabs and their respective content. TabView is useful for displaying several content while giving a user the capability to customize mostly everything.
NOTE: TabView is a cross-platform view that takes over when native tabs hit their limits, such as positioning with layouts, styling, and non-uniform styling like a raised button.
API
Next, a list with the TabView properties, events and visualstates.
Properties
TabView Properties
TabViewItem Properties
Events
TabView Events
TabViewItem Events
VisualStates
The Visual State Manager (VSM) provides a structured way to make visual changes to the user interface from code.
The VSM introduces the concept of visual states. TabView can have several different visual appearances depending on its underlying state.
TabView have four specific VisualStates:
Scenarios
Let's see some samples covering common scenarios.
Basic Tabs
Let's see a basic example:
TabItemsSource
Using TabItemsSource (dynamic tabs):
Custom Tabs
The appearance of each tab can be customized:
Cyclical Tabs
Do you want to navigate between the tabs cyclically?
Lazy Loading
Lazy tab loading:
Tab Transitions and TabViewItem animations
Can use Maui animations to customize the transition between each tab, animate the tab when appears or disappears, or even animate the badge when appears or disappears.
Using VisualStates
Can use different visual states to customize the current tab, the next tab, etc.
Create Tabs using C#
You can use XAML or C# to create the UI in Maui. Let's see how we would create tabs using C#.
Using Styles
Can customize the appearance of the tab content, tab strip, tab item, etc. using XAML styles or CSS.
Using XAML:
Using CSS:
Difficulty : Medium
The text was updated successfully, but these errors were encountered: