Comme le montre l'image, j'ai deux composants que je veux être côte à côte et alignés:
J'utilise React et le composant avec Negotiation
, frontend
et food
contient des éléments transmis par un autre composant.
Comment est-ce que j'appelle ceci de sorte que chaque élément (Negotiation
, Frontend
et food
) soit séparé l'un de l'autre mais toujours dans la même colonne avec les nouvelles alignées à côté?
Mon JavaScript:
class Course extends React.Component {
render() {
return (
<div>
<div className="coursecontent">
<h3>{this.props.coursename}</h3>
<h4> {this.props.status} {this.props.progress}</h4>
</div>
<button className="coursecontent">Start exercise</button>
</div>
);
}
}
class Welcomebox extends React.Component {
render() {
return <h1>Welcome Naomi</h1>;
}
}
ReactDOM.render(<Welcomebox />, document.getElementById('welcomebox'));
class Coursebox extends React.Component {
render() {
return (
<div className="box-field">
<Course coursename="Negotiation" progress= "20%" status="Progress"/>
<Course coursename="Frontend" progress="56%" status="Progress"/>
<Course coursename="Food" status="Progress" progress="43%"/>
</div>
);
}
}
class Newsbox extends React.Component {
render() {
return (
<div className="box-field" className="newsbox">
<h3>News</h3>
</div>
);
}
}
class Dashboardbox extends React.Component {
render() {
return (
<div className="dashboardbox">
<Coursebox />
<Newsbox />
</div>
);
}
}
ReactDOM.render(<Dashboardbox />, document.getElementById('dashboardbox'));
Mon CSS:
.box-field,
.newsbox {
width: 45%;
background-color: lightgrey;
font-family: arial;
margin-left: 30px;
height: 80%;
padding: 5px 10px 10px 10px;
border-radius: 10px;
display: inline-block;
}
Donc, fondamentalement, entre chaque élément Course
, je voudrais de l’espace (défini de préférence avec Margin
), et je veux que le composant Newsbox
soit aligné avec le composant Coursebox
.
Solution pour amener le nouveau composant Newsbox
à côté de Coursebox
import Coursebox from './Coursebox';
import Newsbox from './Newsbox'
class ContainerRow extends React.Component {
render(){
return (
<div className='rowC'>
<Coursebox />
<Newsbox />
</div>
);
}
}
CSS
.rowC{display:flex; flex-direction:row;}
Voici.
const ParentDiv = styled.div`
& {
width: 100%;
}
`;
const ChildDiv = styled.div`
& {
display: inline-block;
vertical-align: text-top;
margin: 0 auto;
}
`;
Si vous souhaitez une différence de style entre les composants du cours, vous pouvez transmettre un className à l'aide d'accessoires lorsque vous appelez le composant. Ou si vous utilisez bootstrap, vous pouvez simplement passer la classe "well" ou "panel".
Par exemple;
class Course extends React.Component {
render() {
return (
<div class="panel panel-default">
<div class="panel-heading">{this.props.coursename}</div>
<div class="panel-body">
<h4> {this.props.status} {this.props.progress}</h4>
<button className="coursecontent">Start exercise</button>
</div>
</div>
</div>
);
}
}