mirror of
https://github.com/tabler/tabler.git
synced 2026-07-29 14:34:37 +04:00
components images
This commit is contained in:
codecalm
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: Simple avatar
|
||||
markdown: false
|
||||
---
|
||||
|
||||
{% include ui/avatar.html person-id=1 status="green" %}
|
||||
+46
-27
@@ -1,44 +1,63 @@
|
||||
<!doctype html>
|
||||
<html lang="en"{% if page.rtl %} dir="rtl"{% endif %}>
|
||||
<html lang="en" {% if page.rtl %} dir="rtl" {% endif %}>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
|
||||
<meta http-equiv="Content-Language" content="en"/>
|
||||
<meta http-equiv="Content-Language" content="en"/>
|
||||
|
||||
<meta name="msapplication-TileColor" content="{{ site.colors.blue.hex }}"/>
|
||||
<meta name="theme-color" content="{{ site.colors.blue.hex }}"/>
|
||||
<meta name="msapplication-TileColor" content="{{ site.colors.blue.hex }}"/>
|
||||
<meta name="theme-color" content="{{ site.colors.blue.hex }}"/>
|
||||
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<meta name="mobile-web-app-capable" content="yes"/>
|
||||
<meta name="HandheldFriendly" content="True"/>
|
||||
<meta name="MobileOptimized" content="320"/>
|
||||
<meta name="robots" content="noindex,nofollow,noarchive" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes"/>
|
||||
<meta name="mobile-web-app-capable" content="yes"/>
|
||||
<meta name="HandheldFriendly" content="True"/>
|
||||
<meta name="MobileOptimized" content="320"/>
|
||||
<meta name="robots" content="noindex,nofollow,noarchive"/>
|
||||
|
||||
<link rel="icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="shortcut icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="shortcut icon" href="{{ site.base }}/favicon.ico" type="image/x-icon"/>
|
||||
|
||||
<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
|
||||
<title>{% if page.title %}{{ page.title }} - {% endif %}{% if layout.title %}{{ layout.title }} - {% endif %}{% if
|
||||
site.title %}{{ site.title }} - {% endif %}{{ site.description }}</title>
|
||||
|
||||
{% if page.description %}
|
||||
<meta name="description" content="{{ page.description | escape }}" />
|
||||
<meta name="description" content="{{ page.description | escape }}"/>
|
||||
{% endif %}
|
||||
|
||||
{% include layout/css.html %}
|
||||
<style>body { display: none; }</style>
|
||||
</head>
|
||||
<body class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
|
||||
|
||||
{{ content}}
|
||||
|
||||
{% if site.debug %}
|
||||
{% if jekyll.environment == 'development' %}
|
||||
{% include layout/debug.html %}
|
||||
{% endif %}
|
||||
{% if layout.og-component %}
|
||||
<meta name="twitter:image:src" content="https://preview-dev.tabler.io/components/{{ page.slug }}.png">
|
||||
<meta name="twitter:site" content="@tabler_ui">
|
||||
<meta name="twitter:card" content="summary">
|
||||
<meta name="twitter:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
|
||||
<meta name="twitter:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
|
||||
<meta property="og:image" content="https://preview-dev.tabler.io/components/{{ page.slug }}.png">
|
||||
<meta property="og:image:width" content="1280">
|
||||
<meta property="og:image:height" content="640">
|
||||
<meta property="og:site_name" content="Tabler">
|
||||
<meta property="og:type" content="object">
|
||||
<meta property="og:title" content="Tabler: Premium and Open Source dashboard template with responsive and high quality UI.">
|
||||
<meta property="og:url" content="https://preview-dev.tabler.io/">
|
||||
<meta property="og:description" content="Tabler comes with tons of well-designed components and features. Start your adventure with Tabler and make your dashboard great again. For free!">
|
||||
{% endif %}
|
||||
|
||||
{% include layout/js.html %}
|
||||
<script>document.body.style.display = 'block';</script>
|
||||
<style>body { display: none; }</style>
|
||||
</head>
|
||||
<body
|
||||
class="antialiased {% if page.dark-theme %} theme-dark{% endif %}{% if layout.body-class %} {{ layout.body-class }}{% endif %}{% if page.body-class %} {{ page.body-class }}{% endif %}">
|
||||
|
||||
{{ content}}
|
||||
|
||||
{% if site.debug %}
|
||||
{% if jekyll.environment == 'development' %}
|
||||
{% include layout/debug.html %}
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
||||
{% include layout/js.html %}
|
||||
<script>document.body.style.display = 'block';</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
layout: default
|
||||
menu: components
|
||||
page-title: Tabler components
|
||||
og-component: true
|
||||
---
|
||||
|
||||
{% assign columns = page.columns | default: 0 %}
|
||||
@@ -17,7 +18,11 @@ page-title: Tabler components
|
||||
</div>
|
||||
<div class="col-lg-9">
|
||||
<div class="card">
|
||||
<div class="card-body p-5">
|
||||
<div class="card-body">
|
||||
<div class="card-title">{{ page.title }}</div>
|
||||
<p class="mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi autem dignissimos doloribus, fuga iste omnis reprehenderit ullam veritatis. Ab aut blanditiis dolore eos exercitationem iste quis rerum, tempore unde voluptatem!</p>
|
||||
|
||||
|
||||
<div class="border border-bottom-0 bg-light p-1 rounded-top">
|
||||
<div class="d-flex align-items-center justify-content-center p-5 pb-6" style="min-height: 50vh" id="component-wrapper">
|
||||
<div {% if columns > 0 %}class="flex-fill" style="max-width: {{ columns | times: 298 | minus: 24 }}px"{% endif %}>
|
||||
@@ -29,6 +34,11 @@ page-title: Tabler components
|
||||
<div class="highlight m-0 rounded-0 rounded-bottom">
|
||||
{{ content | highlight_tidy: 'html' }}
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col">{% include ui/button.html text="Copy code" color="secondary" block=true class="mt-4" %}</div>
|
||||
<div class="col">{% include ui/button.html text="Open in sandbox" color="primary" block=true class="mt-4" %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user