编辑此页

Components Development

---

Component development, taking the image component as an example.

New types and methods of upper interface

• Create a new ImgAttribute type

type ImgAttribute interface {
    SetWidth(value string) ImgAttribute
    SetHeight(value string) ImgAttribute
    SetSrc(value string) ImgAttribute
    GetContent() template.HTML
}

• In the Template interface, add a method:

type Template interface {
    ...
    Image() types.ImgAttribute
    ...
}

Specific implementation, with adminlte as an example

• ImgAttribute

Create a new image.go file under ./template/adminlte/components, as follows:

package components

import (
    "github.com/GoAdminGroup/go-admin/template/types"
    "html/template"
)

type ImgAttribute struct {
    Name   string
    Witdh  string
    Height string
    Src    string
}

func (compo *ImgAttribute) SetWidth(value string) types.ImgAttribute {
    compo.Witdh = value
    return compo
}

func (compo *ImgAttribute) SetHeight(value string) types.ImgAttribute {
    compo.Height = value
    return compo
}

func (compo *ImgAttribute) SetSrc(value string) types.ImgAttribute {
    compo.Src = value
    return compo
}

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

• Image()

In .template/adminlte/adminlte.go, add a function:

func (*Theme) Image() types.ImgAttribute {
    return &components.ImgAttribute{
        Name:   "image",
        Witdh:  "50",
        Height: "50",
        Src:    "",
    }
}

Still not completed here, you need to add static resource files.

• Add the static resource file

Add image.tmpl file to .template/adminlte/resource/pages/components

Annoying, and the last step

• Execute in the root directory:

adm assets