Unduh dovetail - Unduh Kode Sumber dovetail

dovetail

Komponen pihak ketiga

1.0.0

Unduh

Pas

Saat ini di Alpha, API akan berubah

Dokumentasi

Komponen HTML yang ramah pengguna dan pengembang untuk GO, terinspirasi oleh SwiftUi/React/Elm.

Menghasilkan markup HTML yang dapat diakses dengan mudah.
Membuat komponen dengan fungsi.
Mendukung aria dan atribut data.
Kenyamanan untuk formulir dan daftar.

 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" )),
      ),
    ),
  )
)

Menyediakan komponen

Jenis: HTMLElementView

Landmark

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>

Struktur

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>
Segera Hadir: <ol> , <dl>

Elemen

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>

Bentuk

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>

Node teks

Text(text string) - Node Teks HTML

Logika

When(when bool, view HTMLView) - membuat view yang disediakan hanya jika when true

Kebiasaan

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

Atribut

AriaAttr - aria-*
AriaLabel - aria-label
CustomAttr - Atribut HTML Kustom
DataAttr - data-* Atribut

Tentukan komponen

Komponen didefinisikan menggunakan fungsi. Fungsi -fungsi ini dapat mengambil sejumlah argumen, dan mengembalikan gabungan komponen lain.

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

Pertunjukan

Meskipun tidak berusaha menjadi produsen HTML tercepat yang mungkin, Dovetail bertujuan untuk lebih cepat daripada html/template untuk menguraikan dan mengeksekusi.

Jalankan make test_bench untuk melihat bagaimana Dovetail berkinerja untuk menghasilkan berbagai komponen HTML. Berikut adalah hasil pada MacBook Pro 2016 15:

 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