react-bootstrap#CardColumns JavaScript Examples
The following examples show how to use
react-bootstrap#CardColumns.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Projects.js From datasciencefolio with MIT License | 4 votes |
|
render() {
const theme = this.props.theme;
return (
<div className="projects-main">
<Header theme={theme} />
<div className="basic-projects">
<Fade bottom duration={2000} distance="40px">
<div className="projects-heading-div">
<div className="projects-heading-img-div">
<ProjectsImg theme={theme} />
</div>
<div className="projects-heading-text-div">
<h1
className="projects-heading-text"
style={{ color: theme.orange }}
>
{projectsHeader.title}
</h1>
<p
className="projects-header-detail-text subTitle"
style={{ color: theme.text }}
>
{projectsHeader["description"]}
</p>
</div>
</div>
</Fade>
</div>
<div className="repo-cards-div-main">
<CardColumns>
{projectcards.list.map((proj) => {
return (
<Card className="h-100">
<Card.Img
variant="top"
src={require(`../../assets/projects/${proj.img_path}`)}
/>
<Card.Body>
<Card.Title>
<h2 style={{ lineHeight: "1.5", marginTop: "0" }}>
{proj.title}
<a
style={{ color: theme.text }}
href={proj.link}
target="_blank"
rel="noopener noreferrer"
>
<i
className={`fas fa-external-link-alt`}
style={{
color: proj.linkcolor,
marginLeft: "10px",
}}
></i>
</a>
<a
style={{ color: theme.text }}
href={proj.code}
target="_blank"
rel="noopener noreferrer"
>
<i
className={`fab fa-github`}
style={{
color: proj.linkcolor,
paddingLeft: "10px",
}}
></i>
</a>
</h2>
</Card.Title>
<div>
{proj.tags.map((demo2) => {
return (
<Badge
style={{
marginRight: "0.5em",
backgroundColor: demo2.color,
}}
>
{" "}
{demo2.lang}
</Badge>
);
})}
</div>
<div
className="text-center"
style={{ marginTop: "20px" }}
></div>
<Card.Text>{proj.description}</Card.Text>
</Card.Body>
</Card>
);
})}
</CardColumns>
</div>
<Button
text={"More Projects"}
className="project-button"
href="https://github.com/rohankokkula"
newTab={true}
theme={theme}
/>
<Footer theme={this.props.theme} onToggle={this.props.onToggle} />
<TopButton theme={this.props.theme} />
</div>
);
}
Example #2
| Source File: UserPageComponent.js From project-s0-t1-budget with MIT License | 4 votes |
|
render() {
return (
<Container>
{this.state.dataLoaded ? (
<div>
{this.state.dataFound ? (
<div>
<br />
<Form.Row>
<Form.Group as={Col} md="2" controlId="Month">
<Form.Control
as="select"
name="Month"
onChange={this.handleChange}
value={this.state.selectMonth}
>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</Form.Control>
</Form.Group>
<Form.Group as={Col} md="2" controlId="Year">
<Form.Control
as="select"
name="Year"
onChange={this.handleChange2}
value={this.state.selectYear}
>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
</Form.Control>
</Form.Group>
</Form.Row>
{this.state.dataModify ? (
<div>
<Row>
<Col md="6">
<Jumbotron>
<UserPageUpdateComponent
user={this.props.user}
month={this.state.selectMonth}
year={this.state.selectYear}
update={this.update}
currData={this.state.data}
/>
<br />
<Button onClick={this.cancelModifyBudget}>
Cancel
</Button>
</Jumbotron>
</Col>
<Col md="6">
<TableComponent
category={this.state.data.labels}
price={this.state.data.data}
/>
</Col>
</Row>
</div>
) : (
<div>
<ButtonToolbar>
<ButtonGroup className="mr-2">
<Button variant="danger" onClick={this.deleteBudget}>
Delete Month's Finances
</Button>
</ButtonGroup>
<ButtonGroup className="mr-2">
<Button onClick={this.modifyBudget}>
Modify Month's Finances
</Button>
</ButtonGroup>
<ButtonGroup className="mr-2">
<DropdownButton
id="dropdown-item-button"
title="Graphs"
>
<Dropdown.Item as="button" onClick={this.handleBar}>
Bar Graph
</Dropdown.Item>
<Dropdown.Item
as="button"
onClick={this.handlePieIncome}
>
Income Pie Chart
</Dropdown.Item>
<Dropdown.Item
as="button"
onClick={this.handlePieExpense}
>
Expenses Pie Chart
</Dropdown.Item>
<Dropdown.Item
as="button"
onClick={this.handleBarGoals}
>
Goal Chart
</Dropdown.Item>
<Dropdown.Item as="button" onClick={this.handleRadar}>
Expense Variance Chart
</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
</ButtonToolbar>
<Form.Switch
checked={this.state.colorMode}
id="custom-switch"
label="Colorblind Mode"
onChange={this.handleSwitchChange}
/>
<br />
{this.state.showTable ? (
<div>
<Button onClick={this.toggleTable}>
Hide Finances Table
</Button>
<br />
<br />
<TableComponent
category={this.state.data.labels}
price={this.state.data.data}
/>
</div>
) : (
<div>
<Button onClick={this.toggleTable}>
Show Finances Table
</Button>
<br />
<br />
</div>
)}
</div>
)}
<CardColumns>
<Card
border="none"
style={
this.state.barActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handleBar={this.handleBar}
labels={this.state.data.labels}
data={this.state.data.data}
Component={"BarChart"}
/>
</Card>
<Card
border="none"
style={
this.state.incomePieActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handlePieIncome={this.handlePieIncome}
labels={this.state.data.labels}
data={this.state.data.data}
color={this.state.colorMode}
Component={"IncomePie"}
/>
</Card>
<Card
border="none"
style={
this.state.expensePieActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handlePieExpense={this.handlePieExpense}
labels={this.state.data.labels}
data={this.state.data.data}
color={this.state.colorMode}
Component={"ExpensePie"}
/>
</Card>
<Card
border="none"
style={
this.state.barGoalsPieActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handleBarGoals={this.handleBarGoals}
data={this.state.data.data}
goal={this.state.data.goal}
color={this.state.colorMode}
Component={"BarGoal"}
/>
</Card>
<Card
style={
this.state.radarActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handleRadar={this.handleRadar}
labels={this.state.data.labels}
data={this.state.data.data}
Component={"RadarPie"}
/>
</Card>
</CardColumns>
</div>
) : (
<div>
<br />
<Form.Row>
<Form.Group as={Col} md="2" controlId="Month2">
<Form.Control
as="select"
name="Month"
onChange={this.handleChange}
value={this.state.selectMonth}
>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</Form.Control>
</Form.Group>
<Form.Group as={Col} md="2" controlId="Year2">
<Form.Control
as="select"
name="Year"
onChange={this.handleChange2}
value={this.state.selectYear}
>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
</Form.Control>
</Form.Group>
</Form.Row>
<h3>No Data for this month :(</h3>
<br />
<h4>Would you like to add some?</h4>
<Jumbotron>
<UserPageFormComponent
user={this.props.user}
month={this.state.selectMonth}
year={this.state.selectYear}
update={this.update}
/>
</Jumbotron>
</div>
)}
<LineGraphComponent
year={this.state.selectYear}
user={this.props.user}
/>
</div>
) : (
<Spinner animation="border" variant="primary">
<span className="sr-only">Loading...</span>
</Spinner>
)}
</Container>
);
}
Example #3
| Source File: index.js From project-s0-t1-budget with MIT License | 4 votes |
|
render() {
return (
<Layout user={this.props.user}>
{this.props.user ? (
<UserPageComponent user={this.props.user} />
) : (
<Container>
<br />
<Row>
<Col md="5">
<Jumbotron>
<ChartFormComponent
handleFormUpdate={this.handleFormUpdate.bind(this)}
/>
<br />
<ButtonToolbar>
<ButtonGroup className="mr-2">
<Button
variant="secondary"
onClick={this.handleResetUpdate}
>
Reset
</Button>
</ButtonGroup>
<ButtonGroup className="mr-2">
<DropdownButton id="dropdown-item-button" title="Graphs">
<Dropdown.Item as="button" onClick={this.handleBar}>
Bar Graph
</Dropdown.Item>
<Dropdown.Item
as="button"
onClick={this.handlePieIncome}
>
Income Pie Chart
</Dropdown.Item>
<Dropdown.Item
as="button"
onClick={this.handlePieExpense}
>
Expenses Pie Chart
</Dropdown.Item>
<Dropdown.Item as="button" onClick={this.handleRadar}>
Expense Variance Chart
</Dropdown.Item>
</DropdownButton>
</ButtonGroup>
</ButtonToolbar>
<br />
<Form.Switch
checked={this.state.colorMode}
id="custom-switch"
label="Colorblind Mode"
onChange={this.handleSwitchChange}
/>
</Jumbotron>
</Col>
<Col md="7">
<TableComponent
category={this.state.labels}
price={this.state.data}
/>
</Col>
</Row>
<CardColumns>
<Card
border="none"
style={
this.state.barActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handleBar={this.handleBar}
labels={this.state.labels}
data={this.state.data}
Component={"BarChart"}
/>
</Card>
<Card
border="none"
style={
this.state.incomePieActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handlePieIncome={this.handlePieIncome}
labels={this.state.labels}
data={this.state.data}
color={this.state.colorMode}
Component={"IncomePie"}
/>
</Card>
<Card
style={
this.state.expensePieActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handlePieExpense={this.handlePieExpense}
labels={this.state.labels}
data={this.state.data}
color={this.state.colorMode}
Component={"ExpensePie"}
/>
</Card>
<Card
style={
this.state.radarActive
? { border: "none" }
: { display: "none" }
}
>
<ChartCardComponent
handleRadar={this.handleRadar}
labels={this.state.labels}
data={this.state.data}
Component={"RadarPie"}
/>
</Card>
</CardColumns>
</Container>
)}
</Layout>
);
}
