1"use strict";(self.webpackChunknodality=self.webpackChunknodality||[]).push([[2826],{5292:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>i,default:()=>h,frontMatter:()=>s,metadata:()=>r,toc:()=>c});const r=JSON.parse('{"id":"elements/dropdown","title":"Dropdown","description":"Dropdown is used to create expand area upon click or hover.","source":"@site/docs/elements/dropdown.md","sourceDirName":"elements","slug":"/elements/dropdown","permalink":"/docs/elements/dropdown","draft":false,"unlisted":false,"editUrl":"https://github.com/nodalityjs/docs/edit/main/docs/elements/dropdown.md","tags":[],"version":"current","frontMatter":{},"sidebar":"tutorialSidebar","previous":{"title":"Code","permalink":"/docs/elements/code"},"next":{"title":"Free","permalink":"/docs/elements/free"}}');var d=t(4848),o=t(8453);const s={},i="Dropdown",l={},c=[{value:"Syntax",id:"syntax",level:2},{value:"Rendered Element",id:"rendered-element",level:2},{value:"<code>behaviour</code> Argument",id:"behaviour-argument",level:2}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,o.R)(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(n.header,{children:(0,d.jsx)(n.h1,{id:"dropdown",children:"Dropdown"})}),"\n",(0,d.jsxs)(n.p,{children:['Dropdown is used to create expand area upon click or hover.\nThe first value is used as a title for the dropdown - in this case text "Options". You can also use this element in ',(0,d.jsx)(n.a,{href:"navbar.md",children:"NavBar"}),"."]}),"\n",(0,d.jsx)(n.h2,{id:"syntax",children:"Syntax"}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-js",children:'let elements = [\n {\n type: "dropdown",\n text: "Options",\n items: ["Earth", "Sea", "Fire"]\n }\n];\n'})}),"\n",(0,d.jsx)(n.h2,{id:"rendered-element",children:"Rendered Element"}),"\n",(0,d.jsxs)(n.h2,{id:"behaviour-argument",children:[(0,d.jsx)(n.code,{children:"behaviour"})," Argument"]}),"\n",(0,d.jsxs)(n.p,{children:["The ",(0,d.jsx)(n.code,{children:"behaviour"})," property controls ",(0,d.jsx)(n.strong,{children:"how the dropdown menu is triggered"})," by the user."]}),"\n",(0,d.jsx)(n.p,{children:(0,d.jsx)(n.strong,{children:"Accepted values:"})}),"\n",(0,d.jsxs)(n.table,{children:[(0,d.jsx)(n.thead,{children:(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.th,{children:"Value"}),(0,d.jsx)(n.th,{children:"Description"})]})}),(0,d.jsxs)(n.tbody,{children:[(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"click"})}),(0,d.jsx)(n.td,{children:"Default. The dropdown opens when the user clicks on the dropdown element."})]}),(0,d.jsxs)(n.tr,{children:[(0,d.jsx)(n.td,{children:(0,d.jsx)(n.code,{children:"mouseover"})}),(0,d.jsx)(n.td,{children:"The dropdown opens when the user hovers the mouse over the dropdown element."})]})]})]}),"\n",(0,d.jsx)(n.pre,{children:(0,d.jsx)(n.code,{className:"language-js",children:'new Dropdown()\n .set({\n behaviour: "mouseover", // click otherwise\n padding: "10px",\n border: "1px solid black",\n })\n .add([\n new Text("Options"),\n new Text("Earth"),\n new Text("Sea"),\n new Text("Fire"),\n ]);\n\n'})})]})}function h(e={}){const{wrapper:n}={...(0,o.R)(),...e.components};return n?(0,d.jsx)(n,{...e,children:(0,d.jsx)(a,{...e})}):a(e)}},8453:(e,n,t)=>{t.d(n,{R:()=>s,x:()=>i});var r=t(6540);const d={},o=r.createContext(d);function s(e){const n=r.useContext(o);return r.useMemo(function(){return"function"==typeof e?e(n):{...n,...e}},[n,e])}function i(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(d):e.components||d:s(e.components),r.createElement(o.Provider,{value:n},e.children)}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.