Сделать React Material-UI Fab Button, чтобы придерживаться позиции на экране - PullRequest
Новая
       9

Сделать React Material-UI Fab Button, чтобы придерживаться позиции на экране

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

Я делаю приложение CRUD с React , используя UI материала , и я хочу, чтобы основным экраном была таблица с текущими записями, и кнопка 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="classes.fab">
          <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 />
          <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);

С этим кодом кнопка Fab прокручивается вверхи вниз вместе с остальной частью экрана.Я пытался установить position: 'fixed' на styles.fab, но это не сработало.

1 Ответ

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

Вместо этого вы должны указать фиксированную позицию для тега компонента AddAlbumFloatingButton: 

<AddAlbumFloatingButton  style={{position:fixed}}/>

Надеюсь, это поможет.

...