@vue-interface/thumbnail-list
Version:
A Vue thumbnail list component.
86 lines (83 loc) • 14.8 kB
HTML
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tailwindcss | Vue Interface</title>
<meta name="generator" content="VuePress 1.5.0">
<meta name="description" content="A collection of standalone UI components built for Vue.">
<link rel="preload" href="/assets/css/0.styles.275ee968.css" as="style"><link rel="preload" href="/assets/js/app.7ed065d3.js" as="script"><link rel="preload" href="/assets/js/2.f3d148c3.js" as="script"><link rel="preload" href="/assets/js/11.97ab3884.js" as="script"><link rel="prefetch" href="/assets/js/10.5d93d289.js"><link rel="prefetch" href="/assets/js/3.81681fff.js"><link rel="prefetch" href="/assets/js/4.82fa7382.js"><link rel="prefetch" href="/assets/js/5.3dae6ad4.js"><link rel="prefetch" href="/assets/js/6.6a04f815.js"><link rel="prefetch" href="/assets/js/7.c033cb49.js"><link rel="prefetch" href="/assets/js/8.6d6eb599.js"><link rel="prefetch" href="/assets/js/9.eaefe866.js">
<link rel="stylesheet" href="/assets/css/0.styles.275ee968.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"><!----> <span class="site-name">Vue Interface</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!----> <ul class="sidebar-links"><li><a href="/" class="sidebar-link">Alert</a></li><li><a href="/options.html" class="sidebar-link">Options</a></li><li><a href="/tailwindcss.html" class="active sidebar-link">Tailwindcss</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/tailwindcss.html#installation" class="sidebar-link">Installation</a></li><li class="sidebar-sub-header"><a href="/tailwindcss.html#theme" class="sidebar-link">Theme</a></li><li class="sidebar-sub-header"><a href="/tailwindcss.html#variations" class="sidebar-link">Variations</a></li><li class="sidebar-sub-header"><a href="/tailwindcss.html#color-api" class="sidebar-link">Color API</a></li></ul></li><li><a href="/examples/" class="sidebar-link">Examples</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="tailwindcss"><a href="#tailwindcss" class="header-anchor">#</a> Tailwindcss</h1> <p></p><div class="table-of-contents"><ul><li><a href="#installation">Installation</a></li><li><a href="#theme">Theme</a></li><li><a href="#variations">Variations</a></li><li><a href="#color-api">Color API</a></li></ul></div><p></p> <h2 id="installation"><a href="#installation" class="header-anchor">#</a> Installation</h2> <p>If you want to include Alerts in your Tailwindcss build, then intall the plugin.</p> <div class="language- extra-class"><pre><code>module.exports = {
plugins: [
require('@vue-interface/alert/tailwind')
]
};
</code></pre></div><h2 id="theme"><a href="#theme" class="header-anchor">#</a> Theme</h2> <p><em>These are the default values. Only override what you need.</em></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> Color <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'color'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
theme<span class="token operator">:</span> <span class="token punctuation">{</span>
alert<span class="token operator">:</span> <span class="token punctuation">{</span>
borderRadius<span class="token operator">:</span> <span class="token string">'.25rem'</span><span class="token punctuation">,</span>
borderStyle<span class="token operator">:</span> <span class="token string">'solid'</span><span class="token punctuation">,</span>
borderWidth<span class="token operator">:</span> <span class="token string">'1px'</span><span class="token punctuation">,</span>
colors<span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token operator">...</span><span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
primary<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.blue.500'</span><span class="token punctuation">,</span> <span class="token string">'#9E9E9E'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
secondary<span class="token operator">:</span> <span class="token function">Color</span><span class="token punctuation">(</span><span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.gray.600'</span><span class="token punctuation">,</span> <span class="token string">'#718096'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">lighten</span><span class="token punctuation">(</span><span class="token number">.05</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
danger<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.red.600'</span><span class="token punctuation">,</span> <span class="token string">'#E53E3E'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
success<span class="token operator">:</span> <span class="token function">Color</span><span class="token punctuation">(</span><span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.green.500'</span><span class="token punctuation">,</span> <span class="token string">'#48BB78'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">lighten</span><span class="token punctuation">(</span><span class="token number">.10</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">hex</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
warning<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.orange.500'</span><span class="token punctuation">,</span> <span class="token string">'#ED8936'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
info<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.teal.400'</span><span class="token punctuation">,</span> <span class="token string">'#68D391'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
dark<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.gray.800'</span><span class="token punctuation">,</span> <span class="token string">'#2D3748'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
light<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.gray.100'</span><span class="token punctuation">,</span> <span class="token string">'#F7FAFC'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
muted<span class="token operator">:</span> <span class="token function">theme</span><span class="token punctuation">(</span><span class="token string">'colors.white'</span><span class="token punctuation">,</span> <span class="token string">'#FFF'</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
close<span class="token operator">:</span> <span class="token punctuation">{</span>
position<span class="token operator">:</span> <span class="token string">'absolute'</span><span class="token punctuation">,</span>
top<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
right<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
background<span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
border<span class="token operator">:</span> <span class="token string">'none'</span><span class="token punctuation">,</span>
cursor<span class="token operator">:</span> <span class="token string">'pointer'</span><span class="token punctuation">,</span>
color<span class="token operator">:</span> <span class="token string">'inherit'</span><span class="token punctuation">,</span>
padding<span class="token operator">:</span> <span class="token string">'.66rem'</span><span class="token punctuation">,</span>
lineHeight<span class="token operator">:</span> <span class="token string">'1rem'</span><span class="token punctuation">,</span>
fontSize<span class="token operator">:</span> <span class="token string">'1.5rem'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
dismissable<span class="token operator">:</span> <span class="token punctuation">{</span>
padding<span class="token operator">:</span> <span class="token string">'0 0 0 3em'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
fade<span class="token operator">:</span> <span class="token string">'opacity .15s linear'</span><span class="token punctuation">,</span>
header<span class="token operator">:</span> <span class="token punctuation">{</span>
display<span class="token operator">:</span> <span class="token string">'block'</span><span class="token punctuation">,</span>
fontSize<span class="token operator">:</span> <span class="token string">'1.25rem'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
lineHeight<span class="token operator">:</span> <span class="token string">'1.5rem'</span><span class="token punctuation">,</span>
link<span class="token operator">:</span> <span class="token punctuation">{</span>
color<span class="token operator">:</span> <span class="token string">'currentColor'</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
position<span class="token operator">:</span> <span class="token string">'relative'</span><span class="token punctuation">,</span>
px<span class="token operator">:</span> <span class="token string">'.5rem'</span><span class="token punctuation">,</span>
py<span class="token operator">:</span> <span class="token string">'1rem'</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="variations"><a href="#variations" class="header-anchor">#</a> Variations</h2> <p>The colors variations allow contextual colors for alerts. These are variation
names are taken from Bootstrap 4 and can be used for convenience, or
backwards compatibility. Any color name from your theme can be used or assigned
to a contextual variation.</p> <p><em>Default variations:</em></p> <p><code>primary</code>, <code>secondary</code>, <code>danger</code>, <code>success</code>, <code>warning</code>, <code>info</code>, <code>dark</code>,
<code>light</code>, <code>muted</code></p> <h2 id="color-api"><a href="#color-api" class="header-anchor">#</a> Color API</h2> <p><code>color</code> is used to manipulate colors dynamically. <a href="https://github.com/Qix-/color#readme" target="_blank" rel="noopener noreferrer">API Docs<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></p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/options.html" class="prev">
Options
</a></span> <span class="next"><a href="/examples/">
Examples
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/assets/js/app.7ed065d3.js" defer></script><script src="/assets/js/2.f3d148c3.js" defer></script><script src="/assets/js/11.97ab3884.js" defer></script>
</body>
</html>