Skip to content

Commit 11f3887

Browse files
PaulAndersonSPaulAndersonS
committed
Added TabView user guide
1 parent 4317df5 commit 11f3887

22 files changed

+609
-6
lines changed

‎.gitignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
node_modules
2+
.vscode
3+
yarn.lock
4+
package-lock.json
5+
cireports
6+
package.json
7+
gulpfile.js

‎Jenkinsfile

+89
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
node('content')
2+
{
3+
timestamps
4+
{
5+
6+
def Content="";
7+
env.PATH = "${ProgramFiles}"+"\\Git\\mingw64\\bin;${env.PATH}"
8+
9+
timeout(time: 7200000, unit: 'MILLISECONDS') {
10+
String platform='Xamarin';
11+
try
12+
{
13+
//Clone scm repository in Workspace source directory
14+
stage ('Checkout')
15+
{
16+
dir('Spell-Checker')
17+
{
18+
checkout scm
19+
20+
def branchCommit = '"' + 'https://gitlab.syncfusion.com/api/v4/projects/' + env.projectId + '/merge_requests/' + env.MergeRequestId + '/changes'
21+
String branchCommitDetails = bat returnStdout: true, script: 'curl -s --request GET --header PRIVATE-TOKEN:' + env.BuildAutomation_PrivateToken + " " + branchCommit
22+
23+
def ChangeFiles= branchCommitDetails.split('\n')[2];
24+
ChangeFiles = ChangeFiles.split('"new_path":')
25+
26+
for (int i= 1; i < ChangeFiles.size();i++)
27+
{
28+
def ChangeFile= ChangeFiles[i].split(',')[0].replace('"', '')
29+
Content += env.WORKSPACE + "\\Spell-Checker\\" + ChangeFile + "\r\n";
30+
}
31+
32+
33+
if (Content) {
34+
writeFile file: env.WORKSPACE+"/cireports/content.txt", text: Content
35+
}
36+
else {
37+
writeFile file: env.WORKSPACE+"/cireports/content.txt", text: "There are no filepaths found for this commit."
38+
}
39+
}
40+
}
41+
42+
//Checkout the ug_spellchecker from development Source
43+
checkout([$class: 'GitSCM', branches: [[name: '*/development']], doGenerateSubmoduleConfigurations: false, extensions: [[$class: 'RelativeTargetDirectory', relativeTargetDir: 'ug_spellchecker']], submoduleCfg: [], userRemoteConfigs: [[credentialsId: env.gitlabCredentialId, url: 'https://gitlab.syncfusion.com/content/ug_spellchecker.git']]])
44+
45+
}
46+
47+
48+
49+
50+
catch(Exception e)
51+
{
52+
currentBuild.result = 'FAILURE'
53+
}
54+
55+
if(currentBuild.result != 'FAILURE')
56+
{
57+
stage 'Build Source'
58+
try
59+
{
60+
gitlabCommitStatus("Build")
61+
{
62+
bat 'powershell.exe -ExecutionPolicy ByPass -File '+env.WORKSPACE+"/ug_spellchecker/build.ps1 -Script "+env.WORKSPACE+"/ug_spellchecker/build.cake -Target build -Platform \""+platform+"\" -Targetbranch "+env.gitlabTargetBranch+" -Branch "+'"'+env.gitlabSourceBranch+'"'
63+
}
64+
65+
def files = findFiles(glob: '**/cireports/errorlogs/*.txt')
66+
67+
if(files.size() > 0)
68+
{
69+
currentBuild.result = 'FAILURE'
70+
}
71+
72+
}
73+
catch(Exception e)
74+
{
75+
currentBuild.result = 'FAILURE'
76+
}
77+
}
78+
79+
stage 'Delete Workspace'
80+
81+
def files = findFiles(glob: '**/cireports/spellcheck/*.*')
82+
83+
if(files.size() > 0)
84+
{
85+
archiveArtifacts artifacts: 'cireports/', excludes: null
86+
}
87+
step([$class: 'WsCleanup']) }
88+
}
89+
}

