点画的主要组成部分的画廊。jl

页面进行中。

本文介绍了在使用基于框架的web界面时在Engee中使用的主要图形组件的画廊。精灵。

要创建各种信息面板和用户界面，它被使用点画。jl是Julia语言的反应式UI框架，它是Genie的一部分，提供了一套方便的现成界面元素。

点画组件。jls基于库类星体（Vue。js）并允许您创建交互式面板，按钮，表单，表格和其他元素，这些元素在*Engee*内部用于显示数据和构建用户界面。

点画的主要成分如下所述。在*Engee*工作的jl，以及它们的使用示例。在文章中点画的辅助部件的画廊。jl 提供了辅助组件，这在不太受欢迎的任务中也非常有用。

别针

图标

显示代码

朱莉娅
HTML格式

badge("1.0.0+", color = "primary")

<q-badge color="primary" label="1.0.0+"></q-badge>

程序化使用

badge()

图标组件允许您创建一个小图标来显示需要突出显示并使其可见的上下文信息。它通常与其他元素（如用户的头像）一起使用，以显示新消息或通知的数量。

例子:

模型:

julia> @vars BadgeModel begin
         myicon = "bluetooth"
       end

查看:

julia> Html.div("Badge", class = "text-h6", [
         badge("1.0.0+", color = "primary")
       ])

参数

内容
- 浮动::Bool --相对于父元素在右上角显示图标。
- 透明::Bool --启用半透明模式（约0.8不透明度）;用于"浮动"图标。
- 多行::布尔 --允许文本移动到多行。
- 标签::Union{String,Int} --图标的主要文本;与默认插槽重叠。
- 对齐::字符串 --内容的垂直对齐（例如: 顶部, 中间, 底部).
- 大纲：布尔 --轮廓样式（无填充的彩色轮廓和文本）。
风格
- 颜色::字符串 --来自类星体调色板的图标的背景颜色（例如: 小学部, 茶-10).
- 文本颜色::字符串 --文本颜色（也来自类星体调色板）。
- 圆角::Bool --图标的圆形形状（药丸式）。

大量的

大量

big number

显示代码

朱莉娅
HTML格式

bignumber(number = "7")

<st-big-number title="" number="7"></st-big-number>

程序化使用

bignumber(
    label::Union{String,Symbol} = "",
    number::Union{Symbol,Number,Nothing} = nothing,
    args...;
    kwargs...,
)

显示大量的界面元素。

参数

标签::Union{String,Symbol}
数字::Union{String,Symbol,Nothing,String}
图标::Union{String,Symbol}
颜色::Union{String,Symbol}="positive|/"negative"
箭头::Union{String,Symbol}="up|/"down"

按钮

显示代码

朱莉娅
HTML格式

[
    p("Click count: {{Button_count}}"),
    btn("Process", @click(:Button_process)),
    btn("Increase count", @click("Button_count = Button_count+1")),
]

<p>Click count: {{ Button_count }}</p>
<q-btn label="Process" @click="Button_process"></q-btn>
<q-btn label="Increase count" @click="Button_count = Button_count+1"></q-btn>

带有图标的按钮

显示代码

朱莉娅
HTML格式

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

带有提示的按钮

显示代码

朱莉娅
HTML格式

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

带进度指示器的按钮

显示代码

朱莉娅
HTML格式

