1. Scaffold

juice --new MyApp
cd MyApp

2. Define state

lib/state/app_state.go

package state

type MainAppState struct {
    SelectedTab string
}

func NewMainAppState() *MainAppState {
    return &MainAppState{SelectedTab: "feed"}
}

func (s *MainAppState) SetSelectedTab(tab string) {
    s.SelectedTab = tab
}

3. Build the UI

lib/views/home_view.go

package views

import (
    "myapp/lib/state"
    "github.com/sweet-juice/sweetjuice/plugins/mu3"
    "github.com/sweet-juice/sweetjuice/ui"
    "github.com/sweet-juice/sweetjuice/ui/style"
)

type HomeView struct {
    State *state.MainAppState
}

func (v *HomeView) Render() ui.Node {
    return ui.Root(
        ui.VStack(
            mu3.TopAppBar("Feed", "menu"),
            ui.Spacer().Height(12),
            mu3.SearchBar("Search...", false),
            ui.Spacer().Height(16),
            mu3.Tabs([]string{"For You", "Saved", "Archived"}, nil, v.State.SelectedTab).
                OnChanged(v.State.SetSelectedTab),
            ui.Spacer().Height(16),
            v.contentForTab(),
            ui.Spacer().Height(24),
            mu3.NavigationBar([]map[string]string{
                {"label": "Home", "icon": "home"},
                {"label": "Explore", "icon": "explore"},
                {"label": "Profile", "icon": "person"},
            }),
        ),
        "#FFFBFE",
    )
}

func (v *HomeView) contentForTab() ui.Node {
    switch v.State.SelectedTab {
    case "saved":
        return ui.VStack(
            mu3.Card("Saved", "Item 1").OnClick(func() { println("saved") }),
            ui.Spacer().Height(12),
            mu3.Card("Saved", "Item 2").OnClick(func() { println("saved") }),
        )
    default:
        return ui.VStack(
            mu3.Card("Feed", "Welcome to Sweet Juice").OnClick(func() { println("feed") }),
            ui.Spacer().Height(12),
            mu3.Card("Feed", "Material You is active").OnClick(func() { println("feed") }),
        )
    }
}

4. Bootstrap

start.go

package sweetjuice

import (
    "myapp/lib/state"
    "myapp/lib/views"
    "github.com/sweet-juice/sweetjuice/app"
)

func StartApplication() string {
    mainState := state.NewMainAppState()
    root := &views.HomeView{State: mainState}
    app.Run(root)
    return `{"status":"started"}`
}

5. Run

juice --run android

Styling components

Any mu3 widget accepts .Style() with a style struct:

mu3.Card("Title", "Subtitle").
    Style(style.View{
        CornerRadius: 8,
        Padding:      16,
    }).
    OnClick(func() { println("clicked") })

Available style structs: style.View, style.Text, style.Button, style.TextButton, style.OutlinedButton, style.TonalButton, style.ElevatedButton, style.IconButton, style.FabStyle, style.SegmentedButton, style.ButtonGroup, style.Image, style.Video, style.TopAppBar, style.BottomAppBar, style.NavigationBar, style.NavigationRail, style.SearchBar, style.Tabs, style.Toolbar.

Events

mu3.Card("Tap me").
    OnClick(func() { println("clicked") }).
    OnLongPress(func() { println("long pressed") })