UIKit for rapid development
kyoto
page- configured SSA
- basic knowledge of
kyoto
- (twui only) configured tailwindcss
The easiest way to install for now, because it handles templates as well
go install github.com/gabstv/kyoto-uikit/cmd/twui@v0.1.0
# will create the tailwindcss required files on ./static
go run github.com/gabstv/kyoto-uikit/cmd/twui@v0.1.0 ./static
import (
"html/template"
"github.com/gabstv/kyoto-uikit/twui"
)
func mktemplate(page string) *template.Template {
t := template.New(page)
t = t.Funcs(kyoto.TFuncMap())
t, _ = t.ParseGlob("*.html")
t, _ = twui.IncludeTemplates(t) // this will include all twui templates
return t
}
<kit>
- component library you want to use
- Install Go package into your project with
go get github.com/gabstv/kyoto-uikit/<kit>
Simple example using tailwind ui stats component
package main
import (
"github.com/yuriizinets/kyoto"
"github.com/yuriizinets/kyoto-uikit/twui"
)
type PageExample struct {
Stats kyoto.Component
}
func (p *PageExample) Template() *template.Template {
return template.Must(template.New("page.example.html").Funcs(kyoto.TFuncMap()).ParseGlob("templates/*.html"))
}
func (p *PageExample) Init() {
p.Stats = kyoto.RegC(p, &twui.AppUIDataStats{
Items: []twui.AppUIDataStatsItem{
{
Image: `
<div class="p-2 bg-indigo-500 text-white rounded-lg">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
</div>
`,
Title: "Total Subscribers",
Value: 71897,
Change: 122,
},
{
Title: "Avg. Open Rate",
Value: 58.16,
ValueSymbol: "%",
Change: 5.4,
ChangeSymbol: "%",
},
{
Title: "Avg. Click Rate",
Value: 24.57,
ValueSymbol: "%",
Change: -3.2,
ChangeSymbol: "%",
},
},
})
}
Sorry, but not ready yet 🤷♂️
We are working on this
- Provides high-level blocks instead of primitives like buttons and labels
- Configurable enough for using in different situations
- Adaptive out of the box
- Don't like component UI? It's very easy to customize it!
kyoto-uikit
project: https://github.com/yuriizinets/kyoto-uikitkyoto
project: https://github.com/yuriizinets/kyoto- Documentation: not ready yet 🤷♂️
- Demo project: not ready yet 🤷♂️
Development setup is not ready yet, but feel free to use test files for testing components. Just check how existing components are used in tests.
Or directly with Bitcoin: bc1qgxe4u799f8pdyzk65sqpq28xj0yc6g05ckhvkk