function layout(output::Union{String,Vector}; partial::Bool = false, title::String = "", class::String = "", style::String = "",
head_content::String = "", channel::String = Genie.config.webchannels_default_route) :: String
Utility for creating a basic web page structure, including doctype as well as <HTML>, <HEAD>, <TITLE>, <META viewport>, and <BODY> tags, together with the output content.
If partial
is true
, the page layout HTML elements are not returned.
Examples
julia> layout([
span("Hello", @text(:greeting))
])
"<!DOCTYPE html>
<html><head><title></title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" /></head><body class style><link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap" rel="stylesheet" /><link href="/css/stipple/stipplecore.css" rel="stylesheet" /><link href="/css/stipple/quasar.min.css" rel="stylesheet" /><span v-text='greeting'>Hello</span><script src="/js/channels.js?v=1.17.1"></script><script src="/js/underscore-min.js"></script><script src="/js/vue.global.prod.js"></script><script src="/js/quasar.umd.prod.js"></script>
<script src="/js/apexcharts.min.js"></script><script src="/js/vue-apexcharts.min.js"></script><script src="/js/stipplecore.js" defer></script><script src="/js/vue_filters.js" defer></script></body></html>"
julia> layout([
span("Hello", @text(:greeting))
], partial = true)
"<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap" rel="stylesheet" /><link href="/css/stipple/stipplecore.css" rel="stylesheet" /><link href="/css/stipple/quasar.min.css" rel="stylesheet" /><span v-text='greeting'>Hello</span><script src="/js/channels.js?v=1.17.1"></script><script src="/js/underscore-min.js"></script><script src="/js/vue.global.prod.js"></script><script src="/js/quasar.umd.prod.js"></script>
<script src="/js/apexcharts.min.js"></script><script src="/js/vue-apexcharts.min.js"></script><script src="/js/stipplecore.js" defer></script><script src="/js/vue_filters.js" defer></script>"
function page(elemid, args...; partial::Bool = false, title::String = "", class::String = "", style::String = "",
channel::String = Genie.config.webchannels_default_route , head_content::String = "", kwargs...)
Generates the HTML code corresponding to an SPA (a single page application), defining the root element of the Vue app.
Example
julia> page(:elemid, [
span("Hello", @text(:greeting))
])
"<!DOCTYPE html>
<html><head><title></title><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui" /></head><body class style><link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap" rel="stylesheet" /><link href="/css/stipple/stipplecore.css" rel="stylesheet" /><link href="/css/stipple/quasar.min.css" rel="stylesheet" /><div id=elemid><span v-text='greeting'>Hello</span></div><script src="/js/channels.js?v=1.17.1"></script><script src="/js/underscore-min.js"></script><script src="/js/vue.global.prod.js"></script><script src="/js/quasar.umd.prod.js"></script>
<script src="/js/apexcharts.min.js"></script><script src="/js/vue-apexcharts.min.js"></script><script src="/js/stipplecore.js" defer></script><script src="/js/vue_filters.js" defer></script></body></html>"
function row(args...; size=-1, xs=-1, sm=-1, md=-1, lg=-1, xl=-1, kwargs...)
Creates a div
HTML element with Quasar's Flexgrid CSS class row
. Such rows typically contain elements created with cell
or other elements that manually receive grid classes, e.g. "col"
, "col-sm-5"
.
The grid size kwargs size
, xs
, etc. are explained in more detail in the docs of cell
.
Example
julia> row(span("Hello"))
"<div class="row"><span>Hello</span></div>"
function column(args...; size=-1, xs=-1, sm=-1, md=-1, lg=-1, xl=-1, kwargs...)
Creates a div
HTML element with Quasar's Flexgrid CSS class column
. Such columns typically contain elements created with cell
, column
, or other elements that manually receive grid classes, e.g. "col"
, "col-sm-5"
.
The grid size kwargs size
, xs
, etc. are explained in more detail in the docs of cell
.
Example
julia> column(span("Hello"))
"<div class="column"><span>Hello</span></div>"
function cell(args...; size::Int=0, xs::Int=0, sm::Int=0, md::Int=0, lg::Int=0, xl::Int=0, kwargs...)
Creates a div
HTML element with Quasar's flex grid CSS class col
. Moreover, cells are of the class st-col
, which is controlled by the Stipple theme.
If size is specified, the class col-$size
is added instead.
If tag classes (xs
, sm
, md
, lg
, xl
) are specified, the respective classes col-$tag-$md
are added, e.g. col-sm-6
.
Parameters:
""
/0
: shared remaining space (e.g."col"
,"col-sm"
)1
-12
/"1"
-"12"
: column width (e.g."col-5"
,"col-sm-5"
)"auto"
/:auto
: height/width from content ("col-auto"
,"col-sm-auto"
)-1
/nothing
: no specification
The cells are typically included within row
s or column
for more information.
Example
julia> row(cell(size = 2, md = 6, sm = 12, span("Hello")))
"<div class="row"><div class="st-col col-2 col-sm-12 col-md-6"><span>Hello</span></div></div>"
function theme() :: String
Provides theming support for Stipple apps and pages. It includes Stipple's default CSS files and additional elements, in the form of HTML tags, can be injected by pushing to the Stipple.Layout.THEMES[][]
collection.
Example
julia> theme()
"<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" /><link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400&display=swap" rel="stylesheet" /><link href="/css/stipple/stipplecore.css" rel="stylesheet" />"
julia> StippleUI.theme()
"<link href="/css/stipple/quasar.min.css" rel="stylesheet" />"
julia> push!(Stipple.Layout.THEMES[], StippleUI.theme)