时间戳

首页 > 解决方案 > Material ui + reactjs app中的响应式按钮组按钮

javascript - Material ui + reactjs app中的响应式按钮组按钮

问题描述

如何实现响应式ButtonGroup Buttons？我发现一些信息表明material-ui的ButtonGroup可以使用一个名为“Orientation”的属性，但我不明白如何将它与媒体查询一起使用，这意味着当设备宽度较窄时实时更改其方向等。我我是新手，所以请耐心等待。

import './App.css';
import Button from '@material-ui/core/Button';
import ButtonGroup from '@material-ui/core/ButtonGroup';
import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { deepPurple, purple } from '@material-ui/core/colors';

const dvTheme = createMuiTheme({ palette: { primary: deepPurple } });
const bvTheme = createMuiTheme({ palette: { primary: purple } });

function App() {
    return (

    <div className="App">
          <MuiThemeProvider theme={bvTheme}>
              <div className="App-header">  
                  <h1 id="header-text">Web Programming</h1>
              </div>
          </MuiThemeProvider>
          <MuiThemeProvider theme={dvTheme}>
                <div className="header-buttons">
                    <ButtonGroup variant="contained" size="large" className="btngrp" color="primary">
              <Button>Overview</Button>
              <Button>Features</Button>
              <Button>Details</Button>
              <Button>Technology</Button>
              <Button>FAQ</Button>
                  </ButtonGroup> 
              </div>
            </MuiThemeProvider>
            <Container>       
                <div className="main">
                    <Grid container justify="center">
                       
                        <Grid item id="feature-vid">
                            <video width="300" height="240" controls>
                                </video>
                        </Grid>
                        <Grid item id="feature-paragraph">
                            <h1 id="feature-text">Features</h1>
                            <p>
                                Dolore ex deserunt aute fugiat aute nulla ea sunt aliqua nisi cupidatat eu. Nostrud in laboris labore nisi amet do dolor eu fugiat consectetur elit cillum esse.
                                </p>
                            <a href="#" id="feature-link">READ OUR FEATURES</a>
                        </Grid>   
                    </Grid>
                </div>
            </Container>

            <Container spacing={0}>
                <Grid container>
                <Grid item>
                    <h2>Details</h2>
                    </Grid>
                </Grid>
            </Container>

    </div>
  );
}
export default App;

标签： javascriptreactjsmaterial-ui

解决方案

首先，您需要指定 mediquery 的条件，如下所示：

  const matches = useMediaQuery("(min-width:600px)");

然后根据匹配的值更改方向：

  orientation={`${matches ? `horizontal` : `vertical`}`}

正如您在此沙盒链接中看到orientation的那样，ButtonGroup当宽度高于 600 像素时，它是水平的，而对于较低的宽度值，它是垂直的。

您还可以在此处阅读有关 Material UI 中的媒体查询的信息，以及有关ButtonGroup API 和道具的信息。

推荐阅读