diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 9be07b4..0000000 --- a/.gitignore +++ /dev/null @@ -1,4 +0,0 @@ -node_modules -dist -**/*-debug.log -.solid \ No newline at end of file diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index dcecc6a..0000000 --- a/.prettierignore +++ /dev/null @@ -1,5 +0,0 @@ -/docs/ -**/dist/ -**/node_modules/ -**/*lock.yaml -**/*.mdx \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json deleted file mode 100644 index 11f8d43..0000000 --- a/.prettierrc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "bracketSpacing": false, - "endOfLine": "crlf", - "printWidth": 100, - "tabWidth": 2, - "trailingComma": "all" -} diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index 6a51dc8..0000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "typescript.tsdk": "node_modules\\typescript\\lib", - "editor.formatOnSave": true -} diff --git a/www/public/404.html b/404.html similarity index 100% rename from www/public/404.html rename to 404.html diff --git a/CHANGELOG.md b/CHANGELOG.md deleted file mode 100644 index cd99b1e..0000000 --- a/CHANGELOG.md +++ /dev/null @@ -1,177 +0,0 @@ -## 2025-02-24 - (1.0.21) - -- [Fix: Offcanvas component doesn't unmount when dismissed. #45](https://github.com/solid-libs/solid-bootstrap/issues/45) - -## 2024-05-11 - (1.0.20) - -- [Fix: Toasts don't fire the onClose #43](https://github.com/solid-libs/solid-bootstrap/issues/43) - -## 2023-10-24 - (1.0.19) - -- [Fix: Modals don't support SSR #39](https://github.com/solid-libs/solid-bootstrap/issues/39) - -## 2023-10-11 - (1.0.18) - -- [Fix: Overlay/Popup hangs Chrome browser tab #37 (take 2)](https://github.com/solid-libs/solid-bootstrap/issues/37) - - > Note this required a breaking change for the Core Overlay component. Intead of taking a render prop for children, children is now a normal JSX.Element and the overlay properties are made available via OverlayContext. I don't expect many people were using this component directly, but if you were, you'll need to update your code. - -## 2023-10-11 - (1.0.17) - -- [Fix: Overlay/Popup hangs Chrome browser tab #37](https://github.com/solid-libs/solid-bootstrap/issues/37) - -## 2023-10-10 - (1.0.16) - -- [Fix: Overlay/Popover content is not reactive #36](https://github.com/solid-libs/solid-bootstrap/issues/36) - -## 2023-10-02 - (1.0.15) - -- [Fix: toast messages can't be changed #35](https://github.com/solid-libs/solid-bootstrap/issues/35) - -## 2023-07-11 - (1.0.14) - -- [Fix: Special pagination buttons not reactive #33](https://github.com/solid-libs/solid-bootstrap/issues/33) - -## 2022-12-22 - (1.0.13) - -- [Fix: Modal content is not reactive #26](https://github.com/solid-libs/solid-bootstrap/issues/26) -- [Fix: Modal header close button #27](https://github.com/solid-libs/solid-bootstrap/issues/27) - -## 2022-12-04 - (1.0.10) - -- [Fix: No-op transitions, as needed in Accordion `alwaysOpen` #19](https://github.com/solid-libs/solid-bootstrap/commit/e606ab2e5f067ed9f79e95d59359368d327af5c6) -- Fix various hydration issues when [used with Solid Start](https://start.solidjs.com/getting-started/what-is-solidstart). - -There are no known issues remaining when using Solid Start when using `pnpm`. There is one [outstanding issue](https://github.com/solid-libs/solid-bootstrap/issues/25) related to using npm and the Solid Start templates. - -## 2022-04-28 - (1.0.8) - -- [Feat: Support `class` attribute in addition to `className` attribute (for adding classes to components) #17](https://github.com/solid-libs/solid-bootstrap/commit/7d4055ce0bd09cc9794aa743a90a4c3d025c9639) -- [Fix: Make `x-placement` attribute reactive #16](https://github.com/solid-libs/solid-bootstrap/commit/5e10673a430fda8bfb11274b210e3d822d51d022) -- [Fix: `x-placement` attribute inherits from `Overlay`](https://github.com/solid-libs/solid-bootstrap/commit/63f3a3e8853e8fe7aabee7e1e7592d4e7303e217) -- [Feat: All submodules now have named exports in addition to default exports](https://github.com/solid-libs/solid-bootstrap/commit/11518f5a9b6ac927e2fcc091ea11d77be82b7f75) -- [Fix: React to children changes without constructing multiple times](https://github.com/solid-libs/solid-bootstrap/commit/e81432380d131859f28471f5447955a4b6c2d142) -- Various code cleanup - -## 2022-03-26 - (1.0.7) - -- [Upstream: fix: issue NavItem - do not include aria-controls if the related element is not mounted](https://github.com/react-restart/ui/commit/a81ec97dd32ade77217840a3a0f0d357959fe72f) -- [Upstream: feat(Tabs): support passing custom attributes to Tab](https://github.com/react-bootstrap/react-bootstrap/commit/6afa734cf29027cda36e188181762dca88fc48d) -- [Upstream feat: support custom breakpoint](https://github.com/react-bootstrap/react-bootstrap/commit/0910a21b7d35eb859ca9e160c4492ef41a33810e) -- resolve more typing issues with newer Solid versions - -## 2022-02-21 - (1.0.5) - -- bump dependencies and resolve typing issues with newer Solid versions - -## 2022-02-06 - (1.0.4) - -### Bug Fixes - -- [Fix: core Nav missing tablist role](https://github.com/solid-libs/solid-bootstrap/commit/46f82e9dfc8968895459a3ba5140b673a1cd1c93) - -## 2022-02-06 - (1.0.3) - -### Bug Fixes - -- [Upstream: core NavItem - do not include aria-controls if the related element is not mounted](https://github.com/solid-libs/solid-bootstrap/commit/10c789852676a779c56a0ac3d32a05d155c4ad92) -- [Fix: Tooltips do not always close #12](https://github.com/solid-libs/solid-bootstrap/commit/fa46cf68cde62a1b2a2913820d1150c9624bb0e6) - -## 2022-02-01 - (1.0.2) - -### Bug Fixes - -- [SSR - suppress event listeners on server](https://github.com/solid-libs/solid-bootstrap/commit/49f2df94a0dfac7b401f2804caa0d9f12a87e87f) - -## 2022-02-01 - (1.0.1) - -### Bug Fixes - -- [Upstream: fix dropdown close](https://github.com/solid-libs/solid-bootstrap/commit/e3b8393c153d0ea1dd1df1d05f2c42353fe0d2b3) -- [Dropdown focus on escape - 2nd attempt](https://github.com/solid-libs/solid-bootstrap/commit/852b7320b7b76593a101ec8928a4cd77de6703f9) -- [Upstream: export role from useTabPanel hook](https://github.com/solid-libs/solid-bootstrap/commit/b092a6bb9dec0206aca4d00408c4ff9bc1ddc1bf) -- [Upstream: core Button add href="#" when no href provided for anchors](https://github.com/solid-libs/solid-bootstrap/commit/6f3ba80fbcc354e2cc6f6b9997a583be4dcddc81) -- [Fix: core Button and NavItem incorrect Dynamic prop](https://github.com/solid-libs/solid-bootstrap/commit/6aa1cc04cfe700b73942c343c6fe29898a818d94) -- [Core NavItem - default to render as Button](https://github.com/solid-libs/solid-bootstrap/commit/ff7758b37cc91e641116dd9f21a12a9190a2b964) -- [Upstream: - ToggleButton: remove role="button" from label](https://github.com/solid-libs/solid-bootstrap/commit/dbe5a7df64a8fdb0e1ab351aeaeb25e8ef24e351) - -## 2022-01-23 - (1.0.0) - -### Bug Fixes - -- [Fix: Dropdown trigger not focused on Escape](https://github.com/solid-libs/solid-bootstrap/commit/13e35001731261d68cd95291fcd3f04dbe85c8e1) - -## 2022-01-08 - solid-bootstrap (0.2.7) - -### Bug Fixes - -- [Fix: Transition - not (re)showing unless on initial appear](https://github.com/solid-libs/solid-bootstrap/commit/15be5b1e493dc2005e48cbc3e7fc570b5d2f29a7) - -## 2022-01-04 - solid-bootstrap (0.2.6) - -### Bug Fixes - -- [New data-active-key not set upon initialization](https://github.com/solid-libs/solid-bootstrap/issues/7) - -## 2022-01-04 - solid-bootstrap (0.2.5) - -### New Features - -- Tabs & Nav - add data-active-key attribute - -### Bug Fixes - -- [Form.Control id prop doesn't work for checkboxes](https://github.com/solid-libs/solid-bootstrap/issues/6) - -## 2022-01-03 - solid-bootstrap (0.2.4) - -### Bug Fixes - -- [core anchor and button not responsive](https://github.com/solid-libs/solid-bootstrap/issues/5) - -## 2022-01-01 - solid-bootstrap (0.2.3) - -### Upstream changes - -- [Accordion - add new `alwaysOpen` prop](https://github.com/react-bootstrap/react-bootstrap/pull/6091) - -## 2021-12-21 - solid-bootstrap (0.2.2) - -### Upstream changes - -- [add support for iframe and differing owner documents](https://github.com/react-restart/ui/pull/38) -- [fix NavDropdown onSelect](https://github.com/react-bootstrap/react-bootstrap/pull/6151) - -## 2021-12-10 - solid-bootstrap (0.2.0) - -### BREAKING CHANGE - -Remove component default exports due to incompatibilty with SolidJS. - -Any components previously imported like this... - -``` -import Alert from 'solid-bootstrap/Alert' -``` - -...now need to be imported like this... - -``` -import { Alert } from 'solid-bootstrap' -``` - -## 2021-12-09 - solid-bootstrap (0.1.12) - -Remove external dependancy on `classnames` ([#2](https://github.com/solid-libs/solid-bootstrap/issues/2)) - -## 2021-12-02 - solid-bootstrap (0.1.3) - -### Bug Fixes - -Fix - carousel prev/next icons only show once if multiple on page - -## 2021-12-01 - solid-bootstrap (0.1.2) - -### Bug Fixes - -- **FormCheck:** fix `Form.Check.Label` spacing ([react-bootstrap/#5938](https://github.com/react-bootstrap/react-bootstrap/issues/5938)) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index 8d10be0..0000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,43 +0,0 @@ -## Repository Layout - -This repository uses [NPM workspaces](https://docs.npmjs.com/cli/v8/using-npm/workspaces) -to make it easier to manipulate its three NPM packages -(in [`packages`](packages)). - -### How To Build Packages - -After you clone the repository, you can build all three packages like so: - -```sh -npm install -npm run build -``` - -In particular, `npm run build` runs `npm run build` within each package. - -### How To Build The Website - -In the `www` directory, you can start a development server like so: - -```sh -npm run dev -``` - -Note that the development server relies on the built packages, so you need to -`npm run build` in the root directory whenever you change something. - -To build a deployable site in the `dist` subdirectory, -run the following in the `www` directory: - -```sh -npm run build:docs -``` - -To build a deployable site and deploy it to GitHub Pages, -run the following in the `www` directory: - -```sh -npm run gh-pages -``` - -Again, be sure to `npm run build` in the root directory first. diff --git a/LICENSE b/LICENSE deleted file mode 100644 index 991a1d5..0000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2021 Brendan O'Reilly - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index ed34b80..0000000 --- a/README.md +++ /dev/null @@ -1,34 +0,0 @@ -# Solid-Bootstrap - -## Documentation - -**[Documentation is available here.](https://solid-libs.github.io/solid-bootstrap/)** - -## Overview - -Solid-Bootstrap is a port of [React-Bootstrap](https://react-bootstrap.github.io/) for [SolidJS](https://www.solidjs.com/). - -This is a complete implementation of the Bootstrap 5 components using SolidJS. It has no dependency on either bootstrap.js or jQuery. If you have SolidJS setup and Solid-Bootstrap installed, you have everything you need. - -## Getting started - -1. Create a new SolidJS website per [Solid's documentation](https://www.solidjs.com/guide) (if you don't have an existing site). -2. Add the Bootstrap 5 CSS to `index.html` per [Bootstrap's documentation](https://getbootstrap.com/docs/5.0/getting-started/introduction/). -3. Install `solid-bootstrap` with `npm`, `yarn`, `pnpm`, etc... - -``` -> npm install solid-bootstrap -``` - -> Tip! You may need to clear out some CSS in the default SolidJS template to get the full Bootstrap experience. - -## Porting approach - -We have changed as little as possible while porting this code. - -Principles: - -- The goal is to capture all of the proven behaviour of React-Bootstrap, @restart/ui (core) and related projects. -- Keep the source file structure the same. -- Keep the source code as similar as possible to enable future commits to the original projects to also be pulled into this project. -- Enable validation of the porting approach using a side-by-side comparison between the ported SolidJS code and the original implementation. diff --git a/assets/AccordionDocs.9c8864e2.js b/assets/AccordionDocs.9c8864e2.js new file mode 100644 index 0000000..29b5174 --- /dev/null +++ b/assets/AccordionDocs.9c8864e2.js @@ -0,0 +1,111 @@ +import{y as A,s as m,m as c,z as v,u as p,c as e,D as h,d as g,C as w,X as K,w as C,t as y,o as u}from"./index.3b024fd0.js";import{M as j}from"./index.62c812ca.js";import{E as o}from"./Example.5c690fb1.js";import{G as P}from"./GithubSource.f477ce58.js";import"./Card.9a738601.js";function x(r,n){return Array.isArray(r)?r.includes(n):r===n}const B=A({}),b=B,D={as:"div"},E=r=>{const[n,s]=m(c(D,r),["as","bsPrefix","class","children","eventKey"]),t=v(b),i=p(n.bsPrefix,"accordion-collapse");return e(w,c({get in(){return x(t.activeEventKey,n.eventKey)}},s,{get children(){return e(h,{get component(){return n.as},get class(){return g(n.class,i)},get children(){return n.children}})}}))},q=E,H=A({eventKey:""}),N=H,k={as:"div"},S=r=>{const[n,s]=m(c(k,r),["as","bsPrefix","class"]),t=p(n.bsPrefix,"accordion-body"),i=v(N);return e(q,{get eventKey(){return i.eventKey},get children(){return e(h,c({get component(){return n.as}},s,{get class(){return g(n.class,t)}}))}})},T=S;function $(r,n){const s=v(b);return t=>{let i=r===s.activeEventKey?null:r;s.alwaysOpen&&(Array.isArray(s.activeEventKey)?s.activeEventKey.includes(r)?i=s.activeEventKey.filter(d=>d!==r):i=[...s.activeEventKey,r]:i=[r]),s.onSelect?.(i,t),K(n,t)}}const L={as:"button"},U=r=>{const[n,s]=m(c(L,r),["as","bsPrefix","class","onClick"]),t=p(n.bsPrefix,"accordion-button"),i=v(N),d=$(i.eventKey,n.onClick),f=v(b);return e(h,c({get component(){return n.as},onClick:d},s,{get type(){return n.as==="button"?"button":void 0},get["aria-expanded"](){return i.eventKey===f.activeEventKey},get class(){return g(n.class,t,!x(f.activeEventKey,i.eventKey)&&"collapsed")}}))},I=U,_={as:"h2"},O=r=>{const[n,s]=m(c(_,r),["as","bsPrefix","class","children","onClick"]),t=p(n.bsPrefix,"accordion-header");return e(h,c({get component(){return n.as}},s,{get class(){return g(n.class,t)},get children(){return e(I,{get onClick(){return n.onClick},get children(){return n.children}})}}))},z=O,M={as:"div"},X=r=>{const[n,s]=m(c(M,r),["as","bsPrefix","class","eventKey"]),t=p(n.bsPrefix,"accordion-item"),i={get eventKey(){return n.eventKey}};return e(N.Provider,{value:i,get children(){return e(h,c({get component(){return n.as}},s,{get class(){return g(n.class,t)}}))}})},F=X,G={as:"div"},R=r=>{const[n,s]=m(c(G,r),["as","activeKey","alwaysOpen","bsPrefix","class","defaultActiveKey","onSelect","flush"]),[t,i]=C(()=>n.activeKey,()=>n.defaultActiveKey,n.onSelect),d=p(n.bsPrefix,"accordion"),f={get activeEventKey(){return t()},get alwaysOpen(){return n.alwaysOpen},get onSelect(){return i}};return e(b.Provider,{value:f,get children(){return e(h,c({get component(){return n.as}},s,{get class(){return g(n.class,d,n.flush&&`${d}-flush`)}}))}})},a=Object.assign(R,{Button:I,Collapse:q,Item:F,Header:z,Body:T}),V=y(`

API

Accordion

import { Accordion } from 'solid-bootstrap'
NameTypeDefaultDescription
activeKey
string | string[]

The current active key that corresponds to the currently expanded card

alwaysOpen
boolean

Allow accordion items to stay open when another item is opened

as
elementType

Set a custom element for this component

defaultActiveKey
string | string[]

The default active key that is expanded on start

flush
boolean

Renders accordion edge-to-edge with its parent container

bsPrefix
string
'accordion'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Accordion.Item

NameTypeDefaultDescription
as
elementType
<div>

Set a custom element for this component

eventKey required
string

A unique key used to control this item's collapse/expand.

bsPrefix
string
'accordion-item'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Accordion.Header

NameTypeDefaultDescription
as
elementType
<h2>

Set a custom element for this component

onClick
function

Click handler for the AccordionButton element

bsPrefix
string
'accordion-header'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Accordion.Body

NameTypeDefaultDescription
as
elementType
<div>

Set a custom element for this component

bsPrefix
string
'accordion-body'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Accordion.Button

NameTypeDefaultDescription
as
elementType
<button>

Set a custom element for this component

onClick
function

A callback function for when this component is clicked

bsPrefix
string
'accordion-button'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Accordion.Collapse

NameTypeDefaultDescription
as
elementType
<div>

Set a custom element for this component

children required
element

Children prop should only contain a single child, and is enforced as such

eventKey required
string

A key that corresponds to the toggler that triggers this collapse's expand or collapse.

