web-dev-qa-db-fra.com

Faire flotter le bouton réactif

Après avoir essayé de trouver un exemple où le FloatingActionButton flotte à sa position standard en bas à droite de l'écran sans résultat, je viens à vous si vous pouvez en fournir un car il semble que ce soit un bouton normal sans aucune intelligence pour flotter dans ce coin par défaut.

Est-il supposé que je doive le faire flotter en définissant une règle css personnalisée? Les documents Material-UI ne mentionnent aucune propriété sur le flottement documentation Material-UI FloatingActionButton .

htmlcssreactjsmaterial-ui
31
Franco

En effet, aucune propriété pour le moment dans le composant FloatingActionButton.

En attendant:

1) Une solution utilisant des styles en ligne:

En haut de votre composant, ajoutez:

const style = {
    margin: 0,
    top: 'auto',
    right: 20,
    bottom: 20,
    left: 'auto',
    position: 'fixed',
};

... et dans votre méthode de rendu:

render() {
    return <FloatingActionButton style={style}><ContentAdd /></FloatingActionButton>
}

OR

2) Une solution utilisant un fichier CSS

Ajoutez votre fichier CSS (ex: styles.css référencé sur votre index.html):

.fab {
    margin: 0px;
    top: auto;
    right: 20px;
    bottom: 20px;
    left: auto;
    position: fixed;
};

... et mettez votre composant React:

render() {
    return <FloatingActionButton className="fab"><ContentAdd /></FloatingActionButton>
}
64
Gauthier Poulet

Si vous souhaitez manipuler CSS dans material-ui, il vaut mieux utiliser la fonction de curry withStyles.

Comme ça:

import React, {Component} from 'react';
import {Button} from "material-ui";
import {Add} from 'material-ui-icons';
import { withStyles } from 'material-ui/styles';
const style = theme => ({
  fab: {
    margin: 0,
    top: 'auto',
    left: 20,
    bottom: 20,
    right: 'auto',
    position: 'fixed',

  }
});
class MyPage extends Component{
render() {
    const {classes} = this.props;
        return <Button fab variant="fab" color="primary" aria-label="add" className={classes.fab}><Add />
    </Button>
}
export default withStyles(style)(MyPage);

Lien de documentation: https://material-ui.com/customization/css-in-js/

8
milad nekooei

Si vous créez un thème personnalisé, vous pouvez utiliser le thème remplace pour styliser le FAB (bouton d'action flottant) flottant dans le coin inférieur droit:

import { createMuiTheme } from "@material-ui/core";

export default createMuiTheme({
    overrides: {
        MuiFab: {
            root: {
                position: 'absolute',
                bottom: '2rem',
                right: '2rem'
            }
        }
    }
});

Cela remplacera le FAB pour chaque utilisation de composant. Vous pouvez utiliser le même style avec un nom de classe spécifique et le remplacer à nouveau pour d'autres utilisations.

3
Rudolf Olah

J'ai en fait trouvé cela sur le documentation Material-UI . Je viens d'y apporter quelques modifications. Voici le code résultant.

import { makeStyles } from '@material-ui/core/styles';
import Fab from '@material-ui/core/Fab';
import AddIcon from '@material-ui/icons/Add';

const useStyles = makeStyles(theme => ({
  fab: {
    position: 'fixed',
    bottom: theme.spacing(2),
    right: theme.spacing(2),
  },
}));

ajoutez ceci à votre composant

const classes = useStyles();

return (
  <Fab color="primary" aria-label="add" className={classes.fab}>
    <AddIcon />
  </Fab>
);
1
Sofonias Abathun