StippleUI API

应用程序接口

# StippleUI.API.csscolors — Method

`csscolors(name, color)`
`csscolors(names, colors)`
`csscolors(prefix, colors)`

构建一个 css 字符串，定义用于类星体元素样式的颜色；可以是关键字参数`color` 的值，也可以是带前缀的类名`text-` 或`bg-` 。（参见类星体文档）。 Usage

css = style(csscolors(:stipple, [RGB(0.2, 0.4, 0.8), "#123456", RGBA(0.1, 0.2, 0.3, 0.5)])

ui(model) = css * page(model, class="container, text-stipple-1", [ btn("Hit me", @click(:pressed), color="stipple-3") ])

头像

徽章

# StippleUI.Badges.badge — Function

badge()

通过`badge` 组件，您可以创建一个小徽章，用于添加需要突出显示并引起注意的上下文数据等信息。它还经常与其他元素（如用户头像）结合使用，以显示新信息的数量。

Examples

Model

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

View

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

Arguments

内容
- floating::Bool - 告诉`badge` 是否应浮动到相对定位的父元素的右上方
- transparent::Bool - 应用 0.8 的不透明度；对浮动尤其有用`badge`
- multiline::Bool - 内容可以换行
- label::Union{String, Int}- 徽章内容为字符串；如果指定，则覆盖默认槽位，例如`"John Doe"` 22
- align::String - 设置垂直对齐 CSS 属性
- outline::Bool - 使用 "轮廓 "设计（仅限彩色文本和边框）
样式
- color::String - 来自调色板的组件颜色名称。 "primary" "teal-10"
- textcolor::String - 覆盖文本颜色（如需要）；颜色名称来自调色板，例如："……"。 "primary" "teal-10"
- rounded::Bool - 制作圆形徽章

横幅

banner(content::String = "", args...; buttons::Vector{String} = String[], icon::Union{String,Nothing} = nothing, kwargs...)

banner 组件创建了一个横幅元素，用于显示醒目的信息和相关的可选操作。

根据 Material Design 的规范，横幅应该是 “displayed at the top of the screen, below a top app bar”--当然，你也可以把横幅放在任何有意义的地方，甚至是一个`dialog`

Examples

View

julia> banner("Unfortunately, the credit card did not go through, please try again.", class="bg-primary text-white", [
          template("", "v-slot:action", [
            btn("Dismiss", flat=true, color="white"),
            btn("Update Credit Card", flat=true, color="white")
          ])
       ])

julia> banner("Could not retrieve travel data.", rounded=true, class="bg-grey-3", [
          template("", "v-slot:avatar", [
            imageview(src="https://cdn.quasar.dev/img/mountains.jpg", style="width: 100px; height:64px")
          ]),
          template("", "v-slot:action", [
            btn("Retry", flat=true, color="white")
          ])
       ])

Arguments

内容
- inlineactions::Bool - 在内容的同一行显示操作
样式
- dense::Bool - 密集模式；占用较少空间
- rounded::Bool - 为组件的方形形状应用较小的标准边框半径
- dark::Bool - 通知组件背景为深色

数字

# StippleUI.BigNumbers.bignumber — Function

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

渲染大数字 UI 元素。 Arguments

label::Union{String,Symbol}
number::Union{String,Symbol,Nothing,String}
图标::联盟{String,Symbol}
color::Union{String,Symbol} = "正"|"负"
arrow::Union{String,Symbol} = "上"|"下"

按钮

# StippleUI.Buttons.btn — Function

Stipple 有一个名为`btn` 的组件，它是一个具有一些额外实用功能的按钮。例如，它有两种形状：矩形（默认）和圆形。它还内置了材质波纹效果（可以禁用）。

按钮组件还带有旋转或加载效果。当应用程序的执行可能会导致延迟，而您又希望向用户反馈延迟情况时，您就可以使用它。使用时，只要用户点击按钮，按钮就会显示一个旋转动画。

在未禁用或未旋转的情况下，btn 会在用户点击或轻触按钮时发出`@click` 事件。 Examples

julia> btn("Move Left", color = "primary", icon = "mail", @click("press_btn = true"))

julia> btn("Go to Hello World", color = "red", type = "a", href = "hello", icon = "map", iconright = "send")

julia> btn("Connect to server!", color="green", textcolor="black", @click("btnConnect=!btnConnect"), [
          tooltip(contentclass="bg-indigo", contentstyle="font-size: 16px",
          style="offset: 10px 10px",  "Ports bounded to sockets!")]
       )

Arguments

行为
- loading::Bool - 使按钮进入加载状态（显示`spinner` — 可通过使用’loading’槽重载）
- percentage::Union{Int, Float64}- 百分比（0.0 < x < 100.0）；与 "加载 "道具一起使用；在背景上显示进度条。23
- darkpercentage::Bool - 背景上的进度条应为深色；与 "百分比 "和 "加载 "道具一起使用
内容
- label::Union{String, Int}- 按钮上将显示的文本。Button Label
- icon::String - 图标名称，遵循 Quasar 惯例；除非使用 "img: "前缀，否则请确保已安装图标库；如果使用 "none"（字符串）作为值，则不会呈现图标（但屏幕空间仍将用于图标）。 map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png
- iconright::String - 图标名称遵循 Quasar 惯例；除非使用 "img: "前缀，否则请确保已安装图标库；如果使用 "none"（字符串）作为值，则不会渲染图标（但屏幕空间仍将用于该图标）。 map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png
- nocaps::Bool - 避免将标签文本变成大写字母（默认情况下会这样）
- nowrap::Bool - 避免标签文本包边
- align::String - 标签或内容默认对齐方式。center 接受的值。 left right center around between evenly
- stack::Bool - 将图标和标签垂直堆叠，而不是堆叠在同一行（默认情况下如此）
- stretch::Bool - 当在 flexbox 父对象上使用时，按钮将拉伸到父对象的高度
常规
- type::String <a> button - 1) 定义按钮的本地类型属性（提交、重置、按钮）；或 2)</a><a> 使用 tag</a> 渲染组件<a>，这样即使禁用也能访问事件；或 3) 使用 "href "道具并指定 "类型 "为默认媒体标记。</a><a> a submit reset button image/png href="https://some-site.net" target="_blank" </a> ** tabindex::Union{Int, String}- Tabindex HTML 属性值
导航
- href::String - 本地<a>link href 属性；优先于 "to "和 "replace "道具。</a><a> https://quasar.dev href="https://quasar.dev" target="_blank" </a> ** target::String - 本地<a>link target 属性；仅与 "to "或 "href "道具一起使用，例如</a><a> _blank _self _parent _top </a>. 状态
- loading::Bool - 将按钮置入加载状态（显示`spinner` — 可通过使用 "loading "槽来覆盖）
- disable::Bool - 将组件置于禁用模式
样式
- size::String - 以 CSS 单位表示的尺寸，包括单位名称或标准尺寸名称（xs|sm|md|lg|xl）。 16px 2rem xs md
- ripple::Union{Bool, Dict}- 配置材质波纹（通过将其设置为 "false "或提供配置对象将其禁用）默认值。true 例。 false { "early" => true, "center" => true, "color" => "teal", "keyCodes" => [] }
- outline::Bool - 使用`outline` 设计
- flat::Bool - 使用`flat` 设计
- unelevated::Bool - 去除阴影
- rounded::Bool - 为方形按钮应用更突出的边框半径
- push::Bool - 使用 "推 "设计
- glossy::Bool - 应用光泽效果
- fab::Bool - 使按钮的大小和形状适合浮动操作按钮
- fabmini::Bool - 使按钮的大小和形状适合小型浮动操作按钮
- padding::String - 应用自定义填充（垂直[水平]）；以 CSS 单位设置大小，包括单位名称或标准大小名称（none|xs|sm|md|lg|xl）；设置后还会移除最小宽度和高度
- color::String - 来自调色板的组件颜色名称，例如`primary` teal-10
- textcolor::String - 覆盖文本颜色（如需要）；颜色名称来自调色板，例如`primary` teal-10
- dense::Bool - 密集模式；占用更少空间
- round::Bool - 制作圆形按钮

# StippleUI.Buttons.btndropdown — Method btndropdown 是一个非常方便的下拉按钮。与`list` 作为下拉内容非常搭配，但绝不仅限于此。

如果您想使用 “input” 而不是 “button” 作为下拉内容，请使用 Select 代替。 Examples

julia> btndropdown(label = "Dropdown Button", color = "primary", [
            list([
              item("Spain", clickable = true, vclosepopup = true, @click("first_item = true")),
              item("USA", clickable = true, vclosepopup = true, @click("second_item = true")),
              item("Netherlands", clickable = true, vclosepopup = true, @click("third_item = true"))
            ]),
       ])

Arguments

行为
- loading::Bool - 将按钮置于加载状态（显示`spinner` — 可通过使用 "加载 "槽来覆盖）
- split::Bool - 将下拉图标拆分为自己的按钮
- disablemainbtn::Bool - 禁用主按钮（与 "分割 "道具一起使用非常有用）
- disabledropdown::Bool - 禁用下拉菜单（如果使用 "拆分 "道具，则禁用下拉菜单按钮）
- persistent::Bool - 允许在菜单外点击/轻敲菜单或按下 ESC 键时不退出菜单
- autoclose::Bool - 允许菜单中的任何点击/轻敲关闭菜单；可替代为每个菜单项附加事件的做法，这些事件应在点击/轻敲时关闭菜单
内容
- label::Union{String, Int}- 按钮上将显示的文本，例如`"Button Label"`
- icon::String - 图标名称，遵循 Quasar 惯例；除非使用 "img: "前缀，否则请确保已安装图标库；如果使用 "none"（字符串）作为值，则不会显示图标（但屏幕空间仍将用于显示图标）。 "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"
- iconright::String - 图标名称遵循 Quasar 惯例；除非使用 "img: "前缀，否则请确保已安装图标库；如果使用 "none"（字符串）作为值，则不会渲染图标（但屏幕空间仍将用于该图标）。 "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"
- nocaps::Bool - 避免将标签文本变成大写字母（默认情况下会这样）
- nowrap::Bool - 避免标签文本包边
- align::String - 标签或内容对齐方式默认为`center` 。 "left" "right" "center" "around" "between" "evenly"
- stack::Bool - 垂直堆叠图标和标签，而不是在同一行（默认情况下是这样的）
- stretch::Bool - 当在 flexbox 父对象上使用时，按钮会拉伸到父对象的高度
- split::Bool - 将下拉图标拆分为自己的按钮
- dropdownicon::String - 图标名称遵循 Quasar 惯例；除非使用 "img: "前缀，否则请确保已安装图标库；如果使用 "none"（字符串）作为值，则不会渲染图标（但仍会使用屏幕空间）。 "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"
常规
- type::String - 1）定义按钮的本地类型属性（提交、重置、按钮）；或 2）<a>使用 tag</a> 呈现组件<a>，这样即使禁用也能访问事件；或 3）使用 "href "道具并指定 "类型 "为默认媒体标记。例如："button" 。</a><a> "a" "submit" "reset" "button" "image/png" href="https://some-site.net" target="_blank" </a> ** tabindex::Union{Int, String}- Tabindex HTML 属性值 ex. 0 100
导航
- href::String - 本地<a>link href 属性；优先于 "to "和 "replace "道具，例如</a><a> "https://quasar.dev" href="https://quasar.dev" target="_blank" </a> ** target::String - 本地<a>link target 属性；仅与 "to "或 "href "道具一起使用，例如</a><a> "_blank" "_self" "_parent" "_top" </a>. 位置
- cover::Bool - 允许菜单覆盖按钮。使用时，"menu-self "和 "menu-fit "道具不再有效
- menuanchor::String - 设置菜单相对于目标默认值的起始位置或锚点的两个值。例如："bottom end" 。 "top start" "bottom start" "top end" "bottom end" "right start" "right end" "left start" "left end"
- menuself::String - 设置菜单自身相对于其目标默认值位置的两个值。"top end" 例。 "top start" "bottom start" "top end" "bottom end" "right start" "right end" "left start" "left end"
- menuoffset::Vector - 由两个数字组成的数组，以像素为单位水平和垂直偏移菜单。 [8,8] [5,10]
状态
- loading::Bool - 将按钮置入加载状态（显示`spinner` — 可通过使用 "loading "槽重载）
- disable::Bool - 将内容置于禁用状态
样式
- size::String - 以 CSS 单位或百分比表示的大小，例如`"25px"` "2.5em" "md" "xs"
- ripple::Union{Bool, Dict}- 配置材质波纹（通过将其设置为 "false "或提供一个配置对象将其禁用）默认值。true 例如。 false { "early" => true, "center" => true, "color" => "teal", "keyCodes" => []}
- outline::Bool - 使用 "轮廓 "设计
- flat::Bool - 使用 "平面 "设计
- unelevated::Bool - 去除阴影
- rounded::Bool - 为方形按钮应用更突出的边框半径
- push::Bool - 使用 "按压 "设计
- glossy::Bool - 应用光泽效果
- fab::Bool - 使按钮的大小和形状适合浮动操作按钮
- fabmini::Bool - 使按钮的大小和形状适合迷你浮动按钮
- padding::String - 应用自定义填充（垂直 [水平]）；大小以 CSS 单位表示，包括单位名称或标准尺寸名称（none|xs|sm|md|lg|xl）；在设置时还会移除最小宽度和高度。"16px","2rem","xs","md lg" 、"2px 2px 5px 7px"
- color::String - 来自 Quasar调色板的组件颜色名称。 "primary" "teal-10"
- textcolor::String - 覆盖文本颜色（如需要）；颜色名称来自 Quasar 调色板 ex. "white" "primary" "teal-10"
- dense::Bool - 密集模式；占用空间较少
- noiconanimation::Bool - 切换状态时禁止旋转下拉图标
- contentstyle::Union{Vector, String, Dict}- 将归属于菜单的样式定义。 {"background-color" => "#ff0000"}``contentclass!="{ 'my-special-class': <condition> }"
- contentclass::Union{Vector, String, Dict}- 归属于菜单的类定义，例如 "my-special-class" contentclass!="{ 'my-special-class': <condition> }"

