30:[{"id":"d254f217c1f322092a2b08beaef357db4d7e8a4fd8c5a15692b4c5cc93025222e70d002ec3215bc99b5a80b68655d30f9854279967e1b3fd7c7d34a8f63887a4","href":"https://static.observableusercontent.com/files/d254f217c1f322092a2b08beaef357db4d7e8a4fd8c5a15692b4c5cc93025222e70d002ec3215bc99b5a80b68655d30f9854279967e1b3fd7c7d34a8f63887a4","name":"cover.png","type":"image/png","lastModified":1647174725512.379,"size":27037}] 2e:{"title":"Hello Ant Design","cells":[{"id":0,"value":"md`# Hello Ant Design`","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"FileAttachment(\"cover.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"md`Using Ant Design React components in observable notebooks using preact and htm`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"mutable step_number = 1","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"{\n const dom = html`

`;\n const shadow = dom.shadowRoot || dom.attachShadow({ mode: \"open\" });\n const update_step_number = (d) => (mutable step_number = d);\n const Steps = antd.Steps;\n const Step = Steps.Step;\n\n React.render(\n htm`

\n \n <${Steps} current=${step_number} onChange=${update_step_number}>\n <${Step} title=\"Finished\" description=\"This is a description.\" />\n <${Step} title=\"In Progress\" subTitle=\"Left 00:00:08\" description=\"This is a description.\" />\n <${Step} title=\"Waiting\" description=\"This is a description.\" />\n \n `,\n shadow\n );\n return dom;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":82,"value":"md`---\n## Setup`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"requires = require.alias({\n htm: \"https://cdnjs.cloudflare.com/ajax/libs/htm/3.0.4/htm.umd.js\",\n preact: \"https://cdnjs.cloudflare.com/ajax/libs/preact/10.6.6/preact.umd.js\",\n \"preact/hooks\":\n \"https://cdnjs.cloudflare.com/ajax/libs/preact/10.6.6/hooks.umd.js\",\n react: \"https://unpkg.com/preact@10.6.6/compat/dist/compat.umd.js\",\n \"react-dom\": \"https://unpkg.com/preact@10.6.6/compat/dist/compat.umd.js\",\n antd: \"https://cdnjs.cloudflare.com/ajax/libs/antd/4.19.1/antd.min.js\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"React = requires(\"react\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"htm = requires(\"htm\").then((d) => d.bind(React.createElement))","pinned":true,"hidden":false,"mode":"ojs"},{"id":24,"value":"antd = requires(\"antd\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}