005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
97 lines
2.5 KiB
TypeScript
97 lines
2.5 KiB
TypeScript
import Box from '@mui/material/Box';
|
|
import { filledInputClasses } from '@mui/material/FilledInput';
|
|
import { inputBaseClasses } from '@mui/material/InputBase';
|
|
import TextField from '@mui/material/TextField';
|
|
import InputAdornment from '@mui/material/InputAdornment';
|
|
|
|
export default function InputSuffixShrink() {
|
|
return (
|
|
<Box
|
|
component="form"
|
|
sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
|
|
noValidate
|
|
autoComplete="off"
|
|
>
|
|
<TextField
|
|
id="outlined-suffix-shrink"
|
|
label="Outlined"
|
|
variant="outlined"
|
|
slotProps={{
|
|
input: {
|
|
endAdornment: (
|
|
<InputAdornment
|
|
position="end"
|
|
sx={{
|
|
opacity: 0,
|
|
pointerEvents: 'none',
|
|
[`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
|
|
opacity: 1,
|
|
},
|
|
}}
|
|
>
|
|
lbs
|
|
</InputAdornment>
|
|
),
|
|
},
|
|
}}
|
|
/>
|
|
<TextField
|
|
id="filled-suffix-shrink"
|
|
label="Filled"
|
|
variant="filled"
|
|
slotProps={{
|
|
input: {
|
|
endAdornment: (
|
|
<InputAdornment
|
|
position="end"
|
|
sx={{
|
|
alignSelf: 'flex-end',
|
|
opacity: 0,
|
|
pointerEvents: 'none',
|
|
[`.${filledInputClasses.root} &`]: {
|
|
marginBottom: '7.5px',
|
|
},
|
|
[`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
|
|
opacity: 1,
|
|
},
|
|
}}
|
|
>
|
|
days
|
|
</InputAdornment>
|
|
),
|
|
},
|
|
}}
|
|
/>
|
|
<TextField
|
|
id="standard-suffix-shrink"
|
|
label="Standard"
|
|
variant="standard"
|
|
slotProps={{
|
|
htmlInput: {
|
|
sx: { textAlign: 'right' },
|
|
},
|
|
input: {
|
|
endAdornment: (
|
|
<InputAdornment
|
|
position="end"
|
|
sx={{
|
|
alignSelf: 'flex-end',
|
|
margin: 0,
|
|
marginBottom: '5px',
|
|
opacity: 0,
|
|
pointerEvents: 'none',
|
|
[`[data-shrink=true] ~ .${inputBaseClasses.root} > &`]: {
|
|
opacity: 1,
|
|
},
|
|
}}
|
|
>
|
|
@gmail.com
|
|
</InputAdornment>
|
|
),
|
|
},
|
|
}}
|
|
/>
|
|
</Box>
|
|
);
|
|
}
|