Swift component for food app oder or delivery swiftui Auto scrollable header menu Tab panel Tab menu Tab navigation Segment navigation UI for food app ios, macos etc Food app menu
APACHE-2.0 License
There are three required interfaces that have to be defined
protocol | description |
---|---|
IMenuItem | enum - menu categories |
IListModel | struct - list item model |
IItemTpl | struct - item view template |
Define enum that conforming to IMenuItem
. Protocol from package d3_menu_bar
It is categories for the menu and list section headers
import d3_menu_bar
enum MenuItems: String, IMenuItem {
case breakfast = "Breakfast"
case lunch = "Lunch"
case dessert = "Dessert"
}
Define model that conforms to IListModel
.
Add fields that you need in the List line representation
struct ListModel : IListModel{
let id = UUID()
let category: MenuItems
let title : String
}
Define view for 2. Model that conforms to IItemTpl
.
All representation of the template is up to you. It was included in component's API on purpose to let easily control List representation via configuration.
struct ItemTpl: IItemTpl {
let item: ListModel
var body: some View {
VStack{
Text(item.title)
Divider()
}.padding()
}
}
items
- array of datacontent
- tpl for an item representation let data: [ListModel] = //Pass array of data
ScrollableMenuList(items: data, content: { ItemTpl(item: $0) })
menuBarStrategy
- default strategy for the item menu width allocation is auto
Size strategy | Description |
---|---|
fit | Allocate all affordable space not scrollable |
auto | Auto size according the content |
flex(CGFloat) | Set up minimal width |
menuBarColor
- default value is .blue
menuBarStyle
- default style is square
Style | Description |
---|---|
round | rounded corners |
square | squared corners |
Take a look on the example preview in ScrollableMenuListExample.swift or create a project, add the package and put ScrollableMenuListExample() in ContentView()