Getting Started with Shards React for UI Development
Written on
Chapter 1: Introduction to Shards React
Shards React is a versatile UI library that simplifies the integration of various components into your React application.
In this guide, we will explore how to effectively incorporate these components into your project.
Section 1.1: Implementing Button Groups
To include button groups in your React application, you can utilize the ButtonGroup component from Shards React. Here’s how to get started:
import React from "react";
import { Button, ButtonGroup } from "shards-react";
import "shards-ui/dist/css/shards.min.css";
export default function App() {
return (
<ButtonGroup>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
);
}
You can modify the size of the button group using the size property:
<ButtonGroup size="sm">
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
Additionally, if you want to arrange the buttons vertically, you can set the vertical property:
<ButtonGroup vertical>
<Button>Left</Button>
<Button>Middle</Button>
<Button>Right</Button>
</ButtonGroup>
Subsection 1.1.1: Creating a Button Toolbar
To create a button toolbar, utilize the ButtonToolbar component:
import React from "react";
import { Button, ButtonGroup, ButtonToolbar } from "shards-react";
import "shards-ui/dist/css/shards.min.css";
export default function App() {
return (
<ButtonToolbar>
<ButtonGroup>
<Button>Create</Button>
<Button>Edit</Button>
</ButtonGroup>
</ButtonToolbar>
);
}
Section 1.2: Using Cards for Content Organization
Cards are another useful feature that allows you to organize content within your React application. To add a card, follow this structure:
import React from "react";
import {
Card,
CardHeader,
CardTitle,
CardImg,
CardBody,
CardFooter,
Button
} from "shards-react";
import "shards-ui/dist/css/shards.min.css";
export default function App() {
return (
<Card>
<CardHeader>Card header</CardHeader>
<CardBody>
<CardTitle>Lorem Ipsum</CardTitle>
<p>Lorem ipsum.</p>
<Button>Read more</Button>
</CardBody>
<CardFooter>Card footer</CardFooter>
</Card>
);
}
Each part of the card serves a specific purpose:
- Card is the main container.
- CardHeader is for the header section.
- CardImg is for displaying images.
- CardBody contains the main content.
- CardTitle is for the title.
- CardFooter holds the footer content.
Chapter 2: Utilizing Containers for Layout
To manage layout effectively, the Collapse component can be employed to toggle visibility within your content:
import React from "react";
import { Container, Row, Col } from "shards-react";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";
export default function App() {
return (
<Container>
<Row>
<Col sm="6">1 / 2</Col>
<Col sm="6">2 / 2</Col>
</Row>
</Container>
);
}
In this example, the Container component creates a flexbox layout. The Row defines the rows, while Col specifies the columns. You can adjust the column sizes by setting the sm and lg props to accommodate different breakpoints.
Conclusion
By integrating button groups and containers, you can significantly enhance your React application using the Shards React library.