Сделайте компонент React Material-UI так, чтобы он придерживался правой нижней части экрана. - PullRequest
Новая
       13

Сделайте компонент React Material-UI так, чтобы он придерживался правой нижней части экрана.

0 голосов
/ 28 января 2019

Я делаю приложение CRUD и хочу отобразить 'Создать' элемент управления в виде кнопки Fab, которая прилипает к правой нижней части экрана и остается там, несмотря напрокрутка экрана.

Я мог бы, наконец, заставить кнопку оставаться неподвижной при прокрутке экрана, но я не могу найти, как установить ее положение в правом нижнем углу экрана.

Это код моего компонента: 

import React, { Component } from 'react';
import Cookies from 'js-cookie';
import axios from 'axios';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';
import Icon from '@material-ui/core/Icon';
import Album from './Album.js'

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
  table: {
    minWidth: 700,
  },
  fab: {
    margin: theme.spacing.unit,
  },
  extendedIcon: {
    marginRight: theme.spacing.unit,
  },
});

class AddAlbumFloatingButton extends Component {
  constructor(props) {
    super(props);

    const {classes} = props;
  }

  render() {
    return(
      <div>
        <Fab color="primary" aria-label="Add" className={this.props.classes.fab} style={{position: 'fixed'}}>
          <AddIcon />
        </Fab>
      </div>
    )
  }
}

AddAlbumFloatingButton.propTypes = {
  classes: PropTypes.object.isRequired,
}

class Albums extends Component {
  constructor(props) {
    ...
  }

  getData() {
      ...
  }

  callDetail(instance) {
    ...
  }

  callList() {
    ...
  }

  render() {
    if(this.state.mode === 'table'){
      return (
        <div>
          <AddAlbumFloatingButton classes={this.state.classes}/>
          <AlbumsTable classes={this.state.classes} albums={this.albums} onCallDetail={this.callDetail}/>
        </div>
      );
    } else {
      return (<AlbumDetail instance={this.state.instance} onCallList={this.callList} />);
    }

  }
}

Albums.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Albums);

1 Ответ

0 голосов
/ 28 января 2019

Добавьте необходимый стиль вашему классу fab: 

const styles = theme => ({
  ...
  fab: {
    margin: theme.spacing.unit, // You might not need this now
    position: "fixed",
    bottom: theme.spacing.unit * 2,
    right: theme.spacing.unit * 3
  },
  ...
});

И удалите style prop из вашего <Fab> компонента, как это уже упоминалось в классе.Как и в случае с обычным HTML и CSS, лучше сохранять все стили в классах, чтобы их можно было многократно использовать, и чтобы было лучше разделение задач .

Применяемый выше стиль опять-таки является лишь некоторым CSS:фиксирует элемент внизу, с интервалом внизу и справа в соответствии с настройками темы.

...