You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

181 lines
4.8 KiB

package appbar
import (
"image/color"
"gioui.org/layout"
"gioui.org/widget"
"gioui.org/widget/material"
"gioui.org/x/component"
alo "gioui.org/example/component/applayout"
"gioui.org/example/component/icon"
page "gioui.org/example/component/pages"
)
type (
C = layout.Context
D = layout.Dimensions
)
// Page holds the state for a page demonstrating the features of
// the AppBar component.
type Page struct {
heartBtn, plusBtn, contextBtn widget.Clickable
exampleOverflowState, red, green, blue widget.Clickable
bottomBar, customNavIcon widget.Bool
favorited bool
widget.List
*page.Router
}
// New constructs a Page with the provided router.
func New(router *page.Router) *Page {
return &Page{
Router: router,
}
}
var _ page.Page = &Page{}
func (p *Page) Actions() []component.AppBarAction {
return []component.AppBarAction{
{
OverflowAction: component.OverflowAction{
Name: "Favorite",
Tag: &p.heartBtn,
},
Layout: func(gtx layout.Context, bg, fg color.NRGBA) layout.Dimensions {
if p.heartBtn.Clicked() {
p.favorited = !p.favorited
}
btn := component.SimpleIconButton(bg, fg, &p.heartBtn, icon.HeartIcon)
btn.Background = bg
if p.favorited {
btn.Color = color.NRGBA{R: 200, A: 255}
} else {
btn.Color = fg
}
return btn.Layout(gtx)
},
},
component.SimpleIconAction(&p.plusBtn, icon.PlusIcon,
component.OverflowAction{
Name: "Create",
Tag: &p.plusBtn,
},
),
}
}
func (p *Page) Overflow() []component.OverflowAction {
return []component.OverflowAction{
{
Name: "Example 1",
Tag: &p.exampleOverflowState,
},
{
Name: "Example 2",
Tag: &p.exampleOverflowState,
},
}
}
func (p *Page) NavItem() component.NavItem {
return component.NavItem{
Name: "App Bar Features",
Icon: icon.HomeIcon,
}
}
const (
settingNameColumnWidth = .3
settingDetailsColumnWidth = 1 - settingNameColumnWidth
)
func (p *Page) Layout(gtx C, th *material.Theme) D {
p.List.Axis = layout.Vertical
return material.List(th, &p.List).Layout(gtx, 1, func(gtx C, _ int) D {
return layout.Flex{
Alignment: layout.Middle,
Axis: layout.Vertical,
}.Layout(gtx,
layout.Rigid(func(gtx C) D {
return alo.DefaultInset.Layout(gtx, material.Body1(th, `The app bar widget provides a consistent interface element for triggering navigation and page-specific actions.
The controls below allow you to see the various features available in our App Bar implementation.`).Layout)
}),
layout.Rigid(func(gtx C) D {
return alo.DetailRow{}.Layout(gtx, material.Body1(th, "Contextual App Bar").Layout, func(gtx C) D {
if p.contextBtn.Clicked() {
p.Router.AppBar.SetContextualActions(
[]component.AppBarAction{
component.SimpleIconAction(&p.red, icon.HeartIcon,
component.OverflowAction{
Name: "House",
Tag: &p.red,
},
),
},
[]component.OverflowAction{
{
Name: "foo",
Tag: &p.blue,
},
{
Name: "bar",
Tag: &p.green,
},
},
)
p.Router.AppBar.ToggleContextual(gtx.Now, "Contextual Title")
}
return material.Button(th, &p.contextBtn, "Trigger").Layout(gtx)
})
}),
layout.Rigid(func(gtx C) D {
return alo.DetailRow{}.Layout(gtx,
material.Body1(th, "Bottom App Bar").Layout,
func(gtx C) D {
if p.bottomBar.Changed() {
if p.bottomBar.Value {
p.Router.ModalNavDrawer.Anchor = component.Bottom
p.Router.AppBar.Anchor = component.Bottom
} else {
p.Router.ModalNavDrawer.Anchor = component.Top
p.Router.AppBar.Anchor = component.Top
}
p.Router.BottomBar = p.bottomBar.Value
}
return material.Switch(th, &p.bottomBar, "Use Bottom App Bar").Layout(gtx)
})
}),
layout.Rigid(func(gtx C) D {
return alo.DetailRow{}.Layout(gtx,
material.Body1(th, "Custom Navigation Icon").Layout,
func(gtx C) D {
if p.customNavIcon.Changed() {
if p.customNavIcon.Value {
p.Router.AppBar.NavigationIcon = icon.HomeIcon
} else {
p.Router.AppBar.NavigationIcon = icon.MenuIcon
}
}
return material.Switch(th, &p.customNavIcon, "Use Custom Navigation Icon").Layout(gtx)
})
}),
layout.Rigid(func(gtx C) D {
return alo.DetailRow{}.Layout(gtx,
material.Body1(th, "Animated Resize").Layout,
material.Body2(th, "Resize the width of your screen to see app bar actions collapse into or emerge from the overflow menu (as size permits).").Layout,
)
}),
layout.Rigid(func(gtx C) D {
return alo.DetailRow{}.Layout(gtx,
material.Body1(th, "Custom Action Buttons").Layout,
material.Body2(th, "Click the heart action to see custom button behavior.").Layout)
}),
)
})
}