Example elements: button, Hrefs, Dropdowns, Menus

controllers/themedemo.go

@@ -134,7 +134,7 @@ func Themeform(c *core.Context) *core.Response {
 			FormButton: components.FormButton{
 				Text:      "Login",
 				IsSubmit:  true,
-				IsPrimary: true,
+				TypeClass: "primary",
 			},
 			FormSelectCity: components.FormSelect{
 				ID:             "city",
@@ -166,6 +166,352 @@ func Themeform(c *core.Context) *core.Response {
 
 }
 
+func ThemeElements(c *core.Context) *core.Response {
+	// check if template engine is enabled
+	TemplateEnableStr := os.Getenv("TEMPLATE_ENABLE")
+	if TemplateEnableStr == "" {
+		TemplateEnableStr = "false"
+	}
+	TemplateEnable, _ := strconv.ParseBool(TemplateEnableStr)
+
+	if TemplateEnable {
+		type templateData struct {
+			Buttons   []components.FormButton
+			Hrefs     []components.FormHref
+			Dropdowns []components.FormDropdown
+			Menus     []components.PageNav
+		}
+		buttons := []components.FormButton{
+			{
+				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:      "link",
+				TypeClass: "link",
+			},
+			{
+				Text:       "disabled",
+				TypeClass:  "primary",
+				IsDisabled: true,
+			},
+			{
+				Text:      "outline-primary",
+				TypeClass: "outline-primary",
+			},
+			{
+				Text:      "outline-secondary",
+				TypeClass: "outline-secondary",
+			},
+			{
+				Text:      "outline-success",
+				TypeClass: "outline-success",
+			},
+			{
+				Text:      "outline-danger",
+				TypeClass: "outline-danger",
+			},
+			{
+				Text:      "outline-warning",
+				TypeClass: "outline-warning",
+			},
+			{
+				Text:      "outline-info",
+				TypeClass: "outline-info",
+			},
+			{
+				Text:      "outline-light",
+				TypeClass: "outline-light",
+			},
+			{
+				Text:      "outline-dark",
+				TypeClass: "outline-dark",
+			},
+		}
+		hrefs := []components.FormHref{
+			{
+				Text:     "href",
+				Link:     "#",
+				IsButton: false,
+			},
+			{
+				Text:      "link",
+				Link:      "#",
+				IsButton:  false,
+				TypeClass: "link",
+			},
+			{
+				Text:      "button",
+				Link:      "#",
+				IsButton:  true,
+				TypeClass: "primary",
+			},
+			{
+				Text:       "href disabled",
+				Link:       "#",
+				IsButton:   false,
+				IsDisabled: true,
+			},
+			{
+				Text:       "link disabled",
+				Link:       "#",
+				TypeClass:  "link",
+				IsDisabled: true,
+			},
+			{
+				Text:       "button disabled",
+				Link:       "#",
+				IsButton:   true,
+				TypeClass:  "primary",
+				IsDisabled: true,
+			},
+		}
+		dropdowns := []components.FormDropdown{
+			// dropdown
+			{
+				Label: "dropdown",
+				Items: []components.FormDropdownItem{
+					{
+						Text: "item ",
+						Link: "#",
+					},
+					{
+						Text:       "item disabled",
+						Link:       "#",
+						IsDisabled: true,
+					},
+				},
+			},
+			// dropdown
+			{
+				Label:     "primary",
+				TypeClass: "primary",
+				Items: []components.FormDropdownItem{
+					{
+						Text: "item ",
+						Link: "#",
+					},
+					{
+						Text:     "item ",
+						Link:     "#",
+						IsActive: true,
+					},
+					{
+						Text:       "item disabled",
+						Link:       "#",
+						IsDisabled: true,
+					},
+				},
+			},
+			// dropdown
+			{
+				Label:     "outline",
+				TypeClass: "outline-primary",
+				Items: []components.FormDropdownItem{
+					{
+						Text: "item ",
+						Link: "#",
+					},
+				},
+			},
+			// dropdown
+			{
+				Label:      "disabled",
+				TypeClass:  "primary",
+				IsDisabled: true,
+				// items
+			},
+		}
+
+		menus := []components.PageNav{
+			// nav
+			{
+				NavClass: "nav-pills",
+				NavItems: []components.PageNavItem{
+					{
+						Text:     "item active",
+						Link:     "#",
+						IsActive: true,
+					},
+					{
+						Text:     "item",
+						Link:     "#",
+						IsActive: false,
+					},
+					{
+						Text:     "item",
+						Link:     "#",
+						IsActive: false,
+						ChildItems: []components.PageNavItem{
+							{
+								Text: "item ",
+								Link: "#",
+							},
+							{
+								Text:       "item disabled",
+								Link:       "#",
+								IsDisabled: true,
+							},
+						},
+					},
+					{
+						Text:       "item disabled",
+						Link:       "#",
+						IsDisabled: true,
+					},
+				},
+			},
+			// nav
+			{
+				NavClass: "",
+				NavItems: []components.PageNavItem{
+					{
+						Text:     "item active",
+						Link:     "#",
+						IsActive: true,
+					},
+					{
+						Text:     "item",
+						Link:     "#",
+						IsActive: false,
+					},
+					{
+						Text:     "item",
+						Link:     "#",
+						IsActive: false,
+					},
+					{
+						Text:       "item disabled",
+						Link:       "#",
+						IsDisabled: true,
+					},
+				},
+			},
+			// nav underline
+			{
+				NavClass: "nav-underline",
+				NavItems: []components.PageNavItem{
+					{
+						Text:     "item active",
+						Link:     "#",
+						IsActive: true,
+					},
+					{
+						Text:     "item",
+						Link:     "#",
+						IsActive: false,
+					},
+					{
+						Text:     "item",
+						Link:     "#",
+						IsActive: false,
+					},
+					{
+						Text:       "item disabled",
+						Link:       "#",
+						IsDisabled: true,
+					},
+				},
+			},
+			// nav tabs
+			{
+				NavClass: "",
+				IsTab:    true,
+				NavItems: []components.PageNavItem{
+					{
+						Text:     "tab active",
+						Link:     "#",
+						IsActive: true,
+					},
+					{
+						Text:     "tab",
+						Link:     "#",
+						IsActive: false,
+					},
+					{
+						Text:     "tab",
+						Link:     "#",
+						IsActive: false,
+					},
+					{
+						Text:       "tab disabled",
+						Link:       "#",
+						IsDisabled: true,
+					},
+				},
+			},
+			// nav vertical
+			{
+				NavClass:   "",
+				IsVertical: true,
+				NavItems: []components.PageNavItem{
+					{
+						Text:     "item active",
+						Link:     "#",
+						IsActive: true,
+					},
+					{
+						Text:     "item",
+						Link:     "#",
+						IsActive: false,
+					},
+					{
+						Text:     "item",
+						Link:     "#",
+						IsActive: false,
+					},
+					{
+						Text:       "item disabled",
+						Link:       "#",
+						IsDisabled: true,
+					},
+				},
+			},
+		}
+
+		tmplData := templateData{
+			Buttons:   buttons,
+			Hrefs:     hrefs,
+			Dropdowns: dropdowns,
+			Menus:     menus,
+		}
+		return c.Response.Template("custom_theme_elements.html", tmplData)
+
+	} else {
+
+		message := "{\"message\": \"Error, template not enabled\"}"
+		return c.Response.Json(message)
+	}
+}
+
 // Show form element page
 func Themecontent(c *core.Context) *core.Response {
 

routes.go

@@ -25,6 +25,7 @@ func registerRoutes() {
 	controller.Get("/themeform", controllers.Themeform)
 	controller.Get("/themecontent", controllers.Themecontent)
 	controller.Get("/themepanel", controllers.Themedemo)
+	controller.Get("/themeelements", controllers.ThemeElements)
 
 	// Uncomment the lines below to enable authentication
 	controller.Post("/signup", controllers.Signup)

storage/templates/custom_theme_elements.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+  {{template "page_head" "Goffee"}}
+  <body>
+  <div class="container">
+    <fieldset class="mb-3">
+        <legend>Demos buttons</legend>
+        <div class="container  border rounded-3 p-2">
+            {{range .Buttons}}
+                {{template "form_button" .}} 
+            {{end}}
+        </div>
+    </fieldset>
+
+    <fieldset class="mb-3">
+        <legend>Demos href</legend>
+        <div class="container d-flex justify-content-between   border rounded-3 p-2">
+            {{range .Hrefs}}
+                {{template "form_href" .}} 
+            {{end}}
+        </div>
+    </fieldset>
+
+
+    <fieldset class="mb-3">
+        <legend>Demos dropdown</legend>
+        <div class="container d-flex justify-content-between   border rounded-3 p-2">
+            {{range .Dropdowns}}
+                {{template "form_dropdown" .}} 
+            {{end}}
+        </div>
+    </fieldset>
+    
+    <fieldset class="mb-3">
+        <legend>Demos nav</legend>
+        <div class="container   border rounded-3 p-2 ">
+            {{range .Menus}}
+                <div class="container   border rounded-3 p-2 mb-2">
+                    {{template "page_nav" .}} 
+                </div>
+            {{end}}
+        </div>
+    </fieldset>
+  </div>
+  {{template "page_footer"}}
+  </body>
+</html>

storage/templates/custom_theme_formpage.html

@@ -5,7 +5,7 @@
   <div class="container">
     <form>
         <fieldset>
-            <legendFform demos</legend>
+            <legend>form demos</legend>
             <div class="row">
             {{template "form_input" .FormText}} 
             {{template "form_input" .FormEmail}}