Dollerok/P8-Panels
1
0
Fork 0
forked from CITKParus/P8-Panels
Code Issues Pull Requests Projects Releases Wiki Activity

WEB APP: Стили в примерах для разработчика (MUI)

Browse Source
This commit is contained in:
Mikhail Chechnev 2023-12-21 20:34:20 +03:00
parent 24585ba6b2
commit 60af1cf05f
2 changed files with 56 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
app/panels/samples/mui.js
View File

@ -22,7 +22,10 @@ import { ApplicationСtx } from "../../context/application"; //Контекст
const STYLES = { const STYLES = {
CONTAINER: { textAlign: "center", paddingTop: "20px" }, CONTAINER: { textAlign: "center", paddingTop: "20px" },
TITLE: { paddingBottom: "15px" }, TITLE: { paddingBottom: "15px" },
LIST: { width: "100%", maxWidth: "600px", bgcolor: "background.paper" } GRID_CONTAINER: { maxWidth: "500px" },
GRID_TEM: { width: "100%" },
LIST_CONTAINER: { marginTop: "10pt", maxHeight: "60vh", overflow: "auto", width: "100%" },
LIST: { width: "100%", bgcolor: "background.paper" }
}; };
//----------- //-----------
@ -109,48 +112,54 @@ const Mui = ({ title }) => {
<Typography sx={STYLES.TITLE} variant={"h6"}> <Typography sx={STYLES.TITLE} variant={"h6"}>
{title} {title}
</Typography> </Typography>
<Grid container spacing={0} direction="column" alignItems="center"> <Box display="flex" justifyContent="center" alignItems="center">
<Grid item xs={12}> <Grid container spacing={0} direction="column" alignItems="center" justifyContent="center" sx={STYLES.GRID_CONTAINER}>
<TextField <Grid item xs={12} sx={STYLES.GRID_TEM}>
name="agnAbbr" <TextField
label="Мнемокод" name="agnAbbr"
value={agentForm.agnAbbr} label="Мнемокод"
variant="standard" value={agentForm.agnAbbr}
fullWidth variant="standard"
onChange={handleAgentFormChanged} fullWidth
/> onChange={handleAgentFormChanged}
<TextField />
name="agnName" <TextField
label="Наименование" name="agnName"
value={agentForm.agnName} label="Наименование"
variant="standard" value={agentForm.agnName}
fullWidth variant="standard"
onChange={handleAgentFormChanged} fullWidth
/> onChange={handleAgentFormChanged}
<Box pt="10px"> />
<Button onClick={handleAgentInsert} variant="contained" fullWidth> <Box pt="10px">
Добавить контрагента <Button onClick={handleAgentInsert} variant="contained" fullWidth>
</Button> Добавить контрагента
</Box> </Button>
<List sx={STYLES.LIST}> </Box>
{agents.map(a => ( </Grid>
<ListItem <Grid item xs={12} sx={STYLES.GRID_TEM}>
key={a.NRN} <Box sx={STYLES.LIST_CONTAINER}>
secondaryAction={ <List sx={STYLES.LIST}>
<IconButton edge="end" title="Удалить контрагента" onClick={() => handleAgnetDeleteClick(a.NRN)}> {agents.map(a => (
<Icon>delete</Icon> <ListItem
</IconButton> key={a.NRN}
} secondaryAction={
disablePadding <IconButton edge="end" title="Удалить контрагента" onClick={() => handleAgnetDeleteClick(a.NRN)}>
> <Icon>delete</Icon>
<ListItemButton onClick={() => handleAgnetClick(a.NRN)}> </IconButton>
<ListItemText primary={a.SAGNABBR} secondary={a.SAGNNAME} /> }
</ListItemButton> disablePadding
</ListItem> >
))} <ListItemButton onClick={() => handleAgnetClick(a.NRN)}>
</List> <ListItemText primary={a.SAGNABBR} secondary={a.SAGNNAME} />
</ListItemButton>
</ListItem>
))}
</List>
</Box>
</Grid>
</Grid> </Grid>
</Grid> </Box>
</div> </div>
); );
}; };

9
app/panels/samples/samples.js
View File

@ -35,6 +35,7 @@ const MODES = {
//Стили //Стили
const STYLES = { const STYLES = {
ROOT: { height: "calc(100vh - 64px)" },
CONTAINER: { textAlign: "center", paddingTop: "20px" }, CONTAINER: { textAlign: "center", paddingTop: "20px" },
BACK_BUTTON: { position: "absolute", left: "20px", marginTop: "20px" } BACK_BUTTON: { position: "absolute", left: "20px", marginTop: "20px" }
}; };
@ -46,19 +47,19 @@ const STYLES = {
//Примеры //Примеры
const Samples = () => { const Samples = () => {
//Собственное состояние //Собственное состояние
const [mode, setMode] = useState(""); const [mode, setMode] = useState("MUI");
//Генерация содержимого //Генерация содержимого
return ( return (
<div> <div style={STYLES.ROOT}>
{mode ? ( {mode ? (
<div> <>
<Fab variant="extended" sx={STYLES.BACK_BUTTON} onClick={() => setMode("")}> <Fab variant="extended" sx={STYLES.BACK_BUTTON} onClick={() => setMode("")}>
<Icon>arrow_back_ios</Icon> <Icon>arrow_back_ios</Icon>
{BUTTONS.NAVIGATE_BACK} {BUTTONS.NAVIGATE_BACK}
</Fab> </Fab>
{React.createElement(MODES[mode]?.component || (() => {}), { title: MODES[mode]?.caption })} {React.createElement(MODES[mode]?.component || (() => {}), { title: MODES[mode]?.caption })}
</div> </>
) : ( ) : (
<div style={STYLES.CONTAINER}> <div style={STYLES.CONTAINER}>
{Object.entries(MODES).map(m => ( {Object.entries(MODES).map(m => (