I want to convert a complex div container done by a web designer in pure HTML into a React component. This div container has states for React to manage. I know I can convert the div to JSX but that would mean double work for both designer and myself. dangerouslySetInnerHTML doesn't handle states. The idea is that I can create subclass of React.Component, define states and render the state values into the div container without using JSX?
Here's a snippet of the div container markup:
<div id="activities_panel" class="panel">
<div class="panel-body nav-tabs-animate nav-tabs-horizontal" data-plugin="tabs">
<ul class="nav nav-tabs nav-tabs-line" role="tablist">
<li class="nav-item" role="presentation">
<a aria-controls="activities" class="active nav-link" data-toggle="tab" href="#activities" role="tab">Activities <span class="tag tag-pill tag-danger">5</span></a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active animation-slide-left" id="activities" role="tabpanel">
<ul class="list-group">
<li class="list-group-item">
<div class="media">
<div class="media-left">
<a class="avatar" href="javascript:void(0)"><img alt="..." class="img-fluid" src="avatar1.jpg"></a>
</div>
<div class="media-body">
<h4 class="media-heading">Avatar 1 <span>posted an updated</span></h4><small>active 14 minutes ago</small>
<div class="profile-brief">
“Test test”
</div>
</div>
</div>
</li>
</ul>
<a class="btn btn-block btn-default profile-readMore" href="javascript:void(0)" role="button">Show more</a>
</div>
</div>
</div>
</div>
A few tips to convert your big div into React component:
I can see you can create at least three components: <activities-panel> as the container, <nav-tabs> and <tab-content> as children. Of course, you can create more sub-level components if you wish which makes the maintenance easier.
Change all class to className
You can either store the state variable in the container and passed them down via context API or simply use props. So the container <activities-panel> will manage the state of the component.
Don't use dangerouslySetInnerHTML if possible.
Use <button> for buttons and <a> for links so it is more accessible.
Related
suppose I have two components Component A and component B
<div class="theme-layout">
<div class="responsive-header">
<div class="mh-head first Sticky">
<span class="mh-btns-left">
<a class="" href="#menu"><i class="fa fa-align-justify"></i></a>
</span>
<span class="mh-text">
<img src="images/logo2.png" alt="">
</span>
<span class="mh-btns-right">
<a class="fa fa-sliders" href="#shoppingbag"></a>
</span>
</div>
)
and another component B like
return (
<div class="bottombar">
<div class="container">
<div class="row">
<div class="col-md-12">
<span class="copyright"><a target="_blank" href="https://www.templateshub.net">Templates Hub</a></span>
<i><img src="images/credit-cards.png" alt=""></i>
</div>
</div>
</div>
</div>
</div>
</div>
)
Main div is starting from component A and ending in component B how can i split these two component into header and footer in react js.?
If I am not wrong you cannot start your main div from component A and ends in component B , In react single component JSX is only valid for these component only, so we can cannot used main div for those two component, and don't forget to self-closed tag
I am developing an app with the MEAN stack...and the question is...
How can I divide the interface of my app?
I have a static page(such a webpage) and an application page, the interface is different but the development that I have followed is...
In the file 'index.js' of my app, where I put all the dependencies and set the . In this file I have set the header and the footer of the static page for not repeat it in all the html files. It is working when I navegate above the static page, but when I am developing the app-page I want to change the main interface.
So, Must I repeat the code? or Can I set directives like ng-show to show each interface in each situation?
There I show you the mockups of my app:
Static:
Application:
The body target of my 'index.js' file:
<body>
<script>
$(document).ready(function(){
$('.button-collapse').sideNav();
});
</script>
<!-- The var changeInterface control if we are on main page or app page-->
<header>
<nav class="dipu-green">
<div class="nav-wrapper container" role="navigation">
<a id="logo-container" href="#" ui-sref="/()" class="" style="color:white" >
<b>R.U. Pino Montano</b>
</a>
<ul class="right hide-on-med-and-down">
<li>
<a href="#!/" style="color:white" >Inicio</a>
</li>
<!--data-activates="reportsDropdown" dropdown-button -->
<li>
<a href="#!/news" style="color:white">
Noticias</a>
</li>
<li>
<a href="#!/info" style="color:white">
Información</a>
</li>
<li>
<a href="#!/team" style="color:white">
Equipo</a>
</li>
<li>
<a href="#!/services" style="color:white">
Servicios</a>
</li>
<li>
<a href="#!/contact" style="color:white">
Contacto</a>
</li>
<li>
<a href="#!/app" style="color:white">
Resi App</a>
</li>
</ul>
<ul id="nav-mobile" class="side-nav">
<li>
<a href="#!/">
<i class="material-icons">mood</i>Inicio</a>
</li>
<!--data-activates="reportsDropdown" dropdown-button -->
<li>
<a href="#!/news">
<i class="material-icons">new_releases</i>Noticias</a>
</li>
<li>
<a href="#!/info">
<i class="material-icons">info</i>Información</a>
</li>
<li>
<a href="#!/team">
<i class="material-icons">people</i>Equipo</a>
</li>
<li>
<a href="#!/services">
<i class="material-icons">business</i>Servicios</a>
</li>
<li>
<a href="#!/contact">
<i class="material-icons">contact_mail</i>Contacto</a>
</li>
<li>
<a href="#!/app">
<i class="material-icons">exit_to_app</i>Resi App</a>
</li>
</ul>
<a href="#" data-activates="nav-mobile" style="color:white" class="button-collapse">
<i class="material-icons">menu</i>
</a>
</div>
</nav>
</header>
<main>
<div class="ribbon">
<span>BETA</span>
</div>
<!-- el controlador se añade a una parte del body-->
<div class="section">
<div ui-view></div>
</div>
</main>
<footer class="page-footer dipu-green">
<div class="container">
<div class="row dipu-green">
<div class="col s12">
<div>
<h5>Contacto</h5>
<ul>
<li><i class="tiny material-icons">location_on</i> Avda. Alcalde Manuel del Valle nº 28</li>
<li>41008, Sevilla (España)</li>
<li><i class="tiny material-icons">account_balance</i> C.I.F.: XXXXX </li>
<li><i class="tiny material-icons">local_phone</i> Tel: XXX XXX XXX</li>
<li><i class="tiny material-icons">email</i> rupinomontano#gmail.com</li>
<li><i class="tiny material-icons">web</i> rupinomontano.com</li>
</ul>
</div>
</div>
<div class="col s12">
<div>
<h5>Desarrollo</h5>
</div>
</div>
<div class="col s12">
<h5>Síguenos en</h5>
<div id="social">
</div>
</div>
</div>
</div>
<div class="footer-copyright">
<span style="margin-left:15%;">© 2018 Developed by </span>
</div>
</footer>
</body>
Thank you in advance!
As you are using angularjs, you can create a single page application.
answering to your qustions
Q: Must I repeat the code?
Ans - in angularjs you should not repeat your code, you maintain common part in one page and from that page you can render to diffrent page. this the beauty of single page application. to create a single page application you need routing. to achive routing in angular js you can use angular router package or you can use UI Router package.
please chack this example for angular router : https://www.journaldev.com/6225/angularjs-routing-example-ngroute-routeprovider
please chack this example for UI router : https://scotch.io/tutorials/angular-routing-using-ui-router
Q: Can I set directives like ng-show to show each interface in each situation?
Ans - you should use routing directive. from these directive you can navigate to different page without reloading pages again again.
i'm using angular-gridster for designing dynamic user dashboard. how can we make gridster widget data content responsive while resizing widget callback, can any one suggest me how to make it responsive.
<div id="gridster" >
<div gridster="gridsterOpts">
<ul>
<li gridster-item="widget" ng-repeat="widget in DashboardControls">
<div class="box">
<div class="box-header">
<h3 style="width: 100%;word-break: break-all; table-layout: fixed;">{{widget.ControlobjectName}}</h3>
<div class="box-header-btns pull-right">
<a title="settings" data-toggle="modal" data-target="#widgetSettingModal" ng-click="openSettings(widget)"><i class="glyphicon glyphicon-cog"></i></a>
<a title="Remove widget" ng-click="remove(widget)"><i class="glyphicon glyphicon-trash"></i></a>
</div>
</div>
<div class="box-content">
<div>
<img class="img-responsive" ng-src="{{widget.ThumbnailPath}}" />
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
You'll have to create a custom directive that is embedded into the widgets (or multiple custom directives). This custom directive can contain logic that responds to the data and changes the content of the widgets.
I'd like to have multiple instances of the same bootstrap tab markup in the DOM. Unfortunately it appears that bootstrap tabs mandate the use of IDs which means the same IDs conflict as IDs should by definition only occur once in the DOM tree.
Example, see jsfiddle, the bottom Foo Bar tabs end up controlling the top tab pane since I've added multiple elements to the DOM with the same ID.
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Foo</li>
<li role="presentation">Bar</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="foo">Foo content</div>
<div role="tabpanel" class="tab-pane" id="bar">Bar content</div>
</div>
</div>
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Foo</li>
<li role="presentation">Bar</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="foo">Foo content</div>
<div role="tabpanel" class="tab-pane" id="bar">Bar content</div>
</div>
</div>
As I'm using Angular, as with any template engine, I can differentiate the IDs in the template with a scope variable and ensure that variable is unique throughout my application. Example, using {{id}} as a suffix.
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Foo</li>
<li role="presentation">Bar</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="foo{{id}}">Foo content</div>
<div role="tabpanel" class="tab-pane" id="bar{{id}}">Bar content</div>
</div>
I'd like to know if there is a nicer way to solve this problem? Any way of configuring bootstrap to use class based selectors etc?
Check out the ui-bootstrap package. It makes dealing with tabs way easier in Angular.
Being new to Angularjs, I need a bit of help with this issue. I am attempting to add ng-click="getGallery(57)" to a modal tab. Adding via jQuery is not the issue, however I realize when I do this, Angular is not compiling the newly added ng-click. I have a simple controller
function imageGalleryCtrl ($scope, $http) {
//get gallery info on click
$scope.getGallery = function(id)
{
$http.post('/beta/images/get_images',{'id': id}).success(function(data)
{
$scope.images = data.thisGal_images;
$scope.images.galID = id;
});
};
}
I add the ng-click to the element with jQuery
//Edit image tab to use angularjs
$('#image_edit a').attr('ng-click','getGallery(' + settings.id + ')');
How do I force Angular to compile this newly added ng-click?
Thanks!
HTML Modal:
This is the modal that is called when the gallery name is clicked.
<div class="modal fade hide modal-creator" id="imageUploader" tabindex="-1" data-focus-on="input:first">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h3>Create New Gallery</h3>
</div>
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
Edit Image Gallery
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in" id="home">
<?php include('create.php'); ?>
</div>
<div class="tab-pane fade" id="upload">
<?php include('upload.php'); ?>
</div>
<div class="tab-pane fade" id="edit">
<div class="span9">
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}" alt="">
{{image.orgName}}
</li>
</ul>
</div><!-- /span9 -->
</div><!-- /row -->
</div>
</div>
</div><!-- /modal-body -->
<div class="modal-footer">
Close
Next
</div>
</div>
Update
So really attempting to do this the Angular way, and after some studies here is where I am at.
The controller is the same as above and I have updated the tabs on the modal as follows.
<div class="modal-body">
<ul id="myTab" class="nav nav-tabs">
<li id="image_home" class="">
Home
</li>
<li id="image_upload" class="">
Upload Image Gallery
</li>
<li id="image_edit" class="">
<a ng-click="getGallery(57)" href="#edit" data-toggle="tab">Edit Image Gallery</a>
</li>
</ul>
If I hard code the ng-click as above, the tab updates as expected. What I am trying to make happen, is when the modal is called, (#image_edit a) gets a defined ng-click="getGallery(id). I need to tell Angular to look at the ng-click again for the id.
Although I too think that you should try and find another approach, the answer to your question
How do I force Angular to compile this newly added ng-click?
is
// remove and reinsert the element to force angular
// to forget about the current element
$('#button1').replaceWith($('#button1'));
// change ng-click
$('#button1').attr('ng-click','exec2()');
// compile the element
$compile($('#button1'))($scope);
See this working example: http://plnkr.co/edit/SgvQzaY0TyFHD1Mf0c3F?p=preview
Basically what I'm getting at is you want to probably make this happen:
<ul id="imageSort" class="gallery-container">
<li ng-repeat="image in images">
<img
ng-src="http://images.onlinealbumproofing.com/imageGallery/{{image.galleryID}}/{{image.imageName}}"
alt=""
ng-click="getGallery(image.galleryID)"
>
{{image.orgName}}
</li>
</ul>
The problem is I'm unsure of the relationship between the settings.id and the galleryID for a particular image. If you can set up this relationship in the data so it just automatically binds you're in better shape.