Staram się utworzyć formularz inline za pomocą Material-UI i React, który przypomina następujący

enter image description here

Bootstrap HTML Snippet.

Stworzyłem powyższe przy użyciu fragmentu HTML poniżej. Możesz wypróbować to w W3schools.

<div class="container">
  <h2>Inline form</h2>
  <p>Make the viewport larger than 768px wide to see that all of the form elements are inline, left aligned, and the labels are alongside.</p>
  <form class="form-inline" action="/action_page.php">
    <div class="form-group">
      <label for="sel1">Select search field:</label>
      <select class="form-control" id="sel1">
        <option>FirstName</option>
        <option>LastName</option>
        <option>PostCode</option>
        <option>Gender</option>
      </select>    
    </div>
    <div class="form-group">
      <input type="email" class="form-control" id="email" placeholder="Enter search pattern" name="email">
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </form>
</div>

Moja próba przy użyciu materiału-ui

enter image description here

                <label htmlFor="selectsearchfield">Select search fields</label>
                <span>&nbsp;&nbsp;</span>
                <NativeSelect id="selectsearchfield" value={{}}>
                    <option value="FirstName">FirstName</option>
                    <option value="LastName">LastName</option>
                </NativeSelect>

                <span>&nbsp;&nbsp;</span>
                <TextField
                        label=""  id="outlined-size-small" defaultValue="" variant="outlined" size="small" disableUnderline />
                <span>&nbsp;&nbsp;</span>
                <Button size="medium" variant="contained" color="primary">Search</Button>


Pytanie

Można wyraźnie widać, że wyjście z Bootstrap jest znacznie bardziej profesjonalne. Proszę, wszelkie sugestie dotyczące doskonalenia formularza inline za pomocą materiału UI wygląda n poczuć tak, że przychodzi blisko Bootstrap.

Dziękuję Ci,

Sau

0
Sau001 21 listopad 2020, 03:03

1 odpowiedź

Najlepsza odpowiedź

Możesz użyć material-ui makeStyles i sprawić, że Responsive również: -

import React, { useState } from "react";
import "./style.css";
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";
import {
  Button,
  FormControl,
  OutlinedInput,
  TextField,
  Typography,
  Select,
  MenuItem
} from "@material-ui/core";

export default function App() {
  const classes = useStyles();

  const fields = ["FirstName", "LastName", "PostCode", "Gender"];
  const [searcBy, setSearchBy] = useState("FirstName");
  const [searchText, setSearchText] = useState("");

  return (
    <div className={classes.root}>
      <form className={classes.form}>
        <FormControl className={classNames(classes.formControl, classes.text)}>
          <Typography variant="body1" className={classes.type}>
            Select search fields:
          </Typography>
        </FormControl>
        <FormControl
          className={classNames(classes.formControl, classes.select)}
        >
          <Select
            labelId="typesLabel"
            label="Types"
            input={<OutlinedInput classes={{ input: classes.input }} />}
            value={searcBy}
            onChange={e => setSearchBy(e.target.value)}
          >
            {fields.map(field => (
              <MenuItem key={field} value={field}>
                {field}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
        <FormControl
          className={classNames(classes.formControl, classes.search)}
        >
          <TextField
            label="Enter search pattern"
            variant="outlined"
            size="small"
            value={searchText}
            onChange={e => setSearchText(e.target.value)}
          />
        </FormControl>
        <Button
          type="submit"
          variant="contained"
          color="primary"
          className={classes.submitBtn}
        >
          Primary
        </Button>
      </form>
    </div>
  );
}

const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  },
  form: {
    width: 800,
    display: "flex",
    flexWrap: "wrap",
    justifyContent: "center",
    alignItems: "center"
  },
  container: {
    display: "flex",
    justifyContent: "center",
    alignItems: "center"
  },
  text: {
    minWidth: 120
  },
  type: {
    fontWeight: 600
  },
  formControl: {
    marginRight: theme.spacing(1),
    [theme.breakpoints.down("xs")]: {
      minWidth: "100%",
      marginRight: theme.spacing(0),
      marginBottom: theme.spacing(1)
    }
  },
  input: {
    padding: "10px 14px"
  },
  select: {
    maxWidth: 130
  },
  search: {
    maxWidth: 180
  },
  submitBtn: {
    [theme.breakpoints.down("xs")]: {
      width: "100%"
    }
  }
}));

Możesz też włączyć użycie Grid z @material-ui/core.Grid zamiast używać podobnego przykładu "flex".

Oto wynik: -

enter image description here

  • trochę wyjaśnienia tego, co się stało powyżej: -
    • mający input={<OutlinedInput classes={{ input: classes.input }} />} jako select element props umożliwi nam tworzenie własnych outline zamiast w zależności od podanego przykładowego kodu z Material-ui Wybierz Kod dokumentacji.
    • powód, dla którego to robimy, ponieważ chcesz, aby dokładnie to zrobił z Bootstraps przykład powyżej. Musimy w jakiś sposób zrobić select element tadowy o wysokości. Z elementem TextField, możesz po prostu określić size="small". Ale dla select ta opcja nie jest dostępna. Dlatego mamy to podejście. Możesz też bezpośrednio zmienić select elementu wejściowe Całkowite style z {{x10}} {{x11}}.

Możesz również odnosić się do tego Kod Sandbox, aby zobaczyć rzeczywiste Wynik roboczy.

1
lala 21 listopad 2020, 11:59