This question might seem silly question. But I'm really stuck with it.
I am trying to create a carousel with above center title and below centered Description text. There are lot of example on google but I couldn't find anything appropriate.
I am using angular-material and there is no carousel implemented in angular-material till now.
there is awesome carousel in materializecss but when I am adding materialize in project lot of element CSS conflicting because of angular-material and materializecss.
then I decided to use some other directives like JK carousel it is not allowing me create text on image.
there is carousel in ui.bootstrap it also getting conflict with drop downs component.
Could anyone please tell me how can I achieve my requirement?
I have to use angular-material, there's no other choice. So any help using angular-material will be a great support.
I am currently using angular 3d carousel in my angular-material project. It has html slide version. You can build all your angular material classes in that slide html.
<carousel3d-slide ng-repeat="slide in app.slides2 track by $index" ng-style="{'background': slide.bg}">
<div style="padding: 20px; color: #fff">
<md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card with image</span>
<span class="md-subhead">Large</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-lg card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</md-card-actions>
</md-card>
</div>
</carousel3d-slide>
Related
I am wondering, I did not find carousel component in Semantic UI.
I feel it is very common and useful component.
I know one option OWL Carouse. I do not want to use jQuery, though for Semantic UI I will just include jQuery. Rest of the things I want to achieve via Angular.
I need to know the possible options without writing jQuery code.
Semantic UI evidently does not currently have a carousel module, and it is an open issue.
There are, however, some small snippets on that page that can achieve what you'd like to. See slick and Swiper.
Here is another alternative.
fotorama.io
yes there is no carousel in Semantic UI at moment but you can use cards somewhat similar here is one I found to be closest to bootstrap carousel;
<div class="ui card">
<div class="ui slide masked reveal image">
<img src="/images/avatar/large/jenny.jpg" class="visible content">
<img src="/images/avatar/large/elliot.jpg" class="hidden content">
</div>
<div class="content">
<a class="header">Team Fu & Hess</a>
<div class="meta">
<span class="date">Created in Sep 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="users icon"></i>
2 Members
</a>
</div>
</div>
hope this helps,
cheers.
Here is the link you can create a coursel in semantic ui.
https://codesandbox.io/s/43pv7wm6n9
Hopefully it will help you.
I'm starting to learn AngularJS and Angular Material.
I have a problem on understanding the md-tabs.
<section layout="row">
<div layout="column"><img id="ApplicationLogo" src="https://material.angularjs.org/latest/img/icons/angular-logo.svg"></div>
<div layout="column" id="ApplicationTitle" layout-align="center start">Application Title</div>
<div layout="column" id="ApplicationWelcome" flex layout-align="center end">Angemeldet als Test User</div>
<div layout="column" layout-align="center center"><img id="ApplicationAvatar" src="http://findicons.com/files/icons/1072/face_avatars/300/d05.png"></div>
</section>
Here is a demo: http://plnkr.co/edit/72ZNb70BjSM6xP7RnSvH?p=preview
Any hint why my tabs do not change their content?
you linked to wrong angular material css version.
you used angular-material.js 1.0.7 and angular-material.css 1.1.0-rc2.
changed to the correct version of css should work. (/1.0.7/angular-material.css)
The reason that it didn't work was that the required css class md-visually-hidden in 1.0.7 is renamed to _md-visually-hidden in the 1.1.0.
Don't want to go into too much detail unless you ask for. But try to correct the version and see what happen.
I am using angular material to create my site. I would like to display my products in a grid list with each tile has a dynamic height so that the result should be in like this page https://www.tumblr.com/search/printify.
I tried to do something like
<div class="md-padding" layout="row" layout-xs="column" layout-wrap>
<div flex-xs="50" flex-sm="50" flex-md="33" flex-gt-md="25" ng-repeat="n in [0,1,2,3]">
<md-card md-whiteframe="4" ng-repeat="result in result[n] | limitTo:limit" >
......
</md-card>
</div>
</div>
it works fine in 4-col display. however when resizing the screen to md and display in 3-col, the 4th-column is display under the 1st-column and quite ugly.
I hv tried on Grid-list too but no clue, may anyone can help, please?
I'd recommend using md-grid list. I edited Codepen from the Angular Material site here: http://codepen.io/anon/pen/qZzmpa and added a card to the tiles. With just:
<md-card>
<md-card-content>
Hi I'm a card
<md-card-content>
<md-card>
inside the tiles and it's pretty close.
https://material.angularjs.org/latest/demo/gridList
Im working on a project where I want to use a carousel to display some different content. I will not create the slides dynamically using an ng-repeat, this is because I have to move some of the content from other parts of the DOM into the slide.
I want to have some links with title connected to each slide, so if I click that link it should scroll to that slide. I have managed to do this, but the sliding behaviour is not as expected. Here is a plunker in which the weird behaviour is displayed: http://plnkr.co/edit/oZrLzRaLb5cAmMBnz4p0?p=preview
<div ng-controller="CarouselDemoCtrl as car">
<a ng-click="car.active = 0">Slide 1</a>
<a ng-click="car.active = 1">Slide 2</a>
<a ng-click="car.active = 2">Slide 3</a>
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="false">
<uib-slide index="0">
<div style="background:blue; height:600px;">
Some content in here
</div>
</uib-slide>
<uib-slide index="1">
<div style="background:red; height:600px;">
Some content in here as well
</div>
</uib-slide>
<uib-slide index="2">
<div style="background:green; height:600px;">
Some cool content in here
</div>
</uib-slide>
</uib-carousel>
</div>
Any thoughts of why this happens, and how I can solve it?
Note: Im using angular 1.5.0 and ui-bootstrap 1.2.4
Best regards,
Daniel
have you install ng animation,
or you don't want to sliding you could edit the transition="true" to disable it
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="true">
https://github.com/angular-ui/bootstrap/issues/5601
Issue seems to be in the angular-ui code itself;
In the $watch of 'active' "currentIndex = index;" is set before "self.select(slides[index]);" is run, by moving it down after it it'll work
I am using side navigation in my angular application, i am using buttons inside the side navigation with a tool tip on it. But it displays in bottom of the icon, i need it on the right side. I dont see any css attached to it.
Here is the code and plnkr:
<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('gt-sm')">
<md-list class="muppet-list">
<md-item ng-repeat="it in muppets">
<md-item-content>
<md-button ng-click="selectMuppet(it)" ng-class="{'selected' : it === selected }">
<img ng-src="{{it.iconurl}}" class="face" alt="">
{{it.name}}
</md-button>
<md-tooltip>
Create Chart
</md-tooltip>
</md-item-content>
</md-item>
</md-list>
</md-sidenav>
SIDE NAVIGATION
I have done it using the md-direction attribute
<md-tooltip md-direction="right">Save</md-tooltip>