# StippleUI.Buttons.btngroup — Method

您可以使用`btngroup` 方便地将`btn` 和`btndropdown` 进行分组。请务必查看这些组件各自的页面，了解它们的道具和方法。

Arguments

内容
- spread::Bool - 水平展开至所有可用空间
- stretch::Bool - 当在 Flexbox 父对象上使用时，按钮将拉伸至父对象的高度
样式
- outline::Bool - 按钮使用 "轮廓 "设计
- flat::Bool - 按钮使用 "扁平 "设计
- unelevated::Bool - 去除按钮阴影
- rounded::Bool - 为方形按钮应用更突出的边框半径
- push::Bool - 为按钮使用 "按压 "设计
- glossy::Bool - 应用光泽效果

卡片

# StippleUI.Cards.card — Method

  card(args...; kwargs...)

Card 组件是显示重要分组内容的好方法。Card 组件是有意设计的轻量级组件，本质上是一个包含元素，可以 "`hosting`"任何其他合适的组件。

Examples

Model

julia> @vars CardModel begin
          lorem::R{String} = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
          url::R{String} = "https://cdn.quasar.dev/img/parallax2.jpg"
       end

View

julia> card(class="my-card", [
          imageview(src=:url, basic=true, [
            Html.div("Title", class="absolute-bottom text-h6")
          ]),
          card_section("{{lorem}}")
       ])

Arguments

内容 *tag::String - 用于呈现默认`"div"` 的 HTML 标记。 "div" "form"
样式 * dark::Bool - Notify the component that the background is a dark color * square::Bool - 移除边框半径，使边框呈正方形 * flat::Bool - Applies a 'flat' design (no default shadow) * bordered::Bool - 为组件应用默认边框

# StippleUI.Cards.card_actions — Method

Examples

card_actions()

Model

julia> @vars CardModel begin
          lorem::R{String} = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
       end

View

julia> card(class="my-card bg-secondary text-white", [
          card_section([
            Html.div("Our Changing Planet", class="text-h6"),
            Html.div("by John Doe", class="text-subtitle2")
          ]),
          card_section("{{ lorem }}"),
          card_actions([
            btn(flat=true, "Action 1"),
            btn(flat=true, "Action2")
          ])
        ])

Arguments

align::String - 指定如何对齐操作（"左"、"居中"、"右"、"之间"、"周围"、"均匀"、"拉伸）
vertical:Bool - 显示动作

# StippleUI.Cards.card_section — Method

  card_section(args...; kwargs...)

Examples

View

julia> card(class="text-white", style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%); width: 30%", [
          card_section("lorLorem Ipsum is simply dummy text of the printing
          and typesetting industry")
       ])

Arguments

tag::String - 要呈现的 HTML 标记，例如`"div"`,"form"
horizontal::Bool - 显示一个水平部分（没有填充，可包含其他`card_section`)

复选框

# StippleUI.Checkboxes.checkbox — Function

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

checkbox 组件是用户输入的另一个基本元素。您可以用它为用户提供切换选项的方法。

Examples

Model

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

View

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

Arguments

行为
- name::String - 用于指定控件名称；在处理直接提交到 URL 的表单时非常有用
- indeterminatevalue::Union{String, Float64, Int, Bool}- 什么模型值应被视为 "不确定"？
- toggleorder::String - 决定两个状态的切换顺序（'t’代表 true 状态，'f’代表 false 状态）；如果’toggle-indeterminate’为 true，则顺序为：indet \-> first state \-> second state \-> indet（并重复），否则：indet \-> first state \-> second state \-> first state \-> second state \-> … ex…"tf" "ft"
- toggleindeterminate::Bool - 当用户点击/敲击组件时，我们是否也应该切换不定状态？
- keepcolor::Bool - 当组件未被点击/关闭时，是否应保留颜色（如果指定了任何颜色）？
一般问题
- tabindex::Union{Int, String}- Tabindex HTML 属性值
标签
- label::Union{String,Symbol}- 沿组件显示的标签
- leftlabel::Bool - 应显示在组件左侧的标签（如果有指定）。
组件模型
- fieldname::Symbol - 组件的模型
- val::Union{String, Float64, Int, Bool}- 当模型（'值'）为 Array 时起作用。它告诉组件在打钩/未打钩时应添加/删除哪个值
- truevalue::Union{Int, Float64, String}- 什么模型值应被视为选中/勾选/开启？
- falsevalue::Union{Int, Float64, String}- 什么模型值应被视为未选中/未勾选/关闭？
状态
- disable::Bool - 将组件置于禁用模式
样式
- size::String- 以 CSS 单位表示的尺寸，包括单位名称或标准尺寸名称（xs|sm|md|lg|xl）。 "16px" "2rem" "xs" "md"
- color::String - 来自调色板的组件颜色名称，例如`"primary"` "teal-10"
- dark::Bool - 通知组件背景为深色
- dense::Bool - 密集模式；占用空间较少

芯片

# StippleUI.Chips.chip — Method

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

chip 组件基本上是一个简单的用户界面块实体，以紧凑的方式表示更高级的底层数据（如联系人）。

芯片可以包含头像、文本或图标等实体，也可以选择指针。如果进行了配置，它们还可以关闭或移除。

Examples

View

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

Arguments

内容
- icon::String - 按照 Quasar 惯例命名的图标；除非使用’img:'前缀，否则请确保已安装图标库；如果使用’none'（字符串）作为值，则不会渲染图标（但屏幕空间仍将用于渲染图标）。 "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"
- iconright::String - 图标名称遵循 Quasar 惯例；除非使用 "img: "前缀，否则请确保已安装图标库；如果使用 "none"（字符串）作为值，则不会渲染图标（但屏幕空间仍将用于该图标）。 "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"
- iconremove::String - 图标名称遵循 Quasar 惯例；除非使用 "img: "前缀，否则请确保已安装图标库；如果使用 "none"（字符串）作为值，则不会渲染图标（但屏幕空间仍将用于该图标）。 "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"
- iconselected::String - 图标名称遵循 Quasar 惯例；除非使用 "img: "前缀，否则请确保已安装图标库；如果使用 "none"（字符串）作为值，则不会渲染图标（但屏幕空间仍将用于该图标）。 "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"
- label::Union{String, Int}- 芯片内容为字符串；如果指定了默认插槽，则覆盖默认插槽，例如："Joe Doe" "Book"
常规
- tabindex::Union{Int, String}- Tabindex HTML 属性值，例如 0 100
模型
- value::Bool - 决定是否渲染`chip` 的组件模型默认。true
- selected::Bool -chip 是否被选中的模型注意。需要使用".sync "修饰符！
状态
- clickable::Bool -chip 是否可点击？如果是，则将添加悬停效果并发出 "点击 "事件
- removable::Bool -chip 是否可移动？如果是，那么它将添加关闭按钮并发出 "移除 "事件
- disable::Bool - 将组件置于禁用模式
样式
- ripple::Union{Bool, Dict}- 配置材质波纹（通过将其设置为 "false "或提供一个配置对象来禁用它）默认值。true 例： false { early: true, center: true, color: 'teal', keyCodes: [] }
- dense::Bool - 密集模式；占用较少空间
- size::String -chip 大小名称或 CSS 单位，包括单位名称。 "xs" "sm" "md" "lg" "xl" "1rem"
- dark::Bool - 通知组件背景为深色
- color::String - 来自调色板的组件颜色名称，例如："primary" "teal-10"
- square::Bool - 设置较低的边框半径值，而不是默认值，使其接近正方形
- outline::Bool - 使用 "轮廓 "设计显示

日期选择器

# StippleUI.DatePickers.DateRange — Type

DateRange

代表一个日期间隔，介于`start` 和`stop` 之间，步长为 1 天。

# StippleUI.DatePickers.datepicker — Function

datepicker()

显示日期选择器（日历）输入元素。如果`fieldname` 引用了 Vector{Date}，则`multiple` 关键字参数必须以`true` 的形式传递。如果`fieldname` 引用了`DateRange` ，则必须以`true` 的形式传递`range` 关键字参数。如果`fieldname` 引用了 a Vector{DateRange}，则`multiple` 和`range` 关键字参数都必须以`true` 的形式传递。

Examples

Model

julia> @vars DatePickers begin
        date::R{Date} = today() + Day(30)
        dates::R{Vector{Date}} = Date[today()+Day(10), today()+Day(20), today()+Day(30)]
        daterange::R{DateRange} = DateRange(today(), (today() + Day(3)))
        dateranges::R{Vector{DateRange}} = [
          DateRange(today(), (today() + Day(3))),
          DateRange(today() + Day(7), (today() + Day(10))),
          DateRange(today() + Day(14), (today() + Day(17))),
        ]
        proxydate::R{Date} = today()
        inputdate::R{Date} = today()
      end

View

julia> datepicker(:date)
julia> datepicker(:dates, multiple = true)
julia> datepicker(:daterange, range = true)
julia> datepicker(:dateranges, range = true, multiple = true)

Arguments

行为
- name::String - 用于指定控件名称；在处理直接提交到 URL 的表单时非常有用。"car_id"
- landscape::Bool - 以横向模式显示组件
- yearsinmonthview::Bool - 在月份视图中显示年份选择器
内容
- title::String - 当指定时，它会覆盖默认的标题；当不在 "最小 "模式下时才有意义。"Birthday"
- subtitle::String - 当指定时，它会覆盖默认的标题副标题；当不在 "最小 "模式下时才有意义。"John Doe"
- todaybtn::Bool - 显示选择当前日期的按钮
- minimal::Bool - 不显示标题
选择
- navminyearmonth::String - 禁止用户浏览特定年份+月份（YYYY/MM 格式）以下的内容；该道具不用于修正模型；您可能还想使用 "默认年-月 "道具，例如： Lock user from navigating below a specific year+month (in YYYY/MM format)."2020/07"
- navmaxyearmonth::String - 锁定用户在特定年+月（YYYY/MM 格式）上方导航；该道具不用于修正模型；您可能还想使用 "默认年-月 "道具，例如："锁定用户在特定年+月（YYYY/MM 格式）上方导航"。"2020/10"
- nounset::Bool - 取消取消选择日期的功能；不适用于在已选择的日期上选择一个范围
- multiple::Bool - 允许多重选择；模型必须是数组
- range::Bool - 允许范围选择；与 "选项 "道具部分兼容：所选范围也可能包括 "不可选 "的日期
状态
- readonly::Bool - 将组件置于只读模式
- disable::Bool - 将组件置于禁用模式
样式
- color::String - 来自 Quasar 调色板的组件颜色名称。 "primary" "teal-10"
- textcolor::String - 覆盖文本颜色（如需要）；Quasar 调色板中的颜色名称，例如… "primary" "teal-10"
- dark::Bool - 通知组件背景为深色
- square::Bool - 移除边框半径，使边框呈正方形
- flat::Bool - 应用 "扁平 "设计（无默认阴影）
- bordered::Bool - 为组件应用默认边框
- eventcolor::String - 颜色名称（来自 Quasar 调色板）；如果使用函数，则以字符串形式接收日期，并必须返回一个字符串（接收日期的颜色）；如果使用函数，则为获得最佳性能，请在作用域中引用该函数，而不要内联定义。 "teal-10" eventcolor!="(date) => date[9] % 2 === 0 ? 'teal' : 'orange'"

对话框

# StippleUI.Dialogs.dialog — Method

dialog()

