go-admin UI組件學習二

以adminlte主題爲例,詳細分析模板接口的實現代碼。

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

var Adminlte = Theme{
	ThemeName: "adminlte",
	Base: components.Base{
		Attribute: types.Attribute{
			//TemplateList爲adminlte包變量,保存各UI組件的模板
			TemplateList: TemplateList,
		},
	},
}

func init() {
	adminTemplate.Add("adminlte", &Adminlte)
}

Theme結構實現template接口,在導入和使用adminlite包時,自動調用init函數,賦值主題名稱和模板列表。

	Name() string
	GetTmplList() map[string]string
	GetAssetList() []string
	GetAsset(string) ([]byte, error)
	GetTemplate(bool) (*template.Template, string)
package adminlte

var TemplateList = map[string]string{"admin_panel": `{{define "admin_panel"}}
    <div class="navbar-custom-menu">
        <ul class="nav navbar-nav">

            {{.NavButtonsHTML}}

            <li title="{{lang "Fixed the sidebar"}}">
                <a href="javascript:void(0);" class="fixed-btn" data-click="false">
                    <i class="fa fa-thumb-tack"></i>
                </a>
            </li>
            ... ...

ThemeName 保存主題名稱
components.Base 基本UI組件結構,實現template接口內的組件相關方法,給各組件默認屬性值,在go-admin/template/components/base.go。

type Base struct {
	Attribute types.Attribute
}

func (b Base) Box() types.BoxAttribute {
	return &BoxAttribute{
		Name:       "box",
		Header:     template.HTML(""),
		Body:       template.HTML(""),
		Footer:     template.HTML(""),
		Title:      "",
		HeadBorder: "",
		Attribute:  b.Attribute,
	}
}

func (b Base) Col() types.ColAttribute {
	return &ColAttribute{
		Name:      "col",
		Size:      "col-md-2",
		Content:   "",
		Attribute: b.Attribute,
	}
}

func (b Base) Form() types.FormAttribute {
	return &FormAttribute{
		Name:         "form",
		Content:      []types.FormField{},
		Url:          "/",
		Method:       "post",
		HiddenFields: make(map[string]string),
		Layout:       form.LayoutDefault,
		Title:        "edit",
		Attribute:    b.Attribute,
		CdnUrl:       config.GetAssetUrl(),
		HeadWidth:    2,
		InputWidth:   8,
	}
}

func (b Base) Image() types.ImgAttribute {
	return &ImgAttribute{
		Name:      "image",
		Width:     "50",
		Height:    "50",
		Src:       "",
		Attribute: b.Attribute,
	}
}

func (b Base) Tabs() types.TabsAttribute {
	return &TabsAttribute{
		Name:      "tabs",
		Attribute: b.Attribute,
	}
}

func (b Base) Alert() types.AlertAttribute {
	return &AlertAttribute{
		Name:      "alert",
		Attribute: b.Attribute,
	}
}

func (b Base) Label() types.LabelAttribute {
	return &LabelAttribute{
		Name:      "label",
		Type:      "",
		Content:   "",
		Attribute: b.Attribute,
	}
}

func (b Base) Link() types.LinkAttribute {
	return &LinkAttribute{
		Name:      "link",
		Content:   "",
		Attribute: b.Attribute,
	}
}

func (b Base) Popup() types.PopupAttribute {
	return &PopupAttribute{
		Name:      "popup",
		Attribute: b.Attribute,
	}
}

func (b Base) Paginator() types.PaginatorAttribute {
	return &PaginatorAttribute{
		Name:      "paginator",
		Attribute: b.Attribute,
	}
}

func (b Base) Row() types.RowAttribute {
	return &RowAttribute{
		Name:      "row",
		Content:   "",
		Attribute: b.Attribute,
	}
}

func (b Base) Button() types.ButtonAttribute {
	return &ButtonAttribute{
		Name:      "button",
		Content:   "",
		Href:      "",
		Attribute: b.Attribute,
	}
}

func (b Base) Table() types.TableAttribute {
	return &TableAttribute{
		Name:      "table",
		Thead:     make(types.Thead, 0),
		InfoList:  make([]map[string]types.InfoItem, 0),
		Type:      "normal",
		Style:     "hover",
		Layout:    "auto",
		Attribute: b.Attribute,
	}
}

func (b Base) DataTable() types.DataTableAttribute {
	return &DataTableAttribute{
		TableAttribute: *(b.Table().
			SetType("data-table").(*TableAttribute)),
		EditUrl:   "",
		NewUrl:    "",
		Style:     "hover",
		Attribute: b.Attribute,
	}
}

func (b Base) Tree() types.TreeAttribute {
	return &TreeAttribute{
		Name:      "tree",
		Tree:      []menu.Item{},
		Attribute: b.Attribute,
	}
}

common.BaseTheme 實現獲取版本、要求admin版本等方法。

	GetAssetImportHTML(exceptComponents ...string) template.HTML
	GetVersion() string
	GetRequirements() []string
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章