Material UI Definitionsliste

Question

Ich versuche, die folgende Verwendung von React-Material-UI, abzüglich der Expansion Carets auf der rechten Seite zu erreichen:

Hier ist die Spezifikation auf der Google-Seite. https://material.io/guidelines/components/expansion-panels.html#expansion-panels-usage

Ich habe festgestellt, dass es keine genaue Komponente für diesen Stil gibt. Ich habe im Grunde eine Reihe von zusammenfassenden Daten, die ich anzeigen möchte, aber ich fühle mich wie eine Tabelle oder nur eine gerade Materialliste mit Unterüberschriften ist nicht geeignet. Ich glaube, ich möchte wirklich eine HTML-Definitionsliste im Grunde. Hat jemand eine Idee, wie man das macht? Ich suche nur nach einer Idee, wie ich das mit den vorhandenen Materialkomponenten machen könnte.

Danke!

Answer 1

Wie wäre es mit der Papierkomponente des Reaktionsmaterials ui.

http://www.material-ui.com/#/components/paper

Fill in den Daten als eine Reihe mit jeder Reihe mit Rand-Boden CSS aktiviert.

Schauen Sie sich diese Geige .. Es ist ein bisschen chaotisch, aber Sie werden das Wesentliche bekommen.

https://jsfiddle.net/cmaL8jku/

Answer 2

Es ist ein Material-ui Komponente Karte, Sie verwenden können. Es hat die gleiche Funktion zum Erweitern/Reduzieren.

es wie folgt verwendet:

<Card> 

    <CardHeader 
     title="Without Avatar" 
     subtitle="Subtitle" 
     actAsExpander={true} 
     showExpandableButton={true} 
    /> 

    <CardActions> 
     <FlatButton label="Action1" /> 
     <FlatButton label="Action2" /> 
    </CardActions> 

    <CardText expandable={true}> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     Donec mattis pretium massa. Aliquam erat volutpat. Nulla facilisi. 
     Donec vulputate interdum sollicitudin. Nunc lacinia auctor quam sed pellentesque. 
     Aliquam dui mauris, mattis quis lacus id, pellentesque lobortis odio. 
    </CardText> 

</Card> 

Setzen Sie den Inhalt in CartText, den Header definieren. Es gibt bool variable actAsExpander, showExpandableButton, mit denen Sie die Funktion zum Erweitern/Reduzieren steuern können. Alle Elemente der Karte sind Optionen. Wenn Sie die Kartenaktion nicht möchten, entfernen Sie diese auch für andere Elemente.

Überprüfen Sie die DOC für weitere Details auf Karte.