dialog` 组件是为用户提供选择特定操作或操作列表的绝佳方式。它们还可以为用户提供重要信息，或要求用户做出决定（或多个决定）。

提示：对话框也可作为全局可用方法用于更基本的用例，如本地 JS`alert()` 、prompt() 等。

Examples

Model

julia> @vars DialogModel begin
         show_dialog::R{Bool} = false
       end

View

julia> Html.div(class="q-pa-md q-gutter-sm", [
        btn("Alert", color="primary", @click("show_dialog = true")),
        StippleUI.dialog(:show_dialog, [
          card([
            card_section(Html.div(class="text-h6", "Alert")),
            card_section(class="q-pt-none", "Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam,
            ea at omnis vel numquam exercitationem aut, natus minima, porro labore.")
          ])
        ])
      ])

Arguments

行为
- persistent::Bool - 用户在对话框外单击或按 ESC 键都无法解除对话框；此外，更改应用程序路径也无法解除对话框
- noesc::Bool - 用户按 ESC 键无法退出对话框；如果同时设置了 "持久 "属性，则无需设置该属性
- nobackdrop::Bool - 用户无法通过点击对话框外的按钮来取消对话框；如果也设置了 "持久 "属性，则无需进行设置
- autoclose::Bool - 在对话框内的任何点击/轻敲都将关闭对话框
- transitionshow::String - 嵌入式转换之一，例如`"fade"` 、"slide-down"
- transitionhide::String - 嵌入式过渡效果之一，如`"fade"` 、"slide-down"
- norefocus::Bool - 辅助功能）当对话框被隐藏时，不要重新聚焦到之前拥有焦点的 DOM 元素上
- nofocus::Bool - 辅助功能）当对话框显示时，不要切换焦点
内容
- seamless::Bool - 将对话框置于无缝模式；不使用背景，以便用户也能与页面的其他部分进行交互
- maximized::Bool - 将对话框设置为最大化模式
- fullwidth::Bool - 对话框将尝试以与窗口相同的宽度呈现
- fullheight::Bool - 对话框将尝试以与窗口相同的高度呈现
- position::String - 将对话框粘贴到其中一侧（"顶部"、"右侧"、"底部 "或 "左侧"）。
样式
- contentclass::Union{Array, String}- 归属于内容的类定义，例如`"my-special-class"` :content-class="{ 'my-special-class': <condition> }"
- contentstyle::Union{Array, String}- 归属于内容的样式定义，例如："background-color: #ff0000" :content-style="{ color: '#ff0000' }"
- square::Bool - 强制内容具有方形边框

抽屉

编辑

# StippleUI.Editors.editor — Method

editor(fieldname, args…; kwargs…)

组件是一个 WYSIWYG（“what you see is what you get”）编辑器组件，可让用户编写甚至粘贴 HTML。

Examples

Model

julia> @vars EditorModel begin
          s_editor::R{String} = "What you see is <b>what</b> you get."
       end

View

julia> editor(:s_editor, minheight="5rem")

julia> StippleUI.form( autocorrect="off", autocapitalize="off", autocomplete="off", spellcheck="false", [
          editor(:s_editor)
       ])

Arguments

行为
- fullscreen::Bool - 全屏模式（注意需要".sync "修饰符！）示例：更改路线应用程序不会退出全屏模式。:fullscreen.sync="isFullscreen"
- noroutefullscreenexit::Bool - 更改路线应用程序不会退出全屏模式
- paragraphtag::String - 要使用的段落标签示例：.div,p
内容
- placeholder::String - 作为占位符显示的文本示例`Type your story here...`
模型
- value::String [必填项！] - 组件的反应模型
状态
- readonly::Bool - 将组件设置为只读模式
- disable::Bool - 禁用组件
样式 * square::Bool - Removes border-radius so borders are squared * minheight::String - 默认情况下组件的最小高度。10rem 例： 15rem 50vh * flat::Bool - Applies a 'flat' design (no borders) * dark::Bool - 通知组件背景为深色 * maxheight::String - CSS unit for maximum height of the input area ex. 100px 90vh * height::String - 用于设置可编辑区域高度的 CSS 值。 100px 90vh * toolbaroutline::Bool - Toolbar buttons are rendered "outlined" * toolbarpush::Bool - 工具栏按钮渲染为 "按钮 "类型 * toolbarrounded::Bool - Toolbar buttons are rendered "rounded" * contentstyle::Dict - 带有 CSS 属性和值的对象，用于为`editor` 的容器设计样式。 contentstyle!="{ backgroundColor: '#C0C0C0' }" * contentclass::Union{Dict, Vector, String}- 输入区域的 CSS 类，例如 my-special-class contentclass!="{ 'my-special-class': <condition> }"

表格输入

# StippleUI.FormInputs.filefield — Function

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

# StippleUI.FormInputs.numberfield — Function

numberfield( label::Union{String, Symbol} = "", fieldname::Union{Symbol,Nothing} = nothing, args...; content::Union{String,Vector,Function} = "", kwargs...)

# StippleUI.FormInputs.textarea — Function

textarea(label::Union{String,Symbol} = "", fieldname::Union{Symbol,Nothing} = nothing, args...; content::Union{String,Vector,Function} = "", kwargs...)

# StippleUI.FormInputs.textfield — Function

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

Examples

Model

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

View

julia> textfield("What's your name *", :name, name = "name", @iif(:warin), :filled, hint = "Name and surname", "lazy-rules",
          rules = "[val => val && val.length > 0 || 'Please type something']"
       )

Arguments

一般情况 *type::String - 必须是以下之一：text (default),textarea,email,tel,number,password 和`url` 。这一点很重要，因为它决定了在移动设备上弹出的键盘类型。
行为 * name::String - Used to specify the name of the control; Useful if dealing with forms; If not specified, it takes the value of 'for' prop, if it exists ex. car_id * mask::String - 自定义屏蔽或预定义屏蔽名称之一，例如 date datetime time fulltime phone card * fillmask::Union{Bool, String} - Fills string with specified characters (or underscore if value is not string) to fill mask’s length ex. true 0 _ * reversefillmask::Bool - 从掩码右侧填充字符串 * unmaskedvalue::Bool - Model will be unmasked (won’t contain tokens/separation characters) * error::Bool - 字段是否存在验证错误？ *rules::Vector - 函数/字符串数组；如果是字符串，则必须是嵌入式验证规则的名称。 rules!="[ 'fulltime' ]" rules!="[ val => val.length <= 3 || 'Please use maximum 3 characters' ]" * reactiverules::Bool - By default a change in the rules does not trigger a new validation until the model changes; If set to true then a change in the rules will trigger a validation; Has a performance penalty, so use it only when you really need it * lazyrules::Union{Bool, String} - If set to boolean true then it checks validation status against the 'rules' only after field loses focus for first time; If set to 'ondemand' then it will trigger only when component’s validate() method is manually called or when the wrapper form submits itself true false ondemand * loading::Bool - Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot. * clearable::Bool - Appends clearable icon when a value (not undefined or null) is set; When clicked, model becomes null * autofocus::Bool - Focus field on initial component render * for::String - Used to specify the 'id' of the control and also the 'for' attribute of the label that wraps it; If no 'name' prop is specified, then it is used for this attribute as well ex. myFieldsId
Content * errormessage::String - Validation error message (gets displayed only if 'error' is set to 'true') ex. Username must have at least 5 characters * noerroricon::Bool - Hide error icon when there is an error * label::Union{String,Symbol} - A text label that will “float” up above the input field, once the field gets focus ex. Username * stacklabel::Bool - 无论字段内容（如有）如何，标签将始终显示在字段上方 * hint::String - Helper (hint) text which gets placed below your wrapped form component ex. Fill in between 3 and 12 characters * hidehint::Bool - 当字段没有焦点时，隐藏辅助（提示）文本 * prefix::String - Prefix ex. $ * suffix::String - 后缀 @gmail.com * loading::Bool - Signals the user a process is in progress by displaying a spinner; Spinner can be customized by using the 'loading' slot. * clearable::Bool - 设置值（非未定义或空值）时，附加可清除图标；点击后，模型变为空值 * clearicon::String - Custom icon to use for clearable icon; If not specified, then it uses the default icon * labelslot::Bool - 启用标签槽；如果未设置 "标签 "道具，则需要设置它以强制使用 "标签 "槽 * bottomslots::Bool - Enables bottom slots ('error', 'hint', 'counter') * counter::Bool - 在右下角显示自动计数器 * shadowtext::String - Text to be displayed as shadow at the end of the text in the control; Does NOT applies to type=file * autogrow::Bool - 使字段及其内容自动增长（使用文本区）
状态 * disable::Bool - Put component in disabled mode * readonly::Bool - 将组件置于只读模式
样式 * labelcolor::String - Color name for the label from the Color Palette; Overrides the 'color' prop; The difference from 'color' prop is that the label will always have this color, even when field is not focused ex. primary teal * color::String - 来自调色板的组件颜色名称 * bgcolor::String - Color from Color Palette * dark::Bool - 通知组件背景为深色 * filled::Bool - Use 'filled' design for the field * outline::Bool - 为字段使用 "轮廓 "设计 * borderless::Bool - Use 'borderless' design for the field * standout::Union{Bool, String}- 为字段使用 "突出 "设计；指定聚焦时要应用的类别（覆盖默认类别），例如："……"。 standout standout="bg-primary text-white" * hidebottomspace::Bool - Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content * rounded::Bool - 为正方形组件应用小的标准边框半径 * square::Bool - Remove border-radius so borders are squared; Overrides 'rounded' prop * dense::Bool - 密集模式；占用较少空间 * itemaligned::Union{Vector, String, Dict} - Match inner content alignment to that of item * inputclass::Union{Vector, String, Dict}- 类定义归属于底层输入标签，例如：my-special-class inputclass!="{ 'my-special-class': <condition> }" * inputstyle::Union{Vector, String, Dict}- 归属于底层输入标记的样式定义，例如：background-color: #ff0000 inputstyle!="{ backgroundColor: #ff0000 }"
模型 * debounce::Union{String, Int} - Debounce amount (in milliseconds) when updating model ex. 0 500 * maxlength::Union{String, Int}- 指定模型的最大长度，例如`12`

表格

# StippleUI.Forms.form — Method

form(args...; noresetfocus::Bool = false, kwargs...)

form 组件渲染<form> DOM 元素，并允许您通过与之关联的规则轻松验证具有内部验证（而非外部验证）的子表单组件（如`input` 、select 或您的`field` 封装组件）。

Examples

Model

julia> @vars FormModel begin
          name::R{String} = ""
          age::R{Int} = 0
          warin::R{Bool} = true
       end

View

julia> StippleUI.form(action = "/sub", method = "POST", [
          textfield("What's your name *", :name, name = "name", @iif(:warin), :filled, hint = "Name and surname", "lazy-rules",
            rules = "[val => val && val.length > 0 || 'Please type something']"
          ),
          numberfield("Your age *", :age, name = "age", "filled", :lazy__rules,
            rules = "[val => val !== null && val !== '' || 'Please type your age',
              val => val > 0 && val < 100 || 'Please type a real age']"
          ),
          btn("submit", type = "submit", color = "primary")
       ])

Arguments

autofocus::Bool - Focus first focusable element on initial component render
noerrorfocus::Bool - Do not try to focus on first component that has a validation error when submitting form
noresetfocus::Bool - Do not try to focus on first component when resetting form
greedy::Bool - Validate all fields in form (by default it stops after finding the first invalid field with synchronous validation)

Headings

Icons

# StippleUI.Icons.icon — Method

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

Stipple 开箱即支持：https://fonts.google.com/icons?selected=Material+Icons[Material Icons]、https://fontawesome.com/icons[Font Awesome]、https://ionic.io/ionicons[Ionicons]、https://materialdesignicons.com/[MDI]、https://akveo.github.io/eva-icons/#/[Eva Icons]、https://themify.me/themify-icons[Themify Icons]、https://icons8.com/line-awesome[Line Awesome] 和 Bootstrap Icons。

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

Examples

View

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

Arguments

内容
- tag::String - 要渲染的 HTML 标记，除非没有提供图标或图标是 svg 图标。 div i
- left::Bool - 如果图标在某物的左侧，则有用：在图标的右侧应用标准边距
- right::Bool - 如果图标在某物的右侧，则有用：在图标的左侧应用标准边距
模型
- name::String - 图标名称；除非使用 "img: "前缀，否则请确保已安装图标库；如果使用 "none"（字符串）作为值，则不会渲染图标（但仍会使用屏幕空间）。 map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png
样式
- size::String - 以 CSS 单位表示的尺寸，包括单位名称或标准尺寸名称`16px` 2rem xs md
- color::String - 来自调色板的组件颜色名称，例如：primary teal-10

图片浏览

# StippleUI.ImageViews.imageview — Method

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

imageview 组件可轻松处理图片（任何图片格式），还可添加漂亮的加载效果以及许多其他功能（例如：设置宽高比）。

Examples

Model

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

View

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

Arguments

行为 * transition::String - One of embedded transitions ex. fade slide-down * nativecontextmenu::Bool - 启用图像的本地上下文菜单
内容 * ratio::Union{String, Int} - Force the component to maintain an aspect ratio ex. ratio!="4/3" (Number format) ratio!="16/9" (String format) ratio="1" * alt::String - 如果图像无法显示，则为图像指定替代文本，例如`Two cats` 。 * basic::Bool - Do not use transitions; faster render * contain::Bool - 确保显示的图像完全包含，无论在水平或垂直方向上是否需要图像以外的额外空白空间
模式 * src::String - Path to image ex. (public folder) src="img/something.png" (assets folder) src="~assets/my-img.gif" (URL) src="https://placeimg.com/500/300/nature" * srcset::String - 语法与image:[] srcset 属性相同。例如：elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w * sizes::String - Same syntax as image:[] sizes attribute. ex. (max-width: 320px) 280px, (max-width: 480px) 440px, 800px * width::String - 强制图像宽度；还必须包括单位（px 或 %），例如 280px 70% * height::String - Forces image height; Must also include the unit (px or %) ex. 280px 70% * placeholdersrc::String - 在等待加载图片时，可以使用占位符图片。 (public folder) src="img/something.png" (assets folder) src="~assets/my-img.gif" (URL) src="https://placeimg.com/500/300/nature"
样式
- color::String - 来自调色板的组件颜色名称，例如：primary teal-10
- imgclass::Union{Vector, String, Dict}- 归属于图像容器的类定义；不适用于标题。 my-special-class imgclass!="{ 'my-special-class': <condition> }"
- imgstyle::Dict - 将 CSS 应用于图像容器；不适用于标题。 imgstyle!="{ transform: 'rotate(45deg)' }"
- spinnercolor::String - 默认旋转器的颜色名称（除非使用 "加载 "槽）primary teal-10
- spinnersize::String - 默认 Spinner（除非使用 "加载 "插槽）的 CSS 单位大小，包括单位名称。 16px 2rem

内装载机

交叉口

旋钮

# StippleUI.Knobs.knob — Function

  knob(range::AbstractRange{T} where T <: Real, fieldname::Union{Symbol,Nothing} = nothing, args...; kwargs...)

渲染旋钮输入元素。

布局

列表

# StippleUI.Lists.item — Method

  item(args...; kwargs...)

Arguments

内容
- tag::String - 要渲染的 HTML 标记；建议：在封装`checkbox`/radio/toggle 时使用 "label"，这样当用户点击整个项目时，就会触发所述组件的模型更改。 a label div
- insetlevel::Int - 应用内嵌；当缺少头像/左侧但又想与其他有左侧的项目内容对齐时，或当您正在创建菜单时，例如："应用内嵌 "就很有用。insetlevel!="1"
常规
- tabindex::Union{Int, String}- Tabindex HTML 属性值。 0 100
导航
- href::String - 本地<a>link href 属性；优先于’to'/'exact'/'replace’道具，例如`http://genieframework.com</a> ** `target::String - 本地<a>link target 属性；仅与’href’道具一起使用；优先于’to'/'exact'/'replace’道具`_blank` _self _parent _top </a>
状态
- disable::Bool - 将组件置于禁用模式
- active::Bool - 将项目置于 "激活 "状态
- clickable::Bool -item 是否可点击？如果是，那么它将添加悬停效果并发出 "点击 "事件
- manualfocus::Bool - 将项目置于手动聚焦状态；启用 "聚焦 "道具，该道具将确定项目是否处于聚焦状态，而不是依赖本地悬停/聚焦状态
- focused::Bool - 只有当 "manual-focus "已启用或设置为 true 时，才会确定焦点状态
样式
- dark::Bool - 通知组件背景为深色
- dense::Bool - 密集模式；占用更少空间

