Пользовательские компоненты

Элементы пользовательского интерфейса, такие как поля ввода или карточки, часто повторяются на странице. Чтобы код пользовательского интерфейса было удобнее использовать повторно и обслуживать, можно инкапсулировать сложные элементы пользовательского интерфейса в функции, которые можно применять вместе с существующими вызовами в 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 стал чище, и вы можете изменять все карточки одновременно, редактируя исходные компоненты.

Чтобы получить более полное представление о создании сложных компонентов, см. код компонентов datefield, timefield и card_1 в StippleUI.