diff --git a/.gitignore b/.gitignore index df7a634..9be07b4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules dist -**/*-debug.log \ No newline at end of file +**/*-debug.log +.solid \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index d3bb2d2..cd99b1e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,10 +1,55 @@ -## Unreleased +## 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: Portal position fixed](https://github.com/solid-libs/solid-bootstrap/commit/7428cd7f1cfebb30c6501c518af8ea46f7a5514a) - [Fix: React to children changes without constructing multiple times](https://github.com/solid-libs/solid-bootstrap/commit/e81432380d131859f28471f5447955a4b6c2d142) - Various code cleanup diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..8d10be0 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,43 @@ +## 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/docs/404.html b/docs/404.html deleted file mode 100644 index defffa0..0000000 --- a/docs/404.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - Solid-Bootstrap - - - - diff --git a/docs/assets/AccordionDocs.3e794021.js b/docs/assets/AccordionDocs.3e794021.js deleted file mode 100644 index d5b5489..0000000 --- a/docs/assets/AccordionDocs.3e794021.js +++ /dev/null @@ -1,111 +0,0 @@ -import{t as l,c as e,m as u,i as s,M as n}from"./vendor.5c522498.js";import{M as m}from"./index.69e29a3c.js";import{E as a}from"./Example.75d7cd18.js";import{G as p}from"./GithubSource.aa2bbcf4.js";const h=l(`

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.

`),g=()=>h.cloneNode(!0),v=l('

'),f=l('
');function A(o={}){const{wrapper:d}=Object.assign({},m(),o.components);return d?e(d,u(o,{get children(){return e(c,{})}})):c();function c(){const t=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span"},m(),o.components);return n||i("Accordion",!1),n.Body||i("Accordion.Body",!0),n.Header||i("Accordion.Header",!0),n.Item||i("Accordion.Item",!0),a||i("Example",!1),a.Code||i("Example.Code",!0),a.Intro||i("Example.Intro",!0),a.Preview||i("Example.Preview",!0),[e(p,{name:"AccordionDocs.mdx"}),` -`,e(t.h1,{children:"Accordion"}),` -`,(()=>{const r=v.cloneNode(!0);return s(r,e(t.p,{children:`Build vertically collapsing accordions in combination with the Collapse\r -component.`})),r})(),` -`,e(t.p,{children:"Click the accordions below to expand/collapse the accordion content."}),` -`,(()=>{const r=f.cloneNode(!0);return s(r,e(a,{title:"Basic Example",get children(){return[e(a.Preview,{get children(){return e(n,{defaultActiveKey:"0",get children(){return[e(n.Item,{eventKey:"0",get children(){return[e(n.Header,{children:"Accordion Item #1"}),e(n.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(n.Item,{eventKey:"1",get children(){return[e(n.Header,{children:"Accordion Item #2"}),e(n.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.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 hljs-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),s(r,e(a,{title:"Fully Collapsed State",get children(){return[e(a.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(a.Preview,{get children(){return e(n,{get children(){return[e(n.Item,{eventKey:"0",get children(){return[e(n.Header,{children:"Accordion Item #1"}),e(n.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(n.Item,{eventKey:"1",get children(){return[e(n.Header,{children:"Accordion Item #2"}),e(n.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.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 hljs-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),s(r,e(a,{title:"Flush",get children(){return[e(a.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(a.Preview,{get children(){return e(n,{defaultActiveKey:"0",flush:!0,get children(){return[e(n.Item,{eventKey:"0",get children(){return[e(n.Header,{children:"Accordion Item #1"}),e(n.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(n.Item,{eventKey:"1",get children(){return[e(n.Header,{children:"Accordion Item #2"}),e(n.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.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 hljs-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),s(r,e(a,{title:"Always open",get children(){return[e(a.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(a.Preview,{get children(){return e(n,{defaultActiveKey:["0"],alwaysOpen:!0,get children(){return[e(n.Item,{eventKey:"0",get children(){return[e(n.Header,{children:"Accordion Item #1"}),e(n.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(n.Item,{eventKey:"1",get children(){return[e(n.Header,{children:"Accordion Item #2"}),e(n.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.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 hljs-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),s(r,e(g,{}),null),r})()]}}function i(o,d){throw new Error("Expected "+(d?"component":"object")+" `"+o+"` to be defined: you likely forgot to import, pass, or provide it.")}export{A as default}; diff --git a/docs/assets/AlertDocs.128ccf93.js b/docs/assets/AlertDocs.128ccf93.js deleted file mode 100644 index beb5758..0000000 --- a/docs/assets/AlertDocs.128ccf93.js +++ /dev/null @@ -1,94 +0,0 @@ -import{t as i,j,c as e,A as a,i as r,B as m,p,m as v,O as g}from"./vendor.5c522498.js";import{M as u}from"./index.69e29a3c.js";import{E as t}from"./Example.75d7cd18.js";import{G as f}from"./GithubSource.aa2bbcf4.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(a,{get show(){return c()},variant:"success",get children(){return[e(a.Heading,{children:"How's it going?!"}),w.cloneNode(!0),A.cloneNode(!0),(()=>{const o=x.cloneNode(!0);return r(o,e(m,{onClick:()=>d(!1),variant:"outline-success",children:"Close me y'all!"})),o})()]}}),p((()=>{const o=p(()=>!c(),!0);return()=>o()&&e(m,{onClick:()=>d(!0),children:"Show Alert"})})())]}const C=i('

'),N=i("

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

'),_=i('
');function E(c={}){const{wrapper:d}=Object.assign({},u(),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"},u(),c.components);return a||h("Alert",!1),a.Heading||h("Alert.Heading",!0),a.Link||h("Alert.Link",!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 r(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=_.cloneNode(!0);return r(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(g,{each:["primary","secondary","success","danger","warning","info","light","dark"],children:n=>e(a,{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 hljs-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),r(l,e(a,{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),r(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(g,{each:["primary","secondary","success","danger","warning","info","light","dark"],children:n=>e(a,{variant:n,get children(){return["This is a ",n," alert with ",e(a.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 hljs-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),r(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(a,{variant:"success",get children(){return[e(a.Heading,{children:"Hey, nice to see you"}),(()=>{const n=N.cloneNode(!0);return r(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=S.cloneNode(!0);return r(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 hljs-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:"className"}),"=",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),r(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(a,{variant:"danger",dismissible:!0,get children(){return[e(a.Heading,{children:"Oh snap! You got an error!"}),(()=>{const n=N.cloneNode(!0);return r(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 hljs-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),r(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 hljs-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:"className"}),"=",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),r(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{E as default}; diff --git a/docs/assets/BadgeApi.a817b934.js b/docs/assets/BadgeApi.a817b934.js deleted file mode 100644 index 7ea28e1..0000000 --- a/docs/assets/BadgeApi.a817b934.js +++ /dev/null @@ -1 +0,0 @@ -import{t as d}from"./vendor.5c522498.js";const t=d(`

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.