[
    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

显示代码

朱莉娅
HTML格式

checkbox("Checked", :Checkbox_checked)

反应式代码

@app begin
    @in Checkbox_checked = true
end

<q-checkbox label="Checked" v-model="Checkbox_checked"></q-checkbox>

多个复选框

multiple checkboxes

显示代码

朱莉娅
HTML格式

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

程序化使用

checkbox(
    label::Union{String,Symbol} = "",
    fieldname::Union{Symbol,Nothing} = nothing,
    args...;
    kwargs...,
)

"Checkbox"组件是用户输入的另一个基本元素。它可以用来给用户切换选项的能力。

例子:

模型:

julia > @vars CheckboxModel begin
    valone::R{Bool} = true
end

查看:

julia > checkbox(label = "Apples", fieldname = :valone, dense = true, size = "xl")

参数

行为举止
- 名称::字符串 -控件的名称;如果表单直接发送到URL并且您需要按名称区分字段，则很有用。
- 不确定值:联合{字符串,Float64,Int,Bool} -应该被认为是"未定义"的模型的值（不确定).
- toggleorder::字符串 -切换两种状态的顺序（t -条件 真的, f -条件 错误). 如果 切换-不确定=真，顺序如下: indet→第一状态→第二状态→indet （等在一个圆圈）。否则的话: indet→第一状态→第二状态→第一状态→第二状态→。... 例子：: "tf", "ft".
- 决定::布尔 -如果 真的 当点击/点击组件时，状态将通过"未定义"（不确定).
- keepcolor::Bool —如果指定，组件的颜色（如果指定）保持，即使开关关闭/关闭。
普通
- tabindex::联合{Int,字符串} -HTML属性的值 [医]tabindex.
马克
- 标签::Union{String,Symbol} -组件旁边显示的标签文本。
- leftlabel::Bool -如果 真的，标签（如果指定）显示在组件的左侧。
模型
- 字段名::符号 -组件模型字段的名称。
- Val::Union{String,Float64,Int,Bool} -模型时使用(价值)有一个类型 阵列. 定义选中/取消选中复选框时将添加/删除的值。
- truevalue::联合{Int,Float64,字符串} -模型的值，该值被认为是"启用/标记"状态。
- falsevalue::联合{Int,Float64,字符串} -模型的值，该值被认为是"关闭/未选中"状态。
条件
- 禁用::Bool -将组件置于非活动（禁用）状态。
风格
- 大小::字符串 -css单位的大小（表示测量单位）或标准尺寸名称之一（x/sm/md/lg/xl). 例子：: "16px", "2rem", "xs", "md".
- 颜色::字符串 -组件的颜色名称从类星体调色板，例如: 小学部, 茶-10.
- 黑暗::布尔 -通知组件背景在其下是黑暗的。
- 密集::布尔 -紧凑模式;组件占用更少的空间。

芯片

chip

显示代码

朱莉娅
HTML格式

chip("Add to calendar", icon = "event")

<q-chip icon="event">
    Add to calendar
</q-chip>

可点击的芯片

clickable chip

显示代码

朱莉娅
HTML格式

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

程序化使用

chip(args...; kwargs...)

"芯片"组件是简单的块状用户界面实体，其紧凑地显示例如联系人等更复杂的基本数据。

芯片可以包含诸如化身、文本或图标等实体，以及（可选）指针。如果设置提供，也可以关闭或删除它们。

例子:

查看:

julia > chip("Add to calendar", icon = "event")

参数

内容
- 图标::字符串 -根据类星体约定图标的名称。如果未使用前缀，则需要安装图标库。 img:. 如果指定行 "没有"，图标不会被渲染（但仍然会为它保留一个地方）。例子：: 地图, 离子-添加, img：https：//cdn。类星体。dev/徽标/svg/类星体-徽标。svg技术, img:path/to/some_image.巴布亚新几内亚.
- 图标::字符串 -右侧显示的图标的名称，根据与相同的规则 图标.
- iconremove::字符串 -"删除"操作（删除按钮）的图标名称，根据与 图标.
- 图标选择::字符串 -为所选状态显示的图标的名称，根据与 图标.
- 标签::Union{String,Int} -组件的文本内容;与默认插槽重叠。例子：: "乔*多伊", "书", 42.
普通
- tabindex::联合{Int,字符串} -HTML属性的值 [医]tabindex （例如: 0, 100).
模型
- 值::Bool -确定是否应该显示芯片的模型。意义 真的 默认情况下，这意味着组件是可见的。
- 选择::Bool -决定芯片是否被选择的模型。 需要修改器 .同步.
条件
- 可点击::Bool -使芯片可点击;在这种模式下，它响应指向并生成事件 点击.
- 可拆卸::Bool -增加了一个删除按钮;点击时，生成相应的删除事件。
- 禁用::Bool -将组件置于非活动状态（禁用）。
风格
- 涟漪：联盟{Bool，Dict} -设置"波纹"材质装饰（点击效果）。您可以禁用（错误）或传递配置对象（例如 真的, 中心：真, 颜色："蓝绿色").
- 密集::布尔 -紧凑模式;组件占用更少的空间。
- 大小::字符串 -芯片的大小按名称或CSS单位。例子：: x, ｓｍ, 医学博士, lg, xl号, 1雷姆.
- 黑暗::布尔 -通知组件其下的背景是暗的（用于正确的颜色选择）。
- 颜色::字符串 -组件的颜色从类星体调色板，例如: 小学部, 茶-10.
- 广场::布尔 -与默认值相比，减少了角的舍入，使形状更接近正方形。
- 大纲：布尔 -包括"轮廓"样式：彩色边框和无填充文本。

