tabpanel(args...; kwargs...)

Tab panels are a way of displaying more information using less window real estate.

Examples

Model

julia>

View

julia>

Arguments

1. General

• name::Union{Any} - Panel name

2. State

• disable::Bool - Put component in disabled mode

3. Style

• dark::Bool - Notify the component that the background is a dark color

source

tabpanelgroup(args...; kwargs...)

tabpanelgroup are a way of displaying more information using less window real estate.

Examples

Model

julia> @vars TabPanelModel begin
            gpanel::R{String} = "panel"
       end

View

julia> Html.div(class="q-pa-md", [
          Html.div(class="q-gutter-y-md", style="max-width: 350px", [
             tabpanelgroup(:gpanel, animated=true, swipeable=true, infinite=true,
                   class="bg-purple text-white shadow-2 rounded-borders", [
                   tabpanel("Lorem ipsum dolor sit amet consectetur
                    adipisicing elit.", name="mails", [
                   Html.div("Mails", class="text-h6")
             ]),
            
             tabpanel("Lorem ipsum dolor sit amet consectetur
                  adipisicing elit.", name="alarms", [
                        Html.div("Alarms", class="text-h6")
             ]),

             tabpanel("Lorem ipsum dolor sit amet consectetur
                  adipisicing elit.", name="movies", [
                        Html.div("Movies", class="text-h6")
                  ]),
             ])
          ])
       ])

Arguments

1. Behaviour

• keepalive::Bool - Equivalent to using Vue's native <keep-alive> component on the content
• keepaliveinclude::Union{String,Vector} - Equivalent to using Vue's native include prop for <keep-alive>; Values must be valid Vue component names (e.g. "a,b" "/a|b/" ['a', 'b'])
• keepaliveexclude::Union{String,Vector} - Equivalent to using Vue's native exclude prop for <keep-alive>; Values must be valid Vue component names (e.g. "a,b" "/a|b/" ['a', 'b'])
• keepalivemax::Int - Equivalent to using Vue's native max prop for <keep-alive> (e.g. 2)
• animated::Bool - Enable transitions between panel (also see 'transition-prev' and 'transition-next' props)
• infinite::Bool - Makes component appear as infinite (when reaching last panel, next one will become the first one)
• swipeable::Bool - Enable swipe events (may interfere with content's touch/mouse events)
• vertical::Bool - Default transitions and swipe actions will be on the vertical axis
• transitionprev::String - One of Quasar's embedded transitions (has effect only if 'animated' prop is set) (e.g. "fade" "slide-down")
• transitionnext::String - One of Quasar's embedded transitions (has effect only if 'animated' prop is set) (e.g. "fade" "slide-down")

source