golang现代化UI组件库templui为Go和Templ提供高效开发方案

templUI - 现代化Go语言UI组件库

templUI是一个基于templ和Tailwind CSS构建的现代化UI组件库，专为Go语言应用程序设计。

hero

主要特点

  • 通过CLI安装简单方便
  • 完全可自定义的设计
  • 代码完全自主可控
  • 专为构建现代Go应用程序而设计

示例代码

下面是一个使用templUI创建简单页面的完整示例：

package main

import (
	"net/http"
	
	"github.com/a-h/templ"
	"github.com/templui/templui"
)

func main() {
	// 创建一个基础页面布局
	page := templui.NewPage().
		Title("My Go App").
		Description("A modern Go application built with templUI")
	
	// 添加导航栏
	navbar := templui.NewNavbar().
		Brand("My App").
		AddLink("Home", "/").
		AddLink("About", "/about")
	
	// 添加主要内容
	content := templui.NewContainer().
		AddChild(templui.NewHeading(1, "Welcome to My App")).
		AddChild(templui.NewParagraph("This is a modern Go application built with templUI."))
	
	// 将组件添加到页面
	page.AddNavbar(navbar).AddContent(content)
	
	// 创建HTTP处理器
	handler := templ.NewHTMLRenderer().Handler(page)
	
	// 启动服务器
	http.Handle("/", handler)
	http.ListenAndServe(":8080", nil)
}

组件示例

以下是几个常用组件的创建示例：

// 创建按钮
button := templui.NewButton().
	Text("Click Me").
	Style(templui.Primary).
	OnClick("alert('Button clicked!')")

// 创建卡片
card := templui.NewCard().
	Title("Product Card").
	Description("This is a product description").
	AddButton(templui.NewButton().Text("Add to Cart"))

// 创建表单
form := templui.NewForm("/submit").
	AddInput(templui.NewInput().Name("username").Label("Username")).
	AddInput(templui.NewInput().Name("password").Label("Password").Type("password")).
	AddSubmitButton(templui.NewButton().Text("Login"))

文档

请查看官方文档获取完整的使用指南和API参考。

贡献

欢迎通过提交Pull Request或Issue来参与项目贡献。

许可证

本项目采用MIT许可证。


更多关于golang现代化UI组件库templui为Go和Templ提供高效开发方案的实战教程也可以访问 https://www.itying.com/category-94-b0.html

1 回复

更多关于golang现代化UI组件库templui为Go和Templ提供高效开发方案的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


TemplUI: Go 和 Templ 的现代化 UI 组件库

TemplUI 是一个专为 Go 和 Templ 设计的现代化 UI 组件库，它提供了一套高效、可组合的 UI 组件，帮助开发者快速构建现代化的 Web 应用界面。

TemplUI 的核心优势

  1. 专为 Go 和 Templ 设计：完美集成 Go 后端和 Templ 模板引擎
  2. 高性能：编译时生成 UI，运行时无额外开销
  3. 类型安全：利用 Go 的类型系统减少运行时错误
  4. 现代化设计：提供符合当前设计趋势的 UI 组件
  5. 可定制化：支持主题和样式自定义

主要组件示例

1. 按钮组件

package main

import (
	"github.com/templui/templui"
)

func main() {
	// 创建一个主按钮
	primaryBtn := templui.Button().
		Text("Primary Action").
		Variant(templui.Primary).
		Size(templui.Medium).
		OnClick(func() {
			println("Primary button clicked!")
		})

	// 创建一个危险按钮
	dangerBtn := templui.Button().
		Text("Delete").
		Variant(templui.Danger).
		Size(templui.Small).
		Disabled(true)
}

2. 表单组件

func loginForm() templui.Component {
	return templui.Form().
		Method("POST").
		Action("/login").
		Children(
			templui.TextInput().
				Label("Username").
				Name("username").
				Placeholder("Enter your username").
				Required(true),
			
			templui.PasswordInput().
				Label("Password").
				Name("password").
				Placeholder("Enter your password").
				Required(true),
			
			templui.Checkbox().
				Label("Remember me").
				Name("remember"),
			
			templui.Button().
				Type("submit").
				Text("Login").
				Variant(templui.Primary),
		)
}

3. 卡片组件

func userProfileCard(user User) templui.Component {
	return templui.Card().
		Title(user.Name).
		Subtitle(user.Title).
		Image(user.AvatarURL).
		Children(
			templui.Text(user.Bio),
			templui.Divider(),
			templui.ButtonGroup().
				Children(
					templui.Button().
						Text("Follow").
						Variant(templui.Primary),
					templui.Button().
						Text("Message"),
				),
		)
}

与 Templ 集成示例

package main

import (
	"context"
	"os"
	
	"github.com/a-h/templ"
	"github.com/templui/templui"
)

func main() {
	// 创建一个页面布局
	page := templui.Page().
		Title("My App").
		Theme(templui.LightTheme).
		Children(
			templui.Navbar().
				Brand("My App").
				Links([]templui.NavLink{
					{Text: "Home", Href: "/"},
					{Text: "About", Href: "/about"},
				}),
			
			templui.Container().
				Children(
					templui.H1("Welcome to My App"),
					loginForm(),
				),
		)

	// 渲染为 Templ 组件
	component := page.Render()

	// 输出 HTML
	component.Render(context.Background(), os.Stdout)
}

响应式布局

func responsiveLayout() templui.Component {
	return templui.Grid().
		Columns(12).
		Gap(4).
		Children(
			templui.Col().
				Span(12, templui.Sm(6), templui.Lg(4)).
				Children(
					templui.Card().Title("Featured Content"),
				),
			
			templui.Col().
				Span(12, templui.Sm(6), templui.Lg(4)).
				Children(
					templui.Card().Title("Latest News"),
				),
			
			templui.Col().
				Span(12, templui.Lg(4)).
				Children(
					templui.Card().Title("Sidebar"),
				),
		)
}

主题定制

func customTheme() templui.Theme {
	return templui.DefaultTheme().
		WithPrimaryColor("#4F46E5").
		WithSecondaryColor("#10B981").
		WithTextColor("#111827").
		WithBackgroundColor("#F9FAFB").
		WithBorderRadius("0.5rem").
		WithBoxShadow("0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)")
}

总结

TemplUI 为 Go 和 Templ 开发者提供了：

  1. 丰富的现代化 UI 组件
  2. 类型安全的构建方式
  3. 响应式设计支持
  4. 灵活的主题定制
  5. 与 Go 生态系统的无缝集成

通过使用 TemplUI，开发者可以专注于业务逻辑而非 UI 实现，显著提高开发效率，同时保证应用的一致性和可维护性。

回到顶部