Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sidebar Example #16

Open
JulesBlubb opened this issue Mar 2, 2021 · 7 comments
Open

Sidebar Example #16

JulesBlubb opened this issue Mar 2, 2021 · 7 comments

Comments

@JulesBlubb
Copy link

Hi,
I really like Stipple and I want to use it with StippleUI to create an app with a sidebar which includes different dashboards, but I am not sure which elements to use for a sidebar. I have tried to use drawer, but nothing showed up.
Which elements should I use to create a sidebar?

Thanks!

@JulesBlubb JulesBlubb changed the title Drawer Example Sidebar Example Mar 2, 2021
@essenciary
Copy link
Member

Thank you - I'm not sure a sidebar would need to be a component, but rather just a section on the page (a div). What would it be its behaviour?

StippleUI uses Quasar - any of these components would match the sidebar? https://quasar.dev/vue-components

@hhaensel
Copy link
Member

hhaensel commented Mar 3, 2021

Would q-drawer come close to what you want?

@JulesBlubb
Copy link
Author

issue_example

I need something like this, where I can choose different contents on the left like in a sidebar. I tried drawer but could not receive a running example.

@JulesBlubb
Copy link
Author

JulesBlubb commented Mar 9, 2021

@hhaensel I try to get the q-drawer example on https://quasar.dev/layout/drawer#Example--Seamless-menu to work. My example code is showing a menu button but the sidebar is not shown when clicking on the button. I get the error:

[Vue warn]: Property or method "drawer" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

using Genie, Genie.Renderer.Html, Genie.Router

using Stipple, Stipple.Elements
using StippleUI, StippleUI.Table, StippleUI.Range, StippleUI.BigNumber, StippleUI.Heading, StippleUI.Dashboard,
StippleUI.Drawer, StippleUI.Layout
using StippleCharts, StippleCharts.Charts

import StippleUI.Range: range
import Genie.Renderer.Html: select

using DataFrames


data = DataFrame(Costs = [44, 55, 13, 43, 22])

Base.@kwdef mutable struct Dashboard <: ReactiveModel
    plot_options::PlotOptions = PlotOptions(chart_type=:bar, labels= ["Team A", "Team B", "Team C", "Team D", "Team E"])
    barchart::R{Vector{PlotSeries}} = [PlotSeries("name", PlotData(data.Costs))]
end

# UI
Stipple.register_components(Dashboard, StippleCharts.COMPONENTS)
const model = Stipple.init(Dashboard())

function ui()
    dashboard(vm(model), [
        StippleUI.Layout.layout([
            header([
                    btn("",icon="menu", @click("drawer = !drawer"))
                    title([
                        "Example App"
                    ])
            ])

            drawer(side="left", v_model="drawer", [
                item([
                    item_section([
                        "Inbox"
                    ])
                ])
            ])
            h3("Example Plot")
            row(cell(class="st-module", plot(@data(:barchart); options=:plot_options)))
        ])
    ])
end

route("/") do
    ui() |> html
end

up(rand((8000:9000)), open_browser=true)

What am I doing wrong?
Thank you! :)

@sgaseretto
Copy link

@JulesBlubb have you figured out how to implement the sidebar? I'm looking for this too.

@hhaensel
Copy link
Member

hhaensel commented Feb 7, 2022

This should do it:

using Stipple, StippleUI, StippleCharts

using DataFrames

data = DataFrame(Costs = [44, 55, 13, 43, 22])

@reactive! mutable struct Example <: ReactiveModel
    plot_options::R{PlotOptions} = PlotOptions(
        chart_type = :bar, 
        labels = ["Team A", "Team B", "Team C", "Team D", "Team E"],
        yaxis_max = 60,
        yaxis_min = 0,
        ), READONLY
    barchart::R{Vector{PlotSeries}} = [PlotSeries("name", PlotData(data.Costs))], READONLY

    drawer::R{Bool} = false
end

Stipple.register_components(Example, StippleCharts.COMPONENTS)
model = Stipple.init(Example)

function handlers(model)
    on(model.isready) do ready
        ready || return
        notify(model.plot_options)        
    end
    model
end

function ui(model)
    dashboard(model, [
        StippleUI.Layouts.layout([
            header([
                    btn("",icon="menu", @click("drawer = ! drawer"))
                    title("Example App")
            ])

            drawer(side="left", v__model="drawer", [
                list([
                    btn("", style = "width: 30px;",icon="menu", @click("drawer = ! drawer"))
                    item([
                        item_section(icon("inbox"), :avatar)
                        item_section("Inbox")
                    ], :clickable, :v__ripple)
                    item([
                        item_section(icon("outbox"), :avatar)
                        item_section("Outbox")
                    ])
                ])
            ])
            h3("Example Plot")
            row(StippleCharts.plot(:barchart, options = :plot_options))
        ])
    ])
end

route("/") do
    model |> handlers |> ui |> html
end

up(8000, open_browser = true)

@sgaseretto
Copy link

Thanks for the fast response @hhaensel ! I'll give it a try as soon as I finish some pending issues I have

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants