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

rebase

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

36
README.md
View File

@ -15,7 +15,7 @@ By [Xmartlabs SRL](http://xmartlabs.com).
[XLPagerTabStrip](https://github.com/xmartlabs/XLPagerTabStrip) for SwiftUI! [XLPagerTabStrip](https://github.com/xmartlabs/XLPagerTabStrip) for SwiftUI!
PagerTabStrip provides an interactive component that allows the user to navigate between pages using a custom navigation bar or swiping up. This powerful tool is totally built in SwiftUI native components. PagerTabStrip provides an interactive component that allows the user to navigate between pages using a custom navigation bar or swiping up. This powerful tool is totally built in SwiftUI native components.
<table> <table>
<tr> <tr>
@ -27,8 +27,7 @@ PagerTabStrip provides an interactive component that allows the user to navigate
## Examples ## Examples
Follow these 3 steps to run Example project: clone PagerTabStrip repository, open PagerTabStrip workspace and run the *Example* project. Follow these 3 steps to run Example project: clone PagerTabStrip repository, open PagerTabStrip workspace and run the _Example_ project.
## Installation ## Installation
@ -59,13 +58,13 @@ 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 `XLPagerView` view and apply the `pagerTabItem( _: )` modifier to each one to specify the navigation bar tab item.
```swift ```swift
import PagerTabStrip import PagerTabStrip
struct PagerView: View { struct PagerView: View {
var body: some View { var body: some View {
XLPagerView() { XLPagerView() {
MyView() MyView()
@ -87,7 +86,6 @@ struct PagerView: View {
} }
``` ```
<div style="text-align:center"> <div style="text-align:center">
<img src="Example/Media/defaultExample.gif"> <img src="Example/Media/defaultExample.gif">
</div> </div>
@ -130,21 +128,23 @@ 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! 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"> <div style="text-align:center">
<img src="Example/Media/addPagerSettings.gif"> <img src="Example/Media/addPagerSettings.gif">
</div> </div>
## Navigation bar ## Navigation bar
The navigation bar supports custom tab items. You need to specify its appearance creating a struct that implements `View` protocol. The navigation bar supports custom tab items. You need to specify its appearance creating a struct that implements `View` protocol.
For simplicity, we are going to implement a nav bar item with only a title. You can find more examples in the example app. For simplicity, we are going to implement a nav bar item with only a title. You can find more examples in the example app.
```swift ```swift
struct TitleNavBarItem: View { struct TitleNavBarItem: View {
let title: String let title: String
var body: some View { var body: some View {
VStack { VStack {
Text(title) Text(title)
@ -159,7 +159,7 @@ struct TitleNavBarItem: View {
### Customize selected and highlighted items ### Customize selected and highlighted items
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.
@ -172,7 +172,7 @@ private class NavItemTheme: ObservableObject {
struct TitleNavBarItem: View, PagerTabViewDelegate { struct TitleNavBarItem: View, PagerTabViewDelegate {
let title: String let title: String
@ObservedObject fileprivate var theme = NavItemTheme() @ObservedObject fileprivate var theme = NavItemTheme()
var body: some View { var body: some View {
VStack { VStack {
Text(title) Text(title)
@ -182,7 +182,7 @@ struct TitleNavBarItem: View, PagerTabViewDelegate {
.frame(maxWidth: .infinity, maxHeight: .infinity) .frame(maxWidth: .infinity, maxHeight: .infinity)
.background(theme.backgroundColor) .background(theme.backgroundColor)
} }
func setState(state: PagerTabViewState) { func setState(state: PagerTabViewState) {
switch state { switch state {
case .selected: case .selected:
@ -204,15 +204,15 @@ struct TitleNavBarItem: View, PagerTabViewDelegate {
## 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.
```swift ```swift
import PagerTabStrip 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.blue)
var body: some View { var body: some View {
XLPagerView(selection: 1, pagerSettings: pagerSettings) { XLPagerView(selection: 1, pagerSettings: pagerSettings) {
MyView(model: myViewModel) MyView(model: myViewModel)
@ -229,13 +229,13 @@ struct PagerView: View {
## Author ## Author
* [Xmartlabs SRL](https://github.com/xmartlabs) ([@xmartlabs](https://twitter.com/xmartlabs)) - [Xmartlabs SRL](https://github.com/xmartlabs) ([@xmartlabs](https://twitter.com/xmartlabs))
## Getting involved ## Getting involved
* If you **want to contribute** please feel free to **submit pull requests**. - If you **want to contribute** please feel free to **submit pull requests**.
* If you **have a feature request** please **open an issue**. - If you **have a feature request** please **open an issue**.
* If you **found a bug** or **need help** please **check older issues and threads on [StackOverflow](http://stackoverflow.com/questions/tagged/PagerTabStrip) (Tag 'PagerTabStrip') before submitting an issue**. - If you **found a bug** or **need help** please **check older issues and threads on [StackOverflow](http://stackoverflow.com/questions/tagged/PagerTabStrip) (Tag 'PagerTabStrip') before submitting an issue**.
Before contribute check the [CONTRIBUTING](https://github.com/xmartlabs/PagerTabStrip/blob/master/CONTRIBUTING.md) file for more info. Before contribute check the [CONTRIBUTING](https://github.com/xmartlabs/PagerTabStrip/blob/master/CONTRIBUTING.md) file for more info.