-
Notifications
You must be signed in to change notification settings - Fork 15
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
Comments
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 |
Would q-drawer come close to what you want? |
@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? |
@JulesBlubb have you figured out how to implement the sidebar? I'm looking for this too. |
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) |
Thanks for the fast response @hhaensel ! I'll give it a try as soon as I finish some pending issues I have |
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!
The text was updated successfully, but these errors were encountered: