2d:null 2e:["$","title",null,{"children":"Dropdown | Office for Statistics and Data of the Canton of Zurich | Observable"}] 33:[] 31:{"id":"59aea47d94f25db2","slug":"leu-dropdown","title":"Dropdown","thumbnail":"1f4a6c0e8d107ec985ae770f399ad04b6fb9e93534fb64af6eac17d0d957b935","access_level":"public","create_time":"$D2024-07-08T13:36:46.817Z","update_time":"$D2024-07-24T11:44:49.868Z","view_time":null,"first_public_time":"$D2024-07-08T13:36:46.817Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro"},"version":166,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ff2ebb6da9a3f817","login":"daenub","name":"Dan Büschlen","avatar_url":"https://avatars-next.observableusercontent.com/7f91b32f10d4fd0e7474f1c131c42e52adafe12bbeafb2f07a0cfcdd3caccd98","tier":null}],"members":[{"type":"individual","id":"ff2ebb6da9a3f817","login":"daenub","name":"Dan Büschlen","avatar_url":"https://avatars-next.observableusercontent.com/7f91b32f10d4fd0e7474f1c131c42e52adafe12bbeafb2f07a0cfcdd3caccd98","tier":null,"role":"editor"},{"type":"team","id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich","avatar_url":"https://avatars-next.observableusercontent.com/61364635cd5db7a914727e7625ac41daa90fedeba239e3d2ce93b57a9ad3bce9","tier":"pro","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"b4b9279e515ea00f","slug":"leu-component-library","title":"Leu - Component Library","owner":{"id":"4b23743d6fe05d13","login":"statistikzh","name":"Office for Statistics and Data of the Canton of Zurich"}},"type":"notebook","body":{"title":"Dropdown","cells":[{"id":0,"value":"# Dropdown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":36,"value":"- [Storybook](https://statistikzh.github.io/leu/?path=/story/dropdown--regular)\n- [GitHub](https://github.com/statistikZH/leu/tree/main/src/components/dropdown)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"The following elements are needed to build a dropdown:\n- `leu-dropdown`\n- `leu-menu`\n- `leu-menu-item`\n- `leu-icon`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"## Load custom elements","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"leuElements = {\n import(`https://esm.sh/@statistikzh/leu@${version}/leu-dropdown.js`);\n import(`https://esm.sh/@statistikzh/leu@${version}/leu-menu.js`);\n import(`https://esm.sh/@statistikzh/leu@${version}/leu-menu-item.js`);\n import(`https://esm.sh/@statistikzh/leu@${version}/leu-icon.js`);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"## Usage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"The basic structure of a leu-dropdown element should like the following markup:\n```html\n\n \n \n Item 1\n Item 2\n Item 3\n \n\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"\n \n \n Item 1\n Item 2\n Item 3\n \n\n

\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"With these settings alone the dropdown is pretty much useless, as there is nothing happing when interacting with a `leu-menu-item`.\n\nA `leu-menu-item` can be defined as link just by setting the `href` attribute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"Zur OGD Ressource","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":70,"value":"```html\nZur OGD Ressource\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"The item can then be visually encoded as a link by adding an item after the label. This can be done by assigning a `leu-icon` to the `after` slot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":75,"value":"\n Zur OGD Ressource\n \n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"By adding a event listener to the native `click` event a custom action can be defined.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":82,"value":"menuItemClick = htl.html`\n \n mutable clickCount++}>Click count: ${clickCount}\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"mutable clickCount = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"And then we can bring everything together:","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"dropdown = {\n leuElements;\n return htl.html`\n \n \n Zur OGD Ressource\n \n mutable clickCount++}>Click count: ${clickCount}\n \n\n

\n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"---\n## Loading fonts and theme","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"theme = leuTheme","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"fonts = leuFonts","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import {\n fonts as leuFonts,\n theme as leuTheme,\n version\n} from \"@statistikzh/leu-general\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"