1"use strict";(self.webpackChunkionic_docs=self.webpackChunkionic_docs||[]).push([["15350"],{11800(e,t,n){n.r(t),n.d(t,{metadata:()=>s,default:()=>R,frontMatter:()=>v,contentTitle:()=>w,toc:()=>S,assets:()=>g});var s=JSON.parse('{"id":"api/fab-list","title":"ion-fab-list","description":"The fab list component is a container for multiple fab buttons. It contains actions related to the main fab button and is flung out on click. To specify what side the buttons should appear on, set the side property to \\"start\\", \\"end\\", \\"top\\", or \\"bottom\\".","source":"@site/versioned_docs/version-v8/api/fab-list.mdx","sourceDirName":"api","slug":"/api/fab-list","permalink":"/docs/v8/api/fab-list","draft":false,"unlisted":false,"editUrl":"https://github.com/ionic-team/ionic-docs/tree/main/docs/api/fab-list.mdx","tags":[],"version":"v8","frontMatter":{"title":"ion-fab-list"},"sidebar":"api","previous":{"title":"ion-fab-button","permalink":"/docs/v8/api/fab-button"},"next":{"title":"ion-grid","permalink":"/docs/v8/api/grid"}}'),r=n(74848),i=n(28453);function o(e){let t={code:"code",h3:"h3",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(t.h3,{id:"prop-activated",children:"activated"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{}),(0,r.jsx)(t.th,{})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"Description"})}),(0,r.jsxs)(t.td,{children:["If ",(0,r.jsx)(t.code,{children:"true"}),", the fab list will show all fab buttons in the list."]})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"Attribute"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"activated"})})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"Type"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"boolean"})})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"Default"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"false"})})]})]})]}),"\n",(0,r.jsx)(t.h3,{id:"prop-side",children:"side"}),"\n",(0,r.jsxs)(t.table,{children:[(0,r.jsx)(t.thead,{children:(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.th,{}),(0,r.jsx)(t.th,{})]})}),(0,r.jsxs)(t.tbody,{children:[(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"Description"})}),(0,r.jsx)(t.td,{children:"The side the fab list will show on relative to the main fab button."})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"Attribute"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"side"})})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"Type"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:'"bottom" \uFF5C "end" \uFF5C "start" \uFF5C "top"'})})]}),(0,r.jsxs)(t.tr,{children:[(0,r.jsx)(t.td,{children:(0,r.jsx)(t.strong,{children:"Default"})}),(0,r.jsx)(t.td,{children:(0,r.jsx)(t.code,{children:"'bottom'"})})]})]})]})]})}function l(e={}){let{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(o,{...e})}):o(e)}function d(e){let t={p:"p",...(0,i.R)(),...e.components};return(0,r.jsx)(t.p,{children:"No events available for this component."})}function c(e={}){let{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(d,{...e})}):d(e)}function a(e){let t={p:"p",...(0,i.R)(),...e.components};return(0,r.jsx)(t.p,{children:"No public methods available for this component."})}function h(e={}){let{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(a,{...e})}):a(e)}function p(e){let t={p:"p",...(0,i.R)(),...e.components};return(0,r.jsx)(t.p,{children:"No CSS shadow parts available for this component."})}function x(e={}){let{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}function j(e){let t={p:"p",...(0,i.R)(),...e.components};return(0,r.jsx)(t.p,{children:"No CSS custom properties available for this component."})}function u(e={}){let{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(j,{...e})}):j(e)}function f(e){let t={p:"p",...(0,i.R)(),...e.components};return(0,r.jsx)(t.p,{children:"No slots available for this component."})}function b(e={}){let{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(f,{...e})}):f(e)}var m=n(54441);let v={title:"ion-fab-list"},w,g={},S=[{value:"Properties",id:"properties",level:2},{value:"activated",id:"prop-activated",level:3},{value:"side",id:"prop-side",level:3},{value:"Events",id:"events",level:2},{value:"Methods",id:"methods",level:2},{value:"CSS Shadow Parts",id:"css-shadow-parts",level:2},{value:"CSS Custom Properties",id:"css-custom-properties",level:2},{value:"Slots",id:"slots",level:2}];function y(e){let t={a:"a",code:"code",h2:"h2",p:"p",...(0,i.R)(),...e.components};return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(m.A,{type:"shadow"}),"\n",(0,r.jsxs)(t.p,{children:["The fab list component is a container for multiple ",(0,r.jsx)(t.a,{href:"./fab-button",children:"fab buttons"}),". It contains actions related to the main fab button and is flung out on click. To specify what side the buttons should appear on, set the ",(0,r.jsx)(t.code,{children:"side"})," property to ",(0,r.jsx)(t.code,{children:'"start"'}),", ",(0,r.jsx)(t.code,{children:'"end"'}),", ",(0,r.jsx)(t.code,{children:'"top"'}),", or ",(0,r.jsx)(t.code,{children:'"bottom"'}),"."]}),"\n",(0,r.jsxs)(t.p,{children:["For usage examples, refer to the ",(0,r.jsx)(t.a,{href:"./fab",children:"fab documentation"}),"."]}),"\n",(0,r.jsx)(t.h2,{id:"properties",children:"Properties"}),"\n",(0,r.jsx)(l,{}),"\n",(0,r.jsx)(t.h2,{id:"events",children:"Events"}),"\n",(0,r.jsx)(c,{}),"\n",(0,r.jsx)(t.h2,{id:"methods",children:"Methods"}),"\n",(0,r.jsx)(h,{}),"\n",(0,r.jsx)(t.h2,{id:"css-shadow-parts",children:"CSS Shadow Parts"}),"\n",(0,r.jsx)(x,{}),"\n",(0,r.jsx)(t.h2,{id:"css-custom-properties",children:"CSS Custom Properties"}),"\n",(0,r.jsx)(u,{}),"\n",(0,r.jsx)(t.h2,{id:"slots",children:"Slots"}),"\n",(0,r.jsx)(b,{})]})}function R(e={}){let{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,r.jsx)(t,{...e,children:(0,r.jsx)(y,{...e})}):y(e)}}
1,54441(e,t,n){n.d(t,{A:()=>l});var s=n(74848);n(96540);var r=n(34164),i=n(66497),o=n(95310);function l({type:e,...t}){let n=(0,i.Ay)(`reference/glossary#${e}`);return(0,s.jsx)(o.A,{to:n,...t,className:(0,r.A)(t.className,"encapsulation-pill","encapsulationPill_weMM"),children:e})}},28453(e,t,n){n.d(t,{R:()=>o,x:()=>l});var s=n(96540);let r={},i=s.createContext(r);function o(e){let t=s.useContext(i);return s.useMemo(function(){return"function"==typeof e?e(t):{...t,...e}},[t,e])}function l(e){let t;return t=e.disableParentContext?"function"==typeof e.components?e.components(r):e.components||r:o(e.components),s.createElement(i.Provider,{value:t},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.