专栏

Stobets

column

显示代码

朱莉娅
HTML格式

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

            Hello

    </div>
    <div class="bg-red-2 column col-4">

            Genie

    </div>
</div>

日期字段

date field

显示代码

朱莉娅
HTML格式

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>

程序化使用

datefield(args...; kwargs...)

一种复杂类型的输入，它将文本字段与图标、日期选择器和弹出窗口相结合。默认情况下，日期选择器处于隐藏状态，并在单击图标时显示。弹出窗口用于在用户单击外部时隐藏日期选择器。定义了许多传递给文本字段、图标、弹出窗口和日期选择器的通用参数。此外，关键字参数可以使用关键字参数单独传递给这些组件中的每一个。 文本字段_props, 图标_props, popup_proxy_props 和 datepicker_props.

例子:

datefield(
    "Start date",
    :start_date,
    datepicker_props = Dict(:todaybtn => true, :nounset => true),
    textfield_props = Dict(:bgcolor => "green-1"),
)

扩张

扩展

expansion

显示代码

朱莉娅
HTML格式

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

程序化使用

expansionitem(args...; kwargs...)

"扩展"组件允许您隐藏与用户没有直接关系的内容。把它想象成当你点击它们时打开的手风琴元素。它也被称为可折叠。

事实上，这些是赋予附加功能的元素的组件。因此，它们可以包含在列表中并继承元素组件的属性。

例子:

模型:

julia > @vars ExpansionModel begin
    dummy::R{Bool} = true
end

查看:

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.",
                    ),
                ]),
            ],
        ),
    ],
)

参数

行为举止
- 持续时间::Int -动画持续时间（以毫秒为单位）。例子：: 持续时间="1000".
- 默认打开::Bool -在第一次渲染期间展开默认元素。由模型重新定义（重新激活模型），如果它在使用中。
- expandiconrotategc::Bool -仅将扩展事件应用于披露图标，而不是应用于元素的整个标题。
- 组::字符串 -在披露组中注册一个项目。组中的所有项目必须具有相同的组名。它用于创建*accordion*样式的行为。例子：: 我的电子邮件.
- 弹出窗口::Bool —在"弹出"模式下显示下拉列表。
内容
- 图标::字符串 -根据类星体约定图标的名称。如果未安装图标库，请使用前缀 img:. 如果值为 无，图标没有绘制（但它下面的空间占用空间）。例子：: 地图, 离子-添加, img：https：//cdn。类星体。dev/徽标/svg/类星体-徽标。svg技术, img:path/to/some_image.巴布亚新几内亚.
- 扩展::字符串 -"展开"状态的图标名称。要求与通常的要求相似 图标:. 它只在 expandsonitem=错误.
- 扩展内容::字符串 -"折叠"状态的图标名称。要求与 [医]扩展性:. 使用它会禁用图标旋转的动画。
- 标签::Union{String,Symbol} -标头标签。
- 标签:联合{Int,字符串} -如果文本不适合，则按行数裁剪。如果指定超过1行，则它仅适用于基于WebKit的浏览器（由于 -webkit-线夹). 例子：: 标签="2".
- 说明::字符串 -副标题（标题子标签）。例子：: 未读消息：5.
- 标题线:联合{Int,字符串} -按行数修剪副标题（类似 标签,标签).
- 标题级别::Int -在标题级别应用缩进（使用插槽时除外 标题). 有用的，如果头像丢失，但你需要一个调平填充。例子：: headerinsetlevel="1".
- 内容级别::Int -对内容部分应用缩进。例子：: contentinsetlevel="1".
- 扩展分离器::Bool -在标题和内容之间添加分隔符（作为视觉分隔符）。
条件
- 禁用::Bool -禁用组件（禁用模式）。
风格
- 展开-图标-类:联合{向量,字符串,Dict} -将自定义CSS类应用于披露图标。例子：: 文本-紫色.
- 黑暗::布尔 -向组件指示页面的背景是暗的。
- 密集::布尔 -紧凑模式，占用更少的垂直空间。
- densetoggle::Bool -仅将紧凑模式应用于披露图标。
- headerstyle::Union{Vector,String,Dict} -将自定义样式应用于组件标题。例子：: '#ff0000’headerstyle=opts(backgroundColor:"#ff0000")

