go-admin UI组件学习一

go-admin UI组件学习一

需要利用go-admin框架编写自定义页面，必须先了解掌握UI组件。初步学习框架UI组件的基本代码框架、基本处理逻辑。

模板 template

主题模板是一套UI的抽象表示，包括一系列组件和静态资源的集合，会在插件中被调用。
主题定义在go-admin/template/template.go中，主要有各组件的获取方法。

type Template interface {
	Name() string

	// Components

	// layout
	Col() types.ColAttribute
	Row() types.RowAttribute

	// form and table
	Form() types.FormAttribute
	Table() types.TableAttribute
	DataTable() types.DataTableAttribute

	Tree() types.TreeAttribute
	Tabs() types.TabsAttribute
	Alert() types.AlertAttribute
	Link() types.LinkAttribute

	Paginator() types.PaginatorAttribute
	Popup() types.PopupAttribute
	Box() types.BoxAttribute

	Label() types.LabelAttribute
	Image() types.ImgAttribute

	Button() types.ButtonAttribute

	// Builder methods
	GetTmplList() map[string]string
	GetAssetList() []string
	GetAssetImportHTML(exceptComponents ...string) template.HTML
	GetAsset(string) ([]byte, error)
	GetTemplate(bool) (*template.Template, string)
	GetVersion() string
	GetRequirements() []string
}

实现是在 themes/adminlte.go，通过Theme结构实现(sword主题同理)，还有一部分共用的在common.go实现。

type Theme struct {
	ThemeName string
	components.Base
	common.BaseTheme
}

var Adminlte = Theme{
	ThemeName: "adminlte",
	Base: components.Base{
		Attribute: types.Attribute{
			TemplateList: TemplateList,
		},
	},
}

UI组件

组件定义在go-admin/template/types/components.go。
以col组件为例

type ColAttribute interface {
	SetSize(value S) ColAttribute
	SetContent(value template.HTML) ColAttribute
	AddContent(value template.HTML) ColAttribute
	GetContent() template.HTML
}

实现在go-admin/template/components/col.go，没在themes实现，所以，这些组件是各主题通用的。

type ColAttribute struct {
	Name    string
	Content template.HTML
	Size    string
	types.Attribute
}

func (compo *ColAttribute) SetContent(value template.HTML) types.ColAttribute {
	compo.Content = value
	return compo
}

func (compo *ColAttribute) AddContent(value template.HTML) types.ColAttribute {
	compo.Content += value
	return compo
}

func (compo *ColAttribute) SetSize(value types.S) types.ColAttribute {
	compo.Size = ""
	for key, size := range value {
		compo.Size += "col-" + key + "-" + size + " "
	}
	return compo
}

func (compo *ColAttribute) GetContent() template.HTML {
	return ComposeHtml(compo.TemplateList, *compo, "col")
}

GetContent方法用于根据模板生成html，此方法是关键部分。

GoAdmin 是一个基于 golang 面向生产的数据可视化管理平台搭建框架，可以让你用简短的代码在极短时间内搭建起一个管理后台。