# StippleUI.Lists.item_label — Method

  item_label(args...; kwargs...)

Arguments

行为
- lines::Union{Int, String}- 当指定的行数没有足够的空间渲染时，应用省略号；例如 1 3 lines!="2"
内容
- overline::Bool - 显示加线标签
- caption::Bool - 渲染标题标签
- header::Bool - 渲染标题标签
- lines::Union{Int, String}- 当指定行数没有足够空间渲染时，应用省略号；1 3 lines!="2"

# StippleUI.Lists.item_section — Method

  item_section(args...; kwargs...)

Arguments

avatar::Bool - 渲染头像项目的侧面（不需要设置 "侧面 "道具）
thumbnail::Bool - 渲染项目缩略图的侧面（不需要设置 "侧面 "道具）
side::Bool - 渲染项目的侧面
top::Bool - 将内容对齐到顶部（适用于多行项目）
nowrap::Bool - 不换行文本（适用于项目的主要内容）

# StippleUI.Lists.list — Method

  list(args...; kwargs...)

list 和`item` 是一组组件，可共同将多个行项目垂直显示为一个连续元素。它们最适用于以信息行的形式显示类似的数据类型，如联系人列表、播放列表或菜单。item 也可以在`list` 之外使用。

Examples

View

julia>  list(bordered=true, separator=true, [
          item(clickable=true, vripple=true, [
            itemsection("Single line item")
          ]),

          item(clickable=true, vripple=true, [
            itemsection([
              itemlabel("Item with caption"),
              itemlabel("Caption", caption=true)
            ])
          ]),

          item(clickable=true, vripple=true, [
            itemsection([
              itemlabel("OVERLINE", overline=true),
              itemlabel("Item with caption")
            ])
          ])
        ])

Arguments

内容
- separator::Bool - 在包含的项目之间应用分隔线
- padding:Bool - 在顶部和底部应用类似材料设计的衬垫
样式
- bordered::Bool - 为组件应用默认边框
- dense::Bool - 密集模式；占用更少空间
- dark::Bool - 通知组件背景为深色

菜单

  menu(fieldname::Union{Symbol,Nothing} = nothing, args...; content::Union{String,Vector} = "", kwargs...)

menu 组件是一种方便的菜单显示方式。与`list` 作为下拉内容非常搭配，但绝不仅限于此。

Examples

View