页脚

footer

显示代码

朱莉娅
HTML格式

footer("Genie app footer", class = "bg-blue-1")

<footer class="bg-blue-1">
    Genie app footer
</footer>

新闻标题

头条新闻

heading

显示代码

朱莉娅
HTML格式

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>

图标

显示代码

朱莉娅
HTML格式

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

程序化使用

icon(
    name::Union{String,Symbol},
    args...;
    content::Union{String,Vector,Function} = "",
    kwargs...,
)

点画默认支持: 材质图标, 字体真棒, 离子, MDI, Eva图标, 主题化图标, 线真棒和引导图标。

此外，可以添加支持自己任何图标库。

例子:

查看:

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

参数

内容
- 标签::字符串 -如果未指定图标本身或使用SVG图标，将用于呈现图标的HTML标记。例子：: 分区, i.
- 左::Bool -当图标位于文本/内容的左侧时使用;在图标的右侧添加标准缩进。
- 右::Bool -当图标位于文本/内容的右侧时使用;在图标的左侧添加标准缩进。
模型
- 名称::字符串 -图标名称。有必要安装图标库（如果不使用前缀 img:). 如果指定值 "没有"，图标将不会被渲染（但它的空间将保持保留）。例子：: 地图, 离子-添加, img：https：//cdn。类星体。dev/徽标/svg/类星体-徽标。svg技术, img:path/to/some_image.巴布亚新几内亚.
风格
- 大小::字符串 -css单位的大小（表示测量单位）或标准尺寸名称之一。例子：: 16px, 2雷姆, x, 医学博士.
- 颜色::字符串 -类星体调色板中组件的颜色名称。例子：: 小学部, 茶-10.

图像

显示代码

朱莉娅
HTML格式

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

显示代码

朱莉娅
HTML格式

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>

程序化使用

imageview(args...; kwargs...)

组件 影像视图 它简化了处理图像（任何格式）的工作，并增加了一个愉快的加载效果和许多其他功能（例如，设置宽高比的能力）。

例子:

模型:

julia > @vars Model begin
    url::R{String} = "https://placeimg.com/500/300/nature"
end

查看:

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)],
        ),
    ],
)

参数

行为举止
- 过渡::字符串 -动画名称(其中一个嵌入）。例子：: 褪色, 滑下式.
- nativecontextmenu::布尔 -为图像启用本机浏览器上下文菜单。
内容
- 比率::Union{String,Int} -强制遵守长宽比。例子：: "4/3", "16/9", 1.
- alt::字符串 -如果无法加载图像，则显示替代文本。
- 基本::Bool -禁用动画和过渡;工作更快。
- 包含::Bool -确保图像完全适合显示区域（即使边缘周围有空边）。
模型
- src::字符串 -图像的路径。例子：: src="img/东西。png" （从公用文件夹）; src="资产/我的-img.gif" (来自资产); src="https://placeimg.com/500/300/nature" (网址)
- srcset::字符串 -一组不同分辨率的图像选项。例子：: elva-fairy-320w.jpg 320w，elva-fairy-480w.jpg 480w
- 尺寸::字符串 -CSS图像选择标准。例子：: (最大宽度:320px)280px,(最大宽度:480px)440px,800px
- 宽度::字符串 -固定图像宽度（以px或％为单位）。例子：: 280px, 70%.
- 高度::弦 -固定图像高度。例子：: 300px.
- placeholdersrc::字符串 -图像上传前显示的静态。例子：: src="资产/我的-img.gif" src="https://placeimg.com/500/300/nature" (网址)
风格
- 颜色::字符串 -组件的颜色主题从类星体调色板。例子：: 小学部, 茶-10.
- Imgclass::Union{Vector,String,Dict} -图像容器的其他CSS类。例子：: imgclass！ ={'我的特殊类':<条件>}
- imgstyle::Dict -图像容器的CSS样式。例子：: imgstyle="{变换:'旋转(45deg)'}"
- spinnercolor::字符串 -加载指示器的颜色（如果使用）。例子：: 小学部, 茶-10.
- 旋转尺寸::弦 -装载指示器的大小（它在没有自己的装载机插槽的情况下工作）。例子：: 16px, 2雷姆.

文本输入

text input

显示代码

朱莉娅
HTML格式

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

显示代码

朱莉娅
HTML格式

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

显示代码

朱莉娅
HTML格式

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>

程序化使用

textfield(fieldname, args...; kwargs...)

例子:

模型:

julia > @vars TextField begin
    name::R{String} = ""
end

查看:

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']",
)

