- Auto scrollable up menu while navigating the list up and down
- Navigate to any section from up menu
- Smart detection the active position in the user's field of view
- The menu and category color intensity automatically adjusts depending on color scheme You don't need to set color for every scheme
- Various strategies for the item menu width allocation
- Setting custom colors for the menu
- Customize menu item style [round or square]
- Multiplatform, iOS and macOS support
- Dark and light scheme support
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()
- You need to have Xcode 13 installed in order to have access to Documentation Compiler (DocC)
- Go to Product > Build Documentation or ⌃⇧⌘ D