julia> btn("Basic Menu", color="primary", [StippleUI.menu( [p("Hello")])

Arguments

行为
- target::Union{Bool, String}- 配置目标元素以触发组件切换；'true’表示启用父级 DOM 元素，'false’表示禁止将事件附加到任何 DOM 元素；通过使用字符串（CSS 选择器）或 DOM 元素，将事件附加到指定的 DOM 元素（如果存在）默认值。true 例。 target!=false target!=".my-parent"
- noparentevent::Bool - 跳过将事件附加到目标 DOM 元素（触发元素显示）的过程
- contextmenu::Bool - 允许组件的行为类似于右键菜单，点击鼠标右键（或在移动设备上长按鼠标左键）即可打开该菜单
- scrolltarget::Union{String}- 将 CSS 选择器或 DOM 元素用作自定义滚动容器，而不是自动检测到的滚动容器。 scrolltarget=".scroll-target-class" scrolltarget="#scroll-target-id" scrolltarget="body"
位置
- fit::Bool - 允许菜单至少与其目标的全宽相匹配
- cover::Bool - 允许菜单覆盖其目标。使用时，"self "和 "fit "道具不再有效。
- anchor::String - 设置菜单相对于目标的起始位置或锚点的两个值。 anchor="top left" anchor="bottom right" anchor="center"
- self::String - 设置菜单自身相对于目标位置的两个值，例如 self="top left" self="bottom right" self="center"
- offset::Vector - 一个由两个数字组成的数组，用于以像素为单位水平和垂直偏移菜单。 [8, 8] [5, 10]
样式
- contentclass::Union{Vector, String, Dict}- 归属于内容的类定义，例如 my-special-class contentclass!="{ 'my-special-class': <condition> }"
- contentstyle::Union{Vector, String, Dict}- 归属于内容的样式定义，例如 backgroundcolor: #ff0000 contentstyle!="{ color: '#ff0000' }"
- dark::Bool - 通知组件背景为深色
- square::Bool - 强制内容具有方形边框
- maxheight::String - 菜单的最大高度；以 CSS 单位表示的尺寸，包括单位名称，例如 16px 2rem
- maxwidth::String - 菜单的最大宽度；大小以 CSS 单位表示，包括单位名称（例如：… 16px 2rem

Popupproxies

# StippleUI.PopupProxies.popup_proxy — Function

  popup_proxy(fieldname::Union{Symbol,Nothing} = nothing, args...; content::Union{String,Vector,Function} = "", kwargs...)

popupproxy 应在需要显示`menu` （在大屏幕上）或`dialog` （在小屏幕上）时使用。popupproxy 还可以处理上下文菜单。

Examples

View

julia> btn("Handles click", push=true, color="primary", [
          popupproxy([
            banner("You have lost connection to the internet. This app is offline.", [
              template("", "v-slot:avatar", [
                icon("signal_wifi_off", color="Primary")
              ])
            ])
          ])
       ])

Arguments

行为
- target::Union{Bool, String}- 配置目标元素以触发组件切换；'true’表示启用父 DOM 元素，'false’表示禁用附加到任何 DOM 元素的事件；通过使用字符串（CSS 选择器）或 DOM 元素，可将事件附加到指定的 DOM 元素（如果存在），例如`true` 。 target!=false target!=".my-parent"
- noparentevent::Bool - 跳过将事件附加到目标 DOM 元素（触发元素显示）的过程
- contextmenu::Bool - 允许组件像上下文菜单一样运行，点击鼠标右键（或在移动设备上长按鼠标右键）即可打开该菜单
- breakpoint::Union{Int, String}- 窗口宽度/高度（以较小者为准）的断点（以像素为单位），在此断点上将使用菜单而不是对话框，例如：992 。breakpoint!="1234"

收音机

# StippleUI.Radios.radio — Function

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

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

Examples

Model

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

View

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

Arguments

行为
- name::String - 用于指定控件名称；在处理直接提交到 URL 的表单时非常有用。car_id
- keep-color::Bool - 当复选框未打钩时，是否应保留颜色（如果有指定）？
一般情况
- tabindex::Union{Int, String}- Tabindex HTML 属性值
标签
- leftlabel::Bool - 应在复选框左侧显示的标签（如果有指定）。
状态
- disable::Bool - 将组件置于禁用模式
样式
- size::String - 以 CSS 单位表示的尺寸，包括单位名称或标准尺寸名称（xs|sm|md|lg|xl）。 16px 2rem xs md
- color::String - 来自调色板的组件颜色名称。 primary teal-10
- dark::Bool - 通知组件背景为深色
- dense::Bool - 密集模式；占用空间较少

范围

# Base.range — Function

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

range 组件是为用户提供在最小值和最大值之间选择一个子范围值的绝佳方式，并提供选择这些值的可选步骤。范围组件的一个用例是提供价格范围选择

Examples

Model

julia> @vars RangeModel begin
         range_data::R{RangeData{Int}} = RangeData(18:80)
       end

View

julia> range(18:1:90,
          :range_data;
          label=true,
          color="purple",
          labelalways=true,
          labelvalueleft=Symbol("'Min age: ' + range_data.min"),
          labelvalueright=Symbol("'Max age: ' + range_data.max")
       )

Arguments

行为
- name::String - 用于指定控件名称；在处理直接提交到 URL 的表单时非常有用。car_id
- snap::Bool - 抓取有效值，而不是自由滑动；建议：与 "步长 "属性一起使用
- reverse::Bool - 反向工作（改变方向）
- vertical::Bool - 垂直显示
- labelalways::Bool - 始终显示标签
内容
- label::Bool - 当用户点击/轻按滑块拇指并移动滑块时弹出标签
- markers::Union{Bool, Int}- 在轨道上显示标记，为模型的每个可能值或使用自定义步长（指定数字时）显示一个标记。 markers markers="5"
- dragrange::Bool - 用户可以拖动范围，而不仅仅是两个拇指
- dragonlyrange::Bool - 用户可以只拖动范围而不拖动两个拇指
一般操作
- tabindex::Union{Int, String}- Tabindex HTML 属性值，例如 0 100
标签
- labelcolorleft::String - 左侧标签背景的颜色名称，来自调色板示例。 primary teal-10
- labeltextcolorleft::String - 左侧标签文本的颜色名称，来自调色板 ex. primary teal-10
- labelcolorright::String - 右标签背景的颜色名称，可从 Color Palette ex. primary teal-10
- labeltextcolorright::String - 右侧标签文本的颜色名称，请从调色板 ex. primary teal-10
- labelvalueleft::Union{String, Int}- 覆盖最小值的默认标签 ex.labelvalueleft="model.min + 'px'"
- labelvalueright::Union{String, Int}- 覆盖最大值的默认标签 ex.labelvalueright="model.max + 'px'"
模型
- range::AbstractRange{T}- 可从 min:step:max 中选择的数值范围，符号或字符串可用于引用模型字段，例如`range("min":2:"max", :myvalue)`
- lazy::Bool - 如果为 "true"，则仅在释放滑块时更新模型字段的值
状态
- disable::Bool - 将组件置于禁用模式
- readonly::Bool - 将组件置于只读模式
样式
- color::String - 来自调色板的组件颜色名称。 primary teal-10
- labelcolor::String - 来自调色板的组件颜色名称。 primary teal-10
- thumbpath::String - 设置自定义缩略图 svg 路径 ex.M5 5 h10 v10 h-10 v-10
- dark::Bool - 通知组件背景为深色
- dense::Bool - 密集模式；占用更少空间

# StippleUI.Ranges.slider — Function

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

The slider is a great way for the user to specify a number value between a minimum and maximum value, with optional steps between valid values. The slider also has a focus indicator (highlighted slider button), which allows for keyboard adjustments of the slider. Examples

View

julia> slider(1:5:100)

Arguments

行为
- name::String - 用于指定控件名称；在处理直接提交到 URL 的表单时非常有用。car_id
- snap::Bool - 抓取有效值，而不是自由滑动；建议：与 "步长 "属性一起使用
- reverse::Bool - 反向工作（改变方向）
- vertical::Bool - 垂直显示
- labelalways::Bool - 始终显示标签
内容
- label::Bool - 当用户点击/轻按滑块拇指并移动滑块时弹出标签
- markers::Union{Bool, Int}- 在轨道上显示标记，为模型的每个可能值或使用自定义步长（指定数字时）显示一个标记。 markers markers="5"
- dragrange::Bool - 用户可以拖动范围，而不仅仅是两个拇指
- dragonlyrange::Bool - 用户可以只拖动范围而不拖动两个拇指
一般操作
- tabindex::Union{Int, String}- Tabindex HTML 属性值，例如 0 100
标签
- labelcolorleft::String - 左侧标签背景的颜色名称，来自调色板示例。 primary teal-10
- labeltextcolorleft::String - 左侧标签文本的颜色名称，来自调色板 ex. primary teal-10
- labelcolorright::String - 右标签背景的颜色名称，可从 Color Palette ex. primary teal-10
- labeltextcolorright::String - 右侧标签文本的颜色名称，请从调色板 ex. primary teal-10
- labelvalueleft::Union{String, Int}- 覆盖最小值的默认标签 ex.labelvalueleft="model.min + 'px'"
- labelvalueright::Union{String, Int}- 覆盖最大值的默认标签 ex.labelvalueright="model.max + 'px'"
模型
- range::AbstractRange{T}- 可从 min:step:max 中选择的数值范围，符号或字符串可用于引用模型字段，例如`range("min":2:"max", :myvalue)`
- lazy::Bool - 如果为 "true"，则仅在释放滑块时更新模型字段的值
状态
- disable::Bool - 将组件置于禁用模式
- readonly::Bool - 将组件置于只读模式
样式
- color::String - 来自调色板的组件颜色名称。 primary teal-10
- labelcolor::String - 来自调色板的组件颜色名称。 primary teal-10
- thumbpath::String - 设置自定义缩略图 svg 路径 ex.M5 5 h10 v10 h-10 v-10
- dark::Bool - 通知组件背景为深色
- dense::Bool - 密集模式；占用较少空间

评级

# StippleUI.Ratings.rating — Function

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

评级是一个允许用户对项目进行评级的组件，通常称为 “Star Rating”。

Examples

Model

julia> @vars RatingModel begin
          myrating::R{Int} = 3
       end

View

julia> rating(:myrating,size="1.5em",icon="thumb_up")
julia> rating(:myrating, size="2em",color="red-7",icon="favorite_border")
julia> rating(:myrating, size="2.5em", color="purple-4", icon="create")

Arguments

行为
- name::String - 用于指定控件名称；在处理直接提交到 URL 的表单时非常有用`car_id`
内容
- icon::Union{String, Vector}- 图标名称；除非使用 "img: "前缀，否则请确保已安装图标库；如果提供数组，则每个评级值都将使用数组中的相应图标（基于 0）。 map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png
- iconselected::Union{String, Vector}- 选择时使用的图标名称（可选）；除非使用 "img: "前缀，否则请确保已安装图标库；如果提供数组，则每个评级值都将使用数组中的相应图标（基于 0）。 map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png
- iconhalf::Union{String, Vector}- 选择时使用的图标名称（可选）；除非使用 "img: "前缀，否则请确保已安装图标库；如果提供数组，则每个评分值都将使用数组中的相应图标（基于 0）。 map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png
标签
- max::Union{Int, String}- 要显示的图标数量例如：3 max="5"
模式
- noreset::Bool - 使用时，禁用点击/敲击代表当前模型值的图标将模型重置为 0 的默认行为
状态
- readonly::Bool - 将组件置于只读模式
- disable::Bool - 将组件置于禁用模式
样式
- size::String - 以 CSS 单位表示的尺寸，包括单位名称或标准尺寸名称（xs|sm|md|lg|xl）。 16px 2rem md xs
- color::Union{String, Vector}- 来自调色板的组件颜色名称；v1.5.0+：如果提供了数组，则每个评级值都将使用数组中的相应颜色（基于 0）。 primary primary teal-10 ["accent", "grey-7"]
- colorselected::Union{String, Vector}- 所选图标的 Quasar 调色板颜色名称`primary` teal-10
- colorhalf::Union{String, Vector}- 来自调色板的颜色名称。 primary teal-10
- nodimming::Bool - 不降低未选定图标的不透明度

滚动区域

# StippleUI.ScrollAreas.scrollarea — Method

  scrollarea(args...; kwargs...)

scrollarea 组件提供了一种通过封装内容来定制滚动条的巧妙方法。把它想象成一个具有`overflow: auto` 的 DOM 元素，但它有自己的自定义样式的滚动条，而不是浏览器的默认滚动条，而且上面还有一些不错的功能。

Examples

View

julia> StippleUI.scrollarea(style="height: 200px; max-width: 300px;", [
          Html.div("Stipple is a reactive UI library for building interactive
          data applications in pure Julia. It uses Genie.jl (on the server side)
          and Vue.js (on the client). Stipple uses a high performance MVVM
          architecture, which automatically synchronizes the state two-way
          (server -> client and client -> server) sending only JSON data over
          the wire. The Stipple package provides the fundamental communication
          layer, extending Genie's HTML API with a reactive component.")
       ])

Arguments

行为
- visible::Bool - 手动控制滚动条的可见性；覆盖默认的鼠标移过/离开行为
- delay::Union{Int, String}- 当内容发生变化时，滚动条会出现；该延迟定义了滚动条再次消失前的时间量（毫秒）（如果组件未悬停）默认`1000` ex. 500 delay!="500
- horizontal::Bool - 将 getScrollPosition、getScrollPercentage、setScrollPosition 和 setScrollPercentage 的默认坐标轴改为水平坐标轴，而不是垂直坐标轴（默认坐标轴）。
常规
- tabindex::Union{Int, String}- Tabindex HTML 属性值`0` 100
样式
- dark::Bool - 通知组件背景为深色
- barstyle::Union{Vector, String, Dict}- 包含 CSS 属性和值的对象，用于自定义滚动条（垂直和水平）的样式。 barstyle!="{ borderRadius: '5px', background: 'red', opacity: 1 }"
- contentstyle::Union{Vector, String, Dict}- 包含 CSS 属性和值的对象，用于设置滚动条容器的样式`scrollarea`

选择

# Genie.Renderer.Html.select — Method

select(fieldname::Symbol, args...; options::Symbol, kwargs...)

Examples

Model

julia> @vars SelectModel begin
          model::R{Vector{String}} = []
          networks::R{Vector{String}} = ["Google", "Facebook", "Twitter", "Pinterest", "Reddit"]
       end

View

julia> select(:model, options= :networks, useinput=true, multiple=true, clearable = true, filled = true, counter = true, usechips = true, label="Social Networks")

Arguments

行为
- name::String - 用于指定控件名称；在处理表单时非常有用；如果未指定，则使用’for’道具的值，如果存在的话。 car-id car-id
- virtualscrollhorizontal::Bool - 使虚拟列表在水平模式下工作
- error::Bool - 字段是否有验证错误？
- rules::Vector - 函数/字符串数组；如果是字符串，则必须是嵌入式验证规则之一的名称`rules="[ val => val.length <= 3 || 'Please use maximum 3 characters' ]"</no-translation> <no-translation></no-translation> <no-translation>`reactiverules::Bool</no-translation> - 默认情况下，规则的更改不会触发新的验证，直到模型发生变化；如果设置为 true，则规则的更改将触发验证；具有性能惩罚，因此只有在真正需要时才使用。 <no-translation></no-translation> <no-translation>`lazyrules:：Union<no-translation>{Bool, String}</no-translation>`</no-translation> - 如果设置为布尔值 true，那么只有在字段第一次失去焦点后，它才会根据 "规则 "检查验证状态；如果设置为 "ondemand"，那么只有当组件的 validate() 方法被手动调用时，或者当包装 <no-translation>`form`</no-translation> 提交自己时，它才会触发。<no-translation>`（布尔值）true`</no-translation> <no-translation>`（布尔值）false`</no-translation> <no-translation>`ondemand`</no-translation>。 <no-translation></no-translation><no-translation>`loading::Bool`</no-translation>--通过显示旋转器向用户发出进程正在进行的信号；可以使用 "loading "槽自定义旋转器。 <no-translation></no-translation> <no-translation>`clearable::Bool`</no-translation> - 当值（不是未定义或空值）被设置时，附加 clearable 图标；当点击时，模型变为空值。 <no-translation></no-translation> <no-translation>`autofocus::Bool`</no-translation> - 在初始组件呈现时聚焦字段 <no-translation></no-translation> <no-translation>`for::String`</no-translation> - 用于指定控件的 "id "以及包装它的标签的 "for "属性；如果没有指定 "name "道具，那么它也将用于该属性 <no-translation>`myFieldsId`</no-translation> <no-translation></no-translation> <no-translation>`hidedropdownicon::Bool`</no-translation> - 隐藏下拉图标 <no-translation></no-translation> <no-translation>`fillinput::Bool`</no-translation> - 用当前值填充输入；与 "hideselected "一起使用；与 "multiple "选择一起不工作 <no-translation></no-translation> <no-translation>`newvaluemode::String`</no-translation> - 创建新值并定义添加新值时的行为：add "表示添加值（即使可能重复），"add-unique "表示只添加唯一值，"toggle "表示添加或删除值（基于该值是否存在）；使用此道具时，监听 <no-translation>`newvalue`</no-translation> 变为可选项（仅用于覆盖 <no-translation>`newvaluemode`</no-translation> 定义的行为）。<no-translation>`add`</no-translation><no-translation>`add-unique`</no-translation><no-translation>`toggle`</no-translation <no-translation></no-translation> <no-translation>`autocomplete::String`</no-translation> - 字段的自动完成属性，例如。<no-translation>`autocomplete="country"`</no-translation> - 字段的自动完成属性。 <no-translation></no-translation> <no-translation>`transitionhow::String`</no-translation> - 显示菜单/对话框时的转场效果；https://v1.quasar.dev/options/transitions[嵌入式转场效果] 示例之一。<no-translation>`fade`</no-translation><no-translation>`slide-down`</no-translation>。 <no-translation></no-translation> <no-translation>`transitionhide::String`</no-translation> - 隐藏菜单/对话框时的转场；https://v1.quasar.dev/options/transitions[嵌入式转场] 示例之一。<no-translation>`fade`</no-translation><no-translation>`slide-down`</no-translation>。 <no-translation></no-translation> <no-translation>`behavior::String`</no-translation> - 覆盖默认动态模式，在桌面上显示为菜单，在移动设备上显示为对话框 <no-translation>`default`</no-translation> <no-translation>`menu`</no-translation> <no-translation>`dialog`</no-translation> <no-translation>.</no-translation>内容 <no-translation></no-translation> <no-translation>`tablecolspan::Union<no-translation>{Int, String}</no-translation>`</no-translation> - 表格中的列数（如果使用 table-layout: fixed，则需要此值）。<no-translation>`tablecolspan="12"`</no-translation> - 表格中的列数（如果使用表格布局：固定，则需要此值）。 <no-translation></no-translation> <no-translation>`errormessage::String`</no-translation> - 验证错误信息（仅当’error’设置为’true’时才会显示） ex.<no-translation>`用户名必须至少有 5 个字符`</no-translation <no-translation></no-translation> <no-translation>`noerroricon::Bool`</no-translation> - 出错时隐藏错误图标 <no-translation>**</no-translation> <no-translation>`label::Union<no-translation>{String,Symbol}</no-translation>`</no-translation> - 一个文本标签，一旦输入框获得焦点，它将 "`float`"到输入框的上方。Username
- stacklabel::Bool - 无论字段内容（如有）如何，标签将始终显示在字段上方
- hint::String - 辅助（提示）文本，放置在封装的表单组件下方。Fill in between 3 and 12 characters
- hidehint::Bool - 当字段没有焦点时，隐藏辅助（提示）文本
- prefix::String - 前缀`$`
- suffix::String - 后缀`@gmail.com`
- loading::Bool - 通过显示旋转器向用户发出进程正在进行的信号；可使用 "加载 "槽自定义旋转器。
- clearable::Bool - 设置值（非未定义或空值）时，附加可清除图标；点击后，模型变为空值
- clearicon::String - 与 "clearable "属性一起使用时，用于清除按钮的自定义图标。close
- labelslot::Bool - 启用标签槽；如果未设置 "label "属性，则需要设置它以强制使用 "label "槽。
- bottomslots::Bool - 启用底部插槽（"错误"、"提示"、"计数器）
- counter::Bool - 在右下角显示自动计数器
- dropdownicon::String - 图标名称；除非使用 "img: "前缀，否则请确保已安装图标库；如果使用 "none"（字符串）作为值，则不会渲染图标（但仍会使用屏幕空间）。 map ion-add img=https://cdn.quasar.dev/logo/svg/quasar-logo.svg img=path/to/some_image.png
- useinput::Bool - 使用输入标签，用户可以输入
- inputdebounce::Union{Int, String}- 以毫秒为单位延迟输入模型的更新，例如 500 600
常规
- tabindex::Union{Int, String}- Tabindex HTML 属性值例如 0 100
模型
- multiple::Bool - 允许多选；模型必须是数组
- emitvalue::Bool - 用所选选项的值更新模型，而不是整个选项
选项
- options::Vector - 用户可以选择的可用选项。为获得最佳性能，请冻结选项列表。options=[ 'BMW', 'Samsung Phone' ]
- optionvalue::String - 保存 "值 "的选项属性；如果使用函数，为获得最佳性能，请在作用域中引用该函数，不要在内联中定义该函数。 optionvalue=modelNumber optionvalue="(item) => item === null ? null : item.modelNumber"
- optionlabel::Union{String,Symbol}- 保存 "标签 "的选项属性；如果使用函数，为获得最佳性能，请在作用域中引用该属性，而不要内联定义。 optionlabel=itemName optionlabel="(item) => item === null ? null : item.itemName"
- optiondisable::String - 如果使用函数，为获得最佳性能，请在作用域中引用该属性，而不要内联定义。 optiondisable=cannotSelect optiondisable="(item) => item === null ? null : item.cannotSelect"
- optionsdense::Bool - 选项列表的密集模式；占用更少空间
- optionsdark::Bool - 选项菜单将使用深色
- optionsselectedclass::String - 活动/已选选项的 CSS 类名；将其设置为空字符串，以停止应用默认值（默认值为 text-*，其中 * 为 "color "道具值）。text-orange
- optionssanitize::Bool - 强制使用 textContent 而不是 innerHTML 来呈现选项；在选项可能不安全（来自用户输入）时使用；在使用 "选项 "槽时不适用！
- optionscover::Bool - 扩展菜单将覆盖组件（由于显而易见的原因，不能与`useinput` 属性一起使用）
- menushrink::Bool - 允许选项列表比字段更窄（仅在菜单模式下）
- mapoptions::Bool - 尝试从`options` 向量映射模型的标签；这会对性能造成一点影响；如果您使用的是 emit-value，您可能需要使用 map-options 在选择字段中显示标签文本而不是值；请参阅上面的 "影响模型 "部分。
位置
- menuanchor::String - 设置选项列表相对于字段的起始位置或锚点的两个值（仅在菜单模式下）。 top left top middle top right top start top end center left center middle center right center start center end bottom left bottom middle bottom right bottom start bottom end
- menuself::String - 设置选项列表自身相对于其目标位置的两个值（仅在菜单模式下），例如`top left` 等。
- menuoffset::Vector - 由两个数字组成的数组，以像素为单位在水平和垂直方向上偏移选项列表（仅在菜单模式下）。[8, 8]
选择
- multiple::Bool - 允许多重选择；模型必须是数组
- displayvalue::Union{Int, String}- 如果不使用`selected` 插槽/范围插槽，也不使用`usechips` 属性，则覆盖默认选择字符串
- displayvaluesanitize::Bool - 强制使用 textContent 而不是 innerHTML 来呈现所选选项；在所选选项可能不安全（来自用户输入）时使用；不适用于使用`selected` 或`selecteditem` 插槽的情况！
- hideselected::Bool - 隐藏选中选项；使用底层输入标签来保存选中选项的标签（而不是将其显示在输入的右侧）；仅适用于非`multiple` Selects。
- maxvalues::Union{Int, String}- 允许用户选择的最大数量。5
- usechips::Bool - 使用`chip` 组件显示当前所选内容
状态
- disable::Bool - 将组件置于禁用模式
- readonly::Bool - 将组件置于只读模式
样式
- labelcolor::String - 来自调色板的标签颜色名称；覆盖`color` prop；与`color` prop 的不同之处在于，即使字段未被聚焦，标签也将始终使用这种颜色。例如：primary teal-10
- color::String - 来自调色板的组件颜色名称
- bgcolor::String - 来自调色板的组件背景颜色名称
- dark::Bool - 通知组件背景为深色
- filled::Bool - 使用`filled` 设计字段
- outlined::Bool - 为字段使用`outlined` 设计
- borderless::Bool - 为字段使用`borderless` 设计
- standout::Union{Bool, String}- 为字段使用 "突出 "设计；指定聚焦时要应用的类别（覆盖默认类别），例如："……"。 standout standout="bg-primary text-white"
- hidebottomspace::Bool - 例如，当不使用提示/错误/计数器时，不再为其保留空间；因此，也会禁用这些区域的动画；还允许提示/错误区域根据其内容垂直拉伸
- rounded::Bool - 为正方形的组件应用小的标准边框半径
- square::Bool - 移除边框半径，使边框呈正方形；覆盖`rounded` prop/attribute。
- dense::Bool - 密集模式；占用更少空间
- itemaligned::Bool - 将内部内容对齐方式与`item` 组件的对齐方式相匹配
- popupcontentclass::String - 归属于弹出内容的类定义，例如`my-special-class`
- popupcontentstyle::Union{Vector, String, Dict}- 样式定义归属于弹出内容，例如："……"。 background-color: #ff0000 popupcontentstyle!="{ backgroundColor: '#ff0000' }"
- inputclass::Union{Vector, String, Dict}- 归属于底层输入标签的类定义，例如：my-special-class inputclass!="{ 'my-special-class': <condition> }"
- inputstyle::Union{Vector, String, Dict}- 归属于底层输入标记的样式定义，例如：background-color: #ff0000 inputstyle!="{ backgroundColor: '#ff0000' }"
虚拟滚动
- virtualscrollslicesize::Union{Int, String}- 虚拟列表中要呈现的最小条目数，例如 virtualscrollslicesize="60" 30
- virtualscrollsliceratiobefore::Union{Int, String}- 可视区域内项目数与在其之前渲染的项目数之比。 virtualscrollsliceratiobefore="30" 30
- virtualscrollsliceratioafter::Union{Int, String}- 可见区域内的项目数与渲染后的项目数之比 ex.virtualscrollsliceratioafter="0.3"
- virtualscrollitemsize::Union{Int, String}- 以像素为单位的默认条目大小（垂直时为高度，水平时为宽度）；该值用于渲染初始列表；尽量使用接近条目最小尺寸的值。virtualscrollitemsize="48"
- virtualscrollstickysizestart::Union{Int, String}- 列表开始处的粘性部分（如果使用）的大小（像素，垂直时为高度，水平时为宽度）；正确的值可提高滚动精度，例如："……"。 0 virtualscrollstickysizestart="23
- virtualscrollstickysizeend::Union{Int, String}- 列表末尾粘贴部分（如果使用）的大小（像素，垂直时为高度，水平时为宽度）；正确的值可提高滚动精度。0
- tablecolspan::Union{Int, String}- 表格中的列数（使用 table-layout: fixed 时需要） ex.tablecolspan="3"

分隔符

# StippleUI.Separators.separator — Method

  separator(args...; kwargs...)

separator 组件用于分隔文本部分、其他组件等。它可以在父控件的宽度范围内创建一条彩色线条。它可以是水平的，也可以是垂直的。

骷髅

# StippleUI.Skeletons.skeleton — Method

skeleton(args...; kwargs...)

skeleton 是一个组件，用于在加载实际页面数据之前显示内容的占位预览。这是一种很好的方式，可以在页面完全加载之前告知用户对页面的预期，并提高感知性能。它可用于在获取数据时在屏幕上逐步显示信息。

Examples

View

julia> skeleton(type="QAvatar")
])

Arguments

内容
- tag::String - 要渲染的 HTML 标记。默认为`"div"` 。示例`"div"` "span"
- type::String - 骨架占位符类型。默认为`"rect"` 。接受值为`"rect"` "circle" "QBadge" "QChip" "QRadio" 等。
样式
- dark::Bool - 是否使用暗色骨架。
- animation::String - 骨架占位符的动画效果。默认值： "wave" | 示例。 "pulse" "fade" "blink" "none" "pulse-x"
- square::Bool - 移除边框半径，使边框呈正方形
- bordered::Bool - 为组件应用默认边框
- size::String - 尺寸（以 CSS 单位表示，包括单位名称）；覆盖 "高度 "和 "宽度 "道具，并将该值应用于高度和宽度
- width::String - 宽度，以 CSS 单位（包括单位名称）为单位；应用自定义宽度；使用该道具或通过 CSS；如果使用，由 "尺寸 "道具覆盖
- height::String - 高度（以 CSS 单位为单位，包括单位名称）；应用自定义高度；使用此道具或通过 CSS；如果使用，由 "size "道具覆盖。示例`"16px"` "2em"

空间

纺纱

# StippleUI.Spinners.spinner — Function

spinner(spinner_type::Union{String,Symbol} = "", args...; kwargs...)

spinner 用于向用户显示当前正在进行的及时进程。这是一项重要的用户体验功能，它能让用户感觉到系统在继续进行较长期的活动，如从服务器抓取数据或进行一些繁重的计算。

Examples

Model

julia> @vars SpinnerModel begin
          box::R{String} = "box"
          comment::R{String} = "comment"
          hourglass::R{String} = "hourglass"
       end

View

julia> spinner(color="primary", size="3em")
julia> spinner(:box, color="orange",size="5.5em")
julia> spinner(:comment, color="green",size="3em")
julia> spinner(:hourglass, color="purple", size="4em")

Arguments

size::String - 以 CSS 单位表示的尺寸，包括单位名称或标准尺寸名称（xs|sm|md|lg|xl）。 16px 2rem xs md
color::String - 来自调色板的组件颜色名称。 primary teal
thickness::Int - 要用于描边宽度的覆盖值 ex.5

分割器

# StippleUI.Splitters.splitter — Method

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

Examples

Model

julia> @vars SplitterModel begin
            splitterM::R{Int} = 50
       end

View

julia> splitter(:splitterM, style="height: 400px", [
        template("", "v-slot:before", [
          Html.div(class="q-pa-md", [
            Html.div("Before", class="text-h4 q-mb-md"),
            Html.div("{{ n }}. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
               Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus
               obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.",
              class = "q-my-md",
              @recur(:"n in 20"), key! = "n")
          ])
        ]),
        template("", "v-slot:after", [
          Html.div(class="q-pa-md", [
            Html.div("After", class="text-h4 q-mb-md")
              Html.div("{{ n }}. Lorem ipsum dolor sit, amet consectetur adipisicing elit.
               Quis praesentium cumque magnam odio iure quidem, quod illum numquam possimus
               obcaecati commodi minima assumenda consectetur culpa fuga nulla ullam. In, libero.",
              class = "q-my-md",
              @recur(:"n in 20"), key! = "n")
          ])
        ])
       ])

Arguments

内容
- horizontal::Bool - 允许分割器水平而非垂直分割两个面板
- limits::Vector - 由两个值组成的数组，分别代表两个面板的最小和最大分割尺寸；如果设置了 "px "单位，则可以使用 Infinity 作为第二个值，使其在另一侧不受约束
模型
- reverse::Bool - 将模型大小应用于第二个面板（默认情况下应用于第一个面板）
- unit::String - 模型的 CSS 单位
- emitimmediately::Bool - 当用户在分隔线上平移时显示模型
- limits::Vector - 由两个值组成的数组，分别代表两个面板的最小和最大分割尺寸；如果设置了 "px "单位，则可以使用 Infinity 作为第二个值，使其在另一侧不受约束
状态
- disable::Bool - 将组件置于禁用模式
样式
- classbefore::Union{Vector,String,Dict}- 归属于 "前 "面板的类定义。"bg-deep-orange"
- classafter::Union{Vector,String,Dict}- 类定义归属于 "后 "面板，例如`"bg-deep-orange"`
- separatorclass::Union{Vector,String,Dict}- 将归属于分割器分隔线的类定义 ex."bg-deep-orange"
- separatorstyle::Union{Vector,String,Dict}- 分隔线的样式定义（例如："……"）。"border-color: #ff0000;"
- dark::Bool - 在分隔线上应用默认的浅色；在背景色较深时使用；避免在通过 separator-class 或 separator-style 属性覆盖时使用。

Stippleui

桌子

# StippleUI.Tables.Column — Method

Column(name::String, args...)

Examples

julia> Column("x2", align = :right)

Arguments

required::Bool - 如果我们使用`visiblecolumns` ，该列将始终可见
label::String - 标题标签
align::Symbol - 单元格的对齐方式
field::String - 行对象属性，用于确定此列的值。name
sortable::Bool - 告诉`table` 您希望此列可排序

# StippleUI.Tables.DataTable — Method

DataTable(data::T, opts::DataTableOptions)

Examples

julia> df = DataFrame(a = sin.(-π:π/10:π), b = cos.(-π:π/10:π), c = string.(rand(21)))
julia> dt = DataTable(df)

or

julia> using TypedTables
julia> t = Table(a = [1, 2, 3], b = [2.0, 4.0, 6.0])
julia> dt = DataTable(t)

or

julia> using Tables
julia> Tables.table([1 2 3; 3 4 5], header = ["a", "b", "c"])
julia> dt = DataTable(t1)

# StippleUI.Tables.DataTableOptions — Type

DataTableOptions(addid::Bool, idcolumn::String, columns::Union{Vector{Column},Nothing}, columnspecs::Dict{Union{String, Regex}, Dict{Symbol, Any}})

Examples

julia> DataTableOptions(columns = [Column("x1"), Column("x2", align = :right)])

Columnspecs

格式化列的用法

julia> import Stipple.opts
julia> df = DataFrame(a = sin.(-π:π/10:π), b = cos.(-π:π/10:π), c = string.(rand(21)))
julia> dt = DataTable(df)
julia> dt.opts.columnspecs[r"^(a|b)$"] = opts(format = jsfunction(raw"(val, row) => `${100*val.toFixed(3)}%`"))
julia> model.table[] = dt

# StippleUI.Tables.DataTablePagination — Type

DataTablePagination(sort_by::Symbol, descending::Bool, page::Int, row_per_page::Int)

Examples

julia> DataTablePagination(rows_per_page=50)

# Genie.Renderer.Html.table — Method

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

Examples

Model

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

View

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

# StippleUI.Tables.columns — Method

columns(t::T)::Vector{Column} where {T<:DataTable}

julia> columns = [Column("x1"), Column("x2", align = :right)]

# StippleUI.Tables.rowselection — Function

rowselection(dt::DataTable, rows, cols = Colon(), idcolumn = dt.opts.addid ? dt.opts.idcolumn : "__id")

Build a table selection based on row numbers.

Standard behavior of Quasar is to include all columns in the selection.

For large tables it might be sufficient to include only the index, when no other use of the selection value is made. This is achieved by setting cols to nothing

rowselection(dt, 3)
rowselection(dt, 2:5)
rowselection(dt, [2, 4, 7])
rowselection(dt, :, nothing)

# StippleUI.Tables.rowselection — Function

rowselection(dt::DataTable, idcolumn::Union{String, Symbol}, values, cols = Colon())

Build a table selection based on an index and a value / list of values.

rowselection(dt, "a", [1, 3])
rowselection(dt, "a", 2:9)

# StippleUI.Tables.rowselection — Function

rowselection(dt::DataTable, idcolumn::Union{String, Symbol}, f::Function, cols = Colon())

Build a table selection based on a function.

rowselection(dt, "a", iseven)
rowselection(dt, "a", x -> x > 3)

# StippleUI.Tables.rowselection — Function

rowselection(dt::DataTable, idcolumn::Union{String, Symbol}, regex::Regex, cols = Colon())

Build a table selection based on a Regex.

rowselection(t, "b", r"hello|World")

# StippleUI.Tables.selectrows! — Method

selectrows!(model::ReactiveModel, tablefield::Symbol, selectionfield::Symbol = Symbol(tablefield, "_selection"), args...)
selectrows!(dt::R{<:DataTable}, dt_selection::R, args...)

根据选择条件选择模型的表格行。有关选择语法的更多信息，请参阅`rowselection`

@vars TableDemo begin
    @mixin table::TableWithPaginationSelection
end

model = init(TableDemo)
model.table[] = DataTable(DataFrame(a = [1, 2, 4, 6, 8, 10], b = ["Hello", "world", ",", "hello", "sun", "!"]))

selectrows!(model, :table, [1, 2, 6]) # assumes the existence of a field `:table_selection`
selectrows!(model.table, model.table_selection, "b", r"hello|World"i)
selectrows!(model, :table, :table_selection, "a", iseven)

面板

# StippleUI.TabPanels.tabpanel — Method

tabpanel(args...; kwargs...)

标签面板是一种利用较少的窗口空间显示更多信息的方法。

Examples

Model

julia>

View

julia>

Arguments

一般情况
- name::Union{Any}- 小组名称
状态
- disable::Bool - 将组件置于禁用模式
样式
- dark::Bool - 通知组件背景为深色

# StippleUI.TabPanels.tabpanelgroup — Method

tabpanelgroup(args...; kwargs...)

tabpanelgroup 是一种利用较少的窗口空间显示更多信息的方法。

Examples

Model

julia> @vars TabPanelModel begin
            gpanel::R{String} = "panel"
       end

View

julia> Html.div(class="q-pa-md", [
          Html.div(class="q-gutter-y-md", style="max-width: 350px", [
             tabpanelgroup(:gpanel, animated=true, swipeable=true, infinite=true,
                   class="bg-purple text-white shadow-2 rounded-borders", [
                   tabpanel("Lorem ipsum dolor sit amet consectetur
                    adipisicing elit.", name="mails", [
                   Html.div("Mails", class="text-h6")
             ]),

             tabpanel("Lorem ipsum dolor sit amet consectetur
                  adipisicing elit.", name="alarms", [
                        Html.div("Alarms", class="text-h6")
             ]),

             tabpanel("Lorem ipsum dolor sit amet consectetur
                  adipisicing elit.", name="movies", [
                        Html.div("Movies", class="text-h6")
                  ]),
             ])
          ])
       ])

