jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Files
main
flowbite-vue/docs/.vitepress/dist/assets/components_heading.md.e8348a42.js
Jaroslav Drzik a27c84b7a9 dist directory
2024-03-12 05:28:28 +01:00

98 lines
29 KiB
JavaScript
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
import{t as h}from"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{d as u,Z as _,o as p,b as e,w as o,r as m,L as b,l,I as f,a as c,c as F,H as t,Q as r}from"./chunks/framework.3f630664.js";const E=u({inheritAttrs:!1,__name:"FwbHeading",props:{tag:{default:"h1"},color:{default:"text-gray-900 dark:text-white"},customSize:{default:""}},setup(a){const s=a,n={h1:"text-5xl font-extrabold",h2:"text-4xl font-bold",h3:"text-3xl font-bold",h4:"text-2xl font-bold",h5:"text-xl font-bold",h6:"text-lg font-bold"},y=_(),d=h("w-full",n[s.tag],s.color,s.customSize,y.class),g=s.tag;return(i,R)=>(p(),e(f(l(g)),b(i.$attrs,{class:l(d)}),{default:o(()=>[m(i.$slots,"default")]),_:3},16,["class"]))}}),v={__name:"FwbHExampleLevel1",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h1"},{default:o(()=>[c(" Heading 1 ")]),_:1}))}},w={__name:"FwbHExampleLevel2",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h2"},{default:o(()=>[c(" Heading 2 ")]),_:1}))}},A={__name:"FwbHExampleLevel3",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h3"},{default:o(()=>[c(" Heading 3 ")]),_:1}))}},H={__name:"FwbHExampleLevel4",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h4"},{default:o(()=>[c(" Heading 4 ")]),_:1}))}},C={__name:"FwbHExampleLevel5",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h5"},{default:o(()=>[c(" Heading 5 ")]),_:1}))}},D={__name:"FwbHExampleLevel6",setup(a){return(s,n)=>(p(),e(l(E),{tag:"h6"},{default:o(()=>[c(" Heading 6 ")]),_:1}))}},x={__name:"FwbHExampleColor",setup(a){return(s,n)=>(p(),e(l(E),{color:"text-green-400"},{default:o(()=>[c(" Green heading ")]),_:1}))}},q={__name:"FwbHExampleCustom",setup(a){return(s,n)=>(p(),e(l(E),{class:"underline italic !text-xl"},{default:o(()=>[c(" Custom heading ")]),_:1}))}},T=r(`<h1 id="vue-heading-flowbite" tabindex="-1">Vue Heading - Flowbite <a class="header-anchor" href="#vue-heading-flowbite" aria-label="Permalink to &quot;Vue Heading - Flowbite&quot;">​</a></h1><h4 id="the-heading-component-defines-six-levels-of-title-elements-from-h1-to-h6-that-are-used-as-titles-and-subtitles-on-a-web-page-based-on-multiple-styles-and-layouts" tabindex="-1">The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts <a class="header-anchor" href="#the-heading-component-defines-six-levels-of-title-elements-from-h1-to-h6-that-are-used-as-titles-and-subtitles-on-a-web-page-based-on-multiple-styles-and-layouts" aria-label="Permalink to &quot;The heading component defines six levels of title elements from H1 to H6 that are used as titles and subtitles on a web page based on multiple styles and layouts&quot;">​</a></h4><h2 id="heading-one-h1" tabindex="-1">Heading one (H1) <a class="header-anchor" href="#heading-one-h1" aria-label="Permalink to &quot;Heading one (H1)&quot;">​</a></h2><p>Use the <code>tag=&quot;h1&quot;</code> as the most important text element to indicate the title of your web page.</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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h1&quot;</span><span style="color:#E1E4E8;">&gt;Heading 1&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h1&quot;</span><span style="color:#24292E;">&gt;Heading 1&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,5),k=r(`<h2 id="heading-two-h2" tabindex="-1">Heading two (H2) <a class="header-anchor" href="#heading-two-h2" aria-label="Permalink to &quot;Heading two (H2)&quot;">​</a></h2><p>The H2 tag can be used as subtitles of the page’s sections.</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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h2&quot;</span><span style="color:#E1E4E8;">&gt;Heading 2&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h2&quot;</span><span style="color:#24292E;">&gt;Heading 2&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),B=r(`<h2 id="heading-three-h3" tabindex="-1">Heading three (H3) <a class="header-anchor" href="#heading-three-h3" aria-label="Permalink to &quot;Heading three (H3)&quot;">​</a></h2><p>Use the H3 tags inside sections that already have a H2 available.</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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h3&quot;</span><span style="color:#E1E4E8;">&gt;Heading 3&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h3&quot;</span><span style="color:#24292E;">&gt;Heading 3&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),S=r(`<h2 id="heading-four-h4" tabindex="-1">Heading four (H4) <a class="header-anchor" href="#heading-four-h4" aria-label="Permalink to &quot;Heading four (H4)&quot;">​</a></h2><p>The H4 can be generally used after H2 and H3 tags are already present and you need a more in-depth hierarchy.</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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h4&quot;</span><span style="color:#E1E4E8;">&gt;Heading 4&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h4&quot;</span><span style="color:#24292E;">&gt;Heading 4&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),P=r(`<h2 id="heading-five-h5" tabindex="-1">Heading five (H5) <a class="header-anchor" href="#heading-five-h5" aria-label="Permalink to &quot;Heading five (H5)&quot;">​</a></h2><p>The H5 tag is most often used in longer articles with other heading already available or in sidebars.</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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h5&quot;</span><span style="color:#E1E4E8;">&gt;Heading 5&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h5&quot;</span><span style="color:#24292E;">&gt;Heading 5&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),V=r(`<h2 id="heading-six-h6" tabindex="-1">Heading six (H6) <a class="header-anchor" href="#heading-six-h6" aria-label="Permalink to &quot;Heading six (H6)&quot;">​</a></h2><p>Using the H6 tag is quite rare because it means that you’ve already used all heading from H1 to H5, but you can still use it if you have a very complex article with lots of headings.</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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">tag</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;h6&quot;</span><span style="color:#E1E4E8;">&gt;Heading 6&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">tag</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;h6&quot;</span><span style="color:#24292E;">&gt;Heading 6&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),I=r(`<h2 id="color" tabindex="-1">Color <a class="header-anchor" href="#color" aria-label="Permalink to &quot;Color&quot;">​</a></h2><p>Use the <code>color</code> prop to set the text color.</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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;text-green-400&quot;</span><span style="color:#E1E4E8;">&gt;Green eading&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;text-green-400&quot;</span><span style="color:#24292E;">&gt;Green eading&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),N=r(`<h2 id="custom-classes" tabindex="-1">Custom classes <a class="header-anchor" href="#custom-classes" aria-label="Permalink to &quot;Custom classes&quot;">​</a></h2><p>Use the <code>class</code> attribute to apply the 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;">&lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;!text-xl italic underline&quot;</span><span style="color:#E1E4E8;">&gt;Custom heading&lt;/</span><span style="color:#85E89D;">fwb-heading</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#E1E4E8;">&lt;</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">setup</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#F97583;">import</span><span style="color:#E1E4E8;"> { FwbHeading } </span><span style="color:#F97583;">from</span><span style="color:#E1E4E8;"> </span><span style="color:#9ECBFF;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#E1E4E8;">&lt;/</span><span style="color:#85E89D;">script</span><span style="color:#E1E4E8;">&gt;</span></span></code></pre><pre class="shiki github-light vp-code-light"><code><span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;!text-xl italic underline&quot;</span><span style="color:#24292E;">&gt;Custom heading&lt;/</span><span style="color:#22863A;">fwb-heading</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">template</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#24292E;">&lt;</span><span style="color:#22863A;">script</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">setup</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#D73A49;">import</span><span style="color:#24292E;"> { FwbHeading } </span><span style="color:#D73A49;">from</span><span style="color:#24292E;"> </span><span style="color:#032F62;">&#39;flowbite-vue&#39;</span></span>
<span class="line"><span style="color:#24292E;">&lt;/</span><span style="color:#22863A;">script</span><span style="color:#24292E;">&gt;</span></span></code></pre></div>`,3),z=JSON.parse('{"title":"Vue Heading - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/heading.md","filePath":"components/heading.md"}'),$={name:"components/heading.md"},G=Object.assign($,{setup(a){return(s,n)=>(p(),F("div",null,[T,t(v),k,t(w),B,t(A),S,t(H),P,t(C),V,t(D),I,t(x),N,t(q)]))}});export{z as __pageData,G as default};
Reference in New Issue View Git Blame Copy Permalink