viewof datika = render(({ useSetter }) => {
const { Button, Input, Radio, Space,Table, Tag , Typography,React,Layout,Header,Content,Footer} = Antd;
const [fenshu, setfenshu] = useState(0);
const [datibutton, setdatibutton] = useState(() => new Array(100).fill(false));
return jsx`
//第一组组件
<${Space} direction="horizontal" align="center" size='large'>
<${Button} type="primary">计算器</${Button}>
<${Button} type="primary">提交</${Button}>
</${Space}>
<br></br>
<${Space} direction="horizontal" align="center" size='large'>
//写下一行的组件的
</${Space}>
`;
});
viewof datika1 = render(({ useSetter }) => {
const { Button, Input, Radio, Space,Table, Tag , Typography,React,Layout,Header,Content,Footer} = Antd;
const [fenshu, setfenshu] = useState(0);
const [datibutton, setdatibutton] = useState(() => new Array(100).fill(false));
return jsx`
//第一组组件
<${Space} direction="horizontal" align="center" size='large'>
<${Button} type="primary">计算器</${Button}>
<${Button} type="primary">提交</${Button}>
</${Space}>
<br></br>
//第二组组件
<${Space} direction="horizontal" align="center" size='large'>
</${Space}>
`;
});
viewof datika2 = render(({ useSetter }) => {
const { Button, Input, Radio, Space,Table, Tag , Typography,React,Layout,Header,Content,Footer} = Antd;//后续是用这些组件来构建界面
const [fenshu, setfenshu] = useState(0);
const [datibutton, setdatibutton] = useState(() => new Array(100).fill(false));//datibutton是一个状态变量，初始值是长度为100且元素全为flase的数组，setdatibutton用于更新状态
return jsx`
<${Space} direction="horizontal"//居中对齐 align="center" size='large'>
<${Button} type="primary">计算器</${Button}>
<${Button} type="primary">提交</${Button}>
<${Button} type="primary">设置</${Button}>
</${Space}>
<br></br>
<${Space} direction="horizontal" align="center" size='small'>
<${Button} type="primary">A</${Button}>
<${Button} type="primary">B</${Button}>
<${Button} type="primary">C</${Button}>
</Space.Compact>
<Space.Compact direction="vertical">
<Button type="dashed">A</Button>
<Button type="dashed">B</Button>
<Button type="dashed">C</Button>
</${Space}>
<br></br>
<${Space} direction="horizontal" align="center" size='large'>
</${Space}>
`;
});
viewof datika3 = render(({ useSetter }) => {
const { Button, Input, Radio, Space,Table, Tag , Typography,React,Layout,Header,Content,Footer} = Antd;
const [fenshu, setfenshu] = useState(0);
const [datibutton, setdatibutton] = useState(() => new Array(100).fill(false));
return jsx`
<${Space} direction="horizontal" align="center" size='small'>
<${Button} type="primary">1</${Button}>
<${Button} type="primary">2</${Button}>
<${Button} type="primary">3</${Button}>
<${Button} type="primary">4</${Button}>
<${Button} type="primary">5</${Button}>
</${Space}>
<br></br>//用来换行的
<${Space} direction="horizontal" align="center" size='small'>
<${Button} type="primary">6</${Button}>
<${Button} type="primary">7</${Button}>
<${Button} type="primary">8</${Button}>
<${Button} type="primary">9</${Button}>
<${Button} type="primary">10</${Button}>
</${Space}>
`;
});
import { PoweroffOutlined } from "@ant-design/icons"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
