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_button-group.md.39681d07.js
Jaroslav Drzik a27c84b7a9 dist directory
2024-03-12 05:28:28 +01:00

60 lines
19 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.
import"./chunks/FwbRange.vue_vue_type_style_index_0_scoped_fadec9c5_lang.66ff4c69.js";import{_ as l}from"./chunks/FwbButton.vue_vue_type_script_setup_true_lang.47b4329e.js";import{_ as i,o as p,c as e,r as b,H as s,w as n,l as a,a as o,k as y,Q as r}from"./chunks/framework.3f630664.js";import"./chunks/useMergeClasses.5cec3a4e.js";import"./chunks/FwbSpinner.vue_vue_type_script_setup_true_lang.40262df1.js";const g={},d={class:"btn-group inline-flex rounded-md shadow-sm",role:"group"};function f(t,c){return p(),e("div",d,[b(t.$slots,"default")])}const u=i(g,[["render",f]]),_={class:"vp-raw"},w={__name:"FwbButtonGroupExample",setup(t){return(c,E)=>(p(),e("div",_,[s(a(u),null,{default:n(()=>[s(a(l),null,{default:n(()=>[o("Button Default")]),_:1}),s(a(l),{color:"purple"},{default:n(()=>[o(" Button Purple ")]),_:1}),s(a(l),{color:"alternative"},{default:n(()=>[o(" Button Alternative ")]),_:1}),s(a(l),{color:"red"},{default:n(()=>[o(" Button Red ")]),_:1})]),_:1})]))}},F={class:"vp-raw"},h=y("svg",{class:"w-5 h-5",fill:"currentColor",viewBox:"0 0 20 20",xmlns:"http://www.w3.org/2000/svg"},[y("path",{"fill-rule":"evenodd",d:"M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z","clip-rule":"evenodd"})],-1),B={__name:"FwbButtonGroupExampleIcon",setup(t){return(c,E)=>(p(),e("div",F,[s(a(u),null,{default:n(()=>[s(a(l),{outline:""},{default:n(()=>[o(" Button 1 ")]),_:1}),s(a(l),{outline:""},{default:n(()=>[o(" Button 2 ")]),_:1}),s(a(l),{outline:""},{default:n(()=>[o(" Button 3 ")]),_:1}),s(a(l),{outline:""},{suffix:n(()=>[h]),default:n(()=>[o(" Button 4 ")]),_:1})]),_:1})]))}},m=r('<h1 id="vue-button-group-flowbite" tabindex="-1">Vue Button Group - Flowbite <a class="header-anchor" href="#vue-button-group-flowbite" aria-label="Permalink to &quot;Vue Button Group - Flowbite&quot;">​</a></h1><h4 id="button-groups-are-a-tailwind-css-powered-set-of-buttons-sticked-together-in-a-horizontal-line" tabindex="-1">Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line <a class="header-anchor" href="#button-groups-are-a-tailwind-css-powered-set-of-buttons-sticked-together-in-a-horizontal-line" aria-label="Permalink to &quot;Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line&quot;">​</a></h4><hr><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>Original reference: <a href="https://flowbite.com/docs/components/button-group/" target="_blank" rel="noreferrer">https://flowbite.com/docs/components/button-group/</a></p></div><p>The button group component from Flowbite can be used to stack together multiple buttons and links inside a single element.</p><h2 id="basic-example" tabindex="-1">Basic example <a class="header-anchor" href="#basic-example" aria-label="Permalink to &quot;Basic example&quot;">​</a></h2>',6),v=r(`<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-button-group</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;Button Default&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;purple&quot;</span><span style="color:#E1E4E8;">&gt;Button Purple&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;alternative&quot;</span><span style="color:#E1E4E8;">&gt;Button Alternative&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">color</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;red&quot;</span><span style="color:#E1E4E8;">&gt;Button Red&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-button-group</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;"> { FwbButtonGroup, FwbButton } </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-button-group</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;Button Default&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;purple&quot;</span><span style="color:#24292E;">&gt;Button Purple&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;alternative&quot;</span><span style="color:#24292E;">&gt;Button Alternative&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">color</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;red&quot;</span><span style="color:#24292E;">&gt;Button Red&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-button-group</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;"> { FwbButtonGroup, FwbButton } </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><h2 id="buttons-with-icons" tabindex="-1">Buttons with icons <a class="header-anchor" href="#buttons-with-icons" aria-label="Permalink to &quot;Buttons with icons&quot;">​</a></h2>`,2),A=r(`<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-button-group</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">&gt;Button 1&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">&gt;Button 2&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">&gt;Button 3&lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">outline</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> Button 4</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">template</span><span style="color:#E1E4E8;"> #</span><span style="color:#B392F0;">suffix</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">svg</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">class</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;w-5 h-5&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;currentColor&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">viewBox</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;0 0 20 20&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">xmlns</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;</span><span style="color:#85E89D;">path</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">clip-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;evenodd&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">d</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z&quot;</span><span style="color:#E1E4E8;"> </span><span style="color:#B392F0;">fill-rule</span><span style="color:#E1E4E8;">=</span><span style="color:#9ECBFF;">&quot;evenodd&quot;</span><span style="color:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">svg</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 style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-button</span><span style="color:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="color:#E1E4E8;"> &lt;/</span><span style="color:#85E89D;">fwb-button-group</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;"> { FwbButtonGroup, FwbButton } </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-button-group</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">&gt;Button 1&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">&gt;Button 2&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">&gt;Button 3&lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">outline</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> Button 4</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">template</span><span style="color:#24292E;"> #</span><span style="color:#6F42C1;">suffix</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">svg</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">class</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;w-5 h-5&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;currentColor&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">viewBox</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;0 0 20 20&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">xmlns</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;http://www.w3.org/2000/svg&quot;</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;</span><span style="color:#22863A;">path</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">clip-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;evenodd&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">d</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z&quot;</span><span style="color:#24292E;"> </span><span style="color:#6F42C1;">fill-rule</span><span style="color:#24292E;">=</span><span style="color:#032F62;">&quot;evenodd&quot;</span><span style="color:#24292E;"> /&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">svg</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 style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-button</span><span style="color:#24292E;">&gt;</span></span>
<span class="line"><span style="color:#24292E;"> &lt;/</span><span style="color:#22863A;">fwb-button-group</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;"> { FwbButtonGroup, FwbButton } </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>`,1),P=JSON.parse('{"title":"Vue Button Group - Flowbite","description":"","frontmatter":{},"headers":[],"relativePath":"components/button-group.md","filePath":"components/button-group.md"}'),q={name:"components/button-group.md"},S=Object.assign(q,{setup(t){return(c,E)=>(p(),e("div",null,[m,s(w),v,s(B),A]))}});export{P as __pageData,S as default};
Reference in New Issue View Git Blame Copy Permalink