This repository has been archived by the owner on Aug 26, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathcards.html
38 lines (37 loc) · 12.2 KB
/
cards.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Cards | Sanjab</title>
<meta name="generator" content="VuePress 1.5.4">
<link rel="icon" href="/images/favicon.ico">
<meta name="description" content="Sanjab is an admin package for laravel framework. create admin panels quick and extendiable.">
<meta property="og:site_name" content="Sanjab">
<meta property="og:title" content="Cards">
<meta property="og:type" content="website">
<meta property="og:url" content="/cards.html">
<meta name="twitter:title" content="Cards">
<meta name="twitter:url" content="/cards.html">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" href="/assets/css/0.styles.2e8fc617.css" as="style"><link rel="preload" href="/assets/js/app.bb080b10.js" as="script"><link rel="preload" href="/assets/js/3.0ca36dc4.js" as="script"><link rel="preload" href="/assets/js/41.9bf9596e.js" as="script"><link rel="prefetch" href="/assets/js/10.f2fbcc00.js"><link rel="prefetch" href="/assets/js/11.a88150f7.js"><link rel="prefetch" href="/assets/js/12.3f4fc49f.js"><link rel="prefetch" href="/assets/js/13.2f7bbe92.js"><link rel="prefetch" href="/assets/js/14.f69c3be7.js"><link rel="prefetch" href="/assets/js/15.146fd77b.js"><link rel="prefetch" href="/assets/js/16.7040661a.js"><link rel="prefetch" href="/assets/js/17.10c67635.js"><link rel="prefetch" href="/assets/js/18.b258fc52.js"><link rel="prefetch" href="/assets/js/19.0d164613.js"><link rel="prefetch" href="/assets/js/20.2cf36932.js"><link rel="prefetch" href="/assets/js/21.8f19317a.js"><link rel="prefetch" href="/assets/js/22.3dc04c9b.js"><link rel="prefetch" href="/assets/js/23.7d93154e.js"><link rel="prefetch" href="/assets/js/24.d10068db.js"><link rel="prefetch" href="/assets/js/25.ecd8acc3.js"><link rel="prefetch" href="/assets/js/26.5ae91a18.js"><link rel="prefetch" href="/assets/js/27.1ae60bea.js"><link rel="prefetch" href="/assets/js/28.1dd28706.js"><link rel="prefetch" href="/assets/js/29.8c489115.js"><link rel="prefetch" href="/assets/js/30.effa9b52.js"><link rel="prefetch" href="/assets/js/31.5f330bfc.js"><link rel="prefetch" href="/assets/js/32.4ac193d2.js"><link rel="prefetch" href="/assets/js/33.afce904a.js"><link rel="prefetch" href="/assets/js/34.29769f89.js"><link rel="prefetch" href="/assets/js/35.85aef861.js"><link rel="prefetch" href="/assets/js/36.5b05176c.js"><link rel="prefetch" href="/assets/js/37.40a67162.js"><link rel="prefetch" href="/assets/js/38.0585aaff.js"><link rel="prefetch" href="/assets/js/39.085c73ff.js"><link rel="prefetch" href="/assets/js/4.fb05333f.js"><link rel="prefetch" href="/assets/js/40.667cd531.js"><link rel="prefetch" href="/assets/js/42.7bf6bc5a.js"><link rel="prefetch" href="/assets/js/43.dbde9849.js"><link rel="prefetch" href="/assets/js/44.a1a7fab3.js"><link rel="prefetch" href="/assets/js/45.af6c374b.js"><link rel="prefetch" href="/assets/js/46.22ab45aa.js"><link rel="prefetch" href="/assets/js/47.095fc7de.js"><link rel="prefetch" href="/assets/js/48.fafabd31.js"><link rel="prefetch" href="/assets/js/49.8b56a6bd.js"><link rel="prefetch" href="/assets/js/5.57d9df4b.js"><link rel="prefetch" href="/assets/js/50.523e948d.js"><link rel="prefetch" href="/assets/js/51.2b0f3efa.js"><link rel="prefetch" href="/assets/js/6.3a56987d.js"><link rel="prefetch" href="/assets/js/7.8bfd5ac9.js"><link rel="prefetch" href="/assets/js/8.3d2834af.js"><link rel="prefetch" href="/assets/js/9.e3de8168.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.26dc1fe9.js">
<link rel="stylesheet" href="/assets/css/0.styles.2e8fc617.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/images/logo.svg" alt="Sanjab" class="logo"> <span class="site-name can-hide">Sanjab</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://discord.gg/kwuTZQd" target="_blank" rel="noopener noreferrer" class="nav-link external">
Discussion
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/sanjabteam/sanjab" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://discord.gg/kwuTZQd" target="_blank" rel="noopener noreferrer" class="nav-link external">
Discussion
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <a href="https://github.com/sanjabteam/sanjab" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav> <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">Sanjab</a></li><li><a href="/install.html" class="sidebar-link">Installation</a></li><li><a href="/crud.html" class="sidebar-link">CRUD</a></li><li><a href="/setting.html" class="sidebar-link">Setting</a></li><li><section class="sidebar-group collapsable depth-0"><a href="/widgets" class="sidebar-heading clickable"><span>Widgets</span> <span class="arrow right"></span></a> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><a href="/cards" class="sidebar-heading clickable active"><span>Cards</span> <span class="arrow right"></span></a> <!----></section></li><li><a href="/actions.html" class="sidebar-link">Actions</a></li><li><a href="/localization.html" class="sidebar-link">Localization</a></li><li><a href="/authorization.html" class="sidebar-link">Authorization</a></li><li><a href="/compile.html" class="sidebar-link">Custom compile</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="cards"><a href="#cards" class="header-anchor">#</a> Cards</h1> <ul><li><a href="#create-a-card">Create a card</a></li> <li><a href="#base-properties">Base properties</a></li> <li><a href="#availble-cards">Availble cards</a></li></ul> <p>Cards are classes that showing any block in dashboard or crud.</p> <h2 id="create-a-card"><a href="#create-a-card" class="header-anchor">#</a> Create a card</h2> <p>The most simple card is a <code>StatsCard</code>.</p> <div class="language-php extra-class"><pre class="language-php"><code><span class="token keyword">use</span> <span class="token package">Sanjab<span class="token punctuation">\</span>Cards<span class="token punctuation">\</span>StatsCard</span><span class="token punctuation">;</span>
<span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">cards</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> StatsCard<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Products'</span><span class="token punctuation">)</span>
<span class="token operator">-</span><span class="token operator">></span><span class="token function">value</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> Product<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">count</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="base-properties"><a href="#base-properties" class="header-anchor">#</a> Base properties</h2> <h4 id="tag"><a href="#tag" class="header-anchor">#</a> tag</h4> <p>Card tag.</p> <h4 id="cols"><a href="#cols" class="header-anchor">#</a> cols</h4> <p>Bootstrap column based size.</p> <h4 id="title"><a href="#title" class="header-anchor">#</a> title</h4> <p>Title of the card.</p> <h4 id="order"><a href="#order" class="header-anchor">#</a> order</h4> <p>Order of card in cards.</p> <h2 id="availble-cards"><a href="#availble-cards" class="header-anchor">#</a> Availble cards</h2> <ul><li><a href="/cards/stats.html">StatsCard</a></li> <li><a href="/cards/selective.html">SelectiveCard</a></li> <li><a href="/cards/bar-chart.html">BarChartCard</a></li> <li><a href="/cards/bubble-chart.html">BubbleChartCard</a></li> <li><a href="/cards/doughnut-chart.html">DoughnutChartCard</a></li> <li><a href="/cards/horizontal-bar-chart.html">HorizontalBarChartCard</a></li> <li><a href="/cards/line-chart.html">LineChartCard</a></li> <li><a href="/cards/pie-chart.html">PieChartCard</a></li> <li><a href="/cards/polar-area-chart.html">PolarAreaChartCard</a></li> <li><a href="/cards/radar-chart.html">RadarChartCard</a></li> <li><a href="/cards/scatter-chart.html">ScatterChartCard</a></li></ul></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/sanjabteam/docs/edit/master/docs/cards.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div> <!----></footer> <!----> </main></div><div class="global-ui"><!----></div></div>
<script src="/assets/js/app.bb080b10.js" defer></script><script src="/assets/js/3.0ca36dc4.js" defer></script><script src="/assets/js/41.9bf9596e.js" defer></script>
</body>
</html>