布局

# Stipple.Layout.layout — Function

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

用于创建基本网页结构的实用程序，包括 doctype 以及<HTML>,<HEAD>,<TITLE>,<meta viewport=""></meta> 和<BODY> 标记，以及输出内容。</TITLE>

如果`partial` 是`true` ，则不返回页面布局 HTML 元素。 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.js"></script><script src="/js/quasar.umd.min.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.js"></script><script src="/js/quasar.umd.min.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>"

# Stipple.Layout.page — Function

function page(elemid, args...; partial::Bool = false, title::String = "", class::String = "", style::String = "",
                channel::String = Genie.config.webchannels_default_route , head_content::String = "", kwargs...)

生成与 SPA（单页应用程序）相对应的 HTML 代码，定义 Vue 应用程序的根元素。

示例

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.js"></script><script src="/js/quasar.umd.min.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>"

# Stipple.Layout.row — Function

function row(args...; size=-1, xs=-1, sm=-1, md=-1, lg=-1, xl=-1, kwargs...)

使用 Quasar 的 Flexgrid CSS 类`row` 创建`div` HTML 元素。此类行通常包含以 cell,row 创建的元素、 column或其他手动接收网格类的元素，如`"col"`,"col-sm-5" 。

网格大小参数`size`,xs 等在 cell.

示例

julia> row(span("Hello"))
"<div class="row"><span>Hello</span></div>"

# Stipple.Layout.column — Function

function column(args...; size=-1, xs=-1, sm=-1, md=-1, lg=-1, xl=-1, kwargs...)

使用 Quasar 的 Flexgrid CSS 类`column` 创建`div` HTML 元素。此类列通常包含以 cell, row,column 或其他手动接收网格类的元素，如`"col"`,"col-sm-5" 。

网格大小参数`size`,xs 等在 cell.

示例

julia> column(span("Hello"))
"<div class="column"><span>Hello</span></div>"

# Stipple.Layout.cell — Function

function cell(args...; size::Int=0, xs::Int=0, sm::Int=0, md::Int=0, lg::Int=0, xl::Int=0, kwargs...)

使用 Quasar 的柔性网格 CSS 类`col` 创建`div` HTML 元素。此外，单元格的类为`st-col` ，由 Stipple 主题控制。

如果指定了大小，则会添加`col-$size` 类。

如果指定了标签类 (xs,sm,md,lg,xl)，则会添加相应的类`col-$tag-$md` ，例如`col-sm-6` 。

参数：

"" /0: 共享的剩余空间（例如`"col"`,"col-sm")
1 -12 /"1" -"12": 栏宽（例如`"col-5"`,"col-sm-5")
"auto"/:auto: 内容的高度/宽度 ("col-auto","col-sm-auto")
-1 /nothing: 无说明

单元格通常包含在 rows 或 columns.更多信息，请参阅 Quasar’s Flex Grid。

示例

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>"

# Stipple.Layout.theme — Function

function theme() :: String

为 Stipple 应用程序和页面提供主题支持。它包含 Stipple 的默认 CSS 文件，并可通过推送到`Stipple.Layout.THEMES` 集合，以 HTML 标记的形式注入其他元素。

示例

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)