mirror of
https://github.com/tabler/tabler.git
synced 2026-08-03 00:44:37 +04:00
chomik
75 lines
2.8 KiB
HTML
75 lines
2.8 KiB
HTML
<div class="card{% if include.collapsed %} card-collapsed{% endif %}">
|
|
{% if include.status or include.status-left %}
|
|
<div class="card-status{% if include.status-left %} card-status-left{% endif %} bg-{{ include.status | default: include.status-left }}"></div>
|
|
{% endif %}
|
|
|
|
{% unless include.hide-header %}
|
|
<div class="card-header">
|
|
<h3 class="card-title">{{ include.title | default: 'Card title' }}</h3>
|
|
|
|
{% unless include.hide-options %}
|
|
<div class="card-options">
|
|
{% if include.show-form %}
|
|
<form action="">
|
|
<div class="input-group">
|
|
<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>
|
|
</button>
|
|
</span>
|
|
</div>
|
|
</form>
|
|
{% elsif include.show-buttons %}
|
|
<a href="#" class="btn btn-primary btn-sm">Action 1</a>
|
|
<a href="#" class="btn btn-secondary btn-sm ml-2">Action 2</a>
|
|
{% elsif include.show-switch %}
|
|
{% include ui/switch.html checked=true %}
|
|
{% elsif include.options %}
|
|
{{ include.options }}
|
|
{% else %}
|
|
<a href="#" class="card-options-link" data-toggle="card-collapse">{% include ui/icon.html icon="chevron-up" %}</a>
|
|
{% if include.show-fullscreen %}
|
|
<a href="#" class="card-options-link" data-toggle="card-fullscreen">{% include ui/icon.html icon="maximize" %}</a>
|
|
{% endif %}
|
|
<a href="#" class="card-options-link" data-toggle="card-remove">{% include ui/icon.html icon="x" %}</a>
|
|
{% endif %}
|
|
</div>
|
|
{% endunless %}
|
|
</div>
|
|
{% endunless %}
|
|
|
|
{% if include.alert %}
|
|
<div class="card-alert alert alert-{{ include.alert-type | default: 'success' }} mb-0">
|
|
{{ include.alert }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="card-body">
|
|
{% if include.body-title %}
|
|
<h3 class="card-title">{{ include.body-title }}</h3>
|
|
{% endif %}
|
|
|
|
{% if include.body %}
|
|
{{ include.body }}
|
|
{% elsif include.show-loader %}
|
|
<div class="dimmer active">
|
|
<div class="loader"></div>
|
|
<div class="dimmer-content">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!</p>
|
|
</div>
|
|
</div>
|
|
{% else %}
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque pariatur perferendis sed suscipit velit vitae voluptatem. A consequuntur, deserunt eaque error nulla temporibus!</p>
|
|
{% endif %}
|
|
</div>
|
|
{% if include.show-footer %}
|
|
<div class="card-footer">
|
|
This is standard card footer
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if include.status-bottom %}
|
|
<div class="card-status card-status-bottom bg-{{ include.status-bottom }}"></div>
|
|
{% endif %}
|
|
</div>
|