`),o=()=>t.cloneNode(!0);export{o as B}; diff --git a/docs/assets/BadgeDocs.c81ca755.js b/docs/assets/BadgeDocs.c81ca755.js deleted file mode 100644 index bc33ae8..0000000 --- a/docs/assets/BadgeDocs.c81ca755.js +++ /dev/null @@ -1,48 +0,0 @@ -import{t,c as e,m as p,i as r,P as n,p as N,A as j,B as u}from"./vendor.5c522498.js";import{M as g}from"./index.69e29a3c.js";import{E as l}from"./Example.75d7cd18.js";import{G as o}from"./GithubSource.aa2bbcf4.js";import{B as b}from"./BadgeApi.a817b934.js";const B=t('

'),x=t("

Example heading

"),f=t("

Example heading

"),y=t("

Example heading

"),w=t("

Example heading

"),E=t("
Example heading
"),k=t("
Example heading
"),v=t('
');function I(h={}){const{wrapper:i}=Object.assign({},g(),h.components);return i?e(i,p(h,{get children(){return e(m,{})}})):m();function m(){const s=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span"},g(),h.components);return l||d("Example",!1),l.Code||d("Example.Code",!0),l.Intro||d("Example.Intro",!0),l.Preview||d("Example.Preview",!0),[e(o,{name:"BadgeDocs.mdx"}),` -`,e(s.h1,{children:"Badges"}),` -`,(()=>{const c=B.cloneNode(!0);return r(c,e(s.p,{children:`Badges scale to match the size of the immediate parent element by\r -using relative font sizing and em units.`})),c})(),` -`,(()=>{const c=v.cloneNode(!0);return r(c,e(l,{title:"Examples",get children(){return[e(l.Preview,{get children(){return[(()=>{const a=x.cloneNode(!0);return a.firstChild,r(a,e(n,{bg:"secondary",children:"New"}),null),a})(),`\r -`,(()=>{const a=f.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=w.cloneNode(!0);return a.firstChild,r(a,e(n,{bg:"secondary",children:"New"}),null),a})(),`\r -`,(()=>{const a=E.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 hljs-class",children:"Example"})," heading <",e(s.span,{className:"hljs-title hljs-class",children:"Badge"})," bg=",e(s.span,{className:"hljs-string",children:'"secondary"'}),">",e(s.span,{className:"hljs-title hljs-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(c,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[N(()=>e(u,{variant:"primary",get children(){return["Profile ",e(n,{bg:"secondary",children:"9"}),e(s.span,{className:"visually-hidden",children:"unread messages"})]}})),e(j,{variant:"warning",className:"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 hljs-class",children:"Button"})," variant=",e(s.span,{className:"hljs-string",children:'"primary"'}),">",e(s.span,{className:"hljs-title hljs-class",children:"Profile"}),` \r - <`,e(s.span,{className:"hljs-title hljs-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:"className"}),"=",e(s.span,{className:"hljs-string",children:'"visually-hidden"'}),">"]}}),"unread messages",e(s.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r - -`]}})}})}})]}}),null),r(c,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 hljs-class",children:"Badge"})," bg=",e(s.span,{className:"hljs-string",children:'"primary"'}),">",e(s.span,{className:"hljs-title hljs-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(c,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 hljs-class",children:"Badge"})," pill bg=",e(s.span,{className:"hljs-string",children:'"primary"'}),">",e(s.span,{className:"hljs-title hljs-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(c,e(b,{}),null),c})()]}}function d(h,i){throw new Error("Expected "+(i?"component":"object")+" `"+h+"` to be defined: you likely forgot to import, pass, or provide it.")}export{I as default}; diff --git a/docs/assets/BreadcrumbDocs.86cfa50c.js b/docs/assets/BreadcrumbDocs.86cfa50c.js deleted file mode 100644 index b3f115a..0000000 --- a/docs/assets/BreadcrumbDocs.86cfa50c.js +++ /dev/null @@ -1,12 +0,0 @@ -import{t as i,c as t,m as p,i as c,Q as s}from"./vendor.5c522498.js";import{M as m}from"./index.69e29a3c.js";import{E as a}from"./Example.75d7cd18.js";import{G as h}from"./GithubSource.aa2bbcf4.js";const u=i(`

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.

`),b=()=>u.cloneNode(!0),v=i('

'),f=i('
');function y(n={}){const{wrapper:o}=Object.assign({},m(),n.components);return o?t(o,p(n,{get children(){return t(l,{})}})):l();function l(){const e=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span"},m(),n.components);return s||r("Breadcrumb",!1),s.Item||r("Breadcrumb.Item",!0),a||r("Example",!1),a.Code||r("Example.Code",!0),a.Intro||r("Example.Intro",!0),a.Preview||r("Example.Preview",!0),[t(h,{name:"BreadcrumbDocs.mdx"}),` -`,t(e.h1,{children:"Breadcrumbs"}),` -`,(()=>{const d=v.cloneNode(!0);return c(d,t(e.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 .`})),d})(),` -`,(()=>{const d=f.cloneNode(!0);return c(d,t(a,{title:"Example",get children(){return[t(a.Intro,{}),t(a.Preview,{get children(){return t(s,{get children(){return[t(s.Item,{href:"#",children:"Home"}),t(s.Item,{href:"https://getbootstrap.com/docs/4.0/components/breadcrumb/",children:"Library"}),t(s.Item,{active:!0,children:"Data"})]}})}}),t(a.Code,{get children(){return t(e.pre,{get children(){return t(e.code,{className:"hljs language-js",get children(){return["<",t(e.span,{className:"hljs-title hljs-class",children:"Breadcrumb"}),`>\r - `,t(e.span,{className:"xml",get children(){return[t(e.span,{className:"hljs-tag",get children(){return["<",t(e.span,{className:"hljs-name",children:"Breadcrumb.Item"})," ",t(e.span,{className:"hljs-attr",children:"href"}),"=",t(e.span,{className:"hljs-string",children:'"#"'}),">"]}}),"Home",t(e.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r - `,t(e.span,{className:"xml",get children(){return[t(e.span,{className:"hljs-tag",get children(){return["<",t(e.span,{className:"hljs-name",children:"Breadcrumb.Item"})," ",t(e.span,{className:"hljs-attr",children:"href"}),"=",t(e.span,{className:"hljs-string",children:'"https://getbootstrap.com/docs/4.0/components/breadcrumb/"'}),">"]}}),"Library",t(e.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r - `,t(e.span,{className:"xml",get children(){return[t(e.span,{className:"hljs-tag",get children(){return["<",t(e.span,{className:"hljs-name",children:"Breadcrumb.Item"})," ",t(e.span,{className:"hljs-attr",children:"active"}),">"]}}),"Data",t(e.span,{className:"hljs-tag",get children(){return[""]}})]}}),`\r - -`]}})}})}})]}}),null),c(d,t(b,{}),null),d})()]}}function r(n,o){throw new Error("Expected "+(o?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}export{y as default}; diff --git a/docs/assets/ButtonDocs.c55b9c38.js b/docs/assets/ButtonDocs.c55b9c38.js deleted file mode 100644 index 49bb5e8..0000000 --- a/docs/assets/ButtonDocs.c55b9c38.js +++ /dev/null @@ -1,169 +0,0 @@ -import{t as g,j as z,k as _l,c as e,B as a,U as j,V as T,O as ze,m as Pe,i as s,p as xl,A as yl}from"./vendor.5c522498.js";import{M as b}from"./index.69e29a3c.js";import{E as l}from"./Example.75d7cd18.js";import{G as Sl}from"./GithubSource.aa2bbcf4.js";const L=g("
");function Cl(){const[i,c]=z(!1);function d(){return new Promise(t=>setTimeout(t,2e3))}_l(()=>{i()&&d().then(()=>{c(!1)})});const n=()=>c(!0);return e(a,{variant:"primary",get disabled(){return i()},get onClick(){return i()?void 0:n},get children(){return i()?"Loading\u2026":"Click to load"}})}function Bl(){const[i,c]=z(!1),[d,n]=z("1"),t=[{name:"Active",value:"1"},{name:"Radio",value:"2"},{name:"Radio",value:"3"}];return[e(T,{className:"mb-2",get children(){return e(j,{id:"toggle-check",type:"checkbox",variant:"secondary",get checked(){return i()},value:"1",onChange:r=>c(r.currentTarget.checked),children:"Checked"})}}),L.cloneNode(!0),e(j,{className:"mb-2",id:"toggle-check",type:"checkbox",variant:"outline-primary",get checked(){return i()},value:"1",onChange:r=>c(r.currentTarget.checked),children:"Checked"}),L.cloneNode(!0),e(T,{className:"mb-2",get children(){return e(ze,{each:t,children:(r,h)=>e(j,{get id(){return`radio-${h()}`},type:"radio",variant:"secondary",name:"radio",get value(){return r.value},get checked(){return d()===r.value},onChange:o=>n(o.currentTarget.value),get children(){return r.name}})})}}),L.cloneNode(!0),e(T,{get children(){return e(ze,{each:t,children:(r,h)=>e(j,{get id(){return`radio2-${h()}`},type:"radio",get variant(){return h()%2?"outline-success":"outline-danger"},name:"radio2",get value(){return r.value},get checked(){return d()===r.value},onChange:o=>n(o.currentTarget.value),get children(){return r.name}})})}})]}const kl=g(`
- - - - - - -
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
name
string

An HTML name for each child button.

Required if is set to

onChange
function
controls

Callback fired when a button is pressed, depending on whether the is or , will be called with the value or array of active values

size
|

Sets the size for all Buttons in the group.

type
|

The input of the rendered buttons, determines the toggle behavior of the buttons

value
any
controlled by: , initial prop:

The value, or array of values, of the active (pressed) buttons

vertical
boolean

Make the set of Buttons appear vertically stacked.

- - - - - - - -
NameTypeDefaultDescription
checked
boolean

The checked state of the input, managed by automatically

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 when nested in a .

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 wl(i={}){const{wrapper:c}=Object.assign({},b(),i.components);return c?e(c,Pe(i,{get children(){return e(d,{})}})):d();function d(){const n=Object.assign({h2:"h2",h3:"h3",p:"p",code:"code"},b(),i.components);return(()=>{const t=kl.cloneNode(!0),r=t.firstChild,h=r.firstChild,o=h.firstChild,De=o.nextSibling,P=De.firstChild,Ie=P.firstChild,Re=Ie.nextSibling,D=Re.nextSibling,Me=D.nextSibling,Ge=Me.firstChild,I=Ge.firstChild;I.firstChild;const Ee=P.nextSibling,Ae=Ee.nextSibling,qe=Ae.nextSibling,R=qe.nextSibling,Ve=R.firstChild,Fe=Ve.nextSibling,M=Fe.nextSibling,Oe=M.nextSibling,He=Oe.firstChild,G=He.firstChild,We=G.firstChild,E=We.nextSibling;E.nextSibling;const Xe=R.nextSibling,A=Xe.nextSibling,Ue=A.firstChild,Ye=Ue.nextSibling,Je=Ye.nextSibling,Ke=Je.nextSibling,Qe=Ke.firstChild,v=Qe.firstChild,Ze=v.firstChild,q=Ze.nextSibling,en=q.nextSibling,V=en.nextSibling;V.nextSibling;const nn=A.nextSibling,F=nn.nextSibling,sn=F.firstChild,ln=sn.nextSibling,an=ln.firstChild,f=an.firstChild,tn=f.firstChild,rn=F.nextSibling,O=rn.nextSibling,cn=O.firstChild,H=cn.nextSibling,dn=H.firstChild,p=dn.firstChild,W=p.firstChild,X=W.nextSibling,hn=X.nextSibling,on=H.nextSibling,pn=O.nextSibling,U=pn.nextSibling,mn=U.firstChild,gn=mn.nextSibling,Y=gn.nextSibling,un=Y.nextSibling,jn=un.firstChild,Nn=jn.firstChild,bn=Nn.nextSibling,J=bn.nextSibling,vn=J.nextSibling,fn=vn.nextSibling,$n=U.nextSibling,_n=$n.nextSibling,xn=_n.firstChild,yn=xn.nextSibling,Sn=yn.nextSibling,u=r.nextSibling,Cn=u.firstChild,Bn=Cn.firstChild,kn=Bn.nextSibling,K=kn.firstChild,wn=K.firstChild,Tn=wn.nextSibling,Ln=Tn.nextSibling,zn=Ln.nextSibling,Pn=zn.firstChild,$=Pn.firstChild,Dn=$.firstChild,Q=Dn.nextSibling;Q.nextSibling;const In=$.nextSibling,_=In.firstChild,Rn=_.firstChild,Z=Rn.nextSibling;Z.nextSibling;const Mn=K.nextSibling,ee=Mn.nextSibling,Gn=ee.firstChild,En=Gn.nextSibling,An=En.nextSibling,qn=An.nextSibling,ne=qn.firstChild,Vn=ne.firstChild,Fn=Vn.firstChild,se=Fn.firstChild;se.firstChild;const On=ne.nextSibling,m=On.firstChild,Hn=m.firstChild,le=Hn.nextSibling,Wn=le.nextSibling,ae=Wn.nextSibling,Xn=ae.nextSibling,te=Xn.nextSibling,Un=te.nextSibling,re=Un.nextSibling;re.nextSibling;const Yn=ee.nextSibling,ie=Yn.nextSibling,Jn=ie.firstChild,Kn=Jn.nextSibling,Qn=Kn.firstChild,x=Qn.firstChild,Zn=x.firstChild,es=ie.nextSibling,ce=es.nextSibling,ns=ce.firstChild,de=ns.nextSibling,ss=de.firstChild,y=ss.firstChild,ls=y.firstChild,he=de.nextSibling,as=he.nextSibling,ts=as.firstChild,oe=ts.firstChild,rs=oe.firstChild,pe=rs.nextSibling;pe.nextSibling;const is=ce.nextSibling,me=is.nextSibling,cs=me.firstChild,ds=cs.nextSibling,hs=ds.nextSibling,os=hs.nextSibling,ps=os.firstChild,ms=ps.firstChild,gs=ms.firstChild,S=gs.firstChild,us=S.firstChild,ge=us.nextSibling;ge.nextSibling;const js=me.nextSibling,Ns=js.nextSibling,bs=Ns.firstChild,vs=bs.nextSibling,fs=vs.nextSibling,C=u.nextSibling,$s=C.firstChild,_s=$s.firstChild,xs=_s.nextSibling,ue=xs.firstChild,ys=ue.firstChild,Ss=ys.nextSibling,Cs=Ss.nextSibling,Bs=Cs.nextSibling,ks=Bs.firstChild,je=ks.firstChild,ws=je.firstChild,Ne=ws.nextSibling;Ne.nextSibling;const Ts=ue.nextSibling,Ls=Ts.nextSibling,zs=Ls.nextSibling,be=zs.nextSibling,Ps=be.firstChild,Ds=Ps.nextSibling,Is=Ds.nextSibling,Rs=Is.nextSibling,Ms=Rs.firstChild,ve=Ms.firstChild,Gs=ve.firstChild,Es=be.nextSibling,fe=Es.nextSibling,As=fe.firstChild,qs=As.nextSibling,Vs=qs.nextSibling,Fs=Vs.nextSibling,Os=Fs.firstChild,$e=Os.firstChild,Hs=$e.firstChild,_e=Hs.nextSibling;_e.nextSibling;const Ws=fe.nextSibling,Xs=Ws.nextSibling,Us=Xs.nextSibling,xe=Us.nextSibling,Ys=xe.firstChild,Js=Ys.nextSibling,Ks=Js.nextSibling,Qs=Ks.nextSibling,Zs=Qs.firstChild,B=Zs.firstChild,el=B.firstChild,ye=el.nextSibling,nl=ye.nextSibling,Se=nl.nextSibling;Se.nextSibling;const sl=xe.nextSibling,Ce=sl.nextSibling,ll=Ce.firstChild,Be=ll.nextSibling,al=Be.firstChild,k=al.firstChild,tl=k.firstChild,rl=Be.nextSibling,il=rl.nextSibling,cl=il.firstChild,w=cl.firstChild,dl=w.firstChild,ke=dl.nextSibling;ke.nextSibling;const hl=Ce.nextSibling,we=hl.nextSibling,ol=we.firstChild,pl=ol.nextSibling,ml=pl.nextSibling,gl=ml.nextSibling,ul=gl.firstChild,Te=ul.firstChild,jl=Te.firstChild,Le=jl.nextSibling;Le.nextSibling;const Nl=we.nextSibling,bl=Nl.nextSibling,vl=bl.firstChild,fl=vl.nextSibling,$l=fl.nextSibling;return s(t,e(n.h2,{children:"API"}),r),s(t,e(n.h3,{children:"Button"}),r),s(t,e(n.p,{get children(){return e(n.code,{children:"import { Button } from 'solid-bootstrap'"})}}),r),s(D,e(n.code,{children:"false"})),s(I,e(n.code,{children:":active"}),null),s(M,e(n.code,{children:"false"})),s(G,e(n.code,{children:""}),E),s(v,e(n.code,{children:"href"}),q),s(v,e(n.code,{children:""}),V),s(f,e(n.code,{children:"'sm'"}),tn),s(f,e(n.code,{children:"'lg'"}),null),s(p,e(n.code,{children:"'button'"}),W),s(p,e(n.code,{children:"'reset'"}),X),s(p,e(n.code,{children:"'submit'"}),hn),s(p,e(n.code,{children:"null"}),null),s(on,e(n.code,{children:"'button'"})),s(Y,e(n.code,{children:"'primary'"})),s(J,e(n.code,{children:"'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'link'"})),s(fn,e(n.code,{children:"'outline-primary', 'outline-secondary', 'outline-success', 'outline-danger', 'outline-warning', 'outline-info', 'outline-dark', 'outline-light'"})),s(Sn,e(n.code,{children:"'btn'"})),s(t,e(n.h3,{children:"ToggleButtonGroup"}),u),s(t,e(n.p,{get children(){return e(n.code,{children:"import { ToggleButtonGroup } from 'solid-bootstrap'"})}}),u),s($,e(n.code,{children:""}),Q),s(_,e(n.code,{children:"type"}),Z),s(_,e(n.code,{children:"'radio'"}),null),s(se,e(n.code,{children:"value"}),null),s(m,e(n.code,{children:"type"}),le),s(m,e(n.code,{children:"'radio'"}),ae),s(m,e(n.code,{children:"'checkbox'"}),te),s(m,e(n.code,{children:"onChange"}),re),s(x,e(n.code,{children:"'sm'"}),Zn),s(x,e(n.code,{children:"'lg'"}),null),s(y,e(n.code,{children:"'checkbox'"}),ls),s(y,e(n.code,{children:"'radio'"}),null),s(he,e(n.code,{children:"'radio'"})),s(oe,e(n.code,{children:"type"}),pe),s(S,e(n.code,{children:"onChange"}),ge),s(S,e(n.code,{children:"defaultValue"}),null),s(fs,e(n.code,{children:"false"})),s(t,e(n.h3,{children:"ToggleButton"}),C),s(t,e(n.p,{get children(){return e(n.code,{children:"import { ToggleButton } from 'solid-bootstrap'"})}}),C),s(je,e(n.code,{children:""}),Ne),s(ve,e(n.code,{children:"id"}),Gs),s($e,e(n.code,{children:""}),_e),s(B,e(n.code,{children:""}),ye),s(B,e(n.code,{children:"onChange"}),Se),s(k,e(n.code,{children:"'checkbox'"}),tl),s(k,e(n.code,{children:"'radio'"}),null),s(w,e(n.code,{children:""}),ke),s(w,e(n.code,{children:"type"}),null),s(Te,e(n.code,{children:"ToggleButtonGroup"}),Le),s($l,e(n.code,{children:"'btn-check'"})),t})()}}const Tl=g('

'),Ll=g('
'),zl=g('
');function Ml(i={}){const{wrapper:c}=Object.assign({},b(),i.components);return c?e(c,Pe(i,{get children(){return e(d,{})}})):d();function d(){const n=Object.assign({h1:"h1",p:"p",pre:"pre",code:"code",span:"span",div:"div"},b(),i.components);return l||N("Example",!1),l.Code||N("Example.Code",!0),l.Intro||N("Example.Intro",!0),l.Preview||N("Example.Preview",!0),[e(Sl,{name:"ButtonDocs.mdx"}),` -`,e(n.h1,{children:"Buttons"}),` -`,(()=>{const t=Tl.cloneNode(!0);return s(t,e(n.p,{children:`Custom button styles for actions in forms, dialogs, and more with\r -support for multiple sizes, states, and more.`})),t})(),` -`,(()=>{const t=zl.cloneNode(!0);return s(t,e(l,{title:"Examples",get children(){return[e(l.Intro,{get children(){return e(n.p,{children:"Use any of the available button style types to quickly create a styled button. Just modify the variant prop."})}}),e(l.Preview,{get children(){return[e(a,{variant:"primary",children:"Primary"})," ",e(a,{variant:"secondary",children:"Secondary"})," ",e(a,{variant:"success",children:"Success"})," ",e(a,{variant:"warning",children:"Warning"})," ",e(a,{variant:"danger",children:"Danger"})," ",e(a,{variant:"info",children:"Info"})," ",e(a,{variant:"light",children:"Light"})," ",e(a,{variant:"dark",children:"Dark"})," ",e(a,{variant:"link",children:"Link"})]}}),e(l.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 hljs-class",children:"Button"})," variant=",e(n.span,{className:"hljs-string",children:'"primary"'}),">",e(n.span,{className:"hljs-title hljs-class",children:"Primary"}),"\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:'"secondary"'}),">"]}}),"Secondary",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:"Button"})," ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"success"'}),">"]}}),"Success",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:"Button"})," ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"warning"'}),">"]}}),"Warning",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:"Button"})," ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"danger"'}),">"]}}),"Danger",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:"Button"})," ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"info"'}),">"]}}),"Info",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:"Button"})," ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"light"'}),">"]}}),"Light",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:"Button"})," ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"dark"'}),">"]}}),"Dark",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:"Button"})," ",e(n.span,{className:"hljs-attr",children:"variant"}),"=",e(n.span,{className:"hljs-string",children:'"link"'}),">"]}}),"Link",e(n.span,{className:"hljs-tag",get children(){return[""]}})]}}),` -`]}})}})}})]}}),null),s(t,e(l,{title:"Outline buttons",get children(){return[e(l.Intro,{get children(){return e(n.p,{get children(){return["For a lighter touch, Buttons also come in ",e(n.code,{children:"outline-*"})," variants with no background color."]}})}}),e(l.Preview,{get children(){return[e(a,{variant:"outline-primary",children:"Primary"})," ",e(a,{variant:"outline-secondary",children:"Secondary"})," ",e(a,{variant:"outline-success",children:"Success"})," ",e(a,{variant:"outline-warning",children:"Warning"})," ",e(a,{variant:"outline-danger",children:"Danger"})," ",e(a,{variant:"outline-info",children:"Info"})," ",e(a,{variant:"outline-light",children:"Light"})," ",e(a,{variant:"outline-dark",children:"Dark"})]}}),e(l.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 hljs-class",children:"Button"})," variant=",e(n.span,{className:"hljs-string",children:'"outline-primary"'}),">",e(n.span,{className:"hljs-title hljs-class",children:"Primary"}),"{",e(n.span,{className:"hljs-string",children:'" "'}),`}\r -<`,e(n.span,{className:"hljs-title hljs-class",children:"Button"})," variant=",e(n.span,{className:"hljs-string",children:'"outline-secondary"'}),">",e(n.span,{className:"hljs-title hljs-class",children:"Secondary"}),"{",e(n.span,{className:"hljs-string",children:'" "'}),`}\r -<`,e(n.span,{className:"hljs-title hljs-class",children:"Button"})," variant=",e(n.span,{className:"hljs-string",children:'"outline-success"'}),">",e(n.span,{className:"hljs-title hljs-class",children:"Success"}),"{",e(n.span,{className:"hljs-string",children:'" "'}),`}\r -<`,e(n.span,{className:"hljs-title hljs-class",children:"Button"})," variant=",e(n.span,{className:"hljs-string",children:'"outline-warning"'}),">",e(n.span,{className:"hljs-title hljs-class",children:"Warning"}),"{",e(n.span,{className:"hljs-string",children:'" "'}),`}\r -<`,e(n.span,{className:"hljs-title hljs-class",children:"Button"})," variant=",e(n.span,{className:"hljs-string",children:'"outline-danger"'}),">",e(n.span,{className:"hljs-title hljs-class",children:"Danger"}),"{",e(n.span,{className:"hljs-string",children:'" "'}),`}\r -<`,e(n.span,{className:"hljs-title hljs-class",children:"Button"})," variant=",e(n.span,{className:"hljs-string",children:'"outline-info"'}),">",e(n.span,{className:"hljs-title hljs-class",children:"Info"}),"{",e(n.span,{className:"hljs-string",children:'" "'}),`}\r -<`,e(n.span,{className:"hljs-title hljs-class",children:"Button"})," variant=",e(n.span,{className:"hljs-string",children:'"outline-light"'}),">",e(n.span,{className:"hljs-title hljs-class",children:"Light"}),"{",e(n.span,{className:"hljs-string",children:'" "'}),`}\r -<`,e(n.span,{className:"hljs-title hljs-class",children:"Button"})," variant=",e(n.span,{className:"hljs-string",children:'"outline-dark"'}),">",e(n.span,{className:"hljs-title hljs-class",children:"Dark"})," -`]}})}})}})]}}),null),s(t,e(l,{title:"Button tags",get children(){return[e(l.Intro,{get children(){return e(n.p,{get children(){return["Normally ",e(n.code,{children:"
Click to get the full Modal experience!
'),C=h("

