Badge
badge("1.0.0+", color = "primary")
<q-badge color="primary" label="1.0.0+"></q-badge>Docstring
badge()The `badge` component allows you to create a small badge for adding information like contextual data that needs to stand out and get noticed. It is also often useful in combination with other elements like a user avatar to show a number of new messages. --- # Examples --- ### Model
julia > @vars BadgeModel begin myicon = "bluetooth" end### View
julia > Html.div("Badge", class = "text-h6", [badge("1.0.0+", color = "primary")])--- # Arguments --- 1. Content * `floating::Bool` - Tell `badge` if it should float to the top right side of the relative positioned parent element or not * `transparent::Bool` - Applies a 0.8 opacity; Useful especially for floating `badge` * `multiline::Bool` - Content can wrap to multiple lines * `label::Union{String, Int}` - Badge's content as string; overrides default slot if specified ex. `"John Doe"` `22` * `align::String` - Sets vertical-align CSS attribute * `outline::Bool` - Use 'outline' design (colored text and borders only) 2. Style * `color::String` - Color name for component from the [Color Palette](https://quasar.dev/style/color-palette) ex. `"primary"` `"teal-10"` * `textcolor::String` - Overrides text color (if needed); Color name from the [Color Palette](https://quasar.dev/style/color-palette) ex. `"primary"` `"teal-10"` * `rounded::Bool` - Makes a rounded shaped badge
Big number
bignumber(number = "7")
<st-big-number title="" number="7"></st-big-number>Docstring
bignumber( label::Union{String,Symbol} = "", number::Union{Symbol,Number,Nothing} = nothing, args...; kwargs..., )Renders a Big Number UI element. # Arguments * label::Union{String,Symbol} * number::Union{String,Symbol,Nothing,String} * icon::Union{String,Symbol} * color::Union{String,Symbol} = "positive"|"negative" * arrow::Union{String,Symbol} = "up"|"down"
Button
Click count: {{Button_count}}
[
p("Click count: {{Button_count}}"),
btn("Process", @click(:Button_process)),
btn("Increase count", @click("Button_count = Button_count+1")),
]
@app begin
@in Button_process = false
@in Button_count = 0
@onbutton Button_process begin
Button_count += 1
end
end
<p>
Click count: {{Button_count}}
</p>
<q-btn label="Process" v-on:click="Button_process = true"></q-btn>
<q-btn label="Increase count" v-on:click="Button_count = Button_count+1"></q-btn>Button with icon
[
btn("Mail", icon = "mail", color = "primary", class = "q-mr-sm"),
btn("Send", var"icon-right" = "send", color = "secondary", class = "q-mr-sm"),
btn("Send", icon = "mail", var"icon-right" = "send", color = "orange"),
]
<q-btn color="primary" label="Mail" icon="mail" class="q-mr-sm"></q-btn>
<q-btn color="secondary" label="Send" class="q-mr-sm" icon-right="send"></q-btn>
<q-btn color="orange" label="Send" icon="mail" icon-right="send"></q-btn>Button with tooltip
[btn("Mail", icon = "mail", color = "primary", [tooltip("Send email")])]
<q-btn color="primary" label="Mail" icon="mail">
<q-tooltip>
Send email
</q-tooltip>
</q-btn>Button progress indicator
[
btn(
"Process",
@click(:ButtonProgress_process),
loading = :ButtonProgress_process,
color = "primary",
class = "q-mr-sm",
),
btn(
"Process",
@click(:ButtonProgress_process),
loading = :ButtonProgress_process,
percentage = :ButtonProgress_progress,
color = "green",
),
]
@app begin
@in ButtonProgress_process = false
@in ButtonProgress_progress = 0.0
@onbutton ButtonProgress_process begin
for ButtonProgress_progress = 0:0.1:1
@show ButtonProgress_progress
sleep(0.5)
end
ButtonProgress_progress = 0.0
end
end
<q-btn color="primary" :loading="ButtonProgress_process" label="Process" v-on:click="ButtonProgress_process = true" class="q-mr-sm"></q-btn>
<q-btn color="green" :loading="ButtonProgress_process" :percentage="ButtonProgress_progress" label="Process" v-on:click="ButtonProgress_process = true"></q-btn>Checkbox
checkbox("Checked", :Checkbox_checked)
@app begin
@in Checkbox_checked = true
end
<q-checkbox label="Checked" v-model="Checkbox_checked"></q-checkbox>Multiple checkboxes
[
checkbox("Orange", :selection, val = "orange", color = "orange"),
checkbox("Melon", :selection, val = "melon", color = "green"),
checkbox("Watermelon", :selection, val = "watermelon", color = "red"),
]
@app begin
@in CheckboxMultiple_checked = (true, @in(selection = []))
end
<q-checkbox color="orange" val="orange" label="Orange" v-model="selection"></q-checkbox>
<q-checkbox color="green" val="melon" label="Melon" v-model="selection"></q-checkbox>
<q-checkbox color="red" val="watermelon" label="Watermelon" v-model="selection"></q-checkbox>Docstring
checkbox( label::Union{String,Symbol} = "", fieldname::Union{Symbol,Nothing} = nothing, args...; kwargs..., )The `checkbox` component is another basic element for user input. You can use this to supply a way for the user to toggle an option. --- # Examples --- ### Model
julia > @vars CheckboxModel begin valone::R{Bool} = true end### View
julia > checkbox(label = "Apples", fieldname = :valone, dense = true, size = "xl")--- # Arguments --- 1. Behaviour * `name::String` - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL * `indeterminatevalue::Union{String, Float64, Int, Bool}` - What model value should be considered as 'indeterminate'? * `toggleorder::String` - Determines toggle order of the two states ('t' stands for state of true, 'f' for state of false); If 'toggle-indeterminate' is true, then the order is: indet -> first state -> second state -> indet (and repeat), otherwise: indet -> first state -> second state -> first state -> second state -> ... ex. `"tf"` `"ft"` * `toggleindeterminate::Bool` - When user clicks/taps on the component, should we toggle through the indeterminate state too? * `keepcolor::Bool` - Should the color (if specified any) be kept when the component is unticked/ off? 2. General * `tabindex::Union{Int, String}` - Tabindex HTML attribute value 3. Label * `label::Union{String,Symbol}` - Label to display along the component * `leftlabel::Bool` - Label (if any specified) should be displayed on the left side of the component 4. Model * `fieldname::Symbol` - Model of the component * `val::Union{String, Float64, Int, Bool}` - Works when model ('value') is Array. It tells the component which value should add/remove when ticked/unticked * `truevalue::Union{Int, Float64, String}` - What model value should be considered as checked/ticked/on? * `falsevalue::Union{Int, Float64, String}` - What model value should be considered as unchecked/unticked/off? 5. State * `disable::Bool` - Put component in disabled mode 6. Style * `size::String`- Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) ex. `"16px"` `"2rem"` `"xs"` `"md"` * `color::String` - Color name for component from the [Color Palette](https://quasar.dev/style/color-palette) eg. `"primary"` `"teal-10"` * `dark::Bool` - Notify the component that the background is a dark color * `dense::Bool` - Dense mode; occupies less space
Chip
chip("Add to calendar", icon = "event")
<q-chip icon="event">
Add to calendar
</q-chip>Clickable chip
Clicks: {{chipClick_clicks}}
[
chip(
"Add event to calendar",
icon = "event",
clickable = true,
@click(:chipClick_clicked)
),
p("Clicks: {{chipClick_clicks}}"),
]
@app begin
@in chipClick_clicked = false
@out chipClick_clicks = 0
@onbutton chipClick_clicked begin
chipClick_clicks += 1
end
end
<q-chip clickable="" icon="event" v-on:click="chipClick_clicked = true">
Add event to calendar
</q-chip>
<p>
Clicks: {{chipClick_clicks}}
</p>Docstring
chip(args...; kwargs...)The `chip` component is basically a simple UI block entity, representing for example more advanced underlying data, such as a contact, in a compact way. Chips can contain entities such as an avatar, text or an icon, optionally having a pointer too. They can also be closed or removed if configured so. --- # Examples --- ### View
julia > chip("Add to calendar", icon = "event")--- # Arguments --- 1. Content * `icon::String` - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. `"map"` `"ion-add"` `"img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg"` `"img:path/to/some_image.png"` * `iconright::String` - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. `"map"` `"ion-add"` `"img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg"` `"img:path/to/some_image.png"` * `iconremove::String` - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. `"map"` `"ion-add"` `"img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg"` `"img:path/to/some_image.png"` * `iconselected::String` - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. `"map"` `"ion-add"` `"img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg"` `"img:path/to/some_image.png"` * `label::Union{String, Int}` - Chip's content as string; overrides default slot if specified ex. `"Joe Doe"` `"Book"` 2. General * `tabindex::Union{Int, String}` - Tabindex HTML attribute value ex. `0` `100` 3. Model * `value::Bool` - Model of the component determining if `chip` should be rendered or not default. `true` * `selected::Bool` - Model for `chip` if it's selected or not NOTE. ".sync" modifier required! 4. State * `clickable::Bool` - Is `chip` clickable? If it's the case, then it will add hover effects and emit 'click' events * `removable::Bool` - Is `chip` removable? If it's the case, then it will add a close button and emit 'remove' events * `disable::Bool` - Put component in disabled mode 5. Style * `ripple::Union{Bool, Dict}` - Configure material ripple (disable it by setting it to 'false' or supply a config object) default. `true` ex. `false` `{ early: true, center: true, color: 'teal', keyCodes: [] }` * `dense::Bool` - Dense mode; occupies less space * `size::String` - `chip` size name or a CSS unit including unit name ex. `"xs"` `"sm"` `"md"` `"lg"` `"xl"` `"1rem"` * `dark::Bool` - Notify the component that the background is a dark color * `color::String` - Color name for component from the [Color Palette](https://quasar.dev/style/color-palette) eg. `"primary"` `"teal-10"` * `square::Bool` - Sets a low value for border-radius instead of the default one, making it close to a square * `outline::Bool` - Display using the 'outline' design
Column
Hello
Genie
[
row([
column(span("Hello"), size = 2, class = "bg-blue-2"),
column(span("Genie"), size = 4, class = "bg-red-2"),
]),
]
<div class="row">
<div class="bg-blue-2 column col-2">
<span>
Hello
</span>
</div>
<div class="bg-red-2 column col-4">
<span>
Genie
</span>
</div>
</div>Date field
datefield(
"Start date",
:Datefield_start_date,
datepicker_props = Dict(:todaybtn => true, :nounset => true),
textfield_props = Dict(:bgcolor => "green-1"),
)
@app begin
@in Datefield_start_date = today()
end
<q-input filled="" label="Start date" v-model="Datefield_start_date" clearable="" bg-color="green-1">
<q-icon name="event" class="cursor-pointer" style="height: 100%;">
<q-popup-proxy cover="" transition-show="scale" transition-hide="scale">
<q-date today-btn="" v-model="Datefield_start_date" no-unset="" mask="YYYY-MM-DD"></q-date>
</q-popup-proxy>
</q-icon>
</q-input>Docstring
datefield(args...; kwargs...)Complex input type that combines a textfield with an icon, a datepicker and a popup. The datepicker is hidden by default and is shown when the icon is clicked. The popup is used to hide the datepicker when the user clicks outside of it. A number of common arguments are defined and are passed to the textfield, the icon, the popup and the datepicker. In addition, keyword arguments can be passed to each of these components individually by using the `textfield_props`, `icon_props`, `popup_proxy_props` and `datepicker_props` keyword arguments. # Examples
datefield( "Start date", :start_date, datepicker_props = Dict(:todaybtn => true, :nounset => true), textfield_props = Dict(:bgcolor => "green-1"), )
Date picker
datepicker(:DatePicker_date)
@app begin
@in DatePicker_date = today()
end
<q-date v-model="DatePicker_date" mask="YYYY-MM-DD"></q-date>Multiple date picks
datepicker(:DateMultiple_dates, multiple = true)
@app begin
@in DateMultiple_dates = [today() + Day(2), today() + Day(4)]
end
<q-date v-model="DateMultiple_dates" multiple="multiple" mask="YYYY-MM-DD"></q-date>Range date picker
datepicker(:DateRange_daterange, range = true)
@app begin
@in DateRange_daterange = DateRange(today(), today() + Day(3))
end
<q-date v-model="DateRange_daterange" range="" mask="YYYY-MM-DD"></q-date>Docstring
datepicker()Renders a date picker (calendar) input element. If the `fieldname` references a `Vector{Date}`, the `multiple` keyword parameter must be passed as `true`. If the `fieldname` references a `DateRange`, the `range` keyword parameter must be passed as `true`. If the `fieldname` references a `Vector{DateRange}`, both the `multiple` and the `range` keyword parameters must be passed as `true`. --- # Examples --- ### Model
julia > @vars DatePickers begin date::R{Date} = today() + Day(30) dates::R{Vector{Date}} = Date[today()+Day(10), today()+Day(20), today()+Day(30)] daterange::R{DateRange} = DateRange(today(), (today() + Day(3))) dateranges::R{Vector{DateRange}} = [ DateRange(today(), (today() + Day(3))), DateRange(today() + Day(7), (today() + Day(10))), DateRange(today() + Day(14), (today() + Day(17))), ] proxydate::R{Date} = today() inputdate::R{Date} = today() end### View
julia > datepicker(:date) julia > datepicker(:dates, multiple = true) julia > datepicker(:daterange, range = true) julia > datepicker(:dateranges, range = true, multiple = true)--- # Arguments --- 1. Behavior * `name::String` - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL ex. `"car_id"` * `landscape::Bool` - Display the component in landscape mode * `yearsinmonthview::Bool` - Show the years selector in months view 2. Content * `title::String` - When specified, it overrides the default header title; Makes sense when not in 'minimal' mode ex. `"Birthday"` * `subtitle::String` - When specified, it overrides the default header subtitle; Makes sense when not in 'minimal' mode ex. `"John Doe"` * `todaybtn::Bool` - Display a button that selects the current day * `minimal::Bool` - Don't display the header 3. Selection * `navminyearmonth::String` - Lock user from navigating below a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use 'default-year-month' prop ex. `"2020/07"` * `navmaxyearmonth::String` - Lock user from navigating above a specific year+month (in YYYY/MM format); This prop is not used to correct the model; You might want to also use 'default-year-month' prop ex. `"2020/10"` * `nounset::Bool` - Remove ability to unselect a date; It does not apply to selecting a range over already selected dates * `multiple::Bool` - Allow multiple selection; Model must be Array * `range::Bool` - Allow range selection; Partial compatibility with 'options' prop: selected ranges might also include 'unselectable' days 4. State * `readonly::Bool` - Put component in readonly mode * `disable::Bool` - Put component in disabled mode 5. Style * `color::String` - Color name for component from the Quasar Color Palette ex. `"primary"` `"teal-10"` * `textcolor::String` - Overrides text color (if needed); Color name from the Quasar Color Palette ex. `"primary"` `"teal-10"` * `dark::Bool` - Notify the component that the background is a dark color * `square::Bool` - Removes border-radius so borders are squared * `flat::Bool` - Applies a 'flat' design (no default shadow) * `bordered::Bool` - Applies a default border to the component * `eventcolor::String` - Color name (from the Quasar Color Palette); If using a function, it receives the date as a String and must return a String (color for the received date); If using a function then for best performance, reference it from your scope and do not define it inline ex. `"teal-10"` `eventcolor!="(date) => date[9] % 2 === 0 ? 'teal' : 'orange'"`
Expansion
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
[
expansionitem(
label = "Click here",
dense = true,
var"dense-toggle" = true,
var"expand-separator" = true,
var"header-class" = "bg-blue-1",
p(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.",
),
),
]
<q-expansion-item expand-separator="" label="Click here" dense="" header-class="bg-blue-1" dense-toggle="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.
</p>
</q-expansion-item>Docstring
expansionitem(args...; kwargs...)The `expansionitem` component allows the hiding of content that is not immediately relevant to the user. Think of them as accordion elements that expand when clicked on. It’s also known as a collapsible. They are basically `item` components wrapped with additional functionality. So they can be included in `list` and inherit `item` component properties. # Examples --- ### Model
julia > @vars ExpansionModel begin dummy::R{Bool} = true end### View
julia > list( bordered = true, class = "rounded-borders", [ expansionitem( expandseparator = true, icon = "perm_identity", label = "Account settings", caption = "John Doe", [ card([ cardsection( "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste eveniet doloribus ullam aliquid.", ), ]), ], ), expansionitem( expandseparator = true, icon = "signal_wifi_off", label = "Wifi settings", [ card([ cardsection( "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste eveniet doloribus ullam aliquid.", ), ]), ], ), expansionitem( expandseparator = true, icon = "drafts", label = "Drafts", [ card([ cardsection( "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste eveniet doloribus ullam aliquid.", ), ]), ], ), ], )--- # Arguments --- 1. Behaviour * `duration::Int` - Animation duration (in milliseconds) ex. `:duration="1000"` * `default-opened::Bool` - Puts expansion item into open state on initial render; Overridden by ReactiveModel if used * `expandicontoggle::Bool` - Applies the expansion events to the expand icon only and not to the whole header * `group::String` - Register expansion item into a group (unique name that must be applied to all expansion items in that group) for coordinated open/close state within the group a.k.a. 'accordion mode' eg. `my-emails` * `popup::Bool` - Put expansion list into 'popup' mode 2. Content * `icon::String` - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. `map` `ion-add` `img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg` `img:path/to/some_image.png` * `expandicon::String` - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. `map` `ion-add` `img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg` `img:path/to/some_image.png` * `expandedicon::String` - Expand icon name (following Quasar convention) for when `expansionitem` is expanded; When used, it also disables the rotation animation of the expand icon; Make sure you have the icon library installed unless you are using 'img:' prefix ex. `map` `ion-add` `img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg` `img:path/to/some_image.png` * `label::Union{String,Symbol}` - Header label * `labellines::Union{Int, String}` - Apply ellipsis when there's not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the '-webkit-line-clamp' CSS property! ex. `labellines="2"` `1` `2` * `caption::String` - Header sub-label (unless using 'header' slot) ex. `Unread message: 5` * `captionlines::Union{Int, String}` - Apply ellipsis when there's not enough space to render on the specified number of lines; If more than one line specified, then it will only work on webkit browsers because it uses the '-webkit-line-clamp' CSS property! ex. `labellines="2"` `1` `2` * `headerinsetlevel::Int` - Apply an inset to header (unless using 'header' slot); Useful when header avatar/left side is missing but you want to align content with other items that do have a left side, or when you're building a menu ex. `headerinsetlevel="1"` * `contentinsetlevel::Int` - Apply an inset to content (changes content padding) ex. `contentinsetlevel="1"` * `expandseparator::Bool` - Add a separator between header and content * `switchtoggleside::Bool` - Switch expand icon side (from default 'right' to 'left') * `group::String` - Register expansion item into a group (unique name that must be applied to all expansion items in that group) for coordinated open/close state within the group a.k.a. 'accordion mode' ex. `my-emails` 3. State * `disable::Bool` - Put component in disabled mode 4. Style * `expand-icon-class::Union{Vector, String, Dict}` - Apply custom class(es) to the expand icon item section ex. `text-purple` * `dark::Bool` - Notify the component that the background is a dark color * `dense::Bool` - Dense mode; occupies less space * `densetoggle::Bool` - Use dense mode for expand icon * `headerstyle::Union{Vector, String, Dict}` - Apply custom style(s) to the header section ex. `background: '#ff0000'` `headerstyle=opts( backgroundColor: "#ff0000" )`
Footer
footer("Genie app footer", class = "bg-blue-1")
<footer class="bg-blue-1">
Genie app footer
</footer>Heading
Genie app
heading("Genie app", class = "bg-blue-1")
<header class="bg-blue-1 st-header q-pa-sm">
<h1 class="st-header__title text-h3">
Genie app
</h1>
</header>Icon
[
icon("font_download", class = "text-primary", style = "font-size: 32px;")
icon("warning", class = "text-red", style = "font-size:4rem;")
icon("format_size", style = "color: #ccc; font-size: 1.4em;")
icon("print", class = "text-teal", style = "font-size: 4.4em;")
icon("today", class = "text-orange", style = "font-size: 2em;")
icon("style", style = "font-size: 3em;")
]
<q-icon name="font_download" class="text-primary" style="font-size: 32px;"></q-icon>
<q-icon name="warning" class="text-red" style="font-size:4rem;"></q-icon>
<q-icon name="format_size" style="color: #ccc; font-size: 1.4em;"></q-icon>
<q-icon name="print" class="text-teal" style="font-size: 4.4em;"></q-icon>
<q-icon name="today" class="text-orange" style="font-size: 2em;"></q-icon>
<q-icon name="style" style="font-size: 3em;"></q-icon>Docstring
icon( name::Union{String,Symbol}, args...; content::Union{String,Vector,Function} = "", kwargs..., )Stipple supports out of the box: [Material Icons](https://fonts.google.com/icons?selected=Material+Icons) , [Font Awesome](https://fontawesome.com/icons), [Ionicons](https://ionic.io/ionicons), [MDI](https://materialdesignicons.com/), [Eva Icons](https://akveo.github.io/eva-icons/#/), [Themify Icons](https://themify.me/themify-icons), [Line Awesome](https://icons8.com/line-awesome) and [Bootstrap Icons](https://icons.getbootstrap.com/). Furthermore you can [add support by yourself](https://v1.quasar.dev/vue-components/icon#custom-mapping) for any icon lib. --- # Examples --- ### View
julia > icon("font_download", class = "text-primary", style = "font-size: 32px;") julia > icon("warning", class = "text-red", style = "font-size:4rem;") julia > icon("format_size", style = "color: #ccc; font-size: 1.4em;") julia > icon("print", class = "text-teal", style = "font-size: 4.4em;") julia > icon("today", class = "text-orange", style = "font-size: 2em;") julia > icon("style", style = "font-size: 3em;")--- # Arguments --- 1. Content * `tag::String` - HTML tag to render, unless no icon is supplied or it's an svg icon ex. `div` `i` * `left::Bool` - Useful if icon is on the left side of something: applies a standard margin on the right side of Icon * `right::Bool` - Useful if icon is on the right side of something: applies a standard margin on the left side of Icon 2. Model * `name::String` - Icon name; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. `map` `ion-add` `img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg` `img:path/to/some_image.png` 3. Style * `size::String` - Size in CSS units, including unit name or standard size name `16px` `2rem` `xs` `md` * `color::String` - Color name for component from the [Color Palette](https://quasar.dev/style/color-palette) eg. `primary` `teal-10`
Text input
textfield(
"Label",
:Text_text,
bottomslots = "",
counter = "",
maxlength = "12",
dense = "",
[
template(
var"v-slot:append" = "",
[
icon(
"close",
@iif("Text_text !== ''"),
@click("Text_text = ''"),
class = "cursor-pointer",
),
],
),
],
)
@app begin
@in Text_text = ""
@onchange Text_text begin
println(Text_text)
end
end
<q-input maxlength="12" bottom-slots="" label="Label" v-model="Text_text" counter="" dense="">
<template v-slot:append="">
<q-icon name="close" v-if="Text_text !== ''" v-on:click="Text_text = ''" class="cursor-pointer"></q-icon>
</template>
</q-input>Text input mask
textfield(
"Phone",
:TextMask_phone,
filled = "",
mask = "(###) ### - ####",
hint = "Mask: (###) ### - ####",
)
@app begin
@in TextMask_phone = ""
end
<q-input filled="" hint="Mask: (###) ### - ####" label="Phone" v-model="TextMask_phone" mask="(###) ### - ####"></q-input>Text input validation
textfield(
"Required Field",
:TextValidation_text,
ref = "inputRef",
filled = "",
var":rules" = "[ val => val.length <= 3 || 'Please use maximum 3 characters']",
)
@app begin
@in TextValidation_text = ""
end
<q-input filled="" label="Required Field" v-model="TextValidation_text" :rules="[ val => val.length <= 3 || 'Please use maximum 3 characters']" ref="inputRef"></q-input>Docstring
textfield(fieldname, args...; kwargs...)--- # Examples --- ### Model
julia > @vars TextField begin name::R{String} = "" end### View
julia > textfield( "What's your name *", :name, name = "name", @if(:warin), :filled, hint = "Name and surname", "lazy-rules", rules = "[val => val && val.length > 0 || 'Please type something']", )--- # Arguments --- 1. General * `type::String` - Must be one of the following: `text (default)`, `textarea`, `email`, `tel`, `number`, `password` and `url`. This is important as it determines the keyboard type popping up on mobile devices. 2. Behaviour * `name::String` - Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists ex. `car_id` * `mask::String` - Custom mask or one of the predefined mask names ex. `date` `datetime` `time` `fulltime` `phone` `card` * `fillmask::Union{Bool, String}` - Fills string with specified characters (or underscore if value is not string) to fill mask's length ex. `true` `0` `_` * `reversefillmask::Bool` - Fills string from the right side of the mask * `unmaskedvalue::Bool` - Model will be unmasked (won't contain tokens/separation characters) * `error::Bool` - Does field have validation errors? * `rules::Vector` - Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules ex. `rules!="[ 'fulltime' ]"` `rules!="[ val => val.length <= 3 || 'Please use maximum 3 characters' ]"` * `reactiverules::Bool` - By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it * `lazyrules::Union{Bool, String}` - If set to boolean true then it checks validation status against the 'rules' only after field loses focus for first time; If set to 'ondemand' then it will trigger only when component's validate() method is manually called or when the wrapper `form` submits itself `true` `false` `ondemand` * `loading::Bool` - Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot. * `clearable::Bool` - Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null * `autofocus::Bool` - Focus field on initial component render * `for::String` - Used to specify the 'id' of the control and also the 'for' attribute of the label that wraps it; If no 'name' prop is specified, then it is used for this attribute as well ex. `myFieldsId` 3. Content * `errormessage::String` - Validation error message (gets displayed only if 'error' is set to 'true') ex. `Username must have at least 5 characters` * `noerroricon::Bool` - Hide error icon when there is an error * `label::Union{String,Symbol}` - A text label that will “float” up above the input field, once the field gets focus ex. `Username` * `stacklabel::Bool` - Label will be always shown above the field regardless of field content (if any) * `hint::String` - Helper (hint) text which gets placed below your wrapped form component ex. `Fill in between 3 and 12 characters` * `hidehint::Bool` - Hide the helper (hint) text when field doesn't have focus * `prefix::String` - Prefix ex. `$` * `suffix::String` - Suffix ex. `@gmail.com` * `loading::Bool` - Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot. * `clearable::Bool` - Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null * `clearicon::String` - Custom icon to use for clearable icon; If not specified, then it uses the default icon * `labelslot::Bool` - Enables label slot; You need to set it to force use of the 'label' slot if the 'label' prop is not set * `bottomslots::Bool` - Enables bottom slots ('error', 'hint', 'counter') * `counter::Bool` - Show an automatic counter on bottom right * `shadowtext::String` - Text to be displayed as shadow at the end of the text in the control; Does NOT applies to type=file * `autogrow::Bool` - Make field autogrow along with its content (uses a textarea) 4. State * `disable::Bool` - Put component in disabled mode * `readonly::Bool` - Put component in readonly mode 5. Style * `labelcolor::String` - Color name for the label from the [Color Palette](https://quasar.dev/style/color-palette); Overrides the 'color' prop; The difference from 'color' prop is that the label will always have this color, even when field is not focused ex. `primary` `teal` * `color::String` - Color name for component from the [Color Palette](https://quasar.dev/style/color-palette) * `bgcolor::String` - Color from [Color Palette](https://quasar.dev/style/color-palette) * `dark::Bool` - Notify the component that the background is a dark color * `filled::Bool` - Use 'filled' design for the field * `outline::Bool` - Use 'outlined' design for the field * `borderless::Bool` - Use 'borderless' design for the field * `standout::Union{Bool, String}` - Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones) ex. `standout` `standout="bg-primary text-white"` * `hidebottomspace::Bool` - Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content * `rounded::Bool` - Applies a small standard border-radius for a squared shape of the component * `square::Bool` - Remove border-radius so borders are squared; Overrides 'rounded' prop * `dense::Bool` - Dense mode; occupies less space * `itemaligned::Union{Vector, String, Dict}` - Match inner content alignment to that of `item` * `inputclass::Union{Vector, String, Dict}` - Class definitions to be attributed to the underlying input tag ex. `my-special-class` `inputclass!="{ 'my-special-class':
Image
imageview(
src = "https://learn.genieframework.com/assets/docs/guides/intro/genieframeworkdiagram.svg",
style = "height: 200px; width: 200px",
)
<q-img src="https://learn.genieframework.com/assets/docs/guides/intro/genieframeworkdiagram.svg" style="height: 200px; width: 200px"></q-img>Image with caption
Caption
imageview(
src = "https://learn.genieframework.com/assets/docs/guides/intro/genieframeworkdiagram.svg",
Html.div(class = "absolute-bottom text-subtitle1 text-center", "Caption"),
style = "height: 250px; width: 250px",
)
<q-img src="https://learn.genieframework.com/assets/docs/guides/intro/genieframeworkdiagram.svg" style="height: 250px; width: 250px">
<div class="absolute-bottom text-subtitle1 text-center">
Caption
</div>
</q-img>Docstring
imageview(args...; kwargs...)The `imageview` component makes working with images (any picture format) easy and also adds a nice loading effect to it along with many other features (example: the ability to set an aspect ratio). --- # Examples --- ### Model
julia > @vars Model begin url::R{String} = "https://placeimg.com/500/300/nature" end### View
julia > imageview(src = :url, spinnercolor = "white", style = "height: 140px; max-width: 150px") julia > imageview( src = :url, style = "height: 140px; max-width: 150px", [ template( "", "v-slot:loading", [spinner(:gears, color = "white", wrap = StippleUI.NO_WRAPPER)], ), ], )--- # Arguments --- 1. Behaviour * `transition::String` - One of [embedded transitions](https://v1.quasar.dev/options/transitions) ex. `fade` `slide-down` * `nativecontextmenu::Bool` - Enable the native context menu of the image 2. Content * `ratio::Union{String, Int}` - Force the component to maintain an aspect ratio ex. `ratio!="4/3"` `(Number format) ratio!="16/9"` `(String format) ratio="1"` * `alt::String` - Specifies an alternate text for the image, if the image cannot be displayed ex. `Two cats` * `basic::Bool` - Do not use transitions; faster render * `contain::Bool` - Make sure that the image getting displayed is fully contained, regardless if additional blank space besides the image is needed on horizontal or vertical 3. Model * `src::String` - Path to image ex. `(public folder) src="img/something.png"` `(assets folder) src="~assets/my-img.gif"` `(URL) src="https://placeimg.com/500/300/nature"` * `srcset::String` - Same syntax as
Knob
knob(1:1:10, :knob_value, color = "primary")
@app begin
@in knob_value = 5
end
<q-knob color="primary" :min="1" v-model="knob_value" :max="10" :step="1"></q-knob>Docstring
knob( range::AbstractRange{T} where {T<:Real}, fieldname::Union{Symbol,Nothing} = nothing, args...; kwargs..., )Renders a knob input element.
List
list(
bordered = true,
separator = true,
@recur("fruit in List_fruits"),
item(clickable = true, item_section("{{fruit}}")),
)
@app begin
@out List_fruits = ["orange", "melon", "watermelon"]
end
<q-list bordered="" v-for="fruit in List_fruits" separator="">
<q-item clickable="">
<q-item-section>
{{fruit}}
</q-item-section>
</q-item>
</q-list>Complex list
list(
bordered = true,
separator = true,
padding = true,
style = "width:400px",
[
toolbar("Configuration", class = "bg-primary text-white shadow-2"),
item(
clickable = "",
vripple = "",
item_section([
item_label("Content filtering"),
item_label(
caption = true,
"Set the content filtering level to restrict apps that can be downloaded",
),
]),
),
item(
clickable = "",
vripple = "",
item_section([
item_label("Password"),
item_label(
caption = true,
"Require password for purchase or use password to m'estrict purchase",
),
]),
),
separator(spaced = true),
item_label(header = true, "Other"),
separator(spaced = true),
item(
var"v-ripple" = true,
[
item_section(checkbox("", :ListComplex_check)),
item_section([
item_label("Auto-add widgets"),
item_label(caption = true, "Automatically add home screen widgets"),
]),
],
),
item(
var"v-ripple" = true,
[
item_section(side = true, top = true, checkbox("", :ListComplex_check)),
item_section([
item_label("Auto-add widgets"),
item_label(caption = true, "Automatically add home screen widgets"),
]),
],
),
],
)
@app begin
@in ListComplex_check = "false"
end
<q-list padding="" bordered="" separator="" style="width:400px">
<q-toolbar class="bg-primary text-white shadow-2">
Configuration
</q-toolbar>
<q-item clickable="" v-ripple="">
<q-item-section>
<q-item-label>
Content filtering
</q-item-label>
<q-item-label caption="">
Set the content filtering level to restrict apps that can be downloaded
</q-item-label>
</q-item-section>
</q-item>
<q-item clickable="" v-ripple="">
<q-item-section>
<q-item-label>
Password
</q-item-label>
<q-item-label caption="">
Require password for purchase or use password to m'estrict purchase
</q-item-label>
</q-item-section>
</q-item>
<q-separator spaced=""></q-separator>
<q-item-label header="">
Other
</q-item-label>
<q-separator spaced=""></q-separator>
<q-item v-ripple="">
<q-item-section>
<q-checkbox label="" v-model="ListComplex_check"></q-checkbox>
</q-item-section>
<q-item-section>
<q-item-label>
Auto-add widgets
</q-item-label>
<q-item-label caption="">
Automatically add home screen widgets
</q-item-label>
</q-item-section>
</q-item>
<q-item v-ripple="">
<q-item-section top="" side="">
<q-checkbox label="" v-model="ListComplex_check"></q-checkbox>
</q-item-section>
<q-item-section>
<q-item-label>
Auto-add widgets
</q-item-label>
<q-item-label caption="">
Automatically add home screen widgets
</q-item-label>
</q-item-section>
</q-item>
</q-list>Docstring
list(args...; kwargs...)The `list` and `item` are a group of components which can work together to present multiple line items vertically as a single continuous element. They are best suited for displaying similar data types as rows of information, such as a contact list, a playlist or menu. Each row is called an Item. `item` can also be used outside of a `list` too. --- # Examples --- ### View
julia > list( bordered = true, separator = true, [ item(clickable = true, vripple = true, [itemsection("Single line item")]), item( clickable = true, vripple = true, [ itemsection([ itemlabel("Item with caption"), itemlabel("Caption", caption = true), ]), ], ), item( clickable = true, vripple = true, [ itemsection([ itemlabel("OVERLINE", overline = true), itemlabel("Item with caption"), ]), ], ), ], )--- # Arguments --- 1. Content * `separator::Bool` - Applies a separator between contained items * `padding:Bool` - Applies a material design-like padding on top and bottom 2. Style * `bordered::Bool` - Applies a default border to the component * `dense::Bool` - Dense mode; occupies less space * `dark::Bool` - Notify the component that the background is a dark color
Radio
Your selection is: {{Radio_shape }}
Stipple.Html.div(
class = "q-pa-md",
[
Stipple.Html.div(
class = "q-gutter-sm",
[
radio("Line", :Radio_shape, val = "line"),
radio("Rectangle", :Radio_shape, val = "rectangle"),
radio("Ellipse", :Radio_shape, val = "ellipse"),
radio("Polygon", :Radio_shape, val = "polygon"),
],
),
Stipple.Html.div(
class = "q-px-sm",
["Your selection is: ", strong("{{Radio_shape }}")],
),
],
)
@app begin
@in Radio_shape = "line"
end
<div class="q-pa-md">
<div class="q-gutter-sm">
<q-radio val="line" label="Line" v-model="Radio_shape"></q-radio>
<q-radio val="rectangle" label="Rectangle" v-model="Radio_shape"></q-radio>
<q-radio val="ellipse" label="Ellipse" v-model="Radio_shape"></q-radio>
<q-radio val="polygon" label="Polygon" v-model="Radio_shape"></q-radio>
</div>
<div class="q-px-sm">
Your selection is:
<strong>
{{Radio_shape }}
</strong>
</div>
</div>Colored radio
Your selection is: {{RadioColor_shape }}
Stipple.Html.div(
class = "q-pa-md",
[
Stipple.Html.div(
class = "q-gutter-sm",
[
radio("Line", :RadioColor_shape, val = "line", color = "teal"),
radio("Rectangle", :RadioColor_shape, val = "rectangle", color = "orange"),
radio("Ellipse", :RadioColor_shape, val = "ellipse", color = "red"),
radio("Polygon", :RadioColor_shape, val = "polygon", color = "blue"),
],
),
Stipple.Html.div(
class = "q-px-sm",
["Your selection is: ", strong("{{RadioColor_shape }}")],
),
],
)
@app begin
@in RadioColor_shape = "line"
end
<div class="q-pa-md">
<div class="q-gutter-sm">
<q-radio color="teal" val="line" label="Line" v-model="RadioColor_shape"></q-radio>
<q-radio color="orange" val="rectangle" label="Rectangle" v-model="RadioColor_shape"></q-radio>
<q-radio color="red" val="ellipse" label="Ellipse" v-model="RadioColor_shape"></q-radio>
<q-radio color="blue" val="polygon" label="Polygon" v-model="RadioColor_shape"></q-radio>
</div>
<div class="q-px-sm">
Your selection is:
<strong>
{{RadioColor_shape }}
</strong>
</div>
</div>Docstring
radio( label::AbstractString = "", fieldname::Union{Symbol,Nothing} = nothing, args...; kwargs..., )The `radio` component is another basic element for user input. You can use this to supply a way for the user to pick an option from multiple choices. --- # Examples --- ### Model
julia > @vars RadioModel begin shape::R{String} = "line" end### View
julia > radio("Line", :shape, val = "line") julia > radio("Rectangle", :shape, val = "rectange") julia > radio("Ellipse", :shape, val = "ellipse") julia > radio("Polygon", :shape, val = "polygon")--- # Arguments --- 1. Behaviour * `name::String` - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL ex. `car_id` * `keep-color::Bool` - Should the color (if specified any) be kept when checkbox is unticked? 2. General * `tabindex::Union{Int, String}` - Tabindex HTML attribute value 3. Model * `fieldname::Symbol` - Name of the variable to bind to. 4. Label * `label::AbstractString` - Label * `leftlabel::Bool` - Label (if any specified) should be displayed on the left side of the checkbox 5. State * `disable::Bool` - Put component in disabled mode 6. Style * `size::String` - Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) ex. `16px` `2rem` `xs` `md` * `color::String` - Color name for component from the [Color Palette](https://quasar.dev/style/color-palette) ex. `primary` `teal-10` * `dark::Bool` - Notify the component that the background is a dark color * `dense::Bool` - Dense mode; occupies less space
Range
[
range(1:1:30, :Range_r, label = true),
range(1:1:30, :Range_r, vertical = true, labelalways = true),
]
@app begin
@in Range_r = RangeData(1:5)
end
<q-range :min="1" v-model="Range_r" label="" :max="30" :step="1"></q-range>
<q-range vertical="" :min="1" v-model="Range_r" :max="30" label-always="" :step="1"></q-range>Range with markers
[
range(1:1:30, :Range_Markers_r, markers = true, label = true),
range(1:1:30, :Range_Markers_r, var"marker-labels" = true, color = "orange"),
range(
0:5:30,
:Range_Markers_r,
markers = true,
var":marker-labels" = "Range_Markers_labels",
color = "secondary",
),
]
@app begin
@in Range_Markers_r = RangeData(0:30)
@out Range_Markers_labels =
[Dict(:value => i, :label => string(i) * "%") for i = 0:5:30]
end
<q-range :min="1" v-model="Range_Markers_r" label="" :max="30" markers="" :step="1"></q-range>
<q-range color="orange" :min="1" marker-labels="" v-model="Range_Markers_r" :max="30" :step="1"></q-range>
<q-range color="secondary" :marker-labels="Range_Markers_labels" :min="0" v-model="Range_Markers_r" :max="30" markers="" :step="5"></q-range>Docstring
range(start, stop, length) range(start, stop; length, step) range(start; length, stop, step) range(; start, length, stop, step)Construct a specialized array with evenly spaced elements and optimized storage (an [`AbstractRange`](@ref)) from the arguments. Mathematically a range is uniquely determined by any three of `start`, `step`, `stop` and `length`. Valid invocations of range are: * Call `range` with any three of `start`, `step`, `stop`, `length`. * Call `range` with two of `start`, `stop`, `length`. In this case `step` will be assumed to be one. If both arguments are Integers, a [`UnitRange`](@ref) will be returned. * Call `range` with one of `stop` or `length`. `start` and `step` will be assumed to be one. See Extended Help for additional details on the returned type. # Examples
julia > range(1, length = 100) 1:100 julia > range(1, stop = 100) 1:100 julia > range(1, step = 5, length = 100) 1:5:496 julia > range(1, step = 5, stop = 100) 1:5:96 julia > range(1, 10, length = 101) 1.0:0.09:10.0 julia > range(1, 100, step = 5) 1:5:96 julia > range(stop = 10, length = 5) 6:10 julia > range(stop = 10, step = 1, length = 5) 6:1:10 julia > range(start = 1, step = 1, stop = 10) 1:1:10 julia > range(; length = 10) Base.OneTo(10) julia > range(; stop = 6) Base.OneTo(6) julia > range(; stop = 6.5) 1.0:1.0:6.0If `length` is not specified and `stop - start` is not an integer multiple of `step`, a range that ends before `stop` will be produced.
julia > range(1, 3.5, step = 2) 1.0:2.0:3.0Special care is taken to ensure intermediate values are computed rationally. To avoid this induced overhead, see the [`LinRange`](@ref) constructor. !!! compat "Julia 1.1" `stop` as a positional argument requires at least Julia 1.1. !!! compat "Julia 1.7" The versions without keyword arguments and `start` as a keyword argument require at least Julia 1.7. !!! compat "Julia 1.8" The versions with `stop` as a sole keyword argument, or `length` as a sole keyword argument require at least Julia 1.8. # Extended Help `range` will produce a `Base.OneTo` when the arguments are Integers and * Only `length` is provided * Only `stop` is provided `range` will produce a `UnitRange` when the arguments are Integers and * Only `start` and `stop` are provided * Only `length` and `stop` are provided A `UnitRange` is not produced if `step` is provided even if specified as one.
Rating
rating(:rating_value, icon = "thumb_up")
@app begin
@in rating_value = 5
end
<q-rating v-model="rating_value" icon="thumb_up"></q-rating>Docstring
rating(fieldname::Union{Symbol,Nothing} = nothing, args...; kwargs...)Rating is a Component which allows users to rate items, usually known as “Star Rating”. --- # Examples --- ### Model
julia > @vars RatingModel begin myrating::R{Int} = 3 end### View
julia > rating(:myrating, size = "1.5em", icon = "thumb_up") julia > rating(:myrating, size = "2em", color = "red-7", icon = "favorite_border") julia > rating(:myrating, size = "2.5em", color = "purple-4", icon = "create")--- # Arguments --- 1. Behaviour * `name::String` - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL `car_id` 2. Content * `icon::Union{String, Vector}` - Icon name; make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based) ex. `map` `ion-add` `img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg` `img:path/to/some_image.png` * `iconselected::Union{String, Vector}` - Icon name to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based) ex. `map` `ion-add` `img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg` `img:path/to/some_image.png` * `iconhalf::Union{String, Vector}` - Icon name to be used when selected (optional); make sure you have the icon library installed unless you are using 'img:' prefix; If an array is provided each rating value will use the corresponding icon in the array (0 based) ex. `map` `ion-add` `img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg` `img:path/to/some_image.png` 3. Label * `max::Union{Int, String}` - Number of icons to display ex. `3` `max="5"` 4. Model * `noreset::Bool` - When used, disables default behavior of clicking/tapping on icon which represents current model value to reset model to 0 5. State * `readonly::Bool` - Put component in readonly mode * `disable::Bool` - Put component in disabled mode 6. Style * `size::String` - Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) ex. `16px` `2rem` `md` `xs` * `color::Union{String, Vector}` - Color name for component from the [Color Palette](https://quasar.dev/style/color-palette); v1.5.0+: If an array is provided each rating value will use the corresponding color in the array (0 based) ex. `primary` `primary` `teal-10` `["accent", "grey-7"]` * `colorselected::Union{String, Vector}` - Color name from the Quasar Palette for selected icons `primary` `teal-10` * `colorhalf::Union{String, Vector}` - Color name from the [Color Palette](https://quasar.dev/style/color-palette) ex. `primary` `teal-10` * `nodimming::Bool` - Does not lower opacity for unselected icons
Row
Hello
Genie
[row(span("Hello"), class = "bg-blue-2"), row(span("Genie"), class = "bg-red-2")]
<div class="bg-blue-2 row">
<span>
Hello
</span>
</div>
<div class="bg-red-2 row">
<span>
Genie
</span>
</div>Scroll area
Stipple is a reactive UI library for building interactive
data applications in pure Julia. It uses Genie.jl (on the server side)
and Vue.js (on the client). Stipple uses a high performance MVVM
architecture, which automatically synchronizes the state two-way
(server -> client and client -> server) sending only JSON data over
the wire. The Stipple package provides the fundamental communication
layer, extending Genie's HTML API with a reactive component.
scrollarea(
style = "height: 200px; max-width: 300px;",
Html.div(
"Stipple is a reactive UI library for building interactive\n data applications in pure Julia. It uses Genie.jl (on the server side)\n and Vue.js (on the client). Stipple uses a high performance MVVM\n architecture, which automatically synchronizes the state two-way\n (server -> client and client -> server) sending only JSON data over\n the wire. The Stipple package provides the fundamental communication\n layer, extending Genie's HTML API with a reactive component.",
),
)
<q-scroll-area style="height: 200px; max-width: 300px;">
<div>
Stipple is a reactive UI library for building interactive
data applications in pure Julia. It uses Genie.jl (on the server side)
and Vue.js (on the client). Stipple uses a high performance MVVM
architecture, which automatically synchronizes the state two-way
(server -> client and client -> server) sending only JSON data over
the wire. The Stipple package provides the fundamental communication
layer, extending Genie's HTML API with a reactive component.
</div>
</q-scroll-area>Docstring
scrollarea(args...; kwargs...)The `scrollarea` component offers a neat way of customizing the scrollbars by encapsulating your content. Think of it as a DOM element which has `overflow: auto`, but with your own custom styled scrollbar instead of browser’s default one and a few nice features on top. --- # Examples --- ### View
julia > StippleUI.scrollarea( style = "height: 200px; max-width: 300px;", [Html.div("Stipple is a reactive UI library for building interactive data applications in pure Julia. It uses Genie.jl (on the server side) and Vue.js (on the client). Stipple uses a high performance MVVM architecture, which automatically synchronizes the state two-way (server -> client and client -> server) sending only JSON data over the wire. The Stipple package provides the fundamental communication layer, extending Genie's HTML API with a reactive component.")], )--- # Arguments --- 1. Behaviour * `visible::Bool` - Manually control the visibility of the scrollbar; Overrides default mouse over/leave behavior * `delay::Union{Int, String}` - When content changes, the scrollbar appears; this delay defines the amount of time (in milliseconds) before scrollbars disappear again (if component is not hovered) default `1000` ex. `500` `delay!="500` * `horizontal::Bool` - Changes the default axis to horizontal instead of vertical (which is default) for getScrollPosition, getScrollPercentage, setScrollPosition, and setScrollPercentage 2. General * `tabindex::Union{Int, String}` - Tabindex HTML attribute value `0` `100` 3. Style * `dark::Bool` - Notify the component that the background is a dark color * `barstyle::Union{Vector, String, Dict}` - Object with CSS properties and values for custom styling the scrollbars (both vertical and horizontal) ex. `barstyle!="{ borderRadius: '5px', background: 'red', opacity: 1 }"` * `contentstyle::Union{Vector, String, Dict}` - Object with CSS properties and values for styling the container of `scrollarea`
Select
select(:Select_fruit, options = :Select_fruit_list, label = "Fruits")
@app begin
@in Select_fruit = ["orange"]
@out Select_fruit_list = ["orange", "melon", "watermelon"]
end
<q-select v-model="Select_fruit" label="Fruits" :options="Select_fruit_list"></q-select>Clearable select with input
select(
:SelectClearable_fruit,
options = :SelectClearable_fruit_list,
label = "Fruits",
clearable = true,
useinput = true,
)
@app begin
@in SelectClearable_fruit = ["orange"]
@out SelectClearable_fruit_list = ["orange", "melon", "watermelon"]
end
<q-select v-model="SelectClearable_fruit" label="Fruits" use-input="" clearable="" :options="SelectClearable_fruit_list"></q-select>Multiple choices with chips
select(
:SelectMultiple_fruit,
options = :SelectMultiple_fruit_list,
label = "Fruits",
clearable = "",
multiple = true,
usechips = true,
)
@app begin
@in SelectMultiple_fruit = ["orange"]
@out SelectMultiple_fruit_list = ["orange", "melon", "watermelon"]
end
<q-select v-model="SelectMultiple_fruit" label="Fruits" clearable="" multiple="multiple" use-chips="" :options="SelectMultiple_fruit_list"></q-select>Docstring
select(fieldname::Symbol, args...; options::Union{Symbol,Vector}, kwargs...)--- # Examples --- ### Model
julia > @vars SelectModel begin model::R{Vector{String}} = [] networks::R{Vector{String}} = ["Google", "Facebook", "Twitter", "Pinterest", "Reddit"] end### View
julia > select( :model, options = :networks, useinput = true, multiple = true, clearable = true, filled = true, counter = true, usechips = true, label = "Social Networks", )--- # Arguments --- 1. Behaviour * `name::String` - Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists ex. `car-id` `car-id` * `virtualscrollhorizontal::Bool` - Make virtual list work in horizontal mode * `error::Bool` - Does field have validation errors? * `rules::Vector` - Array of Functions/Strings; If String, then it must be a name of one of the embedded validation rules `rules="[ val => val.length <= 3 || 'Please use maximum 3 characters' ]"` * `reactiverules::Bool` - By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it * `lazyrules::Union{Bool, String}` - If set to boolean true then it checks validation status against the 'rules' only after field loses focus for first time; If set to 'ondemand' then it will trigger only when component's validate() method is manually called or when the wrapper `form` submits itself ex. `(Boolean) true` `(Boolean) false` `ondemand` * `loading::Bool` - Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot. * `clearable::Bool` - Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null * `autofocus::Bool` - Focus field on initial component render * `for::String` - Used to specify the 'id' of the control and also the 'for' attribute of the label that wraps it; If no 'name' prop is specified, then it is used for this attribute as well `myFieldsId` * `hidedropdownicon::Bool` - Hide dropdown icon * `fillinput::Bool` - Fills the input with current value; Useful along with 'hideselected'; Does NOT works along with 'multiple' selection * `newvaluemode::String` - Enables creation of new values and defines behavior when a new value is added: 'add' means it adds the value (even if possible duplicate), 'add-unique' adds only unique values, and 'toggle' adds or removes the value (based on if it exists or not already); When using this prop then listening for `newvalue` becomes optional (only to override the behavior defined by `newvaluemode`) ex. `add` `add-unique` `toggle` * `autocomplete::String` - Autocomplete attribute for field ex. `autocomplete="country"` * `transitionshow::String` - Transition when showing the menu/dialog; One of [embedded transitions](https://v1.quasar.dev/options/transitions) ex. `fade` `slide-down` * `transitionhide::String` - Transition when hiding the menu/dialog; One of [embedded transitions](https://v1.quasar.dev/options/transitions) ex. `fade` `slide-down` * `behavior::String` - Overrides the default dynamic mode of showing as menu on desktop and dialog on mobiles `default` `menu` `dialog` 2. Content * `tablecolspan::Union{Int, String}` - The number of columns in the table (you need this if you use table-layout: fixed) ex. `tablecolspan="12"` * `errormessage::String` - Validation error message (gets displayed only if 'error' is set to 'true') ex. `Username must have at least 5 characters` * `noerroricon::Bool` - Hide error icon when there is an error * `label::Union{String,Symbol}` - A text label that will “float” up above the input field, once the field gets focus ex. `Username` * `stacklabel::Bool` - Label will be always shown above the field regardless of field content (if any) * `hint::String` - Helper (hint) text which gets placed below your wrapped form component ex. `Fill in between 3 and 12 characters` * `hidehint::Bool` - Hide the helper (hint) text when field doesn't have focus * `prefix::String` - Prefix ex. `$` * `suffix::String` - Suffix ex. `@gmail.com` * `loading::Bool` - Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot. * `clearable::Bool` - Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null * `clearicon::String` - Custom icon to use for the clear button when using along with 'clearable' attribute ex. `close` * `labelslot::Bool` - Enables label slot; You need to set it to force use of the 'label' slot if the 'label' prop is not set * `bottomslots::Bool` - Enables bottom slots ('error', 'hint', 'counter') * `counter::Bool` - Show an automatic counter on bottom right * `dropdownicon::String` - Icon name; ; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. `map` `ion-add` `img=https://cdn.quasar.dev/logo/svg/quasar-logo.svg` `img=path/to/some_image.png` * `useinput::Bool` - Use an input tag where users can type * `inputdebounce::Union{Int, String}` - Debounce the input model update with an amount of milliseconds ex. `500` `600` 3. General * `tabindex::Union{Int, String}` - Tabindex HTML attribute value ex. `0` `100` 4. Model * `multiple::Bool` - Allow multiple selection; Model must be Array * `emitvalue::Bool` - Update model with the value of the selected option instead of the whole option 5. Options * `options::Vector` - Available options that the user can select from. For best performance freeze the list of options ex. `options = [ "BMW", "Samsung Phone" ]` * `optionvalue::String` - Property of option which holds the 'value'; If using a function then for best performance, reference it from your scope and do not define it inline ex. `optionvalue=modelNumber` `optionvalue="(item) => item === null ? null : item.modelNumber"` * `optionlabel::Union{String,Symbol}` - Property of option which holds the 'label'; If using a function then for best performance, reference it from your scope and do not define it inline ex. `optionlabel=itemName` `optionlabel="(item) => item === null ? null : item.itemName"` * `optiondisable::String` - Property of option which tells it's disabled; The value of the property must be a Boolean; If using a function then for best performance, reference it from your scope and do not define it inline ex. `optiondisable=cannotSelect` `optiondisable="(item) => item === null ? null : item.cannotSelect"` * `optionsdense::Bool` - Dense mode for options list; occupies less space * `optionsdark::Bool` - Options menu will be colored with a dark color * `optionsselectedclass::String` - CSS class name for options that are active/selected; Set it to an empty string to stop applying the default (which is text-* where * is the 'color' prop value) ex. `text-orange` * `optionssanitize::Bool` - Force use of textContent instead of innerHTML to render options; Use it when the options might be unsafe (from user input); Does NOT apply when using 'option' slot! * `optionscover::Bool` - Expanded menu will cover the component (will not work along with `useinput` attribute for obvious reasons) * `menushrink::Bool` - Allow the options list to be narrower than the field (only in menu mode) * `mapoptions::Bool` - Try to map labels of model from `options` Vector; has a small performance penalty; If you are using emit-value you will probably need to use map-options to display the label text in the select field rather than the value; Refer to the 'Affecting model' section above 6. Position * `menuanchor::String` - Two values setting the starting position or anchor point of the options list relative to the field (only in menu mode) ex. `top left` `top middle` `top right` `top start` `top end` `center left` `center middle` `center right` `center start` `center end` `bottom left` `bottom middle` `bottom right` `bottom start` `bottom end` * `menuself::String` - Two values setting the options list's own position relative to its target (only in menu mode) ex. `top left` etc * `menuoffset::Vector` - An array of two numbers to offset the options list horizontally and vertically in pixels (only in menu mode) ex. `[8, 8]` 7. Selection * `multiple::Bool` - Allow multiple selection; Model must be Array * `displayvalue::Union{Int, String}` - Override default selection string, if not using `selected` slot/scoped slot and if not using `usechips` attribute * `displayvaluesanitize::Bool` - Force use of textContent instead of innerHTML to render selected option(s); Use it when the selected option(s) might be unsafe (from user input); Does NOT apply when using `selected` or `selecteditem` slots! * `hideselected::Bool` - Hides selection; Use the underlying input tag to hold the label (instead of showing it to the right of the input) of the selected option; Only works for non `multiple` Selects * `maxvalues::Union{Int, String}` - Allow a maximum number of selections that the user can do ex. `5` * `usechips::Bool` - Use `chip` component to show what is currently selected 8. State * `disable::Bool` - Put component in disabled mode * `readonly::Bool` - Put component in readonly mode 9. Style * `labelcolor::String` - Color name for the label from the [Color Palette](https://quasar.dev/style/color-palette); Overrides the `color` prop; The difference from `color` prop is that the label will always have this color, even when field is not focused ex. `primary` `teal-10` * `color::String` - Color name for component from the [Color Palette](https://quasar.dev/style/color-palette) * `bgcolor::String` - Background color name for component from the [Color Palette](https://quasar.dev/style/color-palette) * `dark::Bool` - Notify the component that the background is a dark color * `filled::Bool` - Use `filled` design for the field * `outlined::Bool` - Use `outlined` design for the field * `borderless::Bool` - Use `borderless` design for the field * `standout::Union{Bool, String}` - Use 'standout' design for the field; Specifies classes to be applied when focused (overriding default ones) ex. `standout` `standout="bg-primary text-white"` * `hidebottomspace::Bool` - Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content * `rounded::Bool` - Applies a small standard border-radius for a squared shape of the component * `square::Bool` - Remove border-radius so borders are squared; Overrides `rounded` prop/attribute * `dense::Bool` - Dense mode; occupies less space * `itemaligned::Bool` - Match inner content alignment to that of `item` component * `popupcontentclass::String` - Class definitions to be attributed to the popup content ex. `my-special-class` * `popupcontentstyle::Union{Vector, String, Dict}` - Style definitions to be attributed to the popup content ex. `background-color: #ff0000` `popupcontentstyle!="{ backgroundColor: '#ff0000' }"` * `inputclass::Union{Vector, String, Dict}` - Class definitions to be attributed to the underlying input tag ex. `my-special-class` `inputclass!="{ 'my-special-class':
Separator
above
below
[p("above"), separator(color = "primary"), p("below")]
<p>
above
</p>
<q-separator color="primary"></q-separator>
<p>
below
</p>Docstring
separator(args...; kwargs...)The `separator` component is used to separate sections of text, other components, etc… It creates a colored line across the width of the parent. It can be horizontal or vertical.
Slider
slider(1:1:10, :Slider_volume)
@app begin
@in Slider_volume = 4
end
<q-slider :min="1" v-model="Slider_volume" :max="10" :step="1"></q-slider>Slider with an icon
item([
itemsection(avatar = "", icon("volume_up", color = "teal")),
itemsection(slider(0:1:10, :SliderIcon_volume, label = "", color = "teal")),
])
@app begin
@in SliderIcon_volume = 4
end
<q-item>
<q-item-section avatar="">
<q-icon color="teal" name="volume_up"></q-icon>
</q-item-section>
<q-item-section>
<q-slider color="teal" :min="0" v-model="SliderIcon_volume" label="" :max="10" :step="1"></q-slider>
</q-item-section>
</q-item>Docstring
slider( range::AbstractRange{<:Union{Symbol,String,Real}}, fieldname::Union{Symbol,Nothing} = nothing, args...; lazy = false, kwargs..., )## The `slider` is a great way for the user to specify a number value between a minimum and maximum value, with optional steps between valid values. The slider also has a focus indicator (highlighted slider button), which allows for keyboard adjustments of the slider. # Examples --- ### View
julia > slider(1:5:100)--- # Arguments --- 1. Behaviour * `name::String` - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL ex. `car_id` * `snap::Bool` - Snap on valid values, rather than sliding freely; Suggestion: use with 'step' property * `reverse::Bool` - Work in reverse (changes direction) * `vertical::Bool` - Display in vertical direction * `labelalways::Bool` - Always display the label 2. Content * `label::Bool` - Popup a label when user clicks/taps on the slider thumb and moves it * `markers::Union{Bool, Int}` - Display markers on the track, one for each possible value for the model or using a custom step (when specifying a Number) ex. `markers` `markers="5"` * `dragrange::Bool` - User can drag range instead of just the two thumbs * `dragonlyrange::Bool` - User can drag only the range instead and NOT the two thumbs 3. General * `tabindex::Union{Int, String}` - Tabindex HTML attribute value ex. `0` `100` 4. Labels * `labelcolorleft::String` - Color name for left label background from the [Color Palette](https://quasar.dev/style/color-palette) ex. `primary` `teal-10` * `labeltextcolorleft::String` - Color name for left label text from the [Color Palette](https://quasar.dev/style/color-palette) ex. `primary` `teal-10` * `labelcolorright::String` - Color name for right label background from the [Color Palette](https://quasar.dev/style/color-palette) ex. `primary` `teal-10` * `labeltextcolorright::String` - Color name for right label text from the [Color Palette](https://quasar.dev/style/color-palette) ex. `primary` `teal-10` * `labelvalueleft::Union{String, Int}` - Override default label for min value ex. `labelvalueleft="model.min + 'px'"` * `labelvalueright::Union{String, Int}` - Override default label for max value ex. `labelvalueright="model.max + 'px'"` 5. Model * `range::AbstractRange{T}` - The range of values to select from min:step:max, symbols or strings can be used to reference model fields, e.g. `range("min":2:"max", :myvalue)` * `lazy::Bool` - If true, update the value of the model field only upon release of the slider 6. State * `disable::Bool` - Put component in disabled mode * `readonly::Bool` - Put component in readonly mode 7. Style * `color::String` - Color name for component from the [Color Palette](https://quasar.dev/style/color-palette) ex. `primary` `teal-10` * `labelcolor::String` - Color name for component from the [Color Palette](https://quasar.dev/style/color-palette) ex. `primary` `teal-10` * `thumbpath::String` - Set custom thumb svg path ex. `M5 5 h10 v10 h-10 v-10` * `dark::Bool` - Notify the component that the background is a dark color * `dense::Bool` - Dense mode; occupies less space
Spinner
{{spinner_count}}
[
spinner("hourglass", color = "primary", size = "20px", @iif("spinner_count <10")),
p("{{spinner_count}}"),
btn("Start timer", @click(:spinner_start), loading = :spinner_start),
]
@app begin
@out spinner_count = 0
@in spinner_start = false
@onbutton spinner_start begin
while spinner_count <= 10
@show spinner_count
spinner_count += 1
sleep(0.5)
end
spinner_count = 0
end
end
<q-spinner-hourglass color="primary" v-if="spinner_count <10" size="20px"></q-spinner-hourglass>
<p>
{{spinner_count}}
</p>
<q-btn :loading="spinner_start" label="Start timer" v-on:click="spinner_start = true"></q-btn>Docstring
spinner(spinner_type::Union{String,Symbol} = "", args...; kwargs...)A `spinner` is used to show the user a timely process is currently taking place. It is an important UX feature, which gives the user the feeling the system is continuing to work for longer term activities, like grabbing data from the server or some heavy calculations. --- # Examples --- ### Model
julia > @vars SpinnerModel begin box::R{String} = "box" comment::R{String} = "comment" hourglass::R{String} = "hourglass" end### View
julia > spinner(color = "primary", size = "3em") julia > spinner(:box, color = "orange", size = "5.5em") julia > spinner(:comment, color = "green", size = "3em") julia > spinner(:hourglass, color = "purple", size = "4em")--- # Arguments --- * `size::String` - Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) ex. `16px` `2rem` `xs` `md` * `color::String` - Color name for component from the [Color Palette](https://quasar.dev/style/color-palette) ex. `primary` `teal` * `thickness::Int` - Override value to use for stroke-width ex. `5`
Tabs
Photos content
Videos content
Movies content
[
tabgroup(
:tab_selected,
inlinelabel = true,
class = "bg-primary text-white shadow-2",
[
tab(name = "photos", icon = "photos", label = "Photos"),
tab(name = "videos", icon = "slow_motion_video", label = "Videos"),
tab(name = "movies", icon = "movie", label = "Movies"),
],
),
tabpanels(
:tab_selected,
animated = true,
var"transition-prev" = "scale",
var"transition-next" = "scale",
[
tabpanel(name = "photos", [p("Photos content")]),
tabpanel(name = "videos", [p("Videos content")]),
tabpanel(name = "movies", [p("Movies content")]),
],
),
]
@app begin
@in tab_selected = "photos"
end
<q-tabs inline-label="" v-model="tab_selected" class="bg-primary text-white shadow-2">
<q-tab name="photos" icon="photos" label="Photos"></q-tab>
<q-tab name="videos" icon="slow_motion_video" label="Videos"></q-tab>
<q-tab name="movies" icon="movie" label="Movies"></q-tab>
</q-tabs>
<q-tab-panels transition-prev="scale" v-model="tab_selected" transition-next="scale" animated="">
<q-tab-panel name="photos">
<p>
Photos content
</p>
</q-tab-panel>
<q-tab-panel name="videos">
<p>
Videos content
</p>
</q-tab-panel>
<q-tab-panel name="movies">
<p>
Movies content
</p>
</q-tab-panel>
</q-tab-panels>Docstring
tabgroup(fieldname::Union{Symbol,Nothing} = nothing, args...; kwargs...)## The `menu` component is a convenient way to show menus. Goes very well with `list` as dropdown content, but it's by no means limited to it. # Examples --- ### Model
julia > @vars TabModel begin tab_m::R{String} = "tab" end### View
julia > tabgroup( :tab_m, inlinelabel = true, class = "bg-primary text-white shadow-2", [ tab(name = "photos", icon = "photos", label = "Photos"), tab(name = "videos", icon = "slow_motion_video", label = "Videos"), tab(name = "movies", icon = "movie", label = "Movies"), ], )--- # Arguments --- 1. Behaviour * `target::Union{Bool, String}` - Breakpoint (in pixels) of tabs container width at which the tabs automatically turn to a justify alignment. Default. `600` | Example. `breakpoint! ="500"` 2. Content * `vertical::Bool` - Use vertical design (tabs one on top of each other rather than one next to the other horizontally) * `outsidearrows::Bool` - Reserve space for arrows to place them on each side of the tabs (the arrows fade when inactive) * `mobilearrows::Bool` - Force display of arrows (if needed) on mobile * `align::String` - Horizontal alignment the tabs within the tabs container. Default: `center` | Accepted Values: `left`, `center`, `right` `justify` | Example. `right` * `breakpoint::Union{Int, String}` - Breakpoint (in pixels) of tabs container width at which the tabs automatically turn to a justify alignment. Default: `600` | Example. `breakpoint! = "500"` * `lefticon::String` - The name of an icon to replace the default arrow used to scroll through the tabs to the left, when the tabs extend past the width of the tabs container. Example: `arrow_left` * `righticon::String` - The name of an icon to replace the default arrow used to scroll through the tabs to the right, when the tabs extend past the width of the tabs container. Example: `arrow_right` * `stretch::Bool` - When used on flexbox parent, tabs will stretch to parent's height * `shrink::Bool` - By default, `tabs` is set to grow to the available space; However, you can reverse that with this prop; Useful (and required) when placing the component in a `toolbar` * `switchindicator::Bool` - Switches the indicator position (on left of tab for vertical mode or above the tab for default horizontal mode) * `narrowindicator::Bool` - Allows the indicator to be the same width as the tab's content (text or icon), instead of the whole width of the tab * `inlinelabel::Bool` - Allows the text to be inline with the icon, should one be used * `nocaps::Bool` - Turns off capitalizing all letters within the tab (which is the default) 3. Style * `activeclass::String` - The class to be set on the active tab * `activecolor::String` - The color to be attributed to the text of the active tab. Examples. `teal-10` `primary` * `activecolorbg::String` - The color to be attributed to the background of the active tab. Examples. `teal-10` `primary` * `indicatorcolor::String` - The color to be attributed to the indicator (the underline) of the active tab. Examples. `teal-10` `primary` * `contentclass::String` - Class definitions to be attributed to the content wrapper * `dense::Bool` - Dense mode; occupies less space
Table
table(:Table_data, flat = true, bordered = true, title = "Treats")
@app begin
@out Table_data = DataTable(
DataFrame(
name = [
"Frozen Yogurt",
"Ice cream sandwich",
"Eclair",
"Cupcake",
"Gingerbread",
"Jelly bean",
"Lollipop",
"Honeycomb",
"Donut",
"KitKat",
],
calories = [159, 237, 262, 305, 356, 375, 392, 408, 452, 518],
fat = [6.0, 9.0, 16.0, 3.7, 16.0, 0.0, 0.2, 3.2, 25.0, 26.0],
carbs = [24, 37, 23, 67, 49, 94, 98, 87, 51, 65],
),
)
end
<q-table flat="" bordered="" :columns="Table_data.columns" v-model="Table_data" title="Treats" :data="Table_data.data" row-key="__id"></q-table>Table pagination
table(
:TablePagination_data,
pagination = :TablePagination_tpagination,
flat = true,
bordered = true,
title = "Treats",
)
@app begin
@out TablePagination_data = DataTable(
DataFrame(
name = [
"Frozen Yogurt",
"Ice cream sandwich",
"Eclair",
"Cupcake",
"Gingerbread",
"Jelly bean",
"Lollipop",
"Honeycomb",
"Donut",
"KitKat",
],
calories = [159, 237, 262, 305, 356, 375, 392, 408, 452, 518],
fat = [6.0, 9.0, 16.0, 3.7, 16.0, 0.0, 0.2, 3.2, 25.0, 26.0],
carbs = [24, 37, 23, 67, 49, 94, 98, 87, 51, 65],
),
)
@in TablePagination_tpagination = DataTablePagination(rows_per_page = 3)
end
<q-table flat="" bordered="" :pagination="TablePagination_tpagination" :columns="TablePagination_data.columns" v-model="TablePagination_data" title="Treats" :data="TablePagination_data.data" row-key="__id"></q-table>Table with search
table(
:TableSearch_data,
flat = true,
bordered = true,
title = "Treats",
var"row-key" = "name",
filter = :TableSearch_dfilter,
hideheader = "",
template(
var"v-slot:top-right" = "",
textfield(
"",
:TableSearch_dfilter,
dense = true,
debounce = "300",
placeholder = "Search",
[template(var"v-slot:append" = true, icon("search"))],
),
),
)
@app begin
@out TableSearch_data = DataTable(
DataFrame(
name = [
"Frozen Yogurt",
"Ice cream sandwich",
"Eclair",
"Cupcake",
"Gingerbread",
"Jelly bean",
"Lollipop",
"Honeycomb",
"Donut",
"KitKat",
],
calories = [159, 237, 262, 305, 356, 375, 392, 408, 452, 518],
fat = [6.0, 9.0, 16.0, 3.7, 16.0, 0.0, 0.2, 3.2, 25.0, 26.0],
carbs = [24, 37, 23, 67, 49, 94, 98, 87, 51, 65],
),
)
@in TableSearch_dfilter = ""
end
<q-table flat="" bordered="" :columns="TableSearch_data.columns" v-model="TableSearch_data" title="Treats" hide-header="" :data="TableSearch_data.data" :filter="TableSearch_dfilter" row-key="name">
<template v-slot:top-right="">
<q-input debounce="300" label="" v-model="TableSearch_dfilter" placeholder="Search" dense="">
<template v-slot:append="">
<q-icon name="search"></q-icon>
</template>
</q-input>
</template>
</q-table>Table grid layout
table(:TableGrid_data, flat = true, bordered = true, grid = true, title = "Treats")
@app begin
@out TableGrid_data = DataTable(
DataFrame(
name = [
"Frozen Yogurt",
"Ice cream sandwich",
"Eclair",
"Cupcake",
"Gingerbread",
"Jelly bean",
"Lollipop",
"Honeycomb",
"Donut",
"KitKat",
],
calories = [159, 237, 262, 305, 356, 375, 392, 408, 452, 518],
fat = [6.0, 9.0, 16.0, 3.7, 16.0, 0.0, 0.2, 3.2, 25.0, 26.0],
carbs = [24, 37, 23, 67, 49, 94, 98, 87, 51, 65],
),
)
end
<q-table flat="" bordered="" grid="" :columns="TableGrid_data.columns" v-model="TableGrid_data" title="Treats" :data="TableGrid_data.data" row-key="__id"></q-table>Docstring
table(fieldname::Symbol, args...; kwargs...)--- # Examples --- ### Model
julia > @vars TableModel begin data::R{DataTable} = DataTable( DataFrame(rand(100000, 2), ["x1", "x2"]), DataTableOptions(columns = [Column("x1"), Column("x2", align = :right)]), ) data_pagination::DataTablePagination = DataTablePagination(rows_per_page = 50) end### View
julia > table( :data; pagination = :data_pagination, style = "height: 350px;", title = "Random numbers", )
Time picker
[
timepicker(:timepicker_time, mask = "HH:mm"),
timepicker(:timepicker_time, mask = "HH:mm:ss"),
]
@app begin
@in timepicker_time = Dates.Time(20, 23, 5)
end
<q-time v-model="timepicker_time" mask="HH:mm"></q-time>
<q-time v-model="timepicker_time" mask="HH:mm:ss"></q-time>Docstring
tabpanelgroup(args...; kwargs...)The `timepicker` component provides a method to input time. --- # Examples --- ### Model
julia > @vars TabPanelModel begin time::R{Time} = Dates.Time(t -> Dates.minute(t) == 20, 23) timewithseconds::R{Time} = Dates.Time(t -> Dates.second(t) == 12, 20, 23) end### View
julia > Html.div( class = "q-gutter-md", [timepicker(:time, mask = "HH:mm"), timepicker(:timewithseconds, mask = "HH:mm:ss")], )--- # Arguments --- 1. Behaviour * `name:String` - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL * `landscape::Bool` - Display the component in landscape mode * `format24h::Bool` - Forces 24 hour time display instead of AM/PM system * `options::String` - Optionally configure what time is the user allowed to set; Overridden by 'hour-options', 'minute-options' and 'second-options' if those are set; For best performance, reference it from your scope and do not define it inline. ex. `options!="(hr, min, sec) => hr <= 6"` * `optionshour::Array` - Optionally configure what hours is the user allowed to set; Overrides 'options' prop if that is also set. ex. `optionshour! ="[3,6,9]"` * `optionsminute::Array` - Optionally configure what minutes is the user allowed to set; Overrides 'options' prop if that is also set ex. `optionsminute! ="[3,6,9]"` * `optionssecond::Array` - Optionally configure what seconds is the user allowed to set; Overrides 'options' prop if that is also set ex. `optionssecond! ="[3,6,9]"` * `withseconds::Bool` - Allow the time to be set with seconds 2. Content * `nowbtn::Bool` - Display a button that selects the current time 3. Model * `mask::String` - Mask (formatting string) used for parsing and formatting value ex. `HH:mm:ss`` * `withseconds::Bool` - Allow the time to be set with seconds 4. State * `readonly::Bool` - Put component in readonly mode * `disable::Bool` - Put component in disabled mode 5. Style * `color::String` - Color of the component from the color palette * `textcolor::String` - Overrides text color (if needed); Color name from the Quasar Color Palette * `dark::Bool` - Notify the component that the background is a dark color * `square::Bool` - Removes border-radius so borders are squared * `flat::Bool` - Applies a 'flat' design (no default shadow) * `bordered::Bool` - Applies a default border to the component
Timeline
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
[
timeline(
color = "secondary",
[
timelineentry("Timeline Heading", heading = true),
timelineentry(title = "Event Title", subtitle = "February 22, 1986"),
timelineentry(
title = "Event Title",
subtitle = "February 22, 1986",
avatar = "https://cdn.quasar.dev/img/avatar2.jpg",
[
Html.div(
"Lorem ipsum dolor sit amet, consectetur adipisicing elit,\n sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris\n nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\n reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia\n deserunt mollit anim id est laborum.",
),
],
),
],
),
]
<q-timeline color="secondary">
<q-timeline-entry heading="">
Timeline Heading
</q-timeline-entry>
<q-timeline-entry title="Event Title" subtitle="February 22, 1986"></q-timeline-entry>
<q-timeline-entry avatar="https://cdn.quasar.dev/img/avatar2.jpg" title="Event Title" subtitle="February 22, 1986">
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.
</div>
</q-timeline-entry>
</q-timeline>Docstring
timeline(args...; kwargs...)The `timeline` component displays a list of events in chronological order. It is typically a graphic design showing a long bar labelled with dates alongside itself and usually events. Timelines can use any time scale, depending on the subject and data. --- # Examples --- ### View
julia > Html.div( class = "q-px-lg q-pb-md", [ timeline( color = "secondary", [ timelineentry("Timeline Heading", heading = true), timelineentry( title = "Event Title", subtitle = "February 22, 1986", [ Html.div( "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", ), ], ), timelineentry( title = "Event Title", subtitle = "February 21, 1986", icon = "delete", [ Html.div( "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", ), ], ), timelineentry( title = "Event Title", subtitle = "February 22, 1986", avatar = "https://cdn.quasar.dev/img/avatar2.jpg", [ Html.div( "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", ), ], ), ], ), ], )--- # Arguments --- 1. Behavior * `side::String` - Side to place the timeline entries in dense and comfortable layout; For loose layout it gets overridden by `timelineentry` side prop. (default: `"right"`) | ex. `"left"` | `"right"` * `layout::String` - Layout of the timeline. Dense keeps content and labels on one side. Comfortable keeps content on one side and labels on the opposite side. Loose puts content on both sides. (default: `"dense"`) | ex. `"comfortable"` | `"loose"` | `"dense"` 2. Style * `color::String` - Color name for component from the Quasar Color Palette. ex. `"primary"` | `"teal-10"` * `dark::Bool` - Notify the component that the background is a dark color
Toggle
toggle("Toggle", :Toggle_value, color = "blue")
@app begin
@in Toggle_value = "true"
end
<q-toggle color="blue" label="Toggle" v-model="Toggle_value"></q-toggle>Toggle with custom true/false value
toggle(
"Click me!",
:ToggleValue_value,
color = "blue",
var"true-value" = "On",
var"false-value" = "Off",
)
@app begin
@in ToggleValue_value = "true"
end
<q-toggle color="blue" false-value="Off" true-value="On" label="Click me!" v-model="ToggleValue_value"></q-toggle>Multiple toggles
Html.div(
@recur("toggle in ToggleMultiple_toggle_list"),
toggle(:toggle, :ToggleMultiple_toggle_states, val = :toggle, color = :toggle),
)
@app begin
@out ToggleMultiple_toggle_list = ["red", "green", "yellow"]
@out ToggleMultiple_toggle_states = ["true", "false", "true"]
end
<div v-for="toggle in ToggleMultiple_toggle_list">
<q-toggle :color="toggle" :val="toggle" :label="toggle" v-model="ToggleMultiple_toggle_states"></q-toggle>
</div>Docstring
toggle(label::Union{String,Symbol}, fieldname::Union{Symbol,Nothing}, args...; kwargs...)The `toggle` component is another basic element for user input. You can use this for turning settings, features or true/false inputs on and off. --- # Examples --- ### Model
julia > @vars ToggleModel begin value::R{Bool} = false selection::R{Vector{String}} = ["yellow", "red"] end### View
julia > toggle("Blue", color = "blue", :selection, val = "blue") julia > toggle("Yellow", color = "yellow", :selection, val = "yellow") julia > toggle("Green", color = "green", :selection, val = "green") julia > toggle("Red", color = "red", :selection, val = "red")--- # Arguments --- 1. Behaviour * `name::String` - Used to specify the name of the control; Useful if dealing with forms submitted directly to a URL ex. `"car_id"` * `indeterminatevalue::Union{Int, Float64, String, Bool}` - What model value should be considered as 'indeterminate'? default value: `null` ex. `0` `"not_answered"` * `toggleorder::String` - Determines toggle order of the two states ('t' stands for state of true, 'f' for state of false); If 'toggle-indeterminate' is true, then the order is: indet -> first state -> second state -> indet (and repeat), otherwise: indet -> first state -> second state -> first state -> second state -> ... default `"tf"` ex. `"tf"` `"ft"` * `toggleindeterminate::Bool` - When user clicks/taps on the component, should we toggle through the indeterminate state too? * `keepcolor::Bool` - Should the color (if specified any) be kept when the component is unticked/ off? 2. Content * `icon::String` - Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it) ex. `map` `ion-add` `img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg` `img:path/to/some_image.png` * 3. General * `tabindex::Union{Int, String}` - Tabindex HTML attribute value `0` `100` 4. Icons * `checkedicon::String` - The icon to be used when the toggle is on ex. `visibility` * `uncheckedicon::String` - The icon to be used when the toggle is off ex. `visibility-off` * `indeterminateicon::String` - The icon to be used when the model is indeterminate ex. `help` 5. Label * `label::Union{String,Symbol}` - Label to display along the component ex. `I agree to terms and conditions` * `leftlabel::Bool` - Label (if any specified) should be displayed on the left side of the component 6. Model * `val::Union{Bool, Int, Float64, String, Vector}` - Works when model ('value') is Array. It tells the component which value should add/remove when ticked/unticked ex. `car` * `truevalue::Union{Bool, Int, Float64, String, Vector}` - What model value should be considered as checked/ticked/on? default `true` ex. `Agreed` * `falsevalue::Union{Bool, Int, Float64, String, Vector}` - What model value should be considered as unchecked/unticked/off? default `false` ex. `Not agreed` 7. State * `disabled::Bool` - Put component in disabled mode 8. style * `size::String` - Size in CSS units, including unit name or standard size name (xs|sm|md|lg|xl) ex. `16px` `1.5rem` `xs` `md` * `color::String` - Color name for component from the [Color Palette](https://quasar.dev/style/color-palette) ex. `primary` `teal-10` * `dark::Bool` - Notify the component that the background is a dark color * `dense::Bool` - Dense mode; occupies less space * `iconcolor` - Override default icon color (for truthy state only); Color name for component from the [Color Palette](https://quasar.dev/style/color-palette) ex. `primary` `teal-10`
Toolbar
[
toolbar(
class = "text-primary",
[
btn(flat = true, round = true, dense = true, icon = "menu"),
toolbartitle("Toolbar"),
btn(flat = true, round = true, dense = true, icon = "more_vert"),
],
),
]
<q-toolbar class="text-primary">
<q-btn flat="" round="" label="" icon="menu" dense=""></q-btn>
<q-toolbar-title>
Toolbar
</q-toolbar-title>
<q-btn flat="" round="" label="" icon="more_vert" dense=""></q-btn>
</q-toolbar>Docstring
toolbar(args...; kwargs...)`toolbar` is a component usually part of Layout Header and Footer, but it can be used anywhere on the page. --- # Examples --- ### View
julia > toolbar( class = "text-primary", [ btn(flat = true, round = true, dense = true, icon = "menu"), toolbartitle("Toolbar"), btn(flat = true, round = true, dense = true, icon = "more_vert"), ], )--- # Arguments --- * `inset::Bool` - Apply an inset to content (useful for subsequent toolbars)
Tooltip
[
icon("warning", size = "25px", [tooltip("Fire!")]),
btn("Hover me", color = "primary", [tooltip("Additional info")]),
]
<q-icon name="warning" size="25px">
<q-tooltip>
Fire!
</q-tooltip>
</q-icon>
<q-btn color="primary" label="Hover me">
<q-tooltip>
Additional info
</q-tooltip>
</q-btn>Docstring
tooltip(args...; kwargs...)
Uploader
uploader(
multiple = true,
accept = :upl_acceptext,
maxfilesize = :upl_maxsize,
maxfiles = 10,
autoupload = true,
hideuploadbtn = true,
label = "Upload Images",
nothumbnails = true,
style = "max-width: 95%; width: 95%; margin: 0 auto;",
@on("rejected", :rejected),
@on("uploaded", :uploaded),
@on("finish", :finished),
@on("failed", :failed),
@on("uploading", :uploading),
@on("start", :started),
@on("added", :added),
@on("removed", :removed)
)
@app begin
@out upl_acceptext = ".jpg, .jpeg, .pdf, image/*"
@out upl_imgsrc = "https://placehold.co/600x400"
@out upl_maxsize = 1 * 1024 * 1024
@out upl_caption = "No image selected"
@onchange fileuploads begin
if !(isempty(fileuploads))
@info "File was uploaded: " fileuploads
filename = Random.randstring(10) * "_" * base64encode(fileuploads["name"])
try
isdir(joinpath("public", "uploads")) ||
mkpath(joinpath("public", "uploads"))
mv(fileuploads["path"], joinpath("public", "uploads", filename))
catch e
@error "Error processing file: $(e)"
notify(__model__, "Error processing file: $(fileuploads["name"])")
end
upl_imgsrc = "/uploads/$(filename)"
fileuploads = Dict{AbstractString,AbstractString}()
@show upl_imgsrc
end
end
@event rejected begin
@info "rejected"
notify(__model__, "File rejected. Please make sure it is a valid image file.")
end
@event added begin
@info "added"
end
@event removed begin
@info "removed"
end
@event started begin
@info "started"
end
@event uploading begin
@info "uploading"
end
@event uploaded begin
@info "uploaded"
end
@event finished begin
@info "finished"
notify(__model__, "Upload finished.")
end
@event failed begin
@info "failed"
end
end
<q-uploader v-on:start="function(event) { handle_event(event, 'started') }" label="Upload Images" hide-upload-btn="" auto-upload="" v-on:failed="function(event) { handle_event(event, 'failed') }" v-on:uploaded="function(event) { handle_event(event, 'uploaded') }" no-thumbnails="" v-on:removed="function(event) { handle_event(event, 'removed') }" v-on:finish="function(event) { handle_event(event, 'finished') }" :url="'/____/upload/' + channel_" v-on:rejected="function(event) { handle_event(event, 'rejected') }" max-files="10" v-on:uploading="function(event) { handle_event(event, 'uploading') }" multiple="multiple" :accept="upl_acceptext" v-on:added="function(event) { handle_event(event, 'added') }" style="max-width: 95%; width: 95%; margin: 0 auto;" :max-file-size="upl_maxsize"></q-uploader>Video
video(
src = "https://www.youtube.com/embed/G2iIXMjIIcA?si=n8nETlgI-mRELVBF?cc_load_policy=1",
var":ratio" = "16/9",
)
<q-video src="https://www.youtube.com/embed/G2iIXMjIIcA?si=n8nETlgI-mRELVBF?cc_load_policy=1" :ratio="16/9"></q-video>Docstring
video(args...; kwargs...)Using the `video` component makes embedding a video like Youtube easy. It also resizes to fit the container by default. --- # Examples --- ### Model
julia > @vars RadioModel begin v_ratio::R{String} = "16/9" end### View
julia > video(src = "https://www.youtube.com/embed/dQw4w9WgXcQ") julia > video(ratio = :v_ratio, src = "https://www.youtube.com/embed/k3_tw44QsZQ?rel=0")--- # Arguments --- 1. Accessibility * `title::String` - (Accessibility) Set the native 'title' attribute value of the inner iframe being used 2. Behaviour * `fetchpriority::String` - Provides a hint of the relative priority to use when fetching the iframe document. Default: `"auto"` | Accepted values: `"auto"`, `"high"`, `"low"` * `loading::String` - Indicates how the browser should load the iframe. Default: `"eager"` | Accepted Values: `"eager"`, `"lazy"` * `referrerpolicy::String` - Indicates which referrer to send when fetching the frame's resource. Default: `"strict-origin-when-cross-origin"` | Accepted Values: `"no-referrer"`, `"no-referrer-when-downgrade"`, `"origin"`, `"origin-when-cross-origin"`, `"origin-when-cross-origin"`, `"strict-origin"`, `"strict-origin-when-cross-origin"`, `"unsafe-url"` 3. Model * `src::String` - The source url to display in an iframe. 4. Style * `ratio::Union{String,Int,Float64}` - Aspect ratio for the content; If value is a String, then avoid using a computational statement (like '16/9') and instead specify the String value of the result directly (eg. '1.7777')