44:["$","title",null,{"children":"Ant Design (Version 4.16.13) | test | Observable"}] 4c:T787,viewof dropdown = render(({ useSetter }) => { const { Radio } = Antd; const plainOptions = ['Apple', 'Pear', 'Orange']; const options = [{ label: 'Apple', value: 'Apple' }, { label: 'Pear', value: 'Pear' }, { label: 'Orange', value: 'Orange' }]; const optionsWithDisabled = [{ label: 'Apple', value: 'Apple' }, { label: 'Pear', value: 'Pear' }, { label: 'Orange', value: 'Orange', disabled: true }]; const App = () => { const [value1, setValue1] = useState('Apple'); const [value2, setValue2] = useState('Apple'); const [value3, setValue3] = useState('Apple'); const [value4, setValue4] = useState('Apple'); const onChange1 = ({ target: { value } }) => { console.log('radio1 checked', value); setValue1(value); }; const onChange2 = ({ target: { value } }) => { console.log('radio2 checked', value); setValue2(value); }; const onChange3 = ({ target: { value } }) => { console.log('radio3 checked', value); setValue3(value); }; const onChange4 = ({ target: { value } }) => { console.log('radio4 checked', value); setValue4(value); }; return jsx`<${Fragment} key="531219f0-206d-4909-84c3-66a20829a93e"> <${Radio.Group} options=${plainOptions} onChange=${onChange1} value=${value1}>
<${Radio.Group} options=${optionsWithDisabled} onChange=${onChange2} value=${value2}>

<${Radio.Group} options=${options} onChange=${onChange3} value=${value3} optionType="button">

<${Radio.Group} options=${optionsWithDisabled} onChange=${onChange4} value=${value4} optionType="button" buttonStyle="solid"> `; }; return jsx`<${App}>`; })4d:T505,displaySite = function (text, url) { let key = uuidv4(); let Comp = component(({}) => { const { Space, Button, message } = Antd; const { CloseOutlined, MinusOutlined, ExpandOutlined } = AntdIcons; const [narrow, setNarrow] = useState(false); return jsx`<${Space} direction="vertical" size="small">

<${Button} type="primary" shape="circle" icon=${narrow ? jsx`<${ExpandOutlined}>` : jsx`<${MinusOutlined}>`} onClick=${() => { setNarrow(!narrow); }}> <${Button} type="primary" shape="circle" icon=${jsx`<${CloseOutlined}>`} onClick=${() => message.destroy(key)}>

open it in a single window: ${text}

${!url || !(url.startsWith("http://") || url.startsWith("https://")) ? jsx`

Invalid iFrame URL. Make sure your url starts with http:// or https:// .

` : jsx``} `; }); showToast(jsx` <${Comp}>`, "success", 0, { key }); }4e:[{"id":"d254f217c1f322092a2b08beaef357db4d7e8a4fd8c5a15692b4c5cc93025222e70d002ec3215bc99b5a80b68655d30f9854279967e1b3fd7c7d34a8f63887a4","href":"https://static.observableusercontent.com/files/d254f217c1f322092a2b08beaef357db4d7e8a4fd8c5a15692b4c5cc93025222e70d002ec3215bc99b5a80b68655d30f9854279967e1b3fd7c7d34a8f63887a4","name":"cover.png","type":"image/png","lastModified":1744265121856.577,"size":27037}] 48:{"id":"d06fa692e59b88f5","slug":"hello-ant-design","title":"Ant Design (Version 4.16.13)","thumbnail":"f24d52c099eef8d0a6252183e65d424b7c28303f15cb797c43f7a4aefa5d603a","access_level":"public","create_time":"$D2025-04-10T06:05:21.856Z","update_time":"$D2025-04-22T09:04:17.423Z","view_time":null,"first_public_time":"$D2025-04-10T06:05:21.856Z","has_unpublished_edits":null,"fork":{"id":"73f0a71d25cf19ab","slug":"hello-ant-design","title":"Hello Ant Design","owner":{"id":"ebdd8a722ae381e2","login":"a10k","name":"Alok Pepakayala"}},"stars":0,"starred":false,"owner":{"type":"team","id":"54e841aa7afe6d63","login":"test1234234987","name":"test","avatar_url":"https://avatars-next.observableusercontent.com/8c9208afe52473e0e1e5a815e885bccc66092106aad2f9a005ccd81474e3f539","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":186,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"d34e8a94da81e207","login":"1049511092","name":"1049511092","avatar_url":"https://avatars-next.observableusercontent.com/68657d9010519065f568bc292343d56e7c8a777a8f1bf10e3088e99c7f0ebafd","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"d34e8a94da81e207","login":"1049511092","name":"1049511092","avatar_url":"https://avatars-next.observableusercontent.com/68657d9010519065f568bc292343d56e7c8a777a8f1bf10e3088e99c7f0ebafd","tier":null,"role":"editor"},{"type":"team","id":"54e841aa7afe6d63","login":"test1234234987","name":"test","avatar_url":"https://avatars-next.observableusercontent.com/8c9208afe52473e0e1e5a815e885bccc66092106aad2f9a005ccd81474e3f539","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Ant Design (Version 4.16.13)","cells":[{"id":0,"value":"# Ant Design (Version ${Antd.version})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"FileAttachment(\"cover.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"md`Using Ant Design React components in observable notebooks using react`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"If want a more detail about using ant design in developing react app, please visit Ant Design site below. notice that, we support Ant Design Version is ${Antd.version} in observablehq now.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"render(({}) => {\n const {\n Space\n } = Antd;\n return jsx`<${DisplaySiteComp} key=\"e7ae2c5c-4ffa-4f6a-a802-28dd886a65d9\" text=\"Ant Design\" url=\"https://4x.ant.design/components/overview/\">`;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md`## Example`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"## ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"render(({}) => {\n return jsx`

\nspace space\n

`;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"viewof icon_1 = render(({\n useSetter\n}) => {\n const {\n HomeOutlined,\n LoadingOutlined,\n SettingFilled,\n SmileOutlined,\n SyncOutlined\n } = AntdIcons;\n const {\n Space\n } = Antd;\n const App = () => jsx`<${Space} key=\"dd18f54b-6e37-4080-80de-1e8150352bf9\">\n <${HomeOutlined}>\n <${SettingFilled}>\n <${SmileOutlined}>\n <${SyncOutlined} spin=${true}>\n <${SmileOutlined} rotate=${180}>\n <${LoadingOutlined}>\n`;\n return jsx`<${App}>`;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"import {jsx, render, useState, component, useEffect, useMemo, Fragment, useCallback, useRef, React, ReactDOM, Antd, AntdIcons } from \"@test1234234987/react\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"function showToast(content, type = \"success\", duration = 3, config = {}) {\n const { message } = Antd;\n message[type](\n _.assign({ content, duration, style: { zIndex: 1005 } }, config)\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":160,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":154,"value":"DisplaySiteComp = component(({\n text,\n url,\n key\n}) => {\n const {\n Button\n } = Antd;\n const [step_number, setStep_number] = useState(1);\n const update_step_number = d => {\n displaySite(text, url);\n };\n return jsx`\nOpen \n ${text}\n Site\n`;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"function SiteComp(text, url, key) {\n return render(({}) => {\n const {\n Space\n } = Antd;\n return jsx`<${DisplaySiteComp} key=\"{key}\" text=${text} url=${url}>`;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"uuid = import('https://cdn.skypack.dev/uuid@11.1.0?min')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"uuidv4 = uuid.v4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null