Arguments

行为
- 相当于** keepalive::Bool <keep-alive>在内容上</keep-alive>使用 Vue 的本地<keep-alive>component</keep-alive>
  - keepaliveinclude::Union{String,Vector} - Equivalent to using Vue’s native include prop for ; Values must be valid Vue component names (e.g. "a,b" "/a|b/" ['a', 'b'])
  - keepaliveexclude::Union{String,Vector}- 等同于在<keep-alive></keep-alive> 上使用 Vue 本机的 exclude prop<keep-alive>；值必须是有效的 Vue 组件名称（例如："a,b" "/a|b/" ['a', 'b'] )</keep-alive>
  - keepalivemax::Int - 相当于为<keep-alive></keep-alive> 使用 Vue 本机 max prop<keep-alive>（例如`2`)</keep-alive>
  - animated::Bool - 启用面板之间的过渡（另见 "transition-prev "和 "transition-next "道具）
  - infinite::Bool - 使组件显示为无限（当到达最后一个面板时，下一个面板将变成第一个面板）
  - swipeable::Bool - 启用轻扫事件（可能会干扰内容的触摸/鼠标事件）
  - vertical::Bool - 默认过渡和轻扫操作将在垂直轴上进行
  - transitionprev::String - Quasar 的一种嵌入式转换（仅在设置了 "动画 "道具时才有效）（例如`"fade"` "slide-down" )
  - transitionnext::String - Quasar 的一种嵌入式过渡效果（仅在设置了 "动画 "道具时才有效）（例如`"fade"` "slide-down" )

