{% extends "adminlte_full/base.html" %} {% import "adminlte_full/macros/widgets.html" as widgets %} {% import 'adminlte_full/macros/bootstrap4.html' as bootstrap %} {% block breadcrumbs %} {{ super() }} {{ bootstrap.breadcrumb(title=_('Widgets'), is_active=True) }} {% endblock breadcrumbs %} {% block page_title %}{{ _('Widgets') }}{% endblock %} {% block page_content %}
Info Box
{{ widgets.render_info_box('Messages', '1,410', icon='far fa-envelope', color=ThemeColor.INFO) }}
{{ widgets.render_info_box('Bookmarks', '410', icon='far fa-flag', color=ThemeColor.SUCCESS) }}
{{ widgets.render_info_box('Uploads', '13,648', icon='far fa-copy', color=ThemeColor.WARNING) }}
{{ widgets.render_info_box('Likes', '93,139', icon='far fa-star', color=ThemeColor.DANGER) }}
Info Box With bg-*
{{ widgets.render_info_box ( 'Bookmarks', '41,410', icon='far fa-bookmark', bg_color=ThemeColor.INFO, progress=70, progress_description='70% Increase in 30 Days' ) }}
{{ widgets.render_info_box ( 'Likes', '41,410', icon='far fa-thumbs-up', bg_color=ThemeColor.SUCCESS, progress=70, progress_description='70% Increase in 30 Days' ) }}
{{ widgets.render_info_box ( 'Events', '41,410', icon='far fa-calendar-alt', bg_color=ThemeColor.WARNING, progress=70, progress_description='70% Increase in 30 Days' ) }}
{{ widgets.render_info_box ( 'Comments', '41,410', icon='fas fa-comments', bg_color=ThemeColor.DANGER, progress=70, progress_description='70% Increase in 30 Days' ) }}
Info Box With bg-gradient-*
{{ widgets.render_info_box ( 'Bookmarks', '41,410', icon='far fa-bookmark', bg_color=ThemeColor.GRADIENT_INFO, progress=70, progress_description='70% Increase in 30 Days' ) }}
{{ widgets.render_info_box ( 'Likes', '41,410', icon='far fa-thumbs-up', bg_color=ThemeColor.GRADIENT_SUCCESS, progress=70, progress_description='70% Increase in 30 Days' ) }}
{{ widgets.render_info_box ( 'Events', '41,410', icon='far fa-calendar-alt', bg_color=ThemeColor.GRADIENT_WARNING, progress=70, progress_description='70% Increase in 30 Days' ) }}
{{ widgets.render_info_box ( 'Comments', '41,410', icon='fas fa-comments', bg_color=ThemeColor.GRADIENT_DANGER, progress=70, progress_description='70% Increase in 30 Days' ) }}
Small Box
{{ widgets.render_small_box(150, 'New Orders', url='#', color=ThemeColor.INFO, icon='fas fa-shopping-cart') }}
{{ widgets.render_small_box( '53%', 'Bounce Rate', url='#', color=ThemeColor.SUCCESS, icon='ion ion-stats-bars' ) }}
{{ widgets.render_small_box(44, 'User Registrations', url='#', color=ThemeColor.WARNING, icon='fas fa-user-plus') }}
{{ widgets.render_small_box(65, 'Unique Visitors', url='#', color=ThemeColor.DANGER, icon='fas fa-chart-pie') }}
{{ widgets.render_small_box( 150, 'New Orders', url='#', color=ThemeColor.INFO, icon='fas fa-shopping-cart', overlay=true ) }}
{{ widgets.render_small_box( '53%', 'Bounce Rate', url='#', color=ThemeColor.SUCCESS, icon='ion ion-stats-bars', overlay_dark=true ) }}

Cards

Abilities
{{ widgets.render_card(title='Expandable', expandable=true, color=ThemeColor.PRIMARY, body='The body of the card') }}
{{ widgets.render_card(title='Collapsable', collapsable=true, color=ThemeColor.SUCCESS, body='The body of the card') }}
{{ widgets.render_card(title='Removable', closable=true, color=ThemeColor.WARNING, body='The body of the card') }}
{{ widgets.render_card(title='Maximizable', maximizable=true, color=ThemeColor.DANGER, body='The body of the card') }}
{{ widgets.render_card(title='Card Refresh', data_source=url_for('widgets'), refreshable_options='data-source-selector="#card-refresh-content"', color=ThemeColor.PRIMARY, body='The body of the card') }}
The body of the card after card refresh
{{ widgets.render_card(title='All together', maximizable=true, collapsable=true, closable=true, data_source=url_for('widgets'), refreshable_options='data-source-selector="#card-refresh-content" data-load-on-init="false"', color=ThemeColor.SUCCESS, body='The body of the card') }}
{{ widgets.render_card(title='Loading state', color=ThemeColor.WARNING, body='The body of the card', overlay=true) }}
{{ widgets.render_card(title='Loading state (dark)', color=ThemeColor.DANGER, body='The body of the card', overlay_dark=true) }}
Colors Variations
{{ widgets.render_card(title='Primary Outline', collapsable=true, color=ThemeColor.PRIMARY, body='The body of the card') }}
{{ widgets.render_card(title='Success Outline', closable=true, color=ThemeColor.SUCCESS, body='The body of the card') }}
{{ widgets.render_card(title='Warning Outline', collapsable=true, color=ThemeColor.WARNING, body='The body of the card') }}
{{ widgets.render_card(title='Danger Outline', color=ThemeColor.DANGER, body='The body of the card') }}
{{ widgets.render_card(title='Primary Outline', outline=true, collapsable=true, color=ThemeColor.PRIMARY, body='The body of the card') }}
{{ widgets.render_card(title='Success Outline', outline=true, closable=true, color=ThemeColor.SUCCESS, body='The body of the card') }}
{{ widgets.render_card(title='Warning Outline', outline=true, collapsable=true, color=ThemeColor.WARNING, body='The body of the card') }}
{{ widgets.render_card(title='Danger Outline', outline=true, color=ThemeColor.DANGER, body='The body of the card') }}
{{ widgets.render_card(title='Primary', collapsable=true, bg_color=ThemeColor.PRIMARY, body='The body of the card') }}
{{ widgets.render_card(title='Success', closable=true, bg_color=ThemeColor.SUCCESS, body='The body of the card') }}
{{ widgets.render_card(title='Warning', collapsable=true, bg_color=ThemeColor.WARNING, body='The body of the card') }}
{{ widgets.render_card(title='Danger', bg_color=ThemeColor.DANGER, body='The body of the card') }}
{{ widgets.render_card(title='Primary Gradient', collapsable=true, bg_color=ThemeColor.GRADIENT_PRIMARY, body='The body of the card') }}
{{ widgets.render_card(title='Success Gradient', closable=true, bg_color=ThemeColor.GRADIENT_SUCCESS, body='The body of the card') }}
{{ widgets.render_card(title='Warning Gradient', collapsable=true, bg_color=ThemeColor.GRADIENT_WARNING, body='The body of the card') }}
{{ widgets.render_card(title='Danger Gradient', bg_color=ThemeColor.GRADIENT_DANGER, body='The body of the card') }}
{% endblock %}