adospace / reactorui-maui

MauiReactor is a MVU UI framework built on top of .NET MAUI
MIT License
552 stars 45 forks source link

Toolbar Items #214

Closed nabond251 closed 4 months ago

nabond251 commented 4 months ago

I see there is a toolbar items component, but I'm coming up short being able to use it successfully in my apps. Also not finding any documentation or samples that use it. If there is any, could you point me to it - if not, could you add some please?

nabond251 commented 4 months ago

Ok, did a repo search for "toolbar" and found an example in TestBug187 _2.cs. Looks like I needed to wrap my ContentPage in a NavigationPage to get the top bar in the first place. So slightly modifying the template app like this seems to work:

using MauiReactor;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace MRSA.Pages
{
    internal class MainPageState
    {
        public int Counter { get; set; }
    }

    internal class MainPage : Component<MainPageState>
    {
        public override VisualNode Render()
            => NavigationPage(
                ContentPage(
                    ToolbarItem("Xyzzy"),
                    ScrollView(
                        VStack(
                            Image("dotnet_bot.png")
                                .HeightRequest(200)
                                .HCenter()
                                .Set(MauiControls.SemanticProperties.DescriptionProperty, "Cute dot net bot waving hi to you!"),

                            Label("Hello, World!")
                                .FontSize(32)
                                .HCenter(),

                            Label("Welcome to MauiReactor: MAUI with superpowers!")
                                .FontSize(18)
                                .HCenter(),

                            Button(State.Counter == 0 ? "Click me" : $"Clicked {State.Counter} times!")
                                .OnClicked(() => SetState(s => s.Counter++))
                                .HCenter()
                    )
                    .VCenter()
                    .Spacing(25)
                    .Padding(30, 0)
                )
            )
        );
    }
}