use bootstrap CSS classes for form elements

This commit is contained in:
Helmut Merz 2024-07-24 19:47:55 +02:00
parent 658420af94
commit add89bcf2a
6 changed files with 12 additions and 11 deletions

View file

@ -1 +0,0 @@
<button type="{{ .type }}" name="{{ .name }}">{{.label}}</button>

View file

@ -1,6 +1,5 @@
{{- $type := .Get "type" | default "button" -}}
{{- $type := .Get "type" | default "submit" -}}
{{- $name := .Get "name" | default "submit" -}}
{{- $label := .Get "label" | default (title $name) -}}
{{- $params := dict "type" $type "name" $name "label" $label -}}
{{ partial "hx/button" $params }}
<button type="{{ $type }}"
class="btn btn-primary">{{ $label }}</button>

View file

@ -1,6 +1,8 @@
{{- $type := .Get "type" | default "text" -}}
{{- $name := .Get "name" | default "textline" -}}
{{- $label := .Get "label" | default $name -}}
<div>
<input type="{{ $type }}" name="{{ $name }}"
<label class="form-label">{{- $label -}}</label>
<input type="{{ $type }}" name="{{ $name }}" class="form-control"
{{- with .Get "attrs" }} {{ . }}{{ end }}>
</div>

View file

@ -7,5 +7,4 @@
<form name="{{ $name }}" hx-target="{{ $target }}"
hx-post="{{ $root }}/{{ $domain }}/{{ $action }}">
{{ .Inner }}
<button>{{ $label }}</button>
</form>

View file

@ -1,9 +1,10 @@
<button hx-get="/app/demo/"
<button class="btn btn-info"
hx-get="/app/demo/"
hx-select="[itemprop=articleBody] p">
Hello World!
</button>
<form hx-post="/hx/test/data" hx-target="#cs-debug">
<input name="info">
<button>Post to API</button>
<button class="btn btn-primary">Post to API</button>
</form>

View file

@ -22,8 +22,9 @@ Please enter login data:
{{< hx/data-form name="login" action="login" >}}
Login: {{< hx/data-field-line name="login" attrs="autofocus" >}}
Password: {{< hx/data-field-line type="password" name="password" >}}
{{< hx/data-field-line name="login" label="Login" attrs="autofocus" >}}
{{< hx/data-field-line type="password" name="password" label="Password" >}}
{{< hx/button label="Login" >}}
{{< /hx/data-form >}}