dist directory
This commit is contained in:
125
docs/.vitepress/dist/assets/components_image.md.e097f963.js
vendored
Normal file
125
docs/.vitepress/dist/assets/components_image.md.e097f963.js
vendored
Normal file
@@ -0,0 +1,125 @@
|
||||
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as y,o as a,c as i,k as E,n as r,t as m,b as e,l as o,H as p,Q as t}from"./chunks/framework.3f630664.js";const g=["src","alt"],u=["src","alt"],c=y({__name:"FwbImg",props:{caption:{default:""},src:{default:""},size:{default:"max-w-full"},alt:{default:""},imgClass:{default:"h-auto"},alignment:{default:""},captionClass:{default:"mt-2 text-sm text-center text-gray-500 dark:text-gray-400"}},setup(n){return(s,l)=>s.caption?(a(),i("figure",{key:0,class:r(s.size)},[E("img",{src:s.src,alt:s.alt,class:r([s.size,s.alignment,s.imgClass])},null,10,g),E("figcaption",{class:r(s.captionClass)},m(s.caption),3)],2)):(a(),i("img",{key:1,src:s.src,alt:s.alt,class:r([s.size,s.alignment,s.imgClass])},null,10,u))}}),d={__name:"FwbImgExample",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",src:"https://flowbite-svelte.com/images/examples/image-1.jpg"}))}},F={__name:"FwbImgExampleCaption",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",caption:"flowbite-vue",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},h={__name:"FwbImgExampleSize",setup(n){return(s,l)=>(a(),e(o(c),{alt:"flowbite-vue",size:"max-w-md",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},_={__name:"FwbImgExampleAlign",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vue",size:"max-w-md",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},b={__name:"FwbImgExampleGrayscale",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vuw","img-class":"rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0",size:"max-w-lg",src:"https://flowbite-svelte.com/images/examples/content-gallery-3.png"}))}},f={__name:"FwbImgExampleCustom",setup(n){return(s,l)=>(a(),e(o(c),{alignment:"mx-auto",alt:"flowbite-vue","img-class":"rounded-lg border-[1px]",size:"max-w-lg",src:"https://flowbite-svelte.com/images/examples/image-1@2x.jpg"}))}},w=t(`<h1 id="vue-images-flowbite" tabindex="-1">Vue Images - Flowbite <a class="header-anchor" href="#vue-images-flowbite" aria-label="Permalink to "Vue Images - Flowbite""></a></h1><h4 id="the-image-component-can-be-used-to-embed-images-inside-the-web-page-in-articles-and-sections-based-on-multiple-styles-sizes-layouts-and-hover-animations" tabindex="-1">The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations <a class="header-anchor" href="#the-image-component-can-be-used-to-embed-images-inside-the-web-page-in-articles-and-sections-based-on-multiple-styles-sizes-layouts-and-hover-animations" aria-label="Permalink to "The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations""></a></h4><h2 id="default-image" tabindex="-1">Default image <a class="header-anchor" href="#default-image" aria-label="Permalink to "Default image""></a></h2><p>Use this example to show the a responsive image that won’t grow beyond the maximum original width.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-img</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"/images/examples/image.png"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> /></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbImg } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-img</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"/images/examples/image.png"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> /></span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbImg } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div>`,5),v=t(`<h2 id="image-caption" tabindex="-1">Image caption <a class="header-anchor" href="#image-caption" aria-label="Permalink to "Image caption""></a></h2><p>This example can be used to add a caption for the image often used inside articles. Use <code>caption-class</code> to override the cation.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-img</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">caption</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"/images/examples/image.png"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> /></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbImg } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-img</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">caption</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"/images/examples/image.png"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> /></span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbImg } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div>`,3),q=t(`<h2 id="sizes" tabindex="-1">Sizes <a class="header-anchor" href="#sizes" aria-label="Permalink to "Sizes""></a></h2><p>Set the size of the image using the <code>w-size</code> and <code>h-size</code> or <code>max-w-size</code> utility classes from Tailwind CSS to set the width and height of the element.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-img</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"max-w-md"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"/images/examples/image.png"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> /></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbImg } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-img</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"max-w-md"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"/images/examples/image.png"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> /></span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbImg } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div>`,3),C=t(`<h2 id="alignment" tabindex="-1">Alignment <a class="header-anchor" href="#alignment" aria-label="Permalink to "Alignment""></a></h2><p>Align the image component to the center or right side of the document page using <code>mx-auto</code> and <code>ml-auto</code> margin styles.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-img</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alignment</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"mx-auto"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"max-w-md"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"/images/examples/image.png"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> /></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbImg } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-img</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alignment</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"mx-auto"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"max-w-md"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"/images/examples/image.png"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> /></span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbImg } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div>`,3),A=t(`<h2 id="grayscale" tabindex="-1">Grayscale <a class="header-anchor" href="#grayscale" aria-label="Permalink to "Grayscale""></a></h2><p>Use the filter option and apply a grayscale to the image element using the grayscale class.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-img</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img-class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"max-w-lg"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"/images/examples/image.png"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> /></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbImg } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-img</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img-class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"rounded-lg transition-all duration-300 cursor-pointer filter grayscale hover:grayscale-0"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"max-w-lg"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"/images/examples/image.png"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> /></span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbImg } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div>`,3),x=t(`<h2 id="custom-classes" tabindex="-1">Custom classes <a class="header-anchor" href="#custom-classes" aria-label="Permalink to "Custom classes""></a></h2><p>Use the <code>img-class</code> prop to apply tailwind classes.</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki github-dark vp-code-dark"><code><span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> <</span><span style="color:#85E89D;">fwb-img</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">alt</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">img-class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"rounded-lg border-[1px]"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">size</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"max-w-lg"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">src</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">"/images/examples/image.png"</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"> /></span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"><</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbImg } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">'flowbite-vue'</span></span>
|
||||
<span class="line"><span style="color:#E1E4E8;"></</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">></span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#24292E;"> <</span><span style="color:#22863A;">fwb-img</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">alt</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"flowbite-vue"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">img-class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"rounded-lg border-[1px]"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">size</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"max-w-lg"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> </span><span style="color:#6F42C1;">src</span><span style="color:#24292E;">=</span><span style="color:#032F62;">"/images/examples/image.png"</span></span>
|
||||
<span class="line"><span style="color:#24292E;"> /></span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">template</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#24292E;"><</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">></span></span>
|
||||
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbImg } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">'flowbite-vue'</span></span>
|
||||
<span class="line"><span style="color:#24292E;"></</span><span style="color:#22863A;">script</span><span style="color:#24292E;">></span></span></code></pre></div>`,3),k=JSON.parse('{"title":"Vue Images - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/image.md","filePath":"components/image.md"}'),B={name:"components/image.md"},I=Object.assign(B,{setup(n){return(s,l)=>(a(),i("div",null,[w,p(d),v,p(F),q,p(h),C,p(_),A,p(b),x,p(f)]))}});export{k as __pageData,I as default};
|
||||
Reference in New Issue
Block a user