参数

一般属性
- 类型::字符串 -字段类型。也许其中一个: 文本 （默认情况下）, 文本区域, 电邮, 电话, 电话号码, 密码, 网址. 它还会影响移动设备上显示的键盘。
行为举止
- 名称::字符串 -组件的名称。使用表单时很有用。如果未指定，则取值 为 如果存在的话。例子：: car_id.
- 面具::字符串 -输入掩码或预定义掩码值之一（例如, 日期, 日期时间, 全职, 电话, 卡片).
- fillmask::Union{Bool,String} -是否使用特殊字符填充掩码（或使用值字符串而不是 布尔). 例子：: 真的, "0_*".
- reversefillmask::Bool -从右到左填写蒙版。例如：货币价值的面具。
- unmaskedvalue::Bool -如果启用，模型将接收没有掩码的服务字符的值。
- 错误::Bool -字段是否有错误。
- 规则::向量 -一组验证规则。如果元素是字符串，则它必须与内置规则的名称匹配。例子：: 规则=["全职",val→长度(val)<3//"最多3个字符"]
- 反应器::布尔 -如果 真的 每次更新模型时都会检查规则。默认情况下禁用它（为了性能）。
- lazyrules::Union{Bool,String} -如果 真的 只有在第一次失去焦点后才执行验证。如果 "ondemand"，然后只手动检查规则。
- 装载::Bool -显示装载指示器；可通过插槽配置 装载量.
- 可清除::Bool -显示清洁图标，如果值不是 未定义 或 null.
- 自动对焦::Bool -显示后自动对焦字段。
- 对于::字符串 -套件 身份证 组件并与之结合 <标签>. 如果 姓名 如果未指定，则此值也用于 姓名.
内容
- 错误信息::字符串 -验证错误文本（显示如果 错误=真). 例子：: 用户名必须至少有5个字符.
- noerroricon::布尔 -隐藏错误图标。
- 标签::Union{String,Symbol} -字段标题的文本。
- stacklabel::布尔 -标题始终固定在字段上方，即使它是空的。
- 提示::字符串 -字段下的说明文字。
- 隐藏::布尔 -隐藏提示，如果该领域是失焦，并没有 错误.
- 前缀::字符串 -输入文本前的前缀（例如, $).
- 后缀::字符串 -文本后面的后缀（例如, @gmail.com).
- 装载::Bool -显示加载指示器（如果插槽是 装载量 未使用）。
- clearicon::字符串 -清洁图标;如果未指定，则使用默认值。
- 标签：布尔 -如果 真的，而不是 标签 插槽正在使用中 标签.
- bottomslots::Bool -包括底部插槽（错误，提示，计数器）。
条件
- 禁用::Bool -禁用字段。
- readonly::Bool -使字段只读。
风格
- 标签颜色::字符串 -标题颜色（不同于 颜色 因为它总是有效的，即使当领域是失焦）。例子：: 小学部.
- 颜色::字符串 -字段颜色从类星体调色板。例子：: 茶-10.
- 黑暗::布尔 -背景是黑暗的。
- 填充::Bool -字段"填充"样式。
- 大纲：布尔 -"轮廓"字段的样式。
- 突出::联合{Bool,字符串} -突出显示字段的样式。
- 无国界::Bool -无框风格。
- 隐藏空间::Bool -删除错误/提示/计数器的备份空间。
- 圆角::Bool -角的轻微倒圆。
- 广场::布尔 -删除四舍五入，完全方形风格。
- 密集::布尔 -紧凑的版本，占用更少的空间。
- itemalign::联合{向量,字符串,Dict} -内容的对齐。
- inputclass::Union{Vector,String,Dict} -CSS类 <输入>.
- 输入样式::联合{Vector,String,Dict} -款式 <输入> 例如: inputstyle="{backgroundColor:'#ff0000'}"
模型
- debounce::Union{String,Int} -以毫秒为单位的模型更新延迟。例子：: 500.
- 最大长度::联合{字符串,Int} -最大字符串长度。例子：: 12.