内容
- icon::String - 遵循 Quasar 惯例的图标名称；除非使用’img:'前缀，否则请确保已安装图标库；如果使用’none'（字符串）作为值，则不会渲染图标（但屏幕空间仍将用于渲染图标）。示例 "map" "ion-add" "img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg" "img:path/to/some_image.png"
- label::Union{Int,String}- 用于标记标签页的数字或字符串。例如`"Home"`
- alert::Union{Bool,String}- 在标签页上添加提示符号，通知用户有一些更新；如果其值不是布尔值，则可以指定一种颜色。示例`"alert"`
- nocaps::Bool - 关闭选项卡中所有字母的大写（默认值）
常规
- name::Union{Int,String}- 面板名称。示例 "home" name! ="1"
- tabindex::Union{Int,String}- Tabindex HTML 属性值。示例 0 100
状态
- disable::Bool - 将组件置于禁用模式
样式
- ripple::Union{Bool,Dict}- 配置材质波纹（通过将其设置为 "false "或提供一个配置对象将其禁用）。示例 false """{"early" => true, "center" => true, "color" => "teal", "keyCodes" => []}"""
- contentclass::String - 归属于内容包装器的类定义。"my-special-class"

# StippleUI.Tabs.tabgroup — Function

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

The menu component is a convenient way to show menus. Goes very well with list as dropdown content, but it’s by no means limited to it. Examples

Model

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

View

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

Arguments

行为
- target::Union{Bool, String}- 选项卡容器宽度的分界点（以像素为单位），在此分界点上，选项卡自动转为对齐对齐方式。默认值。 600 | 示例。breakpoint! ="500"
内容
- vertical::Bool - 使用垂直设计（标签页一个挨着一个，而不是水平方向一个挨着一个）
- outsidearrows::Bool - 为箭头预留空间，使其位于标签页的两侧（箭头在不活动时会变淡）
- mobilearrows::Bool - 在移动设备上强制显示箭头（如需要
- align::String - 水平对齐标签页容器中的标签页。默认值： center | 接受值：left,center,right justify | 示例。right
- breakpoint::Union{Int, String}- 标签页容器宽度的分界点（以像素为单位），标签页在分界点处自动转为对齐方式。默认值： 600 | 示例。breakpoint! = "500"
- lefticon::String - 当标签页超出标签页容器宽度时，用于替代向左滚动标签页的默认箭头的图标名称。示例`arrow_left`
- righticon::String - 图标名称，当标签页超出标签页容器的宽度时，用于替换向右滚动标签页的默认箭头。示例`arrow_right`
- stretch::Bool - 当在 flexbox 父代上使用时，标签页将伸展到父代的高度
- shrink::Bool - 默认情况下，tabs 设置为根据可用空间增长；不过，您可以使用此道具扭转这种情况。toolbar
- switchindicator::Bool - 切换指示器位置（垂直模式下位于标签页左侧，默认水平模式下位于标签页上方）
- narrowindicator::Bool - 允许指示器与选项卡内容（文本或图标）的宽度相同，而不是与选项卡的整个宽度相同
- inlinelabel::Bool - 如果使用图标，允许文本与图标内联
- nocaps::Bool - 关闭选项卡内所有字母的大写（默认值）
样式
- activeclass::String - 在活动选项卡上设置的类别
- activecolor::String - 活动选项卡文本的颜色。例如 teal-10 primary
- activecolorbg::String - 活动选项卡背景的颜色。示例。 teal-10 primary
- indicatorcolor::String - 活动选项卡指示符（下划线）的颜色。示例。 teal-10 primary
- contentclass::String - 内容包装器的类定义
- dense::Bool - 密集模式；占用较少空间

时间轴

# StippleUI.Timelines.timeline — Method

  timeline(args...; kwargs...)

timeline 组件按时间顺序显示事件列表。它通常是一个图形设计，显示一个标有日期的长条，旁边通常还有事件。根据主题和数据的不同，时间线可以使用任何时间刻度。

Examples

View

julia> Html.div(class="q-px-lg q-pb-md", [
            timeline(color="secondary", [
            timelineentry("Timeline Heading", heading=true),
            timelineentry(title="Event Title", subtitle="February 22, 1986", [
            Html.div("Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                  deserunt mollit anim id est laborum.")
            ]),
            timelineentry(title="Event Title", subtitle="February 21, 1986", icon="delete",[
            Html.div("Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                  deserunt mollit anim id est laborum.")
            ]),
            timelineentry(title="Event Title",
            subtitle="February 22, 1986",
            avatar="https://cdn.quasar.dev/img/avatar2.jpg", [
            Html.div("Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                  deserunt mollit anim id est laborum.")
            ])
            ])
       ])

Arguments

