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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>StatusIcon | OpenBMC Web UI Style Guide</title>
<meta name="generator" content="VuePress 1.8.2">
<meta name="description" content="Guidance on code style and development for the OpenBMC browser-based UI">
<link rel="preload" href="/webui-vue/assets/css/0.styles.ee48119c.css" as="style"><link rel="preload" href="/webui-vue/assets/js/app.6e5ae7e9.js" as="script"><link rel="preload" href="/webui-vue/assets/js/2.3066748c.js" as="script"><link rel="preload" href="/webui-vue/assets/js/4.e088be67.js" as="script"><link rel="prefetch" href="/webui-vue/assets/js/10.eff1bc3e.js"><link rel="prefetch" href="/webui-vue/assets/js/11.f760a167.js"><link rel="prefetch" href="/webui-vue/assets/js/12.05e32ea2.js"><link rel="prefetch" href="/webui-vue/assets/js/13.3011b8ba.js"><link rel="prefetch" href="/webui-vue/assets/js/14.366e135a.js"><link rel="prefetch" href="/webui-vue/assets/js/15.9a576a5a.js"><link rel="prefetch" href="/webui-vue/assets/js/16.8d8a2baa.js"><link rel="prefetch" href="/webui-vue/assets/js/17.067a94f4.js"><link rel="prefetch" href="/webui-vue/assets/js/18.88267105.js"><link rel="prefetch" href="/webui-vue/assets/js/19.781066f3.js"><link rel="prefetch" href="/webui-vue/assets/js/20.afaf92e0.js"><link rel="prefetch" href="/webui-vue/assets/js/21.f51dd518.js"><link rel="prefetch" href="/webui-vue/assets/js/22.22ba3b96.js"><link rel="prefetch" href="/webui-vue/assets/js/23.42b49486.js"><link rel="prefetch" href="/webui-vue/assets/js/24.7c316dcb.js"><link rel="prefetch" href="/webui-vue/assets/js/25.79d3357c.js"><link rel="prefetch" href="/webui-vue/assets/js/26.c82c48a9.js"><link rel="prefetch" href="/webui-vue/assets/js/27.f4d5e099.js"><link rel="prefetch" href="/webui-vue/assets/js/28.e8d46e0f.js"><link rel="prefetch" href="/webui-vue/assets/js/29.a85a251f.js"><link rel="prefetch" href="/webui-vue/assets/js/3.4aa24478.js"><link rel="prefetch" href="/webui-vue/assets/js/30.994c9683.js"><link rel="prefetch" href="/webui-vue/assets/js/31.06af27be.js"><link rel="prefetch" href="/webui-vue/assets/js/32.57a17f1c.js"><link rel="prefetch" href="/webui-vue/assets/js/33.b9e5db10.js"><link rel="prefetch" href="/webui-vue/assets/js/34.0e496acd.js"><link rel="prefetch" href="/webui-vue/assets/js/35.49b0ff49.js"><link rel="prefetch" href="/webui-vue/assets/js/36.dbed5155.js"><link rel="prefetch" href="/webui-vue/assets/js/37.c48db488.js"><link rel="prefetch" href="/webui-vue/assets/js/38.2cecf29e.js"><link rel="prefetch" href="/webui-vue/assets/js/5.666cf43b.js"><link rel="prefetch" href="/webui-vue/assets/js/6.c4bd7641.js"><link rel="prefetch" href="/webui-vue/assets/js/7.2afc0a47.js"><link rel="prefetch" href="/webui-vue/assets/js/8.50aab72d.js"><link rel="prefetch" href="/webui-vue/assets/js/9.9f3d8ba6.js">
<link rel="stylesheet" href="/webui-vue/assets/css/0.styles.ee48119c.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="/webui-vue/" class="home-link router-link-active"><!----> <span class="site-name">OpenBMC Web UI Style Guide</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
Customization
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/webui-vue/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/webui-vue/customization/" class="nav-link">
Customization
</a></div><div class="nav-item"><a href="https://github.com/openbmc/webui-vue" target="_blank" rel="noopener noreferrer" class="nav-link external">
Github
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" 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> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/webui-vue/guide/" aria-current="page" class="sidebar-link">Getting Started</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Coding Standards</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Guidelines</span> <span class="arrow right"></span></p> <!----></section></li><li><a href="/webui-vue/guide/unit-testing/" class="sidebar-link">Unit Testing</a></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Components</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/webui-vue/guide/components/" aria-current="page" class="sidebar-link">Overview</a></li><li><a href="/webui-vue/guide/components/alerts/" class="sidebar-link">Alerts</a></li><li><a href="/webui-vue/guide/components/buttons/" class="sidebar-link">Buttons</a></li><li><a href="/webui-vue/guide/components/file-upload/" class="sidebar-link">FormFile</a></li><li><a href="/webui-vue/guide/components/info-tooltip/" class="sidebar-link">InfoTooltip</a></li><li><a href="/webui-vue/guide/components/page-section/" class="sidebar-link">Page section</a></li><li><a href="/webui-vue/guide/components/page-title/" class="sidebar-link">Page title</a></li><li><a href="/webui-vue/guide/components/status-icon/" aria-current="page" class="active sidebar-link">StatusIcon</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-default-status" class="sidebar-link">Status icon with default status</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-success-status" class="sidebar-link">Status icon with success status</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-info-status" class="sidebar-link">Status icon with info status</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-warning-status" class="sidebar-link">Status icon with warning status</a></li><li class="sidebar-sub-header"><a href="/webui-vue/guide/components/status-icon/#status-icon-with-danger-status" class="sidebar-link">Status icon with danger status</a></li></ul></li><li><a href="/webui-vue/guide/components/table/" class="sidebar-link">Table</a></li><li><a href="/webui-vue/guide/components/toasts/" class="sidebar-link">Toasts</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Quick Start</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="statusicon"><a href="#statusicon" class="header-anchor">#</a> StatusIcon</h1> <p>The StatusIcon component is used to add an icon that represents one of the
following statuses:</p> <ul><li>success</li> <li>info</li> <li>warning</li> <li>danger</li></ul> <p>To use this component:</p> <ol><li>Import it into the single file component (SFC)</li> <li>Add the <code><status-icon /></code> tag</li> <li>Add the optional status prop and set the value to one of the statuses</li> <li>Add the translated text to associate with the icon</li></ol> <div class="language-vue extra-class"><pre class="language-vue"><code>import StatusIcon from '@/components/Global/StatusIcon'
</code></pre></div><h2 id="status-icon-with-default-status"><a href="#status-icon-with-default-status" class="header-anchor">#</a> Status icon with default status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>status-icon</span> <span class="token punctuation">/></span></span>
</code></pre></div><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAnCAYAAAB5XdqFAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAS0SURBVFhH1ZhJTxRbFIAPIAiKIFMkYhAIG4ZIGARDJHGByLAQEkwMG/8crCAhhHlw4woCMUAYFsgCkFkZVSbhvfedVEF3VXVT3dUxzy8hTd+qrvvVPeeee6ui/vkP+QuINj7/90RsRL98+SIrKytyfHwsMTExkpKSIgUFBZKWlmac4Y2wRH/+/Cl7e3vy8eNH2d3dVbE7d+7oZ1RUlJ5zdXUlv3//lsvLS/2srq6W4uJivYFwCFl0YWFBJicnVTQ+Pl7lboMuLi4u5Pz8XJ49eyb5+fmSk5NjHHWHa9EfP35IT0+PHBwcSHR0tCtBK6Ywv62oqJDnz58bR27Hleja2pq0t7fLw4cPVdIMb7iQFowu1/rw4YM8ePDAOBKYW0WXlpZkaGhI4uLiPAtaIXdjY2OlpaVF0tPTjVZngpYnRnJ0dFQvFmlJIAVIhd7eXk2pYAQU3dnZkY6ODg0Pf74QBBcZcyvcPLJUkU+fPhmtzgQUZeKYOekLguQY7ZQeryBLWi0vL8vMzIzRasdRdHx8XJPdGm4kT05O5MWLF/L69Ws9HglZSEhIkImJCeObHZsogl+/flUJqyjJX15eLqWlpVoH3717p6Gj3Sv0Rd+Dg4NGiz82UZZCRJ3qJOHe3NzUUQWWx/r6ei38XmUR5fpnZ2eOUbKJMvtYDq2jCVyISdbX1ye/fv3StuzsbKmtrdXK4FWWwVlfX9d8teInyuz7/PmzduoE8hzb3t6Wrq4u+fbtm7Yj29raqnnmRZbrm3sDK36iTBanSeQLx5il7JIGBgbk6OhI29lsNDQ0yL179zzJErXDw0Pj2w1+okgEk/SFkUWyv79f9wGQmZkpdXV1eiMU8nAg/Cw01t/bcjQUEGIX1dnZKVtbW9r2+PFjrQas3+HIMqLfv3+3RcWTKDCyTKzh4WHtAJKTk6WpqUkSExPDkiX9rCufZ1FAlvCTBmZ+UbrevHmjORuKLIJ37961paBtMoULskww0mBjY0PbyFnSIDU1VUfJDSzPGRkZej1fbCOKbLjCXByhkZGR65wl/KRBUlKSq5GlPLHqUct98RNlyLOysvSuwoUOyFmWwv39fW1DsrGxUSeYU/75Qt/UYyt+ooxISUmJ6zAFAlmWWRaF1dVVbWNjzKLw6NEjndFOsqbk/fv3jZYbbKHnRP68jCogS6jHxsauZZlYzc3N+ukkStgpb0+fPjVabrCJchJ3HYntG7Knp6f6KGOWLr6z8bDOalM8NzdXP604PjOxMeju7tZUcLtSBYObRrqwsFDm5+c1WhR2XziH+tvW1ma0+GMbUWBCFRUVec5VE5ZFRKanpx0lgdLGljEQjqJQU1Nz3UEkQI4IWSUJKJKvXr3SehuIgKKE6v3793rhSMlaQZJ8ZVAqKyuNVmcCigJ3+PbtW/3fy9YtECy7CN4mCa7elLCdY2kkRDx2OOWYW+iOCCHJk0FZWZlxJDiu3z3B7OysTE1NaSds8UIRNgWprZSgly9fBs1JKyGJAs9Uc3Nzsri4eC1MPgcqY8xyqgeSeXl5WtBDeTlmErKoCds5JHgHwKtILmOV5TiPKFVVVfLkyRNdGrmxcAhb9E8T/qz4w/wloiL/AiewfGYa++arAAAAAElFTkSuQmCC" alt="StatusIcon default icon example"></p> <h2 id="status-icon-with-success-status"><a href="#status-icon-with-success-status" class="header-anchor">#</a> Status icon with success status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>status-icon</span>
<span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>success<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
</code></pre></div><p><img src="data:image/png;base64,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" alt="StatusIcon success icon example"></p> <h2 id="status-icon-with-info-status"><a href="#status-icon-with-info-status" class="header-anchor">#</a> Status icon with info status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>status-icon</span>
<span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>info<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
</code></pre></div><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAkCAYAAAD/yagrAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAVESURBVFhH1Zh/bFNVFMe//b2u29rNdWWMgcvc3CJoMCYuoH/4h4kEMfCPEoJR4w8MMxpFMYSIxEwxUZxGiehiQpAQjInGqImIEDVkRgXU6RICYTKQjc2127quP9979Zy7t6zre699bVHiJ7nrdtrd++2555x77rOkCfwPuCJCv/0lht//TMFmtcCi2hhZSaO60oYNd3rm2YuhaKGj4zK2vT+O0JSC88MSQmEFFqv6pgrP7HJY0Npoh8tpwUN3VeLuFW713cIoWOgICezYNIzpRBpejwVW8qLdBlgt5E0dtyk0vSTTqwLEEgqGgzK+fj2AjhtcKC/L+mY5MC00kUrjtYNh7PsqAocdNIrbTF4tGJZxa7sLe5+tQaCaJjOBaaG3dV7GUFCC22URsVgKvGKUvOursOKLV+tQf01+sXmFSnIa7fdfEr+XUZxZ9PZXRaHkicRnpuPY5JGLJO0S79SBF/xYudSlWvXJKXQqqmBj1xj6zyfhdlp1Y3AWFsls3eBFSkrjm5NxnDqTzCuWhdZUWvFJF3uWgt2AnEL3H45gxwcTqCzP7UkmElPQua4KW+6rEn9Pk2eb1/+FumrjxWfhJPN6rDjRs1C1aDFMuwEqOZvfCJoSOUtm6HKYmMXtsmJsUsFTb4dUixZDj656bkSIzbd1s/DW80Q7H/RRSQK++zWOIyfiIvnMwP+flIDjexagzqfdBV2hA0MprH5+lLKbvFRAhvNJxDHHNZWnLcsT15nw52NUm++9w4NXHqtWrXPobv2uA5MiIwsRyXDZctOWuxy89eZFMhxevN7giCSSMRvDGLXZzK/CyTA2KYsRpKOURzROR1GBOOkL/nw6SSETUy1zaIT2/pHAqbNJcfqYgUWuu70cP+6tx7E3F4jxw7v1eHxtJaapEhQChwzPx8dzNhqhF/+WMBKSTZ8+MmkJUAlqrLOjbbFDjCUBu6iJUuFOFdufMCO00ASyU4icuSjh6MkYDv80t2UyNSLF4KCE7xtIimM2E8MYNQsnTm9/Ak++FcJL+yZUa/HwF+87l6IDY/52lCx05jBIixDgVq5U2JNeala4dcykZKHMTGnhV9VQAtwEtTU6RHnLRCOUaxh/+GrBCdi2WFtyNEKXX+dEK31Q0im6/wUyOUmvhmuEti1xYlmTE8mr4FU+grnbWlSrPes1QpmKcjKnZ87rfHCY8PnOg5uKWSRuMlQ7DzPw52+53okVy8pUyxy6Qnc9Wi1OpnxZzCIb/DYRLjc1O7G0iWqVit9L9hYnbmx24OZWZ16x7BS+bLdf61Qt8zFs817+cAI9n0dQRQ2tERMRBe9tqcGqjnLVYkztmgtYWGt8LnNs8o6cPdigWuZjqGLrei/iybRuJ5MJ956lwr4aomv0oRf9qkVLzqvI6cEU1m4fFTWST4xsOKaWtzjQVO/IWdKcdisOHYvo3uN5+XA0jYdXV2DHAz7VqiWnUOaz41E8805IdOp6PQCLNVN3jR428LW5qd6Oj3b66ZJnfL/KK5TZ82kY23sm0EBlo5A+NRf8BCVOXRI3Qf37G3R3LBNTQpnvf4ujsztIDXEaHrdhaJuC455XbaR28MjugGrNjWmhTN+5BLo/nsKXvTH4fdaCvcsrhaMzV+OuR7y4Z6VHfSc/BQlluIwcPRXHE90h8QzJV8mdDldAmox+iDCmwbNyReBXHnzvH59SsG1jFTatqUKgxjge9ShYaDZPU6INXpZEm8dPVnjw07sKt0XUYL7f81bv3lyDFuqKiqVkoZlcGpNxYSQlrr2L/HaRzcU+9cvmigr99wD+AWcAYQB6puA5AAAAAElFTkSuQmCC" alt="StatusIcon info icon example"></p> <h2 id="status-icon-with-warning-status"><a href="#status-icon-with-warning-status" class="header-anchor">#</a> Status icon with warning status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>status-icon</span>
<span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>warning<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
</code></pre></div><p><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAIAAAAnX375AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAQPSURBVFhHvZdfTBxFHMdnZvd2j+M4/hRtU4xKJXDEpvBiamKbNjE10Zj6atPHmj6Aib40fZIno/jsn5g04cGQ+u9BTTQanvzTNvWlqYoE1BgBoQWEE7jb278z/mZnbuG4ub3FFj7Z3M7vl5357u83v52Zw4wxtL8Qed9HdhFl+c9L/voP0CW8KtBy6tCFdNfL0kxAA0kWbLpL46WZIUQRrpcRhsQYuSdvaek+rGVCb13iJJ2F9+zZkcBaxSnp4dFti1AQDcAcpHc8nu5+wzhwVrpUqCWpt1L+Y9hd/BRp9YNTwQL+Tkbn2eajX0hXDQrJwJrZuJnn0RCEa2JqCIzHfJTqPJUd+FbZe2cIgTW1fiPP3f9LD4BeWEfeP98Vb5+UrmqqJIPSdPH2CegAyaynx4OoXPWAviSFvNVrmz+dkq5tVEk6f79J7UJtgURwGQhCa8LExMSIUQXCWL+3ps5Ju8KWpLvycXn2A14vMfmkSG893XbCajtp547PMk+6lfAMa8grfB0Ub0lXyJakNfUiMWP1BNQWd+atiEYMMEGBve4svCvtECnpLV+lvmjeZyC99vwYdRelHUmW59+KKZl7gY+Jkbs8Lm0hSe155P8bUzX3CARanr4sDSHprnwUlOb2TnIHXJJRD8p9L7IqgIEZ1FHpV2FyScwR5p6BYWX4TDRl+ew1EFFQ/Fm090UyTCH1lkNjfyTDdVEzHwkNUT6wdsaultVU3jLauBMA42u5p0Sb98dIg/JJpMofs5m/QZ1Fav8lMtYQvhcwZB6+KEy+RfsbPxYnn2VeIUndMgqra9gifIdKAgTDXNRxRsbEo9Rzx4n5KOwSSYB1EVZ/fiXPK4P9p1e2o4nRs4PRQa0hPFCf/yZBhJgdmJB2JJnpG4vf/CLgQEUy3ebDw8R8gB+uGgIhtvdjrUOakSSQ6RuBd48HIgO9lsGbmZ53mvMfYqM1PlYeoo+Mw0NYb5Gu7ZLGQ68SAzdIF4NZ7CLGg9DU259Od70SUwF8migyDj6z4yy/JUn09uzAdf4ZxKhCSVdSASN6a99sG0AFRs39n8h2hZ3nWGfpaumX8/CVKz8YeJbouRQcxolJ3bvu0lfquoV8wo+DsseuGIdeks4KiqOzPfe69dtr4mhZi0gXHzI8TSkAPShpiprzb5uqv0fqPwje2kRp8jnmByC8K2AwSLyeyzd1j6Y6X5DeatSSACxJzvyovfA5MXhAQMzaJMcI9cyu85ne97GWDV0K6koKvNUvrelzgV2USQZVIR+mlgO3sMW/16b23BPTop5jaCApCJwFa/J5pGWYX6Dl31nggwBMJE5lSfoIJmmSfiyTH8fKya8hkWQECyyvMMHcO8xfw6mDpKlHbztdP99qdid5H0DoP4bpoyBCzuShAAAAAElFTkSuQmCC" alt="StatusIcon warning icon example"></p> <h2 id="status-icon-with-danger-status"><a href="#status-icon-with-danger-status" class="header-anchor">#</a> Status icon with danger status</h2> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>status-icon</span>
<span class="token attr-name">:status</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>danger<span class="token punctuation">"</span></span>
<span class="token punctuation">/></span></span>
</code></pre></div><p><img src="data:image/png;base64,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" alt="StatusIcon danger icon example"></p> <h3 id="example-of-appheader-with-status-icon"><a href="#example-of-appheader-with-status-icon" class="header-anchor">#</a> Example of AppHeader with status icon</h3> <p><img src="/webui-vue/assets/img/appHeaderWithStatusIcon.8a62f412.png" alt="AppHeader with status icon example"></p> <h3 id="example-of-event-logs-with-status-icon"><a href="#example-of-event-logs-with-status-icon" class="header-anchor">#</a> Example of Event logs with status icon</h3> <p><img src="/webui-vue/assets/img/eventLogsWithSatusIcon.52c6d53a.png" alt="EventLogs with status icon example"></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/webui-vue/guide/components/page-title/" class="prev">
Page title
</a></span> <span class="next"><a href="/webui-vue/guide/components/table/">
Table
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/webui-vue/assets/js/app.6e5ae7e9.js" defer></script><script src="/webui-vue/assets/js/2.3066748c.js" defer></script><script src="/webui-vue/assets/js/4.e088be67.js" defer></script>
</body>
</html>
|
