定制组件

输入或卡片等用户界面元素在页面中重复出现是很常见的。为了提高用户界面代码的可重用性和可维护性，您可以将复杂的用户界面元素封装为函数，这些函数可以与 Stipple 中的现有调用一起使用。

比方说，您的应用程序会显示一张带有标题、头像和输入框的卡片：

using GenieFramework
@genietools

@app begin
    @in name = "World"
end

ui() = card(style="width:200px",
        [
        card_section([h4(title), p("Hello {{name}}")]),
        card_section(
                    avatar([
                            img(src="https://learn.genieframework.com/assets/logo.svg")
                            ])),
        card_section(textfield("Enter your name", :name))
        ])

@page("/", ui)

要使卡片成为可重复使用的组件，可创建一个`mycard` 函数作为

using GenieFramework
@genietools

function mycard(title, namevar)
    card(style="width:200px",
         [
          card_section([h4(title), p("Hello {{$namevar}}")]),
          card_section(
                       avatar([
                               img(src="https://learn.genieframework.com/assets/logo.svg")
                              ])),
          card_section(textfield("Enter your name", namevar))
         ])
end

mycard 函数的参数包括卡片标题和保存名称的反应变量的符号。这样，您就可以像这样在不同变量上多次调用`mycard` ：

@app begin
    @in name1 = "World"
    @in name2 = "John"
end

ui() = row([mycard("Card 1", :name1), mycard("Card 2", :name2)])
@page("/", ui)

现在`app.jl` 中的用户界面代码更简洁了，您可以通过编辑源组件一次性修改所有卡片。

有关构建复杂组件的更多灵感，请参阅 StippleUI 中 datefield、https://github.com/GenieFramework/StippleUI.jl/blob/master/src/FormInputs.jl[timefield]和 card_1组件的代码。