icons
This commit is contained in:
parent
da0530d79b
commit
eec9697a71
3 changed files with 46 additions and 24 deletions
|
|
@ -8,8 +8,8 @@ func SampleNavbarMenu() TablerMenu {
|
|||
Title: "Dashboards",
|
||||
Icon: "home",
|
||||
Children: []*TablerMenuItem{
|
||||
{Title: "Default", URL: "index.html"},
|
||||
{Title: "Crypto", URL: "dashboard-crypto.html"},
|
||||
{Title: "Default", URL: "index.html", Icon: "dashboard"},
|
||||
{Title: "Crypto", URL: "dashboard-crypto.html", Icon: "currency-bitcoin"},
|
||||
},
|
||||
},
|
||||
"layout": {
|
||||
|
|
@ -17,27 +17,27 @@ func SampleNavbarMenu() TablerMenu {
|
|||
Icon: "layout-2",
|
||||
Columns: 2,
|
||||
Children: []*TablerMenuItem{
|
||||
{Title: "Boxed", URL: "layout-boxed.html"},
|
||||
{Title: "Combined", URL: "layout-combo.html"},
|
||||
{Title: "Condensed", URL: "layout-condensed.html"},
|
||||
{Title: "Fluid", URL: "layout-fluid.html"},
|
||||
{Title: "Fluid vertical", URL: "layout-fluid-vertical.html"},
|
||||
{Title: "Horizontal", URL: "layout-horizontal.html"},
|
||||
{Title: "Navbar dark", URL: "layout-navbar-dark.html"},
|
||||
{Title: "Navbar overlap", URL: "layout-navbar-overlap.html"},
|
||||
{Title: "Navbar sticky", URL: "layout-navbar-sticky.html"},
|
||||
{Title: "Right vertical", URL: "layout-vertical-right.html"},
|
||||
{Title: "Vertical", URL: "layout-vertical.html"},
|
||||
{Title: "Vertical transparent", URL: "layout-vertical-transparent.html"},
|
||||
{Title: "Boxed", URL: "layout-boxed.html", Icon: "layout-navbar"},
|
||||
{Title: "Combined", URL: "layout-combo.html", Icon: "layout-navbar"},
|
||||
{Title: "Condensed", URL: "layout-condensed.html", Icon: "layout-navbar"},
|
||||
{Title: "Fluid", URL: "layout-fluid.html", Icon: "layout-navbar"},
|
||||
{Title: "Fluid vertical", URL: "layout-fluid-vertical.html", Icon: "layout-navbar"},
|
||||
{Title: "Horizontal", URL: "layout-horizontal.html", Icon: "layout-navbar"},
|
||||
{Title: "Navbar dark", URL: "layout-navbar-dark.html", Icon: "layout-navbar"},
|
||||
{Title: "Navbar overlap", URL: "layout-navbar-overlap.html", Icon: "layout-navbar"},
|
||||
{Title: "Navbar sticky", URL: "layout-navbar-sticky.html", Icon: "layout-navbar"},
|
||||
{Title: "Right vertical", URL: "layout-vertical-right.html", Icon: "layout-navbar"},
|
||||
{Title: "Vertical", URL: "layout-vertical.html", Icon: "layout-navbar"},
|
||||
{Title: "Vertical transparent", URL: "layout-vertical-transparent.html", Icon: "layout-navbar"},
|
||||
},
|
||||
},
|
||||
"help": {
|
||||
Title: "Help",
|
||||
Icon: "lifebuoy",
|
||||
Children: []*TablerMenuItem{
|
||||
{Title: "Documentation", URL: "https://tabler.io/docs"},
|
||||
{Title: "Changelog", URL: "changelog.html"},
|
||||
{Title: "Source code", URL: "https://github.com/tabler/tabler"},
|
||||
{Title: "Documentation", URL: "https://tabler.io/docs", Icon: "book"},
|
||||
{Title: "Changelog", URL: "changelog.html", Icon: "list"},
|
||||
{Title: "Source code", URL: "https://github.com/tabler/tabler", Icon: "brand-github"},
|
||||
{Title: "Sponsor project!", URL: "https://github.com/sponsors/codecalm", Color: "pink", Icon: "heart"},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
21
storage/templates/tabler/includes/icon.html
Normal file
21
storage/templates/tabler/includes/icon.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
{{define "tabler_icon"}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline">
|
||||
{{if eq . "home"}}<path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" />
|
||||
{{else if eq . "layout-2"}}<path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" />
|
||||
{{else if eq . "lifebuoy"}}<path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" />
|
||||
{{else}}<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12l2 2l4 -4" />
|
||||
{{end}}
|
||||
</svg>
|
||||
{{end}}
|
||||
|
||||
{{define "tabler_icon_small"}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-inline me-1">
|
||||
{{if eq . "book"}}<path d="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0" /><path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0" /><path d="M3 6l0 13" /><path d="M12 6l0 13" /><path d="M21 6l0 13" />
|
||||
{{else if eq . "list"}}<path d="M9 6l11 0" /><path d="M9 12l11 0" /><path d="M9 18l11 0" /><path d="M5 6l0 .01" /><path d="M5 12l0 .01" /><path d="M5 18l0 .01" />
|
||||
{{else if eq . "brand-github"}}<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
|
||||
{{else if eq . "heart"}}<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" />
|
||||
{{else if eq . "layout-navbar"}}<path d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z" /><path d="M4 9l16 0" /><path d="M9 4l0 5" />
|
||||
{{else}}<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M9 12l2 2l4 -4" />
|
||||
{{end}}
|
||||
</svg>
|
||||
{{end}}
|
||||
|
|
@ -2,9 +2,9 @@
|
|||
<ul class="navbar-nav">
|
||||
{{range $key, $item := .NavbarMenu}}
|
||||
<li class="nav-item{{if $item.Active}} active{{end}}{{if $item.Children}} dropdown{{end}}">
|
||||
<a class="nav-link{{if $item.Children}} dropdown-toggle{{end}}{{if $item.Disabled}} disabled{{end}}" {{if $item.Children}}href="#navbar-{{$key}}" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-haspopup="true" aria-expanded="false"{{else}}href="/{{$item.URL}}"{{end}}{{if $item.Active}} aria-current="page"{{end}}>
|
||||
<a class="nav-link{{if $item.Children}} dropdown-toggle{{end}}{{if $item.Disabled}} disabled{{end}}" {{if $item.Children}}href="#navbar-{{$key}}" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-haspopup="true" aria-expanded="false"{{else}}href="{{$item.URL}}"{{end}}{{if $item.Active}} aria-current="page"{{end}}>
|
||||
<span class="nav-link-icon d-md-none d-lg-inline-block">
|
||||
<i class="icon ti ti-{{$item.Icon}}"></i>
|
||||
{{template "tabler_icon" $item.Icon}}
|
||||
</span>
|
||||
<span class="nav-link-title">{{$item.Title}}</span>
|
||||
{{if $item.Badge}}<span class="badge badge-sm bg-red text-red-fg">{{$item.Badge}}</span>{{end}}
|
||||
|
|
@ -17,9 +17,10 @@
|
|||
<div class="dropdown-menu-column">
|
||||
{{end}}
|
||||
|
||||
{{range $child := $item.Children}}
|
||||
{{range $childIndex, $child := $item.Children}}
|
||||
{{if $child.Children}}<div class="dropend">{{end}}
|
||||
<a class="dropdown-item{{if $child.Children}} dropdown-toggle{{end}}{{if $child.Color}} text-{{$child.Color}}{{end}}" {{if $child.Children}}href="#sidebar-{{$child.URL}}" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-haspopup="true" aria-expanded="false"{{else}}href="{{$child.URL}}"{{end}}{{if $child.URL}} target="_blank" rel="noopener"{{end}}>
|
||||
<a class="dropdown-item{{if $child.Children}} dropdown-toggle{{end}}{{if $child.Color}} text-{{$child.Color}}{{end}}" {{if $child.Children}}href="#sidebar-{{$child.URL}}" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-haspopup="true" aria-expanded="false"{{else}}href="{{$child.URL}}"{{end}}{{if $child.URL}}{{end}}>
|
||||
{{if $child.Icon}}{{template "tabler_icon_small" $child.Icon}}{{end}}
|
||||
{{$child.Title}}
|
||||
{{if $child.Badge}}<span class="badge badge-sm bg-green-lt text-uppercase ms-auto">{{$child.Badge}}</span>{{end}}
|
||||
</a>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue