Material-ui React - Alıştırma Örnek Şablon

Discussion in 'Programming - Yazılım' started by Âlfonse, Jun 14, 2019.

  1. Âlfonse

    Âlfonse Developer

    Mesajlar:
    454
    Likes Received:
    444
    Kaynak kodu;
    HTML:
    <!DOCTYPE html>
    <html lang="tr">
      <head>
        <title>SpyHackerz - Material-Ui React</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no" />
        <script src="https://unpkg.com/react@latest/umd/react.development.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/react-dom@latest/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/babel-standalone@latest/babel.min.js" crossorigin="anonymous"></script>
        <!-- Fonts to support Material Design -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
        <!-- Icons to support Material Design -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
      </head>
      <body>
        <div id="root"></div>
        <script type="text/babel">
        
    const {
      Button,
      colors,
      Grid,
      CssBaseline,
      MuiThemeProvider,
      Typography,
      Container,
      makeStyles,
      createMuiTheme,
      Box,
      SvgIcon,
      Link,
      TextField,
      FormControl,
      FormHelperText,
      Input,
      InputBase,
      InputLabel,
      OutlinedInput,
     
    } = MaterialUI;
    
    // Create a theme instance.
    const theme = createMuiTheme({
      palette: {
      type: 'dark',
      button: {
          main: '#b00020',
      },
        primary: {
          main: '#fafafa',
        },
        secondary: {
          main: '#a4aeb2',
        },
        error: {
          main: colors.red.A400,
        },
        
      },
    });
    
    function LightBulbIcon(props) {
      return (
        <SvgIcon {...props}>
          <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
        </SvgIcon>
      );
    }
    
    const useStyles = makeStyles(theme => ({
        container: {
        display: 'flex',
        flexWrap: 'wrap',
      },
      textField: {
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1),
      },
      dense: {
        marginTop: theme.spacing(2),
      },
      menu: {
        width: 200,
      },
      root: {
        margin: theme.spacing(6, 0, 3),
      },
      lightBulb: {
        verticalAlign: 'middle',
        marginRight: theme.spacing(1),
      },
    }));
    
    function Desc() {
      const classes = useStyles();
      return (
        <Typography className={classes.root} color="textSecondary">
         Bu alıştırma amaçlı kodlanmıştır.
        </Typography>
      );
    }
    
    function Aciklama() {
      return (
        <Typography variant="body2" color="textSecondary">
          {'SpyHackerz '}
          <Link href="https://material-ui.com/">
            Material-UI
          </Link>
          {' alıştırma.'}
        </Typography>
      );
    }
    
    function App() {
        const classes = useStyles();
      return (
     
        <Container maxWidth="sm">
          <div style={{ marginTop: 24, }}>
            <Typography variant="h4" component="h1" gutterBottom>
              React Material
            </Typography>
            <Desc />
            <Aciklama />
            
        
            <form className={classes.container} noValidate autoComplete="off">
          
        <TextField
            id="outlined"
            className={classes.textField}
            label="Örnek Text"
            margin="normal"
            variant="outlined"
          />
          <TextField
            id="outlined-password-input"
            className={classes.textField}
            label="Password"
            type="password"
            autoComplete="current-password"
            margin="normal"
            variant="outlined"
          />
          <Button
           className={classes.textField}
           color="secondary"
           variant="outlined">
          Hello World
        </Button>
          </form>
          </div>
        </Container>
      );
    }
    
    ReactDOM.render(
      <MuiThemeProvider theme={theme}>
        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
        <CssBaseline />
        <App />
      </MuiThemeProvider>,
      document.querySelector('#root'),
    );
        </script>
        
      </body>
    </html>
    Önizle;
    Linkleri görebilmek için login-giriş yapman gerekiyor veya konuya like atman lazım
     
    HÜCR3, TurkBros and Axis like this.
Loading...

Bu sayfayı Paylaş