接下來要來做的是『不同種的 Container』。

有了前面的 Container 基礎，這其實是很容易的事情，我們只要在原本 Container 外面多包一層 Component 就好了。

例如裡面只有一個 Container 的 Box：

type boxComp struct {
	Type string `json:"type"`
	ID   string `json:"id"`

	// 我們在裡面多塞一個 Container
	Box *tgframe.Container `json:"box"`
}

func newBoxComponent(id string) *boxComp {
	return &boxComp{
		Type: "box",
		ID:   id,

		// 幫忙指定一個 id
		Box:  tgframe.NewContainer(id + "-box"),
	}
}

func Box(c *tgframe.Container, id string) *tgframe.Container {
	box := newBoxComponent(id)
	c.Comps = append(c.Comps, box)
	return box.Box
}

function createBox(comp) {
    const boxDiv = document.createElement('div')
    boxDiv.className = 'box'

    const insideDiv = createContainer(comp.box)
    boxDiv.appendChild(insideDiv)
    return boxDiv
}

或者 Columns：

由於 Golang 的語法並沒有辦法像 Python 那樣靈活，我們可以這樣做：

• 一個可以指定 n 欄位數的函數：回傳 []Container
• 一些寫死的比較小的 n 的函數：回傳 tuple Container

func Column(c *tgframe.Container, id string, n uint) []*tgframe.Container {
	if n == 0 {
		panic("number of columns should > 0")
	}

	colsComp := newColumnComponent(id)
	c.Comps = append(c.Comps, colsComp)
	
	cols := make([]*tgframe.Container, n)
	for i := range n {
		cols[i] = tgframe.NewContainer(fmt.Sprintf("%s_%d", colsComp.ID, i))
	}
	colsComp.cols = cols

	return cols
}

// Column2 create 2 columns.
func Column2(c *tgframe.Container, id string) (*tgframe.Container, *tgframe.Container) {
	cols := Column(c, id, 2)
	return cols[0], cols[1]
}

// Column3 create 3 columns.
func Column3(c *tgframe.Container, id string) (*tgframe.Container, *tgframe.Container, *tgframe.Container) {
	cols := Column(c, id, 3)
	return cols[0], cols[1], cols[2]
}

在這裡，panic or error 是值得討論的事情。理論上來說 ，Column 的 n 通常不是一個 GUI 使用者可以選擇的，是 GUI 開發者要自己調整的東西， n = 0 這件事情基本上暗示程式本身是錯的，所以我選擇 panic。