"),S=()=>{const[l,n]=N(!1);return(()=>{const r=M.cloneNode(!0);return c(r,s(o,{className:"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=v.cloneNode(!0);return g(e,a,!1,!1),e})(),className:"modal d-block pe-none",get children(){const a=$.cloneNode(!0),e=a.firstChild,i=e.firstChild,d=i.nextSibling,b=d.nextSibling;return c(b,s(o,{onClick:()=>n(!1),className:"btn btn-secondary float-right",children:"Close"})),a}}),null),r})()};let j=(l,n)=>l+Math.floor(Math.random()*(n-l));const E=()=>(()=>{const l=x.cloneNode(!0),n=l.firstChild,r=n.firstChild,a=r.nextSibling;return a.firstChild,c(a,s(f,{}),null),y(e=>{const i=`${j(5,20)}%`,d=`${j(20,60)}%`;return i!==e._v$&&l.style.setProperty("margin-top",e._v$=i),d!==e._v$2&&l.style.setProperty("margin-left",e._v$2=d),e},{_v$:void 0,_v$2:void 0}),l})(),f=()=>{const[l,n]=N(!1);return[(()=>{const r=_.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=v.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=h('

'),B=h('
');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),i=e.firstChild;return c(i,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(i,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 hljs-class",children:"Button"}),", ",s(a.span,{className:"hljs-title hljs-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 hljs-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 hljs-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:"className"}),"=",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 - className="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)} className="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(f,{})}}),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 hljs-class",children:"Button"}),", ",s(a.span,{className:"hljs-title hljs-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 hljs-function",children:"rand"})," = (",s(a.span,{className:"hljs-params",children:"min: number, max: number"}),") => min + ",s(a.span,{className:"hljs-title hljs-class",children:"Math"}),".",s(a.span,{className:"hljs-title hljs-function",children:"floor"}),"(",s(a.span,{className:"hljs-title hljs-class",children:"Math"}),".",s(a.span,{className:"hljs-title hljs-function",children:"random"}),`() * (max - min));\r -\r -`,s(a.span,{className:"hljs-keyword",children:"const"})," ",s(a.span,{className:"hljs-title hljs-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 hljs-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 hljs-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/docs/assets/CoreNavDocs.76bf6ee9.js b/docs/assets/CoreNavDocs.76bf6ee9.js deleted file mode 100644 index c3ebbcc..0000000 --- a/docs/assets/CoreNavDocs.76bf6ee9.js +++ /dev/null @@ -1,16 +0,0 @@ -import{t as m,c as e,m as p,i as h,ao as o,ap as t}from"./vendor.5c522498.js";import{M as d}from"./index.69e29a3c.js";import{E as a}from"./Example.75d7cd18.js";const N=m('

'),g=m('
');function f(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 hljs-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{f as default}; diff --git a/docs/assets/CoreOverlayDocs.0a64b422.js b/docs/assets/CoreOverlayDocs.0a64b422.js deleted file mode 100644 index ced1a5d..0000000 --- a/docs/assets/CoreOverlayDocs.0a64b422.js +++ /dev/null @@ -1 +0,0 @@ -import{t as h,j as t,i as d,c as p,s as f,aq as k,am as O}from"./vendor.5c522498.js";import{G as S}from"./GithubSource.aa2bbcf4.js";const T=h('

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.

'),E=h('
I am a overlay!
'),v=["top","right","bottom","left"],j=()=>{const[u,m]=t(),[g,y]=t(null),[a,i]=t(!1),[e,n]=t();function $(){a()?e()==="left"?i(!1):n(v[v.indexOf(e())+1]):(n("top"),i(!0))}return(()=>{const o=T.cloneNode(!0),l=o.firstChild,b=l.firstChild,r=l.nextSibling,c=r.firstChild,w=r.nextSibling;return y(o),d(l,p(S,{name:"CoreOverlayDocs"}),b),c.$$click=$,m(c),d(w,p(k,{get show(){return a()},offset:[0,5],container:g,target:u,get placement(){return e()},flip:!0,children:(C,_)=>(()=>{const s=E.cloneNode(!0),x=s.firstChild;return f(s,C,!1,!0),f(x,_,!1,!1),s})()})),o})()};O(["click"]);export{j as CoreOverlayDocs,j as default}; diff --git a/docs/assets/CoreOverview.11c16e93.js b/docs/assets/CoreOverview.11c16e93.js deleted file mode 100644 index 61d131c..0000000 --- a/docs/assets/CoreOverview.11c16e93.js +++ /dev/null @@ -1,19 +0,0 @@ -import{M as i}from"./index.69e29a3c.js";import{c as e,m as s}from"./vendor.5c522498.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/docs/assets/DropdownDocs.03fae562.js b/docs/assets/DropdownDocs.03fae562.js deleted file mode 100644 index fb5ceb6..0000000 --- a/docs/assets/DropdownDocs.03fae562.js +++ /dev/null @@ -1,316 +0,0 @@ -import{t as h,c as e,m as D,i as r,G as s,E as c,S as p,V as m,B as b,H as u,N as o,C as I,b as y,a1 as i,A}from"./vendor.5c522498.js";import{M as w}from"./index.69e29a3c.js";import{E as a}from"./Example.75d7cd18.js";import{G as S}from"./GithubSource.aa2bbcf4.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('
'),P=h('
');function W(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),i||d("NavDropdown",!1),i.Divider||d("NavDropdown.Divider",!0),i.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(S,{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=P.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(c,{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 hljs-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(c,{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 hljs-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 hljs-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(b,{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 hljs-class",children:"Dropdown"})," ",e(n.span,{className:"hljs-keyword",children:"as"}),"={",e(n.span,{className:"hljs-title hljs-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[c,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,className:"mt-2",get children(){return[c,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 hljs-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 hljs-class",children:"DropdownButton"}),", ",e(n.span,{className:"hljs-title hljs-class",children:"SplitButton"}),"].",e(n.span,{className:"hljs-title hljs-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:"className"}),"=",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(c,{id:"dropdown-button-dark-example2",variant:"secondary",menuVariant:"dark",title:"Dropdown button",className:"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 hljs-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:"className"}),"=",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(I,{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(y,{get children(){return e(i,{id:"nav-dropdown-dark-example",title:"Dropdown",menuVariant:"dark",get children(){return[e(i.Item,{href:"#action/3.1",children:"Action"}),`\r -`,e(i.Item,{href:"#action/3.2",children:"Another action"}),`\r -`,e(i.Item,{href:"#action/3.3",children:"Something"}),e(i.Divider,{}),e(i.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 hljs-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(c,{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,className:"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 hljs-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 hljs-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:"className"}),"=",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:"