dnrops
/
PagerTabStripView
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add more gif examples

This commit is contained in:
Cecilia Pirotto 2021-07-27 17:17:15 -03:00
parent 33ef4457ea
commit d3cfd87895
4 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Example/Media/addPagerSettings.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
Example/Media/defaultExample.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 940 KiB

BIN
Example/Media/setStateCallback.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

19
README.md
View File

@ -87,6 +87,11 @@ struct PagerView: View {
} }
``` ```
<div style="text-align:center">
<img src="Example/Media/defaultExample.gif">
</div>
You can specify the index of the initial page shown in the `XLPagerView` initializer and different settings through the PagerSettings. You can specify the index of the initial page shown in the `XLPagerView` initializer and different settings through the PagerSettings.
### Pager Settings ### Pager Settings
@ -103,7 +108,7 @@ import PagerTabStrip
struct PagerView: View { struct PagerView: View {
let pagerSettings = PagerSettings(tabItemSpacing: 0, tabItemHeight: 50, indicatorBarHeight: 2, indicatorBarColor: Color.blue) let pagerSettings = PagerSettings(tabItemSpacing: 0, tabItemHeight: 50, indicatorBarHeight: 2, indicatorBarColor: Color.gray)
var body: some View { var body: some View {
XLPagerView(selection: 1, pagerSettings: pagerSettings) { XLPagerView(selection: 1, pagerSettings: pagerSettings) {
@ -125,6 +130,10 @@ struct PagerView: View {
} }
} }
``` ```
In this example, we add some settings like the tab bar height, indicator bar color and indicator bar height. Let's watch how it looks!
<div style="text-align:center">
<img src="Example/Media/addPagerSettings.gif">
</div>
## Navigation bar ## Navigation bar
@ -139,7 +148,7 @@ struct TitleNavBarItem: View {
var body: some View { var body: some View {
VStack { VStack {
Text(title) Text(title)
.foregroundColor(Color.blue) .foregroundColor(Color.gray)
.font(.subheadline) .font(.subheadline)
} }
.frame(maxWidth: .infinity, maxHeight: .infinity) .frame(maxWidth: .infinity, maxHeight: .infinity)
@ -152,8 +161,6 @@ struct TitleNavBarItem: View {
You can define the style of your nav items when they are selected or highlighted by implementing `PagerTabViewDelegate` protocol in your nav item view. You can define the style of your nav items when they are selected or highlighted by implementing `PagerTabViewDelegate` protocol in your nav item view.
In this example we are going to change the text and background color when the tab is highlighted and selected. In this example we are going to change the text and background color when the tab is highlighted and selected.
```swift ```swift
@ -191,6 +198,10 @@ struct TitleNavBarItem: View, PagerTabViewDelegate {
} }
``` ```
<div style="text-align:center">
<img src="Example/Media/setStateCallback.gif">
</div>
## onPageAppear modifier ## onPageAppear modifier
You can use this callback if you want to trigger some action when the user switches to this page, either by scrolling to it or tapping its tab. This modifier is applied to a specific page. You can use this callback if you want to trigger some action when the user switches to this page, either by scrolling to it or tapping its tab. This modifier is applied to a specific page.