I recently started using Ant Design and I noticed people can solve the problem with React Components and css classes. In the docs I can't find anything regarding the css classes, But I personally prefer the css classes approach. How can I learn more about the available css classes so I can avoid importing all those Components?
import 'antd/dist/antd.css';
import { Row, Col } from 'antd';
<Row>
<Col xs={24} xl={8}>
One of three columns
</Col>
<Col xs={24} xl={8}>
One of three columns
</Col>
<Col xs={24} xl={8}>
One of three columns
</Col>
</Row>
or:
<div className="ant-row">
<div className="ant-col ant-col-xs-24 ant-col-xl-8">
One of three columns
</div>
<div className="ant-col ant-col-xs-24 ant-col-xl-8">
One of three columns
</div>
<div className="ant-col ant-col-xs-24 ant-col-xl-8">
One of three columns
</div>
</div>
I don't think Ant is meant to be used with classes. React components guarantee the API, the HTML structure and the javascript logic works well together. You could try to reproduce the UI using the same HTML structure with the classes but that won't be easy to maintain.
If you're looking for a CSS based framework, you should look at Tailwind CSS or similar libraries.
Related
I'm trying to use the Bootstrap datepicker function for react. I implemented the solution from the following thread: React DatePicker Bootstrap up to date.
The import looks like:
import Form from 'react-bootstrap/Form';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import '../../../node_modules/bootstrap/dist/css/bootstrap.min.css'
And my code currently looks something like:
return(
<Form>
<Row>
<Col xl={5} lg={5}>
<Form.Group as={Row} controlId="fcField">
<Form.Label column xl={3} lg={3} className="mr-1">Form Label:</Form.Label>
<Col xl={9} lg={9}>
<Form.Control
size="sm"
type="date"
readOnly={!editFlag}
name="shipdate"
value={convertDate(selectedBuild.shipdate ? selectedBuild.shipdate : '', '-')}
onChange={onChangeHandler}
onBlur={dateBlurHandler}
/>
</Col>
</Form.Group>
</Col>
</Row>
</Form>
)
But the "date" type only renders the browser default, seen in this picture.
From my understanding, it should look like what is in the bootstrap document:
There are many aspects of the bootstrap datepicker that I would like to use, and they are not taken as arguments into my Form.control.
From the previous forum post, it looked like all I had to do was set the form.control type to "date". But apparently that is not happening.
What can I do to access the bootstrap datepicker?
I would try using react-bootstrap-date-picker as it's the accepted answer on the thread you linked. https://www.npmjs.com/package/react-bootstrap-date-picker
I am making my first ever website in React. I want to use Bootstrap's grid system, but I don't really know when I should use this or rather how extensively.
Is the grid system best in places like App.js and in each individual component? Just in each individual component? Just in App.js?
I use React-Bootstrap. I've found it very simple to get going with, and the intellisense you get in VS Code is great.
To get started, just:
npm install react-bootstrap
You can see a list of all of the components here.
Then you just add the components that you want to use to your import.
import {
Navbar,
Container,
Nav,
NavbarBrand,
Row,
Col,
{...}
} from "react-bootstrap";
Then in your rendered output, for example:
return (
<Container>
<Navbar>
<NavbarBrand>Brand</NavbarBrand>
<Navbar.Collapse>
<Nav>
<NavItem>Item 1</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
<Row>
<Col md={4}>
</Col>
<Col md={4}>
</Col>
<Col md={4}>
</Col>
</Row>
</Container>
);
We can use plain bootstrap to use grid system. We have to use it inside most of the component according to the requirement to make is responsive.
Easy Option:
There are other options to use bootstrap inside react like component libraries. You can use either Reactstrap or React-Bootstrap. These libraries provide components by which you can easily create website with react and power of bootstrap.
When to use Space Component ? on the website it says
"Avoid components clinging together and set a unified space."
if by that means, i can use Row and Col components too to achieve the same thing,
ex :
i have 3 button in same row (like the basic usage of Space Component on docs)
using Space =>
<Space>
<Button type="primary">Button1</Button>
<Button type="primary">Button2</Button>
<Button type="primary">Button3</Button>
</Space>
using Row and Col Component =>
<Row gutter={8}>
<Col span={8}>
<Button type="primary">Button 1 </Button>
</Col>
<Col span={8}>
<Button type="primary">Button 1 </Button>
</Col>
<Col span={8}>
<Button type="primary">Button 1 </Button>
</Col>
</Row>
Thanks for everyone that helping this :)
<Space> and Grid components (<Row> and <Col>) are intended for different purposes.
<Space> is intended to be used in instances where you have a set of elements that need to be laid out inline and you want to have some spacing between them. Using the <Space> component with the different pre-defined size values bring a unified concept of spacing throughout your application.
Grid components are intended for addressing more complex layout requirements. While it is true that you can achieve the same outcome of <Space> component with Grid components, using Grid components for achieving spacing needs does not provide you with a unified concept of spacing throughout your application. And for the example you have given, it is basically an overkill to use the <Row> and <Col> components to just achieve spacing.
I am having an issue with Gatsby bootstrap or react-bootstrap (not sure yet, most likely it is bootstrap). Everything looks great when I build and serve gatsby website, it has all bootstrap classes and nice grid ( 2 columns, one is md="8" another is md="4"). But once I reload the page and when I inspect the code in the Chrome browser, bootstrap classes disappear.
Code in Gatsby page (added className just to make sure that it is not coming after reaload):
{window.innerWidth > 992 ? (
<Col md="8">
<NameAndHealine />
<ListingText />
</Col>
<Col md="4">
<PricingSidebBar />
</Col>
) : (
<Col xs="12">
<NameAndHealine />
</Col>
<Col xs="12">
<PricingSidebBar />
</Col>
<Col xs="12" className="mt-5">
<ListingText />
</Col>
)
Code example before page reload:
<div class="col-md-8">...</div>
<div class="col-md-4">...</div>
Code example after page reload:
<div class="col-12">...</div>
<div class="col-12">...</div>
Steps what I tried to solve the problem:
Import bootstrap.css and bootstrap.js inside gatsby-browser.js
Add extra className with bootstrap classes to make sure it is not coming after page reload.
EDIT:
I found the issue, it is with window.innerWidth as I was ordering components depending on it. I changed it to multiple rows and set display classes for different screens. After page reload Gatsby doesn't take classes when it is inside if (window.innerWidth > 992) (why?). If someone knows the answer please let me know, thanks.
EDIT 2
Added extra code above
I can't get bootstrap classes to work with react-bootstrap
I tried using bootstrap classes specifically flex properties in react-bootstrap but it doesn't seem to work. But on the docs it shows an example of them using it "https://react-bootstrap.netlify.com/layout/grid/", also the docs seem pretty vague so I went to bootstrap's docs but no avail there either.
I noticed when I change how many Col's (like this col md={4}) I want a specific col element to take up the positioning of this button changes even though it supposed to be in the center why is that ? Here is a example of my code
import React from 'react';
import'./Welcome.css';
import { Button, Container, Col, Row } from 'react-bootstrap';
class Welcome extends React.Component {
render() {
return(
<div className="welcome">
<Container>
<Row className="justify-content-center">
<Col>
<Button variant="primary" size="lg">Large button</Button>
</Col>
</Row>
</Container>
</div>
);
}
}
export default Welcome;
I'm fairly new to react as well, more so to react-bootstrap but I am very familiar with bootstrap, this has me ready to just use CSS grid or flex and not use bootstrap's grid lol. So if anyone can help me out that would be great and much appreciated.
Try This.
<Container>
<Row>
<Col md={{ order: 'last' }}>First, but last</Col>
<Col md>Second, but unordered</Col>
<Col md={{ order: 'first' }}>Third, but first</Col>
</Row>
</Container>