74 lines
2.1 KiB
Go
74 lines
2.1 KiB
Go
|
package control
|
||
|
|
|
||
|
|
import (
|
||
|
|
"github.com/maddalax/htmgo/framework/h"
|
||
|
|
. "htmgo-site/pages/docs"
|
||
|
|
"htmgo-site/ui"
|
||
|
|
)
|
||
|
|
|
||
|
|
func IfElse(ctx *h.RequestContext) *h.Page {
|
||
|
|
return DocPage(
|
||
|
|
ctx,
|
||
|
|
h.Div(
|
||
|
|
h.Class("flex flex-col gap-3"),
|
||
|
|
Title("If / Else Statements"),
|
||
|
|
Text(`
|
||
|
|
If / else statements are useful when you want to conditionally render attributes or elements / components.
|
||
|
|
htmgo provides a couple of utilities to do so:
|
||
|
|
`),
|
||
|
|
Text("Example: Rendering an icon if the task is complete"),
|
||
|
|
ui.GoCodeSnippet(IfElseExample),
|
||
|
|
Text("Example: Using ternary operator to call different partials based on a condition"),
|
||
|
|
ui.GoCodeSnippet(TenaryExample),
|
||
|
|
Text(`Example: Rendering multiple classes based on a condition`),
|
||
|
|
ui.GoCodeSnippet(ConditionalClassExample),
|
||
|
|
Text("Example: Rendering a single class based on a condition"),
|
||
|
|
ui.GoCodeSnippet(ClassIfElseExample),
|
||
|
|
Text("Example: Rendering different elements based on a condition"),
|
||
|
|
ui.GoCodeSnippetSingleLine(IfElseExample2),
|
||
|
|
Text(`
|
||
|
|
<b>Note:</b> This will execute both <b>EditTaskForm</b> and <b>ViewTask</b>, no matter if the condition is true or false, since a function is being called here.
|
||
|
|
If you do not want to call the function at all unless the condition is true, use <b>h.IfElseLazy</b>
|
||
|
|
`),
|
||
|
|
ui.GoCodeSnippetSingleLine(IfElseExample3),
|
||
|
|
NextStep(
|
||
|
|
"mt-4",
|
||
|
|
PrevBlock("Raw HTML", DocPath("/core-concepts/raw-html")),
|
||
|
|
NextBlock("Rendering Lists", DocPath("/control/loops")),
|
||
|
|
),
|
||
|
|
),
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const IfElseExample = `
|
||
|
|
h.Div(
|
||
|
|
h.If(
|
||
|
|
task.CompletedAt != nil,
|
||
|
|
CompleteIcon()
|
||
|
|
)
|
||
|
|
)
|
||
|
|
`
|
||
|
|
|
||
|
|
const TenaryExample = `h.Div(
|
||
|
|
h.PostPartialWithQs(
|
||
|
|
h.Ternary(!editing, StartEditing, SaveEditing),
|
||
|
|
h.NewQs("id", record.Id),
|
||
|
|
),
|
||
|
|
)
|
||
|
|
`
|
||
|
|
|
||
|
|
const ConditionalClassExample = `h.ClassX("w-10 h-10 border rounded-full", map[string]bool {
|
||
|
|
"border-green-500": task.CompletedAt != nil,
|
||
|
|
"border-slate-400": task.CompletedAt == nil,
|
||
|
|
})`
|
||
|
|
|
||
|
|
const IfElseExample2 = `h.IfElse(editing, EditTaskForm(), ViewTask())`
|
||
|
|
|
||
|
|
const IfElseExample3 = `h.IfElseLazy(editing, EditTaskForm, ViewTask)`
|
||
|
|
|
||
|
|
const ClassIfElseExample = `
|
||
|
|
h.Div(
|
||
|
|
h.ClassIf(task.CompletedAt != nil, "border-green-500"),
|
||
|
|
)
|
||
|
|
`
|