布局
#
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
: 无说明
单元格通常包含在 row
s 或 column
s.更多信息,请参阅 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)