I am using UIKit 3 Beta in Meteor, ie with React. However my Slidenav icons
<a href="#" uk-slidenav-previous></a>
<a href="#" uk-slidenav-next></a>
are not showing. Do I need to import the components separately. If so how? Since I am working in Meteor UIkit is a node install. I do not see the components.
Please help.
The docs say:
React will work with data-uk-* prefixes only.
https://getuikit.com/docs/javascript#uikit-and-reactive-javascript-frameworks
Try to change your attributes:
<a href="#" data-uk-slidenav-previous></a>
<a href="#" data-uk-slidenav-next></a>
Related
I am using adminLTE tempate for my react js app. I am using react router Link to specified pathname with state like below.
<Link className="nav-link text-white" to={{pathname: "/calendar", state: groups: this.state.groups}}}>Calendar</Link>
Everything is working fine in the above code. But I need to add data-widget="pushmenu" for my sidebar to collapse in mobile devices.
If I use the below code
`<Link data-widget="pushmenu" className="nav-link text-white" to={{pathname: "/calendar", state: groups: this.state.groups}}}>Calendar</Link>`
pushmenu widget is working but the calendar componenent is not working. I used higher order like below which is also not working
<a data-widget="pushmenu">
<Link>Calendar</Link>
</a>
Please help me with this issue
I'm using font awesome and have imported it in index.js
import '././styles/fontawesome/css/fontawesome.min.css';
following in filter component
<span onClick={this.togglem.bind(this)}>
{/*<span className="rTitle">Filters</span>*/}
<i className="fa fa-filter" aria-hidden="true"></i>
</span>
Here, the icon fa-filter is not getting displayed can anyone lemme know whats going wrong
Using double dots its throws this exception:
You attempted to import
../../../styles/fontawesome/css/fontawesome.min.css which falls outside of the project src/ directory. Relative imports outside of
src/ are not supported.
structure is
src/filter.js
src/styles/fontawesome
version -5.5.0
i've imported in filter pointings are all right it show the css styles
when inspected but does not show the icon
Your import looks wrong import '././styles/fontawesome/css/fontawesome.min.css'; you're probably looking for import '../../styles/fontawesome/css/fontawesome.min.css'; (pay attention to the dots).
If you're using React with JSX (you're most likely doing it) you need to use className to define html class attribute:
<i className="fa fa-filter" aria-hidden="true"></i>
Also, the right way to use FontAwesome in React in documented here: https://fontawesome.com/how-to-use/on-the-web/using-with/react
Can not find a clear way to use Bootstrap with Meteor-React combination. There are a number of packages in Atmosphere which expected to exposure global variable with consequent references to Bootstrap functionality, but after, for example,
meteor add universe:react-bootstrap
import BS from 'bootstrap';
system complaints that 'bootstrap' is not defined.
What I did now, I included CDNs for Bootstrap nd jQuery directly into my client's main.html, and got it working:
render() {
return (
<li>
{this.props.ad.text}
<button type="button" className="btn btn-default btn-lg">
<span className="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
</li>
);
}
But it is not seems a good solution. jQuery is included in Meteor app by default, how to reference it? When I tried to add twbs:bootstrap package, it is also not clear how to include it in html. Simply added, it does not work.
To use React with Bootstrap, you should use this module react-bootstrap. It has been out there for sometimes and seems still good. I use it for some of my Meteor React projects, I have nothing to complain till now.
so I'm currently working on a project written in Flask which I added Bootstrap to. I have recently started adding some react components and I would like to have them look like the other bootstrapped components. Here is some of my code:
This is where I've included my bootstrap.js files and react.js file
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/build/react.js"></script>
<script src="/static/js/build/JSXTransformer.js"></script>
<script src="/static/js/react-bootstrap-bower/react-bootstrap.js"></script>
This html normally is rendered by bootstrap as wonderful little pager icons, but not in react:
return (
<div>
<nav>
<ul className="pagination pagination-lg">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
I understand I didn't put the full return, the return isn't the issue at hand, however, its the styling. I tried adding in a Pager element with the following
var Pager = ReactBootstrap.Pager;
...
//inside some html return
<Pager></Pager>
but I get the response first that ReactBootstrap is not defined. Yet I read that the ReactBootstrap global is created automatically when you include the js file. The other response is that Pager doesn't exist (obviously since ReactBootstrap was unable to return it).
So my question is, can I simply return html without the data-reactid info or somehow have it rendered by bootstrap without needing reactBootstrap? or do is there something I'm missing from my files to use reactBootstrap. Thanks in advance for the help!
I tried to reproduce it in a jsbin, but ReactBootstrap.Pager is a component, and it renders with the correct styles.
You're not loading things correctly.
I am fond of Durandal and KO frameworks, I just find them to be a more elegant, simpler solution.
However Angular with Google behind it had enjoyed better marketing success and hence the more choice of customizations.
Now is there something of equivalent nature on the KO end to Ionic? Or is the war already won and I just need to move on.
TL;DR
Don't know of any alternative for KO/Durandal but going your own way may be a better choice.
What I understand from Ionic it is a wrapper around the core Cordova hybrid framework. As you mentioned it is built with the idea to use AngularJS everywhere. Besides being a wrapper it also provides additional plugins.
So essentially if you will it is just a simplification for NG developers. I don't want to say it is not doing a good job, but actually you can do all of that by your own with Knockout & Durandal as well. So far I've built a few demo apps with Cordova + Durandal and have to say it's getting better and better, especially the node cli tools provided from Cordova accelerate development a lot. The big advantage in my view with going this way is that you have complete freedom of what Frameworks and Libraries you choose.
Choose whatever MVWhatever JS framework you like
Choose your GUI Framework (take a look at Ratchet pretty slick :)
Pick the plugins you need or write them yourself
Decide which CSS derivate you like best or stick to the basic if you dont care
Enjoy modularization and lazy loading with RequireJS :)
I believe you could just reuse Ionic CSS (like you do with Bootstrap) to get mobile-friendly styling, and then wire up some KO bindings to make it respond to user's actions.
A simple example: imagine you want to make a tabbed interface (i took markup from the docs)
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light">
<div class="tabs">
<a class="tab-item active" href="#">
<i class="icon ion-home"></i>
Test
</a>
<a class="tab-item" href="#">
<i class="icon ion-star"></i>
Favorites
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-a"></i>
Settings
</a>
</div>
</div>
With ionic you would have to leverage ion-tabs, but with durandal/KO you have compose and views:
<div class="tabs-striped tabs-top tabs-background-positive tabs-color-light" data-bind="delegatedHandler: 'click'">
<div class="tabs" data-bind="foreach: tabs">
<a class="tab-item" href="#" data-bind="delegatedClick: $parent.setView.bind($parent), css: {active: isActive}">
<i class="icon" data-bind="css: icon"></i>
<span data-bind="text: title"></span>
</a>
</div>
</div>
<div data-bind="compose: {view: activeView, cacheViews: true}"></div>
And then add a topping in your vm:
return {
tabs: [
{title:'Test', view: 'test.html', icon: 'ion-home', isActive: ko.observable(false)},
{title:'Favourites', view: 'favs.html', icon: 'ion-star', isActive: ko.observable(false)},
...
],
,activeView: ko.observable(),
,setView: function(view) {
this.activeView(view.view || view);
this.tabs.forEach(function(v){
v.isActive(v.view === viewName);
});
}
}
It's just to give you idea of possible approach. After all, angular and KO are very similar... And most of ionic's JS components are already implemented in durandal (e.g. navigation closely resembles routing and composition).