mirror of
https://github.com/tabler/tabler.git
synced 2026-07-29 14:34:37 +04:00
topbar search
This commit is contained in:
@@ -12,7 +12,7 @@
|
||||
{% if include.show-form %}
|
||||
<form action="">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control form-control-sm" placeholder="Search something..." name="s">
|
||||
<input type="text" class="form-control form-control-sm" placeholder="Search something…" name="s">
|
||||
<span class="input-group-btn ml-2">
|
||||
<button class="btn btn-sm btn-default" type="submit">
|
||||
<span class="fe fe-search"></span>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
<div class="form-group">
|
||||
<label class="form-label">Input group</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
<span class="input-group-append">
|
||||
<button class="btn btn-primary" type="button">Go!</button>
|
||||
</span>
|
||||
@@ -71,7 +71,7 @@
|
||||
<label class="form-label">Separated inputs</label>
|
||||
<div class="row row-xs">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
</div>
|
||||
<span class="col-auto">
|
||||
<button class="btn btn-secondary" type="button">{% include ui/icon.html icon="search" %}</button>
|
||||
@@ -82,7 +82,7 @@
|
||||
<label class="form-label">ZIP Code</label>
|
||||
<div class="row row-sm">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
</div>
|
||||
<span class="col-auto align-self-center">
|
||||
<span class="form-help" data-toggle="popover" data-placement="top"
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</a>
|
||||
</div>
|
||||
<p class="mb-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam corporis dolorem earum et, fugiat illum
|
||||
incidunt modi ne... </p>
|
||||
incidunt modi ne… </p>
|
||||
{% include ui/avatar-list.html text="+5" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
<header class="navbar {% if include.dark %} bg-dark text-white{% endif %}">
|
||||
{% include parts/navbar.html logo=true user-menu=1 person=5 dark=false white-logo=include.dark %}
|
||||
</header>
|
||||
@@ -1,5 +1,13 @@
|
||||
<header class="navbar {% if include.dark %} bg-dark text-white{% endif %}">
|
||||
{% include parts/navbar.html logo=true search=true user-menu=1 person=5 dark=false white-logo=include.dark %}
|
||||
</header>
|
||||
|
||||
{% comment %}
|
||||
{% if page.nav-position == "top" or page.nav-position == "all" %}
|
||||
<header class="navbar navbar-expand-md">
|
||||
<div class="container">
|
||||
{% include layout/menu.html %}
|
||||
</div>
|
||||
</header>
|
||||
{% endif %}
|
||||
{% endcomment %}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<div class="form-group">
|
||||
<label class="form-label">Icon input</label>
|
||||
<div class="input-icon mb-3">
|
||||
<input type="text" class="form-control" placeholder="Search for...">
|
||||
<input type="text" class="form-control" placeholder="Search for…">
|
||||
<span class="input-icon-addon">
|
||||
{% include ui/icon.html icon="search" %}
|
||||
</span>
|
||||
@@ -12,4 +12,4 @@
|
||||
</span>
|
||||
<input type="text" class="form-control" placeholder="Username">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,10 +11,22 @@
|
||||
<a href="{{ site.base }}" class="navbar-brand text-inherit">
|
||||
{% if include.icon %}<span class="text-green">{% include ui/icon.html icon=include.icon %}</span>{% endif %}
|
||||
{% if include.stamp %}<span class="stamp bg-primary text-white">UI</span>{% endif %}
|
||||
{% if include.logo %}<img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="" class="navbar-brand-logo mr-3">{% endif %}
|
||||
{% if include.logo %}
|
||||
<img src="{{ site.base }}/img/logo{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-none d-md-block navbar-brand-logo mr-3">
|
||||
<img src="{{ site.base }}/img/logo-small{% if include.white-logo %}-white{% endif %}.svg" alt="{{ site.title }}" class="d-md-none navbar-brand-logo mr-3">
|
||||
{% endif %}
|
||||
{% if include.title %}<span class="d-inline">{{ include.title }}</span>{% endif %}
|
||||
</a>
|
||||
|
||||
{% if include.search %}
|
||||
<div class="w-auto flex-fill max-w-md ml-0 ml-md-8 mr-auto d-none d-lg-block">
|
||||
<div class="input-icon">
|
||||
<span class="input-icon-addon">{% include ui/icon.html icon="search" %}</span>
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.plus-left %}
|
||||
<a href="#" class="btn btn-primary">
|
||||
{% include ui/icon.html icon="plus" %}
|
||||
@@ -59,18 +71,6 @@
|
||||
</li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{% if include.search %}
|
||||
<!-- Navbar Search -->
|
||||
<form class="input-group m-2 my-lg-0 ">
|
||||
<span class="input-group-prepend">
|
||||
<button type="button"
|
||||
class="btn no-shadow no-bg px-0">{% include ui/icon.html icon="search" %}</button>
|
||||
</span>
|
||||
<input type="text" class="form-control no-border no-shadow no-bg typeahead" placeholder="Search..."
|
||||
data-plugin="typeahead">
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<ul class="nav navbar-menu order-1 order-lg-2">
|
||||
@@ -129,8 +129,8 @@
|
||||
<a href="#" data-toggle="dropdown"
|
||||
class="nav-link d-flex align-items-center py-0 px-lg-0 px-2 text-color ml-2">
|
||||
{% if include.user-menu == 1 %}
|
||||
{% include ui/avatar.html src=person.photo %}
|
||||
<span class="ml-2 d-none d-lg-block leading-none">
|
||||
{% include ui/avatar.html src=person.photo %}
|
||||
<span class="ml-2 d-none d-lg-block leading-none">
|
||||
<span>{{ person.full_name }}</span>
|
||||
<span class="text-muted d-block mt-1 text-h6">Administrator</span>
|
||||
</span>
|
||||
@@ -157,14 +157,14 @@
|
||||
{% include ui/icon.html icon="mail" class="dropdown-icon" %} Inbox
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
|
||||
{% include ui/icon.html icon="send" class="dropdown-icon" %} Message
|
||||
</a>
|
||||
<div class="dropdown-divider"></div>
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
|
||||
{% include ui/icon.html icon="help-circle" class="dropdown-icon" %} Need help?
|
||||
</a>
|
||||
<a class="dropdown-item" href="#">
|
||||
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
|
||||
{% include ui/icon.html icon="log-out" class="dropdown-icon" %} Sign out
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
{% assign elem = include.element | default: 'div' %}
|
||||
<{{ elem }} class="spinner-{{ include.type | default: 'border' }}{% if include.color %} text-{{ include.color }}{% endif %}{% if include['size'] %} spinner-{{ include.type | default: 'border' }}-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="status">
|
||||
<span class="sr-only">loading...</span>
|
||||
<span class="sr-only">loading…</span>
|
||||
</{{ elem }}>
|
||||
|
||||
Reference in New Issue
Block a user