行为
- side::String - 将时间线条目放在密集和舒适布局的一侧；对于松散布局，它将被`timelineentry` 侧道具覆盖。(默认值："right" ） | ex. "left" |"right"
- layout::String - 时间轴的布局。密集布局将内容和标签保留在一侧。舒适型将内容放在一边，标签放在另一边。松散型将内容放在两侧。(默认值："dense" ） | 例如 "comfortable" "loose" | |"dense"
样式
- color::String - 来自 Quasar 调色板的组件颜色名称。 "primary" |"teal-10"
- dark::Bool - 通知组件背景为深色

# StippleUI.Timelines.timelineentry — Method

  timelineentry(args...; kwargs...)

Examples

View

julia> timelineentry(title="Event Title", subtitle="February 21, 1986", icon="delete",[
            Html.div("Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                  nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                  deserunt mollit anim id est laborum.")
       ])

Arguments

行为
- side::String - 放置时间轴条目的侧边；仅在`timeline` 布局松散时有效。(默认值："right" ） | ex. "left" |"right"
内容
- tag::String - 要使用的标签，如果仅为 "标题 "类型。(默认值："h3" ） | ex. "h1" |"h2" |"h3" |"h4" |"h5" |"h6"
- heading::Bool - 定义标题时间轴项目
- icon::String - 图标名称遵循 Quasar 惯例；除非使用 "img: "前缀，否则请确保已安装图标库；如果使用 "none"（字符串）作为值，则不会渲染图标（但屏幕空间仍将用于渲染图标）。(例如`"map"` |"ion-add")
- avatar::String - 头像图片的 URL；如果使用，图标优先，因此它将取代头像。
- title::String - 时间轴条目的标题；如果使用 "标题 "插槽，则被覆盖
- subtitle::String - 时间轴条目的副标题；如果使用 "副标题 "插槽，则被覆盖
- body::String - 时间轴条目的正文内容；使用该道具或默认插槽
样式
- color::String - 来自 Quasar 调色板的组件颜色名称

切换

# StippleUI.Toggles.toggle — Function

toggle(label::Union{String,Symbol}, fieldname::Union{Symbol,Nothing}, args...; kwargs...)

toggle 组件是用户输入的另一个基本元素。您可以用它来打开或关闭设置、功能或真/假输入。

Examples

Model

julia> @vars ToggleModel begin
          value::R{Bool} = false
          selection::R{Vector{String}} = ["yellow", "red"]
       end

View

julia> toggle("Blue", color="blue", :selection, val="blue")
julia> toggle("Yellow", color="yellow", :selection, val="yellow")
julia> toggle("Green", color="green", :selection, val="green")
julia> toggle("Red", color="red", :selection, val="red")

Arguments

行为
- name::String - 用于指定控件名称；在处理直接提交到 URL 的表单时非常有用。"car_id"
- indeterminatevalue::Union{Int, Float64, String, Bool}- 什么模型值应被视为 "不确定"？默认值：null ex. 0 "not_answered"
- toggleorder::String - 确定两个状态的切换顺序（'t’代表 true 状态，'f’代表 false 状态）；如果’toggle-indeterminate’为 true，则顺序为：indet \-> first state \-> second state \-> indet（并重复），否则为：indet \-> first state \-> second state \-> first state \-> second state \-> … 默认值："tf" ex. "tf" "ft"
- toggleindeterminate::Bool - 当用户点击/敲击组件时，我们是否也要切换不定状态？
- keepcolor::Bool - 当组件未被点击/关闭时，是否应保留颜色（如果指定了任何颜色）？
内容
- icon::String - 图标名称应遵循 Quasar 惯例；除非使用 "img: "前缀，否则应确保已安装图标库；如果使用 "none"（字符串）作为值，则不会渲染图标（但仍将使用屏幕空间）。 map ion-add img:https://cdn.quasar.dev/logo/svg/quasar-logo.svg img:path/to/some_image.png *
一般
- tabindex::Union{Int, String}- Tabindex HTML 属性值`0` 100
图标
- checkedicon::String - 打开切换开关时使用的图标。visibility
- uncheckedicon::String - 切换关闭时使用的图标 ex.visibility-off
- indeterminateicon::String - 模式不确定时使用的图标，例如：Tabindex。help
标签
- label::Union{String,Symbol}- 沿组件显示的标签。I agree to terms and conditions
- leftlabel::Bool - 标签（如有指定）应显示在组件左侧
模型
- val::Union{Bool, Int, Float64, String, Vector}- 当模型（'值'）为 Array 时起作用。它告诉组件在打钩/未打钩时应添加/删除哪个值。car
- truevalue::Union{Bool, Int, Float64, String, Vector}- 默认`true` 。Agreed
- falsevalue::Union{Bool, Int, Float64, String, Vector}- 默认`false` ex.Not agreed
状态
- disabled::Bool - 将组件置于禁用模式
样式
- size::String - 以 CSS 单位表示的尺寸，包括单位名称或标准尺寸名称（xs|sm|md|lg|xl）。 16px 1.5rem xs md
- color::String - 来自调色板的组件颜色名称。 primary teal-10
- dark::Bool - 通知组件背景为深色
- dense::Bool - 密集模式；占用空间较少
- iconcolor - 覆盖默认图标颜色（仅适用于真实状态）；组件颜色名称可从调色板中获取。 primary teal-10

工具栏

toolbar(args...; kwargs...)

toolbar 是一个组件，通常是布局页眉和页脚的一部分，但也可用于页面的任何地方。

Examples

View

julia> toolbar(class="text-primary", [
          btn(flat=true, round=true, dense=true, icon="menu"),
          toolbartitle("Toolbar"),
          btn(flat=true, round=true, dense=true, icon="more_vert")
       ])

Arguments

inset::Bool - 对内容应用嵌入（对后续工具栏有用）

# StippleUI.Toolbars.toolbartitle — Method

toolbartitle(args...; kwargs...)

Examples

View

julia> toolbartitle("Menu")

Arguments

shrink::Bool - 默认情况下，toolbartitle 会根据可用空间增长。不过，您可以使用以下道具扭转这一设置

工具提示

# StippleUI.Tooltips.tooltip — Method

tooltip(args...; kwargs...)

# StippleUI.Tooltips.tooltip — Method

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

tooltip 组件用于向用户提供有关应用程序中某个区域的更多信息。当鼠标悬停在目标元素上时（或在移动平台上快速点击时），就会出现工具提示。

Examples

View

julia> btn("Hover me", color="primary", [
          tooltip("Some text as content of Tooltip")
       ])
julia> Html.div(class="inline bg-amber rounded-borders cursor-pointer", style="max-width: 300px", [
          Html.div(class="fit flex flex-center text-center non-selectable q-pa-md", "I am groot!<br>(Hover me!)", [
            tooltip("I am groot!")
       ])
julia>
])

Arguments

行为
- transitionshow::String - 支持内置过渡 ex. fade slide-down
- transitionhide::String - 支持内置过渡 ex. fade slide-down
- scrolltarget::String - 将 CSS 选择器或 DOM 元素用作自定义滚动容器，而不是自动检测到的滚动容器。 scrolltarget=".scroll-target-class" scrolltarget="#scroll-target-id" scrolltarget="body"
- target::Union{String, Bool}- 配置目标元素以触发工具提示切换；"true "表示启用父 DOM 元素，"false "表示禁止将事件附加到任何 DOM 元素；通过使用字符串（CSS 选择器），可将事件附加到指定的 DOM 元素（如果存在）。 target=".my-parent" target!=false
- noparentevent::Bool - 跳过将事件附加到目标 DOM 元素（触发元素显示）的过程
- delay::Int - 配置工具提示显示延迟。默认值。0 。delay!="500"
- hidedelay::Int - 配置工具提示在延迟后消失。默认值。0 ex.hidedelay!="600"
内容
- maxheight::String - 工具提示的最大高度；大小以 CSS 单位表示，包括单位名称。 16px 2rem
- maxwidth::String - 工具提示的最大宽度；大小以 CSS 单位表示，包括单位名称。 16px 2rem
位置
- anchor::String - 两个值，用于设置工具提示相对于目标的起始位置或锚点，例如 top left top middle top right top start top end center left center middle center right center start center end bottom left bottom middle bottom right bottom start bottom end
- self::String - 两个值，用于设置工具提示自身相对于目标的位置。 top left top middle top right top start top end center left center middle center right center start center end bottom left bottom middle bottom right bottom start bottom end
- offset::Vector - 一个由两个数字组成的数组，用于以像素为单位水平和垂直偏移工具提示。默认值。例如：[14,14] 。[5, 10]
样式
- contentclass::Union{Vector, String, Dict}- 归属于内容的类定义，例如：my-special-class contentclass!="{ 'my-special-class': <condition> }"
- contentstyle::Union{Vector, String, Dict}- 归属于内容的样式定义，例如：background-color: #ff0000 contentstyle!="{ color: '#ff0000' }"

树木

上传者

# StippleUI.Uploaders.uploader — Method

  uploader(args...; kwargs...)

Stipple 提供了一种通过`uploader` 组件上传文件的方法。

Examples

View

julia> uploader(label="Upload Image", autoupload=true, multiple=true, method="POST", url="/upload", field__name="img")

Arguments

行为
- multiple::Bool - 允许上传多个文件
- accept::String - 以逗号分隔的唯一文件类型说明列表。映射到本地输入 type=file 元素的 "accept "属性。 .jpg, .pdf, image/* image/jpeg, .pdf
- capture::String - 可选择指定捕获新文件，以及使用哪种设备捕获 "accept "属性定义的新媒体类型。映射到本地输入 type=file 元素的’capture’属性。 user environment
- maxfilesize::Union{Int, String}- 单个文件的最大大小（字节） ex. 1024 1048576
- maxtotalsize::Union{Int, String}- 所有文件的最大总和（以字节为单位） ex. 1024 1048576
- maxfiles::Union{Int, String}- 包含文件的最大数量 maxfiles!="5" 10
- filter::Function - 添加文件的自定义过滤器；只有通过此过滤器的文件才会被添加到队列中并上传；为获得最佳性能，请在作用域中引用此过滤器，而不要在行内定义。filter!="files => files.filter(file => file.size === 1024)"
- autoupload::Bool - 添加文件后立即上传
- hideuploadbtn::Bool - 不显示上传按钮
内容
- label::Union{String,Symbol}- 上传者的标签`Upload photo here`
- nothumbnails::Bool - 不显示图像文件的缩略图
状态
- disable::Bool - 将组件置于禁用模式
- readonly::Bool - 将组件置于只读模式
样式
- color:String - 来自调色板的组件颜色，例如：primary teal-10
- textcolor::String - 覆盖文本颜色（如需要）；颜色名称来自调色板，如`primary` teal-10
- dark::Bool - 深色模式
- square::Bool - 移除边框半径，使边框呈正方形
- flat::Bool - 应用平面设计（无默认阴影）
- bordered::Bool - 为组件应用默认边框
上传
- factory::String - 函数应返回对象或与对象解析的 Promise；为获得最佳性能，请在作用域中引用该函数，不要在函数表单中定义该函数。(files) \=> Object, Promise
- url::String - 处理上传的服务器的 URL 或路径。接收字符串或工厂函数，后者返回字符串。函数在上传前被调用；如果使用函数，为获得最佳性能，请在作用域中引用该函数，不要内联定义。+"files =>+https://example.com?count=:({files.length})" https://example.com/path
- method::String - 上传使用的 HTTP 方法；使用字符串或返回字符串的工厂函数；上传前调用函数；如果使用函数，为获得最佳性能，请在作用域中引用该函数，不要在默认情况下内联定义该函数。POST 。 POST PUT
- fieldname::String - 每个上传文件的字段名；该字段名将写入以下页眉：'Content-Disposition: form-data; name="HERE"; filename="somefile.png"；如果使用函数，为获得最佳性能，请在作用域中引用该函数，且不要定义其内联默认值。(file) => file.name 示例. backgroundFile fieldname!="(file) => 'background' + file.name"
- headers::Union{Vector{Dict(String, String)}, String}- 数组或返回数组的工厂函数；数组由带有标题定义的对象组成；在上传之前调用函数；如果使用函数，为了获得最佳性能，请在作用域中引用该函数，不要在内联中定义该函数。 [{name: 'Content-Type', value: 'application/json'}, {name: 'Accept', value: 'application/json'}]
- formfields::Union{Vector{Dict(String, String)}, String}- 数组或返回数组的工厂函数；数组由包含附加字段定义的对象组成（由要上传的表单使用）；上传前调用函数；如果使用函数，为获得最佳性能，请在作用域中引用该函数，不要内联定义该函数。 [{name: 'my-field', value: 'my-value'}]
- with-credentials::Union{Bool, String}- 在管理上传的 XHR 上将 withCredentials 设置为 true；取布尔值或布尔值的工厂函数；上传前调用该函数；如果使用函数，为获得最佳性能，请在作用域中引用该函数，不要在内部定义该函数。 with-credentials with!="files => ...."
- sendraw::Union{Bool, String}- 发送原始文件时不包装成 Form()；使用布尔值或布尔值的工厂函数；上传前调用函数；如果使用函数，为获得最佳性能，请在作用域中引用该函数，且不要内联定义该函数。 sendraw sendraw!="files => ...."
- batch::Union{Bool, String}- 批量上传文件（在一个 XHR 请求中）；使用布尔值或布尔值的工厂函数；在上传前调用函数；如果使用函数，为获得最佳性能，应在作用域中引用该函数，且不要内联定义该函数。"files => files.length > 10"

视频

# StippleUI.Videos.video — Function

video(args...; kwargs...)

使用`video` 组件可以轻松嵌入 Youtube 等视频。默认情况下，它还会调整大小以适应容器。

Examples

Model

julia> @vars RadioModel begin
         v_ratio::R{String} = "16/9"
       end

View

julia> video(src="https://www.youtube.com/embed/dQw4w9WgXcQ")
julia> video(ratio=:v_ratio, src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0")

Arguments

辅助功能
- title::String - 辅助功能）设置正在使用的内部 iframe 的本地’title’属性值
行为
- fetchpriority::String - 为获取 iframe 文档时使用的相对优先级提供提示。默认值： "auto" | 接受值："auto","high" 、"low"
- loading::String - 指示浏览器应如何加载 iframe。默认值 "eager" | 接受值："eager","lazy"
- referrerpolicy::String - 表示在获取框架资源时要发送哪个参考源。默认值 "strict-origin-when-cross-origin" | 接受值`"no-referrer"`,"no-referrer-when-downgrade","origin","origin-when-cross-origin","origin-when-cross-origin","strict-origin","strict-origin-when-cross-origin" 、"unsafe-url"
模型
- src::String - 要在 iframe 中显示的源 url。
样式
- ratio::Union{String,Int,Float64}- 内容的纵横比；如果值是字符串，则应避免使用计算语句（如 "16/9"），而应直接指定结果的字符串值（如 "1.7777）