Examples: href, badge, dropdown, list

controllers/themedemo.go

@@ -134,6 +134,7 @@ func Themeform(c *core.Context) *core.Response {
 				ID:          "email",
 				Label:       "Email",
 				Type:        "email",
+				IsRequired:  true,
 				Placeholder: "Enter your email address",
 			},
 			FormButton: components.FormButton{
@@ -182,8 +183,10 @@ func ThemeElements(c *core.Context) *core.Response {
 	if TemplateEnable {
 		type templateData struct {
 			Buttons   []components.FormButton
-			Hrefs     []components.FormHref
+			Hrefs     []components.ContentHref
-			Dropdowns []components.FormDropdown
+			Badges    []components.ContentBadge
+			Dropdowns []components.ContentDropdown
+			Lists     []components.ContentList
 			Menus     []components.PageNav
 		}
 		buttons := []components.FormButton{
@@ -261,7 +264,7 @@ func ThemeElements(c *core.Context) *core.Response {
 				TypeClass: "outline-dark",
 			},
 		}
-		hrefs := []components.FormHref{
+		hrefs := []components.ContentHref{
 			{
 				Text:     "href",
 				Link:     "#",
@@ -299,11 +302,65 @@ func ThemeElements(c *core.Context) *core.Response {
 				IsDisabled: true,
 			},
 		}
-		dropdowns := []components.FormDropdown{
+		badges := []components.ContentBadge{
+			{
+				Text:      "primary",
+				TypeClass: "primary",
+			},
+			{
+				Text:      "secondary",
+				TypeClass: "secondary",
+			},
+			{
+				Text:      "success",
+				TypeClass: "success",
+			},
+			{
+				Text:      "danger",
+				TypeClass: "danger",
+			},
+			{
+				Text:      "warning",
+				TypeClass: "warning",
+			},
+			{
+				Text:      "info",
+				TypeClass: "info",
+			},
+			{
+				Text:      "light",
+				TypeClass: "light",
+			},
+			{
+				Text:      "dark",
+				TypeClass: "dark",
+			},
+			{
+				Text:      "outline",
+				TypeClass: "primary",
+				IsOutline: true,
+			},
+			{
+				Text:      "outline",
+				TypeClass: "success",
+				IsOutline: true,
+			},
+			{
+				Text:      "outline",
+				TypeClass: "danger",
+				IsOutline: true,
+			},
+			{
+				Text:      "outline",
+				TypeClass: "warning",
+				IsOutline: true,
+			},
+		}
+		dropdowns := []components.ContentDropdown{
 			// dropdown
 			{
 				Label: "dropdown",
-				Items: []components.FormDropdownItem{
+				Items: []components.ContentDropdownItem{
 					{
 						Text: "item ",
 						Link: "#",
@@ -319,7 +376,7 @@ func ThemeElements(c *core.Context) *core.Response {
 			{
 				Label:     "primary",
 				TypeClass: "primary",
-				Items: []components.FormDropdownItem{
+				Items: []components.ContentDropdownItem{
 					{
 						Text: "item ",
 						Link: "#",
@@ -340,7 +397,7 @@ func ThemeElements(c *core.Context) *core.Response {
 			{
 				Label:     "outline",
 				TypeClass: "outline-primary",
-				Items: []components.FormDropdownItem{
+				Items: []components.ContentDropdownItem{
 					{
 						Text: "item ",
 						Link: "#",
@@ -355,7 +412,59 @@ func ThemeElements(c *core.Context) *core.Response {
 				// items
 			},
 		}
-
+		list := []components.ContentList{
+			// basic list
+			{
+				Items: []components.ContentListItem{
+					{
+						Text: "item 1",
+					},
+					{
+						Text:       "item 2",
+						EndElement: "end text",
+					},
+					{
+						Text:       "item disabled",
+						IsDisabled: true,
+					},
+				},
+			},
+			// description list
+			{
+				Items: []components.ContentListItem{
+					{
+						Text:        "item 1",
+						Description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. ",
+					},
+					{
+						Text:        "item 2",
+						Description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+					},
+					{
+						Text:        "item disabled",
+						Description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+						IsDisabled:  true,
+					},
+				},
+			},
+			// list with class
+			{
+				Items: []components.ContentListItem{
+					{
+						Text:      "class primary",
+						TypeClass: "primary",
+					},
+					{
+						Text:      "class success",
+						TypeClass: "success",
+					},
+					{
+						Text:      "class danger",
+						TypeClass: "danger",
+					},
+				},
+			},
+		}
 		menus := []components.PageNav{
 			// nav
 			{
@@ -505,7 +614,9 @@ func ThemeElements(c *core.Context) *core.Response {
 		tmplData := templateData{
 			Buttons:   buttons,
 			Hrefs:     hrefs,
+			Badges:    badges,
 			Dropdowns: dropdowns,
+			Lists:     list,
 			Menus:     menus,
 		}
 		return c.Response.Template("custom_theme_elements.html", tmplData)
@@ -545,6 +656,12 @@ func Themecontent(c *core.Context) *core.Response {
 		th.ID = "ba"
 		th.Value = "Column heading 3"
 		allTh = append(allTh, th)
+		th.Value = "Column badge"
+		th.ValueType = "badge" // column type badge
+		allTh = append(allTh, th)
+		th.Value = "Column action"
+		th.ValueType = "href" // column type href
+		allTh = append(allTh, th)
 
 		// for td items
 		var allTd [][]components.ContentTableTD
@@ -552,10 +669,20 @@ func Themecontent(c *core.Context) *core.Response {
 		// rows
 		for i := 1; i <= 10; i++ {
 			vals := make([]components.ContentTableTD, len(allTh))
-			for b := 0; b < len(allTh); b++ {
+			for b := 0; b < len(allTh)-2; b++ {
 				vals[b].Value = fmt.Sprintf("%s%d%d", "TD data: ", i, b)
 				vals[b].ID = fmt.Sprintf("%s%d%d", "idtd_", i, b)
 			}
+			// column badge
+			vals[len(allTh)-2].Value = components.ContentBadge{
+				Text:      "success",
+				TypeClass: "success",
+			}
+			// last column href
+			vals[len(allTh)-1].Value = components.ContentHref{
+				Text: "edit",
+				Link: "#",
+			}
 			allTd = append(allTd, vals)
 		}
 

storage/templates/custom_theme_elements.html

@@ -16,7 +16,16 @@
         <legend>Demos href</legend>
         <div class="container d-flex justify-content-between   border rounded-3 p-2">
             {{range .Hrefs}}
-                {{template "form_href" .}} 
+                {{template "content_href" .}} 
+            {{end}}
+        </div>
+    </fieldset>
+
+    <fieldset class="mb-3">
+        <legend>Demos Badges</legend>
+        <div class="container d-flex justify-content-between   border rounded-3 p-2">
+            {{range .Badges}}
+                {{template "content_badge" .}} 
             {{end}}
         </div>
     </fieldset>
@@ -26,7 +35,17 @@
         <legend>Demos dropdown</legend>
         <div class="container d-flex justify-content-between   border rounded-3 p-2">
             {{range .Dropdowns}}
-                {{template "form_dropdown" .}} 
+                {{template "content_dropdown" .}} 
+            {{end}}
+        </div>
+    </fieldset>
+
+
+    <fieldset class="mb-3">
+        <legend>Demos List</legend>
+        <div class="container d-flex justify-content-between   border rounded-3 p-2">
+            {{range .Lists}}
+                {{template "content_list" .}} 
             {{end}}
         </div>
     </fieldset>