Документация Engee

Layout

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>, , <meta viewport=""></meta> и <BODY>, вместе с выходным содержимым.

Если partial имеет значение true, элементы HTML макета страницы не возвращаются.

Примеры

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>"
function page(elemid, args...; partial::Bool = false, title::String = "", class::String = "", style::String = "",
                channel::String = Genie.config.webchannels_default_route , head_content::String = "", kwargs...)

Генерирует HTML-код, соответствующий SPA (одностраничному приложению), определяя корневой элемент приложения 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>"
function row(args...; size=-1, xs=-1, sm=-1, md=-1, lg=-1, xl=-1, kwargs...)

Создает HTML-элемент div с CSS-классом Flexgrid Quasar row. Такие строки обычно содержат элементы, созданные с помощью cell, row или column, либо другие элементы, для которых вручную указываются классы сетки, например "col", "col-sm-5".

Именованные аргументы размера сетки size, xs и т. д. более подробно описываются в документации функции cell.

Пример

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...)

Создает HTML-элемент div с CSS-классом Flexgrid Quasar column. Такие столбцы обычно содержат элементы, созданные с помощью cell, row или column, либо другие элементы, для которых вручную указываются классы сетки, например "col", "col-sm-5".

Именованные аргументы размера сетки size, xs и т. д. более подробно описываются в документации функции cell.

Пример

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...)

Создает HTML-элемент div с CSS-классом Flexgrid Quasar col. Кроме того, ячейки относятся к классу 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 или column. Дополнительные сведения см. в описании компонента Flexgrid в Quasar.

Пример

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

Обеспечивает поддержку тем для приложений и страниц Stipple. Включает стандартные CSS-файлы Stipple и дополнительные элементы в виде HTML-тегов, которые можно добавить, поместив их в коллекцию Stipple.Layout.THEMES.

Пример

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)