web-dev-qa-db-fra.com

Comment utiliser les zones de modèle de grille dans un style en ligne réactif?

Donc, je joue avec css-grids en réaction quand j'ai remarqué que grid-template-areas a une syntaxe un peu différente qui pourrait ne pas être compatible dans les styles de réaction en ligne. Je n'utilise pas de bibliothèques, juste de vieux styles de réaction en ligne avec un accessoire de style.

Donc, ce que je vise à faire est similaire à cela.

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-areas: "header header"
                       "aside main"
                       "footer footer"
}

.header {
  grid-area: header;
  border: 1px solid red;
}
.main {
  grid-area: main;
  border: 1px solid green;
} 

.aside {
  grid-area: aside
}
.footer {
  grid-area: footer;
  border: 1px solid yellow;
}

Fidde: https://jsbin.com/lejaduj/2/edit?html,css,output

La mise en page est simple, "en-tête" et "pied de page" couvrant toutes les colonnes et "côté" et "principal" couvrant la moitié. C'est juste à des fins de démonstration, donc je suis resté simple.
Notez en particulier comment grid-template-areas a plusieurs valeurs séparées juste par des guillemets doubles.

Après réflexion, j'ai pensé que nous pourrions utiliser des tableaux dans gridTemplateAreas dans des styles réactifs en ligne. Cela ne semblait pas fonctionner.

J'ai encore essayé avec template-literals qui n'a pas fonctionné non plus.

Sandbox: https://codesandbox.io/s/zx4nokmr5l

Alors, est-ce juste moi qui frappe cet obstacle ou n'est-ce pas encore pris en charge?

Je préfère ne pas utiliser de bibliothèque ou de cadre supplémentaire en réaction pour y parvenir autant que possible.

cssreactjscss-grid
10
shriek

Si l'objectif est d'utiliser grid-template-areas avec l'attribut HTML style (c'est-à-dire les styles CSS en ligne), puis utilisez des guillemets simples au lieu de doubles.

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px;
  /* grid-template-areas: "header header"
                          "aside main"
                          "footer footer"; */
}

.header {
  grid-area: header;
  background-color: aqua;
}

.main {
  grid-area: main;
  background-color: lightgreen;
}

.aside {
  grid-area: aside;
  background-color: yellow;
}

.footer {
  grid-area: footer;
  background-color: pink;
}
<body class="wrapper" style="grid-template-areas: 'header header' 'aside main' 'footer footer' ">
  <div class="header">header</div>
  <div class="main">main</div>
  <div class="aside">aside</div>
  <div class="footer">footer</div>
</body>
1
Michael_B

Utilisez simplement des chaînes de backtick.

gridTemplateAreas: `
                    'header header'
                    'aside main'
                    'footer footer'
                `
11
Chris Wingler

si vous avez besoin d'un objet dans le style, cela fonctionne

    myStyle = {
        display: 'grid',
        gridTemplateAreas: "'header' 'content' 'footer'",
        gridTemplateRows: '50px calc(100vh - 100px) 50px' 
    };

et utiliser l'objet de style en ligne

comme je l'ai fait avec styletron

    import { styled } from 'styletron-react';

    const myStyle = {
        backgroundColor: 'whitesmoke',
        display: 'grid',
        gridTemplateAreas: "'header' 'content' 'footer'",
        gridTemplateRows: '50px calc(100vh - 100px) 50px'
    };

    const Layout = styled('div', (props) => (myStyle));

    export default Layout;
5
Alexander

Pour les personnes qui ont un tableau bidimensionnel comme celui-ci:

let grid2D = [
 ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3"],
 ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3"],
 ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"],
 [".","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"],
 [".","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"]
]

pour concaténer le tableau afin qu'il soit possible de le faire dans un style en ligne, vous pouvez simplement utiliser cette seule ligne

let stringGrid = "'" + grid2D.map(arr => arr.join(' ')).join("' '") + "'";

Dans un composant React, il peut fonctionner comme ceci:

export class Grid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      grid2D: [
       ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3"],
       ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3","area-e06e944f-a50a-4630-ac19-6c85ca0e7bc3"],
       ["area-70774248-ed4a-4f60-8341-46d4173344f8","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"],
       [".","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"],
       [".","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410","area-1d20d72e-5383-47aa-bcc4-8aaed8137410"]
      ]
    };
  }

  getTemplateAreas(grid2D) { 
    return "'" + grid2D.map(arr => arr.join(' ')).join("' '") + "'"; 
  }

  render() {
    const { grid2D } = this.state;
    return (
      <div style={{ gridTemplateAreas: this.getTemplateAreas(grid2D), display: 'grid', width: '100%', height: "100%" }}>
         {grid2D.map((arr, i1) => {
          return arr.map((id, i2) => {
            return <div key={i1 + '' + i2} style={{ gridArea: id }} />;
          });
        })}
      </div>
    );
  }
}

Important: les noms/identifiants de zone de grille doivent commencer par un caractère alphabétique

0
kenny