I have been loving using the ant design library for this project, but for some reason, I can't get the popovers to work. Here is a video of what I'm getting.
Here is the code
<Popover
content={
<div>
<p>hi</p>
</div>
}
title="Title"
>
<Button type="primary">Hover me</Button>
</Popover>
From your video, it doesn't look like you have set up antd properly because the button styling looks very odd.
You are probably missing the CSS import that allows antd components to work correctly check out this documentation: https://ant.design/docs/react/use-with-create-react-app
You need to add this line in your index.js or App.js: #import '~antd/dist/antd.css';
Related
I have an image url fetched from an API and I want to display it as a background image. Is there any way I can implement this with tailwindcss or should I use styles attribute?
I think the best solution is to do what you suggested and use a style attribute. Tailwind CSS doesn't really deal with dynamic data, but rather with class names to add predefined styles to your element. The best you could without using the style attribute is to conditionally add/remove classNames from an element, but that would require you to know the image URL ahead of time, which defeats the purpose of getting it from an API.
I would do:
style={{backgroundImage: `url(${fetchedImgSrc})`}}
Edit:
It looks like you can actually use Tailwind to do something similar to the code above as per https://tailwindcss.com/docs/background-image.
The code looks like:
<div class="bg-[url('/img/hero-pattern.svg')]">
<!-- ... -->
</div>
I think I have found a solution other than simply using a style attribute.
<div
style={{'var(--image-url)': fetchedUrl}}
className='bg-[image:var(--image-url)]'>
<!-- ... -->
</div>
This works perfectly fine.
Although it looks a bit tedious, it can be used to enable the background image on hover, focus, etc. In which the style attribute is incapable of.
className='hover:bg-[image:var(--image-url)] focus:bg-[image:var(--image-url)] ...'
This application of custom properties can be used for implementing dynamic values with tailwind like colors fetched from an API.
<div
style={{'var(--color)': fetchedColor}}
className='text-[color:var(--color)]'>
<!-- ... -->
</div>
you can just use backgroundImage in Style
const bag2 = "https://via.placeholder.com/500"
<div
className = "someting"
style={{backgroundImage: `url(${bag2})`}}
</div>
Even with the latest implementation of the arbitrary-values - it seems like it's not working for Dynamic URLs.
In my case image was coming from an API. If it is the case, stick to style attribute.
In the solution below - bgImage is a prop.
<div className={`justify-center bg-no-repeat bg-cover bg-center rounded-lg`}
style={{ backgroundImage: `url(${bgImage})`}} >
<!-- Children here-->
</div>
If you are having this same issue in 2022, then this is what helped me with tailwind version ^3.0.23. I just moved the image to the public folder and used the link in my tailwind.config.js like so backgroundImage: { 'cover-pic': "url('/public/img/cover_pic.jpg')" } where /public/img is the directory where I placed the image within the public folder, yours might different. and then called the css like so bg-cover-pic within my project, and that was all it took.
I just went to html to jsx online converter https://magic.reactjs.net/htmltojsx.htm the pasted what I copied from tailwind website -
<div class="bg-cover bg-center ..." style="background-image: url(...)"></div>
then I just copied my new generated jsx code-
style={{ backgroundImage: 'url(/about.jpg.webp)' }}
I was learning the ng-content. Why need to use it when we can easily write like this
with ng-content
menu.component.html
<div>
<app-message> <h1>Laptop</h1></app-message>
</div>
message.component.html
<div>
<ng-content></ng-content>
<p>something text to be display</p>
<button > Submit</button>
</div>
without ng-content
menu.component.html
<div>
<h1>Laptop</h1>
<app-message> </app-message>
</div>
message.component.html
<div>
<p>something text to be display</p>
<button > Submit</button>
</div>
Using <ng-content> allows you to create flexible reusable components.
For example, a custom app-modal component:
<div class="modal">
<div class="modal-title">
{{title}}
</div>
<div class="modal-body">
<ng-content></ng-content>
</div>
</div>
This is very powerful, and only the start of what you can achieve with <ng-content>
A core prinpiple of software engineering is code reuse (DRY). With this we can bundle all of the logic relating to a component into one component, and inject the content into it.
This is like asking the question
Why not just declare your CSS styles inline instead of in CSS classes?
It is possible, but unmaintainable, and we have evolved beyond that.
Your example is fairly trivial, but it is still useful if you wanted to change style or behaviour based on some injected logic.
There exist some situations when is necessary, maybe no in simple cases but when the app grows up and you have to insert a custom component inside another is very usefully
As you can see from your own example, without using ng-content, the parent component suddenly is partially responsible for the child's layout. It'll get messy real quick, the quicker the more complex the layout gets.
It's useful for displaying components inside of other components, so the components can be reusable. For example, if you want to display some text on a few pages, you call the component with the text inside of the other components that you want the text to be displayed on. It could also be useful for showing different information but styled in the same format. E.g.
if your ng-content already has the information this is an example of how it would be used:
menu.component.html
<ng-content></ng-content>
message.component.html
<ng-content></ng-content>
This is good because you can copy and paste the exact component into another one without having to rewrite the code
If your ng-content is looking for a data source for information to pass into it
<ng-content [data]='data'></ng-content>
This is good because you can recreate the component inside of another component but with different data inside of it.
If you've ever used react, you pass data into it in a similar way here as you would with react props, but instead of props in angular, it will be an #input field. Here is some example code
test.component.html
<ng-content [data]='THIS IS THE DATA'></ng-content>
This is the actual component, as you can see, it is looking for a data source
ng-content.component.html
<p>The data we are looking for is {{data}} </p>
ng-content.component.ts - this says that when the component is called, it is looking for an input called 'data' and the type has to be a string
#Input() data: string;
We would then see the test.component.html displayed like this:
The data we are looking for is THIS IS THE DATA
I'm using the Tabs component of thereact-bootstrap framework. When I put an example:
<div>
<p> AAAAAAA </p>
</div>
inside Tab I don't see anything in this tab.
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
<Tab eventKey="home" title="Home">
<div>
<p>sssssssssssssssssss</p>
</div>
</Tab>
<Tab eventKey="profile" title="Profile">
<div>
<img src="https://cdn.pixabay.com/photo/2019/08/03/12/22/hot-air-balloons-4381674__340.jpg" alt="picture"/>
</div>
</Tab>
<Tab eventKey="contact" title="Contact" disabled>
</Tab>
</Tabs>
Demo here: https://stackblitz.com/edit/react-ufa6nq?file=index.js
You have added three bootstrap css in your project. Two css links are added in index.html file and one in index.js file.
Remove import 'bootstrap/dist/css/bootstrap.css'; line from index.js file and remove one of the bootstrap.min.css link from index.html file.
Here I have updated the working code for you.
https://stackblitz.com/edit/react-bootstrap-tabs-3gt7r7
Hope this will work for you!
Here the issue is react-bootstrap version.
You have react-bootstrap v0.32.4, which is based on bootstrap 3. So removing bootstrap 4 from your code will fix the issue.
Demo
To work with bootstrap 4.x you need to install react-bootstrap v1.0.0-beta.10.
You can check this here, on the header itself.
Note: By default stackBlitz is installing react-bootstrap v0.32.4 (the older version), and not the new version. For this you can raise a query in stackBlitz community.
I'm trying to pass html to a viewchild so it can add it to it's own components html. Until now I haven't found an answer how to solve this.
I'm completely new to Angular, so most of the answers I've read on alot of topics I don't quite understand which makes it pretty hard.
The parent is using NgbModal (#ng-bootstrap/ng-bootstrap) to open a bootstrap modal. Since I don't want to keep repeating the same code for the modal itself all trough the project, I want to use a component for it. The modal component (viewchild) is working, except that I can't manage to pass html to the modal component so it can use the html to fill in the modal-body.
Triggering the modal like:
this.modalService.open(content, options).result;
Is there some way to use the inner html for example like:
<app-modal #modal>
<img src="test.png" alt="test" />
</app-modal>
So the image will be the content of the bootstrap modal.
I managed to finally fix it by wrapping the included component into ng-template.
Parent component's html including the module/viewChild:
<ng-template #imageFileModalContent let-c="close" let-d="dismiss">
<app-modal>
<img [src]="msgFile" />
</app-modal>
</ng-template>
Modal's html (viewChild):
<div class="modal-body form-group">
<ng-content></ng-content>
</div>
Read : Content Projection
you can make use of ng-containt : Working Demo
app-modal.component.html (selector will be app-modal)
<div class="dynamiccont">
<ng-content></ng-content>
</div>
when you use this component like this
<app-modal #modal>
<img src="test.png" alt="test" />
</app-modal>
this will work for you, key part is to make use of ng-content which helps you to include content.
I am trying to modify Shopify Polaris Button components colors for React, I tried to change style.css file but nothing happened.
Any idea how to do so?
App.js
import React, { Component } from 'react';
import '#shopify/polaris/styles.css';
import {Page, Card, Button} from '#shopify/polaris';
class App extends Component {
render() {
return (
<div className="App">
<Page title="Example app">
<Card sectioned>
<Button onClick={() => alert('Button clicked!')}>Example button</Button>
</Card>
</Page>
</div>
);
}
}
export default App;
I am trying to modify node_modules/#shopify/polaris/styles.css , but it does not make ay effect to button color.
The Polaris design system is meant to provide consistency to apps within the Shopify ecosystem. It’s not intended as an alternative to something like Bootstrap or Foundation, so changing button colors wasn’t something we built the library to support.
Even thou full colorizing on a button isn't possible. You can partially modify a button like so:
<div style={{color: '#bf0711'}}>
<Button monochrome outline>
Click Me
</Button>
</div>
This won't give you full control to like the background color but it can help to partially stylize the button. It creates an outline and light background when you roll over.