开关,开关

开关

radio

显示代码

朱莉娅
HTML格式

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

显示代码

朱莉娅
HTML格式

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>

程序化使用

radio(
    label::AbstractString = "",
    fieldname::Union{Symbol,Nothing} = nothing,
    args...;
    kwargs...,
)

开关组件是用户输入的另一个基本元件。您可以使用它为用户提供从多个选项中选择一个选项的选项。

例子:

模型:

julia > @vars RadioModel begin
    shape::R{String} = "line"
end

查看:

julia > radio("Line", :shape, val = "line")
julia > radio("Rectangle", :shape, val = "rectange")
julia > radio("Ellipse", :shape, val = "ellipse")
julia > radio("Polygon", :shape, val = "polygon")

参数

行为举止
- 名称::字符串 -控件的名称；在处理直接发送到URL的表单时很有用。例子：: car_id.
- 保持颜色::Bool -删除复选框时是否保留颜色（如果已设置）。
一般事务
- tabindex::联合{Int,字符串} -HTML属性的值 [医]tabindex.
模型
- 字段名::符号 -执行绑定的变量的名称。
马克
- 标签::AbstractString -标签文本。
- leftlabel::Bool -如果指定，标签显示在复选框的左侧。
条件
- 禁用::Bool -将组件置于"不可用"状态。
风格
- 大小::字符串 -css单位或标准尺寸名称中的大小（x|ｓｍ|医学博士|lg|xl号). 例子：: 16px, 2雷姆, x, 医学博士.
- 颜色::字符串 -类星体调色板中组件的颜色。例子：: 小学部, 茶-10.
- 黑暗::布尔 -通知组件正在使用深色背景。
- 密集::布尔 -紧凑模式，减少垂直边距。

范围

range

显示代码

朱莉娅
HTML格式

[
    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

显示代码

朱莉娅
HTML格式

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

程序化使用

range(start, stop, length)
range(start, stop; length, step)
range(start; length, stop, step)
range(; start, length, stop, step)

创建一个具有均匀间隔的元素和优化存储的专用数组（AbstractRange)的参数。在数学上，范围由任何三个参数唯一确定: 开始, 步骤, 停止 和 长度. 可接受的范围参数是:

具有任意三个参数的调用范围 开始, 步骤, 停止, 长度.
具有两个参数的调用范围 开始, 停止, 长度. 在这种情况下，该步骤将被假定为一个。如果两个参数都是整数，则返回 UnitRange。
具有其中一个值的调用范围 停止 或 长度. 假设的值 开始 和 步骤 等于一。

例子:

julia > range(1, length = 100)
1:100

julia>范围(1,停止=100)
1:100

julia>范围（1，步骤=5，长度=100）
1:5:496

julia>范围（1，步骤=5，停止=100）
1:5:96

julia>范围(1,10,长度=101)
1.0:0.09:10.0

朱莉娅>范围(1,100,步=5)
1:5:96

julia>范围（停止=10，长度=5）
6:10

julia>范围（停止=10，步骤=1，长度=5）
6:1:10

julia>范围（开始=1，步骤=1，停止=10）
1:1:10

julia>范围（;长度=10）
基地。OneTo(10)

julia>范围(;停止=6)
基地。OneTo(6)

julia>范围(;停止=6.5)
1.0:1.0:6.0

如果 长度 未指明及 停止 - 开始 不是整数倍 步骤，然后将创建一个范围，在之前结束 停止.

