Default

paw.Navbar{
	Brand: paw.Link{
		Name: "Brand",
	},
	Links: []paw.Link{
		{
			Name: "Link0",
		},
		{
			Name: "Link1",
		},
	},
}

Light Theme

Icon list: https://icons.getbootstrap.com/

paw.Icon("alarm")

Apple

paw.Link{
	Name: "Apple",
	Icon: "apple",
}.Button()

paw.Links{
	{
		Icon: "apple",
	},
	{
		Icon: "android2",
	},
	{
		Icon: "windows",
	},
}

• Tab0
• Tab1
• Tab2

 paw.NavTabs{
	 Links: []paw.Link{
		 {
			  Name:   "Tab0",
			  Url:    "/Tab0",
			  Active: true,
		 },
		 {
			  Name: "Tab1",
			  Url:  "/Tab1",
		 },
		 {
			  Name:     "Tab2",
			  Url:      "/Tab2",
			  Disabled: true,
		 },
	 },
 },

paw.Popover{
	Content: "这就是 Popover 的功能！",
	Inner:   paw.String("鼠标移动到这段文字上，可以看到顶部弹出了一个提示信息。"),
},
paw.Popover{
	Title:   "也可以给 Popover 加一个 Title",
	Content: "这是一个链接的 Popover",
	Inner: paw.Link{
		Name: "链接",
	}.Button().Success(),
},

有 3 个快捷方式：paw.H1，paw.H2，paw.H3 直接从字符串渲染，如果需要复杂的渲染，可以直接调用 paw.Heading

关于 Heading 详细信息参考：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements

<h1> 标题

<h2> 标题

<h3> 标题

<h4> 标题

paw.H1("<h1> 标题")
paw.H2("<h2> 标题")
paw.H3("<h3> 标题")
paw.Heading{
	I:    4,
	Body: paw.String("<h4> 标题"),
}

paw.Img{Src: "/assets/meme_ai.jpg"}

⬇️ small image render with raw size

259 x 286

paw.Img{Src: "/assets/meme_ai.jpg", Circle: true}

⬇️ circle image

⬇️ large image render with width 100%

6660 x 4445

paw.Alert{
	Color: paw.ColorPrimary,
	Body:  paw.String("Hi!"),
}