`),Y=()=>V.cloneNode(!0),J=y('

'),Q=y('
');function ae(r={}){const{wrapper:n}=Object.assign({},j(),r.components);return n?e(n,c(r,{get children(){return e(s,{})}})):s();function s(){const t=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span"},j(),r.components);return a||l("Accordion",!1),a.Body||l("Accordion.Body",!0),a.Header||l("Accordion.Header",!0),a.Item||l("Accordion.Item",!0),o||l("Example",!1),o.Code||l("Example.Code",!0),o.Intro||l("Example.Intro",!0),o.Preview||l("Example.Preview",!0),[e(P,{name:"AccordionDocs.mdx"}),` +`,e(t.h1,{children:"Accordion"}),` +`,(()=>{const i=J.cloneNode(!0);return u(i,e(t.p,{children:`Build vertically collapsing accordions in combination with the Collapse\r +component.`})),i})(),` +`,e(t.p,{children:"Click the accordions below to expand/collapse the accordion content."}),` +`,(()=>{const i=Q.cloneNode(!0);return u(i,e(o,{title:"Basic Example",get children(){return[e(o.Preview,{get children(){return e(a,{defaultActiveKey:"0",get children(){return[e(a.Item,{eventKey:"0",get children(){return[e(a.Header,{children:"Accordion Item #1"}),e(a.Body,{get children(){return e(t.p,{children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r +ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r +reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r +culpa qui officia deserunt mollit anim id est laborum.`})}})]}}),e(a.Item,{eventKey:"1",get children(){return[e(a.Header,{children:"Accordion Item #2"}),e(a.Body,{get children(){return e(t.p,{children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r +ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r +reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r +culpa qui officia deserunt mollit anim id est laborum.`})}})]}})]}})}}),e(o.Code,{get children(){return e(t.pre,{get children(){return e(t.code,{className:"hljs language-js",get children(){return["<",e(t.span,{className:"hljs-title class_",children:"Accordion"})," defaultActiveKey=",e(t.span,{className:"hljs-string",children:'"0"'}),`>\r + `,e(t.span,{className:"xml",get children(){return[e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Item"})," ",e(t.span,{className:"hljs-attr",children:"eventKey"}),"=",e(t.span,{className:"hljs-string",children:'"0"'}),">"]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Header"}),">"]}}),"Accordion Item #1",e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Body"}),">"]}}),`\r + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r + culpa qui officia deserunt mollit anim id est laborum.\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(t.span,{className:"xml",get children(){return[e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Item"})," ",e(t.span,{className:"hljs-attr",children:"eventKey"}),"=",e(t.span,{className:"hljs-string",children:'"1"'}),">"]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Header"}),">"]}}),"Accordion Item #2",e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Body"}),">"]}}),`\r + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r + culpa qui officia deserunt mollit anim id est laborum.\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}}),null),u(i,e(o,{title:"Fully Collapsed State",get children(){return[e(o.Intro,{get children(){return e(t.p,{get children(){return["If you want your ",e(t.code,{children:"Accordion"})," to start in a fully-collapsed state, then simply dont pass in a ",e(t.code,{children:"defaultActiveKey"})," prop to ",e(t.code,{children:"Accordion"}),"."]}})}}),e(o.Preview,{get children(){return e(a,{get children(){return[e(a.Item,{eventKey:"0",get children(){return[e(a.Header,{children:"Accordion Item #1"}),e(a.Body,{get children(){return e(t.p,{children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r +ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r +reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r +culpa qui officia deserunt mollit anim id est laborum.`})}})]}}),e(a.Item,{eventKey:"1",get children(){return[e(a.Header,{children:"Accordion Item #2"}),e(a.Body,{get children(){return e(t.p,{children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r +ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r +reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r +culpa qui officia deserunt mollit anim id est laborum.`})}})]}})]}})}}),e(o.Code,{get children(){return e(t.pre,{get children(){return e(t.code,{className:"hljs language-js",get children(){return["<",e(t.span,{className:"hljs-title class_",children:"Accordion"}),`>\r + `,e(t.span,{className:"xml",get children(){return[e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Item"})," ",e(t.span,{className:"hljs-attr",children:"eventKey"}),"=",e(t.span,{className:"hljs-string",children:'"0"'}),">"]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Header"}),">"]}}),"Accordion Item #1",e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Body"}),">"]}}),`\r + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r + culpa qui officia deserunt mollit anim id est laborum.\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(t.span,{className:"xml",get children(){return[e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Item"})," ",e(t.span,{className:"hljs-attr",children:"eventKey"}),"=",e(t.span,{className:"hljs-string",children:'"1"'}),">"]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Header"}),">"]}}),"Accordion Item #2",e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Body"}),">"]}}),`\r + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r + culpa qui officia deserunt mollit anim id est laborum.\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}}),null),u(i,e(o,{title:"Flush",get children(){return[e(o.Intro,{get children(){return e(t.p,{get children(){return["Add ",e(t.code,{children:"flush"})," to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container."]}})}}),e(o.Preview,{get children(){return e(a,{defaultActiveKey:"0",flush:!0,get children(){return[e(a.Item,{eventKey:"0",get children(){return[e(a.Header,{children:"Accordion Item #1"}),e(a.Body,{get children(){return e(t.p,{children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r +ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r +reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r +culpa qui officia deserunt mollit anim id est laborum.`})}})]}}),e(a.Item,{eventKey:"1",get children(){return[e(a.Header,{children:"Accordion Item #2"}),e(a.Body,{get children(){return e(t.p,{children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r +ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r +reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r +culpa qui officia deserunt mollit anim id est laborum.`})}})]}})]}})}}),e(o.Code,{get children(){return e(t.pre,{get children(){return e(t.code,{className:"hljs language-js",get children(){return["<",e(t.span,{className:"hljs-title class_",children:"Accordion"})," defaultActiveKey=",e(t.span,{className:"hljs-string",children:'"0"'}),` flush>\r + `,e(t.span,{className:"xml",get children(){return[e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Item"})," ",e(t.span,{className:"hljs-attr",children:"eventKey"}),"=",e(t.span,{className:"hljs-string",children:'"0"'}),">"]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Header"}),">"]}}),"Accordion Item #1",e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Body"}),">"]}}),`\r + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r + culpa qui officia deserunt mollit anim id est laborum.\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(t.span,{className:"xml",get children(){return[e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Item"})," ",e(t.span,{className:"hljs-attr",children:"eventKey"}),"=",e(t.span,{className:"hljs-string",children:'"1"'}),">"]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Header"}),">"]}}),"Accordion Item #2",e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Body"}),">"]}}),`\r + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r + culpa qui officia deserunt mollit anim id est laborum.\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}}),null),u(i,e(o,{title:"Always open",get children(){return[e(o.Intro,{get children(){return e(t.p,{get children(){return["You can make accordion items stay open when another item is opened by using the ",e(t.code,{children:"alwaysOpen"}),` prop. If you're looking to\r +control the component, you must use an array of strings for `,e(t.code,{children:"activeKey"})," or ",e(t.code,{children:"defaultActiveKey"}),"."]}})}}),e(o.Preview,{get children(){return e(a,{defaultActiveKey:["0"],alwaysOpen:!0,get children(){return[e(a.Item,{eventKey:"0",get children(){return[e(a.Header,{children:"Accordion Item #1"}),e(a.Body,{get children(){return e(t.p,{children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r +ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r +reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r +culpa qui officia deserunt mollit anim id est laborum.`})}})]}}),e(a.Item,{eventKey:"1",get children(){return[e(a.Header,{children:"Accordion Item #2"}),e(a.Body,{get children(){return e(t.p,{children:`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r +ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r +reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r +culpa qui officia deserunt mollit anim id est laborum.`})}})]}})]}})}}),e(o.Code,{get children(){return e(t.pre,{get children(){return e(t.code,{className:"hljs language-js",get children(){return["<",e(t.span,{className:"hljs-title class_",children:"Accordion"})," defaultActiveKey={[",e(t.span,{className:"hljs-string",children:'"0"'}),`]} alwaysOpen>\r + `,e(t.span,{className:"xml",get children(){return[e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Item"})," ",e(t.span,{className:"hljs-attr",children:"eventKey"}),"=",e(t.span,{className:"hljs-string",children:'"0"'}),">"]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Header"}),">"]}}),"Accordion Item #1",e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Body"}),">"]}}),`\r + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r + culpa qui officia deserunt mollit anim id est laborum.\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(t.span,{className:"xml",get children(){return[e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Item"})," ",e(t.span,{className:"hljs-attr",children:"eventKey"}),"=",e(t.span,{className:"hljs-string",children:'"1"'}),">"]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Header"}),">"]}}),"Accordion Item #2",e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Accordion.Body"}),">"]}}),`\r + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\r + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\r + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\r + culpa qui officia deserunt mollit anim id est laborum.\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(t.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}}),null),u(i,e(Y,{}),null),i})()]}}function l(r,n){throw new Error("Expected "+(n?"component":"object")+" `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}export{ae as default}; diff --git a/assets/Alert.4f4dadf1.js b/assets/Alert.4f4dadf1.js new file mode 100644 index 0000000..cf5ea22 --- /dev/null +++ b/assets/Alert.4f4dadf1.js @@ -0,0 +1 @@ +import{q as b,r as d,v as C,s as g,m as r,w as v,u as w,F as u,c as a,S as x,j as P,d as A,o as c,k as $,x as k,t as S}from"./index.3b024fd0.js";const L=S('
'),B=b("h4"),H=d("alert-heading",{Component:B}),_=d("alert-link",{Component:C}),j={variant:"primary",defaultShow:!0,transition:u,closeLabel:"Close alert"},y=h=>{const[e,o]=g(r(j,h),["bsPrefix","children","defaultShow","show","closeLabel","closeVariant","class","children","variant","onClose","dismissible","transition"]),[p,l]=v(()=>e.show,()=>e.defaultShow,e.onClose),t=w(e.bsPrefix,"alert"),m=s=>{l&&l(!1,s)},n=e.transition===!0?u:e.transition,i=()=>(()=>{const s=L.cloneNode(!0);return P(s,r(n?{}:o,{get class(){return A(e.class,t,e.variant&&`${t}-${e.variant}`,e.dismissible&&`${t}-dismissible`)}}),!1,!0),c(s,(()=>{const f=$(()=>!!e.dismissible);return()=>f()&&a(k,{onClick:m,get["aria-label"](){return e.closeLabel},get variant(){return e.closeVariant}})})(),null),c(s,()=>e.children,null),s})();return a(x,{when:!!n,get fallback(){return e.show?i:null},get children(){return a(n,r({unmountOnExit:!0},o,{ref(s){undefined=s},get in(){return p()},children:i}))}})},N=Object.assign(y,{Link:_,Heading:H});export{N as A}; diff --git a/assets/AlertDocs.16dc54e5.js b/assets/AlertDocs.16dc54e5.js new file mode 100644 index 0000000..ca7f470 --- /dev/null +++ b/assets/AlertDocs.16dc54e5.js @@ -0,0 +1,94 @@ +import{t as i,f as j,c as e,o as a,k as m,m as v,a9 as p}from"./index.3b024fd0.js";import{M as g}from"./index.62c812ca.js";import{E as t}from"./Example.5c690fb1.js";import{G as f}from"./GithubSource.f477ce58.js";import{A as r}from"./Alert.4f4dadf1.js";import{B as u}from"./Layout.7bb15751.js";import"./Card.9a738601.js";const b=i(`

API

Alert

import { Alert } from 'solid-bootstrap'
NameTypeDefaultDescription
closeLabel
string
'Close alert'

Sets the text for alert close button.

closeVariant
'white'

Sets the variant for close button.

dismissible
boolean

Renders a properly aligned dismiss button, as well as adding extra horizontal padding to the Alert.

onClose
function
controls show

Callback fired when alert is closed.

show
boolean
true
controlled by: onClose, initial prop: defaultShow

Controls the visual state of the Alert.

transition
boolean | elementType
Fade

Animate the alert dismissal. Defaults to using <Fade> animation or use false to disable. A custom solid-react-transition Transition can also be provided.

variant
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light'
'primary'

The Alert visual variant

bsPrefix
string
'alert'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Alert.Heading

NameTypeDefaultDescription
as
elementType
<DivStyledAsH4>

You can use a custom element type for this component.

bsPrefix required
string
'alert-heading'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

Alert.Link

NameTypeDefaultDescription
as
elementType
<Anchor>

You can use a custom element type for this component.

bsPrefix required
string
'alert-link'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

`),y=()=>b.cloneNode(!0),w=i("

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

"),A=i("
"),x=i('
');function k(){const[c,d]=j(!0);return[e(r,{get show(){return c()},variant:"success",get children(){return[e(r.Heading,{children:"How's it going?!"}),w.cloneNode(!0),A.cloneNode(!0),(()=>{const o=x.cloneNode(!0);return a(o,e(u,{onClick:()=>d(!1),variant:"outline-success",children:"Close me y'all!"})),o})()]}}),m((()=>{const o=m(()=>!c());return()=>o()&&e(u,{onClick:()=>d(!0),children:"Show Alert"})})())]}const C=i('

'),N=i("

"),_=i("
"),$=i('

'),S=i('
');function L(c={}){const{wrapper:d}=Object.assign({},g(),c.components);return d?e(d,v(c,{get children(){return e(o,{})}})):o();function o(){const s=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span"},g(),c.components);return r||h("Alert",!1),r.Heading||h("Alert.Heading",!0),t||h("Example",!1),t.Code||h("Example.Code",!0),t.Intro||h("Example.Intro",!0),t.Preview||h("Example.Preview",!0),[e(f,{name:"AlertDocs.mdx"}),` +`,e(s.h1,{children:"Alerts"}),` +`,(()=>{const l=C.cloneNode(!0);return a(l,e(s.p,{children:`Provide contextual feedback messages for typical user actions with the handful\r +of available and flexible alert messages.`})),l})(),` +`,(()=>{const l=S.cloneNode(!0);return a(l,e(t,{title:"Examples",get children(){return[e(t.Intro,{get children(){return e(s.p,{children:`Alerts are available for any length of text, as well as an optional dismiss button.\r +For proper styling, use one of the eight variants.`})}}),e(t.Preview,{get children(){return e(p,{each:["primary","secondary","success","danger","warning","info","light","dark"],children:n=>e(r,{variant:n,get children(){return["This is a ",n," alert\u2014check it out!"," "]}})})}}),e(t.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return["<",e(s.span,{className:"hljs-title class_",children:"For"}),`\r + each={[\r + `,e(s.span,{className:"hljs-string",children:'"primary"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"secondary"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"success"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"danger"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"warning"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"info"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"light"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"dark"'}),`,\r + ]}\r +>\r + {`,e(s.span,{className:"hljs-function",get children(){return["(",e(s.span,{className:"hljs-params",children:"variant"}),") =>"]}}),` (\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Alert"})," ",e(s.span,{className:"hljs-attr",children:"variant"}),"=",e(s.span,{className:"hljs-string",children:"{variant}"}),">"]}}),`\r + This is a {variant} alert\u2014check it out!{" "}\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + )}\r + +`]}})}})}})]}}),null),a(l,e(r,{variant:"warning",get children(){return e(s.p,{get children(){return[`Using color to add meaning only provides a visual indication, which will not\r +be conveyed to users of assistive technologies \u2013 such as screen readers.\r +Ensure that information denoted by the color is either obvious from the content\r +itself (e.g. the visible text), or is included through alternative means,\r +such as additional text hidden with the `,e(s.code,{children:".visually-hidden"})," class."]}})}}),null),a(l,e(t,{title:"Links",get children(){return[e(t.Intro,{get children(){return e(s.p,{get children(){return["For links, use the ",e(s.code,{children:""}),` component to provide matching\r +colored links within any alert.`]}})}}),e(t.Preview,{get children(){return e(p,{each:["primary","secondary","success","danger","warning","info","light","dark"],children:n=>e(r,{variant:n,get children(){return["This is a ",n," alert with ",e(r.Link,{href:"#",children:"an example link."}),". Give it a try if you like."]}})})}}),e(t.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return["<",e(s.span,{className:"hljs-title class_",children:"For"}),`\r + each={[\r + `,e(s.span,{className:"hljs-string",children:'"primary"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"secondary"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"success"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"danger"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"warning"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"info"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"light"'}),`,\r + `,e(s.span,{className:"hljs-string",children:'"dark"'}),`,\r + ]}\r +>\r + {`,e(s.span,{className:"hljs-function",get children(){return["(",e(s.span,{className:"hljs-params",children:"variant"}),") =>"]}}),` (\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Alert"})," ",e(s.span,{className:"hljs-attr",children:"variant"}),"=",e(s.span,{className:"hljs-string",children:"{variant}"}),">"]}}),`\r + This is a {variant} alert with `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Alert.Link"})," ",e(s.span,{className:"hljs-attr",children:"href"}),"=",e(s.span,{className:"hljs-string",children:'"#"'}),">"]}}),"an example link.",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`. Give it a try if you like.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + )}\r + +`]}})}})}})]}}),null),a(l,e(t,{title:"Additional content",get children(){return[e(t.Intro,{get children(){return e(s.p,{children:"Alerts can contain whatever content you like. Headers, paragraphs, dividers, go crazy."})}}),e(t.Preview,{get children(){return e(r,{variant:"success",get children(){return[e(r.Heading,{children:"Hey, nice to see you"}),(()=>{const n=N.cloneNode(!0);return a(n,e(s.p,{children:`Aww yeah, you successfully read this important alert message. This example\r +text is going to run a bit longer so that you can see how spacing within an\r +alert works with this kind of content.`})),n})(),_.cloneNode(!0),(()=>{const n=$.cloneNode(!0);return a(n,e(s.p,{children:`Whenever you need to, be sure to use margin utilities to keep things nice\r +and tidy.`})),n})()]}})}}),e(t.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return["<",e(s.span,{className:"hljs-title class_",children:"Alert"})," variant=",e(s.span,{className:"hljs-string",children:'"success"'}),`>\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Alert.Heading"}),">"]}}),"Hey, nice to see you",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Aww yeah, you successfully read this important alert message. This example\r + text is going to run a bit longer so that you can see how spacing within an\r + alert works with this kind of content.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"hr"})," />"]}})}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"})," ",e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"mb-0"'}),">"]}}),`\r + Whenever you need to, be sure to use margin utilities to keep things nice\r + and tidy.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}}),null),a(l,e(t,{title:"Dismissing",get children(){return[e(t.Intro,{get children(){return e(s.p,{get children(){return["Add the ",e(s.code,{children:"dismissible"})," prop to add a functioning dismiss button to the Alert."]}})}}),e(t.Preview,{get children(){return e(r,{variant:"danger",dismissible:!0,get children(){return[e(r.Heading,{children:"Oh snap! You got an error!"}),(()=>{const n=N.cloneNode(!0);return a(n,e(s.p,{children:`Change this and that and try again. Duis mollis, est non commodo\r +luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.\r +Cras mattis consectetur purus sit amet fermentum.`})),n})()]}})}}),e(t.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return["<",e(s.span,{className:"hljs-title class_",children:"Alert"})," variant=",e(s.span,{className:"hljs-string",children:'"danger"'}),` dismissible>\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Alert.Heading"}),">"]}}),"Oh snap! You got an error!",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Change this and that and try again. Duis mollis, est non commodo\r + luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.\r + Cras mattis consectetur purus sit amet fermentum.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}}),null),a(l,e(t,{title:"Controlling visibility",get children(){return[e(t.Intro,{get children(){return e(s.p,{children:"You can also control the visual state directly which is great if you want to build more complicated alerts."})}}),e(t.Preview,{get children(){return e(k,{})}}),e(t.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return[e(s.span,{className:"hljs-keyword",children:"const"})," [show, setShow] = ",e(s.span,{className:"hljs-title function_",children:"createSignal"}),"(",e(s.span,{className:"hljs-literal",children:"true"}),`);\r +`,e(s.span,{className:"hljs-keyword",children:"return"}),` (\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",children:"<>"}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Alert"})," ",e(s.span,{className:"hljs-attr",children:"show"}),"=",e(s.span,{className:"hljs-string",children:"{show()}"})," ",e(s.span,{className:"hljs-attr",children:"variant"}),"=",e(s.span,{className:"hljs-string",children:'"success"'}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Alert.Heading"}),">"]}}),"How's it going?!",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget\r + lacinia odio sem nec elit. Cras mattis consectetur purus sit amet\r + fermentum.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"hr"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"})," ",e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-flex justify-content-end"'}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," ",e(s.span,{className:"hljs-attr",children:"onClick"}),"=",e(s.span,{className:"hljs-string",children:"{()"})," =>"]}}),` setShow(false)} variant="outline-success">\r + Close me y'all!\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r +\r + {!show() && `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," ",e(s.span,{className:"hljs-attr",children:"onClick"}),"=",e(s.span,{className:"hljs-string",children:"{()"})," =>"]}})," setShow(true)}>Show Alert",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`}\r + `,e(s.span,{className:"hljs-tag",children:""})]}}),`\r +) +`]}})}})}})]}}),null),a(l,e(y,{}),null),l})()]}}function h(c,d){throw new Error("Expected "+(d?"component":"object")+" `"+c+"` to be defined: you likely forgot to import, pass, or provide it.")}export{L as default}; diff --git a/assets/Badge.fd0ac2ee.js b/assets/Badge.fd0ac2ee.js new file mode 100644 index 0000000..5b177f5 --- /dev/null +++ b/assets/Badge.fd0ac2ee.js @@ -0,0 +1 @@ +import{s as o,m as e,u as p,c as l,d as n,D as c}from"./index.3b024fd0.js";const i={as:"span",bg:"primary",pill:!1},g=t=>{const[s,a]=o(e(i,t),["as","bsPrefix","bg","pill","text","class"]),r=p(s.bsPrefix,"badge");return l(c,e({get component(){return s.as}},a,{get class(){return n(s.class,r,s.pill&&"rounded-pill",s.text&&`text-${s.text}`,s.bg&&`bg-${s.bg}`)}}))},x=g;export{x as B}; diff --git a/assets/BadgeDocs.a59e024b.js b/assets/BadgeDocs.a59e024b.js new file mode 100644 index 0000000..44154d1 --- /dev/null +++ b/assets/BadgeDocs.a59e024b.js @@ -0,0 +1,48 @@ +import{t as c,c as e,m as g,o as r,k as o}from"./index.3b024fd0.js";import{M as p}from"./index.62c812ca.js";import{E as l}from"./Example.5c690fb1.js";import{G as N}from"./GithubSource.f477ce58.js";import{B as n}from"./Badge.fd0ac2ee.js";import{A as u}from"./Alert.4f4dadf1.js";import{B as j}from"./Layout.7bb15751.js";import"./Card.9a738601.js";const b=c(`

API

Badge

import { Badge } from 'solid-bootstrap'
NameTypeDefaultDescription
as
elementType
<span>

You can use a custom element type for this component.

bg
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'
'primary'

The visual style of the badge

pill
boolean
false

Add the pill modifier to make badges more rounded with some additional horizontal padding

text
'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark'

Sets badge text color

bsPrefix
string
'badge'

Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

`),f=()=>b.cloneNode(!0),x=c('

'),B=c("

Example heading

"),y=c("

Example heading

"),v=c("

Example heading

"),w=c("

Example heading

"),_=c("
Example heading
"),k=c("
Example heading
"),E=c('
');function L(d={}){const{wrapper:h}=Object.assign({},p(),d.components);return h?e(h,g(d,{get children(){return e(m,{})}})):m();function m(){const s=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span"},p(),d.components);return l||i("Example",!1),l.Code||i("Example.Code",!0),l.Intro||i("Example.Intro",!0),l.Preview||i("Example.Preview",!0),[e(N,{name:"BadgeDocs.mdx"}),` +`,e(s.h1,{children:"Badges"}),` +`,(()=>{const t=x.cloneNode(!0);return r(t,e(s.p,{children:`Badges scale to match the size of the immediate parent element by\r +using relative font sizing and em units.`})),t})(),` +`,(()=>{const t=E.cloneNode(!0);return r(t,e(l,{title:"Examples",get children(){return[e(l.Preview,{get children(){return[(()=>{const a=B.cloneNode(!0);return a.firstChild,r(a,e(n,{bg:"secondary",children:"New"}),null),a})(),`\r +`,(()=>{const a=y.cloneNode(!0);return a.firstChild,r(a,e(n,{bg:"secondary",children:"New"}),null),a})(),`\r +`,(()=>{const a=v.cloneNode(!0);return a.firstChild,r(a,e(n,{bg:"secondary",children:"New"}),null),a})(),`\r +`,(()=>{const a=w.cloneNode(!0);return a.firstChild,r(a,e(n,{bg:"secondary",children:"New"}),null),a})(),`\r +`,(()=>{const a=_.cloneNode(!0);return a.firstChild,r(a,e(n,{bg:"secondary",children:"New"}),null),a})(),`\r +`,(()=>{const a=k.cloneNode(!0);return a.firstChild,r(a,e(n,{bg:"secondary",children:"New"}),null),a})()]}}),e(l.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return["

",e(s.span,{className:"hljs-title class_",children:"Example"})," heading <",e(s.span,{className:"hljs-title class_",children:"Badge"})," bg=",e(s.span,{className:"hljs-string",children:'"secondary"'}),">",e(s.span,{className:"hljs-title class_",children:"New"}),"<",e(s.span,{className:"hljs-regexp",children:"/Badge>\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h2"}),">"]}}),"Example heading ",e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"secondary"'}),">"]}}),"New",e(s.span,{className:"hljs-tag",get children(){return[""]}}),e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h3"}),">"]}}),"Example heading ",e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"secondary"'}),">"]}}),"New",e(s.span,{className:"hljs-tag",get children(){return[""]}}),e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h4"}),">"]}}),"Example heading ",e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"secondary"'}),">"]}}),"New",e(s.span,{className:"hljs-tag",get children(){return[""]}}),e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h5"}),">"]}}),"Example heading ",e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"secondary"'}),">"]}}),"New",e(s.span,{className:"hljs-tag",get children(){return[""]}}),e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h6"}),">"]}}),"Example heading ",e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"secondary"'}),">"]}}),"New",e(s.span,{className:"hljs-tag",get children(){return[""]}}),e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),` +`]}})}})}})]}}),null),r(t,e(l,{title:"Embedded",get children(){return[e(l.Intro,{get children(){return e(s.p,{children:"Badges can be used as part of links or buttons to provide a counter."})}}),e(l.Preview,{get children(){return[o(()=>e(j,{variant:"primary",get children(){return["Profile ",e(n,{bg:"secondary",children:"9"}),e(s.span,{class:"visually-hidden",children:"unread messages"})]}})),e(u,{variant:"warning",class:"mt-3",children:"Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button. Unless the context is clear, consider including additional context with a visually hidden piece of additional text."})]}}),e(l.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return[" <",e(s.span,{className:"hljs-title class_",children:"Button"})," variant=",e(s.span,{className:"hljs-string",children:'"primary"'}),">",e(s.span,{className:"hljs-title class_",children:"Profile"}),` \r + <`,e(s.span,{className:"hljs-title class_",children:"Badge"})," bg=",e(s.span,{className:"hljs-string",children:'"secondary"'}),">",e(s.span,{className:"hljs-number",children:"9"}),"\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"span"})," ",e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"visually-hidden"'}),">"]}}),"unread messages",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}}),null),r(t,e(l,{title:"Contextual",get children(){return[e(l.Intro,{get children(){return e(s.p,{children:"Add any of the below mentioned modifier classes to change the appearance of a badge."})}}),e(l.Preview,{get children(){return[e(n,{bg:"primary",children:"Primary"}),`\r +`,e(n,{bg:"secondary",children:"Secondary"}),`\r +`,e(n,{bg:"success",children:"Success"})," ",e(n,{bg:"danger",children:"Danger"}),`\r +`,e(n,{bg:"warning",text:"dark",children:"Warning"}),`\r +`,e(n,{bg:"info",children:"Info"}),`\r +`,e(n,{bg:"light",text:"dark",children:"Light"}),`\r +`,e(n,{bg:"dark",children:"Dark"})]}}),e(l.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return["<",e(s.span,{className:"hljs-title class_",children:"Badge"})," bg=",e(s.span,{className:"hljs-string",children:'"primary"'}),">",e(s.span,{className:"hljs-title class_",children:"Primary"}),"\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"secondary"'}),">"]}}),"Secondary",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"success"'}),">"]}}),"Success",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}})," ",e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"danger"'}),">"]}}),"Danger",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"warning"'})," ",e(s.span,{className:"hljs-attr",children:"text"}),"=",e(s.span,{className:"hljs-string",children:'"dark"'}),">"]}}),"Warning",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"info"'}),">"]}}),"Info",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"light"'})," ",e(s.span,{className:"hljs-attr",children:"text"}),"=",e(s.span,{className:"hljs-string",children:'"dark"'}),">"]}}),"Light",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"dark"'}),">"]}}),"Dark",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),` +`]}})}})}})]}}),null),r(t,e(l,{title:"Pills",get children(){return[e(l.Intro,{get children(){return e(s.p,{children:"Badges Use the pill modifier class to make badges more rounded (with a larger border-radius)."})}}),e(l.Preview,{get children(){return[e(n,{pill:!0,bg:"primary",children:"Primary"}),`\r +`,e(n,{pill:!0,bg:"secondary",children:"Secondary"}),`\r +`,e(n,{pill:!0,bg:"success",children:"Success"}),`\r +`,e(n,{pill:!0,bg:"danger",children:"Danger"}),`\r +`,e(n,{pill:!0,bg:"warning",text:"dark",children:"Warning"}),`\r +`,e(n,{pill:!0,bg:"info",children:"Info"}),`\r +`,e(n,{pill:!0,bg:"light",text:"dark",children:"Light"}),`\r +`,e(n,{pill:!0,bg:"dark",children:"Dark"})]}}),e(l.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return["<",e(s.span,{className:"hljs-title class_",children:"Badge"})," pill bg=",e(s.span,{className:"hljs-string",children:'"primary"'}),">",e(s.span,{className:"hljs-title class_",children:"Primary"}),"\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"pill"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"secondary"'}),">"]}}),"Secondary",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"pill"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"success"'}),">"]}}),"Success",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"pill"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"danger"'}),">"]}}),"Danger",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"pill"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"warning"'})," ",e(s.span,{className:"hljs-attr",children:"text"}),"=",e(s.span,{className:"hljs-string",children:'"dark"'}),">"]}}),"Warning",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"pill"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"info"'}),">"]}}),"Info",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"pill"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"light"'})," ",e(s.span,{className:"hljs-attr",children:"text"}),"=",e(s.span,{className:"hljs-string",children:'"dark"'}),">"]}}),"Light",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Badge"})," ",e(s.span,{className:"hljs-attr",children:"pill"})," ",e(s.span,{className:"hljs-attr",children:"bg"}),"=",e(s.span,{className:"hljs-string",children:'"dark"'}),">"]}}),"Dark",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),` +`]}})}})}})]}}),null),r(t,e(f,{}),null),t})()]}}function i(d,h){throw new Error("Expected "+(h?"component":"object")+" `"+d+"` to be defined: you likely forgot to import, pass, or provide it.")}export{L as default}; diff --git a/assets/BreadcrumbDocs.f069b020.js b/assets/BreadcrumbDocs.f069b020.js new file mode 100644 index 0000000..48d44d1 --- /dev/null +++ b/assets/BreadcrumbDocs.f069b020.js @@ -0,0 +1,12 @@ +import{s as b,m as d,u as f,c as e,d as p,k as v,D as h,v as g,j as N,o as l,t as m}from"./index.3b024fd0.js";import{M as u}from"./index.62c812ca.js";import{E as n}from"./Example.5c690fb1.js";import{G as j}from"./GithubSource.f477ce58.js";import"./Card.9a738601.js";const y={as:"li",active:!1,linkAs:g,linkProps:{}},w=a=>{const[r,o]=b(d(y,a),["bsPrefix","active","children","class","as","linkAs","linkProps","href","title","target"]),t=f(r.bsPrefix,"breadcrumb-item");return e(h,d({get component(){return r.as}},o,{get class(){return p(t,r.class,{active:r.active})},get["aria-current"](){return r.active?"page":void 0},get children(){return v(()=>!!r.active)()?r.children:e(h,d({get component(){return r.linkAs}},()=>r.linkProps,{get href(){return r.href},get title(){return r.title},get target(){return r.target},get children(){return r.children}}))}}))},x=w,P=m("
    "),B={as:"nav",label:"breadcrumb",listProps:{}},I=a=>{const[r,o]=b(d(B,a),["bsPrefix","class","listProps","children","label","as"]),t=f(r.bsPrefix,"breadcrumb");return e(h,d({get component(){return r.as},get["aria-label"](){return r.label},get class(){return p(r.class)}},o,{get children(){const s=P.cloneNode(!0);return N(s,d(()=>r.listProps,{get class(){return p(t,r.listProps?.class)}}),!1,!0),l(s,()=>r.children),s}}))},c=Object.assign(I,{Item:x}),k=m(`

    API

    Breadcrumb

    import { Breadcrumb } from 'solid-bootstrap'
    NameTypeDefaultDescription
    as
    elementType
    		<nav>

    You can use a custom element type for this component.

    label
    string
    		'breadcrumb'
    listProps
    object

    Additional props passed as-is to the underlying <ol> element

    bsPrefix
    string
    		'breadcrumb'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Breadcrumb.Item

    NameTypeDefaultDescription
    active
    boolean
    		false

    Adds a visual "active" state to a Breadcrumb Item and disables the link.

    as
    elementType
    		<li>

    You can use a custom element type for this component.

    href
    string

    href attribute for the inner a element

    linkAs
    elementType
    		<Anchor>

    You can use a custom element type for this component's inner link.

    linkProps
    object

    Additional props passed as-is to the underlying link for non-active items.

    target
    string

    target attribute for the inner a element

    title
    node

    title attribute for the inner a element

    bsPrefix
    string
    		'breadcrumb-item'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    `),A=()=>k.cloneNode(!0),D=m('

    '),_=m('
    ');function M(a={}){const{wrapper:r}=Object.assign({},u(),a.components);return r?e(r,d(a,{get children(){return e(o,{})}})):o();function o(){const t=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span"},u(),a.components);return c||i("Breadcrumb",!1),c.Item||i("Breadcrumb.Item",!0),n||i("Example",!1),n.Code||i("Example.Code",!0),n.Intro||i("Example.Intro",!0),n.Preview||i("Example.Preview",!0),[e(j,{name:"BreadcrumbDocs.mdx"}),` +`,e(t.h1,{children:"Breadcrumbs"}),` +`,(()=>{const s=D.cloneNode(!0);return l(s,e(t.p,{children:`Indicate the current page\u2019s location within a navigational hierarchy\r +that automatically adds separators via CSS. Add active prop to active\r +Breadcrumb.Item . Do not set both active and href attributes. active\r +overrides href and span element is rendered instead of a .`})),s})(),` +`,(()=>{const s=_.cloneNode(!0);return l(s,e(n,{title:"Example",get children(){return[e(n.Intro,{}),e(n.Preview,{get children(){return e(c,{get children(){return[e(c.Item,{href:"#",children:"Home"}),e(c.Item,{href:"https://getbootstrap.com/docs/4.0/components/breadcrumb/",children:"Library"}),e(c.Item,{active:!0,children:"Data"})]}})}}),e(n.Code,{get children(){return e(t.pre,{get children(){return e(t.code,{className:"hljs language-js",get children(){return["<",e(t.span,{className:"hljs-title class_",children:"Breadcrumb"}),`>\r + `,e(t.span,{className:"xml",get children(){return[e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Breadcrumb.Item"})," ",e(t.span,{className:"hljs-attr",children:"href"}),"=",e(t.span,{className:"hljs-string",children:'"#"'}),">"]}}),"Home",e(t.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(t.span,{className:"xml",get children(){return[e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Breadcrumb.Item"})," ",e(t.span,{className:"hljs-attr",children:"href"}),"=",e(t.span,{className:"hljs-string",children:'"https://getbootstrap.com/docs/4.0/components/breadcrumb/"'}),">"]}}),"Library",e(t.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(t.span,{className:"xml",get children(){return[e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"Breadcrumb.Item"})," ",e(t.span,{className:"hljs-attr",children:"active"}),">"]}}),"Data",e(t.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}}),null),l(s,e(A,{}),null),s})()]}}function i(a,r){throw new Error("Expected "+(r?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}export{M as default}; diff --git a/assets/ButtonDocs.98e2fae5.js b/assets/ButtonDocs.98e2fae5.js new file mode 100644 index 0000000..49ac8be --- /dev/null +++ b/assets/ButtonDocs.98e2fae5.js @@ -0,0 +1,160 @@ +import{s as Gs,u as Fs,aa as Vs,ab as Os,L as Ws,I as k,J as S,c as e,m as L,d as Hs,t as m,f as T,h as Xs,a9 as re,o as n,k as Js}from"./index.3b024fd0.js";import{M as b}from"./index.62c812ca.js";import{B as t}from"./Layout.7bb15751.js";import{B as C}from"./ButtonGroup.fa9e330d.js";import{E as a}from"./Example.5c690fb1.js";import{G as Us}from"./GithubSource.f477ce58.js";import{A as Ys}from"./Alert.4f4dadf1.js";import"./Card.9a738601.js";const Ks=m(''),Qs=()=>{},Zs=c=>{const[r,h]=Gs(c,["bsPrefix","name","class","checked","type","onChange","value","disabled","id","inputRef"]),s=Fs(r.bsPrefix,"btn-check");return[(()=>{const l=Ks.cloneNode(!0);Vs(l,"change",r.onChange||Qs);const i=r.inputRef;return typeof i=="function"?Os(i,l):r.inputRef=l,Ws(l,s),k(d=>{const o=r.name,u=r.type,p=!!r.disabled,N=r.id;return o!==d._v$&&S(l,"name",d._v$=o),u!==d._v$2&&S(l,"type",d._v$2=u),p!==d._v$3&&(l.disabled=d._v$3=p),N!==d._v$4&&S(l,"id",d._v$4=N),d},{_v$:void 0,_v$2:void 0,_v$3:void 0,_v$4:void 0}),k(()=>l.value=r.value),k(()=>l.checked=!!r.checked),l})(),e(t,L(h,{get class(){return Hs(r.class,r.disabled&&"disabled")},type:void 0,role:void 0,as:"label",get htmlFor(){return r.id}}))]},j=Zs,w=m("
    ");function en(){const[c,r]=T(!1);function h(){return new Promise(l=>setTimeout(l,2e3))}Xs(()=>{c()&&h().then(()=>{r(!1)})});const s=()=>r(!0);return e(t,{variant:"primary",get disabled(){return c()},get onClick(){return c()?void 0:s},get children(){return c()?"Loading\u2026":"Click to load"}})}function sn(){const[c,r]=T(!1),[h,s]=T("1"),l=[{name:"Active",value:"1"},{name:"Radio",value:"2"},{name:"Radio",value:"3"}];return[e(C,{class:"mb-2",get children(){return e(j,{id:"toggle-check",type:"checkbox",variant:"secondary",get checked(){return c()},value:"1",onChange:i=>r(i.currentTarget.checked),children:"Checked"})}}),w.cloneNode(!0),e(j,{class:"mb-2",id:"toggle-check",type:"checkbox",variant:"outline-primary",get checked(){return c()},value:"1",onChange:i=>r(i.currentTarget.checked),children:"Checked"}),w.cloneNode(!0),e(C,{class:"mb-2",get children(){return e(re,{each:l,children:(i,d)=>e(j,{get id(){return`radio-${d()}`},type:"radio",variant:"secondary",name:"radio",get value(){return i.value},get checked(){return h()===i.value},onChange:o=>s(o.currentTarget.value),get children(){return i.name}})})}}),w.cloneNode(!0),e(C,{get children(){return e(re,{each:l,children:(i,d)=>e(j,{get id(){return`radio2-${d()}`},type:"radio",get variant(){return d()%2?"outline-success":"outline-danger"},name:"radio2",get value(){return i.value},get checked(){return h()===i.value},onChange:o=>s(o.currentTarget.value),get children(){return i.name}})})}})]}const nn=m(`
    + + + + + + +
    NameTypeDefaultDescription
    active
    boolean

    Manually set the visual state of the button to

    as
    elementType

    You can use a custom element type for this component.

    disabled
    boolean

    Disables the Button, preventing mouse events, even if the underlying component is an element

    href
    string

    Providing a will render an element, styled as a button.

    size
    |

    Specifies a large or small button.

    type
    | | |

    Defines HTML button type attribute.

    variant
    string

    One or more button variant combinations

    buttons may be one of a variety of visual variants such as:

    as well as "outline" versions (prefixed by 'outline-*')

    bsPrefix
    string

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    + + + + + + + +
    NameTypeDefaultDescription
    checked
    boolean

    The checked state of the input

    disabled
    boolean

    The disabled state of both the label and input

    idrequired
    string

    is required for button clicks to toggle input.

    inputRef

    A ref attached to the element

    name
    string

    The HTML input name, used to group like checkboxes or radio buttons together semantically

    onChange
    function

    A callback fired when the underlying input element changes. This is passed directly to the so shares the same signature as a native event.

    type
    |

    The element

    valuerequired
    string|arrayOf|number

    The value of the input, should be unique amongst it's siblings.

    bsPrefix
    string

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    `);function an(c={}){const{wrapper:r}=Object.assign({},b(),c.components);return r?e(r,L(c,{get children(){return e(h,{})}})):h();function h(){const s=Object.assign({h2:"h2",h3:"h3",p:"p",code:"code"},b(),c.components);return(()=>{const l=nn.cloneNode(!0),i=l.firstChild,d=i.firstChild,o=d.firstChild,u=o.nextSibling,p=u.firstChild,N=p.firstChild,ie=N.nextSibling,P=ie.nextSibling,ce=P.nextSibling,de=ce.firstChild,z=de.firstChild;z.firstChild;const he=p.nextSibling,oe=he.nextSibling,me=oe.nextSibling,I=me.nextSibling,pe=I.firstChild,ge=pe.nextSibling,R=ge.nextSibling,ue=R.nextSibling,Ne=ue.firstChild,D=Ne.firstChild,je=D.firstChild,E=je.nextSibling;E.nextSibling;const ve=I.nextSibling,M=ve.nextSibling,be=M.firstChild,_e=be.nextSibling,fe=_e.nextSibling,ye=fe.nextSibling,$e=ye.firstChild,_=$e.firstChild,xe=_.firstChild,A=xe.nextSibling,Be=A.nextSibling,q=Be.nextSibling;q.nextSibling;const ke=M.nextSibling,G=ke.nextSibling,Se=G.firstChild,Ce=Se.nextSibling,we=Ce.firstChild,f=we.firstChild,Te=f.firstChild,Le=G.nextSibling,F=Le.nextSibling,Pe=F.firstChild,V=Pe.nextSibling,ze=V.firstChild,g=ze.firstChild,O=g.firstChild,W=O.nextSibling,Ie=W.nextSibling,Re=V.nextSibling,De=F.nextSibling,H=De.nextSibling,Ee=H.firstChild,Me=Ee.nextSibling,X=Me.nextSibling,Ae=X.nextSibling,qe=Ae.firstChild,Ge=qe.firstChild,Fe=Ge.nextSibling,J=Fe.nextSibling,Ve=J.nextSibling,Oe=Ve.nextSibling,We=H.nextSibling,He=We.nextSibling,Xe=He.firstChild,Je=Xe.nextSibling,Ue=Je.nextSibling,y=i.nextSibling,Ye=y.firstChild,Ke=Ye.firstChild,Qe=Ke.nextSibling,Ze=Qe.firstChild,es=Ze.nextSibling,ss=es.nextSibling,ns=ss.nextSibling,U=ns.nextSibling,as=U.firstChild,ls=as.nextSibling,ts=ls.nextSibling,rs=ts.nextSibling,is=rs.firstChild,Y=is.firstChild,cs=Y.firstChild,ds=U.nextSibling,K=ds.nextSibling,hs=K.firstChild,os=hs.nextSibling,ms=os.nextSibling,ps=ms.nextSibling,gs=ps.firstChild,Q=gs.firstChild,us=Q.firstChild,Z=us.nextSibling;Z.nextSibling;const Ns=K.nextSibling,js=Ns.nextSibling,vs=js.nextSibling,ee=vs.nextSibling,bs=ee.firstChild,_s=bs.nextSibling,fs=_s.nextSibling,ys=fs.nextSibling,$s=ys.firstChild,$=$s.firstChild,xs=$.firstChild,se=xs.nextSibling,Bs=se.nextSibling,ne=Bs.nextSibling;ne.nextSibling;const ks=ee.nextSibling,ae=ks.nextSibling,Ss=ae.firstChild,le=Ss.nextSibling,Cs=le.firstChild,x=Cs.firstChild,ws=x.firstChild,Ts=le.nextSibling,Ls=Ts.nextSibling,Ps=Ls.firstChild,B=Ps.firstChild,zs=B.firstChild,te=zs.nextSibling;te.nextSibling;const Is=ae.nextSibling,Rs=Is.nextSibling,Ds=Rs.nextSibling,Es=Ds.nextSibling,Ms=Es.firstChild,As=Ms.nextSibling,qs=As.nextSibling;return n(l,e(s.h2,{children:"API"}),i),n(l,e(s.h3,{children:"Button"}),i),n(l,e(s.p,{get children(){return e(s.code,{children:"import { Button } from 'solid-bootstrap'"})}}),i),n(P,e(s.code,{children:"false"})),n(z,e(s.code,{children:":active"}),null),n(R,e(s.code,{children:"false"})),n(D,e(s.code,{children:""}),E),n(_,e(s.code,{children:"href"}),A),n(_,e(s.code,{children:""}),q),n(f,e(s.code,{children:"'sm'"}),Te),n(f,e(s.code,{children:"'lg'"}),null),n(g,e(s.code,{children:"'button'"}),O),n(g,e(s.code,{children:"'reset'"}),W),n(g,e(s.code,{children:"'submit'"}),Ie),n(g,e(s.code,{children:"null"}),null),n(Re,e(s.code,{children:"'button'"})),n(X,e(s.code,{children:"'primary'"})),n(J,e(s.code,{children:"'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'link'"})),n(Oe,e(s.code,{children:"'outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-dark', 'outline-light'"})),n(Ue,e(s.code,{children:"'btn'"})),n(l,e(s.h3,{children:"ToggleButton"}),y),n(l,e(s.p,{get children(){return e(s.code,{children:"import { ToggleButton } from 'solid-bootstrap'"})}}),y),n(Y,e(s.code,{children:"id"}),cs),n(Q,e(s.code,{children:""}),Z),n($,e(s.code,{children:""}),se),n($,e(s.code,{children:"onChange"}),ne),n(x,e(s.code,{children:"'checkbox'"}),ws),n(x,e(s.code,{children:"'radio'"}),null),n(B,e(s.code,{children:""}),te),n(B,e(s.code,{children:"type"}),null),n(qs,e(s.code,{children:"'btn-check'"})),l})()}}const ln=m('

    '),tn=m('
    '),rn=m('
    ');function Nn(c={}){const{wrapper:r}=Object.assign({},b(),c.components);return r?e(r,L(c,{get children(){return e(h,{})}})):h();function h(){const s=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span",div:"div"},b(),c.components);return a||v("Example",!1),a.Code||v("Example.Code",!0),a.Intro||v("Example.Intro",!0),a.Preview||v("Example.Preview",!0),[e(Us,{name:"ButtonDocs.mdx"}),` +`,e(s.h1,{children:"Buttons"}),` +`,(()=>{const l=ln.cloneNode(!0);return n(l,e(s.p,{children:`Custom button styles for actions in forms, dialogs, and more with\r +support for multiple sizes, states, and more.`})),l})(),` +`,(()=>{const l=rn.cloneNode(!0);return n(l,e(a,{title:"Examples",get children(){return[e(a.Intro,{get children(){return e(s.p,{children:"Use any of the available button style types to quickly create a styled button. Just modify the variant prop."})}}),e(a.Preview,{get children(){return[e(t,{variant:"primary",children:"Primary"})," ",e(t,{variant:"secondary",children:"Secondary"})," ",e(t,{variant:"success",children:"Success"})," ",e(t,{variant:"warning",children:"Warning"})," ",e(t,{variant:"danger",children:"Danger"})," ",e(t,{variant:"info",children:"Info"})," ",e(t,{variant:"light",children:"Light"})," ",e(t,{variant:"dark",children:"Dark"})," ",e(t,{variant:"link",children:"Link"})]}}),e(a.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return[" <",e(s.span,{className:"hljs-title class_",children:"Button"})," variant=",e(s.span,{className:"hljs-string",children:'"primary"'}),">",e(s.span,{className:"hljs-title class_",children:"Primary"}),"\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," ",e(s.span,{className:"hljs-attr",children:"variant"}),"=",e(s.span,{className:"hljs-string",children:'"secondary"'}),">"]}}),"Secondary",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," ",e(s.span,{className:"hljs-attr",children:"variant"}),"=",e(s.span,{className:"hljs-string",children:'"success"'}),">"]}}),"Success",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," ",e(s.span,{className:"hljs-attr",children:"variant"}),"=",e(s.span,{className:"hljs-string",children:'"warning"'}),">"]}}),"Warning",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," ",e(s.span,{className:"hljs-attr",children:"variant"}),"=",e(s.span,{className:"hljs-string",children:'"danger"'}),">"]}}),"Danger",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," ",e(s.span,{className:"hljs-attr",children:"variant"}),"=",e(s.span,{className:"hljs-string",children:'"info"'}),">"]}}),"Info",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," ",e(s.span,{className:"hljs-attr",children:"variant"}),"=",e(s.span,{className:"hljs-string",children:'"light"'}),">"]}}),"Light",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," ",e(s.span,{className:"hljs-attr",children:"variant"}),"=",e(s.span,{className:"hljs-string",children:'"dark"'}),">"]}}),"Dark",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," ",e(s.span,{className:"hljs-attr",children:"variant"}),"=",e(s.span,{className:"hljs-string",children:'"link"'}),">"]}}),"Link",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),` +`]}})}})}})]}}),null),n(l,e(a,{title:"Outline buttons",get children(){return[e(a.Intro,{get children(){return e(s.p,{get children(){return["For a lighter touch, Buttons also come in ",e(s.code,{children:"outline-*"})," variants with no background color."]}})}}),e(a.Preview,{get children(){return[e(t,{variant:"outline-primary",children:"Primary"})," ",e(t,{variant:"outline-secondary",children:"Secondary"})," ",e(t,{variant:"outline-success",children:"Success"})," ",e(t,{variant:"outline-warning",children:"Warning"})," ",e(t,{variant:"outline-danger",children:"Danger"})," ",e(t,{variant:"outline-info",children:"Info"})," ",e(t,{variant:"outline-light",children:"Light"})," ",e(t,{variant:"outline-dark",children:"Dark"})]}}),e(a.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return["<",e(s.span,{className:"hljs-title class_",children:"Button"})," variant=",e(s.span,{className:"hljs-string",children:'"outline-primary"'}),">",e(s.span,{className:"hljs-title class_",children:"Primary"}),"{",e(s.span,{className:"hljs-string",children:'" "'}),`}\r +<`,e(s.span,{className:"hljs-title class_",children:"Button"})," variant=",e(s.span,{className:"hljs-string",children:'"outline-secondary"'}),">",e(s.span,{className:"hljs-title class_",children:"Secondary"}),"{",e(s.span,{className:"hljs-string",children:'" "'}),`}\r +<`,e(s.span,{className:"hljs-title class_",children:"Button"})," variant=",e(s.span,{className:"hljs-string",children:'"outline-success"'}),">",e(s.span,{className:"hljs-title class_",children:"Success"}),"{",e(s.span,{className:"hljs-string",children:'" "'}),`}\r +<`,e(s.span,{className:"hljs-title class_",children:"Button"})," variant=",e(s.span,{className:"hljs-string",children:'"outline-warning"'}),">",e(s.span,{className:"hljs-title class_",children:"Warning"}),"{",e(s.span,{className:"hljs-string",children:'" "'}),`}\r +<`,e(s.span,{className:"hljs-title class_",children:"Button"})," variant=",e(s.span,{className:"hljs-string",children:'"outline-danger"'}),">",e(s.span,{className:"hljs-title class_",children:"Danger"}),"{",e(s.span,{className:"hljs-string",children:'" "'}),`}\r +<`,e(s.span,{className:"hljs-title class_",children:"Button"})," variant=",e(s.span,{className:"hljs-string",children:'"outline-info"'}),">",e(s.span,{className:"hljs-title class_",children:"Info"}),"{",e(s.span,{className:"hljs-string",children:'" "'}),`}\r +<`,e(s.span,{className:"hljs-title class_",children:"Button"})," variant=",e(s.span,{className:"hljs-string",children:'"outline-light"'}),">",e(s.span,{className:"hljs-title class_",children:"Light"}),"{",e(s.span,{className:"hljs-string",children:'" "'}),`}\r +<`,e(s.span,{className:"hljs-title class_",children:"Button"})," variant=",e(s.span,{className:"hljs-string",children:'"outline-dark"'}),">",e(s.span,{className:"hljs-title class_",children:"Dark"})," +`]}})}})}})]}}),null),n(l,e(a,{title:"Button tags",get children(){return[e(a.Intro,{get children(){return e(s.p,{get children(){return["Normally ",e(s.code,{children:"    '),Ve=c(''),te=c(''),Be=c(''),Ye=40,Je={as:"div",slide:!0,fade:!1,controls:!0,indicators:!0,indicatorLabels:[],defaultActiveIndex:0,interval:5e3,keyboard:!0,pause:"hover",wrap:!0,touch:!0,prevLabel:"Previous",nextLabel:"Next"};function Qe(d){if(!d||!d.style||!d.parentNode||!d.parentNode.style)return!1;const n=getComputedStyle(d);return n.display!=="none"&&n.visibility!=="hidden"&&getComputedStyle(d.parentNode).display!=="none"}const es=d=>{const[n,b]=ie(L(Je,d),["as","bsPrefix","slide","fade","controls","indicators","indicatorLabels","activeIndex","defaultActiveIndex","onSelect","onSlide","onSlid","interval","keyboard","onKeyDown","pause","onMouseOver","onMouseOut","wrap","touch","onTouchStart","onTouchMove","onTouchEnd","prevIcon","prevLabel","nextIcon","nextLabel","variant","class","children","ref"]),[s,p]=Te(()=>n.activeIndex,()=>n.defaultActiveIndex,n.onSelect),a=de(n.bsPrefix,"carousel"),M=Le(),he=Me(()=>n.children),y=h(()=>{const t=he();return Array.isArray(t)?t:[t]}),[q,G]=v(null),[W,X]=v("next"),[pe,A]=v(!1),[E,K]=v(!1),[f,me]=v(s()||0);Ae(()=>Re(()=>{!E()&&s()!==f()&&(q()?X(q()):X((s()||0)>f()?"next":"prev"),n.slide&&K(!0),me(s()||0))})),Z(()=>{q()&&G(null)});const ue=h(()=>{for(let t=0;t{if(E())return;let i=f()-1;if(i<0){if(!n.wrap)return;i=y().length-1}G("prev"),p?.(i,t)},x=t=>{if(E())return;let i=f()+1;if(i>=y().length){if(!n.wrap)return;i=0}G("next"),p?.(i,t)},[H,ge]=v(),Ne=t=>{ge(t),typeof n.ref=="function"&&n.ref({get element(){return H()},prev:C,next:x})},je=()=>{!document.hidden&&Qe(H())&&(M()?C():x())},S=h(()=>W()==="next"?"start":"end");Z(()=>{n.slide||(n.onSlide?.(f(),S()),n.onSlid?.(f(),S()))});const fe=h(()=>`${a}-item-${W()}`),ve=h(()=>`${a}-item-${S()}`),be=t=>{Ue(t),n.onSlide?.(f(),S())},ye=()=>{K(!1),n.onSlid?.(f(),S())},Ce=t=>{if(n.keyboard&&!/input|textarea/i.test(t.target.tagName))switch(t.key){case"ArrowLeft":t.preventDefault(),M()?x(t):C(t);return;case"ArrowRight":t.preventDefault(),M()?C(t):x(t);return}I(n.onKeyDown,t)},xe=t=>{n.pause==="hover"&&A(!0),I(n.onMouseOver,t)},$e=t=>{A(!1),I(n.onMouseOut,t)};let V,D;const we=t=>{V=t.touches[0].clientX,D=0,n.pause==="hover"&&A(!0),I(n.onTouchStart,t)},Ie=t=>{t.touches&&t.touches.length>1?D=0:D=t.touches[0].clientX-V,I(n.onTouchMove,t)},Se=t=>{if(n.touch){const i=D;Math.abs(i)>Ye&&(i>0?C(t):x(t))}if(n.pause==="hover"){let i=window.setTimeout(()=>{A(!1)},n.interval);se(()=>{window.clearTimeout(i)})}I(n.onTouchEnd,t)},_e=h(()=>n.interval!=null&&!pe()&&!E()),[B,Pe]=v();Z(()=>{if(!_e())return;const t=M()?C:x;Pe(window.setInterval(document.visibilityState?je:t,ue()??n.interval??void 0)),se(()=>{B()!==null&&clearInterval(B())})});const $=Ee(f);return e(oe,L({get component(){return n.as},ref:Ne},b,{onKeyDown:Ce,onMouseOver:xe,onMouseOut:$e,onTouchStart:we,onTouchMove:Ie,onTouchEnd:Se,get class(){return z(n.class,a,n.slide&&"slide",n.fade&&`${a}-fade`,n.variant&&`${a}-${n.variant}`)},get children(){return[h(()=>h(()=>!!n.indicators)()&&(()=>{const t=ne.cloneNode(!0);return R(t,`${a}-indicators`),l(t,e(J,{get each(){return y()},children:(i,N)=>(()=>{const j=He.cloneNode(!0);return j.$$click=m=>p?.(N(),m),De(m=>{const O=n.indicatorLabels?.length?n.indicatorLabels[N()]:`Slide ${N()+1}`,_=$(N())?"active":void 0,Y=$(N());return O!==m._v$&&Q(j,"aria-label",m._v$=O),_!==m._v$2&&R(j,m._v$2=_),Y!==m._v$3&&Q(j,"aria-current",m._v$3=Y),m},{_v$:void 0,_v$2:void 0,_v$3:void 0}),j})()})),t})()),(()=>{const t=ne.cloneNode(!0);return R(t,`${a}-inner`),l(t,e(J,{get each(){return y()},children:(i,N)=>{const j=typeof i.item=="function"?i.item():i.item;return n.slide?e(Oe,{get in(){return $(N())},get onEnter(){return $(N())?be:void 0},get onEntered(){return $(N())?ye:void 0},addEndListener:Ze,children:(m,O)=>{O.ref(j);const _=z($(N())&&m!=="entered"&&fe(),(m==="entered"||m==="exiting")&&"active",(m==="entering"||m==="exiting")&&ve());return qe(j,i.prevClasses,_),i.prevClasses=_,j}}):()=>(Z(()=>{j.classList.toggle("active",$(N()))}),j)}})),t})(),h(()=>h(()=>!!n.controls)()&&[h((()=>{const t=h(()=>!!(n.wrap||s()!==0));return()=>t()&&e(ee,{class:`${a}-control-prev`,onClick:C,get children(){return[h(()=>n.prevIcon??Ve.cloneNode(!0)),h(()=>h(()=>!!n.prevLabel)()&&(()=>{const i=te.cloneNode(!0);return l(i,()=>n.prevLabel),i})())]}})})()),h((()=>{const t=h(()=>!!(n.wrap||s()!==y().length-1));return()=>t()&&e(ee,{class:`${a}-control-next`,onClick:x,get children(){return[h(()=>n.nextIcon??Be.cloneNode(!0)),h(()=>h(()=>!!n.nextLabel)()&&(()=>{const i=te.cloneNode(!0);return l(i,()=>n.nextLabel),i})())]}})})())])]}}))},r=Object.assign(es,{Caption:Fe,Item:Ke});Ge(["click"]);const ss=c(`

    API

    Carousel

    import { Carousel } from 'solid-bootstrap'
    NameTypeDefaultDescription
    activeIndex
    number
    controlled by: onSelect, initial prop: defaultActiveindex

    Controls the current visible slide

    as
    elementType

    You can use a custom element type for this component.

    controls
    boolean
    		true

    Show the Carousel previous and next arrows for changing the current slide

    fade
    boolean
    		false

    Animates slides with a crossfade animation instead of the default slide animation

    indicatorLabels
    array<>
    		[]

    An array of labels for the indicators. Defaults to "Slide #" if not provided.

    indicators
    boolean
    		true

    Show a set of slide position indicators

    interval
    number
    		5000

    The amount of time to delay between automatically cycling an item. If null, carousel will not automatically cycle.

    keyboard
    boolean
    		true

    Whether the carousel should react to keyboard events.

    nextIcon
    node
    		<span aria-hidden="true" class="carousel-control-next-icon" />

    Override the default button icon for the "next" control

    nextLabel
    string
    		'Next'

    Label shown to screen readers only, can be used to show the next element in the carousel. Set to null to deactivate.

    onSelect
    function
    controls activeIndex

    Callback fired when the active item changes.

    (eventKey: number, event: Object | null) => void
    onSlid
    function

    Callback fired when a slide transition ends.

    (eventKey: number, direction: 'left' | 'right') => void
    onSlide
    function

    Callback fired when a slide transition starts.

    (eventKey: number, direction: 'left' | 'right') => void
    pause
    'hover' | false
    		'hover'

    If set to "hover", pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave. If set to false, hovering over the carousel won't pause it.

    On touch-enabled devices, when set to "hover", cycling will pause on touchend (once the user finished interacting with the carousel) for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.

    prevIcon
    node
    		<span aria-hidden="true" class="carousel-control-prev-icon" />

    Override the default button icon for the "previous" control

    prevLabel
    string
    		'Previous'

    Label shown to screen readers only, can be used to show the previous element in the carousel. Set to null to deactivate.

    slide
    boolean
    		true

    Enables animation on the Carousel as it transitions between slides.

    touch
    boolean
    		true

    Whether the carousel should support left/right swipe interactions on touchscreen devices.

    variant
    'dark'

    Color variant that controls the colors of the controls, indicators and captions.

    wrap
    boolean
    		true

    Whether the carousel should cycle continuously or have hard stops.

    bsPrefix
    string
    		'carousel'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Carousel.Item

    NameTypeDefaultDescription
    as
    elementType
    		<div>

    Set a custom element for this component

    interval
    number

    The amount of time to delay between automatically cycling this specific item. Will default to the Carousel's interval prop value if none is specified.

    bsPrefix
    string
    		'carousel-item'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Carousel.Caption

    NameTypeDefaultDescription
    as
    elementType
    		<div>

    You can use a custom element type for this component.

    bsPrefix required
    string
    		'carousel-caption'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    `),as=()=>ss.cloneNode(!0),ns=c(''),P=d=>(()=>{const n=ns.cloneNode(!0);return F(n,d,!0,!0),n})(),ts=c(''),k=d=>(()=>{const n=ts.cloneNode(!0);return F(n,d,!0,!0),n})(),ls=c(''),T=d=>(()=>{const n=ls.cloneNode(!0);return F(n,d,!0,!0),n})(),U=c('
    '),rs=c("

    First slide label

    "),cs=c("

    Nulla vitae elit libero, a pharetra augue mollis interdum.

    "),is=c("

    Second slide label

    "),ds=c("

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    "),os=c("

    Third slide label

    "),hs=c("

    Praesent commodo cursus magna, vel scelerisque nisl consectetur.

    ");function ps(){const[d,n]=v(0);return e(r,{get activeIndex(){return d()},onSelect:(s,p)=>{n(s)},get children(){return[e(r.Item,{get children(){return[(()=>{const s=U.cloneNode(!0);return s.style.setProperty("height","400px"),l(s,e(P,{})),s})(),e(r.Caption,{get children(){return[rs.cloneNode(!0),cs.cloneNode(!0)]}})]}}),e(r.Item,{get children(){return[(()=>{const s=U.cloneNode(!0);return s.style.setProperty("height","400px"),l(s,e(k,{})),s})(),e(r.Caption,{get children(){return[is.cloneNode(!0),ds.cloneNode(!0)]}})]}}),e(r.Item,{get children(){return[(()=>{const s=U.cloneNode(!0);return s.style.setProperty("height","400px"),l(s,e(T,{})),s})(),e(r.Caption,{get children(){return[os.cloneNode(!0),hs.cloneNode(!0)]}})]}})]}})}const ms=c('

    '),u=c('
    '),le=c("

    First slide label

    "),g=c("

    "),re=c("

    Second slide label

    "),ce=c("

    Third slide label

    "),us=c("

    First slide label

    "),gs=c("

    Second slide label

    "),Ns=c("

    Third slide label

    "),js=c("

    First slide label (1 sec)

    "),fs=c("

    Second slide label (2 secs)

    "),vs=c("

    Third slide label (3 secs)

    "),bs=c('
    ');function Is(d={}){const{wrapper:n}=Object.assign({},ae(),d.components);return n?e(n,L(d,{get children(){return e(b,{})}})):b();function b(){const s=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span"},ae(),d.components);return r||w("Carousel",!1),r.Caption||w("Carousel.Caption",!0),r.Item||w("Carousel.Item",!0),o||w("Example",!1),o.Code||w("Example.Code",!0),o.Intro||w("Example.Intro",!0),o.Preview||w("Example.Preview",!0),[e(ze,{name:"CarouselDocs.mdx"}),` +`,e(s.h1,{children:"Carousel"}),` +`,(()=>{const p=ms.cloneNode(!0);return l(p,e(s.p,{children:"A slideshow component for cycling through elements\u2014images or slides of text\u2014like a carousel."})),p})(),` +`,(()=>{const p=bs.cloneNode(!0);return l(p,e(o,{title:"Example",get children(){return[e(o.Intro,{get children(){return e(s.p,{children:"Carousels don\u2019t automatically normalize slide dimensions. As such, you may need to use additional utilities or custom styles to appropriately size content. While carousels support previous/next controls and indicators, they\u2019re not explicitly required. Add and customize as you see fit."})}}),e(o.Preview,{get children(){return e(r,{get children(){return[e(r.Item,{get children(){return[(()=>{const a=u.cloneNode(!0);return a.style.setProperty("height","400px"),l(a,e(P,{})),a})(),e(r.Caption,{get children(){return[le.cloneNode(!0),(()=>{const a=g.cloneNode(!0);return l(a,e(s.p,{children:"Nulla vitae elit libero, a pharetra augue mollis interdum."})),a})()]}})]}}),e(r.Item,{get children(){return[(()=>{const a=u.cloneNode(!0);return a.style.setProperty("height","400px"),l(a,e(k,{})),a})(),e(r.Caption,{get children(){return[re.cloneNode(!0),(()=>{const a=g.cloneNode(!0);return l(a,e(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."})),a})()]}})]}}),e(r.Item,{get children(){return[(()=>{const a=u.cloneNode(!0);return a.style.setProperty("height","400px"),l(a,e(T,{style:{height:"150px"}})),a})(),e(r.Caption,{get children(){return[ce.cloneNode(!0),(()=>{const a=g.cloneNode(!0);return l(a,e(s.p,{children:`Praesent commodo cursus magna, vel scelerisque nisl\r +consectetur.`})),a})()]}})]}})]}})}}),e(o.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return["<",e(s.span,{className:"hljs-title class_",children:"Carousel"}),`>\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid1"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h2"}),">"]}}),"First slide label",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Nulla vitae elit libero, a pharetra augue mollis interdum.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid2"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r +\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h2"}),">"]}}),"Second slide label",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid3"})," ",e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"150px"}),'" }} />']}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r +\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h2"}),">"]}}),"Third slide label",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Praesent commodo cursus magna, vel scelerisque nisl\r + consectetur.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}}),null),l(p,e(o,{title:"Controlled",get children(){return[e(o.Intro,{get children(){return e(s.p,{get children(){return["You can also control the Carousel state, via the ",e(s.code,{children:"activeIndex"})," prop and ",e(s.code,{children:"onSelect"})," handler."]}})}}),e(o.Preview,{get children(){return e(ps,{})}}),e(o.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return[e(s.span,{className:"hljs-keyword",children:"const"})," [index, setIndex] = ",e(s.span,{className:"hljs-title function_",children:"createSignal"}),"(",e(s.span,{className:"hljs-number",children:"0"}),`);\r +\r +`,e(s.span,{className:"hljs-keyword",children:"const"})," ",e(s.span,{className:"hljs-title function_",children:"handleSelect"})," = (",e(s.span,{className:"hljs-params",get children(){return[`\r + selectedIndex: number,\r + e: Record | `,e(s.span,{className:"hljs-literal",children:"null"}),`\r +`]}}),`) => {\r + `,e(s.span,{className:"hljs-title function_",children:"setIndex"}),`(selectedIndex);\r +};\r +\r +`,e(s.span,{className:"hljs-keyword",children:"return"}),` (\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel"})," ",e(s.span,{className:"hljs-attr",children:"activeIndex"}),"=",e(s.span,{className:"hljs-string",children:"{index()}"})," ",e(s.span,{className:"hljs-attr",children:"onSelect"}),"=",e(s.span,{className:"hljs-string",children:"{handleSelect}"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid1"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h3"}),">"]}}),"First slide label",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),"Nulla vitae elit libero, a pharetra augue mollis interdum.",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid2"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h3"}),">"]}}),"Second slide label",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid3"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h3"}),">"]}}),"Third slide label",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Praesent commodo cursus magna, vel scelerisque nisl\r + consectetur.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +) +`]}})}})}})]}}),null),l(p,e(o,{title:"Crossfade",get children(){return[e(o.Intro,{get children(){return e(s.p,{children:"Add the fade prop to your carousel to animate slides with a fade transition instead of a slide."})}}),e(o.Preview,{get children(){return e(r,{fade:!0,get children(){return[e(r.Item,{get children(){return[(()=>{const a=u.cloneNode(!0);return a.style.setProperty("height","400px"),l(a,e(P,{})),a})(),e(r.Caption,{get children(){return[us.cloneNode(!0),(()=>{const a=g.cloneNode(!0);return l(a,e(s.p,{children:"Nulla vitae elit libero, a pharetra augue mollis interdum."})),a})()]}})]}}),e(r.Item,{get children(){return[(()=>{const a=u.cloneNode(!0);return a.style.setProperty("height","400px"),l(a,e(k,{})),a})(),e(r.Caption,{get children(){return[gs.cloneNode(!0),(()=>{const a=g.cloneNode(!0);return l(a,e(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."})),a})()]}})]}}),e(r.Item,{get children(){return[(()=>{const a=u.cloneNode(!0);return a.style.setProperty("height","400px"),l(a,e(T,{})),a})(),e(r.Caption,{get children(){return[Ns.cloneNode(!0),(()=>{const a=g.cloneNode(!0);return l(a,e(s.p,{children:`Praesent commodo cursus magna, vel scelerisque nisl\r +consectetur.`})),a})()]}})]}})]}})}}),e(o.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return["<",e(s.span,{className:"hljs-title class_",children:"Carousel"}),` fade>\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid1"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h3"}),">"]}}),"First slide label",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Nulla vitae elit libero, a pharetra augue mollis interdum.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid2"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h3"}),">"]}}),"Second slide label",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid3"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h3"}),">"]}}),"Third slide label",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Praesent commodo cursus magna, vel scelerisque nisl\r + consectetur.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}}),null),l(p,e(o,{title:"Individual Item Intervals",get children(){return[e(o.Intro,{get children(){return e(s.p,{get children(){return["You can specify individual intervals for each carousel item via the ",e(s.code,{children:"interval"})," prop."]}})}}),e(o.Preview,{get children(){return e(r,{get children(){return[e(r.Item,{interval:1e3,get children(){return[(()=>{const a=u.cloneNode(!0);return a.style.setProperty("height","400px"),l(a,e(P,{})),a})(),e(r.Caption,{get children(){return[js.cloneNode(!0),(()=>{const a=g.cloneNode(!0);return l(a,e(s.p,{children:"Nulla vitae elit libero, a pharetra augue mollis interdum."})),a})()]}})]}}),e(r.Item,{interval:2e3,get children(){return[(()=>{const a=u.cloneNode(!0);return a.style.setProperty("height","400px"),l(a,e(k,{})),a})(),e(r.Caption,{get children(){return[fs.cloneNode(!0),(()=>{const a=g.cloneNode(!0);return l(a,e(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."})),a})()]}})]}}),e(r.Item,{interval:3e3,get children(){return[(()=>{const a=u.cloneNode(!0);return a.style.setProperty("height","400px"),l(a,e(T,{})),a})(),e(r.Caption,{get children(){return[vs.cloneNode(!0),(()=>{const a=g.cloneNode(!0);return l(a,e(s.p,{children:`Praesent commodo cursus magna, vel scelerisque nisl\r +consectetur.`})),a})()]}})]}})]}})}}),e(o.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return["<",e(s.span,{className:"hljs-title class_",children:"Carousel"}),`>\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"})," ",e(s.span,{className:"hljs-attr",children:"interval"}),"=",e(s.span,{className:"hljs-string",children:"{1000}"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid1"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h3"}),">"]}}),"First slide label (1 sec)",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Nulla vitae elit libero, a pharetra augue mollis interdum.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"})," ",e(s.span,{className:"hljs-attr",children:"interval"}),"=",e(s.span,{className:"hljs-string",children:"{2000}"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid2"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h3"}),">"]}}),"Second slide label (2 secs)",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"})," ",e(s.span,{className:"hljs-attr",children:"interval"}),"=",e(s.span,{className:"hljs-string",children:"{3000}"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid3"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h3"}),">"]}}),"Third slide label (3 secs)",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Praesent commodo cursus magna, vel scelerisque nisl\r + consectetur.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}}),null),l(p,e(o,{title:"Dark variant",get children(){return[e(o.Intro,{get children(){return e(s.p,{get children(){return["Add ",e(s.code,{children:'variant="dark"'})," to the ",e(s.code,{children:"Carousel"})," for darker controls, indicators, and captions."]}})}}),e(o.Preview,{get children(){return e(r,{variant:"dark",get children(){return[e(r.Item,{get children(){return[(()=>{const a=u.cloneNode(!0);return a.style.setProperty("height","400px"),l(a,e(P,{})),a})(),e(r.Caption,{get children(){return[le.cloneNode(!0),(()=>{const a=g.cloneNode(!0);return l(a,e(s.p,{children:"Nulla vitae elit libero, a pharetra augue mollis interdum."})),a})()]}})]}}),e(r.Item,{get children(){return[(()=>{const a=u.cloneNode(!0);return a.style.setProperty("height","400px"),l(a,e(k,{})),a})(),e(r.Caption,{get children(){return[re.cloneNode(!0),(()=>{const a=g.cloneNode(!0);return l(a,e(s.p,{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit."})),a})()]}})]}}),e(r.Item,{get children(){return[(()=>{const a=u.cloneNode(!0);return a.style.setProperty("height","400px"),l(a,e(T,{style:{height:"150px"}})),a})(),e(r.Caption,{get children(){return[ce.cloneNode(!0),(()=>{const a=g.cloneNode(!0);return l(a,e(s.p,{children:`Praesent commodo cursus magna, vel scelerisque nisl\r +consectetur.`})),a})()]}})]}})]}})}}),e(o.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-js",get children(){return["<",e(s.span,{className:"hljs-title class_",children:"Carousel"})," variant=",e(s.span,{className:"hljs-string",children:'"dark"'}),`>\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid1"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h2"}),">"]}}),"First slide label",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Nulla vitae elit libero, a pharetra augue mollis interdum.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid2"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r +\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h2"}),">"]}}),"Second slide label",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Lorem ipsum dolor sit amet, consectetur adipiscing elit.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Item"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-block w-100 bg-secondary d-flex justify-content-center align-items-center"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"400px"}),`" }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Solid3"})," ",e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"})," ",e(s.span,{className:"hljs-attr",children:"height:"}),' "',e(s.span,{className:"hljs-attr",children:"150px"}),'" }} />']}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r +\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Carousel.Caption"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"h2"}),">"]}}),"Third slide label",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"p"}),">"]}}),`\r + Praesent commodo cursus magna, vel scelerisque nisl\r + consectetur.\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}}),null),l(p,e(as,{}),null),p})()]}}function w(d,n){throw new Error("Expected "+(n?"component":"object")+" `"+d+"` to be defined: you likely forgot to import, pass, or provide it.")}export{Is as default}; diff --git a/assets/CloseButtonDocs.e14a91ef.js b/assets/CloseButtonDocs.e14a91ef.js new file mode 100644 index 0000000..cf681be --- /dev/null +++ b/assets/CloseButtonDocs.e14a91ef.js @@ -0,0 +1,12 @@ +import{t as d,c as e,m as p,o as s,x as a}from"./index.3b024fd0.js";import{M as u}from"./index.62c812ca.js";import{E as r}from"./Example.5c690fb1.js";import{G as m}from"./GithubSource.f477ce58.js";import"./Card.9a738601.js";const g=d(`

    API

    CloseButton

    import { CloseButton } from 'solid-bootstrap'
    NameTypeDefaultDescription
    aria-label
    string
    		'Close'
    onClick
    function
    variant
    'white'

    Render different color variant for the button.

    Omitting this will render the default dark color.

    `),v=()=>g.cloneNode(!0),b=d('

    '),f=d('
    '),j=d('
    ');function B(l={}){const{wrapper:o}=Object.assign({},u(),l.components);return o?e(o,p(l,{get children(){return e(h,{})}})):h();function h(){const t=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span"},u(),l.components);return r||i("Example",!1),r.Code||i("Example.Code",!0),r.Intro||i("Example.Intro",!0),r.Preview||i("Example.Preview",!0),[e(m,{name:"CloseButtonDocs.mdx"}),` +`,e(t.h1,{children:"Close Button"}),` +`,(()=>{const n=b.cloneNode(!0);return s(n,e(t.p,{children:`A generic close button for dismissing content such as modals and\r +alerts.`})),n})(),` +`,(()=>{const n=j.cloneNode(!0);return s(n,e(r,{title:"Example",get children(){return[e(r.Intro,{get children(){return e(t.p,{children:"A generic close button for dismissing content such as modals and alerts."})}}),e(r.Preview,{get children(){return e(a,{})}}),e(r.Code,{get children(){return e(t.pre,{get children(){return e(t.code,{className:"hljs language-js",get children(){return["<",e(t.span,{className:"hljs-title class_",children:"CloseButton"}),` /> +`]}})}})}})]}}),null),s(n,e(r,{title:"Disabled state",get children(){return[e(r.Intro,{get children(){return e(t.p,{children:"Bootstrap adds relevant styling to a disabled close button to prevent user interactions."})}}),e(r.Preview,{get children(){return e(a,{disabled:!0})}}),e(r.Code,{get children(){return e(t.pre,{get children(){return e(t.code,{className:"hljs language-js",get children(){return["<",e(t.span,{className:"hljs-title class_",children:"CloseButton"}),` disabled /> +`]}})}})}})]}}),null),s(n,e(r,{title:"Variants",get children(){return[e(r.Intro,{get children(){return e(t.p,{get children(){return["Change the default dark color to white using ",e(t.code,{children:'variant="white"'}),"."]}})}}),e(r.Preview,{get children(){const c=f.cloneNode(!0);return s(c,e(a,{variant:"white"}),null),s(c,e(a,{variant:"white",disabled:!0}),null),c}}),e(r.Code,{get children(){return e(t.pre,{get children(){return e(t.code,{className:"hljs language-js",get children(){return["
    \r + `,e(t.span,{className:"xml",get children(){return e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"CloseButton"})," ",e(t.span,{className:"hljs-attr",children:"variant"}),"=",e(t.span,{className:"hljs-string",children:'"white"'})," />"]}})}}),`\r + `,e(t.span,{className:"xml",get children(){return e(t.span,{className:"hljs-tag",get children(){return["<",e(t.span,{className:"hljs-name",children:"CloseButton"})," ",e(t.span,{className:"hljs-attr",children:"variant"}),"=",e(t.span,{className:"hljs-string",children:'"white"'})," ",e(t.span,{className:"hljs-attr",children:"disabled"})," />"]}})}}),`\r +
    +`]}})}})}})]}}),null),s(n,e(r,{title:"Accessibility",get children(){return[e(r.Intro,{get children(){return e(t.p,{get children(){return["To ensure the maximum accessibility for Close Button components, it is recommended that you provide relevant text for screen readers. The example below provides an example of accessible usage of this component by way of the ",e(t.code,{children:"aria-label"})," property."]}})}}),e(r.Preview,{get children(){return e(a,{"aria-label":"Hide"})}}),e(r.Code,{get children(){return e(t.pre,{get children(){return e(t.code,{className:"hljs language-js",get children(){return["<",e(t.span,{className:"hljs-title class_",children:"CloseButton"})," aria-label=",e(t.span,{className:"hljs-string",children:'"Hide"'}),` /> +`]}})}})}})]}}),null),s(n,e(v,{}),null),n})()]}}function i(l,o){throw new Error("Expected "+(o?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}export{B as default}; diff --git a/assets/Components.b04d409d.js b/assets/Components.b04d409d.js new file mode 100644 index 0000000..617a991 --- /dev/null +++ b/assets/Components.b04d409d.js @@ -0,0 +1 @@ +import{c as t,R as _,a as o,l as r,_ as e}from"./index.3b024fd0.js";import{L as n}from"./Layout.7bb15751.js";const m=p=>t(n,{get children(){return t(_,{get children(){return[t(o,{path:"accordion",get component(){return r(()=>e(()=>import("./AccordionDocs.9c8864e2.js"),["assets/AccordionDocs.9c8864e2.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js"]))}}),t(o,{path:"alerts",get component(){return r(()=>e(()=>import("./AlertDocs.16dc54e5.js"),["assets/AlertDocs.16dc54e5.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Alert.4f4dadf1.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css"]))}}),t(o,{path:"badge",get component(){return r(()=>e(()=>import("./BadgeDocs.a59e024b.js"),["assets/BadgeDocs.a59e024b.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Badge.fd0ac2ee.js","assets/Alert.4f4dadf1.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css"]))}}),t(o,{path:"breadcrumb",get component(){return r(()=>e(()=>import("./BreadcrumbDocs.f069b020.js"),["assets/BreadcrumbDocs.f069b020.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js"]))}}),t(o,{path:"buttons",get component(){return r(()=>e(()=>import("./ButtonDocs.98e2fae5.js"),["assets/ButtonDocs.98e2fae5.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css","assets/ButtonGroup.fa9e330d.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Alert.4f4dadf1.js"]))}}),t(o,{path:"button-group",get component(){return r(()=>e(()=>import("./ButtonGroupDocs.1f75d716.js"),["assets/ButtonGroupDocs.1f75d716.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Dropdown.83aba557.js","assets/Dropdown.1ab10eb7.js","assets/mergeOptionsWithPopperConfig.a93c26d5.js","assets/InputGroupContext.7b9a128a.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css","assets/InputGroup.9fefd50b.js","assets/FormControl.ea70be69.js","assets/ButtonGroup.fa9e330d.js","assets/DropdownButton.dd81a023.js"]))}}),t(o,{path:"cards",get component(){return r(()=>e(()=>import("./CardsDocs.02c57837.js"),["assets/CardsDocs.02c57837.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/utils.65a7fcf4.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/ListGroup.142a13d8.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css"]))}}),t(o,{path:"carousel",get component(){return r(()=>e(()=>import("./CarouselDocs.b4f1d975.js"),["assets/CarouselDocs.b4f1d975.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js"]))}}),t(o,{path:"close-button",get component(){return r(()=>e(()=>import("./CloseButtonDocs.e14a91ef.js"),["assets/CloseButtonDocs.e14a91ef.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js"]))}}),t(o,{path:"dropdowns",get component(){return r(()=>e(()=>import("./DropdownDocs.95126457.js"),["assets/DropdownDocs.95126457.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Dropdown.83aba557.js","assets/Dropdown.1ab10eb7.js","assets/mergeOptionsWithPopperConfig.a93c26d5.js","assets/InputGroupContext.7b9a128a.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css","assets/NavDropdown.5bf7a64f.js","assets/DropdownButton.dd81a023.js","assets/Stack.d0052ade.js","assets/ButtonGroup.fa9e330d.js","assets/SplitButton.7c398347.js","assets/Alert.4f4dadf1.js"]))}}),t(o,{path:"figures",get component(){return r(()=>e(()=>import("./FigureDocs.34bfba68.js"),["assets/FigureDocs.34bfba68.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/utils.65a7fcf4.js","assets/Image.7bb1252d.js"]))}}),t(o,{path:"images",get component(){return r(()=>e(()=>import("./ImageDocs.4a9388b5.js"),["assets/ImageDocs.4a9388b5.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/utils.65a7fcf4.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css","assets/Image.7bb1252d.js"]))}}),t(o,{path:"list-group",get component(){return r(()=>e(()=>import("./ListGroupDocs.3c388055.js"),["assets/ListGroupDocs.3c388055.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Sonnet.ac418c1d.js","assets/Alert.4f4dadf1.js","assets/ListGroup.142a13d8.js","assets/Badge.fd0ac2ee.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css"]))}}),t(o,{path:"modal",get component(){return r(()=>e(()=>import("./ModalDocs.cdeaf5e6.js"),["assets/ModalDocs.cdeaf5e6.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css","assets/ModalDocs.ed9463e4.css"]))}}),t(o,{path:"navs",get component(){return r(()=>e(()=>import("./NavDocs.3b3152a5.js"),["assets/NavDocs.3b3152a5.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/NavDropdown.5bf7a64f.js","assets/Dropdown.83aba557.js","assets/Dropdown.1ab10eb7.js","assets/mergeOptionsWithPopperConfig.a93c26d5.js","assets/InputGroupContext.7b9a128a.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css","assets/Alert.4f4dadf1.js"]))}}),t(o,{path:"navbar",get component(){return r(()=>e(()=>import("./NavbarDocs.6f37f7c0.js"),["assets/NavbarDocs.6f37f7c0.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/NavDropdown.5bf7a64f.js","assets/Dropdown.83aba557.js","assets/Dropdown.1ab10eb7.js","assets/mergeOptionsWithPopperConfig.a93c26d5.js","assets/InputGroupContext.7b9a128a.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css","assets/Form.0431b0cf.js","assets/FormControl.ea70be69.js","assets/Alert.4f4dadf1.js"]))}}),t(o,{path:"offcanvas",get component(){return r(()=>e(()=>import("./OffcanvasDocs.f8a81123.js"),["assets/OffcanvasDocs.f8a81123.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css"]))}}),t(o,{path:"pagination",get component(){return r(()=>e(()=>import("./PaginationDocs.72f0acd5.js"),["assets/PaginationDocs.72f0acd5.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js"]))}}),t(o,{path:"placeholder",get component(){return r(()=>e(()=>import("./PlaceholderDocs.e5657b21.js"),["assets/PlaceholderDocs.e5657b21.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/utils.65a7fcf4.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css","assets/Alert.4f4dadf1.js"]))}}),t(o,{path:"popovers",get component(){return r(()=>e(()=>import("./PopoverDocs.89be0532.js"),["assets/PopoverDocs.89be0532.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Overlay.7b54b170.js","assets/mergeOptionsWithPopperConfig.a93c26d5.js","assets/OverlayTrigger.f2848fdf.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css"]))}}),t(o,{path:"progress",get component(){return r(()=>e(()=>import("./ProgressBarDocs.166d8c19.js"),["assets/ProgressBarDocs.166d8c19.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js"]))}}),t(o,{path:"spinners",get component(){return r(()=>e(()=>import("./SpinnerDocs.5fe0271b.js"),["assets/SpinnerDocs.5fe0271b.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css"]))}}),t(o,{path:"table",get component(){return r(()=>e(()=>import("./TableDocs.807ef684.js"),["assets/TableDocs.807ef684.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js"]))}}),t(o,{path:"tabs",get component(){return r(()=>e(()=>import("./TabsDocs.f239a6a7.js"),["assets/TabsDocs.f239a6a7.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Sonnet.ac418c1d.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Tabs.f8bfa67e.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css"]))}}),t(o,{path:"tooltips",get component(){return r(()=>e(()=>import("./TooltipDocs.5abc98b1.js"),["assets/TooltipDocs.5abc98b1.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Overlay.7b54b170.js","assets/mergeOptionsWithPopperConfig.a93c26d5.js","assets/OverlayTrigger.f2848fdf.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css","assets/Stack.d0052ade.js"]))}}),t(o,{path:"toasts",get component(){return r(()=>e(()=>import("./ToastDocs.84c37372.js"),["assets/ToastDocs.84c37372.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/utils.65a7fcf4.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/GithubSource.f477ce58.js","assets/Form.0431b0cf.js","assets/FormControl.ea70be69.js","assets/Layout.7bb15751.js","assets/Layout.d9953910.css"]))}})]}})}});export{m as default}; diff --git a/assets/Core.6b285ef2.js b/assets/Core.6b285ef2.js new file mode 100644 index 0000000..647bd90 --- /dev/null +++ b/assets/Core.6b285ef2.js @@ -0,0 +1 @@ +import{c as t,R as _,a as e,l as o,_ as r}from"./index.3b024fd0.js";import{L as n}from"./Layout.7bb15751.js";const i=p=>t(n,{get children(){return t(_,{get children(){return[t(e,{path:"Overview",get component(){return o(()=>r(()=>import("./CoreOverview.8672df9b.js"),["assets/CoreOverview.8672df9b.js","assets/index.62c812ca.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css"]))}}),t(e,{path:"button",get component(){return o(()=>r(()=>import("./CoreButtonDocs.4452e844.js"),["assets/CoreButtonDocs.4452e844.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js"]))}}),t(e,{path:"dropdown",get component(){return o(()=>r(()=>import("./CoreDropdownDocs.cb1b429f.js"),["assets/CoreDropdownDocs.cb1b429f.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js","assets/Dropdown.1ab10eb7.js","assets/mergeOptionsWithPopperConfig.a93c26d5.js","assets/Tabs.f8bfa67e.js"]))}}),t(e,{path:"modal",get component(){return o(()=>r(()=>import("./CoreModalDocs.f57a8d88.js"),["assets/CoreModalDocs.f57a8d88.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js"]))}}),t(e,{path:"navs and tabs",get component(){return o(()=>r(()=>import("./CoreNavDocs.a2db1c08.js"),["assets/CoreNavDocs.a2db1c08.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/index.62c812ca.js","assets/Example.5c690fb1.js","assets/Card.9a738601.js"]))}}),t(e,{path:"overlays",get component(){return o(()=>r(()=>import("./CoreOverlayDocs.1afb5864.js"),["assets/CoreOverlayDocs.1afb5864.js","assets/index.3b024fd0.js","assets/index.6f9491ae.css","assets/GithubSource.f477ce58.js","assets/Overlay.7b54b170.js","assets/mergeOptionsWithPopperConfig.a93c26d5.js"]))}})]}})}});export{i as default}; diff --git a/assets/CoreButtonDocs.4452e844.js b/assets/CoreButtonDocs.4452e844.js new file mode 100644 index 0000000..72e93a1 --- /dev/null +++ b/assets/CoreButtonDocs.4452e844.js @@ -0,0 +1,71 @@ +import{c as e,m,o as h,W as t,t as i}from"./index.3b024fd0.js";import{M as o}from"./index.62c812ca.js";import{E as n}from"./Example.5c690fb1.js";import"./Card.9a738601.js";const u=i('

    '),p=i("
    "),N=i('
    ');function f(r={}){const{wrapper:l}=Object.assign({},o(),r.components);return l?e(l,m(r,{get children(){return e(d,{})}})):d();function d(){const s=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span",ul:"ul",li:"li",h3:"h3",h2:"h2"},o(),r.components);return n||c("Example",!1),n.Code||c("Example.Code",!0),n.Intro||c("Example.Intro",!0),n.Preview||c("Example.Preview",!0),[e(s.h1,{children:"Button (core)"}),` +`,(()=>{const a=u.cloneNode(!0);return h(a,e(s.p,{children:`An abstract button component for creating accessible buttons regardless of the HTML\r +element used to render it.`})),a})(),` +`,(()=>{const a=N.cloneNode(!0);return h(a,e(n,{title:"Basic Example",get children(){return[e(n.Preview,{get children(){return e(t,{children:"I'm a Button"})}}),e(n.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-jsx",get children(){return[e(s.span,{className:"hljs-keyword",children:"import"})," { ",e(s.span,{className:"hljs-title class_",children:"Button"})," } ",e(s.span,{className:"hljs-keyword",children:"from"})," ",e(s.span,{className:"hljs-string",children:'"solid-bootstrap-core"'}),`;\r +\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"}),">"]}}),"I'm a Button",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),` +`]}})}})}})]}}),null),h(a,e(n,{get children(){return[e(n.Intro,{get children(){return[e(s.p,{get children(){return["Not very impressive on its own, but ",e(s.code,{children:"Button"}),` does come with a few conveniences\r +over the plain HTML element.`]}}),e(s.ul,{get children(){return[` +`,e(s.li,{get children(){return[e(s.code,{children:"type"})," defaults to ",e(s.code,{children:"button"})]}}),` +`,e(s.li,{get children(){return["Ensures that non ",e(s.code,{children:"button"})," ",e(s.code,{children:"as"})," options remain accessible"]}}),` +`,e(s.li,{get children(){return["contextually renders an ",e(s.code,{children:"    "})," if href or other anchor props are added."]}}),` +`]}})]}}),e(n.Preview,{get children(){return[e(t,{children:"I'm a Button"}),p.cloneNode(!0),e(t,{href:"#",children:"I'm a link"}),p.cloneNode(!0),e(t,{as:"span",children:"I'm a span but also a button"})]}}),e(n.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-jsx",get children(){return[e(s.span,{className:"hljs-keyword",children:"import"})," { ",e(s.span,{className:"hljs-title class_",children:"Button"})," } ",e(s.span,{className:"hljs-keyword",children:"from"})," ",e(s.span,{className:"hljs-string",children:'"solid-bootstrap-core"'}),`;\r +\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"}),">"]}}),"I'm a Button",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"br"})," />"]}})}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," ",e(s.span,{className:"hljs-attr",children:"href"}),"=",e(s.span,{className:"hljs-string",children:'"#"'}),">"]}}),"I'm a link",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +`,e(s.span,{className:"xml",get children(){return e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"br"})," />"]}})}}),`\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," ",e(s.span,{className:"hljs-attr",children:"as"}),"=",e(s.span,{className:"hljs-string",children:'"span"'}),">"]}}),"I'm a span but also a button",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),` +`]}})}})}})]}}),null),a})(),` +`,e(s.h3,{get children(){return e(s.code,{children:"useButtonProps"})}}),` +`,e(s.p,{get children(){return["Most of the heavy lifting in Button comes from the ",e(s.code,{children:"useButtonProps"}),` hook. You\r +can use the hook directly to turn any component into an accessible button.`]}}),` +`,e(s.p,{get children(){return["If an explicit ",e(s.code,{children:"tagName"}),` isn't provided, the hook will pick between 'button' and 'a'\r +depending on whether any anchor specific options, like `,e(s.code,{children:"href"}),", were provided."]}}),` +`,e(s.pre,{get children(){return e(s.code,{className:"hljs language-tsx",get children(){return[e(s.span,{className:"hljs-keyword",children:"import"})," { useButtonProps } ",e(s.span,{className:"hljs-keyword",children:"from"})," ",e(s.span,{className:"hljs-string",children:"'Button'"}),`\r +\r +\r +`,e(s.span,{className:"hljs-keyword",children:"function"})," ",e(s.span,{className:"hljs-title function_",children:"CompanyButton"}),"(",e(s.span,{className:"hljs-params",children:"props"}),`) {\r + `,e(s.span,{className:"hljs-keyword",children:"const"})," [ariaButtonProps, { ",e(s.span,{className:"hljs-attr",children:"tagName"}),": ",e(s.span,{className:"hljs-title class_",children:"Tag"})," }] = ",e(s.span,{className:"hljs-title function_",children:"useButtonProps"}),`(props);\r +\r + `,e(s.span,{className:"hljs-keyword",children:"return"})," ",e(s.span,{className:"xml",get children(){return e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Tag"})," {",e(s.span,{className:"hljs-attr",children:"...props"}),"} {",e(s.span,{className:"hljs-attr",children:"...ariaButtonProps"}),"} />"]}})}}),`\r +}\r +\r +
    \r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"CompanyButton"}),">"]}}),"Hey there",e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"CompanyButton"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"CompanyButton"})," ",e(s.span,{className:"hljs-attr",children:"href"}),"=",e(s.span,{className:"hljs-string",children:'"/home"'}),">"]}}),"I'm a link",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r +`,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`; +`]}})]}})}}),` +`,e(s.h2,{children:"Styling"}),` +`,e(s.p,{get children(){return["Styling options are straightforward for ",e(s.code,{children:"Button"}),` below is a minimal example using TailwindCSS.\r +There is one caveat around styling the button's disabled state. Styling should be based off\r +of `,e(s.code,{children:"disabled"})," prop directly as opposed to using a ",e(s.code,{children:":disabled"}),` CSS selector.\r +This is because the button may render an HTML element that does not support\r +the `,e(s.code,{children:"disabled"})," attribute (such as an ",e(s.code,{children:""}),"). Alternatively, you can select for ",e(s.code,{children:"[aria-disabled='true']"}),`\r +in addition to `,e(s.code,{children:":disabled"}),"."]}}),` +`,e(s.pre,{get children(){return e(s.code,{className:"hljs language-jsx",get children(){return[e(s.span,{className:"hljs-keyword",children:"import"})," { ",e(s.span,{className:"hljs-title class_",children:"Button"})," } ",e(s.span,{className:"hljs-keyword",children:"from"})," ",e(s.span,{className:"hljs-string",children:'"solid-bootstrap-core"'}),`;\r +`,e(s.span,{className:"hljs-keyword",children:"import"})," clsx ",e(s.span,{className:"hljs-keyword",children:"from"})," ",e(s.span,{className:"hljs-string",children:'"clsx"'}),`;\r +\r +`,e(s.span,{className:"hljs-keyword",children:"function"})," ",e(s.span,{className:"hljs-title function_",children:"StyledButton"}),"(",e(s.span,{className:"hljs-params",children:"props"}),`) {\r + `,e(s.span,{className:"hljs-keyword",children:"return"}),` (\r + `,e(s.span,{className:"xml",get children(){return e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"}),`\r + {`,e(s.span,{className:"hljs-attr",children:"...props"}),`}\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:"{clsx("}),`\r + `,e(s.span,{className:"hljs-attr",children:"props.class"}),`,\r + "`,e(s.span,{className:"hljs-attr",children:"transition"})," ",e(s.span,{className:"hljs-attr",children:"text-md"}),`",\r + "`,e(s.span,{className:"hljs-attr",children:"h-10"})," ",e(s.span,{className:"hljs-attr",children:"bg-white"})," ",e(s.span,{className:"hljs-attr",children:"border"})," ",e(s.span,{className:"hljs-attr",children:"border-primary"})," ",e(s.span,{className:"hljs-attr",children:"text-primary"})," ",e(s.span,{className:"hljs-attr",children:"rounded"})," ",e(s.span,{className:"hljs-attr",children:"px-8"})," ",e(s.span,{className:"hljs-attr",children:"mt-4"})," ",e(s.span,{className:"hljs-attr",children:"appearance-none"})," ",e(s.span,{className:"hljs-attr",children:"text-center"})," ",e(s.span,{className:"hljs-attr",children:"whitespace-no-wrap"}),`",\r + "`,e(s.span,{className:"hljs-attr",children:"focus:outline-none"})," ",e(s.span,{className:"hljs-attr",children:"focus:ring-4"})," ",e(s.span,{className:"hljs-attr",children:"ring-primary-200"}),`",\r + !`,e(s.span,{className:"hljs-attr",children:"props.disabled"}),` &&\r + "`,e(s.span,{className:"hljs-attr",children:"cursor-pointer"})," ",e(s.span,{className:"hljs-attr",children:"hover:bg-primary"})," ",e(s.span,{className:"hljs-attr",children:"hover:text-white"}),`",\r + "`,e(s.span,{className:"hljs-attr",children:"active:bg-primary-600"})," ",e(s.span,{className:"hljs-attr",children:"active:text-white"}),`",\r + `,e(s.span,{className:"hljs-attr",children:"props.disabled"}),' && "',e(s.span,{className:"hljs-attr",children:"cursor-not-allowed"})," ",e(s.span,{className:"hljs-attr",children:"opacity-60"}),`"\r + )}\r + />`]}})}}),`\r + );\r +}\r +\r +
    \r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"StyledButton"}),">"]}}),"Button",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"StyledButton"})," ",e(s.span,{className:"hljs-attr",children:"disabled"}),">"]}}),"Disabled",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +
    ; +`]}})}})]}}function c(r,l){throw new Error("Expected "+(l?"component":"object")+" `"+r+"` to be defined: you likely forgot to import, pass, or provide it.")}export{f as default}; diff --git a/assets/CoreDropdownDocs.cb1b429f.js b/assets/CoreDropdownDocs.cb1b429f.js new file mode 100644 index 0000000..b782bd3 --- /dev/null +++ b/assets/CoreDropdownDocs.cb1b429f.js @@ -0,0 +1,199 @@ +import{f,o as n,c as e,t as p,j as D,m as d,W as y}from"./index.3b024fd0.js";import{M as j}from"./index.62c812ca.js";import{E as t,T as u}from"./Example.5c690fb1.js";import{c,a as b,b as v}from"./Dropdown.1ab10eb7.js";import{T as w}from"./Tabs.f8bfa67e.js";import"./Card.9a738601.js";import"./mergeOptionsWithPopperConfig.a93c26d5.js";const k=p("
    "),T=p(""),_=p('
    '),M=a=>{const[r,h]=b({flip:!0,offset:[0,4]});return(()=>{const s=k.cloneNode(!0);return D(s,d(r,{get role(){return a.role},get classList(){return{"dropdown-menu":!0,show:h.show}}}),!1,!0),n(s,e(c.Item,{class:"dropdown-item",children:"Item 1"}),null),n(s,e(c.Item,{class:"dropdown-item",children:"Item 2"}),null),s})()},x=a=>{const[r]=v();return e(y,d(r,{class:"btn btn-primary dropdown-toggle",get children(){return a.children}}))},P=a=>e(c,{get show(){return a.show},get onToggle(){return a.onToggle},get children(){const r=T.cloneNode(!0);return n(r,e(x,{get children(){return a.title}}),null),n(r,e(M,{get role(){return a.role}}),null),r}});function B(){const[a,r]=f(!1);return(()=>{const h=_.cloneNode(!0);return n(h,e(P,{get show(){return a()},onToggle:s=>r(s),get title(){return`${a()?"Close":"Open"} Dropdown`}})),h})()}const I=p('

    '),$=p('
    ');function J(a={}){const{wrapper:r}=Object.assign({},j(),a.components);return r?e(r,d(a,{get children(){return e(h,{})}})):h();function h(){const s=Object.assign({h1:"h1",p:"p",code:"code",ul:"ul",li:"li",pre:"pre",span:"span",h2:"h2",h3:"h3",strong:"strong",em:"em"},j(),a.components);return c||i("Dropdown",!1),c.Menu||i("Dropdown.Menu",!0),c.Toggle||i("Dropdown.Toggle",!0),t||i("Example",!1),t.Code||i("Example.Code",!0),t.Intro||i("Example.Intro",!0),t.Preview||i("Example.Preview",!0),[e(s.h1,{children:"Dropdown (core)"}),` +`,(()=>{const o=I.cloneNode(!0);return n(o,e(s.p,{get children(){return[e(s.code,{children:"Dropdown"}),` is a set of structural components for building accessible dropdown menus with close-on-click,\r +keyboard navigation, and correct focus handling. Like all of `,e(s.code,{children:"solid-bootstrap-core"}),`\r +components, it's BYOS (Bring Your Own Styles). `,e(s.code,{children:"Dropdown"}),` is primarily\r +built from three base components that you should compose to build your dropdowns.`]}})),o})(),` +`,(()=>{const o=$.cloneNode(!0),l=o.firstChild,g=l.nextSibling;return n(o,e(t,{get children(){return[e(t.Intro,{get children(){return e(s.ul,{get children(){return[` +`,e(s.li,{get children(){return[e(s.code,{children:"Dropdown"}),": wraps the menu and toggle, and handles keyboard navigation"]}}),` +`,e(s.li,{get children(){return[e(s.code,{children:"Dropdown.Toggle"}),": generally a button that triggers the opening of the menu"]}}),` +`,e(s.li,{get children(){return[e(s.code,{children:"Dropdown.Menu"}),": the overlaid menu, positioned to the toggle with ",e(s.code,{children:"PopperJS"})]}}),` +`]}})}}),e(t.Preview,{get children(){return e(B,{})}}),e(t.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-jsx",get children(){return[e(s.span,{className:"hljs-keyword",children:"import"}),` {\r + `,e(s.span,{className:"hljs-title class_",children:"Button"}),`,\r + useDropdownMenu,\r + useDropdownToggle,\r + `,e(s.span,{className:"hljs-title class_",children:"Dropdown"}),`,\r + `,e(s.span,{className:"hljs-title class_",children:"DropdownProps"}),`,\r +} `,e(s.span,{className:"hljs-keyword",children:"from"})," ",e(s.span,{className:"hljs-string",children:'"solid-bootstrap-core"'}),`;\r +\r +`,e(s.span,{className:"hljs-keyword",children:"const"})," ",e(s.span,{className:"hljs-title function_",children:"DropdownMenu"})," = (",e(s.span,{className:"hljs-params",get children(){return["p: ComponentProps<",e(s.span,{className:"hljs-string",children:'"div"'}),">"]}}),`) => {\r + `,e(s.span,{className:"hljs-keyword",children:"const"})," [props, meta] = ",e(s.span,{className:"hljs-title function_",children:"useDropdownMenu"}),`({\r + `,e(s.span,{className:"hljs-attr",children:"flip"}),": ",e(s.span,{className:"hljs-literal",children:"true"}),`,\r + `,e(s.span,{className:"hljs-attr",children:"offset"}),": [",e(s.span,{className:"hljs-number",children:"0"}),", ",e(s.span,{className:"hljs-number",children:"4"}),`],\r + });\r +\r + `,e(s.span,{className:"hljs-keyword",children:"return"}),` (\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"}),`\r + {`,e(s.span,{className:"hljs-attr",children:"...props"}),`}\r + `,e(s.span,{className:"hljs-attr",children:"role"}),"=",e(s.span,{className:"hljs-string",children:"{p.role}"}),`\r + `,e(s.span,{className:"hljs-attr",children:"classList"}),"=",e(s.span,{className:"hljs-string",children:"{{"}),`\r + "`,e(s.span,{className:"hljs-attr",children:"dropdown-menu"}),'"',e(s.span,{className:"hljs-attr",children:":"})," ",e(s.span,{className:"hljs-attr",children:"true"}),", // ",e(s.span,{className:"hljs-attr",children:"using"})," ",e(s.span,{className:"hljs-attr",children:"bootstrap"})," ",e(s.span,{className:"hljs-attr",children:"classes"})," ",e(s.span,{className:"hljs-attr",children:"here"})," ",e(s.span,{className:"hljs-attr",children:"but"})," ",e(s.span,{className:"hljs-attr",children:"you"})," ",e(s.span,{className:"hljs-attr",children:"can"})," ",e(s.span,{className:"hljs-attr",children:"use"})," ",e(s.span,{className:"hljs-attr",children:"whatever"}),`\r + `,e(s.span,{className:"hljs-attr",children:"show:"})," ",e(s.span,{className:"hljs-attr",children:"meta.show"}),`,\r + }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"dropdown-item"'}),">"]}}),"Item 1",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"dropdown-item"'}),">"]}}),"Item 2",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + );\r +};\r +\r +`,e(s.span,{className:"hljs-keyword",children:"const"})," ",e(s.span,{className:"hljs-title function_",children:"DropdownToggle"})," = (",e(s.span,{className:"hljs-params",get children(){return["p: ComponentProps<",e(s.span,{className:"hljs-string",children:'"button"'}),">"]}}),`) => {\r + `,e(s.span,{className:"hljs-keyword",children:"const"})," [props] = ",e(s.span,{className:"hljs-title function_",children:"useDropdownToggle"}),`();\r +\r + `,e(s.span,{className:"hljs-keyword",children:"return"}),` (\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," {",e(s.span,{className:"hljs-attr",children:"...props"}),"} ",e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"btn btn-primary dropdown-toggle"'}),">"]}}),`\r + {p.children}\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + );\r +};\r +\r +type `,e(s.span,{className:"hljs-title class_",children:"DropdownButtonProps"}),` = {\r + `,e(s.span,{className:"hljs-attr",children:"onToggle"}),": ",e(s.span,{className:"hljs-title class_",children:"DropdownProps"}),"[",e(s.span,{className:"hljs-string",children:'"onToggle"'}),`];\r + role?: `,e(s.span,{className:"hljs-title class_",children:"ComponentProps"}),"<",e(s.span,{className:"hljs-string",children:'"div"'}),">[",e(s.span,{className:"hljs-string",children:'"role"'}),`];\r + `,e(s.span,{className:"hljs-attr",children:"show"}),": ",e(s.span,{className:"hljs-title class_",children:"DropdownProps"}),"[",e(s.span,{className:"hljs-string",children:'"show"'}),`];\r + `,e(s.span,{className:"hljs-attr",children:"title"}),`: string;\r +};\r +\r +`,e(s.span,{className:"hljs-keyword",children:"const"})," ",e(s.span,{className:"hljs-title function_",children:"DropdownButton"})," = (",e(s.span,{className:"hljs-params",children:"p: DropdownButtonProps"}),`) => (\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Dropdown"})," ",e(s.span,{className:"hljs-attr",children:"show"}),"=",e(s.span,{className:"hljs-string",children:"{p.show}"})," ",e(s.span,{className:"hljs-attr",children:"onToggle"}),"=",e(s.span,{className:"hljs-string",children:"{p.onToggle}"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"span"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"DropdownToggle"}),">"]}}),"{p.title}",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"DropdownMenu"})," ",e(s.span,{className:"hljs-attr",children:"role"}),"=",e(s.span,{className:"hljs-string",children:"{p.role}"})," />"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +);\r +\r +`,e(s.span,{className:"hljs-keyword",children:"export"})," ",e(s.span,{className:"hljs-keyword",children:"function"})," ",e(s.span,{className:"hljs-title function_",children:"DropdownExample1"}),"(",e(s.span,{className:"hljs-params"}),`) {\r + `,e(s.span,{className:"hljs-keyword",children:"const"})," [show, setShow] = ",e(s.span,{className:"hljs-title function_",children:"createSignal"}),"(",e(s.span,{className:"hljs-literal",children:"false"}),`);\r +\r + `,e(s.span,{className:"hljs-keyword",children:"return"}),` (\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"div"})," ",e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"d-flex justify-content-center"'}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"DropdownButton"}),`\r + `,e(s.span,{className:"hljs-attr",children:"show"}),"=",e(s.span,{className:"hljs-string",children:"{show()}"}),`\r + `,e(s.span,{className:"hljs-attr",children:"onToggle"}),"=",e(s.span,{className:"hljs-string",children:"{(nextShow)"})," =>"]}}),' setShow(nextShow)}\r\n title={`${show() ? "Close" : "Open"} Dropdown`}\r\n />\r\n ',e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + );\r +} +`]}})}})}})]}}),l),n(l,e(s.h2,{children:"Components"}),null),n(l,e(s.p,{get children(){return["Dropdowns are made up of a wrapping ",e(s.code,{children:"Dropdown"})," component, a ",e(s.code,{children:"Toggle"}),` that\r +triggers that menu visibility, a `,e(s.code,{children:"Menu"})," and the ",e(s.code,{children:"Item"}),`s within that menu. With the exception\r +of the outer `,e(s.code,{children:"Dropdown"}),` component, each sub component can be constructed with a component\r +render prop API or a hook depending on preference.`]}}),null),n(l,e(s.h3,{children:"Dropdown"}),null),n(l,e(s.p,{get children(){return["The ",e(s.code,{children:"Dropdown"}),` component is the non-presentational orchestrator of the dropdown state.\r +It handles menu visibility, keyboard navigation and focus management. As a convenience, a\r +few `,e(s.code,{children:"Menu"})," specific props can be provided to ",e(s.code,{children:"Dropdown"})," directly, such as ",e(s.code,{children:"placement"}),`. It\r +is sometimes helpful to also render a wrapping DOM element around your `,e(s.code,{children:"Toggle"})," and ",e(s.code,{children:"Menu"}),`,\r +but not it's required.`]}}),null),n(l,e(s.pre,{get children(){return e(s.code,{className:"hljs language-jsx",get children(){return[e(s.span,{className:"hljs-keyword",children:"import"})," { ",e(s.span,{className:"hljs-title class_",children:"Dropdown"})," } ",e(s.span,{className:"hljs-keyword",children:"from"})," ",e(s.span,{className:"hljs-string",children:"'solid-bootstrap-core'"}),`;\r +\r +\r + \r + {/* Toggle */}\r + \r + +`]}})}}),null),n(l,e(s.h3,{children:"Toggle"}),null),n(l,e(s.p,{get children(){return["The ",e(s.code,{children:"Toggle"}),` is an interactive element (usually a button) that opens the dropdown menu.\r +The toggle props contain a `,e(s.code,{children:"ref"}),` that must be passed to a valid DOM element. You\r +can pass `,e(s.code,{children:"disabled"})," and ",e(s.code,{children:"onClick"}),` props as well and they will be composed into the returned\r +props automatically.`]}}),null),n(l,e(s.p,{get children(){return["Available as either a ",e(s.code,{children:"useDropdownToggle"})," hook or ",e(s.code,{children:"DropdownToggle"})," component..."]}}),null),n(l,e(w,{defaultActiveKey:"hook",get children(){return[e(u,{eventKey:"hook",title:"useDropdownToggle",get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-jsx",get children(){return[e(s.span,{className:"hljs-keyword",children:"import"})," { ",e(s.span,{className:"hljs-title class_",children:"Button"}),", useDropdownToggle } ",e(s.span,{className:"hljs-keyword",children:"from"})," ",e(s.span,{className:"hljs-string",children:'"solid-bootstrap-core"'}),`;\r +\r +`,e(s.span,{className:"hljs-keyword",children:"const"})," ",e(s.span,{className:"hljs-title function_",children:"DropdownToggle"})," = (",e(s.span,{className:"hljs-params",children:"props"}),`) => {\r + `,e(s.span,{className:"hljs-keyword",children:"const"})," [toggleProps] = ",e(s.span,{className:"hljs-title function_",children:"useDropdownToggle"}),`(props);\r +\r + `,e(s.span,{className:"hljs-keyword",children:"return"})," ",e(s.span,{className:"xml",get children(){return e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," {",e(s.span,{className:"hljs-attr",children:"...props"}),"} {",e(s.span,{className:"hljs-attr",children:"...itemProps"}),"} />"]}})}}),`;\r +}; +`]}})}})}}),e(u,{eventKey:"component",title:"DropdownToggle",get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-jsx",get children(){return[e(s.span,{className:"hljs-keyword",children:"import"})," { ",e(s.span,{className:"hljs-title class_",children:"Button"}),", ",e(s.span,{className:"hljs-title class_",children:"DropdownToggle"})," } ",e(s.span,{className:"hljs-keyword",children:"from"})," ",e(s.span,{className:"hljs-string",children:'"solid-bootstrap-core"'}),`;\r +\r +`,e(s.span,{className:"hljs-keyword",children:"const"})," ",e(s.span,{className:"hljs-title function_",children:"MyDropdownToggle"})," = (",e(s.span,{className:"hljs-params",children:"props"}),`) => (\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"DropdownToggle"})," {",e(s.span,{className:"hljs-attr",children:"...props"}),"}>"]}}),`\r + {(toggleProps, meta) => (\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," {",e(s.span,{className:"hljs-attr",children:"...props"}),"} {",e(s.span,{className:"hljs-attr",children:"...toggleProps"}),"} />"]}}),`\r + )}\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +); +`]}})}})}})]}}),null),n(l,e(s.h3,{children:"Menu"}),null),n(l,e(s.p,{get children(){return["The dropdown ",e(s.code,{children:"Menu"}),` provides an overlay that is positioned next to the dropdown toggle.\r +Menu's are positioned with `,e(s.code,{children:"PopperJS"}),` by default, and accept all configuration options\r +available to `,e(s.code,{children:"Popper"}),"."]}}),null),n(l,e(s.p,{get children(){return["Available as either a ",e(s.code,{children:"useDropdownMenu"})," hook or ",e(s.code,{children:"DropdownMenu"})," component..."]}}),null),n(l,e(w,{defaultActiveKey:"hook",get children(){return[e(u,{eventKey:"hook",title:"useDropdownMenu",get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-jsx",get children(){return[e(s.span,{className:"hljs-keyword",children:"import"})," { useDropdownMenu } ",e(s.span,{className:"hljs-keyword",children:"from"})," ",e(s.span,{className:"hljs-string",children:'"solid-bootstrap-core"'}),`;\r +\r +`,e(s.span,{className:"hljs-keyword",children:"const"})," ",e(s.span,{className:"hljs-title function_",children:"DropdownToggle"})," = (",e(s.span,{className:"hljs-params",children:"props"}),`) => {\r + `,e(s.span,{className:"hljs-keyword",children:"const"})," [menuProps, meta] = ",e(s.span,{className:"hljs-title function_",children:"useDropdownMenu"}),`({\r + `,e(s.span,{className:"hljs-attr",children:"flip"}),": ",e(s.span,{className:"hljs-literal",children:"true"}),`,\r + `,e(s.span,{className:"hljs-attr",children:"offset"}),": [",e(s.span,{className:"hljs-number",children:"0"}),", ",e(s.span,{className:"hljs-number",children:"8"}),`],\r + });\r +\r + `,e(s.span,{className:"hljs-keyword",children:"return"}),` (\r + `,e(s.span,{className:"xml",get children(){return e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"ul"}),`\r + {`,e(s.span,{className:"hljs-attr",children:"...props"}),`}\r + {`,e(s.span,{className:"hljs-attr",children:"...menuProps"}),`}\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"}),`\r + `,e(s.span,{className:"hljs-attr",children:"visibility:"})," ",e(s.span,{className:"hljs-attr",children:"meta.show"}),' ? "',e(s.span,{className:"hljs-attr",children:"visible"}),'" ',e(s.span,{className:"hljs-attr",children:":"}),' "',e(s.span,{className:"hljs-attr",children:"hidden"}),`",\r + }}\r + />`]}})}}),`\r + );\r +}; +`]}})}})}}),e(u,{eventKey:"component",title:"DropdownMenu",get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-jsx",get children(){return[e(s.span,{className:"hljs-keyword",children:"import"})," { ",e(s.span,{className:"hljs-title class_",children:"Button"}),", ",e(s.span,{className:"hljs-title class_",children:"DropdownMenu"})," } ",e(s.span,{className:"hljs-keyword",children:"from"})," ",e(s.span,{className:"hljs-string",children:'"solid-bootstrap-core"'}),`;\r +\r +`,e(s.span,{className:"hljs-keyword",children:"const"})," ",e(s.span,{className:"hljs-title function_",children:"MyDropdownToggle"})," = (",e(s.span,{className:"hljs-params",children:"props"}),`) => (\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"DropdownMenu"})," ",e(s.span,{className:"hljs-attr",children:"flip"})," ",e(s.span,{className:"hljs-attr",children:"offset"}),"=",e(s.span,{className:"hljs-string",children:"{[0,"})," ",e(s.span,{className:"hljs-attr",children:"8"}),"]}>"]}}),`\r + {(menuProps, meta) => (\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"ul"}),`\r + {`,e(s.span,{className:"hljs-attr",children:"...props"}),`}\r + {`,e(s.span,{className:"hljs-attr",children:"...menuProps"}),`}\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"}),`\r + `,e(s.span,{className:"hljs-attr",children:"visibility:"})," ",e(s.span,{className:"hljs-attr",children:"meta.show"}),' ? "',e(s.span,{className:"hljs-attr",children:"visible"}),'" ',e(s.span,{className:"hljs-attr",children:":"}),' "',e(s.span,{className:"hljs-attr",children:"hidden"}),` ",\r + }}\r + />`]}}),`\r + )}\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +); +`]}})}})}})]}}),null),n(o,e(t,{title:"Implementing show/hide",get children(){return[e(t.Intro,{get children(){return[e(s.p,{get children(){return["Because ",e(s.code,{children:"PopperJS"})," must measure the ",e(s.code,{children:"Menu"}),` element, it's recommended that you style\r +the Menu with `,e(s.code,{children:"opacity: 0"})," and ",e(s.code,{children:"visibility: hidden"}),` when not shown.\r +This allows `,e(s.code,{children:"Popper"})," to calculate the correct offset for the ",e(s.code,{children:"Menu"}),` even when it's not\r +visible. This also makes it a bit simpler to animate if you desire.`]}}),e(s.p,{get children(){return["When transitioning, it's best to use ",e(s.strong,{children:"both"})," ",e(s.code,{children:"visibility"})," and ",e(s.code,{children:"opacity"}),`. Setting\r +`,e(s.code,{children:"visibility"})," to ",e(s.code,{children:"hidden"}),` will remove the menu from the keyboard tab order, but it\r +doesn't transition nicely, so add `,e(s.code,{children:"opacity"}),` (or some other visual property) to\r +indicate fade out and in.`]}})]}}),e(t.Preview,{get children(){return e(c,{get children(){return[e(c.Toggle,{children:m=>e(y,d(m,{class:"btn btn-secondary dropdown-toggle",children:"Open"}))}),e(c.Menu,{flip:!0,offset:[0,4],children:(m,N)=>e(s.ul,d(m,{class:"dropdown-menu show",get style(){return{transition:"visibility 500ms, opacity 500ms",visibility:N.show?"visible":"hidden",opacity:N.show?"1":"0",...m.style}},get children(){return e(s.li,{class:"dropdown-item",children:"Hey there"})}}))})]}})}}),e(t.Code,{get children(){return e(s.pre,{get children(){return e(s.code,{className:"hljs language-jsx",get children(){return[e(s.span,{className:"hljs-keyword",children:"import"})," { ",e(s.span,{className:"hljs-title class_",children:"Button"}),", ",e(s.span,{className:"hljs-title class_",children:"Dropdown"})," } ",e(s.span,{className:"hljs-keyword",children:"from"})," ",e(s.span,{className:"hljs-string",children:'"solid-bootstrap-core"'}),`;\r +\r +`,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Dropdown"}),">"]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Dropdown.Toggle"}),">"]}}),`\r + {(props) => (\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Button"})," {",e(s.span,{className:"hljs-attr",children:"...props"}),"} ",e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"btn btn-secondary dropdown-toggle"'}),">"]}}),`\r + Open\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + )}\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"Dropdown.Menu"})," ",e(s.span,{className:"hljs-attr",children:"flip"})," ",e(s.span,{className:"hljs-attr",children:"offset"}),"=",e(s.span,{className:"hljs-string",children:"{[0,"})," ",e(s.span,{className:"hljs-attr",children:"4"}),"]}>"]}}),`\r + {(menuProps, meta) => (\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"ul"}),`\r + {`,e(s.span,{className:"hljs-attr",children:"...menuProps"}),`}\r + `,e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"dropdown-menu show"'}),`\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"}),`\r + `,e(s.span,{className:"hljs-attr",children:"transition:"}),' "',e(s.span,{className:"hljs-attr",children:"visibility"})," ",e(s.span,{className:"hljs-attr",children:"500ms"}),", ",e(s.span,{className:"hljs-attr",children:"opacity"})," ",e(s.span,{className:"hljs-attr",children:"500ms"}),`",\r + `,e(s.span,{className:"hljs-attr",children:"visibility:"})," ",e(s.span,{className:"hljs-attr",children:"meta.show"}),' ? "',e(s.span,{className:"hljs-attr",children:"visible"}),'" ',e(s.span,{className:"hljs-attr",children:":"}),' "',e(s.span,{className:"hljs-attr",children:"hidden"}),`",\r + `,e(s.span,{className:"hljs-attr",children:"opacity:"})," ",e(s.span,{className:"hljs-attr",children:"meta.show"}),' ? "',e(s.span,{className:"hljs-attr",children:"1"}),'" ',e(s.span,{className:"hljs-attr",children:":"}),' "',e(s.span,{className:"hljs-attr",children:"0"}),`",\r + `,e(s.span,{className:"hljs-attr",children:"...menuProps.style"}),`\r + }}\r + >`]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"li"})," ",e(s.span,{className:"hljs-attr",children:"class"}),"=",e(s.span,{className:"hljs-string",children:'"dropdown-item"'}),">"]}}),"Hey there",e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r + )}\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}}),`\r +`,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),` +`]}})}})}})]}}),g),n(g,e(s.p,{get children(){return["If the above isn't feasible and you must use ",e(s.code,{children:"display: none"}),` to hide the menu, you\r +`,e(s.em,{children:"may"})," need to manually trigger a position re-calculation on show when ",e(s.code,{children:"Popper"}),` is able to\r +measure the element.`]}}),null),n(g,e(s.pre,{get children(){return e(s.code,{className:"hljs language-jsx",get children(){return[e(s.span,{className:"hljs-keyword",children:"import"})," { useDropdownMenu } ",e(s.span,{className:"hljs-keyword",children:"from"})," ",e(s.span,{className:"hljs-string",children:'"solid-bootstrap-core"'}),`;\r +\r +`,e(s.span,{className:"hljs-keyword",children:"function"})," ",e(s.span,{className:"hljs-title function_",children:"Menu"}),"(",e(s.span,{className:"hljs-params"}),`) {\r + `,e(s.span,{className:"hljs-keyword",children:"const"})," [menuProps, meta] = ",e(s.span,{className:"hljs-title function_",children:"useDropdownMenu"}),`();\r +\r + `,e(s.span,{className:"hljs-title function_",children:"createLayoutEffect"}),"(",e(s.span,{className:"hljs-function",children:"() =>"}),` {\r + meta.`,e(s.span,{className:"hljs-title function_",children:"update"}),`()\r + }, [meta.`,e(s.span,{className:"hljs-property",children:"show"}),`])\r +\r + `,e(s.span,{className:"hljs-keyword",children:"return"}),` (\r + `,e(s.span,{className:"xml",get children(){return[e(s.span,{className:"hljs-tag",get children(){return["<",e(s.span,{className:"hljs-name",children:"ul"}),`\r + {`,e(s.span,{className:"hljs-attr",children:"...menuProps"}),`}\r + `,e(s.span,{className:"hljs-attr",children:"style"}),"=",e(s.span,{className:"hljs-string",children:"{{"}),`\r + `,e(s.span,{className:"hljs-attr",children:"display:"})," ",e(s.span,{className:"hljs-attr",children:"meta.show"}),' ? "',e(s.span,{className:"hljs-attr",children:"block"}),'" ',e(s.span,{className:"hljs-attr",children:":"}),' "',e(s.span,{className:"hljs-attr",children:"none"}),`",\r + `,e(s.span,{className:"hljs-attr",children:"...menuProps.style"}),`\r + }}\r + >`]}}),`\r + {...}\r + `,e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + );\r +} +`]}})}}),null),o})()]}}function i(a,r){throw new Error("Expected "+(r?"component":"object")+" `"+a+"` to be defined: you likely forgot to import, pass, or provide it.")}export{J as default}; diff --git a/assets/CoreModalDocs.f57a8d88.js b/assets/CoreModalDocs.f57a8d88.js new file mode 100644 index 0000000..548cff9 --- /dev/null +++ b/assets/CoreModalDocs.f57a8d88.js @@ -0,0 +1,106 @@ +import{aj as w,f as j,o as c,c as s,W as o,j as g,aq as u,t as i,I as y,m as k}from"./index.3b024fd0.js";import{M as p}from"./index.62c812ca.js";import{E as t}from"./Example.5c690fb1.js";import"./Card.9a738601.js";const _=i('

    Some important content!

    '),$=i("
    "),f=i('
    '),M=i('

    Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

    '),x=i('
    Click to get the full Modal experience!
    '),C=i("

    "),S=()=>{const[l,n]=j(!1);return(()=>{const r=$.cloneNode(!0);return c(r,s(o,{class:"btn btn-primary",onClick:()=>n(!0),children:"Open Modal"}),null),c(r,s(u,{get show(){return l()},"aria-labelledby":"modal-1-label",onHide:()=>n(!1),renderBackdrop:a=>(()=>{const e=f.cloneNode(!0);return g(e,a,!1,!1),e})(),class:"modal d-block pe-none",get children(){const a=_.cloneNode(!0),e=a.firstChild,h=e.firstChild,d=h.nextSibling,b=d.nextSibling;return c(b,s(o,{onClick:()=>n(!1),class:"btn btn-secondary float-right",children:"Close"})),a}}),null),r})()};let N=(l,n)=>l+Math.floor(Math.random()*(n-l));const E=()=>(()=>{const l=M.cloneNode(!0),n=l.firstChild,r=n.firstChild,a=r.nextSibling;return a.firstChild,c(a,s(v,{}),null),y(e=>{const h=`${N(5,20)}%`,d=`${N(20,60)}%`;return h!==e._v$&&l.style.setProperty("margin-top",e._v$=h),d!==e._v$2&&l.style.setProperty("margin-left",e._v$2=d),e},{_v$:void 0,_v$2:void 0}),l})(),v=()=>{const[l,n]=j(!1);return[(()=>{const r=x.cloneNode(!0),a=r.firstChild;return a.$$click=()=>n(!0),r})(),C.cloneNode(!0),s(u,{class:"modal d-block pe-none",get show(){return l()},onHide:()=>n(!1),renderBackdrop:r=>(()=>{const a=f.cloneNode(!0);return a.style.setProperty("z-index","1055"),g(a,r,!1,!1),a})(),"aria-labelledby":"modal-label",get children(){return s(E,{})}})]};w(["click"]);const P=i('

    '),B=i('
    ');function D(l={}){const{wrapper:n}=Object.assign({},p(),l.components);return n?s(n,k(l,{get children(){return s(r,{})}})):r();function r(){const a=Object.assign({h1:"h1",p:"p",code:"code",ul:"ul",li:"li",pre:"pre",span:"span"},p(),l.components);return t||m("Example",!1),t.Code||m("Example.Code",!0),t.Intro||m("Example.Intro",!0),t.Preview||m("Example.Preview",!0),[s(a.h1,{children:"Modals (core)"}),` +`,(()=>{const e=P.cloneNode(!0);return c(e,s(a.p,{get children(){return["Love them or hate them, ",s(a.code,{children:""}),` provides a solid foundation for creating dialogs,\r +lightboxes, or whatever else. The `,s(a.code,{children:"Modal"})," component renders its ",s(a.code,{children:"children"}),` node in front\r +of a backdrop component.`]}})),e})(),` +`,(()=>{const e=B.cloneNode(!0),h=e.firstChild;return c(h,s(a.p,{get children(){return["The ",s(a.code,{children:"Modal"})," offers a few helpful features over using just a ",s(a.code,{children:""}),` component and\r +some styles:`]}}),null),c(h,s(a.ul,{get children(){return[` +`,s(a.li,{children:"Manages dialog stacking when one-at-a-time just isn't enough."}),` +`,s(a.li,{children:"Creates a backdrop for disabling interaction below the modal."}),` +`,s(a.li,{children:`Properly manages focus; moving to the modal content, and keeping it there until\r +the modal is closed.`}),` +`,s(a.li,{children:"Disables scrolling of the page content while open."}),` +`,s(a.li,{children:"Ensuring modal content is accessible with the appropriate ARIA."}),` +`,s(a.li,{get children(){return["Allows easily-pluggable animations via a ",s(a.code,{children:""})," component."]}}),` +`]}}),null),c(e,s(t,{title:"Example",get children(){return[s(t.Intro,{}),s(t.Preview,{get children(){return s(S,{})}}),s(t.Code,{get children(){return s(a.pre,{get children(){return s(a.code,{className:"hljs language-jsx",get children(){return[s(a.span,{className:"hljs-keyword",children:"import"})," {createSignal} ",s(a.span,{className:"hljs-keyword",children:"from"})," ",s(a.span,{className:"hljs-string",children:'"solid-js"'}),`;\r +`,s(a.span,{className:"hljs-keyword",children:"import"})," {",s(a.span,{className:"hljs-title class_",children:"Button"}),", ",s(a.span,{className:"hljs-title class_",children:"Modal"}),"} ",s(a.span,{className:"hljs-keyword",children:"from"})," ",s(a.span,{className:"hljs-string",children:'"solid-bootstrap-core"'}),`;\r +\r +\r +`,s(a.span,{className:"hljs-keyword",children:"const"})," ",s(a.span,{className:"hljs-title function_",children:"ModalExample1"})," = (",s(a.span,{className:"hljs-params"}),`) => {\r + `,s(a.span,{className:"hljs-keyword",children:"const"})," [show, setShow] = ",s(a.span,{className:"hljs-title function_",children:"createSignal"}),"(",s(a.span,{className:"hljs-literal",children:"false"}),`);\r + `,s(a.span,{className:"hljs-keyword",children:"return"}),` (\r + `,s(a.span,{className:"xml",get children(){return[s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"}),">"]}}),`\r + {/* Using Bootstrap CSS here - but you can use whatever you like */}\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"Button"})," ",s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"btn btn-primary"'})," ",s(a.span,{className:"hljs-attr",children:"onClick"}),"=",s(a.span,{className:"hljs-string",children:"{()"})," =>"]}}),` setShow(true)}>\r + Open Modal\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r +\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"Modal"}),`\r + `,s(a.span,{className:"hljs-attr",children:"show"}),"=",s(a.span,{className:"hljs-string",children:"{show()}"}),`\r + `,s(a.span,{className:"hljs-attr",children:"aria-labelledby"}),"=",s(a.span,{className:"hljs-string",children:'"modal-1-label"'}),`\r + `,s(a.span,{className:"hljs-attr",children:"onHide"}),"=",s(a.span,{className:"hljs-string",children:"{()"})," =>"]}}),` setShow(false)}\r + renderBackdrop={(props: any) => `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"})," ",s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"modal-backdrop show"'})," {",s(a.span,{className:"hljs-attr",children:"...props"}),"} />"]}}),`}\r + class="modal d-block pe-none"\r + >\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"})," ",s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"modal-dialog modal-dialog-centered"'}),">"]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"})," ",s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"modal-content"'}),">"]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"})," ",s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"modal-header"'}),">"]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"h4"})," ",s(a.span,{className:"hljs-attr",children:"id"}),"=",s(a.span,{className:"hljs-string",children:'"modal-1-label"'}),">"]}}),"Alert!",s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"})," ",s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"modal-body"'}),">"]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"p"}),">"]}}),"Some important content!",s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"})," ",s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"modal-footer"'}),">"]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"Button"})," ",s(a.span,{className:"hljs-attr",children:"onClick"}),"=",s(a.span,{className:"hljs-string",children:"{()"})," =>"]}}),` setShow(false)} class="btn btn-secondary float-right">\r + Close\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + );\r +} +`]}})}})}})]}}),null),c(e,s(t,{title:"Modal stacking",get children(){return[s(t.Intro,{get children(){return s(a.p,{children:"Modal supports stacking (if you really need it) out of the box"})}}),s(t.Preview,{get children(){return s(v,{})}}),s(t.Code,{get children(){return s(a.pre,{get children(){return s(a.code,{className:"hljs language-jsx",get children(){return[s(a.span,{className:"hljs-keyword",children:"import"})," {createSignal} ",s(a.span,{className:"hljs-keyword",children:"from"})," ",s(a.span,{className:"hljs-string",children:'"solid-js"'}),`;\r +`,s(a.span,{className:"hljs-keyword",children:"import"})," {",s(a.span,{className:"hljs-title class_",children:"Button"}),", ",s(a.span,{className:"hljs-title class_",children:"Modal"}),"} ",s(a.span,{className:"hljs-keyword",children:"from"})," ",s(a.span,{className:"hljs-string",children:'"solid-bootstrap-core"'}),`;\r +\r +\r +`,s(a.span,{className:"hljs-keyword",children:"let"})," ",s(a.span,{className:"hljs-title function_",children:"rand"})," = (",s(a.span,{className:"hljs-params",children:"min: number, max: number"}),") => min + ",s(a.span,{className:"hljs-title class_",children:"Math"}),".",s(a.span,{className:"hljs-title function_",children:"floor"}),"(",s(a.span,{className:"hljs-title class_",children:"Math"}),".",s(a.span,{className:"hljs-title function_",children:"random"}),`() * (max - min));\r +\r +`,s(a.span,{className:"hljs-keyword",children:"const"})," ",s(a.span,{className:"hljs-title function_",children:"RandomlyPositionedModal"})," = (",s(a.span,{className:"hljs-params"}),`) => {\r + `,s(a.span,{className:"hljs-keyword",children:"return"}),` (\r + `,s(a.span,{className:"xml",get children(){return[s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"}),`\r + `,s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"modal-dialog"'}),`\r + `,s(a.span,{className:"hljs-attr",children:"style"}),"=",s(a.span,{className:"hljs-string",children:"{{"}),`\r + "`,s(a.span,{className:"hljs-attr",children:"margin-top"}),'"',s(a.span,{className:"hljs-attr",children:":"})," `${",s(a.span,{className:"hljs-attr",children:"rand"}),"(",s(a.span,{className:"hljs-attr",children:"5"}),", ",s(a.span,{className:"hljs-attr",children:"20"}),')}%`,\r\n "',s(a.span,{className:"hljs-attr",children:"margin-left"}),'"',s(a.span,{className:"hljs-attr",children:":"})," `${",s(a.span,{className:"hljs-attr",children:"rand"}),"(",s(a.span,{className:"hljs-attr",children:"20"}),", ",s(a.span,{className:"hljs-attr",children:"60"}),`)}%\`,\r + }}\r + >`]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"})," ",s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"modal-content"'}),">"]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"})," ",s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"modal-header"'}),">"]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"h4"})," ",s(a.span,{className:"hljs-attr",children:"id"}),"=",s(a.span,{className:"hljs-string",children:'"modal-label"'}),">"]}}),"Text in a modal",s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"})," ",s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"modal-body"'}),">"]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"p"}),">"]}}),"Duis mollis, est non commodo luctus, nisi erat porttitor ligula.",s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"ModalExample2"})," />"]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + );\r +};\r +\r +`,s(a.span,{className:"hljs-keyword",children:"export"})," ",s(a.span,{className:"hljs-keyword",children:"const"})," ",s(a.span,{className:"hljs-title function_",children:"ModalExample2"})," = (",s(a.span,{className:"hljs-params"}),`) => {\r + `,s(a.span,{className:"hljs-keyword",children:"const"})," [show, setShow] = ",s(a.span,{className:"hljs-title function_",children:"createSignal"}),"(",s(a.span,{className:"hljs-literal",children:"false"}),`);\r + `,s(a.span,{className:"hljs-keyword",children:"return"}),` (\r + `,s(a.span,{className:"xml",get children(){return[s(a.span,{className:"hljs-tag",children:"<>"}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"}),">"]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"button"})," ",s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"btn btn-primary"'})," ",s(a.span,{className:"hljs-attr",children:"onClick"}),"=",s(a.span,{className:"hljs-string",children:"{()"})," =>"]}}),` setShow(true)}>\r + Open modal\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"})," ",s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"pt-3"'}),">"]}}),"Click to get the full Modal experience!",s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"p"}),">"]}}),s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r +\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"Modal"}),`\r + `,s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"modal d-block pe-none"'}),`\r + `,s(a.span,{className:"hljs-attr",children:"show"}),"=",s(a.span,{className:"hljs-string",children:"{show()}"}),`\r + `,s(a.span,{className:"hljs-attr",children:"onHide"}),"=",s(a.span,{className:"hljs-string",children:"{()"})," =>"]}}),` setShow(false)}\r + renderBackdrop={(props: any) => (\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"div"})," ",s(a.span,{className:"hljs-attr",children:"class"}),"=",s(a.span,{className:"hljs-string",children:'"modal-backdrop show"'})," ",s(a.span,{className:"hljs-attr",children:"style"}),"=",s(a.span,{className:"hljs-string",children:"{{"}),'"',s(a.span,{className:"hljs-attr",children:"z-index"}),'"',s(a.span,{className:"hljs-attr",children:":"})," ",s(a.span,{className:"hljs-attr",children:"1055"}),"}} {",s(a.span,{className:"hljs-attr",children:"...props"}),"} />"]}}),`\r + )}\r + aria-labelledby="modal-label"\r + >\r + `,s(a.span,{className:"hljs-tag",get children(){return["<",s(a.span,{className:"hljs-name",children:"RandomlyPositionedModal"})," />"]}}),`\r + `,s(a.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,s(a.span,{className:"hljs-tag",children:""})]}}),`\r + );\r +}; +`]}})}})}})]}}),null),e})()]}}function m(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}export{D as default}; diff --git a/assets/CoreNavDocs.a2db1c08.js b/assets/CoreNavDocs.a2db1c08.js new file mode 100644 index 0000000..483c211 --- /dev/null +++ b/assets/CoreNavDocs.a2db1c08.js @@ -0,0 +1,16 @@ +import{c as e,m as p,o as h,ae as o,aD as t,t as m}from"./index.3b024fd0.js";import{M as d}from"./index.62c812ca.js";import{E as a}from"./Example.5c690fb1.js";import"./Card.9a738601.js";const N=m('

    '),g=m('
    ');function b(s={}){const{wrapper:r}=Object.assign({},d(),s.components);return r?e(r,p(s,{get children(){return e(i,{})}})):i();function i(){const n=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span",h3:"h3"},d(),s.components);return a||c("Example",!1),a.Code||c("Example.Code",!0),a.Preview||c("Example.Preview",!0),[e(n.h1,{children:"Navs and tabs (core)"}),` +`,(()=>{const l=N.cloneNode(!0);return h(l,e(n.p,{children:"Create flexible navigation elements like tabs, navbars, and menus."})),l})(),` +`,(()=>{const l=g.cloneNode(!0);return h(l,e(a,{title:"Basic example",get children(){return[e(a.Preview,{get children(){return e(o,{activeKey:"#",get children(){return[e(t,{href:"#",children:"Active"}),`\r +`,e(t,{eventKey:"link-1",children:"Link"}),`\r +`,e(t,{eventKey:"link-2",children:"Link"}),`\r +`,e(t,{eventKey:"disabled",disabled:!0,children:"Disabled"})]}})}}),e(a.Code,{get children(){return e(n.pre,{get children(){return e(n.code,{className:"hljs language-tsx",get children(){return["<",e(n.span,{className:"hljs-title class_",children:"Nav"})," activeKey=",e(n.span,{className:"hljs-string",children:'"#"'}),`>\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"NavItem"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#"'}),">"]}}),"Active",e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"NavItem"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"link-1"'}),">"]}}),"Link",e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"NavItem"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"link-2"'}),">"]}}),"Link",e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"NavItem"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"disabled"'})," ",e(n.span,{className:"hljs-attr",children:"disabled"}),">"]}}),"Disabled",e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}})),l})(),` +`,e(n.h3,{children:"Accessibility"}),` +`,e(n.p,{get children(){return["In the context of a ",e(n.code,{children:"Tabs"})," component the ",e(n.code,{children:"Nav"})," and ",e(n.code,{children:"NavItem"}),`s will contextually\r +apply the correct ARIA roles, as well as implement the required keyboard navigation.`]}}),` +`,e(n.p,{children:"...more docs to come"})]}}function c(s,r){throw new Error("Expected "+(r?"component":"object")+" `"+s+"` to be defined: you likely forgot to import, pass, or provide it.")}export{b as default}; diff --git a/assets/CoreOverlayDocs.1afb5864.js b/assets/CoreOverlayDocs.1afb5864.js new file mode 100644 index 0000000..1051cb7 --- /dev/null +++ b/assets/CoreOverlayDocs.1afb5864.js @@ -0,0 +1 @@ +import{f as t,ab as d,o as f,c as u,z as k,j as v,m,aj as S,t as g}from"./index.3b024fd0.js";import{G as P}from"./GithubSource.f477ce58.js";import{a as T,O as j}from"./Overlay.7b54b170.js";import"./mergeOptionsWithPopperConfig.a93c26d5.js";const E=g('

    Overlays (core)

    A powerful and flexible overlay component for showing things over, and next to, other things.

    This example is styled to look like a tooltip (with an adaptive arrow). It also demonstates using an optional <Transition />.

    Click the button to cycle through placement options.

    '),I=g('
    I am a overlay!
    '),h=["top","right","bottom","left"],z=()=>{const[y,w]=t(),[C,b]=t(null),[r,l]=t(!1),[e,n]=t();function $(){r()?e()==="left"?l(!1):n(h[h.indexOf(e())+1]):(n("top"),l(!0))}return(()=>{const o=E.cloneNode(!0),s=o.firstChild,x=s.firstChild,i=s.nextSibling,c=i.firstChild,_=i.nextSibling;return d(b,o),f(s,u(P,{name:"CoreOverlayDocs"}),x),c.$$click=$,d(w,c),f(_,u(T,{get show(){return r()},offset:[0,5],container:C,target:y,get placement(){return e()},flip:!0,children:()=>{const p=k(j);return(()=>{const a=I.cloneNode(!0),O=a.firstChild;return v(a,m(()=>p?.wrapperProps),!1,!0),v(O,m(()=>p?.arrowProps),!1,!1),a})()}})),o})()};S(["click"]);export{z as CoreOverlayDocs,z as default}; diff --git a/assets/CoreOverview.8672df9b.js b/assets/CoreOverview.8672df9b.js new file mode 100644 index 0000000..1a31128 --- /dev/null +++ b/assets/CoreOverview.8672df9b.js @@ -0,0 +1,19 @@ +import{M as i}from"./index.62c812ca.js";import{c as e,m as s}from"./index.3b024fd0.js";function c(o={}){const{wrapper:t}=Object.assign({},i(),o.components);return t?e(t,s(o,{get children(){return e(r,{})}})):r();function r(){const n=Object.assign({h1:"h1",blockquote:"blockquote",p:"p",a:"a",h2:"h2",pre:"pre",code:"code"},i(),o.components);return[e(n.h1,{children:"Solid Bootstrap Core"}),` +`,e(n.blockquote,{get children(){return[` +`,e(n.p,{get children(){return["Ported from ",e(n.a,{href:"https://react-restart.github.io/ui/",children:"restart/ui"})]}}),` +`]}}),` +`,e(n.p,{children:`Solid Bootstrap Core is a set of full featured, extensible, and accessible UI components, designed to integrate into any styling\r +framework or system. Core components, are "headless", meaning they don't provide any styles. Components encapsulate\r +the complicated logic and and state without being prescriptive about their look and feel.`}),` +`,e(n.h2,{children:"Installation"}),` +`,e(n.pre,{get children(){return e(n.code,{className:"hljs language-js",children:`npm install solid-bootstrap-core +`})}}),` +`,e(n.h2,{children:"Styling"}),` +`,e(n.p,{get children(){return[`Core components are "headless", meaning each component encapsulates logic and markup but not styling.\r +These components ares intended as a basis for building design systems using which styling technology you like.\r +You should provide your own styles, and the documentation provides some simple examples\r +for how to do that. For more complex integrations, check out the `,e(n.a,{href:"https://solid-libs.github.io/solid-bootstrap/components/accordion",children:"Solid Bootstrap components"}),"."]}}),` +`,e(n.p,{get children(){return["There are a few places where inline ",e(n.code,{children:"style"}),`s are applied, however. They are functionally\r +required and very minimal. Specifically `,e(n.code,{children:"PopperJs"}),` injects it's own styles in order\r +to position overlays and dropdowns, and `,e(n.code,{children:"Modal"})," applies ",e(n.code,{children:"overflow: hidden"}),` to the\r +document body. These can technically be overridden but you probably won't need to.`]}})]}}export{c as default}; diff --git a/assets/Dropdown.1ab10eb7.js b/assets/Dropdown.1ab10eb7.js new file mode 100644 index 0000000..bbb15a5 --- /dev/null +++ b/assets/Dropdown.1ab10eb7.js @@ -0,0 +1 @@ +import{y as q,z as w,f as m,m as h,k as E,h as v,Q as z,s as $,H as S,U as B,G as R,V as K,W as G,c as D,D as Q,X as F,Y as V,w as X,Z as Y,$ as Z,a0 as O}from"./index.3b024fd0.js";import{c as j,r as J,m as _,u as ee,a as te}from"./mergeOptionsWithPopperConfig.a93c26d5.js";import{u as ne}from"./Example.5c690fb1.js";const oe=q(null),P=oe,re=()=>{};function se(t={}){const e=w(P),[c,l]=m(),[u,s]=m(!1),[C,g]=j({}),a=h({fixed:!1,popperConfig:{},usePopper:!!e},t),d=E(()=>e?.show==null?!!a.show:e.show);v(()=>{d()&&!u()&&s(!0)}),z(()=>{g(J(_({placement:a.placement||e?.placement||"bottom-start",enabled:a.usePopper??!!e,enableEvents:a.enableEventListeners==null?d():a.enableEventListeners,offset:a.offset,flip:a.flip,fixed:a.fixed,arrowElement:c(),popperConfig:a.popperConfig})))});const y=k=>{e?.toggle(!1,k)},f=ee(()=>e?.toggleElement,()=>e?.menuElement,C);return v(()=>{e?.menuElement&&te(()=>e.menuElement,y,{get clickTrigger(){return a.rootCloseEvent},get disabled(){return!d()}})}),[h({get ref(){return e?.setMenu||re},get style(){return f()?.styles.popper},get"aria-labelledby"(){return e?.toggleElement?.id}},f()?.attributes.popper??{}),{get show(){return d()},get placement(){return e?.placement},get hasShown(){return u()},get toggle(){return e?.toggle},get popper(){return a.usePopper?f():null},get arrowProps(){return a.usePopper?{ref:l,...f()?.attributes.arrow,style:f()?.styles.arrow}:{}}}]}function ae(t){const[e,c]=$(t,["children"]),[l,u]=se(c);return E(()=>e.children(l,u))}const H=t=>t.getAttribute("role")?.toLowerCase()==="menu",ce=()=>{};function le(){const t=ne(),e=w(P);return[{id:t,get ref(){return e.setToggle||ce},onClick:l=>{e.toggle(!e.show,l)},get"aria-expanded"(){return!!e.show},get"aria-haspopup"(){return e.menuElement&&H(e.menuElement)?!0:void 0}},{get show(){return e.show},get toggle(){return e.toggle}}]}function ue({children:t}){const[e,c]=le();return E(()=>t(e,c))}function ie(t){const e=w(S),c=w(B),{activeKey:l}=c||{},u=R(t.key,t.href),s=E(()=>t.active==null&&t.key!=null?R(l)===u:t.active);return[{onClick:g=>{if(t.disabled)return;let a=F(t.onClick,g);e&&!a.isPropagationStopped&&e(u,g)},get"aria-disabled"(){return t.disabled||void 0},get"aria-selected"(){return s()},[K("dropdown-item")]:""},{get isActive(){return s()}}]}const pe=t=>{const[e,c]=$(h({as:G},t),["eventKey","disabled","onClick","active","as"]),[l]=ie({get key(){return e.eventKey},get href(){return c.href},get disabled(){return e.disabled},get onClick(){return e.onClick},get active(){return e.active}});return D(Q,h({get component(){return e.as}},c,l))},ge=pe;function T(t){const e=h({itemSelector:`* [${K("dropdown-item")}]`,placement:"bottom-start"},t),c=V(),[l,u]=X(()=>e.show,()=>e.defaultShow,e.onToggle),[s,C]=m(),[g,a]=m(),[d,y]=m(null),f=w(S),I=()=>s()?.contains(s().ownerDocument.activeElement),b=(n,o,r=o?.type)=>{u(n,{originalEvent:o,source:r})},k=(n,o)=>{F(p=>{e.onSelect?.(n,p),b(!1,p,"select")},o).isPropagationStopped||f?.(n,o)},N={toggle:b,setMenu:C,setToggle:a,get placement(){return e.placement},get show(){return l()},get menuElement(){return s()},get toggleElement(){return g()}},M=()=>{const n=g();n&&n.focus&&n.focus()},W=()=>{const n=d();y(null);let o=e.focusFirstItemOnShow;if(o==null&&(o=s()&&H(s())?"keyboard":!1),o===!1||o==="keyboard"&&!/^key.+$/.test(n))return;const r=O(s(),e.itemSelector)[0];r&&r.focus&&r.focus()};v(()=>{l()?W():I()&&M()});const A=(n,o)=>{if(!s())return null;const r=O(s(),e.itemSelector);let p=r.indexOf(n)+o;return p=Math.max(0,Math.min(p,r.length)),r[p]},L=n=>{const{key:o}=n,r=n.target,p=s()?.contains(r),U=g()?.contains(r);if(/input|textarea/i.test(r.tagName)&&(o===" "||o!=="Escape"&&p||o==="Escape"&&r.type==="search")||!p&&!U||o==="Tab"&&(!s()||!l))return;y(n.type);const x={originalEvent:n,source:n.type};switch(o){case"ArrowUp":{const i=A(r,-1);i&&i.focus&&i.focus(),n.preventDefault();return}case"ArrowDown":if(n.preventDefault(),!l)u(!0,x);else{const i=A(r,1);i&&i.focus&&i.focus()}return;case"Tab":Z(r.ownerDocument,"keyup",i=>{(i.key==="Tab"&&!i.target||!s()?.contains(i.target))&&u(!1,x)},{once:!0});break;case"Escape":o==="Escape"&&(n.preventDefault(),n.stopPropagation()),u(!1,x),M();break}};return c.document.addEventListener("keydown",L),Y(()=>c.document.removeEventListener("keydown",L)),D(S.Provider,{value:k,get children(){return D(P.Provider,{value:N,get children(){return e.children}})}})}T.Menu=ae;T.Toggle=ue;T.Item=ge;export{P as D,se as a,le as b,T as c,ie as u}; diff --git a/assets/Dropdown.83aba557.js b/assets/Dropdown.83aba557.js new file mode 100644 index 0000000..a2c6dab --- /dev/null +++ b/assets/Dropdown.83aba557.js @@ -0,0 +1 @@ +import{y as E,s as b,m as u,u as x,c as w,d as P,D as C,v as T,z as h,O as M,S as O,r as D,w as B,P as G}from"./index.3b024fd0.js";import{u as j,a as F,D as N,b as A,c as H}from"./Dropdown.1ab10eb7.js";import{I as $}from"./InputGroupContext.7b9a128a.js";import{B as K}from"./Layout.7bb15751.js";const z=E({}),S=z,V={as:T,disabled:!1},W=n=>{const[e,t]=b(u(V,n),["as","bsPrefix","class","eventKey","disabled","onClick","active"]),o=x(e.bsPrefix,"dropdown-item"),[l,s]=j({get key(){return e.eventKey},get href(){return t.href},get disabled(){return e.disabled},get onClick(){return e.onClick},get active(){return e.active}});return w(C,u({get component(){return e.as}},t,l,{get class(){return P(e.class,o,s.isActive&&"active",e.disabled&&"disabled")}}))},q=W,J={as:"div",flip:!0};function k(n,e,t){const o=t?"top-end":"top-start",l=t?"top-start":"top-end",s=t?"bottom-end":"bottom-start",c=t?"bottom-start":"bottom-end",r=t?"right-start":"left-start",g=t?"right-end":"left-end",d=t?"left-start":"right-start",p=t?"left-end":"right-end";let a=n?c:s;return e==="up"?a=n?l:o:e==="end"?a=n?p:d:e==="start"&&(a=n?g:r),a}const Q=n=>{const[e,t]=b(u(J,n),["as","bsPrefix","class","align","rootCloseEvent","flip","show","renderOnMount","popperConfig","ref","variant"]);let o=!1;const l=h(M),s=x(e.bsPrefix,"dropdown-menu"),c=h(S),r=e.align||c.align,g=h($),d=[];if(r)if(typeof r=="object"){const m=Object.keys(r);if(m.length){const y=m[0],I=r[y];o=I==="start",d.push(`${s}-${y}-${I}`)}}else r==="end"&&(o=!0);const[p,a]=F({get flip(){return e.flip},get rootCloseEvent(){return e.rootCloseEvent},get show(){return e.show},get usePopper(){return!l&&d.length===0},get offset(){return[0,2]},get popperConfig(){return e.popperConfig},get placement(){return k(o,c.drop,c.isRTL)}}),v=m=>{p.ref?.(m),e.ref?.(m)},f=u(p,typeof e.as!="string"?{get show(){return a.show},get close(){return()=>a.toggle?.(!1)},get align(){return r}}:{}),i=()=>a.popper?.placement?{...t.style,...p.style}:t.style;return w(O,{get when(){return a.hasShown||e.renderOnMount||g},get children(){return w(C,u({get component(){return e.as}},t,f,{ref:v,get style(){return i()}},()=>d.length||l?{"data-bs-popper":"static"}:{},{get class(){return P(e.class,s,a.show&&"show",o&&`${s}-end`,e.variant&&`${s}-${e.variant}`,...d)}}))}})},R=Q,U={as:K},X=n=>{const[e,t]=b(u(U,n),["as","bsPrefix","split","class","childBsPrefix","ref"]),o=x(e.bsPrefix,"dropdown-toggle"),l=h(N),s=h($);e.childBsPrefix!==void 0&&(t.bsPrefix=e.childBsPrefix);const[c]=A(),[r,g]=b(c,["ref"]);return w(C,u({get component(){return e.as},get class(){return P(e.class,o,e.split&&`${o}-split`,!!s&&l?.show&&"show")}},g,t,{ref:p=>{r.ref?.(p),e.ref?.(p)}}))},Y=X,Z=D("dropdown-header",{defaultProps:{role:"heading"}}),_=D("dropdown-divider",{Component:"hr",defaultProps:{role:"separator"}}),L=D("dropdown-item-text",{Component:"span"}),ee={as:"div",navbar:!1,align:"start",autoClose:!0},te=n=>{const[e,t]=b(u(ee,n),["as","bsPrefix","drop","show","defaultShow","class","align","onSelect","onToggle","focusFirstItemOnShow","navbar","autoClose"]),[o,l]=B(()=>e.show,()=>e.defaultShow,e.onToggle),s=h($),c=x(e.bsPrefix,"dropdown"),r=G(),g=f=>e.autoClose===!1?f==="click":e.autoClose==="inside"?f!=="rootClose":e.autoClose==="outside"?f!=="select":!0,d=(f,i)=>{(i.originalEvent.currentTarget===document||i.originalEvent.currentTarget===null)&&(i.source!=="keydown"||i.originalEvent.key==="Escape")&&(i.source="rootClose"),g(i.source)&&l?.(f,i)},p=e.align==="end",a=k(p,e.drop,r()),v={get align(){return e.align},get drop(){return e.drop},get isRTL(){return r()}};return w(S.Provider,{value:v,get children(){return w(H,{placement:a,get show(){return o()},get onSelect(){return e.onSelect},onToggle:d,get focusFirstItemOnShow(){return e.focusFirstItemOnShow},itemSelector:`.${c}-item:not(.disabled):not(:disabled)`,get children(){return s?t.children:w(C,u({get component(){return e.as}},t,{get class(){return P(e.class,o()&&"show",(!e.drop||e.drop==="down")&&c,e.drop==="up"&&"dropup",e.drop==="end"&&"dropend",e.drop==="start"&&"dropstart")}}))}})}})},ae=Object.assign(te,{Toggle:Y,Menu:R,Item:q,ItemText:L,Divider:_,Header:Z});export{ae as D,Y as a,R as b}; diff --git a/assets/DropdownButton.dd81a023.js b/assets/DropdownButton.dd81a023.js new file mode 100644 index 0000000..66c03d6 --- /dev/null +++ b/assets/DropdownButton.dd81a023.js @@ -0,0 +1 @@ +import{s as i,m as t,c as r}from"./index.3b024fd0.js";import{a as s,b as u,D as a}from"./Dropdown.83aba557.js";const d={},l=n=>{const[e,o]=i(t(d,n),["title","children","bsPrefix","rootCloseEvent","variant","size","menuRole","renderMenuOnMount","disabled","href","id","menuVariant"]);return r(a,t(o,{get children(){return[r(s,{get id(){return e.id},get href(){return e.href},get size(){return e.size},get variant(){return e.variant},get disabled(){return e.disabled},get childBsPrefix(){return e.bsPrefix},get children(){return e.title}}),r(u,{get role(){return e.menuRole},get renderOnMount(){return e.renderMenuOnMount},get rootCloseEvent(){return e.rootCloseEvent},get variant(){return e.menuVariant},get children(){return e.children}})]}}))},c=l;export{c as D}; diff --git a/assets/DropdownDocs.95126457.js b/assets/DropdownDocs.95126457.js new file mode 100644 index 0000000..b1ceae6 --- /dev/null +++ b/assets/DropdownDocs.95126457.js @@ -0,0 +1,316 @@ +import{t as h,c as e,m as D,al as o,o as r,n as b,N as I}from"./index.3b024fd0.js";import{M as w}from"./index.62c812ca.js";import{E as a}from"./Example.5c690fb1.js";import{G as y}from"./GithubSource.f477ce58.js";import{D as s}from"./Dropdown.83aba557.js";import{N as c}from"./NavDropdown.5bf7a64f.js";import{D as i}from"./DropdownButton.dd81a023.js";import{S as p}from"./Stack.d0052ade.js";import{B as m}from"./ButtonGroup.fa9e330d.js";import{B as A}from"./Layout.7bb15751.js";import{S as u}from"./SplitButton.7c398347.js";import{A as S}from"./Alert.4f4dadf1.js";import"./Card.9a738601.js";import"./Dropdown.1ab10eb7.js";import"./mergeOptionsWithPopperConfig.a93c26d5.js";import"./InputGroupContext.7b9a128a.js";const k=h(`

    API

    DropdownButton

    import { DropdownButton } from 'solid-bootstrap'

    A convenience component for simple or general use dropdowns. Renders a Button toggle and all children are passed directly to the default Dropdown.Menu. This component accepts all of Dropdown's props.

    All unknown props are passed through to the Dropdown component. Only the Button variant, size and bsPrefix props are passed to the toggle, along with menu-related props are passed to the Dropdown.Menu

    NameTypeDefaultDescription
    align
    "start"|"end"|{ sm: "start"|"end" }|{ md: "start"|"end" }|{ lg: "start"|"end" }|{ xl: "start"|"end"}|{ xxl: "start"|"end"}

    Aligns the dropdown menu.

    disabled
    boolean

    Disables both Buttons

    href
    string

    An href passed to the Toggle component

    id
    string

    An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers.

    menuRole
    string

    An ARIA accessible role applied to the Menu component. When set to 'menu', The dropdown

    menuVariant
    'dark'

    Menu color variant.

    Omitting this will use the default light color.

    onClick
    function

    An onClick handler passed to the Toggle component

    renderMenuOnMount
    boolean

    Whether to render the dropdown menu in the DOM before the first time it is shown

    rootCloseEvent
    string

    Which event when fired outside the component will cause it to be closed.

    size
    string

    Component size variations.

    title required
    node

    The content of the non-toggle Button.

    variant
    string

    Component visual or contextual style variants.

    bsPrefix
    string

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    SplitButton

    import { SplitButton } from 'solid-bootstrap'

    A convenience component for simple or general use split button dropdowns. Renders a ButtonGroup containing a Button and a Button toggle for the Dropdown. All children are passed directly to the default Dropdown.Menu. This component accepts all of Dropdown's props.

    All unknown props are passed through to the Dropdown component. The Button variant, size and bsPrefix props are passed to the button and toggle, and menu-related props are passed to the Dropdown.Menu

    NameTypeDefaultDescription
    align
    "start"|"end"|{ sm: "start"|"end" }|{ md: "start"|"end" }|{ lg: "start"|"end" }|{ xl: "start"|"end"}|{ xxl: "start"|"end"}

    Aligns the dropdown menu.

    disabled
    boolean

    Disables both Buttons

    href
    string

    An href passed to the non-toggle Button

    id required
    string

    An html id attribute for the Toggle button, necessary for assistive technologies, such as screen readers.

    menuRole
    string

    An ARIA accessible role applied to the Menu component. When set to 'menu', The dropdown

    onClick
    function

    An onClick handler passed to the non-toggle Button

    renderMenuOnMount
    boolean

    Whether to render the dropdown menu in the DOM before the first time it is shown

    rootCloseEvent
    string

    Which event when fired outside the component will cause it to be closed.

    size
    string

    Component size variations.

    target
    string

    An anchor target passed to the non-toggle Button

    title required
    node

    The content of the non-toggle Button.

    toggleLabel
    string
    		'Toggle dropdown'

    Accessible label for the toggle; the value of title if not specified.

    type
    string
    		'button'

    A type passed to the non-toggle Button

    variant
    string

    Component visual or contextual style variants.

    bsPrefix
    string

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Dropdown

    import { Dropdown } from 'solid-bootstrap'
    NameTypeDefaultDescription
    align
    "start"|"end"|{ sm: "start"|"end" }|{ md: "start"|"end" }|{ lg: "start"|"end" }|{ xl: "start"|"end"} { xxl: "start"|"end"}
    		'start'

    Aligns the dropdown menu to the specified side of the Dropdown toggle. You can also align the menu responsively for breakpoints starting at sm and up. The alignment direction will affect the specified breakpoint or larger.

    Note: Using responsive alignment will disable Popper usage for positioning.

    as
    elementType

    You can use a custom element type for this component.

    autoClose
    true | 'outside' | 'inside' | false
    		true

    Controls the auto close behaviour of the dropdown when clicking outside of the button or the list.

    drop
    'up' | 'start' | 'end' | 'down'

    Determines the direction and location of the Menu in relation to it's Toggle.

    flip
    boolean

    Allow Dropdown to flip in case of an overlapping on the reference element. For more information refer to Popper.js's flip docs.

    focusFirstItemOnShow
    false | true | 'keyboard'

    Controls the focus behavior for when the Dropdown is opened. Set totrue to always focus the first menu item, keyboard to focus only when navigating via the keyboard, or false to disable completely

    The Default behavior is false unless the Menu has a role="menu"where it will default to keyboard to match the recommended ARIA Authoring practices.

    navbar
    boolean
    		false
    onSelect
    function

    A callback fired when a menu item is selected.

    (eventKey: any, event: Object) => any
    onToggle
    function
    controls show

    A callback fired when the Dropdown wishes to change visibility. Called with the requestedshow value, the DOM event, and the source that fired it: 'click','keydown','rootClose', or 'select'.

    function(isOpen: boolean,event: SyntheticEvent,metadata: {source: 'select' | 'click' | 'rootClose' | 'keydown'}): void
    show
    boolean
    controlled by: onToggle, initial prop: defaultShow

    Whether or not the Dropdown is visible.

    bsPrefix
    string
    		'dropdown'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Dropdown.Toggle

    NameTypeDefaultDescription
    as
    elementType
    		<Button>

    You can use a custom element type for this component.

    childBsPrefix
    string

    to passthrough to the underlying button or whatever from DropdownButton

    id
    string|number

    An html id attribute, necessary for assistive technologies, such as screen readers.

    split
    boolean
    bsPrefix
    string
    		'dropdown-toggle'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Dropdown.Menu

    NameTypeDefaultDescription
    align
    "start"|"end"|{ sm: "start"|"end" }|{ md: "start"|"end" }|{ lg: "start"|"end" }|{ xl: "start"|"end"}|{ xxl: "start"|"end"}

    Aligns the dropdown menu to the specified side of the container. You can also align the menu responsively for breakpoints starting at sm and up. The alignment direction will affect the specified breakpoint or larger.

    Note: Using responsive alignment will disable Popper usage for positioning.

    as
    elementType
    		<div>

    Control the rendering of the DropdownMenu. All non-menu props (listed here) are passed through to the as Component.

    If providing a custom, non DOM, component. the show, close and align props are also injected and should be handled appropriately.

    flip
    boolean
    		true

    Have the dropdown switch to it's opposite placement when necessary to stay on screen.

    onSelect
    function
    popperConfig
    object

    A set of popper options and props passed directly to Popper.

    renderOnMount
    boolean

    Whether to render the dropdown menu in the DOM before the first time it is shown

    rootCloseEvent
    'click' | 'mousedown'

    Which event when fired outside the component will cause it to be closed

    Note: For custom dropdown components, you will have to pass the rootCloseEvent to <RootCloseWrapper> in your custom dropdown menu component ).

    show
    boolean

    Controls the visibility of the Dropdown menu

    variant
    string

    Menu color variant.

    Omitting this will use the default light color.

    bsPrefix
    string
    		'dropdown-menu'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Dropdown.Item

    NameTypeDefaultDescription
    active
    boolean

    Highlight the menu item as active.

    as
    elementType
    		<Anchor>

    You can use a custom element type for this component.

    disabled
    boolean
    		false

    Disable the menu item, making it unselectable.

    eventKey
    string | number

    Value passed to the onSelect handler, useful for identifying the selected menu item.

    href
    string

    HTML href attribute corresponding to a.href.

    onClick
    function

    Callback fired when the menu item is clicked.

    bsPrefix
    string
    		'dropdown-item'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Dropdown.Header

    NameTypeDefaultDescription
    as
    elementType
    		<div>

    You can use a custom element type for this component.

    bsPrefix required
    string
    		'dropdown-header'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    Dropdown.Divider

    NameTypeDefaultDescription
    as
    elementType
    		<hr>

    You can use a custom element type for this component.

    bsPrefix required
    string
    		'dropdown-divider'

    Change the underlying component CSS base class name and modifier class names prefix. This is an escape hatch for working with heavily customized bootstrap css.

    `),x=()=>k.cloneNode(!0),B=h('

    '),T=h('    Popper.js'),M=h('WAI-ARIA'),f=h('
    '),C=h("
    "),K=h('
    '),_=h('
    ');function J(g={}){const{wrapper:N}=Object.assign({},w(),g.components);return N?e(N,D(g,{get children(){return e(v,{})}})):v();function v(){const n=Object.assign({h1:"h1",p:"p",h2:"h2",code:"code",pre:"pre",span:"span",strong:"strong"},w(),g.components);return s||d("Dropdown",!1),s.Divider||d("Dropdown.Divider",!0),s.Header||d("Dropdown.Header",!0),s.Item||d("Dropdown.Item",!0),s.ItemText||d("Dropdown.ItemText",!0),s.Menu||d("Dropdown.Menu",!0),s.Toggle||d("Dropdown.Toggle",!0),a||d("Example",!1),a.Code||d("Example.Code",!0),a.Intro||d("Example.Intro",!0),a.Preview||d("Example.Preview",!0),c||d("NavDropdown",!1),c.Divider||d("NavDropdown.Divider",!0),c.Item||d("NavDropdown.Item",!0),o||d("Navbar",!1),o.Brand||d("Navbar.Brand",!0),o.Collapse||d("Navbar.Collapse",!0),o.Toggle||d("Navbar.Toggle",!0),[e(y,{name:"DropdownDocs.mdx"}),` +`,e(n.h1,{children:"Dropdowns"}),` +`,(()=>{const l=B.cloneNode(!0);return r(l,e(n.p,{children:`Toggle contextual overlays for displaying lists of links and more with\r +the Bootstrap dropdown plugin.`})),l})(),` +`,e(n.h2,{children:"Overview"}),` +`,e(n.p,{get children(){return[`Dropdowns are toggleable, contextual overlays for displaying lists of\r +links and more. Like overlays, Dropdowns are built using a third-party\r +library `,T.cloneNode(!0),`, which provides\r +dynamic positioning and viewport detection.`]}}),` +`,e(n.h2,{children:"Accessibility"}),` +`,e(n.p,{get children(){return["The ",M.cloneNode(!0),` standard\r +defines a `,e(n.code,{children:'role="menu"'}),` widget, but it's very specific to a certain kind of menu. ARIA menus, must\r +only contain `,e(n.code,{children:'role="menuitem"'}),", ",e(n.code,{children:'role="menuitemcheckbox"'}),", or ",e(n.code,{children:'role="menuitemradio"'}),"."]}}),` +`,e(n.p,{get children(){return[`On the other hand, Bootstrap's dropdowns are designed to more generic\r +and application in a variety of situations. For this reason we don't\r +automatically add the menu roles to the markup. We do implement some\r +basic keyboard navigation, and if you do provide the "menu" role,\r +`,e(n.code,{children:"solid-bootstrap"}),` will do its best to ensure the focus management is\r +compliant with the ARIA authoring guidelines for menus.`]}}),` +`,(()=>{const l=_.cloneNode(!0);return r(l,e(a,{title:"Single button dropdowns",get children(){return[e(a.Intro,{get children(){return e(n.p,{get children(){return["The basic Dropdown is composed of a wrapping ",e(n.code,{children:"Dropdown"}),` and\r +inner `,e(n.code,{children:""}),", and ",e(n.code,{children:""}),`. By\r +default the `,e(n.code,{children:""}),` will render a\r +`,e(n.code,{children:"Button"})," component and accepts all the same props."]}})}}),e(a.Preview,{get children(){return[e(s,{get children(){return[e(s.Toggle,{variant:"success",id:"dropdown-basic",children:"Dropdown Button"}),e(s.Menu,{get children(){return[e(s.Item,{href:"#/action-1",children:"Action"}),`\r +`,e(s.Item,{href:"#/action-2",children:"Another action"}),`\r +`,e(s.Item,{href:"#/action-3",children:"Something else"})]}})]}}),(()=>{const t=f.cloneNode(!0);return r(t,e(n.p,{get children(){return[`Since the above is such a common configuration solid-bootstrap provides\r +the `,e(n.code,{children:""}),` component to help reduce typing. Provide\r +a `,e(n.code,{children:"title"})," prop and some ",e(n.code,{children:""}),`s and you're\r +ready to go.`]}})),t})(),e(i,{id:"dropdown-basic-button",title:"Dropdown button",get children(){return[e(s.Item,{href:"#/action-1",children:"Action"}),`\r +`,e(s.Item,{href:"#/action-2",children:"Another action"}),`\r +`,e(s.Item,{href:"#/action-3",children:"Something else"})]}})]}}),e(a.Code,{get children(){return e(n.pre,{get children(){return e(n.code,{className:"hljs language-js",get children(){return["<",e(n.span,{className:"hljs-title class_",children:"Dropdown"}),`>\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Toggle"})," ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"success"'})," ",e(n.span,{className:"hljs-attr",children:"id"}),"=",e(n.span,{className:"hljs-string",children:'"dropdown-basic"'}),">"]}}),"Dropdown Button",e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Menu"}),">"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-1"'}),">"]}}),"Action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-2"'}),">"]}}),"Another action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-3"'}),">"]}}),"Something else",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +\r +\r +`,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"DropdownButton"})," ",e(n.span,{className:"hljs-attr",children:"id"}),"=",e(n.span,{className:"hljs-string",children:'"dropdown-basic-button"'})," ",e(n.span,{className:"hljs-attr",children:"title"}),"=",e(n.span,{className:"hljs-string",children:'"Dropdown button"'}),">"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-1"'}),">"]}}),"Action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-2"'}),">"]}}),"Another action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-3"'}),">"]}}),"Something else",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r +`,e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),` +`]}})}})}})]}}),null),r(l,e(a,{title:"DropdownButton props",get children(){return[e(a.Intro,{get children(){return e(n.p,{children:"DropdownButton will forward Button props to the underlying Toggle component"})}}),e(a.Preview,{get children(){return e(p,{direction:"horizontal",gap:2,get children(){return["Primary","Secondary","Success","Info","Warning","Danger"].map(t=>e(i,{as:m,id:`dropdown-variants-${t}`,get variant(){return t.toLowerCase()},title:t,get children(){return[e(s.Item,{eventKey:"1",children:"Action"}),e(s.Item,{eventKey:"2",children:"Another action"}),e(s.Item,{eventKey:"3",active:!0,children:"Active Item"}),e(s.Divider,{}),e(s.Item,{eventKey:"4",children:"Separated link"})]}}))}})}}),e(a.Code,{get children(){return e(n.pre,{get children(){return e(n.code,{className:"hljs language-js",get children(){return["<",e(n.span,{className:"hljs-title class_",children:"Stack"})," direction=",e(n.span,{className:"hljs-string",children:'"horizontal"'})," gap={",e(n.span,{className:"hljs-number",children:"2"}),`}>\r + {[`,e(n.span,{className:"hljs-string",children:"'Primary'"}),", ",e(n.span,{className:"hljs-string",children:"'Secondary'"}),", ",e(n.span,{className:"hljs-string",children:"'Success'"}),", ",e(n.span,{className:"hljs-string",children:"'Info'"}),", ",e(n.span,{className:"hljs-string",children:"'Warning'"}),", ",e(n.span,{className:"hljs-string",children:"'Danger'"}),"].",e(n.span,{className:"hljs-title function_",children:"map"}),`(\r + `,e(n.span,{className:"hljs-function",get children(){return["(",e(n.span,{className:"hljs-params",children:"variant"}),") =>"]}}),` (\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"DropdownButton"}),`\r + `,e(n.span,{className:"hljs-attr",children:"as"}),"=",e(n.span,{className:"hljs-string",children:"{ButtonGroup}"}),`\r + `,e(n.span,{className:"hljs-attr",children:"id"}),"=",e(n.span,{className:"hljs-string",children:"{"}),"`",e(n.span,{className:"hljs-attr",children:"dropdown-variants-"}),"${",e(n.span,{className:"hljs-attr",children:"variant"}),"}`}\r\n ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:"{variant.toLowerCase()}"}),`\r + `,e(n.span,{className:"hljs-attr",children:"title"}),"=",e(n.span,{className:"hljs-string",children:"{variant}"}),`\r + >`]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"1"'}),">"]}}),"Action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"2"'}),">"]}}),"Another action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"3"'})," ",e(n.span,{className:"hljs-attr",children:"active"}),">"]}}),`\r + Active Item\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Divider"})," />"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"4"'}),">"]}}),"Separated link",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + ),\r + )}\r + +`]}})}})}})]}}),null),r(l,e(a,{title:"Split button dropdowns",get children(){return[e(a.Intro,{get children(){return e(n.p,{children:"Similarly, You create a split dropdown by combining the Dropdown components with another Button and a ButtonGroup."})}}),e(a.Preview,{get children(){return[e(s,{as:m,get children(){return[e(A,{variant:"success",children:"Split Button"}),e(s.Toggle,{split:!0,variant:"success",id:"dropdown-split-basic"}),e(s.Menu,{get children(){return[e(s.Item,{href:"#/action-1",children:"Action"}),`\r +`,e(s.Item,{href:"#/action-2",children:"Another action"}),`\r +`,e(s.Item,{href:"#/action-3",children:"Something else"})]}})]}}),(()=>{const t=f.cloneNode(!0);return r(t,e(n.p,{get children(){return["As with DropdownButton, ",e(n.code,{children:"SplitButton"})," is provided as convenience component."]}})),t})(),e(p,{direction:"horizontal",gap:2,get children(){return["Primary","Secondary","Success","Info","Warning","Danger"].map(t=>e(u,{id:`dropdown-split-variants-${t}`,get variant(){return t.toLowerCase()},title:t,get children(){return[e(s.Item,{eventKey:"1",children:"Action"}),e(s.Item,{eventKey:"2",children:"Another action"}),e(s.Item,{eventKey:"3",active:!0,children:"Active Item"}),e(s.Divider,{}),e(s.Item,{eventKey:"4",children:"Separated link"})]}}))}})]}}),e(a.Code,{get children(){return e(n.pre,{get children(){return e(n.code,{className:"hljs language-js",get children(){return["<",e(n.span,{className:"hljs-title class_",children:"Dropdown"})," ",e(n.span,{className:"hljs-keyword",children:"as"}),"={",e(n.span,{className:"hljs-title class_",children:"ButtonGroup"}),`}>\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Button"})," ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"success"'}),">"]}}),"Split Button",e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(n.span,{className:"xml",get children(){return e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Toggle"})," ",e(n.span,{className:"hljs-attr",children:"split"})," ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"success"'})," ",e(n.span,{className:"hljs-attr",children:"id"}),"=",e(n.span,{className:"hljs-string",children:'"dropdown-split-basic"'})," />"]}})}}),`\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Menu"}),">"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-1"'}),">"]}}),"Action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-2"'}),">"]}}),"Another action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-3"'}),">"]}}),"Something else",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r +\r +\r +`,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Stack"})," ",e(n.span,{className:"hljs-attr",children:"direction"}),"=",e(n.span,{className:"hljs-string",children:'"horizontal"'})," ",e(n.span,{className:"hljs-attr",children:"gap"}),"=",e(n.span,{className:"hljs-string",children:"{2}"}),">"]}}),`\r + {['Primary', 'Secondary', 'Success', 'Info', 'Warning', 'Danger'].map(\r + (variant) => (\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"SplitButton"}),`\r + `,e(n.span,{className:"hljs-attr",children:"id"}),"=",e(n.span,{className:"hljs-string",children:"{"}),"`",e(n.span,{className:"hljs-attr",children:"dropdown-split-variants-"}),"${",e(n.span,{className:"hljs-attr",children:"variant"}),"}`}\r\n ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:"{variant.toLowerCase()}"}),`\r + `,e(n.span,{className:"hljs-attr",children:"title"}),"=",e(n.span,{className:"hljs-string",children:"{variant}"}),`\r + >`]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"1"'}),">"]}}),"Action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"2"'}),">"]}}),"Another action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"3"'})," ",e(n.span,{className:"hljs-attr",children:"active"}),">"]}}),"Active Item",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Divider"})," />"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"4"'}),">"]}}),"Separated link",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + ),\r + )}\r +`,e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),` +`]}})}})}})]}}),null),r(l,e(a,{title:"Sizing",get children(){return[e(a.Intro,{get children(){return e(n.p,{children:"Dropdowns work with buttons of all sizes."})}}),e(a.Preview,{get children(){return[e(p,{direction:"horizontal",gap:2,get children(){return[i,u].map((t,j)=>e(t,{as:m,id:`dropdown-button-drop-${j}`,size:"lg",title:"Drop large",get children(){return[e(s.Item,{eventKey:"1",children:"Action"}),e(s.Item,{eventKey:"2",children:"Another action"}),e(s.Item,{eventKey:"3",children:"Something else here"}),e(s.Divider,{}),e(s.Item,{eventKey:"4",children:"Separated link"})]}}))}}),e(p,{direction:"horizontal",gap:2,class:"mt-2",get children(){return[i,u].map((t,j)=>e(t,{as:m,id:`dropdown-button-drop-${j}`,size:"sm",variant:"secondary",title:"Drop small",get children(){return[e(s.Item,{eventKey:"1",children:"Action"}),e(s.Item,{eventKey:"2",children:"Another action"}),e(s.Item,{eventKey:"3",children:"Something else here"}),e(s.Divider,{}),e(s.Item,{eventKey:"4",children:"Separated link"})]}}))}})]}}),e(a.Code,{get children(){return e(n.pre,{get children(){return e(n.code,{className:"hljs language-js",get children(){return[" <",e(n.span,{className:"hljs-title class_",children:"Stack"})," direction=",e(n.span,{className:"hljs-string",children:'"horizontal"'})," gap={",e(n.span,{className:"hljs-number",children:"2"}),`}>\r + {[`,e(n.span,{className:"hljs-title class_",children:"DropdownButton"}),", ",e(n.span,{className:"hljs-title class_",children:"SplitButton"}),"].",e(n.span,{className:"hljs-title function_",children:"map"}),"(",e(n.span,{className:"hljs-function",get children(){return["(",e(n.span,{className:"hljs-params",children:"DropdownType, idx"}),") =>"]}}),` (\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"DropdownType"}),`\r + `,e(n.span,{className:"hljs-attr",children:"as"}),"=",e(n.span,{className:"hljs-string",children:"{ButtonGroup}"}),`\r + `,e(n.span,{className:"hljs-attr",children:"id"}),"=",e(n.span,{className:"hljs-string",children:"{"}),"`",e(n.span,{className:"hljs-attr",children:"dropdown-button-drop-"}),"${",e(n.span,{className:"hljs-attr",children:"idx"}),"}`}\r\n ",e(n.span,{className:"hljs-attr",children:"size"}),"=",e(n.span,{className:"hljs-string",children:'"lg"'}),`\r + `,e(n.span,{className:"hljs-attr",children:"title"}),"=",e(n.span,{className:"hljs-string",children:'"Drop large"'}),`\r + >`]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"1"'}),">"]}}),"Action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"2"'}),">"]}}),"Another action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"3"'}),">"]}}),"Something else here",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Divider"})," />"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"4"'}),">"]}}),"Separated link",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + ))}\r + \r +\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Stack"})," ",e(n.span,{className:"hljs-attr",children:"direction"}),"=",e(n.span,{className:"hljs-string",children:'"horizontal"'})," ",e(n.span,{className:"hljs-attr",children:"gap"}),"=",e(n.span,{className:"hljs-string",children:"{2}"})," ",e(n.span,{className:"hljs-attr",children:"class"}),"=",e(n.span,{className:"hljs-string",children:'"mt-2"'}),">"]}}),`\r + {[DropdownButton, SplitButton].map((DropdownType, idx) => (\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"DropdownType"}),`\r + `,e(n.span,{className:"hljs-attr",children:"as"}),"=",e(n.span,{className:"hljs-string",children:"{ButtonGroup}"}),`\r + `,e(n.span,{className:"hljs-attr",children:"id"}),"=",e(n.span,{className:"hljs-string",children:"{"}),"`",e(n.span,{className:"hljs-attr",children:"dropdown-button-drop-"}),"${",e(n.span,{className:"hljs-attr",children:"idx"}),"}`}\r\n ",e(n.span,{className:"hljs-attr",children:"size"}),"=",e(n.span,{className:"hljs-string",children:'"sm"'}),`\r + `,e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"secondary"'}),`\r + `,e(n.span,{className:"hljs-attr",children:"title"}),"=",e(n.span,{className:"hljs-string",children:'"Drop small"'}),`\r + >`]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"1"'}),">"]}}),"Action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"2"'}),">"]}}),"Another action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"3"'}),">"]}}),"Something else here",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Divider"})," />"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"4"'}),">"]}}),"Separated link",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + ))}\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),` +`]}})}})}})]}}),null),r(l,e(a,{title:"Dark dropdowns",get children(){return[e(a.Intro,{get children(){return e(n.p,{get children(){return[`Opt into darker dropdowns to match a dark navbar or custom style by adding\r +`,e(n.code,{children:'variant="dark"'})," onto an existing ",e(n.code,{children:"DropdownMenu"}),`. Alternatively, use\r +`,e(n.code,{children:'menuVariant="dark"'})," when using the ",e(n.code,{children:"DropdownButton"})," component."]}})}}),e(a.Preview,{get children(){return[e(s,{get children(){return[e(s.Toggle,{id:"dropdown-button-dark-example1",variant:"secondary",children:"Dropdown Button"}),e(s.Menu,{variant:"dark",get children(){return[e(s.Item,{href:"#/action-1",active:!0,children:"Action"}),`\r +`,e(s.Item,{href:"#/action-2",children:"Another action"}),`\r +`,e(s.Item,{href:"#/action-3",children:"Something else"}),e(s.Divider,{}),e(s.Item,{href:"#/action-4",children:"Separated link"})]}})]}}),e(i,{id:"dropdown-button-dark-example2",variant:"secondary",menuVariant:"dark",title:"Dropdown button",class:"mt-2",get children(){return[e(s.Item,{href:"#/action-1",active:!0,children:"Action"}),`\r +`,e(s.Item,{href:"#/action-2",children:"Another action"}),`\r +`,e(s.Item,{href:"#/action-3",children:"Something else"}),e(s.Divider,{}),e(s.Item,{href:"#/action-4",children:"Separated link"})]}})]}}),e(a.Code,{get children(){return e(n.pre,{get children(){return e(n.code,{className:"hljs language-js",get children(){return[" <",e(n.span,{className:"hljs-title class_",children:"Dropdown"}),`>\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Toggle"})," ",e(n.span,{className:"hljs-attr",children:"id"}),"=",e(n.span,{className:"hljs-string",children:'"dropdown-button-dark-example1"'})," ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"secondary"'}),">"]}}),"Dropdown Button",e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Menu"})," ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"dark"'}),">"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-1"'})," ",e(n.span,{className:"hljs-attr",children:"active"}),">"]}}),"Action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-2"'}),">"]}}),"Another action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-3"'}),">"]}}),"Something else",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Divider"})," />"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-4"'}),">"]}}),"Separated link",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + \r +\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"DropdownButton"}),`\r + `,e(n.span,{className:"hljs-attr",children:"id"}),"=",e(n.span,{className:"hljs-string",children:'"dropdown-button-dark-example2"'}),`\r + `,e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"secondary"'}),`\r + `,e(n.span,{className:"hljs-attr",children:"menuVariant"}),"=",e(n.span,{className:"hljs-string",children:'"dark"'}),`\r + `,e(n.span,{className:"hljs-attr",children:"title"}),"=",e(n.span,{className:"hljs-string",children:'"Dropdown button"'}),`\r + `,e(n.span,{className:"hljs-attr",children:"class"}),"=",e(n.span,{className:"hljs-string",children:'"mt-2"'}),`\r + >`]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-1"'})," ",e(n.span,{className:"hljs-attr",children:"active"}),">"]}}),"Action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-2"'}),">"]}}),"Another action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-3"'}),">"]}}),"Something else",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Divider"})," />"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#/action-4"'}),">"]}}),"Separated link",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),` +`]}})}})}})]}}),null),r(l,e(a,{title:"NavDropdown",get children(){return[e(a.Intro,{get children(){return e(n.p,{get children(){return["Using ",e(n.code,{children:'menuVariant="dark"'})," in a NavDropdown"]}})}}),e(a.Preview,{get children(){return e(o,{variant:"dark",bg:"dark",expand:"lg",get children(){return e(b,{fluid:!0,get children(){return[e(o.Brand,{href:"#home",children:"Solid-Bootstrap"}),e(o.Toggle,{"aria-controls":"navbar-dark-example"}),e(o.Collapse,{id:"navbar-dark-example",get children(){return e(I,{get children(){return e(c,{id:"nav-dropdown-dark-example",title:"Dropdown",menuVariant:"dark",get children(){return[e(c.Item,{href:"#action/3.1",children:"Action"}),`\r +`,e(c.Item,{href:"#action/3.2",children:"Another action"}),`\r +`,e(c.Item,{href:"#action/3.3",children:"Something"}),e(c.Divider,{}),e(c.Item,{href:"#action/3.4",children:"Separated link"})]}})}})}})]}})}})}}),e(a.Code,{get children(){return e(n.pre,{get children(){return e(n.code,{className:"hljs language-js",get children(){return["<",e(n.span,{className:"hljs-title class_",children:"Navbar"})," variant=",e(n.span,{className:"hljs-string",children:'"dark"'})," bg=",e(n.span,{className:"hljs-string",children:'"dark"'})," expand=",e(n.span,{className:"hljs-string",children:'"lg"'}),`>\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Container"})," ",e(n.span,{className:"hljs-attr",children:"fluid"}),">"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Navbar.Brand"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#home"'}),">"]}}),"Solid-Bootstrap",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Navbar.Toggle"})," ",e(n.span,{className:"hljs-attr",children:"aria-controls"}),"=",e(n.span,{className:"hljs-string",children:'"navbar-dark-example"'})," />"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Navbar.Collapse"})," ",e(n.span,{className:"hljs-attr",children:"id"}),"=",e(n.span,{className:"hljs-string",children:'"navbar-dark-example"'}),">"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Nav"}),">"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"NavDropdown"}),`\r + `,e(n.span,{className:"hljs-attr",children:"id"}),"=",e(n.span,{className:"hljs-string",children:'"nav-dropdown-dark-example"'}),`\r + `,e(n.span,{className:"hljs-attr",children:"title"}),"=",e(n.span,{className:"hljs-string",children:'"Dropdown"'}),`\r + `,e(n.span,{className:"hljs-attr",children:"menuVariant"}),"=",e(n.span,{className:"hljs-string",children:'"dark"'}),`\r + >`]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"NavDropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#action/3.1"'}),">"]}}),"Action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"NavDropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#action/3.2"'}),">"]}}),"Another action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"NavDropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#action/3.3"'}),">"]}}),"Something",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"NavDropdown.Divider"})," />"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"NavDropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"href"}),"=",e(n.span,{className:"hljs-string",children:'"#action/3.4"'}),">"]}}),"Separated link",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + +`]}})}})}})]}}),null),r(l,e(a,{title:"Drop directions",get children(){return[e(a.Intro,{get children(){return e(n.p,{get children(){return["Trigger dropdown menus above, below, left, or to the right of their toggle elements, with the ",e(n.code,{children:"drop"})," prop."]}})}}),e(a.Preview,{get children(){return[e(p,{direction:"horizontal",gap:2,get children(){return["up","down","start","end"].map(t=>e(i,{as:m,id:`dropdown-button-drop-${t}`,drop:t,variant:"secondary",title:` Drop ${t} `,get children(){return[e(s.Item,{eventKey:"1",children:"Action"}),e(s.Item,{eventKey:"2",children:"Another action"}),e(s.Item,{eventKey:"3",children:"Something else here"}),e(s.Divider,{}),e(s.Item,{eventKey:"4",children:"Separated link"})]}}))}}),e(p,{direction:"horizontal",gap:2,class:"mt-2",get children(){return["up","down","start","end"].map(t=>e(u,{id:`dropdown-button-drop-${t}`,drop:t,variant:"secondary",title:`Drop ${t}`,get children(){return[e(s.Item,{eventKey:"1",children:"Action"}),e(s.Item,{eventKey:"2",children:"Another action"}),e(s.Item,{eventKey:"3",children:"Something else here"}),e(s.Divider,{}),e(s.Item,{eventKey:"4",children:"Separated link"})]}}))}})]}}),e(a.Code,{get children(){return e(n.pre,{get children(){return e(n.code,{className:"hljs language-js",get children(){return["<",e(n.span,{className:"hljs-title class_",children:"Stack"})," direction=",e(n.span,{className:"hljs-string",children:'"horizontal"'})," gap={",e(n.span,{className:"hljs-number",children:"2"}),`}>\r + {[`,e(n.span,{className:"hljs-string",children:"'up'"}),", ",e(n.span,{className:"hljs-string",children:"'down'"}),", ",e(n.span,{className:"hljs-string",children:"'start'"}),", ",e(n.span,{className:"hljs-string",children:"'end'"}),"].",e(n.span,{className:"hljs-title function_",children:"map"}),"(",e(n.span,{className:"hljs-function",get children(){return["(",e(n.span,{className:"hljs-params",children:"direction"}),") =>"]}}),` (\r + `,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"DropdownButton"}),`\r + `,e(n.span,{className:"hljs-attr",children:"as"}),"=",e(n.span,{className:"hljs-string",children:"{ButtonGroup}"}),`\r + `,e(n.span,{className:"hljs-attr",children:"id"}),"=",e(n.span,{className:"hljs-string",children:"{"}),"`",e(n.span,{className:"hljs-attr",children:"dropdown-button-drop-"}),"${",e(n.span,{className:"hljs-attr",children:"direction"}),"}`}\r\n ",e(n.span,{className:"hljs-attr",children:"drop"}),"=",e(n.span,{className:"hljs-string",children:"{direction}"}),`\r + `,e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"secondary"'}),`\r + `,e(n.span,{className:"hljs-attr",children:"title"}),"=",e(n.span,{className:"hljs-string",children:"{"}),"` ",e(n.span,{className:"hljs-attr",children:"Drop"})," ${",e(n.span,{className:"hljs-attr",children:"direction"}),"} `}\r\n >"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"1"'}),">"]}}),"Action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"2"'}),">"]}}),"Another action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"3"'}),">"]}}),"Something else here",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Divider"})," />"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"4"'}),">"]}}),"Separated link",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r + ))}\r +\r +\r +`,e(n.span,{className:"xml",get children(){return[e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Stack"})," ",e(n.span,{className:"hljs-attr",children:"direction"}),"=",e(n.span,{className:"hljs-string",children:'"horizontal"'})," ",e(n.span,{className:"hljs-attr",children:"gap"}),"=",e(n.span,{className:"hljs-string",children:"{2}"})," ",e(n.span,{className:"hljs-attr",children:"class"}),"=",e(n.span,{className:"hljs-string",children:'"mt-2"'}),">"]}}),`\r + {['up', 'down', 'start', 'end'].map((direction) => (\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"SplitButton"}),`\r + `,e(n.span,{className:"hljs-attr",children:"id"}),"=",e(n.span,{className:"hljs-string",children:"{"}),"`",e(n.span,{className:"hljs-attr",children:"dropdown-button-drop-"}),"${",e(n.span,{className:"hljs-attr",children:"direction"}),"}`}\r\n ",e(n.span,{className:"hljs-attr",children:"drop"}),"=",e(n.span,{className:"hljs-string",children:"{direction}"}),`\r + `,e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"secondary"'}),`\r + `,e(n.span,{className:"hljs-attr",children:"title"}),"=",e(n.span,{className:"hljs-string",children:"{"}),"`",e(n.span,{className:"hljs-attr",children:"Drop"})," ${",e(n.span,{className:"hljs-attr",children:"direction"}),"}`}\r\n >"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"1"'}),">"]}}),"Action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"2"'}),">"]}}),"Another action",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"3"'}),">"]}}),"Something else here",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Divider"})," />"]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return["<",e(n.span,{className:"hljs-name",children:"Dropdown.Item"})," ",e(n.span,{className:"hljs-attr",children:"eventKey"}),"=",e(n.span,{className:"hljs-string",children:'"4"'}),">"]}}),"Separated link",e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + `,e(n.span,{className:"hljs-tag",get children(){return[""]}}),`\r + ))}\r +`,e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),` +`]}})}})}})]}}),null),r(l,e(a,{title:"Dropdown items",get children(){return[e(a.Intro,{get children(){return[e(n.p,{get children(){return[`Historically dropdown menu contents had to be links, but that\u2019s no\r +longer the case with v4. Now you can optionally use\r +`,e(n.code,{children:"