julia > range(1, 3.5, step = 2)
1.0:2.0:3.0

特别注意中间值的合理计算。为了避免这样的间接费用，请与设计人员联系。林兰格。

要使用"Julia1.1"停止参数作为位置参数，至少需要Julia1.1。
匹配没有关键字参数的"Julia1.7"版本和 开始 关键字参数至少需要Julia1.7版本。
结合"朱莉娅1.8"的版本与 停止 作为唯一的关键字参数或 长度 至少需要Julia1.8作为唯一的关键字参数。

其他帮助:

功能 范围 申报表 基地。一个,一个 当参数是整数和:

仅指定 长度;
仅指定 停止.

功能 范围 申报表 单位范围 当参数是整数和:

仅指定 开始 和 停止;
指定 长度 和 停止.

单位范围 如果指定了参数，则不会创建* 步骤，即使步骤是一个。

滑块

slider

显示代码

朱莉娅
HTML格式

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>

带图标的滑块

显示代码

朱莉娅
HTML格式

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>

程序化使用

slider(
    range::AbstractRange{<:Union{Symbol,String,Real}},
    fieldname::Union{Symbol,Nothing} = nothing,
    args...;
    lazy = false,
    kwargs...,
)

滑块是用户在最小值和最大值之间设置数值的好方法，在可接受的值之间有可选的步骤。滑块还配有焦点指示器（专用滑块按钮），可让您使用键盘调整滑块的位置。

例子:

查看:
```
julia > slider(1:5:100)
```

参数

行为举止
- 名称::字符串 -控件的名称。它在处理直接通过URL发送的表单时非常有用。例子：: car_id
- snap::Bool -将滑块"粘贴"到可接受的值，而不是自由移动。建议与参数配合使用 步骤.
- 反向::Bool -启用滑块的反向（反转）。
- 垂直::布尔 -显示垂直方向的滑块。
- 标签：布尔 -始终显示项目的签名。
内容
- 标签::Bool -点击/触摸和移动滑块时显示的弹出标题。
- 标记:联合{Bool,Int} -在刻度上显示标记。您可以为每个可能的模型值显示一个标记，也可以使用数字指定一个步骤。例子：: 标记="5"
- dragrange::布尔 -用户可以移动整个范围，而不仅仅是单个滑块。
- 龙卷风::布尔 -用户可以移动*仅*范围，但不能移动单个滑块。
一般事务
- tabindex::联合{Int,字符串} -HTML属性的值 [医]tabindex. 例子：: 100
签名
- labelcolorleft::字符串 -左标题的背景颜色类星体调色板。例子：: 小学部, 茶-10
- labeltextcolorleft::字符串 -左标题文字的颜色类星体调色板。
- labelcolorright::字符串 -右标题的背景颜色从类星体调色板。
- labeltextcolorright::字符串 -右标题的文本的颜色从类星体调色板。
- labelvalueleft::联合{字符串,Int} -为最小值重新定义签名。例子：: 模特。min+"px"
- labelvalueright::Union{String,Int} -为最大值重新定义签名。例子：: 模特。最大+"px"
模型
- 范围::抽象范围{T} -可供选择的值范围。格式使用 最小：步骤：最大. 您还可以使用字符或字符串来引用模型字段。例子：: 范围="1:2:最大" 我的价值
- 懒::Bool -如果安装在 真的，只有在释放滑块后才更新模型值。
条件
- 禁用::Bool -将组件置于禁用状态（不可用于交互）。
- readonly::Bool -将组件切换到只读模式。
风格
- 颜色::字符串 -组件的主要颜色从类星体调色板。例子：: 小学部, 茶-10
- 标签颜色::字符串 -签名的颜色类星体调色板。
- 拇指路径::字符串 -自定义滑块的图像路径。例子：: M5 5h10v10h-10v-10
- 黑暗::布尔 -表示组件在深色背景上使用。
- 密集::布尔 -紧凑的显示模式（占用更少的空间）。

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

程序化使用

tabgroup(fieldname::Union{Symbol,Nothing} = nothing, args...; kwargs...)

Tabs组件是显示菜单的便捷方式。它非常适合下拉列表，但绝不仅限于它。

