2017-10-21 4 views
1

Je veux créer quelque chose comme çaMatériel Ui sélecteur terrain

alt text

Je peux choisir entre les champs, comment est-il possible de créer quelque chose comme ça dans ui matériel?

+0

Oui, c'est. Mais je suppose que vous ne demandez pas vraiment cela. Si vous demandez comment, cela devient trop large pour Stack Overflow. Si vous demandez où trouver un composant qui fait cela, c'est aussi hors sujet. Donc malheureusement, votre question ne semble pas convenir ici mais au moins l'éditer pour inclure plus de détails sur votre problème si "oui" ne suffit pas pour y répondre. –

+0

@SamiKuhmonen, j'ai lu la documentation MateriaUi n'a pas trouvé comment créer quelque chose comme ça. Peut-être que j'ai raté quelque chose. – Taieb

Répondre

0

Créez un composant pour chaque bouton et attribuez-lui un className qui définit la couleur de fond comme les couleurs non marquées de votre image. className doit être la propriété state.

Après que l'intérieur onClick changement state propriété à la classe css qui a fond rouge.

Par exemple:

class Button extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {buttonDesign: "not-selected"}; 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
     if (this.state.buttonDesign == "selected"){ 
      this.setState({ 
      buttonDesign: "not-selected" 
      }); 
     } 
     else if (this.state.buttonDesign == "not-selected"){ 
      this.setState({ 
      buttonDesign: "selected" 
      }); 
     } 
     } 
    }; 

    render() { 
     return(
      <button className={this.state.buttonDesign} onClick={this.handleClick}> 
       "your button name" 
      </button> 
     ); 
    } 
} 

et dans votre fichier css vous devriez avoir quelque chose comme ceci:

.not-selected { 
    background-color : #ff9191; // or your color 
} 
.selected{ 
    background-color: #ff0000; // or your color 
} 

Et vous auriez besoin d'une certaine logique pour suivre ceux qui ont été sélectionnés.

+0

est-il un moyen de le faire de façon statique? – Taieb

+0

comment voulez-vous dire? – Goran

+0

Juste avec Material-ui et le composant de la puce. Je connais toutes les données que je vais utiliser donc je veux les mettre dans une sorte de tableau, et les afficher, donc je peux choisir entre eux. – Taieb