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

update readme

This commit is contained in:
Cecilia Pirotto 2021-07-28 10:50:59 -03:00
parent 9c2bde2853
commit a967024f68
1 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
README.md
View File

@ -58,7 +58,7 @@ github "xmartlabs/PagerTabStrip" ~> 1.0
## Usage ## Usage
Creating a page view is super straightforward, you need to place your custom tab views into a `XLPagerView` view and apply the `pagerTabItem( _: )` modifier to each one to specify the navigation bar tab item. Creating a page view is super straightforward, you need to place your custom tab views into a `PagerTabStripView` view and apply the `pagerTabItem( _: )` modifier to each one to specify the navigation bar tab item.
```swift ```swift
import PagerTabStrip import PagerTabStrip
@ -66,7 +66,7 @@ import PagerTabStrip
struct PagerView: View { struct PagerView: View {
var body: some View { var body: some View {
XLPagerView() { PagerTabStripView() {
MyView() MyView()
.pagerTabItem { .pagerTabItem {
TitleNavBarItem(title: "Tab 1") TitleNavBarItem(title: "Tab 1")
@ -90,11 +90,38 @@ struct PagerView: View {
<img src="Example/Media/defaultExample.gif"> <img src="Example/Media/defaultExample.gif">
</div> </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` through `selection` parameter in the initializer.
### Pager Settings ```swift
import PagerTabStrip
It allows you to customize some aspects of the navigation bar and its indicator bar. The customizable settings are: struct PagerView: View {
@State var selection = 1
var body: some View {
PagerTabStripView() {
MyView(selection: $selection)
.pagerTabItem {
TitleNavBarItem(title: "Tab 1")
}
AnotherView()
.pagerTabItem {
TitleNavBarItem(title: "Tab 2")
}
if User.isLoggedIn {
ProfileView()
.pagerTabItem {
TitleNavBarItem(title: "Profile")
}
}
}
}
}
```
### Customize pager style
You have the ability to customize some aspects of the navigation bar and its indicator bar using the `pagerTabStripViewStyle` modifier. The customizable settings are:
- Spacing between navigation bar items - Spacing between navigation bar items
- Navigation bar height - Navigation bar height
@ -106,10 +133,8 @@ import PagerTabStrip
struct PagerView: View { struct PagerView: View {
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) { PagerTabStripView(selection: 1) {
MyView() MyView()
.pagerTabItem { .pagerTabItem {
TitleNavBarItem(title: "Tab 1") TitleNavBarItem(title: "Tab 1")
@ -125,6 +150,7 @@ struct PagerView: View {
} }
} }
} }
.pagerTabStripViewStyle(PagerTabViewStyle(tabItemSpacing: 0, tabItemHeight: 50, indicatorBarHeight: 2, indicatorBarColor: Color.gray))
} }
} }
``` ```
@ -211,10 +237,8 @@ import PagerTabStrip
struct PagerView: View { struct PagerView: View {
let pagerSettings = PagerSettings(tabItemSpacing: 0, tabItemHeight: 50, indicatorBarHeight: 2, indicatorBarColor: Color.blue)
var body: some View { var body: some View {
XLPagerView(selection: 1, pagerSettings: pagerSettings) { PagerTabStripView(selection: 1) {
MyView(model: myViewModel) MyView(model: myViewModel)
.pagerTabItem { .pagerTabItem {
TitleNavBarItem(title: "Tab 1") TitleNavBarItem(title: "Tab 1")
@ -223,6 +247,7 @@ struct PagerView: View {
model.reload() model.reload()
} }
} }
.pagerTabStripViewStyle(PagerTabViewStyle(tabItemSpacing: 0, tabItemHeight: 50, indicatorBarHeight: 2, indicatorBarColor: Color.gray))
} }
} }
``` ```