例子:

模型:

julia > @vars TabModel begin
    tab_m::R{String} = "tab"
end

查看:

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"),
    ],
)

参数

行为举止
- 目标::Union{Bool,String} -以像素为单位的断点，tab容器自动切换到对齐模式 辩解. 默认值: 600. 例子：: 断点！= "500"
内容
- 垂直::布尔 -垂直选项卡显示（选项卡放置在彼此下方，而不是水平）。
- outsiderarrows::Bool -为标签边缘的滚动箭头保留空间（箭头在不活动时变为半透明）。
- mobilearrows::Bool -强制滚动箭头显示在移动设备上。
- 对齐::字符串 -容器内标签的水平对齐。可接受的值: 左图, 中心, 对, 辩解. 默认值: 中心. 例子：: align="右"
- 断点::Union{Int,String} -选项卡容器的宽度（以像素为单位），选项卡自动切换到模式 辩解. 默认值: 600. 例子：: 断点！= "500"
- 左旋::弦 -图标的名称，以取代标签溢出时使用的标准左滚动箭头。例子：: 箭头,箭头
- 右键::弦 -图标的名称，以取代标签溢出时使用的标准右滚动箭头。例子：: arrow_权利
- 伸展::布尔 -在flex容器中使用时，制表符会拉伸到父级的高度。
- 收缩::Bool -默认情况下，选项卡被拉伸到可用的宽度。启用此选项后，选项卡将停止拉伸。在放置选项卡时很有用，有时是必要的 工具栏.
- 开关器::布尔 -切换活动选项卡指示器的位置（在左侧—用于垂直模式，在顶部—用于水平）。
- 缩小器::布尔 -使指示器成为选项卡内容（文本或图标）的宽度，而不是选项卡的整个宽度。
- inlinelabel::Bool -选项卡的文本与图标显示在一行中（如果使用）。
- nocaps::布尔 -禁用自动将选项卡文本转换为大写（默认情况下，所有选项卡都以大写字母显示）。
风格
- activeclass::字符串 -应用于活动选项卡的CSS类。
- activecolor::字符串 -从调色板活动选项卡的文本颜色。例子：: 茶-10, 小学部
- activebgcolor::字符串 -活动选项卡的背景颜色。例子：: 茶-10, 小学部
- 指示颜色::字符串 -活动选项卡的指示器（下划线）的颜色。例子：: 茶-10, 小学部
- 内容类::字符串 -应用于选项卡内容容器的CSS类。
- 密集::布尔 -紧凑的显示模式（占用更少的空间）。

表格

表

table

显示代码

朱莉娅
HTML格式

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

显示代码

朱莉娅
HTML格式

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>

带搜索的表

显示代码

朱莉娅
HTML格式

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

显示代码

朱莉娅
HTML格式

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>

程序化使用

table(fieldname::Symbol, args...; kwargs...)

例子:

模型:

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

查看:

julia > table(
    :data;
    pagination = :data_pagination,
    style = "height: 350px;",
    title = "Random numbers",
)

样式可以使用属性来实现。 cell_类, cell_style, 内部_类, 内尔*斯特尔, change_类, change_style, inner_change_类, inner_change_style.

ui() =
    table(:table, edit = ["name", "email", "age"], cell_type = ["text", "text", "number"])

ui（）=table（：table，cell_class="text-blue-10bg-blue-2"）

有关样式和更复杂样式的详细信息，请参阅 细胞板/细胞板.

手动造型也可以应用如下:

table(
    :table,
    template(
        @slot(:body - cell, :props),
        [
            StippleUI.td(
                textfield(
                    "",
                    R"props.row[props.col.name]",
                    :dense,
                    :borderless,
                    inputstyle = "font-weight: 400; font-size: 0.9rem; padding-top: 0; padding-bottom: 0",
                ),
            ),
        ],
    ),
)

注意使用宏 @插槽，从点画版本0.28.7开始可用。否则，使用 var"v-slot：body-cell"="props".

点画的主要组成部分的画廊。jl

别针

大量的

按钮

国旗

芯片

专栏

日期字段

扩张

页脚

新闻标题

图标

图像

文本输入

开关,开关

范围

滑块

标签

表格

有用的连结