I am migrating from react-bootstrap v0.32.4 to v1.0.0-beta.5 and it is written in the migration guide that Panel has been replaced by the Card component.
However, I cannot find anything in the new documentation of Card similar to the old Panel.Collapse from v0.32.
How can the following (from v0.32.4) be done with react-bootstrap v1 by not mixing clean JSX code with plain bootstrap css classes (e.g. accordion)?
<Panel>
<Panel.Heading>
<Panel.Title toggle>Click Me</Panel.Title>
</Panel.Heading>
<Panel.Collapse>
<Panel.Body>Collapsible Body</Panel.Body>
</Panel.Collapse>
</Panel>
It took a bit of digging, but I found this link:
https://react-bootstrap.github.io/utilities/transitions/#collapse
where it appears to have extracted the Collapse logic out of Panel and put it into it's own component, managed by boolean state.
Related
Could you tell me the way to do something like this in tailwindcss:
first[&>.a-child-class]:text-5xl
I'm trying to style the first element by the way passing classes when it's rendering,I want to change its child's style, but the code above did not work.
I tried to put that classes inside component by default, but I realized, the component need to reusable, so that it is not reasonable.
please help meeeee.
thank you so much, have nice day.
In tailwind 3.1, arbitrary variants can be stacked with built-in modifiers or with each other, just like the rest of the modifiers in Tailwind. You can see the document here. You are missing : after first.
Example:
<div className="first:[&>.a-child-class]:text-5xl">
<p className="a-child-class">first</p>
<p className="a-child-class">second</p>
<p className="a-child-class">third</p>
<p className="a-child-class">forth</p>
</div>
Tailwind Play demo
I want to change my website to React. So I am changing the normal bootstrap to React bootstrap. I have just a simple question, what's the equivalent of Bootstrap visible-xs in React bootstrap? Like in simple bootstrap we have 'hidden-xs' and we use xsHidden in Reactboostrap.
Just ran into that today! visible-xs went away in bootstrap 4, and react-bootstrap 1.0 now uses bootstrap 4. The same is true of hidden-xs (and in all of the various sizes... hidden-sm, hidden-md, etc.)
In my case <Row className="visible-xs"> becomes <Row bsPrefix="d-block d-sm-none">
The bootstrap documentation has a nice table on how to convert to the new styles
I've been learning ReactJS for the past couple of days and have been trying to build a website using semantic-ui-react in ReactJS. I understand there are components that one can use now but I am stuck on what to do in a scenario such as the creation of a footer... typically, in my raw HTML, I would have the semantic.min.css file included and at the bottom:
<div class="ui inverted pink vertical footer segment">
<div class="ui center aligned container">
<h4 class="ui inverted header">© Copyright 2017 | All rights reserved | Blahhh</h4>
<i class="facebook square icon big"></i>
<i class="twitter square icon big"></i>
<i class="linkedin square icon big"></i>
</div>
</div>
Now I want to translate this into semantic-ui-react. Footer is a class not a component in react by default so there's no component for it... Which I assume means I have to make my own component and basically write the code above. My problem now is that I don't know how to make it render as if I was using regular old semantic.min.css. I read somewhere to download the css file and include it, but one, I don't know where to (MyCustomFooterComponent or index.html), and in doing that, am I not increasing by load times on my website. Would this mean that everywhere there's a footer, just for one small section of custom code, the entire CSS file is going to be loaded?
Also, after building, would there be a double-import scenario from my addition of the Semantic CSS and semantic-ui-react's CSS?
Sorry for the long question but I'm new to this and I like to find out what I can before making a terrible mistake.
If you are using react-semantic-ui then you already include 'the old semantic-ui.min.css' already. See here.
Hence, create a component and put those code in render(), change 'class' to 'className' and then use it.
I would need to add an autocomplete chips component in our Angular 1.6 application. We are using Typescript, Webpack 2. As we are already using angular-ui-bootstrap, we do not want to introduce also angular-material in order to avoid style conflicts. However the wished result is exactly what material chips provide.
Is there a directive or component that i can use in my case? I found this library but it runs endless exceptions when I import it.
unfortunately I could find only partial solutions with bootstrap typehead, but then I would need to implement all the "chips" part, making me think of re-inventing the wheel.
Stack Newb here. I have an identical problem as yours. Here's how I resolved this:
1. Resolve the ReferenceError: error is not defined within the angular-chips library
The library you used (angular-chips) wasn't designed with typescript in mind. So, you'll first need to resolve the following error ReferenceError: error is not defined by defining it for them in the line above with var error;. This should prepare angular-chips for your webpack useage.
The second issue you'll find is how to add your typeahead-template-url with webpack in the mix. Rather than referring to a separate html file, use an inline template as referenced here: Bootstrap-UI Typeahead display more than one property in results list?.
If you're lazy like me and don't want to follow that hyperlink, use this as example:
2. Template to be added before the <chips> tag:
<script type="text/ng-template" id="yourTemplate.html">
<a tabindex="-1">
<i ng-class="'icon-'+match.model.type"></i>
<span ng-bind-html-unsafe="match.model.title | typeaheadHighlight:query"></span>
</a>
</scrip>
3. Include template in your directive:
typeahead-template-url:"yourTemplate.html"
Worked like a charm for me.
still struggling with the new component router as of Angular2 RC.1.
My app's components are assembled in this manner:
Main
- NavigationBarComponent
- ContentComponent
- UserComponent
- UserSettingsComponent
- UserNotificationComponent
- CarComponent
- CarDetailsComponent
- ...
The routing works fine for ContentComponent and all its child components. The issue is creating routes within the NavigationBarComponent, which is a permanently visible component offering some shortcuts to components.
If I assemble a link from the NavigationBarComponent to the UserSettingsComponent, the route should look like this:
/user/:id/settings
I managed to create such a link with this:
<a [routerLink]="['/user/'+loggedInUser.id+'/settings']">
Concatening a link like this seems pretty ugly and wrong, though. I've tried a syntax like it was used in the deprecated routing of the beta versions
<a [routerLink]="['/user/:id/settings',{'id':loggedInUser.id}]">
but the output looked like this:
/user/:id/settings;id=56edad04c506d7e7963edd48
I couldn't find any examples for this requirement in the docs or live examples. Any suggestions? Thanks in advance.
It should be:
<a [routerLink]="['/user', 'loggedInUser.id', 'settings']">