Hi guys so I'm trying to use button in my react-bootstrap app and what that button do is everytime user click the button it will redirect the user to another page of the web-app. But for some reason it didn't work, can anyone help me please ? my router already work for other components such as header, footer, etc. But it didn't work for the Button.
Here's my code:
<Container fluid>
<Row className="Aboutus">
<Col sm={12} lg={6}>
<h1>About Us</h1>
<hr style={{border:'2px solid', color:'#10255A', width:'25.7%'}}></hr>
<p>The hotel itself possess a trendy design with attention to comfort,
quality and value based accommodation.
</p>
<button as={Link} to={"/Room"}>See Room</button>
</Col>
<Col sm={12} lg={6}>
<img src="#"></img>
</Col>
</Row>
</Container>
You would need to use bootstrap <Button> instead of native HTML <button> for that and change href instead of to:
<Button as={Link} href={"/Room"}>
See Room
</Button>;
Live Example:
You will need to open sandbox URL in another tab to see url change
Because you are using normal button, not Button in react-bootstrap.
Just update it
<Button as={Link} to={"/Room"}>See Room</Button>
Another option and just to take advantage of the native link component without using the Button component, is to use the bootstrap classes(which support styling a tags as a button):
<Link to="/Room" className="btn btn-primary">
See Room
</Link>
Related
Running the Wave Report tool, I got an error about <button type="button" class="astra-cart-drawer-close"> saying
A button is empty or has no value text
The site is WP, built with ASTRA Theme and Elementor. Is there a CSS code solution or any other?
The site is www.defkalionsa.gr
I know what's causing the problem but I can't select the right things on the page to get the X-close button to appear.
<div id="astra-mobile-cart-drawer" class="astra-cart-drawer open-right">
<div class="astra-cart-drawer-header">
<button type="button" class="astra-cart-drawer-close">
<span class="ahfb-svg-iconset ast-inline-flex svg-baseline">
<svg class="ast-mobile-svg ast-close-svg"...>
<path d="M5.293..."></path>
</svg>
</span>
</button>
<div class="astra-cart-drawer-title">Shopping Cart</div>
</div>
<div class="astra-cart-drawer-content"></div>
</div>
You have a <button> with an embedded <svg> and I presume the <svg> is just a big 'X' to represent a close button but there's nothing to tell assistive technology such as a screen reader what the <svg> represents. You can fix this by adding aria-label="close" to the <button>.
<button aria-label="close" type="button" class="astra-cart-drawer-close">
(For Internet Explorer, if you care, you also need <svg focusable="false"> so that the keyboard user can't tab to the <svg>).
The class on the containing <div> says astra-mobile-cart-drawer so I presume this button is only shown in mobile view. I switched to mobile view in the browser but still couldn't get this button to appear. I added something to the cart and displayed the cart but still no luck.
You can still fix the problem with aria-label but I was really hoping to see the X-close button in action to confirm what it's trying to do.
I'm new to ReactJs now learning the react-bootstrap and trying to learn the NavBar. I made a CodeSandbox.
I really like the design like this:
The NavBar is set to fixed="top" so it's always visible when user scroll.
When I change the size of the window the NavBar get higher I try setting css like:
.NavBar {
max-height: 80px;
}
But Buttons and all components jump around wrapping making NavBar larger and not very good looking.
how can I resize the Components when window size change?
I see many pages uses different NavBar layouts and switch between them when window is resized. Is that done using css or should I create another React Component another NavBar and replace NavBar depending on window size?
I see many pages uses different NavBar layouts and switch between them
when window is resized. Is that done using css or should I create
another React Component another NavBar and replace NavBar depending on
window size?
In React-bootstrap (or any Bootstrap library), this functionality is already provided for you. This is generally the job of Navbar.Toggle & Navbar.Collapse. Basically, this enables you to switch from the desktop view - wherein all the Nav Items are displayed on the header versus on the mobile view wherein majority of the Nav Items are inside a Dropdown which is toggleable via the Navbar.Toggle (Hamburger) Button.
So in short, my suggestion is to leverage the already available functionality of React-bootstrap regarding toggling between the desktop view and mobile view.
return (
<>
<Navbar
expand="xl"
bg="dark"
variant="dark"
fixed="top"
collapseOnSelect
>
<Container fluid>
<Navbar.Brand href="#home" className="img-container">
<img alt="" src={logo1} />
</Navbar.Brand>
<Navbar.Toggle
aria-controls="responsive-navbar-nav"
onClick={toggle}
/>
<Navbar.Collapse id="basic-navbar-nav">
<Col>
<Nav.Item>
<Form inline>
<FormControl
type="text"
placeholder="Search Title, event, date"
className="mr-sm-2 m-1"
size="lg"
/>
<Button className="m-1" variant="outline-info" size="lg">
Search
</Button>
</Form>
</Nav.Item>
</Col>
<Col md="auto">
<Button className="m-1" variant="primary" size="lg">
Articles
</Button>
<Button className="m-1" variant="primary" size="lg">
Timeline
</Button>
<Button className="m-1" variant="primary" size="lg">
About
</Button>
</Col>
</Navbar.Collapse>
</Container>
</Navbar>
</>
);
In retrospect, you should also be able to assess that on mobile, the screen is too small so forcing in the Nav Items to be shown right away will block majority of the viewport - potentially causing UI/UX issues.
If you opt to disregard that and absolutely must place all of these items in the header even on mobile, you can always use media queries.
Example is on your image which I recommend you resize on small devices:
#media (max-width: 991px) {
.navbar .navbar-brand {
max-width: 280px;
}
}
You can refer here to the Bootstrap break points: https://getbootstrap.com/docs/4.5/layout/overview/#containers
Refer here for React-bootstrap Navbar documentation: https://react-bootstrap.github.io/components/navbar/#navbars
I'm using Next.js app which has a card component that has read more link. when the user clicks on read more link the card should expand, I have used "react-show-more" https://github.com/One-com/react-show-more. I need to add smooth expand to the card when press the read more link with CSS Transition rule but the CSS transition is not working. This is my card component. and you can find live demo here: https://codesandbox.io/s/confident-http-cfz7p?fontsize=14
return (
<CardOuter>
<CardIcon>
<img className="CardIcons" alt="cardIcon" src={Icon} />
</CardIcon>
<CardContent>
<h3>{Title}</h3>
<ShowMore
lines={5}
more={<Link className="link-right" Content="Read More" />}
less={<Link className="link-right-sl" Content="Show less" />}
anchorClass="showMore"
>
{Description}
</ShowMore>
</CardContent>
</CardOuter>
);
I found another npm that has smooth expand,
https://github.com/tinacious/react-animated-show-more
I want to build a TVML template that contains a Dropdown-Menu like the "All Genres" selection in the "New" tab in Apple Music.
The button is implemeted as described in Apples TVML Catalog:
<separator>
<button>
<text>Options <badge class="customBadgeLayout" src="resource://button-dropdown" width="31" height="14" /></text>
</button>
</separator>
But how can I open a list with selectable and also clickable items by clicking on the button?
Have you installed the sample TVML Catalog App?
There are good samples of templates there.
You can probably use the alertTemplate with multiple buttons, like this:
<document>
<alertTemplate>
<background>
<img src="/resources/images/background/bg_dark.jpg" />
</background>
<title>Title</title>
<button>
<text>Button 1</text>
</button>
<button>
<text>Button 2</text>
</button>
</alertTemplate>
</document>
I basically want an image as a button, for example, see the 'recent inbox messages' thing at the top next to stack Exchange? I want to recreate that moreorless but with my own image.. How would I go about doing this, I've tried:
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg">
</form>
but that didn't work, could anyone help (sorry if I worded all of this badly, English [though my native language] isn't a strong point!
-Trey
You can make an image button with something like this:
<a href="#">
<img src="yourImage.png">
</a>
This creates an image element with an anchor surrounding it, so for all intents and purposes, it's an "image button." You will have to style it to your liking.
UPDATE
Your code will also work if you change it to
<button>
<img src="yourImage.png">
</button>
You have to close the button tag. This will create an ugly-looking button with an image in it, but you can use CSS to style it to your liking.
you are opening a button and closing a form which is not even opend yet
you should use in first place. how ever using an image as a button is not the best idea i guess
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg"/>
</button>
made you a quick fiddle to check it out: http://jsfiddle.net/T2JRt/1/