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

GoAdmin 是一個基於 golang 面向生產的數據可視化管理平臺搭建框架，可以讓你用簡短的代碼在極短時間內搭建起一個管理後臺。