I'm pretty new to angular, and I'm trying to create a modal as a component (trying not to use ui-bootstrap or libraries) and I'm having trouble wrapping my head around it. My code:
App.component('modal', {
templateUrl: '../modal.html',
controller: ChocoListCtrl
});
I have a modal.html which I want to reference my controller which displays items inside a cart:
<h2>Your Cart</h2>
<div ng-if="!cart.length">
There are no items in your cart
</div>
<div class="col-lg" ng-repeat="item in cart | unique : 'type'">
<div class="col-md">
<span>Type: </span>
<strong>{{item.type}}</strong>
</div>
<div class="col-md">
<strong>${{item.price}}</strong>
</div>
<div class="col-md">
<span>Quantity: </span>
<strong>{{item.quantity}}</strong>
</div>
<div class="col-md">
<button ng-click="removeItem()">Remove</button>
</div>
</div>
However that's really the extent of my knowledge. I'm not sure how to make the modal popup work or even start it. Any guidance would be greatly appreciated!
It looks like you've defined your component well, all you have left to do is rig up the trigger:
<modal ng-if="showModal"></modal>
<button ng-click="showModal = !showModal">Show Modal</modal>
This may change based on the configuration of the parent element, but it's the same idea.
Then style the modal in such a way that it pops up in the desired location. position:fixed, etc.
You may want to consider dropping a backdrop behind the modal that has an ng-click attached to it to close the modal.
Related
I have a 3 tabs Account Information, Address Book, and Payment Options like this,
function AccountDetails() {
return (
<div className="account__details">
<AccountDetailsTabs>
<div label="Account Information">
<AccountInformation></AccountInformation>
</div>
<div label="Address Book">
<AddressBook></AddressBook>
</div>
<div label="Payment Options">
<PaymentOptions></PaymentOptions>
</div>
</AccountDetailsTabs>
</div>
);
}
Now, when clicked in the Account Information Tab, it renders the AccountInformation component
import React from "react";
import "./AccountInformation.css";
function AccountInformation() {
return (
<div className="account__information">
<div className="account__information__instruction">
Please update your personal account details, update your address book or
change your email setting here.
</div>
<div className="account__information__container">
<div className="userDetails">
<span>
{" "}
<strong>First Name:</strong>{" "}
</span>
<span>Aman</span>
</div>
</div>
<div className="account__information__buttons row justify-content-between">
<div className="edit__button__container col-6">
<button className="edit__button">EDIT</button>
</div>
<div className="changepassword__button__container col-6">
<button className="changepassword__button">CHANGE PASSWORD</button>
</div>
</div>
</div>
);
}
export default AccountInformation;
The image below illustrates it,
As I am inside the Account Information tab, inside this tab there are EDIT & CHANGE PASSWORD buttons.
Now, when I click on the EDIT or CHANGE PASSWORD buttons the tab should render the EdIT component keeping all things in the page same. How can I do that?
I am known to the react-router but I don't think this is the good practice using react-router here because there are many other components in the page.
When clicked on one of the button, it should give the following result.
It would be even great, if you could give link from reactjs official doc to know more about it. Thanks.
Just make the two sections different components. If you have a component that isn't changing or is the background/backdrop, you could make it the parent. Or you could make them siblings with another component wrapping around both
I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.
I am having trouble with a little site I have been working on; I want a sort of "stream" container that holds "cards" of "content," where this "content" is some "text" as well as some "stats."
This is the HTML I currently have:
<div id="stream">
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
<div class="card">
<div class="content">content
<div class="text">
blahblahblah
</div>
<div class="stats">
blahblahblah
</div>
</div>
</div>
</div>
Eventually, I want users to be able to prepend "cards" to this "stream" as well.
Now, however, I am trying to implement some jQuery function to hide the "stats" of a card until it is clicked on. So after setting display to none in CSS of the stats, I made this in a javascript file:
$(document).ready(function(){
$("#stream, div.card").click(function() {
$(this).find($("div.stats")).show();
});
});
It sort of works; the stats of a card are hidden until I click on a card. When I click on a card, however, all the cards' stats divs are shown.
I was hoping to somehow make it that the specific card clicked is also the (only) one that gets shown. Obviously, the current way I am doing this opens all of them as jQuery I have selects all the cards at once; how can I remedy this?
Again, I apologize if this question has been asked; I could not seem to find something similar, and I really want this to work . . .
P.S. I tried to search for this particular instance; alot of suggestions were to just give divs ids, but this feels inconvenient when I eventually want users to prepend cards?
Your selector ->
"#stream, div.card"
was basically asking for all #stream and all div.card..
But what you really meant was, find all div.card inside #stream. and this would be, (aka without the ,).
"#stream div.card"
Also you jquery find doesn't require you to convert into a jquery object, so find("div.stats") will do the trick.
I'm trying to create a custom collapsible panel using materialize but I don't know why the button is not triggering and showing the panel body. I have created a fiddle with my custom example that doesn't work and one materilaize example with their structure that works.
From my inspect I saw that the active class is not being added on panel body while clicking on panel header which is quite strange.
So if anyone can help me with that please ... modifying materialize components is like a pain in the ass !
<div class="collapsible">
<div class="box">
<div class="1left">Left</div>
<div class="2center">Center</div>
<div class="3right">Right
<a class="collapsible-header">Colapse header</a>
</div>
</div>
</div>
<div class="collapsible-body">
This should be the body collapsed
</div
http://jsfiddle.net/zt5515zt/90/
In Materialize you need both collapsible-header and collapsible-body at the same level in order to make Collapsible work.
Just Change the level of you collapsible-body as shown below and it will work.
<a class="collapsible-header">Colapse header</a>
<div class="collapsible-body">
This should be the body collapsed
</div>
Hope this helps you solve the problem.
I need to create templates in handlebars for an html page and the whole html should go inside of templates. For e.g. I have:
<div class= "something-pull-left-something">
<div class="someclass">
<li a href= ''>Some more info and some more divs and spans and html code</li>
</div>
</div>
and I should create a big template for the first div ''something-pull-left-something'' and smaller templates inside of it for the other items and I cant quite understand how this should happen.
Divide it up into parts as it makes sense. Try to avoid having one huge template. Instead, make one template that includes a number of other templates. You may run into performance issues but worry about that later -- it is likely not an issue.
Make main template which contains header, body and footer.
Add partials to the main template.
If you wants to use Bootstrap then you can go through this http://getbootstrap.com/components
or you can use bootstrap class
<div class="container">
<div class="col-md-12">
//code
</div>
<div class="col-md-12">
<div class="col-md-6">
//code
</div>
<div class="col-md-6">
//code
</div>
</div>
</div>