‎MAUI/TabView/Arrange_Tabs_in_Tab_bar.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
layout: post
3+
title: Arrange Tabs in Tab bar customization in .NET MAUI Tab View | Syncfusion
4+
description: Learn here all about Tab View Header Customization support in Syncfusion .NET MAUI Tab View (SfTabView) control and more.
5+
platform: .NET MAUI
6+
control: Tab View
7+
documentation: ug
8+
---
9+
10+
# Arrange Tabs in Tab bar
11+
12+
.NET MAUI Tab View provides two modes that determine how the width of the tab is calculated on the tab bar while it gets populated. The options are `Default` and `SizeToContent` and can be achieved using [TabWidthMode](https://npmci.syncfusion.com/maui/api/development/maui-tabview/api/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabWidthMode) property.
13+
14+
## Fixed bar
15+
16+
The width of the tab is splitted equally based on the available control width. This enables a fixed tab bar that won’t allow tab scrolling even it contains any number of tabs. This can be achieved by setting the `TabWidthMode` as `Default`.
17+
18+
N> This mode is recommended when the tab count is not more than 4. More tabs in this mode may appear with the text being trimmed.
19+
20+
![Tab Width Mode Default](images/tab-view/Tab-Width-Mode-Default.png)
21+
22+
## Based on the text size
23+
24+
The width of a tab is set to fit the text or image that it contains by setting the `TabWidthMode` as `Default`. Scroll is enabled in this mode to access the items that are outside the visible area.
25+
26+
![Tab Width Mode Size to fit](images/tab-view/Tab-Width-Mode-SizeToFit.png)

‎MAUI/TabView/Configure Tab Item.md

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
layout: post
3+
title: Display Type in .NET MAUI Tab View control | Syncfusion
4+
description: Learn here all about color and font customization in Syncfusion .NET MAUI Tab View (SfTabView) control.
5+
platform: .NET MAUI
6+
control: Tab View
7+
documentation: ug
8+
---
9+
# Configure and customize the appearance of Tab Item
10+
11+
A tab item consists of the following elements that can be customized.
12+
13+
* **Header** - Holds the text of the tab item that is displayed in the tab bar.
14+
15+
* **ImageSource** - The image to be displayed in the tabbar representing the tab item.
16+
17+
* **Content** - The assigned view will get displayed in the main area of the Tab View.
18+
19+
* **ImagePosition** - Determines the Image text relation of the tab item.
20+
21+
* **TextColor** - The text color of the tab item displayed in the tab bar.
22+
23+
* **FontFamily** - Font family of the tab item text displayed in the tab bar.
24+
25+
* **FontAttribute** - The font style of the text of each tab item in the tab bar.
26+
27+
* **FontSize** - The size of the text of each tab item in the tab bar.
28+
29+
* **IsSelected** - Indicates whether the tab item is active or not.
30+
31+
## Tab Image Position
32+
33+
The .NET MAUI Tab View provides four options that determine how the image of the tab aligns relative to the text. The options are left, top, right and bottom. It can be achieved using the [ImagePosition](https://npmci.syncfusion.com/maui/api/development/maui-tabview/) property of [SfTabItem](https://npmci.syncfusion.com/maui/api/development/maui-tabview/api/Syncfusion.Maui.TabView.SfTabItem.html#Syncfusion_Maui_TabView_SfTabItem_ImagePosition) of type TabImagePosition.
34+
35+
N> Each tab item can be set with different image positions. Visual State Manager can be used to apply same value to all tabs.
36+
37+
### Top
38+
39+
The image will be placed above the text vertically.
40+
41+
![Tab Image Position Top](images/tab-view/Image-Position-Top.png)
42+
43+
### Bottom
44+
45+
The image will be placed below the text vertically.
46+
47+
![Tab Image Position Bottom](images/tab-view/Image-Position-Bottom.png)
48+
49+
### Left
50+
51+
The image will be placed before the text horizontally.
52+
53+
### Right
54+
55+
The image will be placed to the right side of the text horizontally.

‎MAUI/TabView/Customize_Tab_bar.md

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
layout: post
3+
title: customize the tab bar in .NET MAUI Tab View control | Syncfusion
4+
description: Learn here all about Custom Header support in Syncfusion .NET MAUI Tab View(SfTabView) control and more.
5+
platform: .NET MAUI
6+
control: Tab View
7+
documentation: ug
8+
---
9+
10+
# Customize the tab bar in .NET MAUI Tab View(SfTabView)
11+
12+
## Tab Bar Placement
13+
14+
The .NET MAUI Tab View provides two options that determine how the tab bar aligns relative to the tab content. The options are top and bottom. It can be done by using [TabBarPlacement](https://npmci.syncfusion.com/maui/api/development/maui-tabview/api/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_TabBarPlacement) property.
15+
16+
### Top
17+
18+
Tab bar will be placed above the content region of the Tab View control.
19+
20+
![Tab Bar Placement Top](images/tab-view/Tab-bar-Placement-Top.png)
21+
22+
### Bottom
23+
24+
Tab bar will be placed below the content region of the Tab View control.
25+
26+
![Tab Bar Placement Bottom](images/tab-view/Tab-bar-Placement-Bottom.png)
27+
28+
## Customize the tab bar height
29+
30+
The height of the tab bar can be customized by setting the `TabBarHeight` property. The default height is 48.
31+
32+
N> It is recommended to set the TabBarHeight as 72 while displaying image and text with ImagePosition as either Top or Bottom.
33+
34+
## Customize the background
35+
36+
The tab bar background can be customized using the `TabBarBackground` property which is of type `Brush`.
37+
38+
## Indicator Placement
39+
40+
The .NET MAUI Tab View provides three options that determine how selection indicator aligns relative to the tab header item. The options are top, bottom, and fill. This can be done by setting the [IndicatorPlacement](https://npmci.syncfusion.com/maui/api/development/maui-tabview/api/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorPlacement) property of SfTabView.
41+
42+
### Top
43+
44+
The indicator will be placed at the top of the selected tab.
45+
46+
![Tab Image Position Top.](images/tab-view/Selection-Indicator-placement-Top.png)
47+
48+
### Bottom
49+
50+
The indicator will be placed at the bottom of the selected tab.
51+
52+
![Tab Image Position Bottom.](images/tab-view/Selection-Indicator-placement-Bottom.png)
53+
54+
### Fill
55+
56+
The indicator will fill the selected tab.
57+
58+
![Tab Image Position Fill.](images/tab-view/Selection-Indicator-placement-Fill.png)
59+
60+
## Indicator Background
61+
62+
The background of the indicator can be customized using [IndicatorBackground](https://npmci.syncfusion.com/maui/api/development/maui-tabview/api/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_IndicatorBackground) property of SfTabView.

‎MAUI/TabView/Getting-Started.md

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
---
2+
layout: post
3+
title: Getting Started with .NET MAUI Tab View control | Syncfusion
4+
description: Learn here about getting started with Syncfusion .NET MAUI Tab View (SfTabView) control, its elements and more.
5+
platform: .NET MAUI
6+
control: Tab View
7+
documentation: ug
8+
---
9+
10+
# Getting Started with .NET MAUI Tab View (SfTabView)
11+
12+
This section explains the steps required to configure the .NET MAUI Tab View control and customize its elements.
13+
14+
## Adding SfTabView reference
15+
16+
Syncfusion .NET MAUI components are available in [nuget.org](https://www.nuget.org/). To add SfTabView to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.TabView] and then install it.
17+
18+
## Create a simple Tab View
19+
20+
This section explains how to create a Tab View and configure it. The control can be configured entirely in C# code or by using XAML markup. The following screenshot illustrates the output of Tab View on iOS, Android and MacCatalyst.
21+
22+
![TabViewImage](images/TabView.png)
23+
24+
### Creating the project
25+
26+
Create a new .NET MAUI application in Visual Studio.
27+
28+
### Adding SfTabView control
29+
30+
Add the nuget to the project as discussed in the above reference section.
31+
32+
Add the namespace as shown in the following code.
33+
34+
{% tabs %}
35+
36+
{% highlight xaml %}
37+
38+
xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView"
39+
40+
{% endhighlight %}
41+
42+
{% highlight C# %}
43+
44+
using Syncfusion.Maui.TabView;
45+
46+
{% endhighlight %}
47+
48+
{% endtabs %}
49+
50+
## Populating tab items
51+
52+
Tab items can be added to the Tab View through the [Items](https://npmci.syncfusion.com/maui/api/development/maui-tabview/api/Syncfusion.Maui.TabView.SfTabView.html#Syncfusion_Maui_TabView_SfTabView_Items) property of [SfTabView](https://npmci.syncfusion.com/maui/api/development/maui-tabview/api/Syncfusion.Maui.TabView.SfTabView.html), which holds the collection of [SfTabItem](https://npmci.syncfusion.com/maui/api/development/maui-tabview/api/Syncfusion.Maui.TabView.SfTabItem.html) through [TabItemsCollection](https://npmci.syncfusion.com/maui/api/development/maui-tabview/api/Syncfusion.Maui.TabView.TabItemCollection.html).
53+

‎MAUI/TabView/Overview.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
layout: post
3+
title: About .NET MAUI TabView control | Syncfusion
4+
description: Learn here all about introduction of Syncfusion .NET MAUI Tab View (SfTabView) control, its elements and more.
5+
platform: .NET MAUI
6+
control: Tab View
7+
documentation: ug
8+
---
9+
10+
# MAUI Tab View (SfTabView) Overview
11+
12+
The advanced .NET Multi-platform App UI (MAUI) Tab View is a simple and intuitive interface for tab navigation in mobile and desktop applications, where users can explore and switch between different tabs.
13+
14+
## Key features
15+
16+
* The .NET MAUI TabView can be used to optimize screen space usage when the application requires complex and huge layouts.
17+
18+
* The .NET MAUI TabView contains a set of tab items that share the same space.
19+
20+
* At a time, only one .NET MAUI tab item will be visible and accessible to users. Users have to tap the tab of the hidden tab item to make it visible on the screen.
21+
22+
![TabViewImage MAUI](images/TabView.png)

‎MAUI/TabView/images/Image-Position-Bottom.png

18.9 KB
Loading

‎MAUI/TabView/images/Image-Position-Top.png

19 KB
Loading

‎MAUI/TabView/images/Nested_Tab.png

41.2 KB
Loading

‎MAUI/TabView/images/Selection-Indicator-placement-Bottom.png

7.49 KB
Loading

‎MAUI/TabView/images/Selection-Indicator-placement-Fill.png

8.27 KB
Loading

‎MAUI/TabView/images/Selection-Indicator-placement-Top.png

8.87 KB
Loading

‎MAUI/TabView/images/Tab-Width-Mode-Default.png

7.49 KB
Loading

‎MAUI/TabView/images/Tab-Width-Mode-SizeToFit.png

21.3 KB
Loading

‎MAUI/TabView/images/Tab-bar-Placement-Bottom.png

10.2 KB
Loading

‎MAUI/TabView/images/Tab-bar-placement-Top.png

10.1 KB
Loading

‎MAUI/TabView/images/Tab-bar-with-customized-font-and-colors.png

3.79 KB
Loading

‎MAUI/TabView/images/TabView.png

53.7 KB
Loading

0 commit comments

Comments
 (0)