Descargar dovetail - Descargar código fuente dovetail

dovetail

Componentes de terceros

1.0.0

Descargar

Encajar

Actualmente en alfa, API cambiará

Documentación

Componentes HTML amigables para el usuario y desarrollador para GO, inspirados en Swiftui/React/ELM.

Producir un marcado HTML accesible fácilmente.
Hacer componentes con funciones.
Admite ARIA y atributos de datos.
Comodidades para formularios y listas.

 Render (
  w ,
  Div (
    Header (
      Nav (
        AriaLabel ( "Primary" ),
        List (
          Link ( "/" , Text ( "Home" )),
          Link ( "/about" , Text ( "About" )),
          Link ( "/pricing" , Text ( "Pricing" ), AriaCurrentPage ),
          Link ( "/sign-in" , Text ( "Sign In" )),
          Link ( "/join" , Text ( "Join" )),
        ),
      ),
    ),
    Main (
      Article (
        H ( 1 , Text ( "Welcome" )),
        P ( "Render HTML using components with Go" ),
      ),
      FormTo ( "/newsletter" ). With (
        FieldLabelled ( "Email" , Textbox ( "email" )),
        SubmitButton ( Text ( "Sign up for the newsletter" )),
      ),
    ),
  )
)

Componentes proporcionados

Tipo: HTMLElementView

Punto de referencia

Main(children ...HTMLView) - <main>
Nav(children ...HTMLView) - <nav>
Header(children ...HTMLView) - <header>
Footer(children ...HTMLView) - <footer>
Section(children ...HTMLView) - <section>
Article(children ...HTMLView) - <article>
Aside(children ...HTMLView) - <aside>

Estructura

Div(children ...HTMLView) - <div>
List(children ...HTMLView) - <ul><li>{ children[0] }</li>…<li>{ children[n] }</li></ul>
Ul(children ...HTMLView) - <ul>
Li(children ...HTMLView) - <li>
Próximamente: <ol> , <dl>

Elementos

Link(url string, children ...HTMLView) - <a href="{ url }">{ children }</a>
Button(children ...HTMLView) - <button type="button">{ children }</button>
Img(srcUrl string, alt string, enhancers ...HTMLEnhancer) - <img src="{ srcUrl }" alt="{ alt }" {...enhancers}>
P(children ...HTMLView) - <p>
TextWith(text string, enhancers ...HTMLEnhancer) - <span {...enhancers}>{ text }</span>
Noscript(children ...HTMLView) - <noscript>{ children }</noscript>

Formularios

FormTo(action string, options ...func(form FormHTMLView) FormHTMLView) - <form>
- Multipart(form FormHTMLView) FormHTMLView <form enctype="multipart/form-data">
Textbox(inputName string, options ...FieldTextInputOption) - <input type="text">
SubmitButton(children ...HTMLView) - <button type="submit">{ children }</button>

Nodos de texto

Text(text string) - nodo de texto HTML

Lógica

When(when bool, view HTMLView) - renderiza la view proporcionada solo si es when es true

Costumbre

HTMLElementViewOf(tagName string, tagAtom atom.Atom, children []HTMLView) - Elemento HTML personalizado

Atributos

AriaAttr - aria-*
AriaLabel - aria-label
CustomAttr - Atributos HTML personalizados
DataAttr - data-* Atributos

Definir componentes

Los componentes se definen utilizando funciones. Estas funciones pueden tomar cualquier cantidad de argumentos y devolver un compuesto de otros componentes.

 func PrimaryButton ( text string ) View {
	return Button ( Text ( text )). Class ( "btn btn-primary" )
}

Actuación

Si bien no intenta ser el productor HTML más rápido posible, Dovetail tiene como objetivo ser más rápido que html/template para analizar y ejecutar.

Ejecute make test_bench para ver cómo se desempeña Dovetail para producir una variedad de componentes HTML. Aquí hay resultados en un MacBook Pro de 15 ″ 2016:

 go test -p 1 -timeout 30s -bench="Bench" -benchmem -v -run "Bench" ./...
goos: darwin
goarch: amd64
pkg: github.com/RoyalIcing/dovetail
BenchmarkTailwindJustDiv-8                  	 4758601	       247 ns/op	     272 B/op	       2 allocs/op
BenchmarkTailwind0Classes-8                 	 4620313	       249 ns/op	     272 B/op	       2 allocs/op
BenchmarkTailwind2Classes-8                 	 2074034	       580 ns/op	     400 B/op	       6 allocs/op
BenchmarkTailwind4Classes-8                 	 1713938	       694 ns/op	     464 B/op	       7 allocs/op
BenchmarkTailwind8Classes-8                 	 1349778	       887 ns/op	     640 B/op	       8 allocs/op
BenchmarkTailwindAddClasses2Classes-8       	 1990402	       601 ns/op	     416 B/op	       6 allocs/op
BenchmarkTailwindAddClasses4Classes-8       	 1771840	       677 ns/op	     480 B/op	       6 allocs/op
BenchmarkTailwindAddClasses8Classes-8       	 1504893	       783 ns/op	     656 B/op	       6 allocs/op
BenchmarkTailwindDivWithClasses8Classes-8   	 1757682	       729 ns/op	     528 B/op	       5 allocs/op
BenchmarkTailwindChangeClasses2Classes-8    	 1797513	       643 ns/op	     464 B/op	       8 allocs/op
BenchmarkTailwindChangeClasses4Classes-8    	 1533936	       790 ns/op	     560 B/op	       9 allocs/op
BenchmarkTailwindChangeClasses8Classes-8    	 1234028	       970 ns/op	     800 B/op	      10 allocs/op
BenchmarkText-8                             	 7639869	       154 ns/op	     128 B/op	       2 allocs/op
BenchmarkHeader-8                           	 4320638	       251 ns/op	     272 B/op	       2 allocs/op
BenchmarkDiv-8                              	 4858587	       242 ns/op	     272 B/op	       2 allocs/op
BenchmarkDivWithClasses1-8                  	 2697412	       445 ns/op	     336 B/op	       4 allocs/op
BenchmarkDivWithClasses2Together-8          	 2296304	       519 ns/op	     368 B/op	       5 allocs/op
BenchmarkDivWithClasses2-8                  	 2066386	       576 ns/op	     384 B/op	       6 allocs/op
BenchmarkDivWithChildClassNames-8           	 1734169	       672 ns/op	     448 B/op	       9 allocs/op
BenchmarkButton-8                           	 2446404	       478 ns/op	     352 B/op	       5 allocs/op
BenchmarkButtonSubmit-8                     	 2451301	       480 ns/op	     352 B/op	       5 allocs/op
BenchmarkH1-8                               	 2267946	       521 ns/op	     448 B/op	       6 allocs/op
PASS
ok  	github.com/RoyalIcing/dovetail	39.216s