rebase
This commit is contained in:
Cecilia Pirotto
parent
d3cfd87895
commit
9c2bde2853
36
README.md
36
README.md
|
|
@ -15,7 +15,7 @@ By [Xmartlabs SRL](http://xmartlabs.com).
|
|||
|
||||
[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>
|
||||
<tr>
|
||||
|
|
@ -27,8 +27,7 @@ PagerTabStrip provides an interactive component that allows the user to navigate
|
|||
|
||||
## 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
|
||||
|
||||
|
|
@ -59,13 +58,13 @@ github "xmartlabs/PagerTabStrip" ~> 1.0
|
|||
|
||||
## 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
|
||||
import PagerTabStrip
|
||||
|
||||
struct PagerView: View {
|
||||
|
||||
|
||||
var body: some View {
|
||||
XLPagerView() {
|
||||
MyView()
|
||||
|
|
@ -87,7 +86,6 @@ struct PagerView: View {
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
<div style="text-align:center">
|
||||
<img src="Example/Media/defaultExample.gif">
|
||||
</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!
|
||||
|
||||
<div style="text-align:center">
|
||||
<img src="Example/Media/addPagerSettings.gif">
|
||||
</div>
|
||||
|
||||
## 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.
|
||||
|
||||
```swift
|
||||
struct TitleNavBarItem: View {
|
||||
let title: String
|
||||
|
||||
|
||||
var body: some View {
|
||||
VStack {
|
||||
Text(title)
|
||||
|
|
@ -159,7 +159,7 @@ struct TitleNavBarItem: View {
|
|||
|
||||
### 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.
|
||||
|
||||
|
|
@ -172,7 +172,7 @@ private class NavItemTheme: ObservableObject {
|
|||
struct TitleNavBarItem: View, PagerTabViewDelegate {
|
||||
let title: String
|
||||
@ObservedObject fileprivate var theme = NavItemTheme()
|
||||
|
||||
|
||||
var body: some View {
|
||||
VStack {
|
||||
Text(title)
|
||||
|
|
@ -182,7 +182,7 @@ struct TitleNavBarItem: View, PagerTabViewDelegate {
|
|||
.frame(maxWidth: .infinity, maxHeight: .infinity)
|
||||
.background(theme.backgroundColor)
|
||||
}
|
||||
|
||||
|
||||
func setState(state: PagerTabViewState) {
|
||||
switch state {
|
||||
case .selected:
|
||||
|
|
@ -204,15 +204,15 @@ struct TitleNavBarItem: View, PagerTabViewDelegate {
|
|||
|
||||
## 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
|
||||
import PagerTabStrip
|
||||
|
||||
struct PagerView: View {
|
||||
|
||||
|
||||
let pagerSettings = PagerSettings(tabItemSpacing: 0, tabItemHeight: 50, indicatorBarHeight: 2, indicatorBarColor: Color.blue)
|
||||
|
||||
|
||||
var body: some View {
|
||||
XLPagerView(selection: 1, pagerSettings: pagerSettings) {
|
||||
MyView(model: myViewModel)
|
||||
|
|
@ -229,13 +229,13 @@ struct PagerView: View {
|
|||
|
||||
## 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
|
||||
|
||||
* If you **want to contribute** please feel free to **submit pull requests**.
|
||||
* 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 **want to contribute** please feel free to **submit pull requests**.
|
||||
- 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**.
|
||||
|
||||
Before contribute check the [CONTRIBUTING](https://github.com/xmartlabs/PagerTabStrip/blob/master/CONTRIBUTING.md) file for more info.
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue