前端项目实战叁佰捌拾肆react-admin和material ui-设置符合1920✖1020样式

   <Show resource='t_prod_style'>
            <Box sx={{ width: '200px' }} >
                <Card elevation={0}>
                    <CardContent>
                        <Divider textAlign="left">款式基本信息</Divider>
                        <Grid container spacing={1} >
                            <Grid item xs={12} sm={6} md={3} >
                                <Labeled source='编码'>
                                    <TextField source='code' />
                                </Labeled>
                            </Grid>
                            <Grid item xs={12} sm={6} md={3} >
                                <Labeled source='名称'>
                                    <TextField source='style_name' />
                                </Labeled>
                            </Grid>
                            <Grid item xs={12} sm={6} md={3} >
                                <Labeled source='品类编号'>
                                    <TextField source='category_id' />
                                </Labeled>
                            </Grid>
                        </Grid>
                    </CardContent>
                </Card>
                <Box sx={{ width: 'calc(100vw - 450px)', typography: 'body1' }}>
                    <Divider>
                        <Chip label='品类款式资源' />
                    </Divider>
                    <TabContext value={value}>
                        <Box sx={{ borderBottom: 1, borderColor: 'divider' }} >
                            <TabList onChange={handleChange} aria-label="lab API tabs example">
                                <Tab label="物料管理" value="1" />
                                <Tab label="工序管理" value="2" />
                                <Tab label="测试管理" value="3" />
                            </TabList>
                        </Box>
                        <TabPanel value="1"><MaterielTab line_id={id} /></TabPanel>
                        <TabPanel value="2"><StepTab line_id={id} /></TabPanel>
                        <TabPanel value="3"><EditableDatagrid /></TabPanel>
                    </TabContext>
                </Box>
            </Box>
        </Show>

运行结果

 

posted @ 2023-09-07 08:57  前端导师歌谣  阅读(6)  